Blame for src/ui/studio.css

/* ===== ART-PROMPtimizer Studio — component/layout layer ===== */
/* The palette lives in theme/space.css (the same colours the browser
   extension uses) and is prepended to this file by src/ui/assets.py. Never
   define colours here: hard-coded rgba() values are what make a theme switch
   look half-applied. Use a token -- add one to space.css if none fits. */
/* Page backdrop: a deep vertical wash plus the brand glows, echoing the
   project logo's navy -> indigo -> violet field. --bg-deep darkens the
   lower half so panels read as raised. */
html, body { background: var(--bg) !important; font-family: var(--font) !important; }
#root, .gradio-container { background: transparent !important; }
/* Ambient glow, deliberately faint: the tokens are tuned to read as a deep
   field, not as neon. Derived with color-mix rather than a literal so themes
   still work. */
body::before {
    content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(1100px 540px at 50% -12%, color-mix(in srgb, var(--glow-1) 50%, transparent), transparent 62%),
        radial-gradient(860px 500px at 94% 6%, color-mix(in srgb, var(--glow-2) 45%, transparent), transparent 58%),
        linear-gradient(180deg, color-mix(in srgb, var(--bg-deep) 55%, var(--bg)) 0%, var(--bg-deep) 100%);
}
.gradio-container { position: relative; z-index: 1; max-width: 1280px !important; margin: 0 auto !important; padding: 16px 20px 48px !important; }
/* Gradio caps its own .main.fillable at 768px, which made the multi-column
   cockpit collapse into a single 704px stack on any desktop. Raise it so the
   grid rules below actually have room to lay out side by side. */
.main.fillable, .main.fillable > .wrap { max-width: 1240px !important; margin-left: auto !important; margin-right: auto !important; }
:focus-visible { outline: 2px solid var(--accent) !important; outline-offset: 2px !important; }
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--track) !important; border-radius: 3px; }
*::-webkit-scrollbar-thumb:hover { background: var(--chip-border) !important; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---------- header ----------
   Single compact bar. The brand mark, wordmark and subtitle sit inline; the
   theme/language chips run horizontally on the right and are allowed to
   wrap onto a second line rather than growing a 486px-tall column.
   The wordmark uses the display serif with a two-tone "PRO", following the
   project logo. Both tones come from tokens so every theme re-colours it. */
.art-brand {
    display: flex !important; align-items: center !important; gap: 11px !important; min-width: 0 !important;
    /* Framed, like the rest of the header. Also load-bearing: the wordmark is
       gradient-clipped text on a bare page surface, so it needs a stable
       backdrop rather than the ambient glow behind the header. */
    background: var(--panel) !important; border: 1px solid var(--panel-border) !important;
    border-radius: var(--r-md) !important; padding: 9px 14px 9px 10px !important;
    box-shadow: inset 0 1px 0 var(--spec-1) !important;
    /* Floor: logo (38) + gap (11) + the widest wordmark (~240) + padding (24).
       Without it a narrow viewport squeezes the column to a sliver and the
       nowrap title spills out of the frame. */
    min-width: 313px !important;
}
.art-logo {
    flex: none !important; width: 38px !important; height: 38px !important; border-radius: 11px !important;
    background: linear-gradient(140deg, var(--grad-1), var(--accent-2)) !important;
    box-shadow: 0 2px 10px var(--logo-shadow) !important; overflow: hidden !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
}
.art-logo img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; }
.art-brand-text { display: flex !important; flex-direction: column !important; gap: 0 !important; min-width: 0 !important; }
.art-title {
    font-family: var(--font-display) !important; font-weight: 600 !important; font-size: 27px !important;
    letter-spacing: 0.2px !important; line-height: 1.05 !important; white-space: nowrap !important;
    color: var(--text) !important;
}
/* The two-tone "PRO" from the logo.
   Uses the `background-image` LONGHAND, not the `background` shorthand:
   Gradio resets the shorthand on these elements, so a shorthand gradient was
   silently dropped while `-webkit-text-fill-color: transparent` stayed --
   which rendered the letters invisible. Same bug that hid the whole wordmark
   earlier; this form survives it. The @supports fallback keeps the wordmark
   readable where background-clip:text is unavailable.
   Endpoints come from --wordmark-*, not --grad-*: the header is a bare page
   surface, and a light theme's --grad-1 fails contrast there. */
.art-title-accent {
    color: var(--wordmark-1) !important;
    background-image: linear-gradient(100deg, var(--wordmark-1), var(--wordmark-2)) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
    .art-title-accent { color: var(--wordmark-1) !important; -webkit-text-fill-color: currentColor !important; }
}
.art-subtitle { font-size: 11px !important; color: var(--muted) !important; line-height: 1.35 !important;
    white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
/* `auto`, not 0: for a flex item `min-width: auto` is the min-content floor,
   which here is .art-brand's own 313px (set so the subtitle fits unclipped on
   one line). With 0 the box was allowed to collapse to the wordmark's ~204px
   while the brand kept its 313px, so the brand overflowed its own parent and
   the subtitle ran underneath the theme picker -- measured at 1290px, the
   picker won every hit-test from x=277 on and the subtitle's tail (drawn to
   x=371) was simply painted over, ellipsis and all. Keeping the floor makes
   head-main reserve the width the brand needs; head-side gives ground instead,
   which it can now do because .art-controls below is shrinkable. */
.art-head-main { min-width: auto !important; justify-content: flex-start !important; }
/* 640px is the width that holds all five theme chips on one row (5 x ~126px).
   It used to be set as `min-width`, which is a floor the row can never cross:
   brand 313px + 640px + gap + topbar padding is a 1015px min-content, and
   Gradio carried that up the tree unchanged (.wrap 1015 -> .main 1079 ->
   .gradio-container 1119), so any viewport under 1119px scrolled sideways for
   the sake of a header. Flex-basis keeps the intent -- the row still asks for
   640px and takes it whenever there is room -- but lets it give ground, and the
   clusters below already wrap inside their frames when they do.

   `.art-controls` has to be shrinkable as well: it was `flex: none`, so its
   640px of content was an unbreakable block sitting under head-side and
   min-width:0 on head-side alone would only have moved the overflow into it. */
.art-head-side { min-width: 0 !important; flex: 0 1 auto !important; justify-content: flex-end !important; }
.art-controls { gap: 6px !important; justify-content: flex-end !important; align-items: stretch !important;
    flex-wrap: wrap !important; flex: 0 1 auto !important; min-width: 0 !important; }

/* Framed settings cluster: the theme and language pickers get their own
   bordered shell so they read as one control, not as loose floating chips.
   The radius is a rounded rectangle, not --pill: these wrap onto two rows on
   narrow viewports, and a 999px radius on a multi-row box renders as a
   stadium/ellipse. */
.art-theme-btn, .art-lang-btn {
    gap: 4px !important; margin: 0 !important; flex-wrap: wrap !important; justify-content: flex-end !important;
    padding: 5px 6px !important;
    background: var(--inset-bg) !important; border: 1px solid var(--panel-border) !important;
    border-radius: var(--r-md) !important; box-shadow: inset 0 1px 0 var(--spec-1) !important;
    display: flex !important; flex-direction: row !important; align-items: center !important;
}
.art-theme-btn label, .art-lang-btn label {
    display: inline-flex !important; align-items: center !important; height: 24px !important; box-sizing: border-box !important;
    border: 1px solid transparent !important; background: transparent !important;
    border-radius: var(--pill) !important; padding: 0 10px !important;
    font-size: 11px !important; font-weight: 600 !important; line-height: 1 !important;
    white-space: nowrap !important; cursor: pointer !important; transition: all 0.15s !important;
}
.art-theme-btn label:hover, .art-lang-btn label:hover { background: var(--chip-hover) !important; color: var(--text) !important; }
.art-theme-btn label.selected, .art-lang-btn label.selected {
    border-color: var(--chip-border) !important; color: var(--chip-ink) !important;
    background: var(--accent-soft) !important;
    box-shadow: inset 0 1px 0 var(--spec-1) !important;
}
.art-divider { height: 1px !important; border: none !important; margin: 10px 0 12px !important;
    background: var(--panel-border) !important; }

/* ---------- layout stack & cards ---------- */
.art-tree { display: flex !important; flex-direction: column !important; gap: 12px !important; }
/* Cards that host Gradio components: NO backdrop-filter, deliberately.
   A filter (or backdrop-filter) on an ancestor makes that ancestor the
   containing block for its `position: fixed` descendants, and Gradio anchors
   every dropdown option panel (`ul.options`) with `position: fixed` plus an
   inline `bottom` solved against the viewport. With the blur on the card, that
   `bottom` was instead resolved against the ~1200px card, so the panel opened
   hundreds of pixels away from its own field -- usually below the fold, once
   mid-screen. Users read that as "the model list is empty" and "the option
   list jumps to the middle of the page", and every tab was affected because
   .art-tree-node wraps them all.
   Measured in-browser for one field: top 1065.28px (card-relative) vs
   742.48px (viewport-correct), list landing at y=1354 in an 886px viewport.
   The blur itself is invisible here anyway: --panel is 0.78 opaque over a
   smooth gradient with --noise 0.035, i.e. 0.22 * 0.035 = 0.008 of grain.
   `.art-tree-node::before` (specular rim) is unaffected: a pseudo-element is
   never an ancestor of anything. */
.art-tree-node, .art-result-card {
    background: var(--panel) !important;
    border: 1px solid var(--panel-border) !important;
    border-radius: var(--radius) !important;
    padding: 16px !important;
    box-shadow: 0 4px 20px var(--shadow) !important;
}
/* Emitted as markup *inside* gr.HTML (see tagger_tab.py / generate_tab.py),
   so these can never contain a Gradio component and keep the glass. */
.art-tagger-panel, .art-suggest-box {
    background: var(--panel) !important;
    border: 1px solid var(--panel-border) !important;
    border-radius: var(--radius) !important;
    padding: 16px !important;
    backdrop-filter: blur(var(--panel-blur)) saturate(var(--glass-sat)) !important;
    -webkit-backdrop-filter: blur(var(--panel-blur)) saturate(var(--glass-sat)) !important;
    box-shadow: 0 4px 20px var(--shadow) !important;
}
.art-tree-header { display: flex !important; align-items: flex-start !important; gap: 10px !important; margin-bottom: 12px !important; }
.art-tree-header-icon { font-size: 17px !important; line-height: 1.3 !important; }
.art-tree-header-title { color: var(--text) !important; font-weight: 700 !important; font-size: 11px !important; letter-spacing: 1px !important; text-transform: uppercase !important; }
.art-tree-header-desc { color: var(--muted) !important; font-size: 11.5px !important; line-height: 1.5 !important; margin-top: 3px !important; }
.art-grid { display: flex !important; flex-wrap: wrap !important; gap: 12px !important; align-items: flex-start !important; }
.art-grid > .art-col { flex: 1 1 100% !important; min-width: 0 !important; }
/* The control stack is itself a grid, so the cards pair up instead of
   queueing down one 1150px-wide ribbon with a lot of dead space beside each
   one. align-items:start stops a short card from stretching to its row. */
.art-grid > .art-col {
    display: grid !important; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)) !important;
    gap: 12px !important; align-items: start !important;
}
/* Cards that are inherently wide. Without this the 28-item category grid got
   squeezed into a third of the row and stacked into a ~1200px ribbon, while
   the two short cards beside it left a large dead area. */
.art-grid .art-span-all { grid-column: 1 / -1 !important; }
/* Results keep the full width: ten prompt textareas need the room. */
.art-grid > .art-output-col { flex: 1 1 100% !important; display: flex !important; flex-direction: column !important; gap: 12px !important; }
.art-col { display: flex !important; flex-direction: column !important; gap: 12px !important; min-width: 0 !important; }

/* ---------- Aurora glass ----------
   Ported from the extension's popup.css so both surfaces share the same
   depth cues: a 1px specular edge that catches light, a fine noise texture
   over the whole page, and blur+saturate on every raised surface. */

/* fine noise texture (inline SVG feTurbulence), sits under the content */
body::after {
    content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
    opacity: var(--noise);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* specular edge: a 1px gradient border masked to sit only on the rim, so the
   card reads as catching light instead of wearing a flat outline. Needs
   position:relative on the host for the absolutely positioned overlay. */
.art-tree-node, .art-result-card, .art-tagger-panel, .art-suggest-box,
.art-batch-card { position: relative !important; }
.art-tree-node::before, .art-result-card::before, .art-tagger-panel::before,
.art-suggest-box::before, .art-batch-card::before {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    border-radius: inherit; padding: 1px;
    background: linear-gradient(145deg, var(--spec-1), transparent 38%, transparent 62%, var(--spec-2));
/* `black` here is a mask cutout: only the alpha channel matters for a mask,
   so it is a geometry value rather than a paint colour. */
    -webkit-mask: linear-gradient(black 0 0) content-box, linear-gradient(black 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(black 0 0) content-box, linear-gradient(black 0 0);
    mask-composite: exclude;
}

/* ---------- sticky HUD header ----------
   Mirrors the extension's .topbar.sticky-hud: the brand row stays put while
   the long forms scroll under it. Single rule on purpose -- a second
   .art-topbar block would split the header across two places. */
.art-topbar {
    position: sticky !important; top: 0 !important; z-index: 100 !important;
    align-items: center !important; flex-wrap: nowrap !important;
    background: var(--bar) !important;
    backdrop-filter: blur(var(--panel-blur)) saturate(var(--glass-sat)) !important;
    -webkit-backdrop-filter: blur(var(--panel-blur)) saturate(var(--glass-sat)) !important;
    border-bottom: 1px solid var(--panel-border) !important;
    padding: 8px 6px !important; margin: 0 -6px 0 !important;
    border-radius: 0 !important;
}

/* ---------- segmented control ----------
   Joined pills for small binary/multi-way choices (tag mode, prompt format,
   control kind). The extension calls this .segment; here it is opt-in via
   elem_classes so free-form radio groups keep the looser pill look.

   elem_classes lands on the component's <fieldset>, which also contains the
   label, the info text and the choices row. Laying the fieldset out as one
   flex ROW (the previous rule) put all three side by side: in a 482px column
   the label and info ate 313px and the two pills were left 158px, i.e. 75px
   each, so "Prompt-ready" and "Raw (booru)" rendered ellipsised. Stack the
   fieldset instead and move the inset frame onto the choices row, which is
   what "joined pills" was meant to describe.

   The choices row is found structurally (`> :has(> label)`) rather than by
   Gradio's hashed class names -- `svelte-e4x47i` differs between Gradio 5 and
   6, and a version-specific selector is exactly the kind of rule that passes
   on one version and silently unstyles on the other. */
.art-segment {
    display: flex !important; flex-direction: column !important; align-items: stretch !important;
    width: 100% !important; gap: 6px !important;
    background: transparent !important; border: none !important; padding: 0 !important;
}
.art-segment > :has(> label) {
    display: flex !important; flex-wrap: wrap !important; gap: 3px !important;
    width: 100% !important; box-sizing: border-box !important;
    background: var(--inset-bg) !important; border: 1px solid var(--input-border) !important;
    border-radius: 12px !important; padding: 3px !important;
}
.art-segment label {
    /* 160px basis rather than 0: with `flex-basis: 0` two labels always share
       a row however narrow it gets, and the nowrap+ellipsis then ate the text.
       A basis larger than half the row lets flex-wrap drop a pill onto its own
       full-width line instead of shrinking it below its label. */
    flex: 1 1 160px !important; min-width: 0 !important;
    justify-content: center !important; text-align: center !important;
    border: none !important; background: transparent !important; border-radius: 9px !important;
    padding: 6px 10px !important; font-size: 11.5px !important; font-weight: 650 !important;
    color: var(--muted) !important; white-space: nowrap !important;
    overflow: hidden !important; text-overflow: ellipsis !important;
}
.art-segment label:hover { color: var(--text) !important; }
.art-segment label.selected, .art-segment label:has(input:checked) {
    color: var(--accent-ink) !important;
    background: linear-gradient(135deg, var(--grad-1), var(--grad-2)) !important;
    box-shadow: 0 2px 8px var(--btn-shadow) !important;
}

/* ---------- skeletons (loading placeholders) ---------- */
.art-skeleton { position: relative !important; overflow: hidden !important;
    border-radius: var(--radius) !important; padding: 11px 12px !important;
    background: var(--panel) !important; border: 1px solid var(--panel-border) !important; }
.art-skeleton .sk-line { height: 10px !important; border-radius: 6px !important;
    background: var(--track) !important; margin-bottom: 8px !important; }
.art-skeleton .sk-line:last-child { margin-bottom: 0 !important; }
.art-skeleton .sk-line.w40 { width: 40% !important; }
.art-skeleton .sk-line.w60 { width: 60% !important; }
.art-skeleton .sk-line.w80 { width: 85% !important; }
.art-skeleton::after { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(100deg, transparent 30%, var(--spec-1) 50%, transparent 70%);
    background-size: 200% 100%; animation: art-shimmer 1.3s linear infinite; }
@keyframes art-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ---------- viewfinder (HUD corners + thirds grid) ----------
   Drawn over the Tagger preview by the .art-viewfinder wrapper. */
.art-viewfinder { position: relative !important; display: inline-block !important; }
.art-vf-corner { position: absolute !important; width: 18px !important; height: 18px !important;
    border: 2px solid var(--spec-2) !important; pointer-events: none !important; opacity: 0.9 !important;
    transition: opacity 0.2s !important; }
.art-vf-corner.tl { top: 8px !important; left: 8px !important; border-right: none !important; border-bottom: none !important; border-radius: 6px 0 0 0 !important; }
.art-vf-corner.tr { top: 8px !important; right: 8px !important; border-left: none !important; border-bottom: none !important; border-radius: 0 6px 0 0 !important; }
.art-vf-corner.bl { bottom: 8px !important; left: 8px !important; border-right: none !important; border-top: none !important; border-radius: 0 0 0 6px !important; }
.art-vf-corner.br { bottom: 8px !important; right: 8px !important; border-left: none !important; border-top: none !important; border-radius: 0 0 6px 0 !important; }
.art-vf-grid { position: absolute !important; inset: 0 !important; pointer-events: none !important;
    display: none !important; opacity: 0.5 !important;
    background:
        linear-gradient(to right, transparent calc(33.3% - 0.5px), var(--spec-2) calc(33.3% - 0.5px), var(--spec-2) calc(33.3% + 0.5px), transparent calc(33.3% + 0.5px)),
        linear-gradient(to right, transparent calc(66.6% - 0.5px), var(--spec-2) calc(66.6% - 0.5px), var(--spec-2) calc(66.6% + 0.5px), transparent calc(66.6% + 0.5px)),
        linear-gradient(to bottom, transparent calc(33.3% - 0.5px), var(--spec-2) calc(33.3% - 0.5px), var(--spec-2) calc(33.3% + 0.5px), transparent calc(33.3% + 0.5px)),
        linear-gradient(to bottom, transparent calc(66.6% - 0.5px), var(--spec-2) calc(66.6% - 0.5px), var(--spec-2) calc(66.6% + 0.5px), transparent calc(66.6% + 0.5px));
}
.art-viewfinder.grid-on .art-vf-grid { display: block !important; }

/* ---------- telemetry (mono readouts) ---------- */
.art-telemetry { display: flex !important; flex-wrap: wrap !important; gap: 6px 16px !important;
    align-items: center !important; font-family: var(--mono) !important; font-size: 11px !important;
    color: var(--muted) !important; letter-spacing: 0.2px !important;
    background: var(--inset-bg) !important; border: 1px solid var(--line-soft) !important;
    border-radius: var(--r-sm) !important; padding: 6px 11px !important; }
.art-telemetry b { color: var(--text) !important; font-weight: 600 !important; }
.art-telemetry .ok { color: var(--ok) !important; }
.art-telemetry .warn { color: var(--amber) !important; }
.art-telemetry .err { color: var(--danger) !important; }
.art-tabular { font-variant-numeric: tabular-nums !important; font-family: var(--mono) !important; }

/* ---------- chips filter + telemetry host ---------- */
.art-chip-search { margin-bottom: 8px !important; }
.art-chip-search input { border-radius: var(--pill) !important; font-size: 12px !important;
    background: var(--input) !important; border: 1px solid var(--input-border) !important;
    color: var(--text) !important; padding: 7px 12px !important; }
.art-chip-search input::placeholder { color: var(--faint) !important; }
.art-telemetry-host { margin-top: 10px !important; }
.art-telemetry-host > .art-telemetry { margin: 0 !important; }
.art-telemetry-fields:empty { display: none !important; }

/* ---------- cloud-caption progress HUD (client-side) ----------
   The private caption path spends every second of its wait in this page's own
   fetch() to the provider, which happens BEFORE Gradio's event reaches the
   server. Gradio's progress bar only ever covers the server half, so for the
   longest wait it has nothing to show -- hence a clock of our own, next to the
   button. Driven by window.artHud (src/ui/assets.py) and started/stopped by
   the caption script in src/ui/direct_caption.py; extension parity with the
   popup's #elapsed readout and ring. */
.art-cloud-hud { display: flex !important; flex: 1 1 auto !important; min-width: 0 !important;
    align-items: center !important; gap: 8px !important; }
.art-cloud-hud-time { font-family: var(--mono) !important; font-size: 12px !important;
    font-variant-numeric: tabular-nums !important; color: var(--muted) !important;
    min-width: 46px !important; white-space: nowrap !important; }
.art-cloud-hud-track { display: block !important; flex: 1 1 auto !important; min-width: 48px !important;
    height: 6px !important; overflow: hidden !important; background: var(--track) !important;
    border: 1px solid var(--line-soft) !important; border-radius: var(--pill) !important;
    transition: height 240ms ease, opacity 240ms ease, border-width 240ms ease !important; }
.art-cloud-hud-bar { display: block !important; height: 100% !important;
    /* Declared here so the token resolves even before the clock has written
       anything (and if the clock never runs, the bar stays empty rather than
       filling by accident). paint() overrides it on the element itself. */
    --art-fill: 0%;
    /* The fill arrives as a custom property, not as an inline width: an
       inline width would lose to the !important below and the bar would stay
       at zero for ever while the clock ticked on top of it.
       No transition on this one, deliberately: paint() retargets it every
       100ms, so the transition never gets to finish and Chrome pins the bar
       at its start value -- measured at a constant 1.86px while the fill
       climbed from 2% to 100%. Ten updates a second needs no easing. */
    width: var(--art-fill, 0%) !important;
    background: linear-gradient(90deg, var(--grad-1), var(--grad-2)) !important;
    border-radius: var(--pill) !important; }
.art-cloud-hud.running .art-cloud-hud-time { color: var(--accent) !important; }
.art-cloud-hud.done .art-cloud-hud-time { color: var(--ok) !important; }
.art-cloud-hud.err .art-cloud-hud-time { color: var(--danger) !important; }
/* The final reading stays -- the extension keeps #elapsed for the same reason --
   but the bar collapses afterwards so the button row never grows a second line.
   The delay lets the fill reach 100% before the track folds away. */
.art-cloud-hud.done .art-cloud-hud-track,
.art-cloud-hud.err .art-cloud-hud-track {
    height: 0 !important; opacity: 0 !important; border-width: 0 !important;
    transition: height 240ms ease 400ms, opacity 240ms ease 400ms, border-width 240ms ease 400ms !important;
}

/* viewfinder sits above the preview image */
.art-viewfinder .art-vf-corner, .art-viewfinder .art-vf-grid { z-index: 3 !important; }

/* ---------- prompt + HUD ---------- */
.art-prompt-main textarea { font-size: 14px !important; line-height: 1.6 !important; min-height: 110px !important; }
.art-hud { display: flex !important; gap: 8px 14px !important; flex-wrap: wrap !important; align-items: center !important;
    font-size: 11px !important; color: var(--muted) !important; margin-top: 10px !important;
    background: var(--surface-2) !important; border: 1px solid var(--line-soft) !important;
    border-radius: var(--r-md) !important; padding: 7px 12px !important; }
.art-hud b { color: var(--text) !important; font-family: var(--mono) !important; }
.art-hud .ok { color: var(--ok) !important; }
.art-hud .warn { color: var(--amber) !important; }
.art-hud-hint { margin-left: auto !important; opacity: 0.6 !important; font-family: var(--mono) !important; }

/* ---------- sticky action bar ---------- */
.art-actionbar {
    position: sticky !important; bottom: 12px !important; z-index: 50 !important;
    display: flex !important; gap: 10px !important; align-items: center !important;
    background: var(--bar) !important; border: 1px solid var(--panel-border) !important;
    border-radius: var(--pill) !important; padding: 10px 12px !important;
    backdrop-filter: blur(var(--panel-blur)) saturate(var(--glass-sat)) !important;
    -webkit-backdrop-filter: blur(var(--panel-blur)) saturate(var(--glass-sat)) !important;
    box-shadow: 0 10px 32px var(--shadow), 0 0 24px var(--glow-1) !important;
}
.art-actionbar .art-generate-btn { flex: 1 1 auto !important; }
.art-hotkeys { font-size: 11px !important; color: var(--faint) !important; white-space: nowrap !important; padding-right: 6px !important; }

/* Status lines.
   The handlers used to inline #F87171 / #FBBF24 hexes into their HTML, which
   bypassed theming entirely (a warning stayed orange in the porcelain theme).
   These classes keep the tone in CSS so every theme re-colours them. */
.art-notice-error, .art-notice-warn {
    font-size: 12.5px !important; line-height: 1.5 !important; padding: 7px 12px !important;
    border-radius: 0 var(--r-sm) var(--r-sm) 0 !important; border-left: 2px solid transparent !important;
}
.art-notice-error { color: var(--danger) !important; background: var(--danger-soft) !important;
    border-left-color: var(--danger-border) !important; }
.art-notice-warn { color: var(--amber) !important; background: var(--inset-bg) !important;
    border-left-color: var(--amber) !important; }
/* Informational and positive variants of the same notice shape: the cloud
   "where" switch uses all three to say what happens to the key. */
.art-notice-info { color: var(--muted) !important; background: var(--inset-bg) !important;
    border-left-color: var(--panel-border) !important; }
.art-notice-ok { color: var(--ok) !important; background: var(--inset-bg) !important;
    border-left-color: var(--ok) !important; }
.art-cloud-actions { margin-top: 6px !important; }
.art-notice-warn-inline { color: var(--amber) !important; font-weight: 600 !important; }
.art-notice-error-inline { color: var(--danger) !important; font-weight: 600 !important; }
/* Rating bars are semantic, not decorative: the safe/questionable/explicit
   tiers map onto the status tokens so they re-tint with the theme while
   keeping their relative seriousness. */
.art-rating-pg { background: var(--ok) !important; }
.art-rating-pg13 { background: var(--amber) !important; }
.art-rating-pg16 { background: color-mix(in srgb, var(--amber) 70%, var(--danger)) !important; }
.art-rating-r, .art-rating-r5 { background: var(--danger) !important; }

/* ---------- buttons ---------- */
/* Gradio stretches a Button that is a direct child of a Column to the full
   column width; a small secondary action then reads as a banner. */
.art-inline-btn, .art-inline-btn button {
    width: auto !important; display: inline-flex !important; align-items: center !important;
    justify-content: center !important; align-self: flex-start !important;
}
#root button { font-weight: 600 !important; border-radius: 12px !important; transition: transform 0.15s, box-shadow 0.15s, background 0.15s, filter 0.15s !important; }
#root button:hover:not(:disabled) { transform: translateY(-1px) !important; }
#root button:active:not(:disabled) { transform: translateY(0) scale(0.98) !important; }
.art-generate-btn button {
    width: 100% !important; border: none !important; border-radius: var(--pill) !important;
    background: linear-gradient(135deg, var(--grad-1), var(--accent) 52%, var(--grad-2)) !important;
    color: var(--accent-ink) !important; font-weight: 700 !important; font-size: 14px !important; letter-spacing: 0.2px !important;
    padding: 11px 22px !important;
    /* matte: a soft, tight shadow instead of the palette's 24px accent glow */
    box-shadow: 0 2px 8px color-mix(in srgb, var(--btn-shadow) 55%, transparent) !important;
}
.art-generate-btn button:hover:not(:disabled) {
    filter: brightness(1.04) !important;
    box-shadow: 0 3px 12px color-mix(in srgb, var(--btn-shadow) 70%, transparent) !important;
}
.art-copy-btn { min-width: 36px !important; width: 36px !important; height: 34px !important;
    border-radius: var(--r-sm) !important; border: 1px solid var(--panel-border) !important; background: var(--surface-2) !important;
    display: flex !important; align-items: center !important; justify-content: center !important; }
.art-copy-btn:hover { border-color: var(--chip-border) !important; background: var(--accent-soft) !important; }

/* ---------- fields, radios, chips, pills ---------- */
.gradio-textbox textarea, .gradio-textbox input, .gradio-number input, input[type="text"] {
    background: var(--input) !important; border: 1px solid var(--input-border) !important;
    border-radius: var(--r-md) !important; color: var(--text) !important;
}
.gradio-textbox textarea:focus, .gradio-textbox input:focus {
    border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--focus-ring) !important;
}
input[type="radio"], input[type="checkbox"] { accent-color: var(--accent) !important; }
.art-radio-group label, .art-chip-group label {
    display: inline-flex !important; align-items: center !important;
    border: 1px solid var(--panel-border) !important; background: var(--surface-2) !important;
    border-radius: var(--pill) !important; padding: 6px 14px !important;
    font-size: 12px !important; cursor: pointer !important; transition: all 0.15s !important; user-select: none !important;
}
.art-radio-group label:hover, .art-chip-group label:hover { border-color: var(--chip-border) !important; }
.art-radio-group label.selected, .art-chip-group label:has(input:checked) {
    border-color: var(--chip-border) !important; background: var(--accent-soft) !important; color: var(--chip-ink) !important;
}
.art-chip-group { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; }

/* The tagger Mode picker is six chips whose labels run to 48 characters
   ("Krea Lite (fast, smart pose/emotion/composition)"). Left to flex-wrap in a
   482px column they did not so much wrap as queue: five rows, ~200px of
   vertical space, with every chip a different width. A grid lines them up into
   equal columns instead. auto-fit + minmax collapses to a single full-width
   column below ~430px rather than overflowing the panel, and the labels wrap
   inside their cell so the text is never truncated.

   Scoped to #art-panel-tagger-mode on purpose: the other chip-groups (cloud
   provider, control kind) hold two-to-four short labels that read better as one
   ragged row than as a half-empty grid. */
#art-panel-tagger-mode > :has(> label) {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important;
    gap: 8px !important; width: 100% !important; box-sizing: border-box !important;
}
#art-panel-tagger-mode label { white-space: normal !important; overflow-wrap: anywhere !important; }

/* ---------- categories grid ----------
   Gradio wraps every gr.Column's children in a div.form, so the grid must be
   applied to that inner form. Targeting .art-cat-grid itself does nothing:
   it has a single child, and the 28 checkboxes were stacking as 28 rows. */
.art-cat-search { margin-bottom: 4px !important; }
.art-cat-search input { border-radius: var(--pill) !important; font-size: 12px !important; }
.art-cat-grid { margin-top: 10px !important; }
.art-cat-grid > .form {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(198px, 1fr)) !important;
    gap: 8px !important; align-items: stretch !important;
}
.art-cat-btn { margin: 0 !important; min-width: 0 !important; }
/* Clamp the per-category description: unclamped it made each pill 126-179px
   tall and pushed the card past 4200px. Two lines, then an ellipsis. */
.art-cat-btn .info-text, .art-cat-btn .info {
    display: -webkit-box !important; -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important; line-clamp: 2 !important; overflow: hidden !important;
    font-size: 11px !important; line-height: 1.4 !important; color: var(--muted) !important;
    text-align: left !important; margin-top: 4px !important; padding: 0 2px !important;
    border: none !important; background: none !important;
}
.art-cat-btn:has(input:checked) .info-text { color: var(--muted) !important; }
.art-cat-btn label {
    display: flex !important; align-items: center !important; justify-content: center !important; gap: 5px !important;
    background: var(--surface-2) !important; border: 1px solid var(--panel-border) !important;
    border-radius: var(--pill) !important; padding: 8px 10px !important;
    font-size: 11.5px !important; font-weight: 500 !important; color: var(--muted) !important;
    cursor: pointer !important; transition: all 0.15s !important; text-align: center !important; user-select: none !important;
    min-height: 36px !important;
}
.art-cat-btn label:hover { border-color: var(--chip-border) !important; color: var(--text) !important; }
.art-cat-btn input[type="checkbox"] { display: none !important; }
.art-cat-btn label > span:first-child { display: none !important; }
.art-cat-btn:has(input:checked) label {
    background: var(--accent-soft) !important; border-color: var(--chip-border) !important;
    color: var(--chip-ink) !important; box-shadow: 0 0 12px var(--focus-ring) !important;
}

/* ---------- presets ---------- */
.art-preset-group-label { font-size: 12px !important; font-weight: 600 !important; color: var(--text) !important; margin: 12px 0 8px !important; }
.art-preset-toggle .gr-block { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; }
.art-preset-toggle label {
    display: inline-flex !important; align-items: center !important;
    border: 1px solid var(--panel-border) !important; background: var(--surface-2) !important;
    border-radius: var(--pill) !important; padding: 6px 14px !important;
    font-size: 12px !important; cursor: pointer !important; transition: all 0.15s !important; user-select: none !important; white-space: nowrap !important;
}
.art-preset-toggle label:hover { border-color: var(--chip-border) !important; }
.art-preset-toggle label:has(input:checked) {
    border-color: var(--chip-border) !important; background: var(--accent-soft) !important; color: var(--chip-ink) !important;
}

/* ---------- accordions ---------- */
.gradio-accordion { border: 1px solid var(--panel-border) !important; border-radius: var(--r-md) !important; background: transparent !important; }
.gradio-accordion > .label-wrap, .gradio-accordion > button, .gradio-accordion > summary {
    color: var(--text) !important; font-weight: 600 !important; font-size: 12.5px !important; padding: 10px 14px !important; cursor: pointer !important;
}
.gradio-accordion > div:not(.label-wrap) { padding: 4px 14px 14px !important; }

/* ---------- slide-down panels ---------- */
.art-slide-panel { overflow: hidden !important; max-height: 0 !important; opacity: 0 !important; padding: 0 0 0 12px !important; margin: 0 !important;
    border-left: 2px solid var(--chip-border) !important;
    transition: max-height 0.25s ease-out, opacity 0.2s ease-out, padding 0.2s !important; }
.art-slide-open { max-height: 2200px !important; opacity: 1 !important; padding: 8px 0 8px 12px !important; margin-top: 8px !important; }
.art-slide-trigger {
    display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important;
    width: 100% !important; min-height: 34px !important; box-sizing: border-box !important;
    padding: 8px 14px !important; border: 1px solid var(--panel-border) !important;
    background: var(--surface-2) !important; border-radius: var(--r-md) !important;
    color: var(--muted) !important; font-size: 12.5px !important; font-weight: 600 !important;
    line-height: 1.2 !important; cursor: pointer !important; text-align: left !important;
    transition: all 0.15s !important;
}
.art-slide-trigger:hover { border-color: var(--chip-border) !important; color: var(--text) !important; }
.art-slide-trigger.art-slide-active {
    border-color: var(--chip-border) !important; color: var(--chip-ink) !important;
    background: var(--accent-soft) !important;
}

/* ---------- results ---------- */
.art-result-toolbar { display: flex !important; gap: 8px !important; flex-wrap: wrap !important; margin: 4px 0 12px !important; }
.art-result-toolbar button { border-radius: var(--pill) !important; font-size: 11.5px !important; font-weight: 700 !important; }
.art-result-card { padding: 12px 14px !important; margin: 8px 0 !important; }
.art-result-card:hover { border-color: var(--chip-border) !important; }
.art-result-num { background: var(--accent-soft) !important; color: var(--chip-ink) !important; font-weight: 700 !important;
    font-size: 11px !important; padding: 4px 10px !important; border-radius: var(--r-sm) !important;
    border: 1px solid var(--chip-border) !important; text-align: center !important; }
.art-result-text, .art-neg-text { background: transparent !important; border: none !important;
    font-family: var(--mono) !important; color: var(--text) !important; padding: 4px 0 !important; }
.art-result-text { font-size: 12.5px !important; line-height: 1.6 !important; }
.art-neg-text { font-size: 11px !important; line-height: 1.5 !important; color: var(--muted) !important; }
.art-history-select label { border-radius: var(--r-md) !important; }
.art-strip-row { gap: 8px 16px !important; flex-wrap: wrap !important; }

/* ---------- info, suggest, tooltips ---------- */
.art-info-text, .gradio-container .info {
    color: var(--muted) !important; font-size: 11.5px !important; line-height: 1.5 !important;
    border-left: 2px solid var(--chip-border) !important; background: var(--surface-2) !important;
    padding: 7px 12px !important; border-radius: 0 var(--r-sm) var(--r-sm) 0 !important; margin-top: 8px !important;
}
/* Per-field help text. Gradio renders it in its own colour/size, which made
   field descriptions read as a different kind of text from the panel notes
   above them. One line-height and colour for all of them. */
.gradio-container label + .info, .gradio-container .info:not(.art-info-text) {
    color: var(--muted) !important; font-size: 11px !important; line-height: 1.45 !important;
    text-align: left !important; margin-top: 4px !important; padding: 0 2px !important;
    background: none !important; border: none !important;
}
.art-suggest-box { padding: 12px 16px !important; }
.art-suggest-title { font-size: 12.5px !important; font-weight: 700 !important; color: var(--text) !important; margin-bottom: 8px !important; }
.art-suggest-box ul { margin: 0 !important; padding-left: 18px !important; }
.art-suggest-item { font-size: 12.5px !important; color: var(--muted) !important; line-height: 1.6 !important; padding: 2px 0 !important; }
.art-tooltip { position: relative !important; }
.art-tooltip-text {
    visibility: hidden !important; opacity: 0 !important; position: absolute !important; z-index: 9999 !important;
    padding: 4px 10px !important; background: var(--panel) !important; color: var(--text) !important;
    font-size: 10.5px !important; font-weight: 600 !important; border-radius: var(--r-sm) !important;
    border: 1px solid var(--panel-border) !important; white-space: nowrap !important; pointer-events: none !important;
    bottom: 110% !important; left: 50% !important; transform: translateX(-50%) !important;
}
.art-tooltip:hover .art-tooltip-text { visibility: visible !important; opacity: 1 !important; }

/* ---------- tabs ----------
   .tabs is a block box; the buttons live in an inner .tab-container. Setting
   `gap` on .tabs did nothing (gap needs flex/grid), which is why the tab row
   came out cramped.
   The button rule is scoped to that container on purpose: every component in
   the app is nested somewhere inside .tabs, so a bare `.tabs button` also hit
   accordions, slide triggers and the action bar and left them at mismatched
   heights. The visually-hidden container is an a11y duplicate of the same
   buttons and is excluded so only the real row is styled. */
.tabs { border-bottom: 1px solid var(--line-soft) !important; padding-bottom: 8px !important; margin-bottom: 4px !important; }
/* Gradio sizes .tab-container at 32px while the pill rule below gives the
   buttons 34px, and `overflow-x: hidden` forces `overflow-y` off `visible`, so
   the two-pixel excess was simply cut: the selected pill lost a pixel off its
   top and its bottom, flattening the radius. Give the row its own height and
   stop it clipping. The min-height, not height:auto, so a future Gradio value
   can still grow the row but never shrink it under its own buttons. */
.tabs .tab-container { display: flex !important; flex-wrap: wrap !important; gap: 6px !important;
    align-items: center !important; min-height: 34px !important; overflow: visible !important; }
.tabs .tab-container:not(.visually-hidden) > button {
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    height: 34px !important; min-height: 34px !important; box-sizing: border-box !important;
    border-radius: var(--pill) !important; padding: 0 18px !important;
    font-size: 12.5px !important; font-weight: 600 !important; line-height: 1 !important;
    border: 1px solid transparent !important; background: transparent !important;
    color: var(--muted) !important; white-space: nowrap !important;
}
.tabs .tab-container:not(.visually-hidden) > button:hover { color: var(--text) !important; background: var(--surface-2) !important; }
.tabs .tab-container:not(.visually-hidden) > button.selected { background: var(--accent-soft) !important; border-color: var(--chip-border) !important; color: var(--chip-ink) !important; }
.tabitem { border: none !important; padding: 4px 0 0 !important; }

/* ---------- tagger ---------- */
.art-tagger-split { gap: 12px !important; align-items: flex-start !important; }
.art-tagger-image {
    border-radius: var(--radius) !important; overflow: hidden !important;
    border: 1px solid var(--panel-border) !important; background: var(--preview-bg) !important;
}
.art-tagger-run-btn button, .art-tagger-apply-btn button {
    background: linear-gradient(135deg, var(--grad-1), var(--accent) 52%, var(--grad-2)) !important;
    border: none !important; color: var(--accent-ink) !important; font-weight: 600 !important; border-radius: var(--pill) !important;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--btn-shadow) 50%, transparent) !important;
}
.art-tagger-copy-btn button { background: var(--surface-2) !important; border: 1px solid var(--panel-border) !important; color: var(--text) !important; border-radius: var(--pill) !important; }
.art-tagger-tags-box textarea { font-family: var(--mono) !important; font-size: 12px !important; line-height: 1.55 !important; }
.art-tagger-chips .wrap, .art-tagger-chips .grid { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; max-height: 260px !important; overflow-y: auto !important; padding: 4px 2px 8px !important; }
.art-tagger-chips label {
    display: inline-flex !important; align-items: center !important; gap: 6px !important;
    border: 1px solid var(--panel-border) !important; background: var(--surface-2) !important;
    border-radius: var(--pill) !important; padding: 5px 12px !important; font-size: 12px !important; cursor: pointer !important;
}
.art-tagger-chips label:hover { border-color: var(--chip-border) !important; }
.art-tagger-chips label:has(input:checked) { border-color: var(--chip-border) !important; background: var(--accent-soft) !important; color: var(--chip-ink) !important; }
/* A header is a colour tick, the label, and the number of rows below it --
   with eighteen sections stacked in one column the count is what makes the
   panel scannable; display:flex is what lets the badge park on the right. */
.art-tagger-panel-title {
    display: flex !important; align-items: center !important; gap: 8px !important;
    font-size: 12px !important; font-weight: 700 !important; color: var(--text) !important;
    margin: 14px 0 7px !important;
}
.art-tagger-panel-title::before {
    content: "" !important; flex: none !important; width: 3px !important; height: 12px !important;
    border-radius: var(--pill) !important; background: var(--accent) !important;
}
.art-tagger-count {
    margin-left: auto !important; flex: none !important; line-height: 1.5 !important;
    font-family: var(--mono) !important; font-size: 10px !important; font-weight: 600 !important;
    color: var(--muted) !important; background: var(--surface-2) !important;
    border: 1px solid var(--line-soft) !important; border-radius: var(--pill) !important;
    padding: 0 7px !important;
}
/* The panel already pads itself by 16px, so the first header of the first
   zone must not open with a top margin on top of that. */
.art-tagger-zone:first-child .art-tagger-panel-title:first-child { margin-top: 0 !important; }
/* Zones are split off by a hairline so a long result reads as three panels
   -- caption, tags, analysis -- instead of one undifferentiated column. */
.art-tagger-zone + .art-tagger-zone {
    border-top: 1px solid var(--line-soft) !important;
    margin-top: 14px !important; padding-top: 2px !important;
}
.art-tagger-rating-row { display: flex !important; align-items: center !important; gap: 8px !important; font-size: 11px !important; color: var(--muted) !important; margin-bottom: 5px !important; }
/* The tier chip used to paint --muted straight onto --ok/--amber/--danger:
   1.01-1.80:1 across all five themes (AA wants 4.5), so the PG/PG13/R labels
   were illegible in every one of them. The tone class stays on the element
   but is painted as a decorative dot instead of a background; the label sits
   on the neutral row, where --text measures 12-17:1. The `.art-tagger-panel`
   prefix is deliberate: it raises specificity above the single-class
   .art-rating-* fill rule, so the override holds whatever the source order
   and does not depend on `!important` tie-breaking. */
.art-tagger-panel .art-tagger-rating-name {
    width: 92px !important; flex: none !important; box-sizing: border-box !important;
    font-weight: 700 !important; display: inline-flex !important;
    align-items: center !important; gap: 6px !important;
    color: var(--text) !important; background: var(--surface-2) !important;
    border: 1px solid var(--line-soft) !important; border-radius: var(--pill) !important;
    padding: 1px 7px !important;
}
.art-tagger-panel .art-tagger-rating-name[class*="art-rating-"]::before {
    content: "" !important; flex: none !important; width: 8px !important; height: 8px !important;
    border-radius: 50% !important;
}
.art-tagger-panel .art-tagger-rating-name.art-rating-pg::before { background: var(--ok) !important; }
.art-tagger-panel .art-tagger-rating-name.art-rating-pg13::before { background: var(--amber) !important; }
.art-tagger-panel .art-tagger-rating-name.art-rating-pg16::before { background: color-mix(in srgb, var(--amber) 70%, var(--danger)) !important; }
.art-tagger-panel .art-tagger-rating-name.art-rating-r::before,
.art-tagger-panel .art-tagger-rating-name.art-rating-r5::before { background: var(--danger) !important; }
.art-tagger-rating-track { flex: 1 !important; height: 6px !important; background: var(--surface-2) !important; border: 1px solid var(--panel-border) !important; border-radius: var(--pill) !important; overflow: hidden !important; }
.art-tagger-rating-fill { display: block !important; height: 100% !important; border-radius: var(--pill) !important; }
.art-tagger-rating-pct { color: var(--faint) !important; font-family: var(--mono) !important; }
.art-tagger-badges { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; }
.art-tagger-char-badge { background: var(--accent-soft) !important; border: 1px solid var(--chip-border) !important;
    border-radius: var(--pill) !important; padding: 3px 12px !important; font-size: 12px !important; color: var(--text) !important; }
.art-tagger-badge-pct { color: var(--accent-2) !important; font-size: 10px !important; font-family: var(--mono) !important; }
.art-tagger-gen-list { display: flex !important; flex-direction: column !important; gap: 3px !important; }
.art-tagger-gen-row { display: flex !important; align-items: center !important; gap: 8px !important; font-size: 11.5px !important; color: var(--muted) !important; }
/* The tag name is the payload of the row and the bar already carries the
   rank, so the name can afford to be primary rather than the muted grey it
   used to inherit from the row. */
.art-tagger-gen-name { color: var(--text) !important; font-weight: 500 !important; }
.art-tagger-gen-track { width: 90px !important; height: 5px !important; background: var(--surface-2) !important; border: 1px solid var(--panel-border) !important; border-radius: var(--pill) !important; overflow: hidden !important; flex: none !important; }
.art-tagger-gen-fill { display: block !important; height: 100% !important; background: linear-gradient(90deg, var(--grad-1), var(--accent)) !important; }
/* The caption is the panel's only prose and the only output meant to be
   pasted as-is, so it is the one card with an accent edge and body-sized
   text. It used to share this very rule with the tag metadata below it --
   which is exactly how the panel ended up reading as eighteen interchangeable
   grey blocks. */
.art-tagger-caption {
    background: var(--surface-2) !important; border: 1px solid var(--line-soft) !important;
    border-left: 3px solid var(--accent) !important; border-radius: var(--r-md) !important;
    padding: 11px 13px 12px !important;
}
.art-tagger-caption-label {
    font-size: 10.5px !important; font-weight: 700 !important; letter-spacing: 0.7px !important;
    text-transform: uppercase !important; color: var(--muted) !important; margin-bottom: 5px !important;
}
.art-tagger-nl-caption {
    font-size: 13.5px !important; line-height: 1.62 !important; color: var(--text) !important;
    white-space: pre-wrap !important; overflow-wrap: anywhere !important;
}
/* One rule styles every tag section. Four of them (camera, action,
   face-retag, caption-bridge) previously had no CSS at all and rendered as
   bare text beside their six boxed neighbours. */
.art-tagger-taglist {
    display: flex !important; flex-wrap: wrap !important; gap: 5px !important; margin-top: 6px !important;
}
.art-tagger-tag {
    display: inline-flex !important; align-items: center !important; max-width: 100% !important;
    background: var(--surface-2) !important; border: 1px solid var(--line-soft) !important;
    border-radius: var(--pill) !important; padding: 3px 9px !important;
    font-size: 11.5px !important; line-height: 1.45 !important; color: var(--muted) !important;
}
.art-tagger-note { margin-top: 8px !important; font-size: 11.5px !important; }
/* Character identity card (1.1.0): WHO the model certified. Tokens only — a
   colour literal here ignores every theme block and a test rejects it. */
.art-tagger-identity { font-size: 12px !important; color: var(--text) !important; font-weight: 500 !important; }
.art-tagger-identity strong { font-weight: 700 !important; color: var(--accent) !important; }
.art-tagger-pose-people { font-size: 11.5px !important; color: var(--text) !important; font-weight: 600 !important; }
.art-tagger-control-img { border-radius: var(--r-md) !important; overflow: hidden !important; border: 1px solid var(--panel-border) !important; }
.art-batch-wrap { max-height: 520px !important; overflow-y: auto !important; padding: 4px 2px !important; }
.art-batch-actions { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; margin-bottom: 10px !important; }
.art-batch-count { font-size: 11.5px !important; color: var(--muted) !important; }
.art-batch-copyall, .art-batch-copy { border: 1px solid var(--panel-border) !important; background: var(--surface-2) !important;
    color: var(--muted) !important; border-radius: var(--pill) !important; cursor: pointer !important; font-size: 11px !important; padding: 4px 12px !important; }
.art-batch-copyall:hover, .art-batch-copy:hover { border-color: var(--chip-border) !important; color: var(--chip-ink) !important; }
.art-batch-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important; gap: 12px !important; }
.art-batch-card { background: var(--panel) !important; border: 1px solid var(--panel-border) !important; border-radius: var(--r-md) !important; padding: 10px !important; display: flex !important; flex-direction: column !important; gap: 8px !important; }
.art-batch-thumb { width: 100% !important; height: 160px !important; object-fit: cover !important; border-radius: var(--r-sm) !important; }
.art-batch-card-head { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; }
.art-batch-card-name { font-size: 11.5px !important; font-weight: 600 !important; color: var(--text) !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
.art-batch-card-tags { font-size: 11px !important; color: var(--muted) !important; max-height: 90px !important; overflow-y: auto !important;
    background: var(--surface-2) !important; border: 1px solid var(--line-soft) !important; border-radius: var(--r-sm) !important; padding: 7px 9px !important; line-height: 1.5 !important; }
.art-batch-fullrow, .art-dataset-fullrow { margin-top: 12px !important; }

/* ---------- artist / misc ---------- */
.art-artist-preview { background: var(--panel) !important; border: 1px solid var(--panel-border) !important; border-radius: var(--r-md) !important; padding: 12px 16px !important; margin-top: 12px !important; }
.art-artist-preview-title { font-weight: 600 !important; font-size: 13px !important; color: var(--text) !important; margin-bottom: 6px !important; }
.art-artist-preview-empty { color: var(--muted) !important; font-size: 12px !important; font-style: italic !important; }
.art-artist-link { display: inline-flex !important; align-items: center !important; gap: 4px !important; border: 1px solid var(--panel-border) !important;
    border-radius: var(--r-sm) !important; padding: 4px 10px !important; background: var(--surface-2) !important;
    color: var(--text) !important; text-decoration: none !important; font-size: 11px !important; font-weight: 600 !important; }
[role="listbox"], ul.options, [data-testid="dropdown-options"] {
    z-index: 999999 !important; background: var(--input) !important;
    border: 1px solid var(--chip-border) !important; border-radius: 10px !important;
    box-shadow: 0 8px 32px var(--shadow) !important;
}
[role="option"] { padding: 8px 14px !important; font-size: 13px !important; color: var(--text) !important; cursor: pointer !important; }
[role="option"]:hover { background: var(--accent-soft) !important; color: var(--chip-ink) !important; }
.gradio-dropdown, .gradio-slider, .gradio-radio, .gradio-checkboxgroup, .gradio-accordion { border-radius: var(--r-md) !important; }
input[type="range"]::-webkit-slider-runnable-track { height: 4px !important; background: var(--track) !important; border-radius: 2px !important; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none !important; width: 16px !important; height: 16px !important; border-radius: 50% !important;
    background: linear-gradient(135deg, var(--grad-1), var(--grad-2)) !important; cursor: pointer !important; margin-top: -6px !important; }

/* ---------- Gradio variable bridge ----------
   Gradio bakes its own palette into ~40 CSS variables (see theme/art_theme.py)
   and paints most framework widgets from those, not from our classes. Left
   alone, a theme switch only restyles our own elements and the app turns into
   a mix -- e.g. card titles stayed #CBD5E1 (light slate), which is unreadable
   on the cream theme's light panel.
   Declared on body and the theme wrapper, NOT on :root, so that var(--text)
   resolves against the *active* theme instead of the :root default.

   The `color` property itself is set too: Gradio 6 paints it as a literal on
   body.dark (#E2E8F0) and .gradio-container (#CBD5E1), so overriding only the
   variables leaves those two hard-coded values in place. */
body, body.dark, body .dark, body .gradio-container {
    color: var(--text) !important;
    --body-background-fill: var(--bg) !important;
    --body-background-fill-dark: var(--bg) !important;
    --body-text-color: var(--text) !important;
    --body-text-color-dark: var(--text) !important;
    --body-text-color-subdued: var(--muted) !important;
    --body-text-color-subdued-dark: var(--muted) !important;
    --block-title-text-color: var(--text) !important;
    --block-title-text-color-dark: var(--text) !important;
    --block-label-text-color: var(--muted) !important;
    --block-label-text-color-dark: var(--muted) !important;
    /* ...and their background counterparts. Gradio's default sets these to a
       solid cyan (#0891B2), which painted a bright teal pill behind every
       field label that has an info tooltip -- "General Threshold",
       "Tag format", "Max images" and so on. Labels stay flat. */
    --block-title-background-fill: transparent !important;
    --block-title-background-fill-dark: transparent !important;
    --block-label-background-fill: transparent !important;
    --block-label-background-fill-dark: transparent !important;
    --checkbox-label-background-fill-selected: var(--accent-soft) !important;
    --stat-background-fill: var(--surface-2) !important;
    --button-primary-background-fill: var(--accent) !important;
    --button-primary-background-fill-hover: var(--accent) !important;
    --button-primary-text-color: var(--accent-ink) !important;
    --button-primary-text-color-dark: var(--accent-ink) !important;
    --block-background-fill: var(--panel) !important;
    --block-background-fill-dark: var(--panel) !important;
    --block-border-color: var(--panel-border) !important;
    --block-border-color-dark: var(--panel-border) !important;
    --input-background-fill: var(--input) !important;
    --input-background-fill-dark: var(--input) !important;
    --input-border-color: var(--input-border) !important;
    --input-border-color-dark: var(--input-border) !important;
    --background-fill-primary: var(--surface-2) !important;
    --background-fill-primary-dark: var(--surface-2) !important;
    --background-fill-secondary: var(--surface-2) !important;
    --background-fill-secondary-dark: var(--surface-2) !important;
    --border-color-primary: var(--panel-border) !important;
    --border-color-primary-dark: var(--panel-border) !important;
    --color-accent: var(--accent) !important;
    --color-accent-dark: var(--accent) !important;
    --color-accent-soft: var(--accent-soft) !important;
    --table-border-color: var(--panel-border) !important;
    --table-even-background-fill: var(--panel) !important;
    --table-odd-background-fill: var(--surface-2) !important;
}

/* ---------- responsive ---------- */
@media (max-width: 1023px) {
    .gradio-container { padding: 12px 12px 40px !important; }
    .art-title { font-size: 22px !important; }
    .art-actionbar { bottom: 8px !important; padding: 8px 10px !important; }
    .art-hotkeys { display: none !important; }
    #root .art-result-card { flex-wrap: wrap !important; }
    .art-cat-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)) !important; }
    .art-cat-btn label { font-size: 10px !important; min-height: 34px !important; }
}

/* Header wrapping. Below 860px the brand (313px floor) and the switcher column
   (640px) genuinely cannot share the non-wrapping row, so the switchers drop to
   their own full-width row. The breakpoint is 860 rather than 1023 on purpose:
   at 1000px both still fit on one line, and wrapping there cost 100px of
   sticky header for nothing. */
@media (max-width: 860px) {
    .art-topbar { flex-wrap: wrap !important; row-gap: 8px !important; }
    .art-head-side { min-width: 100% !important; width: 100% !important; }
    /* The two clusters are flex siblings sharing the row equally (1 1 0), which
       left the theme picker 317px -- too narrow for five chips. Give it the
       full row and let the language picker share the line below it. */
    .art-controls { flex-wrap: wrap !important; }
    .art-theme-btn { flex: 1 1 100% !important; }
    .art-lang-btn { flex: 0 1 auto !important; }
    .art-theme-btn label, .art-lang-btn label { padding: 0 8px !important; font-size: 10.5px !important; }
}