/* Shared semantic palette. The bootstrap resolves system preference before paint. */
:root {
  --bg: #f5f7fc;
  --surface: #ffffff;
  --surface-alt: #f0f3fa;
  --surface-glass: #ffffffed;
  --text: #18243b;
  --muted: #62718a;
  --border: #e2e7f1;
  --accent: #6252e8;
  --accent-deep: #5143ce;
  --accent-soft: #efedff;
  --on-accent: #fff;
  --positive: #087e68;
  --positive-soft: #e7f8f2;
  --negative: #c64161;
  --warning: #946414;
  --warning-soft: #fff7e6;
  --chart-stock: #7663f2;
  --chart-bond: #26c4a4;
  --chart-crypto: #f3b54e;
  --chart-cash: #b8c5dd;
  --shadow-color: #2335660a;
  --shadow: 0 4px 24px var(--shadow-color);
  --focus: #9384fb;
  --hero-muted: #e0ddff;
}
:root[data-theme="dark"] {
  --bg: #0b1020;
  --surface: #141c2e;
  --surface-alt: #1b263b;
  --surface-glass: #141c2ef0;
  --text: #edf2ff;
  --muted: #a4b2cc;
  --border: #29354d;
  --accent: #b0a2ff;
  --accent-deep: #7563ed;
  --accent-soft: #2c2750;
  --positive: #52dfb9;
  --positive-soft: #16392f;
  --negative: #ff8ca8;
  --warning: #f2c577;
  --warning-soft: #332c20;
  --chart-stock: #a18bff;
  --chart-bond: #36d4ae;
  --chart-crypto: #ffc267;
  --chart-cash: #647997;
  --shadow-color: #0000001f;
  --focus: #c2b6ff;
}
html { color: var(--text); background: var(--bg); }
body { background: radial-gradient(ellipse at 90% 0%, color-mix(in srgb, var(--accent) 5%, transparent), transparent 50%); }
::selection { color: var(--text); background: color-mix(in srgb, var(--accent) 26%, var(--surface)); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
button,input,select { -webkit-tap-highlight-color: transparent; }
.ui-icon { display: block; width: 20px; height: 20px; flex-shrink: 0; }
.btn .ui-icon { width: 16px; height: 16px; }
.icon-btn .ui-icon { width: 20px; height: 20px; }
.brand-dot { color: var(--accent); }
.brand img { border-radius: 11px; box-shadow: 0 5px 14px #6252e82b; }
.sidebar { background: var(--surface-glass); }
.workspace { border-radius: 14px; padding: 13px 10px; }
.workspace-icon { background: var(--accent-soft); color: var(--accent); border-radius: 9px; width: 33px; height: 33px; }
.workspace small { font-size: 10px; }
.lock-icon .ui-icon { width: 15px; height: 15px; }
.nav-item { border-radius: 11px; gap: 12px; transition: background .2s, color .2s, transform .2s; }
.nav-item>span:first-child { width: 20px; }
.nav-item:hover { color: var(--accent); background: var(--surface-alt); }
.nav-item.active { color: var(--accent); background: var(--accent-soft); }
.nav-count { color: var(--accent); background: var(--accent-soft); }
.nav-item.active .ui-icon { stroke-width: 2.2; }
.tiny-dot { background: var(--positive); box-shadow: 0 0 0 3px color-mix(in srgb, var(--positive) 10%, transparent); }
.topbar { background: var(--surface-glass); }
.top-actions { gap: 14px; }
.avatar { width: 34px; height: 34px; background: var(--accent-soft); color: var(--accent); border: 0; font-weight: 650; }
.icon-btn { width: 38px; height: 38px; border-radius: 11px; transition: background .2s, color .2s; }
.icon-btn:hover { background: var(--accent-soft); color: var(--accent); }
.theme-control { position: relative; display: flex; align-items: center; height: 38px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface); color: var(--muted); }
.theme-control>span { position: absolute; left: 11px; pointer-events: none; }
.theme-control .ui-icon { width: 17px; height: 17px; }
.theme-control select { border: 0; background: transparent; padding: 9px 9px 9px 36px; color: var(--text); font-size: 11px; border-radius: 11px; cursor: pointer; width: auto; }
.theme-control:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.theme-control select:focus { outline: none; }
select option { background: var(--surface); color: var(--text); }
.page-heading h1 { font-weight: 700; letter-spacing: -1.1px; }
.page-heading p { font-size: 13px; }
.eyebrow { color: var(--accent); font-weight: 650; }
.btn { border-radius: 10px; min-height: 38px; gap: 7px; font-size: 11px; transition: background .2s, border-color .2s, box-shadow .2s, transform .2s; }
.btn:hover { border-color: var(--accent); background: var(--accent-soft); }
.btn.primary { background: #6654e8; border-color: transparent; color: #fff; box-shadow: 0 4px 12px #6252e824; }
.btn.primary:hover { background: #7866f1; box-shadow: 0 6px 20px #6252e83d; }
.refresh-icon { display: inline-flex; }
.panel,.metric { border-radius: 18px; box-shadow: var(--shadow); }
.metric { min-height: 176px; transition: transform .2s, box-shadow .2s; }
.metric-label { color: var(--muted); margin-bottom: 21px; gap: 8px; }
.metric-symbol { display: grid; place-items: center; width: 30px; height: 30px; flex-shrink: 0; border-radius: 10px; background: var(--accent-soft); color: var(--accent)!important; }
.metric-symbol .ui-icon { width: 17px; height: 17px; }
.metric:nth-child(2) .metric-symbol { color: var(--positive)!important; background: var(--positive-soft); }
.metric:nth-child(3) .metric-symbol { color: var(--warning)!important; background: var(--warning-soft); }
.metric:nth-child(4) .metric-symbol { color: var(--accent)!important; background: var(--accent-soft); }
.metric strong { font-weight: 680; }
.metric-foot,.metric>small { color: var(--muted); }
.metric.total { color: #fff; background: linear-gradient(125deg,#5844d6 0%,#6c5ae4 54%,#3a79d0 100%); border-color: transparent; box-shadow: 0 8px 26px #6252e82b; }
.metric.total .metric-label,.metric.total .metric-foot { color: var(--hero-muted); }
.metric.total .metric-symbol { color: #fff!important; background: #ffffff20; }
.metric.total .positive { color: #a7ffe0; }
.metric.total .negative { color: #ffd8e4; }
.hero-lines,.hero-lines:before,.hero-lines:after { border-color: #ffffff26; }
.hero-lines { width: 230px; height: 230px; right: -65px; bottom: -150px; }
.heading-icon { display: inline-flex; vertical-align: -4px; color: var(--accent); margin-right: 9px; }
.heading-icon .ui-icon { width: 19px; height: 19px; }
.panel-head h2 { font-size: 17px; font-weight: 650; }
.panel-head p { font-size: 11px; line-height: 1.6; }
.panel-note,.panel-bottom-note { font-size: 10px; }
.soft-badge,.count-badge { color: var(--accent); background: var(--accent-soft); border-color: transparent; border-radius: 7px; }
.text-link,.history-table details summary { color: var(--accent); font-size: 11px; }
.chart-summary { font-weight: 650; }
.chart-summary>span:last-child:not(.private-value) { font-weight: 400; }
.chart-axis,.chart-month { font-size: 9px; }
.bar-stack { border-radius: 6px 6px 0 0; }
.bar-coupon { background: linear-gradient(0deg,#20ac8b,#43d6b2); }
.bar-dividend { background: var(--chart-crypto); }
.bar-area:hover .bar-coupon { background: #20bf99; }
.legend-square { width: 7px; height: 7px; border-radius: 2px; }
.legend-square.coupon { background: var(--chart-bond); }
.legend-square.dividend { background: var(--chart-crypto); }
.chart-legend { font-size: 10px; }
.unknown-bar { color: var(--muted); border-color: var(--muted); background: var(--surface-alt); }
.bar-tooltip,.statement-bar-value { background: var(--text); color: var(--bg); box-shadow: 0 6px 20px var(--shadow-color); }
.donut { box-shadow: 0 0 0 7px var(--surface-alt); }
.donut>div { background: var(--surface); }
.donut strong { font-weight: 700; }
.mini-symbol { display: none; }
.allocation-legend { font-size: 11px; }
.allocation-legend>div { font-size: 11px; }
.legend-dot { width: 8px; height: 8px; }
.segmented { padding: 4px; border-radius: 10px; border-color: transparent; }
.segmented button { border-radius: 7px; min-height: 29px; transition: background .2s, color .2s; }
.segmented button.selected { color: var(--accent); background: var(--surface); box-shadow: 0 2px 6px var(--shadow-color); }
table { font-size: 12px; }
thead { background: var(--surface-alt); }
th { font-size: 10px; padding-top: 13px; padding-bottom: 13px; }
td { color: var(--text); padding-top: 17px; padding-bottom: 17px; }
tbody tr { transition: background .18s; }
tbody tr:hover { background: color-mix(in srgb,var(--accent) 4%,var(--surface)); }
td b,.asset-name b { color: inherit; font-size: 12px; }
td small,.asset-name small,.unit { font-size: 9px; }
.asset-icon { width: 36px; height: 36px; }
.asset-icon.bond-icon { background: #363e53; }
.positive { color: var(--positive); }
.negative,.error,.auth-card .error { color: var(--negative); }
.quote-status.warn { color: var(--warning); }
.event-date { border-radius: 11px; color: var(--accent); border-color: transparent; background: var(--accent-soft); }
.event-date span { color: var(--accent); }
.event-main b { font-size: 12px; }
.event-main>span,.event-main small { font-size: 10px; }
.event-amount b { font-size: 13px; }
.event-amount .source-link { font-size: 9px; }
.insight-panel { background: linear-gradient(135deg,var(--accent-soft),var(--surface)); border-color: color-mix(in srgb,var(--accent) 17%,var(--border)); }
.insight-icon { color: var(--accent); }
.insight-icon .ui-icon { width: 38px; height: 38px; }
.insight-panel p { font-size: 12px; }
.search-box { border-radius: 9px; }
.search-box .ui-icon { width: 16px; height: 16px; }
.search-box input { font-size: 11px; color: var(--text); }
.bond-details .soft-badge { white-space: normal; }
.bond-details dd { font-size: 11px; }
.issuer-grid a { border-radius: 12px; transition: border-color .2s, background .2s; }
.issuer-grid a:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.dividend-info { background: var(--surface-alt); color: var(--muted); border-radius: 12px; }
.coin-illustration>span { background: var(--warning-soft); color: var(--warning); border-color: color-mix(in srgb,var(--warning) 30%,transparent); box-shadow: 0 8px 0 color-mix(in srgb,var(--warning) 25%,var(--surface)); }
.coin-illustration i { background: var(--accent-soft); color: var(--accent); border-color: color-mix(in srgb,var(--accent) 25%,transparent); }
.empty p { font-size: 12px; }
.settings-card h2 { font-size: 21px; }
.source-list>div { font-size: 12px; }
.source-list small { font-size: 11px; }
.status-pill { color: var(--positive); background: var(--positive-soft); border-radius: 6px; }
.status-pill.amber { color: var(--warning); background: var(--warning-soft); }
.notice,.statement-warning { color: var(--warning); background: var(--warning-soft); border-color: color-mix(in srgb,var(--warning) 20%,transparent); border-radius: 12px; }
.loading-panel { border-radius: 18px; }
.spinner { border-color: var(--accent-soft); border-top-color: var(--accent); }
dialog { border-radius: 20px; box-shadow: 0 24px 100px #00000040; background: var(--surface); color: var(--text); }
dialog::backdrop { background: #080e2370; backdrop-filter: blur(8px); }
input,select { border-radius: 9px; background: var(--surface-alt); color: var(--text); }
input::placeholder { color: var(--muted); opacity: .8; }
input:focus,select:focus { outline-color: var(--focus); }
form label { color: var(--muted); }
.toast { background: var(--text); color: var(--bg); border: 0; border-radius: 12px; }
.auth-screen { background: var(--bg); }
.auth-art { background: linear-gradient(145deg,#4637b4,#6657e1,#277b92); }
.art-ring { border-color: #ffffff30; }
.art-caption { color: #e9e6ff; }
.statement-highlight { background: linear-gradient(110deg,var(--positive-soft),var(--surface) 70%); border-color: color-mix(in srgb,var(--positive) 18%,var(--border)); }
.statement-highlight h2 { color: var(--positive); font-weight: 700; }
.statement-highlight p,.statement-highlight .muted { font-size: 11px; }
.statement-highlight .soft-badge { background: var(--positive-soft); color: var(--positive); }
.statement-metrics .metric { min-height: 164px; }
.statement-bar-track i { background: linear-gradient(0deg,#6654e8,#a18bff); border-radius: 6px 6px 0 0; }
.statement-filters input,.statement-filters select,.statement-chart-mode select { background: var(--surface-alt); color: var(--text); border-radius: 9px; min-height: 36px; }
.sheet-coverage>div { border-radius: 12px; }
.sheet-coverage b { color: var(--accent); }
.sheet-coverage span { font-size: 11px; }
.theme-choices { display: grid; grid-template-columns: repeat(3,1fr); gap: 15px; padding: 22px 24px 24px; }
.theme-choice { text-align: left; border: 1px solid var(--border); background: var(--surface); border-radius: 14px; padding: 12px; transition: border-color .2s, background .2s, transform .2s; }
.theme-choice[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); background: var(--accent-soft); }
.theme-choice-title { display: flex; align-items: center; gap: 7px; margin-top: 13px; font-size: 12px; font-weight: 650; }
.theme-choice-title .ui-icon { width: 17px; height: 17px; color: var(--accent); }
.theme-choice small { display: block; color: var(--muted); font-size: 10px; margin: 6px 0 1px 24px; }
.theme-preview { display: flex; align-items: center; gap: 6px; height: 68px; padding: 12px 14px 12px 28px; position: relative; border-radius: 8px; border: 1px solid #cbd4e4; background: #edf1fa; overflow: hidden; }
.theme-preview:before { content: ''; position: absolute; inset: 0 auto 0 0; width: 16px; background: #fff; border-right: 1px solid #dce2ed; }
.theme-preview i { height: 27px; flex: 1; background: #fff; border-radius: 5px; }
.theme-preview i:first-child { background: #7864ec; }
.theme-preview i:last-child { background: #35c9a9; }
.preview-dark { background: #0c1224; border-color: #344059; }
.preview-dark:before { background: #1c273d; border-color: #344059; }
.preview-dark i { background: #28334d; }
.preview-system { background: linear-gradient(90deg,#edf1fa 50%,#0c1224 50%); }
.preview-system i:nth-child(2) { background: linear-gradient(90deg,#fff 50%,#28334d 50%); }
@media (hover:hover) {
  .metric:hover { transform: translateY(-3px); box-shadow: 0 9px 28px var(--shadow-color); }
  .btn:hover,.theme-choice:hover { transform: translateY(-1px); }
  .btn:active { transform: translateY(1px); }
  .theme-choice:hover { border-color: var(--accent); }
}
/* Run entry motion only on navigation, never on quote refreshes or filtering. */
@keyframes enter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes grow { from { transform: scaleY(.08); opacity: .3; } to { transform: scaleY(1); opacity: 1; } }
@keyframes dialog-enter { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.view-enter>.panel,.view-enter>.metrics>.metric,.view-enter>.chart-grid,.view-enter>.bottom-grid,.view-enter>.calendar-toolbar,.view-enter>.calendar-detail-grid,.view-enter>.settings-grid { animation: enter .42s both; }
.view-enter>.metrics>.metric:nth-child(2),.view-enter>:nth-child(2) { animation-delay: .05s; }
.view-enter>.metrics>.metric:nth-child(3),.view-enter>:nth-child(3) { animation-delay: .1s; }
.view-enter>.metrics>.metric:nth-child(4),.view-enter>:nth-child(4) { animation-delay: .15s; }
.bar-stack,.statement-bar-track i { transform-origin: bottom; }
dialog[open] { animation: dialog-enter .2s both; }
.toast:not([hidden]) { animation: enter .2s; }
@media(max-width:1250px) {
  .metric { padding: 18px 15px; }
  .metric.total strong { font-size: 25px; }
  .metric strong { font-size: 23px; }
}
@media(max-width:1000px) {
  .nav-item { gap: 0; }
  .metric { min-height: 162px; }
  .metric strong,.metric.total strong { font-size: 28px; }
  .top-actions { gap: 10px; }
}
@media(max-width:760px) {
  .panel-head h2 { font-size: 16px; }
  .panel-head p { font-size: 10px; }
  .heading-icon { margin-right: 6px; vertical-align: -3px; }
  .heading-icon .ui-icon { width: 17px; height: 17px; }
  .metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .metric strong,.metric.total strong { font-size: 25px; }
  .metric-label { font-size: 10px; }
  .theme-choices { padding: 20px 18px; gap: 10px; }
  .theme-choice { padding: 9px; }
  .theme-choice small { margin-left: 0; }
  .theme-preview { height: 58px; padding: 10px 8px 10px 22px; gap: 4px; }
  .theme-preview:before { width: 12px; }
  .theme-choice-title { font-size: 11px; }
  .theme-choice-title .ui-icon { width: 15px; height: 15px; }
  .event-main b { font-size: 11px; }
  .event-main>span,.event-main small { font-size: 9px; }
  .event-amount b { font-size: 11px; }
  .insight-panel { display: none; }
  .statement-metrics .metric strong { font-size: 23px; }
}
@media(max-width:480px) {
  .sidebar { background: var(--surface-glass); padding-bottom: max(4px,env(safe-area-inset-bottom)); height: calc(66px + env(safe-area-inset-bottom)); }
  .sidebar nav>a { border-radius: 10px; }
  .sidebar nav>a>span:first-child { display: flex; justify-content: center; }
  .sidebar .ui-icon { width: 21px; height: 21px; }
  .topbar { height: 58px; }
  .top-actions { gap: 6px; }
  .top-actions .avatar { display: none; }
  .theme-control { width: 40px; height: 40px; border-color: transparent; background: var(--surface-alt); }
  .theme-control select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; padding: 0; }
  .theme-control>span { left: 11px; }
  .icon-btn { width: 40px; height: 40px; }
  .content { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
  .page-heading h1 { font-size: 28px; }
  .page-heading p { font-size: 12px; }
  .heading-actions .btn { min-height: 40px; }
  .metric { border-radius: 15px; padding: 14px 13px; min-height: 151px; }
  .metric-label { font-size: 10px; gap: 5px; margin-bottom: 18px; }
  .metric-symbol { width: 26px; height: 26px; border-radius: 8px; }
  .metric-symbol .ui-icon { width: 15px; height: 15px; }
  .metric strong,.metric.total strong,.metric strong.date-value { font-size: 22px; }
  .metric-foot { font-size: 9px; flex-wrap: wrap; }
  .metric>small { font-size: 9px; }
  .panel { border-radius: 15px; }
  .panel-head { padding: 18px 15px 0; }
  .panel-head h2 { font-size: 15px; }
  .panel-note,.panel-bottom-note { font-size: 9px; }
  .chart-axis,.chart-month { font-size: 8px; }
  .chart-legend { font-size: 9px; }
  .chart-summary { font-size: 25px; }
  .chart-summary>span:last-child:not(.private-value) { font-size: 9px; }
  .statement-metrics .metric { min-height: 154px; }
  .statement-metrics .metric strong { font-size: 21px; }
  .theme-choices { padding: 18px 15px; gap: 8px; }
  .theme-choice-title { font-size: 10px; gap: 4px; }
  .theme-choice-title .ui-icon { width: 13px; height: 13px; }
  .theme-choice small { font-size: 9px; }
  .theme-preview { height: 53px; }
  .bond-details dd { font-size: 10px; }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation: none!important; transition: none!important; scroll-behavior: auto!important; }
  .metric:hover,.btn:hover,.theme-choice:hover { transform: none; }
}