/* BudgetIt: собрано из css/*.css (node scripts/build-css.mjs). Не править вручную. */
/* ── 00-base.css ── */
button:active, .chip-btn:active, .category-item:active, .delete-budget-btn:active, .close-category-sheet:active {
    transform: translateY(1px);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.15);
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}
div {
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
div:focus {
    outline: none;
}
button, input, select, textarea {
    font-family: "Montserrat", "sans-serif";
    user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}
input, select, textarea {
    background-color: var(--tertiary-color);
    font-family: "Montserrat", "sans-serif";
    font-weight: bold;
}
h2 {
    font-size: 1.2rem;
}
h3 {
    padding-bottom: 10px;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}
body {
    font-family: "Montserrat", "sans-serif";
    font-weight: 600;
    background-color: var(--main-ground);
    color: var(--secondary-color);
    user-select: none;
    height: 100vh;
    display: flex;
    flex-direction: column;
}
.summary-block:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
button:hover {
    opacity: 0.9;
    transition: opacity var(--transition-fast);
}
input:focus, select:focus, textarea:focus {
    outline: 2px solid var(--secondary-color);
}
.hidden {
    display: none !important;
}
.bottom-sheet.hidden, #settings-page.hidden, #analytics-page.hidden, .fullscreen-sheet.hidden {
    display: block !important;
    pointer-events: none !important;
}
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}
#bottom-sheet-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 1200 !important;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
#bottom-sheet-backdrop:not(.hidden) {
    opacity: 1;
    pointer-events: auto;
}
.bottom-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 600px;
    margin: 0 auto;
    background: var(--tertiary-color);
    border-radius: 24px 24px 0 0;
    padding: var(--spacing-md) var(--spacing-md) 22px;
    max-height: 87vh;
    overflow-y: auto;
    z-index: var(--z-index-bottom-sheet);
    box-shadow: 0 -12px 30px rgba(0,0,0,0.75);
    border: 1px solid rgba(255,255,255,0.06);
    transform: translateY(100%);
    opacity: 0;
    will-change: transform, opacity;
    transition: transform var(--transition-slow),
    opacity   var(--transition-slow);
    transform-origin: bottom center;
}
.bottom-sheet:not(.hidden) {
    transform: translateY(0);
    opacity: 1;
    will-change: auto;
}
header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    z-index: var(--z-index-header);
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    z-index: var(--z-index-header);
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
header h1, #current-budget {
    font-size: 1.3rem;
    cursor: pointer;
    max-width: 60%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--primary-color)!important;
}
.header-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
main {
    flex: 1;
    overflow-y: auto;
    padding: 70px 0 130px;
    scroll-behavior: smooth;
    border-radius: 8px;
    background-color: var(--main-ground);
}
.wrapper {
    padding: 0 var(--spacing-md) 0;
}
#summary-blocks {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 7px 0 20px;
}
.summary-block {
    background: var(--tertiary-color);
    box-shadow: var(--shadow-sm);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-md);
    width: 100%;
}
#block-budget::before {
    background: var(--primary-color);
}
#block-income::before {
    background: var(--income-color);
}
#block-expense::before {
    background: var(--expense-color);
}
#block-deposit::before {
    background: var(--deposit-color);
}
#block-debt::before {
    background: var(--debt-color);
}
#block-budget .block-value {
    color: var(--primary-color);
}
#block-income .block-value {
    color: var(--income-color);
}
#block-expense .block-value {
    color: var(--expense-color);
}
#block-deposit .block-value {
    color: var(--deposit-color);
}
#block-debt .block-value {
    color: var(--debt-color);
}
.block-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.85rem;
    margin-bottom: 4px;
    font-weight: 600;
    color: var(--secondary-color);
}
.block-title .emoji {
    font-size: 1.2rem;
}
.block-value {
    font-size: 1.4rem;
    font-weight: 700;
    overflow-x: auto;
    scrollbar-width: none;
}
.summary-block.full {
    flex: 0 0 100%;
}
.summary-block.half {
    flex: 1 1 calc(50% - 5px);
    min-width: 0;
}
[data-theme="dark"] .summary-block, :root[data-theme="shark"] .summary-block, :root[data-theme="onyx"] .summary-block, :root[data-theme="grape"] .summary-block, :root[data-theme="blackberry"] .summary-block, :root[data-theme="hookah"] .summary-block, :root[data-theme="trackit"] .summary-block, [data-theme="tiffany"] .summary-block {
    background: rgba(0, 0, 0, 0.7);
    box-shadow: var(--shadow-md);
}
#block-budget {
    border-color: rgba(255, 255, 255, 0.06);
}
#block-income {
    border-color: rgba(42, 172, 232, 0.25);
    box-shadow: 0 0 0 1px rgba(42, 172, 232, 0.12),
    var(--shadow-sm);
}
#block-expense {
    border-color: rgba(232, 43, 42, 0.25);
    box-shadow: 0 0 0 1px rgba(232, 43, 42, 0.12),
    var(--shadow-sm);
}
#block-deposit {
    border-color: rgba(138, 43, 226, 0.25);
    box-shadow: 0 0 0 1px rgba(138, 43, 226, 0.12),
    var(--shadow-sm);
}
#block-debt {
    border-color: rgba(232, 162, 42, 0.25);
    box-shadow: 0 0 0 1px rgba(232, 162, 42, 0.12),
    var(--shadow-sm);
}
#transaction-list {
    list-style: none;
    margin-top: 10px;
}
.transactions-header {
    margin: 16px 0;
    padding-top: 10px;
}
.transactions-header-title {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--secondary-color);
    opacity: 0.9;
}
#transaction-list li.tx-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    margin-bottom: 10px;
    background: var(--tertiary-color, #1e1e1e);
    border-radius: 14px;
    border-left: 4px solid var(--border-color, #333);
    box-shadow: var(--shadow-sm, 0 2px 5px rgba(0,0,0,0.4));
    cursor: pointer;
    transition: transform 0.08s ease,
    box-shadow 0.08s ease,
    background 0.08s ease;
}
#transaction-list li.tx-item:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,0.5));
}
.tx-card-inner {
    display: flex;
    width: 100%;
    align-items: flex-start;
    gap: 10px;
}
.tx-emoji {
    width: 36px;
    height: 36px;
    border-radius: var(--border-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    background: rgba(0, 0, 0, 0.08);
    flex-shrink: 0;
}
.tx-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    overflow: hidden;
}
.tx-top-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    width: 100%;
}
.tx-amount {
    font-size: 0.95rem;
    font-weight: 600;
}
.tx-amount-plus {
    color: var(--income-color);
    overflow-x: auto;
    scrollbar-width: none;
}
.tx-amount-minus {
    color: var(--expense-color);
}
.tx-date {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
}
[data-theme="light"] .tx-date, [data-theme="light-classic"] .tx-date {
    color: rgba(0, 0, 0, 0.5);
}
.tx-bottom-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    flex-wrap: wrap;
}
.tx-title {
    color: var(--secondary-color);
    word-break: break-word;
}
.tx-debt-tag {
    font-size: 0.8rem;
    font-weight: 500;
    border-radius: 6px;
    padding: 1px 6px;
    background: var(--main-ground);
    opacity: 0.85;
    text-transform: lowercase;
}
.tx-title-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    max-width: 80%;
}
.tx-debt-tag-owe {
    color: #e82a2a;
    border: 1px solid rgba(232, 42, 42, 0.15);
}
.tx-debt-tag-lent {
    color: #2be82a;
    border: 1px solid rgba(43, 232, 42, 0.15);
}
.tx-debt-status {
    font-size: 0.8rem;
    color: #2be82a;
    font-weight: 600;
}
.tx-debt-pay {
    background: var(--primary-color);
    border: none;
    padding: 6px 25px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.25s ease, transform 0.15s ease;
    margin-top: 0;
}
.tx-debt-pay:hover {
    background: transparent(60);
    transform: translateY(-1px);
}
@media  (max-width: 400px) {
    .tx-bottom-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }
    .tx-debt-pay {
        align-self: flex-end;
    }
}
.transaction-form, #edit-transaction-sheet .tx-form {
    margin-top: 6px;
    padding: 4px 0 2px;
}
.transaction-form label, #edit-transaction-sheet .tx-form label {
    display: flex;
    margin-top: 12px;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
}
.transaction-form input, .transaction-form select, #edit-transaction-sheet .tx-form input, #edit-transaction-sheet .tx-form select {
    width: 100%;
    padding: 9px 11px;
    margin-top: 6px;
    border-radius: var(--border-radius-lg);
    border: 1px solid rgba(255,255,255,0.12);
    font-size: 0.95rem;
    background: rgba(0,0,0,0.16);
    color: var(--secondary-color);
}
:root:not([data-theme]) .transaction-form input, :root:not([data-theme]) .transaction-form select, :root:not([data-theme]) #edit-transaction-sheet .tx-form input, :root:not([data-theme]) #edit-transaction-sheet .tx-form select {
    background: rgba(0,0,0,0.04);
    border-color: rgba(0,0,0,0.08);
}
.transaction-form input:focus, .transaction-form select:focus, #edit-transaction-sheet .tx-form input:focus, #edit-transaction-sheet .tx-form select:focus {
    outline: 0;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 1px rgba(0,0,0,0.15);
}
.transaction-form button {
    margin-top: 14px;
    padding: 11px;
    width: 100%;
    border: none;
    border-radius: var(--border-radius-lg);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}
.transaction-form .add-btn, #edit-transaction-sheet .tx-form .add-btn {
    background: var(--primary-color);
}
.transaction-form .close-form, #edit-transaction-sheet .tx-form .close-form, #planner-sheet-close, #cancel-delete-budget, #cancel-delete-transaction {
    background: var(--accent-color);
    color: var(--secondary-color) !important;
    box-shadow: none;
}
#products-list .product-item, #edit-products-list .product-row {
    display: flex;
    gap: 5px;
    margin-top: 5px;
    height: 39px;
    align-items: center;
}
#products-list .product-item input, #edit-products-list .product-row input {
    flex: 1;
}
#edit-products-list .remove-product, #products-list .delete-product, .delete-budget-btn {
    flex: 0 0 auto;
    padding: 0 6px;
    background: transparent;
    border: none;
    color: var(--expense-color);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}
#budget-switch-sheet {
    text-align: left;
    padding-bottom: var(--spacing-lg);
}
#budget-switch-sheet h2 {
    margin: 0 0 4px;
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 6px;
}
#budget-switch-sheet img {
    width: 52%;
    max-width: 220px;
    margin: 0 auto 12px;
    display: block;
}
.budget-desc {
    font-size: 0.75rem;
    color: var(--secondary-color);
    line-height: 1.5;
    margin: 10px 0 18px 0;
    text-align: center;
    opacity: 0.9;
}
.budget-desc strong {
    color: var(--primary-color);
}
.budget-desc em {
    color: var(--income-color);
    font-style: normal;
    font-weight: 600;
}
.budget-list {
    margin: 12px 0 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 20vh;
    overflow-y: auto;
    padding: 8px;
}
.budget-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--border-radius-lg);
    background: var(--tertiary-color);
    box-shadow: var(--shadow-sm);
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform var(--transition-fast),
    box-shadow var(--transition-fast),
    border-color var(--transition-fast),
    background-color var(--transition-fast);
    font-weight: 700;
}
.budget-item:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}
.budget-item-active {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 1px rgba(43, 232, 42, 0.35), var(--shadow-md);
}
.budget-item-main {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}
.budget-emoji {
    flex: 0 0 36px;
    height: 36px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    background: rgba(0, 0, 0, 0.04);
}
[data-theme="dark"] .budget-emoji, [data-theme="onyx"] .budget-emoji, [data-theme="shark"] .budget-emoji, [data-theme="grape"] .budget-emoji, [data-theme="blackberry"] .budget-emoji, [data-theme="hookah"] .budget-emoji, [data-theme="trackit"] .budget-emoji, [data-theme="tiffany"] .budget-emoji {
    background: rgba(255, 255, 255, 0.06);
}
.budget-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.budget-name {
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.budget-meta {
    font-size: 12px;
    color: var(--text-muted, #8a8a8a);
}
.delete-budget-btn {
    flex: 0 0 auto;
    padding: 10px 8px;
    margin-top: 0 !important;
    border-radius: 999px;
    border: 1px solid rgba(255, 0, 0, 0.2);
    background: transparent;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: background-color var(--transition-fast),
    border-color var(--transition-fast),
    transform var(--transition-fast);
    background-color: var(--main-ground);
}
.delete-budget-btn:hover {
    background: rgba(255, 0, 0, 0.1);
    border-color: rgba(255, 0, 0, 0.45);
    transform: translateY(-0.5px);
}
.budget-add {
    margin: 12px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: var(--border-radius-lg);
    background: var(--main-ground);
    border: 1px dashed rgba(0, 0, 0, 0.12);
    font-size: 13px;
}
[data-theme="dark"] .budget-add, [data-theme="onyx"] .budget-add, [data-theme="shark"] .budget-add, [data-theme="grape"] .budget-add, [data-theme="blackberry"] .budget-add, [data-theme="hookah"] .budget-add, [data-theme="trackit"] .budget-add, [data-theme="tiffany"] .budget-add {
    border-color: rgba(255, 255, 255, 0.14);
}
.budget-add span {
    font-weight: 500;
}
#new-budget-name {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 14px;
    outline: none;
}
#add-budget-btn {
    margin-top: 0;
    width: 100%;
    color: var(--secondary-color);
    background: var(--primary-color);
}
#pay-debt, #close-detail, #delete-transaction, #close-budget-sheet, #add-budget-btn, #close-settings, #budget-form button, #cancel-delete-budget, #confirm-delete-budget, #pay-debt-detail {
    color: var(--tertiary-color);
    font-weight: bolder;
    font-size: 16px;
}
.close-settings-btn {
    width: 100%;
    margin-top: 26px;
    padding: 11px 14px;
    background: var(--tertiary-color);
    color: var(--secondary-color);
    font-weight: 600;
    font-size: 16px;
    text-align: center;
    border: 1px solid var(--secondary-color);
    border-radius: var(--border-radius-lg);
    cursor: pointer;
}
#pay-debt, #delete-transaction, #confirm-delete-budget, #confirm-clear-data, #confirm-clear-cache, #cancel-clear-data, #cancel-clear-cache, #cancel-delete-budget, #pay-debt-detail, #confirm-delete-transaction, #cancel-delete-transaction, #deposit-topup-btn, #deposit-withdraw-btn {
    width: 49%;
}
#delete-transaction, #confirm-delete-budget, #confirm-clear-data, #confirm-clear-cache, #cancel-clear-data, #cancel-clear-cache {
    font-weight: 700;
}
#pay-debt {
    display: none;
}
.pay-debt {
    color: var(--secondary-color);
    font-weight: bolder;
}
#delete-transaction, #confirm-delete-budget, #confirm-clear-data, #confirm-clear-cache, #confirm-delete-transaction {
    background-color: var(--expense-color);
}
#close-detail, #close-budget-sheet, #edit-close-btn {
    width: 100%;
    margin-top: 10px;
    background: var(--accent-color);
    color: var(--secondary-color) !important;
}
#close-settings {
    width: 100% !important;
}
#income-amount, #debt-direction, #deposit-status {
    margin-bottom: 40px;
}
#add-product {
    margin-top: 40px;
}
button {
    margin-top: 10px;
    font-size: 16px;
    padding: 10px 20px;
    font-weight: 700;
    border: none;
    border-radius: var(--border-radius-lg);
    background: var(--secondary-color);
    color: var(--tertiary-color);
    cursor: pointer;
}
#settings-btn {
    font-size: 18px;
    margin-top: 5px;
    padding: 0;
    background: none;
}
.settings-nav-list {
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.settings-nav-list .open-subpage-btn {
    width: 100%;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: var(--border-radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: var(--tertiary-color);
    color: var(--secondary-color);
    font-weight: 600;
    font-size: 0.95rem;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    text-align: left;
}
.settings-nav-list .open-subpage-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
[data-theme="light"] .settings-nav-list .open-subpage-btn, [data-theme="light-classic"] .settings-nav-list .open-subpage-btn {
    background: var(--main-ground);
    border-color: rgba(0, 0, 0, 0.06);
}
.theme-option {
    width: 100%;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: var(--border-radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: var(--tertiary-color);
    color: var(--secondary-color);
    font-weight: 600;
    font-size: 0.95rem;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    text-align: left;
    transition: transform var(--transition-fast),
    box-shadow var(--transition-fast),
    border-color var(--transition-fast),
    background 0.25s ease,
    color 0.25s ease;
    transform: translateZ(0);
    backface-visibility: hidden;
}
.theme-option:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
    border-color: rgba(255, 255, 255, 0.15);
}
.theme-option.active {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 1px rgba(0,0,0,0.4), var(--shadow-md);
    background: linear-gradient(
            135deg,
            rgba(43, 232, 42, 0.12),
            rgba(43, 232, 42, 0.02)
    );
}
.fullscreen-sheet {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    max-height: none;
    padding: 0;
    overflow-y: auto;
    background: var(--tertiary-color);
    z-index: var(--z-index-bottom-sheet, 1100);
    box-shadow: var(--shadow-lg);
    transform: translateY(100%);
    opacity: 0;
    will-change: transform, opacity;
    transition: transform 0.3s cubic-bezier(0.32,0.72,0,1), opacity 0.25s ease;
    border-radius: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    contain: layout;
}
.fullscreen-sheet:not(.hidden) {
    transform: translateY(0);
    opacity: 1;
    will-change: auto;
}
#settings-page {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background: var(--tertiary-color);
    box-shadow: 0 -2px 25px rgba(0, 0, 0, 0.9);
    padding: 0 0 120px;
    z-index: 1500;
    overflow-y: auto;
    transform: translateY(100%);
    opacity: 0;
    will-change: transform, opacity;
    transition: transform 0.3s cubic-bezier(0.32,0.72,0,1), opacity 0.25s ease;
    top: 0;
    height: 100vh;
    max-height: none;
    border-radius: 0;
}
#settings-page:not(.hidden) {
    transform: translateY(0);
    opacity: 1;
}
#settings-page {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}
#settings-page .subpage-content {
    padding-bottom: 80px;
}
#settings-page::-webkit-scrollbar,
.bottom-sheet::-webkit-scrollbar {
    width: 4px;
}
#settings-page::-webkit-scrollbar-thumb,
.bottom-sheet::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 10px;
}
.settings-header {
    margin-bottom: 0;
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    padding: 14px var(--spacing-md) 10px;
    min-height: 52px;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.settings-header h2 {
    font-size: 1rem;
    margin-bottom: 10px;
    color: var(--secondary-color);
    font-weight: 700;
    margin: 0;
}
.settings-header p {
    font-size: 0.95rem;
    line-height: 1.4;
    margin: 5px 0;
}
.akulka-projects {
    margin-top: 18px;
}
.company-title {
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 4px;
}
.company-subtitle {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 12px;
}
.products-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.product-card {
    background: var(--tertiary-color);
    border-radius: var(--border-radius-lg);
    padding: 10px;
    box-shadow: var(--shadow-sm);
    text-align: center;
    border: 1px solid rgba(255,255,255,0.05);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.product-card.link {
    text-decoration: none;
    color: inherit;
}
.product-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}
.product-card:active {
    transform: scale(0.97);
}
.product-icon {
    width: auto;
    height: 70px;
    border-radius: 10px;
    margin-bottom: 6px;
}
.product-card h3 {
    font-size: 0.8rem;
    margin-bottom: 2px;
}
.product-card p {
    font-size: 0.68rem;
    color: var(--text-muted);
}
.product-version {
    display: inline-block;
    margin-top: 4px;
    font-size: 0.65rem;
    opacity: 0.6;
}
#import-label {
    position: relative;
    overflow: hidden;
}
#import-label input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}
@media  (max-width: 768px) {
    #settings-page h2 {
        font-size: 1.2rem;
        font-weight: 700;
    }
    #settings-page button {
        font-size: 1rem;
        font-weight: 700;
    }
    #settings-page input {
        font-size: 0.9rem;
        font-weight: 700;
    }
}
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    background: transparent;
    padding-top: 4px;
    padding-bottom: max(8px, env(safe-area-inset-bottom));
    pointer-events: none;
}
#add-btn {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 52px !important;
    height: 52px !important;
    border: none;
    border-radius: 50% !important;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    background: var(--primary-color);
    color: var(--secondary-color);
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.08s ease, box-shadow 0.08s ease, opacity 0.08s ease;
    min-width: unset !important;
    max-width: unset !important;
}
#add-btn svg path {
    fill: currentColor;
}
#add-btn:active {
    transform: translateY(1px);
    opacity: 0.9;
}
.settings-header a {
    color: #007bff;
    text-decoration: none;
}
.settings-header a:hover {
    text-decoration: underline;
}
#import-label:hover {
    transform: translateY(-2px);
}
select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: var(--tertiary-color);
    border-radius: 8px;
    padding: 8px 40px 8px 10px;
    font-size: 16px;
    color: var(--secondary-color);
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%232be82a'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 5px rgba(43,232,42,0.5);
}
select:hover {
    opacity: 0.9;
}
main::-webkit-scrollbar {
    width: 3px;
}
main::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 10px;
}
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1200;
    backdrop-filter: blur(1px);
}
.modal.hidden {
    display: none;
}
.modal-content {
    background: var(--tertiary-color);
    padding: 20px;
    border-radius: var(--border-radius-md);
    width: 90%;
    max-width: 400px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    animation: fadeIn 0.3s ease-in-out;
}
.modal-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
}
.pay-modal-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
}
.pay-modal-buttons button {
    border: none;
    border-radius: var(--border-radius-md);
    font-size: 16px;
    font-weight: 600;
    font-family: "Poppins", sans-serif;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.15s ease;
}
#pay-debt-confirm {
    background-color: var(--primary-color);
    color: #000;
}
#pay-debt-confirm:hover {
    background-color: var(--secondary-color);
    color: var(--accent-color);
    transform: scale(1.02);
}
#cancel-debt-pay {
    background-color: #ccc;
    color: #333;
}
#cancel-debt-pay:hover {
    background-color: #bbb;
    transform: scale(1.02);
}
#debt-pay-amount {
    width: 100%;
    padding: 12px 16px;
    font-size: 16px;
    font-family: "Poppins", sans-serif;
    border: 2px solid #888;
    border-radius: 10px;
    background-color: #f9f9f9;
    color: #000;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.3s ease;
}
#debt-pay-amount:focus {
    border-color: #2be82a;
    background-color: #fff;
}
#confirm-delete-budget:hover {
    background: #c62828;
}
#cancel-delete-budget:hover {
    background: #388e3c;
}
#export-before-delete {
    background: #007bff;
    color: white;
    width: 100%;
    margin-bottom: 10px;
}
#export-before-delete:hover {
    background: #0056b3;
}
#current-budget {
    outline: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
#current-budget:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.delete-product {
    background: none !important;
    width: 5% !important;
    padding: 0 !important;
    margin-top: 0 !important;
}
.open-subpage-btn {
    font-weight: 700;
}
.product-item {
    position: relative;
}
#budget-form, #budget-switch-sheet .budget-add, #debt-form, #deposit-form, #income-form {
    position: relative;
}
.error-message {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 2px;
    background: rgba(255, 0, 0, 0.1);
    color: red;
    padding: 3px 5px;
    border-radius: 8px;
    font-size: 0.85rem;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-5px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 999;
}
.error-message.visible {
    opacity: 1;
    transform: translateY(0);
}
.chip-btn {
    flex: 1;
    border: none;
    border-radius: var(--border-radius-lg);
    font-size: 14px;
    cursor: pointer;
    font-weight: 600;
    color: var(--secondary-color);
    transition: background 0.18s ease,
    color      0.18s ease,
    box-shadow 0.18s ease,
    transform  0.08s ease;
    margin-top: 0;
    flex-shrink: 0;
    padding: 8px 14px;
    background: transparent;
}
#loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: var(--dark-color);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 20px;
    font-size: 20px;
    text-align: center;
    z-index: 9999;
    padding: 0 20px;
    box-sizing: border-box;
}
.loader {
    width: 50px;
    height: 50px;
    border: 5px solid var(--primary-color);
    border-top: 5px solid transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
#loading-text {
    max-width: 90%;
    margin: 0 auto;
    text-align: center;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    line-height: 1.4;
    font-size: 1rem;
    min-height: 3.5em;
    font-weight: 700;
    transition: opacity 0.3s ease;
}
.transaction-type-chips {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    margin-bottom: 14px;
    border-radius: var(--border-radius-lg);
    background: var(--accent-color);
}
:root:not([data-theme]) .transaction-type-chips {
    background: rgba(0,0,0,0.06);
}
.chip-btn:hover {
    transform: translateY(-1px);
}
.chip-btn.active {
    color: var(--secondary-color);
    background: var(--primary-color);
}
.banner-carousel {
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
    flex-shrink: 0;
}
.slides-container {
    display: flex;
    transition: transform 0.5s ease;
    will-change: transform;
}
.banner-slide {
    min-width: 100%;
    cursor: pointer;
    user-select: none;
    margin-right: 3px;
}
.banner-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: var(--border-radius-lg);
}
#category-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--tertiary-color);
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -12px 30px rgba(0,0,0,0.75);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    padding: 20px;
    min-height: 70vh;
    max-height: 85vh;
    z-index: 1300 !important;
    transform: translateY(100%);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-flow: column nowrap;
}
#category-sheet:not(.hidden) {
    transform: translateY(0);
    opacity: 1;
}
.category-sheet-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    margin-bottom: 15px;
    top: 0;
    background: var(--tertiary-color);
    z-index: 1;
}
.category-sheet-header h2 {
    margin: 0;
    font-size: 1.2rem;
    color: var(--secondary-color);
}
.close-category-sheet {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--secondary-color);
    padding: 5px;
    margin-top: 0;
}
.category-sheet-header, #category-search {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--tertiary-color);
}
#category-search {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    margin: 0 0 var(--spacing-md);
    border: 1px solid var(--secondary-color);
    border-radius: var(--border-radius-lg);
    background: var(--tertiary-color);
    color: var(--secondary-color);
    font-size: 1rem;
    box-shadow: var(--shadow-sm);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
#category-search:focus {
    border-color: var(--secondary-color);
    box-shadow: 0 0 0 2px rgba(43, 232, 42, 0.2);
}
#category-search::placeholder {
    color: var(--text-muted);
}
.category-list {
    display: flex;
    flex-direction: column;
    max-height: calc(85vh - 50px - 40px);
    overflow-y: auto;
    flex-grow: 1;
    flex-shrink: 1;
    padding: 10px 0;
}
.category-item {
    padding: 12px 15px;
    border-radius: var(--border-radius-lg);
    background: var(--accent-color);
    cursor: pointer;
    transition: background 0.2s ease;
    font-size: 1rem;
    color: var(--secondary-color);
    border: 1px solid rgba(0, 0, 0, 0.1);
    list-style-type: none;
    margin-bottom: 7px;
}
.category-item:hover {
    background: var(--secondary-color);
    color: var(--tertiary-color);
}
.category-item:active {
    transform: scale(0.98);
}
.category-select-container {
    position: relative;
    width: 100%;
    margin-bottom: 10px;
}
.category-select-button {
    width: 100%;
    padding: 12px;
    border-radius: 8px;
    background: var(--accent-color) !important;
    text-align: left;
    font-size: 16px;
    color: var(--secondary-color) !important;
    cursor: pointer;
    transition: border-color 0.2s;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    pointer-events: auto;
    user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}
.category-select-button:hover {
    color: var(--tertiary-color) !important;
    background: var(--secondary-color) !important;
}
.category-select-button:focus {
    outline: 2px solid var(--primary-color);
    border-color: #2196F3;
    box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.1);
}
.category-group-label {
    font-weight: bold;
    padding: 8px 12px;
    background-color: var(--accent-color);
    border-radius: var(--border-radius-lg);
    cursor: pointer;
    margin-top: 10px;
    transition: background 0.2s ease;
}
.category-group-label:hover {
    background-color: var(--secondary-color);
    color: var(--accent-color);
}
.popular-optgroup .category-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.category-usage-badge {
    font-size: 0.85rem;
    opacity: 0.8;
    pointer-events: none;
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(0,0,0,0.18);
}
.group-options {
    padding-left: 16px;
    margin-top: 4px;
}
.group-options.hidden {
    display: none;
}
#expense-category {
    display: none;
}
.currency-chip {
    background-color: var(--tertiary-color);
    color: var(--secondary-color);
    border-radius: var(--border-radius-md);
    padding: 6px 10px;
    min-width: 140px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 0.75em;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}
.currency-chip:hover {
    transform: scale(1.03);
}
#expensesByCategoryCenterText {
    position: absolute;
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    pointer-events: none;
    font-size: 13px;
    line-height: 1.35;
    color: var(--secondary-color);
}
#expensesByCategoryCenterText .center-total {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-top: -80px;
}
#expensesByCategoryCenterText .center-label {
    font-size: 1rem;
    color: var(--an-secondary-color);
}
#expensesByCategoryChart {
    position: relative;
    margin-top: 16px;
}
#expensesByCategoryChart, #incomeVsExpensesChart, #monthlyExpensesChart, #topExpensesChart, #balanceDynamicsChart, #categoriesByDescendingChart, #categoryHistoryChart, #spendingByWeekdayChart, #annualSummaryChart {
    border-radius: 10px;
}
#analytics-month-btn {
    margin: 5px;
}
.inline-error-message {
    color: var(--expense-color);
    font-size: 0.85em;
    margin-top: 4px;
    font-family: "Poppins", sans-serif;
    animation: fadeIn 0.3s ease-out;
}
.category-select-button.error {
    border: 2px solid var(--an-expense-color);
    border-radius: var(--border-radius-md);
    background-color: rgba(255, 4, 0, 0.1);
}
@keyframes sparkle {
    0%   { text-shadow: 0 0 5px rgba(255, 215, 0, 0.5); }
    50%  { text-shadow: 0 0 12px rgba(255, 255, 100, 0.9); }
    100% { text-shadow: 0 0 5px rgba(255, 215, 0, 0.5); }
}
.user-profile-card {
    background: linear-gradient(135deg, #1a1a1a, #2c2c2c);
    padding: 20px;
    border-radius: var(--border-radius-lg);
    display: flex;
    gap: 20px;
    align-items: center;
    box-shadow: 0 8px 20px rgba(0,0,0,0.4);
    margin: 20px 0;
    position: relative;
    overflow: hidden;
}
.user-profile-card::before {
    content: "";
    position: absolute;
    top: -30%;
    left: -30%;
    width: 160%;
    height: 160%;
    background: radial-gradient(circle, var(--primary-color, rgba(102,204,255,0.1)), transparent 70%);
    animation: floatBlob 6s infinite linear;
    z-index: 0;
}
@keyframes floatBlob {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.user-emoji {
    z-index: 1;
    font-size: 2.5rem;
}
.emoji-avatar {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 50%;
    display: block;
    border: 3px solid transparent;
    background: linear-gradient(135deg, var(--primary-color), var(--income-color)) border-box;
    box-shadow: 0 0 15px var(--primary-color, rgba(102, 204, 255, 0.5));
    background-origin: border-box;
    background-clip: content-box, border-box;
}
.progress-bar {
    background: linear-gradient(135deg, var(--primary-color), var(--income-color)) border-box;
    height: 10px;
    transition: width 0.4s ease;
    border-radius: var(--border-radius-lg);
    width: 100%;
    overflow: hidden;
}
.progress-fill {
    height: 100%;
    background: var(--linear-progress-bar, linear-gradient(to right, #0ff, #0f0));
    width: 0%;
    transition: width 0.4s ease;
    border-radius: var(--border-radius-lg);
}
.tx-counter, .tx-counter span {
    font-size: 0.9em;
    color: var(--an-tertiary-color, #ccc);
    margin-top: 4px;
}
#detail-type, #detail-name, #detail-products {
    font-weight: 600;
    margin-bottom: 10px;
}
#detail-type {
    margin-top: 10px;
}
.about-container {
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.about-container h2 {
    font-size: 1.8rem;
    color: var(--primary-color, #00ffc3);
    margin-bottom: 10px;
}
.avatar-btn {
    width: 32px;
    height: 32px;
    border: none;
    padding: 0;
    background: transparent;
    cursor: pointer;
}
.avatar-btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
#analytics-page canvas {
    flex: 0 0 60vh;
    height: auto !important;
    max-height: 60vh;
}
#categoriesByDescendingChart {
    flex: 0 0 auto;
    height: auto !important;
    max-height: 70vh;
}
#analytics-page section h4 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 600;
}
.analytics-header-row {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    z-index: var(--z-index-header);
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    flex-shrink: 0;
    min-height: 52px;
}
#analytics-page section canvas {
    width: 100%;
    max-width: 100%;
    display: block;
}
.analytics-scroll {
    overflow-y: auto;
    scroll-behavior: smooth;
    padding: 0 4px 90px;
}
.analytics-scroll > section {
    position: relative;
}
.analytics-scroll::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: var(--border-radius-lg);
    box-shadow: 0 0 10px #2be82a;
}
.analytics-scroll::-webkit-scrollbar {
    width: 3px;
}
.analytics-scroll::-webkit-scrollbar-track {
    background: transparent;
}
#analytics-page .close-settings-btn, #faq-page .close-settings-btn, #achievements-page .close-settings-btn, #theme-page .close-settings-btn, #export-import-page .close-settings-btn, #about-page .close-settings-btn, #settings-page .close-settings-btn, #region-page .close-settings-btn {
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}
#incomeVsExpensesChart {
    max-height: 8vh !important;
}
.hr-spacing {
    margin: 20px 0;
    border-color: var(--dark-color);
    border-radius: var(--spacing-lg);
}
.settings-nav-list button {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    font-size: 1rem;
    border: none;
    border-radius: var(--border-radius-lg);
    cursor: pointer;
    transition: background .2s;
    margin-top: 3px;
}
.settings-nav-list button:hover {
    background: #3a3a3a;
}
.detail-products-list {
    margin-top: 6px;
}
.detail-product-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 4px;
    line-height: 1.25;
}
.product-title {
    flex: 1 1 60%;
    word-break: break-word;
}
.product-meta {
    flex: 0 0 auto;
    white-space: nowrap;
    text-align: right;
}
#faq-container {
    flex: 1 1 auto;
    overflow-y: auto;
    scroll-behavior: smooth;
    scroll-snap-type: y mandatory;
    padding-right: 8px;
    margin: 10px 0 0;
}
.faq-item {
    margin: 10px 0;
    border: 1px solid transparent;
    border-radius: var(--border-radius-lg);
    background: var(--primary-color);
    overflow: hidden;
    transition: border-color .25s ease,
    background   .25s ease;
}
.faq-item[open] {
    border-color: var(--primary-color, #2be82a);
    background: linear-gradient(135deg, #202024 0%, #2c2c32 100%);
}
.faq-item summary {
    list-style: none;
    padding: 12px 16px;
    font-weight: 600;
    position: relative;
    cursor: pointer;
    user-select: none;
    font-size: 1rem;
    color: #fff;
}
.faq-item summary::marker {
    content: "";
}
.faq-item summary::-webkit-details-marker {
    display: none;
}
.faq-item summary::after {
    content: "▸";
    font-size: 1rem;
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    transition: transform .25s ease;
}
.faq-item[open] summary::after {
    transform: translateY(-50%) rotate(90deg);
}
.faq-item p {
    padding: 0 16px 14px;
    line-height: 1.45;
    color: #c5c6ce;
    animation: fadeIn .25s ease;
    font-size: 0.95rem;
}
.faq-item p {
    white-space: pre-line;
    line-height: 1.6;
    margin-top: 6px;
}
.faq-item p br {
    display: block;
    margin-bottom: 6px;
}
#faq-container::-webkit-scrollbar, .fullscreen-sheet::-webkit-scrollbar, .budget-list::-webkit-scrollbar, .category-list::-webkit-scrollbar, #transaction-sheet::-webkit-scrollbar, #edit-transaction-sheet::-webkit-scrollbar {
    width: 3px;
}
#faq-container::-webkit-scrollbar-thumb, .fullscreen-sheet::-webkit-scrollbar-thumb, .budget-list::-webkit-scrollbar-thumb, .category-list::-webkit-scrollbar-thumb, #transaction-sheet::-webkit-scrollbar-thumb, #edit-transaction-sheet::-webkit-scrollbar-thumb {
    background: var(--primary-color, #2be82a);
    border-radius: var(--border-radius-lg);
}
#faq-container::-webkit-scrollbar-track, .fullscreen-sheet::-webkit-scrollbar-track, .budget-list::-webkit-scrollbar-track, .category-list::-webkit-scrollbar-track, #transaction-sheet::-webkit-scrollbar-track, #edit-transaction-sheet::-webkit-scrollbar-track, .tx-detail-card::-webkit-scrollbar, .tx-detail-card::-webkit-scrollbar, .tx-detail-card::-webkit-scrollbar {
    background: transparent;
}
#tweak-container {
    position: fixed;
    top: 70px;
    left: 0;
    right: 0;
    min-width: 100%;
    max-width: 420px;
    margin: 0 auto;
    padding: 0 12px;
    z-index: 3000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    pointer-events: none;
}
.tweak {
    pointer-events: auto;
    padding: 14px 18px;
    border-radius: var(--border-radius-lg);
    font-size: 0.95rem;
    font-weight: 600;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255,255,255,0.08);
    color: whitesmoke;
    box-shadow: 0 4px 16px rgba(0,0,0,0.5);
    animation: tweak-slide-in 0.35s ease forwards;
    position: relative;
    overflow: visible;
}
.tweak.success {
    border-left: 2px solid var(--primary-color);
}
.tweak.success::before {
    content: "";
    position: absolute;
    left: -2px;
    top: 0;
    width: 6px;
    height: 100%;
    background: var(--primary-color);
    filter: blur(6px);
    opacity: 0.9;
    pointer-events: none;
    border-radius: 10px;
}
.tweak.error {
    border-left: 2px solid var(--expense-color);
}
.tweak.error::before {
    content: "";
    position: absolute;
    left: -2px;
    top: 0;
    width: 6px;
    height: 100%;
    background: var(--expense-color);
    filter: blur(6px);
    opacity: 0.9;
    pointer-events: none;
    border-radius: 10px;
}
.tweak.warning {
    border-left: 2px solid #ffb300;
}
.tweak.warning::before {
    content: "";
    position: absolute;
    left: -2px;
    top: 0;
    width: 6px;
    height: 100%;
    background: #ffb300;
    filter: blur(6px);
    opacity: 0.9;
    pointer-events: none;
    border-radius: 10px;
}
.tweak.info {
    border-left: 2px solid var(--income-color);
}
.tweak.info::before {
    content: "";
    position: absolute;
    left: -2px;
    top: 0;
    width: 6px;
    height: 100%;
    background: var(--income-color);
    filter: blur(6px);
    opacity: 0.9;
    pointer-events: none;
    border-radius: 10px;
}
.tweak-close {
    position: absolute;
    display: block;
    top: 0;
    right: 8px;
    width: 20px;
    height: 20px;
    border: none;
    background: transparent;
    cursor: pointer;
    opacity: 0.7;
}
.tweak-close::before {
    font-size: 0.9rem;
    color: var(--secondary-color);
}
.tweak-close:hover {
    opacity: 1;
}
@keyframes tweak-slide-in {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
@keyframes tweak-slide-out {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
}
.achievement {
    background: #1e1e1e;
    color: #888;
    border: 2px solid #444;
    border-radius: var(--border-radius-lg);
    padding: 16px 5px;
    text-align: center;
    font-size: 1em;
    font-family: "Monsterat", sans-serif;
    position: relative;
    transition: transform 0.2s, box-shadow 0.2s;
    user-select: none;
    display: inline-block;
    cursor: pointer;
    max-width: 100%;
}
.achievement.unlocked {
    background: linear-gradient(145deg, var(--primary-color) 0%, var(--tertiary-color) 100%);
    color: var(--text-color);
    font-weight: bold;
    border: none;
    box-shadow: 0 0 5px var(--primary-color);
    transform: scale(1.02);
}
.achievement.locked {
    filter: grayscale(100%) blur(0.3px);
    opacity: 0.6;
}
.achievement:hover {
    transform: scale(1.03);
    box-shadow: 0 0 10px #ffffff22;
}
.achievement span.emoji {
    display: block;
    font-size: 2em;
    margin-bottom: 6px;
}
.achievement span {
    display: block;
    font-size: 0.95em;
    line-height: 1.3;
}
.achievement::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: #fff;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 0.75rem;
    white-space: normal;
    word-wrap: break-word;
    text-align: center;
    max-width: 240px;
    box-sizing: border-box;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 9999;
}
.achievement:hover::after, .achievement:active::after {
    opacity: 1;
}
#sw-update-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(12px);
    color: #fff;
    text-align: center;
    padding: 12px;
    font-size: 16px;
    z-index: 1000;
    box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.2);
    transform: translateY(100%);
    transition: transform 0.3s ease, opacity 0.3s ease;
}
#sw-update-banner.show {
    transform: translateY(0%);
    opacity: 1;
}
#sw-update-banner.hidden {
    opacity: 0;
}
.deposit-meta-block {
    margin-top: 6px;
    font-size: 0.9rem;
}
.deposit-meta-block div {
    margin-bottom: 2px;
}
.deposit-term-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 6px 0 10px;
}
.deposit-term-chips .chip-btn.active {
    outline: 2px solid var(--primary-color);
}
.term-chip {
    background: none !important;
}
#transaction-detail-sheet {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--spacing-md);
}
#detail-deposit-table {
    max-height: 260px;
    overflow-y: auto;
    margin-top: 6px;
    padding-right: 4px;
    border-radius: var(--border-radius-lg);
}
#detail-deposit-table::-webkit-scrollbar {
    width: 4px;
}
#detail-deposit-table::-webkit-scrollbar-track {
    background: transparent;
}
#detail-deposit-table::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.15);
}
#detail-buttons {
    margin-top: 10px;
}
#deposit-op-modal .modal-content {
    max-width: 360px;
}
#deposit-op-modal p {
    margin: 6px 0 4px;
    font-size: 0.9rem;
}
#deposit-op-modal input[type="date"], #deposit-op-modal input[type="tel"] {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid #ccc;
    background: var(--tertiary-color);
    color: var(--secondary-color);
    font-size: 0.95rem;
    margin-bottom: 8px;
}
#deposit-op-modal .modal-buttons {
    margin-top: 8px;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}
.month-picker-btn {
    border: none;
    background: var(--tertiary-color);
    color: var(--secondary-color);
    font-size: 14px;
    padding: 4px 8px;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
}
.month-picker-btn:active {
    transform: scale(0.97);
}
.bottom-sheet.month-picker-sheet {
    position: fixed;
    left: 50%;
    bottom: auto;
    width: 100%;
    max-width: 480px;
    transform: translate(-50%, -110%);
    opacity: 0;
    padding: 16px 16px 18px;
    border-radius: 0 0 24px 24px;
    background: var(--tertiary-color);
    backdrop-filter: blur(18px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.7);
    transition: transform 0.25s ease-out,
    opacity 0.25s ease-out;
}
.bottom-sheet.month-picker-sheet.show {
    transform: translate(-50%, 0);
    opacity: 1;
}
.month-sheet-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 10px;
}
.year-display {
    font-weight: 700;
    font-size: 18px;
    color: var(--secondary-color);
}
.year-nav-btn {
    border: none;
    background: var(--chip-bg, rgba(255, 255, 255, 0.06));
    border-radius: var(--border-radius-lg);
    height: 32px;
    font-size: 18px;
    color: var(--secondary-color);
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease, opacity 0.15s ease;
    display: flex;
    align-items: center;
    margin-top: 0;
}
.year-nav-btn:disabled {
    opacity: 0.35;
    cursor: default;
}
.year-nav-btn:not(:disabled):active {
    transform: scale(0.9);
}
.month-sheet-subheader {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}
.all-months-btn {
    border: none;
    width: 100%;
    border-radius: 999px;
    font-size: 14px;
    cursor: pointer;
    background: var(--chip-bg, rgba(255, 255, 255, 0.06));
    color: var(--secondary-color);
    transition: background 0.18s ease, color 0.18s ease, transform 0.12s ease;
}
.all-months-btn:hover {
    background: rgba(255, 255, 255, 0.12);
}
.all-months-btn:active {
    transform: scale(0.96);
}
.all-months-btn.active {
    background: var(--primary-color);
    color: #000;
}
.months-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.months-grid.months-grid-anim {
    animation: monthsGridIn 0.18s ease-out;
}
@keyframes monthsGridIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.month-item {
    padding: 9px 6px;
    border-radius: 14px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    background: var(--card-bg, rgba(255, 255, 255, 0.04));
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--secondary-color);
    transition: background 0.18s ease,
    border-color 0.18s ease,
    transform 0.12s ease;
}
.month-item:hover {
    background: rgba(255, 255, 255, 0.10);
}
.month-item:active {
    transform: scale(0.96);
}
.month-item.active {
    background: var(--primary-color);
    color: #000;
    border-color: var(--primary-color);
}
.tx-detail-header {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 8px;
}
.tx-detail-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.tx-detail-name {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
    font-weight: 600;
}
.tx-detail-emoji {
    width: 36px;
    height: 36px;
    border-radius: var(--border-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    background: rgba(0, 0, 0, 0.08);
    flex-shrink: 0;
}
.tx-detail-title {
    flex: 1;
    word-break: break-word;
}
.tx-detail-type {
    font-size: 0.8rem;
    opacity: 0.75;
    letter-spacing: 0.05em;
}
.tx-detail-title-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}
.tx-detail-meta {
    text-align: right;
}
.tx-detail-amount {
    margin-top: 2px;
    font-size: 1.3rem;
    font-weight: 700;
}
.tx-detail-date {
    font-size: 0.8rem;
    opacity: 0.7;
    white-space: nowrap;
}
.tx-detail-amount.plus {
    color: var(--income-color);
}
.tx-detail-amount.minus {
    color: var(--expense-color);
}
.tx-detail-status {
    margin: 4px 0 2px;
    font-size: 0.85rem;
    opacity: 0.85;
}
.tx-detail-card {
    margin-top: 6px;
    border-radius: var(--border-radius-lg);
    max-height: 70%;
    overflow: auto;
    padding: 2px 4px;
}
.tx-detail-note {
    margin-top: 6px;
    font-size: 0.85rem;
    opacity: 0.8;
}
.detail-deposit-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}
.detail-deposit-actions button {
    flex: 1;
    border-radius: var(--border-radius-lg);
    padding: 8px 10px;
    border: none;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}
.tx-detail-buttons {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.tx-detail-debt-paid {
    font-size: 0.9rem;
    font-weight: 600;
    color: #2be82a;
}
.tx-detail-buttons-row {
    display: flex;
    gap: 8px;
}
#pay-debt-detail, #delete-transaction {
    flex: 1;
    border-radius: var(--border-radius-lg);
    padding: 10px;
    border: none;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}
#pay-debt-detail {
    background: var(--primary-color);
    color: var(--secondary-color);
}
#delete-transaction {
    background: var(--expense-color);
    color: var(--tertiary-color);
}
.tx-detail-close-btn {
    border-radius: var(--border-radius-lg);
    padding: 9px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: transparent;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
}
:root:not([data-theme="dark"]) .tx-detail-close-btn {
    border-color: rgba(0, 0, 0, 0.15);
}
#deposit-topup-btn, #deposit-withdraw-btn {
    align-items: center;
    display: flex;
    justify-content: center;
    gap: 5px;
}
#deposit-topup-btn svg path, #deposit-withdraw-btn svg path {
    fill: currentColor;
    stroke: currentColor;
}
.del-span {
    color: var(--expense-color);
}
.product-row {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}
.remove-product {
    width: 32px;
    border: none;
    background: none;
    color: var(--secondary-color);
    font-size: 20px;
}
#edit-add-product {
    margin-top: 10px;
    width: 100%;
    background: var(--secondary-color);
    color: var(--tertiary-color);
    border-radius: var(--border-radius-lg);
    border: none;
    font-weight: 700;
}
.add-btn, .close-form {
    width: 100%;
}
.snow-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    pointer-events: none;
    overflow: hidden;
    z-index: 9999;
}
.tx-income-name {
    font-size: 9px;
    color: var(--text-muted, #64748b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    flex-basis: 100%;
    text-align: right;
}
.tx-detail-income-name {
    font-size: 12px;
    color: var(--text-muted, #64748b);
    padding: 2px 0 6px;
}
:root {
    --z-nav: 1100;
    --z-ctx-menu: 1200;
    --z-fab: 1100;
}
footer.liquid-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: var(--z-nav);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    padding-top: 6px;
    pointer-events: none;
}
.fab-btn {
    pointer-events: auto;
    align-self: flex-end;
    margin-right: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    background: var(--primary-color);
    color: var(--secondary-color);
    box-shadow: 0 4px 20px rgba(0,0,0,0.28),
    0 1px 4px rgba(0,0,0,0.12),
    inset 0 1px 0 rgba(255,255,255,0.15);
    transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1),
    opacity 0.2s ease,
    box-shadow 0.2s ease;
    animation: lnavSlideUp 0.4s 0.06s cubic-bezier(0.34,1.56,0.64,1) both;
}
.fab-btn:active {
    transform: scale(0.88);
    opacity: 0.85;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.fab-btn svg path, .fab-btn svg line {
    stroke: currentColor;
}
.fab-btn.fab-hidden {
    transform: scale(0) rotate(45deg);
    opacity: 0;
    pointer-events: none;
}
.subpage-header {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    justify-content: space-between;
    padding: 8px 14px;
    min-height: 52px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    z-index: 1;
}
.liquid-nav {
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: min(380px, calc(100% - 28px));
    background: rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 18px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.22),
    0 2px 8px rgba(0,0,0,0.12),
    inset 0 1px 0 rgba(255,255,255,0.12),
    inset 0 -1px 0 rgba(0,0,0,0.08);
    animation: lnavSlideUp 0.45s cubic-bezier(0.34,1.56,0.64,1) both;
}
[data-theme="light"] .liquid-nav, [data-theme="light-classic"] .liquid-nav, [data-theme="yogurt"] .liquid-nav, [data-theme="dolphin"] .liquid-nav, [data-theme="sage"] .liquid-nav {
    background: rgba(240, 240, 248, 0.68);
    border-color: rgba(255, 255, 255, 0.45);
    box-shadow: 0 8px 32px rgba(0,0,0,0.10),
    0 2px 8px rgba(0,0,0,0.06),
    inset 0 1px 0 rgba(255,255,255,0.6);
}
.lnav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    border-radius: 32px;
    color: rgba(255, 255, 255, 0.45);
    position: relative;
    transition: color 0.22s ease,
    background 0.22s ease;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    margin-top: 0;
}
#lnav-home {
    touch-action: none;
    -webkit-touch-callout: none;
}
[data-theme="light"] .lnav-item, [data-theme="light-classic"] .lnav-item, [data-theme="yogurt"] .lnav-item, [data-theme="dolphin"] .lnav-item, [data-theme="sage"] .lnav-item {
    color: rgba(0, 0, 0, 0.38);
}
.lnav-item:active {
    transform: scale(0.87);
    transition: transform 0.1s ease;
}
.lnav-item.active {
    color: var(--primary-color);
    background: rgba(255,255,255,0.06);
}
[data-theme="light"] .lnav-item.active, [data-theme="light-classic"] .lnav-item.active, [data-theme="yogurt"] .lnav-item.active, [data-theme="mint"] .lnav-item.active, [data-theme="dolphin"] .lnav-item.active, [data-theme="sage"] .lnav-item.active {
    background: rgba(0,0,0,0.05);
}
.lnav-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    transition: transform 0.28s cubic-bezier(0.34,1.56,0.64,1);
}
.lnav-item.active .lnav-icon {
    transform: translateY(-1px);
    animation: lnavIconBump 0.32s cubic-bezier(0.34,1.56,0.64,1) forwards;
}
.lnav-label {
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
    opacity: 0.75;
    transition: opacity 0.2s ease;
    white-space: nowrap;
    line-height: 1;
}
.lnav-item.active .lnav-label {
    opacity: 1;
}
.lnav-avatar-wrap {
    position: relative;
}
.lnav-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid transparent;
    background: rgba(255,255,255,0.1);
    transition: border-color 0.2s ease;
}
.lnav-item.active .lnav-avatar {
    border-color: var(--primary-color);
}
.lnav-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
@keyframes lnavSlideUp {
    from { transform: translateY(80px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}
@keyframes lnavIconBump {
    0%   { transform: translateY(0)    scale(1);    }
    40%  { transform: translateY(-3px) scale(1.15); }
    70%  { transform: translateY(0px)  scale(0.96); }
    100% { transform: translateY(-1px) scale(1);    }
}
.ctx-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: calc(var(--z-ctx-menu, 1800) - 1);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}
.ctx-backdrop.ctx-backdrop-visible {
    opacity: 1;
    pointer-events: auto;
}
.budget-ctx-menu {
    position: fixed;
    bottom: calc(75px + env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%) translateY(12px) scale(0.92);
    width: min(320px, calc(100% - 32px));
    z-index: var(--z-ctx-menu);
    pointer-events: none;
    opacity: 0;
    background: rgba(22, 22, 30, 0.88);
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 16px 48px rgba(0,0,0,0.45),
    0 4px 12px rgba(0,0,0,0.22),
    inset 0 1px 0 rgba(255,255,255,0.1);
    transition: opacity   0.28s cubic-bezier(0.4,0,0.2,1),
    transform 0.28s cubic-bezier(0.34,1.56,0.64,1);
}
[data-theme="light"] .budget-ctx-menu, [data-theme="light-classic"] .budget-ctx-menu, [data-theme="yogurt"] .budget-ctx-menu, [data-theme="dolphin"] .budget-ctx-menu, [data-theme="sage"] .budget-ctx-menu {
    background: rgba(248,248,252,0.92);
    border-color: rgba(0,0,0,0.08);
}
.budget-ctx-menu.ctx-open {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
    pointer-events: auto;
}
.budget-ctx-header {
    padding: 12px 16px 8px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}
[data-theme="light"] .budget-ctx-header, [data-theme="light-classic"] .budget-ctx-header [data-theme="yogurt"] .budget-ctx-header, [data-theme="dolphin"] .budget-ctx-header, [data-theme="sage"] .budget-ctx-header {
    border-color: rgba(0,0,0,0.07);
}
.budget-ctx-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    display: flex;
    align-items: center;
    gap: 6px;
    opacity: 0.45;
    color: var(--text-muted, #fff);
}
.budget-ctx-list {
    padding: 6px 0;
    max-height: 260px;
    overflow-y: auto;
}
.budget-ctx-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 16px;
    border: none;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    text-align: left;
    color: var(--text-muted, #fff);
    transition: background 0.15s ease;
    border-radius: 0;
}
.budget-ctx-item:active {
    background: rgba(255,255,255,0.07);
}
[data-theme="light"] .budget-ctx-item:active, [data-theme="light-classic"].budget-ctx-item:active, [data-theme="yogurt"] .budget-ctx-item:active, [data-theme="mint"] .budget-ctx-item:active {
    background: rgba(0,0,0,0.05);
}
.budget-ctx-emoji {
    font-size: 20px;
    line-height: 1;
    flex-shrink: 0;
    width: 28px;
    text-align: center;
}
.budget-ctx-name {
    flex: 1;
    font-size: 15px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.budget-ctx-check {
    flex-shrink: 0;
    color: var(--primary-color);
}
.budget-ctx-active .budget-ctx-name {
    color: var(--primary-color);
    font-weight: 600;
}
#settings-page, #analytics-page {
    z-index: 1100 !important;
}
#transaction-sheet, #edit-transaction-sheet, #budget-switch-sheet, #tx-detail-sheet, #transaction-detail-sheet, #month-picker-sheet, #debt-pay-modal, .bottom-sheet:not(#settings-page):not(#analytics-page):not(#category-sheet) {
    z-index: 1200 !important;
}
.subpage-back-btn {
    border: none;
    background: rgba(255, 255, 255, 0.08);
    color: var(--secondary-color, #e2e8f0);
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    margin-right: auto;
    cursor: pointer;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
    transition: background 0.15s ease, transform 0.1s ease;
    -webkit-tap-highlight-color: transparent;
    margin-top: 0 !important;
}
.pp-content {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.pp-hero {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 20px 0 8px;
}
.pp-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}
.pp-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: var(--accent-color, rgba(255,255,255,0.06));
    border: 3px solid var(--primary-color, #6366f1);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary-color, #6366f1) 20%, transparent);
}
.pp-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.pp-level-badge {
    position: absolute;
    bottom: -4px;
    right: -4px;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    border-radius: 12px;
    background: var(--primary-color, #6366f1);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--bg-color, #0f172a);
    line-height: 1;
}
.pp-hero-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.pp-emoji-name {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--secondary-color, #e2e8f0);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pp-user-id {
    font-size: 0.9em;
    color: var(--secondary-color, #aaa);
    margin-top: 6px;
    border-radius: 8px;
    display: inline-block;
    font-family: monospace;
    letter-spacing: 0.5px;
}
.pp-level-block {
    background: var(--accent-color, rgba(255,255,255,0.04));
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 16px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pp-level-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.pp-level-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--secondary-color, #e2e8f0);
}
.pp-level-pts {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--primary-color, #6366f1);
    font-variant-numeric: tabular-nums;
}
.pp-level-track {
    height: 8px;
    background: rgba(255,255,255,0.08);
    border-radius: 99px;
    overflow: hidden;
}
.pp-level-fill {
    height: 100%;
    width: 0%;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--primary-color, #6366f1), color-mix(in srgb, var(--primary-color, #6366f1) 70%, #a78bfa));
    transition: width 1.1s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.pp-level-next {
    font-size: 0.72rem;
    color: var(--secondary-color, #64748b);
    opacity: 0.5;
    text-align: right;
}
.pp-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
.pp-stat-card {
    background: var(--accent-color, rgba(255,255,255,0.04));
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 16px;
    padding: 14px 14px 12px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    position: relative;
    overflow: hidden;
    transition: transform 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}
.pp-stat-card:active {
    transform: scale(0.97);
}
.pp-stat--purple {
    border-left: 3px solid #8b5cf6;
}
.pp-stat--blue {
    border-left: 3px solid #3b82f6;
}
.pp-stat--green {
    border-left: 3px solid #10b981;
}
.pp-stat--orange {
    border-left: 3px solid #f59e0b;
}
.pp-stat-icon {
    font-size: 1.3rem;
    line-height: 1;
}
.pp-stat-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--secondary-color, #e2e8f0);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.pp-stat-label {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--secondary-color, #94a3b8);
    opacity: 0.55;
}
.pp-detail-block, .pp-activity-block {
    background: var(--accent-color, rgba(255,255,255,0.04));
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 16px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.pp-detail-title {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--secondary-color, #94a3b8);
    opacity: 0.6;
    margin-bottom: 6px;
}
.pp-detail-row {
    display: grid;
    grid-template-columns: 20px 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 7px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.pp-detail-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.pp-detail-icon {
    font-size: 14px;
    text-align: center;
}
.pp-detail-key {
    font-size: 0.82rem;
    color: var(--secondary-color, #94a3b8);
    opacity: 0.75;
}
.pp-detail-val {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--secondary-color, #e2e8f0);
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.pp-activity-block {
    gap: 10px;
}
.pp-activity-bars {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 64px;
    padding: 4px 0 0;
}
.pp-activity-bar-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    height: 100%;
    justify-content: flex-end;
}
.pp-activity-bar {
    width: 100%;
    min-height: 4px;
    border-radius: 4px 4px 2px 2px;
    background: var(--primary-color, #6366f1);
    opacity: 0.7;
    transition: height 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.pp-activity-bar.pp-bar--current {
    opacity: 1;
    box-shadow: 0 0 8px color-mix(in srgb, var(--primary-color, #6366f1) 60%, transparent);
}
.pp-activity-month {
    font-size: 0.6rem;
    color: var(--secondary-color, #64748b);
    opacity: 0.5;
    white-space: nowrap;
}
.pp-achievements-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 16px;
    border: 1px solid color-mix(in srgb, var(--primary-color, #6366f1) 30%, transparent);
    border-radius: 16px;
    background: color-mix(in srgb, var(--primary-color, #6366f1) 12%, var(--accent-color, #1e293b));
    color: var(--secondary-color, #e2e8f0);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    transition: transform 0.15s ease, background 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    margin-top: 0 !important;
    box-sizing: border-box;
}
.pp-achievements-btn:active {
    transform: scale(0.98);
}
.pp-achievements-btn span:first-child {
    font-size: 1.2rem;
}
.pp-achievements-btn span:nth-child(2) {
    flex: 1;
}
.pp-btn-arrow {
    font-size: 1.1rem;
    opacity: 0.5;
    margin-left: auto;
}
[data-theme="light"] .pp-level-track, [data-theme="light-classic"].pp-level-track, [data-theme="yogurt"] .pp-level-track, [data-theme="dolphin"] .pp-level-track, [data-theme="sage"] .pp-level-track {
    background: rgba(0,0,0,0.08);
}
[data-theme="light"] .pp-detail-row, [data-theme="light-classic"] .pp-detail-row, [data-theme="yogurt"] .pp-detail-row, [data-theme="dolphin"] .pp-detail-row, [data-theme="sage"] .pp-detail-row {
    border-bottom-color: rgba(0,0,0,0.06);
}
@media  (max-width: 400px) {
    .tx-bottom-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }
    .tx-debt-pay {
        align-self: flex-end;
    }
}
.subpage-back-btn.close-settings-btn {
    all: unset !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.08) !important;
    color: var(--secondary-color) !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    transition: background 0.15s ease, transform 0.1s ease !important;
    -webkit-tap-highlight-color: transparent !important;
    box-sizing: border-box !important;
}
.subpage-back-btn.close-settings-btn:active {
    transform: scale(0.9) !important;
    background: rgba(255, 255, 255, 0.2) !important;
}
[data-theme="light"] .subpage-back-btn.close-settings-btn, [data-theme="light-classic"].subpage-back-btn.close-settings-btn, [data-theme="yogurt"] .subpage-back-btn.close-settings-btn, [data-theme="dolphin"] .subpage-back-btn.close-settings-btn, [data-theme="sage"] .subpage-back-btn.close-settings-btn {
    background: rgba(0, 0, 0, 0.06) !important;
}
@media  (max-width: 768px) {
    #settings-page h2 {
        font-size: 1.2rem;
        font-weight: 700;
    }
    #settings-page button {
        font-size: 1rem;
        font-weight: 700;
    }
    #settings-page input {
        font-size: 0.9rem;
        font-weight: 700;
    }
}
[data-theme="light"] .subpage-header, [data-theme="light"] header, [data-theme="light-classic"] .subpage-header, [data-theme="light-classic"] header, [data-theme="yogurt"] .subpage-header, [data-theme="yogurt"] header, [data-theme="dolphin"] .subpage-header, [data-theme="dolphin"] header, [data-theme="sage"] .subpage-header, [data-theme="sage"] header {
    background: rgba(255, 255, 255, 0.78);
    border-bottom-color: rgba(0, 0, 0, 0.07);
}
.subpage-back-btn:hover {
    background: rgba(255, 255, 255, 0.14);
}
.subpage-back-btn:active {
    transform: scale(0.9);
    background: rgba(255, 255, 255, 0.2);
}
[data-theme="light"] .subpage-back-btn,[data-theme="light-classic"] .subpage-back-btn, [data-theme="yogurt"] .subpage-back-btn, [data-theme="dolphin"] .subpage-back-btn, [data-theme="sage"] .subpage-back-btn {
    background: rgba(0, 0, 0, 0.06) !important;
    color: var(--secondary-color, #1e293b) !important;
}
.subpage-back-icon {
    font-size: 22px;
    line-height: 1;
    font-weight: 300;
    margin-left: -2px;
    pointer-events: none;
}
.subpage-title {
    flex: 1;
    text-align: center;
    font-size: 1rem;
    font-weight: 700;
    color: var(--secondary-color, #e2e8f0);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.subpage-header-spacer {
    width: 36px;
    flex-shrink: 0;
}
.subpage-content {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
    padding-top: calc(60px + env(safe-area-inset-bottom));
}
[data-theme="light"] .analytics-header-row,[data-theme="light-classic"] .analytics-header-row, [data-theme="yogurt"] .analytics-header-row, [data-theme="dolphin"] .analytics-header-row, [data-theme="sage"] .analytics-header-row {
    background: rgba(255, 255, 255, 0.78);
    border-bottom-color: rgba(0, 0, 0, 0.07);
}
[data-theme="light"] .settings-header,[data-theme="light-classic"] .settings-header, [data-theme="yogurt"] .settings-header, [data-theme="dolphin"] .settings-header, [data-theme="sage"] .settings-header {
    background: rgba(255, 255, 255, 0.78);
    border-bottom-color: rgba(0, 0, 0, 0.07);
}
:root.theme-transitioning * {
    transition: none !important;
}
::view-transition-old(root) {
    animation: none;
    mix-blend-mode: normal;
}
::view-transition-new(root) {
    animation: 0.26s ease-out both vt-fade-in;
    mix-blend-mode: normal;
}
@keyframes vt-fade-out {
    from { opacity: 1; }
    to   { opacity: 0; }
}
@keyframes vt-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
#theme-options-container {
    contain: layout style;
    will-change: transform;
}
#theme-options-container:not(:hover) {
    will-change: auto;
}
#theme-page {
    overscroll-behavior: contain;
}
.about-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 1rem 0;
}
.about-hero {
    text-align: center;
    padding: 24px 20px 20px;
    border-radius: var(--border-radius-xl);
    background:
        radial-gradient(circle at top, rgba(255,255,255,0.08), transparent 60%),
        linear-gradient(135deg, var(--accent-color), transparent);
    backdrop-filter: blur(10px);
}
.about-avatar {
    width: 90px;
    height: 90px;
    border-radius: 20px;
    margin-bottom: 10px;
    box-shadow: var(--shadow-md);
}
.about-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--secondary-color);
}
.about-version {
    font-size: 0.8rem;
    color: var(--secondary-color);
    opacity: 0.55;
    margin-top: 4px;
}
.about-sub {
    font-size: 0.85rem;
    margin-top: 8px;
    color: var(--secondary-color);
    opacity: 0.7;
}
.about-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.about-stat-card {
    background: var(--accent-color);
    border-radius: var(--border-radius-md);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.about-stat-card .ti {
    font-size: 18px;
    color: var(--secondary-color);
    opacity: 0.5;
    margin-bottom: 4px;
}
.about-stat-value {
    font-size: 22px;
    font-weight: 500;
    color: var(--secondary-color);
    line-height: 1.2;
}
.about-stat-label {
    font-size: 12px;
    color: var(--secondary-color);
    opacity: 0.55;
    line-height: 1.3;
}
.about-card {
    background: var(--tertiary-color);
    border: 0.5px solid rgba(128, 128, 128, 0.15);
    border-radius: var(--border-radius-lg);
    padding: 1rem 1.25rem;
    box-shadow: none;
}
.about-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}
.about-card-icon {
    font-size: 18px;
    color: var(--secondary-color);
    opacity: 0.5;
}
.about-card-title {
    font-size: 15px;
    font-weight: 500;
    color: var(--secondary-color);
    text-transform: none;
    opacity: 1;
    margin-bottom: 0;
}
.about-card-content {
    font-size: 14px;
    line-height: 1.65;
    color: var(--secondary-color);
    opacity: 0.82;
}
.about-features {
    display: flex;
    flex-direction: column;
}
.about-feature-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    font-size: 14px;
    color: var(--secondary-color);
    border-bottom: 0.5px solid rgba(128, 128, 128, 0.1);
}
.about-feature-row:first-child { padding-top: 0; }
.about-feature-row:last-child { border-bottom: none; padding-bottom: 0; }
.about-feature-row .ti {
    font-size: 17px;
    opacity: 0.5;
    flex-shrink: 0;
    color: var(--secondary-color);
}
.about-changelog {
    display: flex;
    flex-direction: column;
}
.about-changelog-row {
    display: flex;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 0.5px solid rgba(128, 128, 128, 0.1);
}
.about-changelog-row:first-child { padding-top: 0; }
.about-changelog-row:last-child { border-bottom: none; padding-bottom: 0; }
.about-changelog-ver {
    min-width: 44px;
    font-size: 13px;
    color: var(--secondary-color);
    opacity: 0.4;
    padding-top: 2px;
    flex-shrink: 0;
}
.about-changelog-info { flex: 1; min-width: 0; }
.about-changelog-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--secondary-color);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.about-changelog-desc {
    font-size: 13px;
    color: var(--secondary-color);
    opacity: 0.5;
    margin-top: 2px;
    line-height: 1.4;
}
.about-badge-now {
    font-size: 11px;
    font-weight: 500;
    padding: 2px 7px;
    border-radius: 20px;
    background: #EEEDFE;
    color: #3C3489;
    white-space: nowrap;
}
.about-roadmap { display: flex; flex-direction: column; }
.about-roadmap-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 0.5px solid rgba(128, 128, 128, 0.1);
}
.about-roadmap-row:first-child { padding-top: 0; }
.about-roadmap-row:last-child { border-bottom: none; padding-bottom: 0; }
.about-roadmap-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 5px;
}
.about-roadmap-dot.dot-done  { background: #1D9E75; }
.about-roadmap-dot.dot-wip   { background: #BA7517; }
.about-roadmap-dot.dot-planned {
    background: transparent;
    border: 1.5px solid rgba(128, 128, 128, 0.4);
    box-sizing: border-box;
}
.about-roadmap-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.about-roadmap-name {
    font-size: 14px;
    color: var(--secondary-color);
}
.about-roadmap-meta {
    font-size: 12px;
    color: var(--secondary-color);
    opacity: 0.5;
}
.about-faq { display: flex; flex-direction: column; }
.about-faq-item {
    padding: 10px 0;
    border-bottom: 0.5px solid rgba(128, 128, 128, 0.1);
}
.about-faq-item:first-child { padding-top: 0; }
.about-faq-item:last-child { border-bottom: none; padding-bottom: 0; }
.about-faq-q {
    font-size: 14px;
    font-weight: 500;
    color: var(--secondary-color);
    margin-bottom: 3px;
}
.about-faq-a {
    font-size: 13px;
    color: var(--secondary-color);
    opacity: 0.6;
    line-height: 1.5;
}
.about-dev {
    display: flex;
    align-items: center;
    gap: 12px;
}
.about-dev-avatar img{
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #EEEDFE;
    color: #3C3489;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.about-dev-info { display: flex; flex-direction: column; gap: 2px; }
.about-dev-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--secondary-color);
}
.about-dev-sub {
    font-size: 13px;
    color: var(--secondary-color);
    opacity: 0.55;
}
.about-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.about-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--border-radius-md);
    border: 0.5px solid rgba(128, 128, 128, 0.15);
    text-decoration: none;
    color: var(--secondary-color);
    transition: opacity var(--transition-fast);
}
.about-link:active { opacity: 0.6; }
.about-link-icon {
    font-size: 18px;
    opacity: 0.65;
    flex-shrink: 0;
}
.about-link span {
    flex: 1;
    font-size: 14px;
}
.about-link-ext {
    font-size: 14px;
    opacity: 0.35;
    flex-shrink: 0;
}
.lnav-icon {
    width: 36px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.budgetit-nav-svg {
    width: 32px;
    height: 32px;
    display: block;
    transition:
            transform 0.18s ease,
            filter 0.18s ease,
            opacity 0.18s ease;
}
.lnav-item:not(.active) .budgetit-nav-svg {
    opacity: 0.62;
}
.lnav-item.active .budgetit-nav-svg {
    opacity: 1;
    transform: translateY(-1px) scale(1.06);
    filter:
            drop-shadow(0 0 7px color-mix(in srgb, var(--primary-color) 48%, transparent))
            drop-shadow(0 0 15px color-mix(in srgb, var(--primary-color) 20%, transparent));
}
.lnav-item.active .lnav-icon::before {
    content: "";
    position: absolute;
    width: 39px;
    height: 39px;
    border-radius: 999px;
    background:
            radial-gradient(
                    circle,
                    color-mix(in srgb, var(--primary-color) 20%, transparent) 0%,
                    transparent 68%
            );
    z-index: -1;
}
.lnav-item:active .budgetit-nav-svg {
    transform: scale(0.93);
}
.fab-btn .budgetit-fab-svg {
    width: 38px;
    height: 38px;
    display: block;
    color: currentColor;
    filter:
            drop-shadow(0 0 8px rgba(255,255,255,0.25))
            drop-shadow(0 0 14px color-mix(in srgb, var(--primary-color) 35%, transparent));
    transition:
            transform 0.16s ease,
            filter 0.16s ease;
}
.fab-btn:active .budgetit-fab-svg {
    transform: scale(0.88) rotate(6deg);
    filter:
            drop-shadow(0 0 6px color-mix(in srgb, var(--primary-color) 40%, transparent));
}
.page-title-with-icon {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.sp-hero-wrap {
    margin-top: 12px;
    margin-bottom: 4px;
}
.sp-hero-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 16px 16px;
    border-radius: 20px;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--primary-color, #6366f1) 22%, var(--tertiary-color, #1e1e2e)),
        color-mix(in srgb, var(--primary-color, #6366f1) 8%, var(--tertiary-color, #1e1e2e))
    );
    border: 1px solid color-mix(in srgb, var(--primary-color, #6366f1) 30%, transparent);
    box-shadow:
        0 12px 32px rgba(0,0,0,0.3),
        0 0 0 1px rgba(255,255,255,0.04) inset;
    overflow: hidden;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.sp-hero-card:active {
    transform: scale(0.985);
    box-shadow: 0 6px 16px rgba(0,0,0,0.3);
}
@keyframes sp-blob {
    0%, 100% { transform: translate(0,0) scale(1); }
    33%       { transform: translate(-15px, 10px) scale(1.1); }
    66%       { transform: translate(10px, -10px) scale(0.95); }
}
.sp-hero-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--accent-color, rgba(255,255,255,0.08));
    border: 2.5px solid color-mix(in srgb, var(--primary-color,#6366f1) 60%, white);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color,#6366f1) 20%, transparent);
}
.sp-hero-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.sp-hero-lvl-badge {
    position: absolute;
    bottom: -3px;
    right: -3px;
    padding: 2px 7px;
    border-radius: 10px;
    background: var(--primary-color, #6366f1);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    border: 2px solid var(--bg-color, #0f172a);
    white-space: nowrap;
    line-height: 1.4;
}
.sp-hero-right {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 1;
}
.sp-hero-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--secondary-color, #f1f5f9);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sp-hero-id {
    font-size: 0.72rem;
    color: var(--secondary-color, #94a3b8);
    opacity: 0.6;
    font-family: monospace;
    letter-spacing: 0.03em;
}
.sp-hero-progress-bar {
    flex: 1;
    height: 6px;
    background: rgba(255,255,255,0.12);
    border-radius: 99px;
    overflow: hidden;
}
.sp-hero-progress-fill {
    height: 100%;
    width: 0%;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--primary-color,#6366f1), color-mix(in srgb,var(--primary-color,#6366f1) 60%,#a78bfa));
    transition: width 1.1s cubic-bezier(0.34,1.56,0.64,1);
}
.sp-hero-pts {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--primary-color, #818cf8);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.sp-nav-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 4px;
}
.sp-nav-group {
    background: var(--tertiary-color, rgba(255,255,255,0.04));
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 18px;
    overflow: hidden;
}
.sp-nav-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 13px 14px;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    cursor: pointer;
    text-align: left;
    transition: background 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    margin-top: 0 !important;
}
.sp-nav-btn:last-child {
    border-bottom: none;
}
.sp-nav-btn:active {
    background: rgba(255,255,255,0.04);
}
.sp-nav-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.sp-nav-text {
    flex: 1;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--secondary-color, #e2e8f0);
}
.sp-nav-arr {
    font-size: 1.2rem;
    color: var(--secondary-color, #94a3b8);
    opacity: 0.35;
    line-height: 1;
    font-weight: 300;
}
:root[data-theme="light"] .sp-hero-card,
:root[data-theme="dolphin"] .sp-hero-card,
:root[data-theme="light-classic"] .sp-hero-card,
:root[data-theme="yogurt"] .sp-hero-card {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--primary-color,#6366f1) 12%, #fff),
        color-mix(in srgb, var(--primary-color,#6366f1) 4%, #f8fafc)
    );
    border-color: color-mix(in srgb, var(--primary-color,#6366f1) 20%, transparent);
    box-shadow: 0 8px 24px rgba(99,102,241,0.12);
}
:root[data-theme="light"] .sp-hero-id,
:root[data-theme="dolphin"] .sp-hero-id,
:root[data-theme="light-classic"] .sp-hero-id,
:root[data-theme="yogurt"] .sp-hero-id {
    opacity: 0.5;
}
:root[data-theme="light"] .sp-nav-group,
:root[data-theme="dolphin"] .sp-nav-group,
:root[data-theme="light-classic"] .sp-nav-group,
:root[data-theme="yogurt"] .sp-nav-group {
    background: #fff;
    border-color: rgba(0,0,0,0.07);
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
:root[data-theme="light"] .sp-nav-btn,
:root[data-theme="dolphin"] .sp-nav-btn,
:root[data-theme="light-classic"] .sp-nav-btn,
:root[data-theme="yogurt"] .sp-nav-btn {
    border-bottom-color: rgba(0,0,0,0.05);
}
:root[data-theme="light"] .sp-nav-btn:active,
:root[data-theme="dolphin"] .sp-nav-btn:active,
:root[data-theme="light-classic"] .sp-nav-btn:active,
:root[data-theme="yogurt"] .sp-nav-btn:active {
    background: rgba(0,0,0,0.03);
}
#settings-page .hr-spacing {
    display: none;
}
.sp-hero-wrap {
    margin-bottom: 16px;
}
.banner-carousel.wrapper-sm {
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 16px;
}
.sp-nav-list.settings-nav-list {
    padding: 0;
}
.sp-nav-list .open-subpage-btn {
    border-radius: 0;
    padding: 13px 14px;
    min-height: unset;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    background: transparent;
    box-shadow: none;
}
.sp-nav-sub {
    display: block;
    font-size: 0.7rem;
    color: var(--secondary-color, #94a3b8);
    opacity: 0.45;
    font-weight: 400;
    margin-top: 1px;
}
.sp-nav-text-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.sp-nav-text-wrap .sp-nav-text {
    flex: unset;
}
:root[data-theme="light"] .banner-carousel.wrapper-sm,
:root[data-theme="dolphin"] .banner-carousel.wrapper-sm,
:root[data-theme="light-classic"] .banner-carousel.wrapper-sm,
:root[data-theme="yogurt"] .banner-carousel.wrapper-sm {
    box-shadow: 0 4px 16px rgba(0,0,0,0.10);
}
/* ── 10-themes.css ── */
:root {
    --primary-color:  #3B82F6;
    --income-color:   #27AE60;
    --expense-color:  #ff4b5c;
    --deposit-color:  #9B59B6;
    --debt-color:     #F1C40F;
    --secondary-color: #1A1A1A;
    --tertiary-color:  #FFFFFF;
    --dark-color:      #000000;
    --accent-color:    #EFF6FF;
    --main-ground:     #F5F7F9;
    --bg-secondary-color: #FFFFFF;
    --an-primary-color:    #3B82F6;
    --an-income-color:     #27AE60;
    --an-expense-color:    #E74C3C;
    --an-debt-color:       #F1C40F;
    --an-secondary-color:  #1A1A1A;
    --an-tertiary-color:   #FFFFFF;
    --an-accent-color:     #BDC3C7;
    --an-shadow-md:        0 4px 12px rgba(0,0,0,0.25);
    --an-border-radius-md: 12px;
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 8px;
    --spacing-lg: 20px;
    --spacing-xl: 32px;
    --border-radius-sm: 4px;
    --border-radius-md: 10px;
    --border-radius-lg: 14px;
    --border-radius-xl: 24px;
    --shadow-sm: 0 2px 5px rgba(0,0,0,0.1);
    --shadow-md: 0 4px 8px rgba(0,0,0,0.2);
    --shadow-lg: 0 -2px 25px rgba(0,0,0,0.9);
    --transition-fast:   0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow:   0.4s cubic-bezier(0.16, 1, 0.3, 1);
    --z-index-header:       900;
    --z-index-backdrop:    1099;
    --z-index-bottom-sheet:1200;
    --z-index-modal:       1200;
    --z-index-loading:     9999;
    --linear-progress-bar: linear-gradient(135deg, #3B82F6, #6366F1);
    .add-btn, #pay-debt, #close-detail, #delete-transaction, #close-budget-sheet, #add-budget-btn, #close-settings, #budget-form button, #cancel-delete-budget, #confirm-delete-budget, #pay-debt-detail {
        color: #000000;
    }
}
:root[data-theme="light-classic"] {
    --primary-color:  #2ECC71;
    --income-color:   #27AE60;
    --expense-color:  #ff4b5c;
    --deposit-color:  #9B59B6;
    --debt-color:     #F1C40F;
    --secondary-color: #1A1A1A;
    --tertiary-color:  #FFFFFF;
    --dark-color:      #000000;
    --accent-color:    #EAF4EE;
    --main-ground:     #F5F7F9;
    --bg-secondary-color: #FFFFFF;
    --an-primary-color:    #2ECC71;
    --an-income-color:     #27AE60;
    --an-expense-color:    #E74C3C;
    --an-debt-color:       #F1C40F;
    --an-secondary-color:  #1A1A1A;
    --an-tertiary-color:   #FFFFFF;
    --an-accent-color:     #BDC3C7;
    --an-shadow-md:        0 4px 12px rgba(0,0,0,0.25);
    --an-border-radius-md: 12px;
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 8px;
    --spacing-lg: 20px;
    --spacing-xl: 32px;
    --border-radius-sm: 4px;
    --border-radius-md: 10px;
    --border-radius-lg: 14px;
    --border-radius-xl: 24px;
    --shadow-sm: 0 2px 5px rgba(0,0,0,0.1);
    --shadow-md: 0 4px 8px rgba(0,0,0,0.2);
    --shadow-lg: 0 -2px 25px rgba(0,0,0,0.9);
    --transition-fast:   0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow:   0.4s cubic-bezier(0.16, 1, 0.3, 1);
    --z-index-header:       900;
    --z-index-backdrop:    1099;
    --z-index-bottom-sheet:1200;
    --z-index-modal:       1200;
    --z-index-loading:     9999;
    --linear-progress-bar: linear-gradient(135deg, var(--primary-color), var(--income-color));
    .add-btn {
        color: var(--secondary-color);
    }
}
:root[data-theme="dark"] {
    --primary-color:  #5bb8ff;
    --income-color:   #3ddc97;
    --expense-color:  #ff6b81;
    --deposit-color:  #ffc857;
    --debt-color:     #c084fc;
    --secondary-color:    #eaf1ff;
    --bg-secondary-color: #000000;
    --tertiary-color:     #06101f;
    --accent-color:       #121b31;
    --main-ground:        #070d1c;
    --shadow-sm: 0 2px 5px rgba(0,0,0,0.4);
    --shadow-md: 0 4px 8px rgba(0,0,0,0.5);
    --shadow-lg: 0 -2px 25px rgba(0,0,0,0.8);
    --an-primary-color:   var(--primary-color);
    --an-income-color:    var(--income-color);
    --an-expense-color:   var(--expense-color);
    --an-debt-color:      var(--debt-color);
    --an-secondary-color: #f0f0f0;
    --an-tertiary-color:  #1e1e1e;
    --an-accent-color:    var(--accent-color);
    --linear-progress-bar: linear-gradient(135deg, #5bb8ff, #2a6df0);
    .currency-chip {
        background-color: var(--bg-secondary-color);
        color: var(--secondary-color);
    }
    .chip-btn.active {
        color: var(--tertiary-color);
    }
    .term-chip {
        color: var(--secondary-color) !important;
    }
    #add-btn, #install-btn {
        color: #FFFFFF;
    }
    #add-budget-btn, .add-btn, #add-product {
        color: #FFFFFF;
    }
    .analytics-slide h4 {
        color: var(--secondary-color);
    }
    .faq-item summary {
        color: #ffffff;
    }
    input, select, textarea {
        color: var(--secondary-color);
    }
    #summary-blocks {
        color: var(--bg-secondary-color);
    }
}
:root[data-theme="dark-classic"] {
    --primary-color:  #2ECC71;
    --income-color:   #27AE60;
    --expense-color:  #ff4b5c;
    --deposit-color:  #9B59B6;
    --debt-color:     #F1C40F;
    --secondary-color:  #dcddde;
    --bg-secondary-color: #000000;
    --tertiary-color:   #000000;
    --accent-color:     #292b2f;
    --main-ground:      #111116;
    --shadow-sm:        0 2px 5px rgba(0,0,0,0.4);
    --shadow-md:        0 4px 8px rgba(0,0,0,0.5);
    --shadow-lg:        0 -2px 25px rgba(0,0,0,0.8);
    --an-primary-color:    var(--primary-color);
    --an-income-color:     var(--income-color);
    --an-expense-color:    var(--expense-color);
    --an-debt-color:       var(--debt-color);
    --an-secondary-color:  #f0f0f0;
    --an-tertiary-color:   #1e1e1e;
    --an-accent-color:     var(--accent-color);
    .currency-chip{
        background-color: var(--bg-secondary-color);
        color: var(--secondary-color);
    }
    .chip-btn.active {
        color: var(--tertiary-color);
    }
    .term-chip {
        color: var(--secondary-color) !important;
    }
    #add-btn, #install-btn {
        color: var(--tertiary-color);
    }
    #add-budget-btn, .add-btn, #add-product {
        color: var(--tertiary-color);
    }
    .analytics-slide h4 {
        color: var(--secondary-color);
    }
    .faq-item summary {
        color: #ffffff;
    }
    input, select, textarea {
        color: var(--secondary-color);
    }
    #summary-blocks {
        color: var(--bg-secondary-color);
    }
}
:root[data-theme="onyx"] {
    --main-ground:        #050509;
    --sidebar-bg:         #000000;
    --bg-secondary-color: #0b0b10;
    --tertiary-color:     #0c0c11;
    --secondary-color:    #ffffff;
    --text-muted:         #9a9fb3;
    --primary-color:  #5865f2;
    --income-color:   #2aace8;
    --expense-color:  #ed4245;
    --deposit-color:  #8a2be2;
    --debt-color:     #e8a22a;
    --accent-color:   #181824;
    --dark-color:     #000000;
    --shadow-sm:  0 2px 6px rgba(0, 0, 0, 0.7);
    --shadow-md:  0 4px 14px rgba(0, 0, 0, 0.9), 0 0 10px rgba(88, 101, 242, 0.32);
    --shadow-lg:  0 10px 30px rgba(0, 0, 0, 0.95), 0 0 22px rgba(88, 101, 242, 0.38);
    --an-primary-color:    var(--primary-color);
    --an-income-color:     var(--income-color);
    --an-expense-color:    var(--expense-color);
    --an-debt-color:       var(--debt-color);
    --an-secondary-color:  var(--secondary-color);
    --an-tertiary-color:   #050509;
    --an-accent-color:     var(--accent-color);
    --an-shadow-md:        0 4px 16px rgba(88, 101, 242, 0.35);
    --an-border-radius-md: var(--border-radius-md);
    .currency-chip {
        background-color: #050509;
        color: var(--secondary-color);
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
    }
    .term-chip {
        color: var(--secondary-color) !important;
    }
    #add-btn, .chip-btn.active, .add-btn, #add-budget-btn {
        background: linear-gradient(135deg, var(--primary-color), #2a2f7a);
        color: var(--secondary-color);
        box-shadow: 0 0 18px rgba(88, 101, 242, 0.55);
    }
    .add-btn, #add-budget-btn {
        box-shadow: none;
    }
    .analytics-slide h4 {
        color: var(--secondary-color);
    }
    .theme-option:hover {
        color: #ffffff;
    }
    input,
    select,
    textarea {
        color: var(--secondary-color);
        background-color: #050509;
    }
    main {
        background-color: var(--main-ground);
        background-image:
                radial-gradient(circle at top left,    rgba(88, 101, 242, 0.18), transparent 55%),
                radial-gradient(circle at bottom right,rgba(42, 172, 232, 0.14), transparent 60%),
                linear-gradient(135deg, #030307 0%, #050509 40%, #020208 100%);
        background-size: cover;
        background-attachment: fixed;
    }
}
:root[data-theme="mint"] {
    --main-ground:        #0f1917;
    --sidebar-bg:         #0f1917;
    --bg-secondary-color: #162320;
    --tertiary-color:     #1c2e29;
    --secondary-color:    #e9fff8;
    --text-muted:         #9cb9b0;
    --primary-color:      #63e6be;
    --income-color:       #63e6be;
    --expense-color:      #ff6e7f;
    --deposit-color:      #9d7dff;
    --debt-color:         #ffd27f;
    --accent-color:       #113c34;
    --dark-color:         #000000;
    --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.55), 0 0 12px rgba(99, 230, 190, 0.18);
    --shadow-lg: 0 10px 28px rgba(0, 0, 0, 0.75), 0 0 22px rgba(99, 230, 190, 0.22);
    --an-primary-color:    var(--primary-color);
    --an-income-color:     var(--income-color);
    --an-expense-color:    var(--expense-color);
    --an-debt-color:       var(--debt-color);
    --an-secondary-color:  var(--secondary-color);
    --an-tertiary-color:   #0f1917;
    --an-accent-color:     #113c34;
    --an-shadow-md:        0 4px 16px rgba(99, 230, 190, 0.28);
    --an-border-radius-md: var(--border-radius-md);
    #add-btn {
        background: var(--primary-color);
        color: #00382c;
        box-shadow: 0 0 16px rgba(99, 230, 190, 0.55);
    }
    .add-btn, .chip-btn.active {
        background: var(--primary-color);
        color: #00382c;
    }
    .term-chip.active {
        color: var(--secondary-color);
    }
    .analytics-slide h4 {
        color: var(--secondary-color);
    }
    .faq-item summary {
        color: #d8fff3;
    }
    .open-subpage-btn {
        background: rgba(99, 230, 190, 0.14);
        color: var(--secondary-color);
        box-shadow: var(--shadow-sm);
    }
    main {
        background-color: var(--main-ground);
        background-image:
                radial-gradient(circle at top,    rgba(99, 230, 190, 0.18), transparent 55%),
                radial-gradient(circle at bottom, rgba(99, 230, 190, 0.12), transparent 60%),
                linear-gradient(135deg, #0d1614 0%, #0f1917 50%, #0d1614 100%);
        background-size: cover;
        background-attachment: fixed;
    }
}
:root[data-theme="shark"] {
    --main-ground:        #080a0d;
    --sidebar-bg:         #000000;
    --bg-secondary-color: #080a0d;
    --tertiary-color:     #12151a;
    --secondary-color:    #dde3ec;
    --text-muted:         #6b7585;
    --dark-color:         #000000;
    --primary-color:   #00ff7f;
    --income-color:    #00d96b;
    --expense-color:   #ff3d55;
    --deposit-color:   #7b5ea7;
    --debt-color:      #f0913a;
    --accent-color:    #6b1f35;
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.6);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.7), 0 0 12px rgba(0, 255, 127, 0.06);
    --shadow-lg: 0 -2px 30px rgba(0, 255, 127, 0.18);
    --an-primary-color:    var(--primary-color);
    --an-income-color:     var(--income-color);
    --an-expense-color:    var(--expense-color);
    --an-debt-color:       var(--debt-color);
    --an-secondary-color:  var(--secondary-color);
    --an-tertiary-color:   #0d1017;
    --an-accent-color:     #1a2030;
    --an-shadow-md:        0 4px 16px rgba(0, 255, 127, 0.2);
    --an-border-radius-md: var(--border-radius-md);
    --linear-progress-bar: linear-gradient(135deg, #00ff7f, #00c86a);
    .currency-chip {
        background-color: var(--sidebar-bg);
        color: var(--secondary-color);
        border: 1px solid rgba(0, 255, 127, 0.12);
    }
    .achievement.unlocked {
        background: linear-gradient(145deg, #6b1f35 0%, #7b5ea7 100%);
        box-shadow: 0 0 12px rgba(0, 255, 127, 0.15);
    }
    .user-profile-card::before {
        background: radial-gradient(circle, rgba(107, 31, 53, 0.25), transparent 70%);
    }
    .emoji-avatar {
        background: linear-gradient(135deg, #00ff7f, #6b1f35) border-box;
        box-shadow: 0 0 20px rgba(0, 255, 127, 0.3);
    }
    .category-group-label {
        background-color: var(--dark-color);
        color: var(--text-muted);
    }
    .chip-btn {
        color: #fff;
    }
    .chip-btn.active {
        color: #000;
    }
    .term-chip {
        color: var(--secondary-color) !important;
    }
    #add-btn {
        background: var(--accent-color) !important;
        color: var(--primary-color) !important;
        box-shadow: 0 0 20px rgba(107, 31, 53, 0.5), 0 0 8px rgba(0, 255, 127, 0.15);
    }
    #add-budget-btn, .add-btn {
        background: var(--accent-color) !important;
        color: var(--secondary-color);
    }
    .open-subpage-btn {
        background: rgba(107, 31, 53, 0.35);
        border: 1px solid rgba(107, 31, 53, 0.5);
        color: var(--secondary-color);
    }
    .open-subpage-btn:hover {
        background: rgba(107, 31, 53, 0.55);
    }
    #transaction-list li.tx-item {
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        background: rgba(18, 21, 26, 0.85);
        border: 1px solid rgba(255, 255, 255, 0.04);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    }
    input, select, textarea, .close-category-sheet, .close-settings-btn {
        color: var(--secondary-color);
        background-color: var(--tertiary-color);
    }
    .category-select-button {
        color: var(--secondary-color);
    }
    #month-picker-btn, .month-item {
        background-color: rgba(107, 31, 53, 0.4);
        color: var(--secondary-color);
        border: 1px solid rgba(107, 31, 53, 0.35);
    }
    .month-item.active {
        background-color: var(--accent-color);
    }
    .close-form, .all-months-btn, .year-nav-btn {
        color: var(--secondary-color);
    }
    #install-btn {
        color: var(--tertiary-color);
    }
    .analytics-slide h4 {
        color: var(--secondary-color);
    }
    main {
        background-color: var(--main-ground);
        background-image:
                radial-gradient(ellipse at bottom center, rgba(0, 255, 127, 0.07) 0%, transparent 55%),
                radial-gradient(ellipse at top right, rgba(107, 31, 53, 0.18) 0%, transparent 50%),
                radial-gradient(ellipse at top left, rgba(70, 110, 160, 0.08) 0%, transparent 45%),
                linear-gradient(rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.5)),
                url('/assets/shark-pattern.png');
        background-size: auto, auto, auto, auto, 300px 300px;
        background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat;
        background-attachment: fixed, fixed, fixed, fixed, fixed;
    }
}
:root[data-theme="dolphin"] {
    --main-ground:        #dff7ff;
    --tertiary-color:     #ffffff;
    --accent-color:       #8ae8ff;
    --sidebar-bg:         #c8f0fa;
    --secondary-color:    #004c66;
    --text-muted:         #6b8a99;
    --bg-secondary-color: #e9fbff;
    --primary-color:      #00cfa3;
    --income-color:       #66efd0;
    --expense-color:      #ff6e7a;
    --deposit-color:      #a7a0ff;
    --debt-color:         #ffbb66;
    --dark-color:         #000000;
    --shadow-sm:  0 2px 5px rgba(0, 76, 102, 0.12);
    --shadow-md:  0 4px 8px rgba(0, 76, 102, 0.20);
    --shadow-lg:  0 6px 20px rgba(0, 76, 102, 0.25);
    --an-primary-color:    var(--primary-color);
    --an-income-color:     var(--income-color);
    --an-expense-color:    var(--expense-color);
    --an-debt-color:       var(--debt-color);
    --an-secondary-color:  var(--secondary-color);
    --an-tertiary-color:   var(--tertiary-color);
    --an-accent-color:     var(--accent-color);
    --an-shadow-md:        0 4px 12px rgba(0, 76, 102, 0.20);
    --an-border-radius-md: var(--border-radius-md);
    #add-btn, .add-btn, .chip-btn.active, #add-budget-btn {
        background-color: var(--primary-color);
        color: #ffffff;
    }
    .open-subpage-btn {
        background: var(--accent-color);
        color: var(--secondary-color);
    }
    .faq-item summary {
        color: #ffffff;
    }
    .analytics-slide h4 {
        color: var(--secondary-color);
    }
    main {
        background-image:
                linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.10)),
                url('/assets/dolphin-pattern.png');
        background-size: 300px;
        background-repeat: repeat;
        background-color: var(--main-ground);
    }
}
:root[data-theme="monster"] {
    --main-ground:        #050609;
    --sidebar-bg:         #050609;
    --bg-secondary-color: #11151c;
    --tertiary-color:     #0b0f14;
    --secondary-color:    #f4f7f4;
    --text-muted:         #6f7a6f;
    --primary-color:      #44d62c;
    --income-color:       #44d62c;
    --expense-color:      #ff4b5c;
    --deposit-color:      #8a2be2;
    --debt-color:         #e8a22a;
    --accent-color:       #0f1a10;
    --dark-color:         #000000;
    --shadow-sm: 0 2px 6px  rgba(0, 0, 0, 0.7);
    --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.85), 0 0 12px rgba(68, 214, 44, 0.25);
    --shadow-lg: 0 10px 28px rgba(0, 0, 0, 0.95), 0 0 22px rgba(68, 214, 44, 0.35);
    --an-primary-color:    var(--primary-color);
    --an-income-color:     var(--income-color);
    --an-expense-color:    var(--expense-color);
    --an-debt-color:       var(--debt-color);
    --an-secondary-color:  var(--secondary-color);
    --an-tertiary-color:   #050609;
    --an-accent-color:     #0f1a10;
    --an-shadow-md:        0 4px 16px rgba(68, 214, 44, 0.35);
    --an-border-radius-md: var(--border-radius-md);
    #add-btn {
        background: var(--primary-color);
        color: #000000;
        box-shadow: 0 0 18px rgba(68, 214, 44, 0.7);
    }
    .add-btn, .chip-btn.active, #add-budget-btn, #install-btn {
        color: #000000;
    }
    .term-chip.active {
        color: var(--secondary-color);
    }
    .analytics-slide h4 {
        color: var(--secondary-color);
    }
    .faq-item summary {
        color: #e8ffe8;
    }
    .open-subpage-btn {
        background: rgba(68, 214, 44, 0.18);
        color: var(--secondary-color);
        box-shadow: var(--shadow-sm);
    }
    main {
        background-color: var(--main-ground);
        background-image:
                radial-gradient(circle at top,    rgba(68, 214, 44, 0.22), transparent 55%),
                radial-gradient(circle at bottom, rgba(68, 214, 44, 0.12), transparent 60%),
                linear-gradient(135deg, #020304 0%, #050609 50%, #020304 100%);
        background-size: cover;
        background-attachment: fixed;
    }
}
:root[data-theme="yogurt"] {
    --main-ground:        #fff7f1;
    --sidebar-bg:         #ffe9f2;
    --bg-secondary-color: #ffeef7;
    --tertiary-color:     #fbe0ef;
    --secondary-color:    #5b3256;
    --text-muted:         #9b7a93;
    --primary-color:      #ff9bb8;
    --income-color:       #ffb3c9;
    --expense-color:      #ff6b88;
    --deposit-color:      #b39dff;
    --debt-color:         #ffd39b;
    --accent-color:       #f9dbe8;
    --dark-color:         #000000;
    --shadow-sm: 0 2px 5px rgba(124, 73, 110, 0.12);
    --shadow-md: 0 4px 10px rgba(124, 73, 110, 0.18);
    --shadow-lg: 0 8px 24px rgba(124, 73, 110, 0.25);
    --an-primary-color:    var(--primary-color);
    --an-income-color:     var(--income-color);
    --an-expense-color:    var(--expense-color);
    --an-debt-color:       var(--debt-color);
    --an-secondary-color:  var(--secondary-color);
    --an-tertiary-color:   var(--tertiary-color);
    --an-accent-color:     var(--accent-color);
    --an-shadow-md:        0 4px 12px rgba(124, 73, 110, 0.2);
    --an-border-radius-md: var(--border-radius-md);
    #add-btn {
        background-color: var(--primary-color);
        color: #5b3256;
        box-shadow: 0 0 16px rgba(255, 155, 184, 0.55);
    }
    .tx-date{
        color: var(--secondary-color);
    }
    .analytics-slide h4 {
        color: var(--secondary-color);
    }
    .currency-chip {
        color: var(--bg-secondary-color);
        background: rgba(91, 50, 86, 0.08);
    }
    #month-filter-input {
        background-color: var(--income-color);
        color: #5b3256;
    }
    .category-select-button,
    .category-item {
        color: var(--secondary-color);
    }
    .chip-btn {
        color: var(--expense-color);
    }
    .chip-btn.active {
        color: var(--bg-secondary-color);
        background: var(--secondary-color);
    }
    body {
        background-color: var(--main-ground);
        color: var(--secondary-color);
    }
    main {
        background-color: var(--main-ground);
        background-image:
                radial-gradient(circle at top,    rgba(255, 155, 184, 0.20), transparent 55%),
                radial-gradient(circle at bottom, rgba(179, 157, 255, 0.18), transparent 60%),
                linear-gradient(135deg, #fff7f1 0%, #ffeef7 50%, #fff7f1 100%);
        background-size: cover;
        background-attachment: fixed;
    }
}
:root[data-theme="grape"] {
    --main-ground:        #0b070d;
    --tertiary-color:     #1b141f;
    --accent-color:       #8a6b99;
    --sidebar-bg:         #2d2233;
    --secondary-color:    #e9e2ef;
    --text-muted:         #afa4ba;
    --bg-secondary-color: #1a0f20;
    --primary-color:      #6d557a;
    --income-color:       #a986c1;
    --expense-color:      #e96888;
    --deposit-color:      #b59ade;
    --debt-color:         #ffcfa2;
    --dark-color:         #000000;
    --shadow-sm: 0 2px 6px rgba(0,0,0,0.45);
    --shadow-md: 0 4px 14px rgba(0,0,0,0.6), 0 0 14px rgba(138, 107, 153, 0.22);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.75), 0 0 32px rgba(138,107,153,0.28);
    --an-primary-color:     var(--primary-color);
    --an-income-color:      var(--income-color);
    --an-expense-color:     var(--expense-color);
    --an-debt-color:        var(--debt-color);
    --an-secondary-color:   var(--secondary-color);
    --an-tertiary-color:    #160c1a;
    --an-accent-color:      var(--accent-color);
    --an-shadow-md:         0 4px 16px rgba(138,107,153,0.2);
    --an-border-radius-md:  var(--border-radius-md);
    .currency-chip {
        background-color: rgba(45, 34, 51, 0.8);
        color: var(--secondary-color);
        backdrop-filter: blur(6px);
    }
    #add-btn {
        background: var(--accent-color);
        color: #fff;
        box-shadow: 0 0 16px rgba(138,107,153,0.4);
    }
    .category-select-button {
        background: var(--deposit-color) !important;
        color: var(--dark-color) !important;
        box-shadow: var(--shadow-sm);
    }
    .analytics-slide h4 {
        color: var(--secondary-color);
    }
    input, select, textarea {
        color: var(--secondary-color);
        background-color: var(--tertiary-color);
    }
    body, main {
        background-color: var(--main-ground);
        background-image:
                radial-gradient(circle at top,    rgba(138, 107, 153, 0.15), transparent 55%),
                radial-gradient(circle at bottom, rgba(138, 107, 153, 0.10), transparent 60%),
                linear-gradient(135deg, #0a060c 0%, #0d0911 50%, #0a060c 100%);
        background-size: cover;
        background-attachment: fixed;
    }
}
  :root[data-theme="blackberry"] {
    --main-ground:        #040209;
    --tertiary-color:     #0c091c;
    --accent-color:       #595aad;
    --sidebar-bg:         #141333;
    --secondary-color:    #f1f1f1;
    --text-muted:         #8e8ea0;
    --bg-secondary-color: #141333;
    --primary-color:      #595aad;
    --income-color:       #595aad;
    --expense-color:      #a44d66;
    --deposit-color:      #24245c;
    --debt-color:         #d18bff;
    --dark-color:         #000000;
    --shadow-sm: 0 2px 5px rgba(255,255,255,0.05);
    --shadow-md: 0 4px 8px rgba(0,0,0,0.4);
    --shadow-lg: 0 6px 20px rgba(0,0,0,0.6);
    --an-primary-color:    var(--primary-color);
    --an-income-color:     var(--income-color);
    --an-expense-color:    var(--expense-color);
    --an-debt-color:       var(--debt-color);
    --an-secondary-color:  var(--secondary-color);
    --an-tertiary-color:   var(--tertiary-color);
    --an-accent-color:     var(--accent-color);
    --an-shadow-md:        0 4px 12px rgba(255, 255, 255, 0.06);
    --an-border-radius-md: var(--border-radius-md);
    .currency-chip{
      background-color: var(--sidebar-bg);
      color: var(--secondary-color);
    }
      #transaction-list li.tx-item {
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        background: rgba(0, 0, 0, 0.1);
        box-shadow: 0 4px 16px rgba(0,0,0,0.5);
    }
    #add-btn {
      background-color: var(--primary-color);
      color: var(--secondary-color);
      box-shadow: var(--shadow-md);
    }
    .analytics-slide h4 {
        color: var(--secondary-color);
    }
    input, select, textarea {
      color: var(--secondary-color);
      background-color: var(--tertiary-color);
    }
    main {
        background-image:
        linear-gradient(rgba(0, 0, 0, 0.726), rgba(0, 0, 0, 0.5)),
        url('/assets/blackbberry-pattern.png');
        background-size: 300px;
        background-repeat: repeat;
        background-color: var(--main-ground);
      }
  }
  :root[data-theme="hookah"] {
    --main-ground:        #0d3a3a;
    --tertiary-color:     #123c42;
    --accent-color:       #8e24aa;
    --sidebar-bg:         #092d2d;
    --secondary-color:    #f0f0f0;
    --text-muted:         #a2bbc2;
    --bg-secondary-color: #0f4646;
    --primary-color:      #00ff88;
    --income-color:       #00e676;
    --expense-color:      #ff4d4d;
    --deposit-color:      #64b5f6;
    --debt-color:         #ffd54f;
    --dark-color:         #000000;
    --shadow-sm: 0 2px 5px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 6px 20px rgba(0, 0, 0, 0.6);
    --an-primary-color:    var(--primary-color);
    --an-income-color:     var(--income-color);
    --an-expense-color:    var(--expense-color);
    --an-debt-color:       var(--debt-color);
    --an-secondary-color:  var(--secondary-color);
    --an-tertiary-color:   var(--tertiary-color);
    --an-accent-color:     var(--accent-color);
    --an-shadow-md:        0 4px 12px rgba(0, 255, 136, 0.2);
    --an-border-radius-md: var(--border-radius-md);
    .currency-chip{
      background-color: var(--sidebar-bg);
      color: var(--secondary-color);
    }
    #add-btn, #add-budget-btn {
      background-color: var(--accent-color);
      color: var(--secondary-color);
      box-shadow: var(--shadow-md);
    }
    .analytics-slide h4 {
        color: var(--secondary-color);
    }
      #transaction-list li.tx-item {
          backdrop-filter: blur(4px);
          -webkit-backdrop-filter: blur(4px);
          background: rgba(0, 0, 0, 0.6);
          box-shadow: 0 4px 16px rgba(0,0,0,0.5);
      }
    input, select, textarea {
      color: var(--secondary-color);
      background-color: var(--tertiary-color);
    }
    main {
      background-image: linear-gradient(rgba(0, 0, 0, 0.726), rgba(0, 0, 0, 0.5)),
      url('/assets/hookah-pattern.png');
      background-size: 420px;
      background-repeat: repeat;
      background-color: var(--main-ground);
    }
  }
  :root[data-theme="trackit"] {
    --primary-color: #7228F5;
    --secondary-color: #A0FF00;
    --text-color: #FFFFFF;
    --button-text-color: #000000;
    --background-color: #1c1c24;
    --header-footer-color: var(--primary-color);
    --button-color: var(--secondary-color);
    --card-color: #2a2a33;
    --income-color: #a0ff00;
    --expense-color: #ff00ff;
    --deposit-color: #7228f5;
    --debt-color: #ffbb00;
    --tertiary-color: #0C0C0E;
    --main-ground: #1c1c24;
    --accent-color: #1E1E20;
    --sidebar-bg: #000000;
    --text-muted: #aaafb9;
    --bg-secondary-color: #000000;
    --dark-color: #000000;
    --shadow-sm: 0 2px 5px rgba(0,0,0,0.4);
    --shadow-md: 0 4px 8px rgba(0,0,0,0.5);
    --shadow-lg: 0 -2px 25px rgba(0,0,0,0.8);
    --an-primary-color: var(--primary-color);
    --an-income-color: var(--income-color);
    --an-expense-color: var(--expense-color);
    --an-debt-color: var(--debt-color);
    --an-secondary-color: var(--secondary-color);
    --an-tertiary-color: #111111;
    --an-accent-color: var(--accent-color);
    --an-shadow-md: 0 4px 12px rgba(0,0,0,0.5);
    --an-border-radius-md: 8px;
    .currency-chip{
      background-color: var(--sidebar-bg);
      color: var(--secondary-color);
    }
      .block-title {
          color: var(--secondary-color);
      }
    #add-btn {
      color: var(--button-text-color);
      background-color: var(--button-color);
    }
      .analytics-slide h4 {
      color: var(--text-color);
    }
    .theme-option:hover {
      color: var(--text-color);
    }
    input, select, textarea {
      color: var(--text-color);
    }
  }
:root[data-theme="sage"] {
    --main-ground:        #e8f0ea;
    --sidebar-bg:         #dfe9e3;
    --bg-secondary-color: #ffffff;
    --tertiary-color:     #d4e2da;
    --secondary-color:    #2e4237;
    --text-muted:         #7d9488;
    --primary-color:      #7bbf97;
    --income-color:       #9fd6b7;
    --expense-color:      #e88f8f;
    --deposit-color:      #8ea6d6;
    --debt-color:         #dab56f;
    --accent-color:       #cfe3d6;
    --dark-color:         #000;
    --shadow-sm: 0 2px 5px rgba(125,148,136,0.15);
    --shadow-md: 0 4px 12px rgba(125,148,136,0.25);
    --shadow-lg: 0 10px 28px rgba(125,148,136,0.28);
    --an-primary-color:   var(--primary-color);
    --an-income-color:    var(--income-color);
    --an-expense-color:   var(--expense-color);
    --an-debt-color:      var(--debt-color);
    --an-secondary-color: var(--secondary-color);
    --an-tertiary-color:  var(--tertiary-color);
    --an-accent-color:    #6aa783;
    --an-shadow-md:       0 4px 16px rgba(125,148,136,0.22);
    --an-border-radius-md: var(--border-radius-md);
    #add-btn {
        background-color: var(--primary-color);
        color: #163022;
        box-shadow: 0 0 14px rgba(123,191,151,0.4);
    }
    .tx-date {
        color: var(--secondary-color);
    }
    main {
        background-color: var(--main-ground);
        background-image:
                radial-gradient(circle at top, rgba(123,191,151,0.1), transparent 55%),
                radial-gradient(circle at bottom, rgba(123,191,151,0.08), transparent 60%);
    }
}
:root[data-theme="burgundy"] {
    --main-ground:        #12070a;
    --sidebar-bg:         #0d0507;
    --bg-secondary-color: #1b0a0f;
    --tertiary-color:     #2a0f18;
    --secondary-color:    #f9edf0;
    --text-muted:         #b69ca5;
    --primary-color:      #dc3355;
    --income-color:       #8fdcb4;
    --expense-color:      #ff5d7a;
    --deposit-color:      #e9c37f;
    --debt-color:         #d3a6ff;
    --accent-color:       #1f0c12;
    --dark-color:         #000000;
    --shadow-sm: 0 2px 6px rgba(0,0,0,0.5);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.7);
    --shadow-lg: 0 10px 24px rgba(0,0,0,0.85);
    --an-primary-color:    var(--primary-color);
    --an-income-color:     var(--income-color);
    --an-expense-color:    var(--expense-color);
    --an-debt-color:       var(--debt-color);
    --an-secondary-color:  var(--secondary-color);
    --an-tertiary-color:   var(--main-ground);
    --an-accent-color:     var(--accent-color);
    --an-shadow-md:        var(--shadow-md);
    --an-border-radius-md: var(--border-radius-md);
    .currency-chip {
        background: #1f0c12;
        color: var(--secondary-color);
    }
    #add-btn {
        background: var(--primary-color);
        color: #fff;
        box-shadow: 0 8px 22px rgba(190,24,60,.45);
    }
    .add-btn,
    .chip-btn.active,
    #add-budget-btn {
        background: var(--primary-color);
        color: #fff;
    }
    #transaction-list li.tx-item, .bi-kpi-row .bi-kpi, .bi-health, .bi-cards .bi-card, .open-subpage-btn, .theme-option {
        background: #1f0c12;
        box-shadow: var(--shadow-sm);
        backdrop-filter: none;
    }
    #month-picker-btn,
    .month-item {
        background-color: var(--accent-color);
        color: var(--secondary-color);
    }
    .month-item.active {
        background-color: var(--primary-color);
    }
    input,
    select,
    textarea {
        color: var(--secondary-color);
        background-color: var(--tertiary-color);
    }
    .analytics-slide h4 {
        color: var(--secondary-color);
    }
    main {
        background-color: var(--main-ground);
        background-image:
                radial-gradient(circle at top, rgba(168,28,62,0.18), transparent 60%),
                linear-gradient(135deg, #0a0507 0%, #0f0a0d 50%, #080405 100%);
    }
}
:root:not([data-theme]) .planner-quick-create-btn,
:root:not([data-theme]) .planner-stat-card,
:root:not([data-theme]) .planner-mini-card,
:root:not([data-theme]) .planner-section-card,
:root:not([data-theme]) .planner-insight-card,
:root:not([data-theme]) .planner-day-card,
:root[data-theme="light"] .planner-stat-card,
:root[data-theme="light"] .planner-mini-card,
:root[data-theme="light"] .planner-section-card,
:root[data-theme="light"] .planner-insight-card,
:root[data-theme="light"] .planner-day-card,
:root[data-theme="dolphin"] .planner-stat-card,
:root[data-theme="dolphin"] .planner-mini-card,
:root[data-theme="dolphin"] .planner-section-card,
:root[data-theme="dolphin"] .planner-insight-card,
:root[data-theme="dolphin"] .planner-day-card,
:root[data-theme="sage"] .planner-stat-card,
:root[data-theme="sage"] .planner-mini-card,
:root[data-theme="sage"] .planner-section-card,
:root[data-theme="sage"] .planner-insight-card,
:root[data-theme="sage"] .planner-day-card,
:root[data-theme="yogurt"] .planner-stat-card,
:root[data-theme="yogurt"] .planner-mini-card,
:root[data-theme="yogurt"] .planner-section-card,
:root[data-theme="yogurt"] .planner-insight-card,
:root[data-theme="yogurt"] .planner-day-card {
    background: var(--tertiary-color);
    color: var(--secondary-color);
    border-color: var(--border-color);
}
.bi-kpi,
.bi-health,
.bi-card {
    border-color: var(--border-color);
}
:root:not([data-theme]) .bi-kpi,
:root:not([data-theme]) .bi-health,
:root:not([data-theme]) .bi-card,
:root[data-theme="light"] .bi-kpi,
:root[data-theme="light"] .bi-health,
:root[data-theme="light"] .bi-card,
:root[data-theme="dolphin"] .bi-kpi,
:root[data-theme="dolphin"] .bi-health,
:root[data-theme="dolphin"] .bi-card,
:root[data-theme="sage"] .bi-kpi,
:root[data-theme="sage"] .bi-health,
:root[data-theme="sage"] .bi-card,
:root[data-theme="yogurt"] .bi-kpi,
:root[data-theme="yogurt"] .bi-health,
:root[data-theme="yogurt"] .bi-card {
    border-color: color-mix(in srgb, var(--secondary-color) 13%, transparent);
}
:root[data-theme="dolphin"] .add-btn,
:root[data-theme="dolphin"] #add-btn,
:root[data-theme="sage"] .add-btn,
:root[data-theme="sage"] #add-btn,
:root[data-theme="yogurt"] .add-btn,
:root[data-theme="yogurt"] #add-btn {
    color: var(--tertiary-color);
}
:root[data-theme="tiffany"] {
    --main-ground:        #031416;
    --sidebar-bg:         #031416;
    --bg-secondary-color: #082123;
    --tertiary-color:     #0d2e30;
    --secondary-color:    #effffd;
    --text-muted:         #86b5b1;
    --border-color:       rgba(170, 255, 246, 0.15);
    --primary-color:      #81d8d0;
    --income-color:       #7be8a8;
    --expense-color:      #ff7b8c;
    --deposit-color:      #efdcae;
    --debt-color:         #ffb27d;
    --accent-color:       #0a2a2c;
    --dark-color:         #000000;
    --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.55), 0 0 14px rgba(129, 216, 208, 0.18);
    --shadow-lg: 0 10px 28px rgba(0, 0, 0, 0.75), 0 0 24px rgba(129, 216, 208, 0.24);
    --an-primary-color:    #81d8d0;
    --an-income-color:     #7be8a8;
    --an-expense-color:    #ff7b8c;
    --an-debt-color:       #ffb27d;
    --an-secondary-color:  #effffd;
    --an-tertiary-color:   #031416;
    --an-accent-color:     #0a2a2c;
    --an-shadow-md:        0 4px 16px rgba(129, 216, 208, 0.28);
    --an-border-radius-md: var(--border-radius-md);
}
/* ── 11-theme-fixes.css ── */
:root {
    --text: var(--secondary-color);
    --text-muted: color-mix(in srgb, var(--secondary-color) 58%, transparent);
    --border-color: color-mix(in srgb, var(--secondary-color) 14%, transparent);
    --input-bg: var(--tertiary-color);
    --card-bg: var(--tertiary-color);
}
:root:not([data-theme]),
:root[data-theme="light"],
:root[data-theme="dolphin"],
:root[data-theme="sage"],
:root[data-theme="yogurt"] {
    --text: var(--secondary-color);
    --text-muted: color-mix(in srgb, var(--secondary-color) 55%, transparent);
    --border-color: color-mix(in srgb, var(--secondary-color) 14%, transparent);
    --input-bg: color-mix(in srgb, var(--tertiary-color) 82%, var(--main-ground));
    --card-bg: var(--tertiary-color);
}
input,
select,
textarea {
    color: var(--secondary-color);
}
input::placeholder,
textarea::placeholder {
    color: var(--text-muted);
    opacity: 1;
}
.ei-feature-title,
.ei-map-label,
.ei-preview-table td,
.ei-done-text,
.eip-stat-value,
.eip-chart-title,
.eip-budgets-title,
.eip-action-text b {
    color: var(--secondary-color);
}
.ei-feature-desc,
.ei-inst-body > p,
.ei-inst-source,
.ei-desc-hint,
.ei-preview-table th,
.ei-more-rows,
.eip-stat-label,
.eip-chart-total,
.eip-action-text small {
    color: var(--text-muted);
}
.bi-kpi,
.bi-health,
.bi-card {
    border-color: var(--border-color);
}
:root:not([data-theme]) .bi-kpi,
:root:not([data-theme]) .bi-health,
:root:not([data-theme]) .bi-card,
:root[data-theme="light"] .bi-kpi,
:root[data-theme="light"] .bi-health,
:root[data-theme="light"] .bi-card,
:root[data-theme="dolphin"] .bi-kpi,
:root[data-theme="dolphin"] .bi-health,
:root[data-theme="dolphin"] .bi-card,
:root[data-theme="sage"] .bi-kpi,
:root[data-theme="sage"] .bi-health,
:root[data-theme="sage"] .bi-card,
:root[data-theme="yogurt"] .bi-kpi,
:root[data-theme="yogurt"] .bi-health,
:root[data-theme="yogurt"] .bi-card {
    border-color: color-mix(in srgb, var(--secondary-color) 13%, transparent);
}
:root:not([data-theme]) .planner-stat-card,
:root:not([data-theme]) .planner-mini-card,
:root:not([data-theme]) .planner-section-card,
:root:not([data-theme]) .planner-insight-card,
:root:not([data-theme]) .planner-day-card,
:root[data-theme="light"] .planner-stat-card,
:root[data-theme="light"] .planner-mini-card,
:root[data-theme="light"] .planner-section-card,
:root[data-theme="light"] .planner-insight-card,
:root[data-theme="light"] .planner-day-card,
:root[data-theme="light-classic"] .planner-stat-card,
:root[data-theme="light-classic"] .planner-mini-card,
:root[data-theme="light-classic"] .planner-section-card,
:root[data-theme="light-classic"] .planner-insight-card,
:root[data-theme="light-classic"] .planner-day-card,
:root[data-theme="dolphin"] .planner-stat-card,
:root[data-theme="dolphin"] .planner-mini-card,
:root[data-theme="dolphin"] .planner-section-card,
:root[data-theme="dolphin"] .planner-insight-card,
:root[data-theme="dolphin"] .planner-day-card,
:root[data-theme="sage"] .planner-stat-card,
:root[data-theme="sage"] .planner-mini-card,
:root[data-theme="sage"] .planner-section-card,
:root[data-theme="sage"] .planner-insight-card,
:root[data-theme="sage"] .planner-day-card,
:root[data-theme="yogurt"] .planner-stat-card,
:root[data-theme="yogurt"] .planner-mini-card,
:root[data-theme="yogurt"] .planner-section-card,
:root[data-theme="yogurt"] .planner-insight-card,
:root[data-theme="yogurt"] .planner-day-card {
    background: var(--tertiary-color);
    color: var(--secondary-color);
    border-color: var(--border-color);
}
.search-input {
    color: var(--secondary-color);
}
.search-input::placeholder {
    color: var(--text-muted);
    opacity: 1;
}
:root[data-theme="dolphin"] .add-btn,
:root[data-theme="dolphin"] #add-btn,
:root[data-theme="sage"] .add-btn,
:root[data-theme="sage"] #add-btn,
:root[data-theme="yogurt"] .add-btn,
:root[data-theme="yogurt"] #add-btn {
    color: var(--secondary-color);
}
:root:not([data-theme]) .planner-dropdown-trigger,
:root[data-theme="dolphin"] .planner-dropdown-trigger,
:root[data-theme="sage"] .planner-dropdown-trigger,
:root[data-theme="yogurt"] .planner-dropdown-trigger {
    border-color: var(--border-color);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}
:root:not([data-theme]) .planner-dropdown-trigger.is-open,
:root[data-theme="dolphin"] .planner-dropdown-trigger.is-open,
:root[data-theme="sage"] .planner-dropdown-trigger.is-open,
:root[data-theme="yogurt"] .planner-dropdown-trigger.is-open {
    border-color: color-mix(in srgb, var(--secondary-color) 25%, transparent);
}
:root:not([data-theme]) .planner-dropdown-menu,
:root[data-theme="dolphin"] .planner-dropdown-menu,
:root[data-theme="sage"] .planner-dropdown-menu,
:root[data-theme="yogurt"] .planner-dropdown-menu {
    border-color: var(--border-color);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
:root:not([data-theme]) .planner-dropdown-divider,
:root[data-theme="dolphin"] .planner-dropdown-divider,
:root[data-theme="sage"] .planner-dropdown-divider,
:root[data-theme="yogurt"] .planner-dropdown-divider {
    background: var(--border-color);
}
:root:not([data-theme]) .planner-dropdown-item,
:root:not([data-theme]) .planner-dropdown-create,
:root[data-theme="dolphin"] .planner-dropdown-item,
:root[data-theme="dolphin"] .planner-dropdown-create,
:root[data-theme="sage"] .planner-dropdown-item,
:root[data-theme="sage"] .planner-dropdown-create,
:root[data-theme="yogurt"] .planner-dropdown-item,
:root[data-theme="yogurt"] .planner-dropdown-create {
    background: color-mix(in srgb, var(--secondary-color) 5%, transparent);
    color: var(--secondary-color);
}
:root:not([data-theme]) .planner-dropdown-item:hover,
:root:not([data-theme]) .planner-dropdown-create:hover,
:root[data-theme="dolphin"] .planner-dropdown-item:hover,
:root[data-theme="dolphin"] .planner-dropdown-create:hover,
:root[data-theme="sage"] .planner-dropdown-item:hover,
:root[data-theme="sage"] .planner-dropdown-create:hover,
:root[data-theme="yogurt"] .planner-dropdown-item:hover,
:root[data-theme="yogurt"] .planner-dropdown-create:hover {
    background: color-mix(in srgb, var(--secondary-color) 9%, transparent);
}
:root:not([data-theme]) .planner-form-sheet .input,
:root:not([data-theme]) .planner-form-sheet select,
:root:not([data-theme]) .planner-form-sheet input,
:root[data-theme="dolphin"] .planner-form-sheet .input,
:root[data-theme="dolphin"] .planner-form-sheet select,
:root[data-theme="dolphin"] .planner-form-sheet input,
:root[data-theme="sage"] .planner-form-sheet .input,
:root[data-theme="sage"] .planner-form-sheet select,
:root[data-theme="sage"] .planner-form-sheet input,
:root[data-theme="yogurt"] .planner-form-sheet .input,
:root[data-theme="yogurt"] .planner-form-sheet select,
:root[data-theme="yogurt"] .planner-form-sheet input {
    border-color: var(--border-color);
    background: var(--input-bg);
    color: var(--secondary-color);
}
:root:not([data-theme]) .planner-period-chip,
:root[data-theme="dolphin"] .planner-period-chip,
:root[data-theme="sage"] .planner-period-chip,
:root[data-theme="yogurt"] .planner-period-chip {
    border-color: var(--border-color);
    color: var(--secondary-color);
}
:root:not([data-theme]) .planner-form-section,
:root[data-theme="dolphin"] .planner-form-section,
:root[data-theme="sage"] .planner-form-section,
:root[data-theme="yogurt"] .planner-form-section {
    background: color-mix(in srgb, var(--secondary-color) 3%, transparent);
    border-color: var(--border-color);
}
:root:not([data-theme]) .planner-inline-add,
:root[data-theme="dolphin"] .planner-inline-add,
:root[data-theme="sage"] .planner-inline-add,
:root[data-theme="yogurt"] .planner-inline-add {
    background: color-mix(in srgb, var(--secondary-color) 6%, transparent);
    color: var(--secondary-color);
}
:root:not([data-theme]) .planner-secondary-btn,
:root[data-theme="dolphin"] .planner-secondary-btn,
:root[data-theme="sage"] .planner-secondary-btn,
:root[data-theme="yogurt"] .planner-secondary-btn {
    background: color-mix(in srgb, var(--secondary-color) 6%, transparent);
    color: var(--secondary-color);
}
:root:not([data-theme]) .planner-stat-value,
:root:not([data-theme]) .planner-mini-value,
:root:not([data-theme]) .planner-section-title,
:root:not([data-theme]) .planner-list-name,
:root:not([data-theme]) .planner-list-amount,
:root:not([data-theme]) .planner-insight-title,
:root:not([data-theme]) .planner-day-title,
:root:not([data-theme]) .planner-days-title,
:root:not([data-theme]) .planner-day-balance,
:root[data-theme="dolphin"] .planner-stat-value,
:root[data-theme="dolphin"] .planner-mini-value,
:root[data-theme="dolphin"] .planner-section-title,
:root[data-theme="dolphin"] .planner-list-name,
:root[data-theme="dolphin"] .planner-list-amount,
:root[data-theme="dolphin"] .planner-insight-title,
:root[data-theme="dolphin"] .planner-day-title,
:root[data-theme="dolphin"] .planner-days-title,
:root[data-theme="dolphin"] .planner-day-balance,
:root[data-theme="sage"] .planner-stat-value,
:root[data-theme="sage"] .planner-mini-value,
:root[data-theme="sage"] .planner-section-title,
:root[data-theme="sage"] .planner-list-name,
:root[data-theme="sage"] .planner-list-amount,
:root[data-theme="sage"] .planner-insight-title,
:root[data-theme="sage"] .planner-day-title,
:root[data-theme="sage"] .planner-days-title,
:root[data-theme="sage"] .planner-day-balance,
:root[data-theme="yogurt"] .planner-stat-value,
:root[data-theme="yogurt"] .planner-mini-value,
:root[data-theme="yogurt"] .planner-section-title,
:root[data-theme="yogurt"] .planner-list-name,
:root[data-theme="yogurt"] .planner-list-amount,
:root[data-theme="yogurt"] .planner-insight-title,
:root[data-theme="yogurt"] .planner-day-title,
:root[data-theme="yogurt"] .planner-days-title,
:root[data-theme="yogurt"] .planner-day-balance {
    color: var(--secondary-color);
}
:root:not([data-theme]) .planner-today-badge,
:root[data-theme="dolphin"] .planner-today-badge,
:root[data-theme="sage"] .planner-today-badge,
:root[data-theme="yogurt"] .planner-today-badge {
    color: color-mix(in srgb, #18c964 20%, #002210);
}
:root:not([data-theme]) .planner-section-count,
:root[data-theme="dolphin"] .planner-section-count,
:root[data-theme="sage"] .planner-section-count,
:root[data-theme="yogurt"] .planner-section-count {
    background: color-mix(in srgb, var(--secondary-color) 7%, transparent);
    color: var(--secondary-color);
}
:root:not([data-theme]) .planner-list-row,
:root[data-theme="dolphin"] .planner-list-row,
:root[data-theme="sage"] .planner-list-row,
:root[data-theme="yogurt"] .planner-list-row {
    background: color-mix(in srgb, var(--secondary-color) 3%, transparent);
    border-color: var(--border-color);
}
:root:not([data-theme]) .planner-list-empty,
:root[data-theme="dolphin"] .planner-list-empty,
:root[data-theme="sage"] .planner-list-empty,
:root[data-theme="yogurt"] .planner-list-empty {
    background: color-mix(in srgb, var(--secondary-color) 2%, transparent);
    border-color: var(--border-color);
}
:root:not([data-theme]) .planner-day-metric,
:root[data-theme="dolphin"] .planner-day-metric,
:root[data-theme="sage"] .planner-day-metric,
:root[data-theme="yogurt"] .planner-day-metric {
    background: color-mix(in srgb, var(--secondary-color) 4%, transparent);
    border-color: var(--border-color);
}
:root:not([data-theme]) .planner-day-hint,
:root[data-theme="dolphin"] .planner-day-hint,
:root[data-theme="sage"] .planner-day-hint,
:root[data-theme="yogurt"] .planner-day-hint {
    background: color-mix(in srgb, var(--secondary-color) 4%, transparent);
    border-color: var(--border-color);
    color: var(--secondary-color);
}
:root:not([data-theme]) .planner-day-extra span,
:root[data-theme="dolphin"] .planner-day-extra span,
:root[data-theme="sage"] .planner-day-extra span,
:root[data-theme="yogurt"] .planner-day-extra span {
    background: color-mix(in srgb, var(--secondary-color) 5%, transparent);
    border-color: var(--border-color);
    color: var(--secondary-color);
}
:root:not([data-theme]) .planner-insight-icon,
:root[data-theme="dolphin"] .planner-insight-icon,
:root[data-theme="sage"] .planner-insight-icon,
:root[data-theme="yogurt"] .planner-insight-icon {
    background: color-mix(in srgb, var(--secondary-color) 6%, transparent);
}
:root:not([data-theme]) .budget-item {
    background: var(--main-ground);
    border: 1px solid var(--border-color);
}
:root:not([data-theme]) #planner-quick-create-btn,
:root[data-theme="dolphin"] #planner-quick-create-btn,
:root[data-theme="sage"] #planner-quick-create-btn,
:root[data-theme="yogurt"] #planner-quick-create-btn,
:root:not([data-theme]) .planner-sheet-actions [type="submit"],
:root[data-theme="dolphin"] .planner-sheet-actions [type="submit"],
:root[data-theme="sage"] .planner-sheet-actions [type="submit"],
:root[data-theme="yogurt"] .planner-sheet-actions [type="submit"] {
    color: #fff;
}
:root:not([data-theme]) .planner-period-chip,
:root[data-theme="dolphin"] .planner-period-chip,
:root[data-theme="sage"] .planner-period-chip,
:root[data-theme="yogurt"] .planner-period-chip {
    background: var(--main-ground);
}
:root:not([data-theme]) #planner-sheet-close,
:root[data-theme="dolphin"] #planner-sheet-close,
:root[data-theme="sage"] #planner-sheet-close,
:root[data-theme="yogurt"] #planner-sheet-close {
    background: color-mix(in srgb, var(--secondary-color) 8%, transparent);
    color: var(--secondary-color);
}
:root:not([data-theme]) .planner-stat-card {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--primary-color) 4%, var(--tertiary-color)) 0%,
        var(--tertiary-color) 100%
    );
}
/* ── 20-glass.css ── */
@font-face {
  font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url('/assets/fonts/manrope-cyrillic-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url('/assets/fonts/manrope-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Unbounded'; font-style: normal; font-weight: 200 900; font-display: swap;
  src: url('/assets/fonts/unbounded-cyrillic-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Unbounded'; font-style: normal; font-weight: 200 900; font-display: swap;
  src: url('/assets/fonts/unbounded-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  --font-ui:  'Manrope', 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-num: 'Unbounded', 'Manrope', system-ui, sans-serif;
  --canvas: #04070a;  --bg: #070b10;
  --orb1: rgba(38,110,130,.55);  --orb2: rgba(120,28,58,.45);  --orb3: rgba(61,255,160,.12);
  --glass: rgba(255,255,255,.05);  --glass2: rgba(255,255,255,.09);
  --stroke: rgba(255,255,255,.09);  --hi: rgba(255,255,255,.08);
  --sticky: rgba(7,11,16,.62);
  --text: #eaf0f6;  --muted: #8d99a8;
  --faint: rgba(255,255,255,.07);  --chip: rgba(255,255,255,.10);
  --accent: #3dffa0;  --ink: #03140b;
  --in: #3ddc97;  --out: #ff6b7d;  --save: #a593ff;  --debt: #ffb366;
  --r-sheet: 32px;  --r-card-xl: 26px;  --r-card: 22px;  --r-tile: 18px;  --r-field: 16px;
  --tap-min: 44px;
  --ease-sheet: cubic-bezier(.2,.8,.2,1);
}
.glass {
  background: var(--glass);
  border: 1px solid var(--stroke);
  box-shadow: inset 0 1px 0 var(--hi);
  -webkit-backdrop-filter: blur(24px) saturate(170%);
  backdrop-filter: blur(24px) saturate(170%);
}
.sheet {
  background: var(--sticky);
  border-top: 1px solid var(--stroke);
  border-radius: var(--r-sheet) var(--r-sheet) 0 0;
  box-shadow: inset 0 1px 0 var(--hi), 0 -20px 60px rgba(0, 0, 0, .4);
  -webkit-backdrop-filter: blur(36px) saturate(180%);
  backdrop-filter: blur(36px) saturate(180%);
}
.num    { font-variant-numeric: tabular-nums; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass   { background: color-mix(in srgb, var(--bg) 80%, white 8%); }
  .sheet { background: var(--bg); }
}
@media (prefers-reduced-transparency: reduce) {
  .glass { -webkit-backdrop-filter: none; backdrop-filter: none; background: color-mix(in srgb, var(--bg) 85%, white 6%); }
}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}
:root.low-fx .glass { -webkit-backdrop-filter: none; backdrop-filter: none; }
#transaction-list li.tx-day-head {
    position: sticky;
    top: var(--header-h, -7px);
    z-index: 5;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 8px;
    padding: 8px 12px;
    list-style: none;
    border-radius: 12px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--muted, var(--secondary-color));
    background: var(--sticky, var(--main-ground, rgba(0,0,0,.55)));
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    backdrop-filter: blur(14px) saturate(1.2);
}
#transaction-list li.tx-day-head .tx-day-label { text-transform: capitalize; }
#transaction-list li.tx-day-head .tx-day-total { font-family: var(--font-num, inherit); font-variant-numeric: tabular-nums; }
#transaction-list li.tx-day-head .tx-day-total.pos { color: var(--in, #27AE60); }
#transaction-list li.tx-day-head .tx-day-total.neg { color: var(--out, #ff4b5c); }
#region-grid {margin-top: 50px;}
.summary-block.is-active-filter {
    outline: 2px solid var(--accent, var(--primary-color));
    outline-offset: -2px;
}
#transactions-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#transactions-header.hidden { display: none; }
.clear-filter-chip {
    border: 1px solid var(--stroke, rgba(255,255,255,.18));
    background: var(--chip, rgba(255,255,255,.08));
    color: var(--text, inherit);
    font: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 999px;
    cursor: pointer;
}
#summary-blocks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 4px 0 14px;
}
#summary-blocks .summary-block {
    width: auto;
    min-width: 0;
    flex: none;
    position: relative;
    padding: 14px;
    border-radius: var(--r-card, 20px);
    background: var(--glass2, var(--tertiary-color));
    border: 1px solid var(--stroke, rgba(255,255,255,.12));
    box-shadow: inset 0 1px 0 var(--hi, rgba(255,255,255,.08));
    -webkit-backdrop-filter: blur(24px) saturate(170%);
    backdrop-filter: blur(24px) saturate(170%);
    cursor: pointer;
    transition: background .2s, border-color .2s;
}
#summary-blocks .summary-block::before { display: none; }
#summary-blocks .summary-block.full,
#summary-blocks .summary-block#block-budget { grid-column: 1 / -1; }
#summary-blocks .block-title {
    justify-content: flex-start;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--muted, var(--secondary-color));
}
#summary-blocks .block-title .emoji { margin-left: auto; font-size: 1rem; opacity: .85; }
#summary-blocks .summary-block.half .block-title::before {
    content: '';
    flex: none;
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--dot, currentColor);
}
#block-income  { --dot: var(--in, var(--income-color)); }
#block-expense { --dot: var(--out, var(--expense-color)); }
#block-deposit { --dot: var(--save, var(--deposit-color)); }
#block-debt    { --dot: var(--debt, var(--debt-color)); }
#summary-blocks .summary-block.half .block-value {
    font-family: var(--font-num, inherit);
    font-variant-numeric: tabular-nums;
    font-size: 17px;
    font-weight: 800;
    margin-top: 6px;
    color: var(--text, inherit);
}
#summary-blocks #block-budget {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    padding: 14px 6px 4px;
    cursor: default;
}
#summary-blocks #block-budget .block-title { font-size: 14px; }
#summary-blocks #block-budget .block-value {
    font-family: var(--font-num, inherit);
    font-variant-numeric: tabular-nums;
    font-size: 38px;
    font-weight: 600;
    letter-spacing: -.03em;
    white-space: nowrap;
    margin-top: 6px;
    color: var(--text, var(--primary-color));
}
#summary-blocks .summary-block.is-active-filter {
    background: var(--glass, var(--glass2));
    border-color: var(--accent, var(--primary-color));
    outline: none;
}
.akulka-card {
    position: relative;
    margin: 6px 0 18px;
    padding: 16px 16px 16px 112px;
    min-height: 92px;
    border-radius: 24px;
    background: var(--glass2, var(--tertiary-color));
    border: 1px solid var(--stroke, rgba(255,255,255,.12));
    box-shadow: inset 0 1px 0 var(--hi, rgba(255,255,255,.08));
    -webkit-backdrop-filter: blur(24px) saturate(170%);
    backdrop-filter: blur(24px) saturate(170%);
    --mood: var(--in, #27AE60);
}
.akulka-card[data-mood="note"] { --mood: var(--debt, #F1C40F); }
.akulka-card[data-mood="warn"] { --mood: #ff9f43; }
.akulka-card[data-mood="bad"]  { --mood: var(--out, #ff4b5c); }
.akulka-card img {
    position: absolute;
    left: -4px; bottom: 0;
    width: 116px; height: 116px;
    object-fit: contain;
    transform-origin: 50% 90%;
    pointer-events: none;
}
.akulka-card .ak-title { font-size: 13px; font-weight: 800; color: var(--mood); }
.akulka-card .ak-text { font-size: 14px; line-height: 1.4; margin-top: 4px; color: var(--text, inherit); }
.akulka-card .ak-bar { height: 6px; border-radius: 3px; background: var(--faint, rgba(255,255,255,.1)); margin-top: 10px; overflow: hidden; }
.akulka-card .ak-bar span { display: block; height: 100%; width: 0; border-radius: 3px; background: var(--mood); transition: width .5s; }
header {
    background: var(--sticky, rgba(0,0,0,.6));
    -webkit-backdrop-filter: blur(20px) saturate(170%);
    backdrop-filter: blur(20px) saturate(170%);
    border-bottom: 1px solid var(--stroke, rgba(255,255,255,.06));
}
header .month-picker-btn,
header .search-open-btn {
    height: 38px;
    border-radius: 19px;
    border: 1px solid var(--stroke, rgba(255,255,255,.12));
    background: var(--glass2, var(--tertiary-color));
    color: var(--text, var(--secondary-color));
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    font-weight: 700;
}
header .month-picker-btn { padding: 0 14px; font-size: 14px; }
header .search-open-btn { width: 38px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
header .header-button { gap: 8px; }
.liquid-nav {
    min-height: 64px;
    border-radius: 32px;
    background: var(--glass2, rgba(0,0,0,.28));
    border: 1px solid var(--stroke, rgba(255,255,255,.10));
    box-shadow: 0 10px 34px rgba(0,0,0,.28), inset 0 1px 0 var(--hi, rgba(255,255,255,.12));
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    backdrop-filter: blur(28px) saturate(180%);
}
.fab-btn {
    width: 64px;
    height: 64px;
    background: var(--accent, var(--primary-color));
    color: var(--ink, var(--secondary-color));
    box-shadow: 0 10px 28px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.25);
}
.bottom-sheet:not(.fullscreen-sheet) {
    background: var(--sticky, var(--tertiary-color));
    border-radius: var(--r-sheet, 32px) var(--r-sheet, 32px) 0 0;
    border: 1px solid var(--stroke, rgba(255,255,255,.08));
    border-bottom: none;
    box-shadow: 0 -18px 50px rgba(0,0,0,.45), inset 0 1px 0 var(--hi, rgba(255,255,255,.1));
    -webkit-backdrop-filter: blur(36px) saturate(180%);
    backdrop-filter: blur(36px) saturate(180%);
    padding-top: 22px;
}
#bottom-sheet-backdrop { background: rgba(0,0,0,.45); }
.bottom-sheet:not(.fullscreen-sheet) input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]),
.bottom-sheet:not(.fullscreen-sheet) select {
    min-height: 52px;
    border-radius: var(--r-field, 16px);
    background: var(--faint, rgba(255,255,255,.08));
    border: 1px solid var(--stroke, rgba(255,255,255,.1));
    color: var(--text, inherit);
}
.bottom-sheet:not(.fullscreen-sheet) .add-btn {
    min-height: 56px;
    border-radius: 28px;
    background: var(--accent, var(--primary-color));
    color: var(--ink, #fff);
    font-weight: 800;
    border: none;
}
.bottom-sheet:not(.fullscreen-sheet) .close-form {
    min-height: 48px;
    border-radius: 24px;
    background: var(--faint, rgba(255,255,255,.08));
    color: var(--text, inherit);
    border: none;
}
.bottom-sheet:not(.fullscreen-sheet) .chip-btn {
    min-height: 36px;
    border-radius: 999px;
    background: var(--chip, var(--faint, rgba(255,255,255,.08)));
    border: 1px solid var(--stroke, transparent);
    color: var(--text, inherit);
}
.bottom-sheet:not(.fullscreen-sheet) .chip-btn.active {
    background: var(--accent, var(--primary-color));
    color: var(--ink, #fff);
    border-color: transparent;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .bottom-sheet:not(.fullscreen-sheet) { background: var(--tertiary-color); }
}
.quick-picks { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
.quick-picks[hidden] { display: none; }
.quick-picks .quick-chip { padding: 0 12px; font-size: 13px; font-weight: 700; }
#fx-sheet .sheet-title-row, #transaction-sheet .sheet-title-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 4px 10px;
}
#transaction-sheet .sheet-title { font-size: 20px; font-weight: 800; color: var(--text, inherit); }
.sheet-x {
    border-radius: 17px; border: none; cursor: pointer;
    background: var(--chip, rgba(255,255,255,.1)); color: var(--secondary-color); font-size: 15px;
}
#transaction-sheet .transaction-type-chips {
    display: flex; gap: 4px; padding: 4px; margin: 4px 0 0;
    border-radius: 18px; background: var(--faint, rgba(255,255,255,.07));
    overflow-x: auto; scrollbar-width: none;
}
#transaction-sheet .transaction-type-chips .chip-btn {
    flex: 1 0 auto; min-height: 38px; padding: 0 12px;
    border: none; border-radius: 14px; background: transparent;
    font-size: 13px; font-weight: 800; color: var(--muted, inherit);
}
#transaction-sheet .transaction-type-chips .chip-btn.active {
    background: var(--accent, var(--primary-color)); color: var(--ink, #fff);
    box-shadow: 0 2px 10px rgba(0,0,0,.25);
}
#transaction-sheet .transaction-form:not(.hidden) { display: flex; flex-direction: column; padding-top: 6px; }
#transaction-sheet .transaction-form > * { order: 5; }
#transaction-sheet .transaction-form > label {
    font-size: 12px; font-weight: 700; color: var(--muted, inherit);
    padding: 12px 4px 6px; margin: 0;
}
#transaction-sheet .transaction-form > label[for$="-amount"] {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
}
#transaction-sheet .amount-row > input[id$="-amount"] {
    flex: 1; min-width: 0; width: auto;
    min-height: 64px; margin: 0;
    border: none; background: transparent; box-shadow: none; outline: none;
    text-align: center;
    font-family: var(--font-num, inherit); font-size: 40px; font-weight: 600; letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
    color: var(--text, inherit);
}
#transaction-sheet #income-form .amount-row > input { color: var(--in, #27AE60); }
#transaction-sheet #debt-form .amount-row > input   { color: var(--debt, inherit); }
#transaction-sheet #deposit-form .amount-row > input { color: var(--save, inherit); }
#transaction-sheet .transaction-form > label[for$="-category"] { order: 2; }
#transaction-sheet .transaction-form > .category-select-container { order: 3; }
#transaction-sheet .transaction-form > .quick-cats { order: 4; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
#transaction-sheet .quick-cats .quick-chip { flex: none; white-space: nowrap; }
#transaction-sheet .category-select-button {
    width: 100%; min-height: 54px; border-radius: 16px; text-align: left; padding: 0 14px;
    background: var(--faint, rgba(255,255,255,.07)); border: 1px solid var(--stroke, rgba(255,255,255,.1));
    color: var(--text, inherit); font-size: 15px; font-weight: 700;
}
#transaction-sheet .transaction-form > input[type=date] { min-height: 50px; }
#transaction-sheet .transaction-form > .add-btn { order: 20; min-height: 58px; border-radius: 29px; margin-top: 18px; font-size: 17px; }
#transaction-sheet .transaction-form > .close-form { display: none; }
#transaction-sheet .quick-picks .quick-chip {
    flex: 0 0 auto; width: auto; min-width: 0; min-height: 34px; height: 34px;
    display: inline-flex; flex-direction: row; align-items: center; gap: 6px;
    padding: 0 12px; font-size: 13px; font-weight: 700; line-height: 1; white-space: nowrap;
}
#transaction-sheet #debt-form > label[for="debt-direction"] { display: none; }
#transaction-sheet #debt-form > .category-select-container { order: 6; margin-top: 12px; }
#transaction-sheet #add-product {
    order: 8; min-height: 48px; margin-top: 10px; border-radius: 16px;
    background: transparent; border: 1px dashed var(--stroke, rgba(255,255,255,.2));
    color: var(--accent, var(--primary-color)); font-weight: 800; font-size: 14px;
}
.bottom-sheet:not(.fullscreen-sheet) .add-btn {
    background: var(--accent, var(--primary-color)) !important;
    color: var(--ink, #fff) !important;
    border: none !important;
    box-shadow: 0 8px 22px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.25) !important;
}
.bottom-sheet:not(.fullscreen-sheet) .close-form,
#transaction-sheet .category-select-button {
    background: var(--faint, rgba(255,255,255,.08)) !important;
    color: var(--text, inherit) !important;
}
#transaction-sheet .category-select-button { border: 1px solid var(--stroke, rgba(255,255,255,.1)) !important; box-shadow: none !important; }
.bottom-sheet:not(.fullscreen-sheet) .chip-btn:not(.active) {
    background: var(--chip, rgba(255,255,255,.08)) !important;
    color: var(--text, inherit) !important;
}
.bottom-sheet:not(.fullscreen-sheet) .chip-btn.active {
    background: var(--accent, var(--primary-color)) !important;
    color: var(--ink, #fff) !important;
}
#transaction-sheet .transaction-type-chips .chip-btn:not(.active) { background: transparent !important; color: var(--muted, inherit) !important; }
#transaction-sheet .transaction-form > input,
#transaction-sheet .transaction-form > select {
    background: var(--faint, rgba(255,255,255,.07)) !important;
    color: var(--text, inherit) !important;
    border: 1px solid var(--stroke, rgba(255,255,255,.1)) !important;
}
#transaction-sheet .amount-row > input { background: transparent !important; border: none !important; box-shadow: none !important; }
header .month-picker-btn,
header .search-open-btn {
    background: var(--glass2, var(--tertiary-color)) !important;
    color: var(--text, var(--secondary-color)) !important;
    border: 1px solid var(--stroke, rgba(255,255,255,.12)) !important;
}
.fab-btn {
    background: var(--accent, var(--primary-color)) !important;
    color: var(--ink, var(--secondary-color)) !important;
}
#transaction-sheet .transaction-type-chips {
    position: relative;
    display: flex;
    padding: 62px 4px 4px;
    background: linear-gradient(var(--faint, rgba(255,255,255,.07)), var(--faint, rgba(255,255,255,.07))) left bottom / 100% 46px no-repeat !important;
    border-radius: 0;
    overflow: visible;
}
#transaction-sheet .transaction-type-chips::before {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 46px;
    border-radius: 18px; pointer-events: none;
}
#transaction-sheet .transaction-type-chips .chip-btn[data-type="excel-import"] {
    position: absolute; top: 0; left: 0; right: 0; height: 52px; min-height: 52px;
    flex: none; width: auto;
    display: flex; align-items: center; justify-content: flex-start; gap: 4px;
    padding: 0 40px 0 14px; text-align: left; white-space: nowrap;
    border-radius: 18px;
    background: var(--glass2, rgba(255,255,255,.08)) !important;
    border: 1px solid var(--stroke, rgba(255,255,255,.12)) !important;
    color: var(--text, inherit) !important;
    font-size: 14.5px; font-weight: 800;
    box-shadow: inset 0 1px 0 var(--hi, rgba(255,255,255,.08)) !important;
}
#transaction-sheet .transaction-type-chips .chip-btn[data-type="excel-import"]::after {
    content: '›'; position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
    font-size: 20px; color: var(--muted, inherit); font-weight: 600;
}
#transaction-sheet .transaction-type-chips .chip-btn[data-type="excel-import"].active {
    border-color: var(--accent, var(--primary-color)) !important;
    color: var(--text, inherit) !important;
    background: var(--glass2, rgba(255,255,255,.08)) !important;
}
#transaction-sheet .transaction-type-chips .chip-btn:not([data-type="excel-import"]) { flex: 1 1 0; min-width: 0; padding: 0 4px; }
#transaction-sheet .transaction-type-chips { background: none !important; }
#transaction-sheet .transaction-type-chips::before { background: var(--faint, rgba(255,255,255,.07)); z-index: 0; }
#transaction-sheet .transaction-type-chips .chip-btn { position: relative; z-index: 1; }
#transaction-sheet .transaction-type-chips .chip-btn[data-type="excel-import"] { position: absolute; }
#transaction-sheet .transaction-type-chips .chip-btn:not([data-type="excel-import"]) {
    white-space: nowrap; font-size: 12.5px; min-height: 38px; align-self: center;
    display: inline-flex; flex-direction: row; align-items: center; justify-content: center; gap: 4px;
}
.category-add-custom { margin: 0 0 10px; }
.category-add-custom .cc-open {
    width: 100%; min-height: 48px; border-radius: 16px; cursor: pointer;
    background: transparent !important; border: 1px dashed var(--stroke, rgba(255,255,255,.2)) !important;
    color: var(--accent, var(--primary-color)) !important; font-weight: 800; font-size: 14px;
}
.cc-form { display: flex; gap: 8px; }
.cc-form .cc-emoji { width: 56px; flex: none; text-align: center; font-size: 20px; }
.cc-form .cc-name { flex: 1; min-width: 0; }
.cc-form input {
    min-height: 48px; border-radius: 14px; padding: 0 12px;
    background: var(--faint, rgba(255,255,255,.08)) !important; color: var(--text, inherit) !important;
    border: 1px solid var(--stroke, rgba(255,255,255,.12)) !important;
}
.cc-form .cc-save {
    flex: none; min-height: 48px; padding: 0 16px; border-radius: 24px; border: none; cursor: pointer; font-weight: 800;
    background: var(--accent, var(--primary-color)) !important; color: var(--ink, #fff) !important;
}
.cc-error { min-height: 16px; margin: 6px 4px 0; font-size: 12.5px; font-weight: 700; color: var(--out, #ff4b5c); }
.category-item.is-custom { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.category-item .cc-del {
    flex: none; margin: 0; min-width: 28px; height: 28px; padding: 0 8px; border: none; border-radius: 14px; cursor: pointer;
    background: var(--chip, rgba(255,255,255,.1)) !important; color: var(--muted, inherit) !important; font-size: 12px;
}
.category-item .cc-del.confirm { background: var(--out, #ff4b5c) !important; color: #fff !important; font-weight: 800; }
.sheet-x { margin-top: 0 !important; }
#category-sheet .category-item {
    background: var(--faint, rgba(255,255,255,.07)) !important;
    color: var(--text, inherit) !important;
    border: 1px solid var(--stroke, rgba(255,255,255,.08)) !important;
    border-radius: 14px !important;
    box-shadow: none !important;
}
#category-sheet .category-item:active { background: var(--chip, rgba(255,255,255,.12)) !important; }
#category-sheet .category-group-label {
    background: transparent !important;
    color: var(--muted, inherit) !important;
    font-weight: 800;
}
#category-sheet .category-usage-badge { background: var(--chip, rgba(255,255,255,.1)) !important; color: var(--muted, inherit) !important; }
#category-sheet #category-search {
    border-radius: 16px !important;
    min-height: 50px;
    background: var(--faint, rgba(255,255,255,.07)) !important;
    color: var(--text, inherit) !important;
    border: 1px solid var(--stroke, rgba(255,255,255,.1)) !important;
    outline: none;
}
#category-sheet .category-sheet-header h2 { color: var(--text, inherit); font-size: 20px; font-weight: 800; }
#category-sheet .close-category-sheet {
    width: 34px; height: 34px; padding: 0; margin: 0; border: none; border-radius: 17px;
    background: var(--chip, rgba(255,255,255,.1)) !important; color: var(--muted, inherit) !important; font-size: 15px;
}
#transaction-sheet .transaction-form > label[for$="-date"] { display: none; }
#transaction-sheet .transaction-form > input[type=date] {
    position: absolute !important; width: 1px; height: 1px; min-height: 0 !important; padding: 0; opacity: 0; pointer-events: none; overflow: hidden;
}
.date-field {
    order: 5; position: relative; width: 100%; min-height: 52px; margin-top: 12px; padding: 6px 14px;
    display: flex; flex-direction: column; justify-content: center; align-items: flex-start; text-align: left;
    border-radius: 16px; cursor: pointer;
    background: var(--faint, rgba(255,255,255,.07)) !important; color: var(--text, inherit) !important;
    border: 1px solid var(--stroke, rgba(255,255,255,.1)) !important;
}
.date-field small { font-size: 11px; font-weight: 700; color: var(--muted, inherit); }
.date-field b { font-size: 14px; font-weight: 700; }
.date-field .date-field-arrow { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--muted, inherit); }
#date-sheet { padding-bottom: 28px; }
#date-sheet .ds-head { display: flex; align-items: center; gap: 10px; padding: 0 0 14px; }
#date-sheet .ds-title { font-size: 20px; font-weight: 800; color: var(--text, inherit); }
#date-sheet button { margin: 0; }
#date-sheet .ds-back, #date-sheet .ds-nav {
    width: 34px; height: 34px; padding: 0; border: none; border-radius: 17px; font-size: 20px; line-height: 1; cursor: pointer;
    background: var(--chip, rgba(255,255,255,.1)) !important; color: var(--text, inherit) !important;
}
#date-sheet .ds-quick-row { display: flex; gap: 6px; }
#date-sheet .ds-quick {
    flex: 1; height: 42px; border: none; border-radius: 14px; font-size: 14px; font-weight: 800; cursor: pointer;
    background: var(--faint, rgba(255,255,255,.07)) !important; color: var(--text, inherit) !important;
}
#date-sheet .ds-quick.active, #date-sheet .ds-day.active {
    background: var(--accent, var(--primary-color)) !important; color: var(--ink, #fff) !important;
}
#date-sheet .ds-month-row { display: flex; align-items: center; justify-content: space-between; padding: 18px 4px 10px; }
#date-sheet .ds-month { font-size: 15px; font-weight: 800; color: var(--text, inherit); }
#date-sheet .ds-week, #date-sheet .ds-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
#date-sheet .ds-week { font-size: 11.5px; font-weight: 800; color: var(--muted, inherit); text-align: center; padding-bottom: 6px; }
#date-sheet .ds-day {
    height: 40px; padding: 0; border: none; border-radius: 12px; font-size: 14.5px; font-weight: 800; cursor: pointer;
    background: transparent !important; color: var(--text, inherit) !important;
}
#date-sheet .ds-day.today:not(.active) { box-shadow: inset 0 0 0 1.5px var(--accent, var(--primary-color)); }
#products-list .product-item {
    display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 8px; margin-bottom: 8px;
    padding: 10px; border-radius: 18px; background: var(--faint, rgba(255,255,255,.07));
}
#products-list .product-item .product-name { grid-column: 1 / -1; min-height: 44px; }
#products-list .product-item .delete-product {
    grid-column: 4; grid-row: 1; width: 32px; height: 32px; padding: 0; margin: 0; border: none; border-radius: 16px; font-size: 12px;
    background: var(--chip, rgba(255,255,255,.1)) !important; color: var(--muted, inherit) !important;
}
#products-list .product-item:has(.delete-product) .product-name { grid-column: 1 / 4; }
#products-list .qty-stepper {
    display: flex; align-items: center; height: 40px; border-radius: 12px;
    background: var(--glass, rgba(255,255,255,.06)); border: 1px solid var(--stroke, rgba(255,255,255,.1));
}
#products-list .qty-stepper button {
    width: 34px; height: 100%; padding: 0; margin: 0; border: none; background: transparent !important; cursor: pointer;
    color: var(--text, inherit) !important; font-size: 18px; font-weight: 700;
}
#products-list .qty-stepper .product-quantity {
    width: 36px !important; min-height: 0 !important; height: 100%; padding: 0; text-align: center;
    border: none !important; background: transparent !important; font-weight: 800;
}
#products-list .pos-sep { color: var(--muted, inherit); font-weight: 700; }
#products-list .product-item .product-price { min-width: 0; min-height: 40px !important; }
#products-list .pos-total { grid-column: 1 / -1; text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text, inherit); min-height: 0; }
#products-list .pos-total:empty { display: none; }
.positions-summary { font-size: 12.5px; font-weight: 700; color: var(--muted, inherit); padding: 4px 6px 0; }
.positions-summary:empty { display: none; }
#transaction-sheet .transaction-form > * { flex-shrink: 0; }
#products-list { max-height: none !important; overflow: visible !important; height: auto !important; margin: 0; }
#date-sheet { background: var(--bg, var(--tertiary-color)) !important; }
#date-sheet::after { content: none; }
#products-list .product-item { height: auto !important; margin-top: 8px; }
#products-list .product-item input { flex: none; }
#products-list .product-item .delete-product { border: none !important; box-shadow: none !important; }
#transaction-detail-sheet { padding-bottom: 24px; }
#transaction-detail-sheet .tx-detail-type {
    display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 800;
    background: var(--chip, rgba(255,255,255,.1)); color: var(--muted, inherit);
}
#transaction-detail-sheet .tx-detail-title-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
#transaction-detail-sheet .tx-detail-name { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 800; color: var(--text, inherit); }
#transaction-detail-sheet .tx-detail-emoji {
    width: 40px; height: 40px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; font-size: 22px;
    background: var(--faint, rgba(255,255,255,.07));
}
#transaction-detail-sheet .tx-detail-date { font-size: 12.5px; font-weight: 700; color: var(--muted, inherit); }
#transaction-detail-sheet .tx-detail-amount {
    margin: 14px 0 4px; font-family: var(--font-num, inherit); font-size: 30px; font-weight: 600; letter-spacing: -.02em;
    font-variant-numeric: tabular-nums; color: var(--text, inherit);
}
#transaction-detail-sheet .tx-detail-card, #transaction-detail-sheet .tx-detail-note, #transaction-detail-sheet .tx-detail-status {
    background: var(--faint, rgba(255,255,255,.07)) !important; border: 1px solid var(--stroke, rgba(255,255,255,.08)) !important;
    border-radius: 18px !important; color: var(--text, inherit) !important; box-shadow: none !important;
}
#transaction-detail-sheet .tx-detail-buttons-row { display: flex; gap: 8px; margin-top: 16px; }
#transaction-detail-sheet .tx-detail-buttons-row button, #transaction-detail-sheet .tx-detail-close-btn {
    flex: 1; min-height: 50px; margin: 0; border: none; border-radius: 25px; font-size: 15px; font-weight: 800; cursor: pointer;
}
#transaction-detail-sheet #edit-transaction, #transaction-detail-sheet .tx-detail-close-btn {
    background: var(--faint, rgba(255,255,255,.08)) !important; color: var(--text, inherit) !important;
}
#transaction-detail-sheet #delete-transaction {
    background: color-mix(in srgb, var(--out, #ff4b5c) 16%, transparent) !important; color: var(--out, #ff4b5c) !important;
}
#transaction-detail-sheet #pay-debt-detail { background: var(--accent, var(--primary-color)) !important; color: var(--ink, #fff) !important; }
#transaction-detail-sheet .tx-detail-close-btn { width: 100%; margin-top: 8px; }
#edit-transaction-sheet .sheet-header h2 { font-size: 20px; font-weight: 800; color: var(--text, inherit); }
#edit-transaction-sheet .sheet-handle { display: none; }
#edit-transaction-sheet .edit-type-switch {
    display: flex; gap: 4px; padding: 4px; margin-top: 10px; border-radius: 18px; background: var(--faint, rgba(255,255,255,.07));
}
#edit-transaction-sheet .edit-type-switch.hidden { display: none; }
#edit-transaction-sheet .edit-type-switch button {
    flex: 1; min-height: 38px; margin: 0; border: none; border-radius: 14px; font-size: 13px; font-weight: 800; cursor: pointer;
    background: transparent !important; color: var(--muted, inherit) !important;
}
#edit-transaction-sheet .edit-type-switch button.active {
    background: var(--accent, var(--primary-color)) !important; color: var(--ink, #fff) !important;
}
#edit-transaction-sheet .tx-form > label { font-size: 12px; font-weight: 700; color: var(--muted, inherit); }
#edit-transaction-sheet .category-select-button {
    width: 100%; min-height: 54px; border-radius: 16px; text-align: left; padding: 0 14px;
    background: var(--faint, rgba(255,255,255,.07)) !important; border: 1px solid var(--stroke, rgba(255,255,255,.1)) !important;
    color: var(--text, inherit) !important; font-size: 15px; font-weight: 700;
}
#edit-transaction-sheet #edit-add-product {
    min-height: 48px; border-radius: 16px; background: transparent !important;
    border: 1px dashed var(--stroke, rgba(255,255,255,.2)) !important; color: var(--accent, var(--primary-color)) !important; font-weight: 800;
}
#edit-transaction-sheet .sheet-footer .close-form { width: 100%; }
#edit-products-list .product-row { height: auto !important; flex-wrap: wrap; padding: 10px; border-radius: 18px; background: var(--faint, rgba(255,255,255,.07)); }
#edit-products-list .product-row input { min-height: 44px; }
#transaction-detail-sheet .tx-detail-type { width: fit-content; }
.modal { background: rgba(0,0,0,.5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.modal .modal-content {
    background: var(--sticky, var(--tertiary-color));
    border: 1px solid var(--stroke, rgba(255,255,255,.1));
    border-radius: 28px;
    box-shadow: 0 24px 60px rgba(0,0,0,.5), inset 0 1px 0 var(--hi, rgba(255,255,255,.1));
    -webkit-backdrop-filter: blur(36px) saturate(180%);
    backdrop-filter: blur(36px) saturate(180%);
    color: var(--text, inherit);
}
#delete-transaction-modal .modal-content::before, #delete-budget-modal .modal-content::before,
#clear-data-modal .modal-content::before, #clear-cache-modal .modal-content::before {
    content: ''; display: block; width: 96px; height: 96px; margin: -6px auto 4px;
    background: var(--shark-modal, url('/assets/shark.png')) center / contain no-repeat;
}
html[data-shark="hoodie"] #delete-transaction-modal .modal-content::before, html[data-shark="hoodie"] #delete-budget-modal .modal-content::before,
html[data-shark="hoodie"] #clear-data-modal .modal-content::before, html[data-shark="hoodie"] #clear-cache-modal .modal-content::before { height: 118px; margin-top: -14px; }
.modal .modal-content h3 { color: var(--text, inherit); font-size: 18px; font-weight: 800; }
.modal .modal-content p { color: var(--muted, inherit); font-size: 13.5px; line-height: 1.45; }
.modal .modal-buttons { gap: 10px; }
.modal .modal-buttons button {
    flex: 1; min-height: 48px; margin: 0; border: none; border-radius: 24px; font-size: 15px; font-weight: 800; cursor: pointer;
    background: var(--faint, rgba(255,255,255,.08)) !important; color: var(--text, inherit) !important;
}
#delete-transaction-modal .modal-buttons button:first-child, #delete-budget-modal .modal-buttons button:first-child,
#clear-data-modal .modal-buttons button:first-child {
    background: var(--out, #ff4b5c) !important; color: #fff !important;
}
#clear-cache-modal .modal-buttons button:first-child { background: var(--accent, var(--primary-color)) !important; color: var(--ink, #fff) !important; }
#transaction-sheet .amount-row { order: 1; display: flex; align-items: baseline; justify-content: center; gap: 8px; margin: 14px 0 0; }
#transaction-sheet .amount-row > input { text-align: right; flex: 0 1 auto !important; width: auto; max-width: 70%; field-sizing: content; min-width: 1.2ch; }
#transaction-sheet .amount-cur { font-family: var(--font-num, inherit); font-size: 18px; font-weight: 600; color: var(--muted, inherit); }
#transaction-sheet .amount-hint { order: 1; text-align: center; font-size: 12px; color: var(--muted, inherit); min-height: 0; }
#transaction-sheet .amount-hint:empty { display: none; }
#transaction-sheet .category-select-button::after { content: '▾'; float: right; opacity: .6; }
#transaction-sheet .quick-cats .quick-chip.active { background: var(--text, #fff) !important; color: var(--bg, #111) !important; }
#transaction-sheet .transaction-type-chips .chip-btn.active { background: var(--text, #fff) !important; color: var(--bg, #111) !important; box-shadow: none; }
#transaction-sheet .dt-row { display: flex; gap: 10px; align-items: stretch; margin-top: 8px; }
#transaction-sheet .dt-row .date-field { flex: 1; order: 1; }
#transaction-sheet .dt-row .budget-cell { order: 2; }
#transaction-sheet #debt-form .category-select-container, #transaction-sheet #debt-form label[for="debt-category"] { display: none; }
#transaction-sheet .budget-cell { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 8px 14px; border-radius: 16px;
    background: var(--faint, rgba(255,255,255,.07)); border: 1px solid var(--stroke, rgba(255,255,255,.1)); min-width: 0; }
#transaction-sheet .budget-cell small { font-size: 11px; color: var(--muted, inherit); }
#transaction-sheet .budget-cell b { font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#transaction-sheet #expense-form[data-split="false"] #products-list,
#transaction-sheet #expense-form[data-split="false"] .positions-summary,
#transaction-sheet #expense-form[data-split="false"] #add-product,
#transaction-sheet #expense-form[data-split="false"] #split-stop,
#transaction-sheet #expense-form[data-split="true"] #split-start { display: none !important; }
#transaction-sheet .split-toggle { order: 6; width: 100%; margin-top: 10px; padding: 14px; border-radius: 16px; background: transparent;
    border: 1.5px dashed var(--accent, #7aa); color: var(--accent, inherit); font-weight: 700; font-size: 14px; cursor: pointer; }
#transaction-sheet .dir-seg { display: flex; gap: 4px; padding: 4px; border-radius: 16px; background: var(--faint, rgba(255,255,255,.07)); margin: 12px 0 0; order: 2; }
#transaction-sheet .dir-seg button { flex: 1; min-height: 40px; border: none; border-radius: 12px; background: transparent; color: var(--muted, inherit); font-weight: 700; }
#transaction-sheet .dir-seg button.active { background: var(--glass2, rgba(255,255,255,.14)); color: var(--text, inherit); }
#transaction-sheet #debt-direction, #transaction-sheet label[for="debt-direction"] { display: none; }
#transaction-sheet .transaction-form .add-btn.is-disabled { opacity: .45; filter: saturate(.5); }
#transaction-sheet .chip-btn[data-type="excel-import"] .zl-img { width: 48px; height: 48px; object-fit: contain; flex: none; }
#transaction-sheet .chip-btn[data-type="excel-import"] .zl-text { display: flex; flex-direction: column; text-align: left; gap: 2px; }
#transaction-sheet .chip-btn[data-type="excel-import"] .zl-text small { font-size: 12px; font-weight: 500; opacity: .75; }
#transaction-detail-sheet .tx-detail-header { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 6px; }
#transaction-detail-sheet #detail-x { position: absolute; top: 0; right: 0; border: none; border-radius: 14px;
    background: var(--glass2, rgba(255,255,255,.1)); color: var(--text, inherit); font-size: 16px; cursor: pointer; }
#transaction-detail-sheet .tx-detail-tile { width: 60px; height: 60px; border-radius: 20px; display: flex; align-items: center; justify-content: center;
    font-size: 30px; background: var(--faint, rgba(255,255,255,.08)); border: 1px solid var(--stroke, rgba(255,255,255,.1)); margin-top: 8px; }
#transaction-detail-sheet .tx-detail-type { margin-top: 12px; background: transparent; padding: 0; font-size: 13px; }
#transaction-detail-sheet .tx-detail-title-row { justify-content: center; margin-top: 2px; }
#transaction-detail-sheet .tx-detail-name { font-size: 20px; }
#transaction-detail-sheet .tx-detail-name .tx-detail-emoji { display: none; }
#transaction-detail-sheet .tx-detail-header .tx-detail-date { display: none; }
#transaction-detail-sheet .tx-detail-amount { font-size: 32px; margin: 10px 0 14px; }
#transaction-detail-sheet .tx-detail-amount[data-kind="expense"] { color: var(--out, #ff4b5c); }
#transaction-detail-sheet .tx-detail-amount[data-kind="income"] { color: var(--in, #27AE60); }
#transaction-detail-sheet .detail-info { padding: 4px 16px; margin-bottom: 10px; }
#transaction-detail-sheet .di-row { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; font-size: 14px; }
#transaction-detail-sheet .di-row + .di-row { border-top: 1px solid var(--stroke, rgba(255,255,255,.08)); }
#transaction-detail-sheet .di-row span { color: var(--muted, inherit); }
#transaction-detail-sheet .di-row b { font-weight: 700; text-align: right; }
#transaction-detail-sheet .detail-product-row { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; }
#transaction-detail-sheet #delete-transaction { background: transparent !important; }
#transaction-detail-sheet .tx-detail-close-btn { display: none; }
#edit-transaction-sheet input[type="date"] { display: none; }
#edit-transaction-sheet .date-field { width: 100%; margin-top: 4px; }
#transaction-detail-sheet .tx-detail-card#detail-products { padding: 12px 16px; margin-bottom: 8px; }
#transaction-sheet .budget-cell { display: none !important; }
#transaction-sheet .dt-row .date-field { width: 100%; flex: 1 1 100%; }
.analytics-period-seg { display: flex; gap: 4px; margin: 64px 4px 0; border-radius: 18px; background: var(--faint, rgba(255,255,255,.07)); }
.analytics-period-seg button { flex: 1; min-height: 38px; border: none; border-radius: 14px; background: transparent; color: var(--muted, inherit); margin-top: 0;
    font-size: 13px; font-weight: 800; cursor: pointer; }
.analytics-period-seg button.active { background: var(--text, #fff); color: var(--bg, #111); }
#analytics-page .bi-kpi, #analytics-page .bi-health, #analytics-page .analytics-scroll section {
    background: var(--glass, rgba(255,255,255,.06)) !important;
    border: 1px solid var(--stroke, rgba(255,255,255,.1)) !important;
    border-left-width: 1px !important;
    -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
    border-radius: 22px !important;
    box-shadow: inset 0 1px 0 var(--hi, rgba(255,255,255,.08));
}
#analytics-page .bi-kpi-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; overflow: visible; }
#analytics-page .bi-kpi { min-width: 0; }
#analytics-page .bi-health-score { font-family: var(--font-num, inherit); }
#analytics-page .analytics-scroll section h4 { font-size: 15px; font-weight: 800; color: var(--text, inherit); }
#analytics-page .bi-health-track { background: var(--faint, rgba(255,255,255,.08)); }
#analytics-page .bi-kpi-l, #analytics-page .bi-health-hint { color: var(--muted, inherit); }
#analytics-page .bi-kpi-row { margin-top: 12px; }
#analytics-page .bi-kpi-v { font-family: inherit; font-size: 14px; font-weight: 800; letter-spacing: -.02em; }
#analytics-page .bi-card, #analytics-page .bi-ob-progress-block, #analytics-page .bi-ob-feat {
    background: var(--glass, rgba(255,255,255,.06)) !important;
    border: 1px solid var(--stroke, rgba(255,255,255,.1)) !important;
    border-radius: 22px !important;
    -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
    box-shadow: inset 0 1px 0 var(--hi, rgba(255,255,255,.08));
}
#analytics-page .bi-card { border-left-width: 3px !important; }
#analytics-page .bi-card-t, #analytics-page .bi-ob-title { color: var(--muted, inherit); }
.akulka-card[data-mood="new"]   { --mood: var(--accent, #6cf); }
.akulka-card[data-mood="proud"] { --mood: var(--save, #9b6dff); }
.akulka-card.no-limit .ak-bar { opacity: .35; }
.akulka-card img { transform-origin: 50% 90%; }
@keyframes btBob   { 0%,60%,100% { transform: translateY(0) rotate(0); } 30% { transform: translateY(-4px) rotate(-1.5deg); } }
@keyframes btTense { 0%,70%,100% { transform: translateY(0) scale(1); } 35% { transform: translateY(-2px) scale(1.02); } }
@keyframes btShake { 0%,100% { transform: rotate(0); } 20% { transform: rotate(-5deg); } 40% { transform: rotate(5deg); } 60% { transform: rotate(-4deg); } 80% { transform: rotate(4deg); } }
.akulka-card[data-state="ok"] img, .akulka-card[data-state="proud"] img { animation: btBob 9s ease-in-out infinite; }
.akulka-card[data-state="tense"] img { animation: btTense 4s ease-in-out infinite; }
.akulka-card[data-state="angry"] img { animation: btShake .9s ease-in-out 2; }
.akulka-card.react-ok img, .akulka-card.react-proud img { animation: btBob .9s ease-in-out 1; }
.akulka-card.react-tense img { animation: btTense .9s ease-in-out 1; }
.akulka-card.react-angry img { animation: btShake .9s ease-in-out 1; }
@media (prefers-reduced-motion: reduce) { .akulka-card img { animation: none !important; } }
.tweak .shark-toast { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 1.3; font-weight: 600; }
.tweak .shark-toast img { width: 28px; height: 28px; object-fit: contain; flex: none; }
.tweak:has(.shark-toast) { padding: 7px 12px !important; width: fit-content; max-width: 92%; margin-inline: auto; }
.tweak.info:has(.shark-toast) { border: 1.5px solid var(--tc, var(--accent)) !important; border-radius: 16px; }
.tweak:has(.shark-toast) .tweak-close { display: none; }
#shark-page .shark-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; font-weight: 700; }
#shark-page .shark-row + .shark-row { border-top: 1px solid var(--stroke, rgba(255,255,255,.08)); }
#shark-page .shark-row small { display: block; font-weight: 500; font-size: 12px; color: var(--muted, inherit); margin-top: 2px; }
#shark-page .shark-row input { width: 22px; height: 22px; accent-color: var(--accent, #3ddc97); }
#planner-page .planner-stat-card, #planner-page .planner-mini-card, #planner-page .planner-section-card, #planner-page .planner-insight-card, #planner-page .planner-day-card, #planner-page .planner-dropdown-trigger {
    background: var(--glass, rgba(255,255,255,.06)) !important;
    border: 1px solid var(--stroke, rgba(255,255,255,.1)) !important;
    border-radius: 22px !important;
    -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
    box-shadow: inset 0 1px 0 var(--hi, rgba(255,255,255,.08)) !important;
    color: var(--text, inherit);
}
#planner-page .planner-stat-card::before { display: none; }
#planner-page .planner-stat-value, #planner-page .planner-mini-value { font-family: var(--font-num, inherit); color: var(--text, inherit); }
#planner-page .planner-stat-label, #planner-page .planner-mini-label, #planner-page .planner-stat-note { color: var(--muted, inherit); }
#planner-page .planner-list-row { background: var(--faint, rgba(255,255,255,.05)); border-color: var(--stroke, rgba(255,255,255,.08)); }
#planner-page .planner-hero { padding: 18px 18px 16px; margin-bottom: 10px; border-radius: 26px; text-align: center;
    background: var(--glass2, rgba(255,255,255,.08)); border: 1px solid var(--stroke, rgba(255,255,255,.12));
    -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); box-shadow: inset 0 1px 0 var(--hi, rgba(255,255,255,.08)); }
#planner-page .planner-hero-label { font-size: 13px; font-weight: 800; color: var(--muted, inherit); }
#planner-page .planner-hero-value { font-family: var(--font-num, inherit); font-size: 30px; font-weight: 600; letter-spacing: -.02em; margin: 6px 0 2px; color: var(--text, inherit); }
#planner-page .planner-hero-note { font-size: 12px; color: var(--muted, inherit); }
#planner-page .planner-strip { display: flex; gap: 3px; margin-top: 14px; }
#planner-page .planner-strip-day { flex: 1; height: 8px; border-radius: 4px; background: var(--faint, rgba(255,255,255,.12)); }
#planner-page .planner-strip-day.ok { background: var(--in, #27AE60); }
#planner-page .planner-strip-day.over { background: var(--out, #ff4b5c); }
#planner-page .planner-strip-day.today { background: var(--accent, #3ddc97); box-shadow: 0 0 8px var(--accent, #3ddc97); }
#planner-page .planner-shark-tip { display: flex; align-items: center; gap: 10px; margin: 10px 0; padding: 10px 14px; border-radius: 20px;
    background: var(--glass, rgba(255,255,255,.06)); border: 1px solid var(--stroke, rgba(255,255,255,.1)); font-size: 14px; }
#planner-page .planner-shark-tip img { width: 34px; height: 34px; object-fit: contain; flex: none; }
#planner-page .planner-secondary-btn { background: var(--faint, rgba(255,255,255,.08)) !important; color: var(--text, inherit) !important; border-radius: 25px; }
#planner-page .delete-btn { background: transparent !important; color: var(--out, #ff4b5c) !important; border-radius: 25px; }
#planner-page .planner-summary-grid-mini { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 8px; }
#planner-page .planner-mini-card { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; }
#planner-page .planner-mini-value { font-size: 13px; }
#planner-page .planner-mini-label { font-size: 10px; }
#planner-page #planner-quick-create-btn { background: var(--accent, #3ddc97) !important; color: var(--ink, #062) !important; border-radius: 22px; min-height: 44px; font-weight: 800; }
.accounts-row { width: 100%; display: flex; align-items: center; gap: 12px; margin: 0 0 12px; padding: 12px 14px; text-align: left; border-radius: 22px;
    background: var(--glass, rgba(255,255,255,.06)); border: 1px solid var(--stroke, rgba(255,255,255,.1)); color: var(--text, inherit);
    -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); cursor: pointer; }
#accounts-page { z-index: 1100 !important; }
#accounts-page .subpage-content { padding-top: 68px; padding-bottom: 108px; }
#accounts-page .acc-hero { text-align: center; padding: 18px; border-radius: 26px; background: var(--glass2, rgba(255,255,255,.08)); border: 1px solid var(--stroke, rgba(255,255,255,.12)); }
#accounts-page .acc-hero-label { font-size: 13px; font-weight: 800; color: var(--muted, inherit); }
#accounts-page .acc-hero-value { font-family: var(--font-num, inherit); font-size: 30px; font-weight: 600; margin: 6px 0 2px; color: var(--save, var(--text)); }
#accounts-page .acc-hero-note { font-size: 12px; color: var(--muted, inherit); }
#accounts-page .acc-two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
#accounts-page .acc-mini { padding: 12px 14px; border-radius: 20px; background: var(--glass, rgba(255,255,255,.06)); border: 1px solid var(--stroke, rgba(255,255,255,.1)); display: flex; flex-direction: column; gap: 4px; }
#accounts-page .acc-mini small { font-size: 12px; color: var(--muted, inherit); }
#accounts-page .acc-mini b { font-family: var(--font-num, inherit); font-size: 15px; }
#accounts-page .acc-h { font-size: 15px; font-weight: 800; margin: 18px 4px 8px; }
#accounts-page .acc-list { display: flex; flex-direction: column; gap: 8px; }
#accounts-page .acc-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; text-align: left; border-radius: 20px;
    background: var(--glass, rgba(255,255,255,.06)); border: 1px solid var(--stroke, rgba(255,255,255,.1)); color: var(--text, inherit); cursor: pointer; }
#accounts-page .acc-row.is-done { opacity: .55; }
#accounts-page .acc-emoji { width: 40px; height: 40px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 20px; background: var(--faint, rgba(255,255,255,.08)); flex: none; }
#accounts-page .acc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#accounts-page .acc-main small { font-size: 12px; color: var(--muted, inherit); }
#accounts-page .acc-sum { font-family: var(--font-num, inherit); font-size: 14px; font-weight: 600; }
#accounts-page .acc-bar { display: block; height: 5px; border-radius: 3px; background: var(--faint, rgba(255,255,255,.1)); margin-top: 6px; overflow: hidden; }
#accounts-page .acc-bar i { display: block; height: 100%; background: var(--debt, #F1C40F); border-radius: 3px; }
#accounts-page .acc-empty { padding: 16px; text-align: center; color: var(--muted, inherit); font-size: 13px; border: 1.5px dashed var(--stroke, rgba(255,255,255,.12)); border-radius: 20px; }
#accounts-page#accounts-page#accounts-page.bottom-sheet.fullscreen-sheet { z-index: 1100 !important; }
.numfmt-seg { display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: var(--faint, rgba(255,255,255,.07)); }
.numfmt-seg button { flex: 1; min-height: 38px; border: none; border-radius: 10px; background: transparent !important; color: var(--muted, inherit) !important; font-weight: 700; font-size: 13px; margin: 0; }
.numfmt-seg button.active { background: var(--text, #fff) !important; color: var(--bg, #111) !important; }
.eip-daily-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; font-weight: 700; }
.eip-daily-row small { display: block; font-weight: 500; font-size: 12px; opacity: .7; }
.eip-daily-row input { width: 22px; height: 22px; accent-color: var(--accent, #3ddc97); }
.eip-backup-now { width: 100%; margin: 4px 0 8px; border-radius: 16px; background: var(--faint, rgba(255,255,255,.08)) !important; color: var(--text, inherit) !important; border: 1px dashed var(--stroke, rgba(255,255,255,.2)) !important; }
#settings-page .sp-nav-group {
    background: var(--glass, rgba(255,255,255,.06)) !important;
    border: 1px solid var(--stroke, rgba(255,255,255,.1)) !important;
    border-radius: 22px !important;
    -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
    box-shadow: inset 0 1px 0 var(--hi, rgba(255,255,255,.08));
}
#settings-page .sp-nav-btn { border-bottom-color: var(--stroke, rgba(255,255,255,.08)); color: var(--text, inherit); }
#settings-page .sp-nav-text { color: var(--text, inherit); }
#settings-page .sp-nav-sub, #settings-page .sp-nav-arr { color: var(--muted, inherit); }
.faq-item { background: var(--glass, rgba(255,255,255,.06)) !important; border: 1px solid var(--stroke, rgba(255,255,255,.1)) !important; border-radius: 20px !important;
    -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.faq-item[open] { border-color: var(--accent, #3ddc97) !important; }
.faq-item summary { color: var(--text, inherit) !important; font-weight: 700; padding-right: 48px; }
.faq-item summary::after { content: "+" !important; font-size: 20px; font-weight: 400; color: var(--muted, inherit); }
.faq-item[open] summary::after { content: "\2212" !important; transform: translateY(-50%) !important; color: var(--accent, #3ddc97); }
.faq-item p { color: var(--muted, inherit); }
#settings-page .sp-nav-btn, #settings-page .sp-nav-btn:hover { background: transparent !important; box-shadow: none !important; }
#settings-page .sp-nav-btn:active { background: var(--faint, rgba(255,255,255,.06)) !important; }
.set-title { margin: 16px 20px 6px; font-size: 13px; font-weight: 800; color: var(--muted, inherit); }
.set-card { margin: 10px 16px; padding: 4px 14px; border-radius: 22px; background: var(--glass, rgba(255,255,255,.06)); border: 1px solid var(--stroke, rgba(255,255,255,.1));
    -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: inset 0 1px 0 var(--hi, rgba(255,255,255,.08)); }
.set-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 0; text-align: left; background: transparent !important; border: none !important; border-radius: 0 !important;
    color: var(--text, inherit) !important; box-shadow: none !important; margin: 0 !important; cursor: pointer; }
.set-row + .set-row { border-top: 1px solid var(--stroke, rgba(255,255,255,.08)) !important; }
.set-flag { width: 36px; height: 36px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; background: var(--faint, rgba(255,255,255,.08)); flex: none; }
.set-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.set-main b { font-size: 15px; font-weight: 700; }
.set-main small { font-size: 12px; font-weight: 500; color: var(--muted, inherit); }
.set-check { width: 24px; text-align: center; font-weight: 800; color: var(--accent, #3ddc97); }
.set-row.is-active .set-main b { color: var(--accent, #3ddc97); }
.sw { position: relative; width: 46px; height: 28px; flex: none; display: inline-block; }
.sw input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.sw > span { position: absolute; inset: 0; border-radius: 14px; background: var(--faint, rgba(255,255,255,.16)); transition: background .2s; }
.sw > span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 4px rgba(0,0,0,.35); }
.sw input:checked + span { background: var(--accent, #3ddc97); }
.sw input:checked + span::after { transform: translateX(18px); }
#shark-page .subpage-content, #region-page .subpage-content { padding-top: 68px; padding-bottom: 108px; }
#region-page .numfmt-seg { margin: 4px 0 12px; }
.fx-holder { grid-column: 1 / -1; }
.fx-row { display: flex; align-items: center; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 0; }
.fx-row::-webkit-scrollbar { display: none; }
.fx-chip { flex: none; height: 28px; padding: 0 12px; display: inline-flex; align-items: center; border-radius: 14px; font-size: 13px; font-weight: 700;
    background: var(--faint, rgba(255,255,255,.08)); color: var(--text, inherit); white-space: nowrap; }
.fx-open { flex: none; height: 28px; padding: 0 12px; border: none; border-radius: 14px; font-size: 13px; font-weight: 700; margin: 0 !important;
    background: var(--glass2, rgba(255,255,255,.12)) !important; color: var(--text, inherit) !important; white-space: nowrap; }
#fx-sheet { padding-bottom: 24px; max-height: 88vh; overflow-y: auto; }
#fx-sheet .fx-source { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 4px 12px; font-size: 12px; color: var(--muted, inherit); }
#fx-sheet #fx-refresh {border: none; border-radius: 12px; background: var(--faint, rgba(255,255,255,.08)) !important; color: var(--text, inherit) !important; font-size: 16px; margin: 0; }
#fx-sheet .fx-head { display: grid; grid-template-columns: 1.1fr 1fr 1fr 64px; gap: 6px; padding: 0 12px 6px; font-size: 11px; font-weight: 700; color: var(--muted, inherit); }
#fx-sheet .fx-head span:nth-child(n+2) { text-align: right; }
#fx-sheet .fx-row-item { padding: 10px 12px; margin-bottom: 8px; border-radius: 18px; background: var(--faint, rgba(255,255,255,.06)); border: 1px solid var(--stroke, rgba(255,255,255,.08)); }
#fx-sheet .fx-row-top { display: grid; grid-template-columns: 1.1fr 1fr 1fr 64px; gap: 6px; align-items: center; }
#fx-sheet .fx-cur { display: flex; align-items: center; gap: 6px; font-size: 14px; }
#fx-sheet .fx-vals { text-align: right; display: flex; flex-direction: column; }
#fx-sheet .fx-vals small { display: none; }
#fx-sheet .fx-vals b { font-size: 13px; font-variant-numeric: tabular-nums; }
#fx-sheet .fx-sw { justify-self: end; }
#fx-sheet .fx-row-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
#fx-sheet .fx-delta { font-size: 12px; font-weight: 700; color: var(--muted, inherit); }
#fx-sheet .fx-delta.up { color: var(--out, #ff4b5c); }
#fx-sheet .fx-delta.down { color: var(--in, #27AE60); }
#fx-sheet .fx-h { margin: 14px 4px 8px; font-size: 14px; font-weight: 800; }
#fx-sheet .fx-empty { padding: 16px; text-align: center; color: var(--muted, inherit); font-size: 13px; }
.akulka-card { margin-top: 34px; overflow: visible; }
.akulka-card img { bottom: auto; top: -26px; left: -2px; filter: drop-shadow(0 8px 14px rgba(0,0,0,.35)); }
#summary-blocks .block-title .emoji { display: none; }
#summary-blocks #block-budget .block-title { font-size: 14px; font-weight: 600; color: var(--muted, inherit); }
#summary-blocks #block-budget .block-value { font-family: var(--font-num, inherit); font-size: 38px; font-weight: 600; letter-spacing: -.03em; }
.empty-card { list-style: none; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 18px; border-radius: 24px; text-align: center;
    background: var(--glass, rgba(255,255,255,.05)); border: 1.5px dashed var(--stroke, rgba(255,255,255,.18)); color: var(--muted, inherit);
    -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.empty-card .empty-shark { width: 96px; height: 96px; object-fit: contain; }
.empty-card .empty-text { font-size: 14px; line-height: 1.45; }
#fx-sheet .sheet-title-row { display:flex !important; flex-direction:row !important; align-items:center; justify-content:space-between; }
#fx-sheet .sheet-title-row h2 { margin:0; font-size:20px; font-weight:800; }
#fx-sheet .sheet-x {flex:0 0 34px; }
.pl-table{border-radius:20px;background:var(--glass);border:1px solid var(--stroke);overflow:hidden}
.pl-tr{display:grid;grid-template-columns:1.2fr 1fr 1fr 1.2fr;gap:6px;align-items:center;padding:10px 14px;font-size:13px;border-top:1px solid var(--stroke);font-family:var(--font-num)}
.pl-tr:first-child{border-top:none}
.pl-th{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;font-family:inherit}
.pl-tr>div:not(.pl-day){text-align:right}
.pl-day b{display:block;font-weight:700;color:var(--text)}
.pl-day small{color:var(--muted);font-size:11px}
.pl-in{color:var(--in)}.pl-out{color:var(--out)}
.pl-bal{font-weight:800;color:var(--text)}.pl-bal.neg{color:var(--out)}
.pl-tr.is-today{background:var(--chip);box-shadow:inset 3px 0 0 var(--accent)}
.pl-more{display:block;width:100%;margin-top:10px;min-height:42px;border:1px solid var(--stroke);border-radius:14px;background:var(--glass2);color:var(--accent);font-weight:700;cursor:pointer}
.planner-form-row{border-radius:18px;background:var(--glass);border:1px solid var(--stroke);padding:12px}
.planner-form-row input:not([type=checkbox]),.planner-form-row select{background:var(--faint) !important;border:1px solid var(--stroke) !important;border-radius:14px !important;color:var(--text) !important;min-height:46px}
.planner-category-select-button{width:100%;min-height:50px;border-radius:14px;text-align:left;padding:0 14px;background:var(--faint) !important;border:1px solid var(--stroke) !important;color:var(--text) !important;font-size:15px;font-weight:700;box-shadow:none !important}
.planner-category-select-button::after{content:'▾';float:right;opacity:.6}
.planner-field-error{color:var(--out);font-size:12px;margin-top:4px}
#planner-sheet input[type="date"]{display:none !important}
#planner-sheet .date-field{width:100%;margin:4px 0 8px}
.planner-form-row .date-field{flex:1 1 100%}
.quick-cats{flex-wrap:nowrap !important;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.quick-cats::-webkit-scrollbar{display:none}
.quick-cats .quick-chip{flex:none;white-space:nowrap}
footer.liquid-footer{flex-direction:row !important;align-items:center !important;justify-content:center;gap:10px !important;padding:6px 16px max(26px, env(safe-area-inset-bottom)) !important}
footer.liquid-footer .liquid-nav{order:1;flex:1 1 auto;width:auto !important;min-width:0}
footer.liquid-footer .fab-btn{order:2;flex:0 0 64px;margin:0 !important;align-self:center !important;width:64px;height:64px;transition:transform .2s,opacity .2s,width .25s,flex-basis .25s,margin .25s;box-shadow:0 10px 30px var(--orb3, rgba(61,255,160,.3)), inset 0 1px 0 rgba(255,255,255,.25)}
footer.liquid-footer .fab-btn.fab-hidden{flex-basis:0;width:0 !important;margin-left:-10px !important;overflow:hidden}
#month-picker-sheet .sheet-title-row{display:flex;align-items:center;justify-content:space-between;padding:0 4px 12px}
#month-picker-sheet .sheet-title{margin:0;font-size:20px;font-weight:800;color:var(--text)}
#month-picker-sheet .sheet-x{border-radius:17px}
#month-picker-sheet .month-sheet-header{margin-bottom:14px}
#month-picker-sheet .year-display{font-family:var(--font-num);font-weight:800;color:var(--text);min-width:70px;text-align:center}
#month-picker-sheet .year-nav-btn{width:38px;height:38px;justify-content:center;border-radius:19px;background:var(--chip) !important;border:1px solid var(--stroke);color:var(--text)}
#month-picker-sheet .months-grid{gap:8px}
#month-picker-sheet .month-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:58px;padding:8px 6px;border-radius:16px;background:var(--faint) !important;border:1px solid var(--stroke) !important;color:var(--text) !important}
#month-picker-sheet .month-item .mi-name{font-size:14px;font-weight:700}
#month-picker-sheet .month-item .mi-sum{font-size:11px;font-weight:700;color:var(--out);font-family:var(--font-num)}
#month-picker-sheet .month-item.is-future{opacity:.35}
#month-picker-sheet .month-item.active{background:var(--accent) !important;border-color:transparent !important;color:var(--ink) !important;box-shadow:0 6px 18px var(--orb3,rgba(61,255,160,.25))}
#month-picker-sheet .month-item.active .mi-sum{color:var(--ink);opacity:.75}
#month-picker-sheet .month-range-actions{display:flex;gap:8px;margin:12px 0 0}
#month-picker-sheet .all-months-btn{flex:1;min-height:48px;border-radius:16px;background:var(--faint) !important;border:1px solid var(--stroke) !important;color:var(--text) !important;font-weight:700}
#month-picker-sheet .all-months-btn.active{background:var(--accent) !important;color:var(--ink) !important;border-color:transparent !important}
#budget-switch-sheet img{display:none}
#budget-switch-sheet h2{display:flex;align-items:center;gap:8px;font-size:20px;font-weight:800;color:var(--text);margin:0 0 6px}
#budget-switch-sheet h2 svg{color:var(--accent)}
#budget-switch-sheet h2 .sheet-x{margin:0 0 0 auto;border-radius:17px}
#budget-switch-sheet .budget-desc{text-align:left;font-size:13px;color:var(--muted);margin:4px 0 14px}
#budget-switch-sheet .budget-desc strong{color:var(--text);font-weight:700}
#budget-switch-sheet .budget-list{max-height:34vh;padding:2px;margin:0 0 14px}
#budget-switch-sheet .budget-item{background:var(--faint) !important;border:1px solid var(--stroke) !important;border-radius:18px;box-shadow:none;padding:12px 14px}
#budget-switch-sheet .budget-item-active{border-color:var(--accent) !important;background:var(--chip) !important}
#budget-switch-sheet .budget-emoji{width:40px;height:40px;border-radius:14px;background:var(--chip);display:flex;align-items:center;justify-content:center;font-size:20px}
#budget-switch-sheet .budget-name{font-size:16px;font-weight:800;color:var(--text)}
#budget-switch-sheet .budget-meta{font-size:12px;color:var(--muted);font-family:var(--font-num)}
#budget-switch-sheet .budget-check{color:var(--accent);font-weight:900;font-size:18px;margin-left:auto}
#budget-switch-sheet .delete-budget-btn{background:transparent !important;opacity:.6;margin-left:6px}
#budget-switch-sheet .budget-add{display:block;border:none !important;background:transparent !important;padding:0;margin:0 0 10px}
#budget-switch-sheet .budget-add span{display:none}
#budget-switch-sheet .budget-add input{width:100%}
#budget-switch-sheet #add-budget-btn{width:100%;min-height:54px;border-radius:27px;background:var(--accent) !important;color:var(--ink) !important;font-weight:800;border:none}
#budget-switch-sheet #close-budget-sheet{display:none}
footer.liquid-footer .liquid-nav{padding:0 4px;gap:2px;justify-content:space-between}
footer.liquid-footer .lnav-item{padding:8px 4px !important;min-width:0;flex:1 1 0}
#budget-switch-sheet .budget-add input{background:var(--faint) !important;border:1px solid var(--stroke) !important;border-radius:16px;padding:0 16px;color:var(--text) !important}
#planner-sheet .date-field{order:0 !important;margin-top:4px}
footer.liquid-footer #add-btn.fab-btn{background:var(--accent) !important;color:var(--ink) !important;border:none !important;border-radius:50% !important;
  box-shadow:0 10px 30px var(--orb3, rgba(61,255,160,.3)), inset 0 1px 0 rgba(255,255,255,.35) !important}
footer.liquid-footer #add-btn.fab-btn .budgetit-fab-svg{width:30px;height:30px;filter:none}
footer.liquid-footer #add-btn.fab-btn.fab-hidden{transform:none !important;opacity:1 !important;pointer-events:auto !important;flex-basis:64px !important;width:64px !important;margin:0 !important}
footer.liquid-footer #add-btn.fab-btn,
footer.liquid-footer #add-btn.fab-btn.fab-hidden{
  box-sizing:border-box !important;width:64px !important;height:64px !important;min-width:64px !important;max-width:64px !important;
  min-height:64px !important;max-height:64px !important;aspect-ratio:1/1;padding:0 !important;margin:0 !important;
  flex:0 0 64px !important;align-self:center !important;border-radius:32px !important;line-height:1}
footer.liquid-footer #add-btn.fab-btn .budgetit-fab-svg{width:28px !important;height:28px !important;filter:none !important}
footer.liquid-footer #add-btn.fab-btn .budgetit-fab-svg path{stroke-width:2.2 !important}
#month-picker-sheet .month-item .mi-inc{font-size:11px;font-weight:700;color:var(--in);font-family:var(--font-num)}
#month-picker-sheet .month-item .mi-none{font-size:11px;color:var(--muted)}
#month-picker-sheet .month-item.is-empty{opacity:.6}
#month-picker-sheet .month-item.is-future{pointer-events:none}
#month-picker-sheet .month-item.active .mi-inc{color:var(--ink);opacity:.75}
#accounts-page .acc-flow{cursor:default}
#accounts-page .acc-flow.is-in .acc-sum{color:var(--save, var(--in))}
#accounts-page .acc-flow.is-out .acc-sum{color:var(--out)}
#accounts-page .acc-flow-note{font-size:12.5px;color:var(--muted);padding:0 6px 8px}
#accounts-page .acc-flow-note b{color:var(--text);font-family:var(--font-num)}
.ei-banks{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:12px 0 4px;padding:2px}
.ei-banks::-webkit-scrollbar{display:none}
.ei-banks span{flex:none;padding:6px 12px;border-radius:14px;background:var(--faint);border:1px solid var(--stroke);font-size:12.5px;font-weight:700;color:var(--text)}
.ei-cols{margin:6px 0 4px}
.ei-cols-sum{display:flex;justify-content:space-between;align-items:center;cursor:pointer;list-style:none}
.ei-cols-sum::-webkit-details-marker{display:none}
.ei-cols-sum span{font-size:12px;font-weight:700;color:var(--accent);text-transform:none;letter-spacing:0}
.ei-section-title{display:flex;align-items:center;justify-content:space-between}
.ei-toggle-all{border:none;background:var(--chip);color:var(--accent);font-weight:700;font-size:12px;border-radius:12px;padding:6px 10px;cursor:pointer;text-transform:none;letter-spacing:0}
.ei-preview-list{display:flex;flex-direction:column;gap:6px;max-height:46vh;overflow-y:auto;padding:2px;margin-bottom:10px}
.ei-op{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:16px;background:var(--glass);border:1px solid var(--stroke);cursor:pointer}
.ei-op.is-off{opacity:.45}
.ei-op input{width:20px;height:20px;min-height:0 !important;flex:none;accent-color:var(--accent)}
.ei-op-emoji{width:34px;height:34px;border-radius:12px;background:var(--faint);display:flex;align-items:center;justify-content:center;font-size:17px;flex:none}
.ei-op-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.ei-op-main b{font-size:14px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ei-op-main b i{font-style:normal;font-size:10.5px;font-weight:700;color:var(--debt);margin-left:6px}
.ei-op-main small{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ei-op-sum{font-family:var(--font-num);font-weight:700;font-size:14px;flex:none}
.ei-op.ei-type-income .ei-op-sum{color:var(--in)}
.ei-op.ei-type-expense .ei-op-sum{color:var(--out)}
#ei-btn-import:disabled{opacity:.45}
#transaction-sheet .ei-section-title{margin:14px 2px 8px;gap:8px}
#transaction-sheet .ei-section-title #ei-preview-count{margin-right:auto;margin-left:6px;font-weight:700;color:var(--muted)}
#transaction-sheet button.ei-toggle-all{width:auto !important;min-height:0 !important;height:30px;margin:0 !important;padding:0 12px;flex:none}
#transaction-sheet .ei-actions{display:flex;gap:10px;align-items:center;margin-top:6px}
#transaction-sheet .ei-actions .ei-btn-secondary{flex:none;width:auto;min-height:54px;padding:0 20px;border-radius:27px;background:var(--faint) !important;color:var(--text) !important;border:1px solid var(--stroke) !important}
#transaction-sheet .ei-actions .ei-btn-primary{flex:1;width:auto;min-height:54px;border-radius:27px;background:var(--accent) !important;color:var(--ink) !important;font-weight:800;border:none;white-space:nowrap;font-size:15px}
.side-col{display:contents}
.lnav-desk{display:none !important}
@media (min-width:1100px){
  :root{--sb:280px}
  body{padding-left:var(--sb);height:100vh}
  header{left:var(--sb) !important;padding:10px 28px !important;background:transparent !important;border-bottom:none !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important}
  header .header-button{gap:10px}
  main{padding:76px 28px 40px !important;display:grid !important;grid-template-columns:minmax(0,720px);justify-content:center;align-content:start;background:transparent !important}
  main .wrapper{padding-left:0;padding-right:0}
  footer.liquid-footer{left:16px !important;right:auto !important;top:16px !important;bottom:16px !important;width:248px;flex-direction:column !important;align-items:stretch !important;justify-content:flex-start !important;gap:4px !important;padding:20px 14px !important;pointer-events:auto;border-radius:24px}
  footer.liquid-footer::before{content:'BudgetIt';order:0;display:flex;align-items:center;height:44px;padding-left:52px;margin:0 6px 16px;font-family:var(--font-num);font-weight:700;font-size:20px;color:var(--text);background:url(/assets/shark.png) 0 50% / 40px 40px no-repeat}
  footer.liquid-footer::after{content:'';position:absolute;inset:0;z-index:-1;border-radius:24px;background:var(--glass);border:1px solid var(--stroke);box-shadow:inset 0 1px 0 var(--hi);backdrop-filter:blur(28px) saturate(170%);-webkit-backdrop-filter:blur(28px) saturate(170%)}
  footer.liquid-footer .liquid-nav{order:1;flex:0 0 auto !important;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:4px;width:auto !important;min-height:0;padding:0 !important;background:none !important;border:none !important;box-shadow:none !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;animation:none}
  .lnav-desk{display:flex !important}
  footer.liquid-footer .lnav-item{flex-direction:row !important;justify-content:flex-start;gap:12px;padding:12px 14px !important;border-radius:32px;flex:0 0 auto !important}
  footer.liquid-footer .lnav-item .lnav-label{font-size:14px;font-weight:700}
  footer.liquid-footer .lnav-item.active{background:var(--chip)}
  footer.liquid-footer #lnav-profile{order:9}
  footer.liquid-footer #lnav-accounts{order:5}
  footer.liquid-footer #lnav-import{order:6}
  footer.liquid-footer #add-btn.fab-btn{position:fixed;right:32px;bottom:32px;order:0}
  .bottom-sheet:not(.fullscreen-sheet){max-width:520px;margin-left:auto !important;margin-right:auto !important}
  .fullscreen-sheet{left:var(--sb) !important;width:auto !important}
  .fullscreen-sheet .subpage-content,.fullscreen-sheet .wrapper-sm{max-width:760px;margin-left:auto;margin-right:auto}
  .fullscreen-sheet .subpage-header{padding-left:28px;padding-right:28px}
}
@media (min-width:1100px){
  .fullscreen-sheet{left:var(--sb) !important;right:0 !important;max-width:none !important;margin:0 !important;width:auto !important}
  .fullscreen-sheet .subpage-header{padding-left:max(28px, calc((100% - 760px) / 2)) !important;padding-right:max(28px, calc((100% - 760px) / 2)) !important}
}
@media (min-width:1360px){
  main{grid-template-columns:minmax(0,720px) 330px !important;column-gap:24px}
  main > #summary-blocks, main > #transactions-header, main > #transaction-list{grid-column:1}
  main > .side-col{display:flex;flex-direction:column;gap:12px;grid-column:2;grid-row:1 / span 3;position:sticky;top:0;align-self:start}
  main > .side-col .akulka-card{margin-top:34px}
}
@media (min-width:1100px) and (max-width:1359px){
  main > .side-col{display:flex;flex-direction:column;gap:12px;margin-bottom:8px}
  header{padding-left:max(28px, calc((100vw - var(--sb) - 720px) / 2)) !important;padding-right:max(28px, calc((100vw - var(--sb) - 720px) / 2)) !important}
  main{padding-bottom:110px !important}
}
@media (min-width:1360px){
  header{padding-left:max(28px, calc((100vw - var(--sb) - 1074px) / 2)) !important;padding-right:max(28px, calc((100vw - var(--sb) - 1074px) / 2)) !important}
}
.dw-add,.dw-budget,.dw-card,.dw-search-txt{display:none}
@media (min-width:1100px){
  footer.liquid-footer #add-btn.fab-btn{display:none !important}
  #current-budget{display:none !important}
  header{display:flex;justify-content:flex-end}
  header .header-button{display:flex;align-items:center;gap:12px}
  header #month-picker-btn{order:0;font-family:var(--font-num);font-weight:700;font-size:15px}
  header #search-open-btn{order:1;display:flex !important;align-items:center;gap:10px;width:300px;height:44px;padding:0 16px;border-radius:22px;background:var(--glass) !important;border:1px solid var(--stroke) !important;color:var(--muted) !important;font-size:14px;justify-content:flex-start}
  .dw-search-txt{display:inline;font-size:13.5px;font-weight:500}
  .dw-add{display:inline-flex;order:2;align-items:center;height:44px;padding:0 22px;border-radius:22px;border:none;background:var(--accent);color:var(--ink);font-weight:800;font-size:14px;cursor:pointer;box-shadow:0 8px 24px -8px var(--accent)}
  .dw-budget{display:flex;order:20;margin-top:auto;align-items:center;gap:8px;padding:12px 14px;border-radius:16px;background:var(--chip);border:1px solid var(--stroke);color:var(--text);cursor:pointer;text-align:left;position:relative}
  .dw-budget small{position:absolute;top:6px;left:14px;font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
  .dw-budget b{flex:1;margin-top:10px;font-size:14px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #summary-blocks{display:grid !important;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:12px;align-items:stretch}
  #summary-blocks > .summary-block{width:auto !important;max-width:none !important;margin:0 !important;min-width:0}
  #summary-blocks #block-budget{grid-column:1;grid-row:1}
  #summary-blocks #block-income{grid-column:2;grid-row:1}
  #summary-blocks #block-expense{grid-column:3;grid-row:1}
  #summary-blocks #block-deposit{grid-column:4;grid-row:1}
  #summary-blocks #block-debt{grid-column:1;grid-row:2}
  #summary-blocks .fx-holder{grid-column:2 / span 3;grid-row:2;align-self:center}
  #summary-blocks #block-budget .block-value{font-family:var(--font-num);font-size:28px}
  .dw-card{display:block;padding:18px;border-radius:22px;background:var(--glass);border:1px solid var(--stroke);box-shadow:inset 0 1px 0 var(--hi);backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%)}
  .dw-card h3{margin:0 0 12px;font-size:13px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
  .dw-row{margin-bottom:12px}
  .dw-row-h{display:flex;align-items:baseline;gap:8px;font-size:13px}
  .dw-row-h span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .dw-row-h em{font-style:normal;color:var(--muted);font-size:12px;min-width:34px;text-align:right}
  .dw-bar{height:6px;border-radius:3px;background:var(--faint);margin-top:6px;overflow:hidden}
  .dw-bar i{display:block;height:100%;border-radius:3px}
  .dw-empty{margin:0;font-size:13px;color:var(--muted)}
  .dw-big{font-family:var(--font-num);font-size:28px;font-weight:700}
  .dw-big small{font-family:inherit;font-size:13px;font-weight:500;color:var(--muted)}
  .dw-dots{display:grid;grid-template-columns:repeat(16,1fr);gap:5px;margin-top:14px}
  .dw-dots i{aspect-ratio:1;border-radius:50%;background:var(--faint)}
  .dw-dots i.ok{background:var(--in)} .dw-dots i.over{background:var(--out)}
  .dw-dots i.today{outline:2px solid var(--accent);outline-offset:2px}
}
@media (min-width:1100px) and (max-width:1359px){
  main > .side-col .dw-card{display:none}
}
header .search-open-btn{font-size:0 !important;width:38px !important;height:38px !important;min-width:38px;padding:0 !important;position:relative}
header .search-open-btn::before{content:'';width:12px;height:12px;border-radius:50%;border:2px solid var(--text);box-sizing:content-box;position:relative;top:-1px;left:-1px;flex:none}
header .month-picker-btn{height:38px !important}
#current-budget.budget-name-btn{font-size:18px !important;font-weight:800 !important;gap:8px !important}
#current-budget .budget-name-chevron{font-size:12px !important;color:var(--muted);opacity:1 !important}
@media (min-width:1100px){
  header #search-open-btn{width:300px !important;height:44px !important;font-size:0 !important;padding:0 16px !important;gap:10px}
  header #search-open-btn::before{top:0;left:0;width:11px;height:11px}
  header #month-picker-btn{height:44px !important}
}
header .header-button{display:flex !important;align-items:center}
header #month-picker-btn{order:0 !important}
header #search-open-btn{order:1 !important}
header .search-open-btn::before{width:11px !important;height:11px !important;top:-1px !important;left:-1px !important}
header .search-open-btn::after{content:'';position:absolute;width:2px;height:6px;border-radius:1px;background:var(--text);left:calc(50% + 4px);top:calc(50% + 3px);transform:rotate(-45deg);transform-origin:top center}
@media (min-width:1100px){
  header #search-open-btn{padding-left:34px !important;justify-content:flex-start}
  header #search-open-btn::before{position:absolute !important;left:16px !important;top:50% !important;margin-top:-7px}
  header #search-open-btn::after{left:calc(16px + 12px);top:calc(50% + 2px)}
}
#analytics-page section:has(canvas){border-left:none !important}
#analytics-page .analytics-scroll section:has(canvas){background:var(--glass) !important;border:1px solid var(--stroke) !important;border-radius:22px !important;box-shadow:inset 0 1px 0 var(--hi);padding:16px !important}
#analytics-page .analytics-scroll section h4{font-size:15px;font-weight:800;color:var(--text) !important}
#analytics-page .donut-row{display:flex;align-items:center;gap:16px;margin-top:12px}
#analytics-page .donut-wrap{position:relative;width:150px;height:150px;flex:none}
#analytics-page .donut-wrap canvas{margin-top:0 !important;width:150px !important;height:150px !important}
#analytics-page #expensesByCategoryCenterText{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);text-align:center;line-height:1.15}
#analytics-page #expensesByCategoryCenterText .center-total{margin-top:0 !important;font-family:var(--font-num);font-size:20px;font-weight:700;color:var(--text)}
#analytics-page #expensesByCategoryCenterText .center-label{font-size:11px;color:var(--muted)}
#analytics-page .donut-legend{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
#analytics-page .dn-leg{display:flex;align-items:center;gap:8px;padding:5px 6px;border-radius:10px;border:none;background:none;color:var(--text);font-size:13px;font-weight:600;cursor:pointer;text-align:left}
#analytics-page .dn-leg i{width:8px;height:8px;border-radius:50%;flex:none}
#analytics-page .dn-leg span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#analytics-page .dn-leg b{font-weight:700;color:var(--muted);font-size:12.5px}
#analytics-page .an-hero{margin:12px 4px 0;padding:18px !important;border-radius:22px;background:var(--glass);border:1px solid var(--stroke);box-shadow:inset 0 1px 0 var(--hi)}
.an-hero-title{font-size:13px;font-weight:700;color:var(--muted)}
.an-hero-sum{font-family:var(--font-num);font-size:32px;font-weight:700;margin-top:6px;color:var(--text)}
.an-hero-sum small{font-family:inherit;font-size:15px;font-weight:600;color:var(--muted)}
.an-hero-delta{margin-top:6px;font-size:13px;font-weight:700;color:var(--muted)}
#analytics-page .an-tip{display:flex;gap:12px;align-items:center;margin:12px 4px 0;padding:14px !important;border-radius:22px;background:var(--glass);border:1px solid var(--stroke);box-shadow:inset 0 1px 0 var(--hi)}
.an-tip img{width:56px;height:56px;object-fit:contain;flex:none}
.an-tip-title{font-size:13px;font-weight:800;color:var(--debt)}
.an-tip-text{margin-top:4px;font-size:14px;line-height:1.4;color:var(--text);font-weight:500}
.an-tip-fact{margin-top:8px;padding-top:8px;border-top:1px solid var(--stroke);font-size:12px;line-height:1.35;color:var(--muted);font-weight:600}
.accounts-row{height:46px;margin:8px 16px 0 !important;width:auto !important;padding:0 14px !important;border-radius:16px !important;background:var(--faint) !important;border:none !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important;justify-content:space-between;font-size:14px;font-weight:700}
.accounts-row-title{font-weight:700}
.accounts-row-sum{color:var(--muted);font-weight:700}
#transaction-list li.tx-day-head{margin:0 !important;padding:12px 20px !important;border-radius:0 !important;border-bottom:1px solid var(--faint);align-items:center;font-size:13px;letter-spacing:0;background:var(--sticky) !important;-webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%)}
#transaction-list li.tx-day-head .tx-day-label{display:flex;align-items:baseline;gap:8px;text-transform:none}
#transaction-list li.tx-day-head .tx-day-label b{font-size:15px;font-weight:800;color:var(--text)}
#transaction-list li.tx-day-head .tx-day-label small{font-size:13px;font-weight:600;color:var(--muted)}
#transaction-list li.tx-day-head .tx-day-total{display:flex;align-items:baseline;gap:8px;font-variant-numeric:tabular-nums}
#transaction-list li.tx-day-head .tx-day-inc{font-style:normal;font-size:13px;font-weight:700;color:var(--in)}
#transaction-list li.tx-day-head .tx-day-spent{font-size:15px;font-weight:800;color:var(--text)}
#transaction-list li.tx-item{margin:0 16px !important;width:auto !important;padding:12px 14px !important;border-radius:0 !important;border:1px solid var(--stroke) !important;border-top:none !important;box-shadow:none !important;background:var(--glass) !important;-webkit-backdrop-filter:blur(24px) saturate(170%);backdrop-filter:blur(24px) saturate(170%);transform:none !important;align-items:center}
#transaction-list li.tx-item.tx-first{margin-top:8px !important;border-top:1px solid var(--stroke) !important;border-radius:22px 22px 0 0 !important;box-shadow:inset 0 1px 0 var(--hi) !important}
#transaction-list li.tx-item.tx-last{margin-bottom:10px !important;border-radius:0 0 22px 22px !important}
#transaction-list li.tx-item.tx-first.tx-last{border-radius:22px !important}
#transaction-list li.tx-item:not(.tx-first){box-shadow:inset 0 1px 0 var(--faint) !important}
#transaction-list li.tx-item .tx-card-inner{align-items:center;gap:12px}
#transaction-list li.tx-item .tx-emoji{width:42px;height:42px;border-radius:14px;background:var(--faint);display:flex;align-items:center;justify-content:center;font-size:20px;flex:none}
#transaction-list li.tx-item .tx-main{flex:1;min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;align-items:center}
#transaction-list li.tx-item .tx-top-row,#transaction-list li.tx-item .tx-bottom-row{display:contents}
#transaction-list li.tx-item .tx-title-wrap{grid-column:1;grid-row:1;min-width:0}
#transaction-list li.tx-item .tx-title{font-size:15px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
#transaction-list li.tx-item .tx-sub,#transaction-list li.tx-item .tx-income-name{grid-column:1;grid-row:2;font-size:12.5px;font-weight:600;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#transaction-list li.tx-item .tx-date{display:none}
#transaction-list li.tx-item .tx-amount{grid-column:2;grid-row:1 / span 2;font-family:var(--font-num);font-size:15px;font-weight:800;color:var(--text);white-space:nowrap;text-align:right}
#transaction-list li.tx-item .tx-amount-plus{color:var(--in)}
#transaction-list li.tx-item .tx-debt-status,#transaction-list li.tx-item .tx-debt-pay{grid-column:2;grid-row:2}
#settings-page .settings-header{padding:8px 20px 0 !important;margin:0 !important;background:none !important;border:none !important}
#settings-page .settings-header h2{font-family:var(--font-num);font-size:24px;font-weight:600;margin:0;color:var(--text)}
#settings-page .sp-hero-wrap{margin:14px 0 0 !important;padding:0 16px !important}
#settings-page .sp-hero-card{display:flex !important;gap:14px;align-items:center;padding:18px !important;border-radius:26px !important;background:var(--glass2) !important;border:1px solid var(--stroke) !important;box-shadow:inset 0 1px 0 var(--hi) !important;-webkit-backdrop-filter:blur(24px) saturate(170%);backdrop-filter:blur(24px) saturate(170%)}
#settings-page .sp-hero-avatar{width:68px !important;height:68px !important;border-radius:34px !important;background:var(--faint) !important;border:2px solid var(--accent) !important;overflow:hidden;flex:none;padding:0 !important;box-shadow:none !important}
#settings-page .sp-hero-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;transform:scale(1.28);transform-origin:center}
#settings-page .sp-hero-right{flex:1;min-width:0}
#settings-page .sp-hero-nameline{display:flex;align-items:center;gap:8px}
#settings-page .sp-hero-name{font-size:17px !important;font-weight:800 !important;color:var(--text) !important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0 !important}
#settings-page .sp-hero-lvl-badge{position:static !important;transform:none !important;display:inline-block;padding:3px 8px !important;border-radius:999px !important;background:var(--accent) !important;color:var(--ink) !important;font-size:11px !important;font-weight:800 !important;border:none !important;box-shadow:none !important;flex:none;line-height:1.3}
#settings-page .sp-hero-id{font-size:12px !important;color:var(--muted) !important;font-weight:600;margin-top:3px !important}
#settings-page .sp-hero-progress-bar{height:6px !important;border-radius:3px !important;background:var(--faint) !important;margin-top:10px !important;overflow:hidden}
#settings-page .sp-hero-progress-fill{height:100%;border-radius:3px !important;background:var(--accent) !important}
#settings-page .sp-hero-pts{font-size:12px !important;color:var(--muted) !important;font-weight:700;margin-top:6px !important}
#settings-page .banner-carousel.wrapper-sm{margin:12px 16px 0 !important;padding:0 !important;border-radius:22px !important;width:auto !important}
#settings-page .hr-spacing{display:none}
#settings-page .sp-nav-list.settings-nav-list{padding:0 !important}
#settings-page .sp-nav-group{margin:12px 16px 0 !important;overflow:hidden}
#settings-page .sp-nav-btn{display:flex !important;align-items:center;gap:12px;padding:13px 14px !important;width:100%;border:none !important;border-top:1px solid var(--faint) !important;border-radius:0 !important;text-align:left}
#settings-page .sp-nav-group > .sp-nav-btn:first-child{border-top:none !important}
#settings-page .sp-nav-icon{width:36px !important;height:36px !important;border-radius:11px !important;background:var(--faint) !important;display:flex;align-items:center;justify-content:center;font-size:17px;flex:none;box-shadow:none !important;color:var(--text)}
#settings-page .sp-nav-text-wrap{flex:1;min-width:0;display:flex;flex-direction:column}
#settings-page .sp-nav-text{font-size:15px !important;font-weight:700 !important}
#settings-page .sp-nav-sub{font-size:12.5px !important;font-weight:600;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#settings-page .sp-nav-arr{font-size:18px}
#settings-page .akulka-projects{margin:0 !important;padding:0 !important;max-width:none}
#settings-page .company-title{font-size:12px !important;color:var(--muted);font-weight:800 !important;letter-spacing:.05em;text-transform:uppercase;padding:24px 20px 8px;margin:0 !important}
#settings-page .company-subtitle{display:none}
#settings-page .products-grid{display:flex !important;gap:8px;padding:0 16px 8px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
#settings-page .products-grid::-webkit-scrollbar{display:none}
#settings-page .product-card{flex:none;width:130px;padding:12px !important;border-radius:18px !important;background:var(--glass) !important;border:1px solid var(--stroke) !important;box-shadow:none !important;text-align:left !important;scroll-snap-align:start;color:var(--text)}
#settings-page .product-icon{width:36px !important;height:36px !important;border-radius:10px !important;margin:0 !important;object-fit:cover}
#settings-page .product-card h3{font-size:13.5px !important;font-weight:800;margin:8px 0 0 !important}
#settings-page .product-card p{font-size:11.5px !important;font-weight:600;color:var(--muted);margin:2px 0 0 !important;line-height:1.35}
#settings-page .product-version{display:inline-block;margin-top:6px;padding:2px 7px;border-radius:999px;background:var(--faint);font-size:10.5px !important;font-weight:700;opacity:1 !important;color:var(--muted)}
@media (max-width:1099px){
  html,body{background-color:var(--bg) !important}
  main{
    background-color:transparent !important;
    background-image:
      radial-gradient(circle 360px at -40px 40px, var(--orb1), transparent 72%),
      radial-gradient(circle 320px at calc(100% + 60px) 340px, var(--orb2), transparent 72%),
      radial-gradient(circle 280px at 60px calc(100% - 10px), var(--orb3), transparent 72%) !important;
    background-repeat:no-repeat !important;background-size:auto !important;background-attachment:fixed !important}
}
@media (min-width:1100px){
  html,body{background-color:var(--canvas,var(--bg)) !important}
  body{background-image:
      radial-gradient(circle 420px at calc(var(--sb,280px) - 60px) 40px, var(--orb1), transparent 72%),
      radial-gradient(circle 380px at calc(100% + 60px) 340px, var(--orb2), transparent 72%),
      radial-gradient(circle 340px at 40% calc(100% + 40px), var(--orb3), transparent 72%) !important;
    background-repeat:no-repeat !important;background-attachment:fixed !important}
  main{background-image:none !important;background-color:transparent !important}
}
#theme-options-container{grid-template-columns:repeat(2,1fr) !important;gap:10px !important;padding:4px 0 24px !important}
#theme-options-container .theme-card{background:var(--glass) !important;border:2px solid var(--stroke) !important;border-radius:20px !important;box-shadow:inset 0 1px 0 var(--hi) !important;padding:6px;display:block;text-align:left;color:var(--text)}
#theme-options-container .theme-card.active{border-color:var(--accent) !important;box-shadow:inset 0 1px 0 var(--hi) !important}
#theme-options-container .tp-preview.tp-glass{position:relative;display:block !important;height:96px !important;border-radius:14px !important;padding:0 !important;overflow:hidden}
.tp-glass .tp-orb{position:absolute;width:76px;height:76px;border-radius:50%;filter:blur(18px);top:-18px;left:-12px}
.tp-glass .tp-c1{position:absolute;left:10px;right:10px;top:38px;height:16px;border-radius:6px}
.tp-glass .tp-c2{position:absolute;left:10px;width:46px;top:62px;height:16px;border-radius:6px}
.tp-glass .tp-dot2{position:absolute;right:10px;bottom:10px;width:18px;height:18px;border-radius:9px}
#theme-options-container .tc-info{padding:8px 4px 3px !important;background:none !important}
#theme-options-container .tc-name{font-size:13px;font-weight:800;color:var(--text) !important}
#theme-options-container .tc-desc{font-size:11.5px;font-weight:600;color:var(--muted) !important}
#theme-options-container .tc-check{display:none !important}
#region-page .subpage-content{padding:4px 0 120px !important}
.rg-wrap{background:none !important;border:none !important;padding:0 !important;display:block !important}
.rg-label{font-size:12px;color:var(--muted);font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:18px 20px 8px}
.rg-wrap > .rg-label:first-child{padding-top:4px}
.rg-card{display:block;margin:0 16px;border-radius:22px;background:var(--glass);border:1px solid var(--stroke);box-shadow:inset 0 1px 0 var(--hi);-webkit-backdrop-filter:blur(24px) saturate(170%);backdrop-filter:blur(24px) saturate(170%);overflow:hidden}
.rg-row{display:flex;align-items:center;gap:12px;width:100%;padding:14px;background:none !important;border:none !important;border-top:1px solid var(--faint) !important;border-radius:0 !important;text-align:left;color:var(--text);cursor:pointer;box-sizing:border-box}
.rg-card > .rg-row:first-child{border-top:none !important}
.rg-single{display:flex;align-items:center;gap:12px;margin-top:12px;padding:14px;box-sizing:border-box;cursor:pointer}
.rg-ico{font-size:18px}
.rg-main{flex:1;min-width:0;display:flex;flex-direction:column}
.rg-main b{font-size:15px;font-weight:700;color:var(--text)}
.rg-main small{font-size:12.5px;font-weight:600;color:var(--muted);margin-top:2px}
.rg-check{width:24px;height:24px;border-radius:12px;background:var(--accent);color:var(--ink);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:900;flex:none}
.rg-note{font-size:12.5px;font-weight:600;color:var(--muted);padding:10px 20px 0}
#region-page .numfmt-seg{display:flex;gap:6px;padding:0 16px;background:none !important;border:none !important}
#region-page .numfmt-seg button{flex:1;height:44px;border-radius:14px;border:none;background:var(--faint) !important;color:var(--text) !important;font-size:14px;font-weight:800;font-variant-numeric:tabular-nums}
#region-page .numfmt-seg button.active{background:var(--text) !important;color:var(--bg) !important}
#transaction-list li.tx-day-head{box-sizing:border-box;width:auto !important;max-width:100%;min-width:0}
#transaction-list li.tx-day-head .tx-day-label{flex:1 1 auto;min-width:0;overflow:hidden}
#transaction-list li.tx-day-head .tx-day-label b{flex:none;white-space:nowrap}
#transaction-list li.tx-day-head .tx-day-label small{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#transaction-list li.tx-day-head .tx-day-total{flex:none;white-space:nowrap}
#transaction-list{overflow-x:clip}
main{overflow-x:clip}
.bottom-sheet.fullscreen-sheet.fullscreen-sheet,
#settings-page#settings-page,#analytics-page#analytics-page,#accounts-page#accounts-page,#planner-page#planner-page{
  background-color:var(--bg) !important;
  background-image:
    radial-gradient(circle 360px at -40px 40px, var(--orb1), transparent 72%),
    radial-gradient(circle 320px at calc(100% + 60px) 340px, var(--orb2), transparent 72%),
    radial-gradient(circle 280px at 60px calc(100% - 10px), var(--orb3), transparent 72%) !important;
  background-repeat:no-repeat !important;background-size:auto !important}
#settings-page .sp-hero-progress-bar{flex:none !important;display:block !important;min-height:6px}
#settings-page .sp-hero-progress-fill{display:block !important;min-width:4px}
@media (max-width:1099px){
  #open-accounts.accounts-row{width:calc(100% - 24px) !important;margin:8px 12px 0 !important;box-sizing:border-box;align-self:stretch}
}
.glass, #summary-blocks .summary-block, .akulka-card, .dw-card, .rg-card, .accounts-row, #transaction-list li.tx-item, #settings-page .sp-hero-card, #settings-page .sp-nav-group, .faq-item, .set-card, .empty-card, .about-hero, .budget-ctx-menu, #analytics-page .bi-kpi, #analytics-page .bi-health, #analytics-page .analytics-scroll section, #analytics-page .bi-card, #analytics-page .bi-ob-progress-block, #analytics-page .bi-ob-feat, #planner-page .planner-stat-card, #planner-page .planner-mini-card, #planner-page .planner-section-card, #planner-page .planner-insight-card, #planner-page .planner-hero, #planner-page .planner-day-card, .planner-stat-card, .planner-mini-card, .planner-section-card, .planner-insight-card, .planner-day-card, .bi-kpi-row .bi-kpi, .bi-health, .bi-cards .bi-card, .open-subpage-btn, .theme-option{
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important}
header{-webkit-backdrop-filter:blur(14px) !important;backdrop-filter:blur(14px) !important}
footer.liquid-footer::after{-webkit-backdrop-filter:blur(16px) !important;backdrop-filter:blur(16px) !important}
.bottom-sheet:not(.fullscreen-sheet), .sheet, .modal .modal-content{-webkit-backdrop-filter:blur(22px) saturate(150%) !important;backdrop-filter:blur(22px) saturate(150%) !important}
.budget-ctx-menu{
  background:color-mix(in srgb, var(--bg) 78%, transparent) !important;
  -webkit-backdrop-filter:blur(24px) saturate(160%) !important;backdrop-filter:blur(24px) saturate(160%) !important;
  border:1px solid var(--stroke, rgba(255,255,255,.12)) !important}
@supports not (background:color-mix(in srgb, red 50%, blue)){.budget-ctx-menu{background:var(--bg) !important}}
:root.low-fx .budget-ctx-menu{background:var(--bg) !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important}
#transaction-list li.tx-day-head{-webkit-backdrop-filter:none !important;backdrop-filter:none !important;background:color-mix(in srgb, var(--bg) 93%, transparent) !important}
@supports not (background:color-mix(in srgb, red 50%, blue)){#transaction-list li.tx-day-head{background:var(--bg) !important}}
.modal, #bottom-sheet-backdrop, .ctx-backdrop{-webkit-backdrop-filter:none !important;backdrop-filter:none !important}
@media (max-width:1099px){
  html,body{background-color:var(--bg) !important}
  body{background-color:transparent !important;background-image:none !important}
  main{background-image:none !important}
  body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;contain:strict;
    background-color:var(--bg);
    background-image:
      radial-gradient(circle 360px at -40px 40px, var(--orb1), transparent 72%),
      radial-gradient(circle 320px at calc(100% + 60px) 340px, var(--orb2), transparent 72%),
      radial-gradient(circle 280px at 60px calc(100% - 10px), var(--orb3), transparent 72%)}
}
@media (min-width:1100px){
  body{background-color:transparent !important;background-image:none !important}
  html{background-color:var(--canvas,var(--bg)) !important}
  body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;contain:strict;
    background-color:var(--canvas,var(--bg));
    background-image:
      radial-gradient(circle 420px at calc(var(--sb,280px) - 60px) 40px, var(--orb1), transparent 72%),
      radial-gradient(circle 380px at calc(100% + 60px) 340px, var(--orb2), transparent 72%),
      radial-gradient(circle 340px at 40% calc(100% + 40px), var(--orb3), transparent 72%)}
}
#transaction-list li.tx-item{content-visibility:auto;contain-intrinsic-size:auto 64px}
:root.low-fx header, :root.low-fx footer.liquid-footer::after, :root.low-fx #transaction-list li.tx-day-head,
:root.low-fx .bottom-sheet:not(.fullscreen-sheet), :root.low-fx .sheet, :root.low-fx .modal .modal-content{
  -webkit-backdrop-filter:none !important;backdrop-filter:none !important}
:root.low-fx header, :root.low-fx #transaction-list li.tx-day-head{background:var(--bg) !important}
:root.low-fx .bottom-sheet:not(.fullscreen-sheet), :root.low-fx .sheet, :root.low-fx .modal .modal-content{background:var(--bg) !important}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001s !important;animation-iteration-count:1 !important;transition-duration:.001s !important}}
#transaction-sheet .amount-row > input[id$="-amount"]::placeholder,
#transaction-sheet .transaction-form input[id$="-amount"]::placeholder{color:currentColor !important;opacity:.4 !important;-webkit-text-fill-color:currentColor}
#transaction-sheet #expense-form .amount-row > input{color:var(--text,inherit)}
#achievements-page .ach-summary-card,
#about-page .about-card,
#about-page .about-stat-card,
#about-page .about-hero,
#profile-page .pp-level-block,
#profile-page .pp-stat-card,
#profile-page .pp-detail-block,
#profile-page .pp-activity-block,
#profile-page .pp-achievements-btn,
#export-import-page .eip-stat-card,
#export-import-page .eip-chart-block,
#export-import-page .eip-activity-block,
#export-import-page .eip-budgets-block,
#export-import-page .eip-data-tools,
#export-import-page .eip-tool-card,
#export-import-page .eip-import-batches,
#export-import-page .eip-backups-block{
  background:var(--glass) !important;background-image:none !important;border:1px solid var(--stroke) !important;
  box-shadow:inset 0 1px 0 var(--hi) !important;color:var(--text) !important}
#achievements-page .ach-summary-card, #about-page .about-hero, #profile-page .pp-level-block{background:var(--glass2) !important;border-radius:24px !important}
#about-page .about-card, #profile-page .pp-detail-block, #profile-page .pp-activity-block, #export-import-page .eip-chart-block,
#export-import-page .eip-activity-block, #export-import-page .eip-budgets-block, #export-import-page .eip-data-tools, #export-import-page .eip-backups-block,
#export-import-page .eip-import-batches{border-radius:22px !important}
#about-page .about-stat-card, #profile-page .pp-stat-card, #export-import-page .eip-stat-card, #export-import-page .eip-tool-card{border-radius:18px !important}
#export-import-page .eip-tool-card, #export-import-page .eip-import-batch-card{background:var(--faint) !important;box-shadow:none !important}
#export-import-page .eip-import-batch-card{border:1px solid var(--stroke) !important;border-radius:14px !important}
#achievements-page .ach-summary-val, #about-page .about-stat-value, #about-page .about-title, #about-page .about-card-title, #about-page .about-changelog-name, #about-page .about-roadmap-name,
#profile-page .pp-stat-value, #profile-page .pp-detail-val, #profile-page .pp-detail-title, #profile-page .pp-level-label, #profile-page .pp-emoji-name,
#export-import-page .eip-stat-value, #export-import-page .eip-chart-title{color:var(--text) !important}
#achievements-page .ach-summary-key, #achievements-page .ach-summary-hint, #about-page .about-stat-label, #about-page .about-sub, #about-page .about-version, #about-page .about-changelog-desc,
#about-page .about-changelog-ver, #about-page .about-roadmap-meta, #profile-page .pp-stat-label, #profile-page .pp-detail-key, #profile-page .pp-level-next, #profile-page .pp-level-pts, #profile-page .pp-user-id,
#export-import-page .eip-stat-label, #export-import-page .eip-chart-total{color:var(--muted) !important}
#about-page .about-hero{background-image:radial-gradient(circle at 50% 0, color-mix(in srgb,var(--accent) 22%,transparent), transparent 70%) !important}
#achievements-page .ach-summary-bar, #profile-page .pp-level-track, #export-import-page .eip-budget-bar, #export-import-page .eip-bar{background:var(--faint) !important}
#achievements-page .ach-summary-fill, #profile-page .pp-level-fill{background:var(--accent) !important;border-radius:99px}
#export-import-page .eip-budget-bar-fill{background:var(--accent) !important}
#profile-page .pp-level-badge{background:var(--accent) !important;color:var(--ink) !important}
#profile-page .pp-avatar{background:var(--faint) !important;border:2px solid var(--accent) !important}
#achievements-page .ach-card.unlocked{background:color-mix(in srgb,var(--accent) 12%,var(--glass)) !important;background-image:none !important;
  border:1px solid color-mix(in srgb,var(--accent) 40%,transparent) !important;box-shadow:inset 0 1px 0 var(--hi) !important;color:var(--text) !important;border-radius:16px !important}
#achievements-page .ach-card.locked{background:var(--faint) !important;border:1px solid var(--stroke) !important;box-shadow:none !important;color:var(--muted) !important;opacity:.75;border-radius:16px !important}
#achievements-page .ach-card .ach-card-label{color:inherit !important}
#achievements-page .ach-group-count{background:var(--faint) !important;color:var(--muted) !important}
#achievements-page .ach-filter-chip{background:var(--faint) !important;border:1px solid var(--stroke) !important;color:var(--text) !important}
#achievements-page .ach-filter-chip.active{background:var(--accent) !important;color:var(--ink) !important;border-color:transparent !important}
#achievements-page .ach-summary-divider{background:var(--stroke) !important}
#export-import-page .eip-action-btn{border-radius:18px !important;box-shadow:none !important}
#export-import-page .eip-action-btn.eip-action-primary{background:var(--accent) !important;color:var(--ink) !important;border:none !important}
#export-import-page .eip-action-btn.eip-action-primary .eip-action-text *{color:var(--ink) !important}
#export-import-page .eip-action-btn.eip-action-secondary{background:var(--glass) !important;border:1px solid var(--stroke) !important;color:var(--text) !important}
#export-import-page .eip-action-btn.eip-action-danger, #export-import-page .eip-tool-btn-danger, #export-import-page .eip-maintenance-danger{background:color-mix(in srgb,var(--out) 14%,transparent) !important;border:1px solid color-mix(in srgb,var(--out) 40%,transparent) !important;color:var(--out) !important}
#export-import-page .eip-tool-btn-safe{background:color-mix(in srgb,var(--in) 14%,transparent) !important;border:1px solid color-mix(in srgb,var(--in) 40%,transparent) !important;color:var(--in) !important}
#export-import-page .eip-maintenance-btn:not(.eip-maintenance-danger), #export-import-page .eip-batch-rollback{background:var(--faint) !important;border:1px solid var(--stroke) !important;color:var(--text) !important}
#export-import-page input, #export-import-page select{background:var(--faint) !important;border:1px solid var(--stroke) !important;color:var(--text) !important;border-radius:12px !important}
#about-page .about-badge-now{background:var(--accent) !important;color:var(--ink) !important}
#analytics-page #bi-cards{display:flex !important;flex-direction:row !important;gap:8px !important;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:2px 0 4px;margin:0;align-items:stretch;max-width:100%}
#analytics-page #bi-cards::-webkit-scrollbar{display:none}
#analytics-page #bi-cards > .bi-card{flex:none !important;width:min(290px,78vw) !important;max-width:none !important;scroll-snap-align:start;margin:0 !important;box-sizing:border-box}
#analytics-page #bi-alerts{margin-top:10px}
#analytics-page .bi-kpi-v{white-space:nowrap;font-size:clamp(11.5px,3.4vw,14px) !important;letter-spacing:-.02em}
#analytics-page .bi-kpi{min-width:0;overflow:hidden}
#analytics-page .bi-kpi, #analytics-page .bi-health, #analytics-page .bi-card{background:var(--glass) !important;border-color:var(--stroke) !important;box-shadow:inset 0 1px 0 var(--hi) !important;color:var(--text)}
#analytics-page .bi-health{background:var(--glass2) !important}
.ch-head{margin:2px 0 8px}
.ch-sub{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:12.5px;font-weight:600;color:var(--muted)}
.ch-trend{font-weight:800;font-variant-numeric:tabular-nums}
.ch-trend.up{color:var(--out)} .ch-trend.down{color:var(--in)}
.ch-chips{display:flex;gap:6px;margin-top:10px;overflow-x:auto;scrollbar-width:none}
.ch-chips::-webkit-scrollbar{display:none}
.ch-chip{flex:none;height:30px;padding:0 11px;border-radius:15px;border:none;background:var(--faint);color:var(--text);font:800 12.5px/1 inherit;font-family:inherit;cursor:pointer;max-width:170px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-chip.on{background:var(--text);color:var(--bg)}
#analytics-page section:has(#categoryHistoryChart) .bi-sec-sub{display:none}
@media (min-width:1100px){
  #summary-blocks{grid-template-columns:1.35fr repeat(4,1fr) !important}
  #summary-blocks #block-debt{grid-column:5 !important;grid-row:1 !important}
  #summary-blocks .fx-holder{grid-column:1 / -1 !important;grid-row:2 !important}
  #transaction-list{background:var(--glass) !important;border:1px solid var(--stroke);border-radius:24px;box-shadow:inset 0 1px 0 var(--hi);
    overflow:clip;padding:0 !important;margin-top:8px}
  #transaction-list li.tx-day-head{margin:0 !important;border-radius:0 !important;padding:14px 22px !important;width:auto !important;
    background:var(--sticky,var(--glass2)) !important;border:0 !important;border-bottom:1px solid var(--faint) !important;box-shadow:none !important}
  #transaction-list li.tx-day-head:not(:first-child){border-top:1px solid var(--faint) !important}
  #transaction-list li.tx-item{background:transparent !important;border:0 !important;border-radius:0 !important;margin:0 !important;box-shadow:none !important;
    padding:0 !important;transition:background .15s}
  #transaction-list li.tx-item:hover{background:var(--faint) !important}
  #transaction-list li.tx-item .tx-card-inner{display:grid !important;grid-template-columns:40px minmax(0,1fr) 240px 130px;align-items:center;column-gap:14px;padding:11px 22px !important;background:none !important}
  #transaction-list li.tx-item .tx-main, #transaction-list li.tx-item .tx-top-row, #transaction-list li.tx-item .tx-bottom-row{display:contents !important}
  #transaction-list li.tx-item .tx-emoji{grid-column:1;grid-row:1;width:40px !important;height:40px !important;border-radius:13px !important;font-size:19px}
  #transaction-list li.tx-item .tx-title-wrap{grid-column:2;grid-row:1;min-width:0}
  #transaction-list li.tx-item .tx-title{font-size:14.5px;font-weight:700}
  #transaction-list li.tx-item .tx-bottom-row > *:not(.tx-title-wrap){grid-column:3;grid-row:1;font-size:13px !important;color:var(--muted) !important;font-weight:600;min-width:0;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #transaction-list li.tx-item .tx-amount{grid-column:4;grid-row:1;text-align:right;justify-self:end;font-size:14.5px !important;font-weight:800;font-variant-numeric:tabular-nums}
  #transaction-list li.tx-item .tx-date{display:none !important}
}
@media (min-width:1100px){
  #transaction-list li.tx-item.tx-first, #transaction-list li.tx-item.tx-last, #transaction-list li.tx-item.tx-first.tx-last, #transaction-list li.tx-item:not(.tx-first){
    margin:0 !important;border:0 !important;border-radius:0 !important;box-shadow:none !important}
  #transaction-list li.tx-item .tx-card-inner{grid-template-columns:40px minmax(0,1.2fr) minmax(0,1fr) 120px !important}
  #transaction-list li.tx-item .tx-bottom-row > *:not(.tx-title-wrap){text-align:left}
}
.ch-wrap{position:relative;height:170px;width:100%}
#analytics-page .analytics-scroll{overflow-x:hidden !important;max-width:100vw}
#analytics-page .analytics-scroll section.an-card{background:var(--glass) !important;border:1px solid var(--stroke) !important;border-left:1px solid var(--stroke) !important;border-radius:22px !important;box-shadow:inset 0 1px 0 var(--hi);padding:16px !important;min-width:0}
#analytics-page .analytics-scroll section.an-card h4{margin:0}
#analytics-page .an-sec-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.an-empty{color:var(--muted);font-size:13px;font-weight:600;text-align:center;padding:18px 6px;margin:0}
.an-hint{font-size:11px;color:var(--muted);font-weight:600;margin-top:6px;padding:0 6px;line-height:1.3}
.an-year{display:inline-flex;align-items:center;gap:2px;background:var(--faint);border-radius:999px;padding:2px;flex:none}
.an-year[hidden]{display:none !important}
.an-year b{font-family:var(--font-num);font-size:13px;font-weight:800;color:var(--text);min-width:42px;text-align:center}
.an-year button{margin-top: 0; width:28px;height:28px;border:0;border-radius:50%;background:none;color:var(--text);font-size:18px;line-height:1;padding:0;cursor:pointer;display:grid;place-items:center}
.an-year button:hover:not(:disabled){background:var(--chip)}
.an-year button:disabled{opacity:.25;cursor:default}
#analytics-page .an-hero{overflow:hidden;min-width:0}
.an-hero-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.an-hero-top .an-hero-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.an-hero-deltarow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px;min-height:24px}
.an-delta{font-size:12.5px;font-weight:800;padding:3px 10px;border-radius:999px;background:var(--faint);color:var(--text)}
.an-delta.good{color:var(--in);background:color-mix(in srgb,var(--in) 15%,transparent)}
.an-delta.bad{color:var(--out);background:color-mix(in srgb,var(--out) 15%,transparent)}
.an-delta-note{font-size:12px;font-weight:600;color:var(--muted)}
.an-hero-chart{position:relative;height:150px;margin-top:14px}
.an-hero-chart canvas{width:100% !important;height:100% !important;margin:0 !important}
.an-metrics{display:flex;gap:4px;margin-top:12px;background:var(--faint);padding:3px;border-radius:14px}
.an-metrics button{flex:1;min-height:34px;border:0;border-radius:11px;background:none;color:var(--muted);font-weight:700;font-size:12.5px;cursor:pointer;margin:0}
.an-metrics button.active{background:var(--glass2);color:var(--text);box-shadow:inset 0 0 0 1px var(--stroke)}
.an-hero-note{font-size:11px;font-weight:600;color:var(--muted);margin-top:10px;line-height:1.35}
.analytics-period-seg button{font-size:13px;padding:0 4px}
.top-list{display:flex;flex-direction:column;gap:14px;margin-top:14px}
.top-row{display:flex;align-items:center;gap:10px;min-width:0}
.top-rank{width:16px;flex:none;text-align:center;font-weight:800;font-size:12px;color:var(--muted);font-family:var(--font-num)}
.top-emoji{width:38px;height:38px;border-radius:12px;background:var(--faint);display:grid;place-items:center;font-size:18px;flex:none}
.top-main{flex:1;min-width:0}
.top-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.top-h b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:700;color:var(--text)}
.top-h em{font-style:normal;font-family:var(--font-num);font-weight:800;font-size:14px;color:var(--text);flex:none}
.top-sub{font-size:12px;color:var(--muted);font-weight:600;margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.top-track{height:5px;border-radius:3px;background:var(--faint);margin-top:7px;overflow:hidden}
.top-track i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,var(--out),color-mix(in srgb,var(--out) 45%,transparent))}
.bal-top{display:flex;justify-content:space-between;align-items:flex-end;gap:8px;flex-wrap:wrap;margin-top:10px}
.bal-big b{font-family:var(--font-num);font-size:28px;font-weight:700;color:var(--text)}
.bal-big small{margin-left:6px;color:var(--muted);font-weight:700;font-size:13px}
.bal-chg{font-size:12.5px;font-weight:800;padding:4px 10px;border-radius:999px;background:var(--faint)}
.bal-chg.good{color:var(--in);background:color-mix(in srgb,var(--in) 15%,transparent)}
.bal-chg.bad{color:var(--out);background:color-mix(in srgb,var(--out) 15%,transparent)}
.bal-mm{display:flex;gap:18px;flex-wrap:wrap;margin-top:8px;font-size:12px;color:var(--muted);font-weight:600}
.bal-mm b{color:var(--text);margin:0 4px;font-family:var(--font-num);font-weight:800}
.bal-mm em{font-style:normal}
.bal-warn{margin-top:8px;font-size:12.5px;font-weight:700;color:var(--out)}
.bal-note{font-size:11px;color:var(--muted);font-weight:600;margin-top:6px}
.bal-wrap{position:relative;height:190px;margin-top:10px}
.bal-wrap canvas{width:100% !important;height:100% !important;margin:0 !important}
.src-total{display:flex;align-items:baseline;gap:8px;margin-top:10px}
.src-total span{font-family:var(--font-num);font-size:28px;font-weight:700;color:var(--text)}
.src-total small{color:var(--muted);font-weight:700;font-size:12.5px}
.src-bar{display:flex;gap:3px;height:12px;border-radius:7px;overflow:hidden;margin:12px 0 6px}
.src-bar i{display:block;border-radius:4px;min-width:4px}
.src-list{display:flex;flex-direction:column}
.src-row{display:flex;align-items:center;gap:10px;width:100%;padding:12px 2px;border:0;border-top:1px solid var(--faint);background:none;color:var(--text);font:inherit;text-align:left;cursor:pointer;margin:0;border-radius:0;min-width:0}
.src-row:first-child{border-top:0}
.src-row:disabled{cursor:default;opacity:1}
.src-row:not(:disabled)::after{content:'›';color:var(--muted);font-size:20px;line-height:1;margin-left:-2px}
.src-dot{width:10px;height:10px;border-radius:50%;flex:none}
.src-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700;font-size:14px}
.src-name em{font-style:normal;margin-right:6px}
.src-name u{text-decoration:none;font-size:10px;font-weight:800;margin-left:6px;padding:2px 6px;border-radius:6px;background:var(--faint);color:var(--muted)}
.src-row b{font-family:var(--font-num);font-size:14px;font-weight:800}
.src-row i{font-style:normal;width:38px;text-align:right;color:var(--muted);font-size:12.5px;font-weight:700}
.sm-table{margin-top:10px;min-width:0}
.sm-head,.sm-row{display:grid;grid-template-columns:50px 1fr 1fr 1.15fr;gap:6px;align-items:center}
.sm-head{font-size:11px;font-weight:700;color:var(--muted);padding:0 8px 6px;text-align:right}
.sm-head span:first-child{text-align:left}
.sm-row{width:100%;padding:9px 8px;border:0;border-radius:12px;background:none;color:var(--text);font:inherit;text-align:right;cursor:pointer;margin:0;min-height:0}
.sm-row:not(.empty):not(.sm-total):hover{background:var(--faint)}
.sm-row.sel{background:var(--chip);box-shadow:inset 0 0 0 1px var(--stroke)}
.sm-row.empty{opacity:.4;cursor:default}
.sm-m{text-align:left;font-weight:800;font-size:13px}
.sm-m small{color:var(--muted);margin-left:3px;font-weight:700;font-size:10.5px}
.sm-in,.sm-out,.sm-net{font-family:var(--font-num);font-size:13px;font-weight:700;white-space:nowrap}
.sm-net{position:relative}
.sm-net.pos{color:var(--in)} .sm-net.neg{color:var(--out)}
.sm-net i{position:absolute;right:0;bottom:-5px;height:3px;border-radius:2px;opacity:.5}
.sm-net.pos i{background:var(--in)} .sm-net.neg i{background:var(--out)}
.sm-total{margin-top:8px;border-top:1px solid var(--stroke);border-radius:0;padding-top:12px;font-weight:800;cursor:default}
.sm-total .sm-m{font-size:12.5px}
.sm-foot{font-size:12px;font-weight:600;color:var(--muted);padding:8px 8px 0}
.an-sheet{padding:16px 18px calc(24px + env(safe-area-inset-bottom)) !important;max-height:88vh;z-index:calc(var(--z-index-bottom-sheet, 1000) + 20)}
.an-sheet .sheet-title-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.an-sheet .sheet-title{margin:0;font-size:20px;font-weight:800;color:var(--text)}
.ps-presets{display:flex;gap:4px;background:var(--faint);padding:3px;border-radius:14px}
.ps-chip{flex:1;min-height:38px;border:0;border-radius:11px;background:none;color:var(--muted);font-weight:700;font-size:13px;cursor:pointer;margin:0}
.ps-chip.on{background:var(--text);color:var(--bg)}
.ps-year{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px 12px;margin:16px 0 12px}
.ps-year b{font-family:var(--font-num);font-size:20px;min-width:64px;text-align:center;color:var(--text)}
.ps-year button{width:38px;height:38px;border-radius:19px;border:1px solid var(--stroke);background:var(--chip);color:var(--text);font-size:20px;line-height:1;cursor:pointer;padding:0;margin:0}
.ps-year button:disabled{opacity:.3;cursor:default}
.ps-year .ps-link{order:5;flex:1 0 100%;width:auto;height:auto;border:0;background:none;color:var(--accent);font-size:12.5px;font-weight:700;border-radius:0}
.ps-months{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.ps-m{min-height:54px;border-radius:16px;background:var(--faint);border:1px solid var(--stroke);color:var(--text);font-weight:700;font-size:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;margin:0;padding:6px 4px}
.ps-m i{font-style:normal;height:8px;font-size:10px;line-height:8px;color:var(--muted)}
.ps-m.empty{color:var(--muted)}
.ps-m.future{opacity:.35}
.ps-m.on{background:var(--accent);color:var(--ink);border-color:transparent;box-shadow:0 6px 18px var(--orb3,rgba(61,255,160,.25))}
.ps-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px}
.ps-sum{min-width:0}
.ps-sum small{display:block;font-size:11px;font-weight:700;color:var(--muted)}
.ps-sum b{font-size:15px;color:var(--text)}
.ps-apply{min-height:48px;padding:0 26px;border-radius:16px;border:0;background:var(--accent);color:var(--ink);font-weight:800;font-size:15px;cursor:pointer;margin:0;flex:none;width:auto}
.ps-hint{font-size:11.5px;font-weight:600;color:var(--muted);margin-top:10px;text-align:center}
.cs-head{display:flex;align-items:center;gap:12px}
.cs-emoji{width:46px;height:46px;border-radius:15px;background:color-mix(in srgb,var(--cat) 22%,transparent);display:grid;place-items:center;font-size:22px;flex:none}
.cs-title{flex:1;min-width:0}
.cs-title b{display:block;font-size:18px;font-weight:800;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cs-title small{font-size:12px;font-weight:600;color:var(--muted)}
.cs-note{margin-top:12px;padding:9px 12px;border-radius:12px;background:var(--faint);font-size:12px;font-weight:600;color:var(--muted);line-height:1.35}
.cs-total{margin-top:16px;display:flex;align-items:baseline;gap:8px}
.cs-val{font-family:var(--font-num);font-size:34px;font-weight:700;color:var(--text)}
.cs-cur{color:var(--muted);font-weight:700}
.cs-badges{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:8px}
.cs-badge{padding:4px 10px;border-radius:999px;background:var(--faint);font-size:12px;font-weight:700;color:var(--text);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--cat) 45%,transparent)}
.cs-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:16px}
.cs-kpis div{background:var(--faint);border-radius:14px;padding:10px 4px;text-align:center;min-width:0}
.cs-kpis small{display:block;font-size:10.5px;font-weight:700;color:var(--muted)}
.cs-kpis b{display:block;margin-top:2px;font-family:var(--font-num);font-size:14px;font-weight:800;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cs-big{margin-top:12px;padding:12px 14px;border-radius:16px;background:var(--faint);display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:baseline}
.cs-big span{font-size:12px;font-weight:700;color:var(--muted)}
.cs-big b{font-family:var(--font-num);font-size:15px;font-weight:800;color:var(--text)}
.cs-big em{grid-column:1 / -1;font-style:normal;font-size:12.5px;font-weight:600;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cs-sec{margin-top:20px}
.cs-sec h5{font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);font-weight:800;margin:0 0 12px}
.cs-bars{display:flex;align-items:flex-end;gap:8px;height:96px}
.cs-bar{flex:1;min-width:0;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px}
.cs-bar i{display:block;width:100%;max-width:34px;border-radius:7px 7px 3px 3px;background:color-mix(in srgb,var(--cat) 38%,transparent)}
.cs-bar.cur i{background:var(--cat)}
.cs-bar span{font-size:10.5px;font-weight:700;color:var(--muted)}
.cs-row-h{display:flex;justify-content:space-between;gap:10px;font-size:13.5px;font-weight:600;color:var(--text)}
.cs-row-h span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cs-row-h b{font-family:var(--font-num);font-weight:800;flex:none}
.cs-track{height:5px;border-radius:3px;background:var(--faint);margin:6px 0 12px}
.cs-track i{display:block;height:100%;border-radius:3px;background:var(--cat)}
.cs-op{display:flex;align-items:baseline;gap:10px;padding:9px 0;border-top:1px solid var(--faint);font-size:13.5px;color:var(--text)}
.cs-op-d{color:var(--muted);width:62px;flex:none;font-size:12px;font-weight:600}
.cs-op-n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cs-op b{font-family:var(--font-num);font-weight:800;flex:none}
.cv-wrap{position:relative;width:100%;margin-top:10px}
.cv-wrap canvas{width:100% !important;margin:0 !important}
#analytics-page .an-sec-head{flex-wrap:wrap}
#analytics-page .an-sec-head .bi-sec-sub{order:3;flex:1 0 100%;margin:0}
#analytics-page #expensesByCategoryCenterText{white-space:nowrap}
#analytics-page #expensesByCategoryCenterText .center-total{font-size:16px}
@media (min-width:1100px){
  #analytics-page .analytics-scroll{max-width:880px;margin-left:auto !important;margin-right:auto !important}
  #analytics-page .donut-wrap{width:170px;height:170px}
  #analytics-page .donut-wrap canvas{width:170px !important;height:170px !important}
  #analytics-page .donut-row{gap:28px}
  #analytics-page .donut-legend{max-width:420px}
}
.top-sub u{text-decoration:none;font-size:10px;font-weight:800;margin-left:8px;padding:2px 6px;border-radius:6px;background:var(--faint);color:var(--muted)}
.top-row.fin .top-track i{background:var(--muted);opacity:.45}
#transaction-list li.tx-sentinel{height:1px;margin:0;padding:0;border:0;list-style:none;pointer-events:none;background:none;content-visibility:visible}
#analytics-page .analytics-header-row h2,
#planner-page .subpage-header .subpage-title{font-family:var(--font-num);font-size:24px;font-weight:600;letter-spacing:-.01em;color:var(--text);margin:0;text-align:left;flex:1 1 auto;white-space:nowrap}
#analytics-page .analytics-header-row{border-bottom:none !important;padding:8px 20px !important}
#planner-page .subpage-header{border-bottom:none !important;background:none !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important;padding:8px 20px 0 !important}
#planner-page .subpage-header .subpage-header-spacer{display:none !important}
#planner-page#planner-page#planner-page.bottom-sheet.fullscreen-sheet{z-index:1090 !important}
#planner-page .planner-page-content{padding-bottom:max(130px, calc(110px + env(safe-area-inset-bottom))) !important; padding-top:0 !important;}
#planner-page .subpage-header{gap:10px}
body:has(#lnav-planner.active) #planner-page .subpage-header .subpage-back-btn{display:none !important}
:root:root:root header,
:root:root:root #analytics-page .analytics-header-row,
:root:root:root #planner-page .subpage-header{
  background:transparent !important;border-bottom:none !important;box-shadow:none !important;
  -webkit-backdrop-filter:none !important;backdrop-filter:none !important}
:root:root:root header::before,
:root:root:root #analytics-page .analytics-header-row::before,
:root:root:root #planner-page .subpage-header::before{
  content:'';position:absolute;left:0;right:0;top:0;bottom:-18px;z-index:-1;pointer-events:none;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  -webkit-mask-image:linear-gradient(#000 52%,transparent);mask-image:linear-gradient(#000 52%,transparent)}
:root.low-fx:root:root header::before,
:root.low-fx:root:root #analytics-page .analytics-header-row::before,
:root.low-fx:root:root #planner-page .subpage-header::before{
  -webkit-backdrop-filter:none;backdrop-filter:none;-webkit-mask-image:none;mask-image:none;
  background:linear-gradient(to bottom, var(--bg) 55%, transparent)}
#planner-page .subpage-header{position:sticky;top:0;z-index:5}
:root:root:root #transaction-list li.tx-day-head{
  background:transparent !important;border-bottom:none !important;box-shadow:none !important;
  -webkit-backdrop-filter:none !important;backdrop-filter:none !important;position:sticky}
:root:root:root #transaction-list li.tx-day-head::before{
  content:'';position:absolute;left:0;right:0;top:0;bottom:-18px;z-index:-1;pointer-events:none;opacity:0;
  -webkit-mask-image:linear-gradient(#000 52%,transparent);mask-image:linear-gradient(#000 52%,transparent)}
:root:root:root #transaction-list li.tx-day-head.is-stuck::before{
  opacity:1;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
:root.low-fx:root:root #transaction-list li.tx-day-head.is-stuck::before{
  -webkit-backdrop-filter:none;backdrop-filter:none;-webkit-mask-image:none;mask-image:none;
  background:linear-gradient(to bottom, var(--bg) 55%, transparent)}
:root:root:root #transaction-list li.tx-day-head.is-past{visibility:hidden}
.akulka-card .ak-extra { margin-top: 8px; padding: 7px 10px; border-radius: 12px; font-size: 12.5px; line-height: 1.15; font-weight: 600;
    color: var(--text, inherit); background: var(--faint, rgba(255,255,255,.07)); border: 1px solid var(--stroke, rgba(255,255,255,.08)); }
.akulka-card .ak-extra[hidden] { display: none; }
.akulka-card .ak-foot { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.akulka-card .ak-pill { height: 28px; padding: 0 11px; margin: 0 !important; border: none; border-radius: 14px; font-size: 12.5px; font-weight: 700; white-space: nowrap;
    background: var(--faint, rgba(255,255,255,.1)) !important; color: var(--text, inherit) !important; cursor: pointer; }
.akulka-card .ak-pill:active { transform: scale(.97); }
.akulka-card[role="button"] { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.akulka-card[role="button"]:active { transform: scale(.99); }
#shark-limit-sheet, #shark-chat-sheet { padding-bottom: 24px; max-height: 88vh; overflow-y: auto; }
#shark-limit-sheet .sheet-title-row, #shark-chat-sheet .sheet-title-row { display: flex !important; flex-direction: row !important; align-items: center; justify-content: space-between; padding: 0 4px 10px; }
#shark-limit-sheet .sheet-title-row h2, #shark-chat-sheet .sheet-title-row h2 { margin: 0; font-size: 20px; font-weight: 800; }
#shark-limit-sheet .sheet-x, #shark-chat-sheet .sheet-x { flex: 0 0 34px; }
.sl-hero { text-align: center; padding: 6px 0 14px; }
.sl-num { font-family: var(--font-num, inherit); font-size: 38px; font-weight: 800; letter-spacing: -.5px; font-variant-numeric: tabular-nums; color: var(--text, inherit); }
.sl-sub { margin-top: 2px; font-size: 12.5px; color: var(--muted, inherit); }
.sl-seg { display: flex; gap: 4px; padding: 4px; border-radius: 16px; background: var(--faint, rgba(255,255,255,.07)); }
.sl-seg button { flex: 1; min-height: 40px; margin: 0 !important; border: none; border-radius: 12px; background: transparent !important; color: var(--muted, inherit) !important; font-weight: 800; font-size: 14px; }
.sl-seg button.active { background: var(--text, #fff) !important; color: var(--bg, #111) !important; }
.sl-panel { margin-top: 12px; }
.sl-panel[hidden] { display: none; }
.sl-explain { padding: 12px 14px; border-radius: 18px; background: var(--faint, rgba(255,255,255,.06)); border: 1px solid var(--stroke, rgba(255,255,255,.08)); }
.sl-explain p { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--text, inherit); }
.sl-explain p + p { margin-top: 8px; color: var(--muted, inherit); font-size: 13px; }
.sl-input { display: flex; align-items: center; gap: 10px; padding: 0 14px; height: 56px; border-radius: 18px; background: var(--faint, rgba(255,255,255,.07)); border: 1.5px solid var(--stroke, rgba(255,255,255,.12)); }
.sl-input:focus-within { border-color: var(--accent, #3ddc97); }
.sl-input input { flex: 1; min-width: 0; height: 100%; border: none !important; outline: none; background: transparent !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important;
    font-family: var(--font-num, inherit); font-size: 24px; font-weight: 800; color: var(--text, inherit); font-variant-numeric: tabular-nums; }
.sl-input span { font-size: 13px; color: var(--muted, inherit); font-weight: 700; }
.sl-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.sl-quick button { height: 32px; padding: 0 12px; margin: 0 !important; border: none; border-radius: 16px; font-size: 13px; font-weight: 700; background: var(--faint, rgba(255,255,255,.1)) !important; color: var(--text, inherit) !important; }
.sl-quick button[hidden] { display: none; }
.sl-hint { margin-top: 10px; font-size: 12.5px; line-height: 1.4; color: var(--muted, inherit); }
.sl-thr { margin: 14px 2px 0; font-size: 13px; line-height: 1.4; color: var(--muted, inherit); }
.sl-thr b { color: var(--text, inherit); }
.sl-save { width: 100%; height: 50px; margin: 16px 0 0 !important; border: none; border-radius: 18px; font-size: 16px; font-weight: 800; background: var(--accent, #3ddc97) !important; color: var(--on-accent, #07130d) !important; }
.sl-save:disabled { opacity: .4; }
.sc-log { display: flex; flex-direction: column; gap: 10px; max-height: 42vh; overflow-y: auto; padding: 2px 2px 12px; scroll-behavior: smooth; }
.sc-msg { display: flex; align-items: flex-end; gap: 8px; max-width: 94%; }
.sc-msg.user { align-self: flex-end; }
.sc-msg img { width: 40px; height: 40px; object-fit: contain; flex: none; }
.sc-bub { padding: 9px 13px; border-radius: 18px; font-size: 14px; line-height: 1.4; background: var(--glass2, rgba(255,255,255,.1)); border: 1px solid var(--stroke, rgba(255,255,255,.08)); color: var(--text, inherit); }
.sc-msg.shark .sc-bub { border-bottom-left-radius: 6px; }
.sc-msg.user .sc-bub { border-bottom-right-radius: 6px; background: var(--accent, #3ddc97); color: var(--on-accent, #07130d); border-color: transparent; font-weight: 700; }
.sc-act { display: block; margin: 8px 0 0 !important; height: 30px; padding: 0 12px; border: none; border-radius: 15px; font-size: 13px; font-weight: 700; background: var(--faint, rgba(255,255,255,.12)) !important; color: var(--text, inherit) !important; }
.sc-chips { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 10px; border-top: 1px solid var(--stroke, rgba(255,255,255,.08)); }
.sc-chips button { height: 34px; padding: 0 13px; margin: 0 !important; border: none; border-radius: 17px; font-size: 13px; font-weight: 700; background: var(--faint, rgba(255,255,255,.1)) !important; color: var(--text, inherit) !important; }
.sc-chips button:active { transform: scale(.97); }
.sc-dots { display: inline-flex; gap: 4px; padding: 4px 0; }
.sc-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted, #888); animation: scDot 1s ease-in-out infinite; }
.sc-dots i:nth-child(2) { animation-delay: .15s; } .sc-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes scDot { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .sc-dots i { animation: none; } .sc-log { scroll-behavior: auto; } }
#fx-sheet .fx-calc { margin-top: 18px; }
#fx-sheet .fx-calc-card { padding: 12px; border-radius: 22px; background: var(--faint, rgba(255,255,255,.06)); border: 1px solid var(--stroke, rgba(255,255,255,.1)); box-shadow: inset 0 1px 0 var(--hi, rgba(255,255,255,.06)); }
#fx-sheet .fx-calc-mode { display: flex; gap: 4px; padding: 3px; margin-bottom: 10px; border-radius: 13px; background: var(--faint, rgba(255,255,255,.07)); }
#fx-sheet .fx-calc-mode button { flex: 1; height: 30px; margin: 0 !important; border: none; border-radius: 10px; font-size: 12.5px; font-weight: 800; background: transparent !important; color: var(--muted, inherit) !important; }
#fx-sheet .fx-calc-mode button.active { background: var(--text, #fff) !important; color: var(--bg, #111) !important; }
#fx-sheet .fx-calc-line { display: flex; align-items: center; gap: 8px; height: 54px; padding: 0 8px 0 14px; border-radius: 16px; background: var(--glass2, rgba(255,255,255,.08)); border: 1.5px solid transparent; }
#fx-sheet .fx-calc-line:focus-within { border-color: var(--accent, #3ddc97); }
#fx-sheet .fx-calc-line input, #fx-sheet .fx-calc-line output { flex: 1; min-width: 0; font-family: var(--font-num, inherit); font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text, inherit); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#fx-sheet .fx-calc-line input { height: 100%; border: none !important; outline: none; background: transparent !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; }
#fx-sheet .fx-calc-line input::placeholder { color: var(--muted, #888); opacity: .6; }
#fx-sheet .fx-calc-line output { display: block; }
#fx-sheet .fx-calc-line output.empty { color: var(--muted, inherit); opacity: .6; }
#fx-sheet .fx-calc-line select { flex: none; height: 38px; padding: 0 28px 0 12px; margin: 0 !important; border: none; border-radius: 12px; font-size: 14px; font-weight: 800; color: var(--text, inherit);
    background-color: var(--faint, rgba(255,255,255,.12)); -webkit-appearance: none; appearance: none; cursor: pointer;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 17px) calc(50% - 1px), calc(100% - 12px) calc(50% - 1px); background-size: 5px 5px; background-repeat: no-repeat; }
#fx-sheet .fx-calc-swap { display: flex; justify-content: center; margin: -6px 0; position: relative; z-index: 1; }
#fx-sheet .fx-calc-swap button {margin: 0 !important; border-radius: 17px; border: 3px solid var(--bg, #111); font-size: 15px; font-weight: 800; background: var(--accent, #3ddc97) !important; color: var(--on-accent, #07130d) !important; }
#fx-sheet .fx-calc-quick { display: flex; gap: 6px; margin-top: 10px; overflow-x: auto; scrollbar-width: none; }
#fx-sheet .fx-calc-quick::-webkit-scrollbar { display: none; }
#fx-sheet .fx-calc-quick button { flex: none; height: 28px; padding: 0 12px; margin: 0 !important; border: none; border-radius: 14px; font-size: 12.5px; font-weight: 700; background: var(--faint, rgba(255,255,255,.1)) !important; color: var(--text, inherit) !important; }
#fx-sheet .fx-calc-note { margin-top: 10px; font-size: 12px; line-height: 1.4; color: var(--muted, inherit); }
.sc-bub p { margin: 0 0 7px; }
.sc-bub p:last-child, .sc-bub ul:last-child { margin-bottom: 0; }
.sc-bub .sc-h { font-size: 15px; margin-bottom: 8px; }
.sc-list { margin: 2px 0 8px; padding-left: 18px; }
.sc-list li { margin: 0 0 5px; }
.sc-bub b { font-weight: 800; }
.sc-msg.shark { max-width: 96%; }
.sc-chips { max-height: 34vh; overflow-y: auto; }
.sc-chips .sc-menu { background: var(--accent, #3ddc97) !important; color: var(--on-accent, #07130d) !important; }
.sc-chips .sc-back { background: transparent !important; box-shadow: inset 0 0 0 1px var(--stroke, rgba(255,255,255,.2)); }
.sc-form { display: flex; gap: 8px; padding: 10px 0 2px; }
.sc-form[hidden] { display: none; }
.sc-form input { flex: 1; min-width: 0; height: 42px; padding: 0 14px; border-radius: 21px; border: 1px solid var(--stroke, rgba(255,255,255,.15)); background: var(--glass2, rgba(255,255,255,.08)); color: var(--text, inherit); font-size: 16px; }
.sc-form button { height: 42px; padding: 0 16px; border: none; border-radius: 21px; font-weight: 800; background: var(--accent, #3ddc97); color: var(--on-accent, #07130d); }
.sc-chips .sc-start { box-shadow: inset 0 0 0 1px var(--stroke, rgba(255,255,255,.2)); }
.sc-msg.shark img { cursor: pointer; }
@keyframes sc-wig { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-12deg) scale(1.08); } 60% { transform: rotate(10deg) scale(1.08); } }
.sc-wiggle { animation: sc-wig .5s ease; }
.sc-aside { margin-top: 6px; font-size: 13px; opacity: .7; font-style: italic; }
.sc-form-goal { gap: 6px; flex-wrap: wrap; }
.sc-form-goal input { min-width: 0; flex: 1 1 120px; }
.sc-form-goal input[type="date"] { flex: 1 1 140px; }
:root[data-theme="tiffany"] {
  --tf-a: #81d8d0; --tf-b: #0abab5; --tf-pearl: #f2fffd;
  --tf-grad: linear-gradient(135deg, #b4f3ed 0%, #81d8d0 38%, #2cc6bd 74%, #0abab5 100%);
  --tf-sheen: linear-gradient(145deg, rgba(255,255,255,.11) 0%, rgba(255,255,255,0) 34%, rgba(10,186,181,.08) 100%);
}
@media (max-width:1099px){
  :root[data-theme="tiffany"] main{
    background-image:
      radial-gradient(circle 360px at -40px 40px, var(--orb1), transparent 72%),
      radial-gradient(circle 320px at calc(100% + 60px) 340px, var(--orb2), transparent 72%),
      radial-gradient(circle 280px at 60px calc(100% - 10px), var(--orb3), transparent 72%),
      linear-gradient(115deg, transparent 0 38%, rgba(235,255,253,.045) 46%, transparent 54% 100%) !important}
}
@media (min-width:1100px){
  :root[data-theme="tiffany"] body{
    background-image:
      radial-gradient(circle 420px at calc(var(--sb,280px) - 60px) 40px, var(--orb1), transparent 72%),
      radial-gradient(circle 380px at calc(100% + 60px) 340px, var(--orb2), transparent 72%),
      radial-gradient(circle 340px at 40% calc(100% + 40px), var(--orb3), transparent 72%),
      linear-gradient(115deg, transparent 0 38%, rgba(235,255,253,.04) 46%, transparent 54% 100%) !important}
}
:root[data-theme="tiffany"] :is(.glass, .glass-2, #summary-blocks .summary-block, .akulka-card, .dw-card, .rg-card, .accounts-row,
  #settings-page .sp-hero-card, #settings-page .sp-nav-group, .faq-item, .set-card, .empty-card, .about-hero,
  #analytics-page .bi-kpi, #analytics-page .bi-health, #analytics-page .bi-card,
  #planner-page .planner-hero, #planner-page .planner-stat-card, #planner-page .planner-section-card, #planner-page .planner-day-card) {
  background-image: var(--tf-sheen);
  border-color: var(--stroke);
  box-shadow: inset 0 1px 0 rgba(235,255,253,.22), inset 0 -1px 0 rgba(10,186,181,.14), 0 14px 32px -18px rgba(10,186,181,.45);
}
:root[data-theme="tiffany"] #transaction-list li.tx-item{ background-image: var(--tf-sheen); border-color: var(--stroke); }
:root[data-theme="tiffany"] .bottom-sheet:not(.fullscreen-sheet), :root[data-theme="tiffany"] .sheet{
  border-top-color: rgba(170,255,246,.3);
  box-shadow: inset 0 1px 0 rgba(235,255,253,.28), 0 -22px 60px rgba(0,0,0,.45), 0 -2px 30px rgba(10,186,181,.16);
}
:root[data-theme="tiffany"] footer.liquid-footer #add-btn.fab-btn,
:root[data-theme="tiffany"] .add-btn, :root[data-theme="tiffany"] .chip-btn.active,
:root[data-theme="tiffany"] .sl-save, :root[data-theme="tiffany"] .sl-seg button.active{
  background: var(--tf-grad) !important; color: var(--ink) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 8px 22px -6px rgba(10,186,181,.65);
}
:root[data-theme="tiffany"] footer.liquid-footer .lnav-item.active{
  background: linear-gradient(180deg, rgba(129,216,208,.22), rgba(129,216,208,.08));
  box-shadow: inset 0 1px 0 rgba(235,255,253,.25), 0 0 18px rgba(129,216,208,.2);
}
:root[data-theme="tiffany"] .akulka-card .ak-bar span{ background: linear-gradient(90deg, var(--mood), color-mix(in srgb, var(--mood) 55%, #fff)); }
:root[data-theme="tiffany"] #summary-blocks .block-value{ text-shadow: 0 0 18px rgba(129,216,208,.28); }
.akulka-card.ak-paused img{ animation-play-state: paused !important }
.akulka-card img[src*="/hoodie-"] { width: 96px; height: 132px; top: -45px; bottom: auto; left: 6px; object-position: 50% 100%; }
.akulka-card[data-shark="hoodie"] { min-height: 104px; padding-left: 112px; }
.akulka-card[data-shark="hoodie"] .ak-extra { margin-left: -96px; margin-top: 14px; }
.akulka-card[data-shark="hoodie"] .ak-bar { margin-left: -96px; margin-top: 12px; }
.tweak .shark-toast img[src*="/hoodie-"] { width: 30px; height: 38px; margin: -6px 0; }
.sc-msg img[src*="/hoodie-"] { width: 40px; height: 52px; object-position: 50% 100%; }
#planner-page .planner-shark-tip img[src*="/hoodie-"] { width: 36px; height: 46px; }
.an-tip img[src*="/hoodie-"] { width: 58px; height: 74px; }
.empty-card .empty-shark[src*="/hoodie-"] { width: 100px; height: 128px; }
#shark-page .sk-hero { --mood: var(--in, #27AE60); position: relative; margin: 12px 16px 14px; padding: 16px; border-radius: 26px;
    display: grid; grid-template-columns: 112px 1fr; column-gap: 12px; align-items: end;
    background: radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--mood) 22%, transparent), transparent 60%), var(--glass2, var(--glass, rgba(255,255,255,.06)));
    border: 1px solid color-mix(in srgb, var(--mood) 35%, var(--stroke, rgba(255,255,255,.12))); }
#shark-page .sk-hero[data-mood="new"]   { --mood: var(--accent, #6cf); }
#shark-page .sk-hero[data-mood="proud"] { --mood: var(--save, #9b6dff); }
#shark-page .sk-hero[data-mood="warn"]  { --mood: #ff9f43; }
#shark-page .sk-hero[data-mood="bad"]   { --mood: var(--out, #ff4b5c); }
#shark-page .sk-hero-pic { grid-row: 1; align-self: end; margin: -34px 0 -4px -4px; }
#shark-page .sk-hero-pic img { display: block; width: 112px; height: 156px; object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 8px 14px rgba(0,0,0,.35)); }
#shark-page .sk-hero-pic img:not([src*="/hoodie-"]) { height: 112px; }
#shark-page .sk-hero-body { grid-column: 2; align-self: center; padding: 4px 0 6px; }
#shark-page .sk-hero .ak-title { font-size: 13px; font-weight: 800; color: var(--mood); }
#shark-page .sk-hero .ak-text { font-size: 15px; line-height: 1.4; margin-top: 4px; font-weight: 600; color: var(--text, inherit); }
#shark-page .sk-hero .ak-extra { grid-column: 1 / -1; margin-top: 12px; padding: 8px 11px; border-radius: 12px; font-size: 12.5px; line-height: 1.2; font-weight: 600;
    background: var(--faint, rgba(255,255,255,.07)); border: 1px solid var(--stroke, rgba(255,255,255,.08)); }
#shark-page .sk-hero .ak-extra[hidden] { display: none; }
#shark-page .sk-hero .ak-bar { grid-column: 1 / -1; height: 6px; border-radius: 3px; margin-top: 12px; background: var(--faint, rgba(255,255,255,.1)); overflow: hidden; }
#shark-page .sk-hero .ak-bar span { display: block; height: 100%; width: 0; border-radius: 3px; background: var(--mood); transition: width .5s; }
#shark-page .sk-stats { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
#shark-page .sk-stat { padding: 9px 6px; border-radius: 14px; text-align: center; background: var(--faint, rgba(255,255,255,.06)); }
#shark-page .sk-stat b { display: block; font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
#shark-page .sk-stat small { display: block; margin-top: 2px; font-size: 11px; color: var(--muted, inherit); }
#shark-page .sk-ask { grid-column: 1 / -1; margin-top: 12px; height: 44px; border: none; border-radius: 14px; font-size: 14.5px; font-weight: 800; cursor: pointer;
    background: var(--accent, #3ddc97); color: var(--ink, #032624); }
#shark-page .sk-ask:active { transform: scale(.98); }
#shark-page .sk-limit-card { margin-top: 0; }
#shark-page .sk-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 8px 16px; }
#shark-page .sk-pick-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 8px 12px; border-radius: 20px; text-align: center; cursor: pointer;
    color: inherit; background: var(--glass, rgba(255,255,255,.06)); border: 1.5px solid var(--stroke, rgba(255,255,255,.1)); }
#shark-page .sk-pick-card img { width: 72px; height: 96px; object-fit: contain; object-position: 50% 100%; }
#shark-page .sk-pick-card img:not([src*="/hoodie-"]) { height: 72px; margin-top: 24px; }
#shark-page .sk-pick-card b { font-size: 14.5px; }
#shark-page .sk-pick-card small { font-size: 11.5px; line-height: 1.25; color: var(--muted, inherit); }
#shark-page .sk-pick-card.is-active { border-color: var(--accent, #3ddc97); background: color-mix(in srgb, var(--accent, #3ddc97) 14%, var(--glass, transparent)); }
#shark-page .sk-pick-card.is-active b { color: var(--accent, #3ddc97); }
#shark-page .sk-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 8px 16px 0; padding: 4px; border-radius: 18px;
    background: var(--glass, rgba(255,255,255,.06)); border: 1px solid var(--stroke, rgba(255,255,255,.1)); }
#shark-page .sk-seg button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 9px 4px; border: none; border-radius: 14px; font-size: 12.5px; font-weight: 700; cursor: pointer; margin-top:0;
    background: transparent; color: var(--muted, inherit); }
#shark-page .sk-seg button span { font-size: 18px; }
#shark-page .sk-seg button.is-active { background: var(--accent, #3ddc97); color: var(--ink, #032624); }
#shark-page .sk-desc { margin: 8px 22px 4px; min-height: 2.6em; font-size: 12.5px; line-height: 1.3; color: var(--muted, inherit); }
.planner-form-hint { margin: -4px 4px 12px; font-size: 12px; line-height: 1.35; color: var(--muted, inherit); }
.pwa-install { position: fixed; left: 12px; right: 12px; bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 1100; max-width: 460px; margin-inline: auto;
    padding: 14px 14px 10px; border-radius: 26px; color: var(--text, inherit);
    background: radial-gradient(120% 120% at 0% 0%, color-mix(in srgb, var(--accent, #3ddc97) 20%, transparent), transparent 60%), color-mix(in srgb, var(--bg, #0b1214) 90%, transparent);
    -webkit-backdrop-filter: blur(26px) saturate(150%); backdrop-filter: blur(26px) saturate(150%);
    border: 1px solid color-mix(in srgb, var(--accent, #3ddc97) 40%, var(--stroke, rgba(255,255,255,.14)));
    box-shadow: 0 14px 40px rgba(0,0,0,.55);
    opacity: 100; transform: translateY(24px); pointer-events: none; transition: transform .3s ease, opacity .3s ease; }
.pwa-install.is-open { opacity: 1; transform: none; pointer-events: auto; }
.pwa-top { display: flex; gap: 10px; align-items: flex-start; }
.pwa-shark { width: 64px; height: 88px; object-fit: contain; object-position: 50% 100%; flex: none; margin: -30px 0 -4px -2px; filter: drop-shadow(0 6px 10px rgba(0,0,0,.35)); }
.pwa-head { flex: 1; min-width: 0; padding-top: 2px; }
.pwa-head b { display: block; font-size: 15px; line-height: 1.25; }
.pwa-head small { display: block; margin-top: 4px; font-size: 12.5px; line-height: 1.35; color: var(--muted, inherit); }
.pwa-x { flex: none; border: none; border-radius: 15px; font-size: 20px; line-height: 1; cursor: pointer; background: var(--faint, rgba(255,255,255,.08)); color: var(--muted, inherit); }
.pwa-steps { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.pwa-steps li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; font-size: 13px; line-height: 1.3; background: var(--faint, rgba(255,255,255,.06)); }
.pwa-steps li i { flex: none; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; font-style: normal; font-weight: 800; color: var(--accent, #3ddc97); background: color-mix(in srgb, var(--accent, #3ddc97) 16%, transparent); }
.pwa-note { margin: 8px 4px 0; font-size: 11.5px; color: var(--muted, inherit); }
.pwa-actions { display: flex; gap: 8px; margin-top: 12px; }
.pwa-main { flex: 1; height: 44px; border: none; border-radius: 14px; font-size: 14.5px; font-weight: 800; cursor: pointer; background: var(--accent, #3ddc97); color: var(--ink, #032624); }
.pwa-ghost { height: 44px; padding: 0 18px; border: none; border-radius: 14px; font-size: 14px; font-weight: 700; cursor: pointer; background: var(--faint, rgba(255,255,255,.08)); color: inherit; }
.pwa-main:active, .pwa-ghost:active { transform: scale(.98); }
.pwa-never { display: block; margin: 6px auto 0; padding: 6px 10px; border: none; background: transparent; font-size: 11.5px; color: var(--muted, inherit); cursor: pointer; text-decoration: underline; }
@media (min-width: 901px) { .pwa-install { left: auto; right: 24px; bottom: 24px; width: 380px; } }
@media (prefers-reduced-motion: reduce) { .pwa-install { transition: none; } }
#transaction-detail-sheet .tx-detail-amount[data-kind="deposit"] { color: var(--save, var(--accent, #3ddc97)); }
#transaction-detail-sheet .deposit-meta-block { padding: 14px 14px 4px; }
#transaction-detail-sheet .dep-card { display: block; }
#transaction-detail-sheet .dep-hero { padding: 14px 14px 12px; border-radius: 20px; text-align: center; margin-bottom: 10px;
    background: radial-gradient(120% 140% at 50% 0%, color-mix(in srgb, var(--save, var(--accent, #3ddc97)) 22%, transparent), transparent 70%), var(--faint, rgba(255,255,255,.06)); }
#transaction-detail-sheet .dep-hero small { display: block; font-size: 12px; color: var(--muted, inherit); }
#transaction-detail-sheet .dep-hero b { display: block; margin-top: 2px; font-size: 30px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--save, var(--accent, #3ddc97)); }
#transaction-detail-sheet .dep-hero-gain { display: block; margin-top: 4px; font-size: 12.5px; font-weight: 700; color: var(--in, #27AE60); }
#transaction-detail-sheet .dep-hero-gain.dep-muted { font-weight: 600; color: var(--muted, inherit); }
#transaction-detail-sheet .dep-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#transaction-detail-sheet .dep-stat { padding: 10px 12px; border-radius: 16px; background: var(--faint, rgba(255,255,255,.06)); min-width: 0; }
#transaction-detail-sheet .dep-stat small { display: block; font-size: 11.5px; color: var(--muted, inherit); }
#transaction-detail-sheet .dep-stat b { display: block; margin-top: 2px; font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
#transaction-detail-sheet .dep-stat-accent { background: color-mix(in srgb, var(--accent, #3ddc97) 14%, transparent); }
#transaction-detail-sheet .dep-stat-accent b { color: var(--accent, #3ddc97); }
#transaction-detail-sheet .dep-progress { margin: 12px 2px 8px; }
#transaction-detail-sheet .dep-progress-top, #transaction-detail-sheet .dep-progress-dates { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; }
#transaction-detail-sheet .dep-progress-top span, #transaction-detail-sheet .dep-progress-dates { color: var(--muted, inherit); }
#transaction-detail-sheet .dep-progress-dates { font-size: 11.5px; margin-top: 4px; }
#transaction-detail-sheet .dep-bar { height: 8px; margin-top: 6px; border-radius: 4px; overflow: hidden; background: var(--faint, rgba(255,255,255,.1)); }
#transaction-detail-sheet .dep-bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--accent, #3ddc97), var(--save, #9b6dff)); }
#transaction-detail-sheet .dep-section-title { margin: 4px 4px 8px; font-size: 13px; font-weight: 800; color: var(--muted, inherit); }
#transaction-detail-sheet #detail-deposit-table { padding: 12px 14px; }
#transaction-detail-sheet .dep-ops { display: grid; gap: 6px; }
#transaction-detail-sheet .dep-op { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; background: var(--faint, rgba(255,255,255,.05)); }
#transaction-detail-sheet .dep-op-ico { flex: none; width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; font-size: 14px; background: var(--faint, rgba(255,255,255,.08)); }
#transaction-detail-sheet .dep-op-main { flex: 1; min-width: 0; }
#transaction-detail-sheet .dep-op-main b { display: block; font-size: 13.5px; }
#transaction-detail-sheet .dep-op-main small { color: var(--muted, inherit); font-size: 11.5px; }
#transaction-detail-sheet .dep-op-sum { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
#transaction-detail-sheet .dep-op-in .dep-op-sum, #transaction-detail-sheet .dep-op-open .dep-op-sum { color: var(--in, #27AE60); }
#transaction-detail-sheet .dep-op-out .dep-op-sum { color: var(--out, #ff4b5c); }
#transaction-detail-sheet .dep-sched { margin-top: 14px; }
#transaction-detail-sheet .dep-sched summary { cursor: pointer; padding: 8px 4px; font-size: 13px; font-weight: 800; color: var(--muted, inherit); list-style: none; }
#transaction-detail-sheet .dep-sched summary::-webkit-details-marker { display: none; }
#transaction-detail-sheet .dep-sched summary::after { content: '›'; float: right; font-size: 18px; transition: transform .2s; }
#transaction-detail-sheet .dep-sched[open] summary::after { transform: rotate(90deg); }
#transaction-detail-sheet .dep-months { display: grid; gap: 6px; margin-top: 4px; }
#transaction-detail-sheet .dep-month { padding: 9px 12px; border-radius: 14px; background: var(--faint, rgba(255,255,255,.05)); }
#transaction-detail-sheet .dep-month.is-past { opacity: .75; }
#transaction-detail-sheet .dep-month.is-current { background: color-mix(in srgb, var(--accent, #3ddc97) 14%, transparent); border: 1px solid color-mix(in srgb, var(--accent, #3ddc97) 40%, transparent); opacity: 1; }
#transaction-detail-sheet .dep-month-top { display: flex; justify-content: space-between; gap: 8px; font-size: 13.5px; }
#transaction-detail-sheet .dep-month-top b { font-variant-numeric: tabular-nums; }
#transaction-detail-sheet .dep-month small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--muted, inherit); }
#transaction-detail-sheet .deposit-meta-block div { margin-bottom: 0; }
#transaction-detail-sheet .deposit-meta-block .dep-hero { margin-bottom: 10px; }
#transaction-detail-sheet .deposit-meta-block .dep-progress { margin: 12px 2px 8px; }
#transaction-detail-sheet .detail-deposit-actions { gap: 10px; margin: 4px 0 6px; }
#transaction-detail-sheet .detail-deposit-actions button { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 46px; border-radius: 16px; font-size: 14.5px; font-weight: 800;
    background: var(--accent, #3ddc97); color: var(--ink, #032624); }
#transaction-detail-sheet .detail-deposit-actions button#deposit-withdraw-btn { background: var(--faint, rgba(255,255,255,.1)); color: var(--text, inherit); }
#transaction-detail-sheet .detail-deposit-actions button svg { width: 18px; height: 18px; fill: currentColor; stroke: currentColor; }
#transaction-detail-sheet .detail-deposit-actions button svg path { fill: currentColor; }
#settings-page .sp-shark-wrap { padding: 8px 16px 0; }
#settings-page .sp-shark-card { display: block; width: 100%; padding: 10px 14px 12px; border-radius: 22px; text-align: left; cursor: pointer; color: inherit;
    background: radial-gradient(120% 140% at 50% 0%, color-mix(in srgb, var(--accent, #3ddc97) 18%, transparent), transparent 70%), var(--glass, rgba(255,255,255,.06));
    border: 1px solid color-mix(in srgb, var(--accent, #3ddc97) 32%, var(--stroke, rgba(255,255,255,.1))); }
#settings-page .sp-shark-card:active { transform: scale(.99); }
#settings-page .sp-shark-pics { display: flex; align-items: flex-end; justify-content: space-between; gap: 6px; height: 84px; padding: 0 4px; }
#settings-page .sp-shark-pics img { height: 78px; width: auto; max-width: 25%; object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 4px 8px rgba(0,0,0,.3)); }
#settings-page .sp-shark-pics img:nth-child(2) { height: 84px; }
#settings-page .sp-shark-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
#settings-page .sp-shark-text { flex: 1; min-width: 0; }
#settings-page .sp-shark-text b { display: block; font-size: 16px; font-weight: 800; }
#settings-page .sp-shark-text small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted, inherit); }
.pwa-scrim { position: fixed; inset: 0; z-index: 1090; background: rgba(0,0,0,.38); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; transition: opacity .3s ease; }
.pwa-scrim.is-open { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .pwa-scrim { transition: none; } }
#transaction-detail-sheet .tx-detail-card.dep-flat { background: transparent !important; border: none !important; border-radius: 0 !important;
    max-height: none !important; overflow: visible !important; padding: 0 !important; margin-top: 10px; }
#transaction-detail-sheet #detail-deposit-table.dep-flat { padding: 0 !important; max-height: none !important; overflow: visible !important; }
#transaction-detail-sheet .dep-flat .dep-hero { margin-bottom: 8px; }
#transaction-detail-sheet .dep-flat .di-row { padding: 12px 4px 4px; }
#transaction-detail-sheet .dep-flat .dep-ops { padding: 0; }
#transaction-detail-sheet .dep-flat .dep-section-title { margin-top: 14px; }
img, picture, svg image {
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
    user-drag: none;
    -webkit-user-select: none;
    user-select: none;
}
#shark-page .sk-budget{margin:10px 16px -4px;padding:7px 12px;border-radius:999px;width:fit-content;max-width:calc(100% - 32px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:700;color:var(--muted);background:var(--faint)}
#shark-chat-sheet .sc-budget{display:block;margin-top:2px;font-size:11.5px;font-weight:600;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#shark-page .sk-gallery { margin: 14px 16px 0; border-radius: 20px; background: var(--glass2); border: 1px solid var(--stroke); }
#shark-page .sk-gallery > summary { padding: 14px 16px; font-weight: 600; cursor: pointer; list-style: none; color: var(--text); }
#shark-page .sk-gallery > summary::-webkit-details-marker { display: none; }
#shark-page .sk-gallery .sk-desc { margin: 0 16px 8px; }
#shark-page .sk-gal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 0 10px 14px; }
#shark-page .sk-gal-item { display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; padding: 8px 4px; border-radius: 14px; background: var(--faint, rgba(255,255,255,.05)); }
#shark-page .sk-gal-item img { width: 64px; height: 84px; object-fit: contain; object-position: 50% 100%; }
#shark-page .sk-gal-item b { font-size: 12px; color: var(--text); }
#shark-page .sk-gal-item small { font-size: 10.5px; line-height: 1.25; color: var(--muted); }
html[data-shark="classic"] #shark-page .sk-gallery { display: none; }
/* ── 30-statement-import.css ── */
.ei-detected-source {
    font-size: 12px;
    font-weight: 600;
    color: var(--accent, #6366f1);
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.25);
    border-radius: 8px;
    padding: 5px 10px;
    text-align: center;
}
.ei-feature-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ei-feature-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text, #e2e8f0);
}
.ei-feature-desc {
    font-size: 11px;
    color: var(--text-muted, #94a3b8);
    line-height: 1.5;
}
.ei-btn-cancel { display: none; }
.ei-btn-close-link {
    width: 100%;
    padding: 8px;
    border: none;
    background: transparent;
    color: var(--text-muted, #64748b);
    font-size: 12px;
    cursor: pointer;
    text-align: center;
    margin-top: 2px;
    opacity: 0.6;
    transition: opacity 0.15s;
}
.ei-btn-close-link:hover { opacity: 1; }
#ei-step-upload { position: static; }
.ei-instructions {
    background: var(--accent-color, rgba(30,41,59,0.6));
    border: 1px solid var(--border-color, #334155);
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 4px;
}
.ei-inst-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text, #e2e8f0);
    padding: 10px 14px 8px;
    border-bottom: 1px solid var(--border-color, #1e293b);
}
.ei-inst-body {
    padding: 10px 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ei-inst-body > p {
    font-size: 12.5px;
    color: var(--text-muted, #94a3b8);
    margin: 0;
    line-height: 1.5;
}
.ei-inst-sources {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ei-inst-source {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 11px;
    color: var(--text-muted, #94a3b8);
    line-height: 1.45;
}
.ei-inst-icon {
    font-size: 20px;
    flex-shrink: 0;
    margin-top: 1px;
}
.ei-inst-source b {
    color: var(--text, #e2e8f0);
    display: block;
    margin-bottom: 1px;
    font-size: 12.5px;
}
.ei-desc-hint {
    font-size: 11.5px;
    color: var(--text-muted, #94a3b8);
    opacity: 0.7;
    padding: 2px 2px 0;
    line-height: 1.4;
}
.excel-import-wrap {
    padding: 4px 0 8px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.ei-step {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ei-step.hidden {
    display: none !important;
}
.ei-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 32px 20px;
    border: 2px dashed var(--border-color, #334155);
    border-radius: 16px;
    cursor: pointer;
    background: var(--accent-color, #1e293b);
    transition: border-color 0.2s, background 0.2s;
    text-align: center;
}
.ei-dropzone:hover,
.ei-dropzone.ei-drag-over {
    border-color: var(--accent, #6366f1);
    background: var(--card-bg-hover, #1e2a3a);
}
.ei-drop-icon  { font-size: 36px; }
.ei-drop-title { font-size: 15px; font-weight: 600; color: var(--text, #e2e8f0); }
.ei-drop-sub   { font-size: 12px; color: var(--text-muted, #94a3b8); }
.ei-file-name {
    font-size: 13px;
    color: var(--accent, #6366f1);
    padding: 6px 10px;
    background: var(--card-bg, #1e293b);
    border-radius: 8px;
    text-align: center;
}
.ei-error {
    font-size: 13px;
    color: #f87171;
    padding: 8px 12px;
    background: rgba(248, 113, 113, 0.12);
    border-radius: 8px;
}
.ei-error.hidden { display: none; }
.ei-section-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.ei-map-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px 12px;
    align-items: center;
}
.ei-map-label {
    font-size: 13px;
    color: var(--text, #e2e8f0);
    white-space: nowrap;
}
.ei-select {
    width: 100%;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid var(--border-color, #334155);
    background: var(--input-bg, #0f172a);
    color: var(--text, #e2e8f0);
    font-size: 13px;
    cursor: pointer;
    appearance: auto;
}
.ei-select:focus {
    outline: 2px solid var(--accent, #6366f1);
    outline-offset: 1px;
}
.ei-preview-wrap {
    overflow-x: auto;
    border-radius: 10px;
    border: 1px solid var(--border-color, #334155);
    max-height: 240px;
    overflow-y: auto;
}
.ei-preview-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.ei-preview-table thead tr {
    background: var(--card-bg, #1e293b);
    position: sticky;
    top: 0;
    z-index: 1;
}
.ei-preview-table th {
    padding: 6px 10px;
    text-align: left;
    color: var(--text-muted, #64748b);
    font-weight: 600;
    white-space: nowrap;
}
.ei-preview-table td {
    padding: 5px 10px;
    border-top: 1px solid var(--border-color, #1e293b);
    color: var(--text, #e2e8f0);
    white-space: nowrap;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ei-preview-row.ei-type-income td:nth-child(1) { color: #34d399; }
.ei-preview-row.ei-type-expense td:nth-child(1) { color: #f87171; }
.ei-preview-row:nth-child(even) {
    background: var(--input-bg, rgba(15,23,42,0.5));
}
.ei-desc-cell {
    color: var(--text-muted, #94a3b8) !important;
    font-style: italic;
}
.ei-more-rows {
    text-align: center;
    color: var(--text-muted, #64748b);
    padding: 8px !important;
    font-style: italic;
}
.ei-actions {
    display: flex;
    gap: 10px;
    margin-top: 4px;
}
.ei-btn-primary {
    flex: 1;
    padding: 12px 20px;
    border-radius: 12px;
    border: none;
    background: var(--accent, #6366f1);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
}
.ei-btn-primary:hover { opacity: 0.88; }
.ei-btn-secondary {
    padding: 12px 16px;
    border-radius: 12px;
    border: 1px solid var(--border-color, #334155);
    background: transparent;
    color: var(--text-muted, #94a3b8);
    font-size: 14px;
    cursor: pointer;
    transition: background 0.15s;
}
.ei-btn-secondary:hover { background: var(--card-bg, #1e293b); }
.ei-done-icon {
    font-size: 52px;
    text-align: center;
    margin: 12px 0 4px;
}
.ei-done-text {
    text-align: center;
    font-size: 15px;
    color: var(--text, #e2e8f0);
    line-height: 1.6;
}
.ei-done-text strong {
    color: #34d399;
    font-size: 18px;
}
[data-theme="light"] .ei-select,
[data-theme="yogurt"] .ei-select,
[data-theme="dolphin"] .ei-select,
[data-theme="mint"] .ei-select,
[data-theme="sage"] .ei-select {
    background: var(--input-bg, #f8fafc);
    border-color: var(--border-color, #cbd5e1);
    color: var(--text, #1e293b);
}
[data-theme="light"] .ei-feature-banner,
[data-theme="yogurt"] .ei-feature-banner,
[data-theme="dolphin"] .ei-feature-banner,
[data-theme="mint"] .ei-feature-banner,
[data-theme="sage"] .ei-feature-banner {
    background: var(--card-bg, #f1f5f9);
    border-color: var(--border-color, #cbd5e1);
}
[data-theme="light"] .ei-instructions,
[data-theme="yogurt"] .ei-instructions,
[data-theme="dolphin"] .ei-instructions,
[data-theme="mint"] .ei-instructions,
[data-theme="sage"] .ei-instructions {
    background: var(--card-bg, #f8fafc);
    border-color: var(--border-color, #e2e8f0);
}
[data-theme="light"] .ei-inst-title,
[data-theme="yogurt"] .ei-inst-title,
[data-theme="dolphin"] .ei-inst-title,
[data-theme="mint"] .ei-inst-title,
[data-theme="sage"] .ei-inst-title {
    color: var(--text, #1e293b);
    border-bottom-color: var(--border-color, #e2e8f0);
}
[data-theme="light"] .ei-inst-source b,
[data-theme="yogurt"] .ei-inst-source b,
[data-theme="dolphin"] .ei-inst-source b,
[data-theme="mint"] .ei-inst-source b,
[data-theme="sage"] .ei-inst-source b {
    color: var(--text, #1e293b);
}
[data-theme="light"] .ei-inst-source span,
[data-theme="yogurt"] .ei-inst-source span,
[data-theme="dolphin"] .ei-inst-source span,
[data-theme="mint"] .ei-inst-source span,
[data-theme="sage"] .ei-inst-source span {
    color: var(--text-muted, #64748b);
}
[data-theme="light"] .ei-feature-title,
[data-theme="yogurt"] .ei-feature-title,
[data-theme="dolphin"] .ei-feature-title,
[data-theme="mint"] .ei-feature-title,
[data-theme="sage"] .ei-feature-title {
    color: var(--text, #1e293b);
}
[data-theme="light"] .ei-feature-desc,
[data-theme="yogurt"] .ei-feature-desc,
[data-theme="dolphin"] .ei-feature-desc,
[data-theme="mint"] .ei-feature-desc,
[data-theme="sage"] .ei-feature-desc {
    color: var(--text-muted, #64748b);
}
[data-theme="light"] .ei-dropzone,
[data-theme="yogurt"] .ei-dropzone,
[data-theme="dolphin"] .ei-dropzone,
[data-theme="mint"] .ei-dropzone,
[data-theme="sage"] .ei-dropzone {
    background: var(--card-bg, #f8fafc);
    border-color: var(--border-color, #cbd5e1);
}
[data-theme="light"] .ei-drop-title,
[data-theme="yogurt"] .ei-drop-title,
[data-theme="dolphin"] .ei-drop-title,
[data-theme="mint"] .ei-drop-title,
[data-theme="sage"] .ei-drop-title {
    color: var(--text, #1e293b);
}
[data-theme="light"] .ei-preview-table td,
[data-theme="yogurt"] .ei-preview-table td,
[data-theme="dolphin"] .ei-preview-table td,
[data-theme="mint"] .ei-preview-table td,
[data-theme="sage"] .ei-preview-table td {
    color: var(--text, #1e293b);
    border-top-color: var(--border-color, #e2e8f0);
}
[data-theme="light"] .ei-preview-table thead tr,
[data-theme="yogurt"] .ei-preview-table thead tr,
[data-theme="dolphin"] .ei-preview-table thead tr,
[data-theme="mint"] .ei-preview-table thead tr,
[data-theme="sage"] .ei-preview-table thead tr {
    background: var(--card-bg, #f1f5f9);
}
[data-theme="light"] .ei-map-label,
[data-theme="yogurt"] .ei-map-label,
[data-theme="dolphin"] .ei-map-label,
[data-theme="mint"] .ei-map-label,
[data-theme="sage"] .ei-map-label {
    color: var(--text, #1e293b);
}
[data-theme="light"] .ei-done-text,
[data-theme="yogurt"] .ei-done-text,
[data-theme="dolphin"] .ei-done-text,
[data-theme="mint"] .ei-done-text,
[data-theme="sage"] .ei-done-text {
    color: var(--text, #1e293b);
}
.excel-import-wrap {
    padding: 2px 0 10px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.ei-step {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.ei-step.hidden {
    display: none !important;
}
.ei-feature-banner {
    position: relative;
    display: grid;
    grid-template-columns: 133px 1fr;
    gap: 12px;
    min-height: 132px;
    padding: 0;
    border-radius: 22px;
    overflow: hidden;
    isolation: isolate;
    background:
            linear-gradient(
                    135deg,
                    rgba(255,255,255,0.1),
                    rgba(255,255,255,0.025)
            ),
            radial-gradient(
                    circle at 15% 0%,
                    color-mix(in srgb, var(--primary-color) 26%, transparent),
                    transparent 48%
            ),
            radial-gradient(
                    circle at 90% 100%,
                    rgba(99,102,241,0.22),
                    transparent 46%
            ),
            rgba(0,0,0,0.22);
    border: 1px solid rgba(255,255,255,0.09);
}
.ei-feature-bg-glow {
    position: absolute;
    width: 150px;
    height: 150px;
    left: -58px;
    top: -58px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary-color) 28%, transparent);
    filter: blur(26px);
    opacity: 0.75;
    z-index: -1;
}
.ei-shark-frame {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    align-self: center;
    background:
            linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)),
            rgba(0,0,0,0.32);
}
.ei-shark-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
            linear-gradient(
                    180deg,
                    transparent 42%,
                    rgba(0,0,0,0.34) 100%
            );
    pointer-events: none;
}
.ei-shark-img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center 42%;
    transform: scale(1.08);
    border-radius: 0;
}
.ei-feature-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    padding: 2px 2px 2px 0;
}
.ei-feature-title {
    font-size: 1.28rem;
    line-height: 1.05;
    font-weight: 900;
    letter-spacing: -0.04em;
    color: var(--secondary-color);
}
.ei-feature-desc {
    max-width: 96%;
    font-size: 0.74rem;
    color: var(--secondary-color);
    opacity: 0.72;
    line-height: 1.42;
    font-weight: 600;
}
.ei-feature-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
}
.ei-feature-tags span {
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 10px;
    line-height: 1;
    font-weight: 800;
    color: var(--secondary-color);
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
}
.ei-instructions {
    background:
            linear-gradient(
                    180deg,
                    rgba(255,255,255,0.055),
                    rgba(255,255,255,0.02)
            ),
            rgba(0,0,0,0.12);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 18px;
    overflow: hidden;
    margin-bottom: 0;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.ei-inst-title {
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--secondary-color);
    padding: 11px 13px 9px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    letter-spacing: -0.01em;
}
.ei-inst-body {
    padding: 10px 12px 12px;
}
.ei-inst-sources {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}
.ei-inst-source {
    display: grid;
    grid-template-columns: 32px 1fr;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 14px;
    background: rgba(255,255,255,0.035);
    border: 1px solid rgba(255,255,255,0.055);
    color: var(--secondary-color);
}
.ei-inst-icon {
    width: 32px;
    height: 32px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    background: rgba(0,0,0,0.18);
    flex-shrink: 0;
}
.ei-inst-source b {
    color: var(--secondary-color);
    display: block;
    margin-bottom: 2px;
    font-size: 0.76rem;
    line-height: 1.15;
}
.ei-inst-source span:not(.ei-inst-icon) {
    color: var(--secondary-color);
    opacity: 0.58;
    font-size: 0.68rem;
    line-height: 1.25;
}
.ei-dropzone {
    position: relative;
    display: grid;
    grid-template-columns: 44px 1fr;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border: 1.5px dashed color-mix(in srgb, var(--primary-color) 42%, rgba(255,255,255,0.14));
    border-radius: 18px;
    cursor: pointer;
    background:
            linear-gradient(
                    135deg,
                    color-mix(in srgb, var(--primary-color) 14%, transparent),
                    rgba(255,255,255,0.025)
            ),
            rgba(0,0,0,0.16);
    transition:
            transform 0.14s ease,
            border-color 0.18s ease,
            background 0.18s ease,
            box-shadow 0.18s ease;
    text-align: left;
    overflow: hidden;
}
.ei-dropzone::after {
    content: "Выбрать";
    justify-self: end;
    padding: 8px 10px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 900;
    color: var(--secondary-color);
    background: var(--primary-color);
    box-shadow: 0 8px 18px color-mix(in srgb, var(--primary-color) 20%, transparent);
}
.ei-dropzone:hover,
.ei-dropzone.ei-drag-over {
    transform: translateY(-1px);
    border-color: var(--primary-color);
    box-shadow:
            0 14px 30px rgba(0,0,0,0.22),
            0 0 0 1px color-mix(in srgb, var(--primary-color) 16%, transparent);
}
.ei-drop-icon {
    width: 44px;
    height: 44px;
    border-radius: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.07);
}
.ei-drop-title {
    font-size: 0.86rem;
    font-weight: 900;
    color: var(--secondary-color);
    line-height: 1.15;
}
.ei-drop-sub {
    font-size: 0.68rem;
    color: var(--secondary-color);
    opacity: 0.55;
    line-height: 1.2;
}
.ei-file-name {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--primary-color);
    padding: 9px 11px;
    background: color-mix(in srgb, var(--primary-color) 10%, rgba(0,0,0,0.08));
    border: 1px solid color-mix(in srgb, var(--primary-color) 20%, transparent);
    border-radius: 12px;
    text-align: center;
}
.ei-error {
    font-size: 0.78rem;
    color: #ff7b7b;
    padding: 10px 12px;
    background: rgba(255, 75, 92, 0.12);
    border: 1px solid rgba(255, 75, 92, 0.22);
    border-radius: 12px;
}
.ei-error.hidden {
    display: none;
}
.eip-data-tools {
    margin: 4px 0 24px;
    padding: 14px;
    border-radius: 20px;
    background:
            linear-gradient(
                    180deg,
                    rgba(255,255,255,0.055),
                    rgba(255,255,255,0.02)
            ),
            var(--tertiary-color);
    border: 1px solid rgba(255,255,255,0.07);
    box-shadow: var(--shadow-sm);
}
.eip-tools-head,
.eip-import-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}
.eip-tools-head h3,
.eip-import-head h4 {
    margin: 0 0 3px;
    padding: 0;
    font-size: 1rem;
    font-weight: 850;
    color: var(--secondary-color);
}
.eip-tools-head p,
.eip-import-head p {
    margin: 0;
    font-size: 0.72rem;
    line-height: 1.35;
    color: var(--secondary-color);
    opacity: 0.55;
}
.eip-mini-icon-btn {
    width: 34px;
    height: 34px;
    border-radius: 13px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.05);
    color: var(--secondary-color);
    margin: 0 !important;
    font-weight: 900;
}
.eip-tools-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 12px;
}
.eip-tool-card {
    padding: 12px;
    border-radius: 16px;
    background: rgba(0,0,0,0.14);
    border: 1px solid rgba(255,255,255,0.065);
}
.eip-tool-card-primary {
    background:
            radial-gradient(
                    circle at 0% 0%,
                    color-mix(in srgb, var(--primary-color) 15%, transparent),
                    transparent 42%
            ),
            rgba(0,0,0,0.14);
}
.eip-tool-card-title {
    margin-bottom: 10px;
    color: var(--secondary-color);
    font-size: 0.82rem;
    font-weight: 850;
    opacity: 0.82;
}
.eip-tool-label {
    display: block;
    margin: 0 0 7px;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--secondary-color);
    opacity: 0.62;
}
.eip-month-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
}
.eip-type-row {
    margin-top: 10px;
}
.eip-month-input,
.eip-type-select {
    width: 100%;
    height: 42px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.09);
    background: rgba(0,0,0,0.18);
    color: var(--secondary-color);
    padding: 0 12px;
    font-weight: 800;
}
.eip-mini-btn {
    height: 42px;
    padding: 0 12px;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--primary-color) 32%, transparent);
    background: color-mix(in srgb, var(--primary-color) 14%, transparent);
    color: var(--secondary-color);
    font-weight: 850;
    margin: 0 !important;
}
.eip-month-summary,
.eip-duplicates-result,
.eip-empty-note {
    margin-top: 10px;
    padding: 10px;
    border-radius: 13px;
    background: rgba(255,255,255,0.04);
    color: var(--secondary-color);
    opacity: 0.82;
    font-size: 0.74rem;
    line-height: 1.45;
}
.eip-tool-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    margin-top: 10px;
}
.eip-tool-btn {
    min-height: 42px;
    border-radius: 15px;
    font-weight: 850;
    font-size: 0.76rem;
    margin: 0 !important;
}
.eip-tool-btn-safe {
    background: color-mix(in srgb, var(--primary-color) 18%, rgba(255,255,255,0.04));
    color: var(--secondary-color);
    border: 1px solid color-mix(in srgb, var(--primary-color) 28%, transparent);
}
.eip-tool-btn-danger,
.eip-maintenance-danger {
    background: rgba(255, 75, 92, 0.14) !important;
    color: #ff6b78 !important;
    border: 1px solid rgba(255, 75, 92, 0.28) !important;
}
.eip-maintenance-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
    margin-bottom: 12px;
}
.eip-maintenance-grid-compact {
    margin-bottom: 0;
}
.eip-maintenance-btn {
    display: grid;
    grid-template-columns: 34px 1fr;
    grid-template-areas:
        "icon title"
        "icon desc";
    align-items: center;
    column-gap: 10px;
    width: 100%;
    padding: 11px 12px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.065);
    background: rgba(255,255,255,0.045);
    color: var(--secondary-color);
    text-align: left;
    margin: 0 !important;
}
.eip-maintenance-btn span {
    grid-area: icon;
    width: 34px;
    height: 34px;
    border-radius: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.18);
    font-size: 18px;
}
.eip-maintenance-btn b {
    grid-area: title;
    font-size: 0.8rem;
    line-height: 1.15;
}
.eip-maintenance-btn small {
    grid-area: desc;
    font-size: 0.68rem;
    line-height: 1.25;
    opacity: 0.55;
}
.eip-duplicates-result.hidden {
    display: none;
}
.eip-duplicate-row {
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.eip-duplicate-row:last-child {
    border-bottom: 0;
}
.eip-duplicate-row span {
    opacity: 0.6;
}
.eip-import-batches,
.eip-backups-block {
    margin-top: 12px;
    padding: 12px;
    border-radius: 16px;
    background: rgba(255,255,255,0.035);
    border: 1px solid rgba(255,255,255,0.06);
}
.eip-import-batches-list,
.eip-backups-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.eip-import-batch-card,
.eip-backup-card {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 10px;
    border-radius: 14px;
    background: rgba(0,0,0,0.13);
    border: 1px solid rgba(255,255,255,0.055);
}
.eip-import-batch-main,
.eip-backup-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.eip-import-batch-main b,
.eip-backup-main b {
    font-size: 0.78rem;
    color: var(--secondary-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.eip-import-batch-main span,
.eip-backup-main span,
.eip-import-batch-main small {
    font-size: 0.67rem;
    color: var(--secondary-color);
    opacity: 0.56;
    line-height: 1.25;
}
.eip-import-batch-actions,
.eip-backup-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.eip-import-batch-actions button,
.eip-backup-actions button {
    width: auto;
    min-width: 84px;
    min-height: 30px;
    margin: 0 !important;
    padding: 6px 9px;
    border-radius: 11px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.055);
    color: var(--secondary-color);
    font-size: 0.68rem;
    font-weight: 800;
}
.eip-batch-rollback,
.eip-backup-restore {
    color: #ffcf6b !important;
    border-color: rgba(255,207,107,0.22) !important;
    background: rgba(255,207,107,0.09) !important;
}
@media (min-width: 520px) {
    .eip-tools-grid {
        grid-template-columns: 1.15fr 0.85fr;
    }
    .eip-maintenance-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
.data-confirm-modal.hidden {
    display: none;
}
.data-confirm-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    padding: 18px;
}
.data-confirm-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.58);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.data-confirm-card {
    position: relative;
    width: min(420px, 100%);
    padding: 16px;
    border-radius: 24px;
    background:
            linear-gradient(
                    180deg,
                    rgba(255,255,255,0.08),
                    rgba(255,255,255,0.025)
            ),
            var(--tertiary-color);
    border: 1px solid rgba(255,255,255,0.09);
    box-shadow:
            0 24px 70px rgba(0,0,0,0.45),
            inset 0 1px 0 rgba(255,255,255,0.08);
    color: var(--secondary-color);
    animation: dataConfirmIn 0.18s ease both;
}
.data-confirm-icon {
    width: 54px;
    height: 54px;
    margin: 0 auto 12px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
}
.data-confirm-danger .data-confirm-icon {
    background: rgba(255, 75, 92, 0.14);
    border-color: rgba(255, 75, 92, 0.28);
}
.data-confirm-warning .data-confirm-icon {
    background: rgba(255, 207, 107, 0.13);
    border-color: rgba(255, 207, 107, 0.25);
}
.data-confirm-content {
    text-align: center;
}
.data-confirm-content h3 {
    margin: 0 0 8px;
    padding: 0;
    font-size: 1.05rem;
    line-height: 1.15;
    font-weight: 900;
    letter-spacing: -0.03em;
    color: var(--secondary-color);
}
.data-confirm-message {
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--secondary-color);
    opacity: 0.76;
}
.data-confirm-message b {
    color: var(--secondary-color);
    opacity: 1;
}
.data-confirm-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 16px;
}
.data-confirm-btn {
    min-height: 44px;
    margin: 0 !important;
    border-radius: 16px;
    font-size: 0.82rem;
    font-weight: 900;
    border: 1px solid rgba(255,255,255,0.08);
}
.data-confirm-btn-cancel {
    background: rgba(255,255,255,0.055);
    color: var(--secondary-color);
}
.data-confirm-btn-ok {
    background: rgba(255, 75, 92, 0.18);
    color: #ff6b78;
    border-color: rgba(255, 75, 92, 0.32);
}
.data-confirm-warning .data-confirm-btn-ok {
    background: rgba(255, 207, 107, 0.14);
    color: #ffcf6b;
    border-color: rgba(255, 207, 107, 0.28);
}
@keyframes dataConfirmIn {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
.ei-op-main{display:flex;flex-direction:column;gap:2px;min-width:0}
.ei-op-pick{align-self:flex-start;margin:2px 0 0;padding:2px 9px;border:0;border-radius:999px;background:var(--chip, rgba(255,255,255,.1));color:var(--accent, #3dffa0);font-size:11px;font-weight:700;cursor:pointer;min-height:0;width:auto}
.ei-up { gap: 12px; }
.ei-up-head { display: flex; align-items: center; gap: 12px; }
.ei-up-shark { width: 56px; height: 56px; object-fit: contain; flex: none; }
.ei-up-head b { display: block; font-size: 17px; font-weight: 800; color: var(--text, #e2e8f0); }
.ei-up-head small { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.35; color: var(--muted, #94a3b8); }
.ei-up .ei-up-drop {
    padding: 22px 16px; gap: 4px; border-radius: 20px;
    border: 1.5px dashed color-mix(in srgb, var(--accent, #3dffa0) 55%, transparent);
    background: color-mix(in srgb, var(--accent, #3dffa0) 9%, transparent);
}
.ei-up .ei-up-drop .ei-drop-icon { font-size: 30px; }
.ei-up .ei-up-drop .ei-drop-title { font-size: 16px; font-weight: 800; color: var(--accent, #3dffa0); }
.ei-up-help { border-radius: 16px; background: var(--faint, rgba(255,255,255,.06)); padding: 0 14px; }
.ei-up-help summary { list-style: none; cursor: pointer; padding: 12px 0; font-size: 13.5px; font-weight: 700; color: var(--text, #e2e8f0); display: flex; justify-content: space-between; align-items: center; }
.ei-up-help summary::-webkit-details-marker { display: none; }
.ei-up-help summary::after { content: '›'; font-size: 20px; line-height: 1; color: var(--muted, #94a3b8); transition: transform .2s; }
.ei-up-help[open] summary::after { transform: rotate(90deg); }
.ei-up-help ul { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ei-up-help li b { display: block; font-size: 13px; color: var(--text, #e2e8f0); }
.ei-up-help li span { display: block; font-size: 12px; color: var(--muted, #94a3b8); line-height: 1.35; }
.ei-up-help .ei-banks { margin: 0 0 12px; }
.ei-banks { display: flex; flex-wrap: wrap; gap: 6px; }
.ei-banks span { padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; background: var(--faint, rgba(255,255,255,.08)); color: var(--muted, #94a3b8); }
/* ── 31-analytics-insights.css ── */
#bi-insights {
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 2.5vw, 16px);
    padding: clamp(10px, 3vw, 18px) 0 8px;
}
.bi-kpi-row {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
    margin-top: 44px;
    -webkit-overflow-scrolling: touch;
}
.bi-kpi-row::-webkit-scrollbar { display: none; }
.bi-kpi {
    flex: 0 0 auto;
    min-width: clamp(88px, 21vw, 108px);
    background: var(--accent-color, rgba(255,255,255,.05));
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 16px;
    padding: 11px 12px 10px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    touch-action: manipulation;
    position: relative;
    overflow: hidden;
}
.bi-kpi--neg {
    border-color: rgba(244,63,94,.35);
    background: rgba(244,63,94,.06);
}
.bi-kpi--neg::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2.5px;
    background: #f43f5e;
    border-radius: 16px 16px 0 0;
}
.bi-kpi:active { transform: scale(0.95); }
.bi-kpi-icon-wrap {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(255,255,255,.07);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2px;
}
.bi-kpi-i  { font-size: 15px; line-height: 1; }
.bi-kpi-v  {
    font-size: 14px;
    font-weight: 800;
    color: var(--secondary-color, #f1f5f9);
    white-space: nowrap;
    letter-spacing: -0.01em;
}
.bi-kpi--neg .bi-kpi-v { color: #fca5a5; }
.bi-kpi-l  {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--secondary-color, #94a3b8);
    opacity: .6;
}
.bi-kpi-s  {
    font-size: 10px;
    color: var(--secondary-color, #64748b);
    opacity: .5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bi-kpi--neg .bi-kpi-v {
    animation: neg-pulse 2.5s ease-in-out infinite;
}
@keyframes neg-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.55; }
}
.bi-health {
    background: var(--accent-color, rgba(255,255,255,.04));
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 16px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.bi-health-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.bi-health-lbl {
    font-size: 13px;
    font-weight: 700;
    color: var(--secondary-color, #e2e8f0);
    display: flex;
    align-items: center;
}
.bi-health-score {
    font-size: 13px;
    font-weight: 800;
    transition: color .4s;
    letter-spacing: -0.01em;
}
.bi-health-track {
    height: 8px;
    background: rgba(255,255,255,.08);
    border-radius: 99px;
    overflow: hidden;
}
.bi-health-fill {
    height: 100%;
    width: 0;
    border-radius: 99px;
    transition: width 1.2s cubic-bezier(.4,0,.2,1), background .4s;
    box-shadow: 0 0 8px currentColor;
}
.bi-health-hint {
    font-size: 11.5px;
    color: var(--secondary-color, #64748b);
    opacity: .65;
    line-height: 1.45;
}
.bi-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
}
.bi-card {
    background: var(--accent-color, rgba(255,255,255,.04));
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 15px;
    padding: 12px 13px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    transition: transform 0.15s ease;
    touch-action: manipulation;
    position: relative;
    overflow: hidden;
}
.bi-card::before {
    content: '';
    position: absolute;
    left: 0; top: 12%; bottom: 12%;
    width: 3px;
    background: var(--ac, #6366f1);
    border-radius: 0 3px 3px 0;
    opacity: 0.85;
}
.bi-card:active { transform: scale(0.98); }
.bi-card--w     { grid-column: 1 / -1; }
.bi-card--tip {
    background: color-mix(in srgb, var(--ac, #6366f1) 8%, var(--accent-color, rgba(0,0,0,0)));
    border-color: color-mix(in srgb, var(--ac, #6366f1) 30%, transparent);
}
.bi-card--interactive { cursor: default; }
.bi-card-hd {
    display: flex;
    align-items: center;
    gap: 7px;
}
.bi-card-e-wrap {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--ac, #6366f1) 18%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.bi-card-e {
    font-size: 14px;
    line-height: 1;
    flex-shrink: 0;
}
.bi-card-t {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--secondary-color, #94a3b8);
    opacity: .75;
    flex: 1;
    min-width: 0;
    line-height: 1.3;
}
.bi-card-b {
    font-size: 10.5px;
    font-weight: 800;
    color: var(--ac, #6366f1);
    background: color-mix(in srgb, var(--ac, #6366f1) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--ac, #6366f1) 30%, transparent);
    padding: 2px 8px;
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
    letter-spacing: -0.01em;
}
.bi-card-bd {
    font-size: 12.5px;
    color: var(--secondary-color, #e2e8f0);
    line-height: 1.55;
    opacity: .9;
}
.bi-card-bd b {
    color: var(--ac, #6366f1);
    font-weight: 700;
}
.bi-card {
    animation: bi-card-in 0.35s cubic-bezier(.4,0,.2,1) both;
}
@keyframes bi-card-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
.bi-card:nth-child(1)  { animation-delay: 0.02s; }
.bi-card:nth-child(2)  { animation-delay: 0.05s; }
.bi-card:nth-child(3)  { animation-delay: 0.08s; }
.bi-card:nth-child(4)  { animation-delay: 0.11s; }
.bi-card:nth-child(5)  { animation-delay: 0.14s; }
.bi-card:nth-child(6)  { animation-delay: 0.17s; }
.bi-card:nth-child(7)  { animation-delay: 0.20s; }
.bi-card:nth-child(8)  { animation-delay: 0.23s; }
.bi-card:nth-child(9)  { animation-delay: 0.26s; }
.bi-card:nth-child(10) { animation-delay: 0.29s; }
.bi-pd {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    border-bottom: 1px solid rgba(255,255,255,.05);
    font-size: 12px;
    color: var(--secondary-color, #e2e8f0);
    gap: 6px;
}
.bi-pd:last-child  { border-bottom: none; }
.bi-pd > span:first-child {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: .8;
}
.bi-pd-v {
    font-weight: 800;
    color: var(--ac, #10b981);
    font-size: 11px;
    text-align: right;
    flex-shrink: 0;
    white-space: nowrap;
}
#bi-alerts {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.bi-al {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 13px;
    border-radius: 12px;
    font-size: 12.5px;
    line-height: 1.45;
}
.bi-al-i   { flex-shrink: 0; font-size: 15px; margin-top: 1px; }
.bi-al-txt { flex: 1; }
.bi-al-dismiss {
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 12px;
    opacity: .45;
    padding: 0 0 0 4px;
    line-height: 1;
    transition: opacity 0.15s;
    color: inherit;
    align-self: center;
}
.bi-al-dismiss:hover { opacity: .8; }
.bi-al--danger {
    background: rgba(244,63,94,.1);
    border: 1px solid rgba(244,63,94,.3);
    color: #fca5a5;
}
.bi-al--warn {
    background: rgba(245,158,11,.1);
    border: 1px solid rgba(245,158,11,.28);
    color: #fcd34d;
}
.bi-al--info {
    background: rgba(99,102,241,.08);
    border: 1px solid rgba(99,102,241,.2);
    color: #a5b4fc;
}
.bi-anomaly-actions {
    margin-top: 8px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.bi-action-btn {
    border: none;
    border-radius: 20px;
    padding: 5px 13px;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s, opacity 0.15s;
    line-height: 1.4;
    -webkit-tap-highlight-color: transparent;
}
.bi-action-btn:active { transform: scale(0.93); opacity: 0.8; }
.bi-action-ok {
    background: rgba(16,185,129,.18);
    color: #6ee7b7;
    border: 1px solid rgba(16,185,129,.35);
}
.bi-action-ok:hover  { background: rgba(16,185,129,.28); }
.bi-action-fin {
    background: rgba(6,182,212,.15);
    color: #67e8f9;
    border: 1px solid rgba(6,182,212,.3);
}
.bi-action-fin:hover { background: rgba(6,182,212,.25); }
.bi-sec-sub {
    font-size: 11.5px;
    color: var(--secondary-color, #64748b);
    opacity: .55;
    margin: -2px 0 10px;
    line-height: 1.4;
}
.bi-period-note {
    font-size: 10.5px;
    color: var(--secondary-color, #64748b);
    opacity: .4;
    text-align: center;
    margin: -4px 0 6px;
    letter-spacing: .04em;
}
.bi-empty {
    font-size: 14px;
    color: var(--secondary-color, #64748b);
    opacity: .6;
    padding: 4px 0;
    margin-top: 15px;
}
#analytics-page .analytics-scroll section {
    background: var(--accent-color, rgba(255,255,255,.03));
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 16px;
    padding: 14px 14px 12px;
    margin-bottom: 10px;
}
#analytics-page .analytics-scroll section h4 {
    font-size: 14px;
    font-weight: 700;
    color: var(--secondary-color, #e2e8f0);
    margin: 0 0 2px;
    letter-spacing: 0.01em;
}
#analytics-page section:has(#incomeBySourceChart)          { border-left: 3px solid #10b981; }
#analytics-page section:has(#expensesByCategoryChart),
#analytics-page section:has(#categoriesByDescendingChart)  { border-left: 3px solid #f43f5e; }
#analytics-page section:has(#balanceDynamicsChart),
#analytics-page section:has(#categoryHistoryChart)         { border-left: 3px solid #8b5cf6; }
#analytics-page section:has(#monthlyExpensesChart),
#analytics-page section:has(#annualSummaryChart)           { border-left: 3px solid #3b82f6; }
#analytics-page section:has(#topExpensesChart),
#analytics-page section:has(#spendingByWeekdayChart)       { border-left: 3px solid #f59e0b; }
#analytics-page section:has(#incomeVsExpensesChart)        { border-left: 3px solid #06b6d4; }
#bi-onboarding {
    padding: clamp(12px, 4vw, 24px) clamp(12px, 4vw, 20px) 20px;
    margin-top: 100px;
}
.bi-ob-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    max-width: 420px;
    margin: 0 auto;
    text-align: center;
}
.bi-ob-shark {
    font-size: clamp(52px, 14vw, 72px);
    line-height: 1;
    animation: ob-shark-swim 3s ease-in-out infinite;
    filter: drop-shadow(0 0 18px rgba(99,102,241,.35));
    will-change: transform;
}
@keyframes ob-shark-swim {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    40%       { transform: translateY(-8px) rotate(2deg); }
    70%       { transform: translateY(-4px) rotate(-1deg); }
}
.bi-ob-title {
    font-size: clamp(18px, 5vw, 22px);
    font-weight: 800;
    color: var(--secondary-color, #f1f5f9);
    margin: 0;
    letter-spacing: -0.02em;
}
.bi-ob-sub {
    font-size: clamp(12px, 3.5vw, 14px);
    color: var(--secondary-color, #94a3b8);
    opacity: .7;
    line-height: 1.6;
    margin: 0;
}
.bi-ob-progress-block {
    width: 100%;
    background: var(--accent-color, rgba(255,255,255,.04));
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 16px;
    padding: clamp(12px, 3.5vw, 16px);
    text-align: left;
}
.bi-ob-prog-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}
.bi-ob-prog-lbl {
    font-size: 12.5px;
    color: var(--secondary-color, #e2e8f0);
    font-weight: 600;
}
.bi-ob-prog-count {
    font-size: 12px;
    color: var(--secondary-color, #94a3b8);
    opacity: .7;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.bi-ob-track {
    height: 8px;
    background: rgba(255,255,255,.08);
    border-radius: 99px;
    overflow: hidden;
}
.bi-ob-fill {
    height: 100%;
    border-radius: 99px;
    transition: width 1s cubic-bezier(.4,0,.2,1);
    min-width: 4px;
}
.bi-ob-hint {
    font-size: 12.5px;
    color: var(--secondary-color, #94a3b8);
    background: rgba(99,102,241,.1);
    border: 1px solid rgba(99,102,241,.22);
    border-radius: 12px;
    padding: 9px 14px;
    line-height: 1.5;
    margin: 0;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
}
.bi-ob-hint b { color: #a5b4fc; font-weight: 700; }
.bi-ob-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
}
.bi-ob-feat {
    display: flex;
    align-items: center;
    gap: 7px;
    background: var(--accent-color, rgba(255,255,255,.04));
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 11px;
    padding: 8px 10px;
    font-size: 11.5px;
    color: var(--secondary-color, #cbd5e1);
    opacity: .8;
    text-align: left;
}
.bi-ob-feat span:first-child { font-size: 16px; flex-shrink: 0; }
@media (max-width: 480px) {
    .bi-cards          { grid-template-columns: 1fr; }
    .bi-card--w        { grid-column: 1 / -1; }
    .bi-ob-features    { grid-template-columns: 1fr; }
}
@media (min-width: 480px) {
    .bi-kpi-row        { gap: 10px; justify-content: center; flex-wrap: wrap; }
    .bi-kpi            { min-width: 110px; }
}
@media (min-width: 768px) {
    #bi-insights       { padding: 18px 0 10px; max-width: 900px; margin: 0 auto; }
    .bi-cards          { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
    .bi-kpi            { min-width: 120px; }
}
/* ── 32-search.css ── */
.search-open-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: var(--accent-color);
    border-radius: var(--border-radius-md);
    cursor: pointer;
    font-size: 18px;
    transition: transform 0.15s ease, background 0.2s ease;
    flex-shrink: 0;
}
.search-open-btn:active {
    transform: scale(0.88);
    background: var(--primary-color);
}
.search-sheet {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-index-bottom-sheet);
    background: var(--tertiary-color);
    border-radius: 0 0 24px 24px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    transform: translateY(-110%);
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
    max-height: 82vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.search-sheet.show {
    transform: translateY(0);
}
.search-sheet.hidden {
    display: none;
}
.search-sheet.hidden.show {
    display: flex;
    transform: translateY(-110%);
}
.search-header {
    padding: 12px 16px 0;
    flex-shrink: 0;
}
.search-input-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.search-input-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--accent-color);
    border-radius: var(--border-radius-lg);
    padding: 10px 14px;
    border: 1.5px solid transparent;
    transition: border-color 0.2s ease;
}
.search-input-wrap:focus-within {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.12);
}
.search-input-icon {
    font-size: 16px;
    opacity: 0.5;
    flex-shrink: 0;
}
.search-input {
    flex: 1;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--secondary-color);
    padding: 0;
    min-width: 0;
    -webkit-tap-highlight-color: transparent;
}
.search-input {
    outline: none;
    box-shadow: none;
    border: none;
    background-color: transparent !important;
    -webkit-appearance: none;
    appearance: none;
}
.search-input-wrap input:focus {
    outline: none;
    box-shadow: none;
}
.search-input::placeholder {
    color: var(--secondary-color);
    opacity: 0.4;
    font-weight: 500;
}
.search-close-btn {
    width: 36px;
    height: 36px;
    border: none;
    background: var(--accent-color);
    border-radius: var(--border-radius-md);
    font-size: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--secondary-color);
    font-weight: 700;
    transition: transform 0.15s ease;
    flex-shrink: 0;
    margin: 0;
}
.search-close-btn:active {
    transform: scale(0.88);
}
.search-filters {
    padding: 10px 16px 4px;
    display: flex;
    gap: 6px;
    overflow-x: auto;
    flex-shrink: 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.search-filters::-webkit-scrollbar {
    display: none;
}
.search-type-chip {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border: 1.5px solid var(--accent-color);
    border-radius: 20px;
    background: var(--accent-color);
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: var(--secondary-color);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.18s ease;
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
}
.search-type-chip:active {
    transform: scale(0.92);
}
.search-type-chip.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}
.search-type-chip[data-type="income"].active {
    background: var(--income-color);
    border-color: var(--income-color);
}
.search-type-chip[data-type="expense"].active {
    background: var(--expense-color);
    border-color: var(--expense-color);
}
.search-type-chip[data-type="deposit"].active {
    background: var(--deposit-color);
    border-color: var(--deposit-color);
}
.search-type-chip[data-type="debt"].active {
    background: var(--debt-color);
    border-color: var(--debt-color);
    color: #1a1a1a;
}
.search-divider {
    height: 1px;
    background: var(--accent-color);
    margin: 8px 0 0;
}
.search-results {
    flex: 1;
    overflow-y: auto;
    padding: 0 0 env(safe-area-inset-bottom, 16px);
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
.search-tx-income-name {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 6px;
    color: var(--secondary-color);
    opacity: 0.75;
}
.search-placeholder {
    padding: 36px 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.search-placeholder-icon {
    font-size: 40px;
    line-height: 1;
    opacity: 0.6;
}
.search-placeholder-text {
    font-size: 15px;
    font-weight: 700;
    color: var(--secondary-color);
    opacity: 0.7;
}
.search-placeholder-hint {
    font-size: 12px;
    font-weight: 500;
    color: var(--secondary-color);
    opacity: 0.4;
}
.search-count {
    padding: 10px 16px 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--secondary-color);
    opacity: 0.45;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.search-tx-list {
    list-style: none;
    padding: 0 12px 12px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.search-tx-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg-secondary-color);
    border-radius: 14px;
    border-left: 3px solid #ccc;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
    animation: searchItemIn 0.18s ease both;
    -webkit-tap-highlight-color: transparent;
}
@keyframes searchItemIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.search-tx-item:active {
    transform: scale(0.97);
    box-shadow: none;
}
.search-tx-left {
    flex-shrink: 0;
}
.search-tx-emoji {
    font-size: 22px;
    line-height: 1;
}
.search-tx-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.search-tx-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--secondary-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.search-tx-date {
    font-size: 11px;
    font-weight: 500;
    color: var(--secondary-color);
    opacity: 0.45;
}
.search-tx-right {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}
.search-tx-chevron {
    font-size: 16px;
    font-weight: 700;
    color: var(--secondary-color);
    opacity: 0.25;
    line-height: 1;
}
.search-tx-amount {
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.search-amount-pos {
    color: var(--income-color);
}
.search-amount-neg {
    color: var(--expense-color);
}
mark.search-highlight {
    background: rgba(46, 204, 113, 0.25);
    color: inherit;
    border-radius: 3px;
    padding: 0 1px;
    font-weight: 800;
}
.search-products {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 2px;
}
.search-product-tag {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    background: var(--accent-color);
    border-radius: 6px;
    color: var(--secondary-color);
    opacity: 0.75;
}
.search-product-more {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    background: var(--accent-color);
    border-radius: 6px;
    color: var(--secondary-color);
    opacity: 0.5;
}
.search-tx-item:nth-child(1) { animation-delay: 0ms; }
.search-tx-item:nth-child(2) { animation-delay: 30ms; }
.search-tx-item:nth-child(3) { animation-delay: 60ms; }
.search-tx-item:nth-child(4) { animation-delay: 90ms; }
.search-tx-item:nth-child(5) { animation-delay: 120ms; }
.search-tx-item:nth-child(n+6) { animation-delay: 150ms; }
[data-theme="dark"] .search-sheet {
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
}
[data-theme="dark"] mark.search-highlight {
    background: rgba(46, 204, 113, 0.2);
}
[data-theme="dark"] .search-type-chip[data-type="debt"].active {
    color: #111;
}
/* ── 33-data-tools.css ── */
#export-import-page .subpage-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.eip-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}
@media (min-width: 360px) {
    .eip-stats-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}
.eip-stat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    background: var(--card-bg, #1e1e1e);
    border-radius: 12px;
    padding: 12px 4px;
    text-align: center;
    min-width: 0;
    box-sizing: border-box;
}
.eip-stat-icon {
    font-size: 1.2rem;
    line-height: 1;
}
.eip-stat-value {
    font-size: 0.95rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    box-sizing: border-box;
}
.eip-stat-label {
    font-size: 0.65rem;
    color: var(--text-muted, #777);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.eip-chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.eip-chart-title {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.65;
}
.eip-chart-total {
    font-size: 0.76rem;
    color: var(--text-muted, #666);
}
.eip-chart-block {
    background: var(--card-bg, #1e1e1e);
    border-radius: 12px;
    padding: 14px;
    box-sizing: border-box;
}
.eip-bars {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr) max-content;
    align-items: center;
    column-gap: 12px;
    row-gap: 9px;
}
.eip-bar-row {
    display: contents;
}
.eip-bar-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.78rem;
    color: var(--text-muted, #aaa);
    white-space: nowrap;
}
.eip-bar-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}
.eip-bar-track {
    min-width: 0;
    height: 7px;
    background: rgba(255,255,255,0.06);
    border-radius: 4px;
    overflow: hidden;
}
.eip-bar-fill {
    height: 100%;
    border-radius: 4px;
    width: 0%;
    transition: width 0.5s ease;
}
.eip-bar-count {
    font-size: 0.75rem;
    color: var(--text-muted, #888);
    text-align: right;
}
.eip-activity-block {
    background: var(--card-bg, #1e1e1e);
    border-radius: 12px;
    padding: 14px;
    box-sizing: border-box;
}
.eip-sparkline-wrap {
    position: relative;
    height: 80px;
    width: 100%;
}
.eip-sparkline-wrap canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}
.eip-budgets-block {
    background: var(--card-bg, #1e1e1e);
    border-radius: 12px;
    padding: 14px;
    box-sizing: border-box;
}
.eip-budgets-title {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.65;
    margin-bottom: 10px;
}
.eip-budget-row {
    display: grid;
    grid-template-columns: 1fr 70px 28px;
    align-items: center;
    gap: 8px;
    padding: 7px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.eip-budget-row:last-child { border-bottom: none; }
.eip-budget-name {
    font-size: 0.84rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.eip-budget-bar-track {
    height: 5px;
    background: rgba(255,255,255,0.06);
    border-radius: 3px;
    overflow: hidden;
}
.eip-budget-bar-fill {
    height: 100%;
    background: var(--primary-color);
    border-radius: 3px;
    transition: width 0.4s ease;
    min-width: 2px;
}
.eip-budget-count {
    font-size: 0.75rem;
    color: var(--text-muted, #666);
    text-align: right;
}
.eip-actions-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    box-sizing: border-box;
}
.eip-action-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 12px;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    text-align: left;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    width: 100%;
    -webkit-tap-highlight-color: transparent;
    transition: opacity 0.15s, transform 0.1s;
}
.eip-action-btn:active { transform: scale(0.97); opacity: 0.85; }
.eip-action-btn input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}
.eip-action-primary   { background: var(--primary-color); color: #fff; margin: 0;}
.eip-action-secondary { background: #1e3040; color: #7ec8e3; }
.eip-action-muted     { background: rgba(255,255,255,0.06); color: var(--text-muted, #aaa); }
.eip-action-danger    { background: rgba(255, 75, 92, 0.12); color: #ff6b6b; }
.eip-action-icon {
    font-size: 1.5rem;
    line-height: 1;
    flex-shrink: 0;
}
.eip-action-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    overflow: hidden;
}
.eip-action-text b     { font-size: 0.85rem; font-weight: 700; white-space: nowrap; }
.eip-action-text small { font-size: 0.7rem; opacity: 0.65; white-space: nowrap; }
.eip-data-tools {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.eip-tools-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}
.eip-tools-head h3 {
    font-size: 0.92rem;
    font-weight: 700;
    margin: 0 0 2px;
}
.eip-tools-head p {
    font-size: 0.74rem;
    color: var(--text-muted, #666);
    margin: 0;
}
.eip-mini-icon-btn {
    background: rgba(255,255,255,0.07);
    border: none;
    color: var(--text-muted, #aaa);
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}
.eip-mini-icon-btn:active { background: rgba(255,255,255,0.12); }
.eip-tools-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.eip-tool-card {
    background: var(--card-bg, #1e1e1e);
    border-radius: 12px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-sizing: border-box;
    width: 100%;
}
.eip-tool-card-primary {
    border: 1.5px solid rgba(var(--primary-color-rgb, 100, 150, 255), 0.25);
}
.eip-tool-card-title {
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--primary-color);
}
.eip-tool-label {
    font-size: 0.74rem;
    color: var(--text-muted, #888);
    display: block;
    margin-bottom: 4px;
}
.eip-month-row {
    display: flex;
    gap: 6px;
    align-items: center;
}
.eip-month-input {
    flex: 1;
    min-width: 0;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    color: var(--text-color, #fff);
    font-size: 0.85rem;
    padding: 8px 10px;
    outline: none;
    box-sizing: border-box;
    -webkit-appearance: none;
}
.eip-month-input:focus { border-color: var(--primary-color); }
.eip-mini-btn {
    background: rgba(255,255,255,0.08);
    border: none;
    color: var(--text-color, #ccc);
    font-size: 0.74rem;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.15s;
}
.eip-mini-btn:active { background: rgba(255,255,255,0.14); }
.eip-type-row { display: flex; flex-direction: column; }
.eip-type-select {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    color: var(--text-color, #fff);
    font-size: 0.85rem;
    padding: 8px 10px;
    outline: none;
    width: 100%;
    box-sizing: border-box;
    -webkit-appearance: none;
}
.eip-type-select:focus { border-color: var(--primary-color); }
.eip-month-summary {
    font-size: 0.78rem;
    color: var(--text-muted, #888);
    background: rgba(255,255,255,0.04);
    border-radius: 8px;
    padding: 10px;
    line-height: 1.7;
}
.eip-tool-actions {
    display: flex;
    gap: 6px;
}
.eip-tool-btn {
    flex: 1;
    padding: 10px 6px;
    border: none;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.1s;
    text-align: center;
    white-space: nowrap;
    min-width: 0;
}
.eip-tool-btn:active { transform: scale(0.97); opacity: 0.8; }
.eip-tool-btn-safe   { background: rgba(39,174,96,0.15); color: #4dbb7a; }
.eip-tool-btn-danger { background: rgba(255,75,92,0.12); color: #ff6b6b; }
.eip-maintenance-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    box-sizing: border-box;
}
.eip-maintenance-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 12px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
    text-align: left;
    color: var(--text-color, #fff);
    box-sizing: border-box;
    width: 100%;
}
.eip-maintenance-btn:active { transform: scale(0.97); background: rgba(255,255,255,0.07); }
.eip-maintenance-btn span  { font-size: 1.2rem; line-height: 1; }
.eip-maintenance-btn b     { font-size: 0.8rem; font-weight: 700; }
.eip-maintenance-btn small { font-size: 0.7rem; color: var(--text-muted, #666); line-height: 1.3; }
.eip-maintenance-danger { border-color: rgba(255,75,92,0.25); color: #ff6b6b; }
.eip-duplicates-result {
    background: rgba(255,255,255,0.04);
    border-radius: 10px;
    padding: 12px;
    font-size: 0.8rem;
    color: var(--text-muted, #aaa);
    line-height: 1.6;
}
.eip-duplicates-result.hidden { display: none; }
.eip-import-batches,
.eip-backups-block {
    background: var(--card-bg, #1e1e1e);
    border-radius: 12px;
    padding: 14px;
    box-sizing: border-box;
}
.eip-import-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 10px;
}
.eip-import-head h4 {
    font-size: 0.86rem;
    font-weight: 700;
    margin: 0 0 2px;
}
.eip-import-head p {
    font-size: 0.73rem;
    color: var(--text-muted, #666);
    margin: 0;
}
.eip-import-batches-list,
.eip-backups-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.eip-backup-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: rgba(255,255,255,0.03);
    border-radius: 8px;
    padding: 10px 12px;
    border-left: 3px solid var(--primary-color);
    box-sizing: border-box;
}
.eip-backup-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
    overflow: hidden;
}
.eip-backup-main b {
    font-size: 0.78rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.eip-backup-main span {
    font-size: 0.7rem;
    color: var(--text-muted, #666);
}
.eip-backup-actions {
    display: flex;
    gap: 5px;
    flex-shrink: 0;
}
.eip-backup-download,
.eip-backup-restore,
.eip-batch-export,
.eip-batch-rollback {
    font-size: 0.7rem;
    padding: 5px 8px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    white-space: nowrap;
    transition: opacity 0.15s;
}
.eip-backup-download,
.eip-batch-export   { background: rgba(255,255,255,0.08); color: var(--text-color, #ccc); }
.eip-backup-restore,
.eip-batch-rollback { background: rgba(255,75,92,0.15); color: #ff6b6b; }
.eip-backup-download:active,
.eip-batch-export:active,
.eip-backup-restore:active,
.eip-batch-rollback:active { opacity: 0.65; }
.eip-empty-note {
    font-size: 0.78rem;
    color: var(--text-muted, #555);
    text-align: center;
    padding: 12px 0;
}
:root:not([data-theme]),
:root[data-theme="light"],
:root[data-theme="light-classic"],
:root[data-theme="dolphin"],
:root[data-theme="sage"],
:root[data-theme="yogurt"] {
    .eip-stat-card {
        background: color-mix(in srgb, var(--secondary-color) 6%, var(--tertiary-color));
    }
    .eip-stat-value {
        color: var(--secondary-color);
    }
    .eip-chart-block,
    .eip-activity-block,
    .eip-budgets-block,
    .eip-tool-card,
    .eip-import-batches,
    .eip-backups-block {
        background: var(--tertiary-color);
        border: 1px solid color-mix(in srgb, var(--secondary-color) 10%, transparent);
    }
    .eip-bar-track,
    .eip-budget-bar-track {
        background: color-mix(in srgb, var(--secondary-color) 10%, transparent);
    }
    .eip-budget-row {
        border-bottom-color: color-mix(in srgb, var(--secondary-color) 10%, transparent);
    }
    .eip-chart-title,
    .eip-budgets-title,
    .eip-budget-name,
    .eip-bar-label,
    .eip-tools-head h3,
    .eip-import-head h4,
    .eip-tool-card-title {
        color: var(--secondary-color);
    }
    .eip-chart-total,
    .eip-stat-label,
    .eip-bar-count,
    .eip-budget-count,
    .eip-tools-head p,
    .eip-import-head p,
    .eip-tool-label,
    .eip-month-summary,
    .eip-empty-note,
    .eip-backup-main span {
        color: color-mix(in srgb, var(--secondary-color) 55%, transparent);
    }
    .eip-backup-main b {
        color: var(--secondary-color);
    }
    .eip-action-primary {
        color: var(--tertiary-color);
    }
    .eip-action-secondary {
        background: color-mix(in srgb, var(--primary-color) 12%, var(--tertiary-color));
        color: color-mix(in srgb, var(--primary-color) 85%, var(--secondary-color));
    }
    .eip-action-muted {
        background: color-mix(in srgb, var(--secondary-color) 7%, var(--tertiary-color));
        color: var(--secondary-color);
    }
    .eip-action-danger {
        background: rgba(255, 75, 92, 0.09);
        color: #d93040;
    }
    .eip-action-text b,
    .eip-action-text small {
        color: inherit;
    }
    .eip-month-input,
    .eip-type-select {
        background: color-mix(in srgb, var(--secondary-color) 5%, var(--tertiary-color));
        border-color: color-mix(in srgb, var(--secondary-color) 18%, transparent);
        color: var(--secondary-color);
    }
    .eip-month-input:focus,
    .eip-type-select:focus {
        border-color: var(--primary-color);
    }
    .eip-mini-btn {
        background: color-mix(in srgb, var(--secondary-color) 8%, var(--tertiary-color));
        color: var(--secondary-color);
    }
    .eip-mini-icon-btn {
        background: color-mix(in srgb, var(--secondary-color) 7%, var(--tertiary-color));
        color: var(--secondary-color);
    }
    .eip-month-summary {
        background: color-mix(in srgb, var(--secondary-color) 5%, var(--tertiary-color));
        color: var(--secondary-color);
    }
    .eip-maintenance-btn {
        background: color-mix(in srgb, var(--secondary-color) 5%, var(--tertiary-color));
        border-color: color-mix(in srgb, var(--secondary-color) 12%, transparent);
        color: var(--secondary-color);
    }
    .eip-maintenance-btn small {
        color: color-mix(in srgb, var(--secondary-color) 50%, transparent);
    }
    .eip-maintenance-btn:active {
        background: color-mix(in srgb, var(--secondary-color) 10%, var(--tertiary-color));
    }
    .eip-maintenance-danger {
        border-color: rgba(255, 75, 92, 0.3);
        color: #d93040;
    }
    .eip-duplicates-result {
        background: color-mix(in srgb, var(--secondary-color) 5%, var(--tertiary-color));
        color: var(--secondary-color);
    }
    .eip-backup-card {
        background: color-mix(in srgb, var(--secondary-color) 4%, var(--tertiary-color));
    }
    .eip-backup-download,
    .eip-batch-export {
        background: color-mix(in srgb, var(--secondary-color) 9%, var(--tertiary-color));
        color: var(--secondary-color);
    }
    .eip-tool-btn-safe {
        background: rgba(39, 174, 96, 0.12);
        color: #1a7a45;
    }
    .eip-tool-btn-danger {
        background: rgba(255, 75, 92, 0.10);
        color: #d93040;
    }
}
/* ── 34-planner.css ── */
.planner-page-content {
    padding-top: 68px;
    padding-bottom: 108px;
}
.planner-topbar {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
    align-items: stretch;
}
.planner-bottom-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 10px;
}
.planner-secondary-btn {
    width: 100%;
    margin-top: 0;
    background: rgba(255, 255, 255, 0.06);
    color: var(--secondary-color);
}
.planner-dropdown {
    position: relative;
    flex: 1;
    min-width: 0;
}
.planner-dropdown-trigger {
    width: 100%;
    margin-top: 0;
    padding: 10px 12px;
    min-height: 44px;
    border-radius: 14px;
    background: var(--tertiary-color);
    color: var(--secondary-color);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    box-shadow: var(--shadow-sm);
    transition: border-color .18s ease, transform .12s ease, box-shadow .18s ease;
}
.planner-dropdown-trigger:hover {
    border-color: rgba(255, 255, 255, 0.14);
}
.planner-dropdown-trigger.is-open {
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow: var(--shadow-md);
}
.planner-dropdown-label {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: left;
    font-size: 0.82rem;
    font-weight: 700;
}
.planner-dropdown-caret {
    flex-shrink: 0;
    opacity: 0.8;
    font-size: 0.85rem;
}
.planner-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 40;
    background: var(--tertiary-color);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    box-shadow: var(--shadow-md);
    padding: 8px;
    max-height: 320px;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.planner-dropdown-group {
    display: grid;
    gap: 6px;
}
.planner-dropdown-item,
.planner-dropdown-create {
    width: 100%;
    margin-top: 0;
    padding: 10px 12px;
    border-radius: 12px;
    text-align: left;
    background: rgba(255, 255, 255, 0.04);
    color: var(--secondary-color);
    transition: background .15s ease, border-color .15s ease, transform .12s ease;
}
.planner-dropdown-item:hover,
.planner-dropdown-create:hover {
    background: rgba(255, 255, 255, 0.07);
}
.planner-dropdown-item.active {
    border: 1px solid var(--income-color);
    box-shadow: 0 0 0 1px rgba(43, 232, 42, 0.06);
}
.planner-dropdown-item-title {
    display: block;
    font-size: 0.84rem;
    font-weight: 800;
    line-height: 1.2;
}
.planner-dropdown-item-meta {
    display: block;
    margin-top: 3px;
    font-size: 0.74rem;
    color: var(--text-muted);
}
.planner-dropdown-divider {
    height: 1px;
    margin: 8px 4px;
    background: rgba(255, 255, 255, 0.08);
}
.planner-stat-card,
.planner-mini-card,
.planner-section-card,
.planner-insight-card,
.planner-day-card {
    background: linear-gradient(180deg, rgba(18, 18, 26, 0.92), rgba(10, 10, 16, 0.96));
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 18px;
    box-shadow:
            0 10px 24px rgba(0, 0, 0, 0.24),
            inset 0 1px 0 rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(10px);
}
#planner-summary-cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 12px;
}
.planner-summary-grid {
    display: grid;
    gap: 8px;
}
.planner-summary-grid-main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.planner-summary-grid-mini {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.planner-stat-card,
.planner-mini-card {
    padding: 12px 13px;
}
.planner-stat-card {
    position: relative;
    overflow: hidden;
    min-height: 88px;
}
.planner-stat-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    border-radius: 18px 0 0 18px;
    opacity: 0.95;
}
.planner-stat-card-budget::before {
    background: linear-gradient(180deg, #36d399, #10b981);
}
.planner-stat-card-start::before {
    background: linear-gradient(180deg, #60a5fa, #2563eb);
}
.planner-stat-card-limit::before {
    background: linear-gradient(180deg, #fbbf24, #f59e0b);
}
.planner-stat-card-balance::before {
    background: linear-gradient(180deg, #a78bfa, #8b5cf6);
}
.planner-stat-label,
.planner-mini-label {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--secondary-color, #9aa4b2);
    margin-bottom: 6px;
}
.planner-stat-value {
    font-size: 21px;
    font-weight: 900;
    line-height: 1.05;
    color: var(--text-color);
    word-break: break-word;
}
.planner-mini-value {
    font-size: 16px;
    font-weight: 800;
    color: var(--text-color);
    text-align: center;
    line-height: 1.15;
}
.planner-stat-note {
    margin-top: 6px;
    font-size: 11px;
    line-height: 1.3;
    color: var(--secondary-color, #99a3b3);
}
.planner-mini-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 56px;
}
#planner-insights {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}
.planner-insight-card {
    padding: 11px 12px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-height: 68px;
}
.planner-insight-icon {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: 15px;
    background: rgba(255, 255, 255, 0.05);
}
.planner-insight-body {
    min-width: 0;
}
.planner-insight-title {
    font-size: 12px;
    font-weight: 800;
    color: var(--text-color);
    margin-bottom: 3px;
    line-height: 1.2;
}
.planner-insight-text {
    font-size: 13px;
    line-height: 1.35;
    color: var(--secondary-color, #a5aebe);
}
.planner-insight-success {
    border-color: rgba(43, 232, 42, 0.18);
}
.planner-insight-danger {
    border-color: rgba(255, 75, 92, 0.18);
}
.planner-insight-warning {
    border-color: rgba(241, 196, 15, 0.18);
}
#planner-tables {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}
.planner-section-card {
    padding: 12px;
    margin-bottom: 0;
}
.planner-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}
.planner-section-title {
    font-size: 13px;
    font-weight: 900;
    color: var(--text-color);
}
.planner-section-count {
    min-width: 24px;
    height: 24px;
    padding: 0 7px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    color: var(--secondary-color, #aab3bf);
    font-size: 11px;
    font-weight: 800;
}
.planner-section-list {
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.planner-list-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 10px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.04);
}
.planner-list-main {
    min-width: 0;
}
.planner-list-name {
    font-size: 12px;
    font-weight: 800;
    color: var(--text-color);
    word-break: break-word;
    line-height: 1.2;
}
.planner-list-sub {
    margin-top: 3px;
    font-size: 10px;
    color: var(--secondary-color, #97a0b0);
    line-height: 1.25;
}
.planner-list-amount {
    font-size: 12px;
    font-weight: 900;
    color: var(--text-color);
    text-align: right;
    white-space: nowrap;
    flex-shrink: 0;
}
.planner-list-amount small {
    font-size: 10px;
    color: var(--secondary-color, #99a3b3);
    margin-left: 2px;
}
.planner-list-empty {
    padding: 12px;
    border-radius: 14px;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--secondary-color, #96a0af);
    background: rgba(255, 255, 255, 0.03);
    border: 1px dashed rgba(255, 255, 255, 0.08);
}
.planner-days-block {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 2px;
}
.planner-days-head {
    margin-bottom: 0;
}
.planner-days-title {
    font-size: 15px;
    font-weight: 900;
    color: var(--text-color);
    margin-bottom: 2px;
}
.planner-days-subtitle {
    font-size: 11px;
    color: var(--secondary-color, #9aa4b2);
}
.planner-day-card {
    padding: 12px;
    position: relative;
}
.planner-day-card-today {
    border-color: rgba(24, 201, 100, 0.22);
    box-shadow:
            0 12px 28px rgba(0, 0, 0, 0.28),
            0 0 0 1px rgba(24, 201, 100, 0.08) inset;
}
.planner-day-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}
.planner-day-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 14px;
    font-weight: 900;
    color: var(--text-color);
}
.planner-day-date {
    margin-top: 3px;
    font-size: 11px;
    font-weight: 600;
    color: var(--secondary-color, #97a0b0);
}
.planner-today-badge {
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    color: #d7ffe8;
    background: rgba(24, 201, 100, 0.14);
    border: 1px solid rgba(24, 201, 100, 0.2);
}
.planner-day-balance-label {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--secondary-color, #97a0b0);
    text-align: right;
}
.planner-day-balance {
    margin-top: 4px;
    font-size: 22px;
    font-weight: 900;
    line-height: 1.05;
    text-align: right;
    color: var(--text-color);
    word-break: break-word;
}
.planner-day-start-note {
    margin-top: 6px;
    font-size: 11px;
    line-height: 1.35;
    color: var(--secondary-color, #a1aab8);
}
.planner-day-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
.planner-day-metric {
    min-width: 0;
    padding: 9px 10px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.04);
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.planner-day-metric-full {
    grid-column: 1 / -1;
}
.planner-day-label {
    display: block;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--secondary-color, #99a3b3);
    margin-bottom: 4px;
}
.planner-day-value {
    display: block;
    font-size: 22px;
    font-weight: 900;
    line-height: 1.05;
}
.planner-day-plus {
    color: #2dd4bf;
}
.planner-day-minus {
    color: #fb7185;
}
.planner-day-hint {
    margin-top: 9px;
    padding: 9px 11px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--text-color, #eef2f7);
}
.planner-day-extra {
    margin-top: 9px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 0.72rem;
    color: var(--text-muted);
}
.planner-day-extra span {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 11px;
    font-weight: 700;
    color: var(--secondary-color, #b5becb);
}
.planner-day-extra-start span {
    color: var(--text-color);
}
.planner-form-sheet {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding-bottom: 8px;
}
.planner-form-sheet label {
    margin-top: 5px;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.planner-form-sheet .input,
.planner-form-sheet select,
.planner-form-sheet input {
    width: 100%;
    padding: 9px 11px;
    border-radius: var(--border-radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.16);
    color: var(--secondary-color);
    font-size: 0.88rem;
}
.planner-period-chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 4px;
}
.planner-period-chip {
    width: auto;
    min-width: 52px;
    margin-top: 0;
    padding: 8px 11px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: var(--tertiary-color);
    color: var(--secondary-color);
}
.planner-period-chip.active {
    background: var(--primary-color);
    color: #000;
    border-color: transparent;
}
.planner-form-section {
    margin-top: 10px;
    padding: 11px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
}
.planner-form-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 9px;
}
.planner-form-section-head h3 {
    margin: 0;
    padding-bottom: 0;
    font-size: 0.9rem;
}
.planner-inline-add {
    width: auto;
    margin-top: 0;
    padding: 7px 11px;
    font-size: 0.8rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--secondary-color);
}
.planner-form-list {
    display: grid;
    gap: 9px;
}
.planner-form-row {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr auto;
    gap: 8px;
    align-items: center;
}
.planner-form-row-regular {
    grid-template-columns: 1.2fr 0.8fr 0.9fr 0.9fr auto;
}
.planner-form-row-deposit {
    grid-template-columns: 1.1fr 1fr 0.8fr 0.8fr auto;
}
.planner-row-remove {
    width: 36px;
    height: 36px;
    margin-top: 0;
    padding: 0;
    border-radius: 12px;
    background: rgba(255, 75, 92, 0.12);
    color: var(--expense-color);
    font-size: 15px;
}
.planner-sheet-actions {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-top: 16px;
}
.planner-category-select-container {
    width: 100%;
}
.planner-category-select-button {
    width: 100%;
    min-height: 42px;
    justify-content: space-between;
}
@media (max-width: 900px) {
    .planner-summary-grid-mini {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 768px) {
    .planner-topbar {
        flex-direction: column;
    }
    .planner-day-metric-full {
        grid-column: auto;
    }
    .planner-day-top {
        flex-direction: column;
    }
    .planner-day-balance {
        text-align: left;
    }
    .planner-form-row,
    .planner-form-row-regular,
    .planner-form-row-deposit {
        grid-template-columns: 1fr;
    }
    .planner-row-remove {
        width: 100%;
    }
}
@media (max-width: 640px) {
    .planner-day-balance-label,
    .planner-day-balance {
        text-align: left;
    }
    .planner-list-row {
        align-items: flex-start;
        flex-direction: column;
    }
    .planner-list-amount {
        text-align: left;
        white-space: normal;
    }
}
#planner-quick-create-btn {
    background: var(--primary-color);
    color: var(--secondary-color);
}
.planner-sheet-actions [type="submit"] {
    background: var(--primary-color);
    color: var(--secondary-color);
}
.planner-confirm-modal {
    padding: 28px 22px 22px;
}
.planner-confirm-icon {
    font-size: 38px;
    text-align: center;
    margin-bottom: 12px;
    line-height: 1;
}
.planner-confirm-title {
    text-align: center;
    font-size: 1.05rem;
    font-weight: 800;
    margin-bottom: 8px;
    padding-bottom: 0;
}
.planner-confirm-text {
    text-align: center;
    font-size: 0.84rem;
    color: var(--text-muted, #8a8a8a);
    line-height: 1.5;
    margin-bottom: 20px;
}
.planner-confirm-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 0;
}
.planner-confirm-cancel,
.planner-confirm-delete {
    width: 100%;
    margin: 0;
    padding: 12px;
    border-radius: var(--border-radius-lg);
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
}
.planner-confirm-cancel {
    border: 1px solid var(--border-color, rgba(0, 0, 0, 0.12));
    background: transparent;
    color: var(--secondary-color);
}
.planner-confirm-delete {
    border: none;
    background: var(--expense-color);
    color: var(--text-color);
}
:root[data-theme="light"] .planner-today-badge,
:root[data-theme="dolphin"] .planner-today-badge,
:root[data-theme="light-classic"] .planner-today-badge,
:root[data-theme="yogurt"] .planner-today-badge {
    color: #0d6b3a;
    background: rgba(24, 201, 100, 0.12);
    border-color: rgba(24, 201, 100, 0.28);
}
:root[data-theme="light"] .planner-day-extra span,
:root[data-theme="dolphin"] .planner-day-extra span,
:root[data-theme="light-classic"] .planner-day-extra span,
:root[data-theme="yogurt"] .planner-day-extra span {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.08);
    color: var(--secondary-color);
}
:root[data-theme="light"] .planner-day-extra-start span,
:root[data-theme="dolphin"] .planner-day-extra-start span,
:root[data-theme="light-classic"] .planner-day-extra-start span,
:root[data-theme="yogurt"] .planner-day-extra-start span {
    background: rgba(0, 0, 0, 0.07);
    border-color: rgba(0, 0, 0, 0.1);
    color: var(--secondary-color);
}
:root[data-theme="light"] .planner-day-hint,
:root[data-theme="dolphin"] .planner-day-hint,
:root[data-theme="light-classic"] .planner-day-hint,
:root[data-theme="yogurt"] .planner-day-hint {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.07);
    color: var(--secondary-color);
}
#planner-empty-state {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    min-height: calc(100vh - 64px);
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box;
}
.planner-ob-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    width: 100%;
    max-width: 400px;
    padding: clamp(20px, 6vw, 36px) clamp(16px, 5vw, 24px) 48px;
    text-align: center;
    box-sizing: border-box;
}
.planner-ob-shark {
    width: clamp(100px, 26vw, 140px);
    height: auto;
    display: block;
    margin: 0 auto;
    object-fit: contain;
    border-radius: 0;
    filter: drop-shadow(0 10px 28px rgba(99, 102, 241, 0.32));
    animation: planner-ob-float 3.8s ease-in-out infinite;
    will-change: transform;
}
.planner-ob-shark-fallback {
    font-size: clamp(64px, 18vw, 96px);
    line-height: 1;
    display: block;
    animation: planner-ob-float 3.8s ease-in-out infinite;
}
@keyframes planner-ob-float {
    0%,  100% { transform: translateY(0)    rotate(-1.5deg); }
    45%        { transform: translateY(-10px) rotate(1.5deg);  }
    75%        { transform: translateY(-5px)  rotate(-0.5deg); }
}
.planner-ob-title {
    font-size: clamp(20px, 5.5vw, 26px);
    font-weight: 900;
    color: var(--text-color, #f1f5f9);
    margin: 0;
    letter-spacing: -0.02em;
    line-height: 1.15;
    -webkit-text-fill-color: unset;
}
:root[data-theme="light"] .planner-ob-title,
:root[data-theme="dolphin"] .planner-ob-title,
:root[data-theme="light-classic"] .planner-ob-title,
:root[data-theme="yogurt"] .planner-ob-title {
    color: #1e293b;
}
:root[data-theme="light"] .planner-ob-sub,
:root[data-theme="dolphin"] .planner-ob-sub,
:root[data-theme="light-classic"] .planner-ob-sub,
:root[data-theme="yogurt"] .planner-ob-sub {
    color: #475569;
    opacity: 1;
}
.planner-ob-sub {
    font-size: clamp(13px, 3.5vw, 14.5px);
    color: var(--text-muted, #94a3b8);
    line-height: 1.55;
    margin: -6px 0 0;
}
.planner-ob-steps {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    text-align: left;
}
.planner-ob-step {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: linear-gradient(180deg, rgba(18,18,26,.92), rgba(10,10,16,.96));
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 16px;
    padding: 12px 14px;
    box-shadow: 0 4px 12px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.04);
}
.planner-ob-step-num {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1, #818cf8);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 10px rgba(99,102,241,.45);
    margin-top: 1px;
}
.planner-ob-step-title {
    font-size: 13px;
    font-weight: 800;
    color: var(--text-color);
    line-height: 1.25;
    margin-bottom: 2px;
}
.planner-ob-step-sub {
    font-size: 11.5px;
    color: var(--text-muted, #94a3b8);
    line-height: 1.4;
}
.planner-ob-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    width: 100%;
}
.planner-ob-feat {
    display: flex;
    align-items: center;
    gap: 7px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 12px;
    padding: 9px 11px;
    font-size: 12px;
    font-weight: 700;
    color: var(--secondary-color, #cbd5e1);
    line-height: 1.2;
    text-align: left;
}
.planner-ob-feat span:first-child {
    font-size: 15px;
    flex-shrink: 0;
}
.planner-ob-create-btn {
    width: 100%;
    max-width: 320px;
    padding: 15px 24px;
    margin-top: 4px;
    border: none;
    border-radius: 18px;
    background: var(--primary-color, #6366f1);
    color: var(--secondary-color, #fff);
    font-family: "Montserrat", sans-serif;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.01em;
    cursor: pointer;
    box-shadow: 0 6px 22px rgba(99,102,241,.4);
    transition: transform .15s ease, box-shadow .15s ease, opacity .15s;
    -webkit-tap-highlight-color: transparent;
}
.planner-ob-create-btn:active {
    transform: scale(0.97);
    box-shadow: 0 3px 12px rgba(99,102,241,.3);
    opacity: 0.92;
}
.planner-ob-note {
    font-size: 11px;
    color: var(--text-muted, #64748b);
    opacity: 0.55;
    margin: -8px 0 0;
    letter-spacing: 0.03em;
}
:root[data-theme="light"] .planner-ob-step,
:root[data-theme="dolphin"] .planner-ob-step,
:root[data-theme="light-classic"] .planner-ob-step,
:root[data-theme="yogurt"] .planner-ob-step {
    background: rgba(0,0,0,.03);
    border-color: rgba(0,0,0,.07);
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
:root[data-theme="light"] .planner-ob-feat,
:root[data-theme="dolphin"] .planner-ob-feat,
:root[data-theme="light-classic"] .planner-ob-feat,
:root[data-theme="yogurt"] .planner-ob-feat {
    background: rgba(0,0,0,.03);
    border-color: rgba(0,0,0,.07);
}
@media (max-width: 360px) {
    .planner-ob-features {
        grid-template-columns: 1fr;
    }
}
/* ── 35-achievements.css ── */
.ach-summary-card {
    background: var(--card-bg, #1e1e1e);
    border-radius: var(--border-radius-lg);
    padding: 16px;
    margin: 12px 0 8px;
}
.ach-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-bottom: 14px;
}
.ach-summary-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.ach-summary-val {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-color);
}
.ach-summary-key {
    font-size: 0.72rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.ach-summary-divider {
    width: 1px;
    height: 32px;
    background: #333;
}
.ach-summary-bar {
    height: 6px;
    background: #2e2e2e;
    border-radius: 3px;
    overflow: hidden;
}
.ach-summary-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color), var(--tertiary-color));
    border-radius: 3px;
    transition: width 0.6s ease;
}
.ach-summary-hint {
    text-align: center;
    font-size: 0.72rem;
    color: #666;
    margin-top: 8px;
}
.ach-filter-bar {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 4px 0 10px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.ach-filter-bar::-webkit-scrollbar { display: none; }
.ach-filter-chip {
    flex-shrink: 0;
    padding: 6px 14px;
    border-radius: 20px;
    border: 1.5px solid #333;
    background: transparent;
    color: #888;
    font-size: 0.82rem;
    cursor: pointer;
    transition: background 0.18s, color 0.18s, border-color 0.18s;
    white-space: nowrap;
}
.ach-filter-chip.active,
.ach-filter-chip:active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
    font-weight: 600;
}
.ach-groups-wrap {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding-bottom: 32px;
}
.ach-group {}
.ach-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.ach-group-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-color);
}
.ach-group-count {
    font-size: 0.78rem;
    color: #666;
    background: #1e1e1e;
    padding: 2px 8px;
    border-radius: 10px;
}
.ach-group-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(138px, 1fr));
    gap: 8px;
}
.ach-card {
    background: #1c1c1c;
    border: 1.5px solid #333;
    border-radius: 12px;
    padding: 14px 10px;
    text-align: center;
    font-size: 0.82rem;
    line-height: 1.35;
    cursor: default;
    position: relative;
    transition: transform 0.15s, box-shadow 0.15s;
    user-select: none;
}
.ach-card.unlocked {
    background: linear-gradient(145deg, var(--primary-color) 0%, var(--tertiary-color) 100%);
    border: none;
    color: #fff;
    font-weight: 600;
    box-shadow: 0 0 8px color-mix(in srgb, var(--primary-color) 60%, transparent);
}
.ach-card.locked {
    color: #555;
    filter: grayscale(80%);
}
.ach-card:active {
    transform: scale(0.96);
}
.ach-card-label {
    display: block;
}
.ach-card::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: #222;
    color: #eee;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 0.75rem;
    white-space: normal;
    word-wrap: break-word;
    text-align: center;
    max-width: 200px;
    box-sizing: border-box;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s;
    z-index: 9999;
}
.ach-card:hover::after,
.ach-card:active::after {
    opacity: 1;
}
.ach-empty {
    text-align: center;
    padding: 48px 0;
    color: #555;
}
.ach-empty-icon {
    font-size: 2.5rem;
    margin-bottom: 10px;
}
.achievement,
.achievement.unlocked,
.achievement.locked,
.achievement span,
.achievement::after {
}