#incomeAnalytics .analytics-mode-tabs{
  display:inline-grid;
  grid-template-columns:1fr 1fr;
  width:220px;
  max-width:100%;
  margin:0 0 18px;
  padding:3px;
  border:1px solid var(--border);
  border-radius:11px;
  background:color-mix(in srgb,var(--panel-muted) 88%,transparent);
}
#incomeAnalytics .analytics-mode-tab{
  min-width:0;
  height:34px;
  padding:0 16px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:var(--text-muted);
  font:inherit;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  transition:background .15s ease,color .15s ease,box-shadow .15s ease;
}
#incomeAnalytics .analytics-mode-tab:hover{color:var(--text)}
#incomeAnalytics .analytics-mode-tab.active{
  background:color-mix(in srgb,var(--primary) 16%,var(--panel));
  color:var(--text);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--primary) 42%,transparent);
}
#incomeAnalytics.is-monthly > .analytics-head,
#incomeAnalytics.is-monthly > .analytics-cards,
#incomeAnalytics.is-monthly > .analytics-grid{display:none !important}
#incomeAnalytics:not(.is-monthly) > .monthly-analytics{display:none !important}
#monthlyAnalytics[hidden]{display:none !important}
#incomeAnalytics.is-monthly:not(.is-settings-open) > #monthlyAnalytics:not([hidden]){display:block !important}

#incomeAnalytics .monthly-analytics-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  margin:0 0 16px;
}
#incomeAnalytics .monthly-analytics-title{min-width:0}
#incomeAnalytics .monthly-analytics-title h2{
  margin:0;
  color:var(--text);
  font-size:24px;
  font-weight:600;
  line-height:1.25;
}
#incomeAnalytics .monthly-analytics-period{
  margin-top:5px;
  color:var(--text-muted);
  font-size:12px;
  line-height:1.3;
}
#incomeAnalytics .monthly-analytics-total{
  flex:0 0 auto;
  color:var(--text);
  font-size:24px;
  font-weight:700;
  line-height:1.25;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

#incomeAnalytics .monthly-summary-cards{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  margin-bottom:16px;
}

/* Desktop monthly layout: two wide summary cards per row. */
@media (hover:hover) and (pointer:fine), (pointer:coarse) and (min-width:901px) and (max-width:1200px){
  #incomeAnalytics .monthly-summary-cards{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
  #incomeAnalytics .monthly-summary-card{
    grid-column:span 2;
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    align-items:center;
    column-gap:18px;
  }
  #incomeAnalytics .monthly-summary-card .monthly-summary-card-icon{
    align-self:center;
    width:52px;
    height:52px;
    min-width:52px;
    border-radius:14px;
  }
  #incomeAnalytics .monthly-summary-card .monthly-summary-card-icon svg{
    width:27px;
    height:27px;
  }
  #incomeAnalytics .monthly-summary-card .monthly-summary-card-body{
    width:calc(100% - 8px);
    margin:0 0 0 8px;
  }

  /* Comparison cards: content stays left, the main percentage uses the free space on the right. */
  #incomeAnalytics .monthly-summary-growth .monthly-summary-card-body{
    display:grid;
    grid-template-columns:200px auto;
    grid-template-areas:
      "label value"
      "note value";
    column-gap:18px;
    row-gap:8px;
    align-items:center;
    justify-content:start;
    width:calc(100% - 8px);
  }
  #incomeAnalytics .monthly-summary-growth .monthly-summary-card-body > .monthly-summary-card-label{
    grid-area:label;
  }
  #incomeAnalytics .monthly-summary-growth .monthly-summary-card-body > strong{
    grid-area:value;
    align-self:center;
    justify-self:start;
    margin:0;
    font-size:34px;
    line-height:1;
    white-space:nowrap;
  }
  #incomeAnalytics .monthly-summary-growth .monthly-summary-card-body > small{
    grid-area:note;
    max-width:none;
    margin:0;
  }

  /* Best category: compact horizontal composition. */
  #incomeAnalytics .monthly-summary-best .monthly-summary-card-body{
    display:grid;
    grid-template-columns:190px auto;
    grid-template-areas:
      "label amount"
      "category amount";
    column-gap:18px;
    row-gap:6px;
    align-items:center;
    justify-content:start;
    width:calc(100% - 8px);
    margin:0 0 0 8px;
  }
  #incomeAnalytics .monthly-summary-best .monthly-summary-card-body > span{
    grid-area:label;
    margin:0;
  }
  #incomeAnalytics .monthly-summary-best .monthly-summary-card-body > .monthly-best-category-row{
    grid-area:category;
    margin:0;
  }
  #incomeAnalytics .monthly-summary-best .monthly-summary-card-body > b{
    grid-area:amount;
    align-self:center;
    justify-self:start;
    margin:0;
    font-size:34px;
    line-height:1;
    white-space:nowrap;
  }

  #incomeAnalytics .monthly-summary-average .monthly-summary-card-body{
    display:grid;
    grid-template-columns:190px auto;
    grid-template-areas:
      "label value"
      "note value";
    column-gap:18px;
    row-gap:8px;
    align-items:center;
    justify-content:start;
    width:calc(100% - 8px);
  }
  #incomeAnalytics .monthly-summary-average .monthly-summary-card-body > span{
    grid-area:label;
  }
  #incomeAnalytics .monthly-summary-average .monthly-summary-card-body > strong{
    grid-area:value;
    align-self:center;
    justify-self:start;
    margin:0;
    font-size:34px;
    line-height:1;
    white-space:nowrap;
  }
  #incomeAnalytics .monthly-summary-average .monthly-summary-card-body > small{
    grid-area:note;
    max-width:none;
    margin:0;
  }
}
#incomeAnalytics .monthly-summary-card{
  --monthly-accent:var(--success);
  --monthly-soft:rgba(24,185,129,.10);
  position:relative;
  min-width:0;
  min-height:184px;
  padding:28px;
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--monthly-accent) 30%,var(--border));
  border-radius:20px;
  background:var(--panel-muted);
}
#incomeAnalytics .monthly-summary-card::after{
  content:"";
  position:absolute;
  right:-54px;
  bottom:-76px;
  width:150px;
  height:150px;
  border-radius:50%;
  background:var(--monthly-soft);
  pointer-events:none;
}
#incomeAnalytics .monthly-summary-average{
  --monthly-accent:#3b82f6;
  --monthly-soft:rgba(59,130,246,.10);
}
#incomeAnalytics .monthly-summary-growth{
  --monthly-accent:var(--text-muted);
  --monthly-soft:rgba(148,163,184,.08);
}
#incomeAnalytics .monthly-summary-growth.positive{
  --monthly-accent:var(--success);
  --monthly-soft:rgba(24,185,129,.10);
}
#incomeAnalytics .monthly-summary-growth.negative{
  --monthly-accent:var(--danger);
  --monthly-soft:rgba(239,68,68,.10);
}
#incomeAnalytics .monthly-summary-card-icon{
  position:relative;
  z-index:1;
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border-radius:12px;
  background:color-mix(in srgb,var(--monthly-accent) 14%,transparent);
  color:var(--monthly-accent);
}
#incomeAnalytics .monthly-summary-card-icon svg{
  width:23px;
  height:23px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}
#incomeAnalytics .monthly-summary-card-body{
  position:relative;
  z-index:1;
  min-width:0;
  margin-top:14px;
}
#incomeAnalytics .monthly-summary-card-body > span{
  display:block;
  color:var(--text-muted);
  font-size:12px;
  line-height:1.3;
}
#incomeAnalytics .monthly-best-category-row{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}
#incomeAnalytics .monthly-summary-card-body .monthly-best-category-row > strong{
  min-width:0;
  margin:0;
}
#incomeAnalytics .monthly-best-share{
  min-width:46px;
  height:30px;
  padding:0 9px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  border:1px solid color-mix(in srgb,var(--monthly-accent) 25%,transparent);
  border-radius:9px;
  background:color-mix(in srgb,var(--monthly-accent) 9%,transparent);
  color:var(--monthly-accent);
  font-size:13px;
  font-weight:650;
  line-height:1;
}
#incomeAnalytics .monthly-summary-card-body strong{
  display:block;
  margin-top:10px;
  color:var(--text);
  font-size:24px;
  font-weight:650;
  line-height:1.15;
  letter-spacing:-.02em;
  overflow-wrap:anywhere;
}
#incomeAnalytics .monthly-summary-growth.positive .monthly-summary-card-body strong{color:var(--success)}
#incomeAnalytics .monthly-summary-growth.negative .monthly-summary-card-body strong{color:var(--danger)}
#incomeAnalytics .monthly-summary-growth.neutral .monthly-summary-card-body strong{color:var(--text-muted)}
#incomeAnalytics .monthly-summary-card-body b{
  display:block;
  margin-top:6px;
  color:var(--text);
  font-size:21px;
  font-weight:650;
  line-height:1.15;
  font-variant-numeric:tabular-nums;
}
#incomeAnalytics .monthly-summary-card-body small{
  display:block;
  max-width:92%;
  margin-top:8px;
  color:var(--text-muted);
  font-size:11px;
  line-height:1.45;
}

#incomeAnalytics .monthly-category-panels{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
}
#incomeAnalytics .monthly-category-card{
  --monthly-category:#94a3b8;
  --monthly-category-soft:rgba(148,163,184,.10);
  position:relative;
  min-width:0;
  min-height:136px;
  padding:18px;
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--monthly-category) 28%,var(--border));
  border-radius:18px;
  background:var(--panel-muted);
}
#incomeAnalytics .monthly-category-card::after{
  content:"";
  position:absolute;
  right:-48px;
  bottom:-74px;
  width:140px;
  height:140px;
  border-radius:50%;
  background:var(--monthly-category-soft);
  pointer-events:none;
}
#incomeAnalytics .monthly-category-card.salary,
#incomeAnalytics .monthly-category-card.teal{
  --monthly-category:#00d084;
  --monthly-category-soft:rgba(0,208,132,.10);
}
#incomeAnalytics .monthly-category-card.advance,
#incomeAnalytics .monthly-category-card.blue{
  --monthly-category:#4d9cff;
  --monthly-category-soft:rgba(77,156,255,.10);
}
#incomeAnalytics .monthly-category-card.other,
#incomeAnalytics .monthly-category-card.violet{
  --monthly-category:#a66cff;
  --monthly-category-soft:rgba(166,108,255,.10);
}
#incomeAnalytics .monthly-category-card.pension,
#incomeAnalytics .monthly-category-card.amber{
  --monthly-category:#ffad00;
  --monthly-category-soft:rgba(255,173,0,.10);
}
#incomeAnalytics .monthly-category-card.cyan{
  --monthly-category:#22d3ee;
  --monthly-category-soft:rgba(34,211,238,.10);
}
#incomeAnalytics .monthly-category-card.slate{
  --monthly-category:#94a3b8;
  --monthly-category-soft:rgba(148,163,184,.10);
}
#incomeAnalytics .monthly-category-icon{
  position:relative;
  z-index:1;
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border-radius:11px;
  background:color-mix(in srgb,var(--monthly-category) 14%,transparent);
  color:var(--monthly-category);
}
#incomeAnalytics .monthly-category-icon svg{
  width:21px;
  height:21px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}
#incomeAnalytics .monthly-category-share{
  position:absolute;
  z-index:2;
  top:18px;
  right:18px;
  min-width:46px;
  height:30px;
  padding:0 9px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid color-mix(in srgb,var(--monthly-category) 25%,transparent);
  border-radius:9px;
  background:color-mix(in srgb,var(--monthly-category) 9%,transparent);
  color:var(--monthly-category);
  font-size:13px;
  font-weight:650;
  line-height:1;
}
#incomeAnalytics .monthly-category-name{
  position:relative;
  z-index:1;
  display:block;
  margin-top:12px;
  overflow:hidden;
  color:var(--text-muted);
  font-size:12px;
  line-height:1.3;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#incomeAnalytics .monthly-category-value{
  position:relative;
  z-index:1;
  display:block;
  margin-top:7px;
  color:var(--text);
  font-size:21px;
  font-weight:650;
  line-height:1.15;
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
  overflow-wrap:anywhere;
}
#incomeAnalytics .monthly-analytics-empty{
  grid-column:1/-1;
  padding:34px 18px;
  border:1px dashed var(--border);
  border-radius:16px;
  color:var(--text-muted);
  text-align:center;
}

@media(max-width:900px ) and (pointer:coarse){
  #incomeAnalytics .monthly-summary-cards{grid-template-columns:1fr}
  #incomeAnalytics .monthly-category-panels{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px ) and (pointer:coarse){
  #incomeAnalytics .analytics-mode-tabs{
    width:100%;
    margin-bottom:14px;
  }
  #incomeAnalytics .analytics-mode-tab{height:36px;font-size:12px}
  #incomeAnalytics .monthly-analytics-head{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:start;
    gap:10px;
    margin-bottom:14px;
  }
  #incomeAnalytics .monthly-analytics-title h2{font-size:20px}
  #incomeAnalytics .monthly-analytics-total{
    max-width:42vw;
    font-size:20px;
    white-space:normal;
    text-align:right;
  }
  #incomeAnalytics .monthly-summary-cards{gap:10px;margin-bottom:10px}
  #incomeAnalytics .monthly-summary-card{
    min-height:148px;
    padding:18px 16px;
    border-radius:16px;
  }
  #incomeAnalytics .monthly-summary-card-icon{
    width:40px;
    height:40px;
  }
  #incomeAnalytics .monthly-summary-card-icon svg{width:21px;height:21px}
  #incomeAnalytics .monthly-summary-card-body{margin-top:12px}
  #incomeAnalytics .monthly-summary-card-body strong{font-size:21px}
  #incomeAnalytics .monthly-summary-card-body b{font-size:19px}
  #incomeAnalytics .monthly-category-panels{grid-template-columns:1fr;gap:10px}
  #incomeAnalytics .monthly-category-card{
    min-height:124px;
    padding:16px 14px;
    border-radius:16px;
  }
  #incomeAnalytics .monthly-category-share{
    top:16px;
    right:14px;
    min-width:44px;
    height:30px;
    font-size:12px;
  }
  #incomeAnalytics .monthly-category-value{font-size:20px}
}

/* Period label directly after the Year / Month switcher. */
#incomeAnalytics .analytics-mode-row{
  display:flex;
  align-items:center;
  gap:14px;
  margin:0 0 18px;
}
#incomeAnalytics .analytics-mode-row .analytics-mode-tabs{
  flex:0 0 auto;
  margin:0;
}
#incomeAnalytics .analytics-mode-period{
  min-width:0;
  min-height:40px;
  display:flex;
  align-items:center;
}
#incomeAnalytics .analytics-mode-period #monthlyAnalyticsTitle{
  margin:0;
  color:var(--text);
  font-size:24px;
  font-weight:700;
  line-height:1;
  white-space:nowrap;
}
#incomeAnalytics:not(.is-monthly) .analytics-mode-period #monthlyAnalyticsTitle{
  display:none !important;
}
#incomeAnalytics.is-monthly .analytics-mode-period .analytics-year-switcher{
  display:none !important;
}
#incomeAnalytics:not(.is-monthly) > .analytics-head .analytics-title-block{
  display:none !important;
}
#incomeAnalytics:not(.is-monthly) > .analytics-head{
  justify-content:flex-end !important;
}
#incomeAnalytics .monthly-analytics-head{
  justify-content:flex-end !important;
}
@media(max-width:560px ) and (pointer:coarse){
  #incomeAnalytics .analytics-mode-row{
    gap:10px;
    margin-bottom:14px;
    flex-wrap:nowrap;
  }
  #incomeAnalytics .analytics-mode-row .analytics-mode-tabs{
    width:min(220px,64vw);
  }
  #incomeAnalytics .analytics-mode-period #monthlyAnalyticsTitle{
    font-size:20px;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  #incomeAnalytics .analytics-mode-period .analytics-year-switcher{
    flex:0 0 auto;
  }
}

/* Match the year label size to the month label beside the mode switch. */
#incomeAnalytics .analytics-mode-period #analyticsYearControl{
  font-size:24px !important;
  font-weight:700 !important;
  line-height:1 !important;
}
@media (hover:hover) and (pointer:fine), (pointer:coarse) and (min-width:901px) and (max-width:1200px){
  #incomeAnalytics .analytics-mode-period .analytics-year-switcher{
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
  }
}
@media(max-width:560px ) and (pointer:coarse){
  #incomeAnalytics .analytics-mode-period #analyticsYearControl{
    font-size:20px !important;
  }
}

/* Monthly total uses the exact annual-total typography. */
@media (hover:hover) and (pointer:fine), (pointer:coarse) and (min-width:901px) and (max-width:1200px){
  #incomeAnalytics .monthly-analytics-total{
    font-size:36px !important;
    line-height:1.08 !important;
    font-weight:800 !important;
    font-variant-numeric:tabular-nums !important;
  }
}

/* Compact desktop analytics header: keep the total in the controls row. */
@media (hover:hover) and (pointer:fine), (pointer:coarse) and (min-width:901px) and (max-width:1200px){
  #incomeAnalytics .analytics-mode-row{
    margin-bottom:10px;
  }
  #incomeAnalytics:not(.is-monthly) > .analytics-head,
  #incomeAnalytics .monthly-analytics-head{
    position:relative !important;
    height:0 !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
  }
  #incomeAnalytics:not(.is-monthly) > .analytics-head .analytics-total,
  #incomeAnalytics .monthly-analytics-head .monthly-analytics-total{
    position:absolute !important;
    right:0 !important;
    bottom:10px !important;
    margin:0 !important;
  }
}

/* Final desktop-only compact height: placed after the base card rule. */
@media (hover:hover) and (pointer:fine), (pointer:coarse) and (min-width:901px) and (max-width:1200px){
  #incomeAnalytics .monthly-summary-cards{
    margin-top:14px;
  }
  #incomeAnalytics .monthly-summary-card{
    min-height:146px;
    padding:16px 28px;
  }
}

/* Period tooltips for the two comparison cards. */
#incomeAnalytics .monthly-summary-card-label{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-self:start;
  width:max-content;
  max-width:none;
  gap:5px;
  min-width:0;
  color:var(--text-muted);
  font-size:12px;
  line-height:1.3;
  white-space:nowrap;
}
#incomeAnalytics .monthly-summary-card-label > span:first-child{
  display:inline;
  flex:0 0 auto;
}
#incomeAnalytics .monthly-summary-info{
  display:grid;
  place-items:center;
  width:16px;
  height:16px;
  flex:0 0 16px;
  margin:0;
  transform:translateY(-1px);
  padding:0;
  border:1px solid color-mix(in srgb,var(--text-muted) 50%,transparent);
  border-radius:50%;
  background:transparent;
  color:var(--text-muted);
  font:700 10px/1 Arial,sans-serif;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
#incomeAnalytics .monthly-summary-info:hover,
#incomeAnalytics .monthly-summary-info:focus{
  color:var(--text);
  border-color:color-mix(in srgb,var(--primary) 70%,var(--border));
  outline:0;
}
#incomeAnalytics .monthly-summary-tooltip{
  position:absolute;
  z-index:4;
  top:calc(100% + 7px);
  left:0;
  display:none;
  width:max-content;
  max-width:min(280px,calc(100vw - 64px));
  padding:7px 9px;
  border:1px solid color-mix(in srgb,var(--border) 88%,transparent);
  border-radius:8px;
  background:color-mix(in srgb,var(--panel) 96%,#020617);
  box-shadow:0 8px 20px rgba(0,0,0,.28);
  color:var(--text);
  font-size:11px;
  line-height:1.35;
  white-space:normal;
}
#incomeAnalytics .monthly-summary-info:hover + .monthly-summary-tooltip,
#incomeAnalytics .monthly-summary-info:focus + .monthly-summary-tooltip,
#incomeAnalytics .monthly-summary-info[aria-expanded="true"] + .monthly-summary-tooltip{display:block;}

/* Desktop-only secondary text contrast for monthly analytics. */
@media (hover:hover) and (pointer:fine), (pointer:coarse) and (min-width:901px) and (max-width:1200px){
  #incomeAnalytics .monthly-summary-card-body > span,
  #incomeAnalytics .monthly-summary-card-label{
    color:color-mix(in srgb,var(--text) 72%,var(--text-muted));
    font-size:13px;
  }
  #incomeAnalytics .monthly-summary-card-body small{
    color:color-mix(in srgb,var(--text) 64%,var(--text-muted));
    font-size:12px;
  }
  #incomeAnalytics .monthly-category-name{
    color:color-mix(in srgb,var(--text) 72%,var(--text-muted));
    font-size:13px;
  }
}


/* Desktop monthly category cards: match annual compact cards. */
@media (hover:hover) and (pointer:fine), (pointer:coarse) and (min-width:901px) and (max-width:1200px){
  #incomeAnalytics.is-monthly .monthly-category-card{
    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(--monthly-category) 28%,var(--border)) !important;
    border-radius:16px !important;
    background:var(--panel-muted) !important;
    box-shadow:none !important;
  }

  #incomeAnalytics.is-monthly .monthly-category-card::after{
    width:120px !important;
    height:120px !important;
    right:-44px !important;
    bottom:-72px !important;
    background:var(--monthly-category-soft) !important;
  }

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

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

  #incomeAnalytics.is-monthly .monthly-category-name{
    grid-column:2 !important;
    grid-row:1 !important;
    align-self:center !important;
    min-width:0 !important;
    margin:0 !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;
  }

  #incomeAnalytics.is-monthly .monthly-category-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.is-monthly .monthly-category-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(--monthly-category) 30%,transparent) !important;
    border-radius:9px !important;
    background:color-mix(in srgb,var(--monthly-category) 9%,transparent) !important;
    color:var(--monthly-category) !important;
    font-size:12px !important;
    font-weight:650 !important;
    line-height:1 !important;
  }
}


/* Monthly desktop uses the same composition and visual hierarchy as annual analytics. */
@media (hover:hover) and (pointer:fine), (pointer:coarse) and (min-width:901px) and (max-width:1200px){
  #incomeAnalytics.is-monthly .monthly-analytics-head{
    display:none !important;
  }

  #incomeAnalytics.is-monthly .monthly-summary-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;
    margin:14px 0 14px !important;
  }

  #incomeAnalytics.is-monthly .monthly-summary-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;
    background:var(--panel) !important;
    box-shadow:none !important;
    box-sizing:border-box !important;
  }

  #incomeAnalytics.is-monthly .monthly-summary-card::after{
    width:120px !important;
    height:120px !important;
    right:-46px !important;
    bottom:-72px !important;
    opacity:.72 !important;
  }

  #incomeAnalytics.is-monthly .monthly-summary-best{
    grid-column:1 !important;
    grid-row:1 !important;
  }
  #incomeAnalytics.is-monthly #monthlyGrowthCard{
    grid-column:1 !important;
    grid-row:2 !important;
  }
  #incomeAnalytics.is-monthly .monthly-summary-average{
    grid-column:3 !important;
    grid-row:1 !important;
  }
  #incomeAnalytics.is-monthly #monthlyYearGrowthCard{
    grid-column:3 !important;
    grid-row:2 !important;
  }

  #incomeAnalytics.is-monthly .monthly-summary-card-icon{
    width:44px !important;
    height:44px !important;
    min-width:44px !important;
    margin:0 !important;
    border-radius:12px !important;
  }

  #incomeAnalytics.is-monthly .monthly-summary-card-body,
  #incomeAnalytics.is-monthly .monthly-summary-card .monthly-summary-card-body{
    width:calc(100% - 76px) !important;
    max-width:calc(100% - 76px) !important;
    margin:0 !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
  }

  #incomeAnalytics.is-monthly .monthly-summary-card-body > span,
  #incomeAnalytics.is-monthly .monthly-summary-card-label{
    width:auto !important;
    max-width:100% !important;
    margin:0 !important;
    color:var(--text-muted) !important;
    font-size:12px !important;
    line-height:1.25 !important;
    white-space:nowrap !important;
  }

  #incomeAnalytics.is-monthly .monthly-summary-card-body > strong{
    margin-top:8px !important;
    font-size:22px !important;
    line-height:1.05 !important;
    white-space:nowrap !important;
  }

  #incomeAnalytics.is-monthly .monthly-summary-card-body > b{
    margin-top:5px !important;
    font-size:17px !important;
    line-height:1.05 !important;
    white-space:nowrap !important;
  }

  #incomeAnalytics.is-monthly .monthly-summary-card-body small{
    max-width:100% !important;
    margin-top:5px !important;
    color:var(--text-muted) !important;
    font-size:10px !important;
    line-height:1.2 !important;
    white-space:nowrap !important;
  }

  #incomeAnalytics.is-monthly .monthly-best-category-row{
    margin-top:7px !important;
    gap:7px !important;
  }
  #incomeAnalytics.is-monthly .monthly-best-category-row strong{
    margin:0 !important;
    font-size:19px !important;
    line-height:1.05 !important;
    white-space:nowrap !important;
  }
  #incomeAnalytics.is-monthly .monthly-best-share{
    height:25px !important;
    min-width:42px !important;
    padding:0 8px !important;
    font-size:11px !important;
  }

  #incomeAnalytics.is-monthly .monthly-summary-info{
    display:none !important;
  }
  #incomeAnalytics.is-monthly .monthly-summary-tooltip{
    display:none !important;
  }

  #incomeAnalytics.is-monthly .monthly-summary-card{
    position:relative !important;
  }

  #incomeAnalytics.is-monthly .monthly-summary-card::before{
    content:"" !important;
    position:absolute !important;
    z-index:2 !important;
    right:16px !important;
    bottom:14px !important;
    width:62px !important;
    height:30px !important;
    opacity:.30 !important;
    pointer-events:none !important;
  }

  #incomeAnalytics.is-monthly .monthly-summary-best::before{
    color:var(--success) !important;
    background:
      linear-gradient(currentColor,currentColor) 0 100%/7px 25% no-repeat,
      linear-gradient(currentColor,currentColor) 13px 100%/7px 42% no-repeat,
      linear-gradient(currentColor,currentColor) 26px 100%/7px 56% no-repeat,
      linear-gradient(currentColor,currentColor) 39px 100%/7px 68% no-repeat,
      linear-gradient(currentColor,currentColor) 52px 100%/7px 82% no-repeat !important;
  }

  #incomeAnalytics.is-monthly .monthly-summary-average::before{
    color:color-mix(in srgb,#60a5fa 78%,var(--text-muted)) !important;
    background:
      linear-gradient(currentColor,currentColor) 0 100%/7px 48% no-repeat,
      linear-gradient(currentColor,currentColor) 13px 100%/7px 55% no-repeat,
      linear-gradient(currentColor,currentColor) 26px 100%/7px 50% no-repeat,
      linear-gradient(currentColor,currentColor) 39px 100%/7px 46% no-repeat,
      linear-gradient(currentColor,currentColor) 52px 100%/7px 53% no-repeat !important;
  }

  #incomeAnalytics.is-monthly .monthly-summary-growth::before{
    color:var(--danger) !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;
  }
  #incomeAnalytics.is-monthly .monthly-summary-growth.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.is-monthly .monthly-summary-growth.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;
  }

  #incomeAnalytics.is-monthly .monthly-total-card{
    grid-column:2 !important;
    grid-row:1 / span 2 !important;
    min-width:0 !important;
    height:238px !important;
    padding:12px !important;
    display:flex !important;
    flex-direction:column !important;
    gap:7px !important;
    overflow:hidden !important;
    border:1px solid color-mix(in srgb,var(--primary) 22%,var(--border)) !important;
    border-radius:20px !important;
    background:var(--panel) !important;
    box-shadow:none !important;
    box-sizing:border-box !important;
  }

  #incomeAnalytics.is-monthly .monthly-total-head{
    position:relative !important;
    min-height:42px !important;
  }

  #incomeAnalytics.is-monthly #monthlyHeroTotal{
    position:absolute !important;
    left:calc(50% - 10px) !important;
    top:0 !important;
    transform:translateX(-50%) !important;
    margin:0 !important;
    color:var(--text) !important;
    font-size:clamp(31px,2.7vw,38px) !important;
    font-weight:780 !important;
    line-height:1 !important;
    letter-spacing:-.04em !important;
    white-space:nowrap !important;
  }

  #incomeAnalytics.is-monthly .monthly-total-growth{
    position:absolute !important;
    top:0 !important;
    right:0 !important;
  }

  #incomeAnalytics.is-monthly #monthlyHeroGrowth{
    min-width:62px !important;
    padding:6px 9px !important;
    display:block !important;
    border:1px solid color-mix(in srgb,var(--success) 32%,transparent) !important;
    border-radius:9px !important;
    background:color-mix(in srgb,var(--success) 19%,transparent) !important;
    color:color-mix(in srgb,var(--success) 82%,white) !important;
    font-size:13px !important;
    font-weight:750 !important;
    line-height:1 !important;
    text-align:center !important;
    white-space:nowrap !important;
  }

  #incomeAnalytics.is-monthly #monthlyHeroGrowth.negative{
    border-color:color-mix(in srgb,var(--danger) 34%,transparent) !important;
    background:color-mix(in srgb,var(--danger) 18%,transparent) !important;
    color:color-mix(in srgb,var(--danger) 80%,white) !important;
  }

  #incomeAnalytics.is-monthly #monthlyHeroGrowth.neutral{
    border-color:color-mix(in srgb,var(--border) 88%,transparent) !important;
    background:color-mix(in srgb,var(--panel-muted) 82%,transparent) !important;
    color:var(--text-muted) !important;
  }

  #incomeAnalytics.is-monthly .monthly-total-bars{
    flex:1 1 auto !important;
    min-height:76px !important;
    padding:0 2px !important;
    display:grid !important;
    grid-template-columns:repeat(var(--monthly-days,31),minmax(0,1fr)) !important;
    align-items:end !important;
    gap:2px !important;
    border-bottom:1px solid color-mix(in srgb,var(--border) 82%,transparent) !important;
  }

  #incomeAnalytics.is-monthly .monthly-total-bar{
    width:100% !important;
    height:var(--bar-height,3%) !important;
    min-height:3px !important;
    border-radius:3px 3px 1px 1px !important;
    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 10px color-mix(in srgb,var(--primary) 16%,transparent) !important;
    opacity:.88 !important;
  }

  #incomeAnalytics.is-monthly .monthly-total-bar.is-zero{
    opacity:.16 !important;
  }

  #incomeAnalytics.is-monthly .monthly-total-days{
    flex:0 0 11px !important;
    display:grid !important;
    grid-template-columns:repeat(var(--monthly-days,31),minmax(0,1fr)) !important;
    gap:2px !important;
    color:var(--text-muted) !important;
    font-size:6px !important;
    line-height:1 !important;
    text-align:center !important;
  }

  #incomeAnalytics.is-monthly .monthly-total-meta{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:7px !important;
  }

  #incomeAnalytics.is-monthly .monthly-total-meta > span{
    min-width:0 !important;
    min-height:43px !important;
    padding:5px 8px !important;
    display:grid !important;
    grid-template-columns:25px minmax(0,1fr) !important;
    grid-template-rows:auto auto !important;
    column-gap:7px !important;
    align-items:center !important;
    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;
  }

  #incomeAnalytics.is-monthly .monthly-total-meta-icon{
    grid-column:1 !important;
    grid-row:1 / 3 !important;
    width:20px !important;
    height:20px !important;
    fill:none !important;
    stroke:#79b7ee !important;
    stroke-width:1.8 !important;
    stroke-linecap:round !important;
    stroke-linejoin:round !important;
  }

  #incomeAnalytics.is-monthly .monthly-total-meta b{
    grid-column:2 !important;
    grid-row:1 !important;
    align-self:end !important;
    color:var(--text) !important;
    font-size:15px !important;
    line-height:1 !important;
  }

  #incomeAnalytics.is-monthly .monthly-total-meta small{
    grid-column:2 !important;
    grid-row:2 !important;
    align-self:start !important;
    margin-top:2px !important;
    color:var(--text-muted) !important;
    font-size:7.5px !important;
    line-height:1.1 !important;
    white-space:nowrap !important;
  }

  #incomeAnalytics.is-monthly .monthly-category-panels{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:16px !important;
  }

  #incomeAnalytics.is-monthly .monthly-category-card{
    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-radius:16px !important;
    background:var(--panel) !important;
    box-shadow:none !important;
  }
}

@media(max-width:900px ) and (pointer:coarse){
  #incomeAnalytics .monthly-total-card{
    display:none !important;
  }
}


/* Monthly desktop parity with annual analytics: same metric/card scale. */
@media (hover:hover) and (pointer:fine), (pointer:coarse) and (min-width:901px) and (max-width:1200px){
  #incomeAnalytics.is-monthly .monthly-summary-card-body > span,
  #incomeAnalytics.is-monthly .monthly-summary-card-label{
    display:block !important;
    margin:0 0 4px !important;
    font-size:12px !important;
    line-height:1.25 !important;
  }

  #incomeAnalytics.is-monthly .monthly-best-category-row{
    margin-top:0 !important;
    gap:8px !important;
  }

  #incomeAnalytics.is-monthly .monthly-best-category-row strong{
    margin:0 !important;
    font-size:20px !important;
    font-weight:650 !important;
    line-height:1.1 !important;
  }

  
  #incomeAnalytics.is-monthly .monthly-best-share{
    min-width:44px !important;
    height:28px !important;
    padding:0 9px !important;
    border-radius:9px !important;
    font-size:12px !important;
    font-weight:650 !important;
  }

  #incomeAnalytics.is-monthly .monthly-summary-card::before{
    opacity:.38 !important;
  }

  #incomeAnalytics.is-monthly .monthly-category-card{
    min-height:104px !important;
    height:104px !important;
    padding:14px 16px !important;
    background:var(--panel) !important;
  }

  #incomeAnalytics.is-monthly .monthly-category-value{
    margin-top:4px !important;
    font-size:21px !important;
    font-weight:700 !important;
    line-height:1.08 !important;
  }

}


/* Monthly desktop visual scale correction against the annual reference. */
@media (hover:hover) and (pointer:fine), (pointer:coarse) and (min-width:901px) and (max-width:1200px){
  #incomeAnalytics.is-monthly .monthly-summary-cards{
    grid-template-rows:118px 118px !important;
    gap:14px !important;
  }

  #incomeAnalytics.is-monthly .monthly-summary-card{
    min-height:118px !important;
    height:118px !important;
    padding:15px 17px !important;
    grid-template-columns:46px minmax(0,1fr) !important;
    gap:13px !important;
  }

  #incomeAnalytics.is-monthly .monthly-summary-card-icon{
    width:46px !important;
    height:46px !important;
    min-width:46px !important;
  }

  #incomeAnalytics.is-monthly .monthly-summary-card-icon svg{
    width:24px !important;
    height:24px !important;
  }

  #incomeAnalytics.is-monthly .monthly-summary-card-body,
  #incomeAnalytics.is-monthly .monthly-summary-card .monthly-summary-card-body{
    width:calc(100% - 70px) !important;
    max-width:calc(100% - 70px) !important;
  }

  #incomeAnalytics.is-monthly .monthly-summary-card-body > span,
  #incomeAnalytics.is-monthly .monthly-summary-card-label{
    font-size:13px !important;
    line-height:1.25 !important;
  }

  #incomeAnalytics.is-monthly .monthly-best-category-row strong{
    font-size:22px !important;
  }

  #incomeAnalytics.is-monthly .monthly-summary-best .monthly-summary-card-body > b{
    font-size:24px !important;
  }

  #incomeAnalytics.is-monthly .monthly-summary-average .monthly-summary-card-body > strong,
  #incomeAnalytics.is-monthly #monthlyGrowthCard .monthly-summary-card-body > strong,
  #incomeAnalytics.is-monthly #monthlyYearGrowthCard .monthly-summary-card-body > strong{
    font-size:27px !important;
  }

  #incomeAnalytics.is-monthly .monthly-summary-card-body small{
    font-size:11px !important;
    line-height:1.25 !important;
  }

  #incomeAnalytics.is-monthly .monthly-best-share{
    min-width:46px !important;
    height:30px !important;
    padding:0 9px !important;
    font-size:13px !important;
  }

  #incomeAnalytics.is-monthly .monthly-total-card{
    height:250px !important;
    min-height:250px !important;
    max-height:250px !important;
  }

  #incomeAnalytics.is-monthly #monthlyHeroTotal{
    font-size:clamp(33px,2.9vw,40px) !important;
  }

  #incomeAnalytics.is-monthly #monthlyHeroGrowth{
    min-width:66px !important;
    padding:7px 10px !important;
    font-size:14px !important;
  }

  #incomeAnalytics.is-monthly .monthly-total-meta b{
    font-size:16px !important;
  }

  #incomeAnalytics.is-monthly .monthly-total-meta small{
    font-size:8px !important;
  }

  #incomeAnalytics.is-monthly .monthly-category-card{
    min-height:112px !important;
    height:112px !important;
    padding:16px 18px !important;
  }

  #incomeAnalytics.is-monthly .monthly-category-icon{
    width:36px !important;
    height:36px !important;
  }

  #incomeAnalytics.is-monthly .monthly-category-icon svg{
    width:19px !important;
    height:19px !important;
  }

  #incomeAnalytics.is-monthly .monthly-category-name{
    font-size:14px !important;
  }

  #incomeAnalytics.is-monthly .monthly-category-value{
    font-size:23px !important;
  }

  #incomeAnalytics.is-monthly .monthly-category-share{
    min-width:46px !important;
    height:30px !important;
    font-size:13px !important;
  }
}


/* Monthly best-category share badge: pin it to the card's top-right corner. */
@media (hover:hover) and (pointer:fine), (pointer:coarse) and (min-width:901px) and (max-width:1200px){
  #incomeAnalytics.is-monthly .monthly-summary-best .monthly-summary-card-body{
    position:static !important;
  }

  #incomeAnalytics.is-monthly .monthly-summary-best .monthly-best-share{
    position:absolute !important;
    z-index:3 !important;
    top:15px !important;
    right:17px !important;
    margin:0 !important;
  }
}


/* Monthly desktop: exact annual sizing and typography parity. */
@media (hover:hover) and (pointer:fine), (pointer:coarse) and (min-width:901px) and (max-width:1200px){
  #incomeAnalytics.is-monthly .monthly-summary-cards{
    grid-template-rows:112px 112px !important;
    gap:14px !important;
  }

  #incomeAnalytics.is-monthly .monthly-summary-card{
    min-height:112px !important;
    height:112px !important;
    padding:14px 16px !important;
    grid-template-columns:44px minmax(0,1fr) !important;
    gap:12px !important;
    border-radius:18px !important;
  }

  #incomeAnalytics.is-monthly .monthly-summary-card-icon{
    width:44px !important;
    height:44px !important;
    min-width:44px !important;
    border-radius:12px !important;
  }

  #incomeAnalytics.is-monthly .monthly-summary-card-icon svg{
    width:23px !important;
    height:23px !important;
  }

  #incomeAnalytics.is-monthly .monthly-summary-card-body,
  #incomeAnalytics.is-monthly .monthly-summary-card .monthly-summary-card-body{
    width:calc(100% - 72px) !important;
    max-width:calc(100% - 72px) !important;
  }

  #incomeAnalytics.is-monthly .monthly-summary-card-body > span,
  #incomeAnalytics.is-monthly .monthly-summary-card-label{
    margin:0 0 4px !important;
    font-size:12px !important;
    line-height:1.25 !important;
  }

  #incomeAnalytics.is-monthly .monthly-best-category-row strong{
    font-size:20px !important;
    font-weight:650 !important;
    line-height:1.1 !important;
  }

  #incomeAnalytics.is-monthly .monthly-summary-best .monthly-summary-card-body > b{
    margin:6px 0 0 !important;
    font-size:22px !important;
    font-weight:700 !important;
    line-height:1.05 !important;
  }

  #incomeAnalytics.is-monthly .monthly-summary-average .monthly-summary-card-body > strong,
  #incomeAnalytics.is-monthly #monthlyGrowthCard .monthly-summary-card-body > strong,
  #incomeAnalytics.is-monthly #monthlyYearGrowthCard .monthly-summary-card-body > strong{
    margin:5px 0 0 !important;
    font-size:25px !important;
    font-weight:700 !important;
    line-height:1.05 !important;
  }

  #incomeAnalytics.is-monthly .monthly-summary-card-body small{
    max-width:150px !important;
    margin:5px 0 0 !important;
    font-size:10px !important;
    line-height:1.25 !important;
  }

  #incomeAnalytics.is-monthly .monthly-best-share{
    min-width:44px !important;
    height:28px !important;
    padding:0 9px !important;
    border-radius:9px !important;
    font-size:12px !important;
    font-weight:650 !important;
    top:14px !important;
    right:16px !important;
  }

  #incomeAnalytics.is-monthly .monthly-total-card{
    min-height:238px !important;
    height:238px !important;
    max-height:238px !important;
    padding:12px !important;
    gap:7px !important;
    border-radius:20px !important;
  }

  #incomeAnalytics.is-monthly #monthlyHeroTotal{
    font-size:clamp(31px,2.7vw,38px) !important;
  }

  #incomeAnalytics.is-monthly #monthlyHeroGrowth{
    min-width:62px !important;
    padding:6px 9px !important;
    border-radius:9px !important;
    font-size:13px !important;
  }

  #incomeAnalytics.is-monthly .monthly-total-meta > span{
    min-height:43px !important;
    padding:5px 8px !important;
  }

  #incomeAnalytics.is-monthly .monthly-total-meta-icon{
    width:20px !important;
    height:20px !important;
  }

  #incomeAnalytics.is-monthly .monthly-total-meta b{
    font-size:15px !important;
  }

  #incomeAnalytics.is-monthly .monthly-total-meta small{
    margin-top:2px !important;
    font-size:7.5px !important;
  }

  #incomeAnalytics.is-monthly .monthly-category-panels{
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
    gap:10px !important;
  }

  #incomeAnalytics.is-monthly .monthly-category-card{
    min-height:104px !important;
    height:104px !important;
    padding:14px 16px !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;
    border-radius:16px !important;
  }

  #incomeAnalytics.is-monthly .monthly-category-icon{
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    border-radius:10px !important;
  }

  #incomeAnalytics.is-monthly .monthly-category-icon svg{
    width:18px !important;
    height:18px !important;
  }

  #incomeAnalytics.is-monthly .monthly-category-name{
    font-size:13px !important;
    font-weight:600 !important;
    line-height:1.2 !important;
  }

  #incomeAnalytics.is-monthly .monthly-category-value{
    margin:4px 0 0 !important;
    font-size:21px !important;
    font-weight:700 !important;
    line-height:1.08 !important;
  }

  #incomeAnalytics.is-monthly .monthly-category-share{
    min-width:44px !important;
    height:28px !important;
    padding:0 9px !important;
    border-radius:9px !important;
    font-size:12px !important;
    font-weight:650 !important;
  }
}


/* Monthly comparison cards: percentage badge in the top-right, matching Best category. */
@media (hover:hover) and (pointer:fine), (pointer:coarse) and (min-width:901px) and (max-width:1200px){
  #incomeAnalytics.is-monthly #monthlyGrowthCard,
  #incomeAnalytics.is-monthly #monthlyYearGrowthCard{
    position:relative !important;
  }

  #incomeAnalytics.is-monthly #monthlyGrowthValue,
  #incomeAnalytics.is-monthly #monthlyYearGrowthValue{
    position:absolute !important;
    z-index:3 !important;
    top:14px !important;
    right:16px !important;
    min-width:44px !important;
    height:28px !important;
    margin:0 !important;
    padding:0 9px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    border:1px solid color-mix(in srgb,var(--danger) 30%,transparent) !important;
    border-radius:9px !important;
    background:color-mix(in srgb,var(--danger) 9%,transparent) !important;
    color:var(--danger) !important;
    font-size:12px !important;
    font-weight:650 !important;
    line-height:1 !important;
    box-sizing:border-box !important;
    white-space:nowrap !important;
  }

  #incomeAnalytics.is-monthly #monthlyGrowthCard.positive #monthlyGrowthValue,
  #incomeAnalytics.is-monthly #monthlyYearGrowthCard.positive #monthlyYearGrowthValue{
    border-color:color-mix(in srgb,var(--success) 30%,transparent) !important;
    background:color-mix(in srgb,var(--success) 9%,transparent) !important;
    color:var(--success) !important;
  }

  #incomeAnalytics.is-monthly #monthlyGrowthCard.neutral #monthlyGrowthValue,
  #incomeAnalytics.is-monthly #monthlyYearGrowthCard.neutral #monthlyYearGrowthValue{
    border-color:color-mix(in srgb,var(--text-muted) 26%,transparent) !important;
    background:color-mix(in srgb,var(--text-muted) 8%,transparent) !important;
    color:var(--text-muted) !important;
  }

  #incomeAnalytics.is-monthly #monthlyGrowthCard .monthly-summary-card-body,
  #incomeAnalytics.is-monthly #monthlyYearGrowthCard .monthly-summary-card-body{
    padding-right:58px !important;
    box-sizing:border-box !important;
  }
}


/* Fix comparison percentage badges: anchor them to the card, not the text body. */
@media (hover:hover) and (pointer:fine), (pointer:coarse) and (min-width:901px) and (max-width:1200px){
  #incomeAnalytics.is-monthly #monthlyGrowthCard .monthly-summary-card-body,
  #incomeAnalytics.is-monthly #monthlyYearGrowthCard .monthly-summary-card-body{
    position:static !important;
    padding-right:58px !important;
  }

  #incomeAnalytics.is-monthly #monthlyGrowthCard .monthly-summary-card-label,
  #incomeAnalytics.is-monthly #monthlyYearGrowthCard .monthly-summary-card-label{
    max-width:calc(100% - 6px) !important;
  }

  #incomeAnalytics.is-monthly #monthlyGrowthValue,
  #incomeAnalytics.is-monthly #monthlyYearGrowthValue{
    top:14px !important;
    right:16px !important;
  }
}


/* Comparison badges live directly on the card so they cannot be clipped by the text body. */
@media (hover:hover) and (pointer:fine), (pointer:coarse) and (min-width:901px) and (max-width:1200px){
  #incomeAnalytics.is-monthly #monthlyGrowthCard .monthly-summary-card-body,
  #incomeAnalytics.is-monthly #monthlyYearGrowthCard .monthly-summary-card-body{
    position:relative !important;
    padding-right:0 !important;
  }

  #incomeAnalytics.is-monthly .monthly-corner-percent{
    position:absolute !important;
    z-index:4 !important;
    top:14px !important;
    right:16px !important;
    min-width:44px !important;
    height:28px !important;
    margin:0 !important;
    padding:0 9px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    border:1px solid color-mix(in srgb,var(--danger) 30%,transparent) !important;
    border-radius:9px !important;
    background:color-mix(in srgb,var(--danger) 9%,transparent) !important;
    color:var(--danger) !important;
    font-size:12px !important;
    font-weight:650 !important;
    line-height:1 !important;
    box-sizing:border-box !important;
    white-space:nowrap !important;
    visibility:visible !important;
    opacity:1 !important;
  }

  #incomeAnalytics.is-monthly #monthlyGrowthCard.positive .monthly-corner-percent,
  #incomeAnalytics.is-monthly #monthlyYearGrowthCard.positive .monthly-corner-percent{
    border-color:color-mix(in srgb,var(--success) 30%,transparent) !important;
    background:color-mix(in srgb,var(--success) 9%,transparent) !important;
    color:var(--success) !important;
  }

  #incomeAnalytics.is-monthly #monthlyGrowthCard.neutral .monthly-corner-percent,
  #incomeAnalytics.is-monthly #monthlyYearGrowthCard.neutral .monthly-corner-percent{
    border-color:color-mix(in srgb,var(--text-muted) 26%,transparent) !important;
    background:color-mix(in srgb,var(--text-muted) 8%,transparent) !important;
    color:var(--text-muted) !important;
  }

  #incomeAnalytics.is-monthly #monthlyGrowthCard .monthly-summary-card-label,
  #incomeAnalytics.is-monthly #monthlyYearGrowthCard .monthly-summary-card-label{
    max-width:calc(100% - 72px) !important;
  }
}


/* Prevent monthly comparison badges from flashing over the auth/loading background on refresh. */
body.qp-auth-checking #incomeAnalytics .monthly-corner-percent,
body.qp-auth-locked #incomeAnalytics .monthly-corner-percent{
  display:none !important;
  visibility:hidden !important;
}


/* Monthly comparison difference: same emphasis as the amount in Best category. */
@media (hover:hover) and (pointer:fine), (pointer:coarse) and (min-width:901px) and (max-width:1200px){
  #incomeAnalytics.is-monthly #monthlyGrowthNote,
  #incomeAnalytics.is-monthly #monthlyYearGrowthNote{
    max-width:none !important;
    margin:6px 0 0 !important;
    color:var(--text) !important;
    font-size:22px !important;
    font-weight:700 !important;
    line-height:1.05 !important;
    letter-spacing:-.02em !important;
    white-space:nowrap !important;
    font-variant-numeric:tabular-nums !important;
  }
}


/* Monthly comparison amount: custom trend icon that matches the card style. */
@media (hover:hover) and (pointer:fine), (pointer:coarse) and (min-width:901px) and (max-width:1200px){
  #incomeAnalytics.is-monthly #monthlyGrowthNote,
  #incomeAnalytics.is-monthly #monthlyYearGrowthNote{
    display:flex !important;
    align-items:center !important;
    gap:7px !important;
  }

  #incomeAnalytics.is-monthly #monthlyGrowthNote::before,
  #incomeAnalytics.is-monthly #monthlyYearGrowthNote::before{
    content:"" !important;
    width:18px !important;
    height:18px !important;
    flex:0 0 18px !important;
    background:var(--text-muted) !important;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 7l6 6 4-4 4 4M14 13h5V8' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat !important;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 7l6 6 4-4 4 4M14 13h5V8' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat !important;
  }

  #incomeAnalytics.is-monthly #monthlyGrowthCard.negative #monthlyGrowthNote::before,
  #incomeAnalytics.is-monthly #monthlyYearGrowthCard.negative #monthlyYearGrowthNote::before{
    background:var(--danger) !important;
  }

  #incomeAnalytics.is-monthly #monthlyGrowthCard.positive #monthlyGrowthNote::before,
  #incomeAnalytics.is-monthly #monthlyYearGrowthCard.positive #monthlyYearGrowthNote::before{
    background:var(--success) !important;
    transform:scaleY(-1) !important;
  }

  #incomeAnalytics.is-monthly #monthlyGrowthCard.neutral #monthlyGrowthNote::before,
  #incomeAnalytics.is-monthly #monthlyYearGrowthCard.neutral #monthlyYearGrowthNote::before{
    width:16px !important;
    height:2px !important;
    flex-basis:16px !important;
    -webkit-mask:none !important;
    mask:none !important;
    border-radius:999px !important;
    background:var(--text-muted) !important;
  }
}


/* Monthly comparison trend icon: clean arrow placed after the amount. */
@media (hover:hover) and (pointer:fine), (pointer:coarse) and (min-width:901px) and (max-width:1200px){
  #incomeAnalytics.is-monthly #monthlyGrowthNote::before,
  #incomeAnalytics.is-monthly #monthlyYearGrowthNote::before{
    content:none !important;
    display:none !important;
  }

  #incomeAnalytics.is-monthly #monthlyGrowthNote::after,
  #incomeAnalytics.is-monthly #monthlyYearGrowthNote::after{
    content:"" !important;
    width:18px !important;
    height:18px !important;
    flex:0 0 18px !important;
    margin-left:1px !important;
    background:var(--text-muted) !important;
    -webkit-mask:center/contain no-repeat !important;
    mask:center/contain no-repeat !important;
  }

  #incomeAnalytics.is-monthly #monthlyGrowthCard.negative #monthlyGrowthNote::after,
  #incomeAnalytics.is-monthly #monthlyYearGrowthCard.negative #monthlyYearGrowthNote::after{
    background:var(--danger) !important;
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 7l6 6 4-4 6 6M15 15h5v-5' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 7l6 6 4-4 6 6M15 15h5v-5' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  }

  #incomeAnalytics.is-monthly #monthlyGrowthCard.positive #monthlyGrowthNote::after,
  #incomeAnalytics.is-monthly #monthlyYearGrowthCard.positive #monthlyYearGrowthNote::after{
    background:var(--success) !important;
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 17l6-6 4 4 6-6M15 9h5v5' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 17l6-6 4 4 6-6M15 9h5v5' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  }

  #incomeAnalytics.is-monthly #monthlyGrowthCard.neutral #monthlyGrowthNote::after,
  #incomeAnalytics.is-monthly #monthlyYearGrowthCard.neutral #monthlyYearGrowthNote::after{
    width:16px !important;
    height:2px !important;
    flex-basis:16px !important;
    border-radius:999px !important;
    background:var(--text-muted) !important;
    -webkit-mask:none !important;
    mask:none !important;
    transform:translateY(4px) !important;
  }
}


/* Desktop monthly hero: "Доходные всплески" instead of sparse day bars. */
@media (hover:hover) and (pointer:fine), (pointer:coarse) and (min-width:901px) and (max-width:1200px){
  #incomeAnalytics.is-monthly .monthly-total-bars.monthly-income-spikes{
    position:relative !important;
    flex:1 1 auto !important;
    min-height:86px !important;
    padding:0 3px !important;
    display:block !important;
    overflow:visible !important;
    border-bottom:1px solid color-mix(in srgb,var(--border) 82%,transparent) !important;
    background:
      linear-gradient(to bottom,
        transparent 32%,
        color-mix(in srgb,var(--border) 35%,transparent) 32.5%,
        transparent 33%,
        transparent 64%,
        color-mix(in srgb,var(--border) 26%,transparent) 64.5%,
        transparent 65%) !important;
  }

  #incomeAnalytics.is-monthly .monthly-income-spikes .monthly-spikes-svg{
    position:absolute !important;
    inset:0 3px 0 3px !important;
    width:calc(100% - 6px) !important;
    height:100% !important;
    overflow:visible !important;
    pointer-events:none !important;
  }

  #incomeAnalytics.is-monthly .monthly-income-spikes .monthly-spikes-area{
    fill:color-mix(in srgb,var(--primary) 12%,transparent) !important;
  }

  #incomeAnalytics.is-monthly .monthly-income-spikes .monthly-spikes-line{
    fill:none !important;
    stroke:color-mix(in srgb,var(--primary) 84%,white) !important;
    stroke-width:2.2 !important;
    vector-effect:non-scaling-stroke !important;
    filter:drop-shadow(0 0 5px color-mix(in srgb,var(--primary) 24%,transparent)) !important;
  }

  #incomeAnalytics.is-monthly .monthly-income-spikes .monthly-spikes-guide{
    stroke:color-mix(in srgb,var(--primary) 48%,transparent) !important;
    stroke-width:1 !important;
    stroke-dasharray:2.5 3.5 !important;
    vector-effect:non-scaling-stroke !important;
  }

  #incomeAnalytics.is-monthly .monthly-income-spikes .monthly-spike-marker{
    position:absolute !important;
    left:var(--spike-x) !important;
    top:var(--spike-y) !important;
    z-index:2 !important;
    width:7px !important;
    height:7px !important;
    border:1px solid color-mix(in srgb,var(--primary) 66%,white) !important;
    border-radius:50% !important;
    background:var(--primary) !important;
    box-shadow:0 0 0 2px color-mix(in srgb,var(--panel) 86%,transparent),0 0 8px color-mix(in srgb,var(--primary) 42%,transparent) !important;
    transform:translate(-50%,-50%) !important;
  }

  #incomeAnalytics.is-monthly .monthly-income-spikes .monthly-spike-marker.is-highlight{
    width:9px !important;
    height:9px !important;
  }

  #incomeAnalytics.is-monthly .monthly-income-spikes .monthly-spike-label{
    position:absolute !important;
    left:50% !important;
    bottom:11px !important;
    display:grid !important;
    justify-items:center !important;
    gap:1px !important;
    transform:translateX(-50%) !important;
    white-space:nowrap !important;
    pointer-events:none !important;
  }

  #incomeAnalytics.is-monthly .monthly-income-spikes .monthly-spike-marker.edge-left .monthly-spike-label{
    transform:translateX(-12%) !important;
  }

  #incomeAnalytics.is-monthly .monthly-income-spikes .monthly-spike-marker.edge-right .monthly-spike-label{
    transform:translateX(-88%) !important;
  }

  #incomeAnalytics.is-monthly .monthly-income-spikes .monthly-spike-label b{
    color:var(--text) !important;
    font-size:9px !important;
    font-weight:700 !important;
    line-height:1.05 !important;
    text-shadow:0 1px 3px var(--panel),0 0 5px var(--panel) !important;
  }

  #incomeAnalytics.is-monthly .monthly-income-spikes .monthly-spike-label small{
    color:var(--text-muted) !important;
    font-size:7px !important;
    line-height:1 !important;
    text-shadow:0 1px 3px var(--panel),0 0 5px var(--panel) !important;
  }
}


/* Hide comparison percentage badge completely when there is no percentage data. */
#incomeAnalytics.is-monthly .monthly-corner-percent.is-empty{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
}