:root {
        --bg: #F4F6F8;
        --card: #FFFFFF;
        --card-alt: #F8F9FB;
        --ink: #1A2530;
        --text: #33404D;
        --muted: #6B7684;
        --border: #E1E6EB;
        --blue: #1D6FD6;
        --blue-dark: #15529E;
        --blue-bg: #EAF2FD;
        --green: #1E8E5A;
        --green-bg: #E7F6EE;
        --red: #D14343;
        --red-bg: #FCEAEA;
        --amber: #B9770E;
        --amber-bg: #FDF3E2;
        --shadow: 0 1px 3px rgba(20, 30, 40, 0.08), 0 1px 2px rgba(20, 30, 40, 0.05);
        --radius: 12px;
      }

      [data-theme="dark"] {
        --bg: #10151A;
        --card: #1B2229;
        --card-alt: #212A32;
        --ink: #EAEEF1;
        --text: #C6CFD8;
        --muted: #8B96A2;
        --border: #2C363F;
        --blue-bg: #122A42;
        --green-bg: #123024;
        --red-bg: #3A1D1F;
        --amber-bg: #382A12;
        --shadow: 0 1px 4px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.35);
      }

      * {
        box-sizing: border-box;
      }

      html,
      body {
        margin: 0;
        padding: 0;
      }

      body {
        background: var(--bg);
        color: var(--ink);
        font-family: 'Noto Sans Devanagari', Arial, sans-serif;
        min-height: 100vh;
        line-height: 1.5;
      }

      .num {
        font-variant-numeric: tabular-nums;
      }

      h1,
      h2,
      h3 {
        font-family: 'Noto Sans Devanagari', sans-serif;
        margin: 0;
      }

      .wrap {
        max-width: 100%;
        margin: 0 auto;
        padding: 0 24px 60px;
      }

      /* ===== Header ===== */
      header.top {
        background: var(--card);
        border-bottom: 1px solid var(--border);
        position: sticky;
        top: 0;
        z-index: 40;
        box-shadow: 0 1px 4px rgba(20, 30, 40, 0.05);
      }

      header.top::before {
        content: "";
        display: block;
        height: 5px;
        width: 100%;
        background: linear-gradient(90deg, #38BDF8 0%, #6366F1 30%, #D946EF 60%, #FACC15 100%);
      }

      .top-inner {
        max-width: 100%;
        margin: 0 auto;
        padding: 14px 24px;
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        gap: 16px;
      }

      .header-left {
        display: flex;
        align-items: center;
        gap: 20px;
        flex-wrap: wrap;
      }

      .brand {
        display: flex;
        align-items: center;
        gap: 10px;
      }

      .brand-icon {
        width: 44px;
        height: 44px;
        border-radius: 12px;
        background: linear-gradient(135deg, #3B8AF2 0%, #6D4FE0 55%, #2FC5C0 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 22px;
        font-weight: 800;
        flex: none;
        box-shadow: 0 3px 10px rgba(60, 90, 220, 0.35), 0 1px 3px rgba(20, 30, 40, 0.15);
        position: relative;
        overflow: hidden;
      }

      .brand-icon::after {
        content: "";
        position: absolute;
        top: -40%;
        left: -20%;
        width: 70%;
        height: 180%;
        background: rgba(255, 255, 255, 0.25);
        transform: rotate(25deg);
      }

      .brand h1 {
        font-size: 19px;
        font-weight: 800;
        background: linear-gradient(90deg, #FF6B6B, #FFA94D, #FFD93D, #4D96FF, #9D6BFF);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
        letter-spacing: .2px;
      }

      .brand .sub {
        font-size: 12px;
        color: var(--muted);
        margin-top: 1px;
      }

      .brand-photo {
        border-radius: 50%;
        object-fit: cover;
        background: none;
        box-shadow: 0 2px 8px rgba(20, 30, 40, 0.25);
        border: 2px solid #fff;
      }

      .brand-photo::after {
        content: none;
      }

      /* ===== Colorful centered header date/time (no card background) ===== */
      .datetime-widget {
        grid-column: 2;
        justify-self: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
      }

      .dt-row1 {
        display: flex;
        align-items: center;
        gap: 8px;
        white-space: nowrap;
      }

      .dt-row1 .dt-ico {
        font-size: 14px;
        line-height: 1;
      }

      .dt-bs-date {
        font-size: 14px;
        font-weight: 800;
        color: #0EA5B7;
      }

      .dt-bs-day {
        font-size: 14px;
        font-weight: 800;
        color: #D97706;
      }

      .dt-sep {
        color: var(--border);
        font-weight: 600;
      }

      .dt-time {
        font-size: 14px;
        font-weight: 800;
        color: #CA8A04;
      }

      .dt-row2 {
        font-size: 14.5px;
        font-weight: 800;
        color: #DB2777;
        white-space: nowrap;
      }

      [data-theme="dark"] .dt-bs-date {
        color: #4FD1E8;
      }

      [data-theme="dark"] .dt-bs-day {
        color: #FDB44B;
      }

      [data-theme="dark"] .dt-time {
        color: #FCD34D;
      }

      [data-theme="dark"] .dt-row2 {
        color: #F472B6;
      }

      @media (max-width:640px) {
        .top-inner {
          grid-template-columns: 1fr;
          justify-items: center;
        }

        .datetime-widget {
          grid-column: auto;
          order: 3;
        }

        .top-actions {
          justify-self: center;
        }
      }

      .top-actions {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        justify-self: end;
      }

      .btn {
        font-family: inherit;
        font-size: 13.5px;
        font-weight: 600;
        cursor: pointer;
        border-radius: 9px;
        padding: 9px 14px;
        border: 1px solid transparent;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        white-space: nowrap;
      }

      .btn:hover {
        filter: brightness(0.97);
      }

      .btn-primary {
        background: var(--blue);
        color: #fff;
      }

      .btn-secondary {
        background: var(--bg);
        color: var(--text);
        border-color: var(--border);
      }

      .btn-danger-outline {
        background: var(--card);
        color: var(--red);
        border-color: var(--red-bg);
      }

      .btn-sm {
        padding: 7px 11px;
        font-size: 12.5px;
        border-radius: 8px;
      }

      /* ===== Section title ===== */
      .section-title {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 24px 0 10px;
        flex-wrap: wrap;
      }

      .section-title h2 {
        font-size: 16px;
        font-weight: 700;
      }

      .section-title .count {
        font-size: 12px;
        color: var(--muted);
        background: var(--bg);
        border: 1px solid var(--border);
        padding: 2px 9px;
        border-radius: 999px;
      }

      /* ===== Balance cards ===== */
      .balance-grid {
        display: grid;
        gap: 8px;
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
      }

      .bal-card {
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: 9px;
        padding: 8px 10px;
        box-shadow: var(--shadow);
        border-left: 3px solid var(--border);
        display: flex;
        flex-direction: column;
        gap: 5px;
      }

      .bal-card .bal-top {
        display: flex;
        align-items: center;
        gap: 6px;
        min-width: 0;
      }

      .bal-card .icon-badge {
        flex: none;
        width: 20px;
        height: 20px;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 10.5px;
        box-shadow: 0 1px 4px rgba(20, 30, 40, 0.12);
      }

      .icon-badge.asset {
        background: var(--green);
      }

      .icon-badge.debt {
        background: var(--red);
      }

      .icon-badge.neutral {
        background: var(--blue);
      }

      .bal-card.type-asset {
        background: var(--green-bg);
        border-left-color: var(--green);
      }

      .bal-card.type-debt {
        background: var(--red-bg);
        border-left-color: var(--red);
      }

      .bal-card.type-neutral {
        background: var(--blue-bg);
        border-left-color: var(--blue);
      }

      .bal-card label {
        font-size: 11px;
        color: var(--text);
        font-weight: 700;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
      }

      .bal-card .input-wrap {
        display: flex;
        align-items: baseline;
        gap: 4px;
        padding-left: 26px;
      }

      .bal-card .rs {
        color: var(--muted);
        font-size: 11px;
        font-weight: 600;
        flex: none;
      }

      .bal-card input {
        width: 100%;
        border: none;
        background: transparent;
        text-align: left;
        font-size: 14px;
        font-weight: 800;
        color: var(--ink);
        padding: 1px 0;
        outline: none;
      }

      .bal-card.readonly {
        background: var(--blue-bg);
      }

      .bal-card.readonly input {
        color: var(--blue-dark);
      }

      @media (max-width:480px) {
        .balance-grid {
          grid-template-columns: repeat(2, 1fr);
          gap: 6px;
        }

        .bal-card {
          padding: 7px 8px;
          gap: 4px;
          border-radius: 8px;
        }

        .bal-card .bal-top {
          gap: 5px;
        }

        .bal-card .icon-badge {
          width: 17px;
          height: 17px;
          font-size: 9px;
          border-radius: 5px;
        }

        .bal-card label {
          font-size: 10px;
        }

        .bal-card .input-wrap {
          padding-left: 22px;
        }

        .bal-card .rs {
          font-size: 10px;
        }

        .bal-card input {
          font-size: 12.5px;
        }
      }

      /* ===== Dashboard charts ===== */
      .dash-grid {
        display: flex;
        gap: 16px;
        flex-wrap: wrap;
        margin-bottom: 24px;
      }

      .dash-card {
        flex: 1 1 260px;
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 18px;
        box-shadow: var(--shadow);
      }

      .dash-card-wide {
        flex: 2 1 340px;
      }

      .dash-card-title {
        font-size: 13px;
        font-weight: 700;
        color: var(--muted);
        margin-bottom: 14px;
        text-align: center;
      }

      .pie-svg {
        display: block;
        width: 170px;
        height: 170px;
        margin: 0 auto 16px;
      }

      .pie-svg path,
      .pie-svg circle {
        transition: opacity .2s ease;
        stroke: var(--card);
        stroke-width: 0.5;
        cursor: default;
      }

      .pie-svg path:hover,
      .pie-svg circle:hover {
        opacity: 0.85;
      }

      /* ===== Instant hover tooltip for charts (no delay) ===== */
      .chart-tooltip {
        position: fixed;
        z-index: 9999;
        pointer-events: none;
        opacity: 0;
        background: var(--ink, #1A2230);
        color: #fff;
        font-size: 12px;
        font-weight: 600;
        padding: 6px 10px;
        border-radius: 7px;
        white-space: nowrap;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
        transition: opacity .05s linear;
      }

      .dash-legend {
        display: flex;
        justify-content: center;
        gap: 16px;
        font-size: 12.5px;
        color: var(--text);
        flex-wrap: wrap;
      }

      .dash-legend-item {
        display: flex;
        align-items: center;
        gap: 6px;
      }

      .dash-legend-item b {
        color: var(--ink);
      }

      .dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        display: inline-block;
        flex: none;
      }

      .dot-green {
        background: var(--green);
      }

      .dot-amber {
        background: var(--amber);
      }

      .dot-blue {
        background: var(--blue);
      }

      .dot-red {
        background: var(--red);
      }

      .dash-total {
        text-align: center;
        font-size: 12px;
        color: var(--muted);
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px dashed var(--border);
      }

      .dash-total b {
        color: var(--ink);
        font-size: 13.5px;
      }

      .dash-empty {
        text-align: center;
        color: var(--muted);
        font-size: 13px;
        padding: 20px 0;
      }

      /* ===== आम्दानी थप-घट ट्रेन्ड चार्ट (महिना/वर्ष अनुसार) ===== */
      .trend-card-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: 14px;
      }

      .trend-toggle-row {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
      }

      .trend-toggle {
        display: inline-flex;
        background: var(--bg2, rgba(120, 130, 150, 0.1));
        border: 1px solid var(--border);
        border-radius: 999px;
        padding: 3px;
        gap: 2px;
      }

      .trend-toggle-btn {
        border: none;
        background: transparent;
        color: var(--muted);
        font-size: 12px;
        font-weight: 700;
        padding: 6px 14px;
        border-radius: 999px;
        cursor: pointer;
        transition: background .15s ease, color .15s ease;
        font-family: inherit;
      }

      .trend-toggle-btn.active {
        background: var(--blue);
        color: #fff;
      }

      .trend-chart-scroll {
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 4px;
      }

      .trend-chart {
        display: flex;
        align-items: stretch;
        gap: 22px;
        min-height: 230px;
        padding: 6px 10px 4px;
      }

      .trend-bar-col {
        display: flex;
        flex-direction: column;
        align-items: center;
        flex: none;
        width: 46px;
      }

      .trend-bar-val {
        font-size: 10.5px;
        font-weight: 700;
        color: var(--ink);
        white-space: nowrap;
        margin: 2px 0;
      }

      .trend-bar-val.neg {
        color: var(--red);
      }

      .trend-bar-val.pos {
        color: var(--green);
      }

      .trend-bar-upper,
      .trend-bar-lower {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 95px;
      }

      .trend-bar-upper {
        justify-content: flex-end;
      }

      .trend-bar-lower {
        justify-content: flex-start;
      }

      .trend-bar {
        width: 26px;
        border-radius: 5px;
        cursor: default;
        transition: opacity .15s ease;
      }

      .trend-bar:hover {
        opacity: 0.8;
      }

      .trend-bar.pos {
        background: var(--green);
        border-radius: 5px 5px 2px 2px;
      }

      .trend-bar.neg {
        background: var(--red);
        border-radius: 2px 2px 5px 5px;
      }

      .trend-baseline {
        width: 100%;
        border-top: 1.5px dashed var(--border);
      }

      .trend-bar-label {
        font-size: 11px;
        color: var(--muted);
        margin-top: 6px;
        text-align: center;
        white-space: nowrap;
      }

      /* ===== कुल आम्दानी comparison chart (ब्याज बाहेक / ब्याजसहित) ===== */
      .income-chart {
        display: flex;
        justify-content: center;
        align-items: flex-end;
        gap: 36px;
        min-height: 200px;
        padding: 10px 6px 4px;
      }

      .income-bar-group {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
      }

      .income-bar-val {
        font-size: 12.5px;
        font-weight: 800;
        color: var(--ink);
        white-space: nowrap;
      }

      .income-bar {
        width: 52px;
        border-radius: 8px 8px 0 0;
        min-height: 4px;
        cursor: default;
        transition: opacity .15s ease;
      }

      .income-bar:hover {
        opacity: 0.85;
      }

      .income-bar-noint {
        background: linear-gradient(180deg, #7C8CF8, #3A3FA6);
      }

      .income-bar-withint {
        background: linear-gradient(180deg, #F76B9C, #B72E62);
      }

      .income-bar-mybalance {
        background: linear-gradient(180deg, #F5C64B, #A9740A);
      }

      .income-bar-label {
        font-size: 11.5px;
        font-weight: 700;
        color: var(--muted);
        text-align: center;
        max-width: 100px;
        line-height: 1.3;
      }

      /* ===== Person-wise grouped bar chart (लिएको / ब्याज / बाँकी / छुट) ===== */
      .pbc-wrap {
        overflow-x: auto;
        padding-bottom: 4px;
      }

      .pbc-chart {
        display: flex;
        align-items: flex-end;
        gap: 26px;
        min-height: 200px;
        padding: 8px 6px 4px;
        position: relative;
      }

      .pbc-chart::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 38px;
        height: 1px;
        background: var(--border);
      }

      .pbc-group {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        flex: none;
      }

      .pbc-bars {
        display: flex;
        align-items: flex-end;
        gap: 4px;
        height: 160px;
      }

      .pbc-bar {
        width: 13px;
        border-radius: 4px 4px 0 0;
        min-height: 2px;
        cursor: default;
        transition: opacity .15s ease;
      }

      .pbc-bar:hover {
        opacity: 0.8;
      }

      .pbc-bar-principal {
        background: linear-gradient(180deg, var(--blue), var(--blue-dark));
      }

      .pbc-bar-interest {
        background: linear-gradient(180deg, #F0AA3C, var(--amber));
      }

      .pbc-bar-remaining {
        background: linear-gradient(180deg, #8A6FEE, #6D4FE0);
      }

      .pbc-bar-discount {
        background: linear-gradient(180deg, #3FD6D0, #0E9B96);
      }

      .pbc-name {
        font-size: 11.5px;
        font-weight: 700;
        color: var(--text);
        max-width: 92px;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .pbc-legend {
        display: flex;
        justify-content: center;
        gap: 14px;
        font-size: 11.5px;
        color: var(--text);
        flex-wrap: wrap;
        margin-top: 14px;
        padding-top: 12px;
        border-top: 1px dashed var(--border);
      }

      .pbc-legend-item {
        display: flex;
        align-items: center;
        gap: 6px;
      }

      .pbc-legend-item .dot {
        width: 9px;
        height: 9px;
      }

      .dot-remaining {
        background: #6D4FE0;
      }

      .dot-discount {
        background: #0E9B96;
      }

      @media (max-width:520px) {
        .dash-card {
          padding: 14px;
        }

        .pie-svg {
          width: 140px;
          height: 140px;
        }

        .pbc-bars {
          height: 130px;
        }

        .pbc-bar {
          width: 10px;
        }

        .pbc-name {
          max-width: 70px;
          font-size: 11px;
        }

        .income-chart {
          gap: 22px;
        }

        .income-bar {
          width: 40px;
        }

        .income-bar-label {
          max-width: 76px;
          font-size: 11px;
        }
      }

      /* ===== Totals summary — full-width colorful pill cards ===== */
      .totals-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 10px;
      }

      .total-card {
        flex: 1 1 200px;
        display: flex;
        align-items: center;
        gap: 8px;
        border-radius: 999px;
        padding: 6px 16px 6px 6px;
        overflow: hidden;
        box-shadow: 0 2px 6px rgba(20, 30, 40, 0.14), 0 1px 2px rgba(20, 30, 40, 0.08);
        color: #fff;
      }

      .total-card .t-icon {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.24);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        flex: none;
      }

      .total-card .t-text {
        display: flex;
        align-items: baseline;
        gap: 5px;
        flex-wrap: wrap;
        min-width: 0;
      }

      .total-card .t-label {
        font-size: 11px;
        font-weight: 600;
        color: rgba(255, 255, 255, 0.92);
        white-space: nowrap;
      }

      .total-card .t-sep {
        color: rgba(255, 255, 255, 0.65);
        font-weight: 600;
      }

      .total-card .t-amount {
        font-size: 12.5px;
        font-weight: 800;
        color: #fff;
        white-space: nowrap;
      }

      .total-card.accent-blue {
        background: linear-gradient(135deg, #3B8AF2 0%, #1550A6 100%);
      }

      .total-card.accent-amber {
        background: linear-gradient(135deg, #FDB44B 0%, #B9770E 100%);
      }

      .total-card.accent-green {
        background: linear-gradient(135deg, #3FD68E 0%, #1E8E5A 100%);
      }

      .total-card.accent-dark {
        background: linear-gradient(135deg, #6D4FE0 0%, #2C1E7A 100%);
      }

      .total-card.accent-teal {
        background: linear-gradient(135deg, #2FC5C0 0%, #0E7A76 100%);
      }

      .total-card.accent-indigo {
        background: linear-gradient(135deg, #7C8CF8 0%, #3A3FA6 100%);
      }

      .total-card.accent-rose {
        background: linear-gradient(135deg, #F76B9C 0%, #B72E62 100%);
      }

      .total-card.accent-gold {
        background: linear-gradient(135deg, #F5C64B 0%, #A9740A 100%);
      }

      .note {
        font-size: 12.5px;
        color: var(--muted);
        margin-top: 12px;
        line-height: 1.7;
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: 8px;
        padding: 10px 12px;
      }

      .note b {
        color: var(--text);
      }

      /* ===== Toolbar ===== */
      .toolbar {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 14px;
      }

      .section-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        align-items: center;
        margin-left: auto;
      }

      .search-wrap {
        position: relative;
        flex: 1;
        min-width: 200px;
        max-width: 340px;
      }

      .search-wrap input {
        width: 100%;
        padding: 10px 12px 10px 34px;
        border: 1px solid var(--border);
        border-radius: 9px;
        background: var(--card);
        font-family: inherit;
        font-size: 14px;
        color: var(--ink);
        outline: none;
      }

      .search-wrap input:focus {
        border-color: var(--blue);
      }

      .search-wrap::before {
        content: "🔍";
        position: absolute;
        left: 11px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 13px;
        opacity: 0.55;
      }

      .filter-select {
        padding: 9px 30px 9px 12px;
        border: 1px solid var(--border);
        border-radius: 9px;
        background: var(--card);
        font-family: inherit;
        font-size: 13.5px;
        color: var(--text);
        outline: none;
        cursor: pointer;
        appearance: none;
        -webkit-appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236B7684'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 12px center;
      }

      .filter-select:focus {
        border-color: var(--blue);
      }

      /* ===== Status badges ===== */
      .status-badge {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-size: 11px;
        font-weight: 700;
        padding: 3px 9px;
        border-radius: 999px;
        white-space: nowrap;
      }

      .status-active {
        background: var(--amber-bg);
        color: var(--amber);
      }

      .status-settled {
        background: var(--green-bg);
        color: var(--green);
      }

      .status-overdue {
        background: var(--red-bg);
        color: var(--red);
      }

      /* ===== Sortable headers ===== */
      th.sortable {
        cursor: pointer;
        user-select: none;
      }

      th.sortable:hover {
        color: #fff;
      }

      th.sortable .arrow {
        display: inline-block;
        margin-left: 3px;
        opacity: 0.55;
        font-size: 9.5px;
      }

      th.sortable.active .arrow {
        opacity: 1;
        color: #FFE9A8;
      }

      /* ===== Validation ===== */
      .editable-cell.invalid,
      .lc-field input.invalid,
      .lc-name.invalid {
        border-color: var(--red) !important;
        background: var(--red-bg) !important;
      }

      .remaining-cell {
        font-weight: 700;
        color: var(--red);
      }

      .remaining-cell.settled {
        color: var(--green);
      }

      .remaining-cell.overpaid {
        color: var(--blue-dark);
      }

      .empty-state {
        text-align: center;
        padding: 50px 20px;
        color: var(--muted);
        background: var(--card);
        border: 1px dashed var(--border);
        border-radius: var(--radius);
      }

      .empty-state .es-icon {
        font-size: 34px;
        margin-bottom: 10px;
      }

      .empty-state .es-title {
        font-size: 15px;
        font-weight: 700;
        color: var(--text);
        margin-bottom: 4px;
      }

      .empty-state .es-sub {
        font-size: 13px;
      }

      /* ===== Ledger table ===== */
      .ledger-wrap {
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        box-shadow: var(--shadow);
        overflow-x: auto;
      }

      table.ledger {
        width: 100%;
        border-collapse: collapse;
        font-size: 13px;
        min-width: 920px;
      }

      table.ledger thead th {
        background: linear-gradient(135deg, #0F6E56 0%, #085041 100%);
        color: #fff;
        font-weight: 700;
        font-size: 11.5px;
        text-align: left;
        padding: 9px 10px;
        border-bottom: 1px solid var(--border);
        white-space: nowrap;
      }

      table.ledger thead th.num-col {
        text-align: right;
      }

      table.ledger thead th.col-name {
        min-width: 150px;
      }

      table.ledger thead th.col-date {
        width: 150px;
      }

      table.ledger thead tr th:first-child {
        border-top-left-radius: var(--radius);
      }

      table.ledger thead tr th:last-child {
        border-top-right-radius: var(--radius);
      }

      table.ledger tbody td {
        padding: 7px 10px;
        border-bottom: 1px solid var(--border);
        vertical-align: middle;
      }

      table.ledger tbody td.num-col {
        text-align: right;
      }

      table.ledger tbody tr:nth-child(even) {
        background: var(--card-alt);
      }

      table.ledger tbody tr.loan-row {
        cursor: pointer;
      }

      table.ledger tbody tr:hover {
        background: var(--blue-bg);
      }

      table.ledger tbody tr:last-child td {
        border-bottom: none;
      }

      /* ===== Per-person colour coding ===== */
      .pc-0 {
        --pc: #7F77DD;
        --pc-bg: #EEEDFE;
        --pc-text: #3C3489;
      }

      .pc-1 {
        --pc: #1D9E75;
        --pc-bg: #E1F5EE;
        --pc-text: #085041;
      }

      .pc-2 {
        --pc: #D85A30;
        --pc-bg: #FAECE7;
        --pc-text: #993C1D;
      }

      .pc-3 {
        --pc: #D4537E;
        --pc-bg: #FBEAF0;
        --pc-text: #993556;
      }

      .pc-4 {
        --pc: #EF9F27;
        --pc-bg: #FAEEDA;
        --pc-text: #854F0B;
      }

      .pc-5 {
        --pc: #378ADD;
        --pc-bg: #E6F1FB;
        --pc-text: #185FA5;
      }

      .pc-6 {
        --pc: #97C459;
        --pc-bg: #EAF3DE;
        --pc-text: #3B6D11;
      }

      .pc-7 {
        --pc: #B4B2A9;
        --pc-bg: #F1EFE8;
        --pc-text: #5F5E5A;
      }

      .pc-8 {
        --pc: #E24B4A;
        --pc-bg: #FCEBEB;
        --pc-text: #A32D2D;
      }

      table.ledger tbody tr[class*="pc-"] td:first-child {
        box-shadow: inset 4px 0 0 var(--pc);
      }

      .loan-card[class*="pc-"] {
        border-left-color: var(--pc);
      }

      .name-avatar {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: none;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: var(--pc-bg);
        color: var(--pc-text);
        font-size: 11px;
        font-weight: 700;
        margin-right: 7px;
        vertical-align: middle;
      }

      .name-line {
        display: inline-flex;
        align-items: center;
      }

      /* ===== Name display (row/card click opens loan detail modal) ===== */
      .name-text {
        font-weight: 700;
        color: var(--blue-dark);
        white-space: normal;
        word-break: break-word;
        line-height: 1.3;
        display: block;
      }

      .name-text.invalid {
        color: var(--red);
        font-style: italic;
        font-weight: 600;
      }

      .lc-name-text {
        font-size: 15px;
        font-weight: 700;
        color: var(--blue-dark);
        padding: 5px 2px 2px;
        white-space: normal;
        word-break: break-word;
      }

      .lc-name-text.invalid {
        color: var(--red);
        font-style: italic;
        font-weight: 600;
      }

      .loan-card {
        cursor: pointer;
        border-left: 4px solid var(--border);
      }

      .loan-card:hover {
        border-color: var(--blue);
        box-shadow: 0 2px 10px rgba(29, 111, 214, 0.15);
      }

      .editable-cell {
        border: 1px solid transparent;
        background: transparent;
        font-family: inherit;
        font-size: 13px;
        color: var(--ink);
        width: 100%;
        padding: 4px 5px;
        border-radius: 6px;
        outline: none;
      }

      .editable-cell:hover {
        border-color: var(--border);
      }

      .editable-cell:focus {
        background: var(--card);
        border-color: var(--blue);
      }

      input.num-cell {
        text-align: right;
      }

      .rate-pill {
        display: inline-flex;
        align-items: center;
        gap: 2px;
      }

      .rate-pill input {
        width: 44px;
      }

      .rate-suffix {
        font-size: 11px;
        color: var(--muted);
        font-weight: 700;
        white-space: nowrap;
      }

      .owed {
        font-weight: 700;
        color: var(--blue-dark);
      }

      .sl-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: var(--blue-bg);
        color: var(--blue-dark);
        font-weight: 700;
        font-size: 11px;
      }

      .interest-cell {
        color: var(--amber);
        font-weight: 700;
      }

      .duration {
        font-size: 11.5px;
        color: var(--muted);
        white-space: nowrap;
      }

      .del-btn {
        border: 1px solid var(--red-bg);
        background: var(--card);
        color: var(--red);
        cursor: pointer;
        font-size: 13px;
        padding: 5px 8px;
        border-radius: 7px;
      }

      .del-btn:hover {
        background: var(--red-bg);
      }

      tfoot td {
        padding: 10px 10px;
        font-weight: 700;
        background: var(--card-alt);
        border-top: 2px solid var(--border);
      }

      /* ===== Mobile cards ===== */
      .loan-cards {
        display: none;
        flex-direction: column;
        gap: 12px;
      }

      .loan-card {
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        box-shadow: var(--shadow);
        padding: 14px;
      }

      .loan-card .lc-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
      }

      .loan-card .lc-sl {
        font-size: 12.5px;
        color: var(--muted);
        font-weight: 700;
        background: var(--bg);
        padding: 2px 9px;
        border-radius: 999px;
      }

      .loan-card input.lc-name {
        font-size: 16px;
        font-weight: 700;
        border: 1px solid transparent;
        background: transparent;
        width: 100%;
        padding: 6px 2px;
        outline: none;
        border-radius: 6px;
      }

      .loan-card input.lc-name:focus {
        border-color: var(--blue);
        background: var(--card);
      }

      .loan-card .lc-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px 14px;
        margin-top: 8px;
      }

      .lc-field label {
        display: block;
        font-size: 11.5px;
        color: var(--muted);
        font-weight: 600;
        margin-bottom: 3px;
      }

      .lc-field input {
        width: 100%;
        border: 1px solid var(--border);
        border-radius: 7px;
        background: var(--card);
        font-size: 14px;
        padding: 7px 8px;
        outline: none;
        color: var(--ink);
      }

      .lc-field input:focus {
        border-color: var(--blue);
      }

      .lc-foot {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid var(--border);
      }

      .lc-owed {
        font-weight: 800;
        color: var(--blue-dark);
        font-size: 16px;
      }

      .lc-duration {
        font-size: 12px;
        color: var(--muted);
      }

      @media (max-width:759px) {
        .ledger-wrap.desktop-only {
          display: none;
        }

        .loan-cards {
          display: flex;
        }
      }

      /* ===== नयाँ समूहीकृत कर्जा सूची (screen view) ===== */
      .ledger-wrap.desktop-only,
      .loan-cards {
        display: none !important;
      }

      @media print {
        .ledger-wrap.desktop-only {
          display: block !important;
        }

        .loan-cards {
          display: none !important;
        }

        .legend-row,
        #loanGroups {
          display: none !important;
        }
      }

      .legend-row {
        display: flex;
        flex-wrap: wrap;
        gap: 14px;
        align-items: center;
        margin-bottom: 14px;
        padding: 10px 14px;
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: 10px;
      }

      .legend-item {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 12px;
        font-weight: 600;
        color: var(--text);
      }

      .legend-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        flex: none;
      }

      .loan-groups {
        display: flex;
        flex-direction: column;
        gap: 18px;
      }

      .li-group {
        border-radius: var(--radius);
        overflow: hidden;
        border: 1px solid var(--border);
        box-shadow: var(--shadow);
      }

      .grp-m3 { --grp-color: #1E8E5A; --grp-bg: #E1F5EE; }
      .grp-m6 { --grp-color: #1D6FD6; --grp-bg: #E6F1FB; }
      .grp-m9 { --grp-color: #C9950E; --grp-bg: #FBF1DA; }
      .grp-m12 { --grp-color: #D8631D; --grp-bg: #FBEAD9; }
      .grp-m15 { --grp-color: #B5342A; --grp-bg: #FBE3E1; }
      .grp-settled { --grp-color: #6B7280; --grp-bg: #EEF0F2; }

      [data-theme="dark"] .grp-m3 { --grp-bg: #123024; }
      [data-theme="dark"] .grp-m6 { --grp-bg: #122A42; }
      [data-theme="dark"] .grp-m9 { --grp-bg: #382A12; }
      [data-theme="dark"] .grp-m12 { --grp-bg: #33200E; }
      [data-theme="dark"] .grp-m15 { --grp-bg: #3A1D1F; }
      [data-theme="dark"] .grp-settled { --grp-bg: #23262B; }

      .li-group-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        background: var(--grp-color);
        color: #fff;
        padding: 10px 16px;
        font-weight: 800;
        font-size: 14.5px;
      }

      .li-group-count {
        background: rgba(255, 255, 255, 0.25);
        padding: 3px 11px;
        border-radius: 999px;
        font-size: 12px;
        font-weight: 700;
      }

      .li-group-body {
        display: flex;
        flex-direction: column;
        background: var(--card);
      }

      .li-card {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 14px 16px;
        border-top: 1px solid var(--border);
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
        border-left: 4px solid var(--grp-color);
        background: var(--grp-bg);
        cursor: pointer;
        transition: background .15s;
      }

      .li-group-body .li-card:first-child {
        border-top: none;
      }

      .li-group-body .li-card:last-child {
        border-bottom: none;
      }

      .li-group-body .li-card:nth-child(even) {
        filter: brightness(0.97);
      }

      .li-card:hover {
        filter: brightness(0.94);
      }

      .li-top {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: nowrap;
      }

      .li-num {
        flex: none;
        width: 44px;
        height: 34px;
        border-radius: 9px;
        background: var(--pc, var(--grp-color));
        color: #fff;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 9.5px;
        font-weight: 800;
        line-height: 1.25;
        text-align: center;
      }

      .li-info {
        flex: 1;
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 9px;
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
        white-space: nowrap;
      }

      .li-info::-webkit-scrollbar {
        display: none;
      }

      .li-name {
        flex: none;
        font-size: 15.5px;
        font-weight: 800;
        color: var(--ink);
      }

      .li-sub {
        flex: none;
        font-size: 12px;
        color: var(--muted);
      }

      .li-tag {
        flex: none;
        font-size: 11px;
        font-weight: 600;
        padding: 4px 9px;
        border-radius: 999px;
        background: rgba(20, 30, 40, 0.055);
        border: 1px solid rgba(20, 30, 40, 0.09);
        color: #3D4A57;
        white-space: nowrap;
      }

      [data-theme="dark"] .li-tag {
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.14);
        color: #C6CFD8;
      }

      .li-right {
        flex: none;
        display: flex;
        align-items: center;
        gap: 14px;
      }

      .li-right .li-bal {
        text-align: right;
      }

      .li-interest-label {
        font-size: 10.5px;
        color: var(--muted);
        font-weight: 700;
      }

      .li-interest-val {
        font-size: 15px;
        font-weight: 800;
        white-space: nowrap;
      }

      .li-actions {
        display: flex;
        gap: 7px;
        flex-wrap: nowrap;
      }

      .li-btn {
        border: none;
        cursor: pointer;
        width: 32px;
        height: 32px;
        padding: 0;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex: none;
        transition: filter .15s ease, transform .1s ease;
      }

      .li-btn-icon {
        width: 16px;
        height: 16px;
        display: block;
      }

      .li-btn-pay {
        background: var(--amber-bg);
        color: var(--amber);
      }

      .li-btn-edit {
        background: var(--blue-bg);
        color: var(--blue-dark);
      }

      .li-btn-del {
        background: var(--red-bg);
        color: var(--red);
      }

      .li-btn:hover {
        filter: brightness(0.9);
      }

      .li-btn:active {
        transform: scale(0.92);
      }

      @media (max-width:700px) {
        .li-top {
          flex-wrap: wrap;
        }

        .li-info {
          flex-wrap: wrap;
          overflow-x: visible;
          white-space: normal;
          row-gap: 6px;
        }

        .li-right {
          width: 100%;
          justify-content: space-between;
          margin-top: 2px;
        }
      }

      @media (max-width:520px) {
        .li-card {
          padding: 11px 10px;
          gap: 6px;
        }

        .li-top {
          gap: 7px;
        }

        .li-num {
          width: 32px;
          height: 28px;
          font-size: 8px;
          border-radius: 7px;
        }

        .li-name {
          font-size: 13px;
        }

        .li-sub {
          font-size: 10px;
        }

        .li-right {
          gap: 7px;
        }

        .li-interest-label {
          font-size: 9px;
        }

        .li-interest-val {
          font-size: 12.5px;
        }

        .li-actions {
          gap: 5px;
        }

        .li-btn {
          width: 28px;
          height: 28px;
        }

        .li-btn-icon {
          width: 14px;
          height: 14px;
        }

        .li-tag {
          font-size: 9.5px;
          padding: 3px 7px;
        }
      }

      .add-row-btn {
        margin-top: 12px;
        width: 100%;
        padding: 13px;
        border: 1.5px dashed var(--blue);
        border-radius: var(--radius);
        background: var(--blue-bg);
        color: var(--blue-dark);
        font-weight: 700;
        font-size: 14px;
        cursor: pointer;
        font-family: inherit;
      }

      .add-row-btn:hover {
        background: #DCEBFC;
      }

      footer.credit {
        text-align: center;
        margin-top: 50px;
        padding: 18px 0 6px;
        color: var(--muted);
        font-size: 12.5px;
        border-top: 1px solid var(--border);
      }

      footer.credit .name {
        color: var(--blue-dark);
        font-weight: 700;
      }

      /* ===== Payment history modal ===== */
      .modal-overlay {
        position: fixed;
        inset: 0;
        background: rgba(10, 15, 20, 0.55);
        display: none;
        align-items: center;
        justify-content: center;
        z-index: 200;
        padding: 16px;
      }

      .modal-overlay.show {
        display: flex;
      }

      .modal-box {
        background: var(--card);
        border-radius: var(--radius);
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
        width: 100%;
        max-width: 480px;
        max-height: 88vh;
        display: flex;
        flex-direction: column;
        overflow: hidden;
      }

      .modal-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 18px;
        border-bottom: 1px solid var(--border);
      }

      .modal-head h3 {
        font-size: 16px;
        font-weight: 800;
      }

      .modal-head .m-sub {
        font-size: 12px;
        color: var(--muted);
        font-weight: 500;
        margin-top: 2px;
      }

      .modal-close {
        border: none;
        background: var(--bg);
        color: var(--muted);
        font-size: 16px;
        width: 30px;
        height: 30px;
        border-radius: 8px;
        cursor: pointer;
      }

      .modal-body {
        padding: 14px 18px;
        overflow-y: auto;
        flex: 1;
      }

      .pay-add-row {
        display: flex;
        gap: 8px;
        margin-bottom: 14px;
        flex-wrap: wrap;
      }

      .pay-add-row input[type="date"] {
        flex: 1 1 130px;
      }

      .pay-add-row input[type="number"] {
        flex: 1 1 100px;
      }

      .pay-add-row input[type="text"] {
        flex: 2 1 140px;
      }

      .pay-add-row input {
        border: 1px solid var(--border);
        border-radius: 8px;
        padding: 8px 9px;
        font-family: inherit;
        font-size: 13.5px;
        background: var(--card);
        color: var(--ink);
        outline: none;
      }

      .pay-add-row input:focus {
        border-color: var(--blue);
      }

      .pay-add-row button {
        background: var(--blue);
        color: #fff;
        border: none;
        border-radius: 8px;
        padding: 8px 14px;
        font-weight: 700;
        font-size: 13.5px;
        cursor: pointer;
        white-space: nowrap;
      }

      .pay-list {
        display: flex;
        flex-direction: column;
        gap: 8px;
      }

      .pay-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        background: var(--card-alt);
        border: 1px solid var(--border);
        border-radius: 9px;
        padding: 9px 11px;
      }

      .pay-item .pi-left {
        min-width: 0;
      }

      .pay-item .pi-amount {
        font-weight: 800;
        color: var(--green);
        font-size: 14.5px;
      }

      .pay-item .pi-date {
        font-size: 12px;
        color: var(--muted);
      }

      .pay-item .pi-note {
        font-size: 12px;
        color: var(--text);
        margin-top: 1px;
        overflow-wrap: anywhere;
      }

      .pay-item .pi-del {
        border: 1px solid var(--red-bg);
        background: var(--card);
        color: var(--red);
        cursor: pointer;
        border-radius: 7px;
        padding: 5px 8px;
        font-size: 12.5px;
        flex: none;
      }

      .pay-empty {
        text-align: center;
        color: var(--muted);
        font-size: 13px;
        padding: 20px 0;
      }

      .bin-list {
        display: flex;
        flex-direction: column;
        gap: 8px;
      }

      .bin-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        background: var(--card-alt);
        border: 1px solid var(--border);
        border-radius: 9px;
        padding: 10px 12px;
      }

      .bin-item .bi-left {
        min-width: 0;
      }

      .bin-item .bi-name {
        font-weight: 800;
        color: var(--ink);
        font-size: 14.5px;
      }

      .bin-item .bi-meta {
        font-size: 12px;
        color: var(--muted);
        margin-top: 1px;
      }

      .bin-item .bi-actions {
        display: flex;
        gap: 6px;
        flex: none;
      }

      .bin-item .bi-restore {
        border: 1px solid var(--green);
        background: var(--green-bg, #E1F5EE);
        color: var(--green);
        cursor: pointer;
        border-radius: 7px;
        padding: 6px 10px;
        font-size: 12.5px;
        font-weight: 700;
      }

      .bin-item .bi-purge {
        border: 1px solid var(--red-bg);
        background: var(--card);
        color: var(--red);
        cursor: pointer;
        border-radius: 7px;
        padding: 6px 10px;
        font-size: 12.5px;
        font-weight: 700;
      }

      /* ===== EMI क्याल्कुलेटर ===== */
      .emi-form {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-bottom: 16px;
      }

      .emi-field label {
        display: block;
        font-size: 11.5px;
        color: var(--muted);
        font-weight: 600;
        margin-bottom: 3px;
      }

      .emi-field input {
        width: 100%;
        border: 1px solid var(--border);
        border-radius: 8px;
        padding: 9px 10px;
        font-family: inherit;
        font-size: 13.5px;
        background: var(--card);
        color: var(--ink);
        outline: none;
        box-sizing: border-box;
      }

      .emi-field input:focus {
        border-color: var(--blue);
      }

      .emi-results {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
      }

      .emi-result-card {
        background: var(--card-alt);
        border: 1px solid var(--border);
        border-radius: 9px;
        padding: 12px;
        text-align: center;
      }

      .emi-result-card.wide {
        grid-column: 1 / -1;
      }

      .emi-result-label {
        font-size: 11px;
        color: var(--muted);
        font-weight: 700;
        margin-bottom: 4px;
      }

      .emi-result-value {
        font-size: 17px;
        font-weight: 800;
        color: var(--blue-dark);
      }

      .emi-result-card.total .emi-result-value {
        color: var(--green);
      }

      .emi-result-card.interest .emi-result-value {
        color: var(--amber);
      }

      .emi-toggle-schedule {
        width: 100%;
        margin-top: 14px;
        padding: 9px;
        border: 1px dashed var(--blue);
        border-radius: 8px;
        background: var(--blue-bg);
        color: var(--blue-dark);
        font-weight: 700;
        font-size: 13px;
        cursor: pointer;
        font-family: inherit;
      }

      .emi-toggle-schedule:hover {
        background: #DCEBFC;
      }

      .emi-schedule-wrap {
        margin-top: 12px;
        max-height: 260px;
        overflow-y: auto;
        border: 1px solid var(--border);
        border-radius: 8px;
        display: none;
      }

      .emi-schedule-wrap.show {
        display: block;
      }

      .emi-schedule {
        width: 100%;
        border-collapse: collapse;
        font-size: 12px;
      }

      .emi-schedule th,
      .emi-schedule td {
        padding: 6px 8px;
        text-align: right;
        border-bottom: 1px solid var(--border);
        white-space: nowrap;
      }

      .emi-schedule th:first-child,
      .emi-schedule td:first-child {
        text-align: center;
      }

      .emi-schedule thead th {
        background: var(--card-alt);
        position: sticky;
        top: 0;
      }

      .emi-note {
        font-size: 11.5px;
        color: var(--muted);
      }

      .bin-empty {
        text-align: center;
        color: var(--muted);
        font-size: 13px;
        padding: 20px 0;
      }

      .bin-count {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-left: 6px;
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        border-radius: 999px;
        background: var(--red);
        color: #fff;
        font-size: 11px;
        font-weight: 800;
      }

      .modal-foot {
        padding: 12px 18px;
        border-top: 1px solid var(--border);
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
        background: var(--card-alt);
      }

      .modal-foot .mf-label {
        font-size: 12.5px;
        color: var(--muted);
        font-weight: 600;
      }

      .modal-foot .mf-total {
        font-size: 16px;
        font-weight: 800;
        color: var(--green);
      }

      /* ===== Loan detail / edit modal ===== */
      .lm-field {
        margin-bottom: 10px;
      }

      .lm-field label {
        display: block;
        font-size: 12px;
        color: var(--muted);
        font-weight: 700;
        margin-bottom: 3px;
      }

      .lm-field input {
        width: 100%;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: var(--card);
        font-family: inherit;
        font-size: 14.5px;
        padding: 8px 10px;
        outline: none;
        color: var(--ink);
      }

      .lm-field input:focus {
        border-color: var(--blue);
      }

      .lm-field input.invalid {
        border-color: var(--red);
        background: var(--red-bg);
      }

      .lm-bs-hint {
        margin-top: 3px;
        font-size: 11.5px;
        font-weight: 700;
        color: #0E9B8A;
        min-height: 14px;
      }

      [data-theme="dark"] .lm-bs-hint {
        color: #3FD6C2;
      }

      .date-bs-hint {
        margin-top: 2px;
        padding-left: 5px;
        font-size: 11px;
        font-weight: 700;
        color: #0E9B8A;
        white-space: nowrap;
        line-height: 1.3;
      }

      [data-theme="dark"] .date-bs-hint {
        color: #3FD6C2;
      }

      .date-cell {
        display: flex;
        flex-direction: column;
      }

      .lm-grid2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px 12px;
      }

      .lm-stats {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 9px;
        margin: 14px 0 10px;
      }

      .lm-stat-card {
        display: flex;
        align-items: center;
        gap: 9px;
        padding: 9px 10px;
        border-radius: 11px;
        background: var(--lsc-bg);
        border: 1px solid var(--lsc-border);
      }

      .lsc-icon {
        flex: none;
        width: 32px;
        height: 32px;
        border-radius: 9px;
        background: var(--lsc-icon-bg);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 15px;
      }

      .lsc-body {
        display: flex;
        flex-direction: column;
        gap: 1px;
        min-width: 0;
      }

      .lsc-body span {
        font-size: 10.5px;
        color: var(--muted);
        font-weight: 700;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .lsc-body b {
        font-size: 14px;
        color: var(--lsc-text);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .lm-stat-card.c-blue {
        --lsc-bg: #E9F2FE;
        --lsc-border: #CFE4FC;
        --lsc-icon-bg: #D3E6FD;
        --lsc-text: #1D6FD6;
      }

      .lm-stat-card.c-purple {
        --lsc-bg: #F1EDFD;
        --lsc-border: #E1D8FB;
        --lsc-icon-bg: #E4DAFC;
        --lsc-text: #6D4FE0;
      }

      .lm-stat-card.c-amber {
        --lsc-bg: #FDF3E3;
        --lsc-border: #FBE6C4;
        --lsc-icon-bg: #FBEAD0;
        --lsc-text: #B9770E;
      }

      .lm-stat-card.c-teal {
        --lsc-bg: #E4F7F4;
        --lsc-border: #C7EEE7;
        --lsc-icon-bg: #CFF1EA;
        --lsc-text: #0E9B8A;
      }

      .lm-stat-card.c-orange {
        --lsc-bg: #FDEDE6;
        --lsc-border: #FBD9C8;
        --lsc-icon-bg: #FBDFCF;
        --lsc-text: #D46A2C;
      }

      .lm-stat-card.c-green {
        --lsc-bg: #E5F6EC;
        --lsc-border: #C9ECD6;
        --lsc-icon-bg: #D2F0DE;
        --lsc-text: #1E8E5A;
      }

      .lm-stat-card.c-green2 {
        --lsc-bg: #E1F5EE;
        --lsc-border: #C3EBDD;
        --lsc-icon-bg: #CDEFE2;
        --lsc-text: #15805B;
      }

      .lm-stat-card.c-red {
        --lsc-bg: #FDECEC;
        --lsc-border: #FAD2D2;
        --lsc-icon-bg: #FADADA;
        --lsc-text: #D6362B;
      }

      .lm-stat-card.c-slate {
        --lsc-bg: #EEF1F5;
        --lsc-border: #DCE1E8;
        --lsc-icon-bg: #E3E7EC;
        --lsc-text: #455066;
      }

      .lm-stat-card.c-indigo {
        --lsc-bg: #EAEBFD;
        --lsc-border: #D3D5FA;
        --lsc-icon-bg: #DCDDFB;
        --lsc-text: #4A4FCF;
      }

      .lm-stat-card.c-cyan {
        --lsc-bg: #E1F4FB;
        --lsc-border: #C4E9F7;
        --lsc-icon-bg: #CDEEF9;
        --lsc-text: #0E7FA6;
      }

      .lm-stat-card.c-pink {
        --lsc-bg: #FDEAF3;
        --lsc-border: #FAD2E6;
        --lsc-icon-bg: #FBDCEC;
        --lsc-text: #C22A7D;
      }

      .lm-capture-area {
        background: var(--card);
      }

      .lm-capture-area.capturing {
        padding: 14px;
        border-radius: var(--radius);
      }

      .lm-capture-head {
        display: none;
      }

      .lm-capture-area.capturing .lm-capture-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 2px 4px 12px;
        margin-bottom: 10px;
        border-bottom: 1px solid var(--border);
      }

      .lm-capture-title {
        font-size: 15px;
        font-weight: 800;
        color: var(--ink);
        white-space: nowrap;
      }

      .lm-capture-name {
        font-size: 14px;
        font-weight: 700;
        color: var(--muted);
        text-align: right;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      [data-theme="dark"] .lm-stat-card {
        filter: brightness(0.85) saturate(1.1);
      }

      #lmStatusWrap {
        margin: 4px 0 12px;
      }

      .lm-pay-btn {
        width: 100%;
        background: var(--blue-bg);
        color: var(--blue-dark);
        border: 1px dashed var(--blue);
        border-radius: 9px;
        padding: 10px;
        font-family: inherit;
        font-size: 13.5px;
        font-weight: 700;
        cursor: pointer;
      }

      .lm-pay-btn:hover {
        filter: brightness(0.97);
      }

      #toast {
        position: fixed;
        bottom: 18px;
        left: 50%;
        transform: translateX(-50%) translateY(20px);
        background: var(--ink);
        color: #fff;
        padding: 11px 20px;
        border-radius: 9px;
        font-size: 13.5px;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
        opacity: 0;
        pointer-events: none;
        transition: all .25s;
        z-index: 100;
      }

      #toast.show {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
      }

      .report-only {
        display: none;
      }

      body.mode-report .edit-only {
        display: none !important;
      }

      body.mode-report .report-only {
        display: block;
      }

      .report-head {
        text-align: center;
        margin-bottom: 20px;
      }

      .report-head h2 {
        font-size: 22px;
      }

      .report-head .gen {
        font-size: 12.5px;
        color: var(--muted);
        margin-top: 4px;
      }

      /* ===== Personal / individual report statements ===== */
      .personal-reports {
        display: flex;
        flex-direction: column;
        gap: 18px;
        margin-top: 6px;
      }

      .p-report-card {
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 20px 22px;
        box-shadow: var(--shadow);
        page-break-inside: avoid;
        break-inside: avoid;
      }

      .p-report-card .pr-head {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 10px;
        border-bottom: 2px solid var(--blue);
        padding-bottom: 12px;
        margin-bottom: 16px;
      }

      .p-report-card .pr-name {
        font-size: 19px;
        font-weight: 800;
        color: var(--ink);
      }

      .p-report-card .pr-given {
        font-size: 12.5px;
        color: var(--muted);
        margin-top: 3px;
      }

      .pr-stat-grid {
        display: grid;
        gap: 10px;
        grid-template-columns: repeat(2, 1fr);
        margin-top: 2px;
      }

      @media (min-width:560px) {
        .pr-stat-grid {
          grid-template-columns: repeat(4, 1fr);
        }
      }

      .pr-stat {
        background: var(--card-alt);
        border: 1px solid var(--border);
        border-left: 4px solid var(--border);
        border-radius: 10px;
        padding: 10px 12px;
        display: flex;
        flex-direction: column;
        gap: 7px;
        min-width: 0;
      }

      .pr-stat .ps-top {
        display: flex;
        align-items: center;
        gap: 7px;
        min-width: 0;
      }

      .pr-stat .ps-icon {
        width: 24px;
        height: 24px;
        border-radius: 7px;
        flex: none;
        color: #fff;
        font-size: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .pr-stat .ps-label {
        font-size: 11.5px;
        color: var(--muted);
        font-weight: 700;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
      }

      .pr-stat .ps-val {
        font-size: 15.5px;
        font-weight: 800;
        color: var(--ink);
      }

      .pr-stat.accent-neutral {
        border-left-color: var(--blue);
        background: var(--blue-bg);
      }

      .pr-stat.accent-neutral .ps-icon {
        background: var(--blue);
      }

      .pr-stat.accent-amber {
        border-left-color: var(--amber);
        background: var(--amber-bg);
      }

      .pr-stat.accent-amber .ps-icon {
        background: var(--amber);
      }

      .pr-stat.accent-green {
        border-left-color: var(--green);
        background: var(--green-bg);
      }

      .pr-stat.accent-green .ps-icon {
        background: var(--green);
      }

      .pr-stat.accent-owed {
        border-left-color: var(--blue-dark);
        background: var(--blue-bg);
      }

      .pr-stat.accent-owed .ps-icon {
        background: var(--blue-dark);
      }

      .pr-stat.accent-owed .ps-val {
        font-size: 18px;
        color: var(--blue-dark);
      }

      .pr-stat.accent-settled {
        border-left-color: var(--green);
        background: var(--green-bg);
      }

      .pr-stat.accent-settled .ps-icon {
        background: var(--green);
      }

      .pr-stat.accent-settled .ps-val {
        color: var(--green);
        font-size: 18px;
      }

      .pr-stat.accent-overpaid {
        border-left-color: var(--blue-dark);
        background: var(--blue-bg);
      }

      .pr-stat.accent-overpaid .ps-icon {
        background: var(--blue-dark);
      }

      .pr-stat.accent-overpaid .ps-val {
        color: var(--blue-dark);
        font-size: 18px;
      }

      .pr-sign {
        display: flex;
        justify-content: space-between;
        gap: 20px;
        margin-top: 22px;
        padding-top: 6px;
      }

      .pr-sign div {
        text-align: center;
        width: 45%;
        font-size: 12.5px;
        color: var(--muted);
      }

      .pr-sign .line {
        border-top: 1px solid var(--muted);
        margin-top: 34px;
        padding-top: 6px;
      }

      @media print {
        .p-report-card {
          break-inside: avoid;
        }
      }

      @media print {

        header.top,
        .toolbar,
        .add-row-btn,
        .del-btn,
        #toast,
        .no-print {
          display: none !important;
        }

        body {
          background: #fff;
          color: #000;
        }

        .ledger-wrap,
        .bal-card,
        .total-card {
          box-shadow: none !important;
        }

        .wrap {
          padding: 0 10px;
        }
      }

    #ukbSyncBadge {
      position: fixed;
      right: 10px;
      bottom: 10px;
      z-index: 99999;
      font-family: system-ui, sans-serif;
      font-size: 12px;
      padding: 6px 10px;
      border-radius: 20px;
      color: #fff;
      background: #888;
      box-shadow: 0 2px 8px rgba(0,0,0,.25);
      cursor: pointer;
      max-width: 80vw;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      transition: background .2s ease;
    }
    #ukbSyncBadge.ok { background: #1f9d55; }
    #ukbSyncBadge.busy { background: #b58900; }
    #ukbSyncBadge.err { background: #c0392b; white-space: normal; max-width: 92vw; }
    #ukbSyncBadge.warn { background: #b56a00; white-space: normal; max-width: 92vw; }
    #ukbSyncBadge.hide { display: none; }