*{box-sizing:border-box}
body{font-family:system-ui,Segoe UI,Arial,sans-serif;margin:0;background:#0f1115;color:#e6e9ef}
a{color:#7fb2ff;text-decoration:none}
a:hover{text-decoration:underline}
code{background:#0b0d11;padding:1px 5px;border-radius:5px;color:#7fd1ff;font-size:.9em}

/* login */
.login-body{display:flex;min-height:100vh;align-items:center;justify-content:center}
.login-card{background:#171a21;border:1px solid #252a35;border-radius:14px;padding:28px;width:320px;display:flex;flex-direction:column;gap:12px}
.login-card h1{margin:0 0 6px;font-size:20px}
.login-card input{padding:11px;border-radius:9px;border:1px solid #2a303c;background:#0b0d11;color:#fff}
.login-card button{padding:11px;border:0;border-radius:9px;background:#2563eb;color:#fff;font-weight:600;cursor:pointer}
.err{color:#ff8b8b;margin:0;font-size:13px}

/* topbar */
.topbar{display:flex;align-items:center;gap:16px;background:#171a21;border-bottom:1px solid #252a35;padding:14px 22px;position:sticky;top:0;z-index:5}
.badge{background:#0b0d11;border:1px solid #252a35;border-radius:20px;padding:4px 12px;font-size:12px;color:#9aa4b2}
.flash{background:#13351f;border:1px solid #1f5c34;color:#aef0c4;padding:10px 22px;font-size:14px}

/* panels */
.panel{max-width:1100px;margin:22px auto;background:#171a21;border:1px solid #252a35;border-radius:14px;padding:20px}
.panel h2{margin:0 0 14px;font-size:17px;display:flex;align-items:center;gap:10px}
.count{background:#0b0d11;border:1px solid #252a35;border-radius:20px;padding:2px 10px;font-size:12px;color:#9aa4b2}

/* upload */
.upload .grid{display:grid;grid-template-columns:1fr 1fr 1.4fr;gap:14px}
.upload label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:#9aa4b2}
.upload input{padding:10px;border-radius:9px;border:1px solid #2a303c;background:#0b0d11;color:#fff}
.upload button{margin-top:14px;padding:10px 22px;border:0;border-radius:9px;background:#2563eb;color:#fff;font-weight:600;cursor:pointer}
.hint{color:#6b7382;font-size:12px;margin:10px 0 0}

/* category cards */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.cat{background:#0b0d11;border:1px solid #232834;border-radius:12px;overflow:hidden;display:flex;flex-direction:column}
.cat.hidden-cat{opacity:.5}
.thumb{height:120px;background:#05070a center/contain no-repeat;display:flex;align-items:center;justify-content:center;border-bottom:1px solid #1c212c}
.thumb img{max-width:100%;max-height:120px;object-fit:contain}
.cat-body{padding:12px;display:flex;flex-direction:column;gap:8px}
.cat-title{font-weight:600}
.cat-sub{font-size:11px;color:#6b7382;word-break:break-all}
.inline{display:flex;gap:6px;align-items:flex-end;flex-wrap:wrap}
.inline .rename{flex:1}
.inline input{padding:7px;border-radius:7px;border:1px solid #2a303c;background:#05070a;color:#fff;width:100%}
.ord{display:flex;flex-direction:column;font-size:10px;color:#6b7382;gap:3px}
.toggles{display:flex;gap:6px;flex-wrap:wrap}
button.sm{padding:7px 10px;border:1px solid #2a303c;border-radius:8px;background:#171a21;color:#cfd6e2;cursor:pointer;font-size:12px}
button.sm:hover{border-color:#3a4254}
.on-green{border-color:#1f5c34;color:#9af0bd}
.on-red{border-color:#7a2b2b;color:#ffb4b4}
.on-gold{border-color:#7a6a1f;color:#ffe28a}
.danger{border-color:#7a2b2b;color:#ff9a9a}
.foot{text-align:center;color:#5a626f;font-size:12px;padding:30px}