/* DEV79: reserve growth badge space only if hero amount would overlap it.
   Applies to both desktop and touch/mobile layouts; does not touch other cards. */
#incomeAnalytics:not(.is-monthly) .annual-total-desktop-head.qp-hero-avoid-growth > .annual-total-copy{
  position:absolute!important;
  top:0!important;
  left:0!important;
  right:auto!important;
  width:calc(100% - var(--qp-hero-growth-reserve, 0px))!important;
  max-width:calc(100% - var(--qp-hero-growth-reserve, 0px))!important;
  min-width:0!important;
  margin:0!important;
  transform:none!important;
  align-items:center!important;
  text-align:center!important;
  box-sizing:border-box!important;
}
#incomeAnalytics:not(.is-monthly) .annual-total-desktop-head.qp-hero-avoid-growth > .annual-total-copy > #annualHeroTotal{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  margin:0!important;
  overflow:hidden!important;
  text-align:center!important;
  text-overflow:clip!important;
  white-space:nowrap!important;
  transform:none!important;
  box-sizing:border-box!important;
}
#incomeAnalytics.is-monthly .monthly-total-head.qp-hero-avoid-growth > #monthlyHeroTotal{
  position:absolute!important;
  top:0!important;
  left:0!important;
  right:auto!important;
  display:block!important;
  width:calc(100% - var(--qp-hero-growth-reserve, 0px))!important;
  max-width:calc(100% - var(--qp-hero-growth-reserve, 0px))!important;
  min-width:0!important;
  margin:0!important;
  overflow:hidden!important;
  text-align:center!important;
  text-overflow:clip!important;
  white-space:nowrap!important;
  transform:none!important;
  box-sizing:border-box!important;
}

/* Desktop account settings: renewal controls fill the row directly below the access button. */
@media (hover:hover) and (pointer:fine), (pointer:coarse) and (min-width:901px) and (max-width:1200px){
  #incomeAnalytics .analytics-settings-host #settings[data-settings-tab="data"] #qpBillingSettings > div[style*="display:flex"]:not(#qpBillingDeleteWrap){
    grid-column:1 / -1 !important;
    grid-row:5 !important;
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px !important;
    width:100% !important;
    margin:0 !important;
  }

  #incomeAnalytics .analytics-settings-host #settings[data-settings-tab="data"] #qpBillingSettings > div[style*="display:flex"]:not(#qpBillingDeleteWrap) > #qpBillingDisableRenew,
  #incomeAnalytics .analytics-settings-host #settings[data-settings-tab="data"] #qpBillingSettings > div[style*="display:flex"]:not(#qpBillingDeleteWrap) > #qpBillingUnlinkCard{
    grid-row:auto !important;
    grid-column:auto !important;
    order:initial !important;
  }

  /* Visually merge the email and subscription term into one account box. */
  #incomeAnalytics .analytics-settings-host #settings[data-settings-tab="data"] #qpAccountCard .qp-account-email{
    border-bottom:0 !important;
    border-radius:12px 12px 0 0 !important;
    padding-bottom:7px !important;
    font-family:inherit !important;
    font-size:14px !important;
    font-weight:400 !important;
    line-height:1.35 !important;
  }

  #incomeAnalytics .analytics-settings-host #settings[data-settings-tab="data"] #qpBillingTerm{
    position:relative !important;
    z-index:1 !important;
    margin-top:-10px !important;
    padding:0 14px 12px !important;
    border:1px solid var(--border) !important;
    border-top:0 !important;
    border-radius:0 0 12px 12px !important;
    background:var(--panel-muted) !important;
    color:var(--text-muted) !important;
    box-sizing:border-box !important;
    font-family:inherit !important;
    font-size:14px !important;
    font-weight:400 !important;
    line-height:1.35 !important;
  }
}

/* Mobile account settings: keep the subscription term inside the same visual box as the email. */
@media (max-width:900px) and (pointer:coarse), (orientation:landscape) and (max-height:560px) and (pointer:coarse){
  #incomeAnalytics .analytics-settings-host #settings[data-settings-tab="data"] #qpAccountCard .qp-account-email{
    border-bottom:0 !important;
    border-radius:12px 12px 0 0 !important;
    padding:12px 14px 7px !important;
    font-family:inherit !important;
    font-size:14px !important;
    font-weight:400 !important;
    line-height:1.35 !important;
    text-indent:0 !important;
  }

  #incomeAnalytics .analytics-settings-host #settings[data-settings-tab="data"] #qpBillingTerm{
    position:relative !important;
    z-index:1 !important;
    width:100% !important;
    margin-top:-10px !important;
    padding:0 14px 12px !important;
    border:1px solid var(--border) !important;
    border-top:0 !important;
    border-radius:0 0 12px 12px !important;
    background:var(--panel-muted) !important;
    color:var(--text-muted) !important;
    box-sizing:border-box !important;
    font-family:inherit !important;
    font-size:14px !important;
    font-weight:400 !important;
    line-height:1.35 !important;
    text-indent:0 !important;
  }
}

/* DEV328: month bubbles use the same translucency as year bubbles. */
#incomeAnalytics.is-monthly .monthly-summary-card::after{
  background:color-mix(in srgb,var(--monthly-accent) 8%,transparent) !important;
  opacity:1 !important;
}
#incomeAnalytics.is-monthly .monthly-category-card::after{
  background:color-mix(in srgb,var(--monthly-category) 8%,transparent) !important;
  opacity:1 !important;
}

/* Percentage badges always stay above decorative bubbles. */
#incomeAnalytics .monthly-best-share,
#incomeAnalytics .monthly-corner-percent,
#incomeAnalytics .monthly-category-share,
#incomeAnalytics .annual-month-share,
#incomeAnalytics .annual-year-compare-percent,
#incomeAnalytics .analytics-category-panel-share{
  z-index:6 !important;
}

/* DEV338: bring desktop settings into the same calm glass system as the dashboard. */
@media (hover:hover) and (pointer:fine), (pointer:coarse) and (min-width:901px) and (max-width:1200px){
  #income #incomeAnalytics.is-settings-open{
    background:
      radial-gradient(92% 135% at 100% 0,
        color-mix(in srgb,var(--primary) 8%,transparent),
        transparent 62%),
      linear-gradient(145deg,
        color-mix(in srgb,var(--panel) 91%,transparent),
        color-mix(in srgb,#07111e 94%,transparent)) !important;
    border-color:color-mix(in srgb,var(--primary) 20%,var(--border)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.028),
      0 18px 44px rgba(0,0,0,.20) !important;
  }

  #incomeAnalytics.is-settings-open .analytics-settings-host{
    background:transparent !important;
  }

  #incomeAnalytics .analytics-settings-host .qp-settings-tabs{
    border-color:color-mix(in srgb,var(--border) 78%,#7da9df 22%) !important;
    background:
      linear-gradient(145deg,
        color-mix(in srgb,#10233b 68%,transparent),
        color-mix(in srgb,#08111d 80%,transparent)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.022),
      0 5px 14px rgba(0,0,0,.10) !important;
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
  }

  #incomeAnalytics .analytics-settings-host .qp-settings-tab{
    border:1px solid transparent !important;
    background:transparent !important;
    color:color-mix(in srgb,var(--text-muted) 92%,white 8%) !important;
    box-shadow:none !important;
    transform:none !important;
  }

  #incomeAnalytics .analytics-settings-host .qp-settings-tab:hover:not(.active){
    color:var(--text) !important;
    border-color:color-mix(in srgb,var(--primary) 18%,transparent) !important;
    background:color-mix(in srgb,var(--primary) 6%,transparent) !important;
  }

  #incomeAnalytics .analytics-settings-host .qp-settings-tab.active{
    color:var(--text) !important;
    border-color:color-mix(in srgb,var(--primary) 48%,var(--border)) !important;
    background:
      linear-gradient(145deg,
        color-mix(in srgb,var(--primary) 14%,var(--panel-muted)),
        color-mix(in srgb,var(--primary) 8%,var(--panel))) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.035),
      0 4px 12px color-mix(in srgb,var(--primary) 10%,transparent) !important;
  }

  #incomeAnalytics .analytics-settings-host #settings.analytics-inline-settings > .settings-card{
    border-color:color-mix(in srgb,var(--border) 84%,#7da9df 16%) !important;
    background:
      linear-gradient(150deg,
        color-mix(in srgb,#0b1727 86%,transparent),
        color-mix(in srgb,#070e18 91%,transparent)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.018),
      0 8px 20px rgba(0,0,0,.12) !important;
    backdrop-filter:blur(7px);
    -webkit-backdrop-filter:blur(7px);
  }

  #incomeAnalytics .analytics-settings-host #settings .settings-card input:not([type="color"]):not([type="file"]):not([type="checkbox"]):not([type="radio"]),
  #incomeAnalytics .analytics-settings-host #settings .settings-card select,
  #incomeAnalytics .analytics-settings-host #settings .settings-card textarea,
  #incomeAnalytics .analytics-settings-host #settings .settings-report-period,
  #incomeAnalytics .analytics-settings-host #settings #qpAccountCard .qp-account-email,
  #incomeAnalytics .analytics-settings-host #settings #qpBillingTerm{
    border-color:color-mix(in srgb,var(--border) 88%,#7da9df 12%) !important;
    background:
      linear-gradient(145deg,
        color-mix(in srgb,var(--panel) 70%,transparent),
        color-mix(in srgb,#07111e 82%,transparent)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.014),
      0 2px 8px rgba(0,0,0,.05) !important;
  }

  #incomeAnalytics .analytics-settings-host #settings .settings-card input:not([type="color"]):not([type="file"]):focus,
  #incomeAnalytics .analytics-settings-host #settings .settings-card select:focus,
  #incomeAnalytics .analytics-settings-host #settings .settings-card textarea:focus{
    border-color:var(--primary) !important;
    outline:none !important;
    box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 24%,transparent) !important;
  }

  #incomeAnalytics .analytics-settings-host #settings[data-settings-tab="categories"] .qp-category-item{
    border-color:color-mix(in srgb,var(--border) 86%,#7da9df 14%) !important;
    background:
      linear-gradient(150deg,
        color-mix(in srgb,#0b1727 80%,transparent),
        color-mix(in srgb,#070e18 88%,transparent)) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.015) !important;
  }

  #incomeAnalytics .analytics-settings-host #settings[data-settings-tab="categories"] .qp-category-item:hover{
    border-color:color-mix(in srgb,var(--category-color) 38%,var(--border)) !important;
    background:
      linear-gradient(150deg,
        color-mix(in srgb,var(--category-color) 6%,#0b1727),
        color-mix(in srgb,#070e18 90%,transparent)) !important;
  }

  #incomeAnalytics .analytics-settings-host #settings .settings-card .btn-secondary:not(#qpAuthDeleteAccountBtn):not(#clearIncomeDataBtn),
  #incomeAnalytics .analytics-settings-host #settings #qpBillingDisableRenew,
  #incomeAnalytics .analytics-settings-host #settings #qpBillingUnlinkCard{
    border-color:color-mix(in srgb,var(--border) 82%,#7da9df 18%) !important;
    background:
      linear-gradient(145deg,
        color-mix(in srgb,#10233b 62%,transparent),
        color-mix(in srgb,#08111d 76%,transparent)) !important;
    color:var(--text) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.02),
      0 4px 12px rgba(0,0,0,.07) !important;
    transform:none !important;
  }

  #incomeAnalytics .analytics-settings-host #settings .settings-card .btn-secondary:not(#qpAuthDeleteAccountBtn):not(#clearIncomeDataBtn):hover,
  #incomeAnalytics .analytics-settings-host #settings #qpBillingDisableRenew:hover,
  #incomeAnalytics .analytics-settings-host #settings #qpBillingUnlinkCard:hover{
    border-color:color-mix(in srgb,var(--primary) 32%,var(--border)) !important;
    background:color-mix(in srgb,var(--primary) 7%,#0b1727) !important;
  }

  #incomeAnalytics .analytics-settings-host #settings #exportDataBtn,
  #incomeAnalytics .analytics-settings-host #settings #importDataBtn,
  #incomeAnalytics .analytics-settings-host #settings #printIncomeReportBtn,
  #incomeAnalytics .analytics-settings-host #settings[data-settings-tab="categories"] .qp-category-add button{
    border-color:color-mix(in srgb,var(--primary) 70%,white 8%) !important;
    background:
      linear-gradient(145deg,
        color-mix(in srgb,var(--primary) 88%,transparent),
        color-mix(in srgb,var(--primary) 72%,#0b1727 28%)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.09),
      0 6px 16px color-mix(in srgb,var(--primary) 14%,transparent) !important;
  }

  #incomeAnalytics .analytics-settings-host #settings #qpAuthDeleteAccountBtn,
  #incomeAnalytics .analytics-settings-host #settings #clearIncomeDataBtn{
    border-color:color-mix(in srgb,var(--danger) 42%,var(--border)) !important;
    background:color-mix(in srgb,var(--danger) 8%,transparent) !important;
    color:var(--danger) !important;
    box-shadow:none !important;
  }
}

/* Fine-pointer data deletion uses the existing export/import presentation. */
@media (pointer:fine){
  #settings #clearIncomeDataBtn{
    background:var(--primary);
    color:#fff;
    border-color:transparent;
  }
  #settings #clearIncomeDataBtn:hover{background:var(--primary)}

  #incomeAnalytics .analytics-settings-host #settings #clearIncomeDataBtn{
    border-color:color-mix(in srgb,var(--border) 82%,#7da9df 18%) !important;
    background:
      linear-gradient(145deg,
        color-mix(in srgb,#10233b 62%,transparent),
        color-mix(in srgb,#08111d 76%,transparent)) !important;
    color:var(--text) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.02),
      0 4px 12px rgba(0,0,0,.07) !important;
    transform:none !important;
  }
  #incomeAnalytics .analytics-settings-host #settings #clearIncomeDataBtn:hover{
    border-color:color-mix(in srgb,var(--primary) 32%,var(--border)) !important;
    background:color-mix(in srgb,var(--primary) 7%,#0b1727) !important;
    filter:brightness(1.04) !important;
  }
}

/* DEV339: final desktop visual consistency pass; presentation only. */
@media (hover:hover) and (pointer:fine), (pointer:coarse) and (min-width:901px) and (max-width:1200px){
  #income .income-top,
  #income #incomeForm,
  #income #incomeAnalytics{
    border-color:color-mix(in srgb,var(--primary) 20%,var(--border)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.028),
      0 16px 38px rgba(0,0,0,.19) !important;
  }

  #income #incomeAnalytics:not(.is-settings-open) .analytics-card,
  #income #incomeAnalytics:not(.is-settings-open) .annual-total-card,
  #income #incomeAnalytics:not(.is-settings-open) .analytics-category-panel,
  #income #incomeAnalytics:not(.is-settings-open) .monthly-summary-card,
  #income #incomeAnalytics:not(.is-settings-open) .monthly-total-card,
  #income #incomeAnalytics:not(.is-settings-open) .monthly-category-card,
  #income .income-recent-card,
  #income .income-recent-history-panel #incomeList,
  #incomeAnalytics .analytics-settings-host #settings.analytics-inline-settings > .settings-card{
    border-color:color-mix(in srgb,var(--border) 84%,#7da9df 16%) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.018),
      0 5px 14px rgba(0,0,0,.10) !important;
    transition:border-color .15s ease,background .15s ease,box-shadow .15s ease !important;
  }

  #income .income-top .month-switcher,
  #income .income-top .income-chart-year-switcher,
  #income #incomeAnalytics .analytics-mode-tabs,
  #income #incomeAnalytics .analytics-settings-toggle,
  #income .income-recent-toggle,
  #income .income-recent-history,
  #income .income-recent-page-btn,
  #income .income-history-report-btn,
  #incomeAnalytics .analytics-settings-host .qp-settings-tabs{
    border-color:color-mix(in srgb,var(--border) 80%,#7da9df 20%) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.022),
      0 4px 12px rgba(0,0,0,.08) !important;
    transition:border-color .15s ease,background .15s ease,box-shadow .15s ease,color .15s ease !important;
  }

  #income #incomeAnalytics:not(.is-settings-open) .analytics-category-panel:hover,
  #income #incomeAnalytics:not(.is-settings-open) .monthly-category-card:hover,
  #income .income-recent-card:hover{
    border-color:color-mix(in srgb,var(--primary) 30%,var(--border)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.022),
      0 6px 16px rgba(0,0,0,.11) !important;
  }

  #income .income-top .add-income-btn:hover,
  #income #incomeForm .save-btn:hover,
  #incomeAnalytics .analytics-settings-host #settings #exportDataBtn:hover,
  #incomeAnalytics .analytics-settings-host #settings #importDataBtn:hover,
  #incomeAnalytics .analytics-settings-host #settings #printIncomeReportBtn:hover,
  #incomeAnalytics .analytics-settings-host #settings[data-settings-tab="categories"] .qp-category-add button:hover{
    filter:brightness(1.04) !important;
  }
}