/* Visual contract from alt/Webflow Export/css/bdai.webflow.css.
   Owned semantic components retain the original desktop dimensions and colors. */
@font-face { font-family:Inconsolata; src:url('/assets/Inconsolata-Light.ttf') format('truetype'); font-weight:300; font-display:swap; }
@font-face { font-family:Inconsolata; src:url('/assets/Inconsolata-Medium.ttf') format('truetype'); font-weight:500; font-display:swap; }
:root { --panel:#141313d9; --border:#2c2c2c; --muted:#818180; --field:#212121; color:#fff; font-size:16px; font-weight:300; }
* { -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
body { background:#121212; isolation:isolate; line-height:1.25; font-feature-settings:"ss07", "ss06", "ss01"; }
/* Decorative background, one self-contained layer behind the app (see src/background.js). The still image is always
   painted; the WebGL canvas of the animation covers it while "Animated background" is on. Desaturation, blur and the
   dark tint are applied inside this one element (formerly z-index:-2 plus a body::before backdrop-filter overlay at
   -1 behind a non-positioned #app, which let the composited canvas flash in front of the UI and in colour).
   inset:-8px keeps the blurred edge outside the viewport. */
#brand-background { position:fixed; inset:-8px; z-index:0; min-width:776px; min-height:816px; overflow:hidden; contain:strict; pointer-events:none;
  background:#121212 url('/assets/background-still.webp') center/cover no-repeat; filter:saturate(0%) blur(4px); }
#brand-background::after { content:''; position:absolute; inset:0; background:#1119; }
#brand-background canvas { display:block; animation:brand-background-in .6s ease-out both; }
@keyframes brand-background-in { from { opacity:0; } }
#app { position:relative; z-index:1; }
.layout { display:flex; align-items:flex-start; gap:16px; padding:20px; height:auto; min-height:100dvh; max-width:none; margin:0; }
.panel { border:0; box-shadow:0 0 0 1px var(--border); border-radius:4px; background:var(--panel); }
.sidebar { display:flex; flex-direction:column; gap:15px; width:280px; min-width:280px; min-height:calc(100dvh - 40px); max-height:calc(100dvh - 40px); position:sticky; top:20px; }
.brand { height:170px; min-height:65px; padding:20px; gap:6px; }
.brand img { width:25px; height:25px; opacity:1; margin-left:-8px; }
.brand span { font-size:24px; font-weight:700; letter-spacing:0; line-height:.9; }
.navigation { height:100%; min-height:403px; padding:20px; overflow:visible; }
.sidebar-bottom { height:auto; padding:20px; flex-shrink:0; }
.section-label { font-size:12px; font-weight:400; color:#818180; margin-bottom:7px; min-height:15px; }
.count { min-width:16px; min-height:16px; border:0; background:#2c2c2c; border-radius:3px; font:10px system-ui,sans-serif; color:#d0cfcd; }
.project-select { height:36px; min-height:36px; padding:9px; font-size:14px; gap:0; background:#212121; box-shadow:inset 0 0 0 1px #ffffff0f; }
.project-select svg:first-child { width:14px; height:14px; margin-left:1px; margin-right:8px; opacity:.17; color:white; }
.project-select:hover { background:#2c2c2c; }
.divider { margin:20px 0; background:#2c2c2c; }
.nav-link,.sidebar-bottom .nav-link { height:36px; min-height:36px; padding:8px; gap:14px; font-size:16px; font-weight:300; color:#818180; border-radius:3px; }
.nav-link:hover { color:#d0cfcd; background:#ffffff0f; }
.nav-link.active { color:#fff; }
.nav-dot { width:8px; height:8px; border:0; border-radius:2px; background:#2c2c2c; }
.active .nav-dot { background:#818180; }
.sidebar-bottom .nav-link svg { width:20px; height:20px; }
.sidebar-bottom .divider { margin:20px 0; }
.legal-footer { display:flex; gap:12px; }
.legal-footer button { font-size:9px; color:#4f4f4c; padding:0; line-height:1.25; }
.legal-footer button:hover { color:#fff; }
.preview-label { font-size:10px; color:#818180; }
.navigation>.divider:last-of-type { display:block; }
.navigation>.preview-label { display:flex; }
.main-panel { width:100%; max-width:1600px; min-height:calc(100dvh - 40px); overflow:visible; padding:20px; gap:20px; }
.main-header { position:relative; padding:0 0 10px; min-height:31px; height:31px; border-bottom:1px solid var(--border); }
.main-header h1 { font-size:16px; font-weight:300; line-height:20px; }
.header-actions { display:flex; align-items:center; gap:8px; }
.main-header .icon-button { width:20px; height:20px; padding:2px; color:#fff; opacity:.65; }
.main-header .icon-button svg { width:16px; height:16px; }
.main-header .refresh-button { opacity:0; }
.main-header:hover .refresh-button,.main-header:focus-within .refresh-button { opacity:.65; }
.main-header .icon-button:hover,.main-header .icon-button.selected { opacity:1; }
.main-scroll { overflow:visible; min-height:0; padding:0; width:100%; }
.controls-grid { gap:10px; grid-template-columns:repeat(4,minmax(0,1fr)); }
.control-card { position:relative; min-height:210px; padding:5px 0 0; border:0; box-shadow:inset 0 0 0 1px var(--border); border-radius:3px; justify-content:center; align-items:center; gap:22px; }
.control-card h2 { position:absolute; top:10px; left:10px; margin:0; text-align:left; font-size:12px; line-height:15px; font-weight:400; color:#818180; }
.upload-square { width:100px; height:100px; margin:0; padding:6px; border:1px dashed #5e5e5d; border-radius:5px; color:#fff; flex-shrink:0; }
.upload-square img { border-radius:4px; }
.upload-square svg { width:20px; height:20px; }
.upload-square:hover { border-color:#d0cfcd; }
.upload-control { margin:0; }
.control-card.refine-input-card { padding:36px 10px 10px; gap:8px; }
.refine-input-card > p { margin:0; }
.slider-control { display:flex; flex-direction:column; align-items:center; gap:10px; width:129px; max-width:calc(100% - 24px); }
.slider { appearance:none; width:100%; height:8px; border:0; border-radius:4px; background:#2c2c2c; margin:0; padding:0; }
.slider::-webkit-slider-runnable-track { height:8px; background:#2c2c2c; border-radius:4px; }
.slider::-webkit-slider-thumb { width:16px; height:16px; margin-top:-4px; background:#efeeec; border-radius:50%; }
.slider::-moz-range-track { height:8px; background:#2c2c2c; border-radius:4px; }
.slider::-moz-range-thumb { width:16px; height:16px; background:#efeeec; border-radius:50%; }
.slider-control output { font-size:12px; font-weight:400; color:#818180; line-height:15px; margin-bottom:-8px; }
.ratio-display { width:100px; height:100px; margin:0; padding:6px; border:1px dashed #5e5e5d; border-radius:5px; }
.ratio-display span { display:grid; place-items:center; width:50px; height:75px; border:1px solid #d0cfcd; border-radius:3px; }
.ratio-display svg { width:18px; height:18px; color:#f3f3f3; }
.ratio-9-16 span { width:40px; height:71.111px; }
.ratio-2-3 span { width:40px; height:60px; }
.ratio-4-5 span { width:40px; height:50px; }
.ratio-1-1 span,.ratio-custom span { width:40px; height:40px; }
.ratio-5-4 span { width:50px; height:40px; }
.ratio-3-2 span { width:60px; height:40px; }
.ratio-16-9 span { width:71.111px; height:40px; }
/* Advanced (Mathias, 24 September): a two-column form, label left, control right. Second pass the same day:
   compact and centred as one block (max-content columns), a smaller 1K|2K switch and short fixed-width inputs.
   The .field wrappers of Seed/Guidance dissolve (display:contents) so their label and input become grid cells. */
.advanced-fields { display:grid; grid-template-columns:max-content max-content; grid-auto-rows:minmax(26px,auto); justify-content:center; align-items:center; gap:8px 12px; width:auto; max-width:100%; margin-top:24px; padding:0 8px; box-sizing:border-box; }
.advanced-fields>.field { display:contents; }
.advanced .field { margin:0; gap:0; }
.advanced .field>label,.advanced .field>span:first-child,.option-label { display:block; font-size:10px; letter-spacing:.04em; color:#8a8a8a; margin:0 0 4px; text-align:center; }
.advanced-fields .option-label,.advanced-fields .field>label,.advanced-fields .field>span:first-child { margin:0; text-align:left; line-height:26px; }
.advanced-fields .field-error { grid-column:2; max-width:128px; margin:-4px 0 0; }
.segmented { display:inline-flex; justify-self:start; height:24px; padding:2px; gap:2px; border-radius:3px; background:#212121; box-shadow:inset 0 0 0 1px #ffffff0f; box-sizing:border-box; }
.segmented button { min-width:30px; padding:0 7px; border-radius:2px; font-size:11px; line-height:20px; color:#818180; }
.segmented button:hover:not(:disabled) { color:#efeeec; }
.segmented button[aria-pressed=true] { background:#efeeec; color:#090908; }
.count-slider { display:flex; align-items:center; gap:8px; width:128px; min-width:0; height:26px; }
.count-slider .slider { flex:1 1 auto; min-width:0; }
.count-slider output { flex:0 0 auto; min-width:44px; font-size:11px; color:#818180; text-align:right; }
/* Phone: a half-width card (~155px) cannot hold label + control side by side, so Advanced takes the whole row;
   the card before it (aspect ratio / scale) does too, instead of leaving an empty half cell. */
@media(max-width:600px) { .controls-grid>.control-card.advanced,.controls-grid>.control-card:has(+ .control-card.advanced) { grid-column:1 / -1; } }
input,textarea,select { background:#212121; box-shadow:inset 0 0 0 1px #ffffff0f; border:0; padding:9px; font-size:14px; font-weight:300; border-radius:3px; }
input:hover,textarea:hover,select:hover,input:focus,textarea:focus,select:focus { background:#2c2c2c; }
input::placeholder,textarea::placeholder { color:#818180; }
.advanced input:not([type=range]) { width:100px; height:30px; margin:0 auto; padding:9px; background:#212121; font:300 12px system-ui,sans-serif; }
.advanced-fields input:not([type=range]) { justify-self:start; width:100px; height:26px; margin:0; padding:5px 8px; box-sizing:border-box; }
.prompt-row { gap:10px; margin-top:20px; align-items:flex-start; }
/* Mathias, 15 September 2026: the prompt box grows with its content so nothing has to scroll. */
.prompt-row textarea { height:auto; min-height:72px; max-height:45vh; field-sizing:content; padding:9px; font-size:14px; line-height:18px; background:#212121; border:0; resize:vertical; overflow-y:auto; }
.submit-button { width:36px; height:36px; min-height:36px; padding:0; background:#efeeec; color:#090908; }
.submit-button svg { width:24px; height:24px; }
#composer { margin:0 0 20px; padding-bottom:20px; border-bottom:1px solid #2c2c2c; }
.control-card>.field-error { max-width:90%; font-size:11px; }
.control-card.stripes { background-image:url('/assets/stripes.png'); }
.control-card .scale-select { width:auto; min-width:64px; height:48px; margin:0; padding:10px; border:0; font:500 20px Inconsolata,monospace; color:#090908; background:#efeeec; }
.scale-options { display:flex; flex-direction:column; width:100px; height:100px; gap:6px; }
.scale-options button { border:1px solid #2c2c2c; border-radius:3px; height:47px; font-size:14px; }
.scale-options button[aria-pressed=true] { border-color:#e3e1de; }
/* Multi-preset FLUX.2 controls must grow instead of overlapping the next group. */
.control-card.flux2-upscale-controls { padding:36px 10px 12px; gap:12px; }
.flux2-upscale-controls .scale-options { width:100%; height:auto; flex-direction:row; flex-wrap:wrap; flex-shrink:0; }
.flux2-upscale-controls .scale-options button { flex:1 1 80px; height:auto; min-height:36px; padding:6px; }

.light-source-preview { display:flex; gap:10px; }
.light-source-preview>div { width:58px; height:58px; border:1px dashed #5e5e5d; border-radius:5px; position:relative; opacity:.5; background:repeating-conic-gradient(from 0deg,transparent 0deg 44deg,#5e5e5d 44deg 45deg); }
.light-source-preview>div::after { content:''; position:absolute; width:9px; height:9px; border-radius:50%; background:#d0cfcd; left:calc(50% - 4.5px); top:calc(50% - 4.5px); }
.light-source-caption { position:absolute; bottom:20px; font-size:12px; color:#818180; }
/* Light Source (Mathias, 24 September 2026): stays inside the existing small control-card, same footprint as the
   other composer cards - the ring (with above/below) is the main element; colour/type/shadow are tiny controls;
   the preset is a one-line dropdown. Ring angles and swatch colours are CSS attribute selectors, never inline
   styles: CSP drops style="" attributes in production. */
.control-card.relight-light-card { padding:36px 10px 10px; gap:8px; }
.light-direction-status { margin:0; }
.light-ring-row { display:flex; align-items:center; justify-content:center; gap:6px; }
.light-ring { position:relative; width:64px; height:64px; flex-shrink:0; }
.light-ring-center { position:absolute; left:50%; top:50%; width:4px; height:4px; margin:-2px; border-radius:50%; background:#5e5e5d; }
.light-ring-btn { position:absolute; left:50%; top:50%; width:13px; height:13px; margin:-6.5px; padding:0; border-radius:50%; border:1px solid #5e5e5d; background:#141313; transition:background .15s ease,border-color .15s ease,box-shadow .15s ease; }
.light-ring-btn:hover:not(:disabled) { border-color:#d0cfcd; }
.light-ring-btn:disabled { opacity:.5; }
.light-ring-btn[aria-pressed=true] { background:#efeeec; border-color:#efeeec; box-shadow:0 0 8px rgba(255,255,255,.65); }
.light-ring-btn:focus-visible { outline:2px solid #efeeec; outline-offset:2px; }
.light-ring-btn[data-angle="0"] { transform:rotate(0deg) translateY(-25px); }
.light-ring-btn[data-angle="45"] { transform:rotate(45deg) translateY(-25px); }
.light-ring-btn[data-angle="90"] { transform:rotate(90deg) translateY(-25px); }
.light-ring-btn[data-angle="135"] { transform:rotate(135deg) translateY(-25px); }
.light-ring-btn[data-angle="180"] { transform:rotate(180deg) translateY(-25px); }
.light-ring-btn[data-angle="225"] { transform:rotate(225deg) translateY(-25px); }
.light-ring-btn[data-angle="270"] { transform:rotate(270deg) translateY(-25px); }
.light-ring-btn[data-angle="315"] { transform:rotate(315deg) translateY(-25px); }
.light-vertical { display:flex; flex-direction:column; gap:4px; flex-shrink:0; }
.light-vertical-btn { width:18px; height:18px; padding:0; border-radius:3px; border:1px solid #5e5e5d; background:#141313; color:#818180; font-size:8px; line-height:1; }
.light-vertical-btn:hover:not(:disabled) { border-color:#d0cfcd; color:#d0cfcd; }
.light-vertical-btn:disabled { opacity:.5; }
.light-vertical-btn[aria-pressed=true] { background:#efeeec; border-color:#efeeec; color:#090908; }
.light-vertical-btn:focus-visible { outline:2px solid #efeeec; outline-offset:2px; }
.light-swatches-mini { display:flex; flex-wrap:wrap; justify-content:center; gap:4px; }
.light-swatch-mini { width:12px; height:12px; padding:0; border-radius:50%; border:1px solid transparent; box-shadow:inset 0 0 0 1px #2c2c2c; }
.light-swatch-mini:hover:not(:disabled) { box-shadow:inset 0 0 0 1px #2c2c2c,0 0 0 1px #d0cfcd; }
.light-swatch-mini:disabled { opacity:.5; }
.light-swatch-mini[aria-pressed=true] { border-color:#fff; box-shadow:inset 0 0 0 1px #000,0 0 0 2px #fff; }
.light-swatch-mini:focus-visible { outline:2px solid #efeeec; outline-offset:2px; }
.light-swatch-mini[data-swatch="warm-amber"] { background:#e8a558; }
.light-swatch-mini[data-swatch="neutral-white"] { background:#efeeec; }
.light-swatch-mini[data-swatch="cool-blue"] { background:#6f9fd8; }
.light-swatch-mini[data-swatch="golden"] { background:#d9a441; }
.light-swatch-mini[data-swatch="neon-magenta"] { background:#e34fd0; }
.light-swatch-mini[data-swatch="teal"] { background:#2fb6a3; }
.light-toggle-row { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; }
.light-toggle-pair { display:inline-flex; gap:2px; padding:2px; border-radius:3px; background:#212121; box-shadow:inset 0 0 0 1px #ffffff0f; }
.light-toggle { padding:2px 6px; min-height:0; height:18px; border-radius:2px; font-size:9px; line-height:14px; color:#818180; }
.light-toggle:hover:not(:disabled) { color:#efeeec; }
.light-toggle[aria-pressed=true] { background:#efeeec; color:#090908; }
.light-toggle:disabled { opacity:.5; }
.light-preset-field { width:100%; max-width:150px; margin:0; }
.light-preset-field select { width:100%; height:26px; font-size:11px; padding:4px 6px; }
.relight-light-card > .field { width:100%; max-width:150px; margin:0; }
.gallery { gap:25px; }
.gallery-grid { gap:10px; align-items:start; }
.image-card { aspect-ratio:auto; background:#ffffff0f; border-radius:5px; }
.image-open { height:auto; border-radius:5px; background:#212121; border:1px solid #292929; }
.image-open img { height:auto; min-height:100px; object-fit:contain; }
.resolution { top:10px; left:10px; width:24px; height:24px; padding:0; display:grid; place-items:center; background:#5e5e5d57; backdrop-filter:blur(3px); font:600 10px system-ui,sans-serif; }
.image-ratings { position:absolute; top:10px; right:10px; display:flex; gap:4px; opacity:0; transition:opacity .2s; }
.image-card:hover .image-ratings,.image-card:focus-within .image-ratings { opacity:1; }
.image-favorite,.image-dislike { position:static; width:24px; height:24px; display:grid; place-items:center; padding:4px; background:#5e5e5d57; backdrop-filter:blur(3px); color:#fff; border-radius:3px; }
.image-ratings svg { width:16px; height:16px; }
.job-caption { padding:6px 8px; background:#212121; border:1px solid #2c2c2c; border-radius:6px; margin-top:15px; }
.job-caption>p { font-size:14px; font-weight:400; color:#818180; line-height:1.25; }
.job-footer { padding-top:6px; }
.tags { margin:0; }
.tags span { font:500 12px Inconsolata,monospace; padding:4px 8px; border-radius:6px; background:#ffffff0f; border-color:#2c2c2c; color:#818180; text-transform:uppercase; }
.job-tools .text-button { font-size:11px; color:#818180; }
.button { text-transform:uppercase; height:36px; padding:0 18px; background:#efeeec; color:#090908; font-size:12px; }
.character-grid { display:flex; flex-direction:column; gap:10px; }
.character-card { display:flex; align-items:center; gap:16px; min-height:90px; padding:15px; border:0; box-shadow:inset 0 0 0 1px #2c2c2c; border-radius:5px; background:#ffffff0f; }
.character-detail { display:flex; align-items:center; gap:16px; min-width:0; flex:1; }
.character-detail>img { width:60px; height:60px; border-radius:4px; flex-shrink:0; }
.character-detail>div { padding:0; min-width:0; }
.character-detail h2 { font-size:16px; font-weight:300; }
.character-detail p { font:500 12px Inconsolata,monospace; color:#818180; text-transform:uppercase; }
.character-card>.button { width:auto; min-height:28px; height:28px; font-size:10px; }
.new-character-button { margin-top:20px; }
dialog { width:380px; border:0; border-radius:4px; background:#141313ed; box-shadow:0 0 0 1px #2c2c2c; }
dialog::backdrop { background:#0009; backdrop-filter:blur(4px); }
.wide-dialog { width:850px; }
.dialog-header { padding:30px 30px 0; background:transparent; border:0; position:relative; }
.dialog-header h2 { font-size:16px; font-weight:300; }
.dialog-body { padding:24px 30px 30px; }
.project-row { min-height:32px; padding:0; border-width:0 0 1px; border-color:#ffffff0f; border-radius:0; }
.project-choice { padding:8px; font-size:12px; }
.project-choice.current { background:transparent; color:#fff; }
.project-row:hover { background:#ffffff0f; border-radius:3px; }
.character-option { padding:8px; border-width:0 0 1px; border-color:#ffffff0f; border-radius:0; min-height:56px; }
.character-option img { width:40px; height:40px; }
.pose-dialog { display:grid; grid-template-columns:1fr 1fr; gap:30px; }
.pose-dialog section>p { margin-bottom:10px; }
.pose-dialog .upload-square { width:100%; height:auto; aspect-ratio:1; }
.pose-dialog .upload-control { width:100%; }
.pose-modes { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.pose-modes button { padding:6px; border:1px solid #292929; border-radius:6px; color:#818180; text-align:left; }
.pose-modes button[aria-pressed=true] { border-color:#d0cfcd; color:#fff; }
.pose-modes img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:4px; margin-bottom:8px; }
.pose-modes span { font-size:12px; }
.legal-copy { font-size:14px; line-height:1.5; color:#d0cfcd; }
.legal-copy p,.legal-copy h2,.legal-copy h3 { margin-bottom:12px; }
.legal-copy h2 { font-size:20px; }
.legal-copy h3 { font-size:16px; }
.main-header.has-tabs { flex-wrap:wrap; height:auto; }
.account-tabs { display:flex; gap:25px; width:100%; margin-top:10px; margin-bottom:-10px; color:#818180; font-size:14px; line-height:2.4; }
.account-tabs button { padding:0; border-bottom:1px solid transparent; }
.account-tabs button[aria-selected=true] { color:#fff; border-bottom-color:#fff; }
.settings-form { max-width:500px; gap:16px; }
.appearance-settings { display:grid; gap:10px; }
.appearance-settings[hidden] { display:none; }
.appearance-settings .field-error:empty,.appearance-settings [role=status]:empty { display:none; }
.setting-switch { display:flex; align-items:center; gap:12px; width:max-content; font-size:14px; color:#fff; cursor:pointer; }
.setting-switch input[type=checkbox] { appearance:none; position:relative; flex-shrink:0; width:34px; min-width:34px; height:20px; min-height:20px; margin:0; padding:0; border:0; border-radius:10px; background:#2c2c2c; box-shadow:inset 0 0 0 1px #ffffff1f; cursor:pointer; transition:background .15s; }
.setting-switch input[type=checkbox]::before { content:''; position:absolute; top:3px; left:3px; width:14px; height:14px; border-radius:50%; background:#818180; transition:transform .15s,background .15s; }
.setting-switch input[type=checkbox]:checked { background:#d0cfcd; }
.setting-switch input[type=checkbox]:checked::before { transform:translateX(14px); background:#121212; }
.setting-switch input[type=checkbox]:focus-visible { outline:2px solid #fff; outline-offset:2px; }
.setting-switch input[type=checkbox]:disabled { opacity:.5; cursor:not-allowed; }
@media (prefers-reduced-motion:reduce) { .setting-switch input[type=checkbox],.setting-switch input[type=checkbox]::before,#brand-background canvas { transition:none; animation:none; } }
.settings-form [role=tabpanel] { width:100%; padding:20px; border:1px solid #2c2c2c; border-radius:3px; }
.settings-form [role=tabpanel]:not([hidden]) { display:flex; flex-direction:column; gap:25px; }
.settings-form .field { margin:0; }
.settings-form input { height:36px; }
.settings-form .field>span:first-child { font-size:12px; font-weight:400; color:#818180; }
/* Webflow auth-wrapper / tile-glass.t-modal: centered 380 px card, 40 px inset. */
.login-shell { min-height:100dvh; display:grid; place-items:center; padding:48px; }
.login-stage { position:relative; width:380px; max-width:100%; }
.login-page { width:100%; max-width:none; margin:0; padding:40px; gap:0; }
.login-brand { justify-content:flex-start; gap:6px; height:25px; margin-bottom:40px; }
.login-brand img { width:25px; height:25px; opacity:1; margin-left:-8px; }
.login-brand h1 { font-size:24px; font-weight:700; letter-spacing:0; line-height:.9; }
.login-page .stack { margin:0; gap:16px; }
.login-page .stack input { height:36px; line-height:18px; }
.login-page .stack .button { width:100%; }
.login-page .login-status,.login-page .field-error:not(:empty),.login-page .login-success { margin:16px 0 0; }
.login-page .field-error:empty { display:none; }
.login-page .login-success { padding:0; border:0; font-size:14px; color:#5e5e5d; line-height:1.25; }
.login-success strong { font-weight:500; color:#d0cfcd; }
.login-status { color:#818180; font-size:12px; }
.login-tools { position:absolute; top:calc(100% + 16px); width:100%; }
.login-tools summary { font-size:12px; color:#818180; text-align:center; }
.login-link-entry[open] { padding:20px; background:var(--panel); border:1px solid var(--border); border-radius:4px; }
.login-stage:has(.login-link-entry[open]) .login-tools { position:static; margin-top:16px; }
.login-tools .stack { display:flex; flex-direction:column; gap:12px; }
.login-fixture { margin-top:14px; text-align:center; color:#818180; font-size:10px; }
.login-fixture .text-button { font-size:10px; }
.login-footer { position:fixed; bottom:15px; left:0; right:0; display:flex; justify-content:center; }
@media(max-width:479px) { .login-shell { padding:24px 16px 64px; } .login-page { padding:32px; } }
@media(max-height:650px) { .login-shell { padding-top:24px; padding-bottom:100px; } .login-tools { position:static; margin-top:16px; } .login-footer { position:static; margin-top:24px; } }
/* Keep the migrated small-screen access; the export has no usable narrow layout. */
@media(max-width:1000px) {
  .layout { display:grid; grid-template-columns:220px minmax(0,1fr); gap:16px; }
  .sidebar { width:220px; min-width:0; }
  .slider-control { width:100px; }
  .light-source-preview { gap:6px; }
  .light-source-preview>div { width:42px; height:42px; }
}
@media(max-width:760px) {
  .layout { display:block; padding:12px; }
  .sidebar { position:static; display:grid; grid-template-columns:1fr; width:100%; min-height:0; max-height:none; gap:12px; margin-bottom:12px; }
  .brand { height:65px; }
  .navigation { min-height:0; padding:16px; }
  .navigation nav { display:flex; flex-wrap:wrap; gap:4px; }
  .navigation .nav-link { width:auto; font-size:14px; }
  .navigation>.divider:last-of-type { display:none; }
  .sidebar-bottom { display:flex; flex-wrap:wrap; padding:12px; gap:4px 12px; }
  .sidebar-bottom .nav-link { width:auto; font-size:13px; }
  .sidebar-bottom .divider { display:none; }
  .legal-footer { align-items:center; }
  .main-panel { min-height:50dvh; padding:16px; }
  .controls-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .gallery-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .character-card { flex-wrap:wrap; }
  .pose-dialog { grid-template-columns:1fr; }
  .pose-dialog .upload-square { width:200px; }
  .main-header .refresh-button,.image-ratings { opacity:.65; }
}
@media(prefers-reduced-motion:reduce) { .image-ratings { transition:none; } }
/* Webflow character pages: one column for properties, two for captions. */
.character-back { font:inherit; padding:0; color:inherit; }
.character-back:hover { color:#d0cfcd; }
.character-back span { margin-right:5px; }
.character-editor>#character-error:empty { display:none; }
.character-columns { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; align-items:start; }
.character-properties { display:flex; flex-direction:column; gap:16px; position:sticky; top:20px; }
.character-properties form { width:100%; }
.character-form-fields { border:0; padding:0; margin:0; min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:16px; }
.character-field-box { border:1px solid var(--border); border-radius:3px; padding:20px; width:100%; margin:0; min-width:0; }
.character-field-box .field { margin:0; gap:8px; }
.character-field-box .field>span,.gender-field legend { font-size:12px; font-weight:400; color:#818180; }
.character-field-box input:not([type=radio]) { height:36px; }
.gender-field { position:relative; padding-top:58px; }
.gender-field legend { position:absolute; top:20px; left:20px; padding:0; }
.gender-options { display:flex; flex-direction:column; gap:8px; font-size:16px; }
.gender-options label { display:flex; align-items:center; gap:7px; cursor:pointer; }
.gender-options input { appearance:none; width:14px; height:14px; border-radius:5px; background:#2c2c2c; min-height:0; margin:0; accent-color:#ddd; padding:0; box-shadow:none; }
.dataset-upload { min-height:202px; justify-content:center; position:relative; display:flex; flex-direction:column; align-items:center; gap:14px; width:100%; border:1px dashed #5e5e5d; border-radius:4px; padding:20px; }
.dataset-upload>.section-label { position:absolute; top:20px; left:20px; margin:0; }
.dataset-upload .file-button { position:relative; font-size:10px; height:28px; }
.file-button:focus-within { outline:2px solid #e3e1de; outline-offset:3px; }
.character-dataset { grid-column:span 2; display:flex; flex-direction:column; gap:16px; min-width:0; }
.dataset-row { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; padding:20px 20px 10px; border:1px solid var(--border); border-radius:3px; min-width:0; }
.dataset-row>img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:6px; }
/* 896 x 1152 training images (three-quarter, full-body, portrait framings) keep their 7:9 shape. */
.dataset-row>img.portrait { aspect-ratio:7/9; }
.dataset-row>form,.dataset-row>.dataset-caption { grid-column:span 3; }
.dataset-row>form { display:flex; flex-direction:column; gap:8px; min-width:0; }
.dataset-row textarea { width:100%; min-height:100px; flex:1; resize:vertical; font-size:12px; line-height:1.5; }
.dataset-caption { padding:9px; font-size:12px; line-height:1.5; white-space:pre-wrap; overflow-wrap:anywhere; background:#212121; border-radius:3px; }
.dataset-row-actions { display:flex; gap:16px; justify-content:space-between; }
.dataset-row-actions .text-button { font-size:10px; text-transform:uppercase; }
.dataset-empty { display:grid; place-items:center; min-height:250px; border:1px solid var(--border); border-radius:3px; color:#818180; font-size:12px; }
.training-start { display:flex; flex-direction:column; align-items:flex-start; gap:16px; border-top:1px solid var(--border); padding-top:20px; margin-top:4px; }
.training-model-choices { width:100%; border:0; padding:0; margin:0; }
.training-model-choices legend { margin-bottom:10px; color:#ddd; font-size:13px; }
.training-model-option { display:flex; align-items:center; gap:10px; min-height:38px; cursor:pointer; color:#c8c8c8; }
.training-model-option input { flex:0 0 auto; }
.training-model-option:has(input:disabled) { cursor:not-allowed; color:#858585; }
.training-settings-row { margin:0; }
.training-settings { display:flex; flex-direction:column; gap:16px; min-width:min(420px,100%); }
.training-settings-model { display:flex; flex-direction:column; gap:12px; padding:14px; border:1px solid var(--border); border-radius:4px; }
.training-settings-model .field { margin:0; }
.training-settings .dialog-actions { display:flex; flex-wrap:wrap; gap:12px; justify-content:flex-end; }
/* Match the original 512 px image, 250 px information column and 20 px inset. */
.image-dialog { width:822px; }
.image-dialog .dialog-header { padding:0; height:0; z-index:1; }
.image-dialog .dialog-header h2 { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.image-dialog .dialog-header .icon-button { position:absolute; top:8px; right:8px; }
.image-dialog .dialog-body { padding:20px; }
.image-dialog .image-detail { grid-template-columns:minmax(0,512fr) minmax(0,250fr); gap:20px; align-items:start; }
.image-dialog .image-detail img { width:100%; max-height:none; object-fit:contain; border-radius:0; }
.image-dialog .image-info { padding:0; padding-top:24px; font-size:12px; gap:15px; overflow-wrap:anywhere; }
.image-dialog .image-info .field { margin:0; }
.image-dialog .image-info .field>span { font-size:12px; }
.image-dialog .image-info .tag { align-self:flex-start; }
.image-dialog .image-actions { gap:8px; }
.image-dialog .image-actions .button { height:32px; min-height:32px; font-size:10px; }
@media(max-width:1000px) and (min-width:761px) {
  .controls-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .character-columns { grid-template-columns:minmax(0,1fr) minmax(0,1.5fr); }
  .character-dataset { grid-column:auto; }
  .character-field-box { padding:16px; }
  .gender-field { padding-top:40px; }
  .gender-field legend { left:16px; top:16px; }
  .dataset-row { grid-template-columns:1fr; }
  .dataset-row>form,.dataset-row>.dataset-caption { grid-column:auto; }
  .dataset-row>img { width:100px; }
}
@media(max-width:760px) {
  .character-columns { grid-template-columns:1fr; }
  .character-properties { position:static; }
  .character-dataset { grid-column:auto; }
  .image-dialog .image-detail { grid-template-columns:1fr; }
  .image-dialog .image-info { padding-top:0; }
  .image-dialog .dialog-header .icon-button { background:#141313ed; }
}
@media(max-width:479px) {
  .dataset-row { grid-template-columns:80px minmax(0,1fr); gap:12px; padding:12px; }
  .dataset-row>form,.dataset-row>.dataset-caption { grid-column:auto; }
  .account-tabs { gap:16px; }
}

.gender-options input:checked { background:#ddd; box-shadow:inset 0 0 0 4px #555; }
.main-panel:has(.character-editor) .main-header:not(.has-tabs) { height:35px; min-height:35px; }
/* Reset the inherited mobile grid together: display:contents lifts the project picker. */
@media(max-width:760px) {
  .sidebar { grid-template-columns:130px minmax(0,1fr); grid-template-rows:auto; }
  .brand { padding:8px; min-width:0; }
  .navigation { display:contents; }
  .navigation nav { grid-column:1/-1; width:100%; }
  .project-select { grid-column:2; grid-row:1; min-width:0; }
  .sidebar-bottom { grid-column:1/-1; width:100%; justify-content:center; }
  .sidebar-bottom .nav-link { gap:8px; padding:6px; }
  .sidebar-bottom .legal-footer { width:100%; justify-content:center; }
  .character-card { align-items:flex-start; }
  .character-detail { flex-basis:100%; }
  .character-card>.button { margin-left:76px; }
}
.image-dialog .dialog-header { position:sticky; top:0; }
@media(max-width:479px) {
  .image-dialog .image-actions { display:flex; flex-direction:column; }
  .image-dialog .image-actions .button { height:auto; min-height:36px; padding:8px 12px; }
}
/* Grid's automatic minimum must not force the 380 px login card past a phone viewport. */
.login-shell { grid-template-columns:minmax(0,1fr); }
.login-stage { min-width:0; justify-self:center; }
.resolution.flux2-resolution { width:auto; padding:0 6px; white-space:nowrap; }
.resolution-tags { display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 0; }
.resolution-tag { appearance:none; border:1px solid #343433; border-radius:6px; background:#ffffff0a; color:#9a9997; padding:4px 8px; font:500 11px Inconsolata,monospace; line-height:1.2; }
button.resolution-tag { cursor:pointer; }
button.resolution-tag:hover,button.resolution-tag:focus-visible { border-color:#777572; color:#efeeec; }
.resolution-tag.current { border-color:#777572; background:#ffffff14; color:#efeeec; }
.resolution-tag.pending { color:#b9a980; }
.resolution-tag.failed { color:#b98282; }
.image-info .resolution-tags { margin:0 0 14px; }
/* v1-style placeholder of a submitted or running job: spinner in the middle, status top-left (Mathias, 23 September). */
.job-placeholder { display:flex; align-items:center; justify-content:center; min-height:160px; aspect-ratio:1; background:#ffffff08; border:1px dashed #ffffff28; border-radius:5px; }
.card-overlay .job-status { font:500 11px Inconsolata,monospace; color:#efeeec; background:#171717c9; border-radius:3px; padding:3px 6px; }
/* Resolution/Edit tabs and the status or size badge lie inside the image (top-left), so a card with tabs is not
   pushed down and all images in a row start flush (Mathias, 23 September). Right edge stays free for favourite/blur. */
.card-media { position:relative; }
.card-overlay { position:absolute; top:8px; left:8px; right:72px; z-index:3; display:flex; flex-direction:column; align-items:flex-start; gap:6px; pointer-events:none; }
.card-overlay .resolution { position:static; }
.card-overlay .card-tabs { margin:0; gap:4px; }
.card-overlay .resolution-tag { pointer-events:auto; border-color:#ffffff26; background:#171717c9; color:#d6d5d2; backdrop-filter:blur(3px); }
.card-overlay .resolution-tag:hover,.card-overlay .resolution-tag:focus-visible { border-color:#efeeec; color:#fff; }
.card-overlay .resolution-tag.current { border-color:#efeeec; background:#efeeec; color:#111; }
.card-overlay .resolution-tag.pending:not(.current) { color:#e3d29f; }
.card-overlay .resolution-tag.failed:not(.current) { color:#f0b3b3; }
.card-media .job-failed { min-height:0; }
.character-training-status { margin:0; font:500 11px Inconsolata,monospace; color:#b9a980; white-space:nowrap; }

/* FLUX.1 settings stay legible within the Character dataset column. */
.flux1-training-fields { width:100%; }
.controls-grid.flux1-training-controls { width:100%; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:end; }
.flux1-training-controls label { display:block; margin-bottom:6px; }
@media (max-width:480px) { .controls-grid.flux1-training-controls { grid-template-columns:1fr; } }

/* Quick-action stack over a result image, after the original tool: hidden until
   hover or keyboard focus, always visible on touch devices. */
.flux2-thumbnail { min-width:0; }
.image-action-stack { position:absolute; inset:auto 0 0 0; z-index:2; display:flex; flex-direction:column; align-items:center; gap:6px; padding:28px 0 20px; background:linear-gradient(#0000,#00000073); opacity:0; transition:opacity .2s; pointer-events:none; }
/* The gradient never takes clicks: a click into it beside the buttons opens the full view like the rest of the image
   (Mathias, 24 September 2026). Only the buttons of a visible stack are clickable. */
.image-card:hover .image-action-stack,.image-card:focus-within .image-action-stack { opacity:1; }
.image-action-stack>* { pointer-events:none; }
.image-card:hover .image-action-stack>*,.image-card:focus-within .image-action-stack>* { pointer-events:auto; }
.image-action-stack .button { width:120px; height:24px; min-height:24px; padding:0 8px; font-size:10px; font-weight:600; letter-spacing:.02em; box-shadow:0 2px 25px #00000080; background:#efeeec; color:#111; border-color:#efeeec; }
.image-action-stack .button:hover:not(:disabled) { background:#fff; color:#111; }
.image-action-stack .button:disabled { opacity:.45; cursor:not-allowed; }
@media (hover:none) { .image-action-stack { opacity:1; background:linear-gradient(#0000,#000000a6); } .image-action-stack>* { pointer-events:auto; } }
@media (prefers-reduced-motion:reduce) { .image-action-stack { transition:none; } }
.detail-upscale-action { display:flex; align-items:center; gap:10px; padding:0; flex-wrap:wrap; }
.detail-upscale-action .button { min-width:44px; min-height:44px; flex-shrink:0; }
.detail-upscale-action .small { line-height:1.4; }

/* FLUX.2 Generate: numbered reference slots and prompt marker chips (15 September 2026). */
.reference-slots { display:flex; gap:10px; align-items:flex-start; }
.reference-slot { position:relative; }
.reference-label { display:block; font-size:10px; letter-spacing:.04em; color:#8a8a8a; margin-bottom:4px; }
.prompt-chips { display:flex; gap:6px; margin:0 0 6px; }
.prompt-chips .chip { border:1px solid #2c2c2c; border-radius:999px; background:transparent; color:#e3e1de; font-size:11px; padding:3px 10px; min-height:24px; cursor:pointer; }
.prompt-chips .chip:hover, .prompt-chips .chip:focus-visible { border-color:#e3e1de; }
.prompt-chips .chip:disabled { opacity:.5; cursor:default; }

/* "Ohne Character" option in the character dialog: same tile as a character, icon instead of avatar. */
.character-option.character-none svg { width: 48px; height: 48px; flex: 0 0 auto; opacity: .7; }
.character-option.character-none { border-style: dashed; }

/* Per-reference preprocessor (Off / Pose / Depth / Line) under each reference slot. */
.prep-options { display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; max-width:120px; }
.prep-options .chip { padding:2px 7px; font-size:11px; }
.prep-options .chip.selected { background:var(--accent, #222); color:#fff; border-color:var(--accent, #222); }

/* FLUX.2 feed (Mathias, 15 Sep evening): two jobs side by side, each image spans its whole card
   (half the feed width, i.e. two of the former four columns) instead of one quarter. */
.flux2-gallery { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:25px 16px; align-items:start; }
.flux2-gallery>.job { min-width:0; }
.flux2-single { grid-template-columns:minmax(0,1fr); }
@media (max-width: 767px) { .flux2-gallery { grid-template-columns:minmax(0,1fr); } }

/* Dataset Autopilot: a contact-sheet review surface inside the existing Character editor. */
.dataset-preparation { grid-column:1/-1; display:flex; flex-direction:column; gap:16px; padding:20px; border:1px solid var(--border); border-radius:4px; background:linear-gradient(145deg,#151515cc,#24242480); }
.dataset-preparation>header { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; }
.dataset-preparation>header h2 { margin:5px 0 4px; font-size:18px; letter-spacing:-.02em; }
.dataset-preparation>header p { color:var(--muted); max-width:640px; }
.dataset-preparation-count { font:32px Inconsolata,monospace; line-height:1; white-space:nowrap; }
.dataset-preparation-count small { color:#929292; font-size:14px; }
.dataset-preparation-controls { display:grid; grid-template-columns:max-content minmax(120px,180px) max-content; gap:12px; align-items:end; }
.dataset-preparation-controls>.button,.dataset-preparation-controls>.file-button { min-height:39px; }
.dataset-source-list { border:1px solid #ffffff12; padding:10px 12px; }
.dataset-source-list summary { cursor:pointer; color:#bbb; font-size:11px; padding:2px 0; }
.dataset-source-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:10px; }
.dataset-source-item { display:grid; grid-template-columns:48px minmax(0,1fr) auto; align-items:center; gap:9px; min-width:0; padding:6px; border:1px solid #ffffff12; border-radius:3px; background:#111; }
.dataset-source-thumb { width:48px; height:48px; overflow:hidden; border-radius:2px; background:#0a0a0a; }
.dataset-source-thumb>img,.dataset-source-thumb>span { display:block; width:100%; height:100%; object-fit:cover; }
.dataset-source-copy { display:flex; flex-direction:column; gap:3px; min-width:0; }
.dataset-source-copy b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:10px Inconsolata,monospace; font-weight:400; color:#d0d0d0; }
.dataset-source-copy small { color:#777; font:9px Inconsolata,monospace; }
.dataset-source-list .text-button { flex-shrink:0; font-size:9px; text-transform:uppercase; }
.dataset-target span { display:block; margin-bottom:5px; font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:#aaa; }
.dataset-preparation-status { display:flex; align-items:center; gap:9px; min-height:38px; padding:9px 12px; border-left:2px solid #c7c7c7; background:#ffffff08; }
.dataset-preparation-status .spinner { width:14px; height:14px; }
/* Five categories in two rows (3 + 2), never one cramped row (Mathias, 1 October 2026: cut off on narrow screens). */
.dataset-quota { list-style:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; padding:0; margin:0; background:#ffffff12; border:1px solid #ffffff12; }
.dataset-quota li { position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:8px; min-height:58px; padding:12px; overflow:visible; background:#191919; }
.dataset-quota span { color:#aaa; font-size:10px; text-transform:uppercase; letter-spacing:.035em; }
.dataset-quota .dataset-quota-label { min-width:0; justify-content:flex-start; }
/* The hint behind "?" reads as a sentence and is no longer clipped by its card. */
.dataset-quota .dataset-tooltip { text-transform:none; letter-spacing:0; font-size:11px; color:#e8ddc8; }
/* Hidden hints take no room (the card no longer clips them); a hint in the right-hand column opens to the left. */
.dataset-quota .dataset-tooltip { display:none; }
.dataset-quota .dataset-info:hover+.dataset-tooltip,.dataset-quota .dataset-info:focus-visible+.dataset-tooltip { display:block; }
.dataset-quota li:nth-child(3n) .dataset-tooltip { left:auto; right:0; }
/* The last card fills its row, so no empty cell remains (3 + 2 here, 2 + 2 + 1 on phones). */
.dataset-quota li:last-child:nth-child(3n+2) { grid-column:span 2; }
.dataset-quota strong { font:12px Inconsolata,monospace; font-weight:400; }
.dataset-quota progress { position:absolute; inset:auto 0 0; width:100%; height:3px; border:0; border-radius:0; appearance:none; background:#ffffff12; }
.dataset-quota progress::-webkit-progress-bar { background:#ffffff12; }
.dataset-quota progress::-webkit-progress-value { background:#e5e5e5; }
.dataset-quota progress::-moz-progress-bar { background:#e5e5e5; }
.dataset-candidate-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:12px; }
.dataset-candidate { display:grid; grid-template-columns:minmax(130px,38%) minmax(0,1fr); gap:14px; padding:10px; border:1px solid #ffffff15; border-radius:4px; background:#141414; }
.dataset-candidate.selected { border-color:#ffffff38; }
.dataset-candidate-image { position:relative; aspect-ratio:1; min-width:0; background:#0d0d0d; overflow:hidden; border-radius:3px; }
.dataset-candidate-image>img { width:100%; height:100%; object-fit:cover; }
/* r12: three-quarter/full-body crops are 7:9 portraits (896 x 1152 training images). */
.dataset-candidate-image.portrait { aspect-ratio:7/9; }
.dataset-candidate-image>.dataset-candidate-category { position:absolute; z-index:2; top:7px; left:7px; right:auto; bottom:auto; width:auto; height:auto; display:inline-block; padding:3px 5px; border-radius:2px; background:#111d; font:10px Inconsolata,monospace; }
.dataset-candidate-crop { position:absolute; inset:0; overflow:hidden; }
.dataset-candidate-crop canvas { display:block; width:100%; height:100%; }
.dataset-crop-loader[hidden] { display:none; }
/* r11: the other eligible crops, collapsed under the dataset (1 October 2026). */
.dataset-alternatives { border:1px solid #ffffff12; border-radius:4px; padding:10px 12px; }
.dataset-alternatives summary { cursor:pointer; color:#bbb; font-size:12px; padding:2px 0; }
.dataset-alternatives>p { margin:8px 0 0; }
.dataset-alternative-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(128px,1fr)); gap:10px; margin-top:10px; }
.dataset-alternative { display:grid; gap:6px; align-content:start; min-width:0; padding:6px; border:1px solid #ffffff12; border-radius:3px; background:#111; }
.dataset-alternative .dataset-candidate-check { min-height:24px; font-size:11px; }
.dataset-alternative .dataset-candidate-meta { margin:0; font-size:10px; }
.dataset-candidate-placeholder { height:100%; display:grid; place-items:center; padding:12px; color:#888; text-align:center; }
.dataset-candidate-copy { display:flex; flex-direction:column; gap:8px; min-width:0; }
.dataset-candidate-copy textarea { min-height:72px; resize:vertical; }
.dataset-candidate-check { display:flex; gap:8px; align-items:center; font-size:11px; text-transform:uppercase; letter-spacing:.04em; }
.dataset-candidate-check input { width:17px; height:17px; }
.dataset-candidate-meta,.dataset-candidate-actions { display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 12px; }
.dataset-candidate-meta { color:#999; font:10px Inconsolata,monospace; }
.dataset-candidate-warnings { margin:0; padding-left:16px; color:#e2b9a1; font-size:11px; }
.dataset-candidate-actions .text-button { font-size:10px; text-transform:uppercase; }
.dataset-preparation-empty { min-height:190px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:6px; border:1px dashed #ffffff22; color:#aaa; text-align:center; }
.dataset-preparation-empty strong { color:#ddd; font-weight:400; }
.dataset-preparation>footer { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding-top:4px; }
.dataset-preparation>footer p { flex:1 1 280px; }
.dataset-crop-review { display:flex; flex-direction:column; gap:16px; }
.dataset-crop-compare { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; }
.dataset-crop-stage,.dataset-crop-preview { position:relative; display:grid; place-items:center; min-width:0; aspect-ratio:1; overflow:hidden; margin:0; background:#111; border:1px solid var(--border); }
.dataset-crop-stage figcaption,.dataset-crop-preview figcaption { position:absolute; z-index:2; top:8px; left:8px; padding:3px 6px; background:#111c; color:#ddd; font:10px Inconsolata,monospace; text-transform:uppercase; }
.dataset-crop-stage img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.dataset-crop-preview>span { position:absolute; inset:0; overflow:hidden; }
.dataset-crop-preview canvas { display:block; width:100%; height:100%; object-fit:contain; }
.dataset-crop-fields { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
@media(max-width:900px) { .dataset-candidate-grid { grid-template-columns:minmax(0,1fr); } }
@media(max-width:900px) { .dataset-source-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) { .dataset-preparation { padding:14px; } .dataset-preparation-controls { grid-template-columns:1fr; } .dataset-preparation-controls>* { width:100%; } .dataset-source-grid { grid-template-columns:1fr; } .dataset-candidate { grid-template-columns:96px minmax(0,1fr); } .dataset-quota { grid-template-columns:repeat(2,minmax(0,1fr)); } .dataset-quota li:nth-child(n) .dataset-tooltip { left:0; right:auto; } .dataset-quota li:nth-child(even) .dataset-tooltip { left:auto; right:0; } .dataset-quota li:last-child:nth-child(3n+2) { grid-column:auto; } .dataset-quota li:last-child:nth-child(odd) { grid-column:1/-1; } .dataset-quota li { grid-template-columns:minmax(0,1fr); align-items:start; gap:6px; } .dataset-crop-compare { grid-template-columns:1fr; } .dataset-crop-fields { grid-template-columns:1fr; } }

/* Info toggletips in the top-right corner of a control card (Mathias, 24 September): the static explanations moved
   here from under the controls. Hover (real pointers only, so a tap does not stick), keyboard focus or a tap
   (aria-expanded) shows the tip; it spans the card below the icon and touches it so the pointer can move onto it. */
.control-card .card-hint-wrap { position:static; }
.card-hint { position:absolute; top:5px; right:5px; z-index:3; display:grid; place-items:center; width:26px; height:26px; min-height:0; padding:0; border:0; border-radius:50%; background:transparent; color:#818180; cursor:help; }
.card-hint svg { width:14px; height:14px; }
.card-hint:hover,.card-hint:focus-visible,.card-hint[aria-expanded=true] { color:#efeeec; }
.card-hint:focus-visible { outline:1px solid #efeeec; outline-offset:0; }
.card-hint-tip { position:absolute; top:31px; left:6px; right:6px; z-index:4; padding:8px 10px; border-radius:3px; background:#212121; box-shadow:inset 0 0 0 1px var(--border),0 8px 20px #000a; color:#e3e1de; font-size:11px; font-weight:300; line-height:1.45; text-align:left; visibility:hidden; opacity:0; pointer-events:none; transition:opacity .12s; }
.card-hint:focus-visible:not(.dismissed)+.card-hint-tip,.card-hint[aria-expanded=true]+.card-hint-tip { visibility:visible; opacity:1; pointer-events:auto; }
@media(hover:hover) { .card-hint-wrap:hover .card-hint:not(.dismissed)+.card-hint-tip { visibility:visible; opacity:1; pointer-events:auto; } }
@media(prefers-reduced-motion:reduce) { .card-hint-tip { transition:none; } }
/* Referenzbilder: content is centred below the heading instead of into it (the @image labels collided
   with "Referenzbilder" in a half-width phone card); two slots shrink to fit the half card. */
.control-card.reference-card { padding:34px 8px 10px; }
@media(max-width:760px) { .reference-card .reference-slots { gap:6px; } .reference-card .upload-square { width:min(96px,calc((100vw - 110px) / 4)); height:min(96px,calc((100vw - 110px) / 4)); } .reference-card .prep-options { max-width:calc((100vw - 110px) / 4); } }
/* "@" suggestions directly under the prompt box. */
.prompt-row { position:relative; }
.prompt-mentions { position:absolute; top:100%; left:0; z-index:20; min-width:170px; margin:4px 0 0; padding:4px; list-style:none; border-radius:3px; background:#212121; box-shadow:inset 0 0 0 1px var(--border),0 8px 20px #000a; }
.prompt-mentions[hidden] { display:none; }
.prompt-mentions [role=option] { display:flex; align-items:center; gap:8px; min-height:36px; padding:4px 8px 4px 4px; border-radius:2px; font-size:13px; color:#e3e1de; cursor:pointer; }
.prompt-mentions [role=option] img { width:28px; height:28px; object-fit:cover; border-radius:2px; flex:0 0 auto; }
.prompt-mentions [role=option]:hover,.prompt-mentions [role=option][aria-selected=true] { background:#2c2c2c; }
.prompt-mentions [role=option][aria-selected=true] { box-shadow:inset 2px 0 0 #efeeec; }
/* FLUX.2 job card (Mathias, 24 September 2026). The box keeps the job's aspect ratio (data-aspect, set through the CSSOM)
   while another tab's image loads: the image fills it, a centred spinner shows until the image has loaded and the
   previous tab's image may stay underneath (.holding). */
.image-card[data-aspect] .image-open,.image-card[data-aspect] .image-open img { height:100%; }
.image-card .card-spinner { display:none; position:absolute; top:50%; left:50%; width:24px; height:24px; margin:-12px 0 0 -12px; z-index:1; pointer-events:none; color:#efeeec; filter:drop-shadow(0 0 2px #000a); }
.image-card.media-pending .card-spinner { display:block; }
.image-card.media-pending .image-open img { opacity:0; }
.image-card .image-open img.flux2-result { transition:opacity .15s; }
.image-open.holding { background-position:center; background-size:contain; background-repeat:no-repeat; }
/* Resolution tabs, thumbs down (hide) and thumbs up (like) share one chip size. A liked image keeps its filled thumb
   visible without hover; the other chips appear on hover, keyboard focus and always on touch devices. */
.card-overlay .resolution-tag { height:24px; box-sizing:border-box; display:inline-flex; align-items:center; padding:0 8px; }
.flux2-ratings { top:8px; right:8px; z-index:3; gap:4px; opacity:1; }
.flux2-ratings .card-chip { width:24px; height:24px; box-sizing:border-box; padding:0; display:grid; place-items:center; border:1px solid #ffffff26; border-radius:6px; background:#171717c9; color:#d6d5d2; backdrop-filter:blur(3px); opacity:0; transition:opacity .2s; }
.flux2-ratings .card-chip svg { width:14px; height:14px; }
.image-card:hover .flux2-ratings .card-chip,.image-card:focus-within .flux2-ratings .card-chip,.flux2-ratings .card-chip.selected { opacity:1; }
.flux2-ratings .card-chip:hover,.flux2-ratings .card-chip:focus-visible { border-color:#efeeec; color:#fff; background:#171717e6; }
.flux2-ratings .image-favorite.selected { border-color:#efeeec; }
.flux2-ratings .image-favorite.selected svg { fill:currentColor; }
.flux2-ratings .card-chip[aria-busy="true"] { cursor:progress; }
@media (hover:none) { .flux2-ratings .card-chip { opacity:1; } }
@media (prefers-reduced-motion:reduce) { .flux2-ratings .card-chip,.image-card .image-open img.flux2-result { transition:none; } }
/* Read-only model label at the top of the left menu (src/models.js, 24 September 2026): names the model the menu
   below belongs to, styled like the project picker above it. Never a control — the model is chosen by picking a
   Character option or "Ohne Character" in the Choose Character dialog, never here. */
.model-select { display:flex; width:100%; margin:0; }
.model-select-single { align-items:center; height:36px; padding:0 12px; font-size:14px; color:#efeeec; background:#212121; border-radius:3px; margin:0; }
.menu-gap { height:20px; }
/* The model of a Character's LoRA in Choose Character. */
.model-badge { flex-shrink:0; padding:2px 7px; font-size:11px; line-height:16px; color:#efeeec; background:#ffffff0f; box-shadow:inset 0 0 0 1px #ffffff26; border-radius:10px; white-space:nowrap; }
.character-option .model-badge { margin-left:auto; }
.character-option .model-badge + .muted { margin-left:0; }
@media(max-width:760px) {
  .model-select { grid-column:1/-1; }
  .model-select-single { height:40px; min-height:40px; font-size:13px; }
  .menu-gap { display:none; }
}
/* FLUX.1 has five menu entries: on a phone they share one row without dots (the active entry keeps its background). */
@media(max-width:520px) {
  .navigation nav .nav-link { min-width:0; padding:8px 4px; }
  .navigation nav .nav-dot { display:none; }
}
/* Target resolution (27 September 2026): "2K/4K/6K/8K erstellen" over the image as one compact row, in the full view with
   size, jobs and estimate; the Upscaler's target and Klein detail choices wrap like the mode chips. */
.detail-upscale-action.flux2-target-actions { flex-direction:column; align-items:stretch; gap:6px; width:100%; }
.detail-upscale-action.flux2-target-actions .button { display:flex; flex-direction:column; align-items:flex-start; gap:2px; width:100%; height:auto; padding:6px 10px; text-align:left; white-space:normal; }
.detail-upscale-action .target-estimate { font-size:11px; font-weight:400; line-height:1.3; letter-spacing:0; text-transform:none; white-space:normal; overflow-wrap:anywhere; opacity:.75; }