:root{
  --surface-0:#fcfcfb; --surface-1:#f5f4f0; --surface-2:#ffffff;
  --border:rgba(11,11,11,0.12); --border-strong:rgba(11,11,11,0.24);
  --text-primary:#0b0b0b; --text-secondary:#52514e; --text-muted:#898781;
  --radius:8px;
  --bg-accent:#e6f1fb; --border-accent:#378ADD; --text-accent:#185fa5;
  --bg-success:#eaf3de; --text-success:#3b6d11;
  --bg-danger:#fcebeb; --text-danger:#a32d2d;
  --text-warning:#a3742d;
  --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;}
body{
  margin:0; padding:2rem; max-width:1400px; margin-left:auto; margin-right:auto;
  background:var(--surface-0); color:var(--text-primary); font-family:var(--font-sans);
}
button, a.btn{
  font-family:inherit; font-size:14px; background:transparent; color:var(--text-primary);
  border:0.5px solid var(--border-strong); border-radius:var(--radius); padding:0 14px; cursor:pointer;
  text-decoration:none; display:inline-flex; align-items:center; justify-content:center; height:36px;
}
button:hover, a.btn:hover{ background:var(--surface-1); }
button:active, a.btn:active{ transform:scale(0.98); }
input, select{
  font-family:inherit; font-size:14px; color:var(--text-primary); background:var(--surface-2);
  border:0.5px solid var(--border-strong); border-radius:var(--radius); padding:0 8px; height:36px;
}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;}
.tab-btn.active,.acct-btn.active,.chip-btn.active{background:var(--bg-accent);border-color:var(--border-accent);color:var(--text-accent);}
.metric-card{background:var(--surface-1);border-radius:var(--radius);padding:1rem;}
.metric-label{font-size:13px;color:var(--text-secondary);margin:0 0 4px;}
.metric-value{font-size:24px;font-weight:500;margin:0;}
.cat-card{background:var(--surface-2);border:0.5px solid var(--border);border-radius:12px;padding:1rem 1.1rem;}
table{width:100%;border-collapse:collapse;font-size:13px;}
th{text-align:right;color:var(--text-secondary);font-weight:500;padding:6px 4px;border-bottom:0.5px solid var(--border);white-space:nowrap;}
th:first-child,td:first-child{text-align:left;}
td{text-align:right;padding:8px 4px;border-bottom:0.5px solid var(--border);white-space:nowrap;}
.total-row td{font-weight:500;border-top:1.5px solid var(--border-strong);border-bottom:none;}
.chip-btn{height:36px;padding:0 12px;font-size:13px;display:inline-flex;align-items:center;justify-content:center;line-height:1;}
.badge{display:inline-block;padding:2px 8px;border-radius:var(--radius);font-size:12px;font-weight:500;}
.stock-link{color:inherit;text-decoration:none;}
.stock-link:hover{text-decoration:underline;}
.watch-list{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px;}
.watch-chip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 4px 0 12px;border:0.5px solid var(--border-strong);border-radius:15px;background:var(--surface-2);font-size:13px;}
.watch-chip form{margin:0;display:inline-flex;}
.watch-code{color:var(--text-muted);font-size:11px;}
.watch-del{height:22px;width:22px;padding:0;border:none;border-radius:50%;font-size:15px;line-height:1;color:var(--text-muted);}
.watch-del:hover{background:var(--surface-1);color:var(--text-danger);}
.tab-row{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap;}
.placeholder{font-size:13px;color:var(--text-muted);padding:3rem 0;text-align:center;}
.sync-overlay{position:fixed;inset:0;background:rgba(11,11,11,0.35);display:none;align-items:center;justify-content:center;z-index:1000;}
.sync-overlay.active{display:flex;}
.spinner{width:36px;height:36px;border:3px solid rgba(255,255,255,0.4);border-top-color:#fff;border-radius:50%;animation:spin 0.8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}