:root {
        --bg: #f2ede3;
        --paper: #fffdf8;
        --ink: #1f1b17;
        --muted: #6f665e;
        --accent: #0f766e;
        --accent-soft: #d9f0ed;
        --edge: #ded2c3;
        --good: #0b6b4f;
        --bad: #9f3a2d;
        --warn: #8a4b08;
        --warn-soft: #f6dfb7;
      }
      * { box-sizing: border-box; }
      body {
        margin: 0;
        font-family: "Segoe UI", sans-serif;
        color: var(--ink);
        background:
          radial-gradient(circle at top right, rgba(197, 226, 219, 0.9), transparent 28%),
          radial-gradient(circle at bottom left, rgba(245, 202, 156, 0.55), transparent 30%),
          linear-gradient(135deg, #f8f3eb, #ebe2d1);
        min-height: 100vh;
      }
      main { max-width: 1180px; margin: 0 auto; padding: 28px 18px 60px; }
      .hero {
        background: rgba(255, 253, 248, 0.86);
        backdrop-filter: blur(10px);
        border: 1px solid var(--edge);
        border-radius: 28px;
        box-shadow: 0 24px 80px rgba(72, 52, 28, 0.14);
        padding: 26px;
      }
      .eyebrow {
        display: inline-block;
        padding: 6px 10px;
        border-radius: 999px;
        background: var(--accent-soft);
        color: var(--accent);
        font-size: 0.82rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.08em;
      }
      h1 {
        margin: 14px 0 8px;
        font: 700 clamp(2.1rem, 4.6vw, 4.7rem)/0.95 Georgia, serif;
        letter-spacing: -0.05em;
      }
      p { color: var(--muted); line-height: 1.55; }
      .toolbar, .auth {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
        align-items: center;
      }
      .toolbar { margin-top: 20px; }
      .auth { margin-top: 18px; }
      .environment-banner {
        display: flex;
        justify-content: space-between;
        gap: 16px;
        align-items: center;
        margin-top: 20px;
        padding: 14px 16px;
        border-radius: 18px;
        border: 1px solid var(--edge);
        background: rgba(255, 250, 241, 0.9);
      }
      .environment-copy {
        display: flex;
        flex-direction: column;
        gap: 4px;
      }
      .environment-label {
        color: var(--muted);
        font-size: 0.82rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }
      .environment-note { margin: 0; font-size: 0.95rem; }
      .environment-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 140px;
        padding: 10px 14px;
        border-radius: 999px;
        font-size: 0.85rem;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }
      .environment-badge.sandbox {
        background: var(--accent-soft);
        color: var(--accent);
      }
      .environment-badge.live {
        background: var(--warn-soft);
        color: var(--warn);
      }
      input {
        padding: 13px 14px;
        border-radius: 14px;
        border: 1px solid var(--edge);
        background: #fff;
        min-width: 220px;
      }
      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:disabled {
        opacity: 0.58;
        cursor: not-allowed;
      }
      a.button.secondary, button.secondary { background: var(--accent); }
      .stats {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 14px;
        margin: 22px 0 0;
      }
      .stat, .panel {
        background: rgba(255, 253, 248, 0.88);
        border: 1px solid var(--edge);
        border-radius: 22px;
        padding: 18px;
      }
      .stat .label { color: var(--muted); font-size: 0.88rem; }
      .stat .value { margin-top: 8px; font-size: 1.6rem; font-weight: 700; }
      .layout {
        display: grid;
        grid-template-columns: 1.1fr 1.3fr;
        gap: 18px;
        margin-top: 22px;
      }
      .panel.wide { grid-column: 1 / -1; }
      .account-card, .txn {
        padding: 14px 0;
        border-top: 1px solid #ebe1d5;
      }
      .account-card:first-child, .txn:first-child { border-top: 0; padding-top: 0; }
      .row {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        align-items: baseline;
      }
      .row.wrap {
        align-items: center;
        flex-wrap: wrap;
      }
      .name { font-weight: 700; }
      .meta { color: var(--muted); font-size: 0.92rem; margin-top: 4px; }
      .amount.outflow { color: var(--bad); }
      .amount.inflow { color: var(--good); }
      .sync-run {
        padding: 16px 0;
        border-top: 1px solid #ebe1d5;
      }
      .sync-run:first-child { border-top: 0; padding-top: 0; }
      .sync-run-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 10px 14px;
        margin-top: 10px;
      }
      .sync-stat {
        padding: 10px 12px;
        border-radius: 16px;
        background: #f8f1e7;
      }
      .sync-stat .label {
        color: var(--muted);
        font-size: 0.76rem;
        text-transform: uppercase;
        letter-spacing: 0.06em;
      }
      .sync-stat .value {
        margin-top: 4px;
        font-size: 0.98rem;
        font-weight: 700;
      }
      .error-text { color: var(--bad); }
      .empty { color: var(--muted); padding: 6px 0; }
      .notice {
        margin-top: 14px;
        padding: 12px 14px;
        border-radius: 14px;
        background: #f3ede0;
        color: #4c4337;
        border: 1px solid #dfd3c1;
      }
      .notice.error {
        background: #f6dfda;
        color: #7b2e21;
        border-color: #e2b3aa;
      }
      pre {
        margin-top: 18px;
        background: #1a211d;
        color: #d4f3e0;
        border-radius: 18px;
        padding: 16px;
        white-space: pre-wrap;
        overflow-wrap: anywhere;
      }
      @media (max-width: 900px) {
        .layout { grid-template-columns: 1fr; }
      }