/* /theme.css */
@layer tokens {
/*
 * EOS AI design tokens — the single source of every colour, size, radius,
 * shadow and motion value in the workbench. DESIGN.md (repository root)
 * explains how to use them; feature stylesheets consume these semantic names
 * and never introduce a page-specific palette.
 *
 * Direction: a calm #f5f5f7 canvas, white content cards, frosted glass for
 * chrome and floating layers, one brand purple for the main action and
 * selection, and a readable type scale (15px body, 13px floor for copy).
 * Legacy aliases at the bottom stay so older feature styles keep rendering.
 */
:root {
  /* ---------- Canvas and surfaces ---------- */
  --ui-bg: #f5f5f7;
  --ui-surface: #ffffff;
  --ui-surface-raised: #ffffff;
  /* Inset fill inside a white card (wells, media letterbox, quiet rows). */
  --ui-surface-subtle: #f5f5f7;
  /* Tracks, placeholders and pressed fills. */
  --ui-surface-muted: #ececf0;
  --ui-surface-overlay: rgb(255 255 255 / 90%);
  --ui-surface-sidebar: rgb(246 246 249 / 72%);
  --ui-surface-sidebar-raised: rgb(255 255 255 / 92%);
  --ui-sidebar-line: rgb(0 0 0 / 7%);

  /* Neutral fills (Apple system-fill style) for secondary buttons, segmented
     tracks and hover washes; they read correctly on white and on the canvas. */
  --ui-fill-1: rgb(118 118 128 / 8%);
  --ui-fill-2: rgb(118 118 128 / 12%);
  --ui-fill-3: rgb(118 118 128 / 18%);

  /* ---------- Glass (毛玻璃) ----------
     Chrome (sidebar, topbar) and floating layers (dialogs, menus, docks,
     sticky action bars). Content cards stay opaque white for legibility. */
  --ui-glass: rgb(255 255 255 / 72%);
  --ui-glass-strong: rgb(255 255 255 / 86%);
  --ui-glass-chrome: rgb(250 250 252 / 76%);
  --ui-glass-dark: rgb(29 29 31 / 82%);
  --ui-glass-edge: rgb(255 255 255 / 70%);
  --ui-glass-blur: blur(28px) saturate(180%);
  --ui-glass-blur-soft: blur(16px) saturate(160%);

  /* ---------- Text ---------- */
  --ui-ink: #1d1d1f;
  --ui-ink-strong: #111113;
  /* 6.0:1 on white, 5.1:1 on the muted surface. Secondary copy. */
  --ui-muted: #636369;
  /* 10:1 on white. Dense supporting copy that still needs weight. */
  --ui-ink-soft: #3a3a3f;
  /* 4.9:1 on white. Placeholder text must not read as secondary copy. */
  --ui-ink-placeholder: #707077;
  /* Decorative neutral for idle icons and separators only (2.6:1 on white). */
  --ui-ink-faint: #a1a1a6;
  --ui-line: rgb(0 0 0 / 8%);
  --ui-line-strong: rgb(0 0 0 / 14%);
  /* Hover wash for quiet rows and the inset edge of a selected tile. */
  --ui-hover: rgb(0 0 0 / 4%);
  --ui-inset-edge: rgb(0 0 0 / 5%);
  /* Ambient light behind the glass: a faint violet and sky wash. */
  --ui-ambient-violet: rgb(143 118 255 / 10%);
  --ui-ambient-sky: rgb(120 178 255 / 9%);
  --ui-ambient-peach: rgb(255 190 150 / 7%);
  --ui-scrim: rgb(20 20 24 / 32%);

  /* ---------- Brand action ---------- */
  --ui-accent: #5b43d6;
  --ui-accent-strong: #4630b8;
  --ui-accent-soft: #efebfd;
  --ui-accent-wash: rgb(91 67 214 / 8%);
  --ui-accent-edge: rgb(91 67 214 / 24%);
  --ui-accent-glow: rgb(91 67 214 / 24%);
  --ui-edge-highlight: rgb(255 255 255 / 16%);
  --ui-focus: #5b43d6;
  --ui-focus-ring: rgb(91 67 214 / 32%);
  --ui-action-primary: var(--ui-accent);
  --ui-action-primary-hover: var(--ui-accent-strong);
  --ui-action-on-primary: #ffffff;
  --ui-action-selection: var(--ui-accent-soft);
  /* Legacy pinned-entry star (tool cards only). */
  --ui-favorite: #f2b705;
  --ui-favorite-strong: #a86b00;

  /* ---------- Status ---------- */
  --ui-success: #1f7a37;
  --ui-success-soft: #e7f6eb;
  --ui-warning: #a85600;
  --ui-warning-soft: #fff3e2;
  --ui-danger: #d70015;
  --ui-danger-soft: #fdecee;

  /* ---------- Content marks ----------
     Boxes under the key facts of an editable script: product (yellow),
     person (brand) and spoken line (green). A soft fill under the text and a
     firmer 1px edge; the text itself keeps --ui-ink. */
  --ui-mark-product: rgb(242 183 5 / 22%);
  --ui-mark-product-edge: rgb(168 107 0 / 55%);
  --ui-mark-person: rgb(91 67 214 / 10%);
  --ui-mark-person-edge: rgb(91 67 214 / 45%);
  --ui-mark-line: rgb(31 122 55 / 10%);
  --ui-mark-line-edge: rgb(31 122 55 / 45%);

  /* Media timeline segment identity: muted, cyclic hues for clip labels. */
  --ui-segment-1: var(--ui-accent);
  --ui-segment-2: #2f8a86;
  --ui-segment-3: #a2508a;
  --ui-segment-4: var(--ui-success);
  --ui-segment-5: #3f6fb0;
  --ui-segment-6: var(--ui-muted);

  /* ---------- Spacing (4px grid) and controls ---------- */
  --ui-space-1: 4px;
  --ui-space-2: 8px;
  --ui-space-3: 12px;
  --ui-space-4: 16px;
  --ui-space-5: 20px;
  --ui-space-6: 24px;
  --ui-space-7: 32px;
  --ui-space-8: 40px;
  --ui-space-9: 56px;
  --ui-space-10: 72px;
  --ui-control-height: 44px;
  /* Dense toolbars on fine pointers only; coarse pointers get 44px. */
  --ui-control-height-sm: 36px;
  --ui-touch-target: 44px;
  --ui-touch-target-min: 44px;
  --ui-page-width: 1200px;
  /* Collections and data tables (素材库, 生成记录, 使用记录) may use more width. */
  --ui-page-width-wide: 1440px;
  --ui-page-gutter: 40px;
  /* Readable measure for prose and forms. */
  --ui-measure: 68ch;

  /* ---------- Geometry ----------
     Controls are pills or 12px; cards 18px; dialogs and hero panels 24px. */
  --ui-radius-xs: 6px;
  --ui-radius-sm: 10px;
  --ui-radius-md: 12px;
  --ui-radius-lg: 18px;
  --ui-radius-xl: 24px;
  --ui-radius-2xl: 28px;
  --ui-radius-pill: 999px;

  /* ---------- Elevation ----------
     Soft, low-contrast shadows. Cards separate from the canvas by colour and
     one quiet shadow, not a border; floating layers carry the deep shadow. */
  --ui-shadow-subtle: 0 1px 0 rgb(0 0 0 / 3%);
  --ui-shadow-1: 0 1px 2px rgb(0 0 0 / 5%);
  --ui-shadow-2: 0 2px 8px rgb(0 0 0 / 6%);
  --ui-shadow-3: 0 12px 32px rgb(0 0 0 / 10%), 0 1px 3px rgb(0 0 0 / 5%);
  --ui-shadow-4: 0 28px 72px rgb(0 0 0 / 18%);
  --ui-shadow-card: 0 1px 2px rgb(0 0 0 / 4%), 0 4px 16px rgb(0 0 0 / 4%);
  --ui-shadow-hover: 0 2px 6px rgb(0 0 0 / 5%), 0 14px 36px rgb(0 0 0 / 9%);
  --ui-shadow-pop: 0 12px 36px rgb(0 0 0 / 14%), 0 0 0 1px rgb(0 0 0 / 5%);
  --ui-shadow-float: 0 32px 80px rgb(0 0 0 / 20%), 0 2px 10px rgb(0 0 0 / 6%);
  --ui-shadow-focus: 0 0 0 4px var(--ui-focus-ring);

  /* ---------- Motion ----------
     Short and decisive: 150ms feedback, 200ms entries, 300ms disclosures. */
  --ui-duration-fast: 150ms;
  --ui-duration-normal: 200ms;
  --ui-duration-slow: 300ms;
  --ui-ease-standard: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ui-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ui-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ui-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---------- Typography ----------
     15px body for comfortable Chinese reading; 13px is the floor for copy and
     12px is reserved for numeric badges and captions. CJK keeps neutral
     tracking; negative tracking applies only to Latin/numeric display text. */
  --ui-font-family-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Noto Sans CJK SC", system-ui, sans-serif;
  --ui-font-family-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "PingFang SC", monospace;
  --ui-font-size-2xs: 12px;
  --ui-font-size-xs: 13px;
  --ui-font-size-sm: 14px;
  --ui-font-size-md: 15px;
  --ui-font-size-lg: 17px;
  --ui-font-size-xl: 21px;
  --ui-font-size-2xl: 28px;
  --ui-font-size-3xl: 40px;
  --ui-font-weight-regular: 400;
  --ui-font-weight-medium: 500;
  --ui-font-weight-semibold: 600;
  --ui-font-weight-bold: 700;
  --ui-line-height-tight: 1.2;
  --ui-line-height-snug: 1.4;
  --ui-line-height-normal: 1.6;
  --ui-line-height-relaxed: 1.75;
  --ui-letter-spacing-cjk: 0;
  --ui-letter-spacing-latin: -0.012em;
  --ui-letter-spacing-display: -0.022em;

  /* ---------- Stacking order, lowest to highest ---------- */
  --ui-z-sticky: 10;
  --ui-z-dropdown: 100;
  --ui-z-overlay: 500;
  --ui-z-dialog: 1000;
  --ui-z-toast: 1100;
  --ui-z-tooltip: 1200;

  --ui-topbar-height: 64px;
  --ui-topbar-height-compact: 56px;

  /* Compatibility aliases. Feature stylesheets consume these names without
     redefining the palette; new code uses the --ui-* names above. */
  --bg: var(--ui-bg);
  --paper: var(--ui-surface);
  --ink: var(--ui-ink);
  --muted: var(--ui-muted);
  --line: var(--ui-line);
  --line-soft: var(--ui-line);
  --line-strong: var(--ui-line-strong);
  --green: var(--ui-accent);
  --green-light: var(--ui-accent-soft);
  --orange: var(--ui-warning);
  --orange-light: var(--ui-warning-soft);
  --radius: var(--ui-radius-sm);
  --accent-violet: var(--ui-accent);
  --accent-violet-strong: var(--ui-accent-strong);
  --accent-violet-soft: var(--ui-accent-soft);
  --accent-purple: var(--ui-accent);
  --accent-purple-deep: var(--ui-accent-strong);
  --surface-subtle: var(--ui-surface-subtle);
  --surface-muted: var(--ui-surface-muted);
  --surface-tint: var(--ui-accent-soft);
  --surface-soft: var(--ui-surface-subtle);
  --ink-strong: var(--ui-ink);
  --ink-soft: var(--ui-muted);
  --focus-ring: var(--ui-focus);
  --sans: var(--ui-font-family-sans);
  --mono: var(--ui-font-family-mono);
  --shadow-card: var(--ui-shadow-card);
  --shadow-float: var(--ui-shadow-float);
  --studio-surface: var(--ui-surface);
  --studio-surface-subtle: var(--ui-surface-subtle);
  --studio-bg: var(--ui-bg);
  --accent: var(--ui-accent);
  --touch-target: var(--ui-touch-target);
  color-scheme: light;
}

*,*::before,*::after{box-sizing:border-box}
button,input,select,textarea{font:inherit}
button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}

}
/* /base.css */
@layer base {
/*
 * Layer 2 — base.
 *
 * Element-level defaults and the one global accessibility fallback. Loads
 * immediately after theme.css and before every layout, component, page and
 * utility stylesheet.
 *
 * Rules for this file:
 * - Only element selectors and :root. No classes, no ids, no !important
 *   except the reduced-motion block below, which must win over later layers.
 * - Breakpoints are not defined here; layout owns them.
 * - Interactive controls (button, field) are styled once in
 *   styles/controls.css; this file only resets them.
 */
:root {
  font-family: var(--ui-font-family-sans);
  font-size: var(--ui-font-size-md);
  color: var(--ui-ink);
  background: var(--ui-bg);
  line-height: var(--ui-line-height-normal);
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  /* The canvas carries a faint wash so the frosted chrome has something to
     blur; content cards stay opaque on top of it. */
  background:
    radial-gradient(1200px 720px at 0% -12%, var(--ui-ambient-violet), transparent 62%),
    radial-gradient(1000px 680px at 100% -8%, var(--ui-ambient-sky), transparent 60%),
    var(--ui-bg);
  background-attachment: fixed;
  min-height: 100vh;
  color: var(--ui-ink);
  font-family: var(--ui-font-family-sans);
  line-height: var(--ui-line-height-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--ui-accent-soft);
  color: var(--ui-ink-strong);
}

/* Headings: the topbar owns the page title (h1); content uses h2 for
   sections, h3 for cards and groups, h4 for small labelled blocks. */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  color: var(--ui-ink-strong);
  font-weight: var(--ui-font-weight-semibold);
  line-height: var(--ui-line-height-snug);
  letter-spacing: var(--ui-letter-spacing-cjk);
}

h1 { font-size: var(--ui-font-size-2xl); line-height: var(--ui-line-height-tight); }
h2 { font-size: var(--ui-font-size-xl); line-height: var(--ui-line-height-tight); }
h3 { font-size: var(--ui-font-size-lg); }
h4 { font-size: var(--ui-font-size-md); }
h5,
h6 { font-size: var(--ui-font-size-sm); }

p {
  margin: 0;
}

small {
  font-size: var(--ui-font-size-xs);
}

strong,
b {
  font-weight: var(--ui-font-weight-semibold);
}

a {
  color: var(--ui-accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

img,
video,
canvas {
  max-width: 100%;
}

/* Lucide icons render as inline svg; this is their default size and stroke. */
svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  stroke-width: 1.75;
}

button,
input,
select,
textarea {
  margin: 0;
  font: inherit;
  color: inherit;
}

button,
a,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}

label {
  display: block;
  color: var(--ui-ink-soft);
  font-size: var(--ui-font-size-xs);
  font-weight: var(--ui-font-weight-medium);
  line-height: var(--ui-line-height-snug);
}

/* A field wrapped by its label sits one small step below the label text. */
label > :is(input, select, textarea) {
  margin-top: 6px;
}

fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

legend {
  margin-bottom: var(--ui-space-2);
  padding: 0;
  color: var(--ui-ink-soft);
  font-size: var(--ui-font-size-xs);
  font-weight: var(--ui-font-weight-medium);
}

/* Definition lists default to a label/value grid; pages may restyle them. */
dl {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--ui-space-2) var(--ui-space-5);
  margin: 0;
  font-size: var(--ui-font-size-sm);
}

dt {
  color: var(--ui-muted);
}

dd {
  margin: 0;
  color: var(--ui-ink);
  overflow-wrap: anywhere;
}

ul,
ol {
  margin: 0;
}

hr {
  height: 1px;
  margin: var(--ui-space-5) 0;
  border: 0;
  background: var(--ui-line);
}

pre {
  max-height: 320px;
  margin: 0;
  padding: var(--ui-space-4);
  overflow: auto;
  border-radius: var(--ui-radius-md);
  background: var(--ui-surface-subtle);
  color: var(--ui-ink-soft);
  font-family: var(--ui-font-family-mono);
  font-size: var(--ui-font-size-xs);
  line-height: var(--ui-line-height-normal);
  white-space: pre-wrap;
  word-break: break-word;
}

code,
kbd {
  font-family: var(--ui-font-family-mono);
  font-size: 0.92em;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

summary {
  cursor: pointer;
}

progress {
  accent-color: var(--ui-accent);
}

input[type="checkbox"],
input[type="radio"],
input[type="range"] {
  accent-color: var(--ui-accent);
}

/* CJK must not inherit Latin negative tracking. */
:lang(zh),
:lang(zh-CN),
:lang(zh-Hans) {
  letter-spacing: var(--ui-letter-spacing-cjk);
}

[hidden] {
  display: none !important;
}

/*
 * Single global reduced-motion fallback for the whole application. It uses
 * !important so later layers cannot reintroduce motion; per-component
 * reduced-motion blocks elsewhere are belt-and-braces.
 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

}
/* /prompt-studio/style.css */
@layer legacy {
html.embedded > body > .topbar{display:none}
html.embedded,html.embedded body,html.embedded body>main{height:100%;min-height:100%}
:root{--paper:var(--ui-bg);--white:var(--ui-surface);--ink:var(--ui-ink);--muted:var(--ui-muted);--line:var(--ui-line);--accent:var(--ui-accent);--accent-dark:var(--ui-accent-strong);--accent-soft:var(--ui-accent-soft);--serif:"Iowan Old Style","Songti SC",serif;--sans:"Avenir Next","PingFang SC","Microsoft YaHei",sans-serif;--mono:"SFMono-Regular",Consolas,monospace}
.prompt-studio-page{margin:0;background:var(--paper);color:var(--ink);font:14px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) button,:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) input,:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) textarea,:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) select{font:inherit}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) button{cursor:pointer}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) button:disabled{cursor:not-allowed;opacity:.45}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) button:focus-visible,:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) a:focus-visible,:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) input:focus-visible,:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) select:focus-visible,:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) textarea:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) [data-icon] svg{width:18px;height:18px;display:block;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) [data-icon]{display:inline-flex;flex-shrink:0;vertical-align:middle}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) button{transition:background .16s,border-color .16s,transform .16s}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) button:active:not(:disabled){transform:translateY(1px)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .topbar{height:78px;max-width:1536px;margin:auto;padding:0 5.3%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .brand{display:flex;align-items:center;gap:13px;color:inherit;text-decoration:none;font-size:var(--ui-font-size-md);font-weight:600;letter-spacing:.02em}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .brand-mark{width:30px;height:30px;display:grid;place-items:center;background:var(--ink);color:var(--accent);border-radius:7px}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .brand-mark svg{stroke:none;width:19px;height:19px}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .brand-divider{color:var(--muted);font-weight:400;margin:0 7px}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .brand-caption{font-size:var(--ui-font-size-sm);color:var(--muted);font-weight:400}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .local-indicator{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:var(--ui-font-size-xs)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .local-indicator>span,:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .status-dot{width:6px;height:6px;display:inline-block;border-radius:50%;background:var(--ui-success)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .local-indicator>span{background:var(--ui-ink-faint)}
.prompt-studio-page main{max-width:1380px;padding:48px 40px 24px;margin:auto}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .page-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:30px}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .eyebrow{font:12px/1.5 var(--mono);letter-spacing:.15em;color:var(--muted);margin:0 0 9px}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) h1{font-size:32px;line-height:1.3;font-weight:500;letter-spacing:-.035em;margin:0}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) h1>span{font-family:var(--serif);font-weight:500;letter-spacing:-.02em}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .page-description{margin:12px 0 0;font-size:var(--ui-font-size-sm);color:var(--muted)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .draft-state{display:flex;gap:8px;align-items:center;font-size:var(--ui-font-size-xs);color:var(--muted);padding-bottom:2px;max-width:45%}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .panel{min-width:0;background:var(--white);border:1px solid var(--line);border-radius:14px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 3px 8px #28302002}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .panel-heading{height:79px;display:flex;align-items:center;justify-content:space-between;padding:0 23px;gap:12px}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .section-title{display:flex;gap:10px;align-items:center;white-space:nowrap}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) h2{font-size:var(--ui-font-size-md);font-weight:600;margin:0}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .section-number{font:12px var(--mono);color:var(--ui-ink-faint)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .count{font:12px var(--mono);color:var(--muted);border:1px solid var(--line);border-radius:5px;min-width:20px;text-align:center;padding:3px 5px}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .panel-actions{display:flex;gap:7px}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .button{min-height:var(--touch-target);padding:8px 12px;display:inline-flex;justify-content:center;align-items:center;gap:7px;border:1px solid transparent;border-radius:7px;font-size:var(--ui-font-size-xs);line-height:1.3;white-space:nowrap}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .button svg{width:15px;height:15px}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .secondary{background:var(--white);border-color:var(--line);color:var(--ink)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .secondary:hover{background:var(--ui-bg);border-color:var(--ui-success-soft)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .dark{background:var(--ink);color:var(--ui-surface)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .dark:hover{background:var(--ui-ink-soft)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .quiet{background:transparent;color:var(--muted)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .quiet:hover{background:var(--ui-bg);color:var(--ink)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .accent{background:var(--accent);color:var(--ui-ink);font-size:var(--ui-font-size-sm);font-weight:600;padding:13px 20px;min-height:47px;gap:19px}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .accent:hover{background:var(--ui-favorite-strong)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .assets-surface{position:relative;flex:1;min-height:360px;margin:0 17px;background:var(--ui-bg);border:1px dashed var(--ui-surface-muted);border-radius:10px;padding:14px;display:flex;flex-direction:column}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .assets-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(136px,1fr));gap:13px;align-content:start}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .assets-grid:empty{display:none}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .asset-card{min-width:0;border:1px solid var(--ui-surface-muted);border-radius:9px;overflow:hidden;background:var(--ui-surface);position:relative;box-shadow:0 2px 4px #232f1503}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .card-top{min-height:48px;height:auto;display:flex;align-items:center;justify-content:space-between;padding:4px 7px 4px 11px;border-bottom:1px solid var(--ui-surface-muted)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .alias-button{border:0;padding:3px 0;min-height:var(--touch-target);display:flex;align-items:center;gap:7px;background:none;color:var(--ui-ink-soft);font:12px var(--sans);font-weight:600}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .alias-button svg{width:14px;height:14px}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .alias-button:hover{color:var(--ui-favorite-strong)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .icon-button{display:grid;place-items:center;width:var(--touch-target);height:var(--touch-target);min-width:var(--touch-target);min-height:var(--touch-target);border:0;border-radius:5px;background:transparent;color:var(--muted);flex-shrink:0}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .icon-button:hover{background:var(--ui-surface-muted);color:var(--ink)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .icon-button svg{width:15px;height:15px}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .asset-preview{height:169px;width:100%;display:block;position:relative;padding:0;border:0;background:var(--ui-surface-muted);overflow:hidden}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .asset-preview img,:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .asset-preview video{width:100%;height:100%;object-fit:contain;display:block}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .video-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:33px;height:33px;border-radius:50%;background:#ffffffd9;box-shadow:0 2px 15px #0001}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .video-play svg{width:13px;height:13px;fill:var(--ink);stroke-width:1}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .media-caption{position:absolute;bottom:6px;right:6px;font:12px var(--mono);padding:3px 5px;border-radius:4px;background:#232920b5;color:white}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .card-bottom{padding:10px 11px 9px}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .filename{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--ui-font-size-xs);color:var(--ui-muted)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .file-meta{font:12px/1.6 var(--mono);color:var(--ui-ink-faint);margin-top:3px;display:block}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .empty-state{border:0;background:transparent;display:flex;align-items:center;justify-content:center;flex-direction:column;flex:1;color:var(--muted);min-height:325px;padding:25px 0;text-align:center}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .empty-state strong{margin-top:24px;color:var(--ui-muted);font-size:var(--ui-font-size-sm);font-weight:500}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .empty-state>span:not(.empty-art){margin-top:8px;font-size:var(--ui-font-size-xs)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .empty-state small{font-size:var(--ui-font-size-xs);margin-top:6px;color:var(--ui-ink-faint)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .empty-art{width:125px;height:100px;position:relative;display:block}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .empty-photo,:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .empty-film{position:absolute;width:69px;height:85px;border:1px solid var(--ui-success-soft);border-radius:7px;background:var(--ui-surface);display:grid;place-items:center;box-shadow:0 4px 8px #23340b05}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .empty-photo{left:15px;top:0;transform:rotate(-12deg);color:var(--ui-success)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .empty-film{right:6px;top:12px;transform:rotate(11deg);color:var(--ui-success);background:var(--ui-warning-soft)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .empty-photo svg{width:25px;height:25px;stroke-width:1}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .empty-film svg{width:22px;height:22px;stroke-width:1.3}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .empty-plus{position:absolute;right:-2px;top:0;width:25px;height:25px;display:grid;place-items:center;font:20px var(--sans);border-radius:50%;background:var(--accent);border:3px solid var(--ui-bg);color:var(--ui-favorite-strong)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .drop-overlay{display:none;position:absolute;inset:0;z-index:4;border-radius:9px;background:#edf3d9f5;align-items:center;justify-content:center;flex-direction:column;gap:14px;color:var(--ui-success);border:1px solid var(--ui-success)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .drag-over .drop-overlay{display:flex}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .panel-footnote{display:flex;align-items:center;gap:8px;padding:15px 23px;color:var(--ui-ink-placeholder);font-size:var(--ui-font-size-xs);min-height:62px}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .panel-footnote svg{width:13px;height:13px}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .panel-footnote p{margin:0}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .prompt-body{padding:0 23px;flex:1;display:flex}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .prompt-body textarea{width:100%;min-height:360px;resize:vertical;border:0;border-top:1px solid var(--ui-surface-muted);padding:22px 14px 20px;background:transparent;color:var(--ui-ink-soft);font-size:var(--ui-font-size-sm);line-height:2;outline-offset:5px}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .prompt-body textarea::placeholder{color:var(--ui-ink-faint);font-size:var(--ui-font-size-sm);line-height:2}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .prompt-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:17px 23px;color:var(--ui-ink-faint);font-size:var(--ui-font-size-xs);min-height:62px}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .prompt-footer>span:first-child{display:flex;align-items:center;gap:7px}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .prompt-footer svg{width:12px;height:12px}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .char-count{font:12px var(--mono);white-space:nowrap}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .generation-panel{background:var(--ui-surface);border:1px solid var(--line);border-radius:14px;margin-top:23px;padding:22px 27px 15px}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .generation-top{display:flex;justify-content:space-between;align-items:center;gap:15px}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .model-title{display:flex;align-items:center;gap:11px}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .model-title h2{font-size:var(--ui-font-size-sm)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .model-title div>span{font:12px var(--mono);color:var(--muted)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .model-mark{display:grid;place-items:center;width:32px;height:32px;background:var(--ui-surface-muted);border:1px solid var(--ui-warning-soft);border-radius:8px;color:var(--ui-success);font:17px var(--serif)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .fixed-specs{display:flex;gap:9px;font:12px var(--mono);color:var(--ui-ink-placeholder)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .fixed-specs>span{border:1px solid var(--ui-surface-muted);padding:5px 9px;border-radius:5px}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .spec-divider{margin:0 8px;color:var(--ui-success-soft)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .setting-group{margin:0;padding:0;min-width:0;border:0}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .setting-group>label,:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .setting-group>legend{display:block;font-size:var(--ui-font-size-xs);color:var(--ui-ink-placeholder);margin-bottom:8px}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .setting-group select,:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .setting-group input{border:1px solid var(--ui-surface-muted);border-radius:6px;color:var(--ui-ink-soft);background:var(--ui-bg);min-height:38px;padding:7px 10px;font-size:var(--ui-font-size-xs);width:100%;font-family:var(--mono)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .setting-group select{font-family:var(--sans)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .time-range{display:flex;align-items:center;gap:9px}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .time-range>span:not(.unit){color:var(--ui-ink-faint)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .time-range input{min-width:0;width:83px}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .unit{font-size:var(--ui-font-size-xs);color:var(--ui-muted)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .estimate{text-align:right;min-width:78px}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .estimate>span{font-size:var(--ui-font-size-xs);color:var(--ui-muted);display:block}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .estimate strong{font:23px/1.3 var(--serif);letter-spacing:-.03em}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .generation-note{display:flex;justify-content:space-between;gap:16px;border-top:1px solid var(--ui-surface-muted);margin-top:20px;padding-top:11px;font-size:var(--ui-font-size-xs);color:var(--ui-ink-faint)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .page-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:23px;color:var(--ui-ink-faint);font-size:var(--ui-font-size-xs)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .page-footer>span:last-child{font:12px var(--mono);letter-spacing:.09em}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .footer-dot{padding:0 8px}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .setting-group legend>span{font:12px var(--mono);color:var(--ui-ink-faint);margin-left:5px}
:where(#library-dialog, #preview-dialog, #config-dialog, .prompt-studio-page dialog){border:1px solid var(--ui-surface-muted);border-radius:14px;box-shadow:0 25px 100px #1820122b;color:var(--ink);padding:0;max-height:85vh;width:min(790px,calc(100% - 32px));background:var(--ui-surface);overflow:hidden}
:where(#library-dialog, #preview-dialog, #config-dialog, .prompt-studio-page dialog)[open]{display:flex;flex-direction:column}
:where(#library-dialog, #preview-dialog, #config-dialog, .prompt-studio-page dialog)::backdrop{background:#20271c63;backdrop-filter:blur(5px)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .dialog-heading{display:flex;align-items:center;justify-content:space-between;padding:24px 27px;border-bottom:1px solid var(--line);gap:16px}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .dialog-heading h2{font-size:18px;font-weight:500}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .dialog-heading .eyebrow{font-size:var(--ui-font-size-xs);margin-bottom:4px}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .dialog-heading .icon-button{border:1px solid var(--line);width:31px;height:31px}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .library-tools{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:20px 27px}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .filters{display:flex;border:1px solid var(--line);border-radius:6px;padding:3px;background:var(--ui-bg)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .filters button{border:0;border-radius:4px;background:transparent;padding:5px 15px;min-height:var(--touch-target);font-size:var(--ui-font-size-xs);color:var(--ui-ink-placeholder)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .filters button[aria-pressed=true]{background:var(--ui-surface);color:var(--ui-ink-soft);box-shadow:0 1px 3px #25310912}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .search-box{display:flex;align-items:center;min-height:var(--touch-target);gap:8px;color:var(--ui-ink-faint);border:1px solid var(--line);padding:7px 10px;background:var(--ui-surface);border-radius:6px}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .search-box input{width:140px;border:0;background:none;font-size:var(--ui-font-size-xs);outline:0}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .search-box svg{width:14px;height:14px}
#library-status{margin:0;font-size:var(--ui-font-size-xs);color:var(--muted)}
/* 素材库的一层文件夹：与工作台其它选择器保持同一套目录语义。 */
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .library-path{display:flex;align-items:center;gap:8px;padding:10px 27px 0;font-size:var(--ui-font-size-xs);color:var(--muted)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .library-path button{min-height:32px;padding:4px 10px;border:1px solid var(--line);border-radius:6px;background:var(--ui-surface);color:var(--accent,var(--ui-success));font-size:var(--ui-font-size-xs);cursor:pointer}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .library-folders{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;padding:10px 27px 0}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .library-folder{display:flex;align-items:center;gap:8px;min-width:0;padding:10px;border:1px solid var(--line);border-radius:8px;background:var(--ui-surface);color:var(--ink,var(--ui-ink));cursor:pointer;text-align:left}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .library-folder svg{width:18px;height:18px;flex:0 0 auto;color:var(--ui-favorite-strong)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .library-folder strong{display:block;font-size:var(--ui-font-size-xs);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .library-folder small{display:block;margin-top:2px;color:var(--muted);font-size:var(--ui-font-size-xs)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .dialog-status{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:0 27px;min-height:28px}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .dialog-status .button{min-height:36px;padding:6px 10px;font-size:var(--ui-font-size-xs)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .library-grid{padding:8px 27px 24px;display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:13px;max-height:50vh;overflow:auto}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .library-card{position:relative;display:block;border:1px solid var(--line);background:var(--ui-surface);border-radius:8px;overflow:hidden;cursor:pointer;min-width:0}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .library-card:has(input:checked){border-color:var(--ui-favorite-strong);box-shadow:0 0 0 2px #b8cc8552}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .library-card:has(input:disabled){opacity:.5;cursor:default}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .library-card input{position:absolute;top:9px;right:9px;z-index:2;accent-color:var(--ui-success);width:17px;height:17px}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .library-card>img,:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .library-card>video{width:100%;height:152px;display:block;object-fit:contain;background:var(--ui-surface-muted)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .library-card .file-kind{position:absolute;z-index:1;left:8px;top:8px;font-size:var(--ui-font-size-2xs);background:var(--ui-glass-dark);color:var(--ui-action-on-primary);padding:2px 8px;border-radius:999px}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .library-card .filename{margin:10px;font-size:var(--ui-font-size-xs)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .dialog-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:17px 27px;border-top:1px solid var(--line);background:var(--ui-bg);font-size:var(--ui-font-size-xs);color:var(--muted);position:sticky;bottom:0}
#preview-dialog{max-width:800px}
#preview-dialog #preview-media{height:min(62vh,620px);background:var(--ui-surface-muted);display:flex;justify-content:center}
#preview-dialog img,#preview-dialog video{display:block;max-width:100%;height:100%;object-fit:contain}
#preview-dialog>p{margin:15px 26px;color:var(--ui-ink-placeholder);overflow-wrap:anywhere;font-size:var(--ui-font-size-xs)}
#config-dialog{max-width:620px}
#config-content{padding:23px 27px;max-height:55vh;overflow:auto;overscroll-behavior:contain}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .config-summary{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .config-summary span{padding:7px 11px;background:var(--ui-surface-subtle);border:1px solid var(--ui-line);border-radius:var(--ui-radius-sm);font-size:var(--ui-font-size-xs)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .config-label{display:block;font-size:var(--ui-font-size-xs);color:var(--ui-muted);margin:16px 0 8px}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .config-assets{margin:0;padding:0;list-style:none}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .config-assets li{display:flex;gap:15px;border-bottom:1px solid var(--ui-surface-muted);padding:8px 0;font-size:var(--ui-font-size-xs)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .config-assets li>span{min-width:40px;color:var(--ui-favorite-strong)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .config-assets li>strong{font-weight:400;overflow-wrap:anywhere;min-width:0}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .prompt-review{white-space:pre-wrap;overflow-wrap:anywhere;font:13px/1.9 var(--sans);padding:15px;background:var(--ui-bg);border:1px solid var(--ui-surface-muted);border-radius:7px;max-height:220px;overflow:auto}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .error-list{color:var(--ui-danger);background:var(--ui-surface-muted);border:1px solid var(--ui-warning-soft);border-radius:7px;font-size:var(--ui-font-size-xs);line-height:2.1;padding:13px 15px 13px 30px;margin:0}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .review-note{font-size:var(--ui-font-size-xs);color:var(--ui-muted);line-height:var(--ui-line-height-relaxed)}
#toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);z-index:30;background:var(--ui-ink);color:var(--ui-bg);padding:12px 20px;box-shadow:0 6px 25px #0002;border-radius:8px;font-size:var(--ui-font-size-xs);max-width:calc(100vw - 30px);display:flex;gap:16px;align-items:center}
#toast button{border:0;background:none;min-height:var(--touch-target);padding:8px 4px;color:var(--accent);font-size:var(--ui-font-size-xs);white-space:nowrap}
#toast-message{overflow-wrap:anywhere}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .filename,:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .file-meta,:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .generation-note,:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .page-description,:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .panel-footnote,:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .review-note{overflow-wrap:anywhere}
@media(min-width:1450px){.prompt-studio-page main{padding-top:56px}:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .assets-surface{min-height:410px}:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .prompt-body textarea{min-height:410px}:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .asset-preview{height:182px}}
@media(max-width:1150px){.prompt-studio-page main{padding:34px 28px 20px}:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .panel-heading{padding:0 17px;flex-wrap:wrap;align-content:center;height:99px;gap:7px}:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .panel-actions{margin-left:auto}:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .section-title{gap:7px}}
@media(max-width:900px){:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .panel-heading{height:75px}:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .assets-surface{min-height:270px}:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .empty-state{min-height:245px}:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .prompt-body textarea{min-height:255px}:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .assets-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .generation-note{flex-direction:column;gap:4px}:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .page-heading{margin-bottom:24px}}
@media(max-width:560px){:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .topbar{height:66px;padding:0 20px}:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .brand{font-size:var(--ui-font-size-sm);gap:9px}:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .brand-caption,:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .brand-divider,:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .local-indicator{display:none}.prompt-studio-page main{padding:30px 16px 20px}:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) h1{font-size:28px}:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .eyebrow{font-size:8px}:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .page-heading{align-items:start;gap:15px}:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .draft-state{padding-top:24px;font-size:var(--ui-font-size-xs)}:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .page-description{font-size:var(--ui-font-size-xs)}:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .panel-heading{height:102px;align-content:center;padding:12px 16px}:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .panel-actions{width:100%;margin-left:0;justify-content:end}:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .prompt-panel .panel-heading{height:66px}:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .section-title h2{font-size:var(--ui-font-size-sm)}:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .assets-surface{margin:0 10px;padding:10px}:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .assets-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .asset-preview{height:172px}:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .panel-footnote{padding:15px 16px;align-items:start}:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .prompt-body{padding:0 18px}:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .prompt-footer{padding:15px 18px}:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .prompt-body textarea{min-height:265px}:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .generation-panel{padding:18px 17px 13px}:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .video-setting,:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .clip-setting,:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .time-range{width:100%}:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .time-range{gap:6px}:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .time-range input{width:calc((100% - 40px)/2)}:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .generation-submit .estimate{text-align:left}:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .generation-submit .button{min-width:155px}:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .fixed-specs{gap:5px;font-size:var(--ui-font-size-xs)}:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .fixed-specs>span{padding:4px 6px}:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .page-footer{font-size:var(--ui-font-size-xs)}:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .page-footer>span:last-child{display:none}:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .dialog-heading{padding:20px}:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .library-tools{padding:15px 20px;flex-wrap:wrap}:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .search-box{width:100%}:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .search-box input{width:100%}:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .library-grid{padding:8px 20px 20px;grid-template-columns:repeat(2,minmax(0,1fr));max-height:52vh}:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .dialog-footer{padding:16px 20px;gap:10px}:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .dialog-status{padding:0 20px;align-items:flex-start;flex-direction:column;gap:7px}:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .dialog-status .button{width:100%}:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .library-card>img,:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .library-card>video{height:158px}#config-content{padding:20px}#toast{font-size:var(--ui-font-size-xs);bottom:15px;padding:12px 15px}}
@media(prefers-reduced-motion:reduce){:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) *, :where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast){transition:none!important;scroll-behavior:auto!important}}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .prompt-actions{display:flex;align-items:center;gap:6px}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .prompt-footer{flex-wrap:wrap}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .char-count{margin-left:auto}
@media(max-width:560px){:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .prompt-panel .panel-heading{height:auto;min-height:78px;padding-top:14px;padding-bottom:14px}:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .prompt-actions{margin-left:auto}:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .page-footer{line-height:1.8}}
/* Let the page grow with its stacked content so the generation controls stay reachable
   when the browser is zoomed or the viewport is shorter than the full form. */ .prompt-studio-view{height:auto;min-height:calc(100dvh - 100px);overflow:visible}
@media(max-width:560px){.prompt-studio-view{height:auto;min-height:calc(100dvh - 88px - 63px)}}
/* Keep modal controls touch friendly even when the dialog heading has a compact visual style. */ :where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .dialog-heading .icon-button{width:var(--touch-target);height:var(--touch-target);min-width:var(--touch-target);min-height:var(--touch-target)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .dialog-status .button{min-height:var(--touch-target)}
/* Visual system: a quiet Apple-like canvas with one shared black-purple brand accent. */ :where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) :root{color-scheme:light}
.prompt-studio-page{background:var(--ui-bg);color:var(--ui-ink);min-height:100vh}
.prompt-studio-page main{width:min(100%,1380px);max-width:none;padding-top:32px}

:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .topbar{background:#f8f7fbcc;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom-color:var(--ui-surface-muted);position:sticky;top:0;z-index:10}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .brand-mark{background:linear-gradient(145deg,var(--ui-ink),var(--ui-accent-strong));box-shadow:0 5px 16px rgba(54,31,100,.24)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .brand-caption{color:var(--muted)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .local-indicator>span{background:var(--accent-purple)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .page-heading{margin-bottom:34px}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .eyebrow{color:var(--ui-ink-placeholder);letter-spacing:.18em}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .page-description{color:var(--ui-ink-placeholder)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .panel,:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .generation-panel{border-color:var(--ui-surface-muted);box-shadow:var(--shadow-card)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .panel{background:var(--ui-surface)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .panel-heading{border-bottom:1px solid var(--ui-surface-muted)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .section-number{color:var(--muted)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .count{border-color:var(--ui-accent-soft);color:var(--ui-accent);background:var(--ui-surface)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .button{border-radius:9px;font-weight:550;transition:background .18s,border-color .18s,box-shadow .18s,transform .18s}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .button:focus-visible,:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .setting-group select:focus-visible,:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .setting-group input:focus-visible,:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .prompt-body textarea:focus-visible{box-shadow:0 0 0 4px #7357d833;outline-color:var(--focus-ring)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .secondary{background:var(--ui-surface);border-color:var(--ui-surface-muted);color:var(--ui-ink)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .secondary:hover{background:var(--surface-tint);border-color:var(--ui-accent-soft)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .dark{background:var(--ui-ink);color:var(--ui-surface);box-shadow:0 6px 16px rgba(32,23,48,.15)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .dark:hover{background:var(--ui-accent-strong)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .quiet{color:var(--ui-ink-placeholder)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .quiet:hover{background:var(--surface-tint);color:var(--ui-accent-strong)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .accent{background:var(--ui-accent);color:var(--ui-surface);box-shadow:0 6px 18px rgb(80 61 176 / 22%)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .accent:hover{background:var(--ui-accent-strong);box-shadow:0 8px 20px rgb(80 61 176 / 28%)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .assets-surface{background:linear-gradient(180deg,var(--ui-bg),var(--ui-bg));border-color:var(--ui-accent-soft)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .asset-card{border-color:var(--ui-surface-muted);box-shadow:0 8px 22px rgba(40,26,70,.06)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .card-top{border-bottom-color:var(--ui-surface-muted)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .alias-button{color:var(--ui-accent-strong)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .alias-button:hover{color:var(--accent-purple)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .icon-button:hover{background:var(--surface-tint);color:var(--ui-accent-strong)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .asset-preview{background:var(--ui-surface-muted)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .media-caption{background:#231a32c7}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .empty-state strong{color:var(--ui-muted)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .empty-photo,:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .empty-film{border-color:var(--ui-accent-soft)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .empty-film{background:var(--ui-surface-muted);color:var(--ui-accent)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .empty-plus{background:var(--accent);border-color:var(--ui-bg)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .drop-overlay{background:#eee8fff2;color:var(--ui-accent-strong);border-color:var(--ui-accent-soft)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .panel:focus-within{border-color:var(--ui-accent-soft);box-shadow:0 0 0 3px #7357d81a,var(--shadow-card)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .prompt-body textarea{color:var(--ui-ink-soft);border-top-color:var(--ui-surface-muted);line-height:1.85;padding:22px 14px 20px}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .prompt-body textarea::placeholder{color:var(--ui-ink-faint)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .prompt-footer,:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .panel-footnote{color:var(--muted)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .prompt-footer{border-top-color:var(--ui-surface-muted)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .generation-panel{background:linear-gradient(135deg,var(--ui-surface) 0%,var(--ui-surface) 100%)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .generation-top{padding-bottom:3px}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .model-mark{background:linear-gradient(145deg,var(--ui-bg),var(--ui-surface-muted));border-color:var(--ui-accent-soft);color:var(--ui-accent)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .fixed-specs{color:var(--ui-ink-placeholder)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .fixed-specs>span{border-color:var(--ui-accent-soft);background:var(--ui-surface)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .setting-group>label,:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .setting-group>legend{color:var(--ui-ink-placeholder)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .setting-group select,:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .setting-group input{border-color:var(--ui-accent-soft);background:var(--ui-surface);color:var(--ui-ink-soft)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .setting-group select:hover,:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .setting-group input:hover{border-color:var(--ui-accent-soft)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .generation-note{border-top-color:var(--ui-surface-muted);color:var(--ui-ink-placeholder)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .page-footer{color:var(--muted)}
:where(#library-dialog, #preview-dialog, #config-dialog, .prompt-studio-page dialog){border-color:var(--ui-accent-soft);background:var(--ui-surface);box-shadow:0 25px 100px #29173d30}
:where(#library-dialog, #preview-dialog, #config-dialog, .prompt-studio-page dialog)::backdrop{background:#21152eb5;backdrop-filter:blur(8px)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .dialog-heading{border-bottom-color:var(--ui-surface-muted)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .dialog-heading .icon-button{border-color:var(--ui-accent-soft)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .filters{border-color:var(--ui-accent-soft);background:var(--ui-bg)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .filters button[aria-pressed=true]{background:var(--ui-surface);color:var(--ui-accent-strong);box-shadow:0 2px 7px #3722551a}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .search-box{border-color:var(--ui-accent-soft);background:var(--ui-surface)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .library-grid{scrollbar-color:var(--ui-accent-soft) transparent}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .library-card{border-color:var(--ui-surface-muted)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .library-card:has(input:checked){border-color:var(--ui-accent);box-shadow:0 0 0 3px #aa91dc40}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .dialog-footer{border-top-color:var(--ui-surface-muted);background:var(--ui-bg)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .prompt-review{background:var(--ui-bg);border-color:var(--ui-accent-soft)}
#toast{background:var(--ui-ink);box-shadow:0 12px 35px #1d102e45}
#toast button{color:var(--accent)}
@media(max-width:560px){:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .generation-top{flex-wrap:wrap}:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .page-heading{display:block}:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .draft-state{max-width:none;margin-top:14px;padding-top:0}:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .topbar{position:relative}.prompt-studio-page main{padding-left:16px;padding-right:16px}:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .panel,:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .generation-panel{border-radius:12px}}
@media(max-width:380px){:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .assets-grid{grid-template-columns:1fr}:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .asset-preview{height:190px}:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .fixed-specs{width:100%;justify-content:flex-start}:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .generation-submit .button{min-width:0;flex:1}}
/* Shared semantic states. Brand actions stay purple; green is not used as a
   competing page accent. */ :where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .local-indicator > span,:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .status-dot{ background: var(--ui-accent); }
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .accent{ background: var(--ui-accent); color: var(--ui-surface); }
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .accent:hover{ background: var(--ui-accent-strong); }
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .empty-film{ background: var(--ui-accent-soft); color: var(--ui-accent-strong); }
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .empty-plus{ background: var(--ui-accent); color: var(--ui-surface); }
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .drop-overlay{ background: rgb(240 237 255 / 95%); color: var(--ui-accent-strong); border-color: var(--ui-accent-soft); }
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .model-mark{ color: var(--ui-accent-strong); }
/* Embedded and standalone Prompt Studio share the workbench topbar rhythm. */ :where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .topbar{height:var(--ui-topbar-height);min-height:var(--ui-topbar-height);padding-block:0}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .dialog-heading{background:var(--ui-surface-overlay);backdrop-filter:blur(18px)}
:where(#library-dialog, #preview-dialog, #config-dialog, .prompt-studio-page dialog){border-color:var(--ui-line);border-radius:var(--ui-radius-lg);box-shadow:var(--ui-shadow-float);background:var(--ui-surface)}
:where(#library-dialog, #preview-dialog, #config-dialog, .prompt-studio-page dialog)::backdrop{background:rgb(33 25 52 / 58%);backdrop-filter:blur(10px)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .dialog-footer{background:var(--ui-surface-subtle);border-top-color:var(--ui-line);padding:var(--ui-space-5) var(--ui-space-7)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .library-card,:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .search-box,:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .filters{border-color:var(--ui-line)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .library-card:hover{border-color:var(--ui-focus);box-shadow:var(--ui-shadow-card)}
@media(max-width:560px){:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .topbar{height:var(--ui-topbar-height-compact);min-height:var(--ui-topbar-height-compact)}}
/* Keep media picker cards readable when the floating window is constrained. */ :where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .library-grid{min-height:0;align-content:start;grid-template-columns:repeat(auto-fill,minmax(144px,1fr));overflow:auto}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .library-card{min-width:144px}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .library-card>img,:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .library-card>video{min-height:152px}
#preview-dialog #preview-media{min-height:240px;max-height:min(62vh,620px)}
@media(max-width:560px){:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .library-grid{grid-template-columns:repeat(2,minmax(136px,1fr));}:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .library-card{min-width:0}#preview-dialog #preview-media{min-height:200px;max-height:58vh}}
/* Prevent flex/grid shrink from collapsing project library media cards. */ #library-grid{flex:1 1 auto;min-height:300px;grid-auto-rows:max-content;align-content:start}
@media(max-width:560px){#library-grid{min-height:260px}}
/* Keep references next to the editor, with explicit text for unavailable assets. */ :where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .reference-tools{padding:15px 23px 12px;border-bottom:1px solid var(--ui-line)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .reference-tools-label{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;font-size:var(--ui-font-size-xs);color:var(--ui-ink)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .reference-tools-label small,:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .reference-empty{font-size:var(--ui-font-size-xs);color:var(--ui-muted)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .reference-toolbar,:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .prompt-references{display:flex;flex-wrap:wrap;gap:6px}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .reference-toolbar{margin-top:10px;max-height:118px;overflow:auto;padding:3px}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .reference-insert,:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .reference-mention{display:inline-flex;align-items:center;gap:7px;min-height:var(--touch-target);padding:7px 10px;border:1px solid var(--ui-line);border-radius:8px;background:var(--ui-surface);color:var(--ui-ink);font-size:var(--ui-font-size-xs)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .reference-insert svg{width:15px;height:15px;color:var(--ui-accent)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .reference-insert small,:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .reference-mention small{font-size:var(--ui-font-size-xs);color:var(--ui-muted)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .reference-insert:hover,:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .reference-mention:hover{border-color:var(--ui-accent);background:var(--ui-accent-soft)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .reference-feedback{padding:12px 23px;border-top:1px solid var(--ui-line);font-size:var(--ui-font-size-xs)}
#prompt-reference-status{display:block;color:var(--ui-muted)}
#prompt-reference-status[data-state=warning]{color:var(--ui-danger)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .prompt-references:not(:empty){margin-top:8px}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .reference-mention[data-state=missing],:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .reference-mention[data-state=inactive]{border-color:var(--ui-danger);color:var(--ui-danger)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .reference-mention[data-state=missing] small,:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .reference-mention[data-state=inactive] small{color:inherit}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .prompt-body textarea[aria-invalid=true]{box-shadow:inset 3px 0 var(--ui-danger)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .prompt-actions [hidden]{display:none}
@media(max-width:560px){:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .reference-tools,:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .reference-feedback{padding-left:18px;padding-right:18px}:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .reference-tools-label{display:block}:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .reference-tools-label small{display:block;margin-top:3px}:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .reference-mention{flex-wrap:wrap;max-width:100%}}


#quote-feedback{font-size:var(--ui-font-size-xs);line-height:1.6;color:var(--ui-muted,var(--ui-ink-placeholder));overflow-wrap:anywhere;margin-top:8px}
#quote-feedback button{margin-left:8px;font-size:var(--ui-font-size-xs)}
/* Quick generation controls own their icon strokes and destructive affordance. */ :where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .asset-card svg{stroke:currentColor;fill:none;stroke-linecap:round;stroke-linejoin:round}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .asset-card .remove-asset{background:var(--ui-bg);color:var(--ui-danger);border:1px solid var(--ui-danger-soft);opacity:1;padding:8px}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .asset-card .remove-asset svg{width:20px;height:20px;stroke:currentColor;stroke-width:2.6;fill:none}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .asset-card .remove-asset:hover,:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .asset-card .remove-asset:focus-visible{background:var(--ui-danger);color:var(--ui-surface);border-color:var(--ui-danger)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .quick-workspace-actions{display:flex;justify-content:flex-end;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .quick-workspace-actions [role=status]{margin-right:auto;color:var(--ui-danger)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .generation-feedback{font-size:var(--ui-font-size-sm);line-height:1.7;white-space:normal;overflow-wrap:anywhere;color:var(--ui-ink,var(--ui-ink-soft));margin:12px 0}

@media (pointer: coarse) {
  :where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .setting-group select,
  :where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .setting-group input,
  :where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .search-box input,
  :where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .prompt-body textarea{
    min-height: var(--ui-touch-target, 44px);
  }

  .prompt-studio-page .topbar .brand{
    min-height: var(--ui-touch-target, 44px);
    display: inline-flex;
    align-items: center;
  }
}


/* Composition shared by the embedded view and standalone preview. */
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .quick-layout{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  align-items: start;
  gap: var(--ui-space-6);
  min-width: 0;
}

:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .quick-layout .workspace{
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-5);
  min-width: 0;
}

:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .quick-layout .panel,
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .quick-layout .generation-panel{
  min-width: 0;
  border: 0;
  border-radius: var(--ui-radius-lg);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-card);
}

:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .quick-layout .panel:focus-within{
  box-shadow: 0 0 0 1px var(--ui-accent-edge), var(--ui-shadow-card);
}

:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .quick-layout .panel-heading{
  min-height: 64px;
  height: auto;
  padding: var(--ui-space-3) var(--ui-space-5);
  flex-wrap: wrap;
  border-bottom: 1px solid var(--ui-line);
}

:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .quick-layout h2{
  font-size: var(--ui-font-size-lg);
}

:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .section-title small{
  margin-left: var(--ui-space-2);
  font-size: var(--ui-font-size-xs);
  font-weight: var(--ui-font-weight-regular);
  color: var(--ui-muted);
}

:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .quick-layout .prompt-body{
  padding: var(--ui-space-4) var(--ui-space-5) 0;
}

:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .quick-layout .prompt-body textarea{
  min-height: 240px;
  height: 240px;
  border: 0;
  padding: var(--ui-space-1) 0;
  border-radius: 0;
  background: var(--ui-surface);
  color: var(--ui-ink);
  font: var(--ui-font-size-md)/var(--ui-line-height-relaxed) var(--ui-font-family-sans);
}

:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .quick-layout .prompt-body textarea::placeholder{
  color: var(--ui-ink-placeholder);
  font-size: var(--ui-font-size-md);
}

:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .quick-layout .prompt-footer{
  min-height: 44px;
  padding: var(--ui-space-3) var(--ui-space-5);
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
}

:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .quick-layout .assets-surface{
  min-height: 0;
  margin: var(--ui-space-4) var(--ui-space-5);
  padding: 0;
  border: 0;
  background: var(--ui-surface);
}

:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .quick-layout .assets-grid{
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr));
  gap: var(--ui-space-3);
  padding: 0;
}

:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .quick-layout .assets-grid:empty{
  display: none;
}

:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .quick-layout .empty-state{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--ui-space-2);
  width: 100%;
  min-height: 140px;
  padding: var(--ui-space-5);
  border: 1px dashed var(--ui-line-strong);
  border-radius: var(--ui-radius-md);
  background: var(--ui-surface-subtle);
  color: var(--ui-muted);
}

:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .quick-layout .empty-art{
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin: 0;
  transform: none;
  color: var(--ui-accent);
}

:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .quick-layout .empty-state strong{
  color: var(--ui-ink);
  font-size: var(--ui-font-size-md);
}

:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .quick-layout .empty-state > span,
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .quick-layout .panel-footnote{
  font-size: var(--ui-font-size-xs);
  color: var(--ui-muted);
}

:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .quick-layout .panel-footnote{
  padding: 0 var(--ui-space-5) var(--ui-space-4);
  margin: 0;
}

:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .quick-layout .asset-preview{
  height: 140px;
}

:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .quick-layout .asset-card{
  border-color: var(--ui-line);
  box-shadow: none;
}

:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .quick-layout .generation-panel{
  position: sticky;
  top: 0;
  margin: 0;
  padding: var(--ui-space-5);
}

:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .quick-layout .generation-top{
  flex-wrap: wrap;
  gap: var(--ui-space-3);
  padding-bottom: var(--ui-space-4);
  border-bottom: 1px solid var(--ui-line);
}

:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .quick-layout .generation-controls{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ui-space-4) var(--ui-space-3);
  margin-top: var(--ui-space-5);
}

:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .quick-layout .setting-group{
  min-width: 0;
  width: auto;
  margin: 0;
}

:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .quick-layout .setting-group:first-child,
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .quick-layout .video-refs-box,
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .quick-layout .generation-submit{
  grid-column: 1 / -1;
}

:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .quick-layout .video-refs-box{
  display: grid;
  gap: var(--ui-space-3);
  padding: var(--ui-space-3);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-sm);
  background: var(--ui-surface-subtle);
}

:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .quick-layout .video-refs-box .setting-hint{
  margin: 0;
  font-size: var(--ui-font-size-xs);
  color: var(--ui-muted);
  line-height: 1.5;
}

:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .quick-layout .setting-group :is(select, input){
  width: 100%;
  min-width: 0;
  min-height: var(--ui-touch-target);
  margin: 0;
  padding: var(--ui-space-2) var(--ui-space-3);
  border-color: var(--ui-line-strong);
  border-radius: var(--ui-radius-sm);
  background: var(--ui-surface);
  color: var(--ui-ink);
  font-family: var(--ui-font-family-sans);
  font-size: var(--ui-font-size-sm);
}

:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .quick-layout .setting-group :is(label, legend){
  font-size: var(--ui-font-size-xs);
  color: var(--ui-muted);
}

/* 原版音频开关：整行放置；上方通配的 select/input 尺寸只针对表单字段，轨道开关保持 28×16 */
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .quick-layout .original-audio-setting{
  grid-column: 1 / -1;
}

:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .quick-layout .original-audio-option{
  display: flex;
  align-items: center;
  gap: var(--ui-space-1);
}

:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .quick-layout .original-audio-option .ui-switch{
  min-height: var(--ui-touch-target);
  color: var(--ui-ink);
  font-size: var(--ui-font-size-sm);
}

:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .quick-layout .original-audio-option .ui-switch input[type="checkbox"]{
  width: 28px;
  height: 16px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--ui-line-strong);
}

:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .quick-layout .original-audio-option .ui-switch input[type="checkbox"]:checked{
  background: var(--ui-accent);
}

:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .quick-layout .generation-submit{
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--ui-space-3);
  width: 100%;
  margin: var(--ui-space-2) 0 0;
  padding-top: var(--ui-space-4);
  border-top: 1px solid var(--ui-line);
}

:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .quick-layout .estimate{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ui-space-2);
  text-align: left;
}

:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .quick-layout .estimate strong{
  font-family: var(--ui-font-family-sans);
  font-size: var(--ui-font-size-xl);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .quick-layout .estimate > span,
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .quick-layout .generation-note{
  font-size: var(--ui-font-size-xs);
  color: var(--ui-muted);
}

:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .quick-layout .generation-note{
  flex-direction: column;
  gap: var(--ui-space-2);
  margin-top: var(--ui-space-4);
  padding-top: var(--ui-space-3);
  border-color: var(--ui-line);
}

:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .quick-layout .button{
  min-height: var(--ui-touch-target);
  border-radius: var(--ui-radius-sm);
  font-size: var(--ui-font-size-sm);
  box-shadow: none;
}

:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .quick-layout .secondary{
  color: var(--ui-ink);
  background: var(--ui-surface);
  border-color: var(--ui-line);
}

:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .quick-layout .reference-tools,
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .quick-layout .reference-feedback{
  padding: var(--ui-space-3) var(--ui-space-5);
}

:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .quick-layout [hidden]{
  display: none;
}

@media (max-width: 1024px) {
  :where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .quick-layout{
    grid-template-columns: minmax(0, 1fr);
  }

  :where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .quick-layout .generation-panel{
    position: static;
  }

  :where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .quick-layout .generation-submit{
    position: sticky;
    bottom: 0;
    background: var(--ui-surface);
  }
}

@media (max-width: 480px) {
  :where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .quick-layout .panel-heading,
  :where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .quick-layout .generation-panel{
    padding: var(--ui-space-4);
  }

  :where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .quick-layout .panel-actions{
    flex-wrap: wrap;
    width: 100%;
  }

  :where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .quick-layout .prompt-body textarea{
    height: 200px;
    min-height: 200px;
  }
}

:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .quick-layout .empty-state > span:last-child{
  max-width: 100%;
  white-space: normal;
  line-height: var(--ui-line-height-relaxed);
  overflow-wrap: anywhere;
}

:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .dialog-footer .button{
  min-height: var(--ui-touch-target);
  box-shadow: none;
  border-radius: var(--ui-radius-sm);
}

:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .card-bottom:has(.material-description){
  flex-wrap: wrap;
}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .card-bottom .material-description,
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .card-bottom .material-status{
  width: 100%;
}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .library-card > .material-media{
  width: 100%;
}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .material-library-preview .material-pending{
  display: grid;
  place-items: center;
  min-height: 152px;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .material-controls button{
  min-height: var(--ui-touch-target);
}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .library-card .material-selection{
  display: flex;
  align-items: center;
  min-height: var(--ui-touch-target);
  gap: var(--ui-space-2);
  padding: var(--ui-space-2);
}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .library-card .material-selection input{
  position: static;
  flex: 0 0 auto;
  margin: 0;
  accent-color: var(--ui-accent);
}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .library-card .material-description,
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .library-card .material-status{
  padding: 0 var(--ui-space-2) var(--ui-space-2);
}
:where(#prompt-studio-view, .prompt-studio-page) .qs-upload-progress{display:flex;align-items:center;gap:10px;margin-top:10px}
:where(#prompt-studio-view, .prompt-studio-page) .qs-upload-progress[hidden]{display:none}
:where(#prompt-studio-view, .prompt-studio-page) .qs-upload-progress progress{flex:1;height:6px;accent-color:var(--accent);border:0}
:where(#prompt-studio-view, .prompt-studio-page) .qs-upload-progress b{flex:0 0 auto;min-width:40px;text-align:right;color:var(--accent);font-size:var(--ui-font-size-sm);font-weight:600;font-variant-numeric:tabular-nums}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .quick-layout .output-setting,:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .quick-layout .long-video-billing{grid-column:1 / -1}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .output-duration-heading,:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .output-duration-scale{display:flex;align-items:center;justify-content:space-between;gap:var(--ui-space-2)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .output-duration-heading output{font-size:var(--ui-font-size-lg);font-weight:var(--ui-font-weight-semibold);font-variant-numeric:tabular-nums;color:var(--ui-accent-strong)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .quick-layout .output-setting input[type="range"]{appearance:auto;min-height:var(--ui-touch-target);width:100%;padding:0;border:0;background:transparent;accent-color:var(--ui-accent);cursor:pointer}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .output-duration-scale,:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .output-duration-hint{margin:0;color:var(--ui-muted);font-size:var(--ui-font-size-xs);line-height:var(--ui-line-height-relaxed)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .long-video-billing{display:grid;gap:var(--ui-space-1);padding:var(--ui-space-3) var(--ui-space-4);border-inline-start:3px solid var(--ui-accent);border-radius:var(--ui-radius-sm);background:var(--ui-accent-wash);font-size:var(--ui-font-size-xs);line-height:var(--ui-line-height-relaxed);color:var(--ui-ink)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .long-video-billing strong{font-size:var(--ui-font-size-sm);color:var(--ui-accent-strong)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .long-video-billing.is-long{border-inline-start-color:var(--ui-warning);background:var(--ui-warning-soft)}:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .long-video-billing.is-long strong{color:var(--ui-warning)}
:where(#prompt-studio-view, .prompt-studio-page, #library-dialog, #preview-dialog, #config-dialog, #toast) .long-video-billing[hidden]{display:none}

}
/* /style.css */
@layer legacy {
/*
 * Legacy feature styles still referenced by app.js-rendered markup: record
 * rows, the preflight/config dialogs, provider tables, the toast and the
 * prompt-studio frame. Element defaults live in base.css, controls in
 * styles/controls.css and the shell in styles/shell.css + layout.css; do not
 * add element or shell selectors here. New styles go to styles/pages/.
 */
.eyebrow{color:var(--ui-muted);font-size:var(--ui-font-size-xs)}
.saved-empty{padding:4px 10px;color:var(--ui-muted);font-size:var(--ui-font-size-xs);line-height:1.8}

.preview{position:relative;display:grid;place-items:center;height:230px;overflow:hidden;border-radius:var(--ui-radius-md);background:var(--ui-surface-subtle)}
.preview video,.preview img{width:100%;height:100%;max-height:230px;object-fit:contain;background:var(--ui-surface-muted)}

.form-grid{display:grid;gap:var(--ui-space-3)}
.form-grid.two{grid-template-columns:1fr 1fr;margin-top:var(--ui-space-4)}
.notice{margin-top:var(--ui-space-4);padding:var(--ui-space-3) var(--ui-space-4);border-radius:var(--ui-radius-md);background:var(--ui-warning-soft);color:var(--ui-warning);font-size:var(--ui-font-size-xs);line-height:var(--ui-line-height-normal)}
#transfer-note{background:var(--ui-surface-subtle);color:var(--ui-muted)}
.estimate span{display:block;color:var(--ui-muted);font-size:var(--ui-font-size-xs)}
.estimate strong{display:block;margin-top:4px;font-size:var(--ui-font-size-xl);font-weight:var(--ui-font-weight-semibold);font-variant-numeric:tabular-nums}

.job-row{display:grid;grid-template-columns:1.6fr 1fr .8fr .6fr 24px;gap:var(--ui-space-3);align-items:center;min-height:64px;padding:var(--ui-space-4) var(--ui-space-5);border-bottom:1px solid var(--ui-line);background:var(--ui-surface);font-size:var(--ui-font-size-sm);cursor:pointer}
.job-row:hover{background:var(--ui-surface-subtle)}
.job-row small{display:block;margin-top:2px;color:var(--ui-muted);font-size:var(--ui-font-size-xs)}
.job-row>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.job-row .badge{justify-self:start}
.job-row svg{color:var(--ui-ink-faint)}

.results-layout{display:grid;grid-template-columns:280px 1fr;gap:var(--ui-space-6);align-items:start}
.experiment-list{min-width:0}
.experiment-item{display:block;width:100%;margin-bottom:var(--ui-space-2);padding:var(--ui-space-3);text-align:left;white-space:normal;line-height:1.5}
.experiment-item strong{display:block;margin-bottom:4px;font-size:var(--ui-font-size-sm);font-weight:var(--ui-font-weight-semibold)}
.experiment-item .experiment-info{display:flex;align-items:center;justify-content:space-between;gap:var(--ui-space-2)}
.experiment-item small{color:var(--ui-muted);font-size:var(--ui-font-size-xs)}
.comparison{min-width:0}
.comparison-title{display:flex;align-items:center;justify-content:space-between;gap:var(--ui-space-3);margin-bottom:var(--ui-space-4)}
.comparison-title p{margin:4px 0 0;color:var(--ui-muted);font-size:var(--ui-font-size-xs)}
.compare-controls{display:flex;align-items:center;justify-content:space-between;gap:var(--ui-space-3);margin:var(--ui-space-3) 0}
.compare-controls>div{display:flex;flex-wrap:wrap;gap:var(--ui-space-2)}
.job-error{margin:var(--ui-space-3) 0;padding:var(--ui-space-3) var(--ui-space-4);border-radius:var(--ui-radius-md);background:var(--ui-warning-soft);color:var(--ui-warning);font-size:var(--ui-font-size-xs);line-height:var(--ui-line-height-normal)}
.job-events{margin-top:var(--ui-space-4);color:var(--ui-muted);font-size:var(--ui-font-size-xs)}
.job-events summary{margin-bottom:var(--ui-space-3)}
.event{display:flex;gap:var(--ui-space-3);padding:6px var(--ui-space-3);border-left:1px solid var(--ui-line);font-size:var(--ui-font-size-xs)}
.event time{color:var(--ui-muted);white-space:nowrap}

#preflight-content{font-size:var(--ui-font-size-sm);line-height:var(--ui-line-height-normal)}
#preflight-content ul{padding-left:20px}
#preflight-content li{margin-bottom:6px}
#preflight-content details summary{margin:var(--ui-space-4) 0}
.errors{color:var(--ui-danger)}
.warnings{color:var(--ui-ink-soft)}
.preflight-summary{display:flex;gap:var(--ui-space-5);padding:var(--ui-space-4);border-radius:var(--ui-radius-md);background:var(--ui-surface-subtle);font-size:var(--ui-font-size-sm)}
.preflight-summary strong{margin-left:4px;font-size:var(--ui-font-size-lg)}
.price-note{color:var(--ui-muted);font-size:var(--ui-font-size-xs)}
.duration-warning{color:var(--ui-warning)}
.resume-box{display:flex;align-items:end;gap:var(--ui-space-2);margin:var(--ui-space-4) 0}
.resume-box input{max-width:320px;margin:0}

dialog:not([open]){display:none}

.prompt-studio-view{height:auto;max-width:none;padding:0;overflow:hidden}
.prompt-studio-frame{display:block;width:100%;height:100%;min-height:0;border:0;background:var(--ui-bg)}
#extract-frame{margin-top:var(--ui-space-4)}

.batch-preflight-list{margin:var(--ui-space-3) 0;padding:0;border-top:1px solid var(--ui-line);list-style:none}
.batch-preflight-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--ui-space-2) var(--ui-space-4);padding:var(--ui-space-3) 4px;border-bottom:1px solid var(--ui-line)}
.batch-preflight-item>span:first-child{min-width:0}
.batch-preflight-item strong,.batch-preflight-item small{display:block}
.batch-preflight-item strong{overflow:hidden;font-size:var(--ui-font-size-sm);text-overflow:ellipsis;white-space:nowrap}
.batch-preflight-item small{margin-top:2px;color:var(--ui-muted);font-size:var(--ui-font-size-xs)}
.batch-preflight-item>ul{grid-column:1/-1;margin:0}
.batch-ok{color:var(--ui-accent);font-weight:var(--ui-font-weight-semibold);font-variant-numeric:tabular-nums}
.batch-error{color:var(--ui-danger);font-weight:var(--ui-font-weight-semibold)}

#auth-gate[hidden]{display:none}
.auth-copy{margin:0 0 var(--ui-space-4);color:var(--ui-muted);font-size:var(--ui-font-size-sm);line-height:var(--ui-line-height-normal)}

#account-chip{display:flex;align-items:center;gap:var(--ui-space-3)}
#account-name{max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#account-balance{max-width:none;font-variant-numeric:tabular-nums}
#account-balance.is-empty{color:var(--ui-danger)}

/* Floating windows keep a stable shell; only their content areas scroll. */
dialog[open]{display:flex;flex-direction:column;min-width:0;max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px);overflow:hidden}
dialog[open] > :is(.dialog-body,#preflight-content,#config-content,.library-grid,.preview-dialog #preview-media){min-height:0}
#preflight-content,#config-content,.library-grid{overscroll-behavior:contain}
.library-grid{grid-template-columns:repeat(auto-fill,minmax(144px,1fr));align-content:start}
.library-card{min-width:144px}
.library-card>img,.library-card>video{height:152px;min-height:152px}
#library-grid{flex:1 1 auto;min-height:300px;grid-auto-rows:max-content;align-content:start}

.experiment-list #job-search{width:100%;min-width:0;margin-bottom:var(--ui-space-2)}
.job-pagination{margin-top:var(--ui-space-3);padding-top:var(--ui-space-3);border-top:1px solid var(--ui-line)}
.job-page-summary{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px;margin-bottom:var(--ui-space-2);color:var(--ui-muted);font-size:var(--ui-font-size-xs)}
.job-page-controls{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.job-page-controls #job-page{width:52px;min-width:0;padding:0 4px;text-align:center}

@media(min-width:1600px){.preview{height:280px}.preview video,.preview img{max-height:280px}}
@media(max-width:1024px){.preview{height:220px}.preview video,.preview img{max-height:220px}.results-layout{grid-template-columns:1fr}}
@media(max-width:480px){.preview{height:190px}.preview video,.preview img{max-height:190px}.job-row{grid-template-columns:1fr auto 20px}.job-row>span:nth-child(2),.job-row>span:nth-child(4){display:none}.compare-controls{align-items:flex-start;flex-direction:column}dialog[open]{width:calc(100vw - 24px);max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px)}#preflight-content{flex:1 1 auto;min-height:0;overflow:auto}.dialog-footer{flex-direction:column;flex:0 0 auto}.dialog-footer button{width:100%;white-space:normal}.library-grid{grid-template-columns:repeat(2,minmax(144px,1fr));overflow:auto}.library-card{min-width:0}#library-grid{min-height:260px}}

/* A refresh starts with session recovery, never a speculative login screen. */
[data-workspace-shell][inert]{visibility:hidden}

}
/* /workflow-graph.css */
@layer legacy {
.workflow-graph {
  --workflow-graph-zoom: 1;
  --z: var(--workflow-graph-zoom);
  --workflow-graph-ink: var(--ui-ink);
  --workflow-graph-muted: var(--ui-muted);
  --workflow-graph-line: var(--ui-line-strong);
  --workflow-graph-border: var(--ui-line);
  --workflow-graph-surface: var(--ui-surface);
  --workflow-graph-canvas: var(--ui-surface-subtle);
  --workflow-graph-accent: var(--ui-accent);
  --workflow-graph-accent-soft: var(--ui-accent-soft);
  position: relative;
  width: 100%;
  min-width: 0;
  min-height: 420px;
  overflow: hidden;
  border: 1px solid var(--workflow-graph-border);
  border-radius: 8px;
  background: var(--workflow-graph-canvas);
  color: var(--workflow-graph-ink);
  isolation: isolate;
}

.workflow-graph__viewport {
  position: absolute;
  inset: 0;
  min-width: 320px;
  min-height: 420px;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  outline: none;
}

.workflow-graph__viewport:focus-visible {
  box-shadow: inset 0 0 0 2px var(--workflow-graph-accent);
}

.workflow-graph__viewport.is-panning {
  cursor: grabbing;
  user-select: none;
}

.workflow-graph__scene {
  position: absolute;
  inset: 0 auto auto 0;
  transform-origin: 0 0;
}

.workflow-graph__edges,
.workflow-graph__nodes {
  position: absolute;
  inset: 0 auto auto 0;
}

.workflow-graph__edges {
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.workflow-graph__nodes {
  z-index: 1;
}

.workflow-graph__edge {
  fill: none;
  stroke: var(--workflow-graph-line);
  stroke-width: 1.75;
  vector-effect: non-scaling-stroke;
}

.workflow-graph__arrow {
  fill: var(--workflow-graph-line);
}

.workflow-graph__edge-group[data-status="active"] .workflow-graph__edge,
.workflow-graph__edge-group[data-status="running"] .workflow-graph__edge {
  stroke: var(--workflow-graph-accent);
  stroke-width: 2.25;
}

.workflow-graph__edge-group[data-status="active"] .workflow-graph__arrow,
.workflow-graph__edge-group[data-status="running"] .workflow-graph__arrow {
  fill: var(--workflow-graph-accent);
}

.workflow-graph__edge-group[data-variant="dashed"] .workflow-graph__edge,
.workflow-graph__edge-group[data-status="pending"] .workflow-graph__edge {
  stroke-dasharray: 6 5;
}

.workflow-graph__edge-label rect {
  fill: var(--workflow-graph-canvas);
  stroke: var(--workflow-graph-border);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.workflow-graph__edge-label text {
  fill: var(--ui-muted);
  font-family: "Avenir Next", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: var(--ui-font-size-xs);
  font-weight: 600;
  letter-spacing: 0;
}

.workflow-graph__node {
  position: absolute;
  box-sizing: border-box;
  left: calc(var(--node-x, 0px) * var(--z));
  top: calc(var(--node-y, 0px) * var(--z));
  width: calc(var(--node-w, 236px) * var(--z));
  height: calc(var(--node-h, 136px) * var(--z));
  padding: calc(14px * var(--z)) calc(15px * var(--z)) calc(15px * var(--z));
  overflow: hidden;
  border: 1px solid var(--ui-surface-muted);
  border-radius: calc(7px * var(--z));
  background: var(--workflow-graph-surface);
  box-shadow: 0 8px 24px rgba(24, 52, 36, 0.08);
  cursor: pointer;
  outline: none;
  font-size: calc(14px * var(--z));
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.workflow-graph__node:hover {
  border-color: var(--ui-ink-faint);
  box-shadow: 0 10px 26px rgba(24, 52, 36, 0.12);
  transform: translateY(-1px);
}

.workflow-graph__node:focus-visible,
.workflow-graph__node.is-selected {
  border-color: var(--workflow-graph-accent);
  box-shadow: 0 0 0 2px rgba(24, 121, 78, 0.16), 0 10px 26px rgba(24, 52, 36, 0.1);
}

.workflow-graph__node[data-variant="primary"] {
  border-top: calc(3px * var(--z)) solid var(--workflow-graph-accent);
  padding-top: calc(12px * var(--z));
}

.workflow-graph__node[data-variant="output"] {
  border-color: var(--ui-success);
  background: var(--ui-surface);
}

.workflow-graph__node[data-variant="muted"] {
  background: var(--ui-bg);
  box-shadow: none;
}

.workflow-graph__node-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  height: calc(20px * var(--z));
  gap: calc(8px * var(--z));
  margin-bottom: calc(12px * var(--z));
}

.workflow-graph__eyebrow {
  overflow: hidden;
  color: var(--ui-ink-placeholder);
  font-family: "Avenir Next", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: calc(10px * var(--z));
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.workflow-graph__status {
  flex: 0 0 auto;
  max-width: calc(86px * var(--z));
  padding: calc(4px * var(--z)) calc(7px * var(--z));
  overflow: hidden;
  border-radius: calc(6px * var(--z));
  background: var(--ui-surface-muted);
  color: var(--ui-muted);
  font-size: calc(10px * var(--z));
  font-weight: 650;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workflow-graph__node[data-status-tone="active"] .workflow-graph__status {
  background: var(--workflow-graph-accent-soft);
  color: var(--ui-success);
}

.workflow-graph__node[data-status-tone="ready"] .workflow-graph__status {
  background: var(--ui-surface-muted);
  color: var(--ui-success);
}

.workflow-graph__node[data-status-tone="warning"] .workflow-graph__status {
  background: var(--ui-warning-soft);
  color: var(--ui-warning);
}

.workflow-graph__node[data-status-tone="error"] .workflow-graph__status {
  background: var(--ui-surface-muted);
  color: var(--ui-danger);
}

/* The graph consumes the shared theme instead of maintaining a second brand. */
.workflow-graph__node[data-status-tone="active"] .workflow-graph__status,
.workflow-graph__node[data-status-tone="ready"] .workflow-graph__status {
  background: var(--workflow-graph-accent-soft);
  color: var(--ui-accent-strong);
}

.workflow-graph__badge {
  display: inline-block;
  align-self: flex-start;
  margin-top: calc(5px * var(--z));
  padding: calc(3px * var(--z)) calc(8px * var(--z));
  border: 1px solid var(--workflow-graph-accent);
  border-radius: 999px;
  background: var(--workflow-graph-accent-soft);
  color: var(--ui-accent-strong);
  font-size: calc(10px * var(--z));
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
  white-space: nowrap;
}
.workflow-graph__node[data-variant="output"] {
  border-color: var(--ui-line-strong);
  background: var(--ui-surface);
}

.workflow-graph__node-body {
  display: flex;
  align-items: center;
  min-width: 0;
  height: calc(72px * var(--z));
  gap: calc(12px * var(--z));
}

.workflow-graph__thumbnail,
.workflow-graph__icon,
.workflow-graph__index {
  flex: 0 0 calc(54px * var(--z));
  box-sizing: border-box;
  width: calc(54px * var(--z));
  height: calc(54px * var(--z));
  border: 1px solid var(--ui-surface-muted);
  border-radius: calc(6px * var(--z));
  background: var(--ui-surface-muted);
}

.workflow-graph__thumbnail {
  display: block;
  object-fit: cover;
}

.workflow-graph__icon,
.workflow-graph__index {
  display: grid;
  place-items: center;
  color: var(--workflow-graph-accent);
}

.workflow-graph__icon svg {
  width: calc(22px * var(--z));
  height: calc(22px * var(--z));
  stroke-width: 1.75;
}

.workflow-graph__index {
  color: var(--ui-ink-placeholder);
  font-family: "Avenir Next", "PingFang SC", sans-serif;
  font-size: calc(14px * var(--z));
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.workflow-graph__copy {
  min-width: 0;
}

.workflow-graph__copy h3 {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--workflow-graph-ink);
  font-family: "Avenir Next", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: calc(14px * var(--z));
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: 0;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.workflow-graph__copy p {
  display: -webkit-box;
  margin: 6px 0 0;
  overflow: hidden;
  color: var(--workflow-graph-muted);
  font-size: calc(11px * var(--z));
  line-height: 1.35;
  letter-spacing: 0;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.workflow-graph__empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: var(--workflow-graph-muted);
  font-size: var(--ui-font-size-sm);
  letter-spacing: 0;
}

.workflow-graph__empty-mark {
  position: relative;
  width: 54px;
  height: 34px;
}

.workflow-graph__empty-mark::before,
.workflow-graph__empty-mark::after {
  position: absolute;
  top: 8px;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  border: 1px solid var(--ui-ink-faint);
  border-radius: 5px;
  background: var(--ui-surface);
  content: "";
}

.workflow-graph__empty-mark::before {
  left: 0;
}

.workflow-graph__empty-mark::after {
  right: 0;
}

.workflow-graph__empty-mark {
  border-bottom: 1px solid var(--ui-ink-faint);
}

@media (max-width:768px) {
  .workflow-graph,
  .workflow-graph__viewport {
    min-height: 360px;
  }

  .workflow-graph__node {
    box-shadow: 0 6px 18px rgba(24, 52, 36, 0.07);
  }
}

@media (prefers-reduced-motion: reduce) {
  .workflow-graph__node {
    transition: none;
  }
}

/* Shared theme bridge. The graph keeps its geometry local and inherits all
   brand, status, focus and radius decisions from theme.css. */
.workflow-graph__edge-label text,
.workflow-graph__eyebrow,
.workflow-graph__index { color: var(--ui-muted); fill: var(--ui-muted); }
.workflow-graph__node { border-color: var(--ui-line); border-radius: var(--ui-radius-md); background: var(--ui-surface); box-shadow: var(--ui-shadow-card); }
.workflow-graph__node:hover { border-color: var(--ui-focus); }
.workflow-graph__node:focus-visible,
.workflow-graph__node.is-selected { border-color: var(--ui-accent); box-shadow: var(--ui-shadow-focus), var(--ui-shadow-card); }
.workflow-graph__node[data-variant="output"] { border-color: var(--ui-line-strong); background: var(--ui-surface-raised); }
.workflow-graph__node[data-variant="muted"] { background: var(--ui-surface-subtle); }
.workflow-graph__status { border-radius: var(--ui-radius-sm); background: var(--ui-surface-muted); color: var(--ui-muted); }
.workflow-graph__node[data-status-tone="active"] .workflow-graph__status,
.workflow-graph__node[data-status-tone="ready"] .workflow-graph__status { background: var(--ui-success-soft); color: var(--ui-success); }
.workflow-graph__node[data-status-tone="warning"] .workflow-graph__status { background: var(--ui-warning-soft); color: var(--ui-warning); }
.workflow-graph__node[data-status-tone="error"] .workflow-graph__status { background: var(--ui-danger-soft); color: var(--ui-danger); }
.workflow-graph__thumbnail,
.workflow-graph__icon,
.workflow-graph__index { border-color: var(--ui-line); border-radius: var(--ui-radius-sm); background: var(--ui-surface-subtle); }
.workflow-graph__empty-mark::before,
.workflow-graph__empty-mark::after { border-color: var(--ui-line-strong); border-radius: var(--ui-radius-xs); background: var(--ui-surface); }
.workflow-graph__empty-mark { border-bottom-color: var(--ui-line-strong); }

/* Graph presentation follows the same low-contrast canvas and quiet cards. */
html,body{overflow-x:hidden}
.workflow-graph{min-width:0;border-color:var(--ui-line);border-radius:var(--ui-radius-md);background:var(--ui-surface-subtle);color:var(--ui-ink)}
.workflow-graph__viewport{min-width:0;outline:none}
.workflow-graph__viewport:focus-visible{box-shadow:inset 0 0 0 3px var(--ui-focus-ring)}
.workflow-graph__edge{stroke:var(--ui-line-strong);stroke-width:1.5}
.workflow-graph__arrow{fill:var(--ui-line-strong)}
.workflow-graph__edge-group[data-status="active"] .workflow-graph__edge,.workflow-graph__edge-group[data-status="running"] .workflow-graph__edge{stroke:var(--ui-accent);stroke-width:2}
.workflow-graph__edge-group[data-status="active"] .workflow-graph__arrow,.workflow-graph__edge-group[data-status="running"] .workflow-graph__arrow{fill:var(--ui-accent)}
.workflow-graph__edge-label rect{fill:var(--ui-surface-subtle);stroke:var(--ui-line)}
.workflow-graph__edge-label text{fill:var(--ui-muted);font-size:var(--ui-font-size-xs);font-weight:600}
.workflow-graph__node{border-color:var(--ui-line);border-radius:var(--ui-radius-md);background:var(--ui-surface);box-shadow:var(--ui-shadow-card);transition:border-color var(--ui-duration-fast) var(--ui-ease-standard),box-shadow var(--ui-duration-fast) var(--ui-ease-standard),transform var(--ui-duration-fast) var(--ui-ease-standard)}
.workflow-graph__node:hover{border-color:var(--ui-focus);box-shadow:var(--ui-shadow-focus),var(--ui-shadow-card);transform:translateY(-1px)}
.workflow-graph__node:focus-visible,.workflow-graph__node.is-selected{border-color:var(--ui-accent);box-shadow:var(--ui-shadow-focus),var(--ui-shadow-card)}
.workflow-graph__node[data-variant="primary"]{border-top-color:var(--ui-accent)}
.workflow-graph__node[data-variant="output"]{border-color:var(--ui-line-strong);background:var(--ui-surface-raised)}
.workflow-graph__node[data-variant="muted"]{background:var(--ui-surface-subtle);box-shadow:none}
.workflow-graph__eyebrow{color:var(--ui-muted);font-size:calc(10px * var(--z))}
.workflow-graph__status{background:var(--ui-surface-muted);color:var(--ui-muted);border-radius:var(--ui-radius-pill)}
.workflow-graph__node[data-status-tone="active"] .workflow-graph__status,.workflow-graph__node[data-status-tone="ready"] .workflow-graph__status{background:var(--ui-accent-soft);color:var(--ui-accent-strong)}
.workflow-graph__node[data-status-tone="warning"] .workflow-graph__status{background:var(--ui-warning-soft);color:var(--ui-warning)}
.workflow-graph__node[data-status-tone="error"] .workflow-graph__status{background:var(--ui-danger-soft);color:var(--ui-danger)}
.workflow-graph__thumbnail,.workflow-graph__icon,.workflow-graph__index{border-color:var(--ui-line);border-radius:var(--ui-radius-sm);background:var(--ui-surface-subtle)}
.workflow-graph__icon{color:var(--ui-accent);background:var(--ui-accent-soft)}
.workflow-graph__index{color:var(--ui-muted)}
.workflow-graph__copy h3{color:var(--ui-ink-strong)}
.workflow-graph__copy p,.workflow-graph__empty{color:var(--ui-muted)}
.workflow-graph__empty-mark::before,.workflow-graph__empty-mark::after{border-color:var(--ui-line-strong);border-radius:var(--ui-radius-xs);background:var(--ui-surface)}
.workflow-graph__empty-mark{border-bottom-color:var(--ui-line-strong)}
@media(max-width:768px){.workflow-graph,.workflow-graph__viewport{min-height:320px}.workflow-graph__node{box-shadow:var(--ui-shadow-subtle)}}

/* SVG icon defaults must never outline Chinese graph labels. */
.workflow-graph__edges { stroke: none; }
.workflow-graph__edge-label text { stroke: none; }

}
/* /intent.css */
@layer legacy {
.intent-view {
  height: calc(100vh - 100px);
  min-height: 650px;
  overflow: hidden;
  background: var(--ui-surface-muted);
}


.intent-shell {
  display: grid;
  grid-template-columns: 248px minmax(420px, 1fr) 370px;
  height: 100%;
  min-width: 0;
  background: var(--ui-surface);
}


.intent-assets,
.intent-chat,
.intent-canvas {
  min-width: 0;
  min-height: 0;
}


.intent-assets,
.intent-chat {
  display: flex;
  flex-direction: column;
  background: var(--ui-surface);
}


.intent-assets {
  border-right: 1px solid var(--line);
}


.intent-chat {
  border-left: 1px solid var(--line);
}


.intent-panel-heading,
.intent-canvas-header,
.graph-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}


.intent-panel-heading {
  min-height: 76px;
  padding: 17px 17px 15px;
  border-bottom: 1px solid var(--line);
}


.intent-panel-heading h2 {
  font-size: var(--ui-font-size-sm);
}

.intent-scope {
  margin: 2px 0 0;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
}
.graph-toolbar > div{
  display: flex;
  align-items: center;
  gap: 5px;
}


.intent-assets-list {
  flex: 1;
  min-height: 0;
  padding: 2px 13px 16px;
  overflow: auto;
}


.intent-asset {
  position: relative;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) 25px;
  gap: 10px;
  align-items: center;
  min-height: 70px;
  padding: 9px 5px 9px 0;
  border-bottom: 1px solid var(--ui-surface-muted);
}
.intent-empty-chat{
  display: grid;
  min-height: 160px;
  padding: 24px 12px;
  place-items: center;
  color: var(--ui-ink-faint);
  font-size: var(--ui-font-size-xs);
  line-height: 1.8;
  text-align: center;
}
.intent-empty-chat svg{
  width: 28px;
  height: 28px;
  margin-bottom: 10px;
  stroke-width: 1.2;
}


.input-boundary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 45px;
  padding: 11px 14px;
  border-top: 1px solid var(--line);
  color: var(--ui-ink-placeholder);
  font-size: var(--ui-font-size-xs);
  line-height: 1.5;
}


.input-boundary svg {
  width: 14px;
  height: 14px;
  color: var(--ui-warning);
}


.intent-canvas {
  position: relative;
  display: grid;
  grid-template-rows: 76px 43px auto minmax(300px, 1fr) auto;
  overflow: auto;
  background: var(--ui-bg);
}

.intent-canvas-empty {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: grid;
  place-items: center;
  padding: var(--ui-space-6, 24px);
  background: color-mix(in srgb, var(--ui-surface-subtle, var(--ui-bg)) 82%, transparent);
}

.intent-empty-card {
  display: grid;
  justify-items: center;
  gap: var(--ui-space-3, 10px);
  max-width: 340px;
  padding: var(--ui-space-7, 32px);
  text-align: center;
  background: var(--ui-surface, var(--ui-surface));
  border: 1px solid var(--ui-line, var(--ui-surface-muted));
  border-radius: var(--ui-radius-md, 12px);
  box-shadow: var(--ui-shadow-card, 0 8px 24px rgba(20, 30, 25, 0.08));
}

.intent-empty-card > svg {
  width: 30px;
  height: 30px;
  color: var(--ui-accent-strong, var(--ui-muted));
  stroke-width: 1.2;
}

.intent-empty-card h3 {
  margin: 0;
  font-size: var(--ui-font-size-md);
}

.intent-empty-card p {
  margin: 0;
  color: var(--ui-ink-muted, var(--ui-ink-placeholder));
  font-size: var(--ui-font-size-xs);
  line-height: 1.8;
}

.intent-empty-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--ui-space-3, 10px);
  margin-top: var(--ui-space-2, 6px);
}


.intent-canvas-header {
  padding: 13px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--ui-surface);
}


.graph-toolbar {
  padding: 5px 12px 5px 18px;
  border-bottom: 1px solid var(--ui-surface-muted);
  background: var(--ui-bg);
  color: var(--ui-ink-placeholder);
  font-size: var(--ui-font-size-xs);
}


.graph-toolbar .icon {
  width: 28px;
  height: 28px;
}


.graph-toolbar svg {
  width: 14px;
  height: 14px;
}


.graph-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ui-success);
  box-shadow: 0 0 0 3px var(--ui-success-soft);
}


.intent-graph-host {
  min-height: 300px;
  border: 0;
  border-radius: 0;
}


.intent-node-detail {
  position: absolute;
  right: 18px;
  top: 132px;
  z-index: 5;
  width: min(390px, calc(100% - 36px));
  max-height: 44%;
  padding: 16px 18px;
  overflow: auto;
  border: 1px solid var(--ui-surface-muted);
  border-radius: 7px;
  background: var(--ui-surface);
  box-shadow: 0 18px 50px #1b30251f;
}


.intent-node-detail header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}


.intent-node-detail h3 {
  font-size: var(--ui-font-size-sm);
}


.intent-node-detail p,
.intent-node-detail pre {
  margin: 0;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
  line-height: 1.75;
}


.intent-node-detail pre {
  max-height: none;
  padding: 0;
  background: transparent;
  color: var(--ui-ink-soft);
  font-family: inherit;
}


.intent-messages {
  flex: 1;
  min-height: 130px;
  padding: 16px 17px;
  overflow: auto;
  background: var(--ui-surface);
}


.intent-message {
  margin: 0 0 18px;
}


.intent-message-head {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 7px;
  color: var(--ui-ink-placeholder);
  font-size: var(--ui-font-size-xs);
}


.intent-message-head svg {
  width: 13px;
  height: 13px;
}


.intent-message p {
  margin: 0;
  color: var(--ui-ink-soft);
  font-size: var(--ui-font-size-xs);
  line-height: 1.75;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}


.intent-message.user {
  margin-left: 34px;
  padding: 11px 12px;
  border-radius: 6px;
  background: var(--ui-bg);
}


.intent-message.user .intent-message-head {
  color: var(--ui-success);
}


.intent-message-questions {
  margin: 9px 0 0;
  padding-left: 18px;
  color: var(--ui-warning);
  font-size: var(--ui-font-size-xs);
  line-height: 1.7;
}


.intent-thinking {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
}


.intent-thinking::before {
  width: 8px;
  height: 8px;
  border: 1px solid var(--ui-success);
  border-top-color: transparent;
  border-radius: 50%;
  content: "";
  animation: intent-spin 700ms linear infinite;
}


.intent-run-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-left: 2px solid var(--ui-warning);
  background: var(--ui-bg);
  color: var(--ui-warning);
  font-size: var(--ui-font-size-xs);
  line-height: 1.7;
}


.retry-intent-run {
  flex: 0 0 auto;
  min-height: 30px;
  padding: 5px 9px;
  border-color: var(--ui-warning-soft);
  background: var(--ui-surface);
  color: var(--ui-warning);
  font-size: var(--ui-font-size-xs);
}


.retry-intent-run svg {
  width: 13px;
  height: 13px;
}


@keyframes intent-spin {
  to { transform: rotate(360deg); }
}


.intent-handoff {
  max-height: 48vh;
  padding: 13px 17px;
  overflow: auto;
  border-top: 1px solid var(--line);
  background: var(--ui-bg);
}


#intent-prompt-editor {
  display: block;
  width: 100%;
  height: clamp(130px, 21vh, 220px);
  min-height: 100px;
  margin: 0;
  padding: 12px 14px;
  resize: vertical;
  border: 1px solid var(--ui-surface-muted);
  background: var(--ui-surface);
  color: var(--ui-ink-soft);
  font: 12px/1.85 "PingFang SC", sans-serif;
}


.prompt-editor-tools {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 9px 0;
}

.prompt-editor-tools > [id="undo-intent-prompt"] { margin-left: auto; }

.prompt-editor-tools button { padding: 6px 8px; font-size: var(--ui-font-size-xs); }

.marker-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--ui-ink-placeholder);
  cursor: pointer;
}

.marker-toggle:hover:not(:disabled) { color: var(--ui-ink-soft); }

.marker-toggle:disabled { opacity: .55; cursor: default; }

.marker-toggle-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.5px solid var(--ui-ink-faint);
  background: transparent;
  transition: background .15s, border-color .15s, box-shadow .15s;
}

.marker-toggle[aria-pressed="true"] { color: var(--ui-success); }

.marker-toggle[aria-pressed="true"] .marker-toggle-dot {
  border-color: var(--ui-success);
  background: var(--ui-success);
  box-shadow: 0 0 0 3px #22c55e24;
}

#prompt-save-state { color: var(--ui-ink-placeholder); font-size: var(--ui-font-size-xs); }

.prompt-input-summary { margin: 10px 0; color: var(--ui-ink-placeholder); font-size: var(--ui-font-size-xs); }


.intent-handoff header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
}


.intent-handoff h3 {
  font-size: var(--ui-font-size-xs);
}


.intent-handoff pre {
  max-height: 102px;
  margin: 0 0 10px;
  padding: 10px;
  border: 1px solid var(--ui-surface-muted);
  background: var(--ui-surface);
  color: var(--ui-muted);
  font-family: inherit;
  font-size: var(--ui-font-size-xs);
  line-height: 1.6;
}


.intent-transfer-note {
  margin: 0 0 10px;
  color: var(--ui-warning);
  font-size: var(--ui-font-size-xs);
  line-height: 1.6;
}


#compile-intent {
  min-height: 34px;
  padding: 7px 10px;
  white-space: normal;
  text-align: left;
  font-size: var(--ui-font-size-xs);
}


.intent-composer {
  padding: 13px 14px 14px;
  border-top: 1px solid var(--line);
  background: var(--ui-surface);
}


.intent-composer textarea {
  min-height: 74px;
  max-height: 160px;
  margin: 0;
  resize: none;
  font-size: var(--ui-font-size-xs);
}


.intent-composer > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 9px;
}


#intent-char-count {
  color: var(--ui-ink-faint);
  font-size: var(--ui-font-size-xs);
  font-variant-numeric: tabular-nums;
}


#send-intent {
  min-width: 80px;
  height: 34px;
  padding: 7px 12px;
}


#send-intent svg {
  width: 15px;
  height: 15px;
}


.scene-templates{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:12px 16px;background:var(--ui-bg);border-bottom:1px solid var(--ui-surface-muted);font-size:var(--ui-font-size-xs)}
.scene-templates button{border:1px solid var(--ui-success-soft);border-radius:6px;padding:8px 12px;background:white;cursor:pointer}
.intent-node-detail label{display:block;margin:12px 0;font-size:var(--ui-font-size-sm)}
.intent-node-detail textarea,.intent-node-detail select,.intent-node-detail input{display:block;width:100%;margin-top:6px;box-sizing:border-box}
.intent-node-detail p{font-size:var(--ui-font-size-xs);color:var(--ui-muted)}
.intent-node-detail>button{margin:6px 8px 0 0}
.intent-node-detail{max-height:calc(100% - 154px)}


/* Match the visible viewport to its grid track so fit uses the actual canvas size. */
.intent-graph-host .workflow-graph__viewport{min-height:0;min-width:0}


.scene-templates{align-items:flex-end}
.scene-templates label{font-size:var(--ui-font-size-xs);min-width:130px}
.scene-templates select{display:block;margin:5px 0 0;max-width:260px}
.template-import input{display:block;width:160px;font-size:var(--ui-font-size-xs)}
#template-manager{width:min(780px,90vw);max-height:85vh;border:1px solid var(--ui-surface-muted);border-radius:12px;padding:24px;overflow:auto}
#template-manager::backdrop{background:#15281d66}
.template-list article{padding:14px 0;border-bottom:1px solid var(--ui-surface-muted)}
.template-list small{margin-left:12px;color:var(--ui-ink-placeholder)}
.template-list button{margin:8px 6px 0 0}
.template-list select{max-width:300px}
.template-list>article>div{display:flex;flex-wrap:wrap;align-items:center}
.intent-node-detail input[type=checkbox]{display:inline;width:auto}


#intent-generation-options{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:12px 0;border-top:1px solid var(--ui-surface-muted)}
#intent-generation-options[hidden]{display:none}
#intent-generation-options label{font-size:var(--ui-font-size-xs);min-width:0}
#intent-generation-options input,#intent-generation-options select{width:100%;box-sizing:border-box}
#intent-generation-options audio,#intent-generation-options small{grid-column:1/-1;max-width:100%}
#intent-generation-options small{color:var(--ui-ink-placeholder);font-size:var(--ui-font-size-xs)}


/* Shared theme bridge for the planning workspace. */
.intent-view { background: var(--ui-surface-subtle); }

.intent-shell,
.intent-assets,
.intent-chat,
.intent-canvas-header,
.intent-messages,
.intent-composer { background: var(--ui-surface); }

.intent-canvas,
.intent-handoff { background: var(--ui-surface-subtle); }

.graph-live-dot { background: var(--ui-accent); box-shadow: 0 0 0 3px var(--ui-accent-soft); }

.intent-message.user { background: var(--ui-accent-soft); color: var(--ui-accent-strong); }

.intent-thinking { color: var(--ui-accent); }


/* Intent workspace semantic surfaces. Geometry stays in the existing layout rules. */
.intent-assets,
.intent-chat { background: var(--studio-surface, var(--ui-surface)); }

.intent-assets,
.intent-chat,
.intent-canvas-header,
.graph-toolbar,
.studio-template-shelf,
.studio-canvas-hint { border-color: var(--line-soft); }

.intent-panel-heading h2,
.intent-canvas-header h2 { color: var(--ink-strong); }
.intent-message-head,.input-boundary{ color: var(--ink-soft); }
.studio-template-shelf,.studio-canvas-hint{ background: var(--surface-subtle); }

.intent-asset {
  border-color: var(--line-soft) !important;
  box-shadow: 0 3px 12px rgb(36 32 80 / 5%);
}

.intent-asset:hover,
.intent-asset:focus-within {
  border-color: var(--ui-accent-soft) !important;
  box-shadow: 0 5px 16px rgb(84 72 177 / 10%);
}

.intent-message.user {
  background: var(--accent-violet-soft);
  border-color: var(--ui-accent-soft);
  color: var(--ui-accent-strong);
}

.intent-message.assistant { color: var(--ink-strong); }

.intent-thinking { color: var(--accent-violet); }

.intent-composer textarea {
  background: var(--ui-surface);
  border-color: var(--line-soft);
}

.intent-composer textarea:focus {
  border-color: var(--accent-violet);
  box-shadow: 0 0 0 3px rgb(101 88 217 / 14%);
}

.intent-node-detail > button {
  color: var(--accent-violet-strong);
  background: var(--accent-violet-soft);
  border-color: var(--ui-line-strong);
}


/* Planning workspace additions use semantic tokens for brand states. */
.intent-asset:hover,
.intent-asset:focus-within { border-color: var(--ui-line-strong) !important; }

.intent-message.user { border-color: var(--ui-line); color: var(--ui-accent-strong); }

.intent-composer textarea { background: var(--ui-surface-raised); }

.intent-composer textarea:focus { box-shadow: var(--ui-shadow-focus); }


/* Planning surface: calm panels, readable hierarchy, and token-only colour. */
html,body{overflow-x:hidden}

.intent-view{background:var(--ui-bg);color:var(--ui-ink)}

.intent-shell{background:var(--ui-surface);border:1px solid var(--ui-line);border-radius:var(--ui-radius-md);box-shadow:var(--ui-shadow-card);overflow:hidden}

.intent-assets,.intent-chat{background:var(--ui-surface);border-color:var(--ui-line)}

.intent-chat{background:var(--ui-surface-subtle)}

.intent-panel-heading,.intent-canvas-header{background:var(--ui-surface);border-color:var(--ui-line);padding:var(--ui-space-6)}

.intent-assets-list{padding:var(--ui-space-4);scrollbar-width:thin}

.intent-asset{min-height:76px;padding:var(--ui-space-3) var(--ui-space-2);border:1px solid var(--ui-line)!important;border-radius:var(--ui-radius-sm)!important;background:var(--ui-surface)!important;box-shadow:none}

.intent-asset:hover,.intent-asset:focus-within{border-color:var(--ui-focus)!important;box-shadow:var(--ui-shadow-focus)}
.intent-empty-chat{color:var(--ui-muted)}

.input-boundary{border-color:var(--ui-line);color:var(--ui-muted);background:var(--ui-surface-subtle)}

.intent-canvas{background:var(--ui-bg)}

.graph-toolbar{background:var(--ui-surface);border-color:var(--ui-line);color:var(--ui-muted)}

.graph-live-dot{background:var(--ui-accent);box-shadow:0 0 0 3px var(--ui-accent-soft)}

.intent-node-detail{border-color:var(--ui-line-strong);border-radius:var(--ui-radius-md);background:var(--ui-surface);box-shadow:var(--ui-shadow-float)}

.intent-messages{background:var(--ui-surface);padding:var(--ui-space-6) var(--ui-space-5)}

.intent-message-head{color:var(--ui-muted)}

.intent-message p{color:var(--ui-ink);line-height:1.75}

.intent-message.user{background:var(--ui-accent-soft);color:var(--ui-accent-strong);border:1px solid var(--ui-line);border-radius:var(--ui-radius-sm)}

.intent-thinking{color:var(--ui-accent)}

.intent-run-notice{border-color:var(--ui-warning);background:var(--ui-warning-soft);color:var(--ui-warning);border-radius:var(--ui-radius-sm)}

.retry-intent-run{border-color:var(--ui-line-strong);color:var(--ui-warning)}

.intent-handoff{border-color:var(--ui-line);background:var(--ui-surface-subtle)}

#intent-prompt-editor,.intent-composer textarea{border-color:var(--ui-line);background:var(--ui-surface);color:var(--ui-ink);border-radius:var(--ui-radius-sm)}

#intent-prompt-editor:focus,.intent-composer textarea:focus{border-color:var(--ui-focus);box-shadow:var(--ui-shadow-focus)}

.intent-composer{background:var(--ui-surface);border-color:var(--ui-line);padding:var(--ui-space-4)}

.intent-node-detail>button{border-color:var(--ui-line-strong);background:var(--ui-accent-soft);color:var(--ui-accent-strong)}

.scene-templates{background:var(--ui-surface-subtle);border-color:var(--ui-line)}

.scene-templates button{border-color:var(--ui-line);background:var(--ui-surface);border-radius:var(--ui-radius-sm)}

.scene-templates button:hover{background:var(--ui-accent-soft);border-color:var(--ui-line-strong)}
@media(max-width:1024px){.intent-shell{border-radius:0;border-left:0;border-right:0;box-shadow:none}.intent-panel-heading,.intent-canvas-header{padding:var(--ui-space-5)}.intent-assets,.intent-chat{box-shadow:var(--ui-shadow-float)}}
@media(max-width:480px){.intent-view{width:100%;min-width:0}.intent-panel-heading{min-height:64px;padding:var(--ui-space-4)}.intent-messages{padding:var(--ui-space-5) var(--ui-space-4)}.intent-message.user{margin-left:var(--ui-space-4)}.intent-composer{padding:var(--ui-space-3)}}

}
/* /studio.css */
@layer legacy {
/* Frame workspace: presentation and interaction layer, no model-side effects. */

/* The nav column shares its scroll container with the library section, so the
   labels must give their height back on short viewports or 最近使用 is pushed
   below the fold. Nav items keep their 44px targets; only decoration yields. */

.intent-view{height:calc(100dvh - 84px);min-height:0;padding:0;overflow:hidden;display:flex;flex-direction:column;background:var(--studio-bg)}
.studio-toolbar{height:62px;flex:none;display:flex;justify-content:space-between;align-items:center;gap:15px;padding:0 24px;border-bottom:1px solid var(--line);background:white}
.studio-tools svg{width:15px;height:15px}
.studio-tools{display:flex;gap:7px}
.studio-tools button{display:flex;align-items:center;gap:7px;border:1px solid var(--ui-surface-muted);background:white;color:var(--ui-ink-placeholder);padding:8px 10px;font-size:var(--ui-font-size-xs)}
.studio-tools button[aria-pressed=true]{background:var(--ui-bg);color:var(--ui-accent);border-color:var(--ui-surface-muted)}
.intent-shell{flex:1;height:auto;min-height:0;grid-template-columns:220px minmax(0,1fr) 300px;grid-template-rows:minmax(0,1fr);gap:0;overflow:hidden;background:white}
.intent-shell.assets-collapsed{grid-template-columns:minmax(0,1fr) 300px}
.intent-shell.chat-collapsed{grid-template-columns:220px minmax(0,1fr)}
.intent-shell.assets-collapsed.chat-collapsed{grid-template-columns:minmax(0,1fr)}
.intent-shell.assets-collapsed .intent-assets,.intent-shell.chat-collapsed .intent-chat{display:none}
.intent-assets,.intent-chat{background:var(--ui-surface);overflow:hidden}
.intent-panel-heading{min-height:76px;padding:18px 16px;border-color:var(--line)}
.intent-panel-heading h2{font-size:var(--ui-font-size-sm);font-weight:650;margin:3px 0}
.intent-assets-list{padding:12px;min-height:0;overflow:auto}
.intent-asset{border:1px solid var(--ui-line)!important;border-radius:var(--ui-radius-sm)!important;background:var(--ui-surface)!important;box-shadow:none}
.intent-asset:hover{border-color:var(--ui-line-strong)!important}
.input-boundary{margin-top:auto;border-top:1px solid var(--line);background:white;padding:14px;font-size:var(--ui-font-size-xs);color:var(--ui-ink-faint);line-height:1.7}

.intent-canvas{display:grid;grid-template-rows:67px 42px auto minmax(0,1fr) 38px;grid-template-columns:minmax(0,1fr);overflow:hidden;min-width:0;min-height:0;background:var(--ui-bg);isolation:isolate}
.intent-canvas-header{background:var(--ui-surface);padding:10px 20px;border-color:var(--line)}
#intent-version{font-size:var(--ui-font-size-xs);color:var(--ui-ink-faint)}
.graph-toolbar{padding:0 18px;background:var(--ui-surface);border-bottom:1px solid var(--line);font-size:var(--ui-font-size-xs);color:var(--ui-ink-faint)}
.graph-toolbar button{width:27px;height:27px;color:var(--ui-muted)}
.graph-toolbar svg{width:14px;height:14px}
.graph-live-dot{background:var(--ui-accent);box-shadow:0 0 0 3px var(--ui-surface-muted)}
.studio-template-shelf{z-index:2;background:var(--ui-surface);border-bottom:1px solid var(--line)}
.studio-template-shelf>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 20px;font-size:var(--ui-font-size-xs);cursor:pointer;color:var(--ui-ink-placeholder)}
.studio-template-shelf summary::-webkit-details-marker{display:none}
.studio-template-shelf summary>span{display:flex;align-items:center;gap:8px}
.studio-template-shelf summary svg{width:14px;height:14px;color:var(--ui-accent)}
.studio-template-shelf small{color:var(--ui-ink-faint);font-size:var(--ui-font-size-xs)}
.scene-templates{background:var(--ui-surface-subtle);border:0;padding:8px 16px 16px;gap:8px;max-height:190px;overflow:auto}
.scene-templates button{font-size:var(--ui-font-size-xs);border-radius:7px;border-color:var(--ui-line);color:var(--ui-muted)}
.scene-templates button:hover{background:var(--ui-bg)}
.scene-templates label{font-size:var(--ui-font-size-xs);color:var(--ui-ink-faint)}
.scene-templates select{max-width:230px;font-size:var(--ui-font-size-xs)}
.template-import{font-size:var(--ui-font-size-xs)}
.intent-graph-host{grid-row:4;min-height:0!important;border:0;background-color:var(--ui-bg);background-image:radial-gradient(var(--ui-accent-soft) 1px,transparent 1px);background-size:18px 18px}
.intent-graph-host .workflow-graph__viewport{min-width:0;min-height:0;background:transparent}
.workflow-graph__node{border:1px solid var(--ui-surface-muted);border-radius:13px;background:white;box-shadow:0 5px 15px #25274306;transition:border-color .15s,box-shadow .15s}
.workflow-graph__node:hover{border-color:var(--ui-accent-soft);box-shadow:0 6px 20px #7165b61b}
.workflow-graph__node.is-selected{border-color:var(--ui-accent);box-shadow:0 0 0 3px #8172db1e,0 8px 20px #6258b017}
.workflow-graph__eyebrow{font-size:calc(9px * var(--workflow-graph-zoom, 1));letter-spacing:.5px;color:var(--ui-ink-faint)}
.workflow-graph__copy h3{font-size:calc(14px * var(--workflow-graph-zoom, 1));color:var(--ui-ink-soft)}
.workflow-graph__copy p{color:var(--ui-ink-faint);font-size:calc(11px * var(--workflow-graph-zoom, 1))}
.workflow-graph__thumbnail{border-radius:8px;object-fit:cover}
.workflow-graph__icon{background:var(--ui-accent-soft);color:var(--ui-accent);border-radius:10px}
.workflow-graph__empty{color:var(--ui-ink-faint)}
.workflow-graph__empty-mark{background:var(--ui-surface-muted);border-color:var(--ui-accent-soft)}
.studio-canvas-hint{grid-row:5;display:flex;align-items:center;justify-content:space-between;padding:0 16px;color:var(--ui-ink-faint);font-size:var(--ui-font-size-xs);background:var(--ui-surface);border-top:1px solid var(--ui-surface-muted);gap:6px}
.studio-canvas-hint span,.studio-canvas-hint button{display:flex;align-items:center;gap:6px}
.studio-canvas-hint svg{width:12px;height:12px}
.studio-canvas-hint button{border:0;background:transparent;color:var(--ui-accent);font-size:var(--ui-font-size-xs)}

.intent-handoff{display:none}
.intent-shell[data-studio-mode=prompt] .intent-canvas{grid-template-rows:67px auto minmax(0,1fr)}
.intent-shell[data-studio-mode=prompt] .graph-toolbar,.intent-shell[data-studio-mode=prompt] .intent-graph-host,.intent-shell[data-studio-mode=prompt] .studio-canvas-hint{display:none}
.intent-shell[data-studio-mode=prompt] .studio-template-shelf{grid-row:2}
.intent-shell[data-studio-mode=prompt] .intent-handoff{display:block;grid-row:3;overflow:auto;min-height:0;max-height:none;background:var(--ui-surface);padding:24px clamp(18px,4vw,54px);border:0}
.intent-handoff header h3{font-size:18px;letter-spacing:-.5px}
.intent-handoff label{font-size:var(--ui-font-size-xs);color:var(--ui-ink-faint);display:block;line-height:1.7;margin:12px 0}
.intent-handoff select{display:block;width:100%;height:39px}
.intent-handoff #intent-prompt-editor{min-height:220px;font-size:var(--ui-font-size-sm);padding:16px;background:var(--ui-surface-subtle);line-height:1.95;border:1px solid var(--ui-line);border-radius:10px}
.prompt-editor-tools{padding:10px 0;gap:12px;font-size:var(--ui-font-size-xs)}
#intent-generation-options{background:var(--ui-surface-subtle);border-radius:10px;border:1px solid var(--ui-line);padding:14px;gap:14px}
.intent-transfer-note{font-size:var(--ui-font-size-xs)!important;color:color-mix(in srgb, var(--ui-warning) 72%, var(--ui-ink))!important;line-height:1.8}
.intent-node-detail{position:absolute;top:12px;right:12px;bottom:12px;width:min(360px,calc(100% - 24px));max-height:none!important;z-index:10;border-radius:14px;border:1px solid var(--ui-surface-muted);padding:22px;background:white;box-shadow:-12px 0 44px #33324918;animation:studio-drawer .18s ease-out}
.intent-node-detail header{border-bottom:1px solid var(--line);padding-bottom:14px}
.intent-node-detail h3{font-size:var(--ui-font-size-md)}
.intent-node-detail select[multiple]{min-height:90px}
.intent-node-detail>button{padding:9px 11px;border:1px solid var(--ui-accent-soft);color:var(--ui-accent);background:var(--ui-bg);font-size:var(--ui-font-size-xs)}

.intent-messages{padding:20px 16px;background:var(--ui-surface);scroll-behavior:smooth}
.intent-message{margin-bottom:20px}
.intent-message-head{font-size:var(--ui-font-size-xs);color:var(--ui-ink-faint)}
.intent-message.user{background:var(--ui-accent-soft);border-color:var(--ui-line);border-radius:12px;color:var(--ui-ink)}
.intent-message.assistant{font-size:var(--ui-font-size-xs);line-height:1.9}
.intent-thinking{color:var(--ui-accent);font-size:var(--ui-font-size-xs)}
.intent-composer{padding:12px 14px 17px;border:0;background:white}
.intent-composer textarea{background:var(--ui-bg);border-radius:10px;padding:12px;border:1px solid var(--ui-surface-muted);min-height:92px;font-size:var(--ui-font-size-xs)}
.intent-composer>div{margin-top:10px;font-size:var(--ui-font-size-xs)}
.intent-composer button{width:auto;min-width:36px;height:32px;padding:6px 10px;border-radius:8px}

.preview{border-radius:10px;background:var(--ui-bg)}
.notice{background:var(--ui-bg);border:1px solid var(--ui-surface-muted);border-radius:9px;color:var(--ui-accent);font-size:var(--ui-font-size-xs);line-height:1.8}
.estimate strong{font-size:26px;letter-spacing:-1px}
.results-layout{gap:22px}
.experiment-list,.comparison{background:var(--ui-surface);border:1px solid var(--line);border-radius:12px;padding:20px}
.comparison .empty-list{padding:80px 20px}

dialog,#template-manager{border:1px solid var(--ui-line);border-radius:16px;box-shadow:0 24px 100px #1e183638;padding:26px}

#template-manager p{font-size:var(--ui-font-size-xs);color:var(--ui-ink-faint);line-height:1.9}
.template-list article{padding:18px 0}
.template-list button{font-size:var(--ui-font-size-xs);border:1px solid var(--ui-surface-muted);background:var(--ui-surface);padding:7px 10px}
.template-list small{font-size:var(--ui-font-size-xs)}

@keyframes studio-drawer{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:translateX(0)}}
@keyframes studio-toast{from{opacity:0;transform:translate(-50%,6px)}to{opacity:1;transform:translate(-50%,0)}}
@media(min-width:1600px){.intent-shell{grid-template-columns:250px minmax(0,1fr) 350px}.intent-shell.assets-collapsed{grid-template-columns:minmax(0,1fr) 350px}.intent-shell.chat-collapsed{grid-template-columns:250px minmax(0,1fr)}}
@media(max-width:1280px){.intent-shell{grid-template-columns:190px minmax(0,1fr) 270px}.intent-shell.assets-collapsed{grid-template-columns:minmax(0,1fr) 270px}.intent-shell.chat-collapsed{grid-template-columns:190px minmax(0,1fr)}.studio-template-shelf small{display:none}.studio-toolbar{padding:0 18px}.intent-panel-heading{padding:15px 12px}}
@media(max-width:1024px){.intent-view{height:calc(100dvh - 84px);min-height:0;overflow:hidden}.intent-shell{grid-template-rows:minmax(0,1fr);grid-template-columns:180px minmax(0,1fr) 260px}.intent-chat{grid-column:auto;border-top:0}.intent-shell.assets-collapsed{grid-template-columns:minmax(0,1fr) 260px}.intent-shell.chat-collapsed{grid-template-columns:180px minmax(0,1fr)}.intent-messages{min-height:0}}
@media(max-width:768px){.intent-shell{position:relative;display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:minmax(0,1fr)}.intent-canvas{height:100%;grid-column:1;grid-row:1}.intent-assets,.intent-chat{position:absolute;top:0;bottom:0;width:min(300px,85%);z-index:20;box-shadow:0 8px 30px #26213b24}.intent-assets{left:0}.intent-chat{right:0}.studio-tools span{display:none}.studio-tools button{padding:8px}.studio-toolbar{height:58px;padding:0 12px}}
@media(max-width:480px){.intent-view{height:calc(100dvh - 135px);min-height:0}.intent-canvas{grid-template-rows:61px 38px auto minmax(0,1fr) 36px}.intent-shell[data-studio-mode=prompt] .intent-canvas{grid-template-rows:61px auto minmax(0,1fr)}.studio-canvas-hint span{font-size:var(--ui-font-size-xs)}.studio-canvas-hint button{font-size:var(--ui-font-size-xs)}.scene-templates{max-height:150px}.studio-template-shelf>summary{padding:10px 14px}#intent-generation-options{grid-template-columns:1fr}.intent-node-detail{padding:16px}.studio-toolbar{gap:6px}#studio-focus{display:none}}

/* Creative generation entry and read-only provider submission preview. */
.intent-canvas{grid-template-rows:0 42px auto minmax(0,1fr) 38px}

.intent-canvas-header{display:none}

.intent-composer form > div{display:flex;align-items:center;justify-content:space-between;gap:8px}

.intent-composer form > div > span{margin-right:auto}

.submission-preview{margin-top:16px;padding:14px;border:1px solid var(--line);border-radius:10px;background:var(--surface-subtle)}

.submission-preview h3{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:0 0 10px;font-size:var(--ui-font-size-xs);color:var(--ink)}

.submission-preview h3 small{font-size:var(--ui-font-size-xs);font-weight:400;color:var(--muted)}

.submission-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px}

.submission-row{display:flex;flex-direction:column;gap:3px;min-width:0}

.submission-row span{font-size:var(--ui-font-size-xs);color:var(--muted)}

.submission-row strong{font-size:var(--ui-font-size-xs);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}

.submission-prompt-button{margin-top:12px;font-size:var(--ui-font-size-xs);color:var(--ui-accent-strong)}

#submission-prompt-dialog[open]{width:min(630px,calc(100vw - 32px));max-height:min(640px,calc(100dvh - 32px));box-sizing:border-box}

#submission-prompt-content{flex:1 1 auto;min-width:0;min-height:0;overflow:auto;overscroll-behavior:contain;white-space:pre-wrap;overflow-wrap:anywhere;margin:0;font-family:inherit;font-size:var(--ui-font-size-sm);line-height:1.8;color:var(--ink)}

#preflight-content{min-height:0;overflow:auto}
@media(max-width:480px){.submission-grid{grid-template-columns:1fr}}
.intent-empty-chat{padding:36px 8px!important;display:flex!important;flex-direction:column;align-items:flex-start!important;justify-content:flex-start!important;text-align:left!important;gap:14px}
.intent-empty-chat .studio-assistant-mark{width:38px;height:38px;border-radius:12px;background:var(--ui-accent-soft);display:grid;place-items:center;color:var(--ui-accent)}
.studio-assistant-mark svg{width:19px;height:19px}
.intent-empty-chat h3{font-size:var(--ui-font-size-sm);font-weight:550;color:var(--ui-ink-placeholder);margin:0}
.intent-empty-chat p{font-size:var(--ui-font-size-xs)!important;color:var(--ui-ink-faint);line-height:1.9;margin:0}
.intent-empty-chat small{font-size:var(--ui-font-size-xs);color:var(--ui-ink-faint)}
.studio-suggestions{display:grid;gap:8px;width:100%;margin:5px 0}
.studio-suggestions button{text-align:left;background:white;border:1px solid var(--ui-surface-muted);color:var(--ui-accent);font-size:var(--ui-font-size-xs);padding:11px;border-radius:8px}
.studio-suggestions button:hover{background:var(--ui-bg);border-color:var(--ui-accent-soft)}
@media(max-width:768px){.intent-assets,.intent-chat{min-height:0}.intent-assets-list{max-height:none}}

.intent-view{display:flex;flex-direction:column;gap:0;height:calc(100dvh - 100px);min-height:0;padding:18px;background:var(--ui-bg)}

.studio-drawer-backdrop{display:none}

.studio-toolbar{flex:0 0 58px;height:58px;border:1px solid var(--ui-line);border-bottom:0;border-radius:14px 14px 0 0;background:var(--ui-surface);padding:0 20px;box-shadow:var(--ui-shadow-card)}

.studio-tools{display:flex;align-items:center;gap:7px}

.studio-tools button{border-color:var(--ui-surface-muted);background:var(--ui-surface);color:var(--ui-ink-placeholder);font-size:var(--ui-font-size-xs)}

.studio-tools button:hover{border-color:var(--ui-line-strong);background:var(--ui-accent-wash);color:var(--ui-accent-strong)}

.intent-shell{height:calc(100% - 58px);border:1px solid var(--ui-line);border-radius:0 0 14px 14px;overflow:hidden;box-shadow:var(--ui-shadow-card)}

.intent-assets,.intent-chat{background:var(--ui-surface)}

.intent-panel-heading{min-height:68px;padding:15px 16px;border-color:var(--ui-surface-muted)}

.intent-assets{border-right:1px solid var(--ui-line)}
.intent-chat{border-left:1px solid var(--ui-line)}

.intent-canvas{background:var(--ui-bg)}

.intent-canvas-header{padding:10px 18px;background:var(--ui-surface);border-color:var(--ui-surface-muted)}

.graph-toolbar{background:var(--ui-surface);border-color:var(--ui-surface-muted)}

.studio-template-shelf{background:var(--ui-surface);border-color:var(--ui-surface-muted)}

.studio-canvas-hint{background:var(--ui-surface);border-color:var(--ui-surface-muted)}

.intent-messages{background:var(--ui-surface-subtle)}
@media(max-width:1024px){.intent-view{padding:12px}.intent-shell{grid-template-columns:210px minmax(0,1fr) 288px}.intent-shell.assets-collapsed{grid-template-columns:minmax(0,1fr) 288px}.intent-shell.chat-collapsed{grid-template-columns:210px minmax(0,1fr)}}
@media(max-width:1024px){.intent-view{height:calc(100dvh - 84px);padding:0}.studio-toolbar{border-radius:0;padding:0 14px}.intent-shell{height:calc(100% - 58px);grid-template-columns:minmax(0,1fr);position:relative;border-radius:0}.intent-assets,.intent-chat{position:absolute;top:0;bottom:0;width:min(340px,88vw);z-index:20;transition:transform .18s ease,opacity .18s ease;box-shadow:0 12px 35px #24233d22}.intent-assets{left:0;transform:translateX(0)}.intent-chat{right:0;transform:translateX(0)}.intent-shell.assets-collapsed .intent-assets{transform:translateX(-105%);opacity:0;pointer-events:none}.intent-shell.chat-collapsed .intent-chat{transform:translateX(105%);opacity:0;pointer-events:none}.intent-canvas{grid-column:1;grid-row:1;height:100%}.intent-shell:not(.assets-collapsed) .intent-assets,.intent-shell:not(.chat-collapsed) .intent-chat{opacity:1}}
@media(max-width:480px){.studio-tools{gap:4px}.studio-tools button{padding:7px}.studio-toolbar{height:54px;flex-basis:54px}.intent-shell{height:calc(100% - 54px)}.intent-view{height:calc(100dvh - 135px)}.intent-canvas{grid-template-rows:61px 38px auto minmax(0,1fr) 36px}}
@media(max-width:1024px){.studio-drawer-backdrop{display:block;position:absolute;inset:0;z-index:15;border:0;background:color-mix(in srgb, var(--ui-ink-strong) 34%, transparent);backdrop-filter:blur(2px);cursor:pointer}.studio-drawer-backdrop[hidden]{display:none}.intent-assets:focus,.intent-chat:focus{outline:2px solid var(--ui-focus);outline-offset:-2px}}

.hub-hero{padding:20px 0 32px}
.hub-hero h2{font-size:32px;font-weight:600;letter-spacing:-1px;margin:12px 0}
.hub-hero p,.hub-copy{color:var(--ui-ink-faint);font-size:var(--ui-font-size-xs);line-height:1.8}
.hub-actions{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:40px}
.hub-action{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:14px;padding:26px;border:1px solid var(--ui-accent-soft);border-radius:15px;background:linear-gradient(140deg,var(--ui-surface),var(--ui-bg));color:var(--ui-ink-soft);min-width:0}
.hub-action:hover{border-color:var(--ui-accent-soft);box-shadow:0 8px 22px #6c599010}
.hub-action svg{width:26px;height:26px;color:var(--ui-accent)}
.hub-action strong{font-size:18px;font-weight:550}
.hub-action span{color:var(--ui-ink-faint);font-size:var(--ui-font-size-xs)}
.hub-action b{font-size:var(--ui-font-size-xs);color:var(--ui-accent);font-weight:500}
.project-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.project-card{background:white;border:1px solid var(--ui-surface-muted);border-radius:12px;overflow:hidden;min-width:0}
.project-open{display:flex;flex-direction:column;align-items:flex-start;text-align:left;background:transparent;border:0;border-radius:0;padding:20px;width:100%;gap:12px}
.project-open strong{font-size:var(--ui-font-size-sm);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;min-width:0;color:var(--ui-muted)}
.project-open p{font-size:var(--ui-font-size-xs);color:var(--ui-ink-faint);margin:0;min-width:0}
.project-open small{font-size:var(--ui-font-size-xs);color:var(--ui-ink-faint);min-width:0}
.project-card-icon{display:grid;place-items:center;width:33px;height:33px;background:var(--ui-bg);border-radius:9px;color:var(--ui-accent)}
.project-card-icon svg{width:17px;height:17px}
.project-card-actions{display:flex;justify-content:flex-end;padding:8px 14px;border-top:1px solid var(--ui-surface-muted);gap:8px}
.project-card-actions button{border:0;background:transparent;color:var(--ui-ink-faint);font-size:var(--ui-font-size-xs);padding:6px}
.project-card:hover{border-color:var(--ui-accent-soft)}
.projects-filters{display:flex;gap:12px;margin:25px 0 12px}
.projects-filters input{flex:1;min-width:0}
.projects-filters select{width:140px}
.project-pagination{display:flex;justify-content:center;align-items:center;gap:20px;margin:30px}
.project-pagination span{font-size:var(--ui-font-size-xs);color:var(--ui-ink-faint)}
.project-pagination button{font-size:var(--ui-font-size-xs);padding:8px 12px;background:white;border:1px solid var(--ui-surface-muted)}
.project-empty{grid-column:1/-1;text-align:center;padding:60px;color:var(--ui-ink-faint);border:1px dashed var(--ui-accent-soft);border-radius:12px}
#quick-template-dialog{width:min(850px,90vw)}
#quick-template-close{margin-top:20px}
.model-admin-card{background:white;border:1px solid var(--ui-surface-muted);border-radius:13px;padding:22px;min-width:0}
.model-admin-card header{display:flex;justify-content:space-between;align-items:center;gap:8px}
.model-admin-card h3{font-size:var(--ui-font-size-md);font-weight:550}
.model-admin-card label{display:block;color:var(--ui-ink-faint);font-size:var(--ui-font-size-xs);margin:22px 0}
.model-admin-card input{width:100%;height:40px;margin-top:8px}
.model-admin-card>div{display:flex;gap:9px}
.model-admin-card button{font-size:var(--ui-font-size-xs);padding:9px 12px}
@media(max-width:1024px){.project-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.project-cards,.hub-actions{grid-template-columns:1fr}.hub-hero h2{font-size:25px}.projects-filters{flex-wrap:wrap}.projects-filters input{flex-basis:100%}.projects-filters select{flex:1}.hub-action{padding:22px}}

.creative-advanced{grid-column:1/-1;border-top:1px solid var(--ui-surface-muted);padding-top:14px}
.creative-advanced h3{font-size:var(--ui-font-size-xs);font-weight:550;color:var(--ui-ink-placeholder)}
.creative-option-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.creative-option-grid small{grid-column:1/-1}
.original-audio-option{display:flex;align-items:center;gap:6px}
@media(max-width:480px){.creative-option-grid{grid-template-columns:1fr}}

/* Responsive and accessibility tokens. Keep the workbench anchored to the actual chrome. */

.intent-view{height:calc(100dvh - var(--topbar-height));min-height:0}
.studio-tools button,.graph-toolbar button,.intent-panel-heading .icon,.intent-composer button{min-height:var(--touch-target)}
.studio-tools button:focus-visible,.intent-shell button:focus-visible{outline:2px solid var(--ui-focus);outline-offset:2px}
.intent-message-head,.input-boundary,.intent-composer>div,.studio-template-shelf small,.studio-canvas-hint{color:var(--ui-muted)}

.intent-messages{overscroll-behavior:contain}

.intent-assets,.intent-chat{min-width:0}
@media(max-width:1024px){.intent-shell{grid-template-columns:210px minmax(0,1fr) 288px}.intent-shell.assets-collapsed{grid-template-columns:minmax(0,1fr) 288px}.intent-shell.chat-collapsed{grid-template-columns:210px minmax(0,1fr)}}
@media(max-width:1024px){.intent-view{height:calc(100dvh - var(--topbar-height))}.intent-shell{height:calc(100% - 58px)}.intent-assets,.intent-chat{max-width:calc(100vw - 24px)}}
@media(max-width:480px){.intent-view{height:calc(100dvh - var(--topbar-height) - var(--mobile-nav-height));min-height:0}.studio-tools button{min-width:var(--touch-target);padding-inline:9px}.intent-composer textarea{font-size:var(--ui-font-size-sm)}}

/* Final visual pass: quiet hierarchy, black/purple anchors, and consistent interaction states. */
:root {
  --studio-bg: var(--ui-bg);
  --studio-surface: var(--ui-surface);
  --studio-surface-subtle: var(--ui-surface-subtle);
  --studio-ink: var(--ui-ink);
  --studio-muted: var(--ui-muted);
  --studio-line: var(--ui-line);
  --studio-accent: var(--ui-accent);
  --studio-accent-strong: var(--ui-accent-strong);
  --studio-accent-soft: var(--ui-accent-soft);
  --studio-shadow: var(--ui-shadow-card);
}

.graph-toolbar button,.intent-panel-heading .icon{
  min-width: 40px;
  min-height: 40px;
}

.intent-view {
  background: var(--studio-bg);
}

.studio-toolbar {
  border-color: var(--studio-line);
  box-shadow: 0 8px 26px rgb(34 28 79 / 6%);
}

.studio-tools button {
  border-color: var(--studio-line);
  color: var(--studio-muted);
}

.studio-tools button:hover,
.studio-tools button[aria-pressed="true"] {
  border-color: var(--ui-accent-soft);
  background: var(--studio-accent-soft);
  color: var(--studio-accent-strong);
}

.intent-shell {
  border-color: var(--studio-line);
  box-shadow: var(--studio-shadow);
}

.intent-assets,
.intent-chat,
.intent-canvas-header,
.graph-toolbar,
.studio-template-shelf,
.studio-canvas-hint {
  border-color: var(--studio-line);
}

.intent-canvas,
.intent-graph-host {
  background-color: var(--ui-bg);
}

.intent-graph-host {
  background-image: radial-gradient(var(--ui-accent-soft) 1px, transparent 1px);
}

.workflow-graph__node {
  border-color: var(--ui-surface-muted);
  box-shadow: 0 5px 15px rgb(37 31 88 / 6%);
}

.workflow-graph__node:hover {
  border-color: var(--ui-accent-soft);
  box-shadow: 0 8px 22px rgb(89 73 177 / 14%);
}

.workflow-graph__node.is-selected {
  border-color: var(--ui-accent);
  box-shadow: 0 0 0 3px rgb(113 97 221 / 14%), 0 10px 24px rgb(89 73 177 / 14%);
}

.workflow-graph__icon,
.workflow-graph__empty-mark {
  background: var(--studio-accent-soft);
  color: var(--ui-accent);
}

.intent-node-detail,
.hub-action,
.project-card,
.model-admin-card {
  border-color: var(--studio-line);
  box-shadow: 0 8px 24px rgb(37 30 88 / 5%);
}

.hub-action:hover,
.project-card:hover {
  border-color: var(--ui-accent-soft);
  box-shadow: 0 12px 28px rgb(91 75 185 / 10%);
}

.hub-action {
  background: linear-gradient(145deg, var(--ui-surface) 0%, var(--ui-bg) 100%);
}

@media (prefers-contrast: more) {.studio-tools button,.intent-message-head{
    color: var(--ui-muted);
  }

  .intent-shell,
  .studio-toolbar,
  .intent-assets,
  .intent-chat {
    border-color: var(--ui-accent-soft);
  }}

/* Workbench project context and panel collapse states */
.studio-toolbar{position:relative}

.studio-project-pill{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;padding:5px 10px 5px 12px;border:1px solid var(--line);border-radius:999px;background:var(--studio-surface);box-shadow:0 3px 12px rgb(35 29 83 / 7%);white-space:nowrap}

.studio-project-pill label{display:flex;align-items:center;gap:7px;margin:0}
.studio-project-pill label span{font-size:var(--ui-font-size-xs);color:var(--muted)}

.studio-project-pill input{width:140px;padding:4px 0;border:0;background:transparent;font-size:var(--ui-font-size-xs);font-weight:650}
.studio-project-pill input:focus{box-shadow:none!important}

.studio-project-pill>#intent-version{font-size:var(--ui-font-size-xs);color:var(--muted)}
.studio-project-pill .badge{font-size:var(--ui-font-size-xs);padding:3px 7px}

.intent-canvas-header{height:0;min-height:0;overflow:hidden;padding:0!important;border:0!important}
@media(max-width:1024px){.studio-project-pill{position:static;transform:none;max-width:42vw}.studio-project-pill input{width:80px}.studio-project-pill label span{display:none}}
@media(max-width:480px){.studio-project-pill{gap:4px;padding:4px 7px}.studio-project-pill input{width:68px;font-size:var(--ui-font-size-xs)}.studio-project-pill>#intent-version{display:none}}

/* Canvas controls live together in the bottom hint bar. */
.studio-canvas-hint{justify-content:flex-start}

.studio-canvas-hint>.graph-toolbar{margin-left:auto;display:flex;align-items:center;gap:14px;padding:0;background:transparent;border:0;font-size:var(--ui-font-size-xs);color:var(--muted)}

.studio-canvas-hint>.graph-toolbar>div{display:flex;align-items:center;gap:7px}

.studio-canvas-hint>.graph-toolbar button{width:27px;height:27px;padding:0;color:var(--ui-muted);background:transparent;border:0}

.studio-canvas-hint>.graph-toolbar button:hover{background:var(--ui-surface);color:var(--ui-accent-strong)}
@media(max-width:480px){.studio-canvas-hint>.graph-toolbar{gap:4px}.studio-canvas-hint>.graph-toolbar>div:first-child{display:none}.studio-canvas-hint>.graph-toolbar button{width:25px;height:25px}}

.studio-canvas-hint{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;justify-content:initial}

.studio-canvas-hint .graph-toolbar{margin:0}

.studio-canvas-hint .graph-toolbar-controls{justify-self:end}

.studio-canvas-hint .canvas-help{justify-self:center;display:flex;align-items:center;gap:6px}
@media(max-width:480px){.studio-canvas-hint{grid-template-columns:auto 1fr auto}.studio-canvas-hint .canvas-help{font-size:var(--ui-font-size-xs)}.studio-canvas-hint .graph-toolbar-stats #graph-node-count{display:none}}

/* Unified workbench toolbar language: update remains the single primary action. */
.studio-tools{gap:8px}

.studio-tools button{height:36px;min-width:84px;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:0 13px;border:1px solid var(--ui-surface-muted);border-radius:10px;background:var(--ui-surface);color:var(--ui-ink-placeholder);font-size:var(--ui-font-size-xs);font-weight:550;box-shadow:0 2px 7px rgb(42 35 89 / 4%)}

.studio-tools button svg{width:15px;height:15px;flex:none}

.studio-tools button:hover{border-color:var(--ui-line-strong);background:var(--ui-accent-wash);color:var(--ui-accent-strong);box-shadow:var(--ui-shadow-2)}

.studio-tools button[aria-pressed=true]{border-color:var(--ui-line-strong);background:var(--ui-bg);color:var(--ui-accent-strong);box-shadow:0 0 0 2px var(--ui-focus-ring)}

.studio-tools #studio-template-picker,.studio-tools #studio-project-switch{min-width:96px}
@media(max-width:1024px){.studio-tools button{min-width:36px;width:36px;padding:0}.studio-tools button span{display:none}.studio-tools button svg{width:16px;height:16px}}

.studio-project-pill{min-width:330px;justify-content:flex-start;gap:12px;padding:6px 14px 6px 16px;border-color:var(--ui-surface-muted);border-radius:999px;background:var(--ui-surface);box-shadow:0 4px 14px rgb(42 35 89 / 8%)}

.studio-project-pill label{flex:1;min-width:0;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px}

.studio-project-pill label span{font-size:var(--ui-font-size-xs);line-height:1;color:var(--ui-ink-faint);white-space:nowrap}

.studio-project-pill input{width:100%;min-width:0;height:24px;padding:0;border:0!important;box-shadow:none!important;font-size:var(--ui-font-size-sm);font-weight:650;line-height:24px}

.studio-project-pill>#intent-version{padding-left:10px;border-left:1px solid var(--ui-surface-muted);font-size:var(--ui-font-size-xs);line-height:20px;color:var(--ui-ink-placeholder)}

.studio-project-pill .badge{margin-left:0;white-space:nowrap}
@media(max-width:1024px){.studio-project-pill{min-width:0;max-width:42vw;padding-inline:10px}.studio-project-pill label{display:block}.studio-project-pill label span{display:none}.studio-project-pill>#intent-version{padding-left:7px}}

/* Compact violet project title capsule. */
.studio-project-pill{min-height:30px;height:32px;padding:4px 13px 4px 15px;border-color:var(--ui-accent-soft);background:linear-gradient(180deg,var(--ui-surface) 0%,var(--ui-bg) 100%);box-shadow:0 4px 14px rgb(98 91 229 / 13%),inset 0 0 0 1px rgb(255 255 255 / 75%)}

.studio-project-pill label span{color:var(--ui-accent)}

.studio-project-pill input{color:var(--ui-accent-strong)}

.studio-project-pill>#intent-version{border-left-color:var(--ui-accent-soft);color:var(--ui-accent)}

.studio-project-pill .badge{background:var(--ui-surface-muted);color:var(--ui-accent);border-color:var(--ui-accent-soft)}
@media(max-width:480px){.studio-project-pill{height:30px;min-height:30px;padding-inline:9px}.studio-project-pill input{font-size:var(--ui-font-size-xs);line-height:20px}}

/* Project capsule alignment and focus treatment. */
.studio-project-pill{width:360px;min-width:360px;margin-inline:12px;box-sizing:border-box;align-items:center}

.studio-project-pill label{display:flex;align-items:center;gap:10px;height:22px}

.studio-project-pill label span,.studio-project-pill input,.studio-project-pill>#intent-version,.studio-project-pill .badge{vertical-align:middle;line-height:20px}

.studio-project-pill input:focus{outline:none!important;border:0!important;box-shadow:none!important}

.studio-project-pill input{outline:0!important;border-radius:0!important}
@media(max-width:1024px){.studio-project-pill{width:auto;min-width:0;margin-inline:6px}}

/* Keep the centered project capsule measurable on narrow toolbars. */
.studio-project-pill{width:clamp(220px,30vw,360px);min-width:220px}

.studio-project-pill label{flex:1 1 auto;min-width:0}

.studio-project-pill input{margin:0!important;height:20px;min-height:20px;line-height:20px;align-self:center}
@media(max-width:1024px){.studio-project-pill{width:clamp(180px,34vw,280px);min-width:180px;max-width:none;margin-inline:6px}}
@media(max-width:480px){.studio-project-pill{width:clamp(160px,42vw,240px);min-width:160px}.studio-project-pill label{min-width:0}.studio-project-pill input{width:100%}}

/* Desktop assistant panel resize handle. */
@media(min-width:1024px){
  .intent-shell{position:relative;--chat-width:300px;grid-template-columns:220px minmax(0,1fr) var(--chat-width)}
  .intent-shell.assets-collapsed{grid-template-columns:minmax(0,1fr) var(--chat-width)}
  .intent-shell.chat-collapsed{grid-template-columns:220px minmax(0,1fr)}
  .intent-shell.assets-collapsed.chat-collapsed{grid-template-columns:minmax(0,1fr)}
  .chat-resize-handle{position:absolute;z-index:5;top:0;bottom:0;right:var(--chat-width);width:9px;margin-right:-4px;padding:0;border:0;background:transparent;cursor:col-resize}
  .chat-resize-handle::after{content:"";position:absolute;top:50%;left:3px;width:3px;height:44px;border-radius:4px;background:var(--ui-accent-soft);transform:translateY(-50%);opacity:0;transition:opacity .15s,background .15s}
  .chat-resize-handle:hover::after,.chat-resize-handle.is-dragging::after{opacity:1;background:var(--ui-accent)}
  .intent-shell.chat-collapsed .chat-resize-handle{display:none}
}
@media(max-width:1024px){.chat-resize-handle{display:none}}

/* Keep the canvas visually dominant when the desktop has room for all modules. */
@media(min-width:1280px){.intent-shell{grid-template-columns:minmax(210px,232px) minmax(520px,1fr) minmax(288px,320px)}}

.intent-node-detail{max-width:calc(100% - 24px);overflow:auto;background:var(--ui-surface);box-shadow:-8px 0 24px rgb(37 33 64 / 10%)}

/* Distinguish supporting panels from the primary canvas with shared surface tokens. */
.intent-assets{background:var(--ui-surface);border-right:1px solid var(--ui-line)}

.intent-chat{background:var(--ui-surface-subtle);border-left:1px solid var(--ui-line)}

.intent-canvas{background:var(--ui-bg)}

.intent-panel-heading,.intent-canvas-header{background:var(--ui-surface);border-color:var(--ui-line)}

.intent-node-detail{background:var(--ui-surface);border-color:var(--ui-line-strong)}

/* Mobile drawers own their content flow so only messages and assets scroll. */
@media(max-width:1024px){
  .intent-assets{display:flex;flex-direction:column;min-height:0;overflow:hidden}
  .intent-chat{display:flex;flex-direction:column;min-height:0;overflow:hidden}
  .intent-assets-list,.intent-messages{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
  .intent-composer{flex:0 0 auto}
  .intent-shell.assets-collapsed .intent-assets,.intent-shell.chat-collapsed .intent-chat{pointer-events:none}
}

/* Keep project context in the same measurable toolbar flow as tabs and tools. */
.studio-toolbar{justify-content:flex-start;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}

.studio-toolbar::-webkit-scrollbar{display:none}

.studio-project-pill{position:static;transform:none;flex:0 0 360px;width:360px;min-width:360px;max-width:360px;margin-inline:auto;overflow:hidden}

.studio-project-pill label{min-width:0}

.studio-project-pill input{min-width:0;text-overflow:ellipsis}

.studio-tools{flex:0 0 auto;min-width:0}
@media(max-width:1024px){
  .studio-toolbar{gap:8px;padding-inline:12px}
  .studio-project-pill{flex-basis:360px;max-width:360px;margin-inline:4px}
  .studio-tools{flex:0 0 auto}
  .studio-tools button{min-width:36px;width:36px;padding:0}
  .studio-tools button span{display:none}}
@media(max-width:480px){
  .studio-project-pill{flex-basis:360px;max-width:360px;margin-inline:2px}}

/* Scoped interaction contract for 创作空间; shared tokens stay the source of truth. */
.intent-view button:focus-visible{outline:2px solid var(--ui-focus);outline-offset:2px}

.intent-view input:focus,.intent-view select:focus,.intent-view textarea:focus{border-color:var(--ui-accent)!important}

.intent-view button.primary{background:var(--ui-accent);border-color:var(--ui-accent)}

.intent-view button.primary:hover{background:var(--ui-accent-strong);border-color:var(--ui-accent-strong)}

.intent-view .intent-canvas{background:var(--ui-bg)}

/* Studio controls and selection states consume the shared token contract. */
.studio-toolbar,.intent-shell{border-radius:var(--ui-radius-md)}
.studio-tools button[aria-pressed=true]{background:var(--ui-action-selection);color:var(--ui-accent-strong)}

.workflow-graph__node{border-radius:var(--ui-radius-md);border-color:var(--ui-line)}

.workflow-graph__node:hover{border-color:var(--ui-focus)}

.workflow-graph__node.is-selected{border-color:var(--ui-accent);box-shadow:var(--ui-shadow-focus),var(--ui-shadow-card)}

.workflow-graph__icon{background:var(--ui-accent-soft);color:var(--ui-accent);border-radius:var(--ui-radius-sm)}

/* Studio visual contract: one restrained surface system across every mode. */

.topbar,.studio-toolbar{background:var(--ui-surface-overlay);border-color:var(--ui-line);box-shadow:var(--ui-shadow-subtle);backdrop-filter:blur(18px)}

.studio-toolbar{min-width:0;overflow-x:auto;scrollbar-width:none}

.studio-tools button{border-color:var(--ui-line);background:var(--ui-surface);color:var(--ui-muted);box-shadow:none}

.studio-tools button:hover,.studio-tools button[aria-pressed="true"]{border-color:var(--ui-line-strong);background:var(--ui-accent-soft);color:var(--ui-accent-strong)}

.studio-project-pill{background:var(--ui-surface);border-color:var(--ui-line-strong);box-shadow:var(--ui-shadow-subtle);color:var(--ui-ink)}

.studio-project-pill label span,.studio-project-pill>#intent-version{color:var(--ui-muted)}

.intent-shell{background:var(--ui-surface);border-color:var(--ui-line);border-radius:var(--ui-radius-md);box-shadow:var(--ui-shadow-card)}

.intent-assets,.intent-chat,.intent-canvas-header,.graph-toolbar,.studio-template-shelf,.studio-canvas-hint{border-color:var(--ui-line)}

.intent-assets{background:var(--ui-surface)}

.intent-chat{background:var(--ui-surface-subtle)}

.intent-canvas,.intent-graph-host{background-color:var(--ui-bg)}

.intent-graph-host{background-image:radial-gradient(color-mix(in srgb,var(--ui-line-strong) 58%,transparent) 1px,transparent 1px)}

.workflow-graph__node{border-color:var(--ui-line);background:var(--ui-surface);box-shadow:var(--ui-shadow-card);border-radius:var(--ui-radius-md)}

.workflow-graph__node:hover{border-color:var(--ui-focus);box-shadow:var(--ui-shadow-focus),var(--ui-shadow-card)}

.workflow-graph__node.is-selected{border-color:var(--ui-accent);box-shadow:var(--ui-shadow-focus),var(--ui-shadow-card)}

.workflow-graph__icon,.workflow-graph__empty-mark{background:var(--ui-accent-soft);color:var(--ui-accent)}

.intent-node-detail,.model-admin-card,.project-card,.hub-action{border-color:var(--ui-line);box-shadow:var(--ui-shadow-card);background:var(--ui-surface)}

.hub-action:hover,.project-card:hover{border-color:var(--ui-focus);box-shadow:var(--ui-shadow-card)}

.studio-canvas-hint{background:var(--ui-surface);color:var(--ui-muted)}

@media(max-width:1024px){.studio-toolbar{gap:var(--ui-space-2);padding-inline:var(--ui-space-3)}.studio-project-pill{flex-basis:clamp(180px,34vw,300px);width:auto;min-width:0;max-width:300px;margin-inline:var(--ui-space-1)}}
@media(max-width:768px){.intent-shell{border-radius:0;box-shadow:none}.intent-assets,.intent-chat{box-shadow:var(--ui-shadow-float)}}
@media(max-width:480px){.studio-toolbar{height:58px;padding-inline:var(--ui-space-2)}.studio-project-pill{flex-basis:clamp(150px,42vw,230px);max-width:230px}.intent-view{width:100%;min-width:0}.studio-tools button{min-width:var(--ui-touch-target)}}

/* Shared topbar geometry keeps every workbench page aligned. */

.studio-toolbar{min-height:var(--ui-topbar-height)}

/* Prompt Studio is mounted inside this main page; its standalone main rule
   must never vertically center the workbench shell. */

@media(max-width:480px){.studio-toolbar{min-height:var(--ui-topbar-height-compact)}}

/* Project cards keep long prompts inside the existing card geometry. */
.project-open {
  min-width: 0;
}

.project-open p {
  width: 100%;
  min-width: 0;
  height: 40px;
  max-height: 40px;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
  line-height: 1.8;
}

/* Pricing catalog: published rate cards with admin overlay controls. */
.pricing-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 28px}

.pricing-tabs button{min-height:var(--ui-touch-target);border-radius:var(--ui-radius-pill);border-color:var(--ui-line);background:var(--ui-surface);color:var(--ui-muted);padding:8px 16px;font-size:var(--ui-font-size-xs)}

.pricing-tabs button[aria-selected="true"]{background:var(--ui-accent-soft);border-color:transparent;color:var(--ui-accent-strong);box-shadow:var(--ui-shadow-subtle)}

.pricing-hero{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:8px}

.pricing-hero h3{margin:0;font-size:28px;font-weight:600;letter-spacing:-.6px;color:var(--ui-ink)}

.pricing-hero .hub-copy{margin:8px 0 0;max-width:46em}

.pricing-hero-actions{display:flex;flex-wrap:wrap;gap:8px;flex:none}

.pricing-markup{display:flex;flex-wrap:wrap;align-items:end;gap:10px;margin-top:18px;padding:14px 16px;background:var(--ui-surface);border:1px solid var(--ui-line);border-radius:var(--ui-radius-md);box-shadow:var(--ui-shadow-subtle);max-width:420px}

.pricing-markup label{margin:0;font-size:var(--ui-font-size-xs);color:var(--ui-muted)}

.pricing-markup input{display:block;width:96px;height:40px;margin-top:6px}

.pricing-markup p{flex:1 1 100%;margin:0;color:var(--ui-muted);font-size:var(--ui-font-size-xs);line-height:1.6}

.pricing-dual{display:grid;gap:8px;justify-items:end}

.pricing-dual small{display:block;margin:0 0 2px;font-size:var(--ui-font-size-xs);letter-spacing:.04em;color:var(--ui-muted)}

.pricing-dual-user b{color:var(--ui-ink)}

.pricing-dual-cost b{font-size:var(--ui-font-size-sm);font-weight:550;color:var(--ui-muted)}

.pricing-highlight .pricing-cost{margin-top:8px;color:var(--ui-muted);font-size:var(--ui-font-size-xs)}

.pricing-highlights{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:24px 0 28px}

.pricing-highlight{position:relative;background:var(--ui-surface);border:1px solid var(--ui-line);border-radius:var(--ui-radius-md);box-shadow:var(--ui-shadow-card);padding:22px 22px 18px;overflow:hidden}

.pricing-highlight::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--ui-accent)}

.pricing-highlight small{display:block;color:var(--ui-muted);font-size:var(--ui-font-size-xs);letter-spacing:.04em}

.pricing-highlight strong{display:block;margin-top:10px;font-size:28px;letter-spacing:-1px;line-height:1.1;font-variant-numeric:tabular-nums}

.pricing-highlight .pricing-unit{font-size:var(--ui-font-size-sm);font-weight:500;letter-spacing:0;color:var(--ui-muted)}

.pricing-highlight span{display:block;margin-top:8px;color:var(--ui-muted);font-size:var(--ui-font-size-xs)}

.pricing-sections{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}

.pricing-section{background:var(--ui-surface);border:1px solid var(--ui-line);border-radius:var(--ui-radius-md);box-shadow:var(--ui-shadow-card);padding:22px;min-width:0}

.pricing-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}

.pricing-section h4{margin:0;font-size:var(--ui-font-size-sm);font-weight:600;color:var(--ui-ink)}

.pricing-section-actions,.pricing-row-actions{display:flex;flex-wrap:wrap;gap:4px}

.pricing-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:start;padding:14px 0;border-top:1px solid var(--ui-line)}

.pricing-row-copy strong{display:block;font-size:var(--ui-font-size-sm);font-weight:550;color:var(--ui-ink)}

.pricing-row-copy p{margin:4px 0 0;color:var(--ui-muted);font-size:var(--ui-font-size-xs);line-height:1.6}

.pricing-amount{text-align:right;font-variant-numeric:tabular-nums}

.pricing-amount b{display:block;font-size:var(--ui-font-size-md);font-weight:650;color:var(--ui-ink)}

.pricing-amount small{display:block;margin-top:4px;color:var(--ui-muted);font-size:var(--ui-font-size-xs)}

.pricing-free{display:inline-flex;align-items:center;min-height:24px;padding:0 8px;border-radius:var(--ui-radius-pill);background:var(--ui-success-soft);color:var(--ui-success);font-size:var(--ui-font-size-xs);font-weight:600}

.pricing-empty{margin:12px 0 0;color:var(--ui-muted);font-size:var(--ui-font-size-xs)}

.pricing-editor-list{display:grid;gap:10px;margin:16px 0 8px}

.pricing-editor-row{display:grid;grid-template-columns:minmax(0,1.4fr) 88px 72px auto;gap:8px;align-items:end}

.pricing-editor-row label{margin:0;font-size:var(--ui-font-size-xs);color:var(--ui-muted)}

.pricing-editor-row input,.pricing-editor-row select{width:100%;height:40px}

#pricing-catalog-form,#pricing-section-form,#pricing-item-form{display:flex;flex-direction:column;min-height:0;overflow:auto;gap:0}

#pricing-catalog-form label,#pricing-section-form label,#pricing-item-form label{display:block;margin:12px 0;font-size:var(--ui-font-size-xs);color:var(--ui-muted)}

#pricing-catalog-form small{display:block;margin-top:6px;font-weight:400}

#pricing-catalog-form input,#pricing-section-form input,#pricing-item-form input,#pricing-item-form select,#pricing-catalog-form textarea,#pricing-item-form textarea{width:100%;margin-top:6px}

#pricing-item-paid-fields{margin:4px 0 8px}
@media(max-width:1024px){.pricing-highlights,.pricing-sections{grid-template-columns:1fr}.pricing-hero{flex-direction:column}.pricing-highlight strong{font-size:24px}}
@media(max-width:768px){.pricing-editor-row{grid-template-columns:1fr 1fr}.pricing-editor-row label:nth-child(1){grid-column:1/-1}}
@media(max-width:480px){.pricing-row{grid-template-columns:1fr;gap:8px}.pricing-amount{text-align:left}}

.admin-assistant-heading{display:flex;justify-content:space-between;gap:16px;align-items:flex-end;margin-top:36px}

.admin-model-list{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}

.model-admin-card{display:flex;flex-direction:column;gap:8px;padding:20px;border:1px solid var(--ui-line);border-radius:12px}

.model-admin-card header{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between}

.model-admin-card header h3{margin:0;font-size:var(--ui-font-size-lg)}

.model-admin-card label{display:flex;flex-direction:column;gap:6px;font-size:var(--ui-font-size-xs);color:var(--ui-muted)}

.model-admin-card input:not([type=checkbox]){width:100%}

.admin-hint{color:var(--ui-muted);font-size:var(--ui-font-size-2xs);line-height:1.6;margin:0 0 8px}

.admin-error{color:var(--ui-danger)}

.admin-secret{display:flex;flex-direction:column;gap:6px;font-size:var(--ui-font-size-xs);color:var(--ui-muted)}

.admin-reveal{display:flex;flex-direction:row;align-items:center;gap:6px;margin-top:4px;font-size:var(--ui-font-size-xs)}

.admin-switch{flex-direction:row;align-items:center;gap:6px;margin:0}

.admin-card-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}

#account-balance{font-variant-numeric:tabular-nums;color:var(--ui-ink-soft);max-width:none}

#account-balance.is-empty{color:var(--ui-danger)}

.usage-line-amount{text-align:right;font-variant-numeric:tabular-nums}

.usage-total strong,.usage-line-amount b{display:block;font-size:var(--ui-font-size-lg)}

.usage-total small,.usage-line-amount small{display:block;margin-top:4px;color:var(--ui-muted);font-size:var(--ui-font-size-xs)}

.usage-line{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;padding:12px 0;border-top:1px solid var(--ui-line)}

.usage-line p{margin:4px 0 0;color:var(--ui-muted);font-size:var(--ui-font-size-xs);line-height:1.6}

.usage-total{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;margin:12px 0 18px}

.usage-total span{color:var(--ui-muted);font-size:var(--ui-font-size-xs)}

.user-balance{font-variant-numeric:tabular-nums;white-space:nowrap}

/* Creative space status dock: fixed overlay with partial/full/minimized states. */
.intent-view{position:relative;overflow:hidden}

.intent-view>.intent-shell{flex:1;min-height:0;height:auto}

.studio-context{display:flex;align-items:center;gap:8px;color:var(--ui-accent-strong);font-size:var(--ui-font-size-xs);font-weight:650;white-space:nowrap}

.studio-context svg{width:15px;height:15px}

/* Canvas-first shell: every surrounding surface floats above the same canvas. */
.intent-view{padding:0!important;position:relative;overflow:hidden}

.intent-view>.studio-toolbar{position:absolute;z-index:40;top:14px;left:14px;right:14px;width:auto;height:58px;min-height:58px;border:1px solid var(--ui-line);border-radius:14px;background:var(--ui-surface-overlay);box-shadow:var(--ui-shadow-subtle);backdrop-filter:blur(18px)}

.intent-shell{position:absolute;inset:0;display:block;height:auto!important;min-height:0;overflow:hidden;border:0;border-radius:0;box-shadow:none;background:var(--ui-bg)}

.intent-canvas{position:absolute;inset:0;display:grid;z-index:1;width:auto;height:auto;min-height:0}

.intent-assets,.intent-chat{position:absolute;top:86px;bottom:18px;z-index:20;width:240px;display:flex;flex-direction:column;min-height:0;box-shadow:var(--ui-shadow-float);transition:transform .2s ease,opacity .2s ease}

.intent-assets{left:16px}
.intent-chat{right:16px;width:320px}

.intent-shell.assets-collapsed .intent-assets{display:flex;transform:translateX(calc(-100% - 24px));opacity:0;pointer-events:none}

.intent-shell.chat-collapsed .intent-chat{display:flex;transform:translateX(calc(100% + 24px));opacity:0;pointer-events:none}

.intent-shell:not(.assets-collapsed) .intent-assets,.intent-shell:not(.chat-collapsed) .intent-chat{display:flex}

/* The floating status dock (z-index 30) and mobile drawers (z-index 32) overlap
   the panel seam; edge controls must outrank them or clicks never arrive. */
.intent-shell .chat-resize-handle{position:absolute;right:336px;top:50%;z-index:34}

.intent-dock-upper header{flex:0 0 auto}

.intent-dock-upper #prompt-execution-info{flex:0 0 auto;min-height:0}

.intent-dock-upper #intent-prompt-editor{flex:1 1 auto;min-height:0;width:100%;box-sizing:border-box;resize:none;overflow-y:auto}

.intent-dock-upper .prompt-editor-tools,.intent-dock-upper #prompt-conflict{flex:0 0 auto}

.intent-dock-lower #intent-generation-options{min-height:0;overflow:auto}

.intent-dock-actions .icon{width:30px;height:30px;min-width:30px;padding:0;display:grid;place-items:center;border:1px solid var(--ui-line);background:var(--ui-surface-subtle);color:var(--ui-accent-strong);}

.intent-dock-actions .icon svg{width:14px;height:14px;}

.intent-dock-status{flex:1 1 auto;min-height:0;border:1px solid var(--ui-line);border-radius:10px;background:var(--ui-surface-subtle);padding:14px;display:flex;flex-direction:column;justify-content:center;gap:6px;color:var(--ui-muted);font-size:var(--ui-font-size-xs);line-height:1.6;}

.intent-dock-status strong{color:var(--ui-ink);font-size:var(--ui-font-size-sm);}

.intent-dock-upper header{display:flex;align-items:center;justify-content:space-between;gap:12px;}

.intent-dock-upper header h3{margin:3px 0 0;font-size:var(--ui-font-size-lg);letter-spacing:-.2px;}

.prompt-input-summary{margin:0;color:var(--ui-muted);font-size:var(--ui-font-size-xs);line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.intent-dock-upper #intent-prompt-editor{border:1px solid var(--ui-line);background:var(--ui-surface-subtle);border-radius:10px;padding:11px 12px;line-height:1.7;font-size:var(--ui-font-size-xs);}

#intent-status-dock .intent-dock-upper header{margin:0;min-height:22px;padding:0;border:0}

#intent-status-dock h3{font-size:var(--ui-font-size-sm);margin:0}

#intent-status-dock #prompt-execution-info p{margin:0;line-height:16px;font-size:var(--ui-font-size-xs)!important}
#intent-status-dock #intent-prompt-editor{flex:1 1 0;min-height:0;height:auto;padding:10px 12px;line-height:1.6;font-size:var(--ui-font-size-xs);overflow:auto}

#intent-status-dock .prompt-editor-tools{margin:0;padding:0;min-height:26px;gap:8px;font-size:var(--ui-font-size-xs)}

#intent-status-dock .prompt-editor-tools button{min-height:26px;height:26px;padding:2px 8px;font-size:var(--ui-font-size-xs)}

#intent-status-dock #intent-generation-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:48px 28px 40px 28px;gap:6px 12px;border:0;background:none;padding:0;margin:0;overflow:auto}

#intent-status-dock #intent-generation-options>.creative-advanced,#intent-status-dock .creative-advanced>.creative-option-grid:not([hidden]){display:contents}

#intent-status-dock .creative-advanced>h3{display:none}

#intent-status-dock #intent-generation-options label{margin:0;line-height:16px;min-width:0;font-size:var(--ui-font-size-xs);color:var(--ui-muted)}

#intent-status-dock #intent-generation-options input,#intent-status-dock #intent-generation-options select{height:30px;min-height:0;width:100%;margin:0;padding:0 8px;box-sizing:border-box;font-size:var(--ui-font-size-xs)}

#intent-status-dock label:has(#creative-maxEdge){grid-column:3;grid-row:1}

#intent-status-dock label:has(#creative-outputDuration){grid-column:3;grid-row:2 / span 2}

#intent-status-dock label:has(#creative-start){grid-column:1;grid-row:3}

#intent-status-dock label:has(#creative-end){grid-column:2;grid-row:3}

#intent-status-dock .creative-option-grid[hidden],#intent-status-dock .creative-advanced>label{display:none}

#intent-status-dock #save-generation-options{grid-column:1 / span 2;grid-row:4;justify-self:start;min-height:26px;height:26px;padding:2px 10px;font-size:var(--ui-font-size-xs)}

#intent-status-dock #intent-provider-note{grid-column:3;grid-row:4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:26px;margin:0;font-size:var(--ui-font-size-xs)!important}

#intent-status-dock .dock-timeline{grid-column:1 / span 2;grid-row:2;font-size:var(--ui-font-size-xs);color:var(--ui-muted)}

#intent-status-dock .dock-range{position:relative;height:16px;margin:0 8px;background:linear-gradient(var(--ui-line),var(--ui-line)) center/100% 4px no-repeat;touch-action:none}

#intent-status-dock .dock-range input[type=range]{position:absolute;inset:0;width:calc(100% + 16px);margin-left:-8px;padding:0;height:16px;appearance:none;background:transparent;border:0;pointer-events:none;box-shadow:none}

#intent-status-dock .dock-range input::-webkit-slider-thumb{appearance:none;width:16px;height:16px;border:2px solid white;border-radius:50%;background:var(--ui-accent);pointer-events:auto}

#intent-status-dock .dock-range input::-moz-range-thumb{width:12px;height:12px;border:2px solid white;border-radius:50%;background:var(--ui-accent);pointer-events:auto}

#intent-status-dock .dock-range-fill{position:absolute;top:3px;height:10px;min-height:0;border:0;border-radius:4px;padding:0;background:var(--ui-accent);cursor:grab;touch-action:none}

#intent-status-dock #creative-outputDuration{padding:0;border:0;background:none;accent-color:var(--ui-accent);box-shadow:none}

#intent-status-dock label:has(#creative-outputDuration)>span{display:block;font-size:var(--ui-font-size-xs);white-space:nowrap}

/* Side panel headings own only their title and controls. */
.intent-shell .intent-panel-heading{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:8px}

.intent-shell .intent-panel-heading>div:first-child{min-width:0}
.intent-shell .assistant-panel-actions{display:flex;align-items:center;gap:5px;flex-shrink:0}

.intent-shell .intent-panel-heading .icon{width:28px;min-width:28px;height:32px;min-height:32px;padding:4px}

.intent-shell .panel-trigger{position:absolute;top:50%;z-index:35;width:32px;height:44px;padding:6px;transform:translateY(-50%);background:var(--ui-surface);border:1px solid var(--ui-line);border-radius:8px;color:var(--ui-accent-strong)}

.intent-shell .panel-trigger-left{left:8px}
.intent-shell .panel-trigger-right{right:8px}

.intent-shell:not(.assets-collapsed)>.panel-trigger-left,.intent-shell:not(.chat-collapsed)>.panel-trigger-right{display:none}

.intent-shell .panel-trigger svg{width:18px;height:18px}

/* A persistent edge control follows each drawer on the same horizontal axis. */
.intent-shell{--panel-edge:16px;--panel-motion:.24s cubic-bezier(.22,.8,.24,1)}

.intent-shell #studio-assets-toggle,.intent-shell #studio-chat-toggle{display:none}

.intent-shell .panel-trigger{display:grid!important;place-items:center;top:50%;transition:transform var(--panel-motion)}

.intent-shell .panel-trigger-left{left:var(--panel-edge);transform:translate(0,-50%)}

.intent-shell .panel-trigger-right{right:var(--panel-edge);transform:translate(0,-50%)}

.intent-shell:not(.assets-collapsed)>.panel-trigger-left{transform:translate(240px,-50%)}

.intent-shell:not(.chat-collapsed)>.panel-trigger-right{transform:translate(calc(-1*var(--chat-width,320px)),-50%)}

.intent-shell .intent-assets,.intent-shell .intent-chat{transition:transform var(--panel-motion),opacity var(--panel-motion)}
@media(max-width:1024px){.intent-shell{--panel-edge:10px}}
@media(prefers-reduced-motion:reduce){.intent-shell .panel-trigger,.intent-shell .intent-assets,.intent-shell .intent-chat{transition:none}}

/* Explicit time-control rows inside the options grid. */
#intent-status-dock #intent-generation-options{grid-template-columns:1.25fr 1fr 1.3fr;grid-template-rows:46px 52px 52px 36px;gap:6px 10px;min-width:0}

#intent-status-dock #intent-generation-options .dock-spec-pair{display:grid;grid-template-columns:1fr 1fr;gap:6px;min-width:0}

#intent-status-dock .dock-timeline{grid-column:1 / -1;grid-row:2;min-width:0;display:grid;grid-template-rows:16px 32px;gap:4px}

#intent-status-dock .dock-range-row{display:grid;grid-template-columns:48px minmax(0,1fr) 48px;align-items:center;gap:12px;min-width:0}

#intent-status-dock #intent-generation-options .dock-range-row>input{width:48px;height:32px;padding:0 3px;text-align:center;border-radius:6px;font-variant-numeric:tabular-nums;appearance:textfield}

#intent-status-dock .dock-range-row>input::-webkit-inner-spin-button{appearance:none}

#intent-status-dock #intent-generation-options .dock-range{height:32px;margin:0 8px;background:linear-gradient(var(--ui-line),var(--ui-line)) center/100% 4px no-repeat}

#intent-status-dock #intent-generation-options .dock-range input[type=range]{appearance:none;position:absolute;inset:0 auto auto -8px;width:calc(100% + 16px);height:32px;min-height:0;margin:0;padding:0;border:0;background:transparent;border-radius:0;box-shadow:none;pointer-events:none;z-index:2}

#intent-status-dock .dock-range input::-webkit-slider-runnable-track{height:4px;background:transparent;border:0;box-shadow:none}

#intent-status-dock .dock-range input::-webkit-slider-thumb{appearance:none;margin-top:-6px;box-sizing:border-box;width:16px;height:16px;border:2px solid var(--ui-surface);border-radius:50%;background:var(--ui-accent);pointer-events:auto;cursor:ew-resize}

#intent-status-dock .dock-range input::-moz-range-track{height:4px;background:transparent;border:0}

#intent-status-dock .dock-range input::-moz-range-thumb{box-sizing:border-box;width:16px;height:16px;background:var(--ui-accent);border:2px solid var(--ui-surface);border-radius:50%;pointer-events:auto}

#intent-status-dock .dock-range input::-moz-range-progress{background:transparent}

#intent-status-dock .dock-range input:focus-visible{outline:2px solid var(--ui-focus);outline-offset:2px}

#intent-status-dock .dock-range-fill{top:0;height:32px;min-width:0;padding:0;border:0;border-radius:0;background:linear-gradient(var(--ui-accent),var(--ui-accent)) center/100% 4px no-repeat;box-shadow:none;z-index:1;cursor:grab}

#intent-status-dock .dock-range-fill:active{cursor:grabbing}

#intent-status-dock label:has(#creative-outputDuration){grid-column:1 / span 2;grid-row:3;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;line-height:16px}

#intent-status-dock #creative-outputDuration{grid-row:2;grid-column:1 / -1;height:26px}

#intent-status-dock label:has(#creative-outputDuration)>span{grid-column:2;grid-row:1}

#intent-status-dock #save-generation-options{grid-column:1 / span 2;grid-row:4}

#intent-status-dock #intent-provider-note{grid-column:3;grid-row:4}

#intent-status-dock .prompt-editor-tools{gap:4px}

#intent-status-dock .prompt-editor-tools button{padding-inline:4px}

@container(max-width:400px){#intent-status-dock .prompt-editor-tools{flex-wrap:wrap}#intent-status-dock #intent-generation-options{column-gap:6px}#intent-status-dock .intent-dock-upper,#intent-status-dock .intent-dock-lower{padding-inline:10px}}

#intent-status-dock .intent-dock-status{min-height:0;flex:1;overflow:auto;justify-content:flex-start;padding:10px 12px}

#intent-status-dock .intent-dock-status p{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}

#intent-status-dock #prompt-execution-info p{max-height:32px;overflow:auto}


/* Node-specific layouts within the same fixed upper band. */
#intent-status-dock #intent-node-detail{position:static;inset:auto;width:100%;flex:1 1 0;min-height:0;max-height:none!important;margin:0;padding:0;box-sizing:border-box;display:flex;flex-direction:column;gap:8px;overflow:hidden;border:0;border-radius:0;background:transparent;box-shadow:none;animation:none}

#intent-status-dock #intent-node-detail .node-editor-body{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}

#intent-status-dock #intent-node-detail label{margin:0;min-width:0;display:flex;flex-direction:column;gap:4px;color:var(--ui-muted);font-size:var(--ui-font-size-xs);line-height:16px}

#intent-status-dock #intent-node-detail input:not([type=checkbox]),#intent-status-dock #intent-node-detail select{width:100%;height:30px;min-height:0;padding:0 8px;margin:0;font-size:var(--ui-font-size-xs);box-sizing:border-box}

#intent-status-dock #intent-node-detail input[type=checkbox]{width:14px;height:14px;min-height:0;margin:0;accent-color:var(--ui-accent);flex-shrink:0}

#intent-status-dock #intent-node-detail button{height:28px;min-height:28px;padding:3px 7px;font-size:var(--ui-font-size-xs);white-space:nowrap}

#intent-status-dock .node-editor-footer{display:flex;flex:0 0 auto;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 8px;padding-top:6px;border-top:1px solid var(--ui-line)}

#intent-status-dock .node-editor-footer>div{display:flex;gap:5px;margin-left:auto}

#intent-status-dock .node-editor-hint{font-size:var(--ui-font-size-xs);line-height:14px;color:var(--ui-muted)}
#intent-status-dock .node-upload-progress{display:block;width:100%;height:5px;margin-top:4px;border:0;accent-color:var(--accent)}

#intent-status-dock #scene-close{background:transparent;border-color:transparent;color:var(--ui-muted)}

#intent-status-dock #scene-save{color:var(--ui-accent-strong);border-color:var(--ui-line-strong);background:var(--ui-accent-soft)}

#intent-status-dock .node-asset-layout{display:grid;grid-template-columns:104px minmax(0,1fr);gap:12px;min-width:0}

#intent-status-dock .node-asset-preview{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:112px;overflow:hidden;border-radius:8px;background:var(--ui-surface-subtle);padding:6px;font-size:var(--ui-font-size-xs);color:var(--ui-muted)}

#intent-status-dock .node-asset-preview [data-node-preview]{position:relative;display:block;width:100%;height:72px;padding:0;border-radius:4px;overflow:hidden}

#intent-status-dock .node-asset-preview [data-node-preview] img{position:absolute;inset:0;width:100%;height:100%;border-radius:0;object-fit:contain}

#intent-status-dock .node-asset-preview [data-node-preview] img.media-fill{object-fit:cover;opacity:.45;filter:blur(14px) saturate(.7);transform:scale(1.2)}

#intent-status-dock .node-asset-preview>img{width:100%;height:72px;object-fit:contain;border-radius:4px}

#intent-status-dock .node-asset-preview svg{width:24px;height:24px;margin-bottom:6px;color:var(--ui-accent-strong)}

#intent-status-dock .node-asset-preview span{width:100%;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

#intent-status-dock .node-asset-preview small{font-size:var(--ui-font-size-xs)}

#intent-status-dock .node-asset-fields{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;align-content:start}

#intent-status-dock .node-span{grid-column:1/-1}

#intent-status-dock #intent-node-detail .node-optional{flex-direction:row;align-items:center;align-self:end;min-height:30px;gap:6px;white-space:nowrap}

#intent-status-dock #intent-node-detail .node-upload{flex-direction:row;align-items:center;gap:8px}

#intent-status-dock #intent-node-detail .node-upload input{flex:1;width:0;font-size:var(--ui-font-size-xs);padding:0;height:26px;line-height:26px}

#intent-status-dock .node-upload input::file-selector-button{height:26px;border:1px solid var(--ui-line);border-radius:5px;background:var(--ui-surface-subtle);color:var(--ui-ink);margin-right:6px;font-size:var(--ui-font-size-xs)}

#intent-status-dock .node-rule-layout{display:grid;grid-template-columns:140px minmax(0,1fr);gap:12px;min-height:130px;height:100%}

#intent-status-dock .node-rule-bindings{min-width:0;min-height:0;overflow:auto;margin:0;padding:0;border:0;scrollbar-width:thin}

#intent-status-dock .node-rule-bindings legend{font-size:var(--ui-font-size-xs);color:var(--ui-muted);line-height:16px;margin-bottom:6px}

#intent-status-dock #intent-node-detail .node-binding{flex-direction:row;align-items:flex-start;gap:6px;padding:5px 0;color:var(--ui-ink)}

#intent-status-dock .node-binding input{margin-top:1px!important}

#intent-status-dock #intent-node-detail .node-rule-instruction{height:100%;min-height:0}

#intent-status-dock #scene-instruction{flex:1;min-height:80px;width:100%;margin:0;padding:8px 10px;resize:none;box-sizing:border-box;font-size:var(--ui-font-size-xs);line-height:1.65;background:var(--ui-surface-subtle)}

#intent-status-dock .node-time-summary dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:10px 0 14px}

#intent-status-dock .node-time-summary dt{font-size:var(--ui-font-size-xs);color:var(--ui-muted);margin-bottom:6px}

#intent-status-dock .node-time-summary dd{margin:0;font-size:20px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ui-ink)}

#intent-status-dock .node-time-summary dd small{font-size:var(--ui-font-size-xs);font-weight:400}

#intent-status-dock .node-time-summary p{margin:0;font-size:var(--ui-font-size-xs);color:var(--ui-muted);line-height:1.6}

#intent-status-dock #intent-node-detail[data-kind=summary]{overflow:auto}

#intent-status-dock #intent-node-detail[data-kind=summary] header{display:flex;justify-content:flex-end;flex-shrink:0;margin:0}

#intent-status-dock #intent-node-detail[data-kind=summary] header h3{display:none}

#intent-status-dock #intent-node-detail[data-kind=summary] pre,#intent-status-dock #intent-node-detail[data-kind=summary] p{margin:0;font-size:var(--ui-font-size-xs);line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere}

@container(max-width:440px){#intent-status-dock .node-asset-layout{grid-template-columns:78px minmax(0,1fr);gap:8px}#intent-status-dock .node-rule-layout{grid-template-columns:112px minmax(0,1fr);gap:8px}#intent-status-dock .node-editor-footer>div{gap:3px}#intent-status-dock .node-time-summary dd{font-size:var(--ui-font-size-lg)}}

/* Save actions become the local primary action only while changes are pending. */
#intent-status-dock #save-generation-options,#intent-status-dock #scene-save{font-weight:650;border:1px solid var(--ui-accent);background:var(--ui-accent-soft);color:var(--ui-accent-strong);box-shadow:0 1px 3px rgb(24 27 45 / 8%);transition:background .18s ease,color .18s ease,box-shadow .18s ease}

#intent-status-dock #save-generation-options{padding-inline:12px;min-height:30px;height:30px}

#intent-status-dock #save-generation-options[data-save-state=dirty],#intent-status-dock #scene-save[data-save-state=dirty]{color:var(--ui-surface);background:var(--ui-accent);border-color:var(--ui-accent);box-shadow:0 3px 12px color-mix(in srgb,var(--ui-accent) 28%,transparent);animation:dock-save-attention .75s ease-out 1}

#intent-status-dock #save-generation-options[data-save-state=saving],#intent-status-dock #scene-save[data-save-state=saving]{color:var(--ui-surface);background:var(--ui-accent);opacity:.8;cursor:wait}

#intent-status-dock #save-generation-options[data-save-state=dirty]:hover,#intent-status-dock #scene-save[data-save-state=dirty]:hover{background:var(--ui-accent-strong);box-shadow:0 4px 14px color-mix(in srgb,var(--ui-accent) 36%,transparent)}

#intent-status-dock #intent-node-detail[data-dirty=true] .node-editor-hint{color:var(--ui-accent-strong);font-weight:600}

#intent-status-dock #save-generation-options:disabled,#intent-status-dock #scene-save:disabled{animation:none;box-shadow:none}

@keyframes dock-save-attention{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ui-accent) 40%,transparent)}60%{box-shadow:0 0 0 5px color-mix(in srgb,var(--ui-accent) 12%,transparent)}100%{box-shadow:0 3px 12px color-mix(in srgb,var(--ui-accent) 28%,transparent)}}
@media(prefers-reduced-motion:reduce){#intent-status-dock #save-generation-options,#intent-status-dock #scene-save{animation:none!important;transition:none}}

#intent-status-dock #save-generation-options[data-save-state=dirty],#intent-status-dock #scene-save[data-save-state=dirty]{background:var(--ui-accent)!important;color:var(--ui-surface)!important;border-color:var(--ui-accent)!important}

#intent-status-dock #intent-generation-options .dock-range-fill{pointer-events:none}

.personal-template-picker { margin:16px 0; padding:12px; border:1px solid var(--ui-line); border-radius:8px; }

.personal-template-picker summary { cursor:pointer; font-weight:600; }

.personal-template-scroll { display:grid; gap:10px; max-height:320px; overflow-y:auto; margin-top:12px; }

.project-card-actions { flex-wrap:wrap; }

#workspace-quote-summary { min-width:0; max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:var(--ui-font-size-xs); color:var(--ui-ink); }

/* Searchable asset picker used by creative-space scene nodes. */
#intent-status-dock #intent-node-detail .scene-picker-entry{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0}

.scene-picker-entry input[type="hidden"]{display:none}

.scene-picker-entry strong{font-size:var(--ui-font-size-xs);color:var(--ui-ink)}

.scene-picker-open{min-height:32px;padding:0 12px;border:1px solid var(--ui-line);border-radius:7px;background:var(--ui-surface);color:var(--ui-ink);font-size:var(--ui-font-size-xs)}

.scene-entry-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}

.node-asset-preview .node-processed-badge{display:inline-block;width:fit-content;margin-top:2px;padding:3px 9px;border:1px solid var(--ui-accent);background:var(--ui-accent-soft);color:var(--ui-accent-strong);font-weight:600}

}
/* /creative-materials.css */
@layer legacy {
/* Project-scoped materials. Account-wide library management lives elsewhere. */
#intent-assets-panel .cm-heading { align-items: center; padding: 16px 14px 12px; }
#intent-assets-panel .cm-heading h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
#intent-material-count { color: var(--ui-muted); font-size: var(--ui-font-size-xs); font-weight: 400; }
#intent-assets-panel .cm-actions { display: grid; grid-template-columns: 1fr; gap: 7px; padding: 0 14px; flex: 0 0 auto; }
#intent-assets-panel .cm-actions button { width: 100%; min-height: 36px; font-size: var(--ui-font-size-xs); }
#intent-assets-panel .cm-drop { display: grid; justify-items: center; gap: 5px; margin: 10px 14px; padding: 12px 6px; border: 1px dashed var(--ui-line-strong); border-radius: 9px; background: var(--ui-surface-subtle); color: var(--ui-muted); white-space: normal; font-size: var(--ui-font-size-xs); flex: 0 0 auto; }
#intent-assets-panel .cm-drop small { font-size: var(--ui-font-size-xs); }
#intent-assets-panel.cm-dragging { outline: 2px solid var(--ui-accent); outline-offset: -2px; }
#intent-assets-panel.cm-dragging .cm-drop { border-color: var(--ui-accent); background: var(--ui-accent-soft); color: var(--ui-accent-strong); }
#intent-assets-panel .cm-content { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
#intent-assets-panel #intent-assets-list { padding: 0 12px 12px; overflow: visible; flex: none; }
#intent-assets-panel .cm-asset { padding: 10px 0; border-bottom: 1px solid var(--ui-line); display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 9px; align-items: start; }
#intent-assets-panel .cm-asset:last-child { border: 0; }
#intent-assets-panel .cm-thumbnail { width: 52px; height: 64px; padding: 0; overflow: hidden; background: var(--ui-surface-subtle); border-color: var(--ui-line); }
#intent-assets-panel .cm-thumbnail img { width: 100%; height: 100%; object-fit: contain; }
#intent-assets-panel .cm-asset-copy { min-width: 0; display: grid; gap: 4px; }
#intent-assets-panel .cm-asset-copy strong { font-size: var(--ui-font-size-xs); font-weight: 550; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#intent-assets-panel .cm-asset-copy small { font-size: var(--ui-font-size-xs); color: var(--ui-muted); overflow-wrap: anywhere; }
#intent-assets-panel .cm-asset-copy .cm-prepared-label { color: var(--ui-accent); }
#intent-assets-panel .cm-asset-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
#intent-assets-panel .cm-asset-actions button { font-size: var(--ui-font-size-xs); min-height: 28px; }
#intent-assets-panel .cm-asset-restricted .cm-thumbnail { cursor: default; }
#intent-assets-panel .cm-badge-processed { display: inline-block; width: fit-content; margin-top: 3px; padding: 3px 9px; border: 1px solid var(--ui-accent); border-radius: 999px; background: var(--ui-accent-soft); color: var(--ui-accent-strong); font-weight: 600; }
#intent-assets-panel .cm-badge-pending { display: inline-block; width: fit-content; margin-top: 3px; padding: 3px 9px; border: 1px dashed var(--ui-accent); border-radius: 999px; color: var(--ui-accent-strong); font-weight: 600; }
#intent-assets-panel .cm-empty { margin: 12px 0; padding: 18px 5px; color: var(--ui-muted); font-size: var(--ui-font-size-xs); text-align: center; line-height: 1.8; }
#intent-assets-panel .cm-queue { padding: 12px; border-top: 1px solid var(--ui-line); }
#intent-assets-panel .cm-queue h3 { font-size: var(--ui-font-size-xs); margin-bottom: 7px; }
#intent-assets-panel .cm-queue-item { padding: 9px 0; display: grid; gap: 5px; font-size: var(--ui-font-size-xs); overflow-wrap: anywhere; }
#intent-assets-panel .cm-queue-item small { color: var(--ui-muted); }
#intent-assets-panel .cm-queue-item[data-state="failed"] small,
#intent-assets-panel .cm-queue-item[data-state="unknown"] small { color: var(--ui-danger); }
#intent-assets-panel .cm-queue-item > div { display: flex; flex-wrap: wrap; gap: 10px; }
#intent-assets-panel .cm-queue-progressline { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
#intent-assets-panel .cm-queue-progress { flex: 1; height: 6px; overflow: hidden; background: var(--ui-surface-subtle); border: 1px solid var(--ui-line); border-radius: 99px; }
#intent-assets-panel .cm-queue-pct { flex: 0 0 auto; min-width: 34px; text-align: right; color: var(--ui-accent); font-size: var(--ui-font-size-xs); font-weight: 600; font-variant-numeric: tabular-nums; }
#intent-assets-panel .cm-queue-progress > span { display: block; height: 100%; background: var(--ui-accent); border-radius: 99px; transition: width 160ms ease-out; }
#intent-assets-panel .cm-spin { display: inline-block; width: 11px; height: 11px; margin-right: 5px; vertical-align: -1px; border: 2px solid var(--ui-accent-soft, var(--ui-accent-soft)); border-top-color: var(--ui-accent); border-radius: 50%; animation: cm-spin 700ms linear infinite; }
@keyframes cm-spin { to { transform: rotate(360deg); } }
#intent-assets-panel .cm-feedback { font-size: var(--ui-font-size-xs); line-height: 1.6; padding: 10px 14px; background: var(--ui-surface-subtle); overflow-wrap: anywhere; flex: 0 0 auto; }
#intent-assets-panel .cm-feedback button { margin-left: 7px; }
#intent-assets-panel .input-boundary { flex: 0 0 auto; padding: 9px 14px; }
#studio-assets-trigger.cm-drag-ready { outline: 2px solid var(--ui-accent); }
/* Dialog width/padding live in styles/pages/dialogs.css: this file is in the
   legacy layer, so same-name declarations here never beat the pages layer. */
.cm-dialog[open] { gap: 0; color: var(--ui-ink); background: var(--ui-surface); }
.cm-dialog .cm-dialog-head { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 24px; border-bottom: 1px solid var(--ui-line); }
.cm-dialog .cm-dialog-head > div { min-width: 0; }
.cm-dialog .cm-dialog-head h2 { margin: 0; font-size: 18px; }
.cm-dialog .cm-dialog-head p { margin: 6px 0 0; color: var(--ui-muted); font-size: var(--ui-font-size-xs); overflow-wrap: anywhere; }
.cm-dialog .cm-dialog-head > button { flex: 0 0 auto; }
.cm-dialog .cm-tools { padding: 16px 24px; display: flex; align-items: center; flex-wrap: wrap; gap: 12px; flex: 0 0 auto; }
.cm-dialog .cm-tools input[type="search"] { margin: 0; flex: 1 1 100%; }
.cm-dialog .cm-filters { display: flex; flex-wrap: wrap; gap: 5px; margin-right: auto; }
.cm-dialog .cm-filters button { font-size: var(--ui-font-size-xs); padding: 7px 12px; }
.cm-dialog .cm-filters button[aria-pressed="true"] { color: var(--ui-accent-strong); background: var(--ui-accent-soft); border-color: var(--ui-accent); }
.cm-dialog .cm-check-label { display: flex; align-items: center; gap: 7px; margin: 0; font-size: var(--ui-font-size-xs); }
.cm-dialog input[type="checkbox"] { width: 16px; height: 16px; flex: 0 0 16px; margin: 0; accent-color: var(--ui-accent); }
.cm-dialog .cm-library-scroll { padding: 0 24px 20px; overflow-y: auto; min-height: 0; flex: 1 1 auto; overscroll-behavior: contain; }
.cm-dialog .cm-library-status { margin: 0 0 12px; font-size: var(--ui-font-size-xs); color: var(--ui-muted); line-height: 1.7; overflow-wrap: anywhere; }
.cm-dialog .cm-library-status:empty { display: none; }
/* 文件夹与折叠结果：素材库页面的目录语义在导入弹窗里保持一致。 */
.cm-dialog .cm-library-path { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0 24px 12px; font-size: var(--ui-font-size-xs); color: var(--ui-muted); }
.cm-dialog .cm-library-path button { font-size: var(--ui-font-size-xs); padding: 6px 10px; }
.cm-dialog .cm-library-current { font-weight: 500; color: var(--ui-ink); }
.cm-dialog .cm-library-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.cm-dialog .cm-library-folder { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 12px; border: 1px solid var(--ui-line); border-radius: 10px; background: var(--ui-surface); color: var(--ui-ink); text-align: left; }
.cm-dialog .cm-library-folder:hover { border-color: var(--ui-accent); background: var(--ui-surface-subtle); }
.cm-dialog .cm-library-folder svg { flex: 0 0 auto; width: 22px; height: 22px; color: var(--ui-accent); }
.cm-dialog .cm-library-folder strong { display: block; font-size: var(--ui-font-size-xs); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-dialog .cm-library-folder small { display: block; margin-top: 3px; color: var(--ui-muted); font-size: var(--ui-font-size-xs); }
.cm-dialog .cm-library-preview .cm-library-count { display: inline-flex; align-items: center; gap: 3px; right: auto; left: 6px; color: var(--ui-ink); font-size: var(--ui-font-size-xs); }
.cm-dialog .cm-library-count svg { width: 12px; height: 12px; }
.cm-dialog .cm-library-card { min-width: 0; border: 1px solid var(--ui-line); border-radius: 10px; overflow: hidden; background: var(--ui-surface); }
.cm-dialog .cm-library-card.cm-selected { border-color: var(--ui-accent); background: var(--ui-accent-soft); }
.cm-dialog .cm-library-preview { display: block; width: 100%; aspect-ratio: 4 / 3; position: relative; border: 0; border-radius: 0; padding: 0; overflow: hidden; background: var(--ui-surface-subtle); }
.cm-dialog .cm-library-preview img { width: 100%; height: 100%; object-fit: contain; }
.cm-dialog .cm-library-preview > span { position: absolute; right: 6px; bottom: 6px; border-radius: 4px; padding: 3px 5px; color: var(--ui-ink); background: var(--ui-surface); font-size: var(--ui-font-size-xs); }
.cm-dialog .cm-library-copy { padding: 11px; display: grid; gap: 7px; }
.cm-dialog .cm-library-copy .cm-check-label { align-items: flex-start; line-height: 1.6; }
.cm-dialog .cm-library-copy .cm-check-label input { margin-top: 2px; }
.cm-dialog .cm-library-copy strong { display: block; font-weight: 500; font-size: var(--ui-font-size-xs); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-dialog .cm-library-copy small { color: var(--ui-muted); font-size: var(--ui-font-size-xs); overflow-wrap: anywhere; }
.cm-dialog .cm-load-more { display: block; margin: 18px auto 0; }
.cm-dialog .cm-dialog-footer { flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 16px 24px; border-top: 1px solid var(--ui-line); background: var(--ui-surface-subtle); }
.cm-dialog .cm-dialog-footer p { flex: 1 1 220px; margin: 0; font-size: var(--ui-font-size-xs); color: var(--ui-muted); overflow-wrap: anywhere; }
.cm-dialog .cm-dialog-footer button { font-size: var(--ui-font-size-xs); }
.cm-dialog .cm-dialog-error { color: var(--ui-danger); font-size: var(--ui-font-size-xs); margin: 0 24px 12px; overflow-wrap: anywhere; flex: 0 0 auto; }
.cm-dialog .cm-preview-body { min-height: 0; overflow-y: auto; padding: 20px 24px; }
.cm-dialog .cm-preview-media { display: grid; place-items: center; background: var(--ui-surface-subtle); border-radius: 10px; overflow: hidden; }
.cm-dialog .cm-preview-media :is(img, video) { display: block; max-width: 100%; width: 100%; max-height: min(55dvh, 560px); object-fit: contain; }
.cm-dialog .cm-preview-info { display: flex; gap: 14px; flex-wrap: wrap; margin: 14px 0 0; font-size: var(--ui-font-size-xs); color: var(--ui-muted); overflow-wrap: anywhere; }
.cm-dialog .cm-target-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, 1fr); gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--ui-line); }
.cm-dialog .cm-target-row > div { min-width: 0; overflow-wrap: anywhere; font-size: var(--ui-font-size-xs); }
.cm-dialog .cm-target-row small { display: block; margin-top: 5px; color: var(--ui-muted); }
.cm-dialog .cm-target-row select { margin-top: 6px; }
@media(max-width:480px) {
  .cm-dialog :is(.cm-dialog-head, .cm-tools, .cm-dialog-footer, .cm-preview-body) { padding: 14px; }
  .cm-dialog .cm-library-scroll { padding: 0 14px 14px; }
  .cm-dialog .cm-library-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .cm-dialog .cm-library-copy { padding: 9px; }
  .cm-dialog .cm-dialog-footer p { flex-basis: 100%; }
  .cm-dialog .cm-dialog-footer button { flex: 1 1 auto; }
  .cm-dialog .cm-target-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .cm-dialog .cm-tools input { font-size: var(--ui-font-size-lg); }
}
@media(max-height:600px) {
  #intent-assets-panel .cm-drop { padding-block: 7px; }
  #intent-assets-panel .cm-drop small { display: none; }
  .cm-dialog .cm-dialog-head, .cm-dialog .cm-tools, .cm-dialog .cm-dialog-footer { padding-block: 10px; }
}

}
/* /asset-library.css */
@layer legacy {
/*
 * Legacy 素材库 leftovers that the page stylesheet (styles/pages/assets.css)
 * does not own: the hidden-state guard, inline audio players and the upload
 * progress track. Everything else lives in the pages layer.
 */
#asset-library-root {min-width:0}

#asset-library-root [hidden] {display:none!important}

.asset-library-audio {display:grid;gap:10px;place-items:center;max-width:100%;padding:12px}

.asset-library-audio>span {color:var(--ui-accent)}

.asset-library-audio audio {width:100%;min-width:0;height:32px}

.asset-library-spin {display:inline-block;flex:0 0 auto;width:12px;height:12px;margin-right:2px;border:2px solid var(--ui-accent-soft);border-top-color:var(--ui-accent);border-radius:50%;animation:asset-library-spin 700ms linear infinite}

@keyframes asset-library-spin {to{transform:rotate(360deg)}}

.asset-library-track {display:flex;align-items:center;gap:10px;margin-top:14px}

.asset-library-track progress {display:block;flex:1;height:6px;margin:0;accent-color:var(--ui-accent);border:0;border-radius:20px}

.asset-library-track b {flex:0 0 auto;min-width:40px;text-align:right;color:var(--ui-accent);font-size:var(--ui-font-size-sm);font-weight:600;font-variant-numeric:tabular-nums}

@media(prefers-reduced-motion:reduce) {
  #asset-library-root * {transition:none!important}
}

}
/* /results.css */
@layer legacy {
/* One geometry for every input mode and every output state. */
#results-view { --rp-stage-height: 360px; }

#results-view .results-layout { grid-template-columns: minmax(190px, 230px) minmax(0, 1fr); gap: 22px; }

#results-view .comparison { min-width: 0; }

#results-view .comparison-title { align-items: flex-start; gap: 10px; }

#results-view .comparison-title h2 { overflow-wrap: anywhere; }

#results-view .comparison-title p { line-height: 1.6; }

#results-view .comparison-title .badge { white-space: normal; }

#results-view .experiment-item { padding: 14px 12px; border-radius: 10px; }

#results-view .experiment-item.active { box-shadow: inset 3px 0 var(--ui-accent); }

#results-view .experiment-info { flex-wrap: wrap; gap: 6px; }

#results-view .experiment-info .badge { white-space: normal; font-size: var(--ui-font-size-xs); line-height: 1.5; }

.rp-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

.rp-panel-host { min-width: 0; }

.rp-panel { display: grid; grid-template-rows: 60px var(--rp-stage-height, 360px) 44px; overflow: hidden; border: 1px solid var(--ui-line); border-radius: 14px; background: var(--ui-glass-strong); box-shadow: 0 3px 12px #21193605; }

.rp-panel-header { min-width: 0; padding: 10px 14px; display: flex; flex-direction: column; justify-content: center; gap: 4px; border-bottom: 1px solid var(--ui-line); }

.rp-panel-header h3 { margin: 0; font-size: var(--ui-font-size-xs); font-weight: 600; line-height: 1.4; text-align: center; }

.rp-panel-header small { color: var(--ui-muted); font-size: var(--ui-font-size-xs); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: center; }

.rp-stage { min-width: 0; min-height: 0; padding: 10px; background: linear-gradient(155deg, var(--ui-bg), var(--ui-surface-muted)); overflow: hidden; }

.rp-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 5px 10px; min-width: 0; border-top: 1px solid var(--ui-line); }

.rp-toolbar > span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: var(--ui-font-size-xs); color: var(--ui-muted); }

.rp-toolbar :is(button, a), .rp-toolbar .submission-prompt-button { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; margin: 0; min-height: 30px; padding: 4px 8px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--ui-accent-strong); font-size: var(--ui-font-size-xs); line-height: 1.4; text-decoration: none; }

.rp-toolbar :is(button, a):hover { background: var(--ui-accent-soft); border-color: var(--ui-line); }

.rp-prompt { height: 100%; padding: 18px; border-radius: 8px; background: var(--ui-glass-strong); overflow: hidden; }

.rp-content-label { display: block; color: var(--ui-muted); font-size: var(--ui-font-size-xs); margin-bottom: 12px; text-align: center; }

.rp-prompt-copy { margin: 0; font-size: var(--ui-font-size-sm); line-height: 24px; white-space: pre-wrap; overflow-wrap: anywhere; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 11; }

.rp-hero-layout { display: grid; grid-template-columns: clamp(36px, calc(100% - 250px), 88px) minmax(0, 1fr); gap: 10px; height: 100%; min-height: 0; }

/* The secondary rail gives up width first; the main preview retains 240px until the rail reaches 36px. */
.rp-thumbnails { display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 8px; min-height: 0; container-type: inline-size; container-name: reference-rail; }

.rp-main-media { height: 100%; min-width: 0; min-height: 0; }

.rp-image-grid { height: 100%; min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: calc((var(--rp-stage-height, 360px) - 36px) / 3); gap: 8px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }

.rp-thumb { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 0; width: 100%; height: 100%; padding: 5px 5px 25px; overflow: hidden; border: 1px solid var(--ui-surface-muted); border-radius: 9px; background: var(--ui-glass-strong); box-shadow: 0 2px 3px #251d3010, 0 5px 10px #251d3006; transition: border-color .15s, box-shadow .15s; }

.rp-thumb:hover { border-color: var(--ui-accent); box-shadow: 0 3px 8px #39285518; }

.rp-thumb[aria-pressed="true"] { border-color: var(--ui-accent); box-shadow: inset 3px 0 var(--ui-accent), 0 2px 8px #6e56cb20; background: var(--ui-glass-strong); }

.rp-thumb img { display: block; width: 100%; height: 100%; object-fit: contain; min-height: 0; border-radius: 4px; background: var(--ui-bg); }

.rp-thumb-label { position: absolute; left: 3px; right: 3px; bottom: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--ui-font-size-xs); line-height: 12px; color: var(--ui-muted); text-align: center; }

.rp-thumb-label-short { display: none; }

.rp-thumb-missing, .rp-thumb-error { font-size: var(--ui-font-size-xs); color: var(--ui-muted); text-align: center; overflow-wrap: anywhere; }

.rp-media { position: relative; width: 100%; height: 100%; overflow: hidden; min-height: 0; border: 1px solid var(--ui-surface-muted); border-radius: 10px; background: var(--ui-surface-muted); box-shadow: 0 3px 8px #251d3010; }

.rp-media :is(img, video) { display: block; width: 100%; height: 100%; object-fit: contain; }

.rp-media img[role="button"] { cursor: zoom-in; }

.rp-media audio { width: calc(100% - 24px); margin: 24px 12px; }

.rp-media-feedback { position: absolute; left: 8px; right: 8px; top: 8px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; padding: 8px; border-radius: 6px; background: var(--ui-glass-strong); font-size: var(--ui-font-size-xs); color: var(--ui-muted); pointer-events: none; }

.rp-media-feedback button { pointer-events: auto; padding: 4px 8px; font-size: var(--ui-font-size-xs); }

.rp-media [hidden], .rp-thumb [hidden] { display: none; }

.rp-unavailable { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--ui-muted); padding: 14px; text-align: center; }

.rp-unavailable strong { font-size: var(--ui-font-size-sm); }

.rp-unavailable small { font-size: var(--ui-font-size-xs); line-height: 1.6; }

.rp-stage > [data-output-status] { height: 100%; }

.rp-task-status { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 16px; color: var(--ui-muted); }

.rp-task-status strong { font-size: var(--ui-font-size-lg); color: var(--ui-ink); }

.rp-task-status > span { font-size: var(--ui-font-size-xs); }

.rp-task-status small { font-size: var(--ui-font-size-xs); line-height: 1.6; }

.rp-task-status .rp-status-symbol { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--ui-line); border-radius: 50%; font-size: 30px; color: var(--ui-accent); background: var(--ui-glass-strong); }

.rp-task-status[data-tone="error"] .rp-status-symbol { color: var(--ui-danger); }

.rp-task-status[data-tone="warning"] .rp-status-symbol { color: var(--ui-warning); }

.rp-task-status progress { width: min(180px, 100%); height: 5px; accent-color: var(--ui-accent); }

.rp-material-dialog[open] { width: min(860px, calc(100vw - 24px)); display: flex; flex-direction: column; max-height: calc(100dvh - 24px); padding: 0; }

.rp-dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--ui-line); }

.rp-dialog-header h2 { font-size: var(--ui-font-size-lg); margin: 0; }

.rp-dialog-header p { font-size: var(--ui-font-size-xs); color: var(--ui-muted); margin: 6px 0 0; }

.rp-dialog-stage { height: min(56dvh, 540px); min-height: 140px; padding: 12px; }

.rp-dialog-list { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 20px; max-height: 150px; overflow-y: auto; border-top: 1px solid var(--ui-line); }

.rp-dialog-list button { padding: 8px 12px; font-size: var(--ui-font-size-xs); }

.rp-dialog-list button[aria-pressed="true"] { background: var(--ui-accent-soft); border-color: var(--ui-accent); color: var(--ui-accent-strong); }

@container reference-rail (max-width: 60px) {
  .rp-thumb { padding: 3px 3px 20px; border-radius: 7px; }

  .rp-thumb-label { bottom: 4px; }

  .rp-thumb-label-full { display: none; }

  .rp-thumb-label-short { display: inline; }
}

@container secondary-page (max-width: 900px) {
  #results-view .results-layout { grid-template-columns: minmax(0, 1fr); }
}

@container secondary-page (max-width: 620px) {
  .rp-panels { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width:480px) {
  #results-view { --rp-stage-height: 320px; }

  .rp-panels { grid-template-columns: minmax(0, 1fr); }

  .rp-prompt-copy { -webkit-line-clamp: 9; }

  .rp-toolbar :is(button, a), .rp-toolbar .submission-prompt-button { min-height: 34px; }
}

}
/* /video-upstreams.css */
@layer legacy {
/* Compact administration, scoped to the model center. */
#providers-view {font-size:var(--ui-font-size-sm)}

#providers-view .section-heading {margin:0 0 var(--ui-space-6);align-items:center}

#providers-view .hub-copy {margin:4px 0;color:var(--ui-muted);font-size:var(--ui-font-size-2xs);line-height:1.6}

#providers-view h3,#providers-view h4 {margin:0;font-size:var(--ui-font-size-sm);font-weight:600}

#providers-view button {min-height:30px;padding:6px 10px;font-size:var(--ui-font-size-2xs);border-radius:var(--ui-radius-sm);white-space:nowrap}

#providers-view input:not([type=checkbox]),#providers-view select {height:32px;min-height:32px;margin:0;padding:5px 9px;font-size:var(--ui-font-size-sm);border:1px solid var(--ui-line);border-radius:var(--ui-radius-sm);box-shadow:none;min-width:0;max-width:100%;background:var(--ui-surface)}

#providers-view input:not([type=checkbox]) {width:100%}

#providers-view input[type=checkbox] {width:14px;height:14px;min-height:0;margin:0;accent-color:var(--ui-accent)}

#providers-view :is(button,input,select):focus-visible {outline:2px solid var(--ui-focus);outline-offset:2px}

#providers-view summary {cursor:pointer;list-style:none}

#providers-view summary::-webkit-details-marker {display:none}


.upstream-actions {display:flex;align-items:center;gap:var(--ui-space-2);flex-wrap:wrap}


.upstream-table-wrap {overflow:auto;border:1px solid var(--ui-line);border-radius:var(--ui-radius-md);background:var(--ui-surface)}

.upstream-table {width:100%;border-collapse:collapse;text-align:left;white-space:nowrap}

.upstream-table th {padding:9px 14px;font-size:var(--ui-font-size-2xs);font-weight:500;color:var(--ui-muted);background:var(--ui-surface-subtle)}

.upstream-table td {padding:10px 14px;border-top:1px solid var(--ui-line);font-size:var(--ui-font-size-xs)}

.upstream-table td strong {font-weight:600}

.upstream-table td small {display:block;font-size:var(--ui-font-size-2xs);color:var(--ui-muted);margin-top:3px}

.upstream-table tr.selected {background:color-mix(in srgb,var(--ui-accent) 5%,var(--ui-surface))}

.upstream-table th:last-child {width:112px}

.upstream-state {display:inline-block;padding:3px 7px;border-radius:var(--ui-radius-xs);font-size:var(--ui-font-size-2xs);line-height:1.3;background:var(--ui-surface-subtle);color:var(--ui-muted);font-weight:500;white-space:nowrap}

.upstream-state.on {background:var(--ui-success-soft);color:color-mix(in srgb,var(--ui-success) 55%,var(--ui-ink))}

#providers-view .upstream-row-actions button {border:0;background:transparent;color:var(--ui-accent);padding:4px 7px}

.upstream-editor {margin-top:var(--ui-space-3);border:1px solid var(--ui-line);border-radius:var(--ui-radius-md);padding:var(--ui-space-4);background:var(--ui-surface)}

.upstream-editor-heading {display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}

.upstream-fields {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ui-space-3);margin:var(--ui-space-2) 0}

.upstream-basics {grid-template-columns:minmax(0,1fr) 120px 130px;align-items:end}

#providers-view .upstream-fields label {display:flex;flex-direction:column;gap:5px;margin:0;color:var(--ui-muted);font-size:var(--ui-font-size-2xs);min-width:0}

#providers-view .upstream-fields label:has(input[type=checkbox]) {flex-direction:row;align-items:center;min-height:32px}

.upstream-limits {margin-top:12px;border-top:1px solid var(--ui-line);padding-top:10px}

#providers-view .upstream-limits>summary,#providers-view .model-center-role>summary {font-size:var(--ui-font-size-2xs);color:var(--ui-muted);display:flex;align-items:center;gap:6px}

.upstream-limits>summary:before,.model-center-role>summary:before {content:'›';font-size:var(--ui-font-size-lg);line-height:1;transition:transform .15s}

.upstream-limits[open]>summary:before,.model-center-role[open]>summary:before {transform:rotate(90deg)}

.upstream-save {display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:16px;padding-top:12px;border-top:1px solid var(--ui-line)}

.upstream-save>span {font-size:var(--ui-font-size-2xs);color:var(--ui-muted)}

#providers-view .model-center-role {margin:12px 0 22px;padding:0;border:0}

#providers-view .admin-assistant-heading {margin:var(--ui-space-5) 0 var(--ui-space-2);padding-top:var(--ui-space-5);border-top:1px solid var(--ui-line);align-items:center}

#providers-view #admin-assistant-prompts {display:block;border:1px solid var(--ui-line);border-radius:var(--ui-radius-md);background: var(--ui-glass-strong);overflow:hidden}

#providers-view .assistant-prompt+.assistant-prompt {border-top:1px solid var(--ui-line)}

#providers-view .assistant-prompt>header {display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:13px 14px 0}

#providers-view .assistant-prompt h4 {margin:0;font-size:var(--ui-font-size-sm);font-weight:500;display:flex;align-items:center;gap:8px}

#providers-view .assistant-prompt .hub-copy {margin:4px 0 0;font-size:var(--ui-font-size-2xs)}

#providers-view .assistant-prompt textarea,#providers-view .assistant-prompt-locked {margin:10px 14px 14px;width:calc(100% - 28px);font-size:var(--ui-font-size-2xs);line-height:1.6;font-family:inherit}

#providers-view .assistant-prompt textarea {min-height:120px;padding:10px;border:1px solid var(--ui-line);border-radius:var(--ui-radius-sm);resize:vertical;white-space:pre-wrap}

#providers-view .assistant-prompt-locked {max-height:220px;overflow:auto;padding:10px;border:1px solid var(--ui-line);border-radius:var(--ui-radius-sm);background:var(--ui-surface-muted);color:var(--ui-muted);white-space:pre-wrap;word-break:break-word}

#providers-view .assistant-prompt .badge {flex:none}

#providers-view .admin-assistant-heading .admin-section-title {margin:0;font-size:var(--ui-font-size-sm)}

#providers-view #admin-assistant-list {display:block;border:1px solid var(--ui-line);border-radius:var(--ui-radius-md);background: var(--ui-glass-strong);overflow:hidden}

.assistant-entry+.assistant-entry {border-top:1px solid var(--ui-line)}

.assistant-entry>summary {display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 14px}

.assistant-entry>summary>span:first-child {display:flex;align-items:center;gap:16px;min-width:0}

.assistant-entry>summary strong {font-size:var(--ui-font-size-xs);font-weight:500;overflow:hidden;text-overflow:ellipsis}

.assistant-entry>summary small {font-size:var(--ui-font-size-2xs);color:var(--ui-muted);white-space:nowrap}

#providers-view .model-admin-card {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;border:0;border-top:1px solid var(--ui-line);border-radius:0;padding:14px;box-shadow:none}

#providers-view .model-admin-card label {margin:0;gap:5px;font-size:var(--ui-font-size-2xs)}

#providers-view .model-admin-card>header,#providers-view .model-admin-card>.admin-card-actions,#providers-view .model-admin-card>.admin-error {grid-column:1/-1}

#providers-view .model-admin-card header h3 {font-size:var(--ui-font-size-sm)}

#providers-view .model-admin-card>.admin-hint {display:none}

#providers-view .model-admin-card>.admin-secret {display:flex;flex-direction:column;gap:5px;font-size:var(--ui-font-size-2xs)}

#providers-view .model-admin-card .admin-switch,#providers-view .model-admin-card .admin-reveal {display:flex;flex-direction:row;align-items:center;gap:6px}

#providers-view .model-admin-card .admin-card-actions {justify-content:flex-end;padding-top:6px}

#providers-view .model-admin-card .remove-assistant {color:var(--ui-danger);margin-right:auto;order:-1}

/* AI 工具管理：按类目分组的开关表，复用 provider-table 表格。 */
#providers-view .tool-shelf-category {display:flex;align-items:baseline;gap:10px;margin:14px 0 6px;font-size:var(--ui-font-size-sm);font-weight:600}

#providers-view .tool-shelf-category small {color:var(--ui-muted);font-weight:400}

#providers-view .tool-shelf-table {width:100%;border-collapse:collapse;text-align:left}

#providers-view .tool-shelf-table th {padding:7px 12px;font-size:var(--ui-font-size-2xs);font-weight:500;color:var(--ui-muted);border-bottom:1px solid var(--ui-line)}

#providers-view .tool-shelf-table td {padding:8px 12px;border-top:1px solid var(--ui-line);font-size:var(--ui-font-size-sm);vertical-align:middle}

#providers-view .tool-shelf-table tbody tr:first-child td {border-top:0}

#providers-view .tool-shelf-table td small {display:block;font-size:var(--ui-font-size-2xs);color:var(--ui-muted);margin-top:2px;line-height:1.4}

#providers-view .tool-shelf-table .admin-switch {display:flex;align-items:center;justify-content:center;min-height:var(--ui-touch-target,32px)}

@media(max-width:768px) {
  #providers-view {padding:var(--ui-space-4) var(--ui-space-4)}

  .upstream-table td,.upstream-table th {padding:9px 10px}

  .upstream-table {min-width:0}

  .upstream-table th:last-child {width:auto}

  .upstream-table td {font-size:var(--ui-font-size-2xs)}

  .upstream-table td:first-child small {display:none}

  #providers-view .upstream-row-actions button {display:block;min-height:26px;padding:3px 5px;font-size:var(--ui-font-size-2xs)}

  .upstream-basics {grid-template-columns:minmax(0,1fr) 80px}

  .upstream-basics .admin-switch {grid-column:1/-1}
}

@media(max-width:480px) {
  .upstream-fields,#providers-view .model-admin-card {grid-template-columns:1fr}

  .upstream-basics {grid-template-columns:minmax(0,1fr) 80px}

  .upstream-editor {padding:var(--ui-space-3)}
}

/* 触控环境：致密管理控件仍须满足最小触控目标 */
@media(pointer:coarse) {
  #providers-view button,
 #providers-view summary,
 #providers-view input:not([type=checkbox]),
 #providers-view select {min-height:var(--ui-touch-target)}

  #providers-view button {min-width:var(--ui-touch-target)}
}

}
/* /brand/brand.css */
@layer legacy {
/* LogoUI placement only. Artwork remains in the shared vector asset library. */
.eos-site-brand img,
.eos-story-brand img {
  display: block;
  flex-shrink: 0;
  object-fit: contain;
  max-width: 100%;
  height: auto;
}
.eos-site-brand .eos-brand-symbol {
  width: 32px;
  height: auto;
}
.eos-site-brand .eos-brand-name {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  line-height: 1;
}
.eos-site-brand .eos-brand-name img {
  width: 96px;
  height: auto;
}
.eos-site-brand .eos-brand-name small {
  margin: 0;
  font-size: 7px !important;
  letter-spacing: 1.1px !important;
  line-height: 1.4;
}
.sidebar .eos-sidebar-brand {
  gap: 10px;
  min-height: 44px;
  padding-inline: 4px;
}
.eos-story-brand {
  display: block;
  width: 260px;
  max-width: 100%;
  align-self: flex-start;
}
.eos-story-brand img {
  width: 100%;
}
.auth-card .eos-auth-brand {
  width: 240px;
  max-width: 100%;
  min-height: 0;
  padding: 0;
}
.auth-card .eos-auth-brand img {
  width: 100%;
}
.topbar .eos-quick-brand {
  gap: 12px;
  flex-shrink: 0;
}
.topbar .eos-quick-brand .brand-divider {
  margin-left: 4px;
}
@media (max-width:1280px) and (min-width:1024px) {
  .sidebar .eos-sidebar-brand { padding-inline: 0; gap: 8px; }
  .sidebar .eos-sidebar-brand .eos-brand-symbol { width: 28px; }
  .sidebar .eos-sidebar-brand .eos-brand-name img { width: 88px; }
}
.sidebar.sidebar-collapse .eos-sidebar-brand {
  justify-content: center;
  gap: 0;
  padding-inline: 0;
}
.sidebar.sidebar-collapse .eos-sidebar-brand .eos-brand-name { display: none; }
@media (max-width:1024px) {
  .sidebar .eos-sidebar-brand { justify-content: center; gap: 0; padding-inline: 0; }
  .sidebar .eos-sidebar-brand .eos-brand-name { display: none; }
}
@media (max-width:768px) {
  .eos-story-brand { width: 240px; }
  /* Login already shows the dark brand above the form in the stacked layout. */
  .auth-card .eos-auth-brand { display: none; }
}
@media (max-width:480px) {
  .topbar .eos-quick-brand { gap: 8px; }
  .topbar .eos-quick-brand .eos-brand-symbol { width: 28px; }
  .topbar .eos-quick-brand .eos-brand-name img { width: 88px; }
}
/* The legacy status-dot selector also matches the text span in this header. */
.topbar .eos-quick-brand + .local-indicator { flex-shrink: 0; white-space: nowrap; }
.topbar .eos-quick-brand + .local-indicator > #save-status {
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

}
/* /layout.css */
@layer legacy {
/* Unified workbench shell: one scroll owner for ordinary pages, local panels for studio.
 * Sidebar and topbar chrome live in styles/shell.css; this file owns the frame
 * geometry, the page scroll contract and page-level grid overrides. */
:root {
  --sidebar-width: 248px;
  --mobile-nav-height: 64px;
  --page-inline-padding: var(--ui-page-gutter);
  --page-bottom-safe-area: 56px;
}

html, body { width: 100%; height: 100%; overflow: hidden; }

body { min-height: 100dvh; display: flex; }

.sidebar { position: relative; top: auto; width: var(--sidebar-width); flex: 0 0 var(--sidebar-width); height: 100dvh; min-height: 0; transition: width var(--ui-duration-normal) var(--ui-ease-standard), flex-basis var(--ui-duration-normal) var(--ui-ease-standard); }

main { height: 100dvh; min-height: 0; min-width: 0; display: flex; flex: 1 1 auto; flex-direction: column; overflow: hidden; }

main > .topbar { width: 100%; max-width: none; margin: 0; position: relative; z-index: var(--ui-z-sticky); }

/* Ordinary navigation views share the same page scroll contract. */
main > .view:not(.intent-view) {
  box-sizing: border-box;
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  max-width: none;
  width: 100%;
  margin: 0;
  padding: var(--ui-space-7) var(--page-inline-padding) var(--page-bottom-safe-area);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

main > .view:not(.intent-view) > * { max-width: var(--ui-page-width); margin-left: auto; margin-right: auto; }

main > .view:not(.intent-view) > dialog { margin: auto; }

.prompt-studio-view { height: auto; min-height: 0; overflow-x: hidden; overflow-y: auto; }

main > .intent-view { flex: 1 1 auto; min-height: 0; height: auto; overflow: hidden; }

.intent-shell { min-height: 0; }

.intent-assets, .intent-chat { min-height: 0; }

.intent-assets-list, .intent-messages, .intent-handoff { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }

/* Sidebar width ladder: full column, then a slimmer column, then the icon rail. */
@media (max-width:1280px) {
  :root { --sidebar-width: 224px; }
}
@media (max-width:1024px) {
  :root { --sidebar-width: 76px; --page-inline-padding: var(--ui-space-6); }
}
@media (max-width:480px) {
  :root { --page-inline-padding: var(--ui-space-4); }
  html, body { overflow: hidden; }
  .sidebar { display: none; }
  main { height: calc(100dvh - var(--mobile-nav-height)); }
  main > .view:not(.intent-view) { padding: var(--ui-space-5) var(--page-inline-padding) calc(var(--page-bottom-safe-area) + var(--mobile-nav-height)); }
  main > .intent-view { height: calc(100dvh - var(--topbar-height) - var(--mobile-nav-height)); }
}

/* Ordinary pages size against main, including when the sidebar is expanded.
   Match the legacy view selector's specificity to replace its viewport width. */
main > .view:not(.intent-view):not(.prompt-studio-view) {
  width: 100%;
  min-width: 0;
  container: secondary-page / inline-size;
  overflow-wrap: anywhere;
}


:is(#projects-view) .project-open {
  white-space: normal;
}


:is(#projects-view, #pricing-view, #providers-view) .section-heading {
  flex-wrap: wrap;
}


:is(#projects-view, #pricing-view, #providers-view) .section-heading > div {
  flex: 1 1 240px;
  min-width: 0;
}


#results-view .results-layout {
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
}


#results-view .comparison-title {
  flex-wrap: wrap;
}


#results-view .comparison-title > div {
  flex: 1 1 180px;
  min-width: 0;
}


#results-view .job-events .event {
  min-width: 0;
}


#results-view .job-events .event > span {
  min-width: 0;
}


.admin-asset-thumb {
  width: 58px;
  height: 42px;
  display: block;
  object-fit: contain;
  background: var(--ui-surface-subtle);
  border-radius: 5px;
}


#providers-view .admin-model-list {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}


#providers-view .admin-assistant-heading {
  flex-wrap: wrap;
}


#providers-view .model-admin-card :is(.admin-switch, .admin-reveal) {
  flex-direction: row;
  margin: 0;
}


#providers-view .model-admin-card input[type="checkbox"] {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin: 0;
}


/* These dialogs belong to ordinary pages; their forms/details own scrolling. */
:is(#project-edit-dialog, #password-dialog, #balance-dialog) > form {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}


#usage-detail {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  overflow-wrap: anywhere;
}


@container secondary-page (max-width: 900px) {
  #results-view .results-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  #results-view .experiment-list {
    display: flex;
    flex-direction: column;
    max-height: none;
    overflow: visible;
  }

  #results-view .experiment-list > :is(.section-heading, input, select, .job-pagination) {
    flex: 0 0 auto;
  }

  #all-jobs {
    flex: 0 0 auto;
    min-height: 0;
    overflow: visible;
  }

  #pricing-view .pricing-sections {
    grid-template-columns: minmax(0, 1fr);
  }

  #pricing-view .pricing-hero {
    flex-direction: column;
  }
}


@container secondary-page (max-width: 600px) {
  :is(#projects-view) .project-cards,
  #results-view .compare-grid,
  #pricing-view .pricing-highlights {
    grid-template-columns: minmax(0, 1fr);
  }

  #projects-view .projects-filters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #projects-view .projects-filters input {
    grid-column: 1 / -1;
  }

  #projects-view .projects-filters select {
    width: 100%;
  }

  #results-view .compare-cell :is(video, img),
  #results-view .pending-output {
    height: clamp(200px, 45dvh, 360px);
  }

  #results-view .compare-controls {
    align-items: flex-start;
    flex-direction: column;
  }

  #results-view :is(.experiment-list, .comparison) {
    padding: 16px;
  }

  #pricing-view .pricing-row {
    grid-template-columns: minmax(0, 1fr);
  }

  #pricing-view .pricing-amount {
    text-align: left;
  }

  #pricing-view .pricing-dual {
    justify-items: start;
  }
}


.intent-reply-preview p{white-space:pre-wrap;overflow-wrap:anywhere}

.intent-reply-preview small{color:var(--ui-muted)}

}
/* /primitives/primitives.css */
@layer components {
/* Shared primitive hooks (createButton, createBadge, createEmptyState,
 * createPanelHeading). Geometry and colour come from styles/controls.css;
 * this file only adds what the primitive markup itself needs. */
.ui-button__label { display: inline-flex; align-items: center; }

.ui-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--ui-space-4); }
.ui-panel-heading__copy { min-width: 0; }
.ui-panel-heading__eyebrow { display: block; color: var(--ui-muted); font-size: var(--ui-font-size-xs); }
.ui-panel-heading__description { margin: var(--ui-space-1) 0 0; color: var(--ui-muted); font-size: var(--ui-font-size-sm); }

.ui-panel-heading :is(button, a):focus-visible {
  outline: 2px solid var(--ui-focus);
  outline-offset: 2px;
}

}
/* /styles/ui.css */
@layer components {
/*
 * Components layer — page frame primitives.
 *
 * The page container, page header, collection toolbar, actions menu, tool
 * stepper and sticky action bar. Controls themselves live in controls.css.
 * Token-driven only: no raw colour literals and no id selectors here (the
 * frontend linter fails this directory on both).
 */

/* Loading: the button keeps its label and gains a spinner; clicks are inert. */
button[aria-busy="true"] {
  cursor: progress;
  pointer-events: none;
}

button[aria-busy="true"]::before {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  border: 2px solid currentcolor;
  border-right-color: transparent;
  border-radius: 50%;
  content: '';
  animation: ui-spin 0.7s linear infinite;
}

@keyframes ui-spin {
  to { transform: rotate(360deg); }
}

/* One focus ring for every interactive element. The lint contract pins
   var(--ui-focus). Fields show focus as an accent border plus soft ring
   instead (controls.css). */
summary:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--ui-focus);
  outline-offset: 2px;
}

/* Pin star: a ghost icon button. It stays quiet until its card or row is
   hovered or focused; a pinned star keeps its yellow fill. */
.ui-star {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--ui-radius-pill);
  background: transparent;
  color: var(--ui-ink-faint);
}

.ui-star:hover {
  background: var(--ui-fill-1);
  color: var(--ui-muted);
}

.ui-star[aria-pressed="true"] {
  color: var(--ui-favorite-strong);
}

.ui-star[aria-pressed="true"] svg {
  fill: var(--ui-favorite);
}

.ui-star svg {
  width: 16px;
  height: 16px;
}

@media (hover: hover) {
  :is(.project-card, .shortcut-row) .ui-star[aria-pressed="false"] {
    opacity: 0;
  }

  :is(.project-card, .shortcut-row):is(:hover, :focus-within) .ui-star[aria-pressed="false"],
  .ui-star[aria-pressed="false"]:focus-visible {
    opacity: 1;
  }
}

@media (pointer: coarse) {
  .ui-star {
    width: var(--ui-touch-target);
    height: var(--ui-touch-target);
    min-width: var(--ui-touch-target);
    min-height: var(--ui-touch-target);
  }
}

/* ---------------- Page container ----------------
 * Every ordinary view has one .ui-page wrapper. It is centred at
 * --ui-page-width; collection and data pages opt into the wide measure. */
main > .view:not(.intent-view) {
  --ui-view-padding-bottom: var(--ui-space-9);
  padding: var(--ui-space-7) var(--ui-page-gutter) var(--ui-view-padding-bottom);
  scroll-padding-block: var(--ui-space-6);
}

.ui-page {
  width: 100%;
  max-width: var(--ui-page-width);
  min-width: 0;
  margin-inline: auto;
}

main > .view:not(.intent-view) > .ui-page {
  max-width: var(--ui-page-width);
}

main > .view.ui-view-wide:not(.intent-view) > .ui-page,
main > .view.ui-view-wide:not(.intent-view) > * {
  max-width: var(--ui-page-width-wide);
}

/* Page header: the topbar names the page, so content opens with one lead
   sentence on the left and the page's actions on the right. */
.ui-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--ui-space-4) var(--ui-space-6);
  margin-bottom: var(--ui-space-7);
}

.ui-page-header > :first-child {
  flex: 1 1 320px;
  min-width: 0;
}

.ui-page-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ui-space-3);
}

/* A page section: heading row plus content, separated by rhythm, not lines. */
.ui-section + .ui-section {
  margin-top: var(--ui-space-8);
}

/* Collection toolbar: search, filters and count in one quiet row above the
   collection it controls. No box; the controls carry their own surfaces. */
.ui-collection-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ui-space-3);
  margin-bottom: var(--ui-space-6);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.ui-collection-count {
  flex: 0 0 auto;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
  white-space: nowrap;
}

/* ---------------- Actions menu (…) ---------------- */
.ui-actions {
  position: relative;
  flex: 0 0 auto;
}

.ui-actions > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  min-height: 36px;
  padding: 0;
  border: 0;
  border-radius: var(--ui-radius-pill);
  background: transparent;
  color: var(--ui-muted);
  list-style: none;
  transition: background-color var(--ui-duration-fast) var(--ui-ease-standard), color var(--ui-duration-fast) var(--ui-ease-standard);
}

.ui-actions > summary::-webkit-details-marker {
  display: none;
}

.ui-actions > summary svg {
  width: 18px;
  height: 18px;
}

.ui-actions[open] > summary,
.ui-actions > summary:hover {
  background: var(--ui-fill-1);
  color: var(--ui-ink-strong);
}

.ui-actions-list {
  position: absolute;
  z-index: var(--ui-z-dropdown);
  top: calc(100% + var(--ui-space-1));
  right: 0;
  display: grid;
  min-width: 176px;
  max-width: calc(100vw - 32px);
  padding: 6px;
  animation: ui-pop-in var(--ui-duration-fast) var(--ui-ease-out);
  transform-origin: top right;
}

@keyframes ui-pop-in {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
}

.ui-actions-list :is(button, a) {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--ui-space-2);
  width: 100%;
  min-height: 36px;
  margin: 0;
  padding: 0 var(--ui-space-3);
  border: 0;
  border-radius: var(--ui-radius-sm);
  background: transparent;
  box-shadow: none;
  color: var(--ui-ink);
  font-size: var(--ui-font-size-sm);
  font-weight: var(--ui-font-weight-regular);
  text-align: left;
  text-decoration: none;
}

.ui-actions-list :is(button, a):hover:not(:disabled) {
  background: var(--ui-fill-1);
  color: var(--ui-ink-strong);
}

.ui-actions-list :is(button, a):active:not(:disabled) {
  transform: none;
}

.ui-actions-list :is(button, a)[data-tone="danger"],
.ui-actions-list .danger {
  background: transparent;
  color: var(--ui-danger);
}

@media (pointer: coarse) {
  .ui-actions > summary,
  .ui-actions-list :is(button, a) {
    min-height: var(--ui-touch-target);
    min-width: var(--ui-touch-target);
  }
}

@media (max-width: 1024px) {
  main > .view:not(.intent-view) {
    padding-inline: var(--ui-space-6);
  }
}

@media (max-width: 480px) {
  main > .view:not(.intent-view) {
    --ui-view-padding-bottom: calc(var(--ui-space-8) + var(--mobile-nav-height));
    padding: var(--ui-space-5) var(--ui-space-4) var(--ui-view-padding-bottom);
  }

  .ui-page-header {
    margin-bottom: var(--ui-space-5);
  }

  .ui-collection-count {
    width: 100%;
  }
}

/* ---------------- Tool-page frame primitives ----------------
   Shared by every AI tool page: a lightweight step indicator and a sticky
   glass action bar that keeps the next step and its cost in view. */

.ui-stepper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ui-space-2) var(--ui-space-3);
  margin: 0;
  padding: 0;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-sm);
  list-style: none;
}

.ui-stepper > li {
  display: inline-flex;
  align-items: center;
  gap: var(--ui-space-2);
}

.ui-stepper > li + li::before {
  width: var(--ui-space-6);
  height: 1px;
  background: var(--ui-line-strong);
  content: '';
}

.ui-stepper-index {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ui-fill-2);
  color: var(--ui-muted);
  font-size: var(--ui-font-size-2xs);
  font-weight: var(--ui-font-weight-semibold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.ui-stepper-index svg {
  width: 12px;
  height: 12px;
}

.ui-stepper > li.is-current {
  color: var(--ui-ink-strong);
  font-weight: var(--ui-font-weight-medium);
}

.ui-stepper > li.is-current .ui-stepper-index {
  background: var(--ui-accent);
  color: var(--ui-action-on-primary);
}

.ui-stepper > li.is-done .ui-stepper-index {
  background: var(--ui-accent-soft);
  color: var(--ui-accent-strong);
}

.ui-action-bar {
  position: sticky;
  /* Sticky offsets are measured inside the view's bottom padding, so the bar
     subtracts that padding to sit a fixed distance above the viewport edge. */
  bottom: calc(var(--ui-space-4) - var(--ui-view-padding-bottom, 0px));
  z-index: var(--ui-z-sticky);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--ui-space-3) var(--ui-space-6);
  margin-top: var(--ui-space-6);
  padding: var(--ui-space-3) var(--ui-space-3) var(--ui-space-3) var(--ui-space-6);
  border: 1px solid var(--ui-glass-edge);
  border-radius: var(--ui-radius-pill);
  background: var(--ui-glass-strong);
  -webkit-backdrop-filter: var(--ui-glass-blur);
  backdrop-filter: var(--ui-glass-blur);
  box-shadow: var(--ui-shadow-3);
}

.ui-action-bar-summary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ui-space-2) var(--ui-space-6);
  min-width: 0;
  margin: 0;
}

.ui-action-bar-summary > div {
  display: grid;
  gap: 0;
  min-width: 0;
}

.ui-action-bar-summary dt {
  color: var(--ui-muted);
  font-size: var(--ui-font-size-2xs);
}

.ui-action-bar-summary dd {
  margin: 0;
  color: var(--ui-ink-strong);
  font-size: var(--ui-font-size-sm);
  font-variant-numeric: tabular-nums;
  font-weight: var(--ui-font-weight-semibold);
}

.ui-action-bar-summary dd.is-pending {
  color: var(--ui-muted);
  font-weight: var(--ui-font-weight-regular);
}

.ui-action-bar-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ui-space-2);
  margin-left: auto;
}

.ui-action-bar-hint {
  margin: 0;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
}

@media (max-width: 768px) {
  .ui-action-bar {
    align-items: stretch;
    flex-direction: column;
    padding: var(--ui-space-4);
    border-radius: var(--ui-radius-xl);
  }

  .ui-action-bar-actions {
    margin-left: 0;
  }

  .ui-action-bar-actions > button {
    flex: 1 1 auto;
  }
}

}
/* /styles/controls.css */
@layer components {
/*
 * Components layer — the control library of the EOS AI glass system.
 *
 * Buttons, fields, segmented choices, badges, cards, menus, dialogs, empty
 * states and scrollbars. Every page consumes these; a page stylesheet only
 * composes and sizes them. Controls are 44px tall (36px in dense toolbars on
 * fine pointers), use one focus ring, and carry no decorative shadows.
 * Token-only: no raw colours and no id selectors (the frontend linter
 * enforces both in this directory). DESIGN.md documents the variants.
 */

/* ---------- Buttons ----------
 * Default = secondary: a white pill with a hairline edge. `.primary`/`.accent`
 * is the one filled brand action per task; `.quiet` is borderless; `.danger`
 * names a destructive action in words and colour. */
button,
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ui-space-2);
  min-height: var(--ui-control-height);
  padding: 0 var(--ui-space-5);
  border: 1px solid var(--ui-line-strong);
  border-radius: var(--ui-radius-pill);
  background: var(--ui-surface);
  color: var(--ui-ink);
  box-shadow: none;
  font-size: var(--ui-font-size-sm);
  font-weight: var(--ui-font-weight-medium);
  line-height: var(--ui-line-height-tight);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--ui-duration-fast) var(--ui-ease-standard),
    border-color var(--ui-duration-fast) var(--ui-ease-standard),
    color var(--ui-duration-fast) var(--ui-ease-standard),
    box-shadow var(--ui-duration-fast) var(--ui-ease-standard),
    transform var(--ui-duration-fast) var(--ui-ease-standard),
    opacity var(--ui-duration-fast) var(--ui-ease-standard);
}

button:hover:not(:disabled),
.button:hover:not(:disabled) {
  border-color: var(--ui-line-strong);
  background: var(--ui-surface-subtle);
  color: var(--ui-ink-strong);
  text-decoration: none;
}

button:active:not(:disabled),
.button:active:not(:disabled) {
  transform: scale(0.97);
}

button:disabled,
.button:disabled {
  opacity: 0.42;
  cursor: not-allowed;
  box-shadow: none;
}

button:focus-visible,
.button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--ui-focus);
  outline-offset: 2px;
}

button.primary,
button.accent,
.button.primary,
.button.accent,
.primary {
  border-color: transparent;
  background: var(--ui-action-primary);
  color: var(--ui-action-on-primary);
  box-shadow: none;
}

button.primary:hover:not(:disabled),
button.accent:hover:not(:disabled),
.button.primary:hover:not(:disabled),
.button.accent:hover:not(:disabled),
.primary:hover:not(:disabled) {
  border-color: transparent;
  background: var(--ui-action-primary-hover);
  color: var(--ui-action-on-primary);
}

/* A disabled primary action reads as unavailable, not as a faded purple CTA. */
button.primary:disabled,
button.accent:disabled,
.button.primary:disabled {
  border-color: transparent;
  background: var(--ui-fill-2);
  color: var(--ui-muted);
  opacity: 1;
}

button.dark,
.button.dark {
  border-color: transparent;
  background: var(--ui-ink);
  color: var(--ui-action-on-primary);
}

button.dark:hover:not(:disabled),
.button.dark:hover:not(:disabled) {
  border-color: transparent;
  background: var(--ui-ink-strong);
  color: var(--ui-action-on-primary);
}

button.secondary,
.button.secondary {
  border-color: transparent;
  background: var(--ui-fill-1);
  color: var(--ui-ink);
}

button.secondary:hover:not(:disabled),
.button.secondary:hover:not(:disabled) {
  border-color: transparent;
  background: var(--ui-fill-2);
}

button.quiet,
.button.quiet {
  border-color: transparent;
  background: transparent;
  color: var(--ui-ink-soft);
}

button.quiet:hover:not(:disabled),
.button.quiet:hover:not(:disabled) {
  border-color: transparent;
  background: var(--ui-fill-1);
  color: var(--ui-ink-strong);
}

button.danger,
.button.danger {
  border-color: transparent;
  background: var(--ui-danger-soft);
  color: var(--ui-danger);
}

button.danger:hover:not(:disabled),
.button.danger:hover:not(:disabled) {
  border-color: transparent;
  background: color-mix(in srgb, var(--ui-danger) 14%, var(--ui-surface));
  color: var(--ui-danger);
}

/* Icon-only controls are round, borderless and keep a 40px target
   (44px on touch). Their accessible name comes from aria-label. */
button.icon,
button.icon-button,
.icon {
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  border-color: transparent;
  border-radius: var(--ui-radius-pill);
  background: transparent;
  box-shadow: none;
  color: var(--ui-muted);
}

button.icon:hover:not(:disabled),
button.icon-button:hover:not(:disabled),
.icon:hover:not(:disabled) {
  border-color: transparent;
  background: var(--ui-fill-1);
  color: var(--ui-ink-strong);
}

/* Text actions: brand-coloured words, no chrome. */
.text-button,
button.text-button {
  min-height: 36px;
  padding: 0 var(--ui-space-2);
  border: 0;
  border-radius: var(--ui-radius-sm);
  background: transparent;
  box-shadow: none;
  color: var(--ui-accent);
  font-size: var(--ui-font-size-sm);
  font-weight: var(--ui-font-weight-medium);
}

.text-button:hover:not(:disabled),
button.text-button:hover:not(:disabled) {
  border-color: transparent;
  background: var(--ui-accent-wash);
  color: var(--ui-accent-strong);
}

.text-button svg {
  width: 16px;
  height: 16px;
}

@media (pointer: coarse) {
  button,
  .button,
  .text-button {
    min-height: var(--ui-touch-target);
  }

  button.icon,
  button.icon-button,
  .icon {
    width: var(--ui-touch-target);
    min-width: var(--ui-touch-target);
    height: var(--ui-touch-target);
    min-height: var(--ui-touch-target);
  }
}

/* ---------- Fields ---------- */
input:not([type]),
input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="url"],
input[type="tel"],
input[type="datetime-local"],
input[type="time"],
select,
textarea {
  display: block;
  width: 100%;
  min-width: 0;
  height: var(--ui-control-height);
  min-height: var(--ui-control-height);
  padding: 0 var(--ui-space-4);
  border: 1px solid var(--ui-line-strong);
  border-radius: var(--ui-radius-md);
  outline: none;
  background: var(--ui-surface);
  color: var(--ui-ink);
  box-shadow: none;
  font-size: var(--ui-font-size-md);
  line-height: var(--ui-line-height-tight);
  transition: border-color var(--ui-duration-fast) var(--ui-ease-standard), box-shadow var(--ui-duration-fast) var(--ui-ease-standard), background-color var(--ui-duration-fast) var(--ui-ease-standard);
}

textarea {
  height: auto;
  min-height: 96px;
  padding: var(--ui-space-3) var(--ui-space-4);
  line-height: var(--ui-line-height-normal);
  resize: vertical;
}

/* Native selects get one quiet chevron; the enhanced list is primitives/select. */
select {
  padding-right: 36px;
  -webkit-appearance: none;
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ui-muted) 50%),
    linear-gradient(135deg, var(--ui-muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  text-overflow: ellipsis;
  cursor: pointer;
}

select[multiple] {
  height: auto;
  padding: var(--ui-space-2);
  background-image: none;
}

input::placeholder,
textarea::placeholder {
  color: var(--ui-ink-placeholder);
  opacity: 1;
}

:is(input, select, textarea):hover:not(:disabled):not(:focus) {
  border-color: color-mix(in srgb, var(--ui-ink) 24%, transparent);
}

input:focus,
select:focus,
textarea:focus,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  border-color: var(--ui-focus);
  box-shadow: var(--ui-shadow-focus);
  outline: none;
}

input:disabled,
select:disabled,
textarea:disabled {
  background-color: var(--ui-surface-subtle);
  color: var(--ui-muted);
  cursor: not-allowed;
}

/* Search fields are soft grey capsules that turn white while typing. */
input[type="search"] {
  border-color: transparent;
  border-radius: var(--ui-radius-pill);
  background-color: var(--ui-fill-1);
}

input[type="search"]:hover:not(:disabled):not(:focus) {
  border-color: transparent;
  background-color: var(--ui-fill-2);
}

input[type="search"]:focus {
  border-color: var(--ui-focus);
  background-color: var(--ui-surface);
}

input[type="checkbox"],
input[type="radio"] {
  width: 18px;
  height: 18px;
  margin: 0;
  cursor: pointer;
}

input[type="file"] {
  font-size: var(--ui-font-size-sm);
}

[aria-invalid="true"] {
  border-color: var(--ui-danger);
}

/* ---------- Badges ----------
 * Status pills. Tone is carried by the fill and the text; the label always
 * says the state in words, so colour is never the only signal. */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 22px;
  padding: 1px var(--ui-space-2);
  border: 0;
  border-radius: var(--ui-radius-pill);
  background: var(--ui-fill-1);
  color: var(--ui-ink-soft);
  font-size: var(--ui-font-size-2xs);
  font-weight: var(--ui-font-weight-medium);
  line-height: 1.4;
  letter-spacing: var(--ui-letter-spacing-cjk);
  white-space: nowrap;
}

.badge.success {
  background: var(--ui-success-soft);
  color: var(--ui-success);
}

.badge.running {
  background: var(--ui-accent-soft);
  color: var(--ui-accent-strong);
}

.badge.warning {
  background: var(--ui-warning-soft);
  color: var(--ui-warning);
}

.badge.error,
.badge.danger {
  background: var(--ui-danger-soft);
  color: var(--ui-danger);
}

.badge.demo {
  background: var(--ui-fill-1);
  color: var(--ui-muted);
}

/* ---------- Segmented choices ----------
 * A grey track with a white thumb, for 2–5 mutually exclusive options. */
.segmented {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: var(--ui-radius-pill);
  background: var(--ui-fill-1);
}

.segmented button {
  flex: 1 1 auto;
  min-height: 34px;
  padding: 0 var(--ui-space-4);
  border: 0;
  border-radius: var(--ui-radius-pill);
  background: transparent;
  box-shadow: none;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-sm);
}

.segmented button:hover:not(:disabled) {
  background: transparent;
  color: var(--ui-ink);
}

.segmented button.active,
.segmented button[aria-selected="true"],
.segmented button[aria-pressed="true"] {
  background: var(--ui-surface);
  color: var(--ui-ink-strong);
  box-shadow: var(--ui-shadow-1), 0 0 0 0.5px var(--ui-line);
}

/* ---------- Cards ----------
 * Opaque white content surface on the canvas: no border, one soft shadow.
 * Interactive cards lift on hover. Nested groups use .ui-well instead of a
 * second card. */
.ui-card {
  padding: var(--ui-space-6);
  border-radius: var(--ui-radius-lg);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-card);
}

.ui-card-interactive {
  transition: box-shadow var(--ui-duration-normal) var(--ui-ease-out), transform var(--ui-duration-normal) var(--ui-ease-out);
}

.ui-card-interactive:hover {
  box-shadow: var(--ui-shadow-hover);
  transform: translateY(-2px);
}

.ui-well {
  padding: var(--ui-space-4);
  border-radius: var(--ui-radius-md);
  background: var(--ui-surface-subtle);
}

/* ---------- Data tables ----------
 * One white card with hairline rows (team, admin, ledger, usage). Headers
 * are quiet 13px labels; rows are 52px+ with a faint hover wash. */
.provider-table,
.ui-table {
  width: 100%;
  overflow: hidden;
  border: 0;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--ui-radius-lg);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-card);
  font-size: var(--ui-font-size-sm);
}

:is(.provider-table, .ui-table) th {
  padding: var(--ui-space-3) var(--ui-space-5);
  border-bottom: 1px solid var(--ui-line);
  background: transparent;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
  font-weight: var(--ui-font-weight-medium);
  text-align: left;
  white-space: nowrap;
}

:is(.provider-table, .ui-table) td {
  padding: var(--ui-space-4) var(--ui-space-5);
  border-bottom: 1px solid var(--ui-line);
  color: var(--ui-ink);
  line-height: var(--ui-line-height-snug);
  vertical-align: middle;
}

:is(.provider-table, .ui-table) tbody tr:last-child td {
  border-bottom: 0;
}

:is(.provider-table, .ui-table) tbody tr {
  transition: background-color var(--ui-duration-fast) var(--ui-ease-standard);
}

:is(.provider-table, .ui-table) tbody tr:hover {
  background: color-mix(in srgb, var(--ui-surface-subtle) 70%, transparent);
}

:is(.provider-table, .ui-table) strong {
  display: block;
  font-size: var(--ui-font-size-sm);
  font-weight: var(--ui-font-weight-semibold);
}

:is(.provider-table, .ui-table) small {
  display: block;
  margin-top: 2px;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
}

:is(.provider-table, .ui-table) a {
  font-size: var(--ui-font-size-xs);
}

@media (max-width: 1024px) {
  :is(.provider-table, .ui-table) :is(th, td) {
    padding: var(--ui-space-3);
  }
}

/* ---------- Headings and page copy ---------- */
.page-lead,
.hub-copy {
  max-width: var(--ui-measure);
  margin: 0;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-md);
  line-height: var(--ui-line-height-normal);
}

.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--ui-space-3) var(--ui-space-4);
  margin-bottom: var(--ui-space-4);
}

.section-heading h2,
.section-heading h3 {
  margin: 0;
  color: var(--ui-ink-strong);
  font-size: var(--ui-font-size-lg);
  font-weight: var(--ui-font-weight-semibold);
  line-height: var(--ui-line-height-snug);
}

.meta,
.ui-collection-count {
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
  font-variant-numeric: tabular-nums;
}

/* ---------- Dialogs (frosted sheets) ----------
 * One frame for every dialog: a near-opaque sheet over a blurred scrim, 24px
 * radius, a 21px title row with a round close button, and a right-aligned
 * footer without a rule. The sheet itself must not use backdrop-filter: that
 * would make it the containing block of position:fixed children (the themed
 * select list), which then open misplaced and close at once. */
dialog {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100dvh - 48px);
  padding: var(--ui-space-7);
  border: 1px solid var(--ui-glass-edge);
  border-radius: var(--ui-radius-xl);
  background: var(--ui-surface-overlay);
  color: var(--ui-ink);
  box-shadow: var(--ui-shadow-float);
}

dialog[open] {
  animation: ui-dialog-in var(--ui-duration-normal) var(--ui-ease-out);
}

dialog::backdrop {
  background: var(--ui-scrim);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

dialog[open]::backdrop {
  animation: ui-fade-in var(--ui-duration-normal) var(--ui-ease-out);
}

@keyframes ui-dialog-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
}

@keyframes ui-fade-in {
  from {
    opacity: 0;
  }
}

/* Sectioned dialogs (pickers, previews, the generation confirmation) pad
   their own header, body and footer instead of the frame. */
dialog:is(.cm-dialog, .rp-material-dialog, .scene-picker-dialog, .library-dialog, .preview-dialog, .config-dialog) {
  padding: 0;
}

dialog:is(.library-dialog, .preview-dialog, .config-dialog) .dialog-heading {
  margin: 0;
  padding: var(--ui-space-6) var(--ui-space-7) var(--ui-space-4);
  border-bottom: 0;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

dialog:is(.library-dialog, .preview-dialog, .config-dialog) .dialog-footer {
  margin-top: 0;
  padding: var(--ui-space-4) var(--ui-space-7) var(--ui-space-6);
  background: transparent;
}

.dialog-header,
.dialog-heading {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: var(--ui-space-3);
  margin-bottom: var(--ui-space-5);
}

.dialog-header h2,
.dialog-heading h2,
dialog > form > h2,
dialog > h2 {
  margin: 0;
  color: var(--ui-ink-strong);
  font-size: var(--ui-font-size-xl);
  font-weight: var(--ui-font-weight-semibold);
  line-height: var(--ui-line-height-tight);
}

.dialog-header .icon,
.dialog-heading .icon-button,
.dialog-header .icon-button {
  flex: 0 0 auto;
  margin-right: calc(var(--ui-space-2) * -1);
  background: var(--ui-fill-1);
}

.dialog-footer {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--ui-space-3);
  margin-top: var(--ui-space-6);
  padding-top: 0;
  border-top: 0;
}

.dialog-footer button {
  min-width: 96px;
}

/* ---------- Menus and popovers ---------- */
.ui-actions-list,
.ui-select-list {
  border: 1px solid var(--ui-glass-edge);
  border-radius: var(--ui-radius-md);
  background: var(--ui-glass-strong);
  -webkit-backdrop-filter: var(--ui-glass-blur);
  backdrop-filter: var(--ui-glass-blur);
  box-shadow: var(--ui-shadow-pop);
}

/* ---------- Toast ----------
 * A dark frosted capsule, bottom centre of the workspace (beside the
 * sidebar), above the mobile bar on phones. */
.toast {
  position: fixed;
  bottom: var(--ui-space-6);
  left: calc(50% + var(--sidebar-width, 0px) / 2);
  z-index: var(--ui-z-toast);
  display: flex;
  align-items: center;
  gap: var(--ui-space-3);
  max-width: min(620px, calc(100vw - 32px));
  padding: var(--ui-space-3) var(--ui-space-5);
  border: 0;
  border-radius: var(--ui-radius-pill);
  background: var(--ui-glass-dark);
  -webkit-backdrop-filter: var(--ui-glass-blur-soft);
  backdrop-filter: var(--ui-glass-blur-soft);
  box-shadow: var(--ui-shadow-3);
  color: var(--ui-action-on-primary);
  font-size: var(--ui-font-size-sm);
  line-height: var(--ui-line-height-snug);
  transform: translateX(-50%);
  animation: ui-toast-in var(--ui-duration-normal) var(--ui-ease-out);
}

.toast button {
  min-height: 32px;
  padding: 0 var(--ui-space-3);
  border: 0;
  background: transparent;
  color: var(--ui-accent-soft);
  font-size: var(--ui-font-size-sm);
}

.toast button:hover:not(:disabled) {
  border-color: transparent;
  background: var(--ui-edge-highlight);
  color: var(--ui-action-on-primary);
}

@keyframes ui-toast-in {
  from {
    opacity: 0;
    transform: translate(-50%, 8px);
  }
}

@media (max-width: 1024px) {
  .toast {
    left: 50%;
  }
}

@media (max-width: 480px) {
  .toast {
    bottom: calc(var(--mobile-nav-height, 64px) + var(--ui-space-3));
    width: calc(100% - 32px);
    border-radius: var(--ui-radius-lg);
  }
}

/* ---------- Empty states ---------- */
.ui-empty-state {
  display: grid;
  justify-items: center;
  gap: var(--ui-space-2);
  padding: var(--ui-space-9) var(--ui-space-5);
  color: var(--ui-muted);
  text-align: center;
}

.ui-empty-state > [data-lucide],
.ui-empty-state > svg {
  width: 28px;
  height: 28px;
  margin-bottom: var(--ui-space-2);
  color: var(--ui-accent);
}

.ui-empty-state__title {
  color: var(--ui-ink-strong);
  font-size: var(--ui-font-size-lg);
  font-weight: var(--ui-font-weight-semibold);
}

.ui-empty-state__description {
  max-width: 40ch;
  margin: 0;
  font-size: var(--ui-font-size-sm);
  line-height: var(--ui-line-height-normal);
}

/* ---------- Scrollbars ---------- */
main *,
.sidebar *,
dialog * {
  scrollbar-width: thin;
  scrollbar-color: var(--ui-fill-3) transparent;
}

}
/* /primitives/materials.css */
@layer components {
/* Shared material presentation, used by all authenticated selectors and preview. */
.material-media {
  position: relative;
  min-width: 0;
}
.material-controls {
  position: absolute;
  z-index: 1;
  inset: var(--ui-space-2) var(--ui-space-2) auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--ui-space-2);
  pointer-events: none;
}
.material-controls button {
  pointer-events: auto;
  min-height: var(--ui-touch-target);
  padding: var(--ui-space-1) var(--ui-space-3);
  border: 0;
  border-radius: var(--ui-radius-pill);
  background: var(--ui-glass-strong);
  -webkit-backdrop-filter: var(--ui-glass-blur-soft);
  backdrop-filter: var(--ui-glass-blur-soft);
  box-shadow: var(--ui-shadow-1);
  color: var(--ui-ink);
  font-size: var(--ui-font-size-xs);
  white-space: nowrap;
}
.material-controls .material-toggle {
  justify-self: start;
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: left;
}
.material-controls .material-compare {
  justify-self: end;
  min-width: var(--ui-touch-target);
}
.material-controls .material-corner-toggle,
.material-controls .material-corner-compare {
  box-sizing: border-box;
  border: 0;
  border-radius: 0;
  background: var(--ui-surface-overlay);
  box-shadow: 0 3px 12px rgb(33 30 62 / 14%);
  color: var(--ui-ink);
}
.material-controls .material-corner-toggle {
  position: relative;
  display: grid;
  width: 92px;
  height: 76px;
  min-height: var(--ui-touch-target);
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  align-content: start;
  justify-content: start;
  gap: 2px 5px;
  padding: 10px 18px 18px 10px;
  clip-path: polygon(0 0, 100% 0, 0 100%);
  background: var(--ui-accent-soft);
  color: var(--ui-accent-strong);
  text-align: left;
}
.material-controls .material-corner-toggle::after {
  position: absolute;
  inset: 0;
  border: 1px solid var(--ui-accent);
  content: "";
  pointer-events: none;
}
.material-controls .material-corner-toggle[aria-pressed="false"] {
  background: var(--ui-surface-overlay);
  color: var(--ui-muted);
}
.material-corner-symbol {
  grid-row: span 2;
  font-size: 18px;
  line-height: 1;
}
.material-corner-label,
.material-corner-state {
  overflow: hidden;
  font-size: var(--ui-font-size-xs);
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.material-corner-state {
  font-size: var(--ui-font-size-sm);
  font-weight: var(--ui-font-weight-semibold);
}
.material-controls .material-corner-compare {
  display: flex;
  width: 66px;
  height: 66px;
  min-height: var(--ui-touch-target);
  align-items: flex-end;
  justify-content: flex-end;
  gap: 3px;
  padding: 10px 8px 12px 18px;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  color: var(--ui-ink);
  font-size: var(--ui-font-size-xs);
  font-weight: var(--ui-font-weight-semibold);
}
.material-corner-compare span:first-child { font-size: var(--ui-font-size-md); line-height: 1; }
.material-controls .material-toggle[aria-pressed="true"] {
  color: var(--ui-accent-strong);
  border-color: var(--ui-accent);
  background: var(--ui-accent-soft);
}
.material-description,
.material-status,
.material-preview-note {
  margin: var(--ui-space-2) 0 0;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
  line-height: var(--ui-line-height-relaxed);
  overflow-wrap: anywhere;
}
.material-status { color: var(--ui-ink); }
.material-pending-toggle {
  min-height: var(--ui-touch-target);
  color: var(--ui-accent-strong);
  font-size: var(--ui-font-size-xs);
}
.material-library-preview {
  display: block;
  width: 100%;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: var(--ui-surface-muted);
}

.material-library-preview:hover:not(:disabled) {
  border-color: transparent;
  background: var(--ui-surface-muted);
}

.material-library-preview:active:not(:disabled) {
  transform: none;
}
.material-library-preview img,
.material-library-preview video {
  display: block;
  width: 100%;
  height: 150px;
  object-fit: contain;
}
.material-comparison {
  box-sizing: border-box;
  width: min(980px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  overflow: auto;
  padding: var(--ui-space-5);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-lg);
  background: var(--ui-surface);
  color: var(--ui-ink);
}
.material-comparison > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ui-space-3);
}
.material-comparison h2 { margin: 0; font-size: var(--ui-font-size-lg); }
.material-comparison p,
.material-comparison figcaption { color: var(--ui-muted); font-size: var(--ui-font-size-sm); }
.material-comparison-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ui-space-4);
}
.material-comparison figure { min-width: 0; margin: 0; }
.material-comparison video { width: 100%; max-height: 65dvh; background: var(--ui-surface-subtle); }
.material-comparison::backdrop { background: color-mix(in srgb, var(--ui-ink) 45%, transparent); }
@media (max-width: 768px) {
  .material-comparison-pair { grid-template-columns: minmax(0, 1fr); }
  .material-comparison video { max-height: 32dvh; }
}

}
/* /primitives/select.css */
@layer components {
/*
 * primitives/select.js 的展开弹层皮肤：原生 <select> 保持闭合态外观，
 * 弹层使用 --ui-* 令牌与现有菜单（.ui-actions-list）同一质感。
 * 工作台与 Prompt Studio 共用同一份样式。
 */

.ui-select-list {
  position: fixed;
  z-index: var(--ui-z-dropdown);
  box-sizing: border-box;
  margin: 0;
  padding: var(--ui-space-1);
  list-style: none;
  max-width: calc(100vw - 16px);
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-md);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-3);
  color: var(--ui-ink);
  font-size: var(--ui-font-size-sm);
  scrollbar-width: thin;
}

.ui-select-option {
  display: flex;
  align-items: center;
  gap: var(--ui-space-2);
  min-height: 32px;
  padding: var(--ui-space-1) var(--ui-space-3);
  border-radius: var(--ui-radius-sm);
  cursor: default;
}

.ui-select-option > span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-select-option.is-active {
  background: var(--ui-accent-soft);
  color: var(--ui-accent-strong);
}

.ui-select-option[aria-selected="true"] {
  color: var(--ui-accent-strong);
  font-weight: var(--ui-font-weight-medium);
}

.ui-select-option[aria-selected="true"]::after {
  content: "✓";
  flex: none;
  font-size: var(--ui-font-size-xs);
}

.ui-select-option[aria-disabled="true"] {
  color: var(--ui-muted);
}

.ui-select-group {
  padding: var(--ui-space-2) var(--ui-space-3) var(--ui-space-1);
  color: var(--ui-muted);
  font-size: var(--ui-font-size-2xs);
  font-weight: var(--ui-font-weight-semibold);
  cursor: default;
}

@media (pointer: coarse) {
  .ui-select-option {
    min-height: var(--ui-touch-target);
  }
}

}
/* /primitives/tip.css */
@layer components {
/*
 * Inline help marker: a small ? circle whose tooltip opens on hover or
 * keyboard focus. Pure CSS — the copy lives in data-tip on the marker.
 * Shared by the workbench (AI tools, 创作空间, 批量生成) and the standalone
 * Prompt Studio page, so it is linked by both entrypoints instead of living
 * in one page stylesheet.
 *
 * The marker must stay a non-labelable element (span, not button): inside a
 * field <label> a labelable marker becomes the label's control, and the
 * browser forwards the label's hover to that control, so the tip popped while
 * the pointer was anywhere over the field — including the select below it.
 * min-width/min-height pin the circle to 16px regardless of inherited
 * line-height or font-size.
 */
.ui-tip {
  position: relative;
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  margin-left: var(--ui-space-1, 4px);
  padding: 0;
  border: 1px solid var(--ui-line-strong, var(--ui-surface-muted));
  border-radius: 50%;
  background: var(--ui-surface, var(--ui-surface));
  color: var(--ui-muted, var(--ui-ink-placeholder));
  cursor: help;
  font-size: 12px;
  font-weight: var(--ui-font-weight-semibold, 600);
  line-height: 1;
  vertical-align: 1px;
}

.ui-tip:hover,
.ui-tip:focus-visible {
  border-color: var(--ui-accent, var(--ui-accent));
  background: var(--ui-accent-wash, var(--ui-bg));
  color: var(--ui-accent-strong, var(--ui-accent));
}

.ui-tip:focus-visible {
  outline: 2px solid var(--ui-focus);
  outline-offset: 1px;
}

.ui-tip::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 7px);
  left: 50%;
  z-index: var(--ui-z-tooltip, 1200);
  width: max-content;
  max-width: 240px;
  padding: var(--ui-space-2, 8px) var(--ui-space-3, 12px);
  border-radius: var(--ui-radius-sm, 8px);
  background: color-mix(in srgb, var(--ui-ink, var(--ui-ink)) 92%, transparent);
  color: var(--ui-action-on-primary, var(--ui-surface));
  box-shadow: var(--ui-shadow-3);
  font-size: var(--ui-font-size-xs, 12px);
  font-weight: var(--ui-font-weight-regular, 400);
  line-height: var(--ui-line-height-normal, 1.5);
  text-align: left;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%);
  transition: opacity var(--ui-duration-fast, 150ms) var(--ui-ease-standard, ease), visibility var(--ui-duration-fast, 150ms) var(--ui-ease-standard, ease);
  pointer-events: none;
}

.ui-tip:hover::after,
.ui-tip:focus-visible::after {
  opacity: 1;
  visibility: visible;
}

}
/* /primitives/switch.css */
@layer components {
/*
 * Compact binary switch for a single generation option, shared by the
 * workbench (创作空间 / 批量生成) and the standalone Prompt Studio page.
 *
 * The real checkbox stays the control — form state, keyboard and label
 * activation keep working — and is drawn as the track itself: appearance:none
 * removes the native box and the knob is its ::before. Page styles that size
 * every input (e.g. the dock and quick-generation grids) only need to restore
 * the track's 28×16 box.
 */
.ui-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--ui-space-2, 8px);
  min-height: 32px;
  color: var(--ui-ink, var(--ui-ink));
  cursor: pointer;
  font-size: var(--ui-font-size-sm, 13px);
  line-height: var(--ui-line-height-normal, 1.5);
}

.ui-switch input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: 0 0 auto;
  width: 28px;
  height: 16px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--ui-line-strong, var(--ui-surface-muted));
  cursor: pointer;
  transition: background var(--ui-duration-fast, 150ms) var(--ui-ease-standard, ease);
}

.ui-switch input[type="checkbox"]::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--ui-surface, var(--ui-surface));
  box-shadow: var(--ui-shadow-1, 0 1px 2px rgb(16 24 40 / 4%));
  transition: transform var(--ui-duration-fast, 150ms) var(--ui-ease-standard, ease);
}

.ui-switch input[type="checkbox"]:checked {
  background: var(--ui-accent, var(--ui-accent));
}

.ui-switch input[type="checkbox"]:checked::before {
  transform: translateX(12px);
}

.ui-switch input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--ui-focus);
  outline-offset: 2px;
}

.ui-switch input[type="checkbox"]:disabled {
  cursor: default;
  opacity: .5;
}

.ui-switch:has(input[type="checkbox"]:disabled) {
  color: var(--ui-muted, var(--ui-ink-placeholder));
  cursor: default;
}

@media (prefers-reduced-motion: reduce) {
  .ui-switch input[type="checkbox"],
  .ui-switch input[type="checkbox"]::before {
    transition: none;
  }
}

}
/* /primitives/asset-picker.css */
@layer components {
/* Library picker dialog (primitives/asset-picker.js): a sectioned sheet with a
 * search capsule, an upload action, a media grid and a footer carrying the
 * selection count. Geometry follows the picker width in DESIGN.md. */
dialog.ui-picker-dialog {
  width: min(960px, calc(100vw - 32px));
  padding: 0;
}

.ui-picker {
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 48px);
}

.ui-picker-head,
.ui-picker-bar,
.ui-picker-foot {
  display: flex;
  align-items: center;
  gap: var(--ui-space-3);
  padding: var(--ui-space-5) var(--ui-space-7) 0;
}

.ui-picker-head {
  justify-content: space-between;
  padding-top: var(--ui-space-6);
}

.ui-picker-head h2 {
  margin: 0;
  color: var(--ui-ink-strong);
  font-size: var(--ui-font-size-xl);
  font-weight: var(--ui-font-weight-semibold);
}

.ui-picker-search {
  flex: 1 1 auto;
  min-width: 0;
}

.ui-picker-search input {
  width: 100%;
  border-radius: var(--ui-radius-pill);
  background: var(--ui-fill-1);
}

.ui-picker-bar .secondary {
  flex: 0 0 auto;
  gap: var(--ui-space-2);
}

.ui-picker-status {
  padding: 0 var(--ui-space-7);
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
}

.ui-picker-status p {
  margin: var(--ui-space-2) 0 0;
}

.ui-picker-error {
  color: var(--ui-danger);
}

.ui-picker-body {
  flex: 1 1 auto;
  min-height: 240px;
  padding: var(--ui-space-5) var(--ui-space-7);
  overflow: auto;
}

.ui-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--ui-space-4);
}

.ui-picker-card {
  display: grid;
  align-content: start;
  gap: var(--ui-space-1);
  min-width: 0;
  min-height: 0;
  padding: var(--ui-space-2);
  border: 0;
  border-radius: var(--ui-radius-md);
  background: var(--ui-surface-subtle);
  box-shadow: none;
  color: var(--ui-ink);
  text-align: left;
  white-space: normal;
}

.ui-picker-card:hover:not([aria-disabled="true"]) {
  background: var(--ui-accent-wash);
}

.ui-picker-card.is-selected {
  background: var(--ui-accent-wash);
  box-shadow: 0 0 0 2px var(--ui-accent);
}

.ui-picker-card[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.6;
}

.ui-picker-thumb {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--ui-radius-sm);
  background: var(--ui-surface-muted);
  color: var(--ui-muted);
}

.ui-picker-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ui-picker-check {
  position: absolute;
  top: var(--ui-space-2);
  right: var(--ui-space-2);
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--ui-accent);
  color: var(--ui-action-on-primary);
}

.ui-picker-check svg {
  width: 14px;
  height: 14px;
}

.ui-picker-name {
  overflow: hidden;
  color: var(--ui-ink-strong);
  font-size: var(--ui-font-size-sm);
  font-weight: var(--ui-font-weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-picker-card small,
.ui-picker-empty {
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
}

.ui-picker-empty {
  margin: var(--ui-space-8) 0;
  text-align: center;
}

.ui-picker-foot {
  justify-content: space-between;
  padding-bottom: var(--ui-space-6);
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
}

.ui-picker-foot .primary {
  min-width: 96px;
}

@media (max-width: 480px) {
  .ui-picker-head,
  .ui-picker-bar,
  .ui-picker-foot,
  .ui-picker-status,
  .ui-picker-body {
    padding-right: var(--ui-space-4);
    padding-left: var(--ui-space-4);
  }

  .ui-picker-bar {
    flex-wrap: wrap;
  }

  .ui-picker-bar .secondary {
    width: 100%;
  }

  .ui-picker-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

}
/* /primitives/marked-field.css */
@layer components {
/* Marked text field (primitives/marked-field.js): the textarea is drawn over
 * a mirror that paints the boxes under its text; the wrapper carries the
 * field surface so the transparent textarea shows the boxes. Mark colours are
 * the --ui-mark-* tokens in theme.css. */
.ui-marked-field {
  position: relative;
  display: grid;
  min-width: 0;
  border-radius: var(--ui-radius-md);
  background: var(--ui-surface);
}

.ui-marked-field > textarea {
  position: relative;
  z-index: 1;
  grid-area: 1 / 1;
  width: 100%;
  background: transparent;
}

.ui-marked-mirror {
  position: absolute;
  overflow: hidden;
  box-sizing: border-box;
  margin: 0;
  color: transparent;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  pointer-events: none;
}

.ui-mark {
  border-radius: var(--ui-radius-xs);
  background: var(--ui-mark-product);
  box-shadow: 0 0 0 1px var(--ui-mark-product-edge);
  color: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.ui-mark[data-kind="person"] {
  background: var(--ui-mark-person);
  box-shadow: 0 0 0 1px var(--ui-mark-person-edge);
}

.ui-mark[data-kind="line"] {
  background: var(--ui-mark-line);
  box-shadow: 0 0 0 1px var(--ui-mark-line-edge);
}

}
/* /primitives/project-switcher.css */
@layer components {
/* Project switcher (primitives/project-switcher.js): the header button that
 * names the open project and the sheet of cover cards. The card content uses
 * the 全部项目 rows (.project-open, .project-card-* and the media collage in
 * styles/pages/hub.css); the card surface, the current marker and the create
 * tile are defined here. Sheet geometry follows the picker frame. */
.ui-project-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--ui-space-3);
  min-width: 0;
  max-width: 340px;
  min-height: 48px;
  padding: var(--ui-space-1) var(--ui-space-3) var(--ui-space-1) var(--ui-space-1);
  text-align: left;
  white-space: nowrap;
}

.ui-project-switch-cover {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 38px;
  height: 38px;
  overflow: hidden;
  border-radius: 50%;
  background: var(--ui-surface-muted);
  color: var(--ui-accent);
}

.ui-project-switch-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ui-project-switch-text {
  display: grid;
  min-width: 0;
  line-height: var(--ui-line-height-snug);
}

.ui-project-switch-text strong,
.ui-project-switch-text small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-project-switch-text strong {
  color: var(--ui-ink-strong);
  font-size: var(--ui-font-size-sm);
  font-weight: var(--ui-font-weight-semibold);
}

.ui-project-switch-text small {
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
  font-weight: var(--ui-font-weight-regular);
}

.ui-project-switch-chevron {
  display: grid;
  flex: 0 0 auto;
  color: var(--ui-muted);
}

.ui-project-switch-chevron svg {
  width: 16px;
  height: 16px;
}

dialog.ui-project-sheet {
  width: min(1040px, calc(100vw - 32px));
}

.ui-project-sheet-count {
  margin: var(--ui-space-1) 0 0;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
}

.ui-project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--ui-space-4);
}

.ui-project-card {
  position: relative;
  min-width: 0;
  border-radius: var(--ui-radius-lg);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-card);
  transition: box-shadow var(--ui-duration-normal) var(--ui-ease-out), transform var(--ui-duration-normal) var(--ui-ease-out);
}

.ui-project-card:hover {
  box-shadow: var(--ui-shadow-hover);
  transform: translateY(-2px);
}

.ui-project-card.is-current {
  background: var(--ui-accent-wash);
  box-shadow: 0 0 0 2px var(--ui-accent), var(--ui-shadow-card);
}

.ui-project-current {
  position: absolute;
  top: var(--ui-space-2);
  left: var(--ui-space-2);
  display: inline-flex;
  align-items: center;
  gap: var(--ui-space-1);
  padding: 2px var(--ui-space-2);
  border-radius: var(--ui-radius-pill);
  background: var(--ui-accent);
  color: var(--ui-action-on-primary);
  font-size: var(--ui-font-size-2xs);
  font-weight: var(--ui-font-weight-medium);
}

.ui-project-current svg {
  width: 12px;
  height: 12px;
}

.ui-project-new {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--ui-space-2);
  min-height: 200px;
  padding: var(--ui-space-5);
  border: 1px dashed var(--ui-line-strong);
  border-radius: var(--ui-radius-lg);
  background: var(--ui-surface-subtle);
  box-shadow: none;
  color: var(--ui-ink-strong);
  white-space: normal;
}

.ui-project-new:hover:not(:disabled) {
  border-color: var(--ui-accent-edge);
  background: var(--ui-accent-wash);
}

.ui-project-new > span {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ui-surface);
  color: var(--ui-accent);
}

.ui-project-new strong {
  font-size: var(--ui-font-size-sm);
  font-weight: var(--ui-font-weight-semibold);
}

@media (max-width: 480px) {
  .ui-project-switch {
    flex: 1 1 auto;
    max-width: none;
  }

  .ui-project-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--ui-space-3);
  }

  .ui-project-new {
    min-height: 160px;
  }
}

}
/* /primitives/video-quality.css */
@layer components {
/* Preview quality uses the shared segmented control and spacing tokens. */
.video-quality {
  display: flex;
  justify-content: flex-end;
  margin-block: var(--ui-space-2);
}

.video-quality[hidden] {
  display: none;
}

}
/* /styles/shell.css */
@layer components {
/*
 * Components layer — workbench shell chrome (frosted glass).
 *
 * Sidebar, topbar, account menu and the mobile bar. The sidebar holds four
 * feature areas (视频反推复制, 素材裂变, 智能助手, AI 工具) above the
 * content, account and admin groups. Chrome is glass over the canvas; the
 * selected row is a quiet grey capsule with a brand-coloured icon.
 * Token-only colours, class selectors only: the frontend linter fails this
 * directory on raw colour literals and id selectors.
 */

:root {
  --topbar-height: var(--ui-topbar-height);
}

@media (max-width: 480px) {
  :root {
    --topbar-height: var(--ui-topbar-height-compact);
  }
}

/* ---------------- Sidebar ----------------
 * One frosted column. Feature rows are 44px with a 28px tinted icon tile;
 * ordinary rows are 40px with an 18px icon centred in the same 28px slot, so
 * every label starts on one column. Rows share an 8px inset, a 10px icon gap
 * and a 10px radius; groups are 20px apart. */

.sidebar {
  --sidebar-pad-x: var(--ui-space-3);
  --sidebar-row-height: 40px;
  --sidebar-feature-height: 44px;
  --sidebar-row-inset: 8px;
  --sidebar-icon-slot: 28px;
  --sidebar-icon-size: 18px;
  --sidebar-icon-gap: 10px;

  display: flex;
  flex-direction: column;
  gap: var(--ui-space-3);
  padding: var(--ui-space-5) var(--sidebar-pad-x) var(--ui-space-4);
  background: var(--ui-glass-chrome);
  -webkit-backdrop-filter: var(--ui-glass-blur);
  backdrop-filter: var(--ui-glass-blur);
  border-right: 1px solid var(--ui-sidebar-line);
  box-shadow: none;
  color: var(--ui-ink);
  overflow: hidden;
}

.sidebar .brand .eos-brand-name {
  display: flex;
  align-items: center;
}

.sidebar .brand {
  display: flex;
  align-items: center;
  gap: var(--sidebar-icon-gap);
  min-height: var(--sidebar-row-height);
  margin: 0 0 var(--ui-space-3);
  padding: 0 var(--sidebar-row-inset);
  border-radius: var(--ui-radius-sm);
  color: var(--ui-ink);
}

.sidebar .brand:hover {
  text-decoration: none;
}

/* The nav is the column's single scroll region. It reserves no gutter so
   its rows share the brand and footer inset; a thin scrollbar overlays the
   right edge only on short viewports. */
.sidebar nav {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  gap: var(--ui-space-5);
  align-content: start;
  margin: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: auto;
}

.nav-group {
  display: grid;
  gap: 2px;
}

.nav-group-label {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip-path: none;
  padding: 0 var(--sidebar-row-inset) var(--ui-space-1);
  color: var(--ui-muted);
  font-size: var(--ui-font-size-2xs);
  font-weight: var(--ui-font-weight-semibold);
  line-height: var(--ui-line-height-snug);
  letter-spacing: var(--ui-letter-spacing-cjk);
}

.sidebar .nav {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--sidebar-icon-gap);
  width: 100%;
  min-height: var(--sidebar-row-height);
  padding: 0 var(--sidebar-row-inset);
  border: 0;
  border-radius: var(--ui-radius-sm);
  background: transparent;
  color: var(--ui-ink-soft);
  box-shadow: none;
  font-size: var(--ui-font-size-sm);
  font-weight: var(--ui-font-weight-medium);
  line-height: var(--ui-line-height-snug);
  text-align: left;
  transition: background-color var(--ui-duration-fast) var(--ui-ease-standard), color var(--ui-duration-fast) var(--ui-ease-standard);
}

.sidebar .nav:active:not(:disabled) {
  transform: none;
}

.sidebar .nav-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar .nav svg {
  flex: 0 0 auto;
  width: var(--sidebar-icon-size);
  height: var(--sidebar-icon-size);
  margin: 0 calc((var(--sidebar-icon-slot) - var(--sidebar-icon-size)) / 2);
  color: var(--ui-muted);
}

.sidebar .nav:hover:not(:disabled) {
  border-color: transparent;
  background: var(--ui-fill-1);
  color: var(--ui-ink-strong);
}

.sidebar .nav:focus-visible {
  outline: 2px solid var(--ui-focus);
  outline-offset: -2px;
}

.sidebar .nav.active,
.sidebar .nav.active:hover:not(:disabled) {
  background: var(--ui-fill-2);
  color: var(--ui-ink-strong);
  font-weight: var(--ui-font-weight-semibold);
}

.sidebar .nav.active svg {
  color: var(--ui-accent);
}

/* Feature areas are the primary navigation: a taller row with a tinted
   icon tile (System Settings style); the active tile fills with the brand. */
.sidebar .nav-feature {
  min-height: var(--sidebar-feature-height);
  color: var(--ui-ink);
  font-size: var(--ui-font-size-md);
}

.sidebar .nav-feature svg {
  width: var(--sidebar-icon-slot);
  height: var(--sidebar-icon-slot);
  margin: 0;
  padding: 6px;
  box-sizing: border-box;
  border-radius: 8px;
  background: var(--ui-accent-soft);
  color: var(--ui-accent);
  transition: background-color var(--ui-duration-fast) var(--ui-ease-standard), color var(--ui-duration-fast) var(--ui-ease-standard);
}

.sidebar .nav-feature.active svg {
  background: var(--ui-accent);
  color: var(--ui-action-on-primary);
}

.sidebar .nav .count {
  margin-left: auto;
  min-width: 22px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--ui-radius-pill);
  background: var(--ui-fill-2);
  color: var(--ui-muted);
  font-size: var(--ui-font-size-2xs);
  font-weight: var(--ui-font-weight-medium);
  font-variant-numeric: tabular-nums;
  line-height: 20px;
  text-align: center;
}

/* Sidebar footer: collapse control, product name, sync status. */
.sidebar-bottom {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--ui-space-2);
  margin-top: 0;
  padding: var(--ui-space-3) 0 0;
  border-top: 1px solid var(--ui-sidebar-line);
  color: var(--ui-muted);
  font-size: var(--ui-font-size-2xs);
}

.sidebar-bottom > .nav {
  min-height: 36px;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
  font-weight: var(--ui-font-weight-regular);
}

.workbench-brand-footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ui-space-1);
  padding: 0 var(--sidebar-row-inset);
  color: var(--ui-muted);
  font-size: var(--ui-font-size-2xs);
  line-height: var(--ui-line-height-snug);
}

.workbench-brand-footer .version {
  margin-left: auto;
  font-family: var(--ui-font-family-mono);
  font-size: var(--ui-font-size-2xs);
}

.workbench-connection {
  display: flex;
  align-items: center;
  gap: var(--ui-space-2);
  padding: 0 var(--sidebar-row-inset);
  color: var(--ui-muted);
  font-size: var(--ui-font-size-2xs);
}

.workbench-connection .status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ui-success);
}

.workbench-connection[data-state="offline"] .status-dot {
  background: var(--ui-danger);
}

.workbench-connection:is([data-state="error"], [data-state="slow"]) .status-dot {
  background: var(--ui-warning);
}

.workbench-connection .connection-retry {
  min-height: 28px;
  margin-left: auto;
  padding: 0 var(--ui-space-2);
  border: 0;
  background: transparent;
  color: var(--ui-accent);
  font-size: var(--ui-font-size-2xs);
}

/* The manual collapse narrows the column; the rail rules below hide labels. */
.sidebar.sidebar-collapse {
  width: 76px;
  flex-basis: 76px;
}

/* ---------------- Collapsed rail ----------------
 * The manual collapse and the 481–1024px tablet width share one icon rail:
 * labels, group titles and footer copy hide and the icons centre. */

.sidebar-collapse .nav-label,
.sidebar-collapse .nav-group-label,
.sidebar-collapse .workbench-brand-footer,
.sidebar-collapse .connection-text,
.sidebar-collapse .connection-retry,
.sidebar-collapse .nav .count,
.sidebar-collapse .brand .eos-brand-name {
  display: none;
}

.sidebar-collapse .nav,
.sidebar-collapse .brand {
  justify-content: center;
  padding-inline: 0;
  gap: 0;
}

.sidebar-collapse .nav-feature svg {
  width: 32px;
  height: 32px;
  padding: 7px;
}

.sidebar-collapse .sidebar-bottom > .nav svg {
  transform: rotate(180deg);
}

.sidebar-collapse .workbench-connection {
  justify-content: center;
  padding-inline: 0;
}

@media (max-width: 1024px) {
  .sidebar .nav-label,
  .sidebar .nav-group-label,
  .sidebar .workbench-brand-footer,
  .sidebar .connection-text,
  .sidebar .connection-retry,
  .sidebar .nav .count,
  .sidebar .brand .eos-brand-name {
    display: none;
  }

  .sidebar .nav,
  .sidebar .brand {
    justify-content: center;
    padding-inline: 0;
    gap: 0;
  }

  .sidebar .nav-feature svg {
    width: 32px;
    height: 32px;
    padding: 7px;
  }

  .sidebar .workbench-connection {
    justify-content: center;
    padding-inline: 0;
  }

  .sidebar .sidebar-bottom > .nav {
    display: none;
  }
}

/* Phones use the bottom bar instead of the column. */
@media (max-width: 480px) {
  .sidebar {
    display: none;
  }
}

/* ---------------- Topbar (frosted) ----------------
 * The page title sits at the left edge of the page gutter, status and the
 * account capsule at the right. Scrolling content reads through the glass. */

.topbar {
  display: flex;
  align-items: center;
  height: var(--topbar-height);
  min-height: var(--topbar-height);
  flex: 0 0 var(--topbar-height);
  padding: 0;
  background: var(--ui-glass-chrome);
  -webkit-backdrop-filter: var(--ui-glass-blur);
  backdrop-filter: var(--ui-glass-blur);
  border-bottom: 1px solid var(--ui-line);
  box-shadow: none;
}

.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ui-space-4);
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  padding-inline: var(--ui-page-gutter);
  box-sizing: border-box;
}

.topbar-title {
  display: flex;
  align-items: center;
  min-width: 0;
}

.topbar h1 {
  margin: 0;
  overflow: hidden;
  color: var(--ui-ink-strong);
  font-size: var(--ui-font-size-xl);
  font-weight: var(--ui-font-weight-semibold);
  line-height: var(--ui-line-height-tight);
  letter-spacing: var(--ui-letter-spacing-cjk);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar h1:focus {
  outline: none;
}

.top-actions {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: var(--ui-space-3);
}

/* The creative canvas fills the workspace, so its topbar keeps a tighter gutter. */
.intent-topbar .topbar-inner {
  max-width: none;
  margin-inline: 0;
  padding-inline: var(--ui-space-5);
}

/* The run-mode chip is a neutral pill, not a colour block. */
.top-actions .badge {
  background: var(--ui-fill-1);
  color: var(--ui-muted);
}

@media (max-width: 1024px) {
  .topbar-inner {
    padding-inline: var(--ui-space-6);
  }
}

@media (max-width: 480px) {
  .topbar-inner {
    padding-inline: var(--ui-space-4);
  }

  .topbar h1 {
    font-size: var(--ui-font-size-lg);
  }

  .top-actions .badge {
    display: none;
  }
}

/* ---------------- Account menu ---------------- */

/* One identity entry in the topbar. The capsule stays compact enough for a
   320px title bar; the glass panel carries billing source, balance and
   account actions. */
.account-menu {
  position: relative;
}

.account-menu > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--ui-space-2);
  box-sizing: border-box;
  height: var(--ui-control-height);
  min-height: var(--ui-control-height);
  max-width: 260px;
  padding: 4px 12px 4px 4px;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-pill);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-1);
  color: var(--ui-ink);
  list-style: none;
  transition: border-color var(--ui-duration-fast) var(--ui-ease-standard),
    background-color var(--ui-duration-fast) var(--ui-ease-standard),
    box-shadow var(--ui-duration-fast) var(--ui-ease-standard);
}

.account-menu > summary::-webkit-details-marker {
  display: none;
}

.account-menu > summary:hover,
.account-menu[open] > summary {
  border-color: var(--ui-line-strong);
  box-shadow: var(--ui-shadow-2);
}

.account-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--ui-accent-soft);
  color: var(--ui-accent-strong);
  font-size: var(--ui-font-size-xs);
  font-weight: var(--ui-font-weight-semibold);
  line-height: 1;
}

.account-avatar-lg {
  width: 44px;
  height: 44px;
  font-size: var(--ui-font-size-md);
}

.account-summary {
  display: grid;
  min-width: 0;
  line-height: 1.25;
  text-align: left;
}

.account-name {
  overflow: hidden;
  color: var(--ui-ink-strong);
  font-size: var(--ui-font-size-xs);
  font-weight: var(--ui-font-weight-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-menu-balance {
  display: block;
  margin: 0;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-2xs);
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
  white-space: nowrap;
}

.account-menu-balance.is-empty {
  color: var(--ui-danger);
}

.account-chevron {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  color: var(--ui-muted);
  transition: transform var(--ui-duration-fast) var(--ui-ease-standard);
}

.account-menu[open] .account-chevron {
  transform: rotate(180deg);
}

.account-menu-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: var(--ui-z-dropdown);
  width: 320px;
  max-width: calc(100vw - 24px);
  margin: 0;
  padding: var(--ui-space-2);
  overflow: hidden;
  border: 1px solid var(--ui-glass-edge);
  border-radius: var(--ui-radius-xl);
  background: var(--ui-glass-strong);
  -webkit-backdrop-filter: var(--ui-glass-blur);
  backdrop-filter: var(--ui-glass-blur);
  box-shadow: var(--ui-shadow-float);
  animation: ui-pop-in var(--ui-duration-fast) var(--ui-ease-out);
  transform-origin: top right;
}

.account-identity {
  display: flex;
  align-items: center;
  gap: var(--ui-space-3);
  padding: var(--ui-space-3) var(--ui-space-3) var(--ui-space-4);
}

.account-identity > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.account-identity strong {
  overflow: hidden;
  color: var(--ui-ink-strong);
  font-size: var(--ui-font-size-md);
  font-weight: var(--ui-font-weight-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-identity small {
  color: var(--ui-muted);
  font-size: var(--ui-font-size-2xs);
}

.account-balance-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ui-space-3);
  padding: var(--ui-space-3) var(--ui-space-4);
  border-radius: var(--ui-radius-md);
  background: var(--ui-surface);
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
}

.account-balance-row strong {
  color: var(--ui-ink-strong);
  font-size: var(--ui-font-size-xl);
  font-variant-numeric: tabular-nums;
  font-weight: var(--ui-font-weight-semibold);
  letter-spacing: var(--ui-letter-spacing-latin);
}

.account-balance-row strong.is-empty {
  color: var(--ui-danger);
}

.account-billing {
  margin-top: var(--ui-space-2);
  padding: var(--ui-space-3) var(--ui-space-2) var(--ui-space-2);
}

.account-billing-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ui-space-3);
  padding: 0 var(--ui-space-2);
}

.account-menu-label {
  color: var(--ui-muted);
  font-size: var(--ui-font-size-2xs);
  font-weight: var(--ui-font-weight-medium);
}

.billing-context-value {
  color: var(--ui-ink);
  font-size: var(--ui-font-size-xs);
  font-weight: var(--ui-font-weight-semibold);
}

.billing-context-options {
  display: grid;
  gap: 2px;
  margin-top: var(--ui-space-2);
}

.billing-context-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ui-space-3);
  width: 100%;
  min-height: 40px;
  padding: 0 var(--ui-space-3);
  border: 0;
  border-radius: var(--ui-radius-sm);
  background: none;
  color: var(--ui-ink);
  font-size: var(--ui-font-size-sm);
  font-weight: var(--ui-font-weight-regular);
  text-align: left;
}

.billing-context-option-name {
  display: inline-flex;
  align-items: center;
  gap: var(--ui-space-2);
  min-width: 0;
}

.billing-context-current {
  padding: 1px 6px;
  border-radius: var(--ui-radius-pill);
  background: var(--ui-accent-soft);
  color: var(--ui-accent-strong);
  font-size: var(--ui-font-size-2xs);
  font-weight: var(--ui-font-weight-medium);
}

.billing-context-option > small {
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
  font-variant-numeric: tabular-nums;
}

.billing-context-option:hover:not(:disabled) {
  border-color: transparent;
  background: var(--ui-fill-1);
}

.billing-context-option.is-active,
.billing-context-option.is-active:hover:not(:disabled) {
  background: var(--ui-accent-wash);
}

.billing-context-hint {
  margin: var(--ui-space-1) 0 0;
  padding: 0 var(--ui-space-2);
  color: var(--ui-muted);
  font-size: var(--ui-font-size-2xs);
  line-height: var(--ui-line-height-normal);
}

.account-context-balance {
  display: block;
  margin-top: var(--ui-space-2);
  padding: 0 var(--ui-space-2);
  color: var(--ui-muted);
  font-size: var(--ui-font-size-2xs);
  font-variant-numeric: tabular-nums;
}

.billing-context-manage {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 var(--ui-space-2);
  color: var(--ui-accent);
  font-size: var(--ui-font-size-xs);
}

.account-menu-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  margin-top: var(--ui-space-1);
  padding: var(--ui-space-2) 0 0;
  border-top: 1px solid var(--ui-line);
}

.account-menu-link,
.account-menu-actions .text-button {
  display: flex;
  align-items: center;
  min-height: 40px;
  margin: 0;
  padding: 0 var(--ui-space-3);
  border: 0;
  border-radius: var(--ui-radius-sm);
  background: transparent;
  color: var(--ui-ink);
  font-size: var(--ui-font-size-sm);
  font-weight: var(--ui-font-weight-regular);
  text-align: left;
}

.account-menu-actions .text-button {
  grid-column: 1 / -1;
  color: var(--ui-danger);
}

.account-menu-link:hover,
.account-menu-actions .text-button:hover:not(:disabled) {
  background: var(--ui-fill-1);
  color: var(--ui-ink-strong);
  text-decoration: none;
}

.account-menu-actions .text-button:hover:not(:disabled) {
  color: var(--ui-danger);
}

@media (max-width: 768px) {
  .account-menu > summary {
    max-width: 180px;
  }

  .account-menu-balance {
    display: none;
  }
}

@media (max-width: 480px) {
  .account-menu > summary {
    width: var(--ui-touch-target);
    min-width: var(--ui-touch-target);
    max-width: none;
    height: var(--ui-touch-target);
    min-height: var(--ui-touch-target);
    padding: 0;
    justify-content: center;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
  }

  .account-menu > summary:hover,
  .account-menu[open] > summary {
    background: var(--ui-fill-1);
    box-shadow: none;
  }

  .account-summary,
  .account-chevron {
    display: none;
  }

  .account-menu-panel {
    position: fixed;
    top: calc(var(--topbar-height) + 8px);
    left: 10px;
    right: 10px;
    width: auto;
    max-width: none;
    max-height: calc(100dvh - var(--topbar-height) - var(--mobile-nav-height) - 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: calc(var(--ui-z-dialog) - 100);
  }
}

/* ---------------- Mobile navigation ---------------- */

.mobile-nav {
  display: none;
}

@media (max-width: 480px) {
  .mobile-nav {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 15;
    display: flex;
    justify-content: space-around;
    gap: 4px;
    height: var(--mobile-nav-height);
    margin: 0;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
    overflow: hidden;
    border-top: 1px solid var(--ui-line);
    /* No backdrop-filter: it would make the bar the containing block of the
       fixed 更多 sheet and backdrop below, clipping them inside the bar. */
    background: var(--ui-surface-sidebar-raised);
    box-shadow: none;
  }
}

.mobile-nav > button {
  flex: 1 1 0;
  min-width: 0;
  height: auto;
  min-height: 48px;
  flex-direction: column;
  gap: 2px;
  padding: 4px 2px;
  border: 0;
  border-radius: var(--ui-radius-md);
  background: transparent;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-2xs);
  line-height: var(--ui-line-height-tight);
}

.mobile-nav > button:hover:not(:disabled) {
  border-color: transparent;
  background: var(--ui-fill-1);
}

.mobile-nav > button.active {
  background: transparent;
  color: var(--ui-accent);
}

.mobile-nav > button svg {
  width: 22px;
  height: 22px;
  margin: 0;
}

.mobile-nav-label {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--ui-font-size-2xs);
}

/* "More" sheet: bottom slide-up glass panel owned by the bar. Both elements
   are position:fixed children of the nav, so they share its stacking context. */
.mobile-more-backdrop {
  position: fixed;
  inset: 0;
  bottom: var(--mobile-nav-height);
  z-index: 1;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--ui-scrim);
}

.mobile-more-sheet {
  position: fixed;
  left: 10px;
  right: 10px;
  bottom: calc(var(--mobile-nav-height) + 8px);
  z-index: 2;
  display: grid;
  gap: 2px;
  padding: 8px;
  border: 1px solid var(--ui-glass-edge);
  border-radius: var(--ui-radius-xl);
  background: var(--ui-glass-strong);
  -webkit-backdrop-filter: var(--ui-glass-blur);
  backdrop-filter: var(--ui-glass-blur);
  box-shadow: var(--ui-shadow-float);
  animation: mobile-more-sheet-in var(--ui-duration-normal) var(--ui-ease-out);
}

@keyframes mobile-more-sheet-in {
  from {
    transform: translateY(10px);
    opacity: 0;
  }
}

.mobile-more-sheet button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
  min-height: var(--ui-touch-target);
  padding: 8px 12px;
  border: 0;
  border-radius: var(--ui-radius-sm);
  background: transparent;
  color: var(--ui-ink);
  font-size: var(--ui-font-size-md);
  font-weight: var(--ui-font-weight-regular);
  text-align: left;
}

.mobile-more-sheet button:hover:not(:disabled) {
  border-color: transparent;
  background: var(--ui-fill-1);
}

.mobile-more-sheet button.active {
  background: var(--ui-accent-wash);
  color: var(--ui-ink-strong);
}

.mobile-more-sheet svg {
  width: 18px;
  height: 18px;
  margin: 0;
  color: var(--ui-muted);
}

.mobile-more-sheet button.active svg {
  color: var(--ui-accent);
}

}
/* /styles/pages/common.css */
@layer pages {
/* Page headings, lead copy, empty states, and loading skeletons.
 * The topbar owns the page title; content opens with a lead sentence and
 * sections use 17px headings. Shared colours, spacing and focus come from
 * the theme tokens.
 */

.view .section-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ui-space-3) var(--ui-space-4);
  margin: 0 0 var(--ui-space-4);
}

.view .section-heading h2,
.view .section-heading h3 {
  margin: 0;
  color: var(--ui-ink-strong);
  font-size: var(--ui-font-size-lg);
  font-weight: var(--ui-font-weight-semibold);
  line-height: var(--ui-line-height-snug);
}

.view .section-heading .hub-copy {
  margin: var(--ui-space-1) 0 0;
  font-size: var(--ui-font-size-sm);
}

/* 页头说明：一句中性辅助色的引导语，替代重复的页面标题。 */
.hub-copy,
.page-lead {
  max-width: var(--ui-measure);
  margin: 0;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-md);
  line-height: var(--ui-line-height-normal);
}

/* ---------------- 统一空态 ----------------
   居中、图标、一句标题、一行说明、可选一个主操作；不再使用虚线框。 */

.empty-list,
.project-empty,
.comparison-empty,
.bp-empty,
.uh-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ui-space-2);
  padding: var(--ui-space-9) var(--ui-space-5);
  border: 0;
  border-radius: var(--ui-radius-lg);
  background: transparent;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-sm);
  line-height: var(--ui-line-height-normal);
  text-align: center;
}

.empty-list svg,
.comparison-empty svg {
  width: 28px;
  height: 28px;
  margin-bottom: var(--ui-space-2);
  color: var(--ui-accent);
  stroke-width: 1.5;
}

.project-empty {
  grid-column: 1 / -1;
}

.comparison-empty {
  min-height: 320px;
}

.bp-grid > .bp-empty,
.bp-materials > .bp-empty,
[id="bp-results"] > .bp-empty,
[id="bp-sources"] > .bp-empty,
.asset-library-grid > .bp-empty {
  grid-column: 1 / -1;
}

/* 使用记录空态结构（符号块 + 标题 + 说明） */

.uh-empty {
  min-height: 240px;
}

.uh-empty-symbol {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: var(--ui-space-3);
  border-radius: var(--ui-radius-lg);
  background: var(--ui-accent-soft);
  color: var(--ui-accent);
  font-size: 26px;
}

.uh-empty h4 {
  margin: 0;
  color: var(--ui-ink);
  font-size: var(--ui-font-size-md);
  font-weight: var(--ui-font-weight-semibold);
}

.uh-empty p {
  margin: var(--ui-space-1) 0 0;
  font-size: var(--ui-font-size-sm);
}

/* ---------------- 共享骨架块 ----------------
   数据区加载态：同一条 shimmer 轨道，供各页面骨架卡片复用。 */

.ui-skeleton {
  display: block;
  height: 12px;
  border-radius: var(--ui-radius-sm);
  background: linear-gradient(
    100deg,
    var(--ui-surface-subtle) 30%,
    var(--ui-surface-muted) 50%,
    var(--ui-surface-subtle) 70%
  );
  background-size: 220% 100%;
  animation: ui-skeleton-drift 1.6s ease-in-out infinite;
}

@keyframes ui-skeleton-drift {
  to {
    background-position: -220% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ui-skeleton {
    animation: none;
  }
}

/* 顶栏账号区文本按钮在触控环境下补齐最小宽度 */

@media (pointer: coarse) {
  .top-actions .text-button {
    min-width: var(--ui-touch-target);
    min-height: var(--ui-touch-target);
  }
}

}
/* /styles/pages/auth.css */
@layer pages {
/*
 * Pages layer — 登录 / 注册 / 会话状态屏（SCREEN-001）。
 *
 * 登录门是全屏覆盖层，挡在 inert 的工作台外壳之前。状态由 JS 维护：
 * loading（恢复会话）/ signed-out（登录表单）/ error（会话失败）/ ready（隐藏）。
 * 所有表现只消费 theme token；钩子（id、data-auth-mode、hidden、aria）不变。
 */
/* ---- 门：覆盖层 ---- */
.auth-gate {
  position: fixed;
  inset: 0;
  z-index: var(--ui-z-dialog);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0;
  padding: var(--ui-space-6);
  overflow: auto;
  background: transparent;
}

/* ---- 会话状态块：恢复会话 / 会话失败共用同一容器 ---- */
.session-block {
  display: grid;
  justify-items: center;
  gap: var(--ui-space-3);
  width: min(380px, 100%);
  padding: var(--ui-space-8) var(--ui-space-7);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-lg);
  background: var(--ui-glass-strong);
  color: var(--ui-ink);
  text-align: center;
}

.session-block > img {
  display: block;
  width: 168px;
  height: auto;
  margin-bottom: var(--ui-space-2);
}

.session-progress {
  display: block;
  width: 24px;
  height: 24px;
  border: 2px solid var(--ui-line);
  border-top-color: var(--ui-accent);
  border-radius: 50%;
  animation: session-progress-spin .9s linear infinite;
}

@keyframes session-progress-spin {
  to { transform: rotate(360deg); }
}

.session-block h1 {
  margin: var(--ui-space-2) 0 0;
  font-size: var(--ui-font-size-xl);
  font-weight: var(--ui-font-weight-semibold);
}

.session-block p {
  margin: 0;
  max-width: 32em;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-sm);
  line-height: var(--ui-line-height-normal);
}

.session-block .auth-error {
  width: 100%;
  margin: 0;
}

.session-block button {
  min-width: 128px;
  margin-top: var(--ui-space-2);
}

/* 会话失败：同一块容器换成克制的状态态（边框 + 静态标记，不做孤立小字） */
.auth-gate[data-state="error"] .session-block {
  border-color: color-mix(in srgb, var(--ui-danger) 45%, var(--ui-line));
}

.auth-gate[data-state="error"] .session-progress {
  display: grid;
  place-items: center;
  animation: none;
  border-color: var(--ui-danger);
}

.auth-gate[data-state="error"] .session-progress::after {
  content: "!";
  color: var(--ui-danger);
  font-size: var(--ui-font-size-sm);
  font-weight: var(--ui-font-weight-semibold);
  line-height: 1;
}

/* ---- 已登出：左侧品牌区 + 右侧表单 ---- */
.auth-gate[data-state="signed-out"] {
  grid-template-columns: minmax(320px, 5fr) minmax(0, 7fr);
  place-items: stretch;
  align-content: stretch;
  padding: 0;
}

/* 品牌区：一个 Logo + 大标题 + 一句说明，直接落在带环境光的画布上；
   无装饰图形、无英文眉题、无分栏底色。 */
.studio-auth-story {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--ui-space-5);
  min-height: 0;
  padding: clamp(32px, 7vw, 112px);
  background: transparent;
  border-right: 0;
  color: var(--ui-ink);
}

.studio-auth-story .eos-story-brand {
  display: inline-flex;
  width: auto;
}

.studio-auth-story .eos-story-brand img {
  display: block;
  width: 188px;
  height: auto;
}

.studio-auth-story h2 {
  margin: var(--ui-space-3) 0 0;
  color: var(--ui-ink-strong);
  font-size: var(--ui-font-size-3xl);
  font-weight: var(--ui-font-weight-semibold);
  line-height: var(--ui-line-height-tight);
}

.studio-auth-story p {
  margin: 0;
  max-width: 30em;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-lg);
  line-height: var(--ui-line-height-normal);
}

/* ---- 表单卡 ---- */
/* 表单卡：毛玻璃卡片，浮在环境光上。 */
.auth-card {
  width: min(420px, 100%);
  margin: auto;
  padding: var(--ui-space-8) var(--ui-space-8) var(--ui-space-7);
  border: 1px solid var(--ui-glass-edge);
  border-radius: var(--ui-radius-2xl);
  background: var(--ui-glass-strong);
  -webkit-backdrop-filter: var(--ui-glass-blur);
  backdrop-filter: var(--ui-glass-blur);
  box-shadow: var(--ui-shadow-float);
}

.auth-card h1 {
  margin: 0 0 var(--ui-space-2);
  color: var(--ui-ink-strong);
  font-size: var(--ui-font-size-2xl);
  font-weight: var(--ui-font-weight-semibold);
  /* Was inherited from prompt-studio/style.css's global h1 rule. */
  line-height: 1.3;
}

.auth-card > .auth-copy {
  margin: 0 0 var(--ui-space-5);
  font-size: var(--ui-font-size-sm);
  color: var(--ui-muted);
  line-height: var(--ui-line-height-normal);
}

.auth-card .segmented {
  margin: 0 0 var(--ui-space-4);
}

.auth-card label {
  display: block;
  margin-top: var(--ui-space-4);
  color: var(--ui-ink-soft);
  font-size: var(--ui-font-size-xs);
}

.auth-card input {
  display: block;
  width: 100%;
  margin-top: 6px;
}

/* 验证码行：输入框与发送按钮同一行；hidden 时必须让位于 display:none。 */
.auth-verify {
  display: flex;
  align-items: flex-end;
  gap: var(--ui-space-2);
  margin-top: var(--ui-space-3);
}

.auth-verify[hidden] {
  display: none;
}

.auth-verify label {
  flex: 1;
  margin-top: 0;
}

.auth-verify button {
  min-height: var(--ui-control-height);
  white-space: nowrap;
}

/* 忘记密码/返回登录链接行：右对齐小字，不抢主按钮。 */
.auth-card .auth-links {
  margin: var(--ui-space-2) 0 0;
  text-align: right;
}

.auth-card .auth-links[hidden] {
  display: none;
}

.auth-card .auth-links .text-button {
  font-size: var(--ui-font-size-xs);
}

.auth-card .primary {
  width: 100%;
  min-height: 48px;
  margin-top: var(--ui-space-6);
  font-size: var(--ui-font-size-md);
  background: var(--ui-action-primary);
  border-color: var(--ui-action-primary);
  color: var(--ui-action-on-primary);
}

.auth-card .primary:hover:not(:disabled) {
  background: var(--ui-action-primary-hover);
  border-color: var(--ui-action-primary-hover);
}

.auth-card [id="auth-status"] {
  margin: var(--ui-space-3) 0 0;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
}

.auth-card [id="auth-retry"] {
  width: 100%;
  margin-top: var(--ui-space-3);
}

/* 表单错误：说明文字 + 左侧强调线（不整屏告警） */
.auth-error {
  color: var(--ui-danger);
  font-size: var(--ui-font-size-xs);
  line-height: var(--ui-line-height-normal);
  overflow-wrap: anywhere;
}

.auth-card .auth-error {
  margin: var(--ui-space-3) 0 0;
  padding: var(--ui-space-2) var(--ui-space-3);
  border-left: 0;
  border-radius: var(--ui-radius-md);
  background: var(--ui-danger-soft);
}

/* ---- 响应式 ---- */
@media (pointer: coarse) {
  .auth-card input {
    height: var(--ui-touch-target);
    min-height: var(--ui-touch-target);
  }

  .studio-auth-story .eos-story-brand {
    min-height: var(--ui-touch-target);
    align-items: center;
  }
}

@media (max-width: 768px) {
  .auth-gate {
    padding: var(--ui-space-4);
  }

  .auth-gate[data-state="signed-out"] {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
  }

  /* 品牌区收缩为顶部一行：Logo + 单行标题，表单全宽 */
  .studio-auth-story {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: var(--ui-space-3);
    min-width: 0;
    padding: var(--ui-space-4) var(--ui-space-5);
    border-right: 0;
    border-bottom: 1px solid var(--ui-line);
  }

  .studio-auth-story .eos-story-brand {
    flex: none;
    width: auto;
  }

  .studio-auth-story .eos-story-brand img {
    width: auto;
    height: 22px;
  }

  .studio-auth-story h2 {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-size: var(--ui-font-size-md);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .studio-auth-story p {
    display: none;
  }

  .auth-card {
    width: 100%;
    margin: 0;
    border: 0;
    border-radius: 0;
    padding: var(--ui-space-6) var(--ui-space-5);
    box-shadow: none;
  }
}

@media (max-width: 480px) {
  .auth-gate {
    padding: 0;
  }

  .session-block {
    width: calc(100% - 32px);
    padding: var(--ui-space-6) var(--ui-space-5);
  }
}

}
/* /styles/pages/studio.css */
@layer pages {
/*
 * Pages layer — 创作空间 intent 视图（SCREEN-005）。
 *
 * 方向：48px 细条工具栏、hairline 分隔的左右面板、低装饰图形节点、
 * 画布列尾部的生成状态台区域。结构 / id / data-* / 状态语义全部不变；
 * 本文件只覆盖本屏需要的旧规则（legacy/intent 层仍在下方层叠生效）。
 */
/* ---------- 顶部工具栏：一行 48px，下边细线 ---------- */
.intent-view > .studio-toolbar {
  position: static;
  top: auto;
  left: auto;
  right: auto;
  width: auto;
  flex: none;
  height: 48px;
  min-height: 48px;
  padding: 0 var(--ui-space-4);
  gap: var(--ui-space-3);
  border: 0;
  border-bottom: 1px solid var(--ui-line);
  border-radius: 0;
  background: var(--ui-glass-strong);
  box-shadow: none;
  backdrop-filter: none;
  overflow-x: auto;
  scrollbar-width: none;
}

.intent-view .studio-context {
  flex: none;
  gap: var(--ui-space-2);
  color: var(--ui-ink);
  font-size: var(--ui-font-size-sm);
  font-weight: var(--ui-font-weight-semibold);
  letter-spacing: 0;
}

.intent-view .studio-context svg {
  width: 15px;
  height: 15px;
  color: var(--ui-muted);
}

/* 当前项目胶囊：回到正常流，不再绝对居中 */
.intent-view .studio-project-pill {
  position: static;
  transform: none;
  flex: 0 1 340px;
  width: auto;
  min-width: 0;
  max-width: 340px;
  height: 32px;
  min-height: 32px;
  margin-inline: 0;
  padding: 0 12px;
  gap: var(--ui-space-2);
  border: 1px solid var(--ui-line-strong);
  border-radius: var(--ui-radius-pill);
  background: var(--ui-surface);
  box-shadow: none;
  color: var(--ui-ink);
}

.intent-view .studio-project-pill label {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--ui-space-2);
}

.intent-view .studio-project-pill label span {
  color: var(--ui-muted);
  font-size: var(--ui-font-size-2xs);
  white-space: nowrap;
}

.intent-view .studio-project-pill input {
  min-width: 0;
  width: 100%;
  height: 24px;
  min-height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  font-size: var(--ui-font-size-sm);
  font-weight: var(--ui-font-weight-medium);
  color: var(--ui-ink);
}

.intent-view [id="intent-version"] {
  flex: none;
  padding-left: var(--ui-space-2);
  border-left: 1px solid var(--ui-line);
  color: var(--ui-muted);
  font-size: var(--ui-font-size-2xs);
  white-space: nowrap;
}

.intent-view .studio-project-pill .badge {
  flex: none;
}

.intent-view .studio-project-pill:focus-within {
  border-color: var(--ui-focus);
  box-shadow: var(--ui-shadow-focus);
}

/* 右侧工具按钮：32px 紧凑胶囊，与同行项目胶囊等高 */
.intent-view .studio-tools {
  flex: none;
  margin-left: auto;
  gap: var(--ui-space-1);
}

.intent-view .studio-tools button {
  height: 32px;
  min-height: 32px;
  min-width: 0;
  padding: 0 var(--ui-space-3);
  gap: 6px;
  border: 0;
  border-radius: var(--ui-radius-pill);
  background: transparent;
  color: var(--ui-ink-soft);
  font-size: var(--ui-font-size-xs);
  font-weight: var(--ui-font-weight-medium);
  box-shadow: none;
}

.intent-view .studio-tools button svg {
  width: 15px;
  height: 15px;
}

.intent-view .studio-tools button:hover:not(:disabled) {
  border-color: transparent;
  background: var(--ui-fill-1);
  color: var(--ui-ink-strong);
}

.intent-view .studio-tools button[aria-pressed="true"] {
  background: var(--ui-accent-wash);
  color: var(--ui-accent-strong);
}

@media (pointer: coarse) {
  .intent-view .studio-tools button {
    height: var(--ui-touch-target);
    min-height: var(--ui-touch-target);
  }
}

/* ---------- 工作区骨架：工具栏以下，底部留给状态台细条 ---------- */
.intent-view > .intent-shell {
  top: 48px;
}

.intent-shell .intent-canvas {
  --canvas-footer-height: 36px;
  bottom: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.intent-shell .intent-graph-host {
  flex: 1 1 0%;
  min-height: 0;
  height: auto;
  background-color: var(--ui-bg);
}

/* 左右面板：与画布同高、hairline 分隔、无圆角浮层投影；
   桌面端顶部留出与其他浮层一致的呼吸间隙（≤1024px 抽屉态恢复 top:0） */
.intent-shell .intent-assets {
  top: var(--ui-space-3);
  bottom: 0;
  left: 0;
  width: 240px;
  border: 0;
  border-right: 1px solid var(--ui-line);
  border-radius: 0;
  background: var(--ui-glass-strong);
  box-shadow: none;
}

.intent-shell .intent-chat {
  top: var(--ui-space-3);
  bottom: 0;
  right: 0;
  width: var(--chat-width, 320px);
  border: 0;
  border-left: 1px solid var(--ui-line);
  border-radius: 0;
  background: var(--ui-glass-strong);
  box-shadow: none;
}

/* 拖宽手柄跟随面板缝（--chat-width 由 JS 写入 .intent-shell） */
.intent-shell {
  --chat-width: 320px;
  /* 画布列在两侧浮层面板之下横向铺满：面板占位写进内缩变量，画布自带的
     工具条/底部提示条据此把内容收进可见区（styles/pages/storyboard.css
     .sb-bar、本文件 .studio-canvas-hint）。面板收起时归零；≤1024px 抽屉态
     面板是覆盖层，不占位、同样归零。 */
  --canvas-inset-left: 240px;
  --canvas-inset-right: var(--chat-width);
}

.intent-shell.assets-collapsed {
  --canvas-inset-left: 0px;
}

.intent-shell.chat-collapsed {
  --canvas-inset-right: 0px;
}

.intent-shell .chat-resize-handle {
  top: 50%;
  right: calc(var(--chat-width, 320px) - 5px);
  width: 10px;
  height: 64px;
  min-height: 64px;
  padding: 0;
  transform: translateY(-50%);
}

/* ---------- 面板内部 ---------- */
.intent-shell .intent-panel-heading {
  min-height: 0;
  padding: 12px 16px;
  border-bottom: 1px solid var(--ui-line);
  background: var(--ui-glass-strong);
}

.intent-shell .intent-panel-heading h2 {
  margin: 0;
  font-size: var(--ui-font-size-md);
  font-weight: var(--ui-font-weight-semibold);
  color: var(--ui-ink);
}

.intent-shell .intent-panel-heading h2 .badge {
  font-weight: var(--ui-font-weight-medium);
}

.intent-shell .cm-heading {
  padding: 12px 16px;
}

.intent-shell .cm-actions {
  padding: var(--ui-space-3) var(--ui-space-4);
}

/* The drop hint is a dashed well, not a button capsule: the component
   layer's pill radius and fixed height would clip its two text lines. */
.intent-shell .cm-drop {
  display: grid;
  justify-items: center;
  gap: 2px;
  width: auto;
  height: auto;
  min-height: 0;
  margin: 4px 16px 10px;
  padding: var(--ui-space-3) var(--ui-space-2);
  border: 1px dashed var(--ui-line-strong);
  border-radius: var(--ui-radius-md);
  background: var(--ui-surface-subtle);
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
  white-space: normal;
  text-align: center;
}

.intent-shell .cm-drop:hover:not(:disabled) {
  border-color: var(--ui-accent-edge);
  background: var(--ui-accent-wash);
  color: var(--ui-accent-strong);
}

.intent-shell .cm-drop:active:not(:disabled) {
  transform: none;
}

.intent-shell .cm-drop small {
  color: var(--ui-muted);
  font-size: var(--ui-font-size-2xs);
}

.intent-shell .input-boundary {
  padding: 10px 16px;
}

.intent-shell .intent-messages {
  padding: 12px 16px;
}

.intent-shell .intent-message {
  font-size: var(--ui-font-size-sm);
  line-height: var(--ui-line-height-normal);
}

.intent-shell .intent-message.user {
  background: var(--ui-accent-soft);
}

.intent-shell .intent-message-head {
  color: var(--ui-muted);
  font-size: var(--ui-font-size-2xs);
}

.intent-shell .intent-composer {
  padding: 12px 16px;
  border-top: 1px solid var(--ui-line);
  background: var(--ui-glass-strong);
}

.intent-shell .intent-composer textarea {
  background: var(--ui-surface-subtle);
  border-color: var(--ui-line);
  border-radius: var(--ui-radius-sm);
}

/* 底部操作行：字数统计靠左，「总结」与「发送」收进同一行靠右，窄屏换行 */
.intent-shell .intent-composer > div {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  column-gap: var(--ui-space-2);
  row-gap: var(--ui-space-2);
  margin-top: var(--ui-space-2);
}

.intent-shell [id="intent-char-count"] {
  margin-right: auto;
}

/* 面板空态：图标 + 一句说明 */
.intent-view .intent-empty-assets,
.intent-view .intent-empty-chat {
  color: var(--ui-muted);
}

.intent-view .intent-empty-chat .studio-assistant-mark {
  width: 40px;
  height: 40px;
  border-radius: var(--ui-radius-md);
  background: var(--ui-accent-soft);
  color: var(--ui-accent);
}

.intent-view .intent-empty-chat h3 {
  color: var(--ui-ink);
  font-size: var(--ui-font-size-md);
  font-weight: var(--ui-font-weight-semibold);
}

.intent-view .intent-empty-chat p {
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
  line-height: var(--ui-line-height-normal);
}

.intent-view .intent-empty-chat small {
  color: var(--ui-ink-soft);
  font-size: var(--ui-font-size-2xs);
}

.intent-view .studio-suggestions button {
  justify-content: flex-start;
  min-height: 40px;
  padding: var(--ui-space-2) var(--ui-space-3);
  border: 0;
  border-radius: var(--ui-radius-md);
  background: var(--ui-fill-1);
  color: var(--ui-ink-soft);
  font-size: var(--ui-font-size-xs);
  text-align: left;
  white-space: normal;
}

.intent-view .studio-suggestions button:hover:not(:disabled) {
  border-color: transparent;
  background: var(--ui-accent-wash);
  color: var(--ui-accent-strong);
}

/* ---------- 图形画布与节点 ---------- */
.intent-view .workflow-graph {
  --workflow-graph-canvas: var(--ui-bg);
  border: 0;
  border-radius: 0;
  background: transparent;
}

.intent-view .workflow-graph__node {
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-md);
  background: var(--ui-glass-strong);
  box-shadow: none;
}

.intent-view .workflow-graph__node:hover {
  border-color: var(--ui-focus);
}

.intent-view .workflow-graph__node.is-selected,
.intent-view .workflow-graph__node:focus-visible {
  border-color: var(--ui-accent);
  box-shadow: var(--ui-shadow-focus);
}

.intent-view .workflow-graph__node[data-variant="primary"] {
  border-top: 3px solid var(--ui-accent);
}

/* 类型徽章：中文小徽章（素材 / 要求 / 提示词 / 模型），取代英文眉题 */
.intent-view .workflow-graph__eyebrow {
  padding: calc(3px * var(--z)) calc(6px * var(--z));
  border-radius: calc(4px * var(--z));
  background: var(--ui-surface-muted);
  color: var(--ui-muted);
  font-size: calc(10px * var(--z));
  font-weight: var(--ui-font-weight-medium);
  letter-spacing: 0;
  text-transform: none;
}

.intent-view .workflow-graph__status {
  border-radius: calc(4px * var(--z));
  letter-spacing: 0;
  text-transform: none;
}

.intent-view .workflow-graph__node[data-status-tone="ready"] .workflow-graph__status {
  background: var(--ui-success-soft);
  color: color-mix(in srgb, var(--ui-success) 55%, var(--ui-ink));
}

.intent-view .workflow-graph__node[data-status-tone="warning"] .workflow-graph__status {
  background: var(--ui-warning-soft);
  color: color-mix(in srgb, var(--ui-warning) 70%, var(--ui-ink));
}

.intent-view .workflow-graph__node[data-status-tone="error"] .workflow-graph__status {
  background: var(--ui-danger-soft);
  color: color-mix(in srgb, var(--ui-danger) 80%, var(--ui-ink));
}

.intent-view .workflow-graph__node[data-status-tone="active"] .workflow-graph__status {
  background: var(--ui-accent-soft);
  color: var(--ui-accent-strong);
}

/* 节点序号弱化：小号弱化文字，去掉描边方块 */
.intent-view .workflow-graph__index {
  flex: 0 0 calc(28px * var(--z));
  width: calc(28px * var(--z));
  height: calc(28px * var(--z));
  border: 0;
  border-radius: calc(4px * var(--z));
  background: var(--ui-surface-subtle);
  color: var(--ui-ink-soft);
  font-size: calc(12px * var(--z));
  font-weight: var(--ui-font-weight-medium);
}

/* 画布底部提示行：hairline 上边线，flex 列内固定 36px */
.intent-shell .studio-canvas-hint {
  flex: 0 0 auto;
  height: var(--canvas-footer-height);
  border-top: 1px solid var(--ui-line);
  background: var(--ui-glass-strong);
  color: var(--ui-muted);
  font-size: var(--ui-font-size-2xs);
}

/* 分镜画布的缩放控件只有 sb-bar 一套：宿主带 .sb-host 时底部提示条的缩放
   组退场，状态文字（graph-node-count）与手势说明保留，内容同样内缩到面板
   之间的可见区；旧 workflow-graph 项目（无 .sb-host）不受影响。 */
.intent-shell .intent-graph-host.sb-host ~ .studio-canvas-hint {
  padding-left: calc(var(--canvas-inset-left, 0px) + var(--ui-space-4));
  padding-right: calc(var(--canvas-inset-right, 0px) + var(--ui-space-4));
}

.intent-shell .intent-graph-host.sb-host ~ .studio-canvas-hint .graph-toolbar-controls {
  display: none;
}

.intent-status-dock {
  --dock-height: 560px;
  --dock-band: calc((var(--dock-height) - 96px) / 2);
  --dock-gap: calc(100% - var(--canvas-inset-left, 0px) - var(--canvas-inset-right, 0px));
  position: absolute;
  left: calc((100% + var(--canvas-inset-left, 0px) - var(--canvas-inset-right, 0px)) / 2);
  bottom: calc(var(--canvas-footer-height) + var(--ui-space-2));
  z-index: 30;
  width: min(600px, calc(var(--dock-gap) - 16px));
  translate: -50% 0;
  height: var(--dock-height);
  max-height: calc(100% - var(--canvas-footer-height) - 80px);
  box-sizing: border-box;
  display: grid;
  grid-template-rows: 54px minmax(0, 1fr) 40px;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-xl);
  background: var(--ui-surface-overlay);
  box-shadow: var(--ui-shadow-float);
  overflow: hidden;
  container-type: inline-size;
  transition: box-shadow var(--ui-duration-fast) var(--ui-ease-standard);
}

/* 半展开只露细条 + 上半 band：生成按钮行高归零（该按钮本就 visibility 隐藏）。 */
.intent-status-dock[data-state="partial"] {
  height: calc(54px + var(--dock-band));
  grid-template-rows: 54px minmax(0, 1fr) 0;
}

.intent-status-dock[data-state="full"] {
  height: var(--dock-height);
}

.intent-status-dock[data-state="minimized"] {
  width: 144px;
  height: 54px;
  border-radius: 27px;
  box-shadow: var(--ui-shadow-3);
}

@media (max-width: 480px) {
  .intent-status-dock { width: calc(100% - 16px); }
}

@media (prefers-reduced-motion: reduce) {
  .intent-status-dock,
  .intent-status-dock [id="intent-dock-expand"] {
    transition: none;
  }
}

/* 顶边拖拽把手：只露出 6px 的 ns-resize 热区，展开/半展开可拉高或压低状态台 */
.intent-dock-grip {
  position: absolute;
  top: 0;
  left: 24px;
  right: 24px;
  height: 7px;
  cursor: ns-resize;
  z-index: 2;
  border-radius: 0 0 4px 4px;
  touch-action: none;
}

.intent-status-dock[data-state="minimized"] .intent-dock-grip { display: none; }

/* 细条：标签 + 预估费用；动作绝对定位，expand 停靠右侧、最小化时随胶囊居中 */
.intent-status-dock .intent-dock-bar {
  position: relative;
  width: 100%;
  min-width: 0;
  height: 54px;
  min-height: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--ui-space-3);
  padding: 0 20px;
  padding-right: 160px;
  border-bottom: 1px solid var(--ui-line);
  background: var(--ui-glass-strong);
  font-size: var(--ui-font-size-xs);
}

.intent-status-dock .dock-kicker {
  color: var(--ui-accent-strong);
  font-size: var(--ui-font-size-2xs);
  font-weight: var(--ui-font-weight-semibold);
  white-space: nowrap;
}

.intent-status-dock [id="intent-dock-context"] {
  display: none;
}

.intent-status-dock [id="workspace-quote-summary"] {
  flex: none;
  min-width: 0;
  max-width: 34%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
}

/* 预检状态并入细条：所有展开层级都可见，不再占用独立行 */
.intent-status-dock .intent-dock-bar > [id="dock-generation-feedback"] {
  flex: 0 1 auto;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ui-accent-strong);
}

.intent-status-dock .intent-dock-actions {
  display: flex;
  align-items: center;
  gap: var(--ui-space-2);
  margin-left: auto;
}

.intent-status-dock:not([data-state="minimized"]) .intent-dock-actions button {
  height: 32px;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-sm);
  background: var(--ui-surface);
  color: var(--ui-accent-strong);
  font-size: var(--ui-font-size-2xs);
  font-weight: var(--ui-font-weight-medium);
  white-space: nowrap;
  box-shadow: none;
}

.intent-status-dock:not([data-state="minimized"]) .intent-dock-actions button:hover:not(:disabled) {
  border-color: var(--ui-line-strong);
  background: var(--ui-accent-soft);
}

.intent-status-dock:not([data-state="minimized"]) [id="intent-dock-expand"] {
  position: absolute;
  left: calc(100% - 106px);
  top: 11px;
  width: 96px;
  transform: translateX(-50%);
  transition: left .36s cubic-bezier(.22, .8, .24, 1), background .2s ease;
}

.intent-status-dock:not([data-state="minimized"]) [id="intent-dock-minimize"] {
  position: absolute;
  right: 20px;
  top: 11px;
  width: 32px;
  min-width: 32px;
  padding: 0;
}

/* 半展开只露细条 + 上半 band：lower 与生成按钮占位但不可见 */
.intent-status-dock[data-state="partial"] .intent-dock-lower,
.intent-status-dock:not([data-state="full"]) > [id="intent-dock-generate"] {
  visibility: hidden;
  pointer-events: none;
}

/* 最小胶囊：整颗就是 expand 入口，其余件全部退场 */
.intent-status-dock[data-state="minimized"] .intent-dock-bar {
  height: 54px;
  min-height: 54px;
  padding: 0;
  border: 0;
}

.intent-status-dock[data-state="minimized"] .dock-kicker,
.intent-status-dock[data-state="minimized"] [id="intent-dock-context"],
.intent-status-dock[data-state="minimized"] [id="workspace-quote-summary"],
.intent-status-dock[data-state="minimized"] [id="dock-generation-feedback"],
.intent-status-dock[data-state="minimized"] [id="intent-dock-minimize"] {
  display: none;
}

.intent-status-dock[data-state="minimized"] .intent-dock-actions {
  position: absolute;
  inset: 0;
  margin: 0;
}

.intent-status-dock[data-state="minimized"] [id="intent-dock-expand"] {
  position: static;
  flex: 1;
  width: 100%;
  height: 100%;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 27px;
  background: transparent;
  transform: none;
  white-space: nowrap;
}

.intent-status-dock[data-state="minimized"] > *:not(.intent-dock-bar),
.intent-status-dock[data-state="minimized"] [id="intent-dock-expand"] > * {
  display: none;
}

/* 配置区：两个等分 band，各自内容裁剪 */
.intent-status-dock > .intent-handoff {
  display: grid;
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  max-height: none;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: var(--ui-glass-strong);
}

.intent-status-dock[data-state="partial"] > .intent-handoff {
  grid-template-rows: minmax(0, 1fr) 0;
}

.intent-status-dock .intent-dock-upper,
.intent-status-dock .intent-dock-lower {
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
  padding: 12px var(--ui-space-4);
  overflow: hidden;
}

.intent-status-dock .intent-dock-upper {
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  background: var(--ui-glass-strong);
}

.intent-status-dock .intent-dock-lower {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--ui-line);
  background: var(--ui-surface-subtle);
}

.intent-status-dock [id="intent-prompt-editor"] {
  border-radius: var(--ui-radius-sm);
}

.intent-status-dock > [id="intent-dock-generate"] {
  grid-row: 3;
  width: calc(100% - 32px);
  height: 30px;
  min-height: 30px;
  margin: 5px 16px;
  border-radius: var(--ui-radius-sm);
  font-size: var(--ui-font-size-sm);
  box-shadow: none;
}

/* 容器窄化：收起次要文本，动作保留 */
@container (max-width: 560px) {
  .intent-status-dock [id="workspace-quote-summary"] {
    display: none;
  }
}

/* ---------- 遗留配色收敛：本屏正文/辅助文字统一走中性令牌 ----------
   旧 studio.css/intent.css 里仍有一部分绿色/紫色硬编码值；本屏渲染范围内
   统一覆盖为语义令牌，不改 DOM 与行为。 */
.intent-view .workflow-graph__copy h3 {
  color: var(--ui-ink);
}

.intent-view .workflow-graph__copy p,
.intent-view .workflow-graph__empty {
  color: var(--ui-muted);
}

.intent-view .workflow-graph__icon {
  background: var(--ui-accent-soft);
  color: var(--ui-accent);
}

.intent-view .workflow-graph__empty-mark {
  border-color: var(--ui-line-strong);
  background: var(--ui-surface-subtle);
}

.intent-view .workflow-graph__edge,
.intent-view .workflow-graph__edge-path {
  stroke: var(--ui-line-strong);
}

.intent-shell .intent-canvas,
.intent-shell .intent-graph-host {
  background: var(--ui-bg);
}

.intent-shell .intent-graph-host {
  background-image: radial-gradient(var(--ui-line) 1px, transparent 1px);
}

.intent-shell .graph-toolbar,
.intent-shell .graph-toolbar button,
.intent-shell .graph-state,
.intent-shell .studio-canvas-hint button {
  color: var(--ui-muted);
}

.intent-shell .studio-canvas-hint button:hover:not(:disabled) {
  color: var(--ui-accent-strong);
}

.intent-shell .graph-live-dot {
  background: var(--ui-success);
  box-shadow: 0 0 0 3px var(--ui-success-soft);
}

/* 素材面板 */
.intent-shell .asset-picker {
  background: var(--ui-surface);
}

.intent-shell .asset-kind-label {
  color: var(--ui-muted);
}

/* 素材卡边框/底色已在 legacy 层收敛为中性令牌（保留其 !important 语义） */
.intent-shell .intent-asset-copy strong {
  color: var(--ui-ink);
}

.intent-shell .intent-asset-copy small,
.intent-shell .intent-asset-media span {
  color: var(--ui-muted);
}

.intent-shell .input-boundary {
  background: var(--ui-surface);
  color: var(--ui-muted);
}

.intent-shell .input-boundary svg {
  color: color-mix(in srgb, var(--ui-warning) 72%, var(--ui-ink));
}

/* 对话面板 */
.intent-shell .intent-messages {
  background: var(--ui-glass-strong);
}

.intent-shell .intent-message p {
  color: var(--ui-ink-soft);
}

.intent-shell .intent-message.user {
  border-color: var(--ui-line);
  color: var(--ui-ink);
}

.intent-shell .intent-message.user .intent-message-head {
  color: var(--ui-muted);
}

.intent-shell .intent-message-questions {
  color: color-mix(in srgb, var(--ui-warning) 72%, var(--ui-ink));
}

.intent-shell .intent-thinking {
  color: var(--ui-accent-strong);
}

.intent-shell .intent-thinking::before {
  border-color: var(--ui-accent);
  border-top-color: transparent;
}

.intent-shell .intent-run-notice {
  border-left-color: var(--ui-warning);
  background: var(--ui-warning-soft);
  color: color-mix(in srgb, var(--ui-warning) 72%, var(--ui-ink));
}

.intent-shell .retry-intent-run {
  border-color: var(--ui-line);
  background: var(--ui-glass-strong);
  color: color-mix(in srgb, var(--ui-warning) 72%, var(--ui-ink));
}

.intent-shell [id="compile-intent"] {
  border-color: var(--ui-line);
  background: var(--ui-accent-soft);
  color: var(--ui-accent-strong);
}

.intent-shell .intent-composer {
  background: var(--ui-glass-strong);
}

.intent-shell [id="intent-char-count"] {
  color: var(--ui-muted);
}

/* 状态台展开区（提示词编辑 / 生成参数） */
.intent-status-dock .intent-handoff {
  background: var(--ui-glass-strong);
}

.intent-status-dock .intent-handoff label {
  color: var(--ui-muted);
}

.intent-status-dock .intent-handoff h3 {
  color: var(--ui-ink);
}

.intent-status-dock .intent-handoff pre {
  border-color: var(--ui-line);
  background: var(--ui-glass-strong);
  color: var(--ui-ink-soft);
}

.intent-status-dock .intent-handoff-actions {
  background: var(--ui-surface-overlay);
}

.intent-status-dock [id="intent-prompt-editor"] {
  border-color: var(--ui-line);
  background: var(--ui-surface-subtle);
  color: var(--ui-ink);
}

/* 字数统计悬浮在输入框右上角，不参与工具行排布 */
.intent-status-dock .prompt-editor-wrap {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  min-height: 84px;
}

.intent-status-dock .prompt-editor-wrap [id="intent-prompt-editor"] {
  flex: 1;
}

.intent-status-dock [id="prompt-char-count"] {
  position: absolute;
  top: 3px;
  right: 10px;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-2xs);
  pointer-events: none;
}

.intent-status-dock .prompt-input-summary {
  color: var(--ui-muted);
}

.intent-status-dock [id="prompt-save-state"] {
  color: color-mix(in srgb, var(--ui-success) 62%, var(--ui-ink));
}

.intent-status-dock .marker-toggle {
  color: var(--ui-muted);
}

.intent-status-dock .marker-toggle:hover:not(:disabled) {
  color: var(--ui-ink);
}

.intent-status-dock .marker-toggle[aria-pressed="true"] {
  color: var(--ui-accent-strong);
}

.intent-status-dock .marker-toggle-dot {
  border-color: var(--ui-line-strong);
}

.intent-status-dock .marker-toggle[aria-pressed="true"] .marker-toggle-dot {
  border-color: var(--ui-success);
  background: var(--ui-success);
  box-shadow: 0 0 0 3px var(--ui-success-soft);
}

.intent-status-dock .face-enhance-flag {
  font-style: normal;
  font-size: var(--ui-font-size-2xs);
  padding: 0 var(--ui-space-1);
  border-radius: 999px;
  background: var(--ui-accent-soft);
  color: var(--ui-accent-strong);
}

.intent-status-dock .face-enhance-flag.is-failed {
  background: var(--ui-danger-soft);
  color: var(--ui-danger);
}

.intent-status-dock .face-enhance-toggle[data-state="busy"] .marker-toggle-dot {
  border-color: var(--ui-accent);
  background: var(--ui-accent);
  box-shadow: 0 0 0 3px var(--ui-accent-soft);
}

.intent-status-dock .face-enhance-toggle[data-state="failed"] .marker-toggle-dot {
  border-color: var(--ui-danger);
  background: var(--ui-danger);
  box-shadow: 0 0 0 3px var(--ui-danger-soft);
}

/* 原版音频开关：与输出时长同一行，面板不增高也就无需滚动；通配的输入尺寸
   规则只针对表单控件，轨道开关由 primitives/switch.css 保持 28×16。 */
.intent-status-dock [id="intent-generation-options"] .original-audio-option {
  grid-column: 3;
  grid-row: 3;
  align-self: center;
  min-width: 0;
  min-height: 26px;
  color: var(--ui-ink);
}

.intent-status-dock [id="intent-generation-options"] .original-audio-option > .ui-switch {
  min-height: 26px;
  min-width: 0;
  font-size: var(--ui-font-size-xs);
  white-space: nowrap;
}

.intent-status-dock [id="intent-generation-options"] .original-audio-option > .ui-switch > span {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 面板右缘：气泡改为向左展开，避免被面板的滚动区域裁掉。 */
.intent-status-dock [id="intent-generation-options"] .original-audio-option .ui-tip::after {
  left: auto;
  right: 0;
  transform: none;
}

.intent-status-dock [id="intent-generation-options"] {
  border-color: var(--ui-line);
  background: var(--ui-surface-subtle);
}

.intent-status-dock [id="intent-generation-options"] small {
  color: var(--ui-muted);
}

.intent-status-dock .intent-duration-warning {
  grid-column: 2 / -1;
  grid-row: 4;
  justify-self: end;
  align-self: center;
  min-width: 0;
  max-width: 100%;
  padding: var(--ui-space-1) var(--ui-space-2);
  background: var(--ui-warning-soft);
  color: color-mix(in srgb, var(--ui-warning) 75%, var(--ui-ink));
  white-space: normal;
  font-size: var(--ui-font-size-xs);
}

.intent-status-dock [id="intent-generation-options"]:has(.intent-duration-warning:not([hidden])) [id="save-generation-options"] {
  grid-column: 1;
}

.intent-status-dock [id="intent-generation-options"]:has(.intent-duration-warning:not([hidden])) [id="intent-provider-note"] {
  display: none;
}

@container (max-width: 400px) {
  .intent-status-dock [id="intent-generation-options"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
  }

  .intent-status-dock [id="intent-generation-options"] .dock-spec-pair {
    display: contents;
  }

  .intent-status-dock [id="intent-generation-options"] label:has([id="creative-maxEdge"]) {
    grid-column: auto;
    grid-row: auto;
  }

  .intent-status-dock [id="intent-generation-options"] .dock-timeline,
  .intent-status-dock [id="intent-generation-options"] label:has([id="creative-outputDuration"]),
  .intent-status-dock [id="intent-generation-options"] .original-audio-option,
  .intent-status-dock [id="intent-provider-note"] {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .intent-status-dock [id="intent-generation-options"]:has(.intent-duration-warning:not([hidden])) {
    grid-template-rows: 46px 52px 52px 44px auto;
  }

  .intent-status-dock [id="intent-generation-options"]:has(.intent-duration-warning:not([hidden])) [id="save-generation-options"] {
    grid-column: 1 / -1;
  }

  .intent-status-dock .intent-duration-warning {
    grid-column: 1 / -1;
    grid-row: 5;
  }

  .intent-status-dock .intent-dock-lower:has(.intent-duration-warning:not([hidden])) {
    overflow-y: auto;
  }
}

/* 节点详情抽屉（浮层，保留投影）。画布列尾部的状态台细条占 54px：抽屉底缘
   收在其上方，不再插进细条背后（展开时依旧允许抽屉尾部被状态台盖住）。 */
.intent-view .intent-node-detail {
  bottom: calc(54px + 12px);
  border-color: var(--ui-line);
  background: var(--ui-glass-strong);
}

.intent-view .intent-node-detail p,
.intent-view .intent-node-detail pre {
  color: var(--ui-muted);
}

.intent-view .intent-node-detail > button {
  border-color: var(--ui-line);
  background: var(--ui-accent-soft);
  color: var(--ui-accent-strong);
}

.intent-view .scene-asset-card {
  border-color: var(--ui-line);
  background: var(--ui-glass-strong);
}

.intent-view .scene-asset-card img {
  background: var(--ui-surface-subtle);
}

.intent-view .scene-asset-card[aria-pressed="true"] {
  border-color: var(--ui-accent);
  background: var(--ui-accent-soft);
}

.intent-view [id="open-scene-example"] {
  border-color: var(--ui-line-strong);
  background: var(--ui-accent-soft);
  color: var(--ui-accent-strong);
}

/* 模板库 / 模板管理对话框（创作空间内触发） */
.intent-view .scene-templates,
.scene-templates {
  background: var(--ui-surface-subtle);
  border-bottom-color: var(--ui-line);
}

.intent-view .scene-templates button,
.scene-templates button {
  border-color: var(--ui-line);
  background: var(--ui-surface);
  color: var(--ui-ink-soft);
}

.intent-view .scene-templates label,
.scene-templates label {
  color: var(--ui-muted);
}

[id="template-manager"] {
  border-color: var(--ui-line);
}

[id="template-manager"] .template-list article {
  border-bottom-color: var(--ui-line);
}

[id="template-manager"] .template-list small {
  color: var(--ui-muted);
}

/* ---------- 响应式 ---------- */
@media (max-width: 1024px) {
  .intent-view .studio-context span {
    white-space: nowrap;
  }

  /* 抽屉态面板重新贴顶：覆盖桌面端的呼吸间隙；覆盖层不占位，画布内缩归零 */
  .intent-shell {
    --canvas-inset-left: 0px;
    --canvas-inset-right: 0px;
  }

  .intent-shell .intent-assets,
  .intent-shell .intent-chat {
    top: 0;
  }
}

@media (max-width: 768px) {
  .intent-view > .studio-toolbar {
    padding: 0 12px;
    gap: var(--ui-space-2);
  }

  .intent-view .studio-project-pill {
    flex: 1 1 auto;
    max-width: none;
  }

  /* 面板在窄屏为抽屉：盖在状态台细条之上 */
  .intent-shell .intent-assets,
  .intent-shell .intent-chat {
    top: 0;
    bottom: 0;
    width: min(320px, 86%);
    z-index: 32;
    box-shadow: var(--ui-shadow-float);
  }

  /* 触发器固定在工具栏下方：居中会被全宽浮起状态台遮住 */
  .intent-shell .panel-trigger {
    top: 12px;
    transform: translate(0, 0);
  }

  .intent-shell:not(.assets-collapsed) > .panel-trigger-left {
    transform: translate(240px, 0);
  }

  .intent-shell:not(.chat-collapsed) > .panel-trigger-right {
    transform: translate(-320px, 0);
  }
}

@media (max-width: 480px) {
  .intent-shell .intent-canvas {
    --canvas-footer-height: 44px;
  }

  .intent-shell .studio-canvas-hint {
    display: flex;
    justify-content: flex-end;
  }

  .intent-shell .studio-canvas-hint .graph-toolbar-controls > div {
    display: flex;
  }

  .intent-shell .studio-canvas-hint .graph-toolbar-controls button {
    width: 44px;
    height: 44px;
  }

  .intent-shell .studio-canvas-hint .canvas-help,
  .intent-shell .studio-canvas-hint .graph-toolbar-stats {
    display: none;
  }

  .intent-view > .studio-toolbar {
    height: 48px;
    min-height: 48px;
    padding: 0 10px;
  }

  .intent-view .studio-context {
    font-size: var(--ui-font-size-xs);
  }

  .intent-view .studio-project-pill {
    height: 30px;
    min-height: 30px;
    padding: 0 10px;
  }

  .intent-status-dock .intent-dock-bar {
    padding: 0 10px;
  }

  .intent-status-dock .intent-dock-upper,
  .intent-status-dock .intent-dock-lower {
    padding: 10px 12px;
  }
}

@media (pointer: coarse) {
  .intent-view .studio-project-pill {
    height: var(--ui-touch-target);
    min-height: var(--ui-touch-target);
  }

  .intent-view .studio-project-pill input {
    height: var(--ui-touch-target);
    min-height: var(--ui-touch-target);
  }

  .intent-view .studio-tools button {
    min-height: var(--ui-touch-target);
    min-width: var(--ui-touch-target);
  }

  .intent-shell .panel-trigger {
    width: var(--ui-touch-target);
  }

  .intent-status-dock:not([data-state="minimized"]) .intent-dock-actions button {
    height: var(--ui-touch-target);
    min-height: var(--ui-touch-target);
  }

  .intent-status-dock:not([data-state="minimized"]) [id="intent-dock-minimize"] {
    width: var(--ui-touch-target);
    min-width: var(--ui-touch-target);
  }
}

.cm-asset:has(.material-controls) {
  grid-template-columns: minmax(0, 1fr);
}

.cm-asset .material-media {
  width: 100%;
}

.cm-asset:has(.material-corner-toggle) .material-media {
  padding: 6px;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-md);
  background: var(--ui-surface-raised);
  box-shadow: var(--ui-shadow-card);
}

.cm-asset:has(.material-controls) .cm-thumbnail {
  width: 100%;
  height: 160px;
  border-radius: var(--ui-radius-sm);
}

.node-asset-preview .material-controls {
  position: static;
  width: 100%;
}

}
/* /styles/pages/storyboard.css */
@layer pages {
/*
 * Pages layer — 创作画布（storyboard canvas · 多任务生成工作台）。
 *
 * 结构：.sb-host（画布宿主，纵向布局）→ .sb-bar（固定工具区，不悬浮遮挡卡片）
 * → .sb-viewport（可视区：浅灰蓝底板）→ .sb-grid（跟随世界变换的方格线层）
 * + .sb-world（平移/缩放的世界层：SVG 连线层 + 卡片层）。卡片为绝对定位的
 * 自包含文章；连接是“素材出口 → 任务输入区”的显式引用，与视觉位置无关。
 * 所有颜色/间距使用 ui tokens。
 */
.sb-host {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

/* ---------------- 工具区 ---------------- */
.sb-bar {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px var(--ui-space-3);
  padding: var(--ui-space-2) var(--ui-space-3);
  /* 画布列横向铺满、两侧面板浮在上方：工具区内容按面板占位内缩到可见区，
     否则左右两端的按钮组会被面板遮住。宿主未写变量时为 0，不影响默认间距。 */
  padding-left: calc(var(--canvas-inset-left, 0px) + var(--ui-space-3));
  padding-right: calc(var(--canvas-inset-right, 0px) + var(--ui-space-3));
  border-bottom: 1px solid var(--ui-line);
  background: var(--ui-glass-chrome);
  -webkit-backdrop-filter: var(--ui-glass-blur);
  backdrop-filter: var(--ui-glass-blur);
}

.sb-bar-group {
  display: inline-flex;
  flex-wrap: wrap;
  min-width: 0;
  max-width: 100%;
  align-items: center;
  gap: var(--ui-space-1);
}

/* Row one: edit actions on the left, the two submit actions on the right.
   Row two: the status caption (pan/zoom help or the active connection mode)
   and the zoom cluster. Secondary labels collapse to icons when the visible
   canvas column is narrow, so the bar stays two rows. */
.sb-bar {
  container: sb-bar / inline-size;
}

.sb-bar-group.sb-bar-submit {
  margin-left: auto;
}

/* A zero-height flex item forces the caption and zoom cluster onto row two. */
.sb-bar::after {
  flex-basis: 100%;
  order: 2;
  height: 0;
  content: '';
}

.sb-bar-group.sb-bar-status {
  flex: 1 1 200px;
  order: 3;
  justify-content: flex-start;
  min-width: 0;
  padding-left: var(--ui-space-1);
}

.sb-bar-group.sb-bar-zoom {
  order: 4;
  margin-left: auto;
}

.sb-bar-group [data-sb-redo] {
  margin-right: var(--ui-space-2);
}

@container sb-bar (max-width: 820px) {
  .sb-bar .sb-collapsible {
    width: 32px;
    padding: 0;
    justify-content: center;
  }

  .sb-bar .sb-collapsible .sb-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
}

.sb-bar [data-sb-hint] {
  overflow: hidden;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-2xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sb-bar button {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 var(--ui-space-3);
  border: 0;
  border-radius: var(--ui-radius-pill);
  background: var(--ui-fill-1);
  color: var(--ui-ink);
  font-size: var(--ui-font-size-xs);
  font-weight: var(--ui-font-weight-medium);
}

.sb-bar button svg {
  width: 15px;
  height: 15px;
}

.sb-bar button[aria-label]:not(:has(span)):is([data-sb-undo], [data-sb-redo], [data-sb-zoom-in], [data-sb-zoom-out]) {
  width: 32px;
  padding: 0;
}

.sb-bar button:disabled {
  opacity: 0.4;
}

.sb-bar button:not(:disabled):hover {
  border-color: transparent;
  background: var(--ui-fill-2);
  color: var(--ui-ink-strong);
}

.sb-bar .sb-primary {
  background: var(--ui-accent);
  color: var(--ui-action-on-primary);
}

.sb-bar .sb-primary:not(:disabled):hover {
  background: var(--ui-accent-strong);
  color: var(--ui-action-on-primary);
}

@media (pointer: coarse) {
  .sb-bar button {
    min-height: var(--ui-touch-target);
  }
}

.sb-zoom {
  min-width: 42px;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-2xs);
  text-align: center;
}

@media (max-width: 1024px) {
  .sb-bar {
    padding-inline: 48px;
  }

  .sb-bar-group {
    flex-wrap: nowrap;
    overflow-x: auto;
    max-width: 100%;
  }

  .sb-bar-group.sb-bar-status {
    min-width: 0;
  }
}

/* ---------------- 底板 ---------------- */
.sb-viewport {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  background: color-mix(in srgb, var(--ui-accent) 6%, var(--ui-bg));
  /* 空白处左键拖动即平移：默认 grab；卡片/端口/按钮等自带 cursor 的元素不受影响。 */
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

.sb-viewport :is(input, textarea, [contenteditable="true"]) {
  user-select: text;
  -webkit-user-select: text;
}

.sb-viewport.is-pan-ready {
  cursor: grab;
}

.sb-viewport.is-panning {
  cursor: grabbing;
}

.sb-grid {
  position: absolute;
  top: -6000px;
  left: -6000px;
  width: 18000px;
  height: 14000px;
  transform-origin: 0 0;
  /* 方格线底板：次线每格一条，主线每 5 格一条。该层随世界缩放，线宽
     --sb-grid-w 按 1/k 补偿、间距 --sb-grid-step 过密时按档翻倍（均由
     applyTransform 写入），25%–200% 缩放范围内线宽视觉稳定 ≈1px。
     background-position 把格线锚到世界原点，与卡片坐标系一致。 */
  --sb-grid-w: 1px;
  --sb-grid-step: 28px;
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--ui-line-strong) 78%, var(--ui-ink-faint)) var(--sb-grid-w), transparent var(--sb-grid-w)),
    linear-gradient(to bottom, color-mix(in srgb, var(--ui-line-strong) 78%, var(--ui-ink-faint)) var(--sb-grid-w), transparent var(--sb-grid-w)),
    linear-gradient(to right, var(--ui-line-strong) var(--sb-grid-w), transparent var(--sb-grid-w)),
    linear-gradient(to bottom, var(--ui-line-strong) var(--sb-grid-w), transparent var(--sb-grid-w));
  background-size:
    calc(var(--sb-grid-step) * 5) calc(var(--sb-grid-step) * 5),
    calc(var(--sb-grid-step) * 5) calc(var(--sb-grid-step) * 5),
    var(--sb-grid-step) var(--sb-grid-step),
    var(--sb-grid-step) var(--sb-grid-step);
  background-position: 6000px 6000px;
  pointer-events: none;
}

.sb-world {
  position: absolute;
  top: 0;
  left: 0;
  width: 6000px;
  height: 4000px;
  transform-origin: 0 0;
}

.sb-edges {
  position: absolute;
  top: 0;
  left: 0;
  /* legacy 全局图标规则 svg{17px} 会压过宽高属性把连线层裁没，必须显式给世界尺寸。 */
  width: 6000px;
  height: 4000px;
  /* 卡片可拖出名义边界，连线跟着锚点走，不能裁在 6000×4000 视口里。 */
  overflow: visible;
  /* 连线是画布关系的视觉层，不能截断空白处的平移/框选手势。 */
  pointer-events: none;
}

.sb-edge {
  fill: none;
  stroke-width: 2.5;
}

.sb-edge-g.is-bind .sb-edge {
  stroke: var(--ui-accent);
  opacity: 0.8;
}

/* 沿线用途小标签：白晕压住网格线，不接收指针 */
.sb-edge-label {
  fill: var(--ui-muted);
  font-size: var(--ui-font-size-2xs);
  paint-order: stroke;
  pointer-events: none;
  stroke: var(--ui-bg);
  stroke-width: 3px;
  text-anchor: middle;
}

/* 必填空槽位的「待连接」虚线引导：只画到槽位，不是已建立的连接 */
.sb-edge-g.is-pending {
  pointer-events: none;
}

.sb-edge-g.is-pending .sb-edge {
  stroke: var(--ui-ink-faint);
  stroke-dasharray: 4 5;
  stroke-width: 1.5;
}

.sb-edge-g.is-pending .sb-edge-label {
  fill: var(--ui-ink-faint);
}

.sb-edge.is-temp {
  stroke: var(--ui-accent);
  stroke-dasharray: 6 5;
  opacity: 0.9;
  pointer-events: none;
}

.sb-cards-inner {
  position: relative;
}

.sb-marquee {
  position: absolute;
  z-index: 8;
  border: 1px solid var(--ui-accent);
  background: color-mix(in srgb, var(--ui-accent) 10%, transparent);
  pointer-events: none;
}

/* ---------------- 卡片通用 ---------------- */
.sb-card {
  position: absolute;
  width: 220px;
  padding: var(--ui-space-2);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-lg);
  background: var(--ui-surface);
  color: var(--ui-ink);
  box-shadow: var(--ui-shadow-card);
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.sb-card.is-dragging {
  cursor: grabbing;
  box-shadow: var(--ui-shadow-3);
  z-index: 5;
}

.sb-card.is-selected {
  border-color: var(--ui-accent);
  outline: 2px solid var(--ui-accent);
  outline-offset: 1px;
}

.sb-card.is-linkable {
  cursor: copy;
  border-style: dashed;
  border-color: var(--ui-accent);
}

.sb-card.is-locate {
  animation: sb-locate 0.8s var(--ui-ease-standard) 2;
}

@keyframes sb-locate {
  0%, 100% { box-shadow: var(--ui-shadow-1); }
  50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--ui-accent) 35%, transparent); }
}

.sb-check {
  position: absolute;
  top: 8px;
  right: 8px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: var(--ui-glass-strong);
  -webkit-backdrop-filter: var(--ui-glass-blur-soft);
  backdrop-filter: var(--ui-glass-blur-soft);
  box-shadow: var(--ui-shadow-1);
}

/* 全局 input{height:38px;margin-top:8px} 会把复选框撑出 24px 角标框，
   形成“两个重叠的框”；沿用 scene-picker 的本地化还原写法。 */
.sb-check input[type='checkbox'] {
  width: 16px;
  height: 16px;
  min-height: 0;
  flex: none;
  margin: 0;
  padding: 0;
  border: 0;
  accent-color: var(--ui-accent);
}

.sb-check.is-inline {
  position: static;
  flex: none;
}

/* ---------------- 素材卡 ---------------- */
.sb-material {
  width: 224px;
  transition: transform var(--ui-duration-fast) var(--ui-ease-standard), box-shadow var(--ui-duration-fast) var(--ui-ease-standard);
}

.sb-thumb {
  position: relative;
  display: grid;
  place-items: center;
  height: 120px;
  overflow: hidden;
  border-radius: var(--ui-radius-md);
  background: var(--ui-surface-subtle);
  color: var(--ui-muted);
}

.sb-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sb-thumb .sb-kind {
  position: absolute;
  right: 6px;
  bottom: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--ui-glass-dark);
  -webkit-backdrop-filter: var(--ui-glass-blur-soft);
  backdrop-filter: var(--ui-glass-blur-soft);
  color: var(--ui-action-on-primary);
  font-size: var(--ui-font-size-2xs);
}

.sb-copy {
  margin-top: var(--ui-space-2);
  padding-right: 26px;
  min-width: 0;
}

.sb-copy strong,
.sb-shot-head strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--ui-font-size-sm);
}

.sb-copy small {
  display: block;
  overflow: hidden;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-2xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 连接出口：素材卡右缘的明确圆点，按下拖出连线，单击进入连线模式。
   视觉 24px 常显，::before 把可点区域扩到约 44px。 */
.sb-port {
  position: absolute;
  top: 44px;
  right: -12px;
  width: 24px;
  height: 24px;
  /* 全局 button{min-height:44px} 会把 24px 圆点拉成竖条 */
  min-height: 0;
  padding: 0;
  border: 2px solid var(--ui-accent);
  border-radius: 999px;
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-1);
  cursor: crosshair;
}

.sb-port::before {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 999px;
}

.sb-port::after {
  content: '';
  position: absolute;
  inset: 5px;
  border-radius: 999px;
  background: var(--ui-accent);
}

.sb-port:hover,
.sb-material.is-linking .sb-port,
.sb-viewport.is-connecting .sb-port {
  transform: scale(1.2);
  border-color: var(--ui-accent-strong);
  box-shadow: var(--ui-shadow-2);
}

/* 端口连线模式里素材来源卡：与任务卡 is-linking 同一套虚线强调 */
.sb-material.is-linking {
  border-color: var(--ui-accent);
  outline: 2px dashed var(--ui-accent);
}

/* 超长视频提示与三个选项 */
.sb-hint {
  display: flex;
  align-items: center;
  gap: var(--ui-space-1);
  margin-top: var(--ui-space-2);
  padding: 6px 8px;
  border-radius: var(--ui-radius-sm);
  background: var(--ui-warning-soft);
  color: var(--ui-ink);
  font-size: var(--ui-font-size-2xs);
}

.sb-hint-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-left: auto;
}

.sb-hint button {
  min-height: 0;
  padding: 2px 8px;
  border: 0;
  border-radius: var(--ui-radius-pill);
  background: var(--ui-surface);
  font-size: var(--ui-font-size-2xs);
  white-space: nowrap;
}

/* 拼接接收区：只在视频卡底部的一条明确带状区域，普通重叠不会触发拼接 */
.sb-stitch-zone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: var(--ui-space-2);
  padding: 5px 6px;
  border: 1px dashed var(--ui-line-strong);
  border-radius: var(--ui-radius-sm);
  color: var(--ui-muted);
  font-size: var(--ui-font-size-2xs);
  transition: border-color var(--ui-duration-fast), color var(--ui-duration-fast), background var(--ui-duration-fast);
}

.sb-stitch-zone .sb-stitch-active {
  display: none;
}

.sb-stitch-zone.is-drop {
  border-color: var(--ui-accent);
  border-style: solid;
  background: var(--ui-accent-soft);
  color: var(--ui-accent-strong);
}

/* 吞并反馈：视频卡悬停在另一张卡的拼接区上时，目标整卡放大一圈并扩散描边，
   拼接区文案切到「释放加入拼接」。只是视觉加强，命中区仍是这条虚线区。 */
.sb-material.is-stitch-target {
  transform: scale(1.04);
  border-color: var(--ui-accent);
  box-shadow: var(--ui-shadow-2), 0 0 0 4px color-mix(in srgb, var(--ui-accent) 30%, transparent);
}

.sb-material.is-stitch-target .sb-stitch-idle {
  display: none;
}

.sb-material.is-stitch-target .sb-stitch-active {
  display: inline;
}

/* 拼接产物素材：缩略图右上两层错位描边表示“由多段叠成”，角标给片段数。 */
.sb-material.is-assembly .sb-thumb {
  box-shadow:
    3px -3px 0 0 var(--ui-surface),
    3px -3px 0 1px var(--ui-line-strong),
    6px -6px 0 0 var(--ui-surface),
    6px -6px 0 1px var(--ui-line-strong);
}

.sb-stack-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--ui-glass-dark);
  color: var(--ui-action-on-primary);
  font-size: var(--ui-font-size-2xs);
}

.sb-stack-badge svg {
  width: 11px;
  height: 11px;
}

/* 载入占位：资产对象尚未同步到列表时按同位置渲染骨架卡。 */
.sb-material.is-loading {
  border-style: dashed;
}

.sb-material.is-loading .sb-thumb {
  color: var(--ui-ink-faint);
}

/* ---------------- 生成任务分组 ---------------- */
.sb-shot {
  width: 320px;
  padding: var(--ui-space-3);
  border-width: 2px;
}

.sb-shot.is-ready {
  border-color: color-mix(in srgb, var(--ui-accent) 55%, var(--ui-line));
}

.sb-shot.is-busy {
  border-color: var(--ui-accent);
}

.sb-shot.is-linking,
.sb-shot.is-linkable {
  border-color: var(--ui-accent);
  outline: 2px dashed var(--ui-accent);
  cursor: copy;
}

.sb-shot-head {
  display: flex;
  align-items: center;
  gap: var(--ui-space-2);
  font-size: var(--ui-font-size-sm);
}

.sb-order {
  display: grid;
  place-items: center;
  flex: none;
  min-width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--ui-accent);
  color: var(--ui-action-on-primary);
  font-size: var(--ui-font-size-2xs);
}

.sb-status {
  flex: none;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: var(--ui-font-size-2xs);
  white-space: nowrap;
}

.sb-status[data-tone='ok'] {
  background: var(--ui-success-soft);
  color: var(--ui-success);
}

.sb-status[data-tone='pending'] {
  background: var(--ui-surface-muted);
  color: var(--ui-muted);
}

.sb-status[data-tone='error'] {
  background: var(--ui-danger-soft);
  color: var(--ui-danger);
}

.sb-status[data-tone='warning'] {
  background: var(--ui-warning-soft);
  color: var(--ui-warning);
}

.sb-status[data-tone='busy'] {
  background: var(--ui-accent-soft);
  color: var(--ui-accent-strong);
}

.sb-shot-tools {
  display: inline-flex;
  margin-left: auto;
}

.sb-shot-tools button {
  min-height: 0;
  padding: 4px;
  border: 0;
  border-radius: var(--ui-radius-pill);
  background: transparent;
  color: var(--ui-muted);
}

.sb-shot-tools button:hover:not(:disabled) {
  border-color: transparent;
  color: var(--ui-ink);
  background: var(--ui-fill-1);
}

/* 输入引用区：素材连接的接收位置 */
.sb-inputs {
  margin-top: var(--ui-space-3);
  padding: var(--ui-space-2);
  border: 1px dashed var(--ui-line-strong);
  border-radius: var(--ui-radius-md);
  background: var(--ui-surface-subtle);
}

.sb-inputs-label {
  display: block;
  margin-bottom: 4px;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-2xs);
}

.sb-inputs.is-drop {
  border-color: var(--ui-accent);
  border-style: solid;
  background: var(--ui-accent-soft);
  outline: 2px solid var(--ui-accent);
}

.sb-viewport.is-connecting .sb-inputs,
.sb-viewport.is-choose-target .sb-inputs {
  border-color: color-mix(in srgb, var(--ui-accent) 60%, var(--ui-line));
}

.sb-slot {
  display: flex;
  align-items: center;
  gap: var(--ui-space-2);
  padding: 3px;
  border: 1px solid transparent;
  border-radius: var(--ui-radius-sm);
}

.sb-slot + .sb-slot {
  margin-top: 2px;
}

.sb-slot.is-drop {
  border-color: var(--ui-accent);
  background: var(--ui-accent-soft);
  outline: 2px solid var(--ui-accent);
}

.sb-viewport.is-connecting .sb-slot,
.sb-viewport.is-choose-target .sb-slot {
  border-color: color-mix(in srgb, var(--ui-accent) 45%, var(--ui-line));
}

.sb-slot-thumb {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  overflow: hidden;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-xs);
  background: var(--ui-glass-strong);
  color: var(--ui-muted);
}

.sb-slot-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sb-slot-copy {
  min-width: 0;
  flex: 1 1 auto;
}

.sb-slot-copy em {
  display: block;
  font-style: normal;
  font-size: var(--ui-font-size-2xs);
}

.sb-slot-copy small {
  display: block;
  overflow: hidden;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-2xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sb-slot:not(.is-filled) .sb-slot-copy small {
  color: var(--ui-ink-faint);
}

.sb-slot-unbind,
.sb-slot-clip {
  display: none;
  place-items: center;
  flex: none;
  width: 20px;
  height: 20px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: var(--ui-radius-xs);
  background: var(--ui-ink);
  color: var(--ui-action-on-primary);
}

.sb-slot:hover .sb-slot-unbind,
.sb-slot:hover .sb-slot-clip {
  display: grid;
}

/* 参考视频片段区间编辑：紧凑的两列表单，沿用 slot 对话框外壳 */
.sb-clip-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ui-space-3);
  margin-top: var(--ui-space-3);
}

.sb-clip-fields label {
  display: grid;
  gap: var(--ui-space-1);
  font-size: var(--ui-font-size-xs);
  color: var(--ui-muted);
}

.sb-clip-fields input {
  width: 100%;
  min-height: 32px;
  margin: 0;
  padding: 4px 8px;
}

.sb-clip-status {
  min-height: 18px;
  margin: var(--ui-space-2) 0 0;
  color: var(--ui-danger);
  font-size: var(--ui-font-size-2xs);
}

.sb-slot-add {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 28px;
  margin-top: 4px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--ui-radius-pill);
  background: var(--ui-surface);
  color: var(--ui-accent);
  font-size: var(--ui-font-size-2xs);
  font-weight: var(--ui-font-weight-medium);
}

.sb-slot-add:hover:not(:disabled) {
  border-color: transparent;
  background: var(--ui-accent-wash);
  color: var(--ui-accent-strong);
}

/* 生成设置卡：嵌在任务分组内部，一任务一张 */
.sb-settings {
  margin-top: var(--ui-space-2);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-md);
  background: var(--ui-surface);
}

.sb-settings-wrap {
  min-width: 0;
}

.sb-settings-audio {
  display: flex;
  align-items: center;
  gap: var(--ui-space-1);
  padding: 0 var(--ui-space-2) var(--ui-space-2);
  color: var(--ui-muted);
  font-size: var(--ui-font-size-2xs);
}

.sb-settings-audio span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sb-settings-audio button {
  display: grid;
  place-items: center;
  flex: none;
  width: 20px;
  height: 20px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: var(--ui-radius-xs);
  background: transparent;
  color: var(--ui-muted);
}

.sb-settings-audio button:hover {
  background: var(--ui-danger-soft);
  color: var(--ui-danger);
}

.sb-settings-audio svg {
  width: 12px;
  height: 12px;
}

.sb-settings.is-drop {
  border-color: var(--ui-accent);
  background: var(--ui-accent-soft);
}

.sb-settings-card {
  display: block;
  width: 100%;
  padding: var(--ui-space-2);
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.sb-settings-card:hover {
  background: var(--ui-surface-subtle);
}

.sb-settings-title {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--ui-accent-strong);
  font-size: var(--ui-font-size-xs);
  font-weight: var(--ui-font-weight-medium);
}

.sb-settings-prompt {
  display: block;
  overflow: hidden;
  margin-top: 2px;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-2xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sb-settings-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--ui-space-3) var(--ui-space-2);
  color: var(--ui-muted);
  font-size: var(--ui-font-size-2xs);
  text-align: center;
}

.sb-settings-empty small {
  color: var(--ui-ink-faint);
}

/* 生成结果区 */
.sb-results {
  margin-top: var(--ui-space-2);
}

.sb-results .sb-inputs-label {
  margin-bottom: 0;
}

.sb-outputs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ui-space-1);
  margin-top: 4px;
}

.sb-output {
  position: relative;
  width: 64px;
  margin: 0;
}

.sb-output-preview {
  display: block;
  width: 64px;
  height: 46px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-xs);
  background: var(--ui-surface-subtle);
  color: var(--ui-muted);
}

.sb-output-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sb-output figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 2px;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-2xs);
}

.sb-output-actions {
  display: inline-flex;
  gap: 2px;
}

.sb-output-actions button {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: var(--ui-radius-xs);
  background: transparent;
  color: var(--ui-muted);
}

.sb-output-actions button:hover {
  color: var(--ui-accent-strong);
  background: var(--ui-accent-soft);
}

.sb-output:first-child .sb-output-preview {
  border-color: var(--ui-accent);
  outline: 1px solid var(--ui-accent);
}

/* 状态与元信息 */
.sb-meta {
  margin-top: var(--ui-space-2);
  font-size: var(--ui-font-size-2xs);
}

.sb-meta p {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 2px 0;
}

.sb-meta .sb-error {
  color: var(--ui-danger);
}

.sb-meta .sb-ok {
  color: var(--ui-success);
}

.sb-meta .sb-warning {
  color: var(--ui-warning);
}

.sb-meta .sb-job {
  color: var(--ui-muted);
}

.sb-meta .sb-job.busy {
  color: var(--ui-accent);
}

.sb-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ui-space-1);
  margin-top: var(--ui-space-2);
}

.sb-actions button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 28px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--ui-radius-pill);
  background: var(--ui-fill-1);
  color: var(--ui-ink);
  font-size: var(--ui-font-size-2xs);
  font-weight: var(--ui-font-weight-medium);
}

.sb-actions button:not(:disabled):hover {
  border-color: transparent;
  background: var(--ui-fill-2);
  color: var(--ui-ink-strong);
}

.sb-actions button:disabled {
  opacity: 0.5;
}

.sb-actions button.sb-quiet {
  background: transparent;
  color: var(--ui-muted);
}

.sb-actions button.sb-quiet:not(:disabled):hover {
  background: var(--ui-danger-soft);
  color: var(--ui-danger);
}

.sb-actions .sb-primary,
.sb-actions .sb-primary:not(:disabled):hover {
  background: var(--ui-accent);
  color: var(--ui-action-on-primary);
}

/* ---------------- 未关联的生成设置卡 / 本地任务卡 ---------------- */
.sb-bubble {
  width: 240px;
  border-style: dashed;
}

.sb-bubble.is-linking {
  border-color: var(--ui-accent);
  outline: 2px dashed var(--ui-accent);
}

.sb-badge {
  margin-left: auto;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--ui-warning-soft);
  color: var(--ui-warning);
  font-size: var(--ui-font-size-2xs);
}

.sb-bubble-prompt {
  display: -webkit-box;
  overflow: hidden;
  margin: var(--ui-space-2) 0;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-2xs);
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.sb-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.sb-chips span {
  padding: 1px 8px;
  border-radius: 999px;
  border: 1px solid var(--ui-line);
  color: var(--ui-muted);
  font-size: var(--ui-font-size-2xs);
}

.sb-task {
  width: 260px;
}

.sb-task p {
  margin: var(--ui-space-2) 0;
  font-size: var(--ui-font-size-2xs);
}

.sb-task-progress {
  display: block;
  width: 100%;
  height: 8px;
  margin-top: var(--ui-space-2);
  accent-color: var(--ui-accent);
}

/* ---------------- 拼接确认弹窗 ---------------- */
.sb-stitch-dialog {
  width: min(640px, 94vw);
  max-height: 90vh;
  padding: var(--ui-space-5);
  overflow: auto;
}

.sb-stitch-list {
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-1);
  margin: var(--ui-space-3) 0;
  padding: 0;
  list-style: none;
}

.sb-stitch-item {
  display: flex;
  align-items: center;
  gap: var(--ui-space-2);
  padding: var(--ui-space-2);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-sm);
}

/* 行柄按下即拖：被拖行压淡，插入位置用一侧描边标记；↑↓ 按钮是键盘兜底。 */
.sb-stitch-grip {
  display: grid;
  place-items: center;
  flex: none;
  width: 18px;
  color: var(--ui-ink-faint);
  cursor: grab;
  touch-action: none;
}

.sb-stitch-grip svg {
  width: 14px;
  height: 14px;
}

.sb-stitch-item.is-row-dragging {
  opacity: 0.55;
  border-style: dashed;
}

.sb-stitch-item.is-drop-before {
  border-top: 2px solid var(--ui-accent);
}

.sb-stitch-item.is-drop-after {
  border-bottom: 2px solid var(--ui-accent);
}

.sb-stitch-order {
  display: grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--ui-accent);
  color: var(--ui-action-on-primary);
  font-size: var(--ui-font-size-2xs);
}

.sb-stitch-thumb {
  display: grid;
  place-items: center;
  flex: none;
  width: 72px;
  height: 44px;
  overflow: hidden;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-xs);
  background: var(--ui-surface-subtle);
  color: var(--ui-muted);
}

.sb-stitch-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sb-stitch-copy {
  min-width: 0;
  flex: 1 1 auto;
}

.sb-stitch-copy strong {
  display: block;
  overflow: hidden;
  font-size: var(--ui-font-size-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sb-stitch-copy small {
  color: var(--ui-muted);
  font-size: var(--ui-font-size-2xs);
}

.sb-stitch-tools {
  display: inline-flex;
  gap: 2px;
}

.sb-stitch-tools button {
  width: 24px;
  height: 24px;
  min-height: 0;
  padding: 0;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-xs);
  background: var(--ui-surface);
}

.sb-stitch-tools button:disabled {
  opacity: 0.4;
}

.sb-stitch-add {
  display: flex;
  gap: var(--ui-space-2);
  margin-bottom: var(--ui-space-2);
}

.sb-stitch-add select {
  flex: 1 1 auto;
  min-width: 0;
  padding: 4px 8px;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-sm);
  font-size: var(--ui-font-size-xs);
}

.sb-stitch-add button {
  min-height: 0;
  padding: 4px 12px;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-sm);
  background: var(--ui-surface);
  font-size: var(--ui-font-size-xs);
}

.sb-stitch-total {
  margin: var(--ui-space-2) 0 0;
  font-size: var(--ui-font-size-xs);
  font-weight: var(--ui-font-weight-medium);
}

.sb-stitch-note {
  margin: var(--ui-space-1) 0 var(--ui-space-3);
  color: var(--ui-muted);
  font-size: var(--ui-font-size-2xs);
}

.sb-stitch-opts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ui-space-3);
  margin-top: var(--ui-space-2);
  font-size: var(--ui-font-size-xs);
}

.sb-stitch-opts label {
  display: inline-flex;
  align-items: center;
  gap: var(--ui-space-1);
  color: var(--ui-muted);
}

.sb-stitch-opts select {
  padding: 2px 6px;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-sm);
}

/* ---------------- 输入位选择弹窗 ---------------- */
/* 同型空槽位多于一个时让用户选：行按钮列出槽位用途与必填/可选。 */
.sb-slot-dialog {
  width: min(420px, 92vw);
  max-height: 80vh;
  padding: var(--ui-space-5);
  overflow: auto;
}

.sb-slot-picks {
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-1);
  margin: var(--ui-space-3) 0 0;
}

.sb-slot-pick {
  display: flex;
  align-items: center;
  gap: var(--ui-space-2);
  padding: var(--ui-space-2) var(--ui-space-3);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-sm);
  background: var(--ui-glass-strong);
  text-align: left;
}

.sb-slot-pick:hover {
  border-color: var(--ui-accent);
  background: var(--ui-accent-soft);
}

.sb-slot-pick em {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  font-style: normal;
  font-size: var(--ui-font-size-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sb-slot-pick small {
  flex: none;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-2xs);
}

/* ---------------- 手动裁剪台 ---------------- */
.sb-trim-dialog {
  width: min(860px, 94vw);
  max-height: 92vh;
  padding: var(--ui-space-5);
  overflow: auto;
}

.sb-trim-note {
  margin: var(--ui-space-1) 0 0;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
}

.sb-trim-body video {
  display: block;
  width: 100%;
  max-height: 320px;
  margin-bottom: var(--ui-space-3);
  border-radius: var(--ui-radius-md);
  background: var(--ui-ink);
}

.sb-trim-track {
  position: relative;
  height: 44px;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-sm);
  background: var(--ui-surface-subtle);
  cursor: crosshair;
}

.sb-trim-playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--ui-danger);
  pointer-events: none;
}

/* 时间轴色块与列表行按 .is-cN 循环取 --ui-segment-* 色板，二者同色对应。 */
.sb-trim-seg.is-c1, .sb-trim-item.is-c1 { --seg: var(--ui-segment-1); }

.sb-trim-seg.is-c2, .sb-trim-item.is-c2 { --seg: var(--ui-segment-2); }

.sb-trim-seg.is-c3, .sb-trim-item.is-c3 { --seg: var(--ui-segment-3); }

.sb-trim-seg.is-c4, .sb-trim-item.is-c4 { --seg: var(--ui-segment-4); }

.sb-trim-seg.is-c5, .sb-trim-item.is-c5 { --seg: var(--ui-segment-5); }

.sb-trim-seg.is-c6, .sb-trim-item.is-c6 { --seg: var(--ui-segment-6); }

/* 手柄探出色块 4px：色块自身不做 overflow 裁剪，由标签与标记各自截断。 */
.sb-trim-seg {
  position: absolute;
  top: 0;
  bottom: 0;
  border: 1px solid var(--seg, var(--ui-accent));
  border-radius: var(--ui-radius-sm);
  background: color-mix(in srgb, var(--seg, var(--ui-accent)) 18%, transparent);
}

.sb-trim-seg.is-overlap {
  outline: 2px dashed var(--ui-warning);
  outline-offset: 1px;
}

.sb-trim-seg.is-overlong {
  background: repeating-linear-gradient(-45deg,
    color-mix(in srgb, var(--seg, var(--ui-accent)) 20%, transparent) 0 6px,
    color-mix(in srgb, var(--ui-warning) 24%, transparent) 6px 12px);
}

.sb-trim-seg-label {
  position: absolute;
  top: 2px;
  left: 4px;
  max-width: calc(100% - 8px);
  overflow: hidden;
  color: var(--ui-ink);
  font-size: var(--ui-font-size-2xs);
  white-space: nowrap;
  text-overflow: ellipsis;
  pointer-events: none;
}

.sb-trim-seg-flag {
  position: absolute;
  bottom: 2px;
  left: 4px;
  max-width: calc(100% - 8px);
  padding: 0 4px;
  overflow: hidden;
  border-radius: var(--ui-radius-xs);
  background: var(--ui-warning-soft);
  color: color-mix(in srgb, var(--ui-warning) 72%, var(--ui-ink));
  font-size: var(--ui-font-size-2xs);
  white-space: nowrap;
  text-overflow: ellipsis;
  pointer-events: none;
}

.sb-trim-handle {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 12px;
  border: 2px solid var(--seg, var(--ui-accent));
  border-radius: var(--ui-radius-sm);
  background: var(--ui-glass-strong);
  cursor: ew-resize;
  padding: 0;
  touch-action: none;
}

.sb-trim-handle.is-start {
  left: -4px;
}

.sb-trim-handle.is-end {
  right: -4px;
}

.sb-trim-times {
  display: flex;
  justify-content: space-between;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-2xs);
}

.sb-trim-tools {
  display: flex;
  align-items: center;
  gap: var(--ui-space-3);
  margin: var(--ui-space-3) 0;
}

.sb-trim-count {
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
}

.sb-trim-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ui-space-2);
  padding: var(--ui-space-2);
  margin-bottom: var(--ui-space-2);
  border: 1px solid var(--ui-line);
  border-left: 3px solid var(--seg, var(--ui-accent));
  border-radius: var(--ui-radius-sm);
  font-size: var(--ui-font-size-xs);
}

.sb-trim-name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.sb-trim-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--ui-radius-pill);
  background: var(--seg, var(--ui-accent));
}

.sb-trim-len {
  color: var(--ui-muted);
}

.sb-trim-flag {
  flex-basis: 100%;
  margin: 0;
  color: color-mix(in srgb, var(--ui-warning) 72%, var(--ui-ink));
  font-size: var(--ui-font-size-2xs);
}

.sb-trim-item label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.sb-trim-item input {
  width: 76px;
  padding: 2px 6px;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-sm);
}

}
/* /styles/pages/admin-users.css */
@layer pages {
/*
 * Pages layer — 用户管理 / 素材归属（SCREEN-013）。
 *
 * 桌面保留表格；≤768px 表格转卡片列表（thead 隐藏、td 用 data-label
 * 伪元素补列名），DOM 与 data-* 钩子不变。
 */
/* ---- 区块标题：标题 + 计数，替代页面级重复标题 ---- */
[id="users-view"] .section-heading {
  align-items: baseline;
  margin-bottom: var(--ui-space-4);
}

[id="users-view"] .section-heading h2,
[id="users-view"] .section-heading h3 {
  font-size: var(--ui-font-size-lg);
  font-weight: var(--ui-font-weight-semibold);
}

[id="users-view"] .section-heading .meta {
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
  white-space: nowrap;
}

[id="users-view"] .admin-assets-panel {
  margin-top: var(--ui-space-9);
  padding-top: 0;
  border-top: 0;
}

/* 区块说明文字：统一中性辅助色（旧 .hub-copy 硬编码色停用） */
[id="users-view"] .hub-copy {
  color: var(--ui-muted);
}

/* ---- 表格容器：细线 + 圆角，桌面必要时内部横向滚动 ---- */
[id="users-table"],
[id="admin-assets-table"] {
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border: 0;
  border-radius: var(--ui-radius-lg);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-card);
}

[id="users-table"] .provider-table {
  min-width: 840px;
  border: 0;
  box-shadow: none;
}

[id="admin-assets-table"] .provider-table {
  min-width: 760px;
  border: 0;
  box-shadow: none;
}

/* 档位表「排序」列窄输入框（原内联 style 会被 CSP 拦截，挪进样式表）。 */
.tier-table [data-tf="sortOrder"] {
  width: 64px;
}

[id="users-table"] .provider-table th,
[id="admin-assets-table"] .provider-table th {
  padding: var(--ui-space-3) var(--ui-space-4);
  background: transparent;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
  font-weight: var(--ui-font-weight-medium);
}

[id="users-table"] .provider-table td,
[id="admin-assets-table"] .provider-table td {
  padding: var(--ui-space-3) var(--ui-space-4);
  border-bottom: 1px solid var(--ui-line);
  vertical-align: middle;
  line-height: var(--ui-line-height-snug);
}

[id="users-table"] .provider-table tr:last-child td,
[id="admin-assets-table"] .provider-table tr:last-child td {
  border-bottom: 0;
}

[id="users-table"] .provider-table td:first-child {
  min-width: 120px;
  max-width: 220px;
}

[id="users-table"] .provider-table td:first-child strong {
  color: var(--ui-ink-strong);
  font-weight: var(--ui-font-weight-semibold);
}

[id="users-table"] .user-balance {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* 徽章沿用组件层的语义色；这里只补「冻结」徽章作为按钮的外观。 */

/* 「冻结明细」徽章本身就是按钮：去掉 button 默认边框、保留手型。 */
[id="users-view"] button.badge {
  border: 0;
  cursor: pointer;
}

[id="users-view"] .badge.running {
  background: var(--ui-accent-soft);
  color: var(--ui-accent-strong);
}

/* ---- 行内操作：同高 32px 小按钮、间距 8px，删除用危险色 ---- */
/* 行内操作：一个常用动作（调整余额）+ 「…」菜单收纳其余动作。 */
[id="users-table"] .user-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--ui-space-1);
  min-width: 160px;
}

[id="users-table"] .user-actions > .text-button {
  min-height: 32px;
  padding: 0 var(--ui-space-3);
  border-radius: var(--ui-radius-pill);
  background: var(--ui-fill-1);
  color: var(--ui-ink);
  font-size: var(--ui-font-size-xs);
}

[id="users-table"] .user-actions > .text-button:hover:not(:disabled) {
  background: var(--ui-fill-2);
  color: var(--ui-ink-strong);
}

[id="users-table"] .user-actions [data-delete-user] {
  color: var(--ui-danger);
}

[id="users-table"] .user-actions [data-delete-user]:hover:not(:disabled) {
  background: var(--ui-danger-soft);
  color: var(--ui-danger);
}

/* ---- 账号搜索 / 素材归属筛选：搜索 flex:1（min-width 200px），下拉按内容定宽 ---- */
.admin-users-tools,
.admin-assets-tools {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ui-space-2);
  margin: 0 0 var(--ui-space-4);
}

.admin-users-tools input,
.admin-assets-tools input {
  flex: 1 1 240px;
  min-width: 200px;
  max-width: 420px;
}

.admin-assets-tools select {
  flex: 0 0 auto;
  width: auto;
  min-width: 128px;
}

/* ---- 对话框（调额 / 重置密码 / 素材归属沿用同一语言） ---- */
[id="balance-dialog"] label,
[id="password-dialog"] label,
[id="holds-dialog"] label {
  display: block;
  margin: var(--ui-space-4) 0 0;
  color: var(--ui-ink-soft);
  font-size: var(--ui-font-size-xs);
}

[id="balance-dialog"] input,
[id="password-dialog"] input {
  margin-top: 6px;
}

[id="balance-dialog"] .auth-copy,
[id="password-dialog"] .auth-copy {
  color: var(--ui-muted);
}

/* 调额方式（增加 / 减少 / 设为）与调整后余额预览；预览出错时转危险色 */
[id="balance-dialog"] .balance-modes {
  display: flex;
  margin-top: var(--ui-space-4);
}

[id="balance-dialog"] .balance-modes button {
  flex: 1 1 0;
}

[id="balance-dialog"] .balance-preview {
  min-height: 1.5em;
  margin: var(--ui-space-2) 0 0;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
}

[id="balance-dialog"] .balance-preview.is-error {
  color: var(--ui-danger);
}

/* ---- 触控目标 ---- */
@media (pointer: coarse) {
  [id="users-table"] .user-actions .text-button,
  [id="users-table"] .user-actions button,
  .admin-users-tools input,
  .admin-assets-tools input,
  .admin-assets-tools select {
    min-height: var(--ui-touch-target);
    height: var(--ui-touch-target);
  }
}

/* ---- ≤768px：表格转卡片列表，无横向滚动 ---- */
@media (max-width: 768px) {
  [id="users-table"],
  [id="admin-assets-table"] {
    overflow-x: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  [id="users-table"] .provider-table,
  [id="admin-assets-table"] .provider-table {
    display: block;
    min-width: 0;
    border: 0;
    background: transparent;
  }

  [id="users-table"] .provider-table thead,
  [id="admin-assets-table"] .provider-table thead {
    display: none;
  }

  [id="users-table"] .provider-table tbody,
  [id="admin-assets-table"] .provider-table tbody {
    display: grid;
    gap: var(--ui-space-2);
  }

  [id="users-table"] .provider-table tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 12px;
    padding: 12px 14px;
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-radius-md);
    background: var(--ui-glass-strong);
  }

  [id="admin-assets-table"] .provider-table tbody tr {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 6px 12px;
    padding: 12px 14px;
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-radius-md);
    background: var(--ui-glass-strong);
  }

  [id="users-table"] .provider-table td,
  [id="admin-assets-table"] .provider-table td {
    display: block;
    min-width: 0;
    max-width: none;
    padding: 0;
    border: 0;
  }

  /* td 补列名（渲染侧写入 data-label） */
  [id="users-table"] .provider-table td::before,
  [id="admin-assets-table"] .provider-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    color: var(--ui-muted);
    font-size: var(--ui-font-size-2xs);
    line-height: 1.4;
  }

  /* 账号 + 余额同一行；徽章行；操作一行 */
  [id="users-table"] .provider-table td[data-label="账号"]::before,
  [id="users-table"] .provider-table td[data-label="余额"]::before,
  [id="admin-assets-table"] .provider-table td[data-label="预览"]::before {
    display: none;
  }

  [id="users-table"] td.user-actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: var(--ui-space-2);
    padding-top: var(--ui-space-2);
    border-top: 1px solid var(--ui-line);
  }

  [id="users-table"] td.user-actions::before {
    display: none;
  }

  /* 素材卡：缩略图占左列两行 */
  [id="admin-assets-table"] .provider-table td[data-label="预览"] {
    grid-row: span 2;
    align-self: start;
  }

  [id="admin-assets-table"] .admin-asset-thumb {
    width: 56px;
    height: 40px;
  }

  /* 筛选在窄屏换行：搜索独占一行，下拉同排 */
  .admin-assets-tools input {
    flex-basis: 100%;
  }

  .admin-assets-tools select {
    flex: 1 1 auto;
  }
}

/* 素材库容量对话框：恢复默认是普通单行勾选，不用确认框的大点击面。 */
[id="quota-dialog"] .quota-default {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--ui-space-2);
  margin: var(--ui-space-1) 0 0;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-sm);
}

[id="quota-dialog"] .quota-default input {
  display: inline-block;
  flex: 0 0 auto;
  width: auto;
  min-height: 0;
  margin: 0;
}

/* 素材归属分页：表格卡片下方居中的一行。 */
.admin-assets-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ui-space-3);
  padding: var(--ui-space-4);
  border-top: 1px solid var(--ui-line);
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
}

.admin-assets-empty {
  padding: var(--ui-space-8) var(--ui-space-5);
  text-align: center;
}

}
/* /styles/pages/admin-panel.css */
@layer pages {
/*
 * Pages layer — 管理员面板 (providers view).
 *
 * The page is one stack of collapsible section cards, collapsed by default:
 * 视频与工具上游, AI 助手接入, 生成档位, AI 工具上下架, 注册与邮件, 助手提示词,
 * 热点追踪, 音频扰动, 换脸增强. Each section is one white card whose summary
 * is a 17px heading row with a chevron; inside, groups are separated by
 * hairlines and nested tables, lists and editors sit flat (no second shadow).
 * Legacy geometry in video-upstreams.css still owns field grids.
 */
[id="providers-view"] .ui-page > .section-heading {
  margin-bottom: var(--ui-space-7);
}

/* ---------- 视频与工具上游 ---------- */
.admin-flow { min-width: 0; }
[id="providers-view"] .model-center-role .model-admin-card.admin-flow { grid-template-columns: minmax(0, 1fr); }
[id="providers-view"] .admin-flow > .admin-hint { display: block; grid-column: 1 / -1; }
[id="providers-view"] .admin-flow .admin-card-actions { justify-content: flex-start; }
[id="providers-view"] .admin-flow .admin-switch { min-height: 44px; }
.admin-flow .admin-card-actions { display: flex; flex-wrap: wrap; gap: var(--ui-space-2); }
[id="providers-view"] .hot-admin-section { display: block; padding-block: var(--ui-space-5); min-width: 0; }
.hot-admin-section + .hot-admin-section { border-top: 1px solid var(--ui-line); }
.hot-admin-section header h3 { margin: 0 0 var(--ui-space-2); }
.hot-admin-section p { overflow-wrap: anywhere; }
.hot-admin-section button { min-height: 44px; }
.hot-admin-section input[type="checkbox"] { width: 18px; height: 18px; flex-shrink: 0; }
.hot-pick-toolbar { display: flex; align-items: end; justify-content: space-between; flex-wrap: wrap; gap: var(--ui-space-3); margin-block: var(--ui-space-4); }
.hot-pick-search { flex: 1 1 240px; min-width: 0; }
.hot-pick-search input { display: block; width: 100%; margin-top: var(--ui-space-2); }
.hot-pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: var(--ui-space-3); margin-block: var(--ui-space-3); }
.hot-pick { display: flex; align-items: center; gap: var(--ui-space-3); min-width: 0; padding: var(--ui-space-3); border: 1px solid var(--ui-line); border-radius: var(--ui-radius-md); cursor: pointer; }
.hot-pick.is-picked { border-color: var(--ui-accent); background: var(--ui-accent-soft); }
.hot-pick:focus-within { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
.hot-pick-viewed { cursor: default; }
.hot-pick-image { position: relative; display: grid; place-items: center; flex: 0 0 64px; width: 64px; height: 64px; overflow: hidden; border-radius: var(--ui-radius-sm); background: var(--ui-surface-subtle); color: var(--ui-ink-soft); font-size: var(--ui-font-size-xs); }
.hot-pick-image img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.hot-pick-image img[hidden] { display: none; }
.hot-pick-copy { display: flex; flex-direction: column; gap: var(--ui-space-1); min-width: 0; overflow-wrap: anywhere; }
.hot-pick-copy strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: var(--ui-font-size-sm); font-weight: 600; }
.hot-pick-copy small { font-size: var(--ui-font-size-xs); color: var(--ui-ink-soft); }
.hot-pick-id { word-break: break-all; }
.hot-pick-empty { grid-column: 1 / -1; padding: var(--ui-space-5) 0; }
.hot-viewed { margin-top: var(--ui-space-5); border-top: 1px solid var(--ui-line); }
.hot-viewed > summary, .hot-admin-advanced > summary { min-height: 44px; padding-block: var(--ui-space-3); cursor: pointer; }
.hot-pick-footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--ui-space-4); margin-top: var(--ui-space-5); }
.hot-pick-footer label { flex: 1 1 220px; min-width: 0; }
.hot-pick-footer input { display: block; width: 100px; margin-block: var(--ui-space-2); }
.hot-pick-footer small { display: block; color: var(--ui-ink-soft); font-size: var(--ui-font-size-xs); }
.hot-import-preview { padding-block: var(--ui-space-4); border-block: 1px solid var(--ui-line); margin-block: var(--ui-space-4); }
.hot-import-preview h4 { margin: 0; overflow-wrap: anywhere; }
.hot-import-confirm { display: flex; align-items: start; gap: var(--ui-space-3); padding-block: var(--ui-space-3); font-size: var(--ui-font-size-sm); }
.hot-import-warning { color: var(--ui-danger); }
.hot-storage { border-top: 1px solid var(--ui-line); padding-top: var(--ui-space-3); }
.hot-admin-advanced { border-top: 1px solid var(--ui-line); }
@media (max-width: 480px) {
  .hot-admin-section .admin-card-actions { width: 100%; }
  .hot-admin-section .admin-card-actions button { flex: 1 1 120px; }
  .hot-pick { gap: var(--ui-space-2); padding: var(--ui-space-2); }
}

[id="providers-view"] .upstream-table-wrap {
  border: 0;
  border-radius: var(--ui-radius-md);
  background: var(--ui-surface);
  box-shadow: 0 0 0 1px var(--ui-line);
}

[id="providers-view"] .upstream-table th {
  padding: var(--ui-space-3) var(--ui-space-5);
  border-bottom: 1px solid var(--ui-line);
  background: transparent;
  font-size: var(--ui-font-size-xs);
}

[id="providers-view"] .upstream-table td {
  padding: var(--ui-space-3) var(--ui-space-5);
  font-size: var(--ui-font-size-sm);
}

[id="providers-view"] .upstream-table td small {
  font-size: var(--ui-font-size-xs);
}

[id="providers-view"] .upstream-state {
  padding: 2px var(--ui-space-2);
  border-radius: var(--ui-radius-pill);
  font-size: var(--ui-font-size-2xs);
}

/* The editor opens under the table as a grey well inside the section card. */
[id="providers-view"] .upstream-editor {
  margin-top: var(--ui-space-4);
  padding: var(--ui-space-6);
  border: 0;
  border-radius: var(--ui-radius-md);
  background: var(--ui-surface-subtle);
  box-shadow: none;
}

[id="providers-view"] .upstream-fields label {
  gap: 6px;
  color: var(--ui-ink-soft);
  font-size: var(--ui-font-size-xs);
}

/* ---------- Collapsible section cards ---------- */
[id="providers-view"] .model-center-role {
  margin: var(--ui-space-4) 0 0;
  padding: 0 var(--ui-space-7);
  border: 0;
  border-radius: var(--ui-radius-lg);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-card);
}

[id="providers-view"] .model-center-role[open] {
  padding-bottom: var(--ui-space-7);
}

[id="providers-view"] .model-center-role > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ui-space-3);
  min-height: 64px;
  color: var(--ui-ink-strong);
  font-size: var(--ui-font-size-lg);
  font-weight: var(--ui-font-weight-semibold);
  list-style: none;
}

[id="providers-view"] .model-center-role > summary::-webkit-details-marker {
  display: none;
}

[id="providers-view"] .model-center-role > summary::before {
  content: none;
}

/* A drawn chevron: points right when closed, down when open. */
[id="providers-view"] .model-center-role > summary::after {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-right: 4px;
  border-right: 2px solid var(--ui-ink-faint);
  border-bottom: 2px solid var(--ui-ink-faint);
  content: '';
  transform: rotate(-45deg);
  transition: transform var(--ui-duration-fast) var(--ui-ease-standard);
}

[id="providers-view"] .model-center-role[open] > summary::after {
  transform: rotate(45deg);
}

[id="providers-view"] .model-center-role[open] > summary {
  margin-bottom: var(--ui-space-5);
  border-bottom: 1px solid var(--ui-line);
}

[id="providers-view"] .model-center-role .hub-copy {
  margin-bottom: var(--ui-space-5);
  font-size: var(--ui-font-size-sm);
}

/* Inner cards become groups inside the section card. */
[id="providers-view"] .model-center-role .model-admin-card {
  gap: var(--ui-space-4) var(--ui-space-5);
  padding: var(--ui-space-5) 0;
  border: 0;
  border-top: 1px solid var(--ui-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

[id="providers-view"] .model-center-role .hub-copy + div > .model-admin-card:first-child,
[id="providers-view"] .model-center-role .model-admin-card:first-child {
  padding-top: 0;
  border-top: 0;
}

[id="providers-view"] .model-admin-card header h3 {
  margin: 0;
  color: var(--ui-ink-strong);
  font-size: var(--ui-font-size-md);
}

[id="providers-view"] .model-admin-card label {
  gap: 6px;
  color: var(--ui-ink-soft);
  font-size: var(--ui-font-size-xs);
}

[id="providers-view"] .model-admin-card > .admin-secret {
  gap: 6px;
  font-size: var(--ui-font-size-xs);
}

[id="providers-view"] .model-admin-card .admin-switch,
[id="providers-view"] .model-admin-card .admin-reveal {
  min-height: 32px;
  color: var(--ui-ink);
  font-size: var(--ui-font-size-sm);
}

/* Tables inside a section card sit flat: a hairline frame, no shadow. */
[id="providers-view"] .model-center-role .provider-table {
  border-radius: var(--ui-radius-md);
  box-shadow: 0 0 0 1px var(--ui-line);
}

[id="providers-view"] .model-center-role .provider-table th {
  padding: var(--ui-space-3) var(--ui-space-4);
  font-size: var(--ui-font-size-xs);
}

[id="providers-view"] .model-center-role .provider-table td {
  padding: var(--ui-space-3) var(--ui-space-4);
  font-size: var(--ui-font-size-sm);
}

[id="providers-view"] .tool-shelf-category {
  margin: var(--ui-space-6) 0 var(--ui-space-3);
  color: var(--ui-ink-strong);
  font-size: var(--ui-font-size-md);
}

[id="providers-view"] .tool-shelf-category:first-child {
  margin-top: 0;
}

/* Tool name on the left; the switch and its state word share the right cell. */
[id="providers-view"] .tool-shelf-table th:last-child,
[id="providers-view"] .tool-shelf-table td:last-child {
  width: 160px;
}

[id="providers-view"] .tool-shelf-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--ui-space-2);
}

[id="providers-view"] .tier-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--ui-space-3);
  margin-top: var(--ui-space-5);
}

[id="providers-view"] .hot-tracking-degraded {
  padding: var(--ui-space-2) var(--ui-space-3);
  border-radius: var(--ui-radius-md);
  color: var(--ui-warning);
}

/* ---------- 助手提示词 ---------- */
[id="providers-view"] [id="admin-assistant-prompts"] {
  border: 0;
  border-radius: var(--ui-radius-md);
  background: var(--ui-surface-subtle);
}

[id="providers-view"] .assistant-prompt h4 {
  font-size: var(--ui-font-size-sm);
}

[id="providers-view"] .assistant-prompt .hub-copy {
  margin: 2px 0 0;
  font-size: var(--ui-font-size-xs);
}

[id="providers-view"] .assistant-prompt textarea,
[id="providers-view"] .assistant-prompt-locked {
  font-size: var(--ui-font-size-xs);
}

[id="providers-view"] .assistant-prompt textarea {
  border-color: var(--ui-line-strong);
  border-radius: var(--ui-radius-md);
  background: var(--ui-surface);
}

[id="providers-view"] .assistant-prompt-locked {
  max-height: 320px;
  margin-top: var(--ui-space-2);
  overflow: auto;
  border: 0;
  border-radius: var(--ui-radius-md);
  background: var(--ui-fill-1);
}

[id="providers-view"] .assistant-prompt-contract > summary {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--ui-accent);
  font-size: var(--ui-font-size-xs);
  cursor: pointer;
}

@media (pointer: coarse) {
  [id="providers-view"] .assistant-prompt-contract > summary {
    min-height: var(--ui-touch-target);
  }
}

/* ---------- AI 助手接入 ---------- */
[id="providers-view"] .admin-assistant-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ui-space-4);
  margin: 0 0 var(--ui-space-4);
  padding-top: 0;
  border-top: 0;
}

[id="providers-view"] .admin-assistant-heading .hub-copy {
  margin: 0;
}

[id="providers-view"] [id="admin-assistant-list"] {
  border: 0;
  border-radius: var(--ui-radius-md);
  background: var(--ui-surface);
  box-shadow: 0 0 0 1px var(--ui-line);
}

[id="providers-view"] .assistant-entry-head {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--ui-space-3);
}

[id="providers-view"] .assistant-entry > summary {
  min-height: 56px;
  padding: var(--ui-space-3) var(--ui-space-5);
}

[id="providers-view"] .assistant-entry > summary strong {
  font-size: var(--ui-font-size-sm);
}

[id="providers-view"] .assistant-entry .model-admin-card {
  padding: var(--ui-space-5);
}

[id="providers-view"] .assistant-entry [data-model-list-status] {
  display: block;
  grid-column: 1 / -1;
  overflow-wrap: anywhere;
}

[id="providers-view"] .assistant-entry [data-model-list-status]:empty {
  display: none;
}

@media (max-width: 768px) {
  [id="providers-view"] .model-center-role {
    padding: 0 var(--ui-space-5);
  }

  [id="providers-view"] .model-center-role[open] {
    padding-bottom: var(--ui-space-5);
  }
}

/* ---------- 视频反推 · 素材裂变 prompt settings ---------- */
[id="providers-view"] .admin-settings-group {
  display: grid;
  gap: var(--ui-space-4);
  min-width: 0;
  padding: var(--ui-space-5) 0;
  border-top: 1px solid var(--ui-line);
}

[id="providers-view"] .admin-settings-group > header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ui-space-2) var(--ui-space-4);
}

[id="providers-view"] .admin-settings-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ui-space-2) var(--ui-space-4);
}

[id="providers-view"] .admin-settings-group h3 {
  margin: 0;
  color: var(--ui-ink-strong);
  font-size: var(--ui-font-size-md);
}

[id="providers-view"] .admin-settings-param input[type="number"] {
  width: 100%;
}

[id="providers-view"] .admin-settings-param .admin-switch {
  display: flex;
  align-items: center;
  gap: var(--ui-space-2);
  min-height: 32px;
  color: var(--ui-ink);
  font-size: var(--ui-font-size-sm);
}

[id="providers-view"] .admin-settings-params {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
  gap: var(--ui-space-4) var(--ui-space-5);
}

[id="providers-view"] .admin-settings-param {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
  color: var(--ui-ink-soft);
  font-size: var(--ui-font-size-xs);
}

[id="providers-view"] .admin-settings-param .admin-hint {
  margin: 0;
}

/* A feature's panel groups (视频反推: 拆解原片, 编导方案, 复刻剧本, 一键成片, 通用). */
[id="providers-view"] .admin-settings-subgroup {
  display: grid;
  gap: var(--ui-space-3);
  min-width: 0;
}

[id="providers-view"] .admin-settings-subgroup + .admin-settings-subgroup {
  padding-top: var(--ui-space-4);
}

[id="providers-view"] .admin-settings-subgroup h4 {
  margin: 0;
  color: var(--ui-ink-strong);
  font-size: var(--ui-font-size-sm);
  font-weight: var(--ui-font-weight-semibold);
}

[id="providers-view"] .admin-settings-subgroup > .admin-hint {
  margin: 0;
  max-width: var(--ui-measure);
}

[id="providers-view"] .admin-settings-prompts {
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-md);
  background: var(--ui-surface-subtle);
  overflow: hidden;
}

[id="providers-view"] .admin-settings-references {
  margin: var(--ui-space-2) 0 0;
  padding-left: var(--ui-space-5);
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
  line-height: 1.6;
}

/* The shared prompt textarea keeps its side margins inside this section. */
[id="providers-view"] .admin-settings-prompts .assistant-prompt textarea {
  display: block;
  width: calc(100% - 28px);
  margin: var(--ui-space-2) 14px 14px;
}

/* 管理员面板 → AI 配音 (public/voice-admin.js) */
.voice-admin-status,
.voice-admin-samples { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ui-space-3); margin-block: var(--ui-space-4); padding: var(--ui-space-3) var(--ui-space-4); border-radius: var(--ui-radius-md); background: var(--ui-warning-soft); color: var(--ui-warning); font-size: var(--ui-font-size-sm); }
.voice-admin-status > span { display: flex; align-items: center; gap: var(--ui-space-2); }
.voice-admin-status.is-ready { background: var(--ui-success-soft); color: var(--ui-success); }
.voice-admin-samples { background: var(--ui-surface-subtle); color: var(--ui-ink); }
.voice-admin-settings { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--ui-space-4); }
.voice-admin-settings label { display: grid; gap: var(--ui-space-1); color: var(--ui-ink-soft); font-size: var(--ui-font-size-xs); font-weight: var(--ui-font-weight-medium); }
.voice-admin-settings input { width: 120px; }
.voice-admin-table td small { display: block; color: var(--ui-muted); font-size: var(--ui-font-size-xs); }

}
/* /styles/pages/hub.css */
@layer pages {
/*
 * Pages layer — 全部项目 and the AI 工具 catalog.
 *
 * Projects: lead + 新建项目, the tool task lane (styles/pages/project-tasks.css), one
 * quiet toolbar (search, filters, count) directly above the grid it filters,
 * and media-first project cards. Tools: category sections of white tiles.
 * Cards are opaque white on the canvas with one soft shadow and lift on hover.
 */

/* ---------------- Entry actions (creative-start dialog) ---------------- */
.hub-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ui-space-4);
  margin-bottom: var(--ui-space-7);
}

.hub-action {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 2px var(--ui-space-4);
  align-content: center;
  align-items: center;
  min-width: 0;
  padding: var(--ui-space-5);
  border: 0;
  border-radius: var(--ui-radius-lg);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-card);
  color: var(--ui-ink);
  text-align: left;
  white-space: normal;
  transition: box-shadow var(--ui-duration-normal) var(--ui-ease-out), transform var(--ui-duration-normal) var(--ui-ease-out);
}

.hub-action:hover:not(:disabled) {
  border-color: transparent;
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-hover);
  transform: translateY(-2px);
}

.hub-action > svg {
  grid-row: 1 / 3;
  width: 40px;
  height: 40px;
  padding: 9px;
  border-radius: var(--ui-radius-md);
  background: var(--ui-accent-soft);
  color: var(--ui-accent);
}

.hub-action strong {
  grid-column: 2;
  color: var(--ui-ink-strong);
  font-size: var(--ui-font-size-md);
  font-weight: var(--ui-font-weight-semibold);
}

.hub-action span {
  grid-column: 2;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
  line-height: var(--ui-line-height-snug);
}

.hub-action b {
  grid-column: 3;
  grid-row: 1 / 3;
  color: var(--ui-accent);
  font-size: var(--ui-font-size-xs);
  font-weight: var(--ui-font-weight-medium);
}

/* ---------------- Toolbar and pagination ----------------
 * Search stretches (max 420px), the filters size to their content and the
 * count closes the row on the right. */
.projects-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ui-space-3);
  margin: 0 0 var(--ui-space-6);
}

.projects-filters input {
  flex: 1 1 260px;
  min-width: min(220px, 100%);
  max-width: 420px;
  margin: 0;
}

.projects-filters select {
  flex: 0 0 auto;
  width: auto;
  min-width: 128px;
  margin: 0;
}

.projects-filters .ui-collection-count {
  margin-left: auto;
}

.project-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ui-space-3);
  margin-top: var(--ui-space-7);
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
}

[id="projects-page"] {
  min-width: 4ch;
  color: var(--ui-muted);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ---------------- Project cards ----------------
 * Tracks stay at a working ~280–340px card width, so a 1200px page shows
 * four columns. auto-fill keeps early rows from inflating when a filter
 * returns two or three projects. */
.project-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--ui-space-5);
}

.project-card {
  position: relative;
  min-width: 0;
  overflow: visible;
  border: 0;
  border-radius: var(--ui-radius-lg);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-card);
  transition: box-shadow var(--ui-duration-normal) var(--ui-ease-out), transform var(--ui-duration-normal) var(--ui-ease-out);
}

.project-card:hover {
  box-shadow: var(--ui-shadow-hover);
  transform: translateY(-2px);
}

.project-open {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  width: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  text-align: left;
  white-space: normal;
}

.project-open:hover:not(:disabled) {
  border-color: transparent;
  background: transparent;
}

.project-open:active:not(:disabled) {
  transform: none;
}

.project-card-body {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: var(--ui-space-4) var(--ui-space-4) var(--ui-space-4);
}

/* Three typographic layers: name, one-line summary, then state, count and
   time on one weak metadata row. */
.project-card-title {
  color: var(--ui-ink-strong);
  font-size: var(--ui-font-size-md);
  font-weight: var(--ui-font-weight-semibold);
  line-height: var(--ui-line-height-snug);
}

.project-card-goal {
  display: -webkit-box;
  overflow: hidden;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
  line-height: var(--ui-line-height-snug);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.project-card-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0 var(--ui-space-3);
  margin-top: var(--ui-space-2);
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
  font-variant-numeric: tabular-nums;
}

.project-card-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ui-surface);
  color: var(--ui-accent);
}

.project-card-icon svg {
  width: 20px;
  height: 20px;
}

/* Media-first preview: fixed aspect ratio, cover-fit tiles, one collage rule
   per tile count. Corners follow the card because the preview is the first
   child of the open button. */
.project-card-preview {
  position: relative;
  display: grid;
  gap: 2px;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--ui-radius-lg) var(--ui-radius-lg) 0 0;
  background: var(--ui-surface-subtle);
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
}

.project-card-preview[data-count="2"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.project-card-preview[data-count="3"] {
  grid-template: repeat(2, minmax(0, 1fr)) / minmax(0, 2fr) minmax(0, 1fr);
}

.project-card-preview[data-count="3"] > .media-tile:first-child {
  grid-row: 1 / 3;
}

.project-card-preview[data-count="4"] {
  grid-template: repeat(2, minmax(0, 1fr)) / repeat(2, minmax(0, 1fr));
}

.project-card-preview.is-empty {
  align-content: center;
  justify-items: center;
  gap: var(--ui-space-2);
}

.media-tile {
  position: relative;
  display: block;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--ui-surface-muted);
}

.media-tile > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--ui-duration-slow) var(--ui-ease-out);
}

.project-card:hover .media-tile > img {
  transform: scale(1.03);
}

.media-tile-badge {
  position: absolute;
  left: var(--ui-space-2);
  bottom: var(--ui-space-2);
  display: inline-flex;
  align-items: center;
  gap: var(--ui-space-1);
  padding: 2px var(--ui-space-2);
  border-radius: var(--ui-radius-pill);
  background: var(--ui-glass-dark);
  -webkit-backdrop-filter: var(--ui-glass-blur-soft);
  backdrop-filter: var(--ui-glass-blur-soft);
  color: var(--ui-action-on-primary);
  font-size: var(--ui-font-size-2xs);
  font-variant-numeric: tabular-nums;
  line-height: var(--ui-line-height-snug);
}

.media-tile-badge svg {
  width: 10px;
  height: 10px;
  fill: currentcolor;
}

.media-tile-more {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--ui-ink) 48%, transparent);
  color: var(--ui-action-on-primary);
  font-size: var(--ui-font-size-md);
  font-weight: var(--ui-font-weight-semibold);
}

/* Quick actions float on the preview corner as a small glass button. */
.project-card-actions {
  position: absolute;
  top: var(--ui-space-2);
  right: var(--ui-space-2);
  padding: 0;
  border: 0;
  transition: opacity var(--ui-duration-fast) var(--ui-ease-standard);
}

.project-card:has(.ui-actions[open]) {
  z-index: 1;
}

.project-card-actions .ui-actions > summary {
  min-width: 32px;
  min-height: 32px;
  border-radius: 50%;
  background: var(--ui-glass-strong);
  -webkit-backdrop-filter: var(--ui-glass-blur-soft);
  backdrop-filter: var(--ui-glass-blur-soft);
  box-shadow: var(--ui-shadow-1);
  color: var(--ui-ink-soft);
}

.project-card-actions .ui-actions > summary:hover,
.project-card-actions .ui-actions[open] > summary {
  background: var(--ui-surface);
  color: var(--ui-ink-strong);
}

@media (hover: hover) {
  .project-card-actions {
    opacity: 0;
  }

  .project-card:is(:hover, :focus-within) .project-card-actions,
  .project-card-actions:has(.ui-actions[open]) {
    opacity: 1;
  }
}

/* ---------------- 触控目标 ---------------- */
@media (pointer: coarse) {
  .project-card-actions .ui-actions > summary {
    min-width: var(--ui-touch-target);
    min-height: var(--ui-touch-target);
  }
}

/* ---------------- 窄屏 ---------------- */
@media (max-width: 1024px) {
  .hub-actions {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 768px) {
  .projects-filters input {
    flex-basis: 100%;
    max-width: none;
  }

  .projects-filters select {
    flex: 1 1 auto;
  }

  .projects-filters .ui-collection-count {
    width: 100%;
    margin-left: 0;
  }
}

@media (max-width: 480px) {
  .project-cards {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--ui-space-4);
  }

  .hub-action {
    grid-template-columns: 40px minmax(0, 1fr);
    padding: var(--ui-space-4);
  }

  .hub-action b {
    grid-column: 2;
    grid-row: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .project-card:hover,
  .tool-tile:hover:not(:disabled),
  .hub-action:hover:not(:disabled),
  .project-card:hover .media-tile > img {
    transform: none;
  }
}

/* ---------------- AI 工具 catalog ----------------
 * Each category is a section: a 17px title with its one-line summary below,
 * then a grid of white tiles. The whole tile is the hit target. */
.tool-category + .tool-category {
  margin-top: var(--ui-space-8);
}

.tool-category-head {
  display: grid;
  gap: 2px;
  margin-bottom: var(--ui-space-4);
}

.tool-category-head h2 {
  margin: 0;
  color: var(--ui-ink-strong);
  font-size: var(--ui-font-size-lg);
  font-weight: var(--ui-font-weight-semibold);
  line-height: var(--ui-line-height-snug);
}

.tool-category-head p {
  margin: 0;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-sm);
  line-height: var(--ui-line-height-snug);
}

.tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(264px, 1fr));
  gap: var(--ui-space-4);
}

.tool-tile {
  display: flex;
  align-items: center;
  gap: var(--ui-space-4);
  width: 100%;
  min-width: 0;
  min-height: 84px;
  padding: var(--ui-space-4) var(--ui-space-4) var(--ui-space-4) var(--ui-space-5);
  border: 0;
  border-radius: var(--ui-radius-lg);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-card);
  color: var(--ui-ink);
  text-align: left;
  white-space: normal;
  transition: transform var(--ui-duration-normal) var(--ui-ease-out), box-shadow var(--ui-duration-normal) var(--ui-ease-out);
}

.tool-tile:hover:not(:disabled) {
  border-color: transparent;
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-hover);
  transform: translateY(-2px);
}

.tool-tile:active:not(:disabled) {
  transform: scale(0.99);
}

.tool-tile-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--ui-radius-md);
  background: var(--ui-accent-soft);
  color: var(--ui-accent);
}

.tool-tile-icon svg {
  width: 22px;
  height: 22px;
}

.tool-tile-copy {
  display: grid;
  flex: 1 1 auto;
  gap: 2px;
  min-width: 0;
}

.tool-tile-copy strong {
  color: var(--ui-ink-strong);
  font-size: var(--ui-font-size-md);
  font-weight: var(--ui-font-weight-semibold);
  line-height: var(--ui-line-height-snug);
  overflow-wrap: anywhere;
}

.tool-tile-copy > span {
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
  line-height: var(--ui-line-height-snug);
}

.tool-tile-arrow {
  display: grid;
  flex: 0 0 auto;
  color: var(--ui-ink-faint);
  transition: color var(--ui-duration-fast) var(--ui-ease-standard), transform var(--ui-duration-fast) var(--ui-ease-standard);
}

.tool-tile-arrow svg {
  width: 18px;
  height: 18px;
}

.tool-tile:hover:not(:disabled) .tool-tile-arrow {
  color: var(--ui-accent);
  transform: translateX(2px);
}

@media (max-width: 480px) {
  .tool-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

}
/* /styles/pages/project-tasks.css */
@layer pages {
/*
 * Pages layer — 全部项目's AI tool task lane (public/project-task-strip.js).
 *
 * Two groups under their own headings: in-flight tasks, then tasks that need
 * someone. A card is an open button (name, tool · time, one reason line) beside
 * its status badge and at most one action; it never nests buttons.
 */
.project-task-section {
  margin: 0 0 var(--ui-space-8);
}

.project-task-section .section-heading + .project-task-list,
.project-task-hint + .project-task-list {
  margin-top: var(--ui-space-3);
}

.project-task-section .project-task-list + .section-heading {
  margin-top: var(--ui-space-6);
}

.project-task-section .section-heading .text-button svg {
  width: 16px;
  height: 16px;
  margin-left: -2px;
}

.project-task-hint {
  margin: var(--ui-space-1) 0 0;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
}

.project-task-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--ui-space-3);
}

.project-task-card {
  display: flex;
  align-items: center;
  gap: var(--ui-space-3);
  min-width: 0;
  padding: var(--ui-space-3) var(--ui-space-4);
  border-radius: var(--ui-radius-lg);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-card);
}

.project-task-card:hover {
  box-shadow: var(--ui-shadow-hover);
}

/* 打开区占满剩余宽度：整块可点进生成记录，文字不撑破卡片。 */
.project-task-open {
  display: grid;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  height: auto;
  gap: 2px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--ui-ink);
  text-align: left;
  white-space: normal;
}

.project-task-open:hover:not(:disabled) {
  background: transparent;
}

.project-task-open strong {
  overflow: hidden;
  color: var(--ui-ink-strong);
  font-size: var(--ui-font-size-sm);
  font-weight: var(--ui-font-weight-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-task-open small {
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
}

.project-task-open .project-task-reason {
  color: var(--ui-ink-soft);
}

.project-task-card[data-tone="warning"] .project-task-reason {
  color: var(--ui-warning);
}

.project-task-side {
  display: grid;
  flex: 0 0 auto;
  justify-items: end;
  gap: var(--ui-space-2);
}

.project-task-side button {
  min-height: 32px;
  height: 32px;
  padding: 0 var(--ui-space-3);
  font-size: var(--ui-font-size-xs);
}

@media (pointer: coarse) {
  .project-task-side button {
    min-height: var(--ui-touch-target);
    height: var(--ui-touch-target);
  }
}

@media (max-width: 480px) {
  .project-task-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

}
/* /styles/pages/director.css */
@layer pages {
/*
 * Pages layer — 视频反推复制 (reference-video replication), page frame.
 * Composition only: a lead line with project actions, the shared stepper and
 * a full-height workspace of three cards — materials, the script card shell
 * (tabs, empty states) and the AI 编导 panel. The page itself never scrolls:
 * each card scrolls on its own. Narrower pages stack materials over the
 * script beside the AI panel, then fall back to one column that scrolls as a
 * whole. The script workspace lives in director-script.css, the AI panel in
 * director-assistant.css.
 */
.director-view {
  display: flex;
  flex-direction: column;
  padding-bottom: var(--ui-space-6);
  overflow: hidden;
  scrollbar-gutter: auto;
}

.director-view > .ui-page {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  width: 100%;
  max-width: var(--ui-page-width-wide);
  min-height: 0;
}

.director-view [data-director-root] {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--ui-space-4);
  min-height: 0;
}

.director-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--ui-space-3) var(--ui-space-5);
}

.director-head-actions {
  display: flex;
  align-items: center;
  gap: var(--ui-space-2);
  min-width: 0;
}

/* 新建项目 sits beside the project switch at the same full control height. */
.director-head-actions .director-new {
  gap: var(--ui-space-2);
  min-height: 48px;
  padding: 0 var(--ui-space-5);
}

.director-steps {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-sm);
  list-style: none;
}

.director-layout {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: 296px minmax(0, 1fr) 340px;
  gap: var(--ui-space-4);
  min-height: 0;
}

/* Three columns: the wrapper steps aside so its two cards are grid columns. */
.director-main {
  display: contents;
}

.director-panel {
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-5);
  min-width: 0;
  min-height: 0;
  padding: var(--ui-space-6);
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: var(--ui-radius-lg);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-card);
}

.director-inputs {
  container: director-inputs / inline-size;
}

.director-output {
  gap: var(--ui-space-3);
}

.director-panel-title,
.director-section-title {
  margin: 0;
  color: var(--ui-ink-strong);
  font-size: var(--ui-font-size-lg);
  font-weight: var(--ui-font-weight-semibold);
}

.director-field {
  display: grid;
  gap: var(--ui-space-2);
  min-width: 0;
}

.director-field-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ui-space-2);
  color: var(--ui-ink-soft);
  font-size: var(--ui-font-size-xs);
  font-weight: var(--ui-font-weight-medium);
}

.director-field-head em {
  color: var(--ui-muted);
  font-style: normal;
  font-weight: var(--ui-font-weight-regular);
}

.director-field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ui-space-4);
}

/* Target duration (time bar): the value sits in the field head, the scale under the track. */
.director-duration input[type="range"] {
  width: 100%;
  margin: 0;
}

.director-duration-scale {
  display: flex;
  justify-content: space-between;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
}

.director-field-head [data-director-duration-value] {
  color: var(--ui-ink);
  font-weight: var(--ui-font-weight-semibold);
}

.director-duration-apply {
  justify-self: start;
}

/* Re-time the script, and hand a value back to the director. */
.director-duration-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ui-space-2) var(--ui-space-4);
}

.director-duration > .text-button {
  justify-self: start;
}

/* AI 定: the director chose this value; it goes once the user drags. */
.director-field-head em .badge {
  margin-right: var(--ui-space-1);
}

.director-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: var(--ui-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.director-tile {
  position: relative;
  display: grid;
  gap: var(--ui-space-1);
  min-width: 0;
}

.director-tile-thumb {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--ui-radius-sm);
  background: var(--ui-surface-muted);
  color: var(--ui-muted);
}

.director-tile-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.director-chip {
  position: absolute;
  right: var(--ui-space-1);
  bottom: var(--ui-space-1);
  padding: 0 var(--ui-space-2);
  border-radius: var(--ui-radius-pill);
  background: var(--ui-glass-dark);
  color: var(--ui-action-on-primary);
  font-size: var(--ui-font-size-2xs);
  font-variant-numeric: tabular-nums;
}

.director-tile-name {
  overflow: hidden;
  color: var(--ui-ink);
  font-size: var(--ui-font-size-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.director-tile-remove {
  position: absolute;
  top: var(--ui-space-1);
  right: var(--ui-space-1);
  width: 28px;
  height: 28px;
  min-height: 28px;
  background: var(--ui-surface-overlay);
}

.director-tile-remove svg {
  width: 14px;
  height: 14px;
}

.director-dropzone {
  display: flex;
  align-items: center;
  gap: var(--ui-space-4);
  width: 100%;
  min-height: 120px;
  padding: var(--ui-space-5);
  border: 1px dashed var(--ui-line-strong);
  border-radius: var(--ui-radius-lg);
  background: var(--ui-surface-subtle);
  box-shadow: none;
  color: var(--ui-ink);
  text-align: left;
  white-space: normal;
}

.director-dropzone:hover:not(:disabled) {
  border-color: var(--ui-accent-edge);
  background: var(--ui-accent-wash);
}

.director-dropzone-small {
  min-height: 64px;
  padding: var(--ui-space-3) var(--ui-space-4);
}

.director-dropzone-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ui-surface);
  color: var(--ui-accent);
}

.director-dropzone-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.director-dropzone-copy strong {
  color: var(--ui-ink-strong);
  font-size: var(--ui-font-size-sm);
  font-weight: var(--ui-font-weight-semibold);
}

.director-dropzone-copy small,
.director-hint,
.director-note,
.director-check-facts {
  margin: 0;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
  line-height: var(--ui-line-height-snug);
}

.director-requirement,
.director-revise-row textarea {
  width: 100%;
  min-height: 72px;
  resize: vertical;
}

/* The analysis action stays in reach while the materials card scrolls. A
   sticky box stops at the scroller's padding edge, so it sits in the card's
   bottom padding (negative inset) and covers the content scrolling beneath. */
.director-actions {
  position: sticky;
  bottom: calc(var(--ui-space-6) * -1);
  z-index: 1;
  display: grid;
  gap: var(--ui-space-2);
  margin-bottom: calc(var(--ui-space-6) * -1);
  padding: var(--ui-space-3) 0 var(--ui-space-6);
  border-top: 1px solid var(--ui-line);
  background: var(--ui-surface);
}

.director-primary {
  width: 100%;
  min-height: 48px;
  font-size: var(--ui-font-size-md);
}

.director-note {
  text-align: center;
}

/* Status strips: tinted wells without borders. */
.director-strip {
  display: flex;
  align-items: center;
  gap: var(--ui-space-3);
  margin: 0;
  padding: var(--ui-space-3) var(--ui-space-4);
  border-radius: var(--ui-radius-md);
  color: var(--ui-ink);
  font-size: var(--ui-font-size-sm);
}

.director-strip > div {
  display: grid;
  flex: 1 1 auto;
  gap: 2px;
  min-width: 0;
}

.director-strip small {
  color: var(--ui-ink-soft);
  font-size: var(--ui-font-size-xs);
}

.director-strip.is-info {
  background: var(--ui-accent-wash);
}

.director-strip.is-warning {
  background: var(--ui-warning-soft);
}

.director-strip.is-danger {
  background: var(--ui-danger-soft);
}

.director-spinner {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border: 2px solid var(--ui-accent-soft);
  border-top-color: var(--ui-accent);
  border-radius: 50%;
  animation: director-spin 900ms linear infinite;
}

@keyframes director-spin {
  to {
    transform: rotate(360deg);
  }
}

.director-tabs {
  align-self: start;
  max-width: 100%;
}

.director-tabs small {
  margin-left: var(--ui-space-1);
  color: var(--ui-muted);
  font-size: var(--ui-font-size-2xs);
}

.director-tabpanel {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--ui-space-3);
  min-width: 0;
  min-height: 0;
}

/* 首次读取项目时剧本栏的骨架：沿用共享 .ui-skeleton 的 shimmer。 */
.director-skeleton {
  display: grid;
  gap: var(--ui-space-3);
  min-height: 280px;
  align-content: start;
  padding: var(--ui-space-4) 0;
}

.director-skeleton .ui-skeleton:nth-child(even) {
  width: 72%;
}

.director-skeleton .ui-skeleton:last-child {
  width: 48%;
}

.director-empty {
  display: grid;
  flex: 1 1 auto;
  align-content: center;
  justify-items: center;
  gap: var(--ui-space-2);
  min-height: 280px;
  padding: var(--ui-space-7);
  border-radius: var(--ui-radius-lg);
  background: var(--ui-surface-subtle);
  color: var(--ui-muted);
  text-align: center;
}

.director-empty strong {
  color: var(--ui-ink-strong);
  font-size: var(--ui-font-size-lg);
  font-weight: var(--ui-font-weight-semibold);
}

.director-empty p {
  max-width: 34ch;
  margin: 0;
  font-size: var(--ui-font-size-sm);
}

.director-empty-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: var(--ui-space-1);
  border-radius: 50%;
  background: var(--ui-surface);
  color: var(--ui-accent);
}

/* A narrow materials column stacks the image slots and slims the drop zones. */
@container director-inputs (max-width: 360px) {
  .director-field-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .director-tiles {
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
    gap: var(--ui-space-2);
  }

  .director-dropzone {
    min-height: 72px;
    padding: var(--ui-space-3) var(--ui-space-4);
  }

  .director-dropzone-small {
    min-height: 56px;
  }
}

/* Two columns: materials over the script, scrolling together beside the AI panel. */
@container secondary-page (max-width: 1099px) {
  .director-layout {
    grid-template-columns: minmax(0, 1fr) 320px;
  }

  .director-main {
    display: flex;
    flex-direction: column;
    gap: var(--ui-space-4);
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .director-main > .director-panel {
    flex: none;
    overflow: visible;
  }

  .director-main .director-tabpanel > .ui-marked-field {
    flex: none;
    min-height: 420px;
  }

  /* The column scroller has no padding: the action sticks to its edge. */
  .director-main .director-actions {
    bottom: 0;
  }
}

/* One column: the workspace scrolls as a whole, the AI panel after the script. */
@container secondary-page (max-width: 759px) {
  .director-view [data-director-root] {
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .director-layout {
    display: flex;
    flex: none;
    flex-direction: column;
  }

  .director-main,
  .director-layout > .director-ai,
  .director-layout .director-ai-scroll {
    overflow: visible;
  }

  .director-ai-foot {
    position: sticky;
    bottom: 0;
    z-index: 1;
    background: var(--ui-surface);
  }
}

@media (max-width: 480px) {
  .director-panel {
    padding: var(--ui-space-5);
  }

  .director-actions {
    bottom: calc(var(--ui-space-5) * -1);
    margin-bottom: calc(var(--ui-space-5) * -1);
    padding-bottom: var(--ui-space-5);
  }

  .director-field-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .director-head-actions {
    width: 100%;
  }

  .director-head-actions .director-new {
    padding: 0 var(--ui-space-3);
  }

  .director-tabs {
    display: flex;
    width: 100%;
  }

  .director-tabs button {
    flex: 1 1 0;
    min-width: 0;
    padding: 0 var(--ui-space-2);
  }

  .director-tabs small {
    display: none;
  }
}


/* 一键成片进度: one well per generation, its steps joined like the stepper. */
.director-remakes {
  display: grid;
  gap: var(--ui-space-3);
  margin-top: var(--ui-space-4);
}

.director-remake {
  display: grid;
  gap: var(--ui-space-3);
  padding: var(--ui-space-3) var(--ui-space-4);
  border-radius: var(--ui-radius-md);
  background: var(--ui-surface-subtle);
}

.director-remake-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ui-space-2);
}

.director-remake-head strong {
  color: var(--ui-ink-strong);
  font-size: var(--ui-font-size-sm);
}

.director-remake-head small {
  margin-left: auto;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
}

.director-remake-steps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ui-space-2) var(--ui-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.director-remake-steps li {
  display: flex;
  align-items: center;
  gap: var(--ui-space-2);
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
}

.director-remake-steps li > span {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--ui-line-strong);
  border-radius: 50%;
}

.director-remake-steps li > span svg {
  width: 12px;
  height: 12px;
}

.director-remake-steps li.is-done {
  color: var(--ui-ink);
}

.director-remake-steps li.is-done > span {
  border-color: var(--ui-success);
  background: var(--ui-success);
  color: var(--ui-surface);
}

.director-remake-steps li.is-current {
  color: var(--ui-accent-strong);
  font-weight: var(--ui-font-weight-medium);
}

.director-remake-steps li.is-current > span {
  border-color: var(--ui-accent);
  border-top-color: transparent;
  animation: director-spin 0.9s linear infinite;
}

.director-remake-steps li.is-failed {
  color: var(--ui-danger);
}

.director-remake-steps li.is-failed > span {
  border-color: var(--ui-danger);
  background: var(--ui-danger);
  color: var(--ui-surface);
}

.director-remake-steps li small {
  color: var(--ui-muted);
}

.director-remake-notes {
  display: grid;
  gap: var(--ui-space-1);
  margin: 0;
  padding: 0;
  color: var(--ui-ink-soft);
  font-size: var(--ui-font-size-xs);
  list-style: none;
}

.director-remake .director-hint.is-error {
  margin: 0;
  color: var(--ui-danger);
}

.director-remake-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ui-space-2);
}

@media (prefers-reduced-motion: reduce) {
  .director-remake-steps li.is-current > span {
    animation: none;
  }
}

}
/* /styles/pages/director-script.css */
@layer pages {
/*
 * Pages layer — 视频反推复制 script workspace: the editor with its live
 * checks (shots holding a kept highlight are marked), recognition results and
 * the quote / generation dialogs. The page frame lives in director.css, the
 * AI 编导 panel in director-assistant.css.
 */
.director-editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--ui-space-2) var(--ui-space-3);
}

.director-version select {
  max-width: 100%;
}

.director-dirty {
  color: var(--ui-warning);
  font-size: var(--ui-font-size-xs);
  font-weight: var(--ui-font-weight-medium);
}

/* The editor takes the height the script card has left; the marked-field
   wrapper is the flex item and the textarea fills it. */
.director-tabpanel > .ui-marked-field {
  flex: 1 1 auto;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  min-height: 240px;
}

.director-editor {
  flex: 1 1 auto;
  width: 100%;
  min-height: 240px;
  padding: var(--ui-space-4);
  border-radius: var(--ui-radius-md);
  font-size: var(--ui-font-size-sm);
  line-height: var(--ui-line-height-relaxed);
  resize: vertical;
}

/* Legend of the marked facts: each chip counts its boxes and selects the next one. */
.director-marks {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ui-space-2);
}

.director-marks-label {
  color: var(--ui-ink-soft);
  font-size: var(--ui-font-size-xs);
  font-weight: var(--ui-font-weight-medium);
}

.director-mark-chip {
  gap: var(--ui-space-2);
  min-height: 32px;
  padding: 0 var(--ui-space-3);
  border-color: transparent;
  background: var(--ui-fill-1);
  font-size: var(--ui-font-size-xs);
}

.director-mark-chip b {
  color: var(--ui-ink-strong);
  font-variant-numeric: tabular-nums;
}

.director-mark-swatch {
  width: 12px;
  height: 12px;
  border-radius: var(--ui-radius-xs);
  background: var(--ui-mark-product);
  box-shadow: 0 0 0 1px var(--ui-mark-product-edge);
}

.director-mark-chip[data-kind="person"] .director-mark-swatch {
  background: var(--ui-mark-person);
  box-shadow: 0 0 0 1px var(--ui-mark-person-edge);
}

.director-mark-chip[data-kind="line"] .director-mark-swatch {
  background: var(--ui-mark-line);
  box-shadow: 0 0 0 1px var(--ui-mark-line-edge);
}

@media (pointer: coarse) {
  .director-mark-chip {
    min-height: var(--ui-touch-target);
  }
}

.director-check {
  display: grid;
  gap: var(--ui-space-2);
  padding: var(--ui-space-3) var(--ui-space-4);
  border-radius: var(--ui-radius-md);
  background: var(--ui-surface-subtle);
}

/* Facts and the check result share the first line. */
.director-check-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--ui-space-1) var(--ui-space-3);
}

.director-outline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ui-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.director-outline li {
  display: inline-flex;
  align-items: baseline;
  gap: var(--ui-space-1);
  padding: 2px var(--ui-space-3);
  border-radius: var(--ui-radius-pill);
  background: var(--ui-surface);
  font-size: var(--ui-font-size-xs);
}

.director-outline span {
  color: var(--ui-muted);
  font-variant-numeric: tabular-nums;
}

.director-outline em {
  color: var(--ui-ink-soft);
  font-style: normal;
}

.director-outline li.is-highlight {
  align-items: center;
  background: var(--ui-accent-wash);
}

.director-outline svg {
  width: 13px;
  height: 13px;
  color: var(--ui-accent);
}

/* A long script: each segment heads its own row of shots. */
.director-outline li.director-outline-segment {
  flex-basis: 100%;
  padding: var(--ui-space-1) 0 0;
  border-radius: 0;
  background: none;
}

.director-outline li.director-outline-segment:first-child {
  padding-top: 0;
}

.director-issues {
  display: grid;
  gap: var(--ui-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--ui-font-size-xs);
}

.director-issues li,
.director-ok {
  display: flex;
  align-items: flex-start;
  gap: var(--ui-space-2);
  margin: 0;
  font-size: var(--ui-font-size-xs);
}

.director-issues svg,
.director-ok svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}

.director-issues .is-error {
  color: var(--ui-danger);
}

.director-issues .is-warning {
  color: var(--ui-warning);
}

.director-ok {
  color: var(--ui-success);
}

.director-editor-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--ui-space-3);
}

/* The pointer to 生成记录 sits apart from the editor's own actions. */
.director-records {
  margin-right: auto;
}

.director-recognition h3 {
  margin: 0;
  color: var(--ui-ink-strong);
  font-size: var(--ui-font-size-sm);
  font-weight: var(--ui-font-weight-semibold);
}

.director-recognition ol {
  display: grid;
  gap: var(--ui-space-2);
  margin: var(--ui-space-2) 0 0;
  padding: 0;
  list-style: none;
}

.director-recognition li {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: var(--ui-space-3);
  font-size: var(--ui-font-size-sm);
}

.director-recognition li span {
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
  font-variant-numeric: tabular-nums;
}

.director-recognition li p {
  margin: 0;
}

/* Dialog bodies sit inside the shared sheet frame from controls.css. */
dialog.director-dialog-wide {
  width: min(680px, calc(100vw - 32px));
}

.director-dialog-body {
  display: grid;
  gap: var(--ui-space-4);
}

.director-dialog-body h2 {
  margin: 0;
  color: var(--ui-ink-strong);
  font-size: var(--ui-font-size-xl);
  font-weight: var(--ui-font-weight-semibold);
}

.director-dialog-foot {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--ui-space-3);
  margin-top: var(--ui-space-2);
}

.director-dialog-foot button {
  min-width: 96px;
}

.director-quote {
  display: grid;
  gap: var(--ui-space-2);
  margin: 0;
  padding: var(--ui-space-3) var(--ui-space-4);
  border-radius: var(--ui-radius-md);
  background: var(--ui-surface-subtle);
  list-style: none;
}

.director-quote li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ui-space-3);
  font-size: var(--ui-font-size-sm);
}

.director-quote li span {
  display: grid;
}

.director-quote small {
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
}

.director-quote b {
  font-variant-numeric: tabular-nums;
}

.director-quote-total {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ui-space-3) var(--ui-space-6);
  margin: 0;
}

.director-quote-total div {
  display: grid;
  min-width: 0;
}

.director-quote-total dt {
  color: var(--ui-muted);
  font-size: var(--ui-font-size-2xs);
}

.director-quote-total dd {
  margin: 0;
  color: var(--ui-ink-strong);
  font-size: var(--ui-font-size-sm);
  font-weight: var(--ui-font-weight-semibold);
  font-variant-numeric: tabular-nums;
}

.director-quote-total dd small {
  display: block;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-2xs);
  font-weight: var(--ui-font-weight-regular);
}

.director-prompt summary {
  color: var(--ui-accent-strong);
  font-size: var(--ui-font-size-sm);
  cursor: pointer;
}

/* A long script's prompt, one heading per segment. */
.director-prompt h4 {
  margin: var(--ui-space-3) 0 0;
  color: var(--ui-ink-soft);
  font-size: var(--ui-font-size-xs);
  font-weight: var(--ui-font-weight-semibold);
}

.director-prompt pre {
  max-height: 260px;
  margin: var(--ui-space-2) 0 0;
  padding: var(--ui-space-3);
  overflow: auto;
  border-radius: var(--ui-radius-md);
  background: var(--ui-surface-subtle);
  font-family: var(--ui-font-family-sans);
  font-size: var(--ui-font-size-xs);
  line-height: var(--ui-line-height-normal);
  white-space: pre-wrap;
}

@media (max-width: 480px) {
  .director-editor {
    min-height: 320px;
  }

  .director-recognition li {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .director-editor-actions button {
    flex: 1 1 auto;
  }
}

/* 生成成片 (views/replication-remake.js): the music, dubbing and caption
   switches, then the voices and the captions (preview beside the controls)
   for the ones switched on, then the fees. */
dialog.director-remake-dialog {
  width: min(760px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  overflow: auto;
}

.director-remake-head {
  display: grid;
  gap: var(--ui-space-1);
}

.director-remake-head .director-hint {
  margin: 0;
}

.director-remake-grid {
  display: grid;
  gap: var(--ui-space-5);
}

.director-remake-section {
  display: grid;
  gap: var(--ui-space-3);
  min-width: 0;
}

.director-remake-section h3 {
  margin: 0;
  color: var(--ui-ink-strong);
  font-size: var(--ui-font-size-lg);
  font-weight: var(--ui-font-weight-semibold);
}

.director-remake-roles {
  margin: 0;
  padding: 0;
  list-style: none;
}

.director-remake-role {
  grid-template-columns: minmax(72px, 0.8fr) minmax(0, 1.2fr) auto;
}

.director-remake-role-name {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.director-remake-role-name strong {
  overflow: hidden;
  color: var(--ui-ink);
  font-size: var(--ui-font-size-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.director-remake-role-name small {
  overflow: hidden;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.director-remake-caption {
  display: grid;
  grid-template-columns: minmax(96px, 150px) minmax(0, 1fr);
  gap: var(--ui-space-4);
  align-items: start;
}

.director-remake-stage {
  --vt-stage-height: 260px;
}

.director-remake-stage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.director-remake-options {
  display: grid;
  gap: var(--ui-space-2);
}

.director-remake-option {
  display: grid;
  gap: var(--ui-space-1);
  padding: var(--ui-space-3) var(--ui-space-4);
  border-radius: var(--ui-radius-md);
  background: var(--ui-surface-subtle);
}

.director-remake-option .director-hint {
  margin: 0;
}

@media (max-width: 768px) {
  .director-remake-caption {
    grid-template-columns: minmax(0, 1fr);
  }

  .director-remake-stage {
    --vt-stage-height: 220px;
  }
}

}
/* /styles/pages/director-assistant.css */
@layer pages {
/*
 * Pages layer — 视频反推复制 AI 编导 panel: the conversation thread, the
 * 待确认 card (highlight candidates with their 是 / 否 choice, questions with
 * 暂不回答), follow-up questions, the thinking status and the composer. The
 * panel is a card whose thread scrolls between a fixed head and action area;
 * the card inside the thread is a well, its items separated by hairlines.
 */
.director-ai {
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.director-ai-head {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--ui-space-3);
  padding: var(--ui-space-5) var(--ui-space-5) var(--ui-space-3);
}

.director-ai-scroll {
  display: grid;
  flex: 1 1 auto;
  align-content: start;
  gap: var(--ui-space-4);
  min-height: 0;
  padding: var(--ui-space-1) var(--ui-space-5) var(--ui-space-5);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.director-ai-scroll > [data-region] {
  display: grid;
  gap: var(--ui-space-4);
  min-width: 0;
}

.director-ai-scroll > [data-region]:empty {
  display: none;
}

.director-ai-foot {
  display: grid;
  flex: none;
  gap: var(--ui-space-2);
  padding: var(--ui-space-3) var(--ui-space-5) var(--ui-space-5);
  border-top: 1px solid var(--ui-line);
}

.director-ai-foot > .primary {
  width: 100%;
  min-height: 48px;
}

.director-ai-intro {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--ui-space-2);
  min-height: 240px;
  padding: var(--ui-space-6) var(--ui-space-2);
  color: var(--ui-muted);
  text-align: center;
}

.director-ai-intro strong {
  color: var(--ui-ink-strong);
  font-size: var(--ui-font-size-lg);
  font-weight: var(--ui-font-weight-semibold);
}

.director-ai-intro p {
  max-width: 30ch;
  margin: 0;
  font-size: var(--ui-font-size-sm);
}

/* Conversation: AI on the left in grey, the user on the right in accent wash. */
.director-messages {
  display: grid;
  gap: var(--ui-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.director-message {
  display: grid;
  justify-items: start;
  gap: var(--ui-space-1);
  min-width: 0;
}

.director-message.is-user {
  justify-items: end;
}

.director-message-who {
  display: flex;
  align-items: baseline;
  gap: var(--ui-space-2);
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
  font-weight: var(--ui-font-weight-medium);
}

.director-message-who small {
  font-size: var(--ui-font-size-xs);
  font-weight: var(--ui-font-weight-regular);
}

/* The reply itself; cards inside a message (编导决策) style their own text. */
.director-message > p {
  max-width: 100%;
  margin: 0;
  padding: var(--ui-space-2) var(--ui-space-3);
  border-radius: var(--ui-radius-md);
  background: var(--ui-surface-subtle);
  color: var(--ui-ink);
  font-size: var(--ui-font-size-sm);
  line-height: var(--ui-line-height-snug);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.director-message.is-user > p {
  background: var(--ui-accent-wash);
}

.director-placements {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ui-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.director-placements li {
  display: inline-flex;
  align-items: center;
  gap: var(--ui-space-1);
  padding: 2px var(--ui-space-3);
  border-radius: var(--ui-radius-pill);
  background: var(--ui-accent-wash);
  color: var(--ui-ink);
  font-size: var(--ui-font-size-xs);
}

.director-placements svg {
  width: 13px;
  height: 13px;
  color: var(--ui-accent);
}

.director-placements b {
  color: var(--ui-accent-strong);
  font-weight: var(--ui-font-weight-semibold);
}

/* 待确认 and follow-up questions: one well, items separated by hairlines. */
.director-confirm {
  display: grid;
  gap: var(--ui-space-4);
  padding: var(--ui-space-4);
  border-radius: var(--ui-radius-md);
  background: var(--ui-surface-subtle);
}

.director-confirm-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ui-space-3);
}

.director-confirm-head h3 {
  margin: 0;
  color: var(--ui-ink-strong);
  font-size: var(--ui-font-size-md);
  font-weight: var(--ui-font-weight-semibold);
}

.director-confirm-head > span {
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
  font-variant-numeric: tabular-nums;
}

.director-confirm-group {
  display: grid;
  gap: var(--ui-space-2);
}

.director-confirm-group h4,
.director-confirm-label {
  display: grid;
  gap: 2px;
  margin: 0;
  color: var(--ui-ink-strong);
  font-size: var(--ui-font-size-sm);
  font-weight: var(--ui-font-weight-semibold);
}

.director-confirm-group h4 small,
.director-confirm-label small {
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
  font-weight: var(--ui-font-weight-regular);
}

.director-highlights {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.director-highlight {
  display: grid;
  gap: var(--ui-space-1);
  padding: var(--ui-space-3) 0;
  border-top: 1px solid var(--ui-line);
}

.director-highlight:first-child {
  padding-top: var(--ui-space-1);
  border-top: 0;
}

.director-highlight-meta {
  display: flex;
  align-items: center;
  gap: var(--ui-space-2);
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
  font-variant-numeric: tabular-nums;
}

.director-highlight-kind {
  padding: 1px var(--ui-space-2);
  border-radius: var(--ui-radius-pill);
  background: var(--ui-fill-1);
  color: var(--ui-ink-soft);
  font-size: var(--ui-font-size-2xs);
  font-weight: var(--ui-font-weight-medium);
}

.director-highlight strong {
  color: var(--ui-ink-strong);
  font-size: var(--ui-font-size-sm);
  font-weight: var(--ui-font-weight-semibold);
}

.director-highlight.is-kept strong {
  color: var(--ui-accent-strong);
}

.director-highlight p {
  margin: 0;
  color: var(--ui-ink);
  font-size: var(--ui-font-size-sm);
  line-height: var(--ui-line-height-snug);
}

.director-highlight .director-highlight-note {
  color: var(--ui-ink-soft);
  font-size: var(--ui-font-size-xs);
}

.director-highlight-note span {
  margin-right: var(--ui-space-2);
  color: var(--ui-muted);
}

/* A scene the director picked: its picture beside the place it shows. */
.director-scene {
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: start;
  gap: var(--ui-space-3);
}

.director-scene > div {
  display: grid;
  gap: var(--ui-space-1);
}

.director-scene-picture {
  display: grid;
  width: 56px;
  aspect-ratio: 3 / 4;
  place-items: center;
  border-radius: var(--ui-radius-sm);
  background: var(--ui-fill-1);
  color: var(--ui-muted);
  object-fit: cover;
}

.director-choice {
  display: flex;
  width: 100%;
  margin-top: var(--ui-space-1);
}

.director-choice button {
  flex: 1 1 0;
  min-width: 0;
  padding: 0 var(--ui-space-2);
}

.director-choice button[aria-pressed="true"]:first-child {
  color: var(--ui-accent-strong);
}

.director-question-list {
  display: grid;
  gap: var(--ui-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.director-question-list li {
  display: grid;
  gap: var(--ui-space-2);
}

.director-question-list small {
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
}

.director-confirm-group > textarea {
  width: 100%;
  min-height: 56px;
  resize: vertical;
  background: var(--ui-surface);
}

/* AI 思考中: the current step, and for an analysis the chain it walks. */
.director-thinking {
  display: grid;
  gap: var(--ui-space-3);
  padding: var(--ui-space-3) var(--ui-space-4);
  border-radius: var(--ui-radius-md);
  background: var(--ui-accent-wash);
}

.director-thinking-head {
  display: flex;
  align-items: center;
  gap: var(--ui-space-3);
}

.director-thinking-head > div {
  display: grid;
  flex: 1 1 auto;
  gap: 2px;
  min-width: 0;
}

.director-thinking-head strong {
  color: var(--ui-ink-strong);
  font-size: var(--ui-font-size-sm);
  font-weight: var(--ui-font-weight-semibold);
}

.director-thinking-head small {
  color: var(--ui-ink-soft);
  font-size: var(--ui-font-size-xs);
}

.director-chain {
  display: grid;
  gap: var(--ui-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.director-chain li {
  display: flex;
  align-items: flex-start;
  gap: var(--ui-space-2);
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
}

.director-chain li > span:first-child {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  border: 1.5px solid var(--ui-line-strong);
  border-radius: 50%;
}

.director-chain li > span:first-child svg {
  width: 10px;
  height: 10px;
}

.director-chain li.is-done > span:first-child {
  border-color: var(--ui-success);
  background: var(--ui-success);
  color: var(--ui-action-on-primary);
}

.director-chain li.is-current {
  color: var(--ui-ink);
  font-weight: var(--ui-font-weight-medium);
}

.director-chain li.is-current > span:first-child {
  border-color: var(--ui-accent);
  border-top-color: var(--ui-accent-soft);
  animation: director-spin 900ms linear infinite;
}

.director-chain small {
  display: block;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
  font-weight: var(--ui-font-weight-regular);
}

.director-composer {
  display: flex;
  align-items: flex-end;
  gap: var(--ui-space-2);
}

.director-composer textarea {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 64px;
  max-height: 160px;
  resize: vertical;
}

.director-composer button {
  flex: 0 0 auto;
}

/* 一键翻拍 编导决策: the director's decisions under its reply, read-only. The
   reply above keeps its line breaks; the card's markup does not. */
.director-direction {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-self: stretch;
  gap: var(--ui-space-3);
  min-width: 0;
  white-space: normal;
  margin-top: var(--ui-space-3);
  padding: var(--ui-space-3) var(--ui-space-4);
  border-radius: var(--ui-radius-md);
  background: var(--ui-surface-subtle);
}

.director-direction-facts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ui-space-2);
  margin: 0;
}

.director-direction-facts div {
  display: grid;
  grid-template-columns: 5em minmax(0, 1fr);
  gap: var(--ui-space-2);
  font-size: var(--ui-font-size-sm);
}

.director-direction-facts dt {
  color: var(--ui-muted);
}

.director-direction-facts dd {
  display: grid;
  gap: 2px;
  margin: 0;
  color: var(--ui-ink-strong);
}

.director-direction-facts dd small {
  color: var(--ui-ink-soft);
  font-size: var(--ui-font-size-xs);
}

.director-direction-group h4 {
  margin: 0 0 var(--ui-space-1);
  color: var(--ui-ink-soft);
  font-size: var(--ui-font-size-xs);
  font-weight: var(--ui-font-weight-medium);
}

.director-direction-more summary {
  color: var(--ui-accent-strong);
  font-size: var(--ui-font-size-xs);
  cursor: pointer;
}

.director-direction-more[open] {
  display: grid;
  gap: var(--ui-space-2);
}

.director-direction-lines {
  display: grid;
  gap: var(--ui-space-1);
  margin: var(--ui-space-2) 0 0;
  padding: 0;
  color: var(--ui-ink);
  font-size: var(--ui-font-size-sm);
  list-style: none;
}

.director-direction-lines span {
  margin-right: var(--ui-space-2);
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
  font-variant-numeric: tabular-nums;
}

/* 确认关键信息: each fact with its three ways of being written. */
.director-fact {
  display: grid;
  gap: var(--ui-space-1);
  padding-top: var(--ui-space-3);
  border-top: 1px solid var(--ui-line);
}

.director-fact:first-child {
  padding-top: 0;
  border-top: 0;
}

.director-fact strong {
  color: var(--ui-ink-strong);
  font-size: var(--ui-font-size-sm);
}

.director-fact p {
  margin: 0;
  color: var(--ui-ink);
  font-size: var(--ui-font-size-sm);
}

.director-fact input {
  width: 100%;
  margin-top: var(--ui-space-1);
  background: var(--ui-surface);
}

.director-fact-modes button[aria-pressed="true"] {
  color: var(--ui-accent-strong);
}

.director-confirm-actions {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--ui-space-2);
}

}
/* /styles/pages/agent.css */
@layer pages {
/*
 * Pages layer — 智能 Agent conversation workspace.
 *
 * Two panes inside the existing shell: a conversation history rail on the left
 * and the conversation column on the right. The rail is part of this page, not
 * the global sidebar, so the shell navigation keeps its single owner. 返回 is
 * owned by the shell topbar, so this file never restyles shell classes.
 *
 * The column fills the workspace edge to edge; reading width is applied to the
 * text itself (hero, message bodies, quick prompts) instead of a centred
 * container. Colour carries information rather than decoration: 爆款社区 rows
 * borrow the shared --ui-segment-* slots so a category reads at a glance, and
 * turn states (stopped / failed) are the only other coloured surfaces.
 */
/* Category slots. One class per sample category, mapped onto the same
   --ui-segment-* set the storyboard timeline uses; rows fall back to the
   neutral slot. Coloured text mixes 55% of the slot with --ui-ink, which keeps
   6.3:1 or better on the 12% tinted surface. */
.agent-cat-1 { --cat: var(--ui-segment-1); }

.agent-cat-2 { --cat: var(--ui-segment-2); }

.agent-cat-3 { --cat: var(--ui-segment-3); }

.agent-cat-4 { --cat: var(--ui-segment-4); }

.agent-cat-5 { --cat: var(--ui-segment-5); }

.agent-cat-6 { --cat: var(--ui-segment-6); }

.agent-view {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}

.agent-view > .ui-page {
  display: flex;
  flex: 1 1 auto;
  width: 100%;
  max-width: none;
  min-height: 0;
  margin: 0;
}

.agent-layout {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 0;
}

/* ---------------- history rail ---------------- */
.agent-history-pane {
  display: flex;
  flex: 0 0 248px;
  flex-direction: column;
  width: 248px;
  min-height: 0;
  border-right: 1px solid var(--ui-line);
  background: var(--ui-surface-sidebar);
}

.agent-history-rail {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  padding: var(--ui-space-4) var(--ui-space-2) var(--ui-space-3);
}

.agent-history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ui-space-2);
  padding-inline: var(--ui-space-2);
}

.agent-history-heading {
  display: inline-flex;
  align-items: center;
  gap: var(--ui-space-2);
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
  font-weight: var(--ui-font-weight-medium);
}

.agent-history-heading svg {
  width: 15px;
  height: 15px;
}

.agent-history-new {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 34px;
  padding: 0 var(--ui-space-3);
  border: 0;
  border-radius: var(--ui-radius-pill);
  background: var(--ui-fill-1);
  color: var(--ui-ink);
  font-size: var(--ui-font-size-xs);
  font-weight: var(--ui-font-weight-medium);
}

.agent-history-new svg {
  width: 14px;
  height: 14px;
}

.agent-history-new:hover:not(:disabled) {
  border-color: transparent;
  background: var(--ui-fill-2);
  color: var(--ui-ink-strong);
}

.agent-history-nav {
  flex: 1 1 auto;
  min-height: 0;
  margin-top: var(--ui-space-3);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.agent-history-group + .agent-history-group {
  margin-top: var(--ui-space-3);
}

.agent-history-group-label {
  margin: 0 0 var(--ui-space-1);
  padding-inline: var(--ui-space-2);
  color: var(--ui-muted);
  font-size: var(--ui-font-size-2xs);
  font-weight: var(--ui-font-weight-medium);
}

.agent-history-list {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.agent-history-item {
  position: relative;
  display: flex;
  align-items: stretch;
  border-radius: var(--ui-radius-md);
}

.agent-history-item:hover,
.agent-history-item:focus-within {
  background: var(--ui-fill-1);
}

/* The active row matches the shell sidebar: a grey capsule plus a semibold
   title, so colour is never the only cue. */
.agent-history-item.is-active {
  background: var(--ui-fill-2);
}

.agent-history-open {
  display: grid;
  flex: 1 1 auto;
  gap: 2px;
  min-width: 0;
  min-height: 48px;
  padding: var(--ui-space-2) var(--ui-space-3);
  border: 0;
  border-radius: var(--ui-radius-md);
  background: transparent;
  color: var(--ui-ink);
  text-align: left;
}

.agent-history-open:hover:not(:disabled) {
  border-color: transparent;
  background: transparent;
}

.agent-history-open:active:not(:disabled) {
  transform: none;
}

.agent-history-title {
  overflow: hidden;
  font-size: var(--ui-font-size-sm);
  font-weight: var(--ui-font-weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-history-item.is-active .agent-history-title {
  color: var(--ui-ink-strong);
  font-weight: var(--ui-font-weight-semibold);
}

.agent-history-meta {
  overflow: hidden;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-2xs);
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-history-delete {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 36px;
  padding: 0;
  border: 0;
  border-radius: var(--ui-radius-md);
  background: transparent;
  color: var(--ui-muted);
  opacity: 0;
}

.agent-history-item:hover .agent-history-delete,
.agent-history-item:focus-within .agent-history-delete {
  opacity: 1;
}

.agent-history-delete:hover {
  color: var(--ui-danger);
}

@media (pointer: coarse) {
  .agent-history-delete {
    opacity: 1;
  }
}

.agent-history-delete svg {
  width: 15px;
  height: 15px;
}

.agent-history-empty {
  display: grid;
  gap: 2px;
  padding: var(--ui-space-4) var(--ui-space-2);
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
  line-height: var(--ui-line-height-snug);
}

.agent-history-empty p {
  margin: 0;
}

.agent-history-note {
  margin: var(--ui-space-2) 0 0;
  padding-inline: var(--ui-space-2);
  color: var(--ui-muted);
  font-size: var(--ui-font-size-2xs);
  line-height: var(--ui-line-height-snug);
}

.agent-history-scrim {
  display: none;
}

/* ---------------- page head ---------------- */
/* The conversation column fills everything between the history rail and the
   browser edge: the workspace is the page, so no centred reading container
   caps it. Reading width is applied to the text elements instead (hero, message
   bodies, quick prompts). 返回 lives in the shell topbar, not here. */
.agent-shell {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  min-height: 0;
  padding-inline: var(--ui-space-7);
}

.agent-page-head {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--ui-space-3);
  min-height: 52px;
  padding-block: var(--ui-space-2);
  border-bottom: 0;
}

.agent-head-actions {
  display: flex;
  align-items: center;
  gap: var(--ui-space-2);
  margin-left: auto;
}

.agent-head-button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 36px;
  padding: 0 var(--ui-space-3);
  border: 0;
  border-radius: var(--ui-radius-pill);
  background: var(--ui-fill-1);
  color: var(--ui-ink-soft);
  font-size: var(--ui-font-size-xs);
  font-weight: var(--ui-font-weight-medium);
}

.agent-head-button svg {
  width: 14px;
  height: 14px;
}

.agent-head-button:hover:not(:disabled) {
  border-color: transparent;
  background: var(--ui-fill-2);
  color: var(--ui-ink-strong);
}

/* The rail owns 新对话 whenever it is visible; the head only offers it (and the
   history drawer trigger) on narrow screens, where the rail is an overlay. */
.agent-history-toggle,
.agent-new-chat {
  display: none;
}

/* Empty state: hero, composer, prompts and the community panel scroll as one
   unit; the community panel is not shown once a conversation starts. */
.agent-shell[data-state="empty"] {
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.agent-shell[data-state="empty"] .agent-center {
  padding-block: clamp(20px, 4vh, 44px) var(--ui-space-7);
}

.agent-shell[data-state="chat"] .agent-center {
  flex: 0 0 auto;
  padding-block: var(--ui-space-2) var(--ui-space-5);
}

.agent-thread {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

/* Short conversations sit against the composer; long ones scroll normally. */
.agent-thread-inner {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: var(--ui-space-6);
  margin-top: auto;
  padding-block: var(--ui-space-5) var(--ui-space-6);
  padding-inline: var(--ui-space-2);
}

/* Reading measure: the hero, composer and conversation share one centred
   column; the community panel below may use the full width. */
.agent-center {
  width: 100%;
}

.agent-composer-dock,
.agent-thread-inner {
  width: 100%;
  max-width: 820px;
  margin-inline: auto;
}

.agent-community {
  max-width: 1120px;
  margin-inline: auto;
}

.agent-hero {
  max-width: 640px;
  margin: 0 auto var(--ui-space-6);
  text-align: center;
}

.agent-hero h2 {
  margin: 0 0 var(--ui-space-2);
  color: var(--ui-ink-strong);
  font-size: var(--ui-font-size-3xl);
  font-weight: var(--ui-font-weight-semibold);
  line-height: var(--ui-line-height-tight);
  letter-spacing: var(--ui-letter-spacing-cjk);
}

.agent-hero p {
  margin: 0;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-md);
  line-height: var(--ui-line-height-normal);
}

/* ---------------- composer ---------------- */
.agent-composer-wrap {
  width: 100%;
}

.agent-composer {
  padding: var(--ui-space-4) var(--ui-space-4) var(--ui-space-3) var(--ui-space-5);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-xl);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-3);
  transition: border-color var(--ui-duration-fast) var(--ui-ease-standard),
    box-shadow var(--ui-duration-fast) var(--ui-ease-standard);
}

.agent-composer:focus-within {
  border-color: var(--ui-focus);
  box-shadow: var(--ui-shadow-focus);
}

.agent-composer.is-dragging {
  border-color: var(--ui-accent);
  background: var(--ui-accent-wash);
}

/* The strip appears only while something is attached, between the text field
   and the toolbar, so the empty composer is a single quiet input surface. */
.agent-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ui-space-2);
  padding: var(--ui-space-3) 2px var(--ui-space-1);
  border-top: 1px solid var(--ui-line);
  margin-top: var(--ui-space-1);
}

.agent-attachments[hidden] {
  display: none;
}

.agent-attachment {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-md);
  background: var(--ui-surface-subtle);
  overflow: hidden;
}

.agent-attachment--image {
  width: 64px;
  height: 64px;
  justify-content: center;
  overflow: visible;
}

.agent-attachment--image img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  border-radius: calc(var(--ui-radius-md) - 1px);
  object-fit: cover;
}

.agent-attachment-fallback {
  position: relative;
  z-index: 0;
}

.agent-attachment--video {
  width: 260px;
  height: 64px;
  gap: var(--ui-space-2);
  padding-right: var(--ui-touch-target);
}

.agent-attachment--image.is-uploading,
.agent-attachment--image.is-error,
.agent-attachment--video.is-uploading,
.agent-attachment--video.is-error {
  width: 260px;
  height: 64px;
  justify-content: flex-start;
  padding-right: var(--ui-space-2);
  background: var(--ui-glass-strong);
}

.agent-attachment.is-uploading .agent-attachment-glyph,
.agent-attachment.is-error .agent-attachment-glyph {
  width: 44px;
  height: 62px;
}

.agent-attachment.is-uploading > .agent-attachment-remove,
.agent-attachment.is-error .agent-attachment-actions .agent-attachment-remove {
  position: static;
  width: 28px;
  height: 28px;
  margin-left: var(--ui-space-1);
  background: transparent;
  transform: none;
}

.agent-attachment.is-uploading .agent-attachment-remove::before,
.agent-attachment.is-error .agent-attachment-remove::before {
  display: none;
}

.agent-attachment--video img {
  position: absolute;
  top: 1px;
  left: 1px;
  z-index: 1;
  width: 62px;
  height: 62px;
  object-fit: cover;
}

.agent-attachment-glyph {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 64px;
  height: 62px;
  color: var(--ui-muted);
}

.agent-attachment-glyph svg {
  width: 20px;
  height: 20px;
}

.agent-attachment-copy {
  display: grid;
  flex: 1 1 auto;
  gap: 2px;
  min-width: 0;
  padding: 0 var(--ui-space-2);
}

.agent-attachment-copy strong {
  overflow: hidden;
  color: var(--ui-ink);
  font-size: var(--ui-font-size-xs);
  font-weight: var(--ui-font-weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-attachment-copy span {
  color: var(--ui-muted);
  font-size: var(--ui-font-size-2xs);
}

.agent-upload-progress {
  width: 100%;
  height: 3px;
  accent-color: var(--ui-accent);
}

.agent-attachment-actions {
  display: flex;
  align-items: center;
  gap: var(--ui-space-1);
  padding-right: var(--ui-space-2);
}

.agent-attachment-name {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  color: var(--ui-ink);
  font-size: var(--ui-font-size-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-attachment-duration {
  flex: 0 0 auto;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-2xs);
  font-variant-numeric: tabular-nums;
}

.agent-attachment-remove {
  position: absolute;
  top: 50%;
  right: 2px;
  display: grid;
  place-items: center;
  width: var(--ui-touch-target);
  height: var(--ui-touch-target);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ui-muted);
  transform: translateY(-50%);
}

.agent-attachment--image .agent-attachment-remove {
  top: -10px;
  right: -10px;
  z-index: 3;
  width: var(--ui-touch-target);
  height: var(--ui-touch-target);
  background: transparent;
  transform: none;
}

.agent-attachment--image .agent-attachment-remove::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 22px;
  border: 1px solid var(--ui-line);
  border-radius: 50%;
  background: var(--ui-glass-strong);
  content: '';
  transform: translate(-50%, -50%);
}

.agent-attachment--video .agent-attachment-remove {
  z-index: 3;
}

.agent-attachment-remove svg {
  position: relative;
  z-index: 1;
  width: 13px;
  height: 13px;
}

.agent-attachment-remove:hover {
  color: var(--ui-ink);
}

.agent-attachment--image .agent-attachment-remove:hover {
  background: transparent;
  color: var(--ui-danger);
}

.agent-attachment--image .agent-attachment-remove:hover::before {
  border-color: var(--ui-danger);
  background: var(--ui-danger-soft);
}

.agent-input-wrap {
  position: relative;
}

.agent-input-wrap textarea {
  display: block;
  width: 100%;
  min-height: 76px;
  max-height: 200px;
  padding: var(--ui-space-2) 56px var(--ui-space-1) 2px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ui-ink);
  font-size: var(--ui-font-size-md);
  line-height: var(--ui-line-height-normal);
  resize: none;
}

.agent-input-wrap textarea::placeholder {
  color: var(--ui-ink-placeholder);
}

.agent-counter {
  position: absolute;
  right: 0;
  bottom: 2px;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-2xs);
  font-variant-numeric: tabular-nums;
}

.agent-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ui-space-3);
  margin-top: var(--ui-space-1);
  padding-top: var(--ui-space-3);
  border-top: 1px solid var(--ui-line);
}

.agent-toolbar-tools {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: var(--ui-space-2);
  min-width: 0;
}

/* Image and reference-video entry points are quiet icon tools; the model and
   parameter pills carry the current value and stay visually heavier. */
.agent-tool {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 32px;
  padding: 0 var(--ui-space-2);
  border: 1px solid transparent;
  border-radius: var(--ui-radius-pill);
  background: transparent;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
  font-weight: var(--ui-font-weight-medium);
  white-space: nowrap;
}

.agent-tool svg {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
}

.agent-tool:hover:not(:disabled) {
  border-color: transparent;
  background: var(--ui-fill-1);
  color: var(--ui-ink-strong);
}

.agent-tool:disabled {
  color: var(--ui-ink-faint);
  cursor: not-allowed;
}

.agent-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--ui-space-1);
  max-width: 100%;
  min-height: 34px;
  padding: 0 var(--ui-space-3);
  border: 0;
  border-radius: var(--ui-radius-pill);
  background: var(--ui-fill-1);
  color: var(--ui-ink);
  font-size: var(--ui-font-size-xs);
  font-weight: var(--ui-font-weight-medium);
  white-space: nowrap;
  transition: background-color var(--ui-duration-fast) var(--ui-ease-standard),
    color var(--ui-duration-fast) var(--ui-ease-standard);
}

.agent-pill svg {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  color: var(--ui-muted);
}

.agent-pill:hover:not(:disabled) {
  border-color: transparent;
  background: var(--ui-fill-2);
}

.agent-pill[aria-expanded="true"],
.agent-pill[aria-expanded="true"]:hover:not(:disabled) {
  background: var(--ui-accent-wash);
  color: var(--ui-accent-strong);
}

.agent-pill[aria-expanded="true"] svg,
.agent-pill:hover:not(:disabled) svg {
  color: var(--ui-accent);
}

.agent-pill:disabled {
  color: var(--ui-muted);
  cursor: not-allowed;
}

.agent-pill > span {
  overflow: hidden;
  max-width: 190px;
  text-overflow: ellipsis;
}

.agent-pill--params > span {
  max-width: 220px;
  color: var(--ui-muted);
  font-variant-numeric: tabular-nums;
}

.agent-send {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--ui-action-primary);
  color: var(--ui-action-on-primary);
  transition: background var(--ui-duration-fast) var(--ui-ease-standard);
}

.agent-send svg {
  width: 20px;
  height: 20px;
}

.agent-send:hover:not(:disabled) {
  background: var(--ui-action-primary-hover);
}

.agent-send:disabled {
  background: var(--ui-fill-2);
  color: var(--ui-muted);
  cursor: not-allowed;
}

.agent-send.is-stop {
  background: var(--ui-ink);
  color: var(--ui-action-on-primary);
}

.agent-send.is-stop:hover {
  background: var(--ui-ink-strong);
}

.agent-composer-foot {
  padding: var(--ui-space-2) var(--ui-space-1) 0;
}

.agent-composer-note,
.agent-composer-reason {
  margin: 0;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-2xs);
  line-height: var(--ui-line-height-snug);
  text-align: center;
}

.agent-composer-reason {
  margin-top: var(--ui-space-1);
  color: var(--ui-danger);
}

.agent-suggestions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--ui-space-2);
  max-width: 840px;
  margin: var(--ui-space-5) auto 0;
}

.agent-suggestion {
  display: inline-flex;
  align-items: center;
  gap: var(--ui-space-2);
  min-height: 38px;
  padding: 0 var(--ui-space-4);
  border: 0;
  border-radius: var(--ui-radius-pill);
  background: var(--ui-surface);
  box-shadow: 0 0 0 1px var(--ui-line), var(--ui-shadow-1);
  color: var(--ui-ink-soft);
  font-size: var(--ui-font-size-xs);
  line-height: var(--ui-line-height-snug);
  transition: border-color var(--ui-duration-fast) var(--ui-ease-standard),
    background-color var(--ui-duration-fast) var(--ui-ease-standard),
    color var(--ui-duration-fast) var(--ui-ease-standard);
}

.agent-suggestion svg {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  color: var(--ui-accent);
}

.agent-suggestion:hover:not(:disabled) {
  border-color: transparent;
  background: var(--ui-surface);
  box-shadow: 0 0 0 1px var(--ui-accent-edge), var(--ui-shadow-2);
  color: var(--ui-ink-strong);
}

/* ---------------- messages ---------------- */
.agent-message {
  display: flex;
  min-width: 0;
}

.agent-message--user {
  justify-content: flex-end;
}

.agent-user-bubble {
  max-width: min(78%, 72ch);
  padding: var(--ui-space-3) var(--ui-space-4);
  border: 0;
  border-radius: var(--ui-radius-lg) var(--ui-radius-lg) var(--ui-radius-xs) var(--ui-radius-lg);
  background: var(--ui-accent-soft);
}

.agent-user-head {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: var(--ui-space-2);
  margin-bottom: var(--ui-space-1);
  color: var(--ui-muted);
  font-size: var(--ui-font-size-2xs);
}

.agent-user-head strong {
  color: var(--ui-ink-soft);
  font-weight: var(--ui-font-weight-medium);
}

.agent-user-text {
  margin: 0;
  color: var(--ui-ink);
  font-size: var(--ui-font-size-md);
  line-height: var(--ui-line-height-relaxed);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.agent-user-settings {
  margin: var(--ui-space-2) 0 0;
  padding-top: var(--ui-space-2);
  border-top: 1px solid var(--ui-line);
  color: var(--ui-muted);
  font-size: var(--ui-font-size-2xs);
  font-variant-numeric: tabular-nums;
}

.agent-user-attachments:empty {
  display: none;
}

/* User attachments read as a media strip under the message text: one tile is
   a 96px thumbnail, several share a wrapping grid capped at the bubble width. */
.agent-message-assets {
  display: grid;
  grid-template-columns: repeat(auto-fill, 96px);
  gap: var(--ui-space-2);
  margin-top: var(--ui-space-2);
}

.agent-message-assets[data-count="1"] {
  grid-template-columns: 128px;
}

.agent-message-asset {
  position: relative;
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  overflow: hidden;
  border: 0;
  border-radius: var(--ui-radius-md);
  background: var(--ui-surface-subtle);
}

.agent-message-assets[data-count="1"] .agent-message-asset {
  width: 128px;
  height: 128px;
}

.agent-message-asset img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.agent-message-asset-empty {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: var(--ui-muted);
}

.agent-message-asset-empty svg {
  width: 18px;
  height: 18px;
}

.agent-message-duration {
  position: absolute;
  z-index: 2;
  right: 4px;
  bottom: 4px;
  padding: 0 5px;
  border-radius: var(--ui-radius-xs);
  background: var(--ui-glass-strong);
  color: var(--ui-ink-soft);
  font-size: var(--ui-font-size-xs);
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
}

.agent-message--assistant {
  align-items: flex-start;
  gap: var(--ui-space-3);
}

/* The soft ring marks the assistant turn as the active speaker without
   turning the avatar into a colour block. */
.agent-avatar {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--ui-accent-soft);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-accent) 10%, transparent);
  color: var(--ui-accent-strong);
}

.agent-avatar svg {
  width: 15px;
  height: 15px;
}

.agent-assistant-body {
  min-width: 0;
  max-width: 72ch;
}

.agent-message-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ui-space-2);
  margin-bottom: var(--ui-space-1);
  color: var(--ui-muted);
  font-size: var(--ui-font-size-2xs);
}

.agent-message-meta strong {
  color: var(--ui-ink);
  font-size: var(--ui-font-size-sm);
  font-weight: var(--ui-font-weight-semibold);
}

.agent-message-meta time {
  font-variant-numeric: tabular-nums;
}

/* 演示模式 is the page's one caveat, so it reads as a warning-toned chip rather
   than another neutral outline. 70/30 with --ui-ink keeps it at 4.8:1. */
.agent-demo-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 var(--ui-space-2);
  border: 0;
  border-radius: var(--ui-radius-pill);
  background: var(--ui-warning-soft);
  color: var(--ui-warning);
  font-size: var(--ui-font-size-2xs);
  font-weight: var(--ui-font-weight-medium);
  line-height: 1;
  white-space: nowrap;
}

.agent-message-text {
  color: var(--ui-ink);
  font-size: var(--ui-font-size-md);
  line-height: var(--ui-line-height-relaxed);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.agent-message-text[data-streaming="true"]::after {
  display: inline-block;
  width: 1px;
  height: 1em;
  margin-left: 2px;
  background: var(--ui-accent);
  vertical-align: -2px;
  content: '';
  animation: agent-caret 900ms steps(1) infinite;
}

@keyframes agent-caret {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* Turn states share one shape: a 2px bar plus a tinted background, so 已停止,
   正在整理 and 回复失败 are told apart by colour AND by position (they sit
   under the same message body). Neutral text keeps its own rule. */
.agent-typing {
  margin: var(--ui-space-1) 0 0;
  padding-left: var(--ui-space-2);
  border-left: 2px solid var(--ui-accent);
  background: var(--ui-accent-wash);
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
}

.agent-message-status {
  margin: var(--ui-space-1) 0 0;
  padding-left: var(--ui-space-2);
  border-left: 2px solid var(--ui-warning);
  background: var(--ui-warning-soft);
  color: color-mix(in srgb, var(--ui-warning) 70%, var(--ui-ink));
  font-size: var(--ui-font-size-xs);
}

.agent-message-error {
  margin: var(--ui-space-2) 0 var(--ui-space-1);
  padding-left: var(--ui-space-2);
  border-left: 2px solid var(--ui-danger);
  background: var(--ui-danger-soft);
  color: var(--ui-danger);
  font-size: var(--ui-font-size-sm);
}

.agent-inline-button {
  min-height: 32px;
  padding: 0 var(--ui-space-1);
  border: 0;
  border-radius: var(--ui-radius-sm);
  background: transparent;
  color: var(--ui-accent-strong);
  font-size: var(--ui-font-size-xs);
  font-weight: var(--ui-font-weight-medium);
}

.agent-inline-button:hover {
  background: var(--ui-accent-wash);
}

/* ---------------- popovers ---------------- */
.agent-popover {
  position: fixed;
  z-index: var(--ui-z-dropdown);
  padding: var(--ui-space-2);
  border: 1px solid var(--ui-glass-edge);
  border-radius: var(--ui-radius-lg);
  background: var(--ui-glass-strong);
  -webkit-backdrop-filter: var(--ui-glass-blur);
  backdrop-filter: var(--ui-glass-blur);
  box-shadow: var(--ui-shadow-pop);
  animation: ui-pop-in var(--ui-duration-fast) var(--ui-ease-out);
}

.agent-popover-title {
  margin: var(--ui-space-1) var(--ui-space-2) var(--ui-space-2);
  color: var(--ui-muted);
  font-size: var(--ui-font-size-2xs);
}

.agent-popover-note,
.agent-popover-empty {
  margin: var(--ui-space-2) var(--ui-space-2) var(--ui-space-1);
  color: var(--ui-muted);
  font-size: var(--ui-font-size-2xs);
  line-height: var(--ui-line-height-snug);
}

.agent-popover-empty {
  padding: var(--ui-space-3);
  color: var(--ui-ink-soft);
  font-size: var(--ui-font-size-xs);
}

.agent-model-menu {
  max-height: min(60vh, 440px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.agent-model-option {
  display: grid;
  gap: 3px;
  width: 100%;
  padding: var(--ui-space-3);
  border: 0;
  border-radius: var(--ui-radius-md);
  background: transparent;
  color: var(--ui-ink);
  text-align: left;
}

.agent-model-option:hover:not(:disabled),
.agent-model-option:focus-visible {
  border-color: transparent;
  background: var(--ui-fill-1);
}

.agent-model-option[aria-selected="true"] {
  background: var(--ui-accent-wash);
}

.agent-model-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ui-space-2);
  font-size: var(--ui-font-size-md);
}

.agent-model-main strong {
  font-weight: var(--ui-font-weight-semibold);
}

.agent-model-main svg {
  width: 15px;
  height: 15px;
  color: var(--ui-accent);
}

.agent-model-desc {
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
  line-height: var(--ui-line-height-snug);
}

.agent-model-caps {
  color: var(--ui-ink-soft);
  font-size: var(--ui-font-size-2xs);
  font-variant-numeric: tabular-nums;
}

.agent-params-menu {
  padding: var(--ui-space-4);
}

.agent-popover-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ui-space-2);
  margin-bottom: var(--ui-space-3);
  color: var(--ui-ink);
  font-size: var(--ui-font-size-md);
}

.agent-icon-button {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: var(--ui-radius-sm);
  background: transparent;
  color: var(--ui-muted);
}

.agent-icon-button:hover:not(:disabled) {
  border-color: transparent;
  background: var(--ui-fill-1);
  color: var(--ui-ink-strong);
}

.agent-icon-button svg {
  width: 17px;
  height: 17px;
}

.agent-field {
  display: block;
  margin: 0 0 var(--ui-space-4);
  padding: 0;
  border: 0;
}

.agent-field:last-of-type {
  margin-bottom: var(--ui-space-2);
}

.agent-field legend,
.agent-field-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ui-space-2);
  width: 100%;
  margin-bottom: var(--ui-space-2);
  padding: 0;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
  font-weight: var(--ui-font-weight-medium);
}

.agent-field-label b {
  color: var(--ui-ink);
  font-size: var(--ui-font-size-xs);
  font-weight: var(--ui-font-weight-semibold);
  font-variant-numeric: tabular-nums;
}

.agent-field input[type="range"] {
  width: 100%;
  accent-color: var(--ui-accent);
}

.agent-choices {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ui-space-2);
}

.agent-choice {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--ui-space-1);
  min-height: 36px;
  padding: 0 var(--ui-space-3);
  border: 1px solid transparent;
  border-radius: var(--ui-radius-pill);
  background: var(--ui-fill-1);
  color: var(--ui-ink-soft);
  font-size: var(--ui-font-size-xs);
  cursor: pointer;
  transition: background-color var(--ui-duration-fast) var(--ui-ease-standard), color var(--ui-duration-fast) var(--ui-ease-standard);
}

.agent-choice:hover {
  background: var(--ui-fill-2);
}

.agent-choice input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.agent-choice small {
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
}

.agent-choice:has(input:checked) {
  border-color: var(--ui-accent-edge);
  background: var(--ui-accent-wash);
  color: var(--ui-accent-strong);
}

.agent-choice:has(input:focus-visible) {
  outline: 2px solid var(--ui-focus);
  outline-offset: 2px;
}

/* ---------------- asset picker ---------------- */
.agent-picker-dialog {
  width: min(880px, calc(100vw - 32px));
  max-width: none;
  max-height: min(720px, calc(100dvh - 32px));
  padding: 0;
  border: 0;
  border-radius: var(--ui-radius-xl);
  background: var(--ui-surface);
  color: var(--ui-ink);
  overflow: hidden;
}

.agent-picker-dialog::backdrop {
  background: var(--ui-scrim);
}

.agent-picker {
  display: flex;
  flex-direction: column;
  max-height: inherit;
}

.agent-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ui-space-3);
  padding: var(--ui-space-5) var(--ui-space-6) var(--ui-space-2);
}

.agent-picker-head h2 {
  margin: 0;
  color: var(--ui-ink);
  font-size: var(--ui-font-size-xl);
  font-weight: var(--ui-font-weight-semibold);
}

.agent-picker-bar {
  display: flex;
  align-items: center;
  gap: var(--ui-space-3);
  padding: 0 var(--ui-space-6) var(--ui-space-3);
}

.agent-picker-search {
  flex: 1 1 auto;
}

.agent-picker-search input {
  width: 100%;
  height: 44px;
  padding: 0 var(--ui-space-4);
  border: 1px solid transparent;
  border-radius: var(--ui-radius-pill);
  background: var(--ui-fill-1);
  color: var(--ui-ink);
  font-size: var(--ui-font-size-sm);
}

.agent-picker-search input:focus {
  border-color: var(--ui-focus);
  outline: 0;
  box-shadow: var(--ui-shadow-focus);
}

.agent-picker-upload,
.agent-primary-button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: var(--ui-space-1);
  min-height: 44px;
  padding: 0 var(--ui-space-4);
  border: 0;
  border-radius: var(--ui-radius-pill);
  background: var(--ui-fill-1);
  color: var(--ui-ink);
  font-size: var(--ui-font-size-sm);
  font-weight: var(--ui-font-weight-medium);
}

.agent-picker-upload svg {
  width: 15px;
  height: 15px;
}

.agent-picker-upload:hover:not(:disabled) {
  border-color: transparent;
  background: var(--ui-fill-2);
}

.agent-primary-button {
  border-color: transparent;
  background: var(--ui-action-primary);
  color: var(--ui-action-on-primary);
}

.agent-primary-button:hover:not(:disabled) {
  border-color: transparent;
  color: var(--ui-action-on-primary);
  background: var(--ui-action-primary-hover);
}

.agent-primary-button:disabled {
  border-color: transparent;
  background: var(--ui-fill-2);
  color: var(--ui-muted);
  cursor: not-allowed;
}

.agent-picker-status {
  padding: 0 var(--ui-space-6);
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
}

.agent-picker-status:empty,
.agent-picker-status:has(> :empty) {
  display: none;
}

.agent-picker-status p {
  margin: 0 0 var(--ui-space-2);
}

.agent-picker-error {
  color: var(--ui-danger);
}

.agent-picker-uploads {
  padding: var(--ui-space-2) var(--ui-space-3);
  border-radius: var(--ui-radius-sm);
  background: var(--ui-surface-subtle);
}

.agent-picker-body {
  flex: 1 1 auto;
  min-height: 220px;
  padding: var(--ui-space-2) var(--ui-space-6) var(--ui-space-4);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.agent-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: var(--ui-space-3);
}

.agent-picker-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ui-space-1);
  min-width: 0;
  padding: var(--ui-space-2);
  border: 0;
  border-radius: var(--ui-radius-md);
  background: var(--ui-surface);
  box-shadow: 0 0 0 1px var(--ui-line);
  color: var(--ui-ink);
  text-align: left;
  white-space: normal;
}

.agent-picker-card:hover:not(:disabled) {
  border-color: transparent;
  background: var(--ui-surface);
  box-shadow: 0 0 0 1px var(--ui-line-strong), var(--ui-shadow-2);
}

.agent-picker-card.is-selected,
.agent-picker-card.is-selected:hover:not(:disabled) {
  background: var(--ui-accent-wash);
  box-shadow: 0 0 0 2px var(--ui-accent);
}

.agent-picker-thumb {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--ui-radius-sm);
  background: var(--ui-surface-muted);
  color: var(--ui-muted);
}

.agent-picker-thumb img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.agent-picker-fallback {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: var(--ui-muted);
}

.agent-picker-thumb svg {
  width: 24px;
  height: 24px;
}

.agent-picker-duration {
  position: absolute;
  z-index: 2;
  right: var(--ui-space-1);
  bottom: var(--ui-space-1);
  padding: 0 5px;
  border-radius: var(--ui-radius-xs);
  background: var(--ui-surface);
  color: var(--ui-ink-soft);
  font-size: var(--ui-font-size-xs);
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
}

.agent-picker-name {
  overflow: hidden;
  padding-inline: 2px;
  color: var(--ui-ink);
  font-size: var(--ui-font-size-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-picker-check {
  position: absolute;
  top: var(--ui-space-3);
  right: var(--ui-space-3);
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ui-action-primary);
  color: var(--ui-action-on-primary);
}

.agent-picker-check svg {
  width: 13px;
  height: 13px;
}

.agent-picker-empty {
  display: grid;
  place-items: center;
  gap: var(--ui-space-2);
  min-height: 220px;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-sm);
  text-align: center;
}

.agent-picker-empty p {
  margin: 0;
}

.agent-picker-skeletons {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: var(--ui-space-3);
}

.agent-picker-skeleton {
  aspect-ratio: 4 / 3;
  border-radius: var(--ui-radius-md);
  background: var(--ui-surface-muted);
}

.agent-picker-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ui-space-3);
  padding: var(--ui-space-3) var(--ui-space-6);
  border-top: 1px solid var(--ui-line);
  color: var(--ui-muted);
  font-size: var(--ui-font-size-2xs);
}

.agent-sr-only,
.agent-sr-status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------------- 爆款社区 ---------------- */
.agent-community {
  margin-top: var(--ui-space-9);
}

.agent-community-head {
  display: flex;
  align-items: center;
  gap: var(--ui-space-2);
}

.agent-community-head h3 {
  margin: 0;
  color: var(--ui-ink);
  font-size: var(--ui-font-size-lg);
  font-weight: var(--ui-font-weight-semibold);
}

/* Tabs read as one segmented track (grey track, white thumb). */
.agent-community-tabs {
  display: inline-flex;
  max-width: 100%;
  gap: 2px;
  margin-top: var(--ui-space-4);
  padding: 3px;
  border-radius: var(--ui-radius-pill);
  background: var(--ui-fill-1);
  overflow-x: auto;
  scrollbar-width: none;
}

.agent-community-tabs::-webkit-scrollbar {
  display: none;
}

.agent-community-tabs > [role="tab"] {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 var(--ui-space-4);
  border: 0;
  border-radius: var(--ui-radius-pill);
  background: transparent;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-sm);
  font-weight: var(--ui-font-weight-medium);
  white-space: nowrap;
}

.agent-community-tabs > [role="tab"]:hover:not(:disabled) {
  border-color: transparent;
  background: transparent;
  color: var(--ui-ink);
}

.agent-community-tabs > [role="tab"].is-active,
.agent-community-tabs > [role="tab"].is-active:hover:not(:disabled) {
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-1), 0 0 0 0.5px var(--ui-line);
  color: var(--ui-ink-strong);
}

.agent-community-panel {
  padding-top: var(--ui-space-5);
}

.agent-community-panel:focus-visible {
  outline: 2px solid var(--ui-focus);
  outline-offset: 2px;
}

.agent-community-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
  gap: var(--ui-space-4);
}

/* White cards on the canvas; the category chip in the head carries the
   category colour, so the card itself stays neutral. */
.agent-community-card,
.agent-community-case {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: var(--ui-space-4) var(--ui-space-5);
  border: 0;
  border-radius: var(--ui-radius-lg);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-card);
  transition: box-shadow var(--ui-duration-normal) var(--ui-ease-out), transform var(--ui-duration-normal) var(--ui-ease-out);
}

.agent-community-card:hover,
.agent-community-case:hover {
  box-shadow: var(--ui-shadow-hover);
  transform: translateY(-2px);
}

.agent-community-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ui-space-1);
}

.agent-community-rank {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid transparent;
  border-radius: var(--ui-radius-xs);
  background: var(--ui-surface-muted);
  color: var(--ui-ink-soft);
  font-size: var(--ui-font-size-2xs);
  font-weight: var(--ui-font-weight-semibold);
  font-variant-numeric: tabular-nums;
}

/* The first three rows are the only ones the eye needs to find, so only they
   borrow the category colour; the rest stay neutral. */
.agent-community-rank.is-top {
  border-color: color-mix(in srgb, var(--cat, var(--ui-line-strong)) 45%, transparent);
  background: color-mix(in srgb, var(--cat, var(--ui-surface-muted)) 12%, var(--ui-surface));
  color: color-mix(in srgb, var(--cat, var(--ui-ink)) 55%, var(--ui-ink));
}

.agent-community-chip {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 var(--ui-space-2);
  border-radius: var(--ui-radius-pill);
  background: color-mix(in srgb, var(--cat, var(--ui-accent)) 12%, var(--ui-surface));
  color: color-mix(in srgb, var(--cat, var(--ui-accent-strong)) 55%, var(--ui-ink));
  font-size: var(--ui-font-size-xs);
  line-height: 1;
  white-space: nowrap;
}

.agent-community-chip--soft {
  background: var(--ui-surface-muted);
  color: var(--ui-muted);
}

.agent-community-card-title {
  margin: var(--ui-space-2) 0 0;
  color: var(--ui-ink);
  font-size: var(--ui-font-size-md);
  font-weight: var(--ui-font-weight-semibold);
  line-height: var(--ui-line-height-snug);
}

.agent-community-card-copy {
  display: -webkit-box;
  flex: 1 1 auto;
  margin: var(--ui-space-1) 0 0;
  overflow: hidden;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
  line-height: var(--ui-line-height-snug);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.agent-community-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ui-space-2);
  margin-top: var(--ui-space-3);
}

.agent-community-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
}

.agent-community-tags > span {
  padding: 1px 8px;
  border: 0;
  border-radius: var(--ui-radius-pill);
  background: var(--ui-fill-1);
}

.agent-community-use,
.agent-community-toggle,
.agent-community-search-submit {
  flex: 0 0 auto;
  min-height: 32px;
  padding: 0 var(--ui-space-3);
  border: 0;
  border-radius: var(--ui-radius-pill);
  background: var(--ui-fill-1);
  color: var(--ui-ink);
  font-size: var(--ui-font-size-xs);
  font-weight: var(--ui-font-weight-medium);
  white-space: nowrap;
}

.agent-community-use:hover:not(:disabled),
.agent-community-toggle:hover:not(:disabled),
.agent-community-search-submit:hover:not(:disabled) {
  border-color: transparent;
  background: var(--ui-accent-wash);
  color: var(--ui-accent-strong);
}

.agent-community-filter-row {
  display: flex;
  align-items: center;
  gap: var(--ui-space-2);
  margin-bottom: var(--ui-space-2);
}

.agent-community-filter-label {
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
}

.agent-community-segments {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: var(--ui-radius-pill);
  background: var(--ui-fill-1);
}

.agent-community-segments > button {
  min-height: 32px;
  padding: 0 var(--ui-space-3);
  border: 0;
  border-radius: var(--ui-radius-pill);
  background: transparent;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
  font-weight: var(--ui-font-weight-medium);
}

.agent-community-segments > button[aria-pressed="true"] {
  background: var(--ui-surface);
  color: var(--ui-ink);
  box-shadow: var(--ui-shadow-1);
}

.agent-ranking-list {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.agent-ranking-row {
  display: flex;
  align-items: center;
  gap: var(--ui-space-3);
  min-height: 56px;
  padding: var(--ui-space-2) var(--ui-space-3);
  border-bottom: 1px solid var(--ui-line);
}

.agent-ranking-row:last-child {
  border-bottom: 0;
}

.agent-ranking-main {
  display: grid;
  flex: 1 1 auto;
  gap: 2px;
  min-width: 0;
}

.agent-ranking-main strong {
  overflow: hidden;
  color: var(--ui-ink);
  font-size: var(--ui-font-size-sm);
  font-weight: var(--ui-font-weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-ranking-main small {
  overflow: hidden;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-2xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-ranking-heat {
  display: grid;
  flex: 0 0 auto;
  gap: 1px;
  justify-items: end;
  color: var(--ui-ink-soft);
  font-size: var(--ui-font-size-2xs);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.agent-ranking-trend {
  color: var(--ui-muted);
}

.agent-ranking-trend.is-up {
  color: var(--ui-success);
}

.agent-ranking-trend.is-down {
  color: var(--ui-danger);
}

.agent-community-search {
  display: flex;
  gap: var(--ui-space-2);
}

.agent-community-search-field {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: var(--ui-space-2);
  min-width: 0;
  min-height: 40px;
  padding-inline: var(--ui-space-3);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-pill);
  background: var(--ui-glass-strong);
  color: var(--ui-muted);
}

.agent-community-search-field:focus-within {
  border-color: var(--ui-focus);
  box-shadow: var(--ui-shadow-focus);
}

.agent-community-search-field svg {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
}

.agent-community-search-field input {
  flex: 1 1 auto;
  min-width: 0;
  height: 38px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ui-ink);
  font-size: var(--ui-font-size-sm);
}

.agent-community-search-submit {
  border-color: var(--ui-action-primary);
  background: var(--ui-action-primary);
  color: var(--ui-action-on-primary);
  padding-inline: var(--ui-space-4);
}

.agent-community-search-submit:hover {
  border-color: var(--ui-action-primary-hover);
  background: var(--ui-action-primary-hover);
  color: var(--ui-action-on-primary);
}

.agent-community-empty {
  display: grid;
  justify-items: center;
  gap: var(--ui-space-2);
  padding: var(--ui-space-7) var(--ui-space-4);
  color: var(--ui-muted);
  font-size: var(--ui-font-size-sm);
  text-align: center;
}

.agent-community-empty p {
  margin: 0;
}

.agent-community-suggestions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--ui-space-2);
}

.agent-community-suggestions > button {
  min-height: 32px;
  padding: 0 var(--ui-space-3);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-pill);
  background: var(--ui-surface);
  color: var(--ui-ink-soft);
  font-size: var(--ui-font-size-xs);
}

.agent-community-suggestions > button:hover {
  border-color: var(--ui-line-strong);
  color: var(--ui-ink);
}

.agent-community-result-count {
  margin: 0 0 var(--ui-space-3);
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
}

.agent-community-cases {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--ui-space-3);
}

.agent-community-case {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--ui-space-3);
}

.agent-community-case.is-expanded {
  flex-direction: column;
}

.agent-community-case-cover {
  display: grid;
  flex: 0 0 96px;
  place-items: center;
  width: 96px;
  height: 96px;
  border: 1px dashed color-mix(in srgb, var(--cat, var(--ui-line-strong)) 40%, transparent);
  border-radius: var(--ui-radius-md);
  background: color-mix(in srgb, var(--cat, var(--ui-surface-muted)) 10%, var(--ui-surface));
  color: color-mix(in srgb, var(--cat, var(--ui-muted)) 55%, var(--ui-ink));
  font-size: var(--ui-font-size-2xs);
  text-align: center;
}

.agent-community-case.is-expanded .agent-community-case-cover {
  flex-basis: auto;
  width: 100%;
  height: 96px;
}

.agent-community-case-body {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  flex-direction: column;
}

.agent-community-case-kind {
  margin: 0;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-2xs);
}

.agent-community-breakdown {
  display: grid;
  gap: var(--ui-space-2);
  margin: var(--ui-space-2) 0 0;
}

.agent-community-breakdown div {
  display: grid;
  gap: 1px;
}

.agent-community-breakdown dt {
  color: var(--ui-ink-soft);
  font-size: var(--ui-font-size-2xs);
  font-weight: var(--ui-font-weight-medium);
}

.agent-community-breakdown dd {
  margin: 0;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
  line-height: var(--ui-line-height-snug);
}

.agent-community-note {
  margin: var(--ui-space-4) 0 0;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-2xs);
  line-height: var(--ui-line-height-snug);
}

/* A degraded source still shows its last snapshot; the notice says so rather
   than letting the rows read as current data. Same warning pair as the
   `.agent-demo-badge` chip so the two caveats read as one family. */
.agent-community-degraded {
  margin: var(--ui-space-3) 0 0;
  padding: var(--ui-space-2) var(--ui-space-3);
  border: 1px solid color-mix(in srgb, var(--ui-warning) 38%, transparent);
  border-radius: var(--ui-radius-sm);
  background: var(--ui-warning-soft);
  color: color-mix(in srgb, var(--ui-warning) 70%, var(--ui-ink));
  font-size: var(--ui-font-size-2xs);
  line-height: var(--ui-line-height-snug);
}

/* Recovery reuses the degraded notice's shape with the success tone: the same
   slot answers "is this snapshot current?" either way. */
.agent-community-recovered {
  margin: var(--ui-space-3) 0 0;
  padding: var(--ui-space-2) var(--ui-space-3);
  border: 1px solid color-mix(in srgb, var(--ui-success) 38%, transparent);
  border-radius: var(--ui-radius-sm);
  background: var(--ui-success-soft);
  color: color-mix(in srgb, var(--ui-success) 70%, var(--ui-ink));
  font-size: var(--ui-font-size-2xs);
  line-height: var(--ui-line-height-snug);
}

/* The connected source's name sits where the 示例内容 badge would be: one slot,
   two meanings, so a reader can always tell whether rows are real or sample. */
.agent-community-source {
  color: var(--ui-muted);
  font-size: var(--ui-font-size-2xs);
}

.agent-community-empty-source {
  color: var(--ui-ink-soft);
  font-size: var(--ui-font-size-2xs);
}

/* ---------------- delete confirmation ---------------- */
.agent-confirm {
  padding: var(--ui-space-5);
}

.agent-confirm h2 {
  margin: 0 0 var(--ui-space-2);
  color: var(--ui-ink);
  font-size: var(--ui-font-size-lg);
  font-weight: var(--ui-font-weight-semibold);
}

.agent-confirm p {
  margin: 0;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-sm);
  line-height: var(--ui-line-height-snug);
  overflow-wrap: anywhere;
}

.agent-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--ui-space-2);
  margin-top: var(--ui-space-5);
}

.agent-secondary-button,
.agent-danger-button {
  min-height: var(--ui-touch-target);
  padding: 0 var(--ui-space-4);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-pill);
  background: var(--ui-surface);
  color: var(--ui-ink);
  font-size: var(--ui-font-size-sm);
  font-weight: var(--ui-font-weight-medium);
}

.agent-secondary-button:hover {
  border-color: var(--ui-line-strong);
}

.agent-danger-button {
  border-color: var(--ui-danger);
  background: var(--ui-danger);
  color: var(--ui-action-on-primary);
}

.agent-danger-button:hover {
  background: color-mix(in srgb, var(--ui-danger) 88%, var(--ui-ink));
}

.agent-confirm-dialog {
  width: min(420px, calc(100vw - 32px));
  max-width: none;
  padding: 0;
  border: 0;
  border-radius: var(--ui-radius-xl);
  background: var(--ui-surface);
  color: var(--ui-ink);
}

.agent-confirm-dialog::backdrop {
  background: color-mix(in srgb, var(--ui-ink) 38%, transparent);
}

/* ---------------- focus and responsive ---------------- */
.agent-pill:focus-visible,
.agent-send:focus-visible,
.agent-suggestion:focus-visible,
.agent-tool:focus-visible,
.agent-head-button:focus-visible,
.agent-history-open:focus-visible,
.agent-history-delete:focus-visible,
.agent-history-new:focus-visible,
.agent-community > .agent-community-tabs > [role="tab"]:focus-visible,
.agent-community-use:focus-visible,
.agent-community-toggle:focus-visible,
.agent-community-segments > button:focus-visible,
.agent-community-search-submit:focus-visible,
.agent-community-suggestions > button:focus-visible,
.agent-secondary-button:focus-visible,
.agent-danger-button:focus-visible,
.agent-attachment-remove:focus-visible,
.agent-inline-button:focus-visible,
.agent-icon-button:focus-visible,
.agent-picker-upload:focus-visible,
.agent-primary-button:focus-visible,
.agent-picker-card:focus-visible {
  outline: 2px solid var(--ui-focus);
  outline-offset: 2px;
}

/* Below the wide desktop the history rail becomes an overlay drawer owned by
   the page head's 历史 button; the conversation column keeps the full width. */
@media (max-width: 1280px) {
  .agent-history-pane {
    position: absolute;
    inset: 0 auto 0 0;
    z-index: var(--ui-z-overlay);
    width: min(288px, calc(100vw - 56px));
    flex-basis: auto;
    box-shadow: var(--ui-shadow-3);
    transform: translateX(-102%);
    transition: transform var(--ui-duration-normal) var(--ui-ease-standard);
    visibility: hidden;
  }

  .agent-layout[data-history="open"] .agent-history-pane {
    transform: translateX(0);
    visibility: visible;
  }

  .agent-layout[data-history="open"] .agent-history-scrim {
    position: absolute;
    inset: 0;
    z-index: calc(var(--ui-z-overlay) - 1);
    display: block;
    padding: 0;
    border: 0;
    background: color-mix(in srgb, var(--ui-ink) 28%, transparent);
  }

  .agent-history-toggle,
  .agent-new-chat {
    display: inline-flex;
  }
}

@media (max-width: 1024px) {
  .agent-shell {
    max-width: 100%;
    padding-inline: var(--ui-space-6);
  }

  .agent-hero {
    margin-bottom: var(--ui-space-5);
  }

  .agent-community-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }
}

@media (max-width: 768px) {
  .agent-shell {
    padding-inline: var(--ui-space-4);
  }

  .agent-community {
    margin-top: var(--ui-space-6);
  }

  .agent-community-grid,
  .agent-community-cases {
    grid-template-columns: minmax(0, 1fr);
  }

  .agent-community-case {
    flex-direction: column;
  }

  .agent-community-case-cover,
  .agent-community-case.is-expanded .agent-community-case-cover {
    flex-basis: auto;
    width: 100%;
    height: 72px;
  }

  .agent-ranking-row {
    gap: var(--ui-space-2);
  }

  .agent-ranking-heat {
    display: none;
  }

  .agent-shell[data-state="empty"] .agent-center {
    padding-block: var(--ui-space-6) var(--ui-space-4);
  }

  .agent-shell[data-state="chat"] .agent-center {
    padding-bottom: var(--ui-space-3);
  }

  .agent-thread-inner {
    gap: var(--ui-space-5);
    padding-block: var(--ui-space-4);
  }

  .agent-user-bubble {
    max-width: 88%;
  }

  .agent-toolbar {
    align-items: flex-end;
  }

  .agent-pill > span {
    max-width: 140px;
  }

  .agent-pill--params > span {
    max-width: 160px;
  }

  .agent-picker-dialog {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
  }

  .agent-picker-head,
  .agent-picker-bar,
  .agent-picker-body,
  .agent-picker-foot,
  .agent-picker-status {
    padding-inline: var(--ui-space-4);
  }

  .agent-picker-grid,
  .agent-picker-skeletons {
    grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
  }
}

@media (max-width: 480px) {
  .agent-shell {
    padding-inline: var(--ui-space-3);
  }

  .agent-hero h2 {
    font-size: var(--ui-font-size-2xl);
  }

  .agent-composer {
    padding: var(--ui-space-3) var(--ui-space-3) var(--ui-space-2);
  }

  .agent-toolbar {
    flex-wrap: wrap;
  }

  .agent-send {
    margin-left: auto;
  }

  .agent-pill {
    padding-inline: var(--ui-space-2);
  }

  /* Keep 演示模式 / 历史 / 新对话 on one row at the narrowest width. */
  .agent-head-button {
    width: var(--ui-touch-target);
    padding: 0;
    justify-content: center;
  }

  .agent-head-button > span {
    display: none;
  }

  .agent-pill > span {
    max-width: 118px;
  }

  /* On the narrowest screens the parameter summary becomes an icon control so
       the model, reference, parameters and send action stay on one row. */
  .agent-pill--params {
    width: 44px;
    padding-inline: 0;
    justify-content: center;
  }

  .agent-pill--params > span,
  .agent-pill--params > svg:last-child {
    display: none;
  }

  .agent-attachment--video {
    width: 100%;
  }

  .agent-suggestion {
    width: 100%;
    min-height: 40px;
    padding-block: var(--ui-space-2);
    text-align: left;
  }

  .agent-user-bubble {
    max-width: 92%;
  }

  .agent-picker-dialog {
    width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
  }

  .agent-picker {
    height: 100%;
  }

  .agent-picker-bar {
    flex-wrap: wrap;
  }

  .agent-picker-upload {
    width: 100%;
  }

  .agent-picker-foot {
    flex-wrap: wrap;
  }

  .agent-picker-grid,
  .agent-picker-skeletons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .agent-message-text[data-streaming="true"]::after {
    animation: none;
  }
}

/* ---------------- 模式切换与导演脚本 ---------------- */
/* The mode switch is a quiet segmented control on the left of the toolbar: it
   is a creation parameter, so it carries no accent until it is selected. */
.agent-mode-switch {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  padding: 2px;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-pill);
  background: var(--ui-surface-subtle);
}

.agent-mode-option {
  min-height: 36px;
  padding: 0 var(--ui-space-3);
  border: 0;
  border-radius: var(--ui-radius-pill);
  background: transparent;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
  font-weight: var(--ui-font-weight-medium);
  white-space: nowrap;
}

.agent-mode-option[aria-checked="true"] {
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-1);
  color: var(--ui-ink);
}

.agent-mode-option:disabled {
  color: var(--ui-ink-faint);
  cursor: not-allowed;
}

.agent-mode-switch[data-mode="creative"] .agent-mode-option[aria-checked="true"] {
  color: var(--ui-accent);
}

.agent-mode-option:focus-visible {
  outline: 2px solid var(--ui-focus);
  outline-offset: 2px;
}

/* Confirmed-script card inside an assistant turn. */
.agent-script-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ui-space-3);
  margin-top: var(--ui-space-3);
  padding: var(--ui-space-3) var(--ui-space-4);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-lg);
  background: var(--ui-surface-subtle);
}

.agent-script-card-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.agent-script-card-main strong {
  color: var(--ui-ink);
  font-size: var(--ui-font-size-sm);
}

.agent-script-card-main span {
  color: var(--ui-muted);
  font-size: var(--ui-font-size-2xs);
}

.agent-script-modal {
  width: min(880px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100vh - 48px);
  padding: 0;
  border: 0;
  border-radius: var(--ui-radius-xl);
  background: var(--ui-glass-strong);
  color: var(--ui-ink);
}

.agent-script-modal::backdrop {
  background: color-mix(in srgb, var(--ui-ink) 38%, transparent);
}

.agent-script-dialog {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 48px);
}

.agent-script-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ui-space-4);
  padding: var(--ui-space-5) var(--ui-space-5) var(--ui-space-3);
  border-bottom: 1px solid var(--ui-line);
}

.agent-script-head h2 {
  margin: 0;
  font-size: var(--ui-font-size-md);
}

.agent-script-sub {
  margin: var(--ui-space-1) 0 0;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
  line-height: var(--ui-line-height-snug);
}

.agent-script-totals {
  display: flex;
  flex: 0 0 auto;
  gap: var(--ui-space-2);
  color: var(--ui-muted);
  font-size: var(--ui-font-size-2xs);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.agent-script-totals span {
  padding: 2px var(--ui-space-2);
  border-radius: var(--ui-radius-pill);
  background: var(--ui-surface-subtle);
}

.agent-script-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: var(--ui-space-4) var(--ui-space-5);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.agent-script-section + .agent-script-section {
  margin-top: var(--ui-space-5);
}

.agent-script-section h3 {
  display: flex;
  align-items: baseline;
  gap: var(--ui-space-2);
  margin: 0 0 var(--ui-space-3);
  font-size: var(--ui-font-size-sm);
}

.agent-script-hint {
  color: var(--ui-muted);
  font-size: var(--ui-font-size-2xs);
  font-weight: var(--ui-font-weight-regular);
}

.agent-script-cast-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ui-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.agent-script-cast-row {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-width: 0;
  gap: var(--ui-space-2);
  padding: 4px 4px 4px var(--ui-space-2);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-pill);
  background: var(--ui-glass-strong);
}

.agent-script-cast-row.is-missing {
  border-style: dashed;
}

/* 素材行预览：缩略图 + 文件名。用户换完素材要一眼认出选的是哪一张。 */
.agent-script-cast-thumb {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: var(--ui-radius-sm);
  background: var(--ui-surface-subtle);
  object-fit: cover;
}

.agent-script-cast-thumb.is-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ui-muted);
}

.agent-script-cast-thumb.is-glyph svg {
  width: 14px;
  height: 14px;
}

.agent-script-cast-name {
  max-width: 160px;
  overflow: hidden;
  color: var(--ui-ink-soft);
  font-size: var(--ui-font-size-2xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-script-cast-name.is-missing {
  color: var(--ui-muted);
}

.agent-script-cast-duration {
  color: var(--ui-muted);
  font-size: var(--ui-font-size-2xs);
  font-variant-numeric: tabular-nums;
}

.agent-script-cast-empty,
.agent-script-missing {
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
}

.agent-script-feature-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ui-space-2);
  margin: 0 0 var(--ui-space-3);
  padding: 0;
  list-style: none;
}

.agent-script-feature {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  gap: 2px;
  padding: 2px 2px 2px var(--ui-space-3);
  border: 1px solid var(--ui-line-strong);
  border-radius: var(--ui-radius-pill);
  font-size: var(--ui-font-size-2xs);
  overflow-wrap: anywhere;
}

.agent-script-feature-remove {
  width: 22px;
  height: 22px;
  min-width: 22px;
}

.agent-script-feature-add {
  display: flex;
  align-items: center;
  gap: var(--ui-space-2);
}

.agent-script-feature-add input {
  flex: 1 1 auto;
  min-width: 0;
  height: 36px;
  padding: 0 var(--ui-space-3);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-md);
  background: var(--ui-surface);
  color: inherit;
  font: inherit;
  font-size: var(--ui-font-size-sm);
}

.agent-script-cast {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--ui-space-2);
  border: 1px solid transparent;
  border-radius: var(--ui-radius-pill);
  background: var(--ui-accent-wash);
  color: var(--ui-accent);
  font-size: var(--ui-font-size-2xs);
  font-weight: var(--ui-font-weight-medium);
  white-space: nowrap;
}

.agent-script-cast[data-kind="model"] {
  background: color-mix(in srgb, var(--ui-ink) 8%, var(--ui-surface));
  color: var(--ui-ink-soft);
}

.agent-script-cast.is-empty,
.agent-script-cast.is-static {
  background: var(--ui-surface-subtle);
  color: var(--ui-muted);
}

.agent-script-cast:disabled {
  cursor: not-allowed;
  opacity: .7;
}

.agent-script-remove {
  width: 26px;
  height: 26px;
}

.agent-script-add {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ui-space-2);
  margin-top: var(--ui-space-2);
}

.agent-script-scenes {
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.agent-script-scene {
  min-width: 0;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-lg);
  background: var(--ui-glass-strong);
}

.agent-script-scene.is-editing {
  border-color: var(--ui-accent);
}

.agent-script-scene.is-invalid {
  border-color: var(--ui-danger);
}

.agent-script-row {
  display: flex;
  align-items: flex-start;
  gap: var(--ui-space-3);
  width: 100%;
  min-width: 0;
  padding: var(--ui-space-3);
  border: 0;
  border-radius: var(--ui-radius-lg);
  background: transparent;
  color: inherit;
  text-align: left;
  /* Buttons default to nowrap; the row is a text block that must wrap. */
  white-space: normal;
}

.agent-script-row:hover {
  background: var(--ui-surface-subtle);
}

.agent-script-index {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--ui-surface-subtle);
  color: var(--ui-muted);
  font-size: var(--ui-font-size-2xs);
  font-variant-numeric: tabular-nums;
}

.agent-script-main {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  max-width: 100%;
}

.agent-script-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ui-space-2);
  min-width: 0;
  font-size: var(--ui-font-size-sm);
}

.agent-script-duration {
  color: var(--ui-muted);
  font-size: var(--ui-font-size-2xs);
  font-variant-numeric: tabular-nums;
}

.agent-script-text {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--ui-ink-soft);
  font-size: var(--ui-font-size-xs);
  line-height: var(--ui-line-height-snug);
}

.agent-script-onscreen {
  align-self: flex-start;
  padding: 2px var(--ui-space-2);
  border-radius: var(--ui-radius-sm);
  background: var(--ui-surface-subtle);
  color: var(--ui-ink-soft);
  font-size: var(--ui-font-size-2xs);
}

.agent-script-casts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ui-space-1);
}

.agent-script-edit-icon {
  flex: 0 0 auto;
  color: var(--ui-muted);
}

.agent-script-editor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px;
  gap: var(--ui-space-3);
  min-width: 0;
  padding: 0 var(--ui-space-3) var(--ui-space-3) calc(var(--ui-space-3) + 36px);
}

.agent-script-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-2xs);
}

.agent-script-field--wide {
  grid-column: 1 / -1;
}

.agent-script-field--full {
  grid-column: 1 / -1;
}

.agent-script-field input,
.agent-script-field select,
.agent-script-field textarea {
  width: 100%;
  padding: 6px var(--ui-space-2);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-md);
  background: var(--ui-surface);
  color: var(--ui-ink);
  font: inherit;
  font-size: var(--ui-font-size-xs);
}

.agent-script-field textarea {
  resize: vertical;
  line-height: var(--ui-line-height-snug);
}

.agent-script-editor-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: var(--ui-space-2);
  justify-content: flex-end;
}

.agent-script-editor .agent-script-cast {
  cursor: pointer;
}

.agent-script-editor .agent-script-cast[aria-pressed="false"] {
  border-color: var(--ui-line);
  background: transparent;
  color: var(--ui-muted);
}

.agent-script-error {
  margin: 0;
  padding: 0 var(--ui-space-3) var(--ui-space-3);
  color: var(--ui-danger);
  font-size: var(--ui-font-size-2xs);
}

.agent-script-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ui-space-3);
  padding: var(--ui-space-3) var(--ui-space-5);
  border-top: 1px solid var(--ui-line);
}

.agent-script-status {
  flex: 1 1 220px;
  min-width: 0;
}

.agent-script-message {
  margin: 0;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-2xs);
}

/* 报价行：金额必须在「确认」旁边可见，用户看到价格才决定是否花钱。 */
.agent-script-quote {
  margin: 0;
  color: var(--ui-ink-soft);
  font-size: var(--ui-font-size-2xs);
  font-variant-numeric: tabular-nums;
}

.agent-script-quote.is-error {
  color: var(--ui-danger);
}

.agent-script-actions {
  display: flex;
  gap: var(--ui-space-2);
}

@media (max-width: 768px) {
  .agent-mode-switch {
    order: -1;
    width: 100%;
  }

  .agent-mode-option {
    flex: 1 1 0;
  }

  .agent-script-editor {
    grid-template-columns: minmax(0, 1fr);
    padding-left: var(--ui-space-3);
  }

  .agent-script-head {
    flex-direction: column;
  }

  .agent-script-actions {
    width: 100%;
  }

  .agent-script-actions > button {
    flex: 1 1 0;
  }
}

}
/* /styles/pages/assets.css */
@layer pages {
/*
 * Pages layer — 素材库（SCREEN-008）与素材重命名对话框（SCREEN-018）、
 * 移除撤销条（SCREEN-031）。
 *
 * Order: lead + actions, one overview card (counts and storage), the quiet
 * collection toolbar (search, 筛选与排序 popover, count, view toggle), the
 * drop strip, folders, then the media grid. Cards are white, media-first and
 * lift on hover; status strips are tinted wells without borders.
 */
.asset-library-view [data-asset-library-root],
.asset-library-view .ui-page > div {
  min-width: 0;
}

/* ---------------- 页头 ---------------- */
.asset-library-toolbar {
  margin-bottom: var(--ui-space-6);
}

.asset-library-toolbar-actions .quiet svg,
.asset-library-toolbar-actions button svg {
  width: 17px;
  height: 17px;
}

/* ---------------- 概览：数量与容量 ----------------
 * One white card, four counts and the storage meter, separated by hairlines. */
.asset-library-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(260px, 1.6fr);
  margin-bottom: var(--ui-space-6);
  padding: var(--ui-space-5) 0;
  border-radius: var(--ui-radius-lg);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-card);
}

.asset-library-stats:empty {
  display: none;
}

.asset-library-stats > div {
  display: grid;
  align-content: center;
  gap: 2px;
  min-width: 0;
  padding: 0 var(--ui-space-6);
}

.asset-library-stats > div + div {
  border-left: 1px solid var(--ui-line);
}

.asset-stat strong {
  color: var(--ui-ink-strong);
  font-size: var(--ui-font-size-2xl);
  font-weight: var(--ui-font-weight-semibold);
  font-variant-numeric: tabular-nums;
  line-height: var(--ui-line-height-tight);
  letter-spacing: var(--ui-letter-spacing-display);
}

.asset-library-stats small {
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
}

.asset-storage {
  gap: var(--ui-space-2);
}

.asset-storage-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ui-space-3);
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
  font-variant-numeric: tabular-nums;
}

.asset-storage-head strong {
  color: var(--ui-ink-strong);
  font-size: var(--ui-font-size-md);
  font-weight: var(--ui-font-weight-semibold);
}

.asset-storage progress {
  width: 100%;
  height: 6px;
  margin: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--ui-radius-pill);
  background: var(--ui-fill-2);
  -webkit-appearance: none;
  appearance: none;
  accent-color: var(--ui-accent);
}

.asset-storage progress::-webkit-progress-bar {
  border-radius: var(--ui-radius-pill);
  background: var(--ui-fill-2);
}

.asset-storage progress::-webkit-progress-value {
  border-radius: var(--ui-radius-pill);
  background: var(--ui-accent);
}

.asset-storage progress::-moz-progress-bar {
  border-radius: var(--ui-radius-pill);
  background: var(--ui-accent);
}

/* ---------------- 工具行 ----------------
 * Search capsule, 筛选与排序 popover, count, then the grid/list segmented
 * toggle at the far right. No box around the row. */
.asset-library-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ui-space-3);
  margin-bottom: var(--ui-space-5);
}

.asset-library-search {
  position: relative;
  display: flex;
  flex: 1 1 260px;
  align-items: center;
  max-width: 420px;
  min-width: min(220px, 100%);
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.asset-library-search > span {
  position: absolute;
  left: 14px;
  display: grid;
  color: var(--ui-muted);
  pointer-events: none;
}

.asset-library-search > span svg {
  width: 17px;
  height: 17px;
}

.asset-library-search input {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding-left: 40px;
}

.asset-library-tools .ui-collection-count {
  margin-left: auto;
}

.asset-view-toggle {
  flex: 0 0 auto;
}

.asset-view-toggle button {
  min-width: 40px;
  min-height: 34px;
  padding: 0 var(--ui-space-3);
}

.asset-view-toggle svg {
  width: 17px;
  height: 17px;
}

/* 筛选与排序：常驻入口按钮 + 玻璃弹出面板（桌面与窄屏一致）。 */
.asset-filter-disclosure {
  position: relative;
  flex: 0 0 auto;
}

.asset-filter-disclosure > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--ui-space-2);
  min-height: var(--ui-control-height);
  padding: 0 var(--ui-space-4);
  border: 1px solid var(--ui-line-strong);
  border-radius: var(--ui-radius-pill);
  background: var(--ui-surface);
  color: var(--ui-ink);
  font-size: var(--ui-font-size-sm);
  font-weight: var(--ui-font-weight-medium);
  list-style: none;
  transition: background-color var(--ui-duration-fast) var(--ui-ease-standard), border-color var(--ui-duration-fast) var(--ui-ease-standard);
}

.asset-filter-disclosure > summary::-webkit-details-marker {
  display: none;
}

.asset-filter-disclosure > summary:hover,
.asset-filter-disclosure[open] > summary {
  background: var(--ui-surface-subtle);
}

.asset-filter-disclosure > summary svg {
  width: 16px;
  height: 16px;
  color: var(--ui-muted);
}

.asset-filter-disclosure.has-active-filter > summary {
  border-color: var(--ui-accent-edge);
  background: var(--ui-accent-wash);
  color: var(--ui-accent-strong);
}

.asset-filter-summary {
  min-width: 20px;
  padding: 0 6px;
  border-radius: var(--ui-radius-pill);
  background: var(--ui-accent);
  color: var(--ui-action-on-primary);
  font-size: var(--ui-font-size-2xs);
  font-weight: var(--ui-font-weight-semibold);
  line-height: 20px;
  text-align: center;
}

.asset-library-filter-fields {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: var(--ui-z-dropdown);
  display: grid;
  gap: var(--ui-space-2);
  width: min(280px, calc(100vw - 32px));
  padding: var(--ui-space-3);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-lg);
  /* Opaque, no backdrop-filter: the popover hosts selects whose themed
     lists are position:fixed. */
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-pop);
  animation: ui-pop-in var(--ui-duration-fast) var(--ui-ease-out);
  transform-origin: top left;
}

.asset-library-filter-fields select {
  width: 100%;
  margin: 0;
}

/* ---------------- 拖放区与状态条 ---------------- */
.asset-library-drop {
  display: flex;
  align-items: center;
  gap: var(--ui-space-4);
  margin-bottom: var(--ui-space-6);
  padding: var(--ui-space-5);
  border: 1px dashed var(--ui-line-strong);
  border-radius: var(--ui-radius-lg);
  background: var(--ui-surface);
  transition: background-color var(--ui-duration-fast) var(--ui-ease-standard), border-color var(--ui-duration-fast) var(--ui-ease-standard);
}

.asset-library-drop > span {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ui-accent-soft);
  color: var(--ui-accent);
}

.asset-library-drop > span svg {
  width: 20px;
  height: 20px;
}

.asset-library-drop > div {
  flex: 1;
  min-width: 0;
}

.asset-library-drop strong {
  display: block;
  color: var(--ui-ink);
  font-size: var(--ui-font-size-sm);
  font-weight: var(--ui-font-weight-medium);
}

.asset-library-drop button {
  min-height: 0;
  padding: 0 2px;
  border: 0;
  background: transparent;
  color: var(--ui-accent);
  font-size: inherit;
}

.asset-library-drop button:hover:not(:disabled) {
  border-color: transparent;
  background: transparent;
  color: var(--ui-accent-strong);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.asset-library-drop small {
  display: block;
  margin-top: 2px;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
  line-height: var(--ui-line-height-normal);
}

/* With a populated library the drop area shrinks to one quiet line. */
.asset-library-drop.is-compact {
  min-height: 0;
  padding: var(--ui-space-3) var(--ui-space-4);
  background: transparent;
}

.asset-library-drop.is-compact > span {
  width: 32px;
  height: 32px;
  background: var(--ui-fill-1);
  color: var(--ui-muted);
}

.asset-library-drop.is-compact > span svg {
  width: 16px;
  height: 16px;
}

.asset-library-drop.is-compact > div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--ui-space-3);
}

.asset-library-drop.is-dragging {
  border-color: var(--ui-accent);
  background: var(--ui-accent-wash);
}

/* 提示 / 错误 / 撤销：同一行内状态条，文字与动作同排（SCREEN-031） */
.asset-library-message,
.asset-library-error,
.asset-library-undo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ui-space-3);
  margin: var(--ui-space-3) 0;
  padding: var(--ui-space-3) var(--ui-space-4);
  border: 0;
  border-radius: var(--ui-radius-md);
  background: var(--ui-accent-wash);
  color: var(--ui-ink);
  font-size: var(--ui-font-size-xs);
  line-height: var(--ui-line-height-normal);
  overflow-wrap: anywhere;
}

.asset-library-error {
  background: var(--ui-danger-soft);
  color: var(--ui-danger);
}

.asset-library-undo {
  background: var(--ui-success-soft);
  color: var(--ui-success);
}

.asset-library-undo button,
.asset-library-error button {
  flex: 0 0 auto;
}

.asset-library-upload {
  margin: var(--ui-space-4) 0;
  padding: var(--ui-space-4) var(--ui-space-5);
  border: 0;
  border-radius: var(--ui-radius-lg);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-card);
}

.asset-library-upload > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ui-space-2);
  font-size: var(--ui-font-size-xs);
}

.asset-library-upload progress {
  display: block;
  width: 100%;
  height: 6px;
  margin-top: var(--ui-space-3);
  border: 0;
  border-radius: var(--ui-radius-pill);
  accent-color: var(--ui-accent);
}

.asset-library-result-heading {
  display: flex;
  justify-content: space-between;
  gap: var(--ui-space-3);
  margin: var(--ui-space-4) 0 var(--ui-space-3);
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
}

/* ---------------- 素材卡片 ---------------- */
.asset-library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 224px), 1fr));
  gap: var(--ui-space-5);
  min-width: 0;
}

.asset-library-card {
  position: relative;
  min-width: 0;
  overflow: visible;
  border: 0;
  border-radius: var(--ui-radius-lg);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-card);
  transition: box-shadow var(--ui-duration-normal) var(--ui-ease-out), transform var(--ui-duration-normal) var(--ui-ease-out);
}

.asset-library-card:hover,
.asset-library-card:focus-within {
  box-shadow: var(--ui-shadow-hover);
}

.asset-library-card:hover {
  transform: translateY(-2px);
}

.asset-library-card:has(.ui-actions[open]) {
  z-index: 1;
}

.asset-library-card.is-dragging {
  opacity: 0.55;
}

.asset-library-media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--ui-radius-lg) var(--ui-radius-lg) 0 0;
  background: var(--ui-surface-muted);
}

.asset-library-media > a {
  display: block;
  width: 100%;
  height: 100%;
}

/* Card thumbnails show the whole source (contain) so no clip is ever lost;
   a blurred copy of the same image fills the frame so a portrait source in a
   landscape box reads as intentional. The details dialog keeps contain. */
.asset-library-media img,
.asset-library-media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.asset-preview-button {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: inherit;
  background: var(--ui-surface-muted);
}

.asset-preview-button:hover:not(:disabled) {
  border-color: transparent;
  background: var(--ui-surface-muted);
}

.asset-preview-button:active:not(:disabled) {
  transform: none;
}

.asset-preview-button img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 封面留白处用同一张图放大+模糊铺底（::before + --asset-fill，复用同一 URL）。 */
.asset-preview-button::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--asset-fill);
  background-size: cover;
  background-position: center;
  opacity: 0.45;
  filter: blur(14px) saturate(0.7);
  transform: scale(1.2);
}

.asset-media-symbol,
.asset-audio-symbol {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: var(--ui-ink-faint);
}

.asset-media-symbol svg {
  width: 32px;
  height: 32px;
}

.asset-audio-symbol {
  color: var(--ui-accent);
}

.asset-audio-symbol svg {
  width: 40px;
  height: 40px;
}

/* Time badge over media: a dark frosted pill stays legible on any frame. */
.asset-duration {
  position: absolute;
  bottom: var(--ui-space-2);
  left: var(--ui-space-2);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--ui-radius-pill);
  background: var(--ui-glass-dark);
  -webkit-backdrop-filter: var(--ui-glass-blur-soft);
  backdrop-filter: var(--ui-glass-blur-soft);
  color: var(--ui-action-on-primary);
  font-size: var(--ui-font-size-2xs);
  font-variant-numeric: tabular-nums;
  line-height: var(--ui-line-height-snug);
}

.asset-duration svg {
  width: 10px;
  height: 10px;
  fill: currentcolor;
}

/* 占位卡片：视频入库后异步探测与生成衍生文件（SCREEN-008） */
.asset-library-media .asset-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ui-space-3);
  width: 100%;
  height: 100%;
  padding: var(--ui-space-3);
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
  text-align: center;
}

.asset-placeholder-spin {
  width: 22px;
  height: 22px;
  border: 2px solid var(--ui-line-strong);
  border-top-color: var(--ui-accent);
  border-radius: 50%;
  animation: asset-placeholder-spin 0.9s linear infinite;
}

.asset-placeholder.is-failed {
  color: var(--ui-danger);
}

.asset-placeholder.is-failed > span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ui-danger-soft);
}

.asset-placeholder.is-failed > span svg {
  width: 16px;
  height: 16px;
}

.asset-placeholder.is-failed button {
  min-height: 36px;
  border: 0;
  background: var(--ui-surface);
  color: var(--ui-danger);
  font-size: var(--ui-font-size-xs);
}

.asset-placeholder.is-failed button:hover:not(:disabled) {
  background: var(--ui-danger-soft);
  color: var(--ui-danger);
}

.asset-library-fail-note {
  margin: var(--ui-space-2) 0 0;
  color: var(--ui-danger);
  font-size: var(--ui-font-size-xs);
  line-height: var(--ui-line-height-normal);
  overflow-wrap: anywhere;
}

@keyframes asset-placeholder-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .asset-placeholder-spin {
    animation: none;
  }

  .asset-library-card:hover {
    transform: none;
  }
}

.asset-library-card-body {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: var(--ui-space-3) var(--ui-space-4) var(--ui-space-4);
}

/* The name opens the preview; it reads as the card title, not a button. */
.asset-name-button {
  display: block;
  width: 100%;
  min-height: 24px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ui-ink-strong);
  font-size: var(--ui-font-size-sm);
  font-weight: var(--ui-font-weight-semibold);
  line-height: var(--ui-line-height-snug);
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.asset-name-button:hover:not(:disabled) {
  border-color: transparent;
  background: transparent;
  color: var(--ui-accent-strong);
}

.asset-name-button:active:not(:disabled) {
  transform: none;
}

.asset-library-card-body > small {
  display: block;
  overflow: hidden;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Quick actions float on the media corner as a small glass button. */
.asset-library-actions {
  position: absolute;
  top: var(--ui-space-2);
  right: var(--ui-space-2);
  z-index: 2;
  margin: 0;
  padding: 0;
  border: 0;
  transition: opacity var(--ui-duration-fast) var(--ui-ease-standard);
}

.asset-library-actions .ui-actions > summary {
  min-width: 32px;
  min-height: 32px;
  border-radius: 50%;
  background: var(--ui-glass-strong);
  -webkit-backdrop-filter: var(--ui-glass-blur-soft);
  backdrop-filter: var(--ui-glass-blur-soft);
  box-shadow: var(--ui-shadow-1);
  color: var(--ui-ink-soft);
}

.asset-library-actions .ui-actions > summary:hover,
.asset-library-actions .ui-actions[open] > summary {
  background: var(--ui-surface);
  color: var(--ui-ink-strong);
}

.asset-library-actions [data-asset-delete] {
  color: var(--ui-danger);
}

.asset-library-actions .ui-actions-list [data-asset-delete]:hover:not(:disabled) {
  background: var(--ui-danger-soft);
  color: var(--ui-danger);
}

@media (hover: hover) {
  .asset-library-actions {
    opacity: 0;
  }

  .asset-library-card:is(:hover, :focus-within) .asset-library-actions,
  .asset-library-actions:has(.ui-actions[open]) {
    opacity: 1;
  }
}

.asset-card-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ui-space-1);
  margin-top: var(--ui-space-2);
}

.asset-tag,
.asset-tag-add {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 26px;
  padding: 0 var(--ui-space-2);
  border: 0;
  border-radius: var(--ui-radius-pill);
  font-size: var(--ui-font-size-2xs);
  font-weight: var(--ui-font-weight-medium);
}

.asset-tag {
  background: var(--ui-accent-wash);
  color: var(--ui-accent-strong);
}

.asset-tag:hover:not(:disabled) {
  border-color: transparent;
  background: var(--ui-accent-soft);
  color: var(--ui-accent-strong);
}

.asset-tag-add {
  background: transparent;
  color: var(--ui-muted);
}

.asset-tag-add:hover:not(:disabled) {
  border-color: transparent;
  background: var(--ui-fill-1);
  color: var(--ui-ink);
}

.asset-tag-add svg {
  width: 13px;
  height: 13px;
}

@media (pointer: coarse) {
  .asset-tag,
  .asset-tag-add {
    min-height: var(--ui-touch-target);
  }
}

/* 列表视图：缩略图 + 文字一行。 */
.asset-library-grid.is-list {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ui-space-2);
}

.asset-library-grid.is-list .asset-library-card {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  align-items: center;
}

.asset-library-grid.is-list .asset-library-card:hover {
  transform: none;
}

.asset-library-grid.is-list .asset-library-media {
  border-radius: var(--ui-radius-lg) 0 0 var(--ui-radius-lg);
}

.asset-library-grid.is-list .asset-library-card-body {
  padding: var(--ui-space-3) 64px var(--ui-space-3) var(--ui-space-5);
}

.asset-library-grid.is-list .asset-library-actions {
  top: 50%;
  right: var(--ui-space-4);
  opacity: 1;
  transform: translateY(-50%);
}

/* 空态 */
.asset-library-empty {
  display: flex;
  grid-column: 1 / -1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ui-space-2);
  padding: var(--ui-space-9) var(--ui-space-5);
  border: 0;
  border-radius: var(--ui-radius-lg);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-card);
  color: var(--ui-muted);
  text-align: center;
}

.asset-library-empty > span {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: var(--ui-space-2);
  border-radius: 50%;
  background: var(--ui-accent-soft);
  color: var(--ui-accent);
}

.asset-library-empty > span svg {
  width: 24px;
  height: 24px;
}

.asset-library-empty h3 {
  margin: 0;
  color: var(--ui-ink-strong);
  font-size: var(--ui-font-size-lg);
  font-weight: var(--ui-font-weight-semibold);
}

.asset-library-empty p {
  max-width: 46ch;
  margin: 0 0 var(--ui-space-4);
  font-size: var(--ui-font-size-sm);
  line-height: var(--ui-line-height-normal);
}

.asset-library-pagination {
  display: flex;
  justify-content: center;
  margin: var(--ui-space-7) 0 var(--ui-space-5);
}

/* 骨架卡片：媒体块 + 两行文本，沿用 .ui-skeleton 的 shimmer */
.asset-library-skeleton {
  overflow: hidden;
  padding-bottom: var(--ui-space-4);
  border: 0;
  border-radius: var(--ui-radius-lg);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-card);
}

.asset-library-skeleton div,
.asset-library-skeleton span {
  background: linear-gradient(100deg, var(--ui-surface-subtle) 30%, var(--ui-surface-muted) 50%, var(--ui-surface-subtle) 70%);
  background-size: 220% 100%;
  animation: ui-skeleton-drift 1.6s ease-in-out infinite;
}

.asset-library-skeleton div {
  aspect-ratio: 16 / 10;
}

.asset-library-skeleton span {
  display: block;
  width: 65%;
  height: 11px;
  margin: var(--ui-space-4) var(--ui-space-4) 0;
  border-radius: var(--ui-radius-xs);
}

.asset-library-skeleton span:last-child {
  width: 40%;
  margin-top: 10px;
}

@media (prefers-reduced-motion: reduce) {
  .asset-library-skeleton div,
  .asset-library-skeleton span {
    animation: none;
  }
}

/* ---------------- 重命名 / 文件夹对话框（SCREEN-018） ---------------- */
.asset-library-dialog {
  width: min(440px, calc(100vw - 32px));
}

.asset-library-dialog h3 {
  margin: 0;
  color: var(--ui-ink-strong);
  font-size: var(--ui-font-size-xl);
  font-weight: var(--ui-font-weight-semibold);
}

.asset-library-dialog p {
  margin-top: var(--ui-space-2);
  color: var(--ui-muted);
  font-size: var(--ui-font-size-sm);
  line-height: var(--ui-line-height-normal);
}

.asset-library-dialog label {
  display: grid;
  gap: 6px;
  margin: var(--ui-space-5) 0 0;
  color: var(--ui-ink-soft);
  font-size: var(--ui-font-size-xs);
}

.asset-library-dialog input {
  width: 100%;
  min-width: 0;
  margin: 0;
}

.asset-library-dialog [data-rename-error],
.asset-library-dialog [data-folder-error] {
  color: var(--ui-danger);
}

.asset-library-dialog form > div {
  display: flex;
  justify-content: flex-end;
  gap: var(--ui-space-3);
  margin-top: var(--ui-space-6);
  padding-top: 0;
  border-top: 0;
}

/* ---------------- 素材详情对话框 ---------------- */
.asset-detail-dialog {
  width: min(880px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: var(--ui-space-6);
  overflow-y: auto;
}

.asset-detail-dialog header,
.asset-detail-dialog footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ui-space-3);
}

.asset-detail-dialog footer {
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* The download link reads as a secondary pill beside the primary save. */
.asset-detail-dialog footer > a {
  display: inline-flex;
  align-items: center;
  min-height: var(--ui-control-height);
  padding: 0 var(--ui-space-5);
  border-radius: var(--ui-radius-pill);
  background: var(--ui-fill-1);
  color: var(--ui-ink);
  font-size: var(--ui-font-size-sm);
  font-weight: var(--ui-font-weight-medium);
}

.asset-detail-dialog footer > a:hover {
  background: var(--ui-fill-2);
  text-decoration: none;
}

.asset-detail-dialog h2 {
  margin: 0;
  font-size: var(--ui-font-size-xl);
  overflow-wrap: anywhere;
}

.asset-detail-dialog header p,
.asset-detail-id {
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
  overflow-wrap: anywhere;
}

.asset-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
  gap: var(--ui-space-6);
  align-items: start;
  margin: var(--ui-space-5) 0;
}

.asset-detail-preview {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 220px;
  max-height: min(70dvh, 620px);
  overflow: hidden;
  border-radius: var(--ui-radius-lg);
  background: var(--ui-surface-muted);
}

/* 素材按自身比例放大到尽量大：横图撑满宽度、竖图撑满高度。 */
.asset-detail-preview :is(img, video) {
  position: relative;
  z-index: 1;
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: min(70dvh, 620px);
  object-fit: contain;
}

.asset-detail-preview::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--asset-fill);
  background-size: cover;
  background-position: center;
  opacity: 0.45;
  filter: blur(14px) saturate(0.7);
  transform: scale(1.2);
}

.asset-detail-preview audio {
  width: 90%;
}

.asset-detail-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ui-space-4);
  margin: var(--ui-space-4) 0;
  font-size: var(--ui-font-size-sm);
}

.asset-detail-facts dt {
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
}

.asset-detail-facts dd {
  margin: 2px 0 0;
  color: var(--ui-ink-strong);
  overflow-wrap: anywhere;
}

/* 弹窗右侧文字列：素材参数在窄栏里改成两列。 */
.asset-detail-side {
  min-width: 0;
}

.asset-detail-side .asset-detail-facts {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ui-space-4) var(--ui-space-3);
  margin: 0;
}

.asset-detail-side .asset-detail-id {
  margin-top: var(--ui-space-4);
}

.asset-detail-side .asset-detail-tags {
  margin-top: var(--ui-space-4);
}

.asset-detail-tags {
  padding: var(--ui-space-4) 0 0;
  border-top: 1px solid var(--ui-line);
}

.asset-detail-tags form {
  display: flex;
  align-items: end;
  gap: var(--ui-space-2);
  margin: var(--ui-space-3) 0;
}

.asset-detail-tags input {
  display: block;
  width: 100%;
}

.asset-detail-tags :is([data-tags], [data-suggestions]) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ui-space-2);
}

.asset-detail-tags [data-error] {
  color: var(--ui-danger);
}

/* ---------------- 窄屏 ---------------- */
@media (max-width: 1024px) {
  .asset-library-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    row-gap: var(--ui-space-4);
  }

  .asset-library-stats > .asset-storage {
    grid-column: 1 / -1;
    padding-top: var(--ui-space-4);
    border-top: 1px solid var(--ui-line);
    border-left: 0;
  }

  .asset-detail-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 768px) {
  .asset-library-search {
    flex-basis: 100%;
    max-width: none;
  }

  .asset-library-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ui-space-3);
  }

  .asset-library-filter-fields {
    left: auto;
    right: auto;
  }
}

@media (max-width: 480px) {
  .asset-library-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: var(--ui-space-4) 0;
  }

  .asset-library-stats > div {
    padding: 0 var(--ui-space-4);
  }

  .asset-library-stats > div:nth-child(3) {
    border-left: 0;
  }

  .asset-library-toolbar-actions {
    width: 100%;
  }

  .asset-library-toolbar-actions .primary {
    flex: 1;
  }

  .asset-library-card-body {
    padding: var(--ui-space-3);
  }

  .asset-library-grid.is-list .asset-library-card {
    grid-template-columns: 112px minmax(0, 1fr);
  }
}

/* ---------------- 文件夹（网盘式一层目录） ---------------- */
.asset-library-path {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ui-space-2);
  margin: 0 0 var(--ui-space-4);
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
}

.asset-library-path > button {
  min-height: 32px;
  padding: 0 var(--ui-space-3);
  border: 1px solid transparent;
  border-radius: var(--ui-radius-pill);
  background: transparent;
  color: var(--ui-accent);
  font-size: var(--ui-font-size-sm);
}

.asset-library-path > button:hover:not(:disabled),
.asset-library-path > button.is-drop-target {
  border-color: transparent;
  background: var(--ui-accent-wash);
  color: var(--ui-accent-strong);
}

.asset-path-current {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ui-ink);
  font-weight: var(--ui-font-weight-medium);
}

.asset-path-current svg {
  width: 15px;
  height: 15px;
}

.asset-path-hint {
  margin-left: auto;
  font-size: var(--ui-font-size-2xs);
}

.asset-folder-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 224px), 1fr));
  gap: var(--ui-space-4);
  margin-bottom: var(--ui-space-6);
}

.asset-folder-card {
  display: flex;
  align-items: center;
  gap: var(--ui-space-3);
  min-height: 68px;
  padding: var(--ui-space-3) var(--ui-space-3) var(--ui-space-3) var(--ui-space-4);
  border: 1px solid transparent;
  border-radius: var(--ui-radius-lg);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-card);
  cursor: pointer;
  transition: box-shadow var(--ui-duration-normal) var(--ui-ease-out), background-color var(--ui-duration-fast) var(--ui-ease-standard);
}

.asset-folder-card:hover,
.asset-folder-card:focus-visible {
  box-shadow: var(--ui-shadow-hover);
}

.asset-folder-card.is-drop-target {
  border-color: var(--ui-accent);
  border-style: dashed;
  background: var(--ui-accent-wash);
}

.asset-folder-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: var(--ui-radius-md);
  background: var(--ui-accent-soft);
  color: var(--ui-accent);
}

.asset-folder-icon svg {
  width: 20px;
  height: 20px;
}

.asset-folder-copy {
  flex: 1;
  min-width: 0;
}

.asset-folder-copy strong {
  display: block;
  overflow: hidden;
  color: var(--ui-ink);
  font-size: var(--ui-font-size-sm);
  font-weight: var(--ui-font-weight-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.asset-folder-copy small {
  display: block;
  margin-top: 2px;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
}

.asset-library-card[draggable="true"].is-dragging {
  opacity: 0.5;
}

/* ---------------- 折叠的结果组展开面板 ---------------- */
.asset-library-media .asset-group-badge {
  position: absolute;
  right: var(--ui-space-2);
  bottom: var(--ui-space-2);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  z-index: 1;
  padding: 2px 8px;
  border-radius: var(--ui-radius-pill);
  background: var(--ui-glass-dark);
  -webkit-backdrop-filter: var(--ui-glass-blur-soft);
  backdrop-filter: var(--ui-glass-blur-soft);
  color: var(--ui-action-on-primary);
  font-size: var(--ui-font-size-2xs);
  font-weight: var(--ui-font-weight-medium);
}

.asset-group-badge svg {
  width: 13px;
  height: 13px;
}

.asset-group-dialog {
  width: min(560px, calc(100vw - 32px));
  max-height: min(80vh, 720px);
  overflow: auto;
}

.asset-group-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ui-space-3);
  margin-bottom: var(--ui-space-4);
}

.asset-group-head h3 {
  margin: 0 0 6px;
}

.asset-group-head p {
  margin: 0;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
}

.asset-group-head button {
  min-width: 36px;
  min-height: 36px;
}

.asset-group-list {
  display: grid;
  gap: var(--ui-space-2);
}

.asset-group-member {
  display: flex;
  align-items: center;
  gap: var(--ui-space-3);
  width: 100%;
  min-height: 64px;
  padding: var(--ui-space-2) var(--ui-space-3);
  border: 0;
  border-radius: var(--ui-radius-md);
  background: var(--ui-surface);
  box-shadow: 0 0 0 1px var(--ui-line);
  color: var(--ui-ink);
  text-align: left;
  white-space: normal;
}

.asset-group-member:hover:not(:disabled),
.asset-group-member:focus-visible {
  border-color: transparent;
  background: var(--ui-surface);
  box-shadow: 0 0 0 1px var(--ui-line-strong), var(--ui-shadow-2);
}

.asset-group-cover {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 56px;
  height: 42px;
  overflow: hidden;
  border-radius: var(--ui-radius-xs);
  background: var(--ui-surface-muted);
  color: var(--ui-muted);
}

.asset-group-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.asset-group-copy {
  flex: 1;
  min-width: 0;
}

.asset-group-copy strong {
  display: block;
  overflow: hidden;
  font-size: var(--ui-font-size-sm);
  font-weight: var(--ui-font-weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.asset-group-copy small {
  display: block;
  margin-top: 3px;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-2xs);
}

/* 手机首屏优先给素材网格：说明与拖放区收起，统计压成紧凑数字。 */
@media (max-width: 480px) {
  .asset-library-drop {
    display: none;
  }

  .asset-library-toolbar .page-lead {
    display: none;
  }

  .asset-stat strong {
    font-size: var(--ui-font-size-xl);
  }

  .asset-storage progress {
    height: 4px;
  }

  .asset-detail-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

}
/* /styles/pages/results.css */
@layer pages {
/*
 * Pages layer — 视频生成记录（SCREEN-009）。
 *
 * 左侧记录列表 + 右侧输入/输出对比区。rp-* 结构来自 results-presentation.js；
 * 这里将旧版硬编码色收敛到令牌，统一列表行、分页与结果面板的表现。
 * Pagination wraps within the record list and uses shared touch targets.
 */
/* ---------------- 布局 ----------------
 * 生成记录 uses the wide page measure: a 320px record list card on the left
 * and the record detail card on the right. */
[id="results-view"] {
  --rp-stage-height: 360px;
}

[id="results-view"] .ui-page {
  max-width: var(--ui-page-width-wide);
}

[id="results-view"] .results-layout {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: var(--ui-space-6);
  align-items: start;
}

[id="results-view"] .comparison {
  min-width: 0;
}

/* ---------------- 记录列表 ---------------- */
.experiment-list {
  min-width: 0;
  padding: var(--ui-space-4) var(--ui-space-3) var(--ui-space-3);
  border: 0;
  border-radius: var(--ui-radius-lg);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-card);
}

.experiment-list .section-heading {
  margin: 0 0 var(--ui-space-3);
  padding: 0 var(--ui-space-1) 0 var(--ui-space-2);
}

.experiment-list .section-heading h2 {
  font-size: var(--ui-font-size-md);
}

.experiment-list > input,
.experiment-list > select {
  width: 100%;
  min-width: 0;
  margin: 0 0 var(--ui-space-2);
}

.experiment-list > select {
  height: 40px;
  min-height: 40px;
  font-size: var(--ui-font-size-sm);
}

[id="all-jobs"] {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: var(--ui-space-2);
}

.experiment-item {
  display: flex;
  align-items: center;
  gap: var(--ui-space-3);
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: var(--ui-space-2);
  border: 0;
  border-radius: var(--ui-radius-md);
  background: transparent;
  line-height: var(--ui-line-height-snug);
  text-align: left;
  white-space: normal;
  transition: background-color var(--ui-duration-fast) var(--ui-ease-standard);
}

.experiment-item:active:not(:disabled) {
  transform: none;
}

/* Row body: name, status + time, and one tool line. The right padding keeps
   the delete action in the corner clear of the timestamp. */
.rp-job-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding-right: calc(var(--ui-touch-target) - var(--ui-space-3));
}

.rp-job-body > :is(strong, small, span) {
  margin-top: 0;
  margin-bottom: 0;
}

.experiment-item:hover:not(:disabled) {
  border-color: transparent;
  background: var(--ui-fill-1);
}

.experiment-item.active,
.experiment-item.active:hover:not(:disabled) {
  background: var(--ui-accent-wash);
  box-shadow: none;
}

.experiment-item strong {
  display: block;
  overflow: hidden;
  color: var(--ui-ink-strong);
  font-size: var(--ui-font-size-sm);
  font-weight: var(--ui-font-weight-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.experiment-item .experiment-info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ui-space-1) var(--ui-space-2);
}

.experiment-item .experiment-info .badge {
  white-space: normal;
}

.experiment-item small {
  color: var(--ui-muted);
  font-size: var(--ui-font-size-2xs);
}

.experiment-item .rp-list-facts {
  display: block;
  min-width: 0;
  overflow: hidden;
  font-size: var(--ui-font-size-2xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rp-job-cover {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: var(--ui-radius-sm);
  object-fit: cover;
  background: var(--ui-surface-muted);
}

.rp-job-placeholder {
  display: grid;
  place-items: center;
  color: var(--ui-ink-faint);
}

.rp-job-placeholder svg {
  width: 20px;
  height: 20px;
}

/* The row wraps the open button and the delete action as siblings; the
   delete action appears on hover in the row's top-right corner. */
.experiment-row {
  position: relative;
}

.experiment-delete {
  position: absolute;
  top: 50%;
  right: var(--ui-space-1);
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ui-muted);
  transform: translateY(-50%);
  transition: opacity var(--ui-duration-fast) var(--ui-ease-standard), background-color var(--ui-duration-fast) var(--ui-ease-standard);
}

.experiment-delete:hover:not(:disabled) {
  border-color: transparent;
  background: var(--ui-danger-soft);
  color: var(--ui-danger);
}

.experiment-delete:active:not(:disabled) {
  transform: translateY(-50%) scale(0.95);
}

.experiment-delete svg {
  width: 16px;
  height: 16px;
}

@media (hover: hover) {
  .experiment-delete {
    opacity: 0;
  }

  .experiment-row:is(:hover, :focus-within) .experiment-delete {
    opacity: 1;
  }
}

@media (pointer: coarse) {
  .experiment-delete {
    width: var(--ui-touch-target);
    height: var(--ui-touch-target);
  }
}

/* Pagination: one summary line and one compact control row. */
.job-pagination {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--ui-space-2);
  margin-top: var(--ui-space-3);
  padding: var(--ui-space-3) var(--ui-space-1) 0;
  border-top: 1px solid var(--ui-line);
  color: var(--ui-muted);
  font-size: var(--ui-font-size-2xs);
}

.job-page-summary {
  display: flex;
  flex: 0 0 auto;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ui-space-2);
  margin: 0;
  white-space: nowrap;
}

[id="job-page-current"] {
  color: var(--ui-ink);
  font-weight: var(--ui-font-weight-medium);
}

.job-page-controls {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--ui-space-1);
}

.job-page-controls button {
  min-height: 34px;
  padding: 0 var(--ui-space-3);
  border-color: transparent;
  background: var(--ui-fill-1);
  font-size: var(--ui-font-size-xs);
  white-space: nowrap;
}

.job-page-controls button:hover:not(:disabled) {
  border-color: transparent;
  background: var(--ui-fill-2);
}

.job-page-controls input {
  width: 48px;
  min-width: 0;
  height: 34px;
  min-height: 34px;
  margin: 0;
  padding: 0 var(--ui-space-1);
  border-radius: var(--ui-radius-sm);
  font-size: var(--ui-font-size-sm);
  text-align: center;
}

@media (pointer: coarse) {
  .job-page-controls :is(button, input) {
    height: var(--ui-touch-target);
    min-height: var(--ui-touch-target);
  }
}

/* ---------------- 对比区头部与状态 ---------------- */
.comparison-title {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ui-space-2) var(--ui-space-4);
  margin-bottom: var(--ui-space-4);
}

.comparison-title h2 {
  overflow-wrap: anywhere;
  font-size: var(--ui-font-size-xl);
  font-weight: var(--ui-font-weight-semibold);
}

.comparison-title p {
  margin: var(--ui-space-1) 0 0;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
  line-height: var(--ui-line-height-normal);
}

.comparison-title .badge {
  align-self: center;
  white-space: normal;
}

.notice {
  margin: 0 0 var(--ui-space-4);
  padding: var(--ui-space-3) var(--ui-space-4);
  border: 0;
  border-radius: var(--ui-radius-md);
  background: var(--ui-warning-soft);
  color: var(--ui-warning);
  font-size: var(--ui-font-size-xs);
  line-height: var(--ui-line-height-normal);
}

/* ---------------- 结果面板（rp-*） ---------------- */
.rp-panels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ui-space-4);
}

.rp-panel-host {
  min-width: 0;
}

.rp-panel {
  display: grid;
  grid-template-rows: auto var(--rp-stage-height, 360px) auto;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-md);
  background: var(--ui-glass-strong);
  box-shadow: none;
}

.rp-panel-header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--ui-space-1);
  min-width: 0;
  padding: var(--ui-space-3) var(--ui-space-4);
  border-bottom: 1px solid var(--ui-line);
}

.rp-panel-header h3 {
  margin: 0;
  color: var(--ui-ink);
  font-size: var(--ui-font-size-xs);
  font-weight: var(--ui-font-weight-semibold);
  line-height: var(--ui-line-height-snug);
  text-align: left;
}

.rp-panel-header small {
  overflow: hidden;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-2xs);
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rp-stage {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: var(--ui-space-3);
  background: var(--ui-surface-subtle);
}

.rp-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ui-space-2);
  min-width: 0;
  padding: var(--ui-space-2) var(--ui-space-3);
  border-top: 1px solid var(--ui-line);
}

.rp-toolbar > span {
  min-width: 0;
  overflow: hidden;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-2xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rp-toolbar :is(button, a),
.rp-toolbar .submission-prompt-button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin: 0;
  padding: 4px var(--ui-space-2);
  border: 1px solid transparent;
  border-radius: var(--ui-radius-xs);
  background: transparent;
  color: var(--ui-accent-strong);
  font-size: var(--ui-font-size-2xs);
  line-height: var(--ui-line-height-snug);
  text-decoration: none;
}

.rp-toolbar :is(button, a):hover {
  border-color: var(--ui-line);
  background: var(--ui-accent-soft);
}

/* 输入区：缩略图轨 + 主媒体 */
.rp-hero-layout {
  display: grid;
  grid-template-columns: clamp(36px, calc(100% - 250px), 88px) minmax(0, 1fr);
  gap: var(--ui-space-2);
  height: 100%;
  min-height: 0;
}

.rp-thumbnails {
  display: grid;
  grid-auto-rows: minmax(72px, 104px);
  align-content: start;
  gap: var(--ui-space-2);
  min-height: 0;
  container-type: inline-size;
  container-name: reference-rail;
}

.rp-hero-layout--solo {
  grid-template-columns: minmax(0, 1fr);
}

.rp-main-media {
  height: 100%;
  min-width: 0;
  min-height: 0;
}

.rp-image-grid {
  display: grid;
  height: 100%;
  min-height: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: calc((var(--rp-stage-height, 360px) - 36px) / 3);
  gap: var(--ui-space-2);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.rp-thumb {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: var(--ui-space-1) var(--ui-space-1) 24px;
  overflow: hidden;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-sm);
  background: var(--ui-glass-strong);
  box-shadow: none;
  transition: border-color var(--ui-duration-fast) var(--ui-ease-standard);
}

.rp-thumb:hover {
  border-color: var(--ui-line-strong);
}

.rp-thumb[aria-pressed="true"] {
  border-color: var(--ui-accent);
  background: var(--ui-accent-soft);
  box-shadow: inset 3px 0 var(--ui-accent);
}

.rp-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  border-radius: var(--ui-radius-xs);
  background: var(--ui-surface-subtle);
  object-fit: contain;
}

.rp-thumb-label {
  position: absolute;
  right: var(--ui-space-1);
  bottom: 6px;
  left: var(--ui-space-1);
  overflow: hidden;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-2xs);
  line-height: 12px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rp-thumb-label-short {
  display: none;
}

.rp-thumb-missing,
.rp-thumb-error {
  overflow-wrap: anywhere;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-2xs);
  text-align: center;
}

/* 媒体本体 */
.rp-media {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-sm);
  background: var(--ui-surface-muted);
  box-shadow: none;
}

.rp-media :is(img, video) {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.rp-media img[role="button"] {
  cursor: zoom-in;
}

.rp-media audio {
  width: calc(100% - 24px);
  margin: 24px 12px;
}

.rp-media-feedback {
  position: absolute;
  top: var(--ui-space-2);
  right: var(--ui-space-2);
  left: var(--ui-space-2);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--ui-space-2);
  padding: var(--ui-space-2);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-sm);
  background: var(--ui-surface-overlay);
  color: var(--ui-muted);
  font-size: var(--ui-font-size-2xs);
  pointer-events: none;
}

.rp-media-feedback button {
  min-height: 28px;
  padding: 3px var(--ui-space-2);
  font-size: var(--ui-font-size-2xs);
  pointer-events: auto;
}

.rp-media [hidden],
.rp-thumb [hidden] {
  display: none;
}

.rp-unavailable {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ui-space-2);
  padding: var(--ui-space-4);
  color: var(--ui-muted);
  text-align: center;
}

.rp-unavailable strong {
  font-size: var(--ui-font-size-sm);
}

.rp-unavailable small {
  font-size: var(--ui-font-size-2xs);
  line-height: var(--ui-line-height-relaxed);
}

.rp-stage > [data-output-status] {
  height: 100%;
}

/* 任务状态占位（成功 / 失败 / 进行中 / 待处理） */
.rp-task-status {
  display: flex;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ui-space-3);
  padding: var(--ui-space-4);
  color: var(--ui-muted);
  text-align: center;
}

.rp-task-status strong {
  color: var(--ui-ink);
  font-size: var(--ui-font-size-md);
}

.rp-task-status > span {
  font-size: var(--ui-font-size-xs);
}

.rp-task-status small {
  font-size: var(--ui-font-size-2xs);
  line-height: var(--ui-line-height-relaxed);
}

.rp-task-status .rp-status-symbol {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-pill);
  background: var(--ui-accent-soft);
  color: var(--ui-accent);
  font-size: 30px;
}

.rp-task-status[data-tone="error"] .rp-status-symbol {
  border-color: color-mix(in srgb, var(--ui-danger) 40%, var(--ui-line));
  background: var(--ui-danger-soft);
  color: var(--ui-danger);
}

.rp-task-status[data-tone="warning"] .rp-status-symbol {
  border-color: color-mix(in srgb, var(--ui-warning) 40%, var(--ui-line));
  background: var(--ui-warning-soft);
  color: var(--ui-warning);
}

.rp-task-status progress {
  width: min(180px, 100%);
  height: 5px;
  accent-color: var(--ui-accent);
}

/* 生成中的结果位：旋转指示 + 扫光骨架，进度未知时用不确定进度条，
   让等待过程始终有动效而不是一段静态文字。 */
.rp-generating-stage {
  position: relative;
  display: grid;
  place-items: center;
  /* 占位框随结果区缩放：宽度按容器、高度封顶，不会被压成一条线。 */
  width: min(240px, 72%);
  height: min(180px, 42%);
  min-height: 96px;
  overflow: hidden;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-md);
  background: var(--ui-surface-subtle);
}

.rp-generating-frame {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0 12%, var(--ui-surface-muted) 12% 20%, transparent 20% 100%),
    var(--ui-surface-subtle);
  opacity: 0.5;
}

.rp-generating-shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--ui-surface) 85%, transparent) 50%, transparent 70%);
  background-size: 240% 100%;
  animation: rp-generating-shimmer 1.8s var(--ui-ease-standard) infinite;
}

.rp-generating-spinner {
  position: relative;
  z-index: 1;
  width: 40px;
  height: 40px;
  border: 3px solid var(--ui-accent-soft);
  border-top-color: var(--ui-accent);
  border-radius: var(--ui-radius-pill);
  animation: rp-generating-spin 900ms linear infinite;
}

.rp-task-status progress.is-indeterminate {
  width: min(200px, 80%);
  height: 4px;
  accent-color: var(--ui-accent);
}

@keyframes rp-generating-spin {
  to { transform: rotate(360deg); }
}

@keyframes rp-generating-shimmer {
  from { background-position: 140% 0; }
  to { background-position: -140% 0; }
}

/* 减少动态效果时由 base 层的全局规则统一停用动画（旋转环成为静态进度环）。 */
/* 提示词面板 */
.rp-prompt {
  height: 100%;
  overflow: hidden;
  padding: var(--ui-space-4);
  border-radius: var(--ui-radius-sm);
  background: var(--ui-glass-strong);
}

.rp-content-label {
  display: block;
  margin-bottom: var(--ui-space-3);
  color: var(--ui-muted);
  font-size: var(--ui-font-size-2xs);
}

.rp-prompt-copy {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 11;
  font-size: var(--ui-font-size-sm);
  line-height: var(--ui-line-height-relaxed);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

/* ---------------- 结果控制与详情 ---------------- */
.compare-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ui-space-2) var(--ui-space-4);
  margin: var(--ui-space-4) 0;
}

.compare-controls > div {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ui-space-2);
}

.compare-controls button,
.compare-controls a {
  font-size: var(--ui-font-size-xs);
}

.result-meta {
  margin: var(--ui-space-3) 0;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
  line-height: var(--ui-line-height-relaxed);
}

.duration-warning {
  color: var(--ui-warning);
}

.job-error {
  margin: var(--ui-space-3) 0;
  padding: var(--ui-space-3) var(--ui-space-4);
  border: 1px solid color-mix(in srgb, var(--ui-danger) 30%, var(--ui-line));
  border-left: 3px solid var(--ui-danger);
  border-radius: var(--ui-radius-sm);
  background: var(--ui-danger-soft);
  color: color-mix(in srgb, var(--ui-danger) 82%, var(--ui-ink));
  font-size: var(--ui-font-size-xs);
  line-height: var(--ui-line-height-relaxed);
}

.resume-box {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--ui-space-2);
  margin: var(--ui-space-4) 0;
}

.resume-box input {
  max-width: 320px;
  margin: 0;
}

.job-events {
  margin-top: var(--ui-space-4);
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
}

.job-events summary {
  margin-bottom: var(--ui-space-3);
  cursor: pointer;
  font-weight: var(--ui-font-weight-medium);
}

.job-events .event {
  display: flex;
  min-width: 0;
  gap: var(--ui-space-3);
  padding: var(--ui-space-1) var(--ui-space-3);
  border-left: 2px solid var(--ui-line);
  font-size: var(--ui-font-size-2xs);
  line-height: var(--ui-line-height-relaxed);
}

.job-events .event > span {
  min-width: 0;
}

.job-events .event time {
  flex: 0 0 auto;
  color: var(--ui-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.job-events p {
  margin: var(--ui-space-3) 0 0;
  font-size: var(--ui-font-size-2xs);
}

/* ---------------- 素材预览对话框（SCREEN-019 动态部分） ---------------- */
.rp-material-dialog[open] {
  display: flex;
  width: min(860px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  flex-direction: column;
  padding: 0;
}

.rp-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ui-space-4);
  padding: var(--ui-space-4) var(--ui-space-5);
  border-bottom: 1px solid var(--ui-line);
}

.rp-dialog-header h2 {
  margin: 0;
  font-size: var(--ui-font-size-lg);
}

.rp-dialog-header p {
  margin: var(--ui-space-1) 0 0;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
}

.rp-dialog-stage {
  height: min(56dvh, 540px);
  min-height: 140px;
  padding: var(--ui-space-3);
}

.rp-dialog-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ui-space-2);
  max-height: 150px;
  padding: var(--ui-space-3) var(--ui-space-5);
  overflow-y: auto;
  border-top: 1px solid var(--ui-line);
}

.rp-dialog-list button {
  min-height: 32px;
  padding: var(--ui-space-1) var(--ui-space-3);
  font-size: var(--ui-font-size-2xs);
}

.rp-dialog-list button[aria-pressed="true"] {
  border-color: var(--ui-accent);
  background: var(--ui-accent-soft);
  color: var(--ui-accent-strong);
}

/* ---------------- 提交前确认 / 完整提示词 ---------------- */
[id="preflight-content"] {
  font-size: var(--ui-font-size-xs);
  line-height: var(--ui-line-height-relaxed);
}

[id="preflight-content"] ul {
  padding-left: var(--ui-space-5);
}

[id="preflight-content"] li {
  margin-bottom: var(--ui-space-2);
}

.preflight-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ui-space-3) var(--ui-space-5);
  margin-bottom: var(--ui-space-3);
  padding: var(--ui-space-4);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-sm);
  background: var(--ui-surface-subtle);
  font-size: var(--ui-font-size-xs);
}

.preflight-summary strong {
  margin-left: var(--ui-space-1);
  font-size: var(--ui-font-size-lg);
  font-variant-numeric: tabular-nums;
}

.errors {
  color: var(--ui-danger);
}

.warnings {
  color: color-mix(in srgb, var(--ui-warning) 82%, var(--ui-ink));
}

p.success {
  margin: var(--ui-space-2) 0;
  padding: var(--ui-space-2) var(--ui-space-3);
  border-radius: var(--ui-radius-sm);
  background: var(--ui-success-soft);
  color: color-mix(in srgb, var(--ui-success) 85%, var(--ui-ink));
  font-size: var(--ui-font-size-xs);
}

.batch-preflight-list {
  margin: var(--ui-space-4) 0;
  padding: 0;
  border-top: 1px solid var(--ui-line);
  list-style: none;
}

.batch-preflight-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--ui-space-2) var(--ui-space-4);
  padding: var(--ui-space-3) var(--ui-space-1);
  border-bottom: 1px solid var(--ui-line);
}

.batch-preflight-item > span:first-child {
  min-width: 0;
}

.batch-preflight-item strong,
.batch-preflight-item small {
  display: block;
}

.batch-preflight-item strong {
  overflow: hidden;
  font-size: var(--ui-font-size-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.batch-preflight-item small {
  margin-top: 4px;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-2xs);
}

.batch-preflight-item > ul {
  grid-column: 1 / -1;
  margin: 0;
}

.batch-ok {
  color: var(--ui-success);
  font-variant-numeric: tabular-nums;
  font-weight: var(--ui-font-weight-semibold);
}

.batch-error {
  color: var(--ui-danger);
  font-weight: var(--ui-font-weight-semibold);
}

.submission-preview {
  margin-top: var(--ui-space-4);
}

.submission-preview h3 {
  margin: 0 0 var(--ui-space-2);
  font-size: var(--ui-font-size-sm);
  font-weight: var(--ui-font-weight-semibold);
}

.submission-preview h3 small {
  color: var(--ui-muted);
  font-size: var(--ui-font-size-2xs);
  font-weight: var(--ui-font-weight-regular);
}

.submission-grid {
  display: grid;
  gap: var(--ui-space-1);
}

.submission-prompt-button {
  min-height: 32px;
  margin-top: var(--ui-space-2);
  font-size: var(--ui-font-size-xs);
}

.price-note {
  color: var(--ui-muted);
  font-size: var(--ui-font-size-2xs);
}

[id="submission-prompt-content"] {
  max-height: 60dvh;
  padding: var(--ui-space-4);
  overflow: auto;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-sm);
  background: var(--ui-surface-subtle);
  color: var(--ui-ink);
  font-size: var(--ui-font-size-xs);
  line-height: var(--ui-line-height-relaxed);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

/* ---------------- 容器查询：缩略图轨收窄 ---------------- */
@container reference-rail (max-width: 60px) {
  .rp-thumb {
    padding: 3px 3px 20px;
    border-radius: var(--ui-radius-xs);
  }

  .rp-thumb-label {
    bottom: 4px;
  }

  .rp-thumb-label-full {
    display: none;
  }

  .rp-thumb-label-short {
    display: inline;
  }
}

@container secondary-page (max-width: 900px) {
  [id="results-view"] .results-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

@container secondary-page (max-width: 600px) {
  .rp-panels {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------------- 触控目标 ---------------- */
.rp-list-facts {
  display: block;
  margin-top: var(--ui-space-1);
  overflow-wrap: anywhere;
}

.rp-records,
.rp-admin-records {
  margin-top: var(--ui-space-5);
  font-size: var(--ui-font-size-xs);
  line-height: var(--ui-line-height-relaxed);
}

.rp-records h3 {
  margin: var(--ui-space-4) 0 var(--ui-space-3);
  font-size: var(--ui-font-size-sm);
}

.rp-record-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ui-space-3) var(--ui-space-5);
  margin: var(--ui-space-4) 0;
}

.rp-record-grid dt,
.rp-record-note,
.rp-record-materials span,
.rp-record-materials small {
  color: var(--ui-muted);
}

.rp-record-grid dd {
  margin: var(--ui-space-1) 0 0;
  overflow-wrap: anywhere;
}

.rp-record-table > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ui-space-2);
  padding: var(--ui-space-2) 0;
  border-bottom: 1px solid var(--ui-line);
  overflow-wrap: anywhere;
}

.rp-record-table > div:first-child {
  color: var(--ui-muted);
}

.rp-records summary,
.rp-admin-records summary,
.rp-record-filters summary {
  display: list-item;
  min-height: var(--ui-touch-target);
  padding: var(--ui-space-3) 0;
  cursor: pointer;
  overflow-wrap: anywhere;
}

.rp-records details,
.rp-admin-records {
  border-top: 1px solid var(--ui-line);
}

.rp-record-prompt,
.rp-record-json {
  max-height: 400px;
  padding: var(--ui-space-3);
  overflow: auto;
  border-radius: var(--ui-radius-sm);
  background: var(--ui-surface-subtle);
  font-size: var(--ui-font-size-xs);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.rp-record-materials {
  display: grid;
  gap: var(--ui-space-3);
  padding: 0;
  list-style: none;
}

.rp-record-materials :is(strong, span, small) {
  display: block;
  overflow-wrap: anywhere;
}

.rp-record-filters {
  margin-bottom: var(--ui-space-3);
  font-size: var(--ui-font-size-xs);
}

.rp-record-filters :is(label, select, input) {
  display: block;
  width: 100%;
  min-width: 0;
  margin-bottom: var(--ui-space-2);
}

.rp-record-filters :is(select, input),
.rp-record-billing button,
.rp-admin-records button {
  min-height: var(--ui-touch-target);
}

.rp-record-pages {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ui-space-2);
}

@media (pointer: coarse) {
  .experiment-item,
  .job-page-controls button,
  .rp-dialog-list button,
  .rp-toolbar :is(button, a),
  .rp-toolbar .submission-prompt-button,
  .rp-media-feedback button,
  .submission-prompt-button,
  .job-events summary,
  .experiment-list > input,
  .experiment-list > select,
  .job-page-controls input {
    min-height: var(--ui-touch-target);
  }

  .job-page-controls button,
  .job-page-controls input {
    min-width: var(--ui-touch-target);
  }
}

/* ---------------- 窄屏 ---------------- */
@media (max-width: 480px) {
  .rp-record-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  [id="results-view"] {
    --rp-stage-height: 320px;
  }

  .rp-panels {
    grid-template-columns: minmax(0, 1fr);
  }

  .experiment-list {
    padding: var(--ui-space-3);
  }

  .comparison-title h2 {
    font-size: var(--ui-font-size-md);
  }
}

/* ---------------- 记录详情 ----------------
 * One white card. The heading spans the record; the result (player, view
 * switch and actions) takes the wide left column and the task facts read
 * down the right column, separated by rhythm and hairlines, never by
 * nested boxes. */
.results-back {
  display: none;
}

@media (max-width: 768px) {
  [id="results-view"].is-detail-open .experiment-list {
    display: none;
  }

  [id="results-view"].is-detail-open .results-back {
    display: inline-flex;
    align-items: center;
    gap: var(--ui-space-2);
    align-self: start;
    min-height: var(--ui-touch-target);
    margin-bottom: var(--ui-space-3);
    padding: 0 var(--ui-space-3) 0 var(--ui-space-1);
    border: 0;
    background: transparent;
    color: var(--ui-accent);
    font-size: var(--ui-font-size-sm);
    font-weight: var(--ui-font-weight-medium);
  }
}

/* 生成记录 is one fixed workspace on desktop: the view itself never scrolls;
   the record list and the detail card scroll internally. */
@media (min-width: 1024px) {
  [id="results-view"] {
    --ui-view-padding-bottom: var(--ui-space-6);
    padding-block: var(--ui-space-6);
    overflow: hidden;
  }

  [id="results-view"] > .ui-page {
    height: 100%;
  }

  [id="results-view"] .results-layout {
    height: 100%;
    min-height: 0;
    align-items: stretch;
  }

  [id="results-view"] .experiment-list {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  [id="results-view"] [id="all-jobs"] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  [id="results-view"] .comparison {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

[id="results-view"] .comparison {
  padding: var(--ui-space-6) var(--ui-space-7);
  border: 0;
  border-radius: var(--ui-radius-lg);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-card);
  container: record / inline-size;
}

[id="results-view"] .comparison:has(> .comparison-empty) {
  display: grid;
  place-items: center;
}

.rp-record-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 1fr);
  grid-template-areas:
    "head head"
    "preview main";
  gap: var(--ui-space-5) var(--ui-space-7);
  align-items: start;
}

.rp-record-head {
  grid-area: head;
  min-width: 0;
}

.rp-record-preview {
  grid-area: preview;
}

.rp-record-main {
  grid-area: main;
}

.rp-record-main,
.rp-record-preview {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.rp-record-workspace .comparison-title {
  margin: 0;
  padding-bottom: var(--ui-space-4);
  border-bottom: 1px solid var(--ui-line);
}

.rp-record-workspace .comparison-title h2 {
  font-size: var(--ui-font-size-xl);
  line-height: var(--ui-line-height-snug);
}

/* Fact sections: a quiet heading, then content; hairlines between them. */
.rp-summary-section {
  margin: 0;
  padding: var(--ui-space-5) 0;
  border: 0;
  border-bottom: 1px solid var(--ui-line);
  border-radius: 0;
}

.rp-record-main > div:first-child:empty + div:empty + div .rp-summary-section:first-child,
.rp-record-main [data-record-overview] > .rp-summary-section:first-child {
  padding-top: 0;
}

.rp-summary-section h3,
.rp-record-preview h3 {
  margin: 0 0 var(--ui-space-3);
  font-size: var(--ui-font-size-sm);
}

.rp-section-head {
  display: flex;
  align-items: center;
  gap: var(--ui-space-2);
  margin-bottom: var(--ui-space-3);
}

.rp-section-head h3 {
  margin: 0;
  color: var(--ui-ink-strong);
  font-size: var(--ui-font-size-md);
  font-weight: var(--ui-font-weight-semibold);
}

.rp-section-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--ui-accent-soft);
  color: var(--ui-accent);
}

.rp-section-icon svg {
  width: 13px;
  height: 13px;
}

.rp-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ui-space-4) var(--ui-space-5);
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
}

.rp-summary-grid dt {
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
}

.rp-summary-grid dd {
  margin: 2px 0 0;
  color: var(--ui-ink-strong);
  font-size: var(--ui-font-size-sm);
  overflow-wrap: anywhere;
}

.rp-summary-section > button {
  margin-top: var(--ui-space-3);
}

/* Cost: one headline amount (actual, or the estimate while unsettled). */
.rp-charge {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.rp-charge small {
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
}

.rp-charge strong {
  color: var(--ui-ink-strong);
  font-size: var(--ui-font-size-xl);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--ui-letter-spacing-latin);
}

.rp-charge span {
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
}

.rp-meter-line {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--ui-space-2);
  margin: var(--ui-space-3) 0 0;
  padding-top: var(--ui-space-3);
  border-top: 1px dashed var(--ui-line);
  color: var(--ui-ink-soft);
  font-size: var(--ui-font-size-xs);
  font-variant-numeric: tabular-nums;
}

/* Inputs: a thumbnail list; each row opens the material preview. */
.rp-input-list {
  display: grid;
  gap: var(--ui-space-2);
}

.rp-input-row {
  display: flex;
  align-items: center;
  gap: var(--ui-space-2);
  min-width: 0;
}

.rp-input-row > button {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: flex-start;
  gap: var(--ui-space-3);
  min-width: 0;
  min-height: 0;
  padding: var(--ui-space-2);
  border: 0;
  border-radius: var(--ui-radius-md);
  background: var(--ui-surface-subtle);
  text-align: left;
  white-space: normal;
}

.rp-input-row > button:hover:not(:disabled) {
  border-color: transparent;
  background: var(--ui-fill-2);
}

.rp-input-row img,
.rp-input-row button > span:first-child {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: var(--ui-radius-sm);
}

/* 输入素材缩略图完整显示，深底与播放器一致；无封面的占位符号仍用浅底保持可读。 */
.rp-input-row img {
  background: var(--ui-ink);
  object-fit: contain;
}

.rp-input-row button > span:first-child {
  background: var(--ui-surface);
}

.rp-input-row button > span {
  min-width: 0;
}

.rp-input-row strong,
.rp-input-row small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rp-input-row strong {
  color: var(--ui-ink-strong);
  font-size: var(--ui-font-size-sm);
}

.rp-input-row small {
  margin-top: 2px;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-2xs);
}

.rp-input-row a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 var(--ui-space-2);
  font-size: var(--ui-font-size-xs);
}

.rp-full-record {
  margin-top: var(--ui-space-2);
  font-size: var(--ui-font-size-xs);
}

.rp-full-record > summary,
.rp-summary-section summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: var(--ui-space-2) 0;
  color: var(--ui-ink-soft);
  font-size: var(--ui-font-size-sm);
  font-weight: var(--ui-font-weight-medium);
}

.rp-full-record[open] > summary {
  color: var(--ui-ink-strong);
}

/* ---- Result column ---- */
.rp-record-preview .rp-panels {
  display: block;
}

.rp-record-preview .rp-panel {
  display: block;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
}

.rp-record-preview .rp-panel-header {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ui-space-2);
  padding: 0 0 var(--ui-space-3);
  border: 0;
}

.rp-record-preview .rp-panel-header h3 {
  margin: 0;
  font-size: var(--ui-font-size-md);
}

.rp-record-preview .rp-panel-header small {
  display: none;
}

.rp-record-preview .rp-panel-header button {
  margin: 0;
  min-height: 36px;
}

.rp-record-preview .rp-stage {
  height: clamp(260px, 46dvh, 560px);
  padding: 0;
  overflow: hidden;
  border-radius: var(--ui-radius-lg);
  background: var(--ui-surface-muted);
}

.rp-record-preview .rp-media {
  border: 0;
  border-radius: var(--ui-radius-lg);
}

.rp-record-preview .rp-panels > .rp-panel-host:first-child {
  display: none;
}

.rp-record-preview .rp-panels.is-original > .rp-panel-host:first-child {
  display: block;
}

.rp-record-preview .rp-panels.is-original > .rp-panel-host:last-child {
  display: none;
}

.rp-record-preview .rp-toolbar {
  margin-top: var(--ui-space-2);
  padding: var(--ui-space-1) 0;
  border-top: 0;
}

.rp-record-preview .compare-controls {
  margin: var(--ui-space-1) 0 0;
}

.rp-record-preview .compare-controls:has(> div:empty + div:empty) {
  display: none;
}

/* 处理结果 / 原始素材 switch: one segmented track under the player. */
.rp-record-tabs {
  display: flex;
  gap: 2px;
  margin-top: var(--ui-space-3);
  padding: 3px;
  border-radius: var(--ui-radius-pill);
  background: var(--ui-fill-1);
}

.rp-record-tabs:empty {
  display: none;
}

.rp-record-tabs button {
  flex: 1;
  min-width: 0;
  min-height: 34px;
  padding: 0 var(--ui-space-3);
  border: 0;
  background: transparent;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-sm);
  white-space: normal;
}

.rp-record-tabs button:hover:not(:disabled) {
  border-color: transparent;
  background: transparent;
  color: var(--ui-ink);
}

.rp-record-tabs button[aria-pressed="true"],
.rp-record-tabs button[aria-pressed="true"]:hover:not(:disabled) {
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-1), 0 0 0 0.5px var(--ui-line);
  color: var(--ui-ink-strong);
}

/* Actions: one primary (download), then quiet secondary actions. */
.rp-record-preview [data-record-actions] {
  display: flex;
  flex-direction: column;
  margin-top: var(--ui-space-5);
}

.rp-bottom-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ui-space-2);
}

.rp-bottom-actions :is(button, a):not(.ui-actions *) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ui-space-2);
  min-height: 40px;
  padding: 0 var(--ui-space-4);
  border-color: transparent;
  border-radius: var(--ui-radius-pill);
  background: var(--ui-fill-1);
  color: var(--ui-ink);
  font-size: var(--ui-font-size-sm);
  font-weight: var(--ui-font-weight-medium);
  text-decoration: none;
}

.rp-bottom-actions :is(button, a):not(.ui-actions *):hover:not(:disabled) {
  border-color: transparent;
  background: var(--ui-fill-2);
  color: var(--ui-ink-strong);
  text-decoration: none;
}

.rp-bottom-actions :is(button, a):not(.ui-actions *) svg {
  width: 16px;
  height: 16px;
}

.rp-bottom-actions a.primary,
.rp-bottom-actions a.primary:hover {
  background: var(--ui-action-primary);
  color: var(--ui-action-on-primary);
}

.rp-bottom-actions a.primary:hover {
  background: var(--ui-action-primary-hover);
}

@media (pointer: coarse) {
  .rp-record-tabs button,
  .rp-bottom-actions :is(button, a):not(.ui-actions *) {
    min-height: var(--ui-touch-target);
  }
}

/* Export and delete live in the trailing … menu (shared primitive styling). */
.rp-bottom-actions .ui-actions {
  margin-left: auto;
}

.rp-complete-note {
  display: flex;
  align-items: flex-start;
  gap: var(--ui-space-2);
  margin: 0 0 var(--ui-space-3);
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
  line-height: var(--ui-line-height-normal);
}

.rp-complete-note svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 2px;
}

/* Technical facts sit inside a summary section here, so they drop the dialog
   margins and tighten the rows the dialog keeps loose. */
.rp-summary-section .asset-detail-facts {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ui-space-3) var(--ui-space-5);
  margin: 0;
}

.rp-summary-section .asset-detail-facts dt {
  font-size: var(--ui-font-size-xs);
}

.rp-summary-section .asset-detail-facts dd {
  margin-top: 2px;
}

.rp-output-files > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ui-space-2);
  margin: var(--ui-space-2) 0;
}

.rp-output-files > div > button {
  flex: 0 1 auto;
  min-width: 0;
  min-height: 36px;
  overflow: hidden;
  border-color: transparent;
  background: var(--ui-fill-1);
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rp-output-files > div > small {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-2xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 一次任务有多份产物（分离音轨等）时逐条平铺：每条带标签、规格摘要、
   独立播放器与单条下载，stage 不再按视频的固定高度占位。 */
.rp-panel.rp-output--tracks {
  grid-template-rows: auto auto auto;
}

.rp-panel.rp-output--tracks .rp-stage,
.rp-record-preview .rp-panel.rp-output--tracks .rp-stage {
  height: auto;
  padding: var(--ui-space-3);
  overflow-y: auto;
}

.rp-track-list {
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.rp-track {
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-2);
  min-width: 0;
}

.rp-track-head {
  display: flex;
  align-items: baseline;
  gap: var(--ui-space-2);
}

.rp-track-head strong {
  font-size: var(--ui-font-size-sm);
  font-weight: var(--ui-font-weight-semibold);
}

.rp-track-head small {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-2xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rp-track-head a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  font-size: var(--ui-font-size-xs);
  white-space: nowrap;
}

.rp-track .rp-media {
  height: auto;
}

.rp-track .rp-media audio {
  width: calc(100% - 2 * var(--ui-space-3));
  margin: var(--ui-space-2) var(--ui-space-3);
}

.rp-track .rp-media :is(img, video) {
  height: auto;
  max-height: 320px;
}

/* 分享 */
.rp-share-dialog {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
}

.rp-share-dialog h2 {
  margin-bottom: var(--ui-space-3);
}

.rp-share-dialog p {
  color: var(--ui-muted);
  font-size: var(--ui-font-size-sm);
}

.rp-share-dialog label {
  margin-top: var(--ui-space-4);
}

.rp-share-dialog input {
  width: 100%;
}

.rp-share-dialog footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--ui-space-3);
  margin-top: var(--ui-space-6);
}

/* 公开分享页：独立文档，自身滚动（工作台外壳的整页不滚动规则不适用）。 */
html:has(.rp-share-page),
body:has(.rp-share-page) {
  height: auto;
  overflow: auto;
}

body:has(.rp-share-page) {
  display: block;
}

main.rp-share-page {
  display: block;
  width: min(100% - 32px, 960px);
  height: auto;
  min-height: 100dvh;
  margin: 0 auto;
  padding: var(--ui-space-9) 0 var(--ui-space-8);
  overflow: visible;
}

.rp-share-page > h1 {
  margin-bottom: var(--ui-space-2);
  font-size: var(--ui-font-size-3xl);
}

.rp-share-page > p {
  color: var(--ui-muted);
  font-size: var(--ui-font-size-md);
}

.rp-share-output {
  display: grid;
  gap: var(--ui-space-4);
  margin: var(--ui-space-7) 0;
  padding: var(--ui-space-6);
  border: 0;
  border-radius: var(--ui-radius-xl);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-card);
}

.rp-share-output h2 {
  overflow-wrap: anywhere;
  font-size: var(--ui-font-size-lg);
}

.rp-share-output :is(video, img) {
  display: block;
  width: 100%;
  max-height: 70dvh;
  border-radius: var(--ui-radius-lg);
  background: var(--ui-surface-muted);
  object-fit: contain;
}

.rp-share-output audio {
  width: 100%;
}

.rp-share-output a {
  display: inline-flex;
  justify-self: start;
  align-items: center;
  min-height: var(--ui-control-height);
  padding: 0 var(--ui-space-5);
  border-radius: var(--ui-radius-pill);
  background: var(--ui-action-primary);
  color: var(--ui-action-on-primary);
  font-size: var(--ui-font-size-sm);
  font-weight: var(--ui-font-weight-medium);
}

.rp-share-output a:hover {
  background: var(--ui-action-primary-hover);
  text-decoration: none;
}

.rp-has-scenes .rp-panels > .rp-panel-host:last-child {
  display: none;
}

.rp-has-scenes:has(.is-original) [data-record-scene] {
  display: none;
}

/* A narrow record card stacks the result above the facts, and the fact
   sections pair up in two columns so the page stays short. */
@container record (max-width: 860px) {
  .rp-record-workspace {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "head"
      "preview"
      "main";
  }

  .rp-record-preview .rp-stage {
    height: clamp(260px, 52dvh, 520px);
  }
}

@container record (min-width: 600px) and (max-width: 860px) {
  .rp-record-main [data-record-overview] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--ui-space-7);
  }

  .rp-record-main [data-record-overview] > .rp-summary-section:first-child {
    padding-top: var(--ui-space-5);
  }
}

@media (max-width: 1280px) {
  [id="results-view"] .results-layout {
    grid-template-columns: 288px minmax(0, 1fr);
    gap: var(--ui-space-5);
  }

  [id="results-view"] .comparison {
    padding: var(--ui-space-5);
  }
}

@media (max-width: 768px) {
  [id="results-view"] .results-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  [id="results-view"] .comparison {
    padding: var(--ui-space-4);
  }
}

@media (max-width: 480px) {
  .rp-summary-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .rp-bottom-actions :is(button, a):not(.ui-actions *) {
    flex: 1 1 auto;
  }
}

/* ---------- 视频反推复制 record (views/replication-record.js) ----------
 * One project's whole record: the heading, the player beside the open 成片's
 * steps, 原片拆解 next to the inputs, the fee list and each task's details.
 * Steps are hairline rows; files and fees sit in grey wells inside them. A
 * narrow record card stacks every pair. */
.rr-record {
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-6);
}

.rr-record .comparison-title {
  margin: 0;
  padding-bottom: var(--ui-space-4);
  border-bottom: 1px solid var(--ui-line);
}

.rr-record .comparison-title h2 {
  font-size: var(--ui-font-size-xl);
  line-height: var(--ui-line-height-snug);
}

.rr-main {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 1fr);
  gap: var(--ui-space-6) var(--ui-space-7);
  align-items: start;
}

.rr-more {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ui-space-6) var(--ui-space-7);
  padding-top: var(--ui-space-5);
  border-top: 1px solid var(--ui-line);
}

.rr-stage {
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-3);
  min-width: 0;
}

.rr-generations,
.rr-views {
  flex-wrap: wrap;
  align-self: flex-start;
  max-width: 100%;
}

/* More 成片 than fit wrap onto a second row of the same track. */
.rr-generations {
  border-radius: var(--ui-radius-lg);
}

.rr-generations button,
.rr-views button {
  flex: 0 0 auto;
  white-space: nowrap;
}

.rr-player {
  position: relative;
  display: grid;
  place-items: center;
  height: clamp(280px, 58dvh, 620px);
  overflow: hidden;
  border-radius: var(--ui-radius-md);
  background: var(--ui-surface-muted);
}

/* Pinned to the box: a percentage height inside the grid row would resolve
   against the video's own height, pushing its lower half and the controls
   out of view. The picture is letterboxed inside instead. */
.rr-player video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent;
}

.rr-player-empty {
  align-content: center;
  gap: var(--ui-space-2);
  color: var(--ui-muted);
  font-size: var(--ui-font-size-sm);
}

.rr-player-empty svg {
  width: 28px;
  height: 28px;
}

.rr-stage-note {
  display: flex;
  align-items: center;
  gap: var(--ui-space-2);
}

.rr-stage-note svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--ui-accent);
  animation: ui-spin 1s linear infinite;
}

.rr-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ui-space-2);
}

.rr-actions :is(button, a):not(.ui-actions *) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ui-space-2);
  min-height: 40px;
  padding: 0 var(--ui-space-4);
  border-radius: var(--ui-radius-pill);
  font-size: var(--ui-font-size-sm);
  font-weight: var(--ui-font-weight-medium);
  text-decoration: none;
}

.rr-actions :is(button, a):not(.primary, .ui-actions *) {
  border-color: transparent;
  background: var(--ui-fill-1);
  color: var(--ui-ink);
}

.rr-actions :is(button, a):not(.primary, .ui-actions *):hover:not(:disabled) {
  background: var(--ui-fill-2);
  color: var(--ui-ink-strong);
  text-decoration: none;
}

.rr-actions svg {
  width: 16px;
  height: 16px;
}

.rr-actions .ui-actions {
  margin-left: auto;
}

.rr-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--ui-space-1) var(--ui-space-3);
  margin-bottom: var(--ui-space-2);
}

.rr-section-head h3 {
  margin: 0;
  color: var(--ui-ink-strong);
  font-size: var(--ui-font-size-lg);
  font-weight: var(--ui-font-weight-semibold);
}

.rr-section-head small,
.rr-note,
.rr-run-head {
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
  line-height: var(--ui-line-height-normal);
}

.rr-note,
.rr-run-head {
  margin: var(--ui-space-1) 0 0;
}

.rr-note.rr-error {
  color: var(--ui-danger);
}

.rr-step-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rr-step {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: var(--ui-space-3);
  padding: var(--ui-space-3) 0;
  border-bottom: 1px solid var(--ui-line);
}

.rr-step:last-child {
  border-bottom: 0;
}

.rr-step-mark {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--ui-fill-1);
  color: var(--ui-muted);
}

.rr-step-mark svg {
  width: 14px;
  height: 14px;
}

.rr-step[data-state="done"] .rr-step-mark {
  background: var(--ui-success-soft);
  color: var(--ui-success);
}

.rr-step[data-state="running"] .rr-step-mark {
  background: var(--ui-accent-soft);
  color: var(--ui-accent);
}

.rr-step[data-state="running"] .rr-step-mark svg {
  animation: ui-spin 1s linear infinite;
}

.rr-step[data-state="failed"] .rr-step-mark {
  background: var(--ui-danger-soft);
  color: var(--ui-danger);
}

.rr-step[data-state="attention"] .rr-step-mark {
  background: var(--ui-warning-soft);
  color: var(--ui-warning);
}

.rr-step-body {
  min-width: 0;
}

.rr-step-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--ui-space-1) var(--ui-space-2);
  min-height: 24px;
}

.rr-step-head strong {
  color: var(--ui-ink-strong);
  font-size: var(--ui-font-size-sm);
  font-weight: var(--ui-font-weight-semibold);
}

.rr-step-state {
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
}

.rr-step-charge {
  margin-left: auto;
  color: var(--ui-ink);
  font-size: var(--ui-font-size-sm);
  font-variant-numeric: tabular-nums;
}

.rr-files {
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-1);
  margin: var(--ui-space-2) 0 0;
  padding: var(--ui-space-2) var(--ui-space-3);
  border-radius: var(--ui-radius-md);
  background: var(--ui-surface-subtle);
  list-style: none;
}

.rr-file {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ui-space-1) var(--ui-space-3);
  min-height: 40px;
}

.rr-file-name {
  display: flex;
  flex: 1 1 140px;
  flex-direction: column;
  min-width: 0;
}

.rr-file-name strong {
  color: var(--ui-ink);
  font-size: var(--ui-font-size-sm);
  font-weight: var(--ui-font-weight-medium);
}

.rr-file-name small {
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
}

.rr-file audio {
  flex: 1 1 200px;
  max-width: 300px;
  height: 36px;
}

.rr-file-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ui-space-1);
}

.rr-file-actions :is(a, button) {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 32px;
  padding: 0 var(--ui-space-3);
  border: 0;
  border-radius: var(--ui-radius-pill);
  background: var(--ui-surface);
  box-shadow: none;
  color: var(--ui-accent);
  font-size: var(--ui-font-size-xs);
  font-weight: var(--ui-font-weight-medium);
  text-decoration: none;
}

.rr-file-actions :is(a, button):hover {
  background: var(--ui-accent-wash);
  text-decoration: none;
}

.rr-file-actions svg {
  width: 14px;
  height: 14px;
}

.rr-prompt summary {
  margin-top: var(--ui-space-2);
  color: var(--ui-accent);
  font-size: var(--ui-font-size-xs);
  cursor: pointer;
}

.rr-prompt pre {
  max-height: 260px;
  margin: var(--ui-space-2) 0 0;
  padding: var(--ui-space-3);
  overflow: auto;
  border-radius: var(--ui-radius-md);
  background: var(--ui-surface-subtle);
  color: var(--ui-ink);
  font: inherit;
  font-size: var(--ui-font-size-xs);
  line-height: var(--ui-line-height-normal);
  white-space: pre-wrap;
}

.rr-resume {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ui-space-2);
  margin-top: var(--ui-space-2);
}

.rr-warnings {
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-1);
  margin: var(--ui-space-3) 0 0;
  padding: var(--ui-space-3);
  border-radius: var(--ui-radius-md);
  background: var(--ui-warning-soft);
  color: var(--ui-ink);
  font-size: var(--ui-font-size-xs);
  list-style: none;
}

.rr-warnings li {
  display: flex;
  gap: var(--ui-space-2);
}

.rr-warnings svg {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  margin-top: 2px;
  color: var(--ui-warning);
}

.rr-subtotal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ui-space-2) var(--ui-space-3);
  margin-top: var(--ui-space-2);
  padding-top: var(--ui-space-3);
  border-top: 1px solid var(--ui-line);
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
}

.rr-subtotal strong {
  color: var(--ui-ink-strong);
  font-size: var(--ui-font-size-md);
  font-variant-numeric: tabular-nums;
}

.rr-subtotal button {
  margin-left: auto;
}

.rr-earlier {
  margin-top: var(--ui-space-2);
}

.rr-earlier > summary {
  color: var(--ui-accent);
  font-size: var(--ui-font-size-xs);
  cursor: pointer;
}

.rr-inputs {
  display: grid;
  gap: var(--ui-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.rr-inputs li {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--ui-space-3);
}

.rr-inputs button {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--ui-radius-sm);
  background: var(--ui-surface-muted);
  color: var(--ui-muted);
}

.rr-inputs img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rr-inputs span {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.rr-inputs strong {
  color: var(--ui-ink);
  font-size: var(--ui-font-size-sm);
  font-weight: var(--ui-font-weight-medium);
}

.rr-inputs small {
  overflow: hidden;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rr-inputs a {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--ui-accent);
}

.rr-inputs a:hover {
  background: var(--ui-accent-wash);
}

.rr-inputs a svg {
  width: 16px;
  height: 16px;
}

[data-rr-fees] {
  padding-top: var(--ui-space-5);
  border-top: 1px solid var(--ui-line);
}

.rr-fee-total {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--ui-space-1) var(--ui-space-3);
}

.rr-fee-total small,
.rr-fee-total span {
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
}

.rr-fee-total strong {
  color: var(--ui-ink-strong);
  font-size: var(--ui-font-size-2xl);
  font-weight: var(--ui-font-weight-semibold);
  font-variant-numeric: tabular-nums;
}

.rr-fee-list {
  margin: var(--ui-space-3) 0 0;
  padding: 0 var(--ui-space-4);
  border-radius: var(--ui-radius-md);
  background: var(--ui-surface-subtle);
}

.rr-task {
  border-bottom: 1px solid var(--ui-line);
}

.rr-task:last-child {
  border-bottom: 0;
}

.rr-task > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ui-space-3);
  padding: var(--ui-space-3) 0;
  cursor: pointer;
}

.rr-task > summary > span:first-child {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.rr-task > summary strong {
  color: var(--ui-ink);
  font-size: var(--ui-font-size-sm);
  font-weight: var(--ui-font-weight-medium);
}

.rr-task > summary small {
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
}

.rr-fee-amount {
  flex: 0 0 auto;
  color: var(--ui-ink-strong);
  font-size: var(--ui-font-size-sm);
  font-variant-numeric: tabular-nums;
}

.rr-task-body {
  padding-bottom: var(--ui-space-4);
}

.rr-task-body .rp-records h3:first-child {
  margin-top: 0;
}

@media (pointer: coarse) {
  .rr-actions :is(button, a):not(.ui-actions *),
  .rr-file-actions :is(a, button) {
    min-height: var(--ui-touch-target);
  }
}

@container record (max-width: 860px) {
  .rr-main,
  .rr-more {
    grid-template-columns: minmax(0, 1fr);
  }

  .rr-player {
    height: clamp(240px, 52dvh, 520px);
  }
}

}
/* /styles/pages/regeneration.css */
@layer pages {
/* 历史记录里「重新生成」的两版对照（入口已下线，已有的第二版照常展示）。 */

.rp-regen-spinner {
  width: 28px;
  height: 28px;
  border: 2px solid var(--ui-line);
  border-top-color: var(--ui-action-primary);
  border-radius: var(--ui-radius-pill);
  animation: rp-regen-spin 900ms linear infinite;
}
@keyframes rp-regen-spin { to { transform: rotate(1turn); } }

/* 两版结果对照：左侧大窗播放，右侧两个等大小窗切换。 */
.rp-regen-compare { display: grid; gap: var(--ui-space-3); grid-template-columns: minmax(0, 1fr) 132px; }
.rp-regen-compare[hidden] { display: none; }
.rp-regen-compare-stage { position: relative; min-width: 0; }
.rp-regen-compare-stage video {
  display: block;
  width: 100%;
  height: clamp(240px, 34vw, 390px);
  background: var(--ui-surface-subtle);
  border-radius: var(--ui-radius-md);
  object-fit: contain;
}
.rp-regen-compare-status { margin: var(--ui-space-2) 0 0; color: var(--ui-muted); font-size: var(--ui-font-size-2xs); }
.rp-regen-compare-list { display: grid; gap: var(--ui-space-2); margin: 0; padding: 0; list-style: none; align-content: start; }
.rp-regen-compare-list li { display: grid; gap: var(--ui-space-1); }
/* 第二版还在生成：占位块与可播放的小窗同样大小，位置不跳，只是不可播放、不可下载。 */
.rp-regen-compare-waiting {
  display: grid;
  gap: var(--ui-space-1);
  padding: var(--ui-space-1);
  border: 1px dashed var(--ui-line);
  border-radius: var(--ui-radius-sm);
}
.rp-regen-compare-cover.is-pending { color: var(--ui-action-primary); }
.rp-regen-compare-cover.is-pending .rp-regen-spinner { width: 20px; height: 20px; border-width: 2px; }
.rp-regen-compare-waiting .rp-regen-compare-copy small { color: var(--ui-action-primary); }
.rp-regen-compare-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ui-space-1);
  min-height: 32px;
  color: var(--ui-action-primary);
  font-size: var(--ui-font-size-2xs);
  text-decoration: none;
}
.rp-regen-compare-download svg { width: 14px; height: 14px; }
.rp-regen-compare-list button {
  display: grid;
  gap: var(--ui-space-1);
  width: 100%;
  min-height: var(--ui-touch-target);
  padding: var(--ui-space-1);
  text-align: left;
  background: var(--ui-surface);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-sm);
}
.rp-regen-compare-list button[aria-pressed="true"] { border-color: var(--ui-action-primary); background: var(--ui-action-selection); }
.rp-regen-compare-cover { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ui-surface-subtle); border-radius: var(--ui-radius-xs); }
.rp-regen-compare-cover img { width: 100%; height: 100%; object-fit: cover; }
.rp-regen-compare-cover svg { width: 18px; height: 18px; color: var(--ui-muted); }
.rp-regen-compare-copy { min-width: 0; }
.rp-regen-compare-copy strong { display: block; font-size: var(--ui-font-size-2xs); }
.rp-regen-compare-copy small { color: var(--ui-muted); font-size: var(--ui-font-size-2xs); }

.rp-has-regeneration .rp-panels > .rp-panel-host:last-child { display: none; }
.rp-has-regeneration:has(.is-original) [data-regeneration-compare] { display: none; }

@media (max-width: 768px) {
  .rp-regen-compare { grid-template-columns: minmax(0, 1fr); }
  .rp-regen-compare-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

}
/* /styles/pages/batch.css */
@layer pages {
/*
 * Pages layer — 批量生产（SCREEN-007）。
 *
 * 三段式流程：项目来源 → 草稿编辑（左：Prompt/素材；右：参数/批次）→ 结果对比。
 * 面板统一中性卡片；来源卡片选中态使用单一紫色强调；
 * .bp-undo 撤销条与素材库撤销条同构（文字 + 右侧动作）。
 */
/* ---------------- 面板与区块 ---------------- */
.bp-panel {
  min-width: 0;
  margin-bottom: var(--ui-space-5);
  padding: var(--ui-space-6);
  border: 0;
  border-radius: var(--ui-radius-lg);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-card);
}

.bp-panel h3 {
  margin: 0 0 var(--ui-space-3);
  color: var(--ui-ink);
  font-size: var(--ui-font-size-md);
  font-weight: var(--ui-font-weight-semibold);
}

.bp-panel h4 {
  margin: 0 0 var(--ui-space-1);
  color: var(--ui-ink);
  font-size: var(--ui-font-size-sm);
  font-weight: var(--ui-font-weight-semibold);
}

.bp-panel p {
  line-height: var(--ui-line-height-relaxed);
}

.bp-panel pre {
  max-height: 240px;
  padding: var(--ui-space-3);
  overflow: auto;
  border: 0;
  border-radius: var(--ui-radius-md);
  background: var(--ui-surface-subtle);
  color: var(--ui-ink);
  font-size: var(--ui-font-size-2xs);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.bp-panel details {
  margin: var(--ui-space-3) 0;
}

.bp-panel summary {
  display: flex;
  align-items: center;
  min-height: 40px;
  color: var(--ui-accent);
  cursor: pointer;
  font-size: var(--ui-font-size-sm);
  font-weight: var(--ui-font-weight-medium);
}

.bp-muted {
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
}

/* 面板内标签与字段间距 */
.bp-panel label {
  display: block;
  margin: var(--ui-space-3) 0;
  color: var(--ui-ink-soft);
  font-size: var(--ui-font-size-xs);
}

.bp-panel label > input,
.bp-panel label > select,
.bp-panel label > textarea {
  margin-top: var(--ui-space-1);
}

.bp-panel textarea {
  font-size: var(--ui-font-size-sm);
  line-height: var(--ui-line-height-relaxed);
}

.bp-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ui-space-2);
  margin: var(--ui-space-3) 0;
}

.bp-toolbar > input {
  flex: 1 1 160px;
  min-width: 160px;
  margin: 0;
}

.bp-toolbar > label {
  display: flex;
  align-items: center;
  gap: var(--ui-space-2);
  margin: 0;
}

.bp-toolbar > label > select {
  width: auto;
  margin: 0;
}

.bp-status {
  min-height: 22px;
}

.bp-status,
[id="bp-count-summary"] {
  font-size: var(--ui-font-size-2xs);
}

/* ---------------- 项目来源 ---------------- */
.bp-source-picker {
  margin: var(--ui-space-3) 0;
  border: 0;
  border-radius: var(--ui-radius-md);
  background: var(--ui-surface-subtle);
}

.bp-source-picker > summary {
  padding: var(--ui-space-2) var(--ui-space-3);
}

.bp-source-picker > :not(summary) {
  margin-right: var(--ui-space-3);
  margin-left: var(--ui-space-3);
}

.bp-source-picker > :last-child {
  margin-bottom: var(--ui-space-3);
}

.bp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--ui-space-3);
}

.bp-source {
  display: flex;
  height: auto;
  min-width: 0;
  flex-direction: column;
  align-items: stretch;
  gap: var(--ui-space-2);
  padding: var(--ui-space-3);
  border: 0;
  border-radius: var(--ui-radius-md);
  background: var(--ui-surface);
  box-shadow: 0 0 0 1px var(--ui-line);
  text-align: left;
  white-space: normal;
  transition: box-shadow var(--ui-duration-normal) var(--ui-ease-out), transform var(--ui-duration-normal) var(--ui-ease-out), background-color var(--ui-duration-fast) var(--ui-ease-standard);
}

.bp-source:hover:not(:disabled) {
  border-color: transparent;
  background: var(--ui-surface);
  box-shadow: 0 0 0 1px var(--ui-line), var(--ui-shadow-hover);
  transform: translateY(-2px);
}

.bp-source[aria-pressed="true"],
.bp-source[aria-pressed="true"]:hover:not(:disabled) {
  background: var(--ui-accent-wash);
  outline: none;
  box-shadow: 0 0 0 2px var(--ui-accent);
}

.bp-source strong,
.bp-media strong {
  color: var(--ui-ink-strong);
  font-size: var(--ui-font-size-sm);
  font-weight: var(--ui-font-weight-semibold);
  overflow-wrap: anywhere;
}

.bp-source small,
.bp-media small {
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
}

.bp-thumbs {
  display: flex;
  height: 72px;
  gap: var(--ui-space-1);
  overflow: hidden;
}

.bp-thumbs img {
  width: 72px;
  height: 72px;
  border-radius: var(--ui-radius-sm);
  object-fit: cover;
}

.bp-thumbs > span {
  display: grid;
  width: 72px;
  height: 72px;
  place-items: center;
  border: 0;
  border-radius: var(--ui-radius-sm);
  background: var(--ui-surface-subtle);
  color: var(--ui-muted);
  font-size: var(--ui-font-size-2xs);
}

.bp-excerpt {
  display: -webkit-box;
  min-height: 36px;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
  line-height: var(--ui-line-height-normal);
}

/* ---------------- 编辑区 ---------------- */
.bp-editor {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.bp-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--ui-space-6);
  align-items: start;
}

.bp-layout textarea {
  width: 100%;
  min-height: 220px;
  resize: vertical;
}

.bp-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ui-space-3);
}

.bp-form label {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--ui-space-1);
  margin: 0;
}

.bp-form input,
.bp-form select {
  width: 100%;
  margin: 0;
}

/* ---------------- 素材卡片 ---------------- */
.bp-materials {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: var(--ui-space-3);
  margin: var(--ui-space-3) 0;
}

.bp-media {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--ui-space-2);
  padding: var(--ui-space-3);
  border: 0;
  border-radius: var(--ui-radius-md);
  background: var(--ui-surface);
  box-shadow: 0 0 0 1px var(--ui-line);
}

.bp-media video,
.bp-media img {
  width: 100%;
  height: 160px;
  border-radius: var(--ui-radius-sm);
  background: var(--ui-ink);
  object-fit: contain;
}

.bp-media audio {
  width: 100%;
  min-width: 0;
}

.bp-media .bp-toolbar {
  margin: 0;
  margin-top: auto;
}

.bp-media .bp-toolbar button {
  min-height: 30px;
  padding: 4px var(--ui-space-2);
  font-size: var(--ui-font-size-2xs);
}

.bp-file {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 var(--ui-space-4);
  overflow: hidden;
  border: 0;
  border-radius: var(--ui-radius-pill);
  background: var(--ui-fill-1);
  color: var(--ui-ink);
  cursor: pointer;
  font-size: var(--ui-font-size-xs);
}

.bp-file:hover {
  background: var(--ui-fill-2);
}

.bp-panel label.bp-file input,
.bp-file input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  cursor: pointer;
  opacity: 0;
}

/* ---------------- 撤销条与状态 ---------------- */
.bp-undo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ui-space-3);
  margin-bottom: var(--ui-space-3);
  padding: var(--ui-space-3) var(--ui-space-4);
  border: 0;
  border-radius: var(--ui-radius-md);
  background: var(--ui-success-soft);
  color: var(--ui-success);
  font-size: var(--ui-font-size-xs);
}

.bp-undo button {
  flex: 0 0 auto;
}

.bp-warning {
  padding: var(--ui-space-3) var(--ui-space-4);
  border: 0;
  border-radius: var(--ui-radius-md);
  background: var(--ui-warning-soft);
  color: var(--ui-warning);
  font-size: var(--ui-font-size-xs);
  line-height: var(--ui-line-height-relaxed);
}

.bp-panel.bp-warning {
  padding: var(--ui-space-4);
}

.bp-error {
  color: var(--ui-danger);
  font-size: var(--ui-font-size-xs);
}

/* ---------------- 核对面板 ---------------- */
.bp-confirm {
  box-shadow: 0 0 0 2px var(--ui-accent-edge), var(--ui-shadow-card);
}

.bp-confirm > p {
  margin: var(--ui-space-2) 0;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-sm);
}

.bp-confirm > p strong {
  color: var(--ui-ink);
  font-variant-numeric: tabular-nums;
}

.bp-confirm ol {
  max-height: 220px;
  padding-left: var(--ui-space-6);
  overflow: auto;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
  line-height: var(--ui-line-height-relaxed);
}

.bp-confirm .primary {
  margin-top: var(--ui-space-2);
}

/* ---------------- 素材选择对话框 ---------------- */
.bp-library {
  width: min(880px, calc(100vw - 32px));
  max-height: calc(100dvh - 48px);
}

.bp-library h3 {
  margin: 0 0 var(--ui-space-3);
  font-size: var(--ui-font-size-md);
}

.bp-library > input[type="search"] {
  margin-bottom: var(--ui-space-3);
}

.bp-library .bp-grid {
  max-height: 55dvh;
  padding-right: var(--ui-space-1);
  overflow: auto;
  overscroll-behavior: contain;
}

.bp-library .bp-media {
  cursor: pointer;
}

.bp-library .bp-media > span {
  display: flex;
  align-items: center;
  gap: var(--ui-space-2);
  color: var(--ui-ink);
  font-size: var(--ui-font-size-xs);
}

.bp-library .bp-media input {
  flex: 0 0 auto;
  width: auto;
  margin: 0;
}

.bp-library img {
  pointer-events: none;
}

.bp-media.bp-selected {
  background: var(--ui-accent-wash);
  box-shadow: 0 0 0 2px var(--ui-accent);
}

/* ---------------- 结果区 ---------------- */
.bp-results-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ui-space-2) var(--ui-space-4);
  margin-bottom: var(--ui-space-3);
}

.bp-results-head h3 {
  margin: 0;
}

.bp-results-head label {
  display: flex;
  align-items: center;
  gap: var(--ui-space-2);
  margin: 0;
  font-size: var(--ui-font-size-xs);
}

.bp-results-head input {
  width: auto;
  margin: 0;
}

.bp-batch {
  margin-top: var(--ui-space-4);
}

.bp-batch > .bp-muted {
  margin: 0 0 var(--ui-space-3);
}

.bp-media .bp-empty {
  height: 160px;
  padding: var(--ui-space-3);
}

/* ---------------- 触控目标 ---------------- */
@media (pointer: coarse) {
  .bp-media .bp-toolbar button,
  .bp-file,
  .bp-undo button,
  .bp-source-picker > summary,
  .bp-toolbar button,
  .bp-toolbar > input,
  .bp-toolbar select,
  .bp-form input,
  .bp-form select {
    min-height: var(--ui-touch-target);
  }

  .bp-media .bp-toolbar button,
  .bp-undo button,
  .bp-toolbar button {
    min-width: var(--ui-touch-target);
  }

  .bp-results-head label {
    min-height: var(--ui-touch-target);
  }

  .bp-results-head input {
    width: var(--ui-space-5);
    height: var(--ui-space-5);
    min-height: var(--ui-space-5);
  }
}

/* ---------------- 窄屏 ---------------- */
@media (max-width: 768px) {
  .bp-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .bp-panel {
    padding: var(--ui-space-4);
  }
}

@media (max-width: 480px) {
  .bp-form,
  .bp-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .bp-materials {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Source selection, editing and review share a stable page rhythm. */
.bp-overview {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ui-space-4);
  margin-bottom: var(--ui-space-6);
}

.bp-steps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ui-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-sm);
}

.bp-steps li {
  display: flex;
  align-items: center;
  gap: var(--ui-space-2);
}

.bp-steps li > span {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: var(--ui-radius-pill);
  background: var(--ui-fill-2);
  font-size: var(--ui-font-size-2xs);
  font-weight: var(--ui-font-weight-semibold);
}

.bp-steps li + li::before {
  width: 32px;
  height: 1px;
  margin-right: var(--ui-space-2);
  background: var(--ui-line-strong);
  content: '';
}

.bp-steps [aria-current="step"] {
  color: var(--ui-ink-strong);
  font-weight: var(--ui-font-weight-medium);
}

.bp-steps [aria-current="step"] > span {
  background: var(--ui-accent);
  color: var(--ui-action-on-primary);
}

.bp-draft-tools .ui-actions-list {
  width: min(320px, calc(100vw - 32px));
  padding: var(--ui-space-4);
}

.bp-source-panel .bp-source-picker {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
}

.bp-source-panel .bp-source-picker > summary {
  min-height: var(--ui-touch-target);
  padding: var(--ui-space-2) 0;
  color: var(--ui-ink);
  font-size: var(--ui-font-size-lg);
  font-weight: var(--ui-font-weight-semibold);
}

.bp-source-panel .bp-source-picker > :not(summary) {
  margin-inline: 0;
}

.bp-source-panel .bp-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: var(--ui-space-4);
}

.bp-source {
  padding: var(--ui-space-4);
  border-radius: var(--ui-radius-lg);
}

.bp-panel h3 {
  font-size: var(--ui-font-size-lg);
  margin-bottom: var(--ui-space-4);
}

.bp-panel :is(input:not([type="checkbox"]), select),
.bp-toolbar button,
.bp-history > summary {
  min-height: var(--ui-touch-target);
}

.bp-layout > div:last-child {
  position: sticky;
  top: 0;
}

.bp-history > summary {
  display: flex;
  align-items: center;
  font-weight: var(--ui-font-weight-semibold);
}

.bp-results-panel.is-empty {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ui-space-4);
  border: 1px dashed var(--ui-line-strong);
  background: transparent;
  box-shadow: none;
}

.bp-results-panel.is-empty .bp-results-head,
.bp-results-panel.is-empty .bp-empty {
  margin: 0;
  padding: 0;
}

@media (max-width: 1024px) {
  .bp-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .bp-layout > div:last-child {
    position: static;
  }
}

/* Keep draft context compact so editing starts near the page heading. */
.bp-editor > .bp-panel:first-child {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
}

.bp-editor > .bp-panel:first-child p {
  margin: 8px 0 0;
}

.bp-source-panel {
  padding-block: 12px;
}

.bp-video-settings summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  margin-top: 8px;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
}

.bp-video-settings summary::before {
  content: "›";
  margin-right: 8px;
  transition: transform var(--ui-duration-fast) var(--ui-ease-standard);
}

.bp-video-settings[open] summary::before {
  transform: rotate(90deg);
}

.bp-editor > .bp-panel:first-child .bp-toolbar,
.bp-editor > .bp-panel:first-child .bp-status {
  margin: 0;
}

.bp-editor > .bp-panel:first-child > p,
.bp-editor > .bp-panel:first-child [id="bp-source-status"] {
  grid-column: 1 / -1;
}

.bp-editor > .bp-panel:first-child [id="bp-source-status"]:empty {
  display: none;
}

.bp-upload-progress {
  display: block;
  width: 100%;
  height: 6px;
  margin-top: 6px;
  border: 0;
  accent-color: var(--accent);
}

/* 原版音频开关：整行放置；.bp-form 的纵向 label / 通配输入尺寸只针对表单字段 */
.bp-form .original-audio-option {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--ui-space-1);
  min-height: var(--ui-touch-target);
}

.bp-form .original-audio-option .ui-switch {
  flex-direction: row;
  align-items: center;
  gap: var(--ui-space-2);
  margin: 0;
  color: var(--ui-ink);
  font-size: var(--ui-font-size-sm);
}

.bp-form .original-audio-option .ui-switch input[type="checkbox"] {
  width: 28px;
  margin: 0;
}

}
/* /styles/pages/quick.css */
@layer pages {
/*
 * Pages layer — 快速生成 embedded in the workbench (#prompt-studio-view).
 *
 * The quick-generation stylesheet (prompt-studio/style.css) is shared with
 * the standalone page and loads in the legacy layer here, so the component
 * layer's button and field rules win over it. This file restores the few
 * pieces whose look depends on overriding those component defaults: the
 * reference drop well, the count and spec chips, and the model mark.
 */
[id="prompt-studio-view"] .quick-layout .empty-state {
  min-height: 148px;
  padding: var(--ui-space-6);
  border: 1px dashed var(--ui-line-strong);
  border-radius: var(--ui-radius-lg);
  background: var(--ui-surface-subtle);
  box-shadow: none;
  color: var(--ui-muted);
  white-space: normal;
}

[id="prompt-studio-view"] .quick-layout .empty-state:hover:not(:disabled) {
  border-color: var(--ui-accent-edge);
  background: var(--ui-accent-wash);
}

[id="prompt-studio-view"] .quick-layout .empty-state:active:not(:disabled) {
  transform: none;
}

[id="prompt-studio-view"] .quick-layout .empty-art {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ui-surface);
}

[id="prompt-studio-view"] [id="asset-count"] {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border: 0;
  border-radius: var(--ui-radius-pill);
  background: var(--ui-fill-1);
  color: var(--ui-muted);
  font: var(--ui-font-weight-medium) var(--ui-font-size-2xs) / 1 var(--ui-font-family-sans);
  font-variant-numeric: tabular-nums;
}

[id="prompt-studio-view"] .fixed-specs {
  gap: var(--ui-space-1);
  font-family: var(--ui-font-family-sans);
}

[id="prompt-studio-view"] .fixed-specs > span {
  padding: 2px var(--ui-space-2);
  border: 0;
  border-radius: var(--ui-radius-pill);
  background: var(--ui-fill-1);
  color: var(--ui-ink-soft);
  font-size: var(--ui-font-size-2xs);
  font-weight: var(--ui-font-weight-medium);
}

[id="prompt-studio-view"] .model-mark {
  border: 0;
  border-radius: 50%;
  background: var(--ui-accent-soft);
  color: var(--ui-accent-strong);
  font: var(--ui-font-weight-semibold) var(--ui-font-size-sm) / 1 var(--ui-font-family-sans);
}

[id="prompt-studio-view"] .generation-submit {
  border-top-color: var(--ui-line);
}

[id="prompt-studio-view"] .generation-note {
  border-top-color: var(--ui-line);
}

[id="prompt-studio-view"] .page-footer {
  margin-top: var(--ui-space-5);
}

}
/* /styles/pages/product-fission.css */
@layer pages {
/*
 * Pages layer — 素材裂变 workspace. Composition only: the header with the
 * stepper and project actions, a sticky 商品素材 column beside the step card,
 * status strips, product form, direction cards, storyboard beats and the
 * result list. The page scrolls as a whole; the materials column stays in
 * reach. The administrator's 参考积累 view keeps its fl-* rules at the end.
 */
.fission-view > .ui-page { max-width: var(--ui-page-width-wide); }
.pf-workspace { display: grid; gap: var(--ui-space-4); min-width: 0; }
.pf-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--ui-space-3) var(--ui-space-5); }
.pf-steps { flex: 1 1 auto; min-width: 0; }
.pf-step { gap: var(--ui-space-2); min-height: 32px; padding: 0 var(--ui-space-2); border-color: transparent; background: transparent; box-shadow: none; color: var(--ui-ink-soft); font-size: var(--ui-font-size-sm); }
.pf-step:hover:not(:disabled) { background: var(--ui-fill-1); }
.pf-head-actions { display: flex; align-items: center; gap: var(--ui-space-2); min-width: 0; }
.pf-head-actions .pf-new { gap: var(--ui-space-2); min-height: 48px; padding: 0 var(--ui-space-5); }
.pf-layout { display: grid; grid-template-columns: 320px minmax(0, 1fr); align-items: start; gap: var(--ui-space-4); min-width: 0; }
.pf-panel { display: flex; flex-direction: column; gap: var(--ui-space-5); min-width: 0; padding: var(--ui-space-6); border-radius: var(--ui-radius-lg); background: var(--ui-surface); box-shadow: var(--ui-shadow-card); }
/* The materials stay in reach while a long storyboard scrolls the page. */
.pf-inputs { position: sticky; top: var(--ui-space-4); max-height: calc(100dvh - var(--ui-topbar-height) - var(--ui-space-8)); overflow-y: auto; overscroll-behavior: contain; }
.pf-main { min-height: 480px; }
.pf-body { display: grid; gap: var(--ui-space-5); min-width: 0; }
.pf-panel-title { margin: 0; color: var(--ui-ink-strong); font-size: var(--ui-font-size-lg); font-weight: var(--ui-font-weight-semibold); }
.pf-field { display: grid; gap: var(--ui-space-2); min-width: 0; }
.pf-field-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ui-space-2); color: var(--ui-ink-soft); font-size: var(--ui-font-size-xs); font-weight: var(--ui-font-weight-medium); }
.pf-field-head em { color: var(--ui-muted); font-style: normal; font-weight: var(--ui-font-weight-regular); }
.pf-field textarea, .pf-field input { width: 100%; }
.pf-field textarea { resize: vertical; }
.pf-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ui-space-2); margin: 0; padding: 0; list-style: none; }
.pf-tile { position: relative; display: grid; gap: var(--ui-space-1); min-width: 0; }
.pf-tile-thumb { position: relative; display: grid; place-items: center; aspect-ratio: 1; overflow: hidden; border-radius: var(--ui-radius-sm); background: var(--ui-surface-muted); color: var(--ui-muted); }
.pf-tile-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.pf-tile-name { overflow: hidden; color: var(--ui-ink); font-size: var(--ui-font-size-xs); text-overflow: ellipsis; white-space: nowrap; }
.pf-tile-remove { position: absolute; top: var(--ui-space-1); right: var(--ui-space-1); width: 28px; height: 28px; min-height: 28px; background: var(--ui-surface-overlay); }
.pf-tile-remove svg { width: 14px; height: 14px; }
.pf-dropzone { display: flex; align-items: center; gap: var(--ui-space-4); width: 100%; min-height: 104px; padding: var(--ui-space-4); border: 1px dashed var(--ui-line-strong); border-radius: var(--ui-radius-lg); background: var(--ui-surface-subtle); box-shadow: none; color: var(--ui-ink); text-align: left; white-space: normal; }
.pf-dropzone:hover:not(:disabled) { border-color: var(--ui-accent-edge); background: var(--ui-accent-wash); }
.pf-dropzone.is-small { min-height: 60px; padding: var(--ui-space-3) var(--ui-space-4); }
.pf-dropzone-icon { display: grid; flex: 0 0 auto; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--ui-surface); color: var(--ui-accent); }
.pf-dropzone-copy { display: grid; gap: 2px; min-width: 0; }
.pf-dropzone-copy strong { color: var(--ui-ink-strong); font-size: var(--ui-font-size-sm); font-weight: var(--ui-font-weight-semibold); }
.pf-dropzone-copy small, .pf-hint, .pf-note { margin: 0; color: var(--ui-muted); font-size: var(--ui-font-size-xs); line-height: var(--ui-line-height-snug); }
.pf-notes { min-height: 88px; }
/* The interpret action closes the column; in a sticky scroller it sits in
   the bottom padding (negative inset) so nothing shows beneath it. */
.pf-actions { position: sticky; bottom: calc(var(--ui-space-6) * -1); z-index: 1; display: grid; gap: var(--ui-space-2); margin-bottom: calc(var(--ui-space-6) * -1); padding: var(--ui-space-3) 0 var(--ui-space-6); border-top: 1px solid var(--ui-line); background: var(--ui-surface); }
.pf-primary { width: 100%; min-height: 48px; font-size: var(--ui-font-size-md); }
.pf-note { text-align: center; }
/* Status strips: tinted wells without borders. */
.pf-strip { display: flex; align-items: flex-start; gap: var(--ui-space-3); margin: 0; padding: var(--ui-space-3) var(--ui-space-4); border-radius: var(--ui-radius-md); color: var(--ui-ink); font-size: var(--ui-font-size-sm); }
.pf-strip > div { display: grid; flex: 1 1 auto; gap: 2px; min-width: 0; }
.pf-strip small { color: var(--ui-ink-soft); font-size: var(--ui-font-size-xs); }
.pf-strip > svg { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; }
.pf-strip.is-info { align-items: center; background: var(--ui-accent-wash); }
.pf-strip.is-warning { background: var(--ui-warning-soft); }
.pf-strip.is-warning > svg { color: var(--ui-warning); }
.pf-strip.is-danger { background: var(--ui-danger-soft); }
.pf-strip.is-danger > svg { color: var(--ui-danger); }
[data-region="status"]:not(:empty) { margin-bottom: var(--ui-space-5); }
.pf-error-detail summary { color: var(--ui-ink-soft); font-size: var(--ui-font-size-xs); cursor: pointer; }
.pf-error-detail pre { max-height: 160px; margin: var(--ui-space-2) 0 0; overflow: auto; color: var(--ui-ink-soft); font-size: var(--ui-font-size-xs); white-space: pre-wrap; overflow-wrap: anywhere; }
.pf-spinner { flex: 0 0 auto; width: 18px; height: 18px; border: 2px solid var(--ui-accent-soft); border-top-color: var(--ui-accent); border-radius: 50%; animation: pf-spin 900ms linear infinite; }
@keyframes pf-spin {
  to { transform: rotate(360deg); }
}
.pf-skeleton { display: grid; gap: var(--ui-space-3); min-height: 280px; align-content: start; }
.pf-skeleton .ui-skeleton:nth-child(even) { width: 72%; }
.pf-empty { display: grid; align-content: center; justify-items: center; gap: var(--ui-space-2); min-height: 360px; padding: var(--ui-space-7); border-radius: var(--ui-radius-lg); background: var(--ui-surface-subtle); color: var(--ui-muted); text-align: center; }
.pf-empty strong { color: var(--ui-ink-strong); font-size: var(--ui-font-size-lg); font-weight: var(--ui-font-weight-semibold); }
.pf-empty p { max-width: 36ch; margin: 0; font-size: var(--ui-font-size-sm); }
.pf-empty-icon, .pf-guide-icon { display: grid; flex: 0 0 auto; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--ui-surface); color: var(--ui-accent); }
/* First step: what the page does, in four steps. */
.pf-intro { display: grid; gap: var(--ui-space-5); }
.pf-guide { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ui-space-3); margin: 0; padding: 0; list-style: none; }
.pf-guide li { display: flex; align-items: flex-start; gap: var(--ui-space-3); padding: var(--ui-space-4); border-radius: var(--ui-radius-md); background: var(--ui-surface-subtle); }
.pf-guide .pf-guide-icon { width: 40px; height: 40px; }
.pf-guide strong { color: var(--ui-ink-strong); font-size: var(--ui-font-size-sm); }
.pf-guide p { margin: 2px 0 0; color: var(--ui-muted); font-size: var(--ui-font-size-xs); }
.pf-step-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ui-space-3); }
.pf-step-head > div { display: grid; gap: var(--ui-space-1); min-width: 0; }
.pf-step-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: var(--ui-space-3); padding-top: var(--ui-space-2); }
/* 确认商品: short facts side by side, lists full width. */
.pf-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ui-space-4); }
.pf-form .pf-field.is-wide { grid-column: 1 / -1; }
.pf-conflicts { display: grid; gap: 2px; margin: var(--ui-space-1) 0 0; padding-left: var(--ui-space-5); color: var(--ui-ink-soft); font-size: var(--ui-font-size-xs); }
/* 创意方向: selectable cards. */
.pf-worlds { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--ui-space-3); }
.pf-world { display: grid; align-content: start; gap: var(--ui-space-2); min-width: 0; min-height: 0; padding: var(--ui-space-4); border: 0; border-radius: var(--ui-radius-md); background: var(--ui-surface-subtle); box-shadow: none; color: var(--ui-ink); text-align: left; white-space: normal; }
.pf-world:hover:not(:disabled) { background: var(--ui-accent-wash); }
.pf-world.is-selected { background: var(--ui-accent-wash); box-shadow: 0 0 0 2px var(--ui-accent); }
.pf-world-head { display: flex; align-items: center; gap: var(--ui-space-2); }
.pf-world-head strong { flex: 1 1 auto; min-width: 0; color: var(--ui-ink-strong); font-size: var(--ui-font-size-md); font-weight: var(--ui-font-weight-semibold); }
.pf-world-check { display: grid; flex: 0 0 auto; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ui-accent); color: var(--ui-action-on-primary); }
.pf-world-check svg { width: 14px; height: 14px; }
.pf-world-premise { font-size: var(--ui-font-size-sm); line-height: var(--ui-line-height-snug); }
.pf-world-facts { display: grid; gap: var(--ui-space-1); color: var(--ui-ink-soft); font-size: var(--ui-font-size-xs); line-height: var(--ui-line-height-snug); }
.pf-world-facts b { margin-right: var(--ui-space-1); color: var(--ui-muted); font-weight: var(--ui-font-weight-medium); }
.pf-world-tags { display: flex; flex-wrap: wrap; gap: var(--ui-space-1); }
.pf-world-tags span { padding: 2px var(--ui-space-2); border-radius: var(--ui-radius-pill); background: var(--ui-surface); color: var(--ui-ink-soft); font-size: var(--ui-font-size-2xs); }
.pf-more > summary { display: inline-flex; align-items: center; min-height: var(--ui-control-height); color: var(--ui-accent); font-size: var(--ui-font-size-sm); font-weight: var(--ui-font-weight-medium); cursor: pointer; }
/* 分镜脚本: one card per storyboard, beats as a timed list. */
.pf-plan { display: grid; gap: var(--ui-space-4); padding: var(--ui-space-5); border-radius: var(--ui-radius-md); background: var(--ui-surface-subtle); }
.pf-plan-head { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: var(--ui-space-3); }
.pf-plan-head h3 { margin: 0; color: var(--ui-ink-strong); font-size: var(--ui-font-size-md); font-weight: var(--ui-font-weight-semibold); }
.pf-plan-head p { max-width: var(--ui-measure); margin: var(--ui-space-1) 0 0; color: var(--ui-ink-soft); font-size: var(--ui-font-size-xs); }
.pf-plan-facts { display: flex; gap: var(--ui-space-4); margin: 0; }
.pf-plan-facts dt { color: var(--ui-muted); font-size: var(--ui-font-size-xs); }
.pf-plan-facts dd { margin: 0; color: var(--ui-ink-strong); font-size: var(--ui-font-size-sm); font-weight: var(--ui-font-weight-semibold); font-variant-numeric: tabular-nums; }
.pf-beats { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.pf-beat { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--ui-space-3); padding: var(--ui-space-3) 0; border-top: 1px solid var(--ui-line); }
.pf-beat-time { display: grid; align-content: start; color: var(--ui-ink-strong); font-size: var(--ui-font-size-sm); font-weight: var(--ui-font-weight-semibold); font-variant-numeric: tabular-nums; }
.pf-beat-time small { color: var(--ui-muted); font-size: var(--ui-font-size-xs); font-weight: var(--ui-font-weight-regular); }
.pf-beat-body { display: grid; gap: var(--ui-space-1); min-width: 0; font-size: var(--ui-font-size-sm); }
.pf-beat-body p { margin: 0; overflow-wrap: anywhere; }
.pf-beat-body small { color: var(--ui-muted); font-size: var(--ui-font-size-xs); }
.pf-beat-label { margin-right: var(--ui-space-2); color: var(--ui-muted); font-size: var(--ui-font-size-xs); }
/* The spoken line reuses the script editor's line mark, with visible text. */
.pf-beat-line .ui-mark { color: var(--ui-ink); }
.pf-beat-evidence { color: var(--ui-ink-soft); font-size: var(--ui-font-size-xs); }
.pf-prompt > summary { display: inline-flex; align-items: center; min-height: var(--ui-control-height); color: var(--ui-accent); font-size: var(--ui-font-size-sm); font-weight: var(--ui-font-weight-medium); cursor: pointer; }
.pf-prompt textarea { width: 100%; min-height: 280px; font-size: var(--ui-font-size-xs); line-height: var(--ui-line-height-relaxed); resize: vertical; }
/* 生成视频: one row per job, media first. */
.pf-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--ui-space-4); margin: 0; padding: 0; list-style: none; }
.pf-result { display: grid; gap: var(--ui-space-3); min-width: 0; padding: var(--ui-space-3); border-radius: var(--ui-radius-md); background: var(--ui-surface-subtle); }
.pf-result-media { display: grid; aspect-ratio: 9 / 16; max-height: 420px; overflow: hidden; border-radius: var(--ui-radius-sm); background: var(--ui-surface-muted); }
.pf-result-media video { width: 100%; height: 100%; object-fit: contain; }
.pf-result-placeholder { display: grid; place-content: center; justify-items: center; gap: var(--ui-space-2); color: var(--ui-muted); font-size: var(--ui-font-size-xs); }
.pf-result-body { display: grid; justify-items: start; gap: var(--ui-space-1); min-width: 0; }
.pf-result-body strong { max-width: 100%; color: var(--ui-ink-strong); font-size: var(--ui-font-size-sm); }
.pf-result-body small { color: var(--ui-muted); font-size: var(--ui-font-size-xs); }
@media (max-width: 1024px) {
  .pf-layout { grid-template-columns: minmax(0, 1fr); }
  .pf-inputs { position: static; max-height: none; overflow: visible; }
  .pf-actions { position: static; margin-bottom: 0; padding-bottom: 0; }
}
@media (max-width: 768px) {
  .pf-form, .pf-guide { grid-template-columns: minmax(0, 1fr); }
  .pf-head-actions { width: 100%; }
}
@media (max-width: 480px) {
  .pf-panel { padding: var(--ui-space-5); }
  .pf-head-actions .pf-new { padding: 0 var(--ui-space-3); }
  .pf-beat { grid-template-columns: minmax(0, 1fr); gap: var(--ui-space-1); }
  .pf-step-actions > button { flex: 1 1 100%; }
  .pf-empty { min-height: 280px; padding: var(--ui-space-5); }
}

/* 参考积累 (administrators): source collection and reference adoption. */
.fl-row, .fl-actions, .fl-section-heading { display: flex; align-items: center; gap: var(--ui-space-3); flex-wrap: wrap; }
.fl-section-heading { justify-content: space-between; align-items: flex-start; }
.fl-card { padding: var(--ui-space-6); min-width: 0; }
.fl-card h2 { margin: 0 0 var(--ui-space-2); color: var(--ui-ink-strong); font-size: var(--ui-font-size-lg); }
.fl-card h3 { margin: var(--ui-space-3) 0; font-size: var(--ui-font-size-sm); color: var(--ui-ink); }
.fl-card p { overflow-wrap: anywhere; }
.fl-card .hub-copy { margin: var(--ui-space-2) 0; }
.fl-frame-grid figure { margin: 0; min-width: 0; }
.fl-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ui-space-4); }
.fl-columns > * { min-width: 0; }
.fl-field { display: grid; gap: var(--ui-space-2); margin: var(--ui-space-4) 0; color: var(--ui-ink-soft); font-size: var(--ui-font-size-sm); }
.fl-field textarea { width: 100%; resize: vertical; min-height: var(--ui-control-height); margin: 0; }
.fl-field input, .fl-field select { width: 100%; }
.fl-actions { margin-top: var(--ui-space-4); }
.fl-actions .button { max-width: 100%; white-space: normal; }
.fl-detail { margin: var(--ui-space-3) 0; min-width: 0; }
.fl-detail summary { cursor: pointer; color: var(--ui-ink-soft); min-height: var(--ui-control-height); padding: var(--ui-space-2) 0; font-size: var(--ui-font-size-sm); }
.fl-json { white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; font-size: var(--ui-font-size-xs); line-height: var(--ui-line-height-relaxed); }
.fl-json { padding: var(--ui-space-4); border-radius: var(--ui-radius-md); background: var(--ui-surface-subtle); color: var(--ui-ink-soft); max-height: 480px; overflow: auto; }
.fl-warning { color: var(--ui-warning); }
.fl-empty { color: var(--ui-muted); padding: var(--ui-space-5) 0; }
.fl-world-grid, .fl-reference-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ui-space-4); margin-top: var(--ui-space-4); }
.fl-reference-list article { padding: var(--ui-space-4); min-width: 0; }
.fl-table-scroll { width: 100%; overflow-x: auto; }
.fl-table-scroll table { width: 100%; min-width: 560px; }
.fl-table-scroll td { vertical-align: top; overflow-wrap: anywhere; }
.fl-table-scroll a { display: block; margin-top: var(--ui-space-2); }
.fl-reference-video { display: block; width: 100%; max-height: 520px; border-radius: var(--ui-radius-md); background: var(--ui-surface-muted); }
.fl-frame-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ui-space-3); margin-top: var(--ui-space-4); }
.fl-frame-grid img { width: 100%; max-height: 220px; object-fit: contain; border-radius: var(--ui-radius-sm); background: var(--ui-surface-muted); }
.fl-frame-grid figcaption { color: var(--ui-muted); font-size: var(--ui-font-size-xs); }
@media (max-width: 768px) {
  .fl-columns, .fl-world-grid, .fl-reference-list { grid-template-columns: minmax(0, 1fr); }
  .fl-card { padding: var(--ui-space-4); }
  .fl-frame-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

}
/* /styles/pages/pricing.css */
@layer pages {
/*
 * Pages layer — 定价（SCREEN-010 用户视图 + 管理操作）与
 * 价目表管理对话框（SCREEN-026/027/028）。
 *
 * 页面结构：顶部只放视频生成核心价（768P / 2K 大卡），下面是 AI 工具价目表——
 * 每个工具一行（工具、计费方式、单价、详情），类别用共享的 .segmented 筛选；
 * 「详情」对话框给出与文档一致的计费口径。所有金额都用 tabular-nums 对齐。
 */
/* 管理模式开关：管理员在公开价目旁显式进入编辑视角，默认收起全部管理控件。 */
.pricing-admin-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--ui-space-2);
  min-height: var(--ui-touch-target);
  padding: 0 var(--ui-space-4);
  border: 0;
  border-radius: var(--ui-radius-pill);
  background: var(--ui-fill-1);
  color: var(--ui-ink-soft);
  font-size: var(--ui-font-size-sm);
  font-weight: var(--ui-font-weight-medium);
}
.pricing-admin-toggle svg {
  width: 16px;
  height: 16px;
}
.pricing-admin-toggle:hover:not(:disabled) {
  border-color: transparent;
  background: var(--ui-fill-2);
  color: var(--ui-ink-strong);
}
.pricing-admin-toggle.is-active,
.pricing-admin-toggle.is-active:hover:not(:disabled) {
  background: var(--ui-accent-soft);
  color: var(--ui-accent-strong);
}
/* 破坏性操作与编辑按钮拉开距离，避免误点。 */
.pricing-danger {
  color: var(--ui-danger);
}
.pricing-danger:hover {
  background: var(--ui-danger-soft);
  color: var(--ui-danger);
}
.pricing-gen-actions .pricing-danger {
  margin-left: var(--ui-space-2);
}
/* ---------------- 服务页签 ---------------- */
/* Tier tabs: one segmented track; a single tier hides the track. */
.pricing-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  margin-bottom: var(--ui-space-6);
  padding: 3px;
  border-radius: var(--ui-radius-pill);
  background: var(--ui-fill-1);
}

.pricing-tabs:not(:has(> :nth-child(2))) {
  display: none;
}

.pricing-tabs [role="tab"] {
  min-height: 34px;
  padding: 0 var(--ui-space-5);
  border: 0;
  border-radius: var(--ui-radius-pill);
  background: transparent;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-sm);
  font-weight: var(--ui-font-weight-medium);
}

.pricing-tabs [role="tab"]:hover:not(:disabled) {
  border-color: transparent;
  background: transparent;
  color: var(--ui-ink);
}

.pricing-tabs [role="tab"][aria-selected="true"],
.pricing-tabs [role="tab"][aria-selected="true"]:hover:not(:disabled) {
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-1), 0 0 0 0.5px var(--ui-line);
  color: var(--ui-ink-strong);
}

/* ---------------- 视频生成价格（顶部大卡） ---------------- */
.pricing-generation {
  margin-bottom: var(--ui-space-8);
  padding: var(--ui-space-7);
  border: 0;
  border-radius: var(--ui-radius-xl);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-card);
}

.pricing-gen-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ui-space-3) var(--ui-space-4);
  margin-bottom: var(--ui-space-4);
}

.pricing-gen-head > div:first-child {
  min-width: 0;
  flex: 1 1 320px;
}

.pricing-gen-head h3 {
  margin: 0 0 var(--ui-space-1);
  color: var(--ui-ink-strong);
  font-size: var(--ui-font-size-xl);
  font-weight: var(--ui-font-weight-semibold);
}

.pricing-gen-head .hub-copy {
  margin: 0;
}

.pricing-gen-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: var(--ui-space-2);
}

.pricing-gen-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ui-space-4);
}

.pricing-gen-card {
  display: flex;
  align-items: center;
  gap: var(--ui-space-5);
  min-width: 0;
  padding: var(--ui-space-6);
  border: 0;
  border-radius: var(--ui-radius-lg);
  background: var(--ui-surface-subtle);
}

.pricing-gen-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--ui-surface);
  color: var(--ui-accent);
}

.pricing-gen-icon svg {
  width: 22px;
  height: 22px;
}

.pricing-gen-body {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.pricing-gen-body > small {
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
}

.pricing-gen-body > strong {
  color: var(--ui-ink-strong);
  font-size: var(--ui-font-size-2xl);
  letter-spacing: var(--ui-letter-spacing-display);
  font-variant-numeric: tabular-nums;
  font-weight: var(--ui-font-weight-semibold);
}

.pricing-gen-body > strong span {
  color: var(--ui-muted);
  font-size: var(--ui-font-size-sm);
  font-weight: var(--ui-font-weight-regular);
}

.pricing-gen-cost {
  color: var(--ui-muted);
  font-size: var(--ui-font-size-2xs);
}

.pricing-gen-more {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ui-space-2);
  margin: var(--ui-space-3) 0 0;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
}

.pricing-gen-more-item {
  display: inline-flex;
  align-items: baseline;
  gap: var(--ui-space-1);
  padding: 2px var(--ui-space-3);
  border: 0;
  border-radius: var(--ui-radius-pill);
  background: var(--ui-fill-1);
  font-variant-numeric: tabular-nums;
}

.pricing-gen-more-item b {
  color: var(--ui-ink);
  font-weight: var(--ui-font-weight-semibold);
}

/* 管理员倍率表单 */
.pricing-markup {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--ui-space-2) var(--ui-space-3);
  margin-top: var(--ui-space-4);
  padding-top: var(--ui-space-4);
  border-top: 1px solid var(--ui-line);
}

.pricing-markup label {
  margin: 0;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-2xs);
}

.pricing-markup input {
  width: 110px;
  margin-top: var(--ui-space-1);
}

.pricing-markup p {
  flex: 1 1 100%;
  margin: 0;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-2xs);
}

/* 生成价目明细（参考素材、再生成） */
.pricing-gen-detail {
  margin-top: var(--ui-space-5);
  padding-top: var(--ui-space-3);
  border-top: 1px solid var(--ui-line);
}

.pricing-gen-detail > summary {
  display: flex;
  align-items: center;
  gap: var(--ui-space-2);
  min-height: 40px;
  color: var(--ui-accent);
  font-size: var(--ui-font-size-sm);
  font-weight: var(--ui-font-weight-medium);
  cursor: pointer;
}

.pricing-gen-detail .pricing-sections {
  margin-top: var(--ui-space-3);
  grid-template-columns: minmax(0, 1fr);
}

/* ---------------- AI 工具价目表 ---------------- */
.pricing-tools {
  margin-bottom: var(--ui-space-5);
}

.pricing-tools-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--ui-space-3) var(--ui-space-4);
  margin-bottom: var(--ui-space-3);
}

.pricing-tools-head > div:first-child {
  min-width: 0;
  flex: 1 1 320px;
}

.pricing-tools-head h3 {
  margin: 0 0 var(--ui-space-1);
  color: var(--ui-ink-strong);
  font-size: var(--ui-font-size-xl);
  font-weight: var(--ui-font-weight-semibold);
}

.pricing-tools-head .hub-copy {
  margin: 0;
}

.pricing-tool-default {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--ui-space-2);
}

.pricing-tool-default label {
  margin: 0;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-2xs);
}

.pricing-tool-default input {
  width: 96px;
  margin-top: var(--ui-space-1);
}

.pricing-tool-default small {
  flex: 1 1 100%;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-2xs);
}

.pricing-tools-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ui-space-3) var(--ui-space-4);
  margin-bottom: var(--ui-space-3);
}

.pricing-unit svg {
  width: 14px;
  height: 14px;
}

.pricing-table-wrap {
  overflow-x: auto;
  border: 0;
  border-radius: var(--ui-radius-lg);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-card);
}

.pricing-tools-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
}

.pricing-tools-table th {
  padding: var(--ui-space-3) var(--ui-space-4);
  border-bottom: 1px solid var(--ui-line);
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
  font-weight: var(--ui-font-weight-medium);
  text-align: left;
  white-space: nowrap;
}

.pricing-tools-table td {
  padding: var(--ui-space-4);
  border-bottom: 1px solid var(--ui-line);
  vertical-align: middle;
}

.pricing-tool-row:last-child td {
  border-bottom: 0;
}

.pricing-cell-tool {
  display: flex;
  align-items: center;
  gap: var(--ui-space-3);
}

.pricing-tool-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--ui-radius-sm);
  background: var(--ui-surface-muted);
  color: var(--ui-ink-soft);
}

.pricing-tool-icon svg {
  width: 18px;
  height: 18px;
}

.pricing-tool-name {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.pricing-tool-name strong {
  color: var(--ui-ink);
  font-size: var(--ui-font-size-sm);
  font-weight: var(--ui-font-weight-medium);
}

.pricing-tool-name small {
  color: var(--ui-muted);
  font-size: var(--ui-font-size-2xs);
  line-height: var(--ui-line-height-relaxed);
}

.pricing-cell-unit {
  color: var(--ui-ink);
  font-size: var(--ui-font-size-xs);
}

.pricing-cell-unit small,
.pricing-cell-price small {
  display: block;
  margin-top: 2px;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-2xs);
}

.pricing-unit {
  display: inline-flex;
  align-items: center;
  gap: var(--ui-space-1);
  white-space: nowrap;
}

.pricing-price {
  display: flex;
  align-items: baseline;
  gap: var(--ui-space-1);
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
  white-space: nowrap;
}

.pricing-price b {
  color: var(--ui-ink);
  font-size: var(--ui-font-size-md);
  font-variant-numeric: tabular-nums;
  font-weight: var(--ui-font-weight-semibold);
}

.pricing-cell-price-main {
  min-width: 0;
}

.pricing-cell-action {
  text-align: right;
}

.pricing-detail-button {
  display: inline-flex;
  align-items: center;
  gap: var(--ui-space-1);
  white-space: nowrap;
}

.pricing-detail-button svg {
  width: 14px;
  height: 14px;
}

/* 行内自定义倍率：每个工具一个输入框和一个保存按钮。 */
.pricing-tool-override {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ui-space-2);
  margin: var(--ui-space-2) 0 0;
}

.pricing-tool-override .text-button {
  min-height: var(--ui-touch-target);
  padding-inline: var(--ui-space-2);
}

.pricing-tool-multiplier {
  display: inline-flex;
  align-items: center;
  gap: var(--ui-space-2);
  margin: 0;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-2xs);
}

.pricing-tool-multiplier input {
  width: 88px;
}

.pricing-tool-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ui-space-2) var(--ui-space-3);
  margin-top: var(--ui-space-4);
}

.pricing-tool-actions p {
  flex: 1 1 320px;
  margin: 0;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-2xs);
}

/* ---------------- 计费说明 ---------------- */
.pricing-notes {
  margin-top: var(--ui-space-6);
  margin-bottom: var(--ui-space-5);
  padding: var(--ui-space-3) var(--ui-space-6);
  border: 0;
  border-radius: var(--ui-radius-lg);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-card);
}

.pricing-notes > details > summary {
  display: flex;
  align-items: center;
  gap: var(--ui-space-2);
  min-height: 44px;
  color: var(--ui-ink);
  font-size: var(--ui-font-size-sm);
  font-weight: var(--ui-font-weight-medium);
  cursor: pointer;
}

.pricing-rule-general,
.pricing-detail-points {
  margin: var(--ui-space-2) 0 0;
  padding-left: 1.2em;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
  line-height: var(--ui-line-height-relaxed);
}

.pricing-rule-general li,
.pricing-detail-points li {
  margin-bottom: var(--ui-space-1);
}

/* ---------------- 价格详情对话框 ---------------- */
.pricing-detail-body {
  max-height: min(70vh, 640px);
  overflow-y: auto;
  padding: var(--ui-space-2) var(--ui-space-1) 0;
}

/* 对话框里的生成价目明细一列排布，避免两列在窄弹窗里挤压。 */
.pricing-detail-body .pricing-sections {
  grid-template-columns: minmax(0, 1fr);
}

.pricing-detail-head {
  display: flex;
  align-items: center;
  gap: var(--ui-space-3);
  margin-bottom: var(--ui-space-3);
}

.pricing-detail-head > div {
  min-width: 0;
  flex: 1 1 auto;
}

.pricing-detail-head h3 {
  margin: 0;
  color: var(--ui-ink);
  font-size: var(--ui-font-size-md);
  font-weight: var(--ui-font-weight-semibold);
}

.pricing-detail-head p {
  margin: 2px 0 0;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-2xs);
}

.pricing-detail-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--ui-radius-lg);
  background: var(--ui-accent-soft);
  color: var(--ui-accent-strong);
}

.pricing-detail-icon svg {
  width: 20px;
  height: 20px;
}

.pricing-detail-basis {
  margin: 0 0 var(--ui-space-3);
  color: var(--ui-ink);
  font-size: var(--ui-font-size-xs);
}

.pricing-detail-prices {
  display: grid;
  gap: var(--ui-space-2);
  margin-bottom: var(--ui-space-3);
}

.pricing-detail-price {
  padding: var(--ui-space-3) var(--ui-space-4);
  border: 0;
  border-radius: var(--ui-radius-md);
  background: var(--ui-surface);
}

.pricing-detail-price-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ui-space-2);
}

.pricing-detail-price-head strong {
  color: var(--ui-ink);
  font-size: var(--ui-font-size-sm);
  font-weight: var(--ui-font-weight-medium);
}

.pricing-detail-price-head span {
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
  white-space: nowrap;
}

.pricing-detail-price-head b {
  color: var(--ui-ink);
  font-size: var(--ui-font-size-lg);
  font-variant-numeric: tabular-nums;
  font-weight: var(--ui-font-weight-semibold);
}

.pricing-detail-price > small {
  display: block;
  margin-top: 2px;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-2xs);
  font-variant-numeric: tabular-nums;
}

.pricing-detail-formula {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--ui-space-2);
  margin: 0 0 var(--ui-space-2);
  padding: var(--ui-space-3) var(--ui-space-4);
  border-radius: var(--ui-radius-md);
  background: var(--ui-accent-wash);
  font-size: var(--ui-font-size-xs);
}

.pricing-detail-formula span {
  color: var(--ui-muted);
}

.pricing-detail-formula b {
  color: var(--ui-ink);
  font-weight: var(--ui-font-weight-medium);
}

.pricing-detail-foot {
  margin: var(--ui-space-3) 0 0;
  padding-top: var(--ui-space-3);
  border-top: 1px solid var(--ui-line);
  color: var(--ui-muted);
  font-size: var(--ui-font-size-2xs);
}

/* 详情里的系数表 */
.pricing-rule-table {
  margin: var(--ui-space-3) 0 0;
  overflow-x: auto;
}

.pricing-rule-table strong {
  display: block;
  margin-bottom: var(--ui-space-1);
  color: var(--ui-ink);
  font-size: var(--ui-font-size-2xs);
}

.pricing-rule-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--ui-font-size-2xs);
  font-variant-numeric: tabular-nums;
}

.pricing-rule-table th,
.pricing-rule-table td {
  padding: var(--ui-space-1) var(--ui-space-2);
  border: 1px solid var(--ui-line);
  text-align: center;
  white-space: nowrap;
}

.pricing-rule-table thead th {
  color: var(--ui-muted);
  font-weight: var(--ui-font-weight-medium);
}

/* ---------------- 生成价目明细（栏目与条目） ---------------- */
.pricing-sections {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ui-space-4);
  align-items: start;
}

.pricing-section {
  min-width: 0;
  padding: var(--ui-space-4) var(--ui-space-5);
  border: 0;
  border-radius: var(--ui-radius-md);
  background: var(--ui-surface-subtle);
  box-shadow: none;
}

.pricing-gen-detail .pricing-section {
  background: var(--ui-surface-subtle);
}

.pricing-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ui-space-2);
  margin-bottom: var(--ui-space-2);
}

.pricing-section-head h4 {
  margin: 0;
  color: var(--ui-ink);
  font-size: var(--ui-font-size-sm);
  font-weight: var(--ui-font-weight-semibold);
}

.pricing-section-actions,
.pricing-row-actions {
  display: flex;
  gap: var(--ui-space-3);
}

.pricing-section-actions .text-button,
.pricing-row-actions .text-button {
  font-size: var(--ui-font-size-2xs);
}

.pricing-section-add {
  display: flex;
  justify-content: flex-start;
}

.pricing-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--ui-space-3);
  padding: var(--ui-space-3) 0;
  border-top: 1px solid var(--ui-line);
}

.pricing-row-copy {
  min-width: 0;
}

.pricing-row-copy strong {
  color: var(--ui-ink);
  font-size: var(--ui-font-size-sm);
  font-weight: var(--ui-font-weight-medium);
}

.pricing-row-copy p {
  margin: var(--ui-space-1) 0 0;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-2xs);
  line-height: var(--ui-line-height-relaxed);
}

.pricing-row-actions {
  margin-top: var(--ui-space-1);
}

.pricing-amount {
  text-align: right;
  white-space: nowrap;
}

.pricing-amount > strong {
  color: var(--ui-ink);
  font-size: var(--ui-font-size-md);
  font-variant-numeric: tabular-nums;
  font-weight: var(--ui-font-weight-semibold);
}

.pricing-amount b {
  font-variant-numeric: tabular-nums;
}

.pricing-free {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px var(--ui-space-2);
  border-radius: var(--ui-radius-pill);
  background: var(--ui-success-soft);
  color: color-mix(in srgb, var(--ui-success) 85%, var(--ui-ink));
  font-size: var(--ui-font-size-2xs);
  font-weight: var(--ui-font-weight-medium);
}

/* 管理员双价展示 */
.pricing-dual {
  display: grid;
  gap: var(--ui-space-1);
  justify-items: end;
}

.pricing-dual-user,
.pricing-dual-cost {
  display: flex;
  align-items: baseline;
  gap: var(--ui-space-1);
}

.pricing-dual small {
  color: var(--ui-muted);
  font-size: var(--ui-font-size-2xs);
}

.pricing-dual-user b {
  color: var(--ui-ink);
  font-size: var(--ui-font-size-sm);
  font-variant-numeric: tabular-nums;
}

.pricing-dual-cost b {
  color: var(--ui-muted);
  font-size: var(--ui-font-size-2xs);
  font-variant-numeric: tabular-nums;
  font-weight: var(--ui-font-weight-regular);
}

.pricing-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: var(--ui-space-6);
  color: var(--ui-muted);
  font-size: var(--ui-font-size-sm);
  text-align: center;
}

/* ---------------- 价目管理对话框 ----------------
   （SCREEN-026 服务 / SCREEN-027 栏目 / SCREEN-028 条目） */
.pricing-editor-list {
  display: grid;
  gap: var(--ui-space-2);
  margin: var(--ui-space-3) 0;
}

.pricing-editor-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 0.8fr) auto;
  align-items: end;
  gap: var(--ui-space-2);
  padding: var(--ui-space-3);
  border: 0;
  border-radius: var(--ui-radius-md);
  background: var(--ui-surface);
}

.pricing-editor-row label {
  margin: 0;
}

/* ---------------- 触控目标 ---------------- */
@media (pointer: coarse) {
  .pricing-tabs [role="tab"],
  .pricing-filters button,
  .pricing-gen-detail > summary,
  .pricing-section-actions .text-button,
  .pricing-row-actions .text-button,
  .pricing-detail-button {
    min-width: var(--ui-touch-target);
    min-height: var(--ui-touch-target);
  }

  .pricing-markup input,
  .pricing-tool-default input,
  .pricing-tool-multiplier input {
    min-height: var(--ui-touch-target);
  }
}

.pricing-long-video {display:flex;flex-wrap:wrap;align-items:flex-start;gap:var(--ui-space-3);margin-top:var(--ui-space-5);padding:var(--ui-space-4);border-inline-start:4px solid var(--ui-warning);border-radius:var(--ui-radius-md);background:var(--ui-warning-soft);color:var(--ui-ink);}
.pricing-long-video-badge {flex:none;padding:var(--ui-space-1) var(--ui-space-3);border-radius:var(--ui-radius-pill);background:var(--ui-surface);color:var(--ui-warning);font-size:var(--ui-font-size-sm);font-weight:var(--ui-font-weight-semibold);}
.pricing-long-video > div {flex:1 1 260px;min-width:0;}
.pricing-long-video h4 {margin:0 0 var(--ui-space-1);font-size:var(--ui-font-size-md);color:var(--ui-warning);}
.pricing-long-video p,.pricing-gen-billing-note {margin:0;font-size:var(--ui-font-size-xs);line-height:var(--ui-line-height-relaxed);}
.pricing-gen-billing-note {margin-top:var(--ui-space-3);color:var(--ui-muted);}

/* ---------------- 窄屏 ---------------- */
@container secondary-page (max-width: 900px) {
  .pricing-generation {
    padding: var(--ui-space-4) var(--ui-space-5);
  }

  .pricing-sections {
    grid-template-columns: minmax(0, 1fr);
  }

  .pricing-gen-head,
  .pricing-tools-head {
    flex-direction: column;
    align-items: stretch;
  }

  /* 纵向排列后 flex-basis 会变成高度，标题块必须回到内容高度。 */
  .pricing-gen-head > div:first-child,
  .pricing-tools-head > div:first-child {
    flex: 0 0 auto;
  }

  /* 表格转卡片：表头视觉隐藏但仍对读屏可见，单元格用 data-label 前缀。 */
  .pricing-table-wrap {
    overflow: visible;
    border: 0;
    background: none;
  }

  .pricing-tools-table {
    display: block;
    min-width: 0;
  }

  .pricing-tools-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .pricing-tools-table tbody,
  .pricing-tools-table tr,
  .pricing-tools-table td {
    display: block;
    width: 100%;
  }

  .pricing-tool-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--ui-space-2) var(--ui-space-3);
    margin-bottom: var(--ui-space-3);
    padding: var(--ui-space-4);
    border: 0;
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow-card);
  }

  .pricing-tools-table td {
    padding: 0;
    border: 0;
  }

  .pricing-tools-table td:not(.pricing-cell-tool) {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--ui-space-1);
    grid-column: 1 / -1;
  }

  .pricing-tools-table td[data-label]::before {
    color: var(--ui-muted);
    content: attr(data-label);
    font-size: var(--ui-font-size-xs);
  }

  /* 工具单元格自带图标与名称，再挂「工具」标签只会增加噪音。 */
  .pricing-tools-table .pricing-cell-tool[data-label]::before {
    content: none;
  }

  .pricing-cell-tool,
  .pricing-cell-action {
    grid-column: auto;
  }

  .pricing-cell-action {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
  }

  .pricing-cell-tool {
    grid-column: 1;
  }

  .pricing-cell-price {
    align-items: baseline;
  }

  .pricing-tool-multiplier {
    flex: 1 1 100%;
  }
}

@container secondary-page (max-width: 600px) {
  .pricing-gen-cards {
    grid-template-columns: minmax(0, 1fr);
  }

  /* 类别筛选在窄屏占满一行、按钮等分，320px 宽也不换行、不溢出。 */
  .pricing-filters {
    display: flex;
    width: 100%;
  }

  .pricing-filters button {
    flex: 1 1 0;
    min-width: 0;
    padding: 0 var(--ui-space-2);
  }

  .pricing-tool-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .pricing-cell-action {
    grid-column: 1;
    grid-row: auto;
    text-align: left;
  }

  .pricing-tool-actions button {
    min-height: var(--ui-touch-target);
  }
}

}
/* /styles/pages/media-tools.css */
@layer pages {
/*
 * AI tool pages (视频换脸, 画质增强, ...). One frame for every tool:
 * toolbar -> compact header -> steps -> workspace -> sticky action bar.
 * Media is the visual core; settings use spacing and type instead of cards.
 * Media slots are content-aware: the asset's own width/height sets the preview
 * frame ratio and height cap, and the facts sit beside the frame, so portrait
 * sources stay compact instead of filling a 16:9 stage with empty bands.
 */
.media-tool-page {
  width: min(100%, var(--ui-page-width));
  padding-bottom: var(--ui-space-4);
}

/* 下架工具的维护态：与页面其余空态共用 ui-empty-state 视觉。 */
.media-tool-maintenance {
  margin-top: var(--ui-space-5);
  padding: var(--ui-space-9) var(--ui-space-4);
  border: 0;
  border-radius: var(--ui-radius-lg);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-card);
}

.media-tool-maintenance .primary {
  margin-top: var(--ui-space-3);
}

/* ---------------- Toolbar ---------------- */
.media-tool-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--ui-space-3) var(--ui-space-4);
}

.media-tool-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--ui-space-2);
  margin: 0;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-sm);
}

.media-tool-breadcrumb [aria-current] {
  color: var(--ui-ink);
}

.media-tool-back {
  display: inline-flex;
  align-items: center;
  gap: var(--ui-space-1);
  min-height: 36px;
  margin-left: calc(var(--ui-space-2) * -1);
  padding: 0 var(--ui-space-2);
  border: 0;
  background: transparent;
  color: var(--ui-accent);
  cursor: pointer;
  font-size: var(--ui-font-size-sm);
  font-weight: var(--ui-font-weight-regular);
}

.media-tool-back:hover:not(:disabled) {
  border-color: transparent;
  background: var(--ui-accent-wash);
  color: var(--ui-accent-strong);
}

.media-tool-back svg { width: 16px; height: 16px; }

.media-tool-toolbar-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ui-space-2);
}

.media-tool-project-name {
  display: flex;
  align-items: center;
  gap: var(--ui-space-2);
  color: var(--ui-muted);
  font-size: var(--ui-font-size-sm);
  white-space: nowrap;
}

.media-tool-project-name input {
  width: min(240px, 100%);
  margin: 0;
}

.media-tool-toolbar-actions > button,
.media-tool-source-actions button,
.media-tool-section-heading > button,
.media-tool-edit-row > button,
.media-tool-subsection > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ui-space-2);
  min-height: 40px;
  padding: 0 var(--ui-space-4);
  border: 0;
  border-radius: var(--ui-radius-pill);
  background: var(--ui-fill-1);
  color: var(--ui-ink);
  cursor: pointer;
  font-size: var(--ui-font-size-sm);
  font-weight: var(--ui-font-weight-medium);
}

.media-tool-toolbar-actions > button:hover:not(:disabled),
.media-tool-source-actions button:hover:not(:disabled),
.media-tool-section-heading > button:hover:not(:disabled),
.media-tool-edit-row > button:hover:not(:disabled),
.media-tool-subsection > button:hover:not(:disabled) {
  border-color: transparent;
  background: var(--ui-fill-2);
  color: var(--ui-ink-strong);
}

.media-tool-toolbar-actions > button svg,
.media-tool-source-actions svg { width: 16px; height: 16px; color: var(--ui-muted); }

.media-tool-count {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--ui-radius-pill);
  background: var(--ui-surface);
  color: var(--ui-muted);
  font-size: var(--ui-font-size-2xs);
  font-variant-numeric: tabular-nums;
}

/* ---------------- Compact header ---------------- */
.media-tool-header {
  display: flex;
  align-items: center;
  gap: var(--ui-space-5);
  margin: var(--ui-space-6) 0 var(--ui-space-6);
}

.media-tool-header-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: var(--ui-radius-lg);
  background: var(--ui-accent-soft);
  color: var(--ui-accent);
}

.media-tool-header-icon svg { width: 28px; height: 28px; }

.media-tool-header-copy { flex: 1 1 auto; min-width: 0; }

.media-tool-header h2 {
  margin: 0;
  color: var(--ui-ink-strong);
  font-size: var(--ui-font-size-2xl);
  font-weight: var(--ui-font-weight-semibold);
  line-height: var(--ui-line-height-tight);
}

.media-tool-header p {
  margin: var(--ui-space-1) 0 0;
  color: var(--ui-ink);
  font-size: var(--ui-font-size-md);
}

.media-tool-header small {
  display: block;
  margin-top: 2px;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-sm);
  line-height: var(--ui-line-height-snug);
}

.media-tool-about { position: relative; flex: 0 0 auto; align-self: flex-start; }

.media-tool-about > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--ui-space-1);
  min-height: var(--ui-touch-target);
  padding: 0 var(--ui-space-2);
  border-radius: var(--ui-radius-sm);
  color: var(--ui-muted);
  cursor: pointer;
  font-size: var(--ui-font-size-sm);
  list-style: none;
}

.media-tool-about > summary::-webkit-details-marker { display: none; }

.media-tool-about > summary:hover,
.media-tool-about[open] > summary { background: var(--ui-fill-1); color: var(--ui-ink); }

.media-tool-about > summary svg { width: 16px; height: 16px; }

.media-tool-about-panel {
  position: absolute;
  z-index: var(--ui-z-dropdown);
  top: calc(100% + var(--ui-space-1));
  right: 0;
  width: min(380px, calc(100vw - 48px));
  padding: var(--ui-space-5);
  border: 1px solid var(--ui-glass-edge);
  border-radius: var(--ui-radius-lg);
  background: var(--ui-glass-strong);
  -webkit-backdrop-filter: var(--ui-glass-blur);
  backdrop-filter: var(--ui-glass-blur);
  box-shadow: var(--ui-shadow-pop);
  color: var(--ui-ink);
  font-size: var(--ui-font-size-sm);
  line-height: var(--ui-line-height-normal);
  animation: ui-pop-in var(--ui-duration-fast) var(--ui-ease-out);
  transform-origin: top right;
}

.media-tool-about-panel p { margin: 0; }

.media-tool-about-panel ul { display: grid; gap: var(--ui-space-3); margin: var(--ui-space-3) 0 0; padding: 0; list-style: none; }

.media-tool-about-panel li { display: grid; gap: 2px; }

.media-tool-about-panel li span { color: var(--ui-ink-soft); }

.media-tool-about-panel li small { color: var(--ui-muted); font-size: var(--ui-font-size-xs); }

/* ---------------- Steps and project name ---------------- */
.media-tool-page form { display: grid; gap: var(--ui-space-4); }

.media-tool-flow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--ui-space-3) var(--ui-space-6);
}

/* ---------------- Workspace layouts ---------------- */
.media-tool-workspace { display: grid; gap: var(--ui-space-6); align-items: start; }

.media-tool-workspace.is-split { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }

.media-tool-input-column { position: sticky; top: 0; min-width: 0; }

/* The slot already carries the input's name and guidance, so the section
   heading above it stays available to assistive tech without repeating it. */
.media-tool-input-column .media-tool-section-heading {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.media-tool-settings {
  display: grid;
  gap: var(--ui-space-6);
  min-width: 0;
  padding: var(--ui-space-6) var(--ui-space-7);
  border: 0;
  border-radius: var(--ui-radius-lg);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-card);
}

.media-tool-workspace.is-dual .media-tool-settings { margin-top: 0; }

.media-tool-workspace.is-split:not(:has(.media-tool-settings > *)) { grid-template-columns: minmax(0, 1fr); }

.media-tool-settings:empty { display: none; }

.media-tool-section { display: grid; gap: var(--ui-space-4); min-width: 0; }

.media-tool-section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--ui-space-4); }

.media-tool-section-heading h3 { margin: 0; color: var(--ui-ink-strong); font-size: var(--ui-font-size-lg); font-weight: var(--ui-font-weight-semibold); line-height: var(--ui-line-height-snug); }

.media-tool-section-heading p { margin: var(--ui-space-1) 0 0; color: var(--ui-muted); font-size: var(--ui-font-size-sm); }

.media-tool-field { display: grid; gap: var(--ui-space-1); color: var(--ui-ink); font-size: var(--ui-font-size-sm); font-weight: var(--ui-font-weight-medium); }

.media-tool-field small, .media-tool-source-heading small { color: var(--ui-muted); font-size: var(--ui-font-size-xs); font-weight: var(--ui-font-weight-regular); }

.media-tool-field input, .media-tool-field select, .media-tool-field textarea { width: 100%; min-height: var(--ui-control-height); min-width: 0; margin-top: 0; }

/* ---------------- Media slots ---------------- */
/* Two inputs of a dual-source tool (视频换脸, 对口型) share the row 55–60 / 40–45:
   the primary video leads, its reference follows. */
.media-tool-source-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: var(--ui-space-5) var(--ui-space-6);
  align-items: start;
}

/* Four slots (商品场景图) sit two per row across the full page width. */
.media-tool-source-grid.is-quad {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Binary option rows: the shared switch plus its help marker, which stays
   outside the switch label so reading the help never toggles the option. */
.media-tool-switch-row {
  display: flex;
  align-items: center;
  gap: var(--ui-space-2);
  min-height: var(--ui-touch-target);
}

.media-tool-source-card {
  display: grid;
  gap: var(--ui-space-3);
  min-width: 0;
}

/* Preview and media facts share the card's width; the row wraps the facts
   under the frame when the container is narrower than frame + facts. */
.media-tool-source-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--ui-space-3) var(--ui-space-4);
  min-width: 0;
}

.media-tool-source-heading { display: grid; align-content: start; gap: var(--ui-space-1); min-width: 0; }

.media-tool-source-heading > strong { color: var(--ui-ink-strong); font-size: var(--ui-font-size-md); font-weight: var(--ui-font-weight-semibold); }

.media-tool-source-heading small { line-height: var(--ui-line-height-normal); }

/* Required input guidance (for example the 视频换脸 face requirements) reads
   as body text, not as de-emphasized metadata. */
.media-tool-source-heading small.is-emphasis { color: var(--ui-ink); font-weight: var(--ui-font-weight-medium); }

/* The media decides the frame. The <img>/<video> is capped by height only and
   keeps its intrinsic ratio, and the frame shrinks to whatever that produces:
   a 768×1344 video renders as a ~183×320 frame instead of a 16:9 stage with
   two black bands. `--media-frame-height` is the per-orientation cap. */
.media-tool-source-preview {
  --media-frame-height: clamp(240px, 30vh, 320px);
  position: relative;
  display: inline-grid;
  flex: 0 1 auto;
  place-items: center;
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--ui-radius-lg);
  background: var(--ui-surface-muted);
  box-shadow: var(--ui-shadow-card);
  transition: box-shadow var(--ui-duration-fast) var(--ui-ease-standard);
}

/* Portrait gets the tallest frame the page can spare; square stays below it
   so a portrait and a square input of the same tool read as one row. */
.media-tool-source-preview.is-portrait { --media-frame-height: clamp(260px, 32vh, 330px); }

.media-tool-source-preview.is-square { --media-frame-height: clamp(220px, 26vh, 280px); }

.media-tool-source-preview.is-landscape { --media-frame-height: clamp(240px, 30vh, 320px); }

/* An empty slot is a wide, short drop target: there is no media whose ratio
   could shape the frame. */
.media-tool-source-preview.is-empty {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 200px;
}

/* Audio has no frame ratio; the player stays a compact block. */
.media-tool-source-preview.is-audio {
  width: min(100%, 360px);
  aspect-ratio: auto;
}

.media-tool-source-preview.is-video { border-color: transparent; background: var(--ui-ink); }

/* The media keeps its own ratio and is capped by height; the frame around it
   shrink-wraps that result instead of imposing a canvas. */
.media-tool-preview-video { position: relative; display: block; }

.media-tool-source-preview > img,
.media-tool-preview-video video { display: block; width: auto; height: auto; max-width: 100%; max-height: var(--media-frame-height); object-fit: contain; }

.media-tool-video-badge {
  position: absolute;
  top: var(--ui-space-2);
  left: var(--ui-space-2);
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px var(--ui-space-2);
  border-radius: var(--ui-radius-pill);
  background: color-mix(in srgb, var(--ui-ink) 72%, transparent);
  color: var(--ui-action-on-primary);
  font-size: var(--ui-font-size-2xs);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.media-tool-video-badge svg { width: 10px; height: 10px; fill: currentcolor; }

/* Empty slot: a quiet drop target, not a dashed upload box. */
.media-tool-preview-empty { display: grid; place-items: center; gap: var(--ui-space-1); padding: var(--ui-space-4); color: var(--ui-muted); text-align: center; }

.media-tool-preview-empty span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--ui-surface); color: var(--ui-accent); }

.media-tool-preview-empty svg { width: 20px; height: 20px; }

.media-tool-preview-empty strong { color: var(--ui-ink-soft); font-size: var(--ui-font-size-sm); font-weight: var(--ui-font-weight-medium); }

.media-tool-preview-empty small { font-size: var(--ui-font-size-xs); }

.media-tool-preview-empty .media-tool-source-actions { justify-content: center; margin-top: var(--ui-space-3); }

.media-tool-source-card.is-dragging .media-tool-source-preview {
  border-color: var(--ui-accent);
  background: var(--ui-accent-wash);
  box-shadow: var(--ui-shadow-focus);
}

.media-tool-source-card.is-dragging .media-tool-preview-empty span { color: var(--ui-accent); }

.media-tool-preview-audio { display: grid; place-items: center; width: 100%; gap: var(--ui-space-2); padding: var(--ui-space-4); text-align: center; }

.media-tool-audio-icon { display: grid; place-items: center; width: 54px; height: 54px; border-radius: var(--ui-radius-lg); background: var(--ui-accent-wash); color: var(--ui-accent); }

.media-tool-audio-icon svg { width: 28px; height: 28px; }

.media-tool-preview-audio strong { max-width: 100%; overflow: hidden; color: var(--ui-ink); font-size: var(--ui-font-size-sm); text-overflow: ellipsis; white-space: nowrap; }

.media-tool-preview-audio small { color: var(--ui-muted); font-size: var(--ui-font-size-xs); }

.media-tool-preview-audio audio { width: 100%; max-width: 280px; height: 32px; }

/* Uploading: the slot keeps its footprint and shows progress over the stage. */
.media-tool-upload-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--ui-space-1);
  background: color-mix(in srgb, var(--ui-surface) 90%, transparent);
  color: var(--ui-ink);
  font-size: var(--ui-font-size-sm);
}

.media-tool-upload-overlay small { max-width: 80%; overflow: hidden; color: var(--ui-muted); font-size: var(--ui-font-size-xs); text-overflow: ellipsis; white-space: nowrap; }

.media-tool-spinner {
  width: 22px;
  height: 22px;
  border: 2px solid var(--ui-line-strong);
  border-top-color: var(--ui-accent);
  border-radius: 50%;
  animation: ui-spin 0.8s linear infinite;
}

.media-tool-source-card[data-state="error"] .media-tool-source-preview { border-color: var(--ui-danger); }

/* Facts and change actions sit beside the frame and take the remaining card
   width; they move under it only when the row wraps. */
.media-tool-source-body { display: grid; flex: 1 1 240px; gap: var(--ui-space-3); min-width: 0; align-content: start; }

.media-tool-source-info { display: grid; gap: 2px; min-height: 40px; min-width: 0; align-content: start; }

.media-tool-source-info strong { overflow: hidden; color: var(--ui-ink); font-size: var(--ui-font-size-sm); font-weight: var(--ui-font-weight-medium); text-overflow: ellipsis; white-space: nowrap; }

.media-tool-source-info span { color: var(--ui-muted); font-size: var(--ui-font-size-xs); font-variant-numeric: tabular-nums; }

.media-tool-source-state { display: inline-flex; align-items: center; gap: 4px; color: var(--ui-success); font-size: var(--ui-font-size-xs); }

.media-tool-source-state svg { width: 14px; height: 14px; }

.media-tool-source-error { display: flex; align-items: center; gap: var(--ui-space-2); margin: 0; color: var(--ui-danger); font-size: var(--ui-font-size-sm); }

.media-tool-source-error svg { width: 16px; height: 16px; flex: 0 0 auto; }

.media-tool-source-actions { display: flex; flex-wrap: wrap; align-content: start; gap: var(--ui-space-2); }

.media-tool-source-actions button { font-size: var(--ui-font-size-sm); }

.media-tool-source-clear { color: var(--ui-muted); }

/* ---------------- Processing modes (tier selection) ---------------- */
.media-tool-tier-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--ui-space-3); }

.media-tool-tier-card {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--ui-space-1);
  padding: var(--ui-space-4);
  border: 1px solid var(--ui-line-strong);
  border-radius: var(--ui-radius-md);
  background: var(--ui-surface);
  cursor: pointer;
  transition: border-color var(--ui-duration-fast) var(--ui-ease-standard),
    box-shadow var(--ui-duration-fast) var(--ui-ease-standard);
}

.media-tool-tier-card:hover { border-color: color-mix(in srgb, var(--ui-ink) 24%, transparent); }

/* Selected: accent border and a check mark only. No tinted fill, no heavier
   border, so the row height never changes. */
.media-tool-tier-card.is-selected { border-color: var(--ui-accent); }

.media-tool-tier-card input { position: absolute; width: 1px; height: 1px; opacity: 0; }

.media-tool-tier-card:has(input:focus-visible) { outline: 2px solid var(--ui-focus); outline-offset: 2px; }

.media-tool-tier-head { display: flex; align-items: center; justify-content: space-between; gap: var(--ui-space-2); }

.media-tool-tier-head strong { color: var(--ui-ink-strong); font-size: var(--ui-font-size-md); font-weight: var(--ui-font-weight-semibold); }

.media-tool-tier-desc { color: var(--ui-ink-soft); font-size: var(--ui-font-size-sm); line-height: var(--ui-line-height-snug); }

.media-tool-tier-meta { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 var(--ui-space-2); margin-top: var(--ui-space-1); }

.media-tool-tier-meta small { color: var(--ui-muted); font-size: var(--ui-font-size-xs); }

.media-tool-tier-meta b { color: var(--ui-ink); font-size: var(--ui-font-size-sm); font-variant-numeric: tabular-nums; font-weight: var(--ui-font-weight-semibold); }

.media-tool-tier-note { margin: calc(var(--ui-space-1) * -1) 0 0; color: var(--ui-muted); font-size: var(--ui-font-size-xs); }

.media-tool-tier-check { display: none; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--ui-accent); color: var(--ui-action-on-primary); }

.media-tool-tier-card.is-selected .media-tool-tier-check { display: grid; }

.media-tool-tier-check svg { width: 12px; height: 12px; }

/* ---------------- Settings ---------------- */
.media-tool-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ui-space-4) var(--ui-space-5); }

.media-tool-parameter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Advanced parameters stay collapsed: a quiet disclosure row, not a box. */
.media-tool-advanced { padding-top: var(--ui-space-4); border-top: 1px solid var(--ui-line); }

.media-tool-advanced > summary { display: flex; align-items: center; gap: var(--ui-space-2); min-height: var(--ui-touch-target); color: var(--ui-ink); cursor: pointer; font-size: var(--ui-font-size-sm); font-weight: var(--ui-font-weight-medium); list-style: none; }

.media-tool-advanced > summary::-webkit-details-marker { display: none; }

.media-tool-advanced > summary svg { width: 16px; height: 16px; color: var(--ui-muted); transition: transform var(--ui-duration-fast) var(--ui-ease-standard); }

.media-tool-advanced[open] > summary svg { transform: rotate(90deg); }

.media-tool-advanced > summary small { margin-left: var(--ui-space-2); color: var(--ui-muted); font-size: var(--ui-font-size-xs); font-weight: var(--ui-font-weight-regular); }

.media-tool-advanced > .media-tool-grid { padding-top: var(--ui-space-3); }

.media-tool-advanced > .media-tool-check { display: flex; }

.media-tool-check { display: inline-flex; align-items: center; gap: var(--ui-space-2); min-height: var(--ui-touch-target); color: var(--ui-ink); font-size: var(--ui-font-size-sm); }

.media-tool-check input { width: auto; min-height: 0; margin: 0; }

.media-tool-edit-list { display: grid; gap: var(--ui-space-3); }

.media-tool-edit-row { display: grid; gap: var(--ui-space-3); padding: var(--ui-space-4); border: 0; border-radius: var(--ui-radius-md); background: var(--ui-surface-subtle); }

.media-tool-edit-row > button { justify-self: start; color: var(--ui-danger); }

.media-tool-edit-row > .media-tool-edit-note { color: var(--ui-muted); font-size: var(--ui-font-size-xs); }

.media-tool-edit-guide { display: grid; gap: var(--ui-space-2); padding: var(--ui-space-3) var(--ui-space-4); border: 1px dashed var(--ui-line-strong); border-radius: var(--ui-radius-md); background: transparent; }

.media-tool-edit-guide strong { color: var(--ui-ink); font-size: var(--ui-font-size-sm); font-weight: var(--ui-font-weight-medium); }

.media-tool-edit-guide ul { display: grid; gap: var(--ui-space-1); margin: 0; padding: 0; list-style: none; }

.media-tool-edit-guide li { color: var(--ui-ink); font-size: var(--ui-font-size-xs); }

.media-tool-edit-guide li span { display: inline-block; min-width: 3.5em; color: var(--ui-muted); }

.media-tool-edit-warning { margin: 0; color: var(--ui-warning); font-size: var(--ui-font-size-xs); }

.media-tool-edit-warning svg { width: 14px; height: 14px; margin-right: var(--ui-space-1); vertical-align: -2px; }

/* ---------------- Status, summary and action bar ---------------- */
.media-tool-note { margin: 0; color: var(--ui-muted); font-size: var(--ui-font-size-sm); }

.media-tool-message { margin: 0; padding: var(--ui-space-2) var(--ui-space-3); border-radius: var(--ui-radius-sm); background: var(--ui-accent-wash); color: var(--ui-accent-strong); font-size: var(--ui-font-size-sm); }

.media-tool-message[data-tone="error"] { background: var(--ui-danger-soft); color: var(--ui-danger); }

.media-tool-summary { scroll-margin-bottom: 104px; padding: var(--ui-space-5) var(--ui-space-6); border: 0; border-radius: var(--ui-radius-lg); background: var(--ui-surface); box-shadow: var(--ui-shadow-card); }

.media-tool-summary-heading, .media-tool-total { display: flex; align-items: center; justify-content: space-between; gap: var(--ui-space-3); }

.media-tool-summary-heading span { color: var(--ui-muted); font-size: var(--ui-font-size-sm); }

.media-tool-summary dl { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ui-space-2); margin: var(--ui-space-3) 0; }

.media-tool-summary dl div, .media-tool-price-lines li { display: flex; justify-content: space-between; gap: var(--ui-space-3); }

.media-tool-summary dt { color: var(--ui-muted); }

.media-tool-summary dd { margin: 0; color: var(--ui-ink); text-align: right; }

.media-tool-price-lines, .media-tool-errors, .media-tool-warnings { display: grid; gap: var(--ui-space-2); margin: var(--ui-space-3) 0; padding-left: 1.25rem; }

.media-tool-price-lines { list-style: none; padding-left: 0; }

.media-tool-errors { color: var(--ui-danger); }

.media-tool-warnings { color: var(--ui-warning); }

.media-tool-total { padding-top: var(--ui-space-3); border-top: 1px solid var(--ui-line); }

.media-tool-total strong { color: var(--ui-ink-strong); font-size: var(--ui-font-size-xl); font-variant-numeric: tabular-nums; }

.media-tool-action-bar-note { margin: 0; }

/* ---------------- History drawer ---------------- */
.media-tool-page dialog.media-tool-drawer {
  width: min(420px, 100vw);
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0 0 0 auto;
  padding: 0;
  border-width: 0 0 0 1px;
  border-radius: var(--ui-radius-xl) 0 0 var(--ui-radius-xl);
  box-shadow: var(--ui-shadow-4);
}

.media-tool-page dialog.media-tool-drawer::backdrop { background: color-mix(in srgb, var(--ui-ink) 24%, transparent); }

.media-tool-drawer-header { display: flex; align-items: center; justify-content: space-between; gap: var(--ui-space-3); padding: var(--ui-space-4) var(--ui-space-5); border-bottom: 1px solid var(--ui-line); }

.media-tool-drawer-header h3 { display: flex; align-items: baseline; gap: var(--ui-space-2); margin: 0; font-size: var(--ui-font-size-lg); }

.media-tool-drawer-header h3 span { color: var(--ui-muted); font-size: var(--ui-font-size-xs); font-weight: var(--ui-font-weight-regular); }

.media-tool-drawer-header button { display: grid; place-items: center; width: var(--ui-touch-target); height: var(--ui-touch-target); padding: 0; border: 0; background: transparent; color: var(--ui-muted); }

.media-tool-history-empty { margin: 0; padding: var(--ui-space-6) var(--ui-space-5); color: var(--ui-muted); font-size: var(--ui-font-size-sm); }

.media-tool-history-list { display: grid; gap: var(--ui-space-2); padding: var(--ui-space-4); }

.media-tool-history-list button { display: flex; align-items: center; justify-content: space-between; gap: var(--ui-space-3); min-height: 52px; padding: var(--ui-space-2) var(--ui-space-4); border: 0; border-radius: var(--ui-radius-md); background: var(--ui-surface-subtle); color: var(--ui-ink); cursor: pointer; text-align: left; white-space: normal; }

.media-tool-history-list button:hover { border-color: var(--ui-line-strong); background: var(--ui-surface-subtle); }

.media-tool-history-list button span { display: grid; gap: 2px; min-width: 0; }

.media-tool-history-list button strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.media-tool-history-list button small { color: var(--ui-muted); font-size: var(--ui-font-size-2xs); }

.media-tool-history-list button b { flex: 0 0 auto; color: var(--ui-accent-strong); font-size: var(--ui-font-size-xs); }

/* ---------------- Library dialog ---------------- */
.media-tool-library-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--ui-space-3); max-height: min(65dvh, 600px); overflow: auto; padding: var(--ui-space-4); }

.media-tool-library-card { display: grid; gap: var(--ui-space-2); min-width: 0; padding: 0; overflow: hidden; border: 0; border-radius: var(--ui-radius-md); background: var(--ui-surface); box-shadow: var(--ui-shadow-card); color: var(--ui-ink); cursor: pointer; text-align: left; white-space: normal; }

.media-tool-library-card:hover:not(:disabled) { border-color: transparent; background: var(--ui-surface); box-shadow: var(--ui-shadow-hover); }

.media-tool-library-card:focus-visible { box-shadow: var(--ui-shadow-hover); outline: 2px solid var(--ui-focus); outline-offset: 2px; }

.media-tool-library-card > :first-child { display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; background: var(--ui-surface-subtle); }

/* Covers only: the grid never creates a player for every asset — the chosen
   asset loads its own media element in the tool page preview. */
.media-tool-library-cover { position: relative; }

.media-tool-library-card img { width: 100%; height: 100%; object-fit: cover; }

.media-tool-library-badge { position: absolute; right: var(--ui-space-2); bottom: var(--ui-space-2); display: inline-flex; align-items: center; gap: 3px; padding: 2px 6px; border-radius: var(--ui-radius-pill); background: color-mix(in srgb, var(--ui-ink) 82%, transparent); color: var(--ui-action-on-primary); font-size: var(--ui-font-size-2xs); }

.media-tool-library-badge svg { width: 12px; height: 12px; }

.media-tool-library-tile { display: grid; place-items: center; gap: var(--ui-space-1); color: var(--ui-muted); }

.media-tool-library-tile svg { width: 28px; height: 28px; color: var(--ui-accent); }

.media-tool-library-tile b { font-size: var(--ui-font-size-2xs); font-weight: var(--ui-font-weight-medium); }

.media-tool-library-card strong, .media-tool-library-card small { display: block; overflow: hidden; padding: 0 var(--ui-space-3); text-overflow: ellipsis; white-space: nowrap; }

.media-tool-library-card small { padding-bottom: var(--ui-space-3); color: var(--ui-muted); font-size: var(--ui-font-size-2xs); }

.media-tool-library-header { display: flex; align-items: center; justify-content: space-between; gap: var(--ui-space-3); padding: var(--ui-space-4); border-bottom: 1px solid var(--ui-line); }

.media-tool-library-header h3 { margin: 0; font-size: var(--ui-font-size-lg); }

.media-tool-library-header button { display: grid; place-items: center; width: var(--ui-touch-target); height: var(--ui-touch-target); border: 0; background: transparent; color: var(--ui-muted); cursor: pointer; }

.media-tool-library-empty { grid-column: 1 / -1; padding: var(--ui-space-8); color: var(--ui-muted); text-align: center; }

/* 文件夹与展开的结果组：和素材库页同一套目录语义，选择器里只做一层次级浏览。 */
.media-tool-library-path { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-space-2); padding: var(--ui-space-2) var(--ui-space-4); border-bottom: 1px solid var(--ui-line); color: var(--ui-muted); font-size: var(--ui-font-size-xs); }

.media-tool-library-path button { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 0 var(--ui-space-2); border: 1px solid transparent; border-radius: var(--ui-radius-sm); background: transparent; color: var(--ui-action-primary); font-size: var(--ui-font-size-xs); cursor: pointer; }

.media-tool-library-path button:hover { border-color: var(--ui-line); background: var(--ui-surface-subtle); }

.media-tool-library-current { display: inline-flex; align-items: center; gap: 5px; color: var(--ui-ink); font-weight: var(--ui-font-weight-medium); }

.media-tool-library-current svg { width: 15px; height: 15px; }

.media-tool-library-folder { display: flex; align-items: center; gap: var(--ui-space-3); min-width: 0; padding: var(--ui-space-3) var(--ui-space-4); border: 0; border-radius: var(--ui-radius-md); background: var(--ui-surface); box-shadow: var(--ui-shadow-card); color: var(--ui-ink); cursor: pointer; text-align: left; white-space: normal; }

.media-tool-library-folder:hover:not(:disabled) { border-color: transparent; background: var(--ui-surface); box-shadow: var(--ui-shadow-hover); }

.media-tool-library-folder > span { display: grid; place-items: center; flex: 0 0 auto; width: 36px; height: 36px; border-radius: var(--ui-radius-sm); background: var(--ui-accent-soft); color: var(--ui-accent); }

.media-tool-library-folder strong, .media-tool-library-folder small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.media-tool-library-folder strong { font-size: var(--ui-font-size-xs); font-weight: var(--ui-font-weight-medium); }

.media-tool-library-folder small { margin-top: 2px; color: var(--ui-muted); font-size: var(--ui-font-size-2xs); }

.media-tool-library-more { grid-column: 1 / -1; justify-self: center; min-height: 40px; padding: 0 var(--ui-space-5); border: 0; border-radius: var(--ui-radius-pill); background: var(--ui-fill-1); color: var(--ui-ink); cursor: pointer; }

.media-tool-library-retry { grid-column: 1 / -1; justify-self: center; min-height: 40px; padding: 0 var(--ui-space-4); border: 0; border-radius: var(--ui-radius-pill); background: var(--ui-fill-1); color: var(--ui-ink); cursor: pointer; }

.media-tool-page dialog { width: min(820px, calc(100vw - 32px)); max-width: 100%; padding: 0; color: var(--ui-ink); }

.media-tool-page dialog::backdrop { background: color-mix(in srgb, var(--ui-ink) 32%, transparent); }

/* 1 分钟计费比例表：档位和金额都由服务端按当前工具倍率算好，这里只标出当前选择。 */
.media-tool-rates { display: grid; gap: var(--ui-space-2); padding: var(--ui-space-3) var(--ui-space-4); border: 0; border-radius: var(--ui-radius-md); background: var(--ui-surface-subtle); }

.media-tool-rates h4 { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ui-space-3); margin: 0; font-size: var(--ui-font-size-sm); }

.media-tool-rates h4 span { color: var(--ui-muted); font-size: var(--ui-font-size-xs); font-weight: var(--ui-font-weight-regular); }

.media-tool-rates table { width: 100%; border-collapse: collapse; font-size: var(--ui-font-size-xs); }

.media-tool-rates th, .media-tool-rates td { padding: var(--ui-space-2); border-bottom: 1px solid var(--ui-line); text-align: right; }

.media-tool-rates thead th { color: var(--ui-muted); font-weight: var(--ui-font-weight-medium); }

.media-tool-rates tbody th { display: grid; gap: 2px; text-align: left; font-weight: var(--ui-font-weight-medium); }

.media-tool-rates tbody th small { color: var(--ui-muted); font-size: var(--ui-font-size-2xs); font-weight: var(--ui-font-weight-regular); }

.media-tool-rates td.is-current { background: var(--ui-action-selection); color: var(--ui-accent-strong); font-weight: var(--ui-font-weight-semibold); }

.media-tool-rates td em { display: block; color: var(--ui-accent-strong); font-size: var(--ui-font-size-2xs); font-style: normal; }

/* 每秒价格是分钟价的等比折算，作为次要信息跟在金额下方。 */
.media-tool-rates p { margin: 0; color: var(--ui-muted); font-size: var(--ui-font-size-2xs); line-height: var(--ui-line-height-normal); }

.media-tool-recommend { margin-left: var(--ui-space-2); padding: 1px 6px; border-radius: var(--ui-radius-pill); background: var(--ui-accent-soft); color: var(--ui-accent-strong); font-size: var(--ui-font-size-2xs); font-style: normal; font-weight: var(--ui-font-weight-medium); }

.media-tool-subsection { display: grid; gap: var(--ui-space-2); padding: var(--ui-space-3) var(--ui-space-4) var(--ui-space-4); }

.media-tool-subsection h4 { margin: 0; color: var(--ui-ink-strong); font-size: var(--ui-font-size-sm); }

.media-tool-subsection > button { justify-self: start; }

.media-tool-subsection > .media-tool-field { max-width: 320px; }

.media-tool-box-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ui-space-3); }

/* 素材帧率估计值：帧率提升工具在源素材卡片下方显示当前素材的帧率与建议上限。 */
.media-tool-estimate { display: flex; align-items: center; gap: var(--ui-space-2); margin: var(--ui-space-3) 0 0; color: var(--ui-muted); font-size: var(--ui-font-size-sm); }

.media-tool-estimate svg { width: 16px; height: 16px; color: var(--ui-accent); }

.media-result-view { display: grid; gap: var(--ui-space-5); }

.media-result-layout { display: grid; grid-template-columns: minmax(220px, .8fr) minmax(0, 1.6fr); gap: var(--ui-space-4); }

/* 场景切片播放器需要整幅宽度：参数栏挪到上方一行，播放器和切片列表各占一列。 */
.media-result-layout.is-scene-output { grid-template-columns: minmax(0, 1fr); }

.media-result-card { min-width: 0; padding: var(--ui-space-4); border: 0; border-radius: var(--ui-radius-lg); background: var(--ui-surface); box-shadow: var(--ui-shadow-card); }

.media-result-card h3 { margin: 0 0 var(--ui-space-3); }

.media-result-parameters dl, .media-result-parameters ul, .media-result-parameters ol { display: grid; gap: var(--ui-space-2); margin: 0 0 var(--ui-space-5); padding-left: 0; list-style: none; }

.media-result-parameters dl div, .media-result-parameters li { display: flex; justify-content: space-between; gap: var(--ui-space-3); }

.media-result-parameters dt, .media-result-parameters small { color: var(--ui-muted); }

.media-result-parameters dd { margin: 0; text-align: right; }

.media-result-output-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--ui-space-4); }

.media-result-output-grid .media-result-card { display: grid; gap: var(--ui-space-2); padding: var(--ui-space-3); background: var(--ui-surface-subtle); }

.media-result-output-grid header { display: flex; justify-content: space-between; gap: var(--ui-space-2); }

.media-result-output-grid video, .media-result-output-grid img { display: block; width: 100%; max-height: 360px; object-fit: contain; border-radius: var(--ui-radius-sm); background: var(--ui-ink); }

.media-result-output-grid audio { width: 100%; }

.media-result-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-space-3); }

/* 场景切分结果：左侧一个主播放器，右侧按时间顺序排列的切片小框。
   正在播放的切片高亮；点击任意切片从它开始顺序播放。 */
.scene-viewer { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 260px); gap: var(--ui-space-4); }

.scene-stage { display: grid; align-content: start; gap: var(--ui-space-2); }

.scene-stage video { display: block; width: auto; height: auto; max-width: 100%; max-height: 560px; justify-self: center; border-radius: var(--ui-radius-md); background: var(--ui-ink); object-fit: contain; }

.scene-stage-empty { display: grid; place-items: center; gap: var(--ui-space-2); padding: var(--ui-space-8) var(--ui-space-4); border: 1px dashed var(--ui-line-strong); border-radius: var(--ui-radius-md); background: var(--ui-surface-subtle); color: var(--ui-muted); text-align: center; }

.scene-stage-empty svg { width: 28px; height: 28px; color: var(--ui-accent); }

.scene-stage-state { min-height: 20px; margin: 0; color: var(--ui-muted); font-size: var(--ui-font-size-sm); }

.scene-clip-list { display: grid; gap: var(--ui-space-2); max-height: 520px; margin: 0; padding: 0 var(--ui-space-1) 0 0; overflow: auto; list-style: none; }

.scene-clip-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--ui-space-2); padding: var(--ui-space-1); border: 0; border-radius: var(--ui-radius-md); background: var(--ui-surface-subtle); }

.scene-clip-row.is-active { background: var(--ui-accent-wash); box-shadow: inset 0 0 0 1.5px var(--ui-accent); }

.scene-clip { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: var(--ui-space-2); min-width: 0; min-height: var(--ui-touch-target); padding: var(--ui-space-1); border: 0; background: transparent; color: var(--ui-ink); cursor: pointer; text-align: left; }

.scene-clip:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; }

.scene-clip:disabled { color: var(--ui-muted); cursor: not-allowed; }

.scene-clip-cover { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--ui-radius-sm); background: var(--ui-surface-subtle); }

/* 切片首帧完整显示：竖屏切片左右留白由同图模糊背景填充，与素材库卡片一致。
   img 用 absolute+inset 定位，避免父容器高度未定时 height:100% 失效被裁。 */
.scene-clip-cover img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: contain; }

.scene-clip-cover::before { content: ''; position: absolute; inset: 0; z-index: 0; background-image: var(--asset-fill); background-size: cover; background-position: center; opacity: 0.45; filter: blur(14px) saturate(0.7); transform: scale(1.2); }

.scene-clip-cover b { position: absolute; right: 4px; bottom: 4px; padding: 0 5px; border-radius: var(--ui-radius-pill); background: color-mix(in srgb, var(--ui-ink) 80%, transparent); color: var(--ui-action-on-primary); font-size: var(--ui-font-size-2xs); font-weight: var(--ui-font-weight-semibold); }

.scene-clip-tile { display: grid; place-items: center; color: var(--ui-muted); }

.scene-clip-tile svg { width: 20px; height: 20px; }

.scene-clip-copy { display: grid; gap: 2px; min-width: 0; padding: 0 var(--ui-space-1); }

.scene-clip-copy strong { overflow: hidden; font-size: var(--ui-font-size-sm); text-overflow: ellipsis; white-space: nowrap; }

.scene-clip-copy small { overflow: hidden; color: var(--ui-muted); font-size: var(--ui-font-size-2xs); text-overflow: ellipsis; white-space: nowrap; }

.scene-clip-actions { display: flex; align-items: center; padding-right: var(--ui-space-1); }

.scene-clip-actions a { display: grid; place-items: center; width: var(--ui-touch-target); height: var(--ui-touch-target); border-radius: var(--ui-radius-sm); color: var(--ui-accent-strong); }

.scene-clip-actions a:hover { background: var(--ui-accent-soft); }

.scene-clip-actions svg { width: 16px; height: 16px; }

.scene-clip-note { color: var(--ui-muted); font-size: var(--ui-font-size-2xs); }

/* ---------------- 涂抹编辑器（图像擦除） ---------------- */
/* 画布即图片本体：底图画原图、叠加层画半透明笔迹；触控按下直接开涂，
   工具条只放画笔/橡皮/粗细/撤销/清空的必要操作。 */
.media-tool-paint { display: grid; gap: var(--ui-space-3); }

.media-tool-paint-stage { position: relative; display: flex; justify-content: center; padding: var(--ui-space-3); border: 0; border-radius: var(--ui-radius-lg); background: var(--ui-surface-muted); }

.media-tool-paint-frame { position: relative; line-height: 0; }

.media-tool-paint-base, .media-tool-paint-layer { display: block; border-radius: var(--ui-radius-sm); }

.media-tool-paint-layer { position: absolute; inset: 0; touch-action: none; cursor: crosshair; }

.media-tool-paint-empty { margin: 0; padding: var(--ui-space-8) var(--ui-space-4); color: var(--ui-muted); font-size: var(--ui-font-size-sm); text-align: center; }

.media-tool-paint-cursor { position: absolute; top: 0; left: 0; border: 2px solid color-mix(in srgb, var(--ui-action-on-primary) 90%, transparent); border-radius: 50%; box-shadow: 0 0 0 1px color-mix(in srgb, var(--ui-ink) 45%, transparent); pointer-events: none; }

.media-tool-paint-cursor.is-eraser { border-style: dashed; }

.media-tool-paint-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-space-3); }

.media-tool-paint-tools { display: inline-flex; gap: 2px; padding: 3px; border: 0; border-radius: var(--ui-radius-pill); background: var(--ui-fill-1); overflow: hidden; }

.media-tool-paint-tools button { display: inline-flex; align-items: center; gap: var(--ui-space-2); min-height: var(--ui-touch-target); padding: 0 var(--ui-space-3); border: 0; background: var(--ui-surface); color: var(--ui-ink); cursor: pointer; font-size: var(--ui-font-size-sm); }

.media-tool-paint-tools button.is-active { background: var(--ui-action-selection); color: var(--ui-accent-strong); }

.media-tool-paint-tools button + button { border-left: 1px solid var(--ui-line); }

.media-tool-paint-toolbar > button { display: inline-flex; align-items: center; gap: var(--ui-space-2); min-height: 40px; padding: 0 var(--ui-space-4); border: 0; border-radius: var(--ui-radius-pill); background: var(--ui-fill-1); color: var(--ui-ink); cursor: pointer; font-size: var(--ui-font-size-sm); font-weight: var(--ui-font-weight-medium); }

.media-tool-paint-toolbar > button:disabled { color: var(--ui-muted); cursor: not-allowed; opacity: .6; }

.media-tool-paint-toolbar svg { width: 16px; height: 16px; color: var(--ui-muted); }

.media-tool-paint-tools button.is-active svg { color: var(--ui-accent-strong); }

.media-tool-paint-size { display: inline-flex; align-items: center; gap: var(--ui-space-2); color: var(--ui-muted); font-size: var(--ui-font-size-sm); }

.media-tool-paint-size input { width: 140px; accent-color: var(--ui-accent); }

.media-tool-paint-status { margin: 0; color: var(--ui-muted); font-size: var(--ui-font-size-sm); }

@media (max-width: 480px) {
  .media-tool-paint-toolbar { gap: var(--ui-space-2); }

  .media-tool-paint-size { flex: 1 1 100%; }

  .media-tool-paint-size input { flex: 1 1 auto; width: auto; }
}

@media (max-width: 1280px) {
  .media-tool-workspace.is-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

@media (max-width: 1024px) {
  .scene-viewer { grid-template-columns: 1fr; }

  .scene-clip-list { max-height: none; }

  .media-tool-workspace.is-split { grid-template-columns: minmax(0, 1fr); }

  .media-tool-input-column { position: static; }

  .media-tool-settings { padding: var(--ui-space-4); }
}

@media (max-width: 768px) {
  .media-tool-source-grid, .media-tool-source-grid.is-quad { grid-template-columns: minmax(0, 1fr); gap: var(--ui-space-6); }

  /* Narrow layouts stack the slot: the frame stays centred at its own ratio
       and the facts move underneath it. */
  .media-tool-source-preview { margin-inline: auto; }

  .media-tool-source-body { flex-basis: 100%; }

  .media-tool-box-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .media-tool-header { flex-wrap: wrap; }

  .media-tool-about { margin-left: auto; }
}

@media (max-width: 480px) {
  .media-tool-toolbar-actions, .media-tool-project-name { width: 100%; }

  .media-tool-project-name input { width: 100%; }

  .media-tool-toolbar-actions > button { flex: 1 1 auto; }

  .media-tool-header-icon { display: none; }

  .media-tool-grid, .media-tool-parameter-grid { grid-template-columns: 1fr; }

  .media-tool-box-grid { grid-template-columns: 1fr; }

  .media-tool-advanced > summary { flex-wrap: wrap; }

  .media-tool-advanced > summary small { margin-left: 0; }

  .media-result-layout { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .media-tool-tier-card, .media-tool-source-preview { transition: none; }

  .media-tool-spinner { animation-duration: 2s; }
}

}
/* /styles/pages/voice-tool.css */
@layer pages {
/* AI 配音 / AI 字幕 tool pages (public/voice-tool.js). The page frame, stepper,
   sections and action bar come from the shared tool-page styles; this sheet
   composes the video stage with its caption preview, the dialogue table, the
   voice rows and the voice library dialog. Caption colours arrive as custom
   properties from the server's preset list, never as literals here. */

.vt-video-card {
  display: grid;
  gap: var(--ui-space-3);
  padding: var(--ui-space-5);
  border-radius: var(--ui-radius-lg);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-card);
}

.vt-video-empty {
  display: grid;
  justify-items: center;
  gap: var(--ui-space-2);
  padding: var(--ui-space-9) var(--ui-space-5);
  border: 1px dashed var(--ui-line-strong);
  border-radius: var(--ui-radius-md);
  background: var(--ui-surface-subtle);
  color: var(--ui-muted);
  text-align: center;
}

.vt-video-empty > svg, .vt-video-empty > i { width: 32px; height: 32px; color: var(--ui-accent); }
.vt-video-empty strong { color: var(--ui-ink-strong); font-size: var(--ui-font-size-md); }
.vt-video-empty small { font-size: var(--ui-font-size-xs); }
.vt-video-empty.is-dragging, .vt-stage.is-dragging { outline: 2px solid var(--ui-accent); outline-offset: 2px; }

/* The stage takes the video's own shape at every width (its width follows the
   height budget times the frame ratio, capped by the column), so the caption
   overlay sits exactly over the picture and its size follows the frame height. */
.vt-stage {
  position: relative;
  container-type: size;
  aspect-ratio: var(--vt-ratio, 9 / 16);
  width: min(100%, calc(var(--vt-stage-height, 560px) * var(--vt-ratio-value, 0.5625)));
  margin-inline: auto;
  overflow: hidden;
  border-radius: var(--ui-radius-md);
  background: var(--ui-surface-muted);
}

.vt-page { --vt-stage-height: min(62vh, 560px); }
.vt-workspace.media-tool-workspace.is-split { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.vt-stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }

.vt-caption {
  position: absolute;
  inset-inline: 6%;
  bottom: var(--vt-caption-bottom, 20%);
  color: var(--vt-caption-color);
  font-size: calc(var(--vt-caption-size, 0.034) * 100cqh);
  font-weight: var(--ui-font-weight-medium);
  line-height: var(--ui-line-height-tight);
  text-align: center;
  letter-spacing: 0;
  pointer-events: none;
  -webkit-text-stroke: calc(var(--vt-caption-outline, 0.16) * 1em) var(--vt-caption-edge);
  paint-order: stroke fill;
}

.vt-caption.is-bold { font-weight: var(--ui-font-weight-bold); }
.vt-caption[hidden] { display: none; }
.vt-caption span { padding: 0.08em 0.3em; border-radius: 0.15em; background: var(--vt-caption-box); box-decoration-break: clone; }

.vt-video-facts { display: grid; gap: var(--ui-space-1); min-width: 0; }
.vt-video-facts strong { overflow: hidden; color: var(--ui-ink-strong); font-size: var(--ui-font-size-sm); text-overflow: ellipsis; white-space: nowrap; }
.vt-video-facts span, .vt-hint { color: var(--ui-muted); font-size: var(--ui-font-size-xs); }
.vt-hint { margin: 0; line-height: var(--ui-line-height-snug); }
.vt-hint-warning { padding: var(--ui-space-2) var(--ui-space-3); border-radius: var(--ui-radius-sm); background: var(--ui-warning-soft); color: var(--ui-warning); }

.vt-count { margin-left: var(--ui-space-2); color: var(--ui-muted); font-size: var(--ui-font-size-xs); font-weight: var(--ui-font-weight-medium); font-variant-numeric: tabular-nums; }

.vt-source-tabs { justify-self: start; }

.vt-source-pane { padding: var(--ui-space-4); border-radius: var(--ui-radius-md); background: var(--ui-surface-subtle); }
.vt-pane-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ui-space-3); }
.vt-pane-row .vt-hint, .vt-pane-row .vt-status { flex: 1 1 220px; }
.vt-status { display: flex; align-items: center; gap: var(--ui-space-2); margin: 0; color: var(--ui-ink); font-size: var(--ui-font-size-sm); }
.vt-status svg, .vt-status i { width: 16px; height: 16px; color: var(--ui-accent); }
.vt-paste { display: grid; gap: var(--ui-space-3); }
.vt-paste textarea { width: 100%; min-height: 96px; resize: vertical; }

/* Dialogue table: index, start–end, (role), text, actions. */
.vt-lines { display: grid; gap: var(--ui-space-2); }

.vt-line {
  display: grid;
  grid-template-columns: 24px auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--ui-space-2);
}

.vt-line.has-role { grid-template-columns: 24px auto minmax(56px, 80px) minmax(0, 1fr) auto; }
.vt-line-index { color: var(--ui-muted); font-size: var(--ui-font-size-xs); font-variant-numeric: tabular-nums; text-align: right; }
.vt-line-time { display: flex; align-items: center; gap: var(--ui-space-1); color: var(--ui-muted); }
.vt-line-time input { width: 58px; min-height: 40px; padding-inline: var(--ui-space-2); font-variant-numeric: tabular-nums; }
.vt-line-role, .vt-line-text { min-width: 0; min-height: 40px; }
.vt-line-actions { display: flex; gap: var(--ui-space-1); }

.vt-lines-empty {
  display: grid;
  justify-items: center;
  gap: var(--ui-space-1);
  padding: var(--ui-space-6);
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
  text-align: center;
}

.vt-lines-empty strong { color: var(--ui-ink); font-size: var(--ui-font-size-sm); }
.vt-add-line { justify-self: start; }

.vt-field { display: grid; gap: var(--ui-space-2); min-width: 0; }
.vt-label { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ui-space-3); color: var(--ui-ink-soft); font-size: var(--ui-font-size-xs); font-weight: var(--ui-font-weight-medium); }
.vt-label output { color: var(--ui-muted); font-weight: var(--ui-font-weight-regular); font-variant-numeric: tabular-nums; }
.vt-segmented { justify-self: start; max-width: 100%; }
.vt-caption-controls { display: grid; gap: var(--ui-space-4); }

.vt-roles { display: grid; gap: var(--ui-space-2); }
.vt-role { display: grid; grid-template-columns: minmax(56px, 96px) minmax(0, 1fr) auto; align-items: center; gap: var(--ui-space-3); }
.vt-role-name { overflow: hidden; color: var(--ui-ink); font-size: var(--ui-font-size-sm); font-weight: var(--ui-font-weight-medium); text-overflow: ellipsis; white-space: nowrap; }

.vt-role-voice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ui-space-2);
  min-width: 0;
  border-radius: var(--ui-radius-md);
  text-align: left;
}

.vt-role-voice > span { display: grid; min-width: 0; }
.vt-role-voice strong { color: var(--ui-ink-strong); font-size: var(--ui-font-size-sm); }
.vt-role-voice small { overflow: hidden; color: var(--ui-muted); font-size: var(--ui-font-size-xs); text-overflow: ellipsis; white-space: nowrap; }

.vt-bgm { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-space-3); padding: var(--ui-space-3) var(--ui-space-4); border-radius: var(--ui-radius-md); background: var(--ui-surface-subtle); }
.vt-bgm > span { display: flex; flex: 1 1 160px; align-items: center; gap: var(--ui-space-2); min-width: 0; }
.vt-bgm strong { overflow: hidden; font-size: var(--ui-font-size-sm); text-overflow: ellipsis; white-space: nowrap; }
.vt-volume { display: flex; align-items: center; gap: var(--ui-space-2); color: var(--ui-ink-soft); font-size: var(--ui-font-size-xs); }
.vt-volume output { min-width: 3.5ch; font-variant-numeric: tabular-nums; }
.vt-inline-button { justify-self: start; }

/* ---------------- Voice library dialog ---------------- */
dialog.vt-voice-dialog { width: min(920px, calc(100vw - 32px)); padding: 0; }
.vt-voice-panel { display: flex; flex-direction: column; max-height: calc(100dvh - 48px); }
.vt-voice-head, .vt-voice-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--ui-space-3); padding: var(--ui-space-6) var(--ui-space-7) var(--ui-space-3); }
.vt-voice-head h2 { margin: 0; font-size: var(--ui-font-size-xl); }
.vt-voice-head p { display: flex; align-items: center; gap: var(--ui-space-1); margin: var(--ui-space-1) 0 0; color: var(--ui-muted); font-size: var(--ui-font-size-xs); }
.vt-voice-head p svg, .vt-voice-head p i { width: 14px; height: 14px; }
.vt-voice-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ui-space-3); margin: 0 var(--ui-space-7); }
.vt-voice-speeds { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-space-2); color: var(--ui-muted); font-size: var(--ui-font-size-xs); }
.vt-voice-foot { justify-content: flex-end; padding-block: var(--ui-space-4) var(--ui-space-6); }

.vt-voice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--ui-space-3);
  overflow-y: auto;
  padding: var(--ui-space-4) var(--ui-space-7);
}

.vt-voice-card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--ui-space-2); padding: var(--ui-space-3); border-radius: var(--ui-radius-md); background: var(--ui-surface-subtle); }
.vt-voice-card.is-selected { background: var(--ui-accent-wash); box-shadow: 0 0 0 2px var(--ui-accent); }
.vt-voice-pick { display: grid; gap: var(--ui-space-1); min-height: 0; padding: 0; border: 0; border-radius: var(--ui-radius-sm); background: transparent; box-shadow: none; text-align: left; white-space: normal; }
.vt-voice-pick strong { color: var(--ui-ink-strong); font-size: var(--ui-font-size-sm); }
.vt-voice-card.is-selected .vt-voice-pick strong { font-weight: var(--ui-font-weight-semibold); }
.vt-voice-pick small { color: var(--ui-muted); font-size: var(--ui-font-size-xs); }
.vt-voice-sample { color: var(--ui-ink-soft); font-size: var(--ui-font-size-xs); line-height: var(--ui-line-height-snug); }
.vt-voice-check { position: absolute; top: var(--ui-space-2); right: 56px; color: var(--ui-accent); }
.vt-voice-empty { grid-column: 1 / -1; color: var(--ui-muted); text-align: center; }

@media (max-width: 1024px) {
  .vt-page { --vt-stage-height: min(56vh, 480px); }
  .vt-workspace.media-tool-workspace.is-split { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 768px) {
  .vt-line, .vt-line.has-role { grid-template-columns: 24px minmax(0, 1fr) auto; }
  .vt-line-time { grid-column: 2; }
  .vt-line-role { grid-column: 2; }
  .vt-line-text { grid-column: 2; }
  .vt-line-actions { grid-column: 3; grid-row: 1; }
  .vt-role { grid-template-columns: minmax(0, 1fr) auto; }
  .vt-role-name { grid-column: 1 / -1; }
  .vt-voice-head, .vt-voice-foot, .vt-voice-grid { padding-inline: var(--ui-space-5); }
  .vt-voice-bar { margin-inline: var(--ui-space-5); }
}

/* Phones: option rows wrap into equal cells instead of scrolling sideways. */
@media (max-width: 480px) {
  .vt-segmented { display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); justify-self: stretch; border-radius: var(--ui-radius-md); }
  .vt-segmented button { padding-inline: var(--ui-space-2); }
  .vt-source-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); justify-self: stretch; border-radius: var(--ui-radius-md); }
  .vt-voice-grid { grid-template-columns: minmax(0, 1fr); }
  .vt-voice-speeds .segmented { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); width: 100%; border-radius: var(--ui-radius-md); }
  .vt-voice-speeds .segmented button { padding-inline: var(--ui-space-1); }
}

}
/* /styles/pages/usage.css */
@layer pages {
/*
 * Pages layer — 使用记录（SCREEN-011）. The only stylesheet for this page; the
 * billing-detail dialog it opens is styled in usage-detail.css.
 *
 * A slim filter card (date range, 查询/重置, quick ranges as a segmented
 * track), then one table card: heading with count, the ledger table and a
 * pagination row; under 768px each row becomes a stacked record. Amounts use
 * tabular numerals.
 */
/* ---------------- 筛选卡 ---------------- */
.usage-history {
  display: grid;
  min-width: 0;
  gap: var(--ui-space-5);
  color: var(--ui-ink);
}

.uh-filters {
  padding: var(--ui-space-5) var(--ui-space-6);
  border: 0;
  border-radius: var(--ui-radius-lg);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-card);
}

.uh-filter-controls {
  --uh-field-height: var(--ui-control-height);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--ui-space-3);
}

.uh-filter-controls label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  color: var(--ui-ink-soft);
  font-size: var(--ui-font-size-xs);
  font-weight: var(--ui-font-weight-medium);
}

.uh-filter-controls input {
  width: 168px;
  height: var(--uh-field-height);
  min-height: var(--uh-field-height);
  margin: 0;
  padding: 0 var(--ui-space-3);
}

/* flex-end keeps the separator on the input baseline. */
.uh-date-separator {
  align-self: flex-end;
  display: flex;
  align-items: center;
  height: var(--uh-field-height);
  color: var(--ui-muted);
  font-size: var(--ui-font-size-sm);
}

.uh-filter-actions {
  display: flex;
  gap: var(--ui-space-2);
}

.uh-filter-actions button {
  min-height: var(--uh-field-height);
  padding: 0 var(--ui-space-5);
}

.uh-filter-actions [data-reset] {
  border-color: transparent;
  background: var(--ui-fill-1);
}

.uh-filter-actions [data-reset]:hover:not(:disabled) {
  border-color: transparent;
  background: var(--ui-fill-2);
}

/* Quick ranges: the shared .segmented track, pushed to the end of the row. */
.uh-presets {
  margin-left: auto;
}

.uh-validation {
  margin: var(--ui-space-3) 0 0;
  color: var(--ui-danger);
  font-size: var(--ui-font-size-xs);
}

/* ---------------- 记录卡 ---------------- */
.uh-records {
  overflow: hidden;
  border: 0;
  border-radius: var(--ui-radius-lg);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-card);
}

.uh-list-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ui-space-4);
  padding: var(--ui-space-5) var(--ui-space-6) var(--ui-space-4);
}

.uh-list-heading h3 {
  display: flex;
  align-items: center;
  gap: var(--ui-space-2);
  margin: 0;
  color: var(--ui-ink-strong);
  font-size: var(--ui-font-size-lg);
  font-weight: var(--ui-font-weight-semibold);
}

.uh-count {
  min-width: 24px;
  padding: 1px var(--ui-space-2);
  border-radius: var(--ui-radius-pill);
  background: var(--ui-fill-1);
  color: var(--ui-muted);
  font-size: var(--ui-font-size-2xs);
  font-weight: var(--ui-font-weight-medium);
  text-align: center;
}

.uh-scope {
  margin: 2px 0 0;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
}

.uh-load-status {
  color: var(--ui-accent);
  font-size: var(--ui-font-size-xs);
}

.uh-error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ui-space-3);
  margin: 0 var(--ui-space-6) var(--ui-space-4);
  padding: var(--ui-space-3) var(--ui-space-4);
  border-radius: var(--ui-radius-md);
  background: var(--ui-danger-soft);
  color: var(--ui-danger);
  font-size: var(--ui-font-size-sm);
}

.uh-content {
  min-width: 0;
}

/* ---------------- 表格 ---------------- */
.uh-table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: var(--ui-font-size-sm);
}

.uh-table th {
  padding: var(--ui-space-3) var(--ui-space-4);
  border: 0;
  border-top: 1px solid var(--ui-line);
  border-bottom: 1px solid var(--ui-line);
  background: transparent;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
  font-weight: var(--ui-font-weight-medium);
  text-align: left;
}

.uh-table td {
  padding: var(--ui-space-4);
  border: 0;
  border-bottom: 1px solid var(--ui-line);
  vertical-align: middle;
  line-height: var(--ui-line-height-snug);
}

.uh-table th:first-child,
.uh-table td:first-child {
  padding-left: var(--ui-space-6);
}

.uh-table th:last-child,
.uh-table td:last-child {
  padding-right: var(--ui-space-6);
}

/* The task column takes the room; time and the action stay compact. */
.uh-table th:first-child {
  width: 32%;
}

.uh-table th:nth-child(2) {
  width: 180px;
}

.uh-table th:last-child {
  width: 85px;
}

.uh-table tbody tr:last-child td {
  border-bottom: 0;
}

.uh-table tbody tr {
  transition: background-color var(--ui-duration-fast) var(--ui-ease-standard);
}

.uh-table tbody tr:hover {
  background: color-mix(in srgb, var(--ui-surface-subtle) 70%, transparent);
}

.uh-task {
  min-width: 0;
}

.uh-task strong {
  display: -webkit-box;
  overflow: hidden;
  color: var(--ui-ink-strong);
  font-size: var(--ui-font-size-sm);
  font-weight: var(--ui-font-weight-semibold);
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.uh-task small {
  display: block;
  margin-top: 2px;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
  overflow-wrap: anywhere;
}

.uh-time,
.uh-user {
  color: var(--ui-ink-soft);
  font-size: var(--ui-font-size-xs);
  font-variant-numeric: tabular-nums;
}

.uh-money {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.uh-price {
  color: var(--ui-ink-strong);
  font-weight: var(--ui-font-weight-semibold);
}

.uh-cost {
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
}

.uh-action {
  text-align: right;
}

.uh-action button {
  min-height: 32px;
  padding: 0 var(--ui-space-3);
  border: 0;
  border-radius: var(--ui-radius-pill);
  background: transparent;
  color: var(--ui-accent);
  font-size: var(--ui-font-size-xs);
}

.uh-action button:hover:not(:disabled) {
  border-color: transparent;
  background: var(--ui-accent-wash);
  color: var(--ui-accent-strong);
}

/* ---------------- 分页 ---------------- */
.uh-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ui-space-3) var(--ui-space-5);
  padding: var(--ui-space-4) var(--ui-space-6);
  border-top: 1px solid var(--ui-line);
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
}

.uh-page-summary {
  margin-right: auto;
  font-variant-numeric: tabular-nums;
}

.uh-page-size {
  display: flex;
  align-items: center;
  gap: var(--ui-space-2);
  margin: 0;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
  font-weight: var(--ui-font-weight-regular);
  white-space: nowrap;
}

.uh-page-size select {
  width: auto;
  height: 34px;
  min-height: 34px;
  margin: 0;
  padding: 0 32px 0 var(--ui-space-3);
  border-radius: var(--ui-radius-pill);
  font-size: var(--ui-font-size-xs);
}

.uh-pages {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0;
}

.uh-pages button {
  min-width: 34px;
  min-height: 34px;
  padding: 0 var(--ui-space-2);
  border: 0;
  background: transparent;
  color: var(--ui-ink);
  font-size: var(--ui-font-size-xs);
  font-variant-numeric: tabular-nums;
}

.uh-pages button:hover:not(:disabled) {
  border-color: transparent;
  background: var(--ui-fill-1);
}

.uh-pages button[aria-current="page"],
.uh-pages button[aria-current="page"]:hover:not(:disabled) {
  background: var(--ui-ink);
  color: var(--ui-action-on-primary);
}

.uh-ellipsis {
  padding: 0 2px;
  color: var(--ui-muted);
}

.uh-jump {
  display: flex;
  align-items: center;
  gap: var(--ui-space-2);
  margin: 0;
}

.uh-jump label {
  display: flex;
  align-items: center;
  gap: var(--ui-space-2);
  margin: 0;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
  font-weight: var(--ui-font-weight-regular);
  white-space: nowrap;
}

.uh-jump input {
  width: 56px;
  height: 34px;
  min-height: 34px;
  margin: 0;
  padding: 0 var(--ui-space-1);
  border-radius: var(--ui-radius-sm);
  font-size: var(--ui-font-size-xs);
  text-align: center;
}

.uh-jump button {
  min-height: 34px;
  padding: 0 var(--ui-space-3);
  border-color: transparent;
  background: var(--ui-fill-1);
  font-size: var(--ui-font-size-xs);
}

.uh-page-error {
  margin: 0;
  padding: 0 var(--ui-space-6) var(--ui-space-4);
  color: var(--ui-danger);
  font-size: var(--ui-font-size-xs);
}

.uh-empty {
  display: grid;
  place-content: center;
  justify-items: center;
  min-height: 280px;
  padding: var(--ui-space-7) var(--ui-space-5);
  color: var(--ui-muted);
  font-size: var(--ui-font-size-sm);
  text-align: center;
}

.uh-empty-symbol {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: var(--ui-space-3);
  border-radius: var(--ui-radius-md);
  background: var(--ui-surface-subtle);
  color: var(--ui-accent);
  font-size: 28px;
}

.uh-empty h4 {
  margin: 0;
  color: var(--ui-ink);
  font-size: var(--ui-font-size-md);
  font-weight: var(--ui-font-weight-medium);
}

.uh-empty p {
  margin: var(--ui-space-2) 0 0;
  font-size: var(--ui-font-size-xs);
}

/* ---------------- 触控目标 ---------------- */
@media (pointer: coarse) {
  .uh-filter-controls {
    --uh-field-height: var(--ui-touch-target);
  }

  .uh-presets button,
  .uh-pages button,
  .uh-jump button,
  .uh-action button,
  .uh-filter-actions button,
  .uh-jump input,
  .uh-page-size select,
  .uh-filter-controls input {
    min-height: var(--ui-touch-target);
  }

  .uh-pages button,
  .uh-jump button,
  .uh-action button {
    min-width: var(--ui-touch-target);
  }
}

/* ---------------- 窄屏 ---------------- */
@media (max-width: 1024px) {
  .uh-presets {
    margin-left: 0;
  }

  .uh-page-summary {
    flex-basis: 100%;
  }
}

@media (max-width: 768px) {
  .uh-filters {
    padding: var(--ui-space-4);
  }

  .uh-filter-controls {
    align-items: stretch;
    flex-direction: column;
  }

  .uh-filter-actions button,
  .uh-presets button {
    flex: 1;
  }

  .uh-list-heading {
    padding: var(--ui-space-4);
  }

  /* Each record stacks: name, then labelled facts, the action on the right. */
  .uh-table,
  .uh-table tbody {
    display: block;
  }

  .uh-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .uh-table tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--ui-space-1) var(--ui-space-4);
    padding: var(--ui-space-4);
    border-top: 1px solid var(--ui-line);
  }

  .uh-table td,
  .uh-table td:first-child,
  .uh-table td:last-child {
    display: block;
    width: auto;
    padding: 0;
    border: 0;
  }

  .uh-table .uh-task {
    grid-column: 1 / -1;
    margin-bottom: var(--ui-space-1);
  }

  .uh-table :is(.uh-time, .uh-user, .uh-money) {
    grid-column: 1;
    text-align: left;
  }

  .uh-table td[data-label]::before {
    margin-right: var(--ui-space-2);
    color: var(--ui-muted);
    content: attr(data-label);
    font-size: var(--ui-font-size-xs);
    font-weight: var(--ui-font-weight-regular);
  }

  .uh-table .uh-action {
    grid-column: 2;
    grid-row: 2 / span 4;
    align-self: center;
  }

  .uh-pagination {
    padding: var(--ui-space-4);
  }

  .uh-pages {
    order: 3;
    flex-basis: 100%;
    justify-content: center;
  }

  .uh-jump {
    margin-left: auto;
  }

  .uh-error {
    margin-inline: var(--ui-space-4);
  }

  /* 列方向下 flex-basis 作用于高度：清除旧表的 120px 基值，
       否则每个日期字段都会撑出半屏空白。 */
  .uh-filter-controls > label {
    flex: 0 0 auto;
  }

  .uh-filter-controls label,
  .uh-filter-controls input {
    width: 100%;
  }

  .uh-date-separator {
    display: none;
  }

  .uh-presets {
    margin-left: 0;
  }
}

}
/* /styles/pages/usage-detail.css */
@layer pages {
/*
 * Pages layer — 计费详情 dialog (#usage-dialog). Opened from 使用记录 and from a
 * generation record's 查看计费明细; markup from renderUsageDetail in
 * usage-history.js. One headline total, then itemized lines when there are
 * several; catalog cost appears for administrators only.
 */
.usage-detail-head strong {
  color: var(--ui-ink-strong);
  font-size: var(--ui-font-size-md);
  font-weight: var(--ui-font-weight-semibold);
  overflow-wrap: anywhere;
}

.usage-detail-head p {
  margin: var(--ui-space-1) 0 0;
}

.usage-basis {
  margin: 0 0 var(--ui-space-3);
}

.usage-total {
  display: flex;
  align-items: baseline;
  gap: var(--ui-space-2);
  margin: var(--ui-space-4) 0;
  padding: var(--ui-space-4) var(--ui-space-5);
  border: 0;
  border-radius: var(--ui-radius-md);
  background: var(--ui-surface);
}

.usage-total span {
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
}

.usage-total strong {
  color: var(--ui-ink-strong);
  font-size: var(--ui-font-size-xl);
  font-variant-numeric: tabular-nums;
  font-weight: var(--ui-font-weight-semibold);
}

.usage-total small {
  margin-left: auto;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-2xs);
}

.usage-line {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ui-space-3);
  padding: var(--ui-space-3) 0;
  border-top: 1px solid var(--ui-line);
}

.usage-line > div:first-child {
  min-width: 0;
}

.usage-line strong {
  color: var(--ui-ink);
  font-size: var(--ui-font-size-sm);
  font-weight: var(--ui-font-weight-medium);
}

.usage-line p {
  margin: var(--ui-space-1) 0 0;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-2xs);
  line-height: var(--ui-line-height-relaxed);
}

.usage-line-amount {
  flex: 0 0 auto;
  text-align: right;
}

.usage-line-amount b {
  color: var(--ui-ink);
  font-size: var(--ui-font-size-sm);
  font-variant-numeric: tabular-nums;
}

.usage-line-amount small {
  display: block;
  margin-top: 2px;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-2xs);
}

}
/* /styles/pages/team.css */
@layer pages {
/*
 * Pages layer — 团队 (Teams)。
 *
 * 页面是账户空间的成员、资金与使用审计视图，刻意保持克制：余额与使用情况
 * 为主，金额不作为视觉重点，也不做企业 BI 大屏。表格复用 provider-table 的
 * 窄屏折叠规则，次要列在窄窗口收起而不是横向滚动。
 * 团队不共享素材与项目，所以这里没有任何素材库/项目库的样式。
 */
[id="team-view"] .team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--ui-space-4);
  margin-top: var(--ui-space-3);
}

[id="team-view"] .team-card {
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-2);
  padding: var(--ui-space-5);
  border: 0;
  border-radius: var(--ui-radius-lg);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-card);
  transition: box-shadow var(--ui-duration-normal) var(--ui-ease-out), transform var(--ui-duration-normal) var(--ui-ease-out);
}

[id="team-view"] .team-card:hover {
  box-shadow: var(--ui-shadow-hover);
  transform: translateY(-2px);
}

[id="team-view"] > .ui-page > section > .empty-list,
[id="team-view"] .team-subsection > .empty-list {
  border-radius: var(--ui-radius-lg);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-card);
}

[id="team-view"] .team-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ui-space-2);
}

[id="team-view"] .team-card-head h4 {
  margin: 0;
  overflow: hidden;
  color: var(--ui-ink-strong);
  font-size: var(--ui-font-size-lg);
  text-overflow: ellipsis;
  white-space: nowrap;
}

[id="team-view"] .team-card-meta {
  margin: 0;
  font-size: var(--ui-font-size-xs);
  color: var(--ui-muted);
}

[id="team-view"] .team-card-balance,
[id="team-view"] .team-detail-balance {
  display: flex;
  align-items: baseline;
  gap: var(--ui-space-2);
  margin: 0;
  font-size: var(--ui-font-size-sm);
  color: var(--ui-muted);
}

[id="team-view"] .team-card-balance strong,
[id="team-view"] .team-detail-balance strong {
  color: var(--ui-ink-strong);
  font-size: var(--ui-font-size-xl);
  font-weight: var(--ui-font-weight-semibold);
  font-variant-numeric: tabular-nums;
}

[id="team-view"] .team-card .text-button {
  align-self: flex-start;
  margin: auto 0 0 calc(var(--ui-space-2) * -1);
}

[id="team-view"] .text-button svg {
  width: 16px;
  height: 16px;
}

/* 邀请：只在有待处理邀请时出现，不长期占用页面。 */
[id="team-view"] .team-invitations,
[id="team-view"] .team-subsection {
  margin-top: var(--ui-space-7);
}

[id="team-view"] .team-invitation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ui-space-4);
  margin-bottom: var(--ui-space-3);
  padding: var(--ui-space-4) var(--ui-space-5);
  border: 0;
  border-radius: var(--ui-radius-lg);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-card);
}

[id="team-view"] .team-invitation strong {
  color: var(--ui-ink-strong);
}

[id="team-view"] .team-invitation-actions {
  display: flex;
  align-items: center;
  gap: var(--ui-space-2);
}

/* 团队详情：标题、余额与标签页 */
[id="team-view"] .team-detail-head {
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-2);
}

[id="team-view"] .team-detail-head > .text-button {
  align-self: flex-start;
  margin-left: calc(var(--ui-space-2) * -1);
}

[id="team-view"] .team-detail-title {
  display: flex;
  align-items: center;
  gap: var(--ui-space-3);
}

[id="team-view"] .team-detail-title h2 {
  margin: 0;
}

/* Tabs: one segmented track (grey track, white thumb). */
[id="team-view"] .team-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  margin: var(--ui-space-6) 0;
  padding: 3px;
  border: 0;
  border-radius: var(--ui-radius-pill);
  background: var(--ui-fill-1);
}

[id="team-view"] .team-tabs button {
  min-height: 34px;
  padding: 0 var(--ui-space-5);
  border: 0;
  border-radius: var(--ui-radius-pill);
  background: transparent;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-sm);
}

[id="team-view"] .team-tabs button:hover:not(:disabled) {
  border-color: transparent;
  background: transparent;
  color: var(--ui-ink);
}

[id="team-view"] .team-tabs button.is-active,
[id="team-view"] .team-tabs button.is-active:hover:not(:disabled) {
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-1), 0 0 0 0.5px var(--ui-line);
  color: var(--ui-ink-strong);
  font-weight: var(--ui-font-weight-semibold);
}

/* 概览：一张白卡里的若干数字，用竖线分隔，视觉权重低于页面标题 */
[id="team-view"] .team-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  padding: var(--ui-space-5) 0;
  border-radius: var(--ui-radius-lg);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-card);
}

[id="team-view"] .team-facts > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 var(--ui-space-6);
}

[id="team-view"] .team-facts > div + div {
  border-left: 1px solid var(--ui-line);
}

[id="team-view"] .team-facts span {
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
}

[id="team-view"] .team-facts strong {
  color: var(--ui-ink-strong);
  font-size: var(--ui-font-size-xl);
  font-weight: var(--ui-font-weight-semibold);
  font-variant-numeric: tabular-nums;
}

/* 使用动态：自然的记录流，不是消费排行榜 */
[id="team-view"] .team-activity {
  margin: 0;
  padding: var(--ui-space-1) var(--ui-space-5);
  border-radius: var(--ui-radius-lg);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-card);
  list-style: none;
}

[id="team-view"] .team-activity li {
  display: flex;
  align-items: center;
  gap: var(--ui-space-3);
  padding: var(--ui-space-3) 0;
  border-bottom: 1px solid var(--ui-line);
}

[id="team-view"] .team-activity li:last-child {
  border-bottom: 0;
}

[id="team-view"] .team-activity-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

[id="team-view"] .team-activity-body span,
[id="team-view"] .team-activity-cost span {
  font-size: var(--ui-font-size-xs);
  color: var(--ui-muted);
}

[id="team-view"] .team-activity-cost {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  font-size: var(--ui-font-size-sm);
}

[id="team-view"] .team-activity-cost strong {
  font-weight: 600;
  color: var(--ui-ink-strong);
}

/* 成员与搜索结果 */
[id="team-view"] .team-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border: 0;
  border-radius: 50%;
  background: var(--ui-accent-soft);
  color: var(--ui-accent-strong);
  font-size: var(--ui-font-size-sm);
  font-weight: 600;
}

[id="team-view"] .team-member-cell {
  display: inline-flex;
  align-items: center;
  gap: var(--ui-space-2);
}

[id="team-view"] .team-search-results {
  list-style: none;
  margin: var(--ui-space-3) 0 0;
  padding: 0;
}

[id="team-view"] .team-search-results li {
  display: flex;
  align-items: center;
  gap: var(--ui-space-3);
  padding: var(--ui-space-2) 0;
  border-bottom: 1px solid var(--ui-line);
}

[id="team-view"] .team-search-results li:last-child {
  border-bottom: 0;
}

[id="team-view"] .team-search-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[id="team-view"] .team-invite-form,
[id="team-view"] .team-rename-form,
[id="team-view"] .team-transfer-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--ui-space-3);
  margin-bottom: var(--ui-space-4);
  /* 表单保持在一列可读宽度内，不随页面容器拉满整行。 */
  max-width: 640px;
}

[id="team-view"] .team-invite-form input,
[id="team-view"] .team-rename-form input,
[id="team-view"] .team-transfer-form input {
  min-height: var(--ui-control-height);
  min-width: 0;
  flex: 1 1 220px;
}

/* 说明独占一行，跟在它解释的控件之后，而不是挤在按钮旁边。 */
[id="team-view"] .team-invite-form .team-hint,
[id="team-view"] .team-rename-form .team-hint,
[id="team-view"] .team-transfer-form .team-hint {
  flex: 1 1 100%;
  margin: 0;
}

[id="team-view"] .team-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ui-space-2);
}

[id="team-view"] .team-filter {
  display: inline-flex;
  align-items: center;
  gap: var(--ui-space-2);
  font-size: var(--ui-font-size-sm);
  color: var(--ui-muted);
}

/* 标签是单行的短词，窄容器里不能被折成两行。 */
[id="team-view"] .team-filter > span {
  white-space: nowrap;
}

/* 结果预览：缩略图 + 说明，尺寸受控 */
[id="team-view"] .team-result {
  display: inline-flex;
  align-items: center;
  gap: var(--ui-space-2);
  font-size: var(--ui-font-size-sm);
  color: var(--ui-action-primary);
}

[id="team-view"] .team-result img {
  width: 56px;
  height: 36px;
  object-fit: cover;
  border: 0;
  border-radius: var(--ui-radius-sm);
  background: var(--ui-surface-subtle);
}

[id="team-view"] .team-compact-table td,
[id="team-view"] .team-compact-table th {
  font-size: var(--ui-font-size-sm);
}

[id="team-view"] .team-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--ui-space-3);
  margin-top: var(--ui-space-4);
  font-size: var(--ui-font-size-sm);
  color: var(--ui-muted);
}

[id="team-view"] .team-hint,
[id="team-view"] .team-empty {
  margin: var(--ui-space-2) 0;
  font-size: var(--ui-font-size-sm);
  color: var(--ui-muted);
}

/* Settings and invitation blocks are white cards; the account-facts rows
   inside them keep their hairline rhythm. */
[id="team-view"] .team-subsection:has(> form, > dl),
[id="team-view"] .team-danger {
  padding: var(--ui-space-6) var(--ui-space-7);
  border: 0;
  border-radius: var(--ui-radius-lg);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-card);
}

[id="team-view"] .team-subsection > dl.account-facts {
  margin-bottom: var(--ui-space-5);
}

/* Inline form actions share the field height so they align on one baseline. */
[id="team-view"] .team-subsection form .text-button {
  min-height: var(--ui-control-height);
  padding: 0 var(--ui-space-5);
  border-radius: var(--ui-radius-pill);
  background: var(--ui-fill-1);
  color: var(--ui-ink);
}

[id="team-view"] .team-subsection form .text-button:hover:not(:disabled) {
  background: var(--ui-fill-2);
  color: var(--ui-ink-strong);
}

[id="team-view"] .team-subsection form .account-field {
  flex: 1 1 220px;
  margin-bottom: 0;
}

[id="team-view"] .team-danger h3 {
  color: var(--ui-danger);
}

[id="team-view"] .team-danger-action,
[id="team-view"] .team-subsection form .team-danger-action {
  min-height: 40px;
  padding: 0 var(--ui-space-5);
  border-radius: var(--ui-radius-pill);
  background: var(--ui-danger-soft);
  color: var(--ui-danger);
}

/* 成员详情：以对话框承载。它挂在 body 上，不在 [id="team-view"] 之内，
   所以这里要为复用的团队结构与表格再声明一次页面级样式。 */
.team-member-dialog {
  width: min(680px, calc(100vw - 32px));
}

.team-member-dialog .team-member-dialog-body {
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-4);
  max-height: calc(100dvh - 96px);
  overflow-y: auto;
}

.team-member-dialog .team-member-dialog-body > .section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ui-space-3);
}

.team-member-dialog .team-member-dialog-body > .section-heading h3 {
  margin: 0;
  font-size: var(--ui-font-size-lg);
  color: var(--ui-ink-strong);
}

.team-member-dialog .team-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: var(--ui-space-3);
}

.team-member-dialog .team-facts > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--ui-space-3) var(--ui-space-4);
  border: 0;
  border-radius: var(--ui-radius-md);
  background: var(--ui-surface);
}

.team-member-dialog .team-facts span {
  font-size: var(--ui-font-size-xs);
  color: var(--ui-muted);
}

.team-member-dialog .team-facts strong {
  font-size: var(--ui-font-size-lg);
  font-weight: 600;
  color: var(--ui-ink-strong);
}

.team-member-dialog .team-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border-radius: 50%;
  background: var(--ui-accent-soft);
  color: var(--ui-accent-strong);
  border: 0;
  font-size: var(--ui-font-size-sm);
  font-weight: 600;
}

.team-member-dialog .team-member-cell {
  display: inline-flex;
  align-items: center;
  gap: var(--ui-space-2);
}

.team-member-dialog .team-compact-table td,
.team-member-dialog .team-compact-table th {
  font-size: var(--ui-font-size-sm);
}

.team-member-dialog .team-dialog-title {
  margin: var(--ui-space-3) 0 0;
  font-size: var(--ui-font-size-sm);
  color: var(--ui-ink-strong);
}

/* 窄屏：次要列先收起，细节留给成员详情对话框 */
@media (max-width: 768px) {
  [id="team-view"] .team-facts > div + div {
    border-left: 0;
  }

  [id="team-view"] .team-facts {
    row-gap: var(--ui-space-4);
  }

  [id="team-view"] .team-invitation {
    flex-direction: column;
    align-items: flex-start;
  }

  [id="team-view"] .team-row-actions {
    justify-content: flex-start;
  }

  [id="team-view"] .team-facts {
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  }
}

}
/* /styles/pages/account.css */
@layer pages {
/* 个人中心: a profile card and a balance card side by side, the security
   card (password and e-mail code) below, then the balance ledger table.
   Cards are white on the canvas; facts read as label/value rows separated by
   hairlines. Reuses the provider-table primitive for the ledger. */
.account-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ui-space-5);
  align-items: stretch;
}

.account-panel,
.account-ledger-panel {
  padding: var(--ui-space-7);
  border: 0;
  border-radius: var(--ui-radius-lg);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-card);
}

.account-panel h3 {
  margin: 0;
  color: var(--ui-ink-strong);
  font-size: var(--ui-font-size-lg);
  font-weight: var(--ui-font-weight-semibold);
}

/* Profile: avatar, name and role, then the account facts. */
.account-profile-head {
  display: flex;
  align-items: center;
  gap: var(--ui-space-4);
  margin-bottom: var(--ui-space-5);
}

.account-profile-head > div {
  display: grid;
  justify-items: start;
  gap: var(--ui-space-1);
  min-width: 0;
}

.account-profile-head h3 {
  overflow: hidden;
  max-width: 100%;
  font-size: var(--ui-font-size-xl);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-profile-avatar {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--ui-accent-soft);
  color: var(--ui-accent-strong);
  font-size: var(--ui-font-size-2xl);
  font-weight: var(--ui-font-weight-semibold);
  line-height: 1;
}

/* One fact per row with hairline separators. */
.account-facts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin: 0;
}

.account-facts > div {
  display: flex;
  justify-content: space-between;
  gap: var(--ui-space-4);
  padding: var(--ui-space-3) 0;
  border-top: 1px solid var(--ui-line);
  font-size: var(--ui-font-size-sm);
}

.account-facts dt {
  flex: 0 0 auto;
  color: var(--ui-muted);
  white-space: nowrap;
}

.account-facts dd {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  color: var(--ui-ink-strong);
  text-align: right;
  font-variant-numeric: tabular-nums;
  word-break: normal;
  overflow-wrap: anywhere;
}

/* Balance: the available amount is the headline. */
.account-balance-panel {
  display: flex;
  flex-direction: column;
}

.account-balance-panel h3 {
  color: var(--ui-muted);
  font-size: var(--ui-font-size-sm);
  font-weight: var(--ui-font-weight-medium);
}

.account-balance {
  display: grid;
  gap: 2px;
  margin: var(--ui-space-2) 0 var(--ui-space-5);
}

.account-balance strong {
  color: var(--ui-ink-strong);
  font-size: var(--ui-font-size-3xl);
  font-weight: var(--ui-font-weight-semibold);
  font-variant-numeric: tabular-nums;
  line-height: var(--ui-line-height-tight);
  letter-spacing: var(--ui-letter-spacing-display);
}

.account-balance span {
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
}

.account-balance-panel .account-hint {
  margin: auto 0 0;
  padding-top: var(--ui-space-4);
}

/* Security: two forms side by side, divided by a hairline. */
.account-password-panel {
  margin-top: var(--ui-space-5);
}

.account-security {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ui-space-7);
}

.account-security-block {
  display: grid;
  align-content: start;
  gap: var(--ui-space-4);
  min-width: 0;
}

.account-security-block + .account-security-block {
  padding-left: var(--ui-space-7);
  border-left: 1px solid var(--ui-line);
}

.account-security form {
  display: grid;
  gap: 0;
  max-width: 420px;
}

.account-field {
  display: grid;
  gap: 6px;
  margin-bottom: var(--ui-space-4);
  font-size: var(--ui-font-size-xs);
}

.account-field span {
  color: var(--ui-ink-soft);
  font-weight: var(--ui-font-weight-medium);
}

.account-field input {
  margin: 0;
}

.account-hint {
  margin: 0 0 var(--ui-space-4);
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
  line-height: var(--ui-line-height-normal);
}

.account-security form > .primary {
  justify-self: start;
}

/* 验证码输入与发送按钮同一行，对齐输入框底边。 */
.account-code-row {
  display: flex;
  align-items: flex-end;
  gap: var(--ui-space-2);
  margin-bottom: var(--ui-space-4);
}

.account-code-row .account-field {
  flex: 1;
  margin-bottom: 0;
}

.account-code-row button {
  flex: 0 0 auto;
  white-space: nowrap;
}

.account-password-status {
  margin: 0 0 var(--ui-space-3);
  font-size: var(--ui-font-size-sm);
}

.account-password-status[data-tone="error"] {
  color: var(--ui-danger);
}

.account-password-status[data-tone="success"] {
  color: var(--ui-success);
}

.account-error {
  margin: 0 0 var(--ui-space-2);
  color: var(--ui-danger);
  font-size: var(--ui-font-size-sm);
}

.account-positive {
  color: var(--ui-success);
}

.account-negative {
  color: var(--ui-ink);
}

/* Ledger: a heading on the canvas, then the shared table card. */
.account-ledger-panel {
  margin-top: var(--ui-space-8);
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.account-ledger-panel td[data-label="说明"] {
  max-width: 320px;
  overflow-wrap: anywhere;
}

.account-ledger-panel .provider-table strong {
  font-variant-numeric: tabular-nums;
}

.account-ledger-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ui-space-3);
  margin-top: var(--ui-space-4);
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
}

@media (max-width: 1024px) {
  .account-security {
    grid-template-columns: minmax(0, 1fr);
  }

  .account-security-block + .account-security-block {
    padding-top: var(--ui-space-6);
    padding-left: 0;
    border-top: 1px solid var(--ui-line);
    border-left: 0;
  }
}

@media (max-width: 768px) {
  .account-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 480px) {
  .account-panel {
    padding: var(--ui-space-5);
  }

  /* The ledger table stacks into one card per entry; each cell keeps its
     column name from data-label, so nothing scrolls sideways at 320px. */
  .account-ledger-panel .provider-table,
  .account-ledger-panel .provider-table tbody {
    display: block;
  }

  .account-ledger-panel .provider-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .account-ledger-panel .provider-table tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--ui-space-1) var(--ui-space-3);
    padding: var(--ui-space-4);
    border-bottom: 1px solid var(--ui-line);
  }

  .account-ledger-panel .provider-table tbody tr:last-child {
    border-bottom: 0;
  }

  .account-ledger-panel .provider-table td {
    display: block;
    padding: 0;
    border: 0;
  }

  .account-ledger-panel .provider-table td[data-label="说明"] {
    grid-column: 1 / -1;
    max-width: none;
    color: var(--ui-muted);
    font-size: var(--ui-font-size-xs);
  }

  .account-ledger-panel .provider-table td[data-label="变动后余额"]::before {
    content: "余额 ";
    color: var(--ui-muted);
  }

  .account-ledger-panel .provider-table td[data-label="变动后余额"] {
    grid-column: 1 / -1;
    color: var(--ui-muted);
    font-size: var(--ui-font-size-xs);
  }
}

}
/* /styles/pages/dialogs.css */
@layer pages {
/*
 * Pages layer — 对话框统一框架与轻提示。
 *
 * 覆盖：项目重命名（SCREEN-017）、模板选择/应用/管理（SCREEN-016）、
 * 素材预览（SCREEN-019）、提示词预览（SCREEN-020）、创作空间素材库（SCREEN-021）、
 * 余额/密码（SCREEN-022/023）、计费/冻结详情、价目管理（SCREEN-026/027/028）、
 * 以及 toast。行为、id 与 data-* 钩子保持不变。
 */
/* ---------------- 统一对话框框架 ----------------
   The frame (glass sheet, title row, footer) is owned by
   styles/controls.css; this file only sizes individual dialogs and lays out
   their bodies. */
dialog .eyebrow {
  margin: 0 0 var(--ui-space-1);
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
}

/* 表单型对话框：字段间距（仅作用于简单表单对话框，组件型对话框
   如 .cm-dialog / .bp-library / .rp-material-dialog 自带布局，不受影响） */
:is(
  [id="project-edit-dialog"],
  [id="password-dialog"],
  [id="balance-dialog"],
  [id="pricing-catalog-dialog"],
  [id="pricing-section-dialog"],
  [id="pricing-item-dialog"],
  [id="template-manager"]
) label {
  display: block;
  margin: 0 0 var(--ui-space-4);
  color: var(--ui-ink-soft);
  font-size: var(--ui-font-size-xs);
  font-weight: var(--ui-font-weight-medium);
}

:is(
  [id="project-edit-dialog"],
  [id="password-dialog"],
  [id="balance-dialog"],
  [id="pricing-catalog-dialog"],
  [id="pricing-section-dialog"],
  [id="pricing-item-dialog"],
  [id="template-manager"]
) label > input,
:is(
  [id="project-edit-dialog"],
  [id="password-dialog"],
  [id="balance-dialog"],
  [id="pricing-catalog-dialog"],
  [id="pricing-section-dialog"],
  [id="pricing-item-dialog"],
  [id="template-manager"]
) label > select,
:is(
  [id="project-edit-dialog"],
  [id="password-dialog"],
  [id="balance-dialog"],
  [id="pricing-catalog-dialog"],
  [id="pricing-section-dialog"],
  [id="pricing-item-dialog"],
  [id="template-manager"]
) label > textarea {
  width: 100%;
  margin-top: 6px;
  box-sizing: border-box;
}

:is(
  [id="project-edit-dialog"],
  [id="password-dialog"],
  [id="balance-dialog"],
  [id="pricing-catalog-dialog"],
  [id="pricing-section-dialog"],
  [id="pricing-item-dialog"],
  [id="template-manager"]
) label > small {
  display: block;
  margin-top: var(--ui-space-1);
}

dialog .form-grid {
  display: grid;
  gap: var(--ui-space-3);
}

dialog .form-grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

dialog .form-grid label {
  margin: 0;
}

dialog .form-grid input,
dialog .form-grid select {
  margin-top: var(--ui-space-1);
}

dialog .auth-copy {
  margin: var(--ui-space-3) 0;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-sm);
  line-height: var(--ui-line-height-relaxed);
}

/* ---------------- AI视频创作空间（creative-start） ----------------
   Reuses the home hub action cards verbatim inside a dialog frame. */
[id="creative-start-dialog"] {
  width: min(720px, calc(100vw - 32px));
}

/* The bare <p> default margin sits between the title row and the action
   cards; tighten it to the shared small gap. */
[id="creative-start-dialog"] .hub-copy {
  margin: var(--ui-space-1) 0 var(--ui-space-4);
}

[id="creative-start-dialog"] .hub-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 0;
}

@media (max-width: 768px) {
  [id="creative-start-dialog"] .hub-actions {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------------- 项目重命名（SCREEN-017） ---------------- */
[id="project-edit-dialog"] {
  width: min(420px, calc(100vw - 32px));
}

[id="project-edit-dialog"] h2 {
  margin: 0 0 var(--ui-space-5);
}

/* ---------------- 冻结 / 计费详情 ---------------- */
[id="usage-dialog"],
[id="holds-dialog"] {
  width: min(680px, calc(100vw - 32px));
}

[id="usage-detail"],
[id="holds-detail"],
[id="hold-release-detail"],
[id="admin-confirm-detail"] {
  min-height: 0;
  overflow-y: auto;
  overflow-wrap: anywhere;
  overscroll-behavior: contain;
}

[id="holds-detail"] .provider-table {
  width: 100%;
  margin-top: var(--ui-space-3);
  border-radius: var(--ui-radius-md);
  background: var(--ui-surface);
  box-shadow: none;
  font-size: var(--ui-font-size-xs);
}

[id="holds-detail"] .provider-table th {
  padding: var(--ui-space-2) var(--ui-space-3);
  border-bottom: 1px solid var(--ui-line);
  background: transparent;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-2xs);
  font-weight: var(--ui-font-weight-medium);
  text-align: left;
}

[id="holds-detail"] .provider-table td {
  padding: var(--ui-space-3);
  border-bottom: 1px solid var(--ui-line);
  line-height: var(--ui-line-height-relaxed);
  vertical-align: top;
}

[id="holds-detail"] .provider-table tr:last-child td {
  border-bottom: 0;
}

[id="hold-release-detail"] .warnings,
[id="admin-confirm-detail"] .warnings {
  margin: var(--ui-space-3) 0;
  padding-left: var(--ui-space-5);
  font-size: var(--ui-font-size-xs);
  line-height: var(--ui-line-height-relaxed);
}

/* ---------------- 管理端操作确认（用户停用/角色/删除、助手接入删除） ---------------- */
[id="admin-confirm-dialog"] {
  width: min(480px, calc(100vw - 32px));
}

/* 删除等高危操作的“二次确认”：勾选知情确认后才能点确认 */
.admin-confirm-ack {
  display: flex;
  align-items: flex-start;
  gap: var(--ui-space-2);
  margin-top: var(--ui-space-4);
  padding: var(--ui-space-3) var(--ui-space-4);
  border: 0;
  border-radius: var(--ui-radius-md);
  background: var(--ui-surface);
  color: var(--ui-ink-soft);
  font-size: var(--ui-font-size-xs);
  line-height: var(--ui-line-height-relaxed);
}

.admin-confirm-ack input {
  margin: var(--ui-space-1) 0 0;
  accent-color: var(--ui-accent);
}

/* 危险操作确认键：语义红色，仅限对话框内 */
dialog .primary.danger,
dialog button.danger {
  border-color: transparent;
  background: var(--ui-danger);
  color: var(--ui-action-on-primary);
}

dialog .primary.danger:hover:not(:disabled),
dialog button.danger:hover:not(:disabled) {
  border-color: transparent;
  background: color-mix(in srgb, var(--ui-danger) 84%, var(--ui-ink));
  color: var(--ui-action-on-primary);
}

/* ---------------- 素材库选择对话框（静态 library-dialog） ---------------- */
.library-dialog {
  width: min(880px, calc(100vw - 32px));
}

.library-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ui-space-2);
  margin-bottom: var(--ui-space-3);
}

.library-tools .filters {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  border-radius: var(--ui-radius-pill);
  background: var(--ui-fill-1);
}

.library-tools .filters button {
  min-height: 34px;
  padding: 0 var(--ui-space-4);
  border: 0;
  background: transparent;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-sm);
}

.library-tools .filters button[aria-pressed="true"] {
  background: var(--ui-surface);
  color: var(--ui-ink-strong);
  box-shadow: var(--ui-shadow-1);
}

.library-tools .search-box {
  display: flex;
  flex: 1 1 200px;
  align-items: center;
  gap: var(--ui-space-2);
  min-width: 160px;
  min-height: 40px;
  margin: 0;
  padding: 0 var(--ui-space-4);
  border: 0;
  border-radius: var(--ui-radius-pill);
  background: var(--ui-fill-1);
  color: var(--ui-muted);
}

.library-tools .search-box input {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 10px 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--ui-ink);
  font-size: var(--ui-font-size-sm);
}

.dialog-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ui-space-3);
  min-height: 22px;
  margin-bottom: var(--ui-space-2);
}

.dialog-status p {
  margin: 0;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
}

.dialog-status p:empty {
  display: none;
}

.library-grid {
  display: grid;
  min-height: 300px;
  max-height: 50dvh;
  grid-template-columns: repeat(auto-fill, minmax(144px, 1fr));
  grid-auto-rows: max-content;
  gap: var(--ui-space-3);
  align-content: start;
  padding-right: var(--ui-space-1);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.library-card {
  min-width: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--ui-radius-md);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-card);
}

[id="library-dialog"] .dialog-footer {
  justify-content: space-between;
}

[id="library-selected"] {
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
}

/* ---------------- 素材预览（SCREEN-019 静态部分） ---------------- */
.preview-dialog {
  width: min(760px, calc(100vw - 32px));
}

[id="preview-media"] {
  display: grid;
  min-height: 240px;
  max-height: 60dvh;
  place-items: center;
  overflow: hidden;
  border: 0;
  border-radius: var(--ui-radius-lg);
  background: var(--ui-surface-muted);
}

[id="preview-media"] :is(img, video) {
  max-width: 100%;
  max-height: 60dvh;
  object-fit: contain;
}

[id="preview-media"] audio {
  width: min(480px, 90%);
}

[id="preview-name"] {
  margin: var(--ui-space-3) 0 0;
  overflow: hidden;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------------- 生成确认 / 场景素材选择 ---------------- */
.config-dialog {
  width: min(680px, calc(100vw - 32px));
}

[id="config-content"] {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.scene-picker-dialog {
  width: min(760px, calc(100vw - 32px));
}

.scene-picker-dialog .dialog-heading {
  margin-bottom: 0;
  padding: var(--ui-space-5) var(--ui-space-5) var(--ui-space-3);
}

.scene-picker-dialog .close-dialog {
  display: grid;
  width: 32px;
  height: 32px;
  min-height: 32px;
  place-items: center;
  padding: 0;
  border-color: transparent;
  background: transparent;
  color: var(--ui-muted);
}

.scene-picker-dialog .close-dialog:hover {
  background: var(--ui-surface-subtle);
  color: var(--ui-ink);
}

.scene-picker-search {
  display: flex;
  align-items: center;
  gap: var(--ui-space-2);
  margin: 0 var(--ui-space-6) var(--ui-space-4);
  padding: 0 var(--ui-space-4);
  border: 0;
  border-radius: var(--ui-radius-pill);
  background: var(--ui-fill-1);
  color: var(--ui-muted);
}

.scene-picker-search svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}

.scene-picker-search input {
  width: 100%;
  height: var(--ui-control-height);
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--ui-ink);
  font-size: var(--ui-font-size-sm);
}

.scene-picker-grid {
  display: grid;
  min-height: 0;
  max-height: 55dvh;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: var(--ui-space-3);
  padding: 4px var(--ui-space-6) var(--ui-space-4);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.scene-picker-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--ui-space-2);
  padding: var(--ui-space-2);
  overflow: hidden;
  border: 0;
  border-radius: var(--ui-radius-md);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-card);
  text-align: left;
  white-space: normal;
  transition: box-shadow var(--ui-duration-fast) var(--ui-ease-standard), background-color var(--ui-duration-fast) var(--ui-ease-standard);
}

.scene-picker-card:hover {
  box-shadow: var(--ui-shadow-hover);
}

.scene-picker-card:has(input[data-scene-asset]:checked) {
  background: var(--ui-accent-wash);
  box-shadow: 0 0 0 2px var(--ui-accent);
}

/* Fixed-height media frame: the sharp img contain-fits so posters of any
   aspect (vertical phone clips included) stay complete, while a blurred
   twin (.media-fill) cover-fills the leftover area so the frame never
   shows bare side gaps. The imgs are pinned to the frame box so
   object-fit has a definite area; place-items:center only positions the
   empty-state icon. */
.scene-picker-thumb {
  position: relative;
  display: grid;
  width: 100%;
  height: 108px;
  min-height: 108px;
  place-items: center;
  overflow: hidden;
  padding: 0;
  border-radius: var(--ui-radius-sm);
  background: var(--ui-surface-muted);
  color: var(--ui-muted);
}

.scene-picker-thumb svg {
  width: 26px;
  height: 26px;
}

.scene-picker-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.scene-picker-thumb img.media-fill {
  object-fit: cover;
  opacity: 0.45;
  filter: blur(14px) saturate(0.7);
  transform: scale(1.2);
}

.scene-picker-card-copy {
  display: grid;
  min-width: 0;
  gap: var(--ui-space-1);
}

.scene-picker-card .cm-check-label {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--ui-space-2);
}

/* The global `input {}` form rule must not stretch this select checkbox. */
.scene-picker-dialog .cm-check-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  min-height: 0;
  flex: 0 0 16px;
  margin: 0;
  padding: 0;
  border: 0;
  accent-color: var(--ui-accent);
}

.scene-picker-card-copy strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: var(--ui-ink);
  font-size: var(--ui-font-size-xs);
  font-weight: var(--ui-font-weight-medium);
  line-height: var(--ui-line-height-snug);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scene-picker-card-copy small {
  overflow: hidden;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-2xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scene-picker-card-copy .material-description,
.scene-picker-card-copy .material-status {
  margin-top: 0;
}

/* Shared corner overlays are sized for large library cards; on small picker
   thumbnails they would hide the preview, so the controls drop to a static
   row of compact chips below the frame instead. */
.scene-picker-card .material-media {
  display: grid;
  gap: var(--ui-space-1);
}

.scene-picker-card .material-controls {
  position: static;
  display: flex;
  justify-content: space-between;
}

.scene-picker-card .material-controls .material-corner-toggle,
.scene-picker-card .material-controls .material-corner-compare {
  display: inline-flex;
  width: auto;
  height: auto;
  min-height: var(--ui-control-height);
  align-items: center;
  gap: var(--ui-space-1);
  padding: var(--ui-space-1) var(--ui-space-2);
  clip-path: none;
  border-radius: var(--ui-radius-sm);
  font-size: var(--ui-font-size-2xs);
  line-height: var(--ui-line-height-snug);
  white-space: nowrap;
}

.scene-picker-card .material-controls .material-corner-toggle::after {
  border-radius: inherit;
}

.scene-picker-card .material-controls .material-corner-toggle[aria-pressed="false"]::after {
  border-color: var(--ui-line-strong);
}

.scene-picker-card .material-controls .material-corner-symbol {
  grid-row: auto;
  font-size: var(--ui-font-size-xs);
}

.scene-picker-card .material-controls .material-corner-label,
.scene-picker-card .material-controls .material-corner-state {
  overflow: visible;
  font-size: inherit;
  line-height: inherit;
}

.scene-picker-card .material-controls .material-corner-compare span:first-child {
  font-size: var(--ui-font-size-xs);
}

.scene-picker-dialog .material-group-items {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr));
}

.scene-picker-dialog .dialog-footer {
  margin-top: 0;
  padding: var(--ui-space-4) var(--ui-space-6) var(--ui-space-6);
}

.scene-picker-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: var(--ui-space-6);
  color: var(--ui-muted);
  font-size: var(--ui-font-size-sm);
  text-align: center;
}

@media (max-width: 480px) {
  .scene-picker-grid,
  .scene-picker-dialog .material-group-items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------------- 提示词预览 / 提交前确认 ---------------- */
[id="submission-prompt-dialog"],
[id="preflight-dialog"] {
  width: min(680px, calc(100vw - 32px));
}

[id="preflight-content"] {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

[id="preflight-submit-error"] {
  margin: 12px 0 0;
}

/* ---------------- 价目管理对话框 ---------------- */
[id="pricing-catalog-dialog"],
[id="pricing-item-dialog"] {
  width: min(640px, calc(100vw - 32px));
}

[id="pricing-catalog-dialog"] form,
[id="pricing-section-dialog"] form,
[id="pricing-item-dialog"] form {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* ---------------- 模板对话框（动态创建） ---------------- */
[id="quick-template-dialog"],
[id="template-apply-dialog"],
[id="project-switch-dialog"] {
  width: min(720px, calc(100vw - 32px));
}

[id="quick-template-dialog"] h2,
[id="template-apply-dialog"] h2,
[id="project-switch-dialog"] h2,
[id="template-manager"] h2 {
  margin: 0 0 var(--ui-space-2);
  font-size: var(--ui-font-size-lg);
  font-weight: var(--ui-font-weight-semibold);
}

[id="quick-template-dialog"] > p,
[id="template-apply-dialog"] > p,
[id="project-switch-dialog"] > p,
[id="template-manager"] > p {
  margin: 0 0 var(--ui-space-4);
  color: var(--ui-muted);
  font-size: var(--ui-font-size-sm);
  line-height: var(--ui-line-height-relaxed);
}

[id="quick-template-dialog"] .project-cards,
[id="template-apply-dialog"] .project-cards,
[id="project-switch-dialog"] .project-cards {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: var(--ui-space-4);
}

[id="quick-template-dialog"] .hub-action,
[id="template-apply-dialog"] .hub-action,
[id="project-switch-dialog"] .hub-action {
  padding: var(--ui-space-4);
  box-shadow: none;
}

[id="project-switch-dialog"] .hub-action > strong,
[id="project-switch-dialog"] .hub-action > span {
  max-width: 100%;
}

[id="project-switch-dialog"] .hub-action:disabled {
  opacity: 0.55;
  cursor: default;
}

[id="project-switch-dialog"] .hub-action:disabled:hover {
  border-color: var(--ui-line);
  box-shadow: none;
}

[id="template-manager"] {
  width: min(620px, calc(100vw - 32px));
}

[id="template-manager"] .manager-form {
  display: flex;
  align-items: flex-end;
  gap: var(--ui-space-2);
  margin: var(--ui-space-2) 0;
}

[id="template-manager"] .manager-form > label {
  flex: 1;
  margin: 0;
}

[id="template-manager"] .manager-form > button {
  white-space: nowrap;
}

.template-list {
  display: grid;
  gap: var(--ui-space-2);
  margin: var(--ui-space-3) 0;
  max-height: 50dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.template-list article {
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: var(--ui-radius-md);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-card);
}

.template-list article > strong {
  display: block;
  padding: var(--ui-space-3) var(--ui-space-3) 0;
  color: var(--ui-ink);
  font-size: var(--ui-font-size-sm);
  font-weight: var(--ui-font-weight-semibold);
}

.template-list article > small {
  display: block;
  margin: var(--ui-space-1) 0 0;
  padding: 0 var(--ui-space-3) var(--ui-space-2);
  color: var(--ui-muted);
  font-size: var(--ui-font-size-2xs);
}

.template-list article > div {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ui-space-1);
  padding: var(--ui-space-2) var(--ui-space-3);
  border-top: 1px solid var(--ui-line);
  background: transparent;
}

.template-list article > div button {
  min-height: 32px;
  padding: 0 var(--ui-space-3);
  font-size: var(--ui-font-size-xs);
}

/* 历史版本：伪装成操作按钮样式的下拉框 */
.template-list article > div select {
  width: auto;
  max-width: 100%;
  height: 32px;
  min-height: 32px;
  margin: 0;
  padding: 0 30px 0 var(--ui-space-3);
  border-radius: var(--ui-radius-pill);
  color: var(--ui-ink);
  font-size: var(--ui-font-size-xs);
}

[id="template-manager"] .template-trash {
  margin: var(--ui-space-3) 0;
}

[id="template-manager"] .template-trash > summary {
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
  cursor: pointer;
}

[id="template-manager"] .template-trash article {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ui-space-2);
  padding: var(--ui-space-2) 0;
  border-bottom: 1px solid var(--ui-line);
}

[id="template-manager"] .template-trash article > strong {
  font-size: var(--ui-font-size-sm);
}

[id="template-manager"] .template-trash article > small {
  color: var(--ui-muted);
  font-size: var(--ui-font-size-2xs);
}

[id="template-manager"] .template-trash article > div {
  margin-left: auto;
  display: flex;
  gap: var(--ui-space-1);
}

[id="template-global-dialog"] {
  width: min(640px, calc(100vw - 32px));
}

[id="template-global-dialog"] label {
  display: block;
  margin: 0 0 var(--ui-space-4);
  font-size: var(--ui-font-size-xs);
  color: var(--ui-ink-soft);
}

[id="template-global-dialog"] textarea {
  width: 100%;
  margin-top: var(--ui-space-1);
  font-family: inherit;
  font-size: var(--ui-font-size-sm);
  line-height: 1.6;
  resize: vertical;
}

[id="template-global-dialog"] .dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--ui-space-2);
  margin-top: var(--ui-space-4);
}

/* ---------------- 创作空间素材对话框（SCREEN-021） ---------------- */
.cm-dialog .cm-dialog-head h2 {
  font-size: var(--ui-font-size-lg);
  font-weight: var(--ui-font-weight-semibold);
}

.cm-dialog .cm-dialog-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ui-space-3);
  padding: var(--ui-space-4) var(--ui-space-6);
  border-top: 1px solid var(--ui-line);
}

.cm-dialog .cm-dialog-footer p {
  margin: 0;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
}

.cm-dialog .cm-dialog-footer > button {
  flex: 0 0 auto;
}

/* 素材库选择器与素材预览的宽度必须在本层声明：legacy 层的同名宽度会被
   上面的 dialog 基础规则覆盖。选择器铺网格需要比表单对话框更宽的版面。 */
.cm-dialog.cm-library-picker[open],
.cm-dialog.cm-preview[open] {
  padding: 0;
}

.cm-dialog.cm-library-picker[open] {
  width: min(1040px, calc(100vw - 32px));
}

.cm-dialog.cm-preview[open] {
  width: min(780px, calc(100vw - 32px));
}

/* Reserve most of the dialog for the frame; one target applies to the whole video. */
.cm-face-dialog[open] {
  width: min(960px, calc(100vw - 32px));
  height: min(920px, calc(100dvh - 32px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  overflow: hidden;
}

.cm-face-dialog .cm-dialog-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--ui-touch-target);
  grid-template-rows: 32px 40px;
  flex: 0 0 104px;
  gap: var(--ui-space-2) var(--ui-space-3);
  padding: var(--ui-space-3) var(--ui-space-6);
}

.cm-face-dialog .cm-dialog-head h2 {
  overflow-wrap: anywhere;
  font-size: var(--ui-font-size-lg);
}

.cm-face-dialog .cm-face-instructions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ui-space-2);
  justify-self: center;
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  min-height: 40px;
  padding: var(--ui-space-2) var(--ui-space-4);
  border-radius: var(--ui-radius-pill);
  background: var(--ui-accent-soft);
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
  line-height: 20px;
}

.cm-face-dialog .cm-face-instructions svg {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  color: var(--ui-accent-strong);
}

.cm-face-dialog .cm-face-instructions strong {
  color: var(--ui-accent-strong);
  font-size: var(--ui-font-size-sm);
  font-weight: var(--ui-font-weight-semibold);
}

.cm-face-dialog .cm-face-body {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: var(--ui-space-2);
  flex: 1 1 0;
  min-height: 0;
  padding: var(--ui-space-3) var(--ui-space-6) var(--ui-space-2);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.cm-face-dialog .cm-face-selected {
  display: flex;
  align-items: flex-start;
  gap: var(--ui-space-3);
  min-width: 0;
}

.cm-face-dialog .cm-face-selected-label {
  flex: 0 0 auto;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
  font-weight: var(--ui-font-weight-semibold);
  line-height: 28px;
}

.cm-face-dialog .cm-face-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ui-space-2);
  min-width: 0;
}

.cm-face-dialog .cm-face-selected-empty {
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
  line-height: 28px;
}

.cm-face-dialog .cm-face-chip {
  min-height: 28px;
  padding: var(--ui-space-1) var(--ui-space-3);
  border: 1px solid var(--ui-accent);
  border-radius: var(--ui-radius-pill);
  color: var(--ui-accent-strong);
  background: var(--ui-accent-soft);
  font-size: var(--ui-font-size-xs);
  font-weight: var(--ui-font-weight-semibold);
  line-height: 20px;
}

.cm-face-dialog .cm-face-chip:hover {
  color: var(--ui-warning);
  border-color: var(--ui-warning);
  background: var(--ui-warning-soft);
}

.cm-face-dialog .cm-face-persons {
  display: flex;
  align-items: stretch;
  gap: var(--ui-space-3);
  min-width: 0;
  min-height: 0;
  padding: var(--ui-space-1);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}

.cm-face-dialog .cm-face-persons > .cm-face-empty {
  position: static;
  width: 100%;
}

.cm-face-dialog .cm-face-person {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  flex: 0 0 min(280px, 76%);
  min-width: 0;
  gap: var(--ui-space-2);
}

.cm-face-dialog .cm-face-card-stage {
  display: block;
  width: 100%;
  height: auto;
  max-height: 100%;
  border-radius: var(--ui-radius-md);
  background: var(--ui-surface-subtle);
  cursor: pointer;
}

.cm-face-dialog .cm-face-person.is-picked .cm-face-card-stage {
  outline: 2px solid var(--ui-accent-strong);
  outline-offset: -1px;
}

.cm-face-dialog .cm-face-person-toggle {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--ui-space-2);
  min-height: var(--ui-touch-target);
  padding: var(--ui-space-1) var(--ui-space-3);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-sm);
  font-size: var(--ui-font-size-xs);
  font-weight: var(--ui-font-weight-semibold);
}

.cm-face-dialog .cm-face-person-toggle.is-picked {
  color: var(--ui-accent-strong);
  border-color: var(--ui-accent);
  background: var(--ui-accent-soft);
}

.cm-face-dialog .cm-face-person-hits {
  color: var(--ui-muted);
  font-size: var(--ui-font-size-2xs);
  font-weight: var(--ui-font-weight-normal);
}

.cm-face-dialog .cm-face-manual {
  min-width: 0;
  border-top: 1px solid var(--ui-line);
  padding-top: var(--ui-space-2);
}

.cm-face-dialog .cm-face-manual > summary {
  cursor: pointer;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
  font-weight: var(--ui-font-weight-semibold);
  line-height: 24px;
}

.cm-face-dialog .cm-face-manual > summary:hover {
  color: var(--ui-accent-strong);
}

.cm-face-dialog .cm-face-manual-body {
  display: grid;
  grid-template-rows: minmax(240px, 42vh) 52px 64px;
  gap: var(--ui-space-2);
  padding-top: var(--ui-space-2);
}

.cm-face-dialog .cm-face-main {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-radius: var(--ui-radius-md);
  background: var(--ui-surface-subtle);
}

.cm-face-dialog .cm-face-stage,
.cm-face-dialog .cm-face-empty {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.cm-face-dialog .cm-face-empty {
  display: grid;
  place-items: center;
  padding: var(--ui-space-3);
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
  text-align: center;
}

.cm-face-dialog .cm-face-layer {
  pointer-events: none;
}

.cm-face-dialog .cm-face-box rect {
  fill: transparent;
  stroke: var(--ui-accent);
  stroke-width: 2.5;
}

.cm-face-dialog .cm-face-box circle.cm-face-tag {
  fill: var(--ui-surface);
  stroke: var(--ui-accent);
  stroke-width: 1.5;
}

.cm-face-dialog .cm-face-box text.cm-face-tag {
  fill: var(--ui-accent-strong);
  font-weight: var(--ui-font-weight-semibold);
}

.cm-face-dialog .cm-face-box.is-picked rect {
  stroke: var(--ui-accent-strong);
  fill: color-mix(in srgb, var(--ui-accent) 14%, transparent);
  stroke-width: 3.5;
}

/* A detected face the scan could not assign to a stable person stays visible
   but dimmer; it can still be picked as an ad-hoc anchor. */
.cm-face-dialog .cm-face-box.is-unclustered rect {
  stroke: var(--ui-muted);
  stroke-dasharray: 6 4;
}

.cm-face-dialog .cm-face-box.is-unclustered .cm-face-tag {
  display: none;
}

.cm-face-dialog .cm-face-status {
  display: flex;
  align-items: center;
  gap: var(--ui-space-3);
  min-width: 0;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
  line-height: var(--ui-line-height-relaxed);
  overflow-wrap: anywhere;
}

.cm-face-dialog .cm-face-status p {
  flex: 1;
  min-width: 0;
  max-height: 100%;
  overflow-y: auto;
  margin: 0;
}

.cm-face-dialog .cm-face-choices {
  display: flex;
  gap: var(--ui-space-2);
  max-width: 50%;
  padding: var(--ui-space-1);
  overflow-x: auto;
  scrollbar-width: thin;
}

.cm-face-dialog .cm-face-choice {
  flex: 0 0 auto;
  min-height: var(--ui-touch-target);
  padding: var(--ui-space-2) var(--ui-space-3);
  font-size: var(--ui-font-size-xs);
}

.cm-face-dialog .cm-face-choice.is-picked {
  color: var(--ui-accent-strong);
  background: var(--ui-accent-soft);
  border-color: var(--ui-accent);
}

.cm-face-dialog .cm-face-strip {
  display: flex;
  align-items: center;
  gap: var(--ui-space-2);
  min-width: 0;
}

.cm-face-dialog button.icon {
  flex: 0 0 var(--ui-touch-target);
  width: var(--ui-touch-target);
  height: var(--ui-touch-target);
  min-height: var(--ui-touch-target);
}

.cm-face-dialog .cm-face-thumbs {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--ui-space-2);
  flex: 1 1 0;
  min-width: 0;
  padding: var(--ui-space-1);
  overflow-x: auto;
  scrollbar-width: thin;
}

.cm-face-dialog .cm-face-thumb {
  position: relative;
  flex: 0 0 44px;
  width: 44px;
  height: 60px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-sm);
  background: var(--ui-surface-subtle);
}

.cm-face-dialog .cm-face-thumb svg {
  display: block;
  width: 100%;
  height: 100%;
}

.cm-face-dialog .cm-face-thumb.is-current {
  border-color: var(--ui-accent);
  box-shadow: 0 0 0 2px var(--ui-accent);
}

.cm-face-dialog .cm-face-thumb.is-picked {
  border-color: var(--ui-accent-strong);
}

.cm-face-dialog .cm-face-picked,
.cm-face-dialog .cm-face-thumb span {
  position: absolute;
  padding: 2px 0;
  color: var(--ui-action-on-primary);
  font-size: var(--ui-font-size-2xs);
  text-align: center;
}

.cm-face-dialog .cm-face-picked {
  top: 0;
  right: 0;
  padding-inline: var(--ui-space-1);
  border-radius: 0 0 0 var(--ui-radius-sm);
  background: var(--ui-accent-strong);
}

.cm-face-dialog .cm-face-thumb span {
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--ui-ink-strong);
}

.cm-face-dialog .cm-dialog-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  flex: 0 0 auto;
  gap: var(--ui-space-2);
  padding: var(--ui-space-2) var(--ui-space-6);
}

.cm-face-dialog .cm-dialog-footer p {
  height: 24px;
  overflow-y: auto;
  font-size: var(--ui-font-size-sm);
  line-height: 24px;
}

.cm-face-dialog .cm-dialog-footer p.is-selected {
  color: var(--ui-accent-strong);
  font-weight: var(--ui-font-weight-semibold);
}

.cm-face-dialog .cm-dialog-footer button {
  min-height: var(--ui-touch-target);
}

@media (max-width: 480px) {
  .cm-face-dialog[open] {
    width: calc(100vw - 20px);
    height: calc(100dvh - 20px);
    max-height: calc(100dvh - 20px);
  }

  .cm-face-dialog .cm-dialog-head,
  .cm-face-dialog .cm-face-body,
  .cm-face-dialog .cm-dialog-footer {
    padding-inline: var(--ui-space-3);
  }

  .cm-face-dialog .cm-face-body {
    grid-template-rows: minmax(280px, 1fr) 64px 72px;
  }

  .cm-face-dialog .cm-dialog-footer {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .cm-face-dialog .cm-dialog-footer p {
    grid-column: 1 / -1;
  }

  .cm-face-dialog .cm-dialog-footer button {
    white-space: normal;
  }
}

/* ---------------- 轻提示 toast ---------------- */
[id="toast"] {
  position: fixed;
  bottom: var(--ui-space-6);
  /* 侧栏占据的宽度不计入内容区，toast 相对内容区水平居中 */
  left: calc(50% + var(--sidebar-width, 0px) / 2);
  z-index: var(--ui-z-toast);
  display: flex;
  max-width: min(620px, calc(100vw - 32px));
  align-items: center;
  justify-content: space-between;
  gap: var(--ui-space-4);
  padding: var(--ui-space-3) var(--ui-space-5);
  border: 1px solid color-mix(in srgb, var(--ui-surface) 14%, var(--ui-ink));
  border-radius: var(--ui-radius-md);
  background: var(--ui-ink);
  box-shadow: var(--ui-shadow-3);
  color: var(--ui-surface);
  font-size: var(--ui-font-size-sm);
  line-height: var(--ui-line-height-relaxed);
  transform: translateX(-50%);
}

[id="toast-undo"] {
  flex: 0 0 auto;
  min-height: 32px;
  padding: 4px var(--ui-space-3);
  border: 1px solid color-mix(in srgb, var(--ui-surface) 30%, transparent);
  background: transparent;
  color: var(--ui-surface);
  font-size: var(--ui-font-size-xs);
}

[id="toast-undo"]:hover:not(:disabled) {
  border-color: var(--ui-surface);
  background: color-mix(in srgb, var(--ui-surface) 12%, transparent);
  color: var(--ui-surface);
}

/* ---------------- 触控目标 ---------------- */
@media (pointer: coarse) {
  .library-tools .filters button,
  .dialog-footer button,
  .template-list article > div button,
  .scene-picker-card,
  [id="toast-undo"] {
    min-height: var(--ui-touch-target);
  }

  .library-tools .filters button,
  .dialog-footer button,
  .template-list article > div button {
    min-width: var(--ui-touch-target);
  }

  :is(
    [id="project-edit-dialog"],
    [id="password-dialog"],
    [id="balance-dialog"],
    [id="pricing-catalog-dialog"],
    [id="pricing-section-dialog"],
    [id="pricing-item-dialog"],
    [id="template-manager"]
  ) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select) {
    min-height: var(--ui-touch-target);
  }
}

/* ---------------- 窄屏 ---------------- */
@media (max-width: 480px) {
  dialog {
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
    max-height: calc(100dvh - 24px);
    padding: var(--ui-space-5);
  }

  .library-grid {
    min-height: 260px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  [id="quick-template-dialog"] .project-cards,
  [id="template-apply-dialog"] .project-cards,
  [id="project-switch-dialog"] .project-cards {
    grid-template-columns: minmax(0, 1fr);
  }

  dialog .form-grid.two {
    grid-template-columns: minmax(0, 1fr);
  }

  .pricing-editor-row {
    grid-template-columns: minmax(0, 1fr);
  }

  [id="toast"] {
    left: 50%;
  }
}

/* Sectioned pickers share one inline gutter with their heading and footer. */
.library-dialog :is(.library-tools, .library-path, .library-folders, .dialog-status, .library-grid),
.config-dialog [id="config-content"],
.preview-dialog > p {
  padding-inline: var(--ui-space-7);
}

}
/* /styles/pages/audio-perturbation.css */
@layer pages {
.ap-dialog[open] {
  display: block;
  width: min(760px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  overflow: auto;
  padding: var(--ui-space-5);
}
.ap-dialog video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 36vh;
  object-fit: contain;
  background: var(--ui-surface-subtle);
}
.ap-compare {
  display: inline-flex;
  align-items: center;
  gap: var(--ui-space-2);
  margin-block-start: var(--ui-space-2);
  font-size: var(--ui-font-size-sm);
}
.ap-compare input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--ui-accent);
}
.ap-fields {
  display: grid;
  gap: var(--ui-space-3);
  margin-block: var(--ui-space-4);
}
.ap-fields label {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--ui-space-2);
}
.ap-fields input {
  grid-column: 1 / -1;
  min-height: var(--ui-touch-target);
  width: 100%;
}
.ap-dialog [role="status"] {
  min-height: 1.5em;
}
.ap-dialog .dialog-footer {
  position: static;
  flex-direction: row;
  display: flex;
  flex-wrap: wrap;
  gap: var(--ui-space-2);
}

.ap-dialog .dialog-footer button {
  flex: 1 1 110px;
  width: auto;
  min-height: var(--ui-touch-target);
  white-space: normal;
}

}
/* /styles/pages/reframe-download.css */
@layer pages {
/* 下载结果 → 选择画面比例 (views/reframe-download.js): ratio tiles, the fill
   switch and a preview of the export canvas beside them. */
.rf-dialog {
  width: min(680px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  overflow: auto;
}

.rf-header {
  align-items: flex-start;
}

.rf-header p {
  margin: var(--ui-space-1) 0 0;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-sm);
}

.rf-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 200px;
  gap: var(--ui-space-5);
  align-items: start;
}

.rf-options {
  display: grid;
  gap: var(--ui-space-5);
  min-width: 0;
}

.rf-options fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.rf-options legend {
  margin-bottom: var(--ui-space-2);
  padding: 0;
  color: var(--ui-ink-soft);
  font-size: var(--ui-font-size-sm);
  font-weight: var(--ui-font-weight-medium);
}

.rf-ratio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: var(--ui-space-2);
}

.rf-ratio {
  display: grid;
  grid-template-rows: 40px auto;
  justify-items: center;
  gap: var(--ui-space-2);
  min-width: 0;
  min-height: 96px;
  padding: var(--ui-space-3) var(--ui-space-2);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-md);
  background: var(--ui-surface);
  box-shadow: none;
  color: var(--ui-ink);
}

.rf-ratio:hover:not(:disabled) {
  border-color: var(--ui-line-strong);
  background: var(--ui-hover);
}

.rf-ratio[aria-pressed="true"] {
  border-color: var(--ui-accent);
  background: var(--ui-accent-wash);
  box-shadow: 0 0 0 1px var(--ui-accent);
}

/* The tile icon is the canvas itself: 40px on its longer side. */
.rf-shape {
  --rf-shape: 1;
  align-self: center;
  width: calc(40px * min(1, var(--rf-shape)));
  height: calc(40px * min(1, 1 / var(--rf-shape)));
  border: 2px solid currentColor;
  border-radius: 4px;
  color: var(--ui-ink-soft);
}

.rf-ratio[aria-pressed="true"] .rf-shape {
  color: var(--ui-accent);
}

.rf-ratio-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
  text-align: center;
}

.rf-ratio-copy strong {
  font-size: var(--ui-font-size-sm);
  font-weight: var(--ui-font-weight-semibold);
}

.rf-ratio-copy small {
  overflow: hidden;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rf-fit-switch {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.rf-fit-switch button {
  white-space: nowrap;
}

.rf-preview {
  display: grid;
  gap: var(--ui-space-2);
  justify-items: center;
  margin: 0;
  padding: var(--ui-space-3);
  border-radius: var(--ui-radius-md);
  background: var(--ui-fill-1);
}

/* The export canvas at its real ratio inside a 176px square. */
.rf-canvas {
  --rf-ratio: 0.5625;
  position: relative;
  width: calc(176px * min(1, var(--rf-ratio)));
  height: calc(176px * min(1, 1 / var(--rf-ratio)));
  overflow: hidden;
  border-radius: var(--ui-radius-xs);
  background: black;
  box-shadow: var(--ui-shadow-1);
}

.rf-canvas :is(img, video) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.rf-canvas .rf-back {
  display: none;
}

.rf-canvas[data-fit="blur"] .rf-back {
  display: block;
  object-fit: cover;
  filter: blur(8px);
  transform: scale(1.15);
}

.rf-canvas[data-fit="crop"] .rf-front {
  object-fit: cover;
}

.rf-preview figcaption {
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
  text-align: center;
}

.rf-status {
  min-height: 1.5em;
  margin: var(--ui-space-4) 0 0;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-sm);
}

.rf-status[data-tone="error"] {
  color: var(--ui-danger);
}

.rf-footer button {
  min-width: 96px;
}

@media (max-width: 768px) {
  .rf-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .rf-preview {
    order: -1;
  }
}

/* 声音 (views/audio-mix.js): the result plays muted while its two tracks are
   mixed live; three sliders under it. */
.rf-dialog-mix {
  width: min(760px, calc(100vw - 32px));
}

.rf-mix {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: var(--ui-space-4);
  align-items: start;
  padding: var(--ui-space-3);
  border-radius: var(--ui-radius-md);
  background: var(--ui-surface-subtle);
}

.rf-mix-video {
  width: 100%;
  max-height: 240px;
  border-radius: var(--ui-radius-sm);
  background: var(--ui-surface-muted);
  object-fit: contain;
}

.rf-mix-controls {
  display: grid;
  gap: var(--ui-space-3);
  min-width: 0;
}

.rf-mix-row {
  display: grid;
  grid-template-columns: 5em minmax(0, 1fr) 4.5em;
  align-items: center;
  gap: var(--ui-space-3);
  color: var(--ui-ink-soft);
  font-size: var(--ui-font-size-sm);
}

.rf-mix-row output {
  color: var(--ui-ink-strong);
  font-weight: var(--ui-font-weight-medium);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.rf-mix-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ui-space-2);
}

.rf-mix-hint {
  margin: 0;
  color: var(--ui-muted);
  font-size: var(--ui-font-size-xs);
}

@media (max-width: 480px) {
  .rf-mix {
    grid-template-columns: minmax(0, 1fr);
  }
}

}
/* /styles/pages/api-usage.css */
@layer pages {
/* API usage, tariff editing and budget confirmation compose shared EOS controls. */
.at-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--ui-space-4); margin-block: var(--ui-space-5); }
.at-heading h3 { margin: 0; font-size: var(--ui-font-size-lg); }
.at-stats, .at-pricing { background: var(--ui-surface); border-radius: var(--ui-radius-lg); box-shadow: var(--ui-shadow-card); padding: var(--ui-space-6); margin-block: var(--ui-space-6); }
.at-stats { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: var(--ui-space-6); }
.at-stats > div { display: grid; gap: var(--ui-space-2); padding-inline-end: var(--ui-space-5); border-inline-end: 1px solid var(--ui-line); }
.at-stats > div:last-child { border: 0; padding: 0; }
.at-stats strong { font-size: var(--ui-font-size-2xl); font-weight: 600; font-variant-numeric: tabular-nums; }
.at-stats span, .at-stats small, .at-note, .at-table-head, .at-row small, .at-rates span { color: var(--ui-ink-soft); font-size: var(--ui-font-size-xs); }
.at-filters { display: flex; gap: var(--ui-space-3); flex-wrap: wrap; align-items: end; }
.at-filters label, .at-fields label { display: grid; gap: var(--ui-space-2); color: var(--ui-ink-soft); font-size: var(--ui-font-size-xs); min-width: 0; }
.at-filters input, .at-filters select { width: 100%; min-width: 0; }
.at-records { padding-inline: var(--ui-space-6); background: var(--ui-surface); border-radius: var(--ui-radius-lg); box-shadow: var(--ui-shadow-card); }
.at-row { display: grid; grid-template-columns: minmax(180px, 2fr) repeat(5, minmax(70px, 1fr)); gap: var(--ui-space-4); padding-block: var(--ui-space-5); align-items: center; font-size: var(--ui-font-size-sm); font-variant-numeric: tabular-nums; }
.at-row > :not(:first-child) { text-align: right; }
.at-row small { display: block; margin-top: var(--ui-space-1); }
.at-records details { border-top: 1px solid var(--ui-line); }
.at-records summary { list-style: none; cursor: pointer; }
.at-records summary::-webkit-details-marker { display: none; }
.at-records summary:hover { color: var(--ui-accent); }
.at-detail { padding-bottom: var(--ui-space-6); }
.at-facts { grid-template-columns: minmax(0, 1fr); margin: var(--ui-space-4) 0; display: grid; gap: var(--ui-space-3); }
.at-facts > div { min-width: 0; display: flex; align-items: start; justify-content: space-between; gap: var(--ui-space-4); font-size: var(--ui-font-size-xs); }
.at-facts dt { color: var(--ui-ink-soft); }
.at-facts dd { text-align: right; margin: 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.at-call { padding-top: var(--ui-space-4); margin-top: var(--ui-space-4); border-top: 1px solid var(--ui-line); }
.at-call p { overflow-wrap: anywhere; }
.at-rates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ui-space-5); margin-block: var(--ui-space-5); }
.at-rates > div { display: grid; gap: var(--ui-space-2); }
.at-rates strong { font-size: var(--ui-font-size-xl); font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.at-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ui-space-5); }
.at-fields input { width: 100%; }
.at-sale { background: var(--ui-surface-subtle); border-radius: var(--ui-radius-md); padding: var(--ui-space-5); margin-block: var(--ui-space-5); }
.at-history { font-size: var(--ui-font-size-xs); overflow-wrap: anywhere; }
.at-history summary { min-height: var(--ui-control-height); padding-block: var(--ui-space-3); }
.at-error { color: var(--ui-danger); font-size: var(--ui-font-size-sm); }
.at-skeleton { min-height: 140px; margin-block: var(--ui-space-6); }
.at-confirm-body { display: grid; gap: var(--ui-space-4); }
.api-token-confirm { width: min(560px, calc(100% - var(--ui-space-6))); }
.at-note { margin-top: var(--ui-space-5); }
@media (max-width: 768px) {
  .at-row { grid-template-columns: minmax(140px, 1.8fr) repeat(5, minmax(45px, 1fr)); gap: var(--ui-space-2); }
  .at-records { padding-inline: var(--ui-space-4); }
  .at-stats { gap: var(--ui-space-4); }
}
@media (max-width: 768px) {
  .at-stats { grid-template-columns: 1fr 1fr; }
  .at-stats > div:first-child { grid-column: 1 / -1; border-inline: 0; border-bottom: 1px solid var(--ui-line); padding-bottom: var(--ui-space-4); }
  .at-row { grid-template-columns: 1fr 1fr; gap: var(--ui-space-3); }
  .at-row > :first-child { grid-column: 1 / -1; }
  .at-row > :not(:first-child) { text-align: left; }
  .at-row [data-label]::before { content: attr(data-label); display: block; color: var(--ui-ink-soft); font-size: var(--ui-font-size-xs); font-weight: 400; }
  .at-table-head { display: none; }
  .at-records details:first-of-type { border: 0; }
  .at-rates, .at-fields { grid-template-columns: 1fr; }
  .at-filters label { flex: 1 1 120px; }
  .at-facts > div { flex-wrap: wrap; gap: var(--ui-space-2); }
}

@media (max-width: 480px) {
  .at-stats { grid-template-columns: 1fr; }
  .at-stats > div { border-inline: 0; border-bottom: 1px solid var(--ui-line); padding-bottom: var(--ui-space-4); }
  .at-stats strong { white-space: nowrap; }
  .at-filters label { flex-basis: 160px; }
}

}
/* /utilities.css */
@layer utilities {
/* 通用工具类 - 避免重复样式 */

/* ===== 文本截断 ===== */

/* 单行文本截断 - 三重类名提高特异性到 0,0,3,0 */
.text-truncate.text-truncate.text-truncate {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* 多行文本截断（2行）- 使用更高特异性和兼容性写法 */
.text-clamp-2.text-clamp-2.text-clamp-2 {
  display: -webkit-box;
  display: -moz-box;
  -webkit-box-orient: vertical !important;
  -moz-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
  word-break: break-word;
  line-height: 1.5;
  max-height: calc(1.5em * 2); /* 备用方案：限制最大高度 */
}

/* 针对 project-open p 的特殊覆盖 */
.project-open p.text-clamp-2 {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
  word-break: break-word !important;
  line-height: 1.8 !important;
  height: 40px !important;
  max-height: 40px !important;
}

/* 多行文本截断（3行）- 三重类名提高特异性到 0,0,3,0 */
.text-clamp-3.text-clamp-3.text-clamp-3 {
  display: block;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  word-break: break-word;
  line-height: 1.5;
}

/* ===== 可访问性 ===== */

/* Visually-hidden. Used by the shell (#studio-canvas-tab) and quick-gen
   labels; was previously only defined inside prompt-studio/style.css. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===== Flex 布局辅助 ===== */

/* Flex 子元素支持文本截断 */
.flex-truncate {
  min-width: 0;
  flex: 1;
}

/* ===== 组件特异性修复 ===== */

/* 修复后代选择器覆盖工具类的问题 */
.job-row > span.text-truncate,
.experiment-item strong.text-truncate,
.experiment-item small.text-truncate,
.batch-preflight-item strong.text-truncate,
#account-chip span.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* ===== 间距系统 ===== */

.card-padding-sm { padding: 12px; }
.card-padding-md { padding: 16px; }
.card-padding-lg { padding: 20px; }

.card-spacing { margin-bottom: 12px; }
.card-spacing-lg { margin-bottom: 16px; }

/* ===== 表单控件增强 ===== */

.input-comfortable {
  padding: 10px 12px !important;
}

.textarea-comfortable {
  padding: 12px 14px !important;
}

}

/* /styles/pages/hot-portal.css */
@layer pages {
/* 热门翻拍 home page: the collection pattern — lead and freshness line,
   segmented filters with a sort select, hot-term chips, then a responsive grid
   of portrait media cards (cover with dark chips, title, two figures, stated
   reasons and one primary remake action). The page scrolls inside its view. */
.portal-view { overflow-x: hidden; overflow-y: auto; }
.portal-view > .hr-page { display: block; flex: none; max-width: var(--ui-page-width-wide); margin-inline: auto; padding: 0 var(--ui-page-gutter) var(--ui-space-8); }
.hr-head { padding-top: var(--ui-space-6); margin-bottom: var(--ui-space-4); }
.hr-head .page-lead { margin: 0 0 var(--ui-space-1); }
.hr-status, .hr-meta, .hr-count, .hr-hint { margin: 0; color: var(--ui-muted); font-size: var(--ui-font-size-xs); line-height: 1.6; overflow-wrap: anywhere; }

/* ---------- filters ---------- */
.hr-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-space-2) var(--ui-space-3); }
.hr-filter { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.hr-filter button { white-space: nowrap; }
.hr-filter button small { margin-left: 4px; color: var(--ui-muted); font-size: var(--ui-font-size-2xs); font-variant-numeric: tabular-nums; }
.hr-sort { margin-left: auto; min-width: 150px; }
.hr-terms { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-space-2); margin-top: var(--ui-space-4); }
.hr-terms-label { display: inline-flex; align-items: center; gap: 4px; color: var(--ui-ink-soft); font-size: var(--ui-font-size-xs); font-weight: 500; }
.hr-terms-label svg { width: 16px; height: 16px; color: var(--ui-warning); }
.hr-term { min-height: 32px; padding: 0 var(--ui-space-3); border: 0; background: var(--ui-fill-1); color: var(--ui-ink); font-size: var(--ui-font-size-xs); font-weight: 500; box-shadow: none; }
.hr-term small { margin-left: 4px; color: var(--ui-muted); font-size: var(--ui-font-size-2xs); }
.hr-term[aria-pressed="true"] { background: var(--ui-accent-wash); color: var(--ui-accent-strong); box-shadow: inset 0 0 0 1px var(--ui-accent-edge); font-weight: 600; }
.hr-error:not(:empty) { margin-top: var(--ui-space-4); padding: var(--ui-space-3) var(--ui-space-4); border-radius: var(--ui-radius-md); background: var(--ui-danger-soft); color: var(--ui-danger); font-size: var(--ui-font-size-sm); }

/* ---------- cards ---------- */
.hr-count { margin: var(--ui-space-5) 0 var(--ui-space-3); }
.hr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: var(--ui-space-5); }
[data-hot-list] > .hr-grid:first-child { margin-top: var(--ui-space-5); }
.hr-card { display: flex; flex-direction: column; min-width: 0; padding: 0; overflow: hidden; transition: transform var(--ui-duration-fast) var(--ui-ease-out), box-shadow var(--ui-duration-fast) var(--ui-ease-out); }
.hr-card:hover { transform: translateY(-2px); box-shadow: var(--ui-shadow-hover); }
.hr-card.ui-skeleton { min-height: 440px; }
.hr-cover { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; background: var(--ui-surface-muted); }
.hr-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hr-cover-empty { display: grid; place-items: center; width: 100%; height: 100%; color: var(--ui-ink-faint); }
.hr-cover-empty svg { width: 32px; height: 32px; }
.hr-badges { position: absolute; right: var(--ui-space-2); bottom: var(--ui-space-2); left: var(--ui-space-2); display: flex; flex-wrap: wrap; gap: var(--ui-space-1); }
.hr-chip-dark { padding: 2px 8px; border-radius: var(--ui-radius-pill); background: var(--ui-glass-dark); color: var(--ui-surface); font-size: var(--ui-font-size-2xs); font-weight: 600; font-variant-numeric: tabular-nums; }
.hr-chip-original { margin-left: auto; }
.hr-body { display: flex; flex: 1; flex-direction: column; gap: var(--ui-space-2); padding: var(--ui-space-4); }
.hr-title { display: -webkit-box; margin: 0; overflow: hidden; color: var(--ui-ink-strong); font-size: var(--ui-font-size-md); font-weight: 600; line-height: 1.45; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.hr-stats { display: flex; flex-wrap: wrap; gap: var(--ui-space-1) var(--ui-space-4); margin: 0; }
.hr-stats dt { color: var(--ui-muted); font-size: var(--ui-font-size-2xs); }
.hr-stats dd { margin: 0; color: var(--ui-ink-strong); font-size: var(--ui-font-size-sm); font-weight: 600; font-variant-numeric: tabular-nums; }
.hr-reasons { display: flex; flex-wrap: wrap; gap: var(--ui-space-1); margin: 0; padding: 0; list-style: none; }
.hr-line { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hr-reasons li { max-width: 100%; padding: 2px 8px; overflow: hidden; border-radius: var(--ui-radius-pill); background: var(--ui-fill-1); color: var(--ui-ink); font-size: var(--ui-font-size-xs); text-overflow: ellipsis; white-space: nowrap; }
.hr-reasons .hr-related { background: var(--ui-accent-wash); color: var(--ui-accent-strong); font-weight: 500; }
.hr-reasons svg { width: 14px; height: 14px; margin-right: 4px; vertical-align: -2px; }
.hr-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-space-2); margin-top: auto; padding-top: var(--ui-space-2); }
.hr-actions .primary { flex: 1 1 0; min-width: 0; white-space: nowrap; }
.hr-download { flex: none; }
.hr-actions svg { width: 16px; height: 16px; }
.hr-more { display: flex; margin: var(--ui-space-6) auto 0; }
.hr-empty { display: grid; justify-items: center; gap: var(--ui-space-3); padding: var(--ui-space-8) var(--ui-space-3); }

@media (max-width: 1024px) {
  .portal-view > .hr-page { padding-inline: var(--ui-space-6); }
}
@media (max-width: 768px) {
  /* Positioned, so the controls' own positioned parts scroll and clip inside the row. */
  .hr-toolbar, .hr-terms { position: relative; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .hr-filter, .hr-term, .hr-terms-label { flex: none; }
  .hr-filter { max-width: none; overflow: visible; }
  .hr-sort { flex: none; margin-left: 0; }
  .hr-grid { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: var(--ui-space-3); }
}
@media (max-width: 480px) {
  .portal-view > .hr-page { padding-inline: var(--ui-space-4); }
  .hr-card .hr-line + .hr-stats + .hr-line { display: none; }
  /* Phones list cards: cover on the left, facts and the one action beside it. */
  .hr-grid { grid-template-columns: minmax(0, 1fr); gap: var(--ui-space-3); }
  .hr-card { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: start; }
  .hr-body { gap: 6px; padding: var(--ui-space-3); }
  .hr-title { font-size: var(--ui-font-size-sm); }
  .hr-card.ui-skeleton { min-height: 200px; }
}

}