:root{
  --bg:#0f1319; --panel:#161c25; --panel2:#1d2530; --line:#28313d;
  --fg:#e8eef7; --dim:#8b9aad; --accent:#4c9aff; --fast:#31c48d; --slow:#f0a020;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);
  font-family:"Microsoft YaHei","PingFang SC","Noto Sans CJK SC",sans-serif;}
a{color:inherit;text-decoration:none}
header{position:sticky;top:0;z-index:9;background:rgba(15,19,25,.95);
  border-bottom:1px solid var(--line);padding:14px 22px;display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.brand{font-size:17px;font-weight:700;letter-spacing:.5px}
.brand span{color:var(--accent)}
.crumbs{display:flex;gap:6px;flex-wrap:wrap;font-size:14px;color:var(--dim);align-items:center}
.crumbs a{color:var(--dim)} .crumbs a:hover{color:var(--accent)}
.crumbs b{color:var(--fg);font-weight:600}
.search{margin-left:auto;display:flex;gap:8px}
.search input{background:var(--panel2);border:1px solid var(--line);color:var(--fg);
  border-radius:8px;padding:9px 12px;font-size:14px;width:230px;outline:none}
.search input:focus{border-color:var(--accent)}
.search button{background:var(--accent);border:0;color:#fff;border-radius:8px;
  padding:9px 16px;font-size:14px;cursor:pointer}
.wrap{display:flex;gap:0;min-height:calc(100vh - 62px)}
aside{width:236px;flex:0 0 236px;border-right:1px solid var(--line);padding:12px 0;overflow:auto}
aside a{display:flex;justify-content:space-between;gap:8px;padding:10px 18px;font-size:14px;color:var(--dim)}
aside a:hover,aside a.on{background:var(--panel2);color:var(--fg)}
aside a.on{border-left:3px solid var(--accent);padding-left:15px}
main{flex:1;padding:20px 24px 60px;min-width:0}
h2.sec{font-size:13px;color:var(--dim);font-weight:600;margin:22px 0 12px;letter-spacing:1px}
h2.sec:first-child{margin-top:0}
.grid{display:flex;flex-wrap:wrap;gap:14px}
.grid > .card{flex:1 1 168px;min-width:150px;max-width:300px}
@media (max-width:640px){.grid > .card{flex:1 1 45%;max-width:48%}aside{display:none}}
.card{background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:16px 18px;min-height:96px;display:flex;flex-direction:column;justify-content:center;gap:6px}
.card:hover,.card:focus{border-color:var(--accent);background:var(--panel2);outline:3px solid rgba(76,154,255,.55);outline-offset:2px}
.card .nm{font-size:19px;font-weight:600;line-height:1.35;word-break:break-all}
.card .meta{font-size:14px;color:var(--dim)}
.card.vid{border-left:3px solid var(--accent)}
.tier{font-size:11px;padding:1px 6px;border-radius:4px;margin-left:6px}
.tier.fast{background:rgba(49,196,141,.16);color:var(--fast)}
.tier.slow{background:rgba(240,160,32,.16);color:var(--slow)}
.row{display:flex;align-items:center;gap:12px;padding:11px 16px;border:1px solid var(--line);
  border-radius:9px;background:var(--panel);margin-bottom:8px;font-size:14px}
.row:hover{border-color:var(--accent);background:var(--panel2)}
.row .nm{flex:1;word-break:break-all}
.row .sz{color:var(--dim);font-size:12px}
.tag{font-size:11px;color:var(--dim);border:1px solid var(--line);border-radius:4px;padding:1px 6px}
.empty{color:var(--dim);font-size:14px;padding:24px 4px}
.err{background:#3a1720;border:1px solid #6b2733;color:#ffb4c0;padding:14px 16px;border-radius:10px;margin-bottom:16px;font-size:14px}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.chip{font-size:13px;padding:6px 12px;border:1px solid var(--line);border-radius:999px;color:var(--dim)}
.chip:hover{border-color:var(--accent);color:var(--fg)}
.warn{background:rgba(240,160,32,.1);border:1px solid rgba(240,160,32,.35);color:#f5c877;
  padding:12px 16px;border-radius:9px;font-size:13px;margin-bottom:16px;line-height:1.6}
code{background:var(--panel2);padding:2px 6px;border-radius:5px;font-size:12px;word-break:break-all}