:root {
      color-scheme:dark;
      --bg:#0f1522;
      --sidebar:#131d2d;
      --panel:#1a293c;
      --panel2:#1e3048;
      --text:#f3f2ff;
      --muted:#a8b5cd;
      --muted2:#8293ae;
      --purple:#af86f5;
      --purpleBg:#322747;
      --border:#30415c;
      --mint:#63ddaf;
      --red:#f194a8;
      --track:#30435e;
      --r:16px
    }
    * {
      box-sizing:border-box
    }
    html {
      scroll-behavior:smooth;
      background:#0f1522;
      min-height:100%;
      color-scheme:dark
    }
    body {
      margin:0;
      min-height:100vh;
      min-height:100svh;
      color:var(--text);
      background:var(--bg);
      font:14px/1.5 'Avenir Next',Avenir,Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
      -webkit-font-smoothing:antialiased
    }
    /* Paint top safe-area region when the page is allowed to extend there. */
    body::before {
      content:"";
      position:fixed;
      top:0;
      left:0;
      right:0;
      height:env(safe-area-inset-top, 0px);
      background:#0f1522;
      pointer-events:none;
      z-index:0
    }
    button,input,select {
      font:inherit
    }
    button {
      cursor:pointer
    }
    button:focus-visible,input:focus-visible,select:focus-visible {
      outline:2px solid var(--purple);
      outline-offset:3px
    }
    svg {
      display:block;
      width:19px;
      height:19px;
      stroke:currentColor;
      fill:none;
      stroke-width:1.8;
      stroke-linecap:round;
      stroke-linejoin:round;
      flex-shrink:0
    }
    .shell {
      display:grid;
      grid-template-columns:240px minmax(0,1fr);
      min-height:100vh;
      min-height:100svh;
      background:#0f1522
    }
    .sidebar {
      background:var(--sidebar);
      border-right:1px solid var(--border);
      display:flex;
      flex-direction:column;
      gap:24px;
      position:sticky;
      top:0;
      height:100vh;
      padding:31px 24px 24px
    }
    .brand {
      display:flex;
      align-items:center;
      gap:12px;
      font-weight:830;
      letter-spacing:-1px;
      font-size: calc(23px * var(--xp-text-scale, 1));
      color:#b999ff
    }
    /* Our custom xPense icon, shared with the iPhone Home Screen branding. */
    .brandmark {
      display: block;
      width: 38px;
      height: 38px;
      border-radius: 12px;
      flex-shrink: 0;
      object-fit: cover;
    }
    .brand-sub {
      margin:6px 0 0 49px;
      color:var(--muted);
      font-size:12px
    }
    .side-nav {
      display:grid;
      gap:8px;
      margin-top:16px
    }
    .nav-link,.mobile-link {
      color:#afbdd6;
      background:none;
      border:0;
      display:flex;
      align-items:center;
      gap:12px;
      font-size: calc(14px * var(--xp-text-scale, 1));
      font-weight:700;
      padding:12px 13px;
      border-radius:10px;
      text-align:left
    }
    .nav-link:hover,.mobile-link:hover {
      background:#242e43;
      color:white
    }
    .nav-link.active {
      background:var(--purpleBg);
      color:#dac5ff
    }
    .nav-link svg {
      width:19px;
      height:19px
    }
    .side-bottom {
      margin-top:auto;
      border-top:1px solid var(--border);
      padding-top:25px;
      color:var(--muted);
      font-size:12px
    }
    .side-bottom strong {
      color:#e3eafd
    }
    .side-bottom p {
      margin:8px 0 25px;
      line-height:1.7
    }
    .account {
      display:flex;
      align-items:center;
      gap:10px
    }
    .avatar {
      display:grid;
      place-items:center;
      flex-shrink:0;
      background:#29374d;
      border:1px solid #40536e;
      border-radius:50%;
      width:36px;
      height:36px;
      font-size:14px
    }
    .account small {
      display:block;
      color:var(--muted);
      font-size:11px
    }
    .main {
      min-width:0
    }
    .topbar {
      height:80px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      border-bottom:1px solid #27374e;
      padding:0 42px;
      gap:14px
    }
    .top-title {
      color:#c2cde0;
      font-weight:700;
      font-size:13px
    }
    .top-right {
      display:flex;
      align-items:center;
      gap:16px
    }
    .pill {
      border:1px solid #554269;
      background:#2e2543;
      color:#dfc9ff;
      font-weight:700;
      font-size: calc(11px * var(--xp-text-scale, 1));
      padding:6px 12px;
      border-radius:100px
    }
    .refresh {
      display:flex;
      align-items:center;
      gap:8px;
      background:none;
      border:0;
      color:#c0cbe0;
      font-size: calc(12px * var(--xp-text-scale, 1));
      padding:7px
    }
    .refresh svg {
      width:15px;
      height:15px
    }
    .content {
      max-width:1470px;
      margin:0 auto;
      padding:36px 42px 60px
    }
    .page-heading {
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:16px;
      margin-bottom:29px
    }
    .eyebrow {
      color:var(--purple);
      font-weight:900;
      letter-spacing:1.5px;
      font-size: calc(11px * var(--xp-text-scale, 1));
      text-transform:uppercase;
      margin-bottom:6px
    }
    h1,h2,h3,p {
      margin-top:0
    }
    h1 {
      font-size: calc(31px * var(--xp-text-scale, 1));
      letter-spacing:-1.25px;
      line-height:1.17;
      margin:0 0 8px;
      font-weight:850
    }
    .subtext {
      color:var(--muted);
      font-size: calc(13px * var(--xp-text-scale, 1));
      margin:0
    }
    .month-nav {
      display:flex;
      align-items:center;
      border:1px solid #514064;
      background:#221d34;
      border-radius:12px;
      min-width:247px;
      height:52px;
      padding:4px
    }
    .month-nav button {
      display:grid;
      place-items:center;
      border:0;
      background:none;
      color:#d0b8f0;
      width:35px;
      height:40px;
      border-radius:8px
    }
    .month-nav button:hover {
      background:#3d3154
    }
    .month-nav button svg {
      height:18px;
      width:18px
    }
    .month-nav input {
      color:#f4e8ff;
      min-width:0;
      width:165px;
      flex:1;
      background:transparent;
      border:0;
      text-align:center;
      font-size: calc(13px * var(--xp-text-scale, 1));
      font-weight:800;
      cursor:pointer;
      color-scheme:dark
    }
    .notice {
      padding:11px 15px;
      background:#251f35;
      border:1px solid #45385b;
      border-radius:11px;
      color:#c6bad8;
      font-size: calc(12px * var(--xp-text-scale, 1));
      margin-bottom:22px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px
    }
    .notice b {
      color:#eee2ff
    }
    .notice.error {
      background:#37232a;
      border-color:#734254;
      color:#ffb8c5
    }
    /* Connectivity loss is an expected offline state, not a red error. */
    .notice.offline {
      background:#222a3c;
      border-color:#53637e;
      color:#d6e1f4;
    }
    html[data-theme="light"] .notice.offline {
      background:#edf2fb;
      border-color:#c6d3e8;
      color:#334c70;
    }
    .stats {
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:18px;
      margin-bottom:12px
    }
    .stat {
      border-radius:var(--r);
      background:#1e2c42;
      border:1px solid #354763;
      padding:23px 25px 22px;
      min-height:157px
    }
    .stat.balance {
      background:linear-gradient(125deg,#342a4f,#24283e);
      border-color:#60497f
    }
    .stat-head {
      display:flex;
      align-items:center;
      justify-content:space-between;
      color:#c5cfe1;
      font-size: calc(12px * var(--xp-text-scale, 1));
      margin-bottom:10px
    }
    .stat-icon {
      width:32px;
      height:32px;
      display:grid;
      place-items:center;
      border-radius:9px;
      background:#1d4945;
      color:var(--mint)
    }
    .stat-icon.exp {
      background:#493640;
      color:#e8a3b0
    }
    .stat-icon.bal {
      background:#493862;
      color:#d6b1fa
    }
    .stat-icon svg {
      width:17px;
      height:17px
    }
    .stat-number {
      font-size: calc(34px * var(--xp-text-scale, 1));
      font-weight:850;
      letter-spacing:-.9px;
      line-height:1.2;
      font-variant-numeric:tabular-nums
    }
    .stat-number.income {
      color:var(--mint)
    }
    .stat-desc {
      color:var(--muted);
      font-size: calc(12px * var(--xp-text-scale, 1));
      margin-top:8px
    }
    .balance-note {
      text-align:right;
      color:var(--muted2);
      font-size: calc(11px * var(--xp-text-scale, 1));
      margin:0 1px 26px
    }
    .overview-grid {
      display:grid;
      grid-template-columns:minmax(0,1.35fr) minmax(310px,.95fr);
      gap:22px;
      align-items:start
    }
    .right-stack {
      display:grid;
      gap:22px
    }
    .panel {
      background:var(--panel);
      border:1px solid var(--border);
      border-radius:var(--r);
      overflow:hidden
    }
    .panel-header {
      padding:20px 22px 18px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px
    }
    h2 {
      font-size: calc(15px * var(--xp-text-scale, 1));
      font-weight:830;
      letter-spacing:-.2px;
      margin:0 0 2px
    }
    .panel-sub {
      margin:0;
      color:var(--muted);
      font-size:12px
    }
    .subtle-chip {
      font-size: calc(11px * var(--xp-text-scale, 1));
      font-weight:700;
      color:#c3d1e4;
      background:#2a3a4f;
      padding:4px 11px;
      border-radius:999px
    }
    .group-top {
      padding:12px 22px;
      background:#2b405b;
      font-weight:800;
      font-size: calc(12px * var(--xp-text-scale, 1));
      display:flex;
      justify-content:space-between;
      gap:12px
    }
    .group-top span {
      display:flex;
      align-items:center;
      gap:7px
    }
    .group-top b {
      font-variant-numeric:tabular-nums
    }
    .group-top .mint {
      color:var(--mint)
    }
    .table-head {
      display:grid;
      grid-template-columns:minmax(0,1fr) 65px 95px;
      padding:7px 22px;
      background:#19283d;
      color:var(--muted2);
      font-size: calc(10px * var(--xp-text-scale, 1));
      letter-spacing:.6px;
      text-transform:uppercase
    }
    .table-head span:not(:first-child) {
      text-align:right
    }
    .category-row {
      display:grid;
      grid-template-columns:minmax(0,1fr) 65px 95px;
      gap:0;
      align-items:center;
      padding:12px 22px;
      min-height:61px;
      background:var(--panel2);
      border:0;
      border-bottom:1px solid #2d4059;
      color:var(--text);
      width:100%;
      text-align:left
    }
    .category-row:hover {
      background:#263b56
    }
    .category-main {
      display:flex;
      align-items:center;
      gap:12px;
      min-width:0
    }
    .category-icon {
      width:32px;
      height:32px;
      border-radius:8px;
      display:grid;
      place-items:center;
      color:#b4a4da;
      background:#2f405b;
      flex-shrink:0
    }
    .category-icon svg {
      width:17px;
      height:17px
    }
    .category-label {
      min-width:0;
      font-size: calc(12px * var(--xp-text-scale, 1));
      font-weight:750;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis
    }
    .category-bar {
      height:3px;
      margin-top:7px;
      border-radius:4px;
      background:#344b69;
      width:126px;
      max-width:100%;
      overflow:hidden
    }
    .category-fill {
      height:100%;
      background:var(--purple);
      border-radius:4px
    }
    .category-fill.green {
      background:var(--mint)
    }
    .cat-count,.cat-total {
      text-align:right;
      font-size: calc(12px * var(--xp-text-scale, 1));
      font-variant-numeric:tabular-nums
    }
    .cat-count {
      color:var(--muted)
    }
    .cat-total {
      font-weight:800
    }
    .cat-total.green {
      color:var(--mint)
    }
    .view-all {
      color:#caa5ff;
      font-size: calc(12px * var(--xp-text-scale, 1));
      font-weight:750;
      border:0;
      background:none;
      cursor:pointer
    }
    .activity {
      display:flex;
      align-items:center;
      gap:12px;
      padding:15px 21px;
      border-top:1px solid var(--border);
      min-height:71px
    }
    .activity-icon {
      width:33px;
      height:33px;
      border-radius:8px;
      background:#293c59;
      color:#b6a6d9;
      display:grid;
      place-items:center;
      flex-shrink:0
    }
    .activity-icon svg {
      width:17px;
      height:17px
    }
    .activity-title {
      font-size: calc(12px * var(--xp-text-scale, 1));
      font-weight:800;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis
    }
    .activity-meta {
      font-size: calc(11px * var(--xp-text-scale, 1));
      color:var(--muted);
      margin-top:3px
    }
    .activity-main {
      min-width:0;
      flex:1
    }
    .activity-money {
      text-align:right;
      font-weight:850;
      font-size: calc(13px * var(--xp-text-scale, 1));
      font-variant-numeric:tabular-nums;
      white-space:nowrap
    }
    .activity-money.pos {
      color:var(--mint)
    }
    .activity-date {
      color:var(--muted);
      font-size: calc(11px * var(--xp-text-scale, 1));
      text-align:right;
      margin-top:3px
    }
    .money-panel {
      padding:20px 22px 24px
    }
    .money-panel h2 {
      margin-bottom:18px
    }
    .progress-head {
      display:flex;
      justify-content:space-between;
      color:var(--muted);
      font-size: calc(12px * var(--xp-text-scale, 1));
      margin-bottom:7px
    }
    .track {
      height:8px;
      background:var(--track);
      border-radius:20px;
      overflow:hidden;
      margin-bottom:15px
    }
    .track-inner {
      height:100%;
      border-radius:20px;
      background:var(--mint);
      max-width:100%
    }
    .track-inner.out {
      background:var(--purple)
    }
    .money-note {
      margin:10px 0 0;
      color:var(--muted);
      font-size:12px
    }
    .footer-note {
      font-size: calc(11px * var(--xp-text-scale, 1));
      color:#788ca8;
      margin-top:30px
    }
    .toolbar {
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      padding:16px 20px;
      border-bottom:1px solid var(--border)
    }
    .control {
      background:#131e2e;
      color:#d8e2f1;
      border:1px solid #39506f;
      padding:10px 12px;
      border-radius:9px;
      min-height:40px
    }
    input.control {
      min-width:180px;
      flex:1
    }
    select.control {
      min-width:145px
    }
    .tx-head,.tx-row {
      display:grid;
      grid-template-columns:minmax(115px,1fr) 110px 105px 110px 100px;
      gap:16px;
      align-items:center
    }
    .tx-head {
      font-size: calc(10px * var(--xp-text-scale, 1));
      color:var(--muted2);
      text-transform:uppercase;
      letter-spacing:1px;
      padding:12px 22px;
      background:#172438
    }
    .tx-row {
      padding:15px 22px;
      border-top:1px solid var(--border);
      font-size:12px
    }
    .tx-title {
      font-weight:800;
      font-size:13px
    }
    .tx-sub {
      color:var(--muted);
      font-size: calc(11px * var(--xp-text-scale, 1));
      margin-top:3px
    }
    .tx-number {
      font-weight:850;
      text-align:right;
      white-space:nowrap
    }
    .tx-number.pos {
      color:var(--mint)
    }
    .tx-row .date {
      white-space:nowrap;
      color:var(--muted)
    }
    .type-tag {
      display:inline-block;
      padding:3px 9px;
      border-radius:6px;
      background:#45313d;
      color:#f6acb9;
      font-size: calc(11px * var(--xp-text-scale, 1));
      font-weight:750
    }
    .type-tag.pos {
      background:#23433f;
      color:var(--mint)
    }
    .reports-grid {
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:18px
    }
    .chart-panel {
      padding:22px
    }
    .chart-panel h2 {
      margin-bottom:18px
    }
    .chart-row {
      display:grid;
      grid-template-columns:86px minmax(0,1fr) 90px;
      align-items:center;
      gap:12px;
      margin:16px 0;
      font-size:12px
    }
    .chart-row .label {
      color:#c9d5e6;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis
    }
    .chart-row .value {
      text-align:right;
      font-weight:750;
      font-variant-numeric:tabular-nums
    }
    .chart-track {
      height:12px;
      border-radius:5px;
      background:#2b3e57;
      overflow:hidden
    }
    .chart-fill {
      height:100%;
      background:var(--purple);
      border-radius:5px
    }
    .chart-fill.in {
      background:var(--mint)
    }
    .legend {
      display:flex;
      gap:18px;
      font-size: calc(12px * var(--xp-text-scale, 1));
      color:var(--muted);
      margin-bottom:10px
    }
    .dot {
      display:inline-block;
      vertical-align:middle;
      width:9px;
      height:9px;
      border-radius:50%;
      background:var(--mint);
      margin-right:6px
    }
    .dot.exp {
      background:var(--purple)
    }
    .empty {
      text-align:center;
      padding:50px 20px;
      color:var(--muted)
    }
    .empty svg {
      margin:0 auto 12px;
      width:34px;
      height:34px;
      color:var(--muted2)
    }
    .mobile-nav {
      display:none
    }
    .loading-overlay {
      opacity:.55;
      pointer-events:none
    }
    @media(max-width:1150px) {
      .sidebar {
        width:215px;
        padding:25px 16px
      }
      .shell {
        grid-template-columns:215px 1fr
      }
      .content {
        padding:28px 25px
      }
      .topbar {
        padding:0 25px
      }
      .overview-grid {
        grid-template-columns:minmax(0,1fr) minmax(290px,.8fr)
      }
      .category-bar {
        width:90px
      }
      .stat-number {
        font-size:27px
      }
      .stat {
        padding:19px
      }
    }
    @media(max-width:880px) {
      .overview-grid {
        grid-template-columns:1fr
      }
      .reports-grid {
        grid-template-columns:1fr
      }
      .right-stack {
        grid-template-columns:repeat(2,minmax(0,1fr))
      }
      .stats {
        gap:10px
      }
      .stat-number {
        font-size:26px
      }
      .stat {
        min-height:143px
      }
      .activity {
        padding:12px
      }
    }
    @media(max-width:720px) {
      .shell {
        display:block;
        padding-bottom:79px
      }
      .sidebar {
        display:none
      }
      .topbar {
        height:62px;
        padding:0 18px
      }
      .content {
        padding:25px 15px 35px
      }
      .page-heading {
        align-items:flex-start;
        flex-wrap:wrap;
        gap:18px;
        margin-bottom:18px
      }
      h1 {
        font-size:29px
      }
      .month-nav {
        width:100%;
        min-width:0
      }
      .month-nav input {
        width:auto;
        max-width:none
      }
      .stats {
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:10px
      }
      .stat {
        min-height:125px;
        padding:16px;
        border-radius:12px
      }
      .stat.balance {
        grid-column:1/-1;
        min-height:112px
      }
      .stat-head {
        margin-bottom:8px
      }
      .stat-number {
        font-size:25px
      }
      .stat-desc {
        font-size:11px
      }
      .balance-note {
        text-align:left;
        margin-bottom:20px
      }
      .right-stack {
        grid-template-columns:1fr
      }
      .panel-header {
        padding:17px 15px
      }
      .category-row {
        padding:11px 14px;
        grid-template-columns:minmax(0,1fr) 36px 83px
      }
      .group-top {
        padding:10px 14px
      }
      .table-head {
        padding:6px 14px;
        grid-template-columns:minmax(0,1fr) 36px 83px
      }
      .category-main {
        gap:9px
      }
      .category-bar {
        width:90px
      }
      .activity {
        padding:12px 14px
      }
      .money-panel {
        padding:17px
      }
      .notice {
        align-items:start
      }
      .top-title {
        font-size:12px
      }
      .top-right {
        gap:4px
      }
      .mobile-nav {
        display:grid;
        grid-template-columns:repeat(3,1fr);
        position:fixed;
        bottom:0;
        left:0;
        right:0;
        padding:8px 6px calc(8px + env(safe-area-inset-bottom));
        z-index:20;
        background:#162033;
        border-top:1px solid #35445d;
        box-shadow:0 -5px 18px #0003
      }
      .mobile-link {
        display:grid;
        justify-items:center;
        gap:3px;
        font-size: calc(10px * var(--xp-text-scale, 1));
        border-radius:8px;
        padding:6px 2px
      }
      .mobile-link svg {
        width:19px;
        height:19px
      }
      .mobile-link.active {
        color:#d8baff;
        background:#332949
      }
      .tx-head {
        display:none
      }
      .tx-row {
        grid-template-columns:minmax(0,1fr) auto;
        gap:8px
      }
      .tx-row .date {
        grid-column:1;
        grid-row:2
      }
      .tx-row .type-cell {
        grid-column:2;
        grid-row:2;
        text-align:right
      }
      .tx-row .tx-number {
        grid-column:2;
        grid-row:1
      }
      .tx-row .category-col {
        display:none
      }
      .toolbar {
        padding:12px
      }
      .control,select.control,input.control {
        width:100%;
        flex:1 1 160px
      }
      .chart-row {
        grid-template-columns:65px minmax(0,1fr) 82px;
        gap:7px
      }
      .chart-panel {
        padding:16px
      }
    }
    @media(min-width:1500px) {
      .content {
        max-width:1450px
      }
      .stat {
        min-height:160px
      }
    }
    @media(prefers-reduced-motion:reduce) {
      html {
        scroll-behavior:auto
      }
    }

    /* ================================================================
       APPEARANCE — LIGHT / DARK / SYSTEM (xPense v4)
       CSS only affects the app iframe; Google's outer white region is
       outside our control. The dark "bridge" softens that visual seam.
       ================================================================ */
    :root {
      --white-line: rgba(255, 255, 255, .24);
    }

    html,
    body,
    .shell {
      background: var(--bg);
    }

    body::before {
      background: var(--bg);
    }

    .theme-switch {
      display: inline-flex;
      align-items: center;
      gap: 2px;
      padding: 3px;
      border: 1px solid var(--border);
      border-radius: 999px;
      background: var(--purpleBg);
      flex-shrink: 0;
    }

    .theme-option {
      display: grid;
      place-items: center;
      width: 30px;
      height: 30px;
      border: 0;
      border-radius: 999px;
      color: var(--muted);
      background: transparent;
      font-size: calc(15px * var(--xp-text-scale, 1));
      line-height: 1;
      font-weight: 800;
    }

    .theme-option[aria-pressed="true"] {
      color: #fff;
      background: #7750d6;
      box-shadow: 0 1px 7px #0003;
    }

    /* DARK — silver seams echo the bright iOS chrome above the iframe. */
    html[data-theme="dark"] {
      color-scheme: dark;
    }

    /*
     * DARK MODE — CLEAN WHITE HEADER, FADE BELOW THE DIVIDER
     * The top bar remains pale. The fade is drawn across the entire content
     * width by .main::before, starting immediately BELOW the header border.
     * Google's outer iPhone status region cannot be styled by this iframe.
     */
    html[data-theme="dark"] {
      color-scheme: dark;
    }

    html[data-theme="dark"] .main {
      position: relative;
      isolation: isolate;
      background: #0f1522;
    }

    html[data-theme="dark"] .main::before {
      content: "";
      position: absolute;
      z-index: 0;
      pointer-events: none;
      top: 80px; /* Desktop: start just beneath the header divider */
      left: 0;
      right: 0;
      height: 300px;
      background: linear-gradient(
        180deg,
        #1b1b1b 0px,
        #1b1b1b 55px,
        #1b1c22 110px,
        #151b28 205px,
        #0f1522 300px
      );
    }

    html[data-theme="dark"] .content {
      position: relative;
      z-index: 1;
      background: transparent;
    }

    html[data-theme="dark"] .topbar {
      position: relative;
      z-index: 2;
      background: linear-gradient(
        180deg,
        #ffffff 0%,
        #faf8ff 52%,
        #f0eaf8 100%
      );
      border-top: 0;
      border-bottom: 1px solid #d5cce1;
    }

    html[data-theme="dark"] .top-title,
    html[data-theme="dark"] .refresh {
      color: #241c3c;
    }

    html[data-theme="dark"] .topbar .pill {
      background: rgba(58, 35, 91, 0.12);
      color: #382258;
      border-color: rgba(71, 44, 112, 0.35);
    }

    html[data-theme="dark"] .topbar .theme-switch {
      background: rgba(49, 33, 76, 0.16);
      border-color: rgba(72, 47, 109, 0.35);
    }

    html[data-theme="dark"] .topbar .theme-option:not([aria-pressed="true"]) {
      color: #37284f;
    }

    /* Keep the dividing line crisp: no secondary header overlay. */
    html[data-theme="dark"] .topbar::after {
      display: none;
    }


    html[data-theme="dark"] .sidebar {
      border-right-color: var(--white-line);
    }

    html[data-theme="dark"] .stat,
    html[data-theme="dark"] .panel,
    html[data-theme="dark"] .month-nav,
    html[data-theme="dark"] .notice {
      border-color: rgba(231, 223, 255, .30);
    }

    html[data-theme="dark"] .stat.balance {
      border-color: rgba(232, 207, 255, .48);
    }

    html[data-theme="dark"] .mobile-nav {
      border-top-color: rgba(255, 255, 255, .42);
      box-shadow: 0 -2px 24px #090d18aa;
    }

    /* LIGHT — designed to visually blend with the Google white strip. */
    html[data-theme="light"] {
      color-scheme: light;
      --bg: #f8f7fc;
      --sidebar: #fff;
      --panel: #fff;
      --panel2: #f3effb;
      --text: #251d37;
      --muted: #716985;
      --muted2: #857d96;
      --purple: #7543d2;
      --purpleBg: #f0e8fd;
      --border: #e3ddea;
      --mint: #078367;
      --red: #b94f61;
      --track: #e9e3f2;
    }

    html[data-theme="light"] .topbar {
      background: #fff;
      border-top: 1px solid #f2edf8;
      border-bottom: 1px solid var(--border);
    }

    html[data-theme="light"] .top-title,
    html[data-theme="light"] .refresh,
    html[data-theme="light"] .stat-head,
    html[data-theme="light"] .stat-desc,
    html[data-theme="light"] .stat-number,
    html[data-theme="light"] .category-label,
    html[data-theme="light"] .activity-title,
    html[data-theme="light"] .tx-title,
    html[data-theme="light"] .tx-number,
    html[data-theme="light"] .chart-row .label {
      color: var(--text);
    }

    html[data-theme="light"] .sidebar,
    html[data-theme="light"] .stat,
    html[data-theme="light"] .panel {
      background: #fff;
      border-color: var(--border);
    }

    html[data-theme="light"] .stat.balance {
      background: linear-gradient(135deg, #f1eafd, #eee9fa);
      border-color: #d9c8f3;
    }

    html[data-theme="light"] .stat-number.income,
    html[data-theme="light"] .activity-money.pos,
    html[data-theme="light"] .tx-number.pos,
    html[data-theme="light"] .cat-total.green {
      color: #087f61;
    }

    html[data-theme="light"] .brand { color: #7140c8; }
    html[data-theme="light"] .nav-link,
    html[data-theme="light"] .mobile-link { color: #6f6883; }
    html[data-theme="light"] .nav-link:hover,
    html[data-theme="light"] .mobile-link:hover { color: #46267b; background: #f4effc; }
    html[data-theme="light"] .nav-link.active,
    html[data-theme="light"] .mobile-link.active { color: #713bcc; background: #eee5fb; }
    html[data-theme="light"] .pill { background: #f3ebfc; color: #6e3bb4; border-color: #dfcaef; }
    html[data-theme="light"] .month-nav,
    html[data-theme="light"] .notice { background: #f1ebfa; border-color: #dfd2ee; color: #5b4e72; }
    html[data-theme="light"] .month-nav input { color: #302044; color-scheme: light; }
    html[data-theme="light"] .month-nav button { color: #7543d2; }
    html[data-theme="light"] .month-nav button:hover { background: #e6d9f9; }
    html[data-theme="light"] .notice b { color: #352349; }
    html[data-theme="light"] .stat-icon { background: #e0f6f0; color: #088066; }
    html[data-theme="light"] .stat-icon.exp { background: #fde9ec; color: #ba5061; }
    html[data-theme="light"] .stat-icon.bal { background: #e7d9fa; color: #7346c3; }
    html[data-theme="light"] .subtle-chip,
    html[data-theme="light"] .category-icon,
    html[data-theme="light"] .activity-icon { background: #f1eafb; color: #7253a2; }
    html[data-theme="light"] .group-top { background: #ece4f8; color: #392653; }
    html[data-theme="light"] .table-head { background: #f9f7fc; color: #746988; }
    html[data-theme="light"] .category-row { background: #fff; border-color: #eee9f4; }
    html[data-theme="light"] .category-row:hover { background: #faf7fe; }
    html[data-theme="light"] .category-bar,
    html[data-theme="light"] .track,
    html[data-theme="light"] .chart-track { background: #eae4f1; }
    html[data-theme="light"] .activity,
    html[data-theme="light"] .tx-row { border-color: #ebe5f1; background: #fff; }
    html[data-theme="light"] .control { background: #fff; border-color: #ddd3e7; color: #251d37; }
    html[data-theme="light"] .tx-head { background: #f9f7fc; color: #796d89; }
    html[data-theme="light"] .type-tag { color: #995061; background: #fceaf0; }
    html[data-theme="light"] .type-tag.pos { color: #08785d; background: #e3f7ef; }
    html[data-theme="light"] .mobile-nav { background: #fff; border-top-color: #ded6e9; box-shadow: 0 -3px 22px #4a28751a; }
    html[data-theme="light"] .theme-option[aria-pressed="true"] { background: #7543d2; color: #fff; }
    html[data-theme="light"] .side-bottom { border-color: var(--border); }

    @media (max-width: 720px) {
      .top-right { gap: 6px; }
      .theme-switch { padding: 2px; }
      .theme-option { width: 27px; height: 28px; font-size: calc(14px * var(--xp-text-scale, 1)); }
      .refresh { gap: 4px; }
      .refresh svg { width: 18px; height: 18px; }
      /* The automatic refresh stays active even when its label is hidden. */
      .refresh { font-size: 0; }
    }

    /* Mobile header is 62px tall. Begin gradient directly below its divider. */
    @media (max-width: 720px) {
      html[data-theme="dark"] .main::before {
        top: 62px; /* Mobile: start immediately after the header divider */
        height: 260px;
        background: linear-gradient(
          180deg,
          #1b1b1b 0px,
          #1b1b1b 50px,
          #1b1c22 105px,
          #151b28 180px,
          #0f1522 260px
        );
      }

      html[data-theme="dark"] .top-title,
      html[data-theme="dark"] .refresh {
        color: #302547;
      }
    }
  
    /* ============================================================
       v7 — REFINED MOBILE CARDS AND FACEBOOK-LIKE NAVIGATION
       ============================================================ */

    /* Rounded, softly elevated surfaces on both themes. */
    .stat,
    .panel {
      border-radius: 18px;
      overflow: hidden;
    }

    .stat {
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.07);
    }

    @media (max-width: 720px) {
      /* Smaller summary cards so the first screen shows more content. */
      .stats {
        gap: 8px;
        margin-bottom: 9px;
      }

      .stat {
        min-height: 0;
        padding: 12px 13px;
        border-radius: 16px;
      }

      .stat.balance {
        min-height: 0;
        padding: 13px 15px;
      }

      .stat-head {
        margin-bottom: 5px;
        font-size: calc(11px * var(--xp-text-scale, 1));
      }

      .stat-icon {
        width: 28px;
        height: 28px;
        border-radius: 9px;
      }

      .stat-icon svg {
        width: 15px;
        height: 15px;
      }

      .stat-number {
        font-size: clamp(19px, 5.6vw, 25px);
        letter-spacing: -0.7px;
        overflow-wrap: anywhere;
      }

      .stat-desc {
        font-size: calc(10px * var(--xp-text-scale, 1));
        margin-top: 5px;
      }

      .panel,
      .notice,
      .month-nav {
        border-radius: 16px;
      }

      /* Hide only the fixed bottom navigation while scrolling down.
         It comes back on upward scroll, like a social-media app. */
      .mobile-nav {
        transition: transform 230ms ease, opacity 230ms ease;
        will-change: transform;
      }

      .mobile-nav.is-hidden-on-scroll {
        transform: translateY(110%);
        opacity: 0;
        pointer-events: none;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .mobile-nav {
        transition: none;
      }
    }


    /* v10 — English / Spanish / Romanian interface only. */
    .xp-language-control {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      border: 1px solid var(--border);
      border-radius: 999px;
      padding: 5px 9px;
      background: var(--purpleBg);
      color: var(--text);
      font-size: calc(13px * var(--xp-text-scale, 1));
    }
    .xp-language-control select {
      color: inherit;
      background: transparent;
      border: 0;
      outline-offset: 3px;
      font: inherit;
      font-weight: 700;
      cursor: pointer;
    }
    /* Readable language codes on the purple control in every theme. */
    .xp-language-control select {
      color: #f8f4ff;
      -webkit-text-fill-color: #f8f4ff;
      color-scheme: dark;
    }

    .xp-language-control select option {
      color: #ffffff;
      background-color: #30243e;
    }

    html[data-theme="light"] .xp-language-control select {
      color: #302342;
      -webkit-text-fill-color: #302342;
      color-scheme: light;
    }

    html[data-theme="light"] .xp-language-control select option {
      color: #302342;
      background-color: #ffffff;
    }
    @media (max-width: 720px) {
      .xp-language-control { padding: 5px 6px; }
      .xp-language-control span { display: none; }
    }

    /* v9 — transaction editing, mobile-first */
    .xp-add {
      position: fixed;
      right: 24px;
      bottom: 26px;
      z-index: 60;
      background: #7546d8;
      color: white;
      border: 1px solid #b08bf0;
      border-radius: 999px;
      padding: 13px 20px;
      box-shadow: 0 12px 28px #0006;
      font-weight: 800;
      cursor: pointer;
    }
    .tx-row { grid-template-columns: minmax(115px,1fr) 100px 75px 85px 105px auto; }
    .xp-row-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
    .xp-row-actions button {
      border: 1px solid var(--border);
      border-radius: 10px;
      background: var(--purpleBg);
      color: var(--text);
      padding: 7px 10px;
      cursor: pointer;
      font-size: calc(12px * var(--xp-text-scale, 1));
    }
    .xp-dialog {
      width: min(440px, calc(100% - 24px));
      max-height: min(90dvh, 720px);
      border: 1px solid var(--border);
      border-radius: 20px;
      padding: 0;
      background: var(--panel);
      color: var(--text);
      box-shadow: 0 20px 80px #0009;
    }
    .xp-dialog::backdrop { background: #080911b8; backdrop-filter: blur(4px); }
    .xp-form { display: grid; gap: 15px; padding: 22px; }
    .xp-form-head { display: flex; align-items: center; justify-content: space-between; }
    .xp-form-head h2 { margin: 0; }
    .xp-form-head button { background: none; border: 0; color: var(--text); cursor: pointer; }
    .xp-form label { display: grid; gap: 6px; font-size: calc(13px * var(--xp-text-scale, 1)); color: var(--muted); }
    .xp-form input, .xp-form select {
      width: 100%; min-height: 43px; border: 1px solid var(--border);
      border-radius: 11px; padding: 10px; background: var(--bg); color: var(--text);
      font: inherit;
    }
    .xp-form-actions { display: flex; justify-content: flex-end; gap: 10px; }
    .xp-form-actions button { border-radius: 10px; padding: 11px 15px; font-weight: 700; cursor: pointer; }
    .xp-primary { background: #7546d8; border: 1px solid #7546d8; color: white; }
    .xp-secondary { background: transparent; border: 1px solid var(--border); color: var(--text); }
    .xp-form-message { min-height: 1.1em; color: var(--red); font-size: calc(13px * var(--xp-text-scale, 1)); }
    @media(max-width: 720px) {
      .xp-add { right: 15px; bottom: 98px; padding: 11px 14px; }
      .tx-row { grid-template-columns: minmax(0,1fr) auto; }
      .xp-row-actions { grid-column: 1 / -1; grid-row: 3; justify-content: flex-start; }
    }

    /* ================================================================
       xPense v11 — compact connection status, never a button or pill
       ================================================================ */
    #modeBadge.connection-status {
      display: inline-block;
      flex: 0 0 auto;
      width: auto;
      min-width: 0;
      max-width: none;
      margin: 0;
      padding: 0;
      border: 0 !important;
      border-radius: 0;
      background: transparent !important;
      box-shadow: none;
      white-space: nowrap;
      line-height: 1.3;
      font-size: calc(12px * var(--xp-text-scale, 1));
      font-weight: 750;
      letter-spacing: 0;
    }

    #modeBadge.connection-status[data-connection="connected"] {
      color: #16885c !important;
    }

    #modeBadge.connection-status[data-connection="disconnected"] {
      color: #c0394b !important;
    }

    #modeBadge.connection-status[data-connection="loading"] {
      color: #987000 !important;
    }

    #modeBadge.connection-status[data-connection="sample"] {
      color: #6c59a2 !important;
    }

    @media (max-width: 600px) {
      #modeBadge.connection-status {
        font-size: calc(11px * var(--xp-text-scale, 1));
      }
      .top-right {
        gap: 8px;
      }
    }


    /* ==========================================================
       v12 SETTINGS / ACCESSIBILITY — frontend-only preferences
       ========================================================== */
    .xp-settings-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 18px;
    }
    .xp-settings-card {
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: 18px;
      padding: 22px;
      min-width: 0;
    }
    .xp-settings-card h2 {
      margin-bottom: 8px;
      font-size: calc(19px * var(--xp-text-scale, 1));
    }
    .xp-setting-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 14px;
      padding: 15px 0;
      border-bottom: 1px solid var(--border);
    }
    .xp-setting-row:last-child { border-bottom: 0; }
    .xp-setting-row label { color: var(--text); font-weight: 700; }
    .xp-setting-row p { color: var(--muted); margin: 4px 0 0; font-size: calc(12px * var(--xp-text-scale, 1)); }
    .xp-setting-slider { width: min(100%, 230px); accent-color: #8b5cf6; }
    .xp-setting-value { min-width: 3.5em; text-align: right; color: var(--muted); }
    .xp-setting-select {
      min-width: 118px;
      border: 1px solid var(--border);
      border-radius: 10px;
      background: var(--panel2);
      color: var(--text);
      padding: 9px 12px;
      font: inherit;
    }
    .xp-setting-reset {
      padding: 11px 15px;
      border: 1px solid var(--border);
      background: var(--panel2);
      color: var(--text);
      border-radius: 12px;
      font: inherit;
      cursor: pointer;
    }
    .xp-settings-note { color: var(--muted); font-size: calc(12px * var(--xp-text-scale, 1)); }
    html.xp-reduced-motion *,
    html.xp-reduced-motion *::before,
    html.xp-reduced-motion *::after {
      animation-duration: 0.01ms !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
    @media (max-width: 780px) {
      .xp-settings-grid { grid-template-columns: 1fr; }
      .xp-settings-card { padding: 17px; }
      .xp-setting-slider { width: 175px; }
    }

    /* ================================================================
       xPense v13 — unified language and appearance controls
       Both controls share height, surface, border, radius and alignment.
       ================================================================ */
    :root {
      --xp-toolbar-height: 40px;
      --xp-toolbar-bg: #f0ebf8;
      --xp-toolbar-border: #b6a6cc;
      --xp-toolbar-ink: #302342;
    }

    .topbar .xp-language-control,
    .topbar .theme-switch {
      box-sizing: border-box;
      height: var(--xp-toolbar-height);
      min-height: var(--xp-toolbar-height);
      border: 1px solid var(--xp-toolbar-border);
      border-radius: 999px;
      background: var(--xp-toolbar-bg);
      color: var(--xp-toolbar-ink);
      display: inline-flex;
      align-items: center;
      flex: 0 0 auto;
      vertical-align: middle;
      margin: 0;
    }

    .topbar .xp-language-control {
      gap: 7px;
      padding: 0 12px;
    }

    .topbar .xp-language-control select {
      border: 0;
      background: transparent;
      color: var(--xp-toolbar-ink) !important;
      -webkit-text-fill-color: var(--xp-toolbar-ink) !important;
      color-scheme: light;
      font-weight: 700;
      min-width: 38px;
      height: 100%;
      padding: 0;
    }

    .topbar .xp-language-control select option {
      background: #ffffff;
      color: #302342;
    }

    .topbar .theme-switch {
      gap: 2px;
      padding: 3px;
    }

    .topbar .theme-option {
      box-sizing: border-box;
      height: 32px;
      width: 32px;
      min-height: 32px;
      line-height: 1;
      display: grid;
      place-items: center;
    }

    .topbar .theme-option:not([aria-pressed="true"]) {
      color: var(--xp-toolbar-ink);
    }

    .topbar .theme-option[aria-pressed="true"] {
      background: #7546d8;
      color: #ffffff;
    }

    @media (max-width: 720px) {
      :root { --xp-toolbar-height: 36px; }

      .topbar .xp-language-control { padding: 0 8px; gap: 4px; }
      .topbar .theme-switch { padding: 2px; }
      .topbar .theme-option {
        height: 30px;
        width: 30px;
        min-height: 30px;
      }
    }


    /* ================================================================
       xPense v14 — four equally sized mobile navigation tabs
       ================================================================ */
    @media (max-width: 720px) {
      .mobile-nav {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-template-rows: minmax(0, 1fr);
        align-items: stretch;
        column-gap: 4px;
        row-gap: 0;
        box-sizing: border-box;
        width: 100%;
        min-width: 0;
        padding: 7px 8px calc(7px + env(safe-area-inset-bottom, 0px));
      }

      .mobile-link {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        box-sizing: border-box;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        min-height: 55px;
        margin: 0;
        padding: 7px 2px;
        border-radius: 13px;
        font-size: clamp(9px, calc(10px * var(--xp-text-scale, 1)), 12px);
        line-height: 1.2;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .mobile-link svg {
        flex: 0 0 auto;
        width: 19px;
        height: 19px;
      }

      .mobile-link.active {
        border-radius: 13px;
      }

      /* The add button stays above the tabs, including the iPhone safe area. */
      .xp-add {
        right: 14px;
        bottom: calc(89px + env(safe-area-inset-bottom, 0px));
        max-width: calc(100vw - 28px);
        padding: 11px 14px;
      }
    }

/* xPense staging: remove the pale strip from the DARK dashboard header.
   Keep the language, appearance, connection, and refresh controls accessible. */
html[data-theme="dark"] .topbar {
  background: linear-gradient(180deg, #151b28 0%, #161b27 100%);
  border-top: 0;
  border-bottom: 1px solid rgba(231, 223, 255, .17);
}
html[data-theme="dark"] .top-title,
html[data-theme="dark"] .refresh { color: #dce3f2; }
html[data-theme="dark"] .topbar .xp-language-control,
html[data-theme="dark"] .topbar .theme-switch {
  background: #302740;
  border-color: #594773;
  color: #f1e9ff;
}
html[data-theme="dark"] .topbar .xp-language-control select {
  color: #f1e9ff !important;
  -webkit-text-fill-color: #f1e9ff !important;
  color-scheme: dark;
}
html[data-theme="dark"] .topbar .xp-language-control select option {
  background: #302740;
  color: #f1e9ff;
}
html[data-theme="dark"] .topbar .theme-option:not([aria-pressed="true"]) { color: #dfd2f2; }
html[data-theme="dark"] #modeBadge[data-connection="connected"] { color: #64dca8 !important; }
html[data-theme="dark"] #modeBadge[data-connection="loading"] { color: #edbf67 !important; }
html[data-theme="dark"] #modeBadge[data-connection="disconnected"] { color: #f5a7a7 !important; }

/* xPense v17 mobile PWA persistent toolbar patch */
@media (max-width: 720px) {
  /* Keep account/status controls visible when the document scrolls. */
  html[data-theme="dark"] .topbar,
  html[data-theme="light"] .topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    width: 100%;
    min-width: 0;
    background: var(--sidebar);
    box-shadow: 0 1px 0 var(--border);
  }
  .topbar .top-right {
    min-width: 0;
    flex-wrap: nowrap;
    margin-left: auto;
  }
}
@media (max-width: 600px) {
  /* The mobile toolbar gives scarce width to functional controls. */
  .topbar .top-title { display: none; }
  .topbar .top-right { width: 100%; justify-content: space-between; gap: 4px; }
  .topbar .connection-status { white-space: nowrap; }
}
@media (max-width: 720px) and (display-mode: standalone) {
  /* The installed iOS PWA extends beneath the system status bar. */
  html[data-theme="dark"] .topbar,
  html[data-theme="light"] .topbar {
    height: calc(62px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
  }
}


/* xPense iPhone UI polish: 16px form controls, viewport stability, and fixed toolbar */
@media (max-width: 720px) {
  /* Keep the app within the device viewport even after a keyboard opens. */
  html, body { width: 100%; max-width: 100%; overflow-x: clip; }
  .shell, .main, .content, #view, .page-heading, .overview-grid,
  .stats, .reports-grid, .right-stack, .panel, .notice {
    min-width: 0;
    max-width: 100%;
  }
  .content { width: 100%; }
  .page-heading > *, .stats > *, .overview-grid > *, .right-stack > * { min-width: 0; }
  .month-nav { max-width: 100%; }
  .month-nav input { min-width: 0; max-width: 100%; }

  /* Input font >= 16px prevents Safari's automatic focus zoom, without
     disabling pinch-to-zoom or changing the viewport meta tag. */
  input, select, textarea, .xp-form input, .xp-form select, .xp-form textarea,
  .xp-language-control select, .month-nav input {
    font-size: max(16px, calc(16px * var(--xp-text-scale, 1))) !important;
  }

  /* A fixed toolbar is reliable in installed iOS PWAs even when the page
     scrolls; reserve its exact height so it never covers the content. */
  .topbar, html[data-theme="dark"] .topbar, html[data-theme="light"] .topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    width: 100%;
    height: calc(62px + env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) 12px 0;
    background: var(--sidebar);
  }
  .main { padding-top: calc(62px + env(safe-area-inset-top, 0px)); }
  .topbar .top-title { display: none; }
  .topbar .top-right { width: 100%; min-width: 0; justify-content: space-between; gap: 4px; }
  .topbar .xp-language-control, .topbar .theme-switch { flex-shrink: 0; }
  .topbar #modeBadge { min-width: 0; max-width: 112px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar .refresh { flex-shrink: 0; }
  .xp-dialog { max-width: calc(100vw - 24px); }
  .xp-form { min-width: 0; }
  .xp-form label, .xp-form input, .xp-form select { min-width: 0; }
}
@media (max-width: 360px) {
  .topbar .top-right { gap: 2px; }
  .topbar #modeBadge { max-width: 82px; }
  .topbar .theme-option { width: 25px; }
}