/* SKY GUARD V8.1 — MOBILE ATELIER
   Scoped responsive art-direction for the exact V8 Three Worlds DOM.
   No general global layout reset, API, auth or desktop changes. */
@media (max-width: 920px) {
  html { scroll-padding-top: 92px; }
  body.final-home, body.app-page { min-width: 0; }
  .final-home main, .final-home main > section, .final-home .shell,
  .final-home .v8-hero__grid, .final-home .v8-stage-wrap,
  .final-home .statement__layout, .final-home .network-story__stage-inner,
  .final-home .portal-final__frame, .final-home .portal-final__grid,
  .final-home .footer--final, .os-page main, .app-page main,
  .os-page .workspace, .support-app, .v7-shell { min-width: 0; max-width: 100%; }
  .final-home .v8-hero__title span { white-space: normal; }
  .final-home .v8-hero__grid { grid-template-columns: minmax(0,1fr); }
  .final-home .v8-hero__copy { max-width: 660px; }
  .final-home .v8-stage-wrap { min-width: 0; }
  .final-home .footer--final { gap: 18px; }
  .final-home .footer--final > div { flex-wrap: wrap; }
  .v7-scroll, .table-wrap, .admin-table-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
@media (max-width: 680px) {
  :root { --shell: min(100% - 32px, 1220px); --final-shell: min(100% - 32px, 1320px); }
  html { scroll-padding-top: 85px; }
  /* A genuinely phone-sized, balanced glass toolbar: emblem / three worlds / menu. */
  .topbar, .topbar--final, .topbar.is-scrolled {
    top: max(10px, env(safe-area-inset-top));
    width: calc(100% - 20px);
    max-width: calc(100% - 20px);
    height: 64px; min-height: 64px;
    padding: 7px 10px;
    border-radius: 22px;
    gap: 7px;
    justify-content: space-between;
    box-shadow: 0 14px 40px rgba(14,35,80,.12), inset 0 1px 0 var(--v8-edge-bright) !important;
  }
  .topbar .brand { min-width: 0; flex: 0 0 auto; gap: 0; }
  .topbar .brand__sigil, .topbar--final .brand__sigil {
    width: 42px; height: 42px; min-width: 42px; flex: 0 0 42px;
    border-radius: 15px;
  }
  .topbar .brand__text { display: none; }
  .topbar .nav { display: none; }
  .topbar .topbar__actions {
    display: flex; flex: 1 1 auto; min-width: 0; gap: 6px;
    justify-content: center; margin: 0;
  }
  .topbar .v8-theme-switch {
    min-width: 0; max-width: 100%; width: auto; min-height: 42px;
    border-radius: 16px; padding: 3px; gap: 2px;
    background: var(--v8-surface-2);
  }
  .topbar .v8-theme-switch button {
    font-family: var(--font-fa); font-size: 10px; font-weight: 800;
    padding: 7px 8px; min-height: 34px; min-width: 0;
    gap: 5px; border-radius: 12px; color: var(--v8-soft);
    touch-action: manipulation;
  }
  .topbar .v8-theme-switch button[aria-pressed="true"] { color: var(--v8-ink); }
  .topbar .v8-theme-switch .v8-theme-dot { width: 9px; height: 9px; flex: 0 0 9px; }
  /* "Portal" already exists in the openable public mobile menu; do not crowd the bar. */
  .topbar--final .portal-btn--final { display: none !important; }
  .topbar .sgm-menu-trigger {
    display: flex; flex: 0 0 42px; width: 42px; height: 42px;
    border-radius: 15px; margin: 0; order: 3;
    color: var(--v8-ink); border-color: var(--v8-edge);
    background: var(--v8-surface-2); box-shadow: inset 0 1px 0 var(--v8-edge-bright);
  }
  .topbar .sgm-menu:not([hidden]) {
    top: calc(100% + 9px);
    padding: 11px; gap: 3px;
    background: var(--bg-2); border-color: var(--v8-edge);
    border-radius: 23px; box-shadow: 0 28px 70px rgba(0,0,0,.2);
    max-height: min(75dvh, 560px); z-index: 300;
  }
  .topbar .sgm-menu a { min-height: 48px; padding: 12px 15px; border-radius: 14px; }
  .topbar .sgm-menu .sgm-primary { color: var(--v8-button-ink); }
  /* Dashboard and operations have no mobile menu: retain sign-out, remove only ornamental live pill. */
  .topbar .os-sync { display: none; }
  .topbar .os-logout { min-height: 40px; height: 40px; padding: 0 9px; font-size: 11px; }
  .topbar .os-logout i { display: none; }

  /* Composed mobile landing: headline is readable, glass artwork is *below*, not behind text. */
  .v8-hero {
    display: block; min-height: 0; height: auto;
    padding: 102px 0 30px; overflow: clip;
    background: radial-gradient(ellipse 80% 36% at 52% 29%,var(--v8-glow-2),transparent 95%),
                radial-gradient(ellipse 80% 50% at 70% 86%,var(--v8-glow),transparent 85%);
  }
  .v8-hero:before { opacity: .12; background-size: 49px 49px; }
  .v8-hero__halo { filter: blur(38px); }
  .v8-hero__halo--a { width: 68vw; right: -28%; }
  .v8-hero__halo--b { width: 63vw; left: -20%; }
  .v8-hero__grid {
    display: grid; grid-template-columns: minmax(0, 1fr) !important;
    width: calc(100% - 34px); max-width: 520px; gap: 0;
    margin-inline: auto; align-items: start;
  }
  .v8-hero__copy { width: 100%; max-width: 100%; text-align: center; z-index: 3; }
  .v8-kicker {
    display: inline-flex; justify-content: center; max-width: 100%;
    padding: 8px 11px; gap: 8px; font-size: 8px;
    letter-spacing: .075em; border-radius: 999px;
  }
  .v8-kicker__number { display: none; }
  .v8-hero__title {
    font-size: clamp(34px, 9.5vw, 51px) !important;
    margin: 16px auto 14px; max-width: 100%;
    line-height: 1.25; font-weight: 900;
    letter-spacing: -.055em; text-align: center;
    overflow-wrap: normal; text-wrap: balance;
  }
  .v8-hero__title span { white-space: normal !important; display: block; }
  .v8-title__outline { -webkit-text-stroke: 1px var(--v8-primary); text-shadow: 0 0 20px var(--v8-glow); }
  .v8-hero__desc {
    margin: 0 auto 21px; max-width: 35ch;
    font-size: 13.5px; line-height: 2.04;
    color: var(--muted); text-align: center;
    overflow-wrap: break-word;
  }
  .v8-hero__actions {
    display: grid; grid-template-columns: minmax(0,1.12fr) minmax(0,.88fr);
    gap: 9px; width: 100%; max-width: 490px;
    margin: 0 auto 17px; align-items: stretch;
  }
  .v8-hero__actions .v8-button {
    width: 100%; min-width: 0; min-height: 51px;
    padding: 8px 12px; gap: 7px; font-size: 11.5px;
    border-radius: 16px; justify-content: center;
    white-space: normal; text-align: center;
  }
  .v8-hero__actions .v8-button__icon { font-size: 16px; }
  .v8-hero__trust {
    display: flex; justify-content: center; gap: 6px 11px;
    margin-inline: auto; font-size: 10px; line-height: 1.8;
    max-width: 400px; flex-wrap: wrap;
  }
  .v8-hero__trust span:not(:last-child):after { display: none; }
  .v8-hero__trust span { padding: 3px 8px; border: 1px solid var(--v8-edge); border-radius: 999px; background: var(--v8-surface); }
  .v8-hero__trust i { width: 6px; height: 6px; }
  /* Art direction: elegant miniature 3D object on its own stage, no text overlay. */
  .v8-stage-wrap {
    width: 100%; max-width: 470px; margin: 10px auto 0;
    padding: 0; position: relative;
  }
  .v8-stage {
    width: 100%; max-width: 440px; min-height: 0;
    height: auto; aspect-ratio: 1.15 / 1;
    margin: auto; perspective: 900px;
    transform: none !important; will-change: auto;
  }
  .v8-stage__orbit--one { inset: 14%; }
  .v8-stage__orbit--two { inset: 15%; }
  .v8-stage__orbit--three { inset: 27%; }
  .v8-monolith { inset: 16% 30% 18%; border-radius: 25px; }
  .v8-monolith__inner { padding: 10% 5%; }
  .v8-monolith__emblem { width: 75%; }
  .v8-monolith__cap, .v8-monolith__meta { font-size: 6px; letter-spacing: .09em; }
  .v8-monolith__wordmark { font-size: clamp(11px, 3vw, 15px); letter-spacing: .11em; }
  .v8-float {
    min-width: 0; max-width: 43%; gap: 7px;
    padding: 8px 10px; border-radius: 13px;
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    animation: none !important; transform: none !important;
  }
  .v8-float__icon { width: 26px; height: 26px; flex: 0 0 26px; border-radius: 9px; font-size: 13px; }
  .v8-float small { font-size: 6px; letter-spacing: .08em; white-space: normal; }
  .v8-float b { font-size: 8.5px; white-space: normal; }
  .v8-float__dot { display: none; }
  .v8-float--one { right: 1%; top: 12%; }
  .v8-float--two { left: 1%; top: 57%; }
  .v8-float--three { right: 1%; bottom: 8%; }
  .v8-stage__coordinates { bottom: 3%; left: 22%; font-size: 6px; }
  .v8-stage-caption { display: none; }
  .v8-hero__bottom { display: none; }

  /* Full public site: phone-sized statement, feature scenes, panels and footer. */
  .final-home .section { padding-block: 68px; }
  .statement { padding-block: 58px !important; }
  .statement__layout, .plans-final__head,
  .lyra-final__layout, .support-final__layout, .portal-final__grid { min-width: 0; }
  .statement__line { font-size: clamp(26px, 7vw, 39px); line-height: 1.55; }
  .final-home .display--final { font-size: clamp(30px, 8.2vw, 44px); line-height: 1.3; }
  .network-story__head { gap: 17px; }
  .network-story__stage-inner { width: calc(100% - 28px); max-width: 100%; }
  .network-visual { height: 330px; max-width: 100%; border-radius: 25px; }
  .network-chip { max-width: 42%; white-space: normal; text-align: center; }
  .network-legend { max-width: 100%; }
  .story-steps, .story-step, .plans-showcase { min-width: 0; }
  .plans-showcase { grid-template-columns: minmax(0,1fr); gap: 15px; }
  .panel-piece, .panel-piece--pro { min-height: 0; padding: 20px; border-radius: 25px; }
  .lyra-device-stage { height: 455px; max-width: 100%; }
  .lyra-orbit { width: min(88vw, 330px); }
  .phone--final { width: min(67vw, 230px); height: 440px; }
  .lyra-float { display: none; }
  .support-final__layout { gap: 25px; }
  .ticket-experience { min-width: 0; padding: 19px 15px; border-radius: 24px; }
  .portal-final__frame { border-radius: 26px; }
  .portal-final__grid { display: grid; grid-template-columns: minmax(0,1fr); padding: 18px; gap: 23px; }
  .portal-final__copy h2 { font-size: clamp(31px, 9vw, 49px); }
  .control-board { width: 100%; min-width: 0; overflow: hidden; }
  .ecosystem-link { min-width: 0; }
  .ecosystem-link > div { min-width: 0; overflow-wrap: anywhere; }
  .finale { min-height: 0; padding: 95px 0 75px; }
  .finale__content h2 { font-size: clamp(40px, 10vw, 60px); line-height: 1.22; }
  .finale__content > div { flex-wrap: wrap; justify-content: center; }
  .final-home .footer--final {
    width: calc(100% - 34px); max-width: 540px; min-height: 0;
    display: grid; grid-template-columns: minmax(0,1fr); justify-items: center;
    align-items: center; gap: 20px; text-align: center;
    padding: 37px 8px calc(45px + env(safe-area-inset-bottom));
    overflow: visible;
  }
  .footer--final .brand--footer { min-width: 0; justify-content: center; gap: 11px; }
  .footer--final .brand--footer .brand__text { display: flex; }
  .footer--final .brand--footer .brand__text small { display: none; }
  .footer--final .brand--footer .brand__text b { font-size: 12px; letter-spacing: .13em; }
  .footer--final p { order: 3; width: 100%; font-size: 10px; line-height: 1.75; white-space: normal; overflow-wrap: anywhere; margin: 0; }
  .footer--final > div { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 18px; width: 100%; }
  .footer--final > div a { min-height: 35px; display: inline-flex; align-items: center; font-size: 11px; }

  /* All account pages: keep real forms, live service cards and operations controls reachable. */
  .auth-wrap, .auth-panel, .auth-card, .connect-shell, .connect-card { min-width: 0; max-width: 100%; }
  .auth-panel { padding-inline: 15px; }
  .auth-card--os, .connect-card { padding-inline: 16px; }
  .dashboard-shell, .dashboard-shell--os { padding-inline: 10px; }
  .workspace--os { padding-inline: 14px; }
  .workspace-head--os, .os-section__head, .os-panel__head { gap: 10px; flex-wrap: wrap; }
  .workspace-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); width: 100%; gap: 8px; }
  .workspace-actions > * { min-width: 0; }
  .os-command { width: 100%; }
  .os-command input { min-width: 0; }
  .metric-grid--os, .service-grid, .market-grid { grid-template-columns: minmax(0,1fr); }
  .service-capsule, .os-panel, .support-card, .v7-panel { overflow-wrap: anywhere; }
  .service-capsule { padding: 16px; }
  .service-facts, .identity-facts, .detail-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .v7-shell { padding-inline: 10px; }
  .v7-section, .v7-panel, .v7-rail { min-width: 0; }
  .v7-scroll { overflow-x: auto; max-width: 100%; }
  .support-app { padding-inline: 12px; }
  .v7-thread { min-width: 0; }
  .v7-message { max-width: 100%; overflow-wrap: anywhere; }
  .support-card input, .support-card select, .support-card textarea,
  .auth-card input, .auth-card select, .auth-card textarea,
  .v7-dialog input, .v7-dialog select, .v7-dialog textarea { font-size: 16px; min-width: 0; }
  .v7-dialog { width: calc(100% - 20px); max-height: 92dvh; overflow-y: auto; }
  .table-wrap, .v7-scroll { overscroll-behavior-x: contain; }
  .v7-scroll .v7-table { min-width: 610px; }
  .os-footer, .v7-pagehead, .support-app__head { overflow-wrap: anywhere; }
  /* Touch devices do not need cursor-driven glow or expensive blur animations. */
  .cursor-glow { display: none !important; }
  .v8-monolith { animation-duration: 11s; }
  .v8-stage .v8-float { animation: none !important; }
}
@media (max-width: 380px) {
  .topbar, .topbar--final { width: calc(100% - 14px); max-width: calc(100% - 14px); padding-inline: 8px; gap: 5px; }
  .topbar .brand__sigil, .topbar--final .brand__sigil { width: 36px; height: 36px; min-width: 36px; flex-basis: 36px; }
  .topbar .v8-theme-switch button { font-size: 9px; padding: 7px 5px; gap: 4px; }
  .topbar .v8-theme-switch .v8-theme-dot { width: 8px; height: 8px; flex-basis: 8px; }
  .topbar .sgm-menu-trigger { width: 38px; height: 38px; flex-basis: 38px; }
  .v8-hero__grid { width: calc(100% - 26px); }
  .v8-hero__title { font-size: clamp(31px, 9.2vw, 36px) !important; }
  .v8-hero__actions { grid-template-columns: minmax(0,1fr); }
  .v8-hero__trust { gap: 6px; }
  .v8-stage { aspect-ratio: 1.18 / 1; }
  .v8-float--three { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .v8-stage, .v8-monolith, .v8-float, .v8-down { animation: none !important; transition: none !important; will-change: auto !important; }
}