/* ═══════════════════════════════════════════════════
   BASE.CSS — OTP Sanly · Design System
═══════════════════════════════════════════════════ */
:root {
  --bg:#060709; --bg2:#0c0e14; --sf:#0f1117; --sf2:#141720; --sf3:#1a1e2a;
  --br:rgba(255,255,255,.055); --br2:rgba(255,255,255,.1); --br3:rgba(255,255,255,.18);
  --t:#edf0f8; --t2:#7a84a0; --t3:#474f68; --t4:#282e42;
  --ac:#00d9b5; --ac2:#00b899; --acg:rgba(0,217,181,.08); --acb:rgba(0,217,181,.14);
  --bl:#5c8cf5; --blg:rgba(92,140,245,.08);
  --pu:#9f7eff; --pug:rgba(159,126,255,.08);
  --re:#f56565; --reg:rgba(245,101,101,.08);
  --or:#f6972a; --org:rgba(246,151,42,.08);
  --gn:#2fd4a0; --gng:rgba(47,212,160,.08);
  --sh:0 20px 60px rgba(0,0,0,.7),0 4px 16px rgba(0,0,0,.4);
  --sh2:0 8px 32px rgba(0,0,0,.4);
  --r:7px; --r2:11px; --r3:15px; --r4:20px; --r5:28px;
  --ff:'Outfit',system-ui,sans-serif;
  --mono:'JetBrains Mono',monospace;
  --nav-h:58px;
  --tr:all .18s cubic-bezier(.4,0,.2,1);
}
[data-theme="light"] {
  --bg:#f1f3f9; --bg2:#e8ecf4; --sf:#ffffff; --sf2:#f5f7fd; --sf3:#eceff8;
  --br:rgba(0,0,0,.07); --br2:rgba(0,0,0,.13); --br3:rgba(0,0,0,.2);
  --t:#0a0d18; --t2:#474f68; --t3:#8a92ac; --t4:#c0c8dc;
  --sh:0 8px 32px rgba(0,0,0,.1); --sh2:0 4px 16px rgba(0,0,0,.06);
}
[data-theme="light"] .stars-bg{display:none}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--ff);background:var(--bg);color:var(--t);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;line-height:1.55;
  transition:background .3s,color .3s}
::selection{background:var(--ac);color:#000}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--sf3);border-radius:3px}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font-family:var(--ff)}
.hidden{display:none!important}
.flex{display:flex}.col{flex-direction:column}.aic{align-items:center}
.aife{align-items:flex-end}.aist{align-items:flex-start}
.jcc{justify-content:center}.jbs{justify-content:space-between}
.jfe{justify-content:flex-end}.wrap{flex-wrap:wrap}
.gap1{gap:.25rem}.gap2{gap:.5rem}.gap3{gap:.75rem}.gap4{gap:1rem}
.gap5{gap:1.25rem}.gap6{gap:1.5rem}.gap8{gap:2rem}
.w100{width:100%}.rel{position:relative}.pointer{cursor:pointer}
.mono{font-family:var(--mono)}.ta-c{text-align:center}.ta-r{text-align:right}
.fw5{font-weight:500}.fw6{font-weight:600}.fw7{font-weight:700}
.fw8{font-weight:800}.fw9{font-weight:900}
.t2{color:var(--t2)}.t3{color:var(--t3)}.t-ac{color:var(--ac)}
.t-re{color:var(--re)}.t-gn{color:var(--gn)}.t-or{color:var(--or)}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mt1{margin-top:.25rem}.mt2{margin-top:.5rem}.mt3{margin-top:.75rem}
.mt4{margin-top:1rem}.mt5{margin-top:1.25rem}.mt6{margin-top:1.5rem}.mt8{margin-top:2rem}
.mb2{margin-bottom:.5rem}.mb3{margin-bottom:.75rem}.mb4{margin-bottom:1rem}
.mb5{margin-bottom:1.25rem}.mb6{margin-bottom:1.5rem}.mb8{margin-bottom:2rem}
.p3{padding:.75rem}.p4{padding:1rem}.p5{padding:1.25rem}.p6{padding:1.5rem}
.dvdr{border:none;border-top:1px solid var(--br);margin:1.25rem 0}
.spin{display:inline-block;width:14px;height:14px;border:2px solid rgba(0,217,181,.15);
  border-top-color:var(--ac);border-radius:50%;animation:sp .65s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:.75rem}
.fgrid2{display:grid;grid-template-columns:1fr 1fr;gap:.875rem}
.fgrid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.875rem}
.fgrid4{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.75rem}
.stars-bg{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.star{position:absolute;border-radius:50%;background:#fff;
  animation:twinkle var(--d,3s) ease-in-out infinite var(--dl,0s)}
@keyframes twinkle{0%,100%{opacity:var(--op,.2)}50%{opacity:var(--op2,.6)}}
.orb1{position:absolute;width:700px;height:700px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,217,181,.07),transparent 65%);
  top:-200px;left:-250px;pointer-events:none}
.orb2{position:absolute;width:600px;height:600px;border-radius:50%;
  background:radial-gradient(circle,rgba(92,140,245,.06),transparent 65%);
  bottom:-150px;right:-150px;pointer-events:none}
.orb3{position:absolute;width:400px;height:400px;border-radius:50%;
  background:radial-gradient(circle,rgba(159,126,255,.04),transparent 65%);
  top:40%;right:20%;pointer-events:none}
.mini-chart{height:72px;display:flex;align-items:flex-end;gap:3px;padding:0 2px}
.mc-bar{background:var(--acg);border:1px solid var(--acb);border-bottom:none;
  border-radius:3px 3px 0 0;flex:1;transition:background .2s;min-height:3px;min-width:7px}
.mc-bar:hover{background:rgba(0,217,181,.25)}
.tab-nav{display:flex;gap:.15rem;border-bottom:1px solid var(--br);
  margin-bottom:1.5rem;flex-wrap:wrap;overflow-x:auto}
.tab-btn{padding:.55rem .9rem;font-size:.78rem;font-weight:600;color:var(--t3);
  background:none;border:none;cursor:pointer;border-bottom:2px solid transparent;
  transition:var(--tr);display:flex;align-items:center;gap:.35rem;
  margin-bottom:-1px;white-space:nowrap}
.tab-btn svg{width:13px;height:13px}
.tab-btn:hover{color:var(--t)}.tab-btn.on{color:var(--ac);border-bottom-color:var(--ac)}
.tab-panel{display:none}.tab-panel.on{display:block}
@media(max-width:768px){.fgrid2,.fgrid3{grid-template-columns:1fr}.hide-mob{display:none!important}}

/* ── Cookie Consent ─────────────────────── */
@keyframes slideUp { from{transform:translateY(100%);opacity:0} to{transform:translateY(0);opacity:1} }
@keyframes shake   { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} }

/* ── Ad Banner slot ─────────────────────── */
#adBannerSlot { position:relative; z-index:100; }
#adBannerSlot:empty { display:none; }
#adSidebarSlot:empty { display:none; }
.ad-sidebar-slot:empty { display:none; }