:root { --canvas-ink:#151515; --canvas-paper:#f3f1eb; --canvas-line:#d7d3ca; --canvas-muted:#716f69; --canvas-accent:#ff4b2b; }
.canvas-page { background:var(--canvas-paper); color:var(--canvas-ink); }
.canvas-main { min-width:0; }
.canvas-topbar { min-height:68px; padding:0 32px; border-bottom:1px solid var(--canvas-line); display:flex; align-items:center; justify-content:space-between; gap:20px; background:rgba(243,241,235,.94); position:sticky; top:0; z-index:12; backdrop-filter:blur(12px); }
.canvas-topbar > div { display:flex; align-items:center; gap:10px; font-size:12px; }
.canvas-topbar span,.canvas-topbar p { color:var(--canvas-muted); }
.canvas-topbar i { color:#bbb7ad; font-style:normal; }
.canvas-topbar p { margin:0; font-size:11px; letter-spacing:.05em; }
.canvas-content { max-width:1540px; margin:0 auto; padding:28px 32px 52px; display:grid; gap:22px; }
.canvas-hero { min-height:172px; display:flex; justify-content:space-between; align-items:flex-end; gap:28px; padding:34px 38px; border:1px solid var(--canvas-line); border-radius:22px; background:linear-gradient(130deg,#ece9e1 0%,#faf9f5 58%,#dfdbd1 100%); overflow:hidden; position:relative; }
.canvas-hero::after { content:""; position:absolute; right:-45px; top:-95px; width:280px; height:280px; border:1px solid rgba(24,24,24,.1); border-radius:50%; box-shadow:0 0 0 35px rgba(255,255,255,.17),0 0 0 70px rgba(20,20,20,.025); }
.canvas-hero > div { position:relative; z-index:1; }
.canvas-hero h1 { margin:7px 0 8px; font-size:clamp(30px,3vw,46px); letter-spacing:-.045em; }
.canvas-hero p:not(.eyebrow) { max-width:720px; margin:0; color:#5f5d57; font-size:14px; line-height:1.7; }
.canvas-hero-actions { display:flex; gap:9px; flex:0 0 auto; }
.canvas-hero-actions button,.canvas-section-heading > button { border:1px solid #bdb9b0; border-radius:999px; background:rgba(255,255,255,.62); padding:10px 16px; color:#242424; cursor:pointer; font-weight:700; }
.canvas-hero-actions button:hover,.canvas-section-heading > button:hover { border-color:#202020; background:white; }
.video-retention-notice { display:flex; align-items:center; gap:14px; padding:13px 18px; border:1px solid #e1b994; border-radius:13px; background:#fff7ec; color:#6c4021; font-size:11px; line-height:1.55; }
.video-retention-notice b { flex:0 0 auto; font-size:12px; }
.canvas-library-panel,.canvas-workspace-panel,.canvas-result-panel { border:1px solid var(--canvas-line); border-radius:20px; background:#f9f8f4; padding:25px; }
.canvas-section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:20px; }
.canvas-section-heading small { color:#8b877f; font-size:9px; letter-spacing:.16em; font-weight:800; }
.canvas-section-heading h2 { margin:5px 0 0; font-size:20px; letter-spacing:-.025em; }
.canvas-section-heading p { margin:5px 0 0; color:var(--canvas-muted); font-size:12px; }
.canvas-section-heading label { display:grid; gap:7px; color:#77736c; font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.canvas-section-heading input { width:min(300px,30vw); border:0; border-bottom:1px solid #a8a49b; background:transparent; padding:7px 0; color:#171717; font:700 14px inherit; outline:0; }
.canvas-library-actions{display:flex;align-items:flex-end;justify-content:flex-end;gap:7px;flex-wrap:wrap}.canvas-library-actions label{display:grid;gap:4px}.canvas-library-actions select{height:34px;min-width:160px;padding:0 9px;border:1px solid #dce1da;border-radius:3px;background:#fff;color:#596456;font-size:10px}.canvas-library-actions button{height:34px;padding:0 10px;border:1px solid #dce1da;border-radius:3px;background:#fff;color:#687462;font-size:10px;cursor:pointer}.canvas-library-actions button:hover{color:#50682e;border-color:#b8cd91;background:#f3f8e9}.canvas-library-actions button.is-danger{color:#995a52;border-color:#ead5d2}.canvas-library-actions button.is-danger:hover{color:#8d4037;border-color:#d8aaa5;background:#fff6f4}.canvas-library-actions button:disabled{cursor:not-allowed;opacity:.45}
.canvas-upload-status { margin:-7px 0 15px; border-left:3px solid #c66a43; padding:8px 11px; background:#fff3e9; color:#884127; font-size:11px; }
.canvas-upload-status b,.canvas-upload-status span { display:block; }.canvas-upload-status span { margin-top:3px; opacity:.78; }.canvas-upload-status i { display:block; width:var(--upload-progress,0%); height:3px; margin-top:8px; background:#8ca644; transition:width .2s ease; }
.canvas-stage-grid { display:grid; grid-template-columns:repeat(4,minmax(225px,1fr)); gap:13px; overflow-x:auto; padding-bottom:3px; }
.canvas-stage-column { min-width:225px; border:1px solid #dedbd3; border-radius:15px; background:#f0eee8; overflow:hidden; }
.canvas-stage-heading { display:flex; align-items:center; justify-content:space-between; padding:14px 14px 12px; border-bottom:1px solid #d9d5cc; }
.canvas-stage-heading > div { display:flex; align-items:center; gap:8px; }
.canvas-stage-heading i { width:7px; height:7px; border-radius:50%; background:#1a1a1a; box-shadow:0 0 0 4px rgba(20,20,20,.07); }
.canvas-stage-column[data-stage="产品卖点"] .canvas-stage-heading i { background:#5d806a; }
.canvas-stage-column[data-stage="同品对比"] .canvas-stage-heading i { background:#bd762f; }
.canvas-stage-column[data-stage="引导下单"] .canvas-stage-heading i { background:var(--canvas-accent); }
.canvas-stage-heading b { font-size:13px; }
.canvas-stage-heading span { color:#8d8981; font-size:10px; }
.canvas-stage-heading button { border:0; background:transparent; padding:3px 0; color:#65615b; font-size:10px; cursor:pointer; }
.canvas-stage-heading button:hover { color:#111; text-decoration:underline; }
.canvas-stage-upload { width:calc(100% - 18px); min-height:54px; display:grid; place-content:center; gap:3px; margin:9px 9px 0; padding:8px; color:#6f786d; border:1px dashed #cdd5c9; border-radius:3px; background:#fafbf9; cursor:pointer; text-align:center; }
.canvas-stage-upload b { color:#5f713d; font-size:10px; }.canvas-stage-upload span { color:#98a096; font-size:8px; }
.canvas-stage-upload:hover,.canvas-stage-column.is-file-drag .canvas-stage-upload { color:#475d28; border-color:#8fab58; background:#f1f8e6; }
.canvas-stage-column.is-file-drag { border-color:#8fab58; box-shadow:inset 0 0 0 2px rgba(139,171,81,.16); }
.canvas-stage-clips { max-height:400px; overflow:auto; padding:9px; display:grid; gap:8px; scrollbar-width:thin; }
.canvas-clip-card { display:grid; grid-template-columns:75px 1fr; gap:10px; border:1px solid #d7d3ca; border-radius:11px; background:#fbfaf7; padding:7px; cursor:grab; transition:.18s ease; }
.canvas-clip-card{position:relative}.canvas-clip-card.is-selected{border-color:#9ebc69;box-shadow:0 0 0 2px rgba(140,166,68,.11)}.canvas-clip-select{position:absolute;z-index:3;top:8px;left:8px;width:19px;height:19px;display:grid;place-items:center;border:1px solid #d4d9d0;border-radius:3px;background:rgba(255,255,255,.94);cursor:pointer}.canvas-clip-select input{position:absolute;opacity:0;pointer-events:none}.canvas-clip-select span{width:9px;height:9px;border-radius:1px;background:#fff}.canvas-clip-select input:checked+span{background:#789b38;box-shadow:inset 0 0 0 2px #fff}
.canvas-clip-card:hover { transform:translateY(-1px); border-color:#9e9a91; box-shadow:0 7px 18px rgba(28,26,22,.07); }
.canvas-clip-card:active { cursor:grabbing; }
.canvas-clip-card video { width:75px; height:94px; object-fit:cover; border-radius:7px; background:#222; }
.canvas-clip-copy { min-width:0; display:flex; flex-direction:column; }
.canvas-clip-copy b { font-size:11px; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.canvas-clip-copy small { margin-top:4px; color:#86827a; font-size:9px; line-height:1.35; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.canvas-clip-actions { margin-top:auto; display:flex; align-items:center; gap:10px; }
.canvas-clip-copy button { align-self:flex-start; border:0; border-bottom:1px solid #8b877f; background:transparent; padding:3px 0; color:#282828; font-size:10px; cursor:pointer; }
.canvas-clip-copy button.is-danger { color:#a33d30; border-color:#c98d85; }
.canvas-column-empty { min-height:145px; display:grid; place-content:center; text-align:center; color:#9b978f; font-size:11px; line-height:1.6; padding:20px; }
.canvas-timeline-empty { min-height:180px; border:1px dashed #b8b4ab; border-radius:14px; display:grid; place-content:center; justify-items:center; color:#858178; text-align:center; transition:.2s ease; }
.canvas-timeline-empty.drag-over { border-color:#171717; background:#eeece5; }
.canvas-timeline-empty > span { display:grid; place-items:center; width:42px; height:42px; border:1px solid #aaa69d; border-radius:50%; margin-bottom:9px; font-size:20px; }
.canvas-timeline-empty b { color:#45423d; font-size:13px; }
.canvas-timeline-empty p { margin:5px 0 0; font-size:11px; }
.canvas-timeline { display:grid; gap:12px; min-height:0; padding:3px 1px 12px; }
.canvas-timeline:empty { display:none; }
.canvas-timeline.is-drop-target { outline:2px dashed #77736b; outline-offset:5px; border-radius:10px; }
.canvas-timeline-stage { border:1px solid #d8d4cb; border-radius:14px; background:#f0eee8; overflow:hidden; }
.canvas-timeline-stage > header { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 13px; border-bottom:1px solid #dad6ce; }
.canvas-timeline-stage > header div { display:flex; align-items:center; gap:8px; }
.canvas-timeline-stage > header i { width:7px; height:7px; border-radius:50%; background:#222; }
.canvas-timeline-stage > header b { font-size:12px; }
.canvas-timeline-stage > header span { color:#858078; font-size:10px; }
.canvas-timeline-row { min-height:92px; display:flex; gap:9px; overflow-x:auto; padding:9px; scrollbar-width:thin; }
.canvas-timeline-row > p { margin:auto; color:#97938b; font-size:10px; }
.canvas-timeline-item { flex:0 0 228px; position:relative; border:1px solid #cfcbc2; border-radius:13px; background:#eeece6; padding:8px; cursor:grab; }
.canvas-timeline-item::before { content:attr(data-order); position:absolute; left:15px; top:15px; z-index:2; display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:#111; color:#fff; font:700 9px/1 sans-serif; }
.canvas-timeline-item video { width:100%; height:125px; object-fit:cover; border-radius:8px; background:#1b1b1b; }
.canvas-timeline-meta { padding:8px 3px 4px; display:grid; gap:3px; }
.canvas-timeline-meta b { font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.canvas-timeline-meta span { color:#77736d; font-size:9px; }
.canvas-item-actions { display:grid; grid-template-columns:repeat(3,1fr); gap:4px; margin-top:5px; }
.canvas-item-actions button { border:1px solid #d0ccc3; border-radius:7px; background:#faf9f5; padding:5px 2px; cursor:pointer; color:#4c4944; }
.canvas-item-actions button:hover { border-color:#222; color:#111; }
.canvas-item-actions button:last-child:hover { border-color:#c43b2b; color:#c43b2b; }
.canvas-combination-toolbar { margin-top:15px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:13px 15px; border:1px solid #d8d4cb; border-radius:12px; background:#f0eee8; }
.canvas-combination-toolbar > div { display:flex; align-items:end; gap:8px; flex:0 0 auto; }
.canvas-combination-toolbar label { display:grid; gap:4px; color:#77736c; font-size:9px; font-weight:800; letter-spacing:.08em; }
.canvas-combination-toolbar input { width:86px; border:1px solid #c5c1b8; border-radius:8px; background:#fff; padding:8px; font-weight:800; }
.canvas-combination-toolbar button { min-height:36px; border:0; border-radius:999px; background:#171717; color:#fff; padding:0 15px; font-weight:800; cursor:pointer; }
.canvas-combination-toolbar p { max-width:600px; margin:0; color:#7b7770; font-size:10px; line-height:1.5; }
.canvas-combination-plans { margin-top:11px; display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:8px; }
.canvas-plan { min-width:0; display:grid; gap:4px; border:1px solid #d3cfc6; border-radius:11px; background:#fff; padding:11px 12px; text-align:left; cursor:pointer; }
.canvas-plan:hover,.canvas-plan.active { border-color:#1d1d1d; box-shadow:inset 3px 0 0 #1d1d1d; }
.canvas-plan span { color:#8d8981; font-size:9px; font-weight:800; letter-spacing:.1em; }
.canvas-plan b,.canvas-plan small { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.canvas-plan b { font-size:11px; }.canvas-plan small { color:#6f6b64; font-size:9px; }.canvas-plan em { color:#ae573d; font-size:9px; font-style:normal; }
.canvas-workspace-footer { margin-top:16px; border-top:1px solid #dedad1; padding-top:17px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.canvas-workspace-footer > div { display:flex; align-items:center; gap:11px; }
.canvas-workspace-footer b { font-size:13px; }
.canvas-workspace-footer span { color:#817d76; font-size:11px; }
.canvas-compose-button { border:0; border-radius:999px; background:#171717; color:white; padding:13px 20px; font-weight:800; cursor:pointer; }
.canvas-compose-button span { color:white; margin-left:12px; }
.canvas-compose-button:disabled { opacity:.35; cursor:not-allowed; }
.canvas-result-panel > .canvas-section-heading a { border-radius:999px; background:#171717; color:#fff; padding:10px 17px; text-decoration:none; font-size:12px; font-weight:800; }
.canvas-result-stage { min-height:260px; border-radius:14px; background:#1a1a1a; display:grid; place-content:center; overflow:hidden; }
.canvas-result-stage video { display:block; width:100%; max-height:680px; background:#111; }
.canvas-processing { display:grid; justify-items:center; gap:8px; color:#eee; }
.canvas-processing i { width:35px; height:35px; border:2px solid #575757; border-top-color:white; border-radius:50%; animation:canvas-spin .8s linear infinite; }
.canvas-processing b { margin-top:7px; font-size:13px; }
.canvas-processing span { color:#969696; font-size:10px; }
@keyframes canvas-spin { to { transform:rotate(360deg); } }
@media (max-width:1120px) { .canvas-stage-grid { grid-template-columns:repeat(4,250px); } .canvas-content { padding-inline:20px; } }
@media (max-width:760px) { .canvas-topbar { padding-inline:18px; } .canvas-content { padding:16px 12px 36px; } .canvas-hero { align-items:flex-start; flex-direction:column; padding:25px; } .canvas-section-heading { align-items:flex-start; flex-direction:column; } .canvas-section-heading input { width:min(82vw,320px); } .canvas-library-actions{width:100%;justify-content:flex-start}.canvas-library-actions label,.canvas-library-actions select{width:100%}.canvas-library-panel,.canvas-workspace-panel,.canvas-result-panel { padding:16px; } .canvas-timeline-item { flex-basis:195px; } .video-retention-notice,.canvas-combination-toolbar { align-items:flex-start; flex-direction:column; } }

/* Match the single and batch workspaces: compact, square, green-accented surfaces. */
.canvas-page{--canvas-paper:#f6f7f3;--canvas-line:#e1e4de;--canvas-muted:#929990;--canvas-accent:#8ca644;background:#f6f7f3;color:#303730}.canvas-topbar{height:70px;min-height:70px;padding:0 46px;border-color:#e2e5df;background:rgba(255,255,255,.83)}.canvas-content{max-width:1360px;padding:35px 47px 64px;gap:16px}.canvas-hero{min-height:auto;align-items:flex-end;padding:0;margin-bottom:2px;border:0;border-radius:0;background:transparent;overflow:visible}.canvas-hero::after{display:none}.canvas-hero h1{margin:0;color:#272b27;font-size:27px;letter-spacing:-1.5px}.canvas-hero p:not(.eyebrow){margin:7px 0 0;color:#969b94;font-size:11px;line-height:1.6}.canvas-hero-actions button,.canvas-section-heading>button{height:34px;padding:0 12px;color:#687462;border:1px solid #dce1da;border-radius:3px;background:#fff;font-size:10px}.canvas-hero-actions button:first-child{color:#26341e;border-color:#d8fa6a;background:#d8fa6a}.canvas-hero-actions button:hover,.canvas-section-heading>button:hover{color:#50682e;border-color:#b8cd91;background:#f3f8e9}.video-retention-notice{border-color:#dfe4d8;border-radius:3px;background:#fbfcf9;color:#697466}.canvas-library-panel,.canvas-workspace-panel,.canvas-result-panel{padding:18px 19px;border-color:#e1e4de;border-radius:0;background:#fff;box-shadow:none}.canvas-section-heading{margin-bottom:13px}.canvas-section-heading small{color:#8ca644;font:9px "DM Mono",monospace;letter-spacing:1px}.canvas-section-heading h2{margin:5px 0;font-size:15px;letter-spacing:-.5px}.canvas-section-heading p{color:#929990;font-size:10px;line-height:1.6}.canvas-section-heading label{color:#737c71;font-size:9px}.canvas-section-heading input{border-color:#dce2d9;color:#465044;font-size:11px}.canvas-stage-grid{gap:8px}.canvas-stage-column{border-color:#dfe3dc;border-radius:3px;background:#fafbf9}.canvas-stage-heading{padding:11px 12px;border-color:#e5e8e2}.canvas-stage-heading i{box-shadow:none}.canvas-stage-heading button{color:#617346}.canvas-stage-clips{max-height:330px;padding:8px;gap:6px}.canvas-clip-card{grid-template-columns:64px 1fr;gap:8px;padding:6px;border-color:#e0e4de;border-radius:3px;background:#fff}.canvas-clip-card video{width:64px;height:78px;border-radius:2px}.canvas-column-empty{min-height:92px}.canvas-upload-status{margin:-4px 0 12px;border-left-color:#8ca644;background:#f4f9eb;color:#5f713d}.canvas-timeline-empty{min-height:92px;border-color:#d9ded6;border-radius:3px}.canvas-timeline-empty>span{width:30px;height:30px;margin-bottom:5px}.canvas-timeline{gap:7px;padding-bottom:6px}.canvas-timeline-stage{border-color:#e1e5de;border-radius:3px;background:#fafbf9}.canvas-timeline-stage>header{padding:7px 10px;border-color:#e7eae5}.canvas-timeline-row{min-height:58px;gap:6px;padding:6px}.canvas-timeline-item{flex-basis:168px;border-color:#dfe3dc;border-radius:3px;background:#fff;padding:5px}.canvas-timeline-item::before{left:9px;top:9px;width:19px;height:19px;background:#3b4239;font-size:8px}.canvas-timeline-item video{height:68px;border-radius:2px}.canvas-timeline-meta{padding:5px 2px 2px}.canvas-timeline-meta b{font-size:10px}.canvas-item-actions{margin-top:3px}.canvas-item-actions button{padding:3px 2px;border-color:#dce1d9;border-radius:2px;background:#fbfcf9}.canvas-combination-toolbar{margin-top:9px;padding:9px 11px;border-color:#e1e5de;border-radius:3px;background:#f7f9f4}.canvas-combination-toolbar input{border-color:#dce2d9;border-radius:3px}.canvas-combination-toolbar button,.canvas-compose-button{border-radius:3px;background:#d8fa6a;color:#26341e}.canvas-combination-toolbar button:hover,.canvas-compose-button:hover{background:#c8ef55}.canvas-combination-plans{margin-top:7px;gap:6px}.canvas-plan{border-color:#e1e5de;border-radius:3px;padding:8px 9px}.canvas-plan:hover,.canvas-plan.active{border-color:#a9c477;box-shadow:inset 3px 0 0 #8ca644}.canvas-workspace-footer{margin-top:10px;padding-top:10px}.canvas-compose-button{padding:10px 14px}.canvas-compose-button span{color:#26341e}.canvas-result-stage{min-height:220px;border-radius:3px}
@media(max-width:1100px){.canvas-topbar{padding:0 25px}.canvas-hero{align-items:flex-start;flex-direction:column;gap:20px}.canvas-hero-actions{width:100%}}@media(max-width:760px){.canvas-topbar{height:58px;min-height:58px;padding:0 15px}.canvas-content{padding:24px 15px 40px}.canvas-hero{padding:0}.canvas-library-panel,.canvas-workspace-panel,.canvas-result-panel{padding:16px}.canvas-timeline-item{flex-basis:148px}.canvas-timeline-item video{height:60px}}