/* Match the previous React UI look & feel */
:root{
  --bg:#070a12;
  --bg2:#0b1220;
  --surface:rgba(255,255,255,.06);
  --surface2:rgba(255,255,255,.09);
  --border:rgba(255,255,255,.12);
  --border2:rgba(255,255,255,.18);
  --text:#e7eaf2;
  --muted:rgba(231,234,242,.70);
  --muted2:rgba(231,234,242,.55);

  --primary:#4f46e5;
  --primary2:#2563eb;
  --danger:#ef4444;
  font-family: system-ui, "Segoe UI", Tahoma, Arial, sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
*{box-sizing:border-box}
body{
  margin:0;
  color:var(--text);
  background:
    radial-gradient(900px 520px at 85% 0%, rgba(79,70,229,.22), transparent 60%),
    radial-gradient(850px 520px at 15% 12%, rgba(37,99,235,.18), transparent 60%),
    radial-gradient(800px 520px at 15% 70%, rgba(16,185,129,.12), transparent 55%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  min-height:100vh;
}
.container{max-width:1100px;margin:0 auto;padding:18px 12px 48px}
.spacer{height:12px}
.topbar{position:sticky;top:0;z-index:50;background:rgba(7,10,18,.65);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.08)}
.topbar-inner{max-width:1100px;margin:0 auto;padding:12px 12px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.brand{display:flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;font-weight:950}
.brand-badge{width:36px;height:36px;border-radius:14px;background:rgba(255,255,255,.10);display:grid;place-items:center;border:1px solid rgba(255,255,255,.10)}
.topbar-left{display:flex;align-items:center;gap:8px}
.topbar-right{display:flex;align-items:center;gap:8px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:22px;padding:16px}
.card-hover{transition:transform .16s, background .16s, border-color .16s}
.card-hover:hover{transform:translateY(-2px);background:rgba(255,255,255,.10);border-color:var(--border2)}
.card-hover:active{transform:translateY(0)}
.card-grad{position:relative;overflow:hidden}
.card-grad:before,
.card-grad:after{content:"";position:absolute;border-radius:999px;filter:blur(32px);opacity:.55;pointer-events:none}
.card-grad:before{width:220px;height:220px;top:-90px;right:-90px;background:rgba(79,70,229,.22)}
.card-grad:after{width:240px;height:240px;bottom:-110px;left:-110px;background:rgba(37,99,235,.16)}
.grid{display:grid;gap:12px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){.grid-4{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:680px){.grid-2,.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
.btn{appearance:none;border:0;cursor:pointer;border-radius:16px;padding:12px 16px;font-weight:900;color:var(--text);text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;line-height:1}
.btn-sm{border-radius:14px;padding:10px 12px;font-size:13px}
.btn-ghost{background:var(--surface);border:1px solid var(--border)}
.btn-ghost:hover{background:var(--surface2);border-color:var(--border2)}
.btn-primary{background:linear-gradient(135deg, rgba(79,70,229,.95), rgba(37,99,235,.95));box-shadow:0 10px 30px rgba(37,99,235,.18)}
.btn-primary:hover{filter:brightness(1.05)}
.btn-danger{background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.35)}
.btn-danger:hover{background:rgba(239,68,68,.18)}
.title{font-size:38px;font-weight:950;margin:0}
.title-sm{font-size:28px;font-weight:950;margin:0}
.subtitle{color:var(--muted);margin:8px 0 0;font-weight:800}
.card-link{display:block;text-decoration:none;color:var(--text)}
.thumb{width:100%;aspect-ratio:4/5;border-radius:18px;object-fit:cover;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)}
.pill{display:inline-flex;gap:6px;align-items:center;padding:6px 10px;border-radius:999px;border:1px solid var(--border);background:rgba(255,255,255,.08);font-size:12px;font-weight:950}
.tag{display:inline-flex;gap:6px;align-items:center;padding:6px 10px;border-radius:999px;border:1px solid var(--border);background:rgba(255,255,255,.08);font-size:12px;font-weight:950}
.field{width:100%;padding:11px 12px;border-radius:14px;border:1px solid var(--border);background:var(--surface);color:var(--text);outline:none}
.field:focus{border-color:rgba(79,70,229,.6);box-shadow:0 0 0 4px rgba(79,70,229,.18)}
select.field option{color:#0b1220;background:#fff}
label{font-weight:900;font-size:13px;color:rgba(231,234,242,.85)}
.actions{display:flex;gap:8px;flex-wrap:wrap}

/* Side drawer (matches previous hamburger UX) */
.drawer-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.60);backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .18s;z-index:60}
.drawer{position:fixed;top:0;right:0;height:100%;width:86%;max-width:360px;background:rgba(7,10,18,.95);border-left:1px solid rgba(255,255,255,.10);transform:translateX(100%);transition:transform .18s;z-index:61;box-shadow:0 30px 80px rgba(0,0,0,.55)}
.drawer.open{transform:translateX(0)}
.drawer-backdrop.open{opacity:1;pointer-events:auto}
.drawer-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px;border-bottom:1px solid rgba(255,255,255,.10)}
.drawer-body{padding:14px}
.nav-item{display:block;padding:12px 14px;border-radius:18px;border:1px solid var(--border);background:rgba(255,255,255,.05);color:var(--text);text-decoration:none;font-weight:950}
.nav-item:hover{background:rgba(255,255,255,.10);border-color:var(--border2)}
.nav-stack{display:grid;gap:10px}

/* Gallery (swipe + fullscreen) */
.gallery{position:relative;overflow:hidden;border-radius:18px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.06)}
.gallery-img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;cursor:pointer;transition:transform .4s}
.gallery:hover .gallery-img{transform:scale(1.02)}
.gallery-nav{position:absolute;top:50%;transform:translateY(-50%);border:1px solid rgba(255,255,255,.16);background:rgba(0,0,0,.45);color:#fff;border-radius:16px;padding:10px 12px;font-weight:950;cursor:pointer}
.gallery-nav:hover{background:rgba(0,0,0,.55)}
.gallery-nav.prev{left:10px}
.gallery-nav.next{right:10px}
.gallery-counter{position:absolute;left:10px;bottom:10px;border:1px solid rgba(255,255,255,.16);background:rgba(0,0,0,.45);color:#fff;border-radius:999px;padding:6px 10px;font-size:12px;font-weight:950}
.gallery-dots{position:absolute;right:10px;bottom:12px;display:flex;gap:6px}
.gallery-dot{width:8px;height:8px;border-radius:999px;background:rgba(255,255,255,.25);border:0;cursor:pointer}
.gallery-dot.active{background:rgba(255,255,255,.90)}

.gallery-modal{position:fixed;inset:0;z-index:80;display:none}
.gallery-modal.open{display:block}
.gallery-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.80);backdrop-filter:blur(6px)}
.gallery-modal-card{position:absolute;inset:12px;max-width:1100px;margin:auto;display:flex;flex-direction:column}
.gallery-modal-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.gallery-modal-count{color:rgba(255,255,255,.85);font-weight:950}
.gallery-modal-body{position:relative;flex:1;border-radius:22px;overflow:hidden;border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.35)}
.gallery-modal-img{width:100%;height:100%;object-fit:contain;display:block}

/* Video */
.video-head{display:flex;justify-content:flex-end;gap:8px;padding:10px;border-bottom:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04)}
.video-el{background:#000}

/* Better mobile/tablet spacing */
@media (max-width: 420px){
  .container{padding:16px 10px 44px}
  .title{font-size:34px}
}
@media (max-width: 520px){
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 360px){
  .grid-4,.grid-2{grid-template-columns:1fr}
}