: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;
  --shadow:0 12px 35px rgba(31,37,59,.08);
  --shadow-sm:0 4px 12px rgba(31,37,59,.06);
  --radius:14px
}

@media (prefers-color-scheme:dark){
  :root{
    /* GitHub dark dim palette - проверенная на читаемость */
    --bg:#0D1117;
    --surface:#161B22;
    --surface-elevated:#21262D;
    --text:#C9D1D9;
    --text-muted:#8B949E;
    --line:#30363D;
    --primary:#58A6FF;
    --primary-soft:#1F3144;
    --green:#3FB950;
    --green-soft:#1A2F1D;
    --red:#F85149;
    --red-soft:#2D1A1F;
    --amber:#D29922;
    --amber-soft:#2D2618;
    --blue:#58A6FF;
    --shadow:0 12px 35px rgba(0,0,0,.5);
    --shadow-sm:0 4px 12px rgba(0,0,0,.3);
    --shadow-lg:0 25px 70px rgba(0,0,0,.6)
  }

  /* Auth screen - глубокий темный с тонкими градиентами */
  .auth-screen{
    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{
    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 */
  .progress-bar{
    background:var(--surface-elevated)
  }

  .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:20px
  }

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

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

  .stat-card.income::after{
    background:var(--green)
  }

  .stat-card.expense::after{
    background:var(--red)
  }

  .stat-card.balance::after{
    background:var(--blue)
  }

  .stat-card.upcoming::after{
    background:var(--amber)
  }

  .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
  }

  .overview-goals{
    gap:16px
  }

  /* 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 25px 80px rgba(38,34,70,.13)
}

.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
}

.btn:hover:not(:disabled){
  transform:translateY(-1px)
}

.btn-primary{
  background:linear-gradient(90deg,#735fd3,#6652c7);
  color:#fff;
  box-shadow:0 7px 15px rgba(101,81,195,.2)
}

.btn-success{background:#36aa70;color:#fff}
.btn-danger{background:#e35a67;color:#fff}
.btn-light{background:#f0f2f6;color:#3f485b}
.full{width:100%}

.link-btn{
  border:0;
  background:transparent;
  color:var(--primary);
  padding:3px;
  font-size:12px;
  font-weight:700
}

.app{min-height:100vh}

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

.brand{
  display:flex;
  align-items:center;
  gap:11px;
  padding:0 12px 28px;
  font-size:17px;
  font-weight:800;
  letter-spacing:.4px
}

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

.nav-item{
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  min-height:45px;
  border:0;
  border-radius:9px;
  padding:0 13px;
  background:transparent;
  color:#495267;
  text-align:left;
  font-weight:650
}

.nav-item>span{
  width:25px;
  height:25px;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:#f0f2f6;
  color:#667085;
  font-size:15px
}

.nav-item:hover{background:#f7f5ff}

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

.nav-item.active>span{
  background:#ddd6ff;
  color:#604cc4
}

.nav-count{
  margin-left:auto;
  min-width:19px;
  height:19px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:var(--red);
  color:#fff;
  font-size:10px
}

.sidebar-footer{
  margin-top:auto;
  border-top:1px solid var(--line);
  padding-top:14px
}

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

.sync-state i{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#41b675
}

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

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

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

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

.profile-button:hover{background:#f5f6f9}

.avatar{
  flex:0 0 34px;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#e7e2ff;
  color:#5e4abf;
  font-weight:800
}

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

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

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

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

.topbar{
  position:relative;
  min-height:65px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:20px;
  margin-bottom:23px
}

.topbar h1{
  margin:3px 0 0;
  font-size:25px
}

.eyebrow{
  margin:0;
  color:#858da0;
  font-size:9px;
  font-weight:800;
  letter-spacing:1.2px
}

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

.icon-button{
  width:35px;
  height:42px;
  border:0;
  background:transparent;
  color:#343c50;
  font-size:28px
}

.period-button{
  min-width:218px;
  border:0;
  border-radius:9px;
  padding:6px 12px;
  background:transparent
}

.period-button:hover,
.period-button.active{
  background:#ece8ff
}

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

.period-button strong{font-size:15px}

.period-button span{
  margin-top:3px;
  color:#737c90;
  font-size:10px
}

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

.period-popover{
  position:absolute;
  z-index:90;
  top:53px;
  left:50%;
  transform:translateX(-50%);
  width:360px;
  padding:18px;
  border:1px solid #e1e3eb;
  border-radius:13px;
  background:#fff;
  box-shadow:0 20px 50px rgba(27,31,52,.18)
}

.quick-periods{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:13px 0
}

.quick-periods button{
  border:1px solid #e0e3eb;
  border-radius:8px;
  padding:7px 9px;
  background:#f8f8fb;
  color:#566075;
  font-size:10px
}

.quick-periods button:hover{
  border-color:#a99be9;
  background:#f0edff;
  color:#5f4dbb
}

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

.date-fields label{margin:0}

.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;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:15px;
  margin-bottom:15px
}

.stat-card{
  position:relative;
  min-height:126px;
  overflow:hidden;
  padding:19px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:#fff
}

.stat-card::after{
  content:"";
  position:absolute;
  width:90px;
  height:90px;
  border-radius:50%;
  right:-34px;
  bottom:-45px;
  opacity:.5
}

.stat-card.income::after{background:#cfeedd}
.stat-card.expense::after{background:#ffd8dc}
.stat-card.balance::after{background:#dce8ff}
.stat-card.upcoming::after{background:#ffe8bc}

.stat-card p{
  margin:0 0 9px;
  color:#697286;
  font-size:10px;
  font-weight:800;
  letter-spacing:.8px
}

.stat-card strong{
  display:block;
  font-size:23px
}

.stat-card small{
  display:block;
  margin-top:10px;
  color:#8a91a2;
  font-size:10px
}

.stat-icon{
  position:absolute;
  right:17px;
  top:17px;
  width:37px;
  height:37px;
  display:grid;
  place-items:center;
  border-radius:11px;
  background:#f0f1f5;
  color:#536078;
  font-size:18px
}

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

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

.stat-card.balance .stat-icon{
  background:#edf3ff;
  color:var(--blue)
}

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

.overview-grid{
  display:grid;
  grid-template-columns:1.25fr .95fr;
  gap:15px;
  margin-bottom:15px
}

.overview-grid.lower{
  grid-template-columns:1fr 1fr
}

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

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

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

.legend{
  display:flex;
  gap:13px;
  color:#70798c;
  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:#969daf;
  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:#788094
}

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

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

.donut::after{
  content:"";
  position:absolute;
  inset:31px;
  border-radius:50%;
  background:#fff
}

.donut>div{
  position:relative;
  z-index:1;
  text-align:center
}

.donut strong,
.donut span{
  display:block
}

.donut strong{font-size:16px}

.donut span{
  margin-top:3px;
  color:#8a91a2;
  font-size:9px
}

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

.category-row{
  display:grid;
  grid-template-columns:9px 1fr auto;
  align-items:center;
  gap:7px;
  font-size:10px
}

.category-row i{
  width:8px;
  height:8px;
  border-radius:50%
}

.category-row span:last-child{
  font-weight:700
}

.compact-list{display:grid}

.compact-row{
  display:grid;
  grid-template-columns:40px 1fr auto;
  align-items:center;
  gap:10px;
  min-height:51px;
  border-bottom:1px solid #f0f1f4
}

.compact-row:last-child{
  border-bottom:0
}

.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:#8b92a3;
  font-size:9px
}

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

.muted-copy{
  color:#747d90;
  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:#7d8597;
  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:48px;
  padding:0 10px;
  border-bottom:1px solid #eef0f4;
  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:var(--green-soft);
  color:var(--green)
}

.type-badge.expense,
.status-badge.overdue{
  background:var(--red-soft);
  color: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:#f0edff;
  color:var(--primary)
}

.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{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-bottom:14px
}

.payment-summary>div{
  padding:12px;
  border-radius:10px;
  background:#f7f8fb
}

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

.payment-summary span{
  color:#828a9d;
  font-size:9px
}

.payment-summary strong{
  margin-top:5px;
  font-size:15px
}

.cards-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:15px
}

.data-card{
  position:relative;
  min-height:165px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px;
  background:#fff
}

.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)
}

.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:16px;
  padding:24px;
  background:#fff;
  box-shadow:0 25px 70px rgba(23,28,46,.25)
}

.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:15px;
  padding:23px;
  background:#fff;
  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:#eee9ff;
  color:#6d55d4
}

.nav-item>span.nav-green{
  background:#e5f6ed;
  color:#2c9c64
}

.nav-item>span.nav-amber{
  background:#fff2d8;
  color:#d78d19
}

.nav-item>span.nav-rose{
  background:#ffe7eb;
  color:#dc5062
}

.nav-item>span.nav-violet{
  background:#eee6ff;
  color:#8159d6
}

.nav-item>span.nav-blue{
  background:#e5efff;
  color:#4c7fd1
}

.nav-item>span.nav-teal{
  background:#def5f1;
  color:#299487
}

.nav-item>span.nav-slate{
  background:#e9edf4;
  color:#627087
}

.nav-item>span.nav-gray{
  background:#edf0f4;
  color:#667085
}

.daily-tip{
  margin:16px 5px 10px;
  padding:13px;
  border:1px solid #e6ddff;
  border-radius:11px;
  background:linear-gradient(145deg,#faf8ff,#f3efff);
  color:#6551bd
}

.daily-tip-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:11px
}

.daily-tip-head span{
  color:#e6a72f
}

.daily-tip p{
  margin:8px 0 0;
  color:#655f7b;
  font-size:10px;
  line-height:1.5
}

.overview-primary{
  grid-template-columns:1.15fr .85fr
}

.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-goals{
  display:grid;
  gap:16px
}

.overview-goal{
  display:grid;
  gap:7px
}

.overview-goal>div:first-child{
  display:flex;
  align-items:center;
  justify-content:space-between
}

.overview-goal strong{
  font-size:11px
}

.overview-goal span{
  color:var(--primary);
  font-size:10px;
  font-weight:800
}

.overview-goal small{
  color:#81899a;
  font-size:9px
}

.analytics-chart{
  height:430px
}

.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:#fff;
  color:var(--text);
  text-align:left;
  box-shadow:0 2px 4px rgba(30,36,58,.02);
  transition:.15s
}

.month-card:hover{
  transform:translateY(-2px);
  border-color:#bdb2ee;
  box-shadow:var(--shadow)
}

.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-grid{
    grid-template-columns:1fr
  }

  .cards-grid,
  .settings-grid{
    grid-template-columns:repeat(2,1fr)
  }

  .month-history-grid{
    grid-template-columns:repeat(2,1fr)
  }
}

@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(25,29,45,.35)
  }

  .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:#fff;
    color:#4b5367;
    box-shadow:var(--shadow)
  }

  .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,
  .cards-grid,
  .settings-grid,
  .month-history-grid{
    grid-template-columns:1fr
  }

  .stat-card{
    min-height:112px
  }

  .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
  }

  .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
  }
}

/* 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(--surface)!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,#58A6FF,#4C8ED8)!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,#58A6FF,#4C8ED8)!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
  }

  /* 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,#58A6FF,#4C8ED8)!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 - custom color */
  strong#donutTotal,
  strong#balanceAmount{
    color:#0d1117!important;
    font-weight:900!important;
    font-size:24px!important
  }

  /* Donut span labels - same color */
  #donut > div > span,
  #balanceDonut > div > span{
    color:#0d1117!important;
    font-size:9px!important
  }

  /* Additional specificity for donut elements */
  #donut > div > strong#donutTotal,
  #balanceDonut > div > strong#balanceAmount{
    color:#0d1117!important;
    font-weight:900!important;
    font-size:24px!important
  }

  /* Ensure donut spans also have the color */
  #donut > div > span{
    color:#0d1117!important
  }

  #balanceDonut > div > span{
    color:#0d1117!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
    }
  }
}