:root {
        --bg: #efe8dc;
        --paper: rgba(255, 252, 246, 0.95);
        --ink: #1e1a16;
        --muted: #6c655d;
        --accent: #0d7a70;
        --accent-soft: #d7f1ed;
        --edge: #ddd0c0;
        --highlight: #9c4f16;
        --highlight-soft: #f4ddc2;
        --good: #166534;
        --good-soft: #dcf4e4;
        --warn: #9a6700;
        --warn-soft: #f9edc8;
        --danger: #9f3a2d;
        --danger-soft: #f8dfdb;
        --slate: #35506b;
        --slate-soft: #ddeaf6;
      }
      * { box-sizing: border-box; }
      body {
        margin: 0;
        font-family: "Segoe UI", sans-serif;
        color: var(--ink);
        background:
          radial-gradient(circle at top left, rgba(13, 122, 112, 0.14), transparent 28%),
          radial-gradient(circle at bottom right, rgba(197, 116, 39, 0.16), transparent 30%),
          linear-gradient(135deg, #f7f1e7, #eadfcd);
        min-height: 100vh;
      }
      main { max-width: 1320px; margin: 0 auto; padding: 30px 18px 60px; }
      .hero, .panel, .detail-shell {
        background: var(--paper);
        border: 1px solid var(--edge);
        border-radius: 28px;
        box-shadow: 0 20px 70px rgba(69, 51, 30, 0.12);
      }
      .hero { padding: 28px; }
      .panel, .detail-shell { padding: 20px; }
      .eyebrow {
        display: inline-block;
        padding: 6px 10px;
        border-radius: 999px;
        background: var(--highlight-soft);
        color: var(--highlight);
        font-size: 0.82rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }
      h1 {
        margin: 14px 0 10px;
        font: 700 clamp(2.1rem, 4vw, 4.2rem)/0.95 Georgia, serif;
        letter-spacing: -0.05em;
      }
      p { color: var(--muted); line-height: 1.58; }
      .hero-grid, .workspace-grid, .detail-grid, .stats {
        display: grid;
        gap: 18px;
      }
      .hero-grid { grid-template-columns: 1.15fr 0.85fr; margin-top: 22px; }
      .workspace-grid { grid-template-columns: minmax(0, 1fr) minmax(280px, 320px); margin-top: 22px; align-items: start; }
      .detail-grid { grid-template-columns: 1fr 1fr; margin-top: 18px; }
      .stats { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-top: 18px; }
      .workspace-nav {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        margin-top: 18px;
      }
      .tab-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 10px 14px;
        border-radius: 999px;
        border: 1px solid var(--edge);
        background: rgba(255, 255, 255, 0.78);
        color: var(--ink);
        font-size: 0.88rem;
        font-weight: 700;
        text-decoration: none;
      }
      .tab-link.active {
        background: var(--accent-soft);
        border-color: rgba(13, 122, 112, 0.28);
        color: var(--accent);
      }
      .row {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        align-items: baseline;
      }
      .actions, .chip-row {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        align-items: center;
      }
      .actions { margin-top: 16px; }
      .meta { color: var(--muted); font-size: 0.92rem; margin-top: 4px; }
      .notice {
        margin-top: 14px;
        padding: 12px 14px;
        border-radius: 14px;
        background: #f4ede0;
        border: 1px solid var(--edge);
        color: #4c4338;
      }
      .notice.error {
        background: #f7dfdb;
        color: #7b2e21;
        border-color: #e2b3aa;
      }
      .mini-stat {
        padding: 14px;
        border-radius: 18px;
        border: 1px solid #e7dbcc;
        background: #fcf8f1;
        position: relative;
        overflow: hidden;
      }
      .mini-stat::before {
        content: "";
        position: absolute;
        inset: 0 auto 0 0;
        width: 5px;
        background: #d8c7b5;
      }
      .mini-stat.review { background: #fff4f1; }
      .mini-stat.review::before { background: var(--danger); }
      .mini-stat.expected { background: #f5f1eb; }
      .mini-stat.expected::before { background: #8b7b69; }
      .mini-stat.close { background: #fff7e6; }
      .mini-stat.close::before { background: var(--warn); }
      .mini-stat.aligned { background: #f1faf4; }
      .mini-stat.aligned::before { background: var(--good); }
      .mini-stat.transfer { background: #eef7f6; }
      .mini-stat.transfer::before { background: var(--accent); }
      .mini-stat.info { background: #f2f7fc; }
      .mini-stat.info::before { background: var(--slate); }
      .mini-stat .label {
        color: var(--muted);
        font-size: 0.82rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
      }
      .mini-stat .value {
        margin-top: 8px;
        font-size: 1.22rem;
        font-weight: 700;
      }
      .list-item {
        padding: 12px 0;
        border-top: 1px solid #ece2d5;
      }
      .list-item:first-child { border-top: 0; padding-top: 0; }
      .name { font-weight: 700; }
      .chip {
        display: inline-flex;
        align-items: center;
        border-radius: 999px;
        padding: 6px 10px;
        background: #f1e6d8;
        color: #5b4939;
        font-size: 0.78rem;
        font-weight: 700;
      }
      .chip.selected {
        background: var(--accent-soft);
        color: var(--accent);
      }
      .chip.status-needs-review {
        background: var(--danger-soft);
        color: var(--danger);
      }
      .chip.status-expected-only {
        background: #f2eee8;
        color: #675c4d;
      }
      .chip.status-close {
        background: var(--warn-soft);
        color: #7d5600;
      }
      .chip.status-aligned {
        background: var(--good-soft);
        color: var(--good);
      }
      .chip.metric-variance {
        background: #f8ebe5;
        color: #7d362b;
      }
      .chip.metric-expected,
      .chip.metric-observed {
        background: #f2f7fc;
        color: var(--slate);
      }
      .chip.metric-volume {
        background: #eef7f6;
        color: var(--accent);
      }
      .queue-item.active {
        margin: 0 -6px;
        padding: 12px 10px;
        border-radius: 18px;
        background: #f7fbfa;
      }
      .queue-item {
        border-left: 5px solid #d8c7b5;
        padding-left: 14px;
      }
      .queue-item.status-needs-review { border-left-color: var(--danger); }
      .queue-item.status-expected-only { border-left-color: #8b7b69; }
      .queue-item.status-close { border-left-color: var(--warn); }
      .queue-item.status-aligned { border-left-color: var(--good); }
      .queue-list {
        display: grid;
        gap: 12px;
      }
      .queue-item .actions { margin-top: 10px; }
      .variance-focus-shell {
        min-height: 60vh;
      }
      .variance-sidebar {
        position: sticky;
        top: 24px;
        opacity: 0.96;
      }
      .variance-sidebar-section {
        margin-top: 14px;
        border-top: 1px solid #ece2d5;
        padding-top: 12px;
      }
      .variance-sidebar-section summary {
        cursor: pointer;
        list-style: none;
        color: #5b4939;
        font-weight: 700;
        font-size: 0.85rem;
      }
      .variance-sidebar-section summary::-webkit-details-marker {
        display: none;
      }
      .variance-sidebar-section summary::after {
        content: "▾";
        margin-left: 6px;
        font-size: 0.75rem;
      }
      .variance-sidebar-section[open] summary::after {
        content: "▴";
      }
      .variance-sidebar-body {
        margin-top: 10px;
      }
      .variance-focus-actions {
        margin-bottom: 18px;
      }
      .collapsible-panel {
        margin-top: 18px;
        border: 1px solid var(--edge);
        border-radius: 18px;
        background: #fff;
        overflow: hidden;
      }
      .collapsible-panel > summary {
        list-style: none;
        cursor: pointer;
        padding: 16px 18px;
      }
      .collapsible-panel > summary::-webkit-details-marker { display: none; }
      .collapsible-panel > summary .meta { margin-top: 0; }
      .collapsible-panel > summary .row { align-items: center; }
      .collapsible-panel[open] > summary {
        border-bottom: 1px solid #ece2d5;
        background: #fcf8f1;
      }
      .collapsible-panel .panel-body {
        padding: 18px;
      }
      .empty { color: var(--muted); padding: 6px 0; }
      .amount.outflow { color: #9f3a2d; }
      .amount.inflow { color: var(--good); }
      .amount.net-outflow { color: #9f3a2d; }
      .amount.net-inflow { color: var(--good); }
      .detail-banner {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
        gap: 10px;
        margin-top: 14px;
      }
      .detail-banner .mini-stat {
        padding: 12px 14px;
      }
      .section-stack {
        display: grid;
        gap: 16px;
      }
      .debug-shell {
        margin-top: 18px;
        border: 1px solid var(--edge);
        border-radius: 18px;
        background: rgba(255, 251, 245, 0.72);
        overflow: hidden;
      }
      .debug-shell summary {
        cursor: pointer;
        padding: 10px 12px;
        font-weight: 700;
        font-size: 0.82rem;
      }
      input, select {
        width: 100%;
        padding: 13px 14px;
        border-radius: 14px;
        border: 1px solid var(--edge);
        background: #fff;
      }
      .entry-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 12px;
        margin-top: 16px;
      }
      button, a.button {
        border: 0;
        border-radius: 999px;
        padding: 13px 17px;
        font-weight: 700;
        cursor: pointer;
        text-decoration: none;
        background: var(--ink);
        color: #fff;
      }
      button.secondary, a.button.secondary { background: var(--accent); }
      a.button.alt { background: #fff; color: var(--ink); border: 1px solid var(--edge); }
      button:disabled { opacity: 0.58; cursor: not-allowed; }
      .trace-link {
        color: var(--accent);
        font-size: 0.82rem;
        font-weight: 700;
        text-decoration: none;
      }
      .ledger-tab.active {
        background: var(--accent);
        color: #fff;
      }
      pre {
        margin: 0;
        background: #1a201c;
        color: #d8f3e5;
        padding: 16px;
        white-space: pre-wrap;
        overflow-wrap: anywhere;
      }
      @media (max-width: 960px) {
        .hero-grid, .workspace-grid, .detail-grid { grid-template-columns: 1fr; }
        .variance-sidebar { position: static; top: auto; }
        .variance-focus-shell { min-height: 0; }
      }