:root{
  --bg:#F1F2EC; --surface:#FCFCF9; --surface-2:#E9EAE2;
  --ink:#1D2320; --ink-muted:#5B645D; --line:#D7D9CE;
  --accent:#A0722A; --accent-ink:#3E2C10;
  --profit:#2E7D4F; --loss:#B23B2E; --focus:#3E6E8E;
  --danger-bg:#F4E4E0;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#14181A; --surface:#1B2124; --surface-2:#20272A;
    --ink:#E9EAE3; --ink-muted:#98A29A; --line:#2B3336;
    --accent:#D9A857; --accent-ink:#2A2011;
    --profit:#56B37D; --loss:#E2785F; --focus:#7FB6DA;
    --danger-bg:#3A2420;
  }
}
:root[data-theme="dark"]{
  --bg:#14181A; --surface:#1B2124; --surface-2:#20272A;
  --ink:#E9EAE3; --ink-muted:#98A29A; --line:#2B3336;
  --accent:#D9A857; --accent-ink:#2A2011;
  --profit:#56B37D; --loss:#E2785F; --focus:#7FB6DA;
  --danger-bg:#3A2420;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:var(--bg);}
body{ color:var(--ink); font-family:'Work Sans', system-ui, sans-serif; line-height:1.5; }
h1,h2,h3{ font-family:'Fraunces', Georgia, serif; text-wrap:balance; margin:0; font-weight:600; }
.num{ font-family:'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace; font-variant-numeric:tabular-nums; }
.wrap{ max-width:1180px; margin:0 auto; padding:40px 24px 80px; }

header{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-bottom:0; margin-bottom:0; }
.brand{ font-family:'Fraunces', Georgia, serif; font-weight:600; font-size:22px; letter-spacing:-.01em; color:var(--ink); text-decoration:none; }
.brand:hover{ color:var(--accent); }
.header-status{ display:flex; align-items:center; gap:8px; }
.live-dot{ width:7px; height:7px; border-radius:50%; background:var(--profit); display:inline-block; flex-shrink:0; }
.live-dot.stale{ background:var(--ink-muted); }
.sync-note{ font-size:12.5px; color:var(--ink-muted); }
.sync-note .num{ color:var(--ink); }

.site-header{ padding-bottom:14px; margin-bottom:12px; }
.site-nav{ display:flex; gap:4px; padding-bottom:20px; margin-bottom:28px; border-bottom:1px solid var(--line); }
.nav-link{ font-family:'Work Sans', sans-serif; font-size:13.5px; font-weight:600; color:var(--ink-muted); text-decoration:none; padding:7px 12px; border-radius:7px; }
.nav-link:hover{ color:var(--ink); background:var(--surface-2); }
.nav-link.active{ color:var(--accent-ink); background:color-mix(in srgb, var(--accent) 22%, var(--surface)); }

.tiles{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-bottom:24px; }
@media (max-width:900px){ .tiles{ grid-template-columns:repeat(2,1fr); } }
.tile{ background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:16px 16px 14px; display:flex; flex-direction:column; gap:6px; }
.tile-label{ font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-muted); font-weight:600; }
.tile-value{ font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:24px; font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.tile-sub{ font-size:11.5px; color:var(--ink-muted); }
.tile.good .tile-value{ color:var(--profit); }
.tile.bad .tile-value{ color:var(--loss); }
.tile.warn{ background:var(--danger-bg); }

.grid2{ display:grid; grid-template-columns:1fr; gap:20px; margin-bottom:20px; }
.card{ background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:22px; }
.card h3{ font-size:15px; margin-bottom:4px; }
.card .card-sub{ font-size:12.5px; color:var(--ink-muted); margin-bottom:16px; }
.card-head{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap; }
.field-inline{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ink-muted); }
.field-inline input{ width:70px; padding:4px 8px; border:1px solid var(--line); border-radius:6px; background:var(--surface-2); color:var(--ink); font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:12.5px; }

.chart-wrap{ overflow-x:auto; }
.chart-pos{ position:relative; width:fit-content; }
svg.chart text{ fill:var(--ink-muted); font-family:'IBM Plex Mono', ui-monospace, monospace; }
svg.chart .axis-line{ stroke:var(--line); }
svg.chart .hit-area{ fill:transparent; cursor:pointer; }
svg.chart .bar-label{ fill:var(--ink); }
svg.chart rect.bar{ cursor:pointer; transition:opacity .1s ease; }
svg.chart rect.bar:hover, svg.chart rect.bar.hover{ opacity:.75; }

.chart-tooltip{
  position:absolute; pointer-events:none; z-index:5;
  background:var(--ink); color:var(--bg);
  font-family:'IBM Plex Mono', ui-monospace, monospace;
  font-size:11.5px; line-height:1.4;
  padding:6px 9px; border-radius:6px;
  white-space:nowrap; transform:translate(-50%,-100%);
  box-shadow:0 2px 8px rgba(0,0,0,.25);
}
.chart-tooltip strong{ font-family:'Work Sans', sans-serif; font-weight:600; }

.calendar-nav{ display:flex; align-items:center; justify-content:center; gap:18px; margin-bottom:14px; }
.calendar-month-label{ font-family:'Fraunces', Georgia, serif; font-weight:600; font-size:15px; min-width:150px; text-align:center; }
.calendar-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.calendar-dow{ text-align:center; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-muted); font-weight:600; padding-bottom:4px; }
.calendar-day{ min-height:74px; border-radius:8px; border:1px solid var(--line); padding:6px 8px; display:flex; flex-direction:column; gap:3px; justify-content:flex-start; background:var(--surface-2); }
.calendar-day.empty{ visibility:hidden; }
.calendar-day .day-num{ font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:11px; color:var(--ink-muted); }
.calendar-day .day-pnl{ font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:13px; font-weight:700; color:var(--ink); }
.calendar-day .day-meta{ font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:10px; color:var(--ink-muted); margin-top:auto; }
.calendar-day.pos{ background:color-mix(in srgb, var(--profit) var(--intensity, 14%), var(--surface)); border-color:color-mix(in srgb, var(--profit) 30%, var(--line)); }
.calendar-day.neg{ background:color-mix(in srgb, var(--loss) var(--intensity, 14%), var(--surface)); border-color:color-mix(in srgb, var(--loss) 30%, var(--line)); }
#cal-month-total{ font-family:'IBM Plex Mono', ui-monospace, monospace; color:var(--ink); }
.calendar-day.has-trades{ cursor:pointer; transition:transform .08s ease, box-shadow .08s ease; }
.calendar-day.has-trades:hover{ transform:translateY(-1px); box-shadow:0 2px 6px rgba(0,0,0,.12); }
.calendar-day.has-trades:focus-visible{ outline:2px solid var(--focus); outline-offset:1px; }

.modal-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.5); display:flex; align-items:center; justify-content:center; padding:24px; z-index:50; }
.modal-overlay[hidden]{ display:none !important; }
.modal-card{ background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:22px; max-width:900px; width:100%; max-height:80vh; overflow-y:auto; box-shadow:0 12px 32px rgba(0,0,0,.3); }
.modal-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:16px; }

.ledger-scroll{ overflow-x:auto; }
.show-more-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:12px; font-size:12px; color:var(--ink-muted); }
table.ledger{ width:100%; border-collapse:collapse; font-size:13.5px; }
table.ledger th{ text-align:right; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-muted); font-weight:600; padding:0 8px 8px 0; border-bottom:1px solid var(--line); white-space:nowrap; }
table.ledger th:first-child, table.ledger td:first-child{ text-align:left; }
table.ledger td{ padding:8px 8px 8px 0; border-bottom:1px dashed var(--line); text-align:right; font-family:'IBM Plex Mono', ui-monospace, monospace; font-variant-numeric:tabular-nums; white-space:nowrap; }
table.ledger td:first-child{ font-family:'Work Sans', sans-serif; }
.pos{ color:var(--profit); } .neg{ color:var(--loss); }

footer{ margin-top:32px; padding-top:18px; border-top:1px solid var(--line); font-size:12px; color:var(--ink-muted); }

.filter-bar{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:20px; }
.filter-bar select{ padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--ink); font-family:'Work Sans', sans-serif; font-size:13.5px; min-width:200px; }
.link-btn{ background:none; border:none; color:var(--accent); font-family:'Work Sans', sans-serif; font-size:13px; font-weight:600; cursor:pointer; padding:0; }
.link-btn:hover{ text-decoration:underline; }

.refresh-btn{ display:inline-flex; align-items:center; gap:6px; margin-left:auto; background:var(--surface); border:1px solid var(--line); border-radius:8px; color:var(--ink); font-family:'Work Sans', sans-serif; font-size:13px; font-weight:600; cursor:pointer; padding:7px 12px; }
.refresh-btn:hover{ background:var(--surface-2); }
.refresh-btn:disabled{ opacity:.6; cursor:default; }
.refresh-btn svg{ transition:transform .5s ease; }
.refresh-btn.spinning svg{ animation:spin .6s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .refresh-btn.spinning svg{ animation:none; } }

.groups-panel{ background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:20px; margin-bottom:20px; }
.groups-panel h3{ font-size:14px; margin-bottom:12px; }
.group-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 0; border-bottom:1px dashed var(--line); font-size:13.5px; }
.group-row:last-child{ border-bottom:none; }
.group-row .g-accounts{ color:var(--ink-muted); font-size:12px; }
.del-btn{ background:none; border:1px solid var(--line); border-radius:6px; color:var(--loss); font-size:11.5px; padding:3px 8px; cursor:pointer; }
.del-btn.edit-btn{ color:var(--accent); }
.del-btn:hover{ background:var(--danger-bg); }
.new-group{ display:flex; flex-direction:column; gap:10px; margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }
.new-group input[type="text"]{ padding:7px 10px; border:1px solid var(--line); border-radius:6px; background:var(--surface-2); color:var(--ink); font-family:'Work Sans', sans-serif; font-size:13px; }
.checkbox-grid{ display:flex; flex-wrap:wrap; gap:10px; }
.checkbox-grid label{ display:flex; align-items:center; gap:5px; font-size:13px; background:var(--surface-2); border:1px solid var(--line); border-radius:6px; padding:5px 10px; cursor:pointer; }
.primary-btn{ align-self:flex-start; background:var(--accent); color:var(--accent-ink); border:none; border-radius:6px; padding:8px 16px; font-family:'Work Sans', sans-serif; font-weight:600; font-size:13px; cursor:pointer; }
.primary-btn:disabled{ opacity:.5; cursor:not-allowed; }

.header-account{ display:flex; align-items:center; gap:10px; }
.header-account .acct-email{ font-size:12.5px; color:var(--ink-muted); }

.auth-shell{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; }
.auth-card{ background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:32px; max-width:380px; width:100%; box-shadow:0 12px 32px rgba(0,0,0,.12); }
.auth-card .brand{ display:block; margin-bottom:4px; }
.auth-sub{ font-size:13px; color:var(--ink-muted); margin-bottom:22px; }
.auth-field{ display:flex; flex-direction:column; gap:5px; margin-bottom:14px; }
.auth-field label{ font-size:12px; font-weight:600; color:var(--ink-muted); }
.auth-field input{ padding:9px 11px; border:1px solid var(--line); border-radius:7px; background:var(--surface-2); color:var(--ink); font-family:'Work Sans', sans-serif; font-size:14px; }
.auth-field input:focus{ outline:2px solid var(--focus); outline-offset:1px; }
.auth-submit{ width:100%; margin-top:6px; text-align:center; }
.auth-status{ font-size:12.5px; margin-top:14px; min-height:16px; }
.auth-status.error{ color:var(--loss); }
.auth-status.ok{ color:var(--profit); }
.auth-toggle{ margin-top:18px; font-size:13px; color:var(--ink-muted); text-align:center; }

.stat-groups{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-bottom:20px; }
@media (max-width:800px){ .stat-groups{ grid-template-columns:1fr; } }
.stat-list{ display:flex; flex-direction:column; }
.stat-row{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:9px 0; border-bottom:1px dashed var(--line); font-size:13.5px; }
.stat-row:last-child{ border-bottom:none; }
.stat-row .stat-label{ color:var(--ink-muted); }
.stat-row .stat-value{ font-family:'IBM Plex Mono', ui-monospace, monospace; font-variant-numeric:tabular-nums; font-weight:600; white-space:nowrap; }
.stat-value.pos{ color:var(--profit); }
.stat-value.neg{ color:var(--loss); }
.stat-footnote{ font-size:11.5px; color:var(--ink-muted); margin-top:10px; }
table.month-table{ width:100%; border-collapse:collapse; font-size:13.5px; }
table.month-table th{ text-align:right; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-muted); font-weight:600; padding:0 8px 8px 0; border-bottom:1px solid var(--line); }
table.month-table th:first-child, table.month-table td:first-child{ text-align:left; }
table.month-table td{ padding:7px 8px 7px 0; border-bottom:1px dashed var(--line); text-align:right; font-family:'IBM Plex Mono', ui-monospace, monospace; font-variant-numeric:tabular-nums; }