:root {
  color-scheme: dark;
  --bg: #0b0d12;
  --panel: #121722;
  --panel-2: #171e2b;
  --line: #273044;
  --text: #eef3ff;
  --muted: #8f9bb2;
  --green: #2bd576;
  --red: #ff5f6d;
  --blue: #4f8cff;
  --amber: #ffbf47;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif; background: radial-gradient(circle at top, #111827 0, var(--bg) 42%); color: var(--text); min-height: 100vh; }
button, input { font: inherit; }
.topbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; background: rgba(11,13,18,.92); border-bottom: 1px solid var(--line); backdrop-filter: blur(14px); }
.brand { display: flex; align-items: center; gap: 12px; }
.brand div { display: flex; flex-direction: column; }
.brand div span { color: var(--muted); font-size: 12px; }
.brand-mark { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 18px; background: linear-gradient(135deg, #f4f7ff, #aab7ce); color: #111827; font-weight: 900; letter-spacing: -1px; }
.brand-mark.small { width: 40px; height: 40px; border-radius: 12px; font-size: 13px; }
.top-actions { display: flex; align-items: center; gap: 10px; }
.page { width: min(1500px, calc(100% - 32px)); margin: 24px auto 60px; }
.hero-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }
.card { background: linear-gradient(180deg, rgba(23,30,43,.96), rgba(18,23,34,.96)); border: 1px solid var(--line); border-radius: 18px; padding: 18px; box-shadow: 0 18px 40px rgba(0,0,0,.18); }
.metric span, .component span, .reversal span { color: var(--muted); font-size: 13px; }
.metric strong { display: block; font-size: 28px; margin-top: 8px; letter-spacing: -.5px; }
.metric small { display: block; margin-top: 6px; color: var(--muted); }
.layout-two { display: grid; grid-template-columns: 1.7fr 1fr; gap: 16px; margin-top: 16px; }
.layout-three { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; margin-top: 16px; }
.bottom { grid-template-columns: 1fr 1fr; }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
h2 { font-size: 17px; margin: 0 0 14px; }
h3 { font-size: 14px; margin: 14px 0 10px; }
p { line-height: 1.5; }
.muted { color: var(--muted); margin: 3px 0; }
.smalltext { font-size: 12px; }
.btn { border: 1px solid var(--line); color: var(--text); background: #1a2230; padding: 10px 14px; border-radius: 11px; cursor: pointer; transition: transform .15s ease, border-color .15s ease, opacity .15s ease; }
.btn:hover { transform: translateY(-1px); border-color: #44516d; }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn.primary { background: var(--blue); border-color: var(--blue); color: white; }
.btn.success { background: rgba(43,213,118,.13); border-color: rgba(43,213,118,.55); color: #8ef0b8; }
.btn.danger { background: rgba(255,95,109,.12); border-color: rgba(255,95,109,.5); color: #ff9da6; }
.btn.ghost { background: transparent; }
.smallbtn { padding: 8px 10px; font-size: 12px; }
.wide { width: 100%; margin-top: 12px; }
.badge { border-radius: 999px; padding: 7px 10px; font-size: 11px; font-weight: 800; letter-spacing: .5px; border: 1px solid var(--line); }
.badge.paper { color: #ffd78d; border-color: #665328; background: #2a2315; }
.badge.ok { color: #8ef0b8; border-color: #235d3b; background: #112a1c; }
.badge.wait { color: #aab7ce; }
.chart-card canvas { width: 100%; border-radius: 12px; background: #0c111a; border: 1px solid #1d2636; }
.signal-bar-wrap { position: relative; margin-top: 14px; height: 28px; background: linear-gradient(90deg, rgba(255,95,109,.22), rgba(255,255,255,.03) 50%, rgba(43,213,118,.22)); border-radius: 999px; overflow: hidden; border: 1px solid var(--line); }
.signal-bar { position: absolute; top: 0; bottom: 0; left: 50%; width: 0; opacity: .85; transition: .25s ease; }
.signal-bar.long { background: var(--green); }
.signal-bar.short { background: var(--red); }
.signal-bar-wrap span { position: absolute; top: 6px; font-size: 10px; font-weight: 700; color: #d5dbea; z-index: 2; }
.signal-bar-wrap .left { left: 10px; }.signal-bar-wrap .right { right: 10px; }.signal-bar-wrap .center { left: 50%; transform: translateX(-50%); }
.engine-buttons, .triple { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.triple { grid-template-columns: repeat(3,1fr); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.form-grid label, .login-form label { display: flex; flex-direction: column; gap: 6px; color: var(--muted); font-size: 12px; }
.form-grid input, .login-form input { width: 100%; border-radius: 10px; border: 1px solid var(--line); background: #0d121b; color: var(--text); padding: 10px 11px; outline: none; }
.form-grid input:focus, .login-form input:focus { border-color: var(--blue); }
.form-grid .btn { align-self: end; }
hr { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }
.hint { margin-top: 10px; font-size: 12px; color: var(--muted); }
.component { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid rgba(39,48,68,.65); }
.component.total { border-bottom: 0; padding-top: 14px; font-size: 18px; }
.component.total strong { font-size: 24px; }
.jsonbox { max-height: 210px; overflow: auto; white-space: pre-wrap; word-break: break-word; background: #0c111a; border: 1px solid #1d2636; padding: 12px; border-radius: 11px; color: #aeb9ce; font-size: 11px; }
.reversal { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.reversal div { background: #0d121b; border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.reversal strong { display: block; margin-top: 8px; font-size: 20px; }
.events { max-height: 260px; overflow: auto; display: flex; flex-direction: column; gap: 8px; }
.event { display: grid; grid-template-columns: 90px 110px 1fr; gap: 10px; padding: 9px 10px; background: #0d121b; border-radius: 10px; border: 1px solid #1d2636; font-size: 11px; }
.event .time, .event .type { color: var(--muted); }
.toast { position: fixed; right: 20px; bottom: 20px; min-width: 240px; max-width: 420px; padding: 13px 15px; background: #182131; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 20px 50px rgba(0,0,0,.4); opacity: 0; pointer-events: none; transform: translateY(12px); transition: .2s ease; }
.toast.show { opacity: 1; transform: translateY(0); }
.toast.error { border-color: rgba(255,95,109,.6); }
.login-body { display: grid; place-items: center; min-height: 100vh; padding: 20px; }
.login-card { width: min(420px,100%); background: var(--panel); border: 1px solid var(--line); border-radius: 22px; padding: 28px; box-shadow: 0 28px 70px rgba(0,0,0,.35); }
.login-card .brand-mark { margin-bottom: 18px; }
.login-card h1 { margin: 0; }
.login-form { display: grid; gap: 14px; margin-top: 22px; }
.alert { padding: 10px 12px; border-radius: 10px; margin-top: 14px; }.alert.error { background: rgba(255,95,109,.1); border: 1px solid rgba(255,95,109,.4); color: #ff9da6; }
@media (max-width: 1000px) { .hero-grid { grid-template-columns: repeat(2,1fr); }.layout-two,.layout-three,.bottom { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .page { width: min(100% - 18px,1500px); margin-top: 10px; }.topbar { padding: 10px 12px; }.hero-grid { grid-template-columns: 1fr 1fr; gap: 9px; }.card { border-radius: 14px; padding: 14px; }.metric strong { font-size: 21px; }.top-actions .badge.paper { display:none; }.form-grid,.triple { grid-template-columns: 1fr; }.event { grid-template-columns: 70px 80px 1fr; }.brand div span { display:none; } }
.badge.warn { color: #ffd78d; border-color: #665328; background: #2a2315; }
.quick-markets { display:flex; flex-wrap:wrap; gap:7px; margin-top:10px; }
.chip { border:1px solid var(--line); background:#0d121b; color:var(--muted); border-radius:999px; padding:6px 10px; cursor:pointer; font-size:11px; }
.chip:hover { color:var(--text); border-color:#44516d; }
.paper-kpis { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-bottom:12px; }
.paper-kpis div { background:#0d121b; border:1px solid var(--line); border-radius:12px; padding:12px; }
.paper-kpis span { display:block; color:var(--muted); font-size:11px; margin-bottom:6px; }
.paper-kpis strong { font-size:17px; }
details summary { cursor:pointer; color:var(--muted); font-size:12px; margin:8px 0; }
.safety-note { display:flex; gap:10px; align-items:flex-start; margin-top:14px; padding:12px; border-radius:12px; border:1px solid rgba(255,191,71,.3); background:rgba(255,191,71,.06); }
.safety-note strong { color:#ffd78d; white-space:nowrap; }
.safety-note span { color:var(--muted); font-size:12px; line-height:1.4; }
.events-card { margin-top:16px; }
.event-error { border-color:rgba(255,95,109,.35); }
@media (max-width: 620px) { .paper-kpis { grid-template-columns:1fr 1fr; }.quick-markets{gap:5px}.top-actions #streamBadge{display:none;} }