:root{ --bg:#050308; --panel:#0b0712; --neon-pink:#ff0066; --neon-red:#ff1744; --neon-accent:#ff4d9d; --white:#fff; --muted:#c8c3cf; --shadow:0 0 20px rgba(255,0,102,.35),0 0 56px rgba(255,23,68,.25); }
*{box-sizing:border-box} html,body{height:100%}
body{ margin:0; background: radial-gradient(1200px 600px at 5% 0%, #19000c 0%, #09040e 40%, #000 70%) fixed, #050308; color:var(--white); font-family:'Montserrat',system-ui,Arial; line-height:1.5; }
.container{ width:min(1200px,92%); margin:0 auto; }
.top-underlay{ position:fixed; inset:0 auto auto 0; width:100%; height:120px; z-index:5; pointer-events:none; background: conic-gradient(from 210deg, rgba(255,0,102,.6), rgba(255,23,68,.35), rgba(255,77,157,.4), transparent 60%); filter: blur(30px) saturate(140%); opacity:.9;}
.topbar{ position:fixed; top:0; left:0; right:0; height:70px; z-index:10; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:0 22px; background:rgba(8,4,12,.45); backdrop-filter: blur(10px); border-bottom:1px solid rgba(255,77,157,.6); box-shadow: 0 8px 40px rgba(255,23,68,.2); }
.logo{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.logo-mark{ display:inline-grid; place-items:center; width:38px; height:38px; border-radius:10px; color:#fff; font-weight:800; background: radial-gradient(circle at 30% 20%, #ff3e97, #ff1744 60%, #2a0014 90%); box-shadow: var(--shadow); }
.logo-text{ color:#fff; font-weight:800; font-size:20px; text-shadow: 0 0 12px var(--neon-accent); }
.menu{ display:flex; align-items:center; gap:20px; }
.menu a{ color:#fff; text-decoration:none; font-weight:700; padding:8px 12px; border-radius:10px; position:relative; }
.menu a:hover{ color:var(--neon-accent); text-shadow:0 0 10px var(--neon-accent); }
.menu-toggle{ display:none; background:transparent; border:1px solid rgba(255,77,157,.5); color:#fff; padding:8px 12px; border-radius:8px; }
.lang-switch{ display:flex; gap:6px; align-items:center; margin-left:auto; margin-right:10px; }
.lang-btn{ background:rgba(255,255,255,.06); border:1px solid rgba(255,77,157,.5); color:#fff; padding:6px 10px; border-radius:10px; font-weight:700; cursor:pointer; }
.lang-btn.active{ background: linear-gradient(90deg, var(--neon-pink), var(--neon-red)); box-shadow: 0 0 12px rgba(255,0,102,.55); }

.hero{ position:relative; min-height:100vh; display:grid; place-items:center; text-align:center; padding-top:70px; overflow:hidden; }
.hero-fallback{ position:absolute; inset:0; z-index:-3;
  background:
   url('../assets/hero_poster.svg') center/cover no-repeat,
   radial-gradient(800px 500px at 20% 10%, rgba(255,0,102,.35), transparent 60%),
   radial-gradient(800px 500px at 80% 20%, rgba(255,23,68,.3), transparent 60%),
   radial-gradient(1000px 700px at 50% 80%, rgba(255,77,157,.22), transparent 70%),
   #000; }
.hero-overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.6) 60%, rgba(0,0,0,.9) 100%); z-index:-1; }
.neon-title{ font-size: clamp(36px, 4vw, 72px); line-height:1.05; margin:0 0 8px; font-weight:900; color:#fff; text-shadow: 0 0 24px var(--neon-accent), 0 0 60px rgba(255,23,68,.35); }
.neon-sub{ margin:0 0 26px; color: var(--muted); font-weight:600; }
.hero-cta{ display:flex; gap:14px; justify-content:center; }
.btn{ display:inline-flex; align-items:center; justify-content:center; padding:12px 18px; border-radius:12px; text-decoration:none; font-weight:800; cursor:pointer; border:1px solid rgba(255,77,157,.5); transition:.25s ease; }
.btn-neon{ background: linear-gradient(90deg, var(--neon-pink), var(--neon-red)); box-shadow: 0 0 18px rgba(255,0,102,.55); color:#fff; }
.btn-neon:hover{ transform: translateY(-2px); box-shadow: 0 0 26px rgba(255,0,102,.8); }
.btn-outline{ color:#fff; background: rgba(255,255,255,.06); }
.btn-outline:hover{ color: var(--neon-accent); box-shadow: 0 0 18px rgba(255,0,102,.35); border-color: rgba(255,77,157,.8); }
.btn-wa{ background: linear-gradient(90deg, #19d36b, #0bbd57); border-color: rgba(25,211,107,.6); box-shadow: 0 0 16px rgba(25,211,107,.4); }
.btn-wa:hover{ box-shadow: 0 0 24px rgba(25,211,107,.6); transform: translateY(-1px); }
.sheen{ position:relative; overflow:hidden; }
.sheen::after{ content:""; position:absolute; top:-200%; left:-60%; width:50%; height:400%; transform:rotate(25deg); background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.22), rgba(255,255,255,0)); animation:sheen 6s linear infinite; }
@keyframes sheen{ 0%{ left:-60%; } 100%{ left:120%; } }

.section-head{ margin-top:120px; margin-bottom:10px; }

/* Filter bar */
.filterbar{ position:sticky; top:80px; z-index:6; margin: 16px auto; padding:10px; background: rgba(255,255,255,.03); border:1px solid rgba(255,77,157,.6); border-radius:16px; box-shadow: var(--shadow); }
.fb-row{ display:grid; grid-template-columns: 2fr 3fr 2fr auto; gap:8px; align-items:center; }
.fb-item{ display:flex; align-items:center; gap:8px; }
.fb-search input{ width:100%; padding:9px 12px; border-radius:10px; border:1px solid rgba(255,77,157,.5); background: rgba(255,255,255,.06); color:#fff; outline:none; font-size:14px; }
.seg-sort{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.seg-sort button{ padding:8px 8px; border-radius:10px; border:1px solid rgba(255,77,157,.5); background:rgba(255,255,255,.06); color:#fff; font-weight:800; font-size:13px; cursor:pointer; }
.seg-sort button.active{ background: linear-gradient(90deg, var(--neon-pink), var(--neon-red)); box-shadow: 0 0 12px rgba(255,0,102,.55); }
.switch{ display:inline-flex; gap:6px; align-items:center; padding:7px 10px; border:1px solid rgba(255,77,157,.5); border-radius:10px; background: rgba(255,255,255,.06); }
.switch input{ accent-color:#ff4d9d; }
.badge-count{ display:inline-grid; place-items:center; min-width:18px; padding:0 6px; height:18px; margin-left:6px; border-radius:999px; background:linear-gradient(90deg, var(--neon-pink), var(--neon-red)); box-shadow:0 0 10px rgba(255,0,102,.55); font-size:11px; font-weight:800; }

.quick-menu{ position:absolute; margin-top:6px; padding:6px; border-radius:12px; border:1px solid rgba(255,77,157,.6); background:rgba(11,7,18,.96); box-shadow:0 12px 48px rgba(255,0,102,.35); display:flex; flex-direction:column; gap:4px; }
.quick-menu button{ text-align:left; padding:8px 12px; border-radius:8px; border:1px solid rgba(255,77,157,.4); background:rgba(255,255,255,.04); color:#fff; font-weight:700; cursor:pointer; }
.quick-menu hr{ border:none; height:1px; background:rgba(255,77,157,.4); margin:4px 0; }
[hidden]{ display:none !important; }

/* Dual range */
.range-wrap{ position:relative; height:28px; display:grid; align-items:center; }
.range-wrap input[type=range]{ position:absolute; width:100%; pointer-events:none; -webkit-appearance:none; background:transparent; }
.range-wrap input::-webkit-slider-thumb{ pointer-events:auto; -webkit-appearance:none; width:16px; height:16px; border-radius:50%; background:linear-gradient(180deg, #ff4d9d, #ff1744); box-shadow:0 0 10px rgba(255,0,102,.6); border:none; }
.range-wrap input::-moz-range-thumb{ pointer-events:auto; width:16px; height:16px; border:none; border-radius:50%; background:linear-gradient(180deg, #ff4d9d, #ff1744); }
.slider-track{ position:absolute; height:4px; left:0; right:0; background:linear-gradient(90deg, #7a6c77, #7a6c77); border-radius:6px; }
.range-values{ font-size:12px; color:#c8c3cf; margin-top:2px; }

.filter-summary{ display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.tok{ display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:999px; border:1px solid rgba(255,77,157,.5); background: rgba(255,0,102,.10); font-size:12px; color:#fff; }
.tok .x{ cursor:pointer; opacity:.8; }

/* Chips */
.chip-group{ display:flex; flex-wrap:wrap; gap:5px; }
.chip.micro{ font-size:12px; }
.chip{ display:flex; align-items:center; gap:6px; background: rgba(255,255,255,.06); border:1px solid rgba(255,77,157,.5); padding:5px 8px; border-radius:999px; cursor:pointer; user-select:none; }
.chip input{ accent-color:#ff4d9d; }

/* Cards */
.grid{ margin: 18px auto 110px; display:grid; gap:20px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.card{ background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00)); border:1px solid rgba(255,77,157,.5); border-radius:18px; overflow:hidden; box-shadow: var(--shadow); }
.card-media{ position:relative; overflow:hidden; aspect-ratio:3/4; }
.card-media img{ width:100%; height:100%; object-fit:cover; object-position:center top; display:block; transform:translate3d(0,0,0); transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.card-media::before{ content:""; position:absolute; inset:0; background:radial-gradient(80% 60% at 50% 20%, rgba(255,0,102,.22), transparent 70%); mix-blend-mode:screen; pointer-events:none; }
.card-media::after{ content:""; position:absolute; inset:10px; border-radius:14px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), inset 0 0 32px rgba(255,0,102,.18); pointer-events:none; }
.card:hover .card-media img{ transform: translate3d(0, -6px, 0) scale(1.04); }
.card-body{ padding:12px; }
.meta{ color: #ff9ec7; font-weight:800; }
.pill-row{ display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 10px; }
.pill{ padding:4px 7px; border-radius:999px; font-size:12px; color:#fff; border:1px solid rgba(255,77,157,.5); background: rgba(255,0,102,.12); }

/* Profile refined layout */
.page-profile .crumbs{ margin-top:92px; }
.crumbs a{ color:#ffd3ea; text-decoration:none; }
.crumbs span{ opacity:.7; margin:0 6px; }
.profile-wrap{ margin-top:8px; }
.profile-hero{ display:grid; grid-template-columns: 0.95fr 1.05fr; gap:28px; margin: 10px auto 60px; }
.photo-frame{ position:relative; border-radius:18px; overflow:hidden; border:1px solid rgba(255,77,157,.55); box-shadow: 0 16px 60px rgba(255,0,102,.25), inset 0 0 0 1px rgba(255,255,255,.04); }
.photo-frame::after{ content:""; position:absolute; inset:10px; border-radius:14px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), inset 0 0 32px rgba(255,0,102,.18); pointer-events:none; }
.photo-frame img{ width:100%; display:block; object-fit:cover; object-position:center top; aspect-ratio: 3/4; }
.badge-verified{ position:absolute; top:12px; left:12px; padding:6px 10px; border-radius:999px; font-size:12px; font-weight:800; background: linear-gradient(90deg, #11d67b, #06a35a); box-shadow: 0 0 12px rgba(17,214,123,.6); }

.info-stack{ display:grid; gap:12px; }
.info-card{ background: rgba(255,255,255,.03); border:1px solid rgba(255,77,157,.45); border-radius:16px; padding:16px; box-shadow: 0 14px 50px rgba(255,0,102,.18); }
.info-card h1{ margin:0 0 4px; }
.info-meta{ color:#ffd3ea; font-weight:700; }
.facts{ display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 10px; color:#ffd3ea; }
.fact{ display:inline-flex; align-items:center; gap:6px; background: rgba(255,255,255,.05); border:1px solid rgba(255,77,157,.45); padding:6px 8px; border-radius:999px; font-weight:700; }
.fact .ni{ width:18px; height:18px; color: var(--neon-accent); filter: drop-shadow(0 0 10px rgba(255,0,102,.45)); }
.fact.good{ border-color:#18cc87; }
.details-card{ display:grid; grid-template-columns: 1fr 1fr; gap:10px 12px; }
.drow{ display:flex; align-items:center; gap:8px; color:#e8deee; }
.drow .k{ color:#ffd3ea; font-weight:700; min-width:110px; }
.drow .v{ opacity:.95; }
.drow .ni{ width:16px; height:16px; color:#ff7db6; }

.badge-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap:8px; }
.badge{ position:relative; display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:12px; background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.00)); border:1px solid rgba(255,77,157,.55); box-shadow: 0 0 10px rgba(255,0,102,.16), inset 0 0 0 1px rgba(255,255,255,.04); }
.badge .ni{ width:18px; height:18px; color: var(--neon-accent); filter: drop-shadow(0 0 10px rgba(255,0,102,.45)); }
.badge .t{ font-weight:700; color:#fff; font-size:12px; letter-spacing:.1px; }

.cta-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:8px; }
.pn-nav{ display:flex; gap:10px; margin-top:10px; }

.similar{ margin: 10px auto 90px; }
.similar h3{ margin-bottom:10px; }
.sim-grid{ display:grid; gap:18px; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); }
.sim-card{ border:1px solid rgba(255,77,157,.5); border-radius:14px; overflow:hidden; background: rgba(255,255,255,.02); }
.sim-card a{ color:#fff; text-decoration:none; }
.sim-img{ position:relative; aspect-ratio:3/4; overflow:hidden; }
.sim-img img{ width:100%; height:100%; object-fit:cover; object-position:center top; display:block; transition: transform .45s; }
.sim-card:hover .sim-img img{ transform: scale(1.04); }
.sim-body{ padding:10px; }
.sim-meta{ color:#ff9ec7; font-weight:800; }

.site-footer{ margin-top:110px; border-top:1px solid rgba(255,77,157,.4); background: rgba(255,255,255,.02); }
.footer-inner{ display:grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap:24px; padding:24px 0; }
.footer-copy{ text-align:center; color:#9a93a6; padding:16px 0 24px; font-size:14px; }
.muted{ color:var(--muted); }

[data-animate]{ opacity:0; transform: translateY(18px); transition: .6s ease; }
[data-animate].visible{ opacity:1; transform: none; }

/* Compact density */
body.density-compact .filterbar{ margin:12px auto; padding:8px; }
body.density-compact .fb-row{ gap:6px; }
body.density-compact .grid{ gap:16px; margin: 14px auto 90px; }
body.density-compact .card-body{ padding:10px; }
body.density-compact .pill{ font-size:11px; padding:3px 6px; }

/* Modal */
.filters-modal{ position:fixed; inset:0; display:none; place-items:center; z-index:20; }
.filters-modal.open{ display:grid; }
.modal-backdrop{ position:absolute; inset:0; background:rgba(3,2,5,.65); backdrop-filter: blur(4px); }
.modal-card{ position:relative; z-index:1; width:min(980px, 94%); background: rgba(255,255,255,.06); border:1px solid rgba(255,77,157,.6); border-radius:18px; box-shadow: 0 20px 80px rgba(255,0,102,.25); display:flex; flex-direction:column; max-height:86vh; }
.modal-head{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid rgba(255,77,157,.4); }
.icon-btn{ background:transparent; color:#fff; border:1px solid rgba(255,77,157,.5); border-radius:10px; padding:6px 10px; cursor:pointer; }
.modal-body{ padding:14px; overflow:auto; }
.mf-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.mf-col h4{ margin:0 0 8px; color:#ffd3ea; }
.modal-foot{ padding:12px 16px; border-top:1px solid rgba(255,77,157,.4); display:flex; gap:10px; justify-content:flex-end; }

@media (max-width: 1100px){ .fb-row{ grid-template-columns: 1fr 1fr 1fr auto; } }
@media (max-width: 900px){
  .menu{ display:none; } .menu.open{ display:flex; position:absolute; top:70px; right:10px; flex-direction:column; background:rgba(8,4,12,.9); border:1px solid rgba(255,77,157,.6); border-radius:12px; padding:12px; }
  .menu-toggle{ display:block; }
  .profile-hero{ grid-template-columns:1fr; }
  .mf-grid{ grid-template-columns:1fr; }
}