:root {
  --bg: #0A0D12;
  --surface: #12171F;
  --surface2: #1A212C;
  --border: #252E3B;
  --border-hi: #3A4658;
  --text: #EEF1F6;
  --soft: #C4CBD7;
  --muted: #8A94A6;
  --faint: #5C6678;
  --accent: #F2B04A;
  --accent-ink: #1A1206;
  --ok: #58C48A;
  --err: #E5686B;
  --sans: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --serif: "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); }
body { min-height: 100vh; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
[hidden] { display: none !important; }
h1, h2, h3 { margin: 0; }
.muted { color: var(--muted); font-weight: 400; }
.small-text { font-size: 12px; }
.label { font-size: 12px; font-weight: 500; color: var(--muted); letter-spacing: .5px; }
.loading { padding: 80px; text-align: center; color: var(--muted); }

/* controls */
.primary { height: 48px; border: 0; border-radius: 10px; background: var(--accent); color: var(--accent-ink); font-size: 15px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 8px; transition: filter .15s; }
.primary:hover { filter: brightness(1.06); }
.primary:disabled { opacity: .55; cursor: progress; }
.primary.inline { height: auto; padding: 12px 20px; font-size: 14px; }
.ghost, .solid { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 10px; font-size: 14px; font-weight: 600; }
.ghost { background: var(--surface2); border: 1px solid var(--border); }
.ghost:hover:not(:disabled) { border-color: var(--border-hi); }
.ghost:disabled { opacity: .45; cursor: not-allowed; }
.solid { background: var(--text); color: var(--bg); }
.solid.disabled { opacity: .35; pointer-events: none; }
.small { padding: 8px 12px; font-size: 13px; font-weight: 500; }
.small svg { color: var(--muted); }
.icon-btn { background: none; border: 0; padding: 6px; color: var(--muted); border-radius: 8px; display: grid; place-items: center; }
.icon-btn:hover { color: var(--text); background: var(--surface2); }
.link-btn { background: none; border: 0; color: var(--muted); font-size: 13px; padding: 0; }
.link-btn:hover { color: var(--text); }
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.field > span { font-size: 13px; font-weight: 500; color: var(--muted); }
.field em { font-style: normal; color: var(--faint); font-weight: 400; margin-left: 4px; }
.field input, .field select, .field textarea { width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; font-size: 15px; outline: 0; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--border-hi); }
.field select option { background: var(--surface); }
::placeholder { color: var(--faint); }
.form-error { margin: 0; padding: 10px 12px; border-radius: 8px; background: rgba(229,104,107,.12); color: #F2A3A5; font-size: 13px; }
.hint { margin: 0; text-align: center; font-size: 12px; color: var(--muted); }
.hint.left { text-align: left; line-height: 1.5; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { padding: 7px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); color: var(--muted); font-size: 13px; }
.chip.on { background: rgba(242,176,74,.12); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); flex: none; }
.dot.ok { background: var(--ok); } .dot.bad { background: var(--err); } .dot.run { background: var(--accent); animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { opacity: .35; } }
.ring { width: 120px; height: 120px; border-radius: 50%; border: 10px solid #C9D3E0; opacity: .45; box-shadow: 0 0 60px rgba(201,211,224,.25); }
.ring.sm { width: 64px; height: 64px; border-width: 6px; }
.logo { width: 26px; height: 26px; border-radius: 50%; border: 4px solid var(--accent); box-shadow: 0 0 18px rgba(242,176,74,.35); flex: none; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-name { font-family: var(--serif); font-weight: 700; font-size: 18px; letter-spacing: .5px; white-space: nowrap; }
.eyebrow { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: 3px; color: var(--accent); }
.toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); padding: 10px 18px; border-radius: 10px; background: var(--text); color: var(--bg); font-size: 14px; font-weight: 600; z-index: 50; }

/* auth */
.auth { min-height: 100vh; display: flex; }
.auth-hero { width: 53%; position: relative; background: url("img/hero.jpg") center/cover; display: flex; align-items: flex-end; }
.auth-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,13,18,0) 35%, rgba(10,13,18,.95)); }
.auth-copy { position: relative; z-index: 1; padding: 56px; display: flex; flex-direction: column; gap: 14px; }
.auth-copy h1 { font-family: var(--serif); font-size: 40px; line-height: 1.35; }
.auth-copy p:last-child { margin: 0; color: var(--soft); font-size: 15px; }
.auth-side { flex: 1; display: flex; align-items: center; justify-content: center; padding: 32px 20px; }
.auth-card { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 20px; }
.auth-card h2 { font-size: 28px; margin-bottom: 6px; }
.auth-card .muted { margin: 0; font-size: 14px; }
.switch { margin: 0; text-align: center; font-size: 13px; color: var(--muted); }
.switch a { color: var(--accent); font-weight: 600; }

/* shell */
.nav { height: 64px; padding: 0 32px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: rgba(10,13,18,.92); backdrop-filter: blur(8px); z-index: 20; }
.nav-left { display: flex; align-items: center; gap: 40px; }
.links { display: flex; gap: 28px; }
.links a { font-size: 14px; color: var(--muted); padding: 22px 0; border-bottom: 2px solid transparent; }
.links a.active { color: var(--text); font-weight: 600; border-bottom-color: var(--accent); }
.nav-right { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); font-size: 12px; color: var(--muted); }
.avatar-chip { width: 30px; height: 30px; border-radius: 50%; background: var(--surface2); color: var(--accent); display: grid; place-items: center; font-weight: 600; }
.uname { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page { padding: 36px 48px 64px; max-width: 1480px; margin: 0 auto; }
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 28px; }
.page-head h1 { font-family: var(--serif); font-size: 28px; margin-bottom: 6px; }
.page-head .muted { margin: 0; font-size: 14px; }

/* projects */
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }
.pcard { border-radius: 14px; background: var(--surface); border: 1px solid var(--border); overflow: hidden; transition: border-color .15s, transform .15s; }
.pcard:hover { border-color: var(--border-hi); transform: translateY(-2px); }
.pcover { aspect-ratio: 4 / 3.3; background: var(--surface2) center 30%/cover; position: relative; display: grid; place-items: center; }
.pcover .tag { position: absolute; left: 14px; top: 14px; padding: 4px 10px; border-radius: 999px; background: rgba(10,13,18,.72); font-size: 12px; }
.pinfo { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 10px; }
.pinfo h3 { font-family: var(--serif); font-size: 18px; }
.pmeta { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--soft); flex-wrap: wrap; }
.guide { max-width: 640px; margin: 40px auto; padding: 36px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
.guide h3 { font-family: var(--serif); font-size: 22px; }
.guide ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 14px; }
.guide li b { display: block; margin-bottom: 4px; }
.guide li span { color: var(--muted); font-size: 14px; }

/* modal */
.modal { position: fixed; inset: 0; background: rgba(5,7,10,.72); display: flex; align-items: flex-start; justify-content: center; padding: 6vh 16px; overflow-y: auto; z-index: 40; }
.dialog { width: 100%; max-width: 620px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 28px; display: flex; flex-direction: column; gap: 18px; }
.dialog-head { display: flex; justify-content: space-between; align-items: center; }
.dialog-head h2 { font-family: var(--serif); font-size: 22px; }
.dialog .field input, .dialog .field select, .dialog .field textarea { background: var(--bg); }
.row3 { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 12px; }
.pick { display: flex; gap: 12px; flex-wrap: wrap; }
.pick-item { width: 72px; padding: 0; background: none; border: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.pick-item img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: top; border: 2px solid var(--border); }
.pick-item.on { color: var(--accent); font-weight: 600; }
.pick-item.on img { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(242,176,74,.25); }

/* project */
.crumb { display: flex; gap: 8px; font-size: 13px; color: var(--muted); margin-bottom: 14px; }
.crumb a:hover { color: var(--text); }
.crumb b { color: var(--text); font-weight: 500; }
.phead { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.phead h1 { font-family: var(--serif); font-size: 28px; margin-bottom: 6px; }
.phead .muted { margin: 0; font-size: 13px; }
.ep-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.ep-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 8px; font-size: 13px; color: var(--muted); border: 1px solid transparent; background: none; }
.ep-chip:hover { color: var(--text); }
.ep-chip.on { color: var(--text); background: var(--surface2); border-color: var(--border); font-weight: 600; }
.ep-chip.add { color: var(--accent); border-color: var(--accent); font-weight: 600; }
.ep-chip.add svg { width: 14px; height: 14px; }
.progress { border-radius: 12px; background: var(--surface); border: 1px solid var(--border); padding: 16px 18px; margin-bottom: 20px; display: flex; flex-direction: column; gap: 12px; }
.progress.error { border-color: rgba(229,104,107,.5); }
.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.pstep { display: flex; gap: 10px; align-items: flex-start; min-width: 0; }
.pstep > div { min-width: 0; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.pstep b { font-size: 13px; font-weight: 600; }
.pstep small { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pstep.wait b { color: var(--muted); font-weight: 500; }
.pstep.run small { color: var(--accent); }
.pstep.error small { color: var(--err); }
.state { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--surface2); flex: none; }
.state i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); }
.pstep.done .state { background: rgba(88,196,138,.15); color: var(--ok); }
.pstep.done .state svg { width: 13px; height: 13px; stroke-width: 3; }
.pstep.run .state { background: rgba(242,176,74,.15); }
.pstep.run .state i { width: 8px; height: 8px; background: var(--accent); animation: pulse 1.2s infinite; }
.pstep.error .state { background: rgba(229,104,107,.15); }
.pstep.error .state i { background: var(--err); }
.bar { display: block; height: 4px; border-radius: 2px; background: var(--surface2); overflow: hidden; }
.bar b { display: block; height: 100%; background: var(--accent); transition: width .4s; }
.phint { margin: 0; font-size: 12px; color: var(--muted); }
.perr { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 13px; color: #F2A3A5; }
.tabs { display: flex; gap: 28px; border-bottom: 1px solid var(--border); margin-bottom: 24px; }
.tabs a { padding: 0 0 12px; font-size: 15px; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a:hover { color: var(--text); }
.tabs a.on { color: var(--text); font-weight: 600; border-bottom-color: var(--accent); }
.empty-tab { padding: 64px 16px; display: flex; flex-direction: column; align-items: center; gap: 20px; color: var(--muted); text-align: center; }

/* film tab */
.film-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.film-head h2 { font-family: var(--serif); font-size: 22px; margin-bottom: 4px; }
.film-head .muted { margin: 0; font-size: 12px; }
.actions { display: flex; gap: 10px; }
.stage { display: flex; gap: 28px; align-items: flex-start; }
.preview { position: relative; width: 400px; flex: none; aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; background: var(--surface2); }
.preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pager { position: absolute; left: 14px; right: 14px; bottom: 14px; display: flex; justify-content: space-between; align-items: center; }
.round { width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(10,13,18,.7); display: grid; place-items: center; }
.round:disabled { opacity: .3; cursor: default; }
.count { padding: 5px 12px; border-radius: 999px; background: rgba(10,13,18,.7); font-size: 12px; font-weight: 600; }
.busy { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: rgba(10,13,18,.78); font-size: 13px; color: var(--muted); }
.busy span, .mini-spin { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--border); border-top-color: var(--accent); animation: spin 1s linear infinite; }
.mini-spin { display: inline-block; width: 14px; height: 14px; border-width: 2px; }
@keyframes spin { to { transform: rotate(360deg); } }
.detail { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.block { display: flex; flex-direction: column; gap: 8px; }
#caption { font-family: var(--serif); font-size: 17px; font-weight: 600; line-height: 1.65; padding: 10px 12px; margin: -10px -12px; border-radius: 8px; border: 1px solid transparent; background: transparent; resize: none; outline: 0; }
#caption:hover, #caption:focus { border-color: var(--border); background: var(--bg); }
.prompt { margin: 0; font-size: 14px; line-height: 1.65; color: var(--soft); }
.cast-used { display: flex; align-items: center; gap: 8px; font-size: 13px; flex-wrap: wrap; }
.cast-used img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; object-position: top; }
.row { display: flex; gap: 10px; flex-wrap: wrap; }
.post { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); }
.post p { margin: 0; font-size: 13px; line-height: 1.6; }
.strip { display: flex; gap: 10px; overflow-x: auto; margin-top: 24px; padding-bottom: 6px; scrollbar-color: var(--border) transparent; }
.thumb { flex: none; width: 80px; aspect-ratio: 3 / 4; border-radius: 6px; overflow: hidden; border: 1px solid var(--border); padding: 0; background: var(--surface2); position: relative; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb.on { border: 2px solid var(--accent); }
.thumb span { position: absolute; left: 4px; top: 3px; font-size: 10px; font-weight: 700; text-shadow: 0 1px 2px #000; }

/* script tab */
.script { display: grid; grid-template-columns: 360px 1fr; gap: 40px; align-items: start; }
.outline { position: sticky; top: 88px; max-height: calc(100vh - 110px); overflow-y: auto; padding: 22px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); display: flex; flex-direction: column; gap: 14px; }
.outline h3 { font-size: 15px; }
.logline { margin: 0; font-family: var(--serif); font-size: 15px; line-height: 1.6; color: var(--accent); }
.premise-q { margin: 0; font-size: 13px; line-height: 1.6; color: var(--soft); display: flex; flex-direction: column; gap: 6px; }
.ol-eps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.ol-eps li { padding: 10px 12px; border-radius: 10px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; line-height: 1.55; color: var(--soft); }
.ol-eps li b { color: var(--text); font-size: 13px; }
.ol-eps li em { font-style: normal; color: var(--muted); font-size: 12px; }
.ol-eps li.on { background: rgba(242,176,74,.08); box-shadow: inset 2px 0 0 var(--accent); }
.arcs { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 13px; line-height: 1.55; color: var(--soft); }
.arcs b { color: var(--text); margin-right: 6px; }
.chapter { max-width: 720px; }
.chapter h2 { font-family: var(--serif); font-size: 26px; margin: 6px 0 22px; }
.chapter p { font-family: var(--serif); font-size: 17px; line-height: 2; margin: 0 0 14px; color: #DCE1EA; }
.chapter p.label { font-family: var(--sans); font-size: 12px; margin: 0; color: var(--muted); }

/* board tab */
.board-tip { margin: -8px 0 16px; font-size: 13px; }
.board { border-radius: 12px; border: 1px solid var(--border); overflow: hidden; background: var(--surface); }
.brow { display: grid; grid-template-columns: 40px 84px minmax(220px, 1.1fr) minmax(220px, 1.4fr) 90px 92px; gap: 18px; align-items: center; padding: 12px 18px; border-top: 1px solid var(--border); }
.bhead { border-top: 0; background: var(--surface2); font-size: 12px; font-weight: 600; color: var(--muted); padding-top: 11px; padding-bottom: 11px; }
.bnum { font-size: 13px; font-weight: 600; color: var(--muted); }
.bthumb { width: 84px; aspect-ratio: 3 / 4; border-radius: 6px; overflow: hidden; border: 1px solid var(--border); background: var(--surface2); padding: 0; display: grid; place-items: center; }
.bthumb img { width: 100%; height: 100%; object-fit: cover; }
.bcap { font-family: var(--serif); font-size: 15px; font-weight: 600; line-height: 1.6; padding: 6px 8px; margin: -6px -8px; border-radius: 8px; outline: 0; border: 1px solid transparent; }
.bcap:hover { border-color: var(--border); }
.bcap:focus { border-color: var(--accent); background: var(--bg); }
.bprompt { margin: 0; font-size: 13px; line-height: 1.6; color: var(--soft); }
.bcast { font-size: 13px; }

/* cast + assets */
.agrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; }
.acard { border-radius: 12px; background: var(--surface); border: 1px solid var(--border); overflow: hidden; display: flex; flex-direction: column; }
.aphoto { aspect-ratio: 4 / 5; background: var(--surface2) center 20%/cover; }
.ainfo { padding: 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.ainfo b { font-size: 16px; }
.ainfo p { margin: 0; font-size: 12px; line-height: 1.55; color: var(--muted); flex: 1; }
.ainfo .ghost { align-self: flex-start; }
.arow { display: flex; justify-content: space-between; align-items: center; }
.assets { display: grid; grid-template-columns: 1fr 360px; gap: 36px; align-items: start; }
.upload { position: sticky; top: 88px; padding: 22px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); display: flex; flex-direction: column; gap: 16px; }
.upload h3 { font-size: 16px; }
.upload .field input, .upload .field textarea { background: var(--bg); }
.drop { height: 220px; border-radius: 10px; border: 1px dashed var(--border-hi); background: var(--bg); display: grid; place-items: center; cursor: pointer; overflow: hidden; }
.drop.over { border-color: var(--accent); }
.drop-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; text-align: center; }
.drop-empty svg { width: 28px; height: 28px; }
.drop-empty b { color: var(--text); font-weight: 500; }
.drop img { width: 100%; height: 100%; object-fit: contain; }

/* responsive */
@media (max-width: 1100px) {
  .page { padding: 20px 16px 48px; }
  .stage { flex-direction: column; }
  .preview { width: 100%; max-width: 480px; }
  .script, .assets { grid-template-columns: 1fr; }
  .outline, .upload { position: static; max-height: none; }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .brow { grid-template-columns: 34px 72px 1fr; }
  .brow .bprompt, .brow .bcast, .bhead span:nth-child(n+4) { display: none; }
  .brow .ghost { grid-column: 3; justify-self: start; }
}
@media (max-width: 760px) {
  .auth { flex-direction: column; }
  .auth-hero { width: 100%; min-height: 260px; }
  .auth-copy { padding: 24px; }
  .auth-copy h1 { font-size: 26px; }
  .nav { padding: 0 16px; }
  .nav-left { gap: 16px; }
  .brand-name, .health, .uname { display: none; }
  .links { gap: 18px; }
  .row3 { grid-template-columns: 1fr 1fr; }
  .row3 .field:first-child { grid-column: 1 / -1; }
  .steps { grid-template-columns: 1fr 1fr; }
  .dialog { padding: 20px; }
}

/* comic mode */
.modes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mode { text-align: left; padding: 12px 14px; border-radius: 10px; background: var(--bg); border: 1px solid var(--border); display: flex; flex-direction: column; gap: 4px; }
.mode b { font-size: 14px; }
.mode small { font-size: 12px; color: var(--muted); }
.mode.on { border-color: var(--accent); background: rgba(242,176,74,.08); }
.mode.on b { color: var(--accent); }
.plines { display: flex; flex-direction: column; gap: 10px; max-height: 420px; overflow-y: auto; }
.pline { display: flex; gap: 12px; }
.pnum { flex: none; width: 36px; font-size: 12px; color: var(--muted); padding-top: 2px; }
.pline ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; font-size: 14px; line-height: 1.6; }
.pline b { color: var(--accent); font-weight: 600; margin-right: 6px; }
.pline .narr { font-family: var(--serif); color: var(--soft); }
a.link { color: var(--accent); }
.cpage { display: grid; grid-template-columns: 200px 1fr; gap: 20px; padding: 18px; margin-bottom: 18px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); align-items: start; }
.cpage-thumb { position: sticky; top: 88px; padding: 0; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--surface2); aspect-ratio: 3 / 4; display: grid; place-items: center; }
.cpage-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cpage-thumb span { position: absolute; left: 8px; bottom: 8px; padding: 3px 8px; border-radius: 999px; background: rgba(10,13,18,.75); font-size: 12px; font-weight: 600; }
.cpage-thumb { position: relative; }
.cpanels { display: flex; flex-direction: column; }
.cpanel { display: grid; grid-template-columns: 96px 1fr auto; gap: 16px; align-items: start; padding: 14px 0; border-top: 1px solid var(--border); }
.cpanel:first-child { border-top: 0; padding-top: 0; }
.cthumb { position: relative; width: 96px; aspect-ratio: 4 / 3; border-radius: 6px; overflow: hidden; background: var(--surface2); display: grid; place-items: center; }
.cthumb img { width: 100%; height: 100%; object-fit: cover; }
.cthumb span { position: absolute; left: 4px; top: 2px; font-size: 11px; font-weight: 700; text-shadow: 0 1px 2px #000; }
.cbody { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cline { display: flex; gap: 10px; align-items: baseline; }
.ctag { flex: none; min-width: 64px; font-size: 12px; color: var(--accent); }
.ctag.thought { color: #9FB7E8; } .ctag.shout { color: #F28B6E; }
.cline.narr .ctag { color: var(--muted); }
.cedit { flex: 1; font-size: 15px; line-height: 1.6; padding: 2px 6px; margin: -2px -6px; border-radius: 6px; border: 1px solid transparent; outline: 0; min-height: 1.6em; }
.cline.narr .cedit { font-family: var(--serif); color: var(--soft); }
.cline.narr .cedit:empty::before { content: "（无旁白，点这里添加）"; color: var(--faint); }
.cedit:hover { border-color: var(--border); }
.cedit:focus { border-color: var(--accent); background: var(--bg); }
@media (max-width: 1100px) {
  .cpage { grid-template-columns: 1fr; }
  .cpage-thumb { position: relative; top: 0; max-width: 240px; }
  .cpanel { grid-template-columns: 80px 1fr; }
  .cpanel .ghost { grid-column: 2; justify-self: start; }
}
.board-bar { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 16px; }
.board-bar .board-tip { margin: 0; }
.board-bar .ghost { flex: none; }

/* 新建项目：AI 编剧 / 导入剧本 */
.seg { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; gap: 4px; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; }
.seg button { background: transparent; border: 0; padding: 9px 12px; border-radius: 9px; font-size: 14px; font-weight: 500; color: var(--muted); }
.seg button.on { background: rgba(242,176,74,.12); color: var(--accent); font-weight: 600; }
.import-box { display: flex; flex-direction: column; gap: 14px; }
.import-box .row3 { grid-template-columns: 1fr 1fr 2fr; align-items: end; }
.import-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.file-btn { cursor: pointer; }
.file-btn svg { transform: rotate(180deg); }
.split-note { margin: 0 0 4px; line-height: 1.5; }
.dialog.narrow { max-width: 460px; }
.check { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--soft); cursor: pointer; }
.check input { accent-color: var(--accent); width: 16px; height: 16px; }
@media (max-width: 720px) {
  .import-box .row3 { grid-template-columns: 1fr 1fr; }
  .import-box .row3 .field:first-child { grid-column: auto; }
  .split-note { grid-column: 1 / -1; }
}