:root{
  --bg:#f5f6fa;
  --surface:#fff;
  --surface-elevated:#fff;
  --text:#1b2236;
  --text-muted:#70798e;
  --line:#e5e8f0;
  --primary:#6d5bd0;
  --primary-soft:#eeebff;
  --green:#2fa66a;
  --green-soft:#e9f7ef;
  --red:#df5261;
  --red-soft:#fff0f1;
  --amber:#dd982f;
  --amber-soft:#fff7e8;
  --blue:#4c7fd1;
  --violet:#8B7EC8;
  /* Task semantic colors: GREEN=low/completed, AMBER=medium/planned,
     RED=important/danger, BLUE=active/in progress/today, GRAY=neutral/not started */
  --task-green:#2fa66a;
  --task-green-border:rgba(47,166,106,.55);
  --task-green-bg:rgba(47,166,106,.09);
  --task-amber:#dd982f;
  --task-amber-border:rgba(221,152,47,.55);
  --task-amber-bg:rgba(221,152,47,.1);
  --task-red:#df5261;
  --task-red-border:rgba(223,82,97,.55);
  --task-red-bg:rgba(223,82,97,.09);
  --task-blue:#4c7fd1;
  --task-blue-border:rgba(76,127,209,.55);
  --task-blue-bg:rgba(76,127,209,.09);
  --task-neutral:#70798e;
  --task-neutral-border:rgba(112,121,142,.4);
  --task-neutral-bg:rgba(112,121,142,.07);
  --progress-blue:#5d99d1;
  --shadow:0 4px 12px rgba(31,37,59,.06);
  --shadow-sm:0 2px 6px rgba(31,37,59,.04);
  --shadow-lg:0 12px 30px rgba(31,37,59,.1);
  --radius:14px;
  /* Category accents (dark mode optimized) */
  --category-1:#47609B;
  --category-2:#B39167;
  --category-3:#4F5378;
  --category-4:#436A83;
  --category-5:#AA4751;
  --category-6:#6E6483
}

/* ===== USER THEME SELECTION (data-theme атрибут) ===== */
/* Light theme (явный выбор пользователем) */
[data-theme="light"]{
  --bg:#f5f6fa;
  --surface:#fff;
  --surface-elevated:#fff;
  --text:#1b2236;
  --text-muted:#70798e;
  --line:#e5e8f0;
  --primary:#6d5bd0;
  --primary-soft:#eeebff;
  --green:#2fa66a;
  --green-soft:#e9f7ef;
  --red:#df5261;
  --red-soft:#fff0f1;
  --amber:#dd982f;
  --amber-soft:#fff7e8;
  --blue:#4c7fd1;
  --violet:#8B7EC8;
  /* Task semantic colors (same as :root) */
  --task-green:#2fa66a;
  --task-green-border:rgba(47,166,106,.55);
  --task-green-bg:rgba(47,166,106,.09);
  --task-amber:#dd982f;
  --task-amber-border:rgba(221,152,47,.55);
  --task-amber-bg:rgba(221,152,47,.1);
  --task-red:#df5261;
  --task-red-border:rgba(223,82,97,.55);
  --task-red-bg:rgba(223,82,97,.09);
  --task-blue:#4c7fd1;
  --task-blue-border:rgba(76,127,209,.55);
  --task-blue-bg:rgba(76,127,209,.09);
  --task-neutral:#70798e;
  --task-neutral-border:rgba(112,121,142,.4);
  --task-neutral-bg:rgba(112,121,142,.07);
  --progress-blue:#5d99d1;
  --shadow:0 12px 35px rgba(31,37,59,.08);
  --shadow-sm:0 4px 12px rgba(31,37,59,.06);
  --radius:14px
}

/* Dark theme (явный выбор пользователем) - Reference palette */
[data-theme="dark"]{
  --bg:#0D121A;
  --sidebar-bg:#10171F;
  --surface:#11171F;
  --surface-elevated:#131A22;
  --surface-inner:#131921;
  --text:#F5F7FA;
  --text-muted:#97A1AF;
  --text-subtle:#6F7987;
  --line:#252D38;
  --separator:rgba(255,255,255,0.09);
  --primary:#6995E5;
  --primary-soft:#1C2736;
  --progress-blue:#4965AD;
  --green:#69B07A;
  --green-soft:#1A3D2E;
  --red:#D04C42;
  --red-soft:#3D1A2E;
  --amber:#EEB65C;
  --amber-soft:#3D2E1A;
  --blue:#6995E5;
  --violet:#A78BDB;
  /* Task semantic colors - muted, dark-optimized (priority + status systems) */
  --task-green:#6FCF8F;
  --task-green-border:rgba(111,207,143,.65);
  --task-green-bg:rgba(111,207,143,.08);
  --task-amber:#F0B84F;
  --task-amber-border:rgba(240,184,79,.65);
  --task-amber-bg:rgba(240,184,79,.09);
  --task-red:#F06464;
  --task-red-border:rgba(240,100,100,.7);
  --task-red-bg:rgba(240,100,100,.08);
  --task-blue:#56A3FF;
  --task-blue-border:rgba(86,163,255,.6);
  --task-blue-bg:rgba(86,163,255,.08);
  --task-neutral:#A7B0BF;
  --task-neutral-border:rgba(167,176,191,.45);
  --task-neutral-bg:rgba(167,176,191,.06);
  --shadow:0 4px 12px rgba(0,0,0,.25);
  --shadow-sm:0 2px 6px rgba(0,0,0,.18);
  --shadow-lg:0 12px 30px rgba(0,0,0,.35);
  --radius:11px;
  /* Category accents */
  --category-1:#47609B;
  --category-2:#B39167;
  --category-3:#4F5378;
  --category-4:#436A83;
  --category-5:#AA4751;
  --category-6:#6E6483;
  /* Pastel accents for stat card decorations */
  --green-pastel:#C5E0C8;
  --red-pastel:#E8C4C4;
  --blue-pastel:#D0E0F5;
  --amber-pastel:#F5DEB3;
  /* Progress bar track - improved visibility */
  --progress-track-bg:rgba(255,255,255,0.09);
  --progress-track-border:rgba(255,255,255,0.13)
}

/* Auth screen для dark theme */
[data-theme="dark"] .auth-screen{
  background:#0D121A
}

/* ===== SYSTEM PREFERENCE FALLBACK ===== */
/* Используется только если пользователь не выбрал тему явно */
@media (prefers-color-scheme:dark){
  :root:not([data-theme]){
    /* Reference palette - same as explicit dark theme */
    --bg:#0D121A;
    --sidebar-bg:#10171F;
    --surface:#11171F;
    --surface-elevated:#131A22;
    --surface-inner:#131921;
    --text:#F5F7FA;
    --text-muted:#97A1AF;
    --text-subtle:#6F7987;
    --line:#252D38;
    --separator:rgba(255,255,255,0.09);
    --primary:#6995E5;
    --primary-soft:#1C2736;
    --progress-blue:#4965AD;
    --green:#69B07A;
    --green-soft:#1A3D2E;
    --red:#D04C42;
    --red-soft:#3D1A2E;
    --amber:#EEB65C;
    --amber-soft:#3D2E1A;
    --blue:#6995E5;
    --violet:#A78BDB;
    /* Task semantic colors - same as [data-theme="dark"] */
    --task-green:#6FCF8F;
    --task-green-border:rgba(111,207,143,.65);
    --task-green-bg:rgba(111,207,143,.08);
    --task-amber:#F0B84F;
    --task-amber-border:rgba(240,184,79,.65);
    --task-amber-bg:rgba(240,184,79,.09);
    --task-red:#F06464;
    --task-red-border:rgba(240,100,100,.7);
    --task-red-bg:rgba(240,100,100,.08);
    --task-blue:#56A3FF;
    --task-blue-border:rgba(86,163,255,.6);
    --task-blue-bg:rgba(86,163,255,.08);
    --task-neutral:#A7B0BF;
    --task-neutral-border:rgba(167,176,191,.45);
    --task-neutral-bg:rgba(167,176,191,.06);
    --shadow:0 4px 12px rgba(0,0,0,.25);
    --shadow-sm:0 2px 6px rgba(0,0,0,.18);
    --shadow-lg:0 12px 30px rgba(0,0,0,.35);
    --radius:11px;
    /* Category accents */
    --category-1:#47609B;
    --category-2:#B39167;
    --category-3:#4F5378;
    --category-4:#436A83;
    --category-5:#AA4751;
    --category-6:#6E6483;
    /* Pastel accents for stat card decorations */
    --green-pastel:#C5E0C8;
    --red-pastel:#E8C4C4;
    --blue-pastel:#D0E0F5;
    --amber-pastel:#F5DEB3;
    /* Progress bar track - improved visibility */
    --progress-track-bg:rgba(255,255,255,0.09);
    --progress-track-border:rgba(255,255,255,0.13)
  }

  /* Auth screen - глубокий темный */
  .auth-screen{
    background:#0D121A
  }

  .auth-card{
    border-color:var(--line);
    background:var(--surface);
    box-shadow:var(--shadow-lg)
  }

  .auth-card::before{
    background:linear-gradient(145deg,#58A6FF,#4C8ED8)
  }

  /* Forms & Inputs - elevated поверхность */
  .auth-form input,
  .stack-form input,
  .stack-form select,
  .stack-form textarea,
  .date-fields input,
  .toolbar input,
  .toolbar select{
    border-color:var(--line);
    background:var(--surface-elevated);
    color:var(--text)
  }

  .auth-form input::placeholder,
  .stack-form input::placeholder,
  .stack-form select::placeholder,
  .stack-form textarea::placeholder{
    color:var(--text-muted)
  }

  .auth-form input:focus,
  .stack-form input:focus,
  .stack-form select:focus,
  .stack-form textarea:focus,
  .date-fields input:focus,
  .toolbar input:focus,
  .toolbar select:focus{
    border-color:var(--primary);
    box-shadow:0 0 0 3px rgba(88,166,255,.15);
    background:var(--surface)
  }

  /* Buttons - адаптация */
  .btn-light{
    background:var(--surface-elevated);
    color:var(--text);
    border:1px solid var(--line)
  }

  .btn-light:hover{
    background:#30363D
  }

  /* Modal - elevated */
  .modal{
    background:var(--surface);
    box-shadow:var(--shadow-lg);
    border:1px solid var(--line)
  }

  .modal h2,
  .modal h3{
    color:var(--text)
  }

  /* Sidebar - основная поверхность */
  .sidebar{
    background:var(--surface);
    border-right-color:var(--line)
  }

  .brand h1{
    color:var(--text)
  }

  /* Navigation - subtitle text colors */
  .nav-item{
    color:var(--text-muted)
  }

  .nav-item>span{
    background:var(--surface-elevated);
    color:var(--text-muted)
  }

  .nav-item:hover{
    background:rgba(88,166,255,.08);
    color:var(--text)
  }

  .nav-item.active{
    background:var(--primary-soft);
    color:var(--primary)
  }

  .nav-item.active>span{
    background:var(--primary);
    color:#fff
  }

  .profile-button:hover{
    background:var(--surface-elevated)
  }

  /* Cards & Data panels */
  .data-card,
  .menu-dropdown,
  .dropdown-menu{
    background:var(--surface);
    border-color:var(--line)
  }

  .data-card-head h3,
  .data-card-value{
    color:var(--text)
  }

  .menu-dropdown{
    box-shadow:var(--shadow-lg)
  }

  /* Segmented controls */
  .segmented{
    background:var(--surface-elevated);
    border-color:var(--line)
  }

  .segmented input:checked+span{
    background:var(--surface);
    color:var(--primary);
    box-shadow:0 2px 8px rgba(0,0,0,.3)
  }

  /* Toast - темный с хорошим контрастом */
  .toast{
    background:var(--surface-elevated);
    color:var(--text);
    border:1px solid var(--line);
    box-shadow:var(--shadow)
  }

  /* Typography & text colors */
  h1,h2,h3,h4,h5,h6{
    color:var(--text)
  }

  .auth-note,
  .hint,
  .secondary-text{
    color:var(--text-muted)
  }

  /* Tables & lists */
  .transaction-item,
  .recurring-item,
  .goal-item{
    border-color:var(--line)
  }

  .transaction-item:hover,
  .recurring-item:hover{
    background:var(--surface-elevated)
  }

  /* Status colors - проверены на контраст */
  .status-positive,.color-green{color:var(--green)}
  .status-negative,.color-red{color:var(--red)}
  .status-warning,.color-amber{color:var(--amber)}

  /* Toolbar */
  .toolbar{
    background:var(--surface);
    border-color:var(--line)
  }

  .toolbar .search input{
    background:var(--surface-elevated);
    border-color:var(--line);
    color:var(--text)
  }

  /* Calendar & date pickers */
  .calendar-day,
  .date-cell{
    color:var(--text-muted)
  }

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

  /* Budgets & goals */
  .budget-bar-bg{
    background:var(--surface-elevated)
  }

  .budget-bar-fill{
    background:var(--green)
  }

  .budget-bar-fill.warning{
    background:var(--amber)
  }

  .budget-bar-fill.danger{
    background:var(--red)
  }

  /* Scrollbar - тонкий темный */
  ::-webkit-scrollbar{
    width:8px;
    height:8px
  }

  ::-webkit-scrollbar-track{
    background:var(--bg)
  }

  ::-webkit-scrollbar-thumb{
    background:var(--line);
    border-radius:4px
  }

  ::-webkit-scrollbar-thumb:hover{
    background:var(--text-muted)
  }

  /* Focus states for accessibility */
  :focus-visible{
    outline:2px solid var(--primary);
    outline-offset:2px
  }

  /* Additional text elements */
  .auth-note,
  .hint,
  .muted-copy,
  .secondary-text{
    color:var(--text-muted)
  }

  /* Section headers and labels */
  .section-title,
  .field-label,
  .label{
    color:var(--text-muted)
  }

  /* Links */
  a,
  .link{
    color:var(--primary)
  }

  a:hover,
  .link:hover{
    color:#79b8ff
  }

  /* Empty states */
  .empty-state{
    color:var(--text-muted)
  }

  /* Progress bars - improved track visibility */
  .progress-bar{
    background:var(--progress-track-bg);
    border:1px solid var(--progress-track-border);
    border-radius:4px
  }

  .progress-fill{
    background:var(--green)
  }

  /* Charts and visualizations */
  .chart-line{
    stroke:var(--primary)
  }

  .chart-grid{
    stroke:var(--line)
  }

  /* Badges and tags */
  .badge,
  .tag{
    background:var(--surface-elevated);
    color:var(--text-muted);
    border:1px solid var(--line)
  }

  .badge.success,
  .tag.green{
    background:var(--green-soft);
    color:var(--green);
    border-color:var(--green)
  }

  .badge.error,
  .tag.red{
    background:var(--red-soft);
    color:var(--red);
    border-color:var(--red)
  }

  /* Action buttons */
  .btn-icon{
    color:var(--text-muted);
    background:transparent
  }

  .btn-icon:hover{
    background:var(--surface-elevated);
    color:var(--text)
  }

  /* Switches and toggles */
  .switch-track{
    background:var(--surface-elevated);
    border-color:var(--line)
  }

  .switch-track.checked{
    background:var(--primary)
  }

  /* Date cells in calendar */
  .date-cell{
    color:var(--text-muted);
    border-color:var(--line)
  }

  .date-cell.today{
    border-color:var(--primary);
    color:var(--primary)
  }

  .date-cell.selected{
    background:var(--primary);
    color:#fff
  }

  /* Payment status */
  .payment-paid{
    color:var(--green)
  }

  .payment-pending{
    color:var(--amber)
  }

  .payment-overdue{
    color:var(--red)
  }

  /* Filter pills */
  .filter-pill{
    background:var(--surface-elevated);
    color:var(--text-muted);
    border:1px solid var(--line)
  }

  .filter-pill.active{
    background:var(--primary-soft);
    color:var(--primary);
    border-color:var(--primary)
  }

  /* Auth tabs */
  .auth-tab{
    color:var(--text-muted)
  }

  .auth-tab.active{
    background:var(--surface);
    color:var(--primary);
    box-shadow:0 3px 10px rgba(0,0,0,.3)
  }

  /* Sidebar footer */
  .sidebar-footer{
    border-top-color:var(--line)
  }

  /* Date fields toolbar */
  .date-fields .toolbar{
    background:var(--surface);
    border-color:var(--line)
  }

  /* Payment check elements */
  .payment-check{
    border-color:var(--line)
  }

  /* Stack form grid */
  .stack-form.grid{
    gap:16px
  }

  /* Form rows */
  .form-row{
    gap:12px
  }

  /* Field labels */
  .field-label,
  .form-label{
    color:var(--text-muted)
  }

  /* Input groups */
  .input-group{
    border-color:var(--line)
  }

  /* Search input in toolbar */
  .search input{
    background:var(--surface-elevated);
    color:var(--text)
  }

  /* Quick periods */
  .quick-periods button{
    color:var(--text-muted);
    background:transparent
  }

  .quick-periods button:hover{
    background:var(--surface-elevated);
    color:var(--text)
  }

  /* Period selector */
  .period-select{
    background:var(--surface-elevated);
    color:var(--text);
    border-color:var(--line)
  }

  /* Action buttons in header */
  .top-actions .btn{
    background:var(--surface-elevated);
    color:var(--text);
    border:1px solid var(--line)
  }

  .top-actions .btn:hover{
    background:#30363D
  }

  /* Delete confirm dialog */
  .delete-confirm{
    background:var(--surface);
    border-color:var(--line)
  }

  .delete-confirm h3{
    color:var(--text)
  }

  /* Budget cards */
  .budget-card{
    background:var(--surface);
    border-color:var(--line)
  }

  /* Goal items */
  .goal-item{
    border-color:var(--line)
  }

  .goal-item:hover{
    background:var(--surface-elevated)
  }

  /* Debt items */
  .debt-item{
    background:var(--surface);
    border-color:var(--line)
  }

  /* Recurring payment items */
  .recurring-item{
    border-color:var(--line)
  }

  /* Transaction items */
  .transaction-item{
    border-color:var(--line)
  }

  /* Amount displays */
  .amount{
    color:var(--text)
  }

  .amount.positive{
    color:var(--green)
  }

  .amount.negative{
    color:var(--red)
  }

  /* Settings panels */
  .settings-panel{
    background:var(--surface);
    border-color:var(--line)
  }

  /* Export button */
  .export-btn{
    background:var(--surface-elevated);
    color:var(--text);
    border:1px solid var(--line)
  }

  /* Loading spinner */
  .spinner{
    border-color:var(--line);
    border-top-color:var(--primary)
  }

  /* Error messages */
  .error-message{
    color:var(--red);
    background:var(--red-soft);
    border:1px solid var(--red)
  }

  /* Success messages */
  .success-message{
    color:var(--green);
    background:var(--green-soft);
    border:1px solid var(--green)
  }

  /* Info messages */
  .info-message{
    color:var(--primary);
    background:var(--primary-soft);
    border:1px solid var(--primary)
  }

  /* Warning messages */
  .warning-message{
    color:var(--amber);
    background:var(--amber-soft);
    border:1px solid var(--amber)
  }

  /* Checkbox styling */
  input[type="checkbox"]{
    border-color:var(--line);
    background:var(--surface-elevated)
  }

  input[type="checkbox"]:checked{
    background:var(--primary);
    border-color:var(--primary)
  }

  /* Radio buttons */
  input[type="radio"]{
    border-color:var(--line);
    background:var(--surface-elevated)
  }

  input[type="radio"]:checked{
    border-color:var(--primary);
    background:var(--primary)
  }

  /* Select dropdowns */
  select{
    background:var(--surface-elevated);
    color:var(--text);
    border-color:var(--line)
  }

  select option{
    background:var(--surface);
    color:var(--text)
  }

  /* Range sliders */
  input[type="range"]{
    background:var(--surface-elevated)
  }

  input[type="range"]::-webkit-slider-track{
    background:var(--surface-elevated)
  }

  input[type="range"]::-webkit-slider-thumb{
    background:var(--primary);
    border:2px solid var(--surface-elevated)
  }

  /* Code blocks */
  code,
  pre{
    background:var(--surface-elevated);
    color:var(--text)
  }

  /* Horizontal rules */
  hr{
    border-color:var(--line)
  }

  /* Global messages */
  .global-message{
    background:var(--amber-soft);
    border-color:var(--amber);
    color:var(--amber)
  }

  /* View states */
  .view.active{
    display:block
  }

  /* Stats grid */
  .stats-grid{
    gap:14px
  }

  /* Stat card */
  .stat-card{
    background:var(--surface);
    border:1px solid var(--line)
  }

  .stat-card::after{
    opacity:1
  }

  .stat-card p{
    color:var(--text-muted)
  }

  .stat-card strong{
    color:var(--text)
  }

  .stat-card small{
    color:var(--text-muted)
  }

  /* Amount in stat cards */
  .stat-amount{
    color:var(--text)
  }

  .stat-amount.positive{
    color:var(--green)
  }

  .stat-amount.negative{
    color:var(--red)
  }

  /* Subtitle text */
  .subtitle{
    color:var(--text-muted)
  }

  /* Helper text */
  .helper-text{
    color:var(--text-muted)
  }

  /* Link states */
  a{
    color:var(--primary)
  }

  a:hover{
    color:#79b8ff
  }

  a:visited{
    color:#a5d6ff
  }

  /* Focus visible override */
  :focus-visible{
    outline:2px solid var(--primary);
    outline-offset:2px
  }

  /* Disabled states */
  button:disabled,
  input:disabled,
  select:disabled,
  textarea:disabled{
    opacity:.5;
    cursor:not-allowed
  }

  /* Placeholder text */
  ::placeholder{
    color:var(--text-muted)
  }

  /* Selection colors */
  ::selection{
    background:var(--primary);
    color:#fff
  }

  /* Calendar specific */
  .calendar-day.today{
    background:var(--primary-soft);
    color:var(--primary)
  }

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

  /* Chart colors */
  .chart-color-1{background:var(--primary)}
  .chart-color-2{background:var(--green)}
  .chart-color-3{background:var(--red)}
  .chart-color-4{background:var(--amber)}
  .chart-color-5{background:var(--blue)}

  /* Navigation icon colors */
  .nav-purple{background:var(--primary-soft);color:var(--primary)}
  .nav-green{background:var(--green-soft);color:var(--green)}
  .nav-amber{background:var(--amber-soft);color:var(--amber)}
  .nav-rose{background:var(--red-soft);color:var(--red)}
  .nav-violet{background:#2d1b4e;color:#b392f0}

  /* Nav item icon spans specific colors */
  .nav-item>span.nav-amber{
    background:var(--amber-soft);
    color:var(--amber)
  }

  .nav-item>span.nav-rose{
    background:var(--red-soft);
    color:var(--red)
  }

  /* Overlay backgrounds */
  .sidebar-overlay,
  .modal-backdrop{
    background:rgba(0,0,0,.6)
  }

  /* Mobile responsive */
  @media (max-width:768px){
    .auth-card{
      background:var(--surface);
      border-color:var(--line)
    }

    .sidebar{
      background:var(--surface)
    }
  }

  /* Typography colors */
  .eyebrow{
    color:var(--text-muted)
  }

  .section-intro p{
    color:var(--text-muted)
  }

  /* Sync state */
  .sync-state{
    color:var(--text-muted)
  }

  .sync-state i{
    background:var(--green)
  }

  .sync-state i.busy{
    background:var(--amber);
    animation:pulse 1s infinite
  }

  /* Icon buttons */
  .icon-button{
    color:var(--text-muted)
  }

  .icon-button:hover{
    color:var(--text)
  }

  /* Period controls */
  .period-button:hover,
  .period-button.active{
    background:var(--primary-soft)
  }

  .period-button strong,
  .period-button span{
    color:var(--text)
  }

  /* Panels */
  .panel{
    background:var(--surface);
    border-color:var(--line);
    box-shadow:var(--shadow-sm)
  }

  .panel-head h2{
    color:var(--text)
  }

  /* Specific panels */
  .panel.category-panel,
  .panel.chart-panel,
  .panel.danger-panel{
    background:var(--surface);
    border-color:var(--line)
  }

  /* Stat icons */
  .stat-icon{
    background:var(--surface-elevated);
    color:var(--text-muted);
    border:1px solid var(--line)
  }

  .stat-card.income .stat-icon{
    background:var(--green-soft);
    color:var(--green);
    border-color:var(--green)
  }

  .stat-card.expense .stat-icon{
    background:var(--red-soft);
    color:var(--red);
    border-color:var(--red)
  }

  .stat-card.balance .stat-icon{
    background:rgba(88,166,255,.15);
    color:var(--blue);
    border-color:var(--blue)
  }

  .stat-card.upcoming .stat-icon{
    background:var(--amber-soft);
    color:var(--amber);
    border-color:var(--amber)
  }

  /* Settings grid */
  .settings-grid{
    gap:20px
  }

  /* Tables */
  table{
    color:var(--text)
  }

  table th{
    color:var(--text-muted);
    border-bottom-color:var(--line)
  }

  table td{
    border-bottom-color:var(--line)
  }

  table tr:hover td{
    background:var(--surface-elevated)
  }

  /* Payment summary */
  .payment-summary{
    gap:12px
  }

  /* Payments table */
  .payments-table{
    background:var(--surface);
    border:1px solid var(--line)
  }

  /* Profile section */
  .profile-copy{
    color:var(--text-muted)
  }

  /* Daily tip */
  .daily-tip{
    background:var(--surface);
    border:1px solid var(--line)
  }

  .daily-tip-head{
    color:var(--text-muted)
  }

  .daily-tip-head span{
    color:var(--primary)
  }

  .daily-tip p{
    color:var(--text)
  }

  /* Login hint */
  .login-hint{
    color:var(--text-muted);
    background:var(--surface-elevated);
    border:1px solid var(--line)
  }

  .login-hint code{
    background:var(--surface);
    color:var(--primary)
  }

  /* Empty states */
  .empty-state{
    color:var(--text-muted)
  }

  .empty-state.panel{
    background:var(--surface);
    border-color:var(--line)
  }

  /* Compact list */
  .compact-list{
    border-color:var(--line)
  }

  .compact-list .item{
    border-bottom-color:var(--line)
  }

  .compact-list .item:hover{
    background:var(--surface-elevated)
  }

  /* Category list */
  .category-list{
    gap:12px
  }

  /* Month history grid */
  .month-history-grid{
    gap:16px
  }

  .month-card{
    background:var(--surface);
    border:1px solid var(--line)
  }

  .month-card:hover{
    background:var(--surface-elevated)
  }

  /* Overview sections */
  .overview-grid{
    gap:20px
  }

  /* Cards grid */
  .cards-grid{
    gap:20px
  }

  /* Charts */
  .bar-chart,
  .category-chart,
  .donut{
    filter:brightness(.9)
  }

  /* Legend */
  .legend{
    color:var(--text-muted)
  }

  .legend-item{
    color:var(--text-muted)
  }

  /* Two columns layout */
  .two-columns{
    gap:20px
  }

  /* Color classes */
  .green{
    color:var(--green)
  }

  .red{
    color:var(--red)
  }

  .blue{
    color:var(--blue)
  }

  .amber{
    color:var(--amber)
  }

  .purple{
    color:var(--primary)
  }

  /* Positive/negative classes */
  .positive{
    color:var(--green)
  }

  .negative{
    color:var(--red)
  }

  /* Right aligned */
  .right{
    text-align:right
  }

  /* Animation for pulse */
  @keyframes pulse{
    0%,100%{opacity:1}
    50%{opacity:.5}
  }

  /* Additional nav color variants */
  .nav-item>span.nav-blue{
    background:rgba(88,166,255,.15);
    color:var(--blue)
  }

  .nav-item>span.nav-teal{
    background:rgba(63,185,80,.15);
    color:#299487
  }

  .nav-item>span.nav-slate{
    background:var(--surface-elevated);
    color:var(--text-muted)
  }

  .nav-item>span.nav-gray{
    background:var(--surface-elevated);
    color:var(--text-muted)
  }

  /* Modal close button */
  .modal-close{
    color:var(--text-muted)
  }

  .modal-close:hover{
    color:var(--text);
    background:var(--surface-elevated)
  }

  /* Confirm dialog */
  .confirm-card{
    background:var(--surface);
    border:1px solid var(--line);
    box-shadow:var(--shadow-lg)
  }

  .confirm-card h2{
    color:var(--text)
  }

  .confirm-card p{
    color:var(--text-muted)
  }

  /* Mobile menu */
  .mobile-menu{
    background:var(--surface);
    border:1px solid var(--line)
  }

  .mobile-menu .nav-item{
    color:var(--text)
  }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:Inter,"Segoe UI",Arial,sans-serif;
  font-size:14px
}

button,input,select,textarea{font:inherit}
button{cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.6}
[hidden]{display:none!important}

.auth-screen{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:32px;
  background:
    radial-gradient(circle at 15% 20%,rgba(88,166,255,.08) 0,transparent 40%),
    radial-gradient(circle at 85% 80%,rgba(63,185,80,.06) 0,transparent 40%),
    #0D1117
}

.auth-card{
  width:min(940px,100%);
  min-height:570px;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  position:relative;
  overflow:hidden;
  border:1px solid #e4e4ed;
  border-radius:24px;
  background:#fff;
  box-shadow:0 12px 35px rgba(38,34,70,.1)
}

.auth-card::before{
  content:"";
  position:absolute;
  inset:0 45% 0 0;
  background:linear-gradient(145deg,#7563d5,#5845b6)
}

.auth-brand{
  position:absolute;
  z-index:2;
  top:32px;
  left:38px;
  display:flex;
  align-items:center;
  gap:11px;
  color:#fff;
  font-size:17px;
  font-weight:800;
  letter-spacing:.5px
}

.logo{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:linear-gradient(145deg,#806fe1,#5c49bd);
  color:#fff;
  font-size:21px;
  box-shadow:0 8px 18px rgba(85,66,177,.25)
}

.auth-brand .logo{
  background:rgba(255,255,255,.16);
  box-shadow:none
}

.auth-copy{
  position:relative;
  z-index:1;
  align-self:center;
  padding:90px 58px 60px 38px;
  color:#fff
}

.auth-kicker{
  font-size:11px;
  font-weight:750;
  letter-spacing:1.5px;
  opacity:.72
}

.auth-copy h1{
  max-width:430px;
  margin:17px 0;
  font-size:39px;
  line-height:1.12
}

.auth-copy p{
  max-width:400px;
  margin:0;
  color:rgba(255,255,255,.78);
  font-size:15px;
  line-height:1.65
}

.auth-form{
  max-width:400px;
  width:100%;
  margin:0 auto;
  padding:40px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:var(--surface);
  border-radius:14px;
  border:1px solid var(--line);
  box-shadow:var(--shadow-lg)
}

.auth-tabs{
  display:grid;
  grid-template-columns:1fr 1fr;
  padding:4px;
  margin-bottom:25px;
  border-radius:10px;
  background:#f1f2f6
}

.auth-tab{
  height:39px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:var(--muted);
  font-weight:700
}

.auth-tab.active{
  background:#fff;
  color:var(--primary);
  box-shadow:0 3px 10px rgba(30,35,55,.08)
}

.auth-form label,
.stack-form label,
.date-fields label{
  display:grid;
  gap:7px;
  margin-bottom:15px;
  color:#4f586c;
  font-size:12px;
  font-weight:700
}

.auth-form input,
.stack-form input,
.stack-form select,
.stack-form textarea,
.date-fields input,
.toolbar input,
.toolbar select{
  width:100%;
  border:1px solid #dfe3ec;
  border-radius:9px;
  background:#fff;
  color:var(--text);
  outline:0
}

.auth-form input,
.stack-form input,
.stack-form select,
.date-fields input,
.toolbar select{
  height:44px;
  padding:0 12px
}

.stack-form textarea{
  padding:10px 12px;
  resize:vertical
}

.auth-form input:focus,
.stack-form input:focus,
.stack-form select:focus,
.stack-form textarea:focus,
.date-fields input:focus,
.toolbar input:focus,
.toolbar select:focus{
  border-color:#8d7ce0;
  box-shadow:0 0 0 3px #f0edff
}

.auth-note{
  margin:19px 0 0;
  color:#858ca0;
  font-size:11px;
  line-height:1.5;
  text-align:center
}

.form-error{
  min-height:16px;
  margin:0 0 8px;
  color:var(--red);
  font-size:11px
}

.btn{
  min-height:40px;
  border:0;
  border-radius:9px;
  padding:0 16px;
  font-weight:750;
  transition:transform .15s,box-shadow .15s,filter .15s
}

/* Деликатный hover для всех кнопок: лёгкое высветление фона без glow */
.btn:hover:not(:disabled){
  transform:translateY(-0.5px);
  filter:brightness(1.07)
}

/* Primary action (＋ Добавить, Сохранить) - project blue, лёгкий gradient, без сильного glow */
.btn-primary{
  background:linear-gradient(90deg,color-mix(in srgb,var(--blue) 82%,#fff),var(--blue));
  color:#fff;
  box-shadow:0 4px 12px rgba(64,118,196,.18)
}

.btn-success{background:#36aa70;color:#fff}
.btn-danger{background:#e96565;color:#fff}
/* Secondary (Отмена, Все планы) - neutral dark surface, standard border, light text */
.btn-light{background:var(--surface-elevated);color:var(--text);border:1px solid var(--line)}
.full{width:100%}

.link-btn{
  border:0;
  background:transparent;
  color:var(--primary);
  padding:3px;
  border-radius:6px;
  font-size:12px;
  font-weight:700;
  transition:background-color .15s ease,color .15s ease,transform .15s ease
}

/* Единый hover текстовых ссылок «Все цели →» и т.п.:
   мягкая primary-подложка + лёгкий сдвиг */
.link-btn:hover{
  background:var(--primary-soft);
  transform:translateX(2px)
}

.link-btn:active{
  transform:translateX(1px)
}

/* Единое состояние клавиатурного фокуса для интерактивных элементов.
   Раньше outline существовал только внутри prefers-color-scheme:dark -
   в светлой теме фокус на кнопках/ссылках/чекбоксах был невидим.
   Текстовые поля/selects не дублируются - у них есть свой
   border+box-shadow:focus */
button:focus-visible,
a:focus-visible,
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible{
  outline:2px solid var(--primary);
  outline-offset:2px
}

.app{min-height:100vh}

.sidebar{
  position:fixed;
  inset:0 auto 0 0;
  width:226px;
  z-index:30;
  display:flex;
  flex-direction:column;
  padding:25px 16px 18px;
  background:var(--sidebar-bg,#10171F);
  border-right:1px solid var(--line)
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 12px 24px
}

.brand-text{
  display:flex;
  flex-direction:column;
  line-height:1.2
}

.brand-line-1,
.brand-line-2{
  font-size:13px;
  font-weight:800;
  letter-spacing:0.5px;
  color:#E6EBF2
}

.brand .logo{
  background:linear-gradient(145deg,rgba(105,149,229,0.2),rgba(105,149,229,0.1));
  color:#6995E5;
  box-shadow:0 4px 12px rgba(105,149,229,0.15)
}

.brand span{
  color:#E6EBF2
}

.nav{
  display:grid;
  gap:4px
}

.nav-item{
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  min-height:40px;
  border:0;
  border-radius:9px;
  padding:0 13px;
  background:transparent;
  color:#9AA5B3;
  text-align:left;
  font-weight:500;
  transition:all .15s ease
}

.nav-item>span{
  width:25px;
  height:25px;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:rgba(255,255,255,0.05);
  color:#9AA5B3;
  font-size:15px
}

.nav-item:hover{background:rgba(255,255,255,0.05);color:#E6EBF2}

.nav-item:hover>span{
  background:rgba(255,255,255,0.08);
  color:#E6EBF2
}

.nav-item.active{
  background:#1C2736;
  color:#6995E5;
  border-radius:8px;
  box-shadow:none
}

.nav-item.active>span{
  background:rgba(105,149,229,0.15);
  color:#6995E5
}

.nav-count{
  margin-left:auto;
  min-width:19px;
  height:19px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:#E96565;
  color:#fff;
  font-size:10px;
  box-shadow:0 2px 6px rgba(233,101,101,0.4)
}

.sidebar-footer{
  margin-top:auto;
  border-top:1px solid rgba(255,255,255,0.08);
  padding-top:14px
}

.sync-state{
  display:flex;
  align-items:center;
  gap:7px;
  padding:4px 10px 12px;
  color:#9AA5B3;
  font-size:10px
}

.sync-state i{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#36AA70;
  box-shadow:0 0 8px rgba(54,170,112,0.5)
}

.sync-state i.busy{
  background:#E8A83D;
  animation:pulse 1s infinite
}

.sync-state i.error{background:#E96565}

@keyframes pulse{
  50%{opacity:.5}
}

.profile-button{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  border:0;
  border-radius:9px;
  padding:9px;
  background:transparent;
  text-align:left;
  transition:all .15s ease
}

.profile-button:hover{background:rgba(255,255,255,0.05)}

.avatar{
  flex:0 0 34px;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:linear-gradient(135deg,#5B8CFF,#4A7BE8);
  color:#FFF;
  font-weight:800;
  box-shadow:0 2px 8px rgba(91,140,255,0.3)
}

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

.profile-copy strong{
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:11px;
  color:#E6EBF2
}

.profile-copy small{
  color:#9AA5B3;
  font-size:9px
}

.main{
  margin-left:226px;
  padding:25px 28px 40px
}

.topbar{
  position:relative;
  min-height:52px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:16px;
  margin-bottom:18px;
  padding:0 4px
}

.topbar h1{
  margin:3px 0 0;
  font-size:22px;
  color:#E6EBF2;
  font-weight:600
}

.eyebrow{
  margin:0 0 2px;
  color:#9AA5B3;
  font-size:8px;
  font-weight:800;
  letter-spacing:1.3px;
  text-transform:uppercase
}

.period-control{
  position:relative;
  display:flex;
  align-items:center;
  gap:4px
}

.icon-button{
  width:38px;
  height:42px;
  border:0;
  border-radius:9px;
  background:transparent;
  color:#9AA5B3;
  font-size:24px;
  display:grid;
  place-items:center;
  transition:all .15s ease
}

.icon-button:hover{background:rgba(255,255,255,0.08);color:#E6EBF2}

.period-button{
  min-width:180px;
  border:0;
  border-radius:8px;
  padding:6px 12px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.06);
  transition:all .15s ease
}

.period-button:hover,
.period-button.active{
  background:rgba(91,140,255,0.1);
  border-color:rgba(91,140,255,0.2)
}

.period-button strong,
.period-button span{
  display:block
}

.period-button strong{
  font-size:13px;
  color:#E6EBF2
}

.period-button span{
  margin-top:2px;
  color:#9AA5B3;
  font-size:9px
}

.top-actions{
  justify-self:end;
  display:flex;
  gap:8px;
  align-items:center
}

.top-actions .btn{
  min-height:42px;
  border-radius:9px;
  padding:0 16px;
  font-size:13px;
  font-weight:600;
  transition:all .15s ease;
  display:flex;
  align-items:center;
  gap:6px
}

.top-actions .btn-success{
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.08);
  color:var(--green);
  box-shadow:none
}

.top-actions .btn-success:hover{
  background:rgba(255,255,255,0.08);
  transform:none
}

.top-actions .btn-danger{
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.08);
  color:var(--red);
  box-shadow:none
}

.top-actions .btn-danger:hover{
  background:rgba(255,255,255,0.08);
  transform:none
}

.theme-toggle-btn{
  min-width:42px;
  height:42px;
  border-radius:9px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.08);
  color:var(--text-muted);
  display:grid;
  place-items:center;
  padding:0;
  font-size:18px;
  transition:all .15s ease
}

.theme-toggle-btn:hover{
  background:rgba(255,255,255,0.08);
  border-color:rgba(255,255,255,0.12);
  color:var(--text)
}

.period-popover{
  position:absolute;
  z-index:90;
  top:53px;
  left:50%;
  transform:translateX(-50%);
  width:400px;
  padding:18px;
  border:1px solid rgba(255,255,255,0.1);
  border-radius:13px;
  background:#1A212B;
  box-shadow:0 20px 50px rgba(0,0,0,0.4)
}

/* Period sections */
.period-section{
  margin:13px 0
}

.period-section-title{
  color:var(--text-muted);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:0.5px;
  display:block;
  margin-bottom:8px
}

/* Calendar period buttons - row layout */
.period-rows{
  display:flex;
  gap:6px
}

.period-rows .period-btn,
.quick-periods .period-btn{
  flex:1;
  border:1px solid rgba(255,255,255,0.1);
  border-radius:8px;
  padding:9px 12px;
  background:rgba(255,255,255,0.03);
  color:#9AA5B3;
  font-size:12px;
  transition:all .15s ease
}

.period-rows .period-btn:hover,
.quick-periods .period-btn:hover{
  border-color:rgba(91,140,255,0.4);
  background:rgba(91,140,255,0.1);
  color:#5B8CFF
}

.period-rows .period-btn.active,
.quick-periods .period-btn.active{
  border-color:var(--primary);
  background:var(--primary-soft);
  color:var(--primary)
}

/* Salary period cards */
.salary-periods{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px
}

.salary-card{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  border:1px solid rgba(255,255,255,0.1);
  border-radius:10px;
  padding:12px;
  background:rgba(255,255,255,0.03);
  color:#9AA5B3;
  font-size:11px;
  transition:all .15s ease;
  cursor:pointer;
  text-align:left
}

.salary-card:hover{
  border-color:rgba(91,140,255,0.4);
  background:rgba(91,140,255,0.08);
  color:#5B8CFF
}

.salary-card.active{
  border-color:var(--primary);
  background:var(--primary-soft);
  color:var(--primary)
}

.salary-title{
  font-weight:500;
  margin-bottom:4px
}

.salary-range{
  color:var(--text-muted);
  font-size:10px;
  white-space:nowrap
}

.salary-note{
  margin-top:6px;
  color:#D4A86A;
  font-size:9px;
  font-style:italic
}

/* Legacy quick-periods for backwards compatibility */
.quick-periods{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:13px 0
}

.quick-periods button{
  border:1px solid rgba(255,255,255,0.1);
  border-radius:8px;
  padding:7px 9px;
  background:rgba(255,255,255,0.03);
  color:#9AA5B3;
  font-size:10px;
  transition:all .15s ease
}

.quick-periods button:hover{
  border-color:rgba(91,140,255,0.4);
  background:rgba(91,140,255,0.1);
  color:#5B8CFF
}

.quick-periods button.active{
  border-color:var(--primary);
  background:var(--primary-soft);
  color:var(--primary)
}

.period-divider{
  display:flex;
  align-items:center;
  justify-content:center;
  margin:16px 0;
  color:var(--text-muted);
  font-size:11px
}

.date-fields.disabled{
  opacity:0.4;
  pointer-events:none
}

.period-popover strong{
  color:#E6EBF2;
  font-size:14px
}

.date-fields,
.two-columns{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px
}

.date-fields label{
  margin:0;
  color:#9AA5B3;
  font-size:11px
}

.date-fields input{
  background:rgba(255,255,255,0.05);
  border-color:rgba(255,255,255,0.1);
  color:#E6EBF2
}

.date-fields input:focus{
  background:rgba(255,255,255,0.08);
  border-color:#5B8CFF;
  color:#E6EBF2
}

/* Hover secondary-кнопок: чуть светлее background/border (правило идёт после
   .form-actions/.btn-light базовых правил, чтобы победить по каскаду) */
.btn-light:hover,
.form-actions .btn-light:hover{
  background:color-mix(in srgb,var(--line) 55%,var(--surface-elevated));
  border-color:color-mix(in srgb,var(--text-muted) 30%,var(--line))
}

.global-message{
  margin:-10px 0 18px;
  padding:12px 15px;
  border:1px solid #f1d8a7;
  border-radius:9px;
  background:#fff9e9;
  color:#76561d
}

.view{display:none}
.view.active{display:block}

.stats-grid{
  display:grid;
  /* 5 KPI-карточек («Отложено» — пятая): 5 колонок только на широком desktop
     (breakpoint 1400px из 06-budgets-debts-goals.css), иначе карточки слишком узкие */
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin-bottom:14px
}

@media (min-width:1400px){
  .stats-grid{
    grid-template-columns:repeat(5,minmax(0,1fr))
  }
}

@media (max-width:1024px){
  .stats-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}

@media (max-width:600px){
  .stats-grid{
    grid-template-columns:1fr
  }
}

/* ===== STAT CARD KPI - IMPROVED VISUAL ===== */
.stat-card{
  position:relative;
  min-height:105px;
  height:105px;
  overflow:hidden;
  padding:16px 17px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--surface);
  transition:border-color 0.2s ease,box-shadow 0.2s ease,transform 0.2s ease
}

.stat-card:hover{
  border-color:rgba(255,255,255,0.2);
  box-shadow:0 8px 24px rgba(0,0,0,0.15);
  transform:translateY(-2px)
}

/* ===== CARD GLOW - Декоративное свечение в нижнем правом углу ===== */
.card-glow{
  position:absolute;
  right:-30px;
  bottom:-40px;
  width:180px;
  height:120px;
  border-radius:50%;
  pointer-events:none;
  z-index:0;
  opacity:0.25;
  filter:blur(50px);
  transition:opacity 0.2s ease
}

/* Второй слой для глубины */
.card-glow::after{
  content:"";
  position:absolute;
  inset:-20px;
  width:calc(100% + 40px);
  height:calc(100% + 40px);
  border-radius:50%;
  opacity:0.4;
  filter:blur(25px)
}

/* Цвета для каждой карточки */
.stat-card.income .card-glow{
  background:#22c55e
}
.stat-card.income .card-glow::after{
  background:#22c55e
}

.stat-card.expense .card-glow{
  background:#ef4444
}
.stat-card.expense .card-glow::after{
  background:#ef4444
}

.stat-card.balance .card-glow{
  background:#3b82f6
}
.stat-card.balance .card-glow::after{
  background:#3b82f6
}

.stat-card.upcoming .card-glow{
  background:#f59e0b
}
.stat-card.upcoming .card-glow::after{
  background:#f59e0b
}

/* Hover эффект - увеличиваем opacity */
.stat-card:hover .card-glow{
  opacity:0.35
}

/* ===== STAT CARD CONTENT ===== */
.stat-card.income .stat-icon{
  background:var(--green-soft);
  color:var(--green);
  border-color:var(--green)
}

.stat-card.expense .stat-icon{
  background:var(--red-soft);
  color:var(--red);
  border-color:var(--red)
}

.stat-card.balance .stat-icon{
  background:rgba(93,153,209,.2);
  color:var(--blue);
  border-color:var(--blue)
}

.stat-card.upcoming .stat-icon{
  background:var(--amber-soft);
  color:var(--amber);
  border-color:var(--amber)
}

/* .stat-label/.stat-amount/.stat-caption — span-аналоги p/strong/small
   внутри кликабельной кнопки-карточки «Отложено» (в button валидны
   только phrasing-элементы) */
.stat-card p,
.stat-card .stat-label{
  margin:0 0 8px;
  color:var(--text-muted);
  font-size:10px;
  font-weight:800;
  letter-spacing:.8px;
  text-transform:uppercase
}

.stat-card strong,
.stat-card .stat-amount{
  display:block;
  font-size:24px;
  color:var(--text);
  font-weight:600
}

.stat-card small,
.stat-card .stat-caption{
  display:block;
  margin-top:8px;
  color:var(--text-muted);
  font-size:10px
}

.stat-icon{
  position:absolute;
  right:16px;
  top:16px;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:9px;
  background:var(--surface-elevated);
  color:var(--text-muted);
  border:1px solid var(--line);
  font-size:16px;
  z-index:1
}

.stat-card.income .stat-icon{
  background:var(--green-soft);
  color:var(--green);
  border-color:var(--green)
}

.stat-card.expense .stat-icon{
  background:var(--red-soft);
  color:var(--red);
  border-color:var(--red)
}

.stat-card.balance .stat-icon{
  background:rgba(93,153,209,.15);
  color:var(--blue);
  border-color:var(--blue)
}

.stat-card.upcoming .stat-icon{
  background:var(--amber-soft);
  color:var(--amber);
  border-color:var(--amber)
}

.overview-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
  margin-bottom:14px;
  align-items:stretch
}

/* Ряды 3-4 Overview (Цели | Платежи и Кредиты | Планы):
   левая колонка ~46%, правая ~54%; align-items:stretch выравнивает
   панели ряда по высоте (без жёсткого pixel height) */
.overview-grid.lower{
  grid-template-columns:minmax(0, 46fr) minmax(0, 54fr);
  gap:14px;
  align-items:stretch
}

/* Natural height: панель растёт вместе с контентом,
   без фиксированной высоты и без внутреннего вертикального скролла.
   Растягивание по высоте ряда идёт через align-items:stretch */
.overview-grid.lower .panel{
  height:auto;
  max-height:none
}

/* Панель платежей занимает всю высоту ряда; строки таблицы
   остаются сверху, свободное место - ниже (без растяжения строк) */
.overview-grid.lower .overview-payments-panel{
  height:100%
}

.overview-grid.transactions{
  grid-template-columns:1fr;
  margin-top:14px
}

/* ===== «Планы и задачи» — последняя полноразмерная панель Overview ===== */
/* «Планы и задачи» - правая ячейка ряда 4 Overview, живёт в grid:
   отступ даёт gap ряда, собственный margin не нужен */
.overview-plans-panel{
  margin-top:0
}

/* Panel head actions для кнопок управления */
.panel-head-actions{
  display:flex;
  gap:8px;
  align-items:center
}

/* Компоновка блока «Планы и задачи» на Overview:
   task grid ~75% слева + summary panel ~25% справа */
.plans-overview-layout{
  display:grid;
  grid-template-columns:minmax(0, 3fr) minmax(0, 1fr);
  gap:18px;
  align-items:start
}

/* Tasks grid - сетка карточек, 2 задачи в строке.
   Панель естественно растёт вместе с количеством задач:
   без фиксированной высоты, max-height и внутреннего скролла */
.tasks-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
  min-width:0
}

/* «Показать ещё» под overview grid - на всю ширину сетки, по центру */
.tasks-grid .compact-footer{
  grid-column:1 / -1;
  padding:4px 0 0
}

/* Единый hover строк списков: лёгкий сдвиг тона от поверхности,
   видимый в обеих темах (в отличие от --surface-elevated, который
   в светлой теме сливается с белым фоном панели) */
.compact-row:hover,
.compact-payments-table tr:hover td,
.category-item:hover,
.budget-category-row:hover{
  background:color-mix(in srgb,var(--line) 40%,var(--surface))
}

.task-checkbox{
  width:20px;
  height:20px;
  flex-shrink:0;
  border:1px solid var(--line);
  border-radius:6px;
  background:var(--surface-elevated);
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  display:grid;
  place-items:center;
  transition:all .15s ease
}

/* Hover неотмеченного: нейтрально светлее border/background - без primary/status цвета */
.task-checkbox:hover{
  border-color:color-mix(in srgb,var(--text-muted) 45%,var(--line));
  background:color-mix(in srgb,var(--line) 30%,var(--surface-elevated))
}

/* Completed - всегда зелёный, никогда blue */
.task-checkbox:checked{
  background:var(--task-green);
  border-color:var(--task-green)
}

/* Светлая тема: белая галочка на тёмно-зелёном фоне */
.task-checkbox:checked::after{
  content:"";
  width:10px;
  height:10px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") center/contain no-repeat
}

/* Тёмная тема: фон чекбокса светло-зелёный #6FCF8F - тёмная галочка контрастнее белой */
[data-theme="dark"] .task-checkbox:checked::after{
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230D121A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") center/contain no-repeat
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme]) .task-checkbox:checked::after{
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230D121A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") center/contain no-repeat
  }
}

/* ===== ЕДИНАЯ КАРТОЧКА ЗАДАЧИ (Overview + страница «Планы») ===== */
.task-card{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--surface-elevated);
  min-width:0;
  transition:background .15s ease,border-color .15s ease
}

/* Hover: фон чуть светлее и граница заметнее - без transform и glow */
.task-card:hover{
  background:color-mix(in srgb,var(--line) 30%,var(--surface-elevated));
  border-color:color-mix(in srgb,var(--text-muted) 28%,var(--line))
}

.task-card-top{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0
}

.task-card-title{
  flex:1;
  min-width:0;
  font-size:13.5px;
  font-weight:600;
  color:var(--text);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}

/* Статусный чип в правом верхнем углу карточки.
   Status palette: not_started=gray, planned=amber, in_progress=blue, completed=green */
.task-status-chip{
  flex-shrink:0;
  padding:3px 8px;
  border:1px solid transparent;
  border-radius:20px;
  font-size:10px;
  font-weight:600;
  letter-spacing:.2px;
  white-space:nowrap
}

.task-status-chip.neutral{
  background:var(--task-neutral-bg);
  border-color:var(--task-neutral-border);
  color:var(--task-neutral)
}

.task-status-chip.planned{
  background:var(--task-amber-bg);
  border-color:var(--task-amber-border);
  color:var(--task-amber)
}

.task-status-chip.in_progress{
  background:var(--task-blue-bg);
  border-color:var(--task-blue-border);
  color:var(--task-blue)
}

.task-status-chip.completed{
  background:var(--task-green-bg);
  border-color:var(--task-green-border);
  color:var(--task-green)
}

/* Метаданные: сумма · срок · приоритет - вторая строка, выровнена по заголовку */
.task-card-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  column-gap:7px;
  row-gap:2px;
  padding-left:30px;
  font-size:11px;
  color:var(--text-muted)
}

.task-card-meta > span{
  display:inline-flex;
  align-items:center;
  gap:3px;
  white-space:nowrap
}

.task-meta-icon{
  width:12px;
  height:12px;
  flex-shrink:0;
  opacity:.85
}

/* Приоритет в метаданных - лёгкая цветная метка без фона.
   Priority palette: important=red, medium=amber, low=green */
.task-priority{
  font-size:inherit;
  font-weight:700
}

.task-priority.high{
  color:var(--task-red)
}

.task-priority.medium{
  color:var(--task-amber)
}

.task-priority.low{
  color:var(--task-green)
}

/* Общие элементы метаданных задач (Overview + страница Планов) */
.task-meta-value{
  color:var(--text);
  font-weight:600
}

.task-meta-date{
  color:var(--text-muted)
}

/* «Сегодня» - единственная «живая» дата: blue, как active/in progress */
.task-meta-today{
  color:var(--task-blue);
  font-weight:600
}

.task-meta-overdue{
  color:var(--task-red);
  font-weight:600
}

.task-meta-sep{
  opacity:.55
}

/* Завершённая задача: деликатное зачёркивание заголовка, приглушённая сумма */
.task-card.completed .task-card-title{
  color:var(--text-muted);
  text-decoration:line-through;
  text-decoration-thickness:1px;
  text-decoration-color:color-mix(in srgb,var(--text-muted) 55%,transparent)
}

.task-card.completed .task-meta-value{
  color:var(--text-muted);
  font-weight:500;
  text-decoration:line-through;
  text-decoration-color:color-mix(in srgb,var(--text-muted) 55%,transparent)
}

/* Empty state для задач - растягивается на всю сетку */
.empty-tasks-state{
  grid-column:1 / -1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  padding:36px 20px;
  text-align:center;
  color:var(--text-muted)
}

.empty-tasks-state p{
  font-size:13px;
  font-weight:500;
  margin:0;
  color:var(--text)
}

.empty-tasks-state small{
  font-size:11px;
  color:var(--text-muted);
  margin-bottom:6px
}

/* ===== SUMMARY PANEL «Планов и задач» на Overview ===== */
.plans-summary-card{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:14px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--surface-elevated)
}

.plans-summary-card h3{
  margin:0 0 2px;
  color:#9AA5B3;
  font-size:8px;
  font-weight:800;
  letter-spacing:1.3px;
  text-transform:uppercase
}

.plans-summary-rows{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column
}

.plans-summary-rows li{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 0;
  font-size:12px;
  color:var(--text-muted)
}

.plans-summary-rows li + li{
  border-top:1px solid var(--line)
}

.plans-summary-rows strong{
  margin-left:auto;
  font-size:12.5px;
  font-weight:600;
  color:var(--text)
}

/* Контурные иконки строк summary (Overview + страницы Планов) */
.summary-row-icon{
  width:14px;
  height:14px;
  flex-shrink:0;
  display:inline-flex
}

.summary-row-icon svg{
  width:100%;
  height:100%
}

.summary-row-icon.red{color:var(--red)}
.summary-row-icon.blue{color:var(--blue)}
.summary-row-icon.green{color:var(--green)}
.summary-row-icon.muted{color:var(--text-muted)}
.summary-row-icon.primary{color:var(--primary)}

/* ===== PLANS PAGE STYLES ===== */
/* Единая компактная summary-панель вместо отдельных KPI-карточек */
.plans-summary{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 26px;
  padding:12px 16px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--surface-elevated);
  margin-bottom:16px
}

.plans-summary-item{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  color:var(--text-muted)
}

.plans-summary-item strong{
  font-size:13px;
  font-weight:600;
  color:var(--text)
}

/* Filter chips */
.plans-filters{
  display:flex;
  gap:8px;
  margin-bottom:16px;
  flex-wrap:wrap
}

.filter-chip{
  padding:8px 16px;
  border:1px solid var(--line);
  border-radius:20px;
  background:var(--surface);
  color:var(--text-muted);
  font-size:12px;
  font-weight:500;
  cursor:pointer;
  transition:all .15s ease
}

.filter-chip:hover{
  background:var(--surface-elevated);
  border-color:var(--primary);
  color:var(--primary)
}

.filter-chip.active{
  background:var(--primary-soft);
  border-color:var(--primary);
  color:var(--primary)
}

/* Plans list - та же 2-колоночная сетка карточек, что на Overview */
.plans-list{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px
}

/* Превью заметки на странице Планов - максимум 1 строка */
.task-card-note{
  font-size:11px;
  color:var(--text-muted);
  padding-left:30px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}

/* Действия карточки на странице Планов - всегда видимы, без hover-only */
.task-card-actions{
  display:flex;
  gap:2px;
  flex-shrink:0
}

.task-card-action-btn{
  width:26px;
  height:26px;
  border:0;
  border-radius:6px;
  background:transparent;
  color:var(--text-muted);
  cursor:pointer;
  display:grid;
  place-items:center;
  font-size:13px;
  transition:background .15s ease,color .15s ease
}

.task-card-action-btn:hover{
  background:var(--surface);
  color:var(--text)
}

.task-card-action-btn.delete:hover{
  background:var(--red-soft);
  color:var(--red)
}

/* Mobile: одна карточка в строке, метаданные от левого края карточки */
@media (max-width:768px){
  .tasks-grid,
  .plans-list{
    grid-template-columns:1fr
  }

  .task-card-meta,
  .task-card-note{
    padding-left:0
  }
}

/* Priority/Status selector в modal.
   Selected: тёмная подложка + цветной border + слабый tinted background + цветной текст
   (никаких solid fill). Unselected: тёмная surface, muted border/text - цвет состояния
   появляется только после выбора. */
.priority-selector{
  display:flex;
  gap:8px
}

.priority-option{
  flex:1;
  position:relative
}

.priority-option input[type="radio"]{
  position:absolute;
  opacity:0;
  pointer-events:none
}

.priority-label{
  display:block;
  text-align:center;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--surface);
  color:var(--text-muted);
  font-size:12px;
  font-weight:500;
  cursor:pointer;
  transition:border-color .15s ease,background .15s ease,color .15s ease
}

/* Hover невыбранного: border и background чуть светлее, БЕЗ цвета состояния */
.priority-option input:not(:checked) + .priority-label:hover{
  border-color:color-mix(in srgb,var(--text-muted) 38%,var(--line));
  background:color-mix(in srgb,var(--line) 40%,var(--surface))
}

.priority-option input:checked + .priority-label{
  font-weight:600
}

/* Priority palette: low=green, medium=amber, important=red */
.priority-option input:checked + .priority-label.low{
  color:var(--task-green);
  border-color:var(--task-green-border);
  background:var(--task-green-bg)
}

.priority-option input:checked + .priority-label.medium{
  color:var(--task-amber);
  border-color:var(--task-amber-border);
  background:var(--task-amber-bg)
}

.priority-option input:checked + .priority-label.important{
  color:var(--task-red);
  border-color:var(--task-red-border);
  background:var(--task-red-bg)
}

/* Status palette: not_started=neutral gray, planned=amber, in_progress=blue */
.priority-option input:checked + .priority-label.neutral{
  color:var(--task-neutral);
  border-color:var(--task-neutral-border);
  background:var(--task-neutral-bg)
}

.priority-option input:checked + .priority-label.planned{
  color:var(--task-amber);
  border-color:var(--task-amber-border);
  background:var(--task-amber-bg)
}

.priority-option input:checked + .priority-label.in_progress{
  color:var(--task-blue);
  border-color:var(--task-blue-border);
  background:var(--task-blue-bg)
}

.panel{
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px;
  background:var(--surface);
  box-shadow:0 2px 4px rgba(30,36,58,.02)
}

/* Верхний ряд Overview: панели тянутся на высоту ряда.
   Для нижнего ряда (.overview-grid.lower) действует height:auto - natural height */
.overview-grid>.panel,
.overview-grid>.category-panel{
  height:100%;
  display:flex;
  flex-direction:column
}

.overview-grid>.panel>.expense-structure,
.overview-grid>.panel>#overviewBudget{
  flex:1;
  min-height:0
}

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

/* Panel head с month navigator — три колонки: left | center | right */
.panel-head-with-month-nav{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:start;
  gap:16px
}

.panel-head-left{
  justify-self:start
}

.panel-head-right{
  justify-self:end;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:8px
}

/* Month navigator для платежей - центрированный */
.payment-month-navigator{
  justify-self:center;
  align-self:start;
  display:flex;
  align-items:center;
  gap:4px;
  font-size:13px
}

.month-nav-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  padding:0;
  border:1px solid var(--line);
  background:var(--surface);
  border-radius:8px;
  color:var(--text-muted);
  font-size:16px;
  cursor:pointer;
  transition:all 0.15s ease
}

.month-nav-btn:hover{
  color:var(--text);
  background:color-mix(in srgb,var(--line) 40%,var(--surface));
  border-color:var(--primary)
}

.month-nav-btn:active{
  transform:scale(0.95)
}

#paymentMonthLabel{
  font-weight:600;
  color:var(--text);
  padding:0 6px;
  text-align:center
}

.payments-count{
  font-size:11px;
  color:var(--text-muted)
}

.panel-head h2,
.section-intro h2{
  margin:4px 0 0;
  font-size:16px
}

.legend{
  display:flex;
  gap:13px;
  color:var(--text-muted);
  font-size:10px
}

.legend span{
  display:flex;
  align-items:center;
  gap:5px
}

.legend i{
  width:8px;
  height:8px;
  border-radius:3px
}

.legend .green{background:var(--green)}
.legend .red{background:var(--red)}

.bar-chart{
  height:235px;
  display:flex;
  align-items:stretch;
  gap:8px;
  padding-top:8px
}

.chart-axis{
  width:34px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  text-align:right;
  color:var(--text-muted);
  font-size:9px
}

.chart-bars{
  position:relative;
  flex:1;
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:12px;
  align-items:end;
  border-bottom:1px solid #e2e5ec;
  background:repeating-linear-gradient(to bottom,#fff 0,#fff 45px,#eef0f4 46px)
}

.chart-group{
  height:100%;
  position:relative;
  display:flex;
  justify-content:center;
  align-items:end;
  gap:6px
}

.chart-bar{
  width:14px;
  min-height:2px;
  border-radius:4px 4px 0 0
}

.chart-bar.income{
  background:linear-gradient(#5bc182,#36a968)
}

.chart-bar.expense{
  background:linear-gradient(#f07a84,#df5261)
}

.chart-label{
  position:absolute;
  bottom:-19px;
  font-size:9px;
  color:var(--text-muted)
}

.category-chart{
  min-height:235px;
  display:flex;
  align-items:center;
  gap:24px
}

.donut{
  flex:0 0 180px;
  width:180px;
  height:180px;
  border-radius:50%;
  display:grid;
  place-items:center;
  position:relative;
  background:transparent
}

.donut-center-text{
  position:absolute;
  inset:0;
  z-index:2;
  text-align:center;
  display:grid;
  place-content:center;
  pointer-events:none
}

.donut-center-text strong{
  font-size:18px;
  font-weight:700;
  color:var(--text);
  display:block;
  line-height:1.2
}

.donut-center-text span{
  margin-top:4px;
  color:var(--text-muted);
  font-size:12px;
  display:block
}

.donut-center-text.empty strong,
.donut-center-text.empty span{
  color:var(--text-muted)
}

/* ============================================
   OVERVIEW «Структура расходов» («На что уходят деньги»)
   Donut слева (~40%), список категорий справа (~60%).
   Общие .donut / .category-list / .category-item остаются за Analytics -
   у Overview собственные semantic-классы .expense-*
   ============================================ */

.expense-structure{
  min-height:235px;
  display:grid;
  grid-template-columns:minmax(0, 2fr) minmax(0, 3fr);
  align-items:center;
  gap:32px
}

.expense-chart{
  position:relative;
  justify-self:center;
  width:220px;
  height:220px;
  display:grid;
  place-items:center
}

.expense-chart .donut-center-text strong{
  font-size:21px
}

.expense-chart .donut-center-text span{
  margin-top:2px;
  font-size:11px
}

/* Сравнение с прошлым периодом внутри donut; рендерится только когда
   предыдущий сопоставимый период корректно вычисляется */
.expense-chart-comparison{
  display:block;
  margin-top:7px;
  font-size:11px;
  font-weight:600;
  line-height:1.2
}

.expense-chart-comparison span{
  display:block;
  margin-top:1px;
  font-size:9px;
  font-weight:500;
  color:var(--text-muted)
}

/* Расходы снизились - хорошо; выросли - плохо */
.expense-chart-comparison.down{color:var(--green)}
.expense-chart-comparison.up{color:var(--red)}

.expense-category-list{
  min-width:0;
  display:grid;
  gap:2px;
  align-content:center
}

/* [ icon tile ] name + progress | amount | percent -
   фиксированные колонки держат суммы и проценты друг под другом */
.expense-category-row{
  display:grid;
  grid-template-columns:36px minmax(0, 1fr) 96px 44px;
  column-gap:12px;
  row-gap:6px;
  align-items:center;
  padding:6px 10px;
  margin:0 -10px;
  border-radius:10px;
  transition:background-color .15s ease
}

.expense-category-icon{
  width:36px;
  height:36px;
  border-radius:10px;
  display:grid;
  place-items:center;
  transition:filter .15s ease
}

.expense-category-icon svg{
  width:18px;
  height:18px
}

.expense-category-main{
  display:grid;
  gap:6px;
  min-width:0
}

.expense-category-name{
  font-size:14px;
  font-weight:500;
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}

/* Тонкий прогресс: ширина заполнения = проценту справа (задаётся в JS) */
.expense-category-progress{
  display:block;
  height:4px;
  border-radius:2px;
  overflow:hidden;
  background:color-mix(in srgb, var(--line) 55%, transparent)
}

.expense-category-progress i{
  display:block;
  height:100%;
  border-radius:2px
}

.expense-category-amount{
  font-size:14px;
  font-weight:600;
  color:var(--text);
  text-align:right;
  white-space:nowrap;
  font-variant-numeric:tabular-nums
}

.expense-category-percent{
  font-size:12px;
  color:var(--text-muted);
  text-align:right;
  font-variant-numeric:tabular-nums
}

/* Hover: строка слегка светлеет, tile немного ярче - без scale и jump */
.expense-category-row:hover{
  background:color-mix(in srgb, var(--line) 40%, var(--surface))
}

.expense-category-row:hover .expense-category-icon{
  filter:brightness(1.1)
}

.expense-category-empty{
  margin:0;
  padding:16px 0;
  font-size:13px;
  color:var(--text-muted)
}

.category-list{
  flex:1;
  display:grid;
  gap:12px
}

/* Новая структура категории: marker + name | amount + percent */
.category-item{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:12px;
  font-size:14px;
  padding:8px 0
}

.category-info{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0
}

.category-dot{
  width:12px;
  height:12px;
  border-radius:50%;
  flex-shrink:0
}

.category-info span{
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}

.category-amounts{
  display:flex;
  align-items:center;
  gap:8px;
  text-align:right
}

.category-amounts>span:first-child{
  color:var(--text);
  font-weight:600;
  white-space:nowrap
}

.category-percent{
  color:var(--text-muted);
  font-size:12px;
  min-width:32px
}

.compact-list{display:grid}

/* Payments block - natural height по количеству строк таблицы,
   без внутреннего вертикального скролла */
#upcomingPayments{
  min-width:0;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch
}

/* На узких панелях (нижняя сетка ещё двухколоночная) таблица не должна
   сжиматься до нечитаемого состояния: горизонтальный скролл живёт внутри
   панели и не уводит страницу */
.compact-payments-table{
  min-width:640px
}

/* Removed - was for duplicate JS-generated counter */

/* Единая стабильная сетка строки операции:
   Дата | Название | Категория | Тип | Сумма | Действия */
.compact-row{
  display:grid;
  grid-template-columns:64px minmax(0,1fr) 132px 60px 92px 32px;
  align-items:center;
  gap:10px;
  min-height:44px;
  border-bottom:1px solid var(--line);
  padding:0 4px
}

.compact-type{
  display:flex;
  justify-content:center;
  min-width:0
}

.compact-row .compact-amount{
  text-align:right;
  font-weight:600;
  font-variant-numeric:tabular-nums
}

.compact-date,
.compact-icon{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:#f1efff;
  color:#6551c5;
  font-size:10px;
  font-weight:800
}

.compact-copy{min-width:0}

.compact-copy strong,
.compact-copy small{
  display:block
}

.compact-copy strong{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:11px
}

.compact-copy small{
  margin-top:3px;
  color:var(--text-muted);
  font-size:9px
}

/* Compact date in new table layout */
.compact-row .compact-date{
  width:auto;
  height:auto;
  display:inline;
  background:transparent;
  color:var(--text-muted);
  font-size:11px;
  font-weight:400
}

.compact-amount{font-size:11px}
.positive{color:var(--green)}
.negative{color:var(--red)}

.compact-category{
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
  font-size:11px;
  color:var(--text)
}

/* Длинное название категории не ломает сетку строки */
.compact-category>span:last-child{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}

.category-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  flex-shrink:0
}

/* Футер «Показать ещё» - без верхней линии:
   разделитель даёт нижний border последней строки */
.compact-footer{
  display:flex;
  justify-content:center;
  padding:8px 0 4px
}

.show-more-btn{
  border:0;
  background:transparent;
  color:var(--primary);
  font-size:11px;
  font-weight:600;
  padding:6px 12px;
  border-radius:6px;
  cursor:pointer;
  transition:background-color .15s ease,color .15s ease
}

/* Единый hover со ссылками панели - мягкая подложка вместо приглушения */
.show-more-btn:hover{
  background:var(--primary-soft)
}

.muted-copy{
  color:var(--text-muted);
  line-height:1.55
}

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

.section-intro h2{font-size:20px}

.section-intro p{
  margin:6px 0 0;
  color:var(--text-muted);
  font-size:12px
}

.toolbar{
  display:flex;
  gap:9px;
  margin-bottom:16px
}

.search{
  flex:1;
  display:flex;
  align-items:center;
  border:1px solid #dfe3eb;
  border-radius:9px;
  padding:0 11px;
  background:#fff
}

.search span{
  color:#8c94a6;
  font-size:18px
}

.toolbar .search input{
  height:42px;
  border:0;
  box-shadow:none;
  padding:0 8px
}

.toolbar select{
  width:auto;
  min-width:150px
}

.table-wrap{overflow-x:auto}

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

th,td{
  height:44px;
  padding:0 10px;
  border-bottom:1px solid var(--line);
  text-align:left;
  font-size:11px;
  white-space:nowrap
}

th{
  height:38px;
  color:#6f788c;
  font-size:9px;
  letter-spacing:.5px;
  text-transform:uppercase
}

.right{text-align:right}

.type-badge,
.status-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:24px;
  border-radius:12px;
  padding:0 9px;
  font-size:9px;
  font-weight:750
}

.type-badge.income,
.status-badge.paid{
  background:transparent;
  color:var(--green);
  border:1px solid var(--green)
}

.type-badge.expense,
.status-badge.overdue{
  background:transparent;
  color:var(--red);
  border:1px solid var(--red)
}

.status-badge.pending{
  background:var(--amber-soft);
  color:#b77617
}

.row-actions{
  display:flex;
  justify-content:flex-end;
  gap:3px
}

.row-actions button{
  width:29px;
  height:29px;
  border:0;
  border-radius:7px;
  background:transparent;
  color:#737c90
}

.row-actions button:hover{
  background:var(--primary-soft);
  color:var(--primary)
}

/* Compact Dropdown Menu */
.row-actions{
  position:relative
}

.compact-dropdown-menu{
  position:absolute;
  right:0;
  top:100%;
  z-index:100;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:0 4px 12px rgba(0,0,0,.1);
  min-width:160px;
  padding:4px 0;
  margin-top:4px
}

.compact-dropdown-menu button{
  width:100%;
  padding:10px 14px;
  border:0;
  background:transparent;
  text-align:left;
  font-size:13px;
  color:var(--text);
  display:flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  transition:background .15s ease
}

.compact-dropdown-menu button:hover{
  background:var(--surface-elevated)
}

.compact-dropdown-menu button.text-danger{
  color:var(--red)
}

.compact-dropdown-menu button.text-danger:hover{
  background:var(--red-soft)
}

/* Триггер меню операции: явные hover/focus состояния.
   Перебивает старый захардкоженный #f0edff, ломавшийся в тёмной теме */
.row-actions .icon-btn:hover,
.row-actions .icon-btn:focus-visible{
  background:var(--primary-soft);
  color:var(--primary)
}

.icon-btn:focus-visible{
  outline:2px solid var(--primary);
  outline-offset:2px
}

.compact-dropdown-menu button:focus-visible{
  outline:2px solid var(--primary);
  outline-offset:-2px
}

.payment-check{
  display:inline-flex;
  align-items:center;
  gap:7px;
  cursor:pointer
}

.payment-check input{
  width:17px;
  height:17px;
  accent-color:var(--green)
}

/* Payment Summary Cards - Payments Page */
.payment-summary{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-bottom:16px
}

.payment-summary-card{
  padding:12px 14px;
  border-radius:10px;
  background:var(--surface-elevated);
  border:1px solid var(--line);
  display:flex;
  flex-direction:column;
  gap:4px
}

.payment-summary-card span,
.payment-summary-card strong{
  display:block
}

.payment-summary-card span{
  color:var(--text-muted);
  font-size:10px;
  font-weight:600;
  letter-spacing:.3px;
  text-transform:uppercase
}

.payment-summary-card strong{
  font-size:16px;
  font-weight:600;
  color:var(--text)
}

.payment-summary-card.pending{
  border-color:var(--amber);
  background:var(--amber-soft)
}

.payment-summary-card.pending strong{
  color:var(--amber)
}

.payment-summary-card.paid{
  border-color:var(--green);
  background:var(--green-soft)
}

.payment-summary-card.paid strong{
  color:var(--green)
}

.payment-summary-card.overdue{
  border-color:var(--red);
  background:var(--red-soft)
}

.payment-summary-card.overdue strong{
  color:var(--red)
}

/* Panel subtitle */
.panel-subtitle{
  margin:4px 0 0;
  color:var(--text-muted);
  font-size:11px;
  line-height:1.4
}

/* Payments page table wrap - без лишних overflow на desktop */
.payments-page-table-wrap{
  overflow-x:visible;
  overflow-y:visible;
  max-height:none
}

/* Payments count в panel head */
.payments-count{
  color:var(--text-muted);
  font-size:11px;
  font-weight:500;
  white-space:nowrap
}

/* Icon buttons в таблицах */
.icon-btn{
  width:32px;
  height:32px;
  border:0;
  border-radius:7px;
  background:transparent;
  color:var(--text-muted);
  cursor:pointer;
  display:grid;
  place-items:center;
  font-size:15px;
  transition:all .15s ease
}

.icon-btn:hover{
  background:var(--primary-soft);
  color:var(--primary)
}

.icon-btn:active{
  transform:scale(.95)
}

/* Category tag */
.category-tag{
  display:inline-flex;
  align-items:center;
  padding:3px 8px;
  border-radius:6px;
  background:var(--surface-elevated);
  color:var(--text-muted);
  font-size:10px;
  font-weight:500;
  white-space:nowrap
}

/* Badge для статуса */
.badge{
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  border-radius:12px;
  font-size:10px;
  font-weight:600;
  white-space:nowrap
}

.badge-success{
  background:var(--green-soft);
  color:var(--green);
  border:1px solid var(--green)
}

.badge-muted{
  background:var(--surface-elevated);
  color:var(--text-muted);
  border:1px solid var(--line)
}

/* Payments page specific spacing */
[data-view-panel="recurring"] .panel{
  margin-bottom:16px
}

[data-view-panel="recurring"] .panel:last-child{
  margin-bottom:0
}

/* Compact rows для Payments page tables */
[data-view-panel="recurring"] .payments-table th,
[data-view-panel="recurring"] .payments-table td,
[data-view-panel="recurring"] .compact-table th,
[data-view-panel="recurring"] .compact-table td{
  height:50px;
  padding:0 12px;
  font-size:11px
}

[data-view-panel="recurring"] .payments-table td,
[data-view-panel="recurring"] .compact-table td{
  vertical-align:middle
}

/* Responsive для Payments page */
@media(max-width:900px){
  .payments-page-table-wrap{
    overflow-x:auto
  }
}

/* Compact payments table for dashboard */
.compact-payments-table{
  width:100%;
  border-collapse:collapse;
  font-size:11px;
  table-layout:fixed;
  /* Общий column template: checkbox | дата | сервис | категория | сумма | до оплаты | статус */
  /* 44px = паддинги ячейки 12+10 + сам чекбокс 22 - иначе контроль обрезается */
  --payment-col-checkbox:44px;
  --payment-col-date:70px;
  --payment-col-service:150px;
  --payment-col-category:130px;
  --payment-col-amount:110px;
  --payment-col-due:110px;
  --payment-col-status:120px
}

.compact-payments-table th{
  height:28px;
  padding:3px 10px;
  border-bottom:1px solid var(--line);
  color:var(--text-muted);
  font-size:9px;
  letter-spacing:.5px;
  text-transform:uppercase;
  font-weight:700;
  text-align:left
}

.compact-payments-table th.right{
  text-align:right;
  padding-right:12px
}

/* Empty header cell for checkbox column */
.compact-payments-table th.payment-checkbox-header{
  width:var(--payment-col-checkbox);
  padding:3px 10px 3px 12px
}

.compact-payments-table th:nth-child(2){
  width:var(--payment-col-date)
}

.compact-payments-table th:nth-child(3){
  width:var(--payment-col-service)
}

.compact-payments-table th:nth-child(4){
  width:var(--payment-col-category)
}

.compact-payments-table th:nth-child(5){
  width:var(--payment-col-amount)
}

.compact-payments-table th:nth-child(6){
  width:var(--payment-col-due)
}

.compact-payments-table th:nth-child(7){
  width:var(--payment-col-status)
}

.compact-payments-table td{
  height:44px;
  padding:3px 10px;
  border-bottom:1px solid var(--line);
  text-align:left;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  vertical-align:middle
}

.compact-payments-table td.right{
  text-align:right;
  padding-right:12px
}

/* Allow wrapping for status text */
.compact-payments-table td:last-child{
  white-space:normal
}

.compact-payments-table tr:last-child td{
  border-bottom:0
}

/* Оплаченные платежи слегка приглушены: вторичный текст (дата, сервис)
   становится тусклее. Чекбокс, сумма и зелёный статус «Оплачено»
   остаются без изменений и читаемыми */
.compact-payments-table tr.is-paid td:nth-child(2),
.compact-payments-table tr.is-paid td:nth-child(3){
  color:var(--text-muted)
}

/* Payments count styling - простой текст без flex, так как теперь в flex-col родителе */
.payments-count{
  padding:0;
  margin:0 !important
}

/* Payment status with dot */
.payment-status{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:10px;
  font-weight:600
}

.payment-status i{
  width:6px;
  height:6px;
  border-radius:50%;
  flex-shrink:0
}

.payment-status.payment-paid{
  color:var(--green)
}

.payment-status.payment-paid i{
  background:var(--green)
}

.payment-status.payment-pending{
  color:var(--amber)
}

.payment-status.payment-pending i{
  background:var(--amber)
}

.payment-status.payment-overdue{
  color:var(--red)
}

.payment-status.payment-overdue i{
  background:var(--red)
}

/* Payment checkbox column */
.payment-checkbox-cell{
  width:var(--payment-col-checkbox);
  padding:3px 10px 3px 12px!important
}

.payment-checkbox-label{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  cursor:pointer
}

.payment-checkbox{
  width:22px;
  height:22px;
  aspect-ratio:1/1;
  flex-shrink:0;
  border:1px solid var(--line);
  border-radius:6px;
  background:var(--surface-elevated);
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  display:grid;
  place-items:center;
  transition:all .15s ease
}

.payment-checkbox:hover{
  border-color:var(--primary);
  background:var(--surface)
}

.payment-checkbox:checked{
  background:var(--green);
  border-color:var(--green)
}

.payment-checkbox:checked::after{
  content:"";
  width:12px;
  height:12px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") center/contain no-repeat
}

/* Payment "до оплаты" badges */
.payment-due{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:22px;
  border-radius:10px;
  padding:0 8px;
  font-size:9px;
  font-weight:600;
  white-space:nowrap
}

.payment-due-empty{
  background:transparent;
  color:var(--text-muted)
}

/* Единая шкала срочности «До оплаты»:
   просрочено / сегодня - red, 1-3 дня - orange,
   4-7 дней - amber, дальше - нейтральный muted */
.payment-due-overdue{
  background:var(--red-soft);
  color:var(--red);
  border:1px solid var(--red)
}

/* Оранжевый смешивается из red+amber и адаптируется под обе темы */
.payment-due-soon{
  background:color-mix(in srgb,var(--red-soft) 45%,var(--amber-soft));
  color:color-mix(in srgb,var(--red) 55%,var(--amber));
  border:1px solid color-mix(in srgb,var(--red) 55%,var(--amber))
}

.payment-due-warning{
  background:var(--amber-soft);
  color:var(--amber);
  border:1px solid var(--amber)
}

/* Далёкие сроки не сигналят цветом - нейтральный приглушённый бейдж */
.payment-due-later{
  background:var(--surface-elevated);
  color:var(--text-muted);
  border:1px solid var(--line)
}

.cards-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:16px
}

@media(min-width:1400px){
  .cards-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))
  }
}

@media(min-width:1000px) and (max-width:1399px){
  .cards-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}

.goal-card{
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:16px;
  background:var(--surface);
  display:flex;
  flex-direction:column;
  gap:12px
}

.goal-card-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px
}

.goal-card-header-left{
  display:flex;
  align-items:center;
  gap:8px
}

.goal-card-icon{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  background:var(--surface-elevated);
  border-radius:6px
}

.goal-card-icon svg{
  width:16px;
  height:16px
}

.goal-card-head h3{
  margin:0;
  font-size:14px;
  font-weight:600;
  color:var(--text)
}

.goal-card-body{
  display:flex;
  flex-direction:column;
  gap:12px
}

.goal-card-progress{
  display:flex;
  align-items:center;
  gap:10px
}

.goal-card-progress .progress-bar{
  flex:1;
  height:6px
}

.goal-card-progress strong{
  font-size:13px;
  color:var(--text)
}

.goal-card-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px
}

.goal-card-stats>div{
  display:flex;
  flex-direction:column;
  gap:4px
}

.goal-card-stats span{
  font-size:10px;
  color:var(--text-muted)
}

.goal-card-stats strong{
  font-size:13px;
  color:var(--text)
}

.goal-card-meta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-top:4px;
  border-top:1px solid var(--line);
  font-size:11px
}

.goal-card-meta span:first-child{
  color:var(--text-muted)
}

.goal-card.success{
  border-color:var(--green)
}

.goal-card.success .progress-fill{
  background:var(--green)
}

/* Budget Cards */
.budget-card{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--surface);
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:14px;
  position:relative;
  overflow:hidden
}

.budget-card-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px
}

.budget-card-head-left{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  flex:1
}

.budget-category-icon{
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  background:var(--surface-inner);
  border-radius:8px;
  flex-shrink:0
}

.budget-category-icon svg{
  width:18px;
  height:18px;
  color:var(--text-muted)
}

.budget-category-name{
  font-size:14px;
  font-weight:600;
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}

.budget-edit-btn{
  width:32px;
  height:32px;
  border:0;
  border-radius:8px;
  background:var(--surface-inner);
  color:var(--text-muted);
  cursor:pointer;
  display:grid;
  place-items:center;
  transition:all .15s ease;
  flex-shrink:0
}

.budget-edit-btn:hover{
  background:var(--surface-elevated);
  color:var(--text)
}

.budget-edit-btn svg{
  width:16px;
  height:16px
}

.budget-body{
  display:flex;
  flex-direction:column;
  gap:12px
}

.budget-progress-row{
  display:flex;
  flex-direction:column;
  gap:6px
}

.budget-progress-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:11px;
  color:var(--text-muted)
}

.budget-progress-percentage{
  font-weight:600;
  color:var(--text)
}

.budget-progress-bar{
  height:6px;
  background:var(--progress-track-bg);
  border:1px solid var(--progress-track-border);
  border-radius:3px;
  overflow:hidden
}

.budget-progress-fill{
  height:100%;
  border-radius:3px;
  transition:width .3s ease
}

.budget-progress-fill.status-ok{
  background:var(--green)
}

.budget-progress-fill.status-warning{
  background:var(--amber)
}

.budget-progress-fill.status-over{
  background:var(--red)
}

.budget-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px
}

.budget-stat-item{
  display:flex;
  flex-direction:column;
  gap:4px
}

.budget-stat-label{
  font-size:10px;
  color:var(--text-muted);
  text-transform:uppercase;
  letter-spacing:.3px
}

.budget-stat-value{
  font-size:15px;
  font-weight:600;
  color:var(--text)
}

.budget-stat-value.positive{
  color:var(--green)
}

.budget-stat-value.negative{
  color:var(--red)
}

.budget-stat-value.warning{
  color:var(--amber)
}

.budget-status{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:12px;
  font-size:11px;
  font-weight:600
}

.budget-status.status-ok{
  background:var(--green-soft);
  color:var(--green)
}

.budget-status.status-warning{
  background:var(--amber-soft);
  color:var(--amber)
}

.budget-status.status-over{
  background:var(--red-soft);
  color:var(--red)
}

.budget-status-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:currentColor
}

.budget-card-footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-top:10px;
  border-top:1px solid var(--line);
  margin-top:2px
}

.budget-delete-btn{
  padding:6px 12px;
  border:0;
  border-radius:7px;
  background:transparent;
  color:var(--red);
  font-size:11px;
  font-weight:600;
  cursor:pointer;
  transition:all .15s ease
}

.budget-delete-btn:hover{
  background:var(--red-soft)
}

/* ============================================
   BUDGET PAGE LAYOUT
   ============================================ */

/* Budget page header */
.budget-page-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
  margin-bottom:20px
}

.budget-page-header h1{
  margin:6px 0 0;
  font-size:18px;
  font-weight:600;
  color:var(--text);
  line-height:1.4
}

.budget-page-header .eyebrow{
  margin:0;
  font-size:10px;
  font-weight:800;
  letter-spacing:1.3px;
  text-transform:uppercase;
  color:var(--text-muted)
}

/* Overall Budget Container */
#overallBudgetContainer{
  margin-bottom:16px
}

/* Quick Metrics */
.budget-metrics{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  margin-bottom:16px
}

.budget-metric{
  padding:14px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--surface);
  display:flex;
  flex-direction:column;
  gap:6px
}

.budget-metric-label{
  font-size:10px;
  color:var(--text-muted);
  text-transform:uppercase;
  letter-spacing:.3px
}

.budget-metric-value{
  font-size:18px;
  font-weight:600;
  color:var(--text)
}

.budget-metric-value.positive{
  color:var(--green)
}

.budget-metric-value.negative{
  color:var(--red)
}

.budget-metric-value.warning{
  color:var(--amber)
}

.budget-metric-value.neutral{
  color:var(--text-muted)
}

/* Budget Sections */
.budget-section{
  margin-bottom:16px
}

.budget-section-title{
  font-size:14px;
  font-weight:600;
  color:var(--text);
  margin:0 0 12px;
  letter-spacing:.3px
}

/* Bottom grid (two columns) */
.budget-bottom-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-top:16px
}

/* Expenses Without Limit */
.budget-list{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--surface);
  overflow:hidden
}

.budget-list-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  border-bottom:1px solid var(--line);
  min-height:54px
}

.budget-list-item:last-child{
  border-bottom:0
}

.budget-list-item:hover{
  background:var(--surface-elevated)
}

.budget-list-item-left{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  flex:1
}

.budget-list-item-icon{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  background:var(--surface-inner);
  border-radius:7px;
  flex-shrink:0;
  font-size:14px
}

.budget-list-item-name{
  font-size:13px;
  font-weight:500;
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}

.budget-list-item-amount{
  font-size:13px;
  font-weight:600;
  color:var(--text)
}

.budget-list-item-action{
  padding:5px 10px;
  border:0;
  border-radius:6px;
  background:transparent;
  color:var(--primary);
  font-size:11px;
  font-weight:600;
  cursor:pointer;
  transition:all .15s ease
}

.budget-list-item-action:hover{
  background:var(--primary-soft)
}

/* Пустая заметка внутри budget-list (шаблоны/недавние без данных) */
.budget-list-item-empty{
  justify-content:center;
  background:transparent;
  border-bottom:0;
  min-height:0;
  padding:16px 14px
}

.budget-list-item-empty:hover{
  background:transparent
}

/* Subtitle секций бюджетов */
.budget-section-subtitle{
  font-size:12px;
  color:var(--text-muted);
  margin:-6px 0 12px
}

/* Кнопка действия под секцией (+ Добавить категорию) */
.budget-section-action{
  margin-top:10px
}

/* Лимиты по умолчанию: сумма + удалить */
.budget-template-controls{
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0
}

.budget-limit-input{
  width:110px;
  padding:6px 8px;
  border:1px solid var(--line);
  border-radius:7px;
  background:var(--surface-inner);
  color:var(--text);
  font-size:13px;
  font-weight:500;
  text-align:right
}

.budget-limit-input:focus{
  outline:none;
  border-color:var(--primary)
}

/* Недавно использованные: средний / рекомендуемый / установить */
.budget-recent-meta{
  display:flex;
  align-items:center;
  gap:12px;
  flex-shrink:0;
  flex-wrap:wrap;
  justify-content:flex-end
}

.budget-recent-stat{
  font-size:12px;
  color:var(--text-muted);
  white-space:nowrap
}

.budget-recent-stat strong{
  color:var(--text);
  font-weight:600
}

/* Default-категория без лимита текущего периода: расход виден, бюджета нет */
.budget-limit-empty{
  border-style:dashed;
  border-color:var(--line)
}

.budget-limit-empty-body{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  font-size:13px
}

.budget-limit-empty-spent{
  color:var(--text);
  font-weight:500
}

.budget-limit-empty-state{
  color:var(--text-muted)
}

/* Новый период: инлайн-ввод лимита периода в карточке без лимита */
.budget-limit-plan{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:10px;
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid var(--line);
  font-size:12px
}

.budget-limit-plan-input{
  width:120px
}

.budget-limit-suggested-label{
  color:var(--text-muted)
}

/* Черновики лимитов периода: панель «Сохранить лимиты периода» */
.budget-draft-savebar{
  display:flex;
  grid-column:1 / -1;
  justify-content:flex-end;
  align-items:center;
  gap:12px;
  margin-top:4px
}

.budget-draft-savebar[hidden]{
  display:none
}

.budget-draft-hint{
  font-size:12px;
  color:var(--text-muted)
}

.budget-limit-apply-btn{
  color:var(--primary);
  border-color:var(--primary-soft);
  background:var(--primary-soft)
}

.budget-limit-apply-btn:hover{
  color:var(--primary);
  background:var(--primary-soft);
  opacity:.85
}

/* ============================================
   СОСТОЯНИЕ БЮДЖЕТА (summary/insights панель)
   ============================================ */

.budget-status-panel{
  display:flex;
  flex-direction:column;
  gap:14px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--surface);
  padding:14px
}

/* 4 компактные метрики периода */
.budget-status-metrics{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px
}

.budget-status-metric{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0
}

.budget-status-metric-label{
  font-size:10px;
  color:var(--text-muted);
  text-transform:uppercase;
  letter-spacing:.3px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}

.budget-status-metric-value{
  font-size:15px;
  font-weight:600;
  color:var(--text);
  white-space:nowrap
}

.budget-status-metric-value.muted{
  color:var(--text-muted);
  font-weight:500
}

.budget-status-metric-value.negative{
  color:var(--red)
}

.budget-status-metric-sub{
  font-size:11px;
  color:var(--text-muted)
}

/* Ближайшие к лимиту (максимум 3) */
.budget-status-near{
  display:flex;
  flex-direction:column;
  gap:10px;
  border-top:1px solid var(--line);
  padding-top:12px
}

.budget-status-near-title{
  font-size:11px;
  color:var(--text-muted);
  text-transform:uppercase;
  letter-spacing:.5px;
  margin:0
}

.budget-status-limit{
  display:flex;
  flex-direction:column;
  gap:5px
}

.budget-status-limit-head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:8px
}

.budget-status-limit-name{
  font-size:12px;
  font-weight:600;
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}

.budget-status-limit-percent{
  font-size:12px;
  font-weight:600;
  flex-shrink:0
}

.budget-status-limit-remaining{
  font-size:11px;
  color:var(--text-muted)
}

.budget-status-limit-remaining.negative{
  color:var(--red)
}

/* Одна подсказка внизу панели */
.budget-status-insight{
  margin:0;
  padding-top:12px;
  border-top:1px solid var(--line);
  font-size:12px;
  line-height:1.5;
  color:var(--text)
}

/* ============================================
   IMPROVED PROGRESS TRACK CONTRAST
   ============================================ */

/* Better contrast for budget progress bars */
.budget-progress-bar{
  background:rgba(151,161,175,0.18);
  border:1px solid rgba(151,161,175,0.25)
}

/* Enhanced progress fill colors */
.budget-progress-fill.status-ok{
  background:var(--green)
}

.budget-progress-fill.status-warning{
  background:var(--amber)
}

.budget-progress-fill.status-over{
  background:var(--red)
}

/* ============================================
   IMPROVED SEPARATORS CONTRAST
   ============================================ */

/* Enhanced contrast for budget-related separators */
.budget-card-footer,
.budget-list-item,
.budget-section,
.budget-metrics{
  border-color:rgba(255,255,255,0.12)
}

/* ============================================
   COMPACT BUDGET LAYOUT
   ============================================ */

/* Budget Summary Panel */
.budget-summary-panel{
  padding:16px;
  margin-bottom:16px
}

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

.budget-summary-content{
  display:flex;
  flex-direction:column;
  gap:12px
}

.budget-summary-metrics{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px
}

.budget-metric-item{
  display:flex;
  flex-direction:column;
  gap:4px
}

.budget-metric-label{
  font-size:10px;
  color:var(--text-muted);
  text-transform:uppercase;
  letter-spacing:.3px
}

.budget-metric-value{
  font-size:15px;
  font-weight:600;
  color:var(--text)
}

.budget-metric-value.positive{
  color:var(--green)
}

.budget-metric-value.negative{
  color:var(--red)
}

.budget-progress-wrapper{
  margin-top:4px
}

.budget-warning-text{
  font-size:11px;
  color:var(--red);
  margin-top:6px
}

/* Compact Metrics Row */
.budget-metrics-compact{
  display:flex;
  gap:24px;
  padding:12px 16px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--surface)
}

.budget-metrics-pair{
  display:flex;
  flex-direction:column;
  gap:4px
}

.budget-metrics-label{
  font-size:10px;
  color:var(--text-muted);
  text-transform:uppercase;
  letter-spacing:.3px
}

.budget-metrics-value{
  font-size:14px;
  font-weight:600;
  color:var(--text)
}

.budget-metrics-value.positive{
  color:var(--green)
}

.budget-metrics-value.negative{
  color:var(--red)
}

/* Budget Compact Row */
.budget-compact-row{
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--surface);
  margin-bottom:8px;
  transition:background .15s ease
}

.budget-compact-row:hover{
  background:var(--surface-elevated)
}

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

.budget-row-category{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  flex:1
}

.budget-row-category .budget-category-icon{
  width:28px;
  height:28px;
  background:var(--surface-inner);
  border-radius:6px
}

.budget-row-category .budget-category-icon svg{
  width:16px;
  height:16px
}

.budget-row-category .budget-category-name{
  font-size:14px;
  font-weight:500;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}

.budget-row-actions{
  display:flex;
  gap:8px;
  flex-shrink:0
}

.budget-row-action-btn{
  padding:6px 12px;
  font-size:12px;
  border:1px solid var(--line);
  border-radius:6px;
  background:transparent;
  color:var(--text-muted);
  cursor:pointer;
  transition:all .15s ease
}

.budget-row-action-btn:hover{
  background:var(--surface-elevated);
  color:var(--text)
}

.budget-row-delete-btn:hover{
  background:var(--red-soft);
  color:var(--red);
  border-color:var(--red-soft)
}

.budget-row-progress{
  display:flex;
  flex-direction:column;
  gap:8px
}

.budget-row-stats{
  display:flex;
  justify-content:space-between;
  align-items:center
}

.budget-stat-main{
  font-size:14px;
  font-weight:500;
  color:var(--text)
}

.budget-stat-percent{
  font-size:13px;
  font-weight:600
}

.budget-stat-percent.status-ok{
  color:var(--green)
}

.budget-stat-percent.status-warning{
  color:var(--amber)
}

.budget-stat-percent.status-over{
  color:var(--red)
}

.budget-row-footer{
  display:flex;
  justify-content:flex-end
}

.budget-row-remaining{
  font-size:12px;
  color:var(--text-muted)
}

.budget-row-remaining.negative{
  color:var(--red)
}

/* ============================================
   OVERVIEW BUDGET - REDESIGNED
   ============================================ */

.budget-overview-empty{
  text-align:center;
  padding:20px
}

/* Premium empty state блока «Бюджет на период» на Overview:
   иконка в мягком фиолетовом круге + заголовок + пояснение + CTA.
   (Класс .budget-overview-empty выше - маленькая inline-заметка
   внутри заполненной таблицы, не путать.) */
.budget-empty-state{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  text-align:center;
  padding:28px 20px;
  border:1px dashed var(--line);
  border-radius:12px;
  background:color-mix(in srgb,var(--surface-inner,var(--surface-elevated)) 45%,transparent)
}

.budget-empty-icon{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  margin-bottom:4px;
  border-radius:50%;
  background:rgba(109,91,208,.14);
  color:#8b7af0
}

.budget-empty-icon svg{
  width:22px;
  height:22px
}

.budget-empty-title{
  margin:0;
  font-size:12px;
  font-weight:600;
  color:var(--text)
}

.budget-empty-text{
  margin:0 0 12px;
  max-width:300px;
  font-size:11px;
  line-height:1.55;
  color:var(--text-muted)
}

/* Period info line */
.budget-period-info{
  font-size:11px;
  color:var(--text-muted);
  margin-bottom:14px;
  font-weight:400
}

/* Summary card - лёгкая внутренняя карточка: тонкая рамка, спокойный фон */
.budget-summary-card{
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--surface-inner,var(--surface-elevated));
  margin-bottom:12px
}

.budget-overview-metrics{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:start
}

/* Одинаковые метрики-зоны: равный padding + тонкие separators.
   Скоуп .budget-overview-metrics, чтобы не задевать страницу Бюджетов,
   которая использует те же классы .budget-metric-* */
.budget-overview-metrics .budget-metric-item{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
  padding:2px 14px 2px 15px;
  border-left:1px solid var(--line)
}

.budget-overview-metrics .budget-metric-item:first-child{
  border-left:0;
  padding-left:2px
}

.budget-overview-metrics .budget-metric-item:last-child{
  padding-right:2px
}

.budget-overview-metrics .budget-metric-label{
  font-size:10px;
  font-weight:700;
  letter-spacing:0.8px;
  text-transform:uppercase;
  color:var(--text-muted)
}

.budget-overview-metrics .budget-metric-value{
  font-size:20px;
  font-weight:700;
  color:var(--text);
  line-height:1.15;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-feature-settings:"tnum"
}

.budget-overview-metrics .budget-metric-value.negative{
  color:var(--red)
}

/* Общий прогресс бюджета - ВСЕГДА синий, не зависит от процента */
.budget-overview-progress{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:18px
}

.budget-overview-progress .budget-progress-bar{
  flex:1;
  height:8px;
  background:var(--progress-track-bg,rgba(27,34,54,.08));
  border:none;
  border-radius:999px;
  overflow:hidden
}

.budget-overview-progress .budget-progress-fill{
  height:100%;
  background:linear-gradient(90deg,#4C7FD1,#6995E5);
  transition:width .45s ease;
  border-radius:inherit
}

.budget-overview-progress .budget-progress-fill.color-blue{
  background:linear-gradient(90deg,#4C7FD1,#6995E5)
}

/* Трафик-лайт цвета - только для category mini progress bars */
.budget-cat-progress-fill.color-green{
  background:var(--green)
}

.budget-cat-progress-fill.color-amber{
  background:var(--amber)
}

.budget-cat-progress-fill.color-red{
  background:var(--red)
}

.budget-progress-percent{
  font-size:18px;
  font-weight:700;
  color:var(--text);
  flex:0 0 auto;
  min-width:54px;
  text-align:right;
  font-feature-settings:"tnum"
}

/* Category budget table - header и строки живут на ОДНОМ шаблоне колонок.
   minmax(0,Xfr): у треков нет min-content пола, поэтому контент (100 000 ₽,
   длинные названия) не может раздвинуть колонку - все строки выровнены
   абсолютно при любой ширине панели. */
.budget-overview-table{
  --budget-grid-columns:minmax(0,1.55fr) minmax(0,1.15fr) minmax(0,.62fr) minmax(0,.7fr) minmax(0,.9fr);
  margin-top:8px
}

.budget-table-header{
  display:grid;
  grid-template-columns:var(--budget-grid-columns);
  gap:12px;
  align-items:center;
  padding:2px 10px 8px;
  font-size:9px;
  font-weight:750;
  letter-spacing:0.7px;
  text-transform:uppercase;
  color:var(--text-muted);
  border-bottom:1px solid var(--line)
}

.budget-table-header>:nth-child(3),
.budget-table-header>:nth-child(4){
  text-align:right
}

.budget-category-row{
  display:grid;
  grid-template-columns:var(--budget-grid-columns);
  gap:12px;
  align-items:center;
  padding:10px;
  border-bottom:1px solid var(--line);
  transition:background .15s ease
}

.budget-category-row:last-child{
  border-bottom:0
}

/* hover строки бюджета - в едином правиле строк выше */

.budget-cat-name{
  font-size:13px;
  font-weight:500;
  color:var(--text);
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}

.budget-cat-progress{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0
}

/* Mini progress: тонкий rounded трек на приглушённом фоне */
.budget-cat-progress-bar{
  flex:1;
  min-width:0;
  height:4px;
  background:var(--progress-track-bg,rgba(27,34,54,.08));
  border:none;
  border-radius:999px;
  overflow:hidden
}

.budget-cat-progress-fill{
  height:100%;
  border-radius:inherit;
  transition:width .35s ease
}

/* Фиксированная зона процента справа от бара */
.budget-cat-percent{
  flex:0 0 auto;
  width:38px;
  font-size:11px;
  font-weight:600;
  color:var(--text);
  text-align:right;
  font-feature-settings:"tnum"
}

/* Денежные значения: ровная правая кромка, крупные суммы не ломают сетку */
.budget-cat-limit,
.budget-cat-spent{
  font-size:12px;
  font-weight:500;
  color:var(--text);
  text-align:right;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-feature-settings:"tnum"
}

.budget-cat-spent{
  font-weight:600
}

.budget-cat-status{
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
  font-size:11px;
  font-weight:600
}

.budget-status-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  flex-shrink:0
}

.budget-status-dot.status-ok{
  background:var(--green)
}

.budget-status-dot.status-warning{
  background:var(--amber)
}

.budget-status-dot.status-over{
  background:var(--red)
}

.status-text{
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}

.budget-table-footer{
  display:flex;
  justify-content:center;
  padding-top:12px;
  border-top:1px solid var(--line);
  margin-top:4px
}

.budget-table-footer .link-btn{
  font-size:11px
}

/* Responsive adjustments */
@media (max-width:900px){
  .budget-bottom-grid{
    grid-template-columns:1fr
  }

  .budget-summary-metrics{
    grid-template-columns:repeat(2,1fr)
  }

  .budget-status-metrics{
    grid-template-columns:repeat(2,1fr)
  }

  .budget-metrics-compact{
    flex-wrap:wrap;
    gap:16px
  }

  /* Budget table - компактный двухколоночный режим:
     название слева, mini progress справа; числа/статус скрываются.
     Никакого горизонтального overflow. */
  .budget-table-header,
  .budget-category-row{
    grid-template-columns:minmax(0,1fr) auto;
    gap:10px;
    padding-left:2px;
    padding-right:2px
  }

  .budget-table-header span:nth-child(n+3),
  .budget-category-row > *:nth-child(n+3){
    display:none
  }

  .budget-cat-name{
    max-width:60%
  }
}

/* Dark theme separators */
[data-theme="dark"] .budget-card-footer,
[data-theme="dark"] .budget-list-item,
[data-theme="dark"] .budget-section,
[data-theme="dark"] .budget-metrics{
  border-color:rgba(255,255,255,0.15)
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme]) .budget-card-footer,
  :root:not([data-theme]) .budget-list-item,
  :root:not([data-theme]) .budget-section,
  :root:not([data-theme]) .budget-metrics{
    border-color:rgba(255,255,255,0.15)
  }
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width:1200px){
  .budget-metrics{
    grid-template-columns:repeat(2,1fr)
  }
}

@media (max-width:900px){
  .budget-bottom-grid{
    grid-template-columns:1fr
  }
}

@media (max-width:768px){
  .budget-page-header{
    flex-direction:column;
    gap:14px
  }

  .budget-page-header .btn{
    width:100%
  }

  .budget-metrics{
    grid-template-columns:1fr
  }

  .cards-grid{
    grid-template-columns:1fr
  }

  /* Month navigator responsive для mobile */
  .panel-head-with-month-nav{
    grid-template-columns:1fr;
    gap:8px
  }

  .panel-head-left{
    margin-bottom:2px
  }

  .payment-month-navigator{
    justify-self:start;
    order:2
  }

  .panel-head-right{
    justify-self:end;
    flex-wrap:wrap;
    order:3
  }
}

/* ============================================
   DEBT CARDS
   ============================================ */

.debt-card{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--surface);
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:14px;
  transition:transform .15s ease,box-shadow .15s ease
}

.debt-card:hover{
  transform:translateY(-1px);
  box-shadow:var(--shadow-sm)
}

.debt-card-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px
}

.debt-card-head h3{
  margin:0;
  font-size:15px;
  font-weight:600;
  color:var(--text);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}

.debt-card-edit{
  width:32px;
  height:32px;
  border:0;
  border-radius:8px;
  background:var(--surface-elevated);
  color:var(--text-muted);
  cursor:pointer;
  display:grid;
  place-items:center;
  transition:all .15s ease;
  flex-shrink:0
}

.debt-card-edit:hover{
  background:var(--surface);
  color:var(--text)
}

.debt-card-edit svg{
  width:16px;
  height:16px
}

.debt-card-amounts{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px
}

.debt-amount-item{
  display:flex;
  flex-direction:column;
  gap:4px
}

.debt-amount-item span{
  font-size:10px;
  color:var(--text-muted);
  text-transform:uppercase;
  letter-spacing:.3px
}

.debt-amount-item strong{
  font-size:14px;
  font-weight:600;
  color:var(--text)
}

.debt-amount-paid{
  color:var(--green)!important
}

.debt-amount-success{
  color:var(--green)!important
}

.debt-amount-danger{
  color:var(--red)!important
}

.debt-card-progress{
  display:flex;
  align-items:center;
  gap:12px
}

.debt-progress-bar{
  flex:1;
  height:6px;
  background:var(--progress-track-bg);
  border:1px solid var(--progress-track-border);
  border-radius:3px;
  overflow:hidden
}

.debt-progress-fill{
  height:100%;
  border-radius:3px;
  background:var(--blue);
  transition:width .3s ease
}

.debt-progress-fill-paid{
  background:var(--green)!important
}

.debt-progress-fill-overdue{
  background:var(--red)!important
}

.debt-progress-percent{
  font-size:12px;
  font-weight:600;
  color:var(--text);
  min-width:36px;
  text-align:right
}

.debt-card-footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-top:10px;
  border-top:1px solid var(--line);
  gap:12px
}

.debt-card-meta{
  display:flex;
  align-items:center;
  gap:8px;
  flex:1;
  min-width:0
}

.debt-due-date{
  display:flex;
  align-items:center;
  gap:4px;
  font-size:11px;
  color:var(--text-muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}

.debt-due-date svg{
  flex-shrink:0;
  width:12px;
  height:12px
}

.debt-status{
  padding:4px 10px;
  border-radius:12px;
  font-size:10px;
  font-weight:600;
  white-space:nowrap;
  flex-shrink:0
}

.debt-status-paid{
  background:var(--green-soft);
  color:var(--green)
}

.debt-status-overdue{
  background:var(--red-soft);
  color:var(--red)
}

.debt-card-actions{
  display:flex;
  gap:6px;
  flex-shrink:0
}

.debt-action-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  height:32px;
  padding:0 12px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--surface-elevated);
  color:var(--text);
  font-size:11px;
  font-weight:500;
  cursor:pointer;
  transition:all .15s ease
}

.debt-action-btn:hover:not(:disabled){
  background:var(--surface);
  border-color:var(--primary)
}

.debt-action-btn:disabled{
  opacity:.5;
  cursor:not-allowed
}

.debt-action-btn svg{
  width:14px;
  height:14px
}

.debt-action-delete{
  color:var(--red)
}

.debt-action-delete:hover{
  background:var(--red-soft)!important;
  border-color:var(--red)!important
}

.data-card{
  position:relative;
  min-height:165px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px;
  background:var(--surface)
}

.data-card-head{
  display:flex;
  justify-content:space-between;
  gap:10px
}

.data-card h3{
  margin:0;
  font-size:14px
}

.data-card p{
  margin:5px 0 0;
  color:#838b9d;
  font-size:10px
}

.card-menu{
  border:0;
  background:transparent;
  color:#788195;
  font-size:20px
}

.card-amount{
  display:flex;
  justify-content:space-between;
  align-items:end;
  margin:22px 0 9px
}

.card-amount strong{font-size:18px}

.card-amount span{
  color:#7a8395;
  font-size:10px
}

.progress{
  height:8px;
  border-radius:8px;
  overflow:hidden;
  background:#edf0f4
}

.progress i{
  display:block;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#7561d5,#a18fe7)
}

.progress.warning i{
  background:linear-gradient(90deg,#edac47,#df7e32)
}

.progress.danger i{
  background:linear-gradient(90deg,#ef737e,#d94758)
}

.card-footer{
  display:flex;
  justify-content:space-between;
  margin-top:8px;
  color:#81899a;
  font-size:9px
}

.empty-state{
  text-align:center;
  padding:45px 20px;
  color:#7f8799
}

.empty-state>span{
  width:50px;
  height:50px;
  display:grid;
  place-items:center;
  margin:0 auto 10px;
  border-radius:15px;
  background:#f0edff;
  color:#6b57cb;
  font-size:24px
}

.empty-state h3{
  margin:0 0 7px;
  color:#3b4458;
  font-size:14px
}

.empty-state p{
  margin:0;
  font-size:11px
}

.timeline{display:grid}

.timeline-row{
  display:grid;
  grid-template-columns:25px 1fr auto;
  gap:10px;
  min-height:55px
}

.timeline-dot{
  position:relative;
  width:9px;
  height:9px;
  margin:5px auto 0;
  border-radius:50%;
  background:#806dda
}

.timeline-dot::after{
  content:"";
  position:absolute;
  width:1px;
  height:45px;
  top:10px;
  left:4px;
  background:#e2e4eb
}

.timeline-row:last-child .timeline-dot::after{
  display:none
}

.timeline-copy strong,
.timeline-copy small{
  display:block
}

.timeline-copy strong{font-size:11px}

.timeline-copy small{
  margin-top:4px;
  color:#8991a3;
  font-size:9px
}

.timeline-time{
  color:#8b93a5;
  font-size:9px
}

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

.stack-form{display:grid}

.segmented{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5px;
  padding:4px;
  margin-bottom:16px;
  border-radius:9px;
  background:#f0f1f5
}

.segmented label{margin:0}

.segmented input{
  position:absolute;
  opacity:0
}

.segmented span{
  height:36px;
  display:grid;
  place-items:center;
  border-radius:7px;
  color:#6e778a;
  font-size:11px;
  cursor:pointer
}

.segmented input:checked+span{
  background:#fff;
  color:var(--primary);
  box-shadow:0 3px 10px rgba(30,36,55,.08)
}

/* Радио скрыто (opacity:0) - кольцо фокуса показываем на соседней кнопке */
.segmented input:focus-visible+span{
  box-shadow:inset 0 0 0 2px var(--primary),0 3px 10px rgba(30,36,55,.08)
}

.switch-row{
  grid-template-columns:1fr auto!important;
  align-items:center
}

.switch-row span strong,
.switch-row span small{
  display:block
}

.switch-row span small{
  margin-top:3px;
  color:#8991a2;
  font-weight:400
}

.switch-row input{
  width:19px;
  height:19px;
  accent-color:var(--primary)
}

.form-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:5px
}

.modal-backdrop,
.confirm-backdrop{
  position:fixed;
  inset:0;
  z-index:100;
  display:grid;
  place-items:center;
  padding:22px;
  background:rgba(24,29,45,.48);
  backdrop-filter:blur(3px)
}

.modal{
  position:relative;
  width:min(490px,100%);
  max-height:calc(100vh - 44px);
  overflow-y:auto;
  border-radius:12px;
  padding:24px;
  background:var(--surface);
  box-shadow:0 12px 35px rgba(23,28,46,.15)
}

.modal.small{
  width:min(420px,100%)
}

.modal h2{
  margin:0 0 20px;
  font-size:19px
}

.modal-close{
  position:absolute;
  right:12px;
  top:10px;
  width:35px;
  height:35px;
  border:0;
  background:transparent;
  color:#737c90;
  font-size:25px
}

.confirm-card{
  width:min(390px,100%);
  border-radius:12px;
  padding:23px;
  background:var(--surface);
  box-shadow:var(--shadow)
}

.confirm-card h2{
  margin:0 0 9px;
  font-size:18px
}

.confirm-card p{
  margin:0 0 20px;
  color:#747d90;
  line-height:1.5
}

.toast{
  position:fixed;
  z-index:150;
  left:50%;
  bottom:25px;
  transform:translate(-50%,25px);
  max-width:min(420px,90vw);
  border-radius:9px;
  padding:11px 16px;
  background:#242b3e;
  color:#fff;
  box-shadow:var(--shadow);
  opacity:0;
  pointer-events:none;
  transition:.2s
}

.toast.show{
  transform:translate(-50%,0);
  opacity:1
}

.mobile-menu,
.sidebar-overlay{
  display:none
}

.nav-item>span.nav-purple{
  background:rgba(105,149,229,0.15);
  color:#6995E5
}

.nav-item>span.nav-green{
  background:rgba(54,170,112,0.15);
  color:#9AA5B3
}

.nav-item>span.nav-amber{
  background:rgba(232,168,61,0.15);
  color:#9AA5B3
}

.nav-item>span.nav-rose{
  background:rgba(233,101,101,0.15);
  color:#9AA5B3
}

.nav-item>span.nav-violet{
  background:rgba(138,146,163,0.15);
  color:#9AA5B3
}

.nav-item>span.nav-blue{
  background:rgba(93,153,209,0.15);
  color:#9AA5B3
}

.nav-item>span.nav-teal{
  background:rgba(77,169,160,0.15);
  color:#9AA5B3
}

.nav-item>span.nav-slate{
  background:rgba(138,146,163,0.15);
  color:#9AA5B3
}

.nav-item>span.nav-gray{
  background:rgba(138,146,163,0.15);
  color:#9AA5B3
}

.nav-item.active>span.nav-purple{
  background:rgba(105,149,229,0.25);
  color:#6995E5
}

.nav-item.active>span.nav-green{
  background:rgba(105,149,229,0.25);
  color:#6995E5
}

.nav-item.active>span.nav-amber{
  background:rgba(105,149,229,0.25);
  color:#6995E5
}

.nav-item.active>span.nav-rose{
  background:rgba(105,149,229,0.25);
  color:#6995E5
}

.nav-item.active>span.nav-violet{
  background:rgba(105,149,229,0.25);
  color:#6995E5
}

.nav-item.active>span.nav-blue{
  background:rgba(105,149,229,0.25);
  color:#6995E5
}

.nav-item.active>span.nav-teal{
  background:rgba(105,149,229,0.25);
  color:#6995E5
}

.nav-item.active>span.nav-slate{
  background:rgba(105,149,229,0.25);
  color:#6995E5
}

.nav-item.active>span.nav-gray{
  background:rgba(105,149,229,0.25);
  color:#6995E5
}

.daily-tip{
  margin:16px 5px 10px;
  padding:12px;
  border:1px solid rgba(255,255,255,0.06);
  border-radius:11px;
  background:rgba(255,255,255,0.03);
  color:#9AA5B3
}

.daily-tip-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:11px;
  color:#9AA5B3
}

.daily-tip-head strong{color:#9AA5B3}

.daily-tip-head span{
  color:#E8A83D
}

.daily-tip p{
  margin:8px 0 0;
  color:#9AA5B3;
  font-size:10px;
  line-height:1.5
}


.category-row span:last-child{
  text-align:right
}

.category-row span:last-child small{
  margin-left:4px;
  color:#8b92a3;
  font-weight:600
}

.budget-overview{
  display:grid;
  gap:14px
}

.budget-overview-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:#697286;
  font-size:11px
}

.budget-overview-row strong{
  color:#283146;
  font-size:13px
}

.budget-overview-row strong.positive{
  color:var(--green)
}

.budget-overview-row strong.negative{
  color:var(--red)
}

.budget-message{
  margin-top:3px;
  padding:11px;
  border-radius:9px;
  background:var(--green-soft);
  color:#267c51;
  font-size:10px;
  line-height:1.45
}

.budget-message.warning{
  background:var(--amber-soft);
  color:#a66b15
}

.budget-message.danger{
  background:var(--red-soft);
  color:#b83f4e
}

.empty-inline{
  display:grid;
  place-items:center;
  min-height:145px;
  padding:20px;
  border:1px dashed #dfe3ec;
  border-radius:10px;
  color:#7d8597;
  text-align:center
}

.empty-inline p{
  margin:0;
  max-width:280px;
  font-size:11px;
  line-height:1.55
}

/* ============================================
   OVERVIEW CAROUSELS (Цели / Кредиты)
   Компактные горизонтальные карусели вместо вертикального списка.
   Прокрутка нативная со scroll-snap, но без видимого скроллбара;
   навигация постраничная (страница = visibleCount карточек):
   стрелки в header + edge-стрелка Next + dots-пагинация под карточками.
   ============================================ */

.overview-carousel-title{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0
}

.overview-carousel-icon{
  flex:0 0 28px;
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  background:var(--surface-elevated);
  border:1px solid var(--line);
  border-radius:8px;
  color:var(--text);
  font-size:14px
}

/* Подпись «X из N целей/кредитов» под заголовком карусели */
.overview-carousel-count{
  margin:3px 0 0;
  font-size:11px;
  color:var(--text-muted);
  line-height:1.3
}

.overview-carousel-controls{
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0
}

/* Header-стрелки: крупные square-кнопки с outline-chevron.
   Hover - чуть ярче border, светлее фон, ярче иконка,
   слабый blue-акцент. Без glow/scale/transform. */
.carousel-arrows{
  display:flex;
  gap:6px
}

.carousel-arrow{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  padding:0;
  border:1px solid var(--line);
  background:var(--surface-elevated);
  border-radius:10px;
  color:var(--text-muted);
  line-height:1;
  cursor:pointer;
  transition:color .15s ease, border-color .15s ease, background .15s ease
}

.carousel-arrow svg{
  width:20px;
  height:20px
}

.carousel-arrow:hover:not(:disabled){
  color:var(--text);
  background:color-mix(in srgb,var(--primary) 7%,var(--surface-elevated));
  border-color:color-mix(in srgb,var(--primary) 45%,var(--line))
}

/* Disabled: приглушено, hover не меняет состояние, cursor default */
.carousel-arrow:disabled{
  opacity:.4;
  cursor:default
}

/* Обёртка viewport - относительно неё позиционируется edge-стрелка */
.carousel-body{
  position:relative
}

/* Edge next arrow: крупная круглая кнопка у правого края карусели,
   по центру высоты карточек. Наполовину выступает за viewport
   (в пределах padding панели - без горизонтального overflow страницы).
   Показывается только когда есть следующая страница. */
.carousel-edge-next{
  position:absolute;
  top:50%;
  right:-22px;
  transform:translateY(-50%);
  z-index:2;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  padding:0;
  border:1px solid color-mix(in srgb,var(--primary) 28%,var(--line));
  background:var(--surface-elevated);
  border-radius:50%;
  color:var(--text);
  box-shadow:var(--shadow-sm);
  cursor:pointer;
  transition:color .15s ease, border-color .15s ease, background .15s ease
}

.carousel-edge-next svg{
  width:22px;
  height:22px
}

.carousel-edge-next:hover{
  background:color-mix(in srgb,var(--primary) 10%,var(--surface-elevated));
  border-color:color-mix(in srgb,var(--primary) 55%,var(--line))
}

/* Safe padding: пока edge-стрелка видна, держим правый край карточек
   свободным - она не закрывает суммы, прогресс и процент */
.carousel-body.has-edge-nav .overview-carousel-card{
  padding-right:16px
}

/* Viewport: нативная горизонтальная прокрутка без скроллбара + snap */
.carousel-viewport{
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch
}

.carousel-viewport::-webkit-scrollbar{
  display:none
}

/* Трек: число видимых карточек задаёт --carousel-visible,
   ширина карточки считается от него - без фиксированных пикселей */
.carousel-track{
  --carousel-visible:3;
  --carousel-gap:10px;
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:calc((100% - (var(--carousel-visible) - 1) * var(--carousel-gap)) / var(--carousel-visible));
  gap:var(--carousel-gap)
}

.carousel-track > *{
  scroll-snap-align:start
}

/* Dots: пагинация по страницам карусели (не по карточкам),
   кликабельные кнопки. Active - яркий primary, остальные - muted blue-gray */
.carousel-dots{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:9px;
  margin-top:10px
}

.carousel-dot{
  width:7px;
  height:7px;
  padding:0;
  border:0;
  border-radius:50%;
  background:color-mix(in srgb,var(--primary) 24%,var(--line));
  cursor:pointer;
  transition:background .15s ease
}

.carousel-dot:hover{
  background:color-mix(in srgb,var(--primary) 45%,var(--line))
}

.carousel-dot.active{
  width:9px;
  height:9px;
  background:var(--primary)
}

/* Компактная карточка (цель или кредит): тёмный inner surface,
   тонкий бордер, лёгкий hover без transform */
.overview-carousel-card{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
  padding:10px;
  background:var(--surface-inner);
  border:1px solid var(--line);
  border-radius:8px;
  transition:border-color .15s ease, background .15s ease
}

.overview-carousel-card:hover{
  border-color:color-mix(in srgb,var(--text) 22%,var(--line));
  background:color-mix(in srgb,var(--surface-elevated) 40%,var(--surface-inner))
}

/* Карточка цели (is-goal): чуть более elevated surface, чем панель,
   чтобы карточки не сливались с фоном; muted-акцент берётся из
   детерминированного класса goal-accent-* (см. goalAccentClass).
   Кредитные карточки (без is-goal) остаются в прежнем виде. */
.overview-carousel-card.is-goal{
  --card-accent:var(--text-muted);
  gap:8px;
  padding:12px;
  background:var(--surface-elevated)
}

.overview-carousel-card.goal-accent-amber{--card-accent:var(--amber)}
.overview-carousel-card.goal-accent-green{--card-accent:var(--green)}
.overview-carousel-card.goal-accent-violet{--card-accent:var(--violet)}
.overview-carousel-card.goal-accent-blue{--card-accent:var(--blue)}

/* Иконка/фото-фолбэк: мягкий tint акцента, без glow */
.overview-carousel-card.is-goal .overview-card-icon{
  border-radius:10px;
  color:var(--card-accent);
  background:color-mix(in srgb,var(--card-accent) 10%,var(--surface-elevated));
  border:1px solid color-mix(in srgb,var(--card-accent) 20%,transparent)
}

.overview-card-head{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0
}

/* Иконка/фото 48px: квадрат, cover, скругление 8px */
.overview-card-icon{
  flex:0 0 48px;
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  background:var(--surface-elevated);
  border-radius:8px;
  color:var(--text);
  font-size:18px
}

.overview-card-icon svg{
  width:20px;
  height:20px
}

/* Фото цели в обзорной карточке: 48px вместо 56px */
.overview-carousel-card .goal-visual{
  flex-basis:48px;
  width:48px;
  height:48px
}

.overview-card-title{
  display:flex;
  align-items:center;
  gap:4px;
  flex:1 1 auto;
  min-width:0
}

.overview-card-name{
  margin:0;
  flex:0 1 auto;
  min-width:0;
  font-size:12px;
  font-weight:600;
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}

/* Название цели - самый заметный текст карточки */
.overview-carousel-card.is-goal .overview-card-name{
  font-size:13px
}

.overview-card-amounts{
  font-size:11px;
  color:var(--text-muted)
}

/* Сумма цели по краям строки: накопленная - ярче слева, целевая - muted справа */
.overview-carousel-card.is-goal .overview-card-amounts{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:6px;
  font-size:13px
}

.overview-card-amount-current{
  font-weight:700;
  color:var(--text);
  white-space:nowrap
}

.overview-card-amount-target{
  font-weight:500;
  color:var(--text-muted);
  white-space:nowrap
}

.overview-card-date{
  display:flex;
  align-items:center;
  gap:4px;
  font-size:10px;
  color:var(--text-muted);
  white-space:nowrap
}

.overview-card-date .task-meta-icon{
  width:11px;
  height:11px;
  opacity:.7
}

/* Просрочено: только приглушённая красная дата, карточку не красим */
.overview-card-date.is-overdue{
  color:var(--red)
}

/* Финансовый блок цели прижат кверху: суммы + прогресс идут сразу после
   header, а не растягиваются до низа карточки */
.overview-carousel-card.is-goal .overview-card-progress{
  margin-top:0
}

/* Meta-зона цели (вариант №3): за тонким separator-ом срок и статус дедлайна
   отдельными строками. margin-top:auto прижимает зону к низу - separator
   и строки meta выровнены по горизонтали во всех карточках ряда */
.overview-card-meta{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:4px;
  margin-top:auto;
  padding-top:8px;
  border-top:1px solid var(--line);
  min-width:0
}

/* Строка meta-зоны: muted label слева (иконка + текст), значение справа.
   min-height держит место второй строки у цели без даты - высоты равны */
.overview-card-meta-row{
  display:flex;
  align-items:center;
  gap:5px;
  min-height:20px;
  min-width:0;
  font-size:11px
}

.overview-card-meta-row .task-meta-icon{
  width:12px;
  height:12px;
  opacity:.7
}

/* Label («Срок», «Осталось») тише значения; само значение - muted blue-gray */
.overview-card-meta-label{
  color:color-mix(in srgb,var(--text-muted) 78%,transparent);
  white-space:nowrap
}

.overview-card-meta-value{
  margin-left:auto;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--text-muted)
}

/* Компактный pill статуса дедлайна: прижат к правому краю строки,
   нейтральный по умолчанию; семантические тона - те же muted task-токены,
   что у задач */
.overview-card-days{
  flex:0 0 auto;
  margin-left:auto;
  max-width:100%;
  padding:2px 8px;
  border:1px solid var(--task-neutral-border);
  border-radius:999px;
  overflow:hidden;
  font-size:10px;
  font-weight:500;
  line-height:1.4;
  white-space:nowrap;
  text-overflow:ellipsis;
  color:var(--task-neutral);
  background:var(--task-neutral-bg)
}

.overview-card-days.is-blue{
  color:var(--task-blue);
  background:var(--task-blue-bg);
  border-color:var(--task-blue-border)
}

.overview-card-days.is-amber{
  color:var(--task-amber);
  background:var(--task-amber-bg);
  border-color:var(--task-amber-border)
}

.overview-card-days.is-red{
  color:var(--task-red);
  background:var(--task-red-bg);
  border-color:var(--task-red-border)
}

.overview-card-days.is-green{
  color:var(--task-green);
  background:var(--task-green-bg);
  border-color:var(--task-green-border)
}

/* Компактный прогресс: тонкий бар + процент справа */
.overview-card-progress{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:auto
}

.overview-card-bar{
  flex:1;
  height:4px;
  background:var(--progress-track-bg);
  border:1px solid var(--progress-track-border);
  border-radius:2px;
  overflow:hidden
}

.overview-card-fill{
  height:100%;
  background:var(--primary);
  border-radius:2px;
  transition:width .3s ease
}

/* Fill цели - muted blue вместо яркого primary;
   зелёный is-done (правило ниже) перекрывает его */
.overview-carousel-card.is-goal:not(.is-done) .overview-card-fill{
  background:var(--progress-blue)
}

.overview-card-fill.is-paid{
  background:var(--green)
}

.overview-card-percent{
  flex-shrink:0;
  min-width:32px;
  text-align:right;
  font-size:11px;
  font-weight:600;
  color:var(--text)
}

.overview-card-percent.is-paid{
  color:var(--green)
}

/* Достигнутая цель: зелёный акцент прогресса,
   как у выплаченного кредита */
.overview-carousel-card.is-done .overview-card-fill{
  background:var(--green)
}

.overview-carousel-card.is-done .overview-card-percent{
  color:var(--green)
}

/* Пустое состояние внутри обзорной панели */
.overview-carousel-empty{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  padding:18px 10px;
  text-align:center
}

.overview-carousel-empty p{
  margin:0;
  font-size:11px;
  color:var(--text-muted)
}

/* display:flex классов не даёт [hidden] работать - выключаем явно */
.carousel-dots[hidden],
.carousel-arrows[hidden],
.carousel-edge-next[hidden],
.overview-carousel-empty[hidden]{
  display:none
}

/* ============================================
   Единая визуальная логика фото/ссылки цели -
   Overview и страница «Цели»:
   есть image_data → фото (.goal-visual), нет → обычная иконка;
   есть link_url → маленькая внешняя ссылка (.goal-link), нет → ничего.
   Повреждённое фото (goal-visual-failed) подменяется иконкой.
   ============================================ */

.goal-visual{
  position:relative;
  flex:0 0 56px;
  width:56px;
  height:56px
}

/* На странице «Цели» превью немного крупнее, чем на Overview */
.goal-card-header-left .goal-visual{
  flex-basis:80px;
  width:80px;
  height:80px
}

.goal-photo{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:10px;
  border:1px solid var(--line);
  background:var(--surface-elevated)
}

/* Иконка внутри .goal-visual видна только когда фото не загрузилось
   (goal-card-icon - страница «Цели», overview-card-icon - Overview) */
.goal-visual .goal-card-icon,
.goal-visual .overview-card-icon{
  display:none;
  position:absolute;
  inset:0;
  margin:auto
}

.goal-visual.goal-visual-failed .goal-photo{
  display:none
}

.goal-visual.goal-visual-failed .goal-card-icon,
.goal-visual.goal-visual-failed .overview-card-icon{
  display:grid
}

/* Внешняя ссылка цели: маленькая secondary-иконка рядом с названием,
   не акцентная кнопка; кликабельна только иконка */
.goal-link{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:20px;
  color:var(--text-muted);
  border-radius:4px
}

.goal-link svg{
  width:12px;
  height:12px
}

.goal-link:hover,
.goal-link:focus-visible{
  color:var(--text);
  background:var(--surface-elevated)
}

/* Компактная карточка цели/кредита рендерится в overview-carousel-card
   (см. секцию OVERVIEW CAROUSELS выше) - прежние .goal-row,
   .goal-circular-progress и связанные правила удалены вместе с ним */

.analytics-chart{
  height:430px;
  position:relative
}

/* Графитовая сетка для dark theme */
.chart-bars{
  border-bottom-color:var(--line);
  background:repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 44px,
    var(--line) 45px,
    var(--line) 45px,
    transparent 46px
  )
}

/* Muted оси для dark theme */
.chart-axis{
  color:var(--text-muted);
  font-size:9px
}

/* Chart bars без glow */
.chart-bar{
  filter:none
}

.chart-bar.income{
  background:linear-gradient(#5bc182,#36a968)
}

.chart-bar.expense{
  background:linear-gradient(#f07a84,#df5261)
}

/* Chart labels */
.chart-label{
  color:var(--text-muted);
  font-size:9px
}

.month-history-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:15px
}

.month-card{
  display:grid;
  gap:11px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:17px;
  background:var(--surface);
  color:var(--text);
  text-align:left;
  box-shadow:0 2px 4px rgba(30,36,58,.02);
  transition:.15s
}

.month-card:hover{
  transform:translateY(-1px);
  border-color:var(--primary);
  box-shadow:var(--shadow-sm)
}

.month-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:8px;
  padding-bottom:8px;
  border-bottom:1px solid #eef0f4
}

.month-card-head strong{
  text-transform:capitalize
}

.month-card-head span{
  color:#8b92a3;
  font-size:9px
}

.month-card>div:not(.month-card-head){
  display:flex;
  justify-content:space-between;
  gap:10px;
  color:#737c90;
  font-size:10px
}

.month-card>div strong{
  font-size:11px
}

.month-card>small{
  margin-top:3px;
  color:var(--primary);
  font-size:9px;
  font-weight:700
}

@media(max-width:1200px){
  .topbar{
    grid-template-columns:1fr auto
  }

  .period-control{
    grid-row:2;
    grid-column:1/3;
    justify-self:start
  }

  .top-actions{
    grid-column:2;
    grid-row:1
  }

  .stats-grid{
    grid-template-columns:repeat(2,1fr)
  }

  /* Overview grids except lower - use 1 column on tablet */
  .overview-grid:not(.lower){
    grid-template-columns:1fr
  }

  /* Keep lower grid as 2 columns on tablet with new proportions */
  .overview-grid.lower{
    grid-template-columns:repeat(2, minmax(0, 1fr))
  }

  /* Средний desktop/tablet: 2 карточки в каруселях */
  .overview-grid.lower .carousel-track{
    --carousel-visible:2
  }

  /* В узкой правой ячейке сводка уходит под список задач */
  .plans-overview-layout{
    grid-template-columns:1fr
  }

  .cards-grid,
  .settings-grid{
    grid-template-columns:repeat(2,1fr)
  }

  .month-history-grid{
    grid-template-columns:repeat(2,1fr)
  }
}

/* Switch lower grid to 1 column on smaller desktop */
@media(max-width:1100px){
  .overview-grid.lower{
    grid-template-columns:1fr
  }
}

/* На широких экранах задачи в правой ячейке ряда 4 идут в одну колонку
   (2 колонки возвращаются на <=1100px, где панель стала полноширинной) */
@media (min-width:1101px){
  .overview-grid.lower .tasks-grid{
    grid-template-columns:1fr
  }
}

/* ============================================
   ANALYTICS PAGE STYLES
   ============================================ */

/* Analytics Content Wrapper - provides vertical rhythm */
.analytics-content{
  display:flex;
  flex-direction:column;
  gap:16px;
  min-width:0
}

/* Analytics Summary Grid */
.analytics-summary-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px
}

@media (max-width:1024px){
  .analytics-summary-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}

@media (max-width:600px){
  .analytics-summary-grid{
    grid-template-columns:1fr
  }
}

/* Analytics Summary Card */
.analytics-summary-card{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--surface);
  padding:16px 18px;
  min-height:90px;
  height:auto;
  display:flex;
  flex-direction:column;
  gap:8px;
  position:relative;
  overflow:hidden
}

.analytics-summary-card::before{
  content:"";
  position:absolute;
  right:0;
  bottom:0;
  width:50px;
  height:50px;
  background:currentColor;
  opacity:.1;
  pointer-events:none;
  border-radius:100% 0 0 0;
  transform:translate(30%,30%)
}

.analytics-summary-card.income{
  color:var(--green)
}

.analytics-summary-card.income .summary-value{
  color:var(--green)
}

.analytics-summary-card.expense{
  color:var(--red)
}

.analytics-summary-card.expense .summary-value{
  color:var(--red)
}

.analytics-summary-card.saved{
  color:var(--blue)
}

.analytics-summary-card.saved .summary-value{
  color:var(--blue)
}

.analytics-summary-card.average{
  color:var(--amber)
}

.analytics-summary-card.average .summary-value{
  color:var(--amber)
}

.summary-label{
  font-size:10px;
  font-weight:700;
  letter-spacing:.8px;
  text-transform:uppercase;
  color:var(--text-muted);
  margin:0
}

.summary-value{
  font-size:22px;
  font-weight:600;
  color:var(--text);
  line-height:1.2
}

.summary-comparison{
  font-size:11px;
  color:var(--text-muted);
  display:flex;
  align-items:center;
  gap:4px
}

.summary-comparison.positive{
  color:var(--green)
}

.summary-comparison.negative{
  color:var(--red)
}

/* Analytics Main Grid - Chart + Expense Structure (60% / 40%) */
.analytics-main-grid{
  display:grid;
  grid-template-columns:minmax(0,3fr) minmax(360px,2fr);
  gap:16px;
  align-items:stretch
}

/* Analytics Secondary Grid - Budgets + Top Expenses (50% / 50%) */
.analytics-secondary-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  align-items:stretch
}

@media (max-width:1279px){
  .analytics-main-grid{
    grid-template-columns:1fr
  }
}

@media (max-width:1024px){
  .analytics-secondary-grid{
    grid-template-columns:1fr
  }
}

/* Analytics Panel */
.analytics-panel{
  min-height:auto;
  padding:18px 20px
}

/* Analytics Category Chart */
.analytics-category-chart{
  min-height:260px;
  display:flex;
  align-items:center;
  gap:24px
}

/* Analytics Budget List */
.analytics-budget-list{
  display:grid;
  gap:10px
}

.analytics-budget-item{
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--surface-elevated);
  display:grid;
  gap:8px;
  border-bottom:1px solid var(--line)
}

.analytics-budget-item:last-child{
  border-bottom:0
}

.analytics-budget-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px
}

.analytics-budget-name{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  font-weight:600;
  color:var(--text)
}

.analytics-budget-name .category-dot{
  width:10px;
  height:10px
}

.analytics-budget-status{
  padding:4px 10px;
  border-radius:12px;
  font-size:10px;
  font-weight:600
}

.analytics-budget-status.status-ok{
  background:var(--green-soft);
  color:var(--green)
}

.analytics-budget-status.status-warning{
  background:var(--amber-soft);
  color:var(--amber)
}

.analytics-budget-status.status-over{
  background:var(--red-soft);
  color:var(--red)
}

.analytics-budget-progress{
  height:6px;
  background:var(--progress-track-bg);
  border:1px solid var(--progress-track-border);
  border-radius:3px;
  overflow:hidden
}

.analytics-budget-progress-fill{
  height:100%;
  border-radius:3px;
  transition:width .3s ease
}

.analytics-budget-progress-fill.status-ok{
  background:var(--green)
}

.analytics-budget-progress-fill.status-warning{
  background:var(--amber)
}

.analytics-budget-progress-fill.status-over{
  background:var(--red)
}

.analytics-budget-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  font-size:11px
}

.analytics-budget-stat{
  display:flex;
  flex-direction:column;
  gap:4px
}

.analytics-budget-stat-label{
  color:var(--text-muted);
  font-size:10px
}

.analytics-budget-stat-value{
  font-weight:600;
  color:var(--text)
}

/* Analytics Top Expenses */
.analytics-top-expenses{
  display:grid;
  gap:0
}

.analytics-expense-item{
  display:grid;
  grid-template-columns:50px minmax(120px,1fr) minmax(140px,1fr) auto;
  align-items:center;
  gap:12px;
  min-height:44px;
  padding:8px 12px;
  border-bottom:1px solid var(--line);
  background:transparent;
  transition:background .15s ease
}

.analytics-expense-item:last-child{
  border-bottom:0
}

.analytics-expense-item:hover{
  background:var(--surface)
}

.analytics-expense-date{
  font-size:11px;
  font-weight:500;
  color:var(--text-muted);
  white-space:nowrap
}

.analytics-expense-info{
  min-width:0;
  display:flex;
  align-items:center;
  gap:8px
}

.analytics-expense-name{
  font-size:12px;
  font-weight:500;
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}

.analytics-expense-category{
  font-size:11px;
  font-weight:500;
  color:var(--text-muted);
  display:flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}

.analytics-expense-category .category-dot{
  width:6px;
  height:6px
}

.analytics-expense-amount{
  font-size:13px;
  font-weight:600;
  color:var(--red);
  white-space:nowrap;
  text-align:right
}

/* Analytics Insights */
.analytics-insights{
  min-height:auto
}

.analytics-insights-list{
  display:grid;
  gap:8px
}

.analytics-insight-item{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:9px;
  background:var(--surface-elevated);
  font-size:13px;
  color:var(--text);
  line-height:1.4
}

.analytics-insight-icon{
  width:20px;
  height:20px;
  flex-shrink:0;
  display:grid;
  place-items:center;
  border-radius:4px;
  background:var(--surface-inner);
  font-size:11px
}

.analytics-insight-icon.insight-income{
  background:var(--green-soft);
  color:var(--green)
}

.analytics-insight-icon.insight-expense{
  background:var(--red-soft);
  color:var(--red)
}

.analytics-insight-icon.insight-warning{
  background:var(--amber-soft);
  color:var(--amber)
}

.analytics-insight-icon.insight-info{
  background:var(--primary-soft);
  color:var(--primary)
}

/* Empty states for analytics sections */
.analytics-empty{
  text-align:center;
  padding:30px 20px;
  color:var(--text-muted)
}

.analytics-empty span{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  margin:0 auto 10px;
  border-radius:10px;
  background:var(--surface-elevated);
  font-size:20px
}

.analytics-empty h3{
  margin:0 0 5px;
  font-size:13px;
  color:var(--text)
}

.analytics-empty p{
  margin:0;
  font-size:11px
}

@media(max-width:760px){
  body{
    font-size:13px
  }

  .sidebar{
    transform:translateX(-100%);
    transition:.2s;
    overflow-y:auto
  }

  .sidebar.open{
    transform:translateX(0)
  }

  .sidebar-overlay{
    position:fixed;
    display:block;
    inset:0;
    z-index:25;
    background:rgba(0,0,0,0.6)
  }

  .mobile-menu{
    position:fixed;
    display:grid;
    place-items:center;
    z-index:20;
    top:14px;
    left:14px;
    width:39px;
    height:39px;
    border:0;
    border-radius:10px;
    background:#1A212B;
    color:#E6EBF2;
    box-shadow:0 4px 12px rgba(0,0,0,0.3);
    font-size:18px
  }

  .main{
    margin-left:0;
    padding:70px 14px 30px
  }

  .topbar{
    display:flex;
    flex-wrap:wrap;
    align-items:center
  }

  .topbar>div:first-child{
    flex:1
  }

  .top-actions{
    width:100%;
    order:3
  }

  .top-actions .btn{
    flex:1
  }

  .period-control{
    order:2
  }

  .period-button{
    min-width:170px
  }

  .period-popover{
    position:fixed;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:min(360px,calc(100vw - 28px))
  }

  .stats-grid,
  .overview-grid.lower,
  .overview-grid.transactions,
  .cards-grid,
  .settings-grid,
  .month-history-grid{
    grid-template-columns:1fr
  }

  /* Mobile: 1 карточка в каруселях */
  .overview-grid.lower .carousel-track{
    --carousel-visible:1
  }

  /* На узких экранах кнопки карусели переносятся под заголовок */
  .overview-grid.lower .panel-head{
    flex-wrap:wrap
  }

  .stat-card{
    min-height:105px
  }

  .toolbar{
    flex-wrap:wrap
  }

  .toolbar .search{
    flex-basis:100%
  }

  .toolbar select{
    flex:1;
    min-width:0
  }

  .toolbar .btn{
    width:100%
  }

  .category-chart{
    flex-direction:column;
    align-items:center
  }

  /* Мобильный Overview «Структура расходов»: stack title -> donut -> categories */
  .expense-structure{
    grid-template-columns:1fr;
    gap:20px;
    justify-items:center
  }

  .expense-chart{
    width:210px;
    height:210px
  }

  .expense-category-list{
    width:100%
  }

  .expense-category-row{
    grid-template-columns:32px minmax(0, 1fr) 88px 40px;
    column-gap:10px
  }

  .expense-category-icon{
    width:32px;
    height:32px;
    border-radius:9px
  }

  .bar-chart,
  .analytics-chart{
    height:260px
  }

  .payment-summary{
    grid-template-columns:1fr
  }

  .section-intro{
    align-items:flex-start;
    gap:12px
  }

  .section-intro .btn{
    white-space:nowrap
  }

  .auth-card{
    grid-template-columns:1fr
  }

  .auth-card::before{
    inset:0 0 54%
  }

  .auth-brand{
    top:24px;
    left:25px
  }

  .auth-copy{
    padding:90px 25px 45px;
    min-height:310px
  }

  .auth-copy h1{
    font-size:31px
  }

  .auth-form{
    grid-column:1;
    padding:38px 25px
  }

  .date-fields,
  .two-columns{
    grid-template-columns:1fr
  }

  .modal{
    padding:22px 18px
  }

  /* Mobile table styles - horizontal scroll only inside table-wrap */
  .table-wrap{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    margin:0 -14px
  }

  /* Compact row adjustments for mobile:
     категория скрывается, остальные колонки сжимаются в одну стабильную сетку */
  .compact-row{
    grid-template-columns:48px minmax(0,1fr) 54px 78px 30px;
    gap:8px;
    min-height:48px;
    font-size:10px
  }

  .compact-row .compact-category{
    display:none
  }

  .compact-date{
    font-size:9px
  }

  .compact-category{
    font-size:10px
  }

  .compact-amount{
    font-size:10px
  }

  .type-badge{
    font-size:8px;
    padding:0 6px;
    min-height:20px
  }
}

/* Override styles that appear after dark theme block */
@media (prefers-color-scheme:dark){
  /* Critical fixes for elements with hardcoded colors */

  /* Stat card small text - important fix */
  .stat-card small{
    color:var(--text-muted)!important
  }

  /* Sidebar background - important fix */
  .sidebar{
    background:var(--sidebar-bg)!important
  }

  /* Auth card background */
  .auth-card{
    background:var(--surface)!important;
    border-color:var(--line)!important
  }

  /* Stat cards */
  .stat-card{
    background:var(--surface)!important
  }

  /* Stat icons */
  .stat-icon{
    background:var(--surface-elevated)!important;
    color:var(--text-muted)!important;
    border-color:var(--line)!important
  }

  /* Buttons */
  .btn-light{
    background:var(--surface-elevated)!important;
    color:var(--text)!important;
    border:1px solid var(--line)!important
  }

  /* Nav items */
  .nav-item{
    color:var(--text-muted)!important
  }

  .nav-item>span{
    background:var(--surface-elevated)!important;
    color:var(--text-muted)!important
  }

  .nav-item:hover{
    background:rgba(88,166,255,.08)!important
  }

  .nav-item.active{
    color:var(--primary)!important
  }

  .nav-item.active>span{
    background:var(--primary)!important;
    color:#fff!important
  }

  /* Icon button */
  .icon-button{
    color:var(--text-muted)!important
  }

  /* Sync state */
  .sync-state{
    color:var(--text-muted)!important
  }

  /* Eyebrow */
  .eyebrow{
    color:var(--text-muted)!important
  }

  /* Section intro */
  .section-intro p{
    color:var(--text-muted)!important
  }

  /* Modal close */
  .modal-close{
    color:var(--text-muted)!important
  }

  /* Brand text */
  .brand h1,
  .brand span{
    color:var(--text)!important
  }

  /* Logo in brand */
  .brand .logo{
    background:rgba(255,255,255,.16)!important;
    color:#fff!important
  }

  /* Stat card amounts */
  .stat-card strong{
    color:var(--text)!important
  }

  .stat-card p{
    color:var(--text-muted)!important
  }

  /* Stat amounts */
  .amount{
    color:var(--text)!important
  }

  .amount.positive{
    color:var(--green)!important
  }

  .amount.negative{
    color:var(--red)!important
  }

  /* Profile copy */
  .profile-copy{
    color:var(--text-muted)!important
  }

  /* Daily tip */
  .daily-tip{
    background:var(--surface)!important;
    border-color:var(--line)!important
  }

  .daily-tip p{
    color:var(--text)!important
  }

  /* Login hint */
  .login-hint{
    color:var(--text-muted)!important;
    background:var(--surface-elevated)!important
  }

  /* Empty state */
  .empty-state{
    color:var(--text-muted)!important
  }

  /* Muted copy */
  .muted-copy{
    color:var(--text-muted)!important
  }

  /* Form labels */
  label{
    color:var(--text)!important
  }

  /* Links */
  a{
    color:var(--primary)!important
  }

  /* Code blocks */
  code{
    background:var(--surface-elevated)!important;
    color:var(--primary)!important
  }

  /* Period button */
  .period-button strong,
  .period-button span{
    color:var(--text)!important
  }

  /* Legend */
  .legend{
    color:var(--text-muted)!important
  }

  /* Confirm card */
  .confirm-card{
    background:var(--surface)!important
  }

  .confirm-card h2{
    color:var(--text)!important
  }

  .confirm-card p{
    color:var(--text-muted)!important
  }

  /* Payments table */
  .payments-table{
    background:var(--surface)!important;
    border-color:var(--line)!important
  }

  /* Panel */
  .panel{
    background:var(--surface)!important;
    border-color:var(--line)!important
  }

  /* Panel head */
  .panel-head h2{
    color:var(--text)!important
  }

  /* Data card */
  .data-card{
    background:var(--surface)!important;
    border-color:var(--line)!important
  }

  /* Data card value */
  .data-card-value{
    color:var(--text)!important
  }

  /* Menu dropdown */
  .menu-dropdown{
    background:var(--surface)!important;
    border-color:var(--line)!important
  }

  /* Mobile menu */
  .mobile-menu{
    background:var(--surface)!important;
    border-color:var(--line)!important
  }

  /* Auth brand */
  .auth-brand span{
    color:var(--text)!important
  }

  /* Auth copy */
  .auth-copy h1{
    color:var(--text)!important
  }

  .auth-copy p{
    color:var(--text-muted)!important
  }

  /* Auth kicker */
  .auth-kicker{
    color:var(--text-muted)!important
  }

  /* Form error */
  .form-error{
    color:var(--red)!important
  }

  /* Global message */
  .global-message{
    background:var(--amber-soft)!important;
    border-color:var(--amber)!important;
    color:var(--amber)!important
  }

  /* Toolbar */
  .toolbar{
    background:var(--surface)!important;
    border-color:var(--line)!important
  }

  /* Toolbar search input */
  .search input{
    background:var(--surface-elevated)!important;
    color:var(--text)!important;
    border-color:var(--line)!important
  }

  /* Quick periods */
  .quick-periods button{
    color:var(--text-muted)!important;
    background:transparent!important
  }

  .quick-periods button:hover{
    background:var(--surface-elevated)!important;
    color:var(--text)!important
  }

  /* Topbar */
  .topbar h1{
    color:var(--text)!important
  }

  /* Sidebar footer */
  .sidebar-footer{
    border-top-color:var(--line)!important
  }

  /* Profile button */
  .profile-button:hover{
    background:var(--surface-elevated)!important
  }

  /* Switch row */
  .switch-row span small{
    color:var(--text-muted)!important
  }

  /* Switch row label */
  .switch-row label{
    color:var(--text)!important
  }

  /* Category row */
  .category-row span:last-child small{
    color:var(--text-muted)!important
  }

  /* Overview goal */
  .overview-goal small{
    color:var(--text-muted)!important
  }

  /* Month card */
  .month-card>small{
    color:var(--text-muted)!important
  }

  /* Category row */
  .category-row span{
    color:var(--text)!important
  }

  /* Compact copy */
  .compact-copy small{
    color:var(--text-muted)!important
  }

  /* Timeline copy */
  .timeline-copy small{
    color:var(--text-muted)!important
  }

  /* Payment summary - critical fix */
  .payment-summary{
    gap:12px!important
  }

  .payment-summary>div{
    background:var(--surface-elevated)!important;
    padding:12px!important;
    border-radius:10px!important
  }

  .payment-summary span{
    color:var(--text-muted)!important;
    font-size:9px!important
  }

  .payment-summary strong{
    color:var(--text)!important;
    margin-top:5px!important;
    font-size:15px!important
  }

  /* Stack form labels */
  .stack-form label,
  .auth-form label,
  .date-fields label{
    color:var(--text)!important;
    font-size:12px!important;
    font-weight:700!important
  }

  /* Input elements in stack forms */
  .stack-form input,
  .auth-form input,
  .date-fields input,
  .stack-form select,
  .stack-form textarea{
    background:var(--surface-elevated)!important;
    color:var(--text)!important;
    border-color:var(--line)!important
  }

  .stack-form input::placeholder,
  .auth-form input::placeholder,
  .date-fields input::placeholder{
    color:var(--text-muted)!important
  }

  .stack-form input:focus,
  .auth-form input:focus,
  .date-fields input:focus,
  .stack-form select:focus,
  .stack-form textarea:focus{
    background:var(--surface)!important;
    border-color:var(--primary)!important;
    box-shadow:0 0 0 3px rgba(88,166,255,.15)!important
  }

  /* Specific IDs for plans */
  #incomePlan,
  #expensePlan{
    background:var(--surface-elevated)!important;
    color:var(--text)!important;
    border-color:var(--line)!important
  }

  #incomePlan:focus,
  #expensePlan:focus{
    background:var(--surface)!important;
    border-color:var(--primary)!important
  }

  /* Empty state panel - ensure it's adapted */
  .empty-state.panel{
    background:var(--surface)!important;
    border-color:var(--line)!important
  }

  .empty-state{
    color:var(--text-muted)!important
  }

  /* Panel elements inside other containers */
  .panel{
    background:var(--surface)!important;
    border-color:var(--line)!important
  }

  /* Panel head */
  .panel-head{
    color:var(--text)!important
  }

  .panel-head h2{
    color:var(--text)!important
  }

  /* Panel content */
  .panel p,
  .panel span,
  .panel div{
    color:var(--text)!important
  }

  /* Settings panel */
  .settings-panel{
    background:var(--surface)!important;
    border-color:var(--line)!important
  }

  /* Form actions */
  .form-actions{
    gap:12px!important
  }

  .form-actions button{
    background:var(--surface-elevated)!important;
    color:var(--text)!important;
    border:1px solid var(--line)!important
  }

  .form-actions .btn-primary{
    background:linear-gradient(90deg,color-mix(in srgb,var(--blue) 82%,#fff),var(--blue))!important;
    color:#fff!important;
    border:none!important
  }

  /* Number inputs styling */
  input[type="number"]{
    background:var(--surface-elevated)!important;
    color:var(--text)!important;
    border-color:var(--line)!important
  }

  input[type="number"]:focus{
    background:var(--surface)!important;
    border-color:var(--primary)!important
  }

  /* Remove spinner from number inputs in dark mode */
  input[type="number"]::-webkit-inner-spin-button,
  input[type="number"]::-webkit-outer-spin-button{
    opacity:0.5
  }

  /* Budgets view specific */
  .budget-card{
    background:var(--surface)!important;
    border-color:var(--line)!important
  }

  .budget-item{
    border-bottom-color:var(--line)!important
  }

  /* Goals view specific */
  .goal-item{
    background:var(--surface)!important;
    border-color:var(--line)!important
  }

  /* Debts view specific */
  .debt-item{
    background:var(--surface)!important;
    border-color:var(--line)!important
  }

  /* Recurring view specific */
  .recurring-item{
    border-color:var(--line)!important
  }

  /* Transaction items */
  .transaction-item{
    border-color:var(--line)!important
  }

  .transaction-item:hover{
    background:var(--surface-elevated)!important
  }

  /* All panels in all views */
  article.panel{
    background:var(--surface)!important;
    border-color:var(--line)!important
  }

  /* Income/expense labels */
  .income-label,
  .expense-label{
    color:var(--text-muted)!important
  }

  /* Value displays */
  .value-display{
    color:var(--text)!important
  }

  .value-display.positive{
    color:var(--green)!important
  }

  .value-display.negative{
    color:var(--red)!important
  }

  /* Search element - critical fix */
  .search{
    background:var(--surface-elevated)!important;
    border-color:var(--line)!important
  }

  .search span{
    color:var(--text-muted)!important
  }

  .search input{
    background:transparent!important;
    color:var(--text)!important;
    border:none!important
  }

  .search input::placeholder{
    color:var(--text-muted)!important
  }

  /* Toolbar select elements - critical fix */
  .toolbar select{
    background:var(--surface-elevated)!important;
    color:var(--text)!important;
    border-color:var(--line)!important
  }

  .toolbar select:focus{
    background:var(--surface)!important;
    border-color:var(--primary)!important;
    box-shadow:0 0 0 3px rgba(88,166,255,.15)!important
  }

  .toolbar select option{
    background:var(--surface)!important;
    color:var(--text)!important
  }

  /* Specific filter IDs */
  #transactionTypeFilter,
  #transactionCategoryFilter{
    background:var(--surface-elevated)!important;
    color:var(--text)!important;
    border-color:var(--line)!important
  }

  #transactionTypeFilter:focus,
  #transactionCategoryFilter:focus{
    background:var(--surface)!important;
    border-color:var(--primary)!important
  }

  /* Number input spinners - critical fix */
  input[type="number"]::-webkit-inner-spin-button,
  input[type="number"]::-webkit-outer-spin-button{
    background:var(--surface-elevated)!important;
    opacity:0.3!important
  }

  input[type="number"]::-webkit-inner-spin-button:hover,
  input[type="number"]::-webkit-outer-spin-button:hover{
    opacity:0.6!important
  }

  input[type="number"]::-webkit-inner-spin-button:active,
  input[type="number"]::-webkit-outer-spin-button:active{
    opacity:0.8!important
  }

  /* Firefox number spinner */
  input[type="number"]{
    -moz-appearance:textfield!important
  }

  input[type="number"]::-webkit-inner-spin-button,
  input[type="number"]::-webkit-outer-spin-button{
    -webkit-appearance:none!important
  }

  /* Icon buttons - if they exist */
  .icon-btn,
  .icon-button{
    background:transparent!important;
    color:var(--text-muted)!important;
    border:none!important
  }

  .icon-btn:hover,
  .icon-button:hover{
    background:var(--surface-elevated)!important;
    color:var(--text)!important
  }

  /* Card head elements */
  .card-head{
    color:var(--text)!important
  }

  .card-head h2,
  .card-head h3{
    color:var(--text)!important
  }

  .card-head p{
    color:var(--text-muted)!important
  }

  /* Switch rows - dark mode adaptation */
  .switch-row{
    background:transparent!important
  }

  .switch-row label{
    color:var(--text)!important
  }

  .switch-row small{
    color:var(--text-muted)!important
  }

  /* Checkbox styling in switch rows */
  .switch-row input[type="checkbox"]{
    appearance:none!important;
    -webkit-appearance:none!important;
    width:44px!important;
    height:24px!important;
    background:var(--surface-elevated)!important;
    border:1px solid var(--line)!important;
    border-radius:12px!important;
    position:relative!important;
    cursor:pointer!important;
    transition:all 0.3s ease!important
  }

  .switch-row input[type="checkbox"]:checked{
    background:var(--primary)!important;
    border-color:var(--primary)!important
  }

  .switch-row input[type="checkbox"]::before{
    content:''!important;
    position:absolute!important;
    width:18px!important;
    height:18px!important;
    background:#fff!important;
    border-radius:50%!important;
    top:2px!important;
    left:3px!important;
    transition:all 0.3s ease!important
  }

  .switch-row input[type="checkbox"]:checked::before{
    left:21px!important
  }

  /* Select dropdown arrow styling */
  select{
    -webkit-appearance:none!important;
    -moz-appearance:none!important;
    appearance:none!important;
    background-image:url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%239CA3AF%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E")!important;
    background-repeat:no-repeat!important;
    background-position:right 10px center!important;
    background-size:10px!important;
    padding-right:30px!important
  }

  /* Table headers dark mode */
  th{
    color:var(--text-muted)!important;
    border-bottom-color:var(--line)!important
  }

  /* Table cells */
  td{
    color:var(--text)!important;
    border-bottom-color:var(--line)!important
  }

  /* All buttons in cards/panels */
  .card button,
  .panel button{
    background:var(--surface-elevated)!important;
    color:var(--text)!important;
    border:1px solid var(--line)!important
  }

  .card button:hover,
  .panel button:hover{
    background:var(--surface)!important
  }

  /* Primary buttons in cards/panels */
  .card .btn-primary,
  .panel .btn-primary{
    background:linear-gradient(90deg,color-mix(in srgb,var(--blue) 82%,#fff),var(--blue))!important;
    color:#fff!important;
    border:none!important
  }

  /* Success buttons in cards/panels */
  .card .btn-success,
  .panel .btn-success{
    background:var(--green)!important;
    color:#fff!important;
    border:none!important
  }

  /* Danger buttons in cards/panels */
  .card .btn-danger,
  .panel .btn-danger{
    background:var(--red)!important;
    color:#fff!important;
    border:none!important
  }

  /* Debt Cards - dark theme */
  .debt-card{
    background:var(--surface)!important;
    border-color:var(--line)!important
  }

  .debt-card-head h3{
    color:var(--text)!important
  }

  .debt-card-edit{
    background:var(--surface-elevated)!important;
    color:var(--text-muted)!important;
    border-color:var(--line)!important
  }

  .debt-card-edit:hover{
    background:var(--surface)!important;
    color:var(--text)!important
  }

  .debt-amount-item span{
    color:var(--text-muted)!important
  }

  .debt-amount-item strong{
    color:var(--text)!important
  }

  .debt-amount-paid,
  .debt-amount-success{
    color:var(--green)!important
  }

  .debt-amount-danger{
    color:var(--red)!important
  }

  .debt-progress-bar{
    background:var(--surface-elevated)!important
  }

  .debt-progress-fill{
    background:var(--blue)!important
  }

  .debt-progress-fill-paid{
    background:var(--green)!important
  }

  .debt-progress-fill-overdue{
    background:var(--red)!important
  }

  .debt-progress-percent{
    color:var(--text)!important
  }

  .debt-due-date{
    color:var(--text-muted)!important
  }

  .debt-due-date svg{
    color:var(--text-muted)!important
  }

  .debt-status-paid{
    background:var(--green-soft)!important;
    color:var(--green)!important
  }

  .debt-status-overdue{
    background:var(--red-soft)!important;
    color:var(--red)!important
  }

  .debt-action-btn{
    background:var(--surface-elevated)!important;
    color:var(--text)!important;
    border-color:var(--line)!important
  }

  .debt-action-btn:hover:not(:disabled){
    background:var(--surface)!important;
    border-color:var(--primary)!important
  }

  .debt-action-delete{
    color:var(--red)!important
  }

  .debt-action-delete:hover{
    background:var(--red-soft)!important;
    border-color:var(--red)!important
  }

  /* Modal windows - critical fix */
  .modal{
    background:var(--surface)!important;
    border:1px solid var(--line)!important;
    box-shadow:var(--shadow-lg)!important
  }

  .modal.small{
    background:var(--surface)!important;
    border:1px solid var(--line)!important
  }

  .modal h2,
  .modal h3,
  .modal h4{
    color:var(--text)!important
  }

  .modal h2#transactionModalTitle{
    color:var(--text)!important
  }

  /* Modal close button */
  .modal-close{
    color:var(--text-muted)!important;
    background:transparent!important
  }

  .modal-close:hover{
    color:var(--text)!important;
    background:var(--surface-elevated)!important
  }

  /* Modal backdrop */
  .modal-backdrop{
    background:rgba(0,0,0,.7)!important;
    backdrop-filter:blur(4px)!important
  }

  /* Forms inside modals */
  .modal .stack-form label,
  .modal .auth-form label,
  .modal .date-fields label{
    color:var(--text)!important
  }

  .modal .stack-form input,
  .modal .stack-form select,
  .modal .stack-form textarea,
  .modal .auth-form input,
  .modal .date-fields input{
    background:var(--surface-elevated)!important;
    color:var(--text)!important;
    border-color:var(--line)!important
  }

  .modal .stack-form input:focus,
  .modal .stack-form select:focus,
  .modal .stack-form textarea:focus{
    background:var(--surface)!important;
    border-color:var(--primary)!important;
    box-shadow:0 0 0 3px rgba(88,166,255,.15)!important
  }

  /* Segmented controls in modals */
  .modal .segmented{
    background:var(--surface-elevated)!important;
    border-color:var(--line)!important
  }

  .modal .segmented label{
    color:var(--text-muted)!important
  }

  .modal .segmented input:checked+span{
    background:var(--surface)!important;
    color:var(--primary)!important;
    box-shadow:0 2px 8px rgba(0,0,0,.3)!important
  }

  /* Form actions in modals */
  .modal .form-actions{
    gap:12px!important
  }

  .modal .form-actions .btn{
    background:var(--surface-elevated)!important;
    color:var(--text)!important;
    border:1px solid var(--line)!important
  }

  .modal .form-actions .btn-primary{
    background:linear-gradient(90deg,color-mix(in srgb,var(--blue) 82%,#fff),var(--blue))!important;
    color:#fff!important;
    border:none!important
  }

  .modal .form-actions .btn-success{
    background:var(--green)!important;
    color:#fff!important;
    border:none!important
  }

  .modal .form-actions .btn-danger{
    background:var(--red)!important;
    color:#fff!important;
    border:none!important
  }

  /* Form error messages in modals */
  .modal .form-error{
    color:var(--red)!important;
    background:var(--red-soft)!important
  }

  /* Two columns layout in modals */
  .modal .two-columns{
    gap:20px!important
  }

  /* Labels in modals */
  .modal label{
    color:var(--text)!important
  }

  .modal label strong{
    color:var(--text)!important
  }

  /* Placeholders in modals */
  .modal input::placeholder,
  .modal textarea::placeholder{
    color:var(--text-muted)!important
  }

  /* Required field indicators */
  .modal input[required]{
    border-color:var(--line)!important
  }

  .modal input[required]:focus{
    border-color:var(--primary)!important
  }

  /* Select dropdowns in modals */
  .modal select{
    background:var(--surface-elevated)!important;
    color:var(--text)!important;
    border-color:var(--line)!important
  }

  .modal select option{
    background:var(--surface)!important;
    color:var(--text)!important
  }

  /* Hidden inputs shouldn't be styled */
  .modal input[type="hidden"]{
    background:transparent!important;
    border:none!important
  }

  /* Form error fix - no red bar when empty */
  .form-error{
    min-height:16px!important;
    margin:0 0 8px!important;
    color:var(--red)!important;
    font-size:11px!important
  }

  .form-error:empty{
    display:none!important
  }

  /* Modal scrollbar removal - fit to content */
  .modal{
    max-height:none!important;
    overflow-y:visible!important
  }

  /* Donut total amount - dark theme readable */
  strong#donutTotal,
  strong#balanceAmount{
    color:var(--text)!important;
    font-weight:900!important;
    font-size:24px!important
  }

  /* Donut span labels - dark theme readable */
  #donut > div > span,
  #balanceDonut > div > span{
    color:var(--text-muted)!important;
    font-size:9px!important
  }

  /* Additional specificity for donut elements */
  #donut > div > strong#donutTotal,
  #balanceDonut > div > strong#balanceAmount{
    color:var(--text)!important;
    font-weight:900!important;
    font-size:24px!important
  }

  /* Ensure donut spans also have the color */
  #donut > div > span{
    color:var(--text-muted)!important
  }

  #balanceDonut > div > span{
    color:var(--text-muted)!important
  }

  /* Link buttons styling improvement */
  .link-btn{
    border:none!important;
    background:transparent!important;
    color:var(--primary)!important;
    padding:4px 8px!important;
    font-size:13px!important;
    font-weight:600!important;
    border-radius:6px!important;
    transition:all 0.2s ease!important
  }

  .link-btn:hover{
    background:var(--primary-soft)!important;
    transform:translateX(2px)!important
  }

  .link-btn:active{
    transform:translateX(1px)!important
  }

  /* Badge components */
  .badge{
    display:inline-flex!important;
    align-items:center!important;
    padding:4px 10px!important;
    border-radius:12px!important;
    font-size:11px!important;
    font-weight:600!important;
    letter-spacing:0.3px!important;
    text-transform:uppercase!important
  }

  .badge.info{
    background:rgba(88,166,255,.15)!important;
    color:var(--primary)!important;
    border:1px solid rgba(88,166,255,.3)!important
  }

  .badge.success{
    background:rgba(63,185,80,.15)!important;
    color:var(--green)!important;
    border:1px solid rgba(63,185,80,.3)!important
  }

  .badge.warning{
    background:rgba(210,153,34,.15)!important;
    color:var(--amber)!important;
    border:1px solid rgba(210,153,34,.3)!important
  }

  .badge.danger{
    background:rgba(248,81,73,.15)!important;
    color:var(--red)!important;
    border:1px solid rgba(248,81,73,.3)!important
  }

  .badge.neutral{
    background:var(--surface-elevated)!important;
    color:var(--text-muted)!important;
    border:1px solid var(--line)!important
  }

  /* Primary badge variant */
  .badge.primary{
    background:var(--primary)!important;
    color:#fff!important;
    border:none!important
  }

  /* Green badge variant */
  .badge.green{
    background:var(--green)!important;
    color:#fff!important;
    border:none!important
  }

  /* Red badge variant */
  .badge.red{
    background:var(--red)!important;
    color:#fff!important;
    border:none!important
  }

  /* Small badge variant */
  .badge.small{
    padding:2px 6px!important;
    font-size:10px!important;
    border-radius:8px!important
  }

  /* Large badge variant */
  .badge.large{
    padding:6px 12px!important;
    font-size:12px!important;
    border-radius:14px!important
  }

  /* Typography improvements */
  strong{
    font-weight:700!important;
    color:var(--text)!important
  }

  /* Amount displays */
  .amount{
    font-weight:700!important;
    font-size:16px!important
  }

  .amount.positive{
    color:var(--green)!important;
    font-weight:800!important
  }

  .amount.negative{
    color:var(--red)!important;
    font-weight:800!important
  }

  /* Stat card amounts */
  .stat-amount{
    font-weight:700!important;
    color:var(--text)!important
  }

  /* Button text improvements */
  .btn{
    font-weight:700!important;
    letter-spacing:0.3px!important
  }

  .btn-primary{
    font-weight:800!important
  }

  /* Labels improvements */
  label{
    font-weight:600!important;
    color:var(--text)!important
  }

  /* Eyebrow text */
  .eyebrow{
    font-weight:800!important;
    letter-spacing:1.5px!important
  }

  /* Secondary text */
  .muted-copy,
  .secondary-text{
    font-weight:500!important;
    color:var(--text-muted)!important
  }

  /* Helper text */
  .helper-text{
    font-weight:500!important;
    color:var(--text-muted)!important
  }

  /* Link styling */
  a{
    font-weight:600!important
  }

  /* Code elements */
  code{
    font-weight:600!important;
    letter-spacing:0.2px!important
  }

  /* Navigation improvements */
  .nav-item{
    font-weight:700!important
  }

  /* Card headers */
  .card-head h2,
  .card-head h3{
    font-weight:800!important
  }

  /* Modal headings */
  .modal h2{
    font-weight:800!important;
    letter-spacing:0.3px!important
  }

  /* Form section headers */
  .section-header h2{
    font-weight:800!important
  }

  /* Table headers */
  th{
    font-weight:800!important;
    letter-spacing:0.5px!important
  }

  /* Value displays */
  .value-display{
    font-weight:700!important;
    font-size:15px!important
  }

  /* Transaction amounts */
  .transaction-amount{
    font-weight:800!important
  }

  /* Budget values */
  .budget-amount{
    font-weight:700!important
  }

  /* Goal progress text */
  .goal-text{
    font-weight:600!important
  }

  /* Status indicators */
  .status-text{
    font-weight:700!important;
    font-size:12px!important
  }

  /* Empty state icons - proper sizing */
  .empty-state.panel span{
    font-size:32px!important;
    line-height:1!important
  }

  /* Period button hover fix - no white background */
  .period-button:hover,
  .period-button.active{
    background:rgba(13,17,23,.08)!important
  }

  @media (prefers-color-scheme:dark){
    .period-button:hover,
    .period-button.active{
      background:rgba(255,255,255,.08)!important
    }
  }
}

/* ============================================
   ANIMATION UTILITIES & ENHANCEMENTS
   ============================================ */

/* ============================================
   CATEGORY COMBOBOX
   Полоса быстрых групп + поле + двухшаговый picker
   ============================================ */

.category-combobox {
  position: relative;
  width: 100%;
}

/* --- Быстрая полоса родительских категорий --- */
.category-quick-strip{
	display:flex;
	gap:6px;
	margin-bottom:8px
   }

.category-quick-tile{
	flex:1 1 0;
	min-width:0;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:4px;
	min-height:52px;
	padding:8px 4px;
	border:1px solid var(--line);
	border-radius:10px;
	background:var(--surface-elevated);
	color:var(--text-muted);
	font:inherit;
	cursor:pointer;
	transition:border-color .15s ease, background .15s ease, color .15s ease
   }

.category-quick-tile:hover{
	border-color:var(--primary);
	color:var(--text)
   }

.category-quick-tile:focus-visible{
	outline:2px solid var(--primary);
	outline-offset:2px
   }

.category-quick-tile .category-quick-icon{
	display:grid;
	place-items:center;
	color:var(--tile-color,var(--text-muted))
   }

.category-quick-tile .category-quick-icon svg{
	width:17px;
	height:17px
   }

.category-quick-tile .category-quick-name{
	font-size:11px;
	font-weight:600;
	line-height:1.1;
	max-width:100%;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis
   }

.category-quick-tile.active{
	border-color:var(--primary);
	background:var(--primary-soft);
	color:var(--primary)
   }

.category-quick-tile.active .category-quick-icon{
	color:var(--primary)
   }

/* Кнопка «>» — полный список всех групп */
.category-quick-tile.category-quick-more{
	flex:0 0 44px;
	min-width:44px
   }

/* --- Основное поле (выбранная подкатегория) --- */
.category-combobox-input {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-elevated);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.category-combobox-input:hover {
  border-color: var(--primary);
}

.category-combobox-input:focus-visible,
.category-combobox-input[aria-expanded="true"] {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(109, 91, 208, 0.1);
}

.category-combobox-icon {
  display: grid;
  place-items: center;
  flex: none;
}

.category-combobox-icon svg {
  width: 16px;
  height: 16px;
}

.category-combobox-text {
  flex: 1;
  font-size: 14px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.category-combobox-text.placeholder {
  color: var(--text-muted);
}

.category-combobox-arrow {
  display: grid;
  place-items: center;
  color: var(--text-muted);
  flex: none;
  transition: transform 0.2s ease;
}

.category-combobox-arrow svg {
  width: 14px;
  height: 14px;
}

.category-combobox-input[aria-expanded="true"] .category-combobox-arrow {
  transform: rotate(180deg);
}

/* --- Выпадающая панель --- */
.category-combobox-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
  z-index: 100;
  overflow: hidden;
  animation: dropdown-fade-in 0.18s ease;
}

/* display:flex не должен перебивать атрибут hidden */
.category-combobox-dropdown[hidden] {
  display: none;
}

@keyframes dropdown-fade-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Поиск внутри панели */
.category-combobox-searchbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  flex: none;
}

.category-combobox-search-icon {
  display: grid;
  place-items: center;
  color: var(--text-muted);
  flex: none;
}

.category-combobox-search-icon svg {
  width: 14px;
  height: 14px;
}

/* Поиск не должен наследовать правила input компактной формы */
.category-combobox-search {
  flex: 1;
  min-width: 0;
  height: auto;
  border: none;
  background: transparent;
  padding: 0;
  font-size: 14px;
  color: var(--text);
  outline: none;
}

.category-combobox-search::placeholder {
  color: var(--text-muted);
}

.category-combobox-search:focus {
  border: none;
  box-shadow: none;
  background: transparent;
}

/* Содержимое панели с прокруткой */
.category-combobox-content {
  max-height: 300px;
  overflow-y: auto;
  padding: 6px;
}

/* --- Корневой вид: список групп --- */
.category-parent-list {
  display: grid;
  gap: 2px;
}

.category-parent-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 7px;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.category-parent-row:hover,
.category-parent-row.highlighted {
  background: var(--surface-elevated);
}

.category-parent-icon {
  display: grid;
  place-items: center;
  color: var(--cat-color, var(--text-muted));
  flex: none;
}

.category-parent-icon svg {
  width: 16px;
  height: 16px;
}

.category-parent-name {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}

.category-parent-chevron {
  display: grid;
  place-items: center;
  color: var(--text-muted);
  opacity: 0.6;
  flex: none;
}

.category-parent-chevron svg {
  width: 14px;
  height: 14px;
}

/* --- Строка «← Родитель» (возврат к группам) --- */
.category-back-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  margin-bottom: 2px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.category-back-row:hover {
  background: var(--surface-elevated);
  color: var(--text);
}

.category-back-icon {
  display: grid;
  place-items: center;
}

.category-back-icon svg {
  width: 14px;
  height: 14px;
}

/* --- Подкатегории и результаты поиска --- */
.category-sub-list,
.category-search-list {
  display: grid;
  gap: 2px;
}

.category-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 10px;
  padding-left: 34px;
  border-radius: 7px;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

/* Результаты поиска — без отступа под «← Родитель» */
.category-search-list .category-option {
  padding-left: 10px;
}

.category-option:hover {
  background: var(--surface-elevated);
}

.category-option.highlighted {
  background: var(--primary-soft);
}

.category-option-primary {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}

.category-option-secondary {
  font-size: 12px;
  color: var(--text-muted);
  text-align: right;
  flex: none;
}

/* Опция «Вся категория «X»» — выбор всей группы (лимиты бюджета) */
.category-option-parent {
  margin-bottom: 4px;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--line);
  border-radius: 7px 7px 0 0;
}

.category-option-parent .category-option-primary {
  font-weight: 600;
}

.category-combobox-empty {
  padding: 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

/* --- Responsive полосы: горизонтальный скролл внутри формы --- */
@media (max-width: 600px) {
  .category-quick-strip {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
  }

  .category-quick-strip::-webkit-scrollbar {
    display: none;
  }

  .category-quick-tile {
    flex: 0 0 auto;
    min-width: 64px;
    padding: 7px 10px;
  }

  .category-combobox-content {
    max-height: 260px;
  }
}

/* View Transitions */
.view {
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.view.fade-out {
  opacity: 0;
  transform: translateY(10px);
}
.view.fade-in {
  opacity: 1;
  transform: translateY(0);
}

/* Card Hover Effects */
.card,
.stat-card,
.panel,
.month-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover,
.stat-card:hover,
.panel:hover,
.month-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

/* Button Ripple Effect */
.btn {
  position: relative;
  overflow: hidden;
}
.btn::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  background: rgba(255,255,255,0.3);
  border-radius: 50%;
  transition: transform 0.5s ease;
  pointer-events: none;
}
.btn:active::after {
  transform: translate(-50%, -50%) scale(2);
}

/* Progress Bar Animation */
.progress-fill {
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Icon Press Effect */
.nav-item > span,
.icon-btn,
.icon-button {
  transition: transform 0.15s ease;
}
.nav-item:active > span,
.icon-btn:active,
.icon-button:active {
  transform: scale(0.95);
}

/* Donut Chart Animation */
.donut {
  transition: background 0.5s ease;
}

/* Enhanced Toast Animation */
.toast {
  transform: translate(-50%, 25px);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
}
.toast.show {
  transform: translate(-50%, 0);
  opacity: 1;
}

/* Modal Animation */
.modal-backdrop,
.confirm-backdrop {
  opacity: 0;
  transition: opacity 0.2s ease;
}
.modal {
  transform: scale(0.95);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
}
.modal-backdrop:not([hidden]),
.confirm-backdrop:not([hidden]) {
  opacity: 1;
}
.modal-backdrop:not([hidden]) .modal,
.confirm-backdrop:not([hidden]) .modal {
  transform: scale(1);
  opacity: 1;
}

/* Pulse Animation for Important Elements */
@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(109, 91, 208, 0.4);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(109, 91, 208, 0);
  }
}
.pulse {
  animation: pulse-glow 2s infinite;
}

/* Stagger Animation for Lists */
.stagger-item {
  opacity: 0;
  transform: translateY(20px);
}
.stagger-item.visible {
  animation: stagger-in 0.4s ease forwards;
}
@keyframes stagger-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Skeleton Loading */
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
}
@media (prefers-color-scheme: dark) {
  .skeleton {
    background: linear-gradient(90deg, #2a2a2a 25%, #3a3a3a 50%, #2a2a2a 75%);
    background-size: 200% 100%;
  }
}
@keyframes skeleton-loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

.skeleton-item {
  padding: 16px;
  border-bottom: 1px solid var(--line);
}

/* Bar Chart Animation */
.chart-bar,
.bar {
  transition: height 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Sticky Table Header */
.table-wrap {
  position: relative;
}
thead {
  position: sticky;
  top: 0;
  z-index: 10;
  transition: box-shadow 0.2s ease;
}
th {
  background: var(--surface);
}

/* Mobile Swipe Indicator */
.swipe-hint {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  color: var(--red);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.swipe-delete {
  opacity: 0.6;
}

/* Tooltip System */
.tooltip {
  position: fixed;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 11px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 1000;
  box-shadow: var(--shadow);
  max-width: 200px;
}
.tooltip.visible {
  opacity: 1;
}
.tooltip strong {
  display: block;
  margin-bottom: 2px;
}

/* Donut ring segments: circle внутри <g rotate>, поэтому hover -
   только мягкая подсветка, без scale (transform перезаписал бы поворот) */
.donut-segment {
  cursor: pointer;
}
.donut-segment circle {
  transition: filter 0.2s ease;
}
.donut-segment:hover circle {
  filter: brightness(1.15);
}

/* Line Chart Container */
.line-chart-container {
  position: relative;
  height: 200px;
  margin: 20px 0;
}

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

.line-chart-line {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: draw-line 1s ease forwards;
}

@keyframes draw-line {
  to {
    stroke-dashoffset: 0;
  }
}

.line-chart-point {
  transition: r 0.2s ease, fill 0.2s ease;
  cursor: pointer;
}
.line-chart-point:hover {
  r: 6;
}

/* Sparkline Charts */
.sparkline {
  display: inline-block;
  width: 80px;
  height: 30px;
  vertical-align: middle;
}

.sparkline-svg {
  width: 100%;
  height: 100%;
}

.sparkline-path {
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
}

/* Drag & Drop */
.draggable-item {
  cursor: move;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.draggable-item.dragging {
  opacity: 0.5;
  transform: scale(1.02);
  box-shadow: 0 8px 16px rgba(0,0,0,0.15);
}

.draggable-item.drag-over {
  border-top: 2px solid var(--primary);
}

/* Pull to Refresh */
.pull-refresh {
  position: relative;
  overflow: hidden;
}

.pull-refresh-indicator {
  position: absolute;
  top: -60px;
  left: 0;
  right: 0;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: top 0.3s ease;
  z-index: 5;
}

.pull-refresh-indicator.visible {
  top: 0;
}

.pull-refresh-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid var(--line);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Infinite Scroll Sentinel */
.infinite-scroll-sentinel {
  height: 1px;
  margin-top: -1px;
  pointer-events: none;
}

/* Swipeable Items */
.swipeable {
  transition: transform 0.2s ease;
  touch-action: pan-y;
}

/* Long Press Feedback */
.long-press-feedback {
  position: relative;
}
.long-press-feedback::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(109, 91, 208, 0.1);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.long-press-feedback.pressing::after {
  opacity: 1;
}

/* Horizontal Scroll for Tables */
.table-wrap {
  overflow-x: auto;
  overflow-y: auto;
  max-height: 600px;
}

.table-wrap thead th {
  position: sticky;
  top: 0;
}

/* First column sticky in horizontal scroll */
.table-wrap tbody td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--surface);
  border-right: 1px solid var(--line);
}

/* Compact items with animation support */
.compact-item,
.transaction-item,
.recurring-item {
  transition: background-color 0.2s ease, transform 0.2s ease;
}

/* Budget Item Animation */
.budget-item,
.goal-item,
.debt-item {
  transition: all 0.2s ease;
}

/* Enhanced category chart interactions */
.category-item {
  transition: background-color 0.2s ease, transform 0.1s ease;
  cursor: pointer;
}
.category-item:hover {
  transform: translateX(2px);
}

/* Overview goal animation */
.overview-goal,
.goal-preview {
  transition: all 0.2s ease;
}

/* Period popover animation */
.period-popover[hidden] {
  display: none;
}
.period-popover {
  transition: opacity 0.2s ease, transform 0.2s ease;
  opacity: 0;
  transform: translateX(-50%) scale(0.95);
  pointer-events: none;
}
.period-popover:not([hidden]) {
  opacity: 1;
  transform: translateX(-50%) scale(1);
  pointer-events: auto;
}

/* Daily tip animation */
.daily-tip {
  transition: transform 0.2s ease;
}
.daily-tip:hover {
  transform: translateY(-1px);
}

/* Sidebar transition */
.sidebar {
  transition: transform 0.3s ease;
}

/* Confirm card animation */
.confirm-card {
  transform: scale(0.95);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
}
.confirm-backdrop:not([hidden]) .confirm-card {
  transform: scale(1);
  opacity: 1;
}

/* Enhanced search input animation */
.search,
.search input {
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

/* Category combobox dropdown animation */
.category-combobox-dropdown {
  transition: opacity 0.2s ease, transform 0.2s ease;
  opacity: 0;
  transform: translateY(-10px);
}
.category-combobox-dropdown:not([hidden]) {
  opacity: 1;
  transform: translateY(0);
}

/* Empty state animation */
.empty-state {
  animation: fade-in 0.4s ease;
}

/* Category picker in transaction form: панель по ширине поля,
   без width:max-content (риск выхода за пределы модалки на мобильных) */
.transaction-modal .category-combobox-content{
	max-height:320px
   }

/* Payment summary cards animation */
.payment-summary > div {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.payment-summary > div:hover {
  transform: translateY(-1px);
}

/* Badge animation */
.badge {
  transition: transform 0.2s ease;
}
.badge:hover {
  transform: translateY(-1px);
}

/* Sync dot pulse enhancement */
.sync-state i {
  transition: background-color 0.3s ease;
}

/* Loading state overlay */
.loading-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
@media (prefers-color-scheme: dark) {
  .loading-overlay {
    background: rgba(0,0,0,0.6);
  }
}
.loading-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}

/* Responsive animations */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================
   ENHANCED ANIMATIONS & EFFECTS
   ============================================ */

/* Shimmer Loading Effect */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.shimmer {
  background: linear-gradient(
    90deg,
    var(--surface-elevated) 0%,
    var(--surface) 50%,
    var(--surface-elevated) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* Card Entrance Animations */
.card-enter {
  animation: card-enter 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes card-enter {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Staggered Animation Delays */
.stagger-delay-1 { animation-delay: 50ms; }
.stagger-delay-2 { animation-delay: 100ms; }
.stagger-delay-3 { animation-delay: 150ms; }
.stagger-delay-4 { animation-delay: 200ms; }
.stagger-delay-5 { animation-delay: 250ms; }

/* Bounce Animation */
@keyframes bounce {
  0%, 60%, 100% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-8px);
  }
}

.bounce {
  animation: bounce 0.5s ease;
}

/* Shake Animation for Errors */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
  20%, 40%, 60%, 80% { transform: translateX(4px); }
}

.shake {
  animation: shake 0.5s ease;
}

/* Scale In Animation */
@keyframes scale-in {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.scale-in {
  animation: scale-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Fade Slide Animation */
@keyframes fade-slide-up {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-slide-up {
  animation: fade-slide-up 0.4s ease forwards;
}

/* Flip Animation */
@keyframes flip {
  0% { transform: rotateY(0); }
  50% { transform: rotateY(180deg); }
  100% { transform: rotateY(360deg); }
}

.flip {
  animation: flip 0.6s ease;
}

/* Counter Animation */
.counter-animate {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Glow Effect */
@keyframes glow {
  0%, 100% {
    box-shadow: 0 0 5px var(--primary);
  }
  50% {
    box-shadow: 0 0 20px var(--primary), 0 0 30px var(--primary);
  }
}

.glow {
  animation: glow 2s ease-in-out infinite;
}

/* Floating Animation */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.float {
  animation: float 3s ease-in-out infinite;
}

/* Ripple Effect Container */
.ripple-container {
  position: relative;
  overflow: hidden;
}

.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  transform: scale(0);
  animation: ripple-effect 0.6s ease-out;
  pointer-events: none;
}

@keyframes ripple-effect {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* Slide In from Right */
@keyframes slide-in-right {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.slide-in-right {
  animation: slide-in-right 0.3s ease forwards;
}

/* Slide In from Left */
@keyframes slide-in-left {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.slide-in-left {
  animation: slide-in-left 0.3s ease forwards;
}

/* Zoom In Animation */
@keyframes zoom-in {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.zoom-in {
  animation: zoom-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Wobble Animation */
@keyframes wobble {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-10px) rotate(-5deg); }
  30% { transform: translateX(8px) rotate(3deg); }
  45% { transform: translateX(-6px) rotate(-3deg); }
  60% { transform: translateX(4px) rotate(2deg); }
  75% { transform: translateX(-2px) rotate(-1deg); }
}

.wobble {
  animation: wobble 0.8s ease;
}

/* Heartbeat Animation */
@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  10%, 30% { transform: scale(0.9); }
  20%, 40% { transform: scale(1.1); }
}

.heartbeat {
  animation: heartbeat 1.5s ease-in-out infinite;
}

/* Typing Animation */
.typing-cursor::after {
  content: '|';
  animation: typing-blink 1s infinite;
}

@keyframes typing-blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* Success Checkmark Animation */
@keyframes checkmark-draw {
  0% {
    stroke-dashoffset: 100;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

.checkmark-animate {
  stroke-dasharray: 100;
  animation: checkmark-draw 0.5s ease forwards;
}

/* Loading Dots */
@keyframes loading-dots {
  0%, 20% { opacity: 0; }
  50% { opacity: 1; }
  80%, 100% { opacity: 0; }
}

.loading-dots span {
  animation: loading-dots 1.4s infinite;
}

.loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.loading-dots span:nth-child(3) { animation-delay: 0.4s; }

/* Progress Bar Striped Animation */
@keyframes progress-stripes {
  from { background-position: 40px 0; }
  to { background-position: 0 0; }
}

.progress-striped .progress-fill {
  background-image: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.15) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.15) 50%,
    rgba(255, 255, 255, 0.15) 75%,
    transparent 75%,
    transparent
  );
  background-size: 40px 40px;
  animation: progress-stripes 1s linear infinite;
}

/* Morphing Animation */
@keyframes morph {
  0%, 100% { border-radius: 40% 60% 60% 40% / 60% 30% 70% 40%; }
  25% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
  50% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
  75% { border-radius: 60% 40% 30% 70% / 40% 60% 30% 70%; }
}

.morph {
  animation: morph 8s ease-in-out infinite;
}

/* Text Reveal Animation */
@keyframes text-reveal {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

.text-reveal {
  animation: text-reveal 0.8s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

/* Elastic Animation */
@keyframes elastic {
  0% { transform: scale(1); }
  30% { transform: scale(1.25); }
  40% { transform: scale(0.75); }
  50% { transform: scale(1.15); }
  65% { transform: scale(0.95); }
  75% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.elastic {
  animation: elastic 0.8s ease;
}

/* Jello Animation */
@keyframes jello {
  0%, 11.1%, 100% { transform: none; }
  22.2% { transform: skewX(-12.5deg) skewY(-12.5deg); }
  33.3% { transform: skewX(6.25deg) skewY(6.25deg); }
  44.4% { transform: skewX(-3.125deg) skewY(-3.125deg); }
  55.5% { transform: skewX(1.5625deg) skewY(1.5625deg); }
  66.6% { transform: skewX(-0.78125deg) skewY(-0.78125deg); }
  77.7% { transform: skewX(0.390625deg) skewY(0.390625deg); }
  88.8% { transform: skewX(-0.1953125deg) skewY(-0.1953125deg); }
}

.jello {
  animation: jello 0.9s both;
}

/* Gradient Animation */
@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.animated-gradient {
  background: linear-gradient(
    270deg,
    var(--primary),
    var(--green),
    var(--amber),
    var(--red)
  );
  background-size: 400% 400%;
  animation: gradient-shift 8s ease infinite;
}

/* Neon Glow Effect */
@keyframes neon-pulse {
  0%, 100% {
    text-shadow:
      0 0 5px var(--primary),
      0 0 10px var(--primary),
      0 0 20px var(--primary),
      0 0 40px var(--primary);
  }
  50% {
    text-shadow:
      0 0 2px var(--primary),
      0 0 5px var(--primary),
      0 0 10px var(--primary),
      0 0 20px var(--primary);
  }
}

.neon-text {
  animation: neon-pulse 2s ease-in-out infinite;
}

/* Confetti Animation */
@keyframes confetti-fall {
  0% {
    transform: translateY(-100vh) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(720deg);
    opacity: 0;
  }
}

.confetti {
  position: fixed;
  width: 10px;
  height: 10px;
  animation: confetti-fall 3s linear forwards;
}

/* Magnetic Button Effect */
.magnetic-button {
  transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Glassmorphism Effect */
.glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

@media (prefers-color-scheme: dark) {
  .glass {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
  }
}

/* Noise Texture */
.noise-bg {
  position: relative;
}

.noise-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  opacity: 0.03;
  pointer-events: none;
}

/* ============================================
   ФОНТОВЫЕ РАЗМЕРЫ (Accessibility feature)
   ============================================ */

/* Small — для тех, кто хочет больше контента на экране */
.font-small{
  --base-font-size:12px;
  --heading-scale:0.9;
  --spacing-scale:0.85
}

/* Medium — чуть меньше базового */
.font-medium{
  --base-font-size:13px;
  --heading-scale:0.95;
  --spacing-scale:0.9
}

/* Large — комфортный размер (по умолчанию) */
.font-large{
  --base-font-size:14px;
  --heading-scale:1;
  --spacing-scale:1
}

/* Extra Large — для лучшей читаемости */
.font-extra-large{
  --base-font-size:16px;
  --heading-scale:1.05;
  --spacing-scale:1.1
}

/* Применяем базовый размер шрифта */
body.font-small{font-size:12px}
body.font-medium{font-size:13px}
body.font-large{font-size:14px}
body.font-extra-large{font-size:16px}

/* Масштабируем заголовки */
.font-small h1{font-size:calc(25px * 0.9)}
.font-small h2{font-size:calc(16px * 0.9)}
.font-small h3{font-size:calc(14px * 0.9)}

.font-medium h1{font-size:calc(25px * 0.95)}
.font-medium h2{font-size:calc(16px * 0.95)}
.font-medium h3{font-size:calc(14px * 0.95)}

.font-extra-large h1{font-size:calc(25px * 1.05)}
.font-extra-large h2{font-size:calc(16px * 1.05)}
.font-extra-large h3{font-size:calc(14px * 1.05)}

/* ============================================
   ПЛОТНОСТЬ КОНТЕНТА (Density modes)
   ============================================ */

/* Compact — плотный режим, больше информации */
body.density-compact .panel{
  padding:12px
}

body.density-compact .stat-card{
  padding:13px 14px;
  min-height:95px
}

body.density-compact .data-card{
  padding:12px;
  min-height:140px
}

body.density-compact .sidebar{
  padding:18px 12px 14px
}

body.density-compact .nav-item{
  min-height:38px;
  padding:0 10px
}

body.density-compact .main{
  padding:18px 22px 32px
}

body.density-compact .topbar{
  margin-bottom:16px
}

body.density-compact .overview-grid,
body.density-compact .cards-grid,
body.density-compact .settings-grid{
  gap:12px
}

body.density-compact .stats-grid{
  gap:10px
}

body.density-compact .category-chart{
  min-height:190px
}

body.density-compact .bar-chart,
body.density-compact .analytics-chart{
  height:180px
}

body.density-compact .toolbar{
  margin-bottom:12px
}

body.density-compact .donut{
  width:160px;
  height:160px;
  flex:0 0 160px
}

body.density-compact .section-intro{
  margin-bottom:12px
}

body.density-compact .compact-row{
  min-height:42px
}

body.density-compact th,
body.density-compact td{
  height:40px;
  font-size:10px
}

/* Spacious — просторный режим (по умолчанию) */
body.density-spacious .panel{
  padding:18px
}

body.density-spacious .stat-card{
  padding:17px 18px;
  min-height:115px
}

body.density-spacious .data-card{
  padding:18px;
  min-height:165px
}

body.density-spacious .sidebar{
  padding:25px 16px 18px
}

body.density-spacious .nav-item{
  min-height:45px;
  padding:0 13px
}

body.density-spacious .main{
  padding:25px 28px 40px
}

body.density-spacious .topbar{
  margin-bottom:18px
}

body.density-spacious .overview-grid,
body.density-spacious .cards-grid,
body.density-spacious .settings-grid{
  gap:15px
}

body.density-spacious .stats-grid{
  gap:15px
}

body.density-spacious .category-chart{
  min-height:235px
}

body.density-spacious .bar-chart,
body.density-spacious .analytics-chart{
  height:235px
}

body.density-spacious .toolbar{
  margin-bottom:16px
}

body.density-spacious .donut{
  width:180px;
  height:180px;
  flex:0 0 180px
}

body.density-spacious .section-intro{
  margin-bottom:16px
}

body.density-spacious .compact-row{
  min-height:51px
}

body.density-spacious th,
body.density-spacious td{
  height:48px
}

/* ============================================
   UI ЭЛЕМЕНТЫ ТЕМ
   ============================================ */

/* Theme toggle button animation */
.theme-toggle-btn{
  transition:background-color 0.3s ease,color 0.3s ease
}

.theme-toggle-btn:hover{
  transform:scale(1.02)
}

/* Theme selector in settings */
.theme-selector{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
  margin-bottom:20px
}

.theme-option{
  position:relative;
  border:2px solid var(--line);
  border-radius:12px;
  padding:16px;
  cursor:pointer;
  background:var(--surface);
  transition:all 0.2s ease
}

.theme-option:hover{
  border-color:var(--primary);
  transform:translateY(-1px)
}

.theme-option.active{
  border-color:var(--primary);
  background:var(--primary-soft)
}

.theme-option-preview{
  height:60px;
  border-radius:8px;
  margin-bottom:10px;
  display:flex;
  gap:4px;
  padding:8px
}

.theme-option-preview.light{
  background:#f5f6fa
}

.theme-option-preview.dark{
  background:#0D121A
}

.theme-option-preview::before{
  content:'';
  width:24px;
  height:24px;
  border-radius:4px;
  background:var(--primary)
}

.theme-option-preview::after{
  content:'';
  flex:1;
  height:24px;
  border-radius:4px;
  background:var(--surface)
}

.theme-option-label{
  text-align:center;
  font-weight:700;
  color:var(--text)
}

/* Font size selector */
.font-size-selector{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
  margin-bottom:20px
}

.font-size-option{
  padding:12px 8px;
  border:2px solid var(--line);
  border-radius:10px;
  background:var(--surface);
  cursor:pointer;
  text-align:center;
  transition:all 0.2s ease
}

.font-size-option:hover{
  border-color:var(--primary)
}

.font-size-option.active{
  border-color:var(--primary);
  background:var(--primary-soft)
}

.font-size-option .preview{
  font-size:14px;
  font-weight:700;
  margin-bottom:4px;
  color:var(--text)
}

.font-size-option .label{
  font-size:10px;
  color:var(--text-muted)
}

.font-size-option[data-size="small"] .preview{font-size:11px}
.font-size-option[data-size="medium"] .preview{font-size:13px}
.font-size-option[data-size="large"] .preview{font-size:15px}
.font-size-option[data-size="extra-large"] .preview{font-size:17px}

/* Density selector */
.density-selector{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
  margin-bottom:20px
}

.density-option{
  padding:16px;
  border:2px solid var(--line);
  border-radius:12px;
  background:var(--surface);
  cursor:pointer;
  text-align:center;
  transition:all 0.2s ease
}

.density-option:hover{
  border-color:var(--primary)
}

.density-option.active{
  border-color:var(--primary);
  background:var(--primary-soft)
}

.density-option .icon{
  font-size:24px;
  margin-bottom:8px
}

.density-option .label{
  font-weight:700;
  color:var(--text);
  display:block
}

.density-option .description{
  font-size:11px;
  color:var(--text-muted);
  margin-top:4px
}

/* Transition для плавного переключения тем */
body,
.panel,
.card,
.modal,
.sidebar,
.nav-item,
.btn{
  transition:background-color 0.2s ease,color 0.2s ease,border-color 0.2s ease
}

/* Auth screen transition */
.auth-screen{
  transition:background 0.3s ease
}

/* Donut chart transition */
.donut{
  transition:all 0.2s ease
}

/* ============================================
   THEME TOGGLE BUTTON
   ============================================ */

.theme-toggle-btn{
  min-width:42px;
  display:grid;
  place-items:center;
  font-size:18px;
  padding:0 12px
}

.theme-toggle-btn:hover{
  transform:scale(1.02)
}

.theme-toggle-btn:active{
  transform:scale(0.95)
}

/* Theme paw icon colors */
#themeIcon{
  display:flex;
  align-items:center;
  justify-content:center
}

[data-theme="dark"] #themeIcon{
  color:#F5F7FA
}

[data-theme="light"] #themeIcon{
  color:#1E2732
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme]) #themeIcon{
    color:#F5F7FA
  }
}

@media (prefers-color-scheme:light){
  :root:not([data-theme]) #themeIcon{
    color:#1E2732
  }
}

/* Setting sections */
.setting-section{
  margin-bottom:24px
}

.setting-section:last-child{
  margin-bottom:0
}

.setting-label{
  display:block;
  margin-bottom:12px;
  font-size:12px;
  font-weight:700;
  color:#4f586c
}

/* В dark mode */
[data-theme="dark"] .setting-label{
  color:var(--text)
}

/* Goal icon picker */
.goal-icon-picker{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(44px, 1fr));
  gap:8px;
  margin-top:8px
}

.goal-icon-option{
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:2px solid var(--line);
  border-radius:8px;
  background:var(--surface);
  cursor:pointer;
  transition:all 0.2s ease
}

.goal-icon-option:hover{
  background:var(--surface-elevated);
  border-color:var(--primary)
}

.goal-icon-option[aria-pressed="true"]{
  border-color:#6995E5;
  background:rgba(105, 149, 229, 0.1)
}

.goal-icon-option svg{
  width:24px;
  height:24px;
  stroke:var(--text)
}

/* Goal image uploader (modal) */
.goal-image-block{
  margin-bottom:15px
}

.goal-image-label{
  display:block;
  margin-bottom:7px;
  color:#4f586c;
  font-size:12px;
  font-weight:700
}

.goal-optional{
  font-weight:500;
  color:#858ca0
}

.goal-image-uploader{
  display:flex;
  align-items:center;
  gap:12px
}

.goal-image-preview{
  position:relative;
  flex-shrink:0
}

.goal-image-preview img{
  display:block;
  width:64px;
  height:64px;
  object-fit:cover;
  border-radius:10px;
  border:1px solid #dfe3ec;
  background:#fff
}

.goal-image-remove{
  position:absolute;
  top:-7px;
  right:-7px;
  width:20px;
  height:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border:none;
  border-radius:50%;
  background:var(--red);
  color:#fff;
  font-size:13px;
  line-height:1;
  cursor:pointer;
  box-shadow:0 2px 6px rgba(30,35,55,.25)
}

.goal-image-hint,
.goal-link-hint{
  display:block;
  margin:-9px 0 15px;
  font-size:11px;
  line-height:1.5;
  color:#858ca0
}

[data-theme="dark"] .goal-image-label{
  color:var(--text)
}

[data-theme="dark"] .goal-optional,
[data-theme="dark"] .goal-image-hint,
[data-theme="dark"] .goal-link-hint{
  color:var(--text-muted)
}

@media (prefers-color-scheme:dark){
  .goal-image-label{
    color:var(--text)
  }

  .goal-optional,
  .goal-image-hint,
  .goal-link-hint{
    color:var(--text-muted)
  }
}



/* ============================================
   COMPACT TRANSACTION MODAL
   ============================================ */

.transaction-modal{
	width:min(520px,100%)
   }

.transaction-modal h2{
	margin:0 0 16px;
	font-size:18px
   }

/* Type Toggle */
.transaction-type-toggle{
	display:flex;
	gap:6px;
	margin-bottom:12px
   }

.transaction-type-toggle .type-option{
	flex:1;
	position:relative
   }

.transaction-type-toggle input{
	position:absolute;
	opacity:0;
	inset:0;
	cursor:pointer
   }

.transaction-type-toggle span{
	display:flex;
	align-items:center;
	justify-content:center;
	min-height:40px;
	border:1px solid var(--line);
	border-radius:9px;
	background:var(--surface-elevated);
	color:var(--text-muted);
	font-size:13px;
	font-weight:600;
	transition:all .15s ease
   }

.transaction-type-toggle input:checked+span{
	background:var(--surface);
	color:var(--text);
	border-color:var(--line)
   }

.transaction-type-toggle .type-option.expense input:checked+span{
	border-color:var(--red);
	color:var(--red);
	background:var(--red-soft)
   }

.transaction-type-toggle .type-option.income input:checked+span{
	border-color:var(--green);
	color:var(--green);
	background:var(--green-soft)
   }

/* Form Sections */
.compact-transaction-form{
	display:flex;
	flex-direction:column;
	gap:12px
   }

.form-section{
	display:flex;
	flex-direction:column;
	gap:6px
   }

/* Amount and Date in one row */
.transaction-row.amount-date-row{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:10px
   }

.section-label{
	font-size:12px;
	font-weight:600;
	color:var(--text-muted);
	letter-spacing:0
   }

/* Owner Chips */
.owner-chips{
	display:flex;
	flex-wrap:wrap;
	gap:6px
   }

.owner-chip{
	min-height:30px;
	border:1px solid var(--line);
	border-radius:7px;
	padding:0 12px;
	background:var(--surface-elevated);
	color:var(--text-muted);
	font-size:12px;
	font-weight:500;
	cursor:pointer;
	transition:all .15s ease
   }

.owner-chip:hover{
	background:var(--surface);
	border-color:var(--primary);
	color:var(--text)
   }

.owner-chip.active{
	background:var(--primary-soft);
	border-color:var(--primary);
	color:var(--primary)
   }

/* Визуальное отделение «Отложить» от персональных владельцев */
.owner-divider{
	flex:none;
	align-self:stretch;
	width:1px;
	margin:3px 5px;
	background:var(--line)
   }

/* Quick Templates */
.quick-templates{
	display:flex;
	flex-wrap:wrap;
	gap:6px
   }

.template-btn{
	min-height:30px;
	border:1px solid var(--line);
	border-radius:7px;
	padding:0 12px;
	background:var(--surface-elevated);
	color:var(--text-muted);
	font-size:12px;
	font-weight:500;
	cursor:pointer;
	transition:all .15s ease
   }

.template-btn:hover{
	background:var(--surface);
	border-color:var(--primary);
	color:var(--text)
   }

.template-btn:active{
	transform:scale(.95)
   }

/* Main Form Rows */
.field-group{
	display:flex;
	flex-direction:column;
	gap:6px
   }

.field-label{
	font-size:11px;
	font-weight:700;
	color:var(--text-muted)
   }

.amount-input{
	width:100%;
	height:44px;
	text-align:center;
	font-size:16px;
	font-weight:600;
	letter-spacing:.5px
   }

.date-input{
	width:100%;
	height:44px
   }

/* Form Actions Row */
.form-actions-row{
	display:flex;
	justify-content:flex-end;
	gap:10px;
	margin-top:4px
   }

.form-actions-row .btn{
	min-height:42px;
	padding:0 18px;
	font-size:13px
   }

/* Category Container in Compact Form */
.category-group .category-combobox-input{
	height:44px
   }

/* Responsive */

/* ============================================
   TRANSACTION FORM GRID LAYOUT
   Two-column layout: narrow (38%) | wide (62%)
   Left: Amount, Date | Right: Name, Category
   ============================================ */

.transaction-form-grid{
	display:grid;
	grid-template-columns:minmax(150px,38fr) minmax(0,62fr);
	gap:18px;
	align-items:start
	   }

.transaction-form-column{
	display:flex;
	flex-direction:column;
	gap:14px
	   }

/* Mobile: single column with custom order */
@media (max-width:700px){
	.transaction-form-grid{
		grid-template-columns:1fr;
		gap:0
		}

	.transaction-form-column--narrow{
		order:1
		}

	.transaction-form-column--wide{
		order:2;
		margin-top:4px
		}

	.field-group.date-group{
		order:1
		}

	.field-group.amount-group{
		order:0
		}
	}
@media (max-width:600px){
	.transaction-modal{
		width:100%;
		padding:18px 16px
	}


	.owner-chips,
	.quick-templates{
		gap:6px
	}

	.owner-chip,
	.template-btn{
		flex:1;
		min-width:70px;
		font-size:11px;
		padding:0 10px
	}
}

/* Mobile: amount-date-row becomes single column */
@media (max-width:600px){
	.amount-date-row{
		grid-template-columns:1fr;
		gap:8px
	}
}

/* Hide category section for income */
.category-group.hidden{
	display:none
   }

/* ============================================
   COMPACT TRANSACTION FORM - INPUTS FIX
   Dark theme proper styling for all inputs
   ============================================ */

/* All inputs in compact transaction form */
.compact-transaction-form input:not([type="hidden"]):not([type="radio"]){
	width:100%;
	height:44px;
	border:1px solid var(--line);
	border-radius:9px;
	background:var(--surface-elevated);
	color:var(--text);
	padding:0 12px;
	font-size:14px;
	outline:none;
	transition:border-color .15s ease, box-shadow .15s ease, background .15s ease
   }

.compact-transaction-form input::placeholder{
	color:var(--text-muted)
   }

.compact-transaction-form input:focus{
	border-color:var(--primary);
	box-shadow:0 0 0 3px rgba(109,91,208,.1);
	background:var(--surface)
   }

/* Amount input specific */
.compact-transaction-form .amount-input{
	text-align:center;
	font-size:16px;
	font-weight:600;
	letter-spacing:.5px;
	border:1px solid var(--line)
   }

.compact-transaction-form .amount-input:focus{
	border-color:var(--primary)
   }

/* Name input */
.compact-transaction-form #transactionName{
	border:1px solid var(--line)
   }

/* Date input - dark theme fix */
.compact-transaction-form .date-input{
	color-scheme:dark;
	border:1px solid var(--line)
   }

.compact-transaction-form .date-input::-webkit-calendar-picker-indicator{
	filter:invert(0.5);
	opacity:0.6;
	cursor:pointer;
	transition:opacity .15s ease
   }

.compact-transaction-form .date-input::-webkit-calendar-picker-indicator:hover{
	opacity:1;
	filter:invert(0.7)
   }

/* ============================================
   NEW TRANSACTION FORM SECTIONS
   Owner, Templates, Frequent Categories, Details
   ============================================ */

/* Section styling */
.owner-section{
	margin-bottom:2px
   }

.templates-section{
	margin-bottom:2px
   }

/* Name section */
.name-section{
	margin-bottom:2px
   }

.name-section .field-label{
	display:block;
	margin-bottom:6px;
	font-size:12px;
	font-weight:600;
	color:var(--text-muted)
   }

.name-section input{
	width:100%;
	height:40px;
	border:1px solid var(--line);
	border-radius:9px;
	background:var(--surface-elevated);
	color:var(--text);
	padding:0 12px;
	font-size:14px;
	outline:none;
	transition:border-color .15s ease, box-shadow .15s ease
   }

.name-section input::placeholder{
	color:var(--text-muted);
	font-size:13px
   }

.name-section input:focus{
	border-color:var(--primary);
	box-shadow:0 0 0 3px rgba(109,91,208,.1);
	background:var(--surface)
   }

/* Mobile optimization */
@media (max-width:600px){
	.name-section input{
		height:38px;
		font-size:14px
		}
   }


/* ============ RESERVE («Отложено») ============ */
/* KPI-карточка на Overview + summary страницы Reserve.
   Палитра: спокойный indigo / muted violet / blue-violet.
   Цвет - только маленькие акценты (icon, тонкая линия, слабый tint);
   суммы остаются var(--text), поверхности - var(--surface). Без neon glow. */

/* ===== KPI-карточка «Отложено» на Overview ===== */
/* Единственная кликабельная stat-card, поэтому это button, а не article:
   Enter/Space работают нативно. Видимость фокуса добавляем явно,
   дублируя глобальное правило button:focus-visible цветом акцента. */
.stat-card.reserve{
  appearance:none;
  width:100%;
  font:inherit;
  color:inherit;
  text-align:left;
  cursor:pointer
}

.stat-card.reserve .card-glow{
  background:#6d5bd0
}

.stat-card.reserve .stat-icon{
  background:rgba(109,91,208,.16);
  color:#8b7af0;
  border-color:rgba(109,91,208,.45)
}

.stat-card.reserve:hover{
  border-color:rgba(139,122,240,.45)
}

.stat-card.reserve:focus-visible{
  outline:2px solid #8b7af0;
  outline-offset:2px
}

/* Маленькая стрелка-приглашение в правом нижнем углу (card clickable) */
.stat-chevron{
  position:absolute;
  right:18px;
  bottom:13px;
  z-index:1;
  color:var(--text-muted);
  font-size:15px;
  line-height:1;
  opacity:.65;
  transition:transform .2s ease,opacity .2s ease
}

.stat-card.reserve:hover .stat-chevron,
.stat-card.reserve:focus-visible .stat-chevron{
  transform:translateX(2px);
  opacity:1
}

/* ===== Summary страницы «Отложено» ===== */
/* Четыре компактные карточки в dark surface; breakpoints как у
   .analytics-summary-grid (1024px / 600px) */
.reserve-summary-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  margin-bottom:16px
}

@media (max-width:1024px){
  .reserve-summary-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}

@media (max-width:600px){
  .reserve-summary-grid{
    grid-template-columns:1fr
  }
}

.reserve-summary-card{
  --reserve-accent:var(--text-muted);
  --reserve-accent-soft:rgba(138,146,163,.13);
  position:relative;
  overflow:hidden;
  padding:14px 16px 14px 19px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--surface)
}

.reserve-summary-card.total{
  --reserve-accent:#6d5bd0;
  --reserve-accent-soft:rgba(109,91,208,.13)
}

.reserve-summary-card.goals{
  --reserve-accent:#8674dd;
  --reserve-accent-soft:rgba(134,116,221,.13)
}

.reserve-summary-card.debts{
  --reserve-accent:var(--blue);
  --reserve-accent-soft:rgba(76,127,209,.13)
}

/* Тонкий левый accent */
.reserve-summary-card::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:3px;
  background:var(--reserve-accent);
  opacity:.5;
  pointer-events:none
}

/* Очень слабый tint в углу - паттерн .analytics-summary-card, без blur */
.reserve-summary-card::after{
  content:"";
  position:absolute;
  right:0;
  bottom:0;
  width:44px;
  height:44px;
  background:var(--reserve-accent);
  opacity:.06;
  border-radius:100% 0 0 0;
  transform:translate(30%,30%);
  pointer-events:none
}

.reserve-summary-head{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:8px
}

.reserve-summary-icon{
  width:26px;
  height:26px;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:var(--reserve-accent-soft);
  color:var(--reserve-accent);
  flex:none
}

.reserve-summary-icon svg{
  display:block
}

.reserve-summary-label{
  margin:0;
  color:var(--text-muted);
  font-size:10px;
  font-weight:700;
  letter-spacing:.7px;
  text-transform:uppercase
}

.reserve-summary-value{
  display:block;
  font-size:20px;
  font-weight:600;
  color:var(--text)
}

/* ============ «Отложено»: распределение ============ */

/* Режим «Отложить» в модалке операции: категория и шаблоны скрыты */
.reserve-hidden{
  display:none!important
}

/* Режим «Доход» в модалке операции: без «Кому принадлежит»,
   с собственным блоком «Тип дохода» */
.compact-transaction-form.income-mode .owner-section{
  display:none!important
}

/* В режиме расхода блок «Тип дохода» скрыт — категория выбирается пикером */
.compact-transaction-form:not(.income-mode) .templates-section{
  display:none!important
}

/* Выбранный тип дохода (single-select chips) */
.template-btn.active{
  background:var(--primary-soft);
  border-color:var(--primary);
  color:var(--primary)
}

.quick-templates[hidden]{
  display:none!important
}

/* Бейдж «Отложено» в списке операций */
.reserve-tag{
  background:rgba(109,91,208,.15);
  color:#a795ec
}

/* Двухколоночная зона распределения: цели / кредиты */
.reserve-alloc{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
  gap:16px;
  margin-top:20px
}

.reserve-alloc-col{
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px;
  background:var(--surface)
}

.reserve-alloc-head h3{
  margin:0 0 2px;
  font-size:14px;
  font-weight:600;
  color:var(--text)
}

.reserve-alloc-head p{
  margin:0 0 14px;
  color:var(--text-muted);
  font-size:12px
}

.reserve-alloc-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 0;
  border-top:1px solid var(--line)
}

.reserve-alloc-info{
  flex:1 1 100%
}

.reserve-alloc-title{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  margin-bottom:6px
}

.reserve-alloc-title span{
  color:var(--text);
  font-size:13px;
  font-weight:500
}

.reserve-alloc-title strong{
  color:var(--text-muted);
  font-size:12px;
  font-weight:500;
  white-space:nowrap
}

.reserve-alloc-progress{
  height:4px;
  border-radius:2px;
  background:var(--reserve-accent-soft,rgba(138,146,163,.13));
  overflow:hidden
}

.reserve-alloc-progress i{
  display:block;
  height:100%;
  border-radius:2px;
  background:#6d5bd0
}

.reserve-alloc-actions{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px
}

.reserve-quick-btn{
  padding:4px 10px;
  border:1px solid var(--line);
  border-radius:8px;
  background:transparent;
  color:var(--text-muted);
  font-size:11px;
  font-weight:600;
  cursor:pointer;
  transition:color .15s,border-color .15s
}

.reserve-quick-btn:hover:not(:disabled){
  color:#a795ec;
  border-color:#6d5bd0
}

.reserve-quick-btn:disabled{
  opacity:.4;
  cursor:default
}

.reserve-amount-input{
  width:76px;
  padding:4px 8px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--surface-elevated);
  color:var(--text);
  font-size:12px
}

.reserve-amount-input:disabled{
  opacity:.4
}

.reserve-send-btn{
  font-size:12px;
  padding:5px 12px
}

.reserve-alloc-empty{
  margin:0;
  padding:10px 0 2px;
  color:var(--text-muted);
  font-size:12px
}

/* ============================================
   CALENDAR PAGE — личный календарь
   (calendarEvents: события + заметки на день)
   ============================================ */

/* Muted-цвета типов событий: dot, слабый tint pill, tag.
   Не заливают ячейку ярко и подобраны читаемыми на светлой и тёмной теме */
[data-ev-type="personal"]{--ev-color:#9186CC;--ev-soft:rgba(145,134,204,.14)}
[data-ev-type="work"]{--ev-color:#D9A03F;--ev-soft:rgba(217,160,63,.13)}
[data-ev-type="health"]{--ev-color:#6FA98C;--ev-soft:rgba(111,169,140,.14)}
[data-ev-type="finance"]{--ev-color:#6C93D6;--ev-soft:rgba(108,147,214,.14)}
[data-ev-type="meeting"]{--ev-color:#D98A52;--ev-soft:rgba(217,138,82,.14)}
[data-ev-type="other"]{--ev-color:#8A93A6;--ev-soft:rgba(138,147,166,.15)}

/* Слева большая месячная сетка, справа панель выбранного дня (~72-76% / 24-28%) */
.calendar-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 340px;
  gap:16px;
  align-items:start
}

/* Месячная сетка */
.calendar-panel{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  padding:14px;
  min-width:0
}

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

.calendar-nav{
  display:flex;
  align-items:center;
  gap:6px
}

.calendar-month-label{
  min-width:150px;
  text-align:center;
  font-size:15px;
  font-weight:700;
  color:var(--text)
}

.calendar-today-btn{
  font-size:12px;
  padding:6px 14px
}

.calendar-weekdays{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  padding-bottom:6px
}

.calendar-weekdays span{
  text-align:center;
  font-size:11px;
  font-weight:600;
  color:var(--text-muted);
  text-transform:uppercase;
  letter-spacing:.04em
}

/* Общая сетка с тонкими внутренними границами — не отдельные карточки */
.calendar-grid{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  grid-auto-rows:minmax(112px,1fr);
  border-top:1px solid var(--line);
  border-left:1px solid var(--line)
}

.calendar-day{
  appearance:none;
  background:var(--surface);
  border:none;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:8px;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:4px;
  min-width:0;
  min-height:0;
  overflow:hidden;
  font:inherit;
  color:var(--text);
  text-align:left;
  cursor:pointer;
  transition:background .12s
}

.calendar-day:hover{
  background:var(--primary-soft)
}

.calendar-day:focus-visible{
  outline:2px solid var(--primary);
  outline-offset:-2px
}

/* Выбранный день: тонкая синяя рамка + очень слабая синяя подложка */
.calendar-day.is-selected{
  background:var(--primary-soft);
  box-shadow:inset 0 0 0 1.5px var(--primary);
  z-index:1
}

.calendar-day.is-adjacent .calendar-day-number{
  opacity:.45
}

.calendar-day.is-adjacent .calendar-event-pill{
  opacity:.5
}

.calendar-day-number{
  width:22px;
  height:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  font-size:12px;
  font-weight:600;
  color:var(--text-muted);
  flex-shrink:0
}

.calendar-day.is-selected .calendar-day-number{
  color:var(--text)
}

/* Сегодня — мягко: номер в небольшом синем круге */
.calendar-day-number.is-today{
  background:var(--primary);
  color:#fff
}

/* Event pill внутри ячейки: цветная точка + название + время */
.calendar-event-pill{
  display:flex;
  align-items:center;
  gap:4px;
  min-width:0;
  padding:2px 6px;
  border-radius:6px;
  background:var(--ev-soft,rgba(138,147,166,.12));
  font-size:10.5px;
  line-height:1.35;
  white-space:nowrap;
  overflow:hidden
}

.calendar-event-pill::before{
  content:'';
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--ev-color,var(--text-muted));
  flex-shrink:0
}

.calendar-pill-title{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  color:var(--text);
  font-weight:600
}

.calendar-pill-time{
  flex-shrink:0;
  font-size:10px;
  color:var(--text-muted)
}

.calendar-day-more{
  font-size:10px;
  font-weight:600;
  color:var(--text-muted)
}

/* Панель выбранного дня */
.calendar-day-panel{
  position:sticky;
  top:16px;
  max-height:calc(100vh - 32px);
  overflow-y:auto;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:14px;
  min-width:0
}

.calendar-day-head h3,
.calendar-day-head h4,
.calendar-day-note h4,
.calendar-upcoming h4{
  margin:0
}

.calendar-day-title{
  font-size:18px;
  font-weight:700;
  color:var(--text)
}

.calendar-day-subtitle{
  margin:3px 0 0;
  font-size:12px;
  color:var(--text-muted)
}

.calendar-day-events{
  display:flex;
  flex-direction:column;
  gap:8px
}

.calendar-day-event{
  border:1px solid var(--line);
  border-left:3px solid var(--ev-color,var(--text-muted));
  border-radius:10px;
  padding:9px 10px;
  display:flex;
  flex-direction:column;
  gap:4px;
  background:var(--surface)
}

.calendar-day-event-head{
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0
}

.calendar-event-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--ev-color,var(--text-muted));
  flex-shrink:0
}

.calendar-event-name{
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:13px;
  font-weight:600;
  color:var(--text)
}

.calendar-event-type-tag{
  flex-shrink:0;
  padding:2px 7px;
  border-radius:6px;
  font-size:10px;
  font-weight:600;
  color:var(--ev-color,var(--text-muted));
  background:var(--ev-soft,rgba(138,147,166,.12));
  white-space:nowrap
}

.calendar-event-actions{
  display:flex;
  gap:2px;
  flex-shrink:0
}

.calendar-event-actions .text-danger{
  color:var(--red)
}

.calendar-event-time{
  margin:0;
  font-size:12px;
  font-weight:600;
  color:var(--text-muted)
}

.calendar-event-meta{
  margin:0;
  display:flex;
  align-items:center;
  gap:5px;
  font-size:11.5px;
  color:var(--text-muted)
}

.calendar-event-meta svg{
  flex-shrink:0
}

.calendar-event-note{
  margin:0;
  font-size:11.5px;
  color:var(--text-muted);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden
}

.calendar-day-empty{
  border:1px dashed var(--line);
  border-radius:10px;
  padding:16px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  text-align:center
}

.calendar-day-empty p{
  margin:0;
  font-size:12.5px;
  color:var(--text-muted)
}

.calendar-day-add{
  width:100%;
  justify-content:center;
  font-size:12.5px
}

/* Заметки на день */
.calendar-day-note h4,
.calendar-upcoming h4{
  margin-bottom:8px;
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--text-muted)
}

.calendar-day-note textarea{
  width:100%;
  box-sizing:border-box;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--surface-elevated);
  color:var(--text);
  font:inherit;
  font-size:12.5px;
  padding:8px 10px;
  resize:vertical;
  min-height:64px
}

.calendar-day-note textarea:focus{
  outline:none;
  border-color:var(--primary)
}

.calendar-note-status{
  margin:4px 0 0;
  min-height:14px;
  font-size:11px;
  color:var(--text-muted)
}

/* Ближайшие дела */
.calendar-upcoming-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:4px
}

.calendar-upcoming-item{
  appearance:none;
  width:100%;
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 8px;
  border:none;
  border-radius:8px;
  background:transparent;
  font:inherit;
  color:var(--text);
  text-align:left;
  cursor:pointer;
  transition:background .12s
}

.calendar-upcoming-item:hover{
  background:var(--primary-soft)
}

.calendar-upcoming-name{
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:12.5px
}

.calendar-upcoming-date{
  flex-shrink:0;
  font-size:11.5px;
  color:var(--text-muted)
}

.calendar-upcoming-empty{
  margin:0;
  font-size:12px;
  color:var(--text-muted)
}

/* Modal события: компактная форма.
   .stack-form label задаёт grid-column-layout — возвращаем строку для toggle */
.stack-form .calendar-allday-toggle,
.calendar-allday-toggle{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:8px;
  cursor:pointer;
  font-size:13px
}

.calendar-allday-toggle input{
  width:16px;
  height:16px;
  accent-color:var(--primary);
  cursor:pointer
}

.calendar-type-chips{
  display:flex;
  flex-wrap:wrap;
  gap:6px
}

.calendar-type-chip{
  position:relative
}

.calendar-type-chip input{
  position:absolute;
  opacity:0;
  width:1px;
  height:1px
}

.calendar-type-chip span{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:4px 10px;
  border:1px solid var(--line);
  border-radius:16px;
  font-size:11.5px;
  font-weight:600;
  color:var(--text-muted);
  cursor:pointer;
  transition:color .12s,border-color .12s,background .12s
}

.calendar-type-chip span::before{
  content:'';
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--ev-color,var(--text-muted))
}

.calendar-type-chip input:checked + span{
  border-color:var(--ev-color,var(--primary));
  background:var(--ev-soft,var(--primary-soft));
  color:var(--text)
}

.calendar-type-chip input:focus-visible + span{
  outline:2px solid var(--primary);
  outline-offset:1px
}

/* Tablet: календарь сверху, панель дня ниже */
@media (max-width:1100px){
  .calendar-layout{
    grid-template-columns:1fr
  }

  .calendar-day-panel{
    position:static;
    max-height:none;
    overflow-y:visible
  }
}

/* Mobile: компактная сетка месяца без горизонтального скролла страницы */
@media (max-width:600px){
  .calendar-panel{
    padding:10px
  }

  .calendar-grid{
    grid-auto-rows:minmax(64px,1fr)
  }

  .calendar-day{
    padding:5px;
    gap:3px
  }

  .calendar-day-number{
    width:18px;
    height:18px;
    font-size:10.5px
  }

  .calendar-event-pill{
    font-size:9.5px;
    padding:1px 4px
  }

  .calendar-pill-time{
    display:none
  }

  .calendar-weekdays span{
    font-size:10px
  }

  .calendar-month-label{
    min-width:110px;
    font-size:14px
  }

  .calendar-event-note{
    -webkit-line-clamp:1
  }

  .calendar-day-panel{
    padding:12px
  }
}

/* ================================================== */
/* ===== MOBILE APP SHELL (мобильная веб-версия) ==== */
/* ================================================== */
/* Отдельный presentation layer: body.ui-mobile показывает .mobile-app   */
/* и прячет desktop .app; body.ui-desktop — наоборот. Тема — те же      */
/* CSS-переменные (--surface/--line/--text/...), поэтому светлая и      */
/* тёмная темы работают без отдельных правил.                           */

.mobile-app[hidden]{
  display:none !important
}

body.ui-mobile .app{
  display:none !important
}

body.ui-desktop .mobile-app{
  display:none !important
}

/* --- Shell --- */

.mobile-app{
  display:flex;
  flex-direction:column;
  height:100vh;
  height:100dvh;
  background:var(--bg);
  color:var(--text);
  font-family:inherit
}

.mobile-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-height:52px;
  padding:calc(env(safe-area-inset-top) + 6px) 14px 6px;
  background:var(--surface);
  border-bottom:1px solid var(--line);
  position:relative;
  z-index:20
}

.mobile-header-title{
  font-size:19px;
  font-weight:700
}

.mobile-header-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  margin-right:-8px;
  border:none;
  border-radius:10px;
  background:transparent;
  color:var(--text);
  cursor:pointer
}

.mobile-header-btn svg{
  width:22px;
  height:22px
}

.mobile-header-btn[hidden]{
  display:none
}

.mobile-content{
  flex:1;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:14px 14px 24px;
  overscroll-behavior:contain
}

/* --- Bottom navigation --- */

.mobile-bottom-nav{
  display:grid;
  grid-template-columns:1fr 1fr auto 1fr 1fr;
  align-items:center;
  gap:2px;
  padding:6px 4px calc(env(safe-area-inset-bottom) + 6px);
  background:var(--surface);
  border-top:1px solid var(--line);
  position:relative;
  z-index:20
}

.mobile-nav-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  min-height:48px;
  padding:6px 2px 4px;
  border:none;
  border-radius:10px;
  background:transparent;
  color:var(--text-muted);
  font-size:11px;
  cursor:pointer
}

.mobile-nav-item svg{
  width:22px;
  height:22px
}

.mobile-nav-item.active{
  color:var(--primary)
}

.mobile-nav-add{
  display:flex;
  align-items:center;
  justify-content:center;
  width:54px;
  height:54px;
  margin:-16px auto 0;
  border:none;
  border-radius:50%;
  background:var(--primary);
  color:#fff;
  box-shadow:0 6px 16px rgba(109,91,208,.4);
  cursor:pointer
}

.mobile-nav-add svg{
  width:26px;
  height:26px
}

.mobile-nav-item:active,
.mobile-header-btn:active,
.mobile-nav-add:active{
  opacity:.75
}

/* --- Типографика/секции --- */

.mobile-section-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  margin:18px 2px 8px
}

.mobile-section-head h2{
  margin:0;
  font-size:15px;
  font-weight:700
}

.mobile-section-link{
  border:none;
  background:transparent;
  color:var(--primary);
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  padding:6px 0 6px 12px;
  min-height:44px
}

.mobile-section-note{
  font-size:12px;
  color:var(--text-muted)
}

.mobile-page-note{
  margin:0 2px 10px
}

.mobile-card{
  display:block;
  width:100%;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--surface);
  padding:4px 12px;
  box-shadow:var(--shadow-sm)
}

.mobile-empty-line{
  margin:0;
  padding:16px 2px;
  font-size:13px;
  color:var(--text-muted);
  text-align:center;
  line-height:1.5
}

/* --- Главная: карточка баланса --- */

.mobile-balance-card{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--surface);
  padding:16px 16px 14px;
  box-shadow:var(--shadow-sm)
}

.mobile-balance-label{
  margin:0 0 2px;
  font-size:13px;
  color:var(--text-muted)
}

.mobile-balance-amount{
  margin:0 0 12px;
  font-size:32px;
  font-weight:800;
  letter-spacing:-.5px
}

.mobile-balance-amount.is-reserve{
  color:var(--violet)
}

.mobile-balance-row{
  display:flex;
  gap:18px;
  flex-wrap:wrap
}

.mobile-balance-row > div{
  display:flex;
  flex-direction:column;
  gap:1px
}

.mobile-balance-row span{
  font-size:11px;
  color:var(--text-muted)
}

.mobile-balance-row strong,
.is-income{
  color:var(--green)
}

.is-expense{
  color:var(--red)
}

.is-reserve{
  color:var(--violet)
}

.is-payment{
  color:var(--amber)
}

/* --- Быстрые действия --- */

.mobile-quick-actions{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px
}

.mobile-quick-actions button{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  min-height:66px;
  padding:8px 4px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--surface);
  color:var(--text);
  font-size:12px;
  cursor:pointer
}

.mobile-quick-actions button span{
  display:flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  border-radius:50%;
  font-size:16px;
  font-weight:700
}

.mobile-quick-actions .is-income{
  background:var(--green-soft);
  color:var(--green)
}

.mobile-quick-actions .is-expense{
  background:var(--red-soft);
  color:var(--red)
}

.mobile-quick-actions .is-reserve{
  background:rgba(139,126,200,.14);
  color:var(--violet)
}

.mobile-quick-actions > button > span:last-child{
  background:none;
  color:var(--text-muted)
}

/* --- Строки операций --- */

.mobile-tx-row{
  display:flex;
  align-items:center;
  gap:11px;
  width:100%;
  min-height:56px;
  padding:8px 0;
  border:none;
  border-bottom:1px solid var(--line);
  background:transparent;
  color:var(--text);
  text-align:left;
  cursor:pointer
}

.mobile-card > *:last-child{
  border-bottom:none
}

.mobile-tx-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  width:38px;
  height:38px;
  border-radius:12px;
  color:var(--tx-color, var(--text-muted));
  background:color-mix(in srgb, var(--tx-color, var(--text-muted)) 12%, transparent)
}

.mobile-tx-icon svg{
  width:19px;
  height:19px
}

.mobile-tx-main{
  display:flex;
  flex-direction:column;
  gap:1px;
  min-width:0;
  flex:1
}

.mobile-tx-name{
  font-size:14px;
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}

.mobile-tx-sub{
  font-size:12px;
  color:var(--text-muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}

.mobile-tx-amount{
  flex-shrink:0;
  font-size:14px;
  font-weight:700
}

.mobile-tx-amount.is-expense{
  color:var(--red)
}

.mobile-tx-amount.is-income{
  color:var(--green)
}

.mobile-tx-amount.is-reserve{
  color:var(--violet)
}

/* --- Ближайшее / мини-блоки --- */

.mobile-upcoming-row{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:48px;
  padding:8px 0;
  border-bottom:1px solid var(--line);
  font-size:13px
}

.mobile-upcoming-date{
  flex-shrink:0;
  min-width:52px;
  color:var(--text-muted);
  font-size:12px
}

.mobile-upcoming-name{
  flex:1;
  min-width:0;
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}

.mobile-upcoming-value{
  flex-shrink:0;
  font-weight:700
}

.mobile-budget-mini{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:14px 12px;
  cursor:pointer;
  text-align:left
}

.mobile-budget-mini-head{
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-size:13px
}

.mobile-budget-mini-remaining{
  font-size:12px;
  color:var(--text-muted)
}

.mobile-calendar-mini{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-height:44px;
  padding:12px;
  font-size:13px;
  cursor:pointer;
  text-align:left
}

.mobile-calendar-mini-next{
  font-size:12px;
  color:var(--text-muted)
}

/* --- Прогресс --- */

.mobile-progress{
  display:block;
  height:7px;
  border-radius:4px;
  background:var(--line);
  overflow:hidden
}

.mobile-progress i{
  display:block;
  height:100%;
  border-radius:4px;
  background:var(--primary)
}

/* --- Операции: поиск + сегменты + группы --- */

.mobile-ops-toolbar{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:6px
}

.mobile-search{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:44px;
  padding:0 12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--surface)
}

.mobile-search svg{
  width:16px;
  height:16px;
  color:var(--text-muted);
  flex-shrink:0
}

.mobile-search input{
  flex:1;
  min-width:0;
  border:none;
  background:transparent;
  color:var(--text);
  font-size:14px;
  outline:none
}

.mobile-segmented{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:4px;
  padding:4px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--surface)
}

.mobile-segmented button{
  min-height:38px;
  border:none;
  border-radius:9px;
  background:transparent;
  color:var(--text-muted);
  font-size:13px;
  font-weight:600;
  cursor:pointer
}

.mobile-segmented button.active{
  background:var(--primary);
  color:#fff
}

.mobile-op-group-date{
  margin:14px 2px 6px;
  font-size:12px;
  font-weight:700;
  color:var(--text-muted);
  text-transform:uppercase;
  letter-spacing:.4px
}

.mobile-op-group:first-child .mobile-op-group-date{
  margin-top:8px
}

.mobile-page-add-btn{
  margin-top:14px;
  min-height:48px
}

/* --- Шторки (bottom sheet / full-screen) --- */

.mobile-sheet-backdrop{
  position:fixed;
  inset:0;
  z-index:120;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  background:rgba(24,29,45,.48);
  opacity:0;
  transition:opacity .18s
}

.mobile-sheet-backdrop.is-open{
  opacity:1
}

.mobile-sheet{
  display:flex;
  flex-direction:column;
  width:min(430px,100%);
  max-height:88vh;
  max-height:88dvh;
  overflow-y:auto;
  border-radius:18px 18px 0 0;
  background:var(--surface);
  padding:8px 16px calc(env(safe-area-inset-bottom) + 16px);
  transform:translateY(24px);
  transition:transform .18s
}

.mobile-sheet-backdrop.is-open .mobile-sheet{
  transform:translateY(0)
}

.mobile-sheet.is-full{
  height:100vh;
  height:100dvh;
  max-height:none;
  border-radius:0;
  transform:translateY(100%)
}

.mobile-sheet-backdrop.is-open .mobile-sheet.is-full{
  transform:translateY(0)
}

.mobile-sheet-grip{
  width:40px;
  height:4px;
  margin:4px auto 10px;
  border-radius:2px;
  background:var(--line)
}

.mobile-sheet-title{
  margin:0 0 14px;
  font-size:18px
}

.mobile-sheet-actions{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
  margin-bottom:14px
}

.mobile-sheet-action{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:52px;
  padding:8px 12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--bg);
  color:var(--text);
  font-size:14px;
  font-weight:600;
  cursor:pointer
}

.mobile-sheet-action-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  border-radius:50%;
  font-weight:700
}

.mobile-sheet-action-icon.is-income{
  background:var(--green-soft);
  color:var(--green)
}

.mobile-sheet-action-icon.is-expense{
  background:var(--red-soft);
  color:var(--red)
}

.mobile-sheet-action-icon.is-reserve{
  background:rgba(139,126,200,.14);
  color:var(--violet)
}

.mobile-sheet-action-icon.is-event,
.mobile-sheet-action-icon.is-task{
  background:var(--primary-soft);
  color:var(--primary);
  font-size:15px
}

.mobile-sheet-cancel{
  min-height:46px
}

/* --- Полноэкранная форма операции --- */

.mobile-page-head{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:52px;
  margin:0 -16px 4px;
  padding:calc(env(safe-area-inset-top) + 4px) 10px 4px 6px;
  border-bottom:1px solid var(--line)
}

.mobile-page-title{
  margin:0;
  font-size:18px
}

.mobile-back-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border:none;
  border-radius:10px;
  background:transparent;
  color:var(--text);
  cursor:pointer
}

.mobile-back-btn svg{
  width:22px;
  height:22px
}

.mobile-tx-form{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding-top:12px
}

.mobile-amount-input{
  width:100%;
  border:none;
  border-bottom:2px solid var(--line);
  background:transparent;
  color:var(--text);
  font-size:34px;
  font-weight:800;
  padding:4px 2px 8px;
  outline:none
}

.mobile-amount-input:focus{
  border-bottom-color:var(--primary)
}

.mobile-field{
  display:flex;
  flex-direction:column;
  gap:6px
}

.mobile-field-label{
  font-size:12px;
  color:var(--text-muted)
}

.mobile-field input{
  min-height:46px;
  padding:8px 12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--bg);
  color:var(--text);
  font-size:15px;
  outline:none
}

.mobile-field input:focus{
  border-color:var(--primary)
}

.mobile-field-row{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:52px;
  padding:8px 12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--bg);
  color:var(--text);
  cursor:pointer;
  text-align:left
}

.mobile-field-row[hidden]{
  display:none
}

.mobile-field-icon{
  display:flex;
  color:var(--text-muted)
}

.mobile-field-icon svg{
  width:20px;
  height:20px
}

.mobile-field-text{
  flex:1;
  font-size:14px;
  font-weight:600
}

.mobile-field-chevron{
  width:16px;
  height:16px;
  color:var(--text-muted);
  flex-shrink:0
}

.mobile-quick-templates{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px
}

.mobile-quick-templates[hidden]{
  display:none
}

.mobile-template-btn{
  min-height:44px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--bg);
  color:var(--text-muted);
  font-size:13px;
  font-weight:600;
  cursor:pointer
}

.mobile-template-btn.active{
  border-color:var(--primary);
  background:var(--primary-soft);
  color:var(--primary)
}

.mobile-owner-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px
}

.mobile-owner-chip{
  min-height:40px;
  padding:8px 14px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--bg);
  color:var(--text-muted);
  font-size:13px;
  cursor:pointer
}

.mobile-owner-chip.active{
  border-color:var(--primary);
  background:var(--primary);
  color:#fff
}

.mobile-form-error{
  margin:0;
  min-height:18px;
  font-size:12px;
  color:var(--red)
}

.mobile-tx-actions{
  display:flex;
  gap:10px;
  margin-top:2px
}

.mobile-tx-actions .mobile-save-btn{
  flex:1;
  min-height:50px;
  font-size:15px
}

.mobile-tx-actions .btn{
  min-height:50px
}

/* --- Category picker --- */

.mobile-picker-search{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:46px;
  margin:10px 0;
  padding:0 12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--bg)
}

.mobile-picker-search svg{
  width:16px;
  height:16px;
  color:var(--text-muted);
  flex-shrink:0
}

.mobile-picker-search input{
  flex:1;
  min-width:0;
  border:none;
  background:transparent;
  color:var(--text);
  font-size:15px;
  outline:none
}

.mobile-picker-list{
  display:flex;
  flex-direction:column;
  flex:1
}

.mobile-picker-item{
  display:flex;
  align-items:center;
  gap:11px;
  width:100%;
  min-height:52px;
  padding:8px 0;
  border:none;
  border-bottom:1px solid var(--line);
  background:transparent;
  color:var(--text);
  text-align:left;
  cursor:pointer
}

.mobile-picker-list .mobile-picker-item:last-child{
  border-bottom:none
}

.mobile-picker-item-name{
  flex:1;
  min-width:0;
  font-size:14px;
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}

.mobile-picker-item-parent{
  flex-shrink:0;
  font-size:12px;
  color:var(--text-muted)
}

.mobile-picker-item-count{
  flex-shrink:0;
  min-width:24px;
  padding:2px 6px;
  border-radius:999px;
  background:var(--bg);
  font-size:11px;
  color:var(--text-muted);
  text-align:center
}

/* --- Календарь --- */

.mobile-cal-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:8px
}

.mobile-cal-toolbar strong{
  font-size:16px
}

.mobile-cal-card{
  padding:10px 8px
}

.mobile-cal-weekdays{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  margin-bottom:2px
}

.mobile-cal-weekdays span{
  padding:4px 0;
  font-size:11px;
  font-weight:600;
  color:var(--text-muted);
  text-align:center
}

.mobile-cal-grid{
  display:grid;
  grid-template-columns:repeat(7,1fr)
}

.mobile-cal-cell{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  min-height:44px;
  padding:4px 0 5px;
  border:none;
  border-radius:10px;
  background:transparent;
  cursor:pointer
}

.mobile-cal-cell.is-adjacent{
  opacity:.3
}

.mobile-cal-cell.is-selected{
  background:var(--primary-soft)
}

.mobile-cal-day{
  display:flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border-radius:50%;
  font-size:13px;
  color:var(--text)
}

.mobile-cal-day.is-today{
  background:var(--primary);
  color:#fff;
  font-weight:700
}

.mobile-cal-dots{
  display:flex;
  gap:3px;
  min-height:5px
}

.mobile-cal-dots i{
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--primary)
}

.mobile-cal-dots i[data-ev-type="work"]{
  background:var(--blue)
}

.mobile-cal-dots i[data-ev-type="health"]{
  background:var(--red)
}

.mobile-cal-dots i[data-ev-type="finance"]{
  background:var(--amber)
}

.mobile-cal-dots i[data-ev-type="meeting"]{
  background:var(--green)
}

.mobile-event-row{
  display:flex;
  align-items:center;
  gap:9px;
  min-height:48px;
  padding:8px 0;
  border-bottom:1px solid var(--line)
}

.mobile-event-dot{
  flex-shrink:0;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--primary)
}

.mobile-event-row[data-ev-type="work"] .mobile-event-dot{
  background:var(--blue)
}

.mobile-event-row[data-ev-type="health"] .mobile-event-dot{
  background:var(--red)
}

.mobile-event-row[data-ev-type="finance"] .mobile-event-dot{
  background:var(--amber)
}

.mobile-event-row[data-ev-type="meeting"] .mobile-event-dot{
  background:var(--green)
}

.mobile-event-main{
  display:flex;
  flex-direction:column;
  min-width:0;
  flex:1
}

.mobile-event-time{
  flex-shrink:0;
  font-size:12px;
  color:var(--text-muted)
}

.mobile-icon-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  width:40px;
  height:40px;
  margin:-6px -4px;
  border:none;
  border-radius:10px;
  background:transparent;
  color:var(--text-muted);
  font-size:15px;
  cursor:pointer
}

.mobile-icon-btn.is-danger{
  color:var(--red)
}

/* --- Бюджет --- */

.mobile-budget-hero{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  padding:20px 16px
}

.mobile-budget-hero-sub{
  margin:0;
  font-size:13px;
  color:var(--text-muted)
}

.mobile-donut{
  display:flex;
  align-items:center;
  justify-content:center;
  width:150px;
  height:150px;
  border-radius:50%
}

.mobile-donut.is-small{
  width:110px;
  height:110px;
  flex-shrink:0
}

.mobile-donut-hole{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:68%;
  height:68%;
  border-radius:50%;
  background:var(--surface);
  text-align:center
}

.mobile-donut-hole strong{
  font-size:17px
}

.mobile-donut.is-small .mobile-donut-hole strong{
  font-size:13px
}

.mobile-donut-hole span{
  font-size:11px;
  color:var(--text-muted)
}

.mobile-budget-cat{
  display:flex;
  align-items:center;
  gap:11px;
  width:100%;
  min-height:60px;
  padding:10px 0;
  border:none;
  border-bottom:1px solid var(--line);
  background:transparent;
  color:var(--text);
  text-align:left;
  cursor:pointer
}

.mobile-budget-cat-main{
  display:flex;
  flex-direction:column;
  gap:5px;
  flex:1;
  min-width:0
}

.mobile-budget-cat-top{
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-size:13px;
  font-weight:600
}

.mobile-budget-cat-sums{
  font-size:12px;
  color:var(--text-muted)
}

/* --- Цели / Долги / История (общие карточки) --- */

.mobile-stack-list{
  display:flex;
  flex-direction:column;
  gap:10px
}

.mobile-goal-card.is-done{
  border-color:var(--green)
}

.mobile-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 0 6px
}

.mobile-card-head h3{
  margin:0;
  font-size:15px;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis
}

.mobile-card-progress{
  display:flex;
  align-items:center;
  gap:10px;
  padding:4px 0
}

.mobile-card-progress .mobile-progress{
  flex:1
}

.mobile-card-progress strong{
  font-size:13px;
  flex-shrink:0
}

.mobile-card-meta{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:4px 12px;
  padding:2px 0 6px;
  font-size:12px;
  color:var(--text-muted)
}

.mobile-card-meta strong{
  color:var(--text)
}

.mobile-card-meta.is-sums{
  display:flex;
  gap:12px;
  justify-content:flex-start;
  flex-wrap:wrap
}

.mobile-card-status{
  font-weight:600
}

.mobile-card-status.is-green{
  color:var(--green)
}

.mobile-card-status.is-red{
  color:var(--red)
}

.mobile-card-status.is-amber{
  color:var(--amber)
}

.mobile-card-status.is-blue{
  color:var(--blue)
}

.mobile-card-status.is-neutral{
  color:var(--text-muted)
}

.mobile-card-actions{
  display:flex;
  gap:10px;
  padding:4px 0 10px
}

.mobile-card-actions .btn{
  flex:1;
  min-height:42px;
  font-size:13px
}

.is-danger-text{
  color:var(--red) !important
}

/* --- Отложено --- */

.mobile-reserve-hero .mobile-reserve-summary{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  padding-top:10px;
  border-top:1px solid var(--line)
}

.mobile-reserve-summary > div{
  display:flex;
  flex-direction:column;
  gap:2px;
  text-align:center
}

.mobile-reserve-summary span{
  font-size:11px;
  color:var(--text-muted)
}

.mobile-reserve-summary strong{
  font-size:14px
}

.mobile-alloc-row{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:10px 0;
  border-bottom:1px solid var(--line)
}

.mobile-alloc-name{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  font-weight:600
}

.mobile-alloc-name i{
  font-style:normal;
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.5px;
  color:var(--violet);
  background:rgba(139,126,200,.14);
  padding:2px 7px;
  border-radius:999px
}

.mobile-alloc-sums{
  font-size:12px;
  color:var(--text-muted)
}

/* --- Планы --- */

.mobile-plans-summary{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin:12px 0
}

.mobile-plans-summary > div{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1px;
  padding:10px 4px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--surface)
}

.mobile-plans-summary strong{
  font-size:18px
}

.mobile-plans-summary span{
  font-size:11px;
  color:var(--text-muted)
}

/* --- Аналитика --- */

.mobile-analytics-summary{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  padding:14px 12px
}

.mobile-analytics-summary > div{
  display:flex;
  flex-direction:column;
  gap:2px;
  text-align:center
}

.mobile-analytics-summary span{
  font-size:11px;
  color:var(--text-muted)
}

.mobile-analytics-summary strong{
  font-size:15px
}

.mobile-analytics-top{
  display:flex;
  align-items:center;
  gap:16px;
  padding:12px 0
}

.mobile-analytics-cat-list{
  display:flex;
  flex-direction:column;
  gap:9px;
  flex:1;
  min-width:0
}

.mobile-analytics-cat{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px
}

.mobile-analytics-cat .category-dot{
  width:9px;
  height:9px;
  flex-shrink:0
}

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

.mobile-analytics-cat-pct{
  min-width:32px;
  text-align:right;
  color:var(--text-muted)
}

/* --- Ещё / Настройки --- */

.mobile-more-list{
  padding:0 12px
}

.mobile-more-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  width:100%;
  min-height:52px;
  padding:12px 0;
  border:none;
  border-bottom:1px solid var(--line);
  background:transparent;
  color:var(--text);
  font-size:15px;
  text-align:left;
  cursor:pointer
}

.mobile-more-list .mobile-more-row:last-child{
  border-bottom:none
}

.mobile-more-row.is-danger{
  color:var(--red)
}

.mobile-settings-mode{
  padding:4px 12px
}

.mobile-settings-mode-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  width:100%;
  min-height:50px;
  padding:10px 0;
  border:none;
  border-bottom:1px solid var(--line);
  background:transparent;
  color:var(--text);
  font-size:15px;
  text-align:left;
  cursor:pointer
}

.mobile-settings-mode-row.active{
  color:var(--primary);
  font-weight:700
}

.mobile-settings-mode .mobile-settings-mode-row:last-of-type{
  border-bottom:none
}

.mobile-settings-check{
  color:var(--primary)
}

.mobile-settings-hint{
  margin:0;
  padding:10px 0 12px;
  font-size:12px;
  color:var(--text-muted);
  line-height:1.5
}

/* --- Селектор «Интерфейс» в desktop-настройках --- */

.ui-mode-selector{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px
}

.ui-mode-option{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--surface);
  color:var(--text-muted);
  font-size:13px;
  cursor:pointer
}

.ui-mode-option.active{
  border-color:var(--primary);
  background:var(--primary-soft);
  color:var(--primary);
  font-weight:600
}

/* --- Превью mobile UI на desktop-экране (ручной режим) --- */

body.ui-mobile-preview .mobile-app{
  max-width:430px;
  margin:0 auto;
  border-left:1px solid var(--line);
  border-right:1px solid var(--line);
  box-shadow:var(--shadow-lg)
}

/* --- Desktop-модалки и toast внутри mobile UI: bottom sheet --- */

body.ui-mobile .modal-backdrop,
body.ui-mobile .confirm-backdrop{
  align-items:flex-end;
  padding:0
}

body.ui-mobile .modal{
  width:100%;
  max-width:560px;
  max-height:92vh;
  max-height:92dvh;
  margin:0 auto;
  border-radius:18px 18px 0 0;
  padding:20px 16px calc(env(safe-area-inset-bottom) + 16px);
  animation:mobile-sheet-up .18s ease
}

@keyframes mobile-sheet-up{
  from{
    transform:translateY(30px)
  }
  to{
    transform:translateY(0)
  }
}

body.ui-mobile .modal.small{
  width:100%
}

body.ui-mobile .toast{
  bottom:calc(78px + env(safe-area-inset-bottom))
}

/* --- Узкие экраны (320-430) --- */

@media (max-width:360px){
  .mobile-content{
    padding:12px 10px 20px
  }

  .mobile-balance-amount{
    font-size:28px
  }

  .mobile-amount-input{
    font-size:30px
  }

  .mobile-quick-actions button{
    font-size:11px
  }
}

/* --- Focus visibility (клавиатура/switch access) --- */

.mobile-app button:focus-visible,
.mobile-search input:focus-visible,
.mobile-picker-search input:focus-visible{
  outline:2px solid var(--primary);
  outline-offset:2px
}