:root{--bg:#0f1117;--panel:#171a23;--line:#262b38;--text:#e8eaf0;--mut:#8b93a7;--acc:#4f8cff}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font:15px/1.4 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
.top{position:sticky;top:0;z-index:5;display:flex;gap:12px;align-items:center;padding:10px 16px;background:var(--panel);border-bottom:1px solid var(--line)}
.top h1{font-size:18px;margin:0;white-space:nowrap}
#search{flex:1;min-width:0;max-width:420px;padding:8px 12px;border-radius:8px;border:1px solid var(--line);background:var(--bg);color:var(--text)}
.chip,.icon{border:1px solid var(--line);background:var(--bg);color:var(--mut);border-radius:999px;padding:6px 12px;cursor:pointer;font:inherit}
.chip.on{color:#7ee2a0;border-color:#2f6b47}
.icon{display:none;border-radius:8px}
.layout{display:flex;min-height:calc(100vh - 54px)}
.nav{width:220px;flex:none;padding:12px;border-right:1px solid var(--line);background:var(--panel)}
.nav button{display:flex;justify-content:space-between;align-items:center;width:100%;margin:2px 0;padding:9px 12px;border:0;border-radius:8px;background:none;color:var(--text);font:inherit;cursor:pointer;text-align:left}
.nav button:hover{background:#202533}
.nav button.sel{background:var(--acc);color:#fff}
.nav .n{color:var(--mut);font-size:12px}.nav button.sel .n{color:#dbe7ff}
main{flex:1;padding:16px;min-width:0}
.heading{font-size:20px;font-weight:700;margin:0 0 14px}
.heading small{color:var(--mut);font-weight:400;font-size:14px;margin-left:8px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px}
.card{display:block;color:inherit;text-decoration:none;background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden;transition:transform .12s,border-color .12s}
.card:hover,.card:focus-visible{transform:translateY(-3px);border-color:var(--acc);outline:none}
.card .art{aspect-ratio:3/4;background:#12141b;display:flex}
.card img{width:100%;height:100%;object-fit:contain}
.card .meta{padding:8px 10px}
.card .t{font-weight:600;font-size:13px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .s{color:var(--mut);font-size:11px;margin-top:2px}
.empty{color:var(--mut)}
dialog{max-width:560px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--text)}
dialog::backdrop{background:#000a}
dialog h2{margin-top:0}dialog h3{margin:16px 0 4px;font-size:15px}dialog p{margin:6px 0;color:#c9cedb}
dialog button{margin-top:10px;padding:8px 16px;border-radius:8px;border:0;background:var(--acc);color:#fff;font:inherit;cursor:pointer}
.live{font-family:ui-monospace,monospace;font-size:13px;background:var(--bg);padding:8px;border-radius:8px}
@media(max-width:760px){
 .icon{display:block}.top h1{display:none}
 .nav{position:fixed;inset:54px auto 0 0;z-index:4;transform:translateX(-100%);transition:transform .2s}
 .nav.open{transform:none}
 .grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px}
}

dialog.wide{max-width:680px;width:92vw}
dialog input,dialog select{padding:8px 10px;border-radius:8px;border:1px solid var(--line);background:var(--bg);color:var(--text);font:inherit;max-width:100%}
dialog form p input{width:100%}
dialog button.ghost{background:#2a3040}
dialog button.danger{background:#b3362b}
dialog table{width:100%;border-collapse:collapse;font-size:14px}
dialog td,dialog th{padding:6px 4px;border-bottom:1px solid var(--line);text-align:left}
dialog td button{margin:0 2px 0 0;padding:4px 10px;font-size:13px}
.row{display:flex;gap:8px;flex-wrap:wrap}.row input{flex:1;min-width:120px}
.msg{min-height:18px;font-size:13px;color:#ff8b8b}.msg.ok{color:#7ee2a0}