:root {
  --ink: #18241f;
  --muted: #718078;
  --line: #dfe7e2;
  --soft: #f4f7f5;
  --panel: #ffffff;
  --sidebar: #12221c;
  --sidebar-soft: #1d3229;
  --green: #277a5b;
  --green-2: #3f9674;
  --lime: #c8ff52;
  --lime-soft: #efffcd;
  --danger: #d45d53;
  --shadow: 0 12px 32px rgba(27, 55, 43, 0.09);
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  color: var(--ink);
  background: var(--soft);
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 1180px; background: var(--soft); }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 96px 238px minmax(0, 1fr); }

.loading-screen {
  grid-column: 1 / -1; min-height: 100vh; display: grid; place-content: center; gap: 12px;
  text-align: center; color: var(--muted);
}
.brand-mark {
  width: 46px; height: 46px; margin: auto; border-radius: 13px; display: grid; place-items: center;
  background: var(--lime); color: var(--sidebar); font-weight: 900; font-size: 20px;
}
.brand-logo { width: 46px; height: 46px; display: block; object-fit: cover; border: 2px solid rgba(255,255,255,.75); border-radius: 15px; box-shadow: 0 10px 24px rgba(0,0,0,.2); }
.loading-logo { width: 58px; height: 58px; margin: auto; border-radius: 18px; }

.primary-sidebar {
  position: sticky; top: 0; height: 100vh; padding: 18px 10px 14px; background: var(--sidebar);
  color: #c8d5cf; display: flex; flex-direction: column; z-index: 4;
}
.logo { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 2px 0 24px; }
.logo .brand-logo { width: 46px; height: 46px; border-radius: 14px; }
.logo strong { color: #fff; font-size: 11px; line-height: 1.45; text-align: center; letter-spacing: .2px; }
.main-nav { display: flex; flex-direction: column; gap: 7px; }
.nav-button {
  position: relative; width: 100%; border: 0; border-radius: 10px; background: transparent; color: #9eb0a8;
  padding: 11px 5px; display: flex; flex-direction: column; align-items: center; gap: 5px; cursor: pointer;
  transition: .18s ease;
}
.nav-button:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav-button.active { background: var(--lime); color: #16241e; font-weight: 700; }
.nav-icon { width: 22px; height: 22px; display: grid; place-items: center; font-size: 17px; }
.nav-button .count {
  position: absolute; top: 6px; right: 12px; min-width: 17px; height: 17px; border-radius: 10px;
  background: #f7a95c; color: #321b07; font-size: 10px; line-height: 17px;
}
.sidebar-footer { margin-top: auto; display: grid; gap: 9px; }
.sync-card { padding: 10px 7px; border-radius: 10px; background: var(--sidebar-soft); text-align: center; font-size: 11px; line-height: 1.5; }
.sync-dot { display: inline-block; width: 7px; height: 7px; margin-right: 4px; border-radius: 50%; background: #46d89c; box-shadow: 0 0 8px #46d89c; }

.episode-sidebar {
  position: sticky; top: 0; height: 100vh; background: #f8faf9; border-right: 1px solid var(--line);
  display: flex; flex-direction: column; z-index: 3;
}
.project-head { padding: 19px 16px 14px; border-bottom: 1px solid var(--line); }
.eyebrow { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .6px; }
.project-title { margin-top: 6px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.project-title strong { font-size: 15px; }
.icon-button, .small-button {
  border: 1px solid var(--line); background: #fff; border-radius: 8px; cursor: pointer; transition: .18s ease;
}
.icon-button { width: 31px; height: 31px; font-size: 17px; }
.icon-button:hover, .small-button:hover { border-color: #9ebcad; background: #f8fffb; }
.episode-list { padding: 10px; overflow: auto; display: flex; flex-direction: column; gap: 4px; }
.episode-row { position: relative; }
.episode-item {
  width: 100%; border: 0; background: transparent; padding: 10px 9px; border-radius: 8px; display: flex;
  align-items: center; gap: 9px; text-align: left; cursor: pointer; color: #33423b; padding-right: 35px;
}
.episode-item:hover { background: #eef3f0; }
.episode-item.active { background: #e4eee9; color: #173326; box-shadow: inset 3px 0 var(--green); }
.episode-no { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 7px; background: #e5ebe8; font-size: 10px; font-weight: 800; }
.episode-item span:nth-child(2) { font-size: 13px; font-weight: 650; }
.episode-state { margin-left: auto; width: 6px; height: 6px; border-radius: 50%; background: #bac6c0; }
.episode-state.ready { background: #3cac7c; }
.episode-state.working { background: #f2a640; box-shadow: 0 0 0 3px #fff0d8; }
.episode-delete {
  position: absolute; top: 50%; right: 7px; width: 25px; height: 25px; transform: translateY(-50%);
  border: 0; border-radius: 6px; background: #fff; color: var(--danger); font-size: 11px; font-weight: 750; line-height: 1;
  opacity: .58; cursor: pointer; box-shadow: 0 1px 5px rgba(31,47,39,.12); transition: .16s ease;
}
.episode-row:hover .episode-delete, .episode-delete:focus-visible, .episode-item.active + .episode-delete { opacity: 1; }
.episode-delete:hover { background: #fff0ee; }
.episode-row:hover .episode-state { opacity: 0; }
.new-episode { margin: auto 10px 12px; padding: 10px; border: 1px dashed #b8c7c0; border-radius: 8px; background: transparent; color: var(--green); cursor: pointer; }

.main { min-width: 0; background: #fff; }
.workflow-bar {
  position: sticky; top: 0; z-index: 2; height: 62px; padding: 0 26px; display: flex; align-items: center;
  justify-content: space-between; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.94); backdrop-filter: blur(12px);
}
.workflow-steps { display: flex; align-items: center; gap: 7px; height: 100%; }
.step-button {
  height: 100%; padding: 0 13px; border: 0; border-bottom: 3px solid transparent; background: transparent;
  color: #87958e; cursor: pointer; display: flex; align-items: center; gap: 7px;
}
.step-button.done { color: #5c8d77; }
.step-button.active { color: #173d2d; border-bottom-color: var(--green); font-weight: 700; }
.step-dot { width: 21px; height: 21px; border: 1px solid #c7d3cd; border-radius: 50%; display: grid; place-items: center; font-size: 11px; }
.step-button.done .step-dot { background: #e6f5ee; border-color: #9bd1b9; }
.step-button.active .step-dot { color: #fff; background: var(--green); border-color: var(--green); }
.workflow-actions { display: flex; align-items: center; gap: 8px; }
.button {
  min-height: 36px; padding: 0 13px; border: 1px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; transition: .18s ease;
}
.button:hover { border-color: #9fbaad; transform: translateY(-1px); }
.button.primary { border-color: var(--lime); background: var(--lime); color: #173020; font-weight: 750; }
.button.green { border-color: var(--green); background: var(--green); color: #fff; }
.button.ghost { background: #f7faf8; }
.button.danger { color: var(--danger); }
.button.danger.solid { border-color: var(--danger); background: var(--danger); color: #fff; }
.button:disabled { opacity: .55; cursor: default; transform: none; }

.content { min-height: calc(100vh - 62px); padding: 24px 28px 48px; background: #fbfcfb; }
.page-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.page-heading h1 { margin: 3px 0 6px; font-size: 24px; letter-spacing: -.5px; }
.page-heading p { margin: 0; color: var(--muted); font-size: 13px; }
.heading-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.control-strip {
  display: grid; grid-template-columns: minmax(420px, 1.35fr) minmax(220px, .65fr); gap: 1px; margin-bottom: 18px; border: 1px solid var(--line);
  border-radius: 10px; overflow: hidden; background: var(--line);
}
.control-item { min-width: 0; padding: 11px 13px; background: #f7faf8; display: flex; align-items: center; gap: 9px; }
.control-item label { white-space: nowrap; font-size: 12px; color: var(--muted); }
.control-item select { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: var(--ink); font-weight: 600; }
.range { flex: 1; accent-color: var(--green); }

.section-tabs { display: flex; align-items: center; gap: 4px; margin-bottom: 14px; }
.tab { border: 0; background: transparent; color: var(--muted); padding: 7px 11px; border-radius: 7px; cursor: pointer; }
.tab.active { background: #e4f1ea; color: var(--green); font-weight: 750; }
.asset-grid { display: grid; grid-template-columns: repeat(2, minmax(380px, 1fr)); gap: 18px; }
.asset-card { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 3px 12px rgba(27,55,43,.03); }
.asset-visual { position: relative; height: clamp(320px, 28vw, 430px); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.asset-visual::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 20%, rgba(255,255,255,.9), transparent 40%); }
.asset-visual.jade { background: linear-gradient(135deg,#e1eee8,#f8faf9); }
.asset-visual.amber { background: linear-gradient(135deg,#f0e7d8,#faf8f2); }
.asset-visual.brick { background: linear-gradient(160deg,#d8b597,#aa7657 47%,#58483b); }
.asset-visual.wood { background: linear-gradient(155deg,#dcc4a5,#88684c 48%,#332b25); }
.asset-visual.prop-blue { background: linear-gradient(145deg,#e2edf1,#a9c3cc); }
.asset-visual.prop-gold { background: linear-gradient(145deg,#f2ead7,#cdb47c); }
.asset-visual.prop-slate { background: linear-gradient(145deg,#e3e7e8,#87969b); }
.asset-image { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center; background: #f7f8f7; }
.asset-progress-overlay { position: absolute; z-index: 5; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 28px; color: #fff; text-align: center; background: rgba(15,35,27,.48); backdrop-filter: blur(2px); }
.asset-progress-ring { --asset-progress: 0; position: relative; width: 104px; height: 104px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(#baff48 calc(var(--asset-progress) * 1%), rgba(255,255,255,.22) 0); box-shadow: 0 14px 42px rgba(0,0,0,.22); }
.asset-progress-ring::after { content: ""; position: absolute; inset: 8px; border-radius: inherit; background: rgba(17,43,32,.9); box-shadow: inset 0 0 0 1px rgba(255,255,255,.13); }
.asset-progress-ring span { position: relative; z-index: 2; font-size: 22px; font-weight: 850; letter-spacing: -.5px; }
.asset-progress-ring.indeterminate { background: rgba(255,255,255,.18); }
.asset-progress-ring.indeterminate::before { content: ""; position: absolute; inset: 0; border: 8px solid rgba(255,255,255,.2); border-top-color: #baff48; border-right-color: #75dca8; border-radius: inherit; animation: asset-ring-spin .9s linear infinite; }
.asset-progress-overlay > strong { margin-top: 16px; font-size: 17px; letter-spacing: .2px; }
.asset-progress-overlay > small { max-width: 82%; margin-top: 7px; overflow: hidden; color: rgba(255,255,255,.78); font-size: 11px; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.asset-progress-overlay.queued { background: rgba(31,45,39,.4); }
.asset-progress-overlay.queued .asset-progress-ring.indeterminate::before { border-top-color: #dce8e2; border-right-color: #91a79d; animation-duration: 1.4s; }
.asset-progress-overlay.failed { background: rgba(80,26,23,.54); }
.asset-progress-overlay.failed .asset-progress-ring { background: conic-gradient(#ff766c 100%, #ff766c 0); }
.asset-progress-overlay.failed .asset-progress-ring::after { background: rgba(84,27,24,.92); }
@keyframes asset-ring-spin { to { transform: rotate(360deg); } }
.submit-asset-button { border-color: #75b997; background: #edf8f2; color: #176744; font-weight: 750; }
.submit-asset-button:hover { border-color: var(--green); background: #dff2e8; }
.submit-asset-button:disabled { opacity: .72; cursor: wait; background: #eef2f0; color: #6a7771; }
.portrait { position: relative; z-index: 1; width: 160px; height: 226px; }
.portrait .head { position: absolute; top: 18px; left: 51px; width: 61px; height: 74px; border-radius: 46% 46% 44% 44%; background: #d7b59a; box-shadow: inset 0 10px #303632; }
.portrait .body { position: absolute; left: 25px; bottom: -8px; width: 112px; height: 140px; border-radius: 48px 48px 10px 10px; background: #263b34; }
.portrait.female .head { box-shadow: inset 0 14px #242b29, -10px 13px 0 -3px #242b29, 10px 13px 0 -3px #242b29; }
.portrait.female .body { background: #344e56; }
.turnaround { position: absolute; right: 9%; bottom: 28px; display: flex; gap: 12px; opacity: .5; }
.mini-person { position: relative; width: 33px; height: 112px; }
.mini-person::before { content: ""; position: absolute; top: 0; left: 7px; width: 19px; height: 23px; border-radius: 50%; background: #c8a68e; }
.mini-person::after { content: ""; position: absolute; top: 21px; left: 3px; width: 27px; height: 82px; border-radius: 10px 10px 3px 3px; background: #33443c; }
.scene-symbol { position: relative; z-index: 1; width: 76%; height: 72%; border: 3px solid rgba(255,255,255,.55); border-bottom: 0; }
.scene-symbol::before { content: ""; position: absolute; left: 28%; bottom: 0; width: 31%; height: 73%; border: 3px solid rgba(255,255,255,.65); border-bottom: 0; }
.scene-symbol::after { content: ""; position: absolute; left: -10%; right: -10%; bottom: 0; height: 3px; background: rgba(255,255,255,.55); }
.prop-symbol { position: relative; z-index: 1; width: 145px; height: 145px; border-radius: 22px; background: rgba(255,255,255,.78); box-shadow: 0 22px 45px rgba(35,55,48,.15); transform: rotate(-4deg); }
.prop-symbol::before { content: ""; position: absolute; left: 24px; right: 24px; top: 27px; height: 12px; border-radius: 8px; background: rgba(39,122,91,.5); }
.prop-symbol::after { content: ""; position: absolute; left: 24px; right: 45px; top: 55px; height: 48px; border-radius: 5px; border: 3px solid rgba(39,122,91,.24); }
.prop-symbol i { position: absolute; bottom: -15px; width: 42px; height: 70px; border-radius: 18px 18px 8px 8px; background: rgba(255,255,255,.55); }
.prop-symbol i:nth-child(1) { left: -56px; }.prop-symbol i:nth-child(2) { right: -56px; }.prop-symbol i:nth-child(3) { right: -105px; opacity: .65; }
.visual-badge { position: absolute; z-index: 2; top: 12px; left: 12px; padding: 5px 8px; border-radius: 6px; background: rgba(255,255,255,.86); font-size: 11px; font-weight: 700; }
.asset-download-button { position: absolute; z-index: 6; top: 10px; right: 10px; min-height: 30px; padding: 0 10px; display: inline-flex; align-items: center; border: 1px solid rgba(23,111,76,.35); border-radius: 7px; background: rgba(247,255,251,.96); color: #16764f; font-size: 12px; font-weight: 800; text-decoration: none; cursor: pointer; box-shadow: 0 2px 8px rgba(17,72,48,.13); }
.asset-download-button:hover { background: #ecfff4; border-color: #16764f; }
.asset-download-button.disabled { opacity: .58; cursor: default; }
.face-grid-button { color: #c52b34; border-color: #f0b6bc; background: #fff8f8; }
.face-grid-button:hover { background: #fff0f1; border-color: #d93b45; }
.face-grid-modal { width: min(880px, calc(100vw - 32px)); }
.face-grid-modal .modal-head { align-items: flex-start; }
.face-grid-modal .modal-head p { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.face-grid-preview { position: relative; width: min(100%, 680px); max-height: min(65vh, 680px); margin: 0 auto; overflow: auto; border: 1px solid #e8ece9; border-radius: 10px; background: #f8faf9; }
.face-grid-preview > img { display: block; width: 100%; height: auto; opacity: 0; pointer-events: none; }
.face-grid-preview > canvas { position: absolute; inset: 0; width: 100%; height: auto; display: block; }
#face-grid-status { min-height: 20px; margin: 12px 0 4px; color: #247854; font-weight: 650; }

.asset-info { padding: 14px 15px; }
.asset-title { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.asset-title h3 { margin: 0 0 4px; font-size: 16px; }
.asset-title p { margin: 0; color: var(--muted); font-size: 11px; }
.version { padding: 4px 7px; border-radius: 6px; background: #edf5f1; color: var(--green); font-size: 11px; font-weight: 700; }
.asset-description { margin: 12px 0; color: #536159; font-size: 12px; }
.card-actions { display: flex; gap: 8px; border-top: 1px solid #edf1ef; padding-top: 11px; }
.small-button { min-height: 31px; padding: 0 9px; font-size: 12px; }

.shot-grid { display: grid; grid-template-columns: repeat(4, minmax(215px, 1fr)); gap: 14px; }
.shot-card { border: 1px solid var(--line); background: #fff; border-radius: 12px; overflow: hidden; }
.shot-preview { position: relative; aspect-ratio: 9 / 13; overflow: hidden; }
.shot-preview.brick { background: linear-gradient(120deg,#d4aa81 0 23%,#6e4936 23% 46%,#d7c3a7 46% 58%,#5b3b2e 58%); }
.shot-preview.shadow { background: linear-gradient(90deg,#1d201d,#322a23 42%,#e7c18e 44% 55%,#22221f 57%); }
.shot-preview.wood { background: radial-gradient(circle at 56% 39%,#d1a47d 0 8%,transparent 9%),linear-gradient(130deg,#2f2924,#8a6547 48%,#171817); }
.shot-preview.sunset { background: linear-gradient(#f0c594,#e89f5e 42%,#736550 43% 50%,#282d29 51%); }
.shot-preview::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 55%,rgba(8,12,10,.55)); }
.play { position: absolute; z-index: 1; top: 50%; left: 50%; width: 42px; height: 42px; border-radius: 50%; transform: translate(-50%,-50%); display: grid; place-items: center; border: 0; background: rgba(255,255,255,.9); cursor: pointer; color: var(--green); }
.shot-top { position: absolute; z-index: 1; top: 10px; left: 10px; right: 10px; display: flex; justify-content: space-between; }
.shot-top span { padding: 5px 7px; border-radius: 6px; background: rgba(20,30,25,.7); color: #fff; font-size: 10px; }
.shot-caption { position: absolute; z-index: 1; left: 12px; right: 12px; bottom: 12px; color: #fff; }
.shot-caption strong { display: block; font-size: 14px; margin-bottom: 3px; }
.shot-caption small { opacity: .8; }
.shot-meta { padding: 12px; }
.prompt { color: #637067; font-size: 11px; line-height: 1.55; height: 52px; overflow: hidden; }
.shot-actions { display: flex; gap: 6px; margin-top: 10px; }

.script-layout { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(300px,.6fr); gap: 18px; }
.paper, .side-panel, .panel { border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.paper { padding: 30px 34px; box-shadow: var(--shadow); }
.paper h2 { margin: 0 0 8px; font-size: 21px; }
.summary { color: var(--muted); line-height: 1.8; font-size: 13px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.scene { padding: 20px 0; border-bottom: 1px solid #edf1ef; }
.scene:last-child { border-bottom: 0; }
.scene h3 { margin: 0 0 12px; font-size: 14px; }
.scene p { margin: 0; color: #445149; line-height: 1.9; font-size: 14px; }
.side-panel { padding: 18px; height: fit-content; }
.side-panel h3 { margin: 0 0 14px; font-size: 15px; }
.stat-list { display: grid; gap: 12px; }
.stat-row { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); }
.stat-row strong { color: var(--ink); }
.checklist { margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.check { display: flex; align-items: center; gap: 9px; font-size: 12px; }
.check i { width: 19px; height: 19px; border-radius: 50%; display: grid; place-items: center; background: #e7f6ef; color: var(--green); font-style: normal; }

.storyboard { display: grid; gap: 10px; }
.board-row { display: grid; grid-template-columns: 115px 150px minmax(280px,1fr) 100px 190px; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.board-row.header { border: 0; background: transparent; color: var(--muted); font-size: 11px; padding-top: 0; padding-bottom: 2px; }
.board-thumb { height: 76px; border-radius: 8px; background: linear-gradient(135deg,#d0ae8c,#60483c); }
.board-thumb.shadow { background: linear-gradient(90deg,#1d201d,#d2aa78,#24221f); }
.board-thumb.wood { background: linear-gradient(135deg,#3b3028,#a87954); }
.board-thumb.sunset { background: linear-gradient(#edbd87,#d98249,#3b4038); }
.board-title strong { display: block; margin-bottom: 5px; }
.board-title small, .board-prompt { color: var(--muted); font-size: 11px; line-height: 1.5; }
.board-prompt { max-height: 68px; overflow: hidden; white-space: pre-line; }
.duration { font-weight: 700; color: var(--green); }
.storyboard-empty { grid-column: 1 / -1; min-height: 360px; display: grid; place-content: center; justify-items: center; gap: 10px; border: 1px dashed #cbd8d1; border-radius: 12px; background: #fff; text-align: center; color: var(--muted); }
.storyboard-empty h3 { margin: 3px 0 0; color: var(--ink); }
.storyboard-empty p { margin: 0 0 8px; font-size: 12px; }
.empty-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: #e7f4ed; color: var(--green); font-weight: 800; font-size: 18px; }

.import-layout { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 18px; align-items: start; }
.import-panel, .import-guide, .import-preview { border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.import-panel { padding: 20px; }
.import-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }
.import-tab { min-height: 76px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: #fff; display: flex; align-items: center; gap: 11px; text-align: left; cursor: pointer; }
.import-tab:hover { border-color: #9ebcac; }
.import-tab.active { border-color: var(--green); background: #f1faf5; box-shadow: inset 0 0 0 1px var(--green); }
.import-tab b { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 9px; background: #e7f3ed; color: var(--green); }
.import-tab span { display: grid; gap: 4px; }
.import-tab strong { font-size: 13px; }
.import-tab small { color: var(--muted); font-size: 11px; }
.import-pane { display: grid; gap: 8px; }
.import-pane > label { font-size: 12px; font-weight: 700; }
.paste-area { min-height: 330px; width: 100%; resize: vertical; border: 1px solid var(--line); border-radius: 10px; padding: 15px; outline: none; color: #33423b; line-height: 1.7; background: #fbfcfb; }
.paste-area:focus { border-color: var(--green); box-shadow: 0 0 0 3px #e4f3eb; background: #fff; }
.upload-zone { min-height: 330px; border: 1px dashed #aabeb4; border-radius: 10px; background: #f8fbf9; display: grid; place-content: center; justify-items: center; gap: 8px; cursor: pointer; color: var(--muted); }
.upload-zone:hover { border-color: var(--green); background: #f0f8f4; }
.compact-upload { min-height: 240px; }
.upload-zone strong { color: var(--ink); font-size: 14px; }
.upload-zone small { font-weight: 400; }
.upload-icon { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 50%; background: #e2f2ea; color: var(--green); font-size: 23px; }
.import-options { display: grid; grid-template-columns: minmax(240px, 1fr) auto; align-items: end; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.import-options .field { max-width: 360px; }
.import-options select { border: 1px solid var(--line); border-radius: 8px; padding: 9px 10px; background: #fff; }
.import-run { min-width: 130px; }
.import-option-actions { display: flex; gap: 8px; }
.import-guide { padding: 20px; }
.import-guide h3 { margin: 0 0 18px; font-size: 15px; }
.import-guide ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 19px; counter-reset: rules; }
.import-guide li { position: relative; padding-left: 34px; display: grid; gap: 3px; counter-increment: rules; }
.import-guide li::before { content: counter(rules); position: absolute; left: 0; top: 0; width: 23px; height: 23px; display: grid; place-items: center; border-radius: 50%; background: #e6f4ed; color: var(--green); font-size: 11px; font-weight: 800; }
.import-guide li b { font-size: 12px; }
.import-guide li span { color: var(--muted); font-size: 11px; line-height: 1.5; }
.import-preview { margin-top: 18px; padding: 20px; }
.preview-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.preview-head h2 { margin: 9px 0 0; font-size: 17px; }
.success-pill { padding: 5px 8px; border-radius: 6px; background: #e1f4ea; color: var(--green); font-size: 11px; font-weight: 750; }
.preview-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.preview-item { min-width: 0; padding: 10px 11px; border: 1px solid #e7ece9; border-radius: 8px; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 8px; }
.preview-item b { color: var(--green); font-size: 11px; }
.preview-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.preview-item small { color: var(--muted); font-size: 10px; }
.preview-more { grid-column: 1 / -1; padding: 9px; border-radius: 7px; background: #f5f8f6; text-align: center; color: var(--muted); font-size: 11px; }

.batch-plan { margin-bottom: 18px; padding: 18px; border: 1px solid #b9dbc9; border-radius: 12px; background: linear-gradient(135deg,#f2faf6,#fff); }
.batch-plan-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 14px; }
.batch-plan-head h2 { margin: 8px 0 4px; font-size: 16px; }
.batch-plan-head p { margin: 0; color: var(--muted); font-size: 11px; }
.batch-plan-grid { display: grid; grid-template-columns: repeat(4,minmax(190px,1fr)); gap: 8px; }
.batch-plan-item { min-width: 0; padding: 11px; border: 1px solid #dce8e1; border-radius: 9px; background: #fff; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 5px 8px; text-align: left; cursor: pointer; }
.batch-plan-item:hover { border-color: var(--green); box-shadow: 0 4px 12px rgba(39,122,91,.08); }
.batch-plan-item b { color: var(--green); font-size: 11px; }
.batch-plan-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.batch-plan-item small { color: var(--muted); font-size: 10px; }
.batch-plan-item em { grid-column: 1 / -1; color: #506159; font-style: normal; font-size: 10px; }
.batch-video-card .shot-caption small { white-space: normal; line-height: 1.5; }
.batch-modal { width: min(820px,92vw); }
.batch-timeline { display: flex; min-height: 70px; overflow: hidden; border: 1px solid #c9ddd2; border-radius: 9px; }
.batch-timeline > div { min-width: 0; padding: 11px 9px; display: grid; align-content: center; gap: 3px; background: #e8f5ee; border-right: 2px solid #fff; }
.batch-timeline > div:nth-child(even) { background: #f3f8e8; }
.batch-timeline > div:last-child { border-right: 0; }
.batch-timeline b { font-size: 12px; }
.batch-timeline span { color: var(--green); font-size: 11px; font-weight: 800; }
.batch-timeline small { color: var(--muted); font-size: 10px; }
.batch-prompt { resize: vertical; font-family: "Microsoft YaHei",sans-serif; font-size: 12px; line-height: 1.7; }

.video-studio { display: grid; grid-template-columns: minmax(560px,1.55fr) minmax(250px,.62fr) minmax(230px,.52fr); gap: 14px; align-items: start; }
.generator-panel, .preview-panel, .history-panel { border: 1px solid var(--line); border-radius: 12px; background: #fff; padding: 16px; min-width: 0; }
.studio-section-head { display: flex; align-items: start; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.studio-section-head h3 { margin: 0 0 4px; font-size: 14px; }
.studio-section-head p { margin: 0; color: var(--muted); font-size: 10px; }
.reference-grid { display: grid; grid-template-columns: repeat(5,minmax(105px,1fr)); gap: 8px; margin-bottom: 15px; }
.reference-card { min-width: 0; padding: 7px; border: 1px solid var(--line); border-radius: 9px; background: #fafcfb; display: grid; gap: 5px; }
.reference-card.ready { border-color: #8bc8aa; background: #f2faf6; }
.reference-card.missing { border-color: #e6a39c; background: #fff7f6; }
.reference-card.waiting { border-color: #e3c88f; background: #fffbf3; }
.reference-thumb { position: relative; height: 82px; border-radius: 7px; display: grid; place-items: center; overflow: hidden; background: linear-gradient(145deg,#e6eeea,#bfd0c8); color: var(--green); font-size: 22px; font-weight: 800; }
.reference-thumb img { width: 100%; height: 100%; object-fit: contain; object-position: center; background: #f7f8f7; }
.reference-thumb i { position: absolute; left: 0; right: 0; bottom: 0; padding: 3px; background: rgba(24,39,32,.72); color: #fff; text-align: center; font-style: normal; font-size: 9px; }
.reference-card strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.reference-card small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 9px; }
.reference-card > .small-button { width: 100%; }
.reference-actions { display: flex; gap: 4px; }
.reference-actions .small-button { flex: 1; min-width: 0; padding: 0 5px; }
.studio-prompt { font-family: "Microsoft YaHei",sans-serif; font-size: 12px; line-height: 1.65; }
.studio-toolbar { margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 18px; }
.studio-toolbar > div { display: grid; gap: 3px; }
.studio-toolbar span { color: var(--muted); font-size: 9px; }
.studio-toolbar strong { font-size: 12px; }
.studio-toolbar .button { margin-left: auto; min-width: 180px; }
.preview-panel, .history-panel { position: sticky; top: 82px; }
.video-placeholder { aspect-ratio: 9/15; margin-bottom: 12px; border-radius: 9px; display: grid; place-content: center; justify-items: center; gap: 8px; background: linear-gradient(160deg,#24352d,#101713); color: #fff; }
.video-placeholder span { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.9); color: var(--green); }
.video-placeholder small { opacity: .65; }
.generated-video-player { width: 100%; aspect-ratio: 9/15; margin-bottom: 12px; border-radius: 9px; background: #0d1411; object-fit: contain; }
.generated-shot-video { position: absolute; inset: 0; width: 100%; height: 100%; background: #0d1411; object-fit: contain; }
.shot-preview.video-ready { position: relative; overflow: hidden; background: #0d1411; }
.shot-preview.video-ready::after { display: none; }
.shot-preview.video-ready .generated-shot-video { z-index: 1; pointer-events: auto; }
.shot-preview.video-ready .shot-top { z-index: 2; pointer-events: none; }
.video-error-note { margin: 8px 0; color: #a33b2e; font-size: 12px; line-height: 1.45; }
.video-download-button { display: flex; justify-content: center; text-decoration: none; }
.failed-video-card { border-color: #efa8a2; box-shadow: 0 8px 24px rgba(180,66,57,.09); }
.submit-video-button { border-color: #8fc7ac; color: #176a4c; font-weight: 760; }
.preview-panel > .button { width: 100%; }
.history-panel { display: grid; gap: 8px; }
.history-item { padding: 10px; border: 1px solid var(--line); border-radius: 8px; display: grid; gap: 5px; }
.history-item .status { width: fit-content; }
.history-item strong { font-size: 11px; }
.history-item small { color: var(--muted); font-size: 9px; }
.video-history-modal { width: min(1180px, calc(100vw - 42px)); max-height: min(86vh, 900px); display: flex; flex-direction: column; }
.video-history-modal .modal-body { overflow: auto; }
.video-history-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); align-items: start; }
.video-history-card { display: grid; gap: 8px; padding: 9px; border: 1px solid var(--line); border-radius: 10px; background: #fafcfb; }
.video-history-card.selected { border-color: #3c9a70; background: #f1faf5; box-shadow: inset 0 0 0 1px rgba(60,154,112,.15); }
.video-history-card video { width: 100%; aspect-ratio: 9/15; border-radius: 7px; background: #101613; object-fit: contain; }
.video-history-card strong { font-size: 12px; color: var(--ink); }
.video-history-card small { color: var(--muted); font-size: 10px; line-height: 1.4; }
.history-card-actions { display: flex; gap: 7px; flex-wrap: wrap; }
@media (max-width: 1500px) {
  .video-studio { grid-template-columns: minmax(520px,1.4fr) minmax(240px,.6fr); }
  .history-panel { position: static; grid-column: 1 / -1; grid-template-columns: repeat(4,1fr); }
  .history-panel .studio-section-head { grid-column: 1 / -1; }
  .reference-grid { grid-template-columns: repeat(4,minmax(100px,1fr)); }
}

.panel { overflow: hidden; }
.table { width: 100%; border-collapse: collapse; }
.table th { padding: 12px 14px; background: #f6f8f7; border-bottom: 1px solid var(--line); color: var(--muted); text-align: left; font-size: 11px; font-weight: 650; }
.table td { padding: 14px; border-bottom: 1px solid var(--line); font-size: 12px; vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.task-name { display: flex; align-items: center; gap: 10px; }
.task-icon { width: 31px; height: 31px; border-radius: 8px; background: #e5f1eb; display: grid; place-items: center; color: var(--green); }
.task-name strong { display: block; margin-bottom: 3px; }
.task-name small { color: var(--muted); }
.status { display: inline-block; min-width: 54px; padding: 5px 8px; border-radius: 6px; text-align: center; font-size: 11px; }
.status.completed { color: #16734f; background: #e2f3eb; }
.status.running { color: #9b630c; background: #fff0d3; }
.status.queued { color: #5f6976; background: #ebeff2; }
.status.failed { color: #b8382f; background: #fde8e6; }
.progress-track { width: 130px; height: 5px; border-radius: 5px; background: #e5ebe8; overflow: hidden; }
.progress-fill { height: 100%; background: var(--green-2); border-radius: inherit; transition: width .4s ease; }
.progress-fill.indeterminate { animation: task-progress 1.2s ease-in-out infinite alternate; }
.progress-label { margin-top: 5px; color: var(--muted); font-size: 10px; }
.task-message { display: block; max-width: 210px; margin-top: 5px; color: #a14a42; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page-progress-summary {
  margin-bottom: 16px; padding: 16px 18px; border: 1px solid #dce7e1; border-radius: 12px;
  background: linear-gradient(115deg,#f7faf8,#eef7f2); box-shadow: 0 8px 24px rgba(34,83,62,.06);
}
.page-progress-summary.working { border-color: #b7d8c8; background: linear-gradient(115deg,#f6fbf8,#edfaF3); }
.page-progress-main { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.page-progress-main h3 { margin: 4px 0 0; font-size: 15px; }
.page-progress-main > strong { color: var(--green); font-size: 24px; letter-spacing: -.5px; }
.page-progress-track { height: 7px; margin: 13px 0 11px; overflow: hidden; border-radius: 999px; background: #dfe8e3; }
.page-progress-track > div { height: 100%; min-width: 0; border-radius: inherit; background: linear-gradient(90deg,#277a5b,#61b58e); transition: width .5s ease; }
.page-progress-meta { display: flex; align-items: center; gap: 18px; color: var(--muted); font-size: 11px; }
.page-progress-meta b { color: #283a31; }
.page-progress-meta em { min-width: 0; margin-left: auto; overflow: hidden; color: #497060; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.progress-failed-count { color: var(--danger); }
.progress-failed-button, .failed-assets-button, .failed-tab {
  border: 1px solid #f0b4af; background: #fff1ef; color: #b8443c; font-weight: 780;
}
.progress-failed-button { margin-left: 3px; padding: 3px 7px; border-radius: 999px; cursor: pointer; font-size: 11px; }
.failed-assets-button { border-color: #e68780; box-shadow: 0 5px 14px rgba(194,68,58,.11); }
.failed-assets-button.active, .failed-tab.active { border-color: #d45d53; background: #d45d53; color: #fff; }
.failed-tab { margin-left: 5px; }
.failed-asset-card { border-color: #efa8a2; box-shadow: 0 8px 24px rgba(180,66,57,.09); }
.asset-failure-note { display: grid; gap: 4px; margin: 12px 0 2px; padding: 9px 10px; border: 1px solid #f2c3bf; border-radius: 8px; background: #fff5f3; color: #a94039; }
.asset-failure-note strong { font-size: 12px; }
.asset-failure-note span { overflow: hidden; color: #b56a64; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.asset-auto-reference { display:flex; flex-wrap:wrap; gap:5px; align-items:center; margin:8px 0 2px; padding:7px 8px; border:1px solid #b9d5ff; border-radius:8px; background:#edf5ff; color:#24578e; font-size:11px; line-height:1.35; }
.asset-auto-reference b { color:#1768b6; white-space:nowrap; }
.asset-auto-reference span { color:#3d6187; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.inline-task-progress { margin: 10px 0; padding: 10px 11px; border: 1px solid #e0e8e4; border-radius: 9px; background: #f6f8f7; }
.inline-progress-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 11px; }
.inline-progress-head span { display: inline-flex; align-items: center; gap: 6px; color: #56675f; font-weight: 700; }
.inline-progress-head span i { width: 7px; height: 7px; border-radius: 50%; background: #9aaaa2; }
.inline-progress-head strong { font-size: 10px; }
.inline-progress-track { height: 6px; margin: 8px 0 7px; overflow: hidden; border-radius: 999px; background: #dfe7e3; }
.inline-progress-fill { height: 100%; border-radius: inherit; background: var(--green-2); transition: width .45s ease; }
.inline-progress-fill.indeterminate { animation: task-progress 1.15s ease-in-out infinite alternate; }
.inline-task-progress > small { display: block; overflow: hidden; color: #75847c; font-size: 10px; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.inline-task-progress.running { border-color: #d8c99c; background: #fffaec; }
.inline-task-progress.running .inline-progress-head span i { background: #e2a72f; box-shadow: 0 0 0 3px rgba(226,167,47,.14); }
.inline-task-progress.queued .inline-progress-head span i { background: #8a9a92; }
.inline-task-progress.completed { border-color: #cbe2d6; background: #edf8f2; }
.inline-task-progress.completed .inline-progress-head span i { background: #36a475; }
.inline-task-progress.failed { border-color: #efcfcb; background: #fff2f0; }
.inline-task-progress.failed .inline-progress-head span i { background: var(--danger); }
.inline-task-progress.failed .inline-progress-fill { background: var(--danger); }
.inline-task-progress.failed > small { color: #af5149; }
.video-inline-progress { margin-top: 12px; }
.studio-inline-progress { margin: 17px 0 4px; }
.preview-inline-progress { margin: 0 0 12px; }
.asset-task-state { margin: 10px 0; padding: 8px 10px; border-radius: 8px; background: #f3f6f4; display: grid; grid-template-columns: auto 1fr; gap: 3px 8px; align-items: center; font-size: 11px; }
.asset-task-state > span { color: var(--muted); }
.asset-task-state > strong { text-align: right; }
.asset-task-state > small { grid-column: 1 / -1; color: #a14a42; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asset-task-state.completed { background: #e7f4ed; }
.asset-task-state.failed { background: #fdecea; }
.delivery-status-bar { display: grid; gap: 10px; margin-bottom: 18px; padding: 16px 18px; border: 1px solid #dce7e1; border-radius: 12px; background: linear-gradient(115deg,#f7faf8,#eef7f2); }
.delivery-status-bar > div:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.delivery-status-bar strong { font-size: 14px; }
.delivery-status-bar span { color: var(--muted); font-size: 11px; }
.delivery-status-track { height: 7px; overflow: hidden; border-radius: 99px; background: #dfe8e3; }
.delivery-status-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#277a5b,#61b58e); transition: width .4s ease; }
.delivery-sequence-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin: 20px 0 14px; }
.delivery-sequence-head h2 { margin: 0 0 5px; font-size: 18px; }
.delivery-sequence-head p { margin: 0; color: var(--muted); font-size: 12px; }
.delivery-export { display: flex; align-items: end; gap: 8px; }
.delivery-export label { display: grid; gap: 5px; color: var(--muted); font-size: 11px; }
.delivery-export input { width: 210px; height: 38px; border: 1px solid var(--line); border-radius: 8px; padding: 0 10px; outline: none; }
.delivery-export input:focus { border-color: var(--green); box-shadow: 0 0 0 3px #e3f3eb; }
.delivery-sequence { display: flex; flex-wrap: nowrap; gap: 14px; align-items: start; overflow-x: auto; padding: 2px 2px 12px; scroll-snap-type: x proximity; overscroll-behavior-x: contain; touch-action: pan-x; }
.delivery-carousel { display: grid; grid-template-columns: 34px minmax(0,1fr) 34px; align-items: center; gap: 8px; min-width: 0; }
.carousel-arrow { display: grid; place-items: center; width: 34px; height: 58px; border: 1px solid #cddbd3; border-radius: 9px; background: #f2f8f4; color: var(--green); cursor: pointer; font-size: 30px; line-height: 1; }
.carousel-arrow:hover { border-color: var(--green); background: #e3f3eb; }
.delivery-shot-card { flex: 0 0 286px; min-width: 286px; overflow: hidden; border: 1px solid var(--line); border-radius: 11px; background: #fff; box-shadow: 0 7px 20px rgba(35,66,52,.05); scroll-snap-align: start; }
.delivery-shot-card.is-ready { border-color: #bedfcd; }
.delivery-shot-card.is-failed { border-color: #edb0aa; }
.delivery-shot-head { display: flex; align-items: center; gap: 9px; padding: 11px 12px; border-bottom: 1px solid #edf1ef; }
.delivery-shot-head > b { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 7px; background: #e8f4ee; color: var(--green); font-size: 11px; }
.delivery-select { width: 16px; height: 16px; accent-color: var(--green); cursor: pointer; }
.delivery-select:disabled { cursor: default; opacity: .4; }
.delivery-shot-head > div { min-width: 0; flex: 1; }
.delivery-shot-head strong, .delivery-shot-head small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.delivery-shot-head strong { font-size: 12px; }
.delivery-shot-head small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.delivery-shot-head .status { min-width: 48px; padding: 4px 6px; font-size: 10px; }
.delivery-shot-preview { aspect-ratio: 9/13; background: #0d1411; }
.delivery-video { display: block; width: 100%; height: 100%; object-fit: contain; background: #0d1411; }
.delivery-video-placeholder { display: grid; height: 100%; place-content: center; justify-items: center; gap: 8px; color: #d8e7df; text-align: center; }
.delivery-video-placeholder > span { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid rgba(216,231,223,.55); border-radius: 50%; color: #8ed0b0; font-size: 13px; font-weight: 800; }
.delivery-video-placeholder strong { font-size: 13px; }
.delivery-video-placeholder small { max-width: 170px; color: #a8bdb1; font-size: 10px; }
.delivery-video-placeholder.failed { background: #251b1a; }
.delivery-video-placeholder.failed > span { border-color: #d47d75; color: #f09b91; }
.delivery-shot-meta { display: grid; gap: 4px; padding: 9px 12px 0; color: var(--muted); font-size: 10px; line-height: 1.4; }
.delivery-failure { overflow: hidden; color: #b8443c; text-overflow: ellipsis; white-space: nowrap; }
.delivery-shot-actions { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px 12px; }
.delivery-shot-actions .small-button { text-decoration: none; }
.delivery-empty { grid-column: 1 / -1; display: grid; justify-items: center; gap: 10px; padding: 65px 20px; border: 1px dashed #cbd9d1; border-radius: 11px; color: var(--muted); text-align: center; }
.delivery-empty strong { color: #33473d; }
.delivery-empty span { font-size: 12px; }
@keyframes task-progress { from { transform: translateX(-30%); opacity: .5; } to { transform: translateX(165%); opacity: 1; } }

.provider-grid { display: grid; grid-template-columns: repeat(3,minmax(250px,1fr)); gap: 15px; }
.provider-card { padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.provider-head { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.provider-icon { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: #e8f4ee; color: var(--green); font-size: 18px; }
.provider-title { flex: 1; }
.provider-title h3 { margin: 1px 0 4px; font-size: 15px; }
.provider-title p { margin: 0; color: var(--muted); font-size: 11px; }
.toggle { width: 34px; height: 20px; border: 0; border-radius: 12px; background: #cbd4cf; padding: 3px; cursor: pointer; }
.toggle::after { content: ""; display: block; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: .18s; }
.toggle.on { background: var(--green); }
.toggle.on::after { transform: translateX(14px); }
.provider-details { margin: 17px 0; padding: 12px; border-radius: 8px; background: #f6f8f7; display: grid; gap: 8px; }
.provider-details div { display: flex; justify-content: space-between; gap: 12px; font-size: 11px; }
.provider-details span { color: var(--muted); }
.provider-details code { max-width: 65%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.modal-backdrop { position: fixed; z-index: 20; inset: 0; background: rgba(12,22,18,.52); display: grid; place-items: center; padding: 30px; }
.modal { width: min(560px,90vw); max-height: 90vh; overflow: auto; border-radius: 14px; background: #fff; box-shadow: 0 30px 80px rgba(0,0,0,.2); }
.modal-head { padding: 18px 20px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; }
.modal-head h2 { margin: 0; font-size: 18px; }
.asset-prompt-generator-modal { width: min(820px, 94vw); }
.asset-prompt-generator-modal .modal-head { align-items: start; }
.asset-prompt-generator-modal .modal-head h2 { margin-bottom: 5px; }
.asset-prompt-backdrop { z-index: 30; padding: 16px; place-items: start end; background: transparent; pointer-events: none; }
.asset-prompt-backdrop .asset-prompt-generator-modal { width: min(460px, calc(100vw - 28px)); max-height: calc(100vh - 32px); pointer-events: auto; box-shadow: 0 18px 48px rgba(8, 24, 16, .24); }
.asset-prompt-backdrop .modal-head { padding: 14px 16px; }
.asset-prompt-backdrop .modal-head h2 { font-size: 16px; }
.asset-prompt-backdrop .modal-body { padding: 14px 16px; gap: 10px; }
.asset-prompt-backdrop .modal-actions { padding: 12px 16px; }
.asset-prompt-details { display: grid; gap: 7px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fafcfb; }
.asset-prompt-details summary { cursor: pointer; color: #365048; font-size: 12px; font-weight: 700; }
.asset-prompt-details textarea { margin-top: 2px; }
.asset-prompt-provider { display: grid; gap: 3px; padding: 11px 12px; border: 1px solid #d8e6dd; border-radius: 8px; background: #f5faf7; color: var(--green); }
.asset-prompt-provider small { color: var(--muted); font-size: 11px; }
.template-upload { display: inline-flex; align-items: center; width: fit-content; padding: 7px 10px; border: 1px dashed #b7c9bf; border-radius: 7px; background: #f7faf8; color: var(--green); cursor: pointer; font-size: 11px; }
.asset-prompt-generating { display: grid; gap: 8px; padding: 14px; border: 1px solid #d6e9de; border-radius: 9px; background: #f0f8f3; color: #2b7457; }
.asset-prompt-progress-head { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; }
.asset-prompt-progress-head span { font-variant-numeric: tabular-nums; color: var(--green); }
.asset-prompt-progress-track { height: 8px; overflow: hidden; border-radius: 99px; background: #d9e9df; }
.asset-prompt-progress-bar { height: 100%; min-width: 2%; border-radius: inherit; background: linear-gradient(90deg, #43a978, #96dc47); transition: width .35s ease; }
.asset-prompt-generating small { color: var(--muted); font-size: 11px; }
.asset-prompt-error { padding: 10px 12px; border: 1px solid #f1c7c7; border-radius: 8px; background: #fff5f5; color: #a33b3b; font-size: 12px; line-height: 1.5; }
.spinner { width: 18px; height: 18px; border: 2px solid #b9d9c8; border-top-color: var(--green); border-radius: 50%; animation: spin .8s linear infinite; }
.asset-prompt-result { display: grid; gap: 10px; padding: 13px; border: 1px solid #cce2d5; border-radius: 9px; background: #f5fbf7; }
.result-head { display: flex; justify-content: space-between; gap: 12px; }
.result-head strong, .result-head small { display: block; }
.result-head small { margin-top: 4px; color: var(--muted); font-size: 11px; }
.result-head > span { color: var(--green); font-size: 11px; }
.asset-prompt-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px 12px; max-height: 210px; overflow: auto; padding-right: 4px; }
.asset-prompt-list div { display: flex; gap: 8px; min-width: 0; padding: 7px 8px; border-radius: 6px; background: #fff; font-size: 11px; }
.asset-prompt-list b { flex: 0 0 auto; color: var(--green); }
.asset-prompt-list span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asset-prompt-list > small { grid-column: 1 / -1; color: var(--muted); font-size: 10px; }
@keyframes spin { to { transform: rotate(360deg); } }
.modal-body { padding: 20px; display: grid; gap: 14px; }
.field { display: grid; gap: 6px; }
.model-load-row { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid #dce5e0; border-radius: 9px; background: #f6f9f7; }
.model-load-row .button { flex: 0 0 auto; }
.model-load-row span { min-width: 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.model-load-row span.loading { color: #96620e; }
.model-load-row span.success { color: #16734f; }
.model-load-row span.error { color: #b8382f; }
.field label { color: #4f5d55; font-size: 12px; font-weight: 650; }
.field input, .field select, .field textarea { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 10px 11px; outline: none; background: #fff; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--green); box-shadow: 0 0 0 3px #e3f3eb; }
.modal-actions { padding: 14px 20px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 8px; }
.confirm-modal { width: min(440px, 90vw); }
.confirm-modal .modal-body { justify-items: center; text-align: center; padding: 28px 34px; }
.confirm-modal .modal-body h3 { margin: 2px 0 0; font-size: 17px; }
.confirm-icon { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: #fff0ee; color: var(--danger); font-weight: 800; }
.danger-zone { margin-top: 8px; padding: 14px; border: 1px solid #efc3be; border-radius: 9px; background: #fff8f7; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.danger-zone strong { font-size: 13px; }
.danger-zone p { margin: 4px 0 0; color: var(--muted); font-size: 10px; }
.hint { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.6; }

.toast-root { position: fixed; z-index: 30; right: 20px; bottom: 20px; display: grid; gap: 8px; }
.toast { min-width: 250px; padding: 12px 14px; border-radius: 9px; background: #172a21; color: #fff; box-shadow: var(--shadow); font-size: 12px; animation: toast-in .25s ease; }
.toast.error { background: #9a4039; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }
.empty { padding: 60px 20px; text-align: center; color: var(--muted); }

@media (max-width: 1450px) {
  .app-shell { grid-template-columns: 84px 218px minmax(0,1fr); }
  .asset-grid { grid-template-columns: repeat(2,minmax(330px,1fr)); }
  .shot-grid { grid-template-columns: repeat(3,minmax(210px,1fr)); }
  .provider-grid { grid-template-columns: repeat(2,minmax(280px,1fr)); }
}

@media (max-width: 1050px) {
  .delivery-sequence-head { align-items: stretch; flex-direction: column; }
  .delivery-export { align-items: end; }
}


.default-provider-badge { display:inline-flex; margin-left:6px; padding:2px 7px; border-radius:999px; background:#e1f5e9; color:#16794d; font-size:11px; font-style:normal; font-weight:700; vertical-align:middle; }
.provider-default-check { display:flex; align-items:center; gap:8px; margin:4px 0 2px; color:#285b46; font-size:13px; font-weight:650; cursor:pointer; }
.provider-default-check input { width:16px; height:16px; accent-color:#16865a; }

.selected-history-version { margin-top: 8px; color: #087c59; font-size: 12px; font-weight: 700; }

.video-model-binding { display: grid; grid-template-columns: max-content minmax(150px, 1fr) max-content; gap: 5px 8px; align-items: center; }
.video-model-binding select { width: 100%; min-width: 150px; }
.video-model-binding small { grid-column: 2 / 4; display: block; color: #16745a; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bind-video-provider-button { margin: 0; white-space: nowrap; border: 1px solid #2364e8 !important; background: linear-gradient(135deg, #2f80ed, #2453d4) !important; color: #fff !important; font-weight: 800; box-shadow: 0 5px 13px rgba(36, 99, 226, .28); }
.bind-video-provider-button:hover { background: linear-gradient(135deg, #246fe1, #193db7) !important; border-color: #193db7 !important; transform: translateY(-1px); }
.video-model-binding select { border: 1px solid #7ca7ef !important; border-radius: 7px; background: #f8fbff !important; padding: 5px 7px; color: #123e91 !important; }
.submit-video-button { background: #e8fff1; }
.submit-video-button:hover { background: #1f9d61; border-color: #1f9d61; color: #fff; }

.video-model-status { display: flex; align-items: center; gap: 10px; margin: -5px 0 16px; padding: 11px 14px; border: 1px solid #9ac9ea; border-radius: 10px; background: linear-gradient(100deg, #edf7ff, #f8fcff); color: #174c78; }
.video-model-status-icon { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; background: #2674d9; color: #fff; font-weight: 900; }
.video-model-status div { display: grid; gap: 2px; min-width: 0; }
.video-model-status small { color: #55738e; font-size: 11px; }
.video-model-status strong { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.video-model-status strong em { margin-left: 8px; color: #216bc7; font-size: 12px; font-style: normal; font-weight: 700; }
.video-model-status-tip { margin-left: auto; color: #2d72aa; font-size: 12px; font-weight: 700; white-space: nowrap; }


/* Asset toolbar: high-contrast actions make frequent production controls easy to spot. */
.heading-actions { align-items: center; }
.heading-actions .button { min-height: 40px; padding: 0 15px; border-radius: 10px; font-weight: 760; letter-spacing: .1px; box-shadow: 0 4px 12px rgba(24,52,40,.07); }
.heading-actions .button[data-action="process-character-faces"],
.asset-face-process-button { color: #fff; border-color: #6c4bc6; background: linear-gradient(135deg,#8a65e8,#5b3db4); box-shadow: 0 8px 18px rgba(105,73,199,.25); }
.heading-actions .button[data-action="process-character-faces"]:hover { border-color: #5435ad; background: linear-gradient(135deg,#9a76f0,#6040bd); }
.heading-actions .button[data-action="open-asset-prompt-generator"] { color: #71470a; border-color: #f2b544; background: linear-gradient(135deg,#fff4cb,#ffe39a); box-shadow: 0 7px 16px rgba(218,153,31,.16); }
.heading-actions .button[data-action="open-asset-import"] { color: #145ea2; border-color: #78b8ee; background: #e8f5ff; }
.heading-actions .button[data-action="new-asset"] { color: #176b4c; border-color: #7fc7a4; background: #eaf8f0; }
.heading-actions .button[data-action="request-clear-assets"] { color: #c14035; border-color: #f2a49c; background: #fff1ef; }
.heading-actions .button[data-action="batch-assets"] { color: #173020; border-color: #b7ee42; background: linear-gradient(135deg,#c8ff52,#abef39); box-shadow: 0 8px 18px rgba(137,198,37,.22); }
@media (max-width: 900px) { .heading-actions { width: 100%; justify-content: flex-start; } .heading-actions .button { flex: 1 1 auto; } }

/* === Cinematic Aurora redesign · functions and markup remain unchanged === */
:root {
  --ink: #edf6ff;
  --muted: #a6b6c8;
  --line: rgba(155, 190, 215, .18);
  --soft: #08111e;
  --panel: rgba(14, 29, 45, .78);
  --sidebar: #06121d;
  --sidebar-soft: rgba(24, 52, 65, .65);
  --green: #3bd6a3;
  --green-2: #58e2b6;
  --lime: #d7ff63;
  --lime-soft: rgba(215,255,99,.15);
  --danger: #ff7474;
  --shadow: 0 24px 60px rgba(0, 0, 0, .32);
}
body {
  color: var(--ink); background: #050c15;
  background-image: radial-gradient(circle at 76% 12%, rgba(250,186,91,.14), transparent 24%), radial-gradient(circle at 28% 82%, rgba(27,214,183,.12), transparent 28%), linear-gradient(135deg,#06111c 0%,#091827 48%,#101620 100%);
}
body::before, body::after { content:""; position:fixed; inset:0; z-index:0; pointer-events:none; }
body::before {
  opacity:.7; background-image: radial-gradient(circle at 13% 20%, rgba(255,221,143,.9) 0 1px, transparent 2px), radial-gradient(circle at 72% 28%, rgba(151,247,223,.7) 0 1px, transparent 2px), radial-gradient(circle at 84% 74%, rgba(255,202,109,.65) 0 1px, transparent 2px), radial-gradient(circle at 42% 66%, rgba(255,255,255,.45) 0 1px, transparent 2px); background-size: 300px 300px, 430px 430px, 520px 520px, 610px 610px; animation: cinema-stars 26s linear infinite;
}
body::after { background: radial-gradient(ellipse at 72% 38%,rgba(255,187,92,.14),transparent 30%), radial-gradient(ellipse at 38% 105%,rgba(16,190,170,.16),transparent 38%); filter: blur(10px); animation: cinema-aurora 14s ease-in-out infinite alternate; }
#app, #toast-root, #modal-root { position:relative; z-index:1; }
.app-shell { position:relative; isolation:isolate; min-height:100vh; grid-template-columns: 98px 244px minmax(0,1fr); }
.primary-sidebar { background: linear-gradient(180deg,rgba(3,15,24,.98),rgba(8,31,39,.96)); border-right:1px solid rgba(126,224,190,.16); box-shadow: 14px 0 42px rgba(0,0,0,.18); }
.primary-sidebar::before { content:""; position:absolute; inset:0 0 auto; height:180px; pointer-events:none; background: radial-gradient(circle at 50% 0,rgba(77,229,180,.18),transparent 65%); }
.logo { position:relative; }
.logo .brand-logo { width:52px; height:52px; border-color:rgba(217,255,99,.85); box-shadow:0 0 0 4px rgba(215,255,99,.08),0 18px 35px rgba(0,0,0,.42); }
.logo strong { color:#eafff5; font-size:11px; text-shadow:0 1px 12px rgba(59,214,163,.35); }
.nav-button { border:1px solid transparent; border-radius:14px; color:#94aaa9; padding:12px 5px; }
.nav-button:hover { border-color:rgba(134,244,205,.22); background:rgba(94,225,184,.11); color:#edfff7; transform:translateY(-1px); }
.nav-button.active { background:linear-gradient(135deg,#ddff69,#8bf3bb); color:#09201d; box-shadow:0 9px 22px rgba(122,245,183,.22); }
.nav-button .count { background:linear-gradient(135deg,#ffd16e,#ff8e6b); color:#301b11; box-shadow:0 0 15px rgba(255,189,99,.4); }
.sync-card { border:1px solid rgba(112,235,190,.14); background:rgba(38,85,79,.3); color:#cce1d8; border-radius:13px; backdrop-filter:blur(12px); }
.episode-sidebar { background:linear-gradient(180deg,rgba(11,27,41,.88),rgba(12,31,43,.79)); border-color:rgba(143,193,218,.14); backdrop-filter:blur(20px); box-shadow:12px 0 34px rgba(0,0,0,.13); }
.project-head { border-color:var(--line); background:linear-gradient(110deg,rgba(255,255,255,.04),transparent); }
.project-title strong, .episode-item { color:#e8f3f6; }
.eyebrow { color:#88a9bb; }
.icon-button, .small-button { border-color:rgba(143,193,218,.22); background:rgba(255,255,255,.055); color:#dff1f4; border-radius:9px; }
.icon-button:hover, .small-button:hover { border-color:rgba(113,238,194,.68); background:rgba(57,214,163,.16); color:#fff; box-shadow:0 7px 16px rgba(0,0,0,.16); transform:translateY(-1px); }
.episode-item:hover { background:rgba(115,210,179,.1); }
.episode-item.active { color:#f5fff9; background:linear-gradient(90deg,rgba(67,213,165,.2),rgba(178,255,124,.08)); box-shadow:inset 3px 0 #b8ff76,0 5px 20px rgba(0,0,0,.12); }
.episode-no { background:rgba(161,209,222,.13); color:#c2dde5; }
.episode-delete { background:rgba(255,255,255,.08); color:#ff9e9e; box-shadow:none; }
.new-episode { color:#aaf9c7; border-color:rgba(111,236,185,.35); background:rgba(70,211,164,.05); border-radius:12px; }
.new-episode:hover { background:rgba(70,211,164,.16); }
.main { background:rgba(4,13,22,.42); }
.workflow-bar { height:70px; border-color:rgba(143,193,218,.16); background:rgba(7,19,31,.68); backdrop-filter:blur(20px) saturate(130%); box-shadow:0 8px 22px rgba(0,0,0,.12); }
.step-button { color:#839bae; }
.step-button:hover { color:#dcfff1; background:rgba(91,218,176,.06); }
.step-button.active { color:#f0fff7; border-bottom-color:#bfff6b; background:linear-gradient(180deg,transparent,rgba(75,212,167,.1)); }
.step-dot { border-color:rgba(165,203,221,.32); }
.step-button.active .step-dot { background:linear-gradient(135deg,#33c994,#9afa9e); border-color:#b9ff79; color:#06211b; box-shadow:0 0 18px rgba(91,226,173,.42); }
.content { background:transparent; padding:30px 32px 58px; }
.page-heading h1 { color:#f0f8ff; font-size:27px; text-shadow:0 6px 24px rgba(0,0,0,.22); }
.page-heading p { color:#9cb3c3; }
.button { border-color:rgba(142,193,218,.26); color:#e3f1f5; background:rgba(255,255,255,.065); border-radius:10px; box-shadow:inset 0 1px rgba(255,255,255,.08); }
.button:hover { border-color:rgba(126,238,194,.72); background:rgba(64,211,165,.14); box-shadow:0 10px 23px rgba(0,0,0,.2); }
.button.primary { border-color:#e9ff83; background:linear-gradient(135deg,#e6ff77,#86ebac); color:#08231d; box-shadow:0 10px 24px rgba(171,255,111,.18); }
.button.primary:hover { filter:brightness(1.06); }
.button.green { border-color:#38cf9b; background:linear-gradient(135deg,#22bd8a,#40d7a8); color:#041f18; }
.button.danger { color:#ffaaa6; border-color:rgba(255,118,115,.35); }
.button.danger.solid { background:linear-gradient(135deg,#ff766e,#d94f58); border-color:#ff8b83; color:#fff; }
.control-strip { border-color:rgba(145,196,219,.2); background:rgba(145,196,219,.16); border-radius:14px; box-shadow:var(--shadow); }
.control-item { background:rgba(13,30,46,.76); color:#ecf7ff; }
.control-item label { color:#8eafc2; }
.control-item select, .control-item strong { color:#ecf7ff; }
.control-item select option { background:#102336; color:#edf7ff; }
.section-tabs { gap:8px; }
.tab { border:1px solid transparent; color:#9cb2c3; border-radius:20px; padding:8px 13px; }
.tab:hover { background:rgba(113,218,183,.1); color:#e4fff3; }
.tab.active { background:linear-gradient(135deg,rgba(83,224,178,.27),rgba(198,255,112,.19)); border-color:rgba(149,246,188,.3); color:#dffff2; box-shadow:0 8px 20px rgba(0,0,0,.12); }
.asset-card, .shot-card, .paper, .side-panel, .panel, .video-studio > *, .delivery-shot-card, .batch-plan, .storyboard-empty, .import-panel, .import-guide, .import-preview { border-color:rgba(145,196,219,.2); background:rgba(12,29,44,.77); box-shadow:var(--shadow); }
.asset-card, .shot-card, .delivery-shot-card { border-radius:16px; }
.asset-card { transition:transform .23s ease, border-color .23s ease, box-shadow .23s ease; }
.asset-card:hover { transform:translateY(-4px); border-color:rgba(133,237,193,.45); box-shadow:0 22px 46px rgba(0,0,0,.28); }
.asset-info { background:linear-gradient(145deg,rgba(16,35,51,.96),rgba(10,25,38,.96)); }
.asset-title h3, .paper h2, .side-panel h3, .storyboard-empty h3 { color:#eef9ff; }
.asset-title p, .asset-description, .prompt, .summary, .scene p, .board-title small, .board-prompt, .page-heading p { color:#a8bcc9; }
.version { background:rgba(64,212,166,.14); color:#90f4c3; }
.card-actions { border-color:rgba(145,196,219,.14); }
.submit-asset-button { border-color:rgba(105,235,177,.68); background:linear-gradient(135deg,rgba(37,185,136,.24),rgba(102,226,173,.13)); color:#a9ffd2; }
.submit-asset-button:hover { background:linear-gradient(135deg,#1fbd88,#54dbaa); color:#062018; }
.asset-image { background:#091521; }
.visual-badge { background:rgba(5,20,28,.72); color:#e9fff4; border:1px solid rgba(216,255,126,.3); backdrop-filter:blur(8px); }
.asset-download-button { border-color:rgba(159,248,202,.58); background:rgba(7,35,32,.86); color:#bdffe2; }
.asset-download-button:hover { background:#1a9f78; color:#fff; }
.shot-card { background:rgba(11,27,42,.83); transition:transform .2s ease,border-color .2s ease; }
.shot-card:hover { transform:translateY(-3px); border-color:rgba(128,232,191,.43); }
.shot-meta { background:linear-gradient(155deg,rgba(15,34,51,.96),rgba(9,23,35,.98)); }
.play { background:linear-gradient(135deg,#edff90,#6be7b5); color:#06251d; box-shadow:0 8px 26px rgba(0,0,0,.34); }
.paper, .side-panel, .panel { color:#e8f4fa; }
.summary, .scene { border-color:rgba(145,196,219,.15); }
.stat-row { color:#a9becb; }
.stat-row strong { color:#ecf8ff; }
.check { color:#dcecf4; }
.check i { background:rgba(61,214,164,.18); color:#8dffc4; }
.board-row { border-color:rgba(145,196,219,.18); background:rgba(11,29,43,.76); color:#eaf6fb; box-shadow:0 8px 20px rgba(0,0,0,.1); }
.board-row.header { color:#7fa1b5; background:transparent; box-shadow:none; }
.duration { color:#aaffd0; }
.storyboard-empty { border-style:dashed; color:#9cb2c0; }
input, textarea, select { color:#edf7ff; background:rgba(5,19,31,.6); border-color:rgba(147,195,218,.25)!important; }
textarea:focus, input:focus, select:focus { outline:none; border-color:#72e5bb!important; box-shadow:0 0 0 3px rgba(78,221,175,.14); }
select option { background:#102338; color:#edf7ff; }
.table { color:#dcecf5; }
.table thead { background:rgba(82,182,179,.1); color:#a9c3d2; }
.table td, .table th { border-color:rgba(145,196,219,.14); }
.status.completed { background:rgba(52,215,157,.17); color:#9dffd0; }
.status.running, .status.queued { background:rgba(255,201,104,.14); color:#ffd889; }
.status.failed { background:rgba(255,110,110,.16); color:#ffaaa6; }
.modal-backdrop { background:rgba(1,8,15,.7); backdrop-filter:blur(8px); }
.modal { border:1px solid rgba(151,218,231,.24); background:linear-gradient(145deg,#112b40,#091a2a); color:#eaf7ff; box-shadow:0 32px 100px rgba(0,0,0,.55); }
.modal-head, .modal-actions { border-color:rgba(151,218,231,.18); }
.toast { border:1px solid rgba(112,230,180,.33); background:rgba(10,35,41,.94); color:#effff8; box-shadow:0 15px 40px rgba(0,0,0,.32); backdrop-filter:blur(18px); }
.toast.error { border-color:rgba(255,121,117,.45); background:rgba(67,20,29,.94); }
@keyframes cinema-stars { from { background-position:0 0,0 0,0 0,0 0; } to { background-position:300px -300px,-430px 430px,520px -520px,-610px 610px; } }
@keyframes cinema-aurora { from { opacity:.5; transform:scale(1) translate3d(-2%,0,0); } to { opacity:1; transform:scale(1.12) translate3d(3%,-2%,0); } }
@media (prefers-reduced-motion: reduce) { body::before, body::after { animation:none!important; } .asset-card,.shot-card,.button,.small-button { transition:none!important; } }

/* === Neon Command Center redesign · blue/violet technology palette === */
:root {
  --ink: #f4f8ff;
  --muted: #aabbd2;
  --line: rgba(111, 160, 238, .25);
  --soft: #070d1a;
  --panel: rgba(11, 21, 42, .88);
  --sidebar: #060b18;
  --sidebar-soft: rgba(20, 32, 62, .82);
  --green: #58d8ff;
  --green-2: #68a7ff;
  --lime: #9b6cff;
  --lime-soft: rgba(139, 108, 255, .18);
  --danger: #ff7089;
  --shadow: 0 22px 58px rgba(0, 2, 18, .42);
}
body {
  color: var(--ink);
  background-color: #050917;
  background-image:
    linear-gradient(rgba(86,142,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(86,142,255,.055) 1px, transparent 1px),
    radial-gradient(ellipse at 75% 8%, rgba(91,73,226,.28), transparent 37%),
    radial-gradient(ellipse at 19% 91%, rgba(25,154,255,.17), transparent 38%),
    linear-gradient(135deg, #050916 0%, #0a1025 47%, #100c28 100%);
  background-size: 38px 38px, 38px 38px, auto, auto, auto;
}
body::before { opacity:1; background:linear-gradient(115deg, transparent 20%, rgba(75,180,255,.045) 45%, transparent 56%); animation: command-scan 17s linear infinite; }
body::after { background:radial-gradient(ellipse at 82% 27%,rgba(124,91,255,.19),transparent 27%),radial-gradient(ellipse at 25% 104%,rgba(36,178,255,.16),transparent 36%); filter:blur(18px); animation: command-orbit 24s ease-in-out infinite alternate; }
.primary-sidebar { background:linear-gradient(180deg, rgba(5,10,26,.98), rgba(8,13,35,.96)); border-right-color:rgba(98,136,255,.25); }
.primary-sidebar::before { height:220px; background:radial-gradient(circle at 50% 0,rgba(87,216,255,.20),transparent 64%); }
.logo .brand-logo { border-color:rgba(129,194,255,.95); box-shadow:0 0 0 4px rgba(91,154,255,.12),0 14px 34px rgba(4,8,30,.7); }
.logo strong { color:#f6f9ff; font-size:11px; text-shadow:0 0 16px rgba(96,180,255,.5); }
.nav-button { color:#a8b8d4; }
.nav-button:hover { border-color:rgba(99,188,255,.4); background:rgba(63,139,255,.14); color:#fff; }
.nav-button.active { background:linear-gradient(135deg,#5c8dff,#9a67f5); color:#fff; box-shadow:0 10px 27px rgba(81,107,255,.35); }
.nav-button .count { background:linear-gradient(135deg,#ffcf69,#ff9174); color:#29150d; }
.sync-card { border-color:rgba(107,163,255,.25); background:rgba(35,55,103,.4); color:#d7e5ff; }
.episode-sidebar { background:linear-gradient(180deg,rgba(9,17,39,.93),rgba(10,18,42,.83)); border-color:rgba(109,153,240,.19); }
.project-title strong,.episode-item,.page-heading h1,.asset-title h3,.paper h2,.side-panel h3,.storyboard-empty h3 { color:#f5f8ff; }
.eyebrow,.page-heading p,.asset-title p,.asset-description,.prompt,.summary,.scene p,.board-title small,.board-prompt { color:#afc0d9; }
.icon-button,.small-button { border-color:rgba(120,162,243,.35); background:rgba(32,49,88,.53); color:#e5efff; }
.icon-button:hover,.small-button:hover { border-color:#75cfff; background:rgba(55,120,238,.24); color:#fff; box-shadow:0 8px 18px rgba(45,106,255,.19); }
.episode-item:hover { background:rgba(70,126,237,.14); }
.episode-item.active { color:#fff; background:linear-gradient(90deg,rgba(72,138,255,.30),rgba(142,91,247,.14)); box-shadow:inset 3px 0 #77d6ff,0 6px 20px rgba(0,0,0,.17); }
.episode-no { background:rgba(100,142,237,.22); color:#dbe9ff; }
.new-episode { color:#a6dfff; border-color:rgba(91,183,255,.42); background:rgba(47,128,255,.08); }
.new-episode:hover { background:rgba(47,128,255,.19); }
.workflow-bar { border-color:rgba(106,152,243,.22); background:rgba(7,14,33,.82); }
.step-button { color:#93a7c9; }
.step-button:hover { color:#ecf4ff; background:rgba(74,136,255,.11); }
.step-button.active { color:#fff; border-bottom-color:#6ed7ff; background:linear-gradient(180deg,transparent,rgba(75,142,255,.14)); }
.step-button.active .step-dot { background:linear-gradient(135deg,#56d4ff,#8b72ff); border-color:#a7e7ff; color:#07122a; box-shadow:0 0 20px rgba(85,188,255,.48); }
.content { padding:30px 34px 64px; }
.page-heading h1 { font-size:28px; letter-spacing:.2px; }
.button { min-height:40px; border-color:rgba(126,167,246,.34); background:linear-gradient(145deg,rgba(43,60,105,.72),rgba(20,31,61,.72)); color:#f3f7ff; border-radius:10px; font-weight:750; box-shadow:inset 0 1px rgba(255,255,255,.10),0 5px 15px rgba(0,0,0,.13); }
.button:hover { border-color:#72ceff; background:linear-gradient(145deg,rgba(69,123,235,.58),rgba(52,75,170,.56)); color:#fff; }
.button.primary,.submit-video-button { border-color:#83caff; background:linear-gradient(135deg,#287fe7,#8055e8); color:#fff; box-shadow:0 10px 24px rgba(69,103,246,.34); }
.button.primary:hover,.submit-video-button:hover { background:linear-gradient(135deg,#3f96f2,#9369f5); color:#fff; }
.button.green,.submit-asset-button { border-color:#66cdfd; background:linear-gradient(135deg,#168edb,#3676e9); color:#fff; }
.button.danger { color:#ffc2ce; border-color:rgba(255,109,138,.5); background:rgba(112,32,57,.30); }
.button.danger.solid { background:linear-gradient(135deg,#f35470,#bf3d64); border-color:#ff9cae; color:#fff; }
.control-strip { border-color:rgba(105,151,242,.28); background:rgba(30,49,91,.46); }
.control-item { background:rgba(11,21,47,.84); color:#f1f6ff; }
.control-item label { color:#aec2e4; }
.control-item select,.control-item strong { color:#f4f8ff; }
.tab { color:#aabbd5; }
.tab:hover { background:rgba(69,129,245,.15); color:#eff5ff; }
.tab.active { background:linear-gradient(135deg,rgba(63,147,255,.27),rgba(131,91,255,.25)); border-color:rgba(114,195,255,.42); color:#f1f7ff; }
.asset-card,.shot-card,.paper,.side-panel,.panel,.video-studio > *,.delivery-shot-card,.batch-plan,.storyboard-empty,.import-panel,.import-guide,.import-preview,.page-progress-summary,.delivery-status-bar,.video-model-status,.import-tab,.video-history-card,.inline-task-progress,.asset-task-state { border-color:rgba(113,159,246,.28); background:linear-gradient(145deg,rgba(14,28,57,.94),rgba(8,18,40,.93)); color:#edf4ff; box-shadow:var(--shadow); }
.asset-card:hover,.shot-card:hover { border-color:rgba(109,208,255,.72); box-shadow:0 24px 52px rgba(0,1,19,.40),0 0 0 1px rgba(106,175,255,.10); }
.asset-info,.shot-meta { background:linear-gradient(145deg,rgba(15,31,61,.98),rgba(8,18,42,.98)); }
.version { background:rgba(93,130,255,.20); color:#c3d4ff; }
.visual-badge { background:rgba(7,17,43,.78); color:#eef6ff; border-color:rgba(114,203,255,.5); }
.asset-download-button { border-color:rgba(119,206,255,.60); background:rgba(13,55,97,.9); color:#d7f3ff; }
.asset-download-button:hover { background:#287fd5; color:#fff; }
.play { background:linear-gradient(135deg,#63d7ff,#896bff); color:#06142b; }
.batch-plan { background:linear-gradient(135deg,rgba(14,31,62,.96),rgba(14,22,53,.96)); }
.batch-plan-item { border-color:rgba(113,159,246,.25); background:rgba(21,36,71,.88); color:#f1f6ff; }
.batch-plan-item:hover { border-color:#72ceff; box-shadow:0 8px 20px rgba(36,93,225,.22); }
.batch-plan-item b { color:#8fdcff; }
.batch-plan-item span { color:#f4f8ff; font-weight:700; }
.batch-plan-item small,.batch-plan-head p,.batch-plan-item em { color:#b1c2dd; }
.batch-timeline { border-color:rgba(109,159,246,.28); }
.batch-timeline > div,.batch-timeline > div:nth-child(even) { background:rgba(42,64,120,.62); border-right-color:rgba(135,186,255,.25); color:#edf6ff; }
.import-tab { min-height:82px; }
.import-tab.active { border-color:#72ceff; background:linear-gradient(135deg,rgba(37,119,226,.36),rgba(104,77,205,.28)); box-shadow:inset 0 0 0 1px rgba(112,206,255,.42); }
.import-tab b { background:rgba(76,137,255,.18); color:#85ddff; }
.import-tab strong { color:#f2f6ff; }
.paste-area,.upload-zone { background:rgba(6,16,38,.82); color:#edf5ff; border-color:rgba(111,159,246,.34); }
.paste-area:focus { border-color:#71d4ff; background:rgba(8,20,48,.96); box-shadow:0 0 0 3px rgba(79,166,255,.16); }
.upload-zone { border-color:rgba(112,177,255,.48); }
.video-history-card.selected { border-color:#77caff; background:linear-gradient(145deg,rgba(37,88,174,.48),rgba(76,47,143,.38)); }
.task-icon { background:rgba(69,125,240,.22); color:#8cddff; }
.page-progress-summary.working { border-color:rgba(102,193,255,.62); background:linear-gradient(115deg,rgba(18,48,94,.96),rgba(31,26,77,.94)); }
.page-progress-main h3,.delivery-status-bar strong { color:#f2f6ff; }
.page-progress-main > strong { color:#85dcff; }
.page-progress-track,.delivery-status-track,.inline-progress-track { background:rgba(118,154,218,.23); }
.page-progress-track > div,.delivery-status-track i,.inline-progress-fill { background:linear-gradient(90deg,#49cfff,#896aff); }
.page-progress-meta,.delivery-status-bar span { color:#aec1de; }
.inline-task-progress.running { border-color:rgba(255,192,93,.57); background:linear-gradient(135deg,rgba(93,66,30,.82),rgba(47,37,48,.88)); }
.inline-task-progress.completed { border-color:rgba(95,200,255,.50); background:linear-gradient(135deg,rgba(20,60,100,.86),rgba(23,37,76,.88)); }
.inline-task-progress.failed { border-color:rgba(255,113,139,.55); background:linear-gradient(135deg,rgba(91,33,58,.86),rgba(53,24,50,.88)); }
.inline-progress-head span,.inline-task-progress > small,.asset-task-state > span { color:#c2d1e8; }
.inline-task-progress.failed > small { color:#ffd1d9; }
.video-model-status { background:linear-gradient(100deg,rgba(15,50,95,.94),rgba(34,29,86,.93)); }
.video-model-status-icon { background:linear-gradient(135deg,#48cfff,#7a69f4); }
.video-model-status small,.video-model-status-tip { color:#b7d0ef; }
.video-model-status strong,.video-model-status strong em { color:#f5f8ff; }
.video-model-binding select { background:rgba(8,21,50,.96)!important; border-color:#719de8!important; color:#eef5ff!important; }
.heading-actions { gap:10px; }
.heading-actions .button { min-height:42px; padding:0 16px; color:#fff; border:1px solid transparent; font-weight:800; letter-spacing:.15px; }
.heading-actions .button[data-action="process-character-faces"],.asset-face-process-button { background:linear-gradient(135deg,#875be8,#5236b8); border-color:#a77dff; }
.heading-actions .button[data-action="open-asset-prompt-generator"] { color:#261a08; background:linear-gradient(135deg,#ffd365,#f39a3d); border-color:#ffd78c; }
.heading-actions .button[data-action="open-asset-import"] { background:linear-gradient(135deg,#278fe9,#2670df); border-color:#7dceff; }
.heading-actions .button[data-action="new-asset"] { background:linear-gradient(135deg,#26bbef,#3d8bea); border-color:#89e1ff; }
.heading-actions .button[data-action="request-clear-assets"] { background:linear-gradient(135deg,#ef5b72,#b7355e); border-color:#ff9bab; }
.heading-actions .button[data-action="batch-assets"] { background:linear-gradient(135deg,#6e63ef,#9d57e4); border-color:#bd9bff; }
input,textarea,select { background:rgba(6,17,42,.88); color:#f1f6ff; border-color:rgba(120,161,239,.40)!important; }
textarea:focus,input:focus,select:focus { border-color:#74d5ff!important; box-shadow:0 0 0 3px rgba(75,166,255,.17); }
select option { background:#101d43; color:#f1f6ff; }
.table { color:#e3edff; }
.table thead { background:rgba(61,105,192,.22); color:#c2d7f3; }
.modal { border-color:rgba(118,187,255,.38); background:linear-gradient(145deg,#142d55,#0a1634); color:#edf5ff; }
.toast { border-color:rgba(107,194,255,.40); background:rgba(12,33,68,.96); color:#f2f7ff; }
.toast.error { border-color:rgba(255,129,151,.55); background:rgba(79,23,47,.97); }
@keyframes command-scan { from { transform:translateX(-54%) skewX(-18deg); } to { transform:translateX(54%) skewX(-18deg); } }
@keyframes command-orbit { from { transform:scale(1) translate3d(-1%,0,0); opacity:.6; } to { transform:scale(1.10) translate3d(3%,-2%,0); opacity:1; } }

/* === Moonlit Studio redesign · cinematic reference background + restrained controls === */
body {
  background-color:#03050b;
  background-image:
    linear-gradient(90deg, rgba(2,7,18,.93) 0%, rgba(4,10,27,.84) 44%, rgba(5,7,19,.76) 100%),
    linear-gradient(180deg, rgba(2,5,13,.14), rgba(2,5,13,.43)),
    url("./night-sky.jpg");
  background-position:center, center, center;
  background-repeat:no-repeat;
  background-size:cover, cover, cover;
  background-attachment:fixed;
}
body::before {
  opacity:1;
  background:
    linear-gradient(114deg, transparent 34%, rgba(120,190,255,.22) 47%, rgba(182,124,255,.10) 49%, transparent 57%),
    radial-gradient(ellipse at 78% 13%, rgba(131,105,255,.19), transparent 30%),
    radial-gradient(ellipse at 18% 83%, rgba(39,152,255,.13), transparent 32%);
  filter:blur(.2px);
  animation: moonlight-sweep 15s ease-in-out infinite alternate;
}
body::after {
  background:
    radial-gradient(circle at 14% 21%, rgba(151,219,255,.9) 0 1px, transparent 1.8px),
    radial-gradient(circle at 31% 16%, rgba(255,255,255,.72) 0 1px, transparent 1.8px),
    radial-gradient(circle at 74% 29%, rgba(163,211,255,.8) 0 1px, transparent 1.8px),
    radial-gradient(circle at 89% 45%, rgba(255,255,255,.64) 0 1px, transparent 1.8px),
    radial-gradient(circle at 58% 76%, rgba(173,203,255,.68) 0 1px, transparent 1.8px);
  background-size:310px 310px, 430px 430px, 520px 520px, 680px 680px, 590px 590px;
  opacity:.64;
  filter:none;
  animation: drifting-stars 34s linear infinite;
}
.main { background:rgba(3,8,21,.36); }
.workflow-bar { background:linear-gradient(90deg,rgba(4,10,27,.94),rgba(9,14,36,.82)); }
.content { background:linear-gradient(90deg,rgba(4,10,27,.12),rgba(4,9,23,.22)); }
.primary-sidebar { background:linear-gradient(180deg,rgba(3,7,19,.97),rgba(6,11,30,.95)); }
.episode-sidebar { background:linear-gradient(180deg,rgba(6,13,32,.91),rgba(7,16,37,.84)); }
.asset-card,.shot-card,.paper,.side-panel,.panel,.video-studio > *,.delivery-shot-card,.batch-plan,.storyboard-empty,.import-panel,.import-guide,.import-preview,.page-progress-summary,.delivery-status-bar,.video-model-status,.import-tab,.video-history-card,.inline-task-progress,.asset-task-state {
  background:linear-gradient(145deg,rgba(12,25,53,.91),rgba(5,14,34,.90));
  border-color:rgba(112,162,245,.31);
}
/* One calm visual system: blue for actions, violet for the selected workflow, red only for destructive actions. */
.button.primary,.button.green,.submit-video-button,.submit-asset-button,
.heading-actions .button[data-action="process-character-faces"],
.heading-actions .button[data-action="open-asset-prompt-generator"],
.heading-actions .button[data-action="open-asset-import"],
.heading-actions .button[data-action="new-asset"],
.heading-actions .button[data-action="batch-assets"],
.asset-face-process-button {
  color:#f7fbff;
  border-color:rgba(126,204,255,.68);
  background:linear-gradient(135deg,#2478d8,#4168d9) !important;
  box-shadow:0 9px 20px rgba(26,88,203,.27);
}
.button.primary:hover,.button.green:hover,.submit-video-button:hover,.submit-asset-button:hover,
.heading-actions .button:not([data-action="request-clear-assets"]):hover,.asset-face-process-button:hover {
  background:linear-gradient(135deg,#3695ed,#6657e4) !important;
  border-color:#a0dcff;
  box-shadow:0 12px 25px rgba(42,111,239,.38);
}
.heading-actions .button[data-action="request-clear-assets"],.button.danger.solid {
  background:linear-gradient(135deg,#c5405f,#962f51) !important;
  border-color:rgba(255,145,164,.72);
  color:#fff;
  box-shadow:0 9px 20px rgba(158,35,69,.22);
}
.heading-actions { gap:9px; justify-content:flex-end; }
.heading-actions .button { min-height:40px; padding:0 14px; border-radius:9px; font-size:12px; letter-spacing:0; white-space:nowrap; }
.control-strip { background:rgba(8,18,44,.78); }
.control-item { background:rgba(8,17,40,.82); }
.page-heading h1 { text-shadow:0 2px 20px rgba(69,126,255,.23); }
.page-progress-summary.working { background:linear-gradient(115deg,rgba(9,36,81,.95),rgba(28,21,75,.91)); }
@keyframes moonlight-sweep { 0% { transform:translate3d(-4%,-1%,0) scale(1); opacity:.44; } 50% { opacity:.86; } 100% { transform:translate3d(4%,2%,0) scale(1.08); opacity:.74; } }
@keyframes drifting-stars { from { background-position:0 0,0 0,0 0,0 0,0 0; } to { background-position:310px -310px,-430px 430px,520px -520px,-680px 680px,590px -590px; } }

/* === Project overview legibility repair === */
.provider-card {
  background:linear-gradient(145deg,rgba(17,33,69,.96),rgba(9,20,47,.95));
  border-color:rgba(117,166,246,.34);
  color:#f1f6ff;
  box-shadow:0 10px 22px rgba(0,2,20,.22);
}
.provider-card .eyebrow { color:#a9c8ec; }
.provider-card > div[style*="font-size:34px"] { color:#f7fbff !important; text-shadow:0 0 18px rgba(101,174,255,.22); }
.provider-card > div[style*="color:var(--muted)"] { color:#bdcce3 !important; }
.script-layout .paper > h2 { color:#f6f9ff; }
.side-panel .stat-row span,.side-panel .check { color:#c5d3e8; }
.side-panel .stat-row strong { color:#fff; }

/* === Delivery screening room: enlarged sequential viewing without changing the existing carousel === */
.delivery-browser { margin:20px 0 22px; padding:18px 20px 15px; border:1px solid rgba(113,177,255,.38); border-radius:16px; background:linear-gradient(145deg,rgba(11,27,61,.95),rgba(5,14,35,.94)); box-shadow:0 24px 54px rgba(0,2,18,.32), inset 0 1px rgba(255,255,255,.06); }
.delivery-browser-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:14px; }
.delivery-browser-head .eyebrow { color:#86bdf6; }
.delivery-browser-head h2 { margin:4px 0 5px; color:#f6f9ff; font-size:18px; }
.delivery-browser-head p { margin:0; color:#b4c6e2; font-size:12px; }
.delivery-browser-counter { min-width:76px; padding:8px 11px; border:1px solid rgba(120,195,255,.38); border-radius:10px; background:rgba(48,82,155,.26); color:#8edbff; font-size:14px; font-weight:850; letter-spacing:.5px; text-align:center; }
.delivery-browser-canvas { display:grid; grid-template-columns:48px minmax(0,1fr) 48px; align-items:center; gap:18px; min-height:400px; padding:16px; border:1px solid rgba(107,159,244,.22); border-radius:13px; background:radial-gradient(ellipse at 50% 28%,rgba(73,127,237,.18),transparent 48%),rgba(3,10,28,.84); }
.delivery-browser-stage { position:relative; width:min(100%,330px); height:390px; margin:auto; overflow:hidden; border:1px solid rgba(147,208,255,.52); border-radius:12px; background:#030711; box-shadow:0 18px 46px rgba(0,0,0,.46),0 0 0 5px rgba(77,124,216,.08); }
.delivery-browser-video { display:block; width:100%; height:100%; object-fit:contain; background:#02050b; }
.delivery-browser-placeholder { display:grid; width:100%; height:100%; place-content:center; justify-items:center; gap:11px; padding:28px; color:#d6e6ff; text-align:center; background:linear-gradient(160deg,rgba(36,72,135,.4),rgba(7,12,29,.92)); }
.delivery-browser-placeholder > span { display:grid; place-items:center; width:62px; height:62px; border:1px solid rgba(132,211,255,.72); border-radius:50%; color:#85d8ff; font-size:18px; font-weight:850; box-shadow:0 0 24px rgba(75,178,255,.22); }
.delivery-browser-placeholder strong { color:#f4f8ff; font-size:14px; }
.delivery-browser-placeholder small { color:#b2c7e6; font-size:11px; line-height:1.5; }
.delivery-browser-placeholder.failed { background:linear-gradient(160deg,rgba(104,32,57,.75),rgba(33,12,31,.94)); }
.browser-arrow { width:42px; height:72px; border:1px solid rgba(121,192,255,.45); border-radius:12px; background:rgba(37,69,133,.58); color:#a7e5ff; font-size:35px; line-height:1; cursor:pointer; transition:.18s ease; }
.browser-arrow:hover:not(:disabled) { border-color:#a9e8ff; background:rgba(57,117,212,.72); color:#fff; box-shadow:0 0 24px rgba(64,163,255,.28); transform:scale(1.04); }
.browser-arrow:disabled { opacity:.32; cursor:default; }
.delivery-browser-meta { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:13px; padding:0 4px; }
.delivery-browser-meta > div { min-width:0; display:grid; gap:3px; }
.delivery-browser-meta strong { color:#f5f9ff; font-size:14px; }
.delivery-browser-meta span:not(.status) { overflow:hidden; color:#b6c8e2; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:1250px) { .delivery-browser-canvas { min-height:330px; } .delivery-browser-stage { height:320px; width:270px; } }

/* Compact page preview; the actual enlarged viewer opens as a dedicated screening window. */
.delivery-browser { margin:14px 0 16px; padding:12px 16px 11px; border-radius:13px; }
.delivery-browser-head { margin-bottom:8px; }
.delivery-browser-head h2 { margin:2px 0 3px; font-size:16px; }
.delivery-browser-head p { font-size:11px; }
.delivery-browser-tools { display:flex; align-items:center; gap:9px; }
.delivery-browser-counter { min-width:64px; padding:7px 8px; font-size:12px; }
.delivery-fullscreen-button { min-height:34px; padding:0 11px; font-size:12px; white-space:nowrap; }
.delivery-browser-canvas { min-height:248px; padding:8px; grid-template-columns:38px minmax(0,1fr) 38px; gap:10px; }
.delivery-browser-stage { width:190px; height:230px; border-radius:9px; }
.browser-arrow { width:34px; height:54px; border-radius:9px; font-size:29px; }
.delivery-browser-meta { margin-top:8px; }
.delivery-fullscreen-backdrop { padding:18px; background:rgba(0,3,12,.88); }
.delivery-fullscreen-modal { display:grid; grid-template-rows:auto minmax(0,1fr) auto; width:min(1240px,96vw); height:min(860px,94vh); overflow:hidden; border:1px solid rgba(122,186,255,.48); border-radius:16px; background:linear-gradient(145deg,#101c38,#060b1d); box-shadow:0 36px 110px rgba(0,0,0,.72); }
.delivery-fullscreen-head { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:14px 18px; border-bottom:1px solid rgba(120,165,242,.24); background:rgba(18,32,61,.76); }
.delivery-fullscreen-head .eyebrow { color:#9ac9ff; }
.delivery-fullscreen-head h2 { margin:3px 0 0; color:#f7fbff; font-size:17px; }
.delivery-fullscreen-head > div:last-child { display:flex; align-items:center; gap:8px; }
.delivery-fullscreen-screen { display:grid; min-height:0; place-items:center; padding:18px; background:radial-gradient(ellipse at 50% 20%,rgba(67,118,220,.22),transparent 48%),#030712; }
.delivery-fullscreen-video { display:block; width:auto; max-width:100%; height:100%; max-height:calc(94vh - 205px); aspect-ratio:9 / 16; border-radius:8px; background:#000; box-shadow:0 20px 54px rgba(0,0,0,.64); }
.delivery-fullscreen-filmstrip { display:flex; gap:10px; overflow-x:auto; padding:12px 16px; border-top:1px solid rgba(120,165,242,.24); background:rgba(8,16,35,.92); }
.delivery-fullscreen-thumb { flex:0 0 124px; min-height:72px; display:grid; align-content:center; gap:3px; padding:9px 10px; border:1px solid rgba(107,151,231,.28); border-radius:9px; background:linear-gradient(145deg,rgba(26,45,82,.9),rgba(12,23,49,.9)); color:#dceaff; cursor:pointer; text-align:left; }
.delivery-fullscreen-thumb.active { border-color:#7bd8ff; background:linear-gradient(145deg,rgba(44,111,195,.72),rgba(78,66,171,.60)); box-shadow:0 0 0 2px rgba(102,198,255,.14); }
.delivery-fullscreen-thumb:disabled { opacity:.48; cursor:default; }
.delivery-fullscreen-thumb span { color:#8ad9ff; font-size:10px; font-weight:800; }
.delivery-fullscreen-thumb strong { overflow:hidden; color:#f5f9ff; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.delivery-fullscreen-thumb small { color:#b8c9e4; font-size:10px; }
@media (max-width:1150px) { .delivery-fullscreen-modal { height:min(800px,94vh); } .delivery-fullscreen-video { max-height:calc(94vh - 190px); } }

/* The screening room itself is the enlarged player; no extra launch button is needed. */
.delivery-browser { margin:14px 0 16px; padding:13px 16px 12px; }
.delivery-browser-head { margin-bottom:10px; }
.delivery-browser-head h2 { font-size:17px; }
.delivery-browser-canvas { min-height:430px; padding:10px 14px; grid-template-columns:42px minmax(0,1fr) 42px; }
.delivery-browser-stage { width:290px; height:400px; border-radius:11px; }
.browser-arrow { width:38px; height:62px; }
.delivery-browser-meta { margin-top:10px; }
.delivery-fullscreen-button { display:none; }
@media (max-height:760px) { .delivery-browser-canvas { min-height:350px; } .delivery-browser-stage { width:240px; height:320px; } }

/* Delivery strip: completed videos stay visible as compact thumbnails below the enlarged player. */
.delivery-sequence { gap:12px; padding-bottom:8px; }
.delivery-shot-card { flex:0 0 208px; min-width:208px; border-radius:10px; }
.delivery-shot-head { gap:6px; min-height:46px; padding:7px 8px; }
.delivery-shot-head > b { width:23px; height:23px; font-size:10px; }
.delivery-shot-head strong { font-size:11px; }
.delivery-shot-head small { font-size:9px; }
.delivery-shot-head .status { min-width:42px; padding:3px 4px; font-size:9px; }
.delivery-shot-preview { height:154px; aspect-ratio:auto; overflow:hidden; background:#020711; }
.delivery-video { object-fit:cover; }
.delivery-shot-meta { min-height:30px; padding:6px 8px 0; font-size:9px; }
.delivery-shot-actions { min-height:53px; gap:4px; padding:7px 8px 8px; }
.delivery-shot-actions .small-button { min-height:25px; padding:0 6px; border-radius:6px; font-size:10px; }
.delivery-shot-actions .small-button:nth-child(n+3) { display:none; }
.delivery-shot-card:hover .delivery-shot-actions .small-button:nth-child(n+3),.delivery-shot-card:focus-within .delivery-shot-actions .small-button:nth-child(n+3) { display:inline-flex; }
.delivery-shot-card:hover { transform:translateY(-2px); }

/* Restore the compact preview layout requested for the delivery page. */
.delivery-browser { margin:14px 0 16px; padding:12px 16px 11px; border-radius:13px; }
.delivery-browser-head { margin-bottom:8px; }
.delivery-browser-head h2 { margin:2px 0 3px; font-size:16px; }
.delivery-browser-head p { font-size:11px; }
.delivery-browser-tools { display:flex; align-items:center; gap:9px; }
.delivery-browser-counter { min-width:64px; padding:7px 8px; font-size:12px; }
.delivery-fullscreen-button { display:inline-flex; min-height:34px; padding:0 11px; font-size:12px; white-space:nowrap; }
.delivery-browser-canvas { min-height:248px; padding:8px; grid-template-columns:38px minmax(0,1fr) 38px; gap:10px; }
.delivery-browser-stage { width:190px; height:230px; border-radius:9px; }
.browser-arrow { width:34px; height:54px; border-radius:9px; font-size:29px; }
.delivery-browser-meta { margin-top:8px; }

/* Restore the compact lower completed-video strip exactly as before. */
.delivery-sequence { gap:10px; padding:2px 2px 10px; }
.delivery-shot-card { flex:0 0 198px; min-width:198px; }
.delivery-shot-head { min-height:44px; padding:6px 8px; }
.delivery-shot-preview { height:145px; }
.delivery-shot-meta { min-height:29px; padding:6px 8px 0; }
.delivery-shot-actions { min-height:51px; padding:7px 8px 8px; }
.delivery-shot-actions .small-button:nth-child(n+3) { display:none; }

/* Restore full vertical finished-video cards; do not crop them into thumbnails. */
.delivery-sequence { gap:14px; padding:2px 2px 12px; }
.delivery-shot-card { flex:0 0 286px; min-width:286px; border-radius:11px; }
.delivery-shot-head { min-height:0; gap:9px; padding:11px 12px; }
.delivery-shot-head > b { width:27px; height:27px; font-size:11px; }
.delivery-shot-head strong { font-size:12px; }
.delivery-shot-head small { font-size:10px; }
.delivery-shot-head .status { min-width:48px; padding:4px 6px; font-size:10px; }
.delivery-shot-preview { height:auto; aspect-ratio:9 / 13; }
.delivery-video { object-fit:contain; }
.delivery-shot-meta { min-height:0; padding:9px 12px 0; font-size:10px; }
.delivery-shot-actions { min-height:0; gap:6px; padding:10px 12px 12px; }
.delivery-shot-actions .small-button { min-height:31px; padding:0 9px; border-radius:8px; font-size:11px; }
.delivery-shot-actions .small-button:nth-child(n+3),.delivery-shot-card:hover .delivery-shot-actions .small-button:nth-child(n+3),.delivery-shot-card:focus-within .delivery-shot-actions .small-button:nth-child(n+3) { display:inline-flex; }

/* Restore the original light workspace palette and clear text contrast. */
:root { --ink:#18241f; --muted:#718078; --line:#dfe7e2; --soft:#f4f7f5; --panel:#fff; --sidebar:#12221c; --sidebar-soft:#1d3229; --green:#277a5b; --green-2:#3f9674; --lime:#c8ff52; --lime-soft:#efffcd; --danger:#d45d53; --shadow:0 12px 32px rgba(27,55,43,.09); }
body { color:var(--ink); background:#f4f7f5; background-image:none; }
body::before,body::after { display:none; }
.primary-sidebar { background:var(--sidebar); border-right-color:transparent; box-shadow:none; }
.primary-sidebar::before { display:none; }
.logo strong { color:#fff; text-shadow:none; }
.nav-button { color:#9eb0a8; }
.nav-button:hover { border-color:transparent; background:rgba(255,255,255,.06); color:#fff; }
.nav-button.active { background:var(--lime); color:#16241e; box-shadow:none; }
.sync-card { border:0; background:var(--sidebar-soft); color:#c8d5cf; }
.episode-sidebar { background:#f8faf9; border-color:var(--line); box-shadow:none; }
.project-title strong,.episode-item { color:#33423b; }
.eyebrow { color:var(--muted); }
.icon-button,.small-button { border-color:var(--line); background:#fff; color:var(--ink); box-shadow:none; }
.icon-button:hover,.small-button:hover { border-color:#9ebcad; background:#f8fffb; color:var(--ink); box-shadow:none; }
.episode-item:hover { background:#eef3f0; }
.episode-item.active { background:#e4eee9; color:#173326; box-shadow:inset 3px 0 var(--green); }
.episode-no { background:#e5ebe8; color:var(--ink); }
.new-episode { color:var(--green); border-color:#b8c7c0; background:transparent; }
.main { background:#fff; }
.workflow-bar { background:rgba(255,255,255,.94); border-color:var(--line); box-shadow:none; }
.step-button { color:#87958e; }
.step-button:hover { color:#173d2d; background:transparent; }
.step-button.active { color:#173d2d; border-bottom-color:var(--green); background:transparent; }
.step-button.active .step-dot { background:var(--green); border-color:var(--green); color:#fff; box-shadow:none; }
.content { background:#fbfcfb; }
.page-heading h1,.asset-title h3,.paper h2,.side-panel h3,.storyboard-empty h3 { color:#18241f; text-shadow:none; }
.page-heading p,.asset-title p,.asset-description,.prompt,.summary,.scene p,.board-title small,.board-prompt { color:var(--muted); }
.button { border-color:var(--line); background:#fff; color:var(--ink); box-shadow:none; }
.button:hover { border-color:#9fbaad; background:#fff; color:var(--ink); box-shadow:none; }
.button.primary { border-color:var(--lime); background:var(--lime); color:#173020; box-shadow:none; }
.button.green,.submit-video-button,.submit-asset-button { border-color:var(--green); background:var(--green); color:#fff; box-shadow:none; }
.button.danger.solid { background:var(--danger); border-color:var(--danger); }
.control-strip { border-color:var(--line); background:var(--line); }
.control-item { background:#f7faf8; color:var(--ink); }
.control-item label { color:var(--muted); }
.control-item select,.control-item strong { color:var(--ink); }
.tab { color:var(--muted); }
.tab.active { border-color:transparent; background:#e4f1ea; color:var(--green); box-shadow:none; }
.asset-card,.shot-card,.paper,.side-panel,.panel,.video-studio > *,.delivery-shot-card,.batch-plan,.storyboard-empty,.import-panel,.import-guide,.import-preview,.page-progress-summary,.delivery-status-bar,.video-model-status,.import-tab,.video-history-card,.inline-task-progress,.asset-task-state,.provider-card { background:#fff; border-color:var(--line); color:var(--ink); box-shadow:0 3px 12px rgba(27,55,43,.03); }
.asset-info,.shot-meta { background:#fff; }
.asset-card:hover,.shot-card:hover { border-color:#b8d5c6; box-shadow:0 8px 22px rgba(27,55,43,.09); }
.asset-title h3,.batch-plan-item span,.batch-plan-head h2,.page-progress-main h3,.delivery-status-bar strong { color:#18241f; }
.asset-title p,.batch-plan-item small,.batch-plan-head p,.batch-plan-item em,.page-progress-meta,.delivery-status-bar span { color:var(--muted); }
.batch-plan { background:linear-gradient(135deg,#f2faf6,#fff); }
.batch-plan-item { background:#fff; border-color:#dce8e1; color:var(--ink); }
.batch-plan-item b { color:var(--green); }
.batch-timeline { border-color:#c9ddd2; }
.batch-timeline > div,.batch-timeline > div:nth-child(even) { background:#e8f5ee; color:var(--ink); border-right-color:#fff; }
.import-tab.active { border-color:var(--green); background:#f1faf5; box-shadow:inset 0 0 0 1px var(--green); }
.import-tab b { background:#e7f3ed; color:var(--green); }
.paste-area,.upload-zone,input,textarea,select { background:#fff; color:#18241f; border-color:var(--line)!important; }
textarea:focus,input:focus,select:focus { border-color:var(--green)!important; box-shadow:0 0 0 3px #e4f3eb; }
select option { background:#fff; color:#18241f; }
.video-model-status { background:linear-gradient(100deg,#edf7ff,#f8fcff); color:#174c78; border-color:#9ac9ea; }
.video-model-status small,.video-model-status-tip { color:#55738e; }
.video-model-status strong,.video-model-status strong em { color:#174c78; }
.video-model-binding select { background:#f8fbff!important; color:#123e91!important; border-color:#7ca7ef!important; }
.page-progress-summary.working { background:linear-gradient(115deg,#f6fbf8,#edfaf3); border-color:#b7d8c8; }
.page-progress-main > strong { color:var(--green); }
.page-progress-track,.delivery-status-track,.inline-progress-track { background:#dfe8e3; }
.page-progress-track > div,.delivery-status-track i,.inline-progress-fill { background:linear-gradient(90deg,#277a5b,#61b58e); }
.inline-task-progress.running { background:#fffaec; border-color:#d8c99c; }
.inline-task-progress.completed { background:#edf8f2; border-color:#cbe2d6; }
.inline-task-progress.failed { background:#fff2f0; border-color:#efcfcb; }
.inline-progress-head span,.inline-task-progress > small,.asset-task-state > span { color:#56675f; }
.delivery-browser { background:#fff; border-color:var(--line); box-shadow:0 3px 12px rgba(27,55,43,.03); }
.delivery-browser-head .eyebrow { color:var(--muted); }
.delivery-browser-head h2,.delivery-browser-meta strong { color:#18241f; }
.delivery-browser-head p,.delivery-browser-meta span:not(.status) { color:var(--muted); }
.delivery-browser-counter { background:#f1faf5; border-color:#b8d8c8; color:var(--green); }
.delivery-browser-canvas { background:#f7faf8; border-color:var(--line); }
.browser-arrow { background:#f2f8f4; border-color:#cddbd3; color:var(--green); }
.browser-arrow:hover:not(:disabled) { background:#e3f3eb; border-color:var(--green); color:var(--green); box-shadow:none; }
.delivery-browser-stage { border-color:#c9ddd2; box-shadow:0 8px 22px rgba(27,55,43,.11); }
.delivery-shot-card { background:#fff; border-color:var(--line); }
.delivery-shot-head { border-color:#edf1ef; }
.delivery-shot-head > b { background:#e8f4ee; color:var(--green); }
.delivery-shot-head strong { color:#18241f; }
.delivery-shot-head small,.delivery-shot-meta { color:var(--muted); }
.modal { background:#fff; color:var(--ink); border-color:var(--line); }
.toast { background:#172a21; color:#fff; }

/* Floating feedback: keep it clear of the sidebar and bottom controls. The
   earlier #toast-root position rule overrode the fixed layout and made every
   batch acknowledgement pile up at the bottom of the document. */
#toast-root.toast-root {
  position:fixed;
  z-index:9999;
  top:82px;
  right:28px;
  bottom:auto;
  left:auto;
  display:grid;
  gap:10px;
  width:min(360px,calc(100vw - 32px));
  pointer-events:none;
}
#toast-root .toast{
  pointer-events:auto;
  min-width:0;
  width:100%;
  display:grid;
  grid-template-columns:32px minmax(0,1fr) 24px;
  align-items:start;
  gap:10px;
  padding:12px 12px;
  border:1px solid #cfe7da;
  border-radius:14px;
  background:rgba(255,255,255,.97);
  color:#1a382a;
  box-shadow:0 14px 34px rgba(22,71,48,.18);
  backdrop-filter:blur(12px);
  animation:toast-float-in .24s cubic-bezier(.2,.8,.2,1);
}
#toast-root .toast.queued{border-color:#b9d8ff;background:linear-gradient(135deg,#fbfdff,#f0f7ff);color:#174a83}
#toast-root .toast.error{border-color:#f1c3bf;background:#fff8f7;color:#8c3027}
#toast-root .toast-icon{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:#e8f7ee;color:#16754b;font-size:17px;font-weight:900}
#toast-root .toast.queued .toast-icon{background:#e5f1ff;color:#216cc3}
#toast-root .toast.error .toast-icon{background:#ffe6e3;color:#bb3f34}
#toast-root .toast strong{display:block;margin:1px 0 3px;font-size:12px;letter-spacing:.1px}
#toast-root .toast p{margin:0;color:inherit;font-size:12px;line-height:1.45;word-break:break-word}
#toast-root .toast-close{width:24px;height:24px;padding:0;border:0;border-radius:7px;background:transparent;color:#7b8c82;font:20px/1 Arial,sans-serif;cursor:pointer}
#toast-root .toast-close:hover{background:#edf3ef;color:#30493b}
@keyframes toast-float-in{from{opacity:0;transform:translate3d(16px,-6px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@media(max-width:680px){#toast-root.toast-root{top:68px;right:16px;width:calc(100vw - 32px)}}


/* Restore the original task-table text colors (the prior dark skin left pale text on white rows). */
.table { color:var(--ink); }
.table thead,.table th { background:#f6f8f7; color:var(--muted); }
.table td,.table th { border-color:var(--line); }
.task-name strong { color:#18241f; }
.task-name small { color:var(--muted); }
.task-icon { background:#e5f1eb; color:var(--green); }
.status.completed { color:#16734f; background:#e2f3eb; }
.status.running { color:#9b630c; background:#fff0d3; }
.status.queued { color:#5f6976; background:#ebeff2; }
.status.failed { color:#b8382f; background:#fde8e6; }
.progress-track { background:#e5ebe8; }
.progress-fill { background:var(--green-2); }
.progress-label { color:var(--muted); }
.task-message { color:#a14a42; }
.task-name,.table td { color:#33423b; }

/* Light-theme heading buttons and task column: force the original dark text over all older theme rules. */
.heading-actions .button { color:#18241f !important; background:#fff !important; border-color:var(--line) !important; box-shadow:none !important; }
.heading-actions .button:hover { color:#18241f !important; background:#f8fffb !important; border-color:#9fbaad !important; }
.heading-actions .button.primary { color:#173020 !important; background:var(--lime) !important; border-color:var(--lime) !important; }
.heading-actions .button.green { color:#fff !important; background:var(--green) !important; border-color:var(--green) !important; }
.table .task-name strong { color:#18241f !important; }
.table .task-name small { color:#718078 !important; }
.table .task-name, .table .task-name > div { color:#33423b !important; }
.table .task-icon { color:#277a5b !important; background:#e5f1eb !important; }

/* === Final light-workspace contrast lock: pasted storyboard/asset text must remain readable. === */
.import-panel,
.import-panel .import-pane,
.import-panel .import-options,
.import-guide { color:#18241f !important; }
.import-panel label,
.import-panel .hint,
.import-guide h3,
.import-guide li,
.import-guide li span,
.import-guide li b { color:#33423b !important; }
textarea.paste-area,
.import-panel textarea.paste-area,
textarea#storyboard-text,
textarea#asset-text {
  background:#ffffff !important;
  color:#18241f !important;
  -webkit-text-fill-color:#18241f !important;
  caret-color:#18241f;
  border-color:#b8c7c0 !important;
  box-shadow:none !important;
}
textarea.paste-area::placeholder,
.import-panel textarea::placeholder { color:#718078 !important; opacity:1; }
.import-panel textarea.paste-area:focus { background:#fff !important; color:#18241f !important; border-color:#277a5b !important; box-shadow:0 0 0 3px #e4f3eb !important; }
.import-panel select,
.import-panel option { background:#fff !important; color:#18241f !important; -webkit-text-fill-color:#18241f !important; }

/* Update announcement entry and modal */
.update-notice-button{width:100%;margin-top:10px;padding:9px 7px;border:1px solid rgba(200,255,82,.46);border-radius:9px;background:rgba(200,255,82,.10);color:#eaffad;cursor:pointer;font:inherit;font-size:11px;font-weight:750}
.update-notice-button:hover{background:rgba(200,255,82,.2)}
.update-notice-modal{width:min(620px,92vw)}

/* 720° scene workflow: intentionally high-contrast so it remains visible on every asset card. */
.panorama-launch-button{width:calc(100% - 30px);margin:0 15px 12px;min-height:58px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:9px 14px;border:1px solid #3278e8;border-radius:11px;background:linear-gradient(104deg,#123a8d 0%,#1e64d4 53%,#387ce2 100%);color:#fff;box-shadow:0 10px 20px rgba(21,83,190,.28),inset 0 1px 0 rgba(255,255,255,.28);cursor:pointer;text-align:left;transition:transform .18s ease,box-shadow .18s ease,filter .18s ease}
.panorama-launch-button:hover{transform:translateY(-2px);filter:brightness(1.08);box-shadow:0 15px 28px rgba(21,83,190,.38),inset 0 1px 0 rgba(255,255,255,.3)}
.panorama-launch-button span{font-size:15px;font-weight:850;letter-spacing:.15px;white-space:nowrap}.panorama-launch-button small{min-width:0;color:rgba(242,249,255,.86);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.panorama-launch-button b{padding-left:9px;border-left:1px solid rgba(255,255,255,.28);font-size:12px;white-space:nowrap}
.panorama-studio-modal{width:min(1080px,96vw);max-height:92vh}.panorama-studio-modal .modal-head p{margin:6px 0 0;color:var(--muted);font-size:12px}.panorama-modal-kicker{display:inline-block;margin-bottom:5px;color:#2c70d6;font-weight:800;font-size:11px;letter-spacing:.7px}.panorama-studio-body{gap:15px}.panorama-workflow{display:flex;align-items:center;justify-content:center;gap:8px;padding:13px 10px;border:1px solid #dbe7f9;border-radius:12px;background:linear-gradient(100deg,#f8fbff,#eef5ff)}.panorama-workflow>div{display:flex;align-items:center;gap:7px;color:#718197;font-size:12px;font-weight:750}.panorama-workflow>div b{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#d9e4f2;color:#687b91}.panorama-workflow>div.done{color:#1b5fbf}.panorama-workflow>div.done b{background:#246fd8;color:#fff}.panorama-workflow>i{width:30px;height:1px;background:#b9cee9}.panorama-source-row{display:grid;grid-template-columns:1fr 1fr;gap:13px}.panorama-source-row>div{min-width:0}.panorama-source-row label{display:block;margin-bottom:7px;color:#5f7289;font-size:12px;font-weight:800}.panorama-source-row img,.panorama-empty-preview{display:block;width:100%;height:170px;border:1px solid #d9e4ef;border-radius:10px;background:#eff4f8;object-fit:contain}.panorama-empty-preview{display:grid;place-items:center;color:#8392a3;font-size:12px}.panorama-running{display:flex;align-items:center;gap:9px;padding:12px 14px;border:1px solid #bed7ff;border-radius:10px;background:#eef6ff;color:#1f5da9}.panorama-running span{width:16px;height:16px;border:3px solid #bbd8ff;border-top-color:#256fd5;border-radius:50%;animation:asset-ring-spin .8s linear infinite}.panorama-running small{color:#6381a8;font-size:11px}.panorama-browser{overflow:hidden;border:1px solid #d6e3f0;border-radius:12px;background:#07111d}.panorama-browser-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 14px;background:linear-gradient(100deg,#10233b,#162f4b);color:#edf7ff}.panorama-browser-head strong{display:block;font-size:14px}.panorama-browser-head small{display:block;margin-top:3px;color:#b9cde1;font-size:11px}.panorama-browser-head span{padding:5px 8px;border:1px solid rgba(190,220,249,.25);border-radius:6px;color:#d8ebff;font-size:11px}.panorama-browser canvas{display:block;width:100%;height:auto;max-height:420px;cursor:ew-resize;touch-action:none}.panorama-grid-result{display:grid;grid-template-columns:1fr auto;gap:9px;align-items:center;padding:13px;border:1px solid #cfe1fb;border-radius:12px;background:#f6faff}.panorama-grid-result strong{display:block;color:#194f94;font-size:14px}.panorama-grid-result small{display:block;margin-top:4px;color:#73859b;font-size:11px}.panorama-grid-result>a{padding:7px 10px;border-radius:7px;background:#e1efff;color:#1c61ba;font-size:12px;font-weight:800;text-decoration:none}.panorama-grid-result>img{grid-column:1/-1;width:100%;border:1px solid #d8e4f0;border-radius:8px;background:#fff}.panorama-actions{gap:9px;flex-wrap:wrap}.panorama-actions .button{font-weight:800}.panorama-generate-button{border-color:#1d65d5!important;background:#236fd9!important;color:#fff!important;box-shadow:0 6px 14px rgba(32,101,209,.24)}.panorama-extract-button{border-color:#0f9a95!important;background:#12a39e!important;color:#fff!important;box-shadow:0 6px 14px rgba(14,143,138,.2)}.panorama-use-button{border-color:#e07816!important;background:#f28a22!important;color:#fff!important;box-shadow:0 6px 14px rgba(217,108,10,.2)}.panorama-actions .button:disabled{filter:grayscale(.3);box-shadow:none}
@media(max-width:680px){.panorama-launch-button{grid-template-columns:1fr auto}.panorama-launch-button small{grid-column:1/-1;grid-row:2}.panorama-source-row{grid-template-columns:1fr}.panorama-workflow{justify-content:flex-start;overflow:auto}.panorama-workflow>i{min-width:18px}.panorama-workflow>div span{white-space:nowrap}.panorama-grid-result{grid-template-columns:1fr}.panorama-grid-result>a{justify-self:start}}
.panorama-error{display:grid;gap:4px;padding:12px 14px;border:1px solid #edb8b1;border-radius:10px;background:#fff4f2;color:#a9342a}.panorama-error strong{font-size:13px}.panorama-error span{color:#95544e;font-size:12px;line-height:1.5}
.scene-coverage-launch-button{background:linear-gradient(104deg,#31247f 0%,#5c42c8 53%,#7863e1 100%);border-color:#6b52dd;box-shadow:0 10px 20px rgba(70,46,174,.28),inset 0 1px 0 rgba(255,255,255,.28)}.scene-coverage-launch-button:hover{box-shadow:0 15px 28px rgba(70,46,174,.38),inset 0 1px 0 rgba(255,255,255,.3)}.scene-coverage-modal{width:min(1180px,96vw);max-height:92vh}.scene-coverage-workflow{display:flex;align-items:center;justify-content:center;gap:8px;padding:13px 10px;border:1px solid #e2ddfa;border-radius:12px;background:linear-gradient(100deg,#fbfaff,#f3f0ff)}.scene-coverage-workflow>div{display:flex;align-items:center;gap:7px;color:#77718d;font-size:12px;font-weight:750}.scene-coverage-workflow>div b{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#e5e1f1;color:#756f89}.scene-coverage-workflow>div.done{color:#553ec2}.scene-coverage-workflow>div.done b{background:#6247cf;color:#fff}.scene-coverage-workflow>i{width:30px;height:1px;background:#d5cfef}.scene-coverage-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.scene-coverage-view{overflow:hidden;border:1px solid #dcdfea;border-radius:10px;background:#f7f8fb}.scene-coverage-view.ready{border-color:#b8abe9}.scene-coverage-view-head{display:flex;justify-content:space-between;align-items:center;padding:9px 11px;background:#f0f1f7;color:#515a6b;font-size:12px}.scene-coverage-view.ready .scene-coverage-view-head{background:#f0edff;color:#513db0}.scene-coverage-view-head span{color:#7d8997;font-size:11px}.scene-coverage-view-head span.failed{color:#bd4137}.scene-coverage-view img,.scene-coverage-empty{display:block;width:100%;height:190px;object-fit:contain;background:#edf0f5}.scene-coverage-empty{display:grid;place-items:center;padding:14px;color:#87919d;font-size:12px;text-align:center;line-height:1.5}.scene-coverage-result{display:grid;grid-template-columns:1fr auto;gap:9px;align-items:center;padding:13px;border:1px solid #d8cff9;border-radius:12px;background:#f8f6ff}.scene-coverage-result strong{display:block;color:#4e36b3;font-size:14px}.scene-coverage-result small{display:block;margin-top:4px;color:#766d98;font-size:11px}.scene-coverage-result>a{padding:7px 10px;border-radius:7px;background:#e7e1ff;color:#4f38b6;font-size:12px;font-weight:800;text-decoration:none}.scene-coverage-result>img{grid-column:1/-1;width:100%;border:1px solid #ded8f3;border-radius:8px;background:#fff}.scene-coverage-actions{gap:9px;flex-wrap:wrap}.scene-coverage-actions .button{font-weight:800}.scene-opposite-button{border-color:#6045cf!important;background:#6045cf!important;color:#fff!important}.scene-oblique-button{border-color:#2377bd!important;background:#2377bd!important;color:#fff!important}.scene-topdown-button{border-color:#148f82!important;background:#148f82!important;color:#fff!important}.scene-compose-button{border-color:#dc7815!important;background:#ef891d!important;color:#fff!important}@media(max-width:680px){.scene-coverage-workflow{justify-content:flex-start;overflow:auto}.scene-coverage-workflow>i{min-width:18px}.scene-coverage-workflow>div span{white-space:nowrap}.scene-coverage-grid{grid-template-columns:1fr}.scene-coverage-result{grid-template-columns:1fr}.scene-coverage-result>a{justify-self:start}}
.update-notice-list{display:grid;gap:10px;margin-top:4px}.update-notice-item{padding:12px 13px;border:1px solid #dfe7e2;border-radius:10px;background:#f9fcfa}.update-notice-item b{display:inline-block;margin-right:8px;color:#277a5b;font-size:11px}.update-notice-item strong{color:#18241f}.update-notice-item p{margin:7px 0 0;color:#59685f;font-size:12px;line-height:1.65}.update-notice-date{color:#718078;font-size:12px}.update-notice-new{display:inline-grid;place-items:center;min-width:16px;height:16px;margin-left:5px;border-radius:9px;background:#c8ff52;color:#193321;font-size:9px;font-weight:900}
.header-update-notice{margin-left:auto;margin-right:20px;min-height:38px;padding:0 15px;border:1px solid #f4b740;border-radius:9px;background:linear-gradient(135deg,#ffbf3f,#f18a28);color:#422400;box-shadow:0 5px 14px rgba(218,133,27,.25);font:800 12px "Microsoft YaHei",sans-serif;cursor:pointer;white-space:nowrap}.header-update-notice:hover{background:linear-gradient(135deg,#ffd064,#f6a342);transform:translateY(-1px)}.header-update-notice .update-notice-new{background:#b92e36;color:#fff}.video-duration-control{display:flex;align-items:center;gap:7px;margin:8px 0 2px;color:#53645b;font-size:11px}.video-duration-control select{min-height:30px;padding:0 7px;border:1px solid #8cc8a8!important;border-radius:7px;background:#f5fff8!important;color:#17442f!important;font-weight:800}.video-duration-control small{color:#718078}

/* Obvious duration editing control in the video configuration. */
.duration-picker-card{margin:14px 0;padding:14px 16px;border:2px solid #4a9cf0;border-radius:12px;background:linear-gradient(120deg,#edf7ff,#f7fcff);box-shadow:0 7px 18px rgba(47,128,224,.11)}
.duration-picker-title{display:flex;align-items:center;gap:10px;margin-bottom:10px}.duration-picker-title>span{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#287de0;color:#fff;font-weight:900}.duration-picker-title>div{display:grid;gap:2px}.duration-picker-title strong{color:#123d76;font-size:15px}.duration-picker-title small{color:#55738e;font-size:11px}.duration-picker-title>b{margin-left:auto;padding:4px 8px;border-radius:99px;background:#ffcf54;color:#583a00;font-size:11px}.duration-picker-select{display:block!important;width:100%!important;min-height:48px!important;padding:0 15px!important;border:2px solid #287de0!important;border-radius:9px!important;background:#fff!important;color:#123d76!important;font-size:18px!important;font-weight:900!important;cursor:pointer}.duration-picker-select:hover,.duration-picker-select:focus{border-color:#0b61c3!important;box-shadow:0 0 0 4px rgba(40,125,224,.16)!important}.duration-picker-tip{margin-top:9px;color:#55738e;font-size:12px}.duration-picker-tip strong{color:#126bc4;font-size:14px}


/* Scene coverage: keep the composed reference visible after scrolling and expose one clear action. */
.asset-visual:has(.scene-coverage-asset-image){background:#edf2f8!important}
.scene-coverage-asset-image{background:#edf2f8!important;object-fit:contain!important;content-visibility:auto}
.scene-coverage-status{display:flex;align-items:center;gap:11px;padding:12px 14px;border:1px solid #d5cdf5;border-radius:11px;background:#f8f6ff;color:#4c3ba5}.scene-coverage-status-ring{width:19px;height:19px;flex:0 0 auto;border:3px solid #d2caf6;border-top-color:#6045cf;border-radius:50%;animation:asset-ring-spin .8s linear infinite}.scene-coverage-status strong{display:block;font-size:13px}.scene-coverage-status small{display:block;margin-top:3px;color:#746c91;font-size:11px;line-height:1.5}.scene-coverage-status.complete{border-color:#b7e5d3;background:#f1fff8;color:#237653}.scene-coverage-status.complete .scene-coverage-status-ring{border-color:#42bd83;animation:none}.scene-coverage-status.failed{border-color:#f0c1bb;background:#fff6f4;color:#af4138}.scene-coverage-status.failed .scene-coverage-status-ring{border-color:#e88e84;animation:none}.scene-coverage-run-button{min-width:275px!important;border-color:#5f43d1!important;background:linear-gradient(104deg,#4430aa,#6849db 58%,#856be8)!important;color:#fff!important;box-shadow:0 8px 18px rgba(78,53,186,.28)!important}.scene-coverage-run-button:hover{filter:brightness(1.08);transform:translateY(-1px)}.scene-coverage-run-button:disabled{filter:grayscale(.25);box-shadow:none!important}@media(max-width:680px){.scene-coverage-run-button{width:100%;min-width:0!important}.scene-coverage-status{align-items:flex-start}}

.scene-coverage-head-actions{display:flex;align-items:center;gap:10px}.scene-coverage-head-actions .scene-coverage-run-button{white-space:nowrap}.scene-batch-coverage-button{background:#6446dc!important;border-color:#6446dc!important;color:#fff!important}

/* Visual prompt composer: asset references are shown as image chips, while the source remains editable. */
.prompt-composer-field > label { display:flex; align-items:center; gap:8px; }
.inline-preview-badge { display:inline-flex; align-items:center; padding:2px 8px; border-radius:999px; background:#e7f0ff; color:#2454a4; font-size:11px; font-weight:700; }
.video-prompt-asset-preview { min-height:104px; max-height:300px; overflow:auto; padding:13px 14px; border:1px solid #b9cbed; border-radius:11px; background:linear-gradient(135deg,#f8fbff,#eef4ff); color:#1b2943; font-family:"Microsoft YaHei",sans-serif; font-size:13px; line-height:2.15; white-space:pre-wrap; box-shadow:inset 0 1px 0 rgba(255,255,255,.9); }
.inline-prompt-text { color:#526078; }
.inline-asset-chip { display:inline-flex; align-items:center; gap:6px; min-height:30px; margin:2px 3px; padding:2px 8px 2px 3px; border:1px solid #9cb7e8; border-radius:8px; background:#fff; color:#263f7a; vertical-align:middle; line-height:1.2; box-shadow:0 2px 5px rgba(39,79,148,.10); }
.inline-asset-chip.ready { border-color:#72a6ed; background:linear-gradient(135deg,#fff,#edf5ff); }
.inline-asset-chip.waiting { border-color:#e2b568; background:#fffaf0; color:#805419; }
.inline-asset-chip.missing { border-color:#e8a8a8; background:#fff5f5; color:#9a3030; }
.inline-asset-chip img,.inline-asset-fallback { width:29px; height:29px; flex:0 0 29px; border-radius:5px; object-fit:cover; background:#dce8fb; }
.inline-asset-fallback { display:inline-grid; place-items:center; color:#426297; font-size:12px; font-weight:800; }
.inline-asset-chip b { font-size:12px; font-weight:700; white-space:nowrap; }
.inline-asset-chip small { padding-left:5px; border-left:1px solid currentColor; opacity:.72; font-size:10px; white-space:nowrap; }
.video-prompt-preview-tip { margin:7px 1px 9px; color:#66758e; font-size:11px; line-height:1.5; }
.prompt-editor-details { border:1px dashed #b9cbed; border-radius:9px; background:#fff; overflow:hidden; }
.prompt-editor-details summary { cursor:pointer; padding:9px 11px; color:#31568f; font-size:12px; font-weight:700; user-select:none; }
.prompt-editor-details[open] summary { border-bottom:1px solid #dce6f8; background:#f5f8ff; }
.prompt-editor-details .studio-prompt { display:block; width:calc(100% - 18px); margin:9px; min-height:180px; }
@media (max-width: 760px) { .video-prompt-asset-preview { max-height:230px; font-size:12px; } .inline-asset-chip small { display:none; } }


/* Manual reference binding: thumbnail cards remove ambiguous duplicate names. */
.asset-binding-modal { width: min(760px, calc(100vw - 32px)); }
.asset-binding-search { display: grid; gap: 6px; font-size: 12px; font-weight: 700; color: #355047; }
.asset-binding-search input { width: 100%; }
.asset-binding-selected { padding: 9px 11px; border: 1px solid #cbdcf2; border-radius: 9px; background: #f4f8ff; color: #43627c; font-size: 13px; }
.asset-binding-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; max-height: min(46vh, 420px); overflow: auto; padding: 2px; }
.asset-binding-option { min-width: 0; min-height: 112px; padding: 7px; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 8px; align-items: center; text-align: left; color: #263d36; border: 1px solid #d8e4df; border-radius: 10px; background: #fbfdfc; cursor: pointer; position: relative; }
.asset-binding-option:hover { border-color: #2c8c6d; box-shadow: 0 5px 14px rgba(31,113,85,.12); }
.asset-binding-option.selected { border: 2px solid #267eef; background: #f2f7ff; box-shadow: 0 0 0 2px rgba(38,126,239,.12); }
.asset-binding-option > i { position: absolute; top: 5px; right: 5px; padding: 2px 5px; border-radius: 5px; background: #267eef; color: #fff; font-style: normal; font-size: 10px; }
.asset-binding-option strong, .asset-binding-option small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asset-binding-option strong { font-size: 13px; }
.asset-binding-option small { margin-top: 5px; color: #70827b; font-size: 11px; }
.asset-binding-thumb { width: 64px; height: 82px; overflow: hidden; border-radius: 7px; background: #deebe5; display: grid; place-items: center; color: #287a61; font-weight: 800; }
.asset-binding-thumb img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 720px) { .asset-binding-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }


/* Highly visible one-click filter for cards that still lack usable reference media. */
.missing-reference-filter { background: #f97316 !important; border-color: #ea580c !important; color: #fff !important; font-weight: 800; box-shadow: 0 6px 15px rgba(234,88,12,.26); }
.missing-reference-filter:hover, .missing-reference-filter.active { background: #c2410c !important; border-color: #9a3412 !important; }

.delivery-download-hint { color: var(--muted); font-size: 12px; white-space: nowrap; }

/* Asset delivery is a first-class action: all ready images are saved individually. */
.heading-actions .asset-batch-download-button {
  background: linear-gradient(135deg, #0f70cf, #2159ad) !important;
  border-color: #0e5bac !important;
  color: #fff !important;
  font-weight: 850;
  box-shadow: 0 7px 16px rgba(23, 93, 175, .24);
}
.heading-actions .asset-batch-download-button:hover { filter: brightness(1.08); transform: translateY(-1px); }
.heading-actions .asset-batch-download-button:disabled { opacity: .55; box-shadow: none; transform: none; }