:root{--bg: #0d1017;--bg-raised: #12161f;--bg-panel: #151a26;--bg-hover: #1c2230;--border: #232a3b;--text: #dfe4f0;--text-dim: #8b93a7;--text-faint: #5c667d;--accent: #4f8cff;--accent-dim: #2c4a80;--up: #26a69a;--down: #ef5350;--warn: #f2c464;--radius: 6px;--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--mono: "SF Mono", ui-monospace, Menlo, monospace}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text);font-family:var(--font);font-size:13px;overflow:hidden}button{font-family:var(--font);font-size:12px;background:var(--bg-raised);color:var(--text);border:1px solid var(--border);border-radius:var(--radius);padding:5px 10px;cursor:pointer}button:hover:not(:disabled){background:var(--bg-hover)}button:disabled{opacity:.45;cursor:not-allowed}button.primary{background:var(--accent);border-color:var(--accent);color:#fff}button.active{background:var(--accent-dim);border-color:var(--accent)}input,select{font-family:var(--font);font-size:12px;background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:var(--radius);padding:6px 8px}input:focus,select:focus{outline:none;border-color:var(--accent)}.app{display:grid;grid-template-rows:44px 1fr 26px;height:100%}.main{display:grid;grid-template-columns:220px 1fr 300px;min-height:0}.topbar{display:flex;align-items:center;gap:8px;padding:0 12px;background:var(--bg-raised);border-bottom:1px solid var(--border)}.topbar .logo{font-weight:700;font-size:15px;letter-spacing:.5px;margin-right:8px;color:var(--text)}.topbar .logo span{color:var(--accent)}.tf-group,.type-group{display:flex;gap:2px}.tf-group button,.type-group button{padding:4px 8px;border-radius:4px;border-color:transparent;background:transparent;color:var(--text-dim)}.tf-group button.active,.type-group button.active{background:var(--bg-hover);color:var(--text)}.spacer{flex:1}.symbol-picker{position:relative}.symbol-picker .current{font-weight:600;min-width:150px;text-align:left}.symbol-menu{position:absolute;top:36px;left:0;width:320px;max-height:400px;overflow-y:auto;background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 8px 30px #00000080;z-index:30}.symbol-menu input{width:calc(100% - 16px);margin:8px}.symbol-menu .row{display:flex;justify-content:space-between;padding:7px 12px;cursor:pointer}.symbol-menu .row:hover{background:var(--bg-hover)}.symbol-menu .row .cls{color:var(--text-faint);font-size:11px}.watchlist{background:var(--bg-panel);border-right:1px solid var(--border);overflow-y:auto;display:flex;flex-direction:column}.watchlist h3,.rightpanel h3{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--text-faint);margin:12px 12px 6px}.watchlist .item{display:flex;align-items:center;justify-content:space-between;padding:7px 12px;cursor:pointer;border-left:2px solid transparent}.watchlist .item:hover{background:var(--bg-hover)}.watchlist .item.selected{border-left-color:var(--accent);background:var(--bg-hover)}.watchlist .item .sym{font-weight:600;font-size:12px}.watchlist .item .px{font-family:var(--mono);font-size:11px}.watchlist .item .px.up{color:var(--up)}.watchlist .item .px.down{color:var(--down)}.watchlist .empty,.rightpanel .empty{color:var(--text-faint);padding:8px 12px;font-size:12px;line-height:1.5}.chart-area{position:relative;min-width:0;min-height:0;background:var(--bg)}.chart-container{position:absolute;top:0;right:0;bottom:0;left:0}.chart-legend{position:absolute;top:6px;left:8px;z-index:5;font-family:var(--mono);font-size:11px;color:var(--text-dim);pointer-events:none;background:#0d1017b3;padding:2px 6px;border-radius:4px}.chart-empty{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;color:var(--text-faint);flex-direction:column;gap:10px}.rightpanel{background:var(--bg-panel);border-left:1px solid var(--border);display:flex;flex-direction:column;min-height:0}.rightpanel .tabs{display:flex;border-bottom:1px solid var(--border)}.rightpanel .tabs button{flex:1;border:none;border-radius:0;background:transparent;color:var(--text-dim);padding:10px 0;border-bottom:2px solid transparent}.rightpanel .tabs button.active{color:var(--text);border-bottom-color:var(--accent)}.rightpanel .body{flex:1;overflow-y:auto;padding-bottom:12px}.empty-state{text-align:center;padding:40px 20px;color:var(--text-faint);line-height:1.6}.empty-state .icon{font-size:28px;margin-bottom:8px}.empty-state b{color:var(--text-dim)}.statusbar{display:flex;align-items:center;gap:16px;padding:0 12px;background:var(--bg-raised);border-top:1px solid var(--border);font-size:11px;color:var(--text-dim)}.statusbar .dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px;background:var(--text-faint)}.statusbar .dot.connected{background:var(--up)}.statusbar .dot.error{background:var(--down)}.statusbar .dot.connecting{background:var(--warn)}.login-wrap{height:100%;display:flex;align-items:center;justify-content:center}.login-card{width:320px;background:var(--bg-panel);border:1px solid var(--border);border-radius:10px;padding:28px;display:flex;flex-direction:column;gap:12px}.login-card h1{font-size:20px;margin:0 0 4px}.login-card h1 span{color:var(--accent)}.login-card .err{color:var(--down);font-size:12px}.settings{overflow-y:auto;padding:24px 32px;grid-column:1 / span 3}.settings h2{font-size:16px;margin:24px 0 12px}.settings h2:first-child{margin-top:0}.card{background:var(--bg-panel);border:1px solid var(--border);border-radius:8px;padding:16px;margin-bottom:12px;max-width:760px}.card .head{display:flex;align-items:center;gap:10px;margin-bottom:6px}.card .head b{font-size:14px}.badge{font-size:10px;padding:2px 7px;border-radius:10px;background:var(--bg-hover);color:var(--text-dim);text-transform:uppercase;letter-spacing:.5px}.badge.locked{color:var(--warn)}.badge.on{color:var(--up)}.card .desc{color:var(--text-dim);font-size:12px;line-height:1.5;margin-bottom:10px}.card .actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.card .lock-note{font-size:11px;color:var(--warn);margin-top:8px}