* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body,
button,
input,
select,
textarea {
    font-family: 'Poppins', sans-serif !important;
}

body {
    background: #f4f6f8;
    color: #1f2937;
    min-height: 100vh;
}

.app {
    width: 100%;
    max-width: 430px;
    min-height: 100vh;
    margin: 0 auto;
    padding: 30px 20px;
    background: #ffffff;
}

.app h1 {
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 5px;
}

.app > p {
    font-size: 14px;
    color: #8a94a3;
    margin-bottom: 35px;
}

.app h2 {
    font-size: 16px;
    font-weight: 600;
    color: #6b7280;
    margin-bottom: 15px;
}

.balance {
    background: #111827;
    color: white;
    padding: 25px;
    border-radius: 20px;
}

.balance p {
    font-size: 14px;
    color: #cbd5e1;
    margin-bottom: 10px;
}

.balance h3 {
    font-size: 32px;
    font-weight: 700;
}

.summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 15px;
}

.summary-card {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    padding: 18px;
    border-radius: 16px;
}

.summary-card p {
    font-size: 13px;
    color: #8a94a3;
    margin-bottom: 8px;
}

.summary-card h3 {
    font-size: 18px;
}

.commitment-summary {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    padding: 18px;
    border-radius: 16px;
    margin-top: 12px;
}

.commitment-summary p {
    font-size: 13px;
    color: #8a94a3;
    margin-bottom: 8px;
}

.commitment-summary h3 {
    font-size: 18px;
}

.commitment-section {
    margin-top: 30px;
}

.section-header {
    margin-bottom: 15px;
}

.section-header h2 {
    font-size: 20px;
    color: #111827;
}

#commitmentForm {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 25px;
}

#commitmentForm input {
    width: 100%;
    padding: 14px;
    border: 1px solid #dbe1e8;
    border-radius: 12px;
    font-size: 14px;
    outline: none;
}

#commitmentForm input:focus {
    border-color: #111827;
}

#commitmentForm button {
    border: none;
    background: #111827;
    color: white;
    padding: 14px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.commitment-item {
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 18px;
    margin-bottom: 12px;
    background: #ffffff;
}

.commitment-item.paid {
    background: #ecfdf5;
    border-color: #a7f3d0;
}

.commitment-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.commitment-item h3 {
    font-size: 16px;
    margin-bottom: 5px;
}

.commitment-item .amount {
    font-size: 16px;
    font-weight: 700;
}

.commitment-item .due {
    margin-top: 8px;
    font-size: 13px;
    color: #8a94a3;
}

.status {
    display: inline-block;
    margin-top: 12px;
    font-size: 12px;
    font-weight: 700;
}

.status.unpaid {
    color: #dc2626;
}

.status.paid {
    color: #059669;
}

.paid-button {
    width: 100%;
    margin-top: 12px;
    padding: 11px;
    border: none;
    border-radius: 10px;
    background: #f1f5f9;
    font-weight: 600;
    cursor: pointer;
}

.commitment-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 8px;
}

.edit-button,
.delete-button {
    padding: 10px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.edit-button {
    background: #f8fafc;
    border: 1px solid #dbe1e8;
    color: #111827;
}

.delete-button {
    background: #fff1f2;
    border: 1px solid #fecdd3;
    color: #be123c;
}

.cancel-edit-button {
    background: transparent !important;
    color: #64748b !important;
    border: 1px solid #dbe1e8 !important;
}

.commitment-progress {
    margin-top: 12px;
    padding: 18px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
}

.progress-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 20px;
}

.progress-info p {
    font-size: 12px;
    color: #8a94a3;
    margin-bottom: 5px;
}

.progress-info h3 {
    font-size: 16px;
    color: #111827;
}

.progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.progress-header span {
    font-size: 13px;
    color: #64748b;
}

.progress-header strong {
    font-size: 13px;
    color: #111827;
}

.progress-bar {
    width: 100%;
    height: 10px;
    background: #e5e7eb;
    border-radius: 50px;
    overflow: hidden;
}

.progress-bar-fill {
    width: 0%;
    height: 100%;
    background: #10b981;
    border-radius: 50px;
    transition: width 0.4s ease;
}

.income-section {
    margin-top: 35px;
}

#incomeForm {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

#incomeForm input {
    width: 100%;
    padding: 14px;
    border: 1px solid #dbe1e8;
    border-radius: 12px;
    font-size: 14px;
    outline: none;
}

#incomeForm input:focus {
    border-color: #111827;
}

#incomeForm button {
    border: none;
    background: #111827;
    color: white;
    padding: 14px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.income-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border: 1px solid #bbf7d0;
    background: #f0fdf4;
    border-radius: 14px;
    margin-bottom: 10px;
}

.income-item h3 {
    font-size: 15px;
    margin-bottom: 4px;
}

.income-item .income-amount {
    font-size: 15px;
    font-weight: 700;
    color: #059669;
}

.delete-income {
    margin-top: 7px;
    border: none;
    background: transparent;
    color: #dc2626;
    font-size: 12px;
    cursor: pointer;
}

.expense-section {
    margin-top: 35px;
    padding-bottom: 40px;
}

#expenseForm {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

#expenseForm input,
#expenseForm select {
    width: 100%;
    padding: 14px;
    border: 1px solid #dbe1e8;
    border-radius: 12px;
    font-size: 14px;
    background: #ffffff;
    outline: none;
}

#expenseForm input:focus,
#expenseForm select:focus {
    border-color: #111827;
}

#expenseForm button {
    border: none;
    background: #111827;
    color: white;
    padding: 14px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.expense-item {
    border: 1px solid #fecaca;
    background: #fff7f7;
    padding: 16px;
    border-radius: 14px;
    margin-bottom: 10px;
}

.expense-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.expense-item h3 {
    font-size: 15px;
    margin-bottom: 5px;
}

.expense-category {
    font-size: 12px;
    color: #64748b;
}

.expense-date {
    font-size: 12px;
    color: #94a3b8;
    margin-top: 4px;
}

.expense-amount {
    font-size: 15px;
    font-weight: 700;
    color: #dc2626;
}

.delete-expense {
    margin-top: 10px;
    border: none;
    background: transparent;
    color: #dc2626;
    font-size: 12px;
    cursor: pointer;
}

/* =========================
   APP SCREENS
========================= */

.screen {
    display: none;
    padding-bottom: 90px;
}

.screen.active {
    display: block;
}

.app-subtitle {
    font-size: 14px;
    color: #8a94a3;
    margin-bottom: 35px;
}

.screen-title {
    margin-bottom: 25px;
}

.screen-title h1 {
    font-size: 28px;
    margin-bottom: 5px;
}

.screen-title p {
    font-size: 14px;
    color: #8a94a3;
}


/* Remove old section spacing */
.income-section,
.expense-section,
.commitment-section {
    margin-top: 0;
}


/* =========================
   BOTTOM NAVIGATION
========================= */

.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);

    width: 100%;
    max-width: 430px;

    display: grid;
    grid-template-columns: repeat(5, 1fr);

    background: #ffffff;

    border-top: 1px solid #e5e7eb;

    padding: 8px 10px 10px;

    z-index: 1000;
}

.nav-item {
    border: none;
    background: transparent;

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 3px;

    padding: 7px 3px;

    color: #94a3b8;

    cursor: pointer;
}

.nav-item span {
    font-size: 20px;
}

.nav-item small {
    font-size: 11px;
    font-weight: 600;
}

.nav-item.active {
    color: #111827;
}


/* =========================
   CANCEL EDIT
========================= */

.cancel-edit-button {
    display: none;
}

.month-switcher {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.month-switcher h2 {
    margin: 0;
    font-size: 16px;
    color: #64748b;
}

.month-switcher button {
    width: 36px;
    height: 36px;

    border: 1px solid #e5e7eb;
    border-radius: 10px;

    background: #ffffff;
    color: #111827;

    font-size: 24px;
    line-height: 1;

    cursor: pointer;
}

.copy-commitments-button {
    width: 100%;
    padding: 13px 15px;
    margin-bottom: 18px;

    background: #f8fafc;
    color: #111827;

    border: 1px solid #dbe1e8;
    border-radius: 12px;

    font-size: 13px;
    font-weight: 600;

    cursor: pointer;
}

.copy-commitments-button:hover {
    background: #f1f5f9;
}

/* =========================
   RECENT TRANSACTIONS
========================= */

.recent-section {
    margin-top: 30px;
}

.recent-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.recent-header h2 {
    margin: 0;
    font-size: 18px;
    color: #111827;
}

.recent-header span {
    font-size: 11px;
    color: #94a3b8;
}

.transaction-item {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 14px 0;

    border-bottom: 1px solid #f1f5f9;
}

.transaction-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.transaction-icon {
    width: 40px;
    height: 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    background: #f8fafc;

    font-size: 18px;
}

.transaction-info h3 {
    font-size: 14px;
    margin-bottom: 4px;
    color: #111827;
}

.transaction-info p {
    font-size: 11px;
    color: #94a3b8;
}

.transaction-amount {
    font-size: 13px;
    font-weight: 700;
}

.transaction-amount.income {
    color: #059669;
}

.transaction-amount.outgoing {
    color: #dc2626;
}

.empty-transactions {
    padding: 25px 10px;

    text-align: center;

    color: #94a3b8;

    font-size: 13px;
}

/* =========================
   EXPENSE ANALYTICS
========================= */

.analytics-section {
    margin-top: 30px;
    padding-bottom: 20px;
}

.analytics-header {
    margin-bottom: 18px;
}

.analytics-header h2 {
    font-size: 18px;
    margin-bottom: 4px;
    color: #111827;
}

.analytics-header p {
    font-size: 12px;
    color: #94a3b8;
}

.analytics-item {
    margin-bottom: 18px;
}

.analytics-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.analytics-name {
    display: flex;
    align-items: center;
    gap: 8px;
}

.analytics-name span {
    font-size: 16px;
}

.analytics-name strong {
    font-size: 13px;
    color: #111827;
}

.analytics-value {
    text-align: right;
}

.analytics-value strong {
    display: block;
    font-size: 13px;
    color: #111827;
}

.analytics-value small {
    font-size: 10px;
    color: #94a3b8;
}

.analytics-bar {
    width: 100%;
    height: 7px;
    background: #f1f5f9;
    border-radius: 20px;
    overflow: hidden;
}

.analytics-fill {
    height: 100%;
    background: #111827;
    border-radius: 20px;
    transition: width 0.4s ease;
}

.analytics-empty {
    padding: 25px 10px;
    text-align: center;
    color: #94a3b8;
    font-size: 13px;
}

/* =========================
   MONTHLY BUDGET
========================= */

.budget-section {
    margin-top: 18px;
    padding: 18px;
    background: #ffffff;
    border: 1px solid #eef2f7;
    border-radius: 16px;
}

.budget-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 15px;
}

.budget-label {
    font-size: 12px;
    color: #64748b;
    margin-bottom: 5px;
}

.budget-top h3 {
    margin: 0;
    font-size: 20px;
    color: #111827;
}

.budget-form {
    display: flex;
    gap: 7px;
}

.budget-form input {
    width: 115px;
    padding: 9px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
    font-size: 12px;
}

.budget-form button {
    padding: 9px 12px;
    border: none;
    border-radius: 9px;
    background: #111827;
    color: white;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.budget-info {
    display: flex;
    justify-content: space-between;
    margin-top: 16px;
    margin-bottom: 8px;
}

.budget-info span {
    font-size: 11px;
    color: #64748b;
}

.budget-bar {
    width: 100%;
    height: 8px;
    background: #f1f5f9;
    border-radius: 20px;
    overflow: hidden;
}

.budget-bar-fill {
    width: 0%;
    height: 100%;
    background: #111827;
    border-radius: 20px;
    transition: width 0.3s ease;
}

.budget-status {
    margin-top: 8px;
    margin-bottom: 0;
    font-size: 11px;
    color: #64748b;
}

.budget-section.over-budget .budget-bar-fill {
    background: #dc2626;
}

.budget-section.over-budget .budget-status {
    color: #dc2626;
    font-weight: 600;
}

@media (max-width: 430px) {

    .budget-top {
        flex-direction: column;
    }

    .budget-form {
        width: 100%;
    }

    .budget-form input {
        flex: 1;
        width: auto;
    }
}

/* =========================
   BACKUP & RESTORE
========================= */

.data-tools-section {
    margin-top: 28px;
    padding: 18px;
    background: #ffffff;
    border: 1px solid #eef2f7;
    border-radius: 16px;
}

.data-tools-header h2 {
    margin: 0 0 5px;
    font-size: 17px;
    color: #111827;
}

.data-tools-header p {
    margin: 0;
    font-size: 12px;
    color: #94a3b8;
}

.data-tools-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 16px;
}

.export-data-button,
.import-data-button {
    padding: 12px 10px;

    border-radius: 10px;

    font-size: 12px;
    font-weight: 600;

    cursor: pointer;

    text-align: center;
}

.export-data-button {
    border: none;
    background: #111827;
    color: #ffffff;
}

.import-data-button {
    border: 1px solid #dbe1e8;
    background: #f8fafc;
    color: #111827;
}

.data-tools-status {
    min-height: 16px;
    margin-top: 10px;
    margin-bottom: 0;

    font-size: 11px;
    color: #059669;
}

@media (max-width: 430px) {

    .data-tools-actions {
        grid-template-columns: 1fr;
    }
}

/* =========================
   MYBELANJA FINAL UI POLISH
========================= */

body {
    background: #f5f7fa;
}

.app {
    position: relative;
    min-height: 100vh;
}


/* HOME HEADER */

.home-header {
    margin-bottom: 20px;
}

.home-header h1 {
    margin-bottom: 3px;
}


/* MONTH SWITCHER */

.month-switcher {
    background: #ffffff;
    border: 1px solid #eef2f7;
    border-radius: 14px;

    padding: 8px;

    margin-bottom: 16px;
}

.month-switcher h2 {
    font-size: 15px;
    font-weight: 700;
}

.month-switcher button {
    width: 38px;
    height: 38px;

    border-radius: 10px;

    background: #f8fafc;
    border: none;

    font-size: 22px;
    cursor: pointer;
}


/* AVAILABLE BALANCE */

.balance {
    padding: 24px 20px;
    border-radius: 20px;

    margin-bottom: 14px;
}

.balance p {
    opacity: 0.75;
    margin-bottom: 5px;
}

.balance h3 {
    font-size: 30px;
    letter-spacing: -1px;
}

.balance-caption {
    display: block;

    margin-top: 5px;

    font-size: 10px;
    opacity: 0.55;
}


/* SUMMARY */

.summary {
    gap: 10px;
}

.summary-card {
    position: relative;

    padding: 16px;

    border: 1px solid #eef2f7;
    border-radius: 16px;

    background: #ffffff;
}

.summary-icon {
    width: 28px;
    height: 28px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 10px;

    border-radius: 9px;

    background: #f1f5f9;

    font-weight: 700;
}

.summary-card p {
    font-size: 11px;
    color: #94a3b8;
}

.summary-card h3 {
    margin-top: 4px;

    font-size: 16px;
}


/* COMMITMENT TOTAL */

.commitment-summary {
    margin-top: 14px;

    border-radius: 16px;
}


/* GENERAL SECTION LABEL */

.section-label {
    margin-bottom: 16px;
}

.section-label h2 {
    margin: 0 0 3px;

    font-size: 17px;
    color: #111827;
}

.section-label p {
    margin: 0;

    font-size: 11px;
    color: #94a3b8;
}


/* BILL PROGRESS */

.commitment-progress {
    margin-top: 14px;

    background: #ffffff;

    border: 1px solid #eef2f7;
    border-radius: 18px;

    padding: 18px;
}


/* RECENT TRANSACTION */

.recent-section {
    margin-top: 24px;

    padding: 18px;

    background: #ffffff;

    border: 1px solid #eef2f7;
    border-radius: 18px;
}

.recent-header {
    margin-bottom: 8px;
}

.recent-header h2 {
    margin: 0 0 3px;

    font-size: 17px;
}

.recent-header p {
    margin: 0;

    font-size: 11px;
    color: #94a3b8;
}

.recent-header > span {
    font-size: 10px;
    white-space: nowrap;
}


/* ANALYTICS */

.analytics-section {
    margin-top: 14px;

    padding: 18px;

    background: #ffffff;

    border: 1px solid #eef2f7;
    border-radius: 18px;
}


/* BOTTOM NAV */

.bottom-nav {
    box-shadow:
        0 -8px 30px rgba(15, 23, 42, 0.07);

    border-top:
        1px solid #eef2f7;
}

.nav-item {
    transition: all 0.2s ease;
}


/* PHONE */

@media (max-width: 430px) {

    body {
        background: #ffffff;
    }

    .app {
        width: 100%;
        max-width: 100%;
    }

    .screen {
        padding-left: 16px;
        padding-right: 16px;
        padding-top: 20px;
        padding-bottom: 105px;
    }

    .balance h3 {
        font-size: 28px;
    }

    .budget-section,
    .commitment-progress,
    .recent-section,
    .analytics-section {
        border-radius: 16px;
    }

    .transaction-info h3 {
        max-width: 150px;

        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .transaction-amount {
        white-space: nowrap;
    }

    .bottom-nav {
        padding-bottom:
            env(safe-area-inset-bottom);
    }
}

/* =========================
   DARK MODE
========================= */

.home-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.theme-toggle {
    width: 42px;
    height: 42px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid #e5e7eb;
    border-radius: 13px;

    background: #ffffff;
    color: #111827;

    font-size: 20px;

    cursor: pointer;

    transition:
        background 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        transform 0.2s ease;
}

.theme-toggle:active {
    transform: scale(0.94);
}


/* Smooth theme transition */

body,
.app,
.balance,
.summary-card,
.budget-section,
.commitment-summary,
.commitment-progress,
.recent-section,
.analytics-section,
.income-item,
.expense-item,
.commitment-item,
.data-tools-section,
.bottom-nav,
input,
select,
button {
    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease;
}


/* =========================
   DARK THEME
========================= */

html[data-theme="dark"] body {
    background: #080d16;
    color: #e5e7eb;
}


html[data-theme="dark"] .app {
    background: #0b111c;
}


/* TITLES */

html[data-theme="dark"] .app h1,
html[data-theme="dark"] .screen-title h1,
html[data-theme="dark"] .section-label h2,
html[data-theme="dark"] .recent-header h2,
html[data-theme="dark"] .analytics-header h2,
html[data-theme="dark"] .data-tools-header h2 {
    color: #f8fafc;
}


html[data-theme="dark"] .app-subtitle,
html[data-theme="dark"] .screen-title p,
html[data-theme="dark"] .section-label p,
html[data-theme="dark"] .recent-header p,
html[data-theme="dark"] .analytics-header p,
html[data-theme="dark"] .data-tools-header p {
    color: #718096;
}


/* THEME BUTTON */

html[data-theme="dark"] .theme-toggle {
    background: #151d2b;
    border-color: #263244;
    color: #f8fafc;
}


/* MONTH SWITCHER */

html[data-theme="dark"] .month-switcher {
    background: #101826;
    border-color: #202c3d;
}


html[data-theme="dark"] .month-switcher h2 {
    color: #cbd5e1;
}


html[data-theme="dark"] .month-switcher button {
    background: #182232;
    color: #f8fafc;
    border-color: #263244;
}


/* MAIN BALANCE */

html[data-theme="dark"] .balance {
    background: #151e2e;
    border: 1px solid #263244;
}


html[data-theme="dark"] .balance p,
html[data-theme="dark"] .balance-caption {
    color: #94a3b8;
}


/* INCOME / EXPENSE SUMMARY */

html[data-theme="dark"] .summary-card {
    background: #101826;
    border-color: #202c3d;
}


html[data-theme="dark"] .summary-card p {
    color: #718096;
}


html[data-theme="dark"] .summary-card h3 {
    color: #f1f5f9;
}


html[data-theme="dark"] .summary-icon {
    background: #1b2637;
    color: #e2e8f0;
}


/* BUDGET */

html[data-theme="dark"] .budget-section {
    background: #101826;
    border-color: #202c3d;
}


html[data-theme="dark"] .budget-label,
html[data-theme="dark"] .budget-info span,
html[data-theme="dark"] .budget-status {
    color: #8291a7;
}


html[data-theme="dark"] .budget-top h3 {
    color: #f8fafc;
}


html[data-theme="dark"] .budget-form input {
    background: #0b111c;
    border-color: #2a374a;
    color: #f8fafc;
}


html[data-theme="dark"] .budget-form input::placeholder {
    color: #64748b;
}


html[data-theme="dark"] .budget-form button {
    background: #f8fafc;
    color: #111827;
}


html[data-theme="dark"] .budget-bar {
    background: #1d2939;
}


html[data-theme="dark"] .budget-bar-fill {
    background: #e2e8f0;
}


/* COMMITMENT SUMMARY */

html[data-theme="dark"] .commitment-summary {
    background: #101826;
    border-color: #202c3d;
}


html[data-theme="dark"] .commitment-summary p {
    color: #718096;
}


html[data-theme="dark"] .commitment-summary h3 {
    color: #f8fafc;
}


/* BILL PROGRESS */

html[data-theme="dark"] .commitment-progress {
    background: #101826;
    border-color: #202c3d;
}


html[data-theme="dark"] .progress-info p,
html[data-theme="dark"] .progress-header span {
    color: #8291a7;
}


html[data-theme="dark"] .progress-info h3,
html[data-theme="dark"] .progress-header strong {
    color: #f8fafc;
}


html[data-theme="dark"] .progress-bar {
    background: #1d2939;
}


/* RECENT TRANSACTIONS */

html[data-theme="dark"] .recent-section {
    background: #101826;
    border-color: #202c3d;
}


html[data-theme="dark"] .transaction-item {
    border-color: #1e293b;
}


html[data-theme="dark"] .transaction-icon {
    background: #192333;
}


html[data-theme="dark"] .transaction-info h3 {
    color: #f1f5f9;
}


html[data-theme="dark"] .transaction-info p {
    color: #718096;
}


html[data-theme="dark"] .empty-transactions {
    color: #718096;
}


/* SPENDING BREAKDOWN */

html[data-theme="dark"] .analytics-section {
    background: #101826;
    border-color: #202c3d;
}


html[data-theme="dark"] .analytics-name strong,
html[data-theme="dark"] .analytics-value strong {
    color: #f1f5f9;
}


html[data-theme="dark"] .analytics-value small {
    color: #718096;
}


html[data-theme="dark"] .analytics-bar {
    background: #1d2939;
}


html[data-theme="dark"] .analytics-fill {
    background: #cbd5e1;
}


/* FORMS */

html[data-theme="dark"] #incomeForm input,
html[data-theme="dark"] #expenseForm input,
html[data-theme="dark"] #expenseForm select,
html[data-theme="dark"] #commitmentForm input {
    background: #101826;
    border-color: #2a374a;
    color: #f8fafc;
}


html[data-theme="dark"] #incomeForm input::placeholder,
html[data-theme="dark"] #expenseForm input::placeholder,
html[data-theme="dark"] #commitmentForm input::placeholder {
    color: #64748b;
}


html[data-theme="dark"] #expenseForm select {
    color-scheme: dark;
}


/* INCOME ITEMS */

html[data-theme="dark"] .income-item {
    background: #0d201a;
    border-color: #195c47;
}


html[data-theme="dark"] .income-item h3 {
    color: #ecfdf5;
}


/* EXPENSE ITEMS */

html[data-theme="dark"] .expense-item {
    background: #261416;
    border-color: #623038;
}


html[data-theme="dark"] .expense-item h3 {
    color: #fff1f2;
}


html[data-theme="dark"] .expense-category,
html[data-theme="dark"] .expense-date {
    color: #9ca3af;
}


/* COMMITMENT ITEMS */

html[data-theme="dark"] .commitment-item {
    background: #101826;
    border-color: #293548;
}


html[data-theme="dark"] .commitment-item h3,
html[data-theme="dark"] .commitment-item .amount {
    color: #f8fafc;
}


html[data-theme="dark"] .commitment-item .due {
    color: #8291a7;
}


html[data-theme="dark"] .commitment-item.paid {
    background: #0b211a;
    border-color: #17664c;
}


html[data-theme="dark"] .paid-button {
    background: #1b2637;
    color: #e2e8f0;
}


/* EDIT / DELETE BUTTONS */

html[data-theme="dark"] .edit-button {
    background: #182232;
    border-color: #2a374a;
    color: #e2e8f0;
}


html[data-theme="dark"] .delete-button {
    background: #32171c;
    border-color: #672b37;
    color: #fda4af;
}


html[data-theme="dark"] .cancel-edit-button {
    background: transparent !important;
    border-color: #334155 !important;
    color: #94a3b8 !important;
}


/* COPY COMMITMENTS */

html[data-theme="dark"] .copy-commitments-button {
    background: #101826;
    border-color: #293548;
    color: #e2e8f0;
}


/* BACKUP */

html[data-theme="dark"] .data-tools-section {
    background: #101826;
    border-color: #202c3d;
}


html[data-theme="dark"] .export-data-button {
    background: #f8fafc;
    color: #111827;
}


html[data-theme="dark"] .import-data-button {
    background: #182232;
    border-color: #2a374a;
    color: #e2e8f0;
}


/* BOTTOM NAV */

html[data-theme="dark"] .bottom-nav {
    background: #0d1522;
    border-color: #202c3d;

    box-shadow:
        0 -8px 30px rgba(0, 0, 0, 0.30);
}


html[data-theme="dark"] .nav-item {
    color: #64748b;
}


html[data-theme="dark"] .nav-item.active {
    color: #f8fafc;
}


/* MOBILE */

@media (max-width: 430px) {

    html[data-theme="dark"] body {
        background: #0b111c;
    }

}


/* =========================
   DEBT TRACKER
========================= */

.debt-section {
    margin-top: 18px;
    padding-bottom: 30px;
}

.debt-summary-card {
    padding: 20px;
    margin-bottom: 18px;

    background: #111827;
    color: #ffffff;

    border-radius: 18px;
}

.debt-summary-card p {
    font-size: 12px;
    color: #94a3b8;

    margin-bottom: 5px;
}

.debt-summary-card h2 {
    margin: 0;

    font-size: 26px;
    color: #ffffff;
}

.debt-summary-card span {
    display: block;

    margin-top: 6px;

    font-size: 11px;
    color: #94a3b8;
}


#debtForm {
    display: flex;
    flex-direction: column;

    gap: 10px;

    margin-bottom: 22px;
}

#debtForm input {
    width: 100%;

    padding: 14px;

    border: 1px solid #dbe1e8;
    border-radius: 12px;

    background: #ffffff;

    font-size: 14px;

    outline: none;
}

#debtForm input:focus {
    border-color: #111827;
}

#debtForm button {
    padding: 14px;

    border: none;
    border-radius: 12px;

    background: #111827;
    color: #ffffff;

    font-size: 13px;
    font-weight: 600;

    cursor: pointer;
}


.debt-item {
    padding: 18px;

    margin-bottom: 14px;

    border: 1px solid #e5e7eb;
    border-radius: 16px;

    background: #ffffff;
}


.debt-item.paid-off {
    background: #f0fdf4;
    border-color: #bbf7d0;
}


.debt-item-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    gap: 15px;
}


.debt-item h3 {
    margin: 0 0 4px;

    font-size: 15px;

    color: #111827;
}


.debt-monthly {
    font-size: 11px;

    color: #94a3b8;
}


.debt-remaining {
    text-align: right;
}


.debt-remaining small {
    display: block;

    font-size: 10px;

    color: #94a3b8;
}


.debt-remaining strong {
    font-size: 15px;

    color: #dc2626;
}


.debt-item.paid-off .debt-remaining strong {
    color: #059669;
}


.debt-progress-info {
    display: flex;
    justify-content: space-between;

    margin-top: 16px;
    margin-bottom: 7px;

    font-size: 10px;

    color: #64748b;
}


.debt-progress {
    width: 100%;
    height: 8px;

    overflow: hidden;

    border-radius: 30px;

    background: #f1f5f9;
}


.debt-progress-fill {
    height: 100%;

    border-radius: 30px;

    background: #10b981;

    transition: width 0.3s ease;
}


.debt-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 8px;

    margin-top: 14px;
}


.debt-record-payment {
    grid-column: 1 / -1;

    padding: 11px;

    border: none;
    border-radius: 10px;

    background: #111827;
    color: white;

    font-size: 12px;
    font-weight: 600;

    cursor: pointer;
}


.debt-record-payment:disabled {
    opacity: 0.45;

    cursor: default;
}


.debt-paid-label {
    display: inline-block;

    margin-top: 12px;

    padding: 5px 8px;

    background: #dcfce7;
    color: #047857;

    border-radius: 8px;

    font-size: 10px;
    font-weight: 700;
}


/* DARK MODE DEBT */

html[data-theme="dark"] .debt-summary-card {
    background: #151e2e;
    border: 1px solid #263244;
}


html[data-theme="dark"] #debtForm input {
    background: #101826;

    border-color: #2a374a;

    color: #f8fafc;
}


html[data-theme="dark"] #debtForm input::placeholder {
    color: #64748b;
}


html[data-theme="dark"] .debt-item {
    background: #101826;

    border-color: #293548;
}


html[data-theme="dark"] .debt-item h3 {
    color: #f8fafc;
}


html[data-theme="dark"] .debt-item.paid-off {
    background: #0b211a;

    border-color: #17664c;
}


html[data-theme="dark"] .debt-monthly,
html[data-theme="dark"] .debt-progress-info,
html[data-theme="dark"] .debt-remaining small {
    color: #8291a7;
}


html[data-theme="dark"] .debt-progress {
    background: #1d2939;
}


html[data-theme="dark"] .debt-record-payment {
    background: #f8fafc;

    color: #111827;
}


/* =========================
   HOME DEBT OVERVIEW
========================= */

.home-debt-card {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    margin-top: 14px;
    padding: 18px;

    background: #ffffff;

    border: 1px solid #e5e7eb;
    border-radius: 16px;
}


.home-debt-left {
    display: flex;
    align-items: center;

    gap: 12px;
}


.home-debt-icon {
    width: 42px;
    height: 42px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #f1f5f9;
    color: #111827;

    border-radius: 12px;

    font-size: 20px;
}


.home-debt-card p {
    margin: 0 0 3px;

    font-size: 11px;
    color: #94a3b8;
}


.home-debt-card h3 {
    margin: 0;

    font-size: 17px;
    color: #111827;
}


.home-debt-card span {
    display: block;

    margin-top: 3px;

    font-size: 10px;
    color: #94a3b8;
}


.view-debt-button {
    flex-shrink: 0;

    padding: 9px 11px;

    border: none;
    border-radius: 9px;

    background: #111827;
    color: #ffffff;

    font-size: 11px;
    font-weight: 600;

    cursor: pointer;
}


/* DARK MODE */

html[data-theme="dark"] .home-debt-card {
    background: #101826;
    border-color: #202c3d;
}


html[data-theme="dark"] .home-debt-icon {
    background: #1b2637;
    color: #f8fafc;
}


html[data-theme="dark"] .home-debt-card h3 {
    color: #f8fafc;
}


html[data-theme="dark"] .home-debt-card p,
html[data-theme="dark"] .home-debt-card span {
    color: #8291a7;
}


html[data-theme="dark"] .view-debt-button {
    background: #f8fafc;
    color: #111827;
}


/* =========================
   UPCOMING BILLS
========================= */

.upcoming-bills-section {
    margin-top: 24px;
    padding: 18px;

    background: #ffffff;

    border: 1px solid #e5e7eb;
    border-radius: 16px;
}


.upcoming-bills-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    gap: 15px;

    margin-bottom: 8px;
}


.upcoming-bills-header h2 {
    margin: 0 0 3px;

    font-size: 17px;
    font-weight: 700;

    color: #111827;
}


.upcoming-bills-header p {
    margin: 0;

    font-size: 11px;

    color: #94a3b8;
}


.upcoming-bills-header > span {
    flex-shrink: 0;

    padding: 5px 9px;

    border-radius: 999px;

    background: #f1f5f9;

    color: #64748b;

    font-size: 10px;
    font-weight: 600;
}


/* BILL ITEM */

.upcoming-bill-item {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    padding: 14px 0;

    border-bottom: 1px solid #f1f5f9;
}


.upcoming-bill-item:last-child {
    border-bottom: none;
}


.upcoming-bill-left {
    display: flex;
    align-items: center;

    gap: 11px;

    min-width: 0;
}


.upcoming-bill-icon {
    width: 38px;
    height: 38px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 11px;

    background: #f8fafc;

    color: #64748b;

    font-size: 16px;
    font-weight: 700;
}


.upcoming-bill-info {
    min-width: 0;
}


.upcoming-bill-info h3 {
    margin: 0 0 3px;

    font-size: 13px;
    font-weight: 600;

    color: #111827;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.upcoming-bill-info p {
    margin: 0;

    font-size: 10px;

    color: #94a3b8;
}


.upcoming-bill-amount {
    flex-shrink: 0;

    font-size: 12px;
    font-weight: 700;

    color: #111827;
}


/* DUE SOON */

.upcoming-bill-item.is-soon
.upcoming-bill-icon {

    background: #fff7ed;
    color: #ea580c;
}


.upcoming-bill-info
.soon-text {

    color: #ea580c;
    font-weight: 600;
}


/* URGENT */

.upcoming-bill-item.is-urgent
.upcoming-bill-icon {

    background: #fef2f2;
    color: #dc2626;
}


.upcoming-bill-info
.urgent-text {

    color: #dc2626;
    font-weight: 700;
}


/* OVERDUE */

.upcoming-bill-item.is-overdue
.upcoming-bill-icon {

    background: #fef2f2;
    color: #dc2626;
}


.upcoming-bill-info
.overdue-text {

    color: #dc2626;
    font-weight: 700;
}


/* EMPTY */

.upcoming-empty {
    display: flex;
    align-items: center;

    gap: 11px;

    padding: 16px 0 4px;
}


.upcoming-empty > span {
    width: 36px;
    height: 36px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border-radius: 50%;

    background: #ecfdf5;

    color: #059669;

    font-weight: 700;
}


.upcoming-empty strong {
    display: block;

    margin-bottom: 2px;

    font-size: 12px;

    color: #111827;
}


.upcoming-empty p {
    margin: 0;

    font-size: 10px;

    color: #94a3b8;
}


.upcoming-more {
    margin: 12px 0 0;

    text-align: center;

    font-size: 10px;
    font-weight: 600;

    color: #64748b;
}


/* =========================
   UPCOMING BILLS - DARK MODE
========================= */

html[data-theme="dark"]
.upcoming-bills-section {

    background: #111827;

    border-color: #253044;
}


html[data-theme="dark"]
.upcoming-bills-header h2,

html[data-theme="dark"]
.upcoming-bill-info h3,

html[data-theme="dark"]
.upcoming-bill-amount,

html[data-theme="dark"]
.upcoming-empty strong {

    color: #f8fafc;
}


html[data-theme="dark"]
.upcoming-bills-header p,

html[data-theme="dark"]
.upcoming-bill-info p,

html[data-theme="dark"]
.upcoming-empty p,

html[data-theme="dark"]
.upcoming-more {

    color: #94a3b8;
}


html[data-theme="dark"]
.upcoming-bills-header > span {

    background: #1e293b;

    color: #cbd5e1;
}


html[data-theme="dark"]
.upcoming-bill-item {

    border-color: #253044;
}


html[data-theme="dark"]
.upcoming-bill-icon {

    background: #1e293b;

    color: #cbd5e1;
}


/* =========================
   MONTHLY SPENDING COMPARISON
========================= */

.monthly-comparison-section {
    margin-top: 24px;
    padding: 18px;

    background: #ffffff;

    border: 1px solid #e5e7eb;
    border-radius: 16px;
}


.monthly-comparison-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    margin-bottom: 18px;
}


.monthly-comparison-header h2 {
    margin: 0 0 3px;

    font-size: 17px;
    font-weight: 700;

    color: #111827;
}


.monthly-comparison-header p {
    margin: 0;

    font-size: 11px;

    color: #94a3b8;
}


/* TREND ICON */

.comparison-trend-icon {
    width: 38px;
    height: 38px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    font-size: 18px;
    font-weight: 700;
}


.comparison-trend-icon.increase {
    background: #fef2f2;
    color: #dc2626;
}


.comparison-trend-icon.decrease {
    background: #ecfdf5;
    color: #059669;
}


.comparison-trend-icon.neutral {
    background: #f1f5f9;
    color: #64748b;
}


/* VALUES */

.comparison-values {
    display: grid;

    grid-template-columns:
        1fr auto 1fr;

    align-items: center;

    gap: 15px;

    margin-bottom: 16px;
}


.comparison-value-card {
    min-width: 0;
}


.comparison-value-card span {
    display: block;

    margin-bottom: 4px;

    font-size: 10px;
    font-weight: 500;

    color: #94a3b8;
}


.comparison-value-card strong {
    display: block;

    font-size: 15px;
    font-weight: 700;

    color: #111827;

    white-space: nowrap;
}


.comparison-divider {
    width: 1px;
    height: 35px;

    background: #e5e7eb;
}


/* RESULT */

.comparison-result {
    padding: 12px 13px;

    border-radius: 12px;
}


.comparison-result strong {
    display: block;

    margin-bottom: 2px;

    font-size: 12px;
    font-weight: 700;
}


.comparison-result span {
    display: block;

    font-size: 10px;
}


/* SPENDING INCREASE */

.comparison-result.increase {
    background: #fef2f2;
}


.comparison-result.increase strong {
    color: #dc2626;
}


.comparison-result.increase span {
    color: #b91c1c;
}


/* SPENDING DECREASE */

.comparison-result.decrease {
    background: #ecfdf5;
}


.comparison-result.decrease strong {
    color: #059669;
}


.comparison-result.decrease span {
    color: #047857;
}


/* NEUTRAL */

.comparison-result.neutral {
    background: #f8fafc;
}


.comparison-result.neutral strong {
    color: #475569;
}


.comparison-result.neutral span {
    color: #94a3b8;
}


/* =========================
   MONTHLY COMPARISON DARK MODE
========================= */

html[data-theme="dark"]
.monthly-comparison-section {

    background: #111827;

    border-color: #253044;
}


html[data-theme="dark"]
.monthly-comparison-header h2,

html[data-theme="dark"]
.comparison-value-card strong {

    color: #f8fafc;
}


html[data-theme="dark"]
.monthly-comparison-header p,

html[data-theme="dark"]
.comparison-value-card span {

    color: #94a3b8;
}


html[data-theme="dark"]
.comparison-divider {

    background: #253044;
}


html[data-theme="dark"]
.comparison-result.neutral {

    background: #1e293b;
}


html[data-theme="dark"]
.comparison-result.neutral strong {

    color: #e2e8f0;
}


html[data-theme="dark"]
.comparison-result.neutral span {

    color: #94a3b8;
}


/* =========================
   MYBELANJA ABSTRACT + GLOW
========================= */

.app {
    position: relative;

    background:

        /* SOFT GLOW TOP */
        radial-gradient(
            circle at 85% 8%,
            rgba(99, 102, 241, 0.07) 0,
            rgba(99, 102, 241, 0.04) 18%,
            transparent 38%
        ),

        /* ABSTRACT LINE TOP RIGHT */
        radial-gradient(
            circle at 115% 5%,
            transparent 0,
            transparent 145px,
            rgba(100, 116, 139, 0.10) 146px,
            rgba(100, 116, 139, 0.10) 147px,
            transparent 148px
        ),

        /* ABSTRACT LINE LEFT */
        radial-gradient(
            circle at -20% 70%,
            transparent 0,
            transparent 120px,
            rgba(100, 116, 139, 0.08) 121px,
            rgba(100, 116, 139, 0.08) 122px,
            transparent 123px
        ),

        #ffffff;
}


html[data-theme="dark"] .app {

    background:

        /* SOFT GLOW TOP */
        radial-gradient(
            circle at 85% 8%,
            rgba(99, 102, 241, 0.12) 0,
            rgba(99, 102, 241, 0.06) 20%,
            transparent 42%
        ),

        /* ABSTRACT LINE TOP RIGHT */
        radial-gradient(
            circle at 115% 5%,
            transparent 0,
            transparent 145px,
            rgba(148, 163, 184, 0.10) 146px,
            rgba(148, 163, 184, 0.10) 147px,
            transparent 148px
        ),

        /* ABSTRACT LINE LEFT */
        radial-gradient(
            circle at -20% 70%,
            transparent 0,
            transparent 120px,
            rgba(148, 163, 184, 0.07) 121px,
            rgba(148, 163, 184, 0.07) 122px,
            transparent 123px
        ),

        #0b111c;
}



/* =========================
   QUICK ADD
========================= */

body.quick-add-open {
    overflow: hidden;
}


/* =========================
   FLOATING BUTTON
========================= */

.quick-add-fab {
    position: fixed;

    right: max(
        18px,
        calc((100vw - 430px) / 2 + 18px)
    );

    bottom: calc(
        82px + env(safe-area-inset-bottom)
    );

    width: 54px;
    height: 54px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: none;
    border-radius: 17px;

    background: #111827;
    color: #ffffff;

    box-shadow:
        0 12px 30px rgba(15, 23, 42, 0.22);

    cursor: pointer;

    z-index: 1100;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


.quick-add-fab span {
    font-size: 28px;
    font-weight: 400;

    line-height: 1;

    transform: translateY(-1px);
}


.quick-add-fab:active {
    transform: scale(0.94);
}


/* =========================
   OVERLAY
========================= */

.quick-add-overlay {
    position: fixed;

    inset: 0;

    background:
        rgba(15, 23, 42, 0.38);

    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);

    opacity: 0;
    visibility: hidden;

    z-index: 1200;

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease;
}


.quick-add-overlay.active {
    opacity: 1;
    visibility: visible;
}


/* =========================
   BOTTOM SHEET
========================= */

.quick-add-sheet {
    position: fixed;

    left: 50%;
    bottom: 0;

    width: min(430px, 100%);

    padding:
        10px
        18px
        calc(22px + env(safe-area-inset-bottom));

    background: #ffffff;

    border-radius:
        24px 24px 0 0;

    box-shadow:
        0 -20px 60px rgba(15, 23, 42, 0.16);

    transform:
        translate(-50%, 105%);

    visibility: hidden;

    z-index: 1300;

    transition:
        transform 0.3s ease,
        visibility 0.3s ease;
}


.quick-add-sheet.active {
    transform:
        translate(-50%, 0);

    visibility: visible;
}


/* HANDLE */

.quick-add-handle {
    width: 42px;
    height: 4px;

    margin:
        2px auto 18px;

    border-radius: 999px;

    background: #e2e8f0;
}


/* HEADER */

.quick-add-sheet-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 15px;

    margin-bottom: 18px;
}


.quick-add-sheet-header h2 {
    margin: 0 0 4px;

    font-size: 20px;
    font-weight: 700;

    color: #111827;
}


.quick-add-sheet-header p {
    margin: 0;

    font-size: 11px;

    color: #94a3b8;
}


.quick-add-close {
    width: 36px;
    height: 36px;

    flex-shrink: 0;

    border: 1px solid #e5e7eb;
    border-radius: 11px;

    background: #f8fafc;
    color: #64748b;

    font-size: 22px;
    line-height: 1;

    cursor: pointer;
}


/* =========================
   OPTIONS
========================= */

.quick-add-options {
    display: flex;
    flex-direction: column;

    gap: 10px;
}


.quick-add-action {
    width: 100%;

    display: flex;
    align-items: center;

    gap: 12px;

    padding: 13px;

    border: 1px solid #e8edf3;
    border-radius: 15px;

    background: #ffffff;

    text-align: left;

    cursor: pointer;

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}


.quick-add-action:active {
    transform: scale(0.985);

    background: #f8fafc;
}


/* ICON */

.quick-add-option-icon {
    width: 42px;
    height: 42px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    font-size: 17px;
    font-weight: 700;
}


.quick-add-option-icon.income {
    background: #ecfdf5;
    color: #059669;
}


.quick-add-option-icon.expense {
    background: #fef2f2;
    color: #dc2626;
}


.quick-add-option-icon.bill {
    background: #eff6ff;
    color: #2563eb;
}


/* TEXT */

.quick-add-option-text {
    flex: 1;

    min-width: 0;
}


.quick-add-option-text strong {
    display: block;

    margin-bottom: 2px;

    font-size: 13px;
    font-weight: 600;

    color: #111827;
}


.quick-add-option-text span {
    display: block;

    font-size: 10px;

    color: #94a3b8;
}


.quick-add-arrow {
    flex-shrink: 0;

    color: #94a3b8;

    font-size: 22px;
}


/* =========================
   DARK MODE
========================= */

html[data-theme="dark"]
.quick-add-fab {

    background: #f8fafc;
    color: #0f172a;

    box-shadow:
        0 12px 35px rgba(0, 0, 0, 0.35);
}


html[data-theme="dark"]
.quick-add-sheet {

    background: #111827;

    box-shadow:
        0 -20px 60px rgba(0, 0, 0, 0.45);
}


html[data-theme="dark"]
.quick-add-handle {

    background: #334155;
}


html[data-theme="dark"]
.quick-add-sheet-header h2,

html[data-theme="dark"]
.quick-add-option-text strong {

    color: #f8fafc;
}


html[data-theme="dark"]
.quick-add-sheet-header p,

html[data-theme="dark"]
.quick-add-option-text span,

html[data-theme="dark"]
.quick-add-arrow {

    color: #94a3b8;
}


html[data-theme="dark"]
.quick-add-close {

    background: #1e293b;
    border-color: #334155;

    color: #cbd5e1;
}


html[data-theme="dark"]
.quick-add-action {

    background: #0f172a;

    border-color: #253044;
}


html[data-theme="dark"]
.quick-add-action:active {

    background: #172033;
}