:root { --bg:#f5f6f8; --surface:#fff; --border:#e2e6eb; --text:#20242c; --muted:#6a7380; --positive:#128265; --negative:#cf4141; --blue:#2867df; }
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--text); font-family:-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic',system-ui,sans-serif; font-size:14px; }
a { color:inherit; text-decoration:none; }
button,input,select { font:inherit; }
button,a,input,select { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
button:disabled { opacity:0.55; cursor:wait; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible { outline:2px solid var(--blue); outline-offset:3px; }
h1,h2,h3,p { margin:0; }
h1 { font-size:28px; font-weight:700; line-height:1.3; overflow-wrap:anywhere; }
h2 { font-size:18px; font-weight:650; }
.positive { color:var(--positive); }
.negative { color:var(--negative); }
.top-nav { display:flex; gap:6px; align-items:center; position:sticky; top:0; z-index:20; height:58px; padding:0 max(24px,calc((100vw - 1480px)/2)); background:rgba(245,246,248,0.96); border-bottom:1px solid var(--border); }
.top-nav-btn { display:flex; align-items:center; justify-content:center; padding:0 16px; height:36px; color:var(--muted); border-radius:6px; font-weight:600; }
.top-nav-btn.active { color:var(--text); background:#e6e9ee; }
.workspace { max-width:1480px; width:calc(100% - 48px); margin:auto; padding:28px 0 40px; }
.page-head { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:20px; }
.eyebrow { font-size:10px; color:var(--muted); margin-bottom:5px; font-weight:600; }
.page-actions,.import-actions,.live-controls { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.page-actions { justify-content:flex-end; }
.button,.icon-button,.range-btn,.holding-filter,.switch-button { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:36px; padding:0 12px; border:1px solid var(--border); border-radius:6px; background:white; color:var(--text); font-weight:500; flex-shrink:0; }
.button:hover,.icon-button:hover,.range-btn:hover,.holding-filter:hover { background:#f0f2f5; }
.button.primary { background:#20242c; border-color:#20242c; color:white; }
.button.primary:hover { background:#343b46; }
.icon-button { width:36px; padding:0; }
.back-link { display:inline-flex; align-items:center; gap:8px; min-height:36px; color:var(--muted); }
.data-context { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; color:var(--muted); font-size:12px; line-height:1.6; margin-bottom:14px; }
.import-status { flex-basis:100%; max-width:420px; font-size:12px; color:var(--muted); }
.notice { display:flex; align-items:center; flex-wrap:wrap; gap:10px; padding:12px 14px; margin-bottom:16px; background:#eef3f9; border-left:3px solid #7799c6; color:#3b4d65; font-size:13px; line-height:1.6; overflow-wrap:anywhere; }
.notice p { width:100%; }
.notice.warning { background:#fff5ea; border-color:#d69d56; color:#765725; }
.loading-state,.empty-state { display:flex; align-items:center; justify-content:center; gap:10px; min-height:180px; padding:28px; color:var(--muted); }
.metric-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:12px; }
.metric-card { padding:17px 18px; border:1px solid var(--border); background:white; border-radius:6px; min-height:118px; }
.metric-card span { display:block; color:var(--muted); font-size:12px; margin-bottom:10px; }
.metric-card strong { display:block; font-size:24px; font-weight:650; font-variant-numeric:tabular-nums; line-height:1.35; overflow-wrap:anywhere; }
.metric-card small { display:block; font-size:11px; color:var(--muted); margin-top:5px; }
.metric-card small.positive { color:var(--positive); }
.metric-card small.negative { color:var(--negative); }
.account-submetrics { display:flex; align-items:center; flex-wrap:wrap; gap:10px 24px; padding:7px 0 19px; font-size:12px; color:var(--muted); }
.account-submetrics b { margin-left:5px; color:var(--text); font-weight:500; }
.chart-shell,.detail-chart-card { background:#fff; border:1px solid var(--border); border-radius:6px; overflow:hidden; }
.chart-toolbar { display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:56px; padding:10px 12px; border-bottom:1px solid var(--border); flex-wrap:wrap; }
.legend-row,.range-row { display:flex; gap:5px; flex-wrap:wrap; }
.legend-button { display:flex; align-items:center; gap:6px; background:none; border:0; min-height:32px; color:var(--muted); font-size:12px; padding:0 7px; }
.legend-button i { width:13px; height:3px; border-radius:1px; }
.legend-button.muted { opacity:0.4; }
.range-btn { min-height:32px; padding:0 10px; font-size:12px; }
.range-btn.active,.holding-filter.active { background:#20242c; color:white; border-color:#20242c; }
.portfolio-chart { position:relative; width:100%; height:620px; }
.chart-hover-tooltip { position:absolute; z-index:10; width:230px; padding:12px; background:rgba(255,255,255,0.97); border:1px solid var(--border); border-radius:6px; box-shadow:0 6px 20px rgba(0,0,0,0.1); pointer-events:none; font-size:11px; }
.chart-hover-tooltip div { display:flex; justify-content:space-between; gap:8px; line-height:1.9; }
.chart-hover-tooltip span { color:var(--muted); }
.chart-hover-tooltip b { font-weight:550; text-align:right; }
.chart-hover-tooltip .tooltip-date { font-weight:650; margin-bottom:5px; }
.tooltip-divider { border-top:1px solid var(--border); padding-top:5px; margin-top:5px; }
.chart-caption { display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; border-top:1px solid var(--border); padding:9px 14px; font-size:11px; color:var(--muted); }
.mobile-inspector { display:none; }
.investment-summary { display:flex; gap:24px; text-align:right; flex-wrap:wrap; }
.investment-summary span { display:block; color:var(--muted); font-size:12px; margin-bottom:6px; }
.investment-summary strong { font-size:18px; font-weight:650; font-variant-numeric:tabular-nums; }
.holdings-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; flex-wrap:wrap; }
.segmented-tabs { display:flex; gap:6px; }
.live-controls .data-context { margin:0; }
.switch-button { background:transparent; border-color:transparent; }
.switch-track { display:block; position:relative; width:34px; height:20px; border-radius:12px; background:#c3c9d1; }
.switch-thumb { position:absolute; top:3px; left:3px; width:14px; height:14px; border-radius:50%; background:white; transition:transform 150ms; }
.switch-button.active .switch-track { background:var(--positive); }
.switch-button.active .switch-thumb { transform:translateX(14px); }
.switch-button.loading .switch-track { background:var(--blue); }
.list-controls { display:flex; align-items:center; gap:14px; padding-bottom:12px; }
.search-field { display:flex; align-items:center; gap:8px; width:300px; color:var(--muted); background:white; padding:0 12px; border:1px solid var(--border); border-radius:6px; }
.search-field input { min-width:0; width:100%; height:38px; border:0; background:none; color:var(--text); }
.sort-field { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); }
.sort-field select { color:var(--text); height:36px; padding:0 28px 0 9px; background:white; border:1px solid var(--border); border-radius:6px; }
.result-count { margin-left:auto; color:var(--muted); font-size:12px; white-space:nowrap; }
.holding-list { border-top:1px solid var(--border); background:white; }
.holdings-header { display:grid; grid-template-columns:minmax(260px,1.6fr) minmax(170px,1fr) 90px minmax(200px,1fr) 16px; gap:18px; padding:12px 18px; border-bottom:1px solid var(--border); color:var(--muted); font-size:11px; background:#f8f9fb; }
.holdings-header span:last-child { text-align:right; }
.holding-row { display:grid; grid-template-columns:minmax(260px,1.6fr) minmax(170px,1fr) 90px minmax(200px,1fr) 16px; gap:18px; padding:18px; align-items:center; border-bottom:1px solid var(--border); min-height:105px; }
.holding-row:hover { background:#fafbfc; }
.holding-identity { display:flex; align-items:center; gap:12px; min-width:0; }
.holding-icon { display:grid; place-items:center; width:36px; height:36px; flex-shrink:0; border:1px solid var(--border); border-radius:50%; color:#516173; background:#f7f9fc; font-size:15px; }
.holding-main { min-width:0; }
.holding-main h3 { font-size:15px; font-weight:600; line-height:1.4; overflow-wrap:anywhere; margin-bottom:4px; }
.holding-main p,.holding-main small { color:var(--muted); font-size:11px; line-height:1.6; }
.holding-main small { display:block; }
.holding-prices { display:flex; flex-direction:column; gap:5px; font-variant-numeric:tabular-nums; }
.holding-prices span { font-size:11px; color:var(--muted); }
.holding-prices strong { font-size:14px; font-weight:500; }
.holding-prices small { font-size:11px; }
.holding-weight { font-size:12px; color:var(--muted); }
.weight-track { height:3px; width:64px; background:#edf0f4; margin-top:8px; }
.weight-track i { display:block; height:100%; background:#7897c5; }
.holding-value { text-align:right; font-variant-numeric:tabular-nums; min-width:0; }
.holding-value strong { display:block; font-size:18px; font-weight:650; margin-bottom:5px; overflow-wrap:anywhere; }
.holding-value span { display:block; font-size:12px; }
.holding-value small { display:block; font-size:11px; color:var(--muted); margin-top:5px; }
.row-chevron { color:#9aa2ad; }
.detail-topbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.detail-topbar .data-context { margin:0; }
.detail-hero { display:flex; justify-content:space-between; gap:24px; margin-bottom:16px; }
.detail-hero .data-context { margin-top:8px; }
.detail-price-box { text-align:right; }
.detail-price-box span,.detail-price-box em { display:block; font-size:12px; color:var(--muted); font-style:normal; }
.detail-price-box strong { display:block; font-size:28px; margin:7px 0; font-weight:650; }
.detail-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(290px,360px); gap:20px; align-items:start; }
.detail-chart { position:relative; height:470px; }
.detail-chart-readout { display:flex; align-items:center; gap:12px; font-size:12px; color:var(--muted); min-height:32px; }
.detail-chart-readout strong { min-width:95px; color:var(--text); font-weight:600; }
.detail-tx-card { border-top:1px solid var(--border); padding:14px 0; }
.detail-tx-card h2 { display:flex; gap:8px; align-items:center; margin-bottom:12px; }
.detail-tx-card h2 small { font-size:12px; color:var(--muted); font-weight:400; }
.tx-row { display:grid; grid-template-columns:28px minmax(0,1fr) auto; gap:10px; padding:13px 0; align-items:center; border-bottom:1px solid var(--border); }
.tx-badge { display:grid; place-items:center; width:24px; height:24px; background:#edf2f7; color:#52715e; border-radius:50%; font-size:12px; }
.tx-badge.buy { background:#fff0ef; color:var(--negative); }
.tx-badge.sell { background:#edf3ff; color:var(--blue); }
.tx-copy strong,.tx-copy span,.tx-money small { display:block; }
.tx-copy strong { font-size:12px; font-weight:550; margin-bottom:4px; }
.tx-copy span,.tx-money small { color:var(--muted); font-size:11px; }
.tx-money { text-align:right; font-size:12px; font-variant-numeric:tabular-nums; }
.tx-money small { margin-top:5px; }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }
.import-dialog { width:min(520px,calc(100vw - 28px)); padding:22px; border:1px solid var(--border); border-radius:8px; color:var(--text); }
.import-dialog::backdrop { background:rgba(25,31,40,0.4); }
.dialog-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.filename { color:var(--muted); font-size:12px; margin:12px 0 20px; overflow-wrap:anywhere; }
.import-counts { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:0 0 16px; }
.import-counts dt { font-size:12px; color:var(--muted); margin-bottom:7px; }
.import-counts dd { font-size:24px; margin:0; font-weight:600; }
.dialog-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:20px; }
.spin { animation:spin 1s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.login-page { min-height:calc(100vh - 64px); display:grid; place-items:center; padding:24px; }
.login-page form { width:min(360px,100%); padding:28px; border:1px solid var(--border); border-radius:8px; background:#fff; box-shadow:0 12px 30px rgba(21,31,48,0.08); }
.login-page h1 { margin:0 0 10px; font-size:24px; }
.login-page p { margin:0 0 22px; color:var(--muted); font-size:14px; line-height:1.5; }
.login-page button { width:100%; min-height:44px; border:0; border-radius:6px; background:#151d2c; color:#fff; font:inherit; font-weight:600; cursor:pointer; }
@media(max-width:1100px) {
  .holdings-header,.holding-row { grid-template-columns:minmax(210px,1.5fr) minmax(140px,1fr) 65px minmax(170px,1fr) 16px; gap:12px; }
  .investment-summary { gap:16px; }
  .investment-summary strong { font-size:16px; }
  .metric-card strong { font-size:21px; }
}
@media(max-width:860px) {
  body { padding-bottom:calc(70px + env(safe-area-inset-bottom)); }
  .top-nav { position:fixed; top:auto; bottom:0; left:0; right:0; height:calc(60px + env(safe-area-inset-bottom)); padding:8px 14px calc(8px + env(safe-area-inset-bottom)); background:rgba(255,255,255,0.97); border-top:1px solid var(--border); border-bottom:0; }
  .top-nav-btn { flex:1; height:42px; }
  .workspace { width:calc(100% - 28px); padding:22px 0 26px; }
  h1 { font-size:25px; }
  .page-head { flex-direction:column; align-items:flex-start; gap:16px; }
  .page-actions { justify-content:flex-start; }
  .button,.icon-button { min-height:42px; }
  .icon-button { width:42px; }
  .metric-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .metric-card { padding:13px; min-height:111px; }
  .metric-card strong { font-size:20px; }
  .account-submetrics { gap:8px 16px; font-size:11px; }
  .chart-toolbar { align-items:flex-start; gap:8px; }
  .legend-row { gap:0; width:100%; }
  .legend-button { font-size:11px; min-height:38px; padding:0 6px; }
  .range-btn { min-height:38px; }
  .portfolio-chart { height:460px; }
  .chart-hover-tooltip { display:none; }
  .mobile-inspector { display:flex; flex-wrap:wrap; gap:4px 14px; align-content:center; min-height:94px; padding:9px 12px; font-size:11px; color:var(--muted); background:#fafbfc; border-bottom:1px solid var(--border); }
  .mobile-inspector b { width:100%; color:var(--text); font-weight:600; }
  .investment-summary { text-align:left; gap:14px 20px; }
  .investment-summary strong { font-size:15px; }
  .holdings-toolbar { gap:12px; margin-bottom:14px; }
  .holding-filter,.switch-button { min-height:42px; }
  .list-controls { gap:8px; flex-wrap:wrap; }
  .search-field { width:100%; }
  .sort-field select { min-height:40px; }
  .holding-list { background:transparent; }
  .holdings-header { display:none; }
  .holding-row { grid-template-columns:minmax(0,1fr) minmax(115px,auto); gap:12px 8px; padding:17px 2px; min-height:140px; }
  .holding-identity { grid-column:1; grid-row:1; gap:8px; }
  .holding-icon { width:30px; height:30px; }
  .holding-main h3 { font-size:14px; }
  .holding-main small { font-size:10px; }
  .holding-value { grid-column:2; grid-row:1; }
  .holding-value strong { font-size:16px; }
  .holding-value span { font-size:11px; }
  .holding-prices { grid-column:1; grid-row:2; padding-left:38px; gap:3px; }
  .holding-weight { grid-column:2; grid-row:2; text-align:right; font-size:11px; }
  .weight-track { margin-left:auto; }
  .row-chevron { display:none; }
  .detail-hero { flex-direction:column; gap:10px; }
  .detail-price-box { text-align:left; }
  .detail-layout { grid-template-columns:1fr; gap:22px; }
  .detail-chart { height:360px; }
  .detail-chart-card .chart-toolbar { flex-direction:column; }
  .detail-tx-card { padding:14px 2px; }
}
@media(max-width:380px) {
  .workspace { width:calc(100% - 20px); }
  .metric-card { padding:11px; }
  .metric-card strong { font-size:18px; }
  .holding-row { grid-template-columns:minmax(0,1fr) 112px; }
  .holding-value strong { font-size:15px; }
}
@media(prefers-reduced-motion:reduce) { .spin { animation:none; } .switch-thumb { transition:none; } }