/* Sky Guard V9.1 — Mobile First Finishing + Runtime Budget
 * Additive overrides only. V9 visual language preserved; no backend/OTP changes.
 * On compact/coarse devices static glass replaces costly continuously animated blur.
 */
:root{--sg-touch:44px}
html{scroll-padding-top:calc(88px + env(safe-area-inset-top,0px))}
body.v9,body.v9-app{overflow-x:clip;overflow-wrap:anywhere}
.v9 :where(a,button),.v9-app :where(a,button){-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.v9 :where(h1,h2,h3,p),.v9-app :where(h1,h2,h3,p){overflow-wrap:break-word}
.v9 :where(img,svg,video,canvas),.v9-app :where(img,svg,video,canvas){max-width:100%}
.v9-app :where(.dashboard-shell--os,.workspace--os,.service-grid,.service-card,.os-panel,.support-layout,.support-card,.v7-main,.v7-section,.v7-panel,.v7-cards,.v7-project-grid,.v7-shell,.metric-grid--os,.v7-double){min-width:0;max-width:100%}
.v9-app .v7-scroll,.v9-app .v7-panel:has(.v7-table){overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.v9-app .v7-table{min-width:640px}
.v9-app .v7-messages,.v9-app .v7-list,.v9-app .support-live-list,.v9-app .os-feed,.v9-app .service-modal__card{overflow-wrap:anywhere}
.v9-app :where(input,textarea,select){max-width:100%;min-width:0}
.v9-app .auth-submit,.v9-app .cta,.v9 :where(.v9-pill,.v9-menu-button){touch-action:manipulation}
.v9-mobile-nav{max-height:calc(100dvh - 98px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.v9-section:not(.v9-hero),.v9-finale{content-visibility:auto;contain-intrinsic-size:auto 780px}
.v9-home .v9-reveal{transition-duration:.48s}
/* Always-on paint savings: decorative turbulence + huge blur textures cost GPU even on desktops. */
.v9-grain{display:none!important}
.v9-ambient{filter:none!important;opacity:.20}
.v9-sculpture-haze{filter:none!important;opacity:.58}
.v9-nav,.v9-app .topbar{backdrop-filter:blur(12px) saturate(120%)!important;-webkit-backdrop-filter:blur(12px) saturate(120%)!important}
/* The story scenes render when scrolled into view; the hero stays immediate. */
/* Pause costly decorative keyframes when hidden/offscreen, without hiding copy. */
html.sg-page-idle .v9 :where(.v9-sculpture,.v9-ellipse,.v9-portal-disc,.v9-orb,.v9-sculpture-haze,.v9-project-graphic__halo,.v9-lyra-shape,.v9-auth-phone,.v9-support-rings b,.v9-family-symbol i,.v9-ticker-track),
.v9-sculpture-zone.sg-sculpture-idle :where(.v9-sculpture,.v9-ellipse,.v9-portal-disc,.v9-orb,.v9-sculpture-haze),
.v9-ticker.sg-ticker-idle .v9-ticker-track{animation-play-state:paused!important}
/* Keep a user-selectable cinematic mode but default to efficient composition on mobile. */
html[data-sg-motion="less"] .v9 :where(.v9-sculpture,.v9-ellipse,.v9-portal-disc,.v9-orb,.v9-sculpture-haze,.v9-project-graphic__halo,.v9-lyra-shape,.v9-auth-phone,.v9-support-rings b,.v9-family-symbol i,.v9-ticker-track){animation:none!important}
html[data-sg-motion="less"] .v9-motion .v9-reveal:not(.is-visible){opacity:1!important;transform:none!important}
html[data-sg-motion="less"] .v9-grain,html[data-sg-motion="less"] .noise{display:none!important}
html[data-sg-motion="less"] .v9-ambient{filter:none!important;opacity:.22}
html[data-sg-motion="less"] .v9 :where(.v9-pill,.v9-project,.v9-family,.v9-os-device),html[data-sg-motion="less"] .v9-app *{scroll-behavior:auto}
/* Motion settings use ordinary buttons; no inline event handlers (CSP-safe). */
.sg-motion-switch{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:38px;min-width:39px;border:1px solid var(--v9-border);border-radius:11px;background:var(--v9-glass-2);color:var(--v9-text);padding:8px 10px;font:600 11px "Vazirmatn",system-ui,sans-serif;white-space:nowrap;cursor:pointer}
.sg-motion-switch:hover{border-color:var(--v9-border-hi)}
.sg-motion-switch:focus-visible{outline:2px solid var(--v9-accent);outline-offset:3px}
.sg-motion-switch__symbol{font-size:15px;line-height:1}
/* Responsive visual budgets. The portal remains 3D but stops repainting every frame. */
@media (max-width:820px),(pointer:coarse){
 .v9-grain,.v9-app .noise{display:none!important}
 .v9-ambient{filter:none!important;opacity:.13!important}
 .v9-hero-grid{opacity:.25}
 .v9 :where(.v9-sculpture,.v9-ellipse,.v9-portal-disc,.v9-orb,.v9-sculpture-haze,.v9-project-graphic__halo,.v9-lyra-shape,.v9-auth-phone,.v9-support-rings b,.v9-family-symbol i,.v9-ticker-track){animation:none!important}
 .v9 :where(.v9-nav,.v9-mobile-nav,.v9-project,.v9-family,.v9-support-frame,.v9-os-device),
 .v9-app :where(.topbar,.side-panel--os,.v7-rail,.workspace--os,.support-card,.v7-panel,.v7-dialog,.auth-panel){backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
 .v9-nav,.v9-mobile-nav,.v9-app .topbar{background:var(--v9-glass-2)!important}
 .v9-app :where(.side-panel--os,.v7-rail,.workspace--os,.support-card,.v7-panel,.auth-panel){background-color:var(--v9-glass-2)!important}
 .v9-home .v9-reveal{transition-duration:.22s}
 .v9 :where(.v9-project,.v9-family,.v9-pill){transition-duration:.18s}
 .v9-sculpture-zone{contain:paint}
 .v9-sculpture{will-change:auto!important}
 .v9-section{contain-intrinsic-size:auto 640px}
 .v9-app .os-skeleton{animation:none!important}
}
@media (max-width:820px){
 .v9-nav{padding-inline:max(9px,env(safe-area-inset-right,0px)) max(9px,env(safe-area-inset-left,0px));width:auto;max-width:calc(100% - 20px)}
 .v9-nav-actions,.v9-nav .v9-theme-slot,.v9-app .topbar__actions{min-width:0;flex-shrink:0}
 .v9-nav .v9-brand,.v9-app .brand{min-width:0;flex-shrink:1}
 .v9-nav .v9-brand-txt,.v9-app .brand__text{min-width:0}
 .v9-app .topbar{max-width:calc(100% - 20px);gap:5px}
 .v9-app .portal-btn{white-space:nowrap;min-width:0}
 .v9-app .support-app,.v9-app .dashboard-shell--os,.v9-app .v7-shell{width:100%;max-width:100vw}
 .v9-app .auth-wrap--os{max-width:100vw}
 .v9-app .v7-panel:has(table){width:100%}
 .v9-app .os-two-col,.v9-app .support-layout{min-width:0}
 .v9-app .side-panel--os .side-nav a,.v9-app .v7-rail-links a{min-height:var(--sg-touch);display:inline-flex;align-items:center}
 .v9-app .v7-dialog{max-width:calc(100vw - 24px)}
 .v9-sculpture-zone,.v9-sculpture,.v9-project-graphic{max-width:100%}
 .v9-hero-ctas{flex-wrap:wrap}
 .v9-hero-ctas .v9-pill{min-height:var(--sg-touch)}
}
@media (max-width:560px){
 .v9 :where(.v9-hero,.v9-projects,.v9-panel-universe,.v9-os,.v9-auth,.v9-support),.v9-app{min-width:0}
 .v9-nav{inset-inline:9px}
 .v9-brand-icon{width:34px;height:34px}
 .v9-brand-icon img{max-width:30px}
 .v9-brand-txt b{font-size:11px;letter-spacing:.05em}
 .v9-theme-switch button{min-width:26px;min-height:33px;padding:6px 4px}
 .v9-theme-switch .v9-theme-dot{width:10px;height:10px}
 .v9-nav-actions{gap:3px}
 .v9-menu-button{width:36px;height:36px;min-width:36px}
 .sg-motion-switch{min-width:33px;min-height:33px;padding:5px 6px}
 .sg-motion-switch__label{display:none}
 .v9-hero-copy{min-width:0}
 .v9-display{font-size:clamp(42px,11.3vw,64px);line-height:1.25}
 .v9-section-title{font-size:clamp(31px,8.7vw,53px);line-height:1.48}
 .v9-spec--a{right:4px}.v9-spec--b{left:4px}
 .v9-sculpture-zone{height:clamp(275px,95vw,375px)}
 .v9-sculpture-foot{max-width:100%;white-space:normal;gap:5px}
 .v9-project,.v9-family{max-width:100%}
 .v9-os-preview-cards{gap:3px}
 .v9-app .topbar{padding-inline:7px}
 .v9-app .brand__text b{letter-spacing:.03em;font-size:10px}
 .v9-app .brand__sigil{width:35px;min-width:35px}
 .v9-app .topbar .v9-theme-switch button{min-width:24px;min-height:34px;padding:6px 3px}
 .v9-app .portal-btn{min-height:37px;padding-inline:7px;font-size:10px}
 .v9-app .metric-grid--os{grid-template-columns:repeat(2,minmax(0,1fr))}
 .v9-app .os-metric{min-width:0;padding:13px;min-height:145px}
 .v9-app .os-metric b{font-size:clamp(17px,4.3vw,27px);overflow-wrap:anywhere}
 .v9-app .v7-pagehead h1{font-size:clamp(28px,8vw,40px)}
 .v9-app .support-app__head h1{font-size:clamp(27px,8vw,38px)}
 .v9-app :where(input,textarea,select){font-size:16px}
 .v9-app .v7-scroll,.v9-app .v7-panel:has(.v7-table){width:100%;max-width:100%}
 .v9-app .v7-table{min-width:620px;font-size:12px}
 .v9-app .v7-form-grid{min-width:0}
 .v9-app .v7-section-head{flex-wrap:wrap;gap:9px}
 .v9-app .v7-search{min-width:0;max-width:100%}
 .v9-app .v7-search input{min-width:0;width:100%}
 .v9-app .service-modal__card{width:calc(100vw - 20px);max-width:calc(100vw - 20px);max-height:calc(100dvh - 30px);overflow-y:auto}
}
@media (max-width:365px){
 .v9-brand-txt b{font-size:10px}
 .v9-nav .v9-brand{gap:4px}
 .v9-nav .v9-theme-switch button{min-width:22px;padding-inline:2px}
 .v9-app .brand__text b{font-size:9px}
 .v9-app .topbar .v9-theme-switch button{min-width:21px;padding-inline:2px}
 .v9-app .portal-btn{font-size:9px;padding-inline:5px}
 .v9-app .brand__sigil{width:31px;min-width:31px}
 .v9-app .topbar__actions{gap:2px}
}
@media (prefers-reduced-motion:reduce){
 html{scroll-behavior:auto!important}
 .v9 :where(.v9-sculpture,.v9-ellipse,.v9-portal-disc,.v9-orb,.v9-sculpture-haze,.v9-project-graphic__halo,.v9-lyra-shape,.v9-auth-phone,.v9-support-rings b,.v9-family-symbol i,.v9-ticker-track){animation:none!important}
 .v9-motion .v9-reveal:not(.is-visible){opacity:1!important;transform:none!important}
 .v9-home .v9-reveal{transition:none!important}
}