/* Presentation tokens and accessibility layer. Product navigation stays intact. */
:root,[data-theme=light]{color-scheme:light;--bg:#f7f8f7;--panel:#edf1f2;--line:#cdd6d9;--muted:#52646e;--text:#20313b;--accent:#3b652e;--accentdark:#e0eadb;--input:#fff;--input-focus:#fff;--canvas:#e8eef0;--track:#cbd6d4;--hover:#e6eced;--primary-text:#fff;--primary-hover:#305725;--warning:#855600;--warning-bg:#fff5df;--error:#a82c3a;--error-bg:#fff0f1;--success:#315f26;--success-bg:#e7f1e3}
[data-theme=dark]{color-scheme:dark;--bg:#1d252c;--panel:#242e36;--line:#3c4a54;--muted:#a4b4bd;--text:#edf1f3;--accent:#bcdfa6;--accentdark:#30452d;--input:#28343e;--input-focus:#2e3d48;--canvas:#232e36;--track:#465952;--hover:#2b3842;--primary-text:#172611;--primary-hover:#d0efbc;--warning:#efc27a;--warning-bg:#3c3326;--error:#ffb2ba;--error-bg:#452b33;--success:#c4e6b1;--success-bg:#2c422e}
input,textarea,select{background:var(--input);border-color:var(--line)}
input:focus,textarea:focus,select:focus{background:var(--input-focus);outline:2px solid var(--accent);outline-offset:2px}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:1}
summary,.textbutton,.empty h3,.flow-guide ol,.progress-info,.modal-prompts p{color:var(--muted)}
.primary{color:var(--primary-text)}.primary:hover{background:var(--primary-hover)}
.canvas,.modal-canvas{background:var(--canvas);border-color:var(--line)}
.canvas-symbol,.canvas-caption,.divider{color:var(--muted)}
.job-thumb,.history-placeholder,.image-load-status,.text-load-status{background:var(--canvas);border-color:var(--line)}
.generation-row:hover,.generation-list[data-view^=grid-] .generation-entry:hover{background:var(--hover)}
.generation-list[data-view^=grid-] .generation-entry:hover,.social-button:hover,.social-button[aria-pressed=true]{border-color:var(--accent)}
progress,progress::-webkit-progress-bar,.load-meter-track,.load-meter-track progress,.load-meter-track progress::-webkit-progress-bar{background:var(--track)}
.notice{background:var(--warning-bg);color:var(--warning);border-color:var(--warning)}
.warning,.generation-row[data-state=error] .job-status strong,.image-loading-host[data-image-state=error] .image-load-status,.text-loading-frame[data-text-state=error] .text-load-status,.load-meter[data-mode=error] .load-meter-title{color:var(--warning)}
.notice[data-tone=error]{background:var(--error-bg);color:var(--error);border-color:var(--error)}
.notice[data-tone=success]{background:var(--success-bg);color:var(--success);border-color:var(--success)}
.toast{background:var(--success-bg);color:var(--success);border:1px solid var(--success);max-width:calc(100vw - 32px);width:max-content}
.generation-modal,.delete-image-dialog{border-color:var(--line)}
.generation-modal::backdrop,.gallery-modal::backdrop,.account-dialog::backdrop,.delete-image-dialog::backdrop{background:#101a24c9;backdrop-filter:blur(4px)}
.image-delete{background:var(--error-bg);border-color:var(--error);color:var(--error)}.image-delete:hover{background:var(--error);color:var(--bg)}
.delete-image-mark{background:var(--error-bg);color:var(--error)}
.textbutton,.buttonlink,.social-button,.modal-inspector>button,.modal-downloads a,.generation-filters button,summary{min-height:44px;min-width:44px}
.textbutton{padding:10px 2px}.buttonlink{display:inline-flex;align-items:center;justify-content:center}
.modal-close,.modal-copy-id{width:44px;height:44px;min-width:44px;flex-basis:44px}
.check{min-height:44px}.check input{flex-shrink:0}.check,.permission-row{line-height:1.5}
button:disabled{cursor:not-allowed}button[aria-busy=true]{cursor:wait}
.field{position:relative}.required-marker{color:var(--warning);position:absolute;right:0;top:0}
[data-required-state=missing]:not(:disabled){border-color:var(--warning)}
[aria-invalid=true]:not(:disabled){border-color:var(--error)}
.field-validation{color:var(--error);font-size:11px;line-height:1.5;font-weight:400}
.account-appearance{max-width:360px;margin:0 0 26px}.account-appearance .hint{margin-top:-6px}
.account-tabs{position:relative;scroll-padding:12px;overscroll-behavior-x:contain}
.account-tabs button{min-width:44px}
.account-tabs[data-more-tabs=true],.flow-subtabs[data-more-tabs=true]{box-shadow:inset -12px 0 10px -12px var(--accent)}
.account-panel{animation:none;min-width:0;overflow-wrap:anywhere}
[data-action-state]{position:relative;overflow:hidden}
[data-action-state=saving]::after{content:'';position:absolute;bottom:0;left:0;width:35%;height:3px;background:var(--accent);animation:action-save 1.1s linear infinite}
[data-action-state=success]{color:var(--success)!important;border-color:var(--success)!important;background:var(--success-bg)!important}
[data-action-state=error]{color:var(--error)!important;border-color:var(--error)!important;background:var(--error-bg)!important}
@keyframes action-save{from{transform:translateX(-110%)}to{transform:translateX(390%)}}
.version-notice{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:12;width:min(720px,calc(100% - 32px));display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 20px;border:1px solid var(--accent);border-radius:8px;background:var(--bg);box-shadow:0 8px 24px #10203024}
.version-notice strong{display:block;font-size:13px}.version-notice p{margin:6px 0 0;font-size:12px;color:var(--muted);line-height:1.5}.version-notice button{flex-shrink:0}
.viewport-notice{display:none;padding:10px 16px;background:var(--warning-bg);color:var(--warning);font-size:12px;line-height:1.5}
@media(min-width:651px){.generation-entry>.image-delete{position:relative}.generation-entry>.image-delete::before{content:'';position:absolute;inset:-4px}}
@media(max-width:374px){.viewport-notice{display:block}}
@media(max-width:650px){
  body:not(.login-page){padding-bottom:calc(76px + env(safe-area-inset-bottom))}
  .studio-sections{position:fixed;top:auto;bottom:0;left:0;right:0;z-index:8;min-height:64px;padding-bottom:env(safe-area-inset-bottom);border-top:1px solid var(--line);border-bottom:0;box-shadow:0 -4px 16px #10203014}
  .studio-sections .section-tabs{gap:0;padding:0 8px;justify-content:space-around}.studio-sections .section-tabs button{padding:0 6px;min-height:64px;justify-content:center;font-size:12px;border-bottom:0;border-top:2px solid transparent}.studio-sections .section-tabs button[aria-selected=true]{border-top-color:var(--accent)}
  .studio-sections>.credit-button{margin:0;padding:0 12px;min-height:64px}
  .flow-subtabs{position:sticky;top:0;z-index:3;scrollbar-width:thin}
  .account-dialog{width:100%;height:100dvh;max-width:100%;max-height:100dvh;margin:0;padding:20px 20px calc(20px + env(safe-area-inset-bottom));border:0;border-radius:0}
  .account-head{position:sticky;top:-20px;padding:20px 0 16px;background:var(--bg);z-index:2}.account-head h2{font-size:21px}
  .account-tabs{margin-top:10px;gap:20px}.account-tabs button{min-height:52px;padding-bottom:10px}
  .account-appearance{max-width:none}
  input,textarea,select{font-size:16px;min-height:44px}
  .generation-entry>.image-delete{width:44px;height:44px;padding:12px}.generation-entry>.image-delete svg{width:18px;height:18px}
  .generation-views button{min-height:44px}
  .secondary-actions{flex-wrap:wrap;justify-content:flex-start;gap:4px 18px}
  .toast{bottom:calc(82px + env(safe-area-inset-bottom))}
  .version-notice{bottom:calc(80px + env(safe-area-inset-bottom));gap:12px;padding:12px;align-items:flex-start}.version-notice button{min-height:44px;padding:10px}
}
@media(prefers-reduced-motion:reduce){[data-action-state=saving]::after{animation:none;width:100%;opacity:.6}}