/* 工作台：舞台底色上放两块石墨面板（对话 / 右侧本曲面板），左栏直接坐在舞台上。参照 WorkBuddy 的三区布局 */
body[data-zone=app]{overflow:hidden}
.app{--sbw:260px;--rpw:380px;position:fixed;inset:0;display:grid;grid-template-columns:var(--sbw) minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;background:var(--stage);transition:grid-template-columns var(--d-3) var(--e-out)}
.app.sb-off{--sbw:0px}
.app.resizing{transition:none;user-select:none;cursor:col-resize}

/* —— 左栏 —— */
.sb{grid-row:1/3;display:flex;flex-direction:column;min-width:0;overflow:hidden;padding:0 8px 8px}
.app.sb-off .sb{visibility:hidden}
.sb-top{display:flex;align-items:center;gap:2px;height:52px;padding:0 0 0 10px;flex:none}
.sb-logo{display:flex;align-items:center;height:32px;margin-right:auto;border-radius:6px}
.sb-logo .tk-logo{font-size:17px}
.sb-new{display:flex;align-items:center;gap:10px;height:36px;padding:0 10px;border-radius:10px;background:var(--raised);box-shadow:inset 0 0 0 1px var(--line);font-size:14px;font-weight:500;color:var(--text);margin-bottom:6px;transition:background var(--d-1)}
.sb-new:hover{background:var(--hover)}
.sb-new .ic{width:18px;height:18px}
.sb-new .kbd{margin-left:auto;opacity:0;transition:opacity var(--d-1)}
.sb-new:hover .kbd{opacity:1}
.sb-nav{display:flex;flex-direction:column;gap:1px;flex:none}
.sb-item{position:relative;display:flex;align-items:center;gap:10px;height:34px;padding:0 10px;border-radius:8px;font-size:14px;color:var(--text-2);white-space:nowrap;transition:background var(--d-1),color var(--d-1)}
.sb-item .ic{width:18px;height:18px;color:var(--text-3);transition:color var(--d-1)}
.sb-item:hover{background:var(--sb-hover);color:var(--text)}
.sb-item:hover .ic{color:var(--text-2)}
.sb-item.on{background:var(--sb-on);color:var(--text);font-weight:500}
.sb-item.on .ic{color:var(--text)}
.sb-item .r{margin-left:auto;display:flex;align-items:center;gap:6px}
.sb-item .badge{height:18px;font-size:11px}
:root,[data-theme=dark]{--sb-hover:rgba(255,255,255,.055);--sb-on:rgba(255,255,255,.09)}
[data-theme=light]{--sb-hover:rgba(0,0,0,.045);--sb-on:rgba(0,0,0,.07)}

.sb-sec{display:flex;align-items:center;height:32px;padding:0 4px 0 10px;margin-top:14px;font-size:12px;color:var(--text-3);flex:none}
.sb-sec>span{flex:1}
.sb-sec .ib{opacity:0;transition:opacity var(--d-1)}
.sb:hover .sb-sec .ib,.sb-sec .ib[aria-expanded=true],.sb-sec .ib.on{opacity:1}
.sb-list{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;margin:0 -8px;padding:0 8px 8px}
.sb-song{position:relative;display:flex;align-items:center;gap:8px;height:32px;padding:0 6px 0 10px;border-radius:8px;font-size:13px;color:var(--text-2);cursor:pointer;user-select:none;transition:background var(--d-1),color var(--d-1)}
.sb-song:hover,.sb-song.menu-open{background:var(--sb-hover);color:var(--text)}
.sb-song.on{background:var(--sb-on);color:var(--text)}
.sb-song .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-song .meta{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-3);flex:none}
.sb-song .more{display:none}
.sb-song:hover .more,.sb-song.menu-open .more{display:inline-grid}
.sb-song:hover .meta .tm,.sb-song.menu-open .meta .tm{display:none}
.sb-song .pin{width:12px;height:12px;color:var(--text-3);flex:none;margin-left:-2px}
.sb-song .unread{width:7px;height:7px;border-radius:50%;background:var(--brand);flex:none}
.sb-song .wait{height:18px;padding:0 6px;border-radius:5px;font-size:11px;font-weight:500;background:var(--brand-soft);color:var(--brand);display:inline-flex;align-items:center}
.sb-song .ren{flex:1;min-width:0;height:24px;border-radius:6px;padding:0 6px;background:var(--sunken);box-shadow:0 0 0 1px var(--text-3);font-size:13px;color:var(--text)}
.sb-song.sel{background:var(--brand-soft);color:var(--text)}
.sb-song .cb{flex:none;width:16px;height:16px;border-radius:5px;box-shadow:inset 0 0 0 1px var(--line-3);display:grid;place-items:center;color:var(--on-inv)}
.sb-song.sel .cb{background:var(--inv);box-shadow:none}
.sb-song .cb .ic{width:12px;height:12px}
.sb-fold{display:flex;align-items:center;gap:6px;height:32px;padding:0 6px 0 6px;border-radius:8px;font-size:13px;color:var(--text-2);cursor:pointer;user-select:none}
.sb-fold:hover,.sb-fold.menu-open{background:var(--sb-hover);color:var(--text)}
.sb-fold .cv{width:14px;height:14px;color:var(--text-3);transition:transform var(--d-2) var(--e-out)}
.sb-fold.open .cv{transform:rotate(90deg)}
.sb-fold .ic.fd{color:var(--text-3)}
.sb-fold .n{font-size:12px;color:var(--text-3);margin-left:auto}
.sb-fold .more{display:none}
.sb-fold:hover .n,.sb-fold.menu-open .n{display:none}
.sb-fold:hover .more,.sb-fold.menu-open .more{display:inline-grid}
.sb-kids{padding-left:14px;position:relative}
.sb-kids::before{content:'';position:absolute;left:13px;top:2px;bottom:2px;width:1px;background:var(--line)}
.sb-fold.drop,.sb-sec.drop{box-shadow:inset 0 0 0 1px var(--text-3);background:var(--sb-hover)}
.sb-group{font-size:12px;color:var(--text-3);padding:10px 10px 4px}
.sb-more{display:flex;align-items:center;gap:6px;height:30px;padding:0 10px;font-size:12px;color:var(--text-3);border-radius:8px;width:100%}
.sb-more:hover{color:var(--text);background:var(--sb-hover)}
.sb-empty{padding:10px 10px;font-size:12px;line-height:1.6;color:var(--text-3)}
.sb-batch{display:flex;align-items:center;gap:2px;padding:6px;margin:0 0 6px;border-radius:10px;background:var(--raised);box-shadow:inset 0 0 0 1px var(--line);flex:none}
.sb-batch span{flex:1;font-size:12px;color:var(--text-2);padding-left:6px}

.sb-foot{flex:none;padding-top:8px;border-top:1px solid var(--line);margin-top:4px}
.sb-quota{display:block;width:100%;padding:8px 10px;border-radius:10px;text-align:left;transition:background var(--d-1)}
.sb-quota:hover{background:var(--sb-hover)}
.sb-quota .qt{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--text-2);margin-bottom:6px}
.sb-quota .qt b{font-weight:500;color:var(--text)}
.sb-quota .qt em{font-style:normal;color:var(--brand);font-weight:500}
.sb-quota .bar{height:3px}
.sb-quota .bar>i{background:linear-gradient(90deg,var(--blue),var(--teal))}
.sb-quota .bar>i.low{background:var(--warn)}
.sb-me{display:flex;align-items:center;gap:2px;margin-top:4px}
.sb-acc{flex:1;min-width:0;display:flex;align-items:center;gap:10px;height:44px;padding:0 8px;border-radius:10px;text-align:left}
.sb-acc:hover,.sb-acc[aria-expanded=true]{background:var(--sb-hover)}
.sb-acc b{display:block;font-size:13px;font-weight:500;color:var(--text)}
.sb-acc small{display:block;font-size:12px;color:var(--text-3)}

/* —— 工作区：主面板 + 右侧面板 —— */
.work{grid-column:2;grid-row:1;display:flex;gap:8px;min-height:0;min-width:0;padding:8px 8px 0 0}
.app.sb-off .work{padding-left:8px}
.app:not(.has-player) .work{padding-bottom:8px}
.main{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;background:var(--panel);border-radius:var(--r-12);overflow:hidden;box-shadow:0 0 0 1px var(--line)}
[data-theme=light] .main,[data-theme=light] .rp{box-shadow:0 0 0 1px var(--line),0 1px 3px rgba(0,0,0,.04)}
.mh{display:flex;align-items:center;gap:6px;height:52px;padding:0 10px 0 16px;flex:none;border-bottom:1px solid transparent;transition:border-color var(--d-2)}
.mh.line{border-color:var(--line)}
.mh .sbt{margin-left:-6px}
.mh .sbt.mob{display:none}
.mh h1{flex:1;min-width:0;display:flex;align-items:center;gap:10px;font:500 14px/1 var(--f-ui);white-space:nowrap}
.mh h1 .tt{overflow:hidden;text-overflow:ellipsis;cursor:text;border-radius:6px;padding:6px 6px;margin:0 -6px}
.mh h1 .tt:hover{background:var(--hover)}
.mh h1 .no{font:400 12px var(--f-mono);color:var(--text-3)}
.mh .acts{display:flex;align-items:center;gap:2px}
.mh .ib.on{color:var(--text);background:var(--hover)}
.stage-pill{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 8px;border-radius:7px;font-size:12px;font-weight:500;color:var(--text-2);background:var(--hover);cursor:pointer;flex:none}
.stage-pill:hover{color:var(--text)}
.stage-pill.ok{color:var(--ok);background:var(--ok-soft)}
.stage-pill.warn{color:var(--warn);background:var(--warn-soft)}
.mbody{flex:1;min-height:0;display:flex;flex-direction:column;position:relative}
.scroller{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain}

/* 右侧面板 */
.rp{position:relative;width:var(--rpw);flex:none;display:flex;flex-direction:column;min-height:0;background:var(--panel);border-radius:var(--r-12);overflow:hidden;box-shadow:0 0 0 1px var(--line)}
.rp[hidden]{display:none}
.rp-resize{position:absolute;left:-6px;top:0;bottom:0;width:8px;cursor:col-resize;z-index:3}
.rp-resize::after{content:'';position:absolute;left:3px;top:50%;width:2px;height:32px;margin-top:-16px;border-radius:2px;background:var(--line-3);opacity:0;transition:opacity var(--d-1)}
.rp-resize:hover::after,.app.resizing .rp-resize::after{opacity:1}
.rp-h{display:flex;align-items:center;gap:4px;height:52px;padding:0 8px 0 12px;flex:none;border-bottom:1px solid var(--line)}
.rp-h .seg>button{height:26px;font-size:12px;padding:0 10px}
.rp-h .ttl{flex:1;min-width:0;display:flex;align-items:center;gap:8px;font-size:13px;font-weight:500}
.rp-b{flex:1;min-height:0;overflow-y:auto}
.rp-scope{display:flex;align-items:center;gap:8px;padding:12px 16px 4px;font-size:12px;color:var(--text-3)}
.rp-scope b{font-weight:500;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rp-filter{display:flex;gap:4px;padding:8px 12px 6px;flex-wrap:wrap}
.rp-filter .chip{height:26px;font-size:12px;padding:0 9px;border-color:transparent}
.rp-filter .chip[aria-pressed=true]{background:var(--active)}
.rp-filter .chip .n{color:var(--text-3)}
.fgrp{padding:10px 16px 4px;font-size:12px;color:var(--text-3)}
.fr{position:relative;display:flex;align-items:center;gap:10px;margin:0 8px;padding:7px 8px;border-radius:10px;cursor:pointer;transition:background var(--d-1)}
.fr:hover,.fr.menu-open{background:var(--hover)}
.fr.on{background:var(--active)}
.fr .th{position:relative;width:36px;height:36px;border-radius:8px;flex:none;background:var(--hover);display:grid;place-items:center;color:var(--text-2);overflow:hidden}
.fr .th img{width:100%;height:100%;object-fit:cover}
.fr .th .pb{position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.45);color:#fff;opacity:0;transition:opacity var(--d-1)}
.fr .th .pb .ic{width:14px;height:14px}
.fr:hover .th .pb,.fr .th .pb.playing{opacity:1}
.fr .m{flex:1;min-width:0}
.fr .m b{display:block;font-size:13px;font-weight:400;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fr .m small{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-3);margin-top:1px;white-space:nowrap;overflow:hidden}
.fr .m small .sep{width:2px;height:2px;border-radius:50%;background:var(--text-4)}
.fr .ac{display:none;align-items:center;gap:0}
.fr:hover .ac,.fr.menu-open .ac{display:flex}
.fr .star{color:var(--warn)}
.fr .tagm{font-size:11px;font-weight:500;height:18px;padding:0 6px;border-radius:5px;background:var(--hover);color:var(--text-2);display:inline-flex;align-items:center;flex:none}
.rp-drop{display:flex;align-items:center;justify-content:center;gap:8px;width:calc(100% - 32px);margin:12px 16px 16px;height:56px;border-radius:12px;border:1px dashed var(--line-3);font-size:12px;color:var(--text-3);transition:border-color var(--d-1),color var(--d-1),background var(--d-1)}
.rp-drop:hover,.rp.drag .rp-drop{border-color:var(--text-3);color:var(--text);background:var(--hover)}
.rp.drag{box-shadow:0 0 0 1px var(--text-3)}

/* 预览 */
.pv{padding:16px}
.pv-art{width:100%;aspect-ratio:1;border-radius:12px;overflow:hidden;background:var(--hover)}
.pv-art img{width:100%;height:100%;object-fit:cover}
.pv h3{font:600 16px/1.4 var(--f-ui);margin:16px 0 4px;word-break:break-word}
.pv .sub{font-size:12px;color:var(--text-3);display:flex;gap:10px;flex-wrap:wrap}
.pv .acts{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
.pv-doc{white-space:pre-wrap;font-size:14px;line-height:1.85;color:var(--text);padding:4px 2px;word-break:break-word}
.pv-doc[contenteditable=true]{outline:0;border-radius:8px;box-shadow:0 0 0 1px var(--line-3);padding:10px 12px;background:var(--sunken)}
.pv-wave{margin-top:16px;height:48px}
.pv-time{display:flex;justify-content:space-between;font:12px var(--f-ui);color:var(--text-3);margin-top:6px;font-variant-numeric:tabular-nums}
.pv-meta{margin-top:20px;border-top:1px solid var(--line)}
.ailabel{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--text-3)}

/* 进度（流水线） */
.pipe{padding:8px 16px 20px}
.pipe-s{position:relative;display:flex;gap:12px;padding:10px 0}
.pipe-s:not(:last-child)::after{content:'';position:absolute;left:15px;top:44px;bottom:-8px;width:1px;background:var(--line-2)}
.pipe-s.done:not(:last-child)::after{background:var(--text-3)}
.pipe-s .ag{width:32px;height:32px;border-radius:9px}
.pipe-s .ag .ic{width:16px;height:16px}
.pipe-s.todo .ag{filter:grayscale(1);opacity:.45}
.pipe-s .bd{flex:1;min-width:0;padding-top:1px}
.pipe-s .hd{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:500}
.pipe-s .hd .badge{margin-left:auto}
.pipe-s p{font-size:12px;color:var(--text-3);margin-top:3px;line-height:1.5}
.pipe-s .btn{margin-top:8px}
.sinfo{margin:4px 16px 20px;border-radius:12px;box-shadow:inset 0 0 0 1px var(--line);padding:4px 14px}
.sinfo .kv>span{width:72px}

/* —— 对话 —— */
.thread-in{max-width:744px;margin:0 auto;padding:20px 24px 40px}
.day{display:flex;align-items:center;gap:12px;margin:8px 0 20px;font-size:12px;color:var(--text-3)}
.day::before,.day::after{content:'';flex:1;height:1px;background:var(--line)}
.msg{margin-bottom:28px;scroll-margin-top:16px}
.msg.flash .bub,.msg.flash .m-body{animation:flash 1.6s var(--e-out)}
@keyframes flash{0%,40%{background:var(--brand-soft)}}
.m-me{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.m-me .bub{max-width:min(82%,560px);padding:9px 14px;border-radius:16px 16px 6px 16px;background:var(--active);font-size:15px;line-height:1.65;white-space:pre-wrap;word-break:break-word}
[data-theme=light] .m-me .bub{background:#F0F0EE}
.m-me .att{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;max-width:82%}
.m-me .when{font-size:11px;color:var(--text-4);opacity:0;transition:opacity var(--d-1)}
.m-me:hover .when{opacity:1}
.m-hd{display:flex;align-items:center;gap:8px;margin-bottom:10px;height:20px}
.m-hd b{font-size:13px;font-weight:500}
.m-hd .when{font-size:12px;color:var(--text-3)}
.m-hd .badge{height:18px}
.m-body{display:flex;flex-direction:column;gap:12px;border-radius:8px}
.m-text{font-size:15px;line-height:1.75;color:var(--text);white-space:pre-wrap;word-break:break-word}
.m-text b{font-weight:600}
.m-text.streaming::after{content:'';display:inline-block;width:7px;height:15px;margin-left:2px;vertical-align:-2px;border-radius:2px;background:var(--text-2);animation:caret 1s steps(2) infinite}
@keyframes caret{50%{opacity:0}}
.m-acts{display:flex;align-items:center;gap:2px;margin-top:8px;opacity:0;transition:opacity var(--d-1)}
.msg:hover .m-acts,.m-acts:focus-within,.m-acts .ib[aria-expanded=true]{opacity:1}
.msg:last-child .m-acts{opacity:1}
.m-acts .ib{color:var(--text-3)}
.m-acts .ib:hover,.m-acts .ib.on{color:var(--text)}
.m-acts .sp{flex:1}
.m-acts small{font-size:12px;color:var(--text-3)}
.typing{display:inline-flex;gap:4px;align-items:center;height:24px}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--text-3);animation:typ 1.2s infinite var(--e-io)}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes typ{0%,60%,100%{opacity:.25}30%{opacity:1}}
.stopped{font-size:13px;color:var(--text-3)}

/* 工作进度块 */
.wk{border-radius:12px;box-shadow:inset 0 0 0 1px var(--line);padding:12px 14px;max-width:520px}
.wk-h{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--text)}
.wk-h .el{margin-left:auto;font-size:12px;color:var(--text-3);font-variant-numeric:tabular-nums}
.wk-s{display:flex;flex-direction:column;gap:2px;margin-top:10px}
.wk-r{display:flex;align-items:center;gap:10px;height:26px;font-size:13px;color:var(--text-3)}
.wk-r .ic{width:14px;height:14px}
.wk-r.done{color:var(--text-2)}
.wk-r.done .ic{color:var(--text-3)}
.wk-r.run{color:var(--text)}
.wk-r.skip{text-decoration:line-through}
.wk-r .ms{margin-left:auto;font-size:12px;color:var(--text-4);font-variant-numeric:tabular-nums}
.wk-r .spin{width:14px;height:14px;border-color:var(--line-3);border-top-color:var(--c,var(--text))}
.wk.done{box-shadow:none;padding:0}
.wk-sum{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 8px 0 6px;margin-left:-6px;border-radius:7px;font-size:12px;color:var(--text-3)}
.wk-sum:hover{background:var(--hover);color:var(--text-2)}
.wk-sum .cv{transition:transform var(--d-2)}
.wk.open .wk-sum .cv{transform:rotate(90deg)}
.wk.done .wk-s{display:none;padding:4px 0 2px 2px}
.wk.done.open .wk-s{display:flex}

/* 制作单 */
.card{border-radius:12px;box-shadow:inset 0 0 0 1px var(--line-2);background:var(--panel);overflow:hidden}
.card-h{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line)}
.card-h h4{font-size:14px;font-weight:600}
.card-h .r{margin-left:auto;font-size:12px;color:var(--text-3);display:flex;align-items:center;gap:8px}
.card-f{display:flex;align-items:center;gap:12px;padding:12px 16px;border-top:1px solid var(--line)}
.card-f .grow{font-size:12px;color:var(--text-3)}
.brief .row{display:grid;grid-template-columns:56px 1fr;align-items:start;gap:12px;padding:10px 16px}
.brief .row+.row{border-top:1px solid var(--line)}
.brief .row>span{font-size:13px;color:var(--text-3);line-height:28px}
.opts{display:flex;flex-wrap:wrap;gap:6px}
.opt{height:28px;padding:0 10px;border-radius:8px;font-size:13px;color:var(--text-2);box-shadow:inset 0 0 0 1px var(--line-2);transition:background var(--d-1),color var(--d-1),box-shadow var(--d-1);white-space:nowrap}
.opt:hover{color:var(--text);box-shadow:inset 0 0 0 1px var(--line-3)}
.opt[aria-pressed=true]{background:var(--inv);color:var(--on-inv);box-shadow:none;font-weight:500}
.brief .ref{height:28px;padding:0 10px;border-radius:8px;box-shadow:inset 0 0 0 1px var(--line-2);font-size:13px;width:100%;max-width:320px}
.brief .ref:focus{box-shadow:inset 0 0 0 1px var(--text-3)}
.brief textarea.ref{height:auto;min-height:84px;padding:8px 10px;line-height:1.6;max-width:none;resize:vertical}
.brief-done{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:12px;box-shadow:inset 0 0 0 1px var(--line);font-size:13px;color:var(--text-2);max-width:620px}
.brief-done .ic{color:var(--ok)}
.brief-done b{font-weight:500;color:var(--text);flex:none}
.brief-done span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1}
.brief-ref{display:flex;align-items:center;gap:10px;padding:6px 6px 6px 14px;border-radius:12px;box-shadow:inset 0 0 0 1px var(--line);font-size:13px;color:var(--text-2);max-width:620px}
.brief-ref>.ic{color:var(--text-3);flex:none}
.brief-ref b{font-weight:500;color:var(--text);flex:none}
.brief-ref span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1}
.brief-ref .btn{flex:none}
.brief-ref .btn-ghost{margin-right:-4px}

/* 歌曲卡 */
.trks{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px}
.trk{position:relative;display:flex;flex-direction:column;gap:10px;padding:10px;border-radius:12px;background:var(--raised);box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow var(--d-1)}
.trk:hover{box-shadow:inset 0 0 0 1px var(--line-2)}
.trk-top{display:flex;align-items:center;gap:12px;min-width:0}
.trk .art{position:relative;width:48px;height:48px;border-radius:9px;overflow:hidden;flex:none;background:var(--hover)}
.trk .art img{width:100%;height:100%;object-fit:cover}
.trk .art .pb{position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.36);color:#fff;opacity:0;transition:opacity var(--d-1)}
.trk .art .pb .ic{width:16px;height:16px}
.trk:hover .art .pb,.trk .art .pb.playing{opacity:1}
.trk .inf{flex:1;min-width:0}
.trk .inf b{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:500;min-width:0}
.trk .inf b span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trk .inf small{display:block;font-size:12px;color:var(--text-3);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trk .ac{display:flex;align-items:center;margin:-4px -4px 0 0;align-self:flex-start}
.trk .ac .ib{color:var(--text-3)}
.trk .ac .ib:hover{color:var(--text)}
.trk .ac .ib.on{color:var(--warn)}
.trk-bot{display:flex;align-items:center;gap:10px}
.trk-bot .tm{font-size:12px;color:var(--text-3);font-variant-numeric:tabular-nums;flex:none;min-width:34px;text-align:right}
.ver{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 4px;border-radius:5px;font:600 11px/1 var(--f-ui);background:var(--hover);color:var(--text-2);flex:none}
.ver.main{background:var(--inv);color:var(--on-inv)}

/* 波形：--p 为播放进度 */
.wave{--p:0;position:relative;flex:1;display:flex;align-items:center;gap:2px;height:28px;cursor:pointer;min-width:0}
.wave i{flex:1;min-width:1px;max-width:4px;border-radius:2px;background:var(--line-3);transition:background var(--d-1)}
.wave .pr{position:absolute;inset:0;display:flex;align-items:center;gap:2px;clip-path:inset(0 calc(100% - var(--p) * 100%) 0 0);pointer-events:none}
.wave .pr i{background:var(--brand)}
.wave:hover i{background:color-mix(in srgb,var(--line-3) 70%,var(--text-3))}
.wave:hover .pr i{background:var(--brand-h)}

/* 封面三选一 */
.cvs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;max-width:560px}
.cv{position:relative;display:flex;flex-direction:column;gap:6px;text-align:left}
.cv .im{position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;background:var(--hover);box-shadow:inset 0 0 0 1px var(--line)}
.cv .im img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--e-out)}
.cv:hover .im img{transform:scale(1.03)}
.cv .im .ov{position:absolute;inset:auto 8px 8px 8px;display:flex;justify-content:center;opacity:0;transform:translateY(4px);transition:opacity var(--d-2),transform var(--d-2)}
.cv:hover .im .ov{opacity:1;transform:none}
.cv .im .ov .btn{background:rgba(10,10,10,.72);color:#fff;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.cv.on .im{box-shadow:0 0 0 2px var(--text)}
.cv .ck{position:absolute;top:8px;right:8px;width:22px;height:22px;border-radius:50%;background:var(--inv);color:var(--on-inv);display:none;place-items:center}
.cv .ck .ic{width:13px;height:13px}
.cv.on .ck{display:grid}
.cv small{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-3)}
.cv.on small{color:var(--text)}

/* 文档卡 */
.dcard{display:block;width:100%;max-width:560px;text-align:left;border-radius:12px;box-shadow:inset 0 0 0 1px var(--line);padding:12px 14px;transition:box-shadow var(--d-1),background var(--d-1)}
.dcard:hover{box-shadow:inset 0 0 0 1px var(--line-2);background:var(--hover)}
.dcard .hd{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:500}
.dcard .hd .ic{color:var(--text-3)}
.dcard .hd .r{margin-left:auto;font-size:12px;font-weight:400;color:var(--text-3)}
.dcard .bd{margin-top:8px;font-size:13px;line-height:1.75;color:var(--text-2);white-space:pre-wrap;max-height:88px;overflow:hidden;-webkit-mask:linear-gradient(#000 55%,transparent);mask:linear-gradient(#000 55%,transparent)}

/* 发行单 */
.rel{max-width:620px}
.rel-top{display:flex;gap:14px;padding:16px}
.rel-top .art{width:64px;height:64px;border-radius:10px;overflow:hidden;flex:none;background:var(--hover)}
.rel-top .art img{width:100%;height:100%;object-fit:cover}
.rel-top b{display:block;font-size:15px;font-weight:600}
.rel-top small{display:block;font-size:12px;color:var(--text-3);margin-top:4px}
.rel-rows{padding:0 16px 4px}
.rel-rows .kv>span{width:92px}
.rel-rows .kv>b{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rel-rows .kv .lnk{font-size:12px;font-weight:400;color:var(--text-3);text-decoration:underline;text-decoration-color:var(--line-3);text-underline-offset:3px;cursor:pointer}
.rel-rows .kv .lnk:hover{color:var(--text)}
.logos{display:flex;align-items:center;gap:4px}
.logos img{width:20px;height:20px;border-radius:5px;background:var(--hover)}
.logos .more{margin-left:4px;font-size:12px;color:var(--text-3);font-weight:400}
.rel-prog{padding:4px 16px 16px}
.rel-prog .bar{margin:8px 0 12px}
.rel-note{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-2);padding-top:4px}
.rel-note .ic{color:var(--text-3)}
.rel-prog .bar>i{background:var(--ok)}
.rel-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 16px}
.rel-st{display:flex;align-items:center;gap:8px;height:28px;font-size:12px;color:var(--text-2)}
.rel-st img{width:16px;height:16px;border-radius:4px}
.rel-st .s{margin-left:auto;display:flex;align-items:center;gap:5px;color:var(--text-3)}
.rel-st .s.ok{color:var(--ok)}

/* 宣传排期 */
.plan{max-width:560px;border-radius:12px;box-shadow:inset 0 0 0 1px var(--line);padding:6px 14px}
.plan .it{display:grid;grid-template-columns:112px 1fr auto;align-items:center;gap:12px;height:38px;font-size:13px}
.plan .it+.it{border-top:1px solid var(--line)}
.plan .it .d{font:500 12px var(--f-ui);color:var(--text-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.plan .it .d em{font-style:normal;color:var(--text-4);margin-right:6px}
.plan .it.past .d,.plan .it.past span{color:var(--text-3)}
.plan .it .st{font-size:12px;color:var(--text-3)}
.plan .it.past .st{color:var(--ok)}
.plan .hd{display:flex;align-items:center;justify-content:space-between;height:36px;font-size:12px;color:var(--text-3);border-bottom:1px solid var(--line)}
.plan .hd b{font-weight:500;color:var(--text)}

/* 机会 */
.opps{max-width:620px;border-radius:12px;box-shadow:inset 0 0 0 1px var(--line)}
.opp{display:flex;align-items:center;gap:12px;padding:12px 14px}
.opp+.opp{border-top:1px solid var(--line)}
.opp .art{width:44px;height:44px;border-radius:9px;overflow:hidden;flex:none}
.opp .art img{width:100%;height:100%;object-fit:cover}
.opp .m{flex:1;min-width:0}
.opp .m b{display:block;font-size:13px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.opp .m small{display:block;font-size:12px;color:var(--text-3);margin-top:2px}

/* 交接 */
.ho{display:flex;align-items:center;gap:12px;max-width:620px;padding:10px 10px 10px 12px;border-radius:12px;background:var(--raised);box-shadow:inset 0 0 0 1px var(--line)}
.ho .m{flex:1;min-width:0}
.ho .m b{display:block;font-size:13px;font-weight:500}
.ho .m small{display:block;font-size:12px;color:var(--text-3);margin-top:1px}
.ho-done{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-3)}
.ho-done .ic{width:14px;height:14px}

/* 附件小卡 */
.fchip{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 6px 0 4px;border-radius:10px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line-2);font-size:12px;max-width:240px}
.m-me .fchip{background:var(--raised)}
.fchip .th{width:32px;height:32px;border-radius:7px;background:var(--hover);display:grid;place-items:center;overflow:hidden;flex:none;color:var(--text-2)}
.fchip .th img{width:100%;height:100%;object-fit:cover}
.fchip .tx{min-width:0;display:flex;flex-direction:column;line-height:1.3}
.fchip .tx b{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fchip .tx small{color:var(--text-3);font-size:11px}

/* —— 输入框 —— */
.cmp-wrap{flex:none;padding:0 24px 16px;position:relative}
.cmp{max-width:744px;margin:0 auto;position:relative}
.cmp-box{position:relative;border-radius:var(--r-16);background:var(--raised);box-shadow:inset 0 0 0 1px var(--line-2);transition:box-shadow var(--d-2)}
[data-theme=light] .cmp-box{background:var(--panel);box-shadow:inset 0 0 0 1px var(--line-2),0 4px 16px rgba(0,0,0,.05)}
.cmp-box:focus-within{box-shadow:inset 0 0 0 1px var(--line-3)}
[data-theme=light] .cmp-box:focus-within{box-shadow:inset 0 0 0 1px var(--line-3),0 4px 16px rgba(0,0,0,.06)}
.cmp-box.drag{box-shadow:inset 0 0 0 1.5px var(--text-2)}
.cmp-att{display:flex;flex-wrap:wrap;gap:6px;padding:10px 10px 0}
.cmp-att .fchip .ib{margin-left:2px}
.cmp-ta{position:relative}
.cmp textarea{display:block;width:100%;min-height:52px;max-height:240px;padding:14px 16px 6px;font-size:15px;line-height:1.6;color:var(--text);overflow-y:auto}
.cmp textarea::placeholder{color:var(--text-3)}
.cmp .ghost{position:absolute;inset:0;padding:14px 16px 6px;font-size:15px;line-height:1.6;color:var(--text-3);pointer-events:none;white-space:pre-wrap;overflow:hidden}
.cmp-bar{display:flex;align-items:center;gap:4px;padding:6px 8px 8px}
.cmp-bar .sp{flex:1}
.agp{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 8px 0 6px;border-radius:8px;font-size:13px;font-weight:500;color:var(--text);transition:background var(--d-1)}
.agp:hover,.agp[aria-expanded=true]{background:var(--hover)}
.agp .ag{width:20px;height:20px;border-radius:6px}
.agp .ag .ic{width:12px;height:12px}
.agp .cv{width:14px;height:14px;color:var(--text-3)}
.modechip{display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 4px 0 8px;border-radius:7px;font-size:12px;color:var(--text-2);background:var(--hover)}
.modechip button{display:grid;place-items:center;width:18px;height:18px;border-radius:5px;color:var(--text-3)}
.modechip button:hover{color:var(--text);background:var(--active)}
.modechip .ic{width:12px;height:12px}
.send{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--grad);color:#fff;transition:background var(--d-1),opacity var(--d-1),transform var(--d-1),filter var(--d-1)}
.send .ic{width:18px;height:18px;stroke-width:2.2}
.send:disabled{background:var(--active);color:var(--text-3);opacity:1}
.send:not(:disabled):hover{transform:scale(1.04);filter:brightness(1.08)}
.send.stop{background:var(--inv);color:var(--on-inv)}
.send.stop .ic{width:14px;height:14px}
.cmp-hint{max-width:744px;margin:8px auto 0;text-align:center;font-size:11px;color:var(--text-4)}
[data-theme=light] .cmp-hint{color:var(--text-3)}
.rec{display:flex;align-items:center;gap:12px;padding:12px 14px 4px;font-size:13px;color:var(--text)}
.rec .lv{display:flex;align-items:center;gap:2px;height:24px;flex:1}
.rec .lv i{width:3px;border-radius:2px;background:var(--brand);height:4px;transition:height .08s}
.rec .tm{font-variant-numeric:tabular-nums;color:var(--text-2)}
.rec .dotr{width:8px;height:8px;border-radius:50%;background:var(--err);animation:blink 1s infinite}
@keyframes blink{50%{opacity:.25}}
/* 队列 */
.queue{max-width:744px;margin:0 auto 8px;border-radius:12px;background:var(--raised);box-shadow:inset 0 0 0 1px var(--line);padding:4px}
.queue .qh{display:flex;align-items:center;gap:8px;padding:6px 10px 2px;font-size:12px;color:var(--text-3)}
.queue .qi{display:flex;align-items:center;gap:8px;min-height:34px;padding:4px 4px 4px 10px;border-radius:8px;font-size:13px}
.queue .qi:hover{background:var(--hover)}
.queue .qi span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.queue .qi .ic.q{color:var(--text-3)}
/* 拖入文件 */
.dropzone{position:absolute;inset:8px;z-index:20;border-radius:12px;border:1.5px dashed var(--text-3);background:color-mix(in srgb,var(--panel) 88%,transparent);backdrop-filter:blur(4px);display:grid;place-items:center;text-align:center;pointer-events:none;animation:fadeIn var(--d-2)}
.dropzone b{display:block;font-size:15px;font-weight:500;margin-top:10px}
.dropzone small{font-size:12px;color:var(--text-3)}
.dropzone .ic{width:28px;height:28px;margin:0 auto;color:var(--text-2)}

/* —— 新建歌曲 —— */
.new{min-height:100%;display:flex;flex-direction:column;align-items:center;padding:max(64px,15vh) 24px 48px}
.new-in{width:100%;max-width:744px;display:flex;flex-direction:column;align-items:center}
.new .hi{font-size:14px;color:var(--text-3)}
.new h2{font:600 32px/1.25 var(--f-display);letter-spacing:-.02em;text-align:center;margin:8px 0 24px}
.new .seg{margin-bottom:16px;max-width:100%;overflow-x:auto}
.new .cmp-wrap{width:100%;padding:0}
.new .cmp textarea{min-height:96px}
.tpls{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:16px;max-width:744px}
.tpl{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:var(--r-full);box-shadow:inset 0 0 0 1px var(--line-2);font-size:13px;color:var(--text-2);max-width:100%;transition:color var(--d-1),box-shadow var(--d-1),background var(--d-1)}
.tpl span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tpl:hover,.tpl:focus-visible{color:var(--text);box-shadow:inset 0 0 0 1px var(--line-3);background:var(--hover)}
.tpl .ic{width:14px;height:14px;color:var(--text-3)}
.waitlist{width:100%;margin-top:40px}
.waitlist h3{font-size:12px;font-weight:500;color:var(--text-3);margin:0 0 8px 4px}
.todo-l{border-radius:12px;box-shadow:inset 0 0 0 1px var(--line)}
.todo-i{display:flex;align-items:center;gap:12px;padding:10px 12px;transition:background var(--d-1)}
.todo-i+.todo-i{border-top:1px solid var(--line)}
.todo-i:hover{background:var(--hover)}
.todo-i:first-child{border-radius:12px 12px 0 0}.todo-i:last-child{border-radius:0 0 12px 12px}.todo-i:only-child{border-radius:12px}
.todo-i .art{width:36px;height:36px;border-radius:8px;overflow:hidden;flex:none}
.todo-i .art img{width:100%;height:100%;object-fit:cover}
.todo-i .m{flex:1;min-width:0}
.todo-i .m b{display:block;font-size:13px;font-weight:500}
.todo-i .m small{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-3);margin-top:2px}

/* —— 普通页面（资料库 / 发行 / 收益 / 团队 / 机会 / 设置）—— */
.page{max-width:1080px;margin:0 auto;padding:28px 32px 64px}
.page-h{display:flex;align-items:flex-end;gap:16px;margin-bottom:24px}
.page-h h2{font:600 24px/1.3 var(--f-display);letter-spacing:-.02em}
.page-h p{font-size:13px;color:var(--text-2);margin-top:6px;max-width:560px}
.page-h .r{margin-left:auto;display:flex;align-items:center;gap:8px;flex:none}
.toolbar{display:flex;align-items:center;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.toolbar .search{position:relative;width:240px}
.toolbar .search .ic{position:absolute;left:10px;top:50%;margin-top:-8px;color:var(--text-3);pointer-events:none}
.toolbar .search .input{padding-left:32px;height:32px;font-size:13px}
.toolbar .sp{flex:1}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:24px}
.kpi{padding:16px;border-radius:12px;box-shadow:inset 0 0 0 1px var(--line);display:flex;flex-direction:column;gap:6px}
.kpi small{font-size:12px;color:var(--text-3)}
.kpi b{font:600 24px/1.2 var(--f-ui);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.kpi em{font-style:normal;font-size:12px;color:var(--text-3)}
.kpi em.up{color:var(--ok)}
.box{border-radius:12px;box-shadow:inset 0 0 0 1px var(--line);margin-bottom:16px}
.box-h{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 16px;border-bottom:1px solid var(--line)}
.box-h h3{font-size:14px;font-weight:600}
.box-h .r{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-3)}
.box-b{padding:16px}
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{height:36px;padding:0 12px;text-align:left;font-weight:400;font-size:12px;color:var(--text-3);border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{height:52px;padding:0 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr{transition:background var(--d-1)}
.tbl tbody tr.cl{cursor:pointer}
.tbl tbody tr.cl:hover{background:var(--hover)}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums}
.tbl .t{display:flex;align-items:center;gap:10px;min-width:0}
.tbl .t img{width:36px;height:36px;border-radius:8px;object-fit:cover;flex:none}
.tbl .t b{font-weight:500;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tbl .t small{font-size:12px;color:var(--text-3)}
.tbl .acts{width:1%;white-space:nowrap;text-align:right}
.tbl .acts .ib{opacity:0}
.tbl tr:hover .acts .ib,.tbl .acts .ib[aria-expanded=true]{opacity:1}
.grid{display:grid;gap:12px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(3,minmax(0,1fr))}.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.tile{display:flex;flex-direction:column;border-radius:12px;box-shadow:inset 0 0 0 1px var(--line);overflow:hidden;text-align:left;transition:box-shadow var(--d-1)}
.tile:hover{box-shadow:inset 0 0 0 1px var(--line-2)}
.tile .im{position:relative;aspect-ratio:16/9;background:var(--hover);overflow:hidden}
.tile .im img{width:100%;height:100%;object-fit:cover}
.tile .bd{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.tile .bd b{font-size:14px;font-weight:600}
.tile .bd p{font-size:13px;color:var(--text-2);line-height:1.6}
.tile .ft{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:10px;font-size:12px;color:var(--text-3)}
.tile .ft .btn{margin-left:auto}
.fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:16px}
.fcell{position:relative;display:flex;flex-direction:column;gap:8px;text-align:left;cursor:pointer}
.fcell .im{position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;background:var(--hover);display:grid;place-items:center;color:var(--text-3);box-shadow:inset 0 0 0 1px var(--line)}
.fcell .im img{width:100%;height:100%;object-fit:cover}
.fcell .im .ic{width:28px;height:28px}
.fcell .im .doc{padding:14px;font-size:11px;line-height:1.7;color:var(--text-3);white-space:pre-wrap;align-self:start;justify-self:start;height:100%;overflow:hidden;text-align:left}
.fcell b{font-size:13px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fcell small{font-size:12px;color:var(--text-3);margin-top:-6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fcell .ac{position:absolute;top:6px;right:6px;display:none;gap:2px}
.fcell:hover .ac,.fcell .ac:focus-within{display:flex}
.fcell .ac .ib{background:rgba(10,10,10,.6);color:#fff;backdrop-filter:blur(8px)}
.fcell .pb{position:absolute;left:8px;bottom:8px;width:32px;height:32px;border-radius:50%;background:rgba(10,10,10,.65);color:#fff;display:grid;place-items:center;opacity:0;transition:opacity var(--d-1)}
.fcell:hover .pb,.fcell .pb.playing{opacity:1}
.fcell .pb .ic{width:14px;height:14px}
.meter{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--text-3)}
.meter .bar{width:120px}
.meter .bar>i{background:var(--text-2)}

/* 柱状图 */
.chart{display:flex;align-items:flex-end;gap:6px;height:160px;padding-top:12px}
.chart .c{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;height:100%;justify-content:flex-end;position:relative}
.chart .c i{display:block;width:100%;max-width:44px;border-radius:4px 4px 2px 2px;background:var(--text-3);transition:background var(--d-1)}
.chart .c.cur i{background:var(--text)}
.chart .c:hover i{background:var(--text-2)}
.chart .c small{font-size:11px;color:var(--text-3);white-space:nowrap}
.chart .c .v{position:absolute;top:0;font-size:11px;color:var(--text);opacity:0;transition:opacity var(--d-1);white-space:nowrap;font-variant-numeric:tabular-nums}
.chart .c:hover .v{opacity:1}
.spark{display:flex;align-items:flex-end;gap:2px;height:40px}
.spark i{flex:1;border-radius:1.5px;background:var(--line-3);min-height:2px}
.spark i:last-child{background:var(--text-2)}

/* 团队 */
.agc{display:flex;flex-direction:column;gap:14px;padding:20px;border-radius:12px;box-shadow:inset 0 0 0 1px var(--line)}
.agc-h{display:flex;align-items:center;gap:12px}
.agc-h b{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600}
.agc-h small{display:block;font-size:12px;color:var(--text-3);margin-top:2px}
.agc p{font-size:13px;line-height:1.7;color:var(--text-2)}
.agc ul{display:flex;flex-direction:column;gap:6px}
.agc li{display:flex;gap:8px;font-size:13px;line-height:1.55;color:var(--text)}
.agc li .ic{width:14px;height:14px;margin-top:3px;color:var(--text-3)}
.agc .bound{font-size:12px;color:var(--text-3);line-height:1.6;padding-top:12px;border-top:1px solid var(--line)}
.agc .ft{display:flex;align-items:center;gap:8px;margin-top:auto}
.agc .ft small{font-size:12px;color:var(--text-3)}

/* 设置 */
.set{display:grid;grid-template-columns:200px minmax(0,1fr);gap:40px;max-width:960px;margin:0 auto;padding:28px 32px 64px}
.set-nav{display:flex;flex-direction:column;gap:1px;position:sticky;top:0;align-self:start}
.set-nav a{display:flex;align-items:center;gap:10px;height:34px;padding:0 10px;border-radius:8px;font-size:13px;color:var(--text-2)}
.set-nav a .ic{color:var(--text-3)}
.set-nav a:hover{background:var(--hover);color:var(--text)}
.set-nav a.on{background:var(--active);color:var(--text);font-weight:500}
.set-nav a.on .ic{color:var(--text)}
.set h2{font:600 20px/1.3 var(--f-display);letter-spacing:-.01em;margin-bottom:4px}
.set .lead{font-size:13px;color:var(--text-2);margin-bottom:20px}
.srow{display:flex;align-items:center;gap:24px;padding:16px 0;border-bottom:1px solid var(--line)}
.srow:last-child{border-bottom:0}
.srow .m{flex:1;min-width:0}
.srow .m b{display:block;font-size:14px;font-weight:500}
.srow .m small{display:block;font-size:12px;color:var(--text-3);margin-top:3px;line-height:1.55}
.srow .c{flex:none;display:flex;align-items:center;gap:8px}
.srow.col{flex-direction:column;align-items:stretch;gap:10px}
.sgroup{margin-bottom:32px}
.sgroup h3{font-size:12px;font-weight:500;color:var(--text-3);margin-bottom:4px}
.plancards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.planc{display:flex;flex-direction:column;gap:4px;padding:16px;border-radius:12px;box-shadow:inset 0 0 0 1px var(--line-2);text-align:left;transition:box-shadow var(--d-1)}
.planc:hover{box-shadow:inset 0 0 0 1px var(--line-3)}
.planc[aria-pressed=true]{box-shadow:inset 0 0 0 1.5px var(--text)}
.planc .nm{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600}
.planc .pr{font:600 24px/1.2 var(--f-ui);margin:6px 0 2px;font-variant-numeric:tabular-nums}
.planc .pr small{font-size:12px;font-weight:400;color:var(--text-3)}
.planc .ds{font-size:12px;color:var(--text-3);line-height:1.6}
.planc.cur{opacity:.55;pointer-events:none}

/* 搜索 */
.qk{width:min(640px,100%)!important;padding:0!important;overflow:hidden!important;display:flex;flex-direction:column;max-height:min(560px,calc(100vh - 120px))!important;align-self:start;margin-top:12vh}
.qk-i{display:flex;align-items:center;gap:10px;height:52px;padding:0 16px;border-bottom:1px solid var(--line);flex:none}
.qk-i .ic{color:var(--text-3)}
.qk-i input{flex:1;height:100%;font-size:15px}
.qk-t{display:flex;gap:4px;padding:8px 12px 4px;flex:none}
.qk-t .chip{height:26px;font-size:12px;border-color:transparent}
.qk-r{flex:1;overflow-y:auto;padding:4px 8px 8px}
.qk-g{padding:10px 8px 4px;font-size:12px;color:var(--text-3)}
.qk-it{display:flex;align-items:center;gap:10px;width:100%;min-height:40px;padding:6px 8px;border-radius:8px;text-align:left;font-size:13px}
.qk-it.on{background:var(--hover)}
.qk-it .th{width:28px;height:28px;border-radius:6px;overflow:hidden;flex:none;display:grid;place-items:center;background:var(--hover);color:var(--text-2)}
.qk-it .th img{width:100%;height:100%;object-fit:cover}
.qk-it .tx{flex:1;min-width:0}
.qk-it .tx b{display:block;font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qk-it .tx small{display:block;font-size:12px;color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qk-it mark{background:transparent;color:var(--brand);font-weight:500}
.qk-f{display:flex;align-items:center;gap:14px;padding:8px 16px;border-top:1px solid var(--line);font-size:11px;color:var(--text-3);flex:none}
.qk-f span{display:flex;align-items:center;gap:6px}
.dlg-root:has(.qk){place-items:start center}

/* 通知 */
.notif{width:360px;padding:0!important}
.notif-h{display:flex;align-items:center;justify-content:space-between;height:44px;padding:0 8px 0 14px;border-bottom:1px solid var(--line);font-size:13px;font-weight:600;position:sticky;top:0;background:var(--pop);z-index:1}
.notif-l{max-height:420px;overflow:auto;padding:4px}
.nt{display:flex;gap:10px;width:100%;padding:10px;border-radius:8px;text-align:left}
.nt:hover{background:var(--hover)}
.nt .ag,.nt .ic-w{flex:none;margin-top:1px}
.nt .ic-w{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;background:var(--hover);color:var(--text-2)}
.nt .ic-w .ic{width:14px;height:14px}
.nt .tx{flex:1;min-width:0}
.nt .tx b{display:block;font-size:13px;font-weight:500;line-height:1.4}
.nt .tx p{font-size:12px;color:var(--text-2);line-height:1.5;margin-top:2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nt .tx small{display:block;font-size:11px;color:var(--text-3);margin-top:4px}
.nt .u{width:7px;height:7px;border-radius:50%;background:var(--brand);flex:none;margin-top:6px}
.nt.read .tx b{font-weight:400;color:var(--text-2)}

/* 播放条 */
.pbar{grid-column:2;grid-row:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) minmax(0,1fr);align-items:center;gap:16px;height:68px;padding:0 16px 0 8px;animation:pbIn var(--d-3) var(--e-out)}
.app.sb-off .pbar{padding-left:16px}
@keyframes pbIn{from{transform:translateY(100%)}}
.pb-now{display:flex;align-items:center;gap:12px;min-width:0}
.pb-now .art{width:44px;height:44px;border-radius:8px;overflow:hidden;flex:none;background:var(--hover)}
.pb-now .art img{width:100%;height:100%;object-fit:cover}
.pb-now .tx{min-width:0}
.pb-now b{display:block;font-size:13px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pb-now small{display:block;font-size:12px;color:var(--text-3);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pb-mid{display:flex;flex-direction:column;align-items:center;gap:4px}
.pb-ctl{display:flex;align-items:center;gap:8px}
.pb-ctl .pp{width:34px;height:34px;border-radius:50%;background:var(--inv);color:var(--on-inv);display:grid;place-items:center;transition:transform var(--d-1)}
.pb-ctl .pp:hover{transform:scale(1.05)}
.pb-ctl .pp .ic{width:16px;height:16px}
.pb-line{display:flex;align-items:center;gap:10px;width:100%;max-width:560px;font-size:11px;color:var(--text-3);font-variant-numeric:tabular-nums}
.prog{--p:0;position:relative;flex:1;height:14px;cursor:pointer;display:flex;align-items:center}
.prog::before{content:'';position:absolute;left:0;right:0;height:3px;border-radius:3px;background:var(--line-3)}
.prog::after{content:'';position:absolute;left:0;width:calc(var(--p) * 100%);height:3px;border-radius:3px;background:var(--text)}
.prog:hover::after{background:var(--brand)}
.prog i{position:absolute;left:calc(var(--p) * 100%);width:11px;height:11px;margin-left:-5.5px;border-radius:50%;background:var(--text);opacity:0;transition:opacity var(--d-1);z-index:1}
.prog:hover i{opacity:1}
.pb-r{display:flex;align-items:center;justify-content:flex-end;gap:4px}
.vol{--p:.8;flex:none;width:96px}
.vol::after{width:calc(var(--p) * 100%)}

/* 移动端抽屉遮罩 */
.scrim{position:fixed;inset:0;z-index:40;background:var(--scrim);animation:fadeIn var(--d-2)}

/* —— 响应式 —— */
@media (max-width:1200px){
  .rp{position:absolute;right:16px;top:16px;bottom:16px;z-index:30;box-shadow:var(--pop-shadow)}
  .app:not(.has-player) .rp{bottom:16px}
  .rp-resize{display:none}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .app{grid-template-columns:0 minmax(0,1fr)!important}
  .sb{position:fixed;left:0;top:0;bottom:0;z-index:50;width:280px;background:var(--stage);transform:translateX(-100%);transition:transform var(--d-3) var(--e-out);visibility:visible!important;box-shadow:none}
  .app.drawer .sb{transform:none;box-shadow:16px 0 48px rgba(0,0,0,.4)}
  .work{padding:0!important;gap:0}
  .mh .sbt{display:none}.mh .sbt.mob{display:inline-grid}
  .main{border-radius:0;box-shadow:none}
  .rp{position:fixed;inset:0;width:auto!important;border-radius:0;z-index:45}
  .pbar{grid-template-columns:minmax(0,1fr) auto;height:60px;padding:0 12px;border-top:1px solid var(--line);background:var(--panel)}
  .pb-mid .pb-line,.pb-r .vol,.pb-r .ib.mute{display:none}
  .pb-mid{order:2}
  .thread-in{padding:16px 16px 32px}
  .cmp-wrap{padding:0 12px 12px}
  .page{padding:20px 16px 48px}
  .set{grid-template-columns:1fr;gap:16px;padding:20px 16px 48px}
  .set-nav{flex-direction:row;overflow-x:auto;position:static;margin:0 -16px;padding:0 16px 4px}
  .set-nav a{flex:none;white-space:nowrap}
  .g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .plancards{grid-template-columns:1fr}
}
@media (max-width:600px){
  .trks{grid-template-columns:1fr}
  .new{padding-top:40px}
  .new h2{font-size:26px}
  .new .seg{max-width:calc(100vw - 32px)}
  .new .seg>button{padding:0 8px}
  .kpis{gap:8px}.kpi{padding:12px}.kpi b{font-size:20px}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .rel-grid{grid-template-columns:1fr}
  .page-h{flex-direction:column;align-items:flex-start}
  .page-h .r{margin-left:0}
  .mh h1 .no{display:none}
  .tbl .hide-s{display:none}
}

/* ===== 2026-10-24 动效优化（来自 _preview/wb-lab.html 01/02/03/04/06/07） ===== */
@property --ang{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes angSpin{to{--ang:360deg}}
@keyframes snAura{0%,100%{background-position:50% 50%}33%{background-position:20% 70%}66%{background-position:80% 30%}}
/* 01 输入框：聚焦时蓝绿流光描边；发送按钮可用时弹出 + 流光底 */
.cmp-box{--cmpbg:var(--raised);background:linear-gradient(var(--cmpbg),var(--cmpbg)) padding-box,linear-gradient(var(--line-2),var(--line-2)) border-box;border:1px solid transparent;box-shadow:none}
[data-theme=light] .cmp-box{--cmpbg:var(--panel);box-shadow:0 4px 16px rgba(0,0,0,.05)}
.cmp-box:focus-within{background:linear-gradient(var(--cmpbg),var(--cmpbg)) padding-box,conic-gradient(from var(--ang),#2F7BFF,#1FD1A5 25%,var(--line-2) 45%,var(--line-2) 70%,#2F7BFF) border-box;animation:angSpin 4s linear infinite;box-shadow:0 0 0 4px rgba(31,209,165,.07),0 12px 40px -12px rgba(47,123,255,.35)}
[data-theme=light] .cmp-box:focus-within{box-shadow:0 0 0 4px rgba(31,209,165,.1),0 8px 24px -10px rgba(47,123,255,.3)}
.cmp-box.drag{background:linear-gradient(var(--cmpbg),var(--cmpbg)) padding-box,linear-gradient(var(--text-2),var(--text-2)) border-box}
.send[data-c=send]:not(:disabled){background:var(--aura);background-size:180% 180%;animation:snAura 6s ease-in-out infinite}
.send[data-c=send]:not(:disabled):hover{transform:scale(1.06);filter:none;box-shadow:0 0 0 6px rgba(31,209,165,.12)}
.send.pop{animation:sendPop .38s var(--e-out),snAura 6s ease-in-out infinite}
@keyframes sendPop{0%{transform:scale(.7)}60%{transform:scale(1.12)}100%{transform:scale(1)}}
/* 02 灵感模板：错落进场 + 悬停渐变底 */
.tpl{position:relative;overflow:hidden;isolation:isolate;transition:color var(--d-2),box-shadow var(--d-2),transform var(--d-2) var(--e-out)}
.tpl .ic{transition:transform var(--d-2) var(--e-out),color var(--d-2)}
.tpl::before{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;background:linear-gradient(110deg,rgba(47,123,255,.16),rgba(31,209,165,.16));opacity:0;transition:opacity var(--d-2)}
.tpl:hover,.tpl:focus-visible{color:var(--text);box-shadow:inset 0 0 0 1px rgba(31,209,165,.45);background:transparent;transform:translateY(-1px)}
.tpl:hover::before,.tpl:focus-visible::before{opacity:1}
.tpl:hover .ic,.tpl:focus-visible .ic{transform:translate(2px,-2px);color:var(--brand)}
.tpls-in .tpl{opacity:0;transform:translateY(8px);animation:tplIn .5s var(--e-out) forwards}
@keyframes tplIn{to{opacity:1;transform:none}}
/* 03 AI 团队卡：跟随鼠标的员工色光斑 + 描边 */
.agc{position:relative;isolation:isolate;--mx:50%;--my:0%;transition:transform var(--d-3) var(--e-out),box-shadow var(--d-3)}
.agc::before{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;background:radial-gradient(420px 220px at var(--mx) var(--my),color-mix(in srgb,var(--c) 14%,transparent),transparent 70%);opacity:0;transition:opacity var(--d-3);pointer-events:none}
.agc::after{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;background:radial-gradient(260px 180px at var(--mx) var(--my),color-mix(in srgb,var(--c) 70%,transparent),transparent 70%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity var(--d-3)}
.agc:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px var(--line-2),0 18px 40px -20px color-mix(in srgb,var(--c) 60%,transparent)}
.agc:hover::before,.agc:hover::after{opacity:1}
.agc .agc-h .ag{transition:transform var(--d-3) var(--e-out)}
.agc:hover .agc-h .ag{transform:scale(1.06) rotate(-4deg)}
.agc .ft .btn{transition:background var(--d-2),color var(--d-2),border-color var(--d-2)}
.agc:hover .ft .btn{background:var(--c);border-color:transparent;color:#05070A}
/* 04 数据卡：数字滚动后扫光、迷你柱生长、额度进度条 */
.kpi{position:relative;overflow:hidden;transition:box-shadow var(--d-2)}
.kpi:hover{box-shadow:inset 0 0 0 1px var(--line-2)}
.kpi.shine b{background:linear-gradient(90deg,var(--text),var(--text) 40%,var(--kpi-hl,#9FF0DA) 50%,var(--text) 60%,var(--text));background-size:250% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;color:transparent;animation:numShine 1.4s var(--e-out) .1s forwards}
[data-theme=light]{--kpi-hl:#14A884}
@keyframes numShine{to{background-position:0 0}}
.kpi .spark i{background:linear-gradient(180deg,rgba(31,209,165,.55),rgba(47,123,255,.25));transform-origin:bottom;transform:scaleY(0);animation:barUp .7s var(--e-out) forwards}
.kpi .spark i:last-child{background:var(--grad)}
@keyframes barUp{to{transform:scaleY(1)}}
.quota-meter{height:4px;border-radius:2px;background:var(--active);overflow:hidden;margin-top:2px}
.quota-meter i{display:block;height:100%;border-radius:inherit;background:var(--grad);width:0;transition:width 1.1s var(--e-out)}
/* 06 机会卡：上浮 + 封面放大 + 临近截止橙点 */
.tile{transition:transform var(--d-3) var(--e-out),box-shadow var(--d-3)}
.tile .im img{transition:transform .6s var(--e-out)}
.tile:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px var(--line-2),0 20px 44px -22px rgba(31,209,165,.45)}
.tile:hover .im img{transform:scale(1.06)}
.tile .im::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,color-mix(in srgb,var(--panel) 85%,transparent));pointer-events:none}
.tile .dl{display:inline-flex;align-items:center;gap:5px}
.tile .dl.hot{color:#FFB224}
[data-theme=light] .tile .dl.hot{color:#C77800}
.tile .dl.hot::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;animation:hotPulse 1.6s infinite}
@keyframes hotPulse{0%{box-shadow:0 0 0 0 rgba(255,178,36,.6)}100%{box-shadow:0 0 0 7px rgba(255,178,36,0)}}
.tile .ft .btn{transition:background var(--d-2),border-color var(--d-2),color var(--d-2)}
.tile:hover .ft .btn{background:var(--grad);border-color:transparent;color:#fff}
/* 07 侧栏：选中底色滑动 + 品牌色短竖线；新建歌曲悬停流光 */
.sb-new{position:relative;overflow:hidden;isolation:isolate;transition:box-shadow var(--d-2),color var(--d-2)}
.sb-new::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--aura);background-size:200% 200%;opacity:0;transition:opacity var(--d-2);animation:snAura 6s ease-in-out infinite}
.sb-new:hover{box-shadow:none;color:#fff}
.sb-new:hover::before{opacity:1}
.sb-new:hover .kbd{color:#fff;background:rgba(255,255,255,.18);box-shadow:none}
.sb-nav{position:relative}
.sb-nav .ind{position:absolute;left:0;right:0;top:0;height:34px;border-radius:8px;background:var(--sb-on);transition:transform var(--d-3) var(--e-out),opacity var(--d-2);pointer-events:none;opacity:0}
.sb-nav .ind.on{opacity:1}
.sb-nav .ind::before{content:'';position:absolute;left:0;top:9px;bottom:9px;width:2px;border-radius:2px;background:var(--grad)}
.sb-nav.has-ind .sb-item.on{background:none}
.sb-nav .sb-item.on .ic{color:var(--brand)}
.sb-nav .sb-item .ic{transition:color var(--d-1),transform var(--d-2) var(--e-out)}
.sb-nav .sb-item:hover .ic{transform:translateX(1px)}
@media (prefers-reduced-motion:reduce){
  .cmp-box:focus-within,.send.pop,.send[data-c=send]:not(:disabled),.sb-new::before{animation:none}
  .tpls-in .tpl{opacity:1;transform:none;animation:none}
  .kpi .spark i{transform:none;animation:none}
  .kpi.shine b{animation:none;color:var(--text);background:none}
  .agc,.tile,.sb-nav .ind,.tile .im img{transition:none}
  .tile .dl.hot::before{animation:none}
}