:root{
  --bg:#020604;--bg2:#06100a;--panel:#07130c;--panel2:#0a1a10;--line:#174a2b;
  --green:#19ff78;--green2:#00c95d;--text:#f1fff6;--muted:#7d9b87;--bad:#ff5d70;
  --warn:#f3c85b;--shadow:0 24px 80px #0009;--radius:18px;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:
radial-gradient(circle at 80% -10%,#0d5b2a33,transparent 30%),
radial-gradient(circle at -10% 50%,#0c3a2230,transparent 35%),var(--bg);
color:var(--text);font-family:Inter,Segoe UI,Arial,sans-serif;min-height:100vh}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.22;background-image:
linear-gradient(#12301d55 1px,transparent 1px),linear-gradient(90deg,#12301d55 1px,transparent 1px);background-size:48px 48px}
a{color:inherit}.hidden{display:none!important}.shell{width:min(1180px,calc(100% - 36px));margin:auto}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}.brand img{width:44px;height:44px;object-fit:contain;filter:drop-shadow(0 0 12px #19ff7850)}
.brand strong{font:700 13px Segoe UI,Arial,sans-serif;color:white;letter-spacing:.05em}.brand small{display:block;color:var(--green);font:600 8px Segoe UI,Arial,sans-serif;letter-spacing:.15em;margin-top:3px}
.topbar{position:sticky;top:0;z-index:20;border-bottom:1px solid #123721;background:#030a06e8;backdrop-filter:blur(14px)}
.topbar-inner{height:70px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.userbar{display:flex;align-items:center;gap:10px}.pill{padding:8px 11px;border:1px solid #1a5530;background:#07170e;border-radius:999px;color:#9ec9ac;font-size:11px}
.btn{border:0;border-radius:11px;min-height:42px;padding:0 16px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font:700 10px Segoe UI,Arial,sans-serif;letter-spacing:.04em;cursor:pointer;text-decoration:none;transition:.2s}
.btn.primary{background:linear-gradient(135deg,#00b84e,#21ff7c);color:#001d0c;box-shadow:0 10px 35px #00d85e25}.btn.primary:hover{transform:translateY(-2px);box-shadow:0 15px 42px #00ff6a36}
.btn.ghost{background:#07130c;border:1px solid #1b5431;color:#b7d7c1}.btn.danger{background:#2a0a10;border:1px solid #6d2130;color:#ff98a6}.btn.small{min-height:34px;padding:0 11px;font-size:8px}
.layout{display:grid;grid-template-columns:235px minmax(0,1fr);min-height:calc(100vh - 70px)}
.sidebar{border-right:1px solid #10341f;background:#030a06cc;padding:24px 14px;position:sticky;top:70px;height:calc(100vh - 70px)}
.nav-title{padding:10px 12px;color:#49775a;font:700 8px Segoe UI,Arial,sans-serif;letter-spacing:.15em}.nav-btn{width:100%;height:44px;border:1px solid transparent;border-radius:11px;background:transparent;color:#7fa18a;display:flex;align-items:center;gap:10px;padding:0 12px;cursor:pointer;text-align:left;font-weight:700}
.nav-btn:hover,.nav-btn.active{background:#08180f;border-color:#19532f;color:#dcffe7}.nav-btn.active{box-shadow:inset 3px 0 var(--green)}
.main{padding:34px 0 70px;min-width:0}.page-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-end;margin-bottom:24px}.eyebrow{color:var(--green);font:700 9px Segoe UI,Arial,sans-serif;letter-spacing:.16em}
h1,h2,h3{font-family:Segoe UI,Arial,sans-serif;margin:0}h1{font-size:clamp(25px,4vw,40px);line-height:1.05;margin-top:8px}h1 span{color:var(--green)}.muted{color:var(--muted);font-size:12px;line-height:1.6}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}.metric,.card{border:1px solid #154229;background:linear-gradient(145deg,#08150d,#050c08);border-radius:var(--radius);box-shadow:inset 0 1px #ffffff06,var(--shadow)}
.metric{padding:18px}.metric b{display:block;font:700 25px Segoe UI,Arial,sans-serif;margin-top:10px}.metric span{color:#6b9278;font-size:10px}.metric i{font-style:normal;color:var(--green)}
.card{padding:20px;margin-top:16px}.card-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px}.card-head h2{font-size:14px}.badge{display:inline-flex;align-items:center;gap:6px;padding:6px 8px;border-radius:999px;font:700 7px Segoe UI,Arial,sans-serif;border:1px solid #1d5a35;background:#071b10;color:#87e9ac}.badge:before{content:"";width:5px;height:5px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green)}
.badge.off{border-color:#5b2730;background:#1a0a0d;color:#ff91a0}.badge.off:before{background:var(--bad);box-shadow:0 0 10px var(--bad)}
.table-wrap{overflow:auto;border:1px solid #10371f;border-radius:12px}table{width:100%;border-collapse:collapse;min-width:760px}th,td{padding:12px 13px;text-align:left;border-bottom:1px solid #0e2e1b;font-size:11px}th{color:#5f8d6d;background:#06110a;font:700 8px Segoe UI,Arial,sans-serif;letter-spacing:.08em}tr:last-child td{border-bottom:0}
.actions{display:flex;flex-wrap:wrap;gap:7px}.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.field{display:flex;flex-direction:column;gap:7px}.field.full{grid-column:1/-1}.field label{color:#6d947a;font:700 8px Segoe UI,Arial,sans-serif;letter-spacing:.08em}.field input,.field select{width:100%;height:43px;border:1px solid #194e2d;border-radius:10px;background:#040d07;color:white;padding:0 12px;outline:0}.field input:focus,.field select:focus{border-color:#2acb65;box-shadow:0 0 0 3px #1aff6b10}
.notice{padding:13px 14px;border:1px solid #375c20;background:#121b08;border-radius:11px;color:#c6dd9f;font-size:11px;line-height:1.55}.notice.bad{border-color:#692434;background:#21090f;color:#ffb0ba}.notice.good{border-color:#1d6036;background:#071c10;color:#9bf5ba}
.plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.plan{padding:22px;border:1px solid #1b5733;background:radial-gradient(circle at 50% 0%,#0c572830,transparent 50%),#07110b;border-radius:16px;position:relative}.plan strong{font:700 16px Segoe UI,Arial,sans-serif}.plan .price{font:700 30px Segoe UI,Arial,sans-serif;color:var(--green);margin:15px 0 4px}.plan .cost{color:#8bb899;font-size:11px}.plan .btn{width:100%;margin-top:18px}
.login-page{display:grid;place-items:center;min-height:100vh;padding:24px;background:radial-gradient(circle at 50% 40%,#0c52252e,transparent 32%),var(--bg)}
.login-card{width:min(400px,100%);padding:38px 34px 34px;border:1px solid #18532f;border-radius:22px;background:linear-gradient(155deg,#07140cfa,#030a06fa);box-shadow:0 30px 100px #000b,inset 0 1px #ffffff08}
.login-logo{width:184px;height:184px;margin:0 auto 30px;border-radius:50%;overflow:hidden;background:#000;box-shadow:0 0 0 1px #20f87980,0 0 34px #13ff6b27;position:relative}
.login-logo img{position:absolute;width:284px;max-width:none;height:auto;left:50%;top:50%;transform:translate(-50%,-48%);filter:none}
.login-form{display:grid;gap:16px}.login-form .field{gap:8px}.login-form .field input{height:48px;border-radius:12px;font-size:14px}
.remember-control{display:inline-flex;align-items:center;gap:10px;width:max-content;color:#91aa99;font-size:12px;cursor:pointer;user-select:none;margin:1px 0 2px}
.remember-control input{position:absolute;opacity:0;pointer-events:none}
.remember-check{width:18px;height:18px;display:grid;place-items:center;border:1px solid #28613b;border-radius:5px;background:#030a06;transition:.18s}
.remember-check:after{content:"";width:8px;height:4px;border-left:2px solid #001d0c;border-bottom:2px solid #001d0c;transform:rotate(-45deg) translate(1px,-1px);opacity:0}
.remember-control input:checked+.remember-check{border-color:var(--green);background:var(--green);box-shadow:0 0 14px #19ff7845}
.remember-control input:checked+.remember-check:after{opacity:1}
.remember-control input:focus-visible+.remember-check{outline:2px solid #b8ffd1;outline-offset:3px}
.login-button{width:100%;height:48px;margin-top:2px;font-size:11px}
.reseller-page{background:var(--bg);min-height:100vh}
.reseller-shell{width:min(940px,calc(100% - 32px));margin:auto}
.reseller-header{height:64px;border-bottom:1px solid #123721;background:#030a06f2;position:sticky;top:0;z-index:10}
.header-content{height:100%;display:flex;align-items:center;justify-content:space-between;gap:16px}
.simple-brand{display:flex;align-items:center;gap:10px;border:0;background:transparent;color:var(--text);padding:0;text-decoration:none;font-size:13px;letter-spacing:.08em;cursor:pointer}
.header-logo{width:34px;height:34px;border-radius:50%;overflow:hidden;background:#000;position:relative;box-shadow:0 0 12px #19ff7835}
.header-logo img{position:absolute;width:52px;max-width:none;left:50%;top:50%;transform:translate(-50%,-48%)}
.header-actions{display:flex;align-items:center;gap:12px}.user-email{color:#789583;font-size:11px}
.reseller-main{padding:28px 0 60px}
.panel-view{display:none}.panel-view.active{display:block}
.home-title{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:6px 0 22px}.home-title>div>span{color:#5e816b;font-size:9px;font-weight:700;letter-spacing:.12em}.home-title h1{font-size:25px;margin-top:6px}.home-title h1 b{color:var(--green)}
.quick-stats{display:grid;grid-template-columns:2fr 1fr 1fr;gap:10px;margin-bottom:14px}
.quick-stats>div{padding:15px 17px;border:1px solid #154229;background:#06110a;border-radius:13px}
.quick-stats span{display:block;color:#668773;font-size:9px;text-transform:uppercase;letter-spacing:.08em}
.quick-stats strong{display:block;margin-top:5px;font-size:21px;color:#eafff0}
.home-actions{display:grid;gap:11px;margin-top:15px}
.home-action{width:100%;min-height:78px;display:grid;grid-template-columns:46px 1fr auto;align-items:center;gap:15px;padding:14px 17px;border:1px solid #16452a;border-radius:14px;background:#06110a;color:var(--text);text-align:left;cursor:pointer;transition:.18s}
.home-action:hover{border-color:#269451;transform:translateY(-1px);background:#08170e}.home-action.primary-action{border-color:#21864a;background:linear-gradient(110deg,#082216,#07130c)}
.home-action>.action-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:11px;background:#0c2a18;color:var(--green);font-weight:800;font-size:16px}.home-action>span:nth-child(2){display:flex;flex-direction:column;gap:4px}.home-action strong{font-size:14px}.home-action small{color:#668573;font-size:10px}.home-action>b{color:#4f8b63;font-size:18px}
.view-heading{display:flex;align-items:center;gap:18px;margin:4px 0 17px}.view-heading h1{font-size:22px}.back-button{border:1px solid #1b5030;border-radius:9px;background:#07120b;color:#8aac95;padding:9px 11px;cursor:pointer;font-size:10px}.back-button:hover{color:var(--text);border-color:#2b7c48}
.activate-card,.history-card{margin-top:0}.history-card{margin-top:14px}
.simple-section-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px}
.simple-section-head h1,.simple-section-head h2{font-size:18px}
.status-dot{display:inline-flex;align-items:center;gap:7px;color:#80d69d;font-size:10px}.status-dot:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green)}
.status-dot.off{color:#bd7d87}.status-dot.off:before{background:var(--bad);box-shadow:0 0 10px var(--bad)}
.activation-footer{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:16px;margin-top:2px}.activation-footer small{color:#64816e;font-size:10px}.activation-footer .btn{min-width:150px}
.text-button{border:0;background:transparent;color:var(--green);font-size:11px;cursor:pointer;padding:5px}.text-button:hover{text-decoration:underline}
.empty-row{text-align:center;color:#668573;padding:24px}.btn:disabled{opacity:.45;cursor:not-allowed;transform:none!important}
.balance-card{max-width:520px;margin:0}.balance-card>span{display:block;color:#668573;font-size:10px;text-transform:uppercase}.balance-card>strong{display:block;font-size:32px;margin:6px 0 15px}.balance-card p{color:#87a18f;font-size:12px;margin:0 0 18px}.balance-card .notice{margin-top:14px}
.logo-mini{width:54px;height:54px;object-fit:contain;filter:drop-shadow(0 0 18px #16ff7330)}.reseller-hero{display:flex;align-items:center;gap:18px}
.section{display:none}.section.active{display:block}
@media(max-width:950px){.grid4{grid-template-columns:repeat(2,1fr)}.layout{grid-template-columns:1fr}.sidebar{position:static;height:auto;display:flex;overflow:auto;border-right:0;border-bottom:1px solid #10341f}.nav-title{display:none}.nav-btn{min-width:max-content}.plan-grid{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.field.full{grid-column:auto}}
@media(max-width:460px){.login-page{padding:16px}.login-card{padding:30px 22px 26px;border-radius:18px}.login-logo{width:160px;height:160px;margin-bottom:25px}.login-logo img{width:247px}}
@media(max-width:650px){.user-email{display:none}.home-title{align-items:flex-start;flex-direction:column}.quick-stats{grid-template-columns:1fr 1fr}.quick-stats>div:first-child{grid-column:1/-1}.reseller-main{padding-top:18px}.activate-card,.history-card{padding:17px}.activation-footer{align-items:stretch;flex-direction:column}.activation-footer .btn{width:100%}.home-action{grid-template-columns:42px 1fr auto;padding:13px}.view-heading{align-items:flex-start;flex-direction:column;gap:12px}}
@media(max-width:600px){.grid4{grid-template-columns:1fr}.page-head{align-items:flex-start;flex-direction:column}.userbar .pill{display:none}.shell{width:min(100% - 22px,1180px)}.main{padding-top:22px}}