:root {
  --ink: #182724;
  --muted: #52615b;
  --paper: #f6f4ee;
  --card: #fffdf8;
  --line: #dedfd4;
  --pine: #203e34;
  --accent: #f0c77e;
  --danger: #a12d25;
  --radius: 18px;
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", system-ui, sans-serif;
  color: var(--ink);
  background: var(--paper);
}

* { box-sizing: border-box; }
body { margin: 0; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { opacity: .55; cursor: not-allowed; }
:focus-visible { outline: 3px solid #8f620e; outline-offset: 3px; }
p, h1, h2, h3 { margin: 0; }
.shell { max-width: 1170px; margin-inline: auto; padding-inline: 26px; }
.skip { position: absolute; top: 10px; left: 10px; padding: 10px; z-index: 10; background: white; transform: translateY(-200%); }
.skip:focus { transform: none; }

.topbar { background: var(--card); border-bottom: 1px solid var(--line); }
.topbar-inner { display: flex; min-height: 77px; align-items: center; justify-content: space-between; gap: 12px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 750; white-space: nowrap; }
.brand-mark { display: grid; place-items: center; width: 41px; height: 41px; border-radius: 12px; background: var(--pine); color: var(--accent); }
.brand small, .footer span:last-child { display: block; margin-top: 2px; font: 700 9px/1.4 system-ui, sans-serif; letter-spacing: .18em; color: var(--muted); }
.nav { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.nav a { padding: 10px 15px; font-size: 14px; font-weight: 650; color: var(--muted); border-radius: 8px; }
.nav a:hover, .nav a[aria-current] { color: var(--pine); background: #e9eee7; }
.main { min-height: calc(100vh - 144px); padding-block: 34px 52px; }
.footer { min-height: 67px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--muted); }

.hero { overflow: hidden; position: relative; min-height: 222px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 23px; padding: 32px 39px; border-radius: 24px; color: #f8f5e9; background: radial-gradient(ellipse at 96% 90%, #556641 0, transparent 65%), var(--pine); }
.hero-copy { position: relative; z-index: 1; }
.eyebrow { font-size: 11px; line-height: 1.6; font-weight: 800; letter-spacing: .16em; color: #755711; }
.hero .eyebrow { color: var(--accent); }
.hero h1, .page-heading h1 { margin-block: 8px 9px; font-size: clamp(30px, 4vw, 45px); letter-spacing: -.045em; line-height: 1.2; overflow-wrap: anywhere; }
.hero p:last-child, .page-heading p:last-child { font-size: 15px; line-height: 1.8; }
.hero p:last-child { color: #e6eadd; }
.hero-visual { width: clamp(190px, 31vw, 310px); padding: 0 4%; flex: 0 0 auto; }
.frame { aspect-ratio: 16/9; position: relative; display: grid; place-items: center; border: 1px solid #cdd8bb70; border-radius: 12px; overflow: hidden; background: repeating-linear-gradient(140deg, #ffffff00, #ffffff00 24px, #ffffff0d 25px, #ffffff00 26px), #6e8a6629; }
.frame-play { width: 47px; height: 47px; display: grid; place-items: center; border-radius: 50%; color: #233c32; background: var(--accent); }
.frame-caption { position: absolute; left: 10%; bottom: 12%; width: 23%; }
.frame-caption span { width: 100%; height: 3px; display: block; margin-block: 4px; background: #e1e9c694; border-radius: 4px; }
.frame-caption span:last-child { width: 62%; }
.film-timeline { display: grid; grid-template-columns: 2fr 3fr 1.5fr 4fr 2fr; gap: 4px; margin-top: 7px; }
.film-timeline i { height: 5px; background: #c4d7ad66; border-radius: 3px; }
.film-timeline i:nth-child(2) { background: var(--accent); }

.workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(248px, 31%); align-items: start; gap: 22px; }
.panel { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.work-section { padding: 24px 27px; border-bottom: 1px solid var(--line); }
.section-head { display: flex; gap: 12px; align-items: start; margin-bottom: 17px; }
.step { min-width: 31px; min-height: 31px; display: grid; place-items: center; border-radius: 7px; background: #eaf0e8; color: var(--pine); font: 750 12px/1 system-ui, sans-serif; }
.section-head h2 { margin-top: 1px; font-size: 19px; line-height: 1.4; }
.section-head p, .field-meta, .processing-note { color: var(--muted); line-height: 1.6; font-size: 12px; }
.section-head p { margin-top: 3px; }
.dropzone { min-height: 103px; display: flex; align-items: center; justify-content: center; gap: 12px; position: relative; padding: 14px; border: 1px dashed #7c937f; border-radius: 12px; background: #f1f5ee; color: var(--pine); font-size: 14px; cursor: pointer; }
.dropzone:hover, .dropzone.dragging { background: #e6efe2; border-color: var(--pine); }
.dropzone:focus-within { outline: 3px solid #8f620e; outline-offset: 3px; }
.dropzone input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.file-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.file-list:not(:empty) { margin-top: 12px; }
.file-row { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; }
.file-row .filename { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.file-row .file-size { color: var(--muted); font-size: 12px; white-space: nowrap; }
.remove-file { color: var(--danger); border: 0; background: transparent; padding: 4px; font-size: 12px; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field-grid.with-aspect { grid-template-columns: 1.5fr 1fr 1fr; }
.field-label, .field-grid label, .scene-field { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 700; }
.field-label span { color: var(--muted); font-weight: 450; margin-left: 5px; }
input:not([type=file]), textarea, select { display: block; width: 100%; min-width: 0; padding: 11px 12px; color: var(--ink); border: 1px solid #ced4c9; border-radius: 8px; background: #ffffff; font-size: 14px; line-height: 1.6; }
input::placeholder, textarea::placeholder { color: #65736b; }
textarea { resize: vertical; }
#prompt { margin-top: 12px; }
.field-grid input, .field-grid select, .scene-field input, .scene-field textarea { margin-top: 6px; }
.field-meta { margin-top: 6px; }
.form-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; padding: 17px 27px; gap: 11px; }
.form-footer .processing-note { flex: 1 1 245px; }
.error { flex-basis: 100%; color: var(--danger); background: #fff3ef; border-radius: 8px; padding: 9px 12px; font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.upload-error { margin-top: 12px; }

.side-panel { padding: 24px; border-radius: var(--radius); background: #efebde; border: 1px solid #dfd9c7; }
.poster-icon { display: grid; place-items: center; width: 65px; height: 65px; margin-block: 17px; color: var(--pine); border-radius: 14px; background: #e9d3a0; }
.side-panel h2 { margin-bottom: 7px; font-size: 22px; overflow-wrap: anywhere; }
.side-panel p:not(.eyebrow) { color: var(--muted); font-size: 14px; line-height: 1.7; }
.seed-links { margin-top: 17px; display: grid; justify-items: start; gap: 7px; }
.seed-links .button { white-space: normal; text-align: start; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 11px; min-height: 43px; border: 1px solid transparent; border-radius: 8px; padding: 9px 16px; white-space: nowrap; font-size: 14px; font-weight: 700; line-height: 1.5; }
.primary { color: #fffdf4; background: var(--pine); }
.primary:hover:not(:disabled) { background: #31584b; }
.secondary { border-color: #b4beae; background: #fffdf5; color: var(--pine); }
.secondary:hover:not(:disabled) { background: #e9eee7; }

.page-heading { display: flex; align-items: end; justify-content: space-between; gap: 17px; margin-bottom: 22px; }
.page-heading p:last-child, .notice, .back-link { color: var(--muted); }
.back-link { display: inline-block; margin-bottom: 15px; font-size: 14px; }
.back-link:hover { color: var(--pine); text-decoration: underline; }
.notice { font-size: 14px; line-height: 1.7; }
.notice:empty { display: none; }
.notice .button { margin-top: 8px; }
.history-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(245px, 1fr)); gap: 17px; }
.history-card { min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.history-card:hover { border-color: #8ba090; }
.thumbnail { aspect-ratio: 16/8.2; display: grid; place-items: center; color: #f6dc9a; background: radial-gradient(ellipse at 80% 100%, #5e704b, #244538 73%); overflow: hidden; }
.thumbnail img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; grid-area: 1 / 1; }
.thumbnail svg { grid-area: 1 / 1; }
.card-body { padding: 15px; }
.card-body h2 { margin-top: 8px; font-size: 17px; overflow-wrap: anywhere; }
.card-meta { margin-top: 6px; font-size: 12px; color: var(--muted); }
.status { display: inline-block; padding: 4px 8px; border-radius: 5px; color: var(--pine); background: #e9f0e8; font-size: 11px; font-weight: 750; }
.status.queued, .status.processing { background: #f6edce; color: #704a10; }
.status.failed { background: #f9e7e1; color: var(--danger); }
.detail-actions, .variant-bar { display: flex; gap: 8px; flex-wrap: wrap; }
.variant-bar { margin-bottom: 14px; }
.variant-bar [aria-pressed=true] { color: #fffdf4; background: var(--pine); border-color: var(--pine); }
.video-panel { padding: 14px; }
.video-stage { display: grid; place-items: center; min-height: 125px; border-radius: 11px; background: #111b18; overflow: hidden; }
.video-stage video { width: 100%; max-height: min(70vh, 645px); display: block; outline-offset: -3px; }
.video-stage.vertical video { width: auto; max-width: 100%; }
.job-status { padding: 24px; }
.job-status > * + * { margin-top: 12px; }
.progress-row { max-width: 530px; display: flex; align-items: center; gap: 10px; font-size: 13px; }
.progress-row progress { width: 100%; height: 13px; accent-color: var(--pine); }
.editor .work-section { padding-block: 21px; }
.scene-card { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; }
.scene-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px; margin-bottom: 11px; }
.scene-header h2 { font-size: 17px; }
.scene-header span { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.scene-field { margin-bottom: 11px; }

@media (max-width: 720px) {
  .shell { padding-inline: 16px; }
  .main { padding-top: 23px; }
  .workspace { grid-template-columns: 1fr; }
  .hero { min-height: 190px; padding: 25px; }
  .hero-visual { width: 155px; padding-inline: 0; padding-left: 10px; }
  .page-heading { align-items: start; flex-direction: column; }
}

@media (max-width: 460px) {
  .topbar-inner { min-height: 67px; gap: 8px; }
  .brand { gap: 6px; font-size: 13px; }
  .brand-mark { width: 32px; height: 32px; border-radius: 8px; }
  .brand-mark svg { width: 19px; }
  .nav { gap: 1px; }
  .nav a { padding: 8px 7px; font-size: 12px; }
  .hero-visual { display: none; }
  .hero { min-height: 161px; padding: 22px; }
  .work-section, .form-footer { padding-inline: 16px; }
  .field-grid, .field-grid.with-aspect { grid-template-columns: 1fr; gap: 10px; }
  .scene-card { grid-template-columns: 1fr; }
  .scene-card .step { justify-self: start; }
  .form-footer .button { width: 100%; }
}