:root {
  --ink: #07090f;
  --ink-2: #0e111a;
  --ink-3: #151a26;
  --panel: #111621;
  --panel-2: #171d2a;
  --line: rgba(255, 255, 255, 0.12);
  --line-strong: rgba(255, 255, 255, 0.22);
  --text: #f4f5f7;
  --muted: #979eac;
  --dim: #626a78;
  --signal: #ff5a36;
  --signal-soft: rgba(255, 90, 54, 0.14);
  --blue: #5f7cff;
  --blue-soft: rgba(95, 124, 255, 0.15);
  --mint: #57d6a0;
  --danger: #ff6678;
  --radius: 16px;
  --radius-small: 10px;
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.32);
  --display: Bahnschrift, "Arial Narrow", "Microsoft YaHei", sans-serif;
  --body: "Segoe UI", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: auto; overflow-anchor: none; }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(circle at 74% -10%, rgba(95, 124, 255, 0.13), transparent 31rem),
    linear-gradient(180deg, #090c13 0%, #07090f 100%);
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.55;
  overflow-anchor: none;
}

button, input, textarea, select { font: inherit; }
button, label, select { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }

.film-noise {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: .025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 30px;
  border-bottom: 1px solid var(--line);
  background: rgba(7, 9, 15, 0.86);
  backdrop-filter: blur(18px);
}

.brand { display: inline-flex; align-items: center; gap: 14px; }
.brand-logo { width: 42px; height: 42px; flex: 0 0 auto; display: block; object-fit: contain; }
.brand strong {
  display: block;
  font: 760 18px/1 var(--display);
  letter-spacing: .11em;
}
.brand small { display: block; margin-top: 5px; color: var(--muted); font-size: 11px; letter-spacing: .22em; }

.topbar-meta { display: flex; align-items: center; gap: 14px; }
.api-state {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .04em;
}
.state-dot { width: 8px; height: 8px; border-radius: 50%; background: #d1a94f; box-shadow: 0 0 0 5px rgba(209, 169, 79, .12); }
.api-state.ok .state-dot { background: var(--mint); box-shadow: 0 0 0 5px rgba(87, 214, 160, .12); }
.api-state.error .state-dot { background: var(--danger); box-shadow: 0 0 0 5px rgba(255, 102, 120, .12); }

.app-shell { display: grid; grid-template-columns: 278px minmax(0, 1fr); min-height: calc(100vh - 76px); }

.workflow-rail {
  position: sticky;
  top: 76px;
  align-self: start;
  height: calc(100vh - 76px);
  padding: 30px 20px 24px;
  border-right: 1px solid var(--line);
  background: rgba(10, 13, 20, .72);
  overflow: auto;
}
.rail-caption, .eyebrow {
  color: var(--signal);
  font: 700 10px/1 var(--display);
  letter-spacing: .2em;
  text-transform: uppercase;
}
.rail-caption { padding: 0 12px 22px; color: var(--dim); }
.step-nav { display: grid; gap: 4px; }
.step-link {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: 38px 1fr 8px;
  align-items: center;
  gap: 10px;
  padding: 14px 12px;
  border: 0;
  border-radius: 10px;
  text-align: left;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  transition: .2s ease;
}
.step-link:hover:not(:disabled) { background: rgba(255, 255, 255, .045); color: var(--text); }
.step-link:disabled { cursor: not-allowed; opacity: .42; }
.step-link.active { color: var(--text); background: linear-gradient(90deg, var(--signal-soft), rgba(255, 90, 54, .025)); }
.step-link.completed { color: #c8cbd2; }
.step-index { font: 700 11px/1 var(--display); color: var(--dim); letter-spacing: .1em; }
.step-link.active .step-index { color: var(--signal); }
.step-link strong, .step-link small { display: block; }
.step-link strong { font-size: 13px; font-weight: 650; }
.step-link small { margin-top: 3px; color: var(--dim); font-size: 10px; }
.step-link i { width: 6px; height: 6px; border: 1px solid var(--dim); border-radius: 50%; }
.step-link.active i { border-color: var(--signal); background: var(--signal); box-shadow: 0 0 0 5px rgba(255, 90, 54, .12); }
.step-link.completed i { border-color: var(--mint); background: var(--mint); }

.rail-note {
  margin: 28px 12px 0;
  padding: 15px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-small);
  background: rgba(255,255,255,.018);
}
.rail-note span { color: var(--blue); font: 700 10px/1 var(--display); letter-spacing: .15em; }
.rail-note p { margin: 8px 0 0; color: var(--dim); font-size: 11px; line-height: 1.65; }

.workspace { width: 100%; min-width: 0; }
.step-panel { display: none; width: min(1320px, 100%); margin: 0 auto; padding: 46px 52px 70px; }
.step-panel.active { display: block; animation: panel-in .32s ease both; }
@keyframes panel-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }

.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 30px; margin-bottom: 34px; }
.panel-heading h1 { margin: 11px 0 8px; font: 720 clamp(28px, 4vw, 45px)/1.12 var(--display); letter-spacing: -.035em; }
.panel-heading p { margin: 0; color: var(--muted); font-size: 14px; }
.panel-stamp {
  flex: 0 0 auto;
  margin-top: 4px;
  padding: 7px 9px;
  color: var(--dim);
  border: 1px solid var(--line-strong);
  font: 700 9px/1 var(--display);
  letter-spacing: .14em;
  transform: rotate(1.4deg);
}

.source-layout { display: grid; grid-template-columns: minmax(300px, .83fr) minmax(440px, 1.17fr); gap: 24px; }
.primary-source, .source-fields, .control-board, .prompt-card, .asset-picker-panel, .generation-panel, .video-image-panel, .final-controls {
  border: 1px solid var(--line);
  background: linear-gradient(145deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .012));
  box-shadow: 0 14px 40px rgba(0,0,0,.12);
}
.primary-source { min-height: 560px; padding: 18px; }
.source-fields { padding: 24px; }

.drop-zone {
  height: 100%;
  min-height: 522px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px dashed rgba(255, 90, 54, .45);
  background:
    linear-gradient(rgba(255, 90, 54, .06), rgba(255, 90, 54, .015)),
    repeating-linear-gradient(90deg, transparent 0 52px, rgba(255,255,255,.025) 52px 53px);
  cursor: pointer;
  text-align: center;
  transition: .2s ease;
}
.drop-zone:hover, .drop-zone.dragging { border-color: var(--signal); background-color: var(--signal-soft); }
.drop-icon {
  width: 70px;
  height: 70px;
  display: grid;
  place-items: center;
  margin-bottom: 20px;
  padding-left: 4px;
  color: var(--ink);
  background: var(--signal);
  clip-path: polygon(12% 0, 100% 0, 100% 76%, 82% 100%, 0 100%, 0 12%);
  font-size: 22px;
}
.drop-zone strong { font: 680 20px/1.2 var(--display); }
.drop-zone > span:not(.drop-icon) { margin-top: 9px; color: var(--muted); font-size: 13px; }
.drop-zone small { margin-top: 25px; color: var(--dim); font-size: 10px; letter-spacing: .06em; }

.video-card { height: 100%; min-height: 522px; display: flex; flex-direction: column; background: #030407; }
.video-card video { width: 100%; min-height: 450px; flex: 1; object-fit: contain; background: #000; }
.video-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 16px; border-top: 1px solid var(--line); background: var(--ink-2); }
.video-card-meta strong, .video-card-meta span { display: block; max-width: 310px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.video-card-meta strong { font-size: 12px; }
.video-card-meta span { margin-top: 4px; color: var(--dim); font-size: 10px; }

.field-row { display: grid; gap: 16px; }
.two-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.field-block { display: grid; gap: 9px; min-width: 0; }
.field-block + .field-block, .source-fields > .field-block, .source-fields > .field-row:not(:first-child) { margin-top: 18px; }
.field-label { color: #d9dce3; font-size: 12px; font-weight: 650; letter-spacing: .02em; }
.field-label span { margin-left: 5px; color: var(--signal); font-size: 9px; }
.field-label em { margin-left: 5px; color: var(--dim); font-size: 9px; font-style: normal; font-weight: 500; }

input[type="text"], input[type="number"], textarea, select {
  width: 100%;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 8px;
  outline: none;
  background: rgba(5, 7, 11, .62);
  transition: border-color .2s ease, box-shadow .2s ease;
}
input[type="text"], input[type="number"], select { height: 46px; padding: 0 13px; }
textarea { resize: vertical; min-height: 82px; padding: 12px 13px; line-height: 1.65; }
input:focus, textarea:focus, select:focus { border-color: rgba(95, 124, 255, .75); box-shadow: 0 0 0 3px rgba(95, 124, 255, .11); }
input::placeholder, textarea::placeholder { color: #4e5562; }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 17px) 20px, calc(100% - 12px) 20px; background-size: 5px 5px; background-repeat: no-repeat; }

.mini-upload {
  min-height: 108px;
  display: grid;
  grid-template-columns: 32px 1fr;
  align-content: center;
  column-gap: 7px;
  padding: 14px;
  border: 1px dashed var(--line-strong);
  border-radius: 8px;
  cursor: pointer;
  background: rgba(255,255,255,.018);
  transition: .2s ease;
}
.mini-upload:hover { border-color: var(--blue); background: var(--blue-soft); }
.mini-upload b { grid-row: 1 / 3; align-self: center; color: var(--blue); font-size: 24px; font-weight: 400; }
.mini-upload span { font-size: 12px; font-weight: 650; }
.mini-upload small { color: var(--dim); font-size: 9px; }

.asset-strip { display: flex; gap: 9px; overflow-x: auto; padding-top: 10px; }
.asset-strip:empty { display: none; }
.asset-chip { position: relative; flex: 0 0 72px; height: 72px; border: 1px solid var(--line); background: var(--ink); overflow: hidden; }
.asset-chip img { width: 100%; height: 100%; object-fit: cover; }
.asset-chip button { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border: 0; border-radius: 50%; color: white; background: rgba(0,0,0,.72); cursor: pointer; line-height: 18px; }
.asset-chip small { position: absolute; inset: auto 3px 3px; padding: 2px 4px; color: white; background: rgba(0,0,0,.72); font-size: 8px; text-align: center; }

.control-board { display: grid; grid-template-columns: minmax(0, 1fr) 370px; margin-top: 24px; }
.control-board-main { padding: 24px; }
.spec-controls { display: grid; grid-template-columns: 105px 1fr; gap: 20px; padding: 24px; border-left: 1px solid var(--line); }
.compact { align-content: start; }
.number-input { position: relative; display: block; }
.number-input input { padding-right: 36px; font: 650 20px/1 var(--display); }
.number-input b { position: absolute; right: 12px; top: 14px; color: var(--dim); font-size: 10px; }

.ratio-picker, .model-switch { margin: 0; padding: 0; border: 0; }
.ratio-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ratio-picker legend { grid-column: 1 / -1; margin-bottom: 9px; }
.ratio-picker input, .model-switch input { position: absolute; opacity: 0; pointer-events: none; }
.ratio-picker label > span {
  min-height: 70px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  cursor: pointer;
  font-size: 10px;
}
.ratio-picker input:checked + span { border-color: var(--signal); color: var(--text); background: var(--signal-soft); }
.ratio-shape { display: block; border: 1px solid currentColor; }
.ratio-shape.portrait { width: 13px; height: 22px; }
.ratio-shape.square { width: 18px; height: 18px; }
.ratio-shape.landscape { width: 24px; height: 14px; }

.button {
  min-height: 43px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 7px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 680;
  transition: transform .16s ease, background .16s ease, border-color .16s ease, opacity .16s ease;
}
.button:hover:not(:disabled) { transform: translateY(-1px); }
.button:active:not(:disabled) { transform: translateY(0); }
.button:disabled { opacity: .35; cursor: not-allowed; }
.button-primary { color: #140b08; background: var(--signal); border-color: var(--signal); }
.button-primary:hover:not(:disabled) { background: #ff6d4d; }
.button-secondary { color: white; background: var(--blue); border-color: var(--blue); }
.button-secondary:hover:not(:disabled) { background: #718aff; }
.button-ghost { border-color: var(--line-strong); background: rgba(255,255,255,.025); }
.button-ghost:hover:not(:disabled) { border-color: rgba(255,255,255,.36); background: rgba(255,255,255,.055); }
.button-large { min-height: 54px; padding: 0 24px; font-size: 13px; }
.button-large b { font-size: 18px; }
.button-small { min-height: 34px; padding: 0 12px; font-size: 10px; }
.full-width { width: 100%; }
.icon-button { width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: transparent; cursor: pointer; }
.icon-button.danger { color: var(--danger); }

.action-bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.action-hint { color: var(--dim); font-size: 11px; }
.action-hint span { margin-right: 8px; padding: 3px 6px; color: var(--blue); border: 1px solid rgba(95,124,255,.35); font: 700 8px/1 var(--display); letter-spacing: .1em; }

.status-banner {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 22px;
  padding: 17px 19px;
  border: 1px solid rgba(95,124,255,.35);
  background: var(--blue-soft);
}
.status-banner strong, .status-banner small { display: block; }
.status-banner strong { font-size: 12px; }
.status-banner small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.spinner { width: 22px; height: 22px; border: 2px solid rgba(255,255,255,.16); border-top-color: var(--blue); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.decode-grid { display: grid; grid-template-columns: minmax(0, 1.16fr) minmax(360px, .84fr); gap: 24px; }
.analysis-column, .timeline-column { padding: 24px; border: 1px solid var(--line); background: var(--panel); }
.analysis-column .field-block + .field-block { margin-top: 20px; }
.section-title-row { min-height: 32px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 15px; }
.section-title-row small { display: block; margin-top: 3px; color: var(--dim); font-size: 10px; }
.section-title-row > b { color: var(--signal); font: 700 11px/1.4 var(--display); }
.timestamp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-bottom: 16px; }
.timestamp-field { position: relative; }
.timestamp-field span { position: absolute; left: 9px; top: 8px; z-index: 1; color: var(--signal); font: 700 8px/1 var(--display); }
.timestamp-field input { height: 60px; padding: 20px 9px 4px; font: 650 17px/1 var(--display); text-align: right; }

.contact-sheet-card { margin-top: 24px; padding: 22px; border: 1px solid var(--line); background: #0c1018; }
.contact-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.contact-sheet-head h2 { margin: 7px 0 0; font: 680 20px/1.1 var(--display); }
.contact-sheet-card img { width: 100%; max-height: 760px; object-fit: contain; background: #030407; box-shadow: var(--shadow); }

.prompt-card { display: grid; grid-template-columns: 1fr 210px; align-items: end; gap: 18px; padding: 22px; }
.script-header { display: grid; grid-template-columns: 300px 1fr; gap: 16px; margin: 24px 0 12px; padding: 20px; border: 1px solid var(--line); background: var(--panel); }
.script-header input { margin-top: 8px; font: 650 16px/1 var(--display); }
.script-header textarea { min-height: 68px; }
.shot-list { display: grid; gap: 9px; margin-top: 20px; }
.shot-card {
  display: grid;
  grid-template-columns: 62px 92px minmax(180px, .8fr) minmax(220px, 1fr) minmax(150px, .66fr) 38px;
  gap: 10px;
  align-items: stretch;
  padding: 12px;
  border: 1px solid var(--line);
  background: var(--panel);
}
.shot-number { display: grid; place-items: center; color: var(--signal); border-right: 1px solid var(--line); font: 720 18px/1 var(--display); }
.shot-field { display: grid; gap: 5px; }
.shot-field span { color: var(--dim); font-size: 8px; letter-spacing: .06em; }
.shot-field input, .shot-field textarea { min-height: 62px; height: 100%; padding: 8px 9px; font-size: 11px; resize: vertical; }
.shot-field.duration input { font: 650 16px/1 var(--display); text-align: center; }
.shot-actions { display: grid; gap: 4px; }
.shot-actions button { min-height: 27px; padding: 0; border: 1px solid var(--line); color: var(--muted); background: transparent; cursor: pointer; font-size: 10px; }
.shot-actions button:hover { color: var(--text); border-color: var(--line-strong); }
.shot-actions button.delete:hover { color: var(--danger); border-color: rgba(255,102,120,.4); }
.script-tools { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 16px; }
.duration-total { display: flex; align-items: baseline; gap: 10px; }
.duration-total span, .duration-total small { color: var(--dim); font-size: 10px; }
.duration-total strong { font: 720 20px/1 var(--display); }
.duration-total.valid strong { color: var(--mint); }
.duration-total.invalid strong { color: var(--danger); }

.model-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.model-switch { display: flex; flex-wrap: wrap; gap: 9px; }
.model-switch legend { width: 100%; margin-bottom: 5px; }
.model-switch label > span { min-width: 190px; min-height: 72px; display: flex; flex-direction: column; justify-content: center; padding: 12px 16px; border: 1px solid var(--line); background: var(--panel); cursor: pointer; }
.model-switch label > span b, .model-switch label > span small { display: block; }
.model-switch label > span b { font-size: 12px; }
.model-switch label > span small { margin-top: 4px; color: var(--dim); font-size: 9px; }
.model-switch input:checked + span { border-color: var(--blue); background: var(--blue-soft); box-shadow: inset 3px 0 var(--blue); }
.upload-button { cursor: pointer; }
.image-workbench { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(340px, .8fr); gap: 20px; }
.asset-picker-panel, .generation-panel, .video-image-panel, .final-controls { padding: 22px; }
.asset-picker { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.asset-option { position: relative; min-width: 0; aspect-ratio: 1; border: 1px solid var(--line); background: var(--ink); cursor: pointer; overflow: hidden; }
.asset-option img { width: 100%; height: 100%; object-fit: cover; transition: transform .2s ease; }
.asset-option:hover img { transform: scale(1.03); }
.asset-option.selected { border-color: var(--signal); box-shadow: inset 0 0 0 2px var(--signal); }
.asset-option .check { position: absolute; top: 7px; right: 7px; width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.45); border-radius: 50%; background: rgba(0,0,0,.56); font-size: 11px; }
.asset-option.selected .check { color: var(--ink); border-color: var(--signal); background: var(--signal); }
.asset-option .asset-name { position: absolute; inset: auto 0 0; padding: 18px 7px 6px; background: linear-gradient(transparent, rgba(0,0,0,.86)); font-size: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.empty-assets { grid-column: 1/-1; min-height: 180px; display: grid; place-items: center; padding: 20px; color: var(--dim); border: 1px dashed var(--line-strong); text-align: center; font-size: 11px; }

.task-progress { display: flex; gap: 13px; margin-top: 14px; padding: 14px; border: 1px solid rgba(95,124,255,.3); background: var(--blue-soft); }
.task-progress > span { position: relative; width: 4px; align-self: stretch; overflow: hidden; background: rgba(95,124,255,.18); }
.task-progress > span i { position: absolute; inset: auto 0 0; height: 42%; background: var(--blue); animation: progress-pulse 1.5s ease-in-out infinite alternate; }
@keyframes progress-pulse { to { height: 100%; } }
.task-progress strong, .task-progress small { display: block; }
.task-progress strong { font-size: 11px; }
.task-progress small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.generated-image-card { display: grid; grid-template-columns: minmax(300px, 1.2fr) minmax(260px, .8fr); margin-top: 22px; border: 1px solid var(--line); background: var(--panel); }
.generated-preview { min-height: 380px; display: grid; place-items: center; padding: 16px; background: #040508; }
.generated-preview img { max-height: 650px; object-fit: contain; }
.generated-copy { align-self: center; padding: 30px; }
.generated-copy h2 { margin: 10px 0 9px; font: 690 25px/1.15 var(--display); }
.generated-copy p { margin: 0 0 22px; color: var(--muted); font-size: 12px; }

.video-model-switch { margin-bottom: 20px; }
.video-model-switch label > span { min-width: 240px; }
.final-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(380px, .9fr); gap: 20px; }
.video-asset-source { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; }
.video-asset-source .asset-option { aspect-ratio: 1; }
.selected-sequence { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.selected-sequence > .field-label { display: block; margin-bottom: 11px; }
#selectedVideoAssets { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 5px; }
.sequence-card { position: relative; flex: 0 0 94px; padding: 5px; border: 1px solid var(--line-strong); background: var(--ink); cursor: grab; }
.sequence-card.dragging { opacity: .45; }
.sequence-card img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.sequence-card b { position: absolute; top: 8px; left: 8px; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; color: var(--ink); background: var(--signal); font: 700 9px/1 var(--display); }
.sequence-card button { position: absolute; top: 8px; right: 8px; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; color: white; background: rgba(0,0,0,.72); cursor: pointer; }
.final-spec-row { display: grid; grid-template-columns: 105px minmax(105px, 1fr) minmax(105px, 1fr) 132px; gap: 12px; align-items: end; margin: 17px 0; }
.sound-toggle input { position: absolute; opacity: 0; }
.sound-toggle > span { min-height: 68px; display: grid; grid-template-columns: 33px 1fr; align-content: center; column-gap: 9px; padding: 9px; border: 1px solid var(--line); border-radius: 8px; background: rgba(5,7,11,.62); cursor: pointer; }
.sound-toggle i { grid-row: 1 / 3; align-self: center; width: 32px; height: 18px; border-radius: 20px; background: var(--dim); }
.sound-toggle i::after { content: ""; display: block; width: 14px; height: 14px; margin: 2px; border-radius: 50%; background: white; transition: transform .2s ease; }
.sound-toggle input:checked + span { border-color: rgba(87,214,160,.45); }
.sound-toggle input:checked + span i { background: var(--mint); }
.sound-toggle input:checked + span i::after { transform: translateX(14px); }
.sound-toggle b { font-size: 10px; }
.sound-toggle small { color: var(--dim); font-size: 8px; }
.model-warning { margin: 0 0 14px; padding: 10px 12px; color: #ffd5a8; border: 1px solid rgba(255,174,82,.3); background: rgba(255,174,82,.08); font-size: 10px; }

.final-result { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr); margin-top: 25px; border: 1px solid rgba(87,214,160,.3); background: linear-gradient(135deg, rgba(87,214,160,.08), rgba(17,22,33,.96) 46%); }
.result-stage { min-height: 470px; display: grid; place-items: center; padding: 18px; background: #020305; }
.result-stage video { width: 100%; max-height: 680px; }
.result-copy { align-self: center; padding: 34px; }
.result-copy h2 { margin: 11px 0 9px; font: 700 29px/1.15 var(--display); }
.result-copy p { margin: 0 0 24px; color: var(--muted); }
.result-actions { display: flex; flex-wrap: wrap; gap: 9px; }

.toast-region { position: fixed; z-index: 80; right: 22px; bottom: 22px; display: grid; gap: 9px; width: min(360px, calc(100vw - 44px)); }
.toast { display: flex; align-items: flex-start; gap: 11px; padding: 15px 16px; border: 1px solid rgba(255,255,255,.14); border-radius: 12px; color: #fff; background: rgba(24,29,41,.98); box-shadow: 0 14px 38px rgba(16,22,32,.28); animation: toast-in .2s ease both; }
.toast::before { content: ""; flex: 0 0 6px; width: 6px; height: 6px; margin-top: 7px; border-radius: 50%; background: var(--blue); }
.toast.success::before { background: var(--mint); }
.toast.error::before { background: var(--danger); }
.toast strong, .toast span { display: block; }
.toast strong { color: #fff; font-size: 13px; line-height: 1.35; }
.toast span { margin-top: 4px; color: #dce3ed; font-size: 12px; line-height: 1.5; }
@keyframes toast-in { from { opacity: 0; transform: translateX(8px); } }

.hidden { display: none !important; }

@media (max-width: 1120px) {
  .app-shell { grid-template-columns: 230px minmax(0, 1fr); }
  .step-panel { padding-inline: 30px; }
  .source-layout, .decode-grid, .final-layout { grid-template-columns: 1fr; }
  .primary-source { min-height: 430px; }
  .drop-zone, .video-card { min-height: 390px; }
  .video-card video { min-height: 320px; }
  .control-board { grid-template-columns: 1fr; }
  .spec-controls { border-top: 1px solid var(--line); border-left: 0; }
  .shot-card { grid-template-columns: 50px 82px 1fr 1fr 36px; }
  .shot-field.audio { grid-column: 3 / 5; }
}

@media (max-width: 780px) {
  .topbar { height: 68px; padding: 0 16px; }
  .brand small, .api-state span:not(.state-dot), #resetButton { display: none; }
  .app-shell { display: block; }
  .workflow-rail { position: sticky; top: 68px; z-index: 30; height: auto; padding: 8px; border-right: 0; border-bottom: 1px solid var(--line); background: rgba(7,9,15,.94); }
  .rail-caption, .rail-note { display: none; }
  .step-nav { display: flex; overflow-x: auto; }
  .step-link { flex: 0 0 auto; width: auto; grid-template-columns: 28px 1fr 5px; padding: 10px; }
  .step-link small { display: none; }
  .step-panel { padding: 30px 16px 55px; }
  .panel-heading { margin-bottom: 25px; }
  .panel-stamp { display: none; }
  .source-fields, .analysis-column, .timeline-column, .asset-picker-panel, .generation-panel, .video-image-panel, .final-controls { padding: 16px; }
  .two-columns, .prompt-card, .script-header, .image-workbench, .generated-image-card, .final-result { grid-template-columns: 1fr; }
  .control-board-main, .spec-controls { padding: 16px; }
  .spec-controls { grid-template-columns: 90px 1fr; }
  .prompt-card { align-items: stretch; }
  .timestamp-grid { grid-template-columns: repeat(2, 1fr); }
  .asset-picker { grid-template-columns: repeat(3, 1fr); }
  .model-toolbar { align-items: stretch; flex-direction: column; }
  .model-switch { display: grid; grid-template-columns: 1fr 1fr; }
  .model-switch legend { grid-column: 1 / -1; }
  .model-switch label > span { min-width: 0; }
  .shot-card { grid-template-columns: 44px 76px 1fr 34px; }
  .shot-field.visual, .shot-field.prompt, .shot-field.audio { grid-column: 3 / 4; }
  .shot-actions { grid-column: 4; grid-row: 1 / 4; }
  .video-asset-source { grid-template-columns: repeat(3, 1fr); }
  .final-spec-row { grid-template-columns: 90px 1fr; }
  .sound-toggle { grid-column: 1 / -1; }
  .action-bar { align-items: stretch; flex-direction: column-reverse; }
  .action-bar .button { width: 100%; }
  .action-hint { text-align: center; }
  .result-stage { min-height: 300px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* Direct generation home */
body {
  color: #17211c;
  background:
    radial-gradient(circle at 16% 46%, rgba(165, 244, 221, .32), transparent 24rem),
    radial-gradient(circle at 86% 43%, rgba(211, 195, 255, .29), transparent 27rem),
    linear-gradient(180deg, #ffffff 0%, #f8fbfa 100%);
}

.topbar {
  height: 72px;
  padding: 0 max(28px, calc((100vw - 1400px) / 2));
  border-bottom: 1px solid #e7ebe8;
  color: #152019;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 1px 0 rgba(20, 38, 29, .02);
}

.brand { gap: 11px; }
.brand-logo { width: 39px; height: 39px; }
.brand strong { font-size: 15px; letter-spacing: .07em; }
.brand small { margin-top: 3px; color: #778078; font-size: 9px; letter-spacing: .15em; }

.topbar-nav { display: flex; align-items: center; gap: 34px; color: #667168; font-size: 13px; }
.topbar-nav span:first-child { color: #17211c; font-weight: 700; }
.topbar-meta { gap: 12px; }
.api-state { color: #7b867e; font-size: 11px; }
.state-dot { width: 7px; height: 7px; }
.mode-button,
.reset-link {
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid #dce2dd;
  border-radius: 12px;
  color: #273229;
  background: #fff;
  cursor: pointer;
  font-size: 12px;
  font-weight: 650;
}
.mode-button:hover { border-color: #9da99f; background: #f8faf8; }
.reset-link { padding-inline: 8px; border-color: transparent; color: #7b867e; background: transparent; }
.account-chip {
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 4px 6px 4px 5px;
  border: 1px solid #dce2dd;
  border-radius: 14px;
  background: #fff;
}
.account-avatar {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 10px;
  color: #173123;
  background: #c9ff87;
  font-size: 12px;
  font-weight: 800;
}
.account-copy { min-width: 76px; max-width: 150px; line-height: 1.1; }
.account-copy strong,
.account-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-copy strong { color: #1f2922; font-size: 11px; }
.account-copy small { margin-top: 4px; color: #8a938c; font-size: 9px; }
.account-chip > a { padding: 7px 8px; border-radius: 9px; color: #69736c; font-size: 10px; }
.account-chip > a:hover { color: #142019; background: #f1f4f2; }

.direct-studio {
  width: min(1260px, calc(100% - 36px));
  margin: 0 auto;
  padding: 74px 0 54px;
}
.direct-hero { max-width: 820px; margin: 0 auto 35px; text-align: center; }
.direct-kicker {
  display: inline-flex;
  padding: 7px 13px;
  border: 1px solid #dfe6e1;
  border-radius: 999px;
  color: #39775b;
  background: rgba(249, 252, 250, .86);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
}
.direct-hero h1 {
  margin: 16px 0 8px;
  font: 720 clamp(36px, 5vw, 62px)/1.08 var(--display);
  letter-spacing: -.055em;
  color: #15231b;
}
.direct-hero p { margin: 0; color: #718078; font-size: 15px; }

.direct-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(310px, .62fr);
  gap: 18px;
  align-items: stretch;
}
.direct-composer-card,
.direct-result-card {
  border: 1px solid rgba(35, 58, 45, .14);
  border-radius: 29px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 22px 70px rgba(55, 91, 73, .12), 0 0 0 5px rgba(255, 255, 255, .62);
}
.direct-composer-card {
  position: relative;
  min-height: 470px;
  padding: 20px 20px 18px;
  border-color: rgba(98, 181, 151, .38);
}
.direct-composer-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -3px;
  border-radius: 32px;
  background: linear-gradient(120deg, rgba(98, 226, 205, .55), rgba(255,255,255,0) 42%, rgba(185, 137, 255, .5));
  filter: blur(8px);
  opacity: .6;
}
.direct-assets { min-height: 95px; display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 9px; }
.direct-studio.text-generation-mode .direct-assets { display: none; }
.task-job-result.text-result,
.generation-entry-text-result { padding: 18px; color: #27313a; background: #f7faf9; font-size: 12px; line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; }
.generation-entry-text-result { min-height: 150px; max-height: 420px; overflow: auto; border-radius: 14px; }
.direct-add-card,
.direct-asset-card {
  position: relative;
  flex: 0 0 82px;
  width: 82px;
  height: 82px;
  overflow: hidden;
  border: 1px dashed #cbd4ce;
  border-radius: 15px;
  color: #7c877f;
  background: #fafcfb;
}
.direct-add-card { display: grid; place-content: center; gap: 2px; overflow: visible; text-align: center; cursor: pointer; }
.direct-add-card:hover { border-color: #69a88a; color: #2d6c4f; background: #f4fbf7; }
.direct-add-card span { font-size: 24px; font-weight: 300; line-height: 1; }
.direct-add-card small { font-size: 10px; }
.direct-asset-card { border-style: solid; }
.direct-asset-card img,
.direct-asset-card video { width: 100%; height: 100%; object-fit: cover; }
.direct-media-badge { position: absolute; top: 6px; left: 6px; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: rgba(14,18,23,.72); font-size: 7px; }
.direct-audio-tile { width: 100%; height: 100%; display: grid; place-content: center; gap: 4px; color: #fff; background: linear-gradient(145deg, #5568a7, #a67bd8); text-align: center; }
.direct-audio-tile i { font-size: 23px; font-style: normal; line-height: 1; }
.direct-audio-tile em { font-size: 8px; font-style: normal; letter-spacing: .08em; opacity: .9; }
.direct-asset-card button {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: rgba(15, 22, 18, .72);
  cursor: pointer;
}
.direct-prompt-label { display: block; margin: 8px 3px 5px; color: #344238; font-size: 12px; font-weight: 700; }
#directPrompt {
  width: 100%;
  min-height: 198px;
  resize: vertical;
  padding: 12px 4px;
  border: 0;
  outline: 0;
  color: #18221c;
  background: transparent;
  font-size: 15px;
  line-height: 1.75;
}
#directPrompt::placeholder { color: #a1aaa4; }
.direct-count { position: absolute; right: 24px; top: 326px; color: #a5ada8; font-size: 10px; }
.direct-reference {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 10px;
  margin: 5px 0 12px;
  padding: 8px;
  border: 1px solid #e2e7e3;
  border-radius: 13px;
  background: #f8faf8;
}
.direct-reference-thumb { position: relative; overflow: hidden; height: 47px; border-radius: 8px; background: #18221c; }
.direct-reference-thumb video { width: 100%; height: 100%; object-fit: cover; }
.direct-reference-thumb span { position: absolute; inset: auto 4px 4px; color: #fff; font-size: 8px; }
.direct-reference strong,
.direct-reference small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.direct-reference strong { color: #243128; font-size: 11px; }
.direct-reference small { margin-top: 3px; color: #859087; font-size: 9px; }
.direct-reference button { border: 0; color: #7f8982; background: transparent; cursor: pointer; font-size: 19px; }
.direct-mention-summary { display: flex; flex-wrap: wrap; gap: 6px; margin: -1px 0 10px; }
.direct-mention-summary span { padding: 5px 8px; border: 1px solid #cfe8f2; border-radius: 7px; color: #1884ad; background: #f0fbff; font-size: 9px; font-weight: 700; }
.direct-audio-reference {
  display: grid;
  grid-template-columns: 38px minmax(120px, 1fr) minmax(180px, 280px) 28px;
  align-items: center;
  gap: 10px;
  margin: 5px 0 12px;
  padding: 8px 10px;
  border: 1px solid #dce4ee;
  border-radius: 13px;
  background: #f7f9fc;
}
.audio-reference-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; color: white; background: linear-gradient(145deg, #4f6f9f, #91a6ca); font-size: 17px; }
.direct-audio-reference strong,
.direct-audio-reference small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.direct-audio-reference strong { color: #28313d; font-size: 10px; }
.direct-audio-reference small { margin-top: 3px; color: #8b949f; font-size: 8px; }
.direct-audio-reference audio { width: 100%; height: 32px; }
.direct-audio-reference button { border: 0; color: #7f8994; background: transparent; cursor: pointer; font-size: 19px; }
.direct-asset-card > small { position: absolute; left: 4px; bottom: 4px; max-width: calc(100% - 8px); overflow: hidden; padding: 3px 5px; border-radius: 5px; color: white; background: rgba(14,18,23,.72); font-size: 7px; white-space: nowrap; text-overflow: ellipsis; }
.direct-asset-card.referenced,
.direct-reference.referenced,
.direct-audio-reference.referenced { border-color: #61bce0; box-shadow: 0 0 0 2px rgba(24,163,215,.12); }
.direct-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 1px solid #edf0ee; }
.direct-tool-group { display: flex; flex-wrap: wrap; gap: 7px; min-width: 0; }
.tool-pill,
.tool-select,
.direct-audio {
  min-height: 35px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 11px;
  border: 1px solid #dfe5e0;
  border-radius: 999px;
  color: #3e4a41;
  background: #fff;
  cursor: pointer;
  font-size: 10px;
  font-weight: 650;
  white-space: nowrap;
}
.tool-pill:hover { border-color: #aab7ae; background: #f8faf8; }
.tool-pill span { color: #478269; font-size: 14px; }
.tool-select { gap: 3px; padding-right: 7px; }
.tool-select > span { color: #89928b; font-weight: 500; }
.tool-select select { max-width: 102px; padding: 0 17px 0 2px; border: 0; outline: 0; color: #2b3730; background: transparent; font-size: 10px; font-weight: 700; }
.tool-select input { width: 27px; padding: 0; border: 0; outline: 0; color: #2b3730; background: transparent; font-size: 10px; font-weight: 700; text-align: right; }
.tool-select b { color: #2b3730; font-size: 10px; }
.tool-select.spec-pill { border-color: #d9e6ef; background: #f7fbfe; }
.tool-select.spec-pill > span { color: #4785a7; }
.tool-select select:disabled { color: #9aa2aa; cursor: not-allowed; }
.duration-stepper {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 7px 0 11px;
  border: 1px solid #dedfe8;
  border-radius: 10px;
  color: #343641;
  background: #fafafd;
  white-space: nowrap;
}
.duration-stepper > span { color: #858a98; font-size: 12px; font-weight: 600; }
.duration-stepper button {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #545765;
  background: #ececf2;
  cursor: pointer;
  font-size: 16px;
  font-weight: 650;
  line-height: 1;
}
.duration-stepper button:hover:not(:disabled) { color: #fff; background: #5c56e8; }
.duration-stepper button:disabled { color: #b7b9c2; background: #f1f1f4; cursor: not-allowed; opacity: 1; }
.duration-stepper input {
  width: 25px;
  padding: 0;
  border: 0;
  outline: 0;
  color: #242630;
  background: transparent;
  font-size: 12px;
  font-weight: 750;
  text-align: center;
  appearance: textfield;
}
.duration-stepper input::-webkit-inner-spin-button,
.duration-stepper input::-webkit-outer-spin-button { margin: 0; appearance: none; }
.duration-stepper b { color: #6e7180; font-size: 11px; font-weight: 600; }
.direct-clear-all {
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid #e5dfe2;
  border-radius: 10px;
  color: #77717a;
  background: #fbfafb;
  cursor: pointer;
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
}
.direct-clear-all:hover { color: #b04450; border-color: #e8c6ca; background: #fff4f5; }
.model-picker { position: relative; }
.creation-type-picker { position: relative; }
.creation-type-menu {
  position: absolute;
  z-index: 74;
  left: 0;
  bottom: calc(100% + 10px);
  width: 280px;
  padding: 9px;
  border: 1px solid #e1e5e8;
  border-radius: 17px;
  background: rgba(255,255,255,.99);
  box-shadow: 0 22px 60px rgba(25,35,44,.19);
  animation: model-menu-in .16s ease both;
}
.creation-type-menu header { padding: 7px 10px 9px; color: #969ea5; font-size: 9px; font-weight: 700; }
.creation-type-menu button { width: 100%; display: grid; grid-template-columns: 32px minmax(0,1fr) 18px; align-items: center; gap: 9px; padding: 10px; border: 0; border-radius: 11px; color: #2d3339; text-align: left; background: transparent; cursor: pointer; }
.creation-type-menu button:hover,
.creation-type-menu button.selected { background: #f0f2f4; }
.creation-type-menu button > i { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; color: #168db7; background: #e9f8fd; font-style: normal; font-size: 15px; }
.creation-type-menu button span { min-width: 0; }
.creation-type-menu button strong,
.creation-type-menu button small { display: block; }
.creation-type-menu button strong { font-size: 11px; }
.creation-type-menu button small { margin-top: 3px; overflow: hidden; color: #939ba2; font-size: 8px; white-space: nowrap; text-overflow: ellipsis; }
.creation-type-menu button > b { color: #23895c; opacity: 0; }
.creation-type-menu button.selected > b { opacity: 1; }
.reference-picker { position: relative; }
.reference-trigger {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border: 1px solid #d9e1e6;
  border-radius: 9px;
  color: #39444c;
  background: #fbfbfc;
  cursor: pointer;
  font-size: 10px;
  white-space: nowrap;
}
.reference-trigger:hover,
.reference-picker.open .reference-trigger { color: #048bbf; border-color: #b9ddeb; background: #f0fbff; }
.reference-trigger b { color: #079fd9; font-size: 14px; }
.reference-menu {
  position: absolute;
  z-index: 72;
  right: 0;
  bottom: calc(100% + 10px);
  width: 290px;
  overflow: hidden;
  border: 1px solid #e1e5e8;
  border-radius: 15px;
  background: white;
  box-shadow: 0 18px 48px rgba(34,43,52,.18);
}
.reference-menu header { padding: 14px 14px 10px; border-bottom: 1px solid #edf0f2; }
.reference-menu header strong,
.reference-menu header small { display: block; }
.reference-menu header strong { color: #2a3036; font-size: 11px; }
.reference-menu header small { margin-top: 4px; color: #949ca4; font-size: 8px; }
.reference-menu-list { max-height: 260px; overflow-y: auto; padding: 7px; }
.reference-option { width: 100%; display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 9px; padding: 7px; border: 0; border-radius: 9px; text-align: left; color: #343b42; background: transparent; cursor: pointer; }
.reference-option:hover { background: #f1f3f5; }
.reference-option img,
.reference-option video { width: 38px; height: 38px; object-fit: cover; border-radius: 7px; background: #e9edf0; }
.reference-option .reference-audio-thumb { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 7px; color: white; background: #8295b7; font-size: 15px; }
.reference-option strong,
.reference-option small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.reference-option strong { font-size: 10px; }
.reference-option small { margin-top: 3px; color: #929aa3; font-size: 8px; }
.reference-option > i { color: #079fd9; font-size: 13px; font-style: normal; }
.reference-empty { padding: 20px 12px; color: #969ea6; text-align: center; font-size: 9px; line-height: 1.7; }
.reference-upload { display: flex; align-items: center; gap: 9px; padding: 10px 13px; border-top: 1px solid #edf0f2; color: #3b434a; background: #fafbfc; cursor: pointer; }
.reference-upload:hover { background: #f1f9fc; }
.reference-upload > i { width: 32px; height: 32px; display: grid; place-items: center; border: 1px dashed #aab6bf; border-radius: 8px; color: #168db7; font-style: normal; }
.reference-upload b,
.reference-upload small { display: block; }
.reference-upload b { font-size: 9px; }
.reference-upload small { margin-top: 2px; color: #959da4; font-size: 8px; }
.image-spec-picker { position: relative; }
.image-spec-trigger {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 11px;
  border: 1px solid #e5e7ea;
  border-radius: 9px;
  color: #30353a;
  background: #fbfbfc;
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}
.image-spec-trigger:hover,
.image-spec-picker.open .image-spec-trigger { color: #088fbd; border-color: #b9ddea; background: #f3fbfe; }
.image-spec-trigger i { font-style: normal; }
.image-spec-trigger b { color: #89939c; font-size: 10px; }
.image-spec-menu {
  position: absolute;
  z-index: 75;
  left: 0;
  bottom: calc(100% + 10px);
  width: 432px;
  padding: 15px;
  border: 1px solid #e3e6e9;
  border-radius: 17px;
  background: rgba(255,255,255,.99);
  box-shadow: 0 22px 58px rgba(31,39,48,.2);
  animation: model-menu-in .16s ease both;
}
.image-spec-menu section + section { margin-top: 15px; }
.image-spec-menu section > header { margin-bottom: 8px; color: #8e969e; font-size: 9px; }
.image-ratio-options {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 3px;
  padding: 5px;
  border-radius: 12px;
  background: #f5f6f7;
}
.image-ratio-options button {
  min-width: 0;
  height: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 0;
  border-radius: 9px;
  color: #68717a;
  background: transparent;
  cursor: pointer;
  font-size: 8px;
}
.image-ratio-options button:hover,
.image-ratio-options button.selected { color: #171b1f; background: #fff; box-shadow: 0 3px 10px rgba(39,47,55,.1); }
.image-ratio-options button > i { display: block; border: 1.5px solid currentColor; border-radius: 2px; font-style: normal; }
.image-ratio-options button:first-child > i { width: 16px; height: 16px; display: grid; place-items: center; border: 0; font-size: 13px; }
.image-ratio-options .ratio-21-9 { width: 18px; height: 8px; }
.image-ratio-options .ratio-16-9 { width: 18px; height: 10px; }
.image-ratio-options .ratio-3-2 { width: 17px; height: 11px; }
.image-ratio-options .ratio-4-3 { width: 16px; height: 12px; }
.image-ratio-options .ratio-1-1 { width: 14px; height: 14px; }
.image-ratio-options .ratio-3-4 { width: 12px; height: 16px; }
.image-ratio-options .ratio-2-3 { width: 11px; height: 17px; }
.image-ratio-options .ratio-9-16 { width: 10px; height: 18px; }
.image-spec-segments {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  padding: 4px;
  border-radius: 12px;
  background: #f5f6f7;
}
.image-spec-segments button {
  height: 38px;
  border: 0;
  border-radius: 9px;
  color: #505962;
  background: transparent;
  cursor: pointer;
  font-size: 10px;
}
.image-spec-segments button:hover,
.image-spec-segments button.selected { color: #15191d; background: #fff; box-shadow: 0 3px 10px rgba(39,47,55,.09); }
.image-spec-segments button em { color: #0aa9df; font-style: normal; }
.video-spec-menu { width: 330px; }
.video-ratio-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.video-resolution-options { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.video-count-options { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.video-spec-menu button:disabled { color: #c3c9ce; cursor: not-allowed; opacity: .45; background: transparent; box-shadow: none; }
.image-count-options { grid-template-columns: repeat(4, 1fr); }
.image-dimensions { display: grid; grid-template-columns: 1fr auto 1fr auto; align-items: center; gap: 8px; }
.image-dimensions span { height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 13px; border-radius: 10px; color: #abb2b8; background: #f5f6f7; font-size: 9px; }
.image-dimensions span b { color: #68717a; font-size: 10px; }
.image-dimensions > i { color: #a1a9b0; font-style: normal; }
.image-dimensions > em { color: #69727a; font-size: 9px; font-style: normal; }
.model-picker-trigger {
  min-height: 35px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 11px;
  border: 1px solid #dfe5e0;
  border-radius: 999px;
  color: #2d3931;
  background: #fff;
  cursor: pointer;
  white-space: nowrap;
}
.model-picker-trigger:hover,
.model-picker.open .model-picker-trigger { border-color: #8eaa99; background: #f8fbf9; }
.model-picker-trigger .model-cube { color: #397b59; font-size: 16px; }
.model-picker-trigger b { font-size: 10px; }
.model-picker-trigger i { color: #89938c; font-size: 11px; font-style: normal; }
.model-menu {
  position: absolute;
  z-index: 70;
  left: 0;
  bottom: calc(100% + 12px);
  width: 390px;
  max-height: 390px;
  overflow-y: auto;
  padding: 8px;
  border: 1px solid #dfe5e1;
  border-radius: 18px;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 24px 65px rgba(25, 50, 36, .2);
  animation: model-menu-in .16s ease both;
}
@keyframes model-menu-in { from { opacity: 0; transform: translateY(5px); } }
.model-menu-title { padding: 8px 10px 10px; border-bottom: 1px solid #edf0ee; }
.model-menu-title span,
.model-menu-title small { display: block; }
.model-menu-title span { color: #829087; font-size: 9px; font-weight: 750; letter-spacing: .08em; }
.model-menu-title small { margin-top: 3px; color: #a1aaa4; font-size: 8px; }
.model-menu-group { padding: 9px 10px 4px; color: #9ba49e; font-size: 8px; font-weight: 750; letter-spacing: .08em; }
.model-menu-item {
  width: 100%;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 9px;
  padding: 9px;
  border: 0;
  border-radius: 12px;
  color: #27342b;
  text-align: left;
  background: transparent;
  cursor: pointer;
}
.model-menu-item:hover { background: #f3f7f4; }
.model-menu-item.selected { background: #eef7f1; }
.model-menu-item > span:nth-child(2) { min-width: 0; }
.model-menu-item strong,
.model-menu-item small { display: block; }
.model-menu-item strong { overflow: hidden; font-size: 11px; white-space: nowrap; text-overflow: ellipsis; }
.model-menu-item small { margin-top: 3px; overflow: hidden; display: -webkit-box; color: #89938c; font-size: 8px; line-height: 1.4; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.model-capability-tags { display: flex!important; flex-wrap: wrap; gap: 3px; margin-top: 5px; }
.model-capability-tags em { padding: 2px 5px; border-radius: 999px; color: #527064; background: #e8f1ed; font-size: 7px; font-style: normal; line-height: 1.3; }
.model-menu-item strong em { margin-left: 5px; padding: 2px 5px; border-radius: 999px; color: #276c4a; background: #d9f6e5; font-size: 7px; font-style: normal; }
.model-menu-item > i { display: none; color: #3c9065; font-style: normal; font-weight: 800; }
.model-menu-item.selected > i { display: block; }
.model-logo { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; color: #fff; font: 750 10px/1 var(--display); }
.seedance-logo { background: #202a24; }
.grok-logo { background: #151515; }
.omni-logo { background: linear-gradient(135deg, #367af0, #8766df); }
.minimax-logo { background: linear-gradient(135deg, #6649dc, #e159a6); }
.kling-logo { background: linear-gradient(135deg, #1568aa, #20a7c5); }
.veo-logo { background: linear-gradient(135deg, #4285f4, #34a853 45%, #fbbc05 72%, #ea4335); }
.happyhorse-logo { background: linear-gradient(135deg, #7248e8, #ef6aa4); }
.image-logo { background: linear-gradient(135deg, #161b20, #4a5965); }
.banana-logo { background: linear-gradient(135deg, #f2b91b, #f06e39); }
.image-model-menu { width: 340px; }
.image-generation-mode .direct-video-reference-zone { display: none !important; }
.direct-audio input { position: absolute; opacity: 0; }
.direct-audio > span { width: 24px; height: 14px; padding: 2px; border-radius: 999px; background: #c9d0cb; }
.direct-audio > span::after { content: ""; display: block; width: 10px; height: 10px; border-radius: 50%; background: white; transition: transform .2s ease; }
.direct-audio input:checked + span { background: #5ca67e; }
.direct-audio input:checked + span::after { transform: translateX(10px); }
.direct-generate {
  flex: 0 0 auto;
  height: 48px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 0 8px 0 18px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: #18241d;
  box-shadow: 0 10px 26px rgba(28, 52, 39, .2);
  cursor: pointer;
  font-size: 12px;
  font-weight: 750;
}
.direct-generate:hover { background: #26372d; transform: translateY(-1px); }
.direct-generate:disabled { cursor: wait; opacity: 1; transform: none; }
.direct-generate b { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: #183022; background: #baff6a; font-size: 20px; font-weight: 400; }
.direct-generate.is-busy b { color: #fff; background: #c6cdd2; animation: direct-submit-pulse 1.1s ease-in-out infinite; }
@keyframes direct-submit-pulse { 50% { background: #aeb7be; transform: scale(.94); } }
.direct-warning { margin: 11px 3px 0; color: #a2632f; font-size: 10px; }

.direct-result-card { min-height: 470px; display: grid; place-items: center; overflow: hidden; }
.direct-result-empty { width: 100%; padding: 36px 30px; text-align: center; }
.result-orbit { width: 84px; height: 84px; display: grid; place-items: center; margin: 0 auto 23px; border: 1px solid #dfe7e1; border-radius: 50%; box-shadow: 0 0 0 12px #f8faf8, 0 0 0 13px #eef2ef; }
.result-orbit span { width: 42px; height: 42px; display: grid; place-items: center; padding-left: 3px; border-radius: 50%; color: #25352c; background: #baff6a; font-size: 13px; }
.direct-result-empty > strong { color: #233028; font-size: 17px; }
.direct-result-empty p { margin: 7px 0 20px; color: #879088; font-size: 11px; }
.direct-result-empty ul { width: fit-content; margin: 0 auto; padding: 0; list-style: none; text-align: left; color: #6e7971; font-size: 10px; line-height: 2; }
.direct-result-empty li::before { content: "✓"; margin-right: 8px; color: #429169; font-weight: 800; }
.direct-progress { width: 100%; padding: 42px 30px; text-align: center; }
.direct-spinner { width: 54px; height: 54px; display: block; margin: 0 auto 21px; border: 3px solid #e8ede9; border-top-color: #66aa85; border-radius: 50%; animation: spin .8s linear infinite; }
.direct-progress strong { color: #26332a; font-size: 16px; }
.direct-progress p { margin: 7px 0 19px; color: #8a938c; font-size: 11px; }
.direct-progress > div { width: min(240px, 100%); height: 6px; margin: auto; overflow: hidden; border-radius: 999px; background: #edf1ee; }
.direct-progress i { display: block; width: 12%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #72d0aa, #baff6a); transition: width .25s ease; }
.direct-video-result { width: 100%; height: 100%; min-height: 470px; position: relative; background: #101612; }
.direct-video-result video { width: 100%; height: 405px; object-fit: contain; }
.direct-result-info { min-height: 65px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; color: #fff; background: #18211b; }
.direct-result-info strong,
.direct-result-info small { display: block; }
.direct-result-info strong { font-size: 11px; }
.direct-result-info small { margin-top: 3px; color: #9eaaa1; font-size: 9px; }
.direct-download { padding: 9px 12px; border-radius: 10px; color: #17241c; background: #baff6a; font-size: 10px; font-weight: 750; }

.direct-notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 23px; }
.direct-notes article { display: flex; align-items: center; gap: 12px; padding: 17px 18px; border: 1px solid #e4e9e5; border-radius: 17px; background: rgba(255,255,255,.64); }
.direct-notes article > b { color: #7cbe9e; font: 750 20px/1 var(--display); }
.direct-notes strong,
.direct-notes small { display: block; }
.direct-notes strong { color: #2f3b33; font-size: 11px; }
.direct-notes small { margin-top: 3px; color: #8c958e; font-size: 9px; }

#advancedStudio {
  --ink: #07090f;
  --ink-2: #0e111a;
  --ink-3: #151a26;
  --panel: #111621;
  --panel-2: #171d2a;
  --line: rgba(255, 255, 255, 0.12);
  --line-strong: rgba(255, 255, 255, 0.22);
  --text: #f4f5f7;
  --muted: #979eac;
  --dim: #626a78;
  color: var(--text);
  background: var(--ink);
}

@media (max-width: 1040px) {
  .topbar-nav { display: none; }
  .account-copy { display: none; }
  .direct-studio { padding-top: 52px; }
  .direct-layout { grid-template-columns: 1fr; }
  .direct-result-card { min-height: 350px; }
  .direct-video-result { min-height: 350px; }
  .direct-video-result video { height: 360px; }
}

@media (max-width: 680px) {
  .topbar { height: 64px; padding: 0 13px; }
  .brand strong { font-size: 13px; }
  .brand small, .api-state, .reset-link { display: none; }
  .mode-button { padding-inline: 10px; font-size: 10px; }
  .account-chip { min-height: 36px; padding: 3px; }
  .account-chip > a { display: none; }
  .account-avatar { width: 28px; height: 28px; }
  .direct-studio { width: min(100% - 22px, 1260px); padding: 40px 0 34px; }
  .direct-hero { margin-bottom: 24px; }
  .direct-hero h1 { font-size: 36px; }
  .direct-hero p { font-size: 12px; }
  .direct-composer-card, .direct-result-card { border-radius: 22px; }
  .direct-composer-card { min-height: 535px; padding: 14px; }
  .direct-count { top: 316px; right: 18px; }
  #directPrompt { min-height: 196px; font-size: 14px; }
  .direct-toolbar { align-items: stretch; flex-direction: column; }
  .direct-generate { justify-content: space-between; width: 100%; padding-left: 20px; }
  .model-menu { position: fixed; left: 11px; right: 11px; bottom: 76px; width: auto; max-height: 62vh; }
  .direct-notes { grid-template-columns: 1fr; }
  .direct-result-card { min-height: 330px; }
}

/* Dream-style studio refinement */
body {
  background: #f5f6f8;
  color: #15171a;
}
.announcement-bar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 80;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #fff;
  background: linear-gradient(90deg, #2b7cff, #12a7ed 70%, #3296ff);
  font-size: 11px;
  font-weight: 650;
}
.announcement-bar span { padding: 2px 6px; border-radius: 4px; color: #1273d5; background: #fff; font-size: 8px; }
.topbar {
  top: 34px;
  height: 58px;
  padding: 0 25px 0 88px;
  border-bottom: 0;
  background: rgba(245, 246, 248, .92);
  box-shadow: none;
}
.topbar-meta { margin-left: auto; justify-content: flex-end; }
.topbar .brand,
.topbar-nav { display: none; }
.mode-button { background: #17191c; color: white; border-color: #17191c; }
.reset-link { color: #737a82; }
.app-sidebar {
  position: fixed;
  z-index: 55;
  inset: 34px auto 0 0;
  width: 76px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 18px 9px 15px;
  border-right: 1px solid #e8e9ec;
  background: rgba(250, 251, 252, .96);
}
.side-brand {
  position: relative;
  width: 40px;
  height: 40px;
  margin-bottom: 65px;
  border: 0;
  background: transparent;
}
.side-brand::before,
.side-brand::after { content: none; }
.side-brand img { width: 40px; height: 40px; display: block; object-fit: contain; }
.app-sidebar nav { width: 100%; display: grid; gap: 8px; }
.side-nav-item {
  width: 100%;
  display: grid;
  place-items: center;
  gap: 2px;
  padding: 8px 0;
  border: 0;
  border-radius: 12px;
  color: #6f757c;
  background: transparent;
  cursor: pointer;
}
.side-nav-item i { font: 500 22px/1 var(--display); font-style: normal; }
.side-nav-item span { font-size: 9px; }
.side-nav-item:hover,
.side-nav-item.active { color: #111418; background: #e9eaed; }
.side-bottom { margin-top: auto; display: grid; place-items: center; gap: 3px; color: #0a95ce; }
.side-bottom span { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid #dfe3e7; border-radius: 12px; background: white; font-size: 8px; font-weight: 800; }
.side-bottom small { color: #8b9299; font-size: 8px; }

.direct-studio {
  width: min(1200px, calc(100% - 132px));
  margin-left: calc(76px + max(28px, (100vw - 1276px) / 2));
  margin-right: auto;
  padding: 78px 0 70px;
}
.direct-hero { margin: 0 auto 34px; }
.direct-hero h1 { margin: 0; font: 650 clamp(26px, 3.2vw, 38px)/1.18 var(--body); letter-spacing: -.035em; color: #22252a; }
.direct-hero h1 em { color: #10a4e6; font-style: normal; }
.direct-hero p { margin-top: 10px; color: #939ba5; font-size: 12px; }

.direct-layout { display: block; }
.direct-composer-card {
  min-height: 340px;
  padding: 18px 19px 15px;
  border: 1px solid #e5e7ea;
  border-radius: 23px;
  background: #fff;
  box-shadow: 0 6px 28px rgba(35, 43, 52, .09);
}
.direct-composer-card::before { display: none; }
.direct-input-surface {
  overflow: hidden;
  border: 1px solid #e5e8eb;
  border-radius: 15px;
  background: #fff;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.direct-input-surface:focus-within { border-color: #a7dff3; box-shadow: 0 0 0 3px rgba(13,162,220,.08); }
.direct-assets {
  position: relative;
  min-height: 112px;
  display: flex;
  align-items: center;
  gap: 0;
  overflow: visible;
  padding: 10px 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.direct-assets.dragging { background: #eefaff; box-shadow: inset 0 0 0 2px rgba(13,162,220,.1); }
.direct-upload-empty { width: 100%; min-height: 88px; display: flex; align-items: center; justify-content: center; gap: 13px; color: #7f8992; cursor: pointer; text-align: left; }
.direct-upload-empty > span { width: 42px; height: 42px; display: grid; place-items: center; border: 1px dashed #bfc8cf; border-radius: 11px; color: #159acb; background: white; font-size: 23px; font-weight: 300; }
.direct-upload-empty strong,
.direct-upload-empty small { display: block; }
.direct-upload-empty strong { color: #424a51; font-size: 11px; }
.direct-upload-empty small { margin-top: 5px; color: #98a0a7; font-size: 9px; }
.direct-asset-stack { position: relative; z-index: 2; display: flex; align-items: center; padding: 8px 2px 8px 8px; }
.direct-asset-card,
.direct-add-card { flex: 0 0 62px; width: 62px; height: 76px; border-radius: 9px; }
.direct-asset-card { z-index: var(--stack-index); margin-left: -23px; transform: rotate(var(--tilt)); border: 2px solid white; box-shadow: 0 5px 13px rgba(31,39,47,.16); transition: margin .18s ease, transform .18s ease, box-shadow .18s ease; }
.direct-image-card { cursor: zoom-in; }
.direct-asset-card:first-child { margin-left: 0; }
.direct-asset-card:hover { z-index: 30; transform: translateY(-7px) rotate(0) scale(1.06); box-shadow: 0 10px 22px rgba(31,39,47,.22); }
.direct-asset-card button { opacity: 0; transform: scale(.85); transition: opacity .16s ease, transform .16s ease; }
.direct-asset-card:hover button,
.direct-asset-card:focus-within button { opacity: 1; transform: scale(1); }
.direct-asset-card > small { left: 3px; right: 3px; bottom: 3px; max-width: none; text-align: center; }
.direct-add-card { z-index: 1; display: grid; place-content: center; gap: 4px; margin-left: -16px; transform: rotate(4deg); border-color: #cbd2d8; background: #f1f3f5; box-shadow: 0 4px 10px rgba(31,39,47,.08); }
.direct-add-card > * { transform: rotate(-4deg); }
.direct-add-card span { font-size: 21px; }
.direct-add-card small { font-size: 8px; }
.direct-add-card .direct-add-tooltip {
  position: absolute;
  z-index: 60;
  top: -43px;
  left: 50%;
  width: max-content;
  padding: 9px 12px;
  border-radius: 7px;
  color: #fff;
  background: #24282d;
  box-shadow: 0 7px 20px rgba(18,23,28,.2);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 5px) rotate(-4deg);
  transition: opacity .16s ease, transform .16s ease;
}
.direct-add-card .direct-add-tooltip::after { content: ""; position: absolute; top: 100%; left: 50%; border: 5px solid transparent; border-top-color: #24282d; transform: translateX(-50%); }
.direct-add-card:hover,
.direct-add-card:focus-within { z-index: 50; }
.direct-add-card:hover .direct-add-tooltip,
.direct-add-card:focus-within .direct-add-tooltip { opacity: 1; transform: translate(-50%, 0) rotate(-4deg); }
.direct-asset-drop-copy { position: absolute; z-index: 1; right: 16px; left: min(520px, 58%); min-height: 70px; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; color: #98a0a8; cursor: pointer; text-align: right; }
.direct-asset-drop-copy strong { color: #5c6670; font-size: 10px; }
.direct-asset-drop-copy small { margin-top: 5px; font-size: 9px; }
.direct-prompt-label { display: none; }
#directPrompt { min-height: 145px; max-height: 240px; padding: 10px 13px 34px; font-size: 13px; line-height: 1.8; transition: min-height .2s ease, max-height .2s ease; }
#directPrompt.expanded { min-height: 360px; max-height: 65vh; }
#directPrompt::placeholder { color: #9da6b1; }
.direct-prompt-meta { position: relative; z-index: 2; display: flex; justify-content: flex-end; align-items: center; width: max-content; margin: -28px 13px 9px auto; }
.direct-count { position: static; width: max-content; margin: 0; }
.direct-toolbar { align-items: center; padding-top: 13px; }
.direct-tool-group { align-items: center; }
.creation-type-pill,
.tool-pill,
.tool-select,
.direct-audio,
.model-picker-trigger {
  min-height: 38px;
  padding: 0 12px;
  border-color: #e5e7ea;
  border-radius: 9px;
  color: #30353a;
  background: #fbfbfc;
  font-size: 10px;
}
.creation-type-pill { display: inline-flex; align-items: center; gap: 6px; color: #119ed8; font-weight: 700; white-space: nowrap; }
.creation-type-pill i { font-style: normal; }
.model-picker-trigger { gap: 6px; }
.model-picker-trigger b { max-width: 130px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.model-picker-trigger .model-cube { color: #1f2428; }
.direct-audio { background: #fbfbfc; }
.prompt-expand-tool { min-height: 38px; display: inline-flex; align-items: center; gap: 6px; padding: 0 13px; border: 1px solid #dcdaf8; border-radius: 10px; color: #514bdd; background: #f4f3ff; cursor: pointer; font-size: 12px; font-weight: 750; white-space: nowrap; }
.prompt-expand-tool::before { content: "↕"; font-size: 13px; }
.prompt-expand-tool:hover { border-color: #bbb7f2; color: #3932c8; background: #eceaff; }
.prompt-expand-tool:focus-visible { outline: 3px solid rgba(92, 86, 232, .18); outline-offset: 2px; }
.direct-submit-cluster { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-left: auto; }
.direct-price-estimate { display: grid; justify-items: end; gap: 2px; min-width: 92px; min-height: 48px; padding: 6px 9px; border: 1px solid #d7e8e1; border-radius: 13px; color: #173c30; background: linear-gradient(145deg,#fbfffd,#f1faf6); font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.price-points { display: flex; align-items: baseline; gap: 3px; line-height: 1; }
.price-points strong { color: #123e31; font-size: 17px; font-weight: 850; letter-spacing: -.03em; }
.price-points span { color: #486b60; font-size: 10px; font-weight: 750; }
.admin-price-bypass strong { color: #116b53; font-size: 13px; letter-spacing: -.02em; }
.admin-price-bypass span { color: #14765d; }
.direct-price-estimate > small { color: #5f756e; font-size: 9px; font-weight: 650; }
.member-saving-detail { position: relative; }
.member-saving-detail summary { display: inline-flex; align-items: center; gap: 4px; min-height: 22px; padding: 3px 8px 3px 9px; border: 1px solid #087856; border-radius: 999px; color: #fff; background: #0b8561; box-shadow: 0 3px 9px rgba(11,133,97,.2); font-size: 10px; font-weight: 800; cursor: pointer; list-style: none; transition: transform .16s ease, background-color .16s ease, box-shadow .16s ease; }
.member-saving-detail summary::-webkit-details-marker { display: none; }
.member-saving-detail summary i { font-size: 11px; font-style: normal; transition: transform .16s ease; }
.member-saving-detail summary:hover { background: #087253; box-shadow: 0 5px 12px rgba(11,133,97,.26); transform: translateY(-1px); }
.member-saving-detail summary:focus-visible { outline: 3px solid rgba(11,133,97,.2); outline-offset: 2px; }
.member-saving-detail[open] summary i { transform: rotate(180deg); }
.member-saving-popover { position: absolute; right: -9px; bottom: calc(100% + 11px); z-index: 20; display: grid; gap: 9px; width: 236px; padding: 14px; border: 1px solid #d8e7e1; border-radius: 14px; color: #475851; background: #fff; box-shadow: 0 16px 38px rgba(32,62,52,.16); line-height: 1.35; }
.member-saving-popover::after { content: ""; position: absolute; right: 22px; bottom: -5px; width: 9px; height: 9px; border-right: 1px solid #d8e7e1; border-bottom: 1px solid #d8e7e1; background: #fff; transform: rotate(45deg); }
.member-saving-popover > b { color: #213b32; font-size: 11px; }
.member-saving-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.member-saving-metrics > strong { display: grid; gap: 2px; padding: 9px 10px; border-radius: 10px; color: #087b59; background: #edf9f4; font-size: 15px; line-height: 1.15; }
.member-saving-metrics small { color: #71827c; font-size: 9px; font-weight: 650; }
.member-saving-popover > em { color: #41554e; font-size: 10px; font-style: normal; }
.member-saving-popover > span { padding-top: 7px; border-top: 1px dashed #dfe8e4; color: #71817b; font-size: 9px; }
.direct-price-estimate.ready { border-color: #d6e8df; color: #14765d; background: #f4fbf8; }
.direct-price-estimate.unavailable { color: #8b9199; background: #f7f8f9; }
.direct-generate { width: 46px; height: 46px; padding: 0; background: transparent; box-shadow: none; }
.direct-generate span { display: none; }
.direct-generate b { width: 42px; height: 42px; color: white; background: #00a7e8; font-size: 19px; }
.direct-generate:hover { background: transparent; }
.direct-generate:hover b { background: #008dca; }
.direct-generate.is-busy:hover b { background: #c6cdd2; }
.direct-reference { margin-bottom: 8px; }
.direct-warning { margin-bottom: -4px; }
.model-menu { bottom: calc(100% + 10px); }

.direct-result-card {
  min-height: 0;
  display: block;
  margin-top: 18px;
  border: 0;
  border-radius: 22px;
  background: transparent;
  box-shadow: none;
}
.direct-result-empty { display: none; }
.direct-progress { min-height: 170px; padding: 35px; border: 1px solid #e4e6e9; border-radius: 20px; background: white; }
.direct-video-result { min-height: 0; overflow: hidden; border-radius: 20px; }
.direct-video-result video { height: min(64vh, 660px); }

.feature-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 22px; }
.feature-strip button {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 15px;
  border: 1px solid #e5e7ea;
  border-radius: 18px;
  text-align: left;
  color: #282d32;
  background: rgba(255,255,255,.78);
  cursor: pointer;
}
.feature-strip button:hover { border-color: #ced3d9; background: #fff; transform: translateY(-1px); }
.feature-strip button > span:last-child { min-width: 0; }
.feature-strip strong,
.feature-strip small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.feature-strip strong { font-size: 11px; }
.feature-strip small { margin-top: 3px; color: #8b939c; font-size: 9px; }
.feature-icon { flex: 0 0 42px; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 11px; color: white; font: 700 11px/1 var(--display); }
.feature-icon.blue { background: linear-gradient(145deg, #1158e4, #43a6ff); }
.feature-icon.cyan { background: linear-gradient(145deg, #0bb6cf, #7ee4de); font-size: 20px; }
.feature-icon.purple { background: linear-gradient(145deg, #5e59d9, #ada9ff); }
.feature-icon.dark { background: #17191d; font-size: 8px; }

.inspiration-section { margin-top: 86px; }
.inspiration-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.inspiration-head > div { display: flex; gap: 7px; }
.inspiration-head button { padding: 9px 17px; border: 0; border-radius: 10px; color: #697079; background: transparent; cursor: pointer; font-size: 11px; }
.inspiration-head button.active { color: #20252a; background: #e5e7eb; font-weight: 700; }
.inspiration-head > span { color: #9299a1; font-size: 10px; }
.inspiration-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; overflow: hidden; border-radius: 20px; }
.inspiration-card { position: relative; min-height: 265px; overflow: hidden; }
.inspiration-card::before,
.inspiration-card::after { content: ""; position: absolute; border-radius: 50%; filter: blur(2px); }
.gradient-one { background: linear-gradient(145deg, #09111b, #152a43 55%, #68c5df); }
.gradient-one::before { width: 190px; height: 190px; right: -40px; top: 26px; background: radial-gradient(circle at 35% 35%, #d7fbff, #3291ac 32%, #0d1f32 70%); }
.gradient-one::after { width: 110px; height: 180px; left: 22px; bottom: -55px; background: linear-gradient(#44dbd1, #04131e); transform: rotate(25deg); }
.gradient-two { background: linear-gradient(155deg, #f6d2ac, #ba7657 45%, #612e26); }
.gradient-two::before { width: 180px; height: 180px; left: 23px; top: 23px; background: radial-gradient(circle at 45% 38%, #fff8dc, #d48e4e 32%, #55322e 64%); }
.gradient-two::after { width: 105px; height: 160px; right: -9px; bottom: -30px; background: linear-gradient(#f3d4ac, #98583b); transform: rotate(-18deg); }
.gradient-three { background: linear-gradient(135deg, #e8e1dd, #ae9a91 50%, #52443f); }
.gradient-three::before { width: 145px; height: 190px; left: 72px; top: 22px; background: radial-gradient(circle at 50% 28%, #f7caa7, #936c5a 40%, #302826 72%); border-radius: 48% 48% 35% 35%; }
.gradient-three::after { width: 80px; height: 42px; right: 24px; bottom: 47px; background: #f5e5cd; transform: rotate(-8deg); }
.gradient-four { background: linear-gradient(145deg, #c8d9e6, #5c7891 48%, #1d2833); }
.gradient-four::before { width: 150px; height: 150px; right: 34px; top: 35px; border: 18px solid rgba(255,255,255,.75); background: rgba(42,74,97,.45); }
.gradient-four::after { width: 190px; height: 45px; left: 30px; bottom: 44px; background: linear-gradient(90deg, #eafaff, #83bcd2); transform: rotate(-8deg); }
.inspiration-card > div { position: absolute; z-index: 3; inset: auto 15px 15px; padding: 13px; border-radius: 13px; color: white; background: rgba(8, 15, 22, .44); backdrop-filter: blur(9px); }
.inspiration-card span,
.inspiration-card strong,
.inspiration-card small { display: block; }
.inspiration-card span { color: #a9edff; font-size: 8px; }
.inspiration-card strong { margin-top: 4px; font-size: 12px; }
.inspiration-card small { margin-top: 3px; color: rgba(255,255,255,.66); font-size: 8px; }

/* 灵感首页像即梦的空白创作页：不显示任务组和历史，只保留创作入口。 */
body.inspiration-open .generation-session-sidebar,
body.inspiration-open .generation-session-history { display: none !important; }
body.inspiration-open .generation-session-main {
  width: min(1200px, calc(100vw - 132px));
  margin-left: calc(76px + max(28px, (100vw - 1276px) / 2));
  padding-top: 78px;
}
body.inspiration-open .direct-studio.inspiration-home .direct-hero { position: static; margin-top: 0; }
body.inspiration-open .direct-studio.inspiration-home .direct-layout { position: static; margin-top: 0; }
body.inspiration-open .direct-studio.inspiration-home .feature-strip { margin-top: 22px; }
body.inspiration-open .direct-studio.inspiration-home .inspiration-section { display: block; margin-top: 78px; }

/* 每个创作任务独立保存自己的素材、提示词、参数和成片记录 */
.direct-studio {
  width: 100%;
  margin: 0;
  padding: 0;
}
.generation-session-sidebar {
  position: fixed;
  z-index: 44;
  top: 92px;
  bottom: 0;
  left: 76px;
  width: 240px;
  overflow-y: auto;
  padding: 24px 14px 32px;
  border-right: 1px solid #e4e7ea;
  background: rgba(250,251,252,.97);
}
.generation-session-sidebar-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 6px 13px; }
.generation-session-sidebar-head strong { color: #171a1e; font-size: 14px; }
.generation-session-sidebar-head span { color: #929aa2; font-size: 9px; }
.new-generation-session {
  width: 100%;
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  border: 1px solid #e0e4e7;
  border-radius: 11px;
  color: #23282d;
  background: #fff;
  cursor: pointer;
  font-size: 11px;
  font-weight: 750;
  box-shadow: 0 3px 12px rgba(30,38,46,.04);
}
.new-generation-session:hover { color: #0689bd; border-color: #b9deed; background: #f2fbff; }
.new-generation-session i { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 7px; color: #fff; background: #171a1e; font-style: normal; font-size: 16px; }
.new-generation-session:disabled { opacity: .55; cursor: wait; }
.generation-session-sidebar > p { margin: 22px 7px 9px; color: #9aa1a8; font-size: 10px; }
.generation-session-list { display: grid; gap: 4px; }
.generation-session-item {
  position: relative;
  width: 100%;
  border-radius: 10px;
}
.generation-session-item:hover { background: #f0f2f4; }
.generation-session-item.active { background: #e8eaed; }
.generation-session-select {
  width: 100%;
  min-height: 54px;
  display: grid;
  grid-template-columns: 42px minmax(0,1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 6px 34px 6px 8px;
  border: 0;
  border-radius: inherit;
  color: #2c3238;
  background: transparent;
  cursor: pointer;
  text-align: left;
}
.generation-session-cover { width: 42px; height: 42px; display: grid; place-items: center; overflow: hidden; border-radius: 8px; color: #87919a; background: #e2e6e9; font-size: 13px; }
.generation-session-cover img { width: 100%; height: 100%; object-fit: cover; }
.generation-session-cover.empty { background: linear-gradient(145deg,#e9eef2,#dfe6eb); }
.generation-session-select > span:nth-child(2) { min-width: 0; }
.generation-session-select strong,
.generation-session-select small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.generation-session-select strong { font-size: 11px; font-weight: 650; }
.generation-session-select strong em { margin-right: 5px; padding: 2px 4px; border-radius: 4px; color: #087da9; background: #dff5fc; font-size: 7px; font-style: normal; vertical-align: 1px; }
.generation-session-select small { margin-top: 4px; color: #939ba3; font-size: 8px; }
.generation-session-select > i { width: 8px; height: 8px; border-radius: 50%; background: #0facdf; box-shadow: 0 0 0 4px rgba(15,172,223,.1); }
.generation-session-more {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: 6px;
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  padding: 0 0 5px;
  transform: translateY(-50%);
  border: 0;
  border-radius: 7px;
  color: #5d666e;
  background: transparent;
  cursor: pointer;
  font-size: 12px;
  letter-spacing: -2px;
  opacity: .55;
}
.generation-session-item:hover .generation-session-more,
.generation-session-item.active .generation-session-more { opacity: 1; }
.generation-session-more:hover { color: #15191d; background: rgba(255,255,255,.82); }
.generation-session-menu {
  position: absolute;
  z-index: 80;
  top: 48px;
  right: 5px;
  width: 142px;
  display: grid;
  gap: 2px;
  padding: 6px;
  border: 1px solid #e5e8ea;
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(28,35,42,.16);
}
.generation-session-menu button { min-height: 34px; padding: 0 12px; border: 0; border-radius: 8px; color: #2e353b; background: transparent; cursor: pointer; font-size: 10px; text-align: left; }
.generation-session-menu button:hover { background: #f0f2f4; }
.generation-session-menu button.danger { color: #c43c3c; }
.generation-session-empty { padding: 28px 8px; color: #a0a7ad; text-align: center; font-size: 9px; }
.generation-session-main {
  width: min(1050px, calc(100vw - 370px));
  margin-left: calc(316px + max(24px, (100vw - 1400px) / 2));
  padding: 78px 0 70px;
}
.generation-back-bottom {
  position: fixed;
  z-index: 20;
  right: 30px;
  bottom: 112px;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px 0 9px;
  border: 1px solid #dfe4e8;
  border-radius: 9px;
  color: #3b454d;
  background: rgba(255,255,255,.96);
  box-shadow: 0 8px 24px rgba(31,40,49,.12);
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
}
.generation-back-bottom:hover { color: #087da9; border-color: #bfe4f1; background: #f4fcff; }
.generation-back-bottom span { font-size: 15px; line-height: 1; }
.generation-back-bottom.hidden { display: none; }
.generation-session-history > header { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin: 0 0 24px; padding: 0 2px; }
.generation-session-history > header span { color: #0a9ed7; font-size: 8px; font-weight: 800; letter-spacing: .14em; }
.generation-session-history > header h1 { margin: 5px 0 0; color: #171b20; font-size: 26px; line-height: 1.2; letter-spacing: -.035em; }
.generation-session-history > header small { color: #939ba3; font-size: 9px; }
.generation-session-day + .generation-session-day { margin-top: 38px; }
.generation-session-day > h2 { margin: 0 0 14px; color: #171b20; font-size: 20px; letter-spacing: -.03em; }
.generation-session-grid { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 22px; }
.generation-session-record { width: min(900px, 100%); margin: 0 auto 20px; padding: 20px; border-radius: 18px; box-shadow: none; }
.generation-session-record .task-job-result { display: grid; place-items: center; min-height: 260px; background: #edf0f2; }
.generation-session-record .task-job-result video { width: 100%; height: auto; max-height: min(68vh, 680px); object-fit: contain; background: #15191d; }
.generation-session-record .task-job-prompt p { max-height: 150px; font-size: 11px; line-height: 1.75; }
.generation-session-entry { min-width: 0; width: 100%; margin: 0; overflow: hidden; border: 1px solid #e4e7ea; border-radius: 10px; background: #fff; box-shadow: none; }
.generation-session-entry:hover { border-color: #d9dde1; box-shadow: 0 9px 26px rgba(35,43,52,.09); }
.generation-entry-main { display: grid; grid-template-columns: minmax(0, 58%) minmax(300px, 42%); align-items: stretch; min-width: 0; }
.generation-entry-summary { min-width: 0; display: flex; flex-direction: column; align-items: stretch; gap: 12px; padding: 18px 20px 14px; border-left: 1px solid #e8ebed; background: #fff; }
.generation-entry-summary .generation-record-references { flex: 0 0 auto; min-height: 48px; margin: 0; padding: 0 0 0 6px; }
.generation-entry-summary .generation-reference-tile { width: 43px; height: 48px; border-radius: 7px; }
.generation-entry-copy { min-width: 0; min-height: 0; flex: 1; display: flex; flex-direction: column; padding-top: 0; }
.generation-entry-prompt-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 7px; }
.generation-entry-prompt-title { display: block; color: #079ed8; font-size: 9px; font-weight: 750; letter-spacing: .08em; }
.generation-entry-prompt-head button,
.task-job-prompt-head button { flex: 0 0 auto; padding: 5px 9px; border: 1px solid #dde3e8; border-radius: 999px; color: #68727b; background: #fff; cursor: pointer; font-size: 8px; }
.generation-entry-prompt-head button:hover,
.task-job-prompt-head button:hover { color: #087da9; border-color: #bfe4f1; background: #effaff; }
.generation-entry-copy > p { min-height: 0; max-height: 220px; margin: 0; overflow-y: auto; padding: 0 8px 0 0; color: #252b31; font-size: 11px; line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; scrollbar-width: thin; }
.generation-record-card:not(.prompt-expanded):not(.failed) .generation-entry-copy > p { display: -webkit-box; max-height: 60px; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.generation-record-card.prompt-expanded .generation-entry-copy > p { max-height: none; overflow-y: visible; }
.generation-entry-copy > div { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: auto; padding-top: 12px; color: #929aa2; font-size: 9px; }
.generation-entry-copy > div b { color: #68717a; font-size: 9px; font-weight: 600; }
.generation-entry-copy > div span + span::before,
.generation-entry-copy > div time::before { content: "·"; margin-right: 7px; color: #c0c5ca; }
.generation-entry-copy > div time { margin-left: auto; color: #a0a7ad; }
.generation-entry-media {
  width: 100%;
  min-height: 100%;
  margin: 0;
  border-radius: 0;
}
.generation-entry-media video { pointer-events: none; }
.generation-entry-media > span { pointer-events: none; }
.generation-entry-pending,
.generation-entry-failed { width: 100%; min-height: 0; aspect-ratio: 16 / 9; display: grid; place-items: center; align-content: center; gap: 9px; margin: 0; border-radius: 0; color: #727b83; background: #eceff1; text-align: center; }
.generation-entry-pending strong,
.generation-entry-failed strong { color: #353c43; font-size: 12px; }
.generation-entry-pending .direct-spinner {
  width: 48px;
  height: 48px;
  margin: 0 0 12px;
  border: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(100, 86, 235, 0) 0 58%, #6456eb 76%, #22b77d 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 0);
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 0);
  animation: generation-spinner-turn .9s linear infinite;
  will-change: transform;
}
@keyframes generation-spinner-turn { to { transform: rotate(360deg); } }
.generation-entry-pending > div { width: min(320px, 70%); height: 5px; overflow: hidden; border-radius: 99px; background: #dce2e6; }
.generation-entry-pending > div i { display: block; height: 100%; min-width: 6%; border-radius: inherit; background: linear-gradient(90deg,#6456eb 0%,#7d6df1 38%,#22b77d 72%,#6456eb 100%); background-size: 220% 100%; animation: generation-progress-flow 1.7s linear infinite; transition: width .35s ease; }
@keyframes generation-progress-flow { to { background-position: -220% 0; } }
.generation-entry-pending small { font-size: 8px; }
@media (prefers-reduced-motion: reduce) {
  .generation-entry-pending .direct-spinner { display: none; }
}
.generation-entry-failed { color: #9c4b4b; background: #fff0f0; }
.generation-entry-failed p { max-width: 540px; margin: 0; padding: 0 18px; font-size: 9px; line-height: 1.7; }
.generation-record-card.failed {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  padding: 9px 0 5px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.generation-record-card.failed:hover { border-color: transparent; box-shadow: none; }
.generation-record-card.failed .generation-entry-main { display: flex; flex-direction: column; }
.generation-record-card.failed .generation-entry-summary { order: 1; min-height: 0; flex-direction: row; align-items: center; gap: 9px; padding: 0 0 7px; border: 0; background: transparent; }
.generation-record-card.failed .generation-entry-prompt-title { display: none; }
.generation-record-card.failed .generation-entry-copy > p { display: -webkit-box; max-height: 36px; overflow: hidden; padding: 0; font-size: 10px; line-height: 1.7; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.generation-record-card.failed.prompt-expanded .generation-entry-copy > p { display: block; max-height: none; overflow: visible; -webkit-line-clamp: unset; }
.generation-record-card.failed .generation-entry-copy > div { margin-top: 4px; padding-top: 0; }
.generation-record-card.failed .generation-entry-failed {
  order: 2;
  width: 100%;
  min-height: 28px;
  aspect-ratio: auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  padding: 0;
  border-radius: 0;
  color: #8b949c;
  background: transparent;
  text-align: left;
}
.generation-record-card.failed .generation-entry-failed::before { content: "ⓘ"; color: #929ba3; font-size: 11px; }
.generation-record-card.failed .generation-entry-failed strong { color: #7d868e; font-size: 10px; font-weight: 600; }
.generation-record-card.failed .generation-entry-failed p { min-width: 0; max-width: 620px; overflow: hidden; margin: 0; padding: 0; color: #a0a7ad; font-size: 9px; white-space: nowrap; text-overflow: ellipsis; }
.generation-record-card.failed > footer { order: 3; padding: 5px 0 0; }
.generation-session-entry > footer { width: 100%; display: flex; align-items: center; justify-content: flex-end; gap: 7px; margin: 0; padding: 11px 14px; border-top: 1px solid #edf0f2; background: #fff; }
.generation-session-entry > footer button,
.generation-session-entry > footer a { min-height: 34px; display: inline-flex; align-items: center; justify-content: center; padding: 0 13px; border: 1px solid #dfe3e6; border-radius: 8px; color: #3d464e; background: #f7f8f9; cursor: pointer; font-size: 9px; font-weight: 650; }
.generation-session-entry > footer button:hover,
.generation-session-entry > footer a:hover { color: #087da9; border-color: #bfe4f1; background: #effaff; }
.generation-session-entry > footer button.danger { margin-left: auto; color: #b53e3e; }
.generation-session-entry > footer button.danger:hover { color: #a42e2e; border-color: #efcaca; background: #fff3f3; }
.direct-submission-card { border-color: #e7e3df; }
.direct-submission-stage { min-height: 210px; display: grid; place-items: center; align-content: center; gap: 14px; padding: 26px; color: #ddd; background: #1e1f1d; }
.direct-submission-stage > strong { font-size: 12px; font-weight: 650; }
.direct-submission-stage > div { width: min(360px, 76%); height: 3px; overflow: hidden; background: #3a3b38; }
.direct-submission-stage > div i { display: block; height: 100%; background: #ff603d; transition: width .2s linear; }
.direct-submission-stage > div i.indeterminate { width: 34%; animation: direct-submission-progress 1.25s ease-in-out infinite; }
.direct-submission-stage.slow > strong { color: #ffd0a8; }
.direct-submission-stage.slow > div i { background: #ff9b54; }
@keyframes direct-submission-progress {
  from { transform: translateX(-105%); }
  to { transform: translateX(300%); }
}
@media (prefers-reduced-motion: reduce) {
  .direct-submission-stage > div i.indeterminate { width: 100%; animation: none; opacity: .65; }
}
.direct-submission-stage > p { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 4px 0 0; color: #a8aaa6; font-size: 9px; }
.direct-submission-stage > p small { color: #777a75; font-size: 9px; }
.direct-submission-card > footer { justify-content: flex-start; gap: 16px; }
.direct-submission-card > footer > span { margin-left: auto; color: #777f86; font-size: 9px; }
.direct-submission-card > footer button.danger { margin-left: 0; color: #c45142; border-color: #efc9c2; background: #fff8f6; }
.direct-submission-card > footer button:disabled { cursor: default; }
.task-job-actions button.danger { color: #b53e3e; border-color: #efd7d7; background: #fff8f8; }
.generation-record-references { display: flex; align-items: center; gap: 0; min-height: 58px; margin-top: 12px; padding-left: 7px; }
.generation-reference-tile { position: relative; width: 52px; height: 58px; display: grid; place-items: center; overflow: hidden; margin-left: -8px; border: 2px solid #fff; border-radius: 8px; color: #fff; background: #77879a; box-shadow: 0 4px 12px rgba(29,37,45,.15); font-size: 18px; }
.generation-reference-tile:first-child { margin-left: 0; }
.generation-reference-tile img { width: 100%; height: 100%; object-fit: cover; }
.generation-reference-tile small { position: absolute; right: 2px; bottom: 2px; left: 2px; overflow: hidden; padding: 2px 3px; border-radius: 4px; color: #fff; background: rgba(20,25,30,.65); font-size: 7px; text-align: center; white-space: nowrap; text-overflow: ellipsis; }
.generation-reference-tile.audio { background: linear-gradient(145deg,#6e62d9,#8c83ea); }
.generation-reference-tile.missing { color: #8a949d; background: #e9edf0; font-size: 8px; text-align: center; }
.has-session-history .feature-strip,
.has-session-history .inspiration-section { display: none; }
body:not(.inspiration-open) .direct-hero { display: none; }
body.inspiration-open .direct-hero { display: block; margin: 26px auto 18px; }
.has-session-history .direct-layout { position: sticky; z-index: 12; bottom: 18px; margin: 38px 0 0; }
.has-session-history .direct-composer-card { min-height: 0; padding: 13px 15px 12px; border-radius: 20px; box-shadow: 0 12px 40px rgba(31,40,49,.15); }
.has-session-history .direct-assets { min-height: 88px; }
.has-session-history #directPrompt { min-height: 105px; max-height: 155px; }
.has-session-history #directPrompt.expanded { min-height: 360px; max-height: 65vh; }
.has-session-history .direct-result-card { display: none; }
.task-history-button { display: none; }

.asset-library-view {
  width: calc(100% - 176px);
  min-height: 100vh;
  margin-left: 116px;
  padding: 20px 0 80px;
}
body.asset-library-open .announcement-bar,
body.asset-library-open .topbar { display: none; }
body.asset-library-open .app-sidebar { inset: 0 auto 0 0; }
.asset-library-hero { min-height: 40px; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 8px; }
.asset-view-tabs { display: flex; align-items: center; gap: 24px; }
.asset-view-tabs button { min-height: 36px; padding: 0 17px; border: 0; border-radius: 9px; color: #181b1f; background: #e8eaed; font-size: 13px; font-weight: 700; }
.asset-view-tabs span { color: #9aa1a8; font-size: 11px; }
.asset-upload-button { min-height: 38px; display: inline-flex; align-items: center; gap: 8px; padding: 0 15px; border-radius: 10px; color: white; background: #15181c; cursor: pointer; font-size: 11px; font-weight: 700; box-shadow: 0 6px 16px rgba(20,24,28,.12); }
.asset-upload-button:hover { background: #009fdc; }
.asset-upload-button i { font-style: normal; font-size: 17px; }
.asset-library-policy { min-height: 36px; display: inline-flex; align-items: center; gap: 8px; padding: 0 13px; border: 1px solid #dce5e0; border-radius: 11px; color: #607069; background: #f7faf8; font-size: 10px; font-weight: 700; white-space: nowrap; }
.asset-library-policy i { width: 7px; height: 7px; border-radius: 50%; background: #19a47c; box-shadow: 0 0 0 4px rgba(25,164,124,.1); }
.asset-library-panel { min-height: 480px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.asset-library-toolbar { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 0 8px; border-bottom: 0; }
.asset-filter-group { display: flex; align-items: center; gap: 7px; }
.asset-filter-group button { min-height: 34px; padding: 0 14px; border: 0; border-radius: 8px; color: #59616a; background: transparent; cursor: pointer; font-size: 12px; }
.asset-filter-group button.active { color: #171b20; background: #e8eaed; font-weight: 750; }
.asset-library-toolbar > span { color: #929aa2; font-size: 10px; }
.asset-library-grid { display: block; padding-top: 10px; }
.asset-date-group + .asset-date-group { margin-top: 30px; }
.asset-date-group h2 { margin: 0 0 16px; color: #15191d; font-size: 24px; line-height: 1.2; letter-spacing: -.04em; }
.asset-date-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.library-card { min-width: 0; overflow: hidden; border: 0; border-radius: 7px; background: #eceeef; transition: box-shadow .18s ease; }
.library-card:hover { box-shadow: 0 8px 24px rgba(35,43,52,.1); }
.library-card-preview { position: relative; aspect-ratio: 16 / 9; display: grid; place-items: center; overflow: hidden; background: #eceeef; cursor: pointer; }
.library-card-preview img,
.library-card-preview video { display: block; max-width: 100%; max-height: 100%; object-fit: contain; background: #eceeef; }
.library-card-preview:not(.is-portrait, .is-square, .is-landscape) img,
.library-card-preview:not(.is-portrait, .is-square, .is-landscape) video,
.library-card-preview.is-landscape img,
.library-card-preview.is-landscape video { width: 100%; height: 100%; }
.library-card-preview.is-portrait img,
.library-card-preview.is-portrait video,
.library-card-preview.is-square img,
.library-card-preview.is-square video { width: var(--preview-media-width, 31.640625%) !important; height: 100% !important; max-width: 100%; max-height: 100%; object-fit: contain; }
.library-audio-preview { width: 100%; height: 100%; display: grid; place-items: center; align-content: center; gap: 8px; color: #536986; background: linear-gradient(145deg, #edf3fb, #d9e4f1); }
.library-audio-preview i { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 15px; color: white; background: #7087a9; font-style: normal; font-size: 21px; }
.library-audio-preview audio { width: calc(100% - 24px); height: 28px; }
.library-card-preview span { position: absolute; left: 9px; bottom: 9px; padding: 4px 7px; border-radius: 5px; color: white; background: rgba(22,25,29,.66); backdrop-filter: blur(5px); font-size: 10px; }
.library-card-preview .asset-delete { position: absolute; top: 9px; right: 9px; width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 8px; color: #fff; background: rgba(22,25,29,.7); opacity: 0; cursor: pointer; font-size: 17px; transition: opacity .18s ease; backdrop-filter: blur(5px); }
.library-card:hover .asset-delete { opacity: 1; }
.library-audio-preview { cursor: default; }
.asset-library-empty { min-height: 520px; display: grid; place-items: center; align-content: center; color: #929aa2; text-align: center; }
.asset-library-empty i { width: 58px; height: 58px; display: grid; place-items: center; border: 1px dashed #cfd5da; border-radius: 17px; color: #b0b7be; font-style: normal; font-size: 25px; }
.asset-library-empty strong { margin-top: 15px; color: #626970; font-size: 12px; }
.asset-library-empty p { max-width: 340px; margin: 7px 0 0; font-size: 10px; line-height: 1.7; }

.reference-image-preview {
  position: fixed;
  z-index: 110;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 40px;
  background: rgba(15, 20, 29, .82);
  backdrop-filter: blur(7px);
}
.reference-image-preview figure { max-width: min(1120px, calc(100vw - 80px)); max-height: calc(100vh - 80px); margin: 0; display: grid; gap: 10px; place-items: center; }
.reference-image-preview img { display: block; max-width: 100%; max-height: calc(100vh - 116px); border-radius: 14px; object-fit: contain; background: #fff; box-shadow: 0 22px 70px rgba(0,0,0,.38); }
.reference-image-preview figcaption { color: rgba(255,255,255,.88); font-size: 12px; font-weight: 700; }
.reference-image-preview-close { position: fixed; top: 24px; right: 28px; width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; color: #fff; background: rgba(255,255,255,.12); cursor: pointer; font-size: 25px; line-height: 1; }
.reference-image-preview-close:hover { background: rgba(255,255,255,.22); }
body.reference-image-preview-open { overflow: hidden; }

.asset-preview-backdrop { position: fixed; z-index: 92; inset: 0 0 0 76px; background: #f4f5f7; }
.asset-preview-modal { position: fixed; z-index: 93; inset: 0 0 0 76px; width: calc(100vw - 76px); height: 100vh; overflow: hidden; color: #20262d; background: #fff; animation: asset-preview-in .2s ease both; }
@keyframes asset-preview-in { from { opacity: 0; } to { opacity: 1; } }
.asset-detail-layout { width: 100%; height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) clamp(390px, 23vw, 442px); }
.asset-detail-media { min-width: 0; min-height: 0; background: #f4f5f7; }
.asset-preview-stage { width: 100%; height: 100%; min-height: 0; display: grid; place-items: center; box-sizing: border-box; overflow: hidden; padding: 20px 78px 20px 20px; background: #f4f5f7; }
.asset-preview-stage > img,
.asset-preview-stage > video { width: auto; height: auto; max-width: 100%; max-height: calc(100vh - 40px); border-radius: 14px; object-fit: contain !important; background: #111; box-shadow: 0 10px 32px rgba(25,31,37,.14); }
.asset-preview-stage.portrait > video,
.asset-preview-stage.square > video { width: auto; height: calc(100vh - 40px); }
.asset-preview-stage.landscape > video { width: 100%; height: auto; }
.asset-preview-stage > img { width: 100%; height: 100%; max-width: 100%; max-height: 100%; border-radius: 14px; object-fit: contain; box-shadow: 0 10px 32px rgba(25,31,37,.14); }
.asset-preview-audio { width: min(560px, calc(100% - 40px)); display: grid; place-items: center; gap: 16px; padding: 36px; border-radius: 18px; color: #27313b; background: linear-gradient(145deg, #eef4fb, #d8e4f0); }
.asset-preview-audio i { width: 72px; height: 72px; display: grid; place-items: center; border-radius: 21px; color: #fff; background: #7188aa; font-style: normal; font-size: 30px; }
.asset-preview-audio strong { max-width: 100%; overflow: hidden; font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
.asset-preview-audio audio { width: 100%; }
.asset-detail-sidebar { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; border-left: 1px solid #e7e9eb; background: #fff; }
.asset-detail-toolbar { position: relative; min-height: 89px; display: flex; align-items: flex-start; justify-content: flex-start; gap: 12px; padding: 28px 38px 20px; border-bottom: 1px solid #eceef0; }
.asset-detail-toolbar button { min-height: 40px; border: 1px solid #e0e4e7; border-radius: 11px; cursor: pointer; font-size: 11px; font-weight: 750; }
.asset-detail-close { position: absolute; top: 28px; left: -60px; width: 40px; padding: 0; color: #4f5860; background: #f6f7f8; font-size: 23px !important; font-weight: 400 !important; }
.asset-detail-scroll { min-height: 0; padding: 24px 38px 12px; overflow-y: auto; }
.asset-detail-summary { display: block; }
.asset-detail-summary > span { color: #109bce; font-size: 8px; font-weight: 800; letter-spacing: .16em; }
.asset-detail-summary h2 { margin: 7px 0 6px; color: #1d252c; font-size: 19px; letter-spacing: -.02em; }
.asset-detail-summary p { margin: 0; color: #8c959d; font-size: 10px; line-height: 1.6; }
.asset-retention-card { margin-top: 18px; padding: 13px 15px; border: 1px solid #dce9ef; border-radius: 12px; background: #f5fbfe; }
.asset-retention-card > div { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.asset-retention-card small { color: #71808a; font-size: 10px; }
.asset-retention-card strong { color: #0a84b2; font-size: 11px; }
.asset-retention-card p { margin: 5px 0 0; color: #7e8a92; font-size: 9px; line-height: 1.55; }
.asset-record-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 22px; margin-top: 22px; padding: 0 0 22px; border-bottom: 1px solid #eceef0; }
.asset-record-grid > div { min-width: 0; }
.asset-record-grid small { display: block; margin-bottom: 5px; color: #929aa1; font-size: 9px; }
.asset-record-grid strong { display: block; overflow: hidden; color: #273039; font-size: 11px; line-height: 1.45; white-space: nowrap; text-overflow: ellipsis; }
.asset-prompt-panel { min-height: 0; padding: 20px 0 8px; overflow: visible; }
.asset-prompt-panel h3 { margin: 0 0 12px; color: #747d85; font-size: 10px; font-weight: 600; }
.asset-prompt-panel p { min-height: 90px; margin: 0; color: #1f252b; font-size: 12px; line-height: 1.85; white-space: pre-wrap; overflow-wrap: anywhere; }
.asset-prompt-panel p.is-empty { color: #9aa2a9; }
.asset-detail-footer { display: flex; gap: 9px; padding: 16px 38px 20px; border-top: 1px solid #eceef0; }
.asset-detail-footer button { min-height: 42px; flex: 1; padding: 0 14px; border: 1px solid #dce2e6; border-radius: 11px; cursor: pointer; font-size: 10px; font-weight: 750; }
.asset-preview-fullscreen { color: #166f98; border-color: #c6e6f2 !important; background: #eefaff; }
.asset-preview-edit { color: #fff; border-color: #5d52e8 !important; background: #6257ef; }
.asset-preview-use { color: #267552; border-color: #cde7db !important; background: #eef9f4; }
.asset-preview-download { min-width: 81px; padding: 0 15px; color: #171b20; border-color: #e0e4e7 !important; background: #f5f6f7; }
.asset-preview-favorite { min-width: 116px; padding: 0 15px; color: #8b6512; border-color: #ead9aa !important; background: #fffaf0; }
.asset-preview-favorite.is-favorite { color: #fff; border-color: #d79a1d !important; background: #d79a1d; }
.library-card-preview { position: relative; }
.library-favorite-mark { position: absolute; top: 10px; left: 10px; width: 27px; height: 27px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.72); border-radius: 50%; color: #8b5d00; background: rgba(255,247,221,.94); box-shadow: 0 4px 14px rgba(83,59,9,.18); font-size: 13px; font-style: normal; }
.asset-hit-zone { margin-bottom: 34px; padding: 20px; border: 1px solid #eadcad; border-radius: 18px; background: linear-gradient(135deg, rgba(255,250,235,.94), rgba(255,255,255,.78)); box-shadow: 0 10px 28px rgba(105,78,19,.07); }
.asset-hit-zone > h2 { display: flex; align-items: center; gap: 8px; color: #76530d; }
.asset-hit-zone > h2 > span { width: 28px; height: 28px; display: inline-grid; place-items: center; border-radius: 50%; color: #fff; background: #d79a1d; font-size: 13px; box-shadow: 0 5px 14px rgba(215,154,29,.23); }
.asset-hit-zone > h2 > small { margin-left: auto; color: #9a8150; font-size: 10px; font-weight: 600; }
body.asset-preview-open { overflow: hidden; }

.task-history-button {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 13px;
  border: 1px solid #dce2dd;
  border-radius: 12px;
  color: #273229;
  background: #fff;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
}
.task-history-button:hover { border-color: #91b9d0; color: #087da9; background: #f2fbff; }
.task-history-button b { min-width: 19px; height: 19px; display: grid; place-items: center; padding: 0 5px; border-radius: 999px; color: #fff; background: #13a6df; font-size: 9px; }
body.task-history-open { overflow: hidden; }
.task-history-backdrop { position: fixed; z-index: 89; inset: 0; background: rgba(23,29,36,.28); backdrop-filter: blur(2px); }
.task-history-panel {
  position: fixed;
  z-index: 90;
  top: 0;
  right: 0;
  width: min(640px, calc(100vw - 80px));
  height: 100vh;
  overflow-y: auto;
  color: #20262d;
  background: #f5f7f9;
  box-shadow: -24px 0 70px rgba(28,36,45,.2);
  animation: task-history-in .22s ease both;
}
@keyframes task-history-in { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
.task-history-header { position: sticky; z-index: 3; top: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 22px; padding: 28px 30px 22px; border-bottom: 1px solid #e4e8eb; background: rgba(255,255,255,.94); backdrop-filter: blur(16px); }
.task-history-header > div > span { color: #0b9ed5; font-size: 8px; font-weight: 850; letter-spacing: .18em; }
.task-history-header h2 { margin: 5px 0 5px; font-size: 25px; letter-spacing: -.04em; }
.task-history-header p { margin: 0; color: #858f98; font-size: 10px; }
.task-history-header button { width: 36px; height: 36px; display: grid; place-items: center; flex: 0 0 36px; border: 1px solid #e0e4e7; border-radius: 11px; color: #5f6870; background: #f7f8f9; cursor: pointer; font-size: 21px; }
.task-history-header button:hover { color: #11161b; background: #eceff1; }
.task-history-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; padding: 18px 30px 4px; }
.task-history-summary span { padding: 12px 14px; border: 1px solid #e2e6e9; border-radius: 13px; background: #fff; }
.task-history-summary b,
.task-history-summary small { display: block; }
.task-history-summary b { color: #20262c; font-size: 18px; }
.task-history-summary small { margin-top: 2px; color: #929ba3; font-size: 9px; }
.task-history-list { display: grid; gap: 13px; padding: 15px 30px 35px; }
.task-job-card { overflow: hidden; padding: 16px; border: 1px solid #e0e5e8; border-radius: 17px; background: #fff; box-shadow: 0 8px 24px rgba(35,44,53,.05); }
.task-job-card > header { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.task-job-card time { color: #8c969f; font-size: 9px; }
.task-job-card > header span { padding: 5px 8px; border-radius: 7px; color: #147da4; background: #eaf8fd; font-size: 9px; font-weight: 750; }
.task-job-card.completed > header span { color: #25754e; background: #e9f7ef; }
.task-job-card.failed > header span { color: #a64747; background: #fdeeee; }
.task-job-spec { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 11px; }
.task-job-spec b { margin-right: 3px; color: #252b31; font-size: 11px; }
.task-job-spec span { padding: 3px 7px; border-radius: 6px; color: #717b84; background: #f0f2f4; font-size: 8px; }
.task-job-spec .task-job-cost.ready { color: #23734c; background: #e8f7ef; font-weight: 750; }
.task-job-spec .task-job-cost.pending { color: #8a6b27; background: #fff6df; }
.task-job-prompt { margin-top: 13px; padding: 11px 12px; border-radius: 11px; background: #f7f8f9; }
.task-job-prompt-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.task-job-prompt small { color: #0a91c3; font-size: 8px; font-weight: 750; }
.task-job-prompt p { max-height: 104px; margin: 5px 0 0; overflow-y: auto; color: #394149; font-size: 10px; line-height: 1.65; white-space: pre-wrap; }
.task-job-card:not(.prompt-expanded) .task-job-prompt p { display: -webkit-box; max-height: 50px; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.task-job-card.prompt-expanded .task-job-prompt p { max-height: none; overflow-y: visible; }
.task-job-progress { height: 5px; margin-top: 13px; overflow: hidden; border-radius: 999px; background: #e9eef1; }
.task-job-progress i { display: block; height: 100%; min-width: 6%; border-radius: inherit; background: linear-gradient(90deg, #13a6df, #74d7e8); transition: width .3s ease; }
.task-job-error { margin: 12px 0 0; padding: 9px 10px; border-radius: 9px; color: #9b4646; background: #fff0f0; font-size: 9px; }
.task-job-result { position: relative; margin-top: 13px; overflow: hidden; border-radius: 12px; background: #e6e9ec; }
.task-job-result video { width: 100%; max-height: 330px; background: #15191d; object-fit: contain; }
.task-job-result img { width: 100%; max-height: 420px; display: block; background: #eceff1; object-fit: contain; }
.task-job-card > footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.task-job-card > footer button { padding: 7px 10px; border: 1px solid #dfe4e7; border-radius: 8px; color: #4b555e; background: #fafbfc; cursor: pointer; font-size: 9px; }
.task-job-card > footer button:hover { color: #087da9; border-color: #bfe4f1; background: #effaff; }
.task-job-card > footer small { color: #98a1a9; font-size: 8px; }
.task-job-actions { display: flex; align-items: center; gap: 7px; margin-left: auto; }
.task-job-actions a,
.task-job-actions button { min-width: 58px; padding: 7px 10px; border: 1px solid #dfe4e7; border-radius: 8px; color: #4b555e; background: #fafbfc; cursor: pointer; font-size: 9px; text-align: center; }
.task-job-actions a:hover { color: #087da9; border-color: #bfe4f1; background: #effaff; }
.generation-download { gap: 6px; }
.generation-download-mark { width: 16px; height: 16px; display: inline-grid; place-items: center; border-radius: 50%; color: #fff; background: #22a77a; box-shadow: 0 0 0 3px rgba(34,167,122,.11); font-size: 10px; font-style: normal; font-weight: 850; line-height: 1; }
.generation-download.is-downloaded { color: #18775a; border-color: #bfe7d8; background: #f2fbf7; }
.generation-download.is-downloaded:hover { color: #126b50; border-color: #9ed8c3; background: #eaf8f2; }
.task-job-actions button:last-child { color: #fff; border-color: #171c20; background: #171c20; }
.task-job-actions button:last-child:hover { color: #fff; border-color: #008fca; background: #008fca; }
.task-history-empty { min-height: 55vh; display: grid; place-items: center; align-content: center; color: #97a0a8; text-align: center; }
.task-history-empty i { width: 54px; height: 54px; display: grid; place-items: center; border: 1px dashed #cbd2d7; border-radius: 16px; font-style: normal; font-size: 24px; }
.task-history-empty strong { margin-top: 14px; color: #5f6870; font-size: 12px; }
.task-history-empty p { margin: 5px 0 0; font-size: 9px; }
.toast-region { z-index: 100; }

body.confirm-choice-open { overflow: hidden; }
.confirm-choice-backdrop {
  position: fixed;
  z-index: 140;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(20,25,31,.38);
  backdrop-filter: blur(7px);
  animation: confirm-choice-fade .16s ease both;
}
.confirm-choice-dialog {
  width: min(430px, 100%);
  display: grid;
  grid-template-columns: 50px minmax(0,1fr);
  gap: 0 16px;
  padding: 25px;
  border: 1px solid rgba(255,255,255,.75);
  border-radius: 21px;
  background: #fff;
  box-shadow: 0 30px 90px rgba(20,27,34,.26);
  animation: confirm-choice-in .2s cubic-bezier(.2,.75,.25,1) both;
}
.confirm-choice-icon { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 15px; color: #c83f3f; background: #fff0f0; font-size: 22px; font-weight: 850; }
.confirm-choice-copy { min-width: 0; }
.confirm-choice-copy > span { color: #c45151; font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.confirm-choice-copy h2 { margin: 5px 0 7px; color: #20262c; font-size: 19px; line-height: 1.35; letter-spacing: -.025em; overflow-wrap: anywhere; }
.confirm-choice-copy p { margin: 0; color: #626d76; font-size: 11px; line-height: 1.7; }
.confirm-choice-copy small { display: block; margin-top: 7px; color: #929ba3; font-size: 9px; line-height: 1.65; }
.confirm-choice-actions { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 23px; }
.confirm-choice-actions button { min-height: 43px; border: 1px solid #dfe3e6; border-radius: 12px; color: #3d464e; background: #f6f8f9; cursor: pointer; font-size: 11px; font-weight: 750; transition: transform .16s ease, border-color .16s ease, background .16s ease; }
.confirm-choice-actions button:hover { transform: translateY(-1px); border-color: #cbd2d7; background: #eef1f3; }
.confirm-choice-actions #confirmChoiceYes { color: #fff; border-color: #d64b4b; background: #d64b4b; }
.confirm-choice-actions #confirmChoiceYes:hover { border-color: #be3939; background: #be3939; }
@keyframes confirm-choice-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes confirm-choice-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }

@media (max-width: 1500px) {
  .asset-date-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 1200px) {
  .asset-date-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1040px) {
  .direct-studio { width: calc(100% - 112px); margin-left: 94px; padding: 104px 0 76px; }
  .generation-session-sidebar { position: static; width: 100%; max-height: none; overflow: visible; padding: 12px; border: 1px solid #e4e7ea; border-radius: 16px; background: #fafbfc; }
  .generation-session-sidebar > p { margin: 14px 5px 7px; }
  .generation-session-list { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
  .generation-session-item { flex: 0 0 210px; }
  .generation-session-main { width: 100%; margin: 0; padding: 28px 0 0; }
  .generation-session-grid { grid-template-columns: minmax(0, 1fr); }
  .generation-entry-main { grid-template-columns: minmax(0, 55%) minmax(280px, 45%); }
  .asset-library-view { width: calc(100% - 126px); margin-left: 94px; padding-top: 20px; }
  .feature-strip { grid-template-columns: repeat(2, 1fr); }
  .inspiration-grid { grid-template-columns: repeat(2, 1fr); gap: 4px; }
}

@media (max-width: 680px) {
  .announcement-bar { height: 28px; padding: 0 12px; justify-content: flex-start; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .topbar { top: 28px; height: 52px; padding: 0 12px; }
  .topbar-meta { margin-left: auto; }
  .task-history-button { display: none; }
  .task-history-button span { font-size: 0; }
  .task-history-button span::after { content: "任务"; font-size: 10px; }
  .task-history-panel { width: 100vw; }
  .confirm-choice-backdrop { padding: 16px; }
  .confirm-choice-dialog { grid-template-columns: 44px minmax(0,1fr); gap: 0 13px; padding: 20px; border-radius: 18px; }
  .confirm-choice-icon { width: 44px; height: 44px; border-radius: 13px; }
  .confirm-choice-copy h2 { font-size: 17px; }
  .task-history-header { padding: 20px 16px 17px; }
  .task-history-header h2 { font-size: 22px; }
  .task-history-summary { padding: 14px 14px 3px; }
  .task-history-list { padding: 12px 14px 80px; }
  .task-job-card { padding: 14px; }
  .app-sidebar { position: fixed; inset: auto 0 0; width: auto; height: 58px; flex-direction: row; justify-content: center; padding: 5px 10px; border-top: 1px solid #e3e5e8; border-right: 0; }
  body.asset-library-open .app-sidebar { inset: auto 0 0; }
  .side-brand, .side-bottom { display: none; }
  .app-sidebar nav { display: flex; justify-content: space-around; gap: 4px; }
  .side-nav-item { width: 70px; padding: 4px 0; }
  .side-nav-item i { font-size: 18px; }
  .direct-studio { width: calc(100% - 20px); margin: 0 auto; padding: 92px 0 90px; }
  .generation-session-sidebar { padding: 10px; border-radius: 14px; }
  .generation-session-sidebar-head { padding-bottom: 10px; }
  .new-generation-session { min-height: 40px; }
  .generation-session-item { flex-basis: 178px; }
  .generation-session-select { grid-template-columns: 38px minmax(0,1fr) auto; }
  .generation-session-cover { width: 38px; height: 38px; }
  .generation-session-main { padding-top: 22px; }
  .generation-session-history > header h1 { font-size: 22px; }
  .generation-session-record { padding: 13px; }
  .generation-session-record .task-job-result { min-height: 190px; }
  .generation-session-grid { grid-template-columns: 1fr; gap: 14px; }
  .generation-entry-main { grid-template-columns: 1fr; }
  .generation-entry-summary { min-height: 240px; padding: 15px 14px 13px; border-top: 1px solid #e8ebed; border-left: 0; }
  .generation-entry-copy > p { max-height: 180px; }
  .direct-submission-stage { min-height: 170px; padding: 20px 14px; }
  .direct-submission-stage > p { align-items: flex-start; flex-direction: column; gap: 5px; }
  .direct-submission-card > footer { align-items: flex-start; flex-direction: column; }
  .direct-submission-card > footer > span { margin-left: 0; }
  .has-session-history .direct-layout { bottom: 66px; }
  .asset-library-view { width: calc(100% - 20px); margin: 0 auto; padding: 14px 0 90px; }
  .asset-library-hero { align-items: center; margin-bottom: 8px; }
  .asset-view-tabs span { display: none; }
  .asset-upload-button { justify-content: center; }
  .asset-library-panel { min-height: 380px; }
  .asset-date-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .asset-date-group h2 { margin-bottom: 10px; font-size: 20px; }
  .asset-hit-zone { margin-inline: -2px; padding: 12px; border-radius: 15px; }
  .asset-hit-zone > h2 > small { display: none; }
  .asset-library-empty { min-height: 300px; }
  .library-card-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .library-card-actions .asset-delete { grid-column: 1 / -1; min-height: 28px; }
  .reference-image-preview { padding: 18px; }
  .reference-image-preview figure { max-width: calc(100vw - 36px); max-height: calc(100vh - 36px); }
  .reference-image-preview img { max-height: calc(100vh - 72px); }
  .reference-image-preview-close { top: 12px; right: 12px; }
  .asset-preview-backdrop { inset: 0; }
  .asset-preview-modal { inset: 0; width: 100vw; height: 100vh; }
  .asset-detail-layout { grid-template-columns: 1fr; grid-template-rows: minmax(300px, 58vh) minmax(0, 1fr); }
  .asset-preview-stage { height: 100%; padding: 18px; }
  .asset-preview-stage > video { max-height: calc(58vh - 36px); }
  .asset-preview-stage.portrait > video,
  .asset-preview-stage.square > video { height: calc(58vh - 36px); }
  .asset-detail-sidebar { grid-template-rows: auto minmax(0, 1fr) auto; border-top: 1px solid #e7e9eb; border-left: 0; }
  .asset-detail-toolbar { padding: 10px 14px; }
  .asset-detail-toolbar button { min-height: 36px; }
  .asset-detail-close { width: 36px; }
  .asset-detail-scroll { padding: 14px; }
  .asset-prompt-panel { padding: 16px 0 6px; }
  .asset-prompt-panel p { font-size: 11px; line-height: 1.7; }
  .asset-detail-footer { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 10px 14px 14px; }
  .asset-preview-edit { grid-column: 1 / -1; }
  .direct-hero { margin-bottom: 22px; }
  .direct-hero h1 { max-width: 360px; margin-inline: auto; font-size: 25px; line-height: 1.25; text-wrap: balance; }
  .direct-hero p { font-size: 10px; }
  .direct-composer-card { min-height: 485px; padding: 14px; border-radius: 19px; }
  #directPrompt { min-height: 190px; }
  .direct-count { top: auto; right: auto; }
  .direct-assets.has-assets { overflow-x: auto; overflow-y: hidden; }
  .direct-asset-stack { min-width: max-content; padding-left: 3px; }
  .direct-asset-card { margin-left: -32px; }
  .direct-asset-card:first-child { margin-left: 0; }
  .direct-add-card { margin-left: -26px; }
  .direct-asset-drop-copy { display: none; }
  .direct-upload-empty { justify-content: flex-start; }
  .direct-upload-empty small { line-height: 1.55; }
  .direct-toolbar { flex-direction: column; align-items: stretch; }
  .direct-submit-cluster { width: 100%; flex-direction: column; align-items: stretch; }
  .direct-price-estimate { width: 100%; justify-items: center; align-items: center; justify-content: center; }
  .member-saving-popover { right: 50%; transform: translateX(50%); }
  .member-saving-popover::after { right: 50%; margin-right: -5px; }
  .direct-generate { width: 100%; height: 44px; display: flex; justify-content: space-between; padding-left: 15px; color: white; background: #00a7e8; border-radius: 11px; }
  .direct-generate span { display: block; }
  .direct-generate b { width: 34px; height: 34px; background: rgba(255,255,255,.18); }
  .model-menu { bottom: 66px; }
  .image-spec-menu { position: fixed; right: 11px; bottom: 68px; left: 11px; width: auto; max-height: 70vh; overflow-y: auto; padding: 13px; }
  .image-ratio-options { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .reference-menu { position: fixed; right: 11px; bottom: 68px; left: 11px; width: auto; }
  .direct-audio-reference { grid-template-columns: 38px 1fr 28px; }
  .direct-audio-reference audio { grid-column: 1 / -1; }
  .reference-trigger span { display: none; }
  .feature-strip { grid-template-columns: 1fr 1fr; gap: 7px; }
  .feature-strip button { padding: 10px; }
  .feature-strip small { display: none; }
  .feature-icon { flex-basis: 34px; width: 34px; height: 34px; }
  .inspiration-section { margin-top: 52px; }
  .inspiration-head { overflow-x: auto; }
  .inspiration-head > span { display: none; }
  .inspiration-head button { padding-inline: 12px; white-space: nowrap; }
  .inspiration-grid { display: flex; overflow-x: auto; border-radius: 0; }
  .inspiration-card { flex: 0 0 76vw; min-height: 250px; border-radius: 17px; }
}

/* Keep the CMENG identity visible in the main navigation on wide screens. */
.topbar .brand { display: inline-flex; align-items: center; gap: 10px; }
.topbar .brand-logo { width: 42px; height: 42px; filter: drop-shadow(0 4px 9px rgba(91, 72, 235, .25)); }
.topbar .brand strong { color: #1b1d2a; font-size: 16px; letter-spacing: .08em; }
.topbar .brand small { color: #707585; font-size: 9px; letter-spacing: .08em; }
.side-brand { width: 52px; height: 52px; }
.side-brand img { width: 52px; height: 52px; filter: drop-shadow(0 4px 8px rgba(91, 72, 235, .28)); }

@media (max-width: 680px) {
  .topbar .brand-logo { width: 34px; height: 34px; }
  .topbar .brand strong { font-size: 13px; }
  .topbar .brand small { display: none; }
  .side-brand { width: 46px; height: 46px; }
  .side-brand img { width: 46px; height: 46px; }
}

.side-brand { display: none; }
.app-sidebar nav { margin-top: 32px; }