:root{
  --bg:#12100E; --panel:#1B1815; --panel2:#221E1A; --panel3:#2A2521;
  --line:#2E2823; --line2:#3A332C;
  --cream:#F3EDE3; --dim:#A79E92; --dim2:#6F675D;
  --gold:#D2A15F; --gold2:#9A743C; --gold3:#E4C08A;
  --green:#7E9E72; --red:#C2604F; --blue:#6C86A8; --violet:#9A7FA8;
  --r:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg); color:var(--cream);
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:14px; line-height:1.55; -webkit-font-smoothing:antialiased;
  display:flex; overflow:hidden;
}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:#332D27;border-radius:9px}
::-webkit-scrollbar-track{background:transparent}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
input[type=text],input[type=search],select,textarea{
  background:var(--panel2);border:1px solid var(--line2);border-radius:9px;padding:8px 11px;outline:none;
}
input:focus,select:focus,textarea:focus{border-color:var(--gold2)}

/* ---------- 侧栏 ---------- */
.side{width:216px;flex:0 0 216px;background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:18px 12px}
.brand{display:flex;align-items:center;gap:10px;padding:0 8px 18px}
.brand .mk{width:34px;height:34px;border-radius:10px;flex:0 0 34px;background:linear-gradient(145deg,#D2A15F,#8A5F2E);display:grid;place-items:center;font-size:17px;color:#1B1815;font-weight:700}
.brand b{display:block;font-size:14.5px;letter-spacing:.3px}
.brand span{display:block;font-size:11px;color:var(--dim2);letter-spacing:.5px}
.navlabel{font-size:10.5px;color:var(--dim2);letter-spacing:1.4px;padding:14px 10px 6px}
.navitem{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;color:var(--dim);cursor:pointer;font-size:13.5px;transition:.14s;position:relative}
.navitem:hover{background:var(--panel2);color:var(--cream)}
.navitem.on{background:var(--panel3);color:var(--cream)}
.navitem.on:before{content:'';position:absolute;left:0;top:9px;bottom:9px;width:2.5px;border-radius:2px;background:var(--gold)}
.navitem i{width:16px;text-align:center;font-style:normal;font-size:13px;opacity:.85}
.navitem .badge{margin-left:auto;font-size:10.5px;background:var(--red);color:#fff;border-radius:9px;padding:1px 6px}
.sidefoot{margin-top:auto;padding:10px 8px 0;border-top:1px solid var(--line)}
.bind{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--dim)}
.dot{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(126,158,114,.16)}
.dot.off{background:var(--red);box-shadow:0 0 0 3px rgba(194,96,79,.16)}

/* ---------- 主区 ---------- */
.main{flex:1;display:flex;flex-direction:column;overflow:hidden}
.top{height:58px;flex:0 0 58px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px;padding:0 22px;background:var(--panel)}
.top h1{font-size:16px;font-weight:600;letter-spacing:.3px}
.top .sub{font-size:12px;color:var(--dim2)}
.spacer{flex:1}
.pill{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:20px;background:var(--panel2);border:1px solid var(--line);font-size:12px;color:var(--dim);white-space:nowrap}
.pill b{color:var(--cream);font-weight:600}
.pill.gold{border-color:var(--gold2);color:var(--gold)}
.pill.green{border-color:#3E5A38;color:var(--green)}
.pill.red{border-color:#5C3730;color:#D9836F}
.btn{padding:8px 15px;border-radius:9px;background:var(--panel3);border:1px solid var(--line2);font-size:13px;transition:.14s;white-space:nowrap}
.btn:hover{background:#332C26;border-color:#4A4239}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.pri{background:linear-gradient(145deg,#D2A15F,#B4833F);color:#1B1815;font-weight:600;border-color:transparent}
.btn.pri:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent}
.btn.sm{padding:5px 11px;font-size:12px;border-radius:8px}
.btn.danger{border-color:#5C3730;color:#D9836F}
.content{flex:1;overflow-y:auto;padding:22px}
.page{display:none}
.page.on{display:block;animation:fade .22s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px}
.card h3{font-size:13.5px;font-weight:600;letter-spacing:.3px;margin-bottom:14px;display:flex;align-items:center;gap:8px}
.card h3 .k{font-size:10.5px;color:var(--dim2);font-weight:400;letter-spacing:.6px}
.grid2{display:grid;grid-template-columns:1.55fr 1fr;gap:16px;align-items:start}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.row{display:flex;align-items:center;gap:10px}
.muted{color:var(--dim);font-size:12.5px}
.tiny{font-size:11.5px;color:var(--dim2)}
.tag{display:inline-block;padding:2px 8px;border-radius:6px;font-size:11px;background:var(--panel3);color:var(--dim);border:1px solid var(--line2)}
.tag.gold{background:rgba(210,161,95,.12);color:var(--gold);border-color:rgba(210,161,95,.28)}
.tag.green{background:rgba(126,158,114,.12);color:var(--green);border-color:rgba(126,158,114,.28)}
.tag.red{background:rgba(194,96,79,.13);color:#D9836F;border-color:rgba(194,96,79,.3)}
.tag.blue{background:rgba(108,134,168,.13);color:#8FA6C2;border-color:rgba(108,134,168,.3)}
.tag.violet{background:rgba(154,127,168,.13);color:#B49BC0;border-color:rgba(154,127,168,.3)}

/* 空状态 */
.empty{text-align:center;padding:48px 20px;color:var(--dim2)}
.empty .ic{font-size:38px;opacity:.5;margin-bottom:14px}
.empty h4{font-size:15px;color:var(--cream);font-weight:600;margin-bottom:8px}
.empty p{font-size:13px;max-width:460px;margin:0 auto 16px;line-height:1.75}

/* ---------- 播放台 ---------- */
.np{display:flex;gap:20px;align-items:center}
.art{width:124px;height:124px;flex:0 0 124px;border-radius:12px;position:relative;overflow:hidden;
  background:linear-gradient(150deg,#3A2E22,#5C4630 45%,#2A2419);
  box-shadow:0 12px 30px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.05)}
.art:after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 30% 25%,rgba(210,161,95,.5),transparent 60%),radial-gradient(circle at 75% 80%,rgba(126,158,114,.35),transparent 55%)}
.art .veil{position:absolute;inset:0;display:grid;place-items:center;z-index:2;font-size:30px;opacity:.92;text-shadow:0 2px 12px rgba(0,0,0,.6)}
.npinfo{flex:1;min-width:0}
.npinfo .now{font-size:10.5px;letter-spacing:2px;color:var(--gold);margin-bottom:7px}
.npinfo .ti{font-size:23px;font-weight:600;letter-spacing:.4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.npinfo .ar{font-size:13px;color:var(--dim);margin-top:3px}
.tags{margin-top:11px;display:flex;gap:6px;flex-wrap:wrap}
.bar{margin-top:16px;height:5px;border-radius:5px;background:var(--panel3);position:relative;cursor:pointer}
.bar .fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:5px;background:linear-gradient(90deg,#B4833F,#E4C08A)}
.bar .knob{position:absolute;top:50%;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;background:#F3EDE3;box-shadow:0 1px 6px rgba(0,0,0,.6);left:0}
.times{display:flex;justify-content:space-between;font-size:11px;color:var(--dim2);margin-top:7px;font-variant-numeric:tabular-nums}
.ctrl{display:flex;align-items:center;gap:12px;margin-top:14px}
.cbtn{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--panel3);border:1px solid var(--line2);font-size:14px;transition:.14s}
.cbtn:hover{background:#37302A}
.cbtn.play{width:50px;height:50px;background:linear-gradient(145deg,#D2A15F,#B4833F);color:#1B1815;font-size:17px;border:none}
.wave{display:flex;align-items:flex-end;gap:2.5px;height:26px;margin-left:auto}
.wave i{width:3px;background:var(--gold2);border-radius:2px;height:20%}
.wave.on i{animation:w .9s ease-in-out infinite}
@keyframes w{0%,100%{height:18%}50%{height:100%}}

.timeline{display:flex;flex-direction:column;gap:9px}
.slot{display:flex;gap:11px;align-items:flex-start;padding:10px 12px;border-radius:10px;background:var(--panel2);border:1px solid transparent;transition:.15s}
.slot.cur{border-color:var(--gold2);background:rgba(210,161,95,.07)}
.slot .h{font-size:11px;color:var(--dim2);font-variant-numeric:tabular-nums;flex:0 0 78px;padding-top:1px}
.slot .pl{font-size:13.5px;font-weight:500}
.slot .meta{font-size:11.5px;color:var(--dim2);margin-top:2px}
.slot.cur .h{color:var(--gold)}
.live{font-size:10px;background:var(--red);color:#fff;border-radius:5px;padding:1px 6px;margin-left:6px;vertical-align:1px}
.slot .edit{margin-left:auto;opacity:0;transition:.14s}
.slot:hover .edit{opacity:1}

.queue{display:flex;flex-direction:column;gap:2px}
.qitem{display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:9px;font-size:13px;color:var(--dim);transition:.14s}
.qitem:hover{background:var(--panel2);color:var(--cream)}
.qitem.act{background:var(--panel2);color:var(--cream)}
.qitem .n{width:18px;font-size:11px;color:var(--dim2);font-variant-numeric:tabular-nums;text-align:right}
.qitem .t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qitem .d{font-size:11px;color:var(--dim2);font-variant-numeric:tabular-nums}
.qitem .qa{opacity:0;display:flex;gap:5px;transition:.14s}
.qitem:hover .qa{opacity:1}

/* ---------- 表格 ---------- */
table{width:100%;border-collapse:collapse;font-size:13px;table-layout:fixed}
th{text-align:left;font-size:11px;letter-spacing:.7px;color:var(--dim2);font-weight:500;padding:0 12px 10px;border-bottom:1px solid var(--line)}
td{padding:9px 12px;border-bottom:1px solid #241F1B;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
thead th{position:sticky;top:0;background:var(--panel);z-index:2}
tbody tr{transition:.12s}
tbody tr:hover{background:var(--panel2)}
tbody tr:hover td{color:var(--cream)}
td .nm{color:var(--cream);font-weight:500;display:block;overflow:hidden;text-overflow:ellipsis}
td.num{font-variant-numeric:tabular-nums;text-align:right}
td .acts{display:flex;gap:4px;justify-content:flex-end}
.rowsel{background:rgba(210,161,95,.07)!important}

/* ---------- 周歌单 ---------- */
.weekgrid{display:grid;grid-template-columns:76px repeat(7,1fr);gap:6px;min-width:880px}
.wg-h{font-size:11.5px;color:var(--dim2);text-align:center;padding:8px 0;letter-spacing:.4px}
.wg-h.today{color:var(--gold);font-weight:600}
.wg-h small{display:block;font-size:10px;opacity:.7}
.wg-r{font-size:11px;color:var(--dim2);display:flex;align-items:center;font-variant-numeric:tabular-nums;padding-left:2px}
.wg-r small{display:block;font-size:9.5px;opacity:.6}
.cell{background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:8px 9px;min-height:56px;cursor:pointer;transition:.14s;position:relative}
.cell:hover{border-color:var(--line2);background:var(--panel3)}
.cell .cn{font-size:12.5px;color:var(--cream);line-height:1.35}
.cell .cm{font-size:10.5px;color:var(--dim2);margin-top:3px}
.cell.today{border-color:rgba(210,161,95,.4)}
.cell.today:after{content:'';position:absolute;top:8px;right:8px;width:5px;height:5px;border-radius:50%;background:var(--gold)}
.cell.empty .cn{color:var(--dim2);font-size:12px}
.cell.cur{background:rgba(210,161,95,.09);border-color:var(--gold2)}
.wg-wrap{overflow-x:auto;padding-bottom:4px}

/* ---------- 节日卡 ---------- */
.fest{display:flex;flex-direction:column;gap:10px;position:relative;overflow:hidden}
.fest .em{font-size:22px}
.fest .fn{font-size:14.5px;font-weight:600}
.fest .fm{font-size:11.5px;color:var(--dim2)}
.fest .fpl{font-size:12.5px;color:var(--dim);background:var(--panel2);border-radius:8px;padding:8px 10px;border-left:2px solid var(--gold2)}
.fest.armed{border-color:rgba(210,161,95,.45);background:linear-gradient(180deg,rgba(210,161,95,.06),transparent)}
.sw{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--dim);margin-top:auto}
.switch{width:38px;height:21px;border-radius:12px;background:var(--panel3);border:1px solid var(--line2);position:relative;transition:.16s;flex:0 0 38px;cursor:pointer}
.switch:after{content:'';position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;background:var(--dim2);transition:.16s}
.switch.on{background:rgba(210,161,95,.25);border-color:var(--gold2)}
.switch.on:after{left:19px;background:var(--gold)}

/* ---------- 导出 ---------- */
.tabs{display:flex;gap:4px;background:var(--panel2);padding:4px;border-radius:11px;border:1px solid var(--line);width:fit-content}
.tab{padding:7px 15px;border-radius:8px;font-size:13px;color:var(--dim);transition:.14s;cursor:pointer}
.tab:hover{color:var(--cream)}
.tab.on{background:var(--panel3);color:var(--cream)}
.opt{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:9px;background:var(--panel2);border:1px solid var(--line);font-size:12.5px;color:var(--dim);cursor:pointer;transition:.14s}
.opt:hover{border-color:var(--line2)}
.opt.on{border-color:var(--gold2);color:var(--cream);background:rgba(210,161,95,.06)}
.opt .box{width:15px;height:15px;border-radius:4px;border:1.5px solid var(--line2);display:grid;place-items:center;font-size:10px;color:transparent;flex:0 0 15px}
.opt.on .box{background:var(--gold);border-color:var(--gold);color:#1B1815}
.prog{height:6px;border-radius:6px;background:var(--panel3);overflow:hidden;margin-top:14px;display:none}
.prog.on{display:block}
.prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,#B4833F,#E4C08A);transition:width .3s}
.code{background:#0D0B0A;border:1px solid var(--line);border-radius:9px;padding:11px 13px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11.5px;color:#B9AD9C;overflow-x:auto;white-space:pre;line-height:1.7}
.code .c{color:#6F675D}.code .k{color:var(--gold)}.code .g{color:var(--green)}

/* ---------- 弹层 ---------- */
.modal{position:fixed;inset:0;background:rgba(8,6,5,.72);display:none;place-items:center;z-index:60;backdrop-filter:blur(3px)}
.modal.on{display:grid}
.mbox{background:var(--panel);border:1px solid var(--line2);border-radius:16px;padding:22px;width:560px;max-width:92vw;max-height:86vh;overflow:auto;box-shadow:0 30px 70px rgba(0,0,0,.6)}
.mbox h3{font-size:15px;margin-bottom:4px}
.mbox .mh{margin-bottom:16px}
.toast{position:fixed;left:50%;bottom:32px;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:var(--panel3);border:1px solid var(--gold2);color:var(--cream);padding:11px 20px;border-radius:11px;font-size:13px;z-index:90;transition:.26s;box-shadow:0 14px 40px rgba(0,0,0,.5);max-width:80vw;text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}
.note{border-left:2px solid var(--gold2);background:rgba(210,161,95,.05);padding:11px 14px;border-radius:0 9px 9px 0;font-size:12.5px;color:var(--dim);line-height:1.75}
.note.warn{border-left-color:var(--red);background:rgba(194,96,79,.06)}
.note.warn b{color:#D9836F}
hr.sep{border:none;border-top:1px solid var(--line);margin:16px 0}
.loading{display:inline-block;width:13px;height:13px;border:2px solid var(--line2);border-top-color:var(--gold);border-radius:50%;animation:spin .7s linear infinite;vertical-align:-2px}
@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:1180px){.grid2{grid-template-columns:1fr}.grid3{grid-template-columns:1fr 1fr}}