:root{
  --bg: #0b0f12;
  --card:#13181d;
  --ink:#e5e7eb;
  --muted:#9aa3ad;
  --accent:#ffc726;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; background:var(--bg); color:var(--ink); font-family:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; }

.topbar{
  display:flex; align-items:center; gap:12px;
  padding:14px 16px;
  border-bottom:1px solid #1f2630;
}
.topbar h1{ margin:0; font-size:18px; font-weight:700; }
.search{
  margin-left:auto; width:280px; max-width:40vw; padding:8px 10px;
  border-radius:10px; border:1px solid #3a4046; background:#111417; color:var(--ink);
}
.admin-link{
  margin-left:8px; color:#111; background:var(--accent); padding:8px 12px; border-radius:10px; text-decoration:none; font-weight:700;
}

.grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap:12px; padding:16px;
}
.card{
  background:var(--card); border:1px solid #1f2630; border-radius:12px; overflow:hidden; cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.card:hover{ transform:translateY(-1px); box-shadow:0 6px 18px rgba(0,0,0,.25); }
.card img{ width:100%; aspect-ratio: 5 / 6; object-fit:cover; display:block; background:#fff; }
.card .meta{ padding:10px; font-size:12px; color:var(--muted); display:flex; gap:8px; align-items:center; justify-content:space-between; }
.card .title{ color:var(--ink); font-weight:600; font-size:13px; }

.modal{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.6); z-index:50; }
.modal.hidden{ display:none; }
.modal-body{ max-width: min(1200px, 92vw); width:100%; }
.modal-content{
  display:grid; grid-template-columns: 1fr 320px; gap:16px;
  background:var(--card); border:1px solid #1f2630; border-radius:14px; padding:16px;
}
.modal .close{
  position:absolute; margin:8px; right:0; top:0; border:0; width:36px; height:36px; border-radius:10px;
  background:#20262d; color:#cbd5e1; cursor:pointer; font-size:20px; font-weight:700;
}
.modal canvas{ width:100%; height:auto; background:#fff; border-radius:10px;}
.modal .meta .row{ margin:6px 0; color:var(--muted); font-size:13px; }
.modal .meta h2{ margin:0 0 6px 0; font-size:16px; }
.actions a{ display:inline-block; margin-right:8px; margin-top:8px; text-decoration:none; color:#111; background:var(--accent); padding:8px 10px; border-radius:10px; font-weight:700; }