/* ============================================================
   NEXORA web app — design system (neon dark, violet→magenta)
   ============================================================ */
:root{
  --violet:#8b5cf6; --violet-2:#a78bfa; --magenta:#e754c4; --cyan:#38bdf8;
  --gold:#fbbf24; --green:#34d399; --red:#fb5b6d; --orange:#f97316;
  --grad:linear-gradient(115deg,#8b5cf6 0%,#c651d6 55%,#e754c4 100%);
  --grad-gold:linear-gradient(115deg,#fbbf24,#f97316);

  --bg:#07070f; --bg-2:#0b0b18; --surface:rgba(17,17,34,.72); --surface-solid:#12122a;
  --panel:#14142a; --panel-2:#1b1b36;
  --card:rgba(24,24,48,.55); --brd:rgba(255,255,255,.08); --brd-2:rgba(255,255,255,.15);
  --ink:#f2f2ff; --ink-2:#b7b7dc; --ink-3:#8181ac;
  --glass:rgba(255,255,255,.05);
  --shadow:0 18px 50px rgba(0,0,0,.5);
  --glow:0 0 50px rgba(139,92,246,.35);
  --nav-w:262px; --top-h:64px;
}
:root[data-theme="light"]{
  --bg:#f4f3fb; --bg-2:#ecebf7; --surface:rgba(255,255,255,.82); --surface-solid:#fff;
  --panel:#fff; --panel-2:#f4f2fc;
  --card:rgba(255,255,255,.82); --brd:rgba(20,10,50,.09); --brd-2:rgba(120,80,220,.22);
  --ink:#161029; --ink-2:#4b4670; --ink-3:#7d78a0;
  --glass:rgba(120,80,220,.06);
  --shadow:0 18px 44px rgba(90,60,170,.15);
  --glow:0 0 50px rgba(139,92,246,.22);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:
    radial-gradient(1000px 600px at 100% -5%,rgba(231,84,196,.1),transparent 60%),
    radial-gradient(900px 560px at 0% 2%,rgba(139,92,246,.12),transparent 58%),
    var(--bg);
  color:var(--ink);font-family:"Outfit",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  line-height:1.55;-webkit-font-smoothing:antialiased;min-height:100vh}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:"Unbounded","Outfit",sans-serif;font-weight:800;line-height:1.1;letter-spacing:-.02em}
::selection{background:var(--magenta);color:#fff}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.gradg{background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent}
.mono{font-variant-numeric:tabular-nums}
.muted{color:var(--ink-3)}.dim{color:var(--ink-2)}
.up{color:var(--green)}.down{color:var(--red)}

/* ---------------- SHELL ---------------- */
.shell{display:grid;grid-template-columns:var(--nav-w) 1fr;min-height:100vh}
.sidebar{position:sticky;top:0;height:100vh;overflow-y:auto;padding:16px 12px;background:var(--surface);
  backdrop-filter:blur(16px);border-right:1px solid var(--brd);z-index:40;display:flex;flex-direction:column}
.sidebar::-webkit-scrollbar{width:6px}.sidebar::-webkit-scrollbar-thumb{background:var(--brd-2);border-radius:6px}
.brand{display:flex;align-items:center;gap:10px;padding:8px 10px;font-family:"Unbounded";font-weight:700;font-size:19px}
.logo{width:32px;height:32px;border-radius:9px;background:var(--grad);display:grid;place-items:center;
  font-family:"Unbounded";font-weight:900;color:#fff;font-size:17px;box-shadow:0 6px 18px rgba(139,92,246,.5)}
.logo.sm{width:24px;height:24px;font-size:13px;border-radius:7px}
.role-chip{margin:4px 10px 10px;font-size:11.5px;font-weight:700;color:var(--violet-2);background:var(--glass);
  border:1px solid var(--brd);border-radius:999px;padding:5px 11px;display:inline-block}
.sidebar nav{display:flex;flex-direction:column;gap:2px}
.nav-sec{font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3);font-weight:800;padding:14px 12px 5px}
.nav-i{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:11px;color:var(--ink-2);
  font-weight:600;font-size:14px;transition:.15s;position:relative}
.nav-i:hover{background:var(--glass);color:var(--ink)}
.nav-i.active{color:var(--ink);background:linear-gradient(100deg,rgba(139,92,246,.2),transparent)}
.nav-i.active::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:3px;background:var(--grad)}
.nav-i .i{width:20px;text-align:center;font-size:15px;flex:none}
.s-foot{margin-top:auto;padding:14px 10px 6px;font-size:11px;color:var(--ink-3)}
.btn-signout{background:var(--glass);border:1px solid var(--brd);color:var(--ink-2);width:100%}
.btn-signout:hover{color:var(--red);border-color:var(--red)}

.main{min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:12px;height:var(--top-h);padding:0 22px;
  background:var(--surface);backdrop-filter:blur(16px);border-bottom:1px solid var(--brd);transition:box-shadow .2s}
.topbar.scrolled{box-shadow:0 8px 24px rgba(0,0,0,.25)}
.burger{display:none;flex-direction:column;gap:4px;width:40px;height:40px;border:1px solid var(--brd);background:var(--glass);
  border-radius:11px;cursor:pointer;align-items:center;justify-content:center}
.burger div{width:16px;height:2px;background:var(--ink);border-radius:2px;transition:.2s}
.pagetitle{font-family:"Unbounded";font-weight:700;font-size:16px}
.spacer{flex:1}
.cmdk-trigger{display:flex;align-items:center;gap:8px;background:var(--glass);border:1px solid var(--brd);border-radius:11px;
  padding:8px 13px;color:var(--ink-3);font-size:13px;cursor:pointer;font-family:inherit}
.cmdk-trigger:hover{border-color:var(--brd-2)}
.kbd{font-size:10px;font-weight:700;background:var(--brd);padding:2px 6px;border-radius:5px;color:var(--ink-2)}
.wallet-chip{display:flex;align-items:center;gap:6px;background:var(--glass);border:1px solid var(--brd);border-radius:999px;
  padding:7px 13px;font-weight:700;font-size:13px;color:var(--gold)}
.icon-btn{width:40px;height:40px;border-radius:11px;border:1px solid var(--brd);background:var(--glass);color:var(--ink);
  cursor:pointer;display:grid;place-items:center;font-size:16px;position:relative;transition:.15s}
.icon-btn:hover{border-color:var(--violet)}
.icon-btn .dot{position:absolute;top:8px;right:9px;width:8px;height:8px;border-radius:50%;background:var(--red);border:2px solid var(--surface-solid)}
.notif-wrap{position:relative}
.notif-panel{position:absolute;top:52px;right:0;width:300px;background:var(--panel);border:1px solid var(--brd-2);
  border-radius:16px;box-shadow:var(--shadow);padding:14px;opacity:0;transform:translateY(-8px);pointer-events:none;transition:.2s;z-index:60}
.notif-panel.open{opacity:1;transform:none;pointer-events:auto}
.notif-panel h4{font-size:14px;margin-bottom:10px}
.ni{display:flex;gap:10px;padding:9px 8px;border-radius:10px}
.ni:hover{background:var(--glass)}
.ni .e{font-size:18px}.ni b{font-size:13px;display:block}.ni small{color:var(--ink-3);font-size:11.5px}
.who{display:flex;align-items:center;gap:9px}
.avatar{width:38px;height:38px;border-radius:50%;background:var(--grad);display:grid;place-items:center;color:#fff;font-weight:800;font-size:14px}
.who-t b{font-size:13.5px;display:block;line-height:1.1}.who-t small{color:var(--ink-3);font-size:11.5px}
.lang-wrap{position:relative}
.lang-trigger{display:flex;align-items:center;gap:7px;background:var(--glass);border:1px solid var(--brd);border-radius:11px;padding:8px 12px;color:var(--ink);cursor:pointer;font-family:inherit;font-weight:700;font-size:13px;transition:.15s}
.lang-trigger:hover{border-color:var(--violet)}
.lang-ic{font-size:14px}
.lang-panel{position:absolute;top:48px;right:0;min-width:170px;background:var(--panel);border:1px solid var(--brd-2);border-radius:14px;box-shadow:var(--shadow);padding:8px;opacity:0;transform:translateY(-8px);pointer-events:none;transition:.18s;z-index:60}
.lang-panel.open{opacity:1;transform:none;pointer-events:auto}
.lang-item{width:100%;display:flex;align-items:center;gap:10px;text-align:left;background:none;border:none;color:var(--ink-2);font:inherit;font-size:13px;padding:9px 10px;border-radius:10px;cursor:pointer}
.lang-flag{width:18px;text-align:center;flex:none;font-size:15px}
.lang-txt{flex:1}
.lang-item:hover,.lang-item.on{background:var(--glass);color:var(--ink)}
@media(max-width:720px){.who-t{display:none}.cmdk-trigger .kbd{display:none}}

.content{padding:22px;max-width:1240px;width:100%;margin:0 auto;flex:1}
.page-head{margin-bottom:20px}
.page-head h1{font-size:26px}
.page-head p{color:var(--ink-2);margin-top:5px;font-size:15px}
.appfoot{border-top:1px solid var(--brd);padding:20px 22px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  color:var(--ink-3);font-size:12.5px}
.fbrand{font-family:"Unbounded";font-weight:700;display:flex;align-items:center;gap:7px}
.flinks{display:flex;gap:16px;margin-left:auto}.flinks a:hover{color:var(--ink)}

/* scrim for mobile sidebar */
.scrim{position:fixed;inset:0;background:rgba(4,4,12,.6);backdrop-filter:blur(3px);z-index:39;opacity:0;pointer-events:none;transition:.25s}
.scrim.open{opacity:1;pointer-events:auto}

/* ---------------- BUTTONS ---------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font-weight:700;font-size:14px;
  padding:10px 17px;border-radius:12px;border:1px solid transparent;cursor:pointer;transition:.18s;font-family:inherit}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 8px 22px rgba(199,81,214,.36)}
.btn-ghost,.btn-glass{background:var(--glass);color:var(--ink);border-color:var(--brd-2)}
.btn-ghost:hover,.btn-glass:hover{border-color:var(--violet)}
.btn-gold{background:var(--grad-gold);color:#1a1000;box-shadow:0 8px 20px rgba(249,115,22,.34)}
.btn-sm{padding:7px 12px;font-size:12.5px;border-radius:10px}
.btn-lg{padding:13px 22px;font-size:15px;border-radius:14px}
.btn.full{width:100%}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none}
.link{color:var(--violet-2);font-weight:600;font-size:13px}

/* ---------------- LAYOUT HELPERS ---------------- */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.row{display:flex;align-items:center;gap:12px}
.between{display:flex;align-items:center;justify-content:space-between;gap:12px}
.wrap{flex-wrap:wrap}
.mt{margin-top:16px}.mt24{margin-top:24px}

/* ---------------- PANELS / CARDS ---------------- */
.panel,.card{background:var(--card);border:1px solid var(--brd);border-radius:18px;padding:20px;backdrop-filter:blur(12px)}
.card.hover,.panel.hover{transition:.2s}.card.hover:hover,.panel.hover:hover{transform:translateY(-4px);border-color:var(--brd-2)}
.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.panel-head h2{font-size:17px}
.section-title{display:flex;align-items:center;justify-content:space-between;margin:24px 0 14px}
.section-title h2{font-size:18px}
.kicker{font-size:11.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--magenta)}

/* ---------------- DASH HERO ---------------- */
.dash-hero{border-radius:22px;padding:24px;position:relative;overflow:hidden;border:1px solid var(--brd);
  background:radial-gradient(60% 120% at 85% 0%,rgba(231,84,196,.22),transparent 60%),radial-gradient(50% 120% at 5% 10%,rgba(139,92,246,.3),transparent 60%),linear-gradient(130deg,#1c1636,#100a20)}
.dh-main{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.dh-ava{width:64px;height:64px;border-radius:20px;background:var(--grad);display:grid;place-items:center;font-size:32px;flex:none}
.dh-main h2{font-size:24px}.dh-main p{color:var(--ink-2);font-size:14.5px;max-width:52ch}
.dh-cta{margin-left:auto;display:flex;gap:10px;flex-wrap:wrap}
.pulse-chip{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--green);
  background:var(--glass);border:1px solid var(--brd);padding:4px 11px;border-radius:999px}
.pulse-chip .lv{width:7px;height:7px;border-radius:50%;background:var(--green);animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(52,211,153,.5)}70%{box-shadow:0 0 0 8px rgba(52,211,153,0)}100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}}
/* .dash-hero's background is a fixed dark gradient regardless of theme, so its text must stay light in both themes (.gradg headings clip to a gradient and are already theme-safe) */
.dash-hero .dh-main h2:not(.gradg){color:#fff}
.dash-hero .dh-main p{color:rgba(255,255,255,.72)}
.dh-stats{display:flex;gap:26px;flex-wrap:wrap;margin-top:20px;position:relative;z-index:2}
.dh-stats>div b{font-family:"Unbounded";font-size:20px;display:block}
.dh-stats>div small{color:var(--ink-3);font-size:12px}
.dash-hero .dh-stats>div b{color:#fff}
.dash-hero .dh-stats>div small{color:rgba(255,255,255,.6)}

/* ---------------- QUICK ACTIONS ---------------- */
.qa-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px;margin:18px 0}
.qa3d{position:relative;background:var(--card);border:1px solid var(--brd);border-radius:18px;padding:18px;overflow:hidden;transition:.2s;display:block}
.qa3d:hover{transform:translateY(-4px);border-color:var(--brd-2)}
.qa3d .qe{font-size:30px;display:block}
.qa3d b{display:block;margin-top:12px;font-size:15px}
.qa3d small{color:var(--ink-3);font-size:12.5px}
.qa3d .arr{position:absolute;top:18px;right:18px;color:var(--ink-3);transition:.2s}
.qa3d:hover .arr{transform:translateX(4px);color:var(--violet-2)}
.qa3d::after{content:"";position:absolute;top:-30%;right:-20%;width:120px;height:120px;border-radius:50%;opacity:.5;filter:blur(6px)}
.qa3d.sel{border-color:var(--violet-2);box-shadow:0 0 0 1px var(--violet-2)}
.qa3d .sel-badge{position:absolute;top:14px;left:14px;width:22px;height:22px;border-radius:50%;background:var(--grad);color:#fff;font-size:12px;display:none;align-items:center;justify-content:center;z-index:1}
.qa3d.sel .sel-badge{display:flex}
.qa3d.blue::after{background:radial-gradient(circle,rgba(56,189,248,.4),transparent 70%)}
.qa3d.violet::after{background:radial-gradient(circle,rgba(139,92,246,.4),transparent 70%)}
.qa3d.pink::after{background:radial-gradient(circle,rgba(231,84,196,.4),transparent 70%)}
.qa3d.green::after{background:radial-gradient(circle,rgba(52,211,153,.4),transparent 70%)}
.qa3d.amber::after{background:radial-gradient(circle,rgba(251,191,36,.4),transparent 70%)}
.qa3d.gold::after{background:radial-gradient(circle,rgba(251,191,36,.4),transparent 70%)}
.qa3d.dark::after{background:radial-gradient(circle,rgba(160,120,255,.35),transparent 70%)}

/* ---------------- KPI CARDS ---------------- */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px}
.kpi{position:relative;background:var(--card);border:1px solid var(--brd);border-radius:18px;padding:18px;overflow:hidden}
.kpi .ki{width:40px;height:40px;border-radius:12px;background:var(--glass);display:grid;place-items:center;font-size:19px}
.kpi .klbl{color:var(--ink-3);font-size:12.5px;margin-top:12px}
.kpi .knum{font-family:"Unbounded";font-weight:800;font-size:26px;margin-top:2px}
.kpi .kdelta{font-size:12px;font-weight:700;margin-top:6px}
.kpi .spark{display:flex;align-items:flex-end;gap:3px;height:34px;margin-top:12px}
.kpi .spark i{flex:1;border-radius:3px 3px 0 0;background:var(--grad);opacity:.85}
.kpi.green .ki,.kpi.green .knum{color:var(--green)}
.kpi.violet .ki,.kpi.violet .knum{color:var(--violet-2)}
.kpi.amber .ki,.kpi.amber .knum{color:var(--gold)}
.kpi.blue .ki,.kpi.blue .knum{color:var(--cyan)}
.kpi.pink .ki,.kpi.pink .knum{color:var(--magenta)}

/* ---------------- LIST ROWS / FEED ---------------- */
.lrow{display:flex;align-items:center;gap:13px;padding:12px 4px;border-bottom:1px solid var(--brd)}
.lrow:last-child{border-bottom:0}
.ava{width:42px;height:42px;border-radius:12px;background:var(--grad);display:grid;place-items:center;font-size:19px;color:#fff;flex:none}
.ava.round{border-radius:50%}
.lrow .meta{min-width:0;flex:1}
.lrow .meta b{font-size:14px;display:flex;align-items:center;gap:6px}
.lrow .meta small{color:var(--ink-3);font-size:12px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.feed{display:flex;flex-direction:column}
.fitem{display:flex;align-items:center;gap:12px;padding:11px 4px;border-bottom:1px solid var(--brd)}
.fitem:last-child{border-bottom:0}
.fitem .fe{width:36px;height:36px;border-radius:10px;background:var(--glass);display:grid;place-items:center;font-size:17px}
.fitem.green .fe{background:rgba(52,211,153,.14)}.fitem.amber .fe{background:rgba(251,191,36,.14)}
.fitem .fc{flex:1}.fitem .fc b{font-size:13.5px;display:block}.fitem .fc small{color:var(--ink-3);font-size:12px}
.fitem .ft{color:var(--ink-3);font-size:11.5px}

/* ---------------- CHIPS / BADGES / PILLS ---------------- */
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{font-size:12.5px;font-weight:600;background:var(--glass);border:1px solid var(--brd);padding:6px 12px;border-radius:999px;color:var(--ink-2);cursor:pointer;transition:.15s}
.chip:hover{color:var(--ink)}.chip.on{background:var(--grad);color:#fff;border-color:transparent}
.pills{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.pill-f{font-size:12.5px;font-weight:600;background:var(--glass);border:1px solid var(--brd);padding:8px 13px;border-radius:11px;cursor:pointer}
.pill-f.on{background:var(--grad);color:#fff;border-color:transparent}
.badge{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;padding:3px 8px;border-radius:999px}
.badge.v{color:var(--violet-2);background:rgba(139,92,246,.16)}
.badge.g{color:var(--green);background:rgba(52,211,153,.14)}
.badge.gold{color:var(--gold);background:rgba(251,191,36,.15)}
.badge.r{color:var(--red);background:rgba(251,91,109,.15)}
.badge.b{color:var(--cyan);background:rgba(56,189,248,.15)}
.badge.live{color:#fff;background:var(--red);display:inline-flex;align-items:center;gap:5px}
.pulse-dot{width:7px;height:7px;border-radius:50%;background:currentColor;animation:pulse 1.6s infinite}

/* ---------------- INFO ICON / POPOVER ---------------- */
.info-wrap{position:relative;display:inline-flex;vertical-align:middle}
.info-ic{width:20px;height:20px;border-radius:50%;background:var(--glass);border:1px solid var(--brd);color:var(--ink-3);
  font-size:12px;font-weight:800;font-family:inherit;cursor:pointer;display:grid;place-items:center;flex:none;transition:.15s}
.info-ic:hover{color:var(--ink);border-color:var(--violet)}
.info-pop{position:fixed;top:0;left:0;width:280px;max-width:80vw;background:var(--panel);border:1px solid var(--brd-2);
  border-radius:14px;box-shadow:var(--shadow);padding:14px 16px;font-size:12.5px;line-height:1.55;color:var(--ink-2);
  z-index:20;opacity:0;transform:translateY(-6px);pointer-events:none;transition:.18s}
.info-pop.open{opacity:1;transform:none;pointer-events:auto}
.info-pop>b:first-child{color:var(--ink);display:block;margin-bottom:5px;font-size:13px}

/* ---------------- CAMERA STAGE (create.php) ---------------- */
.camicon{width:44px;height:44px;border-radius:12px;background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.16);display:grid;place-items:center;font-size:19px;color:#fff;cursor:pointer;transition:.15s}
.camicon:hover{border-color:rgba(255,255,255,.4)}
.camicon.sm{width:36px;height:36px;font-size:15px;border-radius:10px}
.camicon.active{background:var(--grad);border-color:transparent}
.cover-pick{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px}
.cover-pick>div{flex:none;width:50px;aspect-ratio:9/16;border-radius:9px;border:2px solid transparent;cursor:pointer;display:grid;place-items:center;font-size:15px;color:#fff;transition:.15s}
.cover-pick>div.on{border-color:var(--violet-2);box-shadow:0 0 0 1px var(--violet-2)}

/* ---------------- STATS / RINGS / GOALS ---------------- */
.stat{background:var(--card);border:1px solid var(--brd);border-radius:16px;padding:16px}
.stat .n{font-family:"Unbounded";font-weight:800;font-size:23px}
.stat .l{font-size:12px;color:var(--ink-3);margin-top:2px}
.rings{display:flex;gap:20px;flex-wrap:wrap}
.ring-wrap{text-align:center}
.pring{--p:60;width:84px;height:84px;border-radius:50%;display:grid;place-items:center;margin:0 auto 8px;
  background:conic-gradient(var(--violet) calc(var(--p)*1%),var(--glass) 0)}
.pring::before{content:"";position:absolute;width:62px;height:62px;border-radius:50%;background:var(--panel)}
.pring b{position:relative;font-family:"Unbounded";font-size:15px}
.pring.green{background:conic-gradient(var(--green) calc(var(--p)*1%),var(--glass) 0)}
.pring.amber{background:conic-gradient(var(--gold) calc(var(--p)*1%),var(--glass) 0)}
.ring-wrap small{font-size:12px;color:var(--ink-3)}
.goal{margin-top:12px}
.gh{display:flex;justify-content:space-between;font-size:13px;margin-bottom:6px}
.gbar{height:9px;border-radius:999px;background:var(--glass);border:1px solid var(--brd);overflow:hidden}
.gbar>i{display:block;height:100%;background:var(--grad);border-radius:999px}
.gbar.violet>i{background:var(--violet)}
.bar{height:10px;border-radius:999px;background:var(--glass);border:1px solid var(--brd);overflow:hidden}
.bar>i{display:block;height:100%;border-radius:999px;background:var(--grad)}
.bar.gold>i{background:var(--grad-gold)}

/* ---------------- FORMS ---------------- */
.form-row{margin-bottom:14px}
.form-row label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-2);margin-bottom:6px}
.input,input.input,select.input,textarea.input{width:100%;background:var(--glass);border:1px solid var(--brd);border-radius:12px;
  padding:12px 14px;color:var(--ink);font-family:inherit;font-size:14px;outline:none;transition:.15s}
.input:focus{border-color:var(--violet)}
select.input{appearance:none;-webkit-appearance:none;-moz-appearance:none}
select.input option{background:var(--panel);color:var(--ink)}
select.input option:checked{background:var(--violet);color:#fff}
.sw{width:44px;height:26px;border-radius:999px;background:var(--glass);border:1px solid var(--brd-2);position:relative;cursor:pointer;transition:.2s;flex:none;display:inline-block}
.sw::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:var(--ink-3);transition:.2s}
.sw.on{background:var(--grad);border-color:transparent}.sw.on::after{left:20px;background:#fff}

/* ---------------- TABLE ---------------- */
.table-wrap{overflow-x:auto;border:1px solid var(--brd);border-radius:16px}
table.tbl{width:100%;border-collapse:collapse;font-size:13.5px;min-width:560px}
table.tbl th{text-align:left;padding:12px 14px;color:var(--ink-3);font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid var(--brd)}
table.tbl td{padding:12px 14px;border-bottom:1px solid var(--brd)}
table.tbl tr:last-child td{border-bottom:0}
table.tbl tr:hover td{background:var(--glass)}

/* ---------------- TABS ---------------- */
.tabs{display:flex;gap:6px;background:var(--glass);border:1px solid var(--brd);border-radius:13px;padding:5px;overflow-x:auto}
.tabs::-webkit-scrollbar{height:0}
.tab{flex:1;min-width:max-content;text-align:center;padding:9px 15px;border-radius:9px;font-weight:700;font-size:13px;color:var(--ink-3);cursor:pointer;border:none;background:none;font-family:inherit;white-space:nowrap}
.tab:hover{color:var(--ink)}.tab.on{background:var(--grad);color:#fff}
.tab-panel{display:none;animation:fade .35s}.tab-panel.on{display:block}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------------- AI COPILOT + CMDK ---------------- */
.cp-fab{position:fixed;bottom:24px;right:24px;width:56px;height:56px;border-radius:18px;border:none;background:var(--grad);
  color:#fff;font-size:24px;cursor:pointer;box-shadow:0 12px 30px rgba(199,81,214,.5);z-index:70;transition:.2s}
.cp-fab:hover{transform:translateY(-3px) scale(1.05)}
.copilot{position:fixed;bottom:92px;right:24px;width:360px;max-width:calc(100vw - 32px);background:var(--panel);
  border:1px solid var(--brd-2);border-radius:20px;box-shadow:var(--shadow);z-index:70;overflow:hidden;
  opacity:0;transform:translateY(16px) scale(.97);pointer-events:none;transition:.24s}
.copilot.open{opacity:1;transform:none;pointer-events:auto}
.cp-head{display:flex;align-items:center;gap:11px;padding:14px 16px;border-bottom:1px solid var(--brd)}
.cp-ava{width:38px;height:38px;border-radius:12px;background:var(--grad);display:grid;place-items:center;font-size:18px;position:relative}
.cp-ava i{position:absolute;bottom:-1px;right:-1px;width:11px;height:11px;border-radius:50%;background:var(--green);border:2px solid var(--panel)}
.cp-id b{font-size:14px;display:block}.cp-id small{font-size:11.5px;color:var(--ink-3);display:flex;align-items:center;gap:5px}
.cp-id small i{width:7px;height:7px;border-radius:50%;background:var(--green);display:inline-block}
.cp-head .x{margin-left:auto;background:none;border:none;color:var(--ink-3);font-size:22px;cursor:pointer}
.cp-log{max-height:280px;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px}
.cp-msg{max-width:82%;padding:10px 13px;border-radius:14px;font-size:13.5px;line-height:1.45}
.cp-msg.ai{align-self:flex-start;background:var(--glass);border:1px solid var(--brd);border-bottom-left-radius:4px}
.cp-msg.me{align-self:flex-end;background:var(--grad);color:#fff;border-bottom-right-radius:4px}
.cp-suggest{padding:0 16px;font-size:11px;font-weight:700;color:var(--ink-3);text-transform:uppercase;letter-spacing:.1em}
.cp-chips{display:flex;flex-wrap:wrap;gap:7px;padding:8px 16px 12px}
.cp-chip{font-size:12px;font-weight:600;background:var(--glass);border:1px solid var(--brd);border-radius:999px;padding:6px 11px;cursor:pointer;color:var(--ink-2)}
.cp-chip:hover{color:var(--ink);border-color:var(--violet)}
.copilot form{display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--brd)}
.copilot input{flex:1;background:var(--glass);border:1px solid var(--brd);border-radius:11px;padding:10px 13px;color:var(--ink);font-family:inherit;outline:none}
.copilot button[type=submit]{background:var(--grad);border:none;color:#fff;width:40px;border-radius:11px;cursor:pointer;font-size:15px}

.cmdk{position:fixed;inset:0;z-index:90;background:rgba(4,4,12,.6);backdrop-filter:blur(6px);display:none;align-items:flex-start;justify-content:center;padding-top:14vh}
.cmdk.open{display:flex}
.cmdk-box{width:100%;max-width:560px;background:var(--panel);border:1px solid var(--brd-2);border-radius:18px;box-shadow:var(--shadow);overflow:hidden}
.cmdk-box>input{width:100%;border:none;background:none;outline:none;padding:18px 20px;color:var(--ink);font-family:inherit;font-size:16px;border-bottom:1px solid var(--brd)}
.cmdk-list{max-height:340px;overflow-y:auto;padding:8px}
.cmdk-item{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:11px;cursor:pointer;font-size:14px}
.cmdk-item.sel,.cmdk-item:hover{background:var(--glass)}
.cmdk-item .ci{font-size:17px}
.settings-item{width:100%;text-align:left;background:none;border:0;font-family:inherit;color:inherit}
.cmdk-hint{display:flex;gap:16px;padding:10px 16px;border-top:1px solid var(--brd);font-size:11.5px;color:var(--ink-3)}

/* ---------------- VIDEO VIEWER ---------------- */
.viewer{position:fixed;inset:0;z-index:95;background:rgba(4,4,12,.88);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;padding:24px}
.viewer.open{display:flex}
.viewer-box{width:100%;max-width:380px;aspect-ratio:9/16;border-radius:22px;border:1px solid var(--brd-2);box-shadow:var(--shadow);overflow:hidden;position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  background:radial-gradient(70% 45% at 35% 30%,rgba(231,84,196,.5),transparent 70%),radial-gradient(60% 50% at 75% 75%,rgba(56,189,248,.4),transparent 70%),linear-gradient(180deg,#301447,#120a22)}
.viewer-close{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.18);color:#fff;font-size:18px;cursor:pointer;z-index:2;display:grid;place-items:center}
.viewer-nav{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.18);color:#fff;font-size:18px;cursor:pointer;display:grid;place-items:center;z-index:2}
.viewer-nav.prev{left:-58px}.viewer-nav.next{right:-58px}
@media(max-width:640px){.viewer-nav{display:none}}
.viewer-play{position:absolute;inset:0;display:grid;place-items:center;font-size:0;cursor:pointer;background:none;border:0;padding:0}
.viewer-play span{width:74px;height:74px;border-radius:50%;background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.3);display:grid;place-items:center;font-size:26px;color:#fff}
.viewer-top{position:absolute;top:14px;left:14px;right:60px;display:flex;align-items:center;gap:10px;z-index:2}
.viewer-actions{position:absolute;right:12px;bottom:96px;display:flex;flex-direction:column;gap:16px;align-items:center;z-index:2}
.viewer-actions button,.viewer-actions a{background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.18);color:#fff;width:46px;height:46px;border-radius:50%;font-size:18px;cursor:pointer;display:grid;place-items:center;text-decoration:none}
.viewer-actions small{color:#fff;font-size:11px;font-weight:700;text-align:center;margin-top:-10px}
.viewer-meta{position:relative;z-index:2;padding:16px 90px 20px 16px;color:#fff}
.viewer-meta small{color:rgba(255,255,255,.65)}

/* ---------------- TOAST ---------------- */
.toast-wrap{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:100;display:flex;flex-direction:column;gap:10px;align-items:center;pointer-events:none}
.toast{background:var(--panel);border:1px solid var(--brd-2);border-radius:14px;padding:12px 18px;font-weight:600;font-size:14px;box-shadow:var(--shadow);display:flex;align-items:center;gap:10px;animation:tin .35s}
.toast .ti{width:26px;height:26px;border-radius:8px;background:var(--grad);display:grid;place-items:center;color:#fff;font-size:14px}
.toast.leaving{animation:tout .3s forwards}
@keyframes tin{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes tout{to{opacity:0;transform:translateY(16px)}}

/* ---------------- REVEAL ---------------- */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s cubic-bezier(.2,.8,.2,1),transform .6s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}

.empty{text-align:center;color:var(--ink-3);padding:40px 20px}
.empty .e-ic{font-size:40px;opacity:.6}

/* ---------------- RESPONSIVE ---------------- */
@media(max-width:1000px){.kpis,.grid4{grid-template-columns:repeat(2,1fr)}.grid3{grid-template-columns:1fr}}
@media(max-width:860px){
  .shell{grid-template-columns:1fr}
  .sidebar{position:fixed;left:0;top:0;bottom:0;width:280px;transform:translateX(-100%);transition:transform .28s cubic-bezier(.2,.8,.2,1)}
  .sidebar.open{transform:none}
  .burger{display:flex}
  .grid2{grid-template-columns:1fr}
}
@media(max-width:560px){
  .kpis,.grid4{grid-template-columns:1fr}
  .content{padding:16px}
  .dh-cta{margin-left:0;width:100%}
  .cmdk-trigger span.kbd{display:none}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto}.reveal{opacity:1;transform:none}}