/* ===========================================================
   Marriage Expense Tracker — design system

   On screen: a modern violet/rose app shell with icons, soft
   elevation, and a light/dark theme.
   On paper:  the @media print block at the bottom restores the
              original spreadsheet look (blue banner + grid).
   =========================================================== */

/* ---------- tokens: light ---------- */

:root {
    color-scheme: light;

    --bg: #f5f4fb;
    --bg-glow-1: rgba(124, 58, 237, .10);
    --bg-glow-2: rgba(219, 39, 119, .08);

    --surface: #ffffff;
    --surface-2: #faf9ff;
    --surface-3: #f3f1fb;

    --border: #e9e6f4;
    --border-strong: #d9d5ec;

    --ink: #191527;
    --ink-2: #56506e;
    --ink-3: #8a84a3;

    --brand: #6d28d9;
    --brand-hover: #5b21b6;
    --brand-soft: #f2ecff;
    --brand-ring: rgba(109, 40, 217, .18);
    --accent: #db2777;

    --ok: #059669;
    --ok-soft: #e7f7f0;
    --danger: #dc2626;
    --danger-soft: #fdeeee;
    --danger-border: #f6d4d4;

    --grad: linear-gradient(135deg, #4c1d95 0%, #7c3aed 45%, #db2777 100%);
    --grad-soft: linear-gradient(135deg, #6d28d9, #db2777);

    --r-sm: 10px;
    --r: 14px;
    --r-lg: 20px;
    --r-xl: 26px;

    --sh-sm: 0 1px 2px rgba(25, 21, 39, .05);
    --sh: 0 1px 3px rgba(25, 21, 39, .05), 0 8px 24px -8px rgba(25, 21, 39, .10);
    --sh-md: 0 2px 6px rgba(25, 21, 39, .06), 0 16px 40px -12px rgba(25, 21, 39, .16);
    --sh-lg: 0 30px 70px -20px rgba(25, 21, 39, .35);
    --sh-brand: 0 10px 30px -8px rgba(109, 40, 217, .5);

    /* category accent slots — Category::tint() picks one */
    --t1: #7c3aed; --t1-bg: #f1ebff;
    --t2: #db2777; --t2-bg: #fdebf4;
    --t3: #0891b2; --t3-bg: #e4f6fb;
    --t4: #ea580c; --t4-bg: #fdeee3;
    --t5: #059669; --t5-bg: #e5f7f0;
    --t6: #2563eb; --t6-bg: #e8effd;
    --t7: #ca8a04; --t7-bg: #fbf4e0;
    --t8: #64748b; --t8-bg: #eef1f5;
}

:root[data-theme="dark"] {
    color-scheme: dark;

    --bg: #0d0c13;
    --bg-glow-1: rgba(124, 58, 237, .18);
    --bg-glow-2: rgba(219, 39, 119, .12);

    --surface: #16151e;
    --surface-2: #1b1926;
    --surface-3: #221f2f;

    --border: #292636;
    --border-strong: #383445;

    --ink: #f2f0f8;
    --ink-2: #aaa4c0;
    --ink-3: #77718d;

    --brand: #a78bfa;
    --brand-hover: #bda5ff;
    --brand-soft: #241d3b;
    --brand-ring: rgba(167, 139, 250, .26);
    --accent: #f472b6;

    --ok: #34d399;
    --ok-soft: #12291f;
    --danger: #f87171;
    --danger-soft: #2a1618;
    --danger-border: #432224;

    --sh-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --sh: 0 1px 3px rgba(0, 0, 0, .4), 0 10px 26px -10px rgba(0, 0, 0, .6);
    --sh-md: 0 2px 8px rgba(0, 0, 0, .45), 0 20px 44px -14px rgba(0, 0, 0, .7);
    --sh-lg: 0 34px 80px -20px rgba(0, 0, 0, .85);
    --sh-brand: 0 10px 30px -8px rgba(167, 139, 250, .45);

    --t1: #c4b5fd; --t1-bg: #251f3d;
    --t2: #f9a8d4; --t2-bg: #33192a;
    --t3: #67e8f9; --t3-bg: #102a32;
    --t4: #fdba74; --t4-bg: #33200f;
    --t5: #6ee7b7; --t5-bg: #102b22;
    --t6: #93c5fd; --t6-bg: #16233c;
    --t7: #fde047; --t7-bg: #2e2810;
    --t8: #cbd5e1; --t8-bg: #23262e;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;

        --bg: #0d0c13;
        --bg-glow-1: rgba(124, 58, 237, .18);
        --bg-glow-2: rgba(219, 39, 119, .12);

        --surface: #16151e;
        --surface-2: #1b1926;
        --surface-3: #221f2f;

        --border: #292636;
        --border-strong: #383445;

        --ink: #f2f0f8;
        --ink-2: #aaa4c0;
        --ink-3: #77718d;

        --brand: #a78bfa;
        --brand-hover: #bda5ff;
        --brand-soft: #241d3b;
        --brand-ring: rgba(167, 139, 250, .26);
        --accent: #f472b6;

        --ok: #34d399;
        --ok-soft: #12291f;
        --danger: #f87171;
        --danger-soft: #2a1618;
        --danger-border: #432224;

        --sh-sm: 0 1px 2px rgba(0, 0, 0, .4);
        --sh: 0 1px 3px rgba(0, 0, 0, .4), 0 10px 26px -10px rgba(0, 0, 0, .6);
        --sh-md: 0 2px 8px rgba(0, 0, 0, .45), 0 20px 44px -14px rgba(0, 0, 0, .7);
        --sh-lg: 0 34px 80px -20px rgba(0, 0, 0, .85);
        --sh-brand: 0 10px 30px -8px rgba(167, 139, 250, .45);

        --t1: #c4b5fd; --t1-bg: #251f3d;
        --t2: #f9a8d4; --t2-bg: #33192a;
        --t3: #67e8f9; --t3-bg: #102a32;
        --t4: #fdba74; --t4-bg: #33200f;
        --t5: #6ee7b7; --t5-bg: #102b22;
        --t6: #93c5fd; --t6-bg: #16233c;
        --t7: #fde047; --t7-bg: #2e2810;
        --t8: #cbd5e1; --t8-bg: #23262e;
    }
}

/* ---------- base ---------- */

* {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100dvh;
    background: var(--bg);
    background-image:
        radial-gradient(900px 500px at 12% -8%, var(--bg-glow-1), transparent 70%),
        radial-gradient(800px 460px at 92% 4%, var(--bg-glow-2), transparent 70%);
    background-attachment: fixed;
    color: var(--ink);
    font-family: Inter, "Noto Sans Bengali", "Hind Siliguri", "Nirmala UI", "Segoe UI", system-ui, sans-serif;
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

.icon {
    display: block;
    flex: none;
}

.tabular {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px
    ;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

::selection {
    background: var(--brand-ring);
}

/* ---------- shell ---------- */

.shell {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px 110px;
}

.appbar {
    position: sticky;
    top: 0;
    z-index: 30;
    background: color-mix(in srgb, var(--surface) 82%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--border);
}

.appbar-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 11px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.appbar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    text-decoration: none;
    color: var(--ink);
}

.brand-mark {
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background: var(--grad);
    color: #fff;
    display: grid;
    place-items: center;
    box-shadow: var(--sh-brand);
    flex: none;
}

.brand-text {
    min-width: 0;
}

.brand-name {
    display: block;
    font-weight: 700;
    font-size: 14.5px;
    letter-spacing: -.1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.brand-sub {
    display: block;
    font-size: 11.5px;
    color: var(--ink-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

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

/* The theme toggle shows the mode it switches to; Vue picks the icon. */

/* ---------- hero banner ---------- */

/*
 * The photo is decorative and sits *under* a near-opaque gradient, so the
 * banner still reads correctly if it fails to load.
 * Source: images.unsplash.com/photo-1519741497674-611481863552 (Unsplash licence)
 */
.banner {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin-top: 20px;
    padding: 26px 26px 24px;
    border-radius: var(--r-xl);
    background-color: #4c1d95;
    background-image:
        linear-gradient(135deg, rgba(76, 29, 149, .89) 0%, rgba(124, 58, 237, .78) 45%, rgba(219, 39, 119, .84) 100%),
        url("../images/hero.jpg");
    background-size: cover, cover;
    background-position: center, center 34%;
    color: #fff;
    box-shadow: var(--sh-md);
    text-align: center;
}

.banner::before,
.banner::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    z-index: -1;
    pointer-events: none;
}

.banner::before {
    width: 320px;
    height: 320px;
    top: -180px;
    right: -80px;
    background: radial-gradient(circle, rgba(255, 255, 255, .22), transparent 65%);
}

.banner::after {
    width: 260px;
    height: 260px;
    bottom: -170px;
    left: -60px;
    background: radial-gradient(circle, rgba(255, 255, 255, .16), transparent 65%);
}

.banner-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 13px 5px 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .24);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

/* Icon-only variant — a round badge instead of a text pill. */
.banner-eyebrow.is-mark {
    gap: 0;
    width: 34px;
    height: 34px;
    padding: 0;
    justify-content: center;
}

.banner-title {
    margin: 0;
    font-size: clamp(19px, 3.4vw, 30px);
    font-weight: 800;
    letter-spacing: -.6px;
    line-height: 1.22;
}

.banner-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.banner-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .15);
    border: 1px solid rgba(255, 255, 255, .22);
    font-size: 12.5px;
    font-weight: 600;
}

/* ---------- stat tiles ---------- */

.tiles {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin: 18px 0;
}

.tile {
    position: relative;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 16px;
    box-shadow: var(--sh);
    transition: transform .18s cubic-bezier(.2, .8, .2, 1), box-shadow .18s;
}

.tile:hover {
    transform: translateY(-2px);
    box-shadow: var(--sh-md);
}

.tile-icon {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    background: var(--brand-soft);
    color: var(--brand);
    margin-bottom: 12px;
}

.tile-label {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--ink-3);
}

.tile-value {
    font-size: clamp(21px, 2.6vw, 27px);
    font-weight: 800;
    letter-spacing: -1px;
    margin-top: 3px;
    line-height: 1.15;
}

.tile-note {
    font-size: 12px;
    color: var(--ink-3);
    margin-top: 3px;
}

/* the total tile is the hero */
.tile.is-hero {
    background: var(--grad);
    border-color: transparent;
    color: #fff;
    box-shadow: var(--sh-brand);
}

.tile.is-hero .tile-icon {
    background: rgba(255, 255, 255, .18);
    color: #fff;
}

.tile.is-hero .tile-label,
.tile.is-hero .tile-note {
    color: rgba(255, 255, 255, .78);
}

/* ---------- panels ---------- */

.panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--sh);
    overflow: hidden;
    margin-bottom: 16px;
}

.panel-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
}

.panel-head .head-icon {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    background: var(--brand-soft);
    color: var(--brand);
    flex: none;
}

.panel-title {
    font-weight: 700;
    font-size: 14.5px;
    letter-spacing: -.2px;
}

.panel-head .spacer {
    margin-left: auto;
}

.panel-count {
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-3);
    background: var(--surface-3);
    border-radius: 999px;
    padding: 3px 10px;
}

.panel-body {
    padding: 16px;
}

/* ---------- form controls ---------- */

.filters {
    display: grid;
    grid-template-columns: 1.7fr 1fr 1fr .9fr .9fr auto;
    gap: 10px;
    align-items: end;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.field label {
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-2);
}

.field .hint {
    font-size: 11.5px;
    font-weight: 400;
    color: var(--ink-3);
}

.field .req {
    color: var(--accent);
}

.control {
    position: relative;
    display: flex;
    align-items: center;
}

.control > .icon {
    position: absolute;
    left: 11px;
    color: var(--ink-3);
    pointer-events: none;
}

.control.has-icon input,
.control.has-icon select {
    padding-left: 34px;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="number"],
input[type="search"],
select {
    width: 100%;
    padding: 9px 12px;
    font: inherit;
    font-size: 14px;
    color: var(--ink);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    outline: none;
    transition: border-color .15s, box-shadow .15s, background .15s;
}

select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 32px;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 17px) 55%, calc(100% - 12px) 55%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    cursor: pointer;
}

input::placeholder {
    color: var(--ink-3);
}

input:focus,
select:focus {
    background: var(--surface);
    border-color: var(--brand);
    box-shadow: 0 0 0 3.5px var(--brand-ring);
}

input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: .55;
}

:root[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
}

.field.has-error input,
.field.has-error select {
    border-color: var(--danger);
}

.field.has-error input:focus,
.field.has-error select:focus {
    border-color: var(--danger);
    box-shadow: 0 0 0 3.5px var(--danger-soft);
}

.error {
    font-size: 12px;
    color: var(--danger);
}

/* ---------- buttons ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 15px;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s, border-color .15s, color .15s, transform .1s, box-shadow .15s;
}

.btn:hover {
    background: var(--surface-3);
    border-color: var(--ink-3);
}

.btn:active {
    transform: scale(.97);
}

.btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3.5px var(--brand-ring);
}

.btn-primary {
    background: var(--grad-soft);
    border-color: transparent;
    color: #fff;
    box-shadow: var(--sh-brand);
}

.btn-primary:hover {
    background: var(--grad-soft);
    border-color: transparent;
    filter: brightness(1.07);
}

.btn-quiet {
    background: transparent;
    border-color: transparent;
    color: var(--ink-2);
}

.btn-quiet:hover {
    background: var(--surface-3);
    border-color: transparent;
    color: var(--ink);
}

.danger-hover:hover {
    background: var(--danger-soft);
    border-color: transparent;
    color: var(--danger);
}

.btn-danger {
    color: var(--danger);
    background: var(--danger-soft);
    border-color: var(--danger-border);
}

.btn-danger:hover {
    background: var(--danger);
    border-color: var(--danger);
    color: #fff;
}

.btn-sm {
    padding: 6px 12px;
    font-size: 13px;
}

.btn-icon {
    padding: 0;
    width: 34px;
    height: 34px;
    border-radius: 11px;
}

.btn-icon.btn-sm {
    width: 30px;
    height: 30px;
    border-radius: 9px;
}

/* ---------- table (wide screens) ---------- */

.table-wrap {
    overflow-x: auto;
}

table.sheet {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

table.sheet thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--surface-2);
    color: var(--ink-3);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    text-align: left;
    white-space: nowrap;
    padding: 11px 14px;
    border-bottom: 1px solid var(--border);
}

table.sheet tbody td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

table.sheet tbody tr {
    transition: background .13s;
}

table.sheet tbody tr:hover {
    background: var(--surface-2);
}

table.sheet tbody tr:last-child td {
    border-bottom: 0;
}

.col-num {
    width: 46px;
    text-align: center;
    color: var(--ink-3);
    font-size: 12.5px;
}

.col-date {
    width: 106px;
    white-space: nowrap;
    color: var(--ink-2);
    font-size: 13.5px;
}

.col-cat {
    width: 152px;
}

.col-desc {
    font-weight: 600;
}

.col-pay {
    width: 130px;
}

.col-remark {
    width: 150px;
    color: var(--ink-3);
    font-size: 13px;
}

.col-amount {
    width: 116px;
    text-align: right;
    font-weight: 700;
    font-size: 14.5px;
    white-space: nowrap;
}

.col-actions {
    width: 78px;
    white-space: nowrap;
}

table.sheet tfoot td {
    padding: 14px;
    background: var(--surface-2);
    border-top: 1px solid var(--border);
    font-weight: 700;
}

table.sheet tfoot .total-label {
    text-align: right;
    color: var(--ink-2);
    font-size: 12.5px;
    letter-spacing: .5px;
    text-transform: uppercase;
}

table.sheet tfoot .total-value {
    text-align: right;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -.5px;
    color: var(--brand);
}

.row-actions {
    display: flex;
    gap: 4px;
    justify-content: flex-end;
    opacity: .45;
    transition: opacity .15s;
}

tr:hover .row-actions,
.row-actions:focus-within {
    opacity: 1;
}

/* ---------- category + payment badges ---------- */

.cat {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-weight: 600;
    font-size: 13.5px;
}

.cat-icon {
    width: 27px;
    height: 27px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    background: var(--tint-bg);
    color: var(--tint);
    flex: none;
}

.cat-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tint-1 { --tint: var(--t1); --tint-bg: var(--t1-bg); }
.tint-2 { --tint: var(--t2); --tint-bg: var(--t2-bg); }
.tint-3 { --tint: var(--t3); --tint-bg: var(--t3-bg); }
.tint-4 { --tint: var(--t4); --tint-bg: var(--t4-bg); }
.tint-5 { --tint: var(--t5); --tint-bg: var(--t5-bg); }
.tint-6 { --tint: var(--t6); --tint-bg: var(--t6-bg); }
.tint-7 { --tint: var(--t7); --tint-bg: var(--t7-bg); }
.tint-8 { --tint: var(--t8); --tint-bg: var(--t8-bg); }

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px 3px 7px;
    border-radius: 999px;
    background: var(--tint-bg, var(--surface-3));
    color: var(--tint, var(--ink-2));
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.pay {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-2);
}

.pay .icon {
    color: var(--pay, var(--ink-3));
}

.pay[data-pay="Cash"] { --pay: #059669; }
.pay[data-pay="bKash"] { --pay: #e2136e; }
.pay[data-pay="Nagad"] { --pay: #ee7623; }
.pay[data-pay="Rocket"] { --pay: #8c3494; }
.pay[data-pay="Card"] { --pay: #2563eb; }
.pay[data-pay="Bank Transfer"] { --pay: #0891b2; }

:root[data-theme="dark"] .pay[data-pay="Cash"] { --pay: #34d399; }
:root[data-theme="dark"] .pay[data-pay="bKash"] { --pay: #f472b6; }
:root[data-theme="dark"] .pay[data-pay="Nagad"] { --pay: #fdba74; }
:root[data-theme="dark"] .pay[data-pay="Rocket"] { --pay: #d8b4fe; }
:root[data-theme="dark"] .pay[data-pay="Card"] { --pay: #93c5fd; }
:root[data-theme="dark"] .pay[data-pay="Bank Transfer"] { --pay: #67e8f9; }

/* ---------- mobile card list ---------- */

.cards {
    display: none;
    padding: 14px;
    gap: 11px;
    background: var(--surface-2);
}

.xcard {
    position: relative;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 13px 14px;
    box-shadow: var(--sh-sm);
}

.xcard::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--tint, var(--brand));
}

.xcard-top {
    display: flex;
    align-items: flex-start;
    gap: 11px;
}

.xcard-body {
    flex: 1;
    min-width: 0;
}

.xcard-desc {
    font-weight: 700;
    font-size: 15px;
    line-height: 1.35;
    letter-spacing: -.2px;
    overflow-wrap: anywhere;
}

.xcard-sub {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px 10px;
    margin-top: 6px;
}

.xcard-amount {
    font-weight: 800;
    font-size: 17px;
    letter-spacing: -.5px;
    color: var(--brand);
    white-space: nowrap;
}

.xcard-date {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    color: var(--ink-3);
}

.xcard-remark {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 10px;
    padding: 7px 10px;
    border-radius: var(--r-sm);
    background: var(--surface-3);
    font-size: 12.5px;
    color: var(--ink-2);
    overflow-wrap: anywhere;
}

.xcard-actions {
    display: flex;
    gap: 8px;
    margin-top: 11px;
    padding-top: 11px;
    border-top: 1px solid var(--border);
}

.xcard-actions .btn,
.xcard-actions form {
    flex: 1;
    display: flex;
}

.xcard-actions form .btn {
    width: 100%;
}

.cards-total {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--grad);
    color: #fff;
    border-radius: var(--r);
    padding: 14px 16px;
    font-weight: 700;
    box-shadow: var(--sh-brand);
}

.cards-total .spacer {
    margin-left: auto;
}

.cards-total .amount {
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.5px;
}

/* ---------- breakdown ---------- */

.breakdown {
    display: grid;
    gap: 12px;
}

.bd-row {
    display: grid;
    grid-template-columns: 168px 1fr 104px;
    align-items: center;
    gap: 12px;
    font-size: 13.5px;
}

.bd-track {
    display: block;
    height: 9px;
    border-radius: 999px;
    background: var(--surface-3);
    overflow: hidden;
}

.bd-fill {
    display: block;
    height: 100%;
    min-width: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--tint, var(--brand)) 82%, #000 0%),
        color-mix(in srgb, var(--tint, var(--brand)) 72%, #fff));
    animation: grow .9s cubic-bezier(.2, .9, .2, 1) both;
}

@keyframes grow {
    from {
        width: 0;
    }
    to {
        width: var(--w, 0%);
    }
}

.bd-value {
    text-align: right;
    font-weight: 700;
    white-space: nowrap;
}

.bd-value small {
    display: inline-block;
    min-width: 30px;
    margin-left: 5px;
    font-weight: 500;
    color: var(--ink-3);
}

/* ---------- empty + flash ---------- */

.empty {
    padding: 56px 24px;
    text-align: center;
    color: var(--ink-3);
}

.empty-icon {
    width: 54px;
    height: 54px;
    margin: 0 auto 14px;
    border-radius: 17px;
    display: grid;
    place-items: center;
    background: var(--brand-soft);
    color: var(--brand);
}

.empty strong {
    display: block;
    color: var(--ink);
    font-size: 16px;
    margin-bottom: 4px;
}

/* ===========================================================
   Toaster — every save, delete and failure reports itself here
   =========================================================== */

.toast-host {
    position: fixed;
    z-index: 90;
    top: 14px;
    right: 14px;
    width: min(370px, calc(100vw - 28px));
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.toast {
    position: relative;
    pointer-events: auto;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 12px 13px;
    border-radius: var(--r);
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--toast-accent);
    box-shadow: var(--sh-md);
    font-size: 14px;

    /* each variant only swaps these two */
    --toast-accent: var(--brand);
    --toast-tint: var(--brand-soft);
}

.toast-success {
    --toast-accent: var(--ok);
    --toast-tint: var(--ok-soft);
}

.toast-error {
    --toast-accent: var(--danger);
    --toast-tint: var(--danger-soft);
}

.toast-warning {
    --toast-accent: #d97706;
    --toast-tint: #fdf3e3;
}

:root[data-theme="dark"] .toast-warning {
    --toast-accent: #fbbf24;
    --toast-tint: #2c2110;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .toast-warning {
        --toast-accent: #fbbf24;
        --toast-tint: #2c2110;
    }
}

.toast-icon {
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: var(--toast-tint);
    color: var(--toast-accent);
}

.toast-body {
    flex: 1;
    min-width: 0;
    padding-top: 4px;
}

.toast-message {
    margin: 0;
    font-weight: 600;
    color: var(--ink);
    overflow-wrap: anywhere;
}

.toast-repeat {
    margin-left: 5px;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--toast-tint);
    color: var(--toast-accent);
    font-size: 11.5px;
    font-weight: 700;
}

.toast-details {
    margin: 5px 0 0;
    padding-left: 16px;
    color: var(--ink-2);
    font-size: 13px;
    font-weight: 500;
}

.toast-close {
    flex: none;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--ink-3);
    cursor: pointer;
    transition: background .15s, color .15s;
}

.toast-close:hover {
    background: var(--surface-3);
    color: var(--ink);
}

/* the countdown, which pauses while the pointer rests on the toast */
.toast-progress {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 100%;
    transform-origin: left;
    background: var(--toast-accent);
    opacity: .5;
    animation: toast-countdown var(--toast-duration, 4200ms) linear forwards;
}

.toast-progress.is-paused {
    animation-play-state: paused;
}

@keyframes toast-countdown {
    from {
        transform: scaleX(1);
    }
    to {
        transform: scaleX(0);
    }
}

.toast-enter-active,
.toast-leave-active {
    transition: transform .28s cubic-bezier(.2, 1, .3, 1), opacity .28s ease;
}

.toast-enter-from {
    opacity: 0;
    transform: translateX(30px) scale(.97);
}

.toast-leave-to {
    opacity: 0;
    transform: translateX(30px) scale(.97);
}

.toast-move {
    transition: transform .28s cubic-bezier(.2, 1, .3, 1);
}

@media (max-width: 720px) {
    .toast-host {
        top: auto;
        bottom: 84px;   /* clear of the floating add button */
        left: 12px;
        right: 12px;
        width: auto;
    }

    .toast-enter-from,
    .toast-leave-to {
        transform: translateY(20px) scale(.97);
    }
}

/* ---------- modal ---------- */

.modal {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(13, 12, 19, .55);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.modal.is-open {
    display: flex;
    animation: fade .18s ease-out;
}

@keyframes fade {
    from {
        opacity: 0;
    }
}

.modal-box {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    box-shadow: var(--sh-lg);
    width: 100%;
    max-width: 580px;
    max-height: calc(100dvh - 40px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: pop .26s cubic-bezier(.2, 1.1, .3, 1) both;
}

.modal-box::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: var(--grad-soft);
}

@keyframes pop {
    from {
        opacity: 0;
        transform: translateY(14px) scale(.97);
    }
}

.modal-head {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 18px 18px 4px;
}

.modal-head .head-icon {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    background: var(--grad-soft);
    color: #fff;
    flex: none;
    box-shadow: var(--sh-brand);
}

.modal-head h2 {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.3px;
}

.modal-close {
    margin-left: auto;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: transparent;
    border: 0;
    color: var(--ink-3);
    cursor: pointer;
    transition: background .15s, color .15s;
}

.modal-close:hover {
    background: var(--surface-3);
    color: var(--ink);
}

.modal-body {
    padding: 14px 18px 18px;
    overflow-y: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 13px;
}

.modal-body .span-2 {
    grid-column: 1 / -1;
}

.modal-foot {
    display: flex;
    gap: 10px;
    padding: 14px 18px;
    border-top: 1px solid var(--border);
    background: var(--surface-2);
}

.modal-foot .spacer {
    margin-left: auto;
}

/* ---------- floating add button ---------- */

.fab {
    display: none;
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 40;
    width: 58px;
    height: 58px;
    border-radius: 20px;
    background: var(--grad-soft);
    color: #fff;
    border: 0;
    box-shadow: var(--sh-brand), 0 4px 12px rgba(0, 0, 0, .18);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition: transform .2s cubic-bezier(.2, 1.1, .3, 1);
}

.fab:hover {
    transform: scale(1.06) rotate(90deg);
}

.fab:active {
    transform: scale(.94);
}

/* ===========================================================
   Login — what a guest gets instead of the sheet
   =========================================================== */

.login {
    position: relative;
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: 24px 16px;
    overflow: hidden;
    isolation: isolate;
}

/* Two slow-drifting colour fields. Sits behind the card, never
   intercepts a click, and stops moving for reduced-motion. */
.login::before,
.login::after {
    content: "";
    position: absolute;
    z-index: -1;
    width: 60vmax;
    height: 60vmax;
    border-radius: 50%;
    filter: blur(70px);
    opacity: .55;
    pointer-events: none;
}

.login::before {
    top: -26vmax;
    left: -20vmax;
    background: radial-gradient(circle, var(--brand) 0%, transparent 68%);
    animation: login-drift-a 19s ease-in-out infinite alternate;
}

.login::after {
    right: -22vmax;
    bottom: -26vmax;
    background: radial-gradient(circle, var(--accent) 0%, transparent 68%);
    animation: login-drift-b 23s ease-in-out infinite alternate;
}

@keyframes login-drift-a {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(6vmax, 4vmax, 0) scale(1.12); }
}

@keyframes login-drift-b {
    from { transform: translate3d(0, 0, 0) scale(1.08); }
    to   { transform: translate3d(-5vmax, -4vmax, 0) scale(1); }
}

.login-theme {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 2;
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--sh-sm);
}

/* The gradient hairline is the parent's background showing through
   a 1px inset — keeps one rounded silhouette at any radius. */
.login-card {
    position: relative;
    width: 100%;
    max-width: 396px;
    padding: 1px;
    border-radius: calc(var(--r-xl) + 1px);
    background: linear-gradient(150deg, var(--brand), transparent 42%, transparent 58%, var(--accent));
    box-shadow: var(--sh-lg);
    animation: pop .4s cubic-bezier(.2, 1.1, .3, 1) both;
}

.login-inner {
    display: grid;
    gap: 15px;
    padding: 30px 26px 26px;
    border-radius: var(--r-xl);
    background: var(--surface);
    background-image: linear-gradient(180deg, var(--surface-2), var(--surface) 42%);
}

.login-brand {
    text-align: center;
    display: grid;
    justify-items: center;
    gap: 3px;
    margin-bottom: 6px;
}

.login-brand .brand-mark {
    width: 54px;
    height: 54px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    background: var(--grad-soft);
    color: #fff;
    box-shadow: var(--sh-brand);
    margin-bottom: 13px;
}

.login-brand h1 {
    margin: 0;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.5px;
    line-height: 1.35;
    text-wrap: balance;
}

.login-brand p {
    margin: 0;
    color: var(--ink-3);
    font-size: 12.5px;
    font-weight: 600;
}

.login-welcome {
    margin: 9px 0 0;
    padding-top: 13px;
    border-top: 1px solid var(--border);
    width: 100%;
    color: var(--ink-2);
    font-size: 13px;
    font-weight: 500;
}

/* Trailing control inside a field — the password reveal. */
.control .peek {
    position: absolute;
    right: 7px;
    display: grid;
    place-items: center;
    padding: 6px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--ink-3);
    cursor: pointer;
    transition: color .15s, background .15s;
}

.control .peek:hover {
    color: var(--brand);
    background: var(--brand-soft);
}

.control .peek:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 1px;
}

.control.has-peek input {
    padding-right: 40px;
}

.login-submit {
    position: relative;
    margin-top: 5px;
    padding-top: 11px;
    padding-bottom: 11px;
    justify-content: center;
    font-size: 14.5px;
    overflow: hidden;
}

/* Light sweep on hover. Skipped when the button is disabled. */
.login-submit::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 -60%;
    width: 45%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .3), transparent);
    transform: skewX(-18deg);
    transition: left .55s ease;
}

.login-submit:hover:not(:disabled)::after {
    left: 115%;
}

.login-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 2px 0 0;
    color: var(--ink-3);
    font-size: 12px;
    font-weight: 500;
}

@media (max-width: 420px) {
    .login-inner {
        padding: 26px 20px 22px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .login::before,
    .login::after {
        animation: none;
    }
}

/* ---------- who is signed in ---------- */

.user-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 11px 4px 4px;
    border-radius: 999px;
    background: var(--surface-3);
    border: 1px solid var(--border);
    cursor: default;
}

.user-initial {
    width: 27px;
    height: 27px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--grad-soft);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    flex: none;
}

.user-text {
    display: grid;
    line-height: 1.15;
}

.user-name {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ink);
}

.user-role {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--ink-3);
}

@media (max-width: 720px) {
    .user-chip {
        padding: 4px;
    }

    .user-text {
        display: none;
    }
}

/* ---------- confirm dialog ---------- */

.modal-box.is-confirm {
    max-width: 430px;
}

.modal-head .head-icon.is-danger {
    background: var(--danger);
    box-shadow: 0 10px 30px -8px color-mix(in srgb, var(--danger) 55%, transparent);
}

.confirm-body {
    padding: 12px 18px 18px;
}

.confirm-body p {
    margin: 0;
    color: var(--ink);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.confirm-note {
    margin-top: 5px !important;
    color: var(--ink-3) !important;
    font-size: 13px;
    font-weight: 500 !important;
}

/* ===========================================================
   Async states — first paint, loading, in-flight requests
   =========================================================== */

/* what the shell shows until the Vue bundle takes over */
.boot {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    color: var(--ink-3);
    font-weight: 600;
}

.boot-spinner {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--border-strong);
    border-top-color: var(--brand);
    animation: spin .7s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* buttons swap their icon for a spinning arrow while a request is in flight */
.is-spinning {
    animation: spin .8s linear infinite;
}

/* a reload after a filter change dims the panel instead of emptying it */
.panel.is-refreshing {
    opacity: .6;
    pointer-events: none;
    transition: opacity .15s;
}

.skeleton-list {
    display: grid;
    gap: 10px;
    padding: 18px;
}

.skeleton-row {
    height: 42px;
    border-radius: var(--r-sm);
    background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
    background-size: 300% 100%;
    animation: shimmer 1.3s ease-in-out infinite;
}

@keyframes shimmer {
    from {
        background-position: 150% 0;
    }
    to {
        background-position: -150% 0;
    }
}

/* ===========================================================
   Responsive
   =========================================================== */

@media (max-width: 1080px) {
    .col-remark {
        display: none;
    }
}

@media (max-width: 900px) {
    /* the wide sheet gives way to the card list */
    .table-wrap {
        display: none;
    }

    .cards {
        display: grid;
    }

    .tiles {
        grid-template-columns: repeat(2, 1fr);
    }

    .filters {
        grid-template-columns: 1fr 1fr;
    }

    .filters .field-search,
    .filters .filter-actions {
        grid-column: 1 / -1;
    }

    .filter-actions {
        display: flex;
        gap: 9px;
    }

    .filter-actions .btn {
        flex: 1;
    }

    .bd-row {
        grid-template-columns: 130px 1fr 96px;
    }
}

@media (max-width: 720px) {
    body {
        font-size: 14.5px;
    }

    .shell {
        padding: 0 12px 110px;
    }

    .appbar-actions .label,
    .brand-sub {
        display: none;
    }

    .banner {
        margin-top: 14px;
        padding: 20px 18px;
        border-radius: var(--r-lg);
    }

    .tile {
        padding: 14px;
    }

    .tile-icon {
        width: 32px;
        height: 32px;
        border-radius: 9px;
        margin-bottom: 9px;
    }

    .fab {
        display: flex;
    }

    .btn-add-desktop {
        display: none;
    }

    .modal {
        padding: 0;
        align-items: flex-end;
    }

    .modal-box {
        max-width: none;
        border-radius: var(--r-xl) var(--r-xl) 0 0;
        max-height: 93dvh;
        animation: sheet-up .28s cubic-bezier(.2, 1, .3, 1) both;
    }

    @keyframes sheet-up {
        from {
            transform: translateY(100%);
        }
    }

    .modal-body {
        grid-template-columns: 1fr;
    }

    .bd-row {
        grid-template-columns: 108px 1fr 88px;
        font-size: 13px;
        gap: 9px;
    }
}

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

    .filters {
        grid-template-columns: 1fr;
    }
}

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

/* ===========================================================
   Print — restore the original spreadsheet look
   =========================================================== */

@media print {
    :root {
        --sheet-blue: #2e75b6;
    }

    body {
        background: #fff !important;
        background-image: none !important;
        color: #000;
        font-size: 11pt;
    }

    .appbar,
    .tiles,
    .filters,
    .panel-head,
    .cards,
    .fab,
    .modal,
    .toast-host,
    .skeleton-list,
    .col-actions,
    .row-actions,
    .breakdown,
    .banner-eyebrow,
    .banner-meta,
    .no-print {
        display: none !important;
    }

    .shell {
        max-width: none;
        padding: 0;
    }

    .panel {
        border: 0;
        border-radius: 0;
        box-shadow: none;
        margin: 0;
        background: #fff;
    }

    .banner {
        margin: 0 0 10px;
        padding: 10px 12px;
        border-radius: 0;
        background: var(--sheet-blue) !important;
        color: #fff !important;
        box-shadow: none;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .banner::before,
    .banner::after {
        display: none;
    }

    .banner-title {
        font-size: 15pt;
        font-weight: 700;
        letter-spacing: 0;
    }

    .table-wrap {
        display: block !important;
        overflow: visible;
    }

    table.sheet {
        font-size: 10pt;
    }

    table.sheet thead th,
    table.sheet tbody td,
    table.sheet tfoot td {
        border: 1px solid var(--sheet-blue) !important;
        padding: 5px 7px;
        background: #fff !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    table.sheet thead th {
        position: static;
        color: #1f4e79 !important;
        font-size: 10pt;
        letter-spacing: 0;
        text-transform: none;
    }

    table.sheet tbody td,
    table.sheet tfoot td {
        color: #000 !important;
    }

    table.sheet tfoot .total-label,
    table.sheet tfoot .total-value {
        color: #1f4e79 !important;
        font-size: 10.5pt;
        letter-spacing: 0;
        text-transform: none;
    }

    /* icons and tints add nothing on paper */
    .cat-icon,
    .pay .icon,
    .chip .icon {
        display: none !important;
    }

    .cat,
    .pay {
        gap: 0;
        color: #000 !important;
        font-weight: 400;
    }

    .col-remark {
        display: table-cell !important;
        color: #000 !important;
    }
}
