/* Mobile App Shell — phone only. Desktop remains unchanged. */
.mobile-app-header-title,.mobile-more-actions,#mobileBottomNav,.auth-app-brand,.mobile-section-toggle,.mobile-context-add{display:none}

@media(max-width:720px){
  :root{
    --app-bottom-nav-h:68px;
    --app-screen-pad:12px;
    --app-radius:16px;
    --app-shadow:0 2px 12px rgba(28,42,52,.07);
  }

  html{background:var(--bg);overscroll-behavior-y:none}
  body{
    min-height:100dvh;
    background:var(--bg);
    padding:0 0 calc(var(--app-bottom-nav-h) + env(safe-area-inset-bottom));
  }

  /* Login — native app composition instead of a centered website card. */
  .locked{padding-bottom:0}
  .locked>#mobileBottomNav{display:none!important}
  .locked>#authScreen{
    display:flex;
    min-height:100dvh;
    align-items:flex-start;
    justify-content:center;
    padding:
      max(24px,calc(env(safe-area-inset-top) + 14px))
      22px
      max(24px,env(safe-area-inset-bottom));
    background:
      radial-gradient(circle at 50% 0,#eef2ef 0,transparent 38%),
      var(--bg);
  }
  .auth-card{
    width:min(420px,100%);
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
  }
  .auth-app-brand{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    margin:0 0 20px;
  }
  .auth-app-brand img{
    width:78px;
    height:78px;
    border-radius:22px;
    box-shadow:0 10px 26px rgba(45,67,83,.16);
  }
  .auth-app-brand strong{
    margin-top:12px;
    font-size:28px;
    line-height:1.2;
    font-weight:900;
    color:var(--text);
  }
  .auth-app-brand small{
    margin-top:5px;
    color:var(--muted);
    font-size:13px;
    font-weight:600;
  }
  .auth-card h1{
    margin:0 0 4px;
    font-size:20px;
    text-align:center;
  }
  .auth-card>p{
    margin:0 0 18px;
    text-align:center;
    font-size:13px;
  }
  .auth-card label{
    margin-top:14px;
    font-size:13px;
  }
  .auth-card input{
    min-height:54px;
    border-radius:14px;
    padding:12px 14px;
    background:#fff;
    font-size:17px;
    box-shadow:inset 0 0 0 1px rgba(45,67,83,.03);
  }
  .auth-card .actions{margin-top:18px}
  .auth-card .actions button{
    width:100%;
    min-height:54px;
    border-radius:14px;
    font-size:16px;
  }
  .auth-card #authCancel{margin-top:8px}

  /* Compact app header. */
  header{
    position:sticky;
    top:0;
    z-index:70;
    height:calc(58px + env(safe-area-inset-top));
    min-height:calc(58px + env(safe-area-inset-top));
    padding:
      calc(env(safe-area-inset-top) + 7px)
      14px
      7px;
    display:flex;
    flex-wrap:nowrap!important;
    align-items:center;
    justify-content:flex-start!important;
    gap:10px;
    overflow:hidden;
    background:var(--navy);
    border-bottom:0;
    box-shadow:0 1px 0 rgba(255,255,255,.08);
  }
  #menu{display:none!important}
  header .brand{
    flex:1 1 auto;
    width:0;
    min-width:0;
    max-width:calc(100% - 52px);
    display:grid;
    grid-template-columns:34px minmax(0,1fr);
    grid-template-rows:auto auto;
    column-gap:9px;
    align-items:center;
    color:#fff;
  }
  header .brand::before{
    content:"";
    grid-column:1;
    grid-row:1/3;
    width:34px;
    height:34px;
    border-radius:10px;
    background:url("/assets/icons/icon-192.png") center/cover no-repeat;
  }
  header .brand .brand-name{
    grid-column:2;
    grid-row:1;
    display:block;
    min-width:0;
    padding:0!important;
    margin:0;
    border-radius:0!important;
    background:transparent!important;
    color:#fff;
    font-size:17px!important;
    line-height:1.15;
    font-weight:900;
    white-space:nowrap;
    word-break:normal;
    overflow-wrap:normal;
    writing-mode:horizontal-tb;
    text-orientation:mixed;
  }
  header .brand small{display:none}
  .mobile-app-header-title{
    display:block;
    grid-column:2;
    grid-row:2;
    min-width:0;
    padding:0!important;
    margin:0;
    border-radius:0!important;
    background:transparent!important;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    word-break:normal;
    overflow-wrap:normal;
    writing-mode:horizontal-tb;
    text-orientation:mixed;
    color:#dbe4e8!important;
    font-size:10px!important;
    line-height:1.15;
    font-weight:700;
  }
  .header-reminder-bell{
    flex:0 0 42px;
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    padding:0!important;
    border:1px solid rgba(255,255,255,.18)!important;
    border-radius:13px!important;
    background:rgba(255,255,255,.08)!important;
    color:#fff!important;
    display:grid!important;
    place-items:center;
    font-size:0!important;
  }
  .header-reminder-bell svg{width:21px;height:21px;stroke:currentColor}
  .header-reminder-bell .reminder-badge{font-size:9px}
  .auth-tools{display:none!important}

  /* More is a bottom sheet; primary navigation lives at the bottom. */
  #side{
    position:fixed!important;
    inset:auto 0 0 0!important;
    width:100%!important;
    max-width:none!important;
    max-height:min(76dvh,660px)!important;
    padding:22px 14px calc(14px + env(safe-area-inset-bottom))!important;
    border:0!important;
    border-radius:24px 24px 0 0!important;
    background:#fff!important;
    box-shadow:0 -18px 50px rgba(28,42,52,.18)!important;
    transform:translateY(110%)!important;
    transition:transform .22s ease!important;
    overflow:auto!important;
    z-index:105!important;
  }
  #side::before{
    content:"";
    display:block;
    width:42px;
    height:5px;
    border-radius:999px;
    background:#d7d9d8;
    margin:-9px auto 14px;
  }
  #side.open{transform:translateY(0)!important}
  #mobileNavClose{
    display:grid!important;
    place-items:center;
    position:absolute;
    top:13px;
    inset-inline-end:14px;
    width:36px;
    height:36px;
    border-radius:11px;
    font-size:22px;
  }
  #side nav{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
    padding-top:30px;
  }
  #side nav button{
    min-height:50px;
    padding:9px 10px!important;
    border:1px solid var(--border)!important;
    border-radius:13px!important;
    background:var(--card)!important;
    color:var(--text)!important;
    text-align:center!important;
  }
  #side nav button strong{font-size:13px}
  #side nav [data-page="month"],
  #side nav [data-page="savings"],
  #side nav [data-page="bankAccounts"],
  #side nav [data-page="projects"]{display:none!important}
  #side nav button.active{border-color:var(--navy)!important;background:var(--bluebg)!important}
  .mobile-more-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    margin-top:10px;
  }
  .mobile-more-actions button{min-height:46px;border-radius:12px}
  .mobile-more-actions .danger{color:var(--red)}
  #side footer{
    margin-top:12px;
    padding:8px 2px 0;
    text-align:center;
    border-top:0;
    color:var(--muted);
  }
  #mobileNavOverlay{
    position:fixed!important;
    inset:0!important;
    z-index:104!important;
    background:rgba(18,29,36,.42)!important;
    backdrop-filter:blur(2px);
  }
  #mobileNavOverlay[aria-hidden="true"]{display:none!important}

  /* Primary mobile navigation. */
  #mobileBottomNav{
    display:grid;
    position:fixed;
    inset-inline:0;
    bottom:0;
    z-index:95;
    grid-template-columns:repeat(5,minmax(0,1fr));
    height:calc(var(--app-bottom-nav-h) + env(safe-area-inset-bottom));
    padding:6px 5px env(safe-area-inset-bottom);
    border-top:1px solid #e5e1d9;
    background:rgba(255,255,255,.96);
    box-shadow:0 -6px 22px rgba(28,42,52,.07);
    backdrop-filter:blur(18px);
  }
  #mobileBottomNav button{
    min-width:0;
    min-height:56px;
    padding:5px 2px;
    border:0;
    border-radius:12px;
    background:transparent;
    color:#7c898f;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    font-size:10px;
    font-weight:800;
  }
  #mobileBottomNav button svg{
    width:22px;
    height:22px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.9;
    stroke-linecap:round;
    stroke-linejoin:round;
  }
  #mobileBottomNav button.active{color:var(--navy);background:var(--bluebg)}

  /* Content density and app-like cards. */
  main{
    width:100%;
    max-width:none;
    margin:0;
    padding:12px var(--app-screen-pad) calc(18px + var(--app-bottom-nav-h) + env(safe-area-inset-bottom));
  }
  .page>.head{
    margin:2px 0 12px;
    align-items:flex-start;
    gap:8px;
  }
  .page>.head h1{font-size:22px;margin-bottom:2px}
  .page>.head p{font-size:12px;line-height:1.5;margin-top:3px}
  .panel,.group,.stat,.card{border-radius:var(--app-radius)}
  .panel,.group,.card{box-shadow:var(--app-shadow)}

  /* Work month becomes a compact app dashboard. */
  #month .month-work-head{
    position:relative;
    display:grid;
    grid-template-columns:1fr 44px;
    gap:8px;
    margin:2px 0 12px;
    align-items:center;
  }
  #month .month-title-block{grid-column:1}
  #month .month-title-block .page-purpose{
    font-size:10px;
    padding:0;
    border:0;
    background:transparent;
    color:var(--muted);
  }
  #month .month-title-block h1{font-size:24px;margin-top:1px}
  #month .month-options{
    grid-column:2;
    grid-row:1;
    justify-self:end;
    width:44px;
  }
  #month .month-options>summary{
    width:44px;
    height:44px;
    padding:0;
    border-radius:13px;
    display:grid;
    place-items:center;
    font-size:0;
    border:1px solid var(--border);
    background:#fff;
  }
  #month .month-options>summary::after{
    content:"•••";
    font-size:17px;
    letter-spacing:1px;
    line-height:1;
  }
  #month .month-options[open]>.actions{
    position:absolute;
    top:48px;
    inset-inline-end:0;
    width:min(280px,calc(100vw - 24px));
    min-width:0;
    border-radius:15px;
    padding:8px;
    box-shadow:0 16px 36px rgba(28,42,52,.18);
    z-index:80;
  }
  #month .month-switcher{
    grid-column:1/-1;
    grid-row:2;
    display:grid;
    grid-template-columns:42px 1fr 42px;
    gap:7px;
    width:100%;
  }
  #month .month-current{
    min-width:0;
    min-height:46px;
    padding:7px 10px;
    border-radius:14px;
    box-shadow:var(--app-shadow);
  }
  #month .month-current strong{font-size:15px}
  #month .month-arrow{
    width:42px;
    height:46px;
    border-radius:13px;
    background:#fff;
  }

  #monthStats{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;
    margin:0 0 10px;
  }
  #monthStats .stat{
    min-height:102px;
    padding:12px;
    border:1px solid #e6e1d8;
    box-shadow:var(--app-shadow);
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    text-align:start;
  }
  #monthStats .stat:nth-child(5){
    grid-column:1/-1;
    min-height:82px;
    background:var(--bluebg);
  }
  #monthStats .stat span:first-child{font-size:11px;color:var(--muted)}
  #monthStats .stat b{font-size:21px;margin-top:6px}
  #monthStats .stat small{font-size:10px}
  #monthStats .detail-hint{display:none}
  #monthStats .summary-stat::after{
    content:"‹";
    position:absolute;
    inset-inline-end:11px;
    bottom:8px;
    font-size:16px;
    color:var(--navy);
  }
  #monthStats .summary-stat{position:relative}

  #remainingTransfer{margin:0 0 10px}
  #month #remainingTransfer .remaining-saving.month-value-row{
    display:grid!important;
    grid-template-columns:1fr auto!important;
    gap:6px 10px!important;
    padding:14px!important;
    border:1px solid #e6e1d8;
    border-radius:var(--app-radius);
    background:#fff;
  }
  #month #remainingTransfer .drag-spacer{display:none}
  #month #remainingTransfer strong{grid-column:1/-1;font-size:16px}
  #month #remainingTransfer .month-planned-value,
  #month #remainingTransfer .month-actual-value{font-size:12px!important}
  #month #remainingTransfer .actions{
    grid-column:1/-1!important;
    width:100%!important;
    max-width:none!important;
    display:grid;
    gap:6px;
  }
  #month #remainingTransfer .actions>*{width:100%}

  #monthGroups{display:grid;gap:9px}
  #month .month-section{
    margin:0;
    border:1px solid #e6e1d8;
    background:#fff;
    overflow:hidden;
    box-shadow:var(--app-shadow);
  }
  #month .month-section-head{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto 34px;
    align-items:center;
    gap:8px;
    min-height:62px;
    padding:10px 12px;
    border:0;
    background:#fff;
  }
  #month .month-section-head>strong,
  #month .month-section-link{
    min-width:0;
    font-size:15px;
    text-align:start;
  }
  #month .month-section-head-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:5px;
    min-width:0;
  }
  #month .month-section-head-actions b{font-size:14px}
  #month .month-section:not(.mobile-section-open) .month-section-head-actions>:not(b){display:none!important}
  #month .month-section .groupbody{display:none;padding:0 12px 10px}
  #month .month-section.mobile-section-open .groupbody{display:block}
  #month .month-section.mobile-section-open .month-section-head-actions{
    grid-column:1/-1;
    grid-row:2;
    justify-content:flex-start;
    flex-wrap:wrap;
  }
  .mobile-section-toggle{
    display:grid;
    grid-column:3;
    grid-row:1;
    width:34px;
    height:34px;
    padding:0;
    place-items:center;
    border:0;
    border-radius:10px;
    background:var(--bluebg);
    color:var(--navy);
  }
  .mobile-section-toggle svg{
    width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;
    transition:transform .18s ease;
  }
  .mobile-section-open .mobile-section-toggle svg{transform:rotate(90deg)}

  /* Simplify rows inside expanded sections. */
  #month .month-value-row,
  #month .month-category-value-row,
  #month .month-simple-row,
  #month .draggable-line{
    grid-template-columns:22px minmax(0,1fr) auto!important;
    min-height:48px;
    padding:8px 0;
  }
  #month .month-value-row>span:nth-of-type(2),
  #month .month-value-row>span:nth-of-type(3){
    grid-column:2/-1;
    font-size:11px;
  }
  #month .month-value-row>.actions,
  #month .draggable-line>.actions{
    grid-column:2/-1!important;
    width:auto!important;
    max-width:none!important;
    justify-self:start!important;
  }

  /* Installation prompt sits above bottom navigation when browser mode is used. */
  .pwa-install-button{
    bottom:calc(var(--app-bottom-nav-h) + env(safe-area-inset-bottom) + 10px)!important;
    inset-inline:10px!important;
    width:calc(100% - 20px)!important;
  }
  .pwa-update-bar{
    bottom:calc(var(--app-bottom-nav-h) + env(safe-area-inset-bottom) + 10px)!important;
  }

  /* Installed app gets no web-only install affordance. */
  .pwa-standalone .pwa-install-button{display:none!important}
}

@media(min-width:721px){
  #mobileBottomNav,.mobile-more-actions,.mobile-app-header-title,.auth-app-brand{display:none!important}
}


/* 2.5.00 — Headerless mobile, content-first */
@media(max-width:720px){
  /* No permanent top chrome on phones. */
  body:not(.locked)>header{display:none!important}
  body:not(.locked){
    padding-top:0;
  }
  body:not(.locked)>main{
    padding-top:max(10px,env(safe-area-inset-top))!important;
  }

  /* Primary page titles live in content, not in a bar. */
  .page>.head{
    min-height:0;
    margin:0 0 12px;
    padding:2px 2px 0;
    align-items:center;
  }
  .page>.head>div{min-width:0}
  .page>.head h1{
    margin:0;
    font-size:26px;
    line-height:1.2;
    letter-spacing:-.25px;
  }
  .page>.head p{
    margin:5px 0 0;
    max-width:34rem;
    color:var(--muted);
    font-size:12px;
    line-height:1.55;
  }
  #savings>.head p,
  #bankAccounts>.head p,
  #projects>.head p{display:none}

  .mobile-context-add{
    display:grid!important;
    place-items:center;
    flex:0 0 42px;
    width:42px;
    height:42px;
    min-height:42px;
    padding:0!important;
    border:0!important;
    border-radius:50%!important;
    background:var(--navy)!important;
    color:#fff!important;
    font-size:25px!important;
    line-height:1!important;
    box-shadow:0 5px 16px rgba(45,67,83,.16);
  }

  /* Month starts with the month itself; no duplicate page title. */
  #month .month-work-head{
    grid-template-columns:minmax(0,1fr) 40px;
    gap:7px;
    margin:0 0 10px;
  }
  #month .month-title-block{display:none!important}
  #month .month-switcher{
    grid-column:1;
    grid-row:1;
    grid-template-columns:38px minmax(0,1fr) 38px;
    gap:5px;
  }
  #month .month-current{
    min-height:42px;
    border:0;
    background:transparent;
    box-shadow:none;
    padding:2px 4px;
  }
  #month .month-current strong{
    font-size:20px;
    font-weight:900;
    line-height:1.15;
  }
  #month .month-arrow{
    width:38px;
    height:40px;
    border:0;
    background:transparent;
    box-shadow:none;
    color:var(--navy);
    font-size:25px;
  }
  #month .month-options{
    grid-column:2;
    grid-row:1;
    width:40px;
  }
  #month .month-options>summary{
    width:40px;
    height:40px;
    border:0;
    background:transparent;
    border-radius:12px;
  }
  #month .month-options>summary::after{
    font-size:18px;
  }

  /* Summary values use lighter tiles instead of dashboard boxes. */
  #monthStats{
    gap:7px;
    margin-bottom:9px;
  }
  #monthStats .stat{
    min-height:86px;
    padding:10px 11px;
    border:0;
    border-radius:14px;
    background:#fff;
    box-shadow:none;
  }
  #monthStats .stat:nth-child(5){
    min-height:70px;
    background:#edf3f4;
  }
  #monthStats .stat b{font-size:19px}
  #monthStats .stat span:first-child{font-size:10px}
  #monthStats .stat small{font-size:9px}

  #month #remainingTransfer .remaining-saving.month-value-row{
    border:0;
    box-shadow:none;
    background:#fff;
    border-radius:14px;
  }

  #month .month-section{
    border:0;
    border-radius:14px;
    box-shadow:none;
  }
  #month .month-section-head{
    min-height:58px;
    padding:9px 11px;
  }
  .mobile-section-toggle{
    background:#f0f3f3;
  }

  /* Project screen: metric strip + horizontal project selector. */
  #projects .stats.four{
    gap:7px;
    margin:0 0 13px;
  }
  #projects .stats.four .stat{
    min-height:74px;
    padding:9px 10px;
    border:0;
    border-radius:13px;
    background:#fff;
    box-shadow:none;
  }
  #projects .stats.four .stat span{font-size:10px}
  #projects .stats.four .stat b{font-size:18px}
  #projects .stats.four .stat small{font-size:9px}

  #projectsView>.wealth-top-actions{display:none!important}
  #projects .wealth-account-buttons{
    display:flex;
    flex-wrap:nowrap;
    gap:7px;
    margin:2px -2px 14px;
    padding:0 2px 2px;
    overflow-x:auto;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
  }
  #projects .wealth-account-buttons::-webkit-scrollbar{display:none}
  #projects .wealth-account-buttons button{
    flex:0 0 auto;
    min-width:132px;
    min-height:58px;
    padding:9px 12px;
    border:0;
    border-radius:14px;
    background:#fff;
    box-shadow:none;
    scroll-snap-align:start;
  }
  #projects .wealth-account-buttons button.active{
    background:#e9f0f2;
    color:var(--navy);
    outline:1px solid #d6e1e4;
  }
  #projects .wealth-account-buttons button.active small{
    color:var(--muted);
    opacity:1;
  }
  #projects .wealth-account-head{
    padding:10px 2px 8px;
    border:0;
    background:transparent;
    box-shadow:none;
  }
  #projects .wealth-account-head h2{
    font-size:22px;
    margin-bottom:2px;
  }
  #projects .wealth-account-actions{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px;
  }
  #projects .wealth-account-actions button{
    min-height:44px;
    border-radius:12px;
  }

  /* Bottom navigation is lighter and visually flatter. */
  :root{--app-bottom-nav-h:64px}
  #mobileBottomNav{
    height:calc(var(--app-bottom-nav-h) + env(safe-area-inset-bottom));
    padding:5px 5px env(safe-area-inset-bottom);
    border-top:0;
    box-shadow:0 -8px 24px rgba(28,42,52,.06);
  }
  #mobileBottomNav button{
    position:relative;
    min-height:52px;
    gap:2px;
    border-radius:0;
    background:transparent!important;
    font-size:10px;
  }
  #mobileBottomNav button.active{color:var(--navy)}
  #mobileBottomNav button.active::before{
    content:"";
    position:absolute;
    top:0;
    width:24px;
    height:3px;
    border-radius:999px;
    background:var(--navy);
  }
  #mobileBottomNav button svg{
    width:21px;
    height:21px;
  }
  .mobile-more-badge{
    position:absolute;
    top:2px;
    inset-inline-end:18%;
    z-index:2;
    min-width:16px;
    height:16px;
    padding:0 4px;
    border-radius:999px;
    display:grid;
    place-items:center;
    background:var(--red);
    color:#fff;
    font-size:8px;
    line-height:1;
    font-weight:900;
  }

  /* More sheet becomes the only secondary navigation surface. */
  #side{
    max-height:min(72dvh,620px)!important;
    padding-top:18px!important;
  }
  #side nav{
    padding-top:22px;
    gap:7px;
  }
  #side nav button{
    min-height:47px;
    border:0!important;
    background:#f6f7f6!important;
  }
  .mobile-more-actions{
    margin-top:8px;
  }

  /* Browser-only install affordance remains above the bottom bar. */
  .pwa-install-button{
    bottom:calc(var(--app-bottom-nav-h) + env(safe-area-inset-bottom) + 8px)!important;
  }
}


/* 2.5.01 — Month work second-pass polish */
@media(max-width:720px){
  /* Remaining month: concise summary, not a full-size action card. */
  #remainingTransfer{margin:0 0 8px}
  #month #remainingTransfer .remaining-saving.month-value-row{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:5px 12px!important;
    min-height:0!important;
    padding:11px 12px!important;
    margin:0!important;
    border-radius:14px!important;
  }
  #month #remainingTransfer .drag-spacer{display:none!important}
  #month #remainingTransfer strong{
    grid-column:1/-1!important;
    margin:0 0 2px;
    font-size:15px!important;
    line-height:1.25;
  }
  #month #remainingTransfer .month-planned-value,
  #month #remainingTransfer .month-actual-value{
    grid-column:auto!important;
    display:block;
    min-width:0;
    padding:0!important;
    font-size:11px!important;
    line-height:1.5;
    white-space:normal!important;
  }
  #month #remainingTransfer .month-planned-value{color:var(--amber)!important}
  #month #remainingTransfer .month-actual-value{color:var(--navy)!important}
  #month #remainingTransfer .actions{
    grid-column:1/-1!important;
    display:flex!important;
    align-items:center;
    justify-content:flex-start;
    gap:6px!important;
    width:auto!important;
    max-width:none!important;
    margin:3px 0 0!important;
  }
  #month #remainingTransfer .actions>*{
    width:auto!important;
    min-height:30px!important;
    height:auto!important;
    margin:0!important;
    padding:5px 9px!important;
    border-radius:9px!important;
    font-size:11px!important;
  }
  #month #remainingTransfer .actions .pill{
    display:inline-flex;
    align-items:center;
  }

  /* Unified compact section header: title, total, disclosure; actions only when open. */
  #monthGroups{gap:7px}
  #month .month-section{
    border-radius:14px!important;
    overflow:hidden;
  }
  #month .month-section-head{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 34px!important;
    grid-template-rows:auto auto auto;
    gap:2px 8px!important;
    min-height:56px!important;
    padding:10px 12px!important;
    align-items:center!important;
  }
  #month .month-section-head>strong,
  #month .month-section-link{
    grid-column:1;
    grid-row:1;
    justify-self:start;
    min-width:0;
    margin:0!important;
    padding:0!important;
    min-height:0!important;
    border:0!important;
    background:transparent!important;
    color:var(--text)!important;
    font-size:16px!important;
    line-height:1.25;
    font-weight:900!important;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  #month .month-section-link>span{display:none!important}
  #month .month-section-head-actions{
    display:contents!important;
  }
  #month .month-section-total{
    grid-column:1;
    grid-row:2;
    justify-self:start;
    color:var(--muted);
    font-size:12px!important;
    line-height:1.2;
    font-weight:800;
    white-space:nowrap;
  }
  #month .month-section-actions{
    display:none;
    grid-column:1/-1;
    grid-row:3;
    align-items:center;
    gap:6px;
    flex-wrap:wrap;
    padding-top:5px;
  }
  #month .month-section.mobile-section-open .month-section-actions{display:flex}
  #month .month-section-actions .compact-action{
    min-height:30px!important;
    height:30px!important;
    padding:4px 9px!important;
    border-radius:9px!important;
    font-size:11px!important;
  }
  #month .month-section-actions .icon-btn,
  #month .month-section-actions .approval-state{
    flex:0 0 auto;
  }
  #month .month-section:not(.mobile-section-open) .month-section-actions{display:none!important}
  #month .mobile-section-toggle{
    grid-column:2!important;
    grid-row:1/3!important;
    align-self:center;
    width:32px!important;
    height:32px!important;
    min-height:32px!important;
    border-radius:10px!important;
  }
  #month .mobile-section-toggle svg{width:16px;height:16px}

  /* Expanded body: tighter and visually attached to its section header. */
  #month .month-section .groupbody{
    padding:0 12px 8px!important;
  }
  #month .month-section.mobile-section-open .groupbody{
    display:block;
    border-top:1px solid #efede7;
  }

  /* Income / loan rows: name, planned+actual pair, then compact actions. */
  #month .month-section .month-value-row,
  #month .month-section .month-simple-row,
  #month .month-section .draggable-line{
    display:grid!important;
    grid-template-columns:20px minmax(0,1fr) minmax(0,1fr)!important;
    grid-template-rows:auto auto auto;
    column-gap:8px!important;
    row-gap:3px!important;
    min-height:0!important;
    padding:10px 0!important;
    align-items:center!important;
    border-top:1px solid #efede7;
  }
  #month .month-section .groupbody>.month-value-row:first-child,
  #month .month-section .groupbody>.month-simple-row:first-child,
  #month .month-section .groupbody>.draggable-line:first-child{
    border-top:0;
  }
  #month .month-section .month-value-row>.drag-handle,
  #month .month-section .month-simple-row>.drag-handle{
    grid-column:1!important;
    grid-row:1/4!important;
    align-self:start!important;
    width:20px!important;
    height:24px!important;
    margin-top:1px;
    font-size:15px!important;
  }
  #month .month-section .month-value-row>.drag-spacer{
    grid-column:1!important;
    grid-row:1/4!important;
    width:20px!important;
  }
  #month .month-section .month-value-row>strong,
  #month .month-section .month-simple-row>strong{
    grid-column:2/-1!important;
    grid-row:1!important;
    min-width:0;
    margin:0;
    font-size:14px!important;
    line-height:1.35;
    font-weight:800;
  }
  #month .month-section .month-value-row>span:nth-of-type(2),
  #month .month-section .month-simple-row>span:nth-of-type(2){
    grid-column:2!important;
    grid-row:2!important;
    justify-self:start;
    min-width:0;
    color:var(--muted)!important;
    font-size:11px!important;
    line-height:1.45;
    white-space:normal!important;
  }
  #month .month-section .month-value-row>span:nth-of-type(3),
  #month .month-section .month-simple-row>span:nth-of-type(3){
    grid-column:3!important;
    grid-row:2!important;
    justify-self:start;
    min-width:0;
    color:var(--navy)!important;
    font-size:11px!important;
    line-height:1.45;
    white-space:normal!important;
  }
  #month .month-section .month-value-row>.actions,
  #month .month-section .month-simple-row>.actions,
  #month .month-section .draggable-line>.actions{
    grid-column:2/-1!important;
    grid-row:3!important;
    justify-self:start!important;
    display:flex!important;
    align-items:center;
    gap:5px!important;
    width:auto!important;
    max-width:none!important;
    margin:2px 0 0!important;
  }
  #month .month-section .actions .icon-btn{
    flex:0 0 34px!important;
    width:34px!important;
    min-width:34px!important;
    height:34px!important;
    min-height:34px!important;
    padding:0!important;
    border-radius:10px!important;
    font-size:14px!important;
  }
  #month .month-section .actions .pill,
  #month .month-section .approval-state{
    min-height:28px;
    padding:4px 8px;
    font-size:10px!important;
  }

  /* Expense category rows follow the same rhythm. */
  #month .month-expense-category{
    margin:7px 0 0;
    border:0!important;
    border-radius:11px!important;
    background:#f8f9f8!important;
  }
  #month .month-expense-category-head{
    grid-template-columns:20px minmax(0,1fr) auto!important;
    gap:4px 8px!important;
    padding:9px 10px!important;
    background:transparent!important;
  }
  #month .month-expense-category-head>strong{
    font-size:13px!important;
  }
  #month .month-expense-category-head>.month-planned-value,
  #month .month-expense-category-head>.month-actual-value{
    grid-column:2/-1!important;
    font-size:10px!important;
  }
  #month .month-category-actions{
    grid-column:2/-1!important;
    width:auto!important;
    max-width:none!important;
    margin:2px 0 0!important;
    gap:5px!important;
  }
  #month .month-expense-items{padding:0 10px 4px!important}
}


/* Shared icon-aware month actions: text on desktop, symbols on phone. */
.month-icon-action{display:inline-flex;align-items:center;gap:6px}
.month-icon-action svg{display:none}
.month-icon-action .month-action-label{display:inline}


/* 2.5.02 — Icon-first actions inside Month work */
@media(max-width:720px){
  #month .month-icon-action{
    display:inline-grid!important;
    place-items:center!important;
    flex:0 0 34px!important;
    width:34px!important;
    min-width:34px!important;
    max-width:34px!important;
    height:34px!important;
    min-height:34px!important;
    padding:0!important;
    margin:0!important;
    border-radius:10px!important;
    font-size:0!important;
    line-height:1!important;
  }
  #month .month-icon-action svg{
    display:block!important;
    width:17px;
    height:17px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.9;
    stroke-linecap:round;
    stroke-linejoin:round;
    pointer-events:none;
  }
  #month .month-icon-action .month-action-label{display:none!important}

  #month .month-icon-action.primary{
    background:var(--navy)!important;
    color:#fff!important;
    border-color:var(--navy)!important;
  }
  #month .month-icon-action.danger{
    color:var(--red)!important;
    border-color:#deb4b0!important;
    background:#fff!important;
  }
  #month .month-icon-action.saving-move-icon{
    color:var(--green)!important;
    border-color:#bfd1c3!important;
    background:var(--greenbg)!important;
  }
  #month .month-icon-action.approve-icon{
    color:var(--green)!important;
    border-color:#bfd1c3!important;
    background:var(--greenbg)!important;
  }

  /* Section actions stay on one compact symbol row. */
  #month .month-section-actions{
    min-height:34px;
  }
  #month .month-section-actions .month-icon-action{
    flex:0 0 34px!important;
  }

  /* Remaining card uses status text + symbol actions only. */
  #month #remainingTransfer .actions .month-icon-action{
    width:34px!important;
    min-width:34px!important;
    max-width:34px!important;
    height:34px!important;
    padding:0!important;
  }
}


/* 2.5.03 — Keep row actions on the same line as the item name. */
@media(max-width:720px){
  #month .month-section .month-value-row,
  #month .month-section .month-simple-row,
  #month .month-section .draggable-line{
    grid-template-columns:20px minmax(0,1fr) auto!important;
    grid-template-rows:auto auto!important;
    row-gap:4px!important;
  }

  #month .month-section .month-value-row>.drag-handle,
  #month .month-section .month-simple-row>.drag-handle,
  #month .month-section .month-value-row>.drag-spacer{
    grid-column:1!important;
    grid-row:1/3!important;
  }

  #month .month-section .month-value-row>strong,
  #month .month-section .month-simple-row>strong{
    grid-column:2!important;
    grid-row:1!important;
    align-self:center!important;
    min-width:0;
    padding-inline-end:4px;
  }

  #month .month-section .month-value-row>.actions,
  #month .month-section .month-simple-row>.actions,
  #month .month-section .draggable-line>.actions{
    grid-column:3!important;
    grid-row:1!important;
    justify-self:end!important;
    align-self:center!important;
    display:flex!important;
    flex-wrap:nowrap!important;
    gap:4px!important;
    margin:0!important;
    width:auto!important;
    max-width:none!important;
  }

  #month .month-section .month-value-row>span:nth-of-type(2),
  #month .month-section .month-simple-row>span:nth-of-type(2){
    grid-column:2!important;
    grid-row:2!important;
  }

  #month .month-section .month-value-row>span:nth-of-type(3),
  #month .month-section .month-simple-row>span:nth-of-type(3){
    grid-column:3!important;
    grid-row:2!important;
    justify-self:end!important;
    text-align:end!important;
  }

  #month .month-section .month-value-row>.actions .icon-btn,
  #month .month-section .month-value-row>.actions .month-icon-action,
  #month .month-section .month-simple-row>.actions .icon-btn,
  #month .month-section .month-simple-row>.actions .month-icon-action{
    flex:0 0 32px!important;
    width:32px!important;
    min-width:32px!important;
    max-width:32px!important;
    height:32px!important;
    min-height:32px!important;
    border-radius:9px!important;
  }

  #month .month-section .month-value-row>.actions .approval-state,
  #month .month-section .month-simple-row>.actions .approval-state{
    flex:0 0 26px!important;
    width:26px!important;
    height:26px!important;
    min-height:26px!important;
    padding:0!important;
    font-size:13px!important;
  }
}


/* 2.6.00 — Mobile-first Month work redesign */
@media(max-width:720px){
  /* Keep scrolling content visually below the iOS status/safe area. */
  body:not(.locked)::before{
    content:"";
    position:fixed;
    inset:0 0 auto;
    height:env(safe-area-inset-top);
    background:var(--bg);
    z-index:130;
    pointer-events:none;
  }
  html,body{scrollbar-width:none}
  html::-webkit-scrollbar,
  body::-webkit-scrollbar{display:none;width:0;height:0}

  /* Month header: one quiet navigation row. */
  #month .month-work-head{
    min-height:44px;
    margin:0 0 8px!important;
    gap:4px!important;
  }
  #month .month-switcher{
    grid-template-columns:34px minmax(0,1fr) 34px!important;
    gap:2px!important;
  }
  #month .month-current{
    min-height:40px!important;
    padding:0 4px!important;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
  }
  #month .month-current strong{
    font-size:21px!important;
    letter-spacing:-.2px;
  }
  #month .month-arrow{
    width:34px!important;
    height:40px!important;
    min-height:40px!important;
    opacity:.92;
  }
  #month .month-options{
    width:36px!important;
  }
  #month .month-options>summary{
    width:36px!important;
    height:40px!important;
    min-height:40px!important;
    border:0!important;
    border-radius:12px!important;
    background:transparent!important;
    color:var(--navy)!important;
  }
  #month .month-options>summary::after{
    font-size:18px!important;
    color:currentColor;
  }

  /* Real mobile action sheet for "إدارة الشهر". */
  #monthOptionsBackdrop{
    display:none;
    position:fixed;
    inset:0;
    z-index:145;
    width:100%;
    height:100%;
    min-height:100dvh;
    padding:0;
    margin:0;
    border:0;
    border-radius:0;
    background:rgba(20,29,34,.36);
    backdrop-filter:blur(2px);
  }
  #monthOptionsBackdrop[hidden]{display:none!important}
  body.month-options-open{
    overflow:hidden!important;
    overscroll-behavior:none;
  }
  body.month-options-open #monthOptionsBackdrop{
    display:block;
  }
  #month .month-options[open]>.actions{
    position:fixed!important;
    inset:auto 10px calc(var(--app-bottom-nav-h) + env(safe-area-inset-bottom) + 10px) 10px!important;
    z-index:155!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    padding:10px!important;
    margin:0!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:3px!important;
    border:1px solid rgba(45,67,83,.08)!important;
    border-radius:22px!important;
    background:rgba(255,255,255,.98)!important;
    box-shadow:0 22px 60px rgba(20,29,34,.24)!important;
    backdrop-filter:blur(24px);
    transform-origin:bottom center;
    animation:month-sheet-in .16s ease-out;
  }
  #month .month-options[open]>.actions::before{
    content:"إدارة الشهر";
    display:block;
    padding:5px 10px 9px;
    color:var(--muted);
    font-size:12px;
    font-weight:800;
    text-align:start;
  }
  #month .month-options[open]>.actions>button{
    width:100%!important;
    min-height:48px!important;
    height:auto!important;
    padding:10px 12px!important;
    border:0!important;
    border-radius:13px!important;
    background:transparent!important;
    color:var(--text)!important;
    text-align:start!important;
    justify-content:flex-start!important;
    font-size:14px!important;
    font-weight:800!important;
  }
  #month .month-options[open]>.actions>button:active{
    background:#f1f4f3!important;
  }
  #month .month-options[open]>.actions>button.primary{
    color:var(--green)!important;
  }
  #month .month-options[open]>.actions>button.danger{
    color:var(--red)!important;
  }
  @keyframes month-sheet-in{
    from{opacity:0;transform:translateY(14px) scale(.985)}
    to{opacity:1;transform:translateY(0) scale(1)}
  }

  /* Summary cards: same information with less vertical chrome. */
  #monthStats{
    gap:8px!important;
    margin-bottom:8px!important;
  }
  #monthStats .stat{
    min-height:88px!important;
    padding:10px 12px!important;
    border:0!important;
    box-shadow:0 1px 0 rgba(45,67,83,.04)!important;
  }
  #monthStats .stat:nth-child(5){
    min-height:68px!important;
  }
  #monthStats .stat span:first-child{font-size:11px!important}
  #monthStats .stat b{
    margin-top:4px!important;
    font-size:20px!important;
    letter-spacing:.1px;
  }

  /* Remaining month is a compact status strip, not a second dashboard card. */
  #remainingTransfer{margin:0 0 8px!important}
  #month #remainingTransfer .remaining-saving.month-value-row{
    grid-template-columns:minmax(0,1fr) auto auto!important;
    grid-template-rows:auto auto!important;
    gap:3px 9px!important;
    min-height:68px!important;
    padding:10px 12px!important;
    border:0!important;
    border-radius:16px!important;
    box-shadow:0 1px 0 rgba(45,67,83,.04)!important;
  }
  #month #remainingTransfer strong{
    grid-column:1/3!important;
    grid-row:1!important;
    align-self:end;
    margin:0!important;
    font-size:14px!important;
  }
  #month #remainingTransfer .month-planned-value{
    grid-column:1!important;
    grid-row:2!important;
  }
  #month #remainingTransfer .month-actual-value{
    grid-column:2!important;
    grid-row:2!important;
  }
  #month #remainingTransfer .month-planned-value,
  #month #remainingTransfer .month-actual-value{
    font-size:11px!important;
    line-height:1.35!important;
    white-space:nowrap!important;
  }
  #month #remainingTransfer .actions{
    grid-column:3!important;
    grid-row:1/3!important;
    align-self:center!important;
    justify-self:end!important;
    display:flex!important;
    flex-wrap:nowrap!important;
    gap:4px!important;
    margin:0!important;
    width:auto!important;
  }
  #month #remainingTransfer .actions>*{
    min-height:30px!important;
    height:30px!important;
    padding:4px 8px!important;
    border-radius:10px!important;
  }
  #month #remainingTransfer .actions .month-icon-action{
    width:30px!important;
    min-width:30px!important;
    max-width:30px!important;
    padding:0!important;
  }

  /* Flatter sections: section header + list, no cards inside cards. */
  #monthGroups{gap:8px!important}
  #month .month-section{
    border:0!important;
    border-radius:18px!important;
    background:#fff!important;
    box-shadow:0 1px 0 rgba(45,67,83,.05)!important;
  }
  #month .month-section-head{
    grid-template-columns:minmax(0,1fr) auto 34px!important;
    grid-template-rows:auto auto!important;
    min-height:62px!important;
    gap:2px 7px!important;
    padding:10px 12px!important;
  }
  #month .month-section-head>strong,
  #month .month-section-link{
    grid-column:1!important;
    grid-row:1!important;
    font-size:17px!important;
    letter-spacing:-.1px;
  }
  #month .month-section-total{
    grid-column:1!important;
    grid-row:2!important;
    font-size:11px!important;
    color:var(--muted)!important;
  }
  #month .month-section-actions{
    grid-column:2!important;
    grid-row:1/3!important;
    align-self:center!important;
    justify-self:end!important;
    flex-wrap:nowrap!important;
    gap:3px!important;
    padding:0!important;
    min-height:30px!important;
  }
  #month .month-section.mobile-section-open .month-section-actions{
    display:flex!important;
  }
  #month .mobile-section-toggle{
    grid-column:3!important;
    grid-row:1/3!important;
    width:32px!important;
    height:32px!important;
    min-height:32px!important;
    border:0!important;
    border-radius:11px!important;
    background:#f1f4f4!important;
    color:var(--navy)!important;
  }
  #month .month-section .groupbody{
    padding:0 12px 5px!important;
  }
  #month .month-section.mobile-section-open .groupbody{
    border-top:1px solid #f0eee9!important;
  }

  /* Financial rows: two calm lines, actions beside the name. */
  #month .month-section .month-value-row,
  #month .month-section .month-simple-row,
  #month .month-section .draggable-line{
    grid-template-columns:17px minmax(0,1fr) auto!important;
    grid-template-rows:auto auto!important;
    column-gap:7px!important;
    row-gap:2px!important;
    padding:9px 0!important;
    border-top:1px solid #f0eee9!important;
  }
  #month .month-section .month-value-row>.drag-handle,
  #month .month-section .month-simple-row>.drag-handle,
  #month .month-section .month-value-row>.drag-spacer{
    grid-column:1!important;
    grid-row:1/3!important;
    width:17px!important;
    opacity:.55;
  }
  #month .month-section .month-value-row>strong,
  #month .month-section .month-simple-row>strong{
    grid-column:2!important;
    grid-row:1!important;
    padding-inline-end:2px!important;
    font-size:14px!important;
    line-height:1.3!important;
    font-weight:850!important;
  }
  #month .month-section .month-value-row>span:nth-of-type(2),
  #month .month-section .month-simple-row>span:nth-of-type(2){
    grid-column:2!important;
    grid-row:2!important;
    font-size:10.5px!important;
    color:var(--muted)!important;
  }
  #month .month-section .month-value-row>span:nth-of-type(3),
  #month .month-section .month-simple-row>span:nth-of-type(3){
    grid-column:3!important;
    grid-row:2!important;
    font-size:10.5px!important;
    color:var(--navy)!important;
    text-align:end!important;
  }
  #month .month-section .month-value-row>.actions,
  #month .month-section .month-simple-row>.actions,
  #month .month-section .draggable-line>.actions{
    grid-column:3!important;
    grid-row:1!important;
    gap:2px!important;
  }

  /* One icon language: quiet neutrals, color only for meaning. */
  #month .month-section .actions .icon-btn,
  #month .month-section .actions .month-icon-action,
  #month .month-section-actions .icon-btn,
  #month .month-section-actions .month-icon-action{
    flex:0 0 30px!important;
    width:30px!important;
    min-width:30px!important;
    max-width:30px!important;
    height:30px!important;
    min-height:30px!important;
    padding:0!important;
    border:0!important;
    border-radius:10px!important;
    background:#f2f4f3!important;
    color:#607078!important;
    box-shadow:none!important;
  }
  #month .month-section .actions .approve-icon,
  #month .month-section-actions .approve-icon{
    background:#eef5f0!important;
    color:var(--green)!important;
  }
  #month .month-section .actions .saving-move-icon{
    background:#faf6ec!important;
    color:#987338!important;
  }
  #month .month-section .actions .danger,
  #month .month-section .actions .exclude-icon{
    background:#fbf2f1!important;
    color:#a25f5a!important;
  }
  #month .month-section .actions .approval-state,
  #month .month-section-actions .approval-state{
    flex:0 0 23px!important;
    width:23px!important;
    min-width:23px!important;
    height:23px!important;
    min-height:23px!important;
    padding:0!important;
    border:0!important;
    font-size:12px!important;
    box-shadow:none!important;
  }

  /* Expense categories are list groups rather than nested cards. */
  #month .month-expense-category{
    margin:2px 0 0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  #month .month-expense-category-head{
    padding:8px 0!important;
    border-top:1px solid #f0eee9!important;
    background:transparent!important;
  }
  #month .month-expense-items{
    padding:0 0 2px!important;
  }
}


/* Mobile action surfaces inserted by mobile-app-shell.mjs. */
.mobile-month-quick-actions,
.mobile-row-menu-trigger,
.mobile-section-menu-trigger,
#mobileMonthActionBackdrop,
#mobileMonthActionSheet{display:none}

/* 2.7.00 — App-style Month work: hierarchy first, details on demand. */
@media(max-width:720px){
  /* Month top navigation is deliberately quiet. */
  #month .month-work-head{
    min-height:42px!important;
    margin:0 0 9px!important;
  }
  #month .month-switcher{
    grid-template-columns:32px minmax(0,1fr) 32px!important;
  }
  #month .month-current strong{
    font-size:21px!important;
    font-weight:900!important;
  }
  #month .month-current .approval-state{
    width:20px!important;
    height:20px!important;
    min-height:20px!important;
    font-size:10px!important;
    border:0!important;
    box-shadow:none!important;
  }

  /* One financial hero + four supporting metrics instead of five equal cards. */
  #monthStats{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
    padding:10px!important;
    margin:0 0 9px!important;
    border:0!important;
    border-radius:22px!important;
    background:#fff!important;
    box-shadow:0 4px 18px rgba(28,42,52,.055)!important;
  }
  #monthStats .stat{
    min-height:58px!important;
    padding:8px 10px!important;
    border:0!important;
    border-radius:14px!important;
    background:#f7f8f7!important;
    box-shadow:none!important;
    align-items:flex-start!important;
    justify-content:center!important;
    text-align:start!important;
  }
  #monthStats .stat span:first-child{
    font-size:10px!important;
    line-height:1.25!important;
    color:var(--muted)!important;
  }
  #monthStats .stat b{
    margin-top:3px!important;
    font-size:16px!important;
    line-height:1.2!important;
    font-weight:900!important;
  }
  #monthStats .stat small{
    margin-top:1px!important;
    font-size:8px!important;
  }
  #monthStats .summary-stat::after{
    display:none!important;
  }
  #monthStats .stat:nth-child(5){
    order:-1!important;
    grid-column:1/-1!important;
    min-height:126px!important;
    padding:18px 16px!important;
    border-radius:19px!important;
    background:
      radial-gradient(circle at 18% 8%,rgba(255,255,255,.72),transparent 36%),
      linear-gradient(145deg,#eaf2f3,#eef4f0)!important;
    align-items:center!important;
    text-align:center!important;
  }
  #monthStats .stat:nth-child(5) span:first-child{
    font-size:12px!important;
    font-weight:800!important;
    color:#617178!important;
  }
  #monthStats .stat:nth-child(5) b{
    margin-top:6px!important;
    font-size:34px!important;
    letter-spacing:.3px;
    color:var(--text)!important;
  }
  #monthStats .stat:nth-child(5) small{
    font-size:10px!important;
    color:var(--muted)!important;
  }

  /* Fast, familiar app shortcuts. */
  #mobileMonthQuickActions{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:4px;
    margin:0 0 9px;
    padding:9px 6px 8px;
    border-radius:19px;
    background:#fff;
    box-shadow:0 3px 16px rgba(28,42,52,.045);
  }
  #mobileMonthQuickActions button{
    min-width:0!important;
    min-height:68px!important;
    padding:4px 2px!important;
    border:0!important;
    border-radius:14px!important;
    background:transparent!important;
    color:var(--text)!important;
    display:flex!important;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
    font-size:10px!important;
    font-weight:800!important;
    box-shadow:none!important;
  }
  #mobileMonthQuickActions button:active{
    background:#f4f6f5!important;
  }
  #mobileMonthQuickActions button:disabled{
    opacity:.36!important;
  }
  #mobileMonthQuickActions .quick-icon{
    width:40px;
    height:40px;
    display:grid;
    place-items:center;
    border-radius:13px;
    background:#f2f5f4;
    color:var(--navy);
  }
  #mobileMonthQuickActions button:nth-child(1) .quick-icon{background:#edf4ef;color:var(--green)}
  #mobileMonthQuickActions button:nth-child(2) .quick-icon{background:#f8f3e9;color:#987338}
  #mobileMonthQuickActions button:nth-child(3) .quick-icon{background:#edf2f5;color:var(--navy)}
  #mobileMonthQuickActions button:nth-child(4) .quick-icon{background:#f1f1f4;color:#657078}
  #mobileMonthQuickActions svg{
    width:20px;
    height:20px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
  }

  /* Remaining-transfer information is secondary to the hero. */
  #month #remainingTransfer .remaining-saving.month-value-row{
    min-height:58px!important;
    padding:9px 11px!important;
    border-radius:16px!important;
    background:#fff!important;
    box-shadow:0 2px 12px rgba(28,42,52,.035)!important;
  }
  #month #remainingTransfer strong{
    font-size:12px!important;
    font-weight:850!important;
    color:var(--text)!important;
  }
  #month #remainingTransfer .month-planned-value,
  #month #remainingTransfer .month-actual-value{
    font-size:9.5px!important;
  }
  #month #remainingTransfer .actions .pill{
    min-height:26px!important;
    padding:3px 7px!important;
    border:0!important;
    font-size:9px!important;
  }

  /* Sections read like an app list, not cards nested inside cards. */
  #monthGroups{
    display:block!important;
  }
  #month .month-section{
    margin:0 0 8px!important;
    border:0!important;
    border-radius:19px!important;
    background:#fff!important;
    box-shadow:0 3px 16px rgba(28,42,52,.045)!important;
    overflow:hidden!important;
  }
  #month .month-section-head{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto auto!important;
    grid-template-rows:auto auto!important;
    min-height:64px!important;
    padding:11px 12px!important;
    gap:2px 5px!important;
    border:0!important;
    background:#fff!important;
  }
  #month .month-section-head>strong,
  #month .month-section-link{
    grid-column:1!important;
    grid-row:1!important;
    align-self:end!important;
    font-size:17px!important;
    font-weight:900!important;
    line-height:1.2!important;
  }
  #month .month-section-total{
    grid-column:1!important;
    grid-row:2!important;
    align-self:start!important;
    font-size:11px!important;
    font-weight:750!important;
    color:var(--muted)!important;
  }
  #month .month-section-actions{
    display:none!important;
  }
  #month .mobile-section-toggle{
    grid-column:3!important;
    grid-row:1/3!important;
    width:32px!important;
    height:32px!important;
    min-height:32px!important;
    border:0!important;
    border-radius:11px!important;
    background:#f2f5f4!important;
    color:var(--navy)!important;
  }
  #month .mobile-section-menu-trigger{
    display:grid!important;
    grid-column:2!important;
    grid-row:1/3!important;
    place-items:center;
    align-self:center;
    width:32px!important;
    height:32px!important;
    min-height:32px!important;
    padding:0!important;
    border:0!important;
    border-radius:11px!important;
    background:transparent!important;
    color:#77848a!important;
    font-size:18px!important;
    letter-spacing:1px;
    box-shadow:none!important;
  }
  #month .month-section .groupbody{
    padding:0 12px 4px!important;
  }
  #month .month-section.mobile-section-open .groupbody{
    border-top:1px solid #f0efeb!important;
  }

  /* Row = name/status, values, one menu. */
  #month .month-section .month-value-row,
  #month .month-section .month-simple-row,
  #month .month-section .draggable-line{
    grid-template-columns:14px minmax(0,1fr) 34px!important;
    grid-template-rows:auto auto!important;
    min-height:60px!important;
    padding:9px 0!important;
    column-gap:7px!important;
    row-gap:2px!important;
    border-top:1px solid #f1f0ec!important;
    background:transparent!important;
  }
  #month .month-section .groupbody>.month-value-row:first-child,
  #month .month-section .groupbody>.month-simple-row:first-child,
  #month .month-section .groupbody>.draggable-line:first-child{
    border-top:0!important;
  }
  #month .month-section .month-value-row>.drag-handle,
  #month .month-section .month-simple-row>.drag-handle,
  #month .month-section .month-value-row>.drag-spacer{
    grid-column:1!important;
    grid-row:1/3!important;
    width:14px!important;
    height:22px!important;
    margin:0!important;
    align-self:start!important;
    opacity:.4!important;
    font-size:13px!important;
  }
  #month .month-section .month-value-row>strong,
  #month .month-section .month-simple-row>strong{
    grid-column:2!important;
    grid-row:1!important;
    min-width:0;
    padding:0!important;
    align-self:end!important;
    font-size:14px!important;
    line-height:1.3!important;
    font-weight:850!important;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  #month .month-section .month-value-row>strong .ledger-note,
  #month .month-section .month-simple-row>strong .ledger-note{
    display:none!important;
  }
  #month .month-section .mobile-row-status{
    display:inline-flex;
    margin-inline-start:5px;
    padding:2px 5px;
    border-radius:999px;
    background:#edf4ef;
    color:var(--green);
    font-size:8px;
    font-weight:850;
    vertical-align:2px;
  }
  #month .month-section .mobile-row-status.excluded{
    background:#fbf1f0;
    color:#a25f5a;
  }
  #month .month-section .month-value-row>span:nth-of-type(2),
  #month .month-section .month-simple-row>span:nth-of-type(2){
    grid-column:2!important;
    grid-row:2!important;
    justify-self:start!important;
    font-size:10px!important;
    line-height:1.35!important;
    color:var(--muted)!important;
    white-space:nowrap!important;
  }
  #month .month-section .month-value-row>span:nth-of-type(3),
  #month .month-section .month-simple-row>span:nth-of-type(3){
    grid-column:2!important;
    grid-row:2!important;
    justify-self:end!important;
    padding-inline-end:2px;
    font-size:10px!important;
    line-height:1.35!important;
    color:var(--navy)!important;
    white-space:nowrap!important;
  }
  #month .month-section .month-row-has-menu>.actions{
    display:none!important;
  }
  #month .month-section .mobile-row-menu-trigger{
    display:grid!important;
    grid-column:3!important;
    grid-row:1/3!important;
    place-items:center;
    align-self:center;
    width:32px!important;
    height:32px!important;
    min-height:32px!important;
    padding:0!important;
    margin:0!important;
    border:0!important;
    border-radius:11px!important;
    background:#f3f5f4!important;
    color:#6f7d83!important;
    font-size:18px!important;
    line-height:1!important;
    letter-spacing:1px;
    box-shadow:none!important;
  }

  /* Expense categories become lightweight dividers. */
  #month .month-expense-category{
    margin:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
  }
  #month .month-expense-category-head{
    min-height:52px!important;
    padding:8px 0!important;
    border-top:1px solid #f0efeb!important;
    background:transparent!important;
  }
  #month .month-expense-category-head>strong{
    font-size:12px!important;
    font-weight:850!important;
  }
  #month .month-expense-items{
    padding:0!important;
  }

  /* Reusable iOS-like action sheet for row and section actions. */
  #mobileMonthActionBackdrop{
    display:block;
    position:fixed;
    inset:0;
    z-index:180;
    border:0;
    border-radius:0;
    background:rgba(18,27,32,.38);
    backdrop-filter:blur(2px);
  }
  #mobileMonthActionBackdrop[hidden]{display:none!important}
  #mobileMonthActionSheet{
    display:block;
    position:fixed;
    inset:auto 10px calc(var(--app-bottom-nav-h) + env(safe-area-inset-bottom) + 10px) 10px;
    z-index:190;
    padding:8px;
    border-radius:22px;
    background:rgba(255,255,255,.985);
    box-shadow:0 24px 70px rgba(18,27,32,.27);
    backdrop-filter:blur(24px);
    transform-origin:bottom center;
    animation:month-action-sheet-in .16s ease-out;
  }
  #mobileMonthActionSheet[hidden]{display:none!important}
  #mobileMonthActionSheet .mobile-action-sheet-title{
    padding:6px 10px 9px;
    color:var(--muted);
    font-size:11px;
    font-weight:800;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  #mobileMonthActionSheet .mobile-action-sheet-actions{
    display:grid;
    gap:2px;
  }
  #mobileMonthActionSheet .mobile-action-sheet-button{
    width:100%!important;
    min-height:48px!important;
    padding:10px 12px!important;
    border:0!important;
    border-radius:13px!important;
    background:transparent!important;
    color:var(--text)!important;
    text-align:start!important;
    font-size:14px!important;
    font-weight:800!important;
    box-shadow:none!important;
  }
  #mobileMonthActionSheet .mobile-action-sheet-button:active{
    background:#f2f4f3!important;
  }
  #mobileMonthActionSheet .mobile-action-sheet-button.danger{
    color:var(--red)!important;
  }
  #mobileMonthActionSheet .mobile-action-sheet-button:disabled{
    opacity:.35!important;
  }
  body.mobile-month-action-open{
    overflow:hidden!important;
    overscroll-behavior:none!important;
  }
  @keyframes month-action-sheet-in{
    from{opacity:0;transform:translateY(16px) scale(.985)}
    to{opacity:1;transform:translateY(0) scale(1)}
  }
}


/* 2.7.01 — Mobile financial typography: read like a banking app, not a spreadsheet. */
@media(max-width:720px){
  #month .month-section .groupbody{
    padding:4px 14px 9px!important;
  }

  /* Remove the table rhythm: no row rules, separation comes from whitespace. */
  #month .month-section .month-value-row,
  #month .month-section .month-simple-row,
  #month .month-section .draggable-line{
    grid-template-columns:10px minmax(0,1fr) 28px!important;
    grid-template-rows:auto auto auto!important;
    min-height:72px!important;
    margin:2px 0!important;
    padding:11px 1px!important;
    column-gap:7px!important;
    row-gap:3px!important;
    border-top:0!important;
    border-bottom:0!important;
    background:transparent!important;
  }
  #month .month-section .groupbody>.month-value-row:first-child,
  #month .month-section .groupbody>.month-simple-row:first-child,
  #month .month-section .groupbody>.draggable-line:first-child{
    border-top:0!important;
  }

  /* Reorder affordance stays available but visually recedes. */
  #month .month-section .month-value-row>.drag-handle,
  #month .month-section .month-simple-row>.drag-handle,
  #month .month-section .month-value-row>.drag-spacer{
    grid-column:1!important;
    grid-row:1/4!important;
    width:10px!important;
    height:20px!important;
    margin-top:1px!important;
    opacity:.18!important;
    font-size:11px!important;
  }

  /* Item name owns the first visual level. */
  #month .month-section .month-value-row>strong,
  #month .month-section .month-simple-row>strong{
    grid-column:2!important;
    grid-row:1!important;
    align-self:end!important;
    min-width:0;
    padding:0!important;
    color:#25343c!important;
    font-size:15.5px!important;
    line-height:1.32!important;
    font-weight:900!important;
    letter-spacing:-.08px;
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
  }

  /* Normal approved state is intentionally silent; only exceptions use badges. */
  #month .month-section .mobile-row-status{
    margin-inline-start:6px!important;
    padding:2px 6px!important;
    font-size:8.5px!important;
    font-weight:850!important;
    vertical-align:2px;
  }
  #month .month-section .mobile-row-status.pending{
    background:#faf4e8!important;
    color:#92703a!important;
  }
  #month .month-section .mobile-row-status.excluded{
    background:#fbf1f0!important;
    color:#a25f5a!important;
  }

  /* Original value spans remain the functional source but the decorated view is used visually. */
  #month .month-section .mobile-typography-row>span:nth-of-type(2),
  #month .month-section .mobile-typography-row>span:nth-of-type(3){
    display:none!important;
  }
  #month .mobile-row-money{
    grid-column:2!important;
    grid-row:2/4!important;
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:1px;
    padding-top:1px;
  }
  #month .mobile-row-actual-number{
    display:flex;
    align-items:baseline;
    gap:5px;
    min-width:0;
    color:#2d4353;
    font-size:15.5px;
    line-height:1.22;
    font-weight:900;
    letter-spacing:.1px;
  }
  #month .mobile-row-actual-number .mobile-money-value{
    direction:ltr;
    unicode-bidi:isolate;
  }
  #month .mobile-row-plan-note{
    color:#8b969b;
    font-size:9.5px;
    line-height:1.35;
    font-weight:650;
  }
  #month .mobile-row-plan-note .mobile-money-value{
    direction:ltr;
    unicode-bidi:isolate;
  }
  #month .mobile-row-diff{
    margin-inline-start:5px;
    font-size:8.5px!important;
    font-weight:800!important;
  }

  /* Fallback for rows that contain an editable input and cannot be decorated safely. */
  #month .month-section .month-value-row:not(.mobile-typography-row)>span:nth-of-type(3),
  #month .month-section .month-simple-row:not(.mobile-typography-row)>span:nth-of-type(3){
    grid-column:2!important;
    grid-row:2!important;
    justify-self:start!important;
    color:#2d4353!important;
    font-size:14.5px!important;
    line-height:1.3!important;
    font-weight:900!important;
  }
  #month .month-section .month-value-row:not(.mobile-typography-row)>span:nth-of-type(2),
  #month .month-section .month-simple-row:not(.mobile-typography-row)>span:nth-of-type(2){
    grid-column:2!important;
    grid-row:3!important;
    justify-self:start!important;
    color:#8b969b!important;
    font-size:9.5px!important;
    line-height:1.3!important;
    font-weight:650!important;
  }

  /* One quiet menu target, not another visual column. */
  #month .month-section .mobile-row-menu-trigger{
    grid-column:3!important;
    grid-row:1/4!important;
    align-self:center!important;
    width:28px!important;
    min-width:28px!important;
    height:28px!important;
    min-height:28px!important;
    border-radius:9px!important;
    background:transparent!important;
    color:#859197!important;
    font-size:16px!important;
    letter-spacing:.5px!important;
  }
  #month .month-section .mobile-row-menu-trigger:active{
    background:#f1f4f3!important;
  }

  /* Category separators should not recreate an Excel table. */
  #month .month-expense-category-head{
    border-top:0!important;
    padding:10px 0 6px!important;
  }
  #month .month-expense-category+.month-expense-category{
    margin-top:5px!important;
  }
}