/* ===== qPokoy Design V2: Dashboard composition ===== */
.income-dashboard,
.income-section,
.dashboard-section{
  position:relative;
}

/* Unified dashboard rhythm */
main{
  max-width:1180px !important;
  margin:0 auto !important;
}

.income-dashboard{
  display:grid !important;
  grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr) !important;
  gap:18px !important;
  align-items:stretch !important;
}

.income-dashboard > .income-summary,
.income-dashboard > .income-total-card{
  min-height:260px;
}

.income-dashboard > .chart-card,
.income-dashboard > .income-chart,
.income-dashboard > .chart-container{
  min-height:260px;
}

/* Give the main amount area a stronger hierarchy */
.income-summary,
.income-total-card{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:30px !important;
  background:
    radial-gradient(circle at 90% 10%, rgba(124,58,237,.13), transparent 32%),
    radial-gradient(circle at 0% 100%, rgba(79,70,229,.09), transparent 35%),
    var(--qp-surface) !important;
}

.income-summary #incomeTotal,
.income-total-card #incomeTotal{
  margin:12px 0 20px !important;
}

/* Month selector becomes a quiet control */
#incomeMonthSwitcher{
  margin-top:auto;
}

/* Chart gets a more premium frame */
.chart-card,
.income-chart,
.chart-container{
  padding:22px !important;
  display:flex;
  flex-direction:column;
}

.chart-card svg,
.income-chart svg,
.chart-container svg{
  flex:1;
}

/* Statistics: three-column rhythm where space allows */
.analytics-cards{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
}

.analytics-card{
  display:flex;
  flex-direction:column;
  justify-content:center;
}

/* Statistics blocks below cards */
.income-statistics,
.analytics-section{
  margin-top:18px !important;
}

/* History should read as a separate workspace */
#incomeList{
  box-shadow:none !important;
  border:1px solid var(--qp-border);
  background:var(--qp-surface);
}

@media (max-width:900px ) and (pointer:coarse){
  .income-dashboard{
    grid-template-columns:1fr !important;
  }
  .income-summary,
  .income-total-card,
  .chart-card,
  .income-chart,
  .chart-container{
    min-height:230px !important;
  }
}

@media (max-width:680px ) and (pointer:coarse){
  .analytics-cards{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

@media (max-width:480px ) and (pointer:coarse){
  .analytics-cards{
    grid-template-columns:1fr !important;
  }
  .income-summary,
  .income-total-card{
    padding:22px !important;
  }
}

.income-summary::before,
.income-total-card::before{
  content:"Доходы";
  display:inline-block;
  width:max-content;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(79,70,229,.09);
  color:var(--qp-accent);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.chart-card::before,
.income-chart::before,
.chart-container::before{
  content:"Динамика";
  display:inline-block;
  width:max-content;
  margin-bottom:8px;
  color:var(--qp-muted);
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.analytics-card{
  position:relative;
  overflow:hidden;
}
.analytics-card::after{
  content:"";
  position:absolute;
  right:-35px;
  bottom:-45px;
  width:110px;
  height:110px;
  border-radius:50%;
  background:rgba(79,70,229,.045);
}

.accent-swatch{width:38px;height:38px;padding:0;border-radius:10px;border:2px solid transparent;background:var(--accent-swatch);cursor:pointer;box-sizing:border-box;}
.accent-swatch.active{border-color:var(--text);box-shadow:0 0 0 2px var(--panel),0 0 0 4px var(--accent-swatch);}

/* Settings redesign — presentation only */
#settings{
  max-width:1100px;
  margin:0 auto;
  padding:28px 22px 48px;
}
#settings .settings-card{
  position:relative;
  background:var(--card-bg, rgba(255,255,255,.72));
  border:1px solid var(--border-color, rgba(120,130,150,.16));
  border-radius:24px;
  padding:22px;
  margin:0 0 16px;
  box-shadow:0 12px 34px rgba(20,30,50,.06);
  backdrop-filter:blur(18px);
}
#settings .settings-card-title{
  font-size:18px;
  line-height:1.25;
  font-weight:750;
  letter-spacing:-.01em;
}
#settings .settings-card-subtitle{
  margin-top:6px;
  color:var(--muted-text, #7b8494);
  font-size:13px;
  line-height:1.45;
}
#settings .settings-card > .settings-card-title:first-child{
  margin-bottom:2px;
}
#settings .settings-card .settings-row,
#settings .settings-card .setting-row{
  min-height:48px;
}
#settings .settings-card button{
  border-radius:14px;
  min-height:42px;
  padding:9px 15px;
  font:inherit;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
#settings .settings-card button:hover{
  transform:translateY(-1px);
}
#settings .settings-card button:active{
  transform:translateY(0);
}
#settings .settings-card .btn-secondary{
  border:1px solid var(--border-color, rgba(120,130,150,.2));
  background:var(--surface-2, rgba(127,140,160,.08));
}
#settings .settings-card .btn-secondary:hover{
  box-shadow:0 8px 20px rgba(20,30,50,.08);
}
#settings #exportDataBtn,
#settings #importDataBtn,
#settings #printIncomeReportBtn{
  background:var(--primary);
  color:#fff;
  border-color:transparent;
}

#settings .settings-report-period{
  min-height:42px;
  padding:9px 34px 9px 12px;
  border:1px solid var(--border-color, rgba(120,130,150,.2));
  border-radius:14px;
  background:var(--surface-2, rgba(127,140,160,.08));
  color:var(--text);
  font:inherit;
  cursor:pointer;
}
#settings .settings-report-period:focus{
  border-color:color-mix(in srgb,var(--primary) 58%,var(--border));
  outline:none;
}
@media (max-width:700px ) and (pointer:coarse){
  #settings .settings-report-period{width:100%}
}

#settings #clearIncomeDataBtn{
  color:#c0392b;
  border-color:rgba(192,57,43,.22);
  background:rgba(192,57,43,.06);
}
#settings #clearIncomeDataBtn:hover{
  background:rgba(192,57,43,.1);
}
#settings .settings-card:has(#exportDataBtn){
  overflow:hidden;
}
#settings .settings-card:has(#exportDataBtn)::before{
  content:"";
  position:absolute;
  width:180px;
  height:180px;
  right:-90px;
  top:-100px;
  border-radius:50%;
  background:var(--primary);
  opacity:.07;
  pointer-events:none;
}
@media (max-width:700px ) and (pointer:coarse){
  #settings{padding:18px 14px 32px}
  #settings .settings-card{border-radius:20px;padding:18px}
  #settings .settings-card > div[style*="display:flex"]{
    flex-direction:column;
  }
  #settings .settings-card button{width:100%}
}

#settings .settings-card .settings-action-icon{
  width:18px;
  height:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 18px;
}
#settings .settings-card .settings-action-icon svg{
  width:18px;
  height:18px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
#settings .settings-card button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}

/* Custom accent-color control matches the custom icon-color control. */
#settings .accent-custom-color{
  width:34px;
  height:34px;
  box-sizing:border-box;
}
#settings .accent-custom-color input{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  cursor:pointer;
}
#settings .accent-custom-color span{
  pointer-events:none;
  font-size:21px;
  line-height:1;
}

#settings .settings-card > .settings-row{
  margin-bottom:22px;
  padding-bottom:22px;
  border-bottom:1px solid var(--border);
}
#settings .settings-card > .settings-row + .settings-title{
  margin-top:0;
}
#settings .settings-card .settings-title.icon-color-title{
  margin-top:22px;
}

#settings .settings-card{
  display:flex;
  flex-direction:column;
}
#settings .settings-card > .settings-row{order:3;}
#settings .settings-card > .settings-title.icon-color-title{order:2;}
#settings .settings-card > .settings-title:not(.icon-color-title){order:1;}
#settings .settings-card > .icon-colors{order:2;}

/* Visual order applies only to the first settings card. */
#settings > .settings-card:not([style]){
  display:flex;
  flex-direction:column;
}
#settings > .settings-card:not([style]) > .settings-title:not(.icon-color-title){order:1;}
#settings > .settings-card:not([style]) > .settings-title.icon-color-title{order:2;}
#settings > .settings-card:not([style]) > .icon-colors{order:2;}
#settings > .settings-card:not([style]) > .settings-row{order:3;}

/* Data card: restore normal document order. */
#settings > .settings-card[style]{
  display:block;
}
#settings > .settings-card[style] > .settings-title,
#settings > .settings-card[style] > .settings-card-subtitle,
#settings > .settings-card[style] > div[style]{
  order:initial;
}

/* Two palettes: identical geometry, spacing and total width */
#settings > .settings-card:first-of-type .icon-colors,
#settings > .settings-card:first-of-type .settings-row > div:last-child{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  flex-wrap:nowrap !important;
  gap:10px !important;
  width:326px !important;
  min-width:326px !important;
  max-width:326px !important;
  box-sizing:border-box !important;
}

/* Every palette item is exactly the same 38×38 control. */
#settings > .settings-card:first-of-type .icon-color,
#settings > .settings-card:first-of-type .accent-swatch,
#settings > .settings-card:first-of-type .custom-color,
#settings > .settings-card:first-of-type .accent-custom-color{
  flex:0 0 38px !important;
  width:38px !important;
  min-width:38px !important;
  max-width:38px !important;
  height:38px !important;
  min-height:38px !important;
  max-height:38px !important;
  padding:0 !important;
  margin:0 !important;
  box-sizing:border-box !important;
}

/* Same corner treatment for both color palettes. */
#settings > .settings-card:first-of-type .icon-color,
#settings > .settings-card:first-of-type .accent-swatch{
  border-radius:10px !important;
}

/* The "+" buttons stay round in both palettes. */
#settings > .settings-card:first-of-type .custom-color,
#settings > .settings-card:first-of-type .accent-custom-color{
  border-radius:50% !important;
}

/* Identical vertical spacing between label and palette. */
#settings > .settings-card:first-of-type .icon-color-title{
  margin:0 0 12px 0 !important;
}
#settings > .settings-card:first-of-type .settings-row{
  display:block !important;
  margin:0 0 22px 0 !important;
  padding:0 0 22px 0 !important;
}
#settings > .settings-card:first-of-type .settings-row > div:first-child{
  margin:0 0 12px 0 !important;
}
#settings > .settings-card:first-of-type .settings-row > div:first-child .settings-title{
  margin:0 !important;
}

/* Keep the palette width identical even when the selected state adds outlines. */
#settings > .settings-card:first-of-type .icon-color.active,
#settings > .settings-card:first-of-type .accent-swatch.active{
  box-sizing:border-box !important;
}

/* The first settings card has no inline style; the Data card does. */
#settings > .settings-card:not([style]) .icon-colors,
#settings > .settings-card:not([style]) .settings-row > div:last-child{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  flex-wrap:nowrap !important;
  gap:12px !important;
  width:350px !important;
  min-width:350px !important;
  max-width:350px !important;
  box-sizing:border-box !important;
}

/* Identical 38×38 geometry for both palettes. */

/* Same shape for the six color swatches. */

/* Same circular custom-color control. */

/* Same label-to-palette spacing and same vertical gap between panels. */
#settings > .settings-card:not([style]) .icon-color-title{
  margin:0 0 12px 0 !important;
}
#settings > .settings-card:not([style]) .settings-row{
  display:block !important;
  margin:0 0 22px 0 !important;
  padding:0 0 22px 0 !important;
}
#settings > .settings-card:not([style]) .settings-row > div:first-child{
  margin:0 0 12px 0 !important;
}
#settings > .settings-card:not([style]) .settings-row > div:first-child .settings-title{
  margin:0 !important;
}

/* Equal vertical rhythm between all three controls in the unified settings card. */

#settings > .settings-card:not([style]) > .icon-color-title{
  margin-top:0 !important;
  margin-bottom:12px !important;
}

#settings > .settings-card:not([style]) > .icon-colors{
  margin-bottom:12px !important;
}

#settings > .settings-card:not([style]) > .settings-row{
  margin-top:0 !important;
  margin-bottom:0 !important;
  padding-top:0 !important;
  padding-bottom:22px !important;
}

#settings > .settings-card:not([style]) > .settings-row > div:first-child{
  margin-bottom:12px !important;
}

#settings > .settings-card:not([style]) > .settings-row > div:first-child .settings-title{
  margin:0 !important;
}

/* Keep both palettes on exactly the same horizontal baseline and width. */
#settings > .settings-card:not([style]) .icon-colors,
#settings > .settings-card:not([style]) .settings-row > div:last-child{
  display:flex !important;
  align-items:center !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  gap:12px !important;
  width:350px !important;
  min-width:350px !important;
  max-width:350px !important;
}

#settings > .settings-card:not([style]) .icon-color,
#settings > .settings-card:not([style]) .accent-swatch,
#settings > .settings-card:not([style]) .custom-color,
#settings > .settings-card:not([style]) .accent-custom-color{
  flex:0 0 38px !important;
  width:38px !important;
  min-width:38px !important;
  max-width:38px !important;
  height:38px !important;
  min-height:38px !important;
  max-height:38px !important;
  margin:0 !important;
  padding:0 !important;
  box-sizing:border-box !important;
}

#settings > .settings-card:not([style]) .icon-color,
#settings > .settings-card:not([style]) .accent-swatch{
  border-radius:10px !important;
}

#settings > .settings-card:not([style]) .custom-color,
#settings > .settings-card:not([style]) .accent-custom-color{
  border-radius:50% !important;
}

/* History table header — actual rendered element is .income-row.income-header. */
#incomeList > .income-row.income-header{
  background:transparent !important;
  background-color:transparent !important;
  color:var(--text-muted) !important;
  border-bottom:1px solid var(--qp-border) !important;
  border-top:0 !important;
  box-shadow:none !important;
}

/* Remove the strong vertical grid only from the header cells. */
#incomeList > .income-row.income-header > div{
  background:transparent !important;
  border-right:0 !important;
  border-left:0 !important;
  border-top:0 !important;
  border-bottom:0 !important;
  color:var(--text-muted) !important;
  font-weight:500 !important;
}

/* Header controls inherit the quiet header typography. */
#incomeList > .income-row.income-header .header-filter-btn{
  color:inherit !important;
  font-weight:500 !important;
  background:transparent !important;
  border:0 !important;
}

/* Keep the header height and padding consistent with the table rows. */
#incomeList > .income-row.income-header{
  min-height:42px !important;
  height:42px !important;
}
#incomeList > .income-row.income-header > div{
  padding:0 10px !important;
}

/* History table rows: match the clean header and remove vertical column lines. */
#incomeList > .income-row{
  border-left:0 !important;
  border-right:0 !important;
  border-top:0 !important;
  border-bottom:1px solid var(--qp-border) !important;
  box-shadow:none !important;
}

/* Cells keep their column widths/alignment but have no vertical borders. */
#incomeList > .income-row > div{
  border-left:0 !important;
  border-right:0 !important;
  border-top:0 !important;
  border-bottom:0 !important;
  box-shadow:none !important;
}

/* Preserve the clean header treatment. */
#incomeList > .income-row.income-header{
  border-bottom:1px solid var(--qp-border) !important;
}

/* Last row should not add a second heavy bottom line inside the card. */
#incomeList > .income-row:last-child{
  border-bottom:0 !important;
}

#history > .income-form{position:relative;z-index:100002 !important;overflow:visible}
#history > .income-form .calendar-popup{z-index:1200}
#history > .income-form .cancel-btn{z-index:20}
#history > .income-form .save-btn{display:grid;place-items:center;z-index:20}

/* Точная геометрия кнопки закрытия формы */
.income-form .cancel-btn{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:32px !important;
  height:32px !important;
  min-width:32px !important;
  min-height:32px !important;
  padding:0 !important;
  line-height:0 !important;
  font-size:0 !important;
  box-sizing:border-box !important;
}
.income-form .cancel-btn svg{
  position:static !important;
  display:block !important;
  flex:0 0 16px !important;
  width:16px !important;
  height:16px !important;
  min-width:16px !important;
  min-height:16px !important;
  margin:0 !important;
  padding:0 !important;
  transform:translate(0,0) !important;
  align-self:center !important;
}
.income-form .cancel-btn svg path{
  transform:none !important;
}

/* Галочка режима редактирования: фиксированная SVG-иконка,
   не зависит от темы или пользовательского цвета иконок. */
.income-form #saveIncome > svg{
  display:block !important;
  width:18px !important;
  height:18px !important;
  margin:0 auto !important;
  fill:none !important;
  stroke:#fff !important;
  stroke-width:2 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
  color:#fff !important;
  pointer-events:none !important;
}
.income-form #saveIncome > svg path{
  fill:none !important;
  stroke:#fff !important;
  stroke-width:2 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
}

#incomeList .income-row .delete-income{
  z-index:9999 !important;
  pointer-events:auto !important;
  cursor:pointer !important;
}

.income-month-block{
  display:grid !important;
  gap:10px !important;
  justify-items:start !important;
  align-content:start !important;
}
#incomeMonthSwitcher{
  margin-top:0 !important;
}

/* Стрелки месяца видны только при наведении на переключатель. */
#incomeMonthSwitcher > button{
  opacity:0 !important;
  transition:opacity .15s ease, background .15s ease !important;
}
#incomeMonthSwitcher:hover > button,
#incomeMonthSwitcher > button:focus-visible,
#incomeMonthSwitcher > button:active{
  opacity:1 !important;
}
#incomeMonthSwitcher > button{
  background:transparent !important;
}
#incomeMonthSwitcher:hover > button:hover{
  background:var(--active) !important;
}

/* Стрелки переключателя года показываются только при наведении. */
.income-chart-year-switcher > button{
  opacity:0 !important;
  transition:opacity .15s ease, background .15s ease !important;
}
.income-chart-year-switcher:hover > button,
.income-chart-year-switcher > button:focus-visible,
.income-chart-year-switcher > button:active{
  opacity:1 !important;
}
.income-chart-year-switcher:hover > button:hover{
  background:var(--active) !important;
}

.income-chart-year-bottom{
  position:absolute !important;
  top:0 !important;
  right:0 !important;
  left:auto !important;
  width:auto !important;
  display:flex !important;
  justify-content:flex-end !important;
  z-index:5;
}
.income-chart-year-switcher{
  margin:0 !important;
}

.content > header{
  display:none !important;
}

/* Верхняя панель статистики — только визуальная переработка. */
#incomeAnalytics{
  padding:24px 26px !important;
  border-radius:22px !important;
  background:var(--panel) !important;
}
#incomeAnalytics .analytics-head{
  align-items:start !important;
  margin-bottom:20px !important;
}
#incomeAnalytics .analytics-kicker{
  letter-spacing:.08em;
  font-size:12px !important;
}
#incomeAnalytics .analytics-head h2{
  margin:8px 0 0 !important;
  font-size:21px !important;
}
#incomeAnalytics .analytics-total{
  font-size:24px !important;
  font-weight:700 !important;
  padding-top:0 !important;
}
#incomeAnalytics .analytics-cards{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:16px !important;
}
#incomeAnalytics .analytics-card{
  position:relative !important;
  min-height:184px !important;
  padding:28px 54px 24px 28px !important;
  display:flex !important;
  align-items:flex-start !important;
  gap:16px !important;
  overflow:hidden !important;
  cursor:pointer !important;
  border:1px solid var(--border) !important;
  border-radius:20px !important;
  background:var(--panel-muted) !important;
  box-shadow:none !important;
  transition:transform .16s ease,border-color .16s ease,background .16s ease !important;
}
#incomeAnalytics .analytics-card::after{
  content:"";
  position:absolute;
  width:150px;
  height:150px;
  right:-54px;
  bottom:-76px;
  border-radius:50%;
  background:color-mix(in srgb,var(--primary) 9%,transparent);
  pointer-events:none;
}
@media (hover:hover) and (pointer:fine), (pointer:coarse) and (min-width:901px) and (max-width:1200px){
  #incomeAnalytics .analytics-card:hover{
    transform:translateY(-2px);
    border-color:color-mix(in srgb,var(--primary) 45%,var(--border));
    background:color-mix(in srgb,var(--panel-muted) 88%,var(--primary));
  }
}
#incomeAnalytics .analytics-card-icon{
  position:relative;
  z-index:1;
  flex:0 0 44px;
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:color-mix(in srgb,var(--primary) 15%,var(--panel));
  color:var(--primary);
}
#incomeAnalytics .analytics-card-icon svg{
  width:23px;
  height:23px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
#incomeAnalytics .analytics-card-body{
  position:relative;
  z-index:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
#incomeAnalytics .analytics-card-body > span{
  color:var(--text-muted);
  font-size:13px;
  line-height:1.35;
}
#incomeAnalytics .analytics-card-body strong{
  margin-top:25px;
  color:var(--text);
  font-size:24px;
  line-height:1.15;
  letter-spacing:-.025em;
}
#incomeAnalytics .analytics-card-body small{
  margin-top:10px;
  color:var(--text-muted);
  font-size:12px;
  line-height:1.35;
}
#incomeAnalytics .analytics-card-arrow{
  position:absolute;
  z-index:2;
  right:22px;
  top:50%;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border:1px solid color-mix(in srgb,var(--primary) 70%,var(--border));
  border-radius:50%;
  color:var(--primary);
  font-size:30px;
  line-height:1;
  transform:translateY(-50%);
  opacity:.9;
}
#incomeAnalytics .analytics-card-best{
  border-color:color-mix(in srgb,var(--success) 34%,var(--border)) !important;
}
#incomeAnalytics .analytics-card-best .analytics-card-icon,
#incomeAnalytics .analytics-card-best .analytics-card-arrow{
  color:var(--success);
  border-color:color-mix(in srgb,var(--success) 70%,var(--border));
}
#incomeAnalytics .analytics-card-best::after{
  background:color-mix(in srgb,var(--success) 10%,transparent);
}
#incomeAnalytics .analytics-card-worst{
  border-color:color-mix(in srgb,var(--danger) 24%,var(--border)) !important;
}
#incomeAnalytics .analytics-card-worst .analytics-card-icon,
#incomeAnalytics .analytics-card-worst .analytics-card-arrow{
  color:var(--danger);
  border-color:color-mix(in srgb,var(--danger) 65%,var(--border));
}
#incomeAnalytics .analytics-card-worst::after{
  background:color-mix(in srgb,var(--danger) 9%,transparent);
}
@media(max-width:1050px){
  #incomeAnalytics .analytics-cards{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
}
@media(max-width:620px ) and (pointer:coarse){
  #incomeAnalytics{padding:20px 16px !important}
  #incomeAnalytics .analytics-head{gap:12px}
  #incomeAnalytics .analytics-total{font-size:20px !important}
  #incomeAnalytics .analytics-cards{grid-template-columns:1fr !important}
}

#incomeAnalytics .analytics-card-best,
#incomeAnalytics .analytics-card-worst{
  cursor:pointer !important;
}
#incomeAnalytics .analytics-card-best:focus-visible,
#incomeAnalytics .analytics-card-worst:focus-visible{
  outline:2px solid var(--primary);
  outline-offset:2px;
}
#incomeAnalytics .analytics-card-best:hover .analytics-card-arrow,
#incomeAnalytics .analytics-card-worst:hover .analytics-card-arrow{
  transform:translateY(-50%) translateX(2px);
}

#incomeAnalytics .analytics-card-arrow{
  display:none !important;
}
#incomeAnalytics .analytics-card{
  padding-right:22px !important;
}

#incomeAnalytics .analytics-cards{
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
}
@media (max-width:900px ) and (pointer:coarse){
  #incomeAnalytics .analytics-cards{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}
@media (max-width:560px ) and (pointer:coarse){
  #incomeAnalytics .analytics-cards{
    grid-template-columns:1fr !important;
  }
}

#incomeAnalytics .analytics-card-growth .analytics-card-body strong.positive{color:var(--success)!important}
#incomeAnalytics .analytics-card-growth .analytics-card-body strong.negative{color:var(--danger)!important}
#incomeAnalytics .analytics-card-growth .analytics-card-body strong.neutral{color:var(--text-muted)!important}
#incomeAnalytics .analytics-card-growth .analytics-card-icon{color:var(--primary)!important}

#incomeAnalytics .analytics-head-right{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:8px;
}
#incomeAnalytics .analytics-year-switcher{
  display:inline-grid;
  grid-template-columns:30px minmax(58px,auto) 30px;
  align-items:center;
  min-height:32px;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--panel-muted);
}
#incomeAnalytics .analytics-year-switcher > button{
  width:30px;
  height:30px;
  padding:0;
  border:0;
  border-radius:7px;
  background:transparent;
  color:var(--text);
  font-size:20px;
  line-height:1;
  cursor:pointer;
  opacity:0;
  transition:opacity .15s ease,background .15s ease;
}
#incomeAnalytics .analytics-year-switcher:hover > button,
#incomeAnalytics .analytics-year-switcher > button:focus-visible,
#incomeAnalytics .analytics-year-switcher > button:active{
  opacity:1;
}
#incomeAnalytics .analytics-year-switcher:hover > button:hover{
  background:var(--active);
}
#incomeAnalytics #analyticsYearControl{
  min-width:0;
  padding:0 5px;
  text-align:center;
  font-size:13px;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
@media(max-width:620px ) and (pointer:coarse){
  #incomeAnalytics .analytics-head-right{gap:6px}
}

#incomeAnalytics .analytics-head{
  align-items:flex-start !important;
}
#incomeAnalytics .analytics-title-block{
  min-width:0;
}
#incomeAnalytics .analytics-title-block h2{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  flex-wrap:nowrap !important;
  margin:8px 0 0 !important;
}
#incomeAnalytics .analytics-year-source{
  display:none !important;
}
#incomeAnalytics .analytics-year-switcher{
  display:inline-grid !important;
  grid-template-columns:30px minmax(58px,auto) 30px !important;
  align-items:center !important;
  min-height:32px !important;
  flex:0 0 auto !important;
  border:1px solid var(--border) !important;
  border-radius:9px !important;
  background:var(--panel-muted) !important;
  vertical-align:middle !important;
}
#incomeAnalytics .analytics-year-switcher > button{
  width:30px !important;
  height:30px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:7px !important;
  background:transparent !important;
  color:var(--text) !important;
  font-size:20px !important;
  line-height:1 !important;
  cursor:pointer !important;
  opacity:0 !important;
  transition:opacity .15s ease,background .15s ease !important;
}
#incomeAnalytics .analytics-year-switcher:hover > button,
#incomeAnalytics .analytics-year-switcher > button:focus-visible,
#incomeAnalytics .analytics-year-switcher > button:active{
  opacity:1 !important;
}
#incomeAnalytics .analytics-year-switcher:hover > button:hover{
  background:var(--active) !important;
}
#incomeAnalytics #analyticsYearControl{
  min-width:0 !important;
  padding:0 5px !important;
  text-align:center !important;
  font-size:14px !important;
  font-weight:500 !important;
  line-height:30px !important;
  font-variant-numeric:tabular-nums !important;
  white-space:nowrap !important;
}
#incomeAnalytics .analytics-total{
  align-self:flex-start !important;
}
@media(max-width:620px ) and (pointer:coarse){
  #incomeAnalytics .analytics-title-block h2{
    gap:8px !important;
  }
  #incomeAnalytics .analytics-year-switcher{
    grid-template-columns:27px minmax(52px,auto) 27px !important;
    min-height:30px !important;
  }
  #incomeAnalytics .analytics-year-switcher > button{
    width:27px !important;
    height:28px !important;
  }
  #incomeAnalytics #analyticsYearControl{
    line-height:28px !important;
    font-size:13px !important;
  }
}

#incomeAnalytics .analytics-panel-title{
  margin:0 0 12px 0;
  font-size:13px;
  font-weight:600;
  color:var(--text);
}

#incomeAnalytics .analytics-category-panel{
  color:var(--text);
  transition:border-color .15s ease,transform .15s ease;
}
#incomeAnalytics .analytics-category-panel::after{
  content:"";
  position:absolute;
  background:var(--category-soft);
  pointer-events:none;
}
#incomeAnalytics .analytics-category-panel.salary{
  --category:var(--success);
  --category-soft:rgba(24,185,129,.10);
  border-color:color-mix(in srgb,var(--success) 55%,var(--border));
}
#incomeAnalytics .analytics-category-panel.advance{
  --category:#3b82f6;
  --category-soft:rgba(59,130,246,.10);
  border-color:color-mix(in srgb,#3b82f6 55%,var(--border));
}
#incomeAnalytics .analytics-category-panel.other{
  --category:#8b5cf6;
  --category-soft:rgba(139,92,246,.10);
  border-color:color-mix(in srgb,#8b5cf6 55%,var(--border));
}
#incomeAnalytics .analytics-category-panel.pension{
  --category:#f59e0b;
  --category-soft:rgba(245,158,11,.10);
  border-color:color-mix(in srgb,#f59e0b 55%,var(--border));
}
#incomeAnalytics .analytics-category-panel:hover{
  transform:translateY(-1px);
  border-color:var(--category);
}
#incomeAnalytics .analytics-category-panel-icon{
  background:color-mix(in srgb,var(--category) 14%,transparent);
  color:var(--category);
}
#incomeAnalytics .analytics-category-panel-icon svg{
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}
#incomeAnalytics .analytics-category-panel-name{
  color:var(--text-muted);
}

#incomeAnalytics .analytics-category-panel-share{
  color:var(--text-muted);
}

#incomeAnalytics .analytics-grid{display:block}
#incomeAnalytics .analytics-grid .analytics-panel{
  padding:0;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
}
#incomeAnalytics .analytics-panel-title{
  margin:0 0 12px 0;
  padding:0;
}
#incomeAnalytics .analytics-category-panels{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}
@media(max-width:900px ) and (pointer:coarse){
  #incomeAnalytics .analytics-category-panels{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px ) and (pointer:coarse){
  #incomeAnalytics .analytics-category-panels{grid-template-columns:1fr}
}

/* Категории: сохраняем вертикальную компоновку содержимого карточки. */
#incomeAnalytics .analytics-category-panel{
  flex-direction:column !important;
}

/* «По категориям» — тот же размер и форма, что и верхние карточки */
#incomeAnalytics .analytics-category-panels{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:16px !important;
  align-items:stretch !important;
}
#incomeAnalytics .analytics-category-panel{
  position:relative !important;
  width:100% !important;
  min-width:0 !important;
  min-height:184px !important;
  height:184px !important;
  box-sizing:border-box !important;
  padding:28px 54px 24px 28px !important;
  display:flex !important;
  align-items:flex-start !important;
  gap:16px !important;
  overflow:hidden !important;
  border:1px solid var(--border) !important;
  border-radius:20px !important;
  background:var(--panel-muted) !important;
  text-align:left !important;
}
#incomeAnalytics .analytics-category-panel::after{
  width:150px !important;
  height:150px !important;
  right:-54px !important;
  bottom:-76px !important;
  border-radius:50% !important;
}
#incomeAnalytics .analytics-category-panel-icon{
  position:relative !important;
  z-index:1 !important;
  flex:0 0 44px !important;
  width:44px !important;
  height:44px !important;
  margin:0 !important;
  display:grid !important;
  place-items:center !important;
  border-radius:12px !important;
}
#incomeAnalytics .analytics-category-panel-icon svg{
  width:23px !important;
  height:23px !important;
}
#incomeAnalytics .analytics-category-panel-name{
  position:relative !important;
  z-index:1 !important;
  display:block !important;
  margin:0 !important;
  color:var(--text-muted) !important;
  font-size:13px !important;
  line-height:1.35 !important;
}
#incomeAnalytics .analytics-category-panel-value{
  position:relative !important;
  z-index:1 !important;
  display:block !important;
  margin-top:25px !important;
  color:var(--text) !important;
  font-size:24px !important;
  line-height:1.15 !important;
  letter-spacing:-.025em !important;
  font-weight:600 !important;
}
#incomeAnalytics .analytics-category-panel-share{
  position:absolute !important;
  z-index:1 !important;
  right:22px !important;
  bottom:22px !important;
  font-size:12px !important;
  font-weight:600 !important;
}
@media (hover:hover) and (pointer:fine), (pointer:coarse) and (min-width:901px) and (max-width:1200px){
  #incomeAnalytics:not(.is-monthly) .analytics-category-panels{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  }
  #incomeAnalytics:not(.is-monthly) .analytics-category-panel{
    grid-column:auto;
  }
}
@media(max-width:900px ) and (pointer:coarse){
  #incomeAnalytics .analytics-category-panels{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}
@media(max-width:560px ) and (pointer:coarse){
  #incomeAnalytics .analytics-category-panels{
    grid-template-columns:1fr !important;
  }
}

#incomeAnalytics .analytics-category-panel-body{
  position:relative !important;
  z-index:1 !important;
  min-width:0 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
}

/* Процент в карточках категорий — аккуратный бейдж справа сверху */

#incomeAnalytics .analytics-category-panel-share{
  position:absolute !important;
  top:20px !important;
  right:20px !important;
  bottom:auto !important;
  z-index:3 !important;
  min-width:44px !important;
  height:30px !important;
  padding:0 10px !important;
  box-sizing:border-box !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:9px !important;
  background:rgba(255,255,255,.055) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  color:var(--text-muted) !important;
  font-size:12px !important;
  line-height:1 !important;
  font-weight:600 !important;
}
#incomeAnalytics .analytics-category-panel.salary .analytics-category-panel-share{
  color:#00d084 !important;
  background:rgba(0,208,132,.08) !important;
  border-color:rgba(0,208,132,.16) !important;
}
#incomeAnalytics .analytics-category-panel.advance .analytics-category-panel-share{
  color:#4d9cff !important;
  background:rgba(77,156,255,.08) !important;
  border-color:rgba(77,156,255,.16) !important;
}
#incomeAnalytics .analytics-category-panel.other .analytics-category-panel-share{
  color:#a66cff !important;
  background:rgba(166,108,255,.09) !important;
  border-color:rgba(166,108,255,.17) !important;
}
#incomeAnalytics .analytics-category-panel.pension .analytics-category-panel-share{
  color:#ffad00 !important;
  background:rgba(255,173,0,.09) !important;
  border-color:rgba(255,173,0,.17) !important;
}

/* Процент — справа от иконки, на одной горизонтали с ней */
#incomeAnalytics .analytics-category-panel-share{
  top:28px !important;
  right:20px !important;
  bottom:auto !important;
  min-width:48px !important;
  height:32px !important;
  padding:0 9px !important;
  border-radius:9px !important;
  font-size:14px !important;
}

#incomeAnalytics .analytics-category-panel{
  cursor:default !important;
}

/* Убираем служебные надписи на главной, не затрагивая сами карточки и статистику. */
#incomeAnalytics .analytics-panel-title,
#incomeAnalytics .analytics-panel-subtitle,
#incomeAnalytics .analytics-category-title{
  display:none !important;
}

/* Удаляем именно служебные подписи «Статистика» и «Нажмите, чтобы открыть». */
#incomeAnalytics .analytics-panel-subtitle,
#incomeAnalytics [class*="subtitle"],
#incomeAnalytics [class*="hint"],
#incomeAnalytics [class*="description"]{
  display:none !important;
}

/* Шапка дохода: левый блок и сумма справа выровнены по размеру и вертикали */
#incomeAnalytics .analytics-head{
  align-items:center !important;
}
#incomeAnalytics .analytics-title-block h2{
  margin:0 !important;
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  flex-wrap:nowrap !important;
  font-size:24px !important;
  line-height:32px !important;
}
#incomeAnalytics .analytics-total{
  font-size:24px !important;
  line-height:32px !important;
}
#incomeAnalytics .analytics-year-switcher{
  min-height:32px !important;
  height:32px !important;
  border-radius:9px !important;
}
#incomeAnalytics #analyticsYearControl{
  font-size:14px !important;
  line-height:32px !important;
}

/* Тёмная тема: фон страницы ближе к чёрному */
html[data-theme="dark"]{
  --bg:#070b12;
  --bg-accent:#111827;
}
html[data-theme="dark"] body:not(.qp-bg-standard):not(.qp-bg-custom){
  background:#070b12 !important;
}

/* Desktop standard background: restore the original auth-screen canvas.
   Mobile keeps its own copy in mobile.css. */
@media (hover:hover) and (pointer:fine), (pointer:coarse) and (min-width:901px) and (max-width:1200px){
  html[data-theme="dark"] body.qp-bg-standard{
    isolation:isolate;
    overflow-x:hidden !important;
    background:
      radial-gradient(120% 86% at 50% -24%,rgba(72,99,135,.42) 0 18%,rgba(32,48,70,.20) 34%,transparent 52%),
      radial-gradient(80% 58% at -8% 72%,rgba(47,70,99,.34) 0 24%,transparent 54%),
      radial-gradient(86% 62% at 108% 32%,rgba(46,69,98,.32) 0 22%,transparent 53%),
      linear-gradient(145deg,#05080e 0%,#09111c 42%,#070c14 72%,#04070c 100%) !important;
  }

  html[data-theme="dark"] body.qp-bg-standard::before,
  html[data-theme="dark"] body.qp-bg-standard::after{
    content:"";
    position:fixed;
    pointer-events:none;
    z-index:0;
  }

  html[data-theme="dark"] body.qp-bg-standard::before{
    width:max(980px,86vw);
    height:max(520px,47vw);
    left:min(-280px,-16vw);
    bottom:min(-250px,-12vw);
    border-radius:50%;
    background:linear-gradient(165deg,rgba(52,76,108,.62) 0%,rgba(16,27,42,.92) 42%,rgba(5,9,15,.98) 72%);
    box-shadow:
      0 -1px 0 rgba(167,193,224,.16),
      0 -24px 72px rgba(72,101,139,.10),
      0 -70px 140px rgba(44,67,96,.08);
    transform:rotate(13deg);
    transform-origin:center;
  }

  html[data-theme="dark"] body.qp-bg-standard::after{
    width:max(1120px,92vw);
    height:max(500px,41vw);
    right:min(-360px,-20vw);
    top:min(-210px,-9vw);
    border-radius:50%;
    background:linear-gradient(345deg,rgba(54,79,112,.58) 0%,rgba(15,26,40,.94) 44%,rgba(5,9,15,.99) 76%);
    box-shadow:
      0 1px 0 rgba(157,185,218,.14),
      0 26px 80px rgba(64,91,126,.10),
      0 72px 150px rgba(42,64,91,.07);
    transform:rotate(-10deg);
    transform-origin:center;
  }

  html[data-theme="dark"] body.qp-bg-standard > .app{
    position:relative;
    z-index:1;
    background:transparent !important;
  }

  @media (min-width:2200px){
    html[data-theme="dark"] body.qp-bg-standard::before{
      width:76vw;
      height:38vw;
      left:-12vw;
      bottom:-11vw;
    }

    html[data-theme="dark"] body.qp-bg-standard::after{
      width:78vw;
      height:34vw;
      right:-14vw;
      top:-8vw;
    }
  }
}

/* Нижняя панель: режим отображения подписей */
.nav-label-mode-options{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px !important;
  margin-top:12px;
  max-width:100%;
}
.nav-label-mode-btn{
  min-height:40px;
  padding:8px 10px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--panel-muted);
  color:var(--text);
  font:inherit;
  font-size:13px;
  cursor:pointer;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.nav-label-mode-btn:hover{background:var(--panel);}
.nav-label-mode-btn.active{
  background:var(--active);
  border-color:var(--border-strong,var(--border));
  color:var(--text);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--border) 70%,transparent);
}
html[data-nav-label-mode="icons"] .nav-label{display:none !important;}
html[data-nav-label-mode="icons"] .nav-item{gap:0;}
html[data-nav-label-mode="text"] .nav-icon{display:none !important;}
html[data-nav-label-mode="text"] .nav-item{gap:0;}
@media (max-width:560px ) and (pointer:coarse){
  .nav-label-mode-options{grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* Нижняя панель — единый стиль с остальными настройками. */
#settings > .settings-card:not([style]) > .nav-label-mode-title{
  order:4 !important;
  margin:0 0 12px 0 !important;
}
#settings > .settings-card:not([style]) > .nav-label-mode-options{
  order:4 !important;
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px !important;
  width:100% !important;
  margin:0 !important;
}
#settings > .settings-card:not([style]) .nav-label-mode-btn{
  min-height:44px !important;
  padding:10px 12px !important;
  border:1px solid var(--border) !important;
  border-radius:10px !important;
  background:var(--panel-muted) !important;
  color:var(--text) !important;
  font:inherit !important;
  font-size:13px !important;
  box-shadow:none !important;
  transform:none !important;
}
#settings > .settings-card:not([style]) .nav-label-mode-btn:hover{
  background:var(--panel) !important;
  border-color:var(--border-strong,var(--border)) !important;
}
#settings > .settings-card:not([style]) .nav-label-mode-btn.active{
  background:var(--panel) !important;
  border-color:var(--primary) !important;
  box-shadow:inset 0 0 0 1px var(--primary) !important;
  color:var(--text) !important;
}
@media (max-width:700px ) and (pointer:coarse){
  #settings > .settings-card:not([style]) > .nav-label-mode-options{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

.qp-confirm-overlay{position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(15,23,42,.28);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.qp-confirm-dialog{width:min(460px,calc(100vw - 40px));background:var(--surface,#fff);color:var(--text,#172033);border:1px solid rgba(100,116,139,.28);border-radius:18px;box-shadow:0 20px 60px rgba(15,23,42,.22);padding:24px}
.qp-confirm-title{margin:0 0 8px;font-size:18px;line-height:24px;font-weight:700}
.qp-confirm-message{margin:0;color:var(--muted,#64748b);font-size:14px;line-height:20px}
.qp-confirm-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}
.qp-confirm-btn{min-width:104px;height:40px;padding:0 18px;border-radius:10px;border:1px solid rgba(100,116,139,.28);font:inherit;font-size:14px;cursor:pointer;background:var(--surface,#fff);color:var(--text,#172033)}
.qp-confirm-btn:hover{background:#f1f3f6}
.qp-confirm-btn-primary{border-color:#2563eb;background:#2563eb;color:#fff}
.qp-confirm-btn-primary:hover{background:#1d4ed8}
.qp-confirm-phrase-form{margin-top:16px}
.qp-confirm-phrase-label{display:block;margin:0 0 7px;color:var(--text,#172033);font-size:13px;font-weight:600;line-height:18px}
.qp-confirm-input{display:block;width:100%;height:42px;box-sizing:border-box;padding:0 12px;border:1px solid rgba(100,116,139,.34);border-radius:10px;background:var(--surface,#fff);color:var(--text,#172033);font:inherit;font-size:14px;outline:none}
.qp-confirm-input:focus{border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.14)}
.qp-confirm-btn-danger{border-color:#dc2626;background:#dc2626;color:#fff}
.qp-confirm-btn-danger:hover:not(:disabled){background:#b91c1c}
.qp-confirm-btn:disabled{opacity:.45;cursor:not-allowed}
.qp-confirm-btn-danger:disabled:hover{background:#dc2626}
html[data-theme="dark"] .qp-confirm-overlay{background:rgba(0,0,0,.52)}
html[data-theme="dark"] .qp-confirm-dialog{background:#151b2a;color:#edf1f7;border-color:rgba(255,255,255,.12);box-shadow:0 20px 60px rgba(0,0,0,.45)}
html[data-theme="dark"] .qp-confirm-message{color:#9aa5b8}
html[data-theme="dark"] .qp-confirm-phrase-label{color:#edf1f7}
html[data-theme="dark"] .qp-confirm-input{background:#101624;color:#edf1f7;border-color:rgba(255,255,255,.16)}
html[data-theme="dark"] .qp-confirm-input:focus{border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.18)}
html[data-theme="dark"] .qp-confirm-btn{background:#1b2232;color:#edf1f7;border-color:rgba(255,255,255,.12)}
html[data-theme="dark"] .qp-confirm-btn:hover{background:#232c40}
html[data-theme="dark"] .qp-confirm-btn-danger{border-color:#dc2626;background:#dc2626;color:#fff}
html[data-theme="dark"] .qp-confirm-btn-danger:hover:not(:disabled){background:#b91c1c}
html[data-theme="dark"] .qp-confirm-btn-danger:disabled:hover{background:#dc2626}
@media(max-width:520px ) and (pointer:coarse){.qp-confirm-dialog{padding:20px}.qp-confirm-actions{flex-direction:column-reverse}.qp-confirm-btn{width:100%;min-height:44px}}

/* Home: four most recently added incomes inside the top summary card. */
#income .income-top{
  row-gap:18px;
}
#income .income-top > .income-recent{
  grid-column:1/-1;
  width:100%;
  min-width:0;
  margin:0;
  padding-top:14px;
}
#income .income-recent-controls{
  display:flex;
  justify-content:flex-start;
  align-items:center;
  margin:0 0 10px;
}
#income .income-recent-toggle{
  display:inline-flex;
  align-items:center;
  min-width:30px;
  min-height:30px;
  padding:0 6px;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--panel-muted);
  color:var(--text-muted);
  font:inherit;
  font-size:12px;
  cursor:pointer;
}
#income .income-recent-toggle:hover{
  color:var(--text);
  background:var(--active);
}
#income .income-recent-pager{
  display:flex !important;
  visibility:visible !important;
  opacity:1 !important;
  align-items:center;
  gap:7px;
  margin-left:auto;
}
#income .income-recent-pager[hidden]{
  display:flex !important;
}

/* Hide recent-income pagination during the initial auth/loading check.
   Prevents the controls from flashing alone on the background during refresh. */
body.qp-auth-checking #income .income-recent-pager,
body.qp-auth-locked #income .income-recent-pager{
  display:none !important;
}
#income .income-recent-page-btn{
  width:30px;
  height:30px;
  padding:0;
  display:grid;
  place-items:center;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--panel-muted);
  color:var(--text-muted);
  cursor:pointer;
  transition:color .15s ease,background .15s ease,border-color .15s ease,opacity .15s ease;
}
#income .income-recent-page-btn:hover:not(:disabled){
  color:var(--text);
  background:var(--active);
  border-color:color-mix(in srgb,var(--primary) 30%,var(--border));
}
#income .income-recent-page-btn:disabled{
  opacity:.38;
  cursor:default;
}
#income .income-recent-page-btn svg{
  width:16px;
  height:16px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
#income .income-recent-page-indicator{
  min-width:34px;
  color:var(--text-muted);
  font-size:12px;
  line-height:1;
  text-align:center;
  font-variant-numeric:tabular-nums;
}
#income .income-recent-toggle svg{
  width:16px;
  height:16px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  transform:rotate(180deg);
  transition:transform .18s ease;
}
#income .income-recent.is-collapsed{
  padding-top:8px;
}
#income .income-recent.is-collapsed .income-recent-controls{
  margin-bottom:0;
}
#income .income-recent.is-collapsed .income-recent-grid{
  display:none;
}
#income .income-recent.is-collapsed .income-recent-pager{
  display:none !important;
}
#income .income-recent.is-collapsed .income-recent-toggle svg{
  transform:rotate(0deg);
}
#income .income-recent-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}
#income .income-recent-card{
  position:relative;
  min-width:0;
  display:grid;
  grid-template-columns:max-content minmax(0,1fr);
  grid-template-areas:
    "date category"
    "amount amount";
  align-items:center;
  gap:8px;
  min-height:88px;
  padding:14px;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:16px;
  background:var(--panel);
  box-shadow:var(--shadow-sm);
}
#income .income-recent-amount{
  grid-area:amount;
  min-width:0;
  margin-left:10px;
  color:var(--text);
  font-size:26px;
  line-height:1.12;
  font-weight:750;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;
  white-space:nowrap;
}
#income .income-recent-category{
  grid-area:category;
  justify-self:end;
  align-self:center;
  width:max-content;
  max-width:100%;
  padding:5px 9px;
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--primary) 28%,var(--border));
  border-radius:999px;
  background:color-mix(in srgb,var(--primary) 10%,transparent);
  color:var(--primary);
  font-size:12px;
  line-height:1.15;
  font-weight:650;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#income .income-recent-date{
  grid-area:date;
  margin-left:10px;
  color:var(--text-muted);
  font-size:15px;
  line-height:1.25;
  font-weight:500;
  white-space:nowrap;
}

@media (hover:hover) and (pointer:fine), (pointer:coarse) and (min-width:901px) and (max-width:1200px){
  #income .income-recent-mobile-actions{
    display:none !important;
  }
}
@media (hover:hover) and (pointer:fine), (pointer:coarse) and (min-width:901px) and (max-width:1200px){
  #income .income-recent-card{
    cursor:pointer;
  }
  #income .income-recent-edit{
    position:absolute;
    right:10px;
    bottom:10px;
    display:grid;
    place-items:center;
    width:28px;
    height:28px;
    padding:0;
    border:1px solid var(--border);
    border-radius:8px;
    background:var(--panel);
    color:var(--icon-color);
    box-shadow:var(--shadow-sm);
    cursor:pointer;
    opacity:0;
    pointer-events:none;
    transition:opacity .15s ease,transform .15s ease,background .15s ease;
  }
  #income .income-recent-card.is-selected .income-recent-edit{
    opacity:1;
    pointer-events:auto;
  }
  #income .income-recent-edit:hover{
    transform:scale(1.06);
    background:var(--panel-muted);
  }
  #income .income-recent-edit .history-action-pencil{
    display:block;
    font-size:16px;
    line-height:1;
  }
}
@media(max-width:760px ) and (pointer:coarse){
  #income .income-recent-edit{
    display:none !important;
  }
}
#income .income-recent-empty{
  grid-column:1/-1;
  padding:18px;
  border:1px dashed var(--border);
  border-radius:16px;
  color:var(--text-muted);
  text-align:center;
}
@media(max-width:1050px){
  #income .income-recent-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media(max-width:560px ) and (pointer:coarse){
  #income .income-top > .income-recent{
    width:100%;
    padding-top:12px;
  }
  #income .income-recent-controls{
    margin-bottom:8px;
  }
  #income .income-recent-grid{
    grid-template-columns:1fr;
    gap:10px;
  }
  #income .income-recent-card{
    min-height:0;
  }
}

/* Annual analytics desktop: two wide summary cards per row. */
@media (hover:hover) and (pointer:fine), (pointer:coarse) and (min-width:901px) and (max-width:1200px){
  #incomeAnalytics:not(.is-monthly) > .analytics-cards{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  }
  #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card{
    grid-column:span 2;
  }
}

/* Annual analytics desktop: match the compact monthly visual system. */
@media (hover:hover) and (pointer:fine), (pointer:coarse) and (min-width:901px) and (max-width:1200px){
  #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card{
    min-height:146px !important;
    padding:16px 28px !important;
    display:grid !important;
    grid-template-columns:auto minmax(0,1fr) !important;
    align-items:center !important;
    column-gap:18px !important;
    gap:18px !important;
  }

  #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card .analytics-card-icon{
    align-self:center !important;
    width:52px !important;
    height:52px !important;
    min-width:52px !important;
    flex:0 0 52px !important;
    border-radius:14px !important;
  }
  #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card .analytics-card-icon svg{
    width:27px !important;
    height:27px !important;
  }

  #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card .analytics-card-body{
    width:calc(100% - 8px) !important;
    margin:0 0 0 8px !important;
  }

  #incomeAnalytics:not(.is-monthly) .analytics-card-best .analytics-card-body,
  #incomeAnalytics:not(.is-monthly) .analytics-card-worst .analytics-card-body{
    display:grid !important;
    grid-template-columns:150px auto !important;
    grid-template-areas:
      "label amount"
      "month amount" !important;
    column-gap:18px !important;
    row-gap:6px !important;
    align-items:center !important;
    justify-content:start !important;
  }

  #incomeAnalytics:not(.is-monthly) .analytics-card-best .analytics-card-body > span,
  #incomeAnalytics:not(.is-monthly) .analytics-card-worst .analytics-card-body > span{
    grid-area:label !important;
    margin:0 !important;
    color:color-mix(in srgb,var(--text) 72%,var(--text-muted)) !important;
    font-size:13px !important;
  }

  #incomeAnalytics:not(.is-monthly) .analytics-card-best .analytics-card-body > strong,
  #incomeAnalytics:not(.is-monthly) .analytics-card-worst .analytics-card-body > strong{
    grid-area:month !important;
    margin:0 !important;
    color:var(--text) !important;
    font-size:24px !important;
    font-weight:650 !important;
    line-height:1.15 !important;
    white-space:nowrap !important;
  }

  #incomeAnalytics:not(.is-monthly) .analytics-card-best .analytics-card-body > b,
  #incomeAnalytics:not(.is-monthly) .analytics-card-worst .analytics-card-body > b{
    grid-area:amount !important;
    align-self:center !important;
    justify-self:start !important;
    margin:0 !important;
    color:var(--text) !important;
    font-size:34px !important;
    font-weight:650 !important;
    line-height:1 !important;
    white-space:nowrap !important;
  }

  #incomeAnalytics:not(.is-monthly) .analytics-card-average .analytics-card-body{
    display:grid !important;
    grid-template-columns:150px auto !important;
    grid-template-areas:"label value" !important;
    column-gap:18px !important;
    align-items:center !important;
    justify-content:start !important;
  }

  #incomeAnalytics:not(.is-monthly) .analytics-card-average .analytics-card-body > span{
    grid-area:label !important;
    margin:0 !important;
    color:color-mix(in srgb,var(--text) 72%,var(--text-muted)) !important;
    font-size:13px !important;
  }

  #incomeAnalytics:not(.is-monthly) .analytics-card-average .analytics-card-body > strong{
    grid-area:value !important;
    align-self:center !important;
    justify-self:start !important;
    margin:0 !important;
    color:var(--text) !important;
    font-size:34px !important;
    line-height:1 !important;
    white-space:nowrap !important;
  }

  #incomeAnalytics:not(.is-monthly) .analytics-card-growth .analytics-card-body{
    display:grid !important;
    grid-template-columns:150px auto !important;
    grid-template-areas:
      "label value"
      "note value" !important;
    column-gap:18px !important;
    row-gap:8px !important;
    align-items:center !important;
    justify-content:start !important;
  }

  #incomeAnalytics:not(.is-monthly) .analytics-card-growth .analytics-card-body > span{
    grid-area:label !important;
    margin:0 !important;
    color:color-mix(in srgb,var(--text) 72%,var(--text-muted)) !important;
    font-size:13px !important;
  }

  #incomeAnalytics:not(.is-monthly) .analytics-card-growth .analytics-card-body > strong{
    grid-area:value !important;
    align-self:center !important;
    justify-self:start !important;
    margin:0 !important;
    font-size:34px !important;
    line-height:1 !important;
    white-space:nowrap !important;
  }

  #incomeAnalytics:not(.is-monthly) .analytics-card-growth .analytics-card-body > small{
    grid-area:note !important;
    max-width:none !important;
    margin:0 !important;
    color:color-mix(in srgb,var(--text) 64%,var(--text-muted)) !important;
    font-size:12px !important;
  }

  #incomeAnalytics:not(.is-monthly) .analytics-card-growth:has(#analyticsGrowth.positive){
    border-color:color-mix(in srgb,var(--success) 30%,var(--border)) !important;
  }
  #incomeAnalytics:not(.is-monthly) .analytics-card-growth:has(#analyticsGrowth.positive) .analytics-card-icon{
    color:var(--success) !important;
    background:color-mix(in srgb,var(--success) 14%,transparent) !important;
  }
  #incomeAnalytics:not(.is-monthly) .analytics-card-growth:has(#analyticsGrowth.positive)::after{
    background:rgba(24,185,129,.10) !important;
  }

  #incomeAnalytics:not(.is-monthly) .analytics-card-growth:has(#analyticsGrowth.negative){
    border-color:color-mix(in srgb,var(--danger) 30%,var(--border)) !important;
  }
  #incomeAnalytics:not(.is-monthly) .analytics-card-growth:has(#analyticsGrowth.negative) .analytics-card-icon{
    color:var(--danger) !important;
    background:color-mix(in srgb,var(--danger) 14%,transparent) !important;
  }
  #incomeAnalytics:not(.is-monthly) .analytics-card-growth:has(#analyticsGrowth.negative)::after{
    background:rgba(239,68,68,.10) !important;
  }

  #incomeAnalytics:not(.is-monthly) .analytics-category-panel{
    min-height:136px !important;
    height:136px !important;
    padding:18px !important;
    gap:12px !important;
    border-radius:18px !important;
  }

  #incomeAnalytics:not(.is-monthly) .analytics-category-panel::after{
    width:140px !important;
    height:140px !important;
    right:-48px !important;
    bottom:-74px !important;
  }

  #incomeAnalytics:not(.is-monthly) .analytics-category-panel-icon{
    flex:0 0 38px !important;
    width:38px !important;
    height:38px !important;
    border-radius:11px !important;
  }

  #incomeAnalytics:not(.is-monthly) .analytics-category-panel-icon svg{
    width:21px !important;
    height:21px !important;
  }

  #incomeAnalytics:not(.is-monthly) .analytics-category-panel-name{
    margin-top:12px !important;
    color:color-mix(in srgb,var(--text) 72%,var(--text-muted)) !important;
    font-size:13px !important;
    line-height:1.3 !important;
  }

  #incomeAnalytics:not(.is-monthly) .analytics-category-panel-value{
    margin-top:7px !important;
    font-size:21px !important;
    font-weight:650 !important;
    line-height:1.15 !important;
    letter-spacing:-.02em !important;
  }

  #incomeAnalytics:not(.is-monthly) .analytics-category-panel-share{
    top:18px !important;
    right:18px !important;
    min-width:46px !important;
    height:30px !important;
    padding:0 9px !important;
    border-radius:9px !important;
    font-size:13px !important;
    font-weight:650 !important;
  }
}

/* Annual category cards desktop: minimalist option 3. */
@media (hover:hover) and (pointer:fine), (pointer:coarse) and (min-width:901px) and (max-width:1200px){
  #incomeAnalytics:not(.is-monthly) .analytics-category-panels{
    gap:16px !important;
  }

  #incomeAnalytics:not(.is-monthly) .analytics-category-panel{
    min-height:112px !important;
    height:112px !important;
    padding:16px 18px !important;
    display:grid !important;
    grid-template-columns:34px minmax(0,1fr) auto !important;
    grid-template-rows:34px minmax(0,1fr) !important;
    column-gap:10px !important;
    row-gap:8px !important;
    align-items:center !important;
    overflow:hidden !important;
    border:1px solid color-mix(in srgb,var(--category) 28%,var(--border)) !important;
    border-radius:16px !important;
    background:var(--panel-muted) !important;
    box-shadow:none !important;
  }

  #incomeAnalytics:not(.is-monthly) .analytics-category-panel::after{
    content:"" !important;
    display:block !important;
    position:absolute !important;
    z-index:0 !important;
    width:120px !important;
    height:120px !important;
    right:-44px !important;
    bottom:-72px !important;
    border-radius:50% !important;
    background:var(--category-soft) !important;
    pointer-events:none !important;
  }

  #incomeAnalytics:not(.is-monthly) .analytics-category-panel:hover{
    transform:translateY(-1px) !important;
    border-color:color-mix(in srgb,var(--category) 48%,var(--border)) !important;
    background:var(--panel-muted) !important;
  }

  #incomeAnalytics:not(.is-monthly) .analytics-category-panel-icon{
    position:relative !important;
    z-index:1 !important;
    grid-column:1 !important;
    grid-row:1 !important;
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    flex:0 0 34px !important;
    margin:0 !important;
    border-radius:10px !important;
    background:color-mix(in srgb,var(--category) 14%,transparent) !important;
    color:var(--category) !important;
  }

  #incomeAnalytics:not(.is-monthly) .analytics-category-panel-icon svg{
    width:18px !important;
    height:18px !important;
    stroke-width:1.8 !important;
  }

  #incomeAnalytics:not(.is-monthly) .analytics-category-panel-body{
    display:contents !important;
  }

  #incomeAnalytics:not(.is-monthly) .analytics-category-panel-name{
    grid-column:2 !important;
    grid-row:1 !important;
    align-self:center !important;
    min-width:0 !important;
    margin:0 !important;
    overflow:hidden !important;
    color:color-mix(in srgb,var(--text) 82%,var(--text-muted)) !important;
    font-size:13px !important;
    font-weight:600 !important;
    line-height:1.2 !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }

  #incomeAnalytics:not(.is-monthly) .analytics-category-panel-value{
    grid-column:1 / 4 !important;
    grid-row:2 !important;
    align-self:start !important;
    margin:4px 0 0 !important;
    color:var(--text) !important;
    font-size:21px !important;
    font-weight:700 !important;
    line-height:1.08 !important;
    letter-spacing:-.02em !important;
    white-space:nowrap !important;
  }

  #incomeAnalytics:not(.is-monthly) .analytics-category-panel-share{
    position:static !important;
    grid-column:3 !important;
    grid-row:1 !important;
    align-self:center !important;
    justify-self:end !important;
    min-width:44px !important;
    height:28px !important;
    padding:0 9px !important;
    border:1px solid color-mix(in srgb,var(--category) 30%,transparent) !important;
    border-radius:9px !important;
    background:color-mix(in srgb,var(--category) 9%,transparent) !important;
    color:var(--category) !important;
    font-size:12px !important;
    font-weight:650 !important;
    line-height:1 !important;
  }
}

/* Desktop experiment: best-month card with amount on a lower row. */
@media (hover:hover) and (pointer:fine), (pointer:coarse) and (min-width:901px) and (max-width:1200px){
  #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card-best{
    align-items:center !important;
  }

  #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card-best .analytics-card-icon{
    align-self:start !important;
    margin-top:8px !important;
  }

  #incomeAnalytics:not(.is-monthly) .analytics-card-best .analytics-card-body{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    grid-template-areas:
      "label"
      "month"
      "amount" !important;
    row-gap:4px !important;
    align-items:start !important;
    justify-content:stretch !important;
    width:100% !important;
    margin-left:8px !important;
  }

  #incomeAnalytics:not(.is-monthly) .analytics-card-best .analytics-card-body > span{
    grid-area:label !important;
    margin:0 !important;
  }

  #incomeAnalytics:not(.is-monthly) .analytics-card-best .analytics-card-body > strong{
    grid-area:month !important;
    margin:0 !important;
  }

  #incomeAnalytics:not(.is-monthly) .analytics-card-best .analytics-card-body > b{
    grid-area:amount !important;
    width:100% !important;
    margin:8px 0 0 !important;
    padding-top:10px !important;
    border-top:1px solid color-mix(in srgb,var(--border) 82%,transparent) !important;
    justify-self:stretch !important;
    text-align:center !important;
    font-size:32px !important;
    line-height:1 !important;
  }
}

/* Desktop experiment: compact width for best-month card. */
@media (hover:hover) and (pointer:fine), (pointer:coarse) and (min-width:901px) and (max-width:1200px){
  #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card-best{
    width:min(390px,100%) !important;
    max-width:390px !important;
    justify-self:start !important;
    box-sizing:border-box !important;
  }
}

/* Annual desktop layout: asymmetric metric dashboard with central total. */
@media (hover:hover) and (pointer:fine), (pointer:coarse) and (min-width:901px) and (max-width:1200px){
  /* Total now lives in the central hero card on the annual desktop view. */
  #incomeAnalytics:not(.is-monthly) > .analytics-head{
    display:none !important;
  }

  #incomeAnalytics:not(.is-monthly) > .analytics-cards{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(270px,1.12fr) minmax(0,1fr) !important;
    grid-template-rows:112px 112px !important;
    gap:14px !important;
    align-items:stretch !important;
  }

  #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card{
    width:auto !important;
    max-width:none !important;
    min-width:0 !important;
    min-height:112px !important;
    height:112px !important;
    grid-column:auto !important;
    padding:14px 16px !important;
    display:grid !important;
    grid-template-columns:44px minmax(0,1fr) !important;
    align-items:center !important;
    gap:12px !important;
    border-radius:18px !important;
    box-sizing:border-box !important;
  }

  #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card::before{
    content:"" !important;
    position:absolute !important;
    z-index:1 !important;
    right:16px !important;
    bottom:14px !important;
    width:62px !important;
    height:30px !important;
    opacity:.38 !important;
    pointer-events:none !important;
  }

  #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card-best{
    grid-column:1 !important;
    grid-row:1 !important;
    justify-self:stretch !important;
  }
  #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card-worst{
    grid-column:1 !important;
    grid-row:2 !important;
  }
  #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card-average{
    grid-column:3 !important;
    grid-row:1 !important;
  }
  #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card-growth{
    grid-column:3 !important;
    grid-row:2 !important;
  }

  /* Tiny metric graphics fill the far edge without competing with text. */
  #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card-best::before{
    background:
      linear-gradient(var(--success),var(--success)) 0 100%/7px 35% no-repeat,
      linear-gradient(var(--success),var(--success)) 13px 100%/7px 58% no-repeat,
      linear-gradient(var(--success),var(--success)) 26px 100%/7px 44% no-repeat,
      linear-gradient(var(--success),var(--success)) 39px 100%/7px 78% no-repeat,
      linear-gradient(var(--success),var(--success)) 52px 100%/7px 66% no-repeat !important;
  }
  #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card-worst::before{
    background:
      linear-gradient(var(--danger),var(--danger)) 0 100%/7px 76% no-repeat,
      linear-gradient(var(--danger),var(--danger)) 13px 100%/7px 62% no-repeat,
      linear-gradient(var(--danger),var(--danger)) 26px 100%/7px 48% no-repeat,
      linear-gradient(var(--danger),var(--danger)) 39px 100%/7px 30% no-repeat,
      linear-gradient(var(--danger),var(--danger)) 52px 100%/7px 18% no-repeat !important;
  }
  #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card-average::before{
    background:
      linear-gradient(135deg,transparent 0 12%,#3b82f6 13% 17%,transparent 18% 31%,#3b82f6 32% 36%,transparent 37% 50%,#3b82f6 51% 55%,transparent 56%) !important;
    transform:skewY(-8deg) !important;
  }
  #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card-growth::before{
    background:
      linear-gradient(135deg,transparent 0 12%,currentColor 13% 17%,transparent 18% 31%,currentColor 32% 36%,transparent 37% 50%,currentColor 51% 55%,transparent 56%) !important;
    color:var(--danger);
    transform:skewY(8deg) !important;
  }
  #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card-growth:has(#analyticsGrowth.positive)::before{
    color:var(--success);
  }

  #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card .analytics-card-icon{
    align-self:center !important;
    width:44px !important;
    height:44px !important;
    min-width:44px !important;
    flex:0 0 44px !important;
    margin:0 !important;
    border-radius:12px !important;
  }
  #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card .analytics-card-icon svg{
    width:23px !important;
    height:23px !important;
  }

  #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card .analytics-card-body{
    width:calc(100% - 72px) !important;
    max-width:calc(100% - 72px) !important;
    margin:0 !important;
    display:block !important;
  }

  #incomeAnalytics:not(.is-monthly) .analytics-card-best .analytics-card-body > span,
  #incomeAnalytics:not(.is-monthly) .analytics-card-worst .analytics-card-body > span,
  #incomeAnalytics:not(.is-monthly) .analytics-card-average .analytics-card-body > span,
  #incomeAnalytics:not(.is-monthly) .analytics-card-growth .analytics-card-body > span{
    display:block !important;
    margin:0 0 4px !important;
    color:color-mix(in srgb,var(--text) 72%,var(--text-muted)) !important;
    font-size:12px !important;
    line-height:1.25 !important;
  }

  #incomeAnalytics:not(.is-monthly) .analytics-card-best .analytics-card-body > strong,
  #incomeAnalytics:not(.is-monthly) .analytics-card-worst .analytics-card-body > strong{
    display:inline !important;
    margin:0 8px 0 0 !important;
    color:var(--text) !important;
    font-size:20px !important;
    font-weight:650 !important;
    line-height:1.1 !important;
    white-space:nowrap !important;
  }
  #incomeAnalytics:not(.is-monthly) .analytics-card-best .analytics-card-body > b,
  #incomeAnalytics:not(.is-monthly) .analytics-card-worst .analytics-card-body > b{
    display:block !important;
    width:auto !important;
    margin:6px 0 0 !important;
    padding:0 !important;
    border:0 !important;
    color:var(--text) !important;
    font-size:22px !important;
    font-weight:700 !important;
    line-height:1.05 !important;
    text-align:left !important;
    white-space:nowrap !important;
  }

  #incomeAnalytics:not(.is-monthly) .analytics-card-average .analytics-card-body > strong,
  #incomeAnalytics:not(.is-monthly) .analytics-card-growth .analytics-card-body > strong{
    display:block !important;
    margin:5px 0 0 !important;
    font-size:25px !important;
    line-height:1.05 !important;
    white-space:nowrap !important;
  }
  #incomeAnalytics:not(.is-monthly) .analytics-card-growth .analytics-card-body > small{
    display:block !important;
    max-width:150px !important;
    margin:5px 0 0 !important;
    font-size:10px !important;
    line-height:1.25 !important;
  }

  #incomeAnalytics:not(.is-monthly) .annual-total-card{
    position:relative;
    grid-column:2 !important;
    grid-row:1 / 3 !important;
    min-width:0;
    min-height:238px;
    padding:14px;
    display:grid;
    grid-template-rows:minmax(0,1fr) auto;
    place-items:center;
    gap:10px;
    overflow:hidden;
    border:1px solid color-mix(in srgb,var(--primary) 32%,var(--border));
    border-radius:24px;
    background:
      radial-gradient(circle at 50% 34%,color-mix(in srgb,var(--primary) 8%,transparent),transparent 48%),
      var(--panel-muted);
    box-sizing:border-box;
  }
  #incomeAnalytics:not(.is-monthly) .annual-total-card::after{
    content:"";
    position:absolute;
    width:170px;
    height:170px;
    right:-80px;
    bottom:-95px;
    border-radius:50%;
    background:color-mix(in srgb,var(--primary) 9%,transparent);
    pointer-events:none;
  }

  #incomeAnalytics:not(.is-monthly) .annual-total-ring{
    width:154px;
    height:154px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:
      radial-gradient(circle,var(--panel-muted) 0 61%,transparent 62%),
      conic-gradient(from -55deg,var(--success) 0 30%,#3b82f6 30% 59%,#8b5cf6 59% 78%,#f59e0b 78% 88%,color-mix(in srgb,var(--border) 70%,transparent) 88% 100%);
    box-shadow:
      0 0 0 1px color-mix(in srgb,var(--border) 80%,transparent),
      0 12px 28px rgba(0,0,0,.12);
  }
  #incomeAnalytics:not(.is-monthly) .annual-total-ring-inner{
    width:112px;
    height:112px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    border:1px solid color-mix(in srgb,var(--border) 70%,transparent);
    border-radius:50%;
    background:color-mix(in srgb,var(--panel) 93%,transparent);
    text-align:center;
  }
  #incomeAnalytics:not(.is-monthly) .annual-total-ring-inner > span{
    color:var(--text-muted);
    font-size:11px;
    line-height:1.2;
  }
  #incomeAnalytics:not(.is-monthly) .annual-total-ring-inner > strong{
    max-width:102px;
    margin-top:5px;
    color:var(--text);
    font-size:21px;
    font-weight:750;
    line-height:1.05;
    letter-spacing:-.025em;
    white-space:nowrap;
  }
  #incomeAnalytics:not(.is-monthly) .annual-total-ring-inner > small{
    margin-top:5px;
    color:color-mix(in srgb,var(--text) 58%,var(--text-muted));
    font-size:10px;
  }

  #incomeAnalytics:not(.is-monthly) .annual-total-meta{
    position:relative;
    z-index:1;
    width:100%;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
  }
  #incomeAnalytics:not(.is-monthly) .annual-total-meta > span{
    min-width:0;
    padding:8px 6px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    border:1px solid color-mix(in srgb,var(--border) 88%,transparent);
    border-radius:11px;
    background:color-mix(in srgb,var(--panel) 78%,transparent);
    text-align:center;
  }
  #incomeAnalytics:not(.is-monthly) .annual-total-meta b{
    color:var(--text);
    font-size:16px;
    line-height:1;
  }
  #incomeAnalytics:not(.is-monthly) .annual-total-meta small{
    margin-top:4px;
    color:var(--text-muted);
    font-size:9px;
    line-height:1.15;
    white-space:nowrap;
  }

  /* Five compact categories complete the composition in one row. */
  #incomeAnalytics:not(.is-monthly) .analytics-grid{
    margin-top:14px !important;
  }
  #incomeAnalytics:not(.is-monthly) .analytics-panel-title{
    display:none !important;
  }
  #incomeAnalytics:not(.is-monthly) .analytics-category-panels{
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
    gap:10px !important;
  }
  #incomeAnalytics:not(.is-monthly) .analytics-category-panel{
    min-height:104px !important;
    height:104px !important;
    padding:14px 16px !important;
  }
}

/* Annual desktop palette: restrained premium banking treatment. */
@media (hover:hover) and (pointer:fine), (pointer:coarse) and (min-width:901px) and (max-width:1200px){
  /* Summary cards: neutral surfaces; semantic color stays in the data itself. */
  #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card{
    border-color:color-mix(in srgb,var(--border) 92%,#64748b 8%) !important;
    background:color-mix(in srgb,var(--panel-muted) 97%,#64748b 3%) !important;
    box-shadow:none !important;
  }
  #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card::after{
    background:rgba(148,163,184,.045) !important;
  }

  #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card .analytics-card-icon{
    background:rgba(148,163,184,.075) !important;
    border:1px solid rgba(148,163,184,.08) !important;
  }
  #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card-best .analytics-card-icon{
    color:color-mix(in srgb,var(--success) 58%,var(--text-muted)) !important;
  }
  #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card-worst .analytics-card-icon{
    color:color-mix(in srgb,var(--danger) 58%,var(--text-muted)) !important;
  }
  #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card-average .analytics-card-icon{
    color:color-mix(in srgb,#60a5fa 55%,var(--text-muted)) !important;
  }
  #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card-growth .analytics-card-icon{
    color:color-mix(in srgb,var(--danger) 58%,var(--text-muted)) !important;
  }
  #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card-growth:has(#analyticsGrowth.positive) .analytics-card-icon{
    color:color-mix(in srgb,var(--success) 58%,var(--text-muted)) !important;
  }

  /* Mini charts are now subtle texture instead of a bright decoration. */
  #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card::before{
    opacity:.16 !important;
    filter:saturate(.45) !important;
  }

  #incomeAnalytics:not(.is-monthly) .analytics-card-growth .analytics-card-body > strong.positive{
    color:color-mix(in srgb,var(--success) 74%,var(--text)) !important;
  }
  #incomeAnalytics:not(.is-monthly) .analytics-card-growth .analytics-card-body > strong.negative{
    color:color-mix(in srgb,var(--danger) 78%,var(--text)) !important;
  }

  /* Central total: muted steel/blue ring instead of a multicolor rainbow. */
  #incomeAnalytics:not(.is-monthly) .annual-total-card{
    border-color:color-mix(in srgb,var(--border) 88%,#64748b 12%) !important;
    background:
      radial-gradient(circle at 50% 34%,rgba(100,116,139,.055),transparent 50%),
      var(--panel-muted) !important;
  }
  #incomeAnalytics:not(.is-monthly) .annual-total-card::after{
    background:rgba(100,116,139,.05) !important;
  }
  #incomeAnalytics:not(.is-monthly) .annual-total-ring{
    background:
      radial-gradient(circle,var(--panel-muted) 0 61%,transparent 62%),
      conic-gradient(
        from -55deg,
        #62748a 0 44%,
        #486b88 44% 76%,
        #46515f 76% 88%,
        color-mix(in srgb,var(--border) 70%,transparent) 88% 100%
      ) !important;
    box-shadow:
      0 0 0 1px color-mix(in srgb,var(--border) 88%,transparent),
      0 10px 24px rgba(0,0,0,.10) !important;
  }
  #incomeAnalytics:not(.is-monthly) .annual-total-ring-inner{
    border-color:color-mix(in srgb,var(--border) 82%,transparent) !important;
    background:color-mix(in srgb,var(--panel) 96%,#64748b 4%) !important;
  }
  #incomeAnalytics:not(.is-monthly) .annual-total-meta > span{
    border-color:color-mix(in srgb,var(--border) 92%,transparent) !important;
    background:color-mix(in srgb,var(--panel) 88%,#64748b 12%) !important;
  }

  /* Category cards: one calm surface system, accent only for icon and share. */
  #incomeAnalytics:not(.is-monthly) .analytics-category-panel{
    border-color:color-mix(in srgb,var(--border) 90%,#64748b 10%) !important;
    background:color-mix(in srgb,var(--panel-muted) 97%,#64748b 3%) !important;
    box-shadow:none !important;
  }
  #incomeAnalytics:not(.is-monthly) .analytics-category-panel::after{
    background:rgba(148,163,184,.045) !important;
  }
  #incomeAnalytics:not(.is-monthly) .analytics-category-panel:hover{
    border-color:color-mix(in srgb,var(--border) 72%,#94a3b8 28%) !important;
    background:color-mix(in srgb,var(--panel-muted) 95%,#64748b 5%) !important;
  }
  #incomeAnalytics:not(.is-monthly) .analytics-category-panel-icon{
    background:rgba(148,163,184,.075) !important;
    border:1px solid rgba(148,163,184,.08) !important;
    color:color-mix(in srgb,var(--category) 62%,var(--text-muted)) !important;
  }
  #incomeAnalytics:not(.is-monthly) .analytics-category-panel-share{
    border-color:rgba(148,163,184,.14) !important;
    background:rgba(148,163,184,.07) !important;
    color:color-mix(in srgb,var(--category) 68%,var(--text-muted)) !important;
  }
}

/* Annual desktop palette: balanced color after muted pass. */
@media (hover:hover) and (pointer:fine), (pointer:coarse) and (min-width:901px) and (max-width:1200px){
  /* Bring back controlled color in summary cards. */
  #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card{
    border-color:color-mix(in srgb,var(--card-accent,var(--border)) 22%,var(--border)) !important;
    background:var(--panel-muted) !important;
  }
  #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card-best{
    --card-accent:var(--success);
  }
  #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card-worst{
    --card-accent:var(--danger);
  }
  #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card-average{
    --card-accent:#3b82f6;
  }
  #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card-growth{
    --card-accent:var(--danger);
  }
  #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card-growth:has(#analyticsGrowth.positive){
    --card-accent:var(--success);
  }

  #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card::after{
    background:color-mix(in srgb,var(--card-accent,var(--text-muted)) 8%,transparent) !important;
  }

  #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card .analytics-card-icon{
    background:color-mix(in srgb,var(--card-accent,var(--text-muted)) 12%,transparent) !important;
    border-color:color-mix(in srgb,var(--card-accent,var(--border)) 16%,transparent) !important;
    color:color-mix(in srgb,var(--card-accent,var(--text-muted)) 76%,var(--text-muted)) !important;
  }

  #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card::before{
    opacity:.27 !important;
    filter:saturate(.72) !important;
  }

  /* More lively but still mature central ring. */
  #incomeAnalytics:not(.is-monthly) .annual-total-card{
    border-color:color-mix(in srgb,#4f6f8f 24%,var(--border)) !important;
    background:
      radial-gradient(circle at 50% 34%,rgba(64,95,126,.075),transparent 50%),
      var(--panel-muted) !important;
  }
  #incomeAnalytics:not(.is-monthly) .annual-total-card::after{
    background:rgba(72,105,138,.065) !important;
  }
  #incomeAnalytics:not(.is-monthly) .annual-total-ring{
    background:
      radial-gradient(circle,var(--panel-muted) 0 61%,transparent 62%),
      conic-gradient(
        from -55deg,
        #4f7d6b 0 28%,
        #4b78a8 28% 66%,
        #6c5a8d 66% 86%,
        color-mix(in srgb,var(--border) 72%,transparent) 86% 100%
      ) !important;
  }

  /* Category cards: restore category identity without strong colored panels. */
  #incomeAnalytics:not(.is-monthly) .analytics-category-panel{
    border-color:color-mix(in srgb,var(--category) 17%,var(--border)) !important;
    background:var(--panel-muted) !important;
  }
  #incomeAnalytics:not(.is-monthly) .analytics-category-panel::after{
    background:color-mix(in srgb,var(--category) 7%,transparent) !important;
  }
  #incomeAnalytics:not(.is-monthly) .analytics-category-panel:hover{
    border-color:color-mix(in srgb,var(--category) 32%,var(--border)) !important;
    background:var(--panel-muted) !important;
  }
  #incomeAnalytics:not(.is-monthly) .analytics-category-panel-icon{
    background:color-mix(in srgb,var(--category) 11%,transparent) !important;
    border-color:color-mix(in srgb,var(--category) 15%,transparent) !important;
    color:color-mix(in srgb,var(--category) 78%,var(--text-muted)) !important;
  }
  #incomeAnalytics:not(.is-monthly) .analytics-category-panel-share{
    border-color:color-mix(in srgb,var(--category) 18%,transparent) !important;
    background:color-mix(in srgb,var(--category) 8%,transparent) !important;
    color:color-mix(in srgb,var(--category) 82%,var(--text-muted)) !important;
  }
}

/* Annual desktop surfaces: match recent-income card background exactly. */
@media (hover:hover) and (pointer:fine), (pointer:coarse) and (min-width:901px) and (max-width:1200px){
  #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card,
  #incomeAnalytics:not(.is-monthly) .annual-total-card,
  #incomeAnalytics:not(.is-monthly) .analytics-category-panel{
    background:var(--panel) !important;
  }

  #incomeAnalytics:not(.is-monthly) .analytics-category-panel:hover{
    background:var(--panel) !important;
  }
}

/* Annual desktop compact step sparklines. */
.analytics-mini-step{
  display:none;
}
@media (hover:hover) and (pointer:fine), (pointer:coarse) and (min-width:901px) and (max-width:1200px){
  /* Replace the old decorative slashes in the right-side annual cards. */
  #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card-average::before,
  #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card-growth::before{
    display:none !important;
    content:none !important;
  }

  #incomeAnalytics:not(.is-monthly) .analytics-card-average,
  #incomeAnalytics:not(.is-monthly) .analytics-card-growth{
    position:relative !important;
  }

  #incomeAnalytics:not(.is-monthly) .analytics-mini-step{
    position:absolute;
    z-index:2;
    right:16px;
    bottom:16px;
    width:78px;
    height:30px;
    display:block;
    opacity:.78;
    pointer-events:none;
  }
  #incomeAnalytics:not(.is-monthly) .analytics-mini-step svg{
    width:100%;
    height:100%;
    overflow:visible;
  }
  #incomeAnalytics:not(.is-monthly) .analytics-mini-step path{
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
    vector-effect:non-scaling-stroke;
  }
  #incomeAnalytics:not(.is-monthly) .analytics-mini-step circle{
    fill:currentColor;
    filter:drop-shadow(0 0 3px currentColor);
  }

  #incomeAnalytics:not(.is-monthly) .analytics-mini-step-average{
    color:color-mix(in srgb,#60a5fa 72%,var(--text-muted));
  }
  #incomeAnalytics:not(.is-monthly) .analytics-mini-step-growth{
    color:color-mix(in srgb,var(--danger) 78%,var(--text-muted));
    transform-origin:center;
  }
  #incomeAnalytics:not(.is-monthly) .analytics-card-growth:has(#analyticsGrowth.positive) .analytics-mini-step-growth{
    color:color-mix(in srgb,var(--success) 78%,var(--text-muted));
  }
  #incomeAnalytics:not(.is-monthly) .analytics-card-growth:has(#analyticsGrowth.negative) .analytics-mini-step-growth svg{
    transform:scaleY(-1);
  }
  #incomeAnalytics:not(.is-monthly) .analytics-card-growth:has(#analyticsGrowth.neutral) .analytics-mini-step-growth{
    color:var(--text-muted);
    opacity:.48;
  }

  /* Reserve a small area so values never collide with the sparkline. */
  #incomeAnalytics:not(.is-monthly) .analytics-card-average .analytics-card-body,
  #incomeAnalytics:not(.is-monthly) .analytics-card-growth .analytics-card-body{
    width:calc(100% - 86px) !important;
    max-width:calc(100% - 86px) !important;
  }
}

/* Annual growth card: use the same mini bars as best/worst. */
@media (hover:hover) and (pointer:fine), (pointer:coarse) and (min-width:901px) and (max-width:1200px){
  #incomeAnalytics:not(.is-monthly) .analytics-mini-step-growth{
    display:none !important;
  }

  #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card-growth::before{
    content:"" !important;
    display:block !important;
    position:absolute !important;
    z-index:2 !important;
    right:16px !important;
    bottom:14px !important;
    width:62px !important;
    height:30px !important;
    opacity:.32 !important;
    filter:saturate(.72) !important;
    color:var(--danger) !important;
    transform:none !important;
    background:
      linear-gradient(currentColor,currentColor) 0 100%/7px 78% no-repeat,
      linear-gradient(currentColor,currentColor) 13px 100%/7px 62% no-repeat,
      linear-gradient(currentColor,currentColor) 26px 100%/7px 48% no-repeat,
      linear-gradient(currentColor,currentColor) 39px 100%/7px 30% no-repeat,
      linear-gradient(currentColor,currentColor) 52px 100%/7px 18% no-repeat !important;
    pointer-events:none !important;
  }

  #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card-growth:has(#analyticsGrowth.positive)::before{
    color:var(--success) !important;
    background:
      linear-gradient(currentColor,currentColor) 0 100%/7px 18% no-repeat,
      linear-gradient(currentColor,currentColor) 13px 100%/7px 30% no-repeat,
      linear-gradient(currentColor,currentColor) 26px 100%/7px 48% no-repeat,
      linear-gradient(currentColor,currentColor) 39px 100%/7px 62% no-repeat,
      linear-gradient(currentColor,currentColor) 52px 100%/7px 78% no-repeat !important;
  }

  #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card-growth:has(#analyticsGrowth.neutral)::before{
    color:var(--text-muted) !important;
    opacity:.18 !important;
    background:
      linear-gradient(currentColor,currentColor) 0 100%/7px 45% no-repeat,
      linear-gradient(currentColor,currentColor) 13px 100%/7px 45% no-repeat,
      linear-gradient(currentColor,currentColor) 26px 100%/7px 45% no-repeat,
      linear-gradient(currentColor,currentColor) 39px 100%/7px 45% no-repeat,
      linear-gradient(currentColor,currentColor) 52px 100%/7px 45% no-repeat !important;
  }
}

/* Annual average card: neutral mid-height mini bars. */
@media (hover:hover) and (pointer:fine), (pointer:coarse) and (min-width:901px) and (max-width:1200px){
  #incomeAnalytics:not(.is-monthly) .analytics-mini-step-average{
    display:none !important;
  }

  #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card-average::before{
    content:"" !important;
    display:block !important;
    position:absolute !important;
    z-index:2 !important;
    right:16px !important;
    bottom:14px !important;
    width:62px !important;
    height:30px !important;
    opacity:.30 !important;
    filter:saturate(.72) !important;
    color:color-mix(in srgb,#60a5fa 78%,var(--text-muted)) !important;
    transform:none !important;
    background:
      linear-gradient(currentColor,currentColor) 0 100%/7px 48% no-repeat,
      linear-gradient(currentColor,currentColor) 13px 100%/7px 56% no-repeat,
      linear-gradient(currentColor,currentColor) 26px 100%/7px 51% no-repeat,
      linear-gradient(currentColor,currentColor) 39px 100%/7px 46% no-repeat,
      linear-gradient(currentColor,currentColor) 52px 100%/7px 53% no-repeat !important;
    pointer-events:none !important;
  }
}

/* Annual total — desktop bar-chart redesign. Mobile keeps the existing ring layout. */
.annual-total-desktop,
.annual-total-meta-icon{
  display:none;
}

@media (hover:hover) and (pointer:fine), (pointer:coarse) and (min-width:901px) and (max-width:1200px){
  #incomeAnalytics:not(.is-monthly) .annual-total-card{
    min-height:270px !important;
    padding:16px !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:space-between !important;
    gap:10px !important;
    border-color:color-mix(in srgb,var(--primary) 22%,var(--border)) !important;
    border-radius:20px !important;
    background:var(--panel) !important;
    box-shadow:none !important;
  }
  #incomeAnalytics:not(.is-monthly) .annual-total-card::after{
    display:none !important;
  }
  #incomeAnalytics:not(.is-monthly) .annual-total-ring{
    display:none !important;
  }
  #incomeAnalytics:not(.is-monthly) .annual-total-desktop{
    position:relative;
    z-index:1;
    min-width:0;
    display:flex;
    flex:1 1 auto;
    flex-direction:column;
  }
  #incomeAnalytics:not(.is-monthly) .annual-total-desktop-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
  }
  #incomeAnalytics:not(.is-monthly) .annual-total-copy{
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
  }
  #incomeAnalytics:not(.is-monthly) .annual-total-copy > span{
    color:color-mix(in srgb,var(--text) 78%,var(--text-muted));
    font-size:12px;
    line-height:1.2;
  }
  #incomeAnalytics:not(.is-monthly) .annual-total-copy > strong{
    max-width:100%;
    margin-top:4px;
    color:var(--text);
    font-size:clamp(24px,2.2vw,31px);
    font-weight:750;
    line-height:1.05;
    letter-spacing:-.035em;
    white-space:nowrap;
  }
  #incomeAnalytics:not(.is-monthly) .annual-total-copy > small{
    margin-top:6px;
    color:color-mix(in srgb,var(--text) 76%,var(--text-muted));
    font-size:12px;
    line-height:1.2;
  }
  #incomeAnalytics:not(.is-monthly) .annual-total-growth{
    flex:0 0 auto;
    min-width:78px;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
  }
  #incomeAnalytics:not(.is-monthly) .annual-total-growth-row{
    display:flex;
    align-items:center;
    gap:8px;
  }
  #incomeAnalytics:not(.is-monthly) .annual-total-growth-icon{
    width:21px;
    height:21px;
    fill:none;
    stroke:#79b7ee;
    stroke-width:2.1;
    stroke-linecap:round;
  }
  #incomeAnalytics:not(.is-monthly) #annualHeroGrowth{
    min-width:62px;
    padding:6px 9px;
    border:1px solid color-mix(in srgb,var(--success) 32%,transparent);
    border-radius:9px;
    background:color-mix(in srgb,var(--success) 19%,transparent);
    color:color-mix(in srgb,var(--success) 82%,white);
    font-size:13px;
    font-weight:750;
    line-height:1;
    text-align:center;
    white-space:nowrap;
  }
  #incomeAnalytics:not(.is-monthly) #annualHeroGrowth.negative{
    border-color:color-mix(in srgb,var(--danger) 34%,transparent);
    background:color-mix(in srgb,var(--danger) 18%,transparent);
    color:color-mix(in srgb,var(--danger) 80%,white);
  }
  #incomeAnalytics:not(.is-monthly) #annualHeroGrowth.neutral{
    border-color:color-mix(in srgb,var(--border) 88%,transparent);
    background:color-mix(in srgb,var(--panel-muted) 82%,transparent);
    color:var(--text-muted);
  }
  #incomeAnalytics:not(.is-monthly) #annualHeroGrowthCaption{
    margin-top:6px;
    color:var(--text-muted);
    font-size:9px;
    line-height:1.15;
    text-align:right;
    white-space:nowrap;
  }

  #incomeAnalytics:not(.is-monthly) .annual-total-bars{
    height:76px;
    margin-top:12px;
    padding:0 2px;
    display:grid;
    grid-template-columns:repeat(12,minmax(0,1fr));
    align-items:end;
    gap:5px;
    border-bottom:1px solid color-mix(in srgb,var(--border) 82%,transparent);
  }
  #incomeAnalytics:not(.is-monthly) .annual-total-bar{
    width:100%;
    height:var(--bar-height,4%);
    min-height:4px;
    border-radius:4px 4px 1px 1px;
    background:linear-gradient(
      180deg,
      hsl(var(--bar-hue,205) 78% 62%),
      hsl(var(--bar-hue,205) 72% 43%)
    );
    box-shadow:0 0 12px hsl(var(--bar-hue,205) 74% 55% / .10);
    opacity:.88;
  }
  #incomeAnalytics:not(.is-monthly) .annual-total-bar.is-zero{
    opacity:.20;
  }
  #incomeAnalytics:not(.is-monthly) .annual-total-bar.selected{
    background:linear-gradient(
      180deg,
      color-mix(in srgb,var(--primary) 88%,black 12%),
      color-mix(in srgb,var(--primary) 76%,black 24%)
    );
    box-shadow:0 0 12px color-mix(in srgb,var(--primary) 28%,transparent);
    opacity:1;
  }
  #incomeAnalytics:not(.is-monthly) .annual-total-months{
    margin-top:5px;
    padding:0 1px;
    display:grid;
    grid-template-columns:repeat(12,minmax(0,1fr));
    gap:5px;
    color:var(--text-muted);
    font-size:7px;
    line-height:1;
    text-align:center;
  }

  #incomeAnalytics:not(.is-monthly) .annual-total-meta{
    position:relative;
    z-index:1;
    width:100%;
    margin-top:3px;
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:8px !important;
  }
  #incomeAnalytics:not(.is-monthly) .annual-total-meta > span{
    min-width:0;
    min-height:50px;
    padding:7px 9px !important;
    display:grid !important;
    grid-template-columns:28px minmax(0,1fr);
    grid-template-rows:auto auto;
    column-gap:8px;
    align-items:center;
    justify-items:start;
    border:1px solid color-mix(in srgb,var(--border) 90%,transparent) !important;
    border-radius:11px !important;
    background:color-mix(in srgb,var(--panel-muted) 78%,transparent) !important;
    text-align:left !important;
  }
  #incomeAnalytics:not(.is-monthly) .annual-total-meta-icon{
    grid-column:1;
    grid-row:1 / 3;
    width:23px;
    height:23px;
    display:block;
    fill:none;
    stroke:#79b7ee;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
  }
  #incomeAnalytics:not(.is-monthly) .annual-total-meta b{
    grid-column:2;
    grid-row:1;
    align-self:end;
    font-size:16px !important;
    line-height:1 !important;
  }
  #incomeAnalytics:not(.is-monthly) .annual-total-meta small{
    grid-column:2;
    grid-row:2;
    align-self:start;
    margin-top:3px !important;
    font-size:8px !important;
    line-height:1.1 !important;
    white-space:nowrap;
  }
}

/* Annual total — fit exactly inside the two-row desktop analytics grid. */
@media (hover:hover) and (pointer:fine), (pointer:coarse) and (min-width:901px) and (max-width:1200px){
  #incomeAnalytics:not(.is-monthly) .annual-total-card{
    min-height:238px !important;
    height:238px !important;
    max-height:238px !important;
    padding:12px !important;
    gap:7px !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
  }
  #incomeAnalytics:not(.is-monthly) .annual-total-copy > strong{
    font-size:clamp(23px,2vw,29px) !important;
  }
  #incomeAnalytics:not(.is-monthly) .annual-total-bars{
    height:58px !important;
    margin-top:8px !important;
    gap:4px !important;
  }
  #incomeAnalytics:not(.is-monthly) .annual-total-months{
    margin-top:4px !important;
    gap:4px !important;
    font-size:6.5px !important;
  }
  #incomeAnalytics:not(.is-monthly) .annual-total-meta{
    margin-top:0 !important;
    gap:7px !important;
  }
  #incomeAnalytics:not(.is-monthly) .annual-total-meta > span{
    min-height:43px !important;
    padding:5px 8px !important;
    grid-template-columns:25px minmax(0,1fr) !important;
    column-gap:7px !important;
  }
  #incomeAnalytics:not(.is-monthly) .annual-total-meta-icon{
    width:20px !important;
    height:20px !important;
  }
  #incomeAnalytics:not(.is-monthly) .annual-total-meta b{
    font-size:15px !important;
  }
  #incomeAnalytics:not(.is-monthly) .annual-total-meta small{
    margin-top:2px !important;
    font-size:7.5px !important;
  }
}

/* Annual total — let the monthly chart use all free vertical space. */
@media (hover:hover) and (pointer:fine), (pointer:coarse) and (min-width:901px) and (max-width:1200px){
  #incomeAnalytics:not(.is-monthly) .annual-total-desktop{
    flex:1 1 auto !important;
    min-height:0 !important;
  }
  #incomeAnalytics:not(.is-monthly) .annual-total-bars{
    flex:1 1 auto !important;
    height:auto !important;
    min-height:76px !important;
    margin-top:6px !important;
  }
  #incomeAnalytics:not(.is-monthly) .annual-total-months{
    flex:0 0 auto !important;
  }
}

/* Annual total — larger amount, positioned closer to the visual center. */
@media (hover:hover) and (pointer:fine), (pointer:coarse) and (min-width:901px) and (max-width:1200px){
  #incomeAnalytics:not(.is-monthly) .annual-total-desktop-head{
    position:relative !important;
    min-height:42px !important;
  }
  #incomeAnalytics:not(.is-monthly) .annual-total-copy{
    position:absolute !important;
    left:calc(50% - 10px) !important;
    top:0 !important;
    transform:translateX(-50%) !important;
    align-items:center !important;
    text-align:center !important;
    pointer-events:none !important;
  }
  #incomeAnalytics:not(.is-monthly) .annual-total-copy > strong{
    margin-top:0 !important;
    font-size:clamp(31px,2.7vw,38px) !important;
    font-weight:780 !important;
    line-height:1 !important;
    letter-spacing:-.04em !important;
  }
  #incomeAnalytics:not(.is-monthly) .annual-total-growth{
    position:absolute !important;
    top:0 !important;
    right:0 !important;
    z-index:2 !important;
  }
}

/* Annual monthly bars follow the accent color from Appearance settings. */
@media (hover:hover) and (pointer:fine), (pointer:coarse) and (min-width:901px) and (max-width:1200px){
  #incomeAnalytics:not(.is-monthly) .annual-total-bar{
    background:linear-gradient(
      180deg,
      color-mix(in srgb,var(--primary) 72%,white),
      color-mix(in srgb,var(--primary) 88%,black)
    ) !important;
    box-shadow:0 0 12px color-mix(in srgb,var(--primary) 18%,transparent) !important;
  }
}

/* Annual best/worst month share badges. */
#incomeAnalytics .annual-month-share{
  display:none;
}
@media (hover:hover) and (pointer:fine), (pointer:coarse) and (min-width:901px) and (max-width:1200px){
  #incomeAnalytics:not(.is-monthly) .analytics-card-best,
  #incomeAnalytics:not(.is-monthly) .analytics-card-worst{
    position:relative !important;
  }

  #incomeAnalytics:not(.is-monthly) .annual-month-share{
    position:absolute !important;
    z-index:4 !important;
    top:14px !important;
    right:16px !important;
    min-width:44px !important;
    height:28px !important;
    padding:0 9px !important;
    display:flex;
    align-items:center;
    justify-content:center;
    box-sizing:border-box;
    border-radius:9px;
    font-size:12px !important;
    font-weight:650 !important;
    line-height:1 !important;
    white-space:nowrap;
  }

  #incomeAnalytics:not(.is-monthly) .annual-month-share[hidden]{
    display:none !important;
  }

  #incomeAnalytics:not(.is-monthly) .annual-month-share-best{
    border:1px solid color-mix(in srgb,var(--success) 30%,transparent);
    background:color-mix(in srgb,var(--success) 9%,transparent);
    color:var(--success) !important;
  }

  #incomeAnalytics:not(.is-monthly) .annual-month-share-worst{
    border:1px solid color-mix(in srgb,var(--danger) 30%,transparent);
    background:color-mix(in srgb,var(--danger) 9%,transparent);
    color:var(--danger) !important;
  }
}

/* Annual growth info tooltip: hover-only desktop control after the title. */
#incomeAnalytics .annual-growth-info,
#incomeAnalytics .annual-growth-tooltip{
  display:none !important;
}
@media (hover:hover) and (pointer:fine), (pointer:coarse) and (min-width:901px) and (max-width:1200px){
  #incomeAnalytics:not(.is-monthly) .analytics-card-growth .analytics-card-body > .annual-growth-label{
    position:relative !important;
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:5px !important;
    width:max-content !important;
    min-width:max-content !important;
    max-width:none !important;
    white-space:nowrap !important;
  }

  #incomeAnalytics:not(.is-monthly) .annual-growth-label-text{
    display:inline !important;
    flex:0 0 auto !important;
    white-space:nowrap !important;
  }

  #incomeAnalytics:not(.is-monthly) .annual-growth-info{
    display:grid !important;
    place-items:center !important;
    width:16px !important;
    height:16px !important;
    flex:0 0 16px !important;
    margin:0 !important;
    padding:0 !important;
    border:1px solid color-mix(in srgb,var(--text-muted) 50%,transparent) !important;
    border-radius:50% !important;
    background:transparent !important;
    color:var(--text-muted) !important;
    font:700 10px/1 Arial,sans-serif !important;
    cursor:help !important;
    transform:translateY(-1px) !important;
  }

  #incomeAnalytics:not(.is-monthly) .annual-growth-info:hover{
    color:var(--text) !important;
    border-color:color-mix(in srgb,var(--primary) 70%,var(--border)) !important;
  }

  #incomeAnalytics:not(.is-monthly) .annual-growth-tooltip{
    display:none !important;
  }

  #incomeAnalytics:not(.is-monthly) .annual-growth-info:hover + .annual-growth-tooltip{
    display:block !important;
  }

  #incomeAnalytics:not(.is-monthly) #analyticsGrowthCaption{
    display:none !important;
  }
}

/* Annual best/worst: month name on the same line as the label. */
@media (hover:hover) and (pointer:fine), (pointer:coarse) and (min-width:901px) and (max-width:1200px){
  #incomeAnalytics:not(.is-monthly) .analytics-card-best .analytics-card-body,
  #incomeAnalytics:not(.is-monthly) .analytics-card-worst .analytics-card-body{
    display:grid !important;
    grid-template-columns:max-content max-content !important;
    grid-template-areas:
      "label month"
      "amount amount" !important;
    column-gap:5px !important;
    row-gap:6px !important;
    align-items:center !important;
    justify-content:start !important;
  }

  #incomeAnalytics:not(.is-monthly) .analytics-card-best .analytics-card-body > span,
  #incomeAnalytics:not(.is-monthly) .analytics-card-worst .analytics-card-body > span{
    grid-area:label !important;
    display:block !important;
    margin:0 !important;
    font-size:12px !important;
    line-height:1.25 !important;
    white-space:nowrap !important;
  }

  #incomeAnalytics:not(.is-monthly) .analytics-card-best .analytics-card-body > strong,
  #incomeAnalytics:not(.is-monthly) .analytics-card-worst .analytics-card-body > strong{
    grid-area:month !important;
    display:block !important;
    margin:0 !important;
    font-size:12px !important;
    font-weight:700 !important;
    line-height:1.25 !important;
    text-transform:lowercase !important;
    white-space:nowrap !important;
  }

  #incomeAnalytics:not(.is-monthly) .analytics-card-best .analytics-card-body > strong{
    color:color-mix(in srgb,var(--success) 74%,var(--text)) !important;
  }

  #incomeAnalytics:not(.is-monthly) .analytics-card-worst .analytics-card-body > strong{
    color:color-mix(in srgb,var(--danger) 74%,var(--text)) !important;
  }

  #incomeAnalytics:not(.is-monthly) .analytics-card-best .analytics-card-body > b,
  #incomeAnalytics:not(.is-monthly) .analytics-card-worst .analytics-card-body > b{
    grid-area:amount !important;
    display:block !important;
    margin:0 !important;
  }

  #incomeAnalytics:not(.is-monthly) .analytics-card-best .analytics-card-hint,
  #incomeAnalytics:not(.is-monthly) .analytics-card-worst .analytics-card-hint{
    display:none !important;
  }
}

/* Force annual best/worst title + month onto one physical line. */
@media (hover:hover) and (pointer:fine), (pointer:coarse) and (min-width:901px) and (max-width:1200px){
  #incomeAnalytics:not(.is-monthly) .analytics-card-best .analytics-card-body,
  #incomeAnalytics:not(.is-monthly) .analytics-card-worst .analytics-card-body{
    display:block !important;
    white-space:nowrap !important;
  }

  #incomeAnalytics:not(.is-monthly) .analytics-card-best .analytics-card-body > span,
  #incomeAnalytics:not(.is-monthly) .analytics-card-worst .analytics-card-body > span{
    display:inline !important;
    margin:0 !important;
    vertical-align:baseline !important;
  }

  #incomeAnalytics:not(.is-monthly) .analytics-card-best .analytics-card-body > strong,
  #incomeAnalytics:not(.is-monthly) .analytics-card-worst .analytics-card-body > strong{
    display:inline !important;
    margin:0 0 0 5px !important;
    vertical-align:baseline !important;
  }

  #incomeAnalytics:not(.is-monthly) .analytics-card-best .analytics-card-body > b,
  #incomeAnalytics:not(.is-monthly) .analytics-card-worst .analytics-card-body > b{
    display:block !important;
    margin:6px 0 0 !important;
  }
}

/* Tighten annual title/month spacing and preserve month capitalization. */
@media (hover:hover) and (pointer:fine), (pointer:coarse) and (min-width:901px) and (max-width:1200px){
  #incomeAnalytics:not(.is-monthly) .analytics-card-best .analytics-card-body > strong,
  #incomeAnalytics:not(.is-monthly) .analytics-card-worst .analytics-card-body > strong{
    margin-left:2px !important;
    text-transform:none !important;
  }
}

/* Home recent header: temporary desktop entry point to full history. */
#income .income-recent-history{
  display:none;
}
@media (hover:hover) and (pointer:fine), (pointer:coarse) and (min-width:901px) and (max-width:1200px){
  #income .income-recent-history{
    height:30px;
    margin-left:8px;
    padding:0 11px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid var(--border);
    border-radius:9px;
    background:var(--panel-muted);
    color:var(--text-muted);
    font:inherit;
    font-size:12px;
    font-weight:600;
    line-height:1;
    white-space:nowrap;
    cursor:pointer;
    transition:color .15s ease,background .15s ease,border-color .15s ease;
  }
  #income .income-recent-history:hover{
    color:var(--text);
    background:var(--active);
    border-color:color-mix(in srgb,var(--primary) 30%,var(--border));
  }
}

/* Full History inside the recent-income shell. */
#income .income-recent-history-panel[hidden]{
  display:none !important;
}
#income .income-recent-history-panel > #history{
  display:block;
}
@media (hover:hover) and (pointer:fine), (pointer:coarse) and (min-width:901px) and (max-width:1200px){
  #income .income-recent.is-history-open .income-recent-grid,
  #income .income-recent.is-history-open .income-recent-pager{
    display:none !important;
  }

  #income .income-recent.is-history-open .income-recent-history{
    margin-left:auto;
  }

  #income .income-recent-history-panel{
    width:100%;
    min-width:0;
  }

  #income .income-recent.is-history-open .income-recent-history-panel{
    display:block;
  }

  #income .income-recent.is-collapsed .income-recent-history-panel{
    display:none !important;
  }

  #income .income-recent-history-panel #historySearchWrap{
    margin:0 0 12px;
  }

  #income .income-recent-history-panel .income-table-section{
    margin:0;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
  }

  #income .income-recent-history-panel .income-list{
    max-height:calc(100vh - 260px);
    overflow:auto;
    border:1px solid var(--border);
    border-radius:14px;
    background:var(--panel);
  }
}

/* Inline History scrollbar: match the dark site chrome. */
@media (hover:hover) and (pointer:fine), (pointer:coarse) and (min-width:901px) and (max-width:1200px){
  #income .income-recent-history-panel .income-list{
    scrollbar-width:thin;
    scrollbar-color:color-mix(in srgb,var(--text-muted) 48%,transparent) transparent;
  }

  #income .income-recent-history-panel .income-list::-webkit-scrollbar{
    width:8px;
    height:8px;
  }

  #income .income-recent-history-panel .income-list::-webkit-scrollbar-track{
    background:transparent;
  }

  #income .income-recent-history-panel .income-list::-webkit-scrollbar-thumb{
    min-height:42px;
    border:2px solid transparent;
    border-radius:999px;
    background:color-mix(in srgb,var(--text-muted) 48%,transparent);
    background-clip:padding-box;
  }

  #income .income-recent-history-panel .income-list::-webkit-scrollbar-thumb:hover{
    background:color-mix(in srgb,var(--text-muted) 70%,transparent);
    background-clip:padding-box;
  }

  #income .income-recent-history-panel .income-list::-webkit-scrollbar-corner{
    background:transparent;
  }

  #income .income-recent-history-panel .income-list::-webkit-scrollbar-button{
    display:none;
    width:0;
    height:0;
  }
}

/* Desktop recent-income footer: pagination + full history stay in the cloud's lower-right corner. */
@media (hover:hover) and (pointer:fine), (pointer:coarse) and (min-width:901px) and (max-width:1200px){
  #income .income-recent{
    position:relative;
    padding-bottom:40px;
  }
  #income .income-recent-controls{
    min-height:48px;
  }
  #income .income-recent-controls > .add-income-btn{
    position:static !important;
    z-index:3;
    flex:0 0 48px;
    margin-left:auto !important;
    transform:none !important;
    box-shadow:none !important;
  }
  #income .income-recent-controls > .add-income-btn:hover{
    transform:none !important;
  }
  #income .income-recent.is-collapsed{
    padding-top:14px;
  }
  #income .income-recent-bottom-actions{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
  }
  #income .income-recent-bottom-actions .income-recent-pager{
    margin-left:auto;
  }
  #income .income-recent-bottom-actions .income-recent-history,
  #income .income-recent.is-history-open .income-recent-bottom-actions .income-recent-history{
    margin-left:0;
  }
  #income .income-recent.is-collapsed{
    padding-bottom:0;
  }
  #income .income-recent.is-collapsed .income-recent-bottom-actions{
    display:none;
  }
}

/* Hide full-history shortcut while recent-income shell is collapsed. */
@media (hover:hover) and (pointer:fine), (pointer:coarse) and (min-width:901px) and (max-width:1200px){
  #income .income-recent.is-collapsed .income-recent-history{
    display:none !important;
  }
}

/* Desktop inline settings inside the Month / Year analytics shell. */
#incomeAnalytics .analytics-settings-toggle,
#incomeAnalytics .analytics-settings-host{
  display:none;
}

@media (hover:hover) and (pointer:fine), (pointer:coarse) and (min-width:901px) and (max-width:1200px){
  /* History + Settings now live on the main dashboard, so desktop no longer needs the bottom bar. */
  .sidebar{
    display:none !important;
  }

  #incomeAnalytics .analytics-settings-toggle{
    width:38px;
    min-width:38px;
    height:38px;
    margin-left:auto;
    padding:0;
    display:grid;
    place-items:center;
    border:1px solid var(--border);
    border-radius:10px !important;
    background:var(--panel-muted);
    color:var(--text-muted);
    box-shadow:none;
    cursor:pointer;
  }

  #incomeAnalytics .analytics-settings-toggle:hover,
  #incomeAnalytics .analytics-settings-toggle.is-active{
    color:var(--text);
    background:var(--active);
    border-color:color-mix(in srgb,var(--primary) 30%,var(--border));
    transform:none !important;
  }

  #incomeAnalytics .analytics-settings-toggle svg{
    width:19px;
    height:19px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
  }

  #incomeAnalytics .analytics-settings-host[hidden]{
    display:none !important;
  }

  #incomeAnalytics.is-settings-open > .analytics-head,
  #incomeAnalytics.is-settings-open > .analytics-cards,
  #incomeAnalytics.is-settings-open > .analytics-category-panels,
  #incomeAnalytics.is-settings-open > .analytics-categories-toggle,
  #incomeAnalytics.is-settings-open.is-monthly > .monthly-analytics{
    visibility:hidden !important;
    pointer-events:none !important;
  }

  #incomeAnalytics.is-settings-open .analytics-settings-host{
    display:block;
    width:100%;
    min-width:0;
    margin-top:6px;
  }

  #incomeAnalytics .analytics-settings-host #settings.analytics-inline-settings{
    display:grid !important;
    grid-template-columns:repeat(auto-fit,minmax(310px,1fr));
    gap:14px;
    width:100%;
    min-height:0 !important;
    margin:0;
    padding:0;
    place-items:stretch;
  }

  #incomeAnalytics .analytics-settings-host #settings.analytics-inline-settings > .settings-card{
    width:100% !important;
    min-width:0;
    max-width:none !important;
    margin:0 !important;
    padding:20px !important;
    border-radius:16px !important;
    box-shadow:none !important;
    background:color-mix(in srgb,var(--panel) 97%,var(--primary) 3%) !important;
  }

  #incomeAnalytics.is-settings-open .analytics-mode-row{
    margin-bottom:14px !important;
  }
}

/* Horizontal settings tabs: compact selected layout. */
@media (hover:hover) and (pointer:fine), (pointer:coarse) and (min-width:901px) and (max-width:1200px){
  #incomeAnalytics .analytics-settings-host #settings.analytics-inline-settings{
    display:block !important;
    width:100%;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
  }

  #incomeAnalytics .analytics-settings-host .qp-settings-heading{
    margin:0 0 12px;
  }

  #incomeAnalytics .analytics-settings-host .qp-settings-title{
    color:var(--text);
    font-size:21px;
    font-weight:700;
    line-height:1.15;
    letter-spacing:-.02em;
  }

  #incomeAnalytics .analytics-settings-host .qp-settings-subtitle{
    margin-top:4px;
    color:var(--text-muted);
    font-size:12px;
    line-height:1.35;
  }

  #incomeAnalytics .analytics-settings-host .qp-settings-tabs{
    width:100%;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:0;
    margin:0 0 12px;
    padding:3px;
    border:1px solid var(--border);
    border-radius:11px;
    background:color-mix(in srgb,var(--panel-muted) 92%,transparent);
  }

  #incomeAnalytics .analytics-settings-host .qp-settings-tab{
    min-width:0;
    height:36px;
    padding:0 12px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    border:1px solid transparent;
    border-radius:8px !important;
    background:transparent;
    color:var(--text-muted);
    font-size:12px;
    font-weight:600;
    line-height:1;
    cursor:pointer;
    box-shadow:none;
  }

  #incomeAnalytics .analytics-settings-host .qp-settings-tab:hover{
    color:var(--text);
    background:color-mix(in srgb,var(--panel) 82%,var(--primary) 18%);
    transform:none !important;
  }

  #incomeAnalytics .analytics-settings-host .qp-settings-tab.active{
    color:var(--text);
    border-color:color-mix(in srgb,var(--primary) 72%,var(--border));
    background:color-mix(in srgb,var(--primary) 17%,var(--panel));
    box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--primary) 14%,transparent);
  }

  #incomeAnalytics .analytics-settings-host .qp-settings-tab svg{
    width:16px;
    height:16px;
    flex:0 0 16px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
  }

  /* All old cards are hidden first; the chosen tab reveals only its content. */
  #incomeAnalytics .analytics-settings-host #settings.analytics-inline-settings > .settings-card{
    display:none !important;
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    margin:0 !important;
    padding:20px !important;
    border:1px solid var(--border) !important;
    border-radius:14px !important;
    background:color-mix(in srgb,var(--panel) 97%,var(--primary) 3%) !important;
    box-shadow:none !important;
  }

  /* Appearance: interface color + background become one visual panel. */
  #incomeAnalytics .analytics-settings-host #settings[data-settings-tab="appearance"] > #qpAppearanceCard,
  #incomeAnalytics .analytics-settings-host #settings[data-settings-tab="appearance"] > #qpBackgroundSettings{
    display:block !important;
  }

  #incomeAnalytics .analytics-settings-host #settings[data-settings-tab="appearance"] > #qpAppearanceCard{
    border-bottom:0 !important;
    border-radius:14px 14px 0 0 !important;
    padding-bottom:14px !important;
  }

  #incomeAnalytics .analytics-settings-host #settings[data-settings-tab="appearance"] > #qpBackgroundSettings{
    margin-top:0 !important;
    padding-top:16px !important;
    border-top:1px solid color-mix(in srgb,var(--border) 82%,transparent) !important;
    border-radius:0 0 14px 14px !important;
  }

  #incomeAnalytics .analytics-settings-host #settings[data-settings-tab="appearance"] #qpAppearanceCard .qp-category-manager{
    display:none !important;
  }

  /* Category manager shares the original appearance card technically,
     but becomes the only visible content in its tab. */
  #incomeAnalytics .analytics-settings-host #settings[data-settings-tab="categories"] > #qpAppearanceCard{
    display:block !important;
  }

  #incomeAnalytics .analytics-settings-host #settings[data-settings-tab="categories"] #qpAppearanceCard > .settings-row,
  #incomeAnalytics .analytics-settings-host #settings[data-settings-tab="categories"] #qpAppearanceCard > .nav-label-mode-title,
  #incomeAnalytics .analytics-settings-host #settings[data-settings-tab="categories"] #qpAppearanceCard > .nav-label-mode-options{
    display:none !important;
  }

  #incomeAnalytics .analytics-settings-host #settings[data-settings-tab="categories"] #qpAppearanceCard .qp-category-manager{
    display:block !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
  }

  #incomeAnalytics .analytics-settings-host #settings[data-settings-tab="data"] > #qpDataCard{
    display:block !important;
  }

  #incomeAnalytics .analytics-settings-host #settings[data-settings-tab="account"] > #qpAccountCard{
    display:block !important;
  }

  /* Bottom-panel appearance options are not part of the desktop settings anymore. */
  #incomeAnalytics .analytics-settings-host .nav-label-mode-title,
  #incomeAnalytics .analytics-settings-host .nav-label-mode-options{
    display:none !important;
  }

  /* Compact content matching the reference. */
  #incomeAnalytics .analytics-settings-host #qpAppearanceCard .settings-row{
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
  }

  #incomeAnalytics .analytics-settings-host #qpAppearanceCard .settings-row > div:first-child{
    margin:0 0 10px !important;
  }

  #incomeAnalytics .analytics-settings-host #qpAppearanceCard .settings-title,
  #incomeAnalytics .analytics-settings-host #qpBackgroundSettings > .settings-title,
  #incomeAnalytics .analytics-settings-host #qpDataCard > .settings-title,
  #incomeAnalytics .analytics-settings-host #qpAccountCard > .settings-title,
  #incomeAnalytics .analytics-settings-host .qp-category-manager-title{
    margin:0 0 10px !important;
    color:var(--text) !important;
    font-size:15px !important;
    font-weight:650 !important;
    line-height:1.2 !important;
  }

  #incomeAnalytics .analytics-settings-host #qpBackgroundSettings .qp-background-options{
    margin-top:0 !important;
  }

  #incomeAnalytics .analytics-settings-host #qpDataCard > div[style]{
    margin-top:10px !important;
  }

  #incomeAnalytics .analytics-settings-host #qpAccountCard .qp-account-row{
    margin-top:10px !important;
  }
}

/* Desktop settings close control. The settings content stays in normal flow. */
@media (hover:hover) and (pointer:fine), (pointer:coarse) and (min-width:901px) and (max-width:1200px){
  #incomeAnalytics{
    position:relative !important;
    overflow:hidden !important;
  }

  #incomeAnalytics .analytics-settings-close-icon{
    display:none;
  }

  #incomeAnalytics .analytics-settings-toggle.is-active{
    position:absolute !important;
    z-index:42 !important;
    top:18px !important;
    right:18px !important;
    margin:0 !important;
    color:var(--text) !important;
    background:var(--panel-muted) !important;
    border-color:var(--border) !important;
  }

  #incomeAnalytics .analytics-settings-toggle.is-active .analytics-settings-gear-icon{
    display:none !important;
  }

  #incomeAnalytics .analytics-settings-toggle.is-active .analytics-settings-close-icon{
    display:block !important;
  }

  #incomeAnalytics .analytics-settings-toggle.is-active .analytics-settings-close-icon{
    width:18px !important;
    height:18px !important;
    stroke-width:2 !important;
  }

  #incomeAnalytics.is-settings-open .analytics-settings-host #settings.analytics-inline-settings{
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
  }

  #incomeAnalytics.is-settings-open .analytics-settings-host .qp-settings-heading{
    padding-right:8px !important;
  }

}

/* Settings cleanup: three tabs, merged account/data, fixed gear-close position. */
@media (hover:hover) and (pointer:fine), (pointer:coarse) and (min-width:901px) and (max-width:1200px){
  #incomeAnalytics .analytics-settings-host .qp-settings-heading{
    display:none !important;
  }

  #incomeAnalytics .analytics-settings-host .qp-settings-tabs{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    margin-top:0 !important;
  }

  #incomeAnalytics .analytics-settings-toggle,
  #incomeAnalytics .analytics-settings-toggle.is-active{
    position:relative !important;
    z-index:42 !important;
    top:auto !important;
    right:auto !important;
    width:38px !important;
    min-width:38px !important;
    max-width:38px !important;
    height:38px !important;
    min-height:38px !important;
    max-height:38px !important;
    margin-left:auto !important;
    padding:0 !important;
  }

  #incomeAnalytics .analytics-settings-toggle .analytics-settings-gear-icon,
  #incomeAnalytics .analytics-settings-toggle .analytics-settings-close-icon{
    width:19px !important;
    height:19px !important;
  }

  #incomeAnalytics .analytics-settings-toggle.is-active .analytics-settings-close-icon{
    width:19px !important;
    height:19px !important;
  }

  #incomeAnalytics .analytics-settings-host #settings[data-settings-tab="data"] > #qpDataCard,
  #incomeAnalytics .analytics-settings-host #settings[data-settings-tab="data"] > #qpAccountCard{
    display:block !important;
  }

  #incomeAnalytics .analytics-settings-host #settings[data-settings-tab="data"] > #qpAccountCard{
    margin-top:12px !important;
  }

  #incomeAnalytics .analytics-settings-host #settings[data-settings-tab="appearance"] .nav-label-mode-title,
  #incomeAnalytics .analytics-settings-host #settings[data-settings-tab="appearance"] .nav-label-mode-options{
    display:none !important;
  }
}

/* Settings polish: tab clearance, appearance spacing, four-column categories. */
@media (hover:hover) and (pointer:fine), (pointer:coarse) and (min-width:901px) and (max-width:1200px){
  /* Keep the tab strip aligned with, but clear of, the close button. */
  #incomeAnalytics .analytics-settings-host .qp-settings-tabs{
    width:calc(100% - 12px) !important;
    margin:6px 12px 18px 0 !important;
  }

  /* Appearance: one continuous panel, no center divider, a little air below colors. */
  #incomeAnalytics .analytics-settings-host #settings[data-settings-tab="appearance"] > #qpAppearanceCard{
    padding-bottom:22px !important;
  }

  #incomeAnalytics .analytics-settings-host #settings[data-settings-tab="appearance"] > #qpBackgroundSettings{
    padding-top:10px !important;
    border-top:0 !important;
  }

  /* Data: account comes first, data actions second. */
  #incomeAnalytics .analytics-settings-host #settings[data-settings-tab="data"] > #qpAccountCard{
    margin-top:0 !important;
  }

  #incomeAnalytics .analytics-settings-host #settings[data-settings-tab="data"] > #qpDataCard{
    margin-top:12px !important;
  }

  #incomeAnalytics .analytics-settings-host #qpAccountCard .qp-account-row{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:12px !important;
    flex-wrap:wrap !important;
    margin-top:10px !important;
  }

  #incomeAnalytics .analytics-settings-host #qpAccountCard .qp-account-email{
    min-width:0 !important;
    max-width:100% !important;
    overflow:hidden !important;
    color:var(--text-muted) !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }

  #incomeAnalytics .analytics-settings-host #qpAccountCard #qpAuthLogoutBtn{
    flex:0 0 auto !important;
    min-width:82px !important;
  }

  #incomeAnalytics .analytics-settings-host #qpDataCard > div[style]{
    display:grid !important;
    grid-template-columns:repeat(auto-fit,minmax(150px,1fr)) !important;
    gap:10px !important;
    width:100% !important;
    margin-top:10px !important;
  }

  #incomeAnalytics .analytics-settings-host #qpDataCard > div[style] > button{
    width:100% !important;
    min-width:0 !important;
  }

  /* Categories keep a useful card width as the desktop window narrows. */
  #incomeAnalytics .analytics-settings-host #settings[data-settings-tab="categories"] .qp-category-list{
    display:grid !important;
    grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr)) !important;
    grid-auto-rows:62px !important;
    gap:10px !important;
    height:206px !important;
    min-height:206px !important;
    max-height:206px !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    align-content:start !important;
  }

  #incomeAnalytics .analytics-settings-host #settings[data-settings-tab="categories"] .qp-category-item{
    min-width:0 !important;
    height:62px !important;
    min-height:62px !important;
    margin:0 !important;
  }

  #incomeAnalytics .analytics-settings-host #settings[data-settings-tab="categories"] .qp-category-name{
    min-width:0 !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }
}

/* Settings geometry: tabs match close button and content width. */
@media (hover:hover) and (pointer:fine), (pointer:coarse) and (min-width:901px) and (max-width:1200px){
  #incomeAnalytics .analytics-settings-host .qp-settings-tabs{
    box-sizing:border-box !important;
    width:calc(100% - 50px) !important;
    height:38px !important;
    min-height:38px !important;
    max-height:38px !important;
    padding:2px !important;
    margin:0 50px 18px 0 !important;
  }

  #incomeAnalytics .analytics-settings-host .qp-settings-tab{
    height:32px !important;
    min-height:32px !important;
    max-height:32px !important;
  }

  #incomeAnalytics .analytics-settings-host #settings.analytics-inline-settings > .settings-card{
    box-sizing:border-box !important;
    width:100% !important;
    max-width:100% !important;
    margin-right:0 !important;
  }
}

/* Settings categories: hover clearance and scrollbar gap. */
@media (hover:hover) and (pointer:fine), (pointer:coarse) and (min-width:901px) and (max-width:1200px){
  #incomeAnalytics .analytics-settings-host #settings[data-settings-tab="categories"] .qp-category-list{
    box-sizing:border-box !important;
    padding:2px 12px 2px 2px !important;
    height:210px !important;
    min-height:210px !important;
    max-height:210px !important;
    scrollbar-gutter:stable !important;
    scrollbar-width:thin;
    scrollbar-color:color-mix(in srgb,var(--text-muted) 48%,transparent) transparent;
  }

  #incomeAnalytics .analytics-settings-host #settings[data-settings-tab="categories"] .qp-category-list::-webkit-scrollbar{
    width:8px;
  }

  #incomeAnalytics .analytics-settings-host #settings[data-settings-tab="categories"] .qp-category-list::-webkit-scrollbar-track{
    background:transparent;
  }

  #incomeAnalytics .analytics-settings-host #settings[data-settings-tab="categories"] .qp-category-list::-webkit-scrollbar-button{
    display:none;
    width:0;
    height:0;
  }

  #incomeAnalytics .analytics-settings-host #settings[data-settings-tab="categories"] .qp-category-list::-webkit-scrollbar-thumb{
    min-height:42px;
    border:2px solid transparent;
    border-radius:999px;
    background:color-mix(in srgb,var(--text-muted) 48%,transparent);
    background-clip:padding-box;
  }

  #incomeAnalytics .analytics-settings-host #settings[data-settings-tab="categories"] .qp-category-list::-webkit-scrollbar-thumb:hover{
    background:color-mix(in srgb,var(--text-muted) 70%,transparent);
    background-clip:padding-box;
  }

  #incomeAnalytics .analytics-settings-host #settings[data-settings-tab="categories"] .qp-category-item{
    box-sizing:border-box !important;
  }

  #incomeAnalytics .analytics-settings-host #settings[data-settings-tab="categories"] .qp-category-item:hover{
    outline-offset:-1px !important;
  }
}

/* Desktop settings: category add button without glow. */
@media (hover:hover) and (pointer:fine), (pointer:coarse) and (min-width:901px) and (max-width:1200px){
  #settings .qp-category-add button,
  #settings .qp-category-add button:hover,
  #settings .qp-category-add button:active{
    box-shadow:none !important;
  }
}

/* Desktop PDF/print control lives in the lower-right corner of Full History. */
#income .income-history-report-actions{
  display:none;
}
@media (hover:hover) and (pointer:fine), (pointer:coarse) and (min-width:901px) and (max-width:1200px){
  #settings #printReportPeriod,
  #settings #printIncomeReportBtn{
    display:none !important;
  }

  #income .income-recent-history-panel #historySearchWrap > .income-history-report-actions{
    position:absolute;
    right:0;
    bottom:0;
    margin-left:0;
  }

  #income .income-recent.is-history-open .income-history-report-actions{
    display:flex;
    align-items:center;
    margin-left:auto;
  }

  #income .income-history-report-btn{
    height:30px;
    padding:0 11px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    border:1px solid color-mix(in srgb,var(--primary) 52%,var(--border));
    border-radius:9px;
    background:color-mix(in srgb,var(--primary) 16%,var(--panel-muted));
    color:color-mix(in srgb,var(--primary) 72%,var(--text));
    font:inherit;
    font-size:12px;
    font-weight:600;
    line-height:1;
    white-space:nowrap;
    cursor:pointer;
    transition:color .15s ease,background .15s ease,border-color .15s ease;
  }

  #income .income-history-report-btn:hover{
    color:var(--text);
    background:color-mix(in srgb,var(--primary) 24%,var(--panel-muted));
    border-color:color-mix(in srgb,var(--primary) 68%,var(--border));
  }

  #income .income-history-report-btn svg{
    width:15px;
    height:15px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
  }
}

body.income-report-picker-open{
  overflow:hidden;
}
.income-report-picker[hidden]{
  display:none !important;
}
.income-report-picker{
  position:fixed;
  z-index:2500;
  inset:0;
  display:grid;
  place-items:center;
  padding:20px;
  background:rgba(3,7,18,.48);
  backdrop-filter:blur(3px);
}
.income-report-picker-card{
  width:min(430px,100%);
  max-height:min(640px,calc(100vh - 40px));
  overflow:auto;
  padding:18px;
  border:1px solid var(--border);
  border-radius:16px;
  background:var(--panel);
  color:var(--text);
  box-shadow:0 24px 70px rgba(0,0,0,.32);
}
.income-report-picker-head{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  margin-bottom:10px;
}
.income-report-picker-close{
  width:30px;
  height:30px;
  padding:0;
  display:grid;
  place-items:center;
  flex:0 0 30px;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--panel-muted);
  color:var(--text-muted);
  font-size:20px;
  line-height:1;
  cursor:pointer;
}
.income-report-picker-section-title{
  margin:0 0 6px;
  color:var(--text);
  font-size:12px;
  font-weight:650;
}
.income-report-preset-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:7px;
  margin-top:0;
}
.income-report-preset-btn{
  min-width:0;
  height:34px;
  padding:0 8px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--panel-muted);
  color:var(--text-muted);
  font:inherit;
  font-size:11px;
  white-space:nowrap;
  cursor:pointer;
}
.income-report-preset-btn:hover{
  color:var(--text);
  background:var(--active);
}
.income-report-preset-btn.active{
  color:var(--text);
  border-color:color-mix(in srgb,var(--primary) 78%,var(--border));
  background:color-mix(in srgb,var(--primary) 18%,var(--panel-muted));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--primary) 18%,transparent);
}
.income-report-custom-range[hidden]{
  display:none !important;
}
.income-report-custom-range{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid var(--border);
}
.income-report-custom-range label > span{
  display:block;
  margin-bottom:5px;
  color:var(--text-muted);
  font-size:11px;
}
.income-report-custom-range input{
  width:100%;
  height:38px;
  padding:0 10px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--panel-muted);
  color:var(--text);
  color-scheme:dark;
  font:inherit;
  font-size:12px;
}
body:not(.dark) .income-report-custom-range input{
  color-scheme:light;
}
.income-report-category-title{
  margin-top:15px;
}
.income-report-picker-categories{
  border:1px solid var(--border);
  border-radius:11px;
  overflow:hidden;
}
.income-report-picker-all,
.income-report-picker-category{
  min-height:38px;
  padding:8px 11px;
  display:flex;
  align-items:center;
  gap:9px;
  cursor:pointer;
}
.income-report-picker-all{
  border-bottom:1px solid var(--border);
  background:color-mix(in srgb,var(--panel-muted) 86%,transparent);
  font-size:13px;
  font-weight:600;
}
.income-report-picker-category-list{
  max-height:170px;
  overflow:auto;
  padding:3px 0;
  scrollbar-width:thin;
  scrollbar-color:color-mix(in srgb,var(--text-muted) 48%,transparent) transparent;
}
.income-report-picker-category{
  min-height:34px;
  padding-top:6px;
  padding-bottom:6px;
  font-size:13px;
}
.income-report-picker-category:hover{
  background:var(--panel-muted);
}
.income-report-picker input[type="checkbox"]{
  width:15px;
  height:15px;
  margin:0;
  accent-color:var(--primary);
}
.income-report-picker-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid var(--border);
}
.income-report-picker-actions button{
  height:36px;
  padding:0 13px;
  border:1px solid var(--border);
  border-radius:10px;
  font:inherit;
  font-size:12px;
  font-weight:600;
  cursor:pointer;
}
.income-report-picker-cancel{
  background:var(--panel-muted);
  color:var(--text-muted);
}
.income-report-picker-submit{
  border-color:transparent !important;
  background:var(--primary);
  color:#fff;
}
.income-report-picker-submit:disabled{
  opacity:.45;
  cursor:not-allowed;
}
@media(max-width:520px ) and (pointer:coarse){
  .income-report-preset-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .income-report-custom-range{grid-template-columns:1fr}
}

/* Desktop settings categories: keep the input and add control usable at narrow widths. */
@media (hover:hover) and (pointer:fine), (pointer:coarse) and (min-width:901px) and (max-width:1200px){
  #incomeAnalytics .analytics-settings-host #settings[data-settings-tab="categories"] .qp-category-add{
    box-sizing:border-box !important;
    width:calc(100% - 12px) !important;
    margin:0 12px 10px 0 !important;
    padding:2px 12px 0 2px !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 62px !important;
    gap:10px !important;
    align-items:stretch !important;
  }

  #incomeAnalytics .analytics-settings-host #settings[data-settings-tab="categories"] .qp-category-add input{
    grid-column:1 !important;
    box-sizing:border-box !important;
    width:100% !important;
    min-width:0 !important;
    height:62px !important;
    min-height:62px !important;
    margin:0 !important;
  }

  #incomeAnalytics .analytics-settings-host #settings[data-settings-tab="categories"] .qp-category-add button{
    grid-column:2 !important;
    box-sizing:border-box !important;
    width:100% !important;
    min-width:0 !important;
    height:62px !important;
    min-height:62px !important;
    margin:0 !important;
  }
}

/* Desktop category manager base v71.
   These styles used to arrive indirectly through mobile-base.css; keep desktop self-contained. */
@media (hover:hover) and (pointer:fine), (pointer:coarse) and (min-width:901px) and (max-width:1200px){
  #incomeAnalytics .analytics-settings-host #settings[data-settings-tab="categories"] .qp-category-manager{
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
  }

  #incomeAnalytics .analytics-settings-host #settings[data-settings-tab="categories"] .qp-category-add input{
    box-sizing:border-box !important;
    width:100% !important;
    min-width:0 !important;
    padding:0 14px !important;
    border:1px solid var(--border) !important;
    border-radius:12px !important;
    outline:none !important;
    background:var(--panel-muted) !important;
    color:var(--text) !important;
    font:inherit !important;
    font-size:14px !important;
  }

  #incomeAnalytics .analytics-settings-host #settings[data-settings-tab="categories"] .qp-category-add input:focus{
    border-color:var(--primary) !important;
    box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 16%,transparent) !important;
  }

  #incomeAnalytics .analytics-settings-host #settings[data-settings-tab="categories"] .qp-category-add button{
    display:grid !important;
    place-items:center !important;
    padding:0 !important;
    border:1px solid var(--primary) !important;
    border-radius:12px !important;
    background:var(--primary) !important;
    color:#fff !important;
    font:inherit !important;
    font-size:26px !important;
    font-weight:500 !important;
    line-height:1 !important;
    box-shadow:none !important;
    transform:none !important;
  }

  #incomeAnalytics .analytics-settings-host #settings[data-settings-tab="categories"] .qp-category-add button:hover{
    filter:brightness(1.06) !important;
    transform:none !important;
  }

  #incomeAnalytics .analytics-settings-host #settings[data-settings-tab="categories"] .qp-category-item{
    position:relative !important;
    display:grid !important;
    grid-template-columns:36px minmax(0,1fr) 30px !important;
    align-items:center !important;
    gap:8px !important;
    padding:8px 9px !important;
    border:1px solid var(--border) !important;
    border-radius:12px !important;
    background:var(--panel-muted) !important;
    box-shadow:none !important;
    overflow:hidden !important;
    transform:none !important;
  }

  #incomeAnalytics .analytics-settings-host #settings[data-settings-tab="categories"] .qp-category-item:hover{
    border-color:color-mix(in srgb,var(--category-color) 44%,var(--border)) !important;
    background:color-mix(in srgb,var(--panel-muted) 94%,var(--category-color) 6%) !important;
    transform:none !important;
  }

  #incomeAnalytics .analytics-settings-host #settings[data-settings-tab="categories"] .qp-category-icon{
    grid-column:1 !important;
    width:36px !important;
    min-width:36px !important;
    height:36px !important;
    display:grid !important;
    place-items:center !important;
    border-radius:10px !important;
    background:color-mix(in srgb,var(--category-color) 16%,transparent) !important;
    color:var(--category-color) !important;
  }

  #incomeAnalytics .analytics-settings-host #settings[data-settings-tab="categories"] .qp-category-icon svg{
    width:19px !important;
    height:19px !important;
    fill:none !important;
    stroke:currentColor !important;
    stroke-width:1.8 !important;
    stroke-linecap:round !important;
    stroke-linejoin:round !important;
  }

  #incomeAnalytics .analytics-settings-host #settings[data-settings-tab="categories"] .qp-category-name{
    grid-column:2 !important;
    min-width:0 !important;
    overflow:hidden !important;
    color:var(--text) !important;
    font-size:13px !important;
    font-weight:600 !important;
    line-height:1.2 !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }

  #incomeAnalytics .analytics-settings-host #settings[data-settings-tab="categories"] .qp-category-delete{
    grid-column:3 !important;
    justify-self:end !important;
    width:30px !important;
    min-width:30px !important;
    max-width:30px !important;
    height:30px !important;
    min-height:30px !important;
    max-height:30px !important;
    padding:0 !important;
    display:grid !important;
    place-items:center !important;
    border:0 !important;
    border-radius:9px !important;
    background:transparent !important;
    color:color-mix(in srgb,var(--danger) 72%,var(--text-muted)) !important;
    font-size:18px !important;
    line-height:1 !important;
    box-shadow:none !important;
    transform:none !important;
  }

  #incomeAnalytics .analytics-settings-host #settings[data-settings-tab="categories"] .qp-category-delete:hover{
    background:color-mix(in srgb,var(--danger) 9%,transparent) !important;
    color:var(--danger) !important;
    transform:none !important;
  }
}

/* Desktop settings auto-height v73.
   Replace the old full-height overlay with content-sized settings layout. */
@media (hover:hover) and (pointer:fine), (pointer:coarse) and (min-width:901px) and (max-width:1200px){
  #incomeAnalytics.is-settings-open{
    position:relative !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    overflow:visible !important;
  }

  #incomeAnalytics.is-settings-open > .analytics-head,
  #incomeAnalytics.is-settings-open > .analytics-cards,
  #incomeAnalytics.is-settings-open > .analytics-grid,
  #incomeAnalytics.is-settings-open > .analytics-categories-toggle,
  #incomeAnalytics.is-settings-open.is-monthly > .monthly-analytics{
    display:none !important;
  }

  #incomeAnalytics.is-settings-open > .analytics-mode-row{
    position:absolute !important;
    z-index:42 !important;
    top:24px !important;
    right:26px !important;
    left:auto !important;
    width:38px !important;
    min-width:38px !important;
    max-width:38px !important;
    height:38px !important;
    min-height:38px !important;
    max-height:38px !important;
    margin:0 !important;
    padding:0 !important;
    display:block !important;
    overflow:visible !important;
  }

  #incomeAnalytics.is-settings-open > .analytics-mode-row > .analytics-mode-tabs,
  #incomeAnalytics.is-settings-open > .analytics-mode-row > .analytics-mode-period{
    display:none !important;
  }

  #incomeAnalytics.is-settings-open .analytics-settings-toggle.is-active{
    position:static !important;
    width:38px !important;
    min-width:38px !important;
    max-width:38px !important;
    height:38px !important;
    min-height:38px !important;
    max-height:38px !important;
    margin:0 !important;
  }

  #incomeAnalytics.is-settings-open .analytics-settings-host{
    position:relative !important;
    z-index:1 !important;
    inset:auto !important;
    display:block !important;
    width:100% !important;
    height:auto !important;
    min-width:0 !important;
    min-height:0 !important;
    max-height:none !important;
    margin:0 !important;
    padding:0 !important;
    overflow:visible !important;
    box-sizing:border-box !important;
    border-radius:inherit !important;
    background:var(--panel) !important;
    box-shadow:none !important;
  }
}

/* The single Settings tree stays in its analytics host. The standalone route
   uses display:contents so it occupies the same main-page layout as before. */
#income.is-settings-route,
#income.is-settings-route > #incomeAnalytics,
#income.is-settings-route #analyticsSettingsHost{
  display:contents !important;
}
#income.is-settings-route > :not(#incomeAnalytics),
#income.is-settings-route > #incomeAnalytics > :not(#analyticsSettingsHost),
#incomeAnalytics.is-settings-open > :not(.analytics-mode-row):not(.analytics-settings-host){
  display:none !important;
}
#income.is-settings-route #settings .settings-card-subtitle{
  display:block !important;
}

/* Desktop auth shell: shared auth styles must not depend on mobile.css. */
@media (hover:hover) and (pointer:fine), (pointer:coarse) and (min-width:901px) and (max-width:1200px){
  #qpAuthGate{
    position:fixed;
    inset:0;
    z-index:200000;
    display:flex;
    width:100vw;
    height:100dvh;
    min-height:100vh;
    box-sizing:border-box;
    align-items:center;
    justify-content:center;
    padding:20px;
    overflow:auto;
    background:var(--bg,#f7f9fc);
    color:var(--text,#172033);
  }

  html[data-theme="dark"] #qpAuthGate{
    background:#070b12;
  }

  #qpAuthGate .qp-auth-card{
    width:min(430px,calc(100vw - 32px));
    max-height:calc(100dvh - 32px);
    box-sizing:border-box;
    padding:30px;
    overflow:auto;
    border:1px solid var(--border,#d7dde7);
    border-radius:22px;
    background:var(--panel,#fff);
    box-shadow:0 24px 70px rgba(15,23,42,.14);
  }

  html[data-theme="dark"] #qpAuthGate .qp-auth-card{
    background:#111827;
    border-color:rgba(255,255,255,.10);
    box-shadow:0 24px 70px rgba(0,0,0,.35);
  }

  #qpAuthGate .qp-auth-tabs{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:6px;
    padding:4px;
    margin-bottom:20px;
    border:1px solid var(--border,#d7dde7);
    border-radius:12px;
    background:rgba(100,116,139,.06);
  }

  #qpAuthGate .qp-auth-tab{
    height:38px;
    border:0;
    border-radius:9px;
    background:transparent;
    color:var(--text-muted,#64748b);
    font:inherit;
    font-weight:600;
    cursor:pointer;
  }

  #qpAuthGate .qp-auth-tab.active{
    background:var(--panel,#fff);
    color:var(--text,#172033);
    box-shadow:0 1px 5px rgba(15,23,42,.08);
  }

  html[data-theme="dark"] #qpAuthGate .qp-auth-tab.active{
    background:#1f2937;
    color:#f8fafc;
  }

  #qpAuthGate .qp-auth-field{
    display:block;
    margin-bottom:13px;
  }

  #qpAuthGate .qp-auth-field span{
    display:block;
    margin-bottom:7px;
    font-size:13px;
    font-weight:600;
  }

  #qpAuthGate .qp-auth-field input{
    width:100%;
    height:44px;
    box-sizing:border-box;
    padding:0 13px;
    border:1px solid var(--border,#d7dde7);
    border-radius:11px;
    background:var(--panel,#fff);
    color:var(--text,#172033);
    font:inherit;
    outline:none;
  }

  #qpAuthGate .qp-auth-field input:focus{
    border-color:#9aa5b8;
    box-shadow:0 0 0 3px rgba(100,116,139,.12);
  }

  html[data-theme="dark"] #qpAuthGate .qp-auth-field input{
    background:#0f172a;
    border-color:rgba(255,255,255,.12);
    color:#f8fafc;
  }

  #qpAuthGate .qp-auth-primary{
    width:100%;
    height:44px;
    border:1px solid #cbd5e1;
    border-radius:11px;
    background:#e9edf2;
    color:#374151;
    font:inherit;
    font-weight:700;
    cursor:pointer;
  }

  #qpAuthGate .qp-auth-primary:hover{
    background:#e2e7ed;
  }

  #qpAuthGate .qp-auth-primary:disabled{
    opacity:.55;
    cursor:wait;
  }

  html[data-theme="dark"] #qpAuthGate .qp-auth-primary{
    background:#374151;
    border-color:#4b5563;
    color:#f8fafc;
  }

  #qpAuthGate .qp-auth-link{
    display:block;
    width:100%;
    margin-top:13px;
    border:0;
    background:transparent;
    color:#6b7280;
    font:inherit;
    font-size:13px;
    cursor:pointer;
  }

  #qpAuthGate .qp-auth-link:hover{
    text-decoration:underline;
  }

  #qpAuthGate .qp-auth-link.qp-auth-reset{
    width:auto;
    margin:-6px 0 6px auto;
    padding:0;
    text-align:right;
  }

  #qpAuthGate .qp-auth-divider{
    display:flex;
    align-items:center;
    gap:10px;
    margin:12px 0 2px;
    color:#8b97a9;
    font-size:12px;
    line-height:16px;
  }

  #qpAuthGate .qp-auth-divider::before,
  #qpAuthGate .qp-auth-divider::after{
    content:"";
    flex:1;
    height:1px;
    background:rgba(255,255,255,.12);
  }

  #qpAuthGate .qp-auth-oauth{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin-top:10px;
    padding:0 13px;
    background:rgba(31,41,55,.92);
    border-color:rgba(255,255,255,.18);
    color:#f8fafc;
    transition:background .16s ease,border-color .16s ease,transform .16s ease;
  }

  #qpAuthGate .qp-auth-oauth-icon,
  #qpAuthGate .qp-auth-oauth-icon svg{
    display:block;
    width:20px;
    height:20px;
    flex:0 0 20px;
  }

  #qpAuthGate .qp-auth-oauth-label{
    white-space:nowrap;
  }

  #qpAuthGate .qp-auth-reset-message{
    display:none;
    margin:0 0 8px;
    padding:8px 10px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:9px;
    background:rgba(15,23,42,.58);
    color:#cbd5e1;
    font-size:12px;
    line-height:18px;
  }

  #qpAuthGate .qp-auth-reset-message:not(:empty){
    display:block;
  }

  #qpAuthGate .qp-auth-reset-message.error{
    border-color:rgba(248,113,113,.32);
    color:#fca5a5;
  }

  #qpAuthGate .qp-auth-message{
    display:none;
    min-height:0;
    margin:12px 0 10px;
    padding:0;
    font-size:13px;
    line-height:19px;
    color:#64748b;
  }

  #qpAuthGate .qp-auth-message:not(:empty){
    display:block;
  }

  #qpAuthGate .qp-auth-message.error{
    color:#b91c1c;
  }

  html[data-theme="dark"] #qpAuthGate .qp-auth-message.error{
    color:#fca5a5;
  }

  body.qp-auth-locked > *:not(#qpAuthGate){
    pointer-events:none;
  }

  body.qp-auth-locked #qpAuthGate{
    pointer-events:auto;
  }

  @media (max-height:600px){
    #qpAuthGate{
      align-items:flex-start;
      padding-top:16px;
      padding-bottom:16px;
    }
  }
}

/* DEV96: signup success notice matches the login password-reset notification.
   Keep this outside pointer-specific media so phone and desktop share the same style. */
#qpAuthGate #qpAuthMessage.success,
#qpAuthGate #qpAuthSignupMessage.success{
  display:block;
  margin:0 0 8px;
  padding:8px 10px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:9px;
  background:rgba(15,23,42,.58);
  color:#cbd5e1;
  font-size:12px;
  font-weight:400;
  line-height:18px;
  overflow-wrap:anywhere;
}
#qpAuthGate #qpAuthMessage.success::before,
#qpAuthGate #qpAuthSignupMessage.success::before{
  content:none;
  display:none;
}


/* DEV version indicator: visible on desktop and mobile until final release verification. */
#income .qp-dev-panel{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  width:100%;
  min-height:38px;
  margin:0 0 12px;
  padding:7px 9px 7px 11px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--panel-muted);
  color:var(--text-muted);
  font-size:12px;
  line-height:1.2;
  box-sizing:border-box;
}
#income .qp-dev-panel strong{
  color:var(--text);
  font-weight:650;
}
#income .qp-dev-panel button{
  flex:0 0 auto;
  min-height:30px;
  padding:5px 9px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--panel);
  color:var(--text-muted);
  font:inherit;
  cursor:pointer;
}

/* Shared notice dialog: available on desktop and mobile. */
.qp-notice-overlay{position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(15,23,42,.34);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);}
.qp-notice-dialog{width:min(460px,calc(100vw - 32px));box-sizing:border-box;padding:24px;border:1px solid var(--qp-border,#d7dde7);border-radius:18px;background:var(--qp-surface-strong,#fff);color:var(--qp-text,#172033);box-shadow:0 24px 70px rgba(15,23,42,.22);}
.qp-notice-title{margin:0 0 8px;font-size:17px;line-height:24px;font-weight:700;}
.qp-notice-message{margin:0;color:var(--qp-muted,#64748b);font-size:14px;line-height:21px;white-space:pre-wrap;overflow-wrap:anywhere;}
.qp-notice-actions{display:flex;justify-content:flex-end;margin-top:20px;}
.qp-notice-btn{min-width:96px;height:38px;padding:0 18px;border:1px solid var(--qp-border,#d7dde7);border-radius:10px;background:var(--qp-surface,#fff);color:var(--qp-text,#172033);font:inherit;cursor:pointer;}
.qp-notice-btn:hover{background:rgba(100,116,139,.10);}
.qp-notice-dialog[data-type="error"]{border-color:rgba(239,68,68,.35);}
html[data-theme="dark"] .qp-notice-overlay{background:rgba(0,0,0,.52);}



/* DEV109: password reset uses the existing qPokoy auth card and colors.
   Background is intentionally untouched. */
#qpAuthGate.qp-auth-reset-mode .qp-auth-tabs{
  display:none !important;
}

#qpAuthResetForm .qp-auth-reset-intro{
  margin:0 0 22px;
  text-align:center;
}

#qpAuthResetForm .qp-auth-reset-intro h2{
  margin:0;
  color:inherit;
  font-size:22px;
  line-height:1.2;
  font-weight:700;
  letter-spacing:-.01em;
}

#qpAuthResetForm .qp-auth-reset-intro p{
  margin:0;
  color:var(--text-muted,#64748b);
  font-size:13px;
  line-height:1.45;
}

#qpAuthResetForm .qp-auth-reset-hint{
  margin:-7px 0 8px;
  color:var(--text-muted,#64748b);
  font-size:12px;
  line-height:1.35;
  text-align:right;
  opacity:.5;
}

#qpAuthResetForm #qpAuthResetSubmit{
  margin-top:3px;
}

#qpAuthResetForm .qp-auth-reset-back{
  display:block;
  width:100% !important;
  margin:13px 0 0 !important;
  padding:0 !important;
  border:0;
  background:transparent;
  color:var(--text-muted,#64748b) !important;
  font:inherit;
  font-size:13px;
  text-align:center !important;
  cursor:pointer;
}

#qpAuthResetForm .qp-auth-reset-back:hover{
  text-decoration:underline;
}

html[data-theme="dark"] #qpAuthResetForm .qp-auth-reset-intro p,
html[data-theme="dark"] #qpAuthResetForm .qp-auth-reset-hint,
html[data-theme="dark"] #qpAuthResetForm .qp-auth-reset-back{
  color:#94a3b8 !important;
}

@media (max-width:900px) and (pointer:coarse), (orientation:landscape) and (max-height:560px) and (pointer:coarse){
  #qpAuthResetForm .qp-auth-reset-intro{
    margin-bottom:18px;
  }
  #qpAuthResetForm .qp-auth-reset-intro h2{
    font-size:20px;
  }
}

/* DEV123: annual summary card titles use one visual style on desktop.
   Keep a smaller size in narrow desktop windows so the cards do not overflow. */
@media (hover:hover) and (pointer:fine){
  #incomeAnalytics:not(.is-monthly) .analytics-card-best .analytics-card-body > span,
  #incomeAnalytics:not(.is-monthly) .analytics-card-worst .analytics-card-body > span,
  #incomeAnalytics:not(.is-monthly) .analytics-card-average .analytics-card-body > span,
  #incomeAnalytics:not(.is-monthly) .analytics-card-growth .annual-growth-label-text{
    color:color-mix(in srgb,var(--text) 72%,var(--text-muted)) !important;
    font-family:inherit !important;
    font-size:13px !important;
    font-weight:400 !important;
    line-height:1.25 !important;
    letter-spacing:0 !important;
  }
}
@media (hover:hover) and (pointer:fine) and (max-width:1050px){
  #incomeAnalytics:not(.is-monthly) .analytics-card-best .analytics-card-body > span,
  #incomeAnalytics:not(.is-monthly) .analytics-card-worst .analytics-card-body > span,
  #incomeAnalytics:not(.is-monthly) .analytics-card-average .analytics-card-body > span,
  #incomeAnalytics:not(.is-monthly) .analytics-card-growth .annual-growth-label-text{
    font-size:12px !important;
  }
}

/* DEV124: annual “Динамика доходов” no-data mark matches monthly comparison cards.
   Only the empty state is restyled; real percentage values keep their existing layout. */
#incomeAnalytics:not(.is-monthly) #analyticsGrowth.is-empty{
  position:relative !important;
  color:transparent !important;
}
#incomeAnalytics:not(.is-monthly) #analyticsGrowth.is-empty::after{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  top:50% !important;
  width:16px !important;
  height:2px !important;
  border-radius:999px !important;
  background:var(--text-muted) !important;
  transform:translateY(4px) !important;
}

/* DEV125: desktop-only large hit area for Recent incomes collapse/expand.
   The whole left side of the controls row is clickable, with a 96px safety gap before +.
   Mobile/coarse-pointer rules remain untouched. */
@media (pointer:fine){
  #income .income-recent-controls{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 48px !important;
    column-gap:96px !important;
    align-items:stretch !important;
  }

  #income #incomeRecentToggle.income-recent-toggle{
    width:100% !important;
    min-width:0 !important;
    min-height:48px !important;
    padding:0 !important;
    justify-content:flex-start !important;
    appearance:none !important;
    -webkit-appearance:none !important;
    border:0 !important;
    border-radius:0 !important;
    outline:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }

  #income #incomeRecentToggle.income-recent-toggle:hover,
  #income #incomeRecentToggle.income-recent-toggle:focus,
  #income #incomeRecentToggle.income-recent-toggle:focus-visible{
    border:0 !important;
    outline:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    color:var(--text) !important;
  }

  #income #incomeRecentToggle.income-recent-toggle svg{
    width:22px !important;
    height:22px !important;
    box-sizing:content-box !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    outline:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }

  #income #incomeRecentToggle.income-recent-toggle:hover svg,
  #income #incomeRecentToggle.income-recent-toggle:focus svg,
  #income #incomeRecentToggle.income-recent-toggle:focus-visible svg{
    background:transparent !important;
    box-shadow:none !important;
  }

  #income .income-recent-controls > .add-income-btn{
    grid-column:2 !important;
    justify-self:end !important;
    margin-left:0 !important;
  }

  /* DEV128: when Recent incomes is collapsed, keep the invisible hit area
     extending through the empty strip below the chevron. The extension stays
     inside the left grid column, so the 96px safety gap and + remain separate. */
  #income .income-recent.is-collapsed #incomeRecentToggle.income-recent-toggle{
    position:relative !important;
    z-index:2 !important;
    overflow:visible !important;
  }

  #income .income-recent.is-collapsed #incomeRecentToggle.income-recent-toggle::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:100%;
    height:40px;
  }
}


/* Desktop income actions: one selected card/row, no icon backplates. */
.income-recent-delete{display:none;}
@media (hover:hover) and (pointer:fine), (pointer:coarse) and (min-width:901px) and (max-width:1200px){
  #income #incomeRecentGrid :is(.income-recent-edit,.income-recent-delete),
  #history #incomeList > .income-row :is(.edit-income,.delete-income){
    display:grid;place-items:center;
    width:28px;height:28px;padding:0;
    border:0;border-radius:0;background:transparent;box-shadow:none;
    color:#82b4de;cursor:pointer;
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .15s ease;
  }
  #income #incomeRecentGrid :is(.income-recent-edit,.income-recent-delete){
    position:absolute;bottom:10px;top:auto;z-index:2;transform:none;
  }
  #income #incomeRecentGrid .income-recent-edit{right:44px;}
  #income #incomeRecentGrid .income-recent-delete{right:10px;}
  #history #incomeList > .income-row :is(.edit-income,.delete-income){
    top:50%;transform:translateY(-50%);
  }
  #income #incomeRecentGrid .income-recent-delete,
  #history #incomeList > .income-row .delete-income{color:#c87c8c;}
  #income #incomeRecentGrid .is-desktop-actions-open :is(.income-recent-edit,.income-recent-delete),
  #history #incomeList > .is-desktop-actions-open :is(.edit-income,.delete-income){
    opacity:1;visibility:visible;pointer-events:auto;
  }
  #income #incomeRecentGrid :is(.income-recent-edit,.income-recent-delete) svg,
  #history #incomeList > .income-row :is(.edit-income,.delete-income) svg{
    width:22px;height:22px;fill:none;stroke:currentColor;
    stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
  }
  #history #incomeList > .income-row .history-delete-close{display:none;}
  #history #incomeList > .income-row .history-delete-trash{display:block !important;}
  #income #incomeRecentGrid .income-recent-edit::after,
  #history #incomeList > .income-row .edit-income::after{
    content:"";position:absolute;right:-3px;top:4px;height:20px;width:1px;
    background:color-mix(in srgb,#82b4de 35%,transparent);pointer-events:none;
  }
  #income #incomeRecentGrid :is(.income-recent-edit,.income-recent-delete):hover,
  #history #incomeList > .income-row :is(.edit-income,.delete-income):hover{filter:brightness(1.12);}
  #income #incomeRecentGrid :is(.income-recent-edit,.income-recent-delete):focus-visible,
  #history #incomeList > .income-row :is(.edit-income,.delete-income):focus-visible{outline:1px solid currentColor;outline-offset:2px;}
}