/* ==========================================================================
   SCALIO — CLEAN LIGHT · professional SaaS admin panel
   Soft-white canvas · white surfaces · blue primary · 7-layer role colours.
   Multi-layer: har role (Main Admin → Seller) ka apna accent colour.
   ========================================================================== */
:root{
    /* ===== Base surfaces (dark / black) ===== */
    --bg:#0a0a0d; --bg-2:#101014; --piano:#0d0d11;
    --surface:#16161b; --surface-hi:#1d1d23; --pan:#16161b; --pan2:#202027; --ink:#0a0a0d;
    --metal:#16161b;

    /* ===== Text (light on dark) ===== */
    --head:#f2f4f8; --text:#c9ced7; --text-2:#9198a4; --muted:#6d7480;
    --silver:#c9ced7; --sil-hi:#f2f4f8; --steel:#9198a4; --steel-2:#6d7480; --chrome:#c9ced7; --chrome-hi:#f2f4f8; --graphite:#2a2a32; --gunmetal:#2a2a32;

    /* ===== Hairlines / borders ===== */
    --line:#2a2a33; --line-2:#202027; --line2:#3a3a45; --edge:rgba(255,255,255,.05);

    /* ===== Primary (blue) ===== */
    --primary:#3b82f6; --primary-hi:#60a5fa; --primary-ink:#93c5fd; --primary-soft:#13233d; --primary-soft-2:#16345f;
    /* Legacy red aliases → mapped to danger red so old refs stay sane */
    --red:#dc2626; --red-hi:#ef4444; --red-2:#f87171; --red-3:#dc2626; --red-4:#b91c1c; --red-5:#991b1b;
    --brand:#2563eb; --brand-2:#3b82f6; --brand-3:#1d4ed8; --brand-soft:#eff4ff;
    --rg:rgba(37,99,235,.28); --red-glow:rgba(37,99,235,.28);

    /* ===== Semantic (dark) ===== */
    --ok:#10b981; --ok-2:#34d399; --ok-soft:#0e2b20; --ok-ink:#4ade80;
    --warn:#f59e0b; --warn-soft:#2c2310; --warn-ink:#fbbf24;
    --danger:#ef4444; --danger-soft:#2e1416; --danger-ink:#fca5a5;
    --info:#3b82f6; --info-soft:#13233d;

    /* ===== 7-LAYER ROLE COLOURS ===== */
    --role-main_admin:#7c3aed; --role-developer:#2563eb; --role-supermaster:#0891b2;
    --role-master:#059669;     --role-admin:#d97706;     --role-super:#e11d48;
    --role-seller:#64748b;

    /* Active accent (default = primary; body[data-role] / dl-group[data-role] override) */
    --accent:var(--primary); --accent-ink:var(--primary-ink); --accent-soft:var(--primary-soft);

    /* ===== Shadows / geometry ===== */
    --hair:none;
    --sh-sm:none;
    --sh-tile:none;
    --sh-float:0 4px 14px -6px rgba(15,23,42,.16);
    --drop:0 12px 30px -10px rgba(15,23,42,.22), 0 4px 10px rgba(15,23,42,.08);
    --led:0 0 0 4px var(--accent-soft);
    --r:14px; --r-sm:10px; --ease:cubic-bezier(.2,.8,.3,1);
}

/* ===== Per-role accent mapping (applies to body AND each dl-group) ===== */
[data-role="main_admin"]{ --accent:var(--role-main_admin); --accent-ink:#6d28d9; --accent-soft:#f3eeff; }
[data-role="developer"] { --accent:var(--role-developer);  --accent-ink:#1d4ed8; --accent-soft:#eff4ff; }
[data-role="supermaster"]{--accent:var(--role-supermaster);--accent-ink:#0e7490; --accent-soft:#e6f6fb; }
[data-role="master"]    { --accent:var(--role-master);     --accent-ink:#047857; --accent-soft:#ecfdf5; }
[data-role="admin"]     { --accent:var(--role-admin);      --accent-ink:#b45309; --accent-soft:#fff7ed; }
[data-role="super"]     { --accent:var(--role-super);      --accent-ink:#be123c; --accent-soft:#fff1f3; }
[data-role="seller"]    { --accent:var(--role-seller);     --accent-ink:#475569; --accent-soft:#f1f5f9; }

/* ===== Multilayer BLACK base — poora dark surface role-accent se tinted ===== */
[data-role]{
    --accent-soft: color-mix(in srgb, var(--accent) 22%, #141419);
    --accent-ink:  color-mix(in srgb, var(--accent) 55%, #ffffff);
    --bg:        color-mix(in srgb, var(--accent) 13%, #08080b);
    --bg-2:      color-mix(in srgb, var(--accent) 17%, #0d0d11);
    --piano:     color-mix(in srgb, var(--accent) 11%, #0b0b0e);
    --surface:   color-mix(in srgb, var(--accent) 9%,  #15151a);
    --surface-hi:color-mix(in srgb, var(--accent) 13%, #1d1d23);
    --pan:       color-mix(in srgb, var(--accent) 9%,  #15151a);
    --pan2:      color-mix(in srgb, var(--accent) 14%, #202027);
    --metal:     color-mix(in srgb, var(--accent) 9%,  #15151a);
    --line:      color-mix(in srgb, var(--accent) 26%, #2a2a33);
    --line2:     color-mix(in srgb, var(--accent) 34%, #383843);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
    margin:0;color:var(--text);
    font-family:"Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,"Inter","Helvetica Neue",Arial,sans-serif;
    font-size:14.5px;line-height:1.55;-webkit-font-smoothing:antialiased;min-height:100vh;position:relative;
    background:var(--bg);
}
.bg-particles,.login-particles{display:none!important}
a{text-decoration:none;color:var(--primary-ink)}
h1,h2,h3{letter-spacing:-.01em;color:var(--head);font-weight:800}
::selection{background:var(--accent);color:#fff}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#33333d;border-radius:99px;border:3px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:#44444f}

/* ===== Window title bar (slim, light) ===== */
.winbar{
    display:flex;align-items:center;justify-content:space-between;gap:16px;height:34px;padding:0 16px;position:relative;z-index:40;
    background:var(--metal);border-bottom:1px solid var(--line);box-shadow:var(--hair);
    font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-2);
}
.win-l,.win-r{display:flex;align-items:center;gap:12px}
.win-dots{display:flex;gap:8px}
.win-dots i{width:11px;height:11px;border-radius:50%;display:block;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.win-dots i:nth-child(1){background:#ff5f57}
.win-dots i:nth-child(2){background:#febc2e}
.win-dots i:nth-child(3){background:#28c840}
.win-title{font-weight:800;color:var(--head);letter-spacing:.2em}
.win-title b{color:var(--accent);font-weight:900}
.win-clock{font-family:"Cascadia Mono","Consolas",ui-monospace,monospace;letter-spacing:.12em;color:var(--head);font-weight:700}
.dot-online{width:8px;height:8px;border-radius:50%;background:var(--ok);display:inline-block;box-shadow:0 0 0 3px var(--ok-soft);animation:ping 2.4s var(--ease) infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(5,150,105,.35)}70%{box-shadow:0 0 0 7px rgba(5,150,105,0)}100%{box-shadow:0 0 0 0 rgba(5,150,105,0)}}

/* ===== Layout ===== */
.layout{display:flex;min-height:calc(100vh - 34px);position:relative;z-index:1}

/* ===== Sidebar (white, role-tinted active) ===== */
.sidebar{
    width:256px;flex-shrink:0;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;
    background:var(--surface);border-right:1px solid var(--line);box-shadow:1px 0 0 var(--edge);z-index:10;
}
.brand{
    position:relative;padding:16px 20px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line);
}
.brand::after{content:"";position:absolute;left:20px;right:20px;bottom:-1px;height:2px;border-radius:2px;background:var(--accent);opacity:.9}
.brand-logo{width:42px;height:42px;object-fit:contain;flex-shrink:0;border-radius:11px}
.brand-text{font-size:18px;font-weight:900;letter-spacing:.06em;color:var(--head)}
.me{position:relative;padding:15px 20px;border-bottom:1px solid var(--line)}
.me-name{font-weight:800;color:var(--head);font-size:14.5px}
.me-role{font-size:10px;color:var(--accent-ink);text-transform:uppercase;letter-spacing:.14em;margin-top:4px;font-weight:900}
.me-tokens{
    margin-top:9px;margin-right:5px;font-size:12px;font-weight:700;color:var(--text);
    background:var(--pan2);border:1px solid var(--line);display:inline-block;padding:4px 12px;border-radius:99px}
nav{position:relative;display:flex;flex-direction:column;padding:14px 12px 16px;flex:1;gap:3px;overflow-y:auto}
nav a{
    padding:10px 13px;color:var(--text);display:flex;align-items:center;gap:12px;font-size:13.8px;font-weight:600;
    border-radius:var(--r-sm);border:1px solid transparent;transition:.15s var(--ease);position:relative;
}
nav a:hover{background:var(--pan2);color:var(--head)}
nav a:hover .ic{color:var(--accent-ink);border-color:var(--line2);background:var(--surface-hi)}
nav a.active{
    color:var(--accent-ink);font-weight:800;background:linear-gradient(90deg,var(--accent-soft),transparent 94%);border-color:transparent;
}
nav a.active::before{content:"";position:absolute;left:0;top:7px;bottom:7px;width:3px;border-radius:9px;background:var(--accent);box-shadow:0 0 12px 1px var(--accent)}
nav a.active .ic{color:#fff;background:linear-gradient(150deg,var(--accent),color-mix(in srgb,var(--accent) 60%,#000));border-color:transparent;box-shadow:0 0 16px -4px var(--accent)}
nav a.logout{margin-top:auto;color:var(--text-2)}
nav a.logout:hover{color:var(--danger-ink);background:var(--danger-soft)}
nav a.logout:hover .ic{color:var(--danger);border-color:color-mix(in srgb, var(--danger) 38%, transparent);background:var(--surface-hi)}
.ic{width:30px;height:30px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;font-size:15px;
    border-radius:9px;background:var(--pan2);border:1px solid var(--line);color:var(--text-2);transition:.15s var(--ease)}

/* ===== Content ===== */
.content{flex:1;display:flex;flex-direction:column;min-width:0}

/* Top command bar (white, sticky) */
.topbar{
    padding:11px 26px;display:flex;justify-content:space-between;align-items:center;gap:16px;
    position:sticky;top:0;z-index:20;background:color-mix(in srgb, var(--accent) 8%, rgba(12,12,16,.82));backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);box-shadow:var(--hair)
}
.topbar h1{margin:0;font-size:19px;font-weight:800;color:var(--head);letter-spacing:-.01em}
.cmdbar{display:flex;align-items:center;gap:10px;position:relative}
.cmd-search{display:flex;align-items:center;gap:8px;background:var(--pan2);border:1px solid var(--line);border-radius:11px;
    padding:8px 14px;min-width:220px;transition:.16s var(--ease)}
.cmd-search:focus-within{border-color:var(--accent);background:#fff;box-shadow:0 0 0 3px var(--accent-soft)}
.cmd-search span{color:var(--muted);font-size:13px}
.cmd-search input{border:none;background:none;box-shadow:none;padding:0;font-size:13px;color:var(--head);width:100%;caret-color:var(--accent)}
.cmd-search input::placeholder{color:var(--muted)}
.cmd-search input:focus{outline:none;box-shadow:none;background:none}
.cmd-pill{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
    color:var(--text);background:var(--pan2);border:1px solid var(--line);padding:8px 13px;border-radius:99px;white-space:nowrap}
.cmd-pill.lic{color:var(--ok-ink);background:var(--ok-soft);border-color:color-mix(in srgb, var(--ok) 38%, transparent)}
.cmd-pill.lic i{width:7px;height:7px;border-radius:50%;background:var(--ok);display:inline-block}
.cmd-clock{font-family:"Cascadia Mono","Consolas",ui-monospace,monospace;letter-spacing:.08em;color:var(--head)}
.cmd-icon{width:40px;height:40px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;
    background:var(--surface-hi);border:1px solid var(--line2);color:var(--text);cursor:pointer;font-size:15px;position:relative;box-shadow:var(--hair),var(--sh-sm);transition:.15s var(--ease)}
.cmd-icon:hover{border-color:var(--accent);color:var(--accent-ink);box-shadow:var(--led)}
.cmd-icon .nb{position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;padding:0 4px;border-radius:99px;background:var(--danger);color:#fff;
    font-size:9.5px;font-weight:800;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px var(--surface)}
.cmd-user{display:flex;align-items:center;gap:9px;padding:5px 13px 5px 6px;border-radius:99px;background:var(--surface-hi);border:1px solid var(--line2);box-shadow:var(--hair),var(--sh-sm)}
.cmd-avatar{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:900;color:#fff;
    background:var(--accent);letter-spacing:.02em}
.cmd-uname{font-size:12.5px;font-weight:800;color:var(--head);line-height:1.1}
.cmd-urole{font-size:9.5px;font-weight:900;color:var(--accent-ink);text-transform:uppercase;letter-spacing:.1em;margin-top:2px}
.page{padding:26px 30px 52px;max-width:1280px;width:100%;animation:fadeUp .38s var(--ease)}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ===== Stat cards ===== */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:16px;margin-bottom:26px}
.card{
    position:relative;display:flex;align-items:center;gap:14px;padding:18px 20px;border-radius:14px;overflow:hidden;
    background:var(--surface);border:1px solid var(--line);
    transition:border-color .18s var(--ease),background .18s var(--ease),box-shadow .18s var(--ease);
}
.card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--accent);box-shadow:0 0 16px 0 var(--accent)}
.card::after{content:"";position:absolute;right:-42px;top:-42px;width:124px;height:124px;border-radius:50%;pointer-events:none;
    background:radial-gradient(circle,color-mix(in srgb,var(--accent) 24%,transparent),transparent 70%)}
.card:hover{border-color:var(--accent);background:var(--accent-soft);
    box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 45%,transparent),0 12px 34px -14px var(--accent)}
.card-ic{flex-shrink:0;width:46px;height:46px;border-radius:12px;display:grid;place-items:center;font-size:22px;position:relative;z-index:1;
    background:linear-gradient(150deg,color-mix(in srgb,var(--accent) 32%,#0c0c10),color-mix(in srgb,var(--accent) 12%,#0c0c10));
    border:1px solid color-mix(in srgb,var(--accent) 38%,transparent);color:color-mix(in srgb,var(--accent) 62%,#ffffff);
    box-shadow:0 0 18px -5px var(--accent),inset 0 0 12px -7px var(--accent)}
.card-body{position:relative;z-index:1;min-width:0}
.card-value{font-size:27px;font-weight:900;letter-spacing:-.02em;line-height:1.06;font-variant-numeric:tabular-nums;
    color:color-mix(in srgb,var(--accent) 82%,#ffffff);text-shadow:0 0 24px color-mix(in srgb,var(--accent) 38%,transparent)}
.card-label{color:var(--text-2);font-size:10px;margin-top:5px;font-weight:800;text-transform:uppercase;letter-spacing:.1em}
.card-sub{color:var(--muted);font-size:11.5px;margin-top:6px;font-weight:600}

/* ===== Panels ===== */
.panel{
    position:relative;padding:22px 24px;margin-bottom:20px;border-radius:var(--r);overflow:hidden;
    background:var(--metal);border:1px solid var(--line);box-shadow:var(--hair),var(--sh-tile);
}
.panel h2{margin:0 0 16px;font-size:15.5px;font-weight:800;color:var(--head);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.panel h2::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px 1px var(--accent);flex-shrink:0}
.panel > p:first-of-type{margin-top:-6px}
.panel ul{margin:0;padding-left:20px}

/* ===== Forms ===== */
label{display:block;font-size:12px;color:var(--text);margin:14px 0 6px;font-weight:700;letter-spacing:.02em}
input,select{
    width:100%;padding:11px 14px;border:1px solid var(--line2);border-radius:var(--r-sm);font-size:14px;color:var(--head);font-family:inherit;
    background:var(--surface-hi);box-shadow:inset 0 1px 2px rgba(15,23,42,.05);transition:.15s var(--ease);caret-color:var(--accent);
}
input::placeholder{color:var(--muted)}
input:hover,select:hover{border-color:#adb8c6}
input:focus,select:focus{outline:none;border-color:var(--accent);box-shadow:inset 0 1px 2px rgba(15,23,42,.04),0 0 0 3px var(--accent-soft)}
/* Chrome autofill → dark theme match (warna input white ho jata hai) */
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{
    -webkit-text-fill-color:var(--head)!important;
    -webkit-box-shadow:0 0 0 1000px var(--surface-hi) inset!important;
    caret-color:var(--head);
    transition:background-color 99999s ease-in-out 0s;
}
input[type=checkbox]{width:auto;accent-color:var(--accent)}
select option{background:#1d1d23;color:var(--head)}

/* ===== Buttons ===== */
.btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;position:relative;overflow:hidden;
    padding:11px 20px;border-radius:var(--r-sm);font-size:13.8px;font-weight:700;margin-top:16px;font-family:inherit;line-height:1.3;color:#fff;letter-spacing:.01em;
    background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 62%,#000));border:1px solid transparent;
    box-shadow:0 6px 22px -8px var(--accent),inset 0 1px 0 color-mix(in srgb,#fff 22%,transparent);
    transition:filter .14s var(--ease),box-shadow .14s var(--ease),transform .12s var(--ease);
}
.btn:hover{filter:brightness(1.08);box-shadow:0 10px 30px -8px var(--accent),inset 0 1px 0 color-mix(in srgb,#fff 26%,transparent)}
.btn:active{transform:translateY(0);filter:brightness(.98)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn-sm{padding:6px 13px;font-size:12.5px;margin:2px 1px;border-radius:8px}
/* Danger = red fill */
.btn-danger{color:#fff;background:var(--danger);border-color:transparent}
.btn-danger:hover{filter:brightness(1.05)}
/* Ghost = white outline */
.btn-ghost{background:var(--surface-hi);border:1px solid var(--line2);color:var(--text)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent-ink);filter:none}
/* Success button */
.btn-ok{background:var(--ok);padding-left:32px}
.btn-ok::after{content:"";position:absolute;left:14px;top:50%;transform:translateY(-50%);width:8px;height:8px;border-radius:50%;background:#fff;opacity:.9}
.btn-warn{background:var(--warn)}

/* ===== Downline (grouped accordion, role-coloured) ===== */
.dl-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin:0 0 16px;font-size:13px}
.dl-crumb{color:var(--text);font-weight:700;padding:5px 12px;border-radius:99px;background:var(--surface-hi);border:1px solid var(--line2);box-shadow:var(--hair),var(--sh-sm)}
.dl-crumb:hover{border-color:var(--accent);color:var(--accent-ink)}
.dl-crumb-here{font-weight:900;color:#fff;padding:5px 12px;border-radius:99px;background:var(--accent);border:1px solid transparent}
.dl-crumb-here .muted{color:rgba(255,255,255,.8)!important}
.dl-sep{color:var(--muted);font-weight:900}
.dl-group{position:relative;border:1px solid var(--line);border-radius:var(--r);margin:0 0 13px;overflow:hidden;background:var(--surface);box-shadow:var(--sh-tile)}
.dl-group::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--accent)}
.dl-group>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:15px 18px 15px 22px;position:relative;transition:.15s var(--ease)}
.dl-group>summary::-webkit-details-marker{display:none}
.dl-group>summary:hover{background:var(--accent-soft)}
.dl-group[open]>summary{border-bottom:1px solid var(--line)}
.dl-role{font-size:15px;font-weight:900;color:var(--accent-ink);letter-spacing:.02em;text-transform:uppercase;min-width:124px}
.dl-meta{display:flex;flex-wrap:wrap;gap:7px;flex:1}
.dl-pill{font-size:11.5px;font-weight:800;padding:4px 12px;border-radius:99px;border:1px solid var(--line2);background:var(--pan2);color:var(--text)}
.dl-pill.dl-count{background:var(--accent-soft);border-color:transparent;color:var(--accent-ink)}
.dl-pill.dl-due{background:var(--warn-soft);border-color:color-mix(in srgb, var(--warn) 38%, transparent);color:var(--warn-ink)}
.dl-pill.dl-over{background:var(--danger-soft);border-color:color-mix(in srgb, var(--danger) 38%, transparent);color:var(--danger-ink)}
.dl-arrow{font-size:14px;color:var(--text-2);transition:transform .2s var(--ease)}
.dl-group[open]>summary .dl-arrow{transform:rotate(180deg)}
.dl-body{padding:2px 8px 10px;overflow-x:auto}
.dl-body table{margin:0}
.dl-user{color:var(--head);font-weight:700;text-decoration:none;border-bottom:1.5px dotted var(--accent)}
.dl-user:hover{color:var(--accent-ink)}
.dl-keys{display:inline-block;margin-left:6px;font-size:11px;font-weight:800;padding:1px 9px;border-radius:99px;background:var(--pan2);border:1px solid var(--line2);color:var(--text)}
.form-narrow{max-width:440px}
.inline-form{display:inline}

/* ===== Tables ===== */
table{width:100%;border-collapse:separate;border-spacing:0;font-size:13.6px;color:var(--text)}
th,td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle}
th{
    background:var(--pan2);color:var(--text-2);font-size:10px;font-weight:900;
    text-transform:uppercase;letter-spacing:.09em;border-bottom:1px solid var(--line);
    position:sticky;top:0;z-index:1;white-space:nowrap;
}
th:first-child{border-top-left-radius:11px}
th:last-child{border-top-right-radius:11px}
td{color:var(--text)}
tbody tr{transition:background .13s var(--ease)}
tbody tr:hover td{background:var(--accent-soft);box-shadow:inset 3px 0 0 var(--accent)}
tbody tr:last-child td{border-bottom:none}
tfoot td{background:var(--pan2);font-weight:800;color:var(--head)}
.mono{font-family:"Cascadia Mono","Consolas",ui-monospace,monospace;font-size:13px;letter-spacing:.2px;color:var(--head)}

/* ===== Badges ===== */
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:99px;font-size:11px;font-weight:800;letter-spacing:.02em;white-space:nowrap;border:1px solid transparent}
.badge-active,.badge-paid{background:var(--ok-soft);color:var(--ok-ink);border-color:color-mix(in srgb, var(--ok) 38%, transparent)}
.badge-active::before,.badge-paid::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ok)}
.badge-blocked,.badge-unpaid{background:var(--danger-soft);color:var(--danger-ink);border-color:color-mix(in srgb, var(--danger) 38%, transparent)}
.badge-muted{background:var(--pan2);color:var(--text-2);border-color:var(--line2)}
.badge-gift{background:var(--primary-soft);color:var(--primary-ink);border-color:color-mix(in srgb, var(--info) 38%, transparent)}

/* ===== Flash ===== */
.flash{
    padding:13px 16px;border-radius:var(--r-sm);margin-bottom:14px;font-size:13.6px;font-weight:600;display:flex;gap:9px;align-items:flex-start;position:relative;overflow:hidden;
    background:var(--surface);border:1px solid var(--line2);box-shadow:var(--hair),var(--sh-sm);color:var(--text);
}
.flash::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px}
.flash-success{background:var(--ok-soft);border-color:color-mix(in srgb, var(--ok) 38%, transparent);color:var(--ok-ink)}
.flash-success::before{background:var(--ok)}
.flash-error{background:var(--danger-soft);border-color:color-mix(in srgb, var(--danger) 38%, transparent);color:var(--danger-ink)}
.flash-error::before{background:var(--danger)}
.flash-info{background:var(--info-soft);border-color:color-mix(in srgb, var(--info) 38%, transparent);color:var(--primary-ink)}
.flash-info::before{background:var(--info)}

/* ===== Offer banner (multi-layer gradient hero) ===== */
.offer-banner{
    position:relative;overflow:hidden;background:linear-gradient(135deg,#2563eb 0%,#7c3aed 100%);color:#fff;padding:14px 22px;border-radius:var(--r);margin-bottom:22px;
    font-weight:800;font-size:14px;text-align:center;letter-spacing:.01em;box-shadow:var(--sh-tile);
}
.offer-banner::after{content:"";position:absolute;top:-30%;left:-60%;width:40%;height:160%;transform:skewX(-20deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);animation:sweep 5.5s ease-in-out infinite}
@keyframes sweep{0%{left:-60%}55%{left:135%}100%{left:135%}}

/* ===== Due warning (alarm) ===== */
.due-warning{
    position:relative;overflow:hidden;background:var(--danger-soft);border:1px solid color-mix(in srgb, var(--danger) 38%, transparent);border-left:4px solid var(--danger);
    color:var(--text);padding:14px 18px;border-radius:var(--r-sm);margin-bottom:18px;font-size:13.8px;font-weight:600;line-height:1.6;box-shadow:var(--sh-sm);
}
.due-warning b{color:var(--danger-ink)}
.due-countdown{display:inline-block;font-family:"Cascadia Mono","Consolas",ui-monospace,monospace;font-weight:900;font-size:15px;letter-spacing:1px;color:#fff;
    background:var(--danger);padding:2px 10px;border-radius:8px;margin-left:2px;vertical-align:middle}
.due-countdown.cd-over{background:var(--danger-ink);font-size:13px}

/* ===== Search / Pager ===== */
.searchbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.searchbar .btn-sm{margin:0}
.search-input{max-width:340px;padding:9px 14px}
.pager{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:16px}
.pager .btn-sm{margin:0}
.pg-num:hover{border-color:var(--accent)!important;color:var(--accent-ink)!important}
.pg-dots{color:var(--muted);padding:0 4px;font-weight:800}
.pg-info{margin-left:auto;color:var(--text-2);font-size:12.5px;font-weight:700}
@media(max-width:600px){.pg-info{width:100%;margin:4px 0 0}}

/* ===== Misc ===== */
.muted{color:var(--muted)}
.empty{padding:44px 20px;text-align:center;color:var(--muted);font-size:14px;background:var(--pan2);border:1.5px dashed var(--line2);border-radius:var(--r)}

/* ===== Login ===== */
.login-wrap{
    min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;position:relative;overflow:hidden;
    background:
        radial-gradient(1000px 700px at 50% -12%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 58%),
        radial-gradient(720px 520px at 84% 96%, color-mix(in srgb, var(--role-main_admin) 16%, transparent), transparent 60%),
        var(--bg);
}
.login-wrap::before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;filter:blur(120px);opacity:.5;background:#cfe0ff;top:-220px;right:-150px;animation:float 12s ease-in-out infinite}
.login-wrap::after{content:"";position:absolute;width:440px;height:440px;border-radius:50%;filter:blur(120px);opacity:.5;background:#e6dcff;bottom:-190px;left:-140px;animation:float 12s ease-in-out infinite;animation-delay:-6s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(26px)}}
.login-box{
    position:relative;z-index:1;width:100%;max-width:406px;padding:40px 34px 32px;border-radius:20px;text-align:center;overflow:hidden;
    background:var(--metal);border:1px solid var(--line);box-shadow:var(--hair),var(--sh-float);animation:rise .5s var(--ease);
}
.login-box::after{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#8b5cf6,#c026d3)}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.login-logo{width:78px;height:78px;object-fit:contain;margin:0 auto 14px;display:block;filter:drop-shadow(0 10px 22px rgba(124,58,237,.4))}
.login-box h1{margin:0 0 6px;font-size:27px;font-weight:900;letter-spacing:.06em;color:var(--head)}
.login-box p{margin:0 0 22px;color:var(--text-2);font-size:11px;text-transform:uppercase;letter-spacing:.18em;font-weight:700}
.login-box label{text-align:left}
.login-box .btn{width:100%;margin-top:22px;padding:14px;font-size:15px;letter-spacing:.03em}

/* ===== Responsive ===== */
@media(max-width:1080px){.cmd-search{min-width:150px}.cmd-pill.lic{display:none}}
@media(max-width:1000px){.page{padding:20px}.topbar{padding:10px 18px}.cmd-search,.cmd-clock{display:none}}
@media(max-width:760px){
    .sidebar{width:66px}
    .brand{padding:16px 0;justify-content:center}
    .brand::after{display:none}
    .brand-text,.me-name,.me-role,.me-tokens{display:none}
    .me{padding:12px 6px;text-align:center}
    nav{padding:10px 8px}
    nav a{justify-content:center;padding:10px 0}
    nav a span:not(.ic){display:none}
    nav a.active::before{display:none}
    .topbar h1{font-size:16px}.cmd-user .cmd-uname,.cmd-user .cmd-urole{display:none}
    .cmd-pill:not(.lic){display:none}.win-title{display:none}
    .cards{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
    .card-value{font-size:26px}.panel{padding:18px 16px}
    table{font-size:13px}th,td{padding:10px 9px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}