/* AiBD CMS — Midnight Indigo theme (v1.0.0) */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }

:root {
  --bg:        #0a0a1a;
  --bg-2:      #141432;
  --bg-3:      #1b1b46;
  --border:    #1e1e5a;
  --border-2:  #2a2a6e;
  --primary:   #4f46e5;
  --primary-2: #6366f1;
  --primary-glow: rgba(79,70,229,0.45);
  --accent:    #818cf8;
  --success:   #4ade80;
  --warning:   #f59e0b;
  --danger:    #ef4444;
  --text:      #cbd5e1;
  --text-dim:  #94a3b8;
  --text-mute: #64748b;
  --white:     #ffffff;
  --font-h:    'Space Grotesk', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-b:    'DM Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --shadow-md: 0 10px 30px -10px rgba(79,70,229,0.4);
}
body {
  background: var(--bg); color: var(--text); font-family: var(--font-b);
  font-size: 15px; line-height: 1.6; min-height: 100vh; overflow-x: hidden; position: relative;
}
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(900px 500px at 12% -8%, rgba(79,70,229,0.18), transparent 60%),
    radial-gradient(700px 500px at 100% 110%, rgba(30,30,90,0.55), transparent 60%);
}
main, header, footer, section { position: relative; z-index: 1; }
a { color: var(--accent); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--white); }
h1, h2, h3, h4 { font-family: var(--font-h); color: var(--white); margin: 0 0 .5em; letter-spacing: -0.02em; }
h1 { font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1.05; font-weight: 700; }
h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 700; }
h3 { font-size: 1.15rem; font-weight: 600; }
p { margin: 0 0 1em; }
img { max-width: 100%; height: auto; display: block; }
ul { padding-left: 20px; }

.container { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
@media (min-width: 768px) { .container { padding: 0 32px; } }

/* Navbar */
.nav {
  display: grid; grid-template-columns: minmax(0,1fr) auto;
  align-items: center; gap: 16px;
  max-width: 1120px; margin: 0 auto; padding: 20px;
}
@media (min-width: 768px) { .nav { padding: 20px 32px; } }
.nav .brand { display: flex; align-items: center; gap: 12px; min-width: 0; color: var(--white); }
.nav .brand img {
  width: 44px; height: 44px; border-radius: 12px;
  background: rgba(255,255,255,0.06); padding: 4px;
}
.nav .brand-name { font-family: var(--font-h); font-weight: 700; font-size: 1.1rem; color: var(--white); }
.nav .brand-name span { color: var(--accent); }
.nav .brand-tag { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--text-mute); }
.nav nav { display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 500; }
@media (min-width: 768px) { .nav nav { gap: 24px; font-size: 14px; } }
.nav nav a { color: var(--text-dim); }
.nav nav a:hover { color: var(--white); }
@media (max-width: 640px) { .nav nav a.hide-sm { display: none; } }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 20px; border-radius: 12px; font-weight: 600; font-size: 14px;
  font-family: var(--font-b); cursor: pointer; border: 1px solid transparent;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
  text-decoration: none; white-space: nowrap; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--primary); color: var(--white); box-shadow: 0 10px 30px -10px var(--primary-glow); }
.btn-primary:hover { background: var(--primary-2); color: var(--white); }
.btn-ghost { background: transparent; color: var(--white); border-color: var(--border); }
.btn-ghost:hover { border-color: var(--primary); background: rgba(79,70,229,0.10); }
.btn-sm { padding: 8px 14px; font-size: 13px; border-radius: 10px; }
.btn-block { display: flex; width: 100%; }

/* Badges & pills */
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--border); background: rgba(10,10,26,0.6);
  font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--text-dim); }
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--success); animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }
.badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: .05em;
  background: rgba(129,140,248,0.15); color: var(--accent); border: 1px solid rgba(129,140,248,0.3); }
.badge-new  { background: rgba(74,222,128,0.15);  color: var(--success); border-color: rgba(74,222,128,0.3); }
.badge-best { background: rgba(245,158,11,0.15); color: var(--warning); border-color: rgba(245,158,11,0.3); }

/* Cards */
.card { position: relative; overflow: hidden; background: var(--bg-2); border: 1px solid var(--border);
  border-radius: 20px; padding: 24px; transition: border-color .2s ease, transform .2s ease; }
.card:hover { border-color: var(--border-2); transform: translateY(-2px); }
.card h3 { color: var(--white); margin-bottom: 8px; }
.card p  { color: var(--text-dim); font-size: 14px; margin: 0; }

/* Bento */
.hero-wrap { padding: 8px 0 48px; }
@media (min-width: 768px) { .hero-wrap { padding: 8px 0 80px; } }
.bento { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 900px) {
  .bento { grid-template-columns: repeat(12, 1fr); }
  .b-hero  { grid-column: span 8; }
  .b-side  { grid-column: span 4; }
  .b-half  { grid-column: span 6; }
  .b-third { grid-column: span 4; }
}
.hero { position: relative; padding: 40px; border-radius: 24px; background: var(--bg-2); border: 1px solid var(--border); overflow: hidden; }
@media (min-width: 768px) { .hero { padding: 56px; } }
.hero::after { content: ""; position: absolute; top: -100px; right: -100px; width: 280px; height: 280px;
  border-radius: 50%; background: var(--primary-glow); filter: blur(60px); pointer-events: none; }
.hero h1 span { color: var(--accent); }
.hero p { color: var(--text-dim); max-width: 32em; font-size: 1.05rem; margin-top: 20px; }
.hero .cta { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; }

/* Stat mini */
.stat { background: var(--bg-2); border: 1px solid var(--border); border-radius: 20px; padding: 24px; }
.stat .k { font-family: var(--font-h); font-size: 2rem; font-weight: 700; color: var(--white); }
.stat .v { font-size: 12px; text-transform: uppercase; letter-spacing: .15em; color: var(--text-mute); }

/* Product grid */
.products { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 24px; }
@media (min-width: 640px)  { .products { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .products { grid-template-columns: repeat(4, 1fr); } }
.product { display: flex; flex-direction: column; gap: 12px; }
.product .icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-h); font-weight: 700; font-size: 1.1rem; color: var(--white); }
.product .icon.vec  { background: linear-gradient(135deg, #f97316, #f59e0b); }
.product .icon.vec2 { background: linear-gradient(135deg, #10b981, #14b8a6); }
.product .icon.idg  { background: linear-gradient(135deg, #3b82f6, #6366f1); }
.product .icon.png  { background: linear-gradient(135deg, #059669, #10b981); }

/* Section head */
.section-head { margin: 64px 0 24px; }
.section-head .eyebrow { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }

/* Feature list */
.features { display: grid; grid-template-columns: 1fr; gap: 12px; padding: 0; margin: 20px 0; list-style: none; }
.features li { display: flex; align-items: flex-start; gap: 10px; color: var(--text-dim); font-size: 14px; }
.features li::before { content: ""; flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%;
  background: var(--primary); margin-top: 8px; box-shadow: 0 0 0 4px rgba(79,70,229,.15); }

/* Pricing */
.plans { display: grid; grid-template-columns: 1fr; gap: 20px; margin: 32px 0 64px; }
@media (min-width: 720px)  { .plans { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .plans { grid-template-columns: repeat(3, 1fr); } }
.plan { position: relative; overflow: hidden; background: var(--bg-2); border: 1px solid var(--border);
  border-radius: 22px; padding: 28px; display: flex; flex-direction: column; }
.plan::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--tint-a, var(--primary)), var(--tint-b, var(--accent))); }
.plan .name { color: var(--white); font-family: var(--font-h); font-weight: 600; font-size: 1.05rem; margin-top: 12px; }
.plan .price { display: flex; align-items: baseline; gap: 6px; margin: 14px 0 4px; }
.plan .price .amt { font-family: var(--font-h); font-size: 2.6rem; font-weight: 700; color: var(--white); }
.plan .price .cur { color: var(--text-dim); font-size: 1rem; }
.plan .period { font-size: 12px; text-transform: uppercase; letter-spacing: .15em; color: var(--text-mute); }
.plan .features { flex: 1; }
.plan .btn { margin-top: auto; }
.plan-badge { position: absolute; top: 20px; right: 20px; }

/* Forms & flashes */
.form-card { max-width: 460px; margin: 48px auto; padding: 32px; background: var(--bg-2);
  border: 1px solid var(--border); border-radius: 20px; }
.form-card h1 { font-size: 1.75rem; margin-bottom: 8px; }
.form-card .muted { color: var(--text-mute); margin-bottom: 24px; font-size: 14px; }
.field { margin-bottom: 16px; }
.field label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 500; color: var(--text-dim); }
.field input, .field textarea, .field select {
  width: 100%; padding: 12px 14px; background: var(--bg); color: var(--white);
  border: 1px solid var(--border); border-radius: 10px; font-size: 14px; font-family: var(--font-b);
  transition: border-color .15s ease, box-shadow .15s ease; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(79,70,229,.2); }
.flash { padding: 12px 16px; border-radius: 10px; margin: 16px auto; max-width: 1120px; font-size: 14px;
  border: 1px solid var(--border); background: var(--bg-2); }
.flash-success { border-color: rgba(74,222,128,.4); color: var(--success); background: rgba(74,222,128,.08); }
.flash-error   { border-color: rgba(239,68,68,.4);  color: var(--danger);  background: rgba(239,68,68,.08); }
.flash-info    { border-color: rgba(129,140,248,.4); color: var(--accent);  background: rgba(129,140,248,.08); }

/* Footer */
.footer { border-top: 1px solid var(--border); margin-top: 64px; padding: 32px 20px;
  color: var(--text-mute); font-size: 13px; display: flex; flex-wrap: wrap; gap: 12px;
  justify-content: space-between; align-items: center; max-width: 1120px; margin-left: auto; margin-right: auto; }
.footer a { color: var(--text-dim); }
.footer a:hover { color: var(--white); }

/* Utility */
.text-dim { color: var(--text-dim); }
.text-mute { color: var(--text-mute); }
.text-white { color: var(--white); }
.mono { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; }
/* === Stage 5: dashboard / admin / checkout === */
.stack{display:grid;gap:12px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:nowrap}
.row-wrap{flex-wrap:wrap}
label{display:grid;gap:6px;color:var(--text-mute);font-size:.9rem}
input[type=text],input[type=email],input[type=password],input[type=search],input[type=number],select,textarea{
  background:var(--surface-2);border:1px solid var(--border);color:var(--text);
  padding:10px 12px;border-radius:10px;font:inherit;width:100%;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in oklab,var(--accent) 25%,transparent)}
code{font-family:'JetBrains Mono',monospace;background:var(--surface-2);border:1px solid var(--border);padding:2px 8px;border-radius:6px;color:var(--accent)}

.table-wrap{overflow-x:auto}
.table{width:100%;border-collapse:collapse;font-size:.92rem}
.table th,.table td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--border)}
.table th{color:var(--text-mute);font-weight:600;text-transform:uppercase;font-size:.72rem;letter-spacing:.06em}
.table tr:hover td{background:rgba(255,255,255,.02)}

.badge-status-paid,.badge-status-active,.badge-status-open{background:color-mix(in oklab,var(--accent) 25%,transparent);color:var(--accent);border-color:transparent}
.badge-status-pending{background:rgba(245,158,11,.18);color:#fbbf24;border-color:transparent}
.badge-status-failed,.badge-status-closed,.badge-status-refunded{background:rgba(239,68,68,.18);color:#fca5a5;border-color:transparent}

.license-card{display:grid;gap:12px}
.license-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px}
.license-key{display:flex;gap:8px;align-items:center}
.license-key code{flex:1;padding:12px 14px;font-size:1rem;letter-spacing:.05em}

.ticket-row{display:flex;justify-content:space-between;align-items:center;text-decoration:none}
.thread{display:grid;gap:14px}
.msg{padding:12px 14px;border-radius:10px;background:var(--surface-2);border:1px solid var(--border)}
.msg-admin{border-left:3px solid var(--accent)}
.msg-user{border-left:3px solid #94a3b8}
.msg-meta{font-size:.75rem;color:var(--text-mute);margin-bottom:6px}
.msg-body{white-space:pre-wrap;color:var(--text)}

.steps{padding-left:20px;margin:16px 0;color:var(--text-mute);line-height:1.9}
.steps li{margin-bottom:6px}

.admin-nav{display:flex;gap:6px;flex-wrap:wrap;padding:10px;margin-bottom:20px}
.admin-nav a{padding:8px 14px;border-radius:8px;color:var(--text-mute);text-decoration:none;font-weight:500;font-size:.9rem}
.admin-nav a:hover{background:var(--surface-2);color:var(--text)}
.admin-nav a.active{background:var(--accent);color:#fff}
.admin-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-bottom:24px}
.admin-tabs{display:flex;gap:6px;margin-bottom:16px}
.admin-tabs a{padding:6px 14px;border:1px solid var(--border);border-radius:999px;color:var(--text-mute);text-decoration:none;text-transform:capitalize;font-size:.85rem}
.admin-tabs a.active{background:var(--accent);color:#fff;border-color:transparent}

.plan-badge{position:absolute;top:12px;right:12px}
.btn-block{width:100%;justify-content:center}

@media (max-width:640px){
  .license-head{flex-direction:column;align-items:flex-start}
  .row{flex-wrap:wrap}
  .table th,.table td{padding:8px 6px;font-size:.85rem}
}

/* ===================== Auth pages (login/register/forgot/reset) ===================== */
.page-auth\/login main,
.page-auth\/forgot main,
.page-auth\/reset main { padding: 0; }

.auth-shell{
  position:relative; min-height: calc(100vh - 96px);
  display:flex; align-items:stretch; justify-content:center;
  padding: 16px; overflow:hidden;
}
@media (min-width: 640px){ .auth-shell{ padding: 24px; } }
.auth-shell::before,
.auth-shell::after{
  content:""; position:absolute; border-radius:50%; filter: blur(90px); pointer-events:none; z-index:0;
}
.auth-shell::before{ width:520px; height:520px; top:-160px; left:-120px; background: rgba(79,70,229,.35); }
.auth-shell::after { width:420px; height:420px; bottom:-140px; right:-100px; background: rgba(129,140,248,.22); }
.auth-shell-compact{ min-height: calc(100vh - 96px); }

.auth-grid{
  position:relative; z-index:1;
  width:100%; max-width:1080px; min-width:0;
  display:grid; grid-template-columns: 1fr; gap: 0;
  border-radius: 20px; overflow:hidden;
  border:1px solid var(--border);
  background: linear-gradient(180deg, rgba(20,20,50,.85), rgba(10,10,26,.85));
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.02) inset;
  backdrop-filter: blur(14px);
}
@media (min-width: 640px){ .auth-grid{ border-radius: 28px; } }
@media (min-width: 900px){
  .auth-grid{ grid-template-columns: 1.05fr 1fr; min-height: 620px; }
}

/* ---- Brand side ---- */
.auth-brand{
  display:none;
  position:relative;
  padding: 40px 44px;
  background:
    radial-gradient(600px 300px at 10% 10%, rgba(99,102,241,.35), transparent 60%),
    radial-gradient(500px 400px at 90% 90%, rgba(30,30,90,.7), transparent 60%),
    linear-gradient(160deg, #14143d 0%, #0d0d28 100%);
  color: var(--white);
  flex-direction:column; justify-content:space-between;
  border-right: 1px solid rgba(255,255,255,.06);
}
@media (min-width: 900px){ .auth-brand{ display:flex; } }
.auth-brand::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse at center, #000 40%, transparent 80%);
}
.auth-brand > *{ position:relative; z-index:1; }
.auth-logo{ display:inline-flex; align-items:center; gap:12px; color:var(--white); }
.auth-logo img{ width:40px; height:40px; border-radius:10px; background: rgba(255,255,255,.06); padding: 3px; }
.auth-logo span{ font-family: var(--font-h); font-weight:700; font-size:1.15rem; letter-spacing:-.02em; }
.auth-logo span b{ color: var(--accent); font-weight:700; }
.auth-eyebrow{
  display:inline-block; margin-bottom:18px;
  padding: 5px 12px; border-radius:999px;
  background: rgba(129,140,248,.14); border:1px solid rgba(129,140,248,.28);
  color: var(--accent); font-size:11px; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
}
.auth-brand-body h1{
  font-size: clamp(1.75rem, 3.2vw, 2.35rem); line-height:1.15; margin: 0 0 16px;
}
.auth-brand-body h1 span{
  background: linear-gradient(90deg, #a5b4fc, #818cf8);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.auth-brand-body p{ color: rgba(203,213,225,.85); max-width: 34ch; font-size:.98rem; }
.auth-points{ list-style:none; padding:0; margin:22px 0 0; display:grid; gap:12px; }
.auth-points li{ display:flex; align-items:center; gap:12px; color: rgba(226,232,240,.9); font-size:.92rem; }
.auth-points li em{
  flex-shrink:0; width:18px; height:18px; border-radius:50%;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  display:inline-block; position:relative;
}
.auth-points li em::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center / 11px 11px no-repeat;
}
.auth-brand-foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:12px; color: rgba(148,163,184,.9); }
.auth-mark{ display:inline-flex; align-items:center; gap:8px; }
.auth-mark .dot{ width:8px; height:8px; border-radius:50%; background: var(--success); box-shadow: 0 0 0 4px rgba(74,222,128,.15); animation: pulse 2s ease-in-out infinite; }
.auth-mark.muted{ color: rgba(100,116,139,.9); }

/* ---- Form side ---- */
.auth-panel{
  min-width:0;
  padding: 28px 18px;
  display:flex; flex-direction:column; gap: 22px;
  background: rgba(10,10,26,.55);
}
@media (min-width: 640px){ .auth-panel{ padding: 44px 44px; } }
.auth-panel-solo{
  max-width: 460px; width:100%;
  border-radius: 24px; border:1px solid var(--border);
  background: linear-gradient(180deg, rgba(20,20,50,.85), rgba(10,10,26,.85));
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.7);
  backdrop-filter: blur(14px);
  position:relative; z-index:1;
  align-self:center;
}
.auth-mobile-logo{
  display:flex; align-items:center; gap:10px; color:var(--white);
  margin-bottom: 4px;
}
.auth-mobile-logo img{ width:34px; height:34px; border-radius:9px; background:rgba(255,255,255,.06); padding:3px; }
.auth-mobile-logo span{ font-family:var(--font-h); font-weight:700; }
.auth-mobile-logo span b{ color:var(--accent); }
@media (min-width: 900px){ .auth-panel .auth-mobile-logo{ display:none; } }

.auth-tabs{
  position:relative;
  display:grid; grid-template-columns: 1fr 1fr;
  background: rgba(10,10,26,.7);
  border:1px solid var(--border);
  border-radius: 12px; padding: 4px; gap:0;
}
.auth-tab{
  position:relative; z-index:1;
  background:transparent; border:0; cursor:pointer;
  padding: 10px 14px; font: 600 13px/1 var(--font-b);
  color: var(--text-dim); border-radius: 9px;
  transition: color .2s ease;
}
.auth-tab.active{ color: var(--white); }
.auth-tab-indicator{
  position:absolute; top:4px; bottom:4px; left:4px;
  width: calc(50% - 4px);
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  border-radius: 9px;
  box-shadow: 0 8px 20px -8px var(--primary-glow);
  transition: transform .28s cubic-bezier(.4,0,.2,1);
  z-index:0;
}
.auth-tab:nth-of-type(2).active ~ .auth-tab-indicator{ transform: translateX(100%); }

.auth-form{ display:flex; flex-direction:column; gap:16px; }
.auth-head h2{ font-size: 1.55rem; margin:0 0 6px; }
.auth-head p{ margin:0; color: var(--text-dim); font-size:.92rem; }

.auth-field{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.auth-field > label,
.auth-label-row label{
  font-size: 12px; font-weight:600; letter-spacing:.06em;
  text-transform: uppercase; color: var(--text-dim);
  margin:0;
}
.auth-field .opt{ text-transform:none; letter-spacing:0; color: var(--text-mute); font-weight:400; margin-left:4px; }
.auth-label-row{ display:flex; align-items:center; justify-content:space-between; }
.auth-link-sm{ font-size:12px; color: var(--accent); font-weight:500; }
.auth-link-sm:hover{ color: var(--white); }

.auth-input{
  position:relative;
  display:flex; align-items:center; min-width:0;
  border:1px solid var(--border); border-radius: 12px;
  background: rgba(10,10,26,.7);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.auth-input:focus-within{
  border-color: var(--primary);
  background: rgba(10,10,26,.9);
  box-shadow: 0 0 0 4px rgba(79,70,229,.18);
}
.auth-input svg{
  width:18px; height:18px; margin-left:14px;
  color: var(--text-mute); flex-shrink:0;
}
.auth-input input{
  flex:1; min-width:0; background:transparent; border:0; outline:0;
  padding: 13px 14px; color: var(--white);
  font: 500 14px/1.4 var(--font-b);
}
.auth-input input::placeholder{ color: var(--text-mute); font-weight:400; }
.auth-eye{
  background:transparent; border:0; cursor:pointer;
  padding: 0 14px; color: var(--text-mute); display:flex; align-items:center;
}
.auth-eye:hover, .auth-eye.on{ color: var(--accent); }
.auth-eye svg{ width:18px; height:18px; margin:0; }

.auth-row{ display:grid; grid-template-columns: 1fr; gap:14px; min-width:0; }
@media (min-width: 760px){ .auth-row{ grid-template-columns: minmax(0,1fr) minmax(0,1fr); } }

@media (max-width: 420px){
  .auth-shell{ padding: 10px; }
  .auth-panel{ padding: 24px 14px; gap:18px; }
  .auth-tabs{ padding:3px; }
  .auth-tab{ padding:10px 8px; font-size:12px; }
  .auth-head h2{ font-size:1.35rem; }
  .auth-input svg{ margin-left:12px; }
  .auth-input input{ padding:12px 10px; font-size:13px; }
  .auth-eye{ padding:0 10px; }
}

.auth-submit{
  margin-top: 6px;
  padding: 13px 20px; font-size: 14px; letter-spacing:.01em;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  border: 0;
}
.auth-submit:hover{ background: linear-gradient(135deg, var(--primary-2), var(--accent)); }

.auth-switch{
  text-align:center; margin: 4px 0 0; font-size: 13px; color: var(--text-dim);
}
.auth-link{
  background:transparent; border:0; cursor:pointer;
  color: var(--accent); font-weight:600; padding:0; font: inherit;
}
.auth-link:hover{ color: var(--white); }

.auth-terms{
  margin: 6px 0 0; text-align:center;
  font-size: 11px; color: var(--text-mute); letter-spacing:.02em;
}

/* Admin login (reuse auth solo layout) */
.page-abir\/login main{ padding: 0; }

/* ===================== Admin console (v2) ===================== */
html.is-admin body::before { opacity: .55; }
html.is-admin body > header,
html.is-admin body > footer { display: none; }

.admin-side {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 40;
  width: 248px; padding: 22px 16px;
  background: linear-gradient(180deg, #10102e 0%, #0a0a1f 100%);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 8px;
  transform: translateX(-100%); transition: transform .28s ease;
}
.admin-side::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: radial-gradient(ellipse at top, #000 30%, transparent 80%);
}
.admin-side > * { position: relative; z-index: 1; }
@media (min-width: 900px){ .admin-side{ transform: translateX(0); } }
body.admin-open .admin-side { transform: translateX(0); }
.admin-brand{ display:flex; align-items:center; gap:12px; padding: 4px 8px 14px; border-bottom:1px solid var(--border); }
.admin-brand img{ width:38px; height:38px; border-radius:10px; background: rgba(255,255,255,.06); padding: 3px; }
.admin-brand .ab-name{ font-family: var(--font-h); font-weight: 700; color: var(--white); font-size: 1rem; }
.admin-brand .ab-name span{ color: var(--accent); }
.admin-brand .ab-tag{ font-size: 10px; text-transform: uppercase; letter-spacing:.2em; color: var(--text-mute); }
.admin-side nav{ display:flex; flex-direction:column; gap:2px; padding: 10px 0; flex:1; }
.asi-link{
  display:flex; align-items:center; gap:12px;
  padding: 10px 12px; border-radius: 10px;
  color: var(--text-dim); font-size: 14px; font-weight: 500;
  transition: background .15s ease, color .15s ease;
}
.asi-link:hover{ background: rgba(255,255,255,.04); color: var(--white); }
.asi-link.active{ background: linear-gradient(135deg, rgba(79,70,229,.25), rgba(99,102,241,.15)); color: var(--white); box-shadow: inset 0 0 0 1px rgba(129,140,248,.25); }
.asi-link svg{ opacity:.85; flex-shrink:0; }
.admin-side-foot{ border-top:1px solid var(--border); padding-top:10px; }
.asi-logout{ color: #fca5a5; }
.asi-logout:hover{ background: rgba(239,68,68,.10); color: #fecaca; }

.admin-topbar{
  position: sticky; top:0; z-index: 30;
  display:flex; align-items:center; gap:14px;
  padding: 14px 20px;
  background: rgba(10,10,26,.75); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
@media (min-width: 900px){ .admin-topbar{ margin-left: 248px; } }
.admin-top-title{ font-family: var(--font-h); font-weight: 600; color: var(--white); font-size: 1.05rem; flex:1; }
.admin-top-link{ font-size: 13px; color: var(--text-dim); }
.admin-top-link:hover{ color: var(--white); }
.admin-burger{ background: transparent; border: 1px solid var(--border); border-radius: 10px; width: 40px; height:40px; display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; cursor:pointer; }
.admin-burger span{ width: 18px; height:2px; background: var(--white); border-radius: 2px; }
@media (min-width: 900px){ .admin-burger{ display:none; } }

.admin-scrim{ position: fixed; inset: 0; background: rgba(0,0,0,.55); opacity: 0; pointer-events: none; transition: opacity .2s ease; z-index: 35; }
body.admin-open .admin-scrim{ opacity: 1; pointer-events: auto; }
@media (min-width: 900px){ .admin-scrim{ display:none; } }

.admin-page{ padding: 24px 20px 60px; }
@media (min-width: 900px){ .admin-page{ margin-left: 248px; padding: 32px 40px 80px; max-width: 1400px; } }
.admin-page .ap-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom: 24px; }
.admin-page .ap-head h1{ font-size: clamp(1.5rem, 3vw, 2rem); margin: 4px 0 6px; }
.admin-page .ap-head .eyebrow{ font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); }
.ap-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.ap-link{ color: var(--accent); font-size: 13px; font-weight: 600; }
.ap-card{
  background: linear-gradient(180deg, rgba(20,20,50,.75), rgba(15,15,40,.75));
  border: 1px solid var(--border); border-radius: 18px; padding: 22px;
  box-shadow: 0 12px 32px -18px rgba(0,0,0,.6);
}
.ap-sec-head{ display:flex; align-items:center; justify-content:space-between; margin: 28px 0 14px; }
.ap-sec-head h2{ font-size: 1.15rem; margin: 0; }
.ap-section{ margin-top: 8px; }

.kpi-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 8px; }
.kpi{
  display:flex; align-items:center; gap:14px;
  padding: 18px; border-radius: 16px;
  background: linear-gradient(180deg, rgba(20,20,50,.75), rgba(15,15,40,.75));
  border: 1px solid var(--border);
  transition: transform .2s ease, border-color .2s ease;
}
.kpi:hover{ transform: translateY(-2px); border-color: var(--border-2); }
.kpi-icon{
  width: 42px; height: 42px; border-radius: 12px;
  display:flex; align-items:center; justify-content:center;
  color: #fff;
}
.kpi.k-blue   .kpi-icon{ background: linear-gradient(135deg,#3b82f6,#6366f1); }
.kpi.k-purple .kpi-icon{ background: linear-gradient(135deg,#7c3aed,#a855f7); }
.kpi.k-green  .kpi-icon{ background: linear-gradient(135deg,#10b981,#14b8a6); }
.kpi.k-amber  .kpi-icon{ background: linear-gradient(135deg,#f59e0b,#f97316); }
.kpi.k-orange .kpi-icon{ background: linear-gradient(135deg,#f97316,#ef4444); }
.kpi.k-rose   .kpi-icon{ background: linear-gradient(135deg,#f43f5e,#ec4899); }
.kpi-v{ font-family: var(--font-h); font-weight: 700; font-size: 1.6rem; color: var(--white); line-height:1.1; }
.kpi-l{ font-size: 11px; text-transform: uppercase; letter-spacing:.14em; color: var(--text-mute); margin-top: 4px; }

.grid-form{ display:grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 12px; align-items:end; }
.grid-form label{ display:grid; gap:6px; color: var(--text-dim); font-size: 12px; font-weight: 600; letter-spacing:.05em; text-transform: uppercase; }
.grid-form .check{ display:flex; align-items:center; gap:8px; text-transform:none; letter-spacing:0; }
.grid-form .check input{ width:auto; }
.grid-form button{ height: 44px; }

.ap-filter{ display:flex; gap:10px; margin: 16px 0; flex-wrap:wrap; }
.ap-filter input, .ap-filter select{ min-width: 180px; }

.table .empty{ text-align:center; color: var(--text-mute); padding: 40px 0; font-style: italic; }
.table .num{ font-variant-numeric: tabular-nums; font-family: var(--font-h); }
.chip{ display:inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing:.05em; background: rgba(129,140,248,.12); border: 1px solid rgba(129,140,248,.22); color: var(--accent); text-transform: capitalize; }
.row-actions{ display:flex; gap:6px; flex-wrap: wrap; }
.row-actions form{ display:inline; margin:0; }
.btn-ghost.danger{ color:#fca5a5; }
.btn-ghost.danger:hover{ background: rgba(239,68,68,.10); border-color: rgba(239,68,68,.4); }

.copy-key{ background:transparent; border:0; padding:0; cursor:pointer; color:inherit; }
.copy-key code{ transition: background .15s ease; }
.copy-key.copied code{ background: rgba(74,222,128,.15); color:#4ade80; border-color: rgba(74,222,128,.35); }
.copy-key:hover code{ border-color: var(--accent); }

.update-grid{ display:grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 900px){ .update-grid{ grid-template-columns: 1.5fr 1fr; } }
.ver-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom: 16px; }
.ver-num{ font-family: var(--font-h); font-size: 2.2rem; font-weight: 700; color: var(--white); line-height:1; margin-top: 4px; }
.channel-form{ display:grid; gap: 8px; }
.channel-form label{ font-size: 12px; text-transform: uppercase; letter-spacing:.06em; color: var(--text-dim); font-weight: 600; }

.user-header{ display:flex; align-items:center; gap:16px; }
.user-avatar{ width: 56px; height: 56px; border-radius: 16px; background: linear-gradient(135deg,#4f46e5,#a855f7); color:#fff; display:flex; align-items:center; justify-content:center; font-family: var(--font-h); font-weight:700; font-size: 1.15rem; }

/* Checkout redesign */
.checkout-grid{ display:grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 900px){ .checkout-grid{ grid-template-columns: 1.4fr 1fr; } }
.chk-plan{ padding-bottom: 18px; border-bottom: 1px dashed var(--border); margin-bottom: 18px; }
.chk-plan .price{ display:flex; align-items:baseline; gap:6px; }
.chk-plan .price .amt{ font-family: var(--font-h); font-size: 2.6rem; font-weight: 700; color: var(--white); line-height:1; }
.chk-plan .price .cur{ color: var(--text-dim); font-size: 1rem; }
.chk-steps{ list-style:none; padding:0; margin: 0 0 18px; display:grid; gap:14px; }
.chk-steps li{ display:flex; align-items:flex-start; gap:14px; }
.chk-num{ flex-shrink:0; width:34px; height:34px; border-radius:10px; background: linear-gradient(135deg,#4f46e5,#6366f1); color:#fff; display:flex; align-items:center; justify-content:center; font-family: var(--font-h); font-weight:700; }
.chk-t{ color: var(--text); font-size: 15px; }
.chk-copy{ display:flex; align-items:center; gap:10px; margin-top:6px; }
.chk-copy code{ font-size: 1.05rem; letter-spacing:.06em; padding: 8px 12px; }
.chk-form{ display:grid; gap:14px; margin-top: 6px; }
.chk-note{ margin-top: 14px; padding: 12px 14px; border-radius: 10px; border:1px solid; font-size: 13px; }
.chk-note.pending{ background: rgba(245,158,11,.10); border-color: rgba(245,158,11,.28); color:#fbbf24; }
.chk-side h3{ margin: 0 0 8px; }
.chk-info{ margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--border); display:grid; gap:8px; font-size: 13px; }

/* Admin login uses auth shell centered */
.page-admin\/login header, .page-admin\/login footer { }