:root{
  --bg:#070A12;
  --stroke:rgba(255,255,255,.14);
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.65);
  --a:#ff4fd8;
  --b:#7c4dff;
  --c:#2ee9ff;
  --shadow:0 20px 70px rgba(0,0,0,.55);
}

*{box-sizing:border-box}
img{max-width:100%;height:auto;display:block}

body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color:var(--text);
  min-height:100vh;
  background:
    radial-gradient(1200px 700px at 20% 10%, rgba(255,79,216,.25), transparent 60%),
    radial-gradient(900px 650px at 80% 20%, rgba(124,77,255,.22), transparent 60%),
    radial-gradient(900px 650px at 60% 90%, rgba(46,233,255,.16), transparent 60%),
    var(--bg);
}

.container{max-width:1100px;margin:0 auto;padding:18px}

/* NAV */
.nav{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:14px 16px;border:1px solid var(--stroke);
  background:linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.03));
  border-radius:18px; box-shadow:var(--shadow);
  backdrop-filter: blur(10px);
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:800;
  letter-spacing:.4px;
  font-size:18px;
}

/* Logo Image */
.brand-logo{
  height:40px;
}

/* Optional premium hover */
.brand-logo{
  transition: transform .2s ease;
}
.brand-logo:hover{
  transform: scale(1.05);
}

.links{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}

.btn{
  border:1px solid var(--stroke);
  background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
  color:var(--text);
  padding:10px 14px;border-radius:14px;
  cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center;
  transition:.2s;
}
.btn:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.25)}
.btn.primary{
  border:none;
  background:linear-gradient(90deg,var(--a),var(--b));
  box-shadow:0 18px 55px rgba(124,77,255,.22);
}

/* CARDS */
.card{
  margin-top:16px;
  border:1px solid var(--stroke);
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border-radius:22px;
  box-shadow:var(--shadow);
  backdrop-filter: blur(10px);
  overflow:hidden; /* IMPORTANT: default cards clipped */
}
.card .inner{padding:18px}

h1,h2,h3{margin:0 0 8px}
.muted{color:var(--muted);margin:0 0 14px}

/* FORMS */
.form{display:grid; gap:12px; max-width:720px;}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}

input,textarea{
  width:100%;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.06);
  color:var(--text);
  outline:none;
}
textarea{resize:vertical}
.notice{
  margin:10px 0;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,80,80,.35);
  background:rgba(255,80,80,.12);
}
.notice.ok{
  border-color:rgba(60,255,160,.25);
  background:rgba(60,255,160,.10);
}
@media (max-width:720px){
  .row2{grid-template-columns:1fr}
}

/* FILTER BAR */
.filterbar{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr 1fr auto auto;
  gap:12px;
  align-items:center;
}
@media (max-width: 980px){
  .filterbar{ grid-template-columns: 1fr 1fr; }
  .filterbar .btn, .filterbar a.btn{ width:100%; }
}
.agebox{ height:48px; }

/* ✅ Only FILTER card can overflow for dropdown */
.filter-card,
.filter-card .inner,
.filter-card .filterbar{
  overflow: visible !important;
}
.filter-card{ position:relative; z-index:9999; }
.feed{ position:relative; z-index:1; }

/* ========= GLASS DROPDOWN (gx) ========= */
.gx-select{ position:relative; width:100%; z-index:10; }
.gx-select.open{ z-index:999999; }

.gx-trigger{
  width:100%;
  height:48px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:0 14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.18);

  background: rgba(0,0,0,.35);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  color: rgba(255,255,255,.92);
  cursor:pointer;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.gx-trigger:hover{ border-color: rgba(255,255,255,.28); background: rgba(0,0,0,.42); }
.gx-trigger:active{ transform: scale(.99); }

.gx-caret{
  width:34px;height:34px;
  border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  transition: transform .18s ease;
}
.gx-select.open .gx-caret{ transform: rotate(180deg); }

.gx-panel{
  position:absolute;
  left:0; right:0;
  top: calc(100% + 10px);

  border-radius:18px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);

  box-shadow: 0 22px 70px rgba(0,0,0,.55);
  overflow:hidden;

  opacity:0;
  transform: translateY(-8px) scale(.98);
  pointer-events:none;
  transform-origin: top;
  transition: opacity .16s ease, transform .16s ease;

  z-index: 9999999;
}
.gx-select.open .gx-panel{
  opacity:1;
  transform: translateY(0) scale(1);
  pointer-events:auto;
}
.gx-select.drop-up .gx-panel{
  top:auto;
  bottom: calc(100% + 10px);
  transform-origin: bottom;
}

.gx-list{ max-height:260px; overflow:auto; }
.gx-item{
  width:100%;
  text-align:left;
  padding:12px 14px;
  border:0;
  background: transparent;
  color: rgba(255,255,255,.92);
  cursor:pointer;
  border-top: 1px solid rgba(255,255,255,.08);
  transition: background .12s ease;
}
.gx-item:first-child{ border-top:0; }
.gx-item:hover{ background: rgba(255,79,216,.14); }
.gx-item.active{
  background: linear-gradient(90deg, rgba(255,79,216,.18), rgba(124,77,255,.14));
}
.gx-list::-webkit-scrollbar{ width:10px; }
.gx-list::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.14);
  border-radius:999px;
  border:3px solid rgba(0,0,0,.35);
}

/* ========= FEED (hard lock card size) ========= */
.feed{
  margin-top:16px;
  display:grid !important;
  grid-template-columns: repeat(12, 1fr) !important;
  gap:14px;
}

/* card size locks */
.p-card{
  grid-column: span 4 !important;
  width:100%;
  max-width: 100%;
  border:1px solid var(--stroke);
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border-radius:22px;
  box-shadow: var(--shadow);
  overflow:hidden !important;
  backdrop-filter: blur(10px);
  display:flex;
  flex-direction:column;
}

.p-pic{
  height:220px !important;
  position:relative;
  background:rgba(255,255,255,.06);
  overflow:hidden !important;
}
.p-pic img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center !important;
}

.p-badge{
  position:absolute; left:12px; top:12px;
  padding:6px 10px; border-radius:999px;
  background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.18);
  font-size:12px;
}
.p-nophoto{height:100%;display:flex;align-items:center;justify-content:center;color:var(--muted)}
.p-body{padding:14px}
.p-top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.p-name{font-weight:800;font-size:18px}
.p-meta{color:var(--muted);font-size:12px;margin-top:4px}
.p-like{
  width:40px;height:40px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.06);
}
.p-bio{margin-top:10px;color:var(--muted);font-size:13px;min-height:34px}
.p-actions{display:flex;gap:10px;margin-top:12px}
.p-actions .btn{flex:1}

@media (max-width: 950px){
  .p-card{ grid-column: span 6 !important; }
}
@media (max-width: 620px){
  .p-card{ grid-column: span 12 !important; }
  .p-pic{ height:240px !important; }
}

.policy-modal{
  position:fixed;
  inset:0;
  z-index:9999999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
}
.policy-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.65);
  backdrop-filter: blur(10px);
}
.policy-box{
  position:relative;
  max-width:520px;
  width:100%;
  padding:18px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(10,12,18,.92);
  box-shadow: 0 30px 90px rgba(0,0,0,.55);
  animation: popIn .18s ease;
}
.policy-box h3{ margin:0; font-weight:900; }
.policy-link{ color: rgba(255,255,255,.92); text-decoration: underline; }
.policy-points{
  display:grid;
  gap:8px;
  padding:12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
}
@keyframes popIn{
  from{ transform: translateY(10px) scale(.98); opacity:0; }
  to{ transform: translateY(0) scale(1); opacity:1; }
}