@import url("./mobile-base.css?v=dev-2026.09.28.77");
@import url("./mobile-swipe-actions.css?v=dev-2026.09.27.47");
@import url("./oauth-brand.css?v=dev-2026.09.27.47");

/* Mobile touch feedback: suppress Samsung/Chromium tap overlay without changing click handlers. */
@media(max-width:900px) and (pointer:coarse), (orientation:landscape) and (max-height:560px) and (pointer:coarse){
  #income,
  #income *{
    -webkit-tap-highlight-color:transparent !important;
  }
}

#settings .qp-category-delete{flex:0 0 44px !important;width:44px !important;min-width:44px !important;height:44px !important;padding:0 !important;border:0 !important;border-radius:12px !important;background:transparent !important;box-shadow:none !important;color:rgba(239,68,68,.58) !important;font-size:17px !important;font-weight:500 !important;line-height:1 !important;cursor:pointer !important;-webkit-tap-highlight-color:transparent;}
#settings .qp-category-delete:hover,
#settings .qp-category-delete:active{background:rgba(239,68,68,.07) !important;border-color:transparent !important;color:rgba(239,68,68,.88) !important;}
#settings .qp-category-add{grid-template-columns:minmax(0,1fr) auto !important;align-items:center !important;}
#settings .qp-category-add button{width:56px !important;min-width:56px !important;height:52px !important;padding:0 !important;border:0 !important;border-radius:14px !important;background:var(--primary) !important;color:#fff !important;font-size:28px !important;font-weight:500 !important;line-height:1 !important;cursor:pointer !important;box-shadow:0 9px 22px color-mix(in srgb,var(--primary) 38%,transparent) !important;-webkit-tap-highlight-color:transparent;}
#settings .qp-category-add button:hover{background:var(--primary) !important;filter:brightness(1.06) !important;}
#settings .qp-category-add button:active{box-shadow:0 5px 12px color-mix(in srgb,var(--primary) 30%,transparent) !important;}
#settings > .settings-card:not([style]) > .nav-label-mode-options{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}

/* Standard background: exact auth-screen background, adapted to the site canvas. */
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(max-width:900px) and (pointer:coarse), (orientation:landscape) and (max-height:560px) and (pointer:coarse){
  html[data-theme="dark"] body.qp-bg-standard::before{
    width:150vw;
    height:78vw;
    left:-64vw;
    bottom:-10vw;
    opacity:.82;
  }
  html[data-theme="dark"] body.qp-bg-standard::after{
    width:160vw;
    height:72vw;
    right:-72vw;
    top:-8vw;
    opacity:.80;
  }
}
@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;}
}


/* Mobile: carry the approved desktop analytics/recent-income visual system over
   without changing mobile data logic, navigation, or history swipe actions. */
@media(max-width:900px) and (pointer:coarse), (orientation:landscape) and (max-height:560px) and (pointer:coarse){

  /* Recent incomes: desktop-style compact cards, two per row on mobile. */
  #income .income-recent-card{
    min-height:92px !important;
    padding:12px !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    grid-template-areas:
      "date category"
      "amount amount" !important;
    column-gap:8px !important;
    row-gap:8px !important;
    border:1px solid var(--border) !important;
    border-radius:16px !important;
    background:var(--panel) !important;
    box-shadow:var(--shadow-sm) !important;
  }
  #income .income-recent-date{
    margin-left:6px !important;
    font-size:14px !important;
    line-height:1.2 !important;
    white-space:nowrap !important;
  }
  #income .income-recent-amount{
    margin-left:6px !important;
    font-size:24px !important;
    line-height:1.08 !important;
    white-space:nowrap !important;
  }
  #income .income-recent-category{
    justify-self:end !important;
    max-width:88px !important;
    padding:5px 8px !important;
    font-size:11px !important;
  }

  /* Monthly analytics cards: same horizontal desktop composition. */
  #incomeAnalytics .monthly-summary-cards{
    grid-template-columns:1fr !important;
    gap:12px !important;
    margin-top:12px !important;
  }
  #incomeAnalytics .monthly-summary-card{
    min-height:132px !important;
    padding:16px !important;
    display:grid !important;
    grid-template-columns:50px minmax(0,1fr) !important;
    align-items:center !important;
    column-gap:14px !important;
    border-radius:18px !important;
  }
  #incomeAnalytics .monthly-summary-card .monthly-summary-card-icon{
    width:50px !important;
    height:50px !important;
    min-width:50px !important;
    margin:0 !important;
    border-radius:14px !important;
  }
  #incomeAnalytics .monthly-summary-card .monthly-summary-card-icon svg{
    width:26px !important;
    height:26px !important;
  }
  #incomeAnalytics .monthly-summary-card .monthly-summary-card-body{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
  }

  #incomeAnalytics .monthly-summary-best .monthly-summary-card-body{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    grid-template-areas:
      "label amount"
      "category amount" !important;
    column-gap:12px !important;
    row-gap:6px !important;
    align-items:center !important;
  }
  #incomeAnalytics .monthly-summary-best .monthly-summary-card-body > span{
    grid-area:label !important;
    margin:0 !important;
  }
  #incomeAnalytics .monthly-summary-best .monthly-best-category-row{
    grid-area:category !important;
    margin:0 !important;
  }
  #incomeAnalytics .monthly-summary-best .monthly-summary-card-body > b{
    grid-area:amount !important;
    align-self:center !important;
    justify-self:end !important;
    margin:0 !important;
    font-size:30px !important;
    line-height:1 !important;
    white-space:nowrap !important;
  }

  #incomeAnalytics .monthly-summary-average .monthly-summary-card-body,
  #incomeAnalytics .monthly-summary-growth .monthly-summary-card-body{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    grid-template-areas:
      "label value"
      "note value" !important;
    column-gap:12px !important;
    row-gap:7px !important;
    align-items:center !important;
  }
  #incomeAnalytics .monthly-summary-average .monthly-summary-card-body > span,
  #incomeAnalytics .monthly-summary-growth .monthly-summary-card-body > .monthly-summary-card-label{
    grid-area:label !important;
    margin:0 !important;
  }
  #incomeAnalytics .monthly-summary-average .monthly-summary-card-body > small,
  #incomeAnalytics .monthly-summary-growth .monthly-summary-card-body > small{
    grid-area:note !important;
    max-width:none !important;
    margin:0 !important;
  }
  #incomeAnalytics .monthly-summary-average .monthly-summary-card-body > strong,
  #incomeAnalytics .monthly-summary-growth .monthly-summary-card-body > strong{
    grid-area:value !important;
    align-self:center !important;
    justify-self:end !important;
    margin:0 !important;
    font-size:30px !important;
    line-height:1 !important;
    white-space:nowrap !important;
  }

  /* Keep the info icon attached to its label on narrow screens. */
  #incomeAnalytics .monthly-summary-card-label{
    display:flex !important;
    align-items:center !important;
    width:auto !important;
    max-width:100% !important;
    gap:5px !important;
    white-space:normal !important;
  }
  #incomeAnalytics .monthly-summary-card-label > span:first-child{
    min-width:0 !important;
    flex:0 1 auto !important;
    white-space:normal !important;
  }

  /* Annual analytics cards: same approved desktop visual composition. */
  #incomeAnalytics:not(.is-monthly) > .analytics-cards{
    grid-template-columns:1fr !important;
    gap:12px !important;
  }
  #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card{
    width:100% !important;
    min-height:132px !important;
    height:auto !important;
    padding:16px !important;
    display:grid !important;
    grid-template-columns:50px minmax(0,1fr) !important;
    align-items:center !important;
    column-gap:14px !important;
    gap:14px !important;
    border-radius:18px !important;
    transform:none !important;
  }
  #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card .analytics-card-icon{
    width:50px !important;
    height:50px !important;
    min-width:50px !important;
    flex:0 0 50px !important;
    margin:0 !important;
    border-radius:14px !important;
  }
  #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card .analytics-card-icon svg{
    width:26px !important;
    height:26px !important;
  }
  #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card .analytics-card-body{
    width:100% !important;
    max-width:none !important;
    margin:0 !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:minmax(0,1fr) auto !important;
    grid-template-areas:
      "label amount"
      "month amount" !important;
    column-gap:12px !important;
    row-gap:6px !important;
    align-items:center !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;
    font-size:12px !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;
    font-size:22px !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{
    grid-area:amount !important;
    align-self:center !important;
    justify-self:end !important;
    margin:0 !important;
    font-size:30px !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:minmax(0,1fr) auto !important;
    grid-template-areas:"label value" !important;
    column-gap:12px !important;
    align-items:center !important;
  }
  #incomeAnalytics:not(.is-monthly) .analytics-card-average .analytics-card-body > span{
    grid-area:label !important;
    margin:0 !important;
    font-size:12px !important;
  }
  #incomeAnalytics:not(.is-monthly) .analytics-card-average .analytics-card-body > strong{
    grid-area:value !important;
    justify-self:end !important;
    margin:0 !important;
    font-size:30px !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:minmax(0,1fr) auto !important;
    grid-template-areas:
      "label value"
      "note value" !important;
    column-gap:12px !important;
    row-gap:7px !important;
    align-items:center !important;
  }
  #incomeAnalytics:not(.is-monthly) .analytics-card-growth .analytics-card-body > span{
    grid-area:label !important;
    margin:0 !important;
    font-size:12px !important;
  }
  #incomeAnalytics:not(.is-monthly) .analytics-card-growth .analytics-card-body > small{
    grid-area:note !important;
    max-width:none !important;
    margin:0 !important;
    font-size:11px !important;
  }
  #incomeAnalytics:not(.is-monthly) .analytics-card-growth .analytics-card-body > strong{
    grid-area:value !important;
    justify-self:end !important;
    margin:0 !important;
    font-size:30px !important;
    line-height:1 !important;
    white-space:nowrap !important;
  }
}


/* Mobile small category cards: desktop visual parity. */
@media(max-width:900px) and (pointer:coarse), (orientation:landscape) and (max-height:560px) and (pointer:coarse){

  /* Annual category cards */
  #incomeAnalytics:not(.is-monthly) .analytics-category-panels{
    grid-template-columns:1fr !important;
    gap:10px !important;
  }
  #incomeAnalytics:not(.is-monthly) .analytics-category-panel{
    position:relative !important;
    min-height:104px !important;
    height:104px !important;
    padding:14px 16px !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:7px !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) !important;
    background-color:var(--panel) !important;
    background-image:none !important;
    box-shadow:none !important;
  }
  #incomeAnalytics:not(.is-monthly) .analytics-category-panel::after{
    content:none !important;
    display:none !important;
    background:none !important;
    background-image:none !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{
    position:relative !important;
    z-index:1 !important;
    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{
    position:relative !important;
    z-index:1 !important;
    grid-column:1 / 4 !important;
    grid-row:2 !important;
    align-self:start !important;
    margin:3px 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:relative !important;
    z-index:1 !important;
    top:auto !important;
    right:auto !important;
    bottom:auto !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;
  }

  /* Monthly category cards */
  #incomeAnalytics.is-monthly .monthly-category-panels{
    grid-template-columns:1fr !important;
    gap:10px !important;
  }
  #incomeAnalytics.is-monthly .monthly-category-card{
    position:relative !important;
    min-height:104px !important;
    height:104px !important;
    padding:14px 16px !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:7px !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:112px !important;
    height:112px !important;
    right:-42px !important;
    bottom:-68px !important;
    background:var(--monthly-category-soft) !important;
  }
  #incomeAnalytics.is-monthly .monthly-category-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;
    margin:0 !important;
    border-radius:10px !important;
    background:color-mix(in srgb,var(--monthly-category) 14%,transparent) !important;
    color:var(--monthly-category) !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{
    position:relative !important;
    z-index:1 !important;
    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.is-monthly .monthly-category-value{
    position:relative !important;
    z-index:1 !important;
    grid-column:1 / 4 !important;
    grid-row:2 !important;
    align-self:start !important;
    margin:3px 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:relative !important;
    z-index:1 !important;
    top:auto !important;
    right:auto !important;
    bottom:auto !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;
  }
}


/* Mobile refresh after desktop finalization: keep touch controls current. */
@media(max-width:900px) and (pointer:coarse), (orientation:landscape) and (max-height:560px) and (pointer:coarse){
  /* Touch devices do not have hover: month/year arrows must remain visible. */
  #incomeMonthSwitcher > button,
  .income-chart-year-switcher > button{
    opacity:1 !important;
  }
}


/* Mobile dashboard refresh after PC finalization. Presentation only. */
@media(max-width:900px) and (pointer:coarse), (orientation:landscape) and (max-height:560px) and (pointer:coarse){
  #income{
    width:100% !important;
    min-width:0 !important;
  }

  #income .income-top{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    width:100% !important;
    min-width:0 !important;
    min-height:0 !important;
    gap:14px !important;
    margin:0 0 14px !important;
    padding:16px !important;
    border:1px solid var(--border) !important;
    border-radius:22px !important;
    background:var(--panel) !important;
    box-shadow:var(--shadow-sm) !important;
  }

  #income .income-month-block{
    width:100% !important;
    min-width:0 !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    gap:10px !important;
    justify-items:start !important;
  }

  #income #incomeMonthSwitcher,
  #income .income-chart-year-switcher{
    min-height:38px !important;
    grid-template-columns:38px minmax(82px,auto) 38px !important;
    border-radius:12px !important;
    box-shadow:none !important;
  }

  #income #incomeMonthSwitcher > button,
  #income .income-chart-year-switcher > button{
    width:38px !important;
    height:36px !important;
    opacity:1 !important;
    border-radius:10px !important;
    font-size:24px !important;
    touch-action:manipulation !important;
  }

  #income #monthSwitcherName,
  #income .income-chart-year-switcher span{
    padding:0 6px !important;
    font-size:14px !important;
    font-weight:600 !important;
  }

  #income .income-total-cloud-inner{
    display:block !important;
    width:100% !important;
    min-width:0 !important;
  }

  #income #incomeTotal{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin:2px 0 0 !important;
    font-size:clamp(34px,10vw,44px) !important;
    line-height:.98 !important;
    font-weight:800 !important;
    letter-spacing:-.05em !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:clip !important;
  }

  #income .income-month-chart{
    width:100% !important;
    min-width:0 !important;
    min-height:146px !important;
    padding:43px 0 0 !important;
  }

  #income .income-chart-wrap{
    width:100% !important;
    height:104px !important;
    min-height:104px !important;
  }

  #income .income-chart-year-bottom{
    top:0 !important;
    right:0 !important;
    left:auto !important;
    width:auto !important;
    justify-content:flex-end !important;
  }

  #income #incomeChartSvg{
    width:100% !important;
    height:100% !important;
  }

  #income .income-top > .income-recent{
    width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    padding:13px 0 0 !important;
    border-top:1px solid var(--border) !important;
  }

  #income .income-recent-controls{
    min-height:38px !important;
    margin:0 0 10px !important;
    gap:8px !important;
  }

  #income .income-recent-toggle,
  #income .income-recent-page-btn{
    width:36px !important;
    min-width:36px !important;
    height:36px !important;
    min-height:36px !important;
    padding:0 !important;
    border-radius:11px !important;
    box-shadow:none !important;
    touch-action:manipulation !important;
  }

  #income .income-recent-pager{
    gap:6px !important;
    margin-left:auto !important;
  }

  #income .income-recent-page-indicator{
    min-width:42px !important;
    font-size:12px !important;
  }

  #income .income-recent-grid{
    width:100% !important;
    min-width:0 !important;
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px !important;
  }

  #income .income-recent-card{
    width:100% !important;
    min-width:0 !important;
    min-height:96px !important;
    padding:12px !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    grid-template-areas:
      "date category"
      "amount amount" !important;
    align-items:center !important;
    column-gap:6px !important;
    row-gap:9px !important;
    border-radius:16px !important;
    box-shadow:none !important;
  }

  #income .income-recent-date{
    min-width:0 !important;
    margin-left:2px !important;
    overflow:hidden !important;
    font-size:13px !important;
    text-overflow:ellipsis !important;
  }

  #income .income-recent-category{
    max-width:76px !important;
    padding:5px 7px !important;
    font-size:10px !important;
  }

  #income .income-recent-amount{
    min-width:0 !important;
    margin-left:2px !important;
    overflow:hidden !important;
    font-size:clamp(20px,6vw,25px) !important;
    text-overflow:ellipsis !important;
  }

  #income .income-recent-empty{
    padding:20px 14px !important;
    border-radius:14px !important;
  }

  #income .income-recent.is-collapsed{
    padding-top:10px !important;
  }

  #income .income-recent-controls > .add-income-btn,
  body .add-income-btn{
    position:fixed !important;
    right:16px !important;
    bottom:max(8px,env(safe-area-inset-bottom)) !important;
    z-index:1100 !important;
    width:50px !important;
    min-width:50px !important;
    height:50px !important;
    min-height:50px !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    border-radius:50% !important;
    background:var(--primary) !important;
    color:#fff !important;
    box-shadow:none !important;
    transform:none !important;
    touch-action:manipulation !important;
  }

  #income .income-recent-controls > .add-income-btn:hover,
  #income .income-recent-controls > .add-income-btn:active,
  body .add-income-btn:hover,
  body .add-income-btn:active{
    box-shadow:none !important;
    transform:none !important;
  }

  body:has(#incomeForm:not([hidden])) .add-income-btn{
    display:none !important;
  }

  #incomeForm.income-form{
    width:100% !important;
    min-width:0 !important;
    margin:0 0 14px !important;
    padding:18px 16px 76px !important;
    border:1px solid var(--border) !important;
    border-radius:22px !important;
    background:var(--panel) !important;
    box-shadow:var(--shadow-sm) !important;
  }






  #incomeForm .date-field > input{
    margin-top:0 !important;
    padding-right:50px !important;
  }




  #incomeForm .field-invalid::after{
    position:absolute !important;
    top:calc(100% + 3px) !important;
    left:0 !important;
    margin:0 !important;
    font-size:10px !important;
    line-height:1 !important;
  }




  #incomeForm .category-popup-create{
    position:sticky !important;
    bottom:-5px !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 42px !important;
    gap:7px !important;
    margin:5px -1px -1px !important;
    padding:8px 1px 1px !important;
    border-top:1px solid var(--border) !important;
    background:var(--panel) !important;
  }

  #incomeForm .category-popup-create-input{
    width:100% !important;
    min-width:0 !important;
    height:42px !important;
    min-height:42px !important;
    margin:0 !important;
    padding:0 10px !important;
    border:1px solid var(--border) !important;
    border-radius:10px !important;
    background:var(--panel-muted) !important;
    color:var(--text) !important;
    font-size:16px !important;
  }

  #incomeForm .category-popup-create-btn{
    width:42px !important;
    min-width:42px !important;
    height:42px !important;
    padding:0 !important;
    border:0 !important;
    border-radius:10px !important;
    background:var(--primary) !important;
    color:#fff !important;
    font-size:24px !important;
    line-height:1 !important;
    box-shadow:none !important;
  }

}

@media (max-width:340px){
  #income .income-recent-grid{
    grid-template-columns:1fr !important;
  }
  #income #incomeTotal{
    font-size:32px !important;
  }
}


/* Mobile history refresh after PC finalization. */
@media(max-width:900px) and (pointer:coarse), (orientation:landscape) and (max-height:560px) and (pointer:coarse){
  #history #historySearchWrap{
    position:relative !important;
    width:100% !important;
    min-width:0 !important;
    margin:0 0 12px !important;
  }

  #history #historySearch{
    width:100% !important;
    height:48px !important;
    min-height:48px !important;
    margin:0 !important;
    padding:0 15px !important;
    border:1px solid var(--border) !important;
    border-radius:14px !important;
    background:var(--panel) !important;
    color:var(--text) !important;
    font-size:16px !important;
    box-shadow:none !important;
    -webkit-appearance:none !important;
    appearance:none !important;
  }

  #history #historySearch:focus{
    border-color:color-mix(in srgb,var(--primary) 58%,var(--border)) !important;
    box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 12%,transparent) !important;
    outline:none !important;
  }

  #history .income-table-section{
    width:100% !important;
    min-width:0 !important;
  }

  #history #incomeList{
    gap:10px !important;
    padding:0 0 calc(14px + env(safe-area-inset-bottom)) !important;
  }

  #history #incomeList > .history-swipe-row{
    min-height:112px !important;
    border-radius:17px !important;
    scroll-snap-type:x mandatory !important;
    overscroll-behavior-x:contain !important;
    touch-action:pan-x pan-y !important;
  }

  #history #incomeList > .history-swipe-row .history-card-surface{
    min-height:112px !important;
    padding:14px 15px !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    grid-template-areas:
      "amount category"
      "date category"
      "description description" !important;
    column-gap:10px !important;
    row-gap:7px !important;
    border-radius:17px !important;
    box-shadow:none !important;
  }

  #history #incomeList > .history-swipe-row .history-card-surface > div:nth-child(1){
    min-width:0 !important;
    overflow:hidden !important;
    font-size:13px !important;
    text-overflow:ellipsis !important;
  }

  #history #incomeList > .history-swipe-row .history-card-surface > div:nth-child(2){
    min-width:0 !important;
    overflow:hidden !important;
    font-size:24px !important;
    line-height:1 !important;
    text-overflow:ellipsis !important;
  }

  #history #incomeList > .history-swipe-row .history-card-surface > div:nth-child(3){
    justify-self:end !important;
    align-self:start !important;
    max-width:112px !important;
    padding:5px 8px !important;
    font-size:11px !important;
  }

  #history #incomeList > .history-swipe-row .history-card-surface > div:nth-child(4){
    padding-top:2px !important;
    color:color-mix(in srgb,var(--text) 82%,var(--text-muted)) !important;
    font-size:14px !important;
    line-height:1.32 !important;
  }

  #history #incomeList > .history-swipe-row .history-swipe-actions{
    width:154px !important;
    gap:5px !important;
    padding:5px 0 5px 5px !important;
  }

  #history #incomeList > .history-swipe-row .edit-income,
  #history #incomeList > .history-swipe-row .delete-income{
    min-width:0 !important;
    border-radius:16px !important;
    font-size:10px !important;
    touch-action:manipulation !important;
  }

  #history #incomeList > .history-swipe-row .history-action-label{
    font-size:10px !important;
  }

  #history .income-empty{
    min-height:112px !important;
    display:grid !important;
    place-items:center !important;
    padding:24px 16px !important;
    border-radius:17px !important;
    box-shadow:none !important;
  }

  /* The shared add/edit form remains full-width when it is moved above History. */
  #history > #incomeForm.income-form{
    width:100% !important;
    min-width:0 !important;
    margin:0 0 12px !important;
    padding:18px 16px 76px !important;
    border-radius:18px !important;
    box-shadow:none !important;
  }

  #history > #incomeForm .form-grid{
    grid-template-columns:1fr !important;
    gap:13px !important;
  }

  #history > #incomeForm .form-grid input,
  #history > #incomeForm .category-select{
    min-height:48px !important;
    font-size:16px !important;
  }
}


/* Mobile settings parity after PC finalization. */
@media(max-width:900px) and (pointer:coarse), (orientation:landscape) and (max-height:560px) and (pointer:coarse){
  #settings.page.active{
    display:block !important;
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 0 calc(16px + env(safe-area-inset-bottom)) !important;
  }

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

  #settings .qp-settings-tab{
    width:100% !important;
    min-width:0 !important;
    min-height:44px !important;
    height:44px !important;
    padding:0 5px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:5px !important;
    border:1px solid transparent !important;
    border-radius:11px !important;
    background:transparent !important;
    color:var(--text-muted) !important;
    font-size:10px !important;
    font-weight:650 !important;
    line-height:1 !important;
    box-shadow:none !important;
    transform:none !important;
    touch-action:manipulation !important;
  }

  #settings .qp-settings-tab svg{
    width:16px !important;
    height:16px !important;
    min-width:16px !important;
    fill:none !important;
    stroke:currentColor !important;
    stroke-width:1.8 !important;
    stroke-linecap:round !important;
    stroke-linejoin:round !important;
  }

  #settings .qp-settings-tab.active{
    border-color:color-mix(in srgb,var(--primary) 46%,var(--border)) !important;
    background:color-mix(in srgb,var(--primary) 14%,var(--panel)) !important;
    color:var(--text) !important;
  }

  /* Only the content of the selected tab is visible. */
  #settings > .settings-card{
    display:none !important;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    margin:0 0 12px !important;
    padding:16px !important;
    overflow:visible !important;
    border:1px solid var(--border) !important;
    border-radius:18px !important;
    background:var(--panel) !important;
    box-shadow:none !important;
  }

  #settings[data-settings-tab="categories"] > #qpAppearanceCard,
  #settings[data-settings-tab="appearance"] > #qpAppearanceCard,
  #settings[data-settings-tab="appearance"] > #qpBackgroundSettings,
  #settings[data-settings-tab="data"] > #qpDataCard,
  #settings[data-settings-tab="data"] > #qpAccountCard{
    display:block !important;
  }

  /* Categories tab: category manager only. */
  #settings[data-settings-tab="categories"] > #qpAppearanceCard > :not(.qp-category-manager){
    display:none !important;
  }

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

  #settings .qp-category-add{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 52px !important;
    gap:8px !important;
    align-items:center !important;
    margin:0 0 10px !important;
  }

  #settings .qp-category-add input{
    width:100% !important;
    min-width:0 !important;
    height:52px !important;
    min-height:52px !important;
    margin:0 !important;
    padding:0 13px !important;
    border:1px solid var(--border) !important;
    border-radius:13px !important;
    background:var(--panel-muted) !important;
    color:var(--text) !important;
    font-size:16px !important;
    box-shadow:none !important;
  }

  #settings .qp-category-add input:focus{
    border-color:color-mix(in srgb,var(--primary) 62%,var(--border)) !important;
    box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 12%,transparent) !important;
    outline:none !important;
  }

  #settings .qp-category-add button,
  #settings .qp-category-add button:hover,
  #settings .qp-category-add button:active{
    width:52px !important;
    min-width:52px !important;
    height:52px !important;
    min-height:52px !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    border-radius:13px !important;
    background:var(--primary) !important;
    color:#fff !important;
    font-size:26px !important;
    font-weight:500 !important;
    line-height:1 !important;
    box-shadow:none !important;
    filter:none !important;
    transform:none !important;
  }

  #settings .qp-category-list{
    width:100% !important;
    max-height:none !important;
    margin:0 !important;
    padding:0 !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:8px !important;
    overflow:visible !important;
  }

  #settings .qp-category-item{
    width:100% !important;
    min-width:0 !important;
    min-height:60px !important;
    padding:8px 10px !important;
    gap:10px !important;
    border:1px solid var(--border) !important;
    border-radius:14px !important;
    background:var(--panel-muted) !important;
    box-shadow:none !important;
    transform:none !important;
  }

  

  

  #settings .qp-category-name{
    min-width:0 !important;
    font-size:15px !important;
    line-height:1.2 !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }

  #settings .qp-category-delete,
  #settings .qp-category-delete:hover,
  #settings .qp-category-delete:active{
    flex:0 0 42px !important;
    width:42px !important;
    min-width:42px !important;
    height:42px !important;
    min-height:42px !important;
    padding:0 !important;
    border:0 !important;
    border-radius:12px !important;
    background:transparent !important;
    color:rgba(239,68,68,.78) !important;
    box-shadow:none !important;
    transform:none !important;
  }

  /* Appearance tab. */
  #settings[data-settings-tab="appearance"] #qpAppearanceCard .qp-category-manager{
    display:none !important;
  }

  #settings[data-settings-tab="appearance"] #qpAppearanceCard > .settings-row{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:12px !important;
    min-height:0 !important;
  }

  #settings[data-settings-tab="appearance"] #qpAppearanceCard .settings-title,
  #settings[data-settings-tab="appearance"] #qpBackgroundSettings > .settings-title{
    margin:0 !important;
    color:var(--text) !important;
    font-size:15px !important;
    font-weight:650 !important;
    line-height:1.2 !important;
  }

  #settings[data-settings-tab="appearance"] #qpAppearanceCard .settings-row > div:last-child{
    width:100% !important;
    min-width:0 !important;
    display:grid !important;
    grid-template-columns:repeat(7,minmax(0,1fr)) !important;
    gap:5px !important;
    overflow:visible !important;
    padding:2px 0 !important;
  }

  #settings[data-settings-tab="appearance"] #qpAppearanceCard .accent-swatch,
  #settings[data-settings-tab="appearance"] #qpAppearanceCard .accent-custom-color{
    width:32px !important;
    min-width:32px !important;
    max-width:32px !important;
    height:32px !important;
    min-height:32px !important;
    max-height:32px !important;
    justify-self:center !important;
    margin:0 !important;
    padding:0 !important;
  }

  #settings[data-settings-tab="appearance"] #qpBackgroundSettings{
    margin-top:0 !important;
  }

  #settings[data-settings-tab="appearance"] #qpBackgroundSettings .qp-background-options{
    width:100% !important;
    min-width:0 !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:7px !important;
  }

  #settings[data-settings-tab="appearance"] #qpBackgroundSettings .qp-background-option,
  #settings[data-settings-tab="appearance"] #qpBackgroundSettings .qp-background-custom-wrap{
    width:100% !important;
    min-width:0 !important;
  }

  #settings[data-settings-tab="appearance"] #qpBackgroundSettings .qp-background-preview{
    height:62px !important;
  }

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

  #settings[data-settings-tab="data"] > #qpDataCard{
    margin-bottom:12px !important;
  }

  #settings[data-settings-tab="data"] #qpDataCard > .settings-title,
  #settings[data-settings-tab="data"] #qpAccountCard > .settings-title{
    margin:0 !important;
    color:var(--text) !important;
    font-size:17px !important;
    font-weight:700 !important;
    line-height:1.2 !important;
  }

  #settings[data-settings-tab="data"] #qpDataCard > div[style]{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:8px !important;
    margin-top:12px !important;
  }

  #settings[data-settings-tab="data"] #qpDataCard .settings-report-period{
    grid-column:1 / -1 !important;
    width:100% !important;
    min-height:46px !important;
    height:46px !important;
    margin:0 !important;
    padding:0 12px !important;
    border-radius:12px !important;
    font-size:14px !important;
  }

  #settings[data-settings-tab="data"] #qpDataCard button{
    width:100% !important;
    min-width:0 !important;
    min-height:48px !important;
    margin:0 !important;
    padding:9px 10px !important;
    border-radius:12px !important;
    font-size:13px !important;
    line-height:1.15 !important;
    box-shadow:none !important;
    transform:none !important;
  }

  #settings[data-settings-tab="data"] #printIncomeReportBtn,
  #settings[data-settings-tab="data"] #clearIncomeDataBtn{
    grid-column:1 / -1 !important;
  }

  #settings[data-settings-tab="data"] #qpAccountCard .settings-card-subtitle{
    margin-top:5px !important;
    font-size:12px !important;
  }

  #settings[data-settings-tab="data"] #qpAccountCard .qp-account-row{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:9px !important;
    margin-top:12px !important;
  }

  #settings[data-settings-tab="data"] #qpAccountCard .qp-account-email{
    min-width:0 !important;
    padding:12px !important;
    overflow:hidden !important;
    border:1px solid var(--border) !important;
    border-radius:12px !important;
    background:var(--panel-muted) !important;
    font-size:14px !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }

  #settings[data-settings-tab="data"] #qpAuthLogoutBtn{
    width:100% !important;
    min-height:46px !important;
    margin:0 !important;
    box-shadow:none !important;
  }
}

@media(max-width:340px){
  #settings .qp-settings-tab{
    gap:3px !important;
    font-size:9px !important;
  }
  #settings .qp-settings-tab svg{
    width:14px !important;
    height:14px !important;
    min-width:14px !important;
  }
  #settings[data-settings-tab="appearance"] #qpAppearanceCard .settings-row > div:last-child{
    gap:3px !important;
  }
  #settings[data-settings-tab="appearance"] #qpAppearanceCard .accent-swatch,
  #settings[data-settings-tab="appearance"] #qpAppearanceCard .accent-custom-color{
    width:29px !important;
    min-width:29px !important;
    max-width:29px !important;
    height:29px !important;
    min-height:29px !important;
    max-height:29px !important;
  }
}


/* Mobile shell finalization after PC parity pass. */
@media(max-width:900px) and (pointer:coarse), (orientation:landscape) and (max-height:560px) and (pointer:coarse){
  html,
  body{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    overflow-x:hidden !important;
  }

  body > .app,
  .app,
  .content,
  main{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }

  main{
    margin:0 !important;
    padding:12px !important;
  }

  /* Dialogs/notifications must remain inside the phone viewport. */
  .qp-notice-overlay{
    padding:
      max(14px,env(safe-area-inset-top))
      14px
      max(14px,env(safe-area-inset-bottom)) !important;
  }

  .qp-notice-dialog{
    width:100% !important;
    max-width:430px !important;
    max-height:calc(100dvh - 28px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    padding:20px 18px !important;
    overflow:auto !important;
    border-radius:18px !important;
  }

  /* Auth screen: current phone geometry, safe areas and 16px inputs prevent iOS zoom. */
  body.qp-auth-locked #qpAuthGate,
  #qpAuthGate{
    width:100vw !important;
    height:100dvh !important;
    min-height:100dvh !important;
    max-height:100dvh !important;
    padding:
      max(14px,env(safe-area-inset-top))
      14px
      max(14px,env(safe-area-inset-bottom)) !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:auto !important;
    overscroll-behavior:contain !important;
    box-sizing:border-box !important;
  }

  body.qp-auth-locked #qpAuthGate .qp-auth-card,
  #qpAuthGate .qp-auth-card{
    width:100% !important;
    max-width:430px !important;
    max-height:calc(100dvh - 28px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    margin:auto !important;
    padding:20px 16px !important;
    overflow:auto !important;
    border-radius:18px !important;
    box-shadow:0 18px 48px rgba(0,0,0,.28) !important;
  }

  #qpAuthGate .qp-auth-tabs{
    margin-bottom:16px !important;
  }

  #qpAuthGate .qp-auth-tab{
    min-height:42px !important;
    height:42px !important;
    font-size:14px !important;
    touch-action:manipulation !important;
  }

  #qpAuthGate .qp-auth-field{
    margin-bottom:12px !important;
  }

  #qpAuthGate .qp-auth-field input{
    width:100% !important;
    min-width:0 !important;
    height:48px !important;
    min-height:48px !important;
    padding:0 13px !important;
    border-radius:12px !important;
    font-size:16px !important;
    box-sizing:border-box !important;
  }

  #qpAuthGate .qp-auth-primary{
    width:100% !important;
    min-width:0 !important;
    height:48px !important;
    min-height:48px !important;
    border-radius:12px !important;
    font-size:14px !important;
    touch-action:manipulation !important;
  }

  #qpAuthGate .qp-auth-oauth{
    min-width:0 !important;
    padding:0 10px !important;
  }

  #qpAuthGate .qp-auth-oauth-label{
    min-width:0 !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }

  #qpAuthGate .qp-auth-message{
    overflow-wrap:anywhere !important;
  }
}

@media(max-width:340px){
  main{
    padding:10px !important;
  }

  #qpAuthGate{
    padding-left:10px !important;
    padding-right:10px !important;
  }

  #qpAuthGate .qp-auth-card{
    padding:18px 14px !important;
  }
}

@media(max-height:600px) and (max-width:900px) and (pointer:coarse), (orientation:landscape) and (max-height:560px) and (pointer:coarse){
  body.qp-auth-locked #qpAuthGate,
  #qpAuthGate{
    align-items:flex-start !important;
  }
}


/* Mobile screenshot polish 2026-09-25: compact history/categories and contain background help. */
@media(max-width:900px) and (pointer:coarse), (orientation:landscape) and (max-height:560px) and (pointer:coarse){
  /* History: reduce excess vertical space visible on Samsung Browser. */
  #history #historySearchWrap{
    margin-bottom:10px !important;
  }

  #history #historySearch{
    height:44px !important;
    min-height:44px !important;
    padding:0 13px !important;
    border-radius:13px !important;
  }

  #history #incomeList{
    gap:8px !important;
    padding-bottom:calc(112px + env(safe-area-inset-bottom)) !important;
  }

  #history #incomeList > .history-swipe-row{
    min-height:88px !important;
    border-radius:15px !important;
  }

  #history #incomeList > .history-swipe-row .history-card-surface{
    min-height:88px !important;
    padding:11px 13px !important;
    column-gap:8px !important;
    row-gap:5px !important;
    border-radius:15px !important;
  }

  #history #incomeList > .history-swipe-row .history-card-surface > div:nth-child(1){
    font-size:12px !important;
    line-height:1.15 !important;
  }

  #history #incomeList > .history-swipe-row .history-card-surface > div:nth-child(2){
    font-size:22px !important;
    line-height:1 !important;
  }

  #history #incomeList > .history-swipe-row .history-card-surface > div:nth-child(3){
    max-width:104px !important;
    padding:4px 7px !important;
    font-size:10px !important;
  }

  #history #incomeList > .history-swipe-row .history-card-surface > div:nth-child(4){
    padding-top:1px !important;
    font-size:13px !important;
    line-height:1.25 !important;
  }

  #history #incomeList > .history-swipe-row .history-swipe-actions{
    width:146px !important;
  }

  #history .income-empty{
    min-height:88px !important;
    padding:20px 14px !important;
    border-radius:15px !important;
  }

  /* Categories: more information fits on one phone screen without losing touch targets. */
  #settings[data-settings-tab="categories"] > #qpAppearanceCard{
    padding:14px !important;
  }

  #settings .qp-category-add{
    grid-template-columns:minmax(0,1fr) 48px !important;
    gap:7px !important;
    margin-bottom:8px !important;
  }

  #settings .qp-category-add input{
    height:48px !important;
    min-height:48px !important;
    padding:0 12px !important;
    border-radius:12px !important;
  }

  #settings .qp-category-add button,
  #settings .qp-category-add button:hover,
  #settings .qp-category-add button:active{
    width:48px !important;
    min-width:48px !important;
    height:48px !important;
    min-height:48px !important;
    border-radius:12px !important;
    font-size:25px !important;
  }

  #settings .qp-category-list{
    max-height:359px !important;
    gap:7px !important;
    padding-right:4px !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    scrollbar-gutter:stable !important;
    scrollbar-width:thin !important;
    scrollbar-color:color-mix(in srgb,var(--text-muted) 48%,transparent) transparent !important;
  }

  #settings .qp-category-list::-webkit-scrollbar{
    width:6px;
  }

  #settings .qp-category-list::-webkit-scrollbar-track{
    background:transparent;
  }

  #settings .qp-category-list::-webkit-scrollbar-thumb{
    border-radius:999px;
    background:color-mix(in srgb,var(--text-muted) 48%,transparent);
  }

  #settings .qp-category-list::-webkit-scrollbar-button{
    display:none;
    width:0;
    height:0;
  }

  #settings .qp-category-item{
    min-height:54px !important;
    padding:6px 9px !important;
    gap:9px !important;
    border-radius:13px !important;
  }

  #settings .qp-category-icon{
    flex:0 0 38px !important;
    width:38px !important;
    min-width:38px !important;
    height:38px !important;
    border-radius:11px !important;
  }

  #settings .qp-category-icon svg{
    width:19px !important;
    height:19px !important;
  }

  #settings .qp-category-name{
    font-size:14px !important;
  }

  #settings .qp-category-delete,
  #settings .qp-category-delete:hover,
  #settings .qp-category-delete:active{
    flex:0 0 38px !important;
    width:38px !important;
    min-width:38px !important;
    height:38px !important;
    min-height:38px !important;
    border-radius:11px !important;
  }

  /* Background help stays inside the "Свой фон" card instead of hanging outside. */
  #settings[data-settings-tab="appearance"] #qpBackgroundSettings .qp-background-custom-wrap{
    position:relative !important;
  }

  #settings[data-settings-tab="appearance"] #qpBackgroundSettings .qp-background-custom-wrap > .qp-background-help{
    left:auto !important;
    right:4px !important;
    top:4px !important;
    transform:none !important;
  }

  #settings[data-settings-tab="appearance"] #qpBackgroundSettings .qp-background-help-btn{
    width:24px !important;
    min-width:24px !important;
    max-width:24px !important;
    height:24px !important;
    min-height:24px !important;
    max-height:24px !important;
    border-radius:7px !important;
    background:color-mix(in srgb,var(--panel) 82%,transparent) !important;
  }

  #settings[data-settings-tab="appearance"] #qpBackgroundSettings .qp-background-help-tip{
    left:auto !important;
    right:0 !important;
    transform:none !important;
    width:min(230px,72vw) !important;
    max-width:min(230px,72vw) !important;
  }
}


/* Mobile income editor final polish. */
@media(max-width:900px) and (pointer:coarse), (orientation:landscape) and (max-height:560px) and (pointer:coarse){
  #incomeForm.income-form,
  #history > #incomeForm.income-form{
    width:100% !important;
    min-width:0 !important;
    margin:0 0 12px !important;
    padding:16px 14px 68px !important;
    overflow:visible !important;
    border:1px solid var(--border) !important;
    border-radius:18px !important;
    background:var(--panel) !important;
    box-shadow:none !important;
    box-sizing:border-box !important;
  }

  #incomeForm .form-title{
    margin:0 42px 14px 0 !important;
    font-size:17px !important;
    font-weight:650 !important;
    line-height:1.2 !important;
  }

  #incomeForm .form-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:11px !important;
  }

  #incomeForm .form-grid > label{
    position:relative !important;
    min-width:0 !important;
    color:var(--text-muted) !important;
    font-size:12px !important;
    line-height:1.2 !important;
  }

  #incomeForm .form-grid input,
  #incomeForm .category-select{
    width:100% !important;
    min-width:0 !important;
    min-height:46px !important;
    height:46px !important;
    margin-top:6px !important;
    padding:0 12px !important;
    border:1px solid var(--border) !important;
    border-radius:12px !important;
    background:var(--panel-muted) !important;
    color:var(--text) !important;
    font-size:16px !important;
    box-shadow:none !important;
    box-sizing:border-box !important;
  }

  #incomeForm .form-grid input:focus,
  #incomeForm .category-select:focus,
  #incomeForm .category-select.open{
    border-color:color-mix(in srgb,var(--primary) 62%,var(--border)) !important;
    box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 12%,transparent) !important;
    outline:none !important;
  }

  #incomeForm .date-field,
  #incomeForm .category-field{
    position:relative !important;
    margin-top:6px !important;
  }

  #incomeForm .date-field > input,
  #incomeForm .category-field > .category-select{
    margin-top:0 !important;
  }

  #incomeForm .date-field > input{
    padding-right:48px !important;
  }

  #incomeForm .calendar-btn{
    top:1px !important;
    right:1px !important;
    bottom:1px !important;
    width:44px !important;
    height:auto !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    border-left:1px solid var(--border) !important;
    border-radius:0 11px 11px 0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }

  #incomeForm .calendar-btn svg{
    width:18px !important;
    height:18px !important;
  }

  #incomeForm .cancel-btn{
    top:10px !important;
    right:10px !important;
    width:34px !important;
    min-width:34px !important;
    height:34px !important;
    min-height:34px !important;
    padding:0 !important;
    border-radius:10px !important;
    box-shadow:none !important;
    transform:none !important;
  }

  #incomeForm #saveIncome{
    right:14px !important;
    bottom:14px !important;
    width:46px !important;
    min-width:46px !important;
    height:40px !important;
    min-height:40px !important;
    padding:0 !important;
    border-radius:11px !important;
    box-shadow:none !important;
    transform:none !important;
  }

  #incomeForm #saveIncome svg{
    width:19px !important;
    height:19px !important;
  }

  #incomeForm .calendar-popup{
    left:0 !important;
    right:auto !important;
    width:min(300px,calc(100vw - 52px)) !important;
    max-width:calc(100vw - 52px) !important;
    padding:10px !important;
    border-radius:14px !important;
    box-shadow:0 16px 42px rgba(0,0,0,.28) !important;
  }

  #incomeForm .calendar-head{
    gap:7px !important;
    margin-bottom:8px !important;
  }

  #incomeForm .calendar-nav{
    width:32px !important;
    min-width:32px !important;
    height:32px !important;
    min-height:32px !important;
    padding:0 !important;
    border-radius:9px !important;
    font-size:20px !important;
  }

  #incomeForm .calendar-head > div{
    font-size:13px !important;
  }

  #incomeForm .calendar-weekdays,
  #incomeForm .calendar-days{
    gap:2px !important;
  }

  #incomeForm .calendar-day{
    height:32px !important;
    min-height:32px !important;
    padding:0 !important;
    border-radius:8px !important;
    font-size:12px !important;
  }

  #incomeForm .category-popup{
    left:0 !important;
    right:0 !important;
    width:100% !important;
    max-width:100% !important;
    max-height:min(286px,48vh) !important;
    padding:5px !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    overscroll-behavior:contain !important;
    -webkit-overflow-scrolling:touch !important;
    border-radius:13px !important;
    box-shadow:0 16px 42px rgba(0,0,0,.28) !important;
  }

  #incomeForm .category-option{
    width:100% !important;
    min-height:42px !important;
    padding:9px 10px !important;
    border-radius:9px !important;
    font-size:14px !important;
  }

  #incomeForm .category-popup-create{
    bottom:-5px !important;
    grid-template-columns:minmax(0,1fr) 40px !important;
    gap:6px !important;
    margin:5px -1px -1px !important;
    padding:7px 1px 1px !important;
  }

  #incomeForm .category-popup-create-input{
    height:40px !important;
    min-height:40px !important;
    margin:0 !important;
    padding:0 9px !important;
    border-radius:9px !important;
    font-size:16px !important;
  }

  #incomeForm .category-popup-create-btn{
    width:40px !important;
    min-width:40px !important;
    height:40px !important;
    min-height:40px !important;
    padding:0 !important;
    border-radius:9px !important;
    font-size:22px !important;
    box-shadow:none !important;
  }

  #incomeForm .field-invalid::after{
    position:static !important;
    display:block !important;
    margin:4px 0 0 !important;
    color:#ef4444 !important;
    font-size:10px !important;
    line-height:1.1 !important;
  }

  #incomeForm .field-invalid input,
  #incomeForm .field-invalid .category-select{
    border-color:#ef4444 !important;
    box-shadow:0 0 0 2px rgba(239,68,68,.12) !important;
  }

  body:has(#incomeForm:not([hidden])) .content{
    padding-bottom:calc(112px + env(safe-area-inset-bottom)) !important;
  }
}

@media(max-width:340px){
  #incomeForm.income-form,
  #history > #incomeForm.income-form{
    padding-left:12px !important;
    padding-right:12px !important;
  }

  #incomeForm .calendar-popup{
    width:calc(100vw - 44px) !important;
    max-width:calc(100vw - 44px) !important;
  }
}


/* Mobile visual corrections from Samsung screenshots. */
@media(max-width:900px) and (pointer:coarse), (orientation:landscape) and (max-height:560px) and (pointer:coarse){
  /* Dark theme on phones: keep the dark character, but restore blue depth and card separation. */
  html[data-theme="dark"] body,
  body.dark{
    --bg:#0b1320 !important;
    --bg-accent:#142239 !important;
    --panel:#142238 !important;
    --panel-muted:#1a2b43 !important;
    --border:#38506a !important;
    --active:#243b59 !important;
    --text-muted:#aebbd0 !important;
  }

  html[data-theme="dark"] body.qp-bg-standard{
    background:
      radial-gradient(120% 82% at 50% -18%,rgba(62,96,139,.34) 0 18%,rgba(25,44,70,.22) 37%,transparent 58%),
      radial-gradient(95% 66% at -10% 70%,rgba(41,72,111,.28) 0 25%,transparent 57%),
      radial-gradient(90% 64% at 110% 28%,rgba(44,76,116,.26) 0 24%,transparent 56%),
      linear-gradient(145deg,#080e18 0%,#0d1828 44%,#0a1321 73%,#070c14 100%) !important;
  }

  /* Recent-income collapse must win over the later two-column mobile grid rule. */
  #income .income-recent.is-collapsed .income-recent-grid,
  #income .income-recent.is-collapsed .income-recent-bottom-actions{
    display:none !important;
  }

  #income .income-recent.is-collapsed{
    padding-bottom:0 !important;
  }

  #income .income-recent.is-collapsed .income-recent-controls{
    margin-bottom:0 !important;
  }

  /* Give the main mobile surfaces enough contrast against the page background. */
  #income .income-top,
  #incomeAnalytics,
  #history .history-card-surface,
  #settings > .settings-card{
    border-color:color-mix(in srgb,var(--border) 92%,white 8%) !important;
  }
}


/* Mobile home header stage v15. */
@media(max-width:900px) and (pointer:coarse), (orientation:landscape) and (max-height:560px) and (pointer:coarse){
  /* Month + year live in one compact row. */
  #income .income-month-block.qp-mobile-period-row{
    width:100% !important;
    min-width:0 !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    grid-template-rows:auto auto !important;
    gap:10px 8px !important;
    align-items:center !important;
    justify-items:stretch !important;
  }

  #income .income-month-block.qp-mobile-period-row #incomeMonthSwitcher,
  #income .income-month-block.qp-mobile-period-row > .income-chart-year-switcher{
    width:100% !important;
    min-width:0 !important;
    height:42px !important;
    min-height:42px !important;
    margin:0 !important;
    grid-template-columns:30px minmax(0,1fr) 30px !important;
    border-radius:12px !important;
    box-sizing:border-box !important;
  }

  #income .income-month-block.qp-mobile-period-row #incomeMonthSwitcher{
    grid-column:1 !important;
    grid-row:1 !important;
  }

  #income .income-month-block.qp-mobile-period-row > .income-chart-year-switcher{
    grid-column:2 !important;
    grid-row:1 !important;
  }

  #income .income-month-block.qp-mobile-period-row .income-total-cloud-inner{
    grid-column:1 / -1 !important;
    grid-row:2 !important;
    width:100% !important;
  }

  #income .income-month-block.qp-mobile-period-row #monthSwitcherName,
  #income .income-month-block.qp-mobile-period-row > .income-chart-year-switcher span{
    min-width:0 !important;
    padding:0 2px !important;
    overflow:hidden !important;
    font-size:14px !important;
    font-weight:650 !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }

  /* Arrows appear only after tapping Month/Year. */
  #income #incomeMonthSwitcher:not(.is-arrows-visible) > button,
  #income .income-month-block > .income-chart-year-switcher:not(.is-arrows-visible) > button{
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }

  #income #incomeMonthSwitcher.is-arrows-visible > button,
  #income .income-month-block > .income-chart-year-switcher.is-arrows-visible > button{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
  }

  #income #incomeMonthSwitcher > button,
  #income .income-month-block > .income-chart-year-switcher > button{
    width:30px !important;
    min-width:30px !important;
    height:40px !important;
    min-height:40px !important;
    padding:0 !important;
    border-radius:10px !important;
    font-size:22px !important;
    transition:opacity .15s ease,visibility .15s ease,background .15s ease !important;
  }

  #income .income-chart-year-bottom{
    display:none !important;
  }

  

  /* Recent incomes: collapse zone is always the same full-width row. */
  #income .income-recent.qp-mobile-recent-stack{
    display:flex !important;
    flex-direction:column !important;
    width:100% !important;
    min-width:0 !important;
  }

  #income .income-recent.qp-mobile-recent-stack .income-recent-controls{
    width:100% !important;
    min-height:38px !important;
    margin:0 0 7px !important;
    padding:0 !important;
    display:flex !important;
    align-items:center !important;
  }

  #income .income-recent.qp-mobile-recent-stack .income-recent-toggle{
    width:100% !important;
    min-width:100% !important;
    height:38px !important;
    min-height:38px !important;
    flex:1 1 100% !important;
    padding:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    color:var(--text-muted) !important;
    box-shadow:none !important;
    -webkit-tap-highlight-color:transparent !important;
    touch-action:manipulation !important;
  }

  #income .income-recent.qp-mobile-recent-stack .income-recent-toggle:hover,
  #income .income-recent.qp-mobile-recent-stack .income-recent-toggle:active{
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }

  #income .income-recent.qp-mobile-recent-stack .income-recent-toggle svg{
    width:22px !important;
    height:22px !important;
    margin-left:2px !important;
  }

  /* One vertical column of four recent incomes. */
  #income .income-recent.qp-mobile-recent-stack .income-recent-grid{
    width:100% !important;
    min-width:0 !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:8px !important;
    touch-action:pan-y !important;
  }

  

  /* Pager is below the cards, aligned to the lower-right corner. */
  #income .income-recent.qp-mobile-recent-stack > .income-recent-bottom-actions{
    order:3 !important;
    width:100% !important;
    min-width:0 !important;
    min-height:34px !important;
    margin:8px 0 0 !important;
    padding:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:6px !important;
  }

  #income .income-recent.qp-mobile-recent-stack > .income-recent-bottom-actions .income-recent-pager{
    margin:0 0 0 auto !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:5px !important;
  }

  

  

  #income .income-recent.qp-mobile-recent-stack.is-collapsed .income-recent-controls{
    margin-bottom:0 !important;
  }

  #income .income-recent.qp-mobile-recent-stack.is-collapsed .income-recent-grid,
  #income .income-recent.qp-mobile-recent-stack.is-collapsed > .income-recent-bottom-actions{
    display:none !important;
  }
}

@media(max-width:360px){
  #income .income-month-block.qp-mobile-period-row{
    gap:8px 6px !important;
  }

  #income .income-month-block.qp-mobile-period-row #incomeMonthSwitcher,
  #income .income-month-block.qp-mobile-period-row > .income-chart-year-switcher{
    grid-template-columns:27px minmax(0,1fr) 27px !important;
  }

  #income .income-month-block.qp-mobile-period-row #incomeMonthSwitcher > button,
  #income .income-month-block.qp-mobile-period-row > .income-chart-year-switcher > button{
    width:27px !important;
    min-width:27px !important;
  }

  
}


/* Mobile home header stage v16. */
@media(max-width:900px) and (pointer:coarse), (orientation:landscape) and (max-height:560px) and (pointer:coarse){
  #income .income-month-block.qp-mobile-period-row #incomeTotal{
    width:100% !important;
    max-width:100% !important;
    margin:8px 0 0 !important;
    display:block !important;
    overflow:hidden !important;
    font-size:clamp(46px,12vw,56px) !important;
    line-height:.96 !important;
    letter-spacing:-.055em !important;
    text-align:center !important;
    text-overflow:clip !important;
    white-space:nowrap !important;
  }

  #income .income-month-chart{
    margin-top:12px !important;
    padding-top:0 !important;
  }

  #income .income-top > .income-recent.qp-mobile-recent-stack{
    padding-top:6px !important;
    border-top:0 !important;
  }

  

  

  

  #income .income-recent.qp-mobile-recent-stack .income-recent-card{
    min-height:88px !important;
    padding:11px !important;
  }

  #income .income-recent.qp-mobile-recent-stack > .income-recent-bottom-actions{
    min-height:24px !important;
    margin-top:6px !important;
  }

  #income .income-recent.qp-mobile-recent-stack .income-recent-page-btn{
    width:18px !important;
    min-width:18px !important;
    height:18px !important;
    min-height:18px !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }

  #income .income-recent.qp-mobile-recent-stack .income-recent-page-btn:hover,
  #income .income-recent.qp-mobile-recent-stack .income-recent-page-btn:active{
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }

  

  

  #income #incomeMonthSwitcher,
  #income .income-month-block > .income-chart-year-switcher{
    touch-action:pan-y !important;
  }
}

@media(max-width:360px){
  #income .income-month-block.qp-mobile-period-row #incomeTotal{
    font-size:44px !important;
  }

  #income .income-recent.qp-mobile-recent-stack .income-recent-card{
    padding:10px !important;
  }
}


/* Mobile home header stage v17. */
@media(max-width:900px) and (pointer:coarse), (orientation:landscape) and (max-height:560px) and (pointer:coarse){
  /* Tighten the chart-to-collapse spacing. */
  

  /* One full-width recent-income card per mobile page. */
  #income .income-recent.qp-mobile-recent-stack .income-recent-grid{
    grid-template-columns:minmax(0,1fr) !important;
    grid-template-rows:1fr !important;
    gap:8px !important;
  }

  #income .income-recent.qp-mobile-recent-stack .income-recent-card{
    min-height:92px !important;
  }

  /* "Вся история" on the left, pager on the right. */
  #income .income-recent.qp-mobile-recent-stack > .income-recent-bottom-actions{
    min-height:26px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:8px !important;
  }

  #income .income-recent.qp-mobile-recent-stack > .income-recent-bottom-actions .income-recent-history{
    height:24px !important;
    min-height:24px !important;
    margin:0 !important;
    padding:0 2px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    border:0 !important;
    background:transparent !important;
    color:var(--text-muted) !important;
    font:inherit !important;
    font-size:10px !important;
    font-weight:600 !important;
    line-height:1 !important;
    box-shadow:none !important;
  }

  #income .income-recent.qp-mobile-recent-stack > .income-recent-bottom-actions .income-recent-pager{
    margin-left:auto !important;
  }

  /* Long press reveals edit/delete over the card content. */
  #income .income-recent-mobile-actions{
    display:none !important;
  }

  #income .income-recent-card.is-longpress-selected .income-recent-mobile-actions{
    position:absolute !important;
    z-index:8 !important;
    inset:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:12px !important;
    padding:10px !important;
    border-radius:inherit !important;
    background:color-mix(in srgb,var(--panel) 88%,transparent) !important;
    backdrop-filter:blur(4px) !important;
    -webkit-backdrop-filter:blur(4px) !important;
  }

  #income .income-recent-mobile-edit,
  #income .income-recent-mobile-delete{
    width:44px !important;
    min-width:44px !important;
    height:44px !important;
    min-height:44px !important;
    padding:0 !important;
    display:grid !important;
    place-items:center !important;
    border:1px solid var(--border) !important;
    border-radius:12px !important;
    background:var(--panel-muted) !important;
    box-shadow:none !important;
    font-size:23px !important;
    line-height:1 !important;
    touch-action:manipulation !important;
  }

  #income .income-recent-mobile-edit{
    color:var(--primary) !important;
  }

  #income .income-recent-mobile-delete{
    color:#ef6b6b !important;
  }

  #income .income-recent-mobile-delete svg{
    width:21px !important;
    height:21px !important;
    fill:none !important;
    stroke:currentColor !important;
    stroke-width:1.9 !important;
    stroke-linecap:round !important;
    stroke-linejoin:round !important;
  }

  /* Selected month is a few shades darker than the chosen interface color. */
  

  /* Month/year labels fill the vertical space of their controls. */
  #income .income-month-block.qp-mobile-period-row #monthSwitcherName,
  #income .income-month-block.qp-mobile-period-row > .income-chart-year-switcher span{
    height:40px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:0 2px !important;
    font-size:18px !important;
    font-weight:700 !important;
    line-height:40px !important;
  }
}

@media(max-width:360px){
  #income .income-month-block.qp-mobile-period-row #monthSwitcherName,
  #income .income-month-block.qp-mobile-period-row > .income-chart-year-switcher span{
    font-size:16px !important;
  }
}


/* Mobile home header stage v19. */
@media(max-width:900px) and (pointer:coarse), (orientation:landscape) and (max-height:560px) and (pointer:coarse){
  /* Remove the inherited empty height below the chart. */
  #income .income-month-chart{
    min-height:104px !important;
    height:104px !important;
    max-height:104px !important;
    margin-top:12px !important;
    margin-bottom:0 !important;
    padding:0 !important;
  }

  #income .income-chart-wrap{
    height:104px !important;
    min-height:104px !important;
    max-height:104px !important;
  }

  

  /* Prevent long-press text selection/copy on the date. */
  #income .income-recent-date{
    -webkit-user-select:none !important;
    user-select:none !important;
    -webkit-touch-callout:none !important;
    cursor:default !important;
  }

  /* Reuse the same visual glyphs as mobile History. */
  

  

  /* Samsung Browser: make the active month unmistakably darker without relying on color-mix. */
  
}


/* Mobile home corrections v20: compact chart/toggle gap, native long-press guard,
   exact History glyph sizing, and a browser-independent active-month color. */
@media(max-width:900px) and (pointer:coarse), (orientation:landscape) and (max-height:560px) and (pointer:coarse){
  /* Cancel the flex gap between the chart and the full-width collapse hit area. */
  #income .income-top > .income-recent.qp-mobile-recent-stack{
    margin-top:-14px !important;
    padding-top:0 !important;
  }

  #income .income-recent.qp-mobile-recent-stack .income-recent-controls{
    min-height:26px !important;
    height:26px !important;
    margin:0 0 6px !important;
  }

  #income .income-recent.qp-mobile-recent-stack .income-recent-toggle{
    width:100% !important;
    min-width:100% !important;
    height:26px !important;
    min-height:26px !important;
    padding:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }

  #income .income-recent.qp-mobile-recent-stack .income-recent-toggle svg{
    width:20px !important;
    height:20px !important;
    margin:0 !important;
  }

  /* Long press belongs to the card actions, not browser text selection/copy. */
  #income .income-recent-card,
  #income .income-recent-card .income-recent-date,
  #income .income-recent-card .income-recent-amount,
  #income .income-recent-card .income-recent-category{
    -webkit-user-select:none !important;
    user-select:none !important;
    -webkit-touch-callout:none !important;
  }

  /* Use the exact visible glyph geometry already used by mobile History. */
  #income .income-recent-mobile-edit{
    font-size:10px !important;
  }
  #income .income-recent-mobile-edit .history-action-pencil{
    display:block !important;
    font-size:10px !important;
    line-height:1 !important;
    font-weight:400 !important;
  }
  #income .income-recent-mobile-delete .history-delete-close{
    display:block !important;
    width:16px !important;
    height:16px !important;
    fill:none !important;
    stroke:currentColor !important;
    stroke-width:2 !important;
    stroke-linecap:round !important;
    stroke-linejoin:round !important;
  }
  #income .income-recent-mobile-delete .history-delete-trash,
  #income .income-recent-mobile-actions .history-action-label{
    display:none !important;
  }

  /* JS resolves the current interface color to RGB and darkens it by ~2 shades. */
  #income #incomeChartSvg .income-chart-bar.selected{
    fill:var(--income-chart-selected,var(--primary)) !important;
    filter:none !important;
    opacity:1 !important;
  }
}


/* Mobile recent-income action icons v21.
   Only the glyphs are changed: button background, border, size and shape stay untouched. */
@media(max-width:900px) and (pointer:coarse), (orientation:landscape) and (max-height:560px) and (pointer:coarse){
  #income .income-recent-mobile-edit .history-action-pencil{
    display:block !important;
    width:22px !important;
    height:22px !important;
    flex:0 0 22px !important;
    font-size:0 !important;
    line-height:0 !important;
    background:#fff !important;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zm17.71-10.21a.996.996 0 0 0 0-1.41l-2.34-2.34a.996.996 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z'/%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 fill='black' d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zm17.71-10.21a.996.996 0 0 0 0-1.41l-2.34-2.34a.996.996 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z'/%3E%3C/svg%3E") center/contain no-repeat !important;
  }

  #income .income-recent-mobile-delete .history-delete-close{
    display:none !important;
  }

  #income .income-recent-mobile-delete .history-delete-trash{
    display:block !important;
    width:20px !important;
    height:20px !important;
    flex:0 0 20px !important;
    background:#fff !important;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16'/%3E%3Cpath d='M9 7V4h6v3'/%3E%3Cpath d='M6.5 7l.8 13h9.4l.8-13'/%3E%3Cpath d='M10 11v5M14 11v5'/%3E%3C/g%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%3Cg fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16'/%3E%3Cpath d='M9 7V4h6v3'/%3E%3Cpath d='M6.5 7l.8 13h9.4l.8-13'/%3E%3Cpath d='M10 11v5M14 11v5'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat !important;
    color:transparent !important;
  }

  #income .income-recent-mobile-delete .history-delete-trash path{
    display:none !important;
  }
}


/* Mobile pencil glyph color v22.
   Force the same pure-white pencil in History and Recent incomes without touching button surfaces. */
@media(max-width:900px) and (pointer:coarse), (orientation:landscape) and (max-height:560px) and (pointer:coarse){
  #history #incomeList > .history-swipe-row .history-action-pencil,
  #income .income-recent-mobile-edit .history-action-pencil{
    display:block !important;
    width:22px !important;
    height:22px !important;
    flex:0 0 22px !important;
    font-size:0 !important;
    line-height:0 !important;
    color:transparent !important;
    opacity:1 !important;
    filter:none !important;
    -webkit-mask:none !important;
    mask:none !important;
    background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zm17.71-10.21a.996.996 0 0 0 0-1.41l-2.34-2.34a.996.996 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z'/%3E%3C/svg%3E") center/contain no-repeat !important;
  }
}


/* Mobile pencil glyph v23.
   Use a real inline SVG so Samsung Browser renders the pencil at full white. */
@media(max-width:900px) and (pointer:coarse), (orientation:landscape) and (max-height:560px) and (pointer:coarse){
  #history #incomeList > .history-swipe-row .history-action-pencil,
  #income .income-recent-mobile-edit .history-action-pencil{
    display:grid !important;
    place-items:center !important;
    width:22px !important;
    height:22px !important;
    flex:0 0 22px !important;
    font-size:0 !important;
    line-height:0 !important;
    background:none !important;
    -webkit-mask:none !important;
    mask:none !important;
    opacity:1 !important;
    filter:none !important;
  }

  #history #incomeList > .history-swipe-row .history-action-pencil-white,
  #income .income-recent-mobile-edit .history-action-pencil-white{
    display:block !important;
    width:22px !important;
    height:22px !important;
    fill:#fff !important;
    stroke:#fff !important;
    stroke-width:.7 !important;
    stroke-linejoin:round !important;
    opacity:1 !important;
    filter:none !important;
  }

  #history #incomeList > .history-swipe-row .history-action-pencil-white path,
  #income .income-recent-mobile-edit .history-action-pencil-white path{
    fill:#fff !important;
    stroke:#fff !important;
    opacity:1 !important;
  }
}


/* Mobile pencil glyph v24.
   Native SVG only: no text glyph, no mask, no inherited icon color. */
@media(max-width:900px) and (pointer:coarse), (orientation:landscape) and (max-height:560px) and (pointer:coarse){
  #history #incomeList > .history-swipe-row svg.history-action-pencil,
  #income .income-recent-mobile-edit svg.history-action-pencil{
    display:block !important;
    width:22px !important;
    height:22px !important;
    flex:0 0 22px !important;
    background:none !important;
    -webkit-mask:none !important;
    mask:none !important;
    color:#fff !important;
    fill:#fff !important;
    stroke:none !important;
    opacity:1 !important;
    filter:drop-shadow(0 0 .7px #fff) !important;
  }

  #history #incomeList > .history-swipe-row svg.history-action-pencil path,
  #income .income-recent-mobile-edit svg.history-action-pencil path{
    fill:#fff !important;
    stroke:none !important;
    opacity:1 !important;
  }
}


/* Mobile pencil glyph v25.
   Render the pencil independently from existing icon markup so Samsung Browser
   cannot tint the original glyph. Button surface/geometry is untouched. */
@media(max-width:900px) and (pointer:coarse), (orientation:landscape) and (max-height:560px) and (pointer:coarse){
  #history #incomeList > .history-swipe-row .edit-income > .history-action-pencil,
  #income .income-recent-mobile-edit > .history-action-pencil{
    display:none !important;
  }

  #history #incomeList > .history-swipe-row .edit-income::before,
  #income .income-recent-mobile-edit::before{
    content:"" !important;
    display:block !important;
    width:22px !important;
    height:22px !important;
    flex:0 0 22px !important;
    background-color:transparent !important;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zm17.71-10.21a.996.996 0 0 0 0-1.41l-2.34-2.34a.996.996 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z'/%3E%3C/svg%3E") !important;
    background-position:center !important;
    background-repeat:no-repeat !important;
    background-size:22px 22px !important;
    opacity:1 !important;
    filter:none !important;
    mix-blend-mode:normal !important;
  }
}


/* Mobile pencil glyph v26.
   One icon only. Cancel v25 pseudo icon and force the real SVG to full white. */
@media(max-width:900px) and (pointer:coarse), (orientation:landscape) and (max-height:560px) and (pointer:coarse){
  #history #incomeList > .history-swipe-row .edit-income::before,
  #income .income-recent-card .income-recent-mobile-actions .income-recent-mobile-edit::before{
    content:none !important;
    display:none !important;
    background:none !important;
  }

  #history #incomeList > .history-swipe-row .edit-income > svg.history-action-pencil,
  #income .income-recent-card .income-recent-mobile-actions .income-recent-mobile-edit > svg.history-action-pencil{
    display:block !important;
    width:22px !important;
    height:22px !important;
    min-width:22px !important;
    min-height:22px !important;
    flex:0 0 22px !important;
    margin:0 !important;
    background:none !important;
    -webkit-mask:none !important;
    mask:none !important;
    color:#ffffff !important;
    fill:#ffffff !important;
    stroke:none !important;
    opacity:1 !important;
    visibility:visible !important;
    filter:brightness(4) contrast(2) saturate(0) !important;
    mix-blend-mode:normal !important;
  }

  #history #incomeList > .history-swipe-row .edit-income > svg.history-action-pencil path,
  #income .income-recent-card .income-recent-mobile-actions .income-recent-mobile-edit > svg.history-action-pencil path{
    fill:#ffffff !important;
    stroke:none !important;
    opacity:1 !important;
  }
}


/* Mobile recent footer controls v27: +25% for "Вся история" and pager. */
@media(max-width:900px) and (pointer:coarse), (orientation:landscape) and (max-height:560px) and (pointer:coarse){
  #income .income-recent.qp-mobile-recent-stack > .income-recent-bottom-actions{
    min-height:33px !important;
  }

  #income .income-recent.qp-mobile-recent-stack > .income-recent-bottom-actions .income-recent-history{
    height:30px !important;
    min-height:30px !important;
    padding:0 3px !important;
    font-size:12.5px !important;
  }

  #income .income-recent.qp-mobile-recent-stack > .income-recent-bottom-actions .income-recent-pager{
    gap:6px !important;
  }

  #income .income-recent.qp-mobile-recent-stack .income-recent-page-btn{
    width:23px !important;
    min-width:23px !important;
    height:23px !important;
    min-height:23px !important;
  }

  #income .income-recent.qp-mobile-recent-stack .income-recent-page-btn svg{
    width:15px !important;
    height:15px !important;
  }

  #income .income-recent.qp-mobile-recent-stack .income-recent-page-indicator{
    min-width:35px !important;
    font-size:12.5px !important;
  }
}


/* Mobile recent-income amount alignment v29. */
@media(max-width:900px) and (pointer:coarse), (orientation:landscape) and (max-height:560px) and (pointer:coarse){
  #income .income-recent.qp-mobile-recent-stack .income-recent-card .income-recent-amount{
    width:100% !important;
    margin-left:0 !important;
    justify-self:stretch !important;
    text-align:center !important;
    transform:translateX(-10px) !important;
  }
}


/* Mobile recent-income date alignment v30. */
@media(max-width:900px) and (pointer:coarse), (orientation:landscape) and (max-height:560px) and (pointer:coarse){
  #income .income-recent.qp-mobile-recent-stack .income-recent-card .income-recent-date{
    transform:translateX(5px) !important;
  }
}


/* Mobile main monthly total position v31. */
@media(max-width:900px) and (pointer:coarse), (orientation:landscape) and (max-height:560px) and (pointer:coarse){
  #income .income-month-block.qp-mobile-period-row #incomeTotal{
    transform:translateY(5px) !important;
  }
}


/* Mobile monthly total swipe target v34. */
@media(max-width:900px) and (pointer:coarse), (orientation:landscape) and (max-height:560px) and (pointer:coarse){
  #income .income-month-block.qp-mobile-period-row #incomeTotal{
    touch-action:pan-y !important;
    -webkit-user-select:none !important;
    user-select:none !important;
    -webkit-touch-callout:none !important;
  }
}


/* Mobile period arrow press state v34: no sticky tap/highlight background. */
@media(max-width:900px) and (pointer:coarse), (orientation:landscape) and (max-height:560px) and (pointer:coarse){
  #income #incomeMonthSwitcher > button,
  #income .income-month-block > .income-chart-year-switcher > button{
    -webkit-tap-highlight-color:transparent !important;
  }

  #income #incomeMonthSwitcher > button:hover,
  #income #incomeMonthSwitcher > button:focus,
  #income #incomeMonthSwitcher > button:focus-visible,
  #income #incomeMonthSwitcher > button:active,
  #income .income-month-block > .income-chart-year-switcher > button:hover,
  #income .income-month-block > .income-chart-year-switcher > button:focus,
  #income .income-month-block > .income-chart-year-switcher > button:focus-visible,
  #income .income-month-block > .income-chart-year-switcher > button:active{
    background:transparent !important;
    outline:none !important;
    box-shadow:none !important;
  }
}


/* Annual mobile categories v39: hard-match the dark card surface. */
@media(max-width:900px) and (pointer:coarse), (orientation:landscape) and (max-height:560px) and (pointer:coarse){
  #incomeAnalytics:not(.is-monthly) .analytics-category-panel{
    background:#00061c !important;
    background-color:#00061c !important;
    background-image:none !important;
    -webkit-appearance:none !important;
    appearance:none !important;
    box-shadow:none !important;
  }

  #incomeAnalytics:not(.is-monthly) .analytics-category-panel::before,
  #incomeAnalytics:not(.is-monthly) .analytics-category-panel::after{
    content:none !important;
    display:none !important;
    background:none !important;
    background-image:none !important;
    box-shadow:none !important;
    opacity:0 !important;
  }
}


/* Annual mobile categories v40: render as normal cards, not native buttons. */
@media(max-width:900px) and (pointer:coarse), (orientation:landscape) and (max-height:560px) and (pointer:coarse){
  #incomeAnalytics:not(.is-monthly) .analytics-category-panel{
    background:var(--panel) !important;
    background-color:var(--panel) !important;
    background-image:none !important;
    box-shadow:none !important;
  }
}


/* Mobile final navigation/history merge v14. */
@media(max-width:900px) and (pointer:coarse), (orientation:landscape) and (max-height:560px) and (pointer:coarse){
  /* Full History now lives inside Последние доходы, so the bottom bar is no longer needed. */
  .sidebar{
    display:none !important;
  }

  .app .content{
    padding-bottom:calc(82px + env(safe-area-inset-bottom)) !important;
  }

  

  #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-bottom-actions{
    justify-content:flex-start !important;
  }

  #income .income-recent.is-history-open > .income-recent-bottom-actions .income-recent-history{
    display:inline-flex !important;
  }

  #income .income-recent-history-panel{
    width:100% !important;
    min-width:0 !important;
    margin:8px 0 0 !important;
    padding:0 !important;
  }

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

  #income .income-recent-history-panel > #history.income-recent-inline-history{
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
  }

  #income .income-recent-history-panel > #history.income-recent-inline-history #incomeList{
    padding-bottom:8px !important;
  }
}


/* Mobile full History compact viewport v15. */
@media(max-width:900px) and (pointer:coarse), (orientation:landscape) and (max-height:560px) and (pointer:coarse){
  /* PDF moved out of Settings; the period picker belongs to that removed control too. */
  #settings #printReportPeriod,
  #settings #printIncomeReportBtn{
    display:none !important;
  }

  /* Search and PDF/print share one 44px row. */
  #income .income-recent-history-panel #historySearchWrap{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    align-items:center !important;
    gap:8px !important;
    width:100% !important;
    min-width:0 !important;
    margin:0 0 10px !important;
  }

  #income .income-recent-history-panel #historySearch{
    width:100% !important;
    min-width:0 !important;
    height:44px !important;
    min-height:44px !important;
    margin:0 !important;
  }

  #income .income-recent-history-panel #historySearchWrap > .income-history-report-actions{
    display:flex !important;
    align-items:center !important;
    width:auto !important;
    margin:0 !important;
  }

  #income .income-recent-history-panel #historySearchWrap .income-history-report-btn{
    width:auto !important;
    min-width:112px !important;
    height:44px !important;
    min-height:44px !important;
    margin:0 !important;
    padding:0 10px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:6px !important;
    border:1px solid color-mix(in srgb,var(--primary) 52%,var(--border)) !important;
    border-radius:13px !important;
    background:color-mix(in srgb,var(--primary) 14%,var(--panel-muted)) !important;
    color:color-mix(in srgb,var(--primary) 76%,var(--text)) !important;
    font:inherit !important;
    font-size:11px !important;
    font-weight:650 !important;
    line-height:1 !important;
    white-space:nowrap !important;
    box-shadow:none !important;
  }

  #income .income-recent-history-panel #historySearchWrap .income-history-report-btn svg{
    width:17px !important;
    height:17px !important;
    flex:0 0 17px !important;
    fill:none !important;
    stroke:currentColor !important;
    stroke-width:1.8 !important;
    stroke-linecap:round !important;
    stroke-linejoin:round !important;
  }

  /* Six 88px history cards + five 8px gaps; the rest scrolls inside the list. */
  #income .income-recent-history-panel #incomeList{
    max-height:568px !important;
    padding:0 3px 0 0 !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    overscroll-behavior-y:contain !important;
    scrollbar-gutter:stable !important;
    scrollbar-width:thin !important;
    scrollbar-color:color-mix(in srgb,var(--text-muted) 48%,transparent) transparent !important;
  }

  #income .income-recent-history-panel #incomeList::-webkit-scrollbar{
    width:6px !important;
  }

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

  #income .income-recent-history-panel #incomeList::-webkit-scrollbar-thumb{
    border-radius:999px !important;
    background:color-mix(in srgb,var(--text-muted) 48%,transparent) !important;
  }

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

@media(max-width:360px){
  #income .income-recent-history-panel #historySearchWrap{
    gap:6px !important;
  }

  #income .income-recent-history-panel #historySearchWrap .income-history-report-btn{
    min-width:98px !important;
    padding:0 7px !important;
    gap:4px !important;
    font-size:10px !important;
  }

  #income .income-recent-history-panel #historySearchWrap .income-history-report-btn svg{
    width:15px !important;
    height:15px !important;
    flex-basis:15px !important;
  }
}


/* Mobile recent/history finishing fixes v16. */
@media(max-width:900px) and (pointer:coarse), (orientation:landscape) and (max-height:560px) and (pointer:coarse){
  /* Full History uses its own scroll area; recent-income pager belongs only to Последние доходы. */
  #income .income-recent.qp-mobile-recent-stack.is-history-open > .income-recent-bottom-actions .income-recent-pager{
    display:none !important;
  }

  /* With the bottom navigation removed, anchor + low in the visible viewport.
     Keep a small visual gap while respecting devices with a real bottom safe area. */
  body .add-income-btn{
    right:16px !important;
    bottom:max(8px,env(safe-area-inset-bottom)) !important;
  }
}

/* Mobile DEV version indicator: keep until final release verification is complete. */
@media(max-width:900px) and (pointer:coarse), (orientation:landscape) and (max-height:560px) and (pointer:coarse){
  #income .qp-dev-panel{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:8px !important;
    width:100% !important;
    min-height:34px !important;
    margin:0 0 10px !important;
    padding:5px 7px 5px 9px !important;
    border:1px solid var(--border) !important;
    border-radius:10px !important;
    background:color-mix(in srgb,var(--panel-muted) 92%,transparent) !important;
    color:var(--text-muted) !important;
    font-size:11px !important;
    line-height:1.15 !important;
    box-sizing:border-box !important;
  }
  #income .qp-dev-panel strong{
    color:var(--text) !important;
    font-weight:650 !important;
  }
  #income .qp-dev-panel button{
    flex:0 0 auto !important;
    width:auto !important;
    min-width:0 !important;
    min-height:26px !important;
    height:26px !important;
    margin:0 !important;
    padding:0 8px !important;
    border:1px solid var(--border) !important;
    border-radius:8px !important;
    background:var(--panel) !important;
    color:var(--text-muted) !important;
    font-size:10px !important;
    line-height:1 !important;
    box-shadow:none !important;
    transform:none !important;
    touch-action:manipulation !important;
  }
}

/* Mobile auth lock: keep the auth viewport fixed while only the card itself may scroll. */
@media(max-width:900px) and (pointer:coarse), (orientation:landscape) and (max-height:560px) and (pointer:coarse){
  body.qp-auth-locked{
    position:fixed !important;
    inset:0 !important;
    width:100% !important;
    height:100dvh !important;
    min-width:0 !important;
    max-width:100% !important;
    min-height:0 !important;
    max-height:100dvh !important;
    margin:0 !important;
    overflow:hidden !important;
    overscroll-behavior:none !important;
  }

  body.qp-auth-locked #qpAuthGate{
    position:fixed !important;
    inset:0 !important;
    width:auto !important;
    height:auto !important;
    min-width:0 !important;
    max-width:none !important;
    min-height:0 !important;
    max-height:none !important;
    margin:0 !important;
    padding:
      max(14px,env(safe-area-inset-top))
      14px
      max(14px,env(safe-area-inset-bottom)) !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:hidden !important;
    overscroll-behavior:none !important;
    box-sizing:border-box !important;
  }

  body.qp-auth-locked #qpAuthGate .qp-auth-card{
    flex:0 1 430px !important;
    width:100% !important;
    max-width:430px !important;
    max-height:calc(100dvh - 28px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    margin:0 !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    overscroll-behavior:contain !important;
    box-sizing:border-box !important;
  }
}



/* DEV55: iPhone standard background lives on a dedicated viewport layer.
   The body stays flat so Safari rubber-band cannot stretch its gradients. */
@supports (-webkit-touch-callout:none){
  @media (pointer:coarse){
    html[data-theme="dark"] body.qp-bg-standard{
      background:#070c14 !important;
    }
    #qpStandardBackgroundLayer{
      display:none;
    }
    html[data-theme="dark"] body.qp-bg-standard #qpStandardBackgroundLayer{
      display:block;
      position:fixed;
      inset:0;
      z-index:-1;
      pointer-events:none;
      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%);
    }
  }
}


/* DEV57: iPhone has no bottom navigation; keep only a small safe-area gap
   instead of the legacy reserved footer space. */
@supports (-webkit-touch-callout:none){
  @media (pointer:coarse){
    .app .content{
      padding-bottom:calc(16px + env(safe-area-inset-bottom)) !important;
    }
    #income .income-recent-history-panel > #history.income-recent-inline-history #incomeList{
      padding-bottom:8px !important;
      margin-bottom:0 !important;
    }
  }
}

/* DEV66: Android no longer has a bottom site navigation. Retain a modest
   gap for the fixed add-income button; keep the iPhone-specific rules intact. */
@media(max-width:900px) and (pointer:coarse), (orientation:landscape) and (max-height:560px) and (pointer:coarse){
  html.qp-android .app .content{
    padding-bottom:calc(56px + env(safe-area-inset-bottom)) !important;
  }
  /* The sticky background belongs to the row, not its transparent trigger.
     Round that actual surface so it cannot leave square blue edges. */
  #incomeForm .category-popup-create:not(.is-editing){
    border-radius:9px;
    overflow:hidden;
  }
  #incomeForm .category-popup-create-trigger:hover,
  #incomeForm .category-popup-create-trigger:active{
    transform:none !important;
  }
}

/* Mobile recent cards use the same content layout as full history. */
@media(max-width:900px) and (pointer:coarse), (orientation:landscape) and (max-height:560px) and (pointer:coarse){
  #income .income-recent.qp-mobile-recent-stack .income-recent-card{
    min-height:88px !important;
    padding:11px 13px !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    grid-template-areas:"amount category" "date category" "description description" !important;
    column-gap:8px !important;
    row-gap:5px !important;
    border:1px solid var(--border) !important;
    border-radius:15px !important;
    background:var(--panel) !important;
    box-shadow:none !important;
  }
  #income .income-recent.qp-mobile-recent-stack .income-recent-card .income-recent-amount{
    margin-left:0 !important;
    text-align:left !important;
    transform:none !important;
    font-size:22px !important;
    line-height:1 !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }
  #income .income-recent.qp-mobile-recent-stack .income-recent-card .income-recent-category{
    align-self:start !important;
    max-width:104px !important;
    padding:4px 7px !important;
    font-size:10px !important;
  }
  #income .income-recent.qp-mobile-recent-stack .income-recent-card .income-recent-date{
    margin-left:0 !important;
    transform:none !important;
    text-align:left !important;
    font-size:12px !important;
    line-height:1.15 !important;
    white-space:normal !important;
    overflow:visible !important;
  }
  #income .income-recent-card [data-android-pending]{
    display:block;
    white-space:normal;
    overflow-wrap:anywhere;
  }
  #income .income-recent-description{
    grid-area:description;
    min-width:0;
    padding-top:1px;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    overflow:hidden;
    overflow-wrap:anywhere;
    color:color-mix(in srgb,var(--text) 82%,var(--text-muted));
    font-size:13px;
    line-height:1.25;
  }
  #income .income-recent-description:empty{display:none;}
  html[data-theme="dark"] #income .income-recent.qp-mobile-recent-stack .income-recent-card{
    background-color:var(--qp-mobile-card) !important;
  }
}