/* Project form controls: no browser default look anywhere. Low-specificity :where() rules, so component
   styles keep precedence; native popups (select lists, date pickers, autofill) follow the dark scheme. */
:root{color-scheme:dark;accent-color:#c9ff7b;--field-bg:#0e1a12;--field-line:#4f6e51;--field-focus:#c9ff7b}
:where(input:not([type=checkbox],[type=radio],[type=range],[type=file],[type=color],[type=hidden],[type=submit],[type=button],[type=reset],[type=image]),select,textarea){box-sizing:border-box;min-height:44px;padding:10px 12px;border:1px solid var(--field-line);border-radius:var(--radius-12px);background-color:var(--field-bg);color:var(--text,var(--palette-e8f4e1));font:500 14px/1.3 var(--font,sans-serif);box-shadow:inset 0 1px 3px var(--palette-00000066);appearance:none;-webkit-appearance:none;transition:border-color .18s,box-shadow .18s}
:where(input,select,textarea)::placeholder{color:var(--palette-8fa688);opacity:1}
:where(input,select,textarea):hover:not(:disabled){border-color:var(--palette-6f9265)}
:where(input,select,textarea,button,summary,a):focus-visible{outline:2px solid var(--field-focus);outline-offset:2px}
:where(input,select,textarea):focus{border-color:var(--field-focus);box-shadow:inset 0 1px 3px var(--palette-00000066),0 0 0 3px var(--palette-c9ff7b26)}
:where(input,select,textarea):disabled{opacity:.55;cursor:not-allowed}
:where(textarea){min-height:96px;resize:vertical;line-height:1.5}
:where(select){padding-right:34px;background:var(--field-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23d8ff9d' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center;cursor:pointer;text-overflow:ellipsis}
:where(select) option,:where(select) optgroup{background:var(--field-bg);color:var(--palette-e8f4e1)}
:where(input[type=search]){padding-left:38px;background:var(--field-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Ccircle cx='7' cy='7' r='5' fill='none' stroke='%23a9c99d' stroke-width='1.8'/%3E%3Cpath d='M11 11l3.5 3.5' stroke='%23a9c99d' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 12px center}
:where(input[type=search])::-webkit-search-decoration{appearance:none}
:where(input[type=search])::-webkit-search-cancel-button{appearance:none;width:16px;height:16px;cursor:pointer;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' stroke='%23d8ff9d' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center}
:where(input[type=number])::-webkit-inner-spin-button,:where(input[type=number])::-webkit-outer-spin-button{appearance:none;margin:0}
:where(input[type=number]){-moz-appearance:textfield}
:where(input[type=date],input[type=time],input[type=datetime-local],input[type=month])::-webkit-calendar-picker-indicator{filter:invert(.85) sepia(.4) hue-rotate(40deg);cursor:pointer}
:where(input:-webkit-autofill,textarea:-webkit-autofill,select:-webkit-autofill){-webkit-text-fill-color:var(--palette-e8f4e1);box-shadow:inset 0 0 0 1000px var(--field-bg);caret-color:var(--palette-e8f4e1)}
/* Checkbox and radio: own rounded box with a lime check. */
:where(input[type=checkbox],input[type=radio]){flex:none;width:20px;height:20px;margin:0;border:1.5px solid var(--palette-7d9f72);border-radius:var(--radius-6px);background:var(--field-bg);box-shadow:inset 0 1px 2px var(--palette-00000088);cursor:pointer;appearance:none;-webkit-appearance:none;display:inline-grid;place-content:center;vertical-align:middle;transition:background .15s,border-color .15s}
:where(input[type=radio]){border-radius:var(--radius-circle)}
:where(input[type=checkbox]:checked){border-color:var(--field-focus);background:var(--field-focus) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10'%3E%3Cpath d='M1.5 5.2l3 3 6-6.4' fill='none' stroke='%23122014' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center}
:where(input[type=checkbox]:indeterminate){border-color:var(--field-focus);background:var(--field-focus) linear-gradient(var(--palette-122014),var(--palette-122014)) no-repeat center/10px 2px}
:where(input[type=radio]:checked){border-color:var(--field-focus);background:radial-gradient(circle,var(--field-focus) 0 4px,var(--field-bg) 5px)}
:where(input[type=checkbox],input[type=radio]):disabled{opacity:.5;cursor:not-allowed}
/* Range: slim track with a lime thumb. */
:where(input[type=range]){appearance:none;-webkit-appearance:none;height:28px;background:var(--palette-transparent);cursor:pointer}
:where(input[type=range])::-webkit-slider-runnable-track{height:4px;border-radius:var(--radius-4px);background:var(--palette-3c5541)}
:where(input[type=range])::-webkit-slider-thumb{appearance:none;width:16px;height:16px;margin-top:-6px;border:0;border-radius:var(--radius-circle);background:var(--field-focus);box-shadow:0 0 0 4px var(--palette-c9ff7b33)}
:where(input[type=range])::-moz-range-track{height:4px;border-radius:var(--radius-4px);background:var(--palette-3c5541)}
:where(input[type=range])::-moz-range-thumb{width:16px;height:16px;border:0;border-radius:var(--radius-circle);background:var(--field-focus)}
/* File picker button. */
:where(input[type=file]){color:var(--palette-c3d5bc);font:500 13px var(--font,sans-serif)}
:where(input[type=file])::file-selector-button{margin-right:10px;min-height:38px;padding:8px 14px;border:1px solid var(--palette-6f9265);border-radius:var(--radius-10px);background:var(--palette-1d2f21);color:var(--palette-d8ff9d);font:650 12px var(--display,sans-serif);cursor:pointer}
/* Bare buttons without a component class still look like project buttons. */
:where(button:not([class])){min-height:40px;padding:8px 14px;border:1px solid var(--palette-5d7d52);border-radius:var(--radius-12px);background:var(--palette-1b2b1f);color:var(--palette-d8ff9d);font:650 12px var(--display,sans-serif);cursor:pointer}
/* Shared close control (.wan-close): every dialog, sheet, panel, player and preview close uses this one
   compact glass button with a lime cross. Contexts only place it (header flex item or player overlay);
   size, fill, border, icon and states come from the --wan-close-* tokens. The visible size is 36px
   (40px on touch/phone), the ::before box keeps the hit area at 44px, the ::after draws the cross. */
:root{--wan-close-size:36px;--wan-close-hit:44px;--wan-close-radius:12px;--wan-close-icon:14px;--wan-close-stroke:2px;--wan-close-bg:linear-gradient(160deg,#2a4130f2,#142118f7);--wan-close-bg-hover:linear-gradient(160deg,#34503af5,#1a2c20f8);--wan-close-bg-active:linear-gradient(160deg,#1c2f22f7,#0f1a13f8);--wan-close-border:#7fa46f99;--wan-close-border-hover:#d8ff7a;--wan-close-color:#dcff9e;--wan-close-color-hover:#efffcb;--wan-close-shadow:inset 0 1px 0 #ffffff1f,0 6px 14px -6px #000000b3;--wan-close-focus:#e3ffb5;--wan-close-inset:20px;--wan-close-overlay-inset:10px}
@media(pointer:coarse),(max-width:590px){:root{--wan-close-size:40px}}
@media(max-width:590px){:root{--wan-close-inset:16px;--wan-close-overlay-inset:8px}}
.wan-close{position:relative;box-sizing:border-box;display:inline-grid;place-items:center;flex:none;align-self:center;width:var(--wan-close-size);height:var(--wan-close-size);min-width:0;min-height:0;margin:0 calc(var(--wan-close-inset) - var(--wan-close-host-pad,var(--wan-close-inset))) 0 0;padding:0;border:1px solid var(--wan-close-border);border-radius:var(--wan-close-radius);background:var(--wan-close-bg);box-shadow:var(--wan-close-shadow);color:var(--wan-close-color);font:0/0 sans-serif;appearance:none;-webkit-appearance:none;-webkit-tap-highlight-color:var(--palette-transparent);touch-action:manipulation;cursor:pointer;transition:border-color .18s,background .18s,color .18s,transform .12s}
.wan-close::before{content:"";position:absolute;inset:calc((var(--wan-close-size) - var(--wan-close-hit)) / 2 - 1px);border-radius:calc(var(--wan-close-radius) + 4px)}
.wan-close::after{content:"";position:absolute;inset:0;margin:auto;width:var(--wan-close-icon);height:var(--wan-close-icon);border-radius:var(--radius-1px);background:linear-gradient(currentColor,currentColor) center/100% var(--wan-close-stroke) no-repeat,linear-gradient(currentColor,currentColor) center/var(--wan-close-stroke) 100% no-repeat;transform:rotate(45deg);filter:drop-shadow(0 1px 1px var(--palette-020803b3));pointer-events:none}
@media(hover:hover){.wan-close:hover:not(:disabled){border-color:var(--wan-close-border-hover);background:var(--wan-close-bg-hover);color:var(--wan-close-color-hover)}}
.wan-close:active:not(:disabled){border-color:var(--wan-close-border-hover);background:var(--wan-close-bg-active);transform:scale(.94)}
.wan-close:focus-visible{outline:2px solid var(--wan-close-focus);outline-offset:3px}
.wan-close:disabled{opacity:.48;cursor:not-allowed;box-shadow:none}
.wan-close .feature-beta-badge{display:none!important}
/* Header hosts: the close keeps the studio player header inset from the sheet edge (host padding is compensated). */
.qr-gallery-dialog{--wan-close-host-pad:22px}.qr-curation-dialog{--wan-close-host-pad:24px}.help-dialog{--wan-close-host-pad:20px}.help-dialog.qr-dialog{--wan-close-host-pad:clamp(18px,4vw,27px)}.media-destination-dialog{--wan-close-host-pad:20px}
@media(max-width:590px){.help-dialog{--wan-close-host-pad:17px}.help-dialog.qr-dialog{--wan-close-host-pad:clamp(18px,4vw,27px)}}
@media(max-width:560px){.qr-curation-dialog{--wan-close-host-pad:16px}}
@media(prefers-reduced-motion:reduce){.wan-close{transition:none}.wan-close:active:not(:disabled){transform:none}}
/* Scrollbars. */
*{scrollbar-width:thin;scrollbar-color:var(--field-line) var(--palette-transparent)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{border:2px solid var(--palette-transparent);border-radius:var(--radius-10px);background:var(--field-line) padding-box}
::-webkit-scrollbar-thumb:hover{background:var(--palette-6f9265) padding-box}
::-webkit-scrollbar-track{background:var(--palette-transparent)}
/* Gallery list search and filter. */
.media-search{width:min(100%,360px);margin:4px 0 10px}
.media-pagination{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 12px}
.media-filter-toggle{display:inline-flex;align-items:center;gap:9px;min-height:40px;padding:6px 14px 6px 10px;border:1px solid var(--field-line);border-radius:var(--radius-999px);background:var(--palette-13221a);color:var(--palette-e3f2db);font:600 13px var(--display,sans-serif);cursor:pointer;transition:border-color .18s,background .18s}
.media-filter-toggle:hover{border-color:var(--palette-6f9265)}
.media-filter-toggle:has(input:checked){border-color:var(--field-focus);background:var(--palette-1d3322)}
.media-filter-toggle:has(input:focus-visible){outline:2px solid var(--field-focus);outline-offset:2px}
@media(max-width:560px){.media-search{width:100%}.media-pagination>select{flex:1 1 160px}}
@media(prefers-reduced-motion:reduce){:where(input,select,textarea,input[type=checkbox],input[type=radio]),.media-filter-toggle{transition:none}}
/* v45 context guard (studio and gallery): paired with WANContextGuard in interface-tools.js, which
   blocks the browser menu and image/link dragging. No iOS long-press callout anywhere; controls,
   links, media, media cards, navigation and dialog chrome start no long-press text selection.
   Prose outside that chrome stays selectable and the text-scale rules are untouched.
   Exceptions: editable fields and .allow-select copy targets keep selection, callout and paste. */
html{-webkit-touch-callout:none}
img,svg,video,canvas,picture,a,area{-webkit-user-drag:none}
a,button,summary,label,option,[role=button],[role=tab],[role=tablist],[role=menuitem],[role=switch],[role=option],
input[type=checkbox],input[type=radio],input[type=range],input[type=button],input[type=submit],input[type=reset],input[type=file],input[type=color],
img,svg,video,canvas,picture,nav,.sidebar,.topbar,.bottom-bar,.menu-scrim,.session-control,.session-menu,.gallery-zoom,
.studio-player,.player-overlay,.player-shell,.player-controls,.player-navigation,.video-quality-control,.gallery-stage,.gallery-tile,
.gallery-card,.gallery-thumb,.profile-media-card,.qr-curation-item,.qr-gallery-option,.preset-card,.summary-card,
dialog header,dialog [class*="-head"],dialog [class*="-foot"],dialog .dialog-actions{-webkit-user-select:none;user-select:none}
input:not([type=checkbox],[type=radio],[type=range],[type=button],[type=submit],[type=reset],[type=file],[type=color],[type=image]),
textarea,select,[contenteditable]:not([contenteditable="false"]),.allow-select{-webkit-touch-callout:default;-webkit-user-select:text;user-select:text}
/* Trailing 3D control pictogram (controls atlas, 3x3) drawn as ::after, so the host keeps a single text node. Northeast arrow by default. */
.has-control-icon::after{content:"";display:inline-block;flex:none;width:18px;height:18px;margin-inline-start:6px;vertical-align:-4px;background:url('/static/icons/wan-studio-controls.webp?v=20261029-42') no-repeat 0% 0%/300% 300%}.has-control-icon.is-download::after{background-position:100% 100%}
/* v47: wrapping label of a field without its own label (touchField): no box of its own; on phones
   studio-touch-targets.css turns it into the field's hit area. */
.tt-field{display:contents}
/* v48 branded confirmation dialog (interface-tools.js WANConfirm) — the help dialog shell with explicit actions.
   Lime primary action, danger tone for destructive actions, 44 px buttons, visible focus; index.html and gallery.html. */
.wan-confirm{width:min(440px,calc(100vw - 32px))}
.wan-confirm .wan-confirm-text{display:grid;gap:8px;margin:10px 0 18px;color:var(--palette-e8f4e1);font-size:14px;font-weight:500;line-height:1.55;overflow-wrap:break-word}
.wan-confirm .wan-confirm-text p{margin:0}
.wan-confirm-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px}
.wan-confirm-actions button{min-height:44px;padding:10px 18px;border:1px solid var(--palette-6f9265);border-radius:var(--radius-12px);background:var(--palette-1d3322);color:var(--palette-e8f4e1);font-family:var(--display,inherit);font-size:13px;font-weight:650;line-height:1.25;cursor:pointer}
.wan-confirm-actions button[hidden]{display:none}
.wan-confirm-actions .wan-confirm-ok{border-color:var(--palette-d8ff9d);background:var(--palette-d8ff9d);color:var(--palette-122014)}
.wan-confirm[data-tone=danger] .wan-confirm-ok{border-color:var(--palette-bf816e);background:var(--palette-3b2a22);color:var(--palette-ffd1bc)}
.wan-confirm-actions button:hover{border-color:var(--palette-d8ff9d)}
.wan-confirm-actions button:focus-visible{outline:2px solid var(--wan-close-focus);outline-offset:3px}
@media(max-width:480px){.wan-confirm-actions{display:grid;grid-template-columns:1fr}.wan-confirm-actions .wan-confirm-ok{order:-1}}
/* v49: touch devices include tablets. Natural targets in non-Access views avoid overlapping
   invisible extensions; the small help/close pictograms retain their shared transparent hit area.
   Access controls have their own page rules. Fine-pointer desktop keeps compact 32px controls. */
@media (max-width:640px),(pointer:coarse){
  :is(.page-view:not(#access),.login-card,dialog) :is(button,select,input:not([type=checkbox],[type=radio],[type=hidden],[type=range]),textarea,summary):not(.help-trigger,.wan-close,.profile-media-preview,.preset-card){min-height:44px}
  :is(.page-view:not(#access),.login-card,dialog) button:not(.help-trigger,.wan-close){min-width:44px}
  :is(.page-view:not(#access),.login-card,dialog) :is(.gallery-actions>a,.download-link,.authenticator-name,.authenticator-store,.help-dialog>a){display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px}
  :is(.page-view:not(#access),.login-card,dialog) :is(.gallery-actions,.media-action-menu>div,.profile-media-filters,.authenticator-apps,.authenticator-stores,.authenticator-apps>li,.profile-device,.profile-session,.profile-device-actions,.two-factor-actions,.two-factor-code-actions,.guest-profile-links,.job-bottom,.prompt-presets-list,.profile-device-list,.profile-session-list,.queue-admin-actions){gap:8px}
  body .page-pagination,body .sidebar .nav,body .sidebar-head-actions,body .top-actions,body .quick-status{gap:8px}
  body .top-actions button,body .sidebar-head-actions button{min-height:44px;min-width:44px}
  body .sidebar-head-actions :is(.qr-header-scan,.menu-toggle,.media-requests-shortcut){min-width:44px;min-height:44px}
  :is(.page-view:not(#access),.login-card,dialog) :is(.media-filter-toggle,.generation-access-control label,.two-factor-remember){min-height:44px}
  .page-view:not(#access) :is(.gallery-title:has(.job-select),.job-top--select){min-height:44px}
  .page-view:not(#access) .gallery-title:has(.job-select){gap:21px;padding-left:13px}
  .page-view:not(#access) .job-top--select{padding-left:13px;column-gap:21px}
  :is(.page-view:not(#access),.login-card,dialog) .video-quality-control select{min-height:44px}
  :is(.page-view:not(#access),dialog) .studio-player:has(.studio-player-navigation:not([hidden])) .video-quality-control{top:62px}
  :is(.page-view:not(#access),.login-card,dialog) :is(.studio-player-controls,.studio-player-navigation){gap:8px}
  :is(.page-view:not(#access),.login-card,dialog) .studio-player-controls input[type=range]{height:44px;margin-block:0}
  :is(.page-view:not(#access),dialog) .studio-player.is-compact .studio-player-controls:has(.studio-player-sound:not([hidden])){display:grid;grid-template-columns:44px minmax(44px,1fr) 44px 44px}
  :is(.page-view:not(#access),dialog) .studio-player.is-compact .studio-player-controls:has(.studio-player-sound:not([hidden])) .studio-player-clock{grid-column:2;grid-row:2;justify-self:center}
  :is(.page-view:not(#access),dialog) .studio-player.is-compact .studio-player-controls:has(.studio-player-sound:not([hidden])) .studio-player-sound{grid-column:3;grid-row:1}
  :is(.page-view:not(#access),dialog) .studio-player.is-compact .studio-player-controls:has(.studio-player-sound:not([hidden])) .studio-player-fullscreen{grid-column:4;grid-row:1}
  :is(.page-view:not(#access),dialog) .studio-player.is-compact:has(.studio-player-sound:not([hidden])):has(.studio-player-navigation:not([hidden])) .video-quality-control{top:8px;left:112px;max-width:calc(100% - 168px)}
  :is(.page-view:not(#access),.login-card,dialog) .authenticator-store{padding-inline:12px}
  :is(.page-view:not(#access),.login-card,dialog) .authenticator-apps>li{row-gap:8px}
  .login-card .two-factor-link{min-height:44px;display:inline-flex;align-items:center}
  .login-card .two-factor-remember{padding-block:8px}
  .help-trigger::after{content:"";position:absolute;inset:min(0px,calc(50% - 22px));width:auto;height:auto;margin:0;border:0;background:none;box-shadow:none;transform:none}
  .metric>span:has(>.help-trigger){padding-block:8px;margin-block:-8px;overflow:visible}
  .page-view:not(#access) .fact-label:has(.help-trigger){padding-block:9px}
  /* A table scroller brings the button box into view, so its box must include the whole target. */
  .page-view:not(#access) .table-heading .help-trigger{box-sizing:border-box;flex:0 0 44px;width:44px;height:44px;min-width:44px;min-height:44px;padding:0;border:0;background:none;box-shadow:none}
  .page-view:not(#access) .table-heading .help-trigger::before{content:"";position:absolute;z-index:-1;left:50%;top:50%;width:27px;height:27px;box-sizing:border-box;transform:translate(-50%,-50%);border:1px solid var(--palette-668268,var(--field-line));border-radius:var(--radius-circle);background:var(--palette-223024,var(--field-bg));pointer-events:none}
  .page-view:not(#access) .table-heading .help-trigger{isolation:isolate}
  .page-view:not(#access) .table-heading .help-trigger:is(:hover,:focus-visible)::before{border-color:var(--accent,var(--field-focus));background:var(--palette-344b33,var(--field-bg))}
}
@media (min-width:641px) and (pointer:fine){
  .page-view:not(#access) :is(.job-bottom button,.job-bottom a,.profile-media-copy){min-height:32px}
  .login-card .two-factor-link{min-height:32px;display:inline-flex;align-items:center}
  :is(.page-view:not(#access),dialog) .studio-player.is-compact .studio-player-controls button{min-width:32px;min-height:32px}
  .help-trigger::after{content:"";position:absolute;inset:min(0px,calc(50% - 16px));width:auto;height:auto;margin:0;border:0;background:none;box-shadow:none;transform:none}
  :is(.page-view:not(#access),.login-card,dialog) :is(.download-link,.authenticator-store,.summary-client-link){min-height:32px;display:inline-flex;align-items:center}
  :is(.page-view:not(#access),.login-card,dialog) .video-quality-control select{min-height:32px}
  :is(.page-view:not(#access),.login-card,dialog) .studio-player-controls input[type=range]{height:32px}
  .page-view:not(#access) :is(.gallery-title:has(.job-select),.job-top--select){min-height:32px}
  .metric>span:has(>.help-trigger){overflow:visible}
  .job-select{position:relative}
  .job-select::before{content:"";position:absolute;inset:calc(50% - 16px);background:none}
}
.login-card .two-factor-remember{min-height:44px}