:root {
    --bg: #f6f8fc;
    --surface: #ffffff;
    --surface-2: #f8fafc;
    --text: #0f172a;
    --muted: #475569;
    --muted-2: #64748b;
    --border: #dbe3ef;
    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --green: #059669;
    --blue: #2563eb;
    --purple: #7c3aed;
    --red: #dc2626;
    --soft-green: #ecfdf5;
    --soft-blue: #eff6ff;
    --soft-purple: #f5f3ff;
    --shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
    --radius: 16px;
}

html[data-theme="dark"] {
    --bg: #06111f;
    --surface: #0f1b2d;
    --surface-2: #0a1626;
    --text: #f8fafc;
    --muted: #d7e0ec;
    --muted-2: #9fb0c4;
    --border: #2a3a52;
    --primary: #2f7df6;
    --primary-dark: #2563eb;
    --green: #2dd4bf;
    --blue: #60a5fa;
    --purple: #a78bfa;
    --red: #ff6b6b;
    --soft-green: rgba(45, 212, 191, 0.12);
    --soft-blue: rgba(47, 125, 246, 0.12);
    --soft-purple: rgba(167, 139, 250, 0.14);
    --shadow: 0 22px 55px rgba(0, 0, 0, 0.34);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: 400;
}

button,
input,
select {
    font: inherit;
}

button {
    cursor: pointer;
}

input,
select {
    width: 100%;
    height: 42px;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0 12px;
    background: var(--surface);
    color: var(--text);
}

input:focus,
select:focus {
    outline: 2px solid rgba(37, 99, 235, 0.15);
    border-color: var(--primary);
}

input[type="month"] {
    color-scheme: light;
}

input[type="month"]::-webkit-calendar-picker-indicator {
    opacity: 0.8;
    cursor: pointer;
}

html[data-theme="dark"] input[type="month"] {
    color-scheme: dark;
}

html[data-theme="dark"] input[type="month"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    opacity: 0.9;
}

h1,
h2,
h3,
p {
    margin: 0;
}

h1,
.brand-block h1 {
    font-size: 22px;
    line-height: 1.25;
    font-weight: 600;
}

h2,
.sidebar-header h2,
.calendar-header h2 {
    font-size: 14px;
    line-height: 1.25;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
}

h3,
.record-card-header h3,
.save-bar h3 {
    font-size: 15px;
    line-height: 1.25;
    font-weight: 600;
}

p,
.brand-block p,
.record-title-area p,
.record-card-header p,
.save-bar p,
.calendar-detail p,
.calendar-detail small {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
    font-weight: 400;
}

.btn {
    height: 42px;
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 0 14px;
    font-weight: 500;
    white-space: nowrap;
    background: var(--surface);
    color: var(--text);
}

.btn:hover {
    opacity: 0.92;
}

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

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

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

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

.btn-small {
    height: 34px;
    padding: 0 12px;
    font-size: 13px;
    border-color: var(--border);
}

.topbar {
    min-height: 108px;
    padding: 28px 30px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
}

.brand-block p {
    margin-top: 10px;
}

.top-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.account-dropdown {
    position: relative;
}

.account-dropdown summary {
    list-style: none;
}

.account-dropdown summary::-webkit-details-marker {
    display: none;
}

.account-summary {
    height: 42px;
    min-width: 70px;
    padding: 0 10px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 500;
}

.icon-only-account {
    min-width: 70px;
}

.account-avatar {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: #dbeafe;
    color: #1e3a8a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

html[data-theme="dark"] .account-avatar {
    background: #1e3a8a;
    color: #dbeafe;
}

.account-caret {
    color: var(--muted);
    font-size: 11px;
}

.account-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    width: 245px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow);
    padding: 10px;
    z-index: 80;
}

.account-info {
    display: grid;
    gap: 3px;
    padding: 10px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 6px;
}

.account-info strong {
    font-weight: 600;
}

.account-info small {
    color: var(--muted-2);
    word-break: break-word;
}

.account-menu a,
.account-menu-button {
    display: block;
    width: 100%;
    color: var(--text);
    text-decoration: none;
    padding: 10px;
    border-radius: 10px;
    background: transparent;
    border: 0;
    text-align: left;
    font-weight: 500;
}

.account-menu a:hover,
.account-menu-button:hover {
    background: var(--surface-2);
}

.account-menu .danger-link {
    color: var(--red);
}

.app-layout {
    max-width: 1680px;
    margin: 0 auto;
    padding: 22px 28px 32px;
    display: grid;
    grid-template-columns: 360px minmax(0, 1fr);
    gap: 28px;
}

.sidebar {
    min-width: 0;
}

.side-panel,
.panel,
.record-card,
.empty-state {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.side-panel {
    min-height: calc(100vh - 170px);
    padding: 22px;
}

.sidebar-header {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    margin-bottom: 20px;
}

.tracker-list {
    display: grid;
    gap: 10px;
}

.tracker-item {
    height: 48px;
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text);
    text-align: left;
    padding: 0 12px 0 18px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
}

.tracker-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tracker-delete-btn {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--red);
    font-size: 20px;
    line-height: 1;
}

.tracker-delete-btn:hover {
    background: rgba(220, 38, 38, 0.12);
}

.tracker-item.active {
    background: linear-gradient(90deg, rgba(37, 99, 235, 0.15), rgba(37, 99, 235, 0.05));
    color: var(--primary);
    border-color: rgba(37, 99, 235, 0.22);
}

html[data-theme="dark"] .tracker-item.active {
    background: rgba(37, 99, 235, 0.22);
}

.sidebar-divider {
    height: 1px;
    background: var(--border);
    margin: 24px 0;
}

.calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 18px;
}

.calendar-month-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 16px;
}

.calendar-month-nav strong {
    font-size: 13px;
    font-weight: 500;
}

.calendar-nav-actions {
    display: flex;
    gap: 8px;
}

.calendar-nav-btn {
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text);
    font-size: 24px;
    line-height: 1;
}

.calendar-nav-btn:hover {
    background: var(--surface-2);
}

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

.calendar-day-name {
    height: 24px;
    display: grid;
    place-items: center;
    color: var(--muted);
    font-weight: 500;
    font-size: 13px;
}

.calendar-day {
    position: relative;
    height: 42px;
    border-radius: 10px;
    border: 1px solid transparent;
    display: grid;
    place-items: center;
    color: var(--text);
    background: transparent;
    cursor: pointer;
    font-weight: 500;
    font-size: 13px;
}

.calendar-day:hover {
    background: var(--surface-2);
}

.calendar-day.active {
    background: var(--primary);
    color: #fff;
}

.calendar-day.empty {
    color: var(--muted-2);
    cursor: default;
}

.calendar-day.empty:hover {
    background: transparent;
}

.calendar-date.today {
    width: 28px;
    height: 28px;
    border-radius: 9px;
    display: inline-grid;
    place-items: center;
    background: var(--primary);
    color: #fff;
}

.calendar-day.active .calendar-date.today {
    background: #fff;
    color: var(--primary);
}

.calendar-entry-count {
    position: absolute;
    right: 4px;
    bottom: 3px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    display: inline-grid;
    place-items: center;
    background: var(--green);
    color: #fff;
    font-size: 10px;
    line-height: 1;
    font-weight: 600;
}

.calendar-detail {
    margin-top: 22px;
    padding: 14px;
    min-height: 112px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-2);
}

.calendar-detail-title {
    font-weight: 600;
    margin-bottom: 8px;
}

.calendar-detail-row {
    margin-top: 8px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
}

.workspace {
    min-width: 0;
}

.empty-state {
    padding: 48px 24px;
    text-align: center;
}

.empty-state p {
    margin-top: 8px;
}

.record-toolbar {
    padding: 28px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 34px;
    align-items: start;
    margin-bottom: 24px;
}

.record-title-area,
.period-picker {
    min-width: 0;
}

.record-title-area label,
.period-picker label {
    display: block;
    height: 18px;
    margin-bottom: 8px;
    color: var(--muted);
    font-size: 12px;
    line-height: 18px;
    font-weight: 600;
}

.record-title-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 110px;
    gap: 12px;
    align-items: start;
}

.record-title-row input,
.record-title-row .btn,
#saveTitleBtn,
.period-picker input {
    height: 44px;
    min-height: 44px;
}

#saveTitleBtn {
    padding-left: 12px;
    padding-right: 12px;
}

.record-title-area p {
    margin-top: 12px;
}

.period-picker input {
    font-weight: 500;
    padding-left: 14px;
    padding-right: 14px;
}

.record-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
}

.record-card {
    overflow: hidden;
    height: auto;
    align-self: start;
}

@media (min-width: 761px) {
    .record-card {
        display: flex;
        flex-direction: column;
        height: 528px;
    }

    .record-card .table-wrap {
        flex: 1 1 auto;
        min-height: 0;
        max-height: 305px;
        overflow-x: auto;
        overflow-y: auto;
    }

    .record-card .table-wrap table {
        min-width: 100%;
    }
}

.record-card-header {
    min-height: 84px;
    padding: 20px 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    border-bottom: 1px solid var(--border);
}

.record-card-header p {
    margin-top: 8px;
}

.income-card .record-card-header {
    background: var(--soft-green);
}

.income-card h3 {
    color: var(--green);
}

.expense-card .record-card-header {
    background: rgba(220, 38, 38, 0.10);
}

.expense-card h3 {
    color: var(--red);
}

html[data-theme="dark"] .expense-card .record-card-header {
    background: rgba(251, 113, 133, 0.10);
}

.table-wrap {
    overflow-x: auto;
    padding: 18px 22px 0;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th {
    padding: 12px 8px;
    border-bottom: 1px solid var(--border);
    color: var(--muted);
    text-align: left;
    font-size: 12px;
    font-weight: 600;
}

td {
    padding: 10px 8px;
    border-bottom: 1px solid var(--border);
}

td,
td input {
    font-size: 14px;
    line-height: 1.3;
    font-weight: 400;
}

td input {
    height: 42px;
}

.action-buttons {
    display: flex;
    gap: 8px;
}

.row-minus {
    height: 38px;
    min-width: 82px;
    border: 0;
    border-radius: 10px;
    padding: 0 12px;
    background: #ef4444;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
}

.card-total,
.expense-total-row {
    min-height: 68px;
    padding: 18px 22px;
    border-top: 1px solid var(--border);
}

.card-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.card-total span,
.expense-total-row span {
    font-weight: 600;
    font-size: 12px;
}

.card-total strong,
.expense-total-row strong {
    font-size: 18px;
    line-height: 1.2;
    font-weight: 600;
}

.total-green {
    background: var(--soft-green);
    color: var(--green);
}

.expense-total-row {
    background: rgba(220, 38, 38, 0.08);
    color: var(--red);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

html[data-theme="dark"] .expense-total-row {
    background: rgba(251, 113, 133, 0.10);
}

.expense-total-row div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.summary-row {
    margin-top: 14px;
    padding: 12px 14px;
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    gap: 12px;
    align-items: center;
}

.summary-card {
    min-height: 58px;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.summary-card span {
    display: block;
    font-weight: 600;
    font-size: 12px;
    margin-bottom: 4px;
}

.summary-card strong {
    font-size: 17px;
    line-height: 1.15;
    font-weight: 600;
}

.summary-green {
    background: var(--soft-green);
    color: var(--green);
}

.summary-blue {
    background: rgba(220, 38, 38, 0.08);
    color: var(--red);
}

html[data-theme="dark"] .summary-blue {
    background: rgba(251, 113, 133, 0.10);
}

.summary-purple {
    background: var(--soft-purple);
    color: var(--purple);
}

.summary-symbol {
    color: var(--muted);
    font-weight: 600;
    font-size: 16px;
    line-height: 1;
}

.save-bar {
    margin-top: 24px;
    padding: 22px 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
}

.save-bar p {
    margin-top: 8px;
}

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

.save-btn {
    min-width: 160px;
}

.toast {
    position: fixed;
    right: 22px;
    bottom: 22px;
    background: var(--text);
    color: var(--surface);
    border-radius: 12px;
    padding: 12px 16px;
    box-shadow: var(--shadow);
    z-index: 100;
    font-size: 14px;
    font-weight: 500;
}

footer {
    text-align: center;
    color: var(--muted);
    padding: 24px;
}

.muted {
    color: var(--muted);
}

html[data-theme="dark"] input,
html[data-theme="dark"] select {
    background: #0f172a;
    color: var(--text);
    border-color: var(--border);
}

html[data-theme="dark"] input::placeholder {
    color: var(--muted-2);
}

html[data-theme="dark"] .card-total strong,
html[data-theme="dark"] .expense-total-row strong,
html[data-theme="dark"] .summary-card strong {
    color: inherit;
}

html[data-theme="dark"] .btn-green {
    color: #06281f;
}

html[data-theme="dark"] .btn-blue {
    background: var(--red);
    color: #fff;
}

@media (max-width: 1250px) {
    .app-layout,
    .record-grid,
    .summary-row {
        grid-template-columns: 1fr;
    }

    .record-toolbar {
        grid-template-columns: 1fr;
    }

    .summary-symbol {
        display: none;
    }
}



@media print {
    .top-actions,
    .sidebar,
    .save-bar,
    footer {
        display: none !important;
    }

    .app-layout {
        display: block;
    }

    body {
        background: #fff;
    }

    .panel,
    .record-card,
    .side-panel {
        box-shadow: none;
    }
}

/* Dark mode premium color patch */
html[data-theme="dark"] body {
    background:
        radial-gradient(circle at 18% 12%, rgba(47, 125, 246, 0.10), transparent 28%),
        radial-gradient(circle at 80% 22%, rgba(45, 212, 191, 0.07), transparent 24%),
        var(--bg);
    color: var(--text);
}

html[data-theme="dark"] .topbar,
html[data-theme="dark"] .side-panel,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .record-card,
html[data-theme="dark"] .empty-state {
    background:
        linear-gradient(145deg, rgba(15, 27, 45, 0.98), rgba(8, 19, 34, 0.98));
    border-color: var(--border);
    box-shadow: 0 22px 55px rgba(0, 0, 0, 0.34);
}

html[data-theme="dark"] .topbar {
    border-bottom-color: #25364c;
}

html[data-theme="dark"] .brand-block p,
html[data-theme="dark"] .record-title-area p,
html[data-theme="dark"] .record-card-header p,
html[data-theme="dark"] .save-bar p,
html[data-theme="dark"] .calendar-detail p,
html[data-theme="dark"] .calendar-detail small {
    color: var(--muted);
}

html[data-theme="dark"] input,
html[data-theme="dark"] select {
    background: #0b1626;
    color: var(--text);
    border-color: #31435c;
}

html[data-theme="dark"] input::placeholder {
    color: #8798ad;
}

html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus {
    border-color: var(--primary);
    outline-color: rgba(47, 125, 246, 0.20);
}

html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .save-btn {
    background: linear-gradient(135deg, #2f7df6, #2563eb);
    border-color: #2f7df6;
    color: #ffffff;
    box-shadow: 0 10px 26px rgba(37, 99, 235, 0.22);
}

html[data-theme="dark"] .btn-soft,
html[data-theme="dark"] .account-summary,
html[data-theme="dark"] .tracker-item {
    background: #0b1626;
    border-color: #31435c;
    color: var(--text);
}

html[data-theme="dark"] .tracker-item.active {
    background: rgba(47, 125, 246, 0.18);
    border-color: rgba(47, 125, 246, 0.38);
    color: #8cbcff;
}

html[data-theme="dark"] .account-menu,
html[data-theme="dark"] .calendar-detail,
html[data-theme="dark"] .calendar-detail-row {
    background: #0b1626;
    border-color: #31435c;
}

html[data-theme="dark"] .account-menu a:hover,
html[data-theme="dark"] .account-menu-button:hover,
html[data-theme="dark"] .calendar-nav-btn:hover,
html[data-theme="dark"] .calendar-day:hover {
    background: rgba(47, 125, 246, 0.12);
}

html[data-theme="dark"] .income-card .record-card-header,
html[data-theme="dark"] .total-green,
html[data-theme="dark"] .summary-green {
    background:
        linear-gradient(135deg, rgba(45, 212, 191, 0.16), rgba(45, 212, 191, 0.06));
    color: var(--green);
}

html[data-theme="dark"] .income-card .record-card-header {
    border-bottom-color: rgba(45, 212, 191, 0.20);
}

html[data-theme="dark"] .income-card h3,
html[data-theme="dark"] #totalIncome,
html[data-theme="dark"] #summaryIncome {
    color: var(--green);
}

html[data-theme="dark"] .btn-green {
    background: linear-gradient(135deg, #2dd4bf, #0d9488);
    color: #05231f;
    border-color: rgba(45, 212, 191, 0.40);
    box-shadow: 0 10px 26px rgba(45, 212, 191, 0.12);
}

html[data-theme="dark"] .expense-card .record-card-header,
html[data-theme="dark"] .expense-total-row,
html[data-theme="dark"] .summary-blue {
    background:
        linear-gradient(135deg, rgba(255, 107, 107, 0.16), rgba(255, 107, 107, 0.06));
    color: var(--red);
}

html[data-theme="dark"] .expense-card .record-card-header {
    border-bottom-color: rgba(255, 107, 107, 0.22);
}

html[data-theme="dark"] .expense-card h3,
html[data-theme="dark"] #totalEstimated,
html[data-theme="dark"] #totalPaid,
html[data-theme="dark"] #summaryPaid {
    color: var(--red);
}

html[data-theme="dark"] .btn-blue,
html[data-theme="dark"] .row-minus {
    background: linear-gradient(135deg, #ff6b6b, #ef4444);
    color: #ffffff;
    border-color: rgba(255, 107, 107, 0.45);
    box-shadow: 0 10px 26px rgba(239, 68, 68, 0.14);
}

html[data-theme="dark"] .summary-purple {
    background:
        linear-gradient(135deg, rgba(167, 139, 250, 0.18), rgba(167, 139, 250, 0.07));
    color: var(--purple);
}

html[data-theme="dark"] #summaryRemaining {
    color: var(--purple);
}

html[data-theme="dark"] th,
html[data-theme="dark"] .record-title-area label,
html[data-theme="dark"] .period-picker label,
html[data-theme="dark"] .calendar-day-name,
html[data-theme="dark"] .calendar-month-nav strong {
    color: #d7e0ec;
}

html[data-theme="dark"] td,
html[data-theme="dark"] th,
html[data-theme="dark"] .card-total,
html[data-theme="dark"] .expense-total-row,
html[data-theme="dark"] .record-card-header,
html[data-theme="dark"] .sidebar-divider {
    border-color: #26384f;
}

html[data-theme="dark"] .calendar-day {
    color: #eef4ff;
}

html[data-theme="dark"] .calendar-day.active,
html[data-theme="dark"] .calendar-date.today {
    background: #2f7df6;
    color: #ffffff;
}

html[data-theme="dark"] .calendar-entry-count {
    background: #2dd4bf;
    color: #05231f;
}

html[data-theme="dark"] .summary-card,
html[data-theme="dark"] .record-card {
    border-color: #31435c;
}

html[data-theme="dark"] .summary-symbol {
    color: #d7e0ec;
}

html[data-theme="dark"] .toast {
    background: #f8fafc;
    color: #0b1220;
}

@media (max-width: 760px) {
    .topbar {
        min-height: auto;
        padding: 22px 20px;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
        gap: 12px;
    }

    .brand-block {
        min-width: 0;
        padding: 0;
        margin: 0;
    }

    .brand-block h1 {
        font-size: 21px;
        line-height: 1.25;
        margin: 0;
        padding: 0;
    }

    .brand-block p {
        margin-top: 10px;
        max-width: 265px;
        font-size: 13px;
        line-height: 1.45;
    }

    .top-actions {
        position: static;
        width: auto;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: flex-end;
        align-items: flex-start;
        grid-column: 2;
        grid-row: 1;
    }

    .account-dropdown {
        position: relative;
    }

    .account-summary {
        width: 54px;
        min-width: 54px;
        height: 40px;
        padding: 0 8px;
        border-radius: 10px;
    }

    .account-avatar {
        width: 27px;
        height: 27px;
        font-size: 13px;
    }

    .account-caret {
        font-size: 10px;
    }

    .account-menu {
        right: 0;
        left: auto;
        top: calc(100% + 10px);
        width: min(280px, calc(100vw - 40px));
    }

    .app-layout {
        padding: 16px;
        gap: 16px;
        grid-template-columns: 1fr;
    }

    .side-panel,
    .record-toolbar,
    .record-card-header,
    .summary-row,
    .save-bar {
        padding: 16px;
    }

    .record-toolbar {
        grid-template-columns: 1fr;
    }

    .record-title-row {
        grid-template-columns: 1fr;
    }

    .record-title-row input,
    .record-title-row .btn,
    #saveTitleBtn,
    .period-picker input {
        height: 42px;
        min-height: 42px;
    }

    .record-grid,
    .summary-row {
        grid-template-columns: 1fr;
    }

    .summary-symbol {
        display: none;
    }

    .record-card-header {
        flex-direction: column;
        align-items: stretch;
        min-height: 0;
    }

    .record-card-header .btn {
        width: 100%;
    }

    .table-wrap {
        padding: 12px 12px 0;
    }

    .save-bar {
        align-items: stretch;
    }

    .save-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        width: 100%;
    }

    .save-actions .btn {
        width: 100%;
    }
}

/* Dark mode screenshot color combination */
html[data-theme="dark"] body {
    background:
        radial-gradient(circle at 16% 12%, rgba(47, 125, 246, 0.10), transparent 28%),
        radial-gradient(circle at 78% 18%, rgba(45, 212, 191, 0.07), transparent 26%),
        #06111f;
    color: var(--text);
}

html[data-theme="dark"] .topbar,
html[data-theme="dark"] .side-panel,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .record-card,
html[data-theme="dark"] .empty-state {
    background:
        linear-gradient(145deg, rgba(16, 30, 50, 0.98), rgba(8, 19, 34, 0.98));
    border-color: #2a3a52;
    box-shadow: 0 22px 55px rgba(0, 0, 0, 0.34);
}

html[data-theme="dark"] .topbar {
    border-bottom-color: #25364c;
}

html[data-theme="dark"] .brand-block p,
html[data-theme="dark"] .record-title-area p,
html[data-theme="dark"] .record-card-header p,
html[data-theme="dark"] .save-bar p,
html[data-theme="dark"] .calendar-detail p,
html[data-theme="dark"] .calendar-detail small {
    color: #d7e0ec;
}

html[data-theme="dark"] input,
html[data-theme="dark"] select {
    background: #0a1626;
    color: #f8fafc;
    border-color: #31435c;
}

html[data-theme="dark"] input::placeholder {
    color: #8fa1b8;
}

html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus {
    border-color: #2f7df6;
    outline-color: rgba(47, 125, 246, 0.22);
}

html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .save-btn {
    background: linear-gradient(135deg, #2f7df6, #2563eb);
    border-color: #2f7df6;
    color: #ffffff;
    box-shadow: 0 10px 26px rgba(37, 99, 235, 0.24);
}

html[data-theme="dark"] .btn-soft,
html[data-theme="dark"] .account-summary,
html[data-theme="dark"] .tracker-item {
    background: #0a1626;
    border-color: #31435c;
    color: #f8fafc;
}

html[data-theme="dark"] .tracker-item.active {
    background: rgba(47, 125, 246, 0.18);
    border-color: rgba(47, 125, 246, 0.38);
    color: #8cbcff;
}

html[data-theme="dark"] .account-menu,
html[data-theme="dark"] .calendar-detail,
html[data-theme="dark"] .calendar-detail-row {
    background: #0a1626;
    border-color: #31435c;
}

html[data-theme="dark"] .account-menu a:hover,
html[data-theme="dark"] .account-menu-button:hover,
html[data-theme="dark"] .calendar-nav-btn:hover,
html[data-theme="dark"] .calendar-day:hover {
    background: rgba(47, 125, 246, 0.12);
}

html[data-theme="dark"] .income-card .record-card-header,
html[data-theme="dark"] .total-green,
html[data-theme="dark"] .summary-green {
    background:
        linear-gradient(135deg, rgba(45, 212, 191, 0.16), rgba(45, 212, 191, 0.06));
    color: #2dd4bf;
}

html[data-theme="dark"] .income-card .record-card-header {
    border-bottom-color: rgba(45, 212, 191, 0.20);
}

html[data-theme="dark"] .income-card h3,
html[data-theme="dark"] #totalIncome,
html[data-theme="dark"] #summaryIncome {
    color: #2dd4bf;
}

html[data-theme="dark"] .btn-green {
    background: linear-gradient(135deg, #2dd4bf, #0d9488);
    color: #05231f;
    border-color: rgba(45, 212, 191, 0.40);
    box-shadow: 0 10px 26px rgba(45, 212, 191, 0.14);
}

html[data-theme="dark"] .expense-card .record-card-header,
html[data-theme="dark"] .expense-total-row,
html[data-theme="dark"] .summary-blue {
    background:
        linear-gradient(135deg, rgba(255, 107, 107, 0.16), rgba(255, 107, 107, 0.06));
    color: #ff6b6b;
}

html[data-theme="dark"] .expense-card .record-card-header {
    border-bottom-color: rgba(255, 107, 107, 0.22);
}

html[data-theme="dark"] .expense-card h3,
html[data-theme="dark"] #totalEstimated,
html[data-theme="dark"] #totalPaid,
html[data-theme="dark"] #summaryPaid {
    color: #ff6b6b;
}

html[data-theme="dark"] .btn-blue,
html[data-theme="dark"] .row-minus {
    background: linear-gradient(135deg, #ff6b6b, #ef4444);
    color: #ffffff;
    border-color: rgba(255, 107, 107, 0.45);
    box-shadow: 0 10px 26px rgba(239, 68, 68, 0.14);
}

html[data-theme="dark"] .summary-purple {
    background:
        linear-gradient(135deg, rgba(167, 139, 250, 0.18), rgba(167, 139, 250, 0.07));
    color: #a78bfa;
}

html[data-theme="dark"] #summaryRemaining {
    color: #a78bfa;
}

html[data-theme="dark"] th,
html[data-theme="dark"] .record-title-area label,
html[data-theme="dark"] .period-picker label,
html[data-theme="dark"] .calendar-day-name,
html[data-theme="dark"] .calendar-month-nav strong {
    color: #d7e0ec;
}

html[data-theme="dark"] td,
html[data-theme="dark"] th,
html[data-theme="dark"] .card-total,
html[data-theme="dark"] .expense-total-row,
html[data-theme="dark"] .record-card-header,
html[data-theme="dark"] .sidebar-divider {
    border-color: #26384f;
}

html[data-theme="dark"] .calendar-day {
    color: #eef4ff;
}

html[data-theme="dark"] .calendar-day.active,
html[data-theme="dark"] .calendar-date.today {
    background: #2f7df6;
    color: #ffffff;
}

html[data-theme="dark"] .calendar-entry-count {
    background: #2dd4bf;
    color: #05231f;
}

html[data-theme="dark"] .summary-card,
html[data-theme="dark"] .record-card {
    border-color: #31435c;
}

html[data-theme="dark"] .summary-symbol {
    color: #d7e0ec;
}

html[data-theme="dark"] .toast {
    background: #f8fafc;
    color: #0b1220;
}

/* Desktop profile name + mobile icon behavior */
.account-name-desktop {
    display: inline-block;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-summary.icon-only-account {
    width: auto;
    min-width: 160px;
    justify-content: flex-start;
}

@media (max-width: 760px) {
    .account-name-desktop {
        display: none;
    }

    .account-summary.icon-only-account,
    .account-summary {
        width: 54px;
        min-width: 54px;
        justify-content: center;
    }
}

/* Install App dropdown and modal patch */
.install-app-button {
    color: var(--text);
}

.install-modal[hidden] {
    display: none !important;
}

.install-modal {
    position: fixed;
    inset: 0;
    z-index: 999;
    display: grid;
    place-items: center;
    padding: 20px;
}

.install-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 6, 23, 0.62);
    backdrop-filter: blur(4px);
}

.install-modal-card {
    position: relative;
    width: min(420px, 100%);
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 20px;
    box-shadow: 0 26px 70px rgba(0, 0, 0, 0.28);
    padding: 26px;
    text-align: left;
}

.install-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 10px;
    background: var(--surface-2);
    color: var(--text);
    font-size: 22px;
    line-height: 1;
}

.install-modal-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--primary), var(--green));
    color: #fff;
    font-size: 28px;
    margin-bottom: 16px;
}

.install-modal-card h2 {
    font-size: 20px;
    margin-bottom: 8px;
}

.install-modal-card p {
    margin-bottom: 14px;
}

.install-steps {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.5;
}

.install-steps ol {
    margin: 0 0 18px 20px;
    padding: 0;
}

.install-steps li {
    margin: 6px 0;
}

.install-modal-action {
    width: 100%;
    margin-top: 4px;
}

html[data-theme="dark"] .install-modal-card {
    background: #0f1b2d;
    border-color: #31435c;
}

html[data-theme="dark"] .install-modal-close {
    background: #0a1626;
}

/* Mobile one-line rows patch */
@media (max-width: 760px) {
    .record-card {
        overflow: hidden;
    }

    .table-wrap {
        overflow-x: visible;
        padding: 12px;
    }

    .table-wrap table,
    .table-wrap tbody {
        display: block;
        width: 100%;
    }

    .table-wrap thead {
        display: none;
    }

    .table-wrap tbody {
        display: grid;
        gap: 8px;
    }

    .table-wrap tr {
        display: grid;
        width: 100%;
        align-items: center;
        gap: 7px;
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 8px;
        background: var(--surface);
    }

    .income-card .table-wrap tr {
        grid-template-columns: 42px minmax(0, 1fr) 72px 34px;
        background: rgba(5, 150, 105, 0.04);
    }

    .expense-card .table-wrap tr {
        grid-template-columns: minmax(0, 1fr) 64px 64px 34px;
        background: rgba(220, 38, 38, 0.04);
    }

    .table-wrap td {
        display: block;
        width: 100%;
        border: 0;
        padding: 0;
        min-width: 0;
    }

    .table-wrap td::before {
        display: none !important;
        content: none !important;
    }

    .table-wrap td input {
        width: 100%;
        min-width: 0;
        height: 38px;
        padding: 0 9px;
        border-radius: 10px;
        font-size: 13px;
    }

    .income-card .table-wrap td:nth-child(1) input[type="date"] {
        width: 38px;
        height: 38px;
        padding: 0;
        color: transparent;
        font-size: 0;
        text-indent: -999px;
        overflow: hidden;
        cursor: pointer;
    }

    .income-card .table-wrap td:nth-child(1) input[type="date"]::-webkit-datetime-edit,
    .income-card .table-wrap td:nth-child(1) input[type="date"]::-webkit-datetime-edit-fields-wrapper,
    .income-card .table-wrap td:nth-child(1) input[type="date"]::-webkit-datetime-edit-text,
    .income-card .table-wrap td:nth-child(1) input[type="date"]::-webkit-datetime-edit-month-field,
    .income-card .table-wrap td:nth-child(1) input[type="date"]::-webkit-datetime-edit-day-field,
    .income-card .table-wrap td:nth-child(1) input[type="date"]::-webkit-datetime-edit-year-field {
        display: none;
    }

    .income-card .table-wrap td:nth-child(1) input[type="date"]::-webkit-calendar-picker-indicator {
        display: block;
        margin: 0 auto;
        padding: 0;
        width: 20px;
        height: 20px;
        cursor: pointer;
        opacity: 0.9;
    }

    .action-buttons {
        width: 100%;
        display: block;
    }

    .row-minus {
        width: 34px;
        min-width: 34px;
        height: 34px;
        padding: 0;
        border-radius: 9px;
        font-size: 0;
        position: relative;
    }

    .row-minus::before {
        content: "×";
        position: absolute;
        inset: 0;
        display: grid;
        place-items: center;
        font-size: 20px;
        line-height: 1;
        color: #fff;
        font-weight: 600;
    }

    .card-total,
    .expense-total-row {
        padding: 14px 16px;
    }

    .expense-total-row {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .expense-total-row div {
        justify-content: space-between;
    }

    html[data-theme="dark"] .table-wrap tr {
        background: #0a1626;
        border-color: #31435c;
    }

    html[data-theme="dark"] .income-card .table-wrap tr {
        background: rgba(45, 212, 191, 0.06);
    }

    html[data-theme="dark"] .expense-card .table-wrap tr {
        background: rgba(255, 107, 107, 0.06);
    }

    html[data-theme="dark"] .income-card .table-wrap td:nth-child(1) input[type="date"]::-webkit-calendar-picker-indicator {
        filter: invert(1);
    }
}

@media (max-width: 390px) {
    .income-card .table-wrap tr {
        grid-template-columns: 38px minmax(0, 1fr) 62px 32px;
        gap: 6px;
        padding: 7px;
    }

    .expense-card .table-wrap tr {
        grid-template-columns: minmax(0, 1fr) 56px 56px 32px;
        gap: 6px;
        padding: 7px;
    }

    .table-wrap td input {
        height: 36px;
        padding: 0 7px;
        font-size: 12px;
    }

    .income-card .table-wrap td:nth-child(1) input[type="date"] {
        width: 36px;
        height: 36px;
    }

    .row-minus {
        width: 32px;
        min-width: 32px;
        height: 32px;
    }
}

/* Mobile pull-to-refresh and zoom patch */
html,
body {
    touch-action: pan-x pan-y;
}

.pull-refresh-indicator {
    position: fixed;
    top: env(safe-area-inset-top, 0);
    left: 50%;
    transform: translate(-50%, -120%);
    z-index: 2000;
    min-width: 178px;
    padding: 10px 14px;
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    pointer-events: none;
    opacity: 0;
    transition: transform 0.18s ease, opacity 0.18s ease;
}

.pull-refresh-indicator.visible {
    opacity: 1;
    transform: translate(-50%, 12px);
}

.pull-refresh-indicator.ready {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

html[data-theme="dark"] .pull-refresh-indicator {
    background: #0f1b2d;
    border-color: #31435c;
    color: #f8fafc;
}

html[data-theme="dark"] .pull-refresh-indicator.ready {
    background: #2f7df6;
    color: #fff;
}

@media (max-width: 760px) {
    input,
    select,
    textarea {
        font-size: 16px;
    }

    body {
        overscroll-behavior-y: contain;
    }
}

/* Standard app-style pagination patch */
.table-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 22px;
    border-top: 1px solid var(--border);
    background: var(--surface);
}

.table-pager:empty {
    display: none;
}

.pager-left,
.pager-controls {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.pager-left {
    justify-content: flex-start;
}

.pager-controls {
    justify-content: flex-end;
}

.pager-size-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--text);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}

.pager-size-select {
    width: 74px;
    min-width: 74px;
    height: 38px;
    margin: 0;
    padding: 0 34px 0 14px;
    border: 2px solid #7c5cff;
    border-radius: 10px;
    background: var(--surface);
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.pager-summary {
    color: var(--text);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}

.pager-icon {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--text);
    padding: 0;
    font-size: 22px;
    line-height: 1;
    font-weight: 700;
    cursor: pointer;
}

.pager-icon:hover:not(:disabled) {
    background: var(--surface-2);
    color: var(--primary);
}

.pager-icon:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.pager-current {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text);
    font-size: 13px;
    font-weight: 700;
    padding: 0 4px;
    white-space: nowrap;
}

.pager-control,
.pager-toggle {
    display: none;
}

.date-picker-input {
    cursor: pointer;
}

html[data-theme="dark"] .table-pager {
    border-color: #26384f;
}

html[data-theme="dark"] .pager-control {
    background: #0a1626;
    border-color: #31435c;
    color: #f8fafc;
}

html[data-theme="dark"] .pager-control:hover:not(:disabled) {
    border-color: #2f7df6;
    color: #8cbcff;
}

html[data-theme="dark"] .pager-toggle {
    background: rgba(47, 125, 246, 0.16);
    border-color: rgba(47, 125, 246, 0.34);
    color: #8cbcff;
}

html[data-theme="dark"] .pager-current,
html[data-theme="dark"] .pager-summary {
    color: #d7e0ec;
}

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

@media (max-width: 760px) {
    .table-pager {
        padding: 10px 12px 12px;
        align-items: stretch;
        flex-direction: column;
        gap: 8px;
    }

    .pager-summary {
        text-align: center;
    }

    .pager-controls {
        display: grid;
        grid-template-columns: 1fr;
        gap: 7px;
    }

    .pager-control,
    .pager-current {
        width: 100%;
        min-height: 34px;
    }

    .pager-current {
        order: -1;
        background: var(--surface-2);
        border: 1px solid var(--border);
        border-radius: 9px;
    }

    html[data-theme="dark"] .pager-current {
        background: #0a1626;
        border-color: #31435c;
    }
}

@media (min-width: 761px) {
    .pager-controls {
        flex-wrap: nowrap;
    }
}

/* Scrollable max five visible rows patch */
.record-card .table-wrap {
    max-height: 392px;
    overflow-y: auto;
    overflow-x: auto;
    scrollbar-width: thin;
}

.record-card .table-wrap::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.record-card .table-wrap::-webkit-scrollbar-track {
    background: transparent;
}

.record-card .table-wrap::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, 0.35);
    border-radius: 999px;
}

.record-card .table-wrap::-webkit-scrollbar-thumb:hover {
    background: rgba(100, 116, 139, 0.55);
}

/* Keep table header visible while scrolling many rows */
.record-card thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--surface);
}

/* When View All is active, all rows are available inside this scroll area.
   When normal paging is active, only 5 rows are rendered by JavaScript. */
html[data-theme="dark"] .record-card thead th {
    background: #0f1b2d;
}

html[data-theme="dark"] .record-card .table-wrap::-webkit-scrollbar-thumb {
    background: rgba(215, 224, 236, 0.25);
}

html[data-theme="dark"] .record-card .table-wrap::-webkit-scrollbar-thumb:hover {
    background: rgba(215, 224, 236, 0.42);
}

@media (max-width: 760px) {
    .record-card .table-wrap {
        max-height: 302px;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .record-card thead th {
        position: static;
    }
}

/* Table header scroll fix patch */
.record-card .table-wrap {
    max-height: 392px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 18px;
}

/* Do not make table labels sticky. Sticky labels looked boxed/cut inside the scroll area. */
.record-card thead th {
    position: static;
    top: auto;
    z-index: auto;
    background: transparent;
}

/* Keep the label row clean and separated from input rows */
.record-card thead {
    background: transparent;
}

.record-card th {
    white-space: nowrap;
}

/* Give the last column breathing room beside the scrollbar */
.record-card th:last-child,
.record-card td:last-child {
    padding-right: 12px;
}

/* Cleaner scrollbar inside the table body area */
.record-card .table-wrap::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

.record-card .table-wrap::-webkit-scrollbar-track {
    background: transparent;
    margin-top: 42px;
    margin-bottom: 8px;
}

.record-card .table-wrap::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, 0.35);
    border-radius: 999px;
}

.record-card .table-wrap::-webkit-scrollbar-thumb:hover {
    background: rgba(100, 116, 139, 0.55);
}

html[data-theme="dark"] .record-card thead th {
    background: transparent;
}

html[data-theme="dark"] .record-card .table-wrap::-webkit-scrollbar-thumb {
    background: rgba(215, 224, 236, 0.25);
}

html[data-theme="dark"] .record-card .table-wrap::-webkit-scrollbar-thumb:hover {
    background: rgba(215, 224, 236, 0.42);
}

@media (max-width: 760px) {
    .record-card .table-wrap {
        max-height: 302px;
        overflow-y: auto;
        overflow-x: hidden;
        padding-right: 12px;
    }

    .record-card .table-wrap::-webkit-scrollbar-track {
        margin-top: 0;
        margin-bottom: 0;
    }
}

/* Mobile compact pagination fix */
@media (max-width: 760px) {
    .table-pager {
        padding: 10px 12px 12px;
        gap: 8px;
        display: grid;
        grid-template-columns: 1fr;
        align-items: center;
    }

    .pager-summary {
        text-align: center;
        font-size: 12px;
        line-height: 1.2;
        margin: 0;
    }

    .pager-controls {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        gap: 6px;
        align-items: center;
        width: 100%;
    }

    .pager-current {
        order: 0;
        min-height: 34px;
        width: auto;
        padding: 0 8px;
        border: 1px solid var(--border);
        border-radius: 9px;
        background: var(--surface-2);
        font-size: 12px;
        white-space: nowrap;
    }

    .pager-control {
        min-width: 0;
        width: 100%;
        height: 34px;
        padding: 0 8px;
        font-size: 12px;
        border-radius: 9px;
    }

    .pager-control[data-page-action$=":prev"] {
        grid-column: 1;
    }

    .pager-current {
        grid-column: 2;
    }

    .pager-control[data-page-action$=":next"] {
        grid-column: 3;
    }

    .pager-toggle {
        grid-column: 1 / -1;
        margin-top: 2px;
    }

    /* When View All is active, only the Show pages button exists */
    .pager-controls:has(.pager-toggle:only-child) {
        grid-template-columns: 1fr;
    }

    .pager-controls:has(.pager-toggle:only-child) .pager-toggle {
        grid-column: 1;
    }

    html[data-theme="dark"] .pager-current {
        background: #0a1626;
        border-color: #31435c;
    }
}

/* Fallback for mobile browsers without :has() */
@media (max-width: 760px) {
    .pager-controls .pager-toggle:first-child:last-child {
        grid-column: 1 / -1;
    }
}

/* Mobile calendar toggle patch */
.mobile-calendar-toggle {
    display: none;
}

@media (max-width: 760px) {
    .mobile-calendar-toggle {
        display: block;
        width: 100%;
        height: 42px;
        margin: 0 0 14px;
        border: 1px solid var(--border);
        border-radius: 10px;
        background: var(--surface);
        color: var(--text);
        font-size: 14px;
        font-weight: 500;
    }

    .mobile-calendar-toggle::after {
        content: " ▾";
        color: var(--muted);
    }

    .mobile-calendar-toggle[aria-expanded="true"]::after {
        content: " ▴";
    }

    .calendar-panel {
        display: none;
    }

    .calendar-panel.mobile-calendar-open {
        display: block;
    }

    html[data-theme="dark"] .mobile-calendar-toggle {
        background: #0a1626;
        border-color: #31435c;
        color: #f8fafc;
    }
}

/* Mobile calendar hidden gap fix */
@media (max-width: 760px) {
    .side-panel {
        min-height: auto;
    }

    .sidebar {
        align-self: start;
    }

    .calendar-panel {
        margin-top: 0;
    }

    .calendar-panel:not(.mobile-calendar-open) {
        display: none;
        margin: 0;
        padding: 0;
    }

    .mobile-calendar-toggle {
        margin-bottom: 0;
    }

    .calendar-panel.mobile-calendar-open {
        margin-top: 14px;
    }
}


.offline-sync-status {
    position: fixed;
    left: 50%;
    bottom: calc(18px + env(safe-area-inset-bottom));
    z-index: 9999;
    transform: translateX(-50%);
    max-width: calc(100% - 32px);
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.94);
    color: #f8fafc;
    border: 1px solid rgba(148, 163, 184, 0.4);
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.28);
    font-size: 13px;
    font-weight: 700;
    text-align: center;
}

/* iPhone calendar input and mobile row alignment fix */
.period-picker {
    position: relative;
}

.period-picker input[type="month"] {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding-right: 44px;
    text-align: center;
    -webkit-appearance: none;
    appearance: none;
}

.period-picker input[type="month"]::-webkit-calendar-picker-indicator {
    opacity: 0;
}

.period-picker::after {
    content: "📅";
    position: absolute;
    right: 14px;
    bottom: 12px;
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    color: var(--muted);
    font-size: 16px;
    line-height: 1;
    pointer-events: none;
}

@media (max-width: 760px) {
    .record-toolbar,
    .record-title-area,
    .period-picker,
    .record-title-row,
    .record-title-row input,
    .period-picker input[type="month"] {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .record-toolbar {
        overflow: hidden;
    }

    .period-picker input[type="month"] {
        margin: 0;
        padding-left: 44px;
        padding-right: 44px;
    }

    .income-card .table-wrap tr {
        align-items: center;
    }

    .income-card .table-wrap td:nth-child(1) {
        position: relative;
        justify-self: center;
        width: 40px;
        height: 40px;
        min-width: 40px;
    }

    .income-card .table-wrap td:nth-child(1)::after {
        content: "📅";
        position: absolute;
        inset: 0;
        display: grid;
        place-items: center;
        color: var(--muted);
        font-size: 17px;
        line-height: 1;
        pointer-events: none;
    }

    .income-card .table-wrap td:nth-child(1) input[type="date"] {
        position: relative;
        z-index: 1;
        width: 40px;
        height: 40px;
        margin: 0;
        padding: 0;
        text-indent: 0;
        color: transparent;
        caret-color: transparent;
        background: transparent;
        -webkit-appearance: none;
        appearance: none;
    }

    .income-card .table-wrap td:nth-child(1) input[type="date"]::-webkit-calendar-picker-indicator {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        opacity: 0;
        cursor: pointer;
    }
}

@media (max-width: 390px) {
    .income-card .table-wrap td:nth-child(1),
    .income-card .table-wrap td:nth-child(1) input[type="date"] {
        width: 38px;
        height: 38px;
        min-width: 38px;
    }
}


/* Final cleanup: remove old semi-monthly/custom layer UI if an old browser asset is cached */
.schedule-mode-select,
.layer-tools,
.layer-chip,
.layer-add-btn,
.layer-remove-btn,
.layer-row-add,
.layer-header-row {
    display: none !important;
}

@media (max-width: 760px) {
    .table-pager {
        align-items: flex-start;
        flex-direction: column;
        padding: 12px;
    }

    .pager-left,
    .pager-controls {
        width: 100%;
        justify-content: space-between;
    }

    .pager-size-label {
        flex: 1 1 auto;
    }
}


/* Monthly / semi-monthly layered tracker patch */
.period-type-picker select{width:100%;box-sizing:border-box;border:1px solid #d8e1ef;border-radius:12px;padding:12px 14px;background:#fff;color:#0f172a;font-weight:700}
.record-grid{align-items:stretch}
.record-card{height:100%;display:flex;flex-direction:column}
.record-card .table-wrap{min-height:274px;max-height:274px;overflow-y:auto;overflow-x:auto}
.record-card .table-wrap table{min-width:100%}
.record-card .table-pager{min-height:58px}
.semi-layer-grid{margin-top:22px}
.title-edit-btn{border:0;background:transparent;color:#2563eb;padding:2px 6px;font-size:15px;box-shadow:none;vertical-align:middle}
.title-edit-btn:hover{background:#dbeafe;color:#1d4ed8}
@media (max-width:760px){.record-card .table-wrap{min-height:420px;max-height:none}.semi-layer-grid{margin-top:18px}}


/* Stable monthly/semi-monthly visibility and cache-bust patch v2026051022 */
#semiMonthlyLayer2[hidden] {
    display: none !important;
}

body.is-monthly #semiMonthlyLayer2 {
    display: none !important;
}

body.is-semi-monthly #semiMonthlyLayer2:not([hidden]) {
    display: grid !important;
}

.period-type-picker select {
    min-height: 44px;
    cursor: pointer;
}

.record-card {
    min-height: 430px;
}

.record-card .card-total,
.record-card .expense-total-row {
    margin-top: auto;
}


/* Compact one-row record controls patch v2026051024 */
.compact-record-toolbar {
    display: grid;
    grid-template-columns: minmax(220px, 1.55fr) minmax(180px, .9fr) minmax(180px, .9fr) 58px;
    gap: 28px;
    align-items: end;
    position: relative;
    padding: 26px;
}

.compact-record-toolbar .record-title-area,
.compact-record-toolbar .period-picker {
    min-width: 0;
}

.compact-record-toolbar label {
    display: block;
    margin-bottom: 8px;
}

.compact-input-wrap {
    position: relative;
}

.compact-input-wrap input,
.compact-record-toolbar .period-picker input,
.compact-record-toolbar .period-picker select {
    width: 100%;
    height: 44px;
    min-height: 44px;
    box-sizing: border-box;
}

.compact-input-wrap input {
    padding-right: 46px;
}

.compact-field-icon {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--muted);
    font-size: 18px;
}

.period-type-picker select {
    background-image: none !important;
    appearance: auto;
    -webkit-appearance: menulist;
    -moz-appearance: menulist;
    padding-right: 38px;
}

.sheet-settings-menu {
    position: relative;
    align-self: end;
}

.sheet-settings-menu[open] {
    z-index: 30;
}

.sheet-settings-toggle {
    width: 54px;
    height: 44px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text);
    display: grid;
    place-items: center;
    cursor: pointer;
    font-size: 28px;
    line-height: 1;
    list-style: none;
    user-select: none;
}

.sheet-settings-toggle::-webkit-details-marker {
    display: none;
}

.sheet-settings-toggle:hover {
    opacity: .9;
}

.sheet-settings-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 12px);
    min-width: 230px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
    box-shadow: 0 18px 42px rgba(15,23,42,.18);
}

.sheet-settings-dropdown strong {
    display: block;
    margin-bottom: 10px;
    color: var(--text);
}

.sheet-settings-item {
    width: 100%;
    height: 42px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--text);
    text-align: left;
    padding: 0 10px;
    cursor: pointer;
    font-weight: 600;
}

.sheet-settings-item:hover {
    background: rgba(148, 163, 184, .12);
}

.compact-record-help {
    grid-column: 1 / -1;
    margin: -12px 0 0;
}

@media (max-width: 980px) {
    .compact-record-toolbar {
        grid-template-columns: 1fr 1fr;
        gap: 18px;
    }

    .sheet-settings-menu {
        grid-column: 2;
        justify-self: end;
    }

    .compact-record-help {
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {
    .compact-record-toolbar {
        grid-template-columns: 1fr;
    }

    .sheet-settings-menu {
        grid-column: auto;
        justify-self: stretch;
    }

    .sheet-settings-toggle {
        width: 100%;
    }

    .sheet-settings-dropdown {
        left: 0;
        right: 0;
    }
}


/* Compact toolbar cleanup patch v2026051025
   Removes extra helper text space and hides native calendar icons.
   Keeps existing tracker, period type, monthly/semi-monthly, and save logic unchanged. */
.compact-record-help {
    display: none !important;
}

.compact-record-toolbar {
    align-items: end;
}

.compact-record-toolbar .period-picker input[type="month"] {
    appearance: textfield;
    -webkit-appearance: none;
    -moz-appearance: textfield;
    padding-right: 38px;
}

.compact-record-toolbar .period-picker input[type="month"]::-webkit-calendar-picker-indicator {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.compact-record-toolbar .period-type-picker select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: none !important;
    padding-right: 38px;
}

.compact-record-toolbar .period-picker {
    position: relative;
}

.compact-record-toolbar .period-picker::after {
    content: "⌄";
    position: absolute;
    right: 15px;
    bottom: 12px;
    color: var(--muted);
    pointer-events: none;
    font-size: 18px;
    line-height: 1;
}

.compact-record-toolbar .period-picker input[type="month"]::-webkit-inner-spin-button,
.compact-record-toolbar .period-picker input[type="month"]::-webkit-clear-button {
    display: none !important;
}


/* Toolbar calendar/menu cleanup patch v2026051027
   Scope: toolbar visuals only. Keeps tracker save/load and monthly/semi-monthly logic unchanged. */
.compact-record-toolbar .period-picker::after {
    content: none !important;
}

.compact-record-toolbar .period-type-picker::after {
    content: "⌄" !important;
    position: absolute;
    right: 15px;
    bottom: 12px;
    color: var(--muted);
    pointer-events: none;
    font-size: 18px;
    line-height: 1;
}

.calendar-input-wrap {
    position: relative;
    width: 100%;
}

.calendar-input-wrap input[type="month"] {
    width: 100%;
    padding-left: 42px !important;
    padding-right: 38px !important;
    text-align: center;
}

.calendar-field-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    font-size: 16px;
    line-height: 1;
    z-index: 2;
}


.calendar-input-wrap input[type="month"]::-webkit-calendar-picker-indicator {
    opacity: 0 !important;
    display: none !important;
    pointer-events: none !important;
}

.sheet-settings-dropdown {
    min-width: 190px;
    padding: 14px;
}

.sheet-settings-dropdown strong,
.sheet-settings-dropdown form {
    display: none !important;
}

.sheet-settings-item {
    display: flex;
    align-items: center;
    gap: 8px;
}


/* Toolbar dropdown/calendar click fix patch v2026051028
   Scope: toolbar only. Keeps finance rows, monthly/semi-monthly logic, totals, and save/load logic unchanged. */
.compact-record-toolbar .period-picker::after,
.compact-record-toolbar .period-type-picker::after,
.calendar-input-wrap::after {
    content: none !important;
    display: none !important;
}

.compact-record-toolbar .period-type-picker,
.compact-record-toolbar .calendar-picker,
.calendar-input-wrap {
    position: relative;
}

.compact-record-toolbar .period-type-picker select,
.calendar-input-wrap input[type="month"] {
    height: 44px !important;
    min-height: 44px !important;
    border-radius: 12px !important;
    border: 1px solid var(--border) !important;
    background-color: var(--surface) !important;
    color: var(--text) !important;
    cursor: pointer !important;
    box-shadow: none !important;
}

.compact-record-toolbar .period-type-picker select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    padding: 0 42px 0 16px !important;
    background-image:
        linear-gradient(45deg, transparent 50%, currentColor 50%),
        linear-gradient(135deg, currentColor 50%, transparent 50%) !important;
    background-position:
        calc(100% - 20px) 50%,
        calc(100% - 14px) 50% !important;
    background-size: 6px 6px, 6px 6px !important;
    background-repeat: no-repeat !important;
}

.calendar-input-wrap input[type="month"] {
    appearance: auto !important;
    -webkit-appearance: auto !important;
    padding: 0 42px 0 44px !important;
    text-align: center !important;
}

.calendar-field-icon {
    left: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    pointer-events: none !important;
    font-size: 17px !important;
    line-height: 1 !important;
    z-index: 2 !important;
    color: var(--muted) !important;
}


.calendar-input-wrap input[type="month"]::-webkit-calendar-picker-indicator {
    display: block !important;
    opacity: 0 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}

.sheet-settings-dropdown {
    min-width: 170px !important;
    padding: 10px !important;
}

.sheet-settings-dropdown strong,
.sheet-settings-dropdown form,
.sheet-settings-dropdown .clear-cache,
.sheet-settings-dropdown [data-action="clear-cache"] {
    display: none !important;
}

.sheet-settings-item {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    height: 42px !important;
    white-space: nowrap !important;
}

@media (max-width: 760px) {
    .compact-record-toolbar {
        grid-template-columns: 1fr !important;
    }

    .sheet-settings-menu {
        justify-self: stretch !important;
    }

    .sheet-settings-toggle {
        width: 100% !important;
    }

    .sheet-settings-dropdown {
        left: 0 !important;
        right: 0 !important;
    }
}


/* Calendar full-box tap/click fix v2026051029
   Keeps the visible calendar icon, removes the ugly native indicator,
   and lets JS open the native month picker from the whole field. */
.calendar-input-wrap {
    cursor: pointer;
}

.calendar-input-wrap input[type="month"] {
    cursor: pointer !important;
    -webkit-appearance: none;
    appearance: none;
    min-height: 42px;
}

.calendar-input-wrap .calendar-field-icon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    pointer-events: none !important;
    font-size: 16px;
}

.calendar-input-wrap input[type="month"]::-webkit-calendar-picker-indicator {
    opacity: 0 !important;
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    inset: 0 !important;
    cursor: pointer !important;
    display: block !important;
}



/* Calendar icon-right cleanup patch v2026051030
   Scope: toolbar calendar field only.
   Keeps the whole Calendar box clickable/tappable through the existing JS listener. */
.calendar-input-wrap::after {
    content: none !important;
    display: none !important;
}

.calendar-input-wrap {
    cursor: pointer;
}

.calendar-input-wrap input[type="month"] {
    cursor: pointer;
    padding-left: 16px !important;
    padding-right: 46px !important;
    text-align: center;
}

.calendar-field-icon {
    left: auto !important;
    right: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    pointer-events: none;
    font-size: 16px;
    line-height: 1;
    z-index: 2;
}

.calendar-input-wrap input[type="month"]::-webkit-calendar-picker-indicator {
    opacity: 0 !important;
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    inset: 0 !important;
    cursor: pointer !important;
}

/* Firefox/iOS friendly fallback: keep the visible icon, remove artificial dropdown arrow only. */
.calendar-input-wrap input[type="month"] {
    -webkit-appearance: none;
    appearance: none;
}


/* Calendar dropdown arrow removal patch v2026051031
   Removes the artificial dropdown chevron. Keeps the calendar icon visible on the right. */
.calendar-input-wrap::before,
.calendar-input-wrap::after {
    content: none !important;
    display: none !important;
}

.calendar-field-icon {
    left: auto !important;
    right: 15px !important;
    pointer-events: none !important;
}

/* Profile dropdown v2 - grouped account menu */
.account-menu.profile-menu-v2 {
    width: 260px;
    padding: 10px;
    border-radius: 18px;
    background: #ffffff;
    color: #243044;
    box-shadow: 0 22px 60px rgba(15, 23, 42, .18);
    border: 1px solid rgba(148, 163, 184, .22);
}

.profile-menu-v2 .profile-menu-user {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 8px 14px;
    margin: 0 0 8px;
    border-bottom: 1px solid rgba(148, 163, 184, .18);
}

.profile-menu-avatar {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    font-weight: 800;
    color: #ffffff;
    background: linear-gradient(135deg, #5b6cff, #7584ff);
    box-shadow: 0 0 0 5px rgba(91,108,255,.16);
}

.profile-menu-identity {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.profile-menu-v2 .profile-menu-identity strong {
    color: #111827;
    font-size: 14px;
    line-height: 1.2;
}

.profile-menu-v2 .profile-menu-identity small {
    color: #64748b;
    font-size: 12px;
    word-break: break-word;
}

.profile-menu-section {
    padding: 8px 0;
    border-top: 1px solid rgba(148, 163, 184, .15);
}

.profile-menu-user + .profile-menu-section,
.profile-menu-section:first-child {
    border-top: 0;
}

.profile-menu-label {
    padding: 6px 2px 8px;
    font-size: 11px;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 800;
    color: #9aa4b2;
}

.profile-menu-v2 a,
.profile-menu-v2 .account-menu-button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 8px;
    border-radius: 10px;
    color: #334155;
    background: transparent;
    border: 0;
    text-decoration: none;
    text-align: left;
    font-size: 14px;
    font-weight: 500;
}

.profile-menu-v2 a:hover,
.profile-menu-v2 .account-menu-button:hover {
    background: #f4f7fb;
    color: #0f172a;
}

.profile-menu-v2 .menu-icon {
    width: 18px;
    min-width: 18px;
    text-align: center;
    font-size: 13px;
    line-height: 1;
    color: #6650a4;
}

.profile-menu-v2 .danger-link {
    color: #dc2626;
}

.profile-menu-v2 .profile-menu-logout .account-menu-button {
    color: #dc2626;
}

html[data-theme="dark"] .account-menu.profile-menu-v2 {
    background: #0b1727;
    color: #e5edf7;
    border-color: rgba(148, 163, 184, .22);
    box-shadow: 0 22px 60px rgba(0, 0, 0, .35);
}

html[data-theme="dark"] .profile-menu-v2 .profile-menu-user,
html[data-theme="dark"] .profile-menu-section {
    border-color: rgba(148, 163, 184, .16);
}

html[data-theme="dark"] .profile-menu-v2 .profile-menu-identity strong {
    color: #f8fafc;
}

html[data-theme="dark"] .profile-menu-v2 .profile-menu-identity small,
html[data-theme="dark"] .profile-menu-label {
    color: #9aa9bd;
}

html[data-theme="dark"] .profile-menu-v2 a,
html[data-theme="dark"] .profile-menu-v2 .account-menu-button {
    color: #dbe7f5;
}

html[data-theme="dark"] .profile-menu-v2 a:hover,
html[data-theme="dark"] .profile-menu-v2 .account-menu-button:hover {
    background: rgba(59, 130, 246, .13);
    color: #ffffff;
}



/* Analytics dashboard page */
.dashboard-sidebar-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: flex-start;
    border: 1px solid rgba(148, 163, 184, .28);
    border-radius: 16px;
    padding: 13px 14px;
    margin-bottom: 16px;
    background: linear-gradient(135deg, rgba(59, 130, 246, .14), rgba(168, 85, 247, .12));
    color: var(--text);
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .12);
}

.dashboard-sidebar-btn:hover,
.dashboard-sidebar-btn.active {
    border-color: rgba(96, 165, 250, .75);
    background: linear-gradient(135deg, rgba(37, 99, 235, .22), rgba(168, 85, 247, .20));
    transform: translateY(-1px);
}

.dashboard-sidebar-icon {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 10px;
    background: rgba(37, 99, 235, .18);
}

.analytics-dashboard {
    display: grid;
    gap: 18px;
}

.analytics-dashboard[hidden] {
    display: none !important;
}

.analytics-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 520px);
    gap: 22px;
    align-items: end;
    padding: 24px;
    overflow: visible;
}

.analytics-eyebrow {
    margin: 0 0 8px;
    color: #60a5fa;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.analytics-hero h2 {
    margin: 0;
    font-size: clamp(28px, 4vw, 44px);
    line-height: 1;
}

.analytics-subtitle {
    max-width: 680px;
    margin: 12px 0 0;
    color: var(--muted);
}

.analytics-filters {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) minmax(150px, .8fr) auto;
    gap: 12px;
    align-items: end;
}

.analytics-filters label {
    display: grid;
    gap: 7px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.analytics-filters select,
.analytics-filters input {
    width: 100%;
    min-height: 46px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    padding: 0 14px;
    outline: none;
}

.analytics-card-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.analytics-stat-card {
    min-height: 128px;
    padding: 20px;
    border-radius: 22px;
    border: 1px solid rgba(148, 163, 184, .22);
    background: linear-gradient(145deg, rgba(255,255,255,.92), rgba(248,250,252,.78));
    box-shadow: 0 16px 42px rgba(15, 23, 42, .10);
}

.analytics-stat-card span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.analytics-stat-card strong {
    display: block;
    margin-top: 12px;
    font-size: clamp(24px, 3vw, 34px);
    line-height: 1.05;
}

.analytics-stat-card small {
    display: block;
    margin-top: 10px;
    color: var(--muted);
}

.stat-income { border-color: rgba(34, 197, 94, .32); }
.stat-paid { border-color: rgba(239, 68, 68, .30); }
.stat-remaining { border-color: rgba(168, 85, 247, .32); }
.stat-trackers { border-color: rgba(59, 130, 246, .32); }

.analytics-main-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(280px, .75fr);
    gap: 18px;
    align-items: start;
}

.analytics-panel {
    padding: 22px;
}

.analytics-panel-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: start;
    margin-bottom: 16px;
}

.analytics-panel h3 {
    margin: 0;
    font-size: 18px;
}

.analytics-panel p {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 13px;
}

.analytics-table-wrap {
    overflow: auto;
    border-radius: 16px;
    border: 1px solid var(--border);
}

.analytics-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 720px;
}

.analytics-table th,
.analytics-table td {
    padding: 14px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    white-space: nowrap;
}

.analytics-table th {
    color: var(--muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .06em;
    background: rgba(148, 163, 184, .08);
}

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

.analytics-balance {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 7px 10px;
    font-weight: 900;
}

.analytics-balance.positive {
    color: #166534;
    background: rgba(34, 197, 94, .14);
}

.analytics-balance.negative {
    color: #991b1b;
    background: rgba(239, 68, 68, .14);
}

.analytics-open-btn {
    border: 0;
    border-radius: 999px;
    padding: 8px 12px;
    background: rgba(37, 99, 235, .14);
    color: #2563eb;
    font-weight: 900;
    cursor: pointer;
}

.analytics-open-btn:hover {
    background: rgba(37, 99, 235, .22);
}

.analytics-side-stack {
    display: grid;
    gap: 18px;
}

.analytics-alert-list {
    display: grid;
    gap: 10px;
}

.analytics-alert {
    display: grid;
    gap: 4px;
    padding: 13px;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, .20);
    background: rgba(148, 163, 184, .08);
}

.analytics-alert strong {
    font-size: 14px;
}

.analytics-alert span {
    color: var(--muted);
    font-size: 13px;
}

.analytics-alert.danger {
    border-color: rgba(239, 68, 68, .28);
    background: rgba(239, 68, 68, .10);
}

.analytics-alert.success {
    border-color: rgba(34, 197, 94, .28);
    background: rgba(34, 197, 94, .10);
}

.analytics-actions {
    display: grid;
    gap: 10px;
}

.analytics-actions .btn {
    width: 100%;
    text-align: center;
}

html[data-theme="dark"] .analytics-stat-card {
    background: linear-gradient(145deg, rgba(15, 23, 42, .95), rgba(30, 41, 59, .72));
    border-color: rgba(148, 163, 184, .20);
    box-shadow: 0 22px 48px rgba(0, 0, 0, .24);
}

html[data-theme="dark"] .analytics-filters select,
html[data-theme="dark"] .analytics-filters input {
    background: rgba(15, 23, 42, .82);
    color: #e5e7eb;
}

html[data-theme="dark"] .analytics-table th {
    background: rgba(15, 23, 42, .72);
}

html[data-theme="dark"] .analytics-open-btn {
    color: #bfdbfe;
    background: rgba(37, 99, 235, .24);
}

html[data-theme="dark"] .analytics-balance.positive {
    color: #86efac;
    background: rgba(34, 197, 94, .16);
}

html[data-theme="dark"] .analytics-balance.negative {
    color: #fca5a5;
    background: rgba(239, 68, 68, .16);
}

@media (max-width: 1100px) {
    .analytics-hero,
    .analytics-main-grid {
        grid-template-columns: 1fr;
    }

    .analytics-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .analytics-hero {
        padding: 18px;
    }

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

    .dashboard-sidebar-btn {
        margin-bottom: 12px;
    }
}

@media print {
    .topbar,
    .sidebar,
    footer,
    .analytics-filters,
    .analytics-actions {
        display: none !important;
    }

    .app-layout,
    .workspace {
        display: block !important;
    }

    .analytics-dashboard {
        display: block !important;
    }
}


/* Single-page user panel patch v202605111930 */
.sidebar-user-links {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
    display: grid;
    gap: 8px;
}

.sidebar-section-title {
    font-size: 11px;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 800;
    color: var(--muted);
    margin-bottom: 4px;
}

.sidebar-user-links a,
.sidebar-user-links button {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 0 12px;
    border-radius: 10px;
    color: var(--text);
    text-decoration: none;
    font-weight: 500;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.sidebar-user-links a:hover,
.sidebar-user-links a.active {
    background: rgba(37, 99, 235, .16);
}

.user-panel-workspace {
    display: grid;
    gap: 16px;
}

.user-dashboard-panel {
    min-height: calc(100vh - 150px);
    padding: 28px;
}

.user-panel-heading {
    margin-bottom: 20px;
}

.user-panel-heading h2 {
    margin: 4px 0 4px;
    font-size: clamp(28px, 3vw, 42px);
}

.user-panel-form {
    display: grid;
    gap: 16px;
    max-width: 100%;
}

.user-panel-form label {
    display: grid;
    gap: 8px;
    font-weight: 700;
}

.user-panel-form input,
.user-panel-form textarea {
    width: 100%;
    min-height: 48px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text);
    padding: 0 14px;
    font: inherit;
}

.user-panel-form textarea {
    padding: 12px 14px;
    resize: vertical;
}

.user-panel-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.user-panel-flash,
.user-panel-errors {
    padding: 14px 16px;
}

.user-panel-errors {
    border-color: rgba(220, 38, 38, .35);
}

.user-panel-errors ul {
    margin: 8px 0 0;
    padding-left: 18px;
}

.user-panel-grid {
    display: grid;
    grid-template-columns: minmax(280px, 460px) 1fr;
    gap: 22px;
    align-items: start;
}

.user-ticket-list {
    display: grid;
    gap: 12px;
}

.user-ticket-list h3 {
    margin: 0 0 4px;
}

.user-ticket-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: rgba(15, 23, 42, .24);
}

.user-ticket-item div {
    display: grid;
    gap: 4px;
}

.user-ticket-item small,
.user-ticket-item span {
    color: var(--muted);
}

.account-menu [data-user-panel-link].active,
.profile-menu-v2 [data-user-panel-link].active {
    background: rgba(37, 99, 235, .16);
}

@media (max-width: 900px) {
    .user-panel-grid {
        grid-template-columns: 1fr;
    }

    .user-dashboard-panel {
        padding: 18px;
        min-height: auto;
    }
}


/* Ticket system upgrade: scope, priority, attachments */
.ticket-upgrade-grid {
    align-items: start;
    gap: 22px;
}

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

.ticket-form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.ticket-file-upload {
    border: 1px dashed var(--border);
    border-radius: 14px;
    padding: 14px;
    background: rgba(59, 130, 246, .05);
}

.ticket-file-upload input[type="file"] {
    margin-top: 8px;
    width: 100%;
}

.ticket-upgrade-item {
    align-items: center;
    gap: 14px;
}

.ticket-badge-stack {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

.ticket-badge {
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 5px 9px;
    font-size: 12px;
    font-weight: 800;
    color: var(--text);
    background: rgba(148, 163, 184, .12);
}

.ticket-badge.priority-low {
    background: rgba(34, 197, 94, .12);
    color: #86efac;
    border-color: rgba(34, 197, 94, .25);
}

.ticket-badge.priority-normal {
    background: rgba(59, 130, 246, .14);
    color: #93c5fd;
    border-color: rgba(59, 130, 246, .28);
}

.ticket-badge.priority-high {
    background: rgba(245, 158, 11, .16);
    color: #fcd34d;
    border-color: rgba(245, 158, 11, .30);
}

.ticket-badge.priority-urgent {
    background: rgba(239, 68, 68, .16);
    color: #fca5a5;
    border-color: rgba(239, 68, 68, .34);
}

.ticket-badge.attachment-badge {
    background: rgba(168, 85, 247, .14);
    color: #d8b4fe;
    border-color: rgba(168, 85, 247, .28);
}

.admin-attachment-list {
    display: grid;
    gap: 8px;
    margin: 12px 0;
}

.admin-attachment-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid rgba(148, 163, 184, .22);
    border-radius: 12px;
    padding: 10px 12px;
    color: inherit;
    text-decoration: none;
    background: rgba(15, 23, 42, .35);
}

.admin-attachment-item:hover {
    border-color: rgba(59, 130, 246, .45);
}

.ticket-message {
    border: 1px solid rgba(148, 163, 184, .18);
    border-radius: 14px;
    padding: 14px;
    margin-bottom: 12px;
    background: rgba(15, 23, 42, .30);
}

@media (max-width: 760px) {
    .ticket-form-row {
        grid-template-columns: 1fr;
    }

    .ticket-upgrade-item {
        align-items: flex-start;
    }

    .ticket-badge-stack {
        justify-content: flex-start;
    }
}


/* Ticket owner view/admin attachment fix v202605112155 */
.user-ticket-open {
    appearance: none;
    border: 0;
    background: transparent;
    color: inherit;
    padding: 0;
    width: 100%;
    text-align: left;
    cursor: pointer;
}

.user-ticket-open strong,
.user-ticket-open small {
    display: block;
}

.user-ticket-open:hover strong {
    color: var(--primary);
}

.user-ticket-detail-list {
    margin-top: 18px;
}

.user-ticket-detail {
    padding: 22px;
}

.user-ticket-detail-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.user-ticket-detail-header h3 {
    margin: 0;
    font-size: 24px;
}

.user-ticket-detail-header p {
    margin: 6px 0 0;
    color: var(--muted);
}

.user-ticket-attachments,
.user-ticket-conversation,
.user-ticket-reply-form {
    margin-top: 18px;
}

.ticket-attachment-grid,
.ticket-message-attachments {
    display: grid;
    gap: 8px;
}

.ticket-attachment-link,
.ticket-message-attachments a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--text);
    text-decoration: none;
    background: rgba(15, 23, 42, .34);
}

.ticket-attachment-link:hover,
.ticket-message-attachments a:hover {
    border-color: rgba(59, 130, 246, .7);
}

.ticket-message {
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px;
    margin-bottom: 12px;
    background: rgba(15, 23, 42, .36);
}

.ticket-message.admin-reply {
    border-color: rgba(59, 130, 246, .38);
}

.ticket-message-meta {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.ticket-message-meta small {
    color: var(--muted);
}

.ticket-message p {
    margin: 0;
    white-space: pre-wrap;
}

@media (max-width: 720px) {
    .user-ticket-detail-header {
        display: grid;
    }

    .ticket-attachment-link,
    .ticket-message-meta {
        display: grid;
    }
}


/* User ticket visual polish v202605112245 */
#ticketsPanel {
    overflow: hidden;
}

#ticketsPanel .user-panel-heading {
    align-items: flex-start;
    margin-bottom: 24px;
}

#ticketsPanel .user-panel-heading h2 {
    font-size: clamp(32px, 4vw, 48px);
    letter-spacing: -0.04em;
    margin-bottom: 8px;
}

.ticket-upgrade-grid {
    display: grid;
    grid-template-columns: minmax(320px, 480px) minmax(420px, 1fr);
    gap: 24px;
    align-items: start;
}

.ticket-upgrade-form {
    position: sticky;
    top: 18px;
    padding: 22px;
    border: 1px solid rgba(96, 165, 250, .22);
    border-radius: 20px;
    background:
        radial-gradient(circle at top left, rgba(59, 130, 246, .12), transparent 38%),
        rgba(8, 20, 38, .78);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .18);
}

.ticket-upgrade-form label {
    gap: 9px;
}

.ticket-upgrade-form label > span,
.ticket-file-upload > span {
    font-size: 13px;
    font-weight: 800;
    color: var(--text);
}

.ticket-upgrade-form input,
.ticket-upgrade-form select,
.ticket-upgrade-form textarea {
    border-radius: 14px;
    min-height: 48px;
    background: rgba(5, 15, 29, .72);
    border-color: rgba(148, 163, 184, .28);
}

.ticket-upgrade-form textarea {
    min-height: 128px;
    resize: vertical;
}

.ticket-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.ticket-file-upload {
    padding: 18px;
    border: 1px dashed rgba(96, 165, 250, .42);
    border-radius: 18px;
    background: rgba(37, 99, 235, .06);
}

.ticket-file-upload input[type="file"] {
    width: 100%;
    padding: 12px;
    border-radius: 12px;
    background: rgba(2, 8, 23, .42);
}

.ticket-file-upload small {
    color: #bfdbfe;
}

.ticket-upgrade-list {
    display: grid;
    gap: 14px;
}

.ticket-upgrade-list h3 {
    margin: 0 0 4px;
    font-size: 16px;
    color: var(--text);
}

.ticket-upgrade-item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 18px;
    align-items: center;
    padding: 18px;
    border: 1px solid rgba(148, 163, 184, .22);
    border-radius: 18px;
    background:
        linear-gradient(135deg, rgba(15, 23, 42, .86), rgba(15, 23, 42, .54)),
        rgba(8, 20, 38, .78);
    transition: transform .16s ease, border-color .16s ease, background .16s ease;
}

.ticket-upgrade-item:hover {
    transform: translateY(-1px);
    border-color: rgba(96, 165, 250, .42);
    background:
        linear-gradient(135deg, rgba(30, 64, 175, .16), rgba(15, 23, 42, .6)),
        rgba(8, 20, 38, .86);
}

.ticket-upgrade-item .user-ticket-open {
    min-height: auto;
}

.ticket-upgrade-item .user-ticket-open strong {
    font-size: 15px;
    color: var(--text);
}

.ticket-upgrade-item .user-ticket-open small {
    margin-top: 5px;
    color: #bfdbfe;
}

.ticket-badge-stack {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.ticket-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    border: 1px solid rgba(96, 165, 250, .22);
    background: rgba(37, 99, 235, .14);
    color: #bfdbfe;
}

.ticket-badge.priority-low {
    background: rgba(20, 184, 166, .12);
    border-color: rgba(20, 184, 166, .35);
    color: #99f6e4;
}

.ticket-badge.priority-normal {
    background: rgba(37, 99, 235, .18);
    border-color: rgba(96, 165, 250, .38);
    color: #bfdbfe;
}

.ticket-badge.priority-high {
    background: rgba(245, 158, 11, .14);
    border-color: rgba(245, 158, 11, .42);
    color: #fde68a;
}

.ticket-badge.priority-urgent {
    background: rgba(239, 68, 68, .16);
    border-color: rgba(248, 113, 113, .45);
    color: #fecaca;
}

.ticket-badge.attachment-badge {
    background: rgba(168, 85, 247, .16);
    border-color: rgba(192, 132, 252, .42);
    color: #ddd6fe;
}

.user-ticket-detail-list {
    margin-top: 24px;
}

.user-ticket-detail {
    padding: 24px;
    border-radius: 22px;
    border-color: rgba(96, 165, 250, .28);
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, .10), transparent 32%),
        rgba(8, 20, 38, .82);
}

.user-ticket-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(148, 163, 184, .18);
}

.user-ticket-detail-header h3 {
    font-size: 26px;
    letter-spacing: -.03em;
}

.user-ticket-detail-header p {
    margin: 8px 0 0;
    color: #bfdbfe;
}

.user-ticket-attachments,
.user-ticket-conversation,
.user-ticket-reply-form {
    margin-top: 20px;
    padding: 18px;
    border: 1px solid rgba(148, 163, 184, .18);
    border-radius: 18px;
    background: rgba(2, 8, 23, .20);
}

.ticket-attachment-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 10px;
}

.ticket-attachment-link,
.ticket-message-attachments a {
    min-height: 46px;
    padding: 11px 12px;
    border-radius: 14px;
    border: 1px solid rgba(96, 165, 250, .24);
    background: rgba(15, 23, 42, .72);
}

.ticket-attachment-link span,
.ticket-message-attachments a {
    font-weight: 800;
}

.ticket-attachment-link small {
    color: #93c5fd;
}

.user-ticket-conversation {
    display: grid;
    gap: 14px;
}

.ticket-message {
    padding: 16px;
    border: 1px solid rgba(148, 163, 184, .18);
    border-radius: 18px;
    background: rgba(15, 23, 42, .62);
}

.ticket-message.admin-reply {
    margin-left: 34px;
    border-color: rgba(96, 165, 250, .36);
    background: linear-gradient(135deg, rgba(37, 99, 235, .14), rgba(15, 23, 42, .68));
}

.ticket-message:not(.admin-reply) {
    margin-right: 34px;
}

.ticket-message-meta {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 10px;
}

.ticket-message-meta strong {
    color: var(--text);
}

.ticket-message-meta small {
    color: #93c5fd;
}

.ticket-message p {
    color: #e5edff;
    line-height: 1.6;
}

.ticket-message-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.user-ticket-reply-form textarea {
    min-height: 110px;
}

.user-ticket-reply-form .btn {
    width: fit-content;
    min-width: 160px;
}

@media (max-width: 1100px) {
    .ticket-upgrade-grid {
        grid-template-columns: 1fr;
    }

    .ticket-upgrade-form {
        position: static;
    }
}

@media (max-width: 720px) {
    .ticket-form-row,
    .ticket-upgrade-item,
    .user-ticket-detail-header {
        grid-template-columns: 1fr;
        display: grid;
    }

    .ticket-badge-stack {
        justify-content: flex-start;
    }

    .ticket-message,
    .ticket-message.admin-reply,
    .ticket-message:not(.admin-reply) {
        margin-left: 0;
        margin-right: 0;
    }
}

/* User panel admin-reference shell layout v202605120115
   Matches the admin shell behavior: fixed left sidebar, sticky compact header,
   working collapse, clean spacing, and mobile overlay. */
:root {
    --user-sidebar-width: 302px;
    --user-header-height: 78px;
}

.user-main-header {
    position: fixed !important;
    top: 0 !important;
    left: var(--user-sidebar-width) !important;
    right: 0 !important;
    z-index: 80 !important;
    min-height: var(--user-header-height) !important;
    padding: 18px 28px !important;
    background: color-mix(in srgb, var(--surface) 92%, transparent) !important;
    border-bottom: 1px solid var(--border) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 18px !important;
    backdrop-filter: blur(18px);
    box-shadow: none !important;
}

html[data-theme="dark"] .user-main-header {
    background: rgba(15, 27, 45, .72) !important;
}

.user-main-header-title {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
}

.user-main-header-title > div {
    min-width: 0 !important;
}

.user-main-header-title h1 {
    margin: 0 !important;
    font-size: 20px !important;
    line-height: 1.1 !important;
    color: var(--text) !important;
}

.user-main-header-title p {
    margin: 3px 0 0 !important;
    max-width: min(720px, 58vw) !important;
    color: var(--muted) !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.user-main-header-actions {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    flex-shrink: 0 !important;
}

.user-sidebar-toggle,
.user-header-icon-btn {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    padding: 0 !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    background: var(--surface) !important;
    color: var(--text) !important;
    display: inline-grid !important;
    place-items: center !important;
    cursor: pointer !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

.user-sidebar-toggle {
    font-size: 19px !important;
}

.user-header-icon-btn {
    font-size: 18px !important;
}

.user-sidebar-toggle:hover,
.user-header-icon-btn:hover {
    border-color: var(--primary) !important;
    color: var(--primary) !important;
    transform: none !important;
}

.user-header-icon-btn.danger {
    color: var(--red) !important;
}

.user-header-icon-btn.danger:hover {
    border-color: var(--red) !important;
    color: var(--red) !important;
    background: rgba(220, 38, 38, .08) !important;
}

.user-header-logout-form {
    margin: 0 !important;
    display: inline-flex !important;
}

.app-layout {
    max-width: none !important;
    width: 100% !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: var(--user-sidebar-width) minmax(0, 1fr) !important;
    gap: 0 !important;
    transition: grid-template-columns .22s ease !important;
}

.sidebar {
    position: sticky !important;
    top: 0 !important;
    z-index: 90 !important;
    width: var(--user-sidebar-width) !important;
    min-width: var(--user-sidebar-width) !important;
    height: 100vh !important;
    overflow: hidden !important;
    background: var(--surface) !important;
    border-right: 1px solid var(--border) !important;
    transition: transform .22s ease, border-color .22s ease, opacity .18s ease !important;
}

.side-panel {
    min-height: 100vh !important;
    height: 100vh !important;
    padding: 22px !important;
    border-radius: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow-y: auto !important;
    background: var(--surface) !important;
}

.workspace {
    min-width: 0 !important;
    padding: calc(var(--user-header-height) + 28px) 28px 32px !important;
}

body.user-sidebar-collapsed .app-layout {
    grid-template-columns: 0 minmax(0, 1fr) !important;
}

body.user-sidebar-collapsed .sidebar {
    transform: translateX(-100%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    border-right-color: transparent !important;
}

body.user-sidebar-collapsed .user-main-header {
    left: 0 !important;
}

body.user-sidebar-collapsed .workspace {
    grid-column: 2 !important;
}

@media (max-width: 920px) {
    :root {
        --user-sidebar-width: min(330px, 88vw);
        --user-header-height: 70px;
    }

    .user-main-header {
        left: 0 !important;
        min-height: var(--user-header-height) !important;
        padding: 14px 16px !important;
    }

    .app-layout {
        grid-template-columns: 0 minmax(0, 1fr) !important;
    }

    .workspace {
        grid-column: 2 !important;
        padding: calc(var(--user-header-height) + 18px) 14px 24px !important;
    }

    .sidebar {
        position: fixed !important;
        top: var(--user-header-height) !important;
        left: 0 !important;
        bottom: 0 !important;
        height: calc(100vh - var(--user-header-height)) !important;
        width: var(--user-sidebar-width) !important;
        min-width: var(--user-sidebar-width) !important;
        transform: translateX(-105%) !important;
        opacity: 0 !important;
        pointer-events: none !important;
        z-index: 95 !important;
        box-shadow: 22px 0 44px rgba(15, 23, 42, .22) !important;
    }

    body:not(.user-sidebar-collapsed) .sidebar {
        transform: translateX(0) !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    body:not(.user-sidebar-collapsed)::after {
        content: "" !important;
        position: fixed !important;
        inset: var(--user-header-height) 0 0 0 !important;
        z-index: 85 !important;
        background: rgba(15, 23, 42, .42) !important;
    }

    .side-panel {
        height: calc(100vh - var(--user-header-height)) !important;
        min-height: calc(100vh - var(--user-header-height)) !important;
    }

    .user-main-header-title h1 {
        font-size: 17px !important;
    }

    .user-main-header-title p {
        max-width: 46vw !important;
    }
}

@media (max-width: 560px) {
    .user-main-header-title p {
        display: none !important;
    }

    .user-sidebar-toggle,
    .user-header-icon-btn {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        border-radius: 10px !important;
    }

    .user-main-header {
        gap: 10px !important;
    }
}


/* User sidebar admin-reference polish v202605120145
   Aligns the user tracker sidebar with the cleaned admin sidebar visual system. */
.side-panel {
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    background: var(--surface) !important;
}

.user-sidebar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 78px;
    padding: 20px 22px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.user-sidebar-brand-icon,
.sidebar-footer-logo {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #38bdf8, #4f46e5);
    color: #fff;
    font-weight: 900;
    box-shadow: 0 14px 30px rgba(37, 99, 235, .28);
    flex: 0 0 auto;
}

.user-sidebar-brand-text {
    min-width: 0;
    display: block;
}

.user-sidebar-brand-text strong {
    display: block;
    font-size: 18px;
    line-height: 1.1;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-sidebar-profile-link {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.25;
    text-decoration: none;
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-sidebar-profile-link:hover {
    color: var(--text);
}

.user-sidebar-nav,
.sidebar-user-links {
    padding: 18px 14px 0 !important;
    display: grid !important;
    gap: 6px !important;
    margin: 0 !important;
    border-top: 0 !important;
}

.user-sidebar-nav-label,
.sidebar-section-title,
.sidebar-header h2 {
    margin: 16px 8px 8px !important;
    color: var(--muted) !important;
    text-transform: uppercase !important;
    letter-spacing: .09em !important;
    font-weight: 900 !important;
    font-size: 11px !important;
    line-height: 1 !important;
}

.dashboard-sidebar-btn,
.sidebar-user-links a,
.sidebar-user-links button {
    width: 100% !important;
    min-height: 46px !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--text) !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
    text-align: left !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

.dashboard-sidebar-btn span:first-child,
.sidebar-user-links a span:first-child,
.sidebar-user-links button span:first-child {
    width: 20px;
    display: inline-grid;
    place-items: center;
    opacity: .9;
}

.dashboard-sidebar-btn:hover,
.sidebar-user-links a:hover,
.sidebar-user-links button:hover {
    background: rgba(96, 165, 250, .10) !important;
}

.dashboard-sidebar-btn.active,
.dashboard-sidebar-btn[aria-current="page"],
.sidebar-user-links a.active {
    background: linear-gradient(135deg, rgba(59, 130, 246, .22), rgba(79, 70, 229, .28)) !important;
    color: var(--text) !important;
    box-shadow: 0 14px 30px rgba(37, 99, 235, .18) !important;
}

.sidebar-header {
    padding: 18px 14px 8px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
}

.sidebar-header h2 {
    margin: 0 !important;
}

.sidebar-header .btn,
#addTrackerBtn {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    padding: 0 !important;
    border-radius: 12px !important;
    display: inline-grid !important;
    place-items: center !important;
    font-size: 18px !important;
    line-height: 1 !important;
}

.tracker-search {
    margin: 8px 14px 10px !important;
}

.tracker-list {
    padding: 0 14px !important;
    display: grid !important;
    gap: 6px !important;
}

.tracker-item {
    min-height: 46px !important;
    height: auto !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--text) !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
    font-weight: 800 !important;
    box-shadow: none !important;
}

.tracker-item:hover {
    background: rgba(96, 165, 250, .10) !important;
}

.tracker-item.active {
    background: linear-gradient(135deg, rgba(59, 130, 246, .22), rgba(79, 70, 229, .28)) !important;
    color: var(--text) !important;
    box-shadow: 0 14px 30px rgba(37, 99, 235, .18) !important;
}

.tracker-delete-btn {
    margin-left: auto !important;
    color: #fb7185 !important;
    opacity: .95;
}

.sidebar-divider,
.sidebar-divider-before-footer {
    margin: 18px 22px 0 !important;
    border-top: 1px solid var(--border) !important;
    height: 0 !important;
}

.sidebar-app-footer {
    margin-top: auto !important;
    padding: 18px 22px 22px !important;
    border-top: 1px solid var(--border) !important;
    color: var(--muted) !important;
    font-size: 12px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.sidebar-footer-text strong {
    color: var(--text) !important;
    display: block !important;
    line-height: 1.1 !important;
}

.sidebar-footer-text small {
    color: var(--muted) !important;
}

html[data-theme="dark"] .dashboard-sidebar-btn:hover,
html[data-theme="dark"] .sidebar-user-links a:hover,
html[data-theme="dark"] .tracker-item:hover {
    background: rgba(96, 165, 250, .12) !important;
}

@media (max-width: 560px) {
    .user-sidebar-brand {
        padding-left: 16px;
        padding-right: 16px;
    }

    .user-sidebar-profile-link {
        max-width: 180px;
    }

    .user-sidebar-nav,
    .sidebar-user-links,
    .tracker-list {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }
}


/* User sidebar account dropdown safe style v202605120330
   Scoped only to the account dropdown. It does not override app layout width. */
.user-sidebar-account {
    position: relative !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
}

.user-sidebar-account > summary {
    list-style: none !important;
    cursor: pointer !important;
}

.user-sidebar-account > summary::-webkit-details-marker {
    display: none !important;
}

.user-sidebar-account .user-sidebar-brand {
    width: 100% !important;
    border: 0 !important;
    border-bottom: 1px solid var(--border) !important;
    background: transparent !important;
    text-align: left !important;
}

.user-sidebar-account-caret {
    margin-left: auto !important;
    color: var(--muted) !important;
    font-size: 11px !important;
    transition: transform .16s ease !important;
}

.user-sidebar-account[open] .user-sidebar-account-caret {
    transform: rotate(180deg) !important;
}

.user-sidebar-account-menu {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 14px !important;
    right: 14px !important;
    width: auto !important;
    z-index: 260 !important;
    max-height: min(70vh, 540px) !important;
    overflow-y: auto !important;
}

.user-sidebar-profile-link {
    pointer-events: none !important;
}

/* User panel sidebar gap fix v20260511
   Keeps the left sidebar sections compact and removes the large empty space above the app footer. */
.side-panel {
    display: flex !important;
    flex-direction: column !important;
}

.tracker-list {
    flex: 0 0 auto !important;
}

.sidebar-user-links {
    margin-top: 14px !important;
    padding-top: 14px !important;
    gap: 6px !important;
}

.sidebar-user-links a,
.sidebar-user-links button {
    min-height: 38px !important;
}

.sidebar-divider-before-footer {
    margin: 12px 22px 0 !important;
}

.sidebar-app-footer {
    margin-top: 0 !important;
    padding-top: 14px !important;
    padding-bottom: 18px !important;
}
.side-panel .account-dropdown {
    position: relative !important;
}

.side-panel .account-menu.profile-menu-v2 {
    position: absolute !important;
    top: calc(100% + 10px) !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    max-width: none !important;
    max-height: calc(100vh - 110px) !important;
    overflow-y: auto !important;
    z-index: 9999 !important;
    background: #0b1424 !important;
    border: 1px solid rgba(148, 163, 184, .22) !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .45) !important;
}
.brand-mark-img,
.sidebar-footer-logo-img {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    max-height: 38px !important;
    border-radius: 12px !important;
    object-fit: cover !important;
    display: inline-block !important;
}

/* Excel-style compact tracker tables patch v20260511 */
@media (min-width: 761px) {
    .record-grid {
        gap: 14px;
    }

    .record-card {
        height: auto;
        min-height: 0;
    }

    .record-card .table-wrap {
        min-height: 0;
        max-height: 250px;
    }
}

.record-card-header {
    min-height: 54px;
    padding: 12px 24px;
}

.record-card-header p {
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.25;
}

.record-card-header h3 {
    font-size: 15px;
    line-height: 1.25;
}

.record-card-header .btn {
    height: 34px;
    min-height: 34px;
    padding: 0 13px;
    border-radius: 9px;
    font-size: 12px;
}

.table-wrap {
    padding: 12px 22px 0;
}

th {
    padding: 7px 8px;
    font-size: 12px;
    line-height: 1.15;
}

td {
    padding: 5px 8px;
}

td,
td input {
    font-size: 12px;
    line-height: 1.15;
}

input,
select {
    height: 30px;
    border-radius: 8px;
    padding: 0 10px;
}

td input {
    height: 30px;
}

.row-minus {
    height: 30px;
    min-width: 72px;
    border-radius: 8px;
    padding: 0 10px;
    font-size: 12px;
}

.table-pager {
    gap: 10px;
    padding: 10px 22px;
}

.pager-left,
.pager-controls {
    gap: 10px;
}

.pager-size-label,
.pager-summary {
    font-size: 12px;
}

.pager-size-select {
    width: 64px;
    min-width: 64px;
    height: 32px;
    padding: 0 28px 0 12px;
    border-radius: 8px;
    font-size: 12px;
}

.pager-icon {
    width: 26px;
    height: 26px;
    font-size: 18px;
}

.card-total,
.expense-total-row {
    min-height: 48px;
    padding: 12px 24px;
}

.card-total strong,
.expense-total-row strong {
    font-size: 15px;
}

@media (max-width: 760px) {
    .record-card-header {
        padding: 12px 14px;
    }

    .table-wrap {
        padding: 10px 12px 0;
    }

    th,
    td {
        padding-left: 6px;
        padding-right: 6px;
    }

    .table-pager {
        padding: 10px 12px;
    }

    .card-total,
    .expense-total-row {
        padding: 12px 14px;
    }
}



/* Show selected page size fully without inside-table scroll v202605121945
   When page size is 10, 25, 50, or 75, JavaScript adds this class so all rendered rows are visible. */
.record-card .table-wrap.show-all-page-size,
.record-card .table-wrap[data-expanded-page-size="true"] {
    max-height: none !important;
    height: auto !important;
    overflow-y: visible !important;
}

.record-card .table-wrap.show-all-page-size::-webkit-scrollbar,
.record-card .table-wrap[data-expanded-page-size="true"]::-webkit-scrollbar {
    width: 0;
    height: 0;
}


/* Remove inside-table vertical scroll and show all page-size rows v202605122030
   Affects: User Finance Tracker income/expense table wrappers.
   Keeps horizontal overflow available for narrow screens only. */
.record-card {
    height: auto !important;
    min-height: 0 !important;
}

.record-card .table-wrap,
.record-card .table-wrap.show-all-page-size,
.record-card .table-wrap[data-expanded-page-size="true"] {
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
    overflow-y: visible !important;
    scrollbar-width: auto !important;
}

@media (min-width: 761px) {
    .record-card .table-wrap,
    .record-card .table-wrap.show-all-page-size,
    .record-card .table-wrap[data-expanded-page-size="true"] {
        overflow-x: auto !important;
    }
}

@media (max-width: 760px) {
    .record-card .table-wrap,
    .record-card .table-wrap.show-all-page-size,
    .record-card .table-wrap[data-expanded-page-size="true"] {
        min-height: 0 !important;
        max-height: none !important;
        overflow-y: visible !important;
        overflow-x: auto !important;
    }
}

/* Auto-expand tracker table boxes with a 5-row minimum v202605122115
   Affects: User Panel > Finance Tracker > Income and Expenses tables.
   Keeps the box tall enough for 5 rows, then lets it grow naturally for larger page sizes. */
.record-card {
    height: auto !important;
    min-height: 0 !important;
}

.record-card .table-wrap,
.record-card .table-wrap.show-all-page-size,
.record-card .table-wrap[data-expanded-page-size="true"] {
    /* header row + 5 compact item rows; the box can grow beyond this */
    min-height: 224px !important;
    height: auto !important;
    max-height: none !important;
    overflow-y: visible !important;
    scrollbar-width: auto !important;
}

.record-card .table-wrap table {
    height: auto !important;
}

@media (min-width: 761px) {
    .record-card .table-wrap,
    .record-card .table-wrap.show-all-page-size,
    .record-card .table-wrap[data-expanded-page-size="true"] {
        overflow-x: auto !important;
        overflow-y: visible !important;
    }
}

@media (max-width: 760px) {
    .record-card .table-wrap,
    .record-card .table-wrap.show-all-page-size,
    .record-card .table-wrap[data-expanded-page-size="true"] {
        min-height: 224px !important;
        height: auto !important;
        max-height: none !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
    }
}

/* Final auto-growing table box fix v202605122245
   Affects: User Panel > Finance Tracker > Income and Expenses tables.
   Minimum box height stays around 5 rows. For page size above 5, the table box grows with the rows instead of scrolling inside. */
.record-grid,
.record-card,
.record-card-body,
.record-card .table-wrap {
    overflow: visible !important;
}

.record-card {
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    align-self: start !important;
}

.record-card .table-wrap {
    min-height: 224px !important;
    height: auto !important;
    max-height: none !important;
    overflow-y: visible !important;
    overflow-x: auto !important;
    scrollbar-width: auto !important;
}

.record-card .table-wrap.show-all-page-size,
.record-card .table-wrap[data-expanded-page-size="true"],
.record-card .table-wrap[data-visible-rows="6"],
.record-card .table-wrap[data-visible-rows="7"],
.record-card .table-wrap[data-visible-rows="8"],
.record-card .table-wrap[data-visible-rows="9"],
.record-card .table-wrap[data-visible-rows="10"],
.record-card .table-wrap[data-visible-rows="25"],
.record-card .table-wrap[data-visible-rows="50"],
.record-card .table-wrap[data-visible-rows="75"] {
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow-y: visible !important;
}

.record-card .table-wrap table,
.record-card .table-wrap tbody {
    height: auto !important;
    max-height: none !important;
}

.record-card .table-wrap::-webkit-scrollbar {
    width: auto !important;
}

@media (max-width: 760px) {
    .record-card .table-wrap {
        min-height: 224px !important;
        height: auto !important;
        max-height: none !important;
        overflow-y: visible !important;
        overflow-x: auto !important;
    }
}

/* Compact clean finance tracker style v202605122330
   Affects: User Panel > Finance Tracker > Income and Expenses tables/cards.
   Style-only override: smaller Excel-like spacing while keeping the auto-growing table box behavior. */
.record-card {
    border-radius: 12px !important;
}

.record-card .record-card-head,
.record-card-header,
.record-card .card-header {
    min-height: 38px !important;
    padding: 7px 10px !important;
    gap: 6px !important;
}

.record-card h2,
.record-card h3,
.record-card-title,
.record-card .card-title {
    font-size: 14px !important;
    line-height: 1.2 !important;
    margin: 0 !important;
}

.record-card-body,
.record-card .card-body {
    padding: 8px 10px !important;
}

.record-card .table-wrap,
.record-card .table-wrap.show-all-page-size,
.record-card .table-wrap[data-expanded-page-size="true"] {
    min-height: 194px !important; /* about header + 5 compact rows */
    height: auto !important;
    max-height: none !important;
    overflow-y: visible !important;
    overflow-x: auto !important;
}

.record-card .table-wrap table {
    border-spacing: 0 !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
}

.record-card .table-wrap th,
.record-card .table-wrap td {
    height: 28px !important;
    min-height: 28px !important;
    padding: 3px 6px !important;
    vertical-align: middle !important;
}

.record-card .table-wrap thead th {
    height: 30px !important;
    min-height: 30px !important;
    font-size: 11px !important;
    letter-spacing: .01em !important;
    white-space: nowrap !important;
}

.record-card input,
.record-card select,
.record-card textarea,
.record-card .table-wrap input,
.record-card .table-wrap select {
    min-height: 24px !important;
    height: 24px !important;
    padding: 2px 6px !important;
    font-size: 12px !important;
    line-height: 1.15 !important;
    border-radius: 6px !important;
}

.record-card textarea {
    height: auto !important;
    min-height: 28px !important;
}

.record-card button,
.record-card .btn,
.record-card .add-row-btn,
.record-card .remove-row-btn,
.record-card .title-edit-btn {
    min-height: 24px !important;
    padding: 3px 7px !important;
    font-size: 12px !important;
    line-height: 1.1 !important;
    border-radius: 7px !important;
}

.record-card .title-edit-btn {
    padding: 1px 5px !important;
    font-size: 12px !important;
}

.record-card .table-pager,
.record-card .pager,
.record-card .pager-controls {
    min-height: 34px !important;
    padding: 6px 8px !important;
    gap: 6px !important;
    font-size: 12px !important;
}

.record-card .pager-size-label,
.record-card .pager-left,
.record-card .pager-info {
    font-size: 12px !important;
    line-height: 1.2 !important;
}

.record-grid,
.semi-layer-grid {
    gap: 12px !important;
}

@media (max-width: 760px) {
    .record-card .table-wrap,
    .record-card .table-wrap.show-all-page-size,
    .record-card .table-wrap[data-expanded-page-size="true"] {
        min-height: 194px !important;
        height: auto !important;
        max-height: none !important;
        overflow-y: visible !important;
        overflow-x: auto !important;
    }

    .record-card .table-wrap th,
    .record-card .table-wrap td {
        padding: 3px 5px !important;
    }
}

/* Dense Excel-like card spacing patch v202605130015
   Affects only: User Panel > Finance Tracker > Income and Expenses cards/tables.
   Purpose: reduce wasted card/header/footer spacing while preserving auto-growing rows. */
.record-grid,
.semi-layer-grid,
#monthlyRecords,
#semiMonthlyLayer1,
#semiMonthlyLayer2 {
    gap: 8px !important;
}

.semi-layer-grid {
    margin-top: 8px !important;
}

.record-card {
    border-radius: 8px !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

.record-card .record-card-head,
.record-card-header,
.record-card .card-header {
    min-height: 30px !important;
    padding: 5px 8px !important;
    gap: 4px !important;
}

.record-card .record-card-head p,
.record-card-header p,
.record-card .card-header p,
.record-card .record-card-subtitle,
.record-card .card-subtitle {
    margin: 2px 0 0 !important;
    font-size: 11px !important;
    line-height: 1.15 !important;
}

.record-card h2,
.record-card h3,
.record-card-title,
.record-card .card-title {
    font-size: 13px !important;
    line-height: 1.1 !important;
    margin: 0 !important;
}

.record-card-body,
.record-card .card-body {
    padding: 4px 8px !important;
}

.record-card .table-wrap,
.record-card .table-wrap.show-all-page-size,
.record-card .table-wrap[data-expanded-page-size="true"] {
    min-height: 172px !important; /* header + 5 dense rows */
    height: auto !important;
    max-height: none !important;
    overflow-y: visible !important;
    overflow-x: auto !important;
}

.record-card .table-wrap table {
    font-size: 11px !important;
    line-height: 1.12 !important;
}

.record-card .table-wrap thead th {
    height: 24px !important;
    min-height: 24px !important;
    padding: 2px 5px !important;
    font-size: 10.5px !important;
    line-height: 1.1 !important;
}

.record-card .table-wrap th,
.record-card .table-wrap td {
    height: 25px !important;
    min-height: 25px !important;
    padding: 2px 5px !important;
    vertical-align: middle !important;
}

.record-card input,
.record-card select,
.record-card textarea,
.record-card .table-wrap input,
.record-card .table-wrap select {
    min-height: 21px !important;
    height: 21px !important;
    padding: 1px 5px !important;
    font-size: 11px !important;
    line-height: 1.1 !important;
    border-radius: 5px !important;
}

.record-card button,
.record-card .btn,
.record-card .add-row-btn,
.record-card .remove-row-btn,
.record-card .title-edit-btn {
    min-height: 22px !important;
    padding: 2px 7px !important;
    font-size: 11px !important;
    line-height: 1.05 !important;
    border-radius: 6px !important;
}

.record-card .table-pager,
.record-card .pager {
    min-height: 30px !important;
    padding: 4px 8px !important;
    gap: 5px !important;
    font-size: 11px !important;
}

.record-card .pager-controls,
.record-card .pager-left {
    gap: 5px !important;
}

.record-card .pager-size-label,
.record-card .pager-info,
.record-card .pager-controls,
.record-card .pager-left {
    font-size: 11px !important;
    line-height: 1.1 !important;
}

.record-card .table-pager select,
.record-card .pager select {
    width: auto !important;
    min-width: 54px !important;
    height: 24px !important;
    min-height: 24px !important;
}

.record-card .record-summary,
.record-card .summary-row,
.record-card .card-footer,
.record-card-footer,
.record-card .table-total,
.record-card .total-row {
    min-height: 34px !important;
    padding: 5px 8px !important;
    font-size: 11px !important;
    line-height: 1.15 !important;
}

.record-card .record-summary strong,
.record-card .summary-row strong,
.record-card .card-footer strong,
.record-card-footer strong,
.record-card .table-total strong,
.record-card .total-row strong {
    font-size: 14px !important;
    line-height: 1.1 !important;
}

@media (max-width: 760px) {
    .record-grid,
    .semi-layer-grid {
        gap: 8px !important;
    }

    .record-card .table-wrap,
    .record-card .table-wrap.show-all-page-size,
    .record-card .table-wrap[data-expanded-page-size="true"] {
        min-height: 172px !important;
        height: auto !important;
        max-height: none !important;
        overflow-y: visible !important;
        overflow-x: auto !important;
    }

    .record-card .record-card-head,
    .record-card-header,
    .record-card .card-header {
        padding: 5px 7px !important;
    }

    .record-card-body,
    .record-card .card-body {
        padding: 4px 7px !important;
    }
}

/* Equal-height dense month cards + minus remove buttons patch v202605130045
   Style/UI only. Keeps table auto-grow and no internal vertical scroll. */
.record-grid,
.semi-layer-grid,
#monthlyRecords,
#semiMonthlyLayer1,
#semiMonthlyLayer2 {
    align-items: stretch !important;
    grid-auto-rows: auto !important;
}

.record-grid > .record-card,
.semi-layer-grid > .record-card,
#monthlyRecords > .record-card,
#semiMonthlyLayer1 > .record-card,
#semiMonthlyLayer2 > .record-card {
    height: 100% !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

.record-card .record-card-body,
.record-card .card-body {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
}

.record-card .table-wrap,
.record-card .table-wrap.show-all-page-size,
.record-card .table-wrap[data-expanded-page-size="true"] {
    flex: 1 1 auto !important;
    min-height: 172px !important;
    height: auto !important;
    max-height: none !important;
    overflow-y: visible !important;
    overflow-x: auto !important;
}

.record-card .table-pager,
.record-card .pager,
.record-card .record-summary,
.record-card .summary-row,
.record-card .card-footer,
.record-card-footer,
.record-card .table-total,
.record-card .total-row {
    flex: 0 0 auto !important;
}

.record-card button[data-delete-income],
.record-card button[data-delete-expense],
.record-card button[data-delete-income2],
.record-card button[data-delete-expense2] {
    min-width: 30px !important;
    width: 30px !important;
    height: 22px !important;
    min-height: 22px !important;
    padding: 0 !important;
    font-size: 16px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    text-align: center !important;
}


/* Pair equal-height fix for Finance Tracker month cards v202605130115
   Style/layout only: each Income + Expenses pair uses the taller card height.
   Keeps no internal vertical table scroll and keeps 5-row minimum height. */
.record-grid {
    align-items: stretch !important;
}

.record-grid > .record-card {
    align-self: stretch !important;
    display: flex !important;
    flex-direction: column !important;
}

.record-card .table-wrap,
.record-card .table-wrap.show-all-page-size,
.record-card .table-wrap[data-expanded-page-size="true"] {
    flex: 1 1 auto !important;
    min-height: 172px !important;
    height: auto !important;
    max-height: none !important;
    overflow-y: visible !important;
    overflow-x: auto !important;
}

.record-card .table-pager,
.record-card .expense-total-row,
.record-card .card-total {
    flex: 0 0 auto !important;
}

@media (min-width: 761px) {
    .record-grid > .record-card[data-pair-equalized="true"] {
        min-height: var(--record-pair-height, auto) !important;
    }
}

@media (max-width: 760px) {
    .record-grid > .record-card[data-pair-equalized="true"] {
        min-height: 0 !important;
    }
}


/* Stop-vibrate safe minus link style patch v202605130205
   CSS only for remove control appearance. No layout measuring loop added. */
.record-card button[data-delete-income],
.record-card button[data-delete-expense],
.record-card button[data-delete-income2],
.record-card button[data-delete-expense2] {
    appearance: none !important;
    -webkit-appearance: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 14px !important;
    height: auto !important;
    min-height: 14px !important;
    padding: 0 4px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #ff5959 !important;
    font-size: 17px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transform: none !important;
}

.record-card button[data-delete-income]:hover,
.record-card button[data-delete-expense]:hover,
.record-card button[data-delete-income2]:hover,
.record-card button[data-delete-expense2]:hover,
.record-card button[data-delete-income]:focus,
.record-card button[data-delete-expense]:focus,
.record-card button[data-delete-income2]:focus,
.record-card button[data-delete-expense2]:focus {
    background: transparent !important;
    box-shadow: none !important;
    color: #ff2d2d !important;
    text-decoration: underline !important;
    outline: none !important;
    transform: none !important;
}