:root { color-scheme: dark; --bg:#08111f; --panel:#0d1b2f; --panel2:#10243d; --text:#e8f1ff; --muted:#8fa6c3; --accent:#2dd4bf; --good:#34d399; --warn:#f59e0b; --line:rgba(255,255,255,.09); }
* { box-sizing: border-box; }
body { margin:0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: radial-gradient(circle at top left, #123a52 0, var(--bg) 34rem); color:var(--text); }
.shell { width:min(1180px, calc(100% - 28px)); margin:0 auto; padding:28px 0 48px; }
.hero, .panel, .stats article { border:1px solid var(--line); background:linear-gradient(145deg, rgba(16,36,61,.92), rgba(8,17,31,.88)); border-radius:24px; box-shadow:0 18px 60px rgba(0,0,0,.28); }
.hero { display:flex; justify-content:space-between; gap:20px; align-items:center; padding:28px; margin-bottom:18px; }
h1,h2,p { margin:0; } h1 { font-size:clamp(2rem,6vw,4.5rem); letter-spacing:-.06em; } h2 { font-size:1.05rem; }
.eyebrow { color:var(--accent); text-transform:uppercase; letter-spacing:.16em; font-size:.72rem; font-weight:800; margin-bottom:8px; }
.muted { color:var(--muted); }
.status-pill { border:1px solid rgba(45,212,191,.28); color:var(--accent); border-radius:999px; padding:9px 13px; background:rgba(45,212,191,.08); white-space:nowrap; }
.grid { display:grid; gap:14px; } .stats { grid-template-columns:repeat(4, minmax(0,1fr)); margin-bottom:14px; }
.stats article { padding:18px; } .stats span { color:var(--muted); display:block; font-size:.84rem; margin-bottom:10px; } .stats strong { font-size:1.45rem; } .positive { color:var(--good); }
.panel { padding:20px; margin-top:14px; } .panel-head { display:flex; justify-content:space-between; gap:12px; align-items:center; margin-bottom:16px; } .panel-head span { color:var(--muted); font-size:.84rem; }
.sparkline { height:220px; border-radius:18px; background: linear-gradient(180deg, rgba(45,212,191,.18), transparent), repeating-linear-gradient(90deg, transparent, transparent 56px, rgba(255,255,255,.04) 57px), repeating-linear-gradient(0deg, transparent, transparent 43px, rgba(255,255,255,.04) 44px); position:relative; overflow:hidden; }
.sparkline:after { content:""; position:absolute; inset:35% -5% 22%; background:linear-gradient(100deg, transparent 0 8%, var(--accent) 8.5% 9.2%, transparent 9.5% 18%, var(--accent) 18.5% 20%, transparent 20.5% 31%, var(--accent) 31.5% 33%, transparent 33.2% 42%, var(--accent) 42.5% 44%, transparent 44.4% 58%, var(--accent) 58.5% 60%, transparent 60.4% 77%, var(--accent) 77.5% 79%, transparent 79.5%); filter:drop-shadow(0 0 12px rgba(45,212,191,.8)); }
.strategy-list { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; }
.strategy-card { border:1px solid var(--line); background:var(--panel2); border-radius:18px; padding:16px; cursor:pointer; transition:.16s ease; } .strategy-card:hover { transform:translateY(-2px); border-color:rgba(45,212,191,.45); }
.strategy-card h3 { margin:0 0 8px; } .tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; } .tag { border-radius:999px; padding:6px 9px; background:rgba(255,255,255,.06); color:var(--muted); font-size:.78rem; } .tag.on { color:#06251f; background:var(--accent); } .tag.off { color:#2b1900; background:var(--warn); }
.detail-body { display:grid; grid-template-columns:1.1fr .9fr; gap:14px; } pre { white-space:pre-wrap; margin:0; background:rgba(0,0,0,.2); padding:14px; border-radius:14px; max-height:360px; overflow:auto; }
.form-row { display:grid; grid-template-columns:1fr 1fr auto; gap:10px; } input, button { border:1px solid var(--line); border-radius:12px; padding:12px; background:rgba(255,255,255,.06); color:var(--text); } button { background:var(--accent); color:#06251f; font-weight:800; }
@media (max-width: 760px) { .hero { align-items:flex-start; flex-direction:column; } .stats, .strategy-list, .detail-body, .form-row { grid-template-columns:1fr; } .sparkline { height:160px; } }
.login-shell { min-height:100vh; display:grid; place-items:center; padding:24px; }
.login-card { width:min(420px, 100%); border:1px solid var(--line); background:linear-gradient(145deg, rgba(16,36,61,.96), rgba(8,17,31,.92)); border-radius:24px; padding:28px; box-shadow:0 18px 60px rgba(0,0,0,.35); display:grid; gap:14px; }
.login-card h1 { font-size:2.6rem; }
.error { color:#fca5a5; min-height:1.2em; }
.top-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.ghost { background:rgba(255,255,255,.06); color:var(--text); }
.user-list { margin:0 0 16px; padding-left:20px; }
.user-list li { margin:8px 0; }
[hidden] { display:none !important; }
.strategy-settings-form { display:grid; gap:12px; margin-top:16px; }
.strategy-settings-form label { display:grid; gap:7px; color:var(--muted); font-size:.9rem; }
.strategy-settings-form textarea { width:100%; min-height:340px; resize:vertical; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; border:1px solid var(--line); border-radius:14px; padding:12px; background:rgba(0,0,0,.22); color:var(--text); }
.toggle-line { display:flex !important; grid-template-columns:auto 1fr; align-items:center; gap:10px !important; color:var(--text) !important; }
.toggle-line input { width:auto; }
.button-row { display:flex; gap:10px; flex-wrap:wrap; }
.sim-placeholder { border:1px solid var(--line); background:rgba(255,255,255,.035); border-radius:18px; padding:16px; }
.sim-placeholder h4 { margin:0 0 10px; }
@media (max-width: 760px) { .strategy-settings-form textarea { min-height:260px; } .button-row { display:grid; grid-template-columns:1fr; } }
.bybit-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:12px; flex-wrap:wrap; }
.bybit-status { flex:1 1 260px; min-width:0; overflow-wrap:anywhere; }
.bybit-actions button { flex:0 0 auto; }
@media (max-width: 760px) { .bybit-actions { display:grid; grid-template-columns:1fr; } .bybit-status { order:1; } .bybit-actions button { order:2; width:100%; } }
.live-draft-list { display:grid; gap:12px; }
.live-draft-card { display:flex; align-items:center; justify-content:space-between; gap:14px; border:1px solid var(--line); background:rgba(255,255,255,.035); border-radius:16px; padding:14px; }
.live-draft-card p { margin-top:4px; }
@media (max-width: 760px) { .live-draft-card { display:grid; grid-template-columns:1fr; } }
.coin-controls { border:1px solid var(--line); background:rgba(255,255,255,.035); border-radius:16px; padding:14px; display:grid; gap:12px; }
.coin-control-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.coin-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(92px, 1fr)); gap:8px; }
.coin-chip { display:flex !important; align-items:center; gap:8px !important; padding:8px 10px; border:1px solid var(--line); border-radius:999px; color:var(--text) !important; background:rgba(255,255,255,.04); }
.coin-chip input { width:auto; }
.coin-actions { margin-top:0; }
.sim-stat-grid { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:10px; margin:12px 0; }
.sim-stat-grid article { border:1px solid var(--line); border-radius:14px; padding:12px; background:rgba(45,212,191,.06); }
.sim-stat-grid span { display:block; color:var(--muted); font-size:.78rem; margin-bottom:6px; }
.sim-stat-grid strong { color:var(--text); font-size:1.05rem; }
.coin-result-list { display:grid; gap:8px; margin:12px 0; max-height:260px; overflow:auto; }
.coin-result-list article { display:flex; justify-content:space-between; gap:10px; border:1px solid var(--line); border-radius:12px; padding:10px; background:rgba(255,255,255,.035); }
.coin-result-list span { color:var(--muted); font-size:.86rem; text-align:right; }
@media (max-width:760px) { .sim-stat-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); } .coin-result-list article { display:grid; } .coin-result-list span { text-align:left; } }
.mini-chart { margin:12px 0; border:1px solid var(--line); border-radius:14px; background:rgba(0,0,0,.18); overflow:hidden; }
.equity-svg { width:100%; height:150px; display:block; }
.equity-svg path { fill:none; stroke:var(--accent); stroke-width:3; vector-effect:non-scaling-stroke; }
.equity-svg text { fill:var(--muted); font-size:12px; }
.sim-stat-grid.compact { grid-template-columns:repeat(4, minmax(0, 1fr)); margin-top:0; }
.live-draft-card { align-items:stretch; flex-wrap:wrap; }
.live-draft-card > div:first-child { flex:1 1 260px; }
.live-draft-detail { flex:1 1 100%; border-top:1px solid var(--line); margin-top:10px; padding-top:12px; }
.draft-name-row { display:grid; gap:7px; color:var(--muted); font-size:.9rem; margin:10px 0; }
.draft-name-row input { width:100%; }
@media (max-width:760px) { .sim-stat-grid.compact { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
.trade-table-wrap { width:100%; overflow:auto; border:1px solid var(--line); border-radius:14px; margin:10px 0 14px; background:rgba(0,0,0,.16); }
.trade-table { width:100%; border-collapse:collapse; min-width:760px; font-size:.86rem; }
.trade-table th, .trade-table td { padding:9px 10px; border-bottom:1px solid var(--line); text-align:left; white-space:nowrap; }
.trade-table th { color:var(--muted); font-weight:700; background:rgba(255,255,255,.035); }
.trade-table tr:last-child td { border-bottom:0; }
.negative { color:#fca5a5; }
.execution-list { display:grid; gap:10px; }
.execution-card { border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.035); padding:12px; }
.execution-card p { margin-top:4px; }
.portfolio-chart { min-height:260px; border:1px solid var(--line); border-radius:18px; background:linear-gradient(180deg, rgba(45,212,191,.08), rgba(0,0,0,.18)); overflow:hidden; }
.portfolio-chart .equity-svg { height:280px; }
.empty-chart { min-height:260px; display:grid; place-items:center; text-align:center; gap:8px; color:var(--muted); padding:24px; }
.empty-chart strong { display:block; color:var(--text); font-size:1.15rem; }
.friendly-settings { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; border:1px solid var(--line); border-radius:16px; padding:14px; background:rgba(255,255,255,.03); }
.friendly-settings label { display:grid; gap:6px; color:var(--muted); font-size:.86rem; }
.friendly-settings input[type="number"] { width:100%; }
.sim-readable { border:1px solid var(--line); border-radius:14px; padding:12px; background:rgba(255,255,255,.035); }
@media (max-width:760px) { .friendly-settings { grid-template-columns:1fr; } .portfolio-chart, .empty-chart { min-height:200px; } }