:root{
  --bg:#06080b; --bg2:#0d1117; --card:#111820; --line:#1c2530;
  --txt:#e8edf2; --muted:#8b97a6; --accent:#00e08a; --accent2:#12b3ff; --gold:#e5b53a; --red:#ff4d5e;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--txt);font-family:'Segoe UI',system-ui,-apple-system,sans-serif;overflow-x:hidden}
a{text-decoration:none}
::selection{background:rgba(0,224,138,.3)}

/* NAV */
.navbar{background:rgba(6,8,11,.8);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.brand{font-weight:800;letter-spacing:.5px;color:#fff}
.brand span{color:var(--accent)}
.nav-link{color:var(--muted)!important;transition:.2s}
.nav-link:hover{color:#fff!important}

/* CARDS + BUTTONS */
.card{background:linear-gradient(180deg,#131b24,#0f151c);border:1px solid var(--line);border-radius:16px;transition:transform .25s,border-color .25s,box-shadow .25s}
.card:hover{border-color:#26333f}
.text-accent{color:var(--accent)!important}
.text-muted2{color:var(--muted)!important}
.btn{transition:.2s;border-radius:10px}
.btn-accent{background:linear-gradient(135deg,var(--accent),#00c47a);color:#04140d;font-weight:700;border:0;box-shadow:0 8px 24px -8px rgba(0,224,138,.6)}
.btn-accent:hover{filter:brightness(1.1);color:#04140d;transform:translateY(-2px);box-shadow:0 12px 30px -8px rgba(0,224,138,.75)}
.btn-ghost{border:1px solid var(--line);color:var(--txt);background:transparent}
.btn-ghost:hover{border-color:var(--accent);color:#fff;transform:translateY(-1px)}
.btn-buy{background:linear-gradient(135deg,var(--accent),#00c47a);color:#04140d;border:0}
.btn-buy:hover{filter:brightness(1.1);color:#04140d}
.btn-sell{background:linear-gradient(135deg,#ff4d5e,#e5384a);color:#fff;border:0}
.btn-sell:hover{filter:brightness(1.08);color:#fff}

/* HERO */
.hero{position:relative;padding:clamp(70px,11vw,120px) 0 60px;text-align:center;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(900px 420px at 50% -8%,rgba(0,224,138,.20),transparent 60%),
             radial-gradient(700px 340px at 82% 8%,rgba(18,179,255,.14),transparent 60%);
  animation:floaty 9s ease-in-out infinite alternate}
@keyframes floaty{from{transform:translateY(0)}to{transform:translateY(24px)}}
.hero h1{font-size:clamp(2rem,7vw,3.6rem);font-weight:800;line-height:1.06;margin-bottom:18px}
.hero h1 .g{background:linear-gradient(90deg,var(--accent),var(--accent2),var(--accent));background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 4s linear infinite}
@keyframes shine{to{background-position:200% center}}
.hero p{color:var(--muted);font-size:clamp(1rem,2.6vw,1.2rem);max-width:640px;margin:0 auto 28px;padding:0 14px}
.pill{display:inline-block;padding:7px 16px;border:1px solid rgba(0,224,138,.35);border-radius:999px;color:var(--accent);font-size:.85rem;margin-bottom:22px;background:rgba(0,224,138,.06);box-shadow:0 0 0 0 rgba(0,224,138,.5);animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(0,224,138,.45)}70%{box-shadow:0 0 0 12px rgba(0,224,138,0)}100%{box-shadow:0 0 0 0 rgba(0,224,138,0)}}

/* SECTIONS */
.reveal{opacity:0;transform:translateY(22px);animation:rise .8s forwards}
@keyframes rise{to{opacity:1;transform:none}}
.stat{font-size:2rem;font-weight:800;text-shadow:0 0 24px rgba(0,224,138,.35)}
.step{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--accent),#00c47a);color:#04140d;font-weight:800;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;box-shadow:0 8px 20px -6px rgba(0,224,138,.6)}
.price{font-size:2.4rem;font-weight:800;color:#fff;text-shadow:0 0 18px rgba(255,255,255,.18)}
.plan-featured{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 24px 70px -34px rgba(0,224,138,.6);transform:translateY(-6px)}
.plan-featured:hover{transform:translateY(-10px)}
.badge-soft{background:rgba(0,224,138,.14);color:var(--accent);border:1px solid rgba(0,224,138,.35)}
.rule-h{display:flex;align-items:center;gap:7px;font-size:.68rem;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:#c3ccd6;margin:13px 0 6px;padding:3px 0 3px 9px;border-left:3px solid var(--accent)}
.rule-h.funded{border-left-color:#12b3ff}

/* Botón "Funded Rules" + popup (estilo Lucid) */
.fr-btn{background:transparent;border:1px solid var(--line);color:var(--txt);border-radius:10px;padding:9px;font-weight:700;font-size:.9rem;cursor:pointer;transition:.15s;width:100%}
.fr-btn:hover{border-color:#12b3ff;color:#fff}
.fr-overlay{display:none;position:fixed;inset:0;background:rgba(2,4,7,.72);z-index:1000;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(3px)}
.fr-overlay.open{display:flex}
.fr-modal{background:linear-gradient(180deg,#131b24,#0f151c);border:1px solid #26333f;border-radius:16px;max-width:420px;width:100%;padding:22px 24px;box-shadow:0 30px 80px -20px rgba(0,0,0,.8)}
.fr-modal-head{display:flex;justify-content:space-between;align-items:center;font-weight:800;font-size:1.02rem;margin-bottom:6px;color:#fff}
.fr-sub{color:var(--muted);font-size:.8rem;margin-bottom:14px}
.fr-x{cursor:pointer;color:var(--muted);font-size:1.25rem;line-height:1;border:0;background:none}
.fr-x:hover{color:#fff}
.fr-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--line);font-size:.9rem}
.fr-row:last-child{border-bottom:0}
.fr-row span{color:var(--muted)}
.fr-row b{color:#fff;font-weight:700}
.faq summary{cursor:pointer;padding:16px 0;border-bottom:1px solid var(--line);font-weight:600;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;color:var(--accent)}
.faq details[open] summary::after{content:"–"}
.faq p{color:var(--muted);padding:0 0 16px}
.marquee{overflow:hidden;white-space:nowrap;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:14px 0}
.marquee span{display:inline-block;padding-left:100%;animation:scroll 18s linear infinite;color:var(--muted);font-weight:600;letter-spacing:2px}
@keyframes scroll{to{transform:translateX(-100%)}}

/* TABLES */
table.tbl{width:100%}
.tbl th{color:var(--muted);font-size:.8rem;font-weight:600;border-bottom:1px solid var(--line);padding:10px 8px;text-align:left}
.tbl td{padding:12px 8px;border-bottom:1px solid var(--line)}
.progress{background:#0a1017;border-radius:999px;overflow:hidden}
.progress-bar{background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .5s}

/* TERMINAL */
.term .acct-bar{background:linear-gradient(180deg,#0f1720,#0c121a)}
.term .metric .lbl{color:var(--muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.5px}
.term .metric .val{font-size:1.15rem;font-weight:800}
.term .acct-input{background:#0a1017;border:1px solid var(--line);color:#fff;border-radius:8px;padding:4px 10px;width:120px;font-weight:700}

footer{border-top:1px solid var(--line);color:var(--muted)}

/* Extra landing bits */
.fic{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.6rem;background:rgba(0,224,138,.10);border:1px solid rgba(0,224,138,.25);margin-bottom:14px}
.compare td,.compare th{padding:14px 12px}
.compare tbody tr:hover{background:rgba(255,255,255,.02)}
.annc{background:linear-gradient(90deg,#00c47a,#00e08a);color:#04140d;text-align:center;font-weight:700;font-size:.9rem;padding:8px 12px}
.annc a{color:#04140d;text-decoration:underline}
.ftr-col h6{color:#fff;font-weight:700;margin-bottom:12px}
.ftr-col a{display:block;color:var(--muted);padding:4px 0}
.ftr-col a:hover{color:var(--accent)}

/* DOM ladder (TopstepX style) */
.dom-head{display:grid;grid-template-columns:1fr 1.2fr 1fr;text-align:center;font-size:.7rem;color:var(--muted);padding:8px;border-bottom:1px solid var(--line);letter-spacing:2px;font-weight:700}
.ladder{max-height:520px;overflow-y:auto}
.ladder::-webkit-scrollbar{width:6px}.ladder::-webkit-scrollbar-thumb{background:#26333f;border-radius:3px}
.lad-row{display:grid;grid-template-columns:1fr 1.2fr 1fr;text-align:center;border-bottom:1px solid #10171e;font-variant-numeric:tabular-nums;font-size:.85rem}
.lad-sell{padding:6px;color:#ff8a94;background:rgba(255,77,94,.06);cursor:pointer;transition:.1s}
.lad-sell:hover{background:rgba(255,77,94,.28);color:#fff}
.lad-buy{padding:6px;color:#7ef0c0;background:rgba(0,224,138,.06);cursor:pointer;transition:.1s}
.lad-buy:hover{background:rgba(0,224,138,.28);color:#fff}
.lad-price{padding:6px;font-weight:700;color:#cdd7e1;background:#0b1219}
.lad-last .lad-price{color:#04140d;background:var(--accent)}
.lad-last{box-shadow:inset 0 0 0 1px var(--accent)}
.qbtn{background:#0a1017;border:1px solid var(--line);color:var(--txt);border-radius:7px;padding:5px 11px;font-weight:700;font-size:.82rem;cursor:pointer;transition:.15s}
.qbtn:hover{border-color:var(--accent);color:#fff}

/* ===== TopstepX-style full terminal ===== */
body.tsx{background:#06090d;height:100vh;overflow:hidden}
.tsxbar{height:54px;background:#0c1219;border-bottom:1px solid #1c2530}
.tsx-logo{color:#fff;font-weight:800;letter-spacing:1px;font-size:1.05rem}
.tsx-logo span{color:var(--accent)}
.tsx-acct{background:#121a23;border:1px solid #1c2530;border-radius:8px;padding:5px 10px;color:#cdd7e1;font-size:.85rem;display:flex;align-items:center}
.tsx-acct .dot,.ord-box .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);display:inline-block;margin-right:6px}
.tsx-pill{background:#121a23;border:1px solid #1c2530;border-radius:8px;padding:5px 12px;font-size:.85rem;display:flex;gap:8px;align-items:center}
.tsx-pill span{color:var(--muted);font-size:.7rem;letter-spacing:.5px}
.tsx-pill b{color:#fff}
.tsx-pill.green{background:#123527;border-color:#1c5a3f}.tsx-pill.green b{color:var(--accent)}
.tsx-mut{color:var(--muted)}
.tsx-body{display:flex;height:calc(100vh - 54px)}
.tsx-chart{flex:1;display:flex;flex-direction:column;min-width:0}
.tsx-chart-head{height:46px;border-bottom:1px solid #1c2530;color:#cdd7e1}
.tsx-tf{background:#121a23;border:1px solid #1c2530;border-radius:6px;padding:2px 8px;font-size:.8rem}
.tsx-chart-area{flex:1;min-height:0}
.ordp{width:340px;background:#0a1019;border-left:1px solid #1c2530;overflow-y:auto}
.ordp-tab{padding:10px 14px;border-bottom:1px solid #1c2530;color:#cdd7e1;font-weight:600}
.ord-lbl{color:var(--muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.5px;display:block;margin-bottom:4px}
.ord-box{background:#0f1620;border:1px solid #1c2530;border-radius:8px;padding:9px 12px;color:#e8edf2;font-weight:600}
.ord-input{background:#0f1620;border:1px solid #1c2530;border-radius:8px;padding:9px 12px;color:#fff;font-weight:700;width:100%;font-size:1.1rem}
.ord-quote{background:#0f1620;border:1px solid #1c2530;border-radius:8px;padding:8px 12px;font-size:.82rem;color:var(--muted)}
.ord-quote b{color:#cdd7e1}
.qrow{display:flex;gap:6px;justify-content:space-between}
.qpill{flex:1;background:#121a23;border:1px solid #1c2530;color:#cdd7e1;border-radius:999px;padding:7px 0;font-weight:700;font-size:.85rem;cursor:pointer;transition:.12s}
.qpill:hover{border-color:var(--accent);color:#fff}
.btn-tsx{border:0;border-radius:8px;padding:12px;font-weight:800;letter-spacing:.5px;color:#fff;cursor:pointer;transition:.12s}
.btn-tsx.buy{background:#12a06a}.btn-tsx.buy:hover{background:#14b878}
.btn-tsx.sell{background:#d63a4b}.btn-tsx.sell:hover{background:#e34456}
.btn-tsx.dark{background:#141c26;color:#cdd7e1;font-weight:700;font-size:.8rem;padding:10px}
.btn-tsx.dark:hover{background:#1b2632;color:#fff}

/* Terminal left rail */
.tsx-rail{width:56px;background:#0a0e14;border-right:1px solid #1c2530;display:flex;flex-direction:column;align-items:center;padding:12px 0;gap:6px}
.rail-i{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:9px;color:#8b97a6;font-size:1.1rem;text-decoration:none;transition:.15s}
.rail-i:hover{background:#141c26;color:#fff}
.rail-live{margin-top:8px;font-size:.6rem;font-weight:800;color:#04140d;background:var(--accent);border-radius:5px;padding:2px 5px;letter-spacing:1px}
.tsx-rail .mt-auto{margin-top:auto}

/* Settings screen (TopstepX Risk Settings) */
.rail-i.rail-on{background:#141c26;color:#fff}
.set-tabs{display:flex;gap:28px;border-bottom:1px solid #1c2530;font-size:.9rem;color:var(--muted)}
.set-tabs span{padding:10px 2px;cursor:pointer}
.set-tabs span.active{color:#fff;border-bottom:2px solid var(--gold)}
.set-group{color:var(--muted);font-size:.7rem;letter-spacing:1px;font-weight:700;padding:6px 4px;border-bottom:1px solid #151d26}
.set-item{display:flex;justify-content:space-between;align-items:center;padding:11px 8px;border-radius:8px;cursor:pointer;color:#cdd7e1}
.set-item:hover{background:#141c26}
.set-item.active{background:#141c26;box-shadow:inset 3px 0 0 var(--accent)}
.tag{font-size:.68rem;font-weight:800;color:var(--muted);border:1px solid #26333f;border-radius:5px;padding:2px 7px}
.tag.on{color:#04140d;background:var(--accent);border-color:var(--accent)}
.switch{position:relative;display:inline-block;width:44px;height:24px}
.switch input{display:none}
.sl{position:absolute;inset:0;background:#26333f;border-radius:999px;transition:.2s;cursor:pointer}
.sl:before{content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s}
.switch input:checked + .sl{background:var(--accent)}
.switch input:checked + .sl:before{transform:translateX(20px)}
select.ord-box{background:#0f1620;color:#fff;border:1px solid #1c2530}

.brk-set{color:var(--accent);font-size:.72rem;text-decoration:none}
.brk-set:hover{text-decoration:underline}
.brk .ord-input{font-size:.95rem;padding:7px 10px}

/* Advanced chart overlay (draggable SL/TP + context menu) */
.tsx-chart .chart-wrap{position:relative;flex:1;min-height:0}
.tsx-chart .chart-wrap #chart{position:absolute;inset:0}
.ovl{position:absolute;inset:0;pointer-events:none;z-index:5}
.ov-row{position:absolute;left:0;right:64px;height:0;border-top:2px dashed;display:flex;justify-content:flex-end;align-items:center}
.ov-tab{pointer-events:auto;cursor:ns-resize;transform:translateY(-50%);font-size:.72rem;font-weight:800;color:#04140d;padding:2px 8px;border-radius:5px;white-space:nowrap}
#ov-entry .ov-tab{cursor:grab}
.ctx{position:absolute;display:none;background:#0f1620;border:1px solid #1c2530;border-radius:8px;z-index:20;min-width:180px;overflow:hidden;box-shadow:0 12px 34px rgba(0,0,0,.55)}
.ctx div{padding:9px 14px;color:#cdd7e1;font-size:.85rem;cursor:pointer}
.ctx div:hover{background:#141c26;color:#fff}

/* ===== Panel con sidebar (usuarios logueados, estilo LEGENDS) ===== */
.app{display:flex;min-height:100vh}
.side{width:236px;background:#0a0e13;border-right:1px solid var(--line);display:flex;flex-direction:column;padding:16px 12px;position:sticky;top:0;height:100vh;flex-shrink:0}
.side .brand{font-size:1.35rem;padding:6px 8px 14px;display:block}
.side .shopbtn{display:flex;align-items:center;gap:8px;justify-content:center;background:linear-gradient(135deg,var(--accent),#00c47a);color:#04140d;font-weight:800;border-radius:10px;padding:11px;margin-bottom:14px;box-shadow:0 8px 20px -8px rgba(0,224,138,.6)}
.side .shopbtn:hover{filter:brightness(1.06);color:#04140d}
.side-link{display:flex;align-items:center;gap:11px;color:var(--muted);padding:10px 12px;border-radius:9px;font-weight:600;font-size:.92rem;transition:.15s;margin-bottom:2px}
.side-link .i{width:20px;text-align:center;font-size:1rem}
.side-link:hover{background:#141c26;color:#fff}
.side-link.on{background:#141c26;color:#fff;box-shadow:inset 3px 0 0 var(--accent)}
.side .logout{margin-top:auto;color:#ff8a94}
.appmain{flex:1;min-width:0;display:flex;flex-direction:column}
.apptop{height:58px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:flex-end;gap:16px;padding:0 22px;background:rgba(10,14,19,.7);position:sticky;top:0;z-index:20;backdrop-filter:blur(8px)}
.appbody{flex:1;padding:26px 26px 60px}
@media(max-width:860px){
  .side{width:60px;padding:14px 6px}
  .side-link{justify-content:center;padding:11px 0}
  .side-link .lbl,.side .brand span:not(:first-child),.side .shopbtn .lbl{display:none}
  .side .brand{font-size:1rem;text-align:center;padding:6px 0 12px}
  .appbody{padding:16px}
}

/* Panel dashboard bits (overview estilo LEGENDS) */
.ov-actions .btn{border-radius:10px}
.ov-chart{background:linear-gradient(180deg,#0f151c,#0c1219);border:1px solid var(--line);border-radius:14px;padding:18px}
.ov-legend span{font-size:.78rem;color:var(--muted);margin-left:14px}
.ov-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px;vertical-align:middle}
.calc-card{background:linear-gradient(180deg,#131b24,#0f151c);border:1px solid var(--line);border-radius:14px;padding:18px}
.calc-card .k{color:var(--muted);font-size:.8rem}
.calc-card .v{font-size:1.9rem;font-weight:800;margin-top:4px}
.acct-select{background:#0a1017;border:1px solid var(--line);color:#fff;border-radius:10px;padding:9px 14px;font-weight:700;min-width:240px;max-width:100%}

/* ===== MÓVIL / TELÉFONO ===== */
@media(max-width:600px){
  /* Menú superior: fila horizontal compacta y centrada debajo de la marca */
  .navbar .container{flex-wrap:wrap;row-gap:6px}
  .navbar-brand{margin-right:auto}
  .navbar .navbar-nav{width:100%!important;flex-direction:row!important;flex-wrap:wrap;justify-content:center;align-items:center;gap:.1rem .35rem!important;margin-left:0!important}
  .navbar .nav-link{padding:.3rem .5rem;font-size:.88rem}
  .navbar .btn-accent{padding:.35rem .9rem}

  /* Barra de anuncio más compacta */
  .annc{font-size:.78rem;padding:7px 10px;line-height:1.3}

  /* Textos grandes que se veían enormes */
  .stat{font-size:1.5rem}
  .price{font-size:2rem}
  h2.fw-bold{font-size:1.5rem}

  /* Botones del hero a lo ancho para tocarlos fácil */
  .hero .btn-lg{flex:1 1 auto;min-width:46%}

  /* Selectores y anchos fijos que se salían */
  .acct-select{min-width:0;width:100%}
  .term .acct-input{width:100%}

  /* Panel de usuario logueado */
  .appbody{padding:14px 12px 48px}
  .apptop{padding:0 14px}

  /* Tablas anchas: permitir scroll horizontal en vez de desbordar */
  .table-responsive-x{overflow-x:auto;-webkit-overflow-scrolling:touch}
  table.tbl{min-width:520px}
}

/* Terminal TopstepX: en pantallas pequeñas se apila (chart arriba, orden abajo) */
@media(max-width:820px){
  .tsx-body{flex-direction:column;height:auto}
  .tsx-rail{width:100%;flex-direction:row;justify-content:center;border-right:0;border-bottom:1px solid #1c2530;padding:8px 0}
  .tsx-rail .mt-auto{margin-top:0}
  .tsx-chart{min-height:60vh}
  .ordp{width:100%;border-left:0;border-top:1px solid #1c2530}
  body.tsx{height:auto;overflow:auto}
}