:root {
  --bg: #0b0d10;
  --panel: #12161b;
  --panel2: #171c22;
  --line: #252c34;
  --text: #f3f6f8;
  --muted: #8e9aa8;
  --accent: #7cf2aa;
  --accent2: #2dcf76;
  --danger: #ff6b6b;
  --warning: #f6c85f;
  --shadow: 0 20px 50px rgba(0,0,0,.24);
}
* { 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 right,#132019 0,#0b0d10 36%); color: var(--text); min-height: 100vh; }
button,input { font: inherit; }
button { cursor: pointer; }
button:disabled { opacity:.4; cursor:not-allowed; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 240px 1fr; }
.sidebar { border-right: 1px solid var(--line); background: rgba(9,11,14,.94); padding: 24px 18px; display:flex; flex-direction:column; gap:28px; }
.brand { display:flex; gap:12px; align-items:center; }
.brand-mark { width:42px; height:42px; display:grid; place-items:center; border-radius:12px; overflow:hidden; background:#06131b; border:1px solid #1d3840; box-shadow:0 0 0 1px rgba(69,242,157,.06), 0 0 18px rgba(69,242,157,.10); }
.brand-mark img { width:100%; height:100%; display:block; object-fit:cover; }
.brand-title { font-weight:800; font-size:18px; }
.brand-sub { color:var(--muted); font-size:12px; margin-top:2px; }
nav { display:flex; flex-direction:column; gap:8px; }
.nav-btn { border:0; color:var(--muted); background:transparent; padding:12px 14px; border-radius:10px; text-align:left; font-weight:700; }
.nav-btn:hover,.nav-btn.active { background:var(--panel2); color:var(--text); }
.sidebar-note { margin-top:auto; padding:14px; border:1px solid var(--line); border-radius:12px; display:flex; flex-direction:column; gap:5px; color:var(--muted); font-size:12px; }
.sidebar-note strong { color:var(--accent); }
.main-content { padding: 28px 34px 50px; overflow:hidden; }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:26px; }
h1,h2,p { margin:0; } h1 { font-size:28px; } h2 { font-size:18px; }
.topbar p,.panel-head p { color:var(--muted); margin-top:6px; font-size:13px; }
.top-actions { display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.primary-btn,.ghost-btn,.danger-ghost,.mini-btn { border-radius:10px; border:1px solid transparent; padding:10px 14px; font-weight:800; }
.primary-btn { background:var(--accent); color:#07110b; }
.primary-btn:hover { background:#99f6bc; }
.ghost-btn { background:var(--panel); border-color:var(--line); color:var(--text); }
.danger-ghost { background:transparent; border-color:#573033; color:#ff8e8e; }
.metric-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-bottom:14px; }
.metric-card,.panel { background:linear-gradient(180deg,rgba(23,28,34,.96),rgba(17,21,26,.96)); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); }
.metric-card { padding:18px; }
.metric-card span { color:var(--muted); font-size:12px; font-weight:700; }
.metric-card strong { display:block; font-size:27px; margin:8px 0 4px; }
.metric-card small { color:#66727f; }
.two-col { display:grid; grid-template-columns:1.6fr 1fr; gap:14px; }
.panel { padding:18px; }
.panel-head { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:16px; }
.pill { font-size:12px; color:var(--accent); background:#14291c; border:1px solid #235c38; padding:6px 9px; border-radius:999px; }
.position-list { display:flex; flex-direction:column; gap:10px; }
.position-card { display:grid; grid-template-columns:1.2fr repeat(5,1fr); gap:12px; padding:14px; border:1px solid var(--line); border-radius:12px; background:#0f1317; align-items:center; }
.position-symbol { display:flex; flex-direction:column; gap:3px; }
.position-symbol strong { font-size:18px; } .position-symbol span { color:var(--muted); font-size:12px; }
.position-detail span { color:var(--muted); font-size:11px; display:block; } .position-detail strong { font-size:13px; }
.snapshot-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.snapshot-grid div { border:1px solid var(--line); border-radius:12px; padding:14px; background:#0f1317; }
.snapshot-grid span { color:var(--muted); font-size:11px; display:block; } .snapshot-grid strong { font-size:22px; display:block; margin-top:5px; }
.info-box,.callout { margin-top:14px; background:#0e1712; border:1px solid #1f4c31; border-radius:12px; padding:14px; color:#b9c9c0; font-size:13px; line-height:1.5; }
.info-box strong { color:var(--accent); display:block; margin-bottom:4px; }
.view { display:none; } .active-view { display:block; }
.trade-layout { display:grid; grid-template-columns:1.35fr .75fr; gap:14px; }
.segmented { display:grid; grid-template-columns:1fr 1fr; background:#0d1115; border:1px solid var(--line); border-radius:12px; padding:4px; margin-bottom:16px; }
.segmented label { cursor:pointer; }
.segmented input { display:none; }
.segmented span { display:block; padding:10px 12px; border-radius:9px; text-align:center; color:var(--muted); font-weight:800; font-size:13px; }
.segmented input:checked + span { background:var(--panel2); color:var(--accent); }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-grid label { color:var(--muted); font-size:12px; font-weight:700; }
.form-grid input { width:100%; margin-top:7px; padding:11px 12px; color:var(--text); background:#0d1115; border:1px solid var(--line); border-radius:9px; outline:none; }
.form-grid input:focus { border-color:#3d8f5c; box-shadow:0 0 0 3px rgba(61,143,92,.12); }
.full-width { width:100%; margin-top:16px; }
.hidden { display:none !important; }
.calc-row { display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); padding:12px 0; gap:12px; }
.calc-row span { color:var(--muted); font-size:13px; } .calc-row strong { font-size:16px; }


.table-wrap { overflow:auto; }
table { width:100%; border-collapse:collapse; min-width:1180px; }
th { color:var(--muted); font-size:11px; text-align:left; padding:10px 8px; border-bottom:1px solid var(--line); }
td { font-size:13px; padding:13px 8px; border-bottom:1px solid var(--line); vertical-align:middle; }
.status { border-radius:999px; padding:5px 8px; font-size:10px; font-weight:900; display:inline-block; }
.status.open { background:#17321f; color:var(--accent); }.status.assigned { background:#352d16; color:var(--warning); }.status.closed { background:#22272e; color:#aeb7c0; }
.action-row { display:flex; gap:6px; flex-wrap:wrap; }
.mini-btn { padding:6px 8px; background:#0e1317; border-color:var(--line); color:#d8dfe5; font-size:11px; }
.mini-btn:hover { border-color:#4b5967; }
.history-list { display:flex; flex-direction:column; gap:10px; }
.history-item { border:1px solid var(--line); border-radius:12px; padding:14px; background:#0f1317; display:flex; justify-content:space-between; gap:16px; align-items:center; }
.history-copy { min-width:0; }
.history-item small { color:var(--muted); display:block; margin-top:4px; }
.history-actions { display:flex; align-items:center; gap:12px; flex-shrink:0; }
.history-remove { color:#ff8e8e; border-color:#573033; }
.history-remove:hover { border-color:#8b454a; background:#241416; }
.history-item strong.positive { color:var(--accent); }.history-item strong.negative { color:var(--danger); }
.empty-state { color:var(--muted); border:1px dashed #2d3540; border-radius:12px; padding:22px; text-align:center; }

.performance-panel { margin-top:14px; }
.performance-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.performance-card { border:1px solid var(--line); border-radius:12px; padding:15px; background:#0f1317; min-width:0; color:var(--text); text-align:left; width:100%; transition:border-color .16s ease, transform .16s ease, background .16s ease; }
.performance-card:hover { border-color:#42505d; background:#12181d; transform:translateY(-1px); }
.performance-card:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.performance-card.active { border-color:#2f7f4d; background:#101c15; box-shadow:inset 0 0 0 1px rgba(124,242,170,.08); }
.performance-card span { color:var(--muted); font-size:11px; font-weight:800; display:block; }
.performance-card strong { display:block; font-size:23px; margin:7px 0 5px; }
.performance-card small { color:#6f7c89; font-size:10px; line-height:1.4; display:block; }
.performance-card em { color:#7a8793; font-size:10px; line-height:1.4; display:block; margin-top:9px; font-style:normal; font-weight:700; }
.performance-card.active em { color:var(--accent); }
.performance-chart-panel { margin-top:14px; border:1px solid var(--line); border-radius:14px; background:#0d1115; padding:16px; }
.performance-chart-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:12px; }
.performance-chart-head h3 { margin:3px 0 4px; font-size:17px; }
.performance-chart-head p { color:var(--muted); font-size:12px; line-height:1.45; max-width:720px; }
.chart-kicker { color:var(--accent); font-size:10px; font-weight:900; text-transform:uppercase; letter-spacing:.09em; }
.performance-chart-wrap { position:relative; width:100%; overflow:hidden; border:1px solid #202831; border-radius:12px; background:#0a0e11; }
.performance-chart { width:100%; height:auto; min-height:280px; display:block; }
.performance-chart .grid-line { stroke:#202830; stroke-width:1; }
.performance-chart .zero-line { stroke:#53606c; stroke-width:1.25; }
.performance-chart .axis-label { fill:#73808c; font-size:11px; }
.performance-chart .axis-title { fill:#9aa6b1; font-size:11px; font-weight:700; }
.performance-chart .bar-positive { fill:#52d98b; }
.performance-chart .bar-negative { fill:#ff7676; }
.performance-chart .series-line-0 { fill:none; stroke:#7cf2aa; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.performance-chart .series-line-1 { fill:none; stroke:#f6c85f; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.performance-chart .series-dot-0 { fill:#7cf2aa; stroke:#0a0e11; stroke-width:2; }
.performance-chart .series-dot-1 { fill:#f6c85f; stroke:#0a0e11; stroke-width:2; }
.performance-chart .hit-target { fill:transparent; cursor:crosshair; }
.performance-tooltip { position:absolute; pointer-events:none; z-index:3; min-width:128px; max-width:220px; border:1px solid #35414c; border-radius:9px; background:rgba(9,12,15,.96); color:var(--text); padding:8px 10px; box-shadow:0 10px 28px rgba(0,0,0,.35); font-size:11px; line-height:1.45; transform:translate(-50%,-115%); }
.performance-tooltip strong { display:block; margin-bottom:2px; }
.performance-tooltip span { color:#b8c1c9; display:block; }
.performance-chart-legend { display:flex; flex-wrap:wrap; gap:14px; min-height:0; margin-top:10px; color:var(--muted); font-size:11px; }
.legend-item { display:flex; align-items:center; gap:6px; }
.legend-swatch { width:9px; height:9px; border-radius:50%; display:inline-block; }
.legend-swatch.series-0 { background:#7cf2aa; }
.legend-swatch.series-1 { background:#f6c85f; }
.chart-empty { color:var(--muted); border:1px dashed #2d3540; border-radius:10px; padding:24px; text-align:center; font-size:12px; }
.performance-note { margin-top:12px; color:#6f7c89; font-size:11px; line-height:1.45; }
@media (max-width: 1180px){ .metric-grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width: 1050px){ .performance-grid{grid-template-columns:1fr 1fr}.two-col,.trade-layout{grid-template-columns:1fr}.app-shell{grid-template-columns:190px 1fr}.position-card{grid-template-columns:1fr 1fr}.position-symbol{grid-column:1/-1} }
@media (max-width: 720px){ .performance-grid{grid-template-columns:1fr}.app-shell{display:block}.sidebar{border-right:0;border-bottom:1px solid var(--line);padding:16px}.sidebar nav{display:grid;grid-template-columns:repeat(4,1fr);overflow:auto}.sidebar-note{display:none}.main-content{padding:20px 14px}.topbar{align-items:flex-start;flex-direction:column}.metric-grid,.form-grid{grid-template-columns:1fr}.top-actions{justify-content:flex-start}.position-card{grid-template-columns:1fr 1fr}.position-symbol{grid-column:1/-1} }

.trade-dialog { width:min(620px,calc(100vw - 28px)); border:0; padding:0; background:transparent; color:var(--text); }
.trade-dialog::backdrop { background:rgba(0,0,0,.68); backdrop-filter:blur(3px); }
.dialog-card { background:linear-gradient(180deg,#171c22,#11151a); border:1px solid var(--line); border-radius:16px; box-shadow:0 24px 70px rgba(0,0,0,.55); padding:20px; }
.dialog-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:18px; }
.dialog-head h2 { margin:4px 0 5px; font-size:20px; }
.dialog-head p { color:var(--muted); font-size:12px; line-height:1.45; }
.dialog-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.dialog-grid label { color:var(--muted); font-size:12px; font-weight:800; }
.dialog-grid input { width:100%; margin-top:7px; padding:11px 12px; color:var(--text); background:#0d1115; border:1px solid var(--line); border-radius:9px; outline:none; }
.dialog-grid input:focus { border-color:#3d8f5c; box-shadow:0 0 0 3px rgba(61,143,92,.12); }
.dialog-grid small { display:block; margin-top:5px; color:#6f7c89; font-size:10px; font-weight:500; }
.dialog-math { margin-top:16px; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.dialog-math div { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:11px 13px; background:#0d1115; border-bottom:1px solid var(--line); }
.dialog-math div:last-child { border-bottom:0; }
.dialog-math span { color:var(--muted); font-size:12px; }
.dialog-math strong { font-size:14px; }
.dialog-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:16px; }
@media (max-width:720px){ .dialog-grid{grid-template-columns:1fr} }

.positive { color:var(--accent) !important; }
.negative { color:var(--danger) !important; }


.portfolio-grid { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(320px,.75fr); gap:14px; margin-top:14px; }
.portfolio-grid.inventory-only { grid-template-columns:1fr; }
.cash-management-layout { display:grid; grid-template-columns:minmax(0,1fr); max-width:980px; }
.share-inventory-panel,.cash-panel { min-width:0; }
.compact-table-wrap table { min-width:1080px; }
.inventory-table { min-width:1080px; }
.inventory-table th,.inventory-table td { white-space:nowrap; }
.inventory-table button:disabled { opacity:.38; cursor:not-allowed; }
.cash-balance-hero { border:1px solid var(--line); background:#0f1317; border-radius:12px; padding:15px; }
.cash-balance-hero span { display:block; color:var(--muted); font-size:11px; font-weight:800; }
.cash-balance-hero strong { display:block; font-size:30px; margin:6px 0 4px; }
.cash-balance-hero small { color:#6f7c89; line-height:1.45; display:block; }
.cash-balance-form { display:grid; grid-template-columns:1fr auto; gap:10px; align-items:end; margin-top:12px; }
.cash-balance-form label { color:var(--muted); font-size:11px; font-weight:800; }
.cash-balance-form input { width:100%; margin-top:6px; padding:10px 11px; color:var(--text); background:#0d1115; border:1px solid var(--line); border-radius:9px; outline:none; }
.cash-mini-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }
.cash-mini-grid div { border:1px solid var(--line); border-radius:10px; padding:11px; background:#0f1317; }
.cash-mini-grid span { color:var(--muted); font-size:10px; display:block; }
.cash-mini-grid strong { display:block; margin-top:4px; font-size:16px; }
.cash-ledger-title { color:var(--muted); font-size:11px; font-weight:800; margin:14px 0 8px; }
.cash-ledger { display:flex; flex-direction:column; gap:7px; }
.cash-ledger-row { display:flex; justify-content:space-between; gap:12px; align-items:center; border:1px solid var(--line); border-radius:9px; padding:9px 10px; background:#0f1317; }
.cash-ledger-row > div:first-child { min-width:0; }
.cash-ledger-row strong { font-size:11px; }
.cash-ledger-row small { display:block; color:#6f7c89; font-size:9px; margin-top:3px; line-height:1.35; }
.cash-ledger-values { text-align:right; flex-shrink:0; }
.cash-ledger-values small { white-space:nowrap; }
.muted { color:var(--muted); }
@media (max-width:1050px){ .portfolio-grid{grid-template-columns:1fr} }
@media (max-width:720px){ .metric-grid{grid-template-columns:1fr 1fr}.cash-balance-form{grid-template-columns:1fr}.cash-balance-form .primary-btn{width:100%} }
@media (max-width:460px){ .metric-grid{grid-template-columns:1fr}.cash-mini-grid{grid-template-columns:1fr} }

/* Individual Wheels */
.wheels-list-head { align-items:flex-start; }
.wheel-toolbar { display:flex; align-items:end; gap:12px; margin-bottom:14px; }
.wheel-search-label { color:var(--muted); font-size:11px; font-weight:800; width:min(360px,100%); }
.wheel-search-label input { width:100%; margin-top:6px; padding:10px 11px; color:var(--text); background:#0d1115; border:1px solid var(--line); border-radius:9px; outline:none; }
.wheel-search-label input:focus { border-color:#3d8f5c; box-shadow:0 0 0 3px rgba(61,143,92,.12); }
.wheel-list { display:flex; flex-direction:column; gap:9px; }
.wheel-list:not(.empty-state) { padding:0; border:0; text-align:left; }
.wheel-list-item { width:100%; border:1px solid var(--line); border-radius:12px; background:#0f1317; color:var(--text); padding:14px 15px; display:grid; grid-template-columns:minmax(120px,1.25fr) repeat(5,minmax(95px,1fr)) auto; gap:12px; align-items:center; text-align:left; }
.wheel-list-item:hover { border-color:#42505d; background:#12181d; }
.wheel-list-item:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.wheel-list-symbol { display:flex; flex-direction:column; gap:3px; min-width:0; }
.wheel-list-symbol strong { font-size:18px; }
.wheel-list-symbol small,.wheel-list-metric span { color:var(--muted); font-size:10px; }
.wheel-list-metric { min-width:0; }
.wheel-list-metric strong { display:block; margin-top:3px; font-size:12px; white-space:nowrap; }
.wheel-list-arrow { color:var(--muted); font-size:18px; }
.wheel-detail-topbar { display:flex; justify-content:space-between; gap:12px; align-items:center; margin-bottom:14px; }
.wheel-detail-actions { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
.wheel-detail-actions button:disabled { opacity:.38; cursor:not-allowed; }
.wheel-hero-panel { display:flex; align-items:center; justify-content:space-between; gap:18px; }
.wheel-hero-copy h2 { font-size:31px; margin:4px 0 4px; }
.wheel-hero-copy p { color:var(--muted); font-size:12px; }
.wheel-hero-side { text-align:right; flex-shrink:0; }
.wheel-hero-side span { display:block; color:var(--muted); font-size:10px; font-weight:800; }
.wheel-hero-side strong { display:block; margin-top:5px; font-size:13px; }
.wheel-stat-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-top:14px; }
.wheel-section-panel { margin-top:14px; }
.wheel-position-table { min-width:1000px; }
.wheel-history-event { display:flex; justify-content:space-between; gap:14px; align-items:center; }
.wheel-history-event > div { min-width:0; }
.wheel-history-event small { color:var(--muted); display:block; margin-top:4px; }
@media (max-width:1180px){ .wheel-stat-grid{grid-template-columns:repeat(3,1fr)} .wheel-list-item{grid-template-columns:minmax(120px,1.25fr) repeat(3,minmax(90px,1fr)) auto}.wheel-list-item .wheel-hide-mid{display:none} }
@media (max-width:850px){ .wheel-stat-grid{grid-template-columns:1fr 1fr}.wheel-list-item{grid-template-columns:1.2fr 1fr 1fr auto}.wheel-list-item .wheel-hide-small{display:none} }
@media (max-width:720px){ .sidebar nav{grid-template-columns:repeat(6,minmax(120px,1fr))}.wheel-detail-topbar,.wheel-hero-panel{align-items:flex-start;flex-direction:column}.wheel-hero-side{text-align:left}.wheel-detail-actions{justify-content:flex-start}.wheel-list-item{grid-template-columns:1fr 1fr auto}.wheel-list-item .wheel-hide-mobile{display:none} }
@media (max-width:460px){ .wheel-stat-grid{grid-template-columns:1fr}.wheel-list-item{grid-template-columns:1fr auto}.wheel-list-item .wheel-list-metric{display:none} }