:root { color-scheme: light; --paper: #ffffff; --ink: #202124; --muted: #60646c; --line: #c9cdd3; --focus: #2563eb; }
body { background: var(--paper) !important; }
main, .gradio-container, .gradio-container > .main, .gradio-container .fillable {
  width: 100% !important; max-width: 1240px !important; margin-inline: auto !important; box-sizing: border-box;
}
.gradio-container { padding: 0 clamp(16px, 4vw, 36px) !important; background: var(--paper) !important; color: var(--ink) !important; }
.gradio-container, .gradio-container * { font-family: Arial, sans-serif !important; }
.gradio-container > .main { padding: 0 !important; }
.gradio-container .form { background: transparent !important; border: 0 !important; border-radius: 0 !important; }
.gradio-container .block { background: transparent; border-color: var(--line); box-shadow: none; }
.gradio-container input:not([type="checkbox"]):not([type="radio"]), .gradio-container textarea { background: white !important; color: var(--ink) !important; }
.gradio-container ::placeholder { color: #68707b !important; opacity: 1 !important; }
.app-bar { display: flex; align-items: center; min-height: 72px; border-bottom: 1px solid #e5e7eb; margin-bottom: 8px; }
.app-bar h1 { margin: 0 !important; font-size: 20px !important; font-weight: 600; letter-spacing: -.4px; line-height: 1.4; }
#studio { gap: 32px; }
#controls { gap: 16px; padding-bottom: 8px; }
#controls .padded { padding: 0 !important; }
#controls .form { gap: 16px !important; }
#controls .details { border: 1px solid var(--line); padding: 0 !important; }
#controls .details > .label-wrap { min-height: 44px; padding: 12px !important; box-sizing: border-box; border-radius: 5px; }
#controls .details > [data-testid="accordion-content"] { padding: 0 12px 12px !important; }
#controls .details .prose p { font-size: 12px; line-height: 1.5; color: var(--muted); }
#prompt textarea { font-size: 15px; line-height: 1.6; padding: 12px; border: 1px solid var(--line) !important; border-radius: 6px; }
#controls label { font-size: 13px; }
#controls .block { border-radius: 6px; }
#shape label:has(input), #resolution label:has(input), #quality label:has(input) { min-height: 44px; min-width: 0; flex: 1; justify-content: center; padding: 10px 4px; gap: 0; background: white; border: 1px solid var(--line); border-radius: 5px; box-sizing: border-box; }
#shape label:has(input:checked), #resolution label:has(input:checked), #quality label:has(input:checked) { background: #eef0f3; border-color: #737983; color: var(--ink); }
#shape input, #resolution input, #quality input { position: absolute; opacity: 0; width: 1px; height: 1px; }
#seed-settings input[type="number"] { min-height: 44px; border: 1px solid var(--line) !important; border-radius: 5px; padding: 10px !important; }
#transparent > label { min-height: 36px; align-items: center; padding: 6px 4px !important; border-radius: 4px; }
#size-hint p, #queue-note p, #example-note p { color: var(--muted); font-size: 12px; line-height: 1.5; }
#size-hint { margin-top: -9px; }
#queue-note { text-align: center; margin-top: -8px; }
#generate { min-height: 48px; background: var(--ink) !important; border: 1px solid var(--ink) !important; color: white !important; border-radius: 6px; font-size: 14px; font-weight: 600; box-shadow: none !important; }
#generate:hover:not(:disabled) { background: #3c4047 !important; border-color: #3c4047 !important; }
#generate:active:not(:disabled) { background: #111318 !important; }
#generate:disabled { background: #e5e7eb !important; border-color: #b6bcc5 !important; color: #565c66 !important; cursor: wait; opacity: 1 !important; }
/* Draw focus inside each hit target: Gradio's image/form wrappers clip outer
   outlines. Hidden native radios receive the full visible label's ring. */
.gradio-container :is(button, a, input, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--focus) !important; outline-offset: -3px !important;
}
#shape label:has(input:focus-visible), #resolution label:has(input:focus-visible), #quality label:has(input:focus-visible),
.gradio-container label:has(input[type="checkbox"]:focus-visible) {
  outline: 3px solid var(--focus) !important; outline-offset: -3px !important;
}
#generate:focus-visible { outline-color: #93c5fd !important; }
.gradio-container button:not(:disabled):hover, .gradio-container a:hover { cursor: pointer; }
.canvas-heading { margin: 0 !important; color: var(--ink); font-size: 13px !important; line-height: 20px; font-weight: 600; }
#canvas { border: 1px solid var(--line); border-radius: 6px; background: #f5f6f8 !important; }
#canvas img { object-fit: contain !important; }
#canvas [aria-label="Empty value"] .icon { display: none; }
#canvas [aria-label="Empty value"]::after { content: "Your generated image will appear here."; text-align: center; font-size: 14px; line-height: 1.5; color: var(--muted); padding: 24px; }
#canvas-column { gap: 8px; }
#result-status p { color: var(--muted); font-size: 12px; line-height: 1.65; }
#recipe { margin-top: 4px; border-color: var(--line); border-radius: 6px; }
#recipe .empty { min-height: 50px !important; height: 50px !important; }
#recipe:has([aria-label="Empty value"]) { display: none; }
#studies { margin-top: 12px; }
#studies button { min-height: 44px; padding: 10px 15px; border: 1px solid var(--line); border-radius: 5px; background: white; color: var(--ink); font-size: 13px; }
#studies button:hover { background: #eef0f3; border-color: #737983; }
.app-footer { padding: 16px 0 24px; border-top: 1px solid #e5e7eb; font-size: 12px; color: var(--muted); line-height: 1.8; }
.app-footer a { display: inline-block; padding: 4px; margin: -4px; color: inherit !important; text-underline-offset: 3px; }
#app-header, #canvas-label, #footer { padding: 0 !important; }
#app-header .html-container, #canvas-label .html-container, #footer .html-container { padding: 0 !important; }
@media (max-width: 760px) {
  /* Reserve room for Hugging Face's floating repository badge on the direct URL. */
  #app-header .app-bar { min-height: 98px; padding-top: 40px; margin-bottom: 4px; }
  #studio { gap: 20px; }
  #controls, #canvas-column { min-width: 0 !important; flex-basis: 100% !important; }
  #canvas:not(.fullscreen) { height: 370px !important; min-height: 300px !important; }
  #studies button { flex: 1 1 140px; }
}
#canvas.fullscreen { height: 100% !important; min-height: 0 !important; border-radius: 0; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }

/* Keep image actions visible without hover and large enough for touch. */
#canvas .icon-button-wrapper, #reference .icon-button-wrapper { opacity: 1 !important; visibility: visible !important; gap: 4px; padding: 4px; }
#canvas .icon-button, #reference .icon-button, #canvas a[download] { width: 44px !important; height: 44px !important; min-width: 44px; min-height: 44px; box-sizing: border-box; border-radius: 5px; }
#canvas .icon-button, #reference .icon-button { border: 1px solid #b6bcc5 !important; background: white !important; color: #3c4047 !important; }
#canvas .icon-button > div, #reference .icon-button > div { width: 18px !important; height: 18px !important; }
#canvas .icon-button:hover, #reference .icon-button:hover { background: #eef0f3 !important; }
#canvas .image-container > button { cursor: default; }
#recipe a[download] { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }