/* ═══ MOBILE RESPONSIVE ═══ */
@media (max-width: 1024px) {
  .sb{width:0;overflow:hidden;position:fixed;z-index:1000;transition:width .2s;}
  .sb.mob-open{width:var(--sw);box-shadow:4px 0 20px rgba(0,0,0,.15);overflow-y:auto;}
  .sb.mob-open .ni{padding:7px 14px 7px 16px;font-size:12.5px;}
  .sb.mob-open .ns{padding:12px 18px 4px;}
  .topbar{left:0;}
  .main{margin-left:0;}
  .g2,.g-srv{grid-template-columns:1fr !important;}
  .gw{grid-template-columns:1fr !important;}
  .g3{grid-template-columns:1fr 1fr !important;}
  .rgb{grid-template-columns:1fr 1fr !important;}
  .sc-grid{grid-template-columns:1fr 1fr !important;}
  .kpi-strip{flex-wrap:wrap;}
  .kpi-strip .sc{min-width:0;flex:1;}
}
@media (max-width: 768px) {
  :root{font-size:12px;}
  .topbar{padding:0 10px;gap:8px;}
  .tb-search{width:140px;} /* narrower search on tablet */
  .tb-acts .btn{font-size:10px;padding:5px 8px;} /* smaller text buttons */
  .ph{flex-direction:column;align-items:flex-start;gap:10px;}
  .ph > div:last-child{flex-wrap:wrap;}
  .rgb{grid-template-columns:1fr 1fr !important;}
  .g3{grid-template-columns:1fr !important;}
  #docker-dashboard-analytics{grid-template-columns:1fr !important;}
  .fr{flex-direction:column;}
  /* Tables: horizontal scroll instead of breaking layout */
  .tbl{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;font-size:11px;}
  .tbl th,.tbl td{padding:6px 8px;white-space:nowrap;}
  /* Stat strip: 3 columns on tablet */
  /* minmax(0,1fr): a bare 1fr will not shrink below its content, and one
     long value (Bandwidth's "Top consumer" domain) pushed the page sideways. */
  .stat-strip{grid-template-columns:repeat(3,minmax(0,1fr)) !important;}
  .stat-strip .sc-val{overflow-wrap:anywhere;}
  .srv-card{padding:12px;}
  .card{border-radius:8px;}
  .dtabs{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;}
  .dtab{white-space:nowrap;font-size:11.5px;padding:8px 12px;}
  /* App type cards: 3 columns on tablet */
  #nsw-app-type-cards{grid-template-columns:repeat(3,1fr) !important;}
  /* Marketplace: 2 columns on tablet */
  .mp-grid{grid-template-columns:repeat(2,1fr) !important;}
  /* Modal: full width on mobile */
  .modal{max-width:95vw !important;}
  .modal.wide{max-width:95vw !important;margin:10px;}
  .modal .fl{overflow-wrap:break-word;word-break:break-word;}
  /* Views */
  #view-serversettings,#view-settings,#view-addserver{max-width:100% !important;}
  #view-settings .card{grid-column:1/-1;}
  #view-settings > div{grid-template-columns:1fr !important;}
  #view-serversettings > div:nth-child(2){grid-template-columns:1fr !important;}
  #wizard-step2 > div{grid-template-columns:1fr !important;}
  /* Settings notification channels inner grid */
  #view-settings .card [style*="grid-template-columns"]{grid-template-columns:1fr !important;}
  /* Activity log: wrap header, full-width search */
  #view-activitylog .ch{flex-wrap:wrap;gap:8px;}
  #view-activitylog .ch > div:last-child{width:100% !important;max-width:100%;}
  /* Notification panel full width on small screens */
  .np{width:min(340px,100vw) !important;}
  /* Maintenance schedule */
  #maint-sched-btns{flex-wrap:wrap;}
  /* Terminal/redis/filemanager page header actions wrap */
  #view-terminal .ph > div:last-child,
  #view-redis .ph > div:last-child,
  #view-filemanager .ph > div:last-child,
  #view-monitoring .ph > div:last-child{flex-wrap:wrap;}
}
@media (max-width: 480px) {
  :root{font-size:11px;}
  /* ── Topbar: compact on mobile ── */
  .topbar{padding:0 10px;gap:6px;height:48px;}
  .tb-bc{font-size:11px;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
  .tb-search{display:none !important;}
  .tb-acts{gap:4px;flex-shrink:0;margin-left:auto;}
  .tb-acts .btn{display:none !important;}  /* hide text buttons: +New Site, Sync Now */
  .tb-btn{width:30px;height:30px;}
  .tb-btn svg{width:13px;height:13px;}
  .tb-kbd{display:none !important;}

  .ph-title{font-size:17px;}
  .sc-val{font-size:22px;}
  /* KPI cards: 2 columns */
  .sc-grid{grid-template-columns:repeat(2,1fr) !important;}
  /* App type cards: 2 columns on small mobile */
  #nsw-app-type-cards{grid-template-columns:repeat(2,1fr) !important;}
  /* Marketplace: 1 column on small mobile */
  .mp-grid{grid-template-columns:1fr !important;}
  /* Bandwidth stats: 2x2 grid on mobile */
  #bw-dash-stats{grid-template-columns:repeat(2,1fr) !important;}
  #bw-kpi-strip{grid-template-columns:repeat(2,1fr) !important;}
  #dash-quick-stats{grid-template-columns:repeat(2,1fr) !important;}
  /* Sidebar mobile tweaks */
  .sb.mob-open .ni{padding:6px 12px 6px 14px;font-size:12px;margin:1px 6px 1px 0;}
  .sb.mob-open .ns{padding:10px 14px 3px;font-size:9px;}
  .sb.mob-open .sb-top{height:48px;padding:0 14px;}
  .sb.mob-open .sb-mark{width:28px;height:28px;font-size:10px;}
  .sb.mob-open .sb-brand{font-size:13px;}
  .btn-sm{font-size:11px;padding:6px 10px;}
  .login-box{margin:10px;padding:24px;}
  /* Stat strip: 2 columns on mobile */
  .stat-strip{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
  /* Toggle rows wrap control below label */
  .tr{flex-wrap:wrap;gap:8px;}
  .tr .fsel{min-width:unset !important;width:100% !important;max-width:200px;}
  /* Card headers wrap on very small screens */
  .ch{flex-wrap:wrap;gap:6px;}
  /* Tabs wrappable on small screens */
  .tabs{flex-wrap:wrap;}
  /* Page header: stack title + actions vertically */
  .ph{flex-direction:column;align-items:flex-start !important;gap:8px;}
  .ph > div:last-child{width:100%;flex-wrap:wrap;}
  .ph > div:last-child .btn{flex:1;min-width:0;text-align:center;font-size:10.5px;padding:6px 8px;}
  .ph > div:last-child .fsel{width:auto !important;flex:1;min-width:0;}
  /* Site detail action buttons: scrollable */
  #site-action-btns{overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap !important;padding-bottom:4px;}
  #site-action-btns .btn{flex-shrink:0;white-space:nowrap;font-size:10.5px;}
  /* Site detail tabs: horizontal scroll */
  .dtabs-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .dtab{font-size:11px;padding:7px 10px;white-space:nowrap;}
  /* Domain rows */
  .dr{flex-wrap:wrap;gap:6px;padding:10px 14px;}
  /* SSL sub-tab buttons */
  .ch .btn{font-size:10.5px;padding:5px 8px;}
  /* Maintenance */
  #maint-sched-btns{justify-content:flex-start !important;width:100%;}
  #maint-sched-btns .btn{flex:1;text-align:center;}
  /* Modal: bottom sheet — see the shared-modal ≤640 block below */
  /* Toasts on mobile: TOP full-width (like native push notifications) — the
     bottom is owned by thumbs/keyboard/FAB. Slide down from the top instead
     of in from the right, and COMPACT: tighter padding/type than desktop so
     the card doesn't eat the small screen. */
  .toast-wrap{top:calc(env(safe-area-inset-top,0px) + var(--th,56px) + 6px);bottom:auto;left:10px;right:10px;width:auto;gap:7px;}
  .toast{animation-name:sptInTop;padding:9px 11px;border-radius:11px;}
  .toast.out{animation-name:sptOutTop;}
  .toast .hd{gap:8px;}
  .toast .ic{width:16px;height:16px;}
  .toast .ic svg{width:16px;height:16px;}
  .toast .tt{font-size:12px;line-height:1.35;}
  .toast .tsb{font-size:11px;margin-top:2px;}
  .toast .bar{height:4px;margin:8px 0 7px;}
  .toast .steps{gap:4px;}
  .toast .st{font-size:11.5px;gap:7px;}
  .toast .st .si{width:13px;height:13px;}
  .toast .st .si svg{width:13px;height:13px;}
  .toast .tspin{width:10px;height:10px;}
  .toast .st .idle{width:6px;height:6px;}
  .toast .st .ttag{font-size:9px;}
  .toast .x{padding:8px;margin:-8px -8px 0 0;}
  .toast .x svg{width:12px;height:12px;}
  /* Reboot banner: stack vertically on mobile */
  #so-reboot-banner{flex-direction:column !important;text-align:center;gap:10px !important;padding:12px !important;}
  #so-reboot-banner > div:first-child{flex-direction:column !important;gap:8px !important;}
  #so-reboot-banner button{width:100% !important;}
  /* Sites table: tighter + scroll hint */
  .tbl td,.tbl th{padding:5px 6px;}
  /* File Manager: action buttons scrollable */
  #view-filemanager .ph > div:last-child{overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap !important;}
  #view-filemanager .ph > div:last-child .btn{flex:0 0 auto;white-space:nowrap;}
  /* SMTP: ensure Save & Apply doesn't overflow */
  #view-smtp .card .fr,
  #view-smtp .card [style*="display:flex"]{flex-wrap:wrap;}
  /* Activity log table: smaller font */
  #view-activitylog .tbl{font-size:10px;}
  /* Monitoring DOWN card: limit height with scroll */
  #view-monitoring .sc[style*="border-top:3px solid var(--r)"],
  #view-monitoring .sc:nth-child(2){max-height:320px;overflow-y:auto;}
  /* Terminal quick commands: add bottom padding to clear FAB */
  #view-terminal{padding-bottom:70px;}
  /* File Manager: table scroll */
  #view-filemanager .tbl{font-size:10.5px;}
}

/* ═══ Shared modal (#modal) — bottom sheet on a phone ═══
   DESIGN.md §4/§5: slides up from the bottom edge, rounded top, grip. The ≤480
   block used to round only the top corners while .modal-overlay kept centring
   the card, so a confirm floated mid-screen with square bottom corners. Same
   approach as the bku-* sheets further down: margin-top:auto pins it to the
   bottom and still leaves a modal taller than the room scrollable to its top.
   The overlay stays display:flex while closed (opacity 0), so the slide is a
   transform transition rather than a keyframe animation. */
@media (max-width: 640px) {
  .modal-overlay{align-items:flex-start;}
  .modal,.modal.wide,.modal.modal-xl{width:100%;max-width:100vw !important;max-height:92vh;margin:auto 0 0;
    border-radius:16px 16px 0 0 !important;transform:translateY(100%);
    transition:transform .24s cubic-bezier(.32,.72,0,1);padding-bottom:env(safe-area-inset-bottom,0px);}
  .modal-overlay.open .modal{transform:none;}
  .modal::before{content:"";display:block;flex-shrink:0;width:36px;height:4px;border-radius:2px;background:var(--b2);margin:8px auto 0;}
  .modal-head{padding-top:12px;}
  /* 44px tap targets */
  .modal-x{top:4px;right:6px;width:44px;height:44px;}
  .modal-head.sdh-modal-head .sdh-modal-x{width:44px;height:44px;}
  .modal-foot{flex-wrap:wrap;}
  .modal-foot .btn{flex:1 1 auto;}
  .modal-foot .btn,.modal .btn-sm{min-height:44px;justify-content:center;}
  .modal .fi,.modal .fsel{min-height:44px;}
}
@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
  .modal{transition:none;}
}

/* ═══ Site + server page headers — 44px tap targets on a phone ═══
   The headers kept desktop control sizes on a phone: ← Sites / ← Back 28px,
   copy-domain 26px, Visit / WP Admin / ⋮ 30px, Settings / Terminal / Reboot
   36px, and the copyable chips 23px. 820 and up are untouched. */
@media (max-width: 640px) {
  /* New-site wizard, app store success: the credential Copy buttons */
  #nw .nw-cred .nw-copybtn{height:44px;}
  #view-sitedetail .ph.sdh .btn,
  #view-serveroverview .sd-wrap > .ph .btn{min-height:44px;min-width:44px;justify-content:center;}
  #view-sitedetail .sdh-copy{width:44px;height:44px;}
  /* Chips: one scrolling row instead of wrapping, a slightly larger pill, and an
     invisible hit area stretched to 44px. On wrapped rows those hit areas would
     overlap each other, so the row scrolls; its vertical padding holds the
     stretched area inside the scroll box (a negative bottom margin would slide
     the action row over the lower half). The header column is capped at the
     screen width — otherwise it sizes to the unwrapped chips and the page
     scrolls sideways. */
  #view-sitedetail .ph.sdh > div:first-child{max-width:100%;}
  #view-sitedetail .sdh-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:7px 0;margin:-3px 0 0;}
  #view-sitedetail .sdh-chips::-webkit-scrollbar{display:none;}
  #view-sitedetail .sdh-chip{position:relative;flex-shrink:0;min-height:30px;padding:0 11px;font-size:11.5px;}
  /* -8px from the padding box = 7px past the 1px border: 30 + 14 = 44 */
  #view-sitedetail .sdh-chip[data-v]::after{content:"";position:absolute;left:0;right:0;top:-8px;bottom:-8px;}
  /* The server-type badge opens the IP popover on a tap: stretch its hit area
     to 44px the same way, and make the popover's Copy button 44px. */
  #view-serveroverview .so-type-badge[role=button]::after{content:"";position:absolute;left:0;right:0;top:-9px;bottom:-9px;}
  #view-serveroverview .so-iptip-copy{width:44px;height:44px;border-radius:9px;}
}

/* ─── Backup list: switch from table → cards at ≤640px ─── */
.backup-list-desktop{display:block;}
.backup-list-mobile{display:none;}
@media (max-width: 640px) {
  .backup-list-desktop{display:none !important;}
  .backup-list-mobile{display:block !important;}
  /* Larger touch targets on the mobile backup cards (Apple HIG: 44×44pt min) */
  .bkup-mcard .btn{min-height:44px;padding:10px 14px;font-size:12px;}
  .bkup-mcard-action .btn-xs{padding:10px 14px !important;min-height:44px !important;font-size:12px !important;}
  .bkup-mcard-action .ddl-chevron{min-width:44px;min-height:44px;}
  /* …and on the rest of the site's Backups tab: hero actions, the
     Backups/Settings/Schedule switch, and the Settings + Schedule fields */
  #site-bk-hero .hact .btn,
  #site-bk-card .seg button,
  #site-bk-card .btn,
  #site-bk-card .fsel,
  #site-bk-card .fi{min-height:44px;}
  /* Provider dropdown menu — larger hit targets on mobile */
  .ddl-menu .ddl-item{padding:14px 16px !important;font-size:13px !important;}
}
/* Mobile menu toggle + backdrop */
.mob-toggle{display:none;position:fixed;bottom:20px;left:20px;z-index:1001;width:48px;height:48px;border-radius:50%;background:var(--a);color:#fff;border:0;font-size:20px;cursor:pointer;box-shadow:0 4px 12px rgba(79,110,247,.4);align-items:center;justify-content:center;}
.mob-backdrop{display:none;position:fixed;inset:0;z-index:999;background:rgba(0,0,0,.35);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);}
.mob-backdrop.on{display:block;}
.mob-backdrop.on ~ .mob-toggle{display:none !important;}
@media (max-width: 1024px) {
  .mob-toggle{display:flex;}
  /* Sidebar bottom: sticky so logout is always visible without scrolling */
  .sb.mob-open{display:flex;flex-direction:column;}
  .sb.mob-open .sb-bot{position:sticky;bottom:0;background:var(--w);border-top:1px solid var(--b1);padding-bottom:max(env(safe-area-inset-bottom,0px),10px);}
  .sb.mob-open .logout-btn{font-size:12.5px;padding:10px 12px;color:var(--r);font-weight:600;}
  .sb.mob-open .logout-btn svg{width:16px;height:16px;}
}

/* ═══════════════ Backups page (bku-*) — phone layout ═══════════════
   The bku-* redesign shipped desktop-only: its site/history/protection rows
   are fixed multi-column grids that overflow a phone. Restack each row into a
   readable card, make toolbars/menus/save-bar full-width, keep all controls
   tappable. Modal overlays live OUTSIDE #view-backups scope, so their rules
   avoid --bku-* tokens. */
@media (max-width: 640px) {
  /* ── header ── */
  #view-backups .bku-ph{margin-bottom:16px;gap:12px}
  #view-backups .bku-ph h1{font-size:17px}
  #view-backups .bku-ph .left{gap:11px}
  #view-backups .bku-hico{width:40px;height:40px;border-radius:11px}
  #view-backups .bku-hico svg{width:19px;height:19px}
  #view-backups .bku-ph > div:last-child{width:100%;flex-wrap:wrap;gap:8px}
  #view-backups .bku-ph .bku-gbtn,
  #view-backups .bku-ph .bku-pbtn{flex:1 1 auto;justify-content:center}

  /* ── KPIs: keep 2-up, tighten ── */
  #view-backups .bku-kpi{min-height:100px;padding:14px}
  #view-backups .bku-kval{font-size:22px}

  /* ── tabs: keep 3 across, tighten so labels + counts still fit ── */
  #view-backups .bku-tabs{max-width:none}
  #view-backups .bku-tab{font-size:12px;gap:5px;padding:0 3px;height:40px}
  #view-backups .bku-tab .n{padding:1px 6px}

  /* ── toolbar: chips flow, search drops to its own full-width line ── */
  #view-backups .bku-bar{gap:8px}
  #view-backups .bku-pfdd{margin-left:0;order:2;flex:1 1 100%}
  #view-backups .bku-pfdd-btn{width:100%;justify-content:space-between}
  #view-backups .bku-pfdd-menu{left:0;right:0;min-width:0}
  #view-backups .bku-pfdd + .bku-srch{margin-left:0}
  #view-backups .bku-srch{width:100%;flex:1 1 100%;margin-left:0;order:3;height:44px}

  /* ── Site rows: table → stacked card ── */
  #view-backups .bku-srow{grid-template-columns:1fr auto;column-gap:12px;row-gap:0;padding:13px 15px 11px}
  #view-backups .bku-srow > .bku-sitec{grid-column:1;grid-row:1;align-self:center}
  #view-backups .bku-srow > .bku-kebab{grid-column:2;grid-row:1;align-self:center}
  #view-backups .bku-srow > :nth-child(n+2):nth-child(-n+4){
    grid-column:1 / -1;display:flex;align-items:center;justify-content:space-between;
    gap:12px;padding:8px 0 0;margin-top:8px;border-top:1px solid var(--bku-bd2)}
  #view-backups .bku-srow > :nth-child(2){margin-top:9px}
  #view-backups .bku-srow > :nth-child(5){grid-column:1 / -1;margin-top:8px;padding-top:10px;border-top:1px solid var(--bku-bd2)}
  #view-backups .bku-srow .bku-colh{margin-bottom:0}
  #view-backups .bku-srow .bku-colv{text-align:right}
  #view-backups .bku-srow .bku-colv .sub{display:inline;margin:0 0 0 6px}
  #view-backups .bku-srow .bku-pvs{justify-content:flex-end;flex-wrap:wrap}
  /* skeleton: single column so it doesn't overflow */
  #view-backups .bku-skrow{grid-template-columns:1fr auto;gap:10px 12px;padding:14px 15px}
  #view-backups .bku-skrow > *:nth-child(n+3):nth-child(-n+5){display:none}

  /* ── History rows (inside an expanded site) ── */
  #view-backups .bku-hh{display:none}
  #view-backups .bku-hist{padding:10px 12px 12px}
  #view-backups .bku-hrow{grid-template-columns:1fr auto;row-gap:9px;padding:12px 14px}
  #view-backups .bku-hrow > .bku-hdate{grid-column:1;grid-row:1}
  #view-backups .bku-hrow > .bku-htag{grid-column:2;grid-row:1;justify-self:end;align-self:center}
  #view-backups .bku-hrow > .bku-hsz{grid-row:2;align-self:center}
  #view-backups .bku-hrow > .bku-hact{grid-column:1 / -1;grid-row:3;justify-content:stretch;gap:7px}
  #view-backups .bku-hact .bku-hbtn{flex:1;justify-content:center;height:44px}
  #view-backups .bku-hact .bku-hbtn.ic{flex:0 0 46px}
  /* download popover: pin inside the row width instead of a fixed 250px */
  #view-backups .bku-dlpop{left:0;right:0;width:auto}
  /* pager wraps cleanly */
  #view-backups .bku-hpager{gap:9px}
  #view-backups .bku-hpbtns{width:100%;justify-content:space-between}
  #view-backups .bku-hpinfo{width:100%;text-align:center}

  /* ── Protection rows ── */
  #view-backups .bku-pth{display:none}
  #view-backups .bku-ptop{padding:16px;gap:14px}
  #view-backups .bku-ptop > div{min-width:0 !important}
  #view-backups .bku-prow{grid-template-columns:1fr;gap:0;padding:14px 16px}
  #view-backups .bku-prow > .bku-sitec{margin-bottom:2px}
  #view-backups .bku-prow > :nth-child(n+2):nth-child(-n+5){
    display:flex;align-items:center;gap:10px;padding:7px 0 0;margin-top:7px;
    border-top:1px solid var(--bku-bd2)}
  #view-backups .bku-prow > :nth-child(2)::before,
  #view-backups .bku-prow > :nth-child(3)::before,
  #view-backups .bku-prow > :nth-child(4)::before,
  #view-backups .bku-prow > :nth-child(5)::before{
    flex:0 0 96px;font-size:10px;font-weight:600;letter-spacing:.05em;
    text-transform:uppercase;color:var(--bku-mut)}
  #view-backups .bku-prow > :nth-child(2)::before{content:"Schedule"}
  #view-backups .bku-prow > :nth-child(3)::before{content:"Keep"}
  #view-backups .bku-prow > :nth-child(4)::before{content:"Last backup"}
  #view-backups .bku-prow > :nth-child(5)::before{content:"Scope"}
  #view-backups .bku-prow > :nth-child(6){margin-top:13px;display:flex;gap:8px;flex-wrap:wrap;justify-content:stretch}
  #view-backups .bku-prow > :nth-child(6) .bku-ebtn{flex:1;min-width:130px;justify-content:center;height:40px}

  /* ── kebab / action menus: keep on-screen instead of a fixed 224px ── */
  #view-backups .bku-menu{right:12px;left:12px;width:auto}
  #view-backups .bku-menu a{min-height:44px}
  /* status-cell chips (Retry, Back up now, Add destination): 44px tap targets */
  #view-backups .bku-rchip,#view-backups .bku-dchip{min-height:44px;justify-content:center}
  /* every other control on the page: 44px tap targets (DESIGN.md §4 mobile) */
  #view-backups .bku-kebab,
  #view-backups .bku-collapse{width:44px;height:44px}
  #view-backups .bku-fchip,
  #view-backups .bku-pfdd-btn,
  #view-backups .bku-hpbtn,
  #view-backups .bku-ebtn,
  #view-backups .bku-copyb,
  #view-backups .bku-srvdd-btn{height:44px}
  #view-backups .bku-pfdd-row,
  #view-backups .bku-srvdd-row{min-height:44px}
  #view-backups .bku-dtc .btns .eb{height:44px}
  #view-backups .bku-dtc .btns .tb{width:44px;height:44px}

  /* ── KPI ring: smaller, and the label wraps clear of it ── */
  #view-backups .bku-ringmini{right:12px;bottom:12px;width:34px;height:34px}
  #view-backups .bku-ringmini svg{width:34px;height:34px}
  #view-backups .bku-kpi:has(.bku-ringmini) .bku-klab{padding-right:40px}

  /* ── destinations + assignments ── */
  #view-backups .bku-dgrid{grid-template-columns:1fr}
  #view-backups .bku-acard .hd{padding:14px 16px}
  #view-backups .bku-destbody,
  #view-backups .bku-abody{padding:16px}
  #view-backups .bku-inforow{gap:9px}
  #view-backups .bku-inforow .mono{margin-left:0;flex-basis:100%;order:5}

  /* ── sticky save bar → near-full-width, no centering transform ── */
  .bku-savebar{left:12px;right:12px;transform:none;justify-content:space-between;
    padding:9px 12px 9px 16px;gap:12px;animation:none}
  .bku-savebar .cnt{white-space:normal}

  /* ── modals (rendered outside #view-backups; no --bku token deps) ──
     Bottom sheet on a phone (DESIGN.md §4/§5): pinned to the bottom edge,
     rounded top, grip. margin-top:auto rather than align-items:flex-end, so a
     sheet taller than the screen still scrolls back to its first field. */
  .bku-ov,.bku-ov.bku-ov-center{align-items:flex-start;padding:24px 0 0}
  .bku-mcard,.bku-mcard.bku-confirm{max-width:none;margin-top:auto;border-radius:18px 18px 0 0;border-bottom:0;
    padding:10px 18px calc(18px + env(safe-area-inset-bottom,0px));animation:bkuSheetIn .24s cubic-bezier(.32,.72,0,1)}
  .bku-mcard::before{content:"";display:block;width:36px;height:4px;border-radius:2px;background:var(--b2);margin:0 auto 14px}
  @keyframes bkuSheetIn{from{transform:translateY(100%)}to{transform:none}}
  .bku-mft{flex-wrap:wrap}
  .bku-mft > button{flex:1 1 auto;justify-content:center}
  /* 44px tap targets */
  .bku-mhd .mx{width:44px;height:44px;margin-right:-10px}
  .bku-mi,.bku-mi.sm{height:44px}
  .bku-pwrap .bku-mi{padding-right:50px}
  .bku-eye{right:1px;width:44px;height:44px}
  .bku-ov .bku-gbtn,.bku-ov .bku-pbtn,.bku-ov .bku-srch{height:44px}
  .bku-srch input{align-self:stretch}
  .bku-ov .bku-tog::before{content:"";position:absolute;inset:-11px -4px}

  /* ═══ File Manager (fm-*) phone layout ═══ */
  #view-filemanager .fm-ph{gap:12px}
  #view-filemanager .fm-ph h1{font-size:17px}
  #view-filemanager .fm-hico{width:40px;height:40px;border-radius:11px}
  #view-filemanager .fm-ph > div:last-child{width:100%}
  #view-filemanager .fm-ph .fm-gbtn,#view-filemanager .fm-ph .fm-pbtn{flex:1 1 auto;justify-content:center}
  #view-filemanager .fm-srvdd{flex:1 1 100%}
  #view-filemanager .fm-srvdd-btn{width:100%}
  #view-filemanager .fm-sitedd{flex:1 1 100%}
  #view-filemanager .fm-sitedd-btn{width:100%;max-width:none}
  #view-filemanager .fm-sitedd-menu{width:100%}
  #view-filemanager .fm-crumb{min-width:0;flex:1 1 100%}
  #view-filemanager .fm-srch{width:100%;flex:1 1 100%;height:40px}
  /* upload modal rows: drop the numeric % column on narrow screens */
  .fm-upr{grid-template-columns:28px minmax(0,1fr) 64px 60px;gap:8px}
  .fm-upr .pct{display:none}
  /* a name already taken: Replace / Skip take the row's right side */
  .fm-upr[data-st="exists"]{grid-template-columns:28px minmax(0,1fr) auto}
  .fm-upr[data-st="exists"] .acts{grid-column:auto}
  .fm-upr[data-st="exists"] .st{display:none}
  /* rows: fold size/permissions/date, keep name + kebab */
  #view-filemanager .fm-hh{display:none}
  #view-filemanager .fm-row{grid-template-columns:26px minmax(0,1fr) auto;padding:11px 13px}
  #view-filemanager .fm-row > .fm-sz,#view-filemanager .fm-row > .fm-pm,#view-filemanager .fm-row > .fm-dt{display:none}
  #view-filemanager .fm-row .fm-ck{opacity:1}
  #view-filemanager .fm-act{opacity:1}
  #view-filemanager .fm-act .fm-iab:not([title="More"]){display:none}
  #view-filemanager .fm-menu{right:10px;left:auto;width:200px}
  #view-filemanager .fm-skrow{grid-template-columns:26px minmax(0,1fr) auto}
  #view-filemanager .fm-skrow > *:nth-child(n+3):nth-child(-n+5){display:none}
  /* bulk bar + editor */
  .fm-bulk{left:12px;right:12px;transform:none;justify-content:space-between;padding:9px 12px;gap:10px;animation:none}
  #view-filemanager .fm-ed .hd{padding:11px 13px}
  #view-filemanager .fm-ed .sp{margin-left:0;width:100%}
  #view-filemanager .fm-ed .sp .fm-gbtn,#view-filemanager .fm-ed .sp .fm-pbtn{flex:1;justify-content:center}
  #view-filemanager .fm-edbody{height:60vh;min-height:260px}
  #view-filemanager .fm-gut{width:36px}
  .fm-ov{padding:14px 12px}
  /* Phase 3 phone tweaks */
  #view-filemanager .fm-vtog{margin-left:auto}
  #view-filemanager .fm-grid{grid-template-columns:repeat(auto-fill,minmax(45%,1fr));padding:12px}
  #view-filemanager .fm-ed .sp{flex-wrap:wrap}
  #view-filemanager .fm-srow{flex-wrap:wrap}
  .fm-clip{left:12px;right:12px;transform:none;justify-content:space-between;gap:8px;padding:9px 12px}
  .fm-clip .cnt .mut{display:none}
  .fm-info-drawer{width:100%;max-width:100%;padding:12px}
  .fm-media{padding:14px 10px}
  .fm-media-pdf{width:92vw;height:68vh}
  .fm-view{max-height:calc(100vh - 40px)}
  .trow{grid-template-columns:28px minmax(0,1fr) auto;gap:9px}
}