:root{
  --bg:#0f0f10;
  --card:#17181a;
  --text:#f5f5f7;
  --muted:#b3b3b7;
  --brand:#ff2a6d;
  --line:#26272b;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
a{color:#fff;text-decoration:none}
.container{max-width:760px;margin:64px auto 70px;padding:0 14px}
.m-header{position:fixed;top:0;left:0;right:0;height:56px;background:#111;display:flex;align-items:center;gap:10px;padding:0 12px;border-bottom:1px solid var(--line);z-index:50}
.brand{font-weight:800}
.icon-btn{background:transparent;border:0;color:#fff;font-size:20px}
.icon-btn .bar{display:block;width:18px;height:2px;background:#fff;margin:4px 0}
.m-drawer{position:fixed;top:0;left:0;width:82vw;max-width:340px;height:100vh;background:#121214;border-right:1px solid var(--line);transform:translateX(-100%);transition:.2s ease;z-index:100;padding:14px}
.m-drawer.open{transform:none}
.drawer-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.m-drawer a{display:block;padding:12px;border-radius:10px}
.hero,.poll-card,.card{background:rgba(17,17,17,.78);border:1px solid var(--line);border-radius:16px}
.hero{padding:16px;margin:14px 0 18px}
.hero h1{margin:0 0 6px;font-size:24px}
.hero p{margin:0 0 10px;color:var(--muted)}
.hero-chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{display:inline-flex;padding:6px 10px;border-radius:999px;background:#1a1b1f;border:1px solid var(--line);font-size:12px}
.poll-card{padding:14px;margin-bottom:18px}
.poll-card h2,.poll-card h1{margin:0 0 8px}
.feed{display:flex;flex-direction:column;gap:18px}
.card{overflow:hidden}
.card .photo{aspect-ratio:4/5;overflow:hidden;background:#0b0b0c}
.card .photo img{width:100%;height:100%;display:block;object-fit:cover;object-position:top center}
.meta{padding:12px}
.meta h3{margin:0 0 6px;font-size:20px}
.sub{color:var(--muted);font-size:14px;margin-top:4px}
.actions{border-top:1px solid var(--line);padding:10px 12px;display:flex}
.btn{background:var(--brand);border:0;border-radius:10px;color:#fff;padding:10px 14px;font-weight:800;cursor:pointer}
.btn.small{padding:8px 12px}
.btn.active{outline:2px solid #fff}
.btn:disabled{opacity:.45;cursor:not-allowed}
.m-footer{position:fixed;bottom:0;left:0;right:0;text-align:center;background:#111;border-top:1px solid var(--line);padding:10px}
.gdpr-banner{position:fixed;left:10px;right:10px;bottom:62px;background:#111;border:1px solid var(--line);border-radius:14px;padding:12px;display:flex;gap:10px;align-items:center;justify-content:space-between;z-index:200}
.poll-grid.couples{display:grid;grid-template-columns:1fr!important;gap:12px}
.poll-option.couple{position:relative;width:100%;aspect-ratio:4/3;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#0b0b0c}
.poll-option.couple .couple-split{display:flex;width:100%;height:100%}
.poll-option.couple img{width:50%;height:100%;object-fit:cover;object-position:top center}
.poll-option.couple .names{position:absolute;left:12px;right:12px;bottom:58px;z-index:3;color:#fff;font-weight:900;font-size:20px;text-shadow:0 1px 3px #000}
.poll-option.couple::after{content:"";position:absolute;left:0;right:0;bottom:0;height:100px;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.65));z-index:2;pointer-events:none}
.vote-bottom{position:absolute;left:12px;right:12px;bottom:12px;z-index:5}
#vote-toast{position:fixed;inset:0;display:grid;place-items:center;z-index:9999;pointer-events:none;opacity:0;transition:opacity .15s ease-out}
#vote-toast.show{opacity:1}
#vote-toast .bubble{background:rgba(12,12,12,.92);color:#9be37a;padding:14px 18px;border-radius:999px;font-weight:800;font-size:16px;box-shadow:0 10px 30px rgba(0,0,0,.35)}
html{

  min-height: 100%;

  background: #0f0f10 url("../../uploads/site/bg.jpg") no-repeat center center fixed;

  background-size: cover;

}

body{

  min-height: 100%;

  background: transparent !important;

}

/* Lively hero */
.hero-live{
  position: relative;
  overflow: hidden;
  padding: 22px 18px;
  margin: 14px 0 18px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.16);
  background:
    radial-gradient(circle at top left, rgba(255,42,109,.45), transparent 38%),
    radial-gradient(circle at bottom right, rgba(255,183,77,.28), transparent 42%),
    rgba(15,15,16,.78);
  backdrop-filter: blur(8px);
  box-shadow: 0 18px 50px rgba(0,0,0,.28);
}

.hero-live::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(120deg, rgba(255,255,255,.14), transparent 35%, rgba(255,255,255,.06));
  opacity:.7;
  pointer-events:none;
}

.hero-glow{
  position:absolute;
  width:160px;
  height:160px;
  right:-60px;
  top:-60px;
  border-radius:999px;
  background: rgba(255,42,109,.45);
  filter: blur(26px);
  pointer-events:none;
}

.hero-kicker{
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  margin-bottom: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.hero-title{
  position: relative;
  z-index: 1;
  margin: 0 0 8px;
  color: #fff;
  font-size: clamp(26px, 8vw, 42px);
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: -.04em;
}

.hero-sub{
  position: relative;
  z-index: 1;
  margin: 0;
  color: rgba(255,255,255,.86);
  font-size: 15px;
  line-height: 1.45;
  max-width: 620px;
}

.hero-note{
  position: relative;
  z-index: 1;
  margin-top: 14px;
  color: rgba(255,255,255,.72);
  font-size: 13px;
  font-weight: 600;
}

.hero-poll-list{
  position: relative;
  z-index: 1;
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.hero-poll-link{
  display: block;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.12);
  color: #fff;
  font-weight: 800;
  text-decoration: none;
}

.hero-poll-link:hover{
  background: rgba(255,255,255,.12);
}

@media (min-width: 640px){
  .hero-live{
    padding: 28px 24px;
  }

  .hero-poll-list{
    grid-template-columns: 1fr 1fr;
  }
}