/* styles.css */
:root{
  --bg: #0b0f17;
  --card: #101725;
  --muted: #a9b4c4;
  --text: #e8eef7;
  --brand: #5cc8ff;
  --accent: #a78bfa;
  --danger: #ef4444;
  --ok: #22c55e;
  --chip: #1b2436;
  --border: #1f2a44;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:'Inter',system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
a{color:var(--brand);text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:20px}
.site-header, .site-footer{
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 20px;border-bottom:1px solid var(--border);background:#0c1220;
}
.site-footer{border-top:1px solid var(--border);border-bottom:none;opacity:.9}
.brand{font-weight:700;letter-spacing:.3px}
.nav .btn.small{padding:8px 12px;font-size:.9rem}
.btn{
  background:linear-gradient(180deg,var(--brand), #6ea8ff);
  border:none;color:#00112a;padding:10px 16px;border-radius:12px;
  font-weight:700;cursor:pointer;transition:.2s box-shadow;display:inline-flex;align-items:center;gap:8px
}
.btn:hover{box-shadow:0 6px 16px rgba(92,200,255,.25)}
.btn.secondary{background:linear-gradient(180deg,#2dd4bf,#22d3ee);color:#001f21}
.btn.danger{background:linear-gradient(180deg,#f87171,#ef4444);color:#230202}
.btn.small{padding:8px 12px;border-radius:10px}
.card{
  background:var(--card);border:1px solid var(--border);border-radius:16px;overflow:hidden;
}
.card.soft{padding:18px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px}
.grid.two{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.thumb{position:relative;width:100%;padding-top:177.77%;overflow:hidden;background:#050a13}
.thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.thumb:hover img{transform:scale(1.03)}
.card-body{padding:12px 12px 16px}
.title{margin:0 0 6px 0;font-size:1.05rem}
.meta{font-size:.85rem;color:var(--muted);margin-bottom:10px}
.category{background:var(--chip);border:1px solid var(--border);padding:4px 8px;border-radius:999px}
.actions{display:flex;gap:8px;flex-wrap:wrap}
.filters{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0}
.chip{background:var(--chip);color:#bcd; border:1px solid var(--border);padding:8px 12px;border-radius:999px;cursor:pointer}
.chip.active{outline:2px solid var(--accent)}

.empty{padding:24px;color:var(--muted)}

.form{display:grid;gap:12px}
.form input[type="text"], .form input[type="password"], .form textarea, .form input[type="file"]{
  width:100%;background:#0a1322;border:1px solid var(--border);border-radius:12px;padding:10px;color:var(--text)
}
.form label{display:grid;gap:6px;font-weight:600;color:#c8d4e5}
.hint{color:var(--muted)}

.table{width:100%;overflow:auto}
.table .row{display:grid;grid-template-columns:120px 1fr 160px 160px 120px;gap:10px;align-items:center;padding:10px;border-bottom:1px solid var(--border)}
.table .row.head{font-weight:700;background:#0c1526;position:sticky;top:0}
.table img{width:100%;height:80px;object-fit:cover;border-radius:10px}
.controls{display:flex;gap:8px;flex-wrap:wrap}

.between{display:flex;justify-content:space-between;align-items:center}

/* Lightbox */
.lightbox.hidden{display:none}
.lightbox{position:fixed;inset:0;z-index:50;display:grid;place-items:center}
.lightbox-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.7);backdrop-filter: blur(2px)}
.lightbox-body{position:relative;background:#081020;border:1px solid var(--border);border-radius:16px;padding:16px;width:min(92vw, 720px)}
.lightbox-close{position:absolute;top:8px;right:12px;font-size:28px;background:transparent;border:none;color:#fff;cursor:pointer}
.lightbox-title{margin-top:8px;color:#cde}
.lightbox-cta{margin-top:12px;display:flex;gap:10px}
.lightbox-body img{width:100%;height:auto;border-radius:12px;border:1px solid var(--border)}

/* Responsive helpers */
@media (max-width:600px){
  .table .row{grid-template-columns:80px 1fr 130px 130px 100px}
}