/* =====================================================================
   ChiefOS "Glass" theme - frosted white/grey surfaces, graphite type, ONE neon accent (acid lime).
   Loaded last: it re-skins every component from the earlier sheets.
   ===================================================================== */
:root{
  --acc:#B8FF2C;            /* the only colour */
  --acc-2:#9BE000;          /* deeper lime for text-on-light / outlines */
  --acc-soft:rgba(184,255,44,.22);
  --acc-glow:0 8px 30px rgba(168,240,20,.45);

  --bg:#E8EBF0; --bg2:#F3F5F8; --panel:#FFFFFF;
  --ink:#0B0E14; --dim:#586070; --dim2:#8C94A3;
  --hair:rgba(11,14,20,.10); --hair2:rgba(11,14,20,.18);
  --line:rgba(11,14,20,.10); --line2:rgba(11,14,20,.18);
  --glass:rgba(255,255,255,.58); --glass-hi:rgba(255,255,255,.82);
  --blur:blur(22px) saturate(1.5);
  --edge:inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(255,255,255,.35);
  --lift:0 1px 2px rgba(20,28,45,.05), 0 14px 44px rgba(20,28,45,.10);
  --lift-hi:0 2px 4px rgba(20,28,45,.06), 0 24px 60px rgba(20,28,45,.16);

  /* old candy tokens -> neutral glass / lime so every component inherits the palette */
  --pink:var(--acc); --yellow:var(--acc); --mint:var(--acc); --sky:#DDE2EA; --violet:#151A24; --orange:#CBD2DD;
  --accent:var(--acc); --accent-ink:var(--ink);
  --danger:#E5384F; --ok:#4FA300;
  --radius:14px; --radius-lg:24px;
  --shadow:var(--lift);
  --font:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --display:"Unbounded","Inter",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  --sidebar-w:96px;
}

body{
  background:
    radial-gradient(1100px 700px at 12% -8%, #FFFFFF 0%, rgba(255,255,255,0) 60%),
    radial-gradient(900px 640px at 100% 8%, rgba(184,255,44,.20) 0%, rgba(184,255,44,0) 62%),
    radial-gradient(900px 700px at 70% 115%, #D5DAE3 0%, rgba(213,218,227,0) 62%),
    linear-gradient(160deg, #F4F6F9 0%, #E4E8EE 55%, #DCE1E9 100%);
  background-attachment:fixed; color:var(--ink); font-size:14.5px;
}
body::before{ /* faint engineering grid */
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.55;
  background-image:linear-gradient(rgba(11,14,20,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(11,14,20,.045) 1px, transparent 1px);
  background-size:56px 56px; -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 30%, #000 30%, transparent 78%); mask-image:radial-gradient(ellipse 80% 70% at 50% 30%, #000 30%, transparent 78%);
}
h1,h2,h3,h4{font-family:var(--display); letter-spacing:-.035em; font-weight:700}
::selection{background:var(--acc); color:var(--ink)}
.mono{font-family:var(--mono)}

/* ---------- glass surfaces ---------- */
.panel,.plan-card,.modal-card,.bento-card,.stage,.auth-card,.wallet-panel,.hero-card,.batch-row,.step,.packs,
.ticket-list-wrap,.faq details,.invoice-list,.landing-tool,.kc-card,.stat,.tier,.ctx,.manual-tx,.ref-card,.video-hero,.video-soon{
  background:var(--glass); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  border:1px solid rgba(255,255,255,.8); box-shadow:var(--edge), var(--lift), 0 0 0 1px var(--hair);
  border-radius:var(--radius-lg);
}
.panel,.auth-card,.modal-card,.stage,.plan-card,.packs{border-radius:26px}

/* ---------- type scale details ---------- */
.mono,.balance-pill,.clock,.usage-pill{font-family:var(--mono)}

/* ---------- boot ---------- */
.boot{background:linear-gradient(160deg,#F4F6F9,#E1E5EC)}
.boot-title{font-family:var(--display); letter-spacing:-.04em}
.boot-title span,.auth-title span,.landing-brand b{background:var(--acc); color:var(--ink); padding:0 .28em; border-radius:.3em; margin-left:.12em}
.boot-dots i,.boot-dots i:nth-child(2),.boot-dots i:nth-child(3){background:var(--ink)}
.boot-dots i:nth-child(2){background:var(--acc); box-shadow:var(--acc-glow)}

/* ---------- buttons ---------- */
.btn{
  background:var(--glass-hi); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur); color:var(--ink);
  border:1px solid var(--hair2); border-radius:14px; box-shadow:var(--edge), 0 1px 2px rgba(20,28,45,.08), 0 6px 18px rgba(20,28,45,.08);
  font-family:var(--font); font-weight:600; letter-spacing:-.005em; padding:11px 20px;
  transition:transform .18s cubic-bezier(.2,.9,.3,1.2), box-shadow .2s, background .2s;
}
.btn:hover{transform:translateY(-1px); background:#fff; box-shadow:var(--edge), 0 2px 4px rgba(20,28,45,.08), 0 14px 30px rgba(20,28,45,.14)}
.btn:active{transform:translateY(1px)}
.btn.primary{
  background:linear-gradient(180deg,#CBFF5E 0%, var(--acc) 55%, #A6F020 100%); color:var(--ink); text-shadow:none;
  border:1px solid rgba(80,130,0,.35); box-shadow:inset 0 1px 0 rgba(255,255,255,.7), var(--acc-glow);
}
.btn.primary:hover{background:linear-gradient(180deg,#D8FF80 0%, #C4FF4A 55%, #B0F52A 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 10px 38px rgba(168,240,20,.6)}
.btn.lg{padding:15px 28px; font-size:16px; border-radius:16px}
.btn.sm{padding:8px 16px; font-size:13.5px; border-radius:12px}
.btn:disabled{background-image:none; opacity:.5; animation:none}
.btn:disabled.primary{opacity:.55}
.mini{background:var(--glass-hi); border:1px solid var(--hair2); color:var(--ink); border-radius:10px; font-weight:600; box-shadow:var(--edge)}
.mini:hover{background:var(--acc); color:var(--ink)}

/* ---------- form fields ---------- */
select,input[type=text],input[type=number],input[type=file],input[type=password],textarea,
#form-setup input,#form-login input,#form-signup input,#form-recover input,#form-recover textarea,.modal-card input[type=password],.modal-card input[type=text]{
  background:rgba(255,255,255,.7); border:1px solid var(--hair2); border-radius:13px; color:var(--ink);
  box-shadow:inset 0 1px 2px rgba(20,28,45,.06); font-weight:500; transition:box-shadow .15s, border-color .15s, background .15s;
}
select:focus,input:focus,textarea:focus,#form-login input:focus,#form-signup input:focus,#form-recover input:focus,#form-recover textarea:focus{
  outline:none; background:#fff; border-color:rgba(100,170,0,.7); box-shadow:0 0 0 4px rgba(184,255,44,.35);
}
input[type=file]::file-selector-button{background:var(--ink); color:var(--acc); border:0; border-radius:10px; padding:6px 14px; font-weight:600}
::placeholder{color:var(--dim2)}
.field{color:var(--ink); font-weight:600}
.field-note,.auth-sub{color:var(--dim)}
input[type=checkbox]{accent-color:#0B0E14}

/* ---------- sidebar dock ---------- */
.sidebar{
  left:14px; top:14px; bottom:14px; width:calc(var(--sidebar-w) - 14px); border-radius:28px; padding:14px 0 12px;
  background:var(--glass); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  border:1px solid rgba(255,255,255,.85); box-shadow:var(--edge), var(--lift), 0 0 0 1px var(--hair);
}
.sidebar-logo img{width:44px;height:44px; filter:drop-shadow(0 6px 14px rgba(20,28,45,.18))}
.nav-item{border-radius:16px; color:var(--dim); border:1px solid transparent; min-height:54px}
.nav-item[data-tip]::after{font-weight:600; letter-spacing:0}
.nav-item:hover{background:rgba(255,255,255,.8); color:var(--ink); transform:none; box-shadow:var(--edge), 0 6px 16px rgba(20,28,45,.08)}
.nav-item.active,.nav-item[data-app].active{background:var(--acc); color:var(--ink); border-color:rgba(80,130,0,.3); box-shadow:inset 0 1px 0 rgba(255,255,255,.7), var(--acc-glow)}
.nav-badge{background:var(--ink); color:var(--acc); border:2px solid #fff}
.nav-soon{position:absolute; top:3px; right:6px; font-style:normal; font-family:var(--mono); font-size:7.5px; font-weight:600; background:var(--ink); color:var(--acc); border-radius:6px; padding:1px 4px; text-transform:uppercase; letter-spacing:.05em}
.nav-item.locked::before,.launch-tile.locked::before{content:""; width:9px; height:10px; top:6px; right:9px; background:var(--dim); border-radius:2px; -webkit-mask:none; mask:none}

/* ---------- topbar ---------- */
.topbar{background:linear-gradient(180deg, rgba(240,243,247,.92) 55%, transparent)}
.topbar-title{font-family:var(--display); font-weight:700; letter-spacing:-.04em; font-size:28px}
.balance-pill,.user-pill,.usage-pill{background:var(--glass-hi); border:1px solid var(--hair2); box-shadow:var(--edge); color:var(--ink); font-weight:500; font-size:12.5px}
.usage-pill{background:var(--ink); color:var(--acc); border-color:var(--ink); box-shadow:0 6px 18px rgba(11,14,20,.25)}
.usage-pill.warn{background:var(--acc); color:var(--ink); border-color:rgba(80,130,0,.4); box-shadow:var(--acc-glow)}

/* ---------- home ---------- */
.hero-head h1{font-size:clamp(34px,4.4vw,52px); letter-spacing:-.045em}
.launch-tile,.launch-tile[data-app]{
  background:var(--glass); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur); color:var(--ink);
  border:1px solid rgba(255,255,255,.85); box-shadow:var(--edge), var(--lift), 0 0 0 1px var(--hair); border-radius:24px;
  transition:transform .25s cubic-bezier(.2,.9,.3,1.2), box-shadow .25s;
}
.launch-tile:hover{transform:translateY(-4px); box-shadow:var(--edge), var(--lift-hi), 0 0 0 1px rgba(100,170,0,.45)}
.launch-tile:active{transform:translateY(0)}
.lt-ico{background:var(--ink); color:var(--acc); border:0; border-radius:16px; box-shadow:0 8px 20px rgba(11,14,20,.28)}
.lt-text b{font-family:var(--display); letter-spacing:-.03em}
.lt-text small{color:var(--dim); font-weight:500; opacity:1}
.soon-pill{font-style:normal; font-family:var(--mono); font-size:9.5px; font-weight:600; background:var(--acc); color:var(--ink); border-radius:7px; padding:2px 6px; vertical-align:middle; margin-left:4px; text-transform:uppercase; letter-spacing:.06em}
.launch-tile.soon{opacity:.92}

.section-label,.history-head{font-family:var(--mono); text-transform:uppercase; letter-spacing:.14em; font-size:11.5px; color:var(--dim); font-weight:500}
.history-head{border:0; padding-top:0; margin-top:46px}
.hero-card img{border:1px solid var(--hair2); border-radius:18px}

/* ---------- tool UI ---------- */
.tmpl-item{border:1px solid var(--hair2); border-radius:14px; filter:none; opacity:.55; background:rgba(255,255,255,.6)}
.tmpl-item:hover{opacity:1; transform:translateY(-2px)}
.tmpl-item.active{opacity:1; border-color:rgba(100,170,0,.9); box-shadow:0 0 0 3px rgba(184,255,44,.55), 0 8px 20px rgba(20,28,45,.12)}
.tmpl-item.active::after{background:var(--acc); color:var(--ink); border:1px solid rgba(80,130,0,.5); font-size:11px}
.tmpl-item .tmpl-label{background:linear-gradient(transparent,rgba(11,14,20,.78)); padding:14px 7px 5px; font-weight:600}
.style-desc{color:var(--dim)}
.chip{background:rgba(255,255,255,.65); border:1px solid var(--hair2); color:var(--dim); font-weight:600}
.chip:hover{transform:translateY(-1px)}
.chip.active{background:var(--ink); color:var(--acc); border-color:var(--ink); box-shadow:0 6px 16px rgba(11,14,20,.22)}
.tab,.pick-btn{background:rgba(255,255,255,.65); border:1px solid var(--hair2); color:var(--dim); font-weight:600; box-shadow:var(--edge)}
.tab:hover,.pick-btn:hover{transform:none; color:var(--ink); background:#fff}
.tab.active,.pick-btn.active{background:var(--ink); color:var(--acc); border-color:var(--ink); box-shadow:0 6px 16px rgba(11,14,20,.22)}
.color-pick input[type=color]{border:1px solid var(--hair2)}
.color-pick input[data-touched]{box-shadow:0 0 0 3px var(--acc)}
.results-placeholder{background:rgba(255,255,255,.4); border:1.5px dashed var(--hair2); color:var(--dim); border-radius:24px}
.results-placeholder b{color:var(--ink); background:var(--acc-soft); padding:0 .3em; border-radius:6px}
.results-status{background:var(--glass-hi); border:1px solid var(--hair2); font-weight:500}
.results-status.err{background:#FFEDEF; border-color:rgba(229,56,79,.4); color:var(--danger)}
.gcard{border:1px solid rgba(255,255,255,.9); border-radius:18px; box-shadow:var(--lift), 0 0 0 1px var(--hair); background:#fff}
.gcard:hover{transform:translateY(-3px); box-shadow:var(--lift-hi), 0 0 0 1px rgba(100,170,0,.4)}
.icon-btn{background:rgba(255,255,255,.88); border:1px solid var(--hair2); border-radius:11px; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px)}
.icon-btn:hover{background:var(--acc); transform:scale(1.08)}
.card-overlay{background:linear-gradient(180deg,transparent 55%,rgba(11,14,20,.6))}
.gallery img{border-radius:0}
.batch-row{padding:18px}
.batch-type-check{background:rgba(255,255,255,.6); border:1px solid var(--hair2)}
.batch-ref img{border:1px solid var(--hair2); border-radius:16px}
.gcard-check{accent-color:#0B0E14}
.job-card{border-color:var(--hair)}
.nft-card img{background-image:linear-gradient(45deg,#e3e7ee 25%,transparent 25%),linear-gradient(-45deg,#e3e7ee 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e3e7ee 75%),linear-gradient(-45deg,transparent 75%,#e3e7ee 75%)}
.nft-tryon-stage{border:1px solid var(--hair2); box-shadow:var(--lift)}

/* ---------- tables / admin ---------- */
.admin-table th{border-bottom:1px solid var(--hair2); font-family:var(--mono); font-weight:500; letter-spacing:.08em}
.admin-table td,.inv-row,.job-card{border-color:var(--hair)}
.admin-note{color:var(--ok); font-weight:600}

/* ---------- pills / badges ---------- */
.pillx{border:1px solid var(--hair2); background:rgba(255,255,255,.7); font-family:var(--mono); font-weight:500; font-size:10.5px; letter-spacing:.04em}
.pillx.paid{background:var(--acc); border-color:rgba(80,130,0,.45); color:var(--ink)}
.pillx.pending{background:#fff}
.pillx.expired{background:#EEF0F4; color:var(--dim)}
.plan-badge{border:1px solid var(--hair2); background:rgba(255,255,255,.8); font-family:var(--display); box-shadow:var(--edge)}
.plan-badge.basic{background:#fff} .plan-badge.pro{background:var(--ink); color:var(--acc); border-color:var(--ink)} .plan-badge.none{background:#EEF0F4}
.meter{border:1px solid var(--hair2); background:rgba(255,255,255,.7); height:14px}
.meter-fill{background:linear-gradient(90deg,#9BE000,var(--acc)); box-shadow:0 0 18px rgba(184,255,44,.8)}
.friend-banner{background:var(--acc-soft); border:1px solid rgba(100,170,0,.45); border-radius:14px; font-weight:600}
.friend-banner.warn{background:#fff; border-color:var(--hair2)}
.credit-chip{background:var(--acc-soft); border:1px solid rgba(100,170,0,.45)}

/* ---------- plans + packs ---------- */
.plan-card{padding:28px 26px; transition:transform .25s cubic-bezier(.2,.9,.3,1.2), box-shadow .25s}
.plan-card:hover{transform:translateY(-5px); box-shadow:var(--edge), var(--lift-hi), 0 0 0 1px var(--hair)}
.plan-card.pro{background:linear-gradient(160deg,rgba(255,255,255,.92),rgba(225,255,150,.5)); box-shadow:var(--edge), var(--lift), 0 0 0 1.5px rgba(100,170,0,.7), 0 0 60px rgba(184,255,44,.32)}
.plan-card.current{outline:2px solid var(--ink); outline-offset:3px}
.plan-ribbon{background:var(--ink); color:var(--acc); border:0; font-family:var(--mono); font-weight:600; letter-spacing:.06em; text-transform:uppercase; font-size:10.5px; top:-12px}
.plan-price{font-family:var(--display); letter-spacing:-.05em}
.plan-feats li::before{background:var(--ink); color:var(--acc); border:0}
.plan-feats li.no::before{background:#DDE1E8; color:var(--dim)}
.pack,.pack:nth-child(2),.pack:nth-child(3){background:rgba(255,255,255,.7); color:var(--ink); border:1px solid var(--hair2); box-shadow:var(--edge), 0 8px 22px rgba(20,28,45,.08); border-radius:20px}
.pack:nth-child(2){background:linear-gradient(160deg,#fff,rgba(225,255,150,.55)); border-color:rgba(100,170,0,.6)}
.pack:hover:not(:disabled){transform:translateY(-4px); box-shadow:var(--edge), var(--lift-hi)}
.pack b{font-family:var(--display)} .pack i{background:var(--ink); color:var(--acc); border-radius:999px; padding:2px 12px; font-size:16px; margin-top:8px}

/* ---------- referral ---------- */
.stat{border-radius:18px; padding:16px}
.stat.hot{background:linear-gradient(160deg,#fff,rgba(225,255,150,.7)); border-color:rgba(100,170,0,.5)}
.tier{background:rgba(255,255,255,.4); border:1px dashed var(--hair2); opacity:.7}
.tier.reached{border:1px solid var(--hair2); background:var(--glass-hi); opacity:1}
.tier.current{background:var(--ink); color:var(--acc); transform:translateY(-3px); box-shadow:0 12px 30px rgba(11,14,20,.3)} .tier.current .tier-need{color:#B7C0CF}
.since{background:var(--acc); border:1px solid rgba(80,130,0,.4)}
.stat b.bump,.claim-amt.bump{animation:bumpnum .5s}
@keyframes bumpnum{50%{transform:scale(1.12); text-shadow:0 0 22px rgba(184,255,44,.9)}}

/* ---------- modal ---------- */
.modal{background:rgba(224,229,237,.55); -webkit-backdrop-filter:blur(14px) saturate(1.2); backdrop-filter:blur(14px) saturate(1.2)}
.modal-card{background:rgba(255,255,255,.88); box-shadow:var(--edge), 0 40px 100px rgba(11,14,20,.28), 0 0 0 1px var(--hair)}
.phrase-word{background:rgba(255,255,255,.75); border:1px solid var(--hair2); border-radius:13px; font-family:var(--mono); font-weight:500; font-size:14px}
.phrase-word i,.phrase-word.c0 i,.phrase-word.c1 i,.phrase-word.c2 i,.phrase-word.c3 i,.phrase-word.c4 i,.phrase-word.c5 i{background:var(--ink); color:var(--acc); border:0; font-family:var(--mono); font-weight:600}
#qr{border:1px solid var(--hair2); border-radius:20px; box-shadow:var(--lift); background:#fff}
.pay-val{background:rgba(255,255,255,.7); border:1px solid var(--hair2); border-radius:13px}
.pay-field label{font-family:var(--mono); font-weight:500}
.spinner{border-color:var(--hair2); border-top-color:var(--ink)}
.manual-tx{border-style:dashed; border-radius:16px}
.paid-emoji{display:grid; place-items:center; width:76px; height:76px; margin:0 auto; border-radius:50%; background:var(--acc); box-shadow:var(--acc-glow); font-size:0; animation:none}
.paid-emoji::before{content:""; width:30px; height:16px; border-left:5px solid var(--ink); border-bottom:5px solid var(--ink); transform:rotate(-45deg) translate(2px,-3px); border-radius:2px}

/* ---------- support / profile ---------- */
.faq details{border-radius:16px; padding:12px 18px}
.faq summary{font-family:var(--display); letter-spacing:-.02em}
.ticket-row{background:rgba(255,255,255,.55); border:1px solid var(--hair); border-radius:14px}
.ticket-row:hover{border-color:var(--hair2); transform:none; background:#fff}
.ticket-row.active{background:#fff; border-color:rgba(100,170,0,.7); box-shadow:0 0 0 3px rgba(184,255,44,.45)}
.dot{background:var(--acc); border:1px solid rgba(80,130,0,.6); box-shadow:0 0 10px var(--acc)}
.bubble{border:1px solid var(--hair2); border-radius:18px; box-shadow:var(--edge), 0 6px 18px rgba(20,28,45,.07); background:rgba(255,255,255,.85)}
.bubble.mine{background:var(--ink); color:#fff; border-color:var(--ink)} .bubble.mine .bubble-who span{color:#9AA3B2}
.bubble.staff:not(.mine){background:linear-gradient(160deg,#fff,rgba(225,255,150,.6)); border-color:rgba(100,170,0,.5)}
.bubble-img{border:1px solid var(--hair2); border-radius:12px}
.avatar{background:linear-gradient(160deg,#fff,#DCE1E9)!important; border:1px solid var(--hair2); box-shadow:var(--edge), 0 6px 14px rgba(20,28,45,.12)}
.av-pick.active{outline:2px solid var(--acc-2); box-shadow:0 0 18px rgba(184,255,44,.9)}
.kc-card{padding:18px; cursor:pointer}
.kc-card:hover{transform:translateY(-3px)}
.kc-card.active,.kc-card[data-pub="1"].active{background:linear-gradient(160deg,#fff,rgba(225,255,150,.6)); border-color:rgba(100,170,0,.8); box-shadow:var(--edge), 0 0 0 3px rgba(184,255,44,.5), var(--lift)}
.kc-ico{display:grid; place-items:center; width:42px; height:42px; border-radius:13px; background:var(--ink); color:var(--acc); font-size:20px; box-shadow:0 8px 18px rgba(11,14,20,.25)}
.pf-item{border:1px solid var(--hair2); border-radius:14px}
.pf-item .eye{background:rgba(255,255,255,.9); border:1px solid var(--hair2); font-family:var(--mono); font-weight:500}
.explore-card .maker{background:rgba(255,255,255,.92); border:1px solid var(--hair2); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px)}
.pp-lock{font-size:0; display:grid; place-items:center; width:84px; height:84px; margin:0 auto; border-radius:26px; background:var(--ink)}
.pp-lock::before{content:""; width:26px; height:20px; border-radius:5px; background:var(--acc); box-shadow:0 -12px 0 -6px var(--acc), 0 0 22px var(--acc)}

/* ---------- video teaser ---------- */
.soon-tag{display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:11.5px; font-weight:500; text-transform:uppercase; letter-spacing:.12em; background:rgba(255,255,255,.8); border:1px solid var(--hair2); border-radius:999px; padding:6px 14px; box-shadow:var(--edge)}
.soon-tag i{width:8px; height:8px; border-radius:50%; background:var(--acc); box-shadow:0 0 12px var(--acc); animation:pulse 1.6s ease-in-out infinite}
.video-hero{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:30px; align-items:center; padding:34px}
@media(max-width:900px){.video-hero{grid-template-columns:1fr}}
.video-copy{display:flex; flex-direction:column; gap:14px; align-items:flex-start}
.video-copy h2{font-size:clamp(34px,4.5vw,54px)} .video-copy p{margin:0; color:var(--dim); line-height:1.6; font-size:16px}
.soon-list{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:7px; font-weight:600}
.soon-list li{padding-left:24px; position:relative} .soon-list li::before{content:""; position:absolute; left:0; top:6px; width:12px; height:12px; border-radius:50%; background:var(--acc); box-shadow:0 0 10px var(--acc)}
.filmstrip{overflow:hidden; border-radius:22px; background:var(--ink); padding:18px 0; position:relative; box-shadow:0 24px 60px rgba(11,14,20,.35)}
.filmstrip::before,.filmstrip::after{content:""; position:absolute; left:0; right:0; height:10px; background:repeating-linear-gradient(90deg,transparent 0 10px,rgba(255,255,255,.22) 10px 20px); }
.filmstrip::before{top:4px} .filmstrip::after{bottom:4px}
.film-track{display:flex; gap:12px; width:max-content; animation:film 34s linear infinite; padding:0 6px}
.film-frame{position:relative; width:150px; flex:0 0 auto; border-radius:10px; overflow:hidden; border:1px solid rgba(255,255,255,.18)}
.film-frame img{width:100%; aspect-ratio:9/16; object-fit:cover; display:block}
.film-frame i{position:absolute; left:6px; top:6px; font-style:normal; font-family:var(--mono); font-size:10px; color:var(--acc); background:rgba(0,0,0,.55); padding:1px 6px; border-radius:6px}
@keyframes film{to{transform:translateX(-50%)}}
.video-soon{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:34px; align-items:center; padding:36px; margin-bottom:84px}
@media(max-width:900px){.video-soon{grid-template-columns:1fr; padding:24px}}
.video-soon-copy{display:flex; flex-direction:column; gap:14px; align-items:flex-start}
.video-soon-copy h2{font-size:clamp(32px,4vw,48px)} .video-soon-copy p{margin:0; color:var(--dim); line-height:1.6}

/* ---------- landing ---------- */
.landing-nav{background:transparent}
.landing-brand{font-family:var(--display); font-weight:700; letter-spacing:-.04em}
.landing-brand img{filter:drop-shadow(0 6px 14px rgba(20,28,45,.2))}
.hero-badge{background:rgba(255,255,255,.75); border:1px solid var(--hair2); box-shadow:var(--edge); font-family:var(--mono); font-weight:500; font-size:12px; text-transform:uppercase; letter-spacing:.1em; transform:none; display:inline-flex; align-items:center; gap:9px}
.hero-badge::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--acc); box-shadow:0 0 12px var(--acc)}
.grad{background:linear-gradient(100deg,#0B0E14 0%,#3C4658 60%,#7F8A9D 100%); -webkit-background-clip:text; background-clip:text; color:transparent; position:relative; white-space:nowrap}
.grad::after{content:""; position:absolute; left:0; right:0; bottom:.02em; height:.22em; background:var(--acc); z-index:-1; border-radius:4px; box-shadow:0 4px 22px rgba(184,255,44,.8)}
.landing-hero.login-first .hero-copy h1{letter-spacing:-.055em; line-height:1}
.landing-sub{color:var(--dim)}
.hero-proof b{font-family:var(--display)}
.hero-auth .auth-card{transform:none; padding:30px 28px 26px; background:rgba(255,255,255,.66)}
.auth-logo{animation:none; filter:drop-shadow(0 10px 20px rgba(20,28,45,.22))}
.auth-tabs .tab{padding:6px 14px}
.scroll-cue i{background:var(--glass-hi); border:1px solid var(--hair2); box-shadow:var(--edge), 0 8px 20px rgba(20,28,45,.12)}
.section-title .kicker{background:rgba(255,255,255,.8); border:1px solid var(--hair2); box-shadow:var(--edge); transform:none; font-family:var(--mono); font-weight:500; letter-spacing:.12em}
.section-title h2{letter-spacing:-.05em}

.stage{background:rgba(255,255,255,.55); padding:24px}
.sticker{background:var(--ink); color:var(--acc); border:0; box-shadow:0 8px 20px rgba(11,14,20,.3); font-family:var(--mono); font-weight:500; font-size:11.5px; text-transform:uppercase; letter-spacing:.08em; transform:none}
.s-in,.s-out{background:var(--ink)}
.ref-card-big{border:1px solid var(--hair2); box-shadow:var(--lift); border-radius:22px}
.stage-arrow{color:var(--acc-2); filter:drop-shadow(0 0 10px rgba(184,255,44,.9))}
.meme-tile{border:1px solid rgba(255,255,255,.9); box-shadow:var(--lift), 0 0 0 1px var(--hair); border-radius:16px}
.meme-tile:hover{box-shadow:var(--lift-hi), 0 0 0 2px var(--acc)}
.meme-tile figcaption{font-family:var(--mono); font-weight:500; letter-spacing:.03em}

.marquee{background:rgba(255,255,255,.6); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur); border:0; border-block:1px solid var(--hair2); transform:none; margin:20px -28px 64px; padding:12px 0}
.marquee .pill,.p1,.p2,.p3,.p4,.p5,.p6{background:transparent; color:var(--dim)!important; font-family:var(--mono); font-weight:500; font-size:13px; text-transform:uppercase; letter-spacing:.1em; padding:6px 18px; border-radius:0}
.marquee .pill::before{content:"\25C6"; color:var(--acc-2); margin-right:14px; text-shadow:0 0 12px var(--acc)}

.bento{gap:20px}
.bento-card,.b-tok,.b-meme,.b-kol,.b-nft{background:var(--glass); color:var(--ink); border-radius:30px; padding:26px; transition:transform .3s cubic-bezier(.2,.9,.3,1.2), box-shadow .3s}
.bento-card:hover{transform:translateY(-4px); box-shadow:var(--edge), var(--lift-hi), 0 0 0 1px var(--hair)}
.b-meme{background:linear-gradient(150deg,rgba(255,255,255,.7),rgba(225,255,150,.38))}
.bento-text .tag{background:var(--ink); color:var(--acc); border:0; font-family:var(--mono); font-weight:500; letter-spacing:.12em}
.bento-text h3{letter-spacing:-.045em}
.bento-text p{color:var(--dim)}
.collage img{border:1px solid rgba(255,255,255,.9); box-shadow:var(--lift), 0 0 0 1px var(--hair)}
.collage.coins figcaption{background:rgba(255,255,255,.9); border:1px solid var(--hair2); font-family:var(--mono); font-weight:500; font-size:10.5px}
.nft-stage{border:1px solid var(--hair2); background:repeating-conic-gradient(rgba(255,255,255,.75) 0 25%, rgba(225,229,236,.6) 0 50%) 0 0/26px 26px}
.nft-stage img.trait{filter:drop-shadow(0 8px 12px rgba(20,28,45,.35))}

.landing-steps h2{letter-spacing:-.05em}
.step{background:var(--glass); border-style:solid; padding:28px 24px}
.step-n{background:var(--ink); color:var(--acc); border:0; font-family:var(--mono); box-shadow:0 8px 20px rgba(11,14,20,.28)}
.step:nth-child(2) .step-n,.step:nth-child(3) .step-n{background:var(--ink)}
.landing-plans .plan-card.earn{background:linear-gradient(160deg,rgba(255,255,255,.7),rgba(225,255,150,.45))}
.earn-list li::before{content:"+"; font-family:var(--mono)}

/* ---------- light behind glass: the sign-in pane glows lime from behind ---------- */
.hero-auth{position:relative}
.hero-auth::before{
  content:""; position:absolute; inset:-14% -10% -10% -8%; z-index:-1; pointer-events:none;
  background:radial-gradient(closest-side, rgba(184,255,44,.55), rgba(184,255,44,.18) 55%, transparent 75%);
  filter:blur(26px); animation:breathe 5s ease-in-out infinite;
}
@keyframes breathe{50%{opacity:.62; transform:scale(.97)}}
.hero-auth .auth-card{box-shadow:var(--edge), 0 30px 80px rgba(20,28,45,.18), 0 0 0 1px var(--hair)}
.meme-tile.in{animation:develop 1.1s ease-out}
@keyframes develop{0%{box-shadow:0 0 0 3px var(--acc), 0 0 34px rgba(184,255,44,.9)} 100%{box-shadow:var(--lift), 0 0 0 1px var(--hair)}}

/* brand mark = generated glass toque; round it like an app icon */
.landing-brand img,.sidebar-logo img,.auth-logo,.boot-logo{border-radius:28%; object-fit:cover; box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 10px 26px rgba(20,28,45,.22), 0 0 0 1px var(--hair)}
.sidebar-logo img{width:46px; height:46px}
.auth-logo{width:84px; height:84px}
.boot-logo{width:96px; height:96px; animation:breathe 2.6s ease-in-out infinite}

/* ---------- Studio: the dark-glass top tier ---------- */
.plan-card.studio{background:linear-gradient(160deg,rgba(26,32,44,.94),rgba(11,14,20,.97)); color:#fff; border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 30px 70px rgba(11,14,20,.4), 0 0 0 1px rgba(184,255,44,.35), 0 0 70px rgba(184,255,44,.18)}
.plan-card.studio h3,.plan-card.studio .plan-price{color:#fff} .plan-card.studio .plan-price small,.plan-card.studio .plan-quota{color:#AEB7C6} .plan-card.studio .plan-quota b{color:var(--acc)}
.plan-card.studio .plan-feats li{color:#E9EDF4} .plan-card.studio .plan-feats li::before{background:var(--acc); color:var(--ink)}
.plan-card.studio .plan-ribbon{background:var(--acc); color:var(--ink)}
.plan-card.studio .btn{background:var(--acc); color:var(--ink)}
.plan-badge.studio{background:var(--ink); color:var(--acc); border-color:var(--acc); box-shadow:0 0 22px rgba(184,255,44,.45)}
.soon-tag.vip{background:var(--ink); color:var(--acc); border-color:var(--ink); margin-left:8px}

/* ---------- Unbounded: wide, confident display type (sizes retuned for its width) ---------- */
h1,h2,h3,h4{letter-spacing:-.045em; font-weight:600}
.landing-hero.login-first .hero-copy h1{font-size:clamp(30px,3.5vw,50px); line-height:1.1; letter-spacing:-.05em; font-weight:600}
.section-title h2,.landing-steps h2{font-size:clamp(26px,3.2vw,42px); line-height:1.1; letter-spacing:-.05em}
.bento-text h3{font-size:clamp(22px,2.2vw,28px); letter-spacing:-.045em}
.topbar-title{font-size:23px; letter-spacing:-.045em; font-weight:600}
.hero-head h1{font-size:clamp(26px,3.2vw,40px); letter-spacing:-.05em}
.acct-head h2{font-size:clamp(24px,2.6vw,32px)}
.landing-brand{font-size:21px; letter-spacing:-.05em; font-weight:600}
.boot-title{font-size:30px; font-weight:600}
.auth-title{font-size:25px; font-weight:600}
.plan-price{font-size:38px; letter-spacing:-.06em; font-weight:600} .plan-price small{font-size:13px; letter-spacing:0; font-family:var(--font); font-weight:500}
.plan-card h3{font-size:22px}
.stat b,.claim-amt{font-weight:600; letter-spacing:-.05em}
.pack b{font-size:28px} .pack i{font-size:15px}
.lt-text b{font-size:17px; letter-spacing:-.04em; font-weight:600}
.modal-card h2{font-size:22px}
.video-copy h2,.video-soon-copy h2{font-size:clamp(28px,3.4vw,42px)}
.hero-proof b{font-size:17px; font-weight:600}
.pp-head h1{font-size:clamp(26px,4vw,40px)} .pp-private h1{font-size:clamp(26px,4vw,38px)}
.tier-rate{font-size:24px} .history-head{font-family:var(--mono)}
.btn{font-family:var(--font)}

.nav-item,.launch-tile{position:relative}

.tmpl-item{opacity:.8}
.tmpl-item:hover{opacity:1}

/* ---------- usage estimate above each Generate button ---------- */
.cost-estimate{display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 14px; align-items:center; padding:11px 15px; border-radius:15px;
  background:rgba(255,255,255,.7); border:1px solid var(--hair2); font-size:13.5px; box-shadow:var(--edge)}
.cost-estimate .ce-main b{font-family:var(--display); font-size:17px; letter-spacing:-.04em; background:var(--acc); padding:0 .35em; border-radius:7px}
.cost-estimate .ce-sub{color:var(--dim); font-weight:500} .cost-estimate .ce-sub b{color:var(--ink)}
.cost-estimate.empty{color:var(--dim); background:rgba(255,255,255,.45); border-style:dashed}
.cost-estimate.over{background:#FFF0F2; border-color:rgba(229,56,79,.5); color:var(--danger)} .cost-estimate.over .ce-main b{background:var(--danger); color:#fff} .cost-estimate.over .ce-sub{color:var(--danger)}
small.hint{font-weight:500; color:var(--dim); margin-left:4px}

/* ---------- image model picker ---------- */
.model-picker{display:flex; flex-direction:column; gap:9px}
.mp-head{display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 12px; font-size:13px; color:var(--dim)} .mp-head b{color:var(--ink); font-family:var(--display); letter-spacing:-.03em}
.mp-opts{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:8px}
.mp-opt{position:relative; text-align:left; background:rgba(255,255,255,.65); border:1px solid var(--hair2); border-radius:14px; padding:10px 12px; cursor:pointer; font:inherit; color:var(--ink); display:flex; flex-direction:column; gap:3px; transition:transform .15s, box-shadow .15s, background .15s}
.mp-opt:hover{transform:translateY(-2px); background:#fff}
.mp-opt strong{font-size:13.5px} .mp-opt small{color:var(--dim); font-size:11.5px; line-height:1.35}
.mp-opt em{position:absolute; top:8px; right:9px; font-style:normal; font-family:var(--mono); font-size:9.5px; text-transform:uppercase; letter-spacing:.06em; background:var(--ink); color:var(--acc); border-radius:6px; padding:1px 6px}
.mp-opt.active{background:linear-gradient(160deg,#fff,rgba(225,255,150,.65)); border-color:rgba(100,170,0,.8); box-shadow:0 0 0 3px rgba(184,255,44,.5), var(--edge)}