/* Scoped component styling. All colors resolve through DividenNote tokens. */
.dn-page .dn-app, .dn-page dialog {
  --surface: var(--dn-color-surface); --surface-2: var(--dn-color-subtle);
  --text: var(--dn-color-text); --text-2: var(--dn-color-muted); --border: var(--dn-color-border);
  --brand: var(--dn-color-accent); --bg: var(--dn-color-canvas);
  --dn-positive: var(--dn-color-positive); --dn-negative: var(--dn-color-negative);
  --dn-profit-bg: var(--dn-color-accent-soft); --dn-loss-bg: var(--dn-color-negative-soft);
  --dn-chart: var(--dn-chart-received); --dn-blue: var(--dn-color-info);
  --dn-gold: var(--dn-color-warning); --dn-hk: var(--dn-color-negative);
  --dn-sg: var(--dn-color-accent); --dn-cn: var(--dn-color-purple);
  color: var(--dn-color-text);
  font-variant-numeric: tabular-nums lining-nums;
}
.dn-page .dn-app { max-width:1240px; padding-bottom:var(--dn-space-10); }
.dn-page .tool-hero { position:relative; padding:var(--dn-space-8) 0 var(--dn-space-5); }
.dn-page .tool-hero h1 { font-size:clamp(2rem,4vw,2.8rem); letter-spacing:-.04em; line-height:1.15; margin:var(--dn-space-2) 0 var(--dn-space-3); }
.dn-page .tool-hero p { font-size:var(--dn-font-base); line-height:1.7; margin:0; max-width:68ch; }
.dn-page .tool-hero .dn-eyebrow { font-size:var(--dn-font-xs); color:var(--dn-color-accent); font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.dn-page .breadcrumb { margin-bottom:var(--dn-space-5); }
.dn-page .dn-notice { padding:var(--dn-space-3) var(--dn-space-4); background:var(--dn-color-subtle); border:1px solid var(--dn-color-border); border-radius:var(--dn-radius-md); gap:var(--dn-space-2) var(--dn-space-5); align-items:flex-start; line-height:1.65; }
.dn-page .dn-notice > p:first-child { flex:1 1 360px; }
.dn-page #journalStatus { font-weight:600; }
.dn-page #journalStatus:empty { display:none; }
.dn-page .dn-navigation { top:var(--dn-sticky-top); padding:var(--dn-space-2); margin:var(--dn-space-5) 0; gap:var(--dn-space-2); background:var(--dn-card-bg); border:1px solid var(--dn-card-border); border-radius:var(--dn-radius-md); box-shadow:var(--dn-shadow-soft); }
.dn-page .dn-navigation [role="tab"] { min-height:48px; border:0; border-radius:var(--dn-radius-sm); gap:var(--dn-space-2); font-size:var(--dn-font-sm); font-weight:600; background:transparent; color:var(--dn-color-muted); padding:var(--dn-space-3) var(--dn-space-4); }
.dn-page .dn-navigation [role="tab"]:hover { background:var(--dn-color-subtle); color:var(--dn-color-text); }
.dn-page .dn-navigation [aria-selected="true"] { color:var(--dn-tab-active-text); background:var(--dn-tab-active-bg); box-shadow:inset 0 -2px 0 var(--dn-color-accent); }
.dn-page .dn-icon { width:19px; height:19px; flex:none; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.dn-page .dn-filter-bar { max-width:none; display:flex; gap:var(--dn-space-4); align-items:end; padding:0 0 var(--dn-space-5); margin:0; border-bottom:1px solid var(--dn-color-border); }
.dn-page .dn-filter-bar .field { margin:0; width:min(260px,55%); }
.dn-page .dn-filter-bar .field:last-child { max-width:160px; }
.dn-page .field > label { font-size:var(--dn-font-sm); color:var(--dn-color-muted); font-weight:600; }
.dn-page .dn-app .input, .dn-page dialog .input { border-color:var(--dn-color-input-border); background:var(--dn-color-surface); color:var(--dn-color-text); min-height:46px; border-radius:var(--dn-radius-sm); font-size:var(--dn-font-base); }
.dn-page .dn-app .section { padding-block:var(--dn-space-6); }
.dn-page .dn-section-head { margin-bottom:var(--dn-space-5); gap:var(--dn-space-3); }
.dn-page .dn-section-head h2 { font-size:var(--dn-font-title); letter-spacing:-.025em; }
.dn-page .dn-section-head .dn-actions { margin:0; }
.dn-page .dn-app .panel { border:1px solid var(--dn-card-border); border-radius:var(--dn-card-radius); padding:var(--dn-card-padding); box-shadow:var(--dn-shadow-soft); background:var(--dn-card-bg); }
.dn-page .dn-dashboard { grid-template-columns:minmax(0,1.65fr) minmax(0,1fr); gap:var(--dn-space-5); margin-bottom:var(--dn-space-5); align-items:start; }
.dn-page .dn-value-panel { border-top:3px solid var(--dn-color-accent)!important; }
.dn-page .dn-summary-grid > .dn-value-panel { grid-column:1; grid-row:1 / span 2; align-self:stretch; display:flex; flex-direction:column; }
.dn-page .dn-summary-grid > .dn-value-panel > .dn-method-note { margin-top:auto; }
.dn-page .dn-summary-grid > .dn-goal-panel { grid-column:2; grid-row:1; }
.dn-page .dn-summary-grid > .dn-quick { grid-column:2; grid-row:2; margin-bottom:0; gap:var(--dn-space-3); }
.dn-page .dn-big-number { font-size:clamp(2rem,3.6vw,3rem); font-weight:750; line-height:1.2; letter-spacing:-.045em; }
.dn-page .dn-label { font-size:var(--dn-font-sm); font-weight:500; margin-bottom:var(--dn-space-3); line-height:1.5; }
.dn-page .dn-change { display:inline-block; margin:var(--dn-space-3) 0 0; font-size:var(--dn-font-sm); font-weight:650; }
.dn-page .dn-divider { margin:var(--dn-space-5) 0; }
.dn-page .dn-metric strong { font-size:var(--dn-font-value); letter-spacing:-.025em; line-height:1.35; }
.dn-page .dn-market-counts { margin:var(--dn-space-4) 0 var(--dn-space-2); gap:var(--dn-space-2); }
.dn-page .dn-badge, .dn-page .dn-market-tag { font-size:var(--dn-font-xs); padding:var(--dn-space-1) var(--dn-space-2); border-radius:var(--dn-radius-sm); background:var(--dn-color-subtle); border:1px solid var(--dn-color-border); color:var(--dn-color-muted); font-weight:600; }
.dn-page .dn-subtle { font-size:var(--dn-font-sm); line-height:1.7; }
.dn-page .dn-subtle:empty, .dn-page #valueWarning:empty { display:none; }
.dn-page .dn-annual { gap:var(--dn-space-5); margin-top:var(--dn-space-5); padding-top:var(--dn-space-5); }
.dn-page .dn-annual .dn-label { min-height:2.8em; margin-bottom:var(--dn-space-2); }
.dn-page .dn-goal-panel { justify-content:flex-start; background:var(--dn-color-subtle)!important; }
.dn-page .dn-goal-panel h3 { margin:0 0 var(--dn-space-6); font-size:var(--dn-font-title); }
.dn-page .dn-goal { gap:var(--dn-space-5); align-items:center; }
.dn-page .dn-goal-ring { width:104px; height:104px; background:conic-gradient(var(--dn-color-accent) var(--progress),var(--dn-color-grid) 0); }
.dn-page .dn-goal-ring::before { background:var(--dn-color-subtle); inset:8px; }
.dn-page .dn-goal-ring strong { font-size:var(--dn-font-title); color:var(--dn-color-accent); }
.dn-page .dn-goal-income { font-size:1.65rem; letter-spacing:-.035em; }
.dn-page .dn-goal-tip { margin:var(--dn-space-5) 0 0; padding-top:var(--dn-space-4); border-top:1px solid var(--dn-color-border); color:var(--dn-color-muted); font-size:var(--dn-font-sm); line-height:1.7; }
.dn-page .dn-quick { grid-template-columns:1fr 1fr; align-items:stretch; }
.dn-page .dn-quick .panel { padding:var(--dn-space-5) var(--dn-space-6); }
.dn-page .dn-quick .panel:first-child { background:var(--dn-color-accent-soft); border-color:color-mix(in srgb,var(--dn-color-accent) 25%,var(--dn-color-border)); }
.dn-page .dn-quick .panel:first-child .dn-big-number { color:var(--dn-color-positive); }
.dn-page .dn-quick .dn-big-number { font-size:2rem; }
.dn-page .dn-quick p { margin:var(--dn-space-2) 0; }
.dn-page .dn-summary-grid > .dn-quick .panel { padding:var(--dn-space-4); }
.dn-page .dn-summary-grid > .dn-quick .dn-big-number { font-size:1.5rem; }
.dn-page .dn-method-note { margin-top:var(--dn-space-4); border-top:1px solid var(--dn-color-border); padding-top:var(--dn-space-2); }
.dn-page .dn-method-note summary { color:var(--dn-color-muted); font-size:var(--dn-font-sm); font-weight:600; }
.dn-page .dn-method-note p { color:var(--dn-color-muted); font-size:var(--dn-font-sm); line-height:1.75; max-width:85ch; }
.dn-page .dn-chart-panel h3 { font-size:var(--dn-font-title); margin:0 0 var(--dn-space-4); }
.dn-page .dn-chart-toolbar { align-items:center; gap:var(--dn-space-4); }
.dn-page .dn-app .seg { background:var(--dn-color-subtle); border-color:var(--dn-color-border); border-radius:var(--dn-radius-sm); padding:var(--dn-space-1); }
.dn-page .dn-app .seg button { color:var(--dn-color-muted); padding:var(--dn-space-2) var(--dn-space-3); font-weight:600; font-size:var(--dn-font-sm); }
.dn-page .dn-app .seg button[aria-pressed="true"] { color:var(--dn-color-accent); background:var(--dn-color-surface); }
.dn-page #chartTotal { display:block; font-size:var(--dn-font-value); font-weight:750; letter-spacing:-.025em; }
.dn-page .dn-chart-toolbar > p { color:var(--dn-color-muted); font-size:var(--dn-font-xs); }
.dn-page .dn-chart-toolbar > p strong { color:var(--dn-color-text); }
.dn-page .dn-chart-scroll { border-radius:var(--dn-radius-sm); padding-inline:var(--dn-space-2); }
.dn-page .dn-chart { margin-block:var(--dn-space-4); border-color:var(--dn-color-grid); }
.dn-page .dn-chart-track { background-image:linear-gradient(to top,var(--dn-color-grid) 1px,transparent 1px); }
.dn-page .dn-chart-bar { border-radius:5px 5px 0 0; background:var(--dn-chart-received); }
.dn-page .dn-bar-expected, .dn-page .dn-legend-expected::before { background:repeating-linear-gradient(135deg,var(--dn-chart-expected),var(--dn-chart-expected) 3px,color-mix(in srgb,var(--dn-chart-expected) 45%,var(--dn-color-surface)) 3px,color-mix(in srgb,var(--dn-chart-expected) 45%,var(--dn-color-surface)) 6px); }
.dn-page .dn-bar-negative { background:var(--dn-color-negative); border-radius:0 0 5px 5px; }
.dn-page .dn-chart-legend { color:var(--dn-color-muted); gap:var(--dn-space-5); }
.dn-page .dn-bar-value, .dn-page .dn-axis { font-size:var(--dn-font-xs); }
.dn-page .dn-scroll-hint { font-size:var(--dn-font-xs); color:var(--dn-color-muted); margin:var(--dn-space-2) 0; }
.dn-page .dn-holding-grid, .dn-page .dn-dividend-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--dn-space-4); }
.dn-page .dn-stock-card { padding:var(--dn-space-5); border-radius:var(--dn-radius-md); border:1px solid var(--dn-color-border); background:var(--dn-card-bg); gap:var(--dn-space-3); box-shadow:var(--dn-shadow-soft); transition:border-color .18s,box-shadow .18s,transform .18s; }
.dn-page .dn-stock-gain { border-top:3px solid var(--dn-color-positive); }
.dn-page .dn-stock-loss { border-top:3px solid var(--dn-color-negative); }
.dn-page .dn-stock-neutral { border-top:3px solid var(--dn-color-border); }
.dn-page .dn-card-head strong { font-size:1.125rem; letter-spacing:-.02em; }
.dn-page .dn-stock-name { font-size:var(--dn-font-sm); line-height:1.55; }
.dn-page .dn-card-price { font-size:1.35rem; letter-spacing:-.025em; line-height:1.4; font-weight:750; }
.dn-page .dn-card-detail, .dn-page .dn-card-date { font-size:var(--dn-font-xs); line-height:1.65; }
.dn-page .dn-card-change { font-size:var(--dn-font-sm); line-height:1.65; border-radius:var(--dn-radius-sm); padding:var(--dn-space-2) var(--dn-space-3); background:var(--dn-color-subtle); }
.dn-page .dn-stock-gain .dn-card-change { color:var(--dn-color-positive); background:var(--dn-color-accent-soft); }
.dn-page .dn-stock-loss .dn-card-change { color:var(--dn-color-negative); background:var(--dn-color-negative-soft); }
.dn-page .dn-stock-card .dn-card-date { border-top:1px solid var(--dn-color-border); padding-top:var(--dn-space-2); }
.dn-page .dn-income-totals { grid-template-columns:repeat(auto-fit,minmax(185px,1fr)); gap:var(--dn-space-3); }
.dn-page .dn-income-total { padding:var(--dn-space-5); border-radius:var(--dn-radius-md); }
.dn-page .dn-income-total strong { font-size:var(--dn-font-value); letter-spacing:-.025em; }
.dn-page .dn-income-base { order:-1; background:var(--dn-color-accent-soft); }
.dn-page .dn-month-group { margin-bottom:var(--dn-space-5); }
.dn-page .dn-month-heading { display:grid; grid-template-columns:auto 1fr auto auto; gap:var(--dn-space-3); }
.dn-page .dn-month-heading .dn-subtle { margin-left:0; font-size:var(--dn-font-xs); }
.dn-page .dn-dividend-grid { padding-top:var(--dn-space-5); }
.dn-page .dn-dividend-card { background:var(--dn-card-bg); border:1px solid var(--dn-color-border); border-top:3px solid var(--market-accent); border-radius:var(--dn-radius-md); padding:var(--dn-space-4); gap:var(--dn-space-3); }
.dn-page .dn-dividend-card .dn-card-price { margin-block:var(--dn-space-1); }
.dn-page .dn-dividend-card .dn-row-actions { border-top:1px solid var(--dn-color-border); padding-top:var(--dn-space-2); margin-top:auto; }
.dn-page .dn-app .btn-primary, .dn-page dialog .btn-primary { color:var(--dn-button-text); background:var(--dn-button-bg); border-color:var(--dn-button-bg); box-shadow:none; }
.dn-page .dn-app .btn, .dn-page dialog .btn { min-height:44px; border-radius:var(--dn-radius-sm); font-size:var(--dn-font-sm); }
.dn-page .dn-app .btn-ghost, .dn-page dialog .btn-ghost { color:var(--dn-color-text); border-color:var(--dn-color-border); background:var(--dn-color-surface); }
.dn-page .dn-row-actions .btn { padding:var(--dn-space-2) var(--dn-space-3); }
.dn-page .dn-app button:disabled, .dn-page dialog button:disabled { opacity:.5; cursor:not-allowed; box-shadow:none; transform:none; }
.dn-page .dn-app :is(button,a,input,select,textarea,summary,[tabindex]):focus-visible, .dn-page dialog :is(button,a,input,select,summary):focus-visible { outline:3px solid var(--dn-focus); outline-offset:3px; box-shadow:none; }
.dn-page .dn-app .table-scroll { border-radius:var(--dn-radius-md); border-color:var(--dn-color-border); }
.dn-page .dn-app table.data { font-size:var(--dn-font-sm); }
.dn-page .dn-app table.data th, .dn-page .dn-app table.data td { padding:var(--dn-space-3) var(--dn-space-4); line-height:1.6; }
.dn-page .dn-app table.data thead th { font-size:var(--dn-font-xs); color:var(--dn-color-muted); background:var(--dn-color-subtle); }
.dn-page .dn-app table.data tbody tr:nth-child(even) { background:var(--dn-color-subtle); }
.dn-page .dn-entry, .dn-page .dn-ledger { margin-top:var(--dn-space-5); }
.dn-page .dn-app .dn-first { max-width:680px; padding:var(--dn-space-10); border-style:dashed; margin:var(--dn-space-6) auto; text-align:left; }
.dn-page .dn-first h2 { font-size:1.65rem; line-height:1.4; }
.dn-page .dn-first p { color:var(--dn-color-muted); line-height:1.75; }
.dn-page .dn-first .dn-actions { justify-content:flex-start; }
.dn-page .dn-empty { background:var(--dn-color-subtle); border:1px dashed var(--dn-color-input-border); border-radius:var(--dn-radius-md); padding:var(--dn-space-8); font-size:var(--dn-font-sm); line-height:1.7; }
.dn-page #view-settings { display:grid; grid-template-columns:1fr 1fr; gap:var(--dn-space-5); padding-top:var(--dn-space-6); align-items:start; }
.dn-page #view-settings .panel { margin:0; }
.dn-page #view-settings #backup { grid-column:1/-1; }
.dn-page #view-settings .dn-toolbar .dn-grid { max-width:none; }
.dn-page .dn-recovery { border-color:var(--dn-color-warning); background:var(--dn-color-subtle); }
.dn-page #dn-month-review { margin-top:var(--dn-space-5); }
.dn-page .dn-review-heading { display:flex; justify-content:space-between; align-items:center; gap:var(--dn-space-5); margin-bottom:var(--dn-space-4); }
.dn-page .dn-review-heading h2 { margin:0; font-size:var(--dn-font-title); }
.dn-page .dn-review-filter { display:flex; gap:var(--dn-space-3); align-items:center; color:var(--dn-color-muted); font-size:var(--dn-font-sm); }
.dn-page #review-body > p, .dn-page #dn-month-review > p { color:var(--dn-color-muted); line-height:1.7; font-size:var(--dn-font-sm); }
.dn-page #review-body .nb-metrics { grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--dn-space-3); }
.dn-page #review-body .nb-metrics > div { background:var(--dn-color-subtle); border-color:var(--dn-color-border); border-radius:var(--dn-radius-md); padding:var(--dn-space-4); }
.dn-page #review-body .nb-metrics > div:first-child { background:var(--dn-color-accent-soft); }
.dn-page #review-body .nb-metrics strong { font-size:var(--dn-font-title); letter-spacing:-.025em; margin-top:var(--dn-space-3); }
.dn-page #review-body .nb-metrics span { color:var(--dn-color-muted); font-size:var(--dn-font-xs); line-height:1.6; }
.dn-page #dn-month-review > a { display:inline-flex; align-items:center; min-height:44px; color:var(--dn-color-accent); font-size:var(--dn-font-sm); font-weight:650; }
.dn-page #restoreDialog, .dn-page #holdingDialog { border-radius:var(--dn-card-radius); padding:var(--dn-space-6); background:var(--dn-color-surface); border-color:var(--dn-color-border); box-shadow:var(--dn-shadow-raised); }
@media (hover:hover) {
  .dn-page .dn-stock-card:hover { border-color:var(--dn-color-accent); box-shadow:var(--dn-shadow-raised); transform:translateY(-2px); }
  .dn-page .dn-app .btn-primary:hover, .dn-page dialog .btn-primary:hover { filter:brightness(.92); }
  .dn-page .dn-app .btn-ghost:hover, .dn-page dialog .btn-ghost:hover { background:var(--dn-color-subtle); border-color:var(--dn-color-input-border); }
}
@media (max-width:1000px) {
  .dn-page .dn-holding-grid, .dn-page .dn-dividend-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .dn-page .dn-dashboard { grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); }
  .dn-page #review-body .nb-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:740px) {
  .dn-page { --dn-card-padding:var(--dn-space-5); }
  .dn-page .dn-dashboard { grid-template-columns:1fr; }
  .dn-page .dn-summary-grid > .dn-value-panel, .dn-page .dn-summary-grid > .dn-goal-panel, .dn-page .dn-summary-grid > .dn-quick { grid-column:auto; grid-row:auto; }
  .dn-page .dn-holding-grid, .dn-page .dn-dividend-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .dn-page .dn-quick { grid-template-columns:1fr 1fr; }
  .dn-page .dn-quick .panel { padding:var(--dn-space-4); }
  .dn-page .dn-quick .dn-big-number { font-size:1.6rem; }
  .dn-page .dn-goal-panel h3 { margin-bottom:var(--dn-space-4); }
  .dn-page .dn-navigation { gap:var(--dn-space-1); }
  .dn-page .dn-navigation [role="tab"] { flex-direction:column; gap:var(--dn-space-1); font-size:var(--dn-font-xs); padding:var(--dn-space-2) var(--dn-space-1); }
  .dn-page .dn-stock-card { padding:var(--dn-space-4); }
  .dn-page .dn-card-price { font-size:1.15rem; }
  .dn-page .dn-card-change { padding:var(--dn-space-2); }
  .dn-page #view-settings { grid-template-columns:1fr; }
  .dn-page .dn-review-heading { flex-direction:column; align-items:flex-start; }
  .dn-page .dn-month-heading { grid-template-columns:auto 1fr auto; }
  .dn-page .dn-month-heading .dn-subtle { grid-column:2/-1; }
  .dn-page .dn-section-head .dn-actions { width:100%; }
  .dn-page .dn-app .dn-first { padding:var(--dn-space-6); }
  .dn-page .dn-chart-toolbar > .seg { width:100%; }
  .dn-page .dn-app .seg button { flex:1 1 120px; }
}
@media (max-width:380px) {
  .dn-page .dn-holding-grid, .dn-page .dn-dividend-grid, .dn-page .dn-quick { grid-template-columns:1fr; }
  .dn-page .dn-navigation [role="tab"] { font-size:.75rem; }
  .dn-page .dn-filter-bar { gap:var(--dn-space-3); }
  .dn-page .dn-annual { grid-template-columns:1fr; }
  .dn-page .dn-annual .dn-label { min-height:0; }
  .dn-page #review-body .nb-metrics { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce) {
  .dn-page .dn-stock-card, .dn-page .dn-app .btn { transition:none; }
  .dn-page .dn-stock-card:hover { transform:none; }
}
@media (forced-colors:active) {
  .dn-page .dn-navigation [aria-selected="true"] { border:2px solid Highlight; }
  .dn-page .dn-chart-bar { background:CanvasText; forced-color-adjust:none; }
  .dn-page .dn-bar-expected { border:2px dashed CanvasText; background:Canvas; }
}