/* ============================================================
   OX-ENGINE app mockups — faithful to the real Telegram WebApp.
   Mirrors the real component system: bg #0A0A0F, cards #15151F,
   top .user-tabs, .status-grid, .stat-card (colored top border),
   .seg-row, subtle .status-pill (green text when active), mono data.
   ============================================================ */
.phone{position:relative;width:250px;max-width:80vw;aspect-ratio:9/19;background:#15151f;border-radius:32px;
  border:1px solid rgba(255,255,255,.1);box-shadow:0 30px 70px rgba(0,0,0,.5),0 0 0 8px #0c0c12,0 0 0 9px rgba(255,165,0,.12);
  padding:9px 9px 0;overflow:hidden}
.phone::before{content:"";position:absolute;top:11px;left:50%;transform:translateX(-50%);width:66px;height:5px;border-radius:5px;background:rgba(255,255,255,.18);z-index:6}
.scr{position:relative;height:100%;background:#0A0A0F;border-radius:23px 23px 0 0;overflow:hidden;display:flex;flex-direction:column}
.scr::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 55% at 50% -8%,rgba(255,107,0,.10),transparent 60%)}

/* topbar (real .topbar) */
.mtop{display:flex;align-items:center;gap:7px;padding:11px 11px 9px;background:#15151f;border-bottom:1px solid rgba(255,255,255,.06);position:relative;z-index:2}
.mtop .lg{width:17px;height:17px;flex-shrink:0;filter:drop-shadow(0 0 5px rgba(255,165,0,.35))}
.mtop .nm{font-family:'Orbitron',monospace;font-weight:900;font-size:8px;letter-spacing:.7px;background:linear-gradient(135deg,#FF6B00,#FFA500 55%,#FFCC00);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mpill{margin-left:auto;font-size:8.5px;color:#8A8D99;background:rgba(255,255,255,.05);border-radius:999px;padding:3px 9px;white-space:nowrap}
.mpill.on{color:#00D26A}

/* body */
.mbody{flex:1;padding:11px;display:flex;flex-direction:column;gap:10px;position:relative;z-index:2;overflow:hidden}

/* tabs (real .user-tabs, top) */
.utabs{display:flex;gap:4px;padding:4px;background:linear-gradient(#15151f,#15151f) padding-box,linear-gradient(120deg,rgba(255,165,0,.08),transparent) border-box;border:1px solid transparent;border-radius:12px}
.utab{flex:1;text-align:center;font-size:8px;font-weight:700;color:#8A8D99;padding:6px 0;border-radius:8px}
.utab.on{background:rgba(255,165,0,.12);color:#FFA500;position:relative}
.utab.on::before{content:"";position:absolute;top:2.5px;left:50%;transform:translateX(-50%);width:14px;height:2.5px;border-radius:2px;background:#FFA500;animation:ox-glow 3s ease-in-out infinite}

/* card (real .card) */
.mcard{background:#15151f;border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:12px}
/* account status strip (real app .acct-status / .acct-metrics) */
.acct-mode{display:inline-flex;align-items:center;gap:5px;font-size:8px;font-weight:700;letter-spacing:.4px;padding:3px 8px;border-radius:999px;white-space:nowrap}
.acct-mode.live{color:#00D26A;background:rgba(0,210,106,.1)}
.acct-mode.dry{color:#F2B544;background:rgba(242,181,68,.1)}
.acct-mode .amdot{width:6px;height:6px;border-radius:50%}
.acct-mode.live .amdot{background:#00D26A;animation:ox-pulse 2.4s ease-out infinite}
.acct-mode.dry .amdot{background:#F2B544}
.acct-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:11px}
.acct-h .at{font-family:'Orbitron',monospace;font-size:8.5px;letter-spacing:1px;color:#FFA500;font-weight:700}
.astrip{display:flex}
.astrip .am{flex:1;display:flex;flex-direction:column;gap:2px;padding:0 9px;min-width:0}
.astrip .am:first-child{padding-left:0}
.astrip .am+.am{border-left:1px solid rgba(255,255,255,.07)}
.astrip .aml{font-size:7px;text-transform:uppercase;letter-spacing:.6px;color:#8A8D99;font-weight:700}
.astrip .amv{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700;color:#ECEDF2;white-space:nowrap}
.astrip .am.lead .amv{font-size:15px}
.astrip .amv .g{color:#00D26A}
.mcard h4{margin:0 0 9px;font-size:8.5px;text-transform:uppercase;letter-spacing:.6px;color:#8A8D99;font-weight:600}
.chead{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px}
.chead h4{margin:0}
.csub{font-size:8px;color:#8A8D99;font-family:'JetBrains Mono',monospace}

/* status grid (real .status-grid) */
.sgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:11px}
.sgrid>div{display:flex;flex-direction:column;gap:2px}
.slabel{font-size:7.5px;color:#8A8D99;text-transform:uppercase;letter-spacing:.8px;font-weight:600}
.svalue{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:600;color:#ECEDF2}
.svalue.g{color:#00D26A}.svalue.r{color:#FF4757}.svalue.w{color:#F2B544}

/* stat cards (real .stat-card — colored top border) */
.stgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.stcard{background:#15151f;border-radius:10px;padding:10px;border-top:3px solid rgba(255,255,255,.1);display:flex;flex-direction:column;gap:5px}
.stcard.long{border-top-color:#00D26A}.stcard.danger{border-top-color:#FF4757}.stcard.accent{border-top-color:#FFA500}.stcard.warn{border-top-color:#F2B544}
.sthead{display:flex;align-items:center;justify-content:space-between;gap:6px}
.stlabel{font-size:8px;text-transform:uppercase;letter-spacing:.5px;color:#8A8D99;font-weight:700}
.stbadge{font-size:7px;padding:1px 5px;border-radius:3px;font-weight:700;font-family:'JetBrains Mono',monospace;white-space:nowrap}
.stbadge.armed{background:rgba(255,165,0,.2);color:#FFA500}
.stbadge.side{background:rgba(0,210,106,.18);color:#00D26A}
.stbadge.sideS{background:rgba(255,71,87,.18);color:#FF4757}
.stprice{font-family:'JetBrains Mono',monospace;font-size:14px;font-weight:700;color:#ECEDF2}
.stpnl{display:flex;align-items:baseline;gap:3px;font-family:'JetBrains Mono',monospace;font-weight:700;padding-top:5px;border-top:1px solid rgba(255,255,255,.06);font-size:12px}
.stpnl.long{color:#00D26A}.stpnl.short{color:#FF4757}
.stpnl .u{font-size:8px;opacity:.7}

/* seg row (real .seg-row / .seg-btn) */
.segrow{display:flex;gap:3px;background:#0A0A0F;border-radius:9px;padding:3px}
.segbtn{flex:1;text-align:center;font-size:9px;font-weight:600;color:#8A8D99;padding:7px 0;border-radius:6px}
.segbtn.on{background:#FFA500;color:#0A0A0F}

/* key/value rows */
.kv{display:flex;justify-content:space-between;align-items:center;font-size:9.5px;color:#8A8D99;padding:7px 0;border-top:1px solid rgba(255,255,255,.06)}
.kv.first,.kv:first-of-type{border-top:0}
.kv b{font-family:'JetBrains Mono',monospace;font-weight:600;color:#ECEDF2}
.kv b.g{color:#00D26A}.kv b.r{color:#FF4757}.kv b.o{color:#FFA500}

/* mini switch */
.msw{width:26px;height:15px;border-radius:999px;background:rgba(0,210,106,.3);position:relative;flex-shrink:0}
.msw::after{content:"";position:absolute;top:2px;left:13px;width:11px;height:11px;border-radius:50%;background:#00D26A}
.msw.off{background:rgba(255,255,255,.1)}
.msw.off::after{left:2px;background:#8A8D99}

/* candlestick chart + NW envelope */
.mchart{height:90px;width:100%;display:block}
.env{fill:none;stroke:rgba(255,165,0,.4);stroke-width:1;stroke-dasharray:3 3;stroke-dashoffset:0}
.env.draw{stroke-dasharray:300;stroke-dashoffset:300;animation:envdraw 2.4s ease-out forwards}
@keyframes envdraw{to{stroke-dashoffset:0}}
.mk{animation:mkp 2.2s ease-in-out infinite}
@keyframes mkp{0%,100%{opacity:.55}50%{opacity:1}}

/* gauge (Fear & Greed) */
.mgauge{display:flex;flex-direction:column;align-items:center;gap:1px}
.mgauge svg{width:140px;height:78px}
.mgauge .gv{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:17px;color:#F2B544;margin-top:-4px}
.mgauge .gc{font-size:8px;color:#8A8D99;letter-spacing:.4px}

/* BTC trend rows */
.trow{display:flex;align-items:center;gap:8px;font-size:9px;color:#8A8D99;padding:5px 0;border-top:1px solid rgba(255,255,255,.06)}
.trow.first,.trow:first-of-type{border-top:0}
.trow .tf{font-family:'JetBrains Mono',monospace;color:#ECEDF2;width:22px}
.trow .up{color:#00D26A;font-weight:700}.trow .dn{color:#FF4757;font-weight:700}
.tbar{flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.07);position:relative;overflow:hidden}
.tbar i{position:absolute;left:0;top:0;height:100%;border-radius:3px}
.tbar i.up{background:#00D26A}.tbar i.dn{background:#FF4757}

/* list rows (orders / missed signals) */
.lrow{display:flex;align-items:center;gap:7px;font-size:9px;padding:7px 0;border-top:1px solid rgba(255,255,255,.06);color:#8A8D99}
.lrow.first,.lrow:first-of-type{border-top:0}
.lrow .sym{color:#ECEDF2;font-weight:600}
.lrow .vv{margin-left:auto;font-family:'JetBrains Mono',monospace}
.lrow .vv.g{color:#00D26A}.lrow .vv.r{color:#FF4757}
.lb{font-size:7px;font-weight:700;padding:2px 6px;border-radius:4px;font-family:'JetBrains Mono',monospace}
.lb.ok{color:#00D26A;background:rgba(0,210,106,.12)}
.lb.dry{color:#F2B544;background:rgba(242,181,68,.14)}
.lb.err{color:#FF4757;background:rgba(255,71,87,.12)}

/* "My pairs" — user picks & starts each pair */
.prow{display:flex;align-items:center;gap:9px;font-size:9.5px;padding:8px 0;border-top:1px solid rgba(255,255,255,.06)}
.prow:first-of-type{border-top:0}
.prow .psym{font-family:'JetBrains Mono',monospace;font-weight:600;color:#ECEDF2}
.psw{width:26px;height:15px;border-radius:999px;position:relative;flex-shrink:0;transition:background .3s}
.psw::after{content:"";position:absolute;top:2px;width:11px;height:11px;border-radius:50%;transition:left .3s,background .3s}
.prow.on .psw{background:rgba(0,210,106,.3)}.prow.on .psw::after{left:13px;background:#00D26A}
.prow.off .psw{background:rgba(255,255,255,.1)}.prow.off .psw::after{left:2px;background:#8A8D99}
.pstatus{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-size:8px;font-weight:700;letter-spacing:.4px}
.pdot{width:6px;height:6px;border-radius:50%;transition:background .3s}
.prow.on .pstatus{color:#00D26A}.prow.on .pdot{background:#00D26A;box-shadow:0 0 6px #00D26A}
.prow.off .pstatus{color:#8A8D99}.prow.off .pdot{background:#4a4a55}

/* ── Live "app" animations — mirror the real OX-ENGINE app (pulsing status dot + subtle glow) ── */
@keyframes ox-pulse{0%{box-shadow:0 0 0 0 rgba(0,210,106,.5)}70%{box-shadow:0 0 0 5px rgba(0,210,106,0)}100%{box-shadow:0 0 0 0 rgba(0,210,106,0)}}
@keyframes ox-glow{0%,100%{opacity:.82}50%{opacity:1}}
@keyframes ox-tab{0%,100%{box-shadow:inset 0 0 0 1px rgba(255,165,0,0)}50%{box-shadow:inset 0 0 0 1px rgba(255,165,0,.28)}}
.mpill.on{display:inline-flex;align-items:center;gap:5px}
.mpill.on::before{content:"";width:6px;height:6px;border-radius:50%;background:#00D26A;animation:ox-pulse 2.4s ease-out infinite}
.prow.on .pdot{animation:ox-pulse 2.4s ease-out infinite}
.stbadge.armed{animation:ox-glow 1.8s ease-in-out infinite}
.mgauge .gv{animation:ox-glow 2.6s ease-in-out infinite}
.msw:not(.off)::after{box-shadow:0 0 7px rgba(0,210,106,.5)}
@media (prefers-reduced-motion:reduce){.phone *,.phone *::before,.phone *::after{animation:none!important}.env.draw{stroke-dashoffset:0}}