/* BDAi "Studio" skin (26 September 2026). Loaded after styles.css and webflow-theme.css; every rule below the skin
   switch is scoped to :root[data-skin="studio"], so the Classic skin renders exactly as before (src/skin.js).

   One small system instead of per-component values:
   - Colour: 3 text greys, 3 line strengths, 2 surfaces, 1 accent, 2 status colours.
   - Type: sans for content and actions, mono caps for labels and meta. 5 sizes: 11 / 12 / 13 / 15 / 18.
   - Space: 4-px grid (4, 8, 12, 16, 24, 32). Radius: 4 (controls) and 8 (cards, panels, dialogs).
   - Controls: 28 px (compact) and 36 px (default). Buttons: primary, secondary, text. One segmented control.
   - Layout: sidebar from 1200 px, a top bar on tablets, a floating bottom menu on phones. The composer and the gallery
     follow the width of the main panel (container queries), not the window. */

/* Studio is the only skin since 30 September 2026 (the former skin switch is gone); the footer shows on tablets/phones. */
.studio-footer { display:none; }

@keyframes studio-sweep { from { transform:translateX(-100%); } to { transform:translateX(100%); } }
@keyframes studio-pulse { 50% { opacity:.3; } }

:root[data-skin="studio"] {
  --bg:#0a0a0a;
  --surface:rgba(17,17,17,.9);
  --surface-solid:#141414;
  --raised:rgba(255,255,255,.022);
  --field:#1b1b1b;
  --field-hover:#212121;
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.14);
  --line-3:rgba(255,255,255,.26);
  --text:#f2f1ef;
  --text-2:#a9a8a4;
  --text-3:#74736f;
  --accent:#efeeec;
  --on-accent:#0a0a0a;
  --pending:#dcc99d;
  --danger:#eca7a7;
  --glass:rgba(12,12,12,.72);
  /* Mask colours of two Characters (two-characters.js PAIR_COLOURS): orange and blue stay apart for colour blindness. */
  --pair-1:#ff9f43;
  --pair-2:#4dabf7;
  --f-sans:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --f-mono:Inconsolata,ui-monospace,SFMono-Regular,Menlo,monospace;
  --t-xs:11px; --t-sm:12px; --t-md:13px; --t-lg:15px; --t-xl:18px;
  --r-sm:4px; --r-md:8px;
  --h-sm:28px; --h-md:36px;
  --shadow:0 24px 64px rgba(0,0,0,.55);
  /* Variables the two older stylesheets read. */
  --panel:var(--surface); --border:var(--line); --muted:var(--text-2); --radius:var(--r-md);
  color:var(--text);
  font-family:var(--f-sans);
  font-size:14px;
  font-weight:400;

  & body { background:var(--bg); line-height:1.4; font-feature-settings:normal; }
  & #brand-background::after { background:rgba(8,8,8,.74); }
  & :focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
  & .muted { color:var(--text-2); }
  & .small { font-size:var(--t-sm); line-height:1.5; }
  & .field-error { color:var(--danger); font-size:var(--t-sm); }
  & .pending-hint { color:var(--pending); font-size:var(--t-sm); margin-top:8px; }
  & .connection-hint { color:var(--text-2); font-size:var(--t-sm); margin:0 0 12px; }
  & .connection-error { padding:12px 14px; border:0; border-radius:var(--r-sm); background:rgba(236,167,167,.06); box-shadow:inset 0 0 0 1px rgba(236,167,167,.24); color:var(--danger); font-size:var(--t-md); }

  /* ---- Labels: one voice for every small caption (mono, caps, quiet) ---- */
  & :is(.section-label, .control-card h2, .option-label, .advanced-fields .field>label, .advanced .field>label, .advanced .field>span:first-child,
        .character-field-box .field>span, .gender-field legend, .settings-form .field>span:first-child, .dataset-upload>.section-label,
        .training-model-choices legend, .image-info .field>span, .character-status-line, .pose-dialog section>p,
        .control-card .field>span:first-child, .control-card .field>label) {
    font:500 var(--t-xs)/1.3 var(--f-mono); letter-spacing:.07em; text-transform:uppercase; color:var(--text-3);
  }

  /* ---- Fields ---- */
  & :is(input:not([type=checkbox],[type=radio],[type=range]), textarea, select) {
    border:0; border-radius:var(--r-sm); background:var(--field); box-shadow:inset 0 0 0 1px var(--line); color:var(--text); font-size:var(--t-md); font-weight:400;
  }
  & :is(input:not([type=checkbox],[type=radio],[type=range]), textarea, select):hover { background:var(--field-hover); }
  & :is(input:not([type=checkbox],[type=radio],[type=range]), textarea, select):focus { background:var(--field-hover); box-shadow:inset 0 0 0 1px var(--line-3); }
  & :is(input, textarea)[readonly] { background:transparent; color:var(--text-2); }
  & :is(input, textarea)::placeholder { color:var(--text-3); }
  & :is(input, textarea)[aria-invalid=true] { box-shadow:inset 0 0 0 1px var(--danger); }

  & input[type=checkbox]:not([role=switch]) {
    appearance:none; display:inline-grid; place-content:center; flex-shrink:0; width:16px; height:16px; min-height:0; margin:0; padding:0;
    border-radius:3px; background:var(--field); box-shadow:inset 0 0 0 1px var(--line-3); cursor:pointer;
  }
  & input[type=checkbox]:not([role=switch])::after { content:''; width:8px; height:4px; border:solid var(--on-accent); border-width:0 0 1.6px 1.6px; transform:translateY(-1px) rotate(-45deg); opacity:0; }
  & input[type=checkbox]:not([role=switch]):checked { background:var(--accent); box-shadow:none; }
  & input[type=checkbox]:not([role=switch]):checked::after { opacity:1; }
  & input[type=radio] {
    appearance:none; flex-shrink:0; width:16px; height:16px; min-height:0; margin:0; padding:0; border-radius:50%;
    background:var(--field); box-shadow:inset 0 0 0 1px var(--line-3); cursor:pointer;
  }
  & input[type=radio]:checked { background:var(--accent); box-shadow:inset 0 0 0 4px var(--field), inset 0 0 0 5px var(--accent); }
  & :is(input[type=checkbox], input[type=radio]):disabled { opacity:.4; cursor:not-allowed; }

  & .slider { appearance:none; height:16px; margin:0; padding:0; background:transparent; box-shadow:none; }
  & .slider::-webkit-slider-runnable-track { height:2px; border-radius:1px; background:var(--line-2); }
  & .slider::-webkit-slider-thumb { appearance:none; width:14px; height:14px; margin-top:-6px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 3px rgba(0,0,0,.4); }
  & .slider::-moz-range-track { height:2px; border-radius:1px; background:var(--line-2); }
  & .slider::-moz-range-thumb { width:14px; height:14px; border:0; border-radius:50%; background:var(--accent); }

  /* ---- Buttons: primary, secondary, text ---- */
  & .button {
    display:inline-flex; align-items:center; justify-content:center; gap:8px; height:var(--h-md); min-height:var(--h-md); padding:0 16px;
    border:1px solid transparent; border-radius:var(--r-sm); background:var(--accent); color:var(--on-accent);
    font:500 var(--t-md)/1 var(--f-sans); letter-spacing:0; text-transform:none; transition:background .15s, border-color .15s, color .15s;
  }
  & .button:hover:not(:disabled) { background:#fff; }
  & .button.secondary { background:transparent; border-color:var(--line-2); color:var(--text); }
  & .button.secondary:hover:not(:disabled) { background:rgba(255,255,255,.05); border-color:var(--line-3); }
  & .button:disabled { opacity:.4; }
  & .button svg { width:14px; height:14px; }
  & .text-button { min-height:28px; padding:0; color:var(--text-2); font:400 var(--t-sm)/1.2 var(--f-sans); letter-spacing:0; text-transform:none; text-decoration:none; }
  & .text-button:hover:not(:disabled) { color:var(--text); text-decoration:underline; text-underline-offset:3px; }
  & .icon-button { width:32px; height:32px; padding:0; border-radius:var(--r-sm); color:var(--text-2); opacity:1; }
  & .icon-button:hover { background:rgba(255,255,255,.05); color:var(--text); }
  & .icon-button svg { width:16px; height:16px; }

  /* One segmented control: resolution, skin, and the Upscaler options. */
  & :is(.segmented) { height:auto; padding:2px; gap:2px; border-radius:var(--r-sm); background:var(--field); box-shadow:inset 0 0 0 1px var(--line); }
  & :is(.segmented) button { min-width:36px; height:24px; padding:0 10px; border-radius:3px; font:500 var(--t-sm)/24px var(--f-sans); color:var(--text-2); }
  /* Hover lightens only unselected controls: a selected one sits on the light accent and keeps --on-accent (3 October 2026:
     hovering the chosen 1K, Pose or Klein 9B left light text on the light accent). */
  & :is(.segmented) button:hover:not(:disabled, [aria-pressed=true]) { color:var(--text); }
  & :is(.segmented) button[aria-pressed=true] { background:var(--accent); color:var(--on-accent); }

  & .chip { height:24px; min-height:24px; padding:0 8px; border:0; border-radius:var(--r-sm); background:transparent; box-shadow:inset 0 0 0 1px var(--line-2); color:var(--text-2); font:500 var(--t-xs)/24px var(--f-mono); letter-spacing:.02em; }
  & .chip:hover:not(:disabled, .selected, [aria-pressed=true]) { color:var(--text); box-shadow:inset 0 0 0 1px var(--line-3); }
  & :is(.chip.selected, .chip[aria-pressed=true]) { background:var(--accent); color:var(--on-accent); box-shadow:none; }
  & .model-badge { padding:0 6px; border-radius:var(--r-sm); background:transparent; box-shadow:inset 0 0 0 1px var(--line-2); color:var(--text-2); font:500 var(--t-xs)/20px var(--f-mono); letter-spacing:.03em; }
  & .spinner { border-color:var(--line-2); border-top-color:var(--text); }

  /* ---- Tooltips (the existing (i) toggletips) ---- */
  & .card-hint { top:8px; right:8px; width:24px; height:24px; color:var(--text-3); }
  & .card-hint svg { width:14px; height:14px; }
  & :is(.card-hint:hover, .card-hint:focus-visible, .card-hint[aria-expanded=true]) { color:var(--text); }
  & .card-hint-tip {
    top:36px; left:8px; right:8px; padding:10px 12px; border-radius:var(--r-sm); background:#1d1d1d;
    box-shadow:inset 0 0 0 1px var(--line-2), 0 12px 32px rgba(0,0,0,.5); color:var(--text); font:400 var(--t-sm)/1.55 var(--f-sans); letter-spacing:0; text-transform:none;
  }

  /* ---- Layout: sidebar and main panel ---- */
  & .layout { display:grid; grid-template-columns:232px minmax(0,1fr); gap:16px; align-items:start; max-width:1760px; min-height:100dvh; height:auto; margin:0 auto; padding:16px; }
  & .sidebar {
    position:sticky; top:16px; display:flex; flex-direction:column; gap:0; width:auto; min-width:0; min-height:calc(100dvh - 32px); max-height:calc(100dvh - 32px);
    border-radius:var(--r-md); background:var(--surface); box-shadow:inset 0 0 0 1px var(--line);
  }
  & .sidebar>.panel { border:0; border-radius:0; background:transparent; box-shadow:none; }
  & .brand { height:auto; min-height:0; padding:22px 20px 14px; justify-content:flex-start; gap:8px; }
  & .brand img { width:18px; height:18px; margin:0; }
  & .brand span { font-size:18px; font-weight:700; letter-spacing:-.01em; line-height:1; }
  & .navigation { flex:1; height:auto; min-height:0; padding:10px 20px; overflow:auto; }
  & .sidebar-bottom { padding:14px 20px 18px; border-top:1px solid var(--line); }
  & .section-label { margin-bottom:8px; min-height:0; }
  & .count { min-width:18px; height:16px; min-height:0; padding:0 4px; border-radius:3px; background:transparent; box-shadow:inset 0 0 0 1px var(--line-2); color:var(--text-2); font:500 var(--t-xs)/16px var(--f-mono); letter-spacing:0; text-transform:none; }
  & .project-select { height:var(--h-md); min-height:var(--h-md); padding:0 10px; gap:8px; border-radius:var(--r-sm); background:var(--field); box-shadow:inset 0 0 0 1px var(--line); font-size:var(--t-md); }
  & .project-select:hover { background:var(--field-hover); box-shadow:inset 0 0 0 1px var(--line-2); }
  & .project-select svg:first-child { width:14px; height:14px; margin:0; opacity:.45; }
  & .project-select::after { content:''; flex-shrink:0; width:6px; height:6px; margin:-3px 2px 0 auto; border-right:1.5px solid var(--text-3); border-bottom:1.5px solid var(--text-3); transform:rotate(45deg); }
  & .divider { margin:16px 0; background:var(--line); }
  /* The active model reads as a status line, not as a second picker (it follows the Character choice). */
  & .model-select-single { gap:10px; height:auto; min-height:0; padding:0; border-radius:0; background:none; box-shadow:none; color:var(--text); font-size:var(--t-md); }
  & .model-select-single::before { content:''; flex-shrink:0; width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 3px rgba(239,238,236,.12); }
  & .menu-gap { height:18px; }
  & .nav-link { width:calc(100% + 20px); height:34px; min-height:34px; margin:0 -10px; padding:0 10px; gap:10px; border-radius:var(--r-sm); color:var(--text-2); font-size:var(--t-lg); font-weight:400; }
  & .nav-link:hover { color:var(--text); background:rgba(255,255,255,.04); }
  & .nav-link.active { color:var(--text); background:rgba(255,255,255,.06); }
  & .nav-dot { width:6px; height:6px; border:0; border-radius:50%; background:var(--line-3); }
  & .active .nav-dot { background:var(--accent); }
  & .sidebar-bottom .nav-link { height:32px; min-height:32px; font-size:var(--t-md); }
  & .sidebar-bottom .nav-link svg { width:16px; height:16px; opacity:.7; }
  & .sidebar-bottom .divider { margin:12px 0; }
  & .navigation>.preview-label, & .navigation>.divider:last-of-type { display:none; }
  & .legal-footer { gap:12px; }
  & .legal-footer button { padding:0; color:var(--text-3); font-size:var(--t-xs); }
  & .legal-footer button:hover { color:var(--text); }

  & .main-panel {
    display:flex; flex-direction:column; gap:0; width:100%; max-width:none; min-height:calc(100dvh - 32px); padding:24px 28px 32px; overflow:visible;
    border:0; border-radius:var(--r-md); background:var(--surface); box-shadow:inset 0 0 0 1px var(--line); container:main / inline-size;
  }
  & .main-header { height:auto; min-height:0; margin:0 0 24px; padding:0 0 16px; border-bottom:1px solid var(--line); align-items:center; }
  & .main-header h1 { display:flex; align-items:center; flex-wrap:wrap; gap:0; font-size:var(--t-xl); font-weight:400; line-height:28px; letter-spacing:-.01em; }
  & .heading-model {
    display:inline-flex; align-items:center; height:22px; margin-left:12px; padding:0 8px; border-radius:var(--r-sm); box-shadow:inset 0 0 0 1px var(--line-2);
    color:var(--text-2); font:500 var(--t-xs)/1 var(--f-mono); letter-spacing:.06em; text-transform:uppercase;
  }
  & .main-header .icon-button { width:32px; height:32px; padding:0; opacity:1; color:var(--text-2); }
  & .main-header .refresh-button { opacity:0; }
  & :is(.main-header:hover, .main-header:focus-within) .refresh-button { opacity:1; }
  & .character-back { color:var(--text-2); }
  & .main-header h1>.muted { padding:0 8px; color:var(--text-3); }
  & .character-back:hover { color:var(--text); }
  & .main-header.has-tabs { flex-wrap:wrap; }
  & .account-tabs { gap:24px; margin:16px 0 -17px; font-size:var(--t-md); line-height:1; color:var(--text-2); }
  & .account-tabs button { padding:0 0 12px; border-bottom:1px solid transparent; }
  & .account-tabs button:hover { color:var(--text); }
  & .account-tabs button[aria-selected=true] { color:var(--text); border-bottom-color:var(--accent); }
  & .main-scroll { padding:0; overflow:visible; }
  & .operation-status { border:0; border-radius:var(--r-sm); box-shadow:inset 0 0 0 1px var(--line-2); font-size:var(--t-md); }

  /* ---- Composer ---- */
  & #composer { display:flex; flex-direction:column; margin:0 0 32px; padding:0 0 32px; border-bottom:1px solid var(--line); }
  & .controls-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
  & .control-card {
    position:relative; min-height:200px; padding:40px 12px 16px; gap:12px; justify-content:center; align-items:center;
    border:0; border-radius:var(--r-md); background:var(--raised); box-shadow:inset 0 0 0 1px var(--line);
  }
  & .control-card h2 { position:absolute; top:14px; left:14px; right:40px; margin:0; text-align:left; }
  /* Decorative filler cards (FLUX.1 views with fewer settings) carry nothing: Studio leaves the space empty. */
  & .control-card.stripes { visibility:hidden; }
  & :is(.control-card.reference-card, .control-card.flux2-upscale-controls, .control-card.refine-input-card, .control-card.relight-light-card) { padding:40px 12px 16px; }
  & .control-card.flux2-upscale-controls { justify-content:flex-start; gap:10px; }
  & .control-card>.field-error { max-width:100%; text-align:center; }
  & .control-card .muted.small { max-width:100%; text-align:center; }

  & :is(.upload-square, .character-pick) {
    width:96px; height:96px; padding:0; border:1px dashed var(--line-3); border-radius:var(--r-sm); background:transparent; color:var(--text-2); overflow:hidden;
    transition:border-color .15s, background .15s, color .15s;
  }
  & :is(.upload-square, .character-pick):hover:not(:disabled) { border-color:var(--text-2); background:rgba(255,255,255,.03); color:var(--text); }
  & :is(.upload-square, .character-pick):has(img) { border-style:solid; border-color:var(--line-2); }
  & .upload-square img { width:100%; height:100%; border-radius:0; object-fit:cover; }
  & .upload-square svg { width:18px; height:18px; }
  & .upload-square:disabled { opacity:.35; }
  & .remove-image { top:-6px; right:-6px; width:20px; height:20px; padding:0; border:0; background:var(--surface-solid); box-shadow:inset 0 0 0 1px var(--line-3); color:var(--text); }
  & .remove-image svg { width:10px; height:10px; }
  & .reference-slots { gap:12px; justify-content:center; }
  & .reference-label { margin-bottom:6px; text-align:left; color:var(--text-3); font:500 var(--t-xs)/1.3 var(--f-mono); letter-spacing:.02em; }
  & .prep-options { max-width:96px; margin-top:8px; gap:4px; justify-content:center; }
  & .prep-options .chip { height:20px; min-height:20px; padding:0 6px; line-height:20px; font-size:10px; }

  & .ratio-display { display:grid; place-items:center; width:96px; height:96px; margin:0; padding:0; border:1px dashed var(--line-3); border-radius:var(--r-sm); color:var(--text-2); }
  & .ratio-display span { border:1px solid var(--text-2); border-radius:2px; background:rgba(255,255,255,.03); }
  & .ratio-display svg { width:14px; height:14px; color:var(--text-2); }
  & .slider-control { width:120px; gap:8px; }
  & .slider-control output { margin:0; color:var(--text-2); font:500 var(--t-xs)/1 var(--f-mono); letter-spacing:.04em; }

  & .advanced-fields { grid-template-columns:auto minmax(0,1fr); justify-content:stretch; align-items:center; gap:10px 12px; width:100%; margin:0; padding:0; }
  & :is(.advanced-fields .option-label, .advanced-fields .field>label) { margin:0; line-height:1.2; text-align:left; }
  & .advanced-fields .field-error { grid-column:1 / -1; max-width:none; margin:0; }
  & .advanced-fields input:not([type=range]) { justify-self:start; width:100%; max-width:120px; height:var(--h-sm); padding:0 8px; font:400 var(--t-sm) var(--f-mono); }
  & .advanced-fields .segmented { justify-self:start; }
  & .count-slider { width:100%; max-width:150px; height:var(--h-sm); gap:8px; }
  & .count-slider output { min-width:0; color:var(--text-2); font:500 var(--t-xs) var(--f-mono); white-space:nowrap; }
  & .control-card.advanced>.field { width:100%; max-width:180px; margin:0; gap:6px; }
  & .control-card.advanced>.field>label { text-align:left; }
  & .control-card.advanced>.field input { width:100%; height:var(--h-sm); margin:0; font:400 var(--t-sm) var(--f-mono); }
  & .control-card .field :is(input:not([type=checkbox],[type=radio],[type=range]), select) { height:var(--h-sm); padding:0 8px; font-size:var(--t-sm); }
  & .control-card>.field { gap:6px; }

  /* Upscaler options as segmented groups; the mode list stacks. */
  & .scale-options { gap:2px; padding:2px; border-radius:var(--r-sm); background:var(--field); box-shadow:inset 0 0 0 1px var(--line); }
  & .flux2-upscale-controls .scale-options { width:100%; height:auto; flex-direction:row; flex-wrap:nowrap; }
  & .flux2-upscale-controls .upscale-mode-options { flex-direction:column; }
  & :is(.scale-options button, .flux2-upscale-controls .scale-options button) {
    flex:1 1 0; height:28px; min-height:28px; padding:0 8px; border:0; border-radius:3px; color:var(--text-2); font:500 var(--t-sm)/1.2 var(--f-sans);
  }
  & .scale-options button:hover:not(:disabled, [aria-pressed=true]) { color:var(--text); }
  & .scale-options button[aria-pressed=true] { background:var(--accent); color:var(--on-accent); }
  & .flux2-upscale-controls #flux2-size-help { margin:0; color:var(--text-2); font:500 var(--t-xs)/1.3 var(--f-mono); letter-spacing:.04em; }

  & .prompt-chips { margin:16px 0 0; gap:6px; }
  & .prompt-row { margin-top:16px; gap:12px; align-items:stretch; }
  & .prompt-row textarea { min-height:88px; padding:12px 14px; border-radius:var(--r-md); font-size:14px; line-height:20px; }
  & .submit-button { align-self:flex-end; width:44px; height:44px; min-height:44px; border-radius:var(--r-md); background:var(--accent); color:var(--on-accent); }
  & .submit-button:disabled { opacity:1; background:var(--field); box-shadow:inset 0 0 0 1px var(--line); color:var(--text-3); }
  & .submit-button svg { width:20px; height:20px; }
  & #flux2-submit-help:not(:empty) { margin-top:8px; }
  & .prompt-mentions { border-radius:var(--r-sm); background:#1d1d1d; box-shadow:inset 0 0 0 1px var(--line-2), var(--shadow); }

  /* ---- Two Characters (sandbox, 4 October 2026): "⋯" menu, pair tile, mask editor ---- */
  & .pair-card .card-hint { right:40px; }
  /* The menu hangs from the card, not the button, so it never leaves a narrow card (two columns on phones). */
  & .pair-menu-wrap { position:static; }
  & .pair-menu-button { position:absolute; top:8px; right:8px; z-index:5; display:grid; place-items:center; width:28px; height:24px; min-height:0; padding:0; border:0; border-radius:var(--r-sm); background:transparent; color:var(--text-3); }
  & .pair-menu-button svg { width:16px; height:16px; fill:currentColor; }
  & .pair-menu-button:hover:not(:disabled), & .pair-menu-button[aria-expanded=true] { background:rgba(255,255,255,.06); color:var(--text); }
  & .pair-menu-button:disabled { opacity:.35; }
  & .pair-menu { position:absolute; top:36px; right:8px; z-index:6; display:flex; flex-direction:column; min-width:min(188px, calc(100% - 16px)); max-width:calc(100% - 16px); padding:4px; border-radius:var(--r-sm); background:#1d1d1d; box-shadow:inset 0 0 0 1px var(--line-2), var(--shadow); }
  & .pair-menu[hidden] { display:none; }
  & .pair-menu-item { display:flex; align-items:center; width:100%; height:auto; min-height:32px; padding:6px 10px; border:0; border-radius:3px; background:transparent; color:var(--text); font:400 var(--t-md)/1.2 var(--f-sans); text-align:left; }
  & .pair-menu-item:is(:hover, :focus):not([aria-disabled=true]) { background:rgba(255,255,255,.08); }
  & .pair-menu-item:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
  & .pair-menu-item[aria-disabled=true] { color:var(--text-3); cursor:not-allowed; }
  & .pair-tile { display:flex; flex-direction:column; align-items:center; gap:8px; max-width:100%; }
  & .pair-avatars { display:flex; align-items:center; gap:10px; }
  & .pair-second { position:relative; }
  & .pair-tile .pair-pick { width:64px; height:64px; margin:0; border-width:2px; border-style:solid; }
  & .pair-tile .pair-pick.pair-1 { border-color:var(--pair-1); }
  & .pair-tile .pair-pick.pair-2 { border-color:var(--pair-2); }
  & .pair-tile .pair-pick img { width:100%; height:100%; object-fit:cover; }
  & .pair-names { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:2px 6px; max-width:100%; margin:0; color:var(--text-2); font-size:var(--t-sm); line-height:1.35; text-align:center; }
  & .pair-name { display:inline-flex; align-items:center; gap:5px; min-width:0; overflow-wrap:anywhere; }
  & .pair-plus { color:var(--text-3); }
  & .pair-swatch { flex:none; width:8px; height:8px; border-radius:50%; background:var(--pair-1); }
  & .pair-2 .pair-swatch { background:var(--pair-2); }
  & .pair-mask-chip { display:inline-flex; align-items:center; gap:6px; height:28px; min-height:28px; padding:0 8px 0 2px; }
  & .pair-mask-chip img { width:24px; height:24px; border-radius:3px; object-fit:cover; }
  & .pair-tile #pair-issue { margin:0; text-align:center; }
  & .pair-mask-canvas { opacity:.55; }
  & .pair-mask-canvas.pair-1 { pointer-events:none; }
  & .pair-mask-switch { display:grid; gap:6px; min-width:0; margin:0; padding:0; border:0; }
  & .pair-mask-switch legend { margin-bottom:6px; padding:0; }
  & .pair-mask-choice { position:relative; display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:var(--r-sm); box-shadow:inset 0 0 0 1px var(--line-2); cursor:pointer; }
  & .pair-mask-choice input { position:absolute; opacity:0; pointer-events:none; }
  & .pair-mask-choice .pair-swatch { width:14px; height:14px; border-radius:3px; }
  & .pair-mask-choice.pair-1:has(input:checked) { background:rgba(255,159,67,.09); box-shadow:inset 0 0 0 2px var(--pair-1); }
  & .pair-mask-choice.pair-2:has(input:checked) { background:rgba(77,171,247,.09); box-shadow:inset 0 0 0 2px var(--pair-2); }
  & .pair-mask-choice:has(input:focus-visible) { outline:2px solid var(--accent); outline-offset:2px; }
  & .pair-mask-choice-text { display:grid; gap:2px; min-width:0; }
  & .pair-mask-choice-text strong { color:var(--text); font-size:var(--t-md); font-weight:500; overflow-wrap:anywhere; }
  & .pair-mask-choice-text small { color:var(--text-2); font-size:var(--t-xs); }
  & .pair-mask-actions { grid-template-columns:1fr 1fr; }
  & .pair-mask-template-row #pair-template-note { margin:8px 0 0; }
  & .pair-tile #pair-mask-reset { margin:0; text-align:center; }
  /* A two-Character job in the feed: "Jana + Malcolm" above the prompt; no upscale buttons yet, a short note instead. */
  & .pair-card-label { display:flex; flex-wrap:wrap; align-items:center; gap:2px 6px; margin:0 0 4px; color:var(--text-2); font-size:var(--t-sm); line-height:1.35; }
  & .pair-card-label .pair-plus { color:var(--text-3); }
  & .pair-card-label .pair-refine-tag { padding:0 7px; border:0; border-radius:var(--r-sm); box-shadow:inset 0 0 0 1px var(--line-2); color:var(--text-2); font:500 var(--t-xs)/20px var(--f-mono); letter-spacing:.06em; }
  & .image-action-stack .pair-upscale-note { align-self:center; color:var(--text); font-size:var(--t-xs); line-height:1.3; text-shadow:0 1px 2px rgba(0,0,0,.6); }
  & .image-actions .pair-upscale-note { margin:0; }

  /* ---- Gallery ---- */
  & .gallery { gap:32px; }
  & .flux2-gallery { gap:32px 16px; }
  & .gallery-grid { gap:12px; }
  & .image-card { border-radius:var(--r-md); background:var(--raised); }
  & .image-open { border:0; border-radius:var(--r-md); background:#151515; }
  & .card-media { position:relative; }
  & .card-overlay { top:10px; left:10px; right:84px; gap:6px; }
  & .card-overlay .card-tabs { flex-wrap:nowrap; max-width:100%; gap:4px; overflow-x:auto; scrollbar-width:none; pointer-events:auto; }
  /* A running or failed FLUX.1 tab has no like buttons on its right, so its tabs and status may use the tile's width. */
  & :is(.job-placeholder, .job-failed) > .card-overlay { right:10px; }
  & .card-overlay .job-status { white-space:nowrap; }
  & .card-overlay .card-tabs::-webkit-scrollbar { display:none; }
  & :is(.card-overlay .resolution-tag, .card-overlay .job-status, .resolution.flux2-resolution) {
    flex-shrink:0; height:24px; padding:0 8px; border:0; border-radius:var(--r-sm); background:var(--glass); box-shadow:inset 0 0 0 1px var(--line-2);
    color:var(--text-2); font:500 var(--t-xs)/24px var(--f-mono); letter-spacing:.03em; backdrop-filter:blur(8px);
  }
  & .card-overlay .resolution-tag:hover { color:var(--text); box-shadow:inset 0 0 0 1px var(--line-3); }
  & .card-overlay .resolution-tag.current { background:var(--accent); color:var(--on-accent); box-shadow:none; }
  & .card-overlay .resolution-tag.pending:not(.current) { color:var(--pending); }
  & .card-overlay .resolution-tag.failed:not(.current) { color:var(--danger); }
  & .card-overlay .job-status { display:inline-flex; align-items:center; gap:6px; color:var(--text); }
  & .card-overlay .job-status::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--text-3); }
  & .card-overlay .job-status[data-job-status=running]::before { background:var(--pending); animation:studio-pulse 1.6s ease-in-out infinite; }
  & .flux2-ratings { top:10px; right:10px; }
  & .flux2-ratings .card-chip { width:28px; height:28px; border:0; border-radius:var(--r-sm); background:var(--glass); box-shadow:inset 0 0 0 1px var(--line-2); }
  & .flux2-ratings .image-favorite.selected { box-shadow:inset 0 0 0 1px var(--accent); }

  /* A running or queued job: a calm sweep, and a thin progress line from the countdown estimate (flux2-view.js). */
  & .job-placeholder { position:relative; overflow:hidden; border:0; border-radius:var(--r-md); background:var(--raised); box-shadow:inset 0 0 0 1px var(--line); }
  & .job-placeholder::before { content:''; position:absolute; inset:0; background:linear-gradient(100deg, transparent 30%, rgba(255,255,255,.035) 50%, transparent 70%); animation:studio-sweep 2.6s ease-in-out infinite; }
  & .job-placeholder .spinner { position:relative; }
  & .card-media:has(.job-placeholder)[style*="--job-progress"]::after {
    content:''; position:absolute; left:14px; right:14px; bottom:14px; z-index:4; height:2px; border-radius:1px; pointer-events:none;
    background:linear-gradient(to right, var(--accent) calc(var(--job-progress, 0) * 100%), var(--line-2) 0);
  }

  & .image-action-stack { inset:auto 0 0 0; flex-direction:row; flex-wrap:wrap; align-items:flex-end; justify-content:flex-start; gap:6px; padding:56px 12px 12px; background:linear-gradient(transparent, rgba(0,0,0,.6)); }
  & .image-action-stack .button {
    width:auto; height:var(--h-sm); min-height:var(--h-sm); padding:0 10px; border:0; border-radius:var(--r-sm); background:var(--glass); box-shadow:inset 0 0 0 1px var(--line-2);
    color:var(--text); font:500 var(--t-sm)/1 var(--f-sans); letter-spacing:0; text-transform:none; backdrop-filter:blur(8px);
  }
  & .image-action-stack .button:hover:not(:disabled) { background:var(--accent); color:var(--on-accent); box-shadow:none; }
  /* FLUX.1 card actions in rows (3 October 2026). Only the buttons take clicks; the rest of a row opens the image below. */
  & .image-action-stack .action-row { display:flex; flex-wrap:wrap; align-items:center; gap:6px; width:100%; pointer-events:none; }
  & .image-action-stack .action-label { margin-right:2px; color:var(--text-2); font:500 var(--t-xs)/1 var(--f-mono); letter-spacing:.06em; text-transform:uppercase; text-shadow:0 1px 2px rgba(0,0,0,.6); }
  & :is(.image-card:hover, .image-card:focus-within) .image-action-stack .action-row > * { pointer-events:auto; }
  @media (hover:none) { & .image-action-stack .action-row > * { pointer-events:auto; } }

  & .job-caption { margin-top:12px; padding:0; border:0; border-radius:0; background:none; }
  /* Reference images of a job (30 September 2026): @image1/@image2 marked in the prompt, small boxes under it that show
     the image larger on hover or keyboard focus (like V1). */
  & .prompt-ref-token { background:none; color:var(--text); font-weight:500; }
  & .prompt-refs { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
  & .prompt-ref { position:relative; display:inline-flex; align-items:center; gap:6px; height:26px; padding:2px 8px 2px 2px; border-radius:var(--r-sm); background:var(--raised); box-shadow:inset 0 0 0 1px var(--line); color:var(--text-2); font:500 11px/1 Inconsolata,monospace; cursor:default; }
  & .prompt-ref > img { width:22px; height:22px; object-fit:cover; border-radius:3px; }
  /* The preprocessing mode of a reference (3 October 2026): Human pose, Line, Sketch or Depth as a 16-px icon between the
     thumbnail and its label, in the label's grey (src/reference-mode-icons.js). */
  & .prompt-ref-mode { display:inline-flex; flex:none; }
  & .prompt-ref-mode svg { width:16px; height:16px; }
  & .prompt-ref:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
  & .prompt-ref-preview { display:none; position:absolute; left:0; bottom:calc(100% + 6px); z-index:30; padding:4px; border-radius:var(--r-md); background:#1c1c1c; box-shadow:inset 0 0 0 1px var(--line-2), var(--shadow); pointer-events:none; }
  & .prompt-ref-preview img { display:block; max-width:200px; max-height:200px; border-radius:4px; }
  & .prompt-ref:is(:hover, :focus-visible) .prompt-ref-preview { display:block; }
  & .job-caption>p { display:-webkit-box; overflow:hidden; -webkit-line-clamp:3; -webkit-box-orient:vertical; white-space:normal; color:var(--text-2); font-size:var(--t-md); font-weight:400; line-height:1.5; }
  & .job-footer { align-items:center; padding-top:6px; }
  & .tags { align-items:center; gap:0; margin:0; }
  & .tags>span:not(.card-hint-wrap) { padding:0; border:0; border-radius:0; background:none; color:var(--text-3); font:500 var(--t-xs)/20px var(--f-mono); letter-spacing:.05em; text-transform:uppercase; }
  & .tags>span:not(.card-hint-wrap):first-child { color:var(--text-2); }
  & .tags>span:not(.card-hint-wrap)+span:not(.card-hint-wrap)::before { content:'·'; margin:0 7px; color:var(--text-3); }
  /* Classic styles every span inside .tags as a chip; the tip's own spans must not inherit that. */
  & .job-meta .card-hint-wrap { position:relative; display:inline-flex; margin-left:4px; padding:0; border:0; border-radius:0; background:none; }
  & .job-meta .card-hint { position:static; width:22px; height:22px; }
  & .job-meta .card-hint-tip { top:auto; bottom:calc(100% + 6px); left:-8px; right:auto; width:max-content; max-width:min(300px, 70vw); padding:10px 12px; border:0; border-radius:var(--r-sm); background:#1d1d1d; color:var(--text); font:400 var(--t-sm)/1.55 var(--f-sans); letter-spacing:0; text-transform:none; }
  & .job-tools { gap:16px; }

  & :is(.job-failed, .job-progress) { gap:8px; padding:24px; border:0; border-radius:var(--r-md); background:var(--raised); box-shadow:inset 0 0 0 1px var(--line); text-align:center; }
  & .job-failed strong { color:var(--danger); font:500 var(--t-xs)/1.3 var(--f-mono); letter-spacing:.07em; text-transform:uppercase; }
  & .job-progress strong { color:var(--text); font-size:var(--t-md); }
  & :is(.job-failed, .job-progress) p { max-width:34ch; margin:0; color:var(--text-2); font-size:var(--t-md); line-height:1.5; }
  & .job-failed .button { margin-top:8px; }
  & .empty-state h2 { color:var(--text); font-size:var(--t-lg); font-weight:400; }
  & .empty-state p { color:var(--text-2); font-size:var(--t-md); }
  & .load-more { margin:32px auto 0; }

  /* ---- Characters ---- */
  & .character-grid { display:flex; flex-direction:column; gap:8px; }
  & .character-card { min-height:0; padding:12px 16px 12px 12px; gap:16px; border:0; border-radius:var(--r-md); background:var(--raised); box-shadow:inset 0 0 0 1px var(--line); transition:box-shadow .15s; }
  & .character-card:hover { box-shadow:inset 0 0 0 1px var(--line-2); }
  & .character-detail { gap:14px; }
  & .character-detail>img { width:48px; height:48px; border-radius:var(--r-sm); background:var(--field); object-fit:cover; }
  & .character-detail h2 { font-size:var(--t-lg); font-weight:400; }
  & .character-detail p { margin-top:4px; color:var(--text-3); font:500 var(--t-xs)/1.3 var(--f-mono); letter-spacing:.06em; text-transform:uppercase; }
  & .character-card>.button { height:var(--h-sm); min-height:var(--h-sm); padding:0 12px; font-size:var(--t-sm); }
  & .character-training-status { display:inline-flex; align-items:center; gap:8px; color:var(--pending); font:500 var(--t-xs) var(--f-mono); letter-spacing:.03em; }
  & .character-training-status::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--pending); animation:studio-pulse 1.6s ease-in-out infinite; }
  & .character-training-list { display:flex; flex-direction:column; align-items:flex-end; gap:4px; flex-shrink:0; }
  & .new-character-button { margin-top:16px; }

  & .character-columns { gap:16px; }
  & .character-properties { top:16px; gap:12px; }
  & .character-field-box { padding:16px; border:0; border-radius:var(--r-md); background:var(--raised); box-shadow:inset 0 0 0 1px var(--line); }
  & .character-field-box .field { gap:8px; }
  & .gender-field { padding-top:44px; }
  & .gender-field legend { top:16px; left:16px; }
  & .gender-options { gap:10px; font-size:var(--t-md); }
  & .gender-options label { gap:10px; }
  /* Saving is secondary once the training block is on the page: one primary action per screen. */
  & .character-editor:has(.training-start) .character-form-fields>.button { background:transparent; border-color:var(--line-2); color:var(--text); }
  & .character-editor:has(.training-start) .character-form-fields>.button:hover:not(:disabled) { background:rgba(255,255,255,.05); }
  & .dataset-upload { min-height:150px; padding:40px 16px 20px; gap:10px; border:1px dashed var(--line-3); border-radius:var(--r-md); }
  & .dataset-upload>.section-label { top:14px; left:16px; }
  & .dataset-upload .file-button { height:var(--h-md); font-size:var(--t-md); }
  & .dataset-row { grid-template-columns:96px minmax(0,1fr); gap:12px; padding:12px; border:0; border-radius:var(--r-md); background:var(--raised); box-shadow:inset 0 0 0 1px var(--line); }
  & :is(.dataset-row>form, .dataset-row>.dataset-caption) { grid-column:auto; }
  & .dataset-row>img { width:96px; border-radius:var(--r-sm); }
  & .dataset-row textarea { min-height:72px; font-size:var(--t-md); line-height:1.5; }
  & .dataset-row-actions .text-button { font-size:var(--t-sm); text-transform:none; }
  & .dataset-row-actions [data-action=delete-dataset]:hover:not(:disabled) { color:var(--danger); }
  & .dataset-caption { border-radius:var(--r-sm); background:var(--field); font-size:var(--t-md); }
  & .dataset-empty { border:1px dashed var(--line-2); border-radius:var(--r-md); color:var(--text-2); }
  & .training-start { position:relative; gap:14px; margin-top:8px; padding:20px 16px 16px; border:0; border-radius:var(--r-md); background:var(--raised); box-shadow:inset 0 0 0 1px var(--line); }
  & .training-model-choices { position:static; }
  & .training-model-choices legend { margin-bottom:10px; }
  & .training-start .card-hint { top:12px; right:12px; }
  & .training-start .card-hint-tip { top:42px; left:16px; right:16px; }
  & .training-model-option { min-height:32px; gap:10px; color:var(--text); font-size:var(--t-md); }
  & .training-model-option strong { font-weight:400; }
  & .dataset-upload .card-hint-tip { text-align:left; }

  /* ---- Dialogs ---- */
  /* The image editor and the image view keep their own geometry; Studio only changes their surface. */
  & dialog { border:0; border-radius:var(--r-md); box-shadow:inset 0 0 0 1px var(--line-2), var(--shadow); color:var(--text); }
  & dialog:not(.image-edit-dialog, .pair-mask-dialog) { max-width:calc(100vw - 32px); padding:0; background:#141414; }
  & dialog:not(.image-edit-dialog, .pair-mask-dialog, .image-dialog, .wide-dialog) { width:440px; }
  & dialog.wide-dialog:not(.image-edit-dialog, .pair-mask-dialog, .image-dialog) { width:880px; }
  & dialog::backdrop { background:rgba(0,0,0,.6); backdrop-filter:blur(6px); }
  & dialog:not(.image-edit-dialog, .pair-mask-dialog, .image-dialog)>.dialog-header { padding:20px 24px 0; border:0; background:transparent; }
  & .dialog-header h2 { font-size:var(--t-lg); font-weight:400; }
  & dialog:not(.image-edit-dialog, .pair-mask-dialog, .image-dialog)>.dialog-body { padding:20px 24px 24px; }
  & .dialog-body>p { font-size:var(--t-md); }

  & :is(.character-choice, .character-option) {
    display:flex; align-items:center; gap:12px; width:calc(100% + 16px); min-height:56px; margin:0 -8px; padding:8px; border:0; border-radius:var(--r-sm); font-size:var(--t-md); text-align:left;
  }
  & .character-option:hover:not(:disabled), & .character-choice:hover, & .character-choice.current { background:rgba(255,255,255,.04); }
  & .character-option:disabled { opacity:.5; }
  & :is(.character-choice>img, .character-option img, .choice-empty) { flex-shrink:0; width:40px; height:40px; border-radius:var(--r-sm); background:var(--field); object-fit:cover; }
  & .character-choice .choice-empty { box-shadow:inset 0 0 0 1px var(--line-2); background:linear-gradient(to top right, transparent calc(50% - .6px), var(--line-3) 50%, transparent calc(50% + .6px)), var(--field); }
  & .choice-name { display:flex; flex:1; flex-direction:column; gap:3px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  & :is(.choice-note, .character-option>.muted) { color:var(--text-3); font:500 var(--t-xs)/1.2 var(--f-mono); letter-spacing:.06em; text-transform:uppercase; }
  & .choice-models { display:flex; flex-shrink:0; flex-wrap:wrap; justify-content:flex-end; gap:4px; }
  & .choice-model { height:26px; padding:0 8px; border-radius:var(--r-sm); box-shadow:inset 0 0 0 1px var(--line-2); color:var(--text-2); font:500 var(--t-xs)/26px var(--f-mono); letter-spacing:.03em; white-space:nowrap; }
  & .choice-model:hover:not(:disabled, [aria-pressed=true]) { color:var(--text); box-shadow:inset 0 0 0 1px var(--text-2); }
  & .choice-model[aria-pressed=true] { background:var(--accent); color:var(--on-accent); box-shadow:none; }
  & .choice-model:disabled { opacity:.35; cursor:not-allowed; }
  & .character-none { margin-bottom:4px; }
  & .character-options { gap:2px; margin-bottom:16px; }
  & .character-options + .button { width:100%; }

  & .project-list { gap:2px; }
  & .project-row { min-height:40px; padding:0 4px 0 0; border:0; border-radius:var(--r-sm); }
  & .project-row:hover { background:rgba(255,255,255,.04); }
  & .project-choice { padding:10px 8px; font-size:var(--t-md); }
  & .project-choice>.muted { color:var(--text-3); font:500 var(--t-xs) var(--f-mono); letter-spacing:.06em; text-transform:uppercase; }

  & .library-grid { gap:8px; }
  & .library-tile { border-radius:var(--r-sm); }
  & .library-meta { color:var(--text); font:500 10px var(--f-mono); letter-spacing:.03em; }

  & dialog.image-dialog { width:min(960px, calc(100vw - 32px)); }
  & .image-dialog .dialog-body { padding:16px; }
  & .image-dialog .image-detail { grid-template-columns:minmax(0,1.6fr) minmax(240px,1fr); gap:24px; }
  & .image-dialog .image-detail img { border-radius:var(--r-sm); }
  & .image-dialog .image-info { gap:12px; padding-top:40px; font-size:var(--t-md); }
  & .image-info .tag { padding:0 7px; border:0; border-radius:var(--r-sm); box-shadow:inset 0 0 0 1px var(--line-2); color:var(--text-2); font:500 var(--t-xs)/22px var(--f-mono); letter-spacing:.06em; }
  & .image-info>p { margin:0; line-height:1.55; }
  & .image-actions { display:flex; flex-direction:column; gap:8px; margin-top:12px; }
  & .image-dialog .image-actions .button { width:100%; height:var(--h-md); min-height:var(--h-md); font-size:var(--t-md); }
  & .image-actions .detail-upscale-action { flex-direction:column; align-items:stretch; gap:6px; }
  & .image-actions .detail-upscale-action .button { width:100%; min-width:0; }
  /* Name and estimate on two lines (30 September 2026: "vertikal so zu eng"): the height follows the text, with room around it. */
  & .image-dialog .image-actions .detail-upscale-action .target-button { height:auto; min-height:var(--h-md); padding:10px 16px; gap:4px; line-height:1.3; }

  /* ---- Account, Support, Login ---- */
  & .settings-form { max-width:560px; gap:16px; }
  & .settings-form [role=tabpanel] { padding:20px; border:0; border-radius:var(--r-md); background:var(--raised); box-shadow:inset 0 0 0 1px var(--line); }
  & .settings-form [role=tabpanel]:not([hidden]) { gap:16px; }
  & .settings-form input:not([type=checkbox], [type=radio]) { height:var(--h-md); }
  & .settings-form .button { align-self:flex-start; width:auto; }
  & .setting-switch { font-size:var(--t-md); }
  & .support-copy h2 { font-size:var(--t-lg); font-weight:400; }
  & .support-copy p { color:var(--text-2); font-size:var(--t-md); }
  /* Help page (Mathias, 6 October 2026, src/support-docs.js): contents on the left (sticky), topics as cards on the right;
     one column when the main panel is narrow. */
  & .support-docs { display:grid; grid-template-columns:220px minmax(0,1fr); gap:24px 32px; align-items:start; max-width:1120px; }
  & .support-intro { grid-column:1 / -1; }
  & .support-intro h2 { margin:0 0 4px; font-size:var(--t-xl); font-weight:400; }
  & .support-intro p { margin:0; color:var(--text-2); font-size:var(--t-md); }
  & .support-toc { position:sticky; top:16px; }
  & .support-toc h2 { margin:0 0 8px; font-family:var(--f-mono); font-size:var(--t-xs); font-weight:400; letter-spacing:.08em; text-transform:uppercase; color:var(--text-3); }
  & .support-toc h2:focus { outline:none; }
  & .support-toc ol { display:grid; gap:2px; margin:0; padding:0; list-style:none; }
  & .support-toc-link { display:flex; gap:10px; align-items:baseline; width:100%; min-height:var(--h-sm); padding:4px 8px; border:0; border-radius:var(--r-sm); background:none; color:var(--text-2); font:inherit; font-size:var(--t-md); text-align:left; cursor:pointer; }
  & .support-toc-link:hover, & .support-toc-link:focus-visible { background:var(--field-hover); color:var(--text); }
  & .support-toc-number, & .support-number { min-width:1.6em; font-family:var(--f-mono); font-size:var(--t-sm); font-variant-numeric:tabular-nums; color:var(--text-3); }
  & .support-sections { display:grid; gap:16px; min-width:0; }
  & .support-section { padding:20px 24px; border-radius:var(--r-md); background:var(--raised); box-shadow:inset 0 0 0 1px var(--line); scroll-margin-top:16px; }
  & .support-section h2 { display:flex; gap:8px; align-items:baseline; margin:0 0 12px; font-size:var(--t-lg); font-weight:500; }
  & .support-section h2:focus { outline:none; }
  & .support-section h3 { margin:16px 0 6px; font-size:var(--t-md); font-weight:500; }
  & .support-text { max-width:70ch; color:var(--text-2); font-size:var(--t-md); line-height:1.6; }
  & .support-text b { color:var(--text); font-weight:500; }
  & .support-text ul, & .support-text ol { display:grid; gap:6px; margin:0; padding-left:20px; }
  & .support-text p { margin:0 0 8px; }
  & .support-text a { color:var(--text); }
  & .support-text code { padding:1px 5px; border-radius:var(--r-sm); background:var(--field); font-family:var(--f-mono); font-size:var(--t-sm); color:var(--text); }
  & .support-figure { max-width:min(100%, 640px); margin:16px 0 0; }
  & .support-figure.tall { max-width:min(100%, 320px); }
  & .support-figure img { display:block; width:100%; height:auto; border-radius:var(--r-md); box-shadow:inset 0 0 0 1px var(--line); }
  & .support-figure figcaption { margin-top:6px; font-size:var(--t-sm); color:var(--text-3); }
  & .support-top { margin-top:12px; font-size:var(--t-sm); }
  & .support-swatch { display:inline-block; width:10px; height:10px; border-radius:2px; vertical-align:middle; background:var(--pair-1); }
  & .support-swatch-2 { background:var(--pair-2); }
  @container main (max-width:920px) {
    & .support-docs { grid-template-columns:minmax(0,1fr); }
    & .support-toc { position:static; }
    & .support-section { padding:16px; }
  }
  & .login-page { border:0; border-radius:var(--r-md); background:var(--surface); box-shadow:inset 0 0 0 1px var(--line); }
  & .login-brand h1 { font-size:20px; }
  /* Mathias, 30 September 2026: the title sits on the logo's left edge, and the Registrieren / Zurück zur Anmeldung
     link keeps the form's 16px rhythm instead of touching the button (the base theme sets the page gap to 0). */
  & .login-mode-title { text-align:left; font-size:var(--t-xl); }
  & .login-switch { margin-top:16px; }
  & .toast { border:0; border-radius:var(--r-md); background:#1c1c1c; box-shadow:inset 0 0 0 1px var(--line-2), var(--shadow); font-size:var(--t-md); }

  /* ---- Composer and gallery follow the width of the main panel ---- */
  @container main (max-width:920px) {
    & .controls-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  }
  @container main (max-width:640px) {
    & .flux2-gallery { grid-template-columns:minmax(0,1fr); }
  }
  @container main (max-width:560px) {
    & .controls-grid { grid-auto-flow:row dense; gap:8px; }
    & .controls-grid>:is(.reference-card, .advanced, .flux2-upscale-controls, .relight-light-card) { grid-column:1 / -1; }
    & .controls-grid>.stripes { display:none; }
    & .controls-grid>.control-card:has(+ .control-card.advanced):not(.reference-card, .flux2-upscale-controls, .relight-light-card) { grid-column:auto; }
    & .control-card { min-height:0; padding:36px 10px 14px; }
    & .control-card h2 { top:12px; left:12px; }
    & :is(.upload-square, .character-pick, .ratio-display, .reference-card .upload-square) { width:76px; height:76px; }
    & .reference-card .prep-options { max-width:none; }
    & .slider-control { width:100px; }
    & .advanced-fields { max-width:340px; }
    & .character-columns { grid-template-columns:minmax(0,1fr); }
  }

  /* ---- Tablet: the sidebar becomes a sticky top bar: brand and account icons, the project on its own row, the menu
     below (Mathias, 30 September 2026: the project next to the logo did not look good; a narrower desktop window keeps
     the sidebar, the top bar starts below 900 px) ---- */
  @media (max-width:899px) {
    & .layout { display:block; padding:0 12px 12px; }
    & .sidebar {
      position:sticky; top:0; z-index:30; display:flex; flex-direction:row; flex-wrap:wrap; align-items:center; gap:10px 12px; width:auto;
      min-height:0; max-height:none; margin:0 -12px 12px; padding:10px 16px; border-radius:0; background:rgba(12,12,12,.92); box-shadow:0 1px 0 var(--line); backdrop-filter:blur(16px);
    }
    & .sidebar>.panel { padding:0; }
    & :is(.navigation, .sidebar-bottom) { display:contents; }
    & .brand { order:0; height:36px; padding:0 8px 0 0; }
    & :is(.navigation>.section-label, .navigation>.divider, .navigation>.preview-label, .model-select, .menu-gap, .sidebar-bottom>.divider, .sidebar-bottom>.legal-footer) { display:none; }
    & .project-select { order:2; flex:1 0 100%; width:100%; min-width:0; }
    & .sidebar-bottom>.nav-link { order:1; justify-content:center; width:36px; height:36px; min-height:36px; margin:0; padding:0; gap:0; font-size:0; }
    & .sidebar-bottom>.nav-link:first-child { margin-left:auto; }
    & .sidebar-bottom>.nav-link svg { width:18px; height:18px; }
    & .navigation nav { order:3; display:flex; flex:1 0 100%; gap:4px; padding:3px; border-radius:var(--r-sm); background:var(--field); box-shadow:inset 0 0 0 1px var(--line); }
    & .navigation nav .nav-link { flex:1; justify-content:center; width:auto; height:32px; min-height:32px; margin:0; padding:0 8px; font-size:var(--t-md); }
    & .navigation nav .nav-link.active { background:rgba(255,255,255,.1); color:var(--text); }
    & .navigation nav .nav-dot { display:none; }
    & .main-panel { min-height:0; padding:20px; }
    & .studio-footer { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; margin-top:32px; padding-top:16px; border-top:1px solid var(--line); }
    & .character-properties { position:static; }
  }

  /* ---- Phone: compact top bar, the menu floats at the bottom ---- */
  @media (max-width:760px) {
    & .layout { padding:0 10px calc(84px + env(safe-area-inset-bottom)); }
    /* No backdrop-filter here: it would turn the bar into the containing block of the fixed bottom menu. */
    & .sidebar { position:relative; margin:0 -10px 10px; padding:10px 12px; backdrop-filter:none; background:rgba(12,12,12,.94); }
    & .brand span { font-size:16px; }
    & .project-select>span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    & .sidebar-bottom>.nav-link { width:34px; }
    & .navigation nav {
      position:fixed; left:10px; right:10px; bottom:calc(10px + env(safe-area-inset-bottom)); z-index:40; width:auto; padding:4px; border-radius:var(--r-md);
      background:rgba(22,22,22,.94); box-shadow:inset 0 0 0 1px var(--line-2), 0 12px 32px rgba(0,0,0,.55); backdrop-filter:blur(16px);
    }
    & .navigation nav .nav-link { min-width:0; height:44px; min-height:44px; padding:0 4px; font-size:var(--t-sm); }
    & .main-panel { padding:16px 14px 20px; }
    & .main-header { margin-bottom:16px; padding-bottom:12px; }
    & .main-header h1 { font-size:var(--t-lg); }
    & .main-header .refresh-button { opacity:1; }
    & #composer { margin-bottom:24px; padding-bottom:24px; }
    & .prompt-row textarea { min-height:72px; }
    & .character-card { flex-wrap:nowrap; align-items:center; padding:10px 12px 10px 10px; gap:12px; }
    & .character-detail { flex-basis:auto; min-width:0; }
    & .character-detail h2 { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    & .character-card>.button { margin-left:0; flex-shrink:0; }
    & .image-dialog .image-detail { grid-template-columns:minmax(0,1fr); }
    & .image-dialog .image-info { padding-top:0; }
    & .dataset-row { grid-template-columns:72px minmax(0,1fr); }
    & .dataset-row>img { width:72px; }
    & .choice-name { white-space:normal; overflow-wrap:anywhere; }
    & .character-card:has(.character-training-status) { flex-wrap:wrap; }
    & .character-card>.character-training-status { flex-basis:100%; padding-left:60px; white-space:normal; }
    & .character-card>.character-training-list { flex-basis:100%; padding-left:60px; align-items:flex-start; }
  }
  @media (hover:none) {
    & .main-header .refresh-button { opacity:1; }
  }
}