:root {
    --bg: #f4f4f5;
    --surface: #ffffff;
    --border: #e4e4e7;
    --text: #18181b;
    --text-muted: #71717a;
    --green: #16a34a;
    --green-bg: #f0fdf4;
    --green-border: #bbf7d0;
    --red: #dc2626;
    --red-bg: #fff1f2;
    --red-border: #fecaca;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.07), 0 1px 2px rgba(0, 0, 0, 0.04);
    --radius: 10px;
    --radius-sm: 6px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: var(--text);
    background: var(--bg);
    min-height: 100vh;
    padding-bottom: 60px;
}

.container {
    width: min(960px, calc(100vw - 32px));
    margin: 0 auto;
    padding: 0 0 24px;
}

/* ——— Typography ——— */
h1, h2, h3 {
    margin: 0;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

h1 { font-size: 1.5rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1rem; }

p { margin: 0; }

a {
    color: var(--text);
    text-decoration: none;
}

label {
    display: block;
    margin-bottom: 5px;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-muted);
}

/* ——— Inputs & selects ——— */
input,
select,
textarea {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px 11px;
    font: inherit;
    font-size: 0.9rem;
    color: var(--text);
    background: var(--surface);
}

input:focus,
select:focus,
textarea:focus {
    outline: 2px solid rgba(24, 24, 27, 0.18);
    outline-offset: 1px;
    border-color: #a1a1aa;
}

/* ——— Buttons ——— */
button {
    cursor: pointer;
    font: inherit;
    border: none;
    border-radius: var(--radius-sm);
    transition: opacity 0.12s, background 0.12s, color 0.12s;
}

.primary-button,
.secondary-button,
.danger-button {
    display: block;
    width: 100%;
    padding: 10px 18px;
    font-size: 0.9rem;
    font-weight: 600;
    text-align: center;
    border-radius: var(--radius-sm);
    cursor: pointer;
    border: 1px solid transparent;
}

.primary-button { background: var(--text); color: #fff; }
.primary-button:hover { opacity: 0.82; }
.secondary-button { background: #e4e4e7; color: var(--text); }
.secondary-button:hover { background: #d4d4d8; }
.danger-button { background: var(--red-bg); color: var(--red); border-color: var(--red-border); }
.danger-button:hover { background: var(--red); color: #fff; }

/* ——— Card ——— */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 22px;
    box-shadow: var(--shadow);
}

/* ——— Alerts ——— */
.alert {
    padding: 11px 14px;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    margin-bottom: 14px;
    border: 1px solid transparent;
}

.alert-error { background: var(--red-bg); color: var(--red); border-color: var(--red-border); }
.alert-success { background: var(--green-bg); color: var(--green); border-color: var(--green-border); }

/* ——— Utility ——— */
.hidden { display: none !important; }

.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;
}

/* ——— Auth layout ——— */
.auth-wrap {
    max-width: 420px;
    margin: 64px auto;
    display: grid;
    gap: 16px;
}

.inline { display: flex; gap: 12px; }

/* ——— Topbar ——— */
.topbar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 0;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--border);
}

.topbar-brand { font-weight: 700; font-size: 0.92rem; letter-spacing: -0.01em; }
.topbar-greeting { font-size: 0.875rem; color: var(--text-muted); flex: 1; }
.topbar-nav { display: flex; gap: 6px; }

/* ——— Nav / Ghost links ——— */
.nav-link,
.ghost-link {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 5px 11px;
}

.nav-link:hover, .ghost-link:hover { color: var(--text); border-color: #a1a1aa; }
.text-link { font-size: 0.82rem; color: var(--text-muted); }
.text-link:hover { color: var(--text); }

/* ——— Summary row (dashboard) ——— */
.summary-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px 20px;
    margin-bottom: 12px;
    box-shadow: var(--shadow);
}

.summary-balance-block {
    display: grid;
    justify-items: center;
    gap: 4px;
    margin-bottom: 14px;
    text-align: center;
}

.summary-balance-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.summary-balance-value {
    font-size: clamp(1.8rem, 5vw, 2.6rem);
    font-weight: 700;
    line-height: 1;
}

.summary-caption {
    font-size: 0.82rem;
    color: var(--text-muted);
}

.summary-inline-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-items: start;
}

.summary-inline-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: center;
    text-align: center;
}

.summary-chip { display: flex; flex-direction: column; gap: 1px; }
.sc-label { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.sc-value { font-size: 1.3rem; font-weight: 700; }
.is-income { color: var(--green); }
.is-expense { color: var(--red); }

/* ——— Launcher buttons ——— */
.launcher-actions {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.launcher-btn {
    font-size: 0.875rem;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    width: auto;
}

.expense-btn { background: var(--red-bg); color: var(--red); border-color: var(--red-border); }
.expense-btn:hover, .expense-btn.active { background: var(--red); color: #fff; border-color: var(--red); }
.income-btn { background: var(--green-bg); color: var(--green); border-color: var(--green-border); }
.income-btn:hover, .income-btn.active { background: var(--green); color: #fff; border-color: var(--green); }
.filter-toggle-btn { background: var(--surface); color: var(--text-muted); border-color: var(--border); }
.filter-toggle-btn:hover { background: var(--bg); color: var(--text); }
.filter-toggle-btn.active { background: var(--text); color: #fff; border-color: var(--text); }

/* ——— Quick-add panel ——— */
.quick-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 14px;
    padding: 18px 20px;
    display: none;
    box-shadow: var(--shadow);
}

.quick-panel.is-open { display: block; }

.quick-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.quick-panel-title { font-size: 0.95rem; font-weight: 600; }

.close-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1rem;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    width: auto;
    line-height: 1;
}

.close-btn:hover { background: var(--bg); color: var(--text); }

.quick-form { display: grid; gap: 14px; }

/* ——— Hero shell (admin) ——— */
.hero-shell {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px 22px;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 18px;
    box-shadow: var(--shadow);
}

.hero-copy { display: grid; gap: 5px; }
.hero-text { font-size: 0.875rem; color: var(--text-muted); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.eyebrow {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0;
}

/* ——— Admin layout ——— */
.dashboard-layout,
.admin-layout {
    display: grid;
    gap: 18px;
}

/* ——— Type toggle ——— */
.type-toggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.section-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
}

.section-heading.compact { margin-bottom: 12px; }

.mini-note,
.helper-text,
.transaction-meta,
.usage-meta,
.static-note {
    color: var(--text-muted);
    font-size: 0.82rem;
}

.label-large {
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 6px;
    display: block;
}

.stack-form { display: grid; gap: 14px; }

.field-grid,
.field-grid-2,
.field-grid-3 {
    display: grid;
    gap: 12px;
}

.field-grow { min-width: 0; }

.type-chip {
    font-size: 0.875rem;
    font-weight: 600;
    padding: 9px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text-muted);
    cursor: pointer;
    width: auto;
}

.type-chip.active[data-type="expense"] { background: var(--red-bg); color: var(--red); border-color: var(--red-border); }
.type-chip.active[data-type="income"] { background: var(--green-bg); color: var(--green); border-color: var(--green-border); }

/* ——— Category tiles ——— */
.category-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 8px;
}

.category-tile {
    font-size: 0.8rem;
    font-weight: 600;
    padding: 10px 8px;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--tile-color, #555) 10%, white);
    color: var(--text);
    border: 1px solid color-mix(in srgb, var(--tile-color, #555) 22%, transparent);
    cursor: pointer;
    width: auto;
    text-align: center;
}

.category-tile:hover:not(.hidden) { background: color-mix(in srgb, var(--tile-color, #555) 20%, white); }
.category-tile.active { background: var(--tile-color, #555); color: #fff; }

.field-hint { font-size: 0.8rem; color: var(--text-muted); }

/* ——— Amount input ——— */
.amount-input {
    font-size: clamp(1.6rem, 5vw, 2.2rem);
    font-weight: 700;
    text-align: right;
    padding: 14px 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
    color: var(--text);
    width: 100%;
}

/* ——— Extra details ——— */
.extra-details {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
}

.extra-details summary {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
}

/* ——— Filter panel ——— */
.filter-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 20px;
    margin-bottom: 14px;
    display: none;
}

.filter-panel.is-open { display: block; }

.filter-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
.filter-row > div { min-width: 110px; }
.filter-apply { margin-left: auto; display: flex; align-items: flex-end; }
.people-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* ——— Person chip / Checkbox inline ——— */
.person-chip,
.checkbox-inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
}

.person-chip {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    background: var(--surface);
}

.person-chip input,
.checkbox-inline input {
    width: auto;
    margin: 0;
}

/* ——— Transactions section (dashboard) ——— */
.transactions-section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
}

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

.section-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.tx-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 11px 18px;
    border-bottom: 1px solid var(--border);
}

.tx-row:last-child { border-bottom: none; }
.tx-left { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tx-cat { font-size: 0.875rem; font-weight: 600; }
.tx-meta { font-size: 0.78rem; color: var(--text-muted); }
.tx-amount { font-size: 0.9rem; font-weight: 700; white-space: nowrap; flex-shrink: 0; }

.tx-day-group {
    border-bottom: 1px solid var(--border);
}

.tx-day-group:last-child {
    border-bottom: none;
}

.tx-day-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 14px 18px 10px;
    background: #fafafa;
    border-bottom: 1px solid var(--border);
}

.tx-day-title-block {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tx-day-date {
    font-size: 0.95rem;
    font-weight: 700;
}

.tx-day-totals {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.tx-day-total {
    font-size: 0.82rem;
    font-weight: 600;
}

.tx-day-list .tx-row {
    border-bottom: 1px solid var(--border);
}

.tx-day-list .tx-row:last-child {
    border-bottom: none;
}

/* ——— Empty state ——— */
.empty-state {
    padding: 28px 18px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.875rem;
}

.utility-panel {
    display: grid;
    justify-items: center;
    gap: 10px;
    padding: 18px 20px 6px;
}

.utility-button {
    width: auto;
    min-width: 180px;
}

.utility-note {
    font-size: 0.8rem;
    color: var(--text-muted);
    text-align: center;
}

/* ——— Fixed bottom saldo bar ——— */
.bottom-saldo {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 9px 20px;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-top: 1px solid var(--border);
    z-index: 100;
}

.bs-label { font-size: 0.82rem; font-weight: 500; color: var(--text-muted); }
.bs-value { font-size: 1rem; font-weight: 700; }

/* ——— Summary grid (admin) ——— */
.summary-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    margin-bottom: 18px;
}

.admin-summary-grid { margin-bottom: 20px; }

.summary {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
    box-shadow: var(--shadow);
}

.summary span {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.summary .value { font-size: 1.5rem; font-weight: 700; }
.summary-income .value { color: var(--green); }
.summary-expense .value { color: var(--red); }

/* ——— Admin sections & list rows ——— */
.admin-section { margin-bottom: 18px; }
.admin-list { display: grid; gap: 10px; }
.transaction-list { display: grid; gap: 10px; }

.categories-admin-list,
.member-list,
.transaction-admin-list {
    margin-top: 16px;
}

.admin-item-row {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 14px;
}

.transaction-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
}

.transaction-main { display: grid; gap: 3px; }
.transaction-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.transaction-date { color: var(--text-muted); font-size: 0.82rem; }
.transaction-amount { font-weight: 700; font-size: 0.9rem; white-space: nowrap; }
.transaction-amount.is-income { color: var(--green); }
.transaction-amount.is-expense { color: var(--red); }

/* ——— Badges / Pills ——— */
.badge,
.static-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

.badge-income, .pill-income { background: var(--green-bg); color: var(--green); }
.badge-expense, .pill-expense { background: var(--red-bg); color: var(--red); }
.pill-owner { background: #eff6ff; color: #1d4ed8; }
.pill-member { background: var(--bg); color: var(--text-muted); border: 1px solid var(--border); }

.category-admin-row,
.member-row,
.transaction-admin-row {
    display: grid;
    gap: 10px;
}

.category-swatch {
    width: 34px;
    height: 34px;
    border-radius: 5px;
    border: 1px solid rgba(0, 0, 0, 0.07);
}

.admin-actions { display: flex; align-items: flex-end; gap: 8px; }
.split-actions { justify-content: flex-start; }

.inline-delete-form {
    display: flex;
    justify-content: flex-end;
    margin-top: -4px;
}

.inline-delete-form button { width: auto; min-width: 100px; }
.compact-check { padding-top: 22px; }

/* ——— Legacy margin shims ——— */
.transactions-panel,
.admin-section,
.filter-card {
    margin-top: 16px;
}

@media (min-width: 640px) {
    .field-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

    .field-grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .category-tiles {
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    }

    .filter-row > div { flex: 1; }
}

@media (min-width: 900px) {
    .admin-layout {
        grid-template-columns: 1.1fr 0.9fr;
        align-items: start;
    }

    .transactions-panel,
    .admin-section,
    .filter-card {
        margin-top: 0;
    }

    .category-admin-row {
        grid-template-columns: 34px minmax(150px, 1.4fr) 100px 100px 110px 80px 110px;
        align-items: end;
    }

    .member-row {
        grid-template-columns: minmax(190px, 1fr) 110px auto;
        align-items: center;
    }

    .transaction-admin-row {
        grid-template-columns: 130px 140px 200px 120px minmax(200px, 1fr) 110px;
        align-items: end;
    }
}

@media (max-width: 639px) {
    .container { padding-top: 8px; }
    .summary-inline-row { grid-template-columns: 1fr; gap: 10px; display: flex; justify-content: center; column-gap: 50px; }
    .launcher-actions { margin-left: 0; }
    .launcher-btn { flex: 1; }
    .filter-row { flex-direction: column; }
    .filter-apply { margin-left: 0; }
    .tx-row { flex-direction: column; align-items: flex-start; gap: 6px; }
    .tx-day-header { flex-direction: column; align-items: flex-start; }
    .tx-day-totals { justify-content: flex-start; }
    .transaction-item { flex-direction: column; align-items: flex-start; }
    .inline-delete-form button,
    .admin-actions button { width: 100%; }
    .hero-shell { flex-direction: column; }
    .summary-grid { grid-template-columns: repeat(2, 1fr); }
    .inline { flex-direction: column; }
}