/* Mobile app shell. Desktop keeps the existing horizontal navigation. */
.nav-panel{display:contents}
.mobile-tabs,.mobile-menu-heading,.mobile-page-label{display:none}
.mobile-menu-backdrop[hidden]{display:none}
@media(max-width:760px), (max-width:1000px) and (max-height:500px) and (pointer:coarse){
 :root{--mobile-tab-height:72px;--mobile-bottom:calc(var(--mobile-tab-height) + env(safe-area-inset-bottom,0px));--mobile-header:calc(60px + env(safe-area-inset-top,0px));--z-mobile-header:60;--z-mobile-backdrop:65;--z-mobile-sheet:70;--z-mobile-tabs:50}
 html{scroll-padding-top:calc(var(--mobile-header) + 16px);scroll-padding-bottom:calc(var(--mobile-bottom) + 20px)}
 body:not(.auth-shell-page):not(.admin-shell-page){padding-bottom:var(--mobile-bottom)}
 .nav{height:var(--mobile-header);padding:env(safe-area-inset-top,0px) max(20px,env(safe-area-inset-right,0px)) 0 max(20px,env(safe-area-inset-left,0px));gap:16px;z-index:var(--z-mobile-header);background:#0b0b0d;border-bottom:1px solid #33272d;box-shadow:none}
 .nav.is-scrolled{box-shadow:none;border-color:#57414a}
 .nav .brand-logo{width:168px}
 .mobile-page-label{display:block;margin-left:auto;font:600 12px/1.4 var(--font);color:#d2c4cb;max-width:32%;text-align:right}
 .nav .menu-toggle{display:none}
 .mobile-tabs{position:fixed;inset:auto 0 0;z-index:var(--z-mobile-tabs);height:var(--mobile-bottom);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));padding:6px max(8px,env(safe-area-inset-right,0px)) env(safe-area-inset-bottom,0px) max(8px,env(safe-area-inset-left,0px));background:#141014;border-top:1px solid #49313c}
 .mobile-tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:0;min-height:60px;padding:3px 2px;border:0;background:transparent;color:#cbbec5;font:600 11px/1.2 var(--font);text-decoration:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
 .mobile-tab-icon{display:flex;align-items:center;justify-content:center;width:44px;height:28px;border-radius:8px;transition:background-color 160ms,color 160ms}
 .mobile-tab .icon{width:22px;height:22px}
 .mobile-tab[aria-current=page]{color:#fff}
 .mobile-tab[aria-current=page] .mobile-tab-icon{background:#48212e;color:#ff8994}
 .mobile-tab-create .mobile-tab-icon{width:46px;background:#d71932;color:#fff;border-radius:8px}
 .mobile-tab-create[aria-current=page] .mobile-tab-icon{background:#d71932;color:#fff}
 .mobile-tab:active .mobile-tab-icon{background:#633244}
 .mobile-tab:focus-visible,.mobile-menu-close:focus-visible{outline:2px solid #ff8994;outline-offset:-3px;border-radius:8px}
 .mobile-menu-backdrop{display:block;position:fixed;inset:0;background:#000b;z-index:var(--z-mobile-backdrop)}
 .nav:has(.nav-panel.is-open){z-index:var(--z-mobile-sheet)}
 .nav .nav-panel{display:flex;flex-direction:column;position:fixed;inset:auto 0 0;max-height:calc(100dvh - env(safe-area-inset-top,0px) - 28px);padding:12px max(22px,env(safe-area-inset-right,0px)) max(24px,env(safe-area-inset-bottom,0px)) max(22px,env(safe-area-inset-left,0px));overflow-y:auto;overscroll-behavior:contain;border-top:1px solid #67414f;border-radius:16px 16px 0 0;background:#181216;visibility:hidden;pointer-events:none;transform:translateY(16px);opacity:0;transition:transform 200ms cubic-bezier(.16,1,.3,1),opacity 200ms,visibility 200ms}
 .nav .nav-panel.is-open{visibility:visible;pointer-events:auto;transform:none;opacity:1}
 .mobile-menu-heading{position:sticky;top:-12px;z-index:2;background:#181216;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 0 12px;border-bottom:1px solid var(--line)}
 .mobile-menu-heading h2{margin:0;font:700 22px/1.3 var(--font);letter-spacing:-.02em}
 .mobile-menu-close{width:44px;height:44px;display:grid;place-items:center;background:transparent;border:0;color:#f5edf2}
 .mobile-menu-close .icon{transform:rotate(45deg);width:26px;height:26px}
 .nav .nav-panel .primary-nav{display:flex;position:static;flex-direction:column;align-items:stretch;max-height:none;overflow:visible;padding:8px 0;margin:0;gap:0;border:0;background:transparent;font:600 15px/1.5 var(--font);letter-spacing:0}
 .nav .nav-panel .primary-nav>a,.nav .nav-panel .guide-menu>summary{min-height:50px;padding:12px 0;border-bottom:1px solid var(--line);font:inherit;color:#e7dce2}
 .nav .nav-panel .primary-nav>[aria-current=page]{color:#ff8994;text-decoration:none}
 .nav .nav-panel .guide-menu{order:0}
 .nav .nav-panel .guide-options{position:static;max-height:none;padding:4px 0 8px;background:transparent;border:0;box-shadow:none}
 .nav .nav-panel .guide-options a{min-height:44px;padding:10px 0;font-size:14px;white-space:normal}
 .nav .nav-panel .nav-actions{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-top:12px}
 .nav .nav-panel .nav-create[data-guest-studio]{width:auto;display:inline-flex;min-height:46px;height:auto;max-width:calc(100% - 58px);white-space:normal;padding:12px 16px;font:600 14px/1.4 var(--font);gap:10px}
 .nav .nav-panel .nav-create-label{display:inline}
 .nav .nav-panel .language-menu>summary{width:auto;min-width:100px;gap:10px;padding-inline:10px;border:1px solid #604650}
 .nav .nav-panel .language-menu>summary .language-current{display:inline;font:600 13px/1.4 var(--font)}
 .nav .nav-panel .account-menu>summary{border:1px solid #604650;padding:4px 10px;gap:8px}
 .nav .nav-panel .account-menu>summary>.icon{display:block}
 .toast{bottom:calc(var(--mobile-bottom) + 16px);max-width:calc(100vw - 32px)}
 .hero{display:flex;flex-direction:column;height:auto;min-height:0}
 .hero .hero-content,.hero .hero-copy{display:contents}
 .hero .hero-intro{order:0}
 .hero .hero-entry{order:2}
 .hero .hero-intro{padding-top:calc(var(--mobile-header) + 24px);margin-inline:20px}
 .hero .hero-entry{margin:0 20px 12px}
 :root body[data-page="/"] .hero .hero-intro h1{font-size:clamp(3.5rem,16vw,4.25rem)}
 .hero>.ribbon-marquee{order:1;flex-shrink:0;height:100px}
 .hero .ribbon{height:34px}.hero .ribbon--red{top:8px}.hero .ribbon--light{top:50px}
 .hero .hero-content{padding:calc(var(--mobile-header) + 26px) 20px 28px;gap:24px}
 .hero .hero-copy{gap:20px}
 .hero .hero-intro{max-width:100%}
 .hero .eyebrow{font-size:10px;letter-spacing:.04em;line-height:1.6}
 .hero h1,html[lang] .hero h1{font-size:clamp(58px,19vw,82px);line-height:.98;letter-spacing:-.025em;margin:16px 0}
 html:is([lang=zh-CN],[lang=ja],[lang=ko],[lang=ru]) .hero h1{font-size:clamp(46px,15.5vw,66px);line-height:1.1}
 .hero .hero-description{font-size:16px;line-height:1.65;margin:0;max-width:32ch}
 .hero .quick-start{padding:16px;border-radius:12px;box-shadow:none}
 .quick-heading label{font-size:14px;line-height:1.5}
 .quick-heading>span{display:none}
 .quick-start textarea{font-size:16px;line-height:1.6;min-height:100px}
 .hero .quick-presets{gap:8px;margin-top:12px}
 .hero .quick-presets>span{display:none}
 .hero .quick-presets button{min-height:44px;padding:9px 11px;font-size:12px;border-radius:6px;flex:1}
 .hero .quick-bottom{gap:12px;margin-top:16px}
 .hero .quick-bottom p{font-size:12px;line-height:1.6}
 .hero .quick-bottom .button{width:100%;min-height:48px;justify-content:space-between;font-size:14px;border-radius:6px;white-space:normal}
 .hero .hero-stack{order:3;width:80%;max-width:380px;margin:4px auto 20px;aspect-ratio:1.35}
 .section{padding:44px 20px}
 .section h2{font-size:32px;line-height:1.2;letter-spacing:-.025em}
 .workspace,.blog-page,.article-page,.legal-page,.pricing-catalog{padding-inline:20px;padding-top:calc(var(--mobile-header) + 28px)}
 body[data-page="/studio"] .workspace{padding:calc(var(--mobile-header) + 24px) 16px 36px}
 .workspace .workspace-heading{align-items:flex-start;gap:12px;padding-bottom:18px;margin-bottom:20px}
 .workspace .workspace-heading h1{font:700 26px/1.3 var(--font)}
 .workspace .account-state{font-size:12px;line-height:1.6;max-width:46%;overflow-wrap:anywhere}
 .workspace .account-state strong{font-size:18px}
 .workspace .studio-form{padding:18px 16px;border-radius:12px}
 .workspace #auth-gate{font-size:13px;padding:12px;line-height:1.7;border-radius:8px}
 .studio-form .panel-heading{margin-bottom:18px}
 .studio-form label,.studio-form .format-field legend,.studio-form .quote-controls label{font-size:13px;margin-bottom:8px}
 .studio-form #prompt{height:112px;min-height:112px;padding:12px;font-size:16px}
 .studio-form .prompt-ideas{gap:8px;margin:10px 0 14px}
 .studio-form .prompt-ideas button{padding:8px 10px;font-size:12px;border-radius:6px}
 .studio-extras>summary{min-height:48px;font-size:13px}
 .studio-extras summary small{font-size:12px}
 .studio-visual-controls{grid-template-columns:1fr;gap:16px}
 .studio-form .format-options{gap:8px}
 .studio-form .format-options label>span{min-height:48px;font-size:13px;gap:8px;border-radius:6px}
 .studio-form .format-options i{display:block}
 .studio-form .quote-controls{grid-template-columns:1fr 1fr;gap:14px 10px;margin-top:18px}
 .studio-form .quote-controls>div:first-child{grid-column:1/-1}
 .studio-form .ui-select-trigger,.studio-form select{min-height:48px;font-size:16px;padding:12px}
 .studio-form .model-info[data-generation-summary]{font-size:12px;padding:12px 0;line-height:1.7}
 .studio-submit{position:static;padding-top:14px}
 .studio-form .generate-button{min-height:52px;border-radius:6px;gap:12px;justify-content:space-between}
 .studio-results .preview-panel{border-radius:12px}
 .workspace .studio-grid{grid-template-columns:1fr;gap:32px}
 .workspace .recent-jobs{margin-top:32px}
 .workspace .jobs-list{overflow-wrap:anywhere}
 .blog-heading h1{font-size:52px;max-width:100%;line-height:1.1}
 .blog-heading h1>.lime{position:static;font-size:inherit}
 .blog-tools input,.quote-panel select,.ui-select-trigger{font-size:16px}
 .category-filters{flex-wrap:nowrap;overflow-x:auto;padding-bottom:8px;scrollbar-width:thin}
 .category-filters button{min-height:44px;flex-shrink:0;font-size:12px;padding:10px 12px}
 .article-page h1{font-size:34px;line-height:1.2;overflow-wrap:anywhere}
 .article-body{font-size:16px;line-height:1.85}
 .pricing-catalog>h1{font-size:36px;line-height:1.2;letter-spacing:-.025em}
 .pricing-intro{font-size:16px;line-height:1.7}
 .quote-panel{padding:20px 16px;border-radius:12px;margin-block:26px}
 .plan-grid{grid-template-columns:1fr;gap:16px}.plan-card{padding:24px;border-radius:12px}
 .billing-controls button{min-height:48px;font-size:14px}
 .plan-card li,.plan-capacity,.payment-availability,.pricing-tax{font-size:13px;line-height:1.7}
 .plan-card .button{min-height:48px;font-size:14px;border-radius:6px}
 .site-footer{padding:40px 20px 28px}
 .site-footer .footer-links{gap:24px 18px}
 .site-footer .footer-links a{display:inline-flex;align-items:center;min-height:44px;line-height:1.5;font-size:13px}
 .site-footer .footer-links li{margin-bottom:2px}
 .site-footer .community-card{border-left-width:1px;border-radius:12px;padding:20px}
 .closing{padding:40px 20px}.closing h2{font-size:34px;line-height:1.2}
 .mobile-keyboard-open .mobile-tabs{visibility:hidden;pointer-events:none}
 @media(prefers-reduced-motion:reduce){.nav .nav-panel,.mobile-tab-icon{transition:none}}
}
@media(max-width:350px){.nav .brand-logo{width:148px}.mobile-tab{font-size:10px}.hero .hero-content{padding-inline:16px}.hero .quick-start{padding:14px}.hero .quick-presets button{font-size:11px;padding-inline:6px}.section,.blog-page,.article-page,.legal-page,.pricing-catalog{padding-inline:16px}.studio-extras summary small{display:none}.workspace .studio-form{padding:16px 12px}}
@media(max-width:760px), (max-width:1000px) and (max-height:500px) and (pointer:coarse){
 .admin-shell-page{padding-bottom:var(--mobile-bottom)}
 .admin-shell-page #admin-menu-toggle{display:none}
 .admin-shell-page .admin-sidebar{inset:auto 0 0;width:100%;max-height:calc(100dvh - env(safe-area-inset-top,0px) - 24px);padding:18px 20px max(24px,env(safe-area-inset-bottom,0px));border:1px solid var(--line);border-bottom:0;border-radius:16px 16px 0 0;transform:translateY(100%)}
 .admin-drawer-open .admin-sidebar{transform:none}
 .admin-sidebar-brand{padding-bottom:16px}
 .admin-sidebar-label{display:none}
 .admin-sidebar .admin-navigation{gap:2px}
 .admin-sidebar .admin-nav-group summary{min-height:48px;font-size:14px}
 .admin-sidebar .admin-submenu a{font-size:13px;min-height:46px}
 .admin-sidebar-bottom{padding-bottom:0;margin-top:16px}
 html[data-admin-theme=light] .admin-mobile-tabs{background:#fff;border-top-color:#c6bcc1}
 html[data-admin-theme=light] .admin-mobile-tabs .mobile-tab{color:#5c4b54}
 html[data-admin-theme=light] .admin-mobile-tabs .mobile-tab[aria-current=page]{color:#981229}
 html[data-admin-theme=light] .admin-mobile-tabs .mobile-tab[aria-current=page] .mobile-tab-icon{color:#981229;background:#f9e7ec}
}