/* =========================================================================
   StreamTiler "3D" theme layer (2026-09-25) — shared by every page except
   index.html (which has its own css/home3d.css).
   Load it LAST in <head> (after css/style.css and after any page <style>),
   so its :root tokens beat both style.css's StreamNova tokens and the
   per-page "Horizon" light overrides on dashboard.html / admin.html. Every
   shared component in style.css is token-driven, so re-tokening restyles it;
   the rules below it only upgrade the few shared pieces that need glass,
   depth or a literal-colour fix. js/st3d.js paints the Three.js background
   (canvas at z-index -2, behind all content) and adds html.st3d-fx, which
   gates the scroll reveals below. Page markup, ids and functions are
   untouched.
   ========================================================================= */
:root{
  color-scheme: dark;
  --void:#07061a;
  --surface-1:rgba(13,11,38,.86);
  --surface-2:rgba(20,17,54,.84);
  --surface-3:rgba(32,27,84,.86);
  --surface-4:rgba(66,56,140,.55);
  --border:rgba(170,155,255,.2);
  --border-soft:rgba(170,155,255,.12);
  --text-hi:#efecff;
  --text-mid:#b3aed6;
  --text-low:#8a84b3;
  --violet:#8a6bff;  --violet-dim:rgba(138,107,255,.16);
  --cyan:#4fd8f0;    --cyan-dim:rgba(79,216,240,.13);
  --coral:#ff4d6a;   --coral-dim:rgba(255,77,106,.14);
  --amber:#f5b041;   --amber-dim:rgba(245,176,65,.14);
  --green:#3ddc97;   --green-dim:rgba(61,220,151,.14);
  --blue:#5b7bff;
  --radius-sm:12px; --radius:16px; --radius-lg:22px;
  --shadow-tile:0 1px 0 rgba(255,255,255,.05) inset, 0 24px 48px -24px rgba(0,0,0,.85), 0 0 0 1px rgba(138,107,255,.04);
  --shadow-tile-hover:0 1px 0 rgba(255,255,255,.07) inset, 0 34px 70px -28px rgba(80,60,220,.55), 0 0 0 1px rgba(138,107,255,.12);
  --shadow-pop:0 40px 100px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(138,107,255,.14);
  --st-grad:linear-gradient(135deg,#9d84ff 0%,#5b7bff 55%,#2454e6 100%);
  --st-btn:linear-gradient(160deg,#8a6bff,#3730a3);
  --st-glass:blur(14px) saturate(130%);
}
html{background:var(--void)}
body{background:var(--void) !important;color:var(--text-hi);-webkit-font-smoothing:antialiased}
::selection{background:rgba(138,107,255,.45);color:#fff}
:focus-visible{outline:2px solid var(--violet);outline-offset:2px}

/* ---- background canvas + scrim injected by js/st3d.js ---- */
#st3d-bg{position:fixed;inset:0;width:100%;height:100%;z-index:-2;display:block;pointer-events:none}
#st3d-scrim{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 30%,rgba(7,6,26,.35) 0%,rgba(7,6,26,.72) 70%,rgba(7,6,26,.85) 100%)}
[data-st3d="app"] #st3d-scrim{background:rgba(7,6,26,.62)}

/* ---- brand + top bar (public pages) ---- */
.topbar{background:rgba(7,6,26,.55) !important;backdrop-filter:var(--st-glass);-webkit-backdrop-filter:var(--st-glass);border-bottom:1px solid var(--border-soft);top:env(safe-area-inset-top,0px)}
.brand{font-weight:800}
.brand .mark::before{content:none}
.brand .mark{box-shadow:none;width:26px;height:26px;border-radius:0;transform:perspective(80px) rotateX(18deg) rotateY(-18deg);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23a68fff'/%3E%3Cstop offset='1' stop-color='%236a7dff'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%238f7bff'/%3E%3Cstop offset='1' stop-color='%235b7bff'/%3E%3C/linearGradient%3E%3ClinearGradient id='c' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%235b7bff'/%3E%3Cstop offset='1' stop-color='%232f5cf0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='3' y='3' width='26' height='26' rx='6' fill='url(%23a)'/%3E%3Crect x='35' y='3' width='26' height='26' rx='6' fill='%23ff3b5c'/%3E%3Crect x='3' y='35' width='26' height='26' rx='6' fill='url(%23b)'/%3E%3Crect x='35' y='35' width='26' height='26' rx='6' fill='url(%23c)'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.brand span{background:var(--st-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.grad,.hero h1 .grad{background:var(--st-grad) !important;-webkit-background-clip:text !important;background-clip:text !important;color:transparent !important}

/* ---- buttons ---- */
.btn{background:var(--st-btn);color:#fff;border-radius:var(--radius-sm);box-shadow:0 10px 28px -10px rgba(138,107,255,.8),inset 0 1px 0 rgba(255,255,255,.25)}
.btn:hover{transform:translateY(-2px);filter:none;box-shadow:0 16px 40px -12px rgba(138,107,255,.95),inset 0 1px 0 rgba(255,255,255,.25)}
.btn.secondary{background:rgba(255,255,255,.04);border:1px solid rgba(170,155,255,.34);color:var(--text-hi);box-shadow:none}
.btn.secondary:hover{background:rgba(255,255,255,.09)}
.btn.ghost{background:transparent;color:var(--text-mid);box-shadow:none}
.btn.ghost:hover{background:rgba(255,255,255,.06);color:var(--text-hi)}
.btn.danger{background:linear-gradient(160deg,#ff7a8c,#c81e3a);box-shadow:0 10px 26px -10px rgba(255,77,106,.8),inset 0 1px 0 rgba(255,255,255,.25)}

/* ---- glass surfaces with depth ---- */
.tile,.plan-tile,.auth-card,.blog-card,.mode-card,.kpi,.panel{backdrop-filter:var(--st-glass);-webkit-backdrop-filter:var(--st-glass)}
.tile,.plan-tile,.auth-card{background:linear-gradient(160deg,var(--surface-3),var(--surface-2));border-color:var(--border)}
.tile:hover,.plan-tile:hover{border-color:rgba(170,155,255,.36)}
.plan-tile.featured{border-color:rgba(157,132,255,.7);box-shadow:0 0 0 1px rgba(157,132,255,.3),0 40px 90px -36px rgba(138,107,255,.85)}
.plan-tile .price{background:linear-gradient(180deg,#fff,#c9bcff);-webkit-background-clip:text;background-clip:text;color:transparent}
.plan-tile .featured-tag{background:var(--st-btn)}
.auth-card{box-shadow:0 50px 120px -40px rgba(80,60,220,.65),0 0 0 1px rgba(157,132,255,.16);transform-style:preserve-3d}
.st3d-tilt{transition:transform .25s ease-out,box-shadow .25s ease,border-color .25s ease;will-change:transform}

/* ---- modal ---- */
.modal-backdrop{background:rgba(5,4,18,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.modal{background:linear-gradient(160deg,#211c58,#110e30);border-color:rgba(170,155,255,.3);animation:st3d-pop .35s cubic-bezier(.2,.8,.2,1)}
@keyframes st3d-pop{from{opacity:0;transform:perspective(900px) rotateX(-12deg) translateY(16px) scale(.97)}to{opacity:1;transform:none}}

/* ---- forms ---- */
input,select,textarea{background:rgba(8,7,26,.72);border-color:var(--border);color:var(--text-hi)}
input:focus,select:focus,textarea:focus{border-color:var(--violet);box-shadow:0 0 0 3px rgba(138,107,255,.22)}
select option{background:#141136;color:var(--text-hi)}
input[type="checkbox"],input[type="radio"]{accent-color:var(--violet)}

/* ---- tables + badges ---- */
th{color:var(--text-low)}
tr:hover td{background:rgba(138,107,255,.06) !important}
.badge.stopped{border:1px solid var(--border)}

/* ---- marketing sections ---- */
.hero h1{letter-spacing:-.03em}
.section-block h2{letter-spacing:-.02em}
.feature-tile .icon-badge{background:rgba(138,107,255,.18);border:1px solid rgba(170,155,255,.34)}
.blog-card{background:linear-gradient(160deg,var(--surface-3),var(--surface-2)) !important;border-color:var(--border) !important}
.legal-page{position:relative}
.legal-toc{background:var(--surface-2);border-color:var(--border);backdrop-filter:var(--st-glass);-webkit-backdrop-filter:var(--st-glass)}
footer.site-footer{background:rgba(7,6,26,.82) !important;border-top:1px solid var(--border-soft);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.st-consent{background:rgba(20,17,54,.95) !important;border-color:rgba(170,155,255,.34) !important;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}

/* ---- scroll reveals (public pages; js/st3d.js adds .st3d-rv / .st3d-in) ---- */
.st3d-fx .st3d-rv{transition:transform .8s cubic-bezier(.2,.8,.2,1),opacity .8s ease;transform:perspective(900px) translateY(36px) rotateX(-18deg);opacity:.15;transform-origin:50% 100%}
.st3d-fx .st3d-rv.st3d-in{transform:none;opacity:1}

/* ================= app shells (dashboard.html / admin.html) ================= */
/* creator dashboard */
.dash-side{background:rgba(10,9,30,.72) !important;backdrop-filter:var(--st-glass);-webkit-backdrop-filter:var(--st-glass);border-right-color:var(--border-soft) !important}
.dash-top{background:rgba(7,6,26,.6) !important;backdrop-filter:var(--st-glass);-webkit-backdrop-filter:var(--st-glass);border-bottom-color:var(--border-soft) !important}
/* sidebar logo: swap the old cube icon for the same 4-tile mark as every header */
.dash-brand .logo-cube{box-shadow:none;border-radius:0;transform:perspective(90px) rotateX(18deg) rotateY(-18deg);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23a68fff'/%3E%3Cstop offset='1' stop-color='%236a7dff'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%238f7bff'/%3E%3Cstop offset='1' stop-color='%235b7bff'/%3E%3C/linearGradient%3E%3ClinearGradient id='c' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%235b7bff'/%3E%3Cstop offset='1' stop-color='%232f5cf0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='3' y='3' width='26' height='26' rx='6' fill='url(%23a)'/%3E%3Crect x='35' y='3' width='26' height='26' rx='6' fill='%23ff3b5c'/%3E%3Crect x='3' y='35' width='26' height='26' rx='6' fill='url(%23b)'/%3E%3Crect x='35' y='35' width='26' height='26' rx='6' fill='url(%23c)'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.dash-brand .logo-cube svg{display:none}
.dash-brand .brand-txt span{background:var(--st-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.snav:hover{background:rgba(255,255,255,.05)}
.kpi{background:linear-gradient(160deg,var(--surface-3),var(--surface-2)) !important;transform-style:preserve-3d}
.kpi::after{opacity:.9 !important}
.wal-bal.earn{border-color:rgba(79,216,240,.3)}
/* admin panel */
.st3-shell{background:transparent !important}
.st3-rail{background:rgba(10,9,30,.72) !important;backdrop-filter:var(--st-glass);-webkit-backdrop-filter:var(--st-glass);border-right-color:var(--border-soft) !important}
.st3-topbar{background:rgba(7,6,26,.55);backdrop-filter:var(--st-glass);-webkit-backdrop-filter:var(--st-glass);border-bottom-color:var(--border-soft) !important}
.st3-topbar-title{background:linear-gradient(180deg,#fff,#c9bcff);-webkit-background-clip:text;background-clip:text;color:transparent}

/* app sections get a small 3D entrance each time a tab opens */
[data-st3d="app"] .section.active{animation:st3d-tab .45s cubic-bezier(.2,.8,.2,1)}
@keyframes st3d-tab{from{opacity:0;transform:perspective(1200px) rotateX(-6deg) translateY(14px)}to{opacity:1;transform:none}}

/* scrollbars */
*{scrollbar-color:rgba(138,107,255,.4) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:rgba(138,107,255,.35);border-radius:10px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-track{background:transparent}

@media (prefers-reduced-motion:reduce){
  .modal,[data-st3d="app"] .section.active{animation:none}
  .st3d-tilt{transition:none}
}