:root{
  --bg:#f1f4f9;--surface:#ffffff;--surface-2:#f3f5fa;--text:#1a2138;--muted:#677088;--border:#e4e8f1;
  --primary:#5b5bea;--primary-600:#4a49d6;--primary-soft:#eceeff;
  --accent:linear-gradient(135deg,#f97316 0%,#ec4899 100%);
  --success:#0f9d58;--success-soft:#e4f6ec;--danger:#e11d48;--danger-soft:#ffe9ee;--warning:#c77700;--warning-soft:#fff2d9;
  --radius:16px;
  --shadow:0 1px 2px rgba(20,24,60,.05),0 10px 28px -12px rgba(20,24,60,.14);
  --font:Inter,system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans Bengali","Kalpurush",sans-serif;
}
[data-theme="dark"]{
  --bg:#0b1020;--surface:#151a30;--surface-2:#1c2240;--text:#e8ebf7;--muted:#8f98b8;--border:#273052;
  --primary:#8b8bff;--primary-600:#a5a5ff;--primary-soft:#23274d;
  --success-soft:#10301f;--danger-soft:#3a1722;--warning-soft:#3a2a0f;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 28px -12px rgba(0,0,0,.55);
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--font);background:var(--bg);color:var(--text);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{margin:0;line-height:1.25}
.muted{color:var(--muted)}
.i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ---------- Layout ---------- */
.app{display:flex;min-height:100vh}
.sidebar{width:256px;background:linear-gradient(180deg,#1b1a4b 0%,#2c1f74 48%,#4a1d96 100%);color:#fff;position:fixed;top:0;bottom:0;left:0;display:flex;flex-direction:column;z-index:40;transition:transform .25s ease}
.brand{display:flex;align-items:center;gap:12px;padding:22px 20px 16px;color:#fff}
.brand-mark{width:42px;height:42px;border-radius:13px;background:linear-gradient(135deg,#6366f1,#8b5cf6);display:grid;place-items:center;font-weight:800;color:#fff;font-size:19px;flex:none;overflow:hidden;box-shadow:0 8px 18px -6px rgba(99,102,241,.7)}
.brand-mark img{width:100%;height:100%;object-fit:cover;display:block}
.brand strong{display:block;font-size:17px;line-height:1.2;font-weight:800}
.brand small{display:block;color:rgba(255,255,255,.6);font-size:12px;margin-top:2px}

.nav{padding:6px 14px 18px;flex:1;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.25) transparent}
.nav-title{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55);padding:16px 8px 8px}
.nav a{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:14px;color:rgba(255,255,255,.9);font-weight:500;margin-bottom:6px;transition:background .15s ease}
.nav a:hover{background:rgba(255,255,255,.1);color:#fff;text-decoration:none}
.nav a.active{background:var(--accent);color:#fff;font-weight:600;box-shadow:0 10px 22px -8px rgba(236,72,153,.65)}
.nav-ico{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;color:#fff;flex:none;box-shadow:0 6px 14px -6px rgba(0,0,0,.45)}
.nav-ico .i{width:19px;height:19px}
.c-indigo{background:linear-gradient(135deg,#6366f1,#4f46e5)}
.c-green{background:linear-gradient(135deg,#22c55e,#16a34a)}
.c-sky{background:linear-gradient(135deg,#38bdf8,#0284c7)}
.c-purple{background:linear-gradient(135deg,#a78bfa,#7c3aed)}
.c-orange{background:linear-gradient(135deg,#fbbf24,#f97316)}
.c-teal{background:linear-gradient(135deg,#2dd4bf,#0d9488)}
.c-red{background:linear-gradient(135deg,#fb7185,#e11d48)}
.c-cyan{background:linear-gradient(135deg,#22d3ee,#0891b2)}
.c-pink{background:linear-gradient(135deg,#f472b6,#db2777)}

.main{margin-left:256px;flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{height:68px;display:flex;align-items:center;gap:14px;padding:0 28px;background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:20}
.topbar h1{font-size:20px;font-weight:800;flex:1}
.icon-btn{width:40px;height:40px;border-radius:11px;border:1px solid var(--border);background:var(--surface);color:var(--text);display:grid;place-items:center;cursor:pointer}
.icon-btn:hover{background:var(--surface-2)}
#menuBtn{display:none}
.top-user{display:flex;align-items:center;gap:10px}
.top-avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#6366f1,#ec4899);color:#fff;display:grid;place-items:center;font-weight:800;flex:none}
.top-meta{line-height:1.2}
.top-meta strong{display:block;font-size:15px;font-weight:600}
.top-meta small{display:block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--primary)}
.top-logout{margin:0 0 0 4px}
.content{padding:26px 28px;max-width:1400px;width:100%}
.overlay{display:none;position:fixed;inset:0;background:rgba(10,14,40,.6);z-index:30}

/* ---------- Stat cards ---------- */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px;margin-bottom:26px}
.stat-card{position:relative;display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:114px;padding:20px 22px;border-radius:18px;color:#fff;overflow:hidden;box-shadow:0 14px 26px -14px rgba(30,30,90,.55)}
.stat-card::after{content:"";position:absolute;right:-34px;top:-34px;width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.09)}
.stat-label{display:block;font-size:13px;opacity:.92;margin-bottom:6px}
.stat-value{display:block;font-size:30px;font-weight:800;line-height:1.1}
.stat-value.sm{font-size:22px}
.stat-sub{display:block;font-size:12px;opacity:.88;margin-top:7px}
.stat-ico{width:52px;height:52px;border-radius:15px;background:rgba(255,255,255,.22);display:grid;place-items:center;flex:none;position:relative;z-index:1}
.stat-ico .i{width:25px;height:25px}
.g-indigo{background:linear-gradient(135deg,#4f46e5,#6d6df5)}
.g-green{background:linear-gradient(135deg,#059669,#10b981)}
.g-amber{background:linear-gradient(135deg,#d97706,#f59e0b)}
.g-red{background:linear-gradient(135deg,#e11d48,#f43f5e)}
.g-cyan{background:linear-gradient(135deg,#0891b2,#06b6d4)}
.g-purple{background:linear-gradient(135deg,#7c3aed,#a855f7)}
.g-orange{background:linear-gradient(135deg,#ea580c,#fb923c)}
.g-teal{background:linear-gradient(135deg,#0f766e,#14b8a6)}

/* ---------- Cards ---------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:22px}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px;border-bottom:1px solid var(--border);flex-wrap:wrap}
.card-head h2{font-size:16px;font-weight:700}
.card-body{padding:22px}

/* ---------- Buttons (text + coloured icon) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 18px;border-radius:11px;border:1px solid transparent;font:inherit;font-weight:600;line-height:1.2;cursor:pointer;background:var(--surface-2);color:var(--text);text-decoration:none;transition:filter .15s ease,transform .05s ease}
.btn:hover{text-decoration:none;filter:brightness(1.07)}
.btn:active{transform:translateY(1px)}
.btn .i{width:17px;height:17px}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 10px 20px -10px rgba(236,72,153,.75)}
.btn-success{background:linear-gradient(135deg,#10b981,#059669);color:#fff;box-shadow:0 10px 20px -10px rgba(5,150,105,.75)}
.btn-info{background:linear-gradient(135deg,#0ea5e9,#2563eb);color:#fff;box-shadow:0 10px 20px -10px rgba(37,99,235,.7)}
.btn-warning{background:linear-gradient(135deg,#f59e0b,#ea580c);color:#fff;box-shadow:0 10px 20px -10px rgba(234,88,12,.7)}
.btn-danger{background:linear-gradient(135deg,#f43f5e,#e11d48);color:#fff;box-shadow:0 10px 20px -10px rgba(225,29,72,.7)}
.btn-ghost{background:var(--surface);border-color:var(--border);color:var(--text)}
.btn-ghost .i{color:var(--primary)}
.btn-sm{padding:7px 12px;font-size:13px;border-radius:9px;gap:6px}
.btn-sm .i{width:15px;height:15px}
.btn-block{width:100%}

/* ---------- Tables ---------- */
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);padding:12px 22px;background:var(--surface-2);white-space:nowrap}
td{padding:14px 22px;border-top:1px solid var(--border);vertical-align:middle}
tr:hover td{background:color-mix(in srgb,var(--surface-2) 55%,transparent)}
td .sub{display:block;color:var(--muted);font-size:13px}
.actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.actions form{margin:0}
.empty{padding:40px;text-align:center;color:var(--muted)}
.pager{display:flex;justify-content:space-between;align-items:center;padding:14px 22px;border-top:1px solid var(--border)}

/* ---------- Badges, alerts ---------- */
.badge{display:inline-block;padding:3px 11px;border-radius:999px;font-size:12px;font-weight:700}
.badge-active{background:var(--success-soft);color:var(--success)}
.badge-suspended{background:var(--danger-soft);color:var(--danger)}
.badge-expired{background:var(--warning-soft);color:var(--warning)}
.badge-plan{background:var(--primary-soft);color:var(--primary-600)}
.badge-off{background:var(--surface-2);color:var(--muted)}
.alert{padding:13px 16px;border-radius:12px;margin-bottom:18px;font-weight:500}
.alert-success{background:var(--success-soft);color:var(--success)}
.alert-danger{background:var(--danger-soft);color:var(--danger)}
.alert ul{margin:0;padding-left:18px}

/* ---------- Forms ---------- */
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.field{margin-bottom:16px}
.form-grid .field{margin-bottom:0}
.field.full{grid-column:1 / -1}
.field label{display:block;font-weight:600;margin-bottom:6px;font-size:14px}
.input{width:100%;padding:11px 14px;border:1px solid var(--border);border-radius:11px;background:var(--surface);color:var(--text);font:inherit}
.input:focus{outline:2px solid color-mix(in srgb,var(--primary) 40%,transparent);border-color:var(--primary)}
textarea.input{min-height:92px;resize:vertical}
.input-group{display:flex}
.input-group .input{border-top-right-radius:0;border-bottom-right-radius:0}
.input-suffix{display:flex;align-items:center;padding:0 14px;background:var(--surface-2);border:1px solid var(--border);border-left:0;border-radius:0 11px 11px 0;color:var(--muted);white-space:nowrap;font-size:14px}
.input-prefix{display:flex;align-items:center;padding:0 14px;background:var(--surface-2);border:1px solid var(--border);border-right:0;border-radius:11px 0 0 11px;color:var(--muted);white-space:nowrap;font-size:14px}
.input-group.has-prefix .input{border-radius:0 11px 11px 0}
.hint{display:block;color:var(--muted);font-size:13px;margin-top:5px}
.check{display:flex;align-items:center;gap:8px;margin:6px 0 18px;color:var(--muted)}
.checks{display:flex;gap:24px;flex-wrap:wrap;margin:4px 0}
.checks .check{margin:0;color:var(--text)}
.form-actions{margin-top:22px;display:flex;gap:10px;flex-wrap:wrap}
.search{display:flex;gap:8px;flex-wrap:wrap}
.search .input{min-width:200px;width:auto}
.kv{display:grid;grid-template-columns:150px 1fr;gap:10px 16px;margin:0}
.kv dt{color:var(--muted)}
.kv dd{margin:0;font-weight:600;word-break:break-word}
.grid-2{display:grid;grid-template-columns:2fr 1fr;gap:22px;align-items:start}
.danger-zone{border-color:color-mix(in srgb,var(--danger) 40%,var(--border))}

/* ---------- Permission matrix ---------- */
.perm-groups{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;margin-top:6px}
.perm-group{border:1px solid var(--border);border-radius:14px;padding:16px;background:var(--surface-2)}
.perm-group h3{font-size:14px;margin-bottom:8px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.perm-item{display:flex;gap:10px;align-items:flex-start;padding:7px 0;color:var(--text);cursor:pointer}
.perm-item input{margin-top:4px}
.perm-item small{display:block;color:var(--muted);font-size:12px}

/* ---------- Images ---------- */
.row-flex{display:flex;align-items:center;gap:12px}
.thumb{width:46px;height:46px;border-radius:12px;object-fit:cover;background:var(--surface-2);display:block;flex:none}
.thumb-ph{display:grid;place-items:center;color:var(--muted);font-weight:700}
.img-preview{display:block;max-height:150px;max-width:100%;border-radius:12px;margin-top:10px;border:1px solid var(--border);object-fit:cover}

/* ---------- Auth ---------- */
.auth{min-height:100vh;display:grid;grid-template-columns:1.1fr 1fr}
.auth-hero{background:linear-gradient(150deg,#1b1a4b 0%,#3a2a8e 55%,#b0389d 135%);color:#fff;padding:48px;display:flex;flex-direction:column;justify-content:space-between}
.auth-hero h1{font-size:38px;max-width:440px;margin-bottom:14px}
.auth-hero p{color:#cfd3f1;max-width:420px;margin:0}
.auth-hero .brand{padding:0}
.auth-form{display:grid;place-items:center;padding:32px;background:var(--bg)}
.auth-card{width:100%;max-width:400px;background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:32px;box-shadow:var(--shadow)}
.auth-card h2{font-size:24px;margin-bottom:4px}
.auth-card .muted{margin:0 0 22px}
.center-page{min-height:100vh;display:grid;place-items:center;padding:24px;text-align:center}
.center-page .auth-card{max-width:460px}

/* ---------- Responsive ---------- */
@media (max-width:960px){
  .sidebar{transform:translateX(-100%)}
  .sidebar.open{transform:none}
  .overlay.show{display:block}
  .main{margin-left:0}
  #menuBtn{display:grid}
  .topbar{padding:0 14px}
  .content{padding:18px 14px}
  .grid-2,.form-grid{grid-template-columns:1fr}
  .auth{grid-template-columns:1fr}
  .auth-hero{display:none}
  .kv{grid-template-columns:120px 1fr}
  th,td{padding-left:14px;padding-right:14px}
}
@media (max-width:640px){
  .top-meta{display:none}
  .stat-grid{grid-template-columns:1fr 1fr;gap:12px}
  .stat-card{padding:16px;min-height:100px}
  .stat-value{font-size:24px}
  .stat-ico{width:42px;height:42px;border-radius:12px}
  .stat-ico .i{width:20px;height:20px}
}