:root{--bg: #12141a;--bg-2: #181b22;--bg-3: #1e222b;--bg-4: #252a35;--line: #2c3240;--text: #eef0f4;--muted: #8b91a1;--green: #21c16b;--green-2: #198f4d;--red: #e5484d;--red-2: #b5363a;--orange: #f5a623;--blue: #3d8bfd;--shadow: 0 10px 30px rgba(0, 0, 0, .35)}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:Inter,system-ui,sans-serif;background:var(--bg);color:var(--text);overflow:hidden}button,input{font:inherit}button{cursor:pointer}.login{min-height:100%;display:grid;place-items:center;background:radial-gradient(900px 400px at 20% 0%,rgba(33,193,107,.12),transparent 55%),radial-gradient(700px 360px at 90% 100%,rgba(245,166,35,.1),transparent 50%),var(--bg);overflow:auto}.login-card{width:min(420px,calc(100% - 32px));background:var(--bg-2);border:1px solid var(--line);border-radius:16px;padding:32px 28px;box-shadow:var(--shadow)}.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.02em}.brand-mark{width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,var(--green),#0f8a4b);display:grid;place-items:center;font-size:14px;font-weight:800}.login-card h1{margin:22px 0 6px;font-size:24px}.sub{color:var(--muted);font-size:13px;line-height:1.5;margin:0 0 22px}.field{display:flex;flex-direction:column;gap:6px;margin-bottom:12px;font-size:13px;color:var(--muted)}.field input{background:var(--bg);border:1px solid var(--line);color:var(--text);border-radius:10px;padding:11px 12px;outline:none}.field input:focus{border-color:#3d8bfd88}.btn{border:0;border-radius:10px;padding:11px 14px;font-weight:600}.btn-primary{width:100%;background:var(--green);color:#062214;margin-top:6px}.btn-ghost{width:100%;background:transparent;color:var(--text);border:1px solid var(--line);margin-top:8px}.btn-link{background:none;border:0;color:var(--blue);padding:0}.err{color:#ff8b8e;font-size:13px;margin:0 0 10px}.hint{margin-top:16px;color:var(--muted);font-size:12px;text-align:center}.room{height:100%;display:flex;flex-direction:column;background:var(--bg)}.topbar{height:54px;display:flex;align-items:center;gap:12px;padding:0 12px;background:#10131a;border-bottom:1px solid var(--line)}.tabs{display:flex;align-items:center;gap:6px;flex:1;overflow:auto;min-width:0}.tab,.add-tab{display:flex;align-items:center;gap:8px;height:34px;padding:0 10px;border-radius:8px;border:1px solid transparent;background:var(--bg-3);color:var(--text);white-space:nowrap}.tab.active{background:var(--bg-4);border-color:#3a4254}.tab .chg.up,.quote.up{color:var(--green)}.tab .chg.down,.quote.down{color:var(--red)}.add-tab{width:34px;justify-content:center;font-size:20px;padding:0}.account{display:flex;align-items:center;gap:10px}.demo-pill{background:#f5a6231f;color:var(--orange);border:1px solid rgba(245,166,35,.35);border-radius:8px;padding:6px 10px;font-weight:700;font-size:13px}.refill,.logout{background:var(--bg-3);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:7px 10px}.body{flex:1;display:flex;min-height:0}.chart-col{flex:1;display:flex;flex-direction:column;min-width:0;position:relative}.chart-head{display:flex;justify-content:space-between;align-items:baseline;padding:10px 14px 0}.chart-head h2{margin:0;font-size:16px}.live-dot{margin-left:8px;color:var(--green);font-size:11px;letter-spacing:.08em;font-weight:700}.price-now{font-variant-numeric:tabular-nums;font-weight:700}.chart-wrap{flex:1;min-height:0;position:relative}.chart-el{width:100%;height:100%}.toolbar{height:40px;display:flex;align-items:center;gap:6px;padding:0 12px;border-top:1px solid var(--line);background:#141822}.tf{background:transparent;border:0;color:var(--muted);padding:6px 8px;border-radius:6px}.tf.active{color:var(--text);background:var(--bg-4)}.open-strip{position:absolute;left:12px;right:12px;bottom:10px;display:flex;gap:8px;overflow:auto;pointer-events:none}.open-card{pointer-events:auto;min-width:190px;background:#141822eb;border:1px solid var(--line);border-radius:10px;padding:8px 10px;font-size:12px}.open-card.higher{border-color:#21c16b73}.open-card.lower{border-color:#e5484d73}.open-card .row{display:flex;justify-content:space-between;gap:10px}.trade-panel{width:280px;background:#171b24;border-left:1px solid var(--line);padding:16px 14px;display:flex;flex-direction:column;gap:12px}.panel-label{color:var(--muted);font-size:12px;margin-bottom:6px}.stepper{display:flex;align-items:center;background:var(--bg);border:1px solid var(--line);border-radius:10px;overflow:hidden}.stepper button{width:40px;height:42px;border:0;background:var(--bg-3);color:var(--text)}.stepper input,.stepper select{flex:1;border:0;background:transparent;color:var(--text);text-align:center;outline:none;height:42px}.profit-box{background:var(--bg-3);border-radius:10px;padding:10px 12px;display:flex;justify-content:space-between;font-size:13px}.profit-box strong{color:var(--green)}.dir-btn{height:58px;border:0;border-radius:12px;color:#fff;font-size:18px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:8px}.dir-btn.higher{background:linear-gradient(180deg,#2ad37a,#17a85a)}.dir-btn.lower{background:linear-gradient(180deg,#f05a60,#c83b40)}.dir-btn:disabled{opacity:.45;cursor:not-allowed}.rail{width:56px;background:#10131a;border-left:1px solid var(--line);display:flex;flex-direction:column;align-items:center;padding-top:10px;gap:8px}.rail button{width:40px;height:40px;border-radius:10px;border:1px solid transparent;background:transparent;color:var(--muted)}.rail button.active,.rail button:hover{background:var(--bg-3);color:var(--text)}.drawer{width:320px;background:#151922;border-left:1px solid var(--line);display:flex;flex-direction:column}.drawer h3{margin:0;padding:14px;font-size:14px;border-bottom:1px solid var(--line)}.list{overflow:auto;padding:10px;display:flex;flex-direction:column;gap:8px}.empty{color:var(--muted);font-size:13px;padding:20px 10px;text-align:center}.hist-card,.list .open-card{background:var(--bg-3);border:1px solid var(--line);border-radius:10px;padding:10px;font-size:12px}.badge{padding:2px 6px;border-radius:999px;font-weight:700}.badge.won{color:var(--green);background:#21c16b1f}.badge.lost{color:var(--red);background:#e5484d1f}.toast{position:fixed;top:68px;left:50%;transform:translate(-50%);background:var(--bg-4);border:1px solid var(--line);padding:10px 14px;border-radius:10px;z-index:20;box-shadow:var(--shadow)}.toast.won{border-color:#21c16b80}.toast.lost{border-color:#e5484d80}.modal-bg{position:fixed;top:0;right:0;bottom:0;left:0;background:#06080c9e;display:grid;place-items:center;z-index:30}.modal{width:min(820px,calc(100% - 24px));max-height:min(640px,calc(100% - 24px));background:var(--bg-2);border:1px solid var(--line);border-radius:16px;display:flex;flex-direction:column;overflow:hidden}.modal-head{padding:14px 16px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}.modal-head input{width:240px;background:var(--bg);border:1px solid var(--line);color:var(--text);border-radius:8px;padding:8px 10px}.cats{display:flex;gap:6px;padding:10px 16px}.cats button{background:var(--bg-3);border:1px solid var(--line);color:var(--muted);border-radius:999px;padding:6px 10px}.cats button.active{color:var(--text);border-color:#4a5368}.asset-grid{overflow:auto;padding:8px 16px 16px;display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.asset-row{display:flex;justify-content:space-between;align-items:center;background:var(--bg-3);border:1px solid var(--line);border-radius:10px;padding:10px 12px;color:inherit}.asset-row small{color:var(--muted)}@media (max-width: 900px){.drawer{display:none}.trade-panel{width:230px}.asset-grid{grid-template-columns:1fr}}