:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --bg: #f4f7fb; --surface: #ffffff; --surface-2: #f8fafc; --text: #172033; --muted: #667085;
  --border: #dce3ec; --accent: #3157d5; --accent-soft: #e9efff; --success: #16805c; --danger: #c53b4c;
  --warning-bg: #fff8e7; --warning-border: #edcf80; --shadow: 0 10px 30px rgb(28 42 70 / 7%);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0d1320; --surface: #151d2c; --surface-2: #1a2435; --text: #edf2fa; --muted: #9ca9bc;
  --border: #2d3a4f; --accent: #8ca5ff; --accent-soft: #202e59; --success: #55c69b; --danger: #ff8793;
  --warning-bg: #352d17; --warning-border: #67582d; --shadow: 0 12px 35px rgb(0 0 0 / 25%);
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] {
    color-scheme: dark;
    --bg: #0d1320; --surface: #151d2c; --surface-2: #1a2435; --text: #edf2fa; --muted: #9ca9bc;
    --border: #2d3a4f; --accent: #8ca5ff; --accent-soft: #202e59; --success: #55c69b; --danger: #ff8793;
    --warning-bg: #352d17; --warning-border: #67582d; --shadow: 0 12px 35px rgb(0 0 0 / 25%);
  }
}

* { box-sizing: border-box; }
html { max-width: 100%; background: var(--bg); color: var(--text); scroll-behavior: smooth; overflow-x: clip; }
body { width: 100%; max-width: 100%; margin: 0; background: var(--bg); min-height: 100vh; overflow-x: clip; }
button, input, select { font: inherit; }
button, a, input, select, summary { outline-offset: 3px; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent); }
[hidden] { display: none !important; }

.topbar { height: 68px; padding: .75rem 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: color-mix(in srgb, var(--surface) 92%, transparent); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 20; backdrop-filter: blur(12px); }
.brand { display: flex; align-items: center; gap: .7rem; color: var(--text); text-decoration: none; }
.brand span { display: grid; line-height: 1.1; }.brand small { margin-top: .25rem; color: var(--muted); font-size: .72rem; }
.topbar-actions { display: flex; align-items: center; gap: .65rem; }.theme-control { display: flex; align-items: center; gap: .4rem; font-weight: 600; font-size: .8rem; }.theme-control select { min-height: 2.2rem; }
.status { padding: .35rem .65rem; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); font-size: .8rem; white-space: nowrap; }.status.online { color: var(--success); border-color: color-mix(in srgb, var(--success) 45%, var(--border)); }

.app-shell { display: grid; grid-template-columns: 190px minmax(0, 1fr); width: min(1500px, 100%); margin: auto; }
.sidebar { min-height: calc(100vh - 68px); padding: 1.25rem .8rem; border-right: 1px solid var(--border); position: sticky; top: 68px; align-self: start; display: grid; align-content: start; gap: .25rem; }
.sidebar a { color: var(--muted); text-decoration: none; padding: .65rem .75rem; border-radius: .55rem; font-weight: 650; font-size: .9rem; }.sidebar a:hover { background: var(--surface-2); color: var(--text); }.sidebar a.active { color: var(--accent); background: var(--accent-soft); }
main { min-width: 0; padding: 1.6rem; }.view { max-width: 1240px; margin: 0 auto; }.view-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1.25rem; }.view-heading h1 { margin: 0; font-size: clamp(1.7rem, 3vw, 2.25rem); }.view-heading p:not(.eyebrow) { color: var(--muted); margin: .35rem 0 0; }.eyebrow { color: var(--accent); text-transform: uppercase; letter-spacing: .09em; font-size: .72rem; font-weight: 800; margin: 0 0 .3rem; }
h2 { font-size: 1rem; margin: 0; } h3, h4 { margin-top: 1.2rem; } p { line-height: 1.5; }

.panel, .metric { min-width: 0; background: var(--surface); border: 1px solid var(--border); border-radius: .8rem; box-shadow: var(--shadow); }.panel { padding: 1rem; margin-bottom: 1rem; }.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .8rem; }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9rem; margin-bottom: 1rem; }.metric { padding: 1rem; display: grid; gap: .25rem; }.metric span { color: var(--muted); font-size: .78rem; font-weight: 700; }.metric strong { font-size: 1.65rem; }.metric small { color: var(--muted); }.compact-metrics { grid-template-columns: repeat(2, minmax(0, 260px)); }
.dashboard-value-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }.portfolio-value { padding: 1.25rem; }.portfolio-value strong { font-size: clamp(1.8rem, 4vw, 2.5rem); }.portfolio-value.positive strong, .portfolio-value.positive small { color: var(--success); }.portfolio-value.negative strong, .portfolio-value.negative small { color: var(--danger); }
.two-column { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }.compact-list { display: grid; gap: .2rem; }.compact-item { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .65rem 0; border-bottom: 1px solid var(--border); }.compact-item:last-child { border: 0; }.compact-item span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.compact-item small { color: var(--muted); white-space: nowrap; }

.form-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; align-items: end; margin-top: 1rem; }.trade-form, .composition-form { grid-template-columns: repeat(3, minmax(0, 1fr)); }.wide { grid-column: span 2; }
label { display: grid; gap: .32rem; font-size: .8rem; font-weight: 700; color: var(--muted); } input, select { width: 100%; min-height: 2.55rem; border: 1px solid var(--border); border-radius: .5rem; background: var(--surface-2); color: var(--text); padding: .5rem .65rem; } input:hover, select:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
button { min-height: 2.55rem; border: 1px solid var(--accent); border-radius: .5rem; padding: .5rem .85rem; background: var(--accent); color: #fff; font-weight: 750; cursor: pointer; } :root[data-theme="dark"] button { color: #0d1320; } button:disabled { opacity: .45; cursor: not-allowed; }.secondary { color: var(--accent) !important; background: var(--surface); }.compact { min-height: 2.2rem; padding: .35rem .65rem; font-size: .8rem; }.text-button, .link-button { width: auto; min-height: auto; border: 0; padding: .2rem; background: transparent; color: var(--accent) !important; }.action-panel summary { cursor: pointer; color: var(--accent); font-weight: 750; }.action-panel[open] summary { margin-bottom: .4rem; }.field-hint { color: var(--muted); }.toggle { display: flex; align-items: center; gap: .4rem; }.toggle input { width: auto; min-height: auto; }.inline-field { display: flex; align-items: center; gap: .45rem; }.inline-field select { width: auto; min-height: 2rem; }.filter-row { display: flex; justify-content: flex-end; margin-bottom: .7rem; }.filter-row label { width: min(320px, 100%); }

.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: .65rem; background: var(--surface); } table { width: 100%; border-collapse: collapse; white-space: nowrap; font-size: .86rem; } th, td { padding: .68rem .65rem; border-bottom: 1px solid var(--border); text-align: left; } tbody tr:last-child td { border-bottom: 0; } th { background: var(--surface-2); color: var(--muted); font-size: .72rem; letter-spacing: .025em; text-transform: uppercase; } tbody tr:hover { background: color-mix(in srgb, var(--accent-soft) 40%, transparent); }.empty { color: var(--muted); font-style: italic; }.positive { color: var(--success); }.negative { color: var(--danger); }
.message { max-width: 1240px; margin: 0 auto 1rem; padding: .75rem 1rem; border-radius: .6rem; background: var(--warning-bg); border: 1px solid var(--warning-border); }.message.error { color: var(--danger); border-color: var(--danger); }.message.info { display: flex; justify-content: space-between; align-items: center; }

.exposure-form { grid-template-columns: repeat(3, minmax(160px, 1fr)); }.market-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }.exposure-weights { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; }.weight-total { display: grid; gap: .2rem; align-self: center; }.weight-total span { color: var(--muted); font-size: .8rem; font-weight: 700; }.weight-total strong { font-size: 1.35rem; }.weight-total.invalid { color: var(--danger); }.progress { height: .45rem; background: var(--surface-2); border-radius: 999px; overflow: hidden; margin-top: .45rem; }.progress i { display: block; height: 100%; background: var(--success); width: 0; transition: width .25s; }
.bar-chart { display: grid; gap: .65rem; margin-top: 1rem; }.bar-row { display: grid; grid-template-columns: minmax(90px, 150px) 1fr auto; gap: .6rem; align-items: center; font-size: .78rem; }.bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.bar-track { height: .65rem; border-radius: 999px; background: var(--surface-2); overflow: hidden; }.bar-fill { height: 100%; border-radius: inherit; background: var(--accent); min-width: 2px; }.bar-fill.unknown { background: var(--muted); }.bar-fill.negative { background: var(--danger); }.holding-chart { margin-bottom: 1rem; }.composition-layout { display: grid; grid-template-columns: minmax(340px, .7fr) minmax(0, 1.3fr); gap: 1rem; }.metadata-grid { display: flex; flex-wrap: wrap; gap: .45rem; margin: .8rem 0; }.metadata-grid span, .badge { padding: .28rem .5rem; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); font-size: .75rem; }.import-report { margin-top: .8rem; padding: .75rem; border-radius: .5rem; background: var(--surface-2); }.import-errors { color: var(--danger); margin-bottom: 0; padding-left: 1.2rem; }
.country-group-controls { display: flex; flex-wrap: wrap; gap: .45rem 1rem; margin-top: .75rem; }.country-group-controls .toggle { color: var(--text); font-size: .75rem; }.country-group-controls .toggle:has(input:disabled) { color: var(--muted); }.country-group-controls input { accent-color: var(--accent); }

.svg-chart { display: block; width: 100%; min-height: 240px; color: var(--text); overflow: visible; }.svg-chart.tall { min-height: 360px; }.svg-grid { stroke: var(--border); stroke-width: 1; }.svg-axis { fill: var(--muted); font-size: 11px; }.svg-line { fill: none; stroke: var(--accent); stroke-width: 3; }.svg-area { fill: color-mix(in srgb, var(--accent) 18%, transparent); }.svg-point { fill: var(--surface); stroke: var(--accent); stroke-width: 2; }
.diverging-chart { display: grid; gap: .55rem; margin: 1rem 0; }.diverging-row { display: grid; grid-template-columns: minmax(90px, 145px) 1fr 64px; gap: .55rem; align-items: center; font-size: .78rem; }.diverging-track { position: relative; display: grid; grid-template-columns: 1fr 1fr; height: .72rem; background: linear-gradient(90deg, var(--surface-2) 49.7%, var(--border) 49.7%, var(--border) 50.3%, var(--surface-2) 50.3%); border-radius: 999px; overflow: hidden; }.diverging-negative { justify-self: end; align-self: stretch; background: var(--danger); border-radius: 999px 0 0 999px; }.diverging-positive { justify-self: start; align-self: stretch; background: var(--success); border-radius: 0 999px 999px 0; }
.treemap { display: flex; flex-wrap: wrap; align-content: stretch; gap: 3px; min-height: 300px; margin-top: 1rem; }.treemap-item { min-width: 80px; min-height: 58px; flex-basis: calc(var(--share) * 1%); flex-grow: var(--share); display: grid; place-content: center; text-align: center; padding: .45rem; border-radius: .35rem; background: color-mix(in srgb, var(--accent) calc(28% + var(--rank) * 4%), var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); overflow: hidden; }.treemap-item strong, .treemap-item small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.treemap-item small { color: var(--muted); }
.pie-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }.dashboard-exposure { margin-bottom: 1rem; }.dashboard-pie-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }.dashboard-pie-grid .panel { margin-bottom: 0; }.pie-limit { min-width: 84px; }.pie-chart { display: grid; grid-template-columns: minmax(150px, 210px) 1fr; align-items: center; gap: .8rem; min-height: 240px; }.pie-chart svg { width: 100%; overflow: visible; }.pie-slice { transition: opacity .15s; }.pie-slice:hover, .pie-slice:focus { opacity: .78; outline: none; }.pie-slice.interactive { cursor: pointer; }.pie-center-value { fill: var(--text); font-size: 17px; font-weight: 800; }.pie-center-label { fill: var(--muted); font-size: 9px; text-transform: uppercase; }.pie-legend { display: grid; gap: .38rem; min-width: 0; max-height: 290px; overflow-y: auto; padding-right: .2rem; }.pie-legend-row { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: .4rem; font: inherit; font-size: .7rem; color: var(--text); background: transparent; border: 0; padding: .12rem 0; text-align: left; width: 100%; }.pie-legend-row.interactive { cursor: pointer; color: var(--accent); }.pie-legend-row.interactive:hover, .pie-legend-row.interactive:focus-visible { text-decoration: underline; }.pie-legend-row i { width: 10px; height: 10px; border-radius: 3px; }.pie-legend-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.pie-navigation { grid-column: 1 / -1; display: flex; align-items: center; gap: .55rem; color: var(--muted); font-size: .72rem; }.pie-negative-note { grid-column: 1 / -1; margin: 0; color: var(--danger); font-size: .7rem; }
.heatmap-wrap { overflow-x: auto; margin-top: 1rem; }.heatmap { display: grid; gap: 2px; min-width: 680px; align-items: stretch; font-size: .68rem; }.heatmap-label { padding: .35rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }.heatmap-cell { min-width: 42px; min-height: 32px; border-radius: .2rem; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) calc(var(--intensity) * 1%), var(--surface-2)); color: var(--text); }.heatmap-cell.negative { background: color-mix(in srgb, var(--danger) calc(var(--intensity) * 1%), var(--surface-2)); }
.compact-quality { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 1rem; }.compact-quality .metric { box-shadow: none; }.compact-quality .metric strong { font-size: 1.15rem; }.inline-form { display: flex; align-items: center; gap: .5rem; }.inline-form select { min-width: 150px; }.calendar-heatmap { display: grid; grid-template-columns: repeat(12, 1fr); gap: .35rem; margin-top: 1rem; }.calendar-cell { min-height: 52px; border-radius: .35rem; display: grid; place-content: center; text-align: center; background: color-mix(in srgb, var(--accent) calc(var(--intensity) * 1%), var(--surface-2)); font-size: .72rem; }.calendar-cell strong { font-size: .9rem; }

@media (max-width: 1100px) { .pie-grid { grid-template-columns: 1fr; }.pie-chart { grid-template-columns: minmax(160px, 230px) 1fr; } }
@media (max-width: 950px) { .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.dashboard-value-grid { grid-template-columns: minmax(0, 1fr); }.composition-layout { grid-template-columns: minmax(0, 1fr); }.exposure-weights { grid-template-columns: repeat(2, minmax(0, 1fr)); }.compact-quality { grid-template-columns: repeat(3, minmax(0, 1fr)); }.inline-form { flex-wrap: wrap; } }
@media (max-width: 760px) {
  .topbar { padding: .55rem .7rem; }.brand small, .theme-control > :first-child:not(select) { display: none; }.status { display: none; }.topbar-actions { gap: .35rem; }.app-shell { display: block; }.sidebar { width: 100%; max-width: 100vw; min-height: auto; position: fixed; z-index: 30; top: auto; bottom: 0; left: 0; right: 0; background: var(--surface); border: 1px solid var(--border); padding: .35rem .35rem calc(.35rem + env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0; overflow-x: clip; }.sidebar a { min-width: 0; padding: .55rem .1rem; text-align: center; font-size: .62rem; border-radius: .35rem; overflow: hidden; text-overflow: ellipsis; }
  main { width: 100%; max-width: 100%; padding: 1rem .65rem calc(5rem + env(safe-area-inset-bottom)); }.view { min-width: 0; }.view-heading { align-items: center; }.metric-grid, .two-column, .compact-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }.form-grid, .trade-form, .composition-form, .exposure-form { grid-template-columns: minmax(0, 1fr); }.exposure-weights { grid-template-columns: minmax(0, 1fr); }.wide { grid-column: auto; }.panel { padding: .75rem; }.charts { grid-template-columns: minmax(0, 1fr); }.bar-row { grid-template-columns: 110px minmax(0, 1fr) auto; }
  .compact-quality { grid-template-columns: repeat(2, minmax(0, 1fr)); }.dashboard-pie-grid { grid-template-columns: minmax(0, 1fr); }.calendar-heatmap { grid-template-columns: repeat(6, minmax(0, 1fr)); }.diverging-row { grid-template-columns: 100px minmax(0, 1fr) 56px; }
  .pie-chart { grid-template-columns: minmax(0, 1fr); }.pie-chart svg { max-width: 220px; justify-self: center; }
}
@media (max-width: 480px) { .metric-grid, .two-column, .compact-metrics { grid-template-columns: minmax(0, 1fr); }.brand strong { font-size: .9rem; }.theme-control { font-size: 0; }.theme-control select { font-size: .78rem; }.sidebar a { font-size: .6rem; } }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }
.dashboard-asset-class { margin-bottom: 1rem; }
.compact-select { min-width: 145px; padding: .45rem; }