:root { --canvas:#0b0e0b; --panel:#131814; --panel-2:#1b211b; --ink:#f4f5ef; --muted:#a2aa9e; --line:rgba(198,221,181,.16); --lime:#b5ed78; --lime-deep:#89bc52; --accent:rgba(181,237,120,.12); --shadow:0 18px 60px rgba(0,0,0,.24); font-family:"SF Pro Display","PingFang SC","Microsoft YaHei",sans-serif; color:var(--ink); background:var(--canvas); }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; background:radial-gradient(circle at 78% 0%,rgba(125,176,73,.08),transparent 32rem),var(--canvas); }
button,textarea { font:inherit; } button { cursor:pointer; } button:disabled { cursor:not-allowed; opacity:.48; }
[hidden] { display:none !important; }
.app-shell { min-height:100vh; }
.eyebrow { margin:0 0 7px; color:var(--lime); font-size:11px; font-weight:760; letter-spacing:.12em; text-transform:uppercase; }
.muted { color:var(--muted); line-height:1.7; }.status-line { margin:0; color:var(--muted); font-size:13px; line-height:1.5; }
.pairing-view { min-height:100vh; padding:42px 24px; display:grid; place-items:center; align-content:center; gap:24px; background:linear-gradient(120deg,rgba(0,0,0,.35),transparent 65%),url('/assets/director-studio-hero-v1.png') center/cover; position:relative; isolation:isolate; }
.pairing-view:before { content:""; position:absolute; inset:0; background:rgba(4,7,4,.68); z-index:-1; backdrop-filter:blur(4px); }.pairing-brand,.brand { display:flex; align-items:center; gap:10px; font-size:20px; font-weight:790; letter-spacing:-.04em; }.brand-mark { display:grid; place-items:center; color:#172115; background:var(--lime); border-radius:9px; width:30px; height:30px; font-size:18px; box-shadow:0 0 28px rgba(181,237,120,.24); }
.pairing-card { width:min(100%,500px); padding:36px; border:1px solid var(--line); border-radius:28px; background:rgba(13,17,13,.82); box-shadow:var(--shadow); text-align:center; }.pairing-card h1 { margin:0; font-size:clamp(28px,4.5vw,42px); line-height:1.16; letter-spacing:-.06em; }.pairing-copy { margin:17px auto 24px; max-width:360px; color:var(--muted); line-height:1.7; font-size:14px; }.qr-box { display:grid; place-items:center; min-height:224px; margin:0 auto 17px; padding:14px; width:224px; border-radius:18px; background:#f7f4eb; box-shadow:0 9px 36px rgba(0,0,0,.24); }.qr-box svg { width:100%; height:100%; }.qr-loading { color:#687063; font-size:13px; }.text-button { border:0; padding:8px 0; color:var(--lime); background:transparent; font-size:13px; }.pairing-footnote { margin:0; color:rgba(238,244,229,.62); font-size:12px; }
.workbench-view { min-height:100vh; display:grid; grid-template-columns:244px minmax(0,1fr); }.sidebar { display:flex; flex-direction:column; padding:28px 18px 20px; border-right:1px solid var(--line); background:rgba(10,14,10,.72); }.brand-subtitle { margin:8px 0 30px 40px; color:var(--muted); font-size:12px; }.main-nav,.sidebar-bottom { display:grid; gap:5px; }.sidebar-bottom { margin-top:auto; }.nav-item { display:flex; align-items:center; gap:12px; width:100%; padding:12px 13px; border:1px solid transparent; border-radius:11px; background:transparent; color:var(--muted); text-align:left; font-size:14px; }.nav-item span { width:18px; color:var(--lime); font-size:17px; text-align:center; }.nav-item:hover,.nav-item.is-active { color:var(--ink); background:var(--accent); border-color:rgba(181,237,120,.11); }.nav-item.quiet { color:#727a71; }
.content-area { width:min(100%,1420px); margin:0 auto; padding:44px clamp(24px,4vw,64px) 54px; }.topbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:30px; }.topbar h1 { margin:0; font-size:26px; letter-spacing:-.05em; }.topbar-actions { display:flex; align-items:center; gap:14px; }.sync-state { padding:8px 11px; border:1px solid rgba(181,237,120,.22); border-radius:99px; color:var(--lime); background:rgba(181,237,120,.07); font-size:12px; }.avatar { width:38px; height:38px; border:0; border-radius:50%; background:linear-gradient(135deg,#d9f5ae,#82b65d); color:#172115; font-weight:800; }.panel { display:none; }.panel.is-visible { display:block; animation:fade-in .26s ease; }@keyframes fade-in { from { opacity:0; transform:translateY(5px) } }
.hero-card { position:relative; min-height:330px; overflow:hidden; border:1px solid var(--line); border-radius:24px; background:#111; background-image:url('/assets/director-studio-hero-v1.png'); background-size:cover; background-position:center; box-shadow:var(--shadow); }.hero-veil { position:absolute; inset:0; background:linear-gradient(90deg,rgba(9,12,9,.96) 3%,rgba(10,13,10,.76) 44%,rgba(8,10,8,.08) 84%); }.hero-content { position:relative; display:flex; min-height:330px; max-width:570px; padding:42px; flex-direction:column; justify-content:center; }.chip { align-self:flex-start; margin:0 0 15px; padding:6px 9px; border:1px solid rgba(181,237,120,.28); border-radius:7px; color:var(--lime); background:rgba(181,237,120,.06); font-size:12px; }.hero-content h2 { margin:0; font-size:clamp(30px,4vw,50px); line-height:1.08; letter-spacing:-.065em; }.hero-content>p:not(.chip):not(.progress-label) { color:#d3d9cf; line-height:1.65; }.progress-track { overflow:hidden; width:min(100%,245px); height:6px; margin-top:8px; border-radius:99px; background:rgba(255,255,255,.15); }.progress-track span { display:block; width:0%; height:100%; background:var(--lime); }.progress-label { margin:11px 0 0; color:var(--lime); font-size:13px; }
.dashboard-grid { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(260px,.7fr); gap:20px; margin-top:20px; }.card { border:1px solid var(--line); border-radius:20px; background:linear-gradient(145deg,rgba(28,35,28,.82),rgba(14,18,14,.92)); box-shadow:0 10px 35px rgba(0,0,0,.1); }.chat-card { min-height:405px; padding:25px; display:flex; flex-direction:column; }.section-head { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; }.section-head h2,.next-card h2,.editor-card h2,.materials-card h2,.screen-record-card h2,.settings-card h2 { margin:0; font-size:21px; letter-spacing:-.045em; }.live-dot { margin-top:5px; color:var(--lime); font-size:12px; }.live-dot:before { content:""; display:inline-block; width:6px; height:6px; margin-right:6px; border-radius:50%; background:var(--lime); box-shadow:0 0 9px var(--lime); }.chat-messages { flex:1; display:grid; align-content:start; gap:10px; max-height:238px; overflow:auto; padding:18px 0; }.message { max-width:87%; padding:11px 13px; border-radius:13px; background:rgba(255,255,255,.055); line-height:1.62; font-size:14px; white-space:pre-wrap; }.message.mine { justify-self:end; background:rgba(181,237,120,.13); border:1px solid rgba(181,237,120,.16); }.message strong { display:block; margin-bottom:3px; color:var(--lime); font-size:11px; }.empty-note { color:var(--muted); font-size:13px; }.chat-form { display:flex; gap:10px; align-items:end; }.chat-form textarea { min-height:52px; flex:1; resize:vertical; padding:12px 13px; border:1px solid var(--line); border-radius:12px; outline:none; color:var(--ink); background:rgba(5,7,5,.46); line-height:1.4; }.chat-form textarea:focus { border-color:rgba(181,237,120,.6); box-shadow:0 0 0 3px rgba(181,237,120,.08); }.primary-button,.secondary-button { min-height:40px; border-radius:10px; padding:10px 14px; font-weight:700; font-size:13px; }.primary-button { border:1px solid var(--lime); background:var(--lime); color:#13200e; }.primary-button:hover { filter:brightness(1.05); }.secondary-button { display:inline-flex; align-items:center; justify-content:center; gap:14px; border:1px solid var(--line); color:var(--ink); background:rgba(255,255,255,.035); text-decoration:none; }.secondary-button span { color:var(--lime); font-size:18px; }.next-card { display:flex; min-height:300px; flex-direction:column; justify-content:center; padding:28px; background:linear-gradient(145deg,rgba(68,96,52,.25),rgba(19,25,19,.95)); }.next-card p:not(.eyebrow) { color:var(--muted); line-height:1.7; }.next-card .secondary-button { margin-top:12px; }
.editor-card,.materials-card,.settings-card,.screen-record-card,.profile-card { padding:30px; }.outline-list { display:grid; gap:10px; max-width:760px; margin:26px 0; padding:0; list-style:none; counter-reset:outline; }.outline-list li { display:grid; grid-template-columns:42px minmax(0,1fr) auto; gap:8px 12px; align-items:center; padding:15px; border:1px solid var(--line); border-radius:13px; background:rgba(255,255,255,.025); }.outline-list li:before { content:counter(outline,decimal-leading-zero); counter-increment:outline; grid-row:span 3; color:var(--lime); font-weight:800; }.outline-list li>span { grid-column:2; color:var(--muted); font-size:13px; line-height:1.6; }.outline-list li>button { grid-column:3; grid-row:1 / span 3; white-space:nowrap; }.outline-list li.is-recorded { border-color:rgba(181,237,120,.35); }.outline-list li.is-selected { box-shadow:0 0 0 2px rgba(181,237,120,.12); }.count-pill { padding:6px 9px; border-radius:99px; color:var(--muted); background:rgba(255,255,255,.05); font-size:12px; }.materials-empty { min-height:310px; display:grid; gap:12px; place-items:center; align-content:center; max-width:620px; margin:14px auto 0; text-align:center; }.material-icon { width:54px; height:54px; display:grid; place-items:center; margin-bottom:12px; border:1px solid rgba(181,237,120,.28); border-radius:16px; color:var(--lime); background:var(--accent); font-size:26px; }.materials-empty h3 { margin:0; font-size:18px; }.materials-empty p { margin:0; color:var(--muted); line-height:1.7; font-size:14px; }.screen-record-card { display:grid; gap:24px; }.record-actions { display:flex; flex-wrap:wrap; gap:10px; }.record-button { display:inline-flex; align-items:center; gap:10px; min-height:47px; padding:11px 18px; border:1px solid #ef7777; border-radius:13px; color:#fff0ed; background:rgba(226,80,74,.13); font-weight:800; }.record-button:hover { background:rgba(226,80,74,.23); }.record-dot { width:10px; height:10px; border-radius:50%; background:#ef7777; box-shadow:0 0 12px #ef7777; }.screen-preview-wrap { overflow:hidden; max-width:960px; border:1px solid var(--line); border-radius:16px; background:#060706; }.screen-preview-wrap video { display:block; width:100%; max-height:540px; background:#000; }.preview-actions { display:flex; gap:14px; align-items:center; padding:12px; }.skin-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:25px; }.skin-choice { overflow:hidden; padding:0; border:1px solid var(--line); border-radius:15px; color:var(--ink); background:rgba(255,255,255,.025); text-align:left; }.skin-choice:hover,.skin-choice.is-selected { border-color:var(--lime); box-shadow:0 0 0 3px rgba(181,237,120,.1); }.skin-choice img { width:100%; aspect-ratio:16/9; display:block; object-fit:cover; }.skin-choice span { display:grid; gap:4px; padding:13px; }.skin-choice small { color:var(--muted); line-height:1.45; }.profile-actions,.profile-item-actions { display:flex; flex-wrap:wrap; gap:9px; }.profile-actions { margin:20px 0; }.profile-content { display:grid; gap:22px; }.profile-section { display:grid; gap:9px; }.profile-section>h3 { margin:0; font-size:16px; }.profile-item { display:grid; gap:7px; padding:15px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.025); }.profile-item h3,.profile-item p { margin:0; }.profile-item h3 { font-size:15px; }.profile-item p { color:var(--muted); line-height:1.6; font-size:13px; }.profile-item-actions { margin-top:3px; }.profile-item-actions .primary-button,.profile-item-actions .secondary-button { min-height:35px; padding:7px 11px; }
body[data-skin="paper"] { --canvas:#f5f0e5; --panel:#fffdf7; --panel-2:#f0eadc; --ink:#25281f; --muted:#77776c; --line:rgba(57,76,38,.17); --lime:#628a43; --lime-deep:#4e7333; --accent:rgba(113,153,72,.12); background:#f5f0e5; } body[data-skin="paper"] .sidebar { background:rgba(255,253,247,.8); } body[data-skin="paper"] .card { background:linear-gradient(145deg,#fffdf7,#f6f0e5); } body[data-skin="paper"] .hero-card { background-image:url('/assets/director-paper-hero-v1.png'); } body[data-skin="paper"] .hero-veil { background:linear-gradient(90deg,rgba(255,253,247,.95),rgba(255,253,247,.74) 48%,rgba(255,253,247,.08)); } body[data-skin="paper"] .hero-content>p:not(.chip):not(.progress-label) { color:#4d5148; } body[data-skin="paper"] .chat-form textarea { background:#fffdf7; }
body[data-skin="notebook"] { --canvas:#173023; --panel:#21402e; --panel-2:#284b34; --ink:#f5f1e4; --muted:#bac6ad; --line:rgba(232,245,203,.16); --lime:#b8e47b; --lime-deep:#85b85a; --accent:rgba(184,228,123,.13); background:radial-gradient(circle at 85% 0%,rgba(220,188,116,.11),transparent 35rem),#173023; } body[data-skin="notebook"] .sidebar { background:rgba(18,45,30,.75); } body[data-skin="notebook"] .card { background:linear-gradient(145deg,rgba(43,79,54,.88),rgba(25,50,35,.94)); } body[data-skin="notebook"] .hero-card { background-image:url('/assets/director-notebook-hero-v1.png'); } body[data-skin="notebook"] .hero-veil { background:linear-gradient(90deg,rgba(18,47,31,.96),rgba(20,52,34,.76) 47%,rgba(18,47,31,.08)); }
@media (max-width:900px) { .workbench-view { grid-template-columns:1fr; }.sidebar { position:sticky; z-index:4; top:0; display:flex; flex-direction:row; align-items:center; gap:14px; overflow:auto; padding:12px 16px; border-right:0; border-bottom:1px solid var(--line); }.brand-subtitle,.sidebar-bottom { display:none; }.main-nav { display:flex; flex:1; gap:4px; }.nav-item { width:auto; white-space:nowrap; padding:8px 10px; }.content-area { padding:27px 18px 42px; }.dashboard-grid { grid-template-columns:1fr; }.skin-grid { grid-template-columns:1fr; }.skin-choice { display:grid; grid-template-columns:130px 1fr; }.skin-choice img { height:100%; }.hero-content { padding:28px; min-height:290px; }.hero-card { min-height:290px; }.topbar { margin-bottom:20px; }.chat-card { min-height:420px; } }
@media (max-width:560px) { .pairing-card { padding:29px 20px; }.pairing-view { padding:24px 14px; }.qr-box { width:206px; min-height:206px; }.topbar-actions .sync-state { display:none; }.topbar h1 { font-size:22px; }.chat-form { align-items:stretch; flex-direction:column; }.chat-form .primary-button { width:100%; }.screen-record-card,.editor-card,.materials-card,.settings-card,.chat-card { padding:20px; }.hero-content h2 { font-size:31px; }.record-actions>* { width:100%; }.preview-actions { align-items:stretch; flex-direction:column; } }
@media (max-width:900px) {
  body[data-skin] .sidebar { background:var(--panel); }
  .sidebar .brand { flex-shrink:0;white-space:nowrap; }
  .sidebar .main-nav { flex-shrink:0; }
  .sidebar .nav-item { flex-shrink:0; }
}

.secondary-button[aria-pressed="true"] { border-color:var(--lime); color:var(--lime); background:var(--accent); }
.project-select { max-width:260px; min-height:36px; padding:7px 28px 7px 10px; border:1px solid var(--line); border-radius:10px; color:var(--ink); background:var(--panel); font:inherit; font-size:13px; }.editing-plan { display:grid; gap:10px; margin:22px 0; padding:17px; border:1px solid rgba(181,237,120,.22); border-radius:14px; background:var(--accent); }.editing-plan h3,.editing-plan p { margin:0; }.editing-plan h3 { color:var(--lime); font-size:15px; }.editing-plan p { color:var(--muted); line-height:1.6; font-size:13px; }.editing-task { padding-top:10px; border-top:1px solid var(--line); }.editing-task b { display:block; margin-bottom:4px; color:var(--ink); }

.interview-card { display:grid; gap:20px; padding:30px; }.interview-card>p { max-width:760px; margin:0; }.interview-form,.interview-answer-form { display:grid; gap:12px; max-width:880px; }.interview-form textarea,.interview-answer-form textarea,.interview-options input,.interview-options select { width:100%; padding:12px 13px; border:1px solid var(--line); border-radius:12px; outline:none; color:var(--ink); background:rgba(5,7,5,.46); font:inherit; line-height:1.5; }.interview-options { display:flex; flex-wrap:wrap; gap:10px; align-items:end; }.interview-options label { display:grid; gap:6px; min-width:165px; color:var(--muted); font-size:12px; }.interview-options select { min-height:40px; }.interview-options input { flex:1 1 220px; min-height:40px; }.interview-voices { display:grid; gap:13px; max-width:880px; padding:18px; border:1px solid rgba(181,237,120,.2); border-radius:16px; background:rgba(0,0,0,.12); }.interview-voices-head { display:flex; align-items:center; justify-content:space-between; gap:16px; }.interview-voices-head h3 { margin:0; font-size:16px; }.interview-voice-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }.interview-voice-choice { display:grid; gap:10px; padding:13px; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.025); }.interview-voice-choice.is-selected { border-color:var(--lime); box-shadow:0 0 0 2px rgba(181,237,120,.1); }.voice-select-button { display:grid; gap:5px; padding:0; border:0; color:var(--ink); background:transparent; text-align:left; }.voice-select-button b { font-size:14px; }.voice-select-button p,.interview-voice-choice small { margin:0; color:var(--muted); line-height:1.55; font-size:12px; }.interview-voice-choice audio { width:100%; }.interview-plan-preview,.interview-live,.interview-edit-plans { display:grid; gap:14px; max-width:880px; padding:20px; border:1px solid rgba(181,237,120,.22); border-radius:16px; background:rgba(181,237,120,.055); }.interview-plan-preview h3,.interview-plan-preview>p,.interview-live h3,.interview-edit-plans h3 { margin:0; }.interview-plan-preview>p,.interview-chapter p,.interview-edit-plan p { margin:0; color:var(--muted); line-height:1.65; font-size:13px; }.interview-chapter { padding-top:14px; border-top:1px solid var(--line); }.interview-chapter ol { display:grid; gap:7px; margin:11px 0 0; padding-left:22px; color:var(--ink); line-height:1.55; font-size:14px; }.interview-live-head { display:flex; justify-content:space-between; gap:16px; align-items:start; }.interview-question { display:grid; gap:12px; padding:20px; border-radius:14px; background:rgba(0,0,0,.18); }.interview-question h3 { font-size:20px; line-height:1.55; }.interview-question audio { width:100%; }.interview-answer-form>label { color:var(--ink); font-size:14px; font-weight:700; }.interview-edit-plan { display:grid; gap:6px; padding:14px; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.025); }.interview-edit-plan small { color:var(--lime); }
@media (max-width:760px) { .interview-voice-options { grid-template-columns:1fr; } }
.topic-episodes { padding:24px; margin-bottom:20px; }
.topic-episodes h2 { margin:0 0 8px; font-size:24px; }
.topic-episode { margin-top:12px; border:1px solid var(--line); border-radius:12px; padding:14px; }
.topic-episode summary { cursor:pointer; line-height:1.6; color:var(--ink); font-weight:650; }
.topic-episode[open] summary { color:var(--lime); }
.topic-episode ol { display:grid; gap:8px; padding-left:24px; line-height:1.6; }
.topic-episode .preview-actions { display:flex; flex-wrap:wrap; gap:8px; }
.material-take { margin:16px 0; padding:16px; border:1px solid var(--line); border-radius:16px; background:var(--panel-2); }
.material-take h4 { margin:0 0 8px; color:var(--lime); }
.danger-button { color: #ee9999; border-color: currentColor; }
.media-trash { margin: 16px 0; padding: 12px; border: 1px solid var(--line); border-radius: 12px; }
.media-trash summary { cursor: pointer; }
.material-take>p { font-size:13px; color:var(--muted); }
.material-tracks { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px; }
.material-track { display:grid; align-content:start; gap:10px; padding:14px; border:1px solid var(--line); border-radius:12px; background:var(--panel); line-height:1.6; }
.material-track video,.material-track audio { width:100%; max-height:380px; }
.recording-clock { flex-shrink:0; display:grid; gap:4px; min-width:126px; padding:12px 18px; border:1px solid var(--line); border-radius:12px; background:var(--panel); text-align:center; }
.recording-clock span { color:var(--muted); font-size:13px; }
.recording-clock output { font-size:32px; line-height:1.2; font-weight:750; font-variant-numeric:tabular-nums; }
.recording-clock[data-state="recording"] { border-color:var(--lime); }
.recording-clock[data-state="recording"] span { color:var(--lime); }
.recording-clock[data-state="recording"] span:before { content:""; display:inline-block; width:8px; height:8px; margin-right:7px; border-radius:50%; background:#f76c6c; }
.recording-background-controls { display:flex; flex-wrap:wrap; align-items:end; gap:12px; margin:20px 0 10px; }
.recording-background-controls label { display:grid; gap:7px; flex:1 1 200px; font-size:14px; }
.recording-background-controls select { width:100%; min-height:42px; padding:10px; border:1px solid var(--line); border-radius:10px; background:var(--panel); color:var(--ink); font:inherit; }
.recording-background-controls img { width:96px; height:60px; object-fit:cover; border:1px solid var(--line); border-radius:8px; }
.screen-record-card .web-camera-render { margin:16px 0; }
.temporary-background-preview { display:grid; gap:12px; padding:18px; margin:18px 0; border:1px solid var(--line); border-radius:16px; background:var(--panel); }
.temporary-background-preview h3 { margin:0; font-size:18px; }
.temporary-background-stage { position:relative; width:min(100%,720px); overflow:hidden; border-radius:12px; background:#10140f; }
.temporary-background-stage img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.temporary-background-stage canvas { position:relative; display:block; width:100%; height:auto; }
.temporary-background-preview .text-button { justify-self:start; }
@media (max-width:560px) { .screen-record-card .section-head,.web-camera-card .section-head { flex-wrap:wrap; } .recording-clock { min-width:120px; } }
@media (max-width:560px) { .interview-card { padding:20px; }.interview-options>* { width:100%; }.interview-options label { width:100%; }.interview-options .primary-button,.interview-voices-head .secondary-button { width:100%; }.interview-voices-head { align-items:stretch; flex-direction:column; } }

.background-card { display:grid; gap:18px; padding:30px; }.background-card+.background-card { margin-top:20px; }.background-card>p { max-width:880px; margin:0; }.background-upload-form,.web-camera-controls { display:flex; flex-wrap:wrap; gap:12px; align-items:end; }.background-upload-form label,.web-camera-controls label { display:grid; flex:1 1 220px; gap:7px; color:var(--muted); font-size:12px; }.background-upload-form input,.web-camera-controls select { width:100%; min-height:42px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; color:var(--ink); background:rgba(5,7,5,.46); font:inherit; }.background-upload-form input[type="file"] { padding:8px; }.background-library { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:12px; }.background-item { display:grid; gap:10px; overflow:hidden; padding:11px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.025); }.background-item.is-selected { border-color:var(--lime); box-shadow:0 0 0 2px rgba(181,237,120,.1); }.background-item img { display:block; width:100%; aspect-ratio:9/16; border-radius:9px; object-fit:cover; background:#070907; }.background-item b { font-size:14px; }.background-item small { color:var(--muted); line-height:1.5; }.background-item .secondary-button { width:100%; }.web-camera-card { margin-bottom:20px; }.web-camera-preview-wrap { overflow:hidden; width:min(100%,520px); border:1px solid var(--line); border-radius:16px; background:#050605; }.web-camera-preview-wrap video { display:block; width:100%; max-height:580px; background:#000; object-fit:cover; }.web-camera-preview-wrap p { margin:0; padding:10px 12px; color:var(--muted); font-size:12px; line-height:1.55; }.web-camera-render { display:grid; gap:12px; max-width:760px; padding:16px; border:1px solid rgba(181,237,120,.26); border-radius:15px; background:var(--accent); }.web-camera-render h3,.web-camera-render p { margin:0; }.web-camera-render video { display:block; width:100%; max-height:680px; border-radius:10px; background:#000; }.web-camera-render small { color:var(--muted); line-height:1.55; }
@media (max-width:560px) { .background-card { padding:20px; }.background-upload-form>* ,.web-camera-controls>* { width:100%; }.background-upload-form .primary-button { width:100%; } }
.framing-sliders{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 24px;padding:16px 0}.framing-sliders label{display:grid;grid-template-columns:1fr auto;gap:8px}.framing-sliders input{grid-column:1/-1;width:100%;accent-color:var(--accent)}.framing-controls summary{cursor:pointer;font-weight:650}.temporary-background-stage img{transform-origin:0 0}.temporary-background-stage{overflow:hidden}@media(max-width:700px){.framing-sliders{grid-template-columns:1fr}}
.framing-sliders output{grid-column:2;grid-row:1;color:inherit;opacity:.85}
/* 两侧对应关系复用当前皮肤，不依赖固定屏幕坐标。 */
.outline-connections { overflow-x:auto; }
.connection-toolbar { display:flex;gap:8px;flex-wrap:wrap;position:sticky;top:0;z-index:2; }
.connection-board { display:grid;grid-template-columns:minmax(170px,1fr) minmax(210px,1fr);gap:80px;position:relative;min-width:470px;align-items:start; }
.connection-column { min-width:0;position:relative; }
.connection-card { border:1px solid var(--line,#45514b);border-radius:14px;padding:12px;margin:0 0 18px;background:var(--panel,#1c2725);overflow-wrap:anywhere; }
.connection-select { display:flex;align-items:flex-start;gap:8px;cursor:pointer; }
.connection-select input { width:20px;min-width:20px;height:20px;margin:0; }
.connection-lines { position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible; }
.connection-lines path { fill:none;stroke:var(--lime,#afe65b);stroke-width:1.5;opacity:.35; }
.connection-lines path.is-highlighted { stroke-width:3;opacity:1; }
.connection-card button { padding:8px 12px;min-height:40px;margin:4px; }
.connection-card video,.connection-card audio,.local-take-preview video,.local-take-preview audio { width:100%;max-height:420px; }
.connection-card progress,#upload-progress-panel progress { display:block;width:100%;height:16px;accent-color:var(--lime,#afe65b); }
#upload-progress-panel { margin:16px;padding:16px;border:1px solid var(--line,#45514b);border-radius:16px; }
#upload-progress-panel > div { margin-bottom:14px; }
@media(max-width:600px){.connection-board{gap:44px;}.connection-card{padding:8px;}.connection-card button{margin:2px;padding:7px;}}
/* 全部素材的独立卡片，手机窄屏自动单列。 */
.all-material-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px; }
.all-material-grid .material-take { margin:0;padding:16px;min-width:0; }
.all-material-grid .outline-material-track { margin:0;min-width:0; }
.all-material-grid form { display:grid;gap:10px;padding-top:12px; }

/* 素材按提纲归档；每次拍摄只在当前提纲卡里显示真实上传轨道。 */
.brand small,.pairing-brand small { margin-left:auto;color:var(--muted);font-size:11px;font-weight:650;letter-spacing:.02em; }
.outline-materials { display:grid;gap:16px;margin-top:18px; }
.outline-materials .connection-toolbar { position:static;padding:0;background:transparent; }
.outline-materials .connection-status { margin:0;color:var(--muted);font-size:12px; }
.outline-material-card { overflow:hidden;border:1px solid var(--line);border-radius:18px;background:linear-gradient(145deg,rgba(181,237,120,.055),rgba(255,255,255,.018)); }
.outline-material-card.is-unassigned { border-style:dashed; }
.outline-material-card-head { display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 18px;border-bottom:1px solid var(--line); }
.outline-material-heading { min-width:0;display:flex;align-items:center;gap:12px;cursor:pointer;font-size:16px;font-weight:760;line-height:1.45; }
.outline-material-heading input,.material-card-title input { width:19px;height:19px;flex:0 0 auto;accent-color:var(--lime); }
.outline-material-heading span { display:grid;gap:3px; }
.outline-material-heading small { color:var(--lime);font-size:10px;font-weight:800;letter-spacing:.14em; }
.outline-material-actions { display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px; }
.outline-material-take { padding:16px 18px; }
.outline-material-take+.outline-material-take { border-top:1px solid var(--line); }
.material-take-head { display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;color:var(--muted);font-size:12px; }
.material-take-head .danger-button { min-height:32px;padding:6px 10px; }
.outline-material-track-grid,.upload-track-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px; }
.outline-material-track { min-width:0;display:grid;grid-template-columns:112px minmax(0,1fr);overflow:hidden;border:1px solid var(--line);border-radius:14px;background:var(--panel); }
.material-card-visual { position:relative;isolation:isolate;min-height:126px;display:grid;place-items:center;overflow:hidden;color:var(--lime);background:radial-gradient(circle at 70% 25%,rgba(181,237,120,.16),transparent 42%),linear-gradient(135deg,#0a0e0b,#1f2b20);font-size:34px; }
.material-card-preview { position:absolute;z-index:0;inset:0;width:100%;height:100%;object-fit:cover;background:#070a08;opacity:0;transition:opacity .16s ease; }
.material-card-visual.has-preview .material-card-preview { opacity:1; }
.material-card-visual-marker { position:relative;z-index:2;align-self:end;display:grid;place-items:center;min-width:42px;min-height:42px;padding:7px;border:1px solid rgba(255,255,255,.34);border-radius:999px;background:rgba(5,9,6,.72);box-shadow:0 8px 24px rgba(0,0,0,.28);line-height:1; }
.material-card-visual small { position:relative;z-index:2;align-self:start;margin-top:7px;padding:4px 7px;border-radius:999px;color:#eef6e9;background:rgba(5,9,6,.72);font-size:10px;font-weight:760;letter-spacing:.08em; }
.outline-material-track[data-media-type="audio"] .material-card-visual-marker { border:0;background:transparent;box-shadow:none; }
.outline-material-track[data-media-type="audio"] .material-card-visual { background:repeating-linear-gradient(90deg,rgba(181,237,120,.12) 0 3px,transparent 3px 10px),linear-gradient(135deg,#0a0e0b,#1f2b20); }
.outline-material-track[data-media-type="image"] .material-card-visual { background:radial-gradient(circle at 35% 35%,rgba(181,237,120,.19),transparent 36%),linear-gradient(145deg,#101810,#263323); }
.material-card-body { min-width:0;display:grid;align-content:start;gap:9px;padding:13px; }
.material-card-title { display:flex;align-items:center;gap:8px;cursor:pointer; }
.material-card-badges { display:flex;flex-wrap:wrap;gap:6px; }
.material-card-badges span { padding:4px 7px;border-radius:999px;font-size:10px;font-weight:760;line-height:1; }
.material-type-badge { color:#172115;background:var(--lime); }
.material-role-badge { color:var(--muted);background:rgba(255,255,255,.06); }
.material-card-body p { margin:0; }
.material-card-body progress,.upload-track-card progress { width:100%;accent-color:var(--lime); }
.material-card-body .secondary-button,.material-card-body .danger-button { min-height:34px;padding:7px 10px; }
.material-track progress { display:block;width:100%;height:14px;accent-color:#2f8cff; }
.quick-capture-dialog { width:min(92vw,820px);max-width:none;padding:0;border:1px solid rgba(181,237,120,.34);border-radius:20px;color:var(--text);background:#0b100c;box-shadow:0 26px 90px rgba(0,0,0,.62); }
.quick-capture-dialog::backdrop { background:rgba(0,0,0,.78);backdrop-filter:blur(5px); }
.quick-capture-card { display:grid;gap:16px;padding:20px; }
.quick-capture-head { display:flex;align-items:center;justify-content:space-between;gap:18px; }
.quick-capture-head h2 { margin:0; }
.quick-capture-clock { color:var(--lime);font-size:24px;font-variant-numeric:tabular-nums; }
.quick-capture-card select { width:100%; }
.quick-capture-preview { width:100%;max-height:52vh;border-radius:14px;background:#050806;object-fit:contain; }
.quick-capture-review { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px; }
.quick-capture-track { min-width:0;padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--panel); }
.quick-capture-track h3 { margin:0 0 9px;font-size:14px; }
.quick-capture-track video,.quick-capture-track audio { width:100%;max-height:260px; }
.quick-capture-review>.record-actions { grid-column:1/-1; }
.outline-material-empty { margin:0;padding:22px 18px;color:var(--muted); }
#upload-progress-panel { margin:0 0 16px;padding:16px;border:1px solid rgba(181,237,120,.28);border-radius:16px;background:var(--accent); }
#upload-progress-panel h3 { margin:0 0 12px;font-size:15px; }
.upload-track-card { display:grid;gap:8px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--muted);font-size:12px; }
.material-take-meta { margin:0;color:var(--muted);font-size:12px; }
.material-player-dialog { width:min(92vw,1120px);max-width:none;height:min(86vh,760px);max-height:none;padding:0;border:1px solid rgba(181,237,120,.34);border-radius:18px;color:var(--text);background:#0b100c;box-shadow:0 26px 90px rgba(0,0,0,.62); }
.material-player-dialog::backdrop { background:rgba(0,0,0,.78);backdrop-filter:blur(5px); }
.material-player-shell { height:100%;display:grid;grid-template-rows:auto minmax(0,1fr) auto; }
.material-player-head { display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 16px;border-bottom:1px solid var(--line); }
.material-player-stage { min-height:0;display:grid;place-items:center;padding:14px;background:#050806; }
.material-player-stage video,.material-player-stage img { width:100%;height:100%;max-height:calc(86vh - 132px);object-fit:contain;background:#000; }
.material-player-stage audio { width:min(720px,90%); }
.material-player-actions { min-height:54px;display:flex;justify-content:center;gap:10px;padding:9px 16px;border-top:1px solid var(--line); }
.material-player-actions:empty { display:none; }
@media(max-width:760px){.outline-material-card-head{align-items:flex-start;flex-direction:column}.outline-material-actions{justify-content:flex-start}.outline-material-track-grid,.upload-track-grid,.quick-capture-review{grid-template-columns:1fr}.outline-material-track{grid-template-columns:84px minmax(0,1fr)}}