:root{--bg:#0b0d12;--card:#121622;--muted:#9aa4b2;--text:#e6eaf2;--accent:#7aa2ff;--border:#232a3b;}
*{box-sizing:border-box}
body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial;background:var(--bg);color:var(--text)}
.top{position:sticky;top:0;background:rgba(11,13,18,0.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--border);z-index:10}
.wrap{max-width:1100px;margin:0 auto;padding:16px}
.h1{font-size:22px;font-weight:800;margin:0 0 6px 0}
.sub{color:var(--muted);font-size:12px}
.badge{display:inline-flex;align-items:center;gap:6px;margin-top:8px;padding:6px 10px;border:1px solid rgba(122,162,255,0.35);border-radius:999px;background:rgba(122,162,255,0.10);font-size:12px}
.badge b{color:var(--accent)}
.container{max-width:1100px;margin:0 auto;padding:18px 16px 26px 16px}
.card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:14px;margin:12px 0}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.label{font-weight:700}
.hint{color:var(--muted);font-size:12px}
textarea{width:100%;min-height:140px;padding:12px;border-radius:12px;border:1px solid var(--border);background:#0f1320;color:var(--text);outline:none;resize:vertical;line-height:1.6}
input[type=file]{width:100%}
select,button{padding:10px 12px;border-radius:12px;border:1px solid var(--border);background:#0f1320;color:var(--text);outline:none}
button{cursor:pointer}
button.primary{background:linear-gradient(135deg, rgba(122,162,255,0.28), rgba(122,162,255,0.08));border-color:rgba(122,162,255,0.38)}
button.danger{background:rgba(255,122,122,0.14);border-color:rgba(255,122,122,0.26)}
.grid{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:10px;margin-top:10px}
@media (max-width:900px){.grid{grid-template-columns:1fr 1fr}.wrap,.container{padding-left:12px;padding-right:12px}}
@media (max-width:560px){.grid{grid-template-columns:1fr}}
.status{color:var(--muted);font-size:12px;margin-left:auto}
.paper{background:#0f1320;border:1px solid var(--border);border-radius:16px;padding:14px;line-height:2.0;min-height:120px}
.w{cursor:pointer;padding:2px 4px;border-radius:8px}
.w:hover{background:rgba(122,162,255,0.12)}
.w.playing{background:rgba(122,162,255,0.22);border:1px solid rgba(122,162,255,0.35)}
.s{border-radius:10px;padding:2px 2px}
.s:hover{outline:1px dashed rgba(154,164,178,0.35)}
.foot{color:var(--muted);font-size:12px;margin-top:14px}