@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');
:root{
  --bg:#02070d;--bg2:#04121c;--panel:#061824;--panel2:#0a2130;--line:#12384b;
  --cyan:#00cfff;--cyan2:#45e7ff;--blue:#008ae6;--text:#f6fbff;--muted:#7f9cac;
  --green:#54e9bd;--red:#ff7084;--shadow:0 35px 100px rgba(0,0,0,.5)
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,sans-serif;line-height:1.55;overflow-x:hidden}a{text-decoration:none;color:inherit}button,input,select{font:inherit}button{cursor:pointer}img{max-width:100%}.container{width:min(1180px,calc(100% - 36px));margin:auto}
@media(pointer:fine){body.main-site,body.main-site a,body.main-site button,body.main-site input,body.main-site select,body.main-site summary,body.main-site label{cursor:none}}
#mouse-particles{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:9997}
#cursor-ring{position:fixed;left:-60px;top:-60px;width:16px;height:16px;border:1.6px solid rgba(69,231,255,.98);border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);box-shadow:0 0 22px rgba(0,207,255,.4),inset 0 0 12px rgba(0,207,255,.08);transition:width .12s,height .12s,background .12s,border-color .12s;mix-blend-mode:screen}
#cursor-ring i{position:absolute;left:50%;top:50%;width:3px;height:3px;background:#72efff;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 10px #00cfff}
#cursor-ring.hover{width:26px;height:26px;background:rgba(0,207,255,.08);border-color:rgba(69,231,255,.62)}
.scroll-progress{position:fixed;top:0;left:0;width:0;height:2px;background:linear-gradient(90deg,var(--blue),var(--cyan2));z-index:120;box-shadow:0 0 16px var(--cyan)}
.noise{position:fixed;inset:0;pointer-events:none;z-index:110;opacity:.022;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.ambient{position:fixed;inset:0;pointer-events:none;z-index:-2;overflow:hidden}.ambient i{position:absolute;border-radius:50%;filter:blur(95px);opacity:.12;animation:float 12s ease-in-out infinite alternate}.a1{width:430px;height:430px;background:#0077ff;left:-180px;top:10%}.a2{width:480px;height:480px;background:#00d9ff;right:-210px;top:20%;animation-delay:-4s!important}.a3{width:340px;height:340px;background:#005eff;left:42%;bottom:-180px;animation-delay:-7s!important}@keyframes float{to{transform:translate(60px,-40px) scale(1.1)}}
.topbar{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(2,7,13,.72);backdrop-filter:blur(18px) saturate(150%);border-bottom:1px solid rgba(0,207,255,.07)}.nav{height:78px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:11px}.brand img,.footer-brand img,.panel-brand img,.panel-login-brand img{width:42px;height:42px;border-radius:11px;object-fit:cover}.brand div,.footer-brand div,.panel-brand div,.panel-login-brand div{display:flex;flex-direction:column;line-height:.9}.brand b,.footer-brand b,.panel-brand b,.panel-login-brand b{font:700 16px "Space Grotesk";letter-spacing:1.7px}.brand span,.footer-brand span,.panel-brand span,.panel-login-brand span{font:700 8px "Space Grotesk";letter-spacing:4px;color:var(--cyan);margin-top:5px}
nav#nav-links{display:flex;align-items:center;gap:23px}nav#nav-links>a:not(.btn){font-size:12px;color:#9ab3c0}.nav-panel{padding-left:15px;border-left:1px solid var(--line)}.mobile-menu{display:none;background:transparent;border:0}.mobile-menu span{display:block;width:22px;height:2px;background:#fff;margin:4px}
.btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid transparent;padding:14px 20px;border-radius:11px;background:linear-gradient(135deg,#00a8f2,#45e7ff);color:#011018;font-weight:800;box-shadow:0 15px 40px rgba(0,207,255,.16);transition:.2s}.btn:hover{filter:brightness(1.08);box-shadow:0 20px 50px rgba(0,207,255,.25)}.btn-ghost{background:rgba(5,24,35,.62);color:#dcf8ff;border-color:#1b4f68;box-shadow:none}.btn-mini{padding:9px 14px;font-size:10px}.magnetic{will-change:transform}
.hero{min-height:880px;padding:150px 0 105px;display:flex;align-items:center;position:relative;overflow:hidden}.hero-bg{position:absolute;inset:0;z-index:-2}.hero-bg img{width:100%;height:100%;object-fit:cover;opacity:.42;filter:saturate(1.12) contrast(1.08)}.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(2,7,13,.96),rgba(2,7,13,.72) 50%,rgba(2,7,13,.28))}.hero-fade{position:absolute;bottom:0;left:0;right:0;height:210px;background:linear-gradient(transparent,var(--bg));pointer-events:none}.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:center;position:relative;z-index:2}.eyebrow,.kicker{display:inline-flex;align-items:center;gap:9px;color:var(--cyan2);font-size:10px;font-weight:800;letter-spacing:2px;text-transform:uppercase}.eyebrow i{width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 18px var(--cyan)}.hero h1{font:700 clamp(56px,6.2vw,86px)/.96 "Space Grotesk";letter-spacing:-3.8px;margin:18px 0 24px}.hero h1 span{color:transparent;background:linear-gradient(90deg,#fff,#9af1ff 38%,#00cfff);-webkit-background-clip:text;background-clip:text}.hero-copy>p{max-width:690px;color:#90aebb;font-size:18px}.hero-actions{display:flex;gap:11px;margin:30px 0 38px}.hero-badges{display:flex;flex-wrap:wrap;gap:9px}.hero-badges span{padding:9px 11px;border:1px solid rgba(0,207,255,.12);border-radius:9px;background:rgba(6,22,33,.58);font-size:10px;color:#7f9cac}.hero-badges b{color:white;margin-right:5px}.hero-card{padding:14px;background:rgba(4,17,27,.78);border:1px solid rgba(0,207,255,.17);border-radius:26px;box-shadow:var(--shadow),0 0 80px rgba(0,207,255,.06)}.hero-logo-wrap{position:relative;height:485px;border-radius:18px;overflow:hidden;background:#000}.hero-logo-wrap img{width:100%;height:100%;object-fit:cover}.scanline{position:absolute;left:0;right:0;height:3px;top:0;background:linear-gradient(90deg,transparent,var(--cyan),transparent);box-shadow:0 0 20px var(--cyan);animation:scan 4s linear infinite}@keyframes scan{to{top:100%}}.hero-status{display:flex;justify-content:space-between;align-items:center;padding:14px 7px 2px}.hero-status span{font-size:10px;color:#88a8b8}.hero-status span i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 12px var(--green);margin-right:7px}.hero-status b{font:600 14px "Space Grotesk";color:var(--green)}
.ticker{overflow:hidden;border-top:1px solid rgba(0,207,255,.09);border-bottom:1px solid rgba(0,207,255,.09);background:#041018}.ticker-track{display:flex;width:max-content;gap:26px;align-items:center;padding:14px 0;animation:ticker 22s linear infinite}.ticker span{font:700 10px "Space Grotesk";letter-spacing:3px;color:#6796aa}.ticker i{font-style:normal;color:#1f6b87}@keyframes ticker{to{transform:translateX(-50%)}}
.section,.vps-section,.access-section,.anticheat-feature,.faq-section{padding:105px 0}.section-head{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:46px}.section-head h2,.access-copy h2,.feature-copy h2,.faq-copy h2{font:700 clamp(36px,4vw,52px)/1.04 "Space Grotesk";letter-spacing:-2px;margin:10px 0 0}.section-head p{max-width:520px;color:var(--muted);font-size:13px;margin:0}
.main-plans{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.sale-card{position:relative;overflow:hidden;border:1px solid #12384b;border-radius:22px;background:#051722;box-shadow:0 20px 60px rgba(0,0,0,.18)}.monthly{position:absolute;top:13px;right:13px;z-index:4;padding:5px 8px;border-radius:999px;background:rgba(0,207,255,.13);border:1px solid rgba(69,231,255,.33);font-size:8px;font-weight:900;letter-spacing:1.2px;color:#bff7ff}.sale-image{height:220px;overflow:hidden;border-bottom:1px solid #12384b}.sale-image img{width:100%;height:100%;object-fit:cover;transition:.45s transform}.sale-card:hover .sale-image img{transform:scale(1.055)}.sale-body{padding:22px}.sale-kicker{font-size:8px;letter-spacing:1.5px;color:var(--cyan);font-weight:900}.sale-body h3{font:600 23px "Space Grotesk";margin:8px 0}.sale-body p{font-size:11px;color:#7f9cac;min-height:52px}.price-pair{display:flex;align-items:center;gap:10px;padding:16px 0;border-top:1px solid #113546;border-bottom:1px solid #113546;margin:16px 0}.price-pair strong{font:700 20px "Space Grotesk"}.price-pair i{font-style:normal;color:#4b7183;font-size:8px}.sale-body ul{list-style:none;padding:0;margin:0 0 20px}.sale-body li{font-size:10px;color:#9bb3bf;padding:7px 0}.sale-body li::before{content:"✓";color:var(--green);margin-right:7px}.sale-body .btn{width:100%}
.vps-section{position:relative;overflow:hidden}.vps-bg{position:absolute;inset:0;z-index:-2}.vps-bg img{width:100%;height:100%;object-fit:cover;opacity:.33}.vps-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(2,7,13,.95),rgba(2,7,13,.84),rgba(2,7,13,.98))}.vps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}.vps-card{position:relative;padding:27px 23px 23px;border:1px solid #15465d;border-radius:20px;background:rgba(4,17,27,.84);backdrop-filter:blur(12px)}.vps-card .monthly{top:11px;right:11px}.vps-card.featured{border-color:#1a9ccc;box-shadow:0 20px 60px rgba(0,207,255,.08)}.hot{position:absolute;right:11px;top:41px;background:var(--cyan);color:#001019;font-size:7px;font-weight:900;padding:4px 6px;border-radius:999px}.plan{display:block;margin-top:13px;font-size:9px;font-weight:900;letter-spacing:1.4px;color:var(--cyan2)}.vps-card h3{font:700 29px "Space Grotesk";margin:15px 0}.vps-card h3 small{font:500 8px Inter;color:#668798}.vps-card ul{list-style:none;padding:0;margin:0 0 22px}.vps-card li{font-size:10px;color:#8da9b8;padding:9px 0;border-top:1px solid rgba(47,101,126,.25)}.vps-card li b{color:#e5faff}.vps-card .btn{width:100%}.vps-note{text-align:center;color:#4d7587;font-size:9px;margin-top:18px}
.access-section{background:linear-gradient(180deg,#041019,#061723)}.access-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:70px;align-items:center}.access-copy>p{color:#819fae;font-size:14px}.flow-list{display:grid;gap:10px;margin:25px 0}.flow-list>div{display:flex;align-items:center;gap:12px;padding:13px;border:1px solid #12384b;border-radius:12px;background:#051824}.flow-list>div>span{width:26px;height:26px;display:grid;place-items:center;border-radius:10px;background:#09293a;color:var(--cyan);font-size:9px;font-weight:900}.flow-list p{margin:0}.flow-list b,.flow-list small{display:block}.flow-list b{font-size:11px}.flow-list small{font-size:9px;color:#648798;margin-top:2px}.two-panel-links{display:flex;gap:9px}.code-preview{border:1px solid #174b63;border-radius:22px;background:#03121b;box-shadow:var(--shadow);overflow:hidden}.code-top{height:52px;display:flex;align-items:center;justify-content:space-between;padding:0 17px;border-bottom:1px solid #12384b}.code-top span{font:600 10px ui-monospace,monospace;color:#7197aa}.code-top b{font-size:8px;color:var(--green)}.code-inner{padding:30px}.tiny{font-size:8px;letter-spacing:1.5px;color:#5d8091}.fake-input{margin:10px 0 20px;padding:14px;border-radius:10px;border:1px solid #1a5a74;background:#061c28;color:#e3faff;font:700 18px ui-monospace,monospace;letter-spacing:2px}.client-preview{display:grid;gap:9px}.client-preview>div{display:flex;justify-content:space-between;align-items:center;padding:13px;border:1px solid #12384b;border-radius:10px;background:#051824}.client-preview span{font-size:8px;color:#648798}.client-preview b{font-size:10px}.online-text{color:var(--green)}
.anticheat-feature{border-top:1px solid rgba(0,207,255,.06)}.split{display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:center}.feature-image{position:relative;border:1px solid #15465d;border-radius:22px;overflow:hidden;box-shadow:var(--shadow)}.feature-image img{display:block;width:100%;height:510px;object-fit:cover}.floating-monthly{top:17px;right:17px}.feature-copy>p{color:#85a5b4;font-size:14px}.price-box{display:flex;align-items:baseline;gap:10px;margin:24px 0}.price-box strong{font:700 31px "Space Grotesk"}.price-box i{font-style:normal;color:#4e7182;font-size:9px}.price-box span{font-size:9px;color:#638496}
.faq-section{background:#041019}.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px}.faq-copy p{font-size:13px;color:#7999a9}.faq-list{display:grid;gap:10px}.faq-list details{border:1px solid #12384b;border-radius:13px;background:#061824}.faq-list summary{list-style:none;padding:17px 18px;cursor:pointer;font-size:12px;font-weight:700}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary::after{content:"+";float:right;color:var(--cyan);font-size:18px}.faq-list details[open] summary::after{content:"−"}.faq-list p{font-size:11px;color:#7595a5;padding:0 18px 17px;margin:0}
.contact-section{padding:25px 0 100px}.contact-card{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:30px;padding:42px;border:1px solid #196584;border-radius:24px;background:linear-gradient(135deg,#082434,#04151f)}.contact-glow{position:absolute;width:350px;height:350px;background:radial-gradient(circle,rgba(0,207,255,.18),transparent 66%);right:-120px;top:-170px}.contact-card h2{font:700 35px "Space Grotesk";margin:8px 0}.contact-card p{margin:0;color:#7897a7;font-size:12px}.contact-actions{display:flex;gap:9px;position:relative;z-index:2}
footer{background:#02090e;border-top:1px solid #102d3d;padding:58px 0 23px}.footer-grid{display:grid;grid-template-columns:2fr repeat(3,1fr);gap:40px}.footer-brand{display:flex;align-items:center;gap:11px}.footer-grid>div:not(:first-child){display:flex;flex-direction:column;gap:8px}.footer-grid>div:not(:first-child)>b{font-size:11px;margin-bottom:5px}.footer-grid>div:not(:first-child)>a{font-size:10px;color:#5c7e90}.footer-bottom{display:flex;justify-content:space-between;margin-top:38px;padding-top:18px;border-top:1px solid #0f2b3a;font-size:9px;color:#456879}
.reveal{opacity:0;transform:translateY(22px);transition:.7s ease}.reveal.visible{opacity:1;transform:none}.delay-1{transition-delay:.08s}.delay-2{transition-delay:.16s}.delay-3{transition-delay:.24s}.tilt{transform-style:preserve-3d;will-change:transform}
/* CLIENT PANEL LOGIN */
.panel-page{min-height:100vh;background:radial-gradient(circle at 50% 0,rgba(0,207,255,.09),transparent 32%),var(--bg)}.code-login{min-height:100vh;display:grid;place-items:center;padding:90px 18px 30px}.panel-login-brand{position:fixed;left:28px;top:25px;display:flex;align-items:center;gap:10px}.code-card{width:min(470px,100%);padding:34px;border:1px solid #174b63;border-radius:22px;background:rgba(5,23,34,.94);box-shadow:var(--shadow)}.code-card h1{font:700 34px "Space Grotesk";margin:10px 0 6px}.code-card>p{font-size:12px;color:#7696a6}.code-card form{display:grid;gap:13px;margin-top:24px}.code-card label{font-size:9px;color:#7899a9;font-weight:800}.code-card input{width:100%;margin-top:7px;padding:14px;border:1px solid #1b5973;border-radius:10px;background:#03131d;color:white;outline:none;font:700 15px ui-monospace,monospace;letter-spacing:1.5px;text-transform:uppercase}.code-card input:focus{border-color:var(--cyan)}.demo-hint{display:block;margin-top:14px;color:#5e8192;font-size:9px}.demo-hint b{color:#9fddec}.error-msg{color:#ff8495!important;min-height:18px}.back-home{display:inline-block;margin-top:8px;color:#648798;font-size:9px}
.client-dashboard{display:flex;min-height:100vh}.client-sidebar,.admin-sidebar{position:fixed;left:0;top:0;bottom:0;width:250px;background:#031019;border-right:1px solid #12384b;padding:22px 16px;display:flex;flex-direction:column;z-index:80}.panel-brand{display:flex;align-items:center;gap:10px;padding:0 8px 22px;border-bottom:1px solid #12384b}.client-sidebar nav,.admin-sidebar nav{display:grid;gap:5px;padding-top:18px}.client-sidebar nav a,.admin-sidebar nav a{padding:11px 12px;border-radius:9px;color:#6f91a2;font-size:10px;font-weight:600}.client-sidebar nav a.active,.client-sidebar nav a:hover,.admin-sidebar nav a.active,.admin-sidebar nav a:hover{background:#092433;color:white}.logout-btn{margin-top:auto;background:transparent;border:1px solid #16475d;color:#6f91a2;border-radius:9px;padding:10px}.client-main,.admin-main{margin-left:250px;width:calc(100% - 250px);padding:30px 34px 70px}.client-header,.admin-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:26px}.client-header small,.admin-header small{font-size:8px;color:var(--cyan);letter-spacing:2px;font-weight:800}.client-header h1,.admin-header h1{font:600 30px "Space Grotesk";margin:0}.node-status{font-size:9px;color:var(--green);padding:7px 10px;border:1px solid rgba(84,233,189,.2);border-radius:999px}.node-status i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green);margin-right:6px}
.client-hero{display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:center;padding:24px;border:1px solid #174b63;border-radius:18px;background:linear-gradient(135deg,#072130,#04151f)}.status-orb{width:90px;height:90px;border-radius:50%;display:grid;place-items:center;position:relative;border:1px solid #1c6682;background:#051824;box-shadow:inset 0 0 35px rgba(0,207,255,.07)}.status-orb i{position:absolute;width:12px;height:12px;border-radius:50%;background:var(--green);box-shadow:0 0 20px var(--green)}.status-orb span{position:absolute;bottom:16px;font-size:7px;letter-spacing:1px;color:#8cc9b8}.client-hero h2{font:600 25px "Space Grotesk";margin:5px 0}.client-hero p{margin:0;color:#7193a3;font-size:10px}.days-box{text-align:right}.days-box span,.days-box strong,.days-box small{display:block}.days-box span{font-size:7px;letter-spacing:1.2px;color:#5f8293}.days-box strong{font:700 48px "Space Grotesk";color:#dffaff;line-height:1}.days-box small{font-size:8px;color:#5b7b8c;margin-top:5px}.client-stats,.admin-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:12px}.client-stats article,.admin-stats article{padding:16px;border:1px solid #12384b;border-radius:13px;background:#051824}.client-stats span,.client-stats b,.client-stats small,.admin-stats span,.admin-stats b,.admin-stats small{display:block}.client-stats span,.admin-stats span{font-size:7px;color:#628596;letter-spacing:1px}.client-stats b,.admin-stats b{font:600 17px "Space Grotesk";margin:7px 0 2px}.client-stats small,.admin-stats small{font-size:8px;color:#4e7183}.good{color:var(--green)}.client-section,.admin-section{margin-top:38px}.client-section-head,.admin-section-head{display:flex;align-items:end;justify-content:space-between;margin-bottom:12px}.client-section-head h2,.admin-section-head h2{font:600 20px "Space Grotesk";margin:2px 0 0}.service-control{display:flex;align-items:center;justify-content:space-between;padding:18px;border:1px solid #12384b;border-radius:14px;background:#051824}.control-status{display:flex;align-items:center;gap:11px}.control-status>i{width:12px;height:12px;border-radius:50%;background:var(--green);box-shadow:0 0 18px var(--green)}.control-status b,.control-status span{display:block}.control-status b{font-size:11px}.control-status span{font-size:8px;color:#5e8293}.control-actions{display:flex;gap:7px}.control-actions button{padding:8px 10px;border-radius:8px;border:1px solid #1a526b;background:#09293a;color:#aec6d1;font-size:8px}.simple-upload{height:190px;border:1px dashed #1d6684;border-radius:13px;background:#03131d;display:flex;flex-direction:column;align-items:center;justify-content:center}.simple-upload input{display:none}.simple-upload>span{width:42px;height:42px;display:grid;place-items:center;border-radius:11px;background:#09293a;border:1px solid #1a526b;color:var(--cyan);font-size:20px;margin-bottom:10px}.simple-upload b{font-size:11px}.simple-upload small{font-size:8px;color:#5d7f90}.full-btn{width:100%;margin-top:10px}.support-box{display:flex;justify-content:space-between;align-items:center;padding:20px;border:1px solid #12384b;border-radius:14px;background:#051824}.support-box h2{font:600 20px "Space Grotesk";margin:5px 0}.support-box p{font-size:9px;color:#638697;margin:0}
/* ADMIN */
.admin-sidebar .back-home{margin-top:auto}.admin-stats{margin-top:0}.client-table-wrap{overflow:auto;border:1px solid #12384b;border-radius:14px}.client-table{width:100%;border-collapse:collapse;background:#051824;min-width:760px}.client-table th,.client-table td{padding:13px 14px;text-align:left;border-bottom:1px solid #103344;font-size:9px}.client-table th{color:#628596;font-size:7px;letter-spacing:1px}.client-table td{color:#a9c1cc}.client-table button{padding:7px 9px;border-radius:7px;border:1px solid #1a526b;background:#09293a;color:#b8d0db;font-size:8px}.table-online{color:var(--green);font-size:8px;font-weight:800}.code-generator{display:grid;grid-template-columns:1fr 1fr;gap:12px}.code-generator>div{padding:18px;border:1px solid #12384b;border-radius:14px;background:#051824}.code-generator label{display:block;font-size:8px;color:#6a8c9c;margin-bottom:10px;font-weight:800}.code-generator select{width:100%;margin-top:6px;padding:10px;border-radius:8px;border:1px solid #16475d;background:#03131d;color:white}.code-generator .btn{width:100%}.generated-code{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.generated-code span{font-size:7px;letter-spacing:1.2px;color:#628596}.generated-code b{font:700 24px ui-monospace,monospace;color:#dffaff;letter-spacing:2px;margin:9px 0}.generated-code small{font-size:8px;color:#4f7183}.renew-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.renew-grid article{padding:17px;border:1px solid #12384b;border-radius:13px;background:#051824}.renew-grid span,.renew-grid b,.renew-grid small{display:block}.renew-grid span{font:600 10px ui-monospace,monospace;color:#8fb8c8}.renew-grid b{font:700 22px "Space Grotesk";margin:8px 0 2px}.renew-grid small{font-size:8px;color:#587c8d}.toast{position:fixed;right:20px;bottom:20px;z-index:200;background:#0a2a3b;border:1px solid #1e6d8a;color:white;padding:10px 13px;border-radius:9px;font-size:9px;opacity:0;transform:translateY(10px);transition:.2s;pointer-events:none}.toast.show{opacity:1;transform:none}
@media(max-width:1020px){nav#nav-links{display:none;position:absolute;top:78px;left:18px;right:18px;padding:18px;background:#041822;border:1px solid #15465d;border-radius:13px;flex-direction:column;align-items:stretch}nav#nav-links.open{display:flex}.nav-panel{border-left:0;padding-left:0}.mobile-menu{display:block}.hero-grid,.access-grid,.split,.faq-grid{grid-template-columns:1fr}.hero-copy{text-align:center}.hero-copy>p{margin-left:auto;margin-right:auto}.hero-actions,.hero-badges{justify-content:center}.hero-card{max-width:700px;margin:auto}.main-plans{grid-template-columns:1fr 1fr}.vps-grid{grid-template-columns:1fr 1fr}.client-sidebar,.admin-sidebar{position:static;width:auto;height:auto}.client-dashboard{display:block}.client-sidebar nav,.admin-sidebar nav{grid-template-columns:repeat(4,1fr)}.logout-btn{margin-top:12px}.client-main,.admin-main{margin-left:0;width:100%;padding:24px}.client-stats,.admin-stats{grid-template-columns:1fr 1fr}.code-generator{grid-template-columns:1fr}}
@media(max-width:680px){.hero{min-height:auto;padding:120px 0 80px}.hero h1{font-size:49px;letter-spacing:-2.7px}.hero-copy>p{font-size:15px}.hero-actions{flex-direction:column}.hero-logo-wrap{height:370px}.section,.vps-section,.access-section,.anticheat-feature,.faq-section{padding:76px 0}.section-head{display:block}.section-head p{margin-top:15px}.main-plans,.vps-grid{grid-template-columns:1fr}.two-panel-links{flex-direction:column}.feature-image img{height:390px}.contact-card{display:block;padding:28px}.contact-actions{margin-top:20px;flex-direction:column}.footer-grid{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/3}.footer-bottom{flex-direction:column;gap:6px}.client-sidebar nav,.admin-sidebar nav{grid-template-columns:1fr 1fr}.client-main,.admin-main{padding:16px 13px 55px}.client-header,.admin-header{align-items:flex-start}.node-status{display:none}.client-hero{grid-template-columns:1fr;text-align:center}.status-orb{margin:auto}.days-box{text-align:center}.client-stats,.admin-stats{grid-template-columns:1fr 1fr}.service-control,.support-box{display:block}.control-actions{margin-top:14px;flex-wrap:wrap}.renew-grid{grid-template-columns:1fr}.panel-login-brand{position:absolute;left:18px;top:18px}}


/* ---------- V3 PROFESSIONAL HERO ---------- */
.hero{
  background:
    radial-gradient(circle at 16% 30%, rgba(0,207,255,.075), transparent 28%),
    radial-gradient(circle at 82% 25%, rgba(0,138,230,.09), transparent 26%);
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(rgba(0,207,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,207,255,.035) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.72),transparent 78%);
}
.hero-copy{position:relative;z-index:2}
.hero-copy::before{
  content:"";
  position:absolute;
  left:-34px;top:10px;width:2px;height:72px;
  background:linear-gradient(var(--cyan),transparent);
  box-shadow:0 0 18px rgba(0,207,255,.45);
}
.hero h1{max-width:760px}
.hero-copy>p{max-width:650px}

.hero-preview{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(89,207,255,.22);
  border-radius:28px;
  background:
    linear-gradient(145deg,rgba(8,31,45,.94),rgba(3,13,21,.97));
  box-shadow:
    0 38px 110px rgba(0,0,0,.52),
    0 0 90px rgba(0,207,255,.07),
    inset 0 1px 0 rgba(255,255,255,.035);
  padding:19px;
  min-height:520px;
}
.hero-preview::before{
  content:"";
  position:absolute;
  width:320px;height:320px;
  border-radius:50%;
  right:-130px;top:-150px;
  background:radial-gradient(circle,rgba(0,207,255,.18),transparent 68%);
  pointer-events:none;
}
.hero-preview::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(110deg,transparent 0 43%,rgba(102,232,255,.03) 49%,transparent 56%);
  animation:premiumSweep 6.2s linear infinite;
  transform:translateX(-90%);
}
@keyframes premiumSweep{to{transform:translateX(90%)}}

.preview-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:4px 2px 17px;
  border-bottom:1px solid rgba(94,190,225,.12);
}
.preview-brand{display:flex;align-items:center;gap:11px}
.preview-brand img{width:38px;height:38px;border-radius:10px;object-fit:cover}
.preview-brand b,.preview-brand span{display:block}
.preview-brand b{font:600 12px "Space Grotesk"}
.preview-brand span{font-size:8px;color:#668b9d;margin-top:2px;letter-spacing:.5px}
.preview-live{
  font-size:8px;font-weight:900;letter-spacing:1px;
  color:var(--green);padding:6px 9px;border-radius:999px;
  border:1px solid rgba(84,233,189,.18);background:rgba(84,233,189,.045)
}
.preview-live i{
  display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--green);box-shadow:0 0 10px var(--green);margin-right:6px
}

.preview-overview{
  display:grid;grid-template-columns:1fr auto;align-items:center;
  gap:18px;padding:26px 4px 22px;
}
.preview-main-stat span,.preview-main-stat strong,.preview-main-stat small{display:block}
.preview-main-stat span{font-size:8px;color:#638798;text-transform:uppercase;letter-spacing:1.3px}
.preview-main-stat strong{
  font:700 52px "Space Grotesk";letter-spacing:-2px;
  color:#f0fbff;margin:6px 0 1px
}
.preview-main-stat small{font-size:8px;color:#4f7183}
.preview-ring{
  width:112px;height:112px;border-radius:50%;
  display:grid;place-items:center;position:relative;
  background:
    radial-gradient(circle at center,#061824 57%,transparent 58%),
    conic-gradient(var(--cyan) 0 82%,#15384a 82% 100%);
  box-shadow:0 0 32px rgba(0,207,255,.10)
}
.preview-ring::after{
  content:"";position:absolute;inset:9px;border-radius:50%;
  border:1px solid rgba(111,224,255,.16)
}
.preview-ring div{text-align:center;position:relative;z-index:2}
.preview-ring b,.preview-ring span{display:block}
.preview-ring b{font:700 20px "Space Grotesk"}
.preview-ring span{font-size:7px;color:var(--cyan);letter-spacing:1.2px;margin-top:2px}

.preview-services{display:grid;gap:9px}
.preview-services article{
  display:grid;grid-template-columns:auto 1fr auto;gap:11px;align-items:center;
  padding:13px;border:1px solid rgba(59,129,158,.22);
  border-radius:12px;background:rgba(5,22,33,.62);
  transition:.22s border-color,.22s transform,.22s background
}
.preview-services article:hover{
  transform:translateX(3px);
  border-color:rgba(0,207,255,.34);
  background:rgba(8,30,43,.78)
}
.preview-icon{
  width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
  background:#082737;border:1px solid #174c63;color:var(--cyan);
  font-size:13px;font-weight:900
}
.preview-services b,.preview-services span{display:block}
.preview-services b{font-size:10px}
.preview-services span{font-size:8px;color:#5f8294;margin-top:2px}
.preview-services em{
  font-style:normal;font-size:7px;color:var(--green);font-weight:900;
  letter-spacing:.8px
}
.preview-footer{
  display:flex;align-items:center;justify-content:space-between;
  margin-top:16px;padding:13px 3px 1px;
  border-top:1px solid rgba(94,190,225,.10);
  color:#587b8d;font-size:8px
}
.preview-footer i{
  display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--cyan);box-shadow:0 0 9px var(--cyan);margin-right:6px
}
.preview-footer b{font:700 8px "Space Grotesk";letter-spacing:1.3px;color:#76a7ba}

/* Trust strip under first fold */
.trust-strip{
  position:relative;z-index:4;
  margin-top:-34px;
  padding:0 0 36px;
}
.trust-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  border:1px solid rgba(47,124,155,.20);
  background:rgba(4,18,27,.86);
  backdrop-filter:blur(15px);
  border-radius:16px;
  box-shadow:0 18px 60px rgba(0,0,0,.18);
  overflow:hidden;
}
.trust-grid>div{
  display:flex;align-items:center;gap:12px;padding:17px 18px;
  border-right:1px solid rgba(47,124,155,.16)
}
.trust-grid>div:last-child{border-right:0}
.trust-grid>div>span{
  color:var(--cyan);font:700 9px "Space Grotesk";letter-spacing:1px
}
.trust-grid p{margin:0}
.trust-grid b,.trust-grid small{display:block}
.trust-grid b{font-size:10px}
.trust-grid small{font-size:8px;color:#5f8294;margin-top:2px}

/* More restrained, professional sale cards */
.sale-card,.vps-card{
  box-shadow:0 18px 55px rgba(0,0,0,.17);
}
.sale-card:hover,.vps-card:hover{
  border-color:rgba(0,207,255,.36);
}
.sale-image{position:relative}
.sale-image::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 45%,rgba(2,7,13,.58))
}
.monthly{
  backdrop-filter:blur(8px);
  background:rgba(4,30,42,.82);
}

/* Panel/admin deliberately use normal system cursor and no particle effects */
.panel-page #mouse-particles,.panel-page #cursor-ring{display:none!important}

@media(max-width:1020px){
  .trust-grid{grid-template-columns:1fr 1fr}
  .trust-grid>div:nth-child(2){border-right:0}
  .trust-grid>div:nth-child(-n+2){border-bottom:1px solid rgba(47,124,155,.16)}
}
@media(max-width:680px){
  .hero-copy::before{display:none}
  .hero-preview{min-height:auto;padding:14px}
  .preview-main-stat strong{font-size:43px}
  .preview-ring{width:96px;height:96px}
  .trust-strip{margin-top:-12px}
  .trust-grid{grid-template-columns:1fr}
  .trust-grid>div{border-right:0;border-bottom:1px solid rgba(47,124,155,.16)!important}
  .trust-grid>div:last-child{border-bottom:0!important}
}


/* ---------- V4 INTERACTION POLISH ---------- */
.main-plans,.vps-grid{perspective:1200px}
.sale-card,.vps-card{
  --mx:50%;
  --my:50%;
  transform-style:preserve-3d;
  transition:
    transform .22s ease,
    border-color .22s ease,
    box-shadow .22s ease,
    background .22s ease;
}
.sale-card::before,.vps-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
  border-radius:inherit;
  background:
    radial-gradient(
      240px circle at var(--mx) var(--my),
      rgba(51,220,255,.12),
      rgba(0,150,235,.045) 34%,
      transparent 70%
    );
  transition:opacity .2s ease;
}
.sale-card:hover::before,.vps-card:hover::before{opacity:1}
.sale-card:hover,.vps-card:hover{
  border-color:rgba(68,220,255,.48);
  box-shadow:
    0 26px 70px rgba(0,0,0,.30),
    0 0 32px rgba(0,207,255,.07);
}
.vps-card:hover .plan{letter-spacing:2px;color:#c6f9ff}
.vps-card:hover li{
  transform:translateX(3px);
  color:#bdd2db;
}
.vps-card li{transition:transform .18s ease,color .18s ease}
.vps-card:hover .btn{border-color:rgba(69,231,255,.55)}
.sale-card:hover .sale-kicker{color:#c8f9ff}
.sale-card:hover .price-pair strong{color:#dffaff}
.sale-card .sale-kicker,.price-pair strong{transition:color .18s ease}

/* Cleaner section rhythm */
#planes{padding-top:118px}
.access-section{border-top:1px solid rgba(0,207,255,.055)}
.faq-section{border-top:1px solid rgba(0,207,255,.045)}
.section-head h2{max-width:760px}

/* Discord */
.discord-section{
  padding:105px 0;
  position:relative;
  background:
    radial-gradient(circle at 82% 50%,rgba(0,207,255,.07),transparent 30%),
    #031019;
  border-top:1px solid rgba(0,207,255,.055);
  border-bottom:1px solid rgba(0,207,255,.055);
}
.discord-shell{
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:1.1fr 1fr auto;
  gap:28px;
  align-items:center;
  padding:34px;
  border:1px solid #17485e;
  border-radius:24px;
  background:
    linear-gradient(135deg,rgba(8,31,45,.92),rgba(4,16,25,.96));
  box-shadow:0 28px 80px rgba(0,0,0,.24);
}
.discord-glow{
  position:absolute;
  right:-110px;top:-130px;
  width:340px;height:340px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(0,207,255,.16),transparent 67%);
  pointer-events:none;
}
.discord-copy{
  display:flex;align-items:flex-start;gap:17px;position:relative;z-index:2
}
.discord-mark{
  flex:0 0 auto;
  width:54px;height:54px;border-radius:16px;
  display:grid;place-items:center;
  font:700 24px "Space Grotesk";
  color:#061018;
  background:linear-gradient(135deg,#2f9eff,#55e7ff);
  box-shadow:0 14px 34px rgba(0,207,255,.18);
}
.discord-copy h2{
  font:700 30px/1.05 "Space Grotesk";
  letter-spacing:-1.2px;
  margin:8px 0 8px
}
.discord-copy p{
  margin:0;
  max-width:470px;
  font-size:11px;
  color:#7999a9
}
.discord-features{display:grid;gap:8px;position:relative;z-index:2}
.discord-features article{
  display:flex;gap:11px;align-items:center;
  padding:11px 12px;
  border:1px solid rgba(41,103,129,.25);
  border-radius:10px;
  background:rgba(4,20,29,.52)
}
.discord-features article>span{
  color:var(--cyan);font:700 8px "Space Grotesk";letter-spacing:1px
}
.discord-features b,.discord-features small{display:block}
.discord-features b{font-size:9px}
.discord-features small{font-size:8px;color:#5e8192;margin-top:2px}
.discord-action{
  min-width:180px;
  display:flex;flex-direction:column;gap:8px;
  align-items:stretch;position:relative;z-index:2
}
.discord-action .btn{width:100%}
.discord-action small{
  text-align:center;
  color:#4d7385;
  font-size:7px;
  max-width:190px
}

/* More professional first-fold spacing on wide screens */
@media(min-width:1100px){
  .hero-grid{gap:84px}
  .hero-copy{padding-bottom:18px}
}

/* Remove obsolete two-panel spacing */
.two-panel-links{display:flex;gap:9px}

/* Panels: conventional cursor only */
.panel-page,.panel-page *{cursor:auto}
.panel-page a,.panel-page button,.panel-page label,.panel-page summary,.panel-page input,.panel-page select{cursor:pointer}
.panel-page input,.panel-page select{cursor:text}

@media(max-width:1020px){
  .discord-shell{grid-template-columns:1fr 1fr}
  .discord-action{grid-column:1/3}
}
@media(max-width:680px){
  .discord-section{padding:76px 0}
  .discord-shell{grid-template-columns:1fr;padding:24px}
  .discord-copy{display:block}
  .discord-mark{margin-bottom:14px}
  .discord-action{grid-column:auto}
}


/* ---------- V5 READABILITY ---------- */
body{font-size:15px}
.hero-copy>p,.section-head p,.access-copy>p,.faq-copy p{line-height:1.75}
.section-head h2,.access-copy h2,.faq-copy h2{letter-spacing:-1.4px}
.sale-body p,.vps-card li,.flow-list small,.faq-list p{line-height:1.65}
.sale-body p{font-size:12px;min-height:auto}
.sale-body li{font-size:11px}
.price-pair strong{font-size:21px}
.vps-card li{font-size:11px}
.vps-card h3{font-size:31px}
.vps-card .plan{font-size:10px}
.vps-card{padding-top:34px}
.vps-grid{gap:16px}
.vps-note{font-size:10px}
.hero-badges span{font-size:11px}
.preview-services b{font-size:11px}
.preview-services span{font-size:9px}
.trust-grid b{font-size:11px}
.trust-grid small{font-size:9px}

/* Remove 3D feel: use a clean lift + light border instead */
.sale-card,.vps-card,.hero-preview,.feature-image,.code-preview{
  transform:none!important;
}
.sale-card,.vps-card{
  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    background .18s ease;
}
.sale-card::before,.vps-card::before{
  background:linear-gradient(180deg,rgba(0,207,255,.035),transparent 42%);
}
.sale-card:hover,.vps-card:hover{
  transform:translateY(-7px)!important;
  border-color:rgba(69,231,255,.48);
  box-shadow:
    0 26px 65px rgba(0,0,0,.28),
    0 0 24px rgba(0,207,255,.065);
}
.sale-card:hover .sale-image img{transform:scale(1.025)}
.vps-card:hover li{transform:none}
.vps-card:hover .plan{letter-spacing:1.4px}

/* Recommended PRO plan */
.vps-card.featured{
  border:1px solid rgba(69,231,255,.72);
  background:
    linear-gradient(180deg,rgba(7,33,46,.96),rgba(4,17,27,.92));
  box-shadow:
    0 24px 70px rgba(0,0,0,.30),
    0 0 28px rgba(0,207,255,.10);
}
.vps-card.featured::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:20px;
  pointer-events:none;
  border:1px solid rgba(69,231,255,.22);
  animation:proOutline 2.8s ease-in-out infinite;
}
@keyframes proOutline{
  0%,100%{opacity:.4;box-shadow:0 0 0 rgba(0,207,255,0)}
  50%{opacity:1;box-shadow:0 0 24px rgba(0,207,255,.16)}
}
.hot-animated{
  top:12px!important;
  right:12px!important;
  background:linear-gradient(135deg,#00b5ff,#54e7ff)!important;
  color:#001018!important;
  font-size:8px!important;
  padding:6px 9px!important;
  border-radius:999px!important;
  letter-spacing:.65px!important;
  box-shadow:0 8px 22px rgba(0,207,255,.22);
  animation:recommendedFloat 1.8s ease-in-out infinite;
  z-index:5;
}
@keyframes recommendedFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-4px)}
}

/* clearer buttons */
.vps-card .btn,.sale-body .btn{
  min-height:44px;
  font-size:11px;
  letter-spacing:.1px;
}
.monthly{
  font-size:8px;
  padding:6px 8px;
}

/* Panel readability */
.code-card h1{font-size:36px}
.code-card>p{font-size:13px;line-height:1.65}
.code-card label{font-size:10px}
.code-card input{font-size:16px}
.demo-hint{font-size:10px}
.client-stats span,.client-stats small{font-size:9px}
.client-stats b{font-size:18px}
.client-hero p{font-size:11px}
.flow-list b{font-size:12px}
.flow-list small{font-size:10px}

/* Cursor even more subtle */
#cursor-ring{box-shadow:0 0 12px rgba(0,207,255,.30)}
#cursor-ring i{width:2px;height:2px;box-shadow:0 0 7px #00cfff}


/* ---------- V6 MEGA MENUS + PRICING DETAILS ---------- */
.nav-dropdown{position:relative;display:flex;align-items:center;height:78px}
.nav-drop-trigger{
  display:flex;align-items:center;gap:5px;
  border:0;background:transparent;color:#9ab3c0;
  font-size:12px;padding:12px 0
}
.nav-drop-trigger span{font-size:10px;color:#557b8e;transition:.18s transform}
.nav-dropdown:hover .nav-drop-trigger,.nav-dropdown.open .nav-drop-trigger{color:white}
.nav-dropdown:hover .nav-drop-trigger span,.nav-dropdown.open .nav-drop-trigger span{transform:rotate(180deg)}

.nav-mega{
  position:absolute;
  top:68px;left:50%;
  width:390px;
  transform:translate(-50%,10px);
  opacity:0;visibility:hidden;pointer-events:none;
  padding:12px;
  border:1px solid #17465c;
  border-radius:15px;
  background:rgba(3,16,25,.98);
  box-shadow:0 24px 65px rgba(0,0,0,.48),0 0 30px rgba(0,207,255,.035);
  backdrop-filter:blur(18px);
  transition:.18s ease;
}
.nav-dropdown:hover .nav-mega,.nav-dropdown.open .nav-mega{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:translate(-50%,0)
}
.nav-mega-head{display:flex;align-items:center;justify-content:space-between;padding:5px 6px 11px;border-bottom:1px solid #113445;margin-bottom:7px}
.nav-mega-head small,.nav-mega-head b{display:block}
.nav-mega-head small{font-size:7px;color:var(--cyan);letter-spacing:1.3px;font-weight:800}
.nav-mega-head b{font-size:11px;margin-top:2px}
.nav-mega-head>a{font-size:8px;color:#70a4b8}
.nav-plan-link{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;
  padding:10px;border-radius:10px;transition:.16s background,.16s transform
}
.nav-plan-link:hover{background:#082431;transform:translateX(2px)}
.nav-plan-icon{width:31px;height:31px;display:grid;place-items:center;border:1px solid #1a5067;border-radius:9px;background:#072230;color:var(--cyan);font-size:12px;font-weight:900}
.nav-plan-link b,.nav-plan-link small{display:block}
.nav-plan-link b{font-size:10px}
.nav-plan-link small{font-size:8px;color:#607f90;margin-top:2px}
.nav-plan-link em{font-style:normal;font-size:8px;color:#b6e9f5}
.nav-vps-row{display:grid;grid-template-columns:62px 1fr auto;gap:10px;align-items:center;padding:9px 10px;border-radius:9px}
.nav-vps-row:hover{background:#082431}
.nav-vps-row b{font-size:9px}
.nav-vps-row span{font-size:8px;color:#607f90}
.nav-vps-row em{font-style:normal;font-size:8px;color:#b6e9f5}
.recommended-mini b{color:var(--cyan)}
.nav-discount-note{margin-top:7px;padding:9px;border:1px solid rgba(0,207,255,.12);border-radius:9px;background:rgba(0,207,255,.035);font-size:8px;color:#718f9f}
.nav-discount-note b{color:#b7f4ff}

.billing-toolbar,.vps-billing-row{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  margin:-12px 0 27px;padding:14px 16px;
  border:1px solid #143f53;border-radius:14px;background:#051722
}
.billing-copy b,.billing-copy span,.vps-billing-row>div:first-child b,.vps-billing-row>div:first-child span{display:block}
.billing-copy b,.vps-billing-row>div:first-child b{font-size:11px}
.billing-copy span,.vps-billing-row>div:first-child span{font-size:9px;color:#66899a;margin-top:2px}
.billing-toggle{display:flex;gap:5px;padding:4px;border:1px solid #17495f;border-radius:10px;background:#03131d}
.billing-option,.vps-billing-option{
  position:relative;border:0;background:transparent;color:#6d8f9f;
  padding:9px 13px;border-radius:7px;font-size:9px;font-weight:800
}
.billing-option span,.vps-billing-option span{
  margin-left:4px;padding:3px 5px;border-radius:999px;background:rgba(84,233,189,.09);color:var(--green);font-size:6px;letter-spacing:.5px
}
.billing-option.active,.vps-billing-option.active{background:#0a2a3a;color:white}

.dynamic-price{align-items:stretch}
.dynamic-price>div{display:flex;flex-direction:column;gap:2px}
.dynamic-price small{font-size:7px;color:#5d8293}
.dynamic-price .price-cycle{font-size:7px;color:#547485}
.quarter-total,.vps-quarter-total{
  margin-top:-7px;margin-bottom:15px;padding:8px 9px;border-radius:8px;
  background:rgba(84,233,189,.045);border:1px solid rgba(84,233,189,.13);
  font-size:8px;color:#789e91
}
.quarter-total b,.vps-quarter-total b{color:#baf8e6}
.vps-for{font-size:9px;color:#668899;min-height:42px;margin:-5px 0 14px}

.card-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.card-actions.vertical{grid-template-columns:1fr}
.details-btn{
  min-height:44px;border:1px solid #1a526b;border-radius:10px;
  background:#082534;color:#a9c7d3;font-size:9px;font-weight:800;
  transition:.16s border-color,.16s background,.16s color
}
.details-btn:hover{border-color:var(--cyan);background:#0b3041;color:white}
.card-actions .btn{width:100%}

/* Plan detail modal */
.plan-modal{
  position:fixed;inset:0;z-index:250;
  display:none;align-items:center;justify-content:center;padding:22px
}
.plan-modal.open{display:flex}
.plan-modal-backdrop{position:absolute;inset:0;background:rgba(0,5,9,.82);backdrop-filter:blur(8px)}
.plan-modal-dialog{
  position:relative;z-index:2;width:min(790px,100%);max-height:min(820px,92vh);overflow:auto;
  padding:30px;border:1px solid #1a5b74;border-radius:22px;
  background:linear-gradient(145deg,#071e2b,#03121b);
  box-shadow:0 40px 120px rgba(0,0,0,.62),0 0 50px rgba(0,207,255,.06)
}
.plan-modal-close{
  position:absolute;right:14px;top:14px;width:34px;height:34px;border-radius:10px;
  border:1px solid #174a60;background:#082433;color:#87a9b8;font-size:20px
}
.plan-modal-top h2{font:700 34px "Space Grotesk";margin:8px 0}
.plan-modal-top p{color:#7d9caa;font-size:11px;max-width:650px}
.plan-modal-price{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:20px 0}
.plan-modal-price>div{padding:16px;border:1px solid #153f52;border-radius:13px;background:#051722}
.plan-modal-price span,.plan-modal-price b,.plan-modal-price small{display:block}
.plan-modal-price span{font-size:7px;color:#648697;letter-spacing:1px;text-transform:uppercase}
.plan-modal-price b{font:700 23px "Space Grotesk";margin:5px 0}
.plan-modal-price small{font-size:8px;color:#5b7d8d}
.plan-modal-price .modal-best{border-color:rgba(84,233,189,.30);background:rgba(84,233,189,.035)}
.plan-modal-price .modal-best b{color:#c4f9ea}
.plan-modal-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.plan-modal-grid h3{font:600 14px "Space Grotesk";margin:0 0 10px}
.plan-modal-grid ul{list-style:none;padding:0;margin:0}
.plan-modal-grid li{padding:8px 0;border-bottom:1px solid #103444;font-size:10px;color:#a4bdc8}
.plan-modal-grid li::before{content:"✓";color:var(--green);margin-right:8px}
.plan-modal-grid p{font-size:10px;color:#7899a8}
.modal-note{margin-top:14px;padding:11px;border:1px solid #153f52;border-radius:10px;background:#04151f}
.modal-note b,.modal-note span{display:block}
.modal-note b{font-size:8px;color:#9bc7d7}
.modal-note span{font-size:8px;color:#587c8d;margin-top:3px}
.plan-modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:24px}
body.modal-open{overflow:hidden}

@media(max-width:1020px){
  .nav-dropdown{height:auto;display:block}
  .nav-drop-trigger{width:100%;justify-content:space-between}
  .nav-mega{
    position:static;width:100%;transform:none!important;display:none;
    opacity:1;visibility:visible;pointer-events:auto;margin-top:5px
  }
  .nav-dropdown.open .nav-mega{display:block}
  .nav-dropdown:hover .nav-mega{display:none}
  .nav-dropdown.open:hover .nav-mega{display:block}
  .billing-toolbar,.vps-billing-row{align-items:flex-start;flex-direction:column}
}
@media(max-width:680px){
  .billing-toggle{width:100%}
  .billing-option,.vps-billing-option{flex:1}
  .card-actions{grid-template-columns:1fr}
  .plan-modal-dialog{padding:24px 18px}
  .plan-modal-price,.plan-modal-grid{grid-template-columns:1fr}
  .plan-modal-actions{flex-direction:column-reverse}
  .plan-modal-actions .btn{width:100%}
}


/* ---------- V7 HERO BRAND CARD ---------- */
.hero-brand-card{
  padding:14px;
  background:rgba(3,15,24,.86);
  border:1px solid rgba(0,207,255,.20);
  border-radius:26px;
  box-shadow:
    0 34px 100px rgba(0,0,0,.50),
    0 0 85px rgba(0,207,255,.07);
  overflow:hidden;
}
.hero-brand-card .hero-logo-wrap{
  position:relative;
  height:500px;
  border-radius:18px;
  overflow:hidden;
  background:#000;
}
.hero-brand-card .hero-logo-wrap img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:contrast(1.04) saturate(1.05);
  transition:transform .6s ease,filter .6s ease;
}
.hero-brand-card:hover .hero-logo-wrap img{
  transform:scale(1.018);
  filter:contrast(1.08) saturate(1.10);
}
.scanline{
  position:absolute;
  left:-8%;
  width:116%;
  height:2px;
  top:-5%;
  z-index:3;
  background:linear-gradient(90deg,transparent,rgba(80,235,255,.35),#62efff,rgba(80,235,255,.35),transparent);
  box-shadow:
    0 0 10px rgba(0,207,255,.78),
    0 0 24px rgba(0,207,255,.42);
  animation:brandScan 4.1s cubic-bezier(.35,.04,.65,.96) infinite;
}
.scan-glow{
  position:absolute;
  left:0;right:0;
  height:72px;
  top:-80px;
  z-index:2;
  pointer-events:none;
  background:linear-gradient(to bottom,transparent,rgba(0,207,255,.045),transparent);
  animation:brandScanGlow 4.1s cubic-bezier(.35,.04,.65,.96) infinite;
}
@keyframes brandScan{
  0%{top:-4%;opacity:0}
  8%{opacity:1}
  92%{opacity:1}
  100%{top:104%;opacity:0}
}
@keyframes brandScanGlow{
  0%{top:-90px}
  100%{top:100%}
}
.hero-logo-overlay{
  position:absolute;
  left:16px;right:16px;bottom:15px;
  z-index:4;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px;
  border:1px solid rgba(73,202,244,.14);
  border-radius:10px;
  background:rgba(2,11,18,.70);
  backdrop-filter:blur(10px);
}
.hero-logo-overlay span{
  font-size:8px;
  letter-spacing:1.4px;
  color:#91b4c2;
  font-weight:800
}
.hero-logo-overlay span i{
  display:inline-block;
  width:6px;height:6px;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 10px var(--green);
  margin-right:6px
}
.hero-logo-overlay b{
  font:700 8px "Space Grotesk";
  color:var(--cyan);
  letter-spacing:1px
}

/* ---------- NOTIFICATIONS ---------- */
.nav-notifications{
  position:relative;
  display:flex;
  align-items:center
}
.notification-btn{
  position:relative;
  width:34px;height:34px;
  display:grid;place-items:center;
  border:1px solid #17485e;
  border-radius:10px;
  background:#061c28;
  color:#b8dae7;
  transition:.16s ease
}
.notification-btn:hover{
  border-color:rgba(0,207,255,.55);
  background:#082838;
  color:white
}
.bell-icon{
  font-size:16px;
  transform:rotate(45deg);
  display:block
}
.notification-dot{
  position:absolute;
  right:6px;top:5px;
  width:6px;height:6px;
  border-radius:50%;
  background:#ff6e80;
  box-shadow:0 0 10px rgba(255,110,128,.75)
}
.notification-menu{
  position:absolute;
  right:0;top:46px;
  width:330px;
  padding:10px;
  border:1px solid #17475d;
  border-radius:14px;
  background:rgba(3,16,25,.985);
  box-shadow:0 24px 70px rgba(0,0,0,.52);
  backdrop-filter:blur(18px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(8px);
  transition:.17s ease
}
.nav-notifications.open .notification-menu{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:none
}
.notification-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:5px 6px 10px;
  border-bottom:1px solid #103343
}
.notification-head small,.notification-head b{display:block}
.notification-head small{font-size:7px;color:var(--cyan);letter-spacing:1.2px;font-weight:800}
.notification-head b{font-size:11px;margin-top:2px}
.notification-head>span{
  width:22px;height:22px;
  display:grid;place-items:center;
  border-radius:7px;
  background:#082a39;
  color:var(--cyan);
  font-size:8px;
  font-weight:900
}
.notification-item{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:9px;
  padding:11px 7px;
  border-bottom:1px solid rgba(44,102,127,.18)
}
.notification-item:last-child{border-bottom:0}
.notification-item>i{
  width:7px;height:7px;
  margin-top:5px;
  border-radius:50%;
  background:#2a5d70
}
.notification-item.unread>i{
  background:var(--cyan);
  box-shadow:0 0 8px rgba(0,207,255,.6)
}
.notification-item b,.notification-item p,.notification-item small{display:block}
.notification-item b{font-size:9px}
.notification-item p{margin:2px 0;color:#638798;font-size:8px;line-height:1.45}
.notification-item small{font-size:7px;color:#426576}

/* ---------- CLEARER PLAN MODAL ---------- */
.plan-modal-dialog{
  width:min(860px,100%);
  padding:28px;
  background:
    radial-gradient(circle at 100% 0,rgba(0,207,255,.06),transparent 28%),
    linear-gradient(145deg,#071e2b,#03121b);
}
.modal-header-pro{
  display:flex;
  gap:15px;
  align-items:flex-start;
  padding-right:38px
}
.modal-icon{
  flex:0 0 auto;
  width:46px;height:46px;
  display:grid;place-items:center;
  border-radius:13px;
  background:linear-gradient(145deg,#0b3143,#071d2a);
  border:1px solid #1c5c75;
  color:var(--cyan);
  font-size:17px;
  font-weight:900
}
.plan-modal-top h2{
  margin:5px 0 5px;
  font-size:31px
}
.plan-modal-top p{
  max-width:700px;
  margin:0;
  line-height:1.65;
  font-size:11px
}
.modal-summary{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin:22px 0 18px
}
.modal-summary article{
  padding:15px 16px;
  border:1px solid #164256;
  border-radius:12px;
  background:#051824
}
.modal-summary article>span,
.modal-summary article>b,
.modal-summary article>small{display:block}
.modal-summary article>span{
  font-size:7px;
  color:#668999;
  text-transform:uppercase;
  letter-spacing:1px
}
.modal-summary article>b{
  margin:5px 0 3px;
  font:700 20px "Space Grotesk";
  color:white
}
.modal-summary article>small{font-size:8px;color:#55798a;line-height:1.5}
.modal-summary .modal-best{
  border-color:rgba(84,233,189,.30);
  background:linear-gradient(145deg,rgba(84,233,189,.05),#051824)
}
.modal-summary .modal-best>b{color:#c5faeb}
.plan-modal-grid{
  gap:12px
}
.modal-features-card,.modal-info-card{
  padding:16px;
  border:1px solid #143d50;
  border-radius:13px;
  background:#041722
}
.modal-section-title{
  margin-bottom:10px
}
.modal-section-title span,.modal-section-title b{display:block}
.modal-section-title span{
  font-size:7px;
  color:var(--cyan);
  letter-spacing:1.2px;
  font-weight:800
}
.modal-section-title b{
  margin-top:2px;
  font-size:11px
}
.modal-features-card li{
  padding:8px 0;
  border-bottom:1px solid #0f3343;
  font-size:10px;
  color:#abc3cd
}
.modal-features-card li:last-child{border-bottom:0}
.modal-info-card>p{
  margin:0;
  color:#8aa6b3;
  font-size:10px;
  line-height:1.65
}
.modal-help{
  margin-top:12px;
  padding:11px 13px;
  border-radius:10px;
  border:1px solid rgba(0,207,255,.12);
  background:rgba(0,207,255,.025)
}
.modal-help span,.modal-help p{display:block}
.modal-help span{font-size:9px;font-weight:800;color:#b4eaf5}
.modal-help p{margin:3px 0 0;font-size:8px;color:#5f8292}
.plan-modal-actions{margin-top:18px}

/* Mobile notifications and modal */
@media(max-width:1020px){
  .nav-notifications{
    display:block;
    width:100%
  }
  .notification-btn{
    width:100%;
    justify-content:flex-start;
    padding-left:12px
  }
  .notification-menu{
    position:static;
    width:100%;
    display:none;
    opacity:1;visibility:visible;pointer-events:auto;
    transform:none;
    margin-top:6px
  }
  .nav-notifications.open .notification-menu{display:block}
}
@media(max-width:680px){
  .hero-brand-card .hero-logo-wrap{height:390px}
  .modal-header-pro{display:block}
  .modal-icon{margin-bottom:10px}
  .modal-summary,.plan-modal-grid{grid-template-columns:1fr}
}


/* ---------- V8 PERIOD SELECTOR PER PLAN ---------- */
.period-picker{
  position:relative;
  margin:14px 0 8px;
}
.period-trigger{
  width:100%;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 12px;
  border:1px solid #174b61;
  border-radius:9px;
  background:#071923;
  color:#e6f9ff;
  font-size:10px;
  font-weight:700;
  transition:.16s ease;
}
.period-trigger:hover,
.period-picker.open .period-trigger{
  border-color:rgba(69,231,255,.52);
  background:#092330;
}
.period-trigger i{
  font-style:normal;
  color:#6fa0b3;
  transition:.18s transform;
}
.period-picker.open .period-trigger i{transform:rotate(180deg)}

.period-menu{
  position:absolute;
  z-index:35;
  left:0;right:0;
  top:46px;
  display:none;
  padding:6px;
  border:1px solid #174b61;
  border-radius:10px;
  background:#06151e;
  box-shadow:0 20px 48px rgba(0,0,0,.46);
}
.period-picker.open .period-menu{display:block}
.period-menu button{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 9px;
  border:0;
  border-radius:7px;
  background:transparent;
  color:#c9e1ea;
  text-align:left;
  transition:.14s background,.14s color;
}
.period-menu button:hover,
.period-menu button.active{
  background:#0b2a38;
  color:white;
}
.period-menu button b{
  font-size:10px;
  font-weight:700;
}
.period-menu button em{
  font-style:normal;
  font-size:8px;
  color:#57e5bf;
}
.period-menu button[data-discount="0"] em{color:#638596}

.period-summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:28px;
  padding:7px 9px;
  margin-bottom:14px;
  border-radius:8px;
  background:rgba(0,207,255,.025);
  border:1px solid rgba(0,207,255,.08);
}
.period-summary span{
  font-size:8px;
  color:#678b9b;
}
.period-summary span.has-saving{
  color:#64e9c1;
}
.period-summary b{
  font-size:8px;
  color:#a7c7d3;
  text-align:right;
}
.period-summary b strong{
  color:#e5fbff;
}
.sale-card.period-discounted,
.vps-card.period-discounted{
  border-color:rgba(84,233,189,.31);
}
.sale-card.period-discounted .billing-badge,
.vps-card.period-discounted .billing-badge{
  color:#041811;
  background:#62e7c1;
  border-color:#62e7c1;
}
.sale-card.period-discounted .price-usd,
.sale-card.period-discounted .price-ars,
.vps-card.period-discounted .vps-price{
  color:#c7faeb;
}
.dynamic-price .original-price,
.vps-card h3 .original-price{
  display:block;
  margin-top:2px;
  font:500 8px Inter;
  color:#557888;
  text-decoration:line-through;
}

/* keep dropdowns visible over neighboring cards */
.sale-card,.vps-card{overflow:visible}
.sale-image{
  border-radius:21px 21px 0 0;
  overflow:hidden;
}
.sale-card{
  border-radius:22px;
}
.vps-card{
  z-index:1;
}
.vps-card:has(.period-picker.open),
.sale-card:has(.period-picker.open){
  z-index:40;
}

@media(max-width:680px){
  .period-trigger{height:44px;font-size:11px}
  .period-menu button{padding:12px 10px}
  .period-menu button b{font-size:11px}
  .period-menu button em{font-size:9px}
}


/* ---------- V8 LIFE EDIT ---------- */

/* 24/7 green ON indicator */
.hero-live-badge{
  position:relative;
  overflow:hidden;
  border-color:rgba(82,235,171,.24)!important;
  background:
    linear-gradient(90deg,rgba(69,226,155,.055),rgba(6,22,33,.58))!important;
  box-shadow:inset 0 0 18px rgba(74,239,171,.025);
}
.live-switch{
  position:relative;
  display:inline-flex;
  align-items:center;
  width:27px;
  height:14px;
  padding:2px;
  margin-right:3px;
  border-radius:999px;
  background:rgba(63,236,161,.16);
  border:1px solid rgba(76,239,171,.45);
  box-shadow:0 0 12px rgba(75,238,167,.10);
}
.live-switch em{
  position:absolute;
  right:2px;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#60efac;
  box-shadow:
    0 0 8px rgba(96,239,172,.95),
    0 0 16px rgba(96,239,172,.38);
  animation:liveKnobPulse 1.7s ease-in-out infinite;
}
.hero-live-badge::after{
  content:"";
  position:absolute;
  left:-45%;
  top:0;
  width:34%;
  height:100%;
  background:linear-gradient(90deg,transparent,rgba(109,255,190,.07),transparent);
  transform:skewX(-24deg);
  animation:liveSweep 4.8s ease-in-out infinite;
}
@keyframes liveKnobPulse{
  0%,100%{transform:scale(.92);filter:brightness(.95)}
  50%{transform:scale(1.12);filter:brightness(1.18)}
}
@keyframes liveSweep{
  0%,28%{left:-45%;opacity:0}
  36%{opacity:1}
  62%{left:112%;opacity:.9}
  70%,100%{left:112%;opacity:0}
}

/* Operational line feels active */
.infra-live small{
  display:inline-flex;
  align-items:center;
  margin-left:7px;
  padding:3px 5px;
  border-radius:999px;
  background:rgba(82,235,171,.08);
  border:1px solid rgba(82,235,171,.18);
  color:#72efb8;
  font-size:6px;
  letter-spacing:.8px;
  font-weight:900;
}
.infra-live>i{
  animation:statusPulse 1.6s ease-in-out infinite;
}
@keyframes statusPulse{
  0%,100%{transform:scale(.8);box-shadow:0 0 5px var(--green)}
  50%{transform:scale(1.18);box-shadow:0 0 16px var(--green)}
}

/* Make sure MONTHLY stays visible on VPS Pro.
   Recommended badge now sits underneath it and keeps floating. */
#vps-pro .hot-animated{
  top:44px!important;
  right:11px!important;
  z-index:6;
  animation:recommendedFloatLow 1.85s ease-in-out infinite;
}
@keyframes recommendedFloatLow{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-3px)}
}
#vps-pro .billing-badge{
  z-index:8;
}
#vps-pro{
  padding-top:29px;
}

/* A little more life without bringing back the confusing 3D effect */
#vps-pro{
  isolation:isolate;
  box-shadow:
    0 22px 68px rgba(0,0,0,.30),
    0 0 34px rgba(0,207,255,.10);
}
#vps-pro::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  border-radius:20px;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 0,rgba(65,220,255,.08),transparent 37%);
  animation:proBreath 3.3s ease-in-out infinite;
}
@keyframes proBreath{
  0%,100%{opacity:.45}
  50%{opacity:1}
}
.pro-live-line{
  position:absolute;
  left:18px;
  right:18px;
  top:0;
  height:1px;
  overflow:hidden;
  border-radius:999px;
}
.pro-live-line::after{
  content:"";
  position:absolute;
  top:0;
  width:34%;
  height:1px;
  background:linear-gradient(90deg,transparent,#63e8ff,transparent);
  box-shadow:0 0 12px rgba(99,232,255,.8);
  animation:proLine 3.2s linear infinite;
}
@keyframes proLine{
  from{left:-40%}
  to{left:110%}
}

/* Tiny life on service status without distracting */
.online-text{
  color:#65eeb4!important;
  text-shadow:0 0 10px rgba(101,238,180,.18);
  animation:onlineBreath 2.1s ease-in-out infinite;
}
@keyframes onlineBreath{
  0%,100%{opacity:.82}
  50%{opacity:1}
}

/* Slightly livelier notification dot */
.notification-dot{
  animation:notificationPulse 2s ease-in-out infinite;
}
@keyframes notificationPulse{
  0%,100%{transform:scale(.85);opacity:.75}
  50%{transform:scale(1.1);opacity:1}
}

@media(max-width:680px){
  #vps-pro .hot-animated{
    top:45px!important;
  }
}


/* ---------- PANEL AUTH V9 ---------- */
.panel-page .auth-card{max-width:460px}
.panel-page .panel-auth-form{display:grid;gap:13px;margin-top:17px}
.panel-page .panel-auth-form>label{
  display:grid;gap:7px;
  color:#789aaa;
  font-size:8px;
  font-weight:900;
  letter-spacing:1px
}
.panel-page .panel-auth-form input[type="text"],
.panel-page .panel-auth-form input[type="password"]{
  width:100%;
  height:47px;
  padding:0 13px;
  border:1px solid #17475d;
  border-radius:10px;
  outline:none;
  background:#04151f;
  color:#eafaff;
  font-size:12px;
  transition:.16s ease
}
.panel-page .panel-auth-form input:focus{
  border-color:#2bd6ff;
  box-shadow:0 0 0 3px rgba(43,214,255,.07)
}
.panel-page .panel-password-field{position:relative}
.panel-page .panel-password-field input{padding-right:63px!important}
.panel-page .panel-password-field button{
  position:absolute;right:7px;top:7px;
  height:33px;padding:0 10px;
  border:1px solid #16465c;border-radius:8px;
  background:#082330;color:#79a5b6;
  font-size:7px;font-weight:900;letter-spacing:.7px
}
.panel-page .panel-password-field button:hover{color:white;border-color:#2bd6ff}
.panel-page .remember-session{
  display:flex!important;
  grid-template-columns:auto 1fr!important;
  align-items:flex-start;
  gap:10px!important;
  padding:11px;
  border:1px solid #12384b;
  border-radius:10px;
  background:#04151f;
  cursor:pointer
}
.panel-page .remember-session input{
  width:16px;height:16px;margin:1px 0 0;
  accent-color:#21cff8
}
.panel-page .remember-session span,
.panel-page .remember-session b,
.panel-page .remember-session small{display:block;letter-spacing:0}
.panel-page .remember-session b{font-size:9px;color:#bad7e1}
.panel-page .remember-session small{margin-top:3px;color:#5e8090;font-size:8px;line-height:1.45}
.panel-page .auth-switch{
  display:flex;align-items:center;justify-content:center;gap:6px;
  margin-top:14px;
  color:#638493;font-size:9px
}
.panel-page .auth-switch button{
  border:0;background:transparent;padding:3px 0;
  color:#35d7ff;font-size:9px;font-weight:900
}
.panel-page .auth-switch button:hover{text-decoration:underline}
.panel-page .auth-info{
  display:flex;align-items:flex-start;gap:8px;
  margin-top:13px;
  padding:10px 11px;
  border:1px solid rgba(43,207,249,.10);
  border-radius:9px;
  background:rgba(43,207,249,.025);
  color:#678a9a;
  font-size:8px;
  line-height:1.55
}
.panel-page .auth-info i{
  flex:0 0 auto;
  width:7px;height:7px;margin-top:3px;
  border-radius:50%;
  background:#62e9b8;
  box-shadow:0 0 9px rgba(98,233,184,.45)
}
.panel-page .auth-info.register-info i{background:#35d7ff;box-shadow:0 0 9px rgba(53,215,255,.45)}
.panel-page .auth-info b{color:#c5edf6}
.panel-page .auth-submit{width:100%}
.panel-page #code-error:not(:empty){
  display:block;
  margin-top:11px;
  padding:9px 10px;
  border:1px solid rgba(255,105,128,.20);
  border-radius:9px;
  background:rgba(255,105,128,.045);
  color:#ff91a2;
  font-size:9px;
  line-height:1.45
}
.panel-page .panel-state-banner{
  display:none;
  margin-bottom:14px;
  padding:11px 13px;
  border:1px solid rgba(255,193,102,.20);
  border-radius:10px;
  background:rgba(255,193,102,.04);
  color:#d9b77e;
  font-size:9px
}
.panel-page .panel-state-banner.show{display:block}


/* ---------- PANEL AUTH V10: clearer register/login ---------- */
.panel-page .auth-card{
  max-width:480px;
  padding:30px;
}
.panel-page .auth-card h1{
  margin-bottom:7px;
  font-size:38px;
  letter-spacing:-1.4px;
}
.panel-page .auth-card>p{
  max-width:390px;
  line-height:1.65;
  color:#789aa8;
}
.panel-page .auth-mode-tabs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5px;
  margin-top:18px;
  padding:4px;
  border:1px solid #143f53;
  border-radius:11px;
  background:#03131c;
}
.panel-page .auth-tab{
  height:38px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:#638493;
  font-size:9px;
  font-weight:900;
  letter-spacing:.25px;
  transition:.16s ease;
}
.panel-page .auth-tab:hover{
  color:#c8ecf5;
  background:#061d28;
}
.panel-page .auth-tab.active{
  color:#00151e;
  background:linear-gradient(135deg,#1ccaf7,#53e2ff);
  box-shadow:0 7px 20px rgba(0,207,255,.13);
}
.panel-page .auth-info{
  margin-top:10px;
}
.panel-page .auth-info span b{
  color:#c6edf6;
}
.panel-page .panel-auth-form{
  margin-top:14px;
}
.panel-page .panel-auth-form>label{
  font-size:8px;
  letter-spacing:1.1px;
}
.panel-page .panel-auth-form input[type="text"],
.panel-page .panel-auth-form input[type="password"]{
  height:49px;
  font-size:13px;
  border-radius:11px;
}
.panel-page .auth-submit{
  height:48px;
  margin-top:2px;
  font-size:10px;
  letter-spacing:.15px;
}
.panel-page .auth-switch{
  margin-top:16px;
  padding-top:13px;
  border-top:1px solid rgba(60,130,158,.12);
}
.panel-page .auth-switch span{
  color:#668796;
}
.panel-page .auth-switch button{
  color:#55dcfb;
}
.panel-page #repeat-password-wrap[hidden],
.panel-page #remember-wrap[hidden]{
  display:none!important;
}


/* =========================================================
   V11 — PANEL DE SERVIDOR PRO / TODO EN ESPAÑOL
   ========================================================= */
.panel-page:not(.login-mode){
  background:#07090c;
  color:#eef9fc;
}
.server-panel{
  min-height:100vh;
  display:grid;
  grid-template-columns:248px 1fr;
  background:#07090c;
}
.server-sidebar{
  position:fixed;
  z-index:60;
  left:0;top:0;bottom:0;
  width:248px;
  display:flex;
  flex-direction:column;
  background:#05070a;
  border-right:1px solid #1b2027;
}
.server-brand{
  min-height:72px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 17px;
  color:white;
  border-bottom:1px solid #171c22;
}
.server-brand img{width:34px;height:34px;border-radius:9px;object-fit:cover}
.server-brand b,.server-brand span{display:block}
.server-brand b{font-size:12px;letter-spacing:.3px}
.server-brand span{font-size:7px;color:#29d7ff;letter-spacing:2px;margin-top:1px}
.server-search{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:8px;
  align-items:center;
  margin:12px 10px 9px;
  padding:0 10px;
  height:39px;
  border:1px solid #242a31;
  border-radius:8px;
  background:#0d1015;
  color:#77818d;
}
.server-search input{
  width:100%;
  background:transparent;
  border:0;
  outline:0;
  color:#d5e7ed;
  font-size:9px;
}
.server-search kbd{
  padding:3px 5px;
  border-radius:5px;
  background:#171b21;
  color:#75808b;
  font:700 7px Inter;
}
.server-nav{
  flex:1;
  overflow:auto;
  padding:5px 8px 18px;
}
.server-nav button{
  width:100%;
  height:36px;
  display:flex;
  align-items:center;
  gap:9px;
  padding:0 10px;
  border:0;
  border-radius:7px;
  background:transparent;
  color:#d2dae0;
  text-align:left;
  font-size:9px;
  font-weight:700;
  transition:.14s ease;
}
.server-nav button span{width:16px;color:#aebac1;text-align:center}
.server-nav button:hover{background:#12161b;color:white}
.server-nav button.active{background:#25282d;color:white}
.server-nav-separator{height:1px;background:#171c22;margin:10px -8px}
.sidebar-account{
  min-height:66px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:9px;
  align-items:center;
  padding:10px 12px;
  border-top:1px solid #171c22;
}
.sidebar-account-avatar{
  width:31px;height:31px;
  display:grid;place-items:center;
  border-radius:8px;
  background:#1c2229;
  color:#7adfff;
  font-size:10px;
  font-weight:900;
}
.sidebar-account b,.sidebar-account span{display:block;max-width:130px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-account b{font-size:8px}
.sidebar-account span{font-size:7px;color:#6f7b85;margin-top:2px}
.sidebar-account button{
  width:30px;height:30px;
  border:1px solid #2a3037;
  border-radius:7px;
  background:#0d1014;
  color:#fb6277;
}

.server-main{
  grid-column:2;
  min-width:0;
  padding:0 28px 54px;
}
.server-topbar{
  min-height:80px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  border-bottom:1px solid #161b21;
}
.server-breadcrumb{
  display:block;
  color:#5e6973;
  font-size:7px;
  letter-spacing:.7px;
}
.server-breadcrumb b{color:#778994}
.server-topbar h1{
  margin:4px 0 0;
  font:700 21px "Space Grotesk";
}
.topbar-right{display:flex;align-items:center;gap:9px}
.top-support{
  padding:9px 12px;
  border:1px solid #26323a;
  border-radius:8px;
  background:#0d1419;
  color:#98b5c2;
  font-size:8px;
  font-weight:800;
}
.mobile-sidebar-toggle{display:none}

.support-banner{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:12px;
  margin:18px 0 17px;
  padding:13px 15px;
  border:1px solid #0574ac;
  border-radius:9px;
  background:#073a56;
}
.support-icon{
  width:28px;height:28px;
  display:grid;place-items:center;
  border-radius:7px;
  background:#0b4c6d;
  color:#72ddff;
}
.support-banner b,.support-banner p{display:block}
.support-banner b{font-size:9px}
.support-banner p{margin:3px 0 0;color:#8ed9f5;font-size:8px}
.support-banner a{
  padding:8px 10px;
  border-radius:7px;
  background:rgba(0,0,0,.16);
  color:#bcecff;
  font-size:8px;
  font-weight:800;
}

.panel-view{display:none}
.panel-view.active{display:block;animation:panelFade .18s ease}
@keyframes panelFade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

.server-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin:18px 0 14px;
}
.server-title-wrap{display:flex;align-items:center;gap:12px}
.server-live-dot{
  width:19px;height:19px;
  border-radius:50%;
  background:#00df80;
  box-shadow:0 0 14px rgba(0,223,128,.20);
}
.server-live-dot.offline{background:#e55b65;box-shadow:0 0 14px rgba(229,91,101,.18)}
.server-title-wrap small{font-size:7px;color:#5e7e8d;letter-spacing:1px}
.server-title-wrap h2{margin:2px 0 0;font:700 18px "Space Grotesk"}
.server-title-wrap p{margin:3px 0 0;color:#63717b;font-size:8px}

.power-actions{display:flex;gap:7px}
.power-btn{
  min-width:80px;height:34px;
  border:0;border-radius:7px;
  color:white;
  font-size:8px;font-weight:900;
}
.power-btn.start{background:#0b713e}
.power-btn.restart{background:#f0a20d}
.power-btn.stop{background:#c53b47}
.power-actions.compact .power-btn{min-width:70px;height:32px}

.metrics-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:11px;
}
.metric-card{
  min-height:92px;
  padding:14px 15px;
  border:1px solid #252a31;
  border-radius:10px;
  background:#080a0d;
}
.metric-head,.metric-sub{
  display:flex;justify-content:space-between;gap:10px;align-items:center;
}
.metric-head span,.metric-sub span{font-size:8px;font-weight:800}
.metric-head b,.metric-sub b{font-size:8px;color:#dfe9ed}
.metric-sub{margin-top:9px;padding-top:9px;border-top:1px solid #171b20}
.metric-card>small{display:block;margin-top:6px;color:#66737c;font-size:7px}
.metric-bar{
  height:5px;
  margin-top:13px;
  border-radius:999px;
  overflow:hidden;
  background:#24272d;
}
.metric-bar i{
  display:block;height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#7857ff,#ef45ac);
  transition:.35s width;
}
.metric-bar.memory i{background:linear-gradient(90deg,#e8eef2,#aeb7bd)}
.metric-bar.storage i{background:linear-gradient(90deg,#7857ff,#ef45ac)}

.overview-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin-top:12px;
}
.overview-card{
  padding:14px;
  border:1px solid #22282e;
  border-radius:10px;
  background:#090c0f;
}
.overview-card span,.overview-card b,.overview-card small{display:block}
.overview-card span{font-size:7px;color:#63717b;letter-spacing:.8px}
.overview-card b{margin-top:7px;font-size:10px}
.overview-card small{margin-top:4px;color:#66747d;font-size:7px}
#status-text{color:#55e6a2}

.quick-console{
  margin-top:12px;
  padding:14px;
  border:1px solid #252a31;
  border-radius:10px;
  background:#050709;
}
.section-title-row{
  display:flex;align-items:center;justify-content:space-between;gap:14px
}
.section-title-row small{display:block;color:#5c7682;font-size:7px;letter-spacing:1px}
.section-title-row h3,.section-title-row h2{margin:3px 0 0;font-family:"Space Grotesk"}
.section-title-row h3{font-size:13px}
.section-title-row.big{margin:22px 0 14px}
.section-title-row.big h2{font-size:24px}
.section-title-row.big p{margin:5px 0 0;color:#65727c;font-size:9px}
.text-btn{
  border:0;background:transparent;color:#48d4ff;
  font-size:8px;font-weight:800
}
.quick-console pre{
  margin:13px 0 0;
  min-height:120px;
  padding:13px;
  border:1px solid #161b20;
  border-radius:8px;
  background:#030405;
  color:#b7c5ca;
  font:500 9px/1.65 ui-monospace,SFMono-Regular,Consolas,monospace;
  white-space:pre-wrap;
}
.console-green{color:#00e48a}.console-blue{color:#42a7ff}.console-yellow{color:#f5d50b}.console-red{color:#ff6676}.console-input-line{color:#e2f2f6}

.terminal-card{
  border:1px solid #272c32;
  border-radius:10px;
  overflow:hidden;
  background:#040506;
}
.terminal-toolbar{
  height:42px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 12px;
  border-bottom:1px solid #191d21;
  background:#090b0e
}
.terminal-toolbar span{font-size:8px;font-weight:800}
.terminal-toolbar span i{
  display:inline-block;width:7px;height:7px;margin-right:6px;
  border-radius:50%;background:#00df80;box-shadow:0 0 9px rgba(0,223,128,.45)
}
.terminal-toolbar button{
  border:1px solid #252c32;border-radius:6px;background:#101419;color:#8999a2;font-size:7px;padding:5px 8px
}
#console-output{
  height:400px;
  overflow:auto;
  margin:0;
  padding:16px;
  background:#030405;
  color:#d4e0e5;
  font:600 9px/1.55 ui-monospace,SFMono-Regular,Consolas,monospace;
  white-space:pre-wrap
}
.terminal-input{
  height:43px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:8px;
  padding:0 10px;
  border-top:1px solid #191d21;
  background:#0b0d10
}
.terminal-input>span{color:#77848d}
.terminal-input input{background:transparent;border:0;outline:0;color:#e1edf1;font:500 9px ui-monospace,monospace}
.terminal-input button{border:0;border-radius:6px;background:#1c6f93;color:white;padding:7px 10px;font-size:7px}
.chart-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:11px}
.chart-cards article{padding:13px;border:1px solid #22282f;border-radius:9px;background:#080a0d}
.chart-cards span,.chart-cards strong{display:block}
.chart-cards span{font-size:8px}.chart-cards strong{margin-top:4px;font-size:12px}
.mini-chart{height:38px;display:flex;align-items:flex-end;gap:3px;margin-top:10px}
.mini-chart i{flex:1;min-height:4px;border-radius:2px;background:#614cff}
.mini-chart i:nth-child(2){height:35%}.mini-chart i:nth-child(3){height:72%}.mini-chart i:nth-child(4){height:48%}.mini-chart i:nth-child(5){height:85%}.mini-chart i:nth-child(6){height:62%}.mini-chart i:nth-child(7){height:90%}.mini-chart i:nth-child(8){height:58%}

.file-actions{display:flex;gap:7px;flex-wrap:wrap}
.panel-btn{
  min-height:34px;
  padding:0 12px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid #292f36;
  border-radius:7px;
  background:#0d1014;
  color:#d6e2e7;
  font-size:8px;
  font-weight:800;
}
.panel-btn.primary{background:#f2f3f5;border-color:#f2f3f5;color:#111317}
.panel-btn.danger{background:#c83c48;border-color:#c83c48;color:white}
.file-browser,.panel-table{
  border:1px solid #252b31;
  border-radius:9px;
  overflow:hidden;
  background:#07090c
}
.file-path{
  min-height:43px;
  display:flex;align-items:center;gap:8px;
  padding:0 12px;
  border-bottom:1px solid #20262c;
  background:#0d1014;
  font-size:8px
}
.file-path b{flex:1}
.file-path button{border:0;background:transparent;color:#70d8f4;font-size:7px}
.file-table-head,.file-row{
  display:grid;
  grid-template-columns:minmax(280px,1fr) 120px 160px 32px;
  gap:10px;
  align-items:center;
  min-height:40px;
  padding:0 12px
}
.file-table-head{background:#111419;color:#cbd7dc;font-size:8px;font-weight:800}
.file-row{border-top:1px solid #1c2126;color:#c2ced3;font-size:8px}
.file-row:hover{background:#0e1216}
.file-row.placeholder{color:#65717a}
.file-name b{margin-left:6px}

.cards-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:11px
}
.empty-state,.data-card{
  min-height:190px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  padding:22px;
  border:1px solid #272c32;
  border-radius:10px;
  background:#080a0d;
  text-align:center
}
.empty-state>span{font-size:24px;color:#4d5a64}
.empty-state b{margin-top:9px;font-size:11px}
.empty-state p{max-width:290px;margin:5px 0 0;color:#66747d;font-size:8px;line-height:1.6}
.data-card{align-items:flex-start;justify-content:flex-start;text-align:left}
.data-card small{font-size:7px;color:#657582}.data-card h3{margin:3px 0 12px;font-size:15px}.data-card p{font-size:8px;color:#86949b}

.panel-table-head,.panel-table-row{
  display:grid;
  grid-template-columns:1.2fr 1fr 130px 45px;
  gap:12px;
  align-items:center;
  min-height:44px;
  padding:0 13px
}
.panel-table-head{background:#111419;color:#d0dade;font-size:8px;font-weight:800}
.panel-table-row{border-top:1px solid #1d2228;color:#afbbc0;font-size:8px}
.state-ok{color:#57e3a3}
.network-grid,.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.settings-card{
  padding:20px;
  border:1px solid #272c32;
  border-radius:10px;
  background:#080a0d
}
.settings-card>span{display:block;color:#687780;font-size:7px;letter-spacing:1px;font-weight:900}
.settings-card h3{margin:9px 0 4px;font-size:15px}
.settings-card p{color:#727f87;font-size:8px;line-height:1.6}
.settings-card label{display:grid;gap:6px;margin-top:14px;color:#c4d1d6;font-size:8px;font-weight:800}
.settings-card input,.settings-card textarea{
  width:100%;
  min-height:39px;
  padding:9px 10px;
  border:1px solid #292f36;
  border-radius:7px;
  outline:0;
  background:#0e1115;
  color:#dce9ed;
  font-size:9px
}
.settings-card textarea{min-height:86px;resize:vertical}
.settings-card .panel-btn{margin-top:12px}
.danger-card{border-color:rgba(204,66,78,.24)}
.startup-vars{margin-top:12px}
.activity-list{display:grid;gap:8px}
.activity-list article{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:11px;
  align-items:center;
  min-height:64px;
  padding:10px 14px;
  border:1px solid #252a30;
  border-radius:9px;
  background:#080a0d
}
.activity-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:#22272d;color:#d7e4e9;font-size:9px;font-weight:900}
.activity-list b,.activity-list p{display:block}.activity-list b{font-size:9px}.activity-list p{margin:3px 0 0;color:#718089;font-size:8px}.activity-list time{color:#6a7780;font-size:7px}

.panel-page .toast[data-type="error"]{border-color:rgba(255,91,109,.3);color:#ff8e9e}
.panel-page .toast[data-type="ok"]{border-color:rgba(79,231,165,.3);color:#7df0ba}

@media(max-width:1050px){
  .overview-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:820px){
  .server-panel{display:block}
  .server-sidebar{transform:translateX(-102%);transition:.2s transform}
  .server-sidebar.open{transform:none;box-shadow:25px 0 70px rgba(0,0,0,.55)}
  .server-main{padding:0 14px 40px}
  .mobile-sidebar-toggle{display:grid;place-items:center;width:34px;height:34px;border:1px solid #273038;border-radius:7px;background:#0d1216;color:white}
  .server-topbar{justify-content:flex-start}.topbar-right{margin-left:auto}
  .metrics-grid,.network-grid,.settings-grid,.cards-list{grid-template-columns:1fr}
  .chart-cards{grid-template-columns:1fr}
}
@media(max-width:620px){
  .server-topbar h1{font-size:17px}
  .node-status{display:none}
  .support-banner{grid-template-columns:auto 1fr}.support-banner>a{grid-column:1/-1;text-align:center}
  .server-heading{align-items:flex-start;flex-direction:column}
  .power-actions{width:100%}.power-btn{flex:1}
  .metrics-grid,.overview-grid{grid-template-columns:1fr}
  .file-table-head,.file-row{grid-template-columns:1fr 74px}.file-table-head span:nth-child(3),.file-table-head span:nth-child(4),.file-row span:nth-child(3),.file-row span:nth-child(4){display:none}
  .panel-table-head,.panel-table-row{grid-template-columns:1fr 100px}.panel-table-head span:nth-child(2),.panel-table-head span:nth-child(4),.panel-table-row span:nth-child(2),.panel-table-row span:nth-child(4){display:none}
}

/* ---------- AntiCheat card — professional pricing ---------- */
.anticheat-sale-card .sale-body > p{
  color:#86a4b2;
  line-height:1.7;
}
.ac-plan-options{
  display:grid;
  gap:8px;
  margin:18px 0 20px;
}
.ac-plan-option{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:8px 14px;
  padding:12px 13px;
  border:1px solid rgba(78,137,163,.20);
  border-radius:12px;
  background:linear-gradient(180deg,rgba(8,31,43,.72),rgba(5,22,32,.76));
}
.ac-plan-option.featured{
  border-color:rgba(0,207,255,.35);
  background:linear-gradient(180deg,rgba(7,39,54,.88),rgba(5,25,36,.82));
  box-shadow:inset 0 0 24px rgba(0,207,255,.035);
}
.ac-plan-option.lifetime{
  border-color:rgba(92,232,190,.22);
}
.ac-plan-main{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  grid-column:1/-1;
}
.ac-plan-main small{
  color:#7da1b1;
  font-size:8px;
  font-weight:900;
  letter-spacing:1px;
}
.ac-plan-main strong{
  color:#eefcff;
  font:700 19px "Space Grotesk";
  white-space:nowrap;
}
.ac-plan-option > span{
  color:#6f909f;
  font-size:8px;
}
.ac-plan-option > em{
  justify-self:end;
  padding:4px 6px;
  border-radius:999px;
  background:rgba(0,207,255,.10);
  border:1px solid rgba(0,207,255,.18);
  color:#83eaff;
  font-size:6.5px;
  font-style:normal;
  font-weight:900;
  letter-spacing:.7px;
}
.anticheat-sale-card .ac-benefits{
  margin-top:2px;
}
.anticheat-sale-card .details-btn,
.anticheat-sale-card .btn{
  min-height:46px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}
@media(max-width:680px){
  .ac-plan-main{align-items:flex-start;flex-direction:column;gap:4px}
  .ac-plan-option{grid-template-columns:1fr}
  .ac-plan-option > em{justify-self:start}
}

/* ══════════════════════════════════════════════════════════════════════
   TRUCO BOT HOSTING — panel de bots PM2, sin cambios al diseño anterior
   ══════════════════════════════════════════════════════════════════════ */
.truco-nav-bot-label{font-size:8px;font-weight:800;letter-spacing:.1em;margin-left:auto;color:#39cfff;background:rgba(42,195,243,.1);padding:3px 6px;border-radius:5px}
.truco-bot-view{--tb-accent:#20c9f4;--tb-border:rgba(60,160,219,.23);color:#dff4ff;padding-bottom:50px}
.truco-bot-heading{border:1px solid var(--tb-border);padding:30px 33px;display:flex;align-items:center;justify-content:space-between;gap:15px;border-radius:16px;background:radial-gradient(ellipse at 89% 0%,rgba(5,106,166,.22),transparent 55%),linear-gradient(145deg,#0a1627,#070f1b);position:relative;overflow:hidden;box-shadow:0 18px 45px rgba(0,0,0,.12)}
.truco-bot-heading:after{content:"";position:absolute;top:-90px;right:9%;width:195px;height:195px;border:1px solid rgba(18,179,235,.18);border-radius:100%;pointer-events:none;box-shadow:0 0 0 50px rgba(20,179,232,.015),0 0 0 100px rgba(20,179,232,.01)}
.truco-bot-eyebrow{font-size:10px;letter-spacing:2px;font-weight:800;color:#39cfff;display:inline-flex;align-items:center;gap:8px}
.truco-bot-eyebrow i,.truco-live-pulse{display:inline-block;width:7px;height:7px;border-radius:50%;background:#26dfff;box-shadow:0 0 16px rgba(38,223,255,.6)}
.truco-bot-beta{font-size:9px;background:rgba(31,142,182,.18);border:1px solid rgba(31,142,182,.26);padding:3px 7px;color:#8adcf7;border-radius:5px;letter-spacing:1px}
.truco-bot-heading h2{font-size:30px;letter-spacing:-1px;font-weight:800;margin:14px 0 8px;color:#f1fbff;line-height:1.18}
.truco-bot-heading h2 span{color:#2ed8ff}
.truco-bot-heading p{font-size:12px;color:#8ba6b9;max-width:580px;line-height:1.7;margin:0}
.truco-bot-host{position:relative;z-index:1;border:1px solid rgba(36,167,215,.28);padding:13px 17px;border-radius:10px;background:#081e30;display:flex;gap:11px;align-items:center;white-space:nowrap;color:#78a8c0;font-size:9px;letter-spacing:1px;line-height:1.9}
.truco-bot-host b{color:#dbfaff;font-size:11px}
.truco-live-pulse{animation:truco-bot-pulse 2s ease-in-out infinite;background:#24f1b5;box-shadow:0 0 12px #24f1b5}
@keyframes truco-bot-pulse{50%{opacity:.4;box-shadow:0 0 2px #24f1b5}}
.truco-bot-subbar{margin-top:23px;margin-bottom:13px;display:flex;align-items:center;justify-content:space-between;gap:12px;color:#dff4ff}
.truco-bot-subbar>div{display:flex;align-items:center;gap:8px;font-size:14px}
.truco-bot-subbar>div>span{color:#27c9ee;font-size:21px}
.truco-bot-subbar small{font-size:10px;color:#789cb3;font-weight:400;margin-left:7px}
.truco-bot-ghost,.truco-bot-action{cursor:pointer;border:1px solid rgba(55,145,188,.32);border-radius:8px;background:rgba(12,31,48,.9);color:#a8d8ee;padding:9px 12px;font-size:11px;font-weight:700;transition:background .18s,transform .18s,border-color .18s,box-shadow .18s}
.truco-bot-ghost:hover,.truco-bot-action:hover{background:#103b57;color:#eefbff;border-color:rgba(35,212,251,.6);transform:translateY(-1px)}
.truco-bot-action:disabled,.truco-bot-primary:disabled{opacity:.45;cursor:not-allowed;transform:none!important}
.truco-bot-notice{font-size:12px;color:#9cbcd0;padding:13px 16px;border:1px solid var(--tb-border);background:#091726;border-radius:9px;margin:12px 0}
.truco-bot-notice[hidden]{display:none}
.truco-bot-notice[data-kind="error"]{color:#ff919a;border-color:rgba(241,88,113,.36);background:rgba(127,21,45,.1)}
.truco-bot-notice[data-kind="ok"]{color:#6af3cf;border-color:rgba(59,216,172,.3)}
.truco-bot-list{display:grid;gap:13px}
.truco-bot-card{border:1px solid var(--tb-border);background:linear-gradient(140deg,rgba(10,27,43,.98),rgba(4,14,27,.98));border-radius:13px;padding:18px 21px;box-shadow:0 12px 28px rgba(0,0,0,.12);transition:transform .2s,border-color .2s,box-shadow .2s}
.truco-bot-card:hover{border-color:rgba(43,186,226,.48);box-shadow:0 10px 32px rgba(0,181,241,.08)}
.truco-bot-card-head{display:flex;align-items:center;gap:13px;flex-wrap:wrap}
.truco-bot-card-icon{width:48px;height:48px;display:grid;place-items:center;background:linear-gradient(135deg,#0a3554,#0c1c32);border:1px solid rgba(53,206,255,.32);border-radius:11px;color:#3edbff;font-size:25px;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.truco-bot-card-title{flex:1;min-width:145px}
.truco-bot-card-title h3{margin:0 0 3px;font-size:15px;color:#f0fbff;font-weight:800}
.truco-bot-card-title p{margin:0;font-size:10px;color:#88a9bb}
.truco-bot-state{font-size:10px;padding:7px 10px;border-radius:7px;background:rgba(106,132,154,.14);color:#a5b7c4;border:1px solid rgba(132,168,192,.22);font-weight:800;letter-spacing:1px}
.truco-bot-state.online{background:rgba(22,181,135,.12);color:#6cf3c8;border-color:rgba(51,230,170,.3)}
.truco-bot-state.installing{color:#7fdcff;border-color:rgba(51,190,244,.38)}
.truco-bot-meta{display:flex;gap:13px;flex-wrap:wrap;margin:15px 0;padding-top:12px;border-top:1px solid rgba(79,145,187,.14);font-size:11px;color:#8cacbf}
.truco-bot-meta b{color:#d6edfc;font-weight:650}
.truco-bot-actions{display:flex;gap:8px;flex-wrap:wrap}
.truco-bot-action.primary{background:linear-gradient(115deg,#12b7e8,#3bdaff);color:#012137;border-color:transparent}
.truco-bot-action.primary:hover{box-shadow:0 6px 16px rgba(28,194,238,.25)}
.truco-bot-action.stop{color:#ffc3c9;border-color:rgba(240,103,121,.25)}
.truco-bot-console{margin-top:14px;border:1px solid rgba(54,147,192,.25);border-radius:9px;overflow:hidden;background:#040c16}
.truco-bot-console-head{background:#0b1a2b;padding:10px 13px;font-size:10px;font-weight:800;color:#79bdda;letter-spacing:1px;display:flex;justify-content:space-between;align-items:center}
.truco-bot-console pre{min-height:90px;max-height:310px;overflow:auto;padding:13px;font:11px/1.6 Consolas,Monaco,monospace;color:#9bcbe1;margin:0;white-space:pre-wrap;word-break:break-word}
.truco-bot-upload{margin-top:24px;background:linear-gradient(145deg,#0c1c30,#091421);border:1px dashed rgba(37,196,239,.42);border-radius:15px;padding:24px;box-shadow:inset 0 1px 0 rgba(49,186,228,.07)}
.truco-bot-upload[hidden]{display:none}
.truco-bot-upload-info{display:flex;gap:17px;align-items:center}
.truco-bot-upload-icon{width:54px;height:54px;flex:none;border-radius:12px;display:grid;place-items:center;color:#62e0ff;background:rgba(11,121,158,.18);border:1px solid rgba(67,213,249,.27);font-size:27px}
.truco-bot-upload h3{font-size:19px;color:#edfbff;margin:6px 0}
.truco-bot-upload p{font-size:11px;color:#8aaabd;line-height:1.6;margin:0}
.truco-bot-name-field{display:block;font-size:10px;font-weight:800;letter-spacing:1px;color:#92b9cc;margin-top:22px}
.truco-bot-name-field input{background:#061626;border:1px solid rgba(66,157,203,.38);border-radius:8px;color:#ecf9ff;outline:0;display:block;max-width:460px;width:100%;margin-top:8px;padding:12px 13px;font-size:13px}
.truco-bot-name-field input:focus{border-color:#29d3fa;box-shadow:0 0 0 3px rgba(42,198,237,.1)}
.truco-bot-upload-buttons{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin:17px 0}
.truco-bot-filebtn{padding:20px 14px;min-height:104px;cursor:pointer;text-align:center;background:#081b2d;border:1px solid rgba(65,164,206,.35);border-radius:11px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#e4f8ff;transition:border-color .18s,background .18s,transform .18s}
.truco-bot-filebtn>span{color:#3ccef4;font-size:25px}
.truco-bot-filebtn b{font-size:12px}
.truco-bot-filebtn small{font-size:10px;color:#7da4b7}
.truco-bot-filebtn:hover{border-color:#30cbed;background:#0c2a43;transform:translateY(-2px)}
.truco-bot-upload-preview{font-size:11px;padding:12px;color:#a5dbf1;background:#07192a;border:1px solid rgba(52,165,204,.3);border-radius:8px;margin-bottom:12px;word-break:break-word}
.truco-bot-primary{width:100%;background:linear-gradient(105deg,#16bae5,#42daff);border:0;padding:13px 17px;color:#052237;border-radius:8px;font-size:12px;font-weight:850;cursor:pointer;box-shadow:0 8px 23px rgba(18,190,241,.15)}
.truco-bot-primary:hover:not(:disabled){filter:brightness(1.1);transform:translateY(-1px)}
.truco-bot-upload-tip{margin-top:12px!important}
.truco-bot-upload-tip code,.truco-bot-upload-info code{color:#9de5fb;background:rgba(40,174,223,.1);padding:1px 3px}
@media(max-width:760px){.truco-bot-heading{padding:21px;flex-wrap:wrap}.truco-bot-heading h2{font-size:24px}.truco-bot-host{width:100%}.truco-bot-upload{padding:17px}.truco-bot-upload-buttons{grid-template-columns:1fr}.truco-bot-subbar{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){.truco-bot-view *{animation:none!important;transition:none!important}}

/* TRUCO BOT MANAGER V3 — sólo campos nuevos, sin alterar efectos anteriores. */
.truco-bot-type-select { width:100%;border:1px solid rgba(45,185,240,.25);border-radius:12px;padding:12px 13px;background:#06131f;color:#e5f5ff;font:inherit;outline:none; }
.truco-bot-type-select:focus {border-color:#1cc6f4;box-shadow:0 0 0 3px rgba(28,198,244,.09)}
.truco-bot-type-select option {color:#e5f5ff;background:#06131f}
.truco-bot-env-panel {border:1px solid rgba(28,198,244,.19);background:#061727;border-radius:12px;margin-top:12px;padding:14px;}
.truco-bot-env-panel[hidden] {display:none!important}
.truco-bot-env-warning {font-size:12px;line-height:1.6;color:#80aeca;margin:0 0 12px}
.truco-bot-env-editor {width:100%;min-height:190px;box-sizing:border-box;resize:vertical;border:1px solid rgba(28,198,244,.3);border-radius:9px;padding:13px;background:#020d16;color:#b4eaff;font:12px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace;outline:none;margin-bottom:10px}
.truco-bot-env-editor:focus {border-color:#27c9ff}

/* TRUCO BOT MANAGER V4 — zona de subida visible: conserva colores y efectos existentes. */
.truco-bot-upload {display:block;margin-top:18px}
.truco-bot-upload-dropzone {
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;
  min-height:220px;border-radius:13px;padding:25px 16px;text-align:center;
  border:2px dashed rgba(47,203,245,.56);background:linear-gradient(145deg,rgba(15,73,108,.25),rgba(3,20,35,.63));
  cursor:pointer;outline:none;position:relative;overflow:hidden;
  transition:background .22s,box-shadow .22s,border-color .22s,transform .22s;
}
.truco-bot-upload-dropzone:before {content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 5%,rgba(42,211,255,.10),transparent 65%)}
.truco-bot-upload-dropzone:hover,.truco-bot-upload-dropzone:focus-visible,.truco-bot-upload-dropzone.is-dragging {
  border-color:#50dbff;background:linear-gradient(145deg,rgba(16,113,153,.35),rgba(5,31,50,.78));box-shadow:0 0 0 3px rgba(27,183,232,.1),0 12px 36px rgba(0,0,0,.2)
}
.truco-bot-drop-icon {display:grid;place-items:center;width:53px;height:53px;border-radius:15px;color:#65e2ff;font-size:31px;line-height:1;background:rgba(23,176,230,.14);border:1px solid rgba(69,210,250,.38);box-shadow:0 0 30px rgba(29,181,235,.11)}
.truco-bot-upload-dropzone strong {position:relative;font-size:20px;line-height:1.25;color:#f3fbff;font-weight:850}
.truco-bot-upload-dropzone>span:not(.truco-bot-drop-icon):not(.truco-bot-drop-action) {position:relative;color:#9abed3;font-size:12px}
.truco-bot-drop-action {position:relative;background:linear-gradient(115deg,#22c1e9,#56e2ff);color:#052437;padding:12px 21px;border-radius:8px;font-size:12px;font-weight:850;box-shadow:0 7px 22px rgba(15,175,235,.16)}
.truco-bot-upload-dropzone small {position:relative;font-size:10px;color:#8bb1c5}
.truco-bot-upload-info {margin-top:23px}
.truco-bot-upload[hidden]{display:none}
.truco-bot-upload-preview[hidden]{display:none}
@media(max-width:760px){.truco-bot-upload-dropzone{min-height:208px;padding:23px 10px}.truco-bot-upload-dropzone strong{font-size:17px}}