@media (max-width:820px){/* ── topbar: one 48px row; search opens as a second row ─────────────────── */
  html.arch-m .topbar{padding-top:var(--arch-sat,0px)!important}}
@media (max-width:820px){html.arch-m.arch-m-search .topbar .tb-search{top:calc(52px + var(--arch-sat,0px))}}
@media (max-width:820px){html.arch-m #notifPanel{top:calc(52px + var(--arch-sat,0px))!important}}
@media (max-width:820px){/* ── network strip + page body ──────────────────────────────────────────── */
  html.arch-m .nw{top:calc(48px + var(--arch-sat,0px))!important}}
@media (max-width:820px){html.arch-m .page-body{margin-top:calc(48px + var(--arch-sat,0px))!important;height:calc(100dvh - 48px - var(--arch-sat,0px) - 28px - env(safe-area-inset-bottom))!important}}
@media (max-width:820px){html.arch-m.nw-visible .page-body,html.arch-m body.nw-visible .page-body{margin-top:calc(70px + var(--arch-sat,0px))!important;height:calc(100dvh - 70px - var(--arch-sat,0px) - 28px - env(safe-area-inset-bottom))!important}}
@media (max-width:820px){/* ── sidebar → drawer ───────────────────────────────────────────────────── */
  html.arch-m .sidebar,html.arch-m .sidebar.collapsed{padding-top:var(--arch-sat,0px)}}
@media (max-width:820px){/* ── toasts ──────────────────────────────────────────────────────────────── */
  html.arch-m .toast-area{top:calc(56px + var(--arch-sat,0px))!important}}
@media (max-width:820px){html.arch-m #mcOverlay .topbar,html.arch-m #ocOverlay .topbar{padding-top:calc(10px + var(--arch-sat,0px))!important}}
/* ── in-page dialogs (replace window.confirm / prompt, which wallet webviews may suppress) ── */
.arch-dlg-back{padding-top:calc(16px + var(--arch-sat,0px))}
@media (max-width:820px){/* ── Report / Warning / Like / Message / Subscribe consoles: their sidebars were pushed off-screen at ≤800px with no way to open them ── */
  html.arch-m #rcOverlay .rc-sb{padding-top:var(--arch-sat,0px)}}
@media (max-width:820px){html.arch-m #rcOverlay .rc-top{padding-top:calc(10px + var(--arch-sat,0px))!important}}
@media (max-width:820px){html.arch-m #wcOverlay .wc-sb{padding-top:var(--arch-sat,0px)}}
@media (max-width:820px){html.arch-m #wcOverlay .wc-top{padding-top:calc(10px + var(--arch-sat,0px))!important}}
@media (max-width:820px){html.arch-m #lcOverlay .lc-sb{padding-top:var(--arch-sat,0px)}}
@media (max-width:820px){html.arch-m #lcOverlay .lc-top{padding-top:calc(10px + var(--arch-sat,0px))!important}}
@media (max-width:820px){html.arch-m #msgOverlay .msg-sb{padding-top:var(--arch-sat,0px)}}
@media (max-width:820px){html.arch-m #msgOverlay .msg-top{padding-top:calc(10px + var(--arch-sat,0px))!important}}
@media (max-width:820px){html.arch-m #scOverlay .sc-sb{padding-top:var(--arch-sat,0px)}}
@media (max-width:820px){html.arch-m #scOverlay .sc-top{padding-top:calc(10px + var(--arch-sat,0px))!important}}
@media (max-width:820px){/* ── expanded overlay player: player on top, list below, one scroll ── */
  html.arch-m .moverlay.open{padding-top:var(--arch-sat,0px)}}
@media (max-width:820px){/* ── .mbd / .mbox modals (purchase, recover, report, preview, archive, buyers…) ── */
  html.arch-m .mbd.open{padding:calc(8px + var(--arch-sat,0px)) 8px calc(8px + env(safe-area-inset-bottom))!important}}/* MOBILE_UI v3 — phones, incl. Android "large text" (Chrome text scaling). Everything is scoped to html.arch-m (≤820px).
   --arch-afs  = text scale Chrome still applies after compensation (set by mobile.js, 1 = none)
   --arch-top  = measured bottom of the fixed topbar + network strip
   --arch-sat  = top safe-area inset; only an installed (standalone) app needs it. In a browser tab Android Chrome reports
                 the status-bar height there with viewport-fit=cover, which drew an empty band above the topbar.       */
:root{--arch-sat:0px;--arch-afs:1;--arch-top:70px}
@media (display-mode:standalone){:root{--arch-sat:env(safe-area-inset-top)}}
@media (max-width:820px){
  /* ── the page itself must never scroll: .page-body's top margin collapsed through <body>, making the document
        71px taller than the screen, so a drag (or focusing a field) slid the content under the fixed header and
        hid the tab bar. Every panel scrolls inside itself. ── */
  html.arch-m{overflow:hidden!important;overscroll-behavior:none;height:100%}
  html.arch-m body{display:flow-root!important;overflow:hidden!important;height:100dvh!important;overscroll-behavior:none}

  /* ── page frame: heights follow the real (possibly taller) topbar instead of fixed 48/70px ── */
  html.arch-m.arch-m body .page-body.page-body{margin-top:var(--arch-top)!important;height:calc(100dvh - var(--arch-top) - env(safe-area-inset-bottom))!important}
  html.arch-m #archPageFooter{display:none!important}            /* duplicate of the network strip; gives the content 28px back */
  html.arch-m .nw.nw{top:calc(var(--arch-tb,48px) + var(--arch-sat,0px))!important;height:auto!important;min-height:22px;padding:2px 10px!important}
  html.arch-m #netWarnTxt{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:calc(10.5px / var(--arch-afs))!important}
  html.arch-m #contractStatus{display:none!important}

  /* ── topbar ── */
  html.arch-m .topbar{min-height:48px;height:auto!important}
  html.arch-m .topbar .brand{flex:0 0 auto!important;overflow:visible!important;font-size:calc(17px / var(--arch-afs))!important}
  html.arch-m .topbar .brand *{font-size:inherit!important}
  html.arch-m .topbar .topbar-right{display:flex;align-items:center;min-width:0;margin-left:auto}
  html.arch-m .topbar #settingsBtn{display:none!important}        /* it is in the ☰ drawer */
  html.arch-m #archMWallet{display:none;align-items:center;gap:5px;height:34px;padding:0 8px 0 3px;border-radius:17px;border:1px solid var(--b2,rgba(255,255,255,.16));background:var(--s2,rgba(255,255,255,.05));color:var(--t1,#e7e7ee);cursor:pointer;flex:0 1 auto;min-width:34px;overflow:hidden}
  html.arch-m.arch-m-conn #archMWallet{display:inline-flex}
  html.arch-m #archMWallet .mw-av{width:28px;height:28px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;overflow:hidden;font:800 calc(10px / var(--arch-afs))/1 var(--fn,system-ui);color:#fff}
  html.arch-m #archMWallet .mw-av img{width:100%;height:100%;object-fit:cover}
  html.arch-m #archMWallet .mw-t{display:flex;flex-direction:column;gap:2px;min-width:0;text-align:left}
  html.arch-m #archMWallet .mw-n{font:700 calc(10.5px / var(--arch-afs))/1.1 var(--fn,system-ui);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:84px}
  html.arch-m #archMWallet .mw-b{font:700 calc(10px / var(--arch-afs))/1.1 ui-monospace,monospace;color:var(--gr,#22c55e);white-space:nowrap}

  /* ── tabs: five equal columns, icon over a short label ── */
  html.arch-m .top-tabbar{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr));height:auto!important;padding:0!important;overflow:hidden!important}
  html.arch-m .top-tabbar .top-tab{flex-direction:column!important;justify-content:center;gap:2px!important;height:auto!important;min-height:46px;padding:5px 1px 4px!important;min-width:0!important;width:auto!important;font-size:0!important;letter-spacing:0!important}
  html.arch-m .top-tabbar .top-tab svg{width:18px!important;height:18px!important;flex-shrink:0}
  html.arch-m .top-tabbar .top-tab .mt-l{font-size:calc(10.5px / var(--arch-afs))!important;font-weight:700;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}

  /* ── player: no dead 16:9 box before a video is chosen ── */
  html.arch-m .pm-upper:has(#pmNoVideo:not([style*="none"])) #pmVideoWrap{display:none!important}
  html.arch-m #pmNoVideo{min-height:0!important;padding:14px 12px!important}

  /* ── dashboard: stack the narrow columns; long numbers wrap instead of overlapping ── */
  html.arch-m .dash-top-row .dkc-main{flex-wrap:wrap!important;row-gap:2px;min-width:0}
  html.arch-m .dash-kpi-card{min-width:0!important;overflow:hidden}
  html.arch-m .dash-kpi-card .dkc-num{font-size:clamp(18px,calc(22px / var(--arch-afs)),26px)!important;overflow-wrap:anywhere;min-width:0;line-height:1.15!important}
  html.arch-m .dash-kpi-card .dkc-label,html.arch-m .dash-kpi-card .dkc-sub{overflow-wrap:anywhere}
  html.arch-m .dash-earn-expense-row{grid-template-columns:minmax(0,1fr)!important;row-gap:16px!important}
  html.arch-m .dash-earn-expense-row > *,html.arch-m .dash-fin-wrap{width:100%!important;max-width:none!important;min-width:0!important}
  html.arch-m .dash-earn-spend{grid-template-columns:repeat(2,minmax(0,1fr))!important;width:100%!important}
  html.arch-m .dash-earn-card,html.arch-m .dash-spend-card{min-width:0!important}
  html.arch-m .dash-card-hdr{flex-wrap:wrap!important;row-gap:2px}
  html.arch-m .dash-cur-tabs{flex-wrap:wrap!important}
  html.arch-m .dash-card-row,html.arch-m .dash-card-total-row{flex-wrap:wrap!important;min-width:0}
  html.arch-m .dash-cur-panel{width:auto!important;min-width:0}
  html.arch-m #tab-dashboard [class*="dash-section-hdr"],html.arch-m #tab-dashboard [class*="sec-hdr"]{flex-wrap:wrap!important}

  /* ── ledger: empty-state text stays on screen while the table scrolls sideways ── */
  html.arch-m #tab-ledger .tw td[colspan]{white-space:normal!important}
  html.arch-m #tab-ledger .tw td[colspan] > *{position:sticky;left:12px;max-width:calc(100vw - 48px);display:block}
  html.arch-m #tab-ledger .tw td[colspan]{position:sticky;left:0;text-align:left!important}

  /* ── settings dialog: tabs in a wrapping grid, inputs full width, long values wrap ── */
  html.arch-m #settingsModal .mbox > div:has(> .modetab){display:grid!important;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:4px!important;overflow:visible!important}
  html.arch-m #settingsModal .modetab{white-space:normal!important;min-width:0!important;width:auto!important;padding:7px 4px!important;font-size:calc(11.5px / var(--arch-afs))!important;line-height:1.2!important;text-align:center}
  html.arch-m #settingsModal .mbox *{overflow-wrap:anywhere}
  html.arch-m #settingsModal [id^="spanel-"] *:not(svg):not(svg *):not(img):not(input[type=checkbox]):not(input[type=radio]){min-width:0!important;max-width:100%!important;box-sizing:border-box}
  html.arch-m #settingsModal [id^="spanel-"]{min-width:0!important;max-width:100%!important;overflow-x:hidden!important}
  html.arch-m #settingsModal [id^="spanel-"] [style*="white-space:nowrap"],html.arch-m #settingsModal [id^="spanel-"] [style*="white-space: nowrap"]{white-space:normal!important}
  html.arch-m #settingsModal [id^="spanel-"] [style*="grid-template-columns"]{grid-template-columns:minmax(0,1fr)!important}
  html.arch-m #settingsModal input:not([type=checkbox]):not([type=radio]):not([type=range]),html.arch-m #settingsModal select,html.arch-m #settingsModal textarea{min-width:0!important;max-width:100%!important;flex:1 1 auto!important;box-sizing:border-box}
  html.arch-m #settingsModal [style*="display:flex"],html.arch-m #settingsModal [style*="display: flex"]{flex-wrap:wrap!important;row-gap:6px}
  html.arch-m #settingsModal summary{font-size:12.5px!important;line-height:1.35!important;flex-wrap:wrap!important}
  html.arch-m #settingsModal button{white-space:normal!important;min-width:0;line-height:1.2!important}
  html.arch-m #settingsModal code,html.arch-m #settingsModal b,html.arch-m #settingsModal strong{overflow-wrap:anywhere;word-break:break-all}

  /* ── moderation case rows: title/badges get the full width, actions go under them ── */
  html.arch-m #spanel-adminp div[style*="padding:6px 9px;display:flex"]{flex-wrap:wrap!important}
  html.arch-m #spanel-adminp div[style*="padding:6px 9px;display:flex"] > div[style*="flex:1"]{flex:1 1 150px!important}
  html.arch-m #spanel-adminp div[style*="padding:6px 9px;display:flex"] > div[style*="flex-shrink:0"]{flex:1 1 100%!important;justify-content:flex-end}
  html.arch-m #spanel-adminp span[style*="display:inline-flex"],html.arch-m #spanel-adminp span[style*="display:inline-block"]{white-space:nowrap!important;margin:1px 2px 1px 0}
  html.arch-m #spanel-adminp div[id^="modCaseM_"]{padding-left:9px!important}

  /* ── preview dialog: volume control wraps under the buttons instead of running off-screen ── */
  html.arch-m .pv-ctrl-row{flex-wrap:wrap!important;row-gap:8px}
  html.arch-m .pv-ctrl-row .pv-vol-wrap{flex:1 1 100%!important;min-width:0!important;max-width:100%!important}
  html.arch-m .pv-ctrl-row .pv-vol-wrap input[type=range]{flex:1 1 auto;min-width:0;width:auto!important}

  /* ── My Videos "full" cards: thumbnail + info on one row, badges and revenue below ── */
  html.arch-m .mvp2-top{flex-wrap:wrap!important;row-gap:8px}
  html.arch-m .mvp2-top .mvp2-thumb-col{flex:0 0 120px!important;max-width:120px}
  html.arch-m .mvp2-top .mvp2-info{flex:1 1 150px!important;min-width:0!important;width:auto!important}
  html.arch-m .mvp2-top .mvp2-actions-col{flex:1 1 100%!important;justify-content:flex-end;flex-wrap:wrap}
  html.arch-m .mvp2-top .mvp2-rev-col{flex:1 1 100%!important;width:auto!important;max-width:none!important}
  html.arch-m .mvp2-title{white-space:normal!important}
  html.arch-m .mvp2-stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  html.arch-m .mvp2-body{flex-wrap:wrap!important}

  /* ── Subscribe / Like / Message … consoles: the hero's side number goes under the text ── */
  html.arch-m [class$="-hero"]{flex-wrap:wrap!important;row-gap:10px}
  html.arch-m [class$="-hero"] > *{min-width:0!important}
  html.arch-m [class$="-hero"] > :first-child{flex:1 1 100%!important}
  html.arch-m [class$="-hero"] > :nth-child(n+2){flex:1 1 auto!important;text-align:left!important;align-items:flex-start!important}
  html.arch-m [class$="-hero"] code,html.arch-m [class$="-hero"] [class*="addr"]{overflow-wrap:anywhere;word-break:break-all;white-space:normal!important}

  /* ── expanded marketplace: no empty player block before a video is chosen; search gets a full row ── */
  html.arch-m .moverlay .mov-player:has(#ovTitle:empty),html.arch-m .moverlay.arch-novid .mov-player{display:none!important}
  html.arch-m .moverlay .mov-topbar{flex-wrap:wrap!important}
  html.arch-m .moverlay #ovSearch{flex:1 1 140px!important;min-width:120px!important;width:auto!important}
  html.arch-m .moverlay .mov-topbar select{flex:0 1 auto;min-width:0}

  /* ── player tab: compact "select a video" state ── */
  html.arch-m #pmNoVideo #pmNoVideoAvatar{width:40px!important;height:40px!important}
  html.arch-m #pmNoVideo svg{max-width:28px;max-height:28px}

  /* ── settings dialog stays at the top instead of jumping as tabs change height ── */
  html.arch-m #settingsModal.mbd.open{align-items:flex-start!important}
  html.arch-m #settingsModal .mbox{margin:0 0 auto!important}

  /* ── ledger: empty-table message wraps on screen ── */
  html.arch-m #tab-ledger .tw td[colspan]{display:block!important;width:calc(100vw - 32px)!important;max-width:calc(100vw - 32px)!important;white-space:normal!important;position:sticky;left:0;box-sizing:border-box}

  /* ── video Analytics dialog: KPI cards 2-up, charts and tables one per row ── */
  html.arch-m #reportModal .an-video-card{flex-wrap:wrap!important;gap:10px!important}
  html.arch-m #reportModal .an-thumb{flex:0 0 120px!important;width:120px!important}
  html.arch-m #reportModal .an-video-info{flex:1 1 140px!important;min-width:0!important;width:auto!important}
  html.arch-m #reportModal .an-date-bar{flex-wrap:wrap!important;gap:6px!important;align-items:center}
  html.arch-m #reportModal .an-date-input{flex:1 1 120px!important;min-width:0!important;width:auto!important}
  html.arch-m #reportModal .an-date-lbl{font-size:11px;font-weight:700;color:var(--t3);flex:0 0 auto}
  html.arch-m #reportModal .an-kpi-row{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  html.arch-m #reportModal .an-kpi-row > :last-child:nth-child(odd){grid-column:1/-1}
  html.arch-m #reportModal .an-kpi{min-width:0!important;overflow:hidden}
  html.arch-m #reportModal .an-kpi *{overflow-wrap:anywhere}
  html.arch-m #reportModal .an-charts-row,html.arch-m #reportModal .an-bottom-row{grid-template-columns:minmax(0,1fr)!important}
  html.arch-m #reportModal .an-chart-box,html.arch-m #reportModal .an-bottom-box{width:auto!important;min-width:0!important;max-width:100%!important;overflow-x:auto}
  html.arch-m #reportModal .an-chart-box canvas,html.arch-m #reportModal .an-chart-box svg{max-width:100%!important;height:auto}
  html.arch-m #reportModal .an-chart-box > div:first-child,html.arch-m #reportModal .an-chart-box [class*=hdr],html.arch-m #reportModal .an-chart-box [class*=head]{flex-wrap:wrap!important;row-gap:6px}
  html.arch-m #reportModal .rbr{grid-template-columns:minmax(0,1fr) auto auto!important;gap:6px!important}
  html.arch-m #reportModal .rbr > :nth-child(2),html.arch-m #reportModal .rbr > :nth-child(5){display:none!important}
  html.arch-m #reportModal .mhd{flex-wrap:wrap!important;row-gap:8px}

  /* ── marketplace toolbar: let it wrap so dropdowns (subscriptions, sort) aren't clipped by a scroll box ── */
  html.arch-m .pm-mkt-tabs{overflow:visible!important;flex-wrap:wrap!important;row-gap:6px}
  html.arch-m #pmSubsDropList{max-height:min(60dvh,420px);overflow-y:auto!important;z-index:400!important;max-width:calc(100vw - 16px)!important}

  /* ── generic: buttons/labels in narrow flex rows wrap instead of overflowing ── */
  html.arch-m .mbox [style*="display:flex"]{flex-wrap:wrap}
  html.arch-m .sidebar button{white-space:normal!important;line-height:1.2!important;min-height:40px}
  html.arch-m .ledger-toolbar button,html.arch-m .mv-page-actions button{white-space:nowrap}

  /* ── membership dialog: starts at the top and scrolls ── */
  html.arch-m #planGate{align-items:flex-start!important;padding:calc(10px + var(--arch-sat,0px)) 10px calc(16px + env(safe-area-inset-bottom))!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch}
  html.arch-m #planGate .pg-card{margin:auto 0!important;padding:20px 16px!important}

  /* ── no zoom-on-focus on iOS ── */
  html.arch-m input,html.arch-m select,html.arch-m textarea{font-size:max(16px, 1em)}
}
@media (max-width:420px){
  html.arch-m .topbar .brand .m{display:none!important}
  html.arch-m #archMWallet .mw-n{display:none}              /* avatar + balance; name is in the drawer */
}
@media (max-width:360px){
  html.arch-m #archMsgBtn{display:none!important}
  html.arch-m .dash-earn-spend{grid-template-columns:minmax(0,1fr)!important}
}
/* large system text: single-column cards and icon-only chrome where a label can't fit */
html.arch-m.arch-big .dash-top-row{grid-template-columns:minmax(0,1fr)!important}
html.arch-m.arch-big .dash-earn-spend{grid-template-columns:minmax(0,1fr)!important}
html.arch-m.arch-big #archMWallet .mw-t{display:none}
html.arch-m.arch-big #archMsgBtn{display:none!important}