*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-size:15px;line-height:1.55;font-weight:400}
img{display:block;max-width:100%}
figure{margin:0}
a{text-underline-offset:3px}
p{margin:0 0 13.2px}
h1,h2,h3,h4,h5,h6{line-height:1.12;letter-spacing:-.015em;margin:0 0 8.8px}
h1{font-size:42px}h2{font-size:32px}h3{font-size:25px}h4{font-size:20px}h5{font-size:16px}h6{font-size:13px}
:focus{outline:none}

:root{
  --ink:#08090B;--ink2:#0E1013;--card:#14171B;--card2:#1B1F24;
  --line:rgba(255,255,255,.08);--line2:rgba(255,255,255,.16);
  --tx:#F3F2EF;--tx2:rgba(243,242,239,.60);--tx3:rgba(243,242,239,.34);
  --gold:#FFD84D;--gold2:#F0C231;--goldsoft:rgba(255,216,77,.12);
  --up:#3ECF8E;--down:#F0645B;
  --fd:'Clash Display',ui-sans-serif,system-ui,sans-serif;
  --fb:'Satoshi',ui-sans-serif,system-ui,sans-serif;
}
body{margin:0;background:var(--ink);color:var(--tx);font-family:var(--fb);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--fd);font-weight:600;letter-spacing:-.025em;line-height:1.04;margin:0}
p{margin:0}
a{color:var(--gold);text-decoration:none}
a:hover{color:var(--gold2)}
::selection{background:rgba(255,216,77,.28)}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
input,textarea,button{font-family:var(--fb)}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes glow{0%,100%{opacity:.45;transform:scale(1)}50%{opacity:.85;transform:scale(1.06)}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes rise{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes blip{0%{box-shadow:0 0 0 0 rgba(62,207,142,.5)}70%{box-shadow:0 0 0 9px rgba(62,207,142,0)}100%{box-shadow:0 0 0 0 rgba(62,207,142,0)}}
@keyframes shimmer{from{background-position:-260px 0}to{background-position:260px 0}}
.ri{display:flex;align-items:center;gap:9px;padding:8px 12px;border-radius:11px;font-size:12.5px;font-weight:600;cursor:pointer;color:var(--tx3);transition:background .16s,color .16s,padding-left .16s}
.ri:hover{background:rgba(255,255,255,.05);color:var(--tx);padding-left:15px}
.rg{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.22);padding:16px 12px 6px;font-weight:700}
.mi{position:relative;display:flex;align-items:center}
.mi>a{display:inline-flex;align-items:center;gap:5px;padding:16px 0;white-space:nowrap;color:var(--tx2);font-weight:500;font-size:12.5px;letter-spacing:.01em;cursor:pointer;transition:color .18s}
.mi:hover>a{color:var(--tx)}
.mi>a .cr{transition:transform .22s}
.mi:hover>a .cr{transform:rotate(180deg)}
.sub{position:absolute;top:100%;left:-18px;min-width:268px;background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:0 24px 60px rgba(0,0,0,.6);padding:8px;z-index:80;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .2s,transform .2s,visibility .2s;display:flex;flex-direction:column;gap:1px}
.mi:hover .sub{opacity:1;visibility:visible;transform:translateY(0)}
.sub a{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 14px;border-radius:12px;font-size:13px;font-weight:500;color:var(--tx2);white-space:nowrap;transition:background .16s,color .16s}
.sub a:hover{background:rgba(255,255,255,.06);color:var(--tx)}
.pill{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);font-weight:700}
.btn2{display:inline-flex;align-items:center;justify-content:center;gap:7px;border-radius:999px;font-family:var(--fb);font-weight:700;font-size:13.5px;cursor:pointer;border:1px solid transparent;padding:11px 22px;transition:transform .18s,background .18s,border-color .18s,box-shadow .18s;white-space:nowrap}
.btn2:active{transform:translateY(1px)}
.bg{background:var(--gold);color:#0A0A0A;box-shadow:0 0 0 rgba(255,216,77,0)}
.bg:hover{background:#FFE375;box-shadow:0 8px 30px rgba(255,216,77,.28)}
.bo{border-color:var(--line2);color:var(--tx);background:transparent}
.bo:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.3)}
.bt{color:var(--tx2);background:transparent;padding:11px 12px}
.bt:hover{color:var(--gold)}
.crd{background:var(--card);border:1px solid var(--line);border-radius:20px;transition:transform .28s cubic-bezier(.16,.8,.3,1),border-color .28s,background .28s}
.lift:hover{transform:translateY(-5px);border-color:var(--line2);background:var(--card2)}
.tg{display:inline-flex;align-items:center;padding:4px 11px;border-radius:999px;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
[data-plan="Free"] .blur{filter:blur(7px);user-select:none;pointer-events:none}
.inp{width:100%;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:999px;padding:11px 18px;color:var(--tx);font-size:14px;outline:none;transition:border-color .18s,background .18s}
.inp::placeholder{color:var(--tx3)}
.inp:focus{border-color:var(--gold);background:rgba(255,255,255,.06)}
.lbl{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--tx3);margin-bottom:6px;font-weight:600}
.gradtxt{background:linear-gradient(96deg,#FFF 0%,#FFE79A 44%,#FFD84D 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.tick{display:flex;gap:44px;padding-right:44px;animation:mq 34s linear infinite;white-space:nowrap}
.seg2{display:inline-flex;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:999px;padding:3px}
.seg2 span{padding:7px 16px;border-radius:999px;font-size:12.5px;font-weight:600;color:var(--tx2);cursor:pointer;transition:background .18s,color .18s}
.seg2 span:hover{color:var(--tx)}
.seg2 span[data-on]{background:var(--gold);color:#0A0A0A}


/* — plan gating (was <sc-if isFree/isPremium/isElite>).
     <html> ships as data-plan="Free": a visitor is signed out, so they see the
     free view and the paywalls. Once accounts are real, the server sets this
     attribute per member and the premium markup lights up as designed. — */
.cnd{display:contents}
[data-plan="Free"] [data-when="premium"],
[data-plan="Free"] [data-when="elite"],
[data-plan="Premium"] [data-when="free"],
[data-plan="Premium"] [data-when="elite"],
[data-plan="Elite"] [data-when="free"]{display:none!important}

/* — image placeholders (was <image-slot>) — */
.ph{position:absolute;inset:0;overflow:hidden;display:grid;place-items:center;
  background:
    linear-gradient(135deg,rgba(255,216,77,.08),rgba(255,216,77,0) 55%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.04) 0 1px,transparent 1px 36px),
    repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 36px),
    linear-gradient(160deg,#1C2126,#0D0F12 72%)}
.ph-c{position:absolute;left:8%;right:8%;bottom:16%;width:84%;height:42%;color:rgba(255,216,77,.30)}
.ph-l{position:relative;font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(243,242,239,.30);padding:5px 11px;border:1px solid rgba(255,255,255,.10);border-radius:999px;
  background:rgba(8,9,11,.42);text-align:center;max-width:82%}
:where(*):has(> .ph){position:relative}

/* — layout the canvas frame used to provide — */
body{background:var(--ink)}
main{display:block}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--gold);color:#0A0A0A;
  padding:10px 18px;border-radius:0 0 12px 0;font-weight:700;font-size:13px}
.skip:focus{left:0}

/* — reveal-on-scroll: hidden only once JS confirms motion is wanted — */
.rv[data-rvhide]{opacity:0;transform:translateY(26px)}

@media print{.skip,.toast{display:none}}

/* — authentication — */
.auth{min-height:calc(100vh - 300px);display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:56px 20px 72px;gap:20px}
.auth-card{width:100%;max-width:452px;padding:36px 34px 30px;position:relative}
.auth-mark{width:46px;height:46px;border-radius:13px;margin-bottom:20px}
.auth-view{display:none;flex-direction:column}
.auth-view[data-on]{display:flex}
.auth-step{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);
  font-weight:700;margin:0 0 8px}
.auth-h{font-size:29px;margin:0 0 8px}
.auth-sub{font-size:13.5px;color:var(--tx2);line-height:1.6;margin:0 0 24px}
.fld{margin-bottom:16px}
.hint{font-size:11.5px;color:var(--tx3);margin:7px 2px 0}
.err{font-size:11.5px;color:var(--down);margin:7px 2px 0;font-weight:600}
.inp[aria-invalid="true"]{border-color:var(--down)}
.pw{position:relative;display:flex}
.pw .inp{padding-right:52px}
.pw-t{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:38px;height:34px;
  border:0;background:transparent;cursor:pointer;border-radius:999px;color:var(--tx3);
  display:grid;place-items:center}
.pw-t:hover{color:var(--tx)}
.pw-t::before{content:"Show";font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.pw-t[aria-pressed="true"]::before{content:"Hide"}
.auth-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:4px 2px 22px}
.chk{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--tx2);cursor:pointer}
.chk input{width:15px;height:15px;accent-color:var(--gold);cursor:pointer}
.auth-row a{font-size:12.5px;font-weight:600}
.auth-go{width:100%;padding:13px 22px;font-size:14px}
.auth-go[data-busy]{opacity:.72;pointer-events:none}
.auth-status{font-size:12.5px;line-height:1.6;margin:14px 0 0;padding:12px 15px;border-radius:13px;
  background:rgba(255,216,77,.09);border:1px solid rgba(255,216,77,.22);color:var(--tx)}
.auth-status[data-bad]{background:rgba(240,100,91,.1);border-color:rgba(240,100,91,.3)}
.auth-note{font-size:11.5px;color:var(--tx3);text-align:center;margin:16px 0 0;line-height:1.6}
.auth-alt{font-size:12.5px;color:var(--tx2);text-align:center;margin:18px 0 0}
.auth-foot{font-size:11px;color:var(--tx3);text-align:center;max-width:452px;margin:0}
.otp{display:flex;gap:11px}
.otp-b{flex:1;min-width:0;height:62px;text-align:center;font-family:var(--fd);font-size:24px;
  font-weight:600;color:var(--tx);background:rgba(255,255,255,.04);border:1px solid var(--line);
  border-radius:16px;outline:none;transition:border-color .16s,background .16s}
.otp-b:focus{border-color:var(--gold);background:rgba(255,255,255,.07)}
.otp-b[aria-invalid="true"]{border-color:var(--down)}
.auth-tick{width:52px;height:52px;border-radius:999px;display:grid;place-items:center;margin-bottom:18px;
  background:rgba(62,207,142,.14);color:var(--up)}
.auth-tick svg{width:24px;height:24px}
.resend-b{background:none;border:0;color:var(--gold);font-weight:700;font-size:11.5px;cursor:pointer;
  padding:0;font-family:var(--fb)}
.resend-b:hover{color:var(--gold2)}

/* — tables scroll inside their card rather than widening the page.
     Flex and grid items default to min-width:auto, so every ancestor of the
     scroller has to be told it may shrink — otherwise the table still wins. — */
.tblx{max-width:100%;min-width:0;overflow-x:auto;overscroll-behavior-x:contain}
:where(*):has(.tblx){min-width:0}

/* — notice for controls the design shows but nothing is wired to yet — */
.toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,14px);z-index:130;
  background:var(--card2);border:1px solid var(--line2);color:var(--tx);border-radius:999px;
  padding:11px 20px;font-size:12.5px;font-weight:600;box-shadow:0 18px 50px rgba(0,0,0,.6);
  opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;max-width:calc(100vw - 32px)}
.toast[data-on]{opacity:1;transform:translate(-50%,0)}

/* — mobile menu button (the design's nav is desktop-only) — */
.navbar{position:relative}
.mnav{display:none;background:transparent;border:1px solid var(--line2);
  color:var(--tx);border-radius:11px;padding:8px 10px;cursor:pointer}


@media (max-width:900px){
  .mnav{display:inline-flex;align-items:center}
  nav[style*="display:flex"]{display:none!important;position:absolute;top:100%;left:0;right:0;
    flex-direction:column!important;flex-wrap:nowrap!important;align-items:stretch!important;gap:0!important;
    background:var(--card);border-bottom:1px solid var(--line);padding:8px!important;
    max-height:72vh;overflow:auto}
  body[data-menu] nav[style*="display:flex"]{display:flex!important}
  body[data-menu] .mi>a{padding:12px 14px!important;font-size:14px!important}
  .mi{display:block!important}
  .sub{position:static!important;opacity:1!important;visibility:visible!important;transform:none!important;
    box-shadow:none!important;border:0!important;background:transparent!important;
    min-width:0!important;padding:0 0 6px 12px!important}
  .mi>a .cr{display:none}

  [style*="max-width:1180px"]{padding-left:16px!important;padding-right:16px!important}
  [style*="display:flex"]{flex-wrap:wrap!important}
  /* the header bar is the one row that must stay on a single line */
  .navbar{flex-wrap:nowrap!important;gap:10px!important;padding-left:16px!important;padding-right:16px!important}
  .navbar > [style*="margin-left:auto"]{flex:none;flex-wrap:nowrap!important;gap:6px!important}
  .navbar img[alt="Tradevix"]{height:26px!important}
  .navbar .btn2{padding:9px 13px!important;font-size:12.5px!important}
  .navbar .bt{padding:9px 4px!important}
  [style*="grid-template-columns"]{grid-template-columns:1fr!important}
  [style*="width:420px"],[style*="width:480px"],[style*="width:380px"],
  [style*="width:340px"],[style*="width:320px"]{width:100%!important;flex:1 1 100%!important}
  [style*="padding:52px 30px"],[style*="padding:0 30px"]{padding-left:16px!important;padding-right:16px!important}
  .tblx table{min-width:540px}
  .auth{padding:32px 16px 48px;min-height:0}
  .auth-card{padding:28px 22px 24px}
  .auth-h{font-size:25px!important}
  .otp-b{height:56px;font-size:21px}
  h1{font-size:36px!important}
  h2{font-size:27px!important}
  h3{font-size:21px!important}
}
@media (max-width:520px){
  h1{font-size:30px!important}
}
@media (prefers-reduced-motion:reduce){
  .tick{animation:none!important}
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}