:root {
  /* Claude dashboard palette */
  --bg: #faf9f5; --panel: #ffffff; --fg: #141413; --muted: #6b6a64; --line: #e8e6dc;
  --ok: #1f9d55; --bad: #e0444f; --warn: #d08a0b;
  --c1: #6366f1; --c2: #14b8a6; --c3: #f59e0b; --c4: #f43f5e; --c5: #8b5cf6; --c6: #0ea5e9;
  --radius: 12px; --shadow: 0 1px 2px rgba(20,20,19,.05);
  --serif: "Tiempos Text", "Source Serif 4", Georgia, "Times New Roman", serif;
  font-family: "Styrene B", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #1f1e1d; --panel: #262624; --fg: #f0eee6; --muted: #a3a19a; --line: #3a3936; --shadow: none; }
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--fg); }
body { padding-bottom: env(safe-area-inset-bottom); }
.hidden { display: none !important; }
.muted { color: var(--muted); } .small { font-size: 12px; }
.up { color: var(--ok); } .dn { color: var(--bad); } .wa { color: var(--warn); }
.err { color: var(--bad); min-height: 1em; }
h1, h2, h3 { margin: 0; font-weight: 600; } h2 { font-size: 16px; }

.login { min-height: 100vh; display: grid; place-items: center; padding: 16px;
  background: radial-gradient(circle at 20% 10%, color-mix(in srgb, var(--c1) 25%, transparent), transparent 50%),
              radial-gradient(circle at 80% 90%, color-mix(in srgb, var(--c2) 22%, transparent), transparent 50%), var(--bg); }
.login-card { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 28px; width: min(360px, 100%);
  display: grid; gap: 12px; text-align: center; box-shadow: var(--shadow); }
.login-card img { margin: 0 auto; }

input, select { font: inherit; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); min-width: 0; }
.btn { font: inherit; font-weight: 600; border: 1px solid transparent; border-radius: 8px; padding: 8px 14px; cursor: pointer; background: var(--line); color: var(--fg); }
.btn.small { padding: 5px 10px; font-size: 13px; }
.btn.primary { background: var(--c1); color: #fff; } .btn.buy { background: var(--ok); color: #fff; } .btn.sell { background: var(--bad); color: #fff; }
.btn.danger { background: color-mix(in srgb, var(--bad) 15%, transparent); color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, transparent); }
.btn.ghost { background: transparent; border-color: var(--line); }
.btn:disabled { opacity: .5; cursor: progress; }

.top { position: sticky; top: 0; z-index: 10; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between;
  padding: calc(8px + env(safe-area-inset-top)) 16px 8px; background: color-mix(in srgb, var(--panel) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.brand { display: flex; gap: 8px; align-items: center; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font-size: 12px; padding: 3px 9px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); white-space: nowrap; }
.chip.live { background: color-mix(in srgb, var(--bad) 18%, transparent); color: var(--bad); border-color: transparent; font-weight: 700; }
.chip.paper { background: color-mix(in srgb, var(--c6) 18%, transparent); color: var(--c6); border-color: transparent; font-weight: 700; }
.top-actions { display: flex; gap: 6px; }

.tabs { display: flex; gap: 4px; padding: 8px 16px; overflow-x: auto; position: sticky; top: 52px; z-index: 9; background: var(--bg); }
.tabs button { font: inherit; border: 0; background: transparent; color: var(--muted); padding: 7px 12px; border-radius: 8px; cursor: pointer; white-space: nowrap; font-weight: 600; }
.tabs button.active { background: var(--panel); color: var(--fg); box-shadow: var(--shadow); }
@media (max-width: 640px) {
  .tabs { position: fixed; bottom: 0; top: auto; left: 0; right: 0; justify-content: space-around; background: var(--panel);
    border-top: 1px solid var(--line); padding-bottom: calc(6px + env(safe-area-inset-bottom)); }
  .tabs button { padding: 7px 6px; font-size: 13px; }
  main { padding-bottom: 80px !important; }
  .top { padding-left: 12px; padding-right: 12px; }
}

main { padding: 8px 16px 24px; max-width: 1500px; margin: 0 auto; display: block; }
.tab { display: grid; gap: 14px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow); min-width: 0; }
.card.s1 { border-top: 4px solid var(--c1); } .card.s2 { border-top: 4px solid var(--c2); }
.card.s1 h2 { color: var(--c1); } .card.s2 h2 { color: var(--c2); }
.card-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.note { font-size: 12.5px; color: var(--muted); margin: 6px 0 10px; line-height: 1.45; }
.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .row.end { justify-content: flex-end; }

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.tile { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; border-top: 3px solid var(--tc, var(--c1)); }
.tile .k { font-size: 12px; color: var(--muted); } .tile .v { font-size: 24px; font-weight: 700; margin-top: 4px; font-variant-numeric: tabular-nums; }

.tablebox { overflow: auto; max-height: 30rem; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.tbl th { position: sticky; top: 0; background: var(--panel); text-align: right; color: var(--muted); font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl td { text-align: right; padding: 6px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl th.l, .tbl td.l { text-align: left; }
.tbl tbody tr { cursor: pointer; } .tbl tbody tr:hover { background: color-mix(in srgb, var(--c6) 8%, transparent); }
.pill { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; background: color-mix(in srgb, currentColor 14%, transparent); }
.sc { display: inline-block; min-width: 2.4rem; text-align: center; border-radius: 999px; padding: 0 6px; font-weight: 700; }
.sc8 { color: var(--ok); background: color-mix(in srgb, var(--ok) 18%, transparent); }
.sc7 { color: var(--c2); background: color-mix(in srgb, var(--c2) 18%, transparent); }
.sc6, .sc5 { color: var(--c6); background: color-mix(in srgb, var(--c6) 16%, transparent); }
.sc4, .sc3, .sc2, .sc1, .sc0 { color: var(--warn); background: color-mix(in srgb, var(--warn) 16%, transparent); }

.invest { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; }
.invest .head { font-size: 13px; color: var(--muted); margin: 6px 0 8px; } .invest .head b { color: var(--fg); }
.invest .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.invest .k { font-size: 11.5px; color: var(--muted); } .invest .v { font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; } .invest .s { font-size: 11.5px; color: var(--muted); }

.pending { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--line); }

.charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr)); gap: 14px; }
.chartcard { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; min-width: 0; }
.chartcard[data-panel="1"] { border-top: 4px solid var(--c1); } .chartcard[data-panel="2"] { border-top: 4px solid var(--c2); }
.chart-h { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.chart-h .ctl { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tf { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.tf button { font: inherit; font-size: 12.5px; border: 0; background: transparent; color: var(--muted); padding: 5px 9px; cursor: pointer; }
.tf button.on { background: var(--c1); color: #fff; }
.chartbox { height: 380px; position: relative; }
@media (max-width: 640px) { .chartbox { height: 320px; } }
.ltp { font-size: 13px; margin: 6px 0; } .ltp b { font-size: 18px; }
.ltp .live { color: var(--ok); font-weight: 700; }
.legend { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; color: var(--muted); margin-top: 6px; }
.legend i { display: inline-block; width: 14px; height: 0; border-top: 2px dashed currentColor; vertical-align: middle; margin-right: 4px; }

.pos { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-top: 8px; display: grid; gap: 4px; }
.pos .r1 { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; align-items: center; }
.pos .orders { font-size: 12px; color: var(--muted); }

.settings { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 10px; }
.settings label { display: grid; gap: 4px; font-size: 13px; color: var(--muted); }

.log { display: grid; gap: 6px; font-size: 13px; }
.log .ev { border-left: 3px solid var(--line); padding: 4px 8px; white-space: pre-wrap; }
.log .ev.error { border-color: var(--bad); } .log .ev .t { color: var(--muted); font-size: 11.5px; }

dialog { border: 1px solid var(--line); border-radius: 14px; background: var(--panel); color: var(--fg); padding: 0; width: min(380px, 94vw); }
dialog::backdrop { background: rgba(0,0,0,.45); }
.dlg { display: grid; gap: 10px; padding: 18px; } .dlg label { display: grid; gap: 4px; font-size: 13px; color: var(--muted); }

#toasts { position: fixed; right: 12px; bottom: 12px; z-index: 50; display: grid; gap: 8px; max-width: min(420px, 92vw); }
@media (max-width: 640px) { #toasts { bottom: 76px; left: 12px; right: 12px; } }
.toast { background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--c1); border-radius: 10px; padding: 10px 12px; box-shadow: 0 6px 24px rgba(0,0,0,.18); white-space: pre-wrap; font-size: 13px; }
.toast.error { border-left-color: var(--bad); }

/* ---- dashboard look ---- */
.hero { padding: 16px 18px; border-radius: var(--radius);
  background: linear-gradient(120deg, color-mix(in srgb, var(--c1) 22%, transparent), color-mix(in srgb, var(--c6) 18%, transparent) 55%, color-mix(in srgb, var(--c2) 20%, transparent));
  border: 1px solid color-mix(in srgb, var(--c1) 30%, transparent); }
.hero h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(22px, 3.2vw, 30px);
  background: linear-gradient(90deg, var(--c1), var(--c6), var(--c2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p { margin: 6px 0 0; color: var(--muted); font-size: 14px; }
h2 { font-family: var(--serif); font-weight: 400; font-size: 19px; }
.card { box-shadow: none; }
.card.s1 h2, h3.sub { color: var(--c1); }
.card.charts-card { border-top: 4px solid var(--c5); } .card.charts-card > .card-h h2 { color: var(--c5); }
.card.method { border-top: 4px solid var(--c3); background: linear-gradient(180deg, color-mix(in srgb, var(--c3) 8%, var(--panel)), var(--panel)); }
.card.method h2 { color: var(--c3); } .card.method b { color: var(--c1); }
.method-body { font-size: 13px; color: var(--muted); line-height: 1.55; }
.method-body ul { margin: 4px 0 10px; padding-left: 1.1rem; }
.tile { position: relative; overflow: hidden; border-top: 4px solid var(--tc, var(--c1));
  background: linear-gradient(180deg, color-mix(in srgb, var(--tc) 14%, var(--panel)), var(--panel)); }
.tile .v { font-family: var(--serif); font-weight: 400; font-size: 28px; color: var(--tc); }
.tbl th { background: color-mix(in srgb, var(--c1) 14%, var(--panel)); color: var(--fg); font-weight: 500; }
.tbl tbody tr:nth-child(even) { background: color-mix(in srgb, var(--c1) 4%, transparent); }
.tbl tbody tr:hover { background: color-mix(in srgb, var(--c6) 12%, transparent); }
.sc8 { color: var(--ok); background: color-mix(in srgb, var(--ok) 26%, transparent); }
.sc7 { color: var(--c2); background: color-mix(in srgb, var(--c2) 22%, transparent); }
.sc6 { color: var(--c6); background: color-mix(in srgb, var(--c6) 20%, transparent); }
.sc5, .sc4 { color: var(--c3); background: color-mix(in srgb, var(--c3) 22%, transparent); }
.sc3, .sc2, .sc1, .sc0 { color: var(--c4); background: color-mix(in srgb, var(--c4) 18%, transparent); }
.invest { background: var(--panel); }
.invest .v { font-family: var(--serif); font-weight: 400; }
.invest .v.up { color: var(--ok); } .invest .v.dn { color: var(--bad); }
.pending { border-left: 4px solid var(--ok); padding-left: 10px; }
#pendingBox { border-top: 4px solid var(--ok); } #pendingBox h2 { color: var(--ok); }
.btn.primary { background: linear-gradient(90deg, var(--c1), var(--c6)); }
.tf button.on { background: linear-gradient(90deg, var(--c1), var(--c6)); }
.top b { font-family: var(--serif); font-weight: 400; font-size: 18px; }
.login-card h1 { font-family: var(--serif); font-weight: 400; background: linear-gradient(90deg, var(--c1), var(--c6), var(--c2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fw { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 60; display: none; }

/* ---- P&L tab ---- */
.pnl-card { border-top: 4px solid var(--c5); } .pnl-card h2 { color: var(--c5); }
.base-card { border-top: 4px solid var(--c3); } .base-card h2 { color: var(--c3); }
.groww-card { border-top: 4px solid var(--c6); } .groww-card h2 { color: var(--c6); }
h3.sub { font-family: var(--serif); font-weight: 400; font-size: 16px; margin: 14px 0 6px; }
.groww-card h3.sub { color: var(--c6); } .pnl-card h3.sub { color: var(--c5); }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.seg button { font: inherit; font-size: 13px; border: 0; background: transparent; color: var(--muted); padding: 5px 12px; cursor: pointer; }
.seg button.on { background: linear-gradient(90deg, var(--c5), var(--c1)); color: #fff; }
.small-chart { height: 220px; margin-top: 12px; }
.tile .s { font-size: 12px; color: var(--muted); margin-top: 2px; }
.tbl tr.total td { font-weight: 600; border-top: 2px solid var(--line); }
.tag { font-size: 11px; padding: 0 6px; border-radius: 999px; background: color-mix(in srgb, var(--c5) 18%, transparent); color: var(--c5); }
@media (max-width: 640px) { .tabs button { font-size: 12px; padding: 7px 4px; } }

/* ---- wine & gold theme (always dark) ---- */
:root {
  --bg: #2b0812; --panel: rgba(74, 16, 32, .55); --fg: #f3dfae; --muted: #c9a978; --line: rgba(230, 190, 110, .20);
  --gold: #d4af37; --gold2: #f5d77a; --ok: #3ddc84; --bad: #ff5a6a; --warn: #ffb547;
  --c1: #f5d77a; --c2: #e8b04a; --c3: #ffb547; --c4: #ff5a6a; --c5: #e9c46a; --c6: #f0c56b;
  color-scheme: dark;
}
html { background: #1e050c; }
body { background: radial-gradient(1200px 700px at 50% -10%, #6e1428 0%, #4a0d1c 35%, #2b0812 70%, #1e050c 100%) fixed; min-height: 100vh; }
.card, .chartcard, .tile, .invest, dialog, .toast { background: var(--panel); border-color: var(--line); }
.top { background: rgba(35, 7, 15, .85); border-bottom-color: var(--line); backdrop-filter: blur(8px); }
.tabs { background: transparent; }
@media (max-width: 640px) { .tabs { background: rgba(35, 7, 15, .95); } }
.tabs button { color: var(--muted); }
.tabs button.active { background: rgba(212, 175, 55, .18); color: var(--gold2); box-shadow: inset 0 -2px 0 var(--gold); }
.hero { background: linear-gradient(120deg, rgba(212,175,55,.20), rgba(110,20,40,.35) 60%, rgba(212,175,55,.10)); border-color: rgba(212,175,55,.45); }
.hero h1, .login-card h1, h2, h3.sub, .card.s1 h2, .card.s2 h2, .card.method h2, .card.charts-card > .card-h h2, .pnl-card h2, .base-card h2, .groww-card h2, #pendingBox h2 {
  background: linear-gradient(90deg, #fff1b8, #d4af37 45%, #f5d77a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.top b { color: var(--gold2); }
.card.s1, .card.s2, .card.method, .card.charts-card, .pnl-card, .base-card, .groww-card, #pendingBox { border-top: 3px solid var(--gold); }
.card.method { background: var(--panel); }
.tile { border-top: 3px solid var(--gold); background: linear-gradient(180deg, rgba(212,175,55,.12), rgba(74,16,32,.45)); }
.tile .v { color: var(--gold2); }
.tile .v:is(.up) { color: var(--ok); }
.tbl th { background: rgba(212, 175, 55, .16); color: var(--gold2); }
.tbl tbody tr:nth-child(even) { background: rgba(255, 220, 150, .04); }
.tbl tbody tr:hover { background: rgba(212, 175, 55, .10); }
.sc { color: #2b0812 !important; background: linear-gradient(90deg, #f5d77a, #d4af37) !important; }
.sc3, .sc2, .sc1, .sc0, .sc4 { background: rgba(212,175,55,.35) !important; color: var(--gold2) !important; }
input, select { background: rgba(20, 3, 8, .55); color: var(--fg); border-color: var(--line); }
.btn.primary, .tf button.on, .seg button.on { background: linear-gradient(90deg, #b8901f, #d4af37, #f5d77a); color: #2b0812; }
.btn.ghost { border-color: var(--line); color: var(--gold2); }
.chip { background: rgba(20,3,8,.5); border-color: var(--line); color: var(--fg); }
.chip.paper { background: rgba(212,175,55,.18); color: var(--gold2); }
.login { background: radial-gradient(900px 600px at 50% 30%, #7a1830 0%, #4a0d1c 45%, #1e050c 100%); }
.login-card { background: rgba(60, 12, 24, .75); border-color: rgba(212,175,55,.45); box-shadow: 0 0 60px rgba(212,175,55,.12); }
.pending { border-left-color: var(--gold); }
.method-body, .note { color: var(--muted); }
.card.method b { color: var(--gold2); }
.prevbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; margin: 4px 0 10px;
  padding: 8px 12px; border: 1px dashed var(--line); border-radius: 10px; }
.prevbar b { color: var(--gold2); }