:root{
  --bg:#0d1117;--bg2:#111721;--panel:#161c26;--panel2:#1b2230;--line:#252d3b;--line2:#30394a;
  --text:#e8ebf0;--muted:#8e97a8;--faint:#5d6677;
  --gold:#e2b646;--gold2:#f3d27a;--gold-ink:#1b1403;
  --up:#2ebd85;--down:#f0616d;
  --font:"Cairo",system-ui,sans-serif;--mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --r:8px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--bg);color:var(--text);font-family:var(--font);font-weight:400;font-size:15px;line-height:1.7;display:flex;flex-direction:column;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input{font:inherit;color:inherit}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}
.hint{color:var(--muted);font-size:.86rem}
.up{color:var(--up)} .down{color:var(--down)} .gold-t{color:var(--gold2)}
:focus-visible{outline:2px solid var(--gold2);outline-offset:2px}

/* top bar */
.top{height:56px;display:flex;align-items:center;gap:28px;padding:0 20px;background:var(--bg2);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.08em;color:var(--gold2);font-size:1.15rem}
.logo img{width:34px;height:34px;border-radius:6px}
#nav{display:flex;gap:6px}
#nav a{padding:6px 14px;border-radius:6px;color:var(--muted);font-weight:500}
#nav a:hover{color:var(--text);background:var(--panel)}
#nav a.on{color:var(--text);background:var(--panel2)}
.acct{margin-inline-start:auto;display:flex;gap:10px;align-items:center;font-size:.92rem}
.acct .name{color:var(--muted)}
.acct .pill{padding:3px 10px;border-radius:999px;border:1px solid var(--line2);font-size:.78rem}
.acct .pill.ok{border-color:var(--up);color:var(--up)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 18px;border-radius:var(--r);border:1px solid var(--line2);background:var(--panel);font-weight:600;cursor:pointer;transition:.15s;white-space:nowrap}
.btn:hover{background:var(--panel2);border-color:var(--faint)}
.btn.gold{background:var(--gold);color:var(--gold-ink);border-color:var(--gold)} .btn.gold:hover{background:var(--gold2)}
.btn.sm{padding:5px 12px;font-size:.85rem}
.btn.wide{width:100%}
.btn[disabled]{opacity:.5;cursor:not-allowed}

main{flex:1;display:flex;flex-direction:column}
section{width:100%;max-width:1240px;margin-inline:auto;padding:32px 20px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px}
h1{font-size:clamp(1.7rem,3.6vw,2.6rem);font-weight:800;line-height:1.3;text-wrap:balance}
h2{font-size:1.5rem;font-weight:700;margin-bottom:6px}
h3{font-size:1.1rem;font-weight:700}
h4{font-size:.85rem;font-weight:700;color:var(--muted);letter-spacing:.04em;margin-bottom:10px;display:flex;justify-content:space-between;align-items:center}

/* home */
.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center;padding-top:56px}
.hero p{color:var(--muted);font-size:1.08rem;max-width:36rem;margin:14px 0 22px}
.hero .row{display:flex;gap:12px;flex-wrap:wrap}
.hero-shot img{border-radius:12px;border:1px solid var(--line);box-shadow:0 24px 60px rgba(0,0,0,.5)}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.three .card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px}
.three b{display:block;color:var(--gold2);margin-bottom:6px;font-weight:700}
.three p{color:var(--muted);font-size:.95rem}
@media(max-width:860px){.hero{grid-template-columns:1fr}.three{grid-template-columns:1fr}}

/* auth */
.auth{max-width:440px}
.auth form{display:flex;flex-direction:column;gap:14px}
label{display:flex;flex-direction:column;gap:6px;font-size:.9rem;color:var(--muted);font-weight:500}
input:not([type=checkbox]){background:var(--bg);border:1px solid var(--line2);border-radius:6px;padding:10px 12px;color:var(--text)}
input:focus{border-color:var(--gold)}
.err{color:var(--down);font-size:.88rem;min-height:1.2em}
.alt{color:var(--muted);font-size:.9rem;text-align:center}
.alt a{color:var(--gold2)}

/* plans */
.plans .sub{color:var(--muted);margin-bottom:22px}
.plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.plan{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:22px;display:flex;flex-direction:column;gap:10px}
.plan.hot{border-color:var(--gold)}
.plan .price{font-family:var(--mono);font-size:2rem;color:var(--gold2);direction:ltr;text-align:right}
.plan .price small{font-family:var(--font);font-size:.9rem;color:var(--muted)}
.plan ul{list-style:none;color:var(--muted);font-size:.93rem;flex:1;display:grid;gap:4px}
.plan li::before{content:"✓";color:var(--up);margin-inline-end:8px}
.plan .bots-in{display:flex;gap:6px;flex-wrap:wrap}
.plan .bots-in span{font-size:.74rem;padding:2px 8px;border-radius:999px;background:var(--panel2);border:1px solid var(--line2)}
.checkout{margin-top:22px;display:grid;gap:8px}
.checkout .ref{font-family:var(--mono);font-size:1.4rem;color:var(--gold2);direction:ltr;text-align:right}
@media(max-width:860px){.plan-grid{grid-template-columns:1fr}}

/* bots */
.bots .head{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.bots .head p{color:var(--muted)}
.bot-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.bot{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px;display:flex;flex-direction:column;gap:10px}
.bot .nm{font-family:var(--mono);color:var(--gold2);font-size:.82rem;direction:ltr;text-align:right}
.bot .st{display:flex;align-items:center;gap:8px;font-size:.8rem;color:var(--muted)}
.bot .st i{width:8px;height:8px;border-radius:50%;background:var(--faint)} .bot .st.online i{background:var(--up);box-shadow:0 0 0 4px rgba(46,189,133,.15)}
.bot p{color:var(--muted);font-size:.9rem;flex:1}
.bot .stats{display:grid;grid-template-columns:1fr 1fr;gap:6px;font-size:.82rem;color:var(--muted)}
.bot .stats b{display:block;font-family:var(--mono);color:var(--text);font-size:1rem}
.switch{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:8px;border-top:1px solid var(--line);font-size:.9rem}
.sw{width:44px;height:24px;border-radius:999px;background:var(--line2);position:relative;cursor:pointer;border:0;transition:.15s}
.sw::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:.15s}
.sw.on{background:var(--up)} .sw.on::after{inset-inline-start:23px}
.sw[disabled]{opacity:.4;cursor:not-allowed}
.signals{margin-top:18px}
.sig-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px;flex-wrap:wrap}
table{width:100%;border-collapse:collapse;font-size:.88rem}
th{color:var(--muted);font-weight:600;text-align:right;padding:6px 8px;border-bottom:1px solid var(--line)}
td{padding:6px 8px;border-bottom:1px solid var(--line)}
.tbl-wrap{overflow-x:auto}
.admin{margin-top:18px}
@media(max-width:1000px){.bot-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.bot-grid{grid-template-columns:1fr}}

/* terminal */
.term{max-width:none;padding:0;display:grid;grid-template-columns:220px 1fr 300px;height:calc(100vh - 56px);min-height:0}
.inst-list{border-inline-end:1px solid var(--line);background:var(--bg2);display:flex;flex-direction:column;min-height:0;overflow:hidden}
.inst-list input{margin:10px;border-radius:6px}
#inst-rows{overflow-y:auto;flex:1}
.inst-row{display:flex;justify-content:space-between;padding:6px 12px;font-size:.82rem;cursor:pointer;border-bottom:1px solid var(--line)}
.inst-row:hover,.inst-row.on{background:var(--panel2)}
.inst-row b{font-family:var(--mono);font-weight:500;direction:ltr}
.chart-area{display:flex;flex-direction:column;min-width:0;min-height:0}
.toolbar{display:flex;align-items:center;gap:18px;padding:8px 14px;border-bottom:1px solid var(--line);background:var(--bg2);flex-wrap:wrap}
.toolbar .sym{display:flex;gap:12px;align-items:baseline}
.toolbar .sym b{font-family:var(--mono);font-size:1.05rem;direction:ltr}
.tfs{display:flex;gap:2px;background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:2px}
.tfs button{border:0;background:transparent;padding:3px 9px;border-radius:4px;font-family:var(--mono);font-size:.8rem;color:var(--muted);cursor:pointer}
.tfs button.on{background:var(--panel2);color:var(--text)}
.toggles{display:flex;gap:14px;font-size:.82rem;color:var(--muted);margin-inline-start:auto}
.toggles label{flex-direction:row;align-items:center;gap:6px}
.chart-wrap{position:relative;flex:1;min-height:380px;background:var(--bg)}
#chart{position:absolute;inset:0}
#heat{position:absolute;inset:0;pointer-events:none;z-index:2;mix-blend-mode:screen}
.heat-legend{position:absolute;left:10px;bottom:28px;z-index:3;display:flex;align-items:center;gap:6px;font-size:.7rem;color:var(--muted);direction:ltr}
.heat-legend i{width:70px;height:6px;border-radius:3px;background:linear-gradient(90deg,#0b2a3a,#1f6f9a,#f2c94c,#ff5e3a)}
.tape-bar{height:34px;border-top:1px solid var(--line);display:flex;align-items:center;gap:14px;padding:0 12px;overflow:hidden;font-family:var(--mono);font-size:.75rem;direction:ltr;white-space:nowrap}
.tape-bar span.b{color:var(--up)} .tape-bar span.s{color:var(--down)}
.side{border-inline-start:1px solid var(--line);background:var(--bg2);display:flex;flex-direction:column;gap:10px;padding:10px;overflow-y:auto;min-height:0}
.side .panel{padding:12px}
.data dl{display:grid;grid-template-columns:1fr auto;gap:4px 10px;font-size:.86rem}
.data dt{color:var(--muted)} .data dd{font-family:var(--mono);direction:ltr;text-align:right}
.dom{font-family:var(--mono);font-size:.76rem;direction:ltr}
.dom-row{display:grid;grid-template-columns:1fr 1fr 1fr;position:relative;padding:1px 6px;line-height:1.5}
.dom-row i{position:absolute;top:0;bottom:0;opacity:.18}
.dom-row.a i{right:0;background:var(--down)} .dom-row.b i{right:0;background:var(--up)}
.dom-row .px{text-align:center} .dom-row.a .px{color:var(--down)} .dom-row.b .px{color:var(--up)}
.dom-row .sz{text-align:right} .dom-row .cum{color:var(--muted)}
.dom-mid{text-align:center;padding:3px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);color:var(--gold2);margin:3px 0}
.botsig .row{display:flex;justify-content:space-between;font-size:.85rem;padding:4px 0;border-bottom:1px solid var(--line)}
@media(max-width:1100px){.term{grid-template-columns:1fr}.inst-list{max-height:180px}.side{flex-direction:row;flex-wrap:wrap}.side .panel{flex:1;min-width:240px}}

/* admin */
.adminpg{display:grid;gap:16px}
.adminpg .head{margin-bottom:4px}
.kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:14px;display:flex;flex-direction:column;gap:2px}
.kpi .l{color:var(--muted);font-size:.8rem}.kpi b{font-size:1.5rem;color:var(--gold2);direction:ltr;text-align:right}.kpi .s{color:var(--faint);font-size:.76rem}
.adminpg h3{margin-bottom:10px}
.grant{display:flex;gap:6px;align-items:center}
select{background:var(--bg);border:1px solid var(--line2);border-radius:6px;padding:4px 8px;color:var(--text);font:inherit;font-size:.82rem}
@media(max-width:1000px){.kpis{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.kpis{grid-template-columns:repeat(2,1fr)}}

/* BGX chart skin */
.chart-wrap{background:#0a0a0a url(../assets/chart_bg.jpg) center/cover no-repeat}
.chart-wrap::before{content:"";position:absolute;inset:0;background:rgba(8,8,10,.58);z-index:1}
#chart{z-index:2}
#heat{z-index:3}
#anno{position:absolute;inset:0;pointer-events:none;z-index:4}
.chart-title{position:absolute;top:10px;left:14px;z-index:5;display:flex;align-items:center;gap:10px;direction:ltr;font-family:var(--mono);color:#f3d27a}
.chart-title b{font-size:1.3rem;font-weight:700;color:#fff}
.chart-title span{color:#cfc7a8;font-size:.8rem}
.chart-title em{font-style:normal;font-weight:700;font-size:.78rem;padding:3px 10px;border-radius:4px;background:#e2b646;color:#1b1403}
.chart-title em.bear{background:#f0616d;color:#fff}
.heat-legend{z-index:5}

/* ── mobile ─────────────────────────────────────────────────────────── */
html,body{max-width:100%;overflow-x:hidden}
.top{flex-wrap:nowrap}
@media(max-width:760px){
  .top{height:auto;min-height:52px;padding:8px 12px;gap:10px;flex-wrap:wrap}
  .logo{font-size:1rem}.logo img{width:28px;height:28px}
  #nav{position:fixed;bottom:0;left:0;right:0;z-index:40;background:var(--bg2);border-top:1px solid var(--line);justify-content:space-around;gap:0;padding:8px 0 calc(8px + env(safe-area-inset-bottom))}
  #nav a{padding:6px 10px;font-size:.9rem}
  main{padding-bottom:64px}
  .top{flex-wrap:nowrap;height:52px;padding:0 12px}
  .acct{margin-inline-start:auto;gap:6px}
  .acct .name{display:none}
  .btn.sm{padding:6px 10px;font-size:.82rem}
  section{padding:22px 14px}
  .hero{padding-top:18px;gap:22px}.hero p{font-size:.98rem}
  .hero-shot{max-width:320px;margin-inline:auto}
  h1{font-size:1.55rem}h2{font-size:1.25rem}
  .bot-grid{grid-template-columns:1fr}
  .auth{max-width:none}
  .term{grid-template-columns:1fr;grid-template-rows:auto auto auto;height:auto;min-height:calc(100vh - 90px)}
  .inst-list{max-height:150px;border-inline-end:0;border-bottom:1px solid var(--line)}
  .chart-wrap{min-height:360px;height:60vh}
  .toolbar{gap:8px}.toggles{margin-inline-start:0;width:100%;justify-content:space-between}
  .side{flex-direction:column}
  .kpis{grid-template-columns:repeat(2,1fr)}
}

/* open trades list */
.list-h{padding:10px 12px 4px;margin:0}
.open-rows{overflow-y:auto;max-height:46vh}
.open-row{padding:8px 12px;border-bottom:1px solid var(--line);cursor:pointer;display:grid;gap:2px}
.open-row:hover,.open-row.on{background:var(--panel2)}
.open-row .l1,.open-row .l2{display:flex;justify-content:space-between;align-items:center;font-size:.84rem}
.open-row b{font-family:var(--mono);font-weight:600;direction:ltr}
.open-row .r{font-size:.82rem}
.pad{padding:8px 12px}
.all-inst{border-top:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
.all-inst summary{padding:8px 12px;cursor:pointer;color:var(--muted);font-size:.86rem}
.all-inst[open]{flex:1}

/* site admin + footer */
.site-grid{display:grid;grid-template-columns:260px 1fr;gap:22px;align-items:start}
.logo-box{display:flex;flex-direction:column;gap:10px;align-items:center;text-align:center;background:var(--bg);border:1px dashed var(--line2);border-radius:var(--r);padding:18px}
.logo-box img{width:120px;height:120px;object-fit:contain;border-radius:12px;background:var(--panel2)}
.site-form{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.site-form .row{grid-column:1/-1;display:flex;gap:12px;align-items:center}
.site-footer{border-top:1px solid var(--line);background:var(--bg2);margin-top:auto}
.sf-in{max-width:1240px;margin-inline:auto;padding:18px 20px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center;font-size:.9rem}
.sf-contact{display:flex;gap:16px;align-items:center;flex-wrap:wrap}.sf-contact b{color:var(--gold2)}
.sf-contact a{color:var(--text);border-bottom:1px solid var(--line2)}.sf-contact a:hover{color:var(--gold2)}
.sf-foot{color:var(--faint);font-size:.82rem}
.term ~ .site-footer, body:has(.term) .site-footer{display:none}
@media(max-width:860px){.site-grid{grid-template-columns:1fr}.site-form{grid-template-columns:1fr}}

/* account */
.acc-grid{display:grid;grid-template-columns:1.4fr .8fr;gap:16px;align-items:start}
.stack{display:grid;gap:10px}
.key{border:1px solid var(--line);border-radius:var(--r);padding:14px;margin-top:12px;display:grid;gap:8px;background:var(--bg)}
.key-h{display:flex;justify-content:space-between;align-items:center}.key-h b{font-size:1.05rem}
.key-info{color:var(--muted);font-size:.85rem}.key-bal{font-size:.9rem;min-height:1.2em}
.warn{color:var(--gold2)}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
@media(max-width:860px){.acc-grid{grid-template-columns:1fr}}
[hidden]{display:none!important}
.bots-preview .head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.plans .head{margin-bottom:2px}
@media(max-width:760px){#nav a{padding:6px 6px;font-size:.82rem}}
.live{font-family:var(--mono);font-size:.66rem;padding:2px 7px;border-radius:999px;border:1px solid var(--line2);color:var(--muted);letter-spacing:.08em}
.live.on{color:var(--up);border-color:var(--up);box-shadow:0 0 0 3px rgba(46,189,133,.12)}
