/* GetNudes design system. Preserved identity: purple #7648a8 header, #6a3093
   pattern sections, #7a35b2 hover, SnapPattern background, animated side menu. */
:root{
  --purple:#7648a8; --purple-deep:#6a3093; --purple-hover:#7a35b2;
  --snap:#fffc00; --snap-ink:#3d3800;
  --ink:#241b2e; --muted:#6b6178; --faint:#8a7d9c;
  --bg:#ffffff; --soft:#faf8fd; --line:#eee7f6; --line2:#ded4ec;
  --good:#1a9e5c; --good-dot:#22c06e;
  --radius:14px;
}
*{box-sizing:border-box}
.icn{width:1.1em; height:1.1em; vertical-align:-0.18em; fill:none; stroke:currentColor;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round; display:inline-block}
html{scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  padding-bottom:0}
img{max-width:100%; height:auto}
a{color:var(--purple-hover)}
h1,h2,h3{font-family:ui-rounded, -apple-system, BlinkMacSystemFont, sans-serif; line-height:1.15; text-wrap:balance}
.wrap{max-width:1080px; margin:0 auto; padding:0 20px}
.skip{position:absolute; left:-9999px}
.skip:focus{left:12px; top:12px; z-index:200; background:#fff; padding:8px 14px; border-radius:8px}

/* ---------- top nav ---------- */
.topnav{position:sticky; top:0; z-index:60; background:var(--purple); color:#fff;
  display:flex; align-items:center; gap:18px; padding:12px 20px}
.burger{width:24px; cursor:pointer; display:flex; flex-direction:column; gap:5px;
  background:none; border:none; padding:0}
.burger span{height:2.5px; background:#fff; border-radius:2px; display:block}
.brand{margin-right:auto; display:flex; align-items:center}
.brand img{height:30px; width:auto; display:block}
.navlinks{display:flex; gap:22px; align-items:center; font-weight:600; font-size:15px}
.navlinks a{color:#fff; text-decoration:none}
.navlinks a:hover{opacity:.85}
.navlinks .talkcta{background:#fff; color:var(--purple); border-radius:999px; padding:7px 18px; font-weight:800}
.navlinks .talkcta:hover{opacity:1; background:var(--snap); color:var(--snap-ink)}
.navsearch .icn{width:19px; height:19px}
@media (max-width:820px){.navlinks a:not(.talkcta){display:none}}

/* ---------- side menu: page-push motion (Jon's spec, verbatim) ---------- */
.site-wrapper {
    transform-origin: left top;
    transition:
        transform 650ms cubic-bezier(.77, 0, .175, 1),
        border-radius 650ms cubic-bezier(.77, 0, .175, 1);
}

/* will-change/transform only while the menu is open, so it does not create a
   containing block that would re-anchor position:fixed children (bottom nav,
   full-screen chat) to the wrapper instead of the viewport. */
body.menu-open .site-wrapper {
    transform: translate3d(300px, 0, 0) scale(.92);
    border-radius: 20px;
    will-change: transform;
}

.menu-layer {
    position: fixed;
    inset: 0;
    z-index: 0;
}

.site-wrapper {
    position: relative;
    z-index: 1;
}

/* Supporting styling around the spec */
body{background:var(--purple-deep)}
.site-wrapper{background:var(--bg); min-height:100dvh; overflow:hidden;
  box-shadow:0 24px 80px rgba(20,8,35,0)}
body.menu-open .site-wrapper{box-shadow:0 24px 80px rgba(20,8,35,.5); cursor:pointer}
body.menu-open{overflow:hidden}
.menu-layer{background-color:var(--purple-deep); background-image:url(/img/pattern.jpg);
  background-size:cover; background-position:left center; display:flex; align-items:center}
.menu-links{padding:0 0 0 34px; width:300px}
.menu-links ul{list-style:none; margin:0; padding:0}
.menu-links li a{display:flex; align-items:center; gap:14px; padding:11px 0; font-size:23px;
  font-weight:700; color:rgba(255,255,255,.85); text-decoration:none;
  font-family:ui-rounded,-apple-system,sans-serif;
  opacity:0; transform:translateX(-18px);
  transition:opacity .4s ease, transform .4s cubic-bezier(.77,0,.175,1), color .2s}
.menu-links li a:hover{color:var(--snap)}
.menu-links .ic .icn{width:22px; height:22px}
body.menu-open .menu-links li a{opacity:1; transform:translateX(0)}
.menu-links li:nth-child(1) a{transition-delay:.12s}
.menu-links li:nth-child(2) a{transition-delay:.17s}
.menu-links li:nth-child(3) a{transition-delay:.22s}
.menu-links li:nth-child(4) a{transition-delay:.27s}
.menu-links li:nth-child(5) a{transition-delay:.32s}
.menu-links li:nth-child(6) a{transition-delay:.37s}
.menu-links .join a{margin-top:16px; background:#fff; color:var(--purple-deep); border-radius:999px;
  justify-content:center; padding:10px 20px; font-size:14px; display:inline-flex; width:auto; max-width:210px}
.menu-links .join a:hover{background:var(--snap); color:var(--snap-ink)}
@media (prefers-reduced-motion: reduce){
  .site-wrapper, .menu-links li a{transition:none}}

/* ---------- hero + pattern bands ---------- */
.hero, .patternbg, .talkband{
  background-color:var(--purple-deep);
  background-image:url(/img/pattern.jpg);
  background-size:cover; background-position:center; color:#fff}
.hero{text-align:center; padding:74px 0 64px}
.hero h1{font-size:clamp(34px,6vw,54px); margin:0 0 12px; letter-spacing:-.5px}
.hero p{max-width:560px; margin:0 auto 8px; font-size:17px; opacity:.94}
.hero .ctas{margin:26px auto 0; text-align:center}
.heronote{font-size:12.5px; opacity:.85; letter-spacing:.05em; font-weight:600; margin-top:18px}
.btn{display:inline-block; border-radius:999px; padding:12px 30px; font-weight:800;
  font-size:15px; cursor:pointer; text-decoration:none; border:none}
.btn.primary{background:#fff; color:var(--purple-deep)}
.btn.primary:hover{background:var(--snap); color:var(--snap-ink)}
.btn.ghost{border:2px solid rgba(255,255,255,.75); color:#fff; background:transparent; margin-left:12px}
.btn.ghost:hover{background:rgba(255,255,255,.12)}
.btn.big{font-size:18px; padding:15px 42px}
.pagehero{background:var(--purple); color:#fff; padding:40px 0 34px}
.pagehero h1{font-size:clamp(28px,5vw,40px); margin:0 0 8px}
.pagehero p{max-width:640px; margin:0; opacity:.92}
.pagehero a{color:#fff}
.crumbtop{font-size:13px; margin:0 0 6px; opacity:.8}

/* ---------- filters ---------- */
.filters{display:flex; gap:9px; align-items:center; padding:20px 0 4px; flex-wrap:wrap}
.fpill{border:1.5px solid var(--line2); border-radius:999px; padding:7px 16px; font-weight:600;
  font-size:13.5px; color:#5b4a75; background:#fff; text-decoration:none; white-space:nowrap}
.fpill:hover{border-color:var(--purple)}
.fpill.on{background:var(--purple); color:#fff; border-color:var(--purple)}
.fsearch{margin-left:auto}
.fsearch input{border:1.5px solid var(--line2); border-radius:999px; padding:8px 16px;
  font-size:13.5px; min-width:190px; outline:none}
.fsearch input:focus{border-color:var(--purple)}
@media (max-width:640px){
  .filters{flex-wrap:nowrap; overflow-x:auto; padding-bottom:8px; -webkit-overflow-scrolling:touch}
  .fsearch{margin-left:0}}
.searchnote{color:var(--muted); margin:10px 0 0}

/* ---------- feed ---------- */
.sechead{display:flex; align-items:baseline; gap:12px; padding:28px 0 0}
.sechead h2{font-size:24px; margin:0}
.sechead .more{margin-left:auto; color:var(--purple-hover); font-weight:700; font-size:14px; text-decoration:none}
.feed{display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:14px; padding:16px 0 10px}
.pcard{position:relative; border:1px solid var(--line); border-radius:var(--radius); padding:18px 14px 14px;
  text-align:center; background:#fff; box-shadow:0 2px 10px rgba(60,30,100,.05)}
.gtag{position:absolute; top:10px; right:10px; min-width:20px; height:20px; padding:0 5px;
  border-radius:999px; font-size:11px; font-weight:800; color:#fff; display:inline-flex;
  align-items:center; justify-content:center; letter-spacing:.02em; line-height:1}
.gtag.g-f{background:#e0409a}
.gtag.g-m{background:#2f74d0}
.gtag.g-t{background:#7648a8}
.gtag.g-c{background:#c07b00}
.gtag.g-nb{background:#6b6178}
.av{width:56px; height:56px; border-radius:50%; margin:0 auto 8px; display:flex;
  align-items:center; justify-content:center; object-fit:cover}
.av.lt{font-size:24px; font-weight:800; font-family:ui-rounded,-apple-system,sans-serif}
.uname{font-weight:800; font-size:15.5px; margin:0}
.meta{color:var(--faint); font-size:12.5px; margin:2px 0 5px}
.online{font-size:12px; font-weight:700; color:var(--good); margin:0}
.online::before{content:""; display:inline-block; width:8px; height:8px;
  background:var(--good-dot); border-radius:50%; margin-right:5px}
.lastseen{font-size:12px; font-weight:600; color:var(--faint); margin:0}
.desc{font-size:12.5px; color:var(--muted); margin:7px 0 9px; min-height:32px}
.snapchip{display:inline-block; background:var(--snap); color:var(--snap-ink); border-radius:999px;
  font-size:11px; font-weight:800; padding:3px 10px; margin-bottom:10px}
.snapchip .icn{width:12px; height:12px; vertical-align:-2px; stroke-width:2.4}
.view{display:block; width:100%; background:var(--purple); color:#fff; border-radius:999px;
  padding:9px 0; font-weight:800; font-size:13px; border:none; cursor:pointer}
.view:hover{background:var(--purple-hover)}
.reveal{margin-top:10px; border-top:1px dashed var(--line2); padding-top:10px}
.reveal .handle{font-size:15px; margin:0 0 8px; word-break:break-all}
.addsnap{display:block; background:var(--snap); color:var(--snap-ink); border-radius:999px;
  padding:8px 0; font-weight:800; font-size:13px; text-decoration:none; margin-bottom:6px}
.fullprofile{font-size:12px; color:var(--faint)}
.feedempty{color:var(--muted); padding:24px 0}

/* ---------- browse cats ---------- */
.cats{display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:11px; padding:16px 0 8px}
.cat{border:1px solid var(--line); border-radius:12px; padding:16px 8px; text-align:center;
  font-weight:700; font-size:13.5px; background:var(--soft); text-decoration:none; color:var(--ink)}
.cat:hover{border-color:var(--purple); background:#fff}
.cat span{display:block; margin-bottom:6px}
.cat .icn{width:26px; height:26px; color:var(--purple)}

/* ---------- talk band + talk page ---------- */
.talkband{text-align:center; padding:54px 20px; margin:36px 0 0}
.talkband h2{font-size:clamp(24px,4vw,32px); margin:0 0 8px}
.talkband p{margin:0 auto 8px; max-width:520px; opacity:.94}
.avail{font-weight:800; font-size:14.5px; margin-bottom:18px !important}
.avail::before{content:""; display:inline-block; width:9px; height:9px; background:#3ae08b;
  border-radius:50%; margin-right:7px}
.modes{margin-top:14px !important; font-size:13px; opacity:.85}
.modes .icn{width:15px; height:15px; vertical-align:-2.5px}
.talkpage{text-align:center; padding:48px 0 56px}
.talkpage h1{font-size:clamp(30px,5vw,42px); margin:0 0 8px}
.talkpage > .wrap > p{max-width:520px; margin:0 auto 8px; opacity:.94}
.talkstart{margin-top:22px; display:flex; flex-direction:column; align-items:center}
.agecheck{display:flex; width:fit-content; max-width:94%; margin:0 auto 16px;
  align-items:center; gap:9px; background:#fff !important; color:var(--purple) !important;
  -webkit-text-fill-color:var(--purple); font-weight:800; font-size:14px;
  padding:9px 17px; border-radius:999px; cursor:pointer; user-select:none;
  box-shadow:0 6px 18px rgba(20,8,35,.22)}
.agecheck input{width:18px; height:18px; accent-color:var(--purple); cursor:pointer; flex:0 0 auto}
.btn.big[disabled]{opacity:.5; cursor:not-allowed}
.talknote{font-size:13px; opacity:.95; max-width:440px; margin:14px auto 0 !important}
.talkpage a{color:var(--snap); font-weight:800; text-decoration:underline; text-underline-offset:2px}
.talkpage a:hover{color:#fff}
.chatui{max-width:560px; margin:24px auto 0; background:#fff; border-radius:16px;
  color:var(--ink); text-align:left; overflow:hidden; box-shadow:0 18px 50px rgba(20,8,35,.35)}
.chatstatus{background:var(--soft); border-bottom:1px solid var(--line); padding:10px 16px;
  font-size:13px; font-weight:600; color:var(--muted)}
.chatlog{height:320px; overflow-y:auto; padding:14px 16px; display:flex; flex-direction:column; gap:8px}
.msg{max-width:80%; padding:8px 13px; border-radius:16px; font-size:14.5px; line-height:1.4; overflow-wrap:break-word}
.msg.me{align-self:flex-end; background:var(--purple); color:#fff; border-bottom-right-radius:4px}
.msg.them{align-self:flex-start; background:var(--soft); border:1px solid var(--line); border-bottom-left-radius:4px}
.msg.sys{align-self:center; max-width:88%; text-align:center; background:none;
  color:var(--faint); font-size:11.5px; line-height:1.35; padding:2px 8px; opacity:.8}
.chatform{display:flex; gap:8px; padding:12px 14px; border-top:1px solid var(--line)}
.chatform input{flex:1; border:1.5px solid var(--line2); border-radius:999px; padding:10px 16px;
  font-size:16px; outline:none}
.chatform input:focus{border-color:var(--purple)}
.chatform .btn{padding:10px 22px}
.chatform .btn.primary{background:var(--purple); color:#fff}
.chatactions{display:flex; gap:8px; padding:0 14px 14px}
.chatactions .btn{font-size:12.5px; padding:8px 16px; border-color:var(--line2); color:var(--muted)}
.talkunder{padding-top:26px; padding-bottom:10px}

/* ---------- sexting ---------- */
.sextrow{display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:11px; padding:16px 0 8px}
.sx{border:1px solid var(--line); border-radius:12px; padding:15px 12px; font-weight:700;
  font-size:13.5px; background:#fff; text-align:center; text-decoration:none; color:var(--ink)}
.sx:hover{border-color:var(--purple)}
.sx .icn{width:18px; height:18px; color:var(--purple); vertical-align:-4px; margin-right:5px}
.sextrow.big .sx{padding:20px 12px; font-size:14.5px}
.svcgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:13px; padding:16px 0 8px}
.svc{border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; background:#fff;
  text-decoration:none; color:var(--ink); display:flex; flex-direction:column; gap:5px}
.svc:hover{border-color:var(--purple); box-shadow:0 4px 16px rgba(60,30,100,.08)}
.svctag{font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--purple-hover)}
.svcname{font-size:17px; font-weight:800; font-family:ui-rounded,-apple-system,sans-serif}
.svcblurb{font-size:13.5px; color:var(--muted)}

/* ---------- guides ---------- */
.guidecards{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:13px; padding:16px 0 10px}
.g{border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#fff;
  text-decoration:none; color:var(--ink); display:flex; flex-direction:column}
.g:hover{border-color:var(--purple)}
.gtop{height:64px; background:linear-gradient(120deg,#8b5fc0,var(--purple-deep))}
.g:nth-child(2) .gtop{background:linear-gradient(120deg,var(--purple-deep),#9d71d4)}
.g:nth-child(3) .gtop{background:linear-gradient(120deg,var(--purple),#5b2384)}
.g:nth-child(4) .gtop{background:linear-gradient(120deg,#9d71d4,var(--purple))}
.g:nth-child(5) .gtop{background:linear-gradient(120deg,#5b2384,#8b5fc0)}
.g:nth-child(6) .gtop{background:linear-gradient(120deg,var(--purple-hover),var(--purple-deep))}
.gt{padding:12px 14px 6px; font-weight:800; font-size:14.5px}
.gd{padding:0 14px; font-size:12.5px; color:var(--muted)}
.gm{padding:8px 14px 12px; font-size:11.5px; color:var(--faint); font-weight:600; margin-top:auto}

/* ---------- prose / articles ---------- */
.prose{max-width:70ch; padding:18px 0; font-size:16.5px}
.prose h2{font-size:22px; margin:26px 0 8px}
.prose p{margin:10px 0}
.prose.article{padding-top:8px}
.prose.legacy img{border-radius:10px; margin:8px 0}
.prose.legacy a{overflow-wrap:break-word}
.crumb{padding:8px 0 24px}

/* ---------- footer ---------- */
.sitefoot{background:var(--ink); color:#b7abc9; margin-top:0; padding:44px 0 90px; font-size:13.5px}
.sitefoot .fcols{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:20px}
.sitefoot h4{color:#fff; font-size:13px; margin:0 0 8px; text-transform:uppercase; letter-spacing:.07em}
.sitefoot a{display:block; color:#b7abc9; text-decoration:none; padding:2.5px 0}
.sitefoot a:hover{color:#fff}
.fnote{margin-top:22px; border-top:1px solid #3a2f4a; padding-top:16px; color:#8a7d9c}

/* ---------- mobile bottom nav ---------- */
.bottomnav{display:none}
@media (max-width:760px){
  body{padding-bottom:64px}
  .bottomnav{position:fixed; bottom:0; left:0; right:0; z-index:70; display:flex;
    align-items:flex-end; justify-content:space-around; background:#fff;
    border-top:1px solid var(--line); padding:7px 4px calc(8px + env(safe-area-inset-bottom));
    box-shadow:0 -6px 18px rgba(40,20,70,.09)}
  .bn{text-align:center; font-size:10px; font-weight:700; color:var(--faint); width:56px;
    text-decoration:none; background:none; border:none; cursor:pointer;
    font-family:inherit; padding:0}
  .bn .ic{display:block; margin-bottom:2px; line-height:1}
  .bn .ic .icn{width:21px; height:21px}
  .bn.talk{position:relative; top:-16px; width:60px; color:var(--purple)}
  .bn.talk .ic{width:50px; height:50px; margin:0 auto 3px; background:var(--purple); color:#fff;
    border-radius:50%; display:flex; align-items:center; justify-content:center;
    box-shadow:0 6px 16px rgba(118,72,168,.45)}
  .bn.talk .ic .icn{width:24px; height:24px}
  .sitefoot{padding-bottom:120px}}

/* ---------- post-your-snapchat band ---------- */
.postband{display:flex; align-items:center; gap:20px; justify-content:space-between; flex-wrap:wrap;
  background:var(--soft); border:1.5px dashed var(--line2); border-radius:var(--radius);
  padding:20px 24px; margin:22px 0 8px}
.postband h2{font-size:20px; margin:0 0 3px}
.postband p{margin:0; color:var(--muted); font-size:14px}
.btn.purple{background:var(--purple); color:#fff}
.btn.purple:hover{background:var(--purple-hover); color:#fff}

/* ---------- username profile page ---------- */
.profile{border:1px solid var(--line); border-radius:var(--radius); background:#fff;
  padding:26px 28px; margin:22px 0 6px; box-shadow:0 2px 10px rgba(60,30,100,.05)}
.pheadline{font-size:19px; font-weight:700; font-family:ui-rounded,-apple-system,sans-serif; margin:10px 0 4px}
.pbio{color:var(--muted); max-width:64ch}
.plook{font-size:14.5px}
.bighandle{font-size:22px; margin:16px 0 10px; word-break:break-all}
.bighandle .icn{width:22px; height:22px}
.ptags{display:flex; gap:7px; flex-wrap:wrap; margin:14px 0 8px}
.ptags .fpill{font-size:12px; pointer-events:none}
.pfull{font-size:12.5px; color:var(--faint); margin-top:14px}

/* ---------- footer disclosure ---------- */
.fnote.disclosure{font-size:11.5px; line-height:1.6; color:#7d7292; border-top:none; padding-top:0; margin-top:10px}

/* ---------- FAQ blocks: dropdown accordions ---------- */
.faq{max-width:72ch; padding:10px 0 6px}
.faq h2{font-size:23px; margin:26px 0 14px}
.faqitem{border:1px solid var(--line); border-radius:12px; background:#fff; margin:0 0 10px; overflow:hidden}
.faqitem summary{list-style:none; cursor:pointer; padding:13px 42px 13px 16px; position:relative; user-select:none}
.faqitem summary::-webkit-details-marker{display:none}
.faqitem summary::after{content:"+"; position:absolute; right:16px; top:50%; transform:translateY(-50%);
  font-size:20px; font-weight:700; color:var(--purple-hover); transition:transform .2s}
.faqitem[open] summary::after{content:"–"}
.faqitem summary:hover h3{color:var(--purple-hover)}
.faqitem h3{font-size:15.5px; margin:0; display:inline; font-family:ui-rounded,-apple-system,sans-serif}
.faqitem p{margin:0; padding:0 16px 14px; color:var(--muted); font-size:14.5px; line-height:1.65}
.faqitem[open]{border-color:var(--line2)}

/* ---------- best apps page ---------- */
.edmeta{display:flex; gap:14px 22px; flex-wrap:wrap; font-size:12.5px; color:var(--muted);
  background:var(--soft); border:1px solid var(--line); border-radius:12px; padding:12px 16px; margin:20px 0 6px}
.edmeta b{color:var(--ink)}
.edmeta .testflag b{color:var(--purple-hover)}
.quickpicks{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:10px; padding:12px 0 4px}
.qp{border:1px solid var(--line); border-radius:12px; padding:12px 14px; background:#fff;
  text-decoration:none; color:var(--ink); display:flex; flex-direction:column; gap:2px}
.qp:hover{border-color:var(--purple)}
.qplabel{font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--purple-hover)}
.qpname{font-size:16px; font-weight:800; font-family:ui-rounded,-apple-system,sans-serif}
.comparecta{margin:14px 0 4px}
.note.disclosurebox{border-left:3px solid var(--warn, #c07b00); background:var(--soft);
  border-radius:0 10px 10px 0; padding:11px 15px; font-size:13px; color:var(--muted); max-width:none}
.tablewrap{overflow-x:auto; border:1px solid var(--line); border-radius:12px; background:#fff; margin:12px 0}
.apptable{border-collapse:collapse; width:100%; font-size:13px; min-width:720px}
.apptable th{text-align:left; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); padding:9px 11px; border-bottom:1px solid var(--line)}
.apptable td{padding:8px 11px; border-bottom:1px solid var(--line); vertical-align:top}
.apptable tr:last-child td{border-bottom:none}
.apptable a{text-decoration:none; color:var(--ink)}
.rate{display:inline-block; border-radius:999px; padding:1.5px 9px; font-size:11px; font-weight:800}
.rate.ex{background:#e9f7ef; color:#187a47}
.rate.good{background:#eef3fd; color:#2456a8}
.rate.fair{background:#fdf6e8; color:#9a6b00}
.rate.poor{background:#fdf0ec; color:#b03a2e}
.rate.na{background:var(--chip); color:var(--faint)}
.affchip{font-size:10px; font-weight:800; color:var(--purple-hover); border:1px solid var(--line2); border-radius:999px; padding:1px 7px; margin-left:5px}
.tablefoot{font-size:12px; color:var(--faint); margin:4px 0 10px}
.apptoc{display:flex; gap:7px 10px; flex-wrap:wrap; font-size:12.5px; padding:14px 0 4px;
  position:sticky; top:56px; background:var(--bg); z-index:5; border-bottom:1px solid var(--line)}
.apptoc a{text-decoration:none; color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:4px 11px; white-space:nowrap}
.apptoc a:hover{color:var(--purple-hover); border-color:var(--purple)}
.appreview{padding-top:8px}
.appreview h2{margin-top:34px}
.award{font-weight:800; color:var(--purple-hover); font-size:13.5px; margin:2px 0 4px}
.award .icn{width:15px; height:15px}
.affnote{font-weight:600; color:var(--faint)}
.verdictbox{border:1.5px solid var(--line2); border-left:4px solid var(--purple); border-radius:10px;
  background:var(--soft); padding:12px 16px; margin:10px 0 4px}
.verdictbox p{margin:6px 0; font-size:14.5px}

/* ---------- stories strip ---------- */
.stories{background:#fff; border-bottom:1px solid var(--line); padding:12px 0 8px}
.storiesrow{display:flex; gap:14px; overflow-x:auto; padding:2px 18px 8px; -webkit-overflow-scrolling:touch;
  scrollbar-width:none; -ms-overflow-style:none; cursor:grab}
.storiesrow::-webkit-scrollbar{display:none}
.storiesrow.dragging{cursor:grabbing; scroll-behavior:auto}
.storiesrow.dragging .story{pointer-events:none}
.story{text-decoration:none; color:var(--ink); text-align:center; flex:0 0 auto; width:72px}
.storyring{display:block; width:66px; height:66px; margin:0 auto 4px; border-radius:50%;
  padding:3px; background:conic-gradient(from 210deg, var(--purple), #b06ae8, var(--snap), var(--purple))}
.storyring img{width:100%; height:100%; border-radius:50%; object-fit:cover; border:2.5px solid #fff; display:block; background:var(--chip)}
.storyname{font-size:11px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block}
/* ---------- join modal ---------- */
.joinmodal{position:fixed; inset:0; z-index:140}
.joinscrim{position:absolute; inset:0; background:rgba(20,8,35,.55)}
.joincard{position:relative; max-width:360px; margin:14vh auto 0; background:#fff; border-radius:16px;
  padding:26px 26px 22px; box-shadow:0 24px 60px rgba(20,8,35,.4)}
.joincard h2{margin:0 0 6px; font-size:22px}
.joincard p{margin:0 0 14px; color:var(--muted); font-size:14px}
.joincard input[type=email]{width:100%; border:1.5px solid var(--line2); border-radius:999px;
  padding:11px 16px; font-size:14.5px; outline:none; margin-bottom:10px}
.joincard input[type=email]:focus{border-color:var(--purple)}
.joinage{display:flex; gap:8px; align-items:center; font-size:13px; color:var(--muted); margin:0 0 14px}
.joincard .btn{width:100%}
.joinerr{color:#b03a2e; font-size:12.5px; margin-top:10px}
/* ---------- live feed: full-screen vertical snap (Snapchat/TikTok style) ---------- */
.livepage{background:#0d0a14}
.livepage .sitefoot, .livepage .bottomnav, .livepage .stories{display:none}
.livepage main{padding:0}
.livewrap{height:calc(100dvh - 54px); overflow-y:auto; scroll-snap-type:y mandatory;
  overscroll-behavior-y:contain; background:#0d0a14; -webkit-overflow-scrolling:touch}
.livehint{text-align:center; color:#8a7d9c; font-size:13px; padding:24px 16px}
.livecard{position:relative; height:100%; width:100%; max-width:560px; margin:0 auto;
  scroll-snap-align:start; scroll-snap-stop:always; overflow:hidden; background:#14101c}
.livecard video{width:100%; height:100%; object-fit:cover; display:block}
.liveswipe{position:absolute; left:50%; transform:translateX(-50%); bottom:64px; color:#fff;
  font-size:12px; font-weight:700; opacity:.75; animation:swipenudge 1.6s ease-in-out 2; pointer-events:none}
@keyframes swipenudge{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,-8px)}}
@media (prefers-reduced-motion: reduce){.liveswipe{animation:none}}
/* Snapchat-story-style overlay: subtle live line up top, caption band low */
.livetop{position:absolute; top:14px; left:16px; color:rgba(255,255,255,.85); font-size:12px;
  font-weight:600; letter-spacing:.03em; text-shadow:0 1px 4px rgba(0,0,0,.6);
  display:flex; align-items:center; gap:6px}
.livedot{width:7px; height:7px; border-radius:50%; background:#3ae08b; display:inline-block}
.livecaption{position:absolute; left:0; right:0; bottom:14%; padding:10px 20px; text-align:center;
  background:rgba(0,0,0,.45); color:#fff; font-size:17px; font-weight:600;
  font-family:-apple-system,BlinkMacSystemFont,sans-serif; text-shadow:0 1px 3px rgba(0,0,0,.4)}
.livemute{position:absolute; top:12px; right:12px; background:rgba(0,0,0,.5); color:#fff; border:none;
  border-radius:999px; padding:7px 14px; font-size:12px; font-weight:700; cursor:pointer}
.livemute.on{background:var(--purple)}
.qp.pending{opacity:.65; cursor:default}
.qp.pending .qpname{color:var(--faint)}

/* ---------- native posting form ---------- */
.postwrap{max-width:520px}
.postform{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:24px 26px; margin:22px 0}
.postform h2{font-size:20px; margin:0 0 12px}
.postform label{display:block; font-size:13px; font-weight:700; color:var(--muted); margin:12px 0 0}
.postform input:not([type=checkbox]), .postform select, .postform textarea{display:block; width:100%; margin-top:5px;
  border:1.5px solid var(--line2); border-radius:10px; padding:10px 14px; font-size:14.5px; font-family:inherit; outline:none; background:#fff}
.postform input:focus, .postform select:focus, .postform textarea:focus{border-color:var(--purple)}
.pf-row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.postform .joinage{display:flex; gap:8px; align-items:flex-start; font-weight:600; margin:16px 0 4px; font-size:12.5px}
.postform .joinage input{width:auto; margin-top:2px}
.postform .btn{width:100%; margin-top:16px}
.pf-note{color:var(--muted); font-size:14px}


/* ---------- 18+ age gate ---------- */
.agegate{position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center;
  background-color:var(--purple-deep); background-image:url(/img/pattern.jpg);
  background-size:cover; background-position:center; padding:20px; overflow-y:auto}
.agegate[hidden]{display:none}
.agecard{background:#1c1428; color:#ece7f4; max-width:480px; width:100%; border-radius:20px;
  padding:34px 32px 28px; text-align:center; box-shadow:0 30px 90px rgba(10,4,20,.6)}
.agelogo{height:34px; width:auto; margin:0 auto 16px; display:block}
.agecard h2{font-size:26px; margin:0 0 10px; color:#fff}
.agelead{font-size:14.5px; color:#b7abc9; margin:0 0 18px; line-height:1.6}
.agecheck{display:flex; gap:12px; text-align:left; font-size:12.5px; color:#b7abc9; line-height:1.6;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:12px;
  padding:14px 16px; margin:0 0 18px; cursor:pointer}
.agecheck input{margin-top:3px; flex:0 0 auto; width:16px; height:16px; accent-color:#7648a8}
.agecheck a{color:#c9a6f0}
.agebtn{width:100%; font-size:16px; background:#fff; color:var(--purple-deep)}
.agebtn:disabled{opacity:.45; cursor:not-allowed}
.ageleave{display:block; margin-top:14px; color:#8a7d9c; font-size:13.5px}
body.age-locked{overflow:hidden}

.joinage span{font-size:11.5px; line-height:1.55}
.joincard .btn:disabled{opacity:.45; cursor:not-allowed}

.menu-links .logout a{font-size:15px; color:rgba(255,255,255,.55); margin-top:10px; padding:8px 0}
.menu-links .logout a:hover{color:#fff}

/* ---------- about page ---------- */
.aboutportrait{width:96px !important; height:96px; border-radius:50%; object-fit:cover;
  border:3px solid var(--purple); display:inline-block; vertical-align:middle; margin-right:14px}
.aboutmeta{display:flex; align-items:center; gap:4px; font-size:17px}

/* ---------- follows ---------- */
.storyring{position:relative}
.storyadd{position:absolute; bottom:-2px; left:50%; transform:translateX(-50%);
  background:var(--purple); color:#fff; border:2px solid #fff; border-radius:999px;
  width:26px; height:20px; display:flex; align-items:center; justify-content:center;
  cursor:pointer; padding:0}
.storyadd .icn{width:11px; height:11px; stroke-width:3}
.storyadd.on{background:var(--snap); color:var(--snap-ink)}
.livefollow{position:absolute; top:12px; right:96px; background:rgba(0,0,0,.5); color:#fff;
  border:none; border-radius:999px; padding:7px 14px; font-size:12px; font-weight:700; cursor:pointer}
.livefollow.on{background:var(--purple)}
.followgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px; padding:22px 0}
.fcard{border:1px solid var(--line); border-radius:14px; background:#fff; padding:16px 12px; text-align:center}
.fcard .flink{text-decoration:none; color:var(--ink); display:block}
.fcard .storyring{width:72px; height:72px; margin:0 auto 8px; display:block}
.fcard .offring{background:var(--line2); filter:grayscale(1); opacity:.75}
.fcard b{display:block; font-size:14px; margin-bottom:2px}
.fstate{display:block; font-size:11.5px; color:var(--faint); margin-bottom:10px}
.fcard.islive .fstate{color:var(--good); font-weight:700}
.funfollow{background:none; border:1.5px solid var(--line2); border-radius:999px; padding:5px 14px;
  font-size:11.5px; font-weight:700; color:var(--muted); cursor:pointer}
.funfollow:hover{border-color:#b03a2e; color:#b03a2e}

/* ---------- snap-style live map ---------- */
.mappage .sitefoot, .mappage .bottomnav, .mappage .stories{display:none}
.mappage main{padding:0}
.mapwrap{position:relative; height:calc(100dvh - 54px)}
#snapmap{position:absolute; inset:0; background:#cdeaf7}
.mapme{position:absolute; left:50%; transform:translateX(-50%); bottom:22px; z-index:500;
  box-shadow:0 8px 24px rgba(40,20,70,.35)}
.smk-wrap, .smme-wrap{background:none; border:none}
.smk{display:block; width:52px; height:52px; border-radius:50%; padding:3px; position:relative;
  background:conic-gradient(from 210deg, var(--purple), #b06ae8, var(--snap), var(--purple));
  box-shadow:0 4px 14px rgba(20,8,35,.35); cursor:pointer}
.smk img{width:100%; height:100%; border-radius:50%; object-fit:cover; border:2.5px solid #fff; display:block}
.smk i{position:absolute; left:50%; bottom:-8px; transform:translateX(-50%);
  border:7px solid transparent; border-top:9px solid #fff; border-bottom:0}
.smpop b{display:block; font-size:14px; font-family:ui-rounded,-apple-system,sans-serif}
.smpop span{display:block; font-size:11.5px; color:#6b6178; margin:1px 0 7px}
.smpop a{display:block; background:var(--purple); color:#fff !important; border-radius:999px;
  text-align:center; padding:7px 14px; font-weight:800; font-size:12px; text-decoration:none}
.smpop a:hover{background:var(--purple-hover)}
.leaflet-popup-content-wrapper{border-radius:14px; box-shadow:0 10px 30px rgba(20,8,35,.3)}
.leaflet-popup-content{margin:12px 14px}
.smme{display:flex; flex-direction:column; align-items:center; color:var(--purple);
  filter:drop-shadow(0 4px 10px rgba(20,8,35,.4))}
.smme svg{width:38px; height:38px; background:#fff; border-radius:50%; padding:5px;
  border:3px solid var(--purple)}
.smme b{background:#fff; color:var(--ink); border-radius:999px; font-size:10px; padding:1px 8px;
  margin-top:3px; box-shadow:0 2px 6px rgba(20,8,35,.25)}
.maptoggle{position:absolute; top:14px; left:50%; transform:translateX(-50%); z-index:500;
  display:flex; background:#fff; border-radius:999px; padding:4px; gap:2px;
  box-shadow:0 6px 20px rgba(40,20,70,.25)}
.maptoggle button{border:none; background:none; border-radius:999px; padding:7px 18px;
  font-size:13px; font-weight:800; color:var(--muted); cursor:pointer; font-family:inherit}
.maptoggle button.on{background:var(--purple); color:#fff}
.navlogout{font-size:13px; opacity:.8; font-weight:600}
.navlogout:hover{opacity:1}
@media (max-width:820px){.navlinks a.navlogout{display:inline-block}}

/* ---------- dedicated /join/ account page ---------- */
.joinpage{min-height:calc(100dvh - 54px); display:flex; align-items:flex-start; justify-content:center;
  background-color:var(--purple-deep); background-image:url(/img/pattern.jpg); background-size:cover;
  background-position:center; padding:48px 18px 60px}
.joincardfull{background:#1c1428; color:#ece7f4; width:100%; max-width:460px; border-radius:18px;
  padding:30px 30px 26px; box-shadow:0 30px 80px rgba(10,4,20,.5)}
.joinlogo{height:30px; width:auto; display:block; margin:0 auto 20px}
.joincardfull h1{font-size:22px; margin:0 0 8px; color:#fff; text-align:center}
.jlead{color:#b7abc9; font-size:14.5px; line-height:1.6; margin:0 0 20px; text-align:center}
.joincardfull label{display:block; font-size:13px; font-weight:700; color:#a89bbd; margin:14px 0 0}
.joincardfull input:not([type=checkbox]){display:block; width:100%; margin-top:6px; border:1.5px solid #3a2f4a;
  background:#241730; color:#fff; border-radius:10px; padding:12px 15px; font-size:15px; outline:none}
.joincardfull input:focus{border-color:var(--purple-hover)}
.joincardfull .joinage{display:flex; gap:10px; align-items:flex-start; font-weight:600; color:#b7abc9;
  font-size:12px; line-height:1.55; margin:16px 0 4px}
.joincardfull .joinage input{width:auto; margin-top:2px; flex:0 0 auto}
.joincardfull .joinage a{color:#c9a6f0}
.joincardfull .btn.big{width:100%; margin-top:18px; font-size:16px}
.joincardfull .btn.purple:disabled{opacity:.45; cursor:not-allowed}
.jresend{text-align:center; margin:14px 0 0}
.linkbtn{background:none; border:none; color:#c9a6f0; font-size:13px; cursor:pointer; text-decoration:underline}
.joincardfull .joinerr{color:#f0a08e; font-size:13px; margin-top:12px; text-align:center}


/* Prevent iOS Safari auto-zoom on input focus (needs >=16px) */
@media (max-width:760px){
  input[type=text], input[type=email], input[type=search], input[type=number],
  input:not([type]), textarea, select{ font-size:16px }
}


/* ---------- mobile: full-screen anonymous chat ---------- */
@media (max-width:760px){
  body.chatting{ overflow:hidden }
  body.chatting .stories, body.chatting .bottomnav, body.chatting .sitefoot,
  body.chatting .talkpage > .wrap > h1, body.chatting .talkpage > .wrap > p,
  body.chatting .talkunder, body.chatting .talkpage .faq{ display:none }
  body.chatting .talkpage{ padding:0 }
  /* Full-screen chat covers the sticky header so iOS focus-zoom / keyboard
     viewport shifts can never misalign it against a 54px offset. */
  body.chatting .chatui{
    position:fixed; left:0; right:0; top:0; bottom:0;
    max-width:none; margin:0; border-radius:0; z-index:100;
    display:flex; flex-direction:column; overflow:hidden;
  }
  body.chatting .chatstatus{ flex:0 0 auto; padding-top:calc(11px + env(safe-area-inset-top)) }
  body.chatting .chatlog{ flex:1 1 auto; height:auto; min-height:0; overflow-y:auto }
  body.chatting .chatform{ flex:0 0 auto; padding-bottom:calc(12px + env(safe-area-inset-bottom)) }
  body.chatting .chatactions{ flex:0 0 auto }
}