:root {
  color-scheme: dark;
  --bg:#050915;
  --panel:#0d1426;
  --panel2:#111b31;
  --line:#24324f;
  --text:#f4f7ff;
  --muted:#91a0bc;
  --blue:#308cff;
  --cyan:#24c8ff;
  --green:#44d59a;
  --red:#ff667a;
  --amber:#f8bd56;
  --purple:#7a5cff;
  --shadow:0 18px 45px rgba(0,0,0,.28);
}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(circle at 80% 0,#132142 0,transparent 35%),var(--bg);color:var(--text);font-family:Inter,Segoe UI,Arial,sans-serif}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:24px}
.login-card{width:min(430px,100%);background:linear-gradient(145deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:24px;padding:30px;box-shadow:var(--shadow)}
.brand{display:flex;align-items:center;gap:12px}
.brand-mark{width:44px;height:44px;border-radius:14px;background:linear-gradient(135deg,var(--cyan),var(--blue),#8c43ff);display:grid;place-items:center;font-weight:900;box-shadow:0 8px 26px rgba(48,140,255,.3)}
.brand h1{font-size:22px;margin:0}.brand small{color:var(--muted)}
.shell{min-height:100vh;display:grid;grid-template-columns:270px 1fr}
.sidebar{border-right:1px solid var(--line);background:rgba(7,12,25,.94);padding:22px 14px;position:sticky;top:0;height:100vh;backdrop-filter:blur(18px)}
.sidebar .brand{padding:0 8px 22px}
.nav{display:grid;gap:6px}
.nav button{border:0;background:transparent;color:var(--muted);text-align:left;padding:13px 14px;border-radius:13px;display:flex;align-items:center;gap:12px;font-weight:650}
.nav button:hover,.nav button.active{background:linear-gradient(135deg,#16223d,#172a4c);color:#fff;box-shadow:inset 0 0 0 1px rgba(68,129,220,.18)}
.nav-icon{width:28px;height:28px;display:grid;place-items:center;border-radius:9px;background:#111d34;color:#74c9ff;font-size:17px;font-weight:900}
.nav button.active .nav-icon{background:linear-gradient(135deg,var(--blue),var(--purple));color:#fff}
.sidebar-footer{position:absolute;bottom:18px;left:14px;right:14px}
.content{padding:28px;min-width:0;max-width:1700px;width:100%;margin:0 auto}
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:26px;gap:16px}
.topbar h1{margin:0;font-size:30px}.topbar p{margin:4px 0 0;color:var(--muted)}
.page{display:none}.page.active{display:block}
.kicker{color:var(--cyan);font-size:12px;text-transform:uppercase;letter-spacing:.13em;font-weight:850}
.dashboard-grid{display:grid;grid-template-columns:repeat(5,minmax(170px,1fr));gap:16px;margin-bottom:22px}
.dashboard-card{position:relative;text-align:left;min-height:154px;border:1px solid var(--line);border-radius:20px;padding:20px;background:linear-gradient(145deg,rgba(19,31,57,.98),rgba(9,15,29,.98));color:var(--text);box-shadow:var(--shadow);overflow:hidden;transition:.18s transform,.18s border-color,.18s box-shadow}
.dashboard-card::after{content:"";position:absolute;right:-45px;bottom:-55px;width:145px;height:145px;border-radius:50%;background:radial-gradient(circle,rgba(47,140,255,.2),transparent 68%)}
.dashboard-card:hover{transform:translateY(-3px);border-color:#3f6eb2;box-shadow:0 22px 48px rgba(0,0,0,.36)}
.dashboard-card .metric-icon{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-size:23px;background:linear-gradient(135deg,#173967,#22316f);margin-bottom:16px}
.dashboard-card .metric-value{font-size:32px;font-weight:900;line-height:1}.dashboard-card .metric-label{font-size:14px;font-weight:750;margin-top:8px}.dashboard-card .metric-hint{font-size:12px;color:var(--muted);margin-top:6px}
.dashboard-card.green .metric-icon{background:linear-gradient(135deg,#16493d,#176b54)}
.dashboard-card.amber .metric-icon{background:linear-gradient(135deg,#553918,#7c521c)}
.dashboard-card.purple .metric-icon{background:linear-gradient(135deg,#382261,#6540a5)}
.dashboard-card.red .metric-icon{background:linear-gradient(135deg,#501d2a,#7f2c42)}
.dashboard-bottom{align-items:start}
.card,.stat{background:linear-gradient(145deg,rgba(18,28,50,.96),rgba(10,16,31,.96));border:1px solid var(--line);border-radius:19px;box-shadow:var(--shadow)}
.card{padding:21px;margin-bottom:18px}.card h2,.card h3{margin:0 0 15px}.card-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}.card-heading h2{margin-bottom:3px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:18px}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.form-grid .full{grid-column:1/-1}
input,select,textarea{width:100%;background:#080e1c;border:1px solid var(--line);color:#fff;border-radius:11px;padding:11px 12px;outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(48,140,255,.13)}
textarea{min-height:110px;resize:vertical}label{display:grid;gap:6px;color:var(--muted);font-size:13px}
.actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:14px}
button.primary,button.secondary,button.danger,button.ghost,a.primary,a.secondary,a.danger,a.ghost{border:1px solid transparent;border-radius:11px;padding:10px 14px;font-weight:750}
button.primary,a.primary{background:linear-gradient(135deg,var(--blue),#6a55ff);color:#fff;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}button.primary:hover,a.primary:hover{filter:brightness(1.08)}
button.secondary,a.secondary{background:#182540;border-color:#2d4168;color:#fff}button.danger{background:#3a1721;border-color:#6a2737;color:#ffb3bd}button.ghost{background:transparent;border-color:var(--line);color:var(--muted)}
button:disabled{opacity:.45;cursor:not-allowed}.wide{width:100%}
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:14px}table{border-collapse:collapse;width:100%;min-width:760px}th,td{text-align:left;padding:12px 13px;border-bottom:1px solid #1d2942;font-size:14px}th{color:#a9b7cf;background:#101a2e;position:sticky;top:0}td{color:#e9eef9}tbody tr:hover{background:rgba(55,99,164,.08)}
.badge{display:inline-flex;padding:4px 8px;border-radius:999px;font-size:11px;font-weight:850;background:#1b2945;color:#b8c9e8}.badge.TRIAL{background:#193756;color:#65c6ff}.badge.ACTIVE{background:#143b31;color:#69e2b0}.badge.PAID{background:#143b31;color:#69e2b0}.badge.COMPLIMENTARY{background:#302552;color:#c8adff}.badge.EXPIRED,.badge.PENDING_PAYMENT{background:#4a2e16;color:#ffd28b}.badge.PENDING_ACTIVATION{background:#2a2e3d;color:#d3d9e8}.badge.SUSPENDED{background:#411c27;color:#ff9eac}
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}.toolbar input{max-width:350px}.toolbar select{max-width:230px}.muted{color:var(--muted)}.small{font-size:12px}.empty{padding:26px;text-align:center;color:var(--muted)}
.toast{position:fixed;right:24px;bottom:24px;max-width:420px;background:#17243d;border:1px solid #37517d;border-radius:13px;padding:13px 16px;box-shadow:var(--shadow);z-index:30}.toast.error{background:#381923;border-color:#7b3043}
.details{background:#09101f;border:1px solid var(--line);border-radius:15px;padding:18px;margin-top:15px}.details h3{font-size:24px}.detail-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin:14px 0}.detail-cell{background:#0d172a;border:1px solid #22324f;border-radius:12px;padding:12px}.detail-cell span{display:block;color:var(--muted);font-size:11px;margin-bottom:5px}.detail-cell strong{font-size:14px}
.preview{max-width:240px;max-height:150px;border-radius:12px;border:1px solid var(--line);object-fit:cover}.split{display:grid;grid-template-columns:1.25fr .75fr;gap:18px}.hidden{display:none!important}.inline-check{width:auto}
@media(max-width:1350px){.dashboard-grid{grid-template-columns:repeat(3,minmax(170px,1fr))}}
@media(max-width:900px){.shell{grid-template-columns:1fr}.sidebar{height:auto;position:relative;border-right:0;border-bottom:1px solid var(--line)}.nav{grid-template-columns:repeat(3,1fr)}.sidebar-footer{position:static;margin-top:12px}.content{padding:18px}.split{grid-template-columns:1fr}.dashboard-grid{grid-template-columns:repeat(2,minmax(145px,1fr))}}
@media(max-width:620px){.form-grid{grid-template-columns:1fr}.nav{grid-template-columns:repeat(2,1fr)}.topbar{align-items:flex-start;flex-direction:column}.topbar h1{font-size:24px}.dashboard-grid{grid-template-columns:1fr}.dashboard-card{min-height:130px}}

a.secondary,a.ghost{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}