/* =====================================================================
   ZCOD.CN — adaptive layout & element-boundary contract
   Loaded LAST (after all inline style blocks) so these rules win.
   Contract:
   1) Fluid tokens (clamp) — everything scales with viewport width.
   2) Every control owns its box: hit area, padding, radius, no text spill.
   3) No horizontal overflow, no clipping, no overlap at any width/height.
   ===================================================================== */

/* ---------- 0. Base guards ---------- */
*,
*::before,
*::after{
  box-sizing:border-box;
}
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
html,body{
  width:100%;
  max-width:100%;
  min-width:0;
}
body{
  overflow-x:hidden;
  /* fluid shell: outer ~90% (includes 5% glow bleed each side); content stays ~80% */
  --shell-pad:clamp(12px, 2vw, 24px);
  --shell-max:none;
  --shell-width:90%;
  --shell-bleed:5%;
  /* notch 80% of prior (88→70 / 64→51); controls 90% of prior (44→40) — fonts unchanged */
  --notch-h:clamp(51px, 5.2vw, 70px);
  /* fixed safe gap between top bar and content below */
  --notch-gap:16px;
  --footer-h:0px; /* no global footer bar */
  --control-h:clamp(32px, 3.06vw, 40px);
  --control-px:clamp(11px, 1.44vw, 18px);
  --type-title:clamp(28px, 4.5vw, 56px);
  --type-body:clamp(14px, 1.25vw, 16px);
  --type-meta:clamp(11px, 0.95vw, 12px);
  --type-kicker:clamp(11px, 0.95vw, 12px);
  /* software grid: raise this if future cards need more room before wrapping */
  --soft-tile-min:250px;
}

img,video,svg,canvas{
  max-width:100%;
  height:auto;
}

/* Text always wraps inside its box — never spills */
h1,h2,h3,h4,p,
.lead,.kicker,.view-meta,.home-status,.slide-status,
.software-tile p,.software-card p,.about-panel>p,.contact-panel>p,
.update-card p,.catalog-info p{
  max-width:100%;
  min-width:0;
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* ---------- 1. Element boundary contract ---------- */
.module,
.cta,
.quiet-action,
.auth-login,
.theme-toggle,
.catalog-tab,
.slide-dot,
.tile-link,
.card-link,
.auth-submit,
.auth-code-btn,
.auth-link-btn,
.auth-close,
.auth-tab{
  box-sizing:border-box!important;
  flex:0 0 auto;
  max-width:100%;
  min-width:0;
  line-height:1.2;
  white-space:nowrap;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}

/* pill controls (site chrome): centered label, safe padding, fluid height */
.module,
.cta,
.catalog-tab,
.auth-login{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:var(--control-h)!important;
  height:var(--control-h)!important;
  padding:0 var(--control-px)!important;
  border-radius:var(--control-radius,999px)!important;
}

/* auth phone panel is a fixed-size design — its controls keep exact sizes,
   we only guarantee centering + no text spill */
.auth-submit,
.auth-link-btn,
.auth-tab{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  max-width:100%!important;
}
.auth-submit{height:48px!important;min-height:48px!important;border-radius:14px!important}
.auth-link-btn{height:44px!important;min-height:44px!important;border-radius:12px!important}
.auth-tab{height:34px!important;min-height:34px!important;border-radius:8px!important;padding:0 6px!important}

/* round icon controls — hit box 90%, glyph size unchanged */
.theme-toggle{
  width:clamp(32px,3.06vw,40px)!important;
  height:clamp(32px,3.06vw,40px)!important;
  min-width:clamp(32px,3.06vw,40px)!important;
  padding:0!important;
  border-radius:50%!important;
}
.auth-close{
  width:30px!important;
  height:30px!important;
  min-width:30px!important;
  padding:0!important;
  border-radius:50%!important;
}

/* label font sizes kept; horizontal padding only shrunk to 90% */
.module{font-size:clamp(11px,1.3vw,16px)!important;padding:0 clamp(9px,1.44vw,19px)!important}
.cta{font-size:clamp(12px,1.2vw,15px)!important}
.quiet-action{font-size:clamp(12px,1.1vw,13px)!important}
.auth-login{font-size:clamp(13px,1.3vw,16px)!important;padding:0 clamp(11px,1.35vw,18px)!important}
.catalog-tab{font-size:clamp(11px,1vw,12px)!important}
/* .slide-dot keeps its tuned 80x34 rail design on desktop;
   mobile sizing lives in the ≤640 block below */
.tile-link,
.card-link{
  min-height:var(--control-h)!important;
  height:auto!important;
  padding:0 var(--space-2,12px)!important;
  font-size:clamp(11px,1vw,12px)!important;
}
.auth-code-btn{
  min-height:36px!important;
  height:auto!important;
  padding:0 12px!important;
  border-radius:8px!important;
}

/* cards / panels own their box */
.software-tile,
.software-card,
.update-card,
.art-window,
.workspace-preview,
.auth-group,
.auth-panel{
  box-sizing:border-box!important;
  max-width:100%;
  min-width:0;
}

/* ---------- 2. Top bar: 3-column grid ----------
   nav sits dead-center; brand centers itself in the leftover LEFT space,
   login+theme (one unit) centers itself in the leftover RIGHT space. */
.notch{
  left:0!important;
  right:0!important;
  top:0!important;
  width:100%!important;
  max-width:100%!important;
  height:var(--notch-h)!important;
  min-height:var(--notch-h)!important;
  margin:0!important;
  padding:0 var(--shell-pad)!important;
  padding-left:max(var(--shell-pad),env(safe-area-inset-left))!important;
  padding-right:max(var(--shell-pad),env(safe-area-inset-right))!important;
  transform:none!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)!important;
  align-items:center!important;
  gap:clamp(8px,1.4vw,16px)!important;
  overflow:visible!important;
}
.brand{
  grid-column:1!important;
  grid-row:1!important;
  justify-self:center!important;
  min-width:0!important;
  max-width:100%!important;
  margin:0!important;
  /* 26px on desktop (user-set), shrinks smoothly below ~1250px */
  font-size:clamp(18px,1.2vw + 11px,26px)!important;
  white-space:nowrap!important;
}
.module-nav{
  grid-column:2!important;
  grid-row:1!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:clamp(8px,1.6vw,24px)!important;
  min-width:0!important;
  max-width:100%!important;
  overflow:visible!important;
  padding:10px 4px!important;
  margin:0!important;
}
.notch-actions{
  grid-column:3!important;
  grid-row:1!important;
  justify-self:center!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:clamp(8px,1.4vw,16px)!important;
  min-width:0!important;
  max-width:100%!important;
  margin:0!important;
}

/* ---------- 3. Shell & views ----------
   Outer shell = 90% (includes soft bleed).
   Views pad 5vw each side → content ≈ 80%.
   Bleed is inside the scroll/clip padding box so shadows fade out
   instead of being hard-cropped at the content edge. */
.app-shell{
  width:var(--shell-width,90%)!important;
  max-width:var(--shell-width,90%)!important;
  height:calc(100dvh - var(--notch-h) - var(--notch-gap) - var(--footer-h))!important;
  margin:calc(var(--notch-h) + var(--notch-gap)) auto 0!important;
  padding:0!important;
  box-sizing:border-box!important;
  position:relative!important;
  overflow:visible!important; /* override legacy overflow:hidden on .app-shell */
}
.view,
.view.active,
.view[data-panel],
.view.narrow-view{
  width:auto!important;
  max-width:none!important;
  left:0!important;
  right:0!important;
  box-sizing:border-box!important;
  /* 5vw soft bleed each side — shadows transition here, content stays ~80vw */
  padding-left:5vw!important;
  padding-right:5vw!important;
  overflow-x:visible!important;
}
.view[data-panel="software"].active,
.view[data-panel="software"].is-entering,
.view[data-panel="software"].is-leaving,
.view[data-panel="home"].active,
.view[data-panel="home"].is-entering,
.view[data-panel="home"].is-leaving,
.view[data-panel="updates"].active,
.view[data-panel="about"].active,
.view[data-panel="contact"].active{
  overflow-y:auto!important;
  -webkit-overflow-scrolling:touch;
  /* keep the side bleed pads so X-clip (implied by overflow-y:auto)
     still leaves room for card / CTA shadows */
  padding-left:5vw!important;
  padding-right:5vw!important;
}
.software-grid,
.software-grid.six-grid{
  /* tiny inner pad + allow glow to spill into view bleed */
  padding-left:4px!important;
  padding-right:4px!important;
  margin-left:0!important;
  margin-right:0!important;
  overflow:visible!important;
}
/* content taller than viewport on small / short windows */
@media(max-width:1100px), (max-height:760px){
  .view.active,
  .view.is-entering,
  .view.is-leaving{
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
    padding-left:max(12px,4vw)!important;
    padding-right:max(12px,4vw)!important;
  }
}
/* global footer bar removed — legal only lives on home as .home-legal */
.app-footer{display:none!important;height:0!important;visibility:hidden!important;pointer-events:none!important}

/* home-only legal line (time + 备案) — content bottom, not a fixed bar */
.view[data-panel="home"]{
  display:flex!important;
  flex-direction:column!important;
  min-height:0!important;
}
.view[data-panel="home"] .home-carousel{
  flex:1 1 auto!important;
  min-height:0!important;
  height:auto!important;
}
.home-legal{
  flex:0 0 auto!important;
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px 12px!important;
  width:100%!important;
  max-width:100%!important;
  margin:0!important;
  padding:10px 8px max(12px,env(safe-area-inset-bottom,0px))!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:var(--muted)!important;
  font-size:clamp(11px,1.05vw,13px)!important;
  line-height:1.4!important;
  text-align:center!important;
  white-space:normal!important;
  overflow:visible!important;
  overflow-wrap:anywhere!important;
  word-break:break-word!important;
}
.home-legal > *{
  flex:0 1 auto!important;
  min-width:0!important;
  max-width:100%!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
}
.home-legal a{
  color:var(--muted)!important;
  text-decoration:none!important;
  pointer-events:auto!important;
}
.home-legal a:hover{color:var(--text)!important}

/* ---------- 4. Fluid content grids ---------- */
.home-layout,
.hero-slide,
.hero-slide.active{
  display:grid!important;
  grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)!important;
  gap:clamp(20px,4vw,48px)!important;
  align-items:center!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
}
.slide-copy,
.home-copy,
.slide-art,
.workspace-preview{
  min-width:0!important;
  max-width:100%!important;
}
.slide-copy h1,
.home-copy h1{
  font-size:var(--type-title)!important;
  line-height:1.05!important;
}
.software-grid,
.software-grid.six-grid{
  /* Smart column rule: --soft-tile-min = smallest healthy card width.
     Columns = how many mins fit (capped at 4). No brittle 1280/1024 switches. */
  --soft-tile-min:250px;
  --soft-grid-gap:clamp(14px,1.5vw,20px);
  display:grid!important;
  grid-template-columns:repeat(
    auto-fit,
    minmax(min(100%, max(var(--soft-tile-min), calc((100% - 3 * var(--soft-grid-gap)) / 4))), 1fr)
  )!important;
  grid-auto-rows:max-content!important;
  align-items:start!important;
  gap:var(--soft-grid-gap)!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  overflow:visible!important;
  padding-left:4px!important;
  padding-right:4px!important;
  margin-left:0!important;
  margin-right:0!important;
}

/* Intrinsic card: height = sum of in-flow children. Action never absolute / never margin-top:auto. */
.software-tile,
.software-card{
  position:relative!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  justify-content:flex-start!important;
  align-self:start!important;
  box-sizing:border-box!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  height:max-content!important;
  min-height:max-content!important;
  max-height:none!important;
  padding:clamp(14px,1.6vw,22px)!important;
  gap:clamp(8px,1vw,12px)!important;
  overflow:visible!important;
  container-type:inline-size;
  container-name:soft-tile;
}
.software-tile > *,
.software-card > *{
  min-width:0!important;
  max-width:100%!important;
  flex-shrink:0!important;
}
.tile-top,
.card-state,
.tile-shape,
.card-icon,
.software-tile h3,
.software-card h3{
  flex:0 0 auto!important;
}
.software-tile p,
.software-card p{
  flex:0 1 auto!important;
  margin:0!important;
  font-size:clamp(12px,3.2cqi + 8px,16px)!important;
  line-height:1.5!important;
  overflow-wrap:anywhere!important;
  word-break:break-word!important;
}
.tile-shape,
.card-icon{
  width:clamp(40px,12cqi,48px)!important;
  height:clamp(40px,12cqi,48px)!important;
  margin-top:0!important;
}
.software-tile h3,
.software-card h3{
  margin:0!important;
  font-size:clamp(16px,4.8cqi + 8px,24px)!important;
  line-height:1.25!important;
  overflow-wrap:anywhere!important;
  word-break:break-word!important;
}
.tile-index,
.tile-state,
.card-state{
  font-size:clamp(11px,2.8cqi + 8px,12px)!important;
}
.software-card .card-link,
.software-tile .tile-link,
.card-link,
.tile-link{
  position:relative!important;
  inset:auto!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:0 0 auto!important;
  align-self:flex-start!important;
  margin-top:4px!important;
  margin-bottom:0!important;
  max-width:100%!important;
  min-height:var(--control-h,40px)!important;
  height:auto!important;
  visibility:visible!important;
  opacity:1!important;
  white-space:nowrap!important;
  overflow:visible!important;
}
.software-tile:hover,
.software-card:hover{
  z-index:3;
  transform:translateY(-4px)!important;
}
@supports not (width:1cqi){
  .software-tile h3,
  .software-card h3{font-size:clamp(16px,2vw + 8px,24px)!important}
  .software-tile p,
  .software-card p{font-size:clamp(12px,1vw + 10px,16px)!important}
  .tile-shape,
  .card-icon{width:clamp(40px,6vw,48px)!important;height:clamp(40px,6vw,48px)!important}
}
.metric-grid{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(min(120px,100%),1fr))!important;
  gap:var(--space-2,12px)!important;
}
.catalog-tabs{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:var(--space-2,12px)!important;
  max-width:100%!important;
  overflow:visible!important;
}
.about-panel{
  display:grid!important;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)!important;
  gap:clamp(20px,4vw,48px)!important;
  width:100%!important;
}
/* merged 关于本站: mail CTA sits under the heading */
.about-panel .cta{
  margin-top:var(--space-4,24px)!important;
}
.home-actions{
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:center!important;
  gap:var(--space-2,12px)!important;
  max-width:100%!important;
}

/* ---------- 5. Short windows (any device): let content breathe ---------- */
@media(max-height:760px){
  .view,
  .view.active{
    padding-top:var(--space-3,16px)!important;
    padding-bottom:var(--space-4,24px)!important;
  }
}

/* ---------- 6. Tablet ≤1100 ---------- */
@media(max-width:1100px){
  .module.active{transform:scale(1.08)!important}
}

/* ---------- 7. ≤1100: phone layout (1-col) kicks in immediately ----------
   No 2-col mid-band: below 1100px go straight to mobile chrome + 1 column. */
@media(max-width:1100px){
  body{
    /* two-row bar reserve + fixed safe gap under it */
    --notch-h:102px;
    --notch-gap:20px;
    --footer-h:0px;
    --control-h:34px;
    --control-px:11px;
    /* phone: nearly full width; keep a small soft bleed for shadows */
    --shell-width:100%;
    --shell-bleed:12px;
  }
  .module.active{transform:scale(1.03)!important}

  /* —— top bar: 2 rows —— */
  .notch{
    height:auto!important;
    min-height:var(--notch-h)!important;
    display:flex!important;
    flex-wrap:wrap!important;
    grid-template-columns:none!important;
    align-items:center!important;
    align-content:center!important;
    justify-content:space-evenly!important;
    row-gap:6px!important;
    column-gap:0!important;
    padding-top:max(8px,env(safe-area-inset-top))!important;
    padding-bottom:10px!important;
    overflow:visible!important; /* must show the 2nd row (overrides legacy overflow:hidden) */
  }
  .brand{
    order:1!important;
    flex:0 0 auto!important;
    grid-column:auto!important;
    grid-row:auto!important;
    justify-self:auto!important;
    max-width:calc(50% - 8px)!important;
    margin:0!important;
    font-size:20px!important;
  }
  .notch-actions{
    order:2!important;
    flex:0 0 auto!important;
    grid-column:auto!important;
    grid-row:auto!important;
    justify-self:auto!important;
    max-width:calc(50% - 8px)!important;
    margin:0!important;
  }
  .module-nav{
    order:3!important;
    flex:1 1 100%!important;
    grid-column:auto!important;
    grid-row:auto!important;
    width:100%!important;
    max-width:100%!important;
    display:flex!important;
    flex-wrap:wrap!important;
    align-items:center!important;
    justify-content:center!important;
    gap:8px!important;
    padding:6px 2px!important;
    overflow:visible!important;
  }
  .module-nav::-webkit-scrollbar{display:none!important}
  .module{
    height:32px!important;
    min-height:32px!important;
    padding:0 11px!important;
    font-size:12px!important;
  }
  .theme-toggle{width:34px!important;height:34px!important;min-width:34px!important}
  .auth-login{min-width:50px!important;padding:0 13px!important;font-size:13px!important}

  .app-shell{
    height:calc(100dvh - var(--notch-h) - var(--notch-gap) - var(--footer-h))!important;
    margin-top:calc(var(--notch-h) + var(--notch-gap))!important;
  }
  .view.active,
  .view.is-entering,
  .view.is-leaving{
    padding-top:max(var(--space-3,16px),var(--notch-gap))!important;
  }

  /* —— content: full mobile stack —— */
  .home-layout,
  .hero-slide,
  .hero-slide.active{
    grid-template-columns:1fr!important;
    gap:clamp(16px,4vw,24px)!important;
    align-content:start!important;
    align-items:start!important;
  }
  .slide-copy,.home-copy{order:1}
  .slide-art,
  .workspace-preview{
    order:2;
    width:100%!important;
    max-width:min(520px,100%)!important;
    margin-inline:auto!important;
  }
  .about-panel{grid-template-columns:1fr!important}

  .view[data-panel="home"] .home-carousel{
    height:auto!important;
    min-height:0!important;
    flex:1 1 auto!important;
    overflow:visible!important;
  }
  .home-carousel{height:auto!important;min-height:0!important;overflow:visible!important}
  .slide-track{
    display:grid!important;
    height:auto!important;
    min-height:0!important;
    overflow:visible!important;
    transform:none!important;
  }
  .hero-slide,
  .hero-slide.active{
    position:relative!important;
    inset:auto!important;
    grid-area:1/1!important;
    min-width:0!important;
    padding:8px 0 16px!important;
  }
  .home-selector{
    height:auto!important;
    min-height:48px!important;
    justify-content:center!important;
    padding:6px 0!important;
  }

  .software-grid,
  .software-grid.six-grid{
    /* ≤1100: full phone arrangement — 1 column */
    grid-template-columns:1fr!important;
    grid-auto-rows:max-content!important;
    align-items:start!important;
  }
  .software-tile,
  .software-card{
    min-height:max-content!important;
    height:max-content!important;
    align-self:start!important;
    padding:clamp(14px,4vw,18px)!important;
    gap:10px!important;
  }
  .software-tile h3,
  .software-card h3{font-size:clamp(18px,5.4vw,22px)!important}
  .software-tile .tile-link,
  .software-card .card-link{
    display:inline-flex!important;
    visibility:visible!important;
    opacity:1!important;
    margin-top:4px!important;
    flex:0 0 auto!important;
  }
  .catalog-head,
  .view-heading{
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    gap:8px!important;
  }
  .view-meta{margin-top:0!important}

  .slide-rail{
    width:100%!important;
    justify-content:center!important;
    max-width:100%!important;
  }
  .slide-dot{
    flex:1 1 0!important;
    width:auto!important;
    min-width:0!important;
    max-width:84px!important;
    height:34px!important;
    padding:0 8px!important;
  }
  .home-actions{
    display:flex!important;
    flex-wrap:wrap!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:10px!important;
    width:100%!important;
  }
  /* 「查看软件」：内容宽度的正常按钮，不要拉满整行 */
  .home-actions .cta{
    flex:0 0 auto!important;
    width:auto!important;
    max-width:100%!important;
    justify-content:center!important;
  }
  .home-actions .quiet-action{
    flex:0 0 auto!important;
    width:auto!important;
  }
  /* 「即将发布」与同排按钮同高、同字号、垂直居中 */
  .home-actions .slide-status{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    flex:0 0 auto!important;
    min-height:var(--control-h,34px)!important;
    height:var(--control-h,34px)!important;
    padding:0 14px!important;
    margin:0!important;
    border-radius:var(--control-radius,999px)!important;
    background:color-mix(in srgb,var(--surface) 88%,var(--line))!important;
    color:var(--muted)!important;
    font-size:inherit!important;
    font-weight:700!important;
    line-height:1!important;
    white-space:nowrap!important;
    box-sizing:border-box!important;
  }
  .home-actions .cta,
  .home-actions .slide-status{
    font-size:clamp(12px,3.2vw,14px)!important;
  }

  .update-card{
    grid-template-columns:1fr!important;
    display:flex!important;
    flex-direction:column!important;
    gap:8px!important;
  }
  .home-legal{
    display:flex!important;
    flex-direction:column!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    justify-content:center!important;
    gap:4px!important;
    width:100%!important;
    max-width:100%!important;
    padding:10px 10px max(14px,env(safe-area-inset-bottom,0px))!important;
    font-size:clamp(10px,3.1vw,12px)!important;
    line-height:1.45!important;
    letter-spacing:0!important;
    white-space:normal!important;
    overflow:visible!important;
    overflow-wrap:anywhere!important;
    word-break:break-word!important;
    text-align:center!important;
    background:color-mix(in srgb,var(--bg) 92%,transparent)!important;
  }
  .home-legal > *{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    text-align:center!important;
    white-space:normal!important;
  }
}

/* ---------- 8. Narrow phone ≤400 (extra tight tweaks only) ---------- */
@media(max-width:400px){
  body{--shell-pad:10px}
  .brand{font-size:18px!important;max-width:100%!important}
  .module{padding:0 10px!important;font-size:11px!important}
  .metric-grid{grid-template-columns:1fr!important}
  .home-actions .quiet-action{width:auto!important;justify-content:flex-start!important}
}

/* ---------- 10. Auth phone shell on small screens ---------- */
@media(max-width:430px), (max-height:760px){
  .auth-overlay{
    padding:8px!important;
    padding-top:max(8px,env(safe-area-inset-top))!important;
    padding-bottom:max(8px,env(safe-area-inset-bottom))!important;
  }
  .auth-panel{
    width:min(390px,100%)!important;
    max-width:100%!important;
    height:min(720px,calc(100dvh - 16px))!important;
    max-height:calc(100dvh - 16px)!important;
    border-radius:28px!important;
    margin:auto!important;
  }
  .auth-screen{
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch;
  }
  /* flex centering clips top content once it overflows — center via margins instead
     (.auth-nav is absolutely positioned, so target the first/last in-flow blocks) */
  .auth-screen{justify-content:flex-start!important}
  .auth-screen .auth-title{margin-top:auto!important}
  .auth-screen>:last-child{margin-bottom:auto!important}
}
@media(max-width:430px){
  .auth-island-brand{font-size:20px!important}
  .auth-phone-island{width:180px!important;height:40px!important}
  .auth-title{font-size:26px!important}
  .auth-desc{font-size:13px!important}
  .auth-tab{font-size:11px!important;padding:0 4px!important}
  .auth-field input{font-size:16px!important} /* ≥16px stops iOS zoom-on-focus */
  .auth-link-btn{font-size:14px!important;height:42px!important}
}

/* ---------- 11. Landscape phone ---------- */
@media(max-height:520px) and (orientation:landscape){
  body{--notch-h:48px;--notch-gap:12px;--footer-h:0px}
  .notch{
    height:48px!important;
    min-height:48px!important;
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)!important;
    padding-top:0!important;
    padding-bottom:0!important;
  }
  .brand{grid-column:1!important;grid-row:1!important;justify-self:center!important;max-width:100%!important;font-size:17px!important}
  .module-nav{
    grid-column:2!important;
    grid-row:1!important;
    width:auto!important;
    overflow-x:auto!important;
    scrollbar-width:none!important;
  }
  .module-nav::-webkit-scrollbar{display:none!important}
  .notch-actions{grid-column:3!important;grid-row:1!important;justify-self:center!important;margin:0!important}
  .module{height:31px!important;min-height:31px!important;font-size:11px!important}
  .app-shell{
    height:calc(100dvh - var(--notch-h) - var(--notch-gap) - var(--footer-h))!important;
    margin-top:calc(var(--notch-h) + var(--notch-gap))!important;
  }
}

/* ---------- 12. Reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  .module.active{transform:none!important}
}