* {
        box-sizing: border-box;
    }

    :root {
        --bg: #0d0d12;
        --card: #17171f;
        --card2: #1d1d27;

        --text: #f4f4f7;
        --muted: #9292a3;

        --accent: #8b5cf6;
        --accent-soft: rgba(139, 92, 246, .15);

        --border: rgba(255,255,255,.07);
    }

    body {
        margin: 0;
        font-family:
            -apple-system,
            BlinkMacSystemFont,
            "Segoe UI",
            sans-serif;

        background: var(--tg-theme-bg-color, var(--bg));
        color: var(--tg-theme-text-color, var(--text));

        padding-bottom: 90px;
    }

    .app {
        max-width: 720px;
        margin: 0 auto;
        padding: 20px 16px;
    }

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

    .logo {
        font-size: 22px;
        font-weight: 750;
    }

    .period {
        color: var(--muted);
        font-size: 14px;
    }

    .hero {
        margin-bottom: 24px;
    }

    .hero-label {
        color: var(--muted);
        font-size: 14px;
        margin-bottom: 6px;
    }

    .hero-value {
        font-size: 38px;
        font-weight: 800;
        letter-spacing: -1px;
    }

    .metrics {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-bottom: 28px;
    }

    .metric {
        background:
            var(
                --tg-theme-secondary-bg-color,
                var(--card)
            );

        border-radius: 18px;
        padding: 16px;
        border: 1px solid var(--border);
    }

    .metric-label {
        font-size: 13px;
        color: var(--muted);
        margin-bottom: 7px;
    }

    .metric-value {
        font-size: 20px;
        font-weight: 700;
    }

    .section {
        margin-top: 30px;
    }

    .section-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16px;
    }

    .section-title {
        font-size: 18px;
        font-weight: 750;
    }

    .section-link {
        font-size: 13px;
        color: var(--accent);
    }

    /* SPENDING DYNAMICS */

    .line-chart-wrap {
        position: relative;
        height: 170px;
        color: #38bdf8;
    }

    .line-chart {
        width: 100%;
        height: 100%;
        overflow: visible;
    }

    .chart-grid-line {
        stroke: var(--border);
        stroke-width: 1;
        vector-effect: non-scaling-stroke;
    }

    .line-chart-area {
        fill: url(#spendingAreaGradient);
    }

    .line-chart-path {
        fill: none;
        stroke: currentColor;
        stroke-width: 3;
        stroke-linecap: round;
        stroke-linejoin: round;
        vector-effect: non-scaling-stroke;
    }

    .line-chart-point {
        fill: var(--bg);
        stroke: currentColor;
        stroke-width: 3;
        vector-effect: non-scaling-stroke;
    }

    .line-chart-value {
        position: absolute;
        top: 8px;
        right: 4px;
        padding: 5px 8px;
        border-radius: 9px;
        background: rgba(0, 0, 0, .28);
        color: var(--text);
        font-size: 12px;
        font-weight: 700;
        backdrop-filter: blur(8px);
    }

    .chart-axis {
        display: flex;
        justify-content: space-between;
        color: var(--muted);
        font-size: 11px;
        margin-top: 4px;
    }

    .chart-empty {
        color: var(--muted);
        font-size: 14px;
        padding: 20px 0;
    }

    .dynamics-stats {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-top: 16px;
    }

    .dynamics-stat {
        padding: 12px;
        border: 1px solid var(--border);
        border-radius: 14px;
        background: var(--card2);
    }

    .dynamics-stat-label {
        color: var(--muted);
        font-size: 11px;
        margin-bottom: 5px;
    }

    .dynamics-stat-value {
        font-size: 15px;
        font-weight: 750;
    }

    .expensive-day {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 12px 0;
        border-bottom: 1px solid var(--border);
    }

    .expensive-day:last-child {
        border-bottom: 0;
    }

    .expensive-day-left {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .expensive-day-rank {
        width: 26px;
        height: 26px;
        display: grid;
        place-items: center;
        border-radius: 9px;
        background: var(--card2);
        color: var(--muted);
        font-size: 12px;
        font-weight: 800;
    }

    .expensive-day-date {
        font-size: 14px;
        font-weight: 650;
    }

    .expensive-day-amount {
        font-size: 14px;
        font-weight: 750;
    }

    /* CATEGORY */

    .category {
        padding: 13px 0;
        border-bottom: 1px solid var(--border);
    }

    .category-top {
        display: flex;
        justify-content: space-between;
        gap: 14px;
        align-items: center;
    }

    .category-name {
        font-weight: 600;
        min-width: 0;
    }

    .category-amount {
        white-space: nowrap;
        font-weight: 700;
    }

    .category-bottom {
        margin-top: 8px;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .progress {
        flex: 1;
        height: 7px;
        border-radius: 10px;
        overflow: hidden;
        background: rgba(255,255,255,.07);
    }

    .progress-value {
        height: 100%;
        border-radius: inherit;
        transition: width .25s ease;
    }

    .percent {
        color: var(--muted);
        font-size: 12px;
        width: 36px;
        text-align: right;
    }

    /* EXPENSES */

    .expense {
        display: flex;
        justify-content: space-between;
        gap: 14px;
        padding: 14px 0;
        border-bottom: 1px solid var(--border);

        cursor: pointer;
    }

    .expense:active {
        opacity: .65;
    }

    .expense-left {
        min-width: 0;
    }

    .expense-name {
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .expense-info {
        color: var(--muted);
        font-size: 12px;
        margin-top: 5px;
    }

    .expense-amount {
        font-weight: 700;
        white-space: nowrap;
    }

    .empty {
        color: var(--muted);
        padding: 18px 0;
    }

    .error {
        padding: 16px;
        border-radius: 14px;
        background: rgba(255,80,80,.1);
        color: #ff8080;
    }

    /* VIEWS */

    .view {
        display: none;
    }

    .view.active {
        display: block;
    }

    /* DAY GROUP */

    .day {
        margin-bottom: 28px;
    }

    .day-head {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        margin-bottom: 8px;
    }

    .day-title {
        font-size: 17px;
        font-weight: 700;
    }

    .day-total {
        color: var(--muted);
        font-size: 13px;
    }

    /* SHEET */

    .sheet-overlay {
        display: none;

        position: fixed;
        inset: 0;

        background: rgba(0,0,0,.6);

        z-index: 50;

        align-items: flex-end;
    }

    .sheet-overlay.open {
        display: flex;
    }

    .sheet {
        width: 100%;
        max-width: 720px;
        margin: 0 auto;

        background: var(--card2);

        border-radius: 24px 24px 0 0;

        padding:
            20px
            18px
            calc(20px + env(safe-area-inset-bottom));
    }

    .sheet-title {
        font-size: 20px;
        font-weight: 750;
        margin-bottom: 20px;
    }

    .field {
        margin-bottom: 15px;
    }

    .field label {
        display: block;
        color: var(--muted);
        font-size: 13px;
        margin-bottom: 7px;
    }

    .field input,
    .field select {
        width: 100%;

        padding: 13px 14px;

        border-radius: 13px;
        border: 1px solid var(--border);

        background: var(--card);
        color: var(--text);

        font-size: 16px;
    }

    .sheet-buttons {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;

        margin-top: 20px;
    }

    .btn {
        border: 0;
        border-radius: 14px;
        padding: 14px;

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

        cursor: pointer;
    }

    .btn-primary {
        background: var(--accent);
        color: white;
    }

    .btn-danger {
        background: rgba(239,68,68,.15);
        color: #ff7272;
    }

    /* SETTINGS */

    .settings-block {
        margin-bottom: 32px;
    }

    .settings-title {
        font-size: 16px;
        font-weight: 700;
        margin-bottom: 5px;
    }

    .settings-hint {
        color: var(--muted);
        font-size: 13px;
        margin-bottom: 16px;
    }

    .settings-category,
    .alias-row {
        display: flex;
        justify-content: space-between;
        align-items: center;

        gap: 12px;

        padding: 13px 0;

        border-bottom: 1px solid var(--border);
    }

    .alias-name {
        font-weight: 600;
    }

    .alias-category {
        color: var(--muted);
        font-size: 12px;
        margin-top: 4px;
    }

    .alias-actions {
        display: flex;
        gap: 7px;
    }

    .small-btn {
        border: 0;
        background: var(--card2);
        color: var(--text);

        border-radius: 10px;
        padding: 8px 10px;

        cursor: pointer;
    }

    .settings-add {
        width: 100%;

        margin-top: 14px;

        border: 1px solid var(--border);
        border-radius: 13px;

        padding: 13px;

        background: var(--card);
        color: var(--text);

        font-size: 14px;

        cursor: pointer;
    }

    /* BOTTOM NAV */

    .nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;

        background:
            color-mix(
                in srgb,
                var(--tg-theme-bg-color, var(--bg)) 94%,
                transparent
            );

        border-top: 1px solid var(--border);

        backdrop-filter: blur(18px);

        padding:
            8px
            12px
            calc(8px + env(safe-area-inset-bottom));
    }

    .nav-inner {
        max-width: 720px;
        margin: 0 auto;

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

    .nav-item {
        text-align: center;
        padding: 8px;
        font-size: 12px;
        color: var(--muted);

        cursor: pointer;
    }

    .nav-icon {
        display: block;
        font-size: 20px;
        margin-bottom: 3px;
    }

    .nav-item.active {
        color: var(--accent);
    }

    @media(max-width: 420px) {
        .hero-value {
            font-size: 34px;
        }
    }


/* SETTINGS SHEETS */
.sheet-handle {
  width: 42px;
  height: 4px;
  margin: -4px auto 16px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
}

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

.sheet-head .sheet-title {
  margin-bottom: 4px;
}

.sheet-subtitle {
  color: var(--muted);
  font-size: 13px;
}

.sheet-close {
  flex: none;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 12px;
  background: var(--card);
  color: var(--muted);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.sheet-close:active,
.small-btn:active,
.settings-add:active,
.btn:active {
  transform: scale(.98);
}

.settings-category-name {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
}

.settings-category-emoji {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 11px;
  background: var(--card2);
  font-size: 18px;
}

.settings-category-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.alias-preview {
  margin-bottom: 18px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card);
  font-weight: 700;
}

.small-btn {
  min-width: 38px;
  min-height: 36px;
  display: grid;
  place-items: center;
  font-size: 17px;
}

/* V5 — interactive spending dynamics */
.chart-hint {
    margin-top: 7px;
    color: var(--muted);
    font-size: 11px;
    text-align: center;
}


.line-chart-hit {
    fill: transparent;
    stroke: transparent;
    cursor: pointer;
    pointer-events: all;
}

.line-chart-tooltip {
    position: absolute;
    top: 4px;
    transform: translateX(-50%);
    min-width: 135px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(20, 20, 28, .94);
    color: var(--text);
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease;
    z-index: 3;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
    backdrop-filter: blur(10px);
}

.line-chart-tooltip.show {
    opacity: 1;
}

.tooltip-date {
    color: var(--muted);
    font-size: 11px;
    margin-bottom: 3px;
}

.tooltip-amount {
    font-size: 15px;
    font-weight: 800;
}

.tooltip-cumulative {
    margin-top: 3px;
    color: var(--muted);
    font-size: 10px;
}

/* V6 — previous month below chart */
.previous-month-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card2);
}

.previous-month-label {
  color: var(--muted);
  font-size: 12px;
}

.previous-month-value {
  font-size: 18px;
  font-weight: 750;
  white-space: nowrap;
}


/* V7 — выбранная точка и умное позиционирование tooltip */
.line-chart-selected-point {
  fill: #38bdf8;
  stroke: var(--bg);
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease;
}

.line-chart-selected-point.show {
  opacity: 1;
}

.line-chart-tooltip {
  transform: none;
  max-width: min(190px, 58vw);
}

.line-chart-tooltip.tooltip-right {
  transform: translateX(10px);
}

.line-chart-tooltip.tooltip-left {
  transform: translateX(-10px);
}


/* RECURRING PAYMENTS */

.recurring-summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 14px;
}

.recurring-summary > div {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 15px;
}

.recurring-summary-label {
    color: var(--muted);
    font-size: 12px;
    margin-bottom: 7px;
}

.recurring-summary-value {
    font-size: 20px;
    font-weight: 750;
}

.recurring-summary-next {
    font-size: 14px;
    font-weight: 650;
    line-height: 1.35;
}

.recurring-payment {
    margin-top: 12px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 15px;
    cursor: pointer;
}

.recurring-payment:active {
    opacity: .7;
}

.recurring-payment.disabled {
    opacity: .45;
}

.recurring-payment-top {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
}

.recurring-payment-name {
    font-size: 16px;
    font-weight: 700;
}

.recurring-payment-amount {
    font-weight: 750;
    white-space: nowrap;
}

.recurring-payment-info {
    margin-top: 8px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
}

.recurring-payment-next {
    margin-top: 10px;
    font-size: 13px;
}

.recurring-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 8px;
    font-size: 11px;
    color: var(--muted);
}

.recurring-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #22c55e;
}

.recurring-payment.disabled .recurring-status-dot {
    background: #64748b;
}

.toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin: 8px 0 16px;
    padding: 13px 14px;

    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 13px;

    font-size: 14px;
}

.toggle-row input {
    width: 20px;
    height: 20px;
}

.sheet-head {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    align-items: flex-start;
    margin-bottom: 20px;
}

.sheet-head .sheet-title {
    margin-bottom: 4px;
}

.sheet-subtitle {
    color: var(--muted);
    font-size: 12px;
}

.sheet-close {
    flex: none;
    width: 36px;
    height: 36px;

    border: 0;
    border-radius: 50%;

    background: var(--card);
    color: var(--text);

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

.nav-inner {
    grid-template-columns: repeat(4, 1fr);
}


.btn-paid {
    width: 100%;
    margin: 4px 0 12px;

    border: 0;
    border-radius: 14px;

    padding: 14px;

    background: rgba(34, 197, 94, .14);
    color: #4ade80;

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

.btn-paid:active {
    opacity: .7;
}



/* OVERVIEW RECURRING */

.forecast-with-recurring {
    margin-top: 10px;

    background:
        var(
            --tg-theme-secondary-bg-color,
            var(--card)
        );

    border: 1px solid var(--border);
    border-radius: 16px;

    overflow: hidden;
}

.forecast-recurring-row {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 15px;

    padding: 12px 14px;

    color: var(--muted);
    font-size: 13px;
}

.forecast-recurring-row strong {
    color: var(--text);
    white-space: nowrap;
    font-size: 14px;
}

.forecast-recurring-result {
    border-top: 1px solid var(--border);

    color: var(--text);
    font-weight: 700;
}

.forecast-recurring-result strong {
    color: #38bdf8;
    font-size: 16px;
}


.overview-recurring-section {
    margin-top: 30px;
}

.overview-recurring-section .section-head {
    align-items: flex-start;
}

.overview-recurring-subtitle {
    margin-top: 4px;

    color: var(--muted);
    font-size: 12px;
}

.overview-recurring-total {
    color: #38bdf8;

    font-size: 16px;
    font-weight: 750;

    white-space: nowrap;
}

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

    gap: 15px;

    padding: 13px 0;

    border-bottom: 1px solid var(--border);

    cursor: pointer;
}

.overview-recurring-item:active {
    opacity: .65;
}

.overview-recurring-left {
    min-width: 0;
}

.overview-recurring-name {
    font-size: 14px;
    font-weight: 650;

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

.overview-recurring-date {
    margin-top: 5px;

    color: var(--muted);
    font-size: 12px;
}

.overview-recurring-amount {
    flex: none;

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

    white-space: nowrap;
}

.overview-recurring-empty {
    padding: 15px 0;

    color: var(--muted);
    font-size: 13px;
}

.overview-recurring-all {
    width: 100%;

    margin-top: 12px;
    padding: 11px;

    border: 0;
    border-radius: 12px;

    background: transparent;
    color: #38bdf8;

    font-size: 13px;
    font-weight: 650;
}

.overview-recurring-all:active {
    background: rgba(
        56,
        189,
        248,
        .08
    );
}


.dynamics-metrics-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 14px;
}

.dynamics-metrics-grid .dynamics-stat {
    margin: 0;
}



.recurring-next-line {
    margin:
        -2px 2px
        16px;

    color: #38bdf8;

    font-size: 12px;
    line-height: 1.45;
}

.recurring-next-line b {
    color: #38bdf8;
    font-weight: 650;
}


/* INCOME / BALANCE */

.income-expense-summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 16px;
}

.income-expense-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 14px;
}

.income-expense-label {
    color: var(--muted);
    font-size: 12px;
    margin-bottom: 7px;
}

.income-expense-value {
    font-size: 18px;
    font-weight: 750;
}

.income-value,
.income-amount,
.income-text {
    color: #4ade80 !important;
}

.expense-value {
    color: var(--text);
}

.balance-hero .hero-value {
    color: var(--text);
}

.balance-hero .hero-value.negative-balance {
    color: #fb7185;
}

.dynamics-switch {
    display: inline-flex;
    gap: 3px;

    margin-top: 9px;
    padding: 3px;

    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.dynamics-switch-btn {
    border: 0;
    border-radius: 9px;

    padding: 7px 10px;

    background: transparent;
    color: var(--muted);

    font-size: 11px;
    font-weight: 650;
}

.dynamics-switch-btn.active {
    background: rgba(56, 189, 248, .13);
    color: #38bdf8;
}

.dynamics-switch-btn[data-mode="income"].active {
    background: rgba(74, 222, 128, .12);
    color: #4ade80;
}

.dynamics-switch-btn[data-mode="balance"].active {
    background: rgba(255, 255, 255, .08);
    color: var(--text);
}


/* OPERATIONS FILTERS */

.operations-filters {
    margin-bottom: 14px;
}

.operations-filter-group {
    margin-bottom: 12px;
}

.operations-filter-label {
    margin: 0 0 6px 2px;

    color: var(--muted);
    font-size: 11px;
}

.operations-segment {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;

    gap: 3px;

    padding: 3px;

    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 13px;
}

.operations-filter-btn {
    min-width: 0;

    border: 0;
    border-radius: 10px;

    padding: 9px 6px;

    background: transparent;
    color: var(--muted);

    font-size: 11px;
    font-weight: 650;
}

.operations-filter-btn.active {
    background: rgba(56, 189, 248, .13);
    color: #38bdf8;
}

#operationTypeFilter
.operations-filter-btn[data-type="income"].active {
    background: rgba(74, 222, 128, .12);
    color: #4ade80;
}

.operations-filter-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
}

.operations-search,
.operations-category-select {
    min-width: 0;

    border: 1px solid var(--border);
    border-radius: 12px;

    padding: 11px 12px;

    background: var(--card);
    color: var(--text);

    font-size: 12px;

    outline: none;
}

.operations-search:focus,
.operations-category-select:focus {
    border-color: rgba(56, 189, 248, .45);
}

.operations-category-select {
    max-width: 145px;
}

.operations-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 8px;

    margin-bottom: 18px;
}

.operations-summary-item {
    min-width: 0;

    padding: 11px 10px;

    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
}

.operations-summary-label {
    margin-bottom: 5px;

    color: var(--muted);
    font-size: 10px;
}

.operations-summary-value {
    overflow: hidden;

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

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

.negative-operation-balance {
    color: #fb7185 !important;
}


/* COMPACT CATEGORY BREAKDOWN */

#categories .compact-category,
#incomeCategories .compact-category {
    padding: 7px 0;
}

#categories .category-top,
#incomeCategories .category-top {
    margin-bottom: 6px;
}

#categories .category-name,
#incomeCategories .category-name {
    font-size: 12px;
}

#categories .category-amount,
#incomeCategories .category-amount {
    font-size: 12px;
}

#categories .category-bottom,
#incomeCategories .category-bottom {
    gap: 8px;
}

#categories .progress,
#incomeCategories .progress {
    height: 5px;
}

#categories .percent,
#incomeCategories .percent {
    width: 30px;
    font-size: 10px;
}

.category-show-more {
    width: 100%;

    margin-top: 7px;
    padding: 9px;

    border: 0;
    border-radius: 11px;

    background: rgba(56, 189, 248, .07);
    color: #38bdf8;

    font-size: 11px;
    font-weight: 650;
}

.category-show-more:active {
    opacity: .65;
}

#incomeCategories .category-show-more {
    background: rgba(74, 222, 128, .07);
    color: #4ade80;
}


/* CATEGORY DONUT CHARTS */

.category-donut-layout {
    display: grid;
    grid-template-columns: 128px minmax(0, 1fr);
    gap: 18px;

    align-items: center;

    padding: 8px 0 4px;
}

.category-donut {
    position: relative;

    width: 128px;
    height: 128px;

    border-radius: 50%;

    flex: none;

    box-shadow:
        inset 0 0 20px rgba(56, 189, 248, .08);
}

.category-donut-hole {
    position: absolute;

    inset: 22px;

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

    border-radius: 50%;

    background:
        var(
            --tg-theme-bg-color,
            #16212c
        );

    box-shadow:
        0 0 0 1px
        rgba(255, 255, 255, .035);
}

.category-donut-total {
    max-width: 78px;

    overflow: hidden;

    color: var(--text);

    font-size: 14px;
    font-weight: 800;

    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.category-donut-label {
    margin-top: 3px;

    color: var(--muted);

    font-size: 9px;
    text-transform: lowercase;
}

.donut-legend {
    min-width: 0;
}

.donut-legend-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 8px;

    min-height: 28px;

    border-bottom:
        1px solid
        rgba(255, 255, 255, .035);
}

.donut-legend-row:last-child {
    border-bottom: 0;
}

.donut-legend-left {
    display: flex;
    align-items: center;

    min-width: 0;

    gap: 7px;
}

.donut-legend-dot {
    width: 7px;
    height: 7px;

    flex: none;

    border-radius: 50%;
}

.donut-legend-name {
    overflow: hidden;

    color: var(--text);

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

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

.donut-legend-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;

    flex: none;
}

.donut-legend-right strong {
    color: var(--text);

    font-size: 10px;
}

.donut-legend-right span {
    margin-top: 1px;

    color: var(--muted);

    font-size: 9px;
}


/* На очень узких экранах */
@media (max-width: 360px) {
    .category-donut-layout {
        grid-template-columns: 110px minmax(0, 1fr);
        gap: 12px;
    }

    .category-donut {
        width: 110px;
        height: 110px;
    }

    .category-donut-hole {
        inset: 19px;
    }

    .category-donut-total {
        font-size: 12px;
    }
}


/* =========================================================
   THEME PICKER
========================================================= */

.theme-picker {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 14px;
}

.theme-option {
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 8px;

    background: var(--card);
    color: var(--text);

    text-align: left;
}

.theme-option.active {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.theme-preview {
    display: block;
    height: 60px;

    margin-bottom: 8px;

    border-radius: 9px;
    border: 1px solid rgba(127,127,127,.2);
}

.theme-option-name {
    font-size: 11px;
    font-weight: 650;
}

.theme-preview-classic {
    background:
      linear-gradient(135deg,#182636,#111c27);
}

.theme-preview-ledger {
    background:
      linear-gradient(135deg,#f7f5ef,#e7e4da);
}

.theme-preview-night {
    background:
      linear-gradient(135deg,#182444,#0c1220);
}

.theme-preview-journal {
    background:
      linear-gradient(135deg,#fcfaf3,#f4efe4);
}

.theme-preview-card {
    background:
      linear-gradient(135deg,#2c271d,#17140f);
}

.theme-preview-calm {
    background:
      linear-gradient(135deg,#f7f9f6,#eef1ee);
}

.theme-preview-game {
    background:
      linear-gradient(
        135deg,
        #6c5ce7 0 34%,
        #1fc49b 34% 67%,
        #ffb020 67%
      );
}


/* =========================================================
   CLASSIC — CURRENT THEME
========================================================= */

:root,
:root[data-theme="classic"] {
    --bg: #16212c;
    --card: #151a22;
    --text: #ffffff;
    --muted: #8c91a3;
    --border: #2c3645;

    --accent: #38bdf8;
    --income: #4ade80;
    --danger: #fb7185;

    --radius-card: 18px;
}


/* =========================================================
   LEDGER
========================================================= */

:root[data-theme="ledger"] {
    --bg: #efede6;
    --card: #f7f5ef;
    --text: #1f231f;
    --muted: #5b5e56;
    --border: #c9c4b4;

    --accent: #a9862f;
    --income: #33513c;
    --danger: #8e3b2e;

    --radius-card: 2px;
}

[data-theme="ledger"] body {
    background:
      repeating-linear-gradient(
        0deg,
        rgba(0,0,0,.015) 0,
        rgba(0,0,0,.015) 1px,
        transparent 1px,
        transparent 3px
      ),
      var(--bg);

    font-family:
      "Courier New",
      monospace;
}

[data-theme="ledger"] .metric,
[data-theme="ledger"] .dynamics-stat,
[data-theme="ledger"] .income-expense-card,
[data-theme="ledger"] .recurring-payment,
[data-theme="ledger"] .operations-summary-item,
[data-theme="ledger"] .settings-block {
    border-radius: 2px;
    box-shadow: none;
}

[data-theme="ledger"] .section {
    border-top: 1px dashed var(--border);
    padding-top: 18px;
}

[data-theme="ledger"] .nav {
    background: #1f231f;
}

[data-theme="ledger"] .nav-item.active {
    background: #efede6;
    color: #1f231f;
}


/* =========================================================
   NIGHT TICKER
========================================================= */

:root[data-theme="night"] {
    --bg: #0c1220;
    --card: #131d33;
    --text: #eaf0ff;
    --muted: #8c9ac2;
    --border: #243352;

    --accent: #3fe0c5;
    --income: #3fe0c5;
    --danger: #ff8570;

    --radius-card: 18px;
}

[data-theme="night"] body {
    background:
      radial-gradient(
        circle at 10% 5%,
        rgba(63,224,197,.10),
        transparent 35%
      ),
      #0c1220;
}

[data-theme="night"] .metric,
[data-theme="night"] .dynamics-stat,
[data-theme="night"] .income-expense-card,
[data-theme="night"] .recurring-payment,
[data-theme="night"] .operations-summary-item {
    background:
      radial-gradient(
        120% 150% at 0% 0%,
        #182444,
        #131d33
      );
}

[data-theme="night"] .nav-item.active {
    color: #3fe0c5;
}


/* =========================================================
   JOURNAL
========================================================= */

:root[data-theme="journal"] {
    --bg: #f4efe4;
    --card: #fcfaf3;
    --text: #3a3226;
    --muted: #8a7f6b;
    --border: #e3d9c4;

    --accent: #4c6b8a;
    --income: #4c6b8a;
    --danger: #c1654e;

    --radius-card: 20px;
}

[data-theme="journal"] body {
    background:
      repeating-linear-gradient(
        180deg,
        transparent 0,
        transparent 27px,
        #e3d9c4 28px
      ),
      #f4efe4;
}

[data-theme="journal"] .section-title,
[data-theme="journal"] .hero-value {
    font-family:
      Georgia,
      serif;
}

[data-theme="journal"] .metric,
[data-theme="journal"] .dynamics-stat,
[data-theme="journal"] .income-expense-card,
[data-theme="journal"] .recurring-payment {
    border: 0;
    box-shadow:
      0 10px 24px -16px
      rgba(58,50,38,.25);
}


/* =========================================================
   CARD
========================================================= */

:root[data-theme="card"] {
    --bg: #17140f;
    --card: #26211a;
    --text: #efe8da;
    --muted: #a79c88;
    --border: #332c22;

    --accent: #c89768;
    --income: #8fa893;
    --danger: #c07a5e;

    --radius-card: 18px;
}

[data-theme="card"] body {
    background:
      radial-gradient(
        120% 90% at 50% -10%,
        #241f17,
        #17140f 55%
      );
}

[data-theme="card"] .hero {
    background:
      linear-gradient(
        125deg,
        #2c271d,
        #1e1a14 48%,
        #241f17
      );

    border: 1px solid #3a3123;
    border-radius: 20px;

    padding: 22px;

    box-shadow:
      0 30px 60px -28px
      rgba(0,0,0,.8);
}

[data-theme="card"] .hero-value,
[data-theme="card"] .section-title {
    font-family:
      Georgia,
      serif;
}

[data-theme="card"] .nav-item.active {
    color: #e8c8a0;
}


/* =========================================================
   CALM
========================================================= */

:root[data-theme="calm"] {
    --bg: #eef1ee;
    --card: #f7f9f6;
    --text: #2b332c;
    --muted: #8b958a;
    --border: #dce2da;

    --accent: #6e9182;
    --income: #6e9182;
    --danger: #be8a72;

    --radius-card: 14px;
}

[data-theme="calm"] body {
    background: #eef1ee;
}

[data-theme="calm"] .section {
    margin-top: 40px;
}

[data-theme="calm"] .metric,
[data-theme="calm"] .dynamics-stat,
[data-theme="calm"] .income-expense-card,
[data-theme="calm"] .operations-summary-item {
    background: transparent;
    border-width: 0 0 1px;
    border-radius: 0;
}

[data-theme="calm"] .section-title {
    font-family:
      Georgia,
      serif;

    font-weight: 400;
}

[data-theme="calm"] .nav {
    border-radius: 30px 30px 0 0;
}


/* =========================================================
   GAME
========================================================= */

:root[data-theme="game"] {
    --bg: #fbf6ec;
    --card: #ffffff;
    --text: #241c15;
    --muted: #8a8175;
    --border: #241c15;

    --accent: #6c5ce7;
    --income: #1fc49b;
    --danger: #ff6b5b;

    --radius-card: 18px;
}

[data-theme="game"] body {
    background: #fbf6ec;
}

[data-theme="game"] .metric,
[data-theme="game"] .dynamics-stat,
[data-theme="game"] .income-expense-card,
[data-theme="game"] .recurring-payment,
[data-theme="game"] .operations-summary-item,
[data-theme="game"] .settings-block {
    border: 2px solid #241c15;

    box-shadow:
      3px 3px 0
      #241c15;
}

[data-theme="game"] .hero {
    background: #6c5ce7;
    color: white;

    border: 3px solid #241c15;
    border-radius: 24px;

    padding: 20px;

    box-shadow:
      5px 5px 0
      #241c15;
}

[data-theme="game"] .hero-label,
[data-theme="game"] .hero-value {
    color: white;
}

[data-theme="game"] .nav {
    background: #fff;

    border-top:
      2px solid
      #241c15;
}

[data-theme="game"] .nav-item.active {
    color: #6c5ce7;
}


/* =========================================================
   COMMON THEME BRIDGE
========================================================= */

body {
    background-color: var(--bg);
    color: var(--text);
}

.metric,
.dynamics-stat,
.income-expense-card,
.recurring-payment,
.operations-summary-item,
.settings-block,
.sheet {
    background-color: var(--card);
    border-color: var(--border);
    color: var(--text);
}

.hero-label,
.metric-label,
.dynamics-stat-label,
.settings-hint,
.expense-info,
.recurring-payment-info {
    color: var(--muted);
}

.income-value,
.income-amount,
.income-text {
    color: var(--income) !important;
}

.negative-balance,
.negative-operation-balance {
    color: var(--danger) !important;
}

.dynamics-switch-btn.active,
.category-show-more,
.overview-recurring-all,
.recurring-next-line {
    color: var(--accent);
}

.nav {
    background-color: var(--bg);
    border-color: var(--border);
}


/* =========================================================
   FULL LAYOUT THEMES v60
   Each theme keeps the same data/API but rebuilds the overview
   composition and chart/category language.
========================================================= */

.theme-hero-decor,
.theme-balance-ring,
.theme-game-progress {
    display: none;
}

.hero-main-copy { position: relative; z-index: 2; }

/* shared themed bar charts */
.themed-chart {
    position: relative;
    min-height: 128px;
}
.theme-bars {
    height: 118px;
    display: flex;
    align-items: flex-end;
    gap: 4px;
    padding-top: 22px;
}
.theme-bar-item {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 0;
    min-width: 0;
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    color: var(--muted);
    cursor: pointer;
}
.theme-bar-stick {
    display: block;
    width: 100%;
    height: var(--bar-size);
    min-height: 3px;
    background: var(--border);
    transition: height .2s ease, opacity .2s ease, transform .15s ease;
}
.theme-bar-label { font-size: 8px; line-height: 1; }
.theme-bar-item.selected .theme-bar-stick { background: var(--accent); }
.theme-bar-item.peak .theme-bar-stick { background: var(--accent); }
.theme-bar-item:active .theme-bar-stick { transform: scaleY(.96); }
.theme-bar-item.negative .theme-bar-stick { background: var(--danger); }

/* category renderers used by non-donut themes */
.theme-category-list { display: flex; flex-direction: column; }
.theme-cat-row {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 0;
    border-bottom: 1px solid var(--border);
}
.theme-cat-row:last-child { border-bottom: 0; }
.theme-cat-icon {
    width: 34px;
    height: 34px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: color-mix(in srgb, var(--cat-color) 13%, var(--card));
}
.theme-cat-copy { flex: 1; min-width: 0; }
.theme-cat-name { font-size: 12px; font-weight: 650; }
.theme-cat-meter {
    height: 4px;
    margin-top: 6px;
    background: var(--border);
    overflow: hidden;
    border-radius: 8px;
}
.theme-cat-meter i {
    display: block;
    width: var(--cat-pct);
    height: 100%;
    background: var(--cat-color);
}
.theme-cat-value {
    font-size: 12px;
    font-weight: 700;
    text-align: right;
    white-space: nowrap;
}
.theme-cat-value small {
    display: block;
    color: var(--muted);
    font-size: 9px;
    font-weight: 500;
    margin-top: 2px;
}

/* ----- CLASSIC: preserve current composition ----- */
[data-theme="classic"] #overviewView.active { display: block; }

/* =========================================================
   LEDGER — receipt / accounting sheet
========================================================= */
[data-theme="ledger"] #overviewView.active {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1px;
}
[data-theme="ledger"] #overviewView > .top,
[data-theme="ledger"] #overviewView > .hero,
[data-theme="ledger"] #overviewView > .section { grid-column: 1 / -1; }
[data-theme="ledger"] #overviewView > .income-expense-summary,
[data-theme="ledger"] #overviewView > .metrics { grid-column: 1 / -1; }
[data-theme="ledger"] #overviewView > .top {
    border-bottom: 1px dashed var(--border);
    padding-bottom: 11px;
    margin-bottom: 18px;
    text-transform: uppercase;
    letter-spacing: .08em;
}
[data-theme="ledger"] .logo { font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 700; }
[data-theme="ledger"] .period { font-family: 'JetBrains Mono', monospace; font-size: 10px; }
[data-theme="ledger"] .balance-hero {
    position: relative;
    padding: 4px 0 20px;
    margin-bottom: 1px;
    border-bottom: 2px solid var(--text);
}
[data-theme="ledger"] .hero-label {
    text-transform: uppercase;
    letter-spacing: .14em;
    font: 10px 'JetBrains Mono', monospace;
}
[data-theme="ledger"] .hero-value {
    font: 500 48px/1 'Fraunces', Georgia, serif;
    letter-spacing: -.02em;
}
[data-theme="ledger"] .theme-ledger-stamp {
    display: flex;
    position: absolute;
    right: 4px;
    top: -2px;
    width: 66px;
    height: 66px;
    border: 1.5px solid var(--danger);
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    color: var(--danger);
    text-align: center;
    font: 700 8px/1.35 'JetBrains Mono', monospace;
    letter-spacing: .08em;
    transform: rotate(-12deg);
    opacity: .72;
}
[data-theme="ledger"] .income-expense-summary,
[data-theme="ledger"] .metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--border);
    margin: 0 0 1px;
}
[data-theme="ledger"] .income-expense-card,
[data-theme="ledger"] .metric {
    border: 0;
    border-radius: 0;
    background: var(--card);
    padding: 14px 16px;
}
[data-theme="ledger"] .income-expense-label,
[data-theme="ledger"] .metric-label,
[data-theme="ledger"] .dynamics-stat-label {
    text-transform: uppercase;
    letter-spacing: .1em;
    font: 9px 'JetBrains Mono', monospace;
}
[data-theme="ledger"] .income-expense-value,
[data-theme="ledger"] .metric-value { font-family: 'JetBrains Mono', monospace; }
[data-theme="ledger"] #overviewView > .section {
    margin-top: 28px;
    border-top: 1px dashed var(--border);
    padding-top: 16px;
}
[data-theme="ledger"] .section-title { font: 500 17px 'Fraunces', Georgia, serif; }
[data-theme="ledger"] .dynamics-switch { border-radius: 2px; }
[data-theme="ledger"] .dynamics-switch-btn { border-radius: 0; font-family: 'JetBrains Mono', monospace; }
[data-theme="ledger"] .theme-bars { gap: 3px; border-bottom: 1px solid var(--border); }
[data-theme="ledger"] .theme-bar-stick { border-radius: 0; background: var(--text); opacity: .65; }
[data-theme="ledger"] .theme-bar-item.selected .theme-bar-stick,
[data-theme="ledger"] .theme-bar-item.peak .theme-bar-stick { background: var(--danger); opacity: 1; }
[data-theme="ledger"] .theme-bar-label { font-family: 'JetBrains Mono', monospace; }
[data-theme="ledger"] .dynamics-metrics-grid {
    gap: 1px;
    background: var(--border);
    margin-top: 14px;
}
[data-theme="ledger"] .dynamics-stat { border: 0; border-radius: 0; background: var(--card); }
[data-theme="ledger"] .theme-cat-row {
    display: grid;
    grid-template-columns: 24px 1fr auto;
    border-bottom: 1px dotted var(--border);
    font-family: 'JetBrains Mono', monospace;
}
[data-theme="ledger"] .theme-cat-icon { width: 24px; height: 24px; background: transparent; border-radius: 0; }
[data-theme="ledger"] .theme-cat-meter { height: 3px; border-radius: 0; }
[data-theme="ledger"] .theme-cat-meter i { background: var(--accent); }
[data-theme="ledger"] .expensive-day { border-bottom-style: dashed; font-family: 'JetBrains Mono', monospace; }

/* =========================================================
   NIGHT — ticker dashboard / teal rings
========================================================= */
[data-theme="night"] #overviewView.active { display: block; }
[data-theme="night"] #overviewView > .top { margin-bottom: 18px; }
[data-theme="night"] .logo { font-family: 'Space Grotesk', sans-serif; }
[data-theme="night"] .balance-hero {
    min-height: 160px;
    position: relative;
    display: flex;
    align-items: center;
    padding: 22px 20px 22px 156px;
    border: 1px solid var(--border);
    border-radius: 24px;
    background: radial-gradient(120% 140% at 20% 0%, #182444, #131d33);
    overflow: hidden;
}
[data-theme="night"] .theme-balance-ring {
    --theme-ring-pct: 0deg;
    display: grid;
    position: absolute;
    left: 20px;
    top: 20px;
    width: 118px;
    height: 118px;
    place-items: center;
    border-radius: 50%;
    background: conic-gradient(var(--accent) var(--theme-ring-pct), var(--border) 0);
    transform: rotate(-90deg);
}
[data-theme="night"] .theme-balance-ring::after {
    content: '';
    position: absolute;
    inset: 10px;
    border-radius: 50%;
    background: var(--card);
}
[data-theme="night"] .theme-balance-ring-hole {
    position: relative;
    z-index: 2;
    transform: rotate(90deg);
    text-align: center;
    display: flex;
    flex-direction: column;
}
[data-theme="night"] .theme-balance-ring-hole span { font: 600 20px 'Space Grotesk'; }
[data-theme="night"] .theme-balance-ring-hole small { margin-top: 2px; color: var(--muted); font-size: 8px; text-transform: uppercase; letter-spacing: .08em; }
[data-theme="night"] .hero-label { text-transform: uppercase; letter-spacing: .08em; font-size: 10px; }
[data-theme="night"] .hero-value { font: 600 29px 'Space Grotesk', sans-serif; }
[data-theme="night"] .income-expense-summary,
[data-theme="night"] .metrics { gap: 10px; margin-bottom: 12px; }
[data-theme="night"] .income-expense-card,
[data-theme="night"] .metric {
    border-radius: 16px;
    padding: 14px 15px;
    background: #131d33;
}
[data-theme="night"] .income-expense-value,
[data-theme="night"] .metric-value { font-family: 'Space Grotesk', sans-serif; }
[data-theme="night"] #overviewView > .section {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 16px;
    margin-top: 16px;
}
[data-theme="night"] .themed-chart { min-height: 118px; }
[data-theme="night"] .theme-bars { height: 100px; gap: 4px; }
[data-theme="night"] .theme-bar-stick { border-radius: 4px 4px 2px 2px; background: #243352; }
[data-theme="night"] .theme-bar-item.selected .theme-bar-stick,
[data-theme="night"] .theme-bar-item.peak .theme-bar-stick { background: linear-gradient(180deg, var(--accent), rgba(63,224,197,.24)); }
[data-theme="night"] .theme-bar-label { display: none; }
[data-theme="night"] .dynamics-metrics-grid { gap: 8px; }
[data-theme="night"] .dynamics-stat { background: #101a2e; }
[data-theme="night"] .category-donut { box-shadow: 0 0 0 1px var(--border), 0 0 32px rgba(63,224,197,.08); }
[data-theme="night"] .category-donut-hole { background: #131d33; }
[data-theme="night"] #overviewView > .section:has(#expensiveDays) { display: none; }

/* =========================================================
   JOURNAL — notebook / taped paper / stickers
========================================================= */
[data-theme="journal"] #overviewView.active { display: block; }
[data-theme="journal"] .top { align-items: flex-end; }
[data-theme="journal"] .logo {
    font: 700 31px/1 'Caveat', cursive;
    color: var(--accent);
}
[data-theme="journal"] .period { text-transform: uppercase; letter-spacing: .08em; font-size: 10px; }
[data-theme="journal"] .balance-hero {
    position: relative;
    background: var(--card);
    border-radius: 22px;
    padding: 24px 22px 20px;
    box-shadow: 0 14px 30px -14px rgba(58,50,38,.18);
    transform: rotate(-.45deg);
    margin: 12px 2px 16px;
}
[data-theme="journal"] .theme-journal-tape {
    display: block;
    position: absolute;
    top: -10px;
    left: 28px;
    width: 68px;
    height: 22px;
    background: repeating-linear-gradient(45deg,#f6e7c6,#f6e7c6 4px,#eedca8 4px,#eedca8 8px);
    opacity: .92;
    transform: rotate(-4deg);
}
[data-theme="journal"] .hero-label { font-size: 11px; }
[data-theme="journal"] .hero-value { font: 700 48px/1 'Caveat', cursive; color: var(--text); }
[data-theme="journal"] .income-expense-summary { gap: 8px; margin: 0 4px 12px; }
[data-theme="journal"] .income-expense-card { border: 0; border-radius: 14px; padding: 10px 12px; }
[data-theme="journal"] .income-expense-card:first-child { background: #dce6ee; }
[data-theme="journal"] .income-expense-card:last-child { background: #f1dad2; }
[data-theme="journal"] .metrics { gap: 8px; margin: 0 4px 18px; }
[data-theme="journal"] .metric { border: 0; border-radius: 14px; padding: 10px 12px; background: rgba(252,250,243,.75); }
[data-theme="journal"] #overviewView > .section { margin-top: 27px; }
[data-theme="journal"] .section-head { gap: 9px; }
[data-theme="journal"] .section-title { font: 700 24px 'Caveat', cursive; }
[data-theme="journal"] .section-head::after { content: ''; flex: 1; border-bottom: 2px dotted var(--border); }
[data-theme="journal"] .dynamics-switch { background: var(--card); }
[data-theme="journal"] .theme-bars { height: 108px; gap: 9px; padding: 10px 8px 0; background: var(--card); border-radius: 18px; box-shadow: 0 10px 22px -14px rgba(58,50,38,.18); }
[data-theme="journal"] .theme-bar-item { gap: 7px; }
[data-theme="journal"] .theme-bar-stick { width: min(24px, 100%); border-radius: 8px 8px 4px 4px; background: #dce6ee; }
[data-theme="journal"] .theme-bar-item.selected .theme-bar-stick,
[data-theme="journal"] .theme-bar-item.peak .theme-bar-stick { background: #d9a441; }
[data-theme="journal"] .theme-bar-label { font-size: 9px; text-transform: capitalize; }
[data-theme="journal"] #overviewView > .section:has(#expensiveDays) { display: none; }
[data-theme="journal"] .theme-category-list { gap: 9px; }
[data-theme="journal"] .theme-cat-row {
    border: 0;
    border-radius: 16px;
    padding: 11px 13px;
    background: var(--card);
    box-shadow: 0 6px 16px -12px rgba(58,50,38,.2);
}
[data-theme="journal"] .theme-cat-icon { width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--card); }
[data-theme="journal"] .theme-cat-meter { height: 6px; background: var(--border); }
[data-theme="journal"] .theme-cat-meter i { background: var(--accent); }

/* =========================================================
   CARD — premium bank card / copper
========================================================= */
[data-theme="card"] #overviewView.active { display: block; }
[data-theme="card"] .top .logo { font: italic 23px 'Cormorant', serif; color: #e8c8a0; }
[data-theme="card"] .balance-hero {
    position: relative;
    min-height: 206px;
    padding: 88px 22px 22px;
    overflow: hidden;
    border-radius: 20px;
    background: linear-gradient(125deg,#2c271d 0%,#1e1a14 48%,#241f17 100%);
    border: 1px solid #3a3123;
    box-shadow: 0 30px 60px -24px rgba(0,0,0,.7);
}
[data-theme="card"] .balance-hero::after {
    content: '••••  ••••  ••••  08';
    position: absolute;
    left: 22px;
    bottom: 18px;
    color: var(--muted);
    font-size: 11px;
    letter-spacing: .2em;
}
[data-theme="card"] .theme-card-chip {
    display: block;
    position: absolute;
    top: 22px;
    left: 22px;
    width: 38px;
    height: 28px;
    border-radius: 6px;
    background: linear-gradient(140deg,#e8c8a0,#c89768);
}
[data-theme="card"] .theme-card-chip::after { content:''; position:absolute; inset:5px; border:1px solid rgba(0,0,0,.25); border-radius:3px; }
[data-theme="card"] .theme-card-brand { display:block; position:absolute; right:22px; top:24px; color:#e8c8a0; font:italic 15px 'Cormorant',serif; }
[data-theme="card"] .hero-label { font-size: 9px; text-transform: uppercase; letter-spacing: .14em; }
[data-theme="card"] .hero-value { font: 600 40px 'Cormorant', serif; color: var(--text); }
[data-theme="card"] .income-expense-summary { gap: 10px; margin: 0 0 7px; }
[data-theme="card"] .income-expense-card { background: linear-gradient(180deg,#26211a,#1e1a14); border-radius: 16px; padding: 14px 16px; }
[data-theme="card"] .income-expense-value { font: 600 22px 'Cormorant', serif; }
[data-theme="card"] .metrics { gap: 10px; margin-bottom: 8px; }
[data-theme="card"] .metric { background: transparent; border-radius: 12px; }
[data-theme="card"] #overviewView > .section { margin-top: 28px; }
[data-theme="card"] .section-title { font: italic 21px 'Cormorant', serif; }
[data-theme="card"] .theme-bars { height: 82px; gap: 4px; }
[data-theme="card"] .theme-bar-stick { border-radius: 3px 3px 1px 1px; background: var(--border); }
[data-theme="card"] .theme-bar-item.selected .theme-bar-stick,
[data-theme="card"] .theme-bar-item.peak .theme-bar-stick { background: linear-gradient(180deg,#e8c8a0,#c89768); }
[data-theme="card"] .theme-bar-label { display:none; }
[data-theme="card"] #overviewView > .section:has(#expensiveDays) { display:none; }
[data-theme="card"] .theme-cat-row { padding: 12px 4px; }
[data-theme="card"] .theme-cat-icon { background: #26211a; border: 1px solid var(--border); }
[data-theme="card"] .theme-cat-meter { width: 72px; height: 3px; }
[data-theme="card"] .theme-cat-meter i { background: #c89768; }
[data-theme="card"] .theme-cat-value { font: 600 16px 'Cormorant', serif; }

/* =========================================================
   CALM — airy editorial / thin ring / minimal lists
========================================================= */
[data-theme="calm"] #overviewView.active { display: block; }
[data-theme="calm"] .top { justify-content: center; text-align:center; margin-bottom: 24px; }
[data-theme="calm"] .logo { display:none; }
[data-theme="calm"] .period { text-transform:uppercase; letter-spacing:.1em; font-size:10px; }
[data-theme="calm"] .balance-hero {
    position: relative;
    height: 210px;
    display: grid;
    place-items: center;
    margin-bottom: 14px;
}
[data-theme="calm"] .theme-balance-ring {
    --theme-ring-pct: 0deg;
    display: grid;
    position: absolute;
    width: 184px;
    height: 184px;
    place-items: center;
    border-radius: 50%;
    background: conic-gradient(var(--accent) var(--theme-ring-pct), var(--border) 0);
}
[data-theme="calm"] .theme-balance-ring::after { content:''; position:absolute; inset:2px; border-radius:50%; background:var(--bg); }
[data-theme="calm"] .theme-balance-ring-hole { display:none; }
[data-theme="calm"] .hero-main-copy { text-align:center; }
[data-theme="calm"] .hero-label { text-transform:uppercase; letter-spacing:.1em; font-size:9px; margin-bottom:8px; }
[data-theme="calm"] .hero-value { font: 400 35px 'Newsreader', serif; }
[data-theme="calm"] .income-expense-summary { display:block; margin-bottom:0; }
[data-theme="calm"] .income-expense-card {
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    padding:14px 2px;
    border:0;
    border-bottom:1px solid var(--border);
    background:transparent;
}
[data-theme="calm"] .income-expense-label { font-size:13px; }
[data-theme="calm"] .income-expense-value { font:500 20px 'Newsreader',serif; }
[data-theme="calm"] .metrics { display:block; margin-bottom:0; }
[data-theme="calm"] .metric { display:flex; justify-content:space-between; align-items:baseline; border:0; border-bottom:1px solid var(--border); padding:14px 2px; background:transparent; }
[data-theme="calm"] .metric-label { margin:0; font-size:13px; }
[data-theme="calm"] .metric-value { font:500 18px 'Newsreader',serif; }
[data-theme="calm"] #overviewView > .section { margin-top: 38px; padding-top: 26px; border-top:1px solid var(--border); }
[data-theme="calm"] .section-head { justify-content:center; text-align:center; }
[data-theme="calm"] .section-title { font: italic 20px 'Newsreader',serif; }
[data-theme="calm"] .dynamics-switch { margin-left:auto; margin-right:auto; }
[data-theme="calm"] .theme-bars { height:82px; gap:14px; }
[data-theme="calm"] .theme-bar-stick { width:6px; border-radius:5px; background:var(--border); }
[data-theme="calm"] .theme-bar-item.selected .theme-bar-stick,
[data-theme="calm"] .theme-bar-item.peak .theme-bar-stick { background:var(--accent); }
[data-theme="calm"] .theme-bar-label { font-size:9px; text-transform:capitalize; }
[data-theme="calm"] #overviewView > .section:has(#expensiveDays) { display:none; }
[data-theme="calm"] .theme-cat-row { padding:15px 2px; }
[data-theme="calm"] .theme-cat-icon { width:22px; height:22px; background:transparent; border-radius:0; }
[data-theme="calm"] .theme-cat-meter { display:none; }
[data-theme="calm"] .theme-cat-value { font:400 16px 'Newsreader',serif; }

/* =========================================================
   GAME — playful board / thick outlines / XP
========================================================= */
[data-theme="game"] #overviewView.active { display:block; }
[data-theme="game"] .logo { font:700 22px 'Baloo 2',sans-serif; }
[data-theme="game"] .period {
    background:#fff;
    border:2px solid var(--text);
    border-radius:14px;
    padding:6px 9px;
    box-shadow:3px 3px 0 var(--text);
    color:var(--text);
    font-weight:700;
    font-size:10px;
}
[data-theme="game"] .balance-hero {
    position:relative;
    padding:20px 18px;
    border:3px solid var(--text);
    border-radius:26px;
    background:#6c5ce7;
    color:#fff;
    box-shadow:6px 6px 0 var(--text);
    overflow:hidden;
}
[data-theme="game"] .balance-hero::after { content:'₸'; position:absolute; right:-8px; bottom:-42px; font:800 130px 'Baloo 2'; color:rgba(255,255,255,.09); }
[data-theme="game"] .hero-label { color:rgba(255,255,255,.82); font:600 13px 'Baloo 2'; }
[data-theme="game"] .hero-value { color:#fff; font:800 44px 'Baloo 2'; }
[data-theme="game"] .theme-game-progress { display:block; position:relative; z-index:2; margin-top:14px; }
[data-theme="game"] .theme-game-progress-head { display:flex; justify-content:space-between; font-size:10px; font-weight:700; color:#fff; margin-bottom:5px; }
[data-theme="game"] .theme-game-progress-track { height:13px; border:2px solid var(--text); border-radius:8px; overflow:hidden; background:rgba(0,0,0,.18); }
[data-theme="game"] .theme-game-progress-track i { display:block; height:100%; background:#ffb020; border-right:2px solid var(--text); }
[data-theme="game"] .income-expense-summary { gap:12px; margin-top:18px; }
[data-theme="game"] .income-expense-card { border:2.5px solid var(--text); border-radius:18px; box-shadow:4px 4px 0 var(--text); }
[data-theme="game"] .income-expense-card:first-child { background:#d6f5eb; }
[data-theme="game"] .income-expense-card:last-child { background:#ffe0db; }
[data-theme="game"] .income-expense-label { color:var(--text); font-weight:700; }
[data-theme="game"] .income-expense-value { font:700 21px 'Baloo 2'; }
[data-theme="game"] .metrics { gap:12px; }
[data-theme="game"] .metric { border:2px solid var(--text); border-radius:16px; box-shadow:3px 3px 0 var(--text); background:#fff; }
[data-theme="game"] #overviewView > .section {
    border:2.5px solid var(--text);
    border-radius:20px;
    padding:15px;
    box-shadow:4px 4px 0 var(--text);
    background:#fff;
    margin-top:20px;
}
[data-theme="game"] .section-title { font:700 19px 'Baloo 2'; }
[data-theme="game"] .dynamics-switch { border:2px solid var(--text); background:#fff; }
[data-theme="game"] .dynamics-switch-btn.active { background:#d6f5eb; color:var(--text); }
[data-theme="game"] .theme-bars { height:92px; gap:5px; }
[data-theme="game"] .theme-bar-stick { border:1.5px solid var(--text); border-radius:5px 5px 2px 2px; background:#e6e1fb; }
[data-theme="game"] .theme-bar-item.selected .theme-bar-stick,
[data-theme="game"] .theme-bar-item.peak .theme-bar-stick { background:#ffb020; }
[data-theme="game"] .theme-bar-label { display:none; }
[data-theme="game"] #overviewView > .section:has(#expensiveDays) { display:none; }
[data-theme="game"] .theme-category-list { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
[data-theme="game"] .theme-cat-row {
    min-width:0;
    border:2px solid var(--text);
    border-radius:16px;
    padding:10px;
    box-shadow:3px 3px 0 var(--text);
    background:#fff;
}
[data-theme="game"] .theme-cat-icon { width:34px; height:34px; border:2px solid var(--text); border-radius:50%; }
[data-theme="game"] .theme-cat-copy { min-width:0; }
[data-theme="game"] .theme-cat-name { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
[data-theme="game"] .theme-cat-meter { display:none; }
[data-theme="game"] .theme-cat-value { font:700 12px 'Baloo 2'; }
[data-theme="game"] .theme-cat-value small { display:none; }

/* Theme-specific nav language */
[data-theme="ledger"] .nav-inner,
[data-theme="night"] .nav-inner,
[data-theme="journal"] .nav-inner,
[data-theme="card"] .nav-inner,
[data-theme="calm"] .nav-inner,
[data-theme="game"] .nav-inner { transition: background .2s ease, border-radius .2s ease; }

[data-theme="night"] .nav-inner { background:#131d33; border:1px solid #243352; border-radius:20px; padding:5px; }
[data-theme="night"] .nav { background:transparent; border:0; }
[data-theme="night"] .nav-item.active { background:rgba(63,224,197,.14); border-radius:14px; color:#3fe0c5; }

[data-theme="journal"] .nav-inner { background:#fcfaf3; border-radius:22px; padding:6px; box-shadow:0 14px 30px -16px rgba(58,50,38,.4); }
[data-theme="journal"] .nav { background:transparent; border:0; }
[data-theme="journal"] .nav-item.active { background:#4c6b8a; color:#fff; border-radius:16px; }

[data-theme="card"] .nav-inner { background:#26211a; border:1px solid #332c22; border-radius:20px; padding:6px; }
[data-theme="card"] .nav { background:transparent; border:0; }
[data-theme="card"] .nav-item.active { background:linear-gradient(140deg,#e8c8a0,#c89768); color:#1a140c; border-radius:14px; }

[data-theme="calm"] .nav-inner { background:#f7f9f6; border:1px solid #dce2da; border-radius:30px; padding:7px 12px; }
[data-theme="calm"] .nav { background:transparent; border:0; }
[data-theme="calm"] .nav-item.active { background:transparent; color:#2b332c; }

[data-theme="game"] .nav-inner { background:#fff; border:2.5px solid #241c15; border-radius:22px; padding:5px; box-shadow:5px 5px 0 #241c15; }
[data-theme="game"] .nav { background:transparent; border:0; }
[data-theme="game"] .nav-item.active { background:#1fc49b; color:#fff; border:2px solid #241c15; border-radius:15px; }

/* Responsive guard for tiny Telegram windows */
@media (max-width: 380px) {
    [data-theme="night"] .balance-hero { padding-left: 132px; }
    [data-theme="night"] .theme-balance-ring { width:96px; height:96px; left:18px; top:31px; }
    [data-theme="game"] .theme-category-list { grid-template-columns:1fr; }
    [data-theme="ledger"] .hero-value { font-size:42px; }
}

/* =========================================================
   NIGHT TICKER V1 — FULL OVERVIEW LAYOUT
   Отдельная главная, близкая к исходному Night Ticker.
========================================================= */

.night-overview { display:none; }

[data-theme="night"] #overviewView > :not(#nightOverview) {
    display:none !important;
}

[data-theme="night"] #nightOverview {
    display:block;
}

[data-theme="night"] body {
    background:
      radial-gradient(240px 240px at -40px 70px, rgba(63,224,197,.12), transparent 72%),
      radial-gradient(220px 220px at calc(100% + 50px) 58%, rgba(240,184,92,.07), transparent 72%),
      linear-gradient(180deg,#101a2e 0,#0c1220 42%,#0c1220 100%);
    color:#EAF0FF;
    font-family:'Manrope',sans-serif;
}

[data-theme="night"] .app {
    max-width:520px;
    padding:22px 16px 112px;
}

[data-theme="night"] .night-overview {
    color:#EAF0FF;
}

[data-theme="night"] .night-top {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    margin-bottom:20px;
}

[data-theme="night"] .night-user {
    display:flex;
    align-items:center;
    gap:11px;
    min-width:0;
}

[data-theme="night"] .night-avatar {
    width:40px;
    height:40px;
    flex:none;
    border-radius:12px;
    display:grid;
    place-items:center;
    background:linear-gradient(135deg,#3FE0C5,#1B8F7D);
    color:#06251E;
    box-shadow:0 8px 24px rgba(63,224,197,.12);
}

[data-theme="night"] .night-kicker {
    color:#8C9AC2;
    font-size:10px;
    line-height:1;
}

[data-theme="night"] .night-user-name {
    margin-top:4px;
    font:600 15px 'Space Grotesk',sans-serif;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

[data-theme="night"] .night-period-pill {
    flex:none;
    padding:9px 11px;
    border:1px solid #243352;
    border-radius:12px;
    background:#131D33;
    color:#8C9AC2;
    font-size:10px;
    text-transform:capitalize;
}

[data-theme="night"] .night-ring-card {
    position:relative;
    display:grid;
    grid-template-columns:118px minmax(0,1fr);
    align-items:center;
    gap:20px;
    min-height:164px;
    padding:22px;
    border:1px solid #243352;
    border-radius:24px;
    overflow:hidden;
    background:radial-gradient(120% 145% at 15% 0%,#182444,#131D33 64%);
    box-shadow:0 24px 60px -34px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.025);
}

[data-theme="night"] .night-ring-card::after {
    content:"";
    position:absolute;
    width:210px;
    height:210px;
    right:-95px;
    top:-105px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(63,224,197,.12),transparent 70%);
    pointer-events:none;
}

[data-theme="night"] .night-ring-wrap {
    position:relative;
    z-index:1;
}

[data-theme="night"] .night-ring {
    --night-ring:0deg;
    position:relative;
    width:118px;
    height:118px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:conic-gradient(from -90deg,#3FE0C5 0 var(--night-ring),#243352 var(--night-ring) 360deg);
    box-shadow:0 0 36px rgba(63,224,197,.08);
}

[data-theme="night"] .night-ring::after {
    content:"";
    position:absolute;
    inset:10px;
    border-radius:50%;
    background:#131D33;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.02);
}

[data-theme="night"] .night-ring-inner {
    position:relative;
    z-index:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
}

[data-theme="night"] .night-ring-inner strong {
    font:600 22px 'Space Grotesk',sans-serif;
}

[data-theme="night"] .night-ring-inner span {
    max-width:65px;
    margin-top:3px;
    color:#8C9AC2;
    font-size:7px;
    line-height:1.25;
    letter-spacing:.07em;
    text-transform:uppercase;
}

[data-theme="night"] .night-ring-copy {
    position:relative;
    z-index:1;
    min-width:0;
}

[data-theme="night"] .night-label,
[data-theme="night"] .night-mini-card span,
[data-theme="night"] .night-quick-card span,
[data-theme="night"] .night-section-kicker,
[data-theme="night"] .night-trend-stats span {
    color:#8C9AC2;
    font-size:9px;
    letter-spacing:.065em;
    text-transform:uppercase;
}

[data-theme="night"] .night-balance {
    margin-top:6px;
    font:600 clamp(25px,7vw,33px) 'Space Grotesk',sans-serif;
    letter-spacing:-.02em;
    white-space:nowrap;
}

[data-theme="night"] .night-delta {
    margin-top:8px;
    color:#3FE0C5;
    font-size:10px;
    line-height:1.35;
}

[data-theme="night"] .night-money-pair {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-top:12px;
}

[data-theme="night"] .night-mini-card,
[data-theme="night"] .night-quick-card {
    min-width:0;
    padding:14px 15px;
    border:1px solid #243352;
    border-radius:16px;
    background:#131D33;
}

[data-theme="night"] .night-mini-card strong {
    display:block;
    margin-top:6px;
    font:600 18px 'Space Grotesk',sans-serif;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

[data-theme="night"] .night-income-card strong { color:#3FE0C5; }
[data-theme="night"] .night-expense-card strong { color:#FF8570; }

[data-theme="night"] .night-quick-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:9px;
    margin-top:9px;
}

[data-theme="night"] .night-quick-card {
    padding:12px 14px;
    background:#101A2E;
}

[data-theme="night"] .night-quick-card strong {
    display:block;
    margin-top:5px;
    font:600 14px 'Space Grotesk',sans-serif;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

[data-theme="night"] .night-section {
    margin-top:16px;
    padding:17px 16px 15px;
    border:1px solid #243352;
    border-radius:18px;
    background:#131D33;
}

[data-theme="night"] .night-section-head {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    margin-bottom:16px;
}

[data-theme="night"] .night-section h2 {
    margin:3px 0 0;
    font:600 16px 'Space Grotesk',sans-serif;
}

[data-theme="night"] .night-pill-toggle {
    display:flex;
    flex-wrap:nowrap;
    gap:2px;
    padding:3px;
    border:1px solid #243352;
    border-radius:16px;
    background:#0F182A;
}

[data-theme="night"] .night-pill-toggle button {
    border:0;
    border-radius:12px;
    padding:6px 8px;
    background:transparent;
    color:#8C9AC2;
    font:600 9px 'Manrope',sans-serif;
}

[data-theme="night"] .night-pill-toggle button.active {
    background:rgba(63,224,197,.13);
    color:#3FE0C5;
}

[data-theme="night"] .night-trend-wrap {
    position:relative;
    padding-top:26px;
}

[data-theme="night"] .night-trend {
    display:flex;
    align-items:stretch;
    gap:3px;
    height:105px;
}

[data-theme="night"] .night-trend-bar {
    position:relative;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    flex:1;
    min-width:2px;
    height:100%;
    padding:0;
    border:0;
    background:transparent;
}

[data-theme="night"] .night-trend-bar i {
    display:block;
    width:100%;
    min-height:3px;
    height:var(--night-bar);
    border-radius:4px 4px 2px 2px;
    background:#243352;
    transition:height .22s ease,background .18s ease,box-shadow .18s ease;
}

[data-theme="night"] .night-trend-bar.selected i {
    background:linear-gradient(180deg,#3FE0C5,rgba(63,224,197,.28));
    box-shadow:0 0 18px rgba(63,224,197,.16);
}

[data-theme="night"] .night-trend-bar.negative.selected i {
    background:linear-gradient(180deg,#FF8570,rgba(255,133,112,.25));
    box-shadow:0 0 18px rgba(255,133,112,.14);
}

[data-theme="night"] .night-trend-axis {
    position:relative;
    height:17px;
    margin-top:7px;
    border-top:1px solid #243352;
}

[data-theme="night"] .night-trend-axis span {
    position:absolute;
    top:5px;
    transform:translateX(-50%);
    color:#64749A;
    font-size:8px;
}

[data-theme="night"] .night-chart-tooltip {
    position:absolute;
    z-index:5;
    top:0;
    display:none;
    min-width:92px;
    padding:7px 9px;
    border:1px solid #2C3E62;
    border-radius:10px;
    background:rgba(12,18,32,.94);
    box-shadow:0 12px 28px rgba(0,0,0,.28);
    backdrop-filter:blur(12px);
}

[data-theme="night"] .night-chart-tooltip.show { display:flex; flex-direction:column; }
[data-theme="night"] .night-chart-tooltip small { color:#8C9AC2; font-size:8px; }
[data-theme="night"] .night-chart-tooltip strong { margin-top:2px; font:600 11px 'Space Grotesk'; }

[data-theme="night"] .night-trend-stats {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    margin-top:13px;
}

[data-theme="night"] .night-trend-stats > div {
    padding:11px 12px;
    border:1px solid #243352;
    border-radius:13px;
    background:#101A2E;
}

[data-theme="night"] .night-trend-stats strong {
    display:block;
    margin-top:5px;
    font:600 13px 'Space Grotesk';
}

[data-theme="night"] .night-category-body {
    display:grid;
    grid-template-columns:122px minmax(0,1fr);
    gap:18px;
    align-items:center;
}

[data-theme="night"] .night-donut {
    position:relative;
    width:122px;
    height:122px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:conic-gradient(#243352 0 360deg);
    box-shadow:0 0 0 1px #243352,0 0 30px rgba(63,224,197,.07);
}

[data-theme="night"] .night-donut::after {
    content:"";
    position:absolute;
    inset:25px;
    border-radius:50%;
    background:#131D33;
}

[data-theme="night"] .night-donut-hole {
    position:relative;
    z-index:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    max-width:75px;
    text-align:center;
}

[data-theme="night"] .night-donut-hole strong {
    max-width:75px;
    overflow:hidden;
    text-overflow:ellipsis;
    font:600 12px 'Space Grotesk';
    white-space:nowrap;
}

[data-theme="night"] .night-donut-hole span {
    margin-top:3px;
    color:#8C9AC2;
    font-size:8px;
    text-transform:uppercase;
}

[data-theme="night"] .night-legend {
    min-width:0;
}

[data-theme="night"] .night-legend-row {
    display:grid;
    grid-template-columns:8px minmax(0,1fr) auto;
    align-items:center;
    gap:8px;
    min-height:31px;
    border-bottom:1px solid rgba(36,51,82,.55);
}

[data-theme="night"] .night-legend-row:last-child { border-bottom:0; }

[data-theme="night"] .night-legend-dot {
    width:8px;
    height:8px;
    border-radius:3px;
}

[data-theme="night"] .night-legend-copy {
    min-width:0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:6px;
}

[data-theme="night"] .night-legend-copy strong {
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    color:#EAF0FF;
    font-size:10px;
    white-space:nowrap;
}

[data-theme="night"] .night-legend-copy small {
    flex:none;
    color:#8C9AC2;
    font-size:8px;
}

[data-theme="night"] .night-legend-value {
    color:#8C9AC2;
    font:500 9px 'Space Grotesk';
    white-space:nowrap;
}

[data-theme="night"] .night-empty {
    color:#8C9AC2;
    font-size:11px;
}

/* Остальные вкладки Night: те же функции, но визуально цельные с главной */
[data-theme="night"] #expensesView,
[data-theme="night"] #paymentsView,
[data-theme="night"] #settingsView {
    color:#EAF0FF;
}

[data-theme="night"] .operations-filters,
[data-theme="night"] .settings-block,
[data-theme="night"] .recurring-summary > div,
[data-theme="night"] .recurring-payment,
[data-theme="night"] .operations-summary-item,
[data-theme="night"] .sheet {
    background:#131D33;
    border-color:#243352;
}

[data-theme="night"] .operations-segment,
[data-theme="night"] .operations-search,
[data-theme="night"] .operations-category-select,
[data-theme="night"] .field input,
[data-theme="night"] .field select,
[data-theme="night"] .toggle-row {
    background:#101A2E;
    border-color:#243352;
    color:#EAF0FF;
}

[data-theme="night"] .nav {
    background:transparent;
    border:0;
    padding:0 16px 14px;
}

[data-theme="night"] .nav-inner {
    max-width:488px;
    margin:0 auto;
    padding:6px;
    border:1px solid #243352;
    border-radius:20px;
    background:rgba(19,29,51,.96);
    box-shadow:0 18px 48px -22px rgba(0,0,0,.8);
    backdrop-filter:blur(18px);
}

[data-theme="night"] .nav-item {
    border-radius:14px;
    color:#8C9AC2;
}

[data-theme="night"] .nav-item.active {
    background:linear-gradient(135deg,#3FE0C5,#279A88);
    color:#06251E;
    font-weight:750;
}

@media (max-width:390px) {
    [data-theme="night"] .app { padding-left:13px; padding-right:13px; }
    [data-theme="night"] .night-ring-card { grid-template-columns:102px minmax(0,1fr); gap:14px; padding:18px; }
    [data-theme="night"] .night-ring { width:102px; height:102px; }
    [data-theme="night"] .night-category-body { grid-template-columns:105px minmax(0,1fr); gap:12px; }
    [data-theme="night"] .night-donut { width:105px; height:105px; }
    [data-theme="night"] .night-donut::after { inset:22px; }
    [data-theme="night"] .night-pill-toggle button { padding:6px 6px; font-size:8px; }
}


/* =========================================================
   NIGHT — SOFT NEON DONUT
========================================================= */

[data-theme="night"] .category-donut {
    filter:
        drop-shadow(0 0 5px rgba(63, 224, 197, .16))
        drop-shadow(0 0 12px rgba(113, 132, 255, .08));

    transition:
        filter .22s ease,
        transform .22s ease;
}

/* внутренний круг чуть глубже */
[data-theme="night"] .category-donut-hole {
    background:
        radial-gradient(
            circle at 45% 35%,
            #172541 0%,
            #101a2e 65%,
            #0d1627 100%
        );

    box-shadow:
        inset 0 0 0 1px rgba(120, 220, 255, .06),
        0 0 16px rgba(0, 0, 0, .28);
}

/* сумма внутри */
[data-theme="night"] .category-donut-total {
    color: #f2f7ff;

    text-shadow:
        0 0 10px rgba(113, 225, 255, .12);
}

/* точки легенды тоже немного светятся */
[data-theme="night"] .donut-legend-dot {
    box-shadow:
        0 0 5px currentColor,
        0 0 9px rgba(120, 220, 255, .10);
}

/* при нажатии на круг чуть усиливаем glow */
[data-theme="night"] .category-donut:active {
    transform: scale(.985);

    filter:
        drop-shadow(0 0 7px rgba(63, 224, 197, .24))
        drop-shadow(0 0 16px rgba(113, 132, 255, .14));
}


/* NIGHT — чуть более неоновая легенда */

[data-theme="night"] .donut-legend-row {
    border-color: rgba(125, 160, 210, .08);
}

[data-theme="night"] .donut-legend-row strong {
    color: #edf5ff;
}

[data-theme="night"] .donut-legend-name {
    color: #dbe7f8;
}



/* =========================================================
   NIGHT V1 — NEON DONUT
========================================================= */

[data-theme="night"] .night-donut {
    isolation: isolate;

    box-shadow:
        0 0 0 1px rgba(91, 115, 165, .34),
        0 0 12px rgba(66, 232, 207, .10),
        0 0 26px rgba(91, 112, 255, .08);

    filter:
        saturate(1.14)
        brightness(1.035)
        drop-shadow(0 0 4px rgba(61, 231, 207, .18))
        drop-shadow(0 0 9px rgba(116, 130, 255, .10));

    transition:
        filter .2s ease,
        transform .2s ease;
}

/* Мягкое разноцветное сияние за кругом */
[data-theme="night"] .night-donut::before {
    content: "";
    position: absolute;
    inset: -9px;
    z-index: -1;
    border-radius: 50%;

    background:
        conic-gradient(
            from 10deg,
            rgba(62, 232, 207, .24),
            rgba(255, 188, 86, .16),
            rgba(124, 139, 255, .20),
            rgba(255, 120, 105, .17),
            rgba(62, 232, 207, .24)
        );

    filter: blur(13px);
    opacity: .58;
    pointer-events: none;
}

/* Центр диаграммы */
[data-theme="night"] .night-donut::after {
    background:
        radial-gradient(
            circle at 42% 34%,
            #182845 0%,
            #131d33 50%,
            #0f192c 100%
        );

    box-shadow:
        inset 0 0 0 1px rgba(135, 165, 220, .08),
        inset 0 0 20px rgba(45, 75, 125, .12),
        0 0 12px rgba(5, 10, 22, .45);
}

/* Сумма */
[data-theme="night"] .night-donut-hole strong {
    color: #f4f8ff;

    text-shadow:
        0 0 8px rgba(116, 224, 255, .12);
}

/* Точки категорий */
[data-theme="night"] .night-legend-dot {
    box-shadow:
        0 0 5px var(--night-dot-color, rgba(90, 220, 210, .30)),
        0 0 10px var(--night-dot-color, rgba(90, 220, 210, .14));

    border-radius: 50%;
}

/* Немного оживляем название категории */
[data-theme="night"] .night-legend-copy strong {
    color: #eef4ff;
}

/* Процент чуть заметнее */
[data-theme="night"] .night-legend-copy small {
    color: #9baad2;
}

/* Нажатие */
[data-theme="night"] .night-donut:active {
    transform: scale(.985);

    filter:
        saturate(1.2)
        brightness(1.06)
        drop-shadow(0 0 6px rgba(61, 231, 207, .24))
        drop-shadow(0 0 13px rgba(116, 130, 255, .15));
}


/* =========================================================
   CARD V1 — FULL LAYOUT
========================================================= */

.card-overview {
    display: none;
}

[data-theme="card"] .card-overview {
    display: block;
}

/* скрываем generic главную только для Card */
[data-theme="card"] #overviewView > .top,
[data-theme="card"] #overviewView > .hero,
[data-theme="card"] #overviewView > .income-expense-summary,
[data-theme="card"] #overviewView > .metrics,
[data-theme="card"] #overviewView > .section {
    display: none !important;
}

[data-theme="card"] #overviewView > .card-overview {
    display: block !important;
}


/* TOP */

[data-theme="card"] .card-theme-top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    margin: 5px 2px 22px;
}

[data-theme="card"] .card-theme-eyebrow {
    color: #8f826e;

    font-size: 9px;
    letter-spacing: .15em;
    text-transform: uppercase;
}

[data-theme="card"] .card-theme-brand {
    margin-top: 3px;

    color: #efe8da;

    font: italic 24px/1.1
        "Cormorant",
        Georgia,
        serif;
}

[data-theme="card"] .card-theme-month {
    color: #a79c88;

    font-size: 10px;
    text-transform: capitalize;
}


/* BANK CARD */

[data-theme="card"] .card-bank-stack {
    position: relative;

    height: 220px;
    margin-bottom: 22px;
}

[data-theme="card"] .card-bank-back {
    position: absolute;
    inset: 14px 7px 0;

    border-radius: 22px;

    background: #1a1712;

    transform: rotate(2.1deg);
    opacity: .65;
}

[data-theme="card"] .card-bank-main {
    position: absolute;
    inset: 0;

    overflow: hidden;

    padding: 22px;

    border: 1px solid #3b3225;
    border-radius: 22px;

    background:
        radial-gradient(
            circle at 10% 0%,
            rgba(232,200,160,.10),
            transparent 36%
        ),
        linear-gradient(
            125deg,
            #2d281e 0%,
            #1e1a14 48%,
            #251f17 100%
        );

    box-shadow:
        0 30px 65px -28px
        rgba(0,0,0,.9);
}

[data-theme="card"] .card-bank-sheen {
    position: absolute;

    top: -75%;
    left: -45%;

    width: 80%;
    height: 250%;

    pointer-events: none;

    background:
        linear-gradient(
            115deg,
            transparent 30%,
            rgba(232,200,160,.16) 48%,
            transparent 64%
        );

    transform: rotate(8deg);

    animation:
        cardCopperSweep
        6s ease-in-out
        infinite;
}

@keyframes cardCopperSweep {
    0% {
        transform:
            translateX(-45%)
            rotate(8deg);
    }

    45% {
        transform:
            translateX(170%)
            rotate(8deg);
    }

    100% {
        transform:
            translateX(170%)
            rotate(8deg);
    }
}

[data-theme="card"] .card-bank-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

[data-theme="card"] .card-bank-chip {
    position: relative;

    width: 39px;
    height: 29px;

    border-radius: 6px;

    background:
        linear-gradient(
            140deg,
            #f0d4ae,
            #c89768 65%,
            #886547
        );

    box-shadow:
        0 3px 9px
        rgba(0,0,0,.18);
}

[data-theme="card"] .card-bank-chip::before {
    content: "";

    position: absolute;
    inset: 5px;

    border:
        1px solid
        rgba(40,26,12,.35);

    border-radius: 3px;
}

[data-theme="card"] .card-bank-logo {
    color: #e8c8a0;

    font: italic 15px
        "Cormorant",
        Georgia,
        serif;
}

[data-theme="card"] .card-bank-balance {
    margin-top: 27px;
}

[data-theme="card"] .card-bank-balance span {
    display: block;

    color: #a79c88;

    font-size: 9px;
    letter-spacing: .14em;
    text-transform: uppercase;
}

[data-theme="card"] .card-bank-balance strong {
    display: block;

    margin-top: 5px;

    color: #efe8da;

    font: 600 38px/1
        "Cormorant",
        Georgia,
        serif;
}

[data-theme="card"] .card-bank-bottom {
    position: absolute;

    left: 22px;
    right: 22px;
    bottom: 19px;

    display: flex;
    justify-content: space-between;
    align-items: flex-end;

    color: #998d79;

    font-size: 10px;
    letter-spacing: .12em;
}

[data-theme="card"] .card-bank-bottom span:last-child {
    letter-spacing: normal;
    text-transform: capitalize;
}


/* INCOME / EXPENSE */

[data-theme="card"] .card-theme-badges {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 10px;

    margin-bottom: 10px;
}

[data-theme="card"] .card-theme-badge {
    padding: 14px 16px;

    border: 1px solid #332c22;
    border-radius: 16px;

    background:
        linear-gradient(
            180deg,
            #26211a,
            #1d1914
        );
}

[data-theme="card"] .card-theme-badge span {
    display: block;

    color: #a79c88;

    font-size: 9px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

[data-theme="card"] .card-theme-badge strong {
    display: block;

    margin-top: 5px;

    font: 600 22px
        "Cormorant",
        Georgia,
        serif;
}

[data-theme="card"] .card-theme-badge.income strong {
    color: #99b19c;
}

[data-theme="card"] .card-theme-badge.expense strong {
    color: #ca8264;
}


/* MINI METRICS */

[data-theme="card"] .card-theme-mini-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 8px;
}

[data-theme="card"] .card-theme-mini-grid > div {
    padding: 11px 13px;

    border-bottom:
        1px solid
        #332c22;
}

[data-theme="card"] .card-theme-mini-grid span {
    display: block;

    color: #8f826f;

    font-size: 9px;
}

[data-theme="card"] .card-theme-mini-grid strong {
    display: block;

    margin-top: 4px;

    color: #e4dccd;

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


/* SECTIONS */

[data-theme="card"] .card-theme-section {
    margin-top: 31px;
}

[data-theme="card"] .card-theme-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 12px;

    margin-bottom: 15px;
}

[data-theme="card"] .card-theme-section-head span {
    color: #8f826f;

    font-size: 8px;
    letter-spacing: .12em;
    text-transform: uppercase;
}

[data-theme="card"] .card-theme-section-head h2 {
    margin-top: 3px;

    color: #efe8da;

    font: italic 21px/1
        "Cormorant",
        Georgia,
        serif;
}


/* TOGGLE */

[data-theme="card"] .card-theme-toggle {
    display: flex;

    padding: 3px;

    border: 1px solid #332c22;
    border-radius: 18px;

    background: #1c1813;
}

[data-theme="card"] .card-theme-toggle button {
    border: 0;
    border-radius: 14px;

    padding: 6px 8px;

    background: transparent;
    color: #8f826f;

    font-size: 8px;
}

[data-theme="card"] .card-theme-toggle button.active {
    background:
        linear-gradient(
            140deg,
            #e8c8a0,
            #c89768
        );

    color: #1a140c;

    font-weight: 700;
}


/* SPARK */

[data-theme="card"] .card-spark-wrap {
    position: relative;

    padding: 16px 13px 12px;

    border: 1px solid #332c22;
    border-radius: 17px;

    background:
        linear-gradient(
            180deg,
            #211c16,
            #191611
        );
}

[data-theme="card"] .card-spark {
    display: flex;
    align-items: flex-end;

    gap: 4px;

    height: 92px;
}

[data-theme="card"] .card-spark-item {
    flex: 1;

    height: 100%;

    display: flex;
    align-items: flex-end;

    border: 0;
    padding: 0;

    background: transparent;
}

[data-theme="card"] .card-spark-item i {
    display: block;

    width: 100%;
    height: var(--spark-height);

    min-height: 3px;

    border-radius:
        3px 3px 1px 1px;

    background: #42382b;

    transition:
        background .18s ease,
        box-shadow .18s ease;
}

[data-theme="card"] .card-spark-item.selected i {
    background:
        linear-gradient(
            180deg,
            #edcfaa,
            #c89768
        );

    box-shadow:
        0 0 9px
        rgba(200,151,104,.18);
}

[data-theme="card"] .card-spark-item.negative i {
    background: #8c5744;
}

[data-theme="card"] .card-spark-tooltip {
    position: absolute;
    z-index: 5;

    top: 8px;

    display: none;

    min-width: 92px;

    padding: 7px 9px;

    border: 1px solid #493d2d;
    border-radius: 10px;

    background: rgba(20,17,13,.96);

    box-shadow:
        0 8px 24px
        rgba(0,0,0,.35);
}

[data-theme="card"] .card-spark-tooltip.show {
    display: block;
}

[data-theme="card"] .card-spark-tooltip small {
    display: block;

    color: #938672;

    font-size: 8px;
}

[data-theme="card"] .card-spark-tooltip strong {
    display: block;

    margin-top: 3px;

    color: #efe8da;

    font: 600 14px
        "Cormorant",
        Georgia,
        serif;
}


/* CATEGORIES */

[data-theme="card"] .card-theme-categories {
    border-top:
        1px solid
        #332c22;
}

[data-theme="card"] .card-theme-cat-row {
    display: flex;
    align-items: center;

    gap: 11px;

    padding: 12px 2px;

    border-bottom:
        1px solid
        #332c22;
}

[data-theme="card"] .card-theme-cat-icon {
    width: 34px;
    height: 34px;

    flex: none;

    display: grid;
    place-items: center;

    border: 1px solid #3b3227;
    border-radius: 10px;

    background: #26211a;
}

[data-theme="card"] .card-theme-cat-copy {
    flex: 1;
    min-width: 0;
}

[data-theme="card"] .card-theme-cat-name {
    color: #e6ded0;

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

[data-theme="card"] .card-theme-cat-meter {
    height: 3px;

    margin-top: 6px;

    overflow: hidden;

    border-radius: 3px;

    background: #332c22;
}

[data-theme="card"] .card-theme-cat-meter i {
    display: block;

    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            #a77652,
            #d5aa7d
        );
}

[data-theme="card"] .card-theme-cat-value {
    flex: none;

    min-width: 78px;

    color: #efe8da;

    text-align: right;

    font: 600 15px
        "Cormorant",
        Georgia,
        serif;
}

[data-theme="card"] .card-theme-cat-value small {
    display: block;

    margin-top: 2px;

    color: #8f826f;

    font: 500 8px
        "Outfit",
        sans-serif;
}

[data-theme="card"] .card-theme-empty {
    padding: 18px 2px;

    color: #8f826f;

    font-size: 11px;
}


/* OTHER TABS IN CARD THEME */

[data-theme="card"] #expensesView,
[data-theme="card"] #paymentsView,
[data-theme="card"] #settingsView {
    color: #efe8da;
}

[data-theme="card"] .operations-filters,
[data-theme="card"] .settings-block,
[data-theme="card"] .recurring-summary > div,
[data-theme="card"] .recurring-payment,
[data-theme="card"] .operations-summary-item,
[data-theme="card"] .sheet {
    background: #211c16;
    border-color: #332c22;
}

[data-theme="card"] .operations-segment,
[data-theme="card"] .operations-search,
[data-theme="card"] .operations-category-select,
[data-theme="card"] .field input,
[data-theme="card"] .field select,
[data-theme="card"] .toggle-row {
    background: #191611;
    border-color: #332c22;
    color: #efe8da;
}

[data-theme="card"] .nav {
    background: transparent;

    border: 0;

    padding:
        0 16px
        14px;
}

[data-theme="card"] .nav-inner {
    max-width: 488px;

    margin: 0 auto;

    padding: 6px;

    border: 1px solid #332c22;
    border-radius: 20px;

    background:
        rgba(38,33,26,.97);

    box-shadow:
        0 20px 45px -20px
        rgba(0,0,0,.75);
}

[data-theme="card"] .nav-item {
    border-radius: 14px;
    color: #9c907d;
}

[data-theme="card"] .nav-item.active {
    background:
        linear-gradient(
            140deg,
            #e8c8a0,
            #c89768
        );

    color: #1a140c;

    font-weight: 750;
}


@media (max-width: 390px) {
    [data-theme="card"] .card-bank-stack {
        height: 205px;
    }

    [data-theme="card"] .card-bank-balance strong {
        font-size: 34px;
    }

    [data-theme="card"] .card-theme-toggle button {
        padding: 6px 6px;
        font-size: 7px;
    }
}


/* =========================================================
   CARD — PREMIUM DONUT
========================================================= */

[data-theme="card"] .card-theme-categories {
    border-top: 0;
}

[data-theme="card"] .card-donut-layout {
    display: grid;
    grid-template-columns:
        128px
        minmax(0, 1fr);

    gap: 18px;

    align-items: center;

    padding:
        14px 14px;

    border:
        1px solid
        #332c22;

    border-radius: 18px;

    background:
        radial-gradient(
            circle at 0% 0%,
            rgba(200,151,104,.06),
            transparent 42%
        ),
        linear-gradient(
            180deg,
            #211c16,
            #191611
        );
}


/* сам круг */

[data-theme="card"] .card-donut {
    position: relative;

    width: 128px;
    height: 128px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    box-shadow:
        0 0 0 1px
        rgba(232,200,160,.10),
        0 10px 28px
        rgba(0,0,0,.28);

    filter:
        saturate(.96)
        brightness(1.03);
}


/* внутренняя металлическая окантовка */

[data-theme="card"] .card-donut::before {
    content: "";

    position: absolute;
    inset: -1px;

    border-radius: 50%;

    pointer-events: none;

    box-shadow:
        inset 0 0 0 1px
        rgba(240,212,174,.12),
        inset 0 0 14px
        rgba(0,0,0,.14);
}


/* центр */

[data-theme="card"] .card-donut-hole {
    position: absolute;

    inset: 26px;

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

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 40% 30%,
            #2b251c,
            #1d1914 65%,
            #17130f
        );

    box-shadow:
        0 0 0 1px
        rgba(232,200,160,.09),
        inset 0 0 15px
        rgba(0,0,0,.28);
}

[data-theme="card"] .card-donut-hole strong {
    max-width: 76px;

    overflow: hidden;

    color: #f0e8db;

    font:
        600 14px
        "Cormorant",
        Georgia,
        serif;

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

[data-theme="card"] .card-donut-hole span {
    margin-top: 3px;

    color: #8f826f;

    font-size: 8px;
    letter-spacing: .08em;

    text-transform: uppercase;
}


/* LEGEND */

[data-theme="card"] .card-donut-legend {
    min-width: 0;
}

[data-theme="card"] .card-donut-legend-row {
    display: grid;

    grid-template-columns:
        8px
        minmax(0, 1fr)
        auto;

    gap: 8px;

    align-items: center;

    min-height: 31px;

    border-bottom:
        1px solid
        rgba(73,61,45,.58);
}

[data-theme="card"] .card-donut-legend-row:last-child {
    border-bottom: 0;
}

[data-theme="card"] .card-donut-dot {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    box-shadow:
        0 0 6px
        color-mix(
            in srgb,
            var(--card-dot)
            28%,
            transparent
        );
}

[data-theme="card"] .card-donut-copy {
    min-width: 0;

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

    gap: 5px;
}

[data-theme="card"] .card-donut-copy strong {
    min-width: 0;

    overflow: hidden;

    color: #e7ded0;

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

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

[data-theme="card"] .card-donut-copy small {
    flex: none;

    color: #938672;

    font-size: 8px;
}

[data-theme="card"] .card-donut-value {
    color: #a79c88;

    font:
        500 10px
        "Cormorant",
        Georgia,
        serif;

    white-space: nowrap;
}


/* лёгкая интерактивность */

[data-theme="card"] .card-donut {
    transition:
        transform .18s ease,
        filter .18s ease;
}

[data-theme="card"] .card-donut:active {
    transform: scale(.985);

    filter:
        saturate(1.02)
        brightness(1.06);
}


@media (max-width: 390px) {

    [data-theme="card"] .card-donut-layout {
        grid-template-columns:
            108px
            minmax(0, 1fr);

        gap: 12px;

        padding:
            13px 11px;
    }

    [data-theme="card"] .card-donut {
        width: 108px;
        height: 108px;
    }

    [data-theme="card"] .card-donut-hole {
        inset: 22px;
    }

    [data-theme="card"] .card-donut-hole strong {
        font-size: 12px;
    }

}


/* =========================================================
   LEDGER V1 — FULL PAPER LAYOUT
========================================================= */

.ledger-overview {
    display: none;
}

[data-theme="ledger"] .ledger-overview {
    display: block;
}

[data-theme="ledger"] #overviewView > .top,
[data-theme="ledger"] #overviewView > .hero,
[data-theme="ledger"] #overviewView > .income-expense-summary,
[data-theme="ledger"] #overviewView > .metrics,
[data-theme="ledger"] #overviewView > .section,
[data-theme="ledger"] #overviewView > .card-overview {
    display: none !important;
}

[data-theme="ledger"] #overviewView > .ledger-overview {
    display: block !important;
}


/* DOCUMENT HEADER */

[data-theme="ledger"] .ledger-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;

    padding-bottom: 11px;
    margin-bottom: 22px;

    border-bottom:
        1px dashed
        #bcb5a5;
}

[data-theme="ledger"] .ledger-doc-label {
    display: block;

    color: #6b6b62;

    font: 9px
        "JetBrains Mono",
        monospace;

    letter-spacing: .13em;
    text-transform: uppercase;
}

[data-theme="ledger"] .ledger-header strong {
    display: block;

    margin-top: 4px;

    color: #1f231f;

    font: 700 13px
        "JetBrains Mono",
        monospace;

    letter-spacing: .06em;
}

[data-theme="ledger"] .ledger-doc-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;

    gap: 2px;

    color: #686960;

    font: 8px
        "JetBrains Mono",
        monospace;

    text-transform: uppercase;
}


/* HERO */

[data-theme="ledger"] .ledger-hero {
    position: relative;

    padding:
        4px 0 18px;

    border-bottom:
        2px solid
        #1f231f;
}

[data-theme="ledger"] .ledger-hero > span {
    color: #66675f;

    font: 9px
        "JetBrains Mono",
        monospace;

    letter-spacing: .13em;
    text-transform: uppercase;
}

[data-theme="ledger"] .ledger-hero > strong {
    display: block;

    margin-top: 8px;

    color: #1f231f;

    font:
        500 46px/1
        "Fraunces",
        Georgia,
        serif;
}

[data-theme="ledger"] .ledger-stamp {
    position: absolute;

    right: 4px;
    top: -2px;

    width: 68px;
    height: 68px;

    display: grid;
    place-items: center;

    border:
        1.5px solid
        #8e3b2e;

    border-radius: 50%;

    color: #8e3b2e;

    font:
        700 8px/1.35
        "JetBrains Mono",
        monospace;

    text-align: center;
    letter-spacing: .08em;

    transform:
        rotate(-12deg);

    opacity: .68;
}

[data-theme="ledger"] .ledger-barcode {
    display: flex;
    align-items: flex-end;

    gap: 2px;

    height: 20px;

    margin-top: 14px;

    opacity: .48;
}

[data-theme="ledger"] .ledger-barcode i {
    display: block;

    width: 2px;

    background: #1f231f;
}

[data-theme="ledger"] .ledger-barcode i:nth-child(3n) {
    height: 18px;
}

[data-theme="ledger"] .ledger-barcode i:nth-child(3n+1) {
    height: 11px;
}

[data-theme="ledger"] .ledger-barcode i:nth-child(3n+2) {
    width: 3px;
    height: 15px;
}


/* SUMMARY */

[data-theme="ledger"] .ledger-summary-grid {
    display: grid;
    grid-template-columns:
        1fr 1fr;

    gap: 1px;

    margin-top: 1px;

    background:
        #c9c4b4;
}

[data-theme="ledger"] .ledger-summary-item {
    padding:
        14px 16px;

    background:
        #f7f5ef;
}

[data-theme="ledger"] .ledger-summary-item span {
    display: block;

    color: #65675f;

    font: 8px
        "JetBrains Mono",
        monospace;

    letter-spacing: .11em;
    text-transform: uppercase;
}

[data-theme="ledger"] .ledger-summary-item strong {
    display: block;

    margin-top: 6px;

    color: #1f231f;

    font: 600 16px
        "JetBrains Mono",
        monospace;
}

[data-theme="ledger"] .ledger-summary-item.ledger-income strong {
    color: #33513c;
}

[data-theme="ledger"] .ledger-summary-item.ledger-expense strong {
    color: #8e3b2e;
}


/* SECTION */

[data-theme="ledger"] .ledger-section {
    margin-top: 34px;
}

[data-theme="ledger"] .ledger-section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;

    gap: 12px;

    margin-bottom: 15px;
}

[data-theme="ledger"] .ledger-section-head span {
    color: #6c6c64;

    font: 8px
        "JetBrains Mono",
        monospace;

    letter-spacing: .11em;
    text-transform: uppercase;
}

[data-theme="ledger"] .ledger-section-head h2 {
    margin-top: 2px;

    color: #1f231f;

    font:
        500 17px
        "Fraunces",
        Georgia,
        serif;
}


/* TOGGLE */

[data-theme="ledger"] .ledger-toggle {
    display: flex;

    border:
        1px solid
        #c9c4b4;
}

[data-theme="ledger"] .ledger-toggle button {
    border: 0;
    border-right:
        1px solid
        #c9c4b4;

    padding: 6px 8px;

    background: #f7f5ef;
    color: #67695f;

    font: 7px
        "JetBrains Mono",
        monospace;

    text-transform: uppercase;
}

[data-theme="ledger"] .ledger-toggle button:last-child {
    border-right: 0;
}

[data-theme="ledger"] .ledger-toggle button.active {
    background: #1f231f;
    color: #f7f5ef;
}


/* BAR CHART */

[data-theme="ledger"] .ledger-chart-wrap {
    position: relative;

    padding-top: 5px;

    border-bottom:
        1px solid
        #c9c4b4;
}

[data-theme="ledger"] .ledger-chart {
    display: flex;
    align-items: flex-end;

    gap: 4px;

    height: 112px;
}

[data-theme="ledger"] .ledger-bar-item {
    flex: 1;

    height: 100%;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;

    gap: 5px;

    border: 0;
    padding: 0;

    background: transparent;
}

[data-theme="ledger"] .ledger-bar-item i {
    display: block;

    width: 100%;
    height: var(--ledger-bar);

    min-height: 2px;

    background: #5a5e56;

    opacity: .66;
}

[data-theme="ledger"] .ledger-bar-item.selected i {
    background: #8e3b2e;
    opacity: 1;
}

[data-theme="ledger"] .ledger-bar-item.negative i {
    background: #8e3b2e;
}

[data-theme="ledger"] .ledger-bar-item span {
    min-height: 9px;

    color: #77776e;

    font: 7px
        "JetBrains Mono",
        monospace;
}

[data-theme="ledger"] .ledger-chart-tooltip {
    position: absolute;
    z-index: 5;

    top: 0;

    display: none;

    min-width: 90px;

    padding: 6px 8px;

    border:
        1px solid
        #bdb6a5;

    background: #f7f5ef;
}

[data-theme="ledger"] .ledger-chart-tooltip.show {
    display: block;
}

[data-theme="ledger"] .ledger-chart-tooltip small {
    display: block;

    color: #696a62;

    font:
        7px
        "JetBrains Mono",
        monospace;
}

[data-theme="ledger"] .ledger-chart-tooltip strong {
    display: block;

    margin-top: 3px;

    color: #1f231f;

    font:
        600 11px
        "JetBrains Mono",
        monospace;
}


/* MINI STATS */

[data-theme="ledger"] .ledger-mini-stats {
    display: grid;
    grid-template-columns:
        1fr 1fr;

    gap: 1px;

    margin-top: 1px;

    background:
        #c9c4b4;
}

[data-theme="ledger"] .ledger-mini-stats > div {
    padding:
        10px 12px;

    background:
        #f7f5ef;
}

[data-theme="ledger"] .ledger-mini-stats span {
    display: block;

    color: #6b6c64;

    font:
        7px
        "JetBrains Mono",
        monospace;

    text-transform: uppercase;
}

[data-theme="ledger"] .ledger-mini-stats strong {
    display: block;

    margin-top: 4px;

    color: #1f231f;

    font:
        600 11px
        "JetBrains Mono",
        monospace;
}


/* DONUT */

[data-theme="ledger"] .ledger-category-body {
    padding:
        14px 0 0;
}

[data-theme="ledger"] .ledger-donut-layout {
    display: grid;

    grid-template-columns:
        124px
        minmax(0, 1fr);

    gap: 18px;

    align-items: center;
}

[data-theme="ledger"] .ledger-donut {
    position: relative;

    width: 124px;
    height: 124px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    box-shadow:
        0 0 0 1px
        rgba(31,35,31,.14);
}

[data-theme="ledger"] .ledger-donut-hole {
    position: absolute;

    inset: 27px;

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

    border-radius: 50%;

    background: #f7f5ef;

    box-shadow:
        0 0 0 1px
        rgba(31,35,31,.10);
}

[data-theme="ledger"] .ledger-donut-hole strong {
    max-width: 70px;

    overflow: hidden;

    color: #1f231f;

    font:
        600 11px
        "JetBrains Mono",
        monospace;

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

[data-theme="ledger"] .ledger-donut-hole span {
    margin-top: 3px;

    color: #6b6c64;

    font:
        6px
        "JetBrains Mono",
        monospace;

    letter-spacing: .09em;
}


/* LEDGER LEGEND */

[data-theme="ledger"] .ledger-legend {
    min-width: 0;

    border-top:
        1px dotted
        #c9c4b4;
}

[data-theme="ledger"] .ledger-legend-row {
    display: grid;

    grid-template-columns:
        18px
        5px
        minmax(0, 1fr)
        28px
        auto;

    gap: 6px;

    align-items: center;

    min-height: 29px;

    border-bottom:
        1px dotted
        #c9c4b4;
}

[data-theme="ledger"] .ledger-legend-index,
[data-theme="ledger"] .ledger-legend-pct {
    color: #77786f;

    font:
        7px
        "JetBrains Mono",
        monospace;
}

[data-theme="ledger"] .ledger-legend-mark {
    width: 5px;
    height: 12px;
}

[data-theme="ledger"] .ledger-legend-name {
    min-width: 0;

    overflow: hidden;

    color: #30332e;

    font:
        500 8px
        "JetBrains Mono",
        monospace;

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

[data-theme="ledger"] .ledger-legend-row strong {
    color: #1f231f;

    font:
        600 8px
        "JetBrains Mono",
        monospace;

    white-space: nowrap;
}

[data-theme="ledger"] .ledger-empty {
    padding: 16px 0;

    color: #686960;

    font:
        9px
        "JetBrains Mono",
        monospace;
}


/* OTHER VIEWS */

[data-theme="ledger"] #expensesView,
[data-theme="ledger"] #paymentsView,
[data-theme="ledger"] #settingsView {
    color: #1f231f;
}

[data-theme="ledger"] .operations-filters,
[data-theme="ledger"] .settings-block,
[data-theme="ledger"] .recurring-summary > div,
[data-theme="ledger"] .recurring-payment,
[data-theme="ledger"] .operations-summary-item,
[data-theme="ledger"] .sheet {
    border-radius: 2px;

    background: #f7f5ef;
    border-color: #c9c4b4;

    box-shadow: none;
}

[data-theme="ledger"] .nav {
    background: #1f231f;
}

[data-theme="ledger"] .nav-inner {
    border-radius: 0;
}

[data-theme="ledger"] .nav-item {
    border-radius: 0;

    color: #b7b6aa;

    font-family:
        "JetBrains Mono",
        monospace;

    text-transform: uppercase;
}

[data-theme="ledger"] .nav-item.active {
    background: #efede6;

    color: #1f231f;
}


@media (max-width: 390px) {

    [data-theme="ledger"] .ledger-hero > strong {
        font-size: 39px;
    }

    [data-theme="ledger"] .ledger-donut-layout {
        grid-template-columns:
            105px
            minmax(0, 1fr);

        gap: 11px;
    }

    [data-theme="ledger"] .ledger-donut {
        width: 105px;
        height: 105px;
    }

    [data-theme="ledger"] .ledger-donut-hole {
        inset: 23px;
    }

    [data-theme="ledger"] .ledger-toggle button {
        padding: 5px;
        font-size: 6px;
    }
}


/* =========================================================
   LEDGER V2 — VISUAL POLISH
========================================================= */

/* чуть шире и свободнее */
[data-theme="ledger"] .app {
    padding-left: 14px;
    padding-right: 14px;
}


/* HEADER */

[data-theme="ledger"] .ledger-header {
    margin-bottom: 18px;
    padding-bottom: 10px;
}

[data-theme="ledger"] .ledger-doc-label {
    font-size: 8px;
    letter-spacing: .16em;
}

[data-theme="ledger"] .ledger-header strong {
    margin-top: 5px;
    font-size: 15px;
    letter-spacing: .08em;
}

[data-theme="ledger"] .ledger-doc-meta {
    gap: 3px;
    font-size: 8px;
}


/* HERO / BALANCE */

[data-theme="ledger"] .ledger-hero {
    padding: 8px 0 20px;
}

[data-theme="ledger"] .ledger-hero > span {
    font-size: 9px;
    letter-spacing: .16em;
}

[data-theme="ledger"] .ledger-hero > strong {
    margin-top: 8px;

    font-size: 50px;
    line-height: .95;

    letter-spacing: -.03em;
}

[data-theme="ledger"] .ledger-stamp {
    right: 8px;
    top: 1px;

    width: 72px;
    height: 72px;

    font-size: 8px;
}

[data-theme="ledger"] .ledger-barcode {
    margin-top: 16px;
    height: 22px;
}


/* SUMMARY GRID */

[data-theme="ledger"] .ledger-summary-grid {
    margin-top: 12px;

    border:
        1px solid
        #c9c4b4;

    background: transparent;

    gap: 0;
}

[data-theme="ledger"] .ledger-summary-item {
    min-height: 76px;

    padding: 15px 14px;

    border-right:
        1px solid
        #c9c4b4;

    border-bottom:
        1px solid
        #c9c4b4;

    background:
        rgba(247,245,239,.92);
}

[data-theme="ledger"] .ledger-summary-item:nth-child(2n) {
    border-right: 0;
}

[data-theme="ledger"] .ledger-summary-item:nth-last-child(-n+2) {
    border-bottom: 0;
}

[data-theme="ledger"] .ledger-summary-item span {
    font-size: 8px;
}

[data-theme="ledger"] .ledger-summary-item strong {
    margin-top: 9px;

    font-size: 18px;
    line-height: 1.1;
}


/* SECTION */

[data-theme="ledger"] .ledger-section {
    margin-top: 30px;
}

[data-theme="ledger"] .ledger-section-head {
    align-items: flex-start;

    margin-bottom: 14px;
}

[data-theme="ledger"] .ledger-section-head span {
    font-size: 8px;
}

[data-theme="ledger"] .ledger-section-head h2 {
    margin-top: 4px;

    font-size: 22px;
    line-height: 1.05;
}


/* TOGGLE — нормальные кнопки */

[data-theme="ledger"] .ledger-toggle {
    border-radius: 2px;

    overflow: hidden;
}

[data-theme="ledger"] .ledger-toggle button {
    min-height: 30px;

    padding: 7px 9px;

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

    cursor: pointer;
}


/* CHART — выше и визуальнее */

[data-theme="ledger"] .ledger-chart-wrap {
    padding:
        14px 8px
        8px;

    border:
        1px solid
        #c9c4b4;

    background:
        rgba(247,245,239,.72);
}

[data-theme="ledger"] .ledger-chart {
    height: 145px;
    gap: 5px;
}

[data-theme="ledger"] .ledger-bar-item {
    gap: 7px;
}

[data-theme="ledger"] .ledger-bar-item i {
    min-height: 3px;

    background:
        #6b7169;

    opacity: .55;

    transition:
        height .2s ease,
        background .2s ease,
        opacity .2s ease;
}

[data-theme="ledger"] .ledger-bar-item.selected i {
    background:
        #8e3b2e;

    opacity: 1;
}

[data-theme="ledger"] .ledger-bar-item span {
    font-size: 7px;
}


/* tooltip */

[data-theme="ledger"] .ledger-chart-tooltip {
    top: 7px;

    min-width: 104px;

    padding: 8px 9px;

    box-shadow:
        0 8px 18px
        rgba(31,35,31,.08);
}

[data-theme="ledger"] .ledger-chart-tooltip small {
    font-size: 7px;
}

[data-theme="ledger"] .ledger-chart-tooltip strong {
    margin-top: 4px;

    font-size: 12px;
}


/* MINI STATS */

[data-theme="ledger"] .ledger-mini-stats {
    margin-top: 12px;

    gap: 0;

    border:
        1px solid
        #c9c4b4;

    background: transparent;
}

[data-theme="ledger"] .ledger-mini-stats > div {
    min-height: 64px;

    padding: 12px;

    border-right:
        1px solid
        #c9c4b4;

    border-bottom:
        1px solid
        #c9c4b4;

    background:
        rgba(247,245,239,.88);
}

[data-theme="ledger"] .ledger-mini-stats > div:nth-child(2n) {
    border-right: 0;
}

[data-theme="ledger"] .ledger-mini-stats > div:nth-last-child(-n+2) {
    border-bottom: 0;
}

[data-theme="ledger"] .ledger-mini-stats span {
    font-size: 7px;
}

[data-theme="ledger"] .ledger-mini-stats strong {
    margin-top: 6px;

    font-size: 12px;
}


/* CATEGORY SECTION */

[data-theme="ledger"] .ledger-category-section {
    padding-bottom: 4px;
}

[data-theme="ledger"] .ledger-category-body {
    padding-top: 8px;
}


/* DONUT — делаем заметнее */

[data-theme="ledger"] .ledger-donut-layout {
    grid-template-columns:
        138px
        minmax(0, 1fr);

    gap: 20px;

    align-items: center;

    padding:
        14px 10px;

    border:
        1px solid
        #c9c4b4;

    background:
        rgba(247,245,239,.72);
}

[data-theme="ledger"] .ledger-donut {
    width: 138px;
    height: 138px;

    box-shadow:
        0 0 0 1px
        rgba(31,35,31,.16),
        0 8px 16px
        rgba(31,35,31,.05);
}

[data-theme="ledger"] .ledger-donut-hole {
    inset: 30px;

    background:
        #f7f5ef;

    box-shadow:
        0 0 0 1px
        rgba(31,35,31,.10);
}

[data-theme="ledger"] .ledger-donut-hole strong {
    max-width: 82px;

    font-size: 12px;
}

[data-theme="ledger"] .ledger-donut-hole span {
    margin-top: 4px;

    font-size: 6px;
}


/* LEGEND */

[data-theme="ledger"] .ledger-legend {
    border-top: 0;
}

[data-theme="ledger"] .ledger-legend-row {
    min-height: 32px;

    grid-template-columns:
        20px
        5px
        minmax(0, 1fr)
        30px
        auto;

    gap: 6px;
}

[data-theme="ledger"] .ledger-legend-index {
    font-size: 7px;
}

[data-theme="ledger"] .ledger-legend-mark {
    width: 5px;
    height: 14px;
}

[data-theme="ledger"] .ledger-legend-name {
    font-size: 8px;
}

[data-theme="ledger"] .ledger-legend-pct {
    font-size: 7px;
}

[data-theme="ledger"] .ledger-legend-row strong {
    font-size: 8px;
}


/* NAV — меньше ощущения "чёрной полосы" */

[data-theme="ledger"] .nav {
    background:
        rgba(31,35,31,.98);

    border-top:
        1px solid
        rgba(255,255,255,.04);
}

[data-theme="ledger"] .nav-inner {
    padding: 5px 4px;
}

[data-theme="ledger"] .nav-item {
    min-height: 54px;

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

    gap: 3px;

    font-size: 9px;
}

[data-theme="ledger"] .nav-item.active {
    background:
        #efede6;

    color: #1f231f;
}


/* MOBILE */

@media (max-width: 390px) {

    [data-theme="ledger"] .app {
        padding-left: 10px;
        padding-right: 10px;
    }

    [data-theme="ledger"] .ledger-hero > strong {
        font-size: 42px;
    }

    [data-theme="ledger"] .ledger-stamp {
        width: 64px;
        height: 64px;
    }

    [data-theme="ledger"] .ledger-section-head {
        gap: 8px;
    }

    [data-theme="ledger"] .ledger-section-head h2 {
        font-size: 20px;
    }

    [data-theme="ledger"] .ledger-toggle button {
        min-height: 28px;
        padding: 6px 6px;
        font-size: 6px;
    }

    [data-theme="ledger"] .ledger-chart {
        height: 132px;
        gap: 3px;
    }

    [data-theme="ledger"] .ledger-donut-layout {
        grid-template-columns:
            112px
            minmax(0, 1fr);

        gap: 12px;

        padding:
            12px 8px;
    }

    [data-theme="ledger"] .ledger-donut {
        width: 112px;
        height: 112px;
    }

    [data-theme="ledger"] .ledger-donut-hole {
        inset: 24px;
    }

    [data-theme="ledger"] .ledger-legend-row {
        grid-template-columns:
            14px
            4px
            minmax(0, 1fr)
            24px
            auto;

        gap: 4px;

        min-height: 29px;
    }

    [data-theme="ledger"] .ledger-legend-name,
    [data-theme="ledger"] .ledger-legend-row strong {
        font-size: 7px;
    }

}

/* =========================================================
   LEDGER V3 — FINAL LAYOUT
   ========================================================= */

[data-theme="ledger"] .ledger-overview {
    width: 100%;
    max-width: none;
    padding: 18px 16px 30px;
    box-sizing: border-box;
    overflow: hidden;
}

[data-theme="ledger"] .ledger-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 18px;
    padding: 0 0 11px;
}

[data-theme="ledger"] .ledger-header > div:first-child {
    min-width: 0;
}

[data-theme="ledger"] .ledger-doc-label {
    display: block;
    font-size: 7px;
    line-height: 1;
    letter-spacing: .18em;
}

[data-theme="ledger"] .ledger-header strong {
    display: block;
    margin-top: 6px;
    font-size: 15px;
    line-height: 1;
    white-space: nowrap;
}

[data-theme="ledger"] .ledger-doc-meta {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    font-size: 7px;
    line-height: 1.1;
}


/* HERO */

[data-theme="ledger"] .ledger-hero {
    position: relative;
    min-height: 132px;
    padding: 10px 92px 15px 0;
    box-sizing: border-box;
    overflow: visible;
}

[data-theme="ledger"] .ledger-hero > span {
    display: block;
    font-size: 8px;
    line-height: 1;
    letter-spacing: .17em;
}

[data-theme="ledger"] .ledger-hero > strong {
    display: block;
    width: 100%;
    margin: 10px 0 0;
    font-size: clamp(34px, 10vw, 47px);
    line-height: .95;
    letter-spacing: -.035em;
    white-space: nowrap;
}

[data-theme="ledger"] .ledger-stamp {
    position: absolute;
    z-index: 2;
    top: 2px;
    right: 5px;
    width: 68px;
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    transform: rotate(-7deg);
    font-size: 7px;
    line-height: 1.35;
    text-align: center;
    pointer-events: none;
}

[data-theme="ledger"] .ledger-barcode {
    position: absolute;
    left: 0;
    bottom: 10px;
    width: 102px;
    height: 20px;
    margin: 0;
}


/* MAIN 2×2 GRID */

[data-theme="ledger"] .ledger-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    margin: 0;
    gap: 0;
    box-sizing: border-box;
}

[data-theme="ledger"] .ledger-summary-item {
    min-width: 0;
    min-height: 76px;
    padding: 13px 14px;
    box-sizing: border-box;
}

[data-theme="ledger"] .ledger-summary-item span {
    display: block;
    font-size: 7px;
    line-height: 1;
    letter-spacing: .13em;
}

[data-theme="ledger"] .ledger-summary-item strong {
    display: block;
    max-width: 100%;
    margin-top: 10px;
    font-size: clamp(15px, 4.5vw, 19px);
    line-height: 1.1;
    letter-spacing: -.02em;
    white-space: nowrap;
}


/* DYNAMICS */

[data-theme="ledger"] .ledger-section {
    width: 100%;
    margin-top: 27px;
    box-sizing: border-box;
}

[data-theme="ledger"] .ledger-section-head {
    display: block;
    width: 100%;
    margin-bottom: 12px;
}

[data-theme="ledger"] .ledger-section-head > div:first-child {
    width: 100%;
}

[data-theme="ledger"] .ledger-section-head span {
    display: block;
    font-size: 7px;
    line-height: 1;
    letter-spacing: .16em;
}

[data-theme="ledger"] .ledger-section-head h2 {
    margin: 5px 0 0;
    font-size: 21px;
    line-height: 1;
}

[data-theme="ledger"] .ledger-toggle {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
    margin-top: 11px;
    overflow: hidden;
}

[data-theme="ledger"] .ledger-toggle button {
    width: 100%;
    min-width: 0;
    min-height: 30px;
    padding: 7px 3px;
    font-size: 7px;
    line-height: 1;
}


/* category toggle has only 2 buttons */

[data-theme="ledger"] .ledger-category-section .ledger-toggle {
    grid-template-columns: repeat(2, 1fr);
}


/* CHART */

[data-theme="ledger"] .ledger-chart-wrap {
    position: relative;
    width: 100%;
    height: 174px;
    min-height: 174px;
    padding: 18px 10px 9px;
    box-sizing: border-box;
    overflow: hidden;
}

[data-theme="ledger"] .ledger-chart {
    position: relative;
    display: flex;
    align-items: flex-end;
    width: 100%;
    height: 138px !important;
    min-height: 138px;
    gap: 3px;
    overflow: visible;
}

[data-theme="ledger"] .ledger-bar-item {
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: stretch;
    gap: 5px;
}

[data-theme="ledger"] .ledger-bar-item i {
    display: block;
    width: 100%;
    min-height: 3px;
    max-height: 112px;
    flex: 0 0 auto;
}

[data-theme="ledger"] .ledger-bar-item span {
    flex: 0 0 11px;
    height: 11px;
    overflow: hidden;
    font-size: 6px;
    line-height: 11px;
    text-align: center;
}


/* TOOLTIP — никогда не вылезает вниз */

[data-theme="ledger"] .ledger-chart-tooltip {
    position: absolute !important;
    z-index: 10;
    top: 7px !important;
    bottom: auto !important;
    right: 7px;
    left: auto;
    min-width: 92px;
    max-width: 130px;
    margin: 0;
    padding: 7px 8px;
    box-sizing: border-box;
    transform: none !important;
}

[data-theme="ledger"] .ledger-chart-tooltip:empty {
    display: none !important;
}


/* SECONDARY METRICS */

[data-theme="ledger"] .ledger-mini-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    margin-top: 12px;
    gap: 0;
    box-sizing: border-box;
}

[data-theme="ledger"] .ledger-mini-stats > div {
    min-width: 0;
    min-height: 62px;
    padding: 11px 12px;
    box-sizing: border-box;
}

[data-theme="ledger"] .ledger-mini-stats span {
    display: block;
    font-size: 7px;
    line-height: 1.15;
}

[data-theme="ledger"] .ledger-mini-stats strong {
    display: block;
    margin-top: 7px;
    font-size: 12px;
    line-height: 1.1;
    white-space: nowrap;
}


/* CATEGORY / DONUT */

[data-theme="ledger"] .ledger-category-section {
    margin-top: 28px;
    padding-bottom: 10px;
}

[data-theme="ledger"] .ledger-category-body {
    width: 100%;
    padding: 0;
}

[data-theme="ledger"] .ledger-donut-layout {
    display: grid;
    grid-template-columns: 118px minmax(0, 1fr);
    align-items: center;
    width: 100%;
    gap: 14px;
    padding: 13px 10px;
    box-sizing: border-box;
}

[data-theme="ledger"] .ledger-donut {
    width: 118px;
    height: 118px;
    flex: 0 0 118px;
}

[data-theme="ledger"] .ledger-donut-hole {
    inset: 26px;
}

[data-theme="ledger"] .ledger-donut-hole strong {
    max-width: 68px;
    font-size: 10px;
    line-height: 1.05;
}

[data-theme="ledger"] .ledger-donut-hole span {
    font-size: 6px;
}

[data-theme="ledger"] .ledger-legend {
    min-width: 0;
    width: 100%;
}

[data-theme="ledger"] .ledger-legend-row {
    min-width: 0;
    min-height: 29px;
    grid-template-columns:
        17px
        4px
        minmax(0, 1fr)
        25px
        auto;
    gap: 5px;
}

[data-theme="ledger"] .ledger-legend-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* PAGE / NAV SAFETY */

[data-theme="ledger"] #overviewView {
    padding-bottom: 82px;
}

[data-theme="ledger"] .nav {
    z-index: 100;
}

[data-theme="ledger"] .nav-inner {
    min-height: 58px;
}

[data-theme="ledger"] .nav-item {
    min-width: 0;
    min-height: 54px;
    padding: 4px 2px;
    box-sizing: border-box;
}


/* TELEGRAM / NARROW PHONES */

@media (max-width: 390px) {

    [data-theme="ledger"] .ledger-overview {
        padding:
            16px 11px
            26px;
    }

    [data-theme="ledger"] .ledger-hero {
        min-height: 124px;
        padding-right: 78px;
    }

    [data-theme="ledger"] .ledger-hero > strong {
        font-size: clamp(31px, 10vw, 39px);
    }

    [data-theme="ledger"] .ledger-stamp {
        width: 60px;
        height: 60px;
        right: 3px;
    }

    [data-theme="ledger"] .ledger-summary-item {
        padding: 12px 10px;
    }

    [data-theme="ledger"] .ledger-summary-item strong {
        font-size: 15px;
    }

    [data-theme="ledger"] .ledger-chart-wrap {
        height: 164px;
        min-height: 164px;
        padding-left: 7px;
        padding-right: 7px;
    }

    [data-theme="ledger"] .ledger-chart {
        height: 128px !important;
        min-height: 128px;
    }

    [data-theme="ledger"] .ledger-donut-layout {
        grid-template-columns:
            104px
            minmax(0, 1fr);
        gap: 10px;
        padding-left: 7px;
        padding-right: 7px;
    }

    [data-theme="ledger"] .ledger-donut {
        width: 104px;
        height: 104px;
    }

    [data-theme="ledger"] .ledger-donut-hole {
        inset: 23px;
    }
}


/* ===== LEDGER HARD FIX 20260825 ===== */

[data-theme="ledger"] #overviewView,
[data-theme="ledger"] #overviewView.active {
    display: block !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    column-gap: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
}

[data-theme="ledger"] #overviewView > .ledger-overview {
    display: block !important;
    grid-column: auto !important;
    grid-row: auto !important;

    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;

    margin: 0 !important;
    box-sizing: border-box !important;
}

[data-theme="ledger"] #overviewView > .top,
[data-theme="ledger"] #overviewView > .hero,
[data-theme="ledger"] #overviewView > .balance-hero,
[data-theme="ledger"] #overviewView > .income-expense-summary,
[data-theme="ledger"] #overviewView > .metrics,
[data-theme="ledger"] #overviewView > .section,
[data-theme="ledger"] #overviewView > .night-overview,
[data-theme="ledger"] #overviewView > .card-overview {
    display: none !important;
}


/* сама бумага */

[data-theme="ledger"] .ledger-overview {
    padding: 22px 18px 110px !important;
    overflow: visible !important;
}


/* верх */

[data-theme="ledger"] .ledger-header {
    width: 100% !important;
}

[data-theme="ledger"] .ledger-hero {
    width: 100% !important;
    min-height: 145px !important;
    padding-right: 92px !important;
}

[data-theme="ledger"] .ledger-hero > strong {
    font-size: clamp(36px, 11vw, 50px) !important;
    white-space: nowrap !important;
}

[data-theme="ledger"] .ledger-stamp {
    top: 4px !important;
    right: 5px !important;
    width: 68px !important;
    height: 68px !important;
}


/* 4 главных показателя */

[data-theme="ledger"] .ledger-summary-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
}

[data-theme="ledger"] .ledger-summary-item {
    min-width: 0 !important;
}

[data-theme="ledger"] .ledger-summary-item strong {
    font-size: clamp(15px, 4.5vw, 19px) !important;
    white-space: nowrap !important;
}


/* секции */

[data-theme="ledger"] .ledger-section {
    display: block !important;
    width: 100% !important;
    margin-top: 30px !important;
    overflow: visible !important;
}

[data-theme="ledger"] .ledger-section-head {
    display: block !important;
    width: 100% !important;
}

[data-theme="ledger"] .ledger-toggle {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: 100% !important;
    margin-top: 12px !important;
}

[data-theme="ledger"] .ledger-category-section .ledger-toggle {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}


/* график */

[data-theme="ledger"] .ledger-chart-wrap {
    display: block !important;
    position: relative !important;

    width: 100% !important;
    height: 175px !important;
    min-height: 175px !important;

    margin-top: 12px !important;
    padding: 18px 10px 10px !important;

    overflow: hidden !important;
}

[data-theme="ledger"] .ledger-chart {
    display: flex !important;
    align-items: flex-end !important;

    width: 100% !important;
    height: 138px !important;
    min-height: 138px !important;

    gap: 3px !important;
}

[data-theme="ledger"] .ledger-bar-item {
    display: flex !important;
    flex: 1 1 0 !important;
    flex-direction: column !important;
    justify-content: flex-end !important;

    min-width: 0 !important;
    height: 100% !important;
}

[data-theme="ledger"] .ledger-bar-item i {
    display: block !important;
    width: 100% !important;
    min-height: 3px !important;
}


/* нижние показатели */

[data-theme="ledger"] .ledger-mini-stats {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

    width: 100% !important;
    margin-top: 12px !important;
}


/* donut */

[data-theme="ledger"] .ledger-category-body {
    display: block !important;
    width: 100% !important;
}

[data-theme="ledger"] .ledger-donut-layout {
    display: grid !important;
    grid-template-columns: 124px minmax(0, 1fr) !important;

    width: 100% !important;

    gap: 16px !important;
    padding: 14px 10px !important;
}

[data-theme="ledger"] .ledger-donut {
    width: 124px !important;
    height: 124px !important;
}


/* навигация не съедает контент */

[data-theme="ledger"] #overviewView {
    padding-bottom: 85px !important;
}


/* ===== LEDGER NAVIGATION FIX ===== */

/* Неактивная главная обязана исчезать */
[data-theme="ledger"] #overviewView {
    display: none !important;
}

/* Только активная главная Ledger */
[data-theme="ledger"] #overviewView.active {
    display: block !important;

    grid-template-columns: none !important;
    grid-template-rows: none !important;

    width: 100% !important;
    min-width: 0 !important;
}

/* Остальные вкладки работают по общей логике .view.active */
[data-theme="ledger"] #expensesView:not(.active),
[data-theme="ledger"] #paymentsView:not(.active),
[data-theme="ledger"] #settingsView:not(.active) {
    display: none !important;
}

[data-theme="ledger"] #expensesView.active,
[data-theme="ledger"] #paymentsView.active,
[data-theme="ledger"] #settingsView.active {
    display: block !important;
}


/* Навигация всегда кликабельна поверх контента */
[data-theme="ledger"] .nav {
    z-index: 1000 !important;
    pointer-events: auto !important;
}

[data-theme="ledger"] .nav-inner,
[data-theme="ledger"] .nav-item {
    pointer-events: auto !important;
}


/* =========================================================
   LEDGER — SUMMARY + DECORATIVE BAR FIX
========================================================= */

/* Штрихкод — это только декор.
   Делаем нормальный широкий печатный разделитель. */

[data-theme="ledger"] .ledger-barcode {
    position: absolute !important;

    left: 0 !important;
    right: 0 !important;
    bottom: 11px !important;

    width: 100% !important;
    height: 20px !important;

    display: flex !important;
    align-items: flex-end !important;

    gap: 3px !important;

    margin: 0 !important;

    opacity: .48 !important;

    pointer-events: none !important;
    user-select: none !important;
}

[data-theme="ledger"] .ledger-barcode i {
    flex: 1 1 0 !important;

    width: auto !important;
    min-width: 2px !important;

    background: #1f231f !important;

    border-radius: 0 !important;

    pointer-events: none !important;
}

/* более живой ритм штрихов */

[data-theme="ledger"] .ledger-barcode i:nth-child(6n+1) {
    height: 8px !important;
}

[data-theme="ledger"] .ledger-barcode i:nth-child(6n+2) {
    height: 15px !important;
}

[data-theme="ledger"] .ledger-barcode i:nth-child(6n+3) {
    height: 11px !important;
}

[data-theme="ledger"] .ledger-barcode i:nth-child(6n+4) {
    height: 19px !important;
}

[data-theme="ledger"] .ledger-barcode i:nth-child(6n+5) {
    height: 13px !important;
}

[data-theme="ledger"] .ledger-barcode i:nth-child(6n) {
    height: 17px !important;
}


/* =========================================================
   SUMMARY — ВСЁ СЛЕВА
========================================================= */

[data-theme="ledger"] .ledger-summary-item,
[data-theme="ledger"] .ledger-summary-item.ledger-income,
[data-theme="ledger"] .ledger-summary-item.ledger-expense {
    text-align: left !important;

    cursor: default !important;

    pointer-events: none !important;

    user-select: none !important;
    -webkit-user-select: none !important;
}

[data-theme="ledger"] .ledger-summary-item span,
[data-theme="ledger"] .ledger-summary-item strong,
[data-theme="ledger"] .ledger-summary-item.ledger-income strong,
[data-theme="ledger"] .ledger-summary-item.ledger-expense strong {
    display: block !important;

    width: 100% !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    text-align: left !important;

    cursor: default !important;
}


/* Чтобы сумма не прилипала к краю */

[data-theme="ledger"] .ledger-summary-item strong {
    padding-right: 4px;
}


/* Чуть аккуратнее сама таблица */

[data-theme="ledger"] .ledger-summary-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
}


/* ===== LEDGER SUMMARY ALIGN FIX ===== */

[data-theme="ledger"] .ledger-summary-item {
    display: grid !important;
    grid-template-rows: auto auto !important;
    align-content: start !important;
    justify-items: start !important;

    min-height: 82px !important;

    padding: 14px 15px !important;

    text-align: left !important;
}

[data-theme="ledger"] .ledger-summary-item span {
    display: block !important;

    width: 100% !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    line-height: 1 !important;

    text-align: left !important;
}

[data-theme="ledger"] .ledger-summary-item strong,
[data-theme="ledger"] .ledger-summary-item.ledger-income strong,
[data-theme="ledger"] .ledger-summary-item.ledger-expense strong {
    display: block !important;

    position: static !important;

    width: auto !important;
    height: auto !important;

    margin: 11px 0 0 !important;
    padding: 0 !important;

    align-self: start !important;
    justify-self: start !important;

    line-height: 1.05 !important;

    text-align: left !important;

    transform: none !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
}


/* ===== LEDGER SUMMARY ABSOLUTE FINAL ALIGN ===== */

/*
 * У всех четырёх ячеек одна и та же геометрия.
 * Высокая специфичность нужна, чтобы убить старые .expense/.income rules.
 */

[data-theme="ledger"] .ledger-summary-grid > .ledger-summary-item,
[data-theme="ledger"] .ledger-summary-grid > .ledger-summary-item.ledger-income,
[data-theme="ledger"] .ledger-summary-grid > .ledger-summary-item.ledger-expense {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;

    min-width: 0 !important;
    min-height: 82px !important;

    padding:
        14px 15px
        14px 15px !important;

    text-align: left !important;
}


/* подписи */

[data-theme="ledger"] .ledger-summary-grid > .ledger-summary-item > span {
    display: block !important;

    position: static !important;

    width: auto !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    align-self: flex-start !important;

    text-align: left !important;

    transform: none !important;
}


/* ВСЕ суммы — один baseline */

[data-theme="ledger"] #ledgerIncome,
[data-theme="ledger"] #ledgerExpense,
[data-theme="ledger"] #ledgerToday,
[data-theme="ledger"] #ledgerWeek {
    display: block !important;

    position: static !important;

    width: auto !important;
    height: auto !important;

    margin:
        11px 0 0 0 !important;

    padding: 0 !important;

    align-self: flex-start !important;

    text-align: left !important;

    line-height: 1.05 !important;

    transform: none !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
}


/* отдельно убиваем всё наследие expense */

[data-theme="ledger"]
.ledger-summary-grid
> .ledger-summary-item.ledger-expense
> #ledgerExpense {
    margin:
        11px 0 0 0 !important;

    padding:
        0 !important;

    align-self:
        flex-start !important;

    text-align:
        left !important;

    transform:
        none !important;
}


/* ===== LEDGER SUMMARY CLEAN FINAL ===== */

[data-theme="ledger"] .ledger-summary-grid > .ledger-summary-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;

    min-width: 0 !important;
    min-height: 82px !important;

    padding: 14px 15px !important;

    text-align: left !important;

    cursor: default !important;
    pointer-events: none !important;
}

[data-theme="ledger"] .ledger-summary-grid > .ledger-summary-item > span {
    margin: 0 !important;
    padding: 0 !important;

    text-align: left !important;
}

[data-theme="ledger"] .ledger-summary-grid > .ledger-summary-item > strong {
    position: static !important;

    display: block !important;

    margin: 11px 0 0 !important;
    padding: 0 !important;

    text-align: left !important;

    transform: none !important;
}

[data-theme="ledger"] .ledger-summary-item.ledger-income > strong {
    color: #33513c !important;
}

[data-theme="ledger"] .ledger-summary-item.ledger-expense > strong {
    color: #8e3b2e !important;
}



/* =========================================================
   CARD — INCOME / EXPENSE CLASS ISOLATION
========================================================= */

[data-theme="card"] .card-theme-badge.card-income,
[data-theme="card"] .card-theme-badge.card-expense {
    text-align: left !important;
    cursor: default !important;
}

[data-theme="card"] .card-theme-badge.card-income strong {
    color: #9fb6a3 !important;

    margin: 5px 0 0 !important;
    padding: 0 !important;

    text-align: left !important;

    transform: none !important;
}

[data-theme="card"] .card-theme-badge.card-expense strong {
    color: #d59674 !important;

    margin: 5px 0 0 !important;
    padding: 0 !important;

    text-align: left !important;

    transform: none !important;
}


/* =========================================================
   CARD — PRIVATE BANKING CHART
========================================================= */

[data-theme="card"] .card-theme-section {
    position: relative;
}


/* Header */

[data-theme="card"] .card-theme-section-head {
    align-items: flex-end;
}

[data-theme="card"] .card-chart-legend {
    display: flex;
    align-items: center;

    gap: 12px;

    padding-bottom: 2px;
}

[data-theme="card"] .card-chart-legend-item {
    display: flex;
    align-items: center;

    gap: 5px;

    color: #968b79;

    font-size: 8px;

    letter-spacing: .04em;
}

[data-theme="card"] .card-chart-legend-item i {
    width: 13px;
    height: 2px;

    display: block;

    border-radius: 3px;
}

[data-theme="card"] .card-chart-legend-item.income i {
    background: #a7bca8;

    box-shadow:
        0 0 8px
        rgba(167,188,168,.18);
}

[data-theme="card"] .card-chart-legend-item.expense i {
    background: #d7a273;

    box-shadow:
        0 0 8px
        rgba(215,162,115,.22);
}


/* Outer card */

[data-theme="card"] .card-spark-wrap {
    position: relative;

    min-height: 194px;

    padding:
        13px 12px
        9px;

    overflow: hidden;

    border:
        1px solid
        rgba(103,82,60,.50);

    border-radius: 18px;

    background:
        radial-gradient(
            circle at 80% 0%,
            rgba(209,166,123,.075),
            transparent 42%
        ),
        radial-gradient(
            circle at 8% 100%,
            rgba(137,162,143,.045),
            transparent 42%
        ),
        linear-gradient(
            180deg,
            #211c16 0%,
            #191510 100%
        );

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.022),

        0 24px 55px -35px
        rgba(0,0,0,.75);
}


/* Subtle premium shine */

[data-theme="card"] .card-spark-wrap::before {
    content: "";

    position: absolute;

    top: -70%;
    left: -35%;

    width: 42%;
    height: 220%;

    pointer-events: none;

    background:
        linear-gradient(
            115deg,
            transparent,
            rgba(233,201,167,.035),
            transparent
        );

    transform:
        rotate(13deg);
}


/* SVG */

[data-theme="card"] .card-spark {
    position: relative;

    width: 100%;
    height: 168px;

    display: block;
}

[data-theme="card"] .card-premium-chart {
    width: 100%;
    height: 100%;

    display: block;

    overflow: visible;
}


/* grid */

[data-theme="card"] .card-chart-grid {
    stroke:
        rgba(158,139,115,.10);

    stroke-width: 1;

    stroke-dasharray:
        4 9;

    vector-effect:
        non-scaling-stroke;
}


/* area fills */

[data-theme="card"] .card-chart-area {
    stroke: none;
}

[data-theme="card"] .card-chart-area.income {
    fill:
        url(#cardIncomeGradient);
}

[data-theme="card"] .card-chart-area.expense {
    fill:
        url(#cardExpenseGradient);
}


/* lines */

[data-theme="card"] .card-chart-line {
    fill: none;

    stroke-width: 3.1;

    stroke-linecap: round;
    stroke-linejoin: round;

    vector-effect:
        non-scaling-stroke;
}

[data-theme="card"] .card-chart-line.income {
    stroke: #a7bca8;

    filter:
        url(#cardIncomeGlow);
}

[data-theme="card"] .card-chart-line.expense {
    stroke: #d7a273;

    filter:
        url(#cardExpenseGlow);
}


/* pointer hit areas */

[data-theme="card"] .card-chart-hit {
    fill: transparent;

    cursor: pointer;
}


/* selected vertical cursor */

[data-theme="card"] .card-chart-cursor {
    opacity: 0;

    stroke:
        rgba(235,220,201,.22);

    stroke-width: 1;

    stroke-dasharray:
        3 5;

    vector-effect:
        non-scaling-stroke;

    transition:
        opacity .15s ease;
}

[data-theme="card"] .card-chart-cursor.show {
    opacity: 1;
}


/* Selected points only */

[data-theme="card"] .card-chart-point {
    opacity: 0;

    stroke-width: 3;

    vector-effect:
        non-scaling-stroke;

    transition:
        opacity .15s ease;
}

[data-theme="card"] .card-chart-point.show {
    opacity: 1;
}

[data-theme="card"] .card-chart-point.income {
    fill: #a7bca8;

    stroke: #252019;

    filter:
        drop-shadow(
            0 0 6px
            rgba(167,188,168,.30)
        );
}

[data-theme="card"] .card-chart-point.expense {
    fill: #d7a273;

    stroke: #252019;

    filter:
        drop-shadow(
            0 0 7px
            rgba(215,162,115,.35)
        );
}


/* axis */

[data-theme="card"] .card-chart-axis-label {
    fill: #756b5d;

    font-size: 22px;

    font-family:
        "Outfit",
        sans-serif;
}


/* =========================================================
   PREMIUM TOOLTIP
========================================================= */

[data-theme="card"] .card-spark-tooltip {
    position: absolute;

    z-index: 30;

    top: 10px;

    display: none;

    width: 148px;
    min-width: 148px;

    padding: 11px 12px;

    border:
        1px solid
        rgba(120,98,73,.52);

    border-radius: 13px;

    background:
        linear-gradient(
            150deg,
            rgba(42,35,27,.97),
            rgba(27,23,18,.98)
        );

    box-shadow:
        0 18px 36px
        rgba(0,0,0,.38),

        inset 0 1px 0
        rgba(255,255,255,.025);

    backdrop-filter:
        blur(14px);
}

[data-theme="card"] .card-spark-tooltip.show {
    display: block;
}


/* date */

[data-theme="card"] .card-chart-tooltip-date {
    padding-bottom: 7px;
    margin-bottom: 7px;

    border-bottom:
        1px solid
        rgba(113,92,69,.30);

    color: #8f826f;

    font-size: 8px;

    text-transform: capitalize;
}


/* income/expense rows */

[data-theme="card"] .card-chart-tooltip-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 9px;

    min-height: 23px;
}

[data-theme="card"] .card-chart-tooltip-row > span {
    display: flex;
    align-items: center;

    gap: 5px;

    color: #9c907d;

    font-size: 8px;
}

[data-theme="card"] .card-chart-tooltip-row i {
    display: block;

    width: 5px;
    height: 5px;

    border-radius: 50%;
}

[data-theme="card"] .card-chart-tooltip-row.income i {
    background: #a7bca8;

    box-shadow:
        0 0 7px
        rgba(167,188,168,.28);
}

[data-theme="card"] .card-chart-tooltip-row.expense i {
    background: #d7a273;

    box-shadow:
        0 0 7px
        rgba(215,162,115,.30);
}

[data-theme="card"] .card-chart-tooltip-row strong {
    color: #e9dfd0;

    font:
        600 11px
        "Cormorant",
        Georgia,
        serif;

    white-space: nowrap;
}


/* net */

[data-theme="card"] .card-chart-tooltip-net {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 8px;

    padding-top: 8px;
    margin-top: 6px;

    border-top:
        1px solid
        rgba(113,92,69,.30);
}

[data-theme="card"] .card-chart-tooltip-net span {
    color: #8f826f;

    font-size: 8px;
}

[data-theme="card"] .card-chart-tooltip-net strong {
    font:
        600 12px
        "Cormorant",
        Georgia,
        serif;
}

[data-theme="card"] .card-chart-tooltip-net strong.positive {
    color: #aec1b0;
}

[data-theme="card"] .card-chart-tooltip-net strong.negative {
    color: #d59a79;
}


@media (max-width: 390px) {

    [data-theme="card"] .card-chart-legend {
        gap: 8px;
    }

    [data-theme="card"] .card-spark-wrap {
        padding-left: 8px;
        padding-right: 8px;
    }

    [data-theme="card"] .card-spark-tooltip {
        width: 137px;
        min-width: 137px;

        padding: 9px 10px;
    }

}


/* =========================================================
   CARD — COMPACT MARKET TOOLTIP
========================================================= */

[data-theme="card"] .card-spark-tooltip {
    top: 8px !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: calc(100% - 16px) !important;

    display: none;

    grid-template-columns:
        auto auto auto auto;

    align-items: center;

    gap: 9px;

    padding:
        7px 10px !important;

    border-radius:
        10px !important;

    white-space: nowrap;

    background:
        rgba(29,24,18,.94) !important;

    border:
        1px solid
        rgba(136,108,78,.42) !important;

    box-shadow:
        0 8px 24px
        rgba(0,0,0,.25) !important;

    backdrop-filter:
        blur(12px);
}

[data-theme="card"] .card-spark-tooltip.show {
    display: grid !important;
}


/* дата */

[data-theme="card"] .card-quote-date {
    padding-right: 8px;

    border-right:
        1px solid
        rgba(127,104,78,.32);

    color: #918675;

    font-size: 8px;

    text-transform:
        lowercase;
}


/* суммы */

[data-theme="card"] .card-quote-value,
[data-theme="card"] .card-quote-net {
    display: flex;
    align-items: baseline;

    gap: 1px;

    font:
        600 10px/1
        "Cormorant",
        Georgia,
        serif;

    letter-spacing:
        -.01em;
}

[data-theme="card"] .card-quote-value small,
[data-theme="card"] .card-quote-net small {
    font-size: 8px;
    opacity: .65;
}


/* доход */

[data-theme="card"] .card-quote-value.income {
    color: #aec0af;
}


/* расход */

[data-theme="card"] .card-quote-value.expense {
    color: #d7a273;
}


/* итог */

[data-theme="card"] .card-quote-net {
    padding-left: 8px;

    border-left:
        1px solid
        rgba(127,104,78,.32);
}

[data-theme="card"] .card-quote-net.positive {
    color: #d9e0d3;
}

[data-theme="card"] .card-quote-net.negative {
    color: #d9a081;
}


/* старые элементы tooltip больше не участвуют */

[data-theme="card"] .card-chart-tooltip-date,
[data-theme="card"] .card-chart-tooltip-row,
[data-theme="card"] .card-chart-tooltip-net {
    display: none !important;
}


/* оставляем чуть больше графика видимым сверху */

[data-theme="card"] .card-spark-wrap {
    padding-top:
        8px !important;
}


/* на узких телефонах чуть компактнее */

@media (max-width: 390px) {

    [data-theme="card"] .card-spark-tooltip {
        gap: 6px;

        padding:
            6px 8px !important;
    }

    [data-theme="card"] .card-quote-date {
        padding-right: 6px;
    }

    [data-theme="card"] .card-quote-net {
        padding-left: 6px;
    }

    [data-theme="card"] .card-quote-value,
    [data-theme="card"] .card-quote-net {
        font-size: 9px;
    }

}


[data-theme="card"] .card-spark-tooltip.show {
    left: 50% !important;
    right: auto !important;

    transform:
        translateX(-50%) !important;
}


/* =========================================================
   CARD — QUOTE BAR ABOVE CHART
========================================================= */

/*
 * Tooltip больше не плавает поверх графика.
 * Он становится полноценной строкой над ним.
 */

[data-theme="card"] .card-spark-wrap {
    display: flex !important;
    flex-direction: column !important;

    gap: 10px !important;

    padding:
        10px 12px
        12px !important;

    overflow: visible !important;
}


/* информационная панель */

[data-theme="card"] .card-spark-tooltip,
[data-theme="card"] .card-spark-tooltip.show {
    position: static !important;

    order: 0 !important;

    display: grid !important;

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

    align-items: center !important;

    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;

    margin: 0 !important;

    padding:
        9px 11px !important;

    box-sizing: border-box !important;

    gap: 10px !important;

    border:
        1px solid
        rgba(136,108,78,.42) !important;

    border-radius:
        11px !important;

    background:
        linear-gradient(
            180deg,
            rgba(38,31,24,.97),
            rgba(27,22,17,.97)
        ) !important;

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.025),
        0 10px 25px
        rgba(0,0,0,.18) !important;

    backdrop-filter:
        blur(12px);

    transform:
        none !important;

    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
}


/* сам график идёт ниже */

[data-theme="card"] .card-spark {
    order: 1 !important;

    width: 100% !important;

    height: 168px !important;
}


/* дата */

[data-theme="card"] .card-quote-date {
    min-width: 48px;

    padding: 0 10px 0 0 !important;

    border-right:
        1px solid
        rgba(127,104,78,.34) !important;

    color: #9b8f7d !important;

    font-size: 8px !important;
    line-height: 1.1 !important;

    text-transform:
        lowercase;
}


/* значения */

[data-theme="card"] .card-quote-value,
[data-theme="card"] .card-quote-net {
    display: flex !important;
    align-items: baseline !important;
    justify-content: flex-end !important;

    min-width: 0 !important;

    gap: 2px !important;

    padding: 0 !important;
    margin: 0 !important;

    border: 0 !important;

    font:
        600 11px/1
        "Cormorant",
        Georgia,
        serif !important;

    white-space: nowrap !important;
}


/* доход */

[data-theme="card"] .card-quote-value.income {
    color: #aec0af !important;
}


/* расход */

[data-theme="card"] .card-quote-value.expense {
    color: #d7a273 !important;
}


/* итог — чуть сильнее остальных */

[data-theme="card"] .card-quote-net {
    padding-left: 10px !important;

    border-left:
        1px solid
        rgba(127,104,78,.34) !important;

    font-size: 12px !important;
}

[data-theme="card"] .card-quote-net.positive {
    color: #e0e6da !important;
}

[data-theme="card"] .card-quote-net.negative {
    color: #dda184 !important;
}


/* знаки */

[data-theme="card"] .card-quote-value small,
[data-theme="card"] .card-quote-net small {
    font-size: 8px !important;
    opacity: .62 !important;
}


/* график не упирается в панель */

[data-theme="card"] .card-premium-chart {
    margin-top: 2px;
}


/* узкий Telegram viewport */

@media (max-width: 390px) {

    [data-theme="card"] .card-spark-wrap {
        padding:
            9px 8px
            10px !important;

        gap: 8px !important;
    }

    [data-theme="card"] .card-spark-tooltip,
    [data-theme="card"] .card-spark-tooltip.show {
        grid-template-columns:
            44px
            minmax(0, 1fr)
            minmax(0, 1fr)
            minmax(0, 1fr) !important;

        gap: 6px !important;

        padding:
            8px 7px !important;
    }

    [data-theme="card"] .card-quote-date {
        min-width: 0;

        padding-right:
            6px !important;

        font-size:
            7px !important;
    }

    [data-theme="card"] .card-quote-value {
        font-size:
            9px !important;
    }

    [data-theme="card"] .card-quote-net {
        padding-left:
            6px !important;

        font-size:
            10px !important;
    }

}


/* =========================================================
   CARD — EXTERNAL MONEY QUOTE PANEL
========================================================= */

/*
 * Панель теперь сосед графика, а не его ребёнок.
 */

[data-theme="card"] .card-spark-tooltip,
[data-theme="card"] .card-spark-tooltip.show {
    position: static !important;

    display: grid !important;

    grid-template-columns:
        62px
        minmax(0, 1fr)
        minmax(0, 1fr)
        minmax(0, 1.08fr) !important;

    align-items: center !important;

    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;

    margin:
        0 0 10px !important;

    padding:
        13px 14px !important;

    gap: 11px !important;

    box-sizing: border-box !important;

    border:
        1px solid
        rgba(151,117,80,.50) !important;

    border-radius:
        15px !important;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(215,162,115,.08),
            transparent 42%
        ),
        linear-gradient(
            145deg,
            #2b241c,
            #1e1913
        ) !important;

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.035),

        0 14px 34px -22px
        rgba(0,0,0,.8) !important;

    transform: none !important;

    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;

    white-space: nowrap !important;
}


/* ДАТА */

[data-theme="card"] .card-quote-date {
    display: flex;
    align-items: center;

    min-width: 0 !important;

    height: 34px;

    padding:
        0 11px 0 0 !important;

    border-right:
        1px solid
        rgba(146,114,78,.35) !important;

    color: #a89a85 !important;

    font:
        600 10px/1.1
        "Outfit",
        sans-serif !important;

    letter-spacing:
        .03em;

    text-transform:
        uppercase !important;
}


/* ЦИФРЫ */

[data-theme="card"] .card-quote-value,
[data-theme="card"] .card-quote-net {
    display: flex !important;
    align-items: baseline !important;
    justify-content: flex-end !important;

    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    gap: 2px !important;

    font:
        600 clamp(14px, 4vw, 18px)/1
        "Cormorant",
        Georgia,
        serif !important;

    letter-spacing:
        -.025em;

    white-space:
        nowrap !important;
}


/* + / - / = */

[data-theme="card"] .card-quote-value small,
[data-theme="card"] .card-quote-net small {
    font-size:
        10px !important;

    opacity:
        .65 !important;
}


/* ДОХОД */

[data-theme="card"] .card-quote-value.income {
    color:
        #b5c9b7 !important;

    text-shadow:
        0 0 12px
        rgba(181,201,183,.08);
}


/* РАСХОД */

[data-theme="card"] .card-quote-value.expense {
    color:
        #dfa97a !important;

    text-shadow:
        0 0 12px
        rgba(223,169,122,.10);
}


/* ИТОГ */

[data-theme="card"] .card-quote-net {
    height: 34px;

    padding-left:
        11px !important;

    border-left:
        1px solid
        rgba(146,114,78,.35) !important;

    font-size:
        clamp(15px, 4.3vw, 20px) !important;
}

[data-theme="card"] .card-quote-net.positive {
    color:
        #ebe5d9 !important;
}

[data-theme="card"] .card-quote-net.negative {
    color:
        #e0a080 !important;
}


/* =========================================================
   ГРАФИК СНОВА САМ ПО СЕБЕ
========================================================= */

[data-theme="card"] .card-spark-wrap {
    display: block !important;

    min-height:
        194px !important;

    padding:
        13px 12px 10px !important;

    overflow:
        hidden !important;
}

[data-theme="card"] .card-spark {
    display: block !important;

    width: 100% !important;
    height: 175px !important;
}


/* старое позиционирование панели гасим окончательно */

[data-theme="card"] .card-spark-wrap > .card-spark-tooltip {
    display: none !important;
}


/* MOBILE */

@media (max-width: 390px) {

    [data-theme="card"] .card-spark-tooltip,
    [data-theme="card"] .card-spark-tooltip.show {
        grid-template-columns:
            52px
            minmax(0, 1fr)
            minmax(0, 1fr)
            minmax(0, 1fr) !important;

        gap:
            6px !important;

        padding:
            11px 9px !important;
    }

    [data-theme="card"] .card-quote-date {
        padding-right:
            6px !important;

        font-size:
            8px !important;
    }

    [data-theme="card"] .card-quote-value {
        font-size:
            13px !important;
    }

    [data-theme="card"] .card-quote-net {
        padding-left:
            6px !important;

        font-size:
            14px !important;
    }

}


/* ===== CARD QUOTE METRICS ===== */

[data-theme="card"] .card-quote-metric {
    min-width: 0;
}

[data-theme="card"] .card-quote-metric > span {
    display: block;

    margin-bottom: 4px;

    color: #887b69;

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

    letter-spacing: .10em;
    text-transform: uppercase;
}

[data-theme="card"] .card-quote-metric > strong {
    display: block;

    overflow: hidden;

    font:
        600 clamp(14px, 4vw, 18px)/1
        "Cormorant",
        Georgia,
        serif;

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

[data-theme="card"] .card-quote-metric > strong.income {
    color: #b5c9b7;
}

[data-theme="card"] .card-quote-metric > strong.expense {
    color: #dfa97a;
}

[data-theme="card"] .card-quote-metric.total {
    padding-left: 10px;

    border-left:
        1px solid
        rgba(146,114,78,.35);
}

[data-theme="card"] .card-quote-metric > strong.positive {
    color: #ebe5d9;
}

[data-theme="card"] .card-quote-metric > strong.negative {
    color: #e0a080;
}


/* =========================================================
   CARD — QUOTE PANEL ALIGN FIX
========================================================= */

[data-theme="card"] .card-quote-metric {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;

    min-width: 0 !important;

    margin: 0 !important;
    padding-top: 0 !important;

    vertical-align: top !important;
}

[data-theme="card"] .card-quote-metric > span {
    display: block !important;

    height: auto !important;

    margin: 0 0 5px !important;
    padding: 0 !important;

    line-height: 1 !important;
}

[data-theme="card"] .card-quote-metric > strong,
[data-theme="card"] .card-quote-metric > strong.card-quote-income,
[data-theme="card"] .card-quote-metric > strong.card-quote-expense,
[data-theme="card"] .card-quote-metric > strong.positive,
[data-theme="card"] .card-quote-metric > strong.negative {
    display: block !important;

    position: static !important;

    margin: 0 !important;
    padding: 0 !important;

    align-self: flex-start !important;

    line-height: 1 !important;

    text-align: left !important;

    transform: none !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
}

[data-theme="card"] .card-quote-metric > strong.card-quote-income {
    color: #b5c9b7 !important;
}

[data-theme="card"] .card-quote-metric > strong.card-quote-expense {
    color: #dfa97a !important;
}


/* Дата тоже держим по одному верхнему baseline */

[data-theme="card"] .card-quote-date {
    align-self: start !important;

    display: flex !important;
    align-items: flex-start !important;

    padding-top: 0 !important;

    line-height: 1 !important;
}


/* ===== CHART TOUCH SCRUB ===== */

[data-theme="card"] .card-premium-chart,
[data-theme="card"] .card-chart-hit {
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
}


/* =========================================================
   GLOBAL MONEY CHART SCRUB
========================================================= */

/*
 * Вертикальный жест остаётся прокруткой страницы.
 * Горизонтальный жест используется графиками.
 */

[data-theme="card"] .card-premium-chart,
[data-theme="card"] .card-chart-hit,

[data-theme="night"] .night-chart,
[data-theme="night"] .night-chart svg,

[data-theme="ledger"] .ledger-chart,
[data-theme="ledger"] .ledger-chart-wrap {
    touch-action: pan-y;

    -webkit-user-select: none;
    user-select: none;

    -webkit-tap-highlight-color: transparent;
}


/* =========================================================
   JOURNAL V2 — FINANCIAL NOTEBOOK
========================================================= */

[data-theme="journal"] {
    --journal-ink: #35495c;
    --journal-red: #b96652;
    --journal-green: #667f6b;
    --journal-pencil: #948978;
    --journal-paper: #fcfaf3;
    --journal-line: rgba(92,119,145,.13);
}


/* HERO — запись в ежедневнике */

[data-theme="journal"] .balance-hero {
    padding:
        27px 22px
        23px !important;

    border:
        1px solid
        rgba(118,106,88,.10);

    border-radius:
        5px 18px 7px 15px !important;

    background:
        repeating-linear-gradient(
            0deg,
            transparent 0,
            transparent 27px,
            var(--journal-line) 28px
        ),
        var(--journal-paper) !important;

    box-shadow:
        0 14px 30px -20px
        rgba(58,50,38,.34) !important;

    transform:
        rotate(-.25deg) !important;
}


/* маленькая вертикальная красная линия как в тетради */

[data-theme="journal"] .balance-hero::before {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;
    left: 18px;

    width: 1px;

    background:
        rgba(185,102,82,.22);

    pointer-events: none;
}


[data-theme="journal"] .hero-main-copy {
    position: relative;
    z-index: 2;

    padding-left:
        13px;
}


[data-theme="journal"] .hero-label {
    color:
        var(--journal-pencil);

    font:
        600 10px/1.2
        system-ui,
        sans-serif;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;
}


[data-theme="journal"] .hero-value {
    margin-top:
        7px;

    font:
        700 clamp(42px, 13vw, 58px)/.92
        "Caveat",
        cursive !important;

    color:
        var(--journal-ink) !important;

    letter-spacing:
        -.03em;
}


/* доход / расход как выделенные заметки */

[data-theme="journal"] .income-expense-summary {
    gap:
        10px !important;

    margin:
        0 4px 15px !important;
}


[data-theme="journal"] .income-expense-card {
    position:
        relative;

    min-height:
        72px;

    padding:
        12px 14px !important;

    border-radius:
        4px 12px 5px 10px !important;

    transform:
        rotate(.25deg);
}


[data-theme="journal"] .income-expense-card:first-child {
    background:
        linear-gradient(
            rgba(194,214,201,.58),
            rgba(194,214,201,.58)
        ),
        var(--journal-paper) !important;

    transform:
        rotate(-.55deg);
}


[data-theme="journal"] .income-expense-card:last-child {
    background:
        linear-gradient(
            rgba(235,196,185,.56),
            rgba(235,196,185,.56)
        ),
        var(--journal-paper) !important;

    transform:
        rotate(.45deg);
}


[data-theme="journal"] .income-expense-label {
    color:
        #756e63;

    font-size:
        9px;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;
}


[data-theme="journal"] .income-expense-value {
    margin-top:
        6px;

    font:
        700 clamp(23px, 7vw, 30px)/1
        "Caveat",
        cursive !important;
}


/* TODAY / WEEK */

[data-theme="journal"] .metrics {
    position:
        relative;

    gap:
        0 !important;

    margin:
        0 8px 22px !important;

    padding:
        0 4px 9px;

    border-bottom:
        2px solid
        rgba(53,73,92,.16);
}


[data-theme="journal"] .metric {
    padding:
        7px 10px !important;

    background:
        transparent !important;

    border-radius:
        0 !important;
}


[data-theme="journal"] .metric + .metric {
    border-left:
        1px dashed
        rgba(53,73,92,.18);
}


[data-theme="journal"] .metric-value {
    margin-top:
        3px;

    font:
        700 22px/1
        "Caveat",
        cursive;
}


/* =========================================================
   JOURNAL CHART
========================================================= */

[data-theme="journal"] .journal-chart-shell {
    margin-top:
        10px;
}


/* отдельная записка выбранного дня */

[data-theme="journal"] .journal-chart-note {
    display:
        grid;

    grid-template-columns:
        1fr auto;

    align-items:
        end;

    gap:
        16px;

    margin:
        0 7px 11px;

    padding:
        11px 14px 10px;

    border:
        1px solid
        rgba(105,94,77,.10);

    border-radius:
        3px 10px 4px 8px;

    background:
        #f4e9bf;

    box-shadow:
        0 7px 15px -13px
        rgba(52,44,33,.5);

    transform:
        rotate(-.25deg);
}


[data-theme="journal"] .journal-chart-note-date span,
[data-theme="journal"] .journal-chart-note-value span {
    display:
        block;

    margin-bottom:
        2px;

    color:
        #91836e;

    font-size:
        7px;

    line-height:
        1;

    letter-spacing:
        .12em;

    text-transform:
        uppercase;
}


[data-theme="journal"] .journal-chart-note-date strong {
    display:
        block;

    color:
        #514a40;

    font:
        700 20px/1
        "Caveat",
        cursive;
}


[data-theme="journal"] .journal-chart-note-value {
    text-align:
        right;
}


[data-theme="journal"] .journal-chart-note-value strong {
    display:
        block;

    color:
        var(--journal-red);

    font:
        700 clamp(24px, 7vw, 32px)/.9
        "Caveat",
        cursive;

    white-space:
        nowrap;
}


[data-theme="journal"] #journalChartValue.journal-positive {
    color:
        var(--journal-green);
}


[data-theme="journal"] #journalChartValue.journal-negative {
    color:
        var(--journal-red);
}


/* лист с графиком */

[data-theme="journal"] .journal-chart-paper {
    position:
        relative;

    overflow:
        hidden;

    padding:
        9px 8px 7px;

    border:
        1px solid
        rgba(95,84,67,.09);

    border-radius:
        4px 15px 5px 12px;

    background:
        repeating-linear-gradient(
            0deg,
            transparent 0,
            transparent 25px,
            var(--journal-line) 26px
        ),
        repeating-linear-gradient(
            90deg,
            transparent 0,
            transparent 25px,
            rgba(92,119,145,.055) 26px
        ),
        var(--journal-paper);

    box-shadow:
        0 13px 25px -20px
        rgba(55,47,35,.42);

    transform:
        rotate(.15deg);
}


/* эффект дырок от блокнота */

[data-theme="journal"] .journal-chart-paper::before {
    content:
        "•  •  •  •  •  •  •";

    position:
        absolute;

    left:
        14px;

    top:
        -8px;

    color:
        rgba(91,80,65,.20);

    font-size:
        15px;

    letter-spacing:
        15px;

    pointer-events:
        none;
}


[data-theme="journal"] .journal-chart {
    display:
        block;

    width:
        100%;

    height:
        190px;

    overflow:
        visible;

    color:
        var(--journal-ink);

    touch-action:
        pan-y;

    -webkit-user-select:
        none;

    user-select:
        none;
}


[data-theme="journal"] .journal-chart-grid {
    stroke:
        rgba(81,103,123,.10);

    stroke-width:
        1;

    stroke-dasharray:
        3 5;
}


[data-theme="journal"] .journal-chart-zero {
    stroke:
        rgba(185,102,82,.28);

    stroke-width:
        1.3;

    stroke-dasharray:
        5 5;
}


[data-theme="journal"] .journal-chart-area {
    fill:
        url(#journalAreaGradient);

    color:
        var(--journal-ink);

    pointer-events:
        none;
}


[data-theme="journal"] .journal-chart-line {
    fill:
        none;

    stroke:
        var(--journal-ink);

    stroke-width:
        3;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

    vector-effect:
        non-scaling-stroke;

    filter:
        drop-shadow(
            0 1px 0
            rgba(255,255,255,.45)
        );

    pointer-events:
        none;
}


[data-theme="journal"] .journal-chart-dot {
    fill:
        var(--journal-paper);

    stroke:
        var(--journal-ink);

    stroke-width:
        2.5;

    vector-effect:
        non-scaling-stroke;

    transition:
        r .14s ease,
        fill .14s ease;

    cursor:
        pointer;
}


[data-theme="journal"] .journal-chart-dot.selected {
    r:
        7;

    fill:
        #d9a441;

    stroke:
        #6c5837;
}


[data-theme="journal"] .journal-chart-cursor {
    opacity:
        0;

    stroke:
        rgba(185,102,82,.50);

    stroke-width:
        1.5;

    stroke-dasharray:
        4 5;

    vector-effect:
        non-scaling-stroke;

    pointer-events:
        none;
}


[data-theme="journal"] .journal-chart-cursor.show {
    opacity:
        1;
}


[data-theme="journal"] .journal-chart-day {
    fill:
        #8d8273;

    font:
        700 12px
        "Caveat",
        cursive;
}


[data-theme="journal"] .journal-chart-caption {
    display:
        flex;

    justify-content:
        space-between;

    gap:
        12px;

    padding:
        3px 8px 1px;

    color:
        #958979;

    font:
        600 10px/1
        "Caveat",
        cursive;
}


/* Старый tooltip Journal больше не нужен */

[data-theme="journal"] #spendingDynamics .line-chart-tooltip {
    display:
        none !important;
}


/* =========================================================
   JOURNAL SECTIONS
========================================================= */

[data-theme="journal"] #overviewView > .section {
    margin-top:
        30px !important;
}


[data-theme="journal"] .section-title {
    color:
        var(--journal-ink);

    font:
        700 27px/1
        "Caveat",
        cursive !important;
}


[data-theme="journal"] .section-head::after {
    border-bottom:
        2px dotted
        rgba(53,73,92,.20) !important;
}


/* метрики под графиком выглядят как заметки */

[data-theme="journal"] .dynamics-metrics-grid {
    gap:
        7px;

    margin-top:
        13px;
}


[data-theme="journal"] .dynamics-stat {
    min-height:
        61px;

    padding:
        10px 11px;

    border:
        0;

    border-radius:
        3px 10px 4px 8px;

    background:
        rgba(252,250,243,.75);

    box-shadow:
        0 7px 16px -16px
        rgba(55,47,35,.5);
}


[data-theme="journal"] .dynamics-stat:nth-child(1) {
    transform:
        rotate(-.35deg);
}

[data-theme="journal"] .dynamics-stat:nth-child(2) {
    transform:
        rotate(.3deg);
}

[data-theme="journal"] .dynamics-stat:nth-child(3) {
    transform:
        rotate(-.2deg);
}

[data-theme="journal"] .dynamics-stat:nth-child(4) {
    transform:
        rotate(.4deg);
}


[data-theme="journal"] .dynamics-stat-value {
    margin-top:
        4px;

    font:
        700 20px/1
        "Caveat",
        cursive;
}


/* Подсказку обновляем визуально */

[data-theme="journal"] .chart-hint {
    margin-top:
        8px;

    color:
        #948978;

    font:
        600 12px/1.2
        "Caveat",
        cursive;

    text-align:
        center;
}


@media (max-width: 390px) {

    [data-theme="journal"] .journal-chart-note {
        gap:
            8px;

        padding:
            10px 11px;
    }

    [data-theme="journal"] .journal-chart-note-date strong {
        font-size:
            18px;
    }

    [data-theme="journal"] .journal-chart-note-value strong {
        font-size:
            25px;
    }

    [data-theme="journal"] .journal-chart {
        height:
            172px;
    }

    [data-theme="journal"] .hero-value {
        font-size:
            44px !important;
    }

}


[data-theme="journal"] .chart-hint {
    font-size: 0;
}

[data-theme="journal"] .chart-hint::after {
    content: "Тапни или проведи пальцем по графику";
    font-size: 12px;
}


/* =========================================================
   JOURNAL V2 — HAND DRAWN CATEGORY DONUT
========================================================= */

[data-theme="journal"] .journal-category-board {
    position: relative;

    margin-top: 12px;
    padding: 15px 14px 16px;

    border:
        1px solid rgba(93,83,67,.10);

    border-radius:
        5px 16px 7px 12px;

    background:
        repeating-linear-gradient(
            0deg,
            transparent 0,
            transparent 26px,
            rgba(92,119,145,.075) 27px
        ),
        var(--journal-paper);

    box-shadow:
        0 13px 25px -20px
        rgba(55,47,35,.42);

    transform:
        rotate(-.12deg);
}


/* красная линия поля */

[data-theme="journal"] .journal-category-board::before {
    content: "";

    position: absolute;
    top: 0;
    bottom: 0;
    left: 23px;

    width: 1px;

    background:
        rgba(185,102,82,.18);

    pointer-events: none;
}


[data-theme="journal"] .journal-category-board-head {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 14px;

    padding-left: 18px;
    margin-bottom: 15px;
}


[data-theme="journal"] .journal-category-board-head > span {
    color: #8e8272;

    font:
        600 9px/1
        system-ui,
        sans-serif;

    letter-spacing: .10em;
    text-transform: uppercase;
}


[data-theme="journal"] .journal-category-board-head > strong {
    color: var(--journal-ink);

    font:
        700 24px/1
        "Caveat",
        cursive;

    white-space: nowrap;
}


/* donut + notes */

[data-theme="journal"] .journal-category-main {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns:
        142px minmax(0, 1fr);

    align-items: center;

    gap: 13px;

    padding-left: 12px;
}


[data-theme="journal"] .journal-category-donut-wrap {
    position: relative;

    width: 136px;
    height: 136px;
}


[data-theme="journal"] .journal-category-donut {
    position: absolute;
    inset: 4px;

    border-radius: 50%;

    box-shadow:
        inset 0 0 0 1px
        rgba(64,55,44,.10),
        0 6px 14px -12px
        rgba(40,34,25,.5);

    transform:
        rotate(-3deg);
}


[data-theme="journal"] .journal-category-donut-hole {
    position: absolute;
    inset: 31px;

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

    padding: 6px;

    border-radius: 50%;

    background:
        var(--journal-paper);

    box-shadow:
        0 0 0 2px
        rgba(252,250,243,.72);

    text-align: center;
}


[data-theme="journal"] .journal-category-donut-hole span {
    color: #968a79;

    font:
        600 8px/1
        system-ui,
        sans-serif;

    letter-spacing: .08em;
    text-transform: uppercase;
}


[data-theme="journal"] .journal-category-donut-hole strong {
    display: block;

    margin-top: 4px;

    color: var(--journal-ink);

    font:
        700 16px/.95
        "Caveat",
        cursive;

    white-space: nowrap;
}


/* как будто обвели карандашом */

[data-theme="journal"] .journal-category-pencil-circle {
    position: absolute;

    inset: 0;

    border:
        2px solid
        rgba(53,73,92,.24);

    border-radius:
        48% 52% 50% 47% /
        50% 48% 53% 47%;

    transform:
        rotate(4deg);

    pointer-events: none;
}


[data-theme="journal"] .journal-category-pencil-circle::after {
    content: "";

    position: absolute;

    inset: 3px -2px -2px 4px;

    border:
        1px solid
        rgba(53,73,92,.11);

    border-radius:
        52% 48% 46% 54% /
        47% 53% 49% 51%;

    transform:
        rotate(-5deg);
}


/* top 3 notes */

[data-theme="journal"] .journal-category-notes {
    display: flex;
    flex-direction: column;

    gap: 8px;

    min-width: 0;
}


[data-theme="journal"] .journal-category-note {
    position: relative;

    min-width: 0;

    padding:
        8px 9px 7px;

    border-radius:
        3px 9px 4px 8px;

    box-shadow:
        0 6px 14px -13px
        rgba(50,43,32,.55);
}


[data-theme="journal"] .journal-category-note-1 {
    background: #f4e9bf;
    transform: rotate(.6deg);
}

[data-theme="journal"] .journal-category-note-2 {
    background: #dce6ee;
    transform: rotate(-.6deg);
}

[data-theme="journal"] .journal-category-note-3 {
    background: #e5ded2;
    transform: rotate(.35deg);
}


[data-theme="journal"] .journal-category-note-top {
    display: flex;
    align-items: center;

    gap: 5px;

    min-width: 0;
}


[data-theme="journal"] .journal-category-note-dot {
    flex: 0 0 auto;

    width: 7px;
    height: 7px;

    border-radius: 50%;
}


[data-theme="journal"] .journal-category-note-top strong {
    overflow: hidden;

    color: #554d42;

    font:
        700 15px/1
        "Caveat",
        cursive;

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


[data-theme="journal"] .journal-category-note-bottom {
    display: flex;
    align-items: baseline;
    justify-content: space-between;

    gap: 5px;

    margin-top: 5px;
}


[data-theme="journal"] .journal-category-note-bottom span {
    color: #8c7e6c;

    font:
        700 13px/1
        "Caveat",
        cursive;
}


[data-theme="journal"] .journal-category-note-bottom b {
    overflow: hidden;

    color: #51483d;

    font:
        700 13px/1
        "Caveat",
        cursive;

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


/* мини-легенда под donut */

[data-theme="journal"] .journal-category-legend {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 5px 12px;

    margin-top: 15px;
    padding:
        12px 3px 0 20px;

    border-top:
        1px dashed
        rgba(53,73,92,.17);
}


[data-theme="journal"] .journal-category-line {
    display: grid;

    grid-template-columns:
        7px minmax(0, 1fr) auto;

    align-items: center;

    gap: 5px;

    min-width: 0;
}


[data-theme="journal"] .journal-category-line-dot {
    width: 6px;
    height: 6px;

    border-radius: 50%;
}


[data-theme="journal"] .journal-category-line-name {
    overflow: hidden;

    color: #776d60;

    font:
        600 11px/1
        "Caveat",
        cursive;

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


[data-theme="journal"] .journal-category-line-pct {
    color: #564f45;

    font:
        700 11px/1
        "Caveat",
        cursive;
}


[data-theme="journal"] .journal-category-empty {
    padding: 18px;

    color: #938778;

    font:
        700 17px/1.2
        "Caveat",
        cursive;

    text-align: center;
}


/* убиваем старый list-layout именно в Journal */

[data-theme="journal"] #categories > .theme-category-list,
[data-theme="journal"] #incomeCategories > .theme-category-list {
    display: none !important;
}


@media (max-width: 390px) {

    [data-theme="journal"] .journal-category-main {
        grid-template-columns:
            122px minmax(0, 1fr);

        gap: 9px;

        padding-left: 8px;
    }

    [data-theme="journal"] .journal-category-donut-wrap {
        width: 116px;
        height: 116px;
    }

    [data-theme="journal"] .journal-category-donut-hole {
        inset: 27px;
    }

    [data-theme="journal"] .journal-category-note {
        padding: 7px 7px 6px;
    }

    [data-theme="journal"] .journal-category-note-top strong {
        font-size: 13px;
    }

    [data-theme="journal"] .journal-category-note-bottom b {
        font-size: 11px;
    }

    [data-theme="journal"] .journal-category-legend {
        gap: 5px 8px;
        padding-left: 12px;
    }

}


/* =========================================================
   CALM V2 — SCANDINAVIAN / WELLNESS FINANCE
========================================================= */

:root[data-theme="calm"] {
    --calm-bg: #eef2ed;
    --calm-card: #f8faf7;
    --calm-text: #29332d;
    --calm-muted: #87948b;
    --calm-line: #dce4dc;

    --calm-sage: #789687;
    --calm-sage-soft: #b9cabf;
    --calm-sand: #cbbba0;
    --calm-coral: #c18b74;
}


/* PAGE */

[data-theme="calm"] body {
    background:
        radial-gradient(
            circle at 50% -10%,
            rgba(255,255,255,.80),
            transparent 36%
        ),
        var(--calm-bg) !important;
}


/* PERIOD */

[data-theme="calm"] .top {
    margin-bottom:
        18px !important;
}

[data-theme="calm"] .period {
    color:
        var(--calm-muted);

    font-size:
        9px !important;

    letter-spacing:
        .16em !important;
}


/* =========================================================
   HERO
========================================================= */

[data-theme="calm"] .balance-hero {
    height:
        238px !important;

    margin:
        0 0 17px !important;

    overflow:
        visible;
}


/* большой очень тонкий круг */

[data-theme="calm"] .theme-balance-ring {
    width:
        210px !important;

    height:
        210px !important;

    background:
        conic-gradient(
            var(--calm-sage)
            var(--theme-ring-pct),
            rgba(120,150,135,.13) 0
        ) !important;
}

[data-theme="calm"] .theme-balance-ring::after {
    inset:
        3px !important;

    background:
        var(--calm-bg) !important;
}


[data-theme="calm"] .hero-main-copy {
    position:
        relative;

    z-index:
        2;

    max-width:
        190px;
}


[data-theme="calm"] .hero-label {
    margin-bottom:
        9px !important;

    color:
        var(--calm-muted);

    font-size:
        8px !important;

    letter-spacing:
        .18em !important;
}


[data-theme="calm"] .hero-value {
    color:
        var(--calm-text) !important;

    font:
        400 clamp(38px, 11vw, 50px)/.95
        "Newsreader",
        Georgia,
        serif !important;

    letter-spacing:
        -.035em;
}


/* =========================================================
   INCOME / EXPENSE / METRICS
========================================================= */

[data-theme="calm"] .income-expense-summary,
[data-theme="calm"] .metrics {
    margin:
        0 8px !important;
}


[data-theme="calm"] .income-expense-card,
[data-theme="calm"] .metric {
    min-height:
        54px;

    padding:
        15px 2px !important;

    border-bottom:
        1px solid
        var(--calm-line) !important;
}


[data-theme="calm"] .income-expense-label,
[data-theme="calm"] .metric-label {
    color:
        var(--calm-muted);

    font-size:
        12px !important;

    font-weight:
        400;
}


[data-theme="calm"] .income-expense-value {
    color:
        var(--calm-text);

    font:
        400 22px/1
        "Newsreader",
        Georgia,
        serif !important;
}


[data-theme="calm"] .income-value {
    color:
        var(--calm-sage) !important;
}


[data-theme="calm"] .expense-value {
    color:
        var(--calm-coral) !important;
}


[data-theme="calm"] .metric-value {
    color:
        var(--calm-text);

    font:
        400 19px/1
        "Newsreader",
        Georgia,
        serif !important;
}


/* =========================================================
   SECTIONS
========================================================= */

[data-theme="calm"] #overviewView > .section {
    margin-top:
        44px !important;

    padding-top:
        0 !important;

    border-top:
        0 !important;
}


[data-theme="calm"] .section-head {
    justify-content:
        center !important;

    margin-bottom:
        18px;
}


[data-theme="calm"] .section-title {
    color:
        var(--calm-text);

    font:
        italic 400 23px/1.1
        "Newsreader",
        Georgia,
        serif !important;
}


/* switch */

[data-theme="calm"] .dynamics-switch {
    margin-top:
        13px;

    padding:
        4px;

    border:
        1px solid
        var(--calm-line);

    border-radius:
        999px;

    background:
        rgba(248,250,247,.72);
}


[data-theme="calm"] .dynamics-switch-btn {
    border-radius:
        999px;

    color:
        var(--calm-muted);

    font-size:
        9px;
}


[data-theme="calm"] .dynamics-switch-btn.active {
    background:
        var(--calm-text) !important;

    color:
        #f8faf7 !important;

    box-shadow:
        none !important;
}


/* =========================================================
   CALM CHART READOUT
========================================================= */

[data-theme="calm"] .calm-chart-shell {
    margin-top:
        4px;
}


[data-theme="calm"] .calm-chart-readout {
    display:
        grid;

    grid-template-columns:
        1fr auto;

    align-items:
        end;

    gap:
        18px;

    margin:
        0 3px 13px;

    padding:
        0 3px 13px;

    border-bottom:
        1px solid
        var(--calm-line);
}


[data-theme="calm"] .calm-chart-readout span {
    display:
        block;

    margin-bottom:
        5px;

    color:
        var(--calm-muted);

    font-size:
        8px;

    line-height:
        1;

    letter-spacing:
        .12em;

    text-transform:
        uppercase;
}


[data-theme="calm"] .calm-chart-readout-date strong {
    color:
        var(--calm-text);

    font:
        400 19px/1
        "Newsreader",
        Georgia,
        serif;
}


[data-theme="calm"] .calm-chart-readout-value {
    text-align:
        right;
}


[data-theme="calm"] .calm-chart-readout-value strong {
    color:
        var(--calm-text);

    font:
        400 clamp(23px, 7vw, 31px)/.95
        "Newsreader",
        Georgia,
        serif;

    white-space:
        nowrap;
}


[data-theme="calm"] #calmChartValue.positive {
    color:
        var(--calm-sage);
}


[data-theme="calm"] #calmChartValue.negative {
    color:
        var(--calm-coral);
}


/* =========================================================
   CALM GRAPH
========================================================= */

[data-theme="calm"] .calm-chart-wrap {
    padding:
        6px 0 0;

    border-radius:
        22px;

    background:
        linear-gradient(
            180deg,
            rgba(248,250,247,.82),
            rgba(248,250,247,.28)
        );
}


[data-theme="calm"] .calm-chart {
    display:
        block;

    width:
        100%;

    height:
        205px;

    color:
        var(--calm-sage);

    touch-action:
        pan-y;

    -webkit-user-select:
        none;

    user-select:
        none;
}


[data-theme="calm"] .calm-chart-grid {
    stroke:
        rgba(112,135,120,.10);

    stroke-width:
        1;

    stroke-dasharray:
        2 8;

    vector-effect:
        non-scaling-stroke;
}


[data-theme="calm"] .calm-chart-zero {
    stroke:
        rgba(193,139,116,.22);

    stroke-width:
        1;

    stroke-dasharray:
        3 5;

    vector-effect:
        non-scaling-stroke;
}


[data-theme="calm"] .calm-chart-area {
    fill:
        url(#calmAreaGradient);

    color:
        var(--calm-sage);

    pointer-events:
        none;
}


[data-theme="calm"] .calm-chart-line {
    fill:
        none;

    stroke:
        var(--calm-sage);

    stroke-width:
        2.4;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

    vector-effect:
        non-scaling-stroke;

    pointer-events:
        none;
}


[data-theme="calm"] .calm-chart-dot {
    fill:
        var(--calm-card);

    stroke:
        var(--calm-sage);

    stroke-width:
        1.7;

    vector-effect:
        non-scaling-stroke;

    opacity:
        .35;

    transition:
        opacity .14s ease,
        r .14s ease,
        fill .14s ease;
}


[data-theme="calm"] .calm-chart-dot.selected {
    r:
        6.5;

    opacity:
        1;

    fill:
        var(--calm-sage);

    stroke:
        var(--calm-card);
}


[data-theme="calm"] .calm-chart-cursor {
    opacity:
        0;

    stroke:
        rgba(74,95,82,.27);

    stroke-width:
        1;

    stroke-dasharray:
        3 6;

    vector-effect:
        non-scaling-stroke;

    pointer-events:
        none;
}


[data-theme="calm"] .calm-chart-cursor.show {
    opacity:
        1;
}


[data-theme="calm"] .calm-chart-day {
    fill:
        #96a198;

    font:
        10px
        system-ui,
        sans-serif;
}


[data-theme="calm"] .calm-chart-footer {
    display:
        flex;

    justify-content:
        space-between;

    gap:
        12px;

    margin-top:
        8px;

    padding:
        0 4px;

    color:
        #9ba59e;

    font-size:
        8px;

    letter-spacing:
        .04em;
}


/* старый tooltip */

[data-theme="calm"] #spendingDynamics .line-chart-tooltip {
    display:
        none !important;
}


/* =========================================================
   SECONDARY METRICS
========================================================= */

[data-theme="calm"] .dynamics-metrics-grid {
    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        0 22px;

    margin-top:
        23px;
}


[data-theme="calm"] .dynamics-stat {
    min-height:
        67px;

    padding:
        13px 0 !important;

    border:
        0 !important;

    border-bottom:
        1px solid
        var(--calm-line) !important;

    background:
        transparent !important;
}


[data-theme="calm"] .dynamics-stat-label {
    color:
        var(--calm-muted);

    font-size:
        9px;

    line-height:
        1.2;
}


[data-theme="calm"] .dynamics-stat-value {
    margin-top:
        7px;

    color:
        var(--calm-text);

    font:
        400 19px/1
        "Newsreader",
        Georgia,
        serif;
}


/* подсказка */

[data-theme="calm"] .chart-hint {
    font-size:
        0;
}


[data-theme="calm"] .chart-hint::after {
    content:
        "Коснись или проведи пальцем";

    color:
        #9ba59e;

    font-size:
        9px;
}


/* =========================================================
   CATEGORIES
========================================================= */

[data-theme="calm"] .theme-category-list {
    gap:
        0 !important;
}


[data-theme="calm"] .theme-cat-row {
    display:
        grid;

    grid-template-columns:
        30px
        minmax(0, 1fr)
        auto;

    align-items:
        center;

    gap:
        12px;

    padding:
        15px 2px !important;

    border-bottom:
        1px solid
        var(--calm-line);
}


[data-theme="calm"] .theme-cat-icon {
    display:
        grid;

    width:
        30px !important;

    height:
        30px !important;

    place-items:
        center;

    border-radius:
        50% !important;

    background:
        rgba(120,150,135,.08) !important;

    font-size:
        15px;
}


[data-theme="calm"] .theme-cat-copy {
    min-width:
        0;
}


[data-theme="calm"] .theme-cat-name {
    color:
        var(--calm-text);

    font-size:
        12px;

    font-weight:
        400;
}


[data-theme="calm"] .theme-cat-meter {
    display:
        block !important;

    width:
        100% !important;

    height:
        3px !important;

    margin-top:
        8px;

    overflow:
        hidden;

    border-radius:
        99px;

    background:
        rgba(120,150,135,.12) !important;
}


[data-theme="calm"] .theme-cat-meter i {
    display:
        block;

    height:
        100%;

    border-radius:
        inherit;

    background:
        var(--calm-sage) !important;
}


[data-theme="calm"] .theme-cat-value {
    color:
        var(--calm-text);

    font:
        400 16px/1
        "Newsreader",
        Georgia,
        serif !important;

    white-space:
        nowrap;
}


[data-theme="calm"] .theme-cat-value small {
    color:
        var(--calm-muted);

    font:
        9px
        system-ui,
        sans-serif;
}


/* expensive days остаются скрыты */

[data-theme="calm"] #overviewView > .section:has(#expensiveDays) {
    display:
        none !important;
}


/* =========================================================
   NAV
========================================================= */

[data-theme="calm"] .nav-inner {
    background:
        rgba(248,250,247,.94) !important;

    border:
        1px solid
        rgba(201,213,203,.85) !important;

    box-shadow:
        0 12px 32px -22px
        rgba(49,65,54,.28);
}


[data-theme="calm"] .nav-item {
    color:
        #97a198;
}


[data-theme="calm"] .nav-item.active {
    color:
        var(--calm-text) !important;

    font-weight:
        600;
}


@media (max-width: 390px) {

    [data-theme="calm"] .balance-hero {
        height:
            215px !important;
    }

    [data-theme="calm"] .theme-balance-ring {
        width:
            192px !important;

        height:
            192px !important;
    }

    [data-theme="calm"] .hero-value {
        font-size:
            41px !important;
    }

    [data-theme="calm"] .calm-chart {
        height:
            185px;
    }

    [data-theme="calm"] .calm-chart-readout {
        gap:
            8px;
    }

    [data-theme="calm"] .calm-chart-readout-value strong {
        font-size:
            24px;
    }

    [data-theme="calm"] .dynamics-metrics-grid {
        gap:
            0 14px;
    }

}


[data-theme="game"]
.theme-game-progress-head span:first-child {
    font-size: 0;
}

[data-theme="game"]
.theme-game-progress-head span:first-child::after {
    content: "HP МЕСЯЦА";
    font-size: 10px;
}



/* =========================================================
   GAME V3 — FINAL HARD RESET
   ========================================================= */

[data-theme="game"] {
    --g-ink: #241c15;
    --g-bg: #fff8ed;
    --g-white: #fffefa;
    --g-purple: #6c5ce7;
    --g-purple-dark: #5445c5;
    --g-yellow: #ffb020;
    --g-mint: #20c9a6;
    --g-coral: #ff7566;
    --g-blue: #6ec6ff;

    background: var(--g-bg) !important;
    color: var(--g-ink) !important;

    font-family:
        "Baloo 2",
        "Arial Rounded MT Bold",
        Arial,
        sans-serif !important;
}


/* =========================================================
   ОБЩИЙ GAME RESET
========================================================= */

[data-theme="game"] #overviewView,
[data-theme="game"] #expensesView,
[data-theme="game"] #paymentsView,
[data-theme="game"] #settingsView {
    color: var(--g-ink) !important;

    font-family:
        "Baloo 2",
        "Arial Rounded MT Bold",
        Arial,
        sans-serif !important;
}


[data-theme="game"] h1,
[data-theme="game"] h2,
[data-theme="game"] h3,
[data-theme="game"] strong,
[data-theme="game"] button,
[data-theme="game"] input,
[data-theme="game"] select {
    font-family:
        "Baloo 2",
        "Arial Rounded MT Bold",
        Arial,
        sans-serif !important;
}


/* =========================================================
   HERO — PLAYER CARD
========================================================= */

[data-theme="game"] .balance-hero {
    position: relative !important;

    min-height: 220px !important;

    padding:
        23px 19px
        19px !important;

    overflow: hidden !important;

    border:
        3px solid
        var(--g-ink) !important;

    border-radius:
        26px 20px 28px 19px !important;

    background:
        radial-gradient(
            circle at 85% 5%,
            rgba(255,255,255,.18),
            transparent 31%
        ),
        linear-gradient(
            145deg,
            #7869ef,
            var(--g-purple)
        ) !important;

    box-shadow:
        6px 6px 0
        var(--g-ink) !important;

    color: #fff !important;
}


[data-theme="game"] .balance-hero::before {
    content: "PLAYER 01";

    position: absolute;

    top: 13px;
    right: 14px;

    z-index: 4;

    padding: 5px 8px;

    border:
        2px solid
        var(--g-ink);

    border-radius: 8px;

    background:
        var(--g-yellow);

    color:
        var(--g-ink);

    font-size: 8px;
    font-weight: 900;

    letter-spacing: .08em;

    transform: rotate(2deg);
}


[data-theme="game"] .balance-hero::after {
    content: "₸" !important;

    position: absolute !important;

    right: -4px !important;
    bottom: -48px !important;

    color:
        rgba(255,255,255,.09) !important;

    font-size:
        150px !important;

    font-weight:
        900 !important;

    line-height: 1 !important;
}


[data-theme="game"] .hero-main-copy {
    position: relative;

    z-index: 3;
}


[data-theme="game"] .hero-label {
    color:
        rgba(255,255,255,.72) !important;

    font-size: 9px !important;
    font-weight: 800 !important;

    letter-spacing: .08em !important;

    text-transform: uppercase;
}


[data-theme="game"] .hero-value {
    margin-top: 8px !important;

    color: #fff !important;

    font-size:
        clamp(38px, 12vw, 52px) !important;

    font-weight: 900 !important;
    line-height: .95 !important;

    letter-spacing: -.035em;

    text-shadow:
        3px 3px 0
        rgba(36,28,21,.35);
}


/* =========================================================
   HP МЕСЯЦА
========================================================= */

[data-theme="game"] .theme-game-progress {
    position: relative !important;
    z-index: 3 !important;

    display: block !important;

    margin-top: 19px !important;
}


[data-theme="game"] .theme-game-progress-head {
    display: flex !important;

    justify-content: space-between !important;

    align-items: center !important;

    margin-bottom: 6px !important;

    color: #fff !important;

    font-size: 10px !important;
    font-weight: 900 !important;
}


[data-theme="game"]
.theme-game-progress-head span:first-child {
    font-size: 0 !important;
}


[data-theme="game"]
.theme-game-progress-head span:first-child::after {
    content: "HP МЕСЯЦА";

    font-size: 10px !important;

    letter-spacing: .04em;
}


[data-theme="game"] .theme-game-progress-track {
    position: relative !important;

    display: block !important;

    height: 17px !important;

    overflow: hidden !important;

    border:
        3px solid
        var(--g-ink) !important;

    border-radius: 10px !important;

    background:
        #44389b !important;

    box-shadow:
        inset 0 2px 0
        rgba(0,0,0,.17) !important;
}


[data-theme="game"] .theme-game-progress-track i {
    display: block !important;

    height: 100% !important;

    background:
        linear-gradient(
            90deg,
            #ffd35d,
            var(--g-yellow)
        ) !important;

    border-right:
        2px solid
        var(--g-ink) !important;
}


/* =========================================================
   ДОХОД / РАСХОД
========================================================= */

[data-theme="game"] .income-expense-summary {
    gap: 10px !important;

    margin-top: 18px !important;
}


[data-theme="game"] .income-expense-card {
    min-height: 82px !important;

    padding:
        13px 14px !important;

    border:
        2.5px solid
        var(--g-ink) !important;

    border-radius:
        15px !important;

    box-shadow:
        4px 4px 0
        var(--g-ink) !important;

    text-align: left !important;
}


[data-theme="game"]
.income-expense-card:first-child {
    background:
        #dff8ee !important;
}


[data-theme="game"]
.income-expense-card:last-child {
    background:
        #ffe2dc !important;
}


[data-theme="game"] .income-expense-label {
    color:
        #6e665d !important;

    font-size: 9px !important;
    font-weight: 800 !important;

    letter-spacing: .06em;

    text-transform: uppercase;
}


[data-theme="game"] .income-expense-value {
    position: static !important;

    display: block !important;

    margin:
        6px 0 0 !important;

    padding: 0 !important;

    transform: none !important;

    text-align: left !important;

    font-size: 23px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
}


[data-theme="game"] .income-value {
    color:
        #168969 !important;
}


[data-theme="game"] .expense-value {
    color:
        #c94f44 !important;
}


/* =========================================================
   СЕГОДНЯ / 7 ДНЕЙ
========================================================= */

[data-theme="game"] .metrics {
    gap: 10px !important;

    margin-top: 12px !important;
}


[data-theme="game"] .metric {
    min-height: 74px !important;

    padding:
        12px 14px !important;

    border:
        2.5px solid
        var(--g-ink) !important;

    border-radius:
        15px !important;

    background:
        var(--g-white) !important;

    box-shadow:
        4px 4px 0
        var(--g-ink) !important;
}


[data-theme="game"] .metric-label {
    color:
        #746a60 !important;

    font-size: 9px !important;
    font-weight: 800 !important;

    text-transform: uppercase;
}


[data-theme="game"] .metric-value {
    margin-top: 6px !important;

    color:
        var(--g-ink) !important;

    font-size: 21px !important;
    font-weight: 900 !important;
}


/* =========================================================
   СЕКЦИИ
========================================================= */

[data-theme="game"]
#overviewView > .section {
    margin-top: 26px !important;

    padding:
        16px !important;

    border:
        2.5px solid
        var(--g-ink) !important;

    border-radius:
        20px !important;

    background:
        var(--g-white) !important;

    box-shadow:
        5px 5px 0
        var(--g-ink) !important;
}


[data-theme="game"] .section-head {
    align-items: center !important;
}


[data-theme="game"] .section-title {
    color:
        var(--g-ink) !important;

    font-size: 21px !important;
    font-weight: 900 !important;

    line-height: 1.05 !important;
}


[data-theme="game"] .section-head::after {
    content: "★" !important;

    margin-left: auto;

    color:
        var(--g-yellow);

    font-size: 22px;

    -webkit-text-stroke:
        1.5px
        var(--g-ink);

    transform: rotate(9deg);
}


/* =========================================================
   РАСХОДЫ / ДОХОДЫ / БАЛАНС SWITCH
========================================================= */

[data-theme="game"] .dynamics-switch {
    display: flex !important;

    width: max-content;

    margin-top: 13px !important;

    padding: 3px !important;

    border:
        2px solid
        var(--g-ink) !important;

    border-radius:
        12px !important;

    background:
        #fff !important;

    box-shadow:
        2px 2px 0
        var(--g-ink) !important;
}


[data-theme="game"] .dynamics-switch-btn {
    min-height: 29px !important;

    padding:
        5px 10px !important;

    border: 0 !important;

    border-radius:
        8px !important;

    background:
        transparent !important;

    color:
        #655c53 !important;

    font-size: 9px !important;
    font-weight: 800 !important;
}


[data-theme="game"]
.dynamics-switch-btn.active {
    background:
        var(--g-yellow) !important;

    color:
        var(--g-ink) !important;
}


/* =========================================================
   DAY CARD
========================================================= */

[data-theme="game"] .game-chart-shell {
    margin-top: 13px !important;
}


[data-theme="game"] .game-level-card {
    display: grid !important;

    grid-template-columns:
        58px minmax(0,1fr) auto !important;

    align-items: center !important;

    gap: 10px !important;

    margin:
        0 0 14px !important;

    padding:
        10px 11px !important;

    border:
        2.5px solid
        var(--g-ink) !important;

    border-radius:
        15px !important;

    background:
        #eeeaff !important;

    box-shadow:
        3px 3px 0
        var(--g-ink) !important;
}


[data-theme="game"] .game-level-card-day {
    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;
    justify-content: center !important;

    width: 58px !important;
    height: 52px !important;

    border:
        2px solid
        var(--g-ink) !important;

    border-radius:
        10px !important;

    background:
        var(--g-purple) !important;

    color: #fff !important;
}


[data-theme="game"]
.game-level-card-day span {
    color:
        rgba(255,255,255,.80) !important;

    font-size: 7px !important;
    font-weight: 900 !important;

    line-height: 1 !important;

    letter-spacing: .13em;
}


[data-theme="game"]
.game-level-card-day strong {
    margin-top: 2px;

    color: #fff !important;

    font-size: 26px !important;
    font-weight: 900 !important;

    line-height: .9 !important;
}


[data-theme="game"]
.game-level-card-info {
    min-width: 0 !important;
}


[data-theme="game"]
.game-level-card-info span {
    display: block !important;

    color:
        #837799 !important;

    font-size: 7px !important;
    font-weight: 900 !important;

    letter-spacing: .10em;
}


[data-theme="game"]
.game-level-card-info strong {
    position: static !important;

    display: block !important;

    overflow: hidden !important;

    margin:
        4px 0 0 !important;

    padding: 0 !important;

    color:
        var(--g-ink) !important;

    font-size:
        clamp(19px, 6vw, 27px) !important;

    font-weight: 900 !important;

    line-height: 1 !important;

    white-space: nowrap !important;
    text-overflow: ellipsis !important;

    transform: none !important;
}


[data-theme="game"] .game-level-status {
    padding:
        6px 8px !important;

    border:
        2px solid
        var(--g-ink) !important;

    border-radius:
        8px !important;

    background:
        var(--g-yellow) !important;

    color:
        var(--g-ink) !important;

    font-size: 8px !important;
    font-weight: 900 !important;

    line-height: 1 !important;

    transform: rotate(2deg);
}


[data-theme="game"]
.game-level-status[data-status="empty"] {
    background:
        #ddd7ce !important;
}


[data-theme="game"]
.game-level-status[data-status="boss"],
[data-theme="game"]
.game-level-status[data-status="danger"],
[data-theme="game"]
.game-level-status[data-status="ouch"] {
    background:
        var(--g-coral) !important;
}


[data-theme="game"]
.game-level-status[data-status="loot"],
[data-theme="game"]
.game-level-status[data-status="bonus"],
[data-theme="game"]
.game-level-status[data-status="win"] {
    background:
        var(--g-mint) !important;
}


/* =========================================================
   КАРТА МЕСЯЦА
========================================================= */

[data-theme="game"] .game-map {
    position: relative !important;

    overflow: hidden !important;

    padding:
        10px 8px 3px !important;

    border:
        2.5px solid
        var(--g-ink) !important;

    border-radius:
        17px !important;

    background:
        #fff !important;

    box-shadow:
        inset 0 0 0 3px
        rgba(108,92,231,.035);
}


[data-theme="game"] .game-map::before {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background-image:
        radial-gradient(
            rgba(108,92,231,.14) 1px,
            transparent 1px
        );

    background-size:
        14px 14px;
}


[data-theme="game"] .game-map-top {
    position: relative !important;

    z-index: 2 !important;

    display: flex !important;

    justify-content:
        space-between !important;

    padding:
        1px 5px 4px !important;

    color:
        #81758c !important;

    font-size: 8px !important;
    font-weight: 900 !important;

    letter-spacing: .09em;
}


[data-theme="game"] .game-chart {
    position: relative !important;

    z-index: 2 !important;

    display: block !important;

    width: 100% !important;
    height: 190px !important;

    touch-action: pan-y !important;

    user-select: none !important;
    -webkit-user-select: none !important;
}


[data-theme="game"] .game-map-ground {
    stroke:
        rgba(36,28,21,.18) !important;

    stroke-width: 1.5 !important;

    stroke-dasharray:
        5 7 !important;

    vector-effect:
        non-scaling-stroke;
}


[data-theme="game"] .game-map-area {
    fill:
        url(#gameAreaGradient) !important;

    pointer-events: none;
}


[data-theme="game"] .game-map-path-shadow {
    fill: none !important;

    stroke:
        var(--g-ink) !important;

    stroke-width: 7 !important;

    stroke-linecap:
        round !important;

    stroke-linejoin:
        round !important;

    vector-effect:
        non-scaling-stroke;

    pointer-events: none;
}


[data-theme="game"] .game-map-path {
    fill: none !important;

    stroke:
        var(--g-purple) !important;

    stroke-width: 3.5 !important;

    stroke-linecap:
        round !important;

    stroke-linejoin:
        round !important;

    vector-effect:
        non-scaling-stroke;

    pointer-events: none;
}


/* точки уровней */

[data-theme="game"] .game-level-node-ring {
    fill:
        var(--g-white) !important;

    stroke:
        var(--g-ink) !important;

    stroke-width:
        2.5 !important;

    vector-effect:
        non-scaling-stroke;
}


[data-theme="game"] .game-level-node-core {
    fill:
        var(--g-purple) !important;
}


[data-theme="game"]
.game-level-node.boss
.game-level-node-ring {
    fill:
        var(--g-coral) !important;
}


[data-theme="game"]
.game-level-node.boss
.game-level-node-core {
    fill:
        var(--g-yellow) !important;
}


[data-theme="game"]
.game-level-node.selected
.game-level-node-ring {
    fill:
        var(--g-yellow) !important;

    stroke-width:
        3.5 !important;
}


[data-theme="game"]
.game-level-node.selected
.game-level-node-core {
    fill:
        var(--g-ink) !important;
}


[data-theme="game"] .game-map-cursor {
    opacity: 0;

    stroke:
        rgba(36,28,21,.48) !important;

    stroke-width:
        1.3 !important;

    stroke-dasharray:
        3 5 !important;

    vector-effect:
        non-scaling-stroke;

    pointer-events: none;
}


[data-theme="game"]
.game-map-cursor.show {
    opacity: 1 !important;
}


[data-theme="game"] .game-level-label {
    fill:
        #746a7f !important;

    font-size:
        11px !important;

    font-weight:
        900 !important;
}


/* =========================================================
   STATS ПОД ГРАФИКОМ
========================================================= */

[data-theme="game"] .dynamics-metrics-grid {
    gap:
        9px !important;

    margin-top:
        14px !important;
}


[data-theme="game"] .dynamics-stat {
    min-height: 69px !important;

    padding:
        11px !important;

    border:
        2px solid
        var(--g-ink) !important;

    border-radius:
        12px !important;

    box-shadow:
        3px 3px 0
        var(--g-ink) !important;
}


[data-theme="game"]
.dynamics-stat:nth-child(1) {
    background:
        #fff0c7 !important;
}

[data-theme="game"]
.dynamics-stat:nth-child(2) {
    background:
        #ddf7ed !important;
}

[data-theme="game"]
.dynamics-stat:nth-child(3) {
    background:
        #eeeaff !important;
}

[data-theme="game"]
.dynamics-stat:nth-child(4) {
    background:
        #ffe1db !important;
}


[data-theme="game"] .dynamics-stat-label {
    color:
        #73685d !important;

    font-size: 8px !important;
    font-weight: 800 !important;
}


[data-theme="game"] .dynamics-stat-value {
    margin-top: 5px !important;

    color:
        var(--g-ink) !important;

    font-size: 17px !important;
    font-weight: 900 !important;
}


/* =========================================================
   CATEGORY QUESTS
========================================================= */

[data-theme="game"] .theme-category-list {
    display: grid !important;

    grid-template-columns:
        1fr 1fr !important;

    gap:
        10px !important;
}


[data-theme="game"] .theme-cat-row {
    display: grid !important;

    grid-template-columns:
        38px minmax(0,1fr)
        auto !important;

    align-items:
        center !important;

    gap: 8px !important;

    min-width: 0 !important;

    padding:
        10px !important;

    border:
        2px solid
        var(--g-ink) !important;

    border-radius:
        13px !important;

    background:
        #fff !important;

    box-shadow:
        3px 3px 0
        var(--g-ink) !important;
}


[data-theme="game"]
.theme-cat-row:nth-child(3n+1) {
    background:
        #fff0c9 !important;
}

[data-theme="game"]
.theme-cat-row:nth-child(3n+2) {
    background:
        #ddf7ed !important;
}

[data-theme="game"]
.theme-cat-row:nth-child(3n) {
    background:
        #eeeaff !important;
}


[data-theme="game"] .theme-cat-icon {
    display: grid !important;

    width: 36px !important;
    height: 36px !important;

    place-items: center !important;

    border:
        2px solid
        var(--g-ink) !important;

    border-radius:
        10px !important;

    background:
        #fff !important;

    font-size:
        16px !important;
}


[data-theme="game"] .theme-cat-copy {
    min-width: 0 !important;
}


[data-theme="game"] .theme-cat-name {
    overflow: hidden !important;

    color:
        var(--g-ink) !important;

    font-size: 10px !important;
    font-weight: 800 !important;

    white-space: nowrap !important;
    text-overflow: ellipsis !important;
}


[data-theme="game"] .theme-cat-meter {
    display: block !important;

    width: 100% !important;
    height: 7px !important;

    margin-top: 5px !important;

    overflow: hidden !important;

    border:
        1.5px solid
        var(--g-ink) !important;

    border-radius:
        5px !important;

    background:
        #fff !important;
}


[data-theme="game"] .theme-cat-meter i {
    display: block !important;

    height: 100% !important;

    background:
        var(--g-yellow) !important;

    border-right:
        1px solid
        var(--g-ink) !important;
}


[data-theme="game"] .theme-cat-value {
    color:
        var(--g-ink) !important;

    font-size: 12px !important;
    font-weight: 900 !important;

    white-space: nowrap;
}


[data-theme="game"] .theme-cat-value small {
    display: none !important;
}


/* =========================================================
   SETTINGS — ЧТОБЫ НЕ БЫЛО САЙТА ИЗ 2007
========================================================= */

[data-theme="game"] #settingsView .section,
[data-theme="game"] #settingsView > div {
    font-family:
        "Baloo 2",
        "Arial Rounded MT Bold",
        Arial,
        sans-serif !important;
}


[data-theme="game"] #settingsView .section-title {
    font-size: 20px !important;
    font-weight: 900 !important;
}


[data-theme="game"] .theme-option {
    border:
        2px solid
        var(--g-ink) !important;

    border-radius:
        14px !important;

    background:
        #fff !important;

    color:
        var(--g-ink) !important;

    box-shadow:
        2px 2px 0
        rgba(36,28,21,.18);
}


[data-theme="game"]
.theme-option.active,
[data-theme="game"]
.theme-option[data-theme="game"].active {
    border-color:
        var(--g-purple) !important;

    box-shadow:
        3px 3px 0
        var(--g-purple) !important;
}


[data-theme="game"] .theme-option-name {
    color:
        var(--g-ink) !important;

    font-size: 11px !important;
    font-weight: 800 !important;
}


/* =========================================================
   NAV
========================================================= */

[data-theme="game"] .nav-inner {
    padding:
        5px !important;

    border:
        2.5px solid
        var(--g-ink) !important;

    border-radius:
        20px !important;

    background:
        #fff !important;

    box-shadow:
        5px 5px 0
        var(--g-ink) !important;
}


[data-theme="game"] .nav-item {
    border-radius:
        13px !important;

    color:
        #82786d !important;
}


[data-theme="game"] .nav-item.active {
    background:
        var(--g-mint) !important;

    color:
        #fff !important;

    font-weight:
        900 !important;

    box-shadow:
        inset 0 0 0 2px
        var(--g-ink) !important;
}


/* старое */

[data-theme="game"]
#overviewView > .section:has(#expensiveDays) {
    display: none !important;
}


[data-theme="game"] .chart-hint {
    font-size: 0 !important;
}


[data-theme="game"] .chart-hint::after {
    content:
        "Тапни или веди пальцем по карте";

    color:
        #867b70;

    font-size: 9px !important;
    font-weight: 800 !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 390px) {

    [data-theme="game"] .game-level-card {
        grid-template-columns:
            50px minmax(0,1fr)
            auto !important;

        gap:
            7px !important;

        padding:
            8px !important;
    }

    [data-theme="game"]
    .game-level-card-day {
        width:
            50px !important;

        height:
            46px !important;
    }

    [data-theme="game"]
    .game-level-card-day strong {
        font-size:
            22px !important;
    }

    [data-theme="game"]
    .game-level-card-info strong {
        font-size:
            18px !important;
    }

    [data-theme="game"]
    .game-level-status {
        padding:
            5px !important;

        font-size:
            7px !important;
    }

    [data-theme="game"] .game-chart {
        height:
            175px !important;
    }

    [data-theme="game"] .theme-category-list {
        grid-template-columns:
            1fr 1fr !important;

        gap:
            9px !important;
    }

    [data-theme="game"] .theme-cat-row {
        grid-template-columns:
            32px minmax(0,1fr) !important;

        padding:
            9px !important;
    }

    [data-theme="game"] .theme-cat-icon {
        width:
            31px !important;

        height:
            31px !important;
    }

    [data-theme="game"] .theme-cat-value {
        grid-column:
            2 !important;

        justify-self:
            start !important;

        margin-top:
            3px;
    }

}



/* =========================================================
   THEME PICKER — MINIATURE THEME POSTERS
========================================================= */

.theme-preview {
    position: relative !important;

    display: block !important;

    height: 72px !important;

    margin-bottom: 8px !important;

    overflow: hidden !important;

    border-radius: 10px !important;

    isolation: isolate;

    box-sizing: border-box !important;
}

.theme-preview::before,
.theme-preview::after {
    content: "";

    position: absolute;

    pointer-events: none;
}


/* =========================================================
   CLASSIC
   dark analytics / blue chart
========================================================= */

.theme-preview-classic {
    border:
        1px solid
        #2c3645 !important;

    background:
        linear-gradient(
            rgba(56,189,248,.06) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(56,189,248,.045) 1px,
            transparent 1px
        ),
        linear-gradient(
            145deg,
            #182636,
            #101922
        ) !important;

    background-size:
        100% 18px,
        25px 100%,
        100% 100% !important;
}


/* линия графика */

.theme-preview-classic::before {
    left: 9px;
    right: 9px;

    bottom: 14px;

    height: 34px;

    background:
        linear-gradient(
            90deg,
            #148cff,
            #48cbff
        );

    clip-path:
        polygon(
            0 84%,
            10% 80%,
            19% 68%,
            29% 72%,
            39% 52%,
            49% 58%,
            61% 31%,
            73% 39%,
            84% 15%,
            100% 3%,
            100% 12%,
            84% 25%,
            73% 49%,
            61% 41%,
            49% 68%,
            39% 62%,
            29% 82%,
            19% 78%,
            10% 90%,
            0 94%
        );

    filter:
        drop-shadow(
            0 0 4px
            rgba(56,189,248,.42)
        );
}


/* маленький KPI */

.theme-preview-classic::after {
    top: 9px;
    left: 10px;

    width: 36px;
    height: 5px;

    border-radius: 5px;

    background:
        #f5f7fb;

    box-shadow:
        0 10px 0 -1px
        rgba(140,145,163,.55);
}


/* =========================================================
   LEDGER
   paper / accounting / stamp
========================================================= */

.theme-preview-ledger {
    border:
        1px solid
        #c9c4b4 !important;

    background:
        repeating-linear-gradient(
            0deg,
            rgba(50,48,42,.035) 0,
            rgba(50,48,42,.035) 1px,
            transparent 1px,
            transparent 4px
        ),
        linear-gradient(
            90deg,
            transparent 0 31%,
            rgba(85,77,61,.16) 31% 31.5%,
            transparent 31.5% 67%,
            rgba(85,77,61,.16) 67% 67.5%,
            transparent 67.5%
        ),
        #f5f2e9 !important;
}


/* бухгалтерские строки */

.theme-preview-ledger::before {
    left: 8px;
    right: 8px;
    top: 15px;

    height: 1px;

    background:
        #31322e;

    box-shadow:
        0 16px 0
        rgba(49,50,46,.34),
        0 31px 0
        rgba(49,50,46,.25);
}


/* красная печать */

.theme-preview-ledger::after {
    right: 12px;
    top: 13px;

    width: 28px;
    height: 28px;

    border:
        1.5px solid
        rgba(142,59,46,.55);

    border-radius: 50%;

    transform:
        rotate(-12deg);

    box-shadow:
        inset 0 0 0 3px
        #f5f2e9,
        inset 0 0 0 4px
        rgba(142,59,46,.20);
}


/* =========================================================
   NIGHT
   neon / donut / glowing line
========================================================= */

.theme-preview-night {
    border:
        1px solid
        #243352 !important;

    background:
        radial-gradient(
            circle at 82% 18%,
            rgba(63,224,197,.16),
            transparent 28%
        ),
        radial-gradient(
            circle at 12% 100%,
            rgba(87,113,255,.15),
            transparent 38%
        ),
        #0c1220 !important;
}


/* neon donut */

.theme-preview-night::before {
    left: 12px;
    top: 14px;

    width: 38px;
    height: 38px;

    border-radius: 50%;

    background:
        conic-gradient(
            #3fe0c5 0 35%,
            #5f7fff 35% 67%,
            #ff8570 67% 84%,
            #263657 84%
        );

    -webkit-mask:
        radial-gradient(
            circle,
            transparent 0 45%,
            #000 47%
        );

    mask:
        radial-gradient(
            circle,
            transparent 0 45%,
            #000 47%
        );

    filter:
        drop-shadow(
            0 0 5px
            rgba(63,224,197,.35)
        );
}


/* glowing ticker */

.theme-preview-night::after {
    left: 58px;
    right: 9px;

    bottom: 18px;

    height: 28px;

    background:
        #3fe0c5;

    clip-path:
        polygon(
            0 82%,
            15% 74%,
            27% 80%,
            40% 52%,
            55% 59%,
            70% 25%,
            84% 37%,
            100% 5%,
            100% 13%,
            84% 47%,
            70% 35%,
            55% 69%,
            40% 62%,
            27% 90%,
            15% 84%,
            0 92%
        );

    filter:
        drop-shadow(
            0 0 5px
            rgba(63,224,197,.55)
        );
}


/* =========================================================
   JOURNAL
   notebook / tape / handwritten curve
========================================================= */

.theme-preview-journal {
    border:
        1px solid
        #ded3bd !important;

    background:
        linear-gradient(
            90deg,
            transparent 0 15px,
            rgba(193,101,78,.20) 15px 16px,
            transparent 16px
        ),
        repeating-linear-gradient(
            0deg,
            transparent 0,
            transparent 14px,
            rgba(76,107,138,.13) 15px
        ),
        #fcfaf3 !important;
}


/* tape */

.theme-preview-journal::before {
    width: 34px;
    height: 11px;

    top: -2px;
    left: 50%;

    transform:
        translateX(-50%)
        rotate(-4deg);

    background:
        rgba(231,202,137,.58);

    box-shadow:
        0 1px 2px
        rgba(80,68,45,.08);
}


/* hand drawn line */

.theme-preview-journal::after {
    left: 23px;
    right: 9px;

    bottom: 13px;

    height: 27px;

    background:
        #4c6b8a;

    clip-path:
        polygon(
            0 78%,
            12% 72%,
            23% 48%,
            34% 61%,
            48% 29%,
            58% 40%,
            69% 22%,
            82% 44%,
            100% 13%,
            100% 19%,
            82% 52%,
            69% 30%,
            58% 48%,
            48% 37%,
            34% 69%,
            23% 56%,
            12% 80%,
            0 86%
        );

    opacity: .78;

    transform:
        rotate(-1deg);
}


/* =========================================================
   CARD
   premium black card / copper
========================================================= */

.theme-preview-card {
    border:
        1px solid
        #4b3d2d !important;

    background:
        radial-gradient(
            circle at 85% 15%,
            rgba(214,166,118,.10),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            #2b251c,
            #17130f
        ) !important;

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.035);
}


/* chip */

.theme-preview-card::before {
    left: 13px;
    top: 15px;

    width: 28px;
    height: 20px;

    border:
        1px solid
        #8c6642;

    border-radius: 5px;

    background:
        linear-gradient(
            90deg,
            transparent 46%,
            rgba(119,83,48,.35) 47% 53%,
            transparent 54%
        ),
        linear-gradient(
            transparent 46%,
            rgba(119,83,48,.35) 47% 53%,
            transparent 54%
        ),
        linear-gradient(
            145deg,
            #d8b188,
            #a9794f
        );
}


/* premium graph + digits */

.theme-preview-card::after {
    left: 13px;
    right: 12px;

    bottom: 13px;

    height: 23px;

    border-bottom:
        2px solid
        rgba(215,162,115,.52);

    background:
        linear-gradient(
            90deg,
            rgba(215,162,115,.82),
            rgba(170,189,173,.75)
        );

    clip-path:
        polygon(
            0 84%,
            13% 78%,
            26% 62%,
            39% 69%,
            52% 43%,
            65% 51%,
            77% 25%,
            90% 34%,
            100% 8%,
            100% 16%,
            90% 42%,
            77% 33%,
            65% 59%,
            52% 51%,
            39% 77%,
            26% 70%,
            13% 86%,
            0 92%
        );

    opacity: .90;
}


/* =========================================================
   CALM
   soft sage / wellness / breathing curve
========================================================= */

.theme-preview-calm {
    border:
        1px solid
        #d8e0d9 !important;

    background:
        radial-gradient(
            circle at 76% 5%,
            rgba(255,255,255,.95),
            transparent 35%
        ),
        linear-gradient(
            150deg,
            #f8faf7,
            #edf2ee
        ) !important;
}


/* floating circle */

.theme-preview-calm::before {
    right: 13px;
    top: 11px;

    width: 30px;
    height: 30px;

    border:
        1.5px solid
        rgba(120,150,135,.32);

    border-radius: 50%;

    box-shadow:
        inset 0 0 0 6px
        #f5f8f5;
}


/* slow wave */

.theme-preview-calm::after {
    left: 10px;
    right: 10px;

    bottom: 13px;

    height: 26px;

    background:
        #789687;

    clip-path:
        polygon(
            0 71%,
            10% 66%,
            20% 57%,
            30% 42%,
            40% 34%,
            50% 38%,
            60% 49%,
            70% 60%,
            80% 55%,
            90% 38%,
            100% 28%,
            100% 36%,
            90% 46%,
            80% 63%,
            70% 68%,
            60% 57%,
            50% 46%,
            40% 42%,
            30% 50%,
            20% 65%,
            10% 74%,
            0 79%
        );

    opacity: .72;
}


/* =========================================================
   GAME
   RPG map / nodes / quest path
========================================================= */

.theme-preview-game {
    border:
        2px solid
        #241c15 !important;

    background:
        radial-gradient(
            #8f83ef 1px,
            transparent 1px
        ),
        linear-gradient(
            145deg,
            #f4f0ff,
            #eee9ff
        ) !important;

    background-size:
        11px 11px,
        100% 100% !important;

    box-shadow:
        inset 0 0 0 3px
        rgba(108,92,231,.055);
}


/* game route */

.theme-preview-game::before {
    left: 9px;
    right: 9px;

    bottom: 14px;

    height: 33px;

    background:
        var(--g-purple, #6c5ce7);

    clip-path:
        polygon(
            0 75%,
            12% 69%,
            22% 49%,
            33% 62%,
            45% 34%,
            57% 47%,
            68% 21%,
            80% 37%,
            91% 12%,
            100% 24%,
            100% 34%,
            91% 22%,
            80% 47%,
            68% 31%,
            57% 57%,
            45% 44%,
            33% 72%,
            22% 59%,
            12% 79%,
            0 85%
        );

    filter:
        drop-shadow(
            2px 2px 0
            rgba(36,28,21,.30)
        );
}


/* boss node */

.theme-preview-game::after {
    right: 16px;
    top: 12px;

    width: 17px;
    height: 17px;

    border:
        2px solid
        #241c15;

    border-radius: 50%;

    background:
        #ffb020;

    box-shadow:
        -30px 21px 0 -4px
        #20c9a6,
        -30px 21px 0 -2px
        #241c15,
        -57px 9px 0 -5px
        #6c5ce7,
        -57px 9px 0 -3px
        #241c15;
}


/* =========================================================
   PICKER CARD POLISH
========================================================= */

.theme-option {
    min-width: 0;
}

.theme-option-name {
    display: block;

    padding:
        0 2px 1px;

    line-height: 1.1;
}



/* =========================================================
   GAME — SETTINGS POLISH
========================================================= */

/* ---------------------------------------------------------
   SETTINGS BLOCKS
--------------------------------------------------------- */

[data-theme="game"] #settingsView .settings-block {
    position: relative;

    margin-bottom: 20px !important;

    padding: 14px !important;

    border:
        2px solid
        rgba(108,92,231,.18) !important;

    border-radius:
        18px !important;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.98),
            rgba(248,244,255,.96)
        ) !important;

    box-shadow:
        0 8px 22px -18px
        rgba(36,28,21,.35) !important;
}


/* убираем тяжёлую чёрную рамку именно у блока оформления */

[data-theme="game"] #settingsView .theme-settings-block {
    border:
        2px solid
        #d8d0ff !important;

    background:
        linear-gradient(
            145deg,
            #fffdf9,
            #f5f1ff
        ) !important;

    box-shadow:
        0 10px 26px -20px
        rgba(84,69,197,.40) !important;
}


/* декоративная игровая полоска сверху */

[data-theme="game"] #settingsView .theme-settings-block::before {
    content: "";

    position: absolute;

    top: 0;
    left: 18px;
    right: 18px;

    height: 4px;

    border-radius:
        0 0 8px 8px;

    background:
        linear-gradient(
            90deg,
            #6c5ce7,
            #20c9a6,
            #ffb020
        );

    opacity: .85;
}


/* ---------------------------------------------------------
   THEME PICKER
--------------------------------------------------------- */

[data-theme="game"] .theme-picker {
    gap: 12px !important;
}


[data-theme="game"] .theme-option {
    padding: 8px !important;

    border:
        1.5px solid
        #ddd6ca !important;

    border-radius:
        15px !important;

    background:
        #fffefa !important;

    box-shadow:
        0 6px 16px -14px
        rgba(36,28,21,.30) !important;

    transition:
        transform .15s ease,
        border-color .15s ease,
        box-shadow .15s ease;
}


[data-theme="game"] .theme-option:active {
    transform:
        scale(.985);
}


[data-theme="game"] .theme-option.active {
    border-color:
        var(--g-purple) !important;

    outline:
        2px solid
        rgba(108,92,231,.18) !important;

    outline-offset:
        1px !important;

    box-shadow:
        0 8px 18px -14px
        rgba(108,92,231,.50) !important;
}


[data-theme="game"] .theme-option-name {
    color:
        var(--g-ink) !important;

    font-size: 11px !important;
    font-weight: 800 !important;
}


/* ---------------------------------------------------------
   CATEGORY SETTINGS LIST
--------------------------------------------------------- */

[data-theme="game"] #settingsExpenseCategories,
[data-theme="game"] #settingsIncomeCategories {
    overflow: hidden;

    border:
        1.5px solid
        rgba(108,92,231,.16);

    border-radius:
        15px;

    background:
        rgba(255,255,255,.76);
}


/*
 * Сами строки категорий.
 * Убираем "табличную" чёрную рамку.
 */

[data-theme="game"] #settingsExpenseCategories > *,
[data-theme="game"] #settingsIncomeCategories > * {
    border:
        0 !important;

    border-bottom:
        1px solid
        rgba(36,28,21,.10) !important;

    background:
        transparent !important;

    box-shadow:
        none !important;
}


[data-theme="game"] #settingsExpenseCategories > *:last-child,
[data-theme="game"] #settingsIncomeCategories > *:last-child {
    border-bottom:
        0 !important;
}


/* ---------------------------------------------------------
   ИКОНКИ КАТЕГОРИЙ
--------------------------------------------------------- */

/*
 * Ловим самые частые классы иконок в настройках.
 * Если у тебя там конкретный класс другой —
 * этот блок всё равно не ломает ничего.
 */

[data-theme="game"] #settingsExpenseCategories .category-icon,
[data-theme="game"] #settingsIncomeCategories .category-icon,
[data-theme="game"] #settingsExpenseCategories .settings-category-icon,
[data-theme="game"] #settingsIncomeCategories .settings-category-icon,
[data-theme="game"] #settingsExpenseCategories .category-emoji,
[data-theme="game"] #settingsIncomeCategories .category-emoji {
    display: grid !important;

    place-items: center !important;

    width: 36px !important;
    height: 36px !important;

    border:
        1.5px solid
        rgba(108,92,231,.28) !important;

    border-radius:
        11px !important;

    background:
        linear-gradient(
            145deg,
            #f1edff,
            #fff8df
        ) !important;

    color:
        var(--g-ink) !important;

    box-shadow:
        0 4px 10px -8px
        rgba(36,28,21,.35) !important;
}


/* ---------------------------------------------------------
   КНОПКИ РЕДАКТИРОВАНИЯ
--------------------------------------------------------- */

[data-theme="game"] #settingsExpenseCategories button,
[data-theme="game"] #settingsIncomeCategories button {
    border:
        1.5px solid
        rgba(108,92,231,.24) !important;

    border-radius:
        10px !important;

    background:
        #f3efff !important;

    color:
        var(--g-purple-dark) !important;

    box-shadow:
        none !important;
}


[data-theme="game"] #settingsExpenseCategories button:active,
[data-theme="game"] #settingsIncomeCategories button:active {
    background:
        #e9e3ff !important;
}


/* ---------------------------------------------------------
   ADD CATEGORY BUTTONS
--------------------------------------------------------- */

[data-theme="game"] .settings-add {
    margin-top:
        12px !important;

    border:
        1.5px dashed
        rgba(108,92,231,.40) !important;

    border-radius:
        12px !important;

    background:
        #f8f5ff !important;

    color:
        var(--g-purple-dark) !important;

    font-weight:
        800 !important;

    box-shadow:
        none !important;
}


/* ---------------------------------------------------------
   TITLES / HINTS
--------------------------------------------------------- */

[data-theme="game"] .settings-title {
    color:
        var(--g-ink) !important;

    font-size:
        17px !important;

    font-weight:
        900 !important;
}


[data-theme="game"] .settings-hint {
    color:
        #8c8175 !important;

    font-size:
        11px !important;
}




/* =========================================================
   GAME — SETTINGS ICONS / ALIASES FINAL FIX
========================================================= */


/* ---------------------------------------------------------
   CATEGORY EMOJI
   Расходы + доходы
--------------------------------------------------------- */

[data-theme="game"] #settingsExpenseCategories .settings-category-emoji,
[data-theme="game"] #settingsIncomeCategories .settings-category-emoji {
    display: grid !important;
    place-items: center !important;

    flex: 0 0 38px !important;

    width: 38px !important;
    height: 38px !important;

    margin: 0 !important;
    padding: 0 !important;

    border:
        1.5px solid
        rgba(108,92,231,.24) !important;

    border-radius:
        12px !important;

    background:
        linear-gradient(
            145deg,
            #f1edff 0%,
            #fff8df 100%
        ) !important;

    color:
        #241c15 !important;

    font-size:
        18px !important;

    line-height:
        1 !important;

    box-shadow:
        0 4px 10px -8px
        rgba(36,28,21,.32) !important;
}


/* чуть разные жетоны, чтобы список был живее */

[data-theme="game"]
#settingsExpenseCategories
.settings-category:nth-child(3n + 1)
.settings-category-emoji,

[data-theme="game"]
#settingsIncomeCategories
.settings-category:nth-child(3n + 1)
.settings-category-emoji {
    background:
        linear-gradient(
            145deg,
            #fff2dc,
            #fff9eb
        ) !important;

    border-color:
        rgba(255,176,32,.32) !important;
}


[data-theme="game"]
#settingsExpenseCategories
.settings-category:nth-child(3n + 2)
.settings-category-emoji,

[data-theme="game"]
#settingsIncomeCategories
.settings-category:nth-child(3n + 2)
.settings-category-emoji {
    background:
        linear-gradient(
            145deg,
            #e8fbf5,
            #f5fffc
        ) !important;

    border-color:
        rgba(32,201,166,.28) !important;
}


[data-theme="game"]
#settingsExpenseCategories
.settings-category:nth-child(3n + 3)
.settings-category-emoji,

[data-theme="game"]
#settingsIncomeCategories
.settings-category:nth-child(3n + 3)
.settings-category-emoji {
    background:
        linear-gradient(
            145deg,
            #eeeaff,
            #faf8ff
        ) !important;

    border-color:
        rgba(108,92,231,.28) !important;
}


/* ---------------------------------------------------------
   CATEGORY ROW ALIGNMENT
--------------------------------------------------------- */

[data-theme="game"] .settings-category-name {
    display: flex !important;

    align-items: center !important;

    gap: 11px !important;

    min-width: 0 !important;
}


[data-theme="game"] .settings-category-text {
    min-width: 0 !important;

    color:
        #241c15 !important;

    font-weight:
        800 !important;
}


/* ---------------------------------------------------------
   CATEGORY EDIT PENCIL
--------------------------------------------------------- */

[data-theme="game"] .category-edit {
    display: grid !important;

    place-items: center !important;

    width: 38px !important;
    height: 38px !important;

    padding: 0 !important;

    border:
        1.5px solid
        rgba(108,92,231,.25) !important;

    border-radius:
        11px !important;

    background:
        #f3efff !important;

    color:
        #5847cf !important;

    font-size:
        18px !important;

    line-height:
        1 !important;

    box-shadow:
        none !important;
}


/* ---------------------------------------------------------
   TRAINED WORDS / ALIASES
--------------------------------------------------------- */

[data-theme="game"] .alias-row {
    border-color:
        rgba(36,28,21,.10) !important;

    background:
        transparent !important;
}


/* тот самый отдельный карандаш обученных слов */

[data-theme="game"] .alias-edit {
    display: grid !important;

    place-items: center !important;

    flex: 0 0 38px !important;

    width: 38px !important;
    height: 38px !important;

    margin: 0 !important;
    padding: 0 !important;

    border:
        1.5px solid
        rgba(108,92,231,.25) !important;

    border-radius:
        11px !important;

    background:
        #f3efff !important;

    color:
        #5847cf !important;

    font-size:
        18px !important;

    line-height:
        1 !important;

    box-shadow:
        none !important;
}


[data-theme="game"] .alias-edit:active,
[data-theme="game"] .category-edit:active {
    transform:
        translateY(1px) !important;

    background:
        #e9e3ff !important;
}


/* название обученного слова */

[data-theme="game"] .alias-name {
    color:
        #241c15 !important;

    font-weight:
        800 !important;
}


[data-theme="game"] .alias-category {
    color:
        #8c8175 !important;
}




/* =========================================================
   SETTINGS V2 — ALL THEMES
   Game intentionally excluded
========================================================= */


/* =========================================================
   COMMON GEOMETRY
========================================================= */

:is(
    [data-theme="classic"],
    [data-theme="ledger"],
    [data-theme="night"],
    [data-theme="journal"],
    [data-theme="card"],
    [data-theme="calm"]
) .settings-category-name {
    display: flex !important;
    align-items: center !important;

    gap: 11px !important;

    min-width: 0 !important;
}


:is(
    [data-theme="classic"],
    [data-theme="ledger"],
    [data-theme="night"],
    [data-theme="journal"],
    [data-theme="card"],
    [data-theme="calm"]
) .settings-category-emoji {
    display: grid !important;
    place-items: center !important;

    flex: 0 0 38px !important;

    width: 38px !important;
    height: 38px !important;

    margin: 0 !important;
    padding: 0 !important;

    font-size: 18px !important;
    line-height: 1 !important;
}


:is(
    [data-theme="classic"],
    [data-theme="ledger"],
    [data-theme="night"],
    [data-theme="journal"],
    [data-theme="card"],
    [data-theme="calm"]
) .category-edit,

:is(
    [data-theme="classic"],
    [data-theme="ledger"],
    [data-theme="night"],
    [data-theme="journal"],
    [data-theme="card"],
    [data-theme="calm"]
) .alias-edit {
    display: grid !important;
    place-items: center !important;

    flex: 0 0 38px !important;

    width: 38px !important;
    height: 38px !important;

    margin: 0 !important;
    padding: 0 !important;

    font-size: 18px !important;
    line-height: 1 !important;
}


:is(
    [data-theme="classic"],
    [data-theme="ledger"],
    [data-theme="night"],
    [data-theme="journal"],
    [data-theme="card"],
    [data-theme="calm"]
) .alias-name {
    font-weight: 700 !important;
}


:is(
    [data-theme="classic"],
    [data-theme="ledger"],
    [data-theme="night"],
    [data-theme="journal"],
    [data-theme="card"],
    [data-theme="calm"]
) #settingsExpenseCategories,

:is(
    [data-theme="classic"],
    [data-theme="ledger"],
    [data-theme="night"],
    [data-theme="journal"],
    [data-theme="card"],
    [data-theme="calm"]
) #settingsIncomeCategories {
    overflow: hidden;
}


/* =========================================================
   CLASSIC
   dark dashboard / cyan
========================================================= */

[data-theme="classic"] #settingsView .settings-block {
    border:
        1px solid
        #2b3948 !important;

    border-radius:
        17px !important;

    background:
        linear-gradient(
            145deg,
            #172431,
            #131e29
        ) !important;

    box-shadow:
        0 12px 28px -22px
        rgba(0,0,0,.7) !important;
}


[data-theme="classic"] .theme-settings-block {
    border-color:
        rgba(56,189,248,.25) !important;
}


[data-theme="classic"] #settingsExpenseCategories,
[data-theme="classic"] #settingsIncomeCategories {
    border:
        1px solid
        #293848;

    border-radius:
        13px;

    background:
        rgba(10,18,25,.28);
}


[data-theme="classic"] .settings-category {
    border-bottom:
        1px solid
        rgba(130,155,175,.12) !important;
}


[data-theme="classic"] .settings-category-emoji {
    border:
        1px solid
        rgba(56,189,248,.24) !important;

    border-radius:
        11px !important;

    background:
        linear-gradient(
            145deg,
            #203647,
            #192b39
        ) !important;

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.025);
}


[data-theme="classic"] .category-edit,
[data-theme="classic"] .alias-edit {
    border:
        1px solid
        rgba(56,189,248,.24) !important;

    border-radius:
        11px !important;

    background:
        #1b3040 !important;

    color:
        #48c6fa !important;

    box-shadow:
        none !important;
}


[data-theme="classic"] .category-edit:active,
[data-theme="classic"] .alias-edit:active {
    background:
        #224459 !important;
}


[data-theme="classic"] .settings-add {
    border:
        1px dashed
        rgba(56,189,248,.34) !important;

    background:
        rgba(56,189,248,.055) !important;

    color:
        #4fc9fa !important;
}


/* =========================================================
   LEDGER
   accounting paper / ink / stamp
========================================================= */

[data-theme="ledger"] #settingsView .settings-block {
    border:
        1px solid
        #bbb4a2 !important;

    border-radius:
        2px !important;

    background:
        repeating-linear-gradient(
            0deg,
            rgba(31,35,31,.018) 0,
            rgba(31,35,31,.018) 1px,
            transparent 1px,
            transparent 4px
        ),
        #f8f6ef !important;

    box-shadow:
        none !important;
}


[data-theme="ledger"] .theme-settings-block {
    border-top:
        3px double
        #3e443d !important;
}


[data-theme="ledger"] #settingsExpenseCategories,
[data-theme="ledger"] #settingsIncomeCategories {
    border:
        1px solid
        #bdb6a4;

    border-radius:
        0;

    background:
        rgba(255,255,255,.18);
}


[data-theme="ledger"] .settings-category {
    border-bottom:
        1px dashed
        #c4bdab !important;
}


[data-theme="ledger"] .settings-category-emoji {
    border:
        1px solid
        #a8a08d !important;

    border-radius:
        50% !important;

    background:
        #efebe0 !important;

    filter:
        saturate(.78);
}


[data-theme="ledger"] .category-edit,
[data-theme="ledger"] .alias-edit {
    border:
        1px solid
        #9c9180 !important;

    border-radius:
        1px !important;

    background:
        #eee9dc !important;

    color:
        #8e3b2e !important;

    box-shadow:
        none !important;

    font-family:
        "Courier New",
        monospace !important;
}


[data-theme="ledger"] .settings-add {
    border:
        1px dashed
        #9c9180 !important;

    border-radius:
        1px !important;

    background:
        transparent !important;

    color:
        #3f473f !important;

    font-family:
        "Courier New",
        monospace !important;
}


/* =========================================================
   NIGHT
   neon / glass
========================================================= */

[data-theme="night"] #settingsView .settings-block {
    border:
        1px solid
        rgba(73,110,160,.30) !important;

    border-radius:
        18px !important;

    background:
        radial-gradient(
            circle at 95% 0%,
            rgba(63,224,197,.055),
            transparent 36%
        ),
        linear-gradient(
            145deg,
            #131f36,
            #10192c
        ) !important;

    box-shadow:
        0 18px 36px -30px
        rgba(0,0,0,.9),
        inset 0 1px 0
        rgba(255,255,255,.025) !important;
}


[data-theme="night"] .theme-settings-block {
    border-color:
        rgba(63,224,197,.24) !important;
}


[data-theme="night"] #settingsExpenseCategories,
[data-theme="night"] #settingsIncomeCategories {
    border:
        1px solid
        rgba(73,110,160,.25);

    border-radius:
        14px;

    background:
        rgba(5,12,24,.26);
}


[data-theme="night"] .settings-category {
    border-bottom:
        1px solid
        rgba(110,140,190,.11) !important;
}


[data-theme="night"] .settings-category-emoji {
    border:
        1px solid
        rgba(63,224,197,.25) !important;

    border-radius:
        12px !important;

    background:
        radial-gradient(
            circle at 30% 20%,
            rgba(63,224,197,.13),
            transparent 55%
        ),
        #182743 !important;

    box-shadow:
        0 0 12px -8px
        rgba(63,224,197,.8);
}


[data-theme="night"]
.settings-category:nth-child(3n+2)
.settings-category-emoji {
    border-color:
        rgba(95,127,255,.28) !important;

    background:
        radial-gradient(
            circle at 30% 20%,
            rgba(95,127,255,.14),
            transparent 55%
        ),
        #18243e !important;
}


[data-theme="night"]
.settings-category:nth-child(3n+3)
.settings-category-emoji {
    border-color:
        rgba(255,133,112,.24) !important;
}


[data-theme="night"] .category-edit,
[data-theme="night"] .alias-edit {
    border:
        1px solid
        rgba(63,224,197,.27) !important;

    border-radius:
        11px !important;

    background:
        #172b3d !important;

    color:
        #3fe0c5 !important;

    box-shadow:
        0 0 12px -9px
        rgba(63,224,197,.85) !important;
}


[data-theme="night"] .settings-add {
    border:
        1px dashed
        rgba(63,224,197,.30) !important;

    background:
        rgba(63,224,197,.045) !important;

    color:
        #55e6ce !important;
}


/* =========================================================
   JOURNAL
   notebook / paper / handwritten
========================================================= */

[data-theme="journal"] #settingsView .settings-block {
    position: relative;

    border:
        1px solid
        rgba(112,98,78,.12) !important;

    border-radius:
        5px 16px 7px 13px !important;

    background:
        linear-gradient(
            90deg,
            transparent 0 18px,
            rgba(193,101,78,.10) 18px 19px,
            transparent 19px
        ),
        repeating-linear-gradient(
            0deg,
            transparent 0,
            transparent 27px,
            rgba(76,107,138,.07) 28px
        ),
        #fcfaf3 !important;

    box-shadow:
        0 12px 25px -21px
        rgba(55,47,35,.45) !important;
}


[data-theme="journal"] .theme-settings-block {
    transform:
        rotate(-.1deg);
}


[data-theme="journal"] #settingsExpenseCategories,
[data-theme="journal"] #settingsIncomeCategories {
    border:
        1px solid
        rgba(112,98,78,.12);

    border-radius:
        4px 12px 5px 10px;

    background:
        rgba(255,255,255,.30);
}


[data-theme="journal"] .settings-category {
    border-bottom:
        1px dashed
        rgba(76,107,138,.15) !important;
}


[data-theme="journal"] .settings-category-emoji {
    border:
        1px solid
        rgba(76,107,138,.17) !important;

    border-radius:
        5px 12px 6px 10px !important;

    background:
        #f4e9bf !important;

    transform:
        rotate(-1deg);
}


[data-theme="journal"]
.settings-category:nth-child(3n+2)
.settings-category-emoji {
    background:
        #dce6ee !important;

    transform:
        rotate(.8deg);
}


[data-theme="journal"]
.settings-category:nth-child(3n+3)
.settings-category-emoji {
    background:
        #e7ddd0 !important;

    transform:
        rotate(-.4deg);
}


[data-theme="journal"] .category-edit,
[data-theme="journal"] .alias-edit {
    border:
        1px solid
        rgba(76,107,138,.18) !important;

    border-radius:
        4px 10px 5px 8px !important;

    background:
        #e7edf1 !important;

    color:
        #4c6b8a !important;

    box-shadow:
        none !important;

    transform:
        rotate(.6deg);

    font-family:
        "Caveat",
        cursive !important;

    font-size:
        22px !important;
}


[data-theme="journal"] .alias-edit {
    transform:
        rotate(-.5deg);
}


[data-theme="journal"] .settings-add {
    border:
        1px dashed
        rgba(76,107,138,.24) !important;

    border-radius:
        4px 11px 5px 9px !important;

    background:
        rgba(220,230,238,.38) !important;

    color:
        #4c6b8a !important;

    font-family:
        "Caveat",
        cursive !important;

    font-size:
        16px !important;
}


/* =========================================================
   CARD
   premium / copper / private banking
========================================================= */

[data-theme="card"] #settingsView .settings-block {
    border:
        1px solid
        rgba(122,95,65,.42) !important;

    border-radius:
        17px !important;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(215,162,115,.055),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            #272119,
            #1a1611
        ) !important;

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.025),
        0 18px 34px -28px
        rgba(0,0,0,.9) !important;
}


[data-theme="card"] .theme-settings-block {
    border-color:
        rgba(215,162,115,.30) !important;
}


[data-theme="card"] #settingsExpenseCategories,
[data-theme="card"] #settingsIncomeCategories {
    border:
        1px solid
        rgba(122,95,65,.32);

    border-radius:
        13px;

    background:
        rgba(12,10,8,.18);
}


[data-theme="card"] .settings-category {
    border-bottom:
        1px solid
        rgba(150,120,86,.14) !important;
}


[data-theme="card"] .settings-category-emoji {
    border:
        1px solid
        rgba(215,162,115,.26) !important;

    border-radius:
        11px !important;

    background:
        linear-gradient(
            145deg,
            #3a3025,
            #2a231b
        ) !important;

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.035);
}


[data-theme="card"] .category-edit,
[data-theme="card"] .alias-edit {
    border:
        1px solid
        rgba(215,162,115,.28) !important;

    border-radius:
        10px !important;

    background:
        linear-gradient(
            145deg,
            #382d23,
            #2a221a
        ) !important;

    color:
        #d7a273 !important;

    box-shadow:
        none !important;
}


[data-theme="card"] .settings-add {
    border:
        1px dashed
        rgba(215,162,115,.34) !important;

    background:
        rgba(215,162,115,.035) !important;

    color:
        #d9a778 !important;
}


/* =========================================================
   CALM
   sage / wellness / soft surfaces
========================================================= */

[data-theme="calm"] #settingsView .settings-block {
    border:
        1px solid
        rgba(120,150,135,.14) !important;

    border-radius:
        22px !important;

    background:
        linear-gradient(
            150deg,
            rgba(250,252,249,.96),
            rgba(242,247,243,.95)
        ) !important;

    box-shadow:
        0 16px 35px -29px
        rgba(60,83,68,.35) !important;
}


[data-theme="calm"] .theme-settings-block {
    border-color:
        rgba(120,150,135,.20) !important;
}


[data-theme="calm"] #settingsExpenseCategories,
[data-theme="calm"] #settingsIncomeCategories {
    border:
        1px solid
        rgba(120,150,135,.13);

    border-radius:
        17px;

    background:
        rgba(255,255,255,.42);
}


[data-theme="calm"] .settings-category {
    border-bottom:
        1px solid
        rgba(120,150,135,.11) !important;
}


[data-theme="calm"] .settings-category-emoji {
    border:
        1px solid
        rgba(120,150,135,.16) !important;

    border-radius:
        50% !important;

    background:
        #eaf2ec !important;

    box-shadow:
        none !important;
}


[data-theme="calm"]
.settings-category:nth-child(3n+2)
.settings-category-emoji {
    background:
        #f1ede3 !important;

    border-color:
        rgba(188,168,132,.17) !important;
}


[data-theme="calm"]
.settings-category:nth-child(3n+3)
.settings-category-emoji {
    background:
        #edf1f4 !important;

    border-color:
        rgba(128,148,165,.15) !important;
}


[data-theme="calm"] .category-edit,
[data-theme="calm"] .alias-edit {
    border:
        1px solid
        rgba(120,150,135,.16) !important;

    border-radius:
        50% !important;

    background:
        #edf3ee !important;

    color:
        #668270 !important;

    box-shadow:
        none !important;
}


[data-theme="calm"] .settings-add {
    border:
        1px dashed
        rgba(120,150,135,.24) !important;

    border-radius:
        16px !important;

    background:
        rgba(120,150,135,.035) !important;

    color:
        #688372 !important;
}


/* =========================================================
   TRAINED WORDS — ROW POLISH
========================================================= */

[data-theme="classic"] .alias-row,
[data-theme="night"] .alias-row,
[data-theme="card"] .alias-row {
    border-color:
        rgba(150,170,190,.11) !important;
}


[data-theme="ledger"] .alias-row {
    border-color:
        #c9c1af !important;

    border-style:
        dashed !important;
}


[data-theme="journal"] .alias-row {
    border-color:
        rgba(76,107,138,.14) !important;

    border-style:
        dashed !important;
}


[data-theme="calm"] .alias-row {
    border-color:
        rgba(120,150,135,.11) !important;
}


/* =========================================================
   ACTIVE / TOUCH
========================================================= */

:is(
    [data-theme="classic"],
    [data-theme="ledger"],
    [data-theme="night"],
    [data-theme="journal"],
    [data-theme="card"],
    [data-theme="calm"]
) .category-edit:active,

:is(
    [data-theme="classic"],
    [data-theme="ledger"],
    [data-theme="night"],
    [data-theme="journal"],
    [data-theme="card"],
    [data-theme="calm"]
) .alias-edit:active {
    transform:
        translateY(1px);
}


/* Journal keeps its handmade rotation */
[data-theme="journal"] .category-edit:active {
    transform:
        translateY(1px)
        rotate(.6deg);
}

[data-theme="journal"] .alias-edit:active {
    transform:
        translateY(1px)
        rotate(-.5deg);
}




/* =========================================================
   SETTINGS — GLOBAL PAGE PADDING
========================================================= */

#settingsView {
    box-sizing: border-box !important;

    padding-left: 12px !important;
    padding-right: 12px !important;
}


/*
 * Чтобы вложенные блоки не вылезали шире
 * из-за собственных border / padding.
 */

#settingsView .settings-block,
#settingsView .theme-settings-block,
#settingsView #settingsExpenseCategories,
#settingsView #settingsIncomeCategories,
#settingsView #aliasesList {
    max-width: 100% !important;

    box-sizing: border-box !important;
}


/*
 * Заголовок "Настройки" тоже держим
 * в одной вертикали с блоками.
 */

#settingsView > .section-head,
#settingsView > .settings-head {
    box-sizing: border-box !important;
}


/* узкие телефоны */

@media (max-width: 390px) {

    #settingsView {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

}


/* =========================================================
   SETTINGS — REVERT GLOBAL PAGE PADDING
========================================================= */

#settingsView {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

@media (max-width: 390px) {
    #settingsView {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}


/* =========================================================
   SETTINGS CATEGORIES — INNER HORIZONTAL PADDING
========================================================= */

#settingsExpenseCategories .settings-category,
#settingsIncomeCategories .settings-category {
    box-sizing: border-box !important;

    padding-left: 12px !important;
    padding-right: 12px !important;
}


/* чтобы первая/последняя строка тоже аккуратно сидели */

#settingsExpenseCategories .settings-category:first-child,
#settingsIncomeCategories .settings-category:first-child {
    padding-top: 10px !important;
}

#settingsExpenseCategories .settings-category:last-child,
#settingsIncomeCategories .settings-category:last-child {
    padding-bottom: 10px !important;
}


/* чуть больше воздуха между emoji и названием */

#settingsExpenseCategories .settings-category-name,
#settingsIncomeCategories .settings-category-name {
    gap: 12px !important;
}


/* кнопка карандаша не должна липнуть справа */

#settingsExpenseCategories .alias-actions,
#settingsIncomeCategories .alias-actions {
    margin-left: 10px !important;
    flex: 0 0 auto !important;
}



/* =========================================================
   SETTINGS — INNER SPACING FINAL
   all themes
========================================================= */


/* ---------------------------------------------------------
   ЗАГОЛОВКИ И ПОДСКАЗКИ БЛОКОВ
--------------------------------------------------------- */

#settingsView .settings-block > .settings-title,
#settingsView .settings-block > .settings-hint {
    box-sizing: border-box !important;

    padding-left: 12px !important;
    padding-right: 12px !important;
}


/* между заголовком и подсказкой */

#settingsView .settings-block > .settings-title {
    padding-top: 2px !important;
}

#settingsView .settings-block > .settings-hint {
    margin-top: 4px !important;
}


/* ---------------------------------------------------------
   THEME PICKER
   чтобы превью тоже не начинались от самой стенки блока
--------------------------------------------------------- */

#settingsView .theme-picker {
    box-sizing: border-box !important;

    padding-left: 12px !important;
    padding-right: 12px !important;
}


/* ---------------------------------------------------------
   CATEGORY LISTS
--------------------------------------------------------- */

#settingsExpenseCategories .settings-category,
#settingsIncomeCategories .settings-category {
    box-sizing: border-box !important;

    padding-left: 12px !important;
    padding-right: 12px !important;
}


/* ---------------------------------------------------------
   ОБУЧЕННЫЕ СЛОВА
--------------------------------------------------------- */

/*
 * У alias-строк отдельная разметка, поэтому предыдущий
 * category padding их не затрагивал.
 */

#settingsView .alias-row {
    box-sizing: border-box !important;

    padding-left: 12px !important;
    padding-right: 12px !important;
}


/* текст не должен липнуть к emoji / краям */

#settingsView .alias-row > :first-child,
#settingsView .alias-copy,
#settingsView .alias-info {
    min-width: 0 !important;
}


/* карандаш обученных слов */

#settingsView .alias-edit {
    flex: 0 0 38px !important;

    width: 38px !important;
    height: 38px !important;

    margin-left: 12px !important;
}


/* ---------------------------------------------------------
   КНОПКИ ДОБАВЛЕНИЯ
--------------------------------------------------------- */

#settingsView .settings-add {
    box-sizing: border-box !important;

    width: calc(100% - 24px) !important;

    margin-left: 12px !important;
    margin-right: 12px !important;
}


/* ---------------------------------------------------------
   НЕ ДВИГАЕМ САМ SETTINGS VIEW
--------------------------------------------------------- */

#settingsView {
    padding-left: 0 !important;
    padding-right: 0 !important;
}



/* =========================================================
   GAME — PIXEL HERO ANIMATION
========================================================= */

[data-theme="game"] .game-map {
    position: relative !important;
}


/* сам герой */

[data-theme="game"] .game-pixel-hero {
    position: absolute;

    z-index: 8;

    width: 24px;
    height: 28px;

    pointer-events: none;

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

    transition:
        left .12s linear,
        top .12s linear;

    filter:
        drop-shadow(
            2px 3px 0
            rgba(36,28,21,.24)
        );
}


/* тело персонажа */

[data-theme="game"] .game-pixel-hero-body {
    position: absolute;

    left: 4px;
    top: 6px;

    width: 16px;
    height: 18px;

    background:
        var(--g-purple);

    border:
        2px solid
        var(--g-ink);

    border-radius:
        4px 4px 3px 3px;

    box-shadow:
        inset 0 -5px 0
        var(--g-purple-dark);
}


/* голова */

[data-theme="game"] .game-pixel-hero-body::before {
    content: "";

    position: absolute;

    left: 3px;
    top: -8px;

    width: 8px;
    height: 8px;

    border:
        2px solid
        var(--g-ink);

    border-radius:
        3px;

    background:
        var(--g-yellow);
}


/* ноги */

[data-theme="game"] .game-pixel-hero-body::after {
    content: "";

    position: absolute;

    left: 1px;
    bottom: -7px;

    width: 5px;
    height: 7px;

    border:
        2px solid
        var(--g-ink);

    border-top: 0;

    background:
        var(--g-mint);

    box-shadow:
        8px 0 0
        var(--g-mint),
        8px 0 0 0
        var(--g-mint);
}


/* корона / boss indicator */

[data-theme="game"] .game-pixel-hero-crown {
    position: absolute;

    z-index: 5;

    left: 50%;
    top: -14px;

    opacity: 0;

    color:
        var(--g-yellow);

    font-size: 15px;

    -webkit-text-stroke:
        1.5px
        var(--g-ink);

    transform:
        translateX(-50%)
        rotate(-10deg)
        scale(.6);

    transition:
        opacity .15s ease,
        transform .15s ease;
}


/* прыжок при выборе дня */

[data-theme="game"] .game-pixel-hero.jump {
    animation:
        gameHeroJump
        .34s
        cubic-bezier(.2,.8,.3,1);
}


@keyframes gameHeroJump {

    0% {
        transform:
            translate(-50%, -115%)
            translateY(0)
            scale(1);
    }

    38% {
        transform:
            translate(-50%, -115%)
            translateY(-16px)
            scale(1.06,.94);
    }

    68% {
        transform:
            translate(-50%, -115%)
            translateY(-5px)
            scale(.97,1.04);
    }

    100% {
        transform:
            translate(-50%, -115%)
            translateY(0)
            scale(1);
    }

}


/* boss day */

[data-theme="game"] .game-pixel-hero.boss
.game-pixel-hero-crown {
    opacity: 1;

    transform:
        translateX(-50%)
        rotate(-7deg)
        scale(1);

    animation:
        gameBossCrown
        .9s
        ease-in-out
        infinite alternate;
}


@keyframes gameBossCrown {

    from {
        transform:
            translateX(-50%)
            translateY(0)
            rotate(-7deg)
            scale(1);
    }

    to {
        transform:
            translateX(-50%)
            translateY(-3px)
            rotate(7deg)
            scale(1.08);
    }

}


/* boss node slightly pulses */

[data-theme="game"]
.game-level-node.boss
.game-level-node-ring {
    transform-box: fill-box;
    transform-origin: center;

    animation:
        gameBossNodePulse
        1.25s
        ease-in-out
        infinite;
}


@keyframes gameBossNodePulse {

    0%,
    100% {
        transform:
            scale(1);

        opacity: 1;
    }

    50% {
        transform:
            scale(1.18);

        opacity: .86;
    }

}


/* selected point pops */

[data-theme="game"]
.game-level-node.selected
.game-level-node-core {
    transform-box: fill-box;
    transform-origin: center;

    animation:
        gameSelectedPop
        .26s
        ease-out;
}


@keyframes gameSelectedPop {

    0% {
        transform:
            scale(.5);
    }

    70% {
        transform:
            scale(1.4);
    }

    100% {
        transform:
            scale(1);
    }

}


/* subtle movement in HP bar */

[data-theme="game"]
.theme-game-progress-track i {
    position: relative;

    overflow: hidden;
}


[data-theme="game"]
.theme-game-progress-track i::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            110deg,
            transparent 0 35%,
            rgba(255,255,255,.35) 45%,
            transparent 55% 100%
        );

    transform:
        translateX(-120%);

    animation:
        gameHpShine
        3.2s
        ease-in-out
        infinite;
}


@keyframes gameHpShine {

    0%,
    65% {
        transform:
            translateX(-120%);
    }

    85% {
        transform:
            translateX(120%);
    }

    100% {
        transform:
            translateX(120%);
    }

}


/* accessibility */

@media (prefers-reduced-motion: reduce) {

    [data-theme="game"] .game-pixel-hero,
    [data-theme="game"] .game-pixel-hero *,
    [data-theme="game"] .game-level-node *,
    [data-theme="game"] .theme-game-progress-track i::after {
        animation:
            none !important;

        transition:
            none !important;
    }

}


/* =========================================================
   GAME — HERO CARD ANIMATION
========================================================= */

[data-theme="game"] .balance-hero {
    animation:
        gameCardEnter .52s
        cubic-bezier(.2,.85,.3,1)
        both;

    background-size:
        140% 140% !important;

    animation-name:
        gameCardEnter,
        gameCardBreath;

    animation-duration:
        .52s,
        7s;

    animation-timing-function:
        cubic-bezier(.2,.85,.3,1),
        ease-in-out;

    animation-delay:
        0s,
        .7s;

    animation-iteration-count:
        1,
        infinite;

    animation-fill-mode:
        both,
        both;

    animation-direction:
        normal,
        alternate;
}

@keyframes gameCardEnter {
    0% {
        opacity: 0;
        transform:
            translateY(10px)
            scale(.985);
    }

    70% {
        opacity: 1;
        transform:
            translateY(-2px)
            scale(1.006);
    }

    100% {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
    }
}

@keyframes gameCardBreath {
    from {
        background-position:
            10% 20%;
    }

    to {
        background-position:
            90% 80%;
    }
}


/* баланс */

[data-theme="game"] .hero-value {
    animation:
        gameBalancePop .52s
        cubic-bezier(.2,.9,.3,1)
        both;
}

@keyframes gameBalancePop {
    0% {
        opacity: 0;
        transform:
            translateY(8px)
            scale(.94);
    }

    65% {
        opacity: 1;
        transform:
            translateY(-1px)
            scale(1.035);
    }

    100% {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
    }
}


/* PLAYER 01 */

[data-theme="game"] .balance-hero::before {
    animation:
        gamePlayerBadgeFloat
        2.8s
        ease-in-out
        infinite alternate;
}

@keyframes gamePlayerBadgeFloat {
    from {
        transform:
            translateY(0)
            rotate(2deg);
    }

    to {
        transform:
            translateY(-3px)
            rotate(-1deg);
    }
}


/* HP track */

[data-theme="game"] .theme-game-progress-track {
    position:
        relative !important;

    overflow:
        hidden !important;
}

[data-theme="game"] .theme-game-progress-track::after {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;

    width: 32%;

    left: -40%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.24),
            transparent
        );

    transform:
        skewX(-18deg);

    animation:
        gameHpSweep
        3.8s
        ease-in-out
        infinite;
}

@keyframes gameHpSweep {
    0%,
    55% {
        left: -45%;
        opacity: 0;
    }

    65% {
        opacity: 1;
    }

    88% {
        left: 115%;
        opacity: 1;
    }

    100% {
        left: 115%;
        opacity: 0;
    }
}


/* HP fill — лёгкая пульсация */
[data-theme="game"] .theme-game-progress-track i {
    transform-origin:
        left center;

    animation:
        gameHpPulse
        2.4s
        ease-in-out
        infinite;
}

@keyframes gameHpPulse {
    0%,
    100% {
        filter:
            brightness(1);
    }

    50% {
        filter:
            brightness(1.12);
    }
}


/* label */
[data-theme="game"] .theme-game-progress-head {
    animation:
        gameHudFade
        .42s
        ease-out
        both;

    animation-delay:
        .12s;
}

@keyframes gameHudFade {
    from {
        opacity: 0;
        transform:
            translateY(4px);
    }

    to {
        opacity: 1;
        transform:
            translateY(0);
    }
}


/* не ломаем accessibility */

@media (prefers-reduced-motion: reduce) {

    [data-theme="game"] .balance-hero,
    [data-theme="game"] .hero-value,
    [data-theme="game"] .balance-hero::before,
    [data-theme="game"] .theme-game-progress-track::after,
    [data-theme="game"] .theme-game-progress-track i,
    [data-theme="game"] .theme-game-progress-head {
        animation:
            none !important;
    }

}


[data-theme="game"] .game-pixel-hero {
    display: none !important;
}


/* =========================================================
   GAME — HERO RUNNER
========================================================= */

[data-theme="game"] .game-runner {
    position: absolute;

    left: 18px;
    right: 18px;
    bottom: 11px;

    height: 50px;

    overflow: hidden;

    border-top:
        1px solid
        rgba(255,255,255,.10);

    cursor: pointer;
    touch-action: manipulation;

    z-index: 3;
}


[data-theme="game"] .game-runner-world {
    position: relative;

    width: 100%;
    height: 100%;
}


/* земля */

[data-theme="game"] .game-runner-ground {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 5px;

    height: 4px;

    border-radius: 4px;

    background:
        rgba(36,28,21,.72);

    box-shadow:
        0 -1px 0
        rgba(255,255,255,.06);
}


/* герой */

[data-theme="game"] .game-runner-hero {
    position: absolute;

    left: 13%;
    bottom: 9px;

    width: 18px;
    height: 24px;

    transform-origin:
        center bottom;

    animation:
        gameRunnerRun
        .34s
        steps(2,end)
        infinite;
}


[data-theme="game"] .game-runner-head {
    position: absolute;

    top: 0;
    left: 4px;

    width: 10px;
    height: 9px;

    border:
        2px solid
        var(--g-ink);

    border-radius:
        3px;

    background:
        var(--g-yellow);
}


[data-theme="game"] .game-runner-body {
    position: absolute;

    left: 2px;
    bottom: 0;

    width: 14px;
    height: 15px;

    border:
        2px solid
        var(--g-ink);

    border-radius:
        4px 4px 2px 2px;

    background:
        var(--g-mint);

    box-shadow:
        inset 0 -4px 0
        rgba(0,0,0,.12);
}


[data-theme="game"] .game-runner-body::before,
[data-theme="game"] .game-runner-body::after {
    content: "";

    position: absolute;

    bottom: -5px;

    width: 5px;
    height: 6px;

    border:
        2px solid
        var(--g-ink);

    border-top: 0;

    background:
        var(--g-purple);
}


[data-theme="game"] .game-runner-body::before {
    left: 0;
}

[data-theme="game"] .game-runner-body::after {
    right: 0;
}


@keyframes gameRunnerRun {
    from {
        transform:
            translateY(0)
            rotate(-1deg);
    }

    to {
        transform:
            translateY(-1px)
            rotate(1deg);
    }
}


/* ручной / автоматический прыжок */

[data-theme="game"] .game-runner-hero.jump {
    animation:
        gameRunnerJump
        .55s
        cubic-bezier(.2,.7,.25,1);
}


@keyframes gameRunnerJump {

    0% {
        transform:
            translateY(0)
            rotate(0);
    }

    40% {
        transform:
            translateY(-22px)
            rotate(-5deg);
    }

    68% {
        transform:
            translateY(-13px)
            rotate(3deg);
    }

    100% {
        transform:
            translateY(0)
            rotate(0);
    }

}


/* блоки */

[data-theme="game"] .game-runner-block {
    position: absolute;

    bottom: 9px;

    width: 15px;
    height: 15px;

    border:
        2px solid
        var(--g-ink);

    border-radius:
        3px;

    background:
        var(--g-coral);

    box-shadow:
        inset 0 0 0 2px
        rgba(255,255,255,.14);

    animation:
        gameRunnerObstacle
        6s
        linear
        infinite;
}


[data-theme="game"] .game-runner-block::after {
    content: "!";
    display: grid;
    place-items: center;

    width: 100%;
    height: 100%;

    color:
        var(--g-ink);

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


[data-theme="game"] .block-1 {
    left: 105%;
}

[data-theme="game"] .block-2 {
    left: 140%;

    animation-delay:
        3.1s;

    background:
        var(--g-purple-light);
}


@keyframes gameRunnerObstacle {
    from {
        transform:
            translateX(0);
    }

    to {
        transform:
            translateX(-430px);
    }
}


/* монеты */

[data-theme="game"] .game-runner-coin {
    position: absolute;

    bottom: 25px;

    display: grid;
    place-items: center;

    width: 16px;
    height: 16px;

    border:
        2px solid
        var(--g-ink);

    border-radius:
        50%;

    background:
        var(--g-yellow);

    color:
        var(--g-ink);

    font-size: 9px;
    font-weight: 900;

    box-shadow:
        0 0 0 2px
        rgba(255,176,32,.18);

    animation:
        gameRunnerCoin
        5.4s
        linear
        infinite;
}


[data-theme="game"] .coin-1 {
    left: 112%;
}

[data-theme="game"] .coin-2 {
    left: 150%;

    animation-delay:
        2.6s;
}


@keyframes gameRunnerCoin {

    0% {
        transform:
            translateX(0)
            translateY(0)
            rotateY(0);
    }

    50% {
        transform:
            translateX(-215px)
            translateY(-3px)
            rotateY(180deg);
    }

    100% {
        transform:
            translateX(-430px)
            translateY(0)
            rotateY(360deg);
    }

}


/* чуть заметная подсказка */

[data-theme="game"] .game-runner::after {
    content:
        "tap to jump";

    position: absolute;

    right: 3px;
    top: 3px;

    color:
        rgba(255,255,255,.35);

    font-size: 6px;
    font-weight: 800;

    letter-spacing: .08em;

    text-transform: uppercase;
}


/* reduced motion */

@media (prefers-reduced-motion: reduce) {

    [data-theme="game"] .game-runner-hero,
    [data-theme="game"] .game-runner-block,
    [data-theme="game"] .game-runner-coin {
        animation:
            none !important;
    }

}


[data-theme="game"] .balance-hero {
    min-height:
        282px !important;

    padding-bottom:
        74px !important;
}


/* =========================================================
   GAME — HERO LAYOUT FIX
========================================================= */

[data-theme="game"] .balance-hero {
    min-height: 262px !important;

    padding:
        23px 19px
        66px !important;
}


/*
 * HP остаётся в нормальном потоке.
 * Сцена живёт ниже отдельно.
 */

[data-theme="game"] .theme-game-progress {
    position: relative !important;

    z-index: 5 !important;

    margin-top: 18px !important;
}

[data-theme="game"] .theme-game-progress-track {
    margin-bottom: 0 !important;
}


/* полностью гасим старый runner */

[data-theme="game"] .game-runner,
[data-theme="game"] .game-runner-world,
[data-theme="game"] .game-runner-hero,
[data-theme="game"] .game-runner-block,
[data-theme="game"] .game-runner-coin {
    display: none !important;
}


/* =========================================================
   GAME — DECORATIVE AUTO SCENE
========================================================= */

[data-theme="game"] .game-hero-scene {
    position: absolute;

    left: 18px;
    right: 18px;
    bottom: 10px;

    height: 46px;

    overflow: hidden;

    z-index: 3;

    pointer-events: none;

    border-top:
        1px solid
        rgba(255,255,255,.09);
}


/* дорожка */

[data-theme="game"] .game-scene-track {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 5px;

    height: 3px;

    border-radius: 3px;

    background:
        rgba(36,28,21,.55);

    box-shadow:
        0 -1px 0
        rgba(255,255,255,.05);
}


/* =========================================================
   SHIP
========================================================= */

[data-theme="game"] .game-scene-ship {
    position: absolute;

    left: 8%;
    bottom: 10px;

    width: 34px;
    height: 18px;

    border:
        2px solid
        var(--g-ink);

    border-radius:
        14px 16px 7px 12px;

    background:
        linear-gradient(
            145deg,
            var(--g-mint),
            #18b28f
        );

    box-shadow:
        2px 2px 0
        rgba(36,28,21,.22);

    transform-origin:
        center bottom;

    animation:
        gameShipFloat
        2.2s
        ease-in-out
        infinite;
}


/* нос */

[data-theme="game"] .game-scene-ship::before {
    content: "";

    position: absolute;

    right: -8px;
    top: 4px;

    width: 10px;
    height: 8px;

    border:
        2px solid
        var(--g-ink);

    border-left: 0;

    border-radius:
        0 8px 8px 0;

    background:
        var(--g-yellow);
}


/* хвост */

[data-theme="game"] .game-scene-ship::after {
    content: "";

    position: absolute;

    left: -7px;
    top: 5px;

    width: 8px;
    height: 7px;

    border:
        2px solid
        var(--g-ink);

    border-right: 0;

    border-radius:
        6px 0 0 6px;

    background:
        var(--g-purple-light);
}


/* окно */

[data-theme="game"] .game-scene-ship-window {
    position: absolute;

    left: 9px;
    top: 4px;

    width: 8px;
    height: 6px;

    border:
        1.5px solid
        var(--g-ink);

    border-radius:
        50%;

    background:
        #dff8ff;
}


/* flame */

[data-theme="game"] .game-scene-ship-flame {
    position: absolute;

    left: -13px;
    top: 6px;

    width: 9px;
    height: 5px;

    border-radius:
        50% 0 0 50%;

    background:
        var(--g-yellow);

    box-shadow:
        -5px 0 0 -1px
        var(--g-coral);

    animation:
        gameShipFlame
        .28s
        steps(2,end)
        infinite;
}


@keyframes gameShipFloat {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(-1deg);
    }

    50% {
        transform:
            translateY(-4px)
            rotate(1deg);
    }

}


@keyframes gameShipFlame {

    from {
        transform:
            scaleX(.75);
    }

    to {
        transform:
            scaleX(1.15);
    }

}


/* =========================================================
   COINS
========================================================= */

[data-theme="game"] .game-scene-coin {
    position: absolute;

    top: 10px;

    display: grid;

    place-items: center;

    width: 15px;
    height: 15px;

    border:
        2px solid
        var(--g-ink);

    border-radius: 50%;

    background:
        var(--g-yellow);

    color:
        var(--g-ink);

    font-size:
        8px;

    font-weight:
        900;

    box-shadow:
        0 0 0 2px
        rgba(255,176,32,.14);

    animation:
        gameCoinFly
        5.2s
        linear
        infinite;
}


[data-theme="game"] .coin-a {
    left: 110%;
}

[data-theme="game"] .coin-b {
    left: 142%;

    animation-delay:
        1.7s;
}

[data-theme="game"] .coin-c {
    left: 176%;

    animation-delay:
        3.4s;
}


@keyframes gameCoinFly {

    0% {
        transform:
            translateX(0)
            translateY(0)
            rotateY(0);
    }

    50% {
        transform:
            translateX(-220px)
            translateY(-4px)
            rotateY(180deg);
    }

    100% {
        transform:
            translateX(-440px)
            translateY(0)
            rotateY(360deg);
    }

}


/* =========================================================
   PARTICLES
========================================================= */

[data-theme="game"] .game-scene-particle {
    position: absolute;

    right: -12px;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background:
        rgba(255,255,255,.45);

    animation:
        gameParticleMove
        4.5s
        linear
        infinite;
}


[data-theme="game"] .particle-a {
    top: 9px;

    animation-delay:
        0s;
}


[data-theme="game"] .particle-b {
    top: 23px;

    width: 3px;
    height: 3px;

    animation-delay:
        1.4s;
}


[data-theme="game"] .particle-c {
    top: 15px;

    width: 4px;
    height: 4px;

    animation-delay:
        2.8s;
}


@keyframes gameParticleMove {

    from {
        transform:
            translateX(0);

        opacity: 0;
    }

    12% {
        opacity: .6;
    }

    85% {
        opacity: .6;
    }

    to {
        transform:
            translateX(-360px);

        opacity: 0;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    [data-theme="game"] .game-scene-ship,
    [data-theme="game"] .game-scene-ship-flame,
    [data-theme="game"] .game-scene-coin,
    [data-theme="game"] .game-scene-particle {
        animation:
            none !important;
    }

}



/* =========================================================
   GAME — AUTO SCENE POSITION FIX
========================================================= */

[data-theme="game"] .balance-hero {
    position: relative !important;

    min-height: 260px !important;

    padding:
        23px 19px
        72px !important;
}


/* HP остаётся наверху */

[data-theme="game"] .theme-game-progress {
    position: static !important;

    z-index: auto !important;

    margin-top: 17px !important;
}


[data-theme="game"] .theme-game-progress-head,
[data-theme="game"] .theme-game-progress-track {
    position: relative !important;

    z-index: 6 !important;
}


/* игровая сценка строго внизу карточки */

[data-theme="game"] .game-hero-scene {
    position: absolute !important;

    left: 19px !important;
    right: 19px !important;

    bottom: 12px !important;

    width: auto !important;
    height: 46px !important;

    overflow: hidden !important;

    z-index: 4 !important;

    pointer-events: none !important;
}


/* старый интерактивный runner полностью мёртв */

[data-theme="game"] .game-runner,
[data-theme="game"] .game-runner-world,
[data-theme="game"] .game-runner-hero,
[data-theme="game"] .game-runner-block,
[data-theme="game"] .game-runner-coin,
[data-theme="game"] .game-pixel-hero {
    display: none !important;
}



/* =========================================================
   GAME — AUTO SCENE POSITION FIX
========================================================= */

[data-theme="game"] .balance-hero {
    position: relative !important;

    min-height: 260px !important;

    padding:
        23px 19px
        72px !important;
}


/* HP остаётся наверху */

[data-theme="game"] .theme-game-progress {
    position: static !important;

    z-index: auto !important;

    margin-top: 17px !important;
}


[data-theme="game"] .theme-game-progress-head,
[data-theme="game"] .theme-game-progress-track {
    position: relative !important;

    z-index: 6 !important;
}


/* игровая сценка строго внизу карточки */

[data-theme="game"] .game-hero-scene {
    position: absolute !important;

    left: 19px !important;
    right: 19px !important;

    bottom: 12px !important;

    width: auto !important;
    height: 46px !important;

    overflow: hidden !important;

    z-index: 4 !important;

    pointer-events: none !important;
}


/* старый интерактивный runner полностью мёртв */

[data-theme="game"] .game-runner,
[data-theme="game"] .game-runner-world,
[data-theme="game"] .game-runner-hero,
[data-theme="game"] .game-runner-block,
[data-theme="game"] .game-runner-coin,
[data-theme="game"] .game-pixel-hero {
    display: none !important;
}



/* =========================================================
   FINANCE / DEBTS V1
========================================================= */

.finance-main-head {
    margin-bottom: 14px;
}


.finance-tabs,
.debt-list-tabs,
.debt-direction-switch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 4px;

    padding: 4px;

    border: 1px solid var(--border);
    border-radius: 14px;

    background: var(--card);
}


.finance-tabs {
    margin-bottom: 20px;
}


.finance-tab,
.debt-list-tab,
.debt-direction-btn {
    min-width: 0;

    padding: 10px 12px;

    border: 0;
    border-radius: 10px;

    background: transparent;

    color: var(--muted);

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

    cursor: pointer;
}


.finance-tab.active,
.debt-list-tab.active,
.debt-direction-btn.active {
    background: var(--text);
    color: var(--bg);
}


.finance-panel {
    display: none;
}


.finance-panel.active {
    display: block;
}


.finance-panel-title {
    margin-bottom: 12px;

    color: var(--text);

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


/* HERO */

.debt-hero {
    position: relative;

    overflow: hidden;

    margin-bottom: 12px;
    padding: 20px;

    border: 1px solid var(--border);
    border-radius: var(--radius-card);

    background: var(--card);
}


.debt-hero::after {
    content: "₸";

    position: absolute;

    right: 12px;
    bottom: -36px;

    color: var(--border);

    font-size: 110px;
    font-weight: 900;

    opacity: .35;

    pointer-events: none;
}


.debt-hero-label {
    position: relative;
    z-index: 1;

    margin-bottom: 8px;

    color: var(--muted);

    font-size: 11px;
    font-weight: 650;
}


.debt-hero-value {
    position: relative;
    z-index: 1;

    color: var(--text);

    font-size: clamp(30px, 9vw, 42px);
    font-weight: 800;
    line-height: 1;

    letter-spacing: -.04em;
}


.debt-hero-value.positive {
    color: var(--income);
}


.debt-hero-value.negative {
    color: var(--danger);
}


.debt-hero-hint {
    position: relative;
    z-index: 1;

    margin-top: 9px;

    color: var(--muted);

    font-size: 10px;
}


/* SUMMARY */

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

    gap: 10px;

    margin-bottom: 12px;
}


.debt-summary-card {
    min-width: 0;

    padding: 14px;

    border: 1px solid var(--border);
    border-radius: var(--radius-card);

    background: var(--card);
}


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

    margin-bottom: 7px;

    color: var(--muted);

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


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

    overflow: hidden;

    color: var(--text);

    font-size: 17px;
    line-height: 1.1;

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


.debt-summary-in strong {
    color: var(--income);
}


.debt-summary-out strong {
    color: var(--danger);
}


.debt-add-button {
    width: 100%;

    margin-bottom: 18px;
}


.debt-list-tabs {
    margin-bottom: 12px;
}


/* CARD */

.debt-card {
    margin-bottom: 10px;
    padding: 15px;

    border: 1px solid var(--border);
    border-radius: var(--radius-card);

    background: var(--card);
}


.debt-card.closed {
    opacity: .72;
}


.debt-card-head {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 12px;
}


.debt-person-wrap {
    display: flex;

    min-width: 0;

    align-items: center;

    gap: 10px;
}


.debt-avatar {
    display: grid;

    flex: 0 0 auto;

    width: 34px;
    height: 34px;

    place-items: center;

    border: 1px solid var(--border);
    border-radius: 50%;

    color: var(--text);

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


.debt-card.incoming .debt-avatar {
    color: var(--income);
}


.debt-card.outgoing .debt-avatar {
    color: var(--danger);
}


.debt-person {
    overflow: hidden;

    color: var(--text);

    font-size: 14px;
    font-weight: 750;

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


.debt-direction-label {
    margin-top: 3px;

    color: var(--muted);

    font-size: 9px;
}


.debt-due {
    margin-left: 5px;
}


.debt-card-amount {
    flex: 0 0 auto;

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

    white-space: nowrap;
}


.debt-card-amount.positive {
    color: var(--income);
}


.debt-card-amount.negative {
    color: var(--danger);
}


.debt-note {
    margin-top: 12px;
    padding-top: 11px;

    border-top: 1px solid var(--border);

    color: var(--muted);

    font-size: 11px;
    line-height: 1.45;
}


.debt-progress-copy {
    display: flex;

    justify-content: space-between;

    gap: 10px;

    margin-top: 14px;
    margin-bottom: 6px;

    color: var(--muted);

    font-size: 9px;
}


.debt-progress {
    height: 5px;

    overflow: hidden;

    border-radius: 99px;

    background: var(--border);
}


.debt-progress i {
    display: block;

    height: 100%;

    border-radius: inherit;

    background: var(--accent);

    transition: width .3s ease;
}


.debt-card.incoming .debt-progress i {
    background: var(--income);
}


.debt-card.outgoing .debt-progress i {
    background: var(--danger);
}


.debt-card-footer,
.debt-closed-line {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 8px;

    margin-top: 13px;
}


.debt-payment-button,
.debt-edit-button {
    min-height: 34px;

    border: 1px solid var(--border);
    border-radius: 10px;

    background: transparent;

    color: var(--text);

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


.debt-payment-button {
    flex: 1;

    background: var(--text);
    color: var(--bg);
}


.debt-edit-button {
    padding: 0 13px;
}


.debt-closed-line {
    color: var(--muted);

    font-size: 10px;
}


/* EMPTY */

.debt-empty {
    display: flex;

    min-height: 150px;

    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: 25px;

    border: 1px dashed var(--border);
    border-radius: var(--radius-card);

    color: var(--muted);

    text-align: center;
}


.debt-empty-icon {
    display: grid;

    width: 38px;
    height: 38px;

    margin-bottom: 10px;

    place-items: center;

    border: 1px solid var(--border);
    border-radius: 50%;

    color: var(--income);

    font-size: 18px;
}


.debt-empty strong {
    color: var(--text);

    font-size: 13px;
}


.debt-empty span {
    max-width: 220px;

    margin-top: 5px;

    font-size: 10px;
    line-height: 1.4;
}


/* SHEETS */

.debt-direction-switch {
    margin-bottom: 16px;
}


.debt-payment-submit {
    width: 100%;
    margin-top: 4px;
}


/* LEDGER keeps its square language */

[data-theme="ledger"] .finance-tabs,
[data-theme="ledger"] .debt-list-tabs,
[data-theme="ledger"] .debt-direction-switch,
[data-theme="ledger"] .debt-hero,
[data-theme="ledger"] .debt-summary-card,
[data-theme="ledger"] .debt-card,
[data-theme="ledger"] .debt-payment-button,
[data-theme="ledger"] .debt-edit-button {
    border-radius: 2px;
}


/* GAME keeps thick playful borders */

[data-theme="game"] .finance-tabs,
[data-theme="game"] .debt-list-tabs,
[data-theme="game"] .debt-direction-switch,
[data-theme="game"] .debt-hero,
[data-theme="game"] .debt-summary-card,
[data-theme="game"] .debt-card {
    border-width: 2px;
}


/* MOBILE */

@media (max-width: 390px) {

    .debt-hero {
        padding: 17px;
    }

    .debt-summary-card {
        padding: 12px;
    }

    .debt-summary-card strong {
        font-size: 15px;
    }

    .debt-card {
        padding: 13px;
    }

    .debt-card-amount {
        font-size: 13px;
    }

}



/* =========================================================
   DEBTS V2 — ADD / PAY
========================================================= */

.debt-card-footer {
    display: grid !important;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr)
        38px;

    gap: 7px;
}


.debt-addition-button,
.debt-payment-button,
.debt-card-footer .debt-edit-button {
    width: 100%;
    min-width: 0;

    min-height: 38px;

    padding: 0 9px;

    border: 1px solid var(--border);
    border-radius: 10px;

    font: inherit;
    font-size: 10px;
    font-weight: 750;
}


.debt-addition-button {
    background: transparent;

    color: var(--text);
}


.debt-payment-button {
    background: var(--text);

    color: var(--bg);
}


.debt-card-footer .debt-edit-button {
    padding: 0;

    font-size: 17px;
    letter-spacing: 1px;
}


.debt-progress-details {
    display: grid !important;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 8px;

    margin-top: 14px !important;
    margin-bottom: 8px !important;
}


.debt-progress-details > span {
    display: flex;

    min-width: 0;

    flex-direction: column;

    gap: 3px;

    color: var(--muted);

    font-size: 8px;
}


.debt-progress-details > span:nth-child(2) {
    text-align: center;
}


.debt-progress-details > span:last-child {
    text-align: right;
}


.debt-progress-details strong {
    overflow: hidden;

    color: var(--text);

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

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


.debt-addition-submit {
    width: 100%;

    margin-top: 4px;
}


/* LEDGER */

[data-theme="ledger"]
.debt-addition-button,
[data-theme="ledger"]
.debt-card-footer
.debt-edit-button {
    border-radius: 2px;
}


/* GAME */

[data-theme="game"]
.debt-addition-button,
[data-theme="game"]
.debt-payment-button,
[data-theme="game"]
.debt-card-footer
.debt-edit-button {
    border-width: 2px;
}


@media (max-width: 360px) {

    .debt-addition-button,
    .debt-payment-button {
        font-size: 9px;
    }

    .debt-progress-details strong {
        font-size: 9px;
    }

}



/* CATEGORY MONTHLY LIMITS */

.settings-category {
  align-items: flex-start;
}

.settings-category-main {
  min-width: 0;
  flex: 1;
}

.category-limit-mini {
  margin-top: 9px;
  margin-left: 44px;
  max-width: 360px;
}

.category-limit-mini-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;

  color: var(--muted);
  font-size: 12px;
  line-height: 1.3;
}

.category-limit-track {
  height: 6px;
  margin-top: 6px;

  overflow: hidden;
  border-radius: 999px;

  background: var(--card2);
}

.category-limit-track i {
  display: block;
  height: 100%;
  border-radius: inherit;

  background: var(--accent);
}

.category-limit-mini.warning .category-limit-track i {
  background: #f59e0b;
}

.category-limit-mini.over .category-limit-track i {
  background: #ef4444;
}

.category-limit-mini.warning .category-limit-mini-head {
  color: #f59e0b;
}

.category-limit-mini.over .category-limit-mini-head {
  color: #ef4444;
}

.category-limit-bottom {
  margin-top: 5px;

  color: var(--muted);
  font-size: 11px;
}

.category-limit-mini.over .category-limit-bottom {
  color: #ef4444;
}

.category-limit-toggle {
  display: flex;
  align-items: center;
  gap: 10px;

  margin: 10px 0;

  color: var(--text);
  font-size: 14px;

  cursor: pointer;
}

.category-limit-toggle input {
  width: 18px;
  height: 18px;
  margin: 0;

  accent-color: var(--accent);
}



/* =========================================================
   EXPENSE TEMPLATES
========================================================= */

.expense-templates-block {
  overflow: hidden;
}

.expense-templates-list {
  display: grid;
  gap: 8px;
  margin-top: 14px;
  margin-bottom: 12px;
}

.expense-template-card {
  width: 100%;
  display: grid;
  grid-template-columns:
    42px minmax(0, 1fr) auto 28px;
  align-items: center;
  gap: 11px;

  padding: 11px 10px;

  border: 1px solid var(--border);
  border-radius: 15px;

  background: var(--card2);
  color: var(--text);

  font: inherit;
  text-align: left;

  cursor: pointer;

  transition:
    transform .12s ease,
    opacity .15s ease,
    border-color .15s ease;
}

.expense-template-card:active {
  transform: scale(.985);
}

.expense-template-card.inactive {
  opacity: .48;
}

.expense-template-icon {
  width: 42px;
  height: 42px;

  display: grid;
  place-items: center;

  border-radius: 13px;

  background:
    color-mix(
      in srgb,
      var(--accent) 11%,
      var(--card)
    );

  font-size: 21px;
}

.expense-template-copy {
  min-width: 0;

  display: flex;
  flex-direction: column;
  gap: 3px;
}

.expense-template-copy strong {
  overflow: hidden;

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

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

.expense-template-copy small {
  overflow: hidden;

  color: var(--muted);

  font-size: 11px;

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

.expense-template-amount {
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
}

.expense-template-edit {
  display: grid;
  place-items: center;

  color: var(--muted);

  font-size: 17px;
}

.expense-template-empty {
  display: flex;
  align-items: center;
  gap: 12px;

  padding: 14px;

  border: 1px dashed var(--border);
  border-radius: 15px;

  background: var(--card2);
}

.expense-template-empty-icon {
  width: 40px;
  height: 40px;

  display: grid;
  place-items: center;

  flex: none;

  border-radius: 13px;

  background:
    color-mix(
      in srgb,
      var(--accent) 12%,
      var(--card)
    );

  font-size: 19px;
}

.expense-template-empty strong {
  display: block;

  font-size: 13px;
}

.expense-template-empty span {
  display: block;

  margin-top: 3px;

  color: var(--muted);
  font-size: 11px;
}


/* TEMPLATE SHEET */

.template-name-grid {
  display: grid;
  grid-template-columns: 78px 1fr;
  gap: 10px;
}

.template-emoji-field input {
  text-align: center;
  font-size: 21px;
}

.expense-template-toggle {
  display: flex;
  align-items: center;
  gap: 10px;

  margin: 8px 0 18px;

  color: var(--text);

  font-size: 14px;

  cursor: pointer;
}

.expense-template-toggle input {
  width: 18px;
  height: 18px;

  margin: 0;

  accent-color: var(--accent);
}


/* GAME theme — template gets a little arcade flavour */

[data-theme="game"]
.expense-template-icon {
  border-radius: 8px;
}

[data-theme="game"]
.expense-template-card {
  border-radius: 10px;
}



/* =========================================================
   EXPENSE TEMPLATES — THEME FIX
========================================================= */

.expense-templates-block {
  background: var(--card) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}


.expense-templates-list {
  background: transparent !important;
}


.expense-template-card,
.expense-template-empty {
  background:
    color-mix(
      in srgb,
      var(--card) 92%,
      var(--text) 8%
    ) !important;

  border-color: var(--border) !important;
  color: var(--text) !important;
}


.expense-template-icon,
.expense-template-empty-icon {
  background:
    color-mix(
      in srgb,
      var(--accent) 10%,
      var(--card)
    ) !important;

  border: 1px solid
    color-mix(
      in srgb,
      var(--border) 80%,
      transparent
    );

  color: var(--text) !important;
}


.expense-template-copy strong,
.expense-template-empty strong {
  color: var(--text) !important;
}


.expense-template-copy small,
.expense-template-empty span {
  color: var(--muted) !important;
}


.expense-template-amount {
  color: var(--text) !important;
}


.expense-template-edit {
  color: var(--muted) !important;
}


#addExpenseTemplateButton {
  background:
    color-mix(
      in srgb,
      var(--accent) 7%,
      var(--card)
    ) !important;

  border-color:
    color-mix(
      in srgb,
      var(--accent) 45%,
      var(--border)
    ) !important;

  color: var(--accent) !important;
}


/* LEDGER */

[data-theme="ledger"]
.expense-templates-block,
[data-theme="ledger"]
.expense-template-card,
[data-theme="ledger"]
.expense-template-empty,
[data-theme="ledger"]
#addExpenseTemplateButton {
  border-radius: 2px !important;
  box-shadow: none !important;
}


/* NIGHT */

[data-theme="night"]
.expense-template-card,
[data-theme="night"]
.expense-template-empty {
  background:
    radial-gradient(
      120% 150% at 0% 0%,
      color-mix(
        in srgb,
        var(--accent) 7%,
        var(--card)
      ),
      var(--card)
    ) !important;
}


/* JOURNAL */

[data-theme="journal"]
.expense-template-card,
[data-theme="journal"]
.expense-template-empty {
  background:
    color-mix(
      in srgb,
      var(--card) 96%,
      #c8b98f 4%
    ) !important;
}


/* CARD */

[data-theme="card"]
.expense-template-card,
[data-theme="card"]
.expense-template-empty {
  background:
    linear-gradient(
      145deg,
      color-mix(
        in srgb,
        var(--card) 92%,
        #b58a54 8%
      ),
      var(--card)
    ) !important;
}


/* CALM */

[data-theme="calm"]
.expense-template-card,
[data-theme="calm"]
.expense-template-empty {
  background:
    color-mix(
      in srgb,
      var(--card) 96%,
      #a8c0b2 4%
    ) !important;
}


/* GAME */

[data-theme="game"]
.expense-templates-block {
  border-width: 2px !important;
}

[data-theme="game"]
.expense-template-card,
[data-theme="game"]
.expense-template-empty,
[data-theme="game"]
#addExpenseTemplateButton {
  border-width: 2px !important;
}



/* =========================================================
   EXPENSE TEMPLATE SUGGESTIONS
========================================================= */

.expense-template-suggestions[hidden] {
  display: none !important;
}

.expense-template-suggestions {
  margin-top: 14px;
  margin-bottom: 14px;
}

.template-suggestion-box {
  padding: 13px;

  border: 1px solid var(--border);
  border-radius: 16px;

  background:
    color-mix(
      in srgb,
      var(--accent) 5%,
      var(--card)
    );

  color: var(--text);
}

.template-suggestion-head {
  display: flex;
  align-items: center;
  gap: 11px;

  margin-bottom: 12px;
}

.template-suggestion-spark {
  width: 38px;
  height: 38px;

  display: grid;
  place-items: center;

  flex: none;

  border: 1px solid var(--border);
  border-radius: 12px;

  background:
    color-mix(
      in srgb,
      var(--accent) 10%,
      var(--card)
    );

  font-size: 18px;
}

.template-suggestion-title {
  min-width: 0;

  display: flex;
  flex-direction: column;
  gap: 2px;
}

.template-suggestion-title strong {
  color: var(--text);

  font-size: 13px;
  font-weight: 800;
}

.template-suggestion-title span {
  color: var(--muted);

  font-size: 11px;
}

.template-suggestion-list {
  display: grid;
  gap: 7px;
}

.template-suggestion-item {
  display: grid;
  grid-template-columns:
    20px 34px minmax(0, 1fr) auto;

  align-items: center;
  gap: 9px;

  min-width: 0;

  padding: 9px;

  border: 1px solid var(--border);
  border-radius: 12px;

  background:
    color-mix(
      in srgb,
      var(--card) 95%,
      var(--text) 5%
    );

  color: var(--text);

  cursor: pointer;
}

.template-suggestion-check {
  width: 17px;
  height: 17px;

  margin: 0;

  accent-color: var(--accent);
}

.template-suggestion-emoji {
  width: 34px;
  height: 34px;

  display: grid;
  place-items: center;

  border-radius: 10px;

  background:
    color-mix(
      in srgb,
      var(--accent) 9%,
      var(--card)
    );

  font-size: 17px;
}

.template-suggestion-copy {
  min-width: 0;

  display: flex;
  flex-direction: column;
  gap: 2px;
}

.template-suggestion-copy strong {
  overflow: hidden;

  color: var(--text);

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

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

.template-suggestion-copy small {
  overflow: hidden;

  color: var(--muted);

  font-size: 10px;

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

.template-suggestion-amount {
  color: var(--text);

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

  white-space: nowrap;
}

.template-suggestion-create {
  width: 100%;
  margin-top: 11px;
}

.template-suggestion-create:disabled {
  opacity: .55;
  pointer-events: none;
}


/* Ledger */

[data-theme="ledger"]
.template-suggestion-box,
[data-theme="ledger"]
.template-suggestion-item,
[data-theme="ledger"]
.template-suggestion-spark,
[data-theme="ledger"]
.template-suggestion-emoji {
  border-radius: 2px;
  box-shadow: none;
}


/* Game */

[data-theme="game"]
.template-suggestion-box,
[data-theme="game"]
.template-suggestion-item {
  border-width: 2px;
  border-radius: 9px;
}

[data-theme="game"]
.template-suggestion-spark,
[data-theme="game"]
.template-suggestion-emoji {
  border-radius: 7px;
}



/* =========================================================
   MONEY CAT
   1528 x 125
   8 frames x 191 x 125
========================================================= */

.money-cat-runner {
  --cat-scale: .52;

  position: fixed;

  left: 0;
  bottom: 72px;

  width: calc(191px * var(--cat-scale));
  height: calc(125px * var(--cat-scale));

  z-index: 90;

  overflow: hidden;

  pointer-events: none;

  opacity: 0;

  transform:
    translate3d(-120px, 0, 0);

  will-change:
    transform,
    opacity;
}


.money-cat-sprite {
  position: absolute;

  left: 0;
  top: 0;

  width: 1528px;
  height: 125px;

  background-image:
    url("/static/cats/cat_orange_strip.png");

  background-repeat: no-repeat;
  background-position: 0 0;

  transform:
    scale(var(--cat-scale));

  transform-origin:
    top left;

  will-change:
    background-position;
}


.money-cat-runner.running {
  opacity: 1;

  animation:
    money-cat-cross
    6s
    linear
    forwards;
}


.money-cat-runner.running
.money-cat-sprite {
  animation:
    money-cat-frames
    .8s
    steps(8)
    infinite;
}


@keyframes money-cat-frames {
  from {
    background-position-x: 0;
  }

  to {
    background-position-x: -1528px;
  }
}


@keyframes money-cat-cross {
  0% {
    opacity: 0;

    transform:
      translate3d(-120px, 0, 0);
  }

  3% {
    opacity: 1;
  }

  95% {
    opacity: 1;
  }

  100% {
    opacity: 0;

    transform:
      translate3d(
        calc(100vw + 120px),
        0,
        0
      );
  }
}


@media (max-width: 380px) {
  .money-cat-runner {
    --cat-scale: .46;
  }
}


@media (prefers-reduced-motion: reduce) {
  .money-cat-runner {
    display: none !important;
  }
}



/* =========================================================
   GAME SCENE CAT
   replaces old ship
   sprite: 1528x125 / 8 frames
========================================================= */

[data-theme="game"] .game-scene-ship {
  display: none !important;
}

[data-theme="game"] .game-scene-cat {
  --scene-cat-scale: .42;

  position: absolute;

  left: 12%;
  bottom: 13px;

  width: calc(191px * var(--scene-cat-scale));
  height: calc(125px * var(--scene-cat-scale));

  overflow: hidden;

  z-index: 8;

  pointer-events: none;

  animation:
    gameSceneCatTravel
    8s
    ease-in-out
    infinite;

  will-change: transform;
}


[data-theme="game"] .game-scene-cat-sprite {
  position: absolute;

  left: 0;
  top: 0;

  width: 1528px;
  height: 125px;

  background-image:
    url("/static/cats/cat_orange_strip.png");

  background-repeat: no-repeat;
  background-position: 0 0;

  transform:
    scale(var(--scene-cat-scale));

  transform-origin:
    top left;

  animation:
    gameSceneCatFrames
    .8s
    steps(8)
    infinite;

  will-change:
    background-position;
}


@keyframes gameSceneCatFrames {
  from {
    background-position-x: 0;
  }

  to {
    background-position-x: -1528px;
  }
}


/*
 * Движение происходит только ВНУТРИ
 * игровой сцены — там, где раньше был корабль.
 */
@keyframes gameSceneCatTravel {
  0% {
    transform:
      translate3d(0, 0, 0);
  }

  45% {
    transform:
      translate3d(115px, 0, 0);
  }

  55% {
    transform:
      translate3d(115px, 0, 0);
  }

  100% {
    transform:
      translate3d(0, 0, 0);
  }
}


@media (max-width: 380px) {
  [data-theme="game"] .game-scene-cat {
    --scene-cat-scale: .37;
  }
}


@media (prefers-reduced-motion: reduce) {
  [data-theme="game"] .game-scene-cat,
  [data-theme="game"] .game-scene-cat-sprite {
    animation: none !important;
  }
}


/* =========================================================
   GAME SCENE CAT — FULL WIDTH FIX
========================================================= */

[data-theme="game"] .game-hero-scene {
  overflow: hidden;
}


/*
 * Кадр 191x125.
 * Кот едет от полностью скрытого положения слева
 * до полностью скрытого положения справа.
 */
[data-theme="game"] .game-scene-cat {
  --scene-cat-scale: .36;
  --scene-cat-width: calc(191px * var(--scene-cat-scale));
  --scene-cat-height: calc(125px * var(--scene-cat-scale));

  left: 0;
  bottom: 8px;

  width: var(--scene-cat-width);
  height: var(--scene-cat-height);

  overflow: hidden;

  animation:
    gameSceneCatTravelFull
    7s
    linear
    infinite;
}


/*
 * Сам sprite остаётся полным 1528x125,
 * контейнер показывает один кадр.
 */
[data-theme="game"] .game-scene-cat-sprite {
  width: 1528px;
  height: 125px;

  transform:
    scale(var(--scene-cat-scale));

  transform-origin:
    left top;

  animation:
    gameSceneCatFrames
    .8s
    steps(8)
    infinite;
}


/*
 * ВАЖНО:
 * 100vw здесь не используем.
 * 100% считается относительно самой игровой сцены.
 *
 * Старт: кот полностью за левым краем.
 * Финиш: кот полностью за правым.
 */
@keyframes gameSceneCatTravelFull {
  from {
    transform:
      translate3d(
        calc(-1 * var(--scene-cat-width)),
        0,
        0
      );
  }

  to {
    transform:
      translate3d(
        calc(
          var(--game-scene-travel, 300px)
          + var(--scene-cat-width)
        ),
        0,
        0
      );
  }
}


/* старую туда-сюда анимацию больше не используем */

@media (max-width: 380px) {
  [data-theme="game"] .game-scene-cat {
    --scene-cat-scale: .33;
  }
}



/* =========================================================
   GAME CAT — CLEAN SCENE
========================================================= */

/*
 * Старая тонкая дорожка больше не нужна.
 */
[data-theme="game"] .game-scene-track {
  display: none !important;
}


/*
 * На всякий случай убираем возможные
 * декоративные линии самой сцены.
 */
[data-theme="game"] .game-hero-scene::before,
[data-theme="game"] .game-hero-scene::after {
  display: none !important;
}


/* =========================================================
   GAME CAT — CLIP / WHITE LINE FIX
========================================================= */

[data-theme="game"] .game-hero-scene {
  height: 64px !important;

  border-top: 0 !important;
  border: 0 !important;

  overflow: hidden !important;
}


/*
 * Чуть ниже сажаем кота внутри увеличенной сцены,
 * чтобы он полностью помещался по высоте.
 */
[data-theme="game"] .game-scene-cat {
  bottom: 4px !important;
}


/* =========================================================
   GAME CAT WORLD
   pixel city / parallax background
========================================================= */


/* монетки нахуй */

[data-theme="game"] .game-scene-coin {
  display: none !important;
}


/* старые частицы тоже убираем */

[data-theme="game"] .game-scene-particle {
  display: none !important;
}


/* сама сцена */

[data-theme="game"] .game-hero-scene {
  position: relative;

  isolation: isolate;

  background:
    radial-gradient(
      circle at 78% 28%,
      rgba(255,255,255,.10) 0 2px,
      transparent 3px
    ),
    radial-gradient(
      circle at 18% 38%,
      rgba(255,255,255,.08) 0 1.5px,
      transparent 2.5px
    ),
    radial-gradient(
      circle at 55% 19%,
      rgba(255,255,255,.08) 0 1px,
      transparent 2px
    ),
    linear-gradient(
      180deg,
      rgba(255,255,255,.015),
      rgba(0,0,0,.035)
    ) !important;

  overflow: hidden !important;
}


/* =========================================================
   ДАЛЬНИЙ ГОРОД
========================================================= */

[data-theme="game"] .game-hero-scene::before {
  content: "" !important;

  display: block !important;

  position: absolute;

  left: -20%;
  right: -20%;
  bottom: 0;

  height: 31px;

  z-index: 1;

  opacity: .18;

  background:
    linear-gradient(
      to top,
      rgba(36,28,21,.58) 0 100%
    );

  clip-path:
    polygon(
      0 100%,
      0 55%,
      5% 55%,
      5% 30%,
      10% 30%,
      10% 62%,
      15% 62%,
      15% 18%,
      21% 18%,
      21% 48%,
      27% 48%,
      27% 26%,
      34% 26%,
      34% 67%,
      40% 67%,
      40% 37%,
      46% 37%,
      46% 12%,
      52% 12%,
      52% 51%,
      58% 51%,
      58% 31%,
      65% 31%,
      65% 63%,
      71% 63%,
      71% 21%,
      78% 21%,
      78% 47%,
      84% 47%,
      84% 29%,
      91% 29%,
      91% 59%,
      100% 59%,
      100% 100%
    );

  animation:
    gameCatCityMove
    18s
    linear
    infinite;

  pointer-events: none;
}


/* =========================================================
   БЛИЖНИЙ СЛОЙ — ОКНА / ПИКСЕЛИ
========================================================= */

[data-theme="game"] .game-hero-scene::after {
  content: "" !important;

  display: block !important;

  position: absolute;

  left: -30%;
  right: -30%;
  bottom: 5px;

  height: 24px;

  z-index: 2;

  opacity: .20;

  background:
    repeating-linear-gradient(
      90deg,
      transparent 0 18px,
      rgba(255,176,32,.75) 18px 21px,
      transparent 21px 37px
    );

  mask-image:
    linear-gradient(
      to bottom,
      transparent 0 20%,
      #000 22% 100%
    );

  animation:
    gameCatLightsMove
    10s
    linear
    infinite;

  pointer-events: none;
}


/* кот всегда выше задника */

[data-theme="game"] .game-scene-cat {
  z-index: 10 !important;
}


/* =========================================================
   PARALLAX
========================================================= */

@keyframes gameCatCityMove {
  from {
    transform: translate3d(0,0,0);
  }

  to {
    transform: translate3d(-90px,0,0);
  }
}


@keyframes gameCatLightsMove {
  from {
    transform: translate3d(0,0,0);
  }

  to {
    transform: translate3d(-150px,0,0);
  }
}


/* чтобы не было слишком шумно */

@media (prefers-reduced-motion: reduce) {

  [data-theme="game"] .game-hero-scene::before,
  [data-theme="game"] .game-hero-scene::after {
    animation: none !important;
  }

}



/* =========================================================
   GAME CAT — PIXEL BACKGROUND
========================================================= */

/* Монетки и старый декор выключены */
[data-theme="game"] .game-scene-coin,
[data-theme="game"] .game-scene-particle,
[data-theme="game"] .game-scene-track {
  display: none !important;
}


/*
 * Основной фон.
 *
 * Картинка очень широкая, поэтому используем её
 * как горизонтальную панораму.
 */
[data-theme="game"] .game-hero-scene {
  position: relative !important;

  height: 64px !important;

  overflow: hidden !important;

  border: 0 !important;

  background-image:
    url("/static/cats/background_cat.png") !important;

  background-repeat:
    repeat-x !important;

  background-position:
    0 bottom !important;

  /*
   * Высота исходника большая.
   * Уменьшаем его так, чтобы улица и город
   * помещались в нашу маленькую сцену.
   */
  background-size:
    auto 94px !important;

  animation:
    gameCatBackgroundScroll
    22s
    linear
    infinite !important;
}


/* Выключаем старый CSS-город */
[data-theme="game"] .game-hero-scene::before,
[data-theme="game"] .game-hero-scene::after {
  content: none !important;
  display: none !important;
}


/*
 * Фон движется против движения кота.
 * Создаётся ощущение, что кот реально бежит.
 */
@keyframes gameCatBackgroundScroll {
  from {
    background-position:
      0 bottom;
  }

  to {
    background-position:
      -420px bottom;
  }
}


/* Кот поверх города */
[data-theme="game"] .game-scene-cat {
  z-index: 10 !important;

  bottom: 2px !important;
}


/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  [data-theme="game"] .game-hero-scene {
    animation: none !important;
  }
}



/* =========================================================
   GAME CAT — NIGHT PARALLAX V2
========================================================= */


/* старый декор окончательно выключаем */

[data-theme="game"] .game-scene-coin,
[data-theme="game"] .game-scene-particle,
[data-theme="game"] .game-scene-track {
  display: none !important;
}


/*
 * Сцена.
 * Layer 1 = дальний город + небо.
 *
 * Его почти не двигаем — это самый дальний план.
 */

[data-theme="game"] .game-hero-scene {
  position: relative !important;

  height: 64px !important;

  overflow: hidden !important;

  border: 0 !important;

  background-image:
    url("/static/cats/bg_layer1_far_night.png") !important;

  background-repeat:
    repeat-x !important;

  background-size:
    auto 64px !important;

  background-position:
    0 bottom !important;

  animation:
    catNightFarScroll
    45s
    linear
    infinite !important;

  isolation: isolate;
}


/*
 * Layer 2 = ближние здания.
 *
 * PNG имеет прозрачный верх,
 * поэтому через него видно дальний слой.
 */

[data-theme="game"] .game-hero-scene::before {
  content: "" !important;

  display: block !important;

  position: absolute;

  left: 0;
  right: 0;
  bottom: 0;

  height: 48px;

  z-index: 2;

  background-image:
    url("/static/cats/bg_layer2_mid_night.png");

  background-repeat:
    repeat-x;

  background-size:
    auto 48px;

  background-position:
    0 bottom;

  animation:
    catNightMidScroll
    22s
    linear
    infinite;

  pointer-events: none;
}


/*
 * Layer 3 = дорога.
 *
 * Самый близкий фон, поэтому движется быстрее.
 */

[data-theme="game"] .game-hero-scene::after {
  content: "" !important;

  display: block !important;

  position: absolute;

  left: 0;
  right: 0;
  bottom: 0;

  height: 32px;

  z-index: 4;

  background-image:
    url("/static/cats/ground_night.png");

  background-repeat:
    repeat-x;

  background-size:
    auto 32px;

  background-position:
    0 bottom;

  animation:
    catNightGroundScroll
    8s
    linear
    infinite;

  pointer-events: none;
}


/*
 * Кот находится ПЕРЕД всеми слоями.
 */

[data-theme="game"] .game-scene-cat {
  z-index: 10 !important;

  bottom: 1px !important;
}


/* =========================================================
   PARALLAX SPEEDS
========================================================= */

@keyframes catNightFarScroll {
  from {
    background-position:
      0 bottom;
  }

  to {
    background-position:
      -640px bottom;
  }
}


@keyframes catNightMidScroll {
  from {
    background-position:
      0 bottom;
  }

  to {
    background-position:
      -640px bottom;
  }
}


@keyframes catNightGroundScroll {
  from {
    background-position:
      0 bottom;
  }

  to {
    background-position:
      -640px bottom;
  }
}


/* accessibility */

@media (prefers-reduced-motion: reduce) {

  [data-theme="game"] .game-hero-scene,
  [data-theme="game"] .game-hero-scene::before,
  [data-theme="game"] .game-hero-scene::after {
    animation: none !important;
  }

}



/* =========================================================
   GAME CAT — WIDE PARALLAX SCENE
========================================================= */

[data-theme="game"] .game-hero-scene {
  /*
   * Растягиваем сцену относительно блока HP.
   * Она почти доходит до внутренних краёв hero-card.
   */
  width: calc(100% + 36px) !important;

  margin-left: -18px !important;
  margin-right: -18px !important;

  height: 78px !important;

  margin-top: 8px !important;

  border: 0 !important;
  border-radius: 0 !important;

  overflow: hidden !important;

  /*
   * Дальний фон становится крупнее.
   */
  background-size:
    auto 78px !important;

  background-position:
    0 bottom !important;
}


/* ближние дома */

[data-theme="game"] .game-hero-scene::before {
  height: 58px !important;

  background-size:
    auto 58px !important;

  background-position:
    0 bottom !important;
}


/* дорога */

[data-theme="game"] .game-hero-scene::after {
  height: 34px !important;

  background-size:
    auto 34px !important;

  background-position:
    0 bottom !important;
}


/*
 * Кота сажаем непосредственно на асфальт.
 */
[data-theme="game"] .game-scene-cat {
  bottom: 1px !important;
}


/*
 * На маленьких телефонах тоже сохраняем
 * почти полную ширину карточки.
 */
@media (max-width: 380px) {

  [data-theme="game"] .game-hero-scene {
    width: calc(100% + 28px) !important;

    margin-left: -14px !important;
    margin-right: -14px !important;

    height: 74px !important;
  }

  [data-theme="game"] .game-hero-scene::before {
    height: 55px !important;
    background-size: auto 55px !important;
  }

}



/* =========================================================
   GAME CAT — BOTTOM SCENE FINAL POSITION FIX
========================================================= */

/*
 * Вся карточка становится системой координат.
 */
[data-theme="game"] .balance-hero {
  position: relative !important;
  overflow: hidden !important;
}


/*
 * HP остаётся сверху и никак не участвует
 * в расположении игровой сцены.
 */
[data-theme="game"] .theme-game-progress {
  position: relative !important;
  z-index: 20 !important;
}


/*
 * СЦЕНА ПРИБИТА К САМОМУ НИЗУ КАРТОЧКИ.
 */
[data-theme="game"] .game-hero-scene {
  position: absolute !important;

  left: 18px !important;
  right: 18px !important;

  bottom: 9px !important;

  width: auto !important;
  height: 76px !important;

  margin: 0 !important;

  overflow: hidden !important;

  border: 0 !important;
  border-radius: 0 !important;

  z-index: 5 !important;

  background-image:
    url("/static/cats/bg_layer1_far_night.png") !important;

  background-repeat:
    repeat-x !important;

  background-size:
    auto 76px !important;

  background-position:
    0 bottom !important;

  animation:
    catNightFarScroll
    45s
    linear
    infinite !important;
}


/* средний слой */

[data-theme="game"] .game-hero-scene::before {
  content: "" !important;
  display: block !important;

  position: absolute !important;

  inset:
    auto 0 0 0 !important;

  height: 57px !important;

  z-index: 2 !important;

  background-image:
    url("/static/cats/bg_layer2_mid_night.png") !important;

  background-repeat:
    repeat-x !important;

  background-size:
    auto 57px !important;

  background-position:
    0 bottom !important;

  animation:
    catNightMidScroll
    22s
    linear
    infinite !important;

  pointer-events: none !important;
}


/* дорога */

[data-theme="game"] .game-hero-scene::after {
  content: "" !important;
  display: block !important;

  position: absolute !important;

  inset:
    auto 0 0 0 !important;

  height: 30px !important;

  z-index: 4 !important;

  background-image:
    url("/static/cats/ground_night.png") !important;

  background-repeat:
    repeat-x !important;

  background-size:
    auto 30px !important;

  background-position:
    0 bottom !important;

  animation:
    catNightGroundScroll
    8s
    linear
    infinite !important;

  pointer-events: none !important;
}


/*
 * КОТ.
 * Всегда едет слева направо по всей сцене.
 */
[data-theme="game"] .game-scene-cat {
  --scene-cat-scale: .36;
  --scene-cat-width:
    calc(191px * var(--scene-cat-scale));
  --scene-cat-height:
    calc(125px * var(--scene-cat-scale));

  position: absolute !important;

  left: 0 !important;
  bottom: 1px !important;

  width:
    var(--scene-cat-width) !important;

  height:
    var(--scene-cat-height) !important;

  margin: 0 !important;

  overflow: hidden !important;

  z-index: 10 !important;

  animation:
    gameSceneCatTravelFull
    7s
    linear
    infinite !important;

  will-change: transform;
}


/* кадры кота */

[data-theme="game"] .game-scene-cat-sprite {
  animation:
    gameSceneCatFrames
    .8s
    steps(8)
    infinite !important;
}


/*
 * На случай старого prefers-reduced-motion,
 * который мог прибить нашу анимацию.
 */
[data-theme="game"] .game-hero-scene,
[data-theme="game"] .game-hero-scene::before,
[data-theme="game"] .game-hero-scene::after,
[data-theme="game"] .game-scene-cat,
[data-theme="game"] .game-scene-cat-sprite {
  animation-play-state:
    running !important;
}


@media (max-width: 380px) {

  [data-theme="game"] .game-hero-scene {
    left: 14px !important;
    right: 14px !important;
    bottom: 8px !important;
  }

  [data-theme="game"] .game-scene-cat {
    --scene-cat-scale: .33;
  }

}



/* =========================================================
   GAME CAT — CORRECT ANCHOR
========================================================= */

/*
 * ВАЖНО:
 * game-hero-scene вложена внутрь theme-game-progress.
 * Поэтому theme-game-progress НЕ должна быть positioned,
 * иначе bottom сцены считается от HP-блока.
 */
[data-theme="game"] .theme-game-progress {
  position: static !important;
}


/*
 * Заголовок HP и сама полоска остаются поверх сцены.
 */
[data-theme="game"] .theme-game-progress-head,
[data-theme="game"] .theme-game-progress-track {
  position: relative !important;
  z-index: 30 !important;
}


/*
 * Система координат теперь именно вся balance-card.
 */
[data-theme="game"] .balance-hero {
  position: relative !important;
  overflow: hidden !important;
}


/*
 * Ночная сцена прибита к самому низу всей карточки.
 */
[data-theme="game"] .game-hero-scene {
  position: absolute !important;

  left: 18px !important;
  right: 18px !important;

  top: auto !important;
  bottom: 8px !important;

  width: auto !important;
  height: 76px !important;

  margin: 0 !important;

  z-index: 5 !important;

  overflow: hidden !important;
}


/*
 * Кот по дороге внизу сцены.
 */
[data-theme="game"] .game-scene-cat {
  bottom: 0 !important;
  z-index: 10 !important;
}


/*
 * HP никогда не должен визуально попадать внутрь города.
 */
[data-theme="game"] .theme-game-progress-track {
  margin-bottom: 0 !important;
}



/* =========================================================
   GAME CAT — FULL BLEED + PARALLAX FIX
========================================================= */


/*
 * Вся карточка — viewport.
 */
[data-theme="game"] .balance-hero {
  position: relative !important;
  overflow: hidden !important;
}


/*
 * Сцена от ЛЕВОГО до ПРАВОГО края
 * и строго до НИЖНЕГО края карточки.
 *
 * border самой карточки ~3px, поэтому оставляем
 * только минимальный inset внутри чёрной рамки.
 */
[data-theme="game"] .game-hero-scene {
  position: absolute !important;

  left: 3px !important;
  right: 3px !important;

  top: auto !important;
  bottom: 3px !important;

  width: auto !important;
  height: 76px !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;

  overflow: hidden !important;

  z-index: 5 !important;

  background-image:
    url("/static/cats/bg_layer1_far_night.png") !important;

  background-repeat:
    repeat-x !important;

  background-size:
    auto 76px !important;

  background-position:
    0 bottom;

  /*
   * Дальний план.
   * !important ставим на весь animation,
   * чтобы старые game-theme правила его
   * больше не перебивали.
   */
  animation:
    catNightFarScrollFixed
    48s
    linear
    infinite !important;

  animation-play-state:
    running !important;
}


/* =========================================================
   СРЕДНИЙ ПЛАН
========================================================= */

[data-theme="game"] .game-hero-scene::before {
  content: "" !important;
  display: block !important;

  position: absolute !important;

  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: auto !important;

  width: auto !important;
  height: 57px !important;

  z-index: 2 !important;

  background-image:
    url("/static/cats/bg_layer2_mid_night.png") !important;

  background-repeat:
    repeat-x !important;

  background-size:
    auto 57px !important;

  background-position:
    0 bottom;

  animation:
    catNightMidScrollFixed
    24s
    linear
    infinite !important;

  animation-play-state:
    running !important;

  pointer-events: none !important;
}


/* =========================================================
   ДОРОГА
========================================================= */

[data-theme="game"] .game-hero-scene::after {
  content: "" !important;
  display: block !important;

  position: absolute !important;

  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: auto !important;

  width: auto !important;
  height: 30px !important;

  z-index: 4 !important;

  background-image:
    url("/static/cats/ground_night.png") !important;

  background-repeat:
    repeat-x !important;

  background-size:
    auto 30px !important;

  background-position:
    0 bottom;

  animation:
    catNightGroundScrollFixed
    9s
    linear
    infinite !important;

  animation-play-state:
    running !important;

  pointer-events: none !important;
}


/* =========================================================
   КОТ
========================================================= */

[data-theme="game"] .game-scene-cat {
  bottom: 0 !important;
  z-index: 10 !important;

  animation:
    gameSceneCatTravelFull
    7s
    linear
    infinite !important;

  animation-play-state:
    running !important;
}


[data-theme="game"] .game-scene-cat-sprite {
  animation:
    gameSceneCatFrames
    .8s
    steps(8)
    infinite !important;

  animation-play-state:
    running !important;
}


/* =========================================================
   НОВЫЕ KEYFRAMES
   Отдельные имена специально, чтобы старые определения
   вообще никак сюда не вмешивались.
========================================================= */

@keyframes catNightFarScrollFixed {

  from {
    background-position:
      0 bottom;
  }

  to {
    background-position:
      -640px bottom;
  }

}


@keyframes catNightMidScrollFixed {

  from {
    background-position:
      0 bottom;
  }

  to {
    background-position:
      -640px bottom;
  }

}


@keyframes catNightGroundScrollFixed {

  from {
    background-position:
      0 bottom;
  }

  to {
    background-position:
      -640px bottom;
  }

}


/*
 * Старые mobile overrides больше не должны
 * сужать нашу сцену.
 */
@media (max-width: 380px) {

  [data-theme="game"] .game-hero-scene {
    left: 3px !important;
    right: 3px !important;
    bottom: 3px !important;

    width: auto !important;
    height: 76px !important;
  }

}



/* =========================================================
   GAME CAT — REAL PARALLAX FINAL
========================================================= */


/*
 * Карточка обрезает всё по своей собственной
 * округлой рамке.
 */
[data-theme="game"] .balance-hero {
  position: relative !important;
  overflow: hidden !important;
}


/*
 * СЦЕНА ВПЛОТНУЮ:
 * слева / справа / снизу = 0.
 */
[data-theme="game"] .game-hero-scene {
  position: absolute !important;

  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: auto !important;

  width: 100% !important;
  height: 78px !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;

  overflow: hidden !important;

  z-index: 5 !important;

  /*
   * Старую background-анимацию полностью убиваем.
   */
  background: #17133f !important;
  animation: none !important;

  isolation: isolate;
}


/* Старые псевдослои больше вообще не нужны */

[data-theme="game"] .game-hero-scene::before,
[data-theme="game"] .game-hero-scene::after {
  content: none !important;
  display: none !important;
}


/* старый мусор */

[data-theme="game"] .game-scene-coin,
[data-theme="game"] .game-scene-particle,
[data-theme="game"] .game-scene-track {
  display: none !important;
}


/* =========================================================
   ОБЩИЙ PARALLAX LAYER
========================================================= */

[data-theme="game"] .game-parallax {
  position: absolute;

  left: 0;
  bottom: 0;

  /*
   * Делаем слой вдвое шире viewport.
   * Картинка тайлится внутри.
   */
  width: 200%;
  height: 100%;

  pointer-events: none;

  background-repeat: repeat-x;

  will-change: transform;
}


/* =========================================================
   FAR — НЕБО + ЛУНА + ДАЛЬНИЕ ДОМА
========================================================= */

[data-theme="game"] .game-parallax-far {
  z-index: 1;

  background-image:
    url("/static/cats/bg_layer1_far_night.png");

  background-size:
    auto 78px;

  background-position:
    0 bottom;

  animation:
    gameParallaxFarMove
    44s
    linear
    infinite;
}


/* =========================================================
   MID — БЛИЖНИЕ ДОМА
========================================================= */

[data-theme="game"] .game-parallax-mid {
  z-index: 2;

  height: 58px;

  background-image:
    url("/static/cats/bg_layer2_mid_night.png");

  background-size:
    auto 58px;

  background-position:
    0 bottom;

  animation:
    gameParallaxMidMove
    22s
    linear
    infinite;
}


/* =========================================================
   GROUND — АСФАЛЬТ
========================================================= */

[data-theme="game"] .game-parallax-ground {
  z-index: 4;

  height: 30px;

  background-image:
    url("/static/cats/ground_night.png");

  background-size:
    auto 30px;

  background-position:
    0 bottom;

  animation:
    gameParallaxGroundMove
    7s
    linear
    infinite;
}


/* =========================================================
   ДВИЖЕНИЕ
========================================================= */

/*
 * Двигаем сам DIV, а не background-position.
 * Поэтому старые !important правила теперь
 * вообще никак не могут сломать параллакс.
 */

@keyframes gameParallaxFarMove {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-320px, 0, 0);
  }
}


@keyframes gameParallaxMidMove {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-640px, 0, 0);
  }
}


@keyframes gameParallaxGroundMove {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-640px, 0, 0);
  }
}


/* =========================================================
   CAT
========================================================= */

[data-theme="game"] .game-scene-cat {
  bottom: 0 !important;

  z-index: 10 !important;

  animation:
    gameSceneCatTravelFull
    7s
    linear
    infinite !important;

  animation-play-state:
    running !important;
}


[data-theme="game"] .game-scene-cat-sprite {
  animation:
    gameSceneCatFrames
    .8s
    steps(8)
    infinite !important;

  animation-play-state:
    running !important;
}


/*
 * HP всегда выше игровой сцены.
 */
[data-theme="game"] .theme-game-progress-head,
[data-theme="game"] .theme-game-progress-track {
  position: relative !important;
  z-index: 30 !important;
}


/*
 * На узком экране всё равно full bleed.
 */
@media (max-width: 380px) {

  [data-theme="game"] .game-hero-scene {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    width: 100% !important;
    height: 76px !important;
  }

}



/* =========================================================
   GAME CAT — ROAD SEAM + HEIGHT FIX
========================================================= */

/*
 * Старое width:200% оказалось недостаточным:
 * при translateX(-640px) сам слой заканчивался.
 *
 * Теперь у каждого слоя всегда есть ещё один
 * полный 640px тайл справа.
 */
[data-theme="game"] .game-parallax {
  width: calc(100% + 640px) !important;
}


/* =========================================================
   ROAD
========================================================= */

[data-theme="game"] .game-parallax-ground {
  /*
   * 30px было слишком жирно.
   * Оставляем тонкую пиксельную дорогу.
   */
  height: 17px !important;

  background-size:
    auto 17px !important;

  background-position:
    0 bottom !important;

  /*
   * Один полный цикл = ровно ширина тайла.
   * Так начало и конец совпадают пиксель в пиксель.
   */
  animation:
    gameParallaxGroundSeamless
    7s
    linear
    infinite !important;
}


@keyframes gameParallaxGroundSeamless {
  from {
    transform:
      translate3d(
        0,
        0,
        0
      );
  }

  to {
    transform:
      translate3d(
        -640px,
        0,
        0
      );
  }
}


/*
 * Кота немного подсаживаем на новую,
 * более тонкую дорогу.
 */
[data-theme="game"] .game-scene-cat {
  bottom: 1px !important;
}



/* =========================================================
   GAME HERO — NIGHT GRADIENT
========================================================= */

[data-theme="game"] .balance-hero {
  /*
   * Сверху сохраняем фирменный game-purple,
   * книзу плавно приходим к ночной сцене.
   */
  background:
    linear-gradient(
      180deg,
      #7560ee 0%,
      #705bea 30%,
      #604bd4 52%,
      #44359d 68%,
      #29215f 82%,
      #17133f 100%
    ) !important;
}


/*
 * HP track тоже немного приглушаем,
 * чтобы он дружил с ночной палитрой.
 */
[data-theme="game"] .theme-game-progress-track {
  background:
    rgba(20, 16, 49, .72) !important;

  border-color:
    rgba(20, 16, 35, .88) !important;
}


/*
 * Еле заметное свечение сверху,
 * чтобы карточка не стала мрачной.
 */
[data-theme="game"] .balance-hero::before {
  content: "" !important;

  position: absolute !important;
  inset: 0 !important;

  pointer-events: none !important;

  background:
    radial-gradient(
      circle at 55% 12%,
      rgba(255,255,255,.10),
      transparent 46%
    ) !important;

  z-index: 0 !important;
}


/*
 * Контент гарантированно выше декоративного света.
 */
[data-theme="game"] .balance-hero > * {
  position: relative;
  z-index: 1;
}


/*
 * Но игровая сцена сохраняет свою абсолютную
 * геометрию и слои.
 */
[data-theme="game"] .game-hero-scene {
  position: absolute !important;
  z-index: 5 !important;
}



/* =========================================================
   GAME HERO — STOP ROCKING
========================================================= */

[data-theme="game"] .balance-hero {
  animation: none !important;

  transform:
    none !important;

  rotate:
    0deg !important;

  translate:
    none !important;

  scale:
    1 !important;
}



/* =========================================================
   FIX — GAME HERO MUST NOT ROCK
========================================================= */

/*
 * ::before теперь используется как полноразмерный
 * световой overlay карточки.
 *
 * Старая PLAYER 01 animation на нём больше
 * применяться НЕ должна.
 */
[data-theme="game"] .balance-hero::before {
  animation: none !important;

  transform: none !important;
  rotate: 0deg !important;
  translate: none !important;
  scale: 1 !important;
}


/*
 * Сама карточка тоже стоит мёртво.
 */
[data-theme="game"] .balance-hero {
  animation: none !important;

  transform: none !important;
  rotate: 0deg !important;
  translate: none !important;
  scale: 1 !important;
}


/* =========================================================
   FIX — CHART MUST STAY BELOW NAV
========================================================= */

/*
 * Навигация всегда самый верхний UI-слой.
 */
.nav {
  position: fixed !important;
  z-index: 1000 !important;
}

.nav-inner {
  position: relative !important;
  z-index: 1001 !important;
}


/*
 * График не имеет права рисоваться поверх navigation.
 */
#spendingDynamics {
  position: relative !important;
  z-index: 1 !important;

  overflow: hidden !important;
}

#spendingDynamics canvas,
#spendingDynamics svg {
  position: relative !important;
  z-index: 1 !important;

  max-width: 100% !important;
}


/*
 * Секция с графиком также остаётся в обычном слое.
 */
#spendingDynamics,
#spendingDynamics * {
  isolation: auto;
}



/* =========================================================
   NEW THEME PREVIEWS
========================================================= */

.theme-preview-graphite {
  background:
    radial-gradient(circle at 74% 28%, #6ec3ff 0 3px, transparent 4px),
    linear-gradient(145deg,#24272e,#17191d);
  box-shadow:
    inset 5px 5px 10px #141519,
    inset -4px -4px 9px #2a2d34;
}

.theme-preview-terminal {
  background:
    repeating-linear-gradient(
      0deg,
      rgba(79,251,154,.05) 0 1px,
      transparent 1px 4px
    ),
    linear-gradient(
      90deg,
      transparent 0 12%,
      #4ffb9a 12% 14%,
      transparent 14% 29%,
      #2c7a54 29% 31%,
      transparent 31% 47%,
      #4ffb9a 47% 50%,
      transparent 50%
    ),
    #050705;
}

.theme-preview-editorial {
  background:
    linear-gradient(
      90deg,
      transparent 49%,
      rgba(201,162,39,.35) 49% 50%,
      transparent 50%
    ),
    radial-gradient(
      circle at 50% 36%,
      rgba(201,162,39,.2),
      transparent 25%
    ),
    #1b1220;
}


/* =========================================================
   GRAPHITE
========================================================= */

:root[data-theme="graphite"] {
  --bg:#1c1e23;
  --card:#1c1e23;
  --card2:#202228;

  --text:#e7e9ee;
  --muted:#82868f;
  --border:#292c32;

  --accent:#6ec3ff;
  --income:#6ec3ff;
  --danger:#d9bd8c;

  --radius-card:22px;

  --graphite-hi:#25282f;
  --graphite-lo:#141519;
}


[data-theme="graphite"] body {
  background:#1c1e23 !important;

  color:var(--text);

  font-family:
    "Plus Jakarta Sans",
    Inter,
    system-ui,
    sans-serif;
}


[data-theme="graphite"] .balance-hero,
[data-theme="graphite"] .income-expense-card,
[data-theme="graphite"] .metric,
[data-theme="graphite"] .dynamics-stat,
[data-theme="graphite"] .recurring-payment,
[data-theme="graphite"] .operations-summary-item,
[data-theme="graphite"] .settings-block,
[data-theme="graphite"] .debt-hero,
[data-theme="graphite"] .debt-summary-card,
[data-theme="graphite"] .debt-card,
[data-theme="graphite"] .expense-template-card,
[data-theme="graphite"] .template-suggestion-box {
  background:#1c1e23 !important;

  border:0 !important;

  box-shadow:
    8px 8px 16px #141519,
    -7px -7px 15px #25282f !important;
}


[data-theme="graphite"] .balance-hero {
  min-height:190px;

  border-radius:28px !important;

  padding:25px 23px !important;
}


[data-theme="graphite"] .hero-label {
  color:#82868f;

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

  letter-spacing:.10em;

  text-transform:uppercase;
}


[data-theme="graphite"] .hero-value {
  margin-top:7px;

  color:#e7e9ee;

  font-size:42px !important;
  font-weight:800 !important;

  letter-spacing:-.035em;
}


[data-theme="graphite"] .income-expense-card,
[data-theme="graphite"] .metric,
[data-theme="graphite"] .dynamics-stat {
  border-radius:19px !important;
}


[data-theme="graphite"] .income-value {
  color:#6ec3ff !important;
}

[data-theme="graphite"] .expense-value {
  color:#d9bd8c !important;
}


[data-theme="graphite"] #overviewView > .section {
  margin-top:28px;
}


[data-theme="graphite"] .section-title {
  color:#e7e9ee;

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


[data-theme="graphite"] .themed-chart-graphite {
  padding:18px 14px;

  border-radius:22px;

  background:#1c1e23;

  box-shadow:
    inset 4px 4px 9px #141519,
    inset -4px -4px 9px #25282f;
}


[data-theme="graphite"] .theme-bar-stick {
  border-radius:7px 7px 3px 3px;

  background:
    linear-gradient(
      180deg,
      #353941,
      #25282e
    ) !important;
}


[data-theme="graphite"] .theme-bar-item.peak .theme-bar-stick {
  background:
    linear-gradient(
      180deg,
      #7bcaff,
      #3e86b8
    ) !important;

  box-shadow:
    0 0 14px rgba(110,195,255,.22);
}


[data-theme="graphite"] .theme-cat-row,
[data-theme="graphite"] .settings-category {
  border:0 !important;

  border-radius:17px !important;

  background:#1c1e23 !important;

  box-shadow:
    5px 5px 11px #141519,
    -5px -5px 11px #25282f !important;
}


[data-theme="graphite"] .theme-cat-icon,
[data-theme="graphite"] .settings-category-emoji,
[data-theme="graphite"] .small-btn {
  background:#1c1e23 !important;

  border:0 !important;

  box-shadow:
    inset 3px 3px 6px #141519,
    inset -3px -3px 6px #25282f !important;
}


[data-theme="graphite"] .theme-cat-meter {
  display:block !important;

  height:5px !important;

  background:#141519 !important;
}


[data-theme="graphite"] .theme-cat-meter i {
  background:#6ec3ff !important;
}


[data-theme="graphite"] .sheet {
  background:#1c1e23 !important;

  border:0 !important;

  box-shadow:
    -8px -8px 20px rgba(36,39,46,.55);
}


[data-theme="graphite"] input,
[data-theme="graphite"] select,
[data-theme="graphite"] textarea {
  background:#1c1e23 !important;

  color:#e7e9ee !important;

  border:0 !important;

  box-shadow:
    inset 4px 4px 8px #141519,
    inset -4px -4px 8px #25282f !important;
}


[data-theme="graphite"] .nav-inner {
  background:#1c1e23 !important;

  border:0 !important;

  border-radius:24px !important;

  box-shadow:
    8px 8px 16px #141519,
    -6px -6px 14px #25282f !important;
}


[data-theme="graphite"] .nav-item {
  color:#82868f !important;
}

[data-theme="graphite"] .nav-item.active {
  background:transparent !important;

  color:#6ec3ff !important;
}


/* =========================================================
   TERMINAL
========================================================= */

:root[data-theme="terminal"] {
  --bg:#050705;
  --card:#050705;
  --card2:#070907;

  --text:#4ffb9a;
  --muted:#5b7a66;
  --border:#163325;

  --accent:#4ffb9a;
  --income:#4ffb9a;
  --danger:#ffc24b;

  --radius-card:0px;
}


[data-theme="terminal"] body {
  background:#050705 !important;

  color:#4ffb9a;

  font-family:
    "IBM Plex Mono",
    "Cascadia Mono",
    Consolas,
    monospace;
}


[data-theme="terminal"] body::after {
  content:"";

  position:fixed;
  inset:0;

  z-index:9999;

  pointer-events:none;

  opacity:.27;

  background:
    repeating-linear-gradient(
      0deg,
      rgba(0,0,0,.18) 0 1px,
      transparent 1px 3px
    );
}


[data-theme="terminal"] .top {
  padding-bottom:11px;

  border-bottom:1px solid #163325;
}


[data-theme="terminal"] .logo {
  color:#4ffb9a;

  font-family:inherit;

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


[data-theme="terminal"] .logo::before {
  content:"user@gdedengi:~$ ";

  color:#5b7a66;
}


[data-theme="terminal"] .period {
  color:#5b7a66 !important;

  font-family:inherit;

  border:0 !important;
  background:transparent !important;
}


[data-theme="terminal"] .balance-hero {
  min-height:auto !important;

  padding:14px 0 20px !important;

  background:transparent !important;

  border:0 !important;
  border-radius:0 !important;

  box-shadow:none !important;
}


[data-theme="terminal"] .hero-label {
  color:#5b7a66;

  font-family:inherit;

  text-transform:lowercase;
}


[data-theme="terminal"] .hero-label::before {
  content:"$ ";
  color:#4ffb9a;
}


[data-theme="terminal"] .hero-value {
  color:#4ffb9a !important;

  font-family:inherit !important;

  font-size:43px !important;
  font-weight:700 !important;

  text-shadow:none !important;
}


[data-theme="terminal"] .hero-value::after {
  content:"_";

  display:inline-block;

  margin-left:4px;

  animation:
    terminalCursorBlink
    1s
    steps(1)
    infinite;
}


@keyframes terminalCursorBlink {
  50% { opacity:0; }
}


[data-theme="terminal"] .income-expense-summary,
[data-theme="terminal"] .metrics,
[data-theme="terminal"] .dynamics-metrics-grid {
  gap:1px !important;

  background:#163325;
}


[data-theme="terminal"] .income-expense-card,
[data-theme="terminal"] .metric,
[data-theme="terminal"] .dynamics-stat,
[data-theme="terminal"] .recurring-payment,
[data-theme="terminal"] .operations-summary-item,
[data-theme="terminal"] .settings-block,
[data-theme="terminal"] .debt-hero,
[data-theme="terminal"] .debt-summary-card,
[data-theme="terminal"] .debt-card,
[data-theme="terminal"] .expense-template-card,
[data-theme="terminal"] .template-suggestion-box {
  background:#050705 !important;

  border:1px solid #163325 !important;

  border-radius:0 !important;

  box-shadow:none !important;
}


[data-theme="terminal"] .income-value {
  color:#4ffb9a !important;
}

[data-theme="terminal"] .expense-value {
  color:#ffc24b !important;
}


[data-theme="terminal"] #overviewView > .section {
  border-top:1px solid #163325;

  padding-top:20px;

  margin-top:24px;
}


[data-theme="terminal"] .section-title {
  color:#4ffb9a;

  font-family:inherit;

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

  letter-spacing:.06em;

  text-transform:uppercase;
}


[data-theme="terminal"] .section-title::before {
  content:"# ";
  color:#5b7a66;
}


[data-theme="terminal"] .themed-chart-terminal {
  border:1px solid #163325;

  border-radius:0;

  background:#050705;
}


[data-theme="terminal"] .theme-bar-stick {
  border-radius:0 !important;

  background:#2c7a54 !important;
}


[data-theme="terminal"] .theme-bar-item.peak .theme-bar-stick {
  background:#4ffb9a !important;

  box-shadow:
    0 0 8px rgba(79,251,154,.35);
}


[data-theme="terminal"] .theme-bar-label {
  color:#5b7a66 !important;

  font-family:inherit;
}


[data-theme="terminal"] .theme-cat-row,
[data-theme="terminal"] .settings-category {
  border:0 !important;
  border-bottom:1px dotted #163325 !important;

  border-radius:0 !important;

  background:transparent !important;

  box-shadow:none !important;
}


[data-theme="terminal"] .theme-cat-icon,
[data-theme="terminal"] .settings-category-emoji,
[data-theme="terminal"] .small-btn {
  background:transparent !important;

  border:1px solid #163325 !important;

  border-radius:0 !important;

  color:#4ffb9a !important;
}


[data-theme="terminal"] .theme-cat-meter {
  display:block !important;

  height:6px !important;

  border-radius:0 !important;

  background:#163325 !important;
}


[data-theme="terminal"] .theme-cat-meter i {
  border-radius:0 !important;

  background:#4ffb9a !important;
}


[data-theme="terminal"] .sheet {
  background:#050705 !important;

  color:#4ffb9a;

  border:1px solid #163325 !important;

  border-radius:0 !important;
}


[data-theme="terminal"] input,
[data-theme="terminal"] select,
[data-theme="terminal"] textarea {
  background:#050705 !important;

  color:#4ffb9a !important;

  border:1px solid #163325 !important;

  border-radius:0 !important;

  font-family:inherit;
}


[data-theme="terminal"] .btn,
[data-theme="terminal"] .settings-add {
  background:#070907 !important;

  color:#4ffb9a !important;

  border:1px solid #2c7a54 !important;

  border-radius:0 !important;

  font-family:inherit;
}


[data-theme="terminal"] .nav-inner {
  background:#070907 !important;

  border:1px solid #163325 !important;

  border-radius:0 !important;

  padding:0 !important;

  box-shadow:none !important;
}


[data-theme="terminal"] .nav-item {
  color:#5b7a66 !important;

  border-right:1px solid #163325;
  border-radius:0 !important;

  font-family:inherit;

  text-transform:uppercase;
}


[data-theme="terminal"] .nav-item:last-child {
  border-right:0;
}


[data-theme="terminal"] .nav-item.active {
  background:rgba(79,251,154,.06) !important;

  color:#4ffb9a !important;
}


/* =========================================================
   EDITORIAL
========================================================= */

:root[data-theme="editorial"] {
  --bg:#1b1220;
  --card:#221729;
  --card2:#211625;

  --text:#efe7e9;
  --muted:#9c8b94;
  --border:#3a2a3f;

  --accent:#c9a227;
  --income:#c9a227;
  --danger:#b98a9a;

  --radius-card:2px;
}


[data-theme="editorial"] body {
  background:
    radial-gradient(
      120% 90% at 50% -10%,
      #291b30,
      #1b1220 58%
    ) !important;

  color:#efe7e9;

  font-family:
    Karla,
    Inter,
    system-ui,
    sans-serif;
}


[data-theme="editorial"] .top {
  justify-content:center;

  padding-bottom:17px;

  border-bottom:1px solid #3a2a3f;
}


[data-theme="editorial"] .logo {
  font-family:
    "Bodoni Moda",
    Didot,
    Georgia,
    serif;

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

  text-align:center;
}


[data-theme="editorial"] .period {
  position:absolute;
  right:18px;

  color:#9c8b94 !important;

  border:0 !important;
  background:transparent !important;

  font-size:9px;

  letter-spacing:.07em;

  text-transform:uppercase;
}


[data-theme="editorial"] .balance-hero {
  min-height:auto !important;

  padding:24px 8px 20px !important;

  text-align:center;

  background:transparent !important;

  border:0 !important;
  border-radius:0 !important;

  box-shadow:none !important;
}


[data-theme="editorial"] .hero-label {
  color:#9c8b94;

  font-size:10px;

  letter-spacing:.18em;

  text-transform:uppercase;
}


[data-theme="editorial"] .hero-value {
  margin-top:10px;

  color:#efe7e9 !important;

  font-family:
    "Bodoni Moda",
    Didot,
    Georgia,
    serif !important;

  font-size:51px !important;
  font-style:italic;
  font-weight:500 !important;

  letter-spacing:-.025em;

  text-shadow:none !important;
}


[data-theme="editorial"] .income-expense-summary {
  gap:0 !important;

  border-top:1px solid #3a2a3f;
  border-bottom:1px solid #3a2a3f;
}


[data-theme="editorial"] .income-expense-card {
  background:transparent !important;

  border:0 !important;
  border-radius:0 !important;

  box-shadow:none !important;

  text-align:center;
}


[data-theme="editorial"] .income-expense-card:first-child {
  border-right:1px solid #3a2a3f !important;
}


[data-theme="editorial"] .income-expense-label,
[data-theme="editorial"] .metric-label,
[data-theme="editorial"] .dynamics-stat-label {
  color:#9c8b94 !important;

  font-size:9px;

  letter-spacing:.12em;

  text-transform:uppercase;
}


[data-theme="editorial"] .income-expense-value,
[data-theme="editorial"] .metric-value,
[data-theme="editorial"] .dynamics-stat-value {
  font-family:
    "Bodoni Moda",
    Didot,
    Georgia,
    serif;

  font-weight:500;
}


[data-theme="editorial"] .income-value {
  color:#c9a227 !important;
}


[data-theme="editorial"] .metric,
[data-theme="editorial"] .dynamics-stat {
  background:transparent !important;

  border:0 !important;
  border-bottom:1px solid #3a2a3f !important;

  border-radius:0 !important;

  box-shadow:none !important;
}


[data-theme="editorial"] #overviewView > .section {
  margin-top:30px;

  border:0;
}


[data-theme="editorial"] .section-head {
  justify-content:center;

  text-align:center;
}


[data-theme="editorial"] .section-title {
  color:#efe7e9;

  font-family:
    "Bodoni Moda",
    Didot,
    Georgia,
    serif;

  font-size:19px;
  font-style:italic;
  font-weight:500;
}


[data-theme="editorial"] .section-title::before {
  content:"— ";

  color:#c9a227;
}


[data-theme="editorial"] .section-title::after {
  content:" —";

  color:#c9a227;
}


[data-theme="editorial"] .themed-chart-editorial {
  border:0;
  border-bottom:1px solid #3a2a3f;

  border-radius:0;

  background:transparent;
}


[data-theme="editorial"] .theme-bar-stick {
  border-radius:0 !important;

  background:#3a2a3f !important;
}


[data-theme="editorial"] .theme-bar-item.peak .theme-bar-stick {
  background:#c9a227 !important;
}


[data-theme="editorial"] .theme-bar-label {
  color:#9c8b94 !important;

  font-size:9px;

  text-transform:uppercase;
}


[data-theme="editorial"] .theme-cat-row,
[data-theme="editorial"] .settings-category {
  border:0 !important;
  border-bottom:1px solid #3a2a3f !important;

  border-radius:0 !important;

  background:transparent !important;

  box-shadow:none !important;
}


[data-theme="editorial"] .theme-cat-icon,
[data-theme="editorial"] .settings-category-emoji {
  background:rgba(201,162,39,.07) !important;

  border:1px solid rgba(201,162,39,.18) !important;

  border-radius:50% !important;
}


[data-theme="editorial"] .theme-cat-meter {
  display:none !important;
}


[data-theme="editorial"] .theme-cat-value {
  color:#efe7e9 !important;

  font-family:
    "Bodoni Moda",
    Didot,
    Georgia,
    serif;

  font-size:15px;
}


[data-theme="editorial"] .settings-block,
[data-theme="editorial"] .debt-hero,
[data-theme="editorial"] .debt-summary-card,
[data-theme="editorial"] .debt-card,
[data-theme="editorial"] .expense-template-card,
[data-theme="editorial"] .template-suggestion-box {
  background:#211625 !important;

  border:1px solid #3a2a3f !important;

  border-radius:2px !important;

  box-shadow:none !important;
}


[data-theme="editorial"] .sheet {
  background:#211625 !important;

  border:1px solid #3a2a3f !important;

  border-radius:2px 2px 0 0 !important;
}


[data-theme="editorial"] input,
[data-theme="editorial"] select,
[data-theme="editorial"] textarea {
  background:#1b1220 !important;

  color:#efe7e9 !important;

  border:0 !important;
  border-bottom:1px solid #3a2a3f !important;

  border-radius:0 !important;
}


[data-theme="editorial"] .btn,
[data-theme="editorial"] .settings-add {
  border-radius:1px !important;
}


[data-theme="editorial"] .nav-inner {
  background:rgba(34,23,41,.95) !important;

  border:1px solid #3a2a3f !important;

  border-radius:2px !important;

  padding:4px !important;

  box-shadow:none !important;
}


[data-theme="editorial"] .nav-item {
  color:#9c8b94 !important;

  border-radius:1px !important;

  font-size:10px;

  letter-spacing:.06em;

  text-transform:uppercase;
}


[data-theme="editorial"] .nav-item.active {
  background:#c9a227 !important;

  color:#1b1220 !important;
}



/* =========================================================
   NEW THEMES — SELECTED CHART DAY FIX
========================================================= */


/* GRAPHITE */

[data-theme="graphite"]
.theme-bar-item.selected
.theme-bar-stick {
  background:
    linear-gradient(
      180deg,
      #7bcaff,
      #3e86b8
    ) !important;

  box-shadow:
    0 0 14px
    rgba(110,195,255,.28) !important;
}

[data-theme="graphite"]
.theme-bars:has(.selected)
.theme-bar-item.peak:not(.selected)
.theme-bar-stick {
  background:
    linear-gradient(
      180deg,
      #353941,
      #25282e
    ) !important;

  box-shadow: none !important;
}


/* TERMINAL */

[data-theme="terminal"]
.theme-bar-item.selected
.theme-bar-stick {
  background:
    #4ffb9a !important;

  box-shadow:
    0 0 9px
    rgba(79,251,154,.38) !important;
}

[data-theme="terminal"]
.theme-bars:has(.selected)
.theme-bar-item.peak:not(.selected)
.theme-bar-stick {
  background:
    #2c7a54 !important;

  box-shadow: none !important;
}


/* EDITORIAL */

[data-theme="editorial"]
.theme-bar-item.selected
.theme-bar-stick {
  background:
    #c9a227 !important;

  box-shadow:
    0 0 10px
    rgba(201,162,39,.18) !important;
}

[data-theme="editorial"]
.theme-bars:has(.selected)
.theme-bar-item.peak:not(.selected)
.theme-bar-stick {
  background:
    #3a2a3f !important;

  box-shadow: none !important;
}



/* =========================================================
   USER CHART — LINE / AREA FINAL VISIBILITY FIX
========================================================= */

#spendingDynamics:has(.user-chart-shell) {
  position: relative !important;

  display: block !important;

  width: 100% !important;

  min-height: 205px !important;

  overflow: visible !important;
}


.user-chart-shell {
  position: relative !important;

  display: block !important;

  width: 100% !important;
  height: 180px !important;

  overflow: visible !important;

  color: var(--accent, #7c6cff) !important;
}


.user-line-chart {
  display: block !important;

  width: 100% !important;
  height: 180px !important;

  min-height: 180px !important;

  overflow: visible !important;

  color: inherit !important;

  touch-action: pan-y;
}


/* сетка */

.user-chart-grid {
  fill: none !important;

  stroke:
    var(--border, rgba(128,128,128,.22)) !important;

  stroke-width: 1 !important;

  opacity: .75 !important;

  vector-effect:
    non-scaling-stroke;
}


/* линия */

.user-chart-line {
  fill: none !important;

  stroke:
    var(--accent, #7c6cff) !important;

  stroke-width: 3 !important;

  stroke-linecap: round !important;
  stroke-linejoin: round !important;

  opacity: 1 !important;

  vector-effect:
    non-scaling-stroke;

  filter:
    drop-shadow(
      0 2px 4px
      color-mix(
        in srgb,
        var(--accent, #7c6cff) 20%,
        transparent
      )
    );
}


/* область под линией */

.user-chart-area {
  fill:
    var(--accent, #7c6cff) !important;

  stroke: none !important;

  opacity: .16 !important;
}


/* выбранная точка */

.user-chart-selected {
  fill:
    var(--bg, #fff) !important;

  stroke:
    var(--accent, #7c6cff) !important;

  stroke-width: 3 !important;

  opacity: 0 !important;

  vector-effect:
    non-scaling-stroke;

  filter:
    drop-shadow(
      0 0 4px
      color-mix(
        in srgb,
        var(--accent, #7c6cff) 45%,
        transparent
      )
    );
}


.user-chart-selected.show {
  opacity: 1 !important;
}


/* невидимые зоны нажатия */

.user-chart-hit {
  fill: transparent !important;

  stroke: none !important;

  pointer-events: all !important;

  cursor: pointer;
}


/* tooltip */

.user-chart-tooltip {
  position: absolute !important;

  z-index: 20 !important;

  top: 6px !important;

  pointer-events: none !important;
}


/* =========================================================
   THEME-SPECIFIC CHART COLORS
========================================================= */


/* Graphite */

[data-theme="graphite"]
.user-chart-shell {
  color: #6ec3ff !important;
}


/* Terminal */

[data-theme="terminal"]
.user-chart-shell {
  color: #4ffb9a !important;
}

[data-theme="terminal"]
.user-chart-grid {
  stroke: #163325 !important;
}

[data-theme="terminal"]
.user-chart-line {
  stroke-width: 2 !important;

  filter:
    drop-shadow(
      0 0 3px
      rgba(79,251,154,.35)
    );
}

[data-theme="terminal"]
.user-chart-area {
  fill: #4ffb9a !important;

  opacity: .10 !important;
}

[data-theme="terminal"]
.user-chart-selected {
  fill: #050705 !important;
  stroke: #4ffb9a !important;
}


/* Editorial */

[data-theme="editorial"]
.user-chart-shell {
  color: #c9a227 !important;
}

[data-theme="editorial"]
.user-chart-grid {
  stroke: #3a2a3f !important;
}

[data-theme="editorial"]
.user-chart-area {
  fill: #c9a227 !important;

  opacity: .11 !important;
}

[data-theme="editorial"]
.user-chart-selected {
  fill: #1b1220 !important;
  stroke: #c9a227 !important;
}


/* Game */

[data-theme="game"]
.user-chart-shell {
  color: var(--g-yellow, #ffd95a) !important;
}


/* =========================================================
   SVG SAFETY
========================================================= */

.user-line-chart polyline,
.user-line-chart polygon,
.user-line-chart circle,
.user-line-chart line {
  pointer-events: none;
}

.user-line-chart .user-chart-hit {
  pointer-events: all !important;
}



/* UNIVERSAL CHART — SPECIAL OLD THEMES */

:is(
  #nightTrend,
  #cardSpark,
  #ledgerChart
):has(.user-chart-shell) {
  display: block !important;

  width: 100% !important;

  height: 190px !important;
  min-height: 190px !important;

  overflow: visible !important;
}

:is(
  #nightTrend,
  #cardSpark,
  #ledgerChart
) .user-chart-shell {
  width: 100% !important;
  height: 180px !important;
}

:is(
  #nightTrend,
  #cardSpark,
  #ledgerChart
) .user-line-chart {
  width: 100% !important;
  height: 180px !important;
}



/* USER CHART — SMOOTH PATH */

.user-line-chart
.user-chart-line,
.user-line-chart
.user-chart-area {
  pointer-events: none !important;
}

.user-chart-line {
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}



/* =========================================================
   GAME — UNIVERSAL CHART READOUT
========================================================= */

[data-theme="game"]
.game-user-chart-readout {
  display:grid;

  grid-template-columns:
    auto 1fr;

  gap:12px;

  align-items:center;

  margin-bottom:12px;

  padding:10px 12px;

  border:
    2px solid
    rgba(20,16,35,.9);

  border-radius:8px;

  background:
    rgba(31,24,76,.92);

  box-shadow:
    3px 3px 0
    rgba(20,16,35,.9);
}


[data-theme="game"]
.game-user-chart-readout-day,
[data-theme="game"]
.game-user-chart-readout-value {
  display:flex;

  flex-direction:column;

  gap:3px;
}


[data-theme="game"]
.game-user-chart-readout-value {
  align-items:flex-end;

  text-align:right;
}


[data-theme="game"]
.game-user-chart-readout span {
  color:
    rgba(255,255,255,.62);

  font-size:8px;

  font-weight:800;

  letter-spacing:.10em;
}


[data-theme="game"]
.game-user-chart-readout strong {
  color:#fff;

  font-size:14px;

  font-weight:900;
}


[data-theme="game"]
.game-user-chart-readout-value strong {
  color:
    var(--g-yellow, #ffd95a);

  font-size:18px;
}



/* =========================================================
   GAME — CLASSIC CHART TOOLTIP
========================================================= */

/*
 * Старое дополнительное окно больше не показываем.
 */
[data-theme="game"]
.game-user-chart-readout {
  display: none !important;
}


/*
 * Для пользовательских графиков Game
 * используем классический tooltip.
 *
 * Цвета здесь фиксированные специально:
 * Game имеет тёмный --text, поэтому обычные
 * var(--text) давали тёмный текст на тёмном фоне.
 */

:root[data-theme="game"]:not([data-chart-style="auto"])
.line-chart-tooltip {
  position: absolute !important;

  top: 4px !important;

  min-width: 135px !important;

  max-width:
    min(190px, 58vw) !important;

  padding:
    8px 10px !important;

  border:
    1px solid
    #2c3645 !important;

  border-radius:
    12px !important;

  background:
    rgba(
      20,
      20,
      28,
      .94
    ) !important;

  color:
    #ffffff !important;

  opacity: 0;

  pointer-events:
    none !important;

  transition:
    opacity .15s ease !important;

  z-index:
    20 !important;

  box-shadow:
    0 8px 24px
    rgba(
      0,
      0,
      0,
      .22
    ) !important;

  backdrop-filter:
    blur(10px);
}


:root[data-theme="game"]:not([data-chart-style="auto"])
.line-chart-tooltip.show {
  opacity:
    1 !important;
}


:root[data-theme="game"]:not([data-chart-style="auto"])
.line-chart-tooltip
.tooltip-date {
  color:
    #8c91a3 !important;

  font-size:
    11px !important;

  margin-bottom:
    3px !important;
}


:root[data-theme="game"]:not([data-chart-style="auto"])
.line-chart-tooltip
.tooltip-amount {
  color:
    #ffffff !important;

  font-size:
    15px !important;

  font-weight:
    800 !important;
}


:root[data-theme="game"]:not([data-chart-style="auto"])
.line-chart-tooltip
.tooltip-amount.income-text {
  color:
    #4ade80 !important;
}


/*
 * Сохраняем классическое умное смещение:
 * слева popup открывается вправо,
 * справа — влево.
 */

:root[data-theme="game"]:not([data-chart-style="auto"])
.line-chart-tooltip.tooltip-right {
  transform:
    translateX(10px) !important;
}


:root[data-theme="game"]:not([data-chart-style="auto"])
.line-chart-tooltip.tooltip-left {
  transform:
    translateX(-10px) !important;
}



/* =========================================================
   GAME USER CHART — USE ORIGINAL GAME LEVEL CARD ONLY
========================================================= */

:root[data-theme="game"]:not([data-chart-style="auto"])
#spendingDynamics
.line-chart-tooltip {
  display: none !important;
}


/*
 * Старый экспериментальный readout тоже
 * никогда больше не показываем.
 */
[data-theme="game"]
.game-user-chart-readout {
  display: none !important;
}




/* =========================================================
   GLOBAL BOTTOM SHEET FIX
   All themes / all editing dialogs
========================================================= */

/*
 * Sheet ВСЕГДА выше bottom navigation.
 */
.sheet-overlay {
  z-index: 5000 !important;

  overflow: hidden !important;

  overscroll-behavior:
    contain !important;
}


.sheet-overlay.open {
  display: flex !important;

  align-items:
    flex-end !important;

  pointer-events:
    auto !important;
}


/*
 * Главный фикс:
 * sheet не может стать выше viewport.
 *
 * Скролл происходит ВНУТРИ sheet,
 * а не где-то под overlay.
 */
.sheet-overlay > .sheet {
  width: 100% !important;

  max-height:
    calc(100vh - 8px) !important;

  max-height:
    calc(100dvh - 8px) !important;

  min-height:
    0 !important;

  overflow-x:
    hidden !important;

  overflow-y:
    auto !important;

  overscroll-behavior-y:
    contain !important;

  -webkit-overflow-scrolling:
    touch !important;

  touch-action:
    pan-y !important;

  scroll-padding-top:
    20px !important;

  scroll-padding-bottom:
    120px !important;

  padding-bottom:
    max(
      24px,
      calc(
        20px +
        env(safe-area-inset-bottom)
      )
    ) !important;
}


/*
 * Кнопки сохранения остаются доступными,
 * даже если форма длинная.
 */
.sheet-overlay
.sheet-buttons {
  position:
    sticky !important;

  bottom:
    0 !important;

  z-index:
    20 !important;

  margin-top:
    20px !important;

  padding-top:
    12px !important;

  padding-bottom:
    max(
      6px,
      env(safe-area-inset-bottom)
    ) !important;

  background:
    var(--card2) !important;
}


/*
 * Инпут при открытии клавиатуры
 * можно нормально доскроллить.
 */
.sheet-overlay
:is(
  input,
  select,
  textarea,
  button
) {
  scroll-margin-bottom:
    110px;
}


/*
 * Bottom nav никогда не должен
 * перехватывать тап поверх открытого sheet.
 */
.sheet-overlay.open ~ .nav {
  pointer-events:
    none !important;
}