:root{
  --bg:#0f0f13;
  --fg:#ffffff;
  --muted:rgba(255,255,255,.78);
  --glass:rgba(20,20,24,.92);
  --glass2:rgba(20,20,24,.78);
  --stroke:rgba(255,255,255,.16);
  --pink:#f74fbf;
  --cyan:#00d4ff;
  --purple:#bd00ff;
  --shadow:0 25px 50px -12px rgba(0,0,0,.55);
  --radius:24px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Segoe UI",system-ui,Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--fg);
  background:var(--bg) url("/media/gta6bg.webp") center/cover no-repeat;
  background-attachment:fixed;
  overflow-x:hidden;
  position:relative;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.62), rgba(0,0,0,.58)),
    radial-gradient(circle at 50% 20%, rgba(0,0,0,.18), transparent 55%);
}

body.modal-open .wrap,
body.modal-open .bg-orb,
body.modal-open .scanlines,
body.modal-open .particles{
  filter: blur(8px);
}

.bg-orb{
  position:fixed;
  width:520px;
  height:520px;
  border-radius:50%;
  filter: blur(70px);
  opacity:.28;
  pointer-events:none;
  z-index:1;
}
.orb-a{ top:-160px; left:-160px; background: radial-gradient(circle at 30% 30%, var(--purple), transparent 60%); }
.orb-b{ bottom:-200px; right:-170px; background: radial-gradient(circle at 30% 30%, var(--cyan), transparent 60%); }

.scanlines{
  position:fixed;
  inset:0;
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,.16), rgba(0,0,0,.16) 2px, transparent 2px, transparent 4px);
  opacity:.28;
  pointer-events:none;
  z-index:2;
}

.particles{ position:fixed; inset:0; pointer-events:none; z-index:2; }
.particle{
  position:absolute;
  width:3px;
  height:3px;
  border-radius:999px;
  opacity:.65;
  filter: blur(.2px);
  animation:drift var(--d) ease-in-out infinite;
}
@keyframes drift{
  0%{ transform:translate(0,0); }
  50%{ transform:translate(var(--x), var(--y)); }
  100%{ transform:translate(0,0); }
}

.wrap{
  width:min(980px, 92vw);
  margin:0 auto;
  position:relative;
  z-index:3;
}

.header{ padding:56px 0 20px; text-align:center; }

.title{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",system-ui,sans-serif;
  font-style:italic;
  font-weight:900;
  letter-spacing:-2px;
  line-height:1;
  font-size:clamp(44px, 7vw, 90px);
  text-shadow:0 12px 35px rgba(0,0,0,.55);
}
.title-before{ color:var(--pink); display:block; font-size:.55em; letter-spacing:-1px; }
.title-gta{ color:#fff; }
.title-vi{ color:var(--cyan); }

.subtitle{
  margin:14px 0 0;
  color:var(--muted);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:12px;
}

.tabs{ margin:26px auto 0; display:flex; gap:10px; justify-content:center; }
.tab{
  border:1px solid rgba(255,255,255,.16);
  background:rgba(0,0,0,.32);
  color:rgba(255,255,255,.92);
  padding:12px 18px;
  border-radius:999px;
  font-weight:800;
  font-size:16px;
  cursor:pointer;
  transition:transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.tab:hover{ transform: translateY(-1px) scale(1.03); }
.tab.active{
  background:linear-gradient(135deg, rgba(255, 174, 228, 0.95), rgba(203, 61, 255, 0.95));
  border-color:transparent;
  box-shadow:0 0 24px rgba(250, 54, 185, 0.45);
}

.main{ padding:18px 0 40px; }
.panel{ display:block; }
.hidden{ display:none !important; }

.card{
  position:relative;
  border-radius:var(--radius);
  background:linear-gradient(135deg, var(--glass), var(--glass2));
  border:1px solid var(--stroke);
  box-shadow:var(--shadow);
  min-height:360px;
  padding:34px;
  overflow:hidden;
  cursor:pointer;
  outline:none;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.card:hover,.card:focus{
  transform:translateY(-2px);
  box-shadow:0 35px 70px -18px rgba(0,0,0,.7);
  border-color:rgba(255,255,255,.22);
}

.card-glow{
  position:absolute;
  width:360px;
  height:360px;
  border-radius:50%;
  filter: blur(60px);
  opacity:.35;
  mix-blend-mode:screen;
}
.card-content{ position:relative; z-index:2; text-align:center; }

.pill{
  display:inline-block;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.14);
  color:rgba(255,255,255,.9);
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:12px;
}

.card-title{ margin:16px auto 0; font-size:clamp(26px, 3.8vw, 56px); line-height:1.05; font-weight:900; }
.card-desc{ margin:16px auto 0; max-width:48ch; font-size:clamp(16px, 2vw, 22px); color:rgba(255,255,255,.9); line-height:1.5; font-weight:600; }

.hint{ margin-top:18px; font-size:12px; color:rgba(255,255,255,.65); letter-spacing:.10em; text-transform:uppercase; }

.watermark{ position:absolute; right:18px; bottom:14px; font-weight:900; font-style:italic; color:rgba(235, 101, 190, 0.85); opacity:0; transition:opacity .22s ease; z-index:2; }
.card:hover .watermark{ opacity:1; }

.actions{ display:flex; justify-content:center; gap:12px; margin-top:18px; flex-wrap:wrap; }
.actions.small{ margin-top:10px; }

.btn{
  border:none;
  border-radius:999px;
  padding:14px 18px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
  font-size:13px;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, opacity .18s ease;
}
.btn:active{ transform:scale(.98); }

.btn.neon{ color:#fff; background:linear-gradient(135deg, var(--pink), var(--purple)); box-shadow:0 0 22px rgba(255,0,170,.45); }
.btn.neon:hover{ transform:translateY(-1px) scale(1.04); box-shadow:0 0 36px rgba(255,0,170,.65); }

.btn.ghost,.btn.soft{ color:rgba(255,255,255,.95); background:rgba(0,0,0,.4); border:1px solid rgba(255,255,255,.14); }
.btn.ghost:hover,.btn.soft:hover{ background:rgba(255,255,255,.1); transform:translateY(-1px) scale(1.03); }

.library-top{ display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap; margin:12px 0 16px; }

.search{
  flex:1 1 420px;
  width:100%;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(0,0,0,.32);
  color:#fff;
  font-size:16px;
  outline:none;
}
.search:focus{ border-color:rgba(255,0,170,.65); box-shadow:0 0 0 4px rgba(255,0,170,.15); }
textarea.search{ resize:vertical; min-height:108px; }

.count{ color:rgba(255,255,255,.7); font-weight:800; }

.list{ border-radius:16px; border:1px solid rgba(255,255,255,.14); background:rgba(0,0,0,.32); overflow:hidden; }

.item{ padding:14px; border-top:1px solid rgba(255,255,255,.1); display:flex; gap:12px; align-items:flex-start; cursor:pointer; }
.item:first-child{ border-top:none; }
.item:hover{ background:rgba(255,255,255,.08); }

.badge{ min-width:60px; text-align:center; padding:6px 10px; border-radius:999px; font-weight:900; font-size:12px; letter-spacing:.06em; background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.14); color:rgba(255,255,255,.9); }

.item h3{ margin:0; font-size:16px; }
.item p{ margin:6px 0 0; color:rgba(255,255,255,.78); font-weight:600; }

.list-empty{ padding:18px; color:rgba(255,255,255,.7); }

.footer{ padding:18px 0 40px; border-top:1px solid rgba(255,255,255,.08); text-align:center; color:rgba(255,255,255,.55); font-weight:700; font-size:12px; }

.modal{
  position:fixed;
  inset:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}
.modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.48);
  backdrop-filter: blur(8px);
}
.modal-panel{
  position:relative;
  width:min(680px, 95vw);
  border:1px solid rgba(255,255,255,.16);
  border-radius:20px;
  background:linear-gradient(145deg, rgba(19,19,26,.82), rgba(10,10,14,.78));
  box-shadow:0 25px 80px rgba(0,0,0,.55);
  padding:20px;
  z-index:1;
}
.modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}
.modal-head h3{ margin:0; font-size:1.1rem; }
.post-form{ display:grid; gap:10px; }
.post-form .btn{ justify-self:end; }
.post-form .search{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Segoe UI",system-ui,Roboto,"Helvetica Neue",Arial,sans-serif;
  font-weight:600;
  letter-spacing:.01em;
  background:rgba(0,0,0,.22);
}

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}