/* ===== Theme Vars ===== */
/* Codegenify flagship theme (blue/white, light+dark) */
:root{
  --bg:#ffffff;
  --surface:#f6f9ff;
  --surface2:#ffffff;
  --text:#0b1220;
  --muted:#5b677a;
  --line: rgba(10,40,120,.12);
  --brand:#0b5cff;
  --brand2:#00b3ff;
  --ok:#22c55e;
  --warn:#f59e0b;
  --danger:#ef4444;
  --shadow: 0 14px 45px rgba(10,20,40,.10);
  --radius:18px;
  --radius2:28px;
}
[data-theme="dark"]{

  --bg:#070b14;
  --surface:#0c1224;
  --surface2:#0a1020;
  --text:#eaf0ff;
  --muted:#a9b6d3;
  --line: rgba(255,255,255,.10);
  --shadow: 0 18px 60px rgba(0,0,0,.40);

  --text:#eaf2ff;
  --muted:#b7c6df;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background: radial-gradient(900px 700px at 15% 5%, rgba(11,92,255,.08), transparent 55%),
              radial-gradient(900px 700px at 85% 15%, rgba(0,179,255,.10), transparent 60%),
              var(--bg);
  color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  line-height:1.5;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
.container{ width:min(1180px, 92%); margin:0 auto; }
.nav{
  position:sticky; top:0; z-index:60;
  backdrop-filter: blur(10px);
  background: color-mix(in oklab, var(--bg) 88%, transparent);
  border-bottom: 1px solid var(--line);
}
.nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:14px 0; }
.brand{ display:flex; align-items:center; gap:.65rem; font-weight:800; letter-spacing:.2px; }
.brand-badge{
  width:38px; height:38px; border-radius:14px;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  box-shadow: var(--shadow);
}
.brand span{ font-size:1.05rem; }
.nav-links{ display:flex; gap:1rem; align-items:center; flex-wrap:wrap; }
.nav-links a{ padding:.55rem .7rem; border-radius:12px; color:var(--muted); border:1px solid transparent; }
.nav-links a:hover{ color:var(--text); border-color:var(--line); background: color-mix(in oklab, var(--surface) 70%, transparent); }
.nav-actions{ display:flex; gap:.6rem; align-items:center; }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.78rem 1rem;
  border-radius:14px;
  border:1px solid var(--line);
  background: color-mix(in oklab, var(--surface) 75%, transparent);
  color:var(--text);
  cursor:pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover{ transform: translateY(-1px); box-shadow: var(--shadow); }
.btn.primary{ border:none; background: linear-gradient(135deg, var(--brand), var(--brand2)); color:#fff; }
.btn.ghost{ background:transparent; }
.hero{ padding:68px 0 28px; }
.hero-grid{ display:grid; grid-template-columns: 1.2fr .8fr; gap:28px; align-items:center; }
@media (max-width: 920px){ .hero-grid{ grid-template-columns:1fr; } }
.h-eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.38rem .7rem;
  border-radius:999px;
  border:1px solid var(--line);
  background: color-mix(in oklab, var(--surface) 80%, transparent);
  color:var(--muted);
  font-weight:600; font-size:.9rem;
}
.h-title{ font-size: clamp(2.0rem, 3.2vw, 3.25rem); margin:.8rem 0 .6rem; line-height:1.12; letter-spacing:-.6px; }
.h-sub{ color:var(--muted); font-size:1.05rem; max-width: 60ch; }
.h-cta{ display:flex; gap:.75rem; flex-wrap:wrap; margin-top:1.35rem; }
.kpi{ display:flex; gap:18px; flex-wrap:wrap; margin-top:1.25rem; color:var(--muted); }
.kpi b{ color:var(--text); }
.card{
  background: linear-gradient(180deg, color-mix(in oklab, var(--surface) 92%, transparent), var(--surface2));
  border:1px solid var(--line);
  border-radius:var(--radius2);
  box-shadow: var(--shadow);
}
.hero-art{ position:relative; padding:22px; overflow:hidden; }
.glow{ position:absolute; inset:-120px -120px auto auto; width:340px; height:340px;
  background: radial-gradient(circle at 30% 30%, rgba(0,179,255,.45), transparent 60%); filter: blur(1px);
}
.hero-art .panel{ border-radius:22px; border:1px solid var(--line);
  background: color-mix(in oklab, var(--surface) 70%, transparent); padding:18px;
}
.pill{ display:inline-flex; align-items:center; gap:.5rem; padding:.4rem .65rem;
  border-radius:999px; border:1px solid var(--line); color:var(--muted); font-weight:600; font-size:.9rem;
}
.section{ padding:56px 0; }
.section h2{ margin:0 0 .25rem; font-size:1.8rem; letter-spacing:-.3px; }
.section p.lead{ margin:0 0 1.3rem; color:var(--muted); max-width: 75ch; }
.grid-3{ display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; }
@media (max-width: 980px){ .grid-3{ grid-template-columns:1fr; } }
.grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
@media (max-width: 980px){ .grid-2{ grid-template-columns:1fr; } }
.feature{
  padding:18px; border-radius:22px; border:1px solid var(--line);
  background: color-mix(in oklab, var(--surface) 78%, transparent);
  position:relative; overflow:hidden; min-height: 160px;
}
.feature:hover{ box-shadow: var(--shadow); transform: translateY(-1px); transition:.15s ease; }
.icon-3d{ position:absolute; right:-10px; top:-12px; width:96px; opacity:.95; filter: drop-shadow(0 18px 25px rgba(0,0,0,.18)); }
.feature h3{ margin:.2rem 0 .4rem; }
.feature p{ margin:0; color:var(--muted); }
.badge{ display:inline-flex; align-items:center; gap:.45rem; padding:.3rem .55rem; border-radius:999px;
  border:1px solid var(--line); color:var(--muted); font-weight:600; font-size:.85rem;
}
.listing-card{ padding:18px; }
.form{ display:grid; gap:12px; }
.input, textarea, select{
  width:100%; padding:.85rem .95rem; border-radius:14px; border:1px solid var(--line);
  background: color-mix(in oklab, var(--surface) 74%, transparent);
  color:var(--text); outline:none;
}
textarea{ min-height: 140px; resize: vertical; }
.input:focus, textarea:focus, select:focus{
  border-color: color-mix(in oklab, var(--brand) 65%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand) 18%, transparent);
}
.footer{
  border-top:1px solid var(--line);
  padding:34px 0;
  background: radial-gradient(800px 500px at 10% 5%, rgba(11,92,255,.10), transparent 55%),
              radial-gradient(800px 500px at 90% 25%, rgba(0,179,255,.12), transparent 60%);
}
.footer-grid{ display:grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap:18px; }
@media (max-width: 980px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width: 560px){ .footer-grid{ grid-template-columns:1fr; } }
.footer small{ color:var(--muted); }
.footer a{ color:var(--muted); }
.footer a:hover{ color:var(--text); }
.notice{ padding:12px 14px; border-radius:14px; border:1px solid var(--line);
  background: color-mix(in oklab, var(--surface) 78%, transparent); color:var(--muted);
}
.table{ width:100%; border-collapse:separate; border-spacing:0; overflow:hidden; border-radius:16px; border:1px solid var(--line); }
.table th, .table td{ padding:10px 12px; border-bottom:1px solid var(--line); text-align:left; }
.table td{ color:var(--text); background: color-mix(in oklab, var(--card) 82%, transparent); }
.table th{ font-size:.9rem; color:var(--muted); background: color-mix(in oklab, var(--surface) 80%, transparent); }
.table tr:last-child td{ border-bottom:none; }
.admin-shell{ display:grid; grid-template-columns: 260px 1fr; min-height: 100vh; }
@media (max-width: 980px){ .admin-shell{ grid-template-columns: 1fr; } }
.sidebar{ padding:18px; border-right:1px solid var(--line); background: color-mix(in oklab, var(--surface) 65%, transparent); }
.sidebar a{ display:flex; gap:.6rem; padding:.6rem .7rem; border-radius:14px; color:var(--muted); }
.sidebar a:hover{ background: color-mix(in oklab, var(--surface) 85%, transparent); color:var(--text); border:1px solid var(--line); }
.content{ padding:24px; }
.h1{ font-size:1.65rem; margin:0 0 1rem; letter-spacing:-.4px; }
.hr{ height:1px; background:var(--line); margin:18px 0; }

/* --- Enterprise visuals pack (external backgrounds) --- */
body{
  /* IMPORTANT: last layer must be var(--bg) so dark mode keeps a dark canvas */
  background:
    radial-gradient(900px 700px at 15% 5%, rgba(11,92,255,.10), transparent 55%),
    radial-gradient(900px 700px at 85% 15%, rgba(0,179,255,.12), transparent 60%),
    var(--bg);
  background-size: cover;
  background-position: center;
}
.hero{ position:relative; }
.hero::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--bg) 88%, transparent), color-mix(in oklab, var(--bg) 98%, transparent)),
    none;
  background-size: cover; background-position:center;
  opacity:.22; pointer-events:none;
}
.hero > .container{ position:relative; z-index:1; }
.section{ position:relative; }
.section::after{
  content:"";
  position:absolute; inset:0;
  background-image: radial-gradient(rgba(11,92,255,.10) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity:.12;
  pointer-events:none;
}
[data-theme="dark"] .section::after{ opacity:.08; }

.icon-3d{
  border-radius: 26px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.55), rgba(255,255,255,.12));
  padding:10px;
  border:1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(6px);
  box-shadow: 0 18px 45px rgba(0,0,0,.18);
}
[data-theme="dark"] .icon-3d{
  border-color: rgba(255,255,255,.10);
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.22), rgba(255,255,255,.06));
}


/* --- Dashboard UX (International SaaS layout) --- */
.dash{display:grid; grid-template-columns: 260px 1fr; min-height: calc(100vh - 84px);}
.dash .side{position:sticky; top:84px; height: calc(100vh - 84px); padding:18px; border-right:1px solid var(--line); background: color-mix(in oklab, var(--bg) 92%, transparent); backdrop-filter: blur(6px);}
.dash .main{padding:22px 0;}
.side .side-title{font-weight:900; letter-spacing:.2px; margin-bottom:10px;}
.side a{display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:14px; color:var(--text);}
.side a:hover{background: color-mix(in oklab, var(--card) 72%, transparent);}
.side a.active{background: color-mix(in oklab, var(--primary) 14%, var(--card)); border:1px solid color-mix(in oklab, var(--primary) 25%, var(--line));}
.kpis{display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:14px;}
.kpi{padding:16px; border-radius:18px; border:1px solid var(--line); background: color-mix(in oklab, var(--card) 86%, transparent); box-shadow: 0 10px 30px rgba(0,0,0,.08);}
.kpi .num{font-size:1.6rem; font-weight:950; margin-top:8px;}
.kpi small{color:var(--muted);}
@media (max-width: 980px){
  .dash{grid-template-columns: 1fr;}
  .dash .side{position:relative; top:auto; height:auto; border-right:none; border-bottom:1px solid var(--line);}
  .kpis{grid-template-columns: repeat(2, minmax(0,1fr));}
}


/* ===== Admin Panel Sidebar Styling ===== */
.admin-shell{
  display:grid;
  grid-template-columns: 260px 1fr;
  min-height:100vh;
}
.admin-side{
  padding:18px;
  border-right:1px solid var(--line);
  background: color-mix(in oklab, var(--bg) 92%, transparent);
  position:sticky;
  top:0;
  height:100vh;
}
.admin-brand{ margin-bottom:14px; }
.admin-nav a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  color:var(--text);
  text-decoration:none;
  margin:6px 0;
}
.admin-nav a:hover{ background: color-mix(in oklab, var(--card) 72%, transparent); }
.admin-sep{ height:1px; background: var(--line); margin:12px 0; }
.admin-label{
  font-size:.78rem;
  color:var(--muted);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
  margin:10px 0 6px;
}
.admin-main{
  padding:22px;
  background: linear-gradient(180deg, color-mix(in oklab, var(--card) 40%, transparent), transparent);
}
@media (max-width: 980px){
  .admin-shell{grid-template-columns: 1fr;}

  /* Off-canvas admin sidebar (mobile-friendly) */
  .admin-side{
    position:fixed;
    top:0;
    left:0;
    width:280px;
    max-width:86vw;
    height:100vh;
    transform:translateX(-105%);
    transition:transform .22s ease;
    border-right:1px solid var(--line);
    border-bottom:none;
    z-index:50;
  }
  body.admin-open .admin-side{transform:translateX(0);}

  .admin-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.45);
    backdrop-filter: blur(3px);
    opacity:0;
    pointer-events:none;
    transition:opacity .22s ease;
    z-index:40;
  }
  body.admin-open .admin-overlay{opacity:1; pointer-events:auto;}

  .admin-main{padding:16px;}
  .admin-burger{display:inline-flex;}
}

.admin-burger{
  display:none;
  width:38px;
  height:38px;
  align-items:center;
  justify-content:center;
  border:1px solid var(--line);
  background: color-mix(in oklab, var(--card) 70%, transparent);
  color:var(--text);
  border-radius:14px;
  font-weight:900;
}


/* ===== Mobile Navigation (hamburger) ===== */
.nav-toggle{display:none; border:1px solid var(--line); background: color-mix(in oklab, var(--card) 70%, transparent); color:var(--text); padding:10px 12px; border-radius:14px; font-weight:900;}
@media (max-width: 860px){
  .nav-inner{gap:10px;}
  .nav-links{display:none !important;}
  .nav-toggle{display:inline-flex; align-items:center; justify-content:center;}
  body.nav-open .nav-links{
    display:flex !important;
    position:fixed;
    top:72px;
    left:0; right:0; bottom:0;
    flex-direction:column;
    gap:14px;
    padding:22px;
    background: color-mix(in oklab, var(--bg) 92%, transparent);
    backdrop-filter: blur(8px);
    z-index:9999;
  }
  body.nav-open .nav-links a{font-size:1.15rem; padding:12px 14px; border-radius:16px; background: color-mix(in oklab, var(--card) 75%, transparent); border:1px solid var(--line);}
  body.nav-open{overflow:hidden;}
}


/* ===== Contrast fixes (light mode) ===== */
[data-theme="light"] .hero h1, [data-theme="light"] .hero .h1{color: var(--text); opacity: 1;}
[data-theme="light"] .hero p{color: color-mix(in oklab, var(--text) 75%, var(--muted));}
[data-theme="light"] .nav-links a{color: color-mix(in oklab, var(--text) 82%, var(--muted));}

/* ===== Contrast Safety (prevents invisible text) ===== */
h1,h2,h3,h4,h5,h6{color:var(--text);}
p,li,small,label,span{color:inherit;}
.hero h1,.hero h2{color:var(--text) !important;}
.hero p{color:color-mix(in oklab, var(--text) 82%, var(--muted)) !important;}
.section-title{color:var(--text) !important;}
a{color:inherit;}
/* buttons */
.btn,.btn-primary,.btn-ghost{color:var(--text);}
[data-theme="dark"] .btn-primary{color:#fff;}

/* ===== Mobile Nav overlay improvements ===== */
@media (max-width: 860px){
  body.nav-open .nav-links{
    background: color-mix(in oklab, var(--bg) 96%, #000);
  }
  body.nav-open .nav-links a{
    color:var(--text) !important;
  }
}

/* ===== Admin/Login toggle visibility ===== */
.auth-actions{display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap;}


/* ===== Patch v2: Mobile Nav + Contrast ===== */
.nav-toggle{display:none;}
@media (max-width: 860px){
  .nav-toggle{display:inline-flex !important;}
  .nav-links{display:none !important;}
  body.nav-open{overflow:hidden;}
  body.nav-open .nav-links{
    display:flex !important;
    position:fixed !important;
    inset:0 !important;
    top:0 !important;
    width:100vw !important;
    max-width:100vw !important;
    padding:92px 22px 22px 22px !important;
    background: color-mix(in oklab, var(--bg) 96%, #000) !important;
    z-index:9999 !important;
  }
  body.nav-open .nav-links a{
    padding:14px 14px !important;
    border-radius:14px;
    border:1px solid var(--line);
    background: color-mix(in oklab, var(--card) 70%, transparent);
    color:var(--text) !important;
  }
  body.nav-open .nav-actions{display:none !important;}
}

/* Dark hero background + readable text */
[data-theme="dark"] .hero{
  background:
    radial-gradient(1200px 700px at 10% 10%, rgba(26,115,232,.28), transparent 55%),
    radial-gradient(900px 600px at 85% 15%, rgba(64,196,255,.22), transparent 60%),
    linear-gradient(180deg, #0b1220 0%, #0b1220 100%) !important;
}
[data-theme="dark"] .hero h1,
[data-theme="dark"] .hero p,
[data-theme="dark"] .hero .pill{
  color:var(--text) !important;
}
[data-theme="dark"] .hero p{color:var(--muted) !important;}

/* --- NAV: final overrides (prevents desktop hamburger + fixes mobile overflow) --- */
.nav-toggle{display:none}
@media (max-width: 860px){
  .nav-toggle{display:inline-flex}
  /* Keep header compact on small screens */
  .nav-actions .btn{display:none}
  .nav-actions .nav-toggle, .nav-actions .btn.ghost{display:inline-flex}
}
@media (max-width: 520px){
  .nav-inner{gap:.5rem}
  .brand span:last-child{display:none}
  .nav-actions{gap:.4rem}
  .nav-actions .btn.ghost{padding:.5rem .6rem}
}


.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;border:0!important;}
.brand{display:flex;align-items:center;gap:.75rem;min-width:0}
.brand-logo{display:block;max-width:none;height:auto}
.brand-logo.full{width:180px}
.brand-logo.icononly{display:none;width:42px}
.nav{overflow:visible}
.nav-inner{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:1rem;position:relative}
.nav-links{justify-content:center;flex-wrap:nowrap;white-space:nowrap;gap:.15rem;overflow:hidden}
.nav-links a{font-size:.98rem}
.nav-actions{justify-self:end;display:flex;align-items:center;gap:.6rem;white-space:nowrap}
.mobile-only{display:none !important}
.section h2,.section h3,.section .lead,.feature h3,.feature p,.notice,.footer p,.footer a,.footer small,.footer li{opacity:1!important}
[data-theme="light"] .section h2,[data-theme="light"] .feature h3,[data-theme="light"] footer h3,[data-theme="light"] footer h4{color:#0b1220!important}
[data-theme="light"] .section .lead,[data-theme="light"] .feature p,[data-theme="light"] .footer p,[data-theme="light"] .footer a,[data-theme="light"] .footer small,[data-theme="light"] .footer li,[data-theme="light"] .notice{color:#526277!important}
[data-theme="dark"] .section h2,[data-theme="dark"] .feature h3,[data-theme="dark"] footer h3,[data-theme="dark"] footer h4{color:#eef4ff!important}
[data-theme="dark"] .section .lead,[data-theme="dark"] .feature p,[data-theme="dark"] .footer p,[data-theme="dark"] .footer a,[data-theme="dark"] .footer small,[data-theme="dark"] .footer li,[data-theme="dark"] .notice{color:#d2def4!important}
.footer{background:radial-gradient(700px 420px at 10% 5%, rgba(11,92,255,.08), transparent 55%),radial-gradient(700px 420px at 90% 25%, rgba(0,179,255,.10), transparent 60%),color-mix(in oklab, var(--surface) 88%, transparent);}
.hero .h-title,.hero .h-sub,.hero .h-eyebrow,.hero .kpi,.hero .kpi b{position:relative;z-index:2}
.hero::before{opacity:.32}
[data-theme="dark"] .hero{background:radial-gradient(700px 500px at 15% 5%, rgba(11,92,255,.16), transparent 48%),radial-gradient(700px 500px at 85% 15%, rgba(0,179,255,.14), transparent 55%),linear-gradient(180deg, #0a1324 0%, #07111f 100%);}
[data-theme="dark"] .hero .h-title{color:#f4f8ff!important}
[data-theme="dark"] .hero .h-sub{color:#d8e4f6!important}
[data-theme="dark"] .hero .kpi{color:#d2def4!important}
[data-theme="dark"] .hero .kpi b{color:#fff!important}
@media (min-width: 901px){
  .nav-toggle{display:none!important}
  .nav-links{display:flex!important}
  .nav-actions .btn{padding:.72rem .95rem}
}
@media (max-width: 900px){
  .container{width:min(100%, calc(100vw - 24px))}
  .nav-inner{grid-template-columns:auto 1fr auto auto;column-gap:.65rem;padding:12px 0}
  .brand-logo.full{display:none}.brand-logo.icononly{display:block}
  .nav-toggle{display:inline-flex!important;width:42px;height:42px;align-items:center;justify-content:center;padding:0;font-size:1.15rem;border-radius:14px;grid-column:4;z-index:3}
  .nav-actions{grid-column:3;justify-self:end;gap:.45rem}
  .nav-actions a{display:none!important}
  .nav-actions .ghost{display:inline-flex!important;padding:.7rem .9rem}
  .nav-links{display:none!important;position:absolute;top:calc(100% + 8px);left:0;right:0;flex-direction:column;align-items:stretch;gap:.5rem;padding:12px;border:1px solid var(--line);border-radius:18px;background: color-mix(in oklab, var(--surface) 94%, transparent);box-shadow: var(--shadow);max-height:min(68vh, 520px);overflow:auto;z-index:90}
  [data-theme="dark"] .nav-links{background: color-mix(in oklab, var(--surface) 96%, transparent)}
  body.nav-open .nav-links{display:flex!important}
  .nav-links a,.nav-links .mobile-only{display:block!important;width:100%;white-space:normal;padding:.95rem 1rem;font-size:1rem;line-height:1.25;background: color-mix(in oklab, var(--surface2) 90%, transparent);border:1px solid var(--line);border-radius:14px;color:var(--text)!important}
  .mobile-only{display:block!important}
  body.nav-open{overflow-x:hidden}
  .hero,.section,.footer,main{overflow-x:hidden}
  .hero-grid{grid-template-columns:1fr!important;gap:18px}
  .h-title{font-size:clamp(2rem, 9vw, 2.8rem)}
  .h-sub{font-size:1.02rem}
  .h-cta{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
  .h-cta .btn:last-child{grid-column:1 / -1}
  .kpi{display:grid;grid-template-columns:1fr;gap:10px}
  .grid-3,.grid-2,.footer-grid{grid-template-columns:1fr!important}
  .feature,.card,.notice{max-width:100%}
  .feature img.icon-3d{width:78px;height:78px}
}
.admin-logo{width:38px;height:38px;border-radius:14px;display:block}
.admin-shell{display:flex!important;min-height:100vh}
.admin-side{flex:0 0 260px;width:260px;overflow:auto}
.admin-main{flex:1 1 auto;min-width:0;overflow:auto}
.table-wrap{width:100%;overflow:auto;-webkit-overflow-scrolling:touch}
.table-wrap table{min-width:900px}
@media (max-width:980px){
  .admin-shell{display:block!important}
  .admin-side{position:fixed;top:0;left:0;transform:translateX(-104%);transition:transform .22s ease;width:280px;max-width:88vw;height:100vh;z-index:70}
  body.admin-open .admin-side{transform:translateX(0)}
  .admin-main{padding:16px}
}


/* --- Realistic hanging lamp pull theme switch --- */
.nav-inner,
.nav-actions,
.admin-main,
.admin-brand,
.card,
.container{ overflow: visible; }

.theme-pull{
  --pull-x: 0;
  --pull-y: 0;
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 52px;
  min-width: 52px;
  margin: 0 .4rem 0 .15rem;
  padding-top: 0;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  transform: translateY(-10px);
  z-index: 8;
}
.theme-pull--fixed{
  position: fixed;
  top: 0;
  right: clamp(18px, 2.3vw, 34px);
  margin: 0;
  transform: none;
  z-index: 90;
}
.theme-pull__ceiling{
  width: 18px;
  height: 8px;
  border-radius: 0 0 10px 10px;
  background: linear-gradient(180deg, #adb4c0 0%, #5b6573 42%, #2f3742 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,.55) inset, 0 2px 6px rgba(0,0,0,.22);
}
.theme-pull__cord{
  width: 2.5px;
  height: 58px;
  margin-top: -1px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(226,232,240,.95) 0%, rgba(158,170,188,.92) 30%, rgba(86,98,117,.95) 68%, rgba(44,52,64,.98) 100%);
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 0 10px rgba(255,255,255,.06);
}
.theme-pull__handle{
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin-top: -1px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: grab;
  touch-action: none;
  transform: translate3d(calc(var(--pull-x) * 1px), calc(var(--pull-y) * 1px), 0) rotate(calc(var(--pull-x) * .8deg));
  transform-origin: top center;
  transition: transform .45s cubic-bezier(.22,.9,.28,1.12), filter .25s ease;
  animation: lamp-idle-sway 5.4s ease-in-out infinite;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.18));
}
.theme-pull__handle:active{ cursor: grabbing; }
.theme-pull.is-dragging .theme-pull__handle{
  animation: none;
  transition: none;
}
.theme-pull__socket{
  width: 12px;
  height: 10px;
  border-radius: 4px 4px 6px 6px;
  background: linear-gradient(180deg, #c1c7d2 0%, #6d7888 40%, #313a46 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 2px 5px rgba(0,0,0,.22);
}
.theme-pull__socket::after{
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 3px;
  border-radius: 999px;
  background: rgba(29,35,44,.6);
}
.theme-pull__bulb{
  position: relative;
  width: 18px;
  height: 23px;
  margin-top: -1px;
  border-radius: 50% 50% 47% 47%;
  background:
    radial-gradient(circle at 34% 26%, rgba(255,255,255,.98) 0%, rgba(255,255,255,.78) 20%, rgba(255,246,204,.35) 34%, transparent 48%),
    radial-gradient(circle at 50% 48%, #fff0a8 0%, #ffd96d 35%, #efb32b 72%, #b87407 100%);
  border: 1px solid rgba(170,112,5,.52);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.3) inset,
    0 3px 8px rgba(255,189,52,.24),
    0 8px 18px rgba(0,0,0,.14);
}
.theme-pull__bulb::before{
  content: "";
  position: absolute;
  inset: 3px 3px auto auto;
  width: 7px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,.82);
  filter: blur(.2px);
}
.theme-pull__bulb::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  transform: translateX(-50%) rotate(45deg);
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: linear-gradient(180deg, #f2ce7d 0%, #bf8a18 100%);
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
}
.theme-pull__hint{
  margin-top: 14px;
  padding: .3rem .58rem;
  border-radius: 999px;
  border: 1px solid rgba(118,130,159,.22);
  background: color-mix(in oklab, var(--surface2) 92%, rgba(255,255,255,.35));
  box-shadow: 0 8px 18px rgba(17,25,40,.08);
  color: var(--muted);
  font-size: .72rem;
  line-height: 1;
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
  transition: transform .3s ease, opacity .2s ease, color .2s ease;
}
.theme-pull.is-dragging .theme-pull__hint{
  transform: translateY(4px);
}
.theme-pull.is-ready .theme-pull__hint{
  color: var(--text);
}
.theme-pull.is-fired .theme-pull__bulb{
  animation: lamp-pop .5s ease;
}
[data-theme="dark"] .theme-pull__ceiling{
  background: linear-gradient(180deg, #d5dce7 0%, #8794a8 36%, #445061 100%);
}
[data-theme="dark"] .theme-pull__cord{
  background: linear-gradient(180deg, rgba(245,248,255,.96) 0%, rgba(195,208,232,.95) 28%, rgba(118,138,168,.95) 62%, rgba(58,72,95,.98) 100%);
  box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 0 12px rgba(143,189,255,.12);
}
[data-theme="dark"] .theme-pull__socket{
  background: linear-gradient(180deg, #dbe7ff 0%, #88a0cf 38%, #3f5483 100%);
}
[data-theme="dark"] .theme-pull__bulb{
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,.96) 0%, rgba(255,255,255,.56) 18%, rgba(181,230,255,.26) 30%, transparent 46%),
    radial-gradient(circle at 50% 48%, #d4f1ff 0%, #7fd5ff 36%, #3790ff 72%, #163e8b 100%);
  border-color: rgba(141,188,255,.5);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.18) inset,
    0 0 26px rgba(102,184,255,.42),
    0 10px 22px rgba(0,0,0,.28);
}
[data-theme="dark"] .theme-pull__bulb::after{
  background: linear-gradient(180deg, #a9dbff 0%, #4f8ef3 100%);
}
[data-theme="dark"] .theme-pull__hint{
  background: color-mix(in oklab, var(--surface2) 94%, rgba(16,24,39,.42));
}

@keyframes lamp-idle-sway{
  0%,100%{ transform: translate3d(calc(var(--pull-x) * 1px), calc(var(--pull-y) * 1px), 0) rotate(-1.8deg); }
  25%{ transform: translate3d(calc(var(--pull-x) * 1px), calc(var(--pull-y) * 1px), 0) rotate(1.4deg); }
  50%{ transform: translate3d(calc(var(--pull-x) * 1px), calc(var(--pull-y) * 1px), 0) rotate(-.9deg); }
  75%{ transform: translate3d(calc(var(--pull-x) * 1px), calc(var(--pull-y) * 1px), 0) rotate(1.6deg); }
}
@keyframes lamp-pop{
  0%{ transform: scale(1); }
  40%{ transform: scale(1.08); }
  100%{ transform: scale(1); }
}

@media (max-width: 1100px){
  .theme-pull{ transform: translateY(-6px); }
  .theme-pull__cord{ height: 50px; }
}
@media (max-width: 900px){
  .theme-pull{
    order: 3;
    width: 42px;
    min-width: 42px;
    margin-left: .2rem;
    transform: translateY(-4px);
  }
  .theme-pull--fixed{
    top: 0;
    right: 18px;
    transform: none;
  }
  .theme-pull__cord{ height: 42px; }
  .theme-pull__hint{ display: none; }
}

/* ===== Briefcase Submit Animation ===== */
.briefcase-submit{ position:relative; overflow:hidden; min-width:170px; }
.briefcase-submit[disabled]{ opacity:.8; cursor:wait; }
.briefcase-submit.is-loading span::after{
  content:"";
  display:inline-block;
  width:14px; height:14px;
  margin-left:10px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.45);
  border-top-color:#fff;
  animation: briefcase-spin .75s linear infinite;
  vertical-align:-2px;
}
@keyframes briefcase-spin{ to{ transform:rotate(360deg);} }

.briefcase-overlay{
  position:fixed;
  inset:0;
  z-index:220;
  pointer-events:none;
  opacity:0;
  transition:opacity .28s ease;
}
.briefcase-overlay.is-visible{ opacity:1; }
.briefcase-overlay__veil{
  position:absolute; inset:0;
  background: radial-gradient(circle at 74% 34%, rgba(11,92,255,.16), transparent 36%), rgba(5,10,22,.18);
  backdrop-filter: blur(4px);
}
.briefcase-overlay__scene{
  position:absolute; right:clamp(18px,4vw,54px); bottom:24px;
  width:min(360px, calc(100vw - 36px)); height:320px;
}
.briefcase-overlay__status{
  position:absolute; right:0; top:0;
  max-width:230px;
  padding:14px 16px;
  border-radius:18px;
  border:1px solid var(--line);
  background: color-mix(in oklab, var(--surface2) 90%, transparent);
  box-shadow: var(--shadow);
  transform: translateY(8px);
  opacity:0;
  transition: transform .28s ease, opacity .28s ease;
}
.briefcase-overlay.is-visible .briefcase-overlay__status{ transform:translateY(0); opacity:1; }
.briefcase-overlay__eyebrow{ display:block; font-size:.72rem; text-transform:uppercase; letter-spacing:.18em; color:var(--muted); margin-bottom:5px; }
.briefcase-overlay__title{ font-weight:900; font-size:1rem; margin-bottom:4px; }
.briefcase-overlay__text{ color:var(--muted); font-size:.92rem; }

.briefcase-agent{
  position:absolute; right:26px; bottom:0;
  width:172px; height:238px;
  transform:translateX(150px);
  transition:transform .85s cubic-bezier(.2,.9,.2,1);
}
.briefcase-overlay.is-active .briefcase-agent{ transform:translateX(0); }
.briefcase-agent__shadow{
  position:absolute; left:34px; bottom:5px; width:100px; height:18px; border-radius:50%;
  background: rgba(10,16,34,.18); filter: blur(10px);
}
.briefcase-agent__head{
  position:absolute; left:78px; top:18px; width:36px; height:40px; border-radius:45% 45% 42% 42%;
  background: linear-gradient(180deg, #fed6bb, #e8ae83);
  box-shadow: inset 0 -5px 0 rgba(0,0,0,.06);
}
.briefcase-agent__hair{
  position:absolute; left:74px; top:10px; width:44px; height:24px; border-radius:60% 60% 35% 35%;
  background: linear-gradient(180deg, #24314f, #10192f);
}
.briefcase-agent__body{
  position:absolute; left:58px; top:58px; width:76px; height:92px; border-radius:26px 26px 18px 18px;
  background: linear-gradient(180deg, #2148bf, #0f235d);
  box-shadow: inset 0 -10px 0 rgba(0,0,0,.1);
}
.briefcase-agent__shirt{
  position:absolute; left:85px; top:72px; width:24px; height:56px; border-radius:12px; background:#f8fbff;
}
.briefcase-agent__tie{
  position:absolute; left:94px; top:77px; width:7px; height:46px;
  background: linear-gradient(180deg, #00b3ff, #0b5cff); clip-path: polygon(50% 0,100% 18%,72% 100%,28% 100%,0 18%);
}
.briefcase-agent__arm{ position:absolute; width:18px; height:70px; border-radius:20px; background:linear-gradient(180deg,#2148bf,#10265b); transform-origin:50% 10px; }
.briefcase-agent__arm--left{ left:52px; top:70px; transform:rotate(26deg); }
.briefcase-agent__arm--right{ left:126px; top:72px; transform:rotate(-18deg); transition:transform .45s ease; }
.briefcase-overlay.is-catching .briefcase-agent__arm--right{ transform:rotate(16deg) translateY(4px); }
.briefcase-overlay.is-closing .briefcase-agent__arm--right{ transform:rotate(-24deg) translateY(-2px); }
.briefcase-agent__leg{ position:absolute; width:22px; height:84px; border-radius:18px; background:linear-gradient(180deg,#17274f,#0a1430); top:144px; }
.briefcase-agent__leg--left{ left:74px; }
.briefcase-agent__leg--right{ left:103px; }
.briefcase-agent__shoe{ position:absolute; width:34px; height:12px; border-radius:12px; background:#10192f; top:218px; }
.briefcase-agent__shoe--left{ left:64px; }
.briefcase-agent__shoe--right{ left:100px; }

.briefcase-prop{
  position:absolute; left:18px; bottom:86px;
  width:116px; height:78px;
  opacity:0;
  transform:translate(-34px,48px) scale(.8) rotate(-14deg);
  transition: transform .75s cubic-bezier(.2,.9,.2,1), opacity .28s ease;
}
.briefcase-overlay.is-catching .briefcase-prop{ opacity:1; transform:translate(70px,-2px) scale(1) rotate(6deg); }
.briefcase-overlay.is-packed .briefcase-prop{ opacity:0; transform:translate(168px,56px) scale(.48) rotate(18deg); }
.briefcase-prop__sheet{
  position:absolute; inset:0; border-radius:20px;
  background: linear-gradient(180deg, #ffffff, #e8f0ff);
  box-shadow: 0 18px 34px rgba(6,20,48,.18);
  border:1px solid rgba(13,62,180,.08);
}
.briefcase-prop__sheet::before, .briefcase-prop__sheet::after{ content:""; position:absolute; left:18px; right:18px; height:3px; border-radius:999px; background:rgba(11,92,255,.18); }
.briefcase-prop__sheet::before{ top:22px; box-shadow:0 12px 0 rgba(11,92,255,.12),0 24px 0 rgba(11,92,255,.10); }
.briefcase-prop__clip{ position:absolute; top:-8px; left:28px; width:44px; height:18px; border-radius:12px; background:linear-gradient(180deg,#4a6de8,#1e3ea4); }

.briefcase-case{
  position:absolute; right:12px; bottom:38px;
  width:118px; height:78px;
  transform-origin:50% 88%;
}
.briefcase-case__body{ position:absolute; inset:16px 0 0; border-radius:16px; background: linear-gradient(180deg,#b77737,#7b461d); box-shadow: 0 20px 26px rgba(0,0,0,.18); }
.briefcase-case__body::before{ content:""; position:absolute; inset:10px; border-radius:10px; border:1px solid rgba(255,255,255,.15); }
.briefcase-case__top{
  position:absolute; inset:0 0 34px; border-radius:14px 14px 10px 10px; background: linear-gradient(180deg,#cb8b4b,#8f5221);
  transform-origin:50% 100%; transition: transform .42s cubic-bezier(.2,.8,.2,1);
  box-shadow: inset 0 -6px 0 rgba(0,0,0,.08);
}
.briefcase-case__top::after{ content:""; position:absolute; top:10px; left:36px; width:46px; height:14px; border:4px solid rgba(58,30,8,.45); border-bottom:none; border-radius:16px 16px 0 0; }
.briefcase-case__lock{ position:absolute; left:50%; top:40px; width:14px; height:10px; margin-left:-7px; border-radius:0 0 6px 6px; background:#f5d18f; z-index:2; }
.briefcase-overlay.is-closing .briefcase-case__top, .briefcase-overlay.is-success .briefcase-case__top{ transform:rotateX(0deg); }
.briefcase-overlay.is-catching .briefcase-case__top{ transform:rotateX(-72deg); }

.briefcase-celebrate{
  position:absolute; right:132px; bottom:114px; display:flex; gap:8px; opacity:0; transform:translateY(10px) scale(.92); transition:all .32s ease;
}
.briefcase-overlay.is-success .briefcase-celebrate{ opacity:1; transform:translateY(0) scale(1); }
.briefcase-celebrate span{ width:8px; border-radius:999px; background:linear-gradient(180deg,var(--brand2),var(--brand)); animation: briefcase-pop 1.2s ease-in-out infinite; }
.briefcase-celebrate span:nth-child(1){ height:28px; animation-delay:.05s; }
.briefcase-celebrate span:nth-child(2){ height:18px; animation-delay:.22s; }
.briefcase-celebrate span:nth-child(3){ height:24px; animation-delay:.11s; }
@keyframes briefcase-pop{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-8px);} }

.briefcase-overlay.is-error .briefcase-overlay__status{ border-color: color-mix(in oklab, var(--danger) 40%, var(--line)); }
.briefcase-overlay.is-success .briefcase-overlay__status{ border-color: color-mix(in oklab, var(--ok) 35%, var(--line)); }

@media (max-width: 640px){
  .briefcase-overlay__scene{ left:18px; right:18px; width:auto; height:350px; }
  .briefcase-overlay__status{ left:0; right:0; max-width:none; }
  .briefcase-agent{ right:4px; bottom:8px; transform:translateX(120px) scale(.92); transform-origin:100% 100%; }
  .briefcase-overlay.is-active .briefcase-agent{ transform:translateX(0) scale(.92); }
  .briefcase-prop{ left:4px; bottom:112px; width:96px; height:70px; }
  .briefcase-case{ right:2px; bottom:54px; transform:scale(.94); transform-origin:100% 100%; }
  .briefcase-celebrate{ right:108px; bottom:132px; }
}

/* ===== Premium brand sections ===== */
.section-head{display:flex;justify-content:space-between;align-items:end;gap:18px;margin-bottom:18px;flex-wrap:wrap}
.page-hero-tight{padding-top:26px}
.hero-premium{position:relative;overflow:hidden}
.hero-premium::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 78% 18%, rgba(11,92,255,.16), transparent 30%),radial-gradient(circle at 18% 78%, rgba(0,196,255,.1), transparent 34%);pointer-events:none}
.premium-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:18px}
.premium-kpis>div,.premium-mini-card,.premium-aside-card,.premium-cta-panel{background:color-mix(in oklab,var(--panel) 90%, transparent);border:1px solid var(--line);border-radius:18px}
.premium-kpis>div{padding:14px 16px}.premium-kpis strong{display:block}.premium-kpis span{display:block;color:var(--muted);font-size:.94rem;margin-top:4px}
.premium-hero-card{padding:18px;overflow:hidden}
.premium-stack{position:relative;min-height:360px}
.premium-stack__window{position:absolute;left:0;right:110px;top:18px;bottom:20px;border-radius:24px;border:1px solid var(--line);background:linear-gradient(180deg,color-mix(in oklab,var(--panel) 95%, transparent),color-mix(in oklab,var(--bg) 85%, transparent));box-shadow:0 24px 60px rgba(5,14,30,.12)}
.premium-stack__bar{height:34px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.03))}
.premium-stack__body{padding:18px}.premium-chip{display:inline-flex;padding:8px 12px;border-radius:999px;background:rgba(11,92,255,.1);border:1px solid rgba(11,92,255,.15);font-weight:700}
.premium-mini-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px}.premium-mini-card{padding:16px}.premium-mini-card small{display:block;color:var(--muted);margin-bottom:4px}.premium-mini-card strong{display:block;font-size:1.02rem}.premium-mini-card span{display:block;color:var(--muted);margin-top:4px}.premium-mini-card.wide{grid-column:1/-1}
.premium-stack__phone{position:absolute;right:6px;bottom:6px;width:138px;height:282px;padding:10px;border-radius:32px;background:#0d1424;border:1px solid rgba(255,255,255,.08);box-shadow:0 24px 50px rgba(0,0,0,.28);transform:rotate(6deg)}
.premium-phone-screen{position:relative;height:100%;border-radius:24px;padding:12px;background:linear-gradient(180deg,#f5f8ff,#deebff)}
body.dark .premium-phone-screen{background:linear-gradient(180deg,#0f1c34,#11284f)}
.premium-phone-card{height:86px;border-radius:18px;background:linear-gradient(135deg,rgba(11,92,255,.18),rgba(0,196,255,.08));margin-bottom:10px}.premium-phone-card.small{height:56px;width:72%}.premium-phone-lines{height:88px;border-radius:18px;background:repeating-linear-gradient(180deg,rgba(11,92,255,.14),rgba(11,92,255,.14) 10px,transparent 10px,transparent 22px)}
.premium-stat-grid .feature,.premium-service-card,.premium-product-card{min-height:100%}
.linkish{display:inline-block;margin-top:10px;font-weight:700;color:var(--brand)}
.product-card-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}.product-metrics-inline{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.product-metrics-inline span,.product-filter-strip a,.product-filter-strip span{padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:color-mix(in oklab,var(--panel) 88%, transparent);font-size:.9rem}
.product-filter-strip{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}.premium-detail-card .detail-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);gap:22px}.premium-highlight{font-size:1.08rem;font-weight:700;margin-bottom:14px}
.premium-aside-card{padding:18px;display:grid;gap:12px;align-content:start}

/* ===== Product explorer ===== */
.product-explorer{position:fixed;inset:0;z-index:1100;display:none}.product-explorer.is-open{display:block}
.product-explorer__backdrop{position:absolute;inset:0;background:rgba(4,10,22,.62);backdrop-filter:blur(10px)}
.product-explorer__dialog{position:relative;z-index:1;width:min(1180px,calc(100vw - 30px));max-height:calc(100vh - 30px);overflow:auto;margin:16px auto;padding:22px;border-radius:28px;border:1px solid var(--line);background:linear-gradient(180deg,color-mix(in oklab,var(--panel) 97%, transparent),color-mix(in oklab,var(--bg) 91%, transparent));box-shadow:0 40px 100px rgba(0,0,0,.24)}
.product-explorer__close{position:absolute;top:14px;right:14px;width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:var(--panel);font-size:1.8rem;line-height:1;cursor:pointer}
.product-explorer__top{display:flex;justify-content:space-between;gap:16px;align-items:start;padding-right:54px;margin-bottom:18px;flex-wrap:wrap}.product-explorer__top p{max-width:760px;color:var(--muted)}
.product-explorer__chips{display:flex;gap:8px;flex-wrap:wrap}
.product-explorer__body{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);gap:20px}
.product-explorer__frame{position:relative;border:1px solid var(--line);border-radius:26px;padding:16px;background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.03));overflow:hidden;min-height:430px}
.product-explorer__frame--mobile{max-width:360px;margin-inline:auto;border-radius:34px;padding:16px 14px 18px;background:#0f1727}
.product-explorer__browserbar{height:34px;border-radius:999px;background:linear-gradient(90deg,rgba(255,255,255,.08),rgba(255,255,255,.03));margin-bottom:14px}
.product-explorer__frame--mobile .product-explorer__browserbar{height:18px;width:38%;margin:0 auto 14px;background:rgba(255,255,255,.14)}
.product-explorer__canvas{display:grid;grid-template-columns:repeat(12,1fr);gap:12px;align-content:start}
.product-explorer__canvas .panel{grid-column:span 4;min-height:108px;padding:14px;border:1px solid var(--line);border-radius:18px;background:color-mix(in oklab,var(--panel) 90%, transparent);box-shadow:0 18px 30px rgba(5,14,30,.08)}
.product-explorer__canvas .panel.wide{grid-column:span 7}.product-explorer__canvas .panel.full{grid-column:1/-1}.product-explorer__canvas .panel h4{margin-bottom:8px}.product-explorer__canvas .panel p{color:var(--muted);font-size:.94rem}
.product-explorer__frame--mobile .product-explorer__canvas{grid-template-columns:1fr}.product-explorer__frame--mobile .product-explorer__canvas .panel,.product-explorer__frame--mobile .product-explorer__canvas .panel.wide,.product-explorer__frame--mobile .product-explorer__canvas .panel.full{grid-column:auto;min-height:86px}
.product-explorer__side{display:grid;gap:18px;align-content:start}.product-explorer__side-title{font-weight:800;margin-bottom:10px}
.product-explorer__list,.product-explorer__screenlist{display:grid;gap:10px}.product-explorer__list div,.product-explorer__screenlist button{padding:12px 14px;border-radius:16px;border:1px solid var(--line);background:color-mix(in oklab,var(--panel) 90%, transparent)}
.product-explorer__screenlist button{text-align:left;cursor:pointer}.product-explorer__screenlist button.is-active{border-color:rgba(11,92,255,.38);box-shadow:0 0 0 2px rgba(11,92,255,.12) inset}

@media (max-width: 980px){
  .premium-kpis,.premium-mini-grid,.premium-detail-card .detail-grid,.product-explorer__body{grid-template-columns:1fr}
  .premium-stack__window{right:0;position:relative;bottom:auto}
  .premium-stack__phone{position:relative;right:auto;bottom:auto;margin:18px auto 0;transform:none}
}
@media (max-width: 720px){
  .product-explorer__dialog{width:min(100vw - 16px,1180px);margin:8px auto;padding:16px;border-radius:22px}
  .product-explorer__frame{min-height:320px}
  .premium-kpis{grid-template-columns:1fr}
}


/* ===== Premium product suite upgrade ===== */
.premium-products-hero__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:18px}
.premium-products-hero__panel{padding:18px; display:grid; gap:8px; background:linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.64)); border:1px solid var(--line)}
body.dark .premium-products-hero__panel{background:linear-gradient(180deg, rgba(17,24,39,.92), rgba(17,24,39,.72))}
.premium-product-card__top{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px}
.premium-tier{font-size:.78rem; color:var(--muted); font-weight:800; letter-spacing:.03em}
.premium-inline-list{display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 0}
.premium-inline-list span,.premium-module-grid span,.premium-canvas-tags span{padding:.5rem .7rem; border-radius:999px; border:1px solid var(--line); background:rgba(255,255,255,.7); font-size:.84rem; color:var(--text)}
body.dark .premium-inline-list span,body.dark .premium-module-grid span,body.dark .premium-canvas-tags span{background:rgba(17,24,39,.72)}
.premium-product-card--flagship{position:relative; overflow:hidden}
.premium-product-card--flagship:before{content:""; position:absolute; inset:auto -20% 70% auto; width:180px; height:180px; border-radius:50%; background:radial-gradient(circle, rgba(59,130,246,.16), transparent 65%)}
.premium-product-grid .premium-product-card{min-height:100%}
.premium-compare-grid .feature{min-height:100%}
.premium-detail-hero{display:flex; align-items:flex-start; justify-content:space-between; gap:16px}
.premium-detail-actions{display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end}
.premium-detail-grid{align-items:start}
.premium-module-grid{display:flex; flex-wrap:wrap; gap:10px}
.premium-screen-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.product-explorer__mini-note{margin-top:10px; color:var(--muted); font-size:.92rem}
.premium-canvas-hero small{display:block; font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-bottom:8px}
.premium-canvas-tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
@media (max-width:980px){
  .premium-products-hero__grid,.premium-screen-grid{grid-template-columns:1fr}
  .premium-detail-hero{flex-direction:column}
  .premium-detail-actions{justify-content:flex-start}
}


/* ===== Interactive Product Demos ===== */
.premium-demo-badge{display:inline-flex;align-items:center;gap:8px;padding:.38rem .72rem;margin:0 0 12px;border-radius:999px;font-size:.74rem;font-weight:800;letter-spacing:.02em;color:var(--text);background:linear-gradient(180deg,rgba(11,92,255,.12),rgba(11,92,255,.04));border:1px solid color-mix(in oklab,var(--brand) 20%, var(--line));}
.product-explorer__frame--interactive{padding:12px;background:linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,255,255,.05));}
.demo-webapp,.demo-mobileapp{width:100%}
.demo-webapp{display:grid;grid-template-columns:220px 1fr;min-height:480px;border-radius:22px;overflow:hidden;background:linear-gradient(180deg,#edf4ff,#f8fbff);color:#0f172a}
.demo-webapp__sidebar{padding:18px 14px;background:linear-gradient(180deg,#0d1b3f,#132a63);display:grid;align-content:start;gap:10px}
.demo-webapp__brand{display:flex;align-items:center;gap:10px;color:#fff;margin-bottom:10px}.demo-webapp__brand .dot{width:10px;height:10px;border-radius:50%;background:#7dd3fc;box-shadow:0 0 14px rgba(125,211,252,.75)}
.demo-webapp__sidebar button{appearance:none;border:none;text-align:left;padding:11px 12px;border-radius:14px;background:rgba(255,255,255,.08);color:rgba(255,255,255,.9);font-weight:700;cursor:pointer}
.demo-webapp__sidebar button.is-active{background:rgba(255,255,255,.16);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.demo-webapp__sidebar button:disabled{opacity:.45;cursor:default}
.demo-webapp__main{padding:18px;display:grid;gap:14px;align-content:start;background:radial-gradient(circle at top right, rgba(56,189,248,.18), transparent 24%), linear-gradient(180deg,#f6f9ff,#edf4ff)}
.demo-webapp__topbar{display:flex;justify-content:space-between;gap:14px;align-items:center}.demo-webapp__topbar small{display:block;color:#5b6780;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:4px}.demo-webapp__topbar h4{margin:0;font-size:1.2rem}.demo-webapp__actions{display:flex;gap:10px;align-items:center}.demo-webapp__actions span{padding:.5rem .75rem;border-radius:999px;background:#fff;border:1px solid rgba(13,27,63,.08);font-weight:700;color:#334155}.demo-webapp__actions button{border:none;border-radius:12px;padding:.6rem .9rem;background:#0b5cff;color:#fff;font-weight:800}
.demo-webapp__hero{padding:16px 18px;border-radius:20px;background:linear-gradient(135deg,#0f2154,#2157c7);color:#fff;box-shadow:0 20px 40px rgba(22,44,106,.22)}.demo-webapp__hero strong{display:block;font-size:1.08rem;margin-bottom:6px}.demo-webapp__hero p{margin:0;color:rgba(255,255,255,.82)}
.demo-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.demo-kpi,.demo-card,.demo-profile-card,.demo-kanban__col{background:rgba(255,255,255,.88);border:1px solid rgba(15,23,42,.06);border-radius:18px;box-shadow:0 12px 28px rgba(15,23,42,.08)}
.demo-kpi{padding:16px;display:grid;gap:6px}.demo-kpi span,.demo-profile-pairs span,.demo-mobile-balance span,.demo-mobile-profile span{font-size:.76rem;text-transform:uppercase;letter-spacing:.08em;color:#64748b;font-weight:800}.demo-kpi strong{font-size:1.4rem}.demo-kpi small{color:#2563eb;font-weight:700}
.demo-split-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:12px}.demo-card{padding:16px}.demo-card h5,.demo-profile-card h5{margin:0 0 12px;font-size:1rem}.demo-bars{display:grid;gap:10px}.demo-bars span{height:12px;border-radius:999px;background:linear-gradient(90deg,#0b5cff,var(--brand2));width:var(--w);display:block}
.demo-timeline{display:grid;gap:12px}.demo-timeline article{display:grid;grid-template-columns:52px 1fr;gap:10px;align-items:start}.demo-timeline strong{color:#0b5cff}.demo-timeline span{display:block;font-weight:700}.demo-timeline small{display:block;color:#64748b}
.demo-kanban{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.demo-kanban__col{padding:14px}.demo-kanban__col header{display:flex;justify-content:space-between;gap:8px;align-items:center;margin-bottom:10px}.demo-kanban__col header span{font-size:.78rem;color:#64748b;font-weight:700}.demo-kanban__col article{padding:12px;border-radius:14px;background:#f8fbff;border:1px solid rgba(15,23,42,.06);margin-bottom:10px}.demo-kanban__col h5{margin:0 0 4px;font-size:1rem}.demo-kanban__col p{margin:0;color:#64748b;font-size:.88rem}
.demo-profile-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:12px}.demo-profile-card{padding:16px}.demo-profile-card--large p{color:#475569}.demo-profile-pairs{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:16px}.demo-profile-pairs div,.demo-mobile-profile div{padding:12px;border-radius:14px;background:#f8fbff;border:1px solid rgba(15,23,42,.06)}.demo-profile-pairs strong,.demo-mobile-profile strong{display:block;margin-top:4px}.demo-profile-card ul{display:grid;gap:10px;padding:0;margin:0;list-style:none}.demo-profile-card li{padding:12px;border-radius:14px;background:#f8fbff;border:1px solid rgba(15,23,42,.06)}.demo-profile-card li span{display:block;margin-top:4px;color:#64748b}

.demo-mobileapp{display:flex;justify-content:center;align-items:center;min-height:520px;padding:8px 0;background:radial-gradient(circle at top, rgba(56,189,248,.16), transparent 28%)}
.demo-phone{width:310px;max-width:100%;padding:12px;border-radius:34px;background:linear-gradient(180deg,#0a1020,#111c37);box-shadow:0 30px 70px rgba(3,7,18,.45), inset 0 0 0 1px rgba(255,255,255,.06)}
.demo-phone__status{display:flex;justify-content:space-between;color:rgba(255,255,255,.82);font-size:.78rem;padding:4px 8px 10px}.demo-phone__screen{min-height:470px;border-radius:26px;padding:16px;background:linear-gradient(180deg,#f8fbff,#eef5ff);color:#0f172a;overflow:hidden}.demo-phone__nav{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:12px 4px 4px}.demo-phone__nav button{border:none;border-radius:14px;padding:.65rem .25rem;background:rgba(255,255,255,.06);color:#dbe7ff;font-weight:700;cursor:pointer}.demo-phone__nav button.is-active{background:rgba(125,211,252,.16);color:#fff}.demo-phone__nav button:disabled{opacity:.38;cursor:default}
.demo-mobile-onboard{display:grid;align-content:start;gap:16px;padding-top:12px}.demo-mobile-onboard__badge{display:inline-flex;justify-self:start;padding:.42rem .7rem;border-radius:999px;background:#dbeafe;color:#1d4ed8;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.demo-mobile-onboard h4{margin:0;font-size:1.55rem;line-height:1.1}.demo-mobile-onboard p{margin:0;color:#475569}.demo-mobile-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.demo-mobile-cards article{padding:14px;border-radius:18px;background:#fff;border:1px solid rgba(15,23,42,.06);box-shadow:0 12px 26px rgba(15,23,42,.06)}.demo-mobile-cards strong{display:block}.demo-mobile-cards span{color:#64748b;font-size:.88rem}.demo-mobile-onboard button{border:none;border-radius:16px;padding:.9rem 1rem;background:linear-gradient(135deg,#0b5cff,#3b82f6);color:#fff;font-weight:800;box-shadow:0 20px 30px rgba(37,99,235,.22)}
.demo-mobile-header{display:grid;gap:4px;margin-bottom:14px}.demo-mobile-header strong{font-size:1.16rem}.demo-mobile-header small{color:#64748b}.demo-mobile-balance{padding:16px;border-radius:22px;background:linear-gradient(135deg,#0f2154,#2664e6);color:#fff;box-shadow:0 18px 34px rgba(15,33,84,.24)}.demo-mobile-balance strong{display:block;font-size:1.8rem;margin:8px 0 4px}.demo-mobile-balance small{color:rgba(255,255,255,.8)}
.demo-mobile-shortcuts{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:14px 0}.demo-mobile-shortcuts button{border:none;border-radius:18px;padding:.9rem .75rem;background:#fff;border:1px solid rgba(15,23,42,.06);font-weight:800;color:#0f172a;box-shadow:0 12px 26px rgba(15,23,42,.06)}
.demo-mobile-list,.demo-mobile-activity{display:grid;gap:10px}.demo-mobile-list article,.demo-mobile-activity article{padding:14px;border-radius:18px;background:#fff;border:1px solid rgba(15,23,42,.06);box-shadow:0 12px 26px rgba(15,23,42,.05)}.demo-mobile-list strong,.demo-mobile-activity strong{display:block}.demo-mobile-list span,.demo-mobile-activity span{display:block;margin-top:4px;color:#64748b}
.demo-mobile-profile{margin-top:12px;padding:14px;border-radius:18px;background:#fff;border:1px solid rgba(15,23,42,.06)}.demo-mobile-profile h5{margin:0 0 10px}

body.dark .premium-demo-badge{background:linear-gradient(180deg,rgba(59,130,246,.18),rgba(59,130,246,.06))}
body.dark .product-explorer__frame--interactive{background:linear-gradient(180deg,rgba(15,23,42,.72),rgba(15,23,42,.38))}

@media (max-width: 980px){
  .demo-webapp{grid-template-columns:1fr;min-height:auto}
  .demo-webapp__sidebar{grid-template-columns:repeat(5,minmax(120px,1fr));overflow:auto}
  .demo-split-grid,.demo-profile-grid,.demo-kpis,.demo-kanban,.demo-mobile-cards{grid-template-columns:1fr}
}
@media (max-width: 640px){
  .premium-demo-badge{font-size:.68rem}
  .demo-webapp__sidebar{display:flex;overflow:auto;padding-bottom:10px}
  .demo-webapp__topbar{flex-direction:column;align-items:flex-start}
  .demo-phone{width:100%}
  .demo-phone__screen{min-height:430px}
}


.product-explorer__live-pill{display:inline-flex;align-items:center;gap:.45rem;padding:.55rem .85rem;border-radius:999px;border:1px solid rgba(11,92,255,.18);background:rgba(11,92,255,.08);font-weight:800}
.live-dot{display:inline-block;width:.58rem;height:.58rem;border-radius:50%;background:#22c55e;box-shadow:0 0 0 0 rgba(34,197,94,.45);animation:livePulse 1.6s infinite}
@keyframes livePulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.45)}70%{box-shadow:0 0 0 10px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
.demo-enter{animation:demoEnter .38s ease}
@keyframes demoEnter{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
.product-explorer__canvas.is-switching{animation:demoEnter .28s ease}
.demo-launcher{display:grid;gap:16px;align-content:center;min-height:440px;padding:26px;border-radius:24px;background:radial-gradient(circle at top right,rgba(56,189,248,.22),transparent 28%),linear-gradient(145deg,#f7fbff,#eaf2ff);color:#0f172a}
.demo-launcher--mobile{min-height:500px;border-radius:28px}
.demo-launcher__badge{display:inline-flex;align-items:center;gap:.55rem;width:max-content;padding:.55rem .9rem;border-radius:999px;background:#fff;border:1px solid rgba(15,23,42,.08);font-weight:800}
.demo-launcher h4{margin:0;font-size:clamp(1.5rem,2vw,2rem)}
.demo-launcher p{margin:0;color:#475569;max-width:60ch}
.demo-launcher__cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.demo-launcher__cards article{padding:14px;border-radius:18px;background:rgba(255,255,255,.74);border:1px solid rgba(15,23,42,.08);box-shadow:0 14px 30px rgba(15,23,42,.08)}
.demo-launcher__cards span{display:block;font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;color:#64748b;margin-bottom:6px}
.demo-launcher__cards strong{font-size:1rem}
.demo-launcher__roles{display:flex;gap:10px;flex-wrap:wrap}
.demo-launcher__roles button{border:none;border-radius:999px;padding:.72rem 1rem;background:#dbeafe;color:#0f172a;font-weight:800;cursor:pointer}
.demo-launcher__roles button.is-active{background:#0b5cff;color:#fff;box-shadow:0 12px 25px rgba(11,92,255,.22)}
.demo-launcher__actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.demo-launcher__actions small{color:#64748b}
.demo-toast{display:flex;align-items:center;gap:.55rem;padding:.72rem .95rem;border-radius:14px;background:rgba(255,255,255,.82);border:1px solid rgba(15,23,42,.08);color:#334155;font-weight:700;box-shadow:0 12px 28px rgba(15,23,42,.08)}
.demo-toast--soft{margin-bottom:12px;background:rgba(11,92,255,.07);border-color:rgba(11,92,255,.08)}
[data-live-value]{transition:transform .28s ease, opacity .28s ease}
[data-live-value].is-updating{transform:translateY(-2px);opacity:.72}
body.dark .product-explorer__live-pill{background:rgba(96,165,250,.14);border-color:rgba(96,165,250,.22)}
body.dark .demo-launcher{background:radial-gradient(circle at top right,rgba(59,130,246,.2),transparent 28%),linear-gradient(145deg,#0d172d,#101c35);color:#e5eefc}
body.dark .demo-launcher p,body.dark .demo-launcher__actions small{color:#9eb0ce}
body.dark .demo-launcher__badge,body.dark .demo-launcher__cards article,body.dark .demo-toast{background:rgba(15,23,42,.72);border-color:rgba(148,163,184,.18);color:#dbe7ff}
body.dark .demo-launcher__roles button{background:rgba(59,130,246,.16);color:#dbe7ff}
body.dark .demo-launcher__roles button.is-active{background:#60a5fa;color:#081120}
@media (max-width: 860px){
  .demo-launcher{min-height:unset;padding:18px}
  .demo-launcher__cards{grid-template-columns:1fr}
}