:root{
  --bg:#0f1216; --panel:#171b21; --panel2:#1e242c; --line:#2a323c;
  --fg:#e6ebf2; --dim:#93a0b1; --accent:#4c9ffe; --accent2:#38d39f;
  --warn:#ffb84d; --err:#ff6b6b; --radius:10px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);
  font:14px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}

/* ---------- 顶栏 ---------- */
.topbar{display:flex;align-items:center;gap:18px;padding:0 18px;height:56px;
  background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;flex-wrap:wrap}
.brand{font-weight:700;font-size:16px;white-space:nowrap}
.mainnav{display:flex;gap:4px;flex:1;min-width:0;overflow-x:auto}
.mainnav a{padding:6px 12px;border-radius:8px;color:var(--dim);white-space:nowrap}
.mainnav a:hover{background:var(--panel2);color:var(--fg)}
.mainnav a.on{background:var(--accent);color:#fff}
.search input{width:220px;padding:7px 12px;border-radius:8px;border:1px solid var(--line);background:var(--panel2)}
.who{white-space:nowrap;font-size:13px;color:var(--dim)}
.who a{display:flex;align-items:center;gap:6px}
.who a:hover{color:var(--fg)}
.rolechip{font-size:11px;padding:1px 7px;border-radius:20px;border:1px solid var(--line);color:var(--dim)}
.rolechip.r-superadmin{border-color:var(--err);color:var(--err)}
.rolechip.r-admin{border-color:var(--warn);color:var(--warn)}
.rolechip.r-editor{border-color:var(--accent);color:var(--accent)}
.rolechip.r-viewer{border-color:var(--accent2);color:var(--accent2)}
.utable{width:100%;border-collapse:collapse;font-size:13px}
.utable th{text-align:left;color:var(--dim);font-weight:600;padding:8px 8px;border-bottom:1px solid var(--line)}
.utable td{padding:9px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
.utable tr.me{background:var(--panel2)}
.utable tr.off{opacity:.55}
.utable .acts{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.utable .acts form{display:flex;gap:4px;align-items:center}
.utable input[type=text],.utable input[type=password],.utable select{padding:5px 8px;font-size:12px}
.perm-grid{width:100%;border-collapse:collapse;font-size:12px}
.perm-grid th,.perm-grid td{border:1px solid var(--line);padding:6px 8px;text-align:center}
.perm-grid th:first-child,.perm-grid td:first-child{text-align:left;color:var(--dim)}
.perm-grid .y{color:var(--accent2);font-weight:700}
.perm-grid .n{color:var(--dim);opacity:.4}
.logout button{background:transparent;border:1px solid var(--line);border-radius:8px;padding:6px 10px;
  color:var(--dim);cursor:pointer}
.logout button:hover{border-color:var(--err);color:var(--err)}

/* ---------- 布局 ---------- */
.wrap{display:flex;gap:18px;padding:18px;align-items:flex-start}
.side{width:250px;flex:0 0 250px;position:sticky;top:74px}
.main{flex:1;min-width:0}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px;margin-bottom:16px}
.card h3{margin:0 0 10px;font-size:14px;color:var(--dim);font-weight:600}
.stat{display:flex;gap:10px;margin-bottom:14px}
.stat>div{flex:1;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:10px;text-align:center}
.stat strong{display:block;font-size:17px}
.stat span{color:var(--dim);font-size:12px}
.hint{color:var(--dim);font-size:12px;margin-top:14px;line-height:1.7}

/* ---------- 分类树 ---------- */
.cat-tree{list-style:none;margin:0;padding:0}
.cat-tree.sub{padding-left:14px;border-left:1px dashed var(--line);margin-left:6px}
.cat-tree a{display:flex;justify-content:space-between;padding:5px 8px;border-radius:6px;color:var(--dim)}
.cat-tree a:hover{background:var(--panel2);color:var(--fg)}
.cat-tree a.on{background:var(--accent);color:#fff}
.cat-tree em{font-style:normal;opacity:.7;font-size:12px}

/* ---------- 时间树 ---------- */
.tree{list-style:none;margin:0;padding:0;font-size:13px}
.tree details{margin:2px 0}
.tree summary{cursor:pointer;padding:4px 6px;border-radius:6px;display:flex;justify-content:space-between}
.tree summary:hover{background:var(--panel2)}
.tree summary em{font-style:normal;color:var(--dim);font-size:12px}
.tree .lv2{padding-left:14px;border-left:1px dashed var(--line);margin-left:8px}
.tree .day{display:flex;justify-content:space-between;padding:3px 6px;border-radius:6px;color:var(--dim)}
.tree .day:hover{background:var(--panel2);color:var(--fg)}
.badge{background:var(--panel2);border:1px solid var(--line);border-radius:20px;padding:1px 8px;
  font-size:11px;color:var(--dim)}

/* ---------- 工具条 ---------- */
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{padding:5px 11px;border-radius:20px;border:1px solid var(--line);background:var(--panel);
  color:var(--dim);font-size:13px}
.chip:hover{border-color:var(--accent);color:var(--fg)}
.chip.on{background:var(--accent);border-color:var(--accent);color:#fff}
.chip.clear{border-color:var(--err);color:var(--err)}
select,input[type=text],input[type=date],input[type=search],textarea{
  padding:7px 10px;border-radius:8px;border:1px solid var(--line);background:var(--panel2)}
.btn{padding:8px 16px;border-radius:8px;border:1px solid var(--accent);background:var(--accent);
  color:#fff;cursor:pointer;font-weight:600}
.btn:hover{filter:brightness(1.1)}
.btn.ghost{background:transparent;color:var(--fg);border-color:var(--line)}
.btn.danger{background:transparent;border-color:var(--err);color:var(--err)}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* ---------- 资料网格 ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:14px}
.item{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  display:flex;flex-direction:column;transition:.15s}
.item:hover{border-color:var(--accent);transform:translateY(-2px)}
.thumb{height:118px;background:var(--panel2);display:flex;align-items:center;justify-content:center;
  font-size:34px;position:relative;overflow:hidden}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb .k{position:absolute;left:6px;top:6px;background:rgba(0,0,0,.6);border-radius:4px;
  padding:1px 6px;font-size:11px}
.item .meta{padding:9px 10px}
.item .t{font-size:13px;line-height:1.4;max-height:2.8em;overflow:hidden;word-break:break-all}
.item .sub{color:var(--dim);font-size:11px;margin-top:5px;display:flex;justify-content:space-between}

/* ---------- 日历 ---------- */
.cal{width:100%;border-collapse:collapse;table-layout:fixed}
.cal th{color:var(--dim);font-weight:600;font-size:12px;padding:6px 0}
.cal td{border:1px solid var(--line);height:88px;vertical-align:top;padding:0;background:var(--panel)}
.cal td.empty{background:transparent;border-color:transparent}
.cal td.today{outline:2px solid var(--accent2);outline-offset:-2px}
.cal a.cell,.cal div.cell{display:block;height:100%;padding:6px 7px;color:inherit}
.cal a.cell:hover{background:var(--panel2)}
.cal .dn{font-size:13px;color:var(--dim)}
.cal .has .dn{color:var(--fg);font-weight:700}
.cal .cnt{margin-top:6px;font-size:12px;color:var(--accent2)}
.cal .dots{margin-top:5px;display:flex;gap:3px;flex-wrap:wrap}
.dot{width:7px;height:7px;border-radius:50%}
.dot.video{background:#ff6b6b}.dot.image{background:#4c9ffe}.dot.doc{background:#38d39f}
.dot.audio{background:#c084fc}.dot.archive{background:#ffb84d}.dot.other{background:#93a0b1}
.calhead{display:flex;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.calhead h2{margin:0;font-size:18px}
.legend{display:flex;gap:12px;flex-wrap:wrap;color:var(--dim);font-size:12px;margin-top:12px}
.legend span{display:flex;align-items:center;gap:5px}

/* ---------- 表单 / 详情 ---------- */
.form-row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.form-row label{flex:1;min-width:180px;display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--dim)}
.drop{border:2px dashed var(--line);border-radius:var(--radius);padding:34px 18px;text-align:center;
  color:var(--dim);cursor:pointer;background:var(--panel)}
.drop.hot{border-color:var(--accent);background:var(--panel2);color:var(--fg)}
.filelist{list-style:none;padding:0;margin:12px 0;font-size:13px}
.filelist li{display:flex;justify-content:space-between;gap:10px;padding:6px 8px;border-bottom:1px solid var(--line)}
.filelist .st{color:var(--dim);white-space:nowrap}
.filelist .st.ok{color:var(--accent2)}.filelist .st.err{color:var(--err)}
.bar{height:6px;background:var(--panel2);border-radius:4px;overflow:hidden;margin-top:10px}
.bar i{display:block;height:100%;width:0;background:var(--accent);transition:width .2s}
.flash{padding:10px 14px;border-radius:8px;margin-bottom:12px;border:1px solid var(--line);
  background:var(--panel);white-space:pre-line;line-height:1.7}
.flash.error{border-color:var(--err);color:var(--err)}
.flash.ok{border-color:var(--accent2);color:var(--accent2)}
.kv{width:100%;border-collapse:collapse;font-size:13px}
.kv th{text-align:left;color:var(--dim);font-weight:600;width:110px;padding:7px 0;vertical-align:top}
.kv td{padding:7px 0;word-break:break-all}
.player{background:#000;border-radius:var(--radius);overflow:hidden;margin-bottom:14px}
.player video,.player img{width:100%;max-height:66vh;display:block;object-fit:contain}
.pager{display:flex;gap:6px;justify-content:center;margin-top:18px;flex-wrap:wrap}
.pager a,.pager span{padding:6px 12px;border-radius:8px;border:1px solid var(--line);color:var(--dim)}
.pager .on{background:var(--accent);border-color:var(--accent);color:#fff}
.empty-box{text-align:center;padding:60px 20px;color:var(--dim)}

/* ---------- 分步引导 ---------- */
.steps{margin:0 0 18px}
.step{position:relative;padding:10px 12px 10px 14px;margin-bottom:8px;background:var(--panel2);
  border-left:3px solid var(--accent);border-radius:6px;font-size:13px;line-height:1.75;color:var(--dim)}
.step b{color:var(--fg);display:block;margin-bottom:3px}
.step code{background:rgba(0,0,0,.35);padding:1px 5px;border-radius:4px;color:var(--accent2);
  font-size:12px;word-break:break-all}
.step .tip-t{display:block;margin-top:4px;color:#8fb6d9}
.step .warn-t{display:block;margin-top:4px;color:var(--warn)}
kbd{background:var(--panel);border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;
  padding:0 5px;font-size:11px;font-family:inherit;color:var(--fg)}

/* ---------- 登录页 ---------- */
.loginwrap{max-width:340px;margin:12vh auto;padding:26px;background:var(--panel);
  border:1px solid var(--line);border-radius:14px}
.loginwrap h1{margin:0 0 6px;font-size:20px}
.loginwrap p{color:var(--dim);font-size:13px;margin:0 0 20px}
.loginwrap label{display:block;margin-bottom:14px;font-size:13px;color:var(--dim)}
.loginwrap input{width:100%;margin-top:6px;padding:10px 12px;border-radius:8px;
  border:1px solid var(--line);background:var(--panel2)}
.loginwrap .btn{width:100%}

@media (max-width:880px){
  .wrap{flex-direction:column;padding:12px}
  .side{width:100%;flex:none;position:static}
  .search input{width:150px}
  .cal td{height:64px}
}