:root { --bg:#f6f7f9; --panel:#fff; --ink:#1d2430; --muted:#697386; --line:#d9dee8; --blue:#2563eb; --green:#0f766e; --good:#0f7a42; --bad:#b42318; --shadow:0 1px 2px rgba(29,36,48,.08),0 8px 24px rgba(29,36,48,.06); }
    * { box-sizing:border-box; } body { margin:0; font-family:Segoe UI,system-ui,sans-serif; color:var(--ink); background:var(--bg); }
    header { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 24px; background:var(--panel); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:10; }
    h1 { margin:0; font-size:22px; font-weight:750; letter-spacing:0; } main { padding:18px 24px 28px; display:grid; gap:16px; }
    button,select,input { font:inherit; } button { border:1px solid var(--line); background:#fff; color:var(--ink); height:36px; padding:0 12px; border-radius:6px; cursor:pointer; }
    button:hover { border-color:#b8c0cc; } button.primary { border-color:var(--blue); background:var(--blue); color:#fff; } button.good { border-color:var(--green); background:var(--green); color:#fff; } button.secondary { background:#fff; color:var(--ink); }
    button.symbol { height:28px; padding:0; border:0; background:transparent; color:var(--blue); font-weight:700; text-decoration:underline; text-underline-offset:3px; }
    .toolbar { display:flex; flex-wrap:wrap; gap:10px; align-items:end; } .field { display:grid; gap:5px; min-width:120px; } .field label { font-size:12px; color:var(--muted); }
    select,input { height:36px; padding:0 10px; border:1px solid var(--line); border-radius:6px; background:#fff; color:var(--ink); min-width:0; } input[type=checkbox] { height:auto; width:16px; }
    .check { display:flex; gap:8px; align-items:center; height:36px; padding-top:17px; } .panel { background:var(--panel); border:1px solid var(--line); border-radius:8px; box-shadow:var(--shadow); }
    .filters { padding:14px; } .summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; } .metric { padding:14px; } .metric .value { font-size:26px; font-weight:800; line-height:1; } .metric .label { color:var(--muted); font-size:12px; margin-top:6px; }
    .tabs { display:flex; flex-wrap:wrap; gap:6px; padding:6px; width:max-content; max-width:100%; } .tabs button.active { background:var(--ink); color:#fff; border-color:var(--ink); } .subtabs { display:flex; flex-wrap:wrap; gap:6px; padding:6px; width:max-content; max-width:100%; } .subtabs button.active { background:var(--ink); color:#fff; border-color:var(--ink); }
    .content { display:none; } .content.active { display:grid; gap:16px; } .table-wrap { overflow:auto; border-radius:8px; }
    table { width:100%; border-collapse:collapse; min-width:1180px; background:#fff; } th,td { padding:10px 12px; border-bottom:1px solid var(--line); text-align:right; white-space:nowrap; }
    th:first-child,td:first-child,th:nth-child(2),td:nth-child(2),th:nth-child(3),td:nth-child(3) { text-align:left; } th { font-size:12px; color:var(--muted); font-weight:650; background:#fbfcfe; }
    tr:hover td { background:#f9fbfd; } .pill { display:inline-flex; align-items:center; height:24px; padding:0 8px; border-radius:999px; border:1px solid var(--line); font-size:12px; }
    .pill.blood { border-color:#efb8a8; color:var(--bad); background:#fff7f4; } .pos { color:var(--good); font-weight:650; } .neg { color:var(--bad); font-weight:650; } .neutral { color:var(--muted); font-weight:650; }
    .info { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%; border:1px solid var(--line); color:var(--muted); font-size:12px; margin-left:5px; cursor:help; }
    .edition-grid { display:grid; gap:14px; } .year-block { padding:14px; display:grid; gap:12px; } .year-block h2 { margin:0; font-size:20px; }
    .month-block { border-top:1px solid var(--line); padding-top:12px; } .month-block h3 { margin:0 0 8px; color:var(--muted); font-size:14px; }
    .compact-table { min-width:980px; } .muted { color:var(--muted); } .error { color:var(--bad); padding:12px 14px; }
    .drawer-backdrop { display:none; position:fixed; inset:0; background:rgba(29,36,48,.28); z-index:20; } .drawer-backdrop.open { display:block; }
    .drawer { position:absolute; top:0; right:0; width:min(540px,100%); min-height:100%; background:#fff; box-shadow:-18px 0 40px rgba(29,36,48,.18); padding:20px; display:grid; align-content:start; gap:16px; }
    .drawer-head { display:flex; justify-content:space-between; gap:12px; align-items:center; } .drawer-head h2 { margin:0; font-size:24px; }
    .confirm-backdrop { display:none; position:fixed; inset:0; background:rgba(29,36,48,.34); z-index:40; place-items:center; padding:18px; } .confirm-backdrop.open { display:grid; }
    .quick-start-backdrop { display:none; position:fixed; inset:0; background:rgba(29,36,48,.34); z-index:45; place-items:center; padding:18px; }
    .quick-start-backdrop.open { display:grid; }
    .quick-start-dialog { width:min(760px,100%); max-height:min(86vh,820px); overflow:hidden; background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:0 18px 45px rgba(29,36,48,.20); display:grid; grid-template-rows:auto minmax(0,1fr) auto; }
    .quick-start-head { display:flex; justify-content:space-between; gap:14px; align-items:flex-start; padding:18px 18px 14px; border-bottom:1px solid var(--line); }
    .quick-start-head h2 { margin:0; font-size:22px; }
    .quick-start-head p { margin:5px 0 0; color:var(--muted); line-height:1.5; }
    .quick-start-body { overflow:auto; padding:16px 18px; display:grid; gap:12px; }
    .quick-start-section { border:1px solid var(--line); border-radius:10px; padding:14px; background:#fbfcfe; display:grid; gap:8px; }
    .quick-start-section h3 { margin:0; font-size:16px; }
    .quick-start-section p { margin:0; color:var(--muted); line-height:1.55; }
    .quick-start-section ul { margin:0; padding-left:20px; color:var(--muted); line-height:1.55; }
    .quick-start-note, .quick-start-tips { border:1px solid var(--line); border-left:3px solid var(--blue); border-radius:8px; padding:10px; background:#fff; }
    .quick-start-actions { display:flex; justify-content:flex-end; gap:8px; padding:14px 18px 18px; border-top:1px solid var(--line); }
    .confirm-dialog { width:min(420px,100%); background:#fff; border:1px solid var(--line); border-radius:8px; box-shadow:0 18px 45px rgba(29,36,48,.20); padding:18px; display:grid; gap:12px; }
    .confirm-dialog h2 { margin:0; font-size:18px; } .confirm-dialog p { margin:0; color:var(--muted); line-height:1.5; } .confirm-actions { display:flex; justify-content:flex-end; gap:8px; }
    .detail-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .detail { border:1px solid var(--line); border-radius:8px; padding:12px; } .detail .value { font-size:20px; font-weight:750; } .detail .label { color:var(--muted); font-size:12px; margin-top:4px; }
    .placeholder { border:1px dashed var(--line); border-radius:8px; padding:14px; color:var(--muted); background:#fbfcfe; }
    .market-snapshot-note { border:1px solid var(--line); border-radius:10px; padding:10px 12px; color:var(--muted); background:var(--panel); font-size:var(--text-sm); box-shadow:var(--shadow); }
    .metric.clickable { cursor:pointer; transition:border-color .15s ease, box-shadow .15s ease; } .metric.clickable:hover { border-color:#b8c0cc; } .metric.clickable.active { border-color:var(--blue); box-shadow:0 0 0 2px rgba(37,99,235,.12), var(--shadow); }
    button.table-sort { border:0; background:transparent; height:auto; padding:0; color:inherit; font-size:12px; font-weight:650; } button.table-sort:hover { color:var(--blue); }
    .holding-card { padding:14px; display:grid; gap:12px; } .holding-head { display:flex; justify-content:space-between; gap:12px; align-items:start; flex-wrap:wrap; } .holding-title { display:flex; gap:10px; align-items:center; flex-wrap:wrap; } .holding-title h3 { margin:0; font-size:18px; }
    .position-form { display:grid; grid-template-columns:repeat(5,minmax(120px,1fr)); gap:10px; align-items:end; } .position-form .wide { grid-column:span 2; } .segmented { display:flex; gap:6px; } .segmented button.active { background:var(--ink); color:#fff; border-color:var(--ink); }
    .cashflow-grid { display:grid; grid-template-columns:repeat(5,minmax(120px,1fr)); gap:10px; } .cashflow-item { border:1px solid var(--line); border-radius:8px; padding:10px; background:#fbfcfe; } .cashflow-item.wide-stat { grid-column:span 2; } .cashflow-item .value { font-size:18px; font-weight:750; } .cashflow-item .label { color:var(--muted); font-size:12px; margin-top:3px; }
    .coupon-schedule { display:grid; gap:8px; } .coupon-schedule summary { cursor:pointer; font-weight:750; padding:10px 0; } .coupon-row { display:grid; grid-template-columns:130px 110px 1fr; gap:10px; align-items:center; padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:#fbfcfe; } .coupon-row .amount { text-align:right; font-weight:700; }

    .hidden { display:none; } button.saved { border-color:var(--good); background:var(--good); color:#fff; } .form-error { color:var(--bad); font-weight:650; } input.invalid { border-color:var(--bad); box-shadow:0 0 0 2px rgba(180,35,24,.10); }
    .stats-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; } .stats-block { padding:14px; display:grid; gap:12px; } .stats-block h2 { margin:0; font-size:18px; } .dashboard-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; } .pie-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } .donut { width:120px; height:120px; border-radius:50%; background:conic-gradient(var(--blue) 0deg, var(--blue) var(--angle), #e7ecf4 var(--angle), #e7ecf4 360deg); display:grid; place-items:center; margin:auto; } .donut span { background:#fff; border-radius:50%; width:72px; height:72px; display:grid; place-items:center; font-weight:800; } .allocation-lines { display:grid; gap:4px; margin-top:8px; font-size:12px; color:var(--muted); text-align:center; } .timeline-year { display:grid; grid-template-columns:70px 1fr auto; gap:10px; align-items:center; }
    .bar-list { display:grid; gap:10px; } .bar-row { display:grid; grid-template-columns:110px 1fr auto; gap:10px; align-items:center; } .bar-track { height:12px; border-radius:999px; background:#edf1f7; overflow:hidden; } .bar-fill { height:100%; background:var(--blue); } .bar-fill.received { background:var(--green); }
    .timeline-amount { display:grid; gap:2px; min-width:132px; text-align:right; } .timeline-amount span { color:var(--muted); font-size:12px; }
    .annual-cashflow-chart { display:grid; gap:10px; min-width:260px; } .annual-cashflow-row { display:grid; grid-template-columns:48px 1fr minmax(110px,auto); gap:8px; align-items:center; } .annual-cashflow-row > div:last-child { display:grid; gap:2px; text-align:right; } .annual-cashflow-row span { color:var(--muted); font-size:12px; }
    .stacked-bar { height:12px; border-radius:999px; background:#edf1f7; overflow:hidden; display:flex; } .stacked-bar span { height:100%; min-width:0; } .stacked-bar .coupon { background:var(--green); } .stacked-bar .principal { background:var(--blue); }
    .coverage-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; } .coverage-month { border:1px solid var(--line); border-radius:8px; padding:9px; background:#fbfcfe; display:grid; gap:4px; min-height:66px; } .coverage-month.covered { border-color:#b8d9ce; background:#f3fbf8; } .coverage-month.principal { border-color:#b8c7ef; background:#f5f8ff; } .coverage-month.empty { border-style:dashed; color:var(--muted); } .coverage-month strong { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:13px; } .coverage-month span { font-size:12px; color:var(--muted); } .coverage-month .coverage-mark { width:18px; height:18px; display:inline-grid; place-items:center; border-radius:50%; background:#fff; color:var(--good); font-size:12px; font-weight:800; } .coverage-month.empty .coverage-mark { color:var(--muted); }
    .mini-table { min-width:760px; }
    .cookie-banner { position:fixed; left:16px; right:16px; bottom:16px; z-index:30; display:none; align-items:center; justify-content:space-between; gap:16px; padding:14px 16px; border:1px solid var(--line); border-radius:8px; background:#fff; box-shadow:0 18px 45px rgba(29,36,48,.18); }
    .cookie-banner.show { display:flex; }
    .cookie-banner strong { display:block; margin-bottom:4px; }
    .cookie-banner p { margin:0; color:var(--muted); max-width:880px; }
    .cookie-actions { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
    .app-footer { margin-top:4px; padding:18px 24px 26px; display:grid; justify-items:center; gap:6px; color:var(--muted); font-size:13px; text-align:center; }
    .app-footer a { color:var(--muted); text-decoration:none; }
    .app-footer a:hover { color:var(--blue); text-decoration:underline; text-underline-offset:3px; }
    .footer-main { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
    .footer-links { display:flex; flex-wrap:wrap; gap:12px; }
    .footer-contact { font-weight:650; }
    .help-link { display:inline-grid; place-items:center; width:20px; height:20px; margin-left:6px; border:1px solid var(--line); border-radius:50%; color:var(--muted); background:#fff; font-size:12px; font-weight:750; text-decoration:none; vertical-align:middle; }
    .help-link:hover { color:var(--blue); border-color:var(--blue); text-decoration:none; }
    .legal-page { max-width:920px; margin:0 auto; }
    .legal-page h2 { margin:0 0 10px; font-size:26px; }
    .legal-page h3 { margin:18px 0 8px; font-size:16px; }
    .legal-page p, .legal-page li { color:var(--muted); line-height:1.6; }
    .donation-card { margin-top:12px; border:1px solid var(--line); border-radius:12px; background:#fff; overflow:hidden; }
    .donation-card summary { cursor:pointer; padding:13px 15px; font-weight:750; color:var(--text); list-style:none; }
    .donation-card summary::-webkit-details-marker { display:none; }
    .donation-card summary::after { content:"+"; float:right; color:var(--blue); font-weight:800; }
    .donation-card[open] summary::after { content:"-"; }
    .donation-content { display:grid; justify-items:center; gap:10px; padding:0 16px 18px; }
    .support-qr { width:min(100%, 360px); border-radius:14px; border:1px solid var(--line); box-shadow:0 8px 24px rgba(15,23,42,.10); }
    .legal-page ul { margin:8px 0 0; padding-left:20px; }
    .legal-page table { width:100%; border-collapse:collapse; margin:10px 0 14px; background:#fff; }
    .legal-page th, .legal-page td { padding:10px 12px; border:1px solid var(--line); text-align:left; vertical-align:top; }
    .legal-page th { background:#fbfcfe; color:var(--muted); font-size:12px; font-weight:650; }
    .method-section { margin:28px 0 14px; padding:12px 14px; border:1px solid var(--line); border-left:4px solid var(--blue); border-radius:8px; background:#fbfcfe; font-size:20px; }

    /* Fidelis Explorer design system: restrained financial UI. */
    :root {
      color-scheme: light;

      /* Brand and semantic color */
      --primary:#2563eb;
      --primary-hover:#1d4ed8;
      --primary-soft:#eff6ff;
      --success:#059669;
      --success-ui:#059669;
      --success-soft:#ecfdf5;
      --warning:#d97706;
      --warning-soft:#fffaeb;
      --danger:#dc2626;
      --danger-soft:#fef2f2;

      /* Neutral scale */
      --gray-25:#fcfcfd;
      --gray-50:#f8fafc;
      --gray-100:#f1f5f9;
      --gray-200:#e2e8f0;
      --gray-300:#cbd5e1;
      --gray-400:#94a3b8;
      --gray-500:#64748b;
      --gray-600:#475569;
      --gray-700:#334155;
      --gray-800:#1e293b;
      --gray-900:#0f172a;

      /* Product aliases */
      --bg:#f8fafc;
      --panel:#ffffff;
      --ink:var(--gray-900);
      --muted:var(--gray-500);
      --line:#e2e8f0;
      --blue:var(--primary);
      --green:var(--success-ui);
      --good:var(--success);
      --bad:var(--danger);
      --soft-blue:var(--primary-soft);
      --soft-green:var(--success-soft);
      --soft-red:var(--danger-soft);

      /* Type, spacing, radius, elevation */
      --font-sans:Inter,ui-sans-serif,Segoe UI,system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
      --text-xs:12px;
      --text-sm:13px;
      --text-md:14px;
      --text-lg:18px;
      --text-xl:21px;
      --space-1:4px;
      --space-2:8px;
      --space-3:12px;
      --space-4:16px;
      --space-5:20px;
      --space-6:24px;
      --radius-sm:10px;
      --radius-md:12px;
      --radius-lg:14px;
      --radius-pill:999px;
      --shadow:0 2px 6px rgba(15,23,42,.05);
      --shadow-hover:0 4px 12px rgba(15,23,42,.08);
      --shadow-overlay:0 20px 48px rgba(16,24,40,.18);
      --ring:0 0 0 3px rgba(37,99,235,.16);
    }

    body {
      font-family:var(--font-sans);
      font-size:var(--text-md);
      line-height:1.45;
      -webkit-font-smoothing:antialiased;
      text-rendering:optimizeLegibility;
    }

    header {
      background:rgba(255,255,255,.96);
      box-shadow:0 1px 0 rgba(16,24,40,.04);
    }

    h1 {
      color:var(--gray-900);
      font-size:var(--text-xl);
      font-weight:760;
    }

    button, select, input, .help-link, .metric.clickable, .panel {
      transition:border-color .16s ease, background-color .16s ease, color .16s ease, box-shadow .16s ease;
    }

    button {
      border-radius:var(--radius-sm);
      font-weight:650;
      box-shadow:0 1px 1px rgba(16,24,40,.03);
    }

    button:hover {
      border-color:var(--gray-400);
      background:var(--gray-50);
    }

    button:focus-visible,
    select:focus-visible,
    input:focus-visible,
    a:focus-visible,
    summary:focus-visible {
      outline:0;
      box-shadow:var(--ring);
      border-color:var(--primary);
    }

    button.primary {
      background:var(--primary);
      border-color:var(--primary);
      color:#fff;
      box-shadow:0 1px 2px rgba(29,78,216,.18);
    }

    button.primary:hover {
      background:var(--primary-hover);
      border-color:var(--primary-hover);
    }

    button.good {
      background:var(--success-ui);
      border-color:var(--success-ui);
      color:#fff;
      box-shadow:0 1px 2px rgba(15,118,110,.18);
    }

    button.good:hover {
      background:#0f5f59;
      border-color:#0f5f59;
    }

    button.secondary {
      background:#fff;
      color:var(--gray-900);
    }

    button.symbol {
      color:var(--primary);
      box-shadow:none;
      text-decoration-thickness:1px;
    }

    button.symbol:hover {
      color:var(--primary-hover);
      background:transparent;
    }

    select, input {
      border-color:var(--gray-300);
      border-radius:var(--radius-sm);
      box-shadow:0 1px 2px rgba(16,24,40,.04);
    }

    select:hover, input:hover {
      border-color:var(--gray-400);
    }

    .panel {
      border-color:var(--line);
      border-radius:var(--radius-md);
      box-shadow:var(--shadow);
    }

    .filters,
    .stats-block,
    .year-block,
    .holding-card {
      padding:var(--space-4);
    }

    .metric,
    .cashflow-item,
    .detail {
      background:#fff;
      border-color:var(--line);
      border-radius:var(--radius-md);
    }

    .metric .value,
    .cashflow-item .value,
    .detail .value {
      color:var(--gray-900);
      font-weight:760;
    }

    .metric .label,
    .cashflow-item .label,
    .detail .label,
    .field label {
      color:var(--gray-500);
      font-size:var(--text-xs);
      font-weight:560;
    }

    .tabs,
    .subtabs {
      background:#fff;
      border-color:var(--line);
      border-radius:var(--radius-md);
      box-shadow:var(--shadow);
    }

    .tabs button,
    .subtabs button,
    .segmented button {
      box-shadow:none;
    }

    .tabs button.active,
    .subtabs button.active,
    .segmented button.active {
      background:var(--gray-900);
      border-color:var(--gray-900);
      color:#fff;
    }

    table {
      color:var(--gray-700);
    }

    th {
      color:var(--gray-500);
      background:var(--gray-50);
      font-weight:680;
    }

    td {
      color:var(--gray-700);
    }

    tr:hover td {
      background:#f8fafc;
    }

    .pill {
      background:#fff;
      border-color:var(--gray-300);
      border-radius:var(--radius-pill);
      color:var(--gray-700);
      font-weight:650;
    }

    .pill.blood {
      background:var(--danger-soft);
      border-color:#fda29b;
      color:var(--danger);
    }

    .pos { color:var(--success); }
    .neg { color:var(--danger); }
    .neutral { color:var(--gray-500); }
    .muted { color:var(--gray-500); }

    .placeholder {
      background:var(--gray-50);
      border-color:var(--gray-300);
      border-radius:var(--radius-md);
    }

    .metric.clickable:hover,
    .holding-card:hover,
    .year-block:hover {
      box-shadow:var(--shadow-hover);
    }

    .metric.clickable.active {
      border-color:#84a6ff;
      background:#fbfdff;
      box-shadow:0 0 0 3px rgba(29,78,216,.10),var(--shadow);
    }

    .bar-track,
    .stacked-bar {
      background:#eef2f6;
    }

    .bar-fill,
    .stacked-bar .principal {
      background:var(--primary);
    }

    .bar-fill.received,
    .stacked-bar .coupon {
      background:var(--success-ui);
    }

    .coverage-month {
      background:#fff;
      border-radius:var(--radius-md);
    }

    .coverage-month.covered {
      background:var(--success-soft);
      border-color:#a6f4c5;
    }

    .coverage-month.principal {
      background:var(--primary-soft);
      border-color:#b2ccff;
    }

    .coverage-month.empty {
      background:#fff;
      border-color:var(--gray-300);
    }

    .donut span {
      color:var(--gray-900);
      box-shadow:inset 0 0 0 1px var(--line);
    }

    .drawer,
    .confirm-dialog,
    .cookie-banner {
      border-radius:var(--radius-md);
      box-shadow:var(--shadow-overlay);
    }

    .help-link {
      color:var(--gray-500);
      border-color:var(--gray-300);
    }

    .help-link:hover {
      background:var(--primary-soft);
      color:var(--primary);
      border-color:#84a6ff;
      box-shadow:0 1px 2px rgba(29,78,216,.08);
    }

    .app-footer {
      color:var(--gray-500);
    }

    .app-footer a:hover {
      color:var(--primary);
    }

    /* Product identity refinements: reduce the Bootstrap-white feel. */
    main {
      background:var(--bg);
    }

    header {
      border-bottom-color:var(--gray-200);
    }

    .panel {
      background:var(--panel);
      border-color:var(--line);
    }

    .metric,
    .cashflow-item,
    .detail,
    .coverage-month,
    .coupon-row {
      background:#ffffff;
      box-shadow:0 1px 2px rgba(15,23,42,.03);
    }

    .filters,
    .tabs,
    .subtabs {
      background:#ffffff;
    }

    th {
      background:#f8fafc;
      color:var(--gray-500);
    }

    table {
      background:#ffffff;
    }

    .table-wrap {
      border:1px solid var(--line);
      box-shadow:var(--shadow);
      background:#ffffff;
    }

    .year-block h2,
    .stats-block h2 {
      padding-bottom:var(--space-2);
      border-bottom:1px solid var(--line);
      color:var(--gray-900);
      font-weight:760;
    }

    .holding-title h3 {
      color:var(--gray-900);
    }

    button.symbol,
    a {
      color:var(--primary);
    }

    button.symbol:hover,
    a:hover {
      color:var(--primary-hover);
    }

    button {
      border-radius:var(--radius-sm);
    }

    .tabs,
    .subtabs,
    .panel,
    .table-wrap,
    .placeholder,
    .cashflow-item,
    .detail,
    .coverage-month,
    .coupon-row,
    .quick-start-dialog,
    .quick-start-section,
    .confirm-dialog,
    .cookie-banner {
      border-radius:var(--radius-md);
    }

    /* Micro-interactions: restrained, fast, and performance-friendly. */
    @keyframes fadeInUp {
      from { opacity:0; transform:translateY(4px); }
      to { opacity:1; transform:translateY(0); }
    }

    @keyframes drawerIn {
      from { opacity:.96; transform:translateX(12px); }
      to { opacity:1; transform:translateX(0); }
    }

    @keyframes modalIn {
      from { opacity:0; transform:translateY(6px) scale(.985); }
      to { opacity:1; transform:translateY(0) scale(1); }
    }

    .content.active {
      animation:fadeInUp .16s ease-out;
    }

    .panel,
    .cashflow-item,
    .metric,
    .detail,
    .holding-card,
    .coverage-month,
    .coupon-row {
      transition:border-color .16s ease, background-color .16s ease, box-shadow .16s ease, transform .16s ease;
    }

    .cashflow-item:hover,
    .detail:hover,
    .coverage-month:hover,
    .coupon-row:hover {
      border-color:var(--gray-300);
      box-shadow:0 1px 2px rgba(16,24,40,.05);
      transform:translateY(-1px);
    }

    .metric.clickable:hover,
    .holding-card:hover,
    .year-block:hover {
      transform:translateY(-1px);
    }

    button:active {
      transform:translateY(1px);
    }

    button:disabled {
      cursor:not-allowed;
      opacity:.72;
      transform:none;
    }

    button.saved {
      animation:fadeInUp .14s ease-out;
    }

    tr td {
      transition:background-color .14s ease, color .14s ease;
    }

    .pill {
      transition:border-color .14s ease, background-color .14s ease, color .14s ease, box-shadow .14s ease;
    }

    .pill:hover {
      border-color:var(--gray-400);
      box-shadow:0 1px 2px rgba(16,24,40,.04);
    }

    .pill.blood:hover {
      border-color:#f97066;
    }

    .drawer-backdrop.open {
      animation:fadeInUp .14s ease-out;
    }

    .drawer-backdrop.open .drawer {
      animation:drawerIn .18s ease-out;
    }

    .confirm-backdrop.open {
      animation:fadeInUp .14s ease-out;
    }

    .confirm-backdrop.open .confirm-dialog {
      animation:modalIn .16s ease-out;
    }

    .quick-start-backdrop.open {
      animation:fadeInUp .14s ease-out;
    }

    .quick-start-backdrop.open .quick-start-dialog {
      animation:modalIn .16s ease-out;
    }

    .coupon-schedule[open] {
      animation:fadeInUp .14s ease-out;
    }

    .coupon-schedule summary {
      transition:color .14s ease;
    }

    .coupon-schedule summary:hover {
      color:var(--primary);
    }

    .help-link {
      position:relative;
    }

    .help-link::after {
      content:attr(title);
      position:absolute;
      left:50%;
      bottom:calc(100% + 8px);
      transform:translate(-50%,4px);
      width:max-content;
      max-width:220px;
      padding:6px 8px;
      border:1px solid var(--gray-300);
      border-radius:var(--radius-sm);
      background:var(--gray-900);
      color:#fff;
      font-size:var(--text-xs);
      font-weight:560;
      line-height:1.3;
      opacity:0;
      pointer-events:none;
      box-shadow:var(--shadow);
      transition:opacity .14s ease, transform .14s ease;
      z-index:60;
    }

    .help-link:hover::after,
    .help-link:focus-visible::after {
      opacity:1;
      transform:translate(-50%,0);
    }

    .placeholder {
      transition:border-color .16s ease, background-color .16s ease;
    }

    .placeholder:hover {
      border-color:var(--gray-300);
      background:#fff;
    }

    .bar-fill,
    .stacked-bar span {
      transition:width .18s ease-out;
    }

    .cookie-banner.show {
      animation:modalIn .18s ease-out;
    }

    .dashboard-grid {
      align-items:start;
      grid-template-columns:minmax(0,0.95fr) minmax(0,1.05fr);
    }

    .dashboard-column {
      display:grid;
      align-content:start;
      gap:16px;
      min-width:0;
    }

    .compact-widget {
      gap:var(--space-3);
      align-self:start;
    }

    .compact-widget h2 {
      font-size:var(--text-lg);
    }

    .compact-toolbar {
      display:flex;
      flex-wrap:wrap;
      gap:8px;
    }

    .compact-toolbar button {
      padding:7px 10px;
      height:auto;
      font-size:var(--text-xs);
    }

    .coverage-widget .coverage-grid {
      grid-template-columns:repeat(6,minmax(0,1fr));
      gap:6px;
    }

    .coverage-widget .coverage-month {
      min-height:46px;
      padding:6px;
      gap:2px;
    }

    .coverage-widget .coverage-month strong,
    .coverage-widget .coverage-month span {
      font-size:11px;
    }

    .coverage-widget .coverage-month .coverage-mark {
      width:16px;
      height:16px;
      font-size:11px;
    }

    .coverage-widget .placeholder {
      padding:9px 10px;
      font-size:var(--text-sm);
    }

    .allocation-widget .pie-row {
      gap:8px;
      align-items:start;
    }

    .allocation-widget .donut {
      width:88px;
      height:88px;
    }

    .allocation-widget .donut span {
      width:54px;
      height:54px;
      font-size:13px;
    }

    .allocation-widget .allocation-lines {
      font-size:11px;
    }

    .summary .metric.clickable {
      border-left:3px solid transparent;
    }

    .summary .metric[data-alert-filter="all"] {
      border-left-color:var(--primary);
    }

    .summary .metric[data-alert-filter="Pret sub prag"] {
      border-left-color:var(--warning);
    }

    .summary .metric[data-alert-filter="YTM peste prag"] {
      border-left-color:var(--success);
    }

    .summary .metric[data-alert-filter="Blood sub nominal"] {
      border-left-color:var(--danger);
    }

    button.danger {
      background:#fff;
      border-color:#fecaca;
      color:var(--danger);
    }

    button.danger:hover {
      background:var(--danger-soft);
      border-color:#fca5a5;
      color:var(--danger);
    }

    tbody tr:nth-child(even) td {
      background:#fbfdff;
    }

    tbody tr:hover td {
      background:#f8fafc;
    }

    html[data-theme="dark"] {
      color-scheme:dark;
      --primary:#60a5fa;
      --primary-hover:#93c5fd;
      --primary-soft:#102a52;
      --success:#34d399;
      --success-ui:#10b981;
      --success-soft:#0f2f25;
      --warning:#f59e0b;
      --warning-soft:#3a2608;
      --danger:#f87171;
      --danger-soft:#3b1217;
      --gray-25:#080c14;
      --gray-50:#0b1120;
      --gray-100:#111827;
      --gray-200:#1f2937;
      --gray-300:#334155;
      --gray-400:#64748b;
      --gray-500:#94a3b8;
      --gray-600:#cbd5e1;
      --gray-700:#dbe4ef;
      --gray-800:#edf2f7;
      --gray-900:#f8fafc;
      --bg:#080c14;
      --panel:#0f172a;
      --ink:#e5edf7;
      --muted:#94a3b8;
      --line:#1f2a3d;
      --blue:var(--primary);
      --green:var(--success-ui);
      --good:var(--success);
      --bad:var(--danger);
      --soft-blue:#102a52;
      --soft-green:#0f2f25;
      --soft-red:#3b1217;
      --shadow:0 1px 2px rgba(0,0,0,.28),0 10px 28px rgba(0,0,0,.22);
      --shadow-hover:0 6px 18px rgba(0,0,0,.28);
      --shadow-overlay:0 24px 64px rgba(0,0,0,.46);
      --ring:0 0 0 3px rgba(96,165,250,.24);
    }

    html[data-theme="dark"] body,
    html[data-theme="dark"] main {
      background:var(--bg);
      color:var(--ink);
    }

    html[data-theme="dark"] header {
      background:rgba(15,23,42,.96);
      border-bottom-color:var(--line);
      box-shadow:0 1px 0 rgba(255,255,255,.04);
    }

    html[data-theme="dark"] h1,
    html[data-theme="dark"] .year-block h2,
    html[data-theme="dark"] .stats-block h2,
    html[data-theme="dark"] .holding-title h3,
    html[data-theme="dark"] .metric .value,
    html[data-theme="dark"] .cashflow-item .value,
    html[data-theme="dark"] .detail .value {
      color:var(--gray-900);
    }

    html[data-theme="dark"] .panel,
    html[data-theme="dark"] .filters,
    html[data-theme="dark"] .tabs,
    html[data-theme="dark"] .subtabs,
    html[data-theme="dark"] .metric,
    html[data-theme="dark"] .cashflow-item,
    html[data-theme="dark"] .detail,
    html[data-theme="dark"] .coverage-month,
    html[data-theme="dark"] .coupon-row,
    html[data-theme="dark"] .table-wrap,
    html[data-theme="dark"] .drawer,
    html[data-theme="dark"] .confirm-dialog,
    html[data-theme="dark"] .quick-start-dialog,
    html[data-theme="dark"] .quick-start-section,
    html[data-theme="dark"] .cookie-banner,
    html[data-theme="dark"] .donation-card {
      background:var(--panel);
      border-color:var(--line);
      box-shadow:var(--shadow);
    }

    html[data-theme="dark"] button,
    html[data-theme="dark"] button.secondary,
    html[data-theme="dark"] select,
    html[data-theme="dark"] input {
      background:#111c2f;
      border-color:#263449;
      color:var(--ink);
      box-shadow:0 1px 2px rgba(0,0,0,.24);
    }

    html[data-theme="dark"] button:hover,
    html[data-theme="dark"] button.secondary:hover,
    html[data-theme="dark"] select:hover,
    html[data-theme="dark"] input:hover {
      background:#16243a;
      border-color:#3b4b63;
    }

    html[data-theme="dark"] button.primary {
      background:#2563eb;
      border-color:#2563eb;
      color:#fff;
    }

    html[data-theme="dark"] button.primary:hover {
      background:#1d4ed8;
      border-color:#1d4ed8;
      color:#fff;
    }

    html[data-theme="dark"] button.good {
      background:#047857;
      border-color:#047857;
      color:#fff;
    }

    html[data-theme="dark"] button.good:hover {
      background:#065f46;
      border-color:#065f46;
    }

    html[data-theme="dark"] button.danger {
      background:#2a1117;
      border-color:#7f1d1d;
      color:#fca5a5;
    }

    html[data-theme="dark"] button.danger:hover {
      background:#3b1217;
      border-color:#991b1b;
      color:#fecaca;
    }

    html[data-theme="dark"] button.symbol {
      background:transparent;
      color:var(--primary);
      box-shadow:none;
    }

    html[data-theme="dark"] button.symbol:hover,
    html[data-theme="dark"] a:hover {
      color:var(--primary-hover);
      background:transparent;
    }

    html[data-theme="dark"] .tabs button.active,
    html[data-theme="dark"] .subtabs button.active,
    html[data-theme="dark"] .segmented button.active {
      background:#e5edf7;
      border-color:#e5edf7;
      color:#0f172a;
    }

    html[data-theme="dark"] table,
    html[data-theme="dark"] .legal-page table {
      background:var(--panel);
      color:var(--gray-700);
    }

    html[data-theme="dark"] th,
    html[data-theme="dark"] .legal-page th {
      background:#111c2f;
      color:var(--muted);
      border-color:var(--line);
    }

    html[data-theme="dark"] td,
    html[data-theme="dark"] .legal-page td {
      color:var(--gray-700);
      border-color:var(--line);
    }

    html[data-theme="dark"] tbody tr:nth-child(even) td {
      background:#0c1526;
    }

    html[data-theme="dark"] tbody tr:hover td,
    html[data-theme="dark"] tr:hover td {
      background:#132139;
    }

    html[data-theme="dark"] .placeholder,
    html[data-theme="dark"] .method-section {
      background:#101a2d;
      border-color:#2a3a52;
      color:var(--muted);
    }

    html[data-theme="dark"] .placeholder:hover {
      background:#132139;
      border-color:#3b4b63;
    }

    html[data-theme="dark"] .pill {
      background:#111c2f;
      border-color:#334155;
      color:var(--gray-700);
    }

    html[data-theme="dark"] .pill.blood {
      background:var(--danger-soft);
      border-color:#7f1d1d;
      color:#fca5a5;
    }

    html[data-theme="dark"] .metric.clickable.active {
      background:#0f2038;
      border-color:#3b82f6;
      box-shadow:0 0 0 3px rgba(96,165,250,.16),var(--shadow);
    }

    html[data-theme="dark"] .coverage-month.covered {
      background:var(--success-soft);
      border-color:#14532d;
    }

    html[data-theme="dark"] .coverage-month.principal {
      background:var(--primary-soft);
      border-color:#1d4ed8;
    }

    html[data-theme="dark"] .coverage-month.empty {
      background:#0d1728;
      border-color:#334155;
    }

    html[data-theme="dark"] .coverage-month .coverage-mark,
    html[data-theme="dark"] .donut span,
    html[data-theme="dark"] .help-link {
      background:#111c2f;
      color:var(--gray-900);
      border-color:var(--line);
    }

    html[data-theme="dark"] .donut span {
      box-shadow:inset 0 0 0 1px var(--line);
    }

    html[data-theme="dark"] .bar-track,
    html[data-theme="dark"] .stacked-bar {
      background:#1f2937;
    }

    html[data-theme="dark"] .help-link:hover {
      background:var(--primary-soft);
      color:var(--primary-hover);
      border-color:#3b82f6;
    }

    html[data-theme="dark"] .help-link::after {
      background:#e5edf7;
      color:#0f172a;
      border-color:#cbd5e1;
    }

    html[data-theme="dark"] .quick-start-head,
    html[data-theme="dark"] .quick-start-actions {
      border-color:var(--line);
    }

    html[data-theme="dark"] .quick-start-note,
    html[data-theme="dark"] .quick-start-tips {
      background:#111c2f;
      border-color:var(--line);
    }

    html[data-theme="dark"] .drawer-backdrop,
    html[data-theme="dark"] .confirm-backdrop,
    html[data-theme="dark"] .quick-start-backdrop {
      background:rgba(2,6,23,.68);
    }

    html[data-theme="dark"] .support-qr {
      border-color:#334155;
      box-shadow:0 12px 32px rgba(0,0,0,.36);
    }

    @media (max-width:900px) {
      .dashboard-grid {
        grid-template-columns:1fr;
      }

      .dashboard-column {
        gap:14px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      *,
      *::before,
      *::after {
        animation-duration:.001ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.001ms !important;
        scroll-behavior:auto !important;
      }
    }



    @media (max-width:900px) { header { align-items:flex-start; flex-direction:column; } main { padding:14px; } .summary { grid-template-columns:repeat(2,minmax(0,1fr)); } .toolbar { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); } .field { min-width:0; } .detail-grid { grid-template-columns:1fr; } .quick-start-backdrop { padding:10px; align-items:start; } .quick-start-dialog { max-height:calc(100vh - 20px); } .quick-start-head { display:grid; } .quick-start-head button { justify-self:start; } .quick-start-actions { display:grid; grid-template-columns:1fr; } .cookie-banner { flex-direction:column; align-items:flex-start; } .cookie-actions { width:100%; justify-content:stretch; } .cookie-actions button { flex:1; } .app-footer { padding:16px 14px 24px; } }