:root{--bg:#0b0b0d;--panel:#101114;--muted:#9aa0a6;--accent:#e11d2b}
*{box-sizing:border-box}
body{margin:0;background:linear-gradient(180deg,#070709, #0f1012);color:#e6e6e6;font-family:Inter,Segoe UI,Arial,Helvetica,sans-serif}
.topbar{height:72px;display:flex;align-items:center;padding:0 24px;border-bottom:1px solid rgba(255,255,255,0.03);background:rgba(0,0,0,0.25)}
.logo{font-weight:700;font-size:20px}
.logo .white{color:#fff}
.logo .dot{color:var(--accent);margin:0 8px}
.logo .grey{color:#9aa0a6}
.container{display:flex;gap:18px;padding:20px}
.sidebar{width:320px;background:var(--panel);padding:16px;border-radius:10px;box-shadow:0 6px 18px rgba(0,0,0,0.6)}
.sidebar input{width:100%;padding:10px;border-radius:8px;border:1px solid rgba(255,255,255,0.03);background:#0b0b0d;color:#fff}
#structures div, #ranks div{padding:8px;margin-top:8px;border-radius:6px;background:rgba(255,255,255,0.02);cursor:pointer}
.content{flex:1}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.card{background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(0,0,0,0.1));padding:12px;border-radius:10px;transition:transform .18s ease,box-shadow .18s}
.card:hover{transform:translateY(-6px);box-shadow:0 12px 30px rgba(0,0,0,0.6)}
.card img{width:100%;height:140px;object-fit:cover;border-radius:8px;cursor:pointer}
.card .title{font-weight:600;margin-top:8px}
.card .cat{color:var(--muted);font-size:13px}
.lightbox{position:fixed;left:0;top:0;width:100%;height:100%;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,0.85)}

/* Admin */
.admin .container{max-width:900px;margin:24px auto}
form input{display:block;width:100%;padding:8px;margin:8px 0;border-radius:6px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:#fff}
button{background:var(--accent);color:#fff;border:none;padding:10px 14px;border-radius:8px;cursor:pointer}