@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,300;0,400;0,500;0,600;1,400&family=Spline+Sans+Mono:wght@300;400;500&display=swap');

:root {
    --bg: #F1E8D6;
    --paper: #F8F0E1;
    --ink: #2A241B;
    --orange: #C4501F;
    --teal: #23615B;
    --olive: #737030;
    --mustard: #BD8E22;
    --faint: rgba(42, 36, 27, 0.16);
    --faint2: rgba(42, 36, 27, 0.48);
    --faint3: rgba(42, 36, 27, 0.07);
    --danger-600: #A93D20;
    --danger-500: #C4501F;
    --danger-100: #F0D5C9;
    --danger-50: #F8E7DF;
    --primary-700: #184842;
    --primary-600: #23615B;
    --primary-500: #32766E;
    --primary-400: #60958E;
    --primary-300: #8DB3AD;
    --primary-200: #BCD2CE;
    --primary-100: #DDE8E5;
    --primary-50: #EAF0ED;
    --secondary-600: #737030;
    --secondary-500: #89863D;
    --secondary-400: #A5A15F;
    --secondary-100: #E2E0C3;
    --secondary-50: #EFEEDE;
    --accent-600: #9B711A;
    --accent-500: #BD8E22;
    --accent-400: #D3AA53;
    --accent-100: #EFE1B9;
    --accent-50: #F7F0D9;
    --warning-600: #9B711A;
    --warning-500: #BD8E22;
    --warning-100: #EFE1B9;
    --warning-50: #F7F0D9;
    --gray-900: #2A241B;
    --gray-800: #41382B;
    --gray-700: #5D5141;
    --gray-600: #776B5A;
    --gray-500: #8D8171;
    --gray-400: #AFA391;
    --gray-300: #CFC4B2;
    --gray-200: #DED4C3;
    --gray-100: #EAE1D2;
    --gray-50: #F8F0E1;
    --white: #F8F0E1;
    --bg-primary: #F1E8D6;
    --bg-secondary: #EAE0CE;
    --bg-tertiary: #E3D7C3;
    --bg-card: rgba(248, 240, 225, 0.72);
    --bg-modal: #F8F0E1;
    --text-primary: #2A241B;
    --text-secondary: #5B5042;
    --text-tertiary: #756958;
    --text-muted: #756958;
    --text-inverse: #F8F0E1;
    --border-primary: rgba(42, 36, 27, 0.34);
    --border-secondary: rgba(42, 36, 27, 0.16);
    --border-light: rgba(42, 36, 27, 0.16);
    --border-medium: rgba(42, 36, 27, 0.34);
    --border-color: rgba(42, 36, 27, 0.34);
    --glass-bg: rgba(241, 232, 214, 0.94);
    --glass-border: rgba(42, 36, 27, 0.18);
    --glass-shadow: none;
    --radius-xs: 0;
    --radius-sm: 0;
    --radius-md: 0;
    --radius-lg: 0;
    --radius-xl: 0;
    --radius-2xl: 0;
    --radius-full: 999px;
    --shadow-xs: none;
    --shadow-sm: none;
    --shadow-md: 4px 4px 0 rgba(42, 36, 27, 0.10);
    --shadow-lg: 7px 7px 0 rgba(42, 36, 27, 0.09);
    --shadow-xl: 10px 10px 0 rgba(42, 36, 27, 0.08);
    --spacing-1: .25rem;
    --spacing-2: .5rem;
    --spacing-3: .75rem;
    --spacing-4: 1rem;
    --spacing-5: 1.25rem;
    --spacing-6: 1.5rem;
    --spacing-8: 2rem;
    --spacing-10: 2.5rem;
    --spacing-12: 3rem;
    --spacing-16: 4rem;
    --transition: .18s ease;
    --transition-fast: .14s ease;
    --transition-base: .2s ease;
}

*, *::before, *::after { box-sizing: border-box; }

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    scroll-behavior: smooth;
}

body {
    font-family: 'Jost', system-ui, sans-serif !important;
    color: var(--ink) !important;
    background-color: var(--bg) !important;
    background-image:
        linear-gradient(rgba(42,36,27,.022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(42,36,27,.018) 1px, transparent 1px) !important;
    background-size: 28px 28px !important;
    line-height: 1.55;
    min-height: 100vh;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: auto;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .16;
    background:
        radial-gradient(circle at 10% 12%, var(--orange) 0 1px, transparent 2px),
        radial-gradient(circle at 88% 20%, var(--teal) 0 1px, transparent 2px),
        radial-gradient(circle at 22% 82%, var(--mustard) 0 1px, transparent 2px);
    background-size: 220px 220px, 310px 310px, 270px 270px;
}

::selection { background: var(--orange); color: var(--paper); }
a { color: var(--teal); text-underline-offset: 3px; }
a:hover { color: var(--orange); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible {
    outline: 3px solid var(--mustard) !important;
    outline-offset: 3px !important;
}

.skip-link {
    position: fixed;
    left: 1rem;
    top: -5rem;
    z-index: 99999;
    padding: .75rem 1rem;
    background: var(--ink);
    color: var(--paper);
    border: 1px solid var(--paper);
}
.skip-link:focus { top: 1rem; color: var(--paper); }

h1, h2, h3, h4, h5, h6 {
    font-family: 'Jost', system-ui, sans-serif !important;
    color: var(--ink) !important;
    line-height: 1.08;
}
h1, .page-title, .hero-title, .trip-title {
    text-transform: uppercase;
    letter-spacing: .09em !important;
    font-weight: 600 !important;
}
h2, .card-title, .section-title {
    text-transform: uppercase;
    letter-spacing: .12em !important;
    font-weight: 600 !important;
}
p { color: var(--text-secondary); }
.mono, .stat-value, .amount-value, .balance-amount, code {
    font-family: 'Spline Sans Mono', ui-monospace, monospace !important;
}
.text-muted, .text-secondary, .text-tertiary, .form-help, .help-text {
    color: var(--text-secondary) !important;
}

.container {
    width: min(100% - 2rem, 1240px);
    margin-inline: auto !important;
    padding: clamp(1.25rem, 3vw, 3rem) !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
.container[style*="max-width"] { width: calc(100% - 2rem); }
body:not(:has(.nav, .navbar, .topbar)) > .container:not(:has(.trip-header-card)) {
    margin-block: 1.5rem !important;
    background: rgba(248, 240, 225, .72) !important;
    border: 1px solid var(--faint2);
    box-shadow: var(--shadow-md) !important;
}

.nav, .navbar, .topbar {
    min-height: 58px !important;
    height: auto !important;
    padding: .7rem clamp(1rem, 3vw, 2rem) !important;
    background: rgba(241, 232, 214, .96) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--faint2) !important;
    box-shadow: none !important;
    backdrop-filter: blur(10px);
}
.nav-content {
    width: min(100%, 1240px);
    min-height: 42px !important;
    height: auto !important;
    padding: 0 !important;
}
.nav-brand, .navbar-brand, .topbar-brand-name {
    color: var(--ink) !important;
    font-size: .78rem !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: .18em !important;
}
.nav-brand::before, .navbar-brand::before {
    content: '✦';
    color: var(--orange);
    font-size: 1.2rem;
}
.nav-menu, .navbar-nav, .topbar-nav { flex-wrap: wrap; }
.nav-link, .topbar-nav-link {
    color: var(--text-secondary) !important;
    text-transform: uppercase;
    letter-spacing: .11em;
    font-size: .72rem !important;
}

.page-header, .dashboard-header, .header {
    position: relative;
    margin-bottom: clamp(1.5rem, 4vw, 3rem) !important;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--faint2);
}
.page-header::before, .dashboard-header::before, .header::before {
    content: 'TRIP LEDGER / SPLITSY';
    display: block;
    margin-bottom: .7rem;
    font: 500 .68rem/1 'Spline Sans Mono', monospace;
    letter-spacing: .24em;
    color: var(--orange);
}
.page-title, .dashboard-header h1, .header h1 {
    font-size: clamp(1.8rem, 4vw, 3.5rem) !important;
}
.page-subtitle { max-width: 62ch; }

.card, .login-card, .form-container, .trip-card, .expense-card, .group-card,
.member-card, .filter-card, .trip-info, .commitment-info {
    background: rgba(248, 240, 225, .72) !important;
    color: var(--ink) !important;
    border: 1px solid var(--faint2) !important;
    border-radius: 0 !important;
    box-shadow: var(--shadow-md) !important;
    backdrop-filter: none !important;
}
.card:hover, .stat-card:hover, .trip-card:hover {
    transform: none !important;
    border-color: var(--ink) !important;
}
.card::before, .stat-card::before { display: none !important; }
.card-header, .card-footer, .filter-header, .group-header {
    padding: 1rem 1.25rem !important;
    background: var(--faint3) !important;
    border-color: var(--faint) !important;
}
.card-body { padding: clamp(1rem, 2.5vw, 1.75rem) !important; }
.card-title {
    color: var(--ink) !important;
    font-size: .82rem !important;
}

.stats-grid, .stats-overview, .grid {
    gap: 1rem !important;
}

/* Grid children must be allowed to shrink instead of widening the phone page. */
.main-grid, .main-grid > *, .dashboard-grid, .dashboard-grid > * {
    min-width: 0;
}
.stat-card, .stat-cell, .stat-item {
    position: relative;
    background: transparent !important;
    border: 1px solid var(--faint2) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--ink) !important;
}
.stat-card { padding: 1.25rem !important; }
.stat-card:nth-child(4n+1) { border-top: 4px solid var(--orange) !important; }
.stat-card:nth-child(4n+2) { border-top: 4px solid var(--teal) !important; }
.stat-card:nth-child(4n+3) { border-top: 4px solid var(--olive) !important; }
.stat-card:nth-child(4n) { border-top: 4px solid var(--mustard) !important; }
.stat-value, .stat-number {
    color: var(--ink) !important;
    font-weight: 400 !important;
}
.stat-label, .info-label, .filter-title {
    color: var(--text-secondary) !important;
    text-transform: uppercase;
    letter-spacing: .12em;
}

.btn, button, input[type="submit"], .action-btn, .update-btn, .back-link {
    min-height: 44px;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-family: 'Jost', system-ui, sans-serif !important;
    font-size: .76rem !important;
    font-weight: 600 !important;
    letter-spacing: .1em;
    text-transform: uppercase;
    transition: color .18s, background .18s, border-color .18s, transform .18s !important;
}
.btn {
    padding: .72rem 1rem !important;
    border: 1px solid var(--ink) !important;
}
.btn:hover, button:hover, input[type="submit"]:hover {
    transform: translateY(-2px) !important;
}
.btn-primary, .btn-success, input[type="submit"], button[type="submit"] {
    background: var(--ink) !important;
    color: var(--paper) !important;
    border-color: var(--ink) !important;
}
.btn-primary:hover, .btn-success:hover, input[type="submit"]:hover, button[type="submit"]:hover {
    background: var(--teal) !important;
    border-color: var(--teal) !important;
}
.btn-secondary, .btn-ghost, .btn-outline, .back-link {
    background: transparent !important;
    color: var(--ink) !important;
    border-color: var(--faint2) !important;
}
.btn-warning, .btn-info {
    background: var(--mustard) !important;
    color: var(--ink) !important;
    border-color: var(--mustard) !important;
}
.btn-danger, .action-btn.delete {
    background: transparent !important;
    color: var(--danger-600) !important;
    border-color: var(--danger-600) !important;
}
.btn-danger:hover, .action-btn.delete:hover {
    background: var(--danger-600) !important;
    color: var(--paper) !important;
}
.btn-sm { min-height: 36px; padding: .5rem .7rem !important; font-size: .68rem !important; }
.btn-lg { min-height: 50px; padding: .9rem 1.2rem !important; }
.action-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start !important;
    gap: .65rem !important;
    padding: .75rem 0;
    border-block: 1px solid var(--faint);
}

.form-group { margin-bottom: 1.2rem; }
.form-label, label {
    color: var(--ink) !important;
    font-weight: 600 !important;
}
.form-label {
    display: block;
    margin-bottom: .4rem;
    font-size: .78rem !important;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.form-control, .form-input, .form-select, .role-select,
input[type="text"], input[type="email"], input[type="password"], input[type="date"],
input[type="number"], input[type="file"], select, textarea {
    width: 100%;
    min-height: 46px;
    padding: .72rem .82rem !important;
    border: 1px solid var(--faint2) !important;
    border-radius: 0 !important;
    background: rgba(248, 240, 225, .64) !important;
    color: var(--ink) !important;
    font: 400 1rem/1.3 'Jost', system-ui, sans-serif !important;
    box-shadow: none !important;
}
textarea { min-height: 110px; resize: vertical; }
input::placeholder, textarea::placeholder { color: #756958 !important; opacity: 1; }
input:focus, select:focus, textarea:focus, .form-control:focus {
    background: var(--paper) !important;
    border-color: var(--teal) !important;
}
input[type="checkbox"], input[type="radio"] {
    width: 1.2rem;
    height: 1.2rem;
    min-height: auto;
    accent-color: var(--teal);
}
.checkbox-item, .radio-item, .participant-checkbox, .category-btn {
    background: transparent !important;
    border: 1px solid var(--faint2) !important;
    border-radius: 0 !important;
}
.checkbox-item:hover, .radio-item:hover, .participant-checkbox:hover, .category-btn:hover {
    border-color: var(--teal) !important;
    background: var(--faint3) !important;
}

.alert, .flash, .flash-message, [class^="flash-"] {
    padding: .8rem 1rem !important;
    border: 1px solid var(--mustard) !important;
    border-left-width: 5px !important;
    border-radius: 0 !important;
    background: rgba(248, 240, 225, .94) !important;
    color: var(--ink) !important;
    box-shadow: none !important;
}
.alert-danger, .flash-error { border-color: var(--orange) !important; }
.alert-success, .flash-success { border-color: var(--teal) !important; }

.table-container {
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow-x: auto !important;
    border: 1px solid var(--faint2) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: rgba(248, 240, 225, .55) !important;
}
.table-container::-webkit-scrollbar { height: 8px; }
.table-container::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}
.table-container::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}
.table-container::-webkit-scrollbar-thumb:hover { background: #a8a8a8; }
.table, .participants-table, .balance-table, .activity-table {
    width: 100%;
    border-collapse: collapse;
    color: var(--ink) !important;
    background: transparent !important;
}
table.participants-table, table.balance-table, table.activity-table { min-width: 760px; }
body:has(> .container > .participants-table) > .container,
body:has(> .container > .balance-table) > .container {
    overflow-x: auto;
}
.table th, .participants-table th, .balance-table th, .activity-table th {
    padding: .8rem !important;
    background: var(--ink) !important;
    color: var(--paper) !important;
    border-color: var(--ink) !important;
    font-size: .68rem !important;
    font-weight: 500 !important;
    text-transform: uppercase;
    letter-spacing: .12em;
}
.table td, .participants-table td, .balance-table td, .activity-table td {
    padding: .8rem !important;
    color: var(--ink) !important;
    border-bottom: 1px solid var(--faint) !important;
    background: transparent !important;
}
.table tbody tr:hover, .participants-table tbody tr:hover {
    background: rgba(35, 97, 91, .07) !important;
}
.commitments-page .table th { text-align: left; }
.sortable-header { cursor: pointer; }

.badge, .role-badge, .status-badge, .category-badge, .group-type-badge {
    display: inline-block;
    padding: .28rem .5rem !important;
    border: 1px solid currentColor !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--teal) !important;
    font: 500 .66rem/1.2 'Spline Sans Mono', monospace !important;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.badge-warning { color: var(--mustard) !important; }
.badge-danger { color: var(--orange) !important; }

.empty-state, .no-trip-welcome {
    padding: clamp(2rem, 7vw, 5rem) 1.5rem !important;
    text-align: center;
    border: 1px dashed var(--faint2);
    background: rgba(248, 240, 225, .4);
}
.empty-state-icon, .empty-icon { filter: grayscale(1); }

.group-management-page .modal {
    display: none;
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    backdrop-filter: blur(4px);
}
.modal, [id$="Modal"] {
    background: rgba(42, 36, 27, .72) !important;
}
.group-management-page .modal-content { max-width: 600px; }
.modal-content, [id$="Modal"] > div {
    max-height: min(88vh, 760px);
    overflow-y: auto;
    background: var(--paper) !important;
    color: var(--ink) !important;
    border: 1px solid var(--ink) !important;
    border-radius: 0 !important;
    box-shadow: 10px 10px 0 rgba(0,0,0,.2) !important;
}
.modal-header, .modal-footer { border-color: var(--faint) !important; }
.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 2rem;
}

.profile-section {
    padding: var(--spacing-6);
    margin-bottom: var(--spacing-6);
    background-color: var(--surface-secondary);
    border: 1px solid var(--border-light);
    border-radius: var(--border-radius-lg);
}
.profile-section h3 {
    margin-top: 0;
    padding-bottom: var(--spacing-2);
    color: var(--text-primary);
    border-bottom: 2px solid var(--primary-500);
}
.form-row {
    display: flex;
    gap: var(--spacing-4);
    align-items: flex-end;
}
.form-row .form-group { flex: 1; }
.password-requirements {
    margin-top: var(--spacing-1);
    color: var(--text-tertiary);
    font-size: .75rem;
    line-height: 1.4;
}
.requirement {
    display: block;
    margin-bottom: var(--spacing-1);
}
.requirement.valid { color: var(--success-600); }
.requirement.invalid { color: var(--error-600); }

.hero {
    position: relative;
    min-height: 100vh;
    padding: clamp(2rem, 7vw, 7rem) !important;
    justify-content: flex-start !important;
    background:
        linear-gradient(90deg, rgba(42,36,27,.96) 0 52%, rgba(42,36,27,.38) 52% 100%),
        var(--bg) !important;
    overflow: hidden;
}
.hero::after {
    content: '✦';
    position: absolute;
    right: 5vw;
    top: 8vh;
    color: var(--orange);
    font-size: min(38vw, 32rem);
    line-height: 1;
    opacity: .75;
    transform: rotate(18deg);
}
.hero-content {
    position: relative;
    z-index: 1;
    max-width: 660px !important;
    text-align: left !important;
}
.hero-title {
    color: var(--paper) !important;
    font-size: clamp(3.3rem, 9vw, 8rem) !important;
}
.hero-subtitle { color: rgba(248,240,225,.82) !important; max-width: 44ch; }
.hero-buttons { justify-content: flex-start !important; }
.hero-btn { border-radius: 0 !important; text-transform: uppercase; letter-spacing: .11em; }
.hero-btn-primary { background: var(--orange) !important; color: var(--paper) !important; }
.hero-btn-secondary { border-color: rgba(248,240,225,.7) !important; color: var(--paper) !important; }
.features {
    border-top: 1px solid rgba(248,240,225,.32);
    gap: 0 !important;
}
.feature {
    padding: 1.25rem !important;
    border-radius: 0 !important;
    border-right: 1px solid rgba(248,240,225,.25);
    background: transparent !important;
    text-align: left !important;
}
.feature:last-child { border-right: 0; }
.feature-title { color: var(--paper) !important; text-transform: uppercase; letter-spacing: .08em; }
.feature-text { color: rgba(248,240,225,.68) !important; }
.feature-icon { color: var(--mustard); font-family: 'Spline Sans Mono', monospace; }

.login-container {
    min-height: 100vh;
    padding: 2rem 1rem;
    background: transparent !important;
}
.login-card {
    position: relative;
    max-width: 520px !important;
    padding: clamp(1.5rem, 5vw, 3.25rem) !important;
}
.login-card::before {
    content: 'SPLITSY / SECURE ACCESS';
    display: block;
    margin-bottom: 2rem;
    color: var(--orange);
    font: 500 .68rem/1 'Spline Sans Mono', monospace;
    letter-spacing: .22em;
}
.login-logo h1 { font-size: clamp(2.4rem, 8vw, 4.5rem) !important; }
.login-links { border-top: 1px solid var(--faint); padding-top: 1.25rem; }

.trip-header-card, .trip-header {
    max-width: 1240px;
    margin: clamp(1rem, 3vw, 2rem) auto !important;
    padding: clamp(1.5rem, 4vw, 3rem) !important;
    background: var(--ink) !important;
    color: var(--paper) !important;
    border: 0 !important;
    border-top: 7px solid var(--orange) !important;
    border-radius: 0 !important;
    box-shadow: var(--shadow-lg) !important;
    text-align: left !important;
}
.trip-header-card h1, .trip-header-card h2, .trip-header-card h3,
.trip-header h1, .trip-header h2, .trip-header h3 {
    color: var(--paper) !important;
}
.trip-header-card p, .trip-header p { color: rgba(248, 240, 225, .8) !important; }
.reckoning-summary {
    width: min(100% - 2rem, 1240px);
    margin: 0 auto 1.5rem !important;
    padding: 1.25rem !important;
    background: rgba(189, 142, 34, .10) !important;
    border: 1px solid var(--mustard) !important;
    border-left-width: 6px !important;
    border-radius: 0 !important;
}
.settlement-card {
    background: rgba(35, 97, 91, .09) !important;
    color: var(--ink) !important;
    border: 1px solid var(--teal) !important;
    border-radius: 0 !important;
}
.settlement-amount {
    background: var(--teal) !important;
    color: var(--paper) !important;
    border-radius: 0 !important;
    font-family: 'Spline Sans Mono', monospace !important;
}
.no-settlements {
    background: rgba(35, 97, 91, .09) !important;
    color: var(--ink) !important;
    border: 1px solid var(--teal) !important;
    border-radius: 0 !important;
}
.scan-btn {
    min-height: 48px;
    padding: .85rem 1rem !important;
    background: var(--teal) !important;
    color: var(--paper) !important;
    border: 1px solid var(--teal) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font: 600 .76rem/1.2 'Jost', sans-serif !important;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.scan-btn:hover { background: var(--ink) !important; border-color: var(--ink) !important; }
.allocation-section, .quick-edit-panel {
    background: var(--faint3) !important;
    border: 1px solid var(--faint) !important;
    border-radius: 0 !important;
}

@media (max-width: 900px) {
    .container { width: min(100% - 1rem, 1240px); padding: 1.25rem !important; }
    .grid, .grid-2, .grid-3, .form-row, .form-grid, .quick-edit-grid {
        grid-template-columns: 1fr !important;
    }
    .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .action-buttons { align-items: stretch; }
    .action-buttons .btn { flex: 1 1 180px; }
    .nav-content, .navbar, .topbar { align-items: flex-start !important; }
}

@media (max-width: 620px) {
    html { font-size: 15px; }
    .starburst-deco { display: none; }
    .nav, .navbar, .topbar { position: relative !important; }
    .nav-content, .navbar, .topbar, .topbar-right {
        flex-direction: column;
        gap: .65rem !important;
    }
    .nav-menu, .navbar-nav, .topbar-nav { width: 100%; }
    .stats-grid { grid-template-columns: 1fr !important; }
    .card-header, .section-header, .expense-header, .group-header {
        align-items: flex-start !important;
        flex-direction: column !important;
        gap: .75rem !important;
    }
    .btn, button, input[type="submit"] { white-space: normal !important; }
    .hero { padding: 3rem 1.25rem !important; background: var(--ink) !important; }
    .hero::after { opacity: .12; right: -15vw; }
    .features { grid-template-columns: 1fr !important; margin-top: 2.5rem !important; }
    .feature { border-right: 0; border-bottom: 1px solid rgba(248,240,225,.25); }
    .feature:last-child { border-bottom: 0; }
    table.participants-table, table.balance-table, table.activity-table { min-width: 680px; }
}

@media (max-width: 768px) {
    .table-container {
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }
    .group-management-page .modal-content { padding: 1.5rem; }
}

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

@media print {
    body { background: white !important; }
    .nav, .navbar, .topbar, .no-print, .action-buttons { display: none !important; }
    .container { width: 100%; padding: 0 !important; }
    .card, .table-container { box-shadow: none !important; break-inside: avoid; }
}