:root { color-scheme:light; --bg:#f7f9f8; --text:#263833; --muted:#687973; --edge:#dce5e0; --accent:#21684f; --cyan:#167c9c; }
* { box-sizing:border-box; letter-spacing:0; }
html { scroll-behavior:smooth; scroll-padding-top:20px; }
body { margin:0; background:var(--bg); color:var(--text); font:14px/1.6 -apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC',sans-serif; }
button,input,select { font:inherit; }
button { min-height:40px; padding:8px 14px; border:1px solid transparent; border-radius:6px; cursor:pointer; font-weight:600; transition:background .15s; }
button:disabled { cursor:wait; opacity:.55; }
button:active { transform:translateY(1px); }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible { outline:3px solid #9bbfd1; outline-offset:3px; }
.primary { background:var(--accent); color:#fff; }
.primary:hover { background:#184f3c; }
.ghost { background:#fff; color:var(--text); border-color:var(--edge); }
.ghost:hover { background:#edf4ef; }
#logout,.logout-action { color:#9c3933; border-color:#e3c9c6; }
#logout:hover,.logout-action:hover { background:#fff1ef; }
input,select { width:100%; min-width:0; min-height:42px; padding:9px 11px; border:1px solid #ccd9d1; border-radius:6px; background:#fff; color:var(--text); }
input::placeholder { color:#778780; }
input[type=number] { font-variant-numeric:tabular-nums; }
[hidden] { display:none!important; }
.app { max-width:1320px; margin:0 auto; padding:0 32px 56px; }
.topbar { display:flex; justify-content:space-between; align-items:center; gap:24px; min-height:112px; padding:22px 0; }
.brand { display:flex; align-items:center; gap:13px; }
.logo { flex:0 0 44px; width:44px; height:44px; display:grid; place-items:center; border:2px solid var(--accent); border-radius:8px; color:var(--accent); font-weight:800; font-size:19px; }
.title { font-size:23px; font-weight:750; }
.title span { font-size:16px; font-weight:500; margin-left:12px; }
.subtitle { font-size:12px; color:var(--muted); }
.top-actions { display:flex; align-items:center; gap:8px; }
.fx-box { border-left:1px solid var(--edge); padding-left:22px; margin-left:10px; min-width:200px; text-align:right; }
.fx-label,.fx-updated { font-size:11px; color:var(--muted); }
.fx-rate { font-size:21px; font-weight:700; font-variant-numeric:tabular-nums; }
.market-bar { display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-top:1px solid var(--edge); color:var(--muted); font-size:11px; flex-wrap:wrap; }
.market-bar span:first-child { color:var(--accent); }
.warning,.market-bar .warning { color:#a65c12!important; }
.section-nav { display:flex; gap:30px; border-bottom:1px solid var(--edge); padding:10px 0 15px; margin-bottom:28px; overflow-x:auto; }
.section-nav a { color:var(--muted); text-decoration:none; white-space:nowrap; font-size:13px; }
.section-nav a:hover { color:var(--accent); }
.section-nav a:first-child { color:var(--accent); font-weight:700; }
.grid { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:32px; }
.panel { min-width:0; padding:0 0 24px; border-bottom:1px solid var(--edge); }
.account-panel { grid-column:span 7; }
.trade-panel { grid-column:span 5; }
.holdings-panel { grid-column:span 12; }
.performance-panel { grid-column:span 8; }
.ledger-panel { grid-column:span 4; }
.settings-panel { grid-column:span 12; }
.panel-header { display:flex; align-items:center; justify-content:space-between; gap:15px; min-height:52px; margin-bottom:18px; }
.panel-title { font-size:18px; font-weight:700; }
.panel-subtitle { color:var(--muted); font-size:11px; }
.eyebrow { font-size:11px; color:var(--muted); }
.account-profile { display:flex; align-items:center; gap:14px; }
.account-avatar { width:86px; height:98px; object-fit:contain; }
.account-name { font-size:27px; line-height:1.3; }
.account-switch { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.account-switch select { width:112px; }
.metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin:20px 0; }
.metric { padding:8px 20px 8px 0; min-width:0; }
.metric+.metric { padding-left:20px; border-left:1px solid var(--edge); }
.metric-label { font-size:11px; color:var(--muted); }
.metric-value { font-size:27px; line-height:1.4; margin-top:7px; font-weight:700; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.metric:last-child .metric-value { color:var(--accent); }
.interest { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 0; border-top:1px solid var(--edge); }
.interest-title { font-size:13px; font-weight:600; }
.interest-sub { font-size:11px; color:var(--muted); }
.interest button { background:#e7f0ea; color:var(--accent); }
.form-row { display:flex; gap:8px; align-items:center; min-width:0; }
.cash-actions .form-row { display:grid; grid-template-columns:minmax(80px,1fr) minmax(80px,1.3fr) auto auto; }
.cash-actions button { padding:8px; font-size:12px; }
.trade-panel>.form-row { display:grid; grid-template-columns:1fr 1fr 1.3fr; }
.trade-panel #buyStock,.trade-panel #sellStock { min-width:90px; }
.prices { margin-top:16px; }
.prices-header,.price-row { display:grid; grid-template-columns:.8fr .8fr 2fr; gap:10px; align-items:center; font-size:12px; padding:9px 0; border-bottom:1px solid var(--edge); }
.prices-header { color:var(--muted); font-size:11px; }
.price-row>div:nth-child(2) { font-weight:650; font-variant-numeric:tabular-nums; }
.quote-time { font-size:10px; line-height:1.5; color:var(--muted); }
.prices-foot { font-size:10px; color:var(--muted); padding-top:8px; }
.table { border-collapse:collapse; width:100%; font-size:13px; }
.table th { text-align:left; font-weight:500; color:var(--muted); font-size:11px; padding:8px 12px; background:#edf3ef; }
.table td { padding:13px 12px; border-bottom:1px solid var(--edge); font-variant-numeric:tabular-nums; }
.table th:not(:first-child),.table td:not(:first-child) { text-align:right; }
.muted { color:var(--muted); font-size:12px; }
.pill { font-size:11px; color:var(--accent); }
.chart-controls { display:flex; flex-wrap:wrap; gap:8px; }
.segmented { display:flex; border:1px solid var(--edge); border-radius:6px; overflow:hidden; background:#fff; }
.segmented button { min-height:32px; font-size:11px; border-radius:0; padding:5px 9px; background:transparent; color:var(--muted); }
.segmented button.active { background:#e3eee7; color:var(--accent); }
.performance-panel>.panel-header { flex-wrap:wrap; }
.chart-wrap { position:relative; }
#performanceChart { display:block; width:100%; height:auto; aspect-ratio:800/260; }
.chart-tooltip { min-height:63px; padding:5px 0; font-size:10px; color:var(--muted); }
.chart-legend { display:flex; gap:18px; font-size:11px; color:var(--muted); }
.legend-item { display:flex; align-items:center; gap:6px; }
.legend-dot { width:8px; height:8px; display:inline-block; border-radius:50%; }
.legend-hold { background:var(--cyan); }
.legend-total { background:var(--accent); }
#performanceChart line { stroke:#dce5e0; }
#performanceChart polyline:nth-of-type(1) { stroke:var(--cyan); }
#performanceChart polyline:nth-of-type(2) { stroke:var(--accent); }
#performanceChart circle[fill="#63d2ff"] { fill:var(--cyan); }
#performanceChart circle[fill="#ffb200"] { fill:var(--accent); }
#performanceChart text { fill:var(--muted); }
.chart-meta { font-size:11px; color:var(--muted); margin-top:8px; overflow-wrap:anywhere; }
.ledger-list { max-height:390px; overflow:auto; }
.ledger-item { display:flex; justify-content:space-between; gap:15px; padding:12px 0; border-bottom:1px solid var(--edge); font-size:12px; }
.ledger-item>div:first-child { min-width:0; overflow-wrap:anywhere; }
.ledger-item>div:last-child { flex-shrink:0; font-variant-numeric:tabular-nums; }
.ledger-meta { font-size:10px; color:var(--muted); }
.settings-body { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.settings-card { padding:20px; border:1px solid var(--edge); border-radius:8px; background:#fff; }
.settings-title { display:flex; align-items:center; gap:8px; min-height:48px; font-weight:700; font-size:16px; margin-bottom:12px; }
.settings-title img { width:44px; height:48px; object-fit:contain; }
.settings-card .form-row { margin:10px 0; }
.settings-card label { display:grid; gap:4px; font-size:11px; color:var(--muted); width:100%; }
.settings-actions { display:flex; gap:8px; margin-top:16px; }
.settings-actions button { font-size:12px; }
.overlay { position:fixed; inset:0; display:grid; place-items:center; background:#f1f6f3; z-index:10; overflow:auto; padding:24px; }
.login-card { width:min(440px,100%); display:grid; gap:14px; padding:32px; background:#fff; border:1px solid var(--edge); border-radius:8px; box-shadow:0 12px 36px #243e3210; }
.login-brand { font-size:15px; font-weight:750; color:var(--accent); border-bottom:1px solid var(--edge); padding-bottom:18px; margin-bottom:6px; }
.login-brand span { float:right; color:var(--muted); font-weight:400; font-size:12px; }
.login-title { font-size:24px; font-weight:700; }
.login-sub { color:var(--muted); font-size:12px; margin-top:-9px; }
.login-accounts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.login-account-btn { display:grid; place-items:center; gap:6px; background:#f7f9f8; border:1px solid var(--edge); padding:12px; border-radius:8px; color:var(--text); min-height:158px; }
.login-account-btn img { width:116px; height:116px; object-fit:contain; }
.login-account-btn.active { background:#edf5ef; border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); }
#loginAccount { display:none; }
.login-error { color:#b03937; font-size:12px; min-height:20px; }
.login-note { color:var(--muted); font-size:11px; }
@media(max-width:1050px) {
  .topbar { flex-wrap:wrap; }
  .top-actions { width:100%; }
  .fx-box { margin-left:auto; }
  .grid { gap:26px; }
  .account-panel,.trade-panel { grid-column:span 6; }
  .account-panel>.panel-header { flex-wrap:wrap; }
  .cash-actions .form-row { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .metric { padding-right:10px; }
  .metric+.metric { padding-left:10px; }
  .metric-value { font-size:23px; }
}
@media(max-width:760px) {
  .app { padding:0 18px 30px; }
  .topbar { padding:20px 0 15px; gap:16px; }
  .title { font-size:21px; }
  .title span { font-size:14px; margin-left:6px; }
  .top-actions { flex-wrap:wrap; }
  .top-actions button { font-size:11px; padding:7px 10px; min-height:36px; }
  .fx-box { width:100%; border-left:0; border-top:1px solid var(--edge); padding:10px 0 0; margin:6px 0 0; text-align:left; display:grid; grid-template-columns:1fr auto; align-items:center; }
  .fx-updated { grid-column:span 2; }
  .market-bar { font-size:10px; gap:3px; }
  .section-nav { gap:22px; margin-bottom:22px; }
  .grid { grid-template-columns:minmax(0,1fr); gap:24px; }
  .panel { grid-column:1; }
  .account-panel>.panel-header { flex-wrap:wrap; }
  .account-switch { width:100%; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .account-switch select { width:100%; grid-column:span 2; }
  .account-avatar { width:76px; height:88px; }
  .metric-value { font-size:22px; }
  .metric-label { font-size:10px; }
  .metrics { margin:12px 0; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .metric:last-child { grid-column:span 2; display:flex; justify-content:space-between; align-items:center; border-left:0; border-top:1px solid var(--edge); padding:12px 0; margin-top:8px; }
  .metric:last-child .metric-value { margin:0; }
  .interest { align-items:flex-start; }
  .interest button { font-size:12px; flex-shrink:0; }
  .settings-body { grid-template-columns:minmax(0,1fr); gap:16px; }
  .table { font-size:11px; }
  .table th,.table td { padding:10px 5px; }
  .table th { font-size:10px; }
  #performanceChart { aspect-ratio:800/340; }
  .login-card { padding:24px; }
  .login-title { font-size:22px; }
  .login-account-btn { min-height:140px; }
  .login-account-btn img { width:94px; height:100px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { transition:none!important; } }