/* Repol design tokens + polish layer (loads after dark.css) */
:root[data-theme=dark]{
  --bg:#0B0B14;--panel:#14141F;--soft:#1C1C2B;--line:#2A2A3D;--ink:#F5F5FA;--muted:#A3A3BA;
  --accent:#7C5CFF;--accent-ink:#B8A6FF;--input:#14141F;--hover:#1C1C2B;
  --brand-grad:linear-gradient(90deg,#7C5CFF,#FF4F9A);--glow:0 8px 32px #7C5CFF73;
  color-scheme:dark}
:root{--brand-grad:linear-gradient(90deg,#7C5CFF,#FF4F9A);--glow:0 8px 28px #7C5CFF40}
html,body{font-family:Vazirmatn,Tahoma,sans-serif}

/* ---------- Ambient background ---------- */
body{background:var(--bg)}
:root[data-theme=dark] body:before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(900px 500px at 85% -10%,#7C5CFF26,transparent 60%),radial-gradient(700px 420px at 0% 100%,#FF4F9A1A,transparent 60%)}

/* ---------- Brand: gradient primary actions with glow ---------- */
:root[data-theme=dark] .btn.primary,.btn.primary{background:var(--brand-grad);border-color:transparent;color:#fff;box-shadow:var(--glow);position:relative;overflow:hidden}
.btn.primary:hover{filter:brightness(1.08);transform:translateY(-1px);box-shadow:0 10px 36px #7C5CFF66}
.btn.primary:active{transform:translateY(0) scale(.98)}
.btn.primary:after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,#ffffff40 50%,transparent 65%);transform:translateX(-120%);transition:transform .7s}
.btn.primary:hover:after{transform:translateX(120%)}
.brand-mark{background:var(--brand-grad);box-shadow:var(--glow)}
.brand-word i{color:#FF4F9A}

/* ---------- Surfaces ---------- */
:root[data-theme=dark] .card,:root[data-theme=dark] .stat{background:var(--panel);border-color:var(--line);border-radius:20px}
:root[data-theme=dark] .stat,:root[data-theme=dark] .card{transition:transform .25s cubic-bezier(.2,.8,.2,1),border-color .25s,box-shadow .25s}
:root[data-theme=dark] .stat:hover{transform:translateY(-3px);border-color:#7C5CFF66;box-shadow:0 14px 40px #7C5CFF1f}
:root[data-theme=dark] .sidebar{background:var(--panel);border-color:var(--line)}
:root[data-theme=dark] .topbar{background:#0B0B14cc;border-color:var(--line)}
:root[data-theme=dark] .nav button.active{background:linear-gradient(270deg,#7C5CFF38,transparent);color:#fff}
:root[data-theme=dark] .nav button.active:before{background:var(--brand-grad);width:3px}
:root[data-theme=dark] .nav button.active svg{color:#B8A6FF}
.nav button{transition:background .2s,color .2s}
:root[data-theme=dark] .nav button:hover{background:var(--soft);color:var(--ink)}
:root[data-theme=dark] .stat-icon{background:#7C5CFF26;color:#B8A6FF;border-radius:12px}
:root[data-theme=dark] input,:root[data-theme=dark] textarea,:root[data-theme=dark] select{background:var(--input);border-color:var(--line);border-radius:14px}
:root[data-theme=dark] input:focus,:root[data-theme=dark] textarea:focus,:root[data-theme=dark] select:focus{border-color:#7C5CFF;box-shadow:0 0 0 4px #7C5CFF26}
:root[data-theme=dark] .auth-tabs button.active{background:var(--soft);color:#fff}

/* ---------- Charts ---------- */
:root[data-theme=dark] .chart .area{fill:url(#areaGrad);fill:#7C5CFF33}
:root[data-theme=dark] .chart .curve{stroke:#9B7BFF;stroke-width:3}
:root[data-theme=dark] .chart .curve2{stroke:#FF4F9A99}
:root[data-theme=dark] .chart line{stroke:var(--line);stroke-dasharray:2 6}
:root[data-theme=dark] .chart text{fill:#8b8ba3}

/* ---------- Auth ---------- */
.auth-story{background-color:#0f0a22;background-image:radial-gradient(600px 400px at 15% 20%,#7C5CFF8c,transparent 65%),radial-gradient(500px 420px at 90% 95%,#FF4F9A59,transparent 62%),radial-gradient(360px 260px at 20% 100%,#FFB54730,transparent 65%)}
:root[data-theme] .story-heading h1 em{color:#C9B8FF}


/* ---------- Scrollbar ---------- */
:root[data-theme=dark]{scrollbar-color:#2A2A3D transparent}

/* ---------- 404 ---------- */
.nf{min-height:100vh;display:grid;place-items:center;padding:24px;position:relative;overflow:hidden;background:var(--bg,#0B0B14);color:var(--ink,#F5F5FA)}
.nf-glow{position:absolute;width:720px;height:720px;border-radius:50%;background:radial-gradient(circle,#7C5CFF59,#FF4F9A26 45%,transparent 70%);filter:blur(40px);animation:nfPulse 7s ease-in-out infinite}
.nf-card{position:relative;max-width:520px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px;animation:repolRise .6s cubic-bezier(.2,.8,.2,1) both}
.nf-code{font-size:clamp(96px,22vw,168px);font-weight:900;line-height:1;color:#B8A6FF;text-shadow:0 10px 50px #7C5CFF99,0 0 120px #FF4F9A55;margin-top:18px}
.nf h1{font-size:clamp(22px,4vw,30px);font-weight:800}
.nf p{color:var(--muted,#A3A3BA);line-height:2;font-size:14px}
.nf-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:8px}
@keyframes nfPulse{50%{transform:scale(1.12);opacity:.8}}

/* =====================================================================
   Typography — Estedad carries headings & numbers, Vazirmatn the UI
   ===================================================================== */
h1,h2,h3,.stat-value,.plan-price,.wallet-amount,.brand-word,.nf-code,.story-heading h1,.days-counter{font-family:Estedad,Vazirmatn,sans-serif}
h1,h2{letter-spacing:-.01em;text-wrap:balance}
.stat-value,.plan-price,.wallet-amount,td{font-variant-numeric:tabular-nums}
.notice-copy,.notice-card p,.drawer-notice p{font-family:Shabnam,Vazirmatn,sans-serif;line-height:2}
::selection{background:#7C5CFF59;color:#fff}
:root[data-theme=dark] input,:root[data-theme=dark] textarea{caret-color:#B8A6FF}
:root[data-theme=dark] ::-webkit-scrollbar{width:10px;height:10px}
:root[data-theme=dark] ::-webkit-scrollbar-thumb{background:#2A2A3D;border-radius:99px;border:3px solid var(--bg)}
:root[data-theme=dark] ::-webkit-scrollbar-track{background:transparent}
:focus-visible{outline-color:#9B7BFF!important}

/* =====================================================================
   Light — cursor-following spotlight on surfaces (set by motion.js)
   ===================================================================== */
.stat,.card:not(.wallet-visual):not(.command-hero),.plan-card:not(.featured),.integration-card,.template-card{--mx:-400px;--my:-400px}
:root[data-theme=dark] .stat,:root[data-theme=dark] .card:not(.wallet-visual):not(.command-hero),:root[data-theme=dark] .plan-card:not(.featured){background-image:radial-gradient(380px circle at var(--mx) var(--my),#7C5CFF1c,transparent 60%)}
:root[data-theme=dark] .stat:hover,:root[data-theme=dark] .card:hover,:root[data-theme=dark] .plan-card:hover{border-color:#7C5CFF55}
.stats .stat{animation:statIn .6s cubic-bezier(.16,1,.3,1) both}
.stats .stat:nth-child(2){animation-delay:60ms}.stats .stat:nth-child(3){animation-delay:120ms}.stats .stat:nth-child(4){animation-delay:180ms}
@keyframes statIn{from{opacity:0;translate:0 10px;filter:blur(4px)}}

/* =====================================================================
   Feedback
   ===================================================================== */
.btn:active,.icon-btn:active,.nav button:active{scale:.97;transition-duration:.08s}
.switch{transition:background .25s cubic-bezier(.16,1,.3,1)}
.switch:before{transition:translate .3s cubic-bezier(.16,1,.3,1)}
:root[data-theme=dark] .switch{background:#2A2A3D}
:root[data-theme=dark] .switch.on{background:var(--brand-grad);box-shadow:0 0 16px #7C5CFF66}
.modal,.drawer{animation:sheetIn .38s cubic-bezier(.16,1,.3,1) both}
.drawer{animation-name:drawerIn}
.scrim{animation:fadeIn .25s ease both;backdrop-filter:blur(6px)}
@keyframes sheetIn{from{opacity:0;scale:.96;filter:blur(6px)}}
@keyframes drawerIn{from{opacity:0;translate:-24px 0}}
@keyframes fadeIn{from{opacity:0}}
#toast.show{animation:toastIn .45s cubic-bezier(.16,1,.3,1)}
@keyframes toastIn{from{filter:blur(6px);scale:.94}}
.notification-trigger i{animation:ping 2.4s cubic-bezier(.16,1,.3,1) infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 #FF4F9A99}70%,100%{box-shadow:0 0 0 8px #FF4F9A00}}

/* Sidebar: keep the whole list reachable */
.nav-scroll{padding-bottom:12px;mask-image:linear-gradient(#000 calc(100% - 28px),transparent)}

/* =====================================================================
   Page transitions (View Transitions API) — content cross-fades with
   a short blur, the active nav pill slides to its new place.
   ===================================================================== */
.content{view-transition-name:content}
.nav button.active{view-transition-name:nav-active}
::view-transition-old(content){animation:vtOut .16s ease-in both}
::view-transition-new(content){animation:vtIn .34s cubic-bezier(.16,1,.3,1) both}
::view-transition-group(nav-active){animation-duration:.38s;animation-timing-function:cubic-bezier(.16,1,.3,1)}
@keyframes vtOut{to{opacity:0;filter:blur(4px)}}
@keyframes vtIn{from{opacity:0;translate:0 8px;filter:blur(6px)}}
.vt-theme::view-transition-old(root),.vt-theme::view-transition-new(root){animation:none;mix-blend-mode:normal}

/* =====================================================================
   Focal moment — the sign-in story plays a live DM flow on loop:
   comment arrives → line draws → engine detects → line → reply lands.
   ===================================================================== */
.auth-story{--mx:30%;--my:40%}
.auth-story:after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(420px circle at var(--mx) var(--my),#B8A6FF22,transparent 60%);transition:background .2s}
.flow-scene>.float-card,.flow-scene>.flow-line{animation-duration:8s!important;animation-delay:0s!important;animation-iteration-count:infinite;animation-timing-function:cubic-bezier(.16,1,.3,1);animation-fill-mode:both}
.flow-scene>.float-card.comment{animation-name:flowComment}
.flow-scene>.flow-line:not(.second){animation-name:flowLine1}
.flow-scene>.float-card.engine{animation-name:flowEngine;background:linear-gradient(135deg,#7C5CFFeb,#9B6BFFeb)}
.flow-scene>.flow-line.second{animation-name:flowLine2}
.flow-scene>.float-card.reply{animation-name:flowReply}
.flow-spark{animation:sparkTwinkle 4s ease-in-out infinite}
@keyframes flowComment{0%{opacity:0;translate:0 14px;filter:blur(8px)}8%,86%{opacity:1;translate:0 0;filter:blur(0)}94%,100%{opacity:0;filter:blur(6px)}}
@keyframes flowLine1{0%,10%{clip-path:inset(0 0 100% 0)}22%,86%{clip-path:inset(0 0 0 0);opacity:1}94%,100%{opacity:0}}
@keyframes flowEngine{0%,22%{opacity:0;scale:.9;filter:blur(8px)}30%{opacity:1;scale:1.03;filter:blur(0);box-shadow:0 0 0 0 #7C5CFF99}38%,86%{opacity:1;scale:1;filter:blur(0);box-shadow:0 0 0 14px #7C5CFF00}94%,100%{opacity:0;filter:blur(6px)}}
@keyframes flowLine2{0%,38%{clip-path:inset(0 0 100% 0)}48%,86%{clip-path:inset(0 0 0 0);opacity:1}94%,100%{opacity:0}}
@keyframes flowReply{0%,48%{opacity:0;translate:0 14px;filter:blur(8px)}56%,86%{opacity:1;translate:0 0;filter:blur(0)}94%,100%{opacity:0;filter:blur(6px)}}
@keyframes sparkTwinkle{50%{opacity:.35;scale:.8;rotate:45deg}}
.auth-story.is-paused *{animation-play-state:paused!important}

/* =====================================================================
   Reduced motion: keep state & colour feedback, drop spatial movement
   ===================================================================== */
@media (prefers-reduced-motion:reduce){
  .flow-scene>.float-card,.flow-scene>.flow-line,.flow-spark,.stats .stat,.notification-trigger i,.nf-glow{animation:none!important}
  .modal,.drawer,#toast.show{animation:fadeIn .2s ease both!important}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}
:root[data-motion=off] .flow-scene>*,:root[data-motion=off] .stats .stat{animation:none!important}

/* =====================================================================
   Live layer (live.js): scenario gate, inbox, admin payment settings
   ===================================================================== */
.live-rule-extra{display:grid;gap:2px}
.gate-toggle{margin-top:18px;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--soft);align-items:flex-start!important;transition:border-color .2s,background .2s}
.gate-toggle:has(input:checked){border-color:#7C5CFF88;background:linear-gradient(135deg,#7C5CFF1f,transparent)}
.gate-toggle span{display:grid;grid-template-columns:auto 1fr;column-gap:8px;align-items:center}
.gate-toggle span svg{color:#B8A6FF;grid-row:span 2}
.gate-toggle b{font-size:13px;font-weight:700}
.gate-toggle small{grid-column:2;color:var(--muted);font-size:11px}
.gate-fields[hidden],.comment-fields[hidden]{display:none}
.trend.down{color:#F87171!important;background:#F871711f!important}
.btn.danger{color:#F87171!important}
.btn.danger:hover{background:#F8717114!important}
.otp-input{font-size:26px!important;letter-spacing:10px;text-align:center;font-family:Estedad,Vazirmatn,sans-serif;height:60px!important}
.live-biz{margin-top:16px}
.live-biz h3{display:flex;gap:8px;align-items:center;margin-bottom:10px}
.file-meta>span{display:flex;gap:6px}
.chat-compose .btn{padding:0 14px}