/* Global UI components and tokens; source of truth: UI-GUIDELINES.md.
   Reuse these classes in static and generated markup. Presentation/PDF rules
   remain in styles.css. */
@layer app, ui;
@font-face {
  font-family: "Grupo100 Inter";
  src: url("/assets/fonts/inter-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
@layer ui {
  :root {
    color-scheme: light;
    --ui-font-family: "Grupo100 Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --ui-bg: #ececeb;
    --ui-surface: #fff;
    --ui-surface-subtle: #f8f8f7;
    --ui-text: #303030;
    --ui-text-muted: #5f625d;
    --ui-border: #d8d8d8;
    --ui-border-control: #767973;
    --ui-accent: #beff01;
    --ui-on-accent: #111;
    --ui-selected: #e3e5df;
    --ui-strong: #30302f;
    --ui-on-strong: #fff;
    --ui-danger: #b42318;
    --ui-danger-bg: #fff4f2;
    --ui-success: #27613d;
    --ui-success-bg: #edf5ef;
    --ui-warning: #805400;
    --ui-warning-bg: #fff4d6;
    --app-bg: var(--ui-bg);
    --panel-bg: var(--ui-surface);
    --ink: var(--ui-text);
    --muted: var(--ui-text-muted);
    --line: var(--ui-border);
    --ui-font-size-xs: 12px;
    --ui-font-size-sm: 13px;
    --ui-font-size-md: 14px;
    --ui-control-height-compact: 36px;
    --ui-control-height-default: 36px;
    --ui-action-height-default: 36px;
    /* Centred pages (home, proposals list, libraries) and the narrower admin. */
    --ui-page-width: 2000px;
    --ui-admin-width: 1400px;
    font-family: var(--ui-font-family);
    color: var(--ui-text);
    background: var(--ui-bg);
  }
  body { font: 400 14px/1.45 var(--ui-font-family); color: var(--ui-text); background: var(--ui-bg); }
  /* These UI element selectors intentionally exclude proposal content and font specimens. */
  :where(button, input, select, textarea) { font-family: var(--ui-font-family); }
  :where(h1):not(.proposal-page *) { font-size: 24px; line-height: 1.25; font-weight: 600; letter-spacing: -.025em; }
  :where(.form-section h2, .section-heading h2, .admin-panel h2, .layout-panel-heading h2, .layout-selection-heading h2) {
    font-size: 16px; line-height: 1.375; font-weight: 600; letter-spacing: 0; text-transform: none;
  }
  :where(.tool-card h3, .library-card h2, .library-card h3) { font-size: 14px; line-height: 1.45; font-weight: 500; }
  /* Dashboard cards: section titles stay h2, card titles are bold h3. */
  .tool-card h3 { font-weight: 700; }
  :where(label):not(.proposal-page *) { font-size: 12px; line-height: 1.35; font-weight: 500; color: var(--ui-text); }
  :where(input, select, textarea):not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="hidden"]) {
    min-width: 0; max-width: 100%; min-height: 36px; padding: 8px 10px;
    border: 1px solid var(--ui-border-control); border-radius: 6px;
    color: var(--ui-text); background: var(--ui-surface);
    font-size: 14px; font-weight: 400; line-height: 1.35;
  }
  :where(button):not(.library-tile, .item-select, .studio-step-toggle, .proposal-page *) { font-weight: 500; }
  textarea { resize: vertical; }
  input::placeholder, textarea::placeholder { color: var(--ui-text-muted); opacity: 1; }
  input[type="checkbox"], input[type="radio"] { width: 16px; height: 16px; min-height: 0; margin: 0; flex: 0 0 auto; accent-color: var(--ui-text); }
  input[type="range"] { accent-color: var(--ui-text); }
  :where(strong, b):not(.proposal-page *, .font-detail-preview *) { font-weight: 600; }
  :where(.library-tile > strong, .proposal-library-name-copy > strong, .item-select > strong) { font-size: 14px; line-height: 20px; font-weight: 500; }
  .layout-source-card-copy strong { font-size: 13px; line-height: 18px; font-weight: 500; }
  .layout-source-card-copy span { font-size: 12px; font-weight: 400; }
  .cs-check { display: flex; align-items: center; gap: 8px; }
  /* Shared file control (ui.js): the native input stays for handlers, forms
     and tests but is visually hidden; the soft button and the chosen names
     are what the user sees. */
  .ui-file-input {
    position: absolute; width: 1px; height: 1px; min-height: 0; margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; opacity: 0;
  }
  .ui-file-control { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
  .ui-file-name { min-width: 0; overflow: hidden; color: var(--ui-text-muted); font-size: 12px; font-weight: 400; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
  .ui-file-name:empty { display: none; }
  /* A field whose control is a row of buttons (file, phone, library). The
     buttons fill each row, as in the Layout Studio inspector. */
  .ui-field { display: grid; gap: 5px; min-width: 0; }
  .ui-field-label { display: block; margin: 0; color: var(--ui-text); font-size: 12px; line-height: 1.35; font-weight: 500; }
  .ui-upload-actions { display: flex; flex-wrap: wrap; gap: 6px; }
  .ui-upload-actions > * { flex: 1 1 auto; }
  /* Sidebar rhythm shared with the Layout Studio inspector: 5 px between a
     label and its control, 12 px between fields. */
  .control-panel label { gap: 5px; }
  :where(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--ui-text); outline-offset: 3px;
  }
  :where(.primary-button, .secondary-button, .back-link, .danger-button,
    .destructive-confirm-button, .destructive-action-button, .icon-button, .session-row button) {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 36px; padding: 8px 12px; border: 1px solid var(--ui-border-control); border-radius: 6px;
    font-size: 13px; font-weight: 500; line-height: 18px; text-decoration: none;
    color: var(--ui-text); background: var(--ui-surface); cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
  }
  :where(.primary-button, .phone-upload-page .action.primary) {
    background: var(--ui-accent); color: var(--ui-on-accent); border-color: var(--ui-accent);
  }
  :where(.back-link) { background: transparent; border-color: transparent; }
  :where(.session-row button) { background: var(--ui-selected); border-color: var(--ui-border); }
  /* Composable surface: secondary-button ui-soft-button for workflow actions;
     ui-tool-button ui-soft-button for compact immediate commands. */
  .ui-soft-button { background: var(--ui-selected); border-color: var(--ui-border); }
  .ui-soft-button:hover:not(:disabled) { border-color: var(--ui-border-control); }
  :where(.danger-button, .destructive-confirm-button, .destructive-action-button) { background: var(--ui-danger-bg); color: var(--ui-danger); border-color: var(--ui-danger); }
  .destructive-confirm-button { background: var(--ui-danger); color: #fff; }
  :where(.primary-button, .secondary-button, .back-link, .session-row button):hover:not(:disabled) {
    background: var(--ui-selected); color: var(--ui-text); border-color: var(--ui-border-control);
  }
  :where(.primary-button):hover:not(:disabled) { background: #ace600; color: var(--ui-on-accent); border-color: #ace600; }
  :where(button, input, select, textarea):disabled { cursor: not-allowed; opacity: .5; }
  /* Tools change the current view/mode/selection, not the document's main workflow. */
  :where(.ui-tool-button, .cs-mode-row button, .cs-brush-row button, .crop-tool-row button, .admin-category-order button, .zone-tool-row button, .zone-brush-controls button, .image-view-tabs button,
    [data-appearance-zone-tool], [data-zone-tool], [data-asset-picker-kind], [data-compare-action],
    [data-layout-mode], [data-shape-tool], .layout-selection-actions button,
    .concept-selection-actions button, .image-page-actions button, .item-card-actions button) {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-width: 32px; min-height: 32px; padding: 6px 8px; border: 1px solid transparent; border-radius: 6px;
    background: transparent; color: var(--ui-text); font-size: 12px; font-weight: 500; line-height: 16px;
    cursor: pointer;
  }
  :where(.ui-tool-button, .cs-mode-row button, .cs-brush-row button, .crop-tool-row button, .admin-category-order button, .zone-tool-row button, .zone-brush-controls button, .image-view-tabs button,
    [data-appearance-zone-tool], [data-zone-tool], [data-asset-picker-kind], [data-compare-action],
    [data-layout-mode], [data-shape-tool], .layout-selection-actions button,
    .concept-selection-actions button, .image-page-actions button, .item-card-actions button):hover:not(:disabled) {
    background: var(--ui-surface-subtle); border-color: var(--ui-border);
  }
  :where(.cs-active, .zone-tool-active, .crop-tool-active, .ui-tool-button[aria-pressed="true"], .image-view-tabs .active, .ui-tool-button.active,
    [data-appearance-zone-tool][aria-pressed="true"], [data-zone-tool][aria-pressed="true"],
    [data-asset-picker-kind][aria-pressed="true"], [data-layout-mode][aria-pressed="true"], [data-shape-tool][aria-pressed="true"]) {
    color: var(--ui-text); background: var(--ui-selected); border-color: var(--ui-border-control); font-weight: 500;
  }
  :where(.ui-tool-button, .cs-mode-row button, .image-view-tabs button, [data-shape-tool]) svg { width: 16px; height: 16px; }
  /* A standalone tool command must read as a button before hover. Soft
     actions retain their fill; pressed toggles also get a distinct outline. */
  .ui-tool-button { border-color: var(--ui-border-control); }
  .ui-tool-button[aria-pressed="true"] {
    background: var(--ui-selected); border-color: var(--ui-text);
    box-shadow: inset 0 0 0 1px var(--ui-text);
  }
  .ui-tool-button.destructive-action-button {
    color: var(--ui-danger); background: var(--ui-danger-bg); border-color: var(--ui-danger);
  }
  /* Layout elements: tabs navigate panels; image rows select scene instances.
     Keep their geometry explicit so the generic tool flex rule cannot put
     thumbnails underneath their labels. */
  .layout-elements-tabs { padding: 3px; background: var(--ui-selected); border-radius: 6px; }
  .layout-elements-tabs > .ui-tool-button { min-width: 0; padding-inline: 4px; border-color: transparent; }
  .layout-elements-tabs > .ui-tool-button[aria-selected="true"] { background: var(--ui-surface); border-color: var(--ui-border); }
  .layout-composition-select.ui-tool-button {
    display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 6px; padding: 6px;
    min-width: 0; width: 100%; background: var(--ui-surface); border-color: var(--ui-border);
  }
  .layout-composition-select.ui-tool-button[aria-pressed="true"] {
    background: var(--ui-surface); border-color: var(--ui-accent); box-shadow: inset 0 0 0 1px var(--ui-accent);
  }
  .layout-composition-action.icon-button { width: 32px; height: 32px; min-height: 32px; border: 1px solid var(--ui-border); }
  .layout-composition-action.icon-button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  @media (max-width: 760px), (pointer: coarse) {
    .layout-composition-action.icon-button { width: 44px; height: 44px; min-height: 44px; }
    .layout-composition-row { grid-template-columns: minmax(0, 1fr) repeat(3, 44px); }
  }
  :where(.asset-picker-header > button, .concept-modal-header > button, .layout-result-close, .icon-button, .layout-icon-button) {
    display: inline-grid; place-items: center; flex: 0 0 auto;
    width: 36px; height: 36px; min-height: 36px; padding: 0; border: 1px solid transparent; border-radius: 6px;
    color: var(--ui-text); background: transparent; font-size: 20px; line-height: 1;
  }
  :where(.asset-picker-header > button, .concept-modal-header > button, .layout-result-close, .icon-button, .layout-icon-button):hover { background: var(--ui-selected); }
  /* Required modifier for controls directly over images (photos, thumbnails,
     lightboxes): never use a transparent/naked surface, even when disabled.
     Compose with icon-button / secondary-button to retain their sizing. */
  .ui-image-overlay-button {
    color: var(--ui-text); background: var(--ui-surface); border: 1px solid var(--ui-border-control);
    box-shadow: 0 1px 4px #00000040;
  }
  .layout-environment-overlay > .layout-icon-button svg { width: 18px; height: 18px; stroke-width: 2; }
  .ui-image-overlay-button:hover:not(:disabled) {
    background: var(--ui-selected); border-color: var(--ui-text);
  }
  .ui-image-overlay-button:focus-visible {
    outline: 2px solid var(--ui-text); outline-offset: 2px;
    box-shadow: 0 0 0 2px var(--ui-surface);
  }
  .ui-image-overlay-button:disabled { opacity: 1; color: var(--ui-text-muted); }
  .ui-download-surface { position: relative; min-width: 0; }
  .ui-download-surface.library-download-tile { display: grid; }
  .library-download-tile > .library-tile { width: 100%; height: 100%; }
  .ui-download-surface > .ui-image-download { position: absolute; top: 10px; right: 10px; z-index: 3; }
  .layout-lightbox-image.ui-download-surface > .ui-image-download { top: 14px; right: 68px; }
  .ui-image-download svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .ui-download-surface > .ui-image-download-status { position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 4; margin: 0; padding: 8px; border: 1px solid var(--ui-border-control); border-radius: 6px; background: var(--ui-surface); color: var(--ui-text); font-size: 12px; }
  .candidate-strip .ui-image-download { top: auto; bottom: 6px; right: 6px; }
  .studio-original-dialog .ui-download-surface { min-height: 56px; }
  @media (max-width: 760px), (pointer: coarse) {
    .ui-image-download { width: 44px; height: 44px; min-height: 44px; }
  }
  .layout-canvas-resize-handle {
    position: absolute; z-index: 6;
    width: 12px; height: 12px; min-width: 0; min-height: 0; padding: 0;
    border-radius: 2px; border-width: 1px;
    touch-action: none; user-select: none;
  }
  /* A discreet opaque square, with a larger invisible pointer target. */
  .layout-canvas-resize-handle::after { content: ""; position: absolute; inset: -9px; }
  .layout-canvas-resize-handle[data-canvas-corner="nw"] { left: 0; top: 0; transform: translate(-50%, -50%); cursor: nwse-resize; }
  .layout-canvas-resize-handle[data-canvas-corner="ne"] { right: 0; top: 0; transform: translate(50%, -50%); cursor: nesw-resize; }
  .layout-canvas-resize-handle[data-canvas-corner="sw"] { left: 0; bottom: 0; transform: translate(-50%, 50%); cursor: nesw-resize; }
  .layout-canvas-resize-handle[data-canvas-corner="se"] { right: 0; bottom: 0; transform: translate(50%, 50%); cursor: nwse-resize; }
  @media (max-width: 760px) {
    .layout-canvas-resize-handle::after { inset: -17px; }
  }
  /* A destructive icon action keeps the danger colour without the filled surface. */
  .icon-button.destructive-action-button { color: var(--ui-danger); }
  .icon-button.destructive-action-button:hover:not(:disabled) { background: var(--ui-danger-bg); }
  .component-linked-visual-actions > .secondary-button {
    padding-inline: 8px; white-space: nowrap;
  }
  .component-linked-visual-actions > .destructive-action-button {
    color: var(--ui-danger); background: var(--ui-danger-bg); border-color: var(--ui-danger);
  }
  .library-shell { width: min(100%, var(--ui-page-width)); padding: 24px; gap: 24px; }
  .admin-shell { max-width: var(--ui-admin-width); }
  .home-page main { width: min(100%, var(--ui-page-width)); }
  .control-panel { padding: 24px; }
  .brand-block { gap: 12px; }
  :where(.brand-block, .layout-studio-brand) h1 { font-size: 24px; line-height: 1.25; font-weight: 600; }
  :where(.brand-block, .brand, .layout-studio-brand) p { color: var(--ui-text-muted); font-size: 13px; line-height: 1.4; }
  .form-section { padding: 16px; gap: 12px; border-radius: 8px; }
  :where(.creative-studio-page, .proposal-control-panel, .asset-studio-page) .form-section {
    padding: 16px 0; border: 0; border-top: 1px solid var(--ui-border);
    border-radius: 0; background: transparent;
  }
  /* The divider sits above each section, so the panel never ends in a line. */
  :where(.creative-studio-page, .proposal-control-panel, .asset-studio-page) .form-section:first-of-type { border-top: 0; padding-top: 0; }
  /* Section titles inside a side panel are quiet group labels, the eyebrow
     of the Layout Studio inspector; content areas keep the 16 px title. */
  .control-panel .form-section h2 {
    font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0;
    text-transform: uppercase; color: var(--ui-text-muted);
  }
  /* Asset Studio steps read as flat sections like the other studios: the
     numbered badge and the chevron mark the step, no card, no header band. */
  .asset-studio-page #studio-form { gap: 0; }
  .asset-studio-page .studio-step-section.form-section { padding: 0; overflow: visible; border-color: var(--ui-border); }
  /* Step headings read like the section eyebrows of the other panels: the
     title and, on the same line, the step's current summary. */
  .asset-studio-page .studio-step-toggle { display: block; min-height: 0; padding: 12px 0; background: transparent; cursor: default; }
  .asset-studio-page .studio-step-section.active > .studio-step-toggle { background: transparent; border-bottom: 0; padding-bottom: 8px; }
  .asset-studio-page .studio-step-copy { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
  .asset-studio-page .studio-step-copy strong { font-size: 12px; line-height: 16px; font-weight: 600; text-transform: uppercase; color: var(--ui-text-muted); }
  .asset-studio-page .studio-step-section.active .studio-step-copy strong { color: var(--ui-text); }
  .asset-studio-page .studio-step-copy small { overflow: visible; font-size: 12px; line-height: 16px; font-weight: 400; white-space: normal; color: var(--ui-text-muted); }
  .asset-studio-page .studio-step-body { padding: 0 0 16px; gap: 12px; }
  .asset-studio-page [data-studio-panel] { gap: 12px; }
  /* Creative Studio: format and model fill the row like every other field. */
  .cs-mode-row .cs-inline { flex: 1 1 120px; min-width: 0; }
  .cs-mode-row .cs-inline select { width: 100%; }
  .cs-canvas-wrap[data-selection-editable="true"] { touch-action: none; user-select: none; }
  :where(.tool-tag, .library-badge, .status-badge) { font-size: 12px; line-height: 16px; font-weight: 500; }
  .tool-tag.live { color: var(--ui-success); background: var(--ui-success-bg); }
  .tool-tag.library { color: var(--ui-text); background: var(--ui-selected); }
  .library-tabs, .admin-tabs { gap: 4px; overflow-x: auto; scrollbar-width: thin; }
  .library-tabs a, .admin-tabs a { min-height: 36px; padding: 8px 12px; font-size: 13px; font-weight: 500; white-space: nowrap; }
  .library-tabs a[aria-current="page"], .library-tabs a.active, .admin-tabs a[aria-current="page"] { color: var(--ui-text); border-bottom-color: var(--ui-text); }
  :where(.status-line, .field-help, .field-hint) { color: var(--ui-text-muted); font-size: 12px; font-weight: 400; line-height: 1.4; }
  :where(.status-line, .workspace-status):empty { display: none; }
  /* Informational counts remain quiet. Only explicitly classified feedback gets a surface. */
  :where([data-ui-feedback="error"], [data-ui-feedback="warning"], [data-ui-feedback="success"], .status-success, .login-page .error, .status.err, .status.ok):not(:empty) {
    padding: 10px 12px; border: 1px solid currentColor; border-radius: 6px;
    color: var(--ui-success); background: var(--ui-success-bg); font-size: 13px; font-weight: 400; line-height: 1.45;
  }
  :where([data-ui-feedback="error"], .login-page .error, .status.err):not(:empty) { color: var(--ui-danger); background: var(--ui-danger-bg); }
  [data-ui-feedback="warning"]:not(:empty) { color: var(--ui-warning); background: var(--ui-warning-bg); }
  .destructive-confirm-warning { color: var(--ui-warning); background: var(--ui-warning-bg); border-color: var(--ui-warning); font-weight: 400; }
  :where(.asset-picker-panel, .concept-modal-panel, dialog) { color: var(--ui-text); background: var(--ui-surface); border-radius: 12px; }
  :where(.asset-picker-header, .concept-modal-header, .destructive-confirm-heading) h2 { font-size: 18px; font-weight: 600; line-height: 1.35; }
  :where(.asset-picker, .concept-modal) { background: rgb(20 22 20 / .4); }
  dialog::backdrop { background: rgb(20 22 20 / .4); }
  /* Opt-in image settings: original controls/handlers live in a native modal. */
  .ui-image-settings-trigger { display: flex; width: 100%; gap: 10px; text-align: left; white-space: normal; }
  .ui-image-settings-trigger > span { flex: 1; min-width: 0; display: grid; gap: 2px; }
  .ui-image-settings-trigger strong { font-size: 13px; font-weight: 500; overflow-wrap: anywhere; }
  .ui-image-settings-trigger small { color: var(--ui-text-muted); font-size: 12px; font-weight: 400; }
  .ui-image-settings-trigger svg { flex: 0 0 18px; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .ui-image-settings-trigger > svg:last-child { flex-basis: 14px; width: 14px; }
  .ui-image-settings-dialog { width: min(500px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 22px; overflow: auto; border: 1px solid var(--ui-border-control); }
  .ui-image-settings-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
  .ui-image-settings-heading h2 { margin: 0; font-size: 18px; }
  .ui-image-settings-content [data-image-settings-fields] { display: grid; gap: 20px; }
  .ui-image-settings-dialog .form-section { padding: 0; margin: 0; border: 0; display: grid; gap: 8px; }
  .ui-image-settings-dialog label { display: grid; gap: 8px; font-size: 14px; }
  .ui-image-settings-dialog .toggle-line { display: flex; align-items: center; gap: 10px; }
  .ui-image-settings-dialog select { width: 100%; min-width: 0; }
  .ui-image-settings-dialog .field-help { margin: 0; }
  .ui-image-settings-footer { display: grid; gap: 16px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--ui-border); }
  .ui-image-settings-footer button { justify-self: end; }
  /* Shared visual library selector: entity references, not text-only lists. */
  .ui-library-picker-panel {
    width: min(1040px, 100%); max-height: 90dvh; overflow: hidden;
    display: grid; grid-template-rows: auto auto auto minmax(0, 1fr) auto; gap: 16px;
  }
  .ui-library-picker-filters { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; }
  .ui-library-picker-filters input, .ui-library-picker-filters select { min-width: 0; }
  /* The catalogue scrolls; its rows must never compress to fit the modal. */
  .ui-library-picker-grid { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 3px; align-content: start; grid-auto-rows: max-content; }
  .ui-library-picker-tile { display: flex; flex-direction: column; gap: 8px; padding: 8px; background: var(--ui-surface-subtle); }
  .ui-library-picker-tile > * { flex: none; }
  .ui-library-picker-tile strong { white-space: normal; overflow-wrap: anywhere; line-height: 1.4; }
  .ui-library-thumbnail { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; min-width: 0; width: 100%; background: var(--ui-bg); border-radius: 6px; overflow: hidden; }
  .ui-library-thumbnail img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
  .ui-library-picker-detail, .ui-library-no-image { color: var(--ui-text-muted); font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
  .ui-library-picker-badges { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; font-size: 12px; }
  .ui-library-primary { padding: 2px 5px; border-radius: 4px; background: var(--ui-accent); color: var(--ui-on-accent); }
  .ui-library-picker-tile[aria-pressed="true"] { border-color: var(--ui-text); box-shadow: 0 0 0 2px var(--ui-accent); }
  .ui-library-picker-tile:disabled { opacity: 1; color: var(--ui-text-muted); cursor: not-allowed; border-color: var(--ui-border); }
  .ui-library-field { display: flex; gap: 4px; align-items: center; min-width: 0; width: 100%; }
  .ui-library-field-button {
    display: flex; align-items: center; justify-content: center; gap: 8px; flex: 1; width: 100%; min-width: 0; min-height: 36px;
    padding: 8px 12px; border: 1px solid var(--ui-border-control); border-radius: 6px;
    background: var(--ui-surface); color: var(--ui-text); text-align: left; cursor: pointer;
  }
  .ui-library-field-button:hover { background: var(--ui-surface-subtle); border-color: var(--ui-text); }
  .ui-library-field-button:disabled { cursor: default; color: var(--ui-text-muted); }
  .ui-library-field-label { min-width: 0; font-size: 13px; line-height: 1.35; font-weight: 500; overflow-wrap: anywhere; }
  .ui-library-field-action { margin-left: auto; flex-shrink: 0; font-size: 12px; font-weight: 500; }
  .compose-row .ui-library-field { grid-column: 1 / -1; }
  @media (max-width: 760px) {
    .ui-library-picker-panel { max-height: 94dvh; padding: 16px; gap: 12px; }
    .ui-library-picker-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ui-library-picker-filters input { grid-column: 1 / -1; }
    .ui-library-picker-filters select { width: 100%; }
    .ui-library-picker-grid { grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr)); gap: 8px; }
    .ui-library-field-button { min-height: 44px; }
    .ui-library-field [data-library-clear] { min-width: 44px; min-height: 44px; }
  }
  .layout-lightbox { background: #0f0f0f; border-radius: 0; }
  /* Native dialogs can animate out without delaying close(), forms or business handlers. */
  dialog {
    opacity: 0; transform: translateY(4px);
    transition: opacity 120ms ease-in, transform 120ms ease-in, display 120ms allow-discrete, overlay 120ms allow-discrete;
  }
  dialog[open] { opacity: 1; transform: translateY(0); transition-duration: 160ms; transition-timing-function: ease-out; }
  @starting-style { dialog[open] { opacity: 0; transform: translateY(6px); } }
  .asset-picker:not([hidden]) > .asset-picker-panel, .concept-modal:not([hidden]) > .concept-modal-panel {
    animation: ui-modal-in 160ms ease-out;
  }
  @keyframes ui-modal-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
  .login-page main { border-radius: 12px; }
  .phone-upload-page .shoot { font-weight: 500; border-radius: 6px; }
  .phone-upload-page .action { min-height: 48px; font: 500 15px/1.4 var(--ui-font-family); border-radius: 6px; }
  /* Shared navigation bar (mounted by ui.js). */
  .ui-nav {
    position: sticky; top: 0; z-index: 40;
    box-sizing: border-box; width: 100%; justify-self: stretch;
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px;
    min-height: 52px; padding: 0 18px;
    background: var(--ui-surface); border-bottom: 1px solid var(--ui-border);
    font-family: var(--ui-font-family);
  }
  .ui-nav-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ui-text); font-size: 13px; font-weight: 800; text-decoration: none; white-space: nowrap; }
  .ui-nav-mark { display: grid; place-items: center; width: 32px; height: 32px; color: var(--ui-on-strong); background: var(--ui-strong); border-radius: 8px; font-size: 11px; font-weight: 900; }
  .ui-nav-links { display: flex; align-items: center; gap: 2px; justify-self: center; }
  .ui-nav-end { display: flex; align-items: center; gap: 2px; justify-self: end; }
  .ui-nav-link, .ui-nav-menu > summary {
    display: inline-flex; align-items: center; min-height: 32px; padding: 0 10px;
    color: var(--ui-text); background: transparent; border-radius: 6px;
    font-size: 12px; font-weight: 700; line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer;
  }
  .ui-nav-link:hover, .ui-nav-menu > summary:hover { background: var(--ui-selected); }
  .ui-nav-link:focus-visible, .ui-nav-menu > summary:focus-visible { outline: 2px solid var(--ui-border-control); outline-offset: 1px; }
  .ui-nav-link[aria-current="page"], .ui-nav-menu[data-active="true"] > summary { color: var(--ui-on-strong); background: var(--ui-strong); }
  .ui-nav-icon { width: 32px; padding: 0; justify-content: center; }
  .ui-nav-logout { display: contents; }
  .ui-nav-logout button { border: 0; background: transparent; font: inherit; cursor: pointer; }
  .ui-nav-logout button:hover { background: var(--ui-selected); }
  .has-ui-nav-logout .session-row { display: none; }
  .ui-nav-icon svg { display: block; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .ui-nav-menu { position: relative; }
  .ui-nav-menu > summary { list-style: none; }
  .ui-nav-menu > summary::-webkit-details-marker { display: none; }
  .ui-nav-menu > summary::after { content: ""; width: 6px; height: 6px; margin-left: 7px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: translateY(-2px) rotate(45deg); }
  .ui-nav-dropdown {
    position: absolute; top: calc(100% + 6px); right: 0; z-index: 41;
    display: grid; gap: 1px; min-width: 200px; padding: 6px;
    background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: 8px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .14);
  }
  .ui-nav-links .ui-nav-dropdown { right: auto; left: 0; }
  .ui-nav-dropdown .ui-nav-link { display: flex; min-height: 34px; }
  .ui-nav-dropdown .ui-nav-link[aria-current="page"] { color: var(--ui-text); background: var(--ui-selected); }
  [data-nav-mobile] { display: none; }
  /* With the bar present, per-page brand marks and "Voltar" links are redundant. */
  .has-ui-nav .brand-block .brand-mark,
  .has-ui-nav .layout-studio-brand .brand-mark,
  .has-ui-nav .brand-block .back-link,
  .has-ui-nav .layout-document-controls .back-link,
  .has-ui-nav.home-page .brand { display: none; }
  :root { --ui-nav-height: 52px; }
  /* Shared Studio/Creative composer: send lives inside the message box. */
  .cs-chat-form, .ui-prompt-composer { position: relative; display: block; }
  .cs-chat-form textarea, .ui-prompt-composer textarea { width: 100%; box-sizing: border-box; min-height: 52px; padding: 10px 56px 10px 12px; resize: none; }
  .cs-chat-send, .ui-prompt-send {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; min-height: 36px; padding: 0; border-radius: 50%;
  }
  /* The plane points up-right, so it is nudged down-left to sit optically centred. */
  .cs-chat-send svg, .ui-prompt-send svg { display: block; width: 18px; height: 18px; margin: 2px 0 0 -2px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  /* Sticky studio panels and toolbars sit under the bar instead of behind it. */
  .has-ui-nav .control-panel { top: var(--ui-nav-height); height: calc(100vh - var(--ui-nav-height)); }
  .has-ui-nav .workspace-toolbar { top: var(--ui-nav-height); }
  /* Page actions remain below the shared navigation while scrolling. */
  :root { --ui-page-header-height: 76px; }
  .ui-page-header {
    position: sticky; top: 0; z-index: 30;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px;
    min-height: var(--ui-page-header-height); padding: 12px 18px;
    background: var(--ui-surface-subtle); border-bottom: 1px solid var(--ui-border);
  }
  .ui-page-header .brand-block { margin: 0; }
  .ui-page-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; min-width: 0; max-width: 100%; }
  .has-ui-nav .ui-page-header,
  .has-ui-nav .layout-studio-header { top: var(--ui-nav-height); }
  @media (min-width: 761px) {
    .has-page-header .control-panel,
    .has-ui-nav .layout-source-panel,
    .has-ui-nav .layout-inspector {
      top: calc(var(--ui-nav-height) + var(--ui-measured-header-height, 76px));
      height: calc(100vh - var(--ui-nav-height) - var(--ui-measured-header-height, 76px));
    }
    .has-page-header .workspace-toolbar {
      top: calc(var(--ui-nav-height) + var(--ui-measured-header-height, 76px));
    }
  }
  /* The studios keep a narrower panel than the proposal editor, in line with
     the Layout Studio's side panels. */
  @media (min-width: 1181px) {
    .asset-studio-page .app-shell,
    .creative-studio-page .app-shell { grid-template-columns: minmax(320px, 360px) 1fr; }
  }
  @media (max-width: 1180px) {
    .has-ui-nav .control-panel,
    .has-ui-nav .layout-inspector { height: auto; }
    .has-ui-nav .workspace-toolbar { top: auto; }
    .layout-workspace-toolbar { grid-template-columns: minmax(0, 1fr); }
    .layout-plan-actions { justify-self: start; flex-wrap: wrap; }
    .layout-document-controls { flex-wrap: wrap; }
    .layout-document-controls label { min-width: 160px; }
  }
  @media (max-width: 900px) {
    /* The help entry also needs room when account controls are visible.
       Switch navigation to its compact menu before links start overflowing. */
    .ui-nav { padding: 0 12px; }
    .ui-nav-links, .ui-nav-end > [data-nav-admin] { display: none; }
    [data-nav-mobile] { display: block; }
    .ui-nav-dropdown { max-height: 70vh; overflow-y: auto; }
    .admin-category-row { grid-template-columns: 1fr; }
    .admin-category-order, .admin-category-actions { justify-content: flex-start; }
    .admin-category-usage { text-align: left; }
  }
  @media (max-width: 760px) {
    .ui-image-settings-dialog { padding: 16px; }
    .cs-chat-send, .ui-prompt-send { width: 44px; height: 44px; min-height: 44px; }
    :where(h1, .brand-block h1, .layout-studio-brand h1):not(.proposal-page *) { font-size: 22px; line-height: 1.27; }
    .library-shell, .control-panel, .workspace, .layout-source-panel, .layout-inspector { padding: 16px; }
    .home-page { padding: 16px; }
    :where(input, select, textarea):not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="hidden"]) { font-size: 16px; min-height: 44px; }
    :where(.primary-button, .secondary-button, .back-link, .danger-button,
      .destructive-confirm-button, .destructive-action-button, .icon-button, .session-row button, .ui-tool-button, .cs-mode-row button,
      .cs-brush-row button, .crop-tool-row button, .admin-category-order button, .zone-tool-row button, .zone-brush-controls button, .image-view-tabs button, [data-appearance-zone-tool], [data-zone-tool], [data-compare-action],
      [data-layout-mode], [data-shape-tool], [data-asset-picker-kind], .layout-selection-actions button,
      .concept-selection-actions button, .image-page-actions button, .item-card-actions button, .library-tabs a, .admin-tabs a) { min-height: 44px; }
    :where(.asset-picker-header > button, .concept-modal-header > button, .layout-result-close, .icon-button, .layout-icon-button) { width: 44px; height: 44px; min-height: 44px; }
    .layout-lightbox-close { width: 44px; height: 44px; }
    .layout-document-controls { flex-wrap: wrap; }
    .layout-studio-header, .ui-page-header { position: static; }
    /* Keep catalog browsing within reach of the canvas without hiding any source. */
    .layout-source-list { max-height: 260px; overflow-y: auto; overscroll-behavior: contain; }
    .layout-workspace-toolbar { flex-wrap: wrap; }
    .workspace-toolbar-actions { flex-wrap: wrap; }
    .item-card-actions { flex-wrap: wrap; max-width: 100%; }
    .item-card-actions .item-badge-slot { flex-basis: 100%; }
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto; }
    dialog, dialog[open], .asset-picker:not([hidden]) > .asset-picker-panel, .concept-modal:not([hidden]) > .concept-modal-panel { animation: none; transition: none; transform: none; }
    button, a, input, select, textarea { transition: none; }
  }
  @media print {
    .ui-only, .ui-nav, .ui-page-header { display: none !important; }
    /* Print the document, not the editor. These resets belong in the UI
       layer so responsive workspace padding cannot override print layout. */
    body.proposal-editor-page > :not(.app-shell),
    .proposal-editor-page .app-shell > :not(.workspace),
    .proposal-editor-page .workspace > :not(.proposal-document) { display: none !important; }
    body.proposal-editor-page,
    .proposal-editor-page .app-shell,
    .proposal-editor-page .workspace,
    .proposal-editor-page .proposal-document {
      display: block; position: static; inset: auto;
      width: auto; min-width: 0; max-width: none;
      height: auto; min-height: 0; max-height: none;
      margin: 0; padding: 0; border: 0; gap: 0; overflow: visible;
      background: white; transform: none;
    }
    .proposal-editor-page .proposal-page {
      break-inside: avoid; page-break-inside: avoid;
      margin: 0; max-width: none;
    }
  }
}
/* hidden must remain authoritative, including isolated home/phone pages. */
[hidden] { display: none !important; }
/* Alpha preview only: never rasterize this checkerboard into an exported image. */
@layer ui {
  .asset-studio-page #studioPreview.studio-transparent-preview {
    background-color: #fff;
    background-image: conic-gradient(#e4e4e4 25%, #fff 0 50%, #e4e4e4 0 75%, #fff 0);
    background-size: 20px 20px;
  }
}
/* Shared geometry metadata control; compact and legible in side panels. */
@layer ui {
.component-structure-editor { display: grid; gap: 8px; min-width: 0; }
.component-structure-editor [data-structure-fields]:not([hidden]) { display: grid; gap: 8px; }
.component-structure-editor .dimension-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.component-structure-editor label { min-width: 0; }
.component-structure-editor input, .component-structure-editor select { width: 100%; min-width: 0; }
.component-structure-editor input[type="checkbox"] { width: auto; }
.component-structure-walls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.component-structure-editor .field-help { margin: 0; }
}
/* Thumbnail remove control: opaque and inside the tile's corner, revealed on
   hover/focus so it never covers the artwork while browsing. Lives in the ui
   layer; app-layer rules cannot size a button against ui's button defaults. */
@layer ui {
  .cs-asset-remove {
    position: absolute; top: 4px; right: 4px; z-index: 1;
    display: grid; place-items: center; width: 20px; height: 20px; min-width: 0; min-height: 0; padding: 0;
    color: var(--ui-text); background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: 50%;
    box-shadow: 0 1px 2px #0002; font-size: 14px; line-height: 1; cursor: pointer;
    opacity: 0; transition: opacity .12s;
  }
  .cs-asset:hover .cs-asset-remove, .cs-asset:focus-within .cs-asset-remove { opacity: 1; }
  .cs-asset-remove:hover:not(:disabled) { background: var(--ui-selected); border-color: var(--ui-border-control); }
  @media (hover: none) {
    .cs-asset-remove { width: 28px; height: 28px; opacity: 1; }
  }
}

@layer ui {
  /* Compact, consistent spacing for the Creative Studio inspector. */
  .creative-studio-page .control-panel { padding: 16px; }
  .creative-studio-page #conceptForm { gap: 0; }
  .creative-studio-page .control-panel .form-section { gap: 10px; padding: 16px 0; }
  .creative-studio-page .control-panel .form-section:first-of-type { padding-top: 0; }
  .creative-studio-page .control-panel :is(h2, h3) {
    margin: 0; font-size: 12px; line-height: 16px; font-weight: 600;
    color: var(--ui-text-muted); text-transform: uppercase;
  }
  .creative-studio-page #compositionTools { margin: 0; padding: 0; border: 0; gap: 4px; }
  .creative-studio-page #compositionTools > button { min-height: 36px; padding: 6px 4px; }
  .creative-studio-page #assetLibraryTools {
    margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--ui-border); gap: 10px;
  }
  .creative-studio-page #assetLibraryTools > .cs-mode-row { gap: 6px; }
  .creative-studio-page #assetLibraryTools > .cs-mode-row > button { flex: 1; min-height: 36px; }
  .creative-studio-page .control-panel .ui-upload-actions { flex-wrap: nowrap; }
  .creative-studio-page .control-panel .ui-upload-actions > button { flex: 1; min-width: 0; padding-inline: 8px; }
  .creative-studio-page .control-panel .cs-asset-tray { padding: 10px; min-height: 56px; }
  .creative-studio-page .control-panel .status-line:empty { display: none; }
  .creative-studio-page #compositionZones { display: grid; gap: 8px; }
  .creative-studio-page #placementSurfaceDetails { margin: 0; gap: 8px; }
  .creative-studio-page #placementSurfaceDetails summary { padding-block: 4px; }
  .creative-studio-page #placementApplicationProperties { display: grid; gap: 10px; }
  .creative-studio-page #placementApplicationProperties > .cs-mode-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .creative-studio-page #placementApplicationProperties input[type="number"] { width: 100%; }
  .creative-studio-page #placementApplicationProperties .cs-icon-row { gap: 6px; }
  .creative-studio-page #placementAdjustPanel[open] > summary { margin-bottom: 10px; }
}

@layer ui {
  .cs-project-menu { position: relative; }
  .cs-project-menu > div { position: absolute; z-index: 40; right: 0; top: 100%; min-width: 220px; display: grid; gap: 6px; padding: 10px; background: var(--ui-surface, #fff); border: 1px solid #bbb; border-radius: 8px; box-shadow: 0 4px 16px #0002; }
  .cs-project-status { margin: 0; padding: 6px 16px; border-bottom: 1px solid #ddd; }
  .cs-project-status.is-error { color: #a32020; }
  .cs-project-row { display: grid; gap: 6px; padding: 12px 0; border-bottom: 1px solid #ddd; }
  #creativeProjectsList { max-height: 60vh; overflow-y: auto; margin-bottom: 16px; }
  @media (max-width: 760px) {
    .cs-project-menu > div { left: 0; right: auto; min-width: 200px; }
  }
}