:root{
  --ink:#1B1A17; --ink2:#4A473F; --muted:#7A766D; --line:#E5E2DA; --line2:#EFECE5;
  --bg:#F6F5F1; --card:#FFFFFF; --accent:#B4751C; --accent2:#8A5710; --accent-soft:#FCF3E3;
  --blue:#1D5C96; --blue-soft:#EDF4FB; --red:#A33A32; --red-soft:#FBEDEB;
  --green:#2F6B4F; --green-soft:#EAF4EE;
  --r:10px; --shadow:0 1px 2px rgba(27,26,23,.04), 0 8px 24px rgba(27,26,23,.05);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Microsoft YaHei","PingFang SC","Hiragino Sans GB",system-ui,-apple-system,sans-serif;
  font-size:14px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
a{color:var(--accent2); text-decoration:none}
.hidden{display:none !important}
button{font-family:inherit}

/* ---------- 登录 ---------- */
.login{min-height:100%; display:flex; align-items:center; justify-content:center; padding:24px}
.login-box{width:340px; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:30px 28px; box-shadow:var(--shadow)}
.brand{display:flex; align-items:center; gap:11px; margin-bottom:22px}
.brand .logo{width:38px; height:38px; border-radius:10px; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-size:19px; font-weight:600}
.brand b{display:block; font-size:16px; letter-spacing:.02em}
.brand i{display:block; font-style:normal; font-size:12px; color:var(--muted)}
.brand.small{margin:0 0 20px; padding:0 4px}
.brand.small .logo{width:32px; height:32px; font-size:16px; border-radius:9px}
.brand.small b{font-size:14px}
label{display:block; font-size:12.5px; color:var(--ink2); margin-bottom:14px}
input,select,textarea{
  width:100%; margin-top:6px; padding:9px 11px; border:1px solid var(--line);
  border-radius:8px; background:#FCFBF8; color:var(--ink); font-size:13.5px; font-family:inherit;
  outline:none; transition:border-color .15s, background .15s;
}
input:focus,select:focus,textarea:focus{border-color:#D8B77E; background:#fff}
textarea{resize:vertical; min-height:90px; line-height:1.6; font-family:Consolas,Menlo,monospace; font-size:12.5px}
.hint{font-size:12px; color:var(--muted); margin:14px 0 0; text-align:center}

/* ---------- 布局 ---------- */
.layout{display:grid; grid-template-columns:212px minmax(0,1fr); min-height:100%}
.side{background:#FBFAF6; border-right:1px solid var(--line); padding:20px 12px; display:flex; flex-direction:column; position:sticky; top:0; height:100vh}
.side nav{display:flex; flex-direction:column; gap:2px; flex:1; overflow:auto}
.side nav a{
  display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:7px;
  color:var(--ink2); font-size:13.5px; cursor:pointer; user-select:none;
}
.side nav a:hover{background:#F1EFE8; color:var(--ink)}
.side nav a.on{background:var(--accent-soft); color:var(--accent2); font-weight:600}
.side nav a .dot{width:6px; height:6px; border-radius:50%; background:#D6D2C8}
.side nav a.on .dot{background:var(--accent)}
.side nav .grp{font-size:10.5px; letter-spacing:.12em; color:#A9A498; padding:14px 10px 5px; text-transform:uppercase}
.side-foot{border-top:1px solid var(--line); padding:12px 6px 2px; font-size:11.5px; color:var(--muted)}
.side-foot .mini{display:block; margin-top:6px; font-size:11.5px}

.main{padding:22px 28px 60px; min-width:0}
.topbar{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:20px}
.topbar h1{font-size:19px; margin:0 0 2px; font-weight:600; letter-spacing:.01em}
.topbar .sub{margin:0; font-size:12.5px; color:var(--muted)}
.top-actions{display:flex; align-items:center; gap:10px}
.save-state{font-size:12px; color:var(--green); opacity:0; transition:opacity .2s}
.save-state.show{opacity:1}

/* ---------- 通用 ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:7px 13px; border-radius:7px; border:1px solid var(--line); background:var(--card);
  color:var(--ink); font-size:13px; cursor:pointer; white-space:nowrap; transition:all .15s;
}
.btn:hover{border-color:#D6D2C8; background:#FCFBF8}
.btn:disabled{opacity:.5; cursor:not-allowed}
.btn.primary{background:var(--accent); border-color:var(--accent); color:#fff}
.btn.primary:hover{background:#A2670F; border-color:#A2670F}
.btn.ghost{background:transparent}
.btn.danger{color:var(--red); border-color:#EAD3CF}
.btn.danger:hover{background:var(--red-soft)}
.btn.sm{padding:4px 9px; font-size:12px}
.btn.block{width:100%; padding:10px}
.row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.row.end{justify-content:flex-end}
.grow{flex:1; min-width:0}
.sp{flex:1}

.card{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:18px; box-shadow:var(--shadow)}
.card + .card{margin-top:14px}
.card h2{font-size:14.5px; margin:0 0 4px; font-weight:600}
.card .desc{font-size:12.5px; color:var(--muted); margin:0 0 14px}
.grid{display:grid; gap:12px}
.grid.k4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid.k3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.k2{grid-template-columns:repeat(2,minmax(0,1fr))}
.metric{background:#FBFAF6; border:1px solid var(--line2); border-radius:9px; padding:13px 15px}
.metric .k{font-size:11.5px; color:var(--muted); letter-spacing:.03em}
.metric .v{font-size:23px; font-weight:600; margin-top:3px; font-variant-numeric:tabular-nums; line-height:1.2}
.metric .x{font-size:11.5px; color:var(--muted); margin-top:2px}
.metric.warn .v{color:var(--red)}

table{width:100%; border-collapse:collapse; font-size:13px}
th{text-align:left; font-weight:600; font-size:11.5px; color:var(--muted); padding:8px 10px; border-bottom:1px solid var(--line); white-space:nowrap; letter-spacing:.02em}
td{padding:9px 10px; border-bottom:1px solid var(--line2); vertical-align:middle}
tr:last-child td{border-bottom:none}
tbody tr:hover{background:#FCFBF7}
td.mono,.mono{font-family:Consolas,Menlo,monospace; font-size:12px; color:var(--ink2)}
td.nowrap,th.nowrap{white-space:nowrap}
.tbl-wrap{overflow:auto; border:1px solid var(--line); border-radius:9px; background:var(--card)}
.tbl-wrap table{min-width:100%}
.empty{padding:38px 20px; text-align:center; color:var(--muted); font-size:13px}
.empty b{display:block; color:var(--ink2); margin-bottom:4px; font-size:13.5px}

.badge{display:inline-flex; align-items:center; gap:4px; font-size:11px; padding:1px 7px; border-radius:20px; border:1px solid transparent; white-space:nowrap}
.badge.ok{background:var(--green-soft); color:var(--green); border-color:#D5E7DC}
.badge.warn{background:var(--accent-soft); color:var(--accent2); border-color:#EFDCBB}
.badge.bad{background:var(--red-soft); color:var(--red); border-color:#EFD6D2}
.badge.gray{background:#F1EFE8; color:var(--muted); border-color:var(--line)}
.badge.blue{background:var(--blue-soft); color:var(--blue); border-color:#D8E5F1}
.dot-live{width:6px;height:6px;border-radius:50%;background:var(--green);display:inline-block}

/* ---------- 桌面配置编辑器 ---------- */
.sec{border:1px solid var(--line); border-radius:9px; margin-bottom:10px; background:#FDFCF9; overflow:hidden}
.sec-head{display:flex; align-items:center; gap:10px; padding:10px 12px; background:#F7F5EF; border-bottom:1px solid var(--line2)}
.sec-head .t{font-weight:600; font-size:13px}
.sec-body{padding:12px}
.sec-body .fields{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.item-row{display:grid; grid-template-columns:1.2fr 1fr 1.2fr 1fr 110px 30px; gap:8px; margin-bottom:8px; align-items:center}
.item-row input{margin:0; padding:6px 8px; font-size:12.5px}
.item-row .del{cursor:pointer; color:var(--muted); text-align:center; font-size:14px; user-select:none}
.item-row .del:hover{color:var(--red)}
.chip{display:inline-block; font-size:11px; color:var(--muted); background:#F1EFE8; border-radius:4px; padding:1px 6px; margin-right:4px}

/* ---------- 弹窗 / 提示 ---------- */
.modal{position:fixed; inset:0; background:rgba(27,26,23,.38); display:flex; align-items:center; justify-content:center; padding:20px; z-index:50}
.modal-box{background:var(--card); border-radius:12px; width:min(560px,100%); max-height:86vh; display:flex; flex-direction:column; box-shadow:0 20px 60px rgba(27,26,23,.2)}
.modal-head{display:flex; align-items:center; justify-content:space-between; padding:15px 18px; border-bottom:1px solid var(--line2)}
.modal-head b{font-size:14px}
.modal-head .x{background:none; border:none; font-size:14px; color:var(--muted); cursor:pointer}
#modal-body{padding:18px; overflow:auto}
#modal-body label:last-child{margin-bottom:0}
.toast{position:fixed; left:50%; bottom:26px; transform:translate(-50%,20px); background:#26241F; color:#F7F5EF; padding:9px 16px; border-radius:8px; font-size:13px; opacity:0; pointer-events:none; transition:all .2s; z-index:80; max-width:80vw}
.toast.show{opacity:1; transform:translate(-50%,0)}
.toast.err{background:#8E2F28}

.help{font-size:12px; color:var(--muted); line-height:1.7}
.help code{background:#F1EFE8; border-radius:3px; padding:1px 4px; font-size:11.5px; font-family:Consolas,monospace}
.kv{display:grid; grid-template-columns:96px 1fr; gap:6px 10px; font-size:13px}
.kv .k{color:var(--muted); font-size:12.5px}
.upload{border:1.5px dashed #DCD7CA; border-radius:10px; padding:20px; text-align:center; background:#FCFBF7; cursor:pointer; transition:all .15s}
.upload:hover{border-color:var(--accent); background:#FDF8EF}
.upload b{display:block; font-size:13.5px; margin-bottom:3px}
.upload span{font-size:12px; color:var(--muted)}
.bar{height:6px; border-radius:3px; background:#F1EFE8; overflow:hidden}
.bar > i{display:block; height:100%; background:var(--accent); border-radius:3px}

@media (max-width:1000px){
  .layout{grid-template-columns:1fr}
  .side{position:static; height:auto; flex-direction:row; align-items:center; padding:10px; overflow-x:auto}
  .side nav{flex-direction:row; flex:1}
  .brand.small,.side-foot{display:none}
  .main{padding:16px}
  .grid.k4{grid-template-columns:repeat(2,1fr)}
  .grid.k3,.grid.k2{grid-template-columns:1fr}
  .item-row{grid-template-columns:1fr 1fr}
  .sec-body .fields{grid-template-columns:1fr}
}

/* ---------- 播放预览 ---------- */
.pv{position:fixed; inset:0; background:rgba(18,17,14,.74); display:flex; align-items:center; justify-content:center; padding:22px; z-index:70}
.pv-box{background:var(--card); border-radius:12px; width:min(1000px,100%); max-height:94vh; display:flex; flex-direction:column; overflow:hidden; box-shadow:0 26px 80px rgba(0,0,0,.4)}
.pv-head{display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--line2); flex:0 0 auto}
.pv-head b{font-size:14px}
.pv-meta{font-size:12px; color:var(--muted)}
.pv-head .x{margin-left:auto; background:none; border:none; font-size:15px; color:var(--muted); cursor:pointer; line-height:1}
.pv-head .x:hover{color:var(--ink)}
.pv-stage{position:relative; background:#000; width:100%; aspect-ratio:16/9; min-height:220px; display:flex; align-items:center; justify-content:center; flex:1 1 auto}
.pv-stage video{width:100%; height:100%; display:block; background:#000; object-fit:contain}
.pv-tip{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; padding:26px; color:#CFCABD; font-size:13px; line-height:1.8; pointer-events:none}
.pv-foot{display:flex; align-items:center; gap:10px; padding:9px 16px; border-top:1px solid var(--line2); flex-wrap:wrap; flex:0 0 auto}
.pv-url{font-size:11px; color:var(--muted); word-break:break-all; max-width:60%}
.pv-lines{display:flex; gap:6px; margin-left:auto; flex-wrap:wrap}
@media (max-width:700px){
  .pv{padding:0}
  .pv-box{border-radius:0; max-height:100vh; height:100%}
  .pv-url{max-width:100%}
}
.pv-note{font-size:11px; color:var(--muted); background:#F1EFE8; border-radius:4px; padding:2px 7px; white-space:nowrap}

/* ---------- 系统更新 ---------- */
.kv{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px}
.kv div{background:#FBFAF6; border:1px solid var(--line2); border-radius:8px; padding:10px 12px}
.kv i{display:block; font-style:normal; font-size:11.5px; color:var(--muted); margin-bottom:2px}
.kv b{font-size:14.5px; font-weight:600}
.up-drop{border:1.5px dashed #DCD7CB; border-radius:10px; padding:26px 18px; text-align:center; background:#FBFAF6; cursor:pointer; transition:background .15s,border-color .15s}
.up-drop:hover,.up-drop.on{border-color:var(--accent); background:var(--accent-soft)}
.up-drop b{display:block; font-size:13.5px; margin-bottom:3px}
.up-drop span{font-size:12px; color:var(--muted)}
.up-bar{height:6px; background:#EFECE5; border-radius:6px; overflow:hidden; margin-top:12px}
.up-bar i{display:block; height:100%; width:0; background:var(--accent); transition:width .2s}
.up-diff{display:flex; flex-wrap:wrap; gap:6px; margin:10px 0}
.up-file{font-size:11.5px; font-family:Consolas,monospace; padding:1px 7px; border-radius:4px; background:#F1EFE8; color:var(--ink2); word-break:break-all}
.up-file.add{background:var(--green-soft); color:var(--green)}
.up-file.mod{background:var(--accent-soft); color:var(--accent2)}
.up-file.del{background:var(--red-soft); color:var(--red)}
.up-log{background:#FBFAF6; border:1px solid var(--line2); border-radius:8px; padding:10px 12px; font-family:Consolas,monospace; font-size:11.5px; line-height:1.8; color:var(--ink2); max-height:210px; overflow:auto; white-space:pre-wrap}
.up-mask{position:fixed; inset:0; background:rgba(27,26,23,.55); display:flex; align-items:center; justify-content:center; z-index:90; padding:20px}
.up-mask-box{background:var(--card); border-radius:12px; padding:26px 30px; text-align:center; max-width:400px; box-shadow:0 24px 70px rgba(0,0,0,.3)}
.up-mask-box b{display:block; margin:14px 0 6px; font-size:14.5px}
.up-mask-box span{font-size:12.5px; color:var(--muted); line-height:1.75}
.spin{width:26px; height:26px; margin:0 auto; border:3px solid #EFECE5; border-top-color:var(--accent); border-radius:50%; animation:up-sp .8s linear infinite}
@keyframes up-sp{to{transform:rotate(360deg)}}