:root { --ink: #102033; --muted: #65758a; --line: #d8e3ee; --bg: #f4f7fb; --panel: #ffffff; --accent: #0d7f88; --green: #16865f; --red: #c24a3c; --gold: #bd8421; --violet: #6554d9; --accent-2: #1aa388; --accent-dark: #0a5560; --soft-line: #edf2f7; --shadow: 0 18px 42px rgba(19, 36, 54, .11); --shadow-soft: 0 10px 26px rgba(19, 36, 54, .075); }
* { box-sizing: border-box; }
html { overflow-x: hidden; scroll-behavior: smooth; }
body { margin: 0; font-family: Inter, "Segoe UI", Arial, Helvetica, sans-serif; color: var(--ink); background: radial-gradient(circle at 12% 8%, rgba(13, 127, 136, .15), transparent 26rem), radial-gradient(circle at 82% 16%, rgba(101, 84, 217, .09), transparent 28rem), linear-gradient(135deg, #f8fbff 0%, #eef6f4 46%, #f6f8fb 100%); overflow-x: hidden; min-height: 100vh; }
a { color: var(--accent); text-decoration: none; font-weight: 800; transition: color .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
a:hover { color: var(--accent-dark); }
img { max-width: 100%; height: auto; }
[hidden] { display: none !important; }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.nav-toggle-input, .mobile-topbar, .nav-backdrop, .close-menu { display: none; }
.sidebar { position: fixed; inset: 0 auto 0 0; width: 232px; background: #101820; color: white; padding: 24px 18px; display: flex; flex-direction: column; gap: 24px; }
.sidebar-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brand { font-size: 22px; font-weight: 800; color: white; }
.brand:hover { color: white; }
.sidebar nav { display: grid; gap: 6px; }
.sidebar nav a { color: #dbe7ef; padding: 11px 12px; border-radius: 6px; display: flex; align-items: center; gap: 9px; }
.sidebar nav a:hover { background: #20313f; }
.nav-group { display: grid; gap: 4px; }
.nav-icon { width: 22px; height: 22px; border-radius: 6px; display: inline-grid; place-items: center; flex: 0 0 22px; background: rgba(255,255,255,.1); color: white; font-size: 11px; font-weight: 900; }
.nav-icon svg { width: 15px; height: 15px; display: block; fill: currentColor; }
.nav-group summary { color: #dbe7ef; padding: 11px 12px; border-radius: 6px; font-weight: 800; cursor: pointer; list-style: none; display: flex; align-items: center; gap: 9px; }
.nav-group summary::after { content: "▾"; font-size: 12px; transition: transform .18s ease; }
.nav-group[open] summary::after { transform: rotate(180deg); }
.nav-group summary::-webkit-details-marker { display: none; }
.nav-group summary:hover { background: #20313f; }
.nav-group div { display: grid; gap: 3px; padding-left: 10px; }
.nav-group div a { font-size: 14px; padding: 9px 12px; color: #c9d8e2; }
.admin-chip { margin-top: auto; color: #dbe7ef; display: grid; gap: 8px; }
.admin-chip a { color: white; }
.content { margin-left: 232px; padding: 30px; max-width: calc(100vw - 232px); }
.auth-content { min-height: 100vh; display: grid; place-items: center; padding: 20px; position: relative; isolation: isolate; }
.auth-content::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(115deg, rgba(16, 32, 51, .92), rgba(13, 127, 136, .8) 55%, rgba(101, 84, 217, .7)); clip-path: polygon(0 0, 54% 0, 42% 100%, 0 100%); }
.login-panel, .panel { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 24px; box-shadow: 0 12px 30px rgba(15, 23, 42, .06); min-width: 0; }
.login-panel { width: min(460px, 100%); padding: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.62); box-shadow: 0 24px 62px rgba(10, 28, 44, .2); }
.login-brand { text-align: left; margin: 0; padding: 30px 30px 22px; color: white; background: linear-gradient(135deg, #102033, #0d7f88 64%, #6554d9); position: relative; overflow: hidden; }
.login-brand::after { content: ""; position: absolute; right: -58px; bottom: -72px; width: 190px; height: 190px; border-radius: 50%; border: 32px solid rgba(255,255,255,.11); }
.brand-mark { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 8px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); font-weight: 900; margin-bottom: 18px; }
.login-brand p { margin: 0 0 6px; color: #c8f7ed; font-size: 12px; font-weight: 900; text-transform: uppercase; }
.login-brand h1 { position: relative; margin: 0 0 10px; font-size: 34px; color: white; }
.login-brand span { position: relative; display: block; max-width: 360px; color: rgba(255,255,255,.9); line-height: 1.5; font-weight: 650; }
.login-panel form { padding: 26px 30px 22px; }
.login-foot { display: flex; gap: 10px; justify-content: space-between; padding: 0 30px 28px; color: var(--muted); font-size: 12px; font-weight: 900; text-transform: uppercase; }
.login-foot span { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.login-foot span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-2); flex: 0 0 auto; }
.page-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 22px; }
.page-head p { color: var(--muted); margin: 0 0 4px; font-weight: 700; }
.page-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
h1, h2 { margin: 0; letter-spacing: 0; }
h1 { font-size: 28px; }
h2 { font-size: 18px; margin-bottom: 12px; }
.primary { background: var(--accent); color: white; border: 0; border-radius: 6px; padding: 11px 16px; font-weight: 800; cursor: pointer; display: inline-block; }
.secondary { background: #eef3f7; color: #243447; border: 1px solid var(--line); border-radius: 6px; padding: 10px 16px; font-weight: 800; display: inline-block; text-align: center; }
.btn-sm { padding: 6px 10px; font-size: 13px; line-height: 1.2; }
.primary.btn-sm, .secondary.btn-sm { width: auto; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 22px; }
.stats.compact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stats div { background: white; border: 1px solid var(--line); border-radius: 8px; padding: 18px; }
.stats span { color: var(--muted); display: block; margin-bottom: 8px; }
.stats strong { font-size: 24px; }
.dashboard-hero { background: linear-gradient(135deg, #102331, #176b87); color: white; border-radius: 8px; padding: 28px; margin-bottom: 22px; display: flex; align-items: center; justify-content: space-between; gap: 18px; box-shadow: 0 18px 45px rgba(16, 35, 49, .18); }
.dashboard-hero p { margin: 0 0 6px; color: #bfe1ec; font-weight: 800; }
.dashboard-hero h1 { font-size: 34px; margin-bottom: 8px; }
.dashboard-hero span { color: #e7f5f9; max-width: 650px; display: block; line-height: 1.5; }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.hero-actions .secondary { background: rgba(255,255,255,.12); color: white; border-color: rgba(255,255,255,.32); }
.dashboard-mode-switch { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.dashboard-mode-switch span { color: var(--muted); display: block; margin-bottom: 5px; font-weight: 800; }
.dashboard-mode-switch strong { font-size: 22px; }
.mode-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.mode-actions .active { background: var(--accent); border-color: var(--accent); color: white; }
.mode-actions .secondary.active {
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    border-color: var(--accent);
    color: #fff;
    box-shadow: 0 10px 22px rgba(15,124,135,.24);
}
.dashboard-stats .stat-card { position: relative; overflow: hidden; }
.dashboard-stats .stat-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--accent); }
.dashboard-stats .credit-card::before { background: var(--green); }
.dashboard-stats .debit-card::before { background: var(--red); }
.dashboard-stats .balance-card::before { background: var(--gold); }
.quick-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 22px; }
.quick-actions a { background: white; border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; color: var(--ink); display: flex; align-items: center; gap: 10px; box-shadow: 0 8px 20px rgba(15, 23, 42, .04); }
.quick-actions span { width: 30px; height: 30px; border-radius: 6px; display: grid; place-items: center; background: #e8f3f6; color: var(--accent); font-weight: 900; }
.quick-actions svg { width: 17px; height: 17px; fill: currentColor; }
.chart-grid { display: grid; grid-template-columns: .8fr 1.1fr 1.1fr; gap: 18px; margin-bottom: 22px; }
.chart-panel { padding: 0; overflow: hidden; }
.movement-chart { min-height: 210px; display: grid; grid-template-columns: 145px 1fr; gap: 18px; align-items: center; padding: 20px; }
.donut { width: 142px; aspect-ratio: 1; border-radius: 50%; background: conic-gradient(var(--green) 0 calc(var(--credit) * 1%), var(--red) 0 100%); position: relative; box-shadow: inset 0 0 0 1px var(--line); }
.donut::after { content: ""; position: absolute; inset: 28px; background: white; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line); }
.chart-legend { display: grid; gap: 12px; }
.chart-legend div { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.chart-legend strong { margin-left: auto; color: var(--ink); }
.legend-dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.credit-dot { background: var(--green); }
.debit-dot { background: var(--red); }
.daily-chart { height: 210px; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; align-items: end; padding: 20px; }
.daily-column { height: 100%; min-width: 0; display: grid; grid-template-rows: 1fr auto; gap: 8px; text-align: center; color: var(--muted); }
.daily-bars { height: 160px; display: flex; align-items: end; justify-content: center; gap: 4px; border-bottom: 1px solid var(--line); }
.daily-bar-group { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; min-width: 26px; }
.daily-value { writing-mode: vertical-rl; transform: rotate(180deg); max-height: 72px; overflow: hidden; color: var(--ink); font-size: 10px; font-weight: 900; line-height: 1; white-space: nowrap; }
.credit-value { color: var(--green); }
.debit-value { color: var(--red); }
.daily-bar { width: 14px; min-height: 3px; border-radius: 5px 5px 0 0; display: block; }
.credit-bar { background: var(--green); }
.debit-bar { background: var(--red); }
.daily-column small { font-size: 11px; white-space: nowrap; }
.bank-bars { display: grid; gap: 14px; padding: 20px; }
.bank-bar-row { display: grid; gap: 7px; }
.bar-label { display: flex; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 13px; }
.bar-label span { color: var(--ink); font-weight: 800; }
.bar-label b { color: var(--accent); white-space: nowrap; }
.bar-track { height: 12px; background: #edf3f6; border-radius: 999px; overflow: hidden; }
.bar-track span { height: 100%; min-width: 4px; display: block; background: linear-gradient(90deg, #176b87, #42a3bb); border-radius: inherit; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, .75fr); gap: 22px; align-items: start; }
.dashboard-side { display: grid; gap: 18px; }
.dashboard-panel { padding: 0; overflow: hidden; }
.panel-title { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.panel-title h2 { margin: 0; }
.dashboard-panel table { border: 0; border-radius: 0; }
.bank-list, .user-list { display: grid; }
.bank-row, .user-row { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 15px 18px; border-bottom: 1px solid var(--line); }
.bank-row:last-child, .user-row:last-child { border-bottom: 0; }
.bank-row span, .user-row span { color: var(--muted); display: block; margin-top: 4px; font-size: 13px; }
.bank-row b { white-space: nowrap; color: var(--accent); }
.bank-name-cell { display: inline-flex; align-items: center; gap: 10px; min-width: 0; font-weight: 800; }
.bank-logo { width: 34px; height: 34px; border-radius: 6px; object-fit: contain; border: 1px solid var(--line); background: white; flex: 0 0 34px; }
.bank-logo-fallback { display: inline-grid; place-items: center; color: white; background: linear-gradient(135deg, var(--accent), var(--accent-2)); font-size: 14px; }
.current-logo { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; font-weight: 800; }
.avatar { width: 38px; height: 38px; border-radius: 8px; display: grid; place-items: center; background: #e8f3f6; color: var(--accent); font-weight: 900; flex: 0 0 auto; }
.user-row { justify-content: flex-start; }
.mini-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 0; }
.mini-summary div { padding: 18px; }
.mini-summary div + div { border-left: 1px solid var(--line); }
.mini-summary span { color: var(--muted); display: block; margin-bottom: 8px; }
.mini-summary strong { font-size: 24px; }
.empty-state { padding: 18px; color: var(--muted); }
.split { display: grid; grid-template-columns: 1.6fr 1fr; gap: 22px; }
table { width: 100%; border-collapse: collapse; background: white; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.table-bordered th,
.table-bordered td { border: 1px solid var(--line); }
.table-bordered tbody tr:hover {
    background: #eaf7f5;
}
.table-bordered tbody tr:hover td {
    border-color: #b9ddd8;
}
th, td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { background: #eef3f7; color: #364152; font-size: 13px; text-transform: uppercase; }
tr:last-child td { border-bottom: 0; }
.form-grid { display: grid; gap: 16px; }
.entry-form { max-width: 780px; }
.user-picker { border: 1px solid var(--line); border-radius: 8px; padding: 16px; background: #fbfdff; display: grid; gap: 16px; }
.section-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.section-title h2 { margin: 0; }
.segmented { display: flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: white; }
.segmented label { display: flex; align-items: center; gap: 7px; padding: 9px 12px; border-right: 1px solid var(--line); cursor: pointer; }
.segmented label:last-child { border-right: 0; }
.segmented input { width: auto; }
.new-user-panel { grid-template-columns: 1fr; }
.helper-text { color: var(--red); font-weight: 700; font-size: 13px; }
.inline-form { grid-template-columns: 1fr 1fr auto; align-items: end; margin-bottom: 20px; }
.table-actions { display: grid; gap: 10px; min-width: 260px; }
.table-assign-form { display: grid; grid-template-columns: minmax(180px, 1fr) auto; gap: 8px; align-items: start; }
.assignment-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.assignment-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 9px; border: 1px solid var(--line); border-radius: 8px; background: #eef7f6; font-weight: 700; }
.assignment-pill form { margin: 0; }
.report-filter { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; align-items: end; margin-bottom: 20px; }
.report-filter label { min-width: 0; }
.report-filter input, .report-filter select { min-width: 0; }
label { display: grid; gap: 7px; color: #344054; font-weight: 700; }
input, select { width: 100%; border: 1px solid #c8d2df; border-radius: 6px; padding: 11px 12px; font: inherit; background: white; }
input[list] { padding-right: 34px; }
.check { display: flex; align-items: center; gap: 8px; }
.check input { width: auto; }
.badge { display: inline-block; padding: 5px 9px; border-radius: 999px; font-size: 12px; font-weight: 800; }
.badge.credit { background: #e8f7ef; color: var(--green); }
.badge.debit { background: #fff0ed; color: var(--red); }
.badge.pending { background: #fff7e6; color: var(--gold); }
.badge.approved { background: #e8f7ef; color: var(--green); }
.badge.cancelled { background: #fff0ed; color: var(--red); }
.flash { margin-bottom: 14px; padding: 12px 14px; border-radius: 6px; font-weight: 700; }
.flash.success { background: #e8f7ef; color: var(--green); }
.flash.error { background: #fff0ed; color: var(--red); }
.link { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; font-weight: 700; cursor: pointer; }
.icon-button { width: 34px; height: 34px; display: inline-grid; place-items: center; border: 1px solid var(--line); border-radius: 8px; background: #eef7f6; color: var(--accent); cursor: pointer; transition: color .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.icon-button svg { width: 17px; height: 17px; fill: currentColor; }
.icon-button:hover { background: var(--accent); border-color: var(--accent); color: white; box-shadow: 0 8px 18px rgba(13,127,136,.18); transform: translateY(-1px); }
.icon-button.copied { background: var(--green); border-color: var(--green); color: white; }
.payment-actions { display: grid; gap: 6px; justify-items: start; }
.payment-link-form { grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr) minmax(220px, 1fr) auto; align-items: end; margin-bottom: 18px; }
.generated-link { display: grid; gap: 12px; margin-bottom: 18px; }
.copy-field { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.recent-links { padding: 0; overflow: hidden; }
.recent-links .report-filter { margin: 0; padding: 16px 20px; border-bottom: 1px solid var(--line); box-shadow: none; border-left: 0; border-right: 0; border-radius: 0; }
.amount-form { border: 1px solid var(--line); border-radius: 8px; padding: 14px; margin-bottom: 16px; background: #fbfdff; }
.entry-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.entry-actions form { margin: 0; }
.entry-actions.approved-state { display: grid; gap: 5px; justify-items: start; }
.helper-text.neutral { color: var(--muted); }
.entry-table-wrap { width: 100%; max-width: 100%; overflow-x: auto; overflow-y: visible; border: 1px solid var(--line); border-radius: 8px; background: white; box-shadow: var(--shadow-soft); }
.entry-table { min-width: 1280px; border: 0; border-radius: 0; box-shadow: none; }
.entry-table th:last-child,
.entry-table td:last-child { width: 150px; min-width: 150px; }
.entry-table .entry-actions { min-width: 126px; align-items: flex-start; }
.entry-table .helper-text { display: inline-block; white-space: normal; overflow-wrap: normal; }
.entries-list { position: relative; }
.entries-list.loading { opacity: .55; pointer-events: none; }
.entry-search { display: grid; grid-template-columns: minmax(220px, 1fr) auto auto; gap: 12px; align-items: end; margin-bottom: 16px; }
.user-filter { display: grid; grid-template-columns: minmax(220px, 1.3fr) repeat(4, minmax(140px, 1fr)) auto auto; gap: 12px; align-items: end; margin-bottom: 16px; }
.entry-list-meta { color: var(--muted); font-size: 13px; font-weight: 800; margin: 0 0 10px; }
.pagination { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.pagination span { color: var(--muted); font-weight: 800; }
.pagination .disabled { opacity: .45; pointer-events: none; }
.utr-code { display: inline-block; max-width: 150px; overflow-wrap: anywhere; font-weight: 800; color: var(--accent); }
.payment-page { max-width: 880px; margin: 32px auto; }
.payment-head { border-bottom: 1px solid var(--line); margin: -4px 0 22px; padding-bottom: 18px; }
.payment-head span { color: var(--muted); font-weight: 800; text-transform: uppercase; font-size: 13px; }
.payment-head h1 { margin: 6px 0 0; font-size: 42px; }
.payment-grid { display: grid; grid-template-columns: 320px 1fr; gap: 26px; align-items: start; }
.payment-qr { display: grid; gap: 14px; justify-items: stretch; }
.payment-qr img { width: 100%; max-width: 300px; border: 1px solid var(--line); border-radius: 8px; padding: 12px; background: white; justify-self: center; }
.qr-code { width: min(100%, 300px); border: 1px solid var(--line); border-radius: 8px; padding: 12px; background: white; justify-self: center; box-shadow: var(--shadow-soft); }
.qr-code svg { display: block; width: 100%; height: auto; }
.upi-fallback { display: grid; gap: 5px; text-align: center; border: 1px dashed #a9bbc8; border-radius: 8px; padding: 12px; background: #f7fafc; }
.upi-fallback span { color: var(--muted); font-size: 13px; font-weight: 800; text-transform: uppercase; }
.upi-fallback strong { color: var(--accent); font-size: 20px; overflow-wrap: anywhere; }
.payment-details dl { display: grid; gap: 12px; margin: 0 0 18px; }
.payment-details dl div { display: flex; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.payment-details dt { color: var(--muted); font-weight: 800; }
.payment-details dd { margin: 0; font-weight: 900; text-align: right; overflow-wrap: anywhere; }
.utr-submitted { display: grid; gap: 6px; border: 1px solid var(--line); border-radius: 8px; padding: 14px; background: #e8f7ef; color: var(--green); }
.utr-submitted span { font-size: 20px; font-weight: 900; overflow-wrap: anywhere; }
.danger { color: var(--red); }
.approve-action { color: var(--green); }
@media (max-width: 900px) {
    .mobile-topbar { position: sticky; top: 0; z-index: 40; height: 58px; display: flex; align-items: center; justify-content: space-between; background: #101820; color: white; padding: 0 16px; box-shadow: 0 10px 24px rgba(15, 23, 42, .18); }
    .mobile-brand { font-size: 18px; font-weight: 900; color: white; }
    .mobile-brand:hover { color: white; }
    .menu-button { width: 42px; height: 42px; display: grid; place-content: center; gap: 5px; border: 1px solid rgba(255,255,255,.2); border-radius: 8px; cursor: pointer; }
    .menu-button span { width: 20px; height: 2px; background: white; display: block; border-radius: 999px; }
    .sidebar { position: fixed; inset: 0 auto 0 0; z-index: 60; width: min(82vw, 310px); transform: translateX(-105%); transition: transform .2s ease; padding: 20px 16px; overflow-y: auto; }
    .sidebar nav a, .nav-group summary { padding: 13px 12px; font-size: 15px; }
    .nav-group div a { font-size: 14px; padding: 11px 12px; }
    .close-menu { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; border: 1px solid rgba(255,255,255,.2); color: white; cursor: pointer; font-size: 18px; font-weight: 900; }
    .nav-backdrop { position: fixed; inset: 0; z-index: 50; background: rgba(9, 17, 26, .55); }
    .nav-toggle-input:checked ~ .sidebar { transform: translateX(0); }
    .nav-toggle-input:checked ~ .nav-backdrop { display: block; }
    .content { margin-left: 0; max-width: 100vw; padding: 16px; }
    .auth-content { padding: 16px; }
    .login-panel, .panel { padding: 16px; box-shadow: 0 8px 20px rgba(15, 23, 42, .05); }
    .stats, .stats.compact, .split, .inline-form, .report-filter, .quick-actions, .dashboard-grid, .new-user-panel, .chart-grid, .payment-grid, .payment-link-form, .copy-field { grid-template-columns: 1fr; }
    .entry-search, .user-filter { grid-template-columns: 1fr; }
    .section-title, .dashboard-mode-switch { align-items: flex-start; flex-direction: column; }
    .dashboard-hero { align-items: flex-start; flex-direction: column; padding: 20px; }
    .dashboard-hero h1 { font-size: 28px; }
    .hero-actions, .mode-actions { justify-content: flex-start; }
    .page-actions { justify-content: flex-start; }
    .page-head { align-items: flex-start; flex-direction: column; }
    .primary, .secondary { width: 100%; text-align: center; }
    .hero-actions, .page-actions, .mode-actions { width: 100%; }
    .stats strong { font-size: 21px; overflow-wrap: anywhere; }
    .bank-row { align-items: flex-start; flex-direction: column; }
    .mini-summary { grid-template-columns: 1fr; }
    .mini-summary div + div { border-left: 0; border-top: 1px solid var(--line); }
    .movement-chart { grid-template-columns: 1fr; justify-items: center; }
    .chart-legend { width: 100%; }
    .daily-chart { overflow-x: auto; grid-template-columns: repeat(7, 52px); }
    table { display: table; width: 100%; overflow: visible; white-space: normal; border: 0; background: transparent; }
    thead { display: none; }
    tbody { display: grid; gap: 12px; }
    tr { display: grid; gap: 0; background: white; border: 1px solid var(--line); border-radius: 8px; padding: 6px 0; box-shadow: 0 6px 16px rgba(15, 23, 42, .04); }
    td { display: grid; grid-template-columns: minmax(92px, 38%) minmax(0, 1fr); gap: 10px; align-items: center; border-bottom: 1px solid #eef2f6; padding: 10px 12px; text-align: right; overflow-wrap: anywhere; }
    td:last-child { border-bottom: 0; }
    td::before { content: attr(data-label); color: var(--muted); font-size: 12px; font-weight: 900; text-align: left; text-transform: uppercase; }
    td[colspan] { display: block; text-align: center; }
    td[colspan]::before { content: none; }
    td form { justify-self: end; }
    .payment-actions { justify-items: end; }
    .entry-table { display: block; width: 100%; overflow-x: auto; white-space: nowrap; border: 1px solid var(--line); background: white; }
    .entry-table thead { display: table-header-group; }
    .entry-table tbody { display: table-row-group; }
    .entry-table tr { display: table-row; border: 0; border-radius: 0; padding: 0; box-shadow: none; }
    .entry-table th, .entry-table td { display: table-cell; border-bottom: 1px solid var(--line); padding: 10px 12px; text-align: left; vertical-align: middle; overflow-wrap: normal; }
    .entry-table td::before { content: none; }
    .entry-table td form { justify-self: auto; }
    .entry-table .payment-actions { justify-items: start; }
    .pagination { justify-content: stretch; }
    .pagination a, .pagination span { flex: 1 1 auto; text-align: center; }
}

@media (max-width: 520px) {
    .content { padding: 12px; }
    .dashboard-hero, .stats div, .quick-actions a, .bank-row, .user-row { padding: 14px; }
    .sidebar { width: min(88vw, 300px); }
    h1 { font-size: 24px; }
    h2 { font-size: 17px; }
    .segmented { width: 100%; }
    .segmented label { flex: 1; justify-content: center; padding: 9px 8px; }
    input, select { min-height: 44px; }
    .report-filter { gap: 12px; }
    .dashboard-hero h1 { font-size: 24px; }
    .stats strong, .mini-summary strong { font-size: 19px; }
    .chart-panel .panel-title { padding: 14px; }
    .movement-chart, .daily-chart, .bank-bars { padding: 14px; }
    .daily-chart { grid-template-columns: repeat(7, 42px); gap: 8px; }
    .daily-bar-group { min-width: 18px; }
    .daily-value { font-size: 9px; max-height: 58px; }
    .daily-bar { width: 11px; }
    td { grid-template-columns: minmax(86px, 42%) minmax(0, 1fr); padding: 9px 10px; }
    .payment-head h1 { font-size: 30px; }
    .payment-page { margin: 12px auto; }
    .payment-qr img { max-width: 260px; }
}

@media (max-width: 760px) {
    .mode-actions,
    .stats,
    .quick-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mode-actions {
        display: grid;
    }
}

/* Smooth responsive theme refresh */
.sidebar {
    width: 248px;
    background: linear-gradient(180deg, #102332 0%, #0b1822 100%);
    box-shadow: 12px 0 34px rgba(9, 21, 32, .22);
}
.sidebar nav a,
.nav-group summary {
    border-radius: 8px;
    gap: 10px;
}
.sidebar nav a:hover,
.nav-group summary:hover {
    color: #fff;
    background: rgba(255,255,255,.1);
    transform: translateX(2px);
}
.nav-icon {
    width: 24px;
    height: 24px;
    flex-basis: 24px;
    border-radius: 7px;
    background: rgba(255,255,255,.12);
}
.admin-chip {
    padding: 14px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 8px;
    background: rgba(255,255,255,.06);
}
.content {
    margin-left: 248px;
    max-width: calc(100vw - 248px);
}
.login-panel,
.panel,
.stats div,
.quick-actions a {
    background: rgba(255,255,255,.94);
    border-color: rgba(220,229,239,.96);
    box-shadow: var(--shadow-soft);
}
.login-panel,
.panel {
    backdrop-filter: blur(12px);
}
.dashboard-hero {
    background: linear-gradient(135deg, rgba(13,76,90,.96), rgba(16,142,130,.9));
    box-shadow: 0 22px 48px rgba(16,67,78,.22);
    position: relative;
    overflow: hidden;
}
.dashboard-hero::after {
    content: "";
    position: absolute;
    inset: auto -5% -45% 45%;
    height: 180px;
    background: rgba(255,255,255,.12);
    transform: rotate(-10deg);
}
.dashboard-hero > * {
    position: relative;
    z-index: 1;
}
.dashboard-hero p {
    color: #c8f4ef;
}
.dashboard-hero span {
    color: #ecfffd;
}
.primary,
.secondary {
    border-radius: 8px;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.primary {
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    box-shadow: 0 10px 22px rgba(15,124,135,.22);
}
.primary:hover {
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(15,124,135,.27);
}
.secondary:hover,
.quick-actions a:hover,
.dashboard-stats .stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}
.quick-actions span,
.avatar {
    border-radius: 8px;
    background: #e7f7f5;
}
.panel-title {
    background: linear-gradient(180deg, #fff, #fbfdff);
}
table {
    border-collapse: separate;
    border-spacing: 0;
    box-shadow: var(--shadow-soft);
}
th,
td {
    border-bottom-color: var(--soft-line);
}
tbody tr {
    transition: background .18s ease;
}
tbody tr:hover {
    background: #fbfdfd;
}
input,
select {
    border-radius: 8px;
    color: var(--ink);
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
input:focus,
select:focus {
    outline: 0;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(15,124,135,.14);
}
.date-picker {
    cursor: pointer;
}
.select2-container {
    max-width: 100%;
    font: inherit;
}
select + .select2-container {
    width: 100% !important;
}
.select2-container--default .select2-selection--single {
    min-height: 44px;
    border: 1px solid #c8d2df;
    border-radius: 8px;
    background: white;
    display: flex;
    align-items: center;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.select2-container--default .select2-selection--multiple {
    min-height: 44px;
    border: 1px solid #c8d2df;
    border-radius: 8px;
    background: white;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #eef7f6;
    color: var(--ink);
    margin-top: 7px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--ink);
    line-height: 1.35;
    padding-left: 12px;
    padding-right: 34px;
    width: 100%;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--muted);
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 42px;
    right: 8px;
}
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(15,124,135,.14);
}
.select2-dropdown {
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--shadow);
}
.select2-search--dropdown {
    padding: 10px;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid #c8d2df;
    border-radius: 8px;
    padding: 10px 12px;
}
.select2-results__option {
    padding: 10px 12px;
}
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background: var(--accent);
}
.select2-container--default .select2-results__option--selected {
    background: #eaf7f5;
    color: var(--ink);
}
.select2-container--disabled .select2-selection--single {
    background: #eef3f7;
}
.flash {
    border-radius: 8px;
    box-shadow: var(--shadow-soft);
}
.flash.success {
    border: 1px solid #c9ecd8;
}
.flash.error {
    border: 1px solid #f5cdc8;
}
.donut {
    box-shadow: inset 0 0 0 1px var(--line), 0 12px 28px rgba(18,32,47,.08);
}
.credit-bar {
    background: linear-gradient(180deg, #38b986, var(--green));
}
.debit-bar {
    background: linear-gradient(180deg, #e87265, var(--red));
}
.bar-track span {
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
}
.payment-page {
    width: min(100%, 880px);
    overflow: hidden;
}
.payment-grid {
    grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
}
.payment-details {
    min-width: 0;
}
.payment-details dl div {
    min-width: 0;
}
.payment-details dt {
    flex: 0 0 auto;
}
.payment-details dd {
    min-width: 0;
}

@media (max-width: 1100px) {
    .stats,
    .quick-actions,
    .chart-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .dashboard-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .mobile-topbar {
        background: linear-gradient(135deg, #102332, #0d5360);
    }
    .content {
        margin-left: 0;
        max-width: 100vw;
    }
    .stats,
    .quick-actions,
    .chart-grid {
        grid-template-columns: 1fr;
    }
    table {
        box-shadow: none;
    }
    tr,
    .entry-table {
        box-shadow: var(--shadow-soft);
    }
}

@media (max-width: 760px) {
    .payment-grid {
        grid-template-columns: 1fr;
    }
    .payment-details dl div {
        display: grid;
        grid-template-columns: minmax(92px, auto) minmax(0, 1fr);
    }
}

@media (max-width: 900px) {
    .entry-table-wrap {
        overflow: visible;
        border: 0;
        background: transparent;
        box-shadow: none;
    }
    .entry-table {
        display: table;
        width: 100%;
        min-width: 0;
        overflow: visible;
        white-space: normal;
        border: 0;
        background: transparent;
        box-shadow: none;
    }
    .entry-table thead {
        display: none;
    }
    .entry-table tbody {
        display: grid;
        gap: 12px;
    }
    .entry-table tr {
        display: grid;
        border: 1px solid var(--line);
        border-radius: 8px;
        padding: 6px 0;
        background: white;
        box-shadow: var(--shadow-soft);
    }
    .entry-table th,
    .entry-table td {
        display: grid;
        grid-template-columns: minmax(96px, 38%) minmax(0, 1fr);
        gap: 10px;
        align-items: center;
        border-bottom: 1px solid var(--soft-line);
        padding: 10px 12px;
        text-align: right;
        white-space: normal;
        overflow-wrap: anywhere;
    }
    .entry-table td:last-child {
        border-bottom: 0;
    }
    .entry-table td::before {
        content: attr(data-label);
        color: var(--muted);
        font-size: 12px;
        font-weight: 900;
        text-align: left;
        text-transform: uppercase;
    }
    .entry-table td[colspan] {
        display: block;
        text-align: center;
    }
    .entry-table td[colspan]::before {
        content: none;
    }
    .entry-table td form {
        justify-self: end;
    }
    .entry-table .payment-actions,
    .entry-table .entry-actions {
        justify-content: flex-end;
        justify-items: end;
    }
    .entry-table .entry-actions.approved-state {
        justify-items: end;
    }
}

@media (max-width: 520px) {
    .entry-table th,
    .entry-table td {
        grid-template-columns: minmax(82px, 34%) minmax(0, 1fr);
    }
}

@media (max-width: 1200px) {
    .entry-table-wrap {
        overflow: visible;
        border: 0;
        background: transparent;
        box-shadow: none;
    }
    .entry-table {
        display: block;
        width: 100%;
        min-width: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
        overflow: visible;
        white-space: normal;
    }
    .entry-table thead {
        display: none;
    }
    .entry-table tbody {
        display: grid;
        gap: 12px;
    }
    .entry-table tr {
        display: grid;
        width: 100%;
        min-width: 0;
        border: 1px solid var(--line);
        border-radius: 8px;
        padding: 6px 0;
        background: white;
        box-shadow: var(--shadow-soft);
    }
    .entry-table th,
    .entry-table td {
        width: auto;
        min-width: 0;
        display: grid;
        grid-template-columns: minmax(92px, 34%) minmax(0, 1fr);
        gap: 10px;
        min-width: 0;
        align-items: center;
        border-bottom: 1px solid var(--soft-line);
        padding: 10px 12px;
        text-align: right;
        white-space: normal;
        overflow-wrap: anywhere;
    }
    .entry-table td:last-child {
        border-bottom: 0;
    }
    .entry-table td::before {
        content: attr(data-label);
        color: var(--muted);
        font-size: 12px;
        font-weight: 900;
        text-align: left;
        text-transform: uppercase;
    }
    .entry-table td[colspan] {
        display: block;
        text-align: center;
    }
    .entry-table td[colspan]::before {
        content: none;
    }
    .entry-table .payment-actions,
    .entry-table .entry-actions {
        justify-content: flex-end;
        justify-items: end;
        min-width: 0;
    }
}

@media (max-width: 420px) {
    .entry-table th,
    .entry-table td {
        grid-template-columns: minmax(74px, 30%) minmax(0, 1fr);
        padding-inline: 10px;
    }
}

/* Polished admin surface */
.brand,
.mobile-brand {
    letter-spacing: 0;
}
.sidebar {
    border-right: 1px solid rgba(255,255,255,.08);
}
.sidebar nav a,
.nav-group summary {
    min-height: 44px;
}
.nav-group summary::after {
    margin-left: auto;
}
.admin-chip {
    line-height: 1.35;
}
.content {
    padding: 34px;
}
.page-head {
    padding-bottom: 6px;
}
.page-head h1 {
    font-size: 30px;
}
.dashboard-hero {
    min-height: 178px;
    border: 1px solid rgba(255,255,255,.18);
    background:
        linear-gradient(135deg, rgba(16,32,51,.98), rgba(13,127,136,.9) 58%, rgba(101,84,217,.82)),
        linear-gradient(90deg, rgba(255,255,255,.08), transparent);
}
.dashboard-hero::before {
    content: "";
    position: absolute;
    inset: 18px 22px auto auto;
    width: 140px;
    height: 72px;
    border-top: 1px solid rgba(255,255,255,.18);
    border-right: 1px solid rgba(255,255,255,.18);
    border-radius: 8px;
}
.dashboard-hero h1 {
    font-size: 38px;
}
.stats {
    gap: 16px;
}
.stats div,
.quick-actions a,
.panel,
.entry-table-wrap,
table {
    border-color: rgba(216,227,238,.9);
}
.stats div {
    min-height: 112px;
    display: grid;
    align-content: center;
}
.stats span,
.mini-summary span {
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0;
}
.stats strong {
    color: var(--ink);
}
.dashboard-stats .stat-card::before {
    width: 6px;
}
.quick-actions a {
    min-height: 72px;
    padding: 16px;
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(249,252,255,.94));
}
.quick-actions span,
.avatar {
    color: white;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    box-shadow: 0 8px 18px rgba(13,127,136,.18);
}
.quick-actions a:nth-child(2) span {
    background: linear-gradient(135deg, #16865f, #31b87c);
}
.quick-actions a:nth-child(3) span {
    background: linear-gradient(135deg, #6554d9, #8d7cf2);
}
.quick-actions a:nth-child(4) span {
    background: linear-gradient(135deg, #bd8421, #e4aa39);
}
.panel-title a {
    font-size: 13px;
}
.chart-panel,
.dashboard-panel {
    box-shadow: var(--shadow-soft);
}
.bank-row,
.user-row {
    transition: background .18s ease;
}
.bank-row:hover,
.user-row:hover {
    background: #f8fbfd;
}
.bar-track {
    background: #e8eff5;
}
.badge {
    border: 1px solid transparent;
}
.badge.credit,
.badge.approved {
    border-color: #bee8cf;
}
.badge.debit {
    border-color: #f2c7c1;
}
.badge.pending {
    border-color: #f0d89c;
}
.badge.cancelled {
    border-color: #f2c7c1;
}
.primary,
.secondary,
.link {
    -webkit-tap-highlight-color: transparent;
}
.primary:active,
.secondary:active,
.quick-actions a:active {
    transform: translateY(0);
}

@media (max-width: 900px) {
    .auth-content::before {
        clip-path: polygon(0 0, 100% 0, 100% 36%, 0 58%);
    }
    .content {
        padding: 18px;
    }
    .page-head h1 {
        font-size: 26px;
    }
    .login-brand {
        padding: 26px 24px 20px;
    }
    .login-panel form {
        padding: 24px;
    }
    .login-foot {
        padding: 0 24px 24px;
        flex-direction: column;
    }
}

@media (max-width: 520px) {
    .auth-content {
        align-content: start;
        padding-top: 28px;
    }
    .auth-content::before {
        clip-path: polygon(0 0, 100% 0, 100% 32%, 0 48%);
    }
    .content {
        padding: 12px;
    }
    .login-brand h1 {
        font-size: 28px;
    }
    .brand-mark {
        width: 42px;
        height: 42px;
        margin-bottom: 14px;
    }
}

@media (max-width: 900px) {
    .page-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        width: 100%;
    }
    .page-actions .primary,
    .page-actions .secondary {
        width: 100%;
        min-width: 0;
        min-height: 40px;
        padding: 10px 8px;
        font-size: 12px;
        white-space: nowrap;
    }
}

@media (max-width: 360px) {
    .page-actions .primary,
    .page-actions .secondary {
        font-size: 11px;
        padding-inline: 6px;
    }
}

/* Keep entries as a horizontally scrollable table on small screens. */
@media (max-width: 1200px) {
    .entry-table-wrap {
        overflow-x: auto;
        overflow-y: visible;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: white;
        box-shadow: var(--shadow-soft);
        -webkit-overflow-scrolling: touch;
    }
    .entry-table {
        display: table;
        width: 100%;
        min-width: 1280px;
        border: 0;
        border-radius: 0;
        background: white;
        box-shadow: none;
        white-space: normal;
    }
    .entry-table thead {
        display: table-header-group;
    }
    .entry-table tbody {
        display: table-row-group;
    }
    .entry-table tr {
        display: table-row;
        width: auto;
        min-width: 0;
        border: 0;
        border-radius: 0;
        padding: 0;
        box-shadow: none;
    }
    .entry-table th,
    .entry-table td {
        display: table-cell;
        width: auto;
        min-width: 0;
        border: 1px solid var(--line);
        padding: 10px 12px;
        text-align: left;
        vertical-align: middle;
        white-space: normal;
        overflow-wrap: normal;
    }
    .entry-table td::before {
        content: none;
    }
    .entry-table td[colspan] {
        display: table-cell;
        text-align: center;
    }
    .entry-table td form {
        justify-self: auto;
    }
    .entry-table .payment-actions,
    .entry-table .entry-actions {
        justify-content: flex-start;
        justify-items: start;
        min-width: 126px;
    }
}

/* Compact dashboard layout for narrow phones. */
@media (max-width: 520px) {
    .content {
        padding: 8px;
    }

    .dashboard-hero {
        min-height: 0;
        padding: 12px;
        gap: 10px;
        margin-bottom: 10px;
    }

    .dashboard-hero p {
        margin-bottom: 2px;
        font-size: 11px;
    }

    .dashboard-hero h1 {
        margin-bottom: 0;
        font-size: 22px;
    }

    .dashboard-hero span,
    .dashboard-hero::before,
    .dashboard-hero::after {
        display: none;
    }

    .hero-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .dashboard-mode-switch {
        padding: 10px;
        gap: 8px;
        margin-bottom: 10px;
    }

    .dashboard-mode-switch span {
        margin-bottom: 1px;
        font-size: 10px;
    }

    .dashboard-mode-switch strong {
        font-size: 16px;
    }

    .mode-actions {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
    }

    .primary,
    .secondary,
    .mode-actions .secondary {
        min-height: 34px;
        padding: 8px 10px;
        font-size: 12px;
    }

    .stats,
    .quick-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin-bottom: 10px;
    }

    .stats div {
        min-height: 66px;
        padding: 10px 10px 10px 13px;
        align-content: center;
    }

    .stats span,
    .mini-summary span {
        margin-bottom: 4px;
        font-size: 9px;
        line-height: 1.15;
    }

    .stats strong,
    .mini-summary strong {
        font-size: 16px;
        line-height: 1.2;
    }

    .dashboard-stats .stat-card::before {
        width: 4px;
    }

    .quick-actions a {
        min-height: 48px;
        padding: 9px;
        gap: 8px;
        font-size: 11px;
        line-height: 1.2;
    }

    .quick-actions span {
        width: 24px;
        height: 24px;
        flex: 0 0 24px;
    }

    .quick-actions svg {
        width: 14px;
        height: 14px;
    }

    .chart-grid,
    .dashboard-grid,
    .dashboard-side {
        gap: 10px;
        margin-bottom: 10px;
    }

    .panel-title {
        padding: 10px 12px;
    }
}

@media (max-width: 760px) {
    .hero-actions,
    .stats,
    .quick-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mode-actions {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .report-filter.panel {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        padding: 12px;
    }

    .report-filter.panel label {
        gap: 5px;
        font-size: 11px;
    }

    .report-filter.panel input,
    .report-filter.panel select,
    .report-filter.panel .select2-container--default .select2-selection--single {
        min-height: 38px;
        font-size: 12px;
    }

    .report-filter.panel .primary,
    .report-filter.panel .secondary {
        min-height: 38px;
    }
}