:root {
  --ink: #171713;
  --muted: #706f66;
  --paper: #f2f0e8;
  --card: #fbfaf5;
  --line: #d8d5c9;
  --yellow: #e6ff3f;
  --orange: #ff6b35;
  --blue: #d7e7ff;
}

* { box-sizing: border-box; }
html { background: var(--paper); font-size: 20px; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: "PingFang SC", "Microsoft YaHei", Arial, sans-serif; font-size: 1rem; }
button, input, textarea, select { font: inherit; }
button { color: inherit; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 224px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 24px 18px 20px; background: var(--ink); color: white; display: flex; flex-direction: column; z-index: 10; }
.brand { display: flex; align-items: center; gap: 12px; border: 0; background: none; color: white; text-align: left; cursor: pointer; padding: 0 6px 34px; }
.brand-mark { width: 36px; height: 36px; display: grid; place-items: center; color: var(--ink); background: var(--yellow); border-radius: 3px; font: 800 22px/1 "PingFang SC", "Microsoft YaHei", Arial, sans-serif; transform: rotate(-3deg); }
.brand strong { display: block; font-size: 14px; letter-spacing: .12em; }
.brand small { display: block; margin-top: 3px; color: #92928a; font-size: 9px; letter-spacing: .2em; }
.sidebar nav { display: grid; gap: 4px; }
.nav-item { width: 100%; border: 0; border-radius: 7px; background: transparent; color: #96968e; display: flex; gap: 12px; align-items: center; padding: 12px 11px; text-align: left; cursor: pointer; transition: .18s ease; }
.nav-item:hover { background: #262621; color: white; }
.nav-item.active { background: var(--yellow); color: var(--ink); }
.nav-index { font: 600 10px/1 ui-monospace, monospace; opacity: .65; }
.nav-copy strong, .nav-copy small { display: block; }
.nav-copy strong { font-size: 13px; }
.nav-copy small { margin-top: 2px; font-size: 10px; opacity: .58; }
.sidebar-footer { margin-top: auto; border-top: 1px solid #33332e; padding: 18px 8px 0; display: flex; gap: 10px; align-items: flex-start; }
.sidebar-footer strong, .sidebar-footer small { display: block; }
.sidebar-footer strong { font-size: 11px; }
.sidebar-footer small { color: #7f7f78; font-size: 9px; margin-top: 4px; }
.status-dot { width: 8px; height: 8px; margin-top: 2px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 4px rgba(230,255,63,.1); }
.status-dot.online { background: #71e895; box-shadow: 0 0 0 4px rgba(113,232,149,.12); }

.main-panel { min-width: 0; padding: 0 34px 50px; }
.topbar { min-height: 106px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); gap: 24px; }
.eyebrow, .section-kicker { display: block; color: var(--muted); font: 650 9px/1.2 ui-monospace, monospace; letter-spacing: .16em; text-transform: uppercase; }
.topbar h1 { font: 700 clamp(29px, 3vw, 42px)/1.1 "PingFang SC", "Microsoft YaHei", Arial, sans-serif; margin: 8px 0 0; }
.topbar-actions { display: flex; align-items: center; gap: 12px; }
.date-chip { font: 600 10px/1 ui-monospace, monospace; color: var(--muted); }
.primary-button, .light-button, .submit-button, .ghost-button { border: 0; cursor: pointer; font-weight: 700; transition: transform .15s ease, background .15s ease; }
.primary-button { padding: 11px 15px; background: var(--ink); color: white; border-radius: 4px; font-size: 12px; }
.primary-button:hover, .submit-button:hover { transform: translateY(-1px); background: #303029; }
.light-button { padding: 12px 16px; border-radius: 3px; background: var(--yellow); color: var(--ink); }
.ghost-button { padding: 10px 5px; background: transparent; color: inherit; }

.dashboard-grid { padding-top: 28px; display: grid; grid-template-columns: 1fr 1fr 1.1fr; gap: 14px; }
.hero-card { grid-column: 1 / -1; min-height: 395px; display: grid; grid-template-columns: 1.4fr .8fr; background: var(--ink); color: white; overflow: hidden; border-radius: 10px; }
.hero-copy { padding: clamp(32px, 5vw, 60px); position: relative; }
.hero-copy::after { content: ""; position: absolute; width: 180px; height: 180px; border: 42px solid var(--yellow); border-radius: 50%; right: -100px; bottom: -105px; opacity: .95; }
.hero-copy .section-kicker { color: var(--yellow); }
.hero-copy h2 { max-width: 660px; margin: 22px 0 18px; font: 700 clamp(38px, 5vw, 66px)/1.05 "PingFang SC", "Microsoft YaHei", Arial, sans-serif; letter-spacing: -.03em; }
.hero-copy p { max-width: 590px; color: #b7b7ae; line-height: 1.75; font-size: 13px; }
.hero-actions { display: flex; align-items: center; gap: 24px; margin-top: 28px; }
.hero-actions .ghost-button { color: #b7b7ae; }
.hero-flow { padding: 28px; background: #23231e; border-left: 1px solid #34342e; display: grid; align-content: center; }
.flow-row { position: relative; display: grid; grid-template-columns: 34px 1fr; gap: 10px; padding: 15px 0; border-bottom: 1px solid #3a3a34; }
.flow-row:last-child { border-bottom: 0; }
.flow-row > span { color: var(--yellow); font: 600 10px/1 ui-monospace, monospace; }
.flow-row strong, .flow-row small { display: block; }
.flow-row strong { font-size: 13px; }
.flow-row small { color: #85857e; font-size: 10px; margin-top: 4px; }
.flow-row i { position: absolute; right: 0; bottom: -8px; z-index: 1; background: #23231e; color: #707068; font-style: normal; font-size: 10px; padding: 2px; }
.metric-card { min-height: 168px; border: 1px solid var(--line); background: var(--card); border-radius: 8px; padding: 22px; display: flex; flex-direction: column; }
.metric-card > span { color: var(--muted); font-size: 11px; }
.metric-card strong { margin-top: auto; font: 700 57px/1 "PingFang SC", "Microsoft YaHei", Arial, sans-serif; }
.metric-card small { color: var(--muted); font-size: 10px; margin-top: 7px; }
.accent-metric { background: var(--yellow); border-color: var(--ink); }
.quick-card, .roadmap-card { border: 1px solid var(--line); background: var(--card); border-radius: 8px; padding: 22px; }
.card-heading h3, .roadmap-card h3 { margin: 8px 0 0; font: 700 25px/1.25 "PingFang SC", "Microsoft YaHei", Arial, sans-serif; }
.quick-actions { display: grid; gap: 8px; margin-top: 20px; }
.quick-actions button { display: grid; grid-template-columns: 34px 1fr; border: 1px solid var(--line); background: white; padding: 12px; text-align: left; border-radius: 5px; cursor: pointer; }
.quick-actions button:hover { border-color: var(--ink); }
.quick-actions strong, .quick-actions small { grid-column: 2; }
.quick-actions strong { font-size: 12px; }
.quick-actions small { color: var(--muted); font-size: 9px; margin-top: 3px; }
.quick-icon { grid-row: 1 / 3; width: 28px; height: 28px; display: grid; place-items: center; background: var(--yellow); border-radius: 50%; font-weight: 700; }
.quick-icon.dark { background: var(--ink); color: white; }
.roadmap-card ul { list-style: none; margin: 18px 0 0; padding: 0; }
.roadmap-card li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 11px; }
.roadmap-card em { color: var(--muted); font-style: normal; font-size: 9px; }

.library-layout { padding-top: 26px; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr); gap: 16px; }
.toolbar-row { display: flex; justify-content: space-between; gap: 14px; align-items: center; margin-bottom: 18px; }
.segmented { display: flex; padding: 3px; background: #e6e3d9; border-radius: 5px; }
.segmented button { border: 0; background: transparent; padding: 8px 12px; border-radius: 3px; color: var(--muted); font-size: 10px; cursor: pointer; }
.segmented button.active { background: var(--card); color: var(--ink); box-shadow: 0 1px 4px rgba(0,0,0,.07); }
.character-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.character-card, .add-card { border: 1px solid var(--line); background: var(--card); border-radius: 7px; overflow: hidden; padding: 0; text-align: left; min-height: 285px; }
.character-card.selected { border-color: var(--ink); box-shadow: 0 0 0 2px var(--yellow); }
.character-image { height: 205px; background: #ddd9cf; position: relative; overflow: hidden; }
.character-image img { width: 100%; height: 100%; object-fit: contain; object-position: center; background: #e5e1d8; filter: saturate(.86); }
.character-image-preview { display: block; width: 100%; padding: 0; border: 0; cursor: zoom-in; }
.character-image em { position: absolute; top: 9px; right: 9px; padding: 5px 7px; background: rgba(23,23,19,.82); color: white; border-radius: 3px; font: 600 8px/1 ui-monospace, monospace; font-style: normal; }
.character-meta { padding: 13px; }
.character-select { display: block; width: 100%; border: 0; background: transparent; text-align: left; cursor: pointer; }
.character-meta span, .character-meta strong, .character-meta small { display: block; }
.character-meta span { color: var(--orange); font-size: 8px; font-weight: 700; letter-spacing: .1em; }
.character-meta strong { margin-top: 5px; font: 700 17px/1.2 "PingFang SC", "Microsoft YaHei", Arial, sans-serif; }
.character-meta small { color: var(--muted); font: 500 8px/1 ui-monospace, monospace; margin-top: 5px; }
.character-meta b { display: block; margin-top: 11px; color: var(--orange); font-size: 9px; }
.add-card { min-height: 285px; display: flex; flex-direction: column; justify-content: center; align-items: center; border-style: dashed; color: var(--muted); }
.add-card:hover { color: var(--ink); border-color: var(--ink); }
.add-card span { font-size: 30px; font-weight: 200; }
.add-card strong { margin-top: 8px; font-size: 12px; }
.add-card small { margin-top: 5px; font-size: 9px; }
.identity-panel { align-self: start; position: sticky; top: 20px; padding: 24px; background: var(--ink); color: white; border-radius: 8px; }
.identity-title, .detail-heading { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.identity-title .section-kicker { color: #77776f; }
.identity-title h2, .detail-heading h2 { margin: 8px 0 0; font: 700 27px/1.1 "PingFang SC", "Microsoft YaHei", Arial, sans-serif; }
.status-badge { padding: 6px 8px; background: var(--yellow); color: var(--ink); border-radius: 3px; font: 700 8px/1 ui-monospace, monospace; white-space: nowrap; }
.prompt-block { margin-top: 20px; border-top: 1px solid #373730; padding-top: 16px; }
.prompt-block > div { display: flex; justify-content: space-between; align-items: center; }
.prompt-block span { color: #8f8f87; font-size: 9px; }
.prompt-block button { border: 0; background: none; color: var(--yellow); font-size: 9px; cursor: pointer; }
.prompt-block p { color: #c9c9c0; font-size: 10px; line-height: 1.75; margin: 10px 0 0; }
.trait-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.trait-pair div { padding: 13px; background: #24241f; border-radius: 4px; }
.trait-pair span { color: var(--yellow); font-size: 8px; font-weight: 700; }
.trait-pair p { color: #aaa9a1; font-size: 9px; line-height: 1.6; margin: 7px 0 0; }
.identity-note { margin-top: 18px; padding: 14px; background: var(--yellow); color: var(--ink); border-radius: 4px; }
.identity-note span { font-weight: 800; font-size: 10px; }
.identity-note p { margin: 5px 0 0; font-size: 9px; line-height: 1.5; }
.character-shelf { min-height: 520px; }
.character-folder { display: grid; gap: 22px; }
.folder-header { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: end; padding: 22px 24px; border: 1px solid var(--line); border-radius: 9px; background: linear-gradient(135deg, #f7f5ed 0%, #ece8dc 100%); }
.folder-header .section-kicker { grid-column: 2; margin-bottom: -8px; }
.folder-header h2 { margin: 0; font: 700 34px/1.08 "PingFang SC", "Microsoft YaHei", sans-serif; }
.folder-header p { margin: 6px 0 0; color: var(--muted); font-size: 10px; }
.back-button { align-self: center; padding: 8px 0; border: 0; background: transparent; color: var(--ink); font-size: 11px; cursor: pointer; }
.master-asset-section, .folder-prompt-panel, .folder-rules { padding: 22px; border: 1px solid var(--line); border-radius: 9px; background: var(--card); }
.folder-section-heading { display: flex; justify-content: space-between; align-items: start; gap: 18px; }
.folder-section-heading h3 { margin: 6px 0 0; font: 700 23px/1.1 "PingFang SC", "Microsoft YaHei", sans-serif; }
.folder-section-heading p { margin: 6px 0 0; color: var(--muted); font-size: 10px; }
.folder-section-heading > span { color: var(--muted); font-size: 10px; }
.master-asset-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.master-asset { display: grid; gap: 7px; padding: 0 0 10px; overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: #f7f5ed; text-align: left; cursor: zoom-in; }
.master-asset img { width: 100%; height: 240px; object-fit: contain; object-position: center; background: #e5e1d8; }
.master-asset span, .master-asset small { margin: 0 10px; }
.master-asset span { font-size: 10px; font-weight: 700; }
.master-asset small { color: var(--muted); font-size: 8px; }
.master-asset.empty { min-height: 240px; place-content: center; justify-items: center; border-style: dashed; color: var(--muted); cursor: pointer; }
.master-asset.empty strong { font-size: 26px; font-weight: 300; }
.folder-details { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(260px, .75fr); gap: 18px; align-items: start; }
.folder-rules { display: grid; gap: 16px; }
.folder-rules > div > span { color: var(--orange); font-size: 9px; font-weight: 700; letter-spacing: .08em; }
.folder-rules p { margin: 6px 0 0; color: var(--muted); font-size: 11px; line-height: 1.65; }
.folder-rules .calibration-panel { margin: 0; padding-top: 16px; border-top: 1px solid var(--line); }

.task-builder { padding-top: 26px; }
.mode-section { margin-bottom: 22px; }
.mode-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.mode-card { position: relative; min-height: 122px; border: 1px solid var(--line); background: var(--card); border-radius: 6px; padding: 17px; text-align: left; }
.mode-card.active { background: var(--ink); color: white; border-color: var(--ink); }
.mode-card:disabled { opacity: .56; }
.mode-card > span { color: var(--muted); font: 600 9px/1 ui-monospace, monospace; }
.mode-card.active > span { color: var(--yellow); }
.mode-card strong, .mode-card p { display: block; }
.mode-card strong { margin-top: 18px; font-size: 13px; }
.mode-card p { color: var(--muted); font-size: 9px; margin: 6px 0 0; }
.mode-card.active p { color: #96968e; }
.mode-card em { position: absolute; top: 14px; right: 14px; font: 700 8px/1 ui-monospace, monospace; font-style: normal; color: var(--orange); }
.mode-card.active em { color: var(--yellow); }
.task-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; max-width: 920px; }
.form-main, .form-side { border: 1px solid var(--line); background: var(--card); border-radius: 7px; padding: 24px; }
.form-side { position: static; }
.more-creation-options { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-top: 12px; color: var(--muted); font-size: 11px; }
.more-creation-options summary { cursor: pointer; color: var(--muted); font-weight: 700; }
.more-creation-options[open] summary { color: var(--ink); }
.more-creation-options small { color: var(--muted); font-size: 10px; }
.text-button { border: 0; border-bottom: 1px solid var(--line); padding: 4px 0; color: var(--muted); background: transparent; font: 600 11px/1.35 "PingFang SC", "Microsoft YaHei", Arial, sans-serif; cursor: pointer; }
.text-button:hover, .text-button.active { color: var(--ink); border-color: var(--ink); }
.product-mode-notice { margin-top: 18px; padding: 16px 18px; border-left: 4px solid var(--yellow); background: var(--paper); }
.product-mode-notice strong { display: block; margin-top: 6px; font-size: 16px; }
.product-mode-notice p { max-width: 66ch; margin: 7px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.segment-visual-control { display: grid; gap: 12px; margin-top: 16px; padding: 15px; border: 1px solid #d5d0b4; border-radius: 5px; background: #fffdf2; }
.segment-visual-control strong { display: block; margin-top: 5px; font-size: 12px; }
.segment-visual-control p { margin: 5px 0 0; color: var(--muted); font-size: 9px; line-height: 1.55; }
.segment-visual-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.segment-visual-switch button { padding: 9px 10px; border: 1px solid var(--line); border-radius: 4px; background: white; font-size: 10px; }
.segment-visual-switch button.selected { border-color: var(--ink); background: var(--ink); color: white; }
.broll-options { display: grid; gap: 7px; padding-top: 4px; }
.broll-file-state { color: #9b4e40; font-size: 9px; line-height: 1.45; }
.broll-file-state.ready { color: #547746; }
.local-tts-card { display: grid; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 4px; background: var(--card); }
.local-tts-card > div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.local-tts-card span { color: var(--muted); font: 700 8px/1 ui-monospace, monospace; }
.local-tts-card strong { font-size: 9px; text-align: right; }
.local-tts-card small { color: var(--muted); font-size: 9px; line-height: 1.45; }
.local-tts-card video { width: 100%; max-height: 170px; background: var(--ink); border-radius: 3px; }
.local-tts-card .light-button { justify-self: start; padding: 8px 10px; font-size: 9px; }
.three-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.three-fields label > span { margin-top: 4px; }
.advanced-settings { margin-top: 20px; border-top: 1px solid var(--line); }
.advanced-settings summary { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 17px 0; color: var(--ink); font-size: 13px; font-weight: 700; cursor: pointer; }
.advanced-settings summary small { color: var(--muted); font-size: 10px; font-weight: 400; }
.advanced-settings[open] summary { border-bottom: 1px solid var(--line); }
.advanced-settings-body { padding-top: 4px; }
label { display: block; }
label > span { display: flex; align-items: center; gap: 6px; margin: 17px 0 7px; font-size: 10px; font-weight: 700; }
label > span small { color: var(--muted); font-weight: 400; }
label > span b { color: var(--orange); font-size: 8px; }
input, textarea, select { width: 100%; border: 1px solid var(--line); background: white; color: var(--ink); border-radius: 4px; padding: 11px 12px; outline: none; font-size: 11px; }
textarea { resize: vertical; line-height: 1.65; }
input:focus, textarea:focus, select:focus { border-color: var(--ink); box-shadow: 0 0 0 2px rgba(230,255,63,.6); }
.selected-person { margin-top: 16px; padding: 9px; display: flex; gap: 11px; align-items: center; background: #eeece3; border-radius: 5px; }
.selected-person img { width: 48px; height: 48px; object-fit: cover; object-position: top; border-radius: 3px; background: #ddd; }
.selected-person strong, .selected-person small { display: block; }
.selected-person strong { font-size: 11px; }
.selected-person small { color: var(--muted); font-size: 8px; margin-top: 4px; }
.two-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.skill-badge { margin-top: 18px; padding: 15px; background: var(--blue); border-radius: 4px; }
.skill-badge span { color: #4d6382; font-size: 8px; font-weight: 700; letter-spacing: .08em; }
.skill-badge strong { display: block; font-size: 11px; margin-top: 5px; }
.skill-badge p { color: #526071; font-size: 9px; line-height: 1.5; margin: 5px 0 0; }
.submit-button { width: 100%; display: flex; justify-content: space-between; align-items: center; margin-top: 18px; padding: 14px 15px; background: var(--ink); color: white; border-radius: 4px; }
.submit-button:disabled { opacity: .38; cursor: not-allowed; transform: none; }
.local-note { display: block; color: var(--muted); font-size: 8px; line-height: 1.5; margin-top: 10px; }
.checkbox-field { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; cursor: pointer; }
.checkbox-field input { width: 16px; height: 16px; margin-top: 2px; flex-shrink: 0; }
.checkbox-field span { display: block; flex: 1; min-width: 0; font-size: 10px; line-height: 1.5; }
.checkbox-field small { display: block; color: var(--muted); font-size: 8px; margin-top: 2px; }
.auto-duration-readout { border: 1px solid var(--line); background: var(--card); border-radius: 4px; padding: 9px 10px; font-size: 9px; line-height: 1.5; color: var(--muted); }
.prompt-review-batch { margin-top: 22px; display: flex; flex-direction: column; gap: 18px; }
.prompt-review-summary { padding: 14px 16px; background: var(--blue); border-radius: 4px; }
.prompt-review-summary p { margin: 6px 0 0; font-size: 9px; line-height: 1.5; color: #526071; }
.shot-first-frame-board { border: 1px solid var(--line); border-radius: 7px; padding: 18px; background: #f4f2eb; }
.shot-first-frame-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.shot-first-frame-heading h2 { margin: 5px 0 0; font-size: 18px; }
.shot-first-frame-heading p { max-width: 620px; margin: 7px 0 0; color: var(--muted); font-size: 9px; line-height: 1.55; }
.shot-first-frame-board-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.shot-first-frame-board-actions > span { padding: 6px 8px; border-radius: 3px; background: var(--yellow); color: var(--ink); font: 700 8px/1 ui-monospace, monospace; white-space: nowrap; }
.shot-first-frame-board-actions .light-button { padding: 8px 10px; font-size: 9px; white-space: nowrap; }
.shot-first-frame-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); gap: 10px; margin-top: 15px; }
.shot-first-frame-card { min-width: 0; overflow: hidden; border: 1px solid #d8d4c8; border-radius: 5px; background: #fff; padding: 9px; }
.shot-first-frame-meta { display: flex; justify-content: space-between; gap: 8px; align-items: center; margin-bottom: 7px; font-size: 9px; }
.shot-first-frame-meta span { color: var(--muted); font: 700 8px/1 ui-monospace, monospace; }
.shot-first-frame-image { position: relative; display: flex; align-items: center; justify-content: center; min-height: 190px; aspect-ratio: 9 / 12; overflow: hidden; border-radius: 3px; background: #e8e5db; color: var(--muted); text-align: center; font-size: 9px; }
.shot-first-frame-image img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.shot-first-frame-image i { position: absolute; inset: auto 6px 6px; padding: 5px 6px; border-radius: 3px; background: rgba(20,20,16,.78); color: white; font: 700 8px/1 ui-monospace, monospace; font-style: normal; }
.shot-first-frame-editor { display: block; margin-top: 8px; }
.shot-first-frame-editor > span { display: block; margin-bottom: 5px; color: var(--muted); font-size: 8px; font-weight: 700; }
.shot-first-frame-editor textarea { display: block; box-sizing: border-box; width: 100%; min-height: 105px; resize: vertical; border: 1px solid var(--line); border-radius: 3px; padding: 7px; color: #4b4a44; font: 8px/1.5 ui-monospace, "SFMono-Regular", monospace; }
.shot-first-frame-history { margin-top: 8px; }
.shot-first-frame-history > span { display: block; margin-bottom: 5px; color: var(--muted); font-size: 8px; font-weight: 700; }
.shot-first-frame-history > div { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.shot-first-frame-history button { position: relative; min-width: 0; aspect-ratio: 9 / 12; overflow: hidden; border: 1px solid #d5d2c8; border-radius: 3px; padding: 0; background: #e8e5db; cursor: pointer; }
.shot-first-frame-history button.selected { border: 2px solid var(--ink); box-shadow: 0 0 0 2px var(--yellow); }
.shot-first-frame-history img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.shot-first-frame-history i { position: absolute; right: 3px; bottom: 3px; display: grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; background: rgba(20,20,16,.78); color: white; font: 700 7px/1 ui-monospace, monospace; font-style: normal; }
.shot-first-frame-card .light-button { width: 100%; margin-top: 8px; padding: 9px 8px; font-size: 9px; }
.shot-first-frame-card .light-button:disabled { cursor: not-allowed; opacity: .55; }
.shot-first-frame-error, .shot-first-frame-chain { margin: 8px 0 0; font-size: 8px; line-height: 1.5; }
.shot-first-frame-error { color: #b94032; }
.shot-first-frame-chain { color: var(--muted); }

.history-layout { padding-top: 26px; display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 14px; }
.task-list, .task-detail { border: 1px solid var(--line); background: var(--card); border-radius: 7px; padding: 20px; }
.task-list { display: flex; flex-direction: column; gap: 7px; align-self: start; }
.cost-banner { background: var(--blue); border-radius: 4px; padding: 9px 10px; font-size: 8px; line-height: 1.5; color: var(--ink); }
.cost-ledger { display: grid; gap: 5px; }
.cost-ledger strong { font-size: 10px; }
.cost-ledger span { display: flex; justify-content: space-between; gap: 8px; }
.cost-ledger small { opacity: .65; }
.cost-ledger em { font-style: normal; opacity: .72; }
.cost-preview { grid-column: 1 / -1; padding: 10px 12px; border: 1px solid rgba(147, 175, 255, .55); border-radius: 4px; background: rgba(147, 175, 255, .12); display: grid; gap: 4px; }
.cost-preview span { color: #77776e; font: 700 8px/1 ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; }
.cost-preview strong { font-size: 18px; }
.cost-preview small, .cost-inline-note { color: #77776e; font-size: 8px; line-height: 1.55; }
.cost-inline-note { margin: 8px 0 0; }
.task-filter { flex-wrap: wrap; gap: 2px; }
.task-filter button { padding: 6px 8px; font-size: 9px; }
.task-date-filter { font-size: 9px; padding: 8px 9px; }
.notify-toggle { border: 1px solid #33332e; background: transparent; color: #d8d8d0; border-radius: 4px; padding: 6px 9px; font-size: 9px; cursor: pointer; }
.notify-status { color: #7f7f78; font-size: 9px; }
.balance-links { flex-direction: column; gap: 6px; margin-top: 10px; padding-top: 10px; }
.balance-links a { color: #9d9d93; font-size: 9px; text-decoration: none; }
.balance-links a:hover { color: var(--yellow); }
.task-row { border: 1px solid transparent; background: #ece9df; border-radius: 4px; padding: 12px; text-align: left; cursor: pointer; }
.task-row.active { background: var(--ink); color: white; }
.task-row span, .task-row strong, .task-row small, .task-row em { display: block; }
.task-row span { color: var(--muted); font: 600 8px/1 ui-monospace, monospace; }
.task-row strong { font-size: 11px; margin-top: 7px; }
.task-row small { color: var(--muted); font-size: 8px; margin-top: 4px; }
.task-row em { margin-top: 9px; color: var(--orange); font: 700 8px/1 ui-monospace, monospace; font-style: normal; }
.task-row.active span, .task-row.active small { color: #85857e; }
.task-row.active em { color: var(--yellow); }
.task-detail { padding: 26px; }
.inline-result { margin-top: 22px; }
.detail-heading h2 { font-size: 30px; }
.detail-heading-actions { display: flex; align-items: center; gap: 8px; }
.danger-button { border-color: #c96053; color: #b94032; }
.danger-button:disabled { cursor: not-allowed; opacity: .55; }
.detail-meta { display: flex; gap: 8px; margin-top: 18px; }
.detail-meta span { padding: 6px 8px; background: #e8e5db; border-radius: 3px; color: var(--muted); font-size: 8px; }
.version-block { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.version-block:first-child { margin-top: 8px; padding-top: 0; border-top: 0; }
.version-heading { display: flex; align-items: center; gap: 8px; }
.version-badge { padding: 4px 7px; border-radius: 3px; background: #e8e5db; color: var(--muted); font: 700 8px/1 ui-monospace, monospace; white-space: nowrap; }
.version-badge.latest { background: var(--yellow); color: var(--ink); }
.version-date { color: var(--muted); font-size: 8px; }
.segment-list { margin-top: 26px; }
.segment-list > .section-kicker { display: block; margin-bottom: 4px; }
.output-prompt { margin-top: 18px; border: 1px solid var(--line); background: white; border-radius: 5px; overflow: hidden; }
.output-prompt > div { padding: 12px 14px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; }
.output-prompt h3 { margin: 0; font-size: 11px; }
.output-prompt button { border: 0; background: var(--yellow); padding: 6px 8px; border-radius: 3px; font-size: 8px; font-weight: 700; cursor: pointer; }
.output-prompt pre { white-space: pre-wrap; word-break: break-word; margin: 0; padding: 16px; color: #4b4a44; font: 10px/1.75 ui-monospace, "SFMono-Regular", monospace; max-height: 330px; overflow: auto; }
.next-gate { margin-top: 18px; padding: 18px; background: var(--yellow); border-radius: 5px; }
.next-gate span, .next-gate strong { display: block; }
.next-gate span { font: 700 8px/1 ui-monospace, monospace; letter-spacing: .1em; }
.next-gate strong { margin-top: 7px; font-size: 12px; }
.next-gate p { margin: 5px 0 0; font-size: 9px; }
.generation-card { margin-top: 18px; padding: 20px; border-radius: 6px; background: var(--ink); color: white; }
.generation-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; }
.generation-heading h3 { margin: 7px 0 0; font: 700 22px/1.15 "PingFang SC", "Microsoft YaHei", Arial, sans-serif; }
.generation-status { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 3px; background: var(--yellow); color: var(--ink); font: 700 8px/1 ui-monospace, monospace; white-space: nowrap; }
.status-spinner { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid rgba(26,26,20,.3); border-top-color: var(--ink); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.generation-progress { margin-top: 14px; padding: 12px 14px; border-radius: 5px; background: #24241f; }
.generation-progress.stalled { background: rgba(255,114,94,.12); }
.progress-track { height: 4px; border-radius: 2px; background: #3a3a33; overflow: hidden; }
.progress-fill { height: 100%; background: var(--yellow); transition: width .4s ease; }
.progress-meta { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; color: #afafa7; font-size: 8px; letter-spacing: .02em; }
.generation-grid { display: grid; grid-template-columns: minmax(190px, .55fr) minmax(0, 1fr); gap: 18px; margin-top: 17px; }
.frame-uploader { min-height: 245px; border: 1px dashed #55554d; border-radius: 5px; background: #252520; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; }
.frame-uploader input { display: none; }
.reference-preview-grid { width: 100%; height: 245px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; background: #111; }
.reference-preview-grid.count-1 { grid-template-columns: 1fr; }
.reference-preview-grid.count-3, .reference-preview-grid.count-5, .reference-preview-grid.count-7 { grid-template-columns: repeat(3, 1fr); }
.reference-preview-grid img { width: 100%; height: 100%; min-height: 0; object-fit: cover; object-position: center top; }
.frame-uploader b { font-size: 30px; font-weight: 200; color: var(--yellow); }
.frame-uploader strong { margin-top: 7px; font-size: 11px; }
.frame-uploader small { margin-top: 5px; color: #898981; font-size: 8px; }
.generation-copy { display: flex; flex-direction: column; }
.generation-copy > p { margin: 0; color: #afafa7; font-size: 10px; line-height: 1.7; }
.generation-copy dl { display: grid; grid-template-columns: 78px 1fr; gap: 8px 12px; margin: 16px 0; padding: 14px; background: #24241f; border-radius: 4px; font-size: 9px; }
.generation-copy dl > div { display: contents; }
.generation-copy dt { color: #7f7f77; }
.generation-copy dd { margin: 0; color: #dadad2; word-break: break-word; }
.generation-copy .submit-button { margin-top: auto; background: var(--yellow); color: var(--ink); }
.generation-copy .submit-button:hover { background: #f0ff77; }
.charge-note { margin-top: 9px; color: #8f8f87; font-size: 8px; line-height: 1.55; }
.api-error { margin: 10px 0 0; padding: 10px; border-left: 3px solid #ff725e; background: rgba(255,114,94,.1); color: #ffc2b8; font-size: 9px; line-height: 1.55; }

.shot-template-table { width: 100%; border-collapse: collapse; margin-top: 12px; border: 1px solid var(--line); border-radius: 5px; overflow: hidden; }
.shot-template-table th, .shot-template-table td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; font-size: 10px; }
.shot-template-table th { background: #ece9df; color: var(--muted); font-weight: 700; font-size: 9px; }
.shot-template-table th small { display: block; color: var(--muted); font-weight: 400; margin-top: 3px; }
.shot-template-table td input, .shot-template-table td select { padding: 7px 8px; font-size: 10px; }
.shot-template-table tbody tr:nth-child(even) { background: #f7f5ed; }

.shot-template-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 14px; border: 1px solid var(--line); border-radius: 5px; background: var(--card); margin-top: 10px; }
.shot-template-row:first-child { margin-top: 0; }
.shot-template-row strong { display: block; font-size: 12px; }
.shot-template-row small { display: block; color: var(--muted); font-size: 9px; margin-top: 4px; }

.shot-template-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.shot-template-library-item { border: 1px solid var(--line); border-radius: 5px; overflow: hidden; }
.shot-template-library-item + .shot-template-library-item { margin-top: 8px; }
.shot-template-library-item .shot-template-row { border: 0; border-radius: 0; }
.shot-template-row-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.shot-template-detail { padding: 0 12px 12px; border-top: 1px solid var(--line); background: #faf9f4; }
.shot-template-detail .shot-template-table { margin-bottom: 0; }
.shot-template-file-input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.shot-template-uploader { min-height: 118px; padding: 20px; border: 1px dashed #8b8b82; border-radius: 5px; background: #f7f5ed; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; cursor: pointer; transition: border-color .18s ease, background-color .18s ease; }
.shot-template-uploader:hover, .shot-template-uploader:focus-visible, .shot-template-uploader.dragging { border-color: var(--ink); background: var(--blue); outline: none; }
.shot-template-uploader strong { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.shot-template-uploader small { margin-top: 7px; color: var(--muted); font-size: 9px; }
.generation-progress .api-error { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.generation-progress .api-error p { margin: 0; }
.generation-progress .api-error .ghost-button { flex-shrink: 0; padding: 6px 10px; font-size: 8px; border-color: #ff725e; color: #ffc2b8; }
.video-result { margin-top: 16px; padding-top: 16px; border-top: 1px solid #393932; }
.video-result video { display: block; width: min(100%, 430px); max-height: 620px; margin: 0 auto; border-radius: 5px; background: #0c0c0a; }
.video-result a { display: inline-block; margin-top: 10px; color: var(--yellow); font-size: 9px; font-weight: 700; }
.finishing-workbench { display: grid; gap: 20px; }
.finishing-intro { padding: 26px 28px; border: 1px solid #34342e; border-radius: 6px; background: #20201c; color: #f4f4ec; }
.finishing-intro .section-kicker, .finishing-result .section-kicker { color: #a9a99f; }
.finishing-intro h2 { margin: 8px 0 6px; color: #f7f7ef; font-family: "PingFang SC", "Microsoft YaHei", Arial, sans-serif; font-size: clamp(25px, 3vw, 42px); font-weight: 700; letter-spacing: -.025em; text-wrap: balance; }
.finishing-intro p { max-width: 760px; margin: 0; color: #c2c2b8; font-size: 11px; line-height: 1.8; text-wrap: pretty; }
.finishing-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .7fr); gap: 18px; }
.finishing-form, .finishing-result { min-width: 0; padding: 22px; border: 1px solid #34342e; border-radius: 6px; background: #20201c; color: #f4f4ec; }
.clip-uploader { min-height: 170px; border: 1px dashed #77776e; border-radius: 5px; background: #282823; color: #f4f4ec; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; transition: border-color .18s ease, background-color .18s ease, transform .18s ease; }
.clip-uploader:hover { border-color: var(--yellow); background: #2d2d27; }
.clip-uploader.is-dragging { border-color: var(--yellow); background: #333428; box-shadow: inset 0 0 0 2px rgba(230,255,63,.16); transform: scale(.995); }
.clip-uploader input { display: none; }
.clip-uploader b { color: var(--yellow); font-size: 28px; font-weight: 200; }
.clip-uploader strong { margin-top: 7px; color: #f4f4ec; font-size: 12px; }
.clip-uploader small { margin-top: 7px; color: #b1b1a7; font-size: 9px; }
.clip-order { margin: 12px 0; padding: 0; list-style: none; display: grid; gap: 5px; }
.clip-order li { padding: 8px 10px; background: #292924; font-size: 9px; }
.clip-order-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) 26px; gap: 8px; align-items: center; }
.clip-order-row span { color: var(--yellow); font-family: var(--font-mono); }
.clip-order-row strong { color: #ecece4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clip-order-row button { width: 26px; height: 26px; border: 0; border-radius: 3px; background: transparent; color: #aaa9a0; cursor: pointer; }
.clip-order-row button:hover { background: #3b3b34; color: white; }
.clip-dialogue-field { width: 100%; margin-top: 6px; padding: 6px 8px; background: #201f1b; border: 1px solid #3b3b34; border-radius: 3px; color: #ecece4; font-size: 9px; line-height: 1.5; resize: vertical; }
.clip-dialogue-field::placeholder { color: #7a7a70; }
.clip-kind-switch { display: inline-flex; margin-top: 6px; border: 1px solid #3b3b34; border-radius: 3px; overflow: hidden; }
.clip-kind-switch button { padding: 4px 12px; border: 0; background: #201f1b; color: #aaa9a0; font-size: 9px; font-weight: 700; cursor: pointer; transition: background 160ms, color 160ms; }
.clip-kind-switch button + button { border-left: 1px solid #3b3b34; }
.clip-kind-switch button:hover { background: #302f29; color: #ecece4; }
.clip-kind-switch button.is-active { background: var(--yellow); color: var(--ink); }
.clip-broll-panel { display: grid; gap: 7px; margin-top: 7px; padding: 8px; background: #201f1b; border: 1px solid #3b3b34; border-radius: 3px; }
.clip-broll-panel small { color: #aaa9a0; font-size: 9px; line-height: 1.5; }
.clip-broll-file { display: block; padding: 7px 9px; background: #292924; border: 1px dashed #4a4a41; border-radius: 3px; color: #ecece4; font-size: 9px; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clip-broll-file:hover { border-color: var(--yellow); }
.clip-broll-file input { display: none; }
.clip-broll-timing { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.clip-broll-timing label { display: grid; gap: 4px; }
.clip-broll-timing span { color: #e8e8e0; font-size: 9px; font-weight: 700; }
.clip-broll-timing input { width: 100%; padding: 5px 7px; background: #292924; border: 1px solid #3b3b34; border-radius: 3px; color: #ecece4; font-size: 9px; }
.clip-broll-timing input:focus { outline: 2px solid var(--yellow); outline-offset: 1px; }
@media (max-width: 640px) { .clip-broll-timing { grid-template-columns: 1fr; } }
.dialogue-field { display: grid; gap: 7px; margin-top: 15px; }
.dialogue-field span { color: #e8e8e0; font-size: 10px; font-weight: 700; }
.dialogue-field b { color: var(--yellow); }
.dialogue-field em { color: #aaa99f; font-size: 8px; font-style: normal; font-weight: 500; }
.dialogue-field textarea { resize: vertical; min-height: 135px; padding: 12px; border: 1px solid #41413a; border-radius: 4px; background: #171714; color: #efefe7; font: inherit; font-size: 10px; line-height: 1.7; }
.cover-copy-field textarea { min-height: 74px; }
.cover-copy-field small { color: #96968d; font-size: 8px; line-height: 1.55; }
.finishing-toggles { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 14px; width: 100%; }
.toggle-field { display: flex; align-items: flex-start; gap: 9px; cursor: pointer; width: 100%; }
/* 全局有 input { width: 100% }，复选框会吃掉整行、把说明文字挤成零宽，必须显式给尺寸。 */
.toggle-field input[type="checkbox"] { width: 14px; height: 14px; margin-top: 2px; flex: none; accent-color: var(--yellow); }
/* 这里要覆盖全局 `label > span`（它是 align-items:center + margin:17px 0 7px，
   放进纵向排列里会把文字居中并顶出一大段外边距）。
   flex:1 + min-width:0 缺一不可：没有它们，这个 span 会被压成零宽，说明文字变成一字一行。
   颜色必须跟随面板——自动成片面板是深色底，用默认的深色字会看不见。 */
.toggle-field > span { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; margin: 0; font-size: 10px; font-weight: 700; color: inherit; }
.toggle-field em { font-style: normal; font-weight: 400; color: #aaa99f; font-size: 8px; line-height: 1.55; }
.finishing-form .submit-button { width: 100%; margin-top: 14px; background: var(--yellow); color: var(--ink); }
.finishing-form .local-note { color: #aaa99f; }
.finishing-result video { width: 100%; max-height: 570px; border-radius: 5px; background: #0d0d0b; }
.finishing-result dl { display: grid; gap: 7px; margin: 13px 0; font-size: 9px; }
.finishing-result dl div { display: flex; justify-content: space-between; gap: 12px; }
.finishing-result dt { color: #7f7f77; }
.finishing-result dd { margin: 0; color: #deded5; }
.finishing-result > a { display: inline-flex; padding: 10px 14px; border: 1px solid var(--yellow); color: var(--yellow); font-size: 9px; font-weight: 700; }
.result-placeholder { min-height: 400px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #a5a59b; text-align: center; }
.result-placeholder span { color: #9d9d93; font-family: ui-monospace, monospace; font-size: 9px; }
.result-placeholder strong { margin-top: 10px; color: #e4e4dc; font-family: "PingFang SC", "Microsoft YaHei", Arial, sans-serif; font-size: 27px; font-weight: 700; }
.result-placeholder p { margin: 6px 0 0; color: #aaa99f; font-size: 9px; }
@media (prefers-reduced-motion: reduce) { .clip-uploader { transition: none; } }
.empty-state { min-height: 560px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.empty-state > span { font: 700 74px/1 "PingFang SC", "Microsoft YaHei", Arial, sans-serif; color: #d2cfc5; }
.empty-state h2 { margin: 16px 0 0; font: 700 27px/1.2 "PingFang SC", "Microsoft YaHei", Arial, sans-serif; }
.empty-state p { max-width: 420px; color: var(--muted); font-size: 11px; line-height: 1.6; }

.dialog-backdrop { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; background: rgba(17,17,14,.72); backdrop-filter: blur(8px); }
.dialog { width: min(940px, 96vw); max-height: 92vh; overflow: auto; background: var(--card); border-radius: 10px; padding: 26px; box-shadow: 0 30px 90px rgba(0,0,0,.35); }
.dialog-heading { display: flex; justify-content: space-between; align-items: flex-start; }
.dialog-heading h2 { margin: 8px 0 0; font: 700 31px/1.15 "PingFang SC", "Microsoft YaHei", Arial, sans-serif; }
.dialog-heading p { max-width: 590px; margin: 8px 0 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.dialog-heading > button { border: 0; background: transparent; font-size: 28px; font-weight: 200; cursor: pointer; }
.dialog-grid { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 24px; margin-top: 22px; }
.image-generation-panel { display: grid; gap: 10px; align-content: start; }
.image-upload { min-height: 330px; border: 1px dashed #aaa79d; background: #e8e5dc; border-radius: 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; cursor: pointer; }
.image-upload input { display: none; }
.image-upload img { width: 100%; height: 100%; min-height: 330px; object-fit: cover; object-position: top; }
.image-upload > span { font-size: 31px; font-weight: 200; }
.image-upload strong { font-size: 12px; margin-top: 9px; }
.image-upload small { color: var(--muted); font-size: 10px; margin-top: 5px; }
.image-upload:hover, .image-upload:focus-within { border-color: var(--ink); background: #f4edcc; }
.image-preview-button { min-height: 330px; padding: 0; border: 1px solid #aaa79d; border-radius: 6px; overflow: hidden; background: #e8e5dc; cursor: zoom-in; }
.image-preview-button img { display: block; width: 100%; min-height: 330px; height: 100%; object-fit: cover; object-position: top; }
.image-replace-button { display: block; color: var(--muted); text-align: center; font-size: 10px; cursor: pointer; }
.image-replace-button input { display: none; }
.master-framing > span { display: block; margin-bottom: 6px; color: var(--muted); font-size: 10px; }
.master-framing > div { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.master-framing button { padding: 9px 7px; border: 1px solid var(--line); border-radius: 5px; background: #f2f0e9; text-align: left; cursor: pointer; }
.master-framing button.selected { border-color: var(--ink); box-shadow: inset 0 -2px var(--yellow); background: #fffdf6; }
.master-framing button:disabled { cursor: wait; opacity: .6; }
.master-framing strong, .master-framing small { display: block; }
.master-framing strong { font-size: 10px; }
.master-framing small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.image-lightbox { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 24px; background: rgba(9,9,8,.9); backdrop-filter: blur(8px); }
.image-lightbox-content { position: relative; display: grid; place-items: center; width: min(860px, 96vw); max-height: 92vh; }
.image-lightbox-content img { display: block; max-width: 100%; max-height: 88vh; object-fit: contain; border-radius: 4px; box-shadow: 0 24px 80px rgba(0,0,0,.48); }
.image-lightbox-content > button { position: absolute; z-index: 1; top: -10px; right: -8px; width: 36px; height: 36px; border: 0; border-radius: 50%; color: #fff; background: rgba(0,0,0,.66); font-size: 25px; line-height: 1; cursor: pointer; }
.image-generate-button { width: 100%; padding: 11px 10px; font-size: 11px; }
.image-generate-button:disabled { cursor: wait; opacity: .62; }
.generation-divider { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 10px; }
.generation-divider::before, .generation-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.image-notice { display: block; color: var(--muted); font-size: 10px; line-height: 1.5; }
.image-notice.error { color: #bb3b20; }
.dialog-fields label > span { margin-top: 11px; }
.dialog-fields label > small { display: block; color: var(--muted); font-size: 10px; line-height: 1.45; margin-top: 5px; }
.plan-button { margin-top: 14px; width: 100%; }
.plan-notice { margin: 6px 0 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.character-generation-mode, .aesthetic-profile-section { margin-top: 14px; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: #f6f4eb; }
.generation-mode-heading, .aesthetic-profile-heading { display: grid; gap: 4px; }
.generation-mode-heading > span, .aesthetic-profile-heading > span { font-size: 14px; font-weight: 800; }
.generation-mode-heading small, .aesthetic-profile-heading small { color: var(--muted); font-size: 12px; line-height: 1.45; }
.generation-mode-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.generation-mode-options button, .aesthetic-profile-grid button { display: grid; gap: 4px; padding: 11px; text-align: left; color: var(--ink); background: white; border: 1px solid var(--line); border-radius: 6px; cursor: pointer; }
.generation-mode-options button.selected, .aesthetic-profile-grid button.selected { border: 2px solid var(--ink); padding: 10px; background: var(--yellow); }
.generation-mode-options strong, .aesthetic-profile-grid strong { font-size: 14px; }
.generation-mode-options small, .aesthetic-profile-grid small { color: #5f5e56; font-size: 11px; line-height: 1.4; }
.aesthetic-profile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.face-candidate-section { margin-top: 14px; padding: 15px; border: 1px solid var(--line); border-radius: 8px; background: #f6f4eb; }
.face-candidate-heading { display: grid; gap: 4px; margin-bottom: 12px; }
.face-candidate-heading strong { font-size: 16px; }
.face-candidate-heading small { color: var(--muted); font-size: 12px; line-height: 1.45; }
.face-candidate-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.face-candidate { display: grid; gap: 7px; min-height: 192px; padding: 12px; text-align: left; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 6px; cursor: pointer; transition: transform 160ms ease, border-color 160ms ease, background 160ms ease; }
.face-candidate:hover { transform: translateY(-2px); border-color: var(--ink); }
.face-candidate.selected { border: 2px solid var(--ink); background: var(--yellow); padding: 11px; }
.face-candidate strong { font-size: 16px; }
.face-candidate > span:not(.candidate-index) { display: grid; gap: 2px; color: #504f47; font-size: 12px; line-height: 1.42; }
.face-candidate .candidate-rationale { padding: 7px; background: rgba(255, 214, 52, .24); border-radius: 4px; }
.face-candidate b { color: var(--ink); font-size: 11px; }
.candidate-index { color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .07em; }
.background-flow { margin-top: 20px; padding: 18px; border: 1px solid var(--line); border-radius: 6px; background: #eeece3; }
.background-flow strong { display: block; margin-top: 7px; font-size: 15px; }
.background-flow p { margin: 7px 0 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.background-flow > .primary-button { margin-top: 13px; width: 100%; }
.background-actions { display: flex; gap: 8px; margin-top: 12px; }
.background-actions .light-button { flex: 1; padding: 10px; font-size: 10px; }
.background-actions .light-button:disabled { cursor: not-allowed; opacity: .52; }
.background-notice { display: block; margin-top: 9px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.background-previews { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.background-previews.direct-first-frame { grid-template-columns: minmax(0, 1fr); }
.background-previews img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 4px; background: #ddd9cf; }
.video-master-picker { margin: 14px 0 4px; padding: 12px; border: 1px solid var(--line); border-radius: 6px; background: #f0eee6; }
.video-master-picker > span { display: block; margin-bottom: 8px; color: var(--ink); font-size: 11px; font-weight: 800; letter-spacing: .04em; }
.video-master-picker > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.video-master-picker button { display: flex; min-height: 70px; gap: 8px; align-items: center; padding: 7px; border: 1px solid #c8c2b6; border-radius: 4px; background: #fbfaf6; color: var(--muted); text-align: left; cursor: pointer; }
.video-master-picker button img { width: 38px; height: 54px; flex: 0 0 auto; object-fit: contain; border-radius: 2px; background: #e4e0d6; }
.video-master-picker button span { min-width: 0; }
.video-master-picker button strong, .video-master-picker button small { display: block; }
.video-master-picker button strong { font-size: 11px; }
.video-master-picker button small, .video-master-picker > small { color: var(--muted); font-size: 10px; line-height: 1.35; }
.video-master-picker > small { display: block; margin-top: 8px; }
.video-master-picker button.selected { border-color: var(--accent); background: #e6ff37; color: #171a10; box-shadow: inset 0 0 0 1px rgba(23, 26, 16, .14); }
.video-master-picker button.selected small { color: #383d23; }
.more-image-dialog { width: min(720px, 96vw); }
.more-image-intro { margin: 14px 0 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.more-image-view-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 18px 0 12px; }
.more-image-view-grid button { display: grid; min-height: 92px; gap: 5px; padding: 12px; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); background: #f7f5ed; text-align: left; cursor: pointer; }
.more-image-view-grid button:hover { border-color: var(--ink); }
.more-image-view-grid button.selected { border: 2px solid var(--ink); padding: 11px; background: var(--yellow); }
.more-image-view-grid button:disabled { cursor: wait; opacity: .62; }
.more-image-view-grid strong { font-size: 14px; }
.more-image-view-grid small { color: var(--muted); font-size: 11px; line-height: 1.4; }
.dialog-footer { border-top: 1px solid var(--line); margin-top: 24px; padding-top: 16px; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.dialog-footer > small { color: var(--muted); font-size: 8px; }
.dialog-footer > div { display: flex; gap: 14px; align-items: center; }
.calibration-panel { margin-top: 18px; border-top: 1px solid #3b3b34; padding-top: 16px; }
.calibration-panel strong { display: block; margin-top: 7px; font-size: 14px; }
.calibration-panel p { margin: 7px 0 12px; color: #b8b8ae; font-size: 11px; line-height: 1.55; }
.calibration-panel > div { display: flex; gap: 8px; }
.calibration-panel .light-button { font-size: 10px; padding: 9px 10px; }
.calibration-panel small { display: block; color: #b8b8ae; font-size: 10px; line-height: 1.45; margin-top: 10px; }
.calibration-previews { margin-top: 12px; }
.calibration-previews img { width: calc(50% - 4px); aspect-ratio: 2 / 3; object-fit: cover; border-radius: 4px; }

/* 全局可读性档：工作台的原始视觉密度过高，表单、标签与说明统一提升一档。 */
.eyebrow, .section-kicker { font-size: 12px; }
.brand small, .nav-copy small, .sidebar-footer small, .date-chip { font-size: 12px; }
.nav-copy strong, .sidebar-footer strong { font-size: 15px; }
.primary-button, .light-button { font-size: 15px; }
.mode-card > span, .mode-card em, .flow-row > span { font-size: 12px; }
.mode-card strong, .flow-row strong { font-size: 16px; }
.mode-card p, .flow-row small, .hero-copy p { font-size: 14px; }
label > span { font-size: 14px; }
label > span b { font-size: 11px; }
input, textarea, select { font-size: 16px; }
.local-note, .checkbox-field small, .auto-duration-readout, .background-notice, .image-notice, .plan-notice { font-size: 13px; }
.checkbox-field span, .background-flow p, .calibration-panel p, .prompt-block p, .trait-pair p { font-size: 14px; }
.skill-badge span, .skill-badge p, .skill-badge strong, .selected-person small, .selected-person strong { font-size: 14px; }
.status-badge, .character-image em, .character-meta span, .character-meta small { font-size: 11px; }

@media (max-width: 1060px) {
  .app-shell { grid-template-columns: 80px minmax(0, 1fr); }
  .sidebar { padding-inline: 10px; }
  .brand { padding-inline: 12px; }
  .brand > span:last-child, .nav-copy, .sidebar-footer div { display: none; }
  .nav-item { justify-content: center; }
  .nav-index { font-size: 11px; }
  .sidebar-footer { justify-content: center; }
  .dashboard-grid { grid-template-columns: 1fr 1fr; }
  .hero-card { grid-column: 1 / -1; }
  .roadmap-card { grid-column: 1 / -1; }
  .library-layout { grid-template-columns: 1fr; }
  .identity-panel { position: static; }
  .character-grid { grid-template-columns: repeat(3, 1fr); }
  .master-asset-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .folder-details { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .app-shell { display: block; }
  .sidebar { position: fixed; inset: auto 10px 10px; height: auto; padding: 7px; border-radius: 8px; flex-direction: row; box-shadow: 0 8px 30px rgba(0,0,0,.25); }
  .brand, .sidebar-footer { display: none; }
  .sidebar nav { width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); }
  .nav-item { padding: 10px; }
  .nav-item.active { background: var(--yellow); }
  .main-panel { padding: 0 16px 100px; }
  .topbar { min-height: 92px; }
  .topbar h1 { font-size: 25px; }
  .date-chip { display: none; }
  .topbar .primary-button { font-size: 0; width: 38px; height: 38px; padding: 0; }
  .topbar .primary-button span { font-size: 18px; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .hero-card { display: block; min-height: 0; }
  .hero-copy { padding: 30px 24px; }
  .hero-copy h2 { font-size: 38px; }
  .hero-flow { border-left: 0; border-top: 1px solid #34342e; }
  .character-grid { grid-template-columns: 1fr 1fr; }
  .folder-header { grid-template-columns: 1fr auto; }
  .folder-header .section-kicker { grid-column: 1; }
  .master-asset img { height: 210px; }
  .library-layout, .task-form, .history-layout { display: block; }
  .form-side, .identity-panel, .task-list { position: static; margin-top: 14px; }
  .mode-grid { grid-template-columns: 1fr; }
  .history-layout .task-detail { margin-top: 14px; }
  .generation-grid { grid-template-columns: 1fr; }
  .finishing-grid { grid-template-columns: 1fr; }
  .dialog-grid { grid-template-columns: 1fr; }
  .more-image-view-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .image-upload { min-height: 230px; }
  .image-upload img, .image-preview-button { min-height: 230px; max-height: 320px; }
  .image-preview-button img { min-height: 230px; max-height: 320px; }
  .dialog-footer { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 480px) {
  .character-grid, .two-fields, .trait-pair, .face-candidate-grid, .generation-mode-options, .aesthetic-profile-grid { grid-template-columns: 1fr; }
  .toolbar-row { align-items: stretch; flex-direction: column; }
  .segmented { width: 100%; }
  .segmented button { flex: 1; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 8px; }
}

/* ---- 赛道档案 ---- */
.niche-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.niche-detail { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; font-size: 10px; line-height: 1.6; }
.niche-detail p { margin: 0; color: #d7d7cd; }
.niche-detail b { display: block; margin-bottom: 2px; color: #96968d; font-size: 8px; letter-spacing: 0.08em; }
.niche-forbidden { color: var(--orange); }
.niche-actions { display: flex; gap: 8px; margin-top: 6px; }

/* ---- 内容层（选题 / 脚本） ---- */
.content-planner { margin-top: 26px; padding: 22px; border: 1px solid var(--line); background: var(--card); border-radius: 8px; }
.content-planner-collapsed { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 14px; }
.content-planner-collapsed p, .planner-heading p { max-width: 600px; margin: 6px 0 0; color: var(--muted); font-size: 10px; line-height: 1.6; }
.planner-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.planner-row { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 12px; }
.topic-list { display: grid; gap: 10px; margin-top: 16px; }
.topic-card { border: 1px solid var(--line); border-radius: 5px; padding: 14px; background: white; }
.topic-card.active { border-color: var(--ink); }
.topic-premise { margin: 0; font-size: 12px; line-height: 1.6; }
.topic-meta { margin: 7px 0 4px; color: var(--muted); font-size: 9px; line-height: 1.6; }
.topic-meta b { display: inline-block; margin-right: 7px; padding: 2px 6px; background: var(--yellow); color: var(--ink); border-radius: 3px; }
.variant-list { display: grid; gap: 12px; margin-top: 16px; }
.variant-card { border: 1px solid var(--line); border-radius: 5px; padding: 14px; background: white; }
.variant-head { margin: 0 0 9px; font-size: 10px; font-weight: 700; }
.variant-segment { margin: 0 0 7px; font-size: 11px; line-height: 1.65; }
.variant-segment b { display: block; margin-bottom: 2px; color: var(--muted); font-size: 8px; letter-spacing: .06em; }
@media (max-width: 700px) {
  .content-planner-collapsed, .planner-heading { align-items: flex-start; flex-direction: column; }
  .planner-row { grid-template-columns: 1fr; }
}