/* =====================================================================================
   Paraplan · Apple HIG (iOS 26, Liquid Glass) layer for every app page (not the logged-out landing).
   Loaded after app.css + social.css (and on /privacy, /terms, /admin/stats). Source: the approved pp-design/hig mockups.
   Floating glass tab bar (Stories, Profile) + separate 62pt yellow glass Record circle · system font at HIG text sizes ·
   16pt margins · 52pt capsule buttons · inset glass sheets with grabbers (swipe down to dismiss) · 44pt minimum targets.
   ===================================================================================== */
:root{
  --sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);
  --sf:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",Inter,system-ui,sans-serif;
  --display:var(--sf);--ui:var(--sf);
  --m:16px;
  --bg:#FAF6EF;                                  /* cream = systemGroupedBackground */
  --cell:#FFFFFF;                                /* secondarySystemGroupedBackground */
  --glass:rgba(250,246,239,.62);                 /* cream-tinted regular glass */
  --glass-strong:rgba(250,246,239,.84);
  --glass-dark:rgba(30,28,24,.42);               /* glass over video */
  --glass-edge:inset 0 0 0 .5px rgba(255,255,255,.7),inset 0 1px 0 rgba(255,255,255,.85);
  --glass-edge-d:inset 0 0 0 .5px rgba(255,255,255,.28),inset 0 1px 0 rgba(255,255,255,.22);
  --glass-shadow:0 8px 32px rgba(27,26,23,.16),0 1px 3px rgba(27,26,23,.10);
  --blur:blur(24px) saturate(1.8);
  --label2:rgba(27,26,23,.62);                   /* secondary label, 5.3:1 on cream */
  --label3:rgba(27,26,23,.40);
  --fill3:rgba(118,104,80,.12);                  /* tertiary fill */
  --sep:rgba(60,50,30,.13);                      /* separator */
  --red:#D93A2B;
  --r-group:26px;                                /* iOS 26 inset-grouped radius */
  --tabb:max(calc(var(--sab) - 8px),16px);       /* floating tab bar distance from the bottom edge */
  --sheetb:max(calc(var(--sab) - 18px),12px);    /* inset sheets: same 16pt gap as the sides on Face ID iPhones */
}
/* ---------- base ---------- */
html.hig body{font-family:var(--sf);letter-spacing:-.2px;-webkit-font-smoothing:antialiased}
.paper,body.paper{background:var(--bg)!important;background-image:none!important}
.night,body.night{background-image:none!important}
.pad{padding-left:var(--m);padding-right:var(--m)}
/* HIG type ramp: Large Title 34/41 · Title1 28/34 · Title2 22/28 · Title3 20/25 · Headline 17/22 · Body 17/22 · Callout 16/21 · Subheadline 15/20 · Footnote 13/18 · Caption 12/16 */
.h1{font-family:var(--sf);font-size:34px;line-height:41px;font-weight:700;letter-spacing:-.6px}
.h1.sm{font-size:28px;line-height:34px;letter-spacing:-.5px}
.h2{font-family:var(--sf);font-size:22px;line-height:28px;font-weight:700;letter-spacing:-.4px}
.h3{font-family:var(--sf);font-size:20px;line-height:25px;font-weight:600;letter-spacing:-.4px}
.lead{font-size:17px;line-height:22px;font-weight:400;color:var(--label2);letter-spacing:-.3px;margin-top:8px}
.small{font-size:15px;line-height:20px;letter-spacing:-.2px}
.muted{color:var(--label2)}
.label{font-size:13px;line-height:18px;font-weight:600;letter-spacing:-.05px;text-transform:none;color:var(--label2)}
.hint{font-size:13px;font-weight:500;color:var(--label2)}
.err{font-size:13px;font-weight:500;color:var(--red)}
.ellip{letter-spacing:-.2px}
/* ---------- navigation bar (44pt row + glass circular buttons) ---------- */
.top{height:56px;padding:0 var(--m);position:relative}
.top.pad0{padding:0 var(--m)}
.brand{font-family:var(--sf);font-size:22px;line-height:28px;font-weight:700;letter-spacing:-.5px;gap:8px}
.brand .dot{width:11px;height:11px;border-radius:6px;box-shadow:none}
.iconbtn,.paper .iconbtn,button.iconbtn{width:44px;height:44px;border-radius:22px;border:0;color:var(--ink);
  background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:var(--glass-edge),0 2px 10px rgba(27,26,23,.08)}
.iconbtn svg{width:20px;height:20px}
.iconbtn.glass,.iconbtn.nightb,.blackbg .iconbtn,.night .iconbtn{background:var(--glass-dark)!important;color:#fff;border:0;box-shadow:var(--glass-edge-d)!important;-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
.sheet .iconbtn{background:var(--fill3)!important;box-shadow:none!important;-webkit-backdrop-filter:none;backdrop-filter:none;width:36px;height:36px;border-radius:18px;margin-right:-4px}
.sheet .iconbtn svg{width:16px;height:16px}
/* pushed-screen titles sit centered in the bar (Headline 17) */
.top>.h3{position:absolute;left:72px;right:72px;margin:0!important;text-align:center;font-size:17px;line-height:22px;font-weight:600;letter-spacing:-.4px;pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top .between{}
/* glass group: several trailing bar buttons share one capsule  */
.gg{display:flex;align-items:center;height:44px;border-radius:22px;padding:0 2px;background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:var(--glass-edge),0 2px 10px rgba(27,26,23,.08)}
.gg .ghostbtn{width:44px;height:44px;border-radius:22px;color:var(--ink)}
.gg .ghostbtn svg{width:20px;height:20px}
.ghostbtn{width:44px;height:44px}
/* large title under the bar on tab roots */
.sx-ptop{height:56px}
.sx-ptop>.h3.root{position:static;text-align:left;font-size:34px;line-height:41px;font-weight:700;letter-spacing:-.6px;pointer-events:auto}
/* ---------- buttons: capsules ---------- */
.btn{height:52px;border-radius:26px;font-size:17px;font-weight:600;letter-spacing:-.4px;gap:8px}
.btn.primary,.pill.primary{background:var(--sun);color:var(--ink);box-shadow:none}
.btn.primary:active,.pill.primary:active{background:#F5BD1F;transform:scale(.98)}
.btn.secondary,.sx .btn.secondary{background:var(--fill3);border:0!important;color:var(--ink);box-shadow:none}
.btn.google{background:var(--cell);color:var(--ink);border:0;box-shadow:inset 0 0 0 1px rgba(27,26,23,.14)}
.btn.danger{background:var(--red);box-shadow:none}
.btn svg{width:20px;height:20px}
.pill{height:50px;border-radius:25px;font-size:17px;font-weight:600;letter-spacing:-.4px;padding:0 22px}
.textlink{height:44px;font-size:17px;font-weight:500;letter-spacing:-.4px;text-decoration:none;color:var(--ink)}
.textlink.light{color:rgba(255,255,255,.92)}
.textlink.small-link{font-size:15px;font-weight:500;color:var(--label2)}
.textlink.danger{color:var(--red)}
.foot{padding-top:12px;padding-bottom:calc(16px + var(--sab));gap:6px}
body.dev .foot{padding-bottom:calc(16px + var(--sab))}
.or-line{font-size:13px;font-weight:500;color:var(--label2);margin:8px 0}
.or-line::before,.or-line::after{background:var(--sep)}
.legal{font-size:13px;font-weight:400;color:var(--label2);margin-top:8px}.legal a{color:var(--label2);text-decoration:underline;text-decoration-color:var(--label3)}
/* ---------- text fields ---------- */
.input{height:52px;border-radius:14px;background:var(--cell);border:0;box-shadow:inset 0 0 0 1px rgba(27,26,23,.10);padding:0 16px;font-family:var(--sf);font-size:17px;font-weight:400;letter-spacing:-.4px}
.input:focus,.input.focus:focus,.ccpick:focus-within{border:0;box-shadow:inset 0 0 0 2px var(--ink),0 0 0 4px rgba(255,201,51,.35)}
.input::placeholder{color:var(--label3);font-weight:400}
.input.big{height:52px;font-size:17px;border:0}
.input.area{font-size:17px;line-height:22px;padding:14px 16px;border-radius:18px}
.input.askta{font-size:17px;line-height:22px;padding:15px 16px;border-radius:18px;font-weight:500}
.ccpick{min-width:92px;font-weight:500}
.row10{gap:8px}
.boxes i{width:50px;height:58px;border-radius:14px;background:var(--cell);border:0;box-shadow:inset 0 0 0 1px rgba(27,26,23,.10);font-family:var(--sf);font-weight:600;font-size:28px}
.boxes i.cur{border:0;box-shadow:inset 0 0 0 2px var(--ink),0 0 0 4px rgba(255,201,51,.35)}
/* ---------- cards & inset-grouped lists ---------- */
.card{background:var(--cell);border:0;border-radius:var(--r-group);box-shadow:none}
.tag{height:22px;padding:0 9px;border-radius:11px;font-size:12px;font-weight:600;letter-spacing:0;text-transform:none;gap:4px}
.tag.need{background:rgba(255,201,51,.28);border:0}
.tag.work{border:0;background:var(--fill3)}
.tag.ghost{border:0;background:var(--fill3);color:var(--label2)}
.badge.unread{height:22px;border-radius:11px;font-size:12px;font-weight:600;letter-spacing:0;background:var(--sun);color:var(--ink)}
.h1 .badge.unread{font-family:var(--sf);height:24px;font-size:13px;vertical-align:6px}
.avi{font-family:var(--sf);font-weight:600}
/* ---------- sheets: inset Liquid Glass, rounded, grabber ---------- */
.grab{width:36px;height:5px;border-radius:2.5px;background:rgba(27,26,23,.22);margin:6px auto 0}
.sheet{left:var(--m);right:var(--m);bottom:var(--sheetb);border-radius:36px;background:var(--glass-strong);
  -webkit-backdrop-filter:blur(30px) saturate(1.8);backdrop-filter:blur(30px) saturate(1.8);box-shadow:var(--glass-edge),0 10px 40px rgba(27,26,23,.28);padding-top:0}
.sheet .pad{padding-left:20px;padding-right:20px}
.sheet .foot{padding-bottom:20px!important}
.sheet .h2,.sheet .h1.sm{font-size:22px;line-height:28px;letter-spacing:-.4px}
.scrim,.sx-scrim,.modal-scrim{background:rgba(20,19,17,.30)!important;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.sx-sheet{left:var(--m)!important;right:var(--m)!important;bottom:var(--sheetb)!important;border-radius:36px;background:var(--glass-strong)!important;background-image:none!important;
  -webkit-backdrop-filter:blur(30px) saturate(1.8);backdrop-filter:blur(30px) saturate(1.8);box-shadow:var(--glass-edge),0 10px 40px rgba(27,26,23,.25);padding:6px 20px 20px}
.sx-sheet .grab{margin:0 auto 18px}
.modal-wrap{padding:0 var(--m) var(--sheetb)}
.modal{border-radius:36px;border:0!important;background:var(--glass-strong)!important;-webkit-backdrop-filter:blur(30px) saturate(1.8);backdrop-filter:blur(30px) saturate(1.8);box-shadow:var(--glass-edge),0 10px 40px rgba(27,26,23,.25);padding:24px 20px 20px}
.modal .h2,.modal .h1{font-size:22px;line-height:28px}
.modal-ic{width:48px;height:48px;border-radius:24px;border:0;background:#FBE3E1;margin-bottom:12px}
.modal-ask{border:0;border-radius:14px;background:var(--fill3);font-weight:500;font-size:15px}
.modal-btns{gap:10px}.modal .btn.secondary{border:0}
/* ---------- floating Liquid Glass tab bar: Stories + Profile, Record as its own glass circle ---------- */
#app.hasnav{padding-bottom:calc(108px + var(--sab))}
.sx-nav{background:transparent!important;border:0!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;height:auto!important;padding:0!important;
  left:var(--m);right:var(--m);bottom:var(--tabb);pointer-events:none;z-index:50}
.sx-nav .in{position:relative;display:grid;grid-template-columns:1fr 1fr 62px;align-items:center;height:62px;max-width:none;pointer-events:none}
.sx-nav .in::before{content:"";position:absolute;left:0;top:0;bottom:0;right:74px;border-radius:31px;background:var(--glass);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:var(--glass-edge),var(--glass-shadow)}
.sx-nav a{position:relative;z-index:1;pointer-events:auto;width:auto;height:54px;margin:0 4px;border-radius:27px;gap:2px;justify-content:center;
  font-size:11px;font-weight:600;letter-spacing:0;color:var(--label2)}
.sx-nav a svg{width:24px;height:24px}
.sx-nav a:first-child{grid-column:1;margin-left:4px}
.sx-nav a[href="/profile"]{grid-column:2;grid-row:1;margin-right:16px}
.sx-nav a.on{color:var(--ink);background:rgba(27,26,23,.08)}
.sx-nav a.rec{grid-column:3;grid-row:1;width:62px;height:62px;margin:0;border-radius:31px;background:transparent}
.sx-nav a.rec>span:last-child{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.sx-nav .recb{width:62px;height:62px;border-radius:31px;margin:0;border:0;background:rgba(255,201,51,.92);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  box-shadow:inset 0 0 0 .5px rgba(255,255,255,.6),inset 0 1px 0 rgba(255,255,255,.7),var(--glass-shadow)}
.sx-nav .recb i{width:22px;height:22px;border-radius:11px;background:#D93036;box-shadow:0 0 0 3px #fff}
.sx-nav.dark .in::before{background:rgba(30,28,24,.55);box-shadow:var(--glass-edge-d),0 8px 32px rgba(0,0,0,.4)}
.sx-nav.dark a{color:rgba(255,255,255,.7)}.sx-nav.dark a.on{color:#fff;background:rgba(255,255,255,.14)}
body.dev .sx-nav{padding-bottom:0!important}
/* ---------- Stories home ---------- */
.banner{margin:4px var(--m) 8px;border-radius:24px;padding:12px 16px;min-height:64px}
.banner b{font-family:var(--sf);font-weight:600;font-size:17px;line-height:22px;letter-spacing:-.4px}
.banner small{font-size:13px;line-height:18px;font-weight:400;letter-spacing:-.1px}
.banner .cd{font-family:var(--sf);font-weight:600;font-size:20px;letter-spacing:-.4px;font-variant-numeric:tabular-nums}
.banner .ic{width:40px;height:40px}
.banner.live{border:0;background:rgba(15,122,86,.12);box-shadow:inset 0 0 0 .5px rgba(15,122,86,.18)}
.sx-srow{padding:4px var(--m) 2px;gap:16px}
.sbub{font-size:12px;font-weight:500;width:68px;gap:6px}.sbub b{font-weight:500;width:72px}
.sbub .ring{width:68px;height:68px;border-radius:34px}
.sbub .addring{width:68px;height:68px;border-radius:34px;border:0;background:var(--fill3)}
.sbub .plus{width:32px;height:32px;border-radius:16px;box-shadow:none;font-weight:500;font-size:24px}
.sbub .nbadge{font-size:11px;font-weight:600}
.sbub .ring>span.init{font-family:var(--sf);font-weight:600}
.sx-grid{padding:0 var(--m);gap:8px}
.sx-tile{border-radius:20px}
.sx-tile.unread{box-shadow:0 0 0 2.5px var(--bg),0 0 0 5px var(--sun)}
.sx-tile .who{font-size:13px;font-weight:600;left:10px;top:10px}
.sx-tile .newdot{font-size:11px;font-weight:600;letter-spacing:0;padding:3px 7px;border-radius:9px}
.sx-tile .ask{font-family:var(--sf);font-weight:600;font-size:15px;line-height:20px;letter-spacing:-.3px}
.sx-tile .meta{font-size:12px;font-weight:500}
.sx-tile .meta .dur{background:rgba(20,19,17,.42);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:8px;font-variant-numeric:tabular-nums}
.sx-empty{border-radius:var(--r-group);padding:16px}
/* ---------- lock sheet (approved) ---------- */
.sx-lockui .scrim2{background:rgba(20,19,17,.30);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
body.locked .sx-nav{z-index:85}
.sx-lockui .lsheet{left:var(--m);right:var(--m);bottom:calc(var(--tabb) + 62px + 10px);max-width:none;
  background:rgba(250,246,239,.80)!important;-webkit-backdrop-filter:blur(30px) saturate(1.8);backdrop-filter:blur(30px) saturate(1.8);
  border-radius:36px;padding:5px 20px 20px;box-shadow:var(--glass-edge),0 10px 40px rgba(27,26,23,.22)}
.sx-lockui .lsheet .grab{width:36px;height:5px;border-radius:2.5px;background:rgba(27,26,23,.22);margin:0 auto 20px}
.sx-lockui .lsheet .big{width:56px;height:56px;border-radius:28px;box-shadow:none;margin:0 auto 12px}
.sx-lockui .lsheet .big svg{width:26px;height:26px}
.sx-lockui .lsheet .h2{font-size:28px;line-height:34px;font-weight:700;letter-spacing:-.6px}
.sx-lockui .lsheet .cdpill{margin-top:12px;height:32px;padding:0 14px;border-radius:16px;border:0;background:var(--fill3);font-size:15px;font-weight:600;letter-spacing:-.2px;font-variant-numeric:tabular-nums;color:var(--ink)}
.sx-lockui .lsheet .btn{margin-top:24px;height:52px;border-radius:26px;font-size:17px;font-weight:600;letter-spacing:-.4px;box-shadow:none}
.sx-lockui.tapped .lsheet .btn{transform:scale(.97);box-shadow:none;background:#F5BD1F}
.sx-lockui .lsheet{background-image:none!important}
.sbub .lkb{border-color:var(--bg)}
.sx-tile .lkc{background:rgba(255,255,255,.72);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:var(--glass-edge),0 4px 14px rgba(0,0,0,.18)}
/* ---------- profile ---------- */
.sx-phead{gap:16px;margin-top:8px}
.sx-phead .pname{font-family:var(--sf);font-size:22px;line-height:28px;font-weight:700;letter-spacing:-.5px}
.kv{font-size:15px;line-height:20px;font-weight:400;color:var(--label2);margin-top:2px}.kv b{font-weight:600}
.psocs{gap:0}.psoc{width:44px;height:44px;border-radius:22px;background:var(--fill3);margin-left:6px}
.wlink{font-size:15px;font-weight:500;text-decoration:none;color:var(--ink);gap:6px}
.pbio{font-size:17px;line-height:22px;letter-spacing:-.4px}
.prow{gap:10px}.prow .label{font-size:13px;line-height:18px;min-width:78px}
.prow b{font-weight:600;font-size:15px}
.mchips{gap:6px}.mchip{height:28px;padding:0 12px;border-radius:14px;font-weight:500;font-size:13px;background:rgba(255,201,51,.26)}
/* fill-in card */
.pf{margin-top:16px;padding:16px;border-radius:var(--r-group);border:0;box-shadow:none;background:var(--cell)}
.pf-dots i{height:4px}.pf-dots i.d{background:var(--ink)}
.pf-step{font-size:13px;font-weight:500;color:var(--label2);letter-spacing:0;font-variant-numeric:tabular-nums}
.pf-q{font-family:var(--sf);font-size:20px;line-height:25px;font-weight:600;letter-spacing:-.4px}
.pf-sub{font-size:15px;line-height:20px;color:var(--label2)}
.pf .input{height:48px;border-radius:14px;font-size:17px;background:var(--bg);box-shadow:none}
.pf .input:focus-within{box-shadow:inset 0 0 0 2px var(--ink),0 0 0 4px rgba(255,201,51,.35);border:0;padding:0 16px}
.pf .input input{font:400 17px var(--sf);letter-spacing:-.4px}
.pf-act{gap:8px;margin-top:12px}
.pf-save{height:44px;padding:0 24px;border-radius:22px;box-shadow:none;font:600 17px var(--sf);letter-spacing:-.4px}
.pf-skip{height:44px;padding:0 16px;border-radius:22px;background:var(--fill3);text-decoration:none;font:600 17px var(--sf);letter-spacing:-.4px;color:var(--ink)}
.pf-chip{font-weight:500;font-size:15px}.pf-sug button{border:0;background:var(--fill3);font:500 13px var(--sf);height:32px;border-radius:16px;padding:0 12px}
.pf-add{font:600 17px var(--sf);height:44px}
/* edit profile = grouped form */
.sx-savetop{height:44px;padding:0 18px;border-radius:22px;background:var(--sun);font:600 17px var(--sf);letter-spacing:-.4px}
.sx-photo-edit{margin-top:8px}
.sx-camb{width:32px;height:32px;border:3px solid var(--bg)}
.sx-change{font-weight:500;font-size:17px;text-decoration:none;color:var(--ink);height:44px;display:flex;align-items:center;margin-top:2px}
.sx-form .f{padding:12px 16px;border-top:0;position:relative}
.sx-form .f+.f::before{content:"";position:absolute;left:16px;right:0;top:0;height:.5px;background:var(--sep)}
.fl{font-size:13px;line-height:18px;font-weight:500;color:var(--label2);margin-bottom:4px}.cnt{font-weight:400;color:var(--label3);font-variant-numeric:tabular-nums}
.fi{min-height:44px;border:0;background:transparent;padding:0;font:400 17px var(--sf);letter-spacing:-.4px;border-radius:0}
.fi:focus,.fi:focus-within{box-shadow:none}
.fi.area{padding:0;min-height:66px;line-height:22px}
.fi.icn{gap:10px;color:var(--label2)}.fi.icn input{font:400 17px var(--sf);letter-spacing:-.4px;height:44px}
.fi::placeholder,.fi input::placeholder{color:var(--label3);font-weight:400}
.hchip{height:32px;border-radius:16px;border:0;background:rgba(255,201,51,.28);font-weight:500;font-size:15px;padding:0 4px 0 12px}
.hchip .hx{width:28px;height:28px;border-radius:14px}
.hchip.add{border:0;background:var(--fill3);color:var(--ink);padding:0 12px}
/* settings = inset grouped list */
.set .it{min-height:52px;padding:0 16px;border-top:0;font-weight:400;font-size:17px;letter-spacing:-.4px;gap:14px;position:relative}
.set .it+.it::before{content:"";position:absolute;left:60px;right:0;top:0;height:.5px;background:var(--sep)}
.set .it .ic{width:30px;height:30px;border-radius:8px;background:rgba(255,201,51,.30)}
.set .it .ic span{font-size:16px!important}
.set .it .v{font-size:17px;font-weight:400;color:var(--label2);letter-spacing:-.4px}
.set .it .chev{color:var(--label3)}
.set .it.danger{color:var(--red)}.set .it.danger .ic{background:#FBE3E1}
.set .it .ro{font-size:13px}
.verified:not(.card){font-size:12px;font-weight:600;padding:3px 8px;border-radius:10px}
.tog{width:51px;height:31px;border-radius:16px;background:#34C759}.tog::after{width:27px;height:27px;border-radius:14px;top:2px;right:2px;box-shadow:0 3px 8px rgba(0,0,0,.15),0 1px 1px rgba(0,0,0,.16)}
.tog.off{background:rgba(120,120,128,.16)}.tog.off::after{right:22px}
.label.mt22,.label.mt6{margin-left:16px}
/* connections */
.sx-search{height:44px;border-radius:22px;background:var(--fill3);border:0;padding:0 14px;color:var(--label2);gap:8px}
.sx-search input{font:400 17px var(--sf);letter-spacing:-.4px}
.sx-search input::placeholder{color:var(--label2)}
.clist .crow{min-height:64px}
.cname{font-weight:600;font-size:17px;letter-spacing:-.4px}.csub{font-weight:400;font-size:15px}
.cmore{width:44px;height:44px;border-radius:22px;color:var(--label2)}
.clist .crow+.crow::before{left:70px}
.note{border:0;border-radius:18px;background:rgba(255,201,51,.18);font-weight:400;font-size:15px;line-height:20px;padding:12px 14px}
/* invite sheet */
.sx-invsheet .h2{text-align:center;margin-top:2px}
.sx-invpill{border:0;background:var(--cell);border-radius:26px;padding:4px 4px 4px 16px;margin-top:16px;box-shadow:inset 0 0 0 .5px rgba(27,26,23,.08)}
.sx-invpill .u{font-weight:500;font-size:15px;letter-spacing:-.2px}
.sx-invcopy{height:44px;padding:0 20px;border-radius:22px;font:600 17px var(--sf);letter-spacing:-.4px}
.sx-invnote{font-size:13px;margin-top:12px}
/* locked profile + join/connect */
.sx-lock{border-color:var(--bg)}
.cpair .avi{box-shadow:0 0 0 4px var(--bg)}.clink{box-shadow:0 0 0 4px var(--bg)}
.okbadge{border-color:var(--bg)}
.sx-scanbg{background:linear-gradient(180deg,#2A2620,#141311)}
.sx-rowc,.sx-latest{border-radius:20px}
.sx-joinh{font-size:28px;line-height:34px}
.sx-latest .thumb{border-radius:12px}
.confetti i{border-radius:3px}
/* ---------- your requests / inbox ---------- */
.list{gap:10px}
.reqrow,.askcard{padding:10px;gap:14px;border-radius:22px}
.thumb{border-radius:14px}
.thumb .dur{background:rgba(20,19,17,.42);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.asktxt{font-weight:600;font-size:17px;line-height:22px;letter-spacing:-.4px}
.reqdel{width:44px;height:44px;border-radius:22px;border:0;background:transparent;top:4px;right:4px}
.reqwrap .reqrow{padding-right:52px}
.alert-banner{border-radius:20px;box-shadow:none;font-size:15px;padding:10px 14px}
.statslink{margin-left:auto;margin-right:8px;height:44px;display:inline-flex;align-items:center;gap:6px;padding:0 16px;border-radius:22px;font-weight:600;font-size:15px;letter-spacing:-.2px;color:var(--ink);
  background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:var(--glass-edge),0 2px 10px rgba(27,26,23,.08)}
.avbtn{width:44px;height:44px;display:flex;align-items:center;justify-content:center}
.reply{padding:14px;border-radius:var(--r-group)}.reply.new{box-shadow:inset 0 0 0 2px rgba(255,201,51,.8)}
.rname{font-weight:600;font-size:17px;letter-spacing:-.4px}
.rtext{font-size:17px;line-height:22px;letter-spacing:-.4px;background:var(--bg);border-radius:6px 20px 20px 20px;padding:10px 14px}
.rvid{border-radius:18px}
.pill.thank{height:44px;padding:0 18px;border-radius:22px;border:0;background:var(--fill3);font-weight:600;font-size:15px}
.thanked{font-weight:600;font-size:15px}
.newdot{background:var(--sun)}
/* attachment + link boxes (attach.css / link.css) */
.att-row,.att-own,.lk-card,.lk-own{border-radius:18px!important;border:0!important;box-shadow:none!important}
/* ---------- full-screen media: request page, story viewer, camera, share ---------- */
.blackbg .top,.night .top{height:56px}
.storyhead{padding:8px var(--m) 0;gap:10px}
.storyhead .vwho b{font-size:15px;font-weight:600;letter-spacing:-.2px}.storyhead .vmeta{font-size:13px;font-weight:400}
.muted-w{color:rgba(255,255,255,.78);font-weight:400}
.viewfoot.strip{padding:0 var(--m) calc(20px + var(--sab));gap:12px}
.viewfoot.strip .caption{font-family:var(--sf);font-size:17px;line-height:22px;font-weight:600;letter-spacing:-.4px}
.vacts{gap:10px}
.vbtn{height:52px;border-radius:26px;font-size:17px;font-weight:600;letter-spacing:-.4px}
.vwrite{background:rgba(255,255,255,.24)!important;color:#fff!important;-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:var(--glass-edge-d)!important}
.vwrite svg{stroke:#fff}
.viewfoot.strip .fine,.fine{font-size:12px;font-weight:400;color:rgba(255,255,255,.66)}
.caption{font-family:var(--sf)}
/* write-reply view: glass sheet over the dimmed video */
.view-write{background:#141311}
.mini{border-radius:28px;width:180px;height:220px;margin-top:calc(14px + var(--sat))}
.mininame{font-weight:600}
.view-write .sheet{top:auto!important;height:auto;min-height:0}
.view-write .sheet .h1.sm{font-size:22px}
.sheet.confirm,.sheet.claim{min-height:0!important}
/* thanks / sent / register */
.view-sent .h1,.view-thanks .h1{font-size:34px}
.okbadge{background:#34A853}
.bubble{border:0;border-radius:20px 20px 6px 20px;font-size:17px;line-height:22px;letter-spacing:-.4px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.thanks-card{background:var(--sun);background-image:none;border-radius:32px;box-shadow:0 18px 40px rgba(27,26,23,.16)}
.tc-text{font-family:var(--sf);font-weight:700;font-size:22px;line-height:28px;letter-spacing:-.4px}.tc-sign{font-size:17px}
.tag.live{background:var(--green)}
/* camera */
.camtop{padding:calc(8px + var(--sat)) var(--m) 0}
.timer{font-weight:600;font-size:15px;height:32px;display:flex;align-items:center;padding:0 12px;border-radius:16px;font-variant-numeric:tabular-nums;background:var(--glass-dark);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
.cam.recording .timer{background:#D93036}
.recbtn{width:80px;height:80px}
.recbtn i{width:64px;height:64px}
.camhint{font-weight:500;font-size:15px;text-shadow:0 1px 6px rgba(0,0,0,.4)}
.uplink{height:44px!important;padding:0 18px!important;border-radius:22px;background:var(--glass-dark);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:var(--glass-edge-d);
  text-decoration:none!important;font-size:15px!important;font-weight:500!important;width:auto!important}
.cambottom{padding-bottom:calc(28px + var(--sab))}
.askform{min-height:0}
.askform .h2{font-size:22px}
.askform .tag.need{height:26px;border-radius:13px;font-size:13px}
.asr-state{font-size:13px}
.progress{height:4px;border-radius:2px;background:var(--fill3)}
/* share page */
.target{font-size:12px;font-weight:500;color:var(--ink);gap:6px}
.target span{width:60px;height:60px;border-radius:30px;border:0;box-shadow:none}
.target b{font-weight:500}
.preview{border-radius:20px!important;overflow:hidden}
.ptitle{font-weight:600;font-size:15px;line-height:20px;letter-spacing:-.2px}
.playdot{box-shadow:none;background:rgba(255,255,255,.85);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
/* story viewer */
.sx-stage .topbar{padding-left:var(--m);padding-right:var(--m);gap:8px;background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,0))}
.posp{height:32px;padding:0 12px;border-radius:16px;background:var(--glass-dark);box-shadow:var(--glass-edge-d);font-weight:600;font-size:15px;letter-spacing:0;font-variant-numeric:tabular-nums}.posp b{font-weight:600}
.scard{border-radius:0}
.scard .vhead{left:var(--m);top:calc(64px + var(--sat))}
.scard .vname{font-weight:600;font-size:17px;letter-spacing:-.4px}.scard .vsub{font-size:13px;font-weight:400;opacity:.85}
.scard .vfoot{padding:0 52px calc(24px + var(--sab)) var(--m);gap:12px}
.scard .caption{font-family:var(--sf);font-size:22px;line-height:28px;font-weight:700;letter-spacing:-.4px}
.sx .chip{height:32px;padding:0 12px;border-radius:16px;background:var(--glass-dark);box-shadow:var(--glass-edge-d);font-size:15px;font-weight:500;letter-spacing:-.2px}
.vbtns{gap:10px}.vbtns .pill{height:52px;border-radius:26px}
.sx .pill.glass{background:rgba(255,255,255,.24);box-shadow:var(--glass-edge-d);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);padding:0 22px}
.rail{right:12px}.rail i{width:4px;border-radius:2px}
/* ---------- assistants / connect / stats ---------- */
.steps li{border:0;border-radius:16px;background:var(--bg);font-size:15px;line-height:20px}
.steps .num{font-family:var(--sf);font-weight:600;background:var(--sun);color:var(--ink);width:26px;height:26px}
.howto,.tok-new{padding:16px}.howto code,.docs code,.howto-man code{font-size:12.5px;border-radius:6px}
.cn-main{font-size:17px;line-height:22px;font-weight:400;letter-spacing:-.4px}
.tok-ic{border:0;border-radius:10px;background:rgba(255,201,51,.3);width:40px;height:40px}
.tok-name{font-weight:600;font-size:17px;letter-spacing:-.4px}
.tok-revoke{height:36px;border-radius:18px;border:0;background:#FBE3E1;color:var(--red);font-weight:600;font-size:15px}
.adv>summary{font-weight:600;font-size:17px;letter-spacing:-.4px;min-height:52px}
.cn-ic{border:0;border-radius:18px;background:var(--cell)}.cn-ic.sun{background:rgba(255,201,51,.3)}
.cn-dots{font-family:var(--sf);font-weight:600}
.cn-card{padding:4px 16px}.cn-row{font-size:15px;line-height:20px}.cn-row+.cn-row{border-top:.5px solid var(--sep)}
.cn-note,.tok-warn{border:0;border-radius:14px;background:rgba(255,201,51,.18)}
.cn-title b{font-weight:700}

/* ---------- details ---------- */
.sheet .lead,.night .sheet .lead{color:var(--label2)}
.sheet .label{color:var(--label2)}
.reply .tags{gap:4px}
.kv{white-space:nowrap}
.set .it .v{white-space:nowrap;max-width:none}
.set .it .ic svg{width:18px;height:18px}
/* write reply: the video stays behind the glass sheet, dimmed */
.view-write .mini{position:absolute;inset:0;width:auto;height:auto;margin:0;border-radius:0;box-shadow:none;background-position:center 30%}
.view-write .mini{filter:brightness(.62) saturate(.9)}
.view-write .mininame{left:var(--m);top:calc(var(--sat) + 14px);z-index:1;font-size:15px;gap:8px}
/* connect confirm: sheet over the cream app, not the old QR-scanner backdrop */
html.pg-sx-confirm body{background:var(--bg)!important}
.pg-sx-confirm .sx-scanbg{background:var(--bg)}
/* document + link pickers: filled cells, no dashed outlines */
html.hig .att-add,html.hig .att-add.slim{border:0;border-radius:18px;background:var(--cell);box-shadow:none;min-height:52px;padding:10px 16px}
html.hig .night .att-add,html.hig .sheet .att-add{background:rgba(255,255,255,.72)}
html.hig .att-add b{font-weight:600;font-size:17px;letter-spacing:-.4px}.att-add .muted{font-weight:400}.att-sub{font-weight:400}
html.hig .lk-add{border:0;border-radius:18px;background:var(--cell);padding:4px 4px 4px 12px;min-height:52px}
html.hig .sheet .lk-add{background:rgba(255,255,255,.72)}
html.hig .lk-input{font:400 17px var(--sf);letter-spacing:-.4px}
html.hig .lk-save{height:44px;border-radius:22px;padding:0 18px;font-weight:600;font-size:15px;background:var(--ink)}
html.hig .lk-ic{border:0;border-radius:12px;background:rgba(255,201,51,.3)}
html.hig .att-ic{border:0}.att-ic::after{display:none}.att-ic{border-radius:8px}
html.hig .att-name{font-weight:600}
html.hig .att-dl{border:0;background:var(--fill3);height:44px;border-radius:22px;font-weight:600;font-size:15px}
html.hig .att-strip{border:0;border-radius:20px;background:rgba(255,255,255,.18);box-shadow:var(--glass-edge-d);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
html.hig .att-strip .att-dl{box-shadow:none;background:#fff;height:40px;border-radius:20px;font-weight:600}
html.hig .att-strip .att-name{font-weight:600}
/* SF-Symbol-style line glyphs (instead of emoji) */
.sym{display:inline-flex;align-items:center;justify-content:center}
.iconbtn .sym svg,[data-act=unmute] svg,[data-act=sx-sound] svg{width:20px;height:20px}
.modal-ic svg{width:24px;height:24px}
.note .sym{color:var(--label2)}
/* 404 */
.nf-ic{width:64px;height:64px;border-radius:32px;background:var(--fill3);display:flex;align-items:center;justify-content:center;margin-bottom:16px}

/* =====================  standalone pages with their own inline CSS (legal, stats)  ===================== */
/* ---- privacy / terms ---- */
html.pg-legal body{background:var(--bg)!important;background-image:none!important;font:400 17px/1.47 var(--sf);letter-spacing:-.4px;padding-top:var(--sat)}
.pg-legal .wrap{padding:0 var(--m)}
.pg-legal .top{height:56px;padding:0}
.pg-legal .brand{font:700 22px var(--sf);letter-spacing:-.5px}.pg-legal .dot{width:11px;height:11px;box-shadow:none}
.pg-legal .login{height:44px;padding:0 18px;border:0;border-radius:22px;display:inline-flex;align-items:center;font:600 17px var(--sf);letter-spacing:-.4px;background:var(--glass);box-shadow:var(--glass-edge),0 2px 10px rgba(27,26,23,.08)}
.pg-legal article{border:0;border-radius:var(--r-group);box-shadow:none;padding:20px 16px 24px;margin:4px 0 20px}
.pg-legal h1{font:700 34px/41px var(--sf);letter-spacing:-.6px}
.pg-legal h1 em{background:none;padding:0}
.pg-legal .date{font:400 13px/18px var(--sf);color:var(--label2);margin-top:4px}
.pg-legal .lead{font:400 17px/22px var(--sf);color:var(--label2);margin-top:14px}
.pg-legal h2{font:600 20px/25px var(--sf);letter-spacing:-.4px;margin:24px 0 6px}
.pg-legal li::marker{color:var(--label3)}
.pg-legal code{font-size:14px;background:rgba(255,201,51,.25)}
.pg-legal footer{border-top:.5px solid var(--sep);font:400 13px var(--sf);color:var(--label2)}
/* ---- admin stats ---- */
html.pg-stats body{background:var(--bg)!important;background-image:none!important;font-family:var(--sf);letter-spacing:-.2px}
.pg-stats .wrap{padding:var(--sat) var(--m) 40px}
.pg-stats .top{height:56px;padding:0}
.pg-stats .brand{font:700 22px var(--sf);letter-spacing:-.5px}.pg-stats .brand i{width:11px;height:11px;box-shadow:none}
.pg-stats .chip{height:36px;display:inline-flex;align-items:center;border:0;border-radius:18px;padding:0 14px;font:600 15px var(--sf);background:var(--glass);box-shadow:var(--glass-edge),0 2px 10px rgba(27,26,23,.08)}
.pg-stats .lab{font:600 13px var(--sf);letter-spacing:0;text-transform:none;color:var(--label2)}
.pg-stats h1{font:700 34px/41px var(--sf);letter-spacing:-.6px;margin-top:2px}
.pg-stats h2{font:700 22px/28px var(--sf);letter-spacing:-.4px}
.pg-stats .hint{font:400 15px/20px var(--sf);color:var(--label2)}
.pg-stats .card{border:0;box-shadow:none;border-radius:var(--r-group)}
.pg-stats .tbl{padding:0}
.pg-stats th{font:500 12px var(--sf);letter-spacing:0;text-transform:none;color:var(--label2)}
.pg-stats td{border-top:.5px solid var(--sep)}
.pg-stats .simple td.num{font:600 22px var(--sf);letter-spacing:-.4px;font-variant-numeric:tabular-nums}
.pg-stats .simple td.m b{font:600 17px var(--sf);letter-spacing:-.4px}.pg-stats .who{font:400 13px/18px var(--sf);color:var(--label2)}
.pg-stats .note{font:400 13px/18px var(--sf);background:none;border:0;padding:0;color:var(--label2)}
.pg-stats .more>summary{border:0;background:var(--fill3);height:44px;display:inline-flex;align-items:center;padding:0 18px;border-radius:22px;font:600 15px var(--sf);color:var(--ink)}
/* ---- developer docs ---- */
.pg-docs .docs h3,.docs h3{font-family:var(--sf);font-weight:600;font-size:17px}
.docs p{font-size:17px;line-height:22px;letter-spacing:-.4px}
.docs pre.code{border-radius:18px}
/* inline reply video: no browser controls, a glass play button like iOS */
.rvwrap{position:relative;display:block;margin-top:12px}.rvwrap .rvid{margin-top:0}
.rvplay{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:32px;display:flex;align-items:center;justify-content:center;padding-left:4px;
  background:rgba(255,255,255,.28);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:var(--glass-edge-d);color:#fff}
.rvdur{position:absolute;right:10px;bottom:10px;height:24px;padding:0 9px;border-radius:12px;display:flex;align-items:center;background:rgba(20,19,17,.42);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.rvwrap{cursor:pointer}.rvwrap.on{cursor:auto}.rvwrap.on .rvplay,.rvwrap.on .rvdur,.rvdur:empty{display:none}
/* swipe down to dismiss (sheets with a grabber, confirm sheets) */
.dragging{transition:none!important;animation:none!important}
.drag-back{transition:transform .22s ease-out!important}
.pg-stats{--d:var(--sf);--u:var(--sf)}
/* ---------- Record: upload as a round glass button left of the shutter, level with it (like the Camera app's photo library button).
   Web and app. When the camera can't open (.nocam) it stays the big labelled "Upload a video instead" button. ---------- */
.cam:not(.nocam) .rec-ui{position:relative}
.cam:not(.nocam) .uplink{position:absolute!important;top:14px;left:calc((50% - 40px) / 2 - 26px);width:52px!important;height:52px!important;padding:0!important;
  border-radius:26px;justify-content:center;gap:0;font-size:0!important;color:#fff}
.cam:not(.nocam) .uplink svg{width:24px;height:24px}
/* ---------- bigger tap areas, same look (HIG 44pt minimum): an invisible hit box around small links ---------- */
.hchip .hx{position:relative}
.hchip .hx::after{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%)}
.wlink,.kv a,.legal a,.scard .vname,.sx .scard .chip,.sx .peek .chip,.storyhead .sx-plink,a.phone{position:relative}
.wlink::after,.kv a::after,.legal a::after,.scard .vname::after,.sx .scard .chip::after,.sx .peek .chip::after,.storyhead .sx-plink::after,a.phone::after{content:"";position:absolute;left:50%;top:50%;
  width:max(calc(100% + 8px),44px);height:max(100%,44px);transform:translate(-50%,-50%)}

/* ---------- /privacy and /terms, logged in: back button + centred brand instead of "Log in" (web and app) ---------- */
.pg-legal .top.in{justify-content:space-between}
.pg-legal .lg-back{width:44px;height:44px;border-radius:22px;flex:none;display:inline-flex;align-items:center;justify-content:center;color:var(--ink);text-decoration:none;
  background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:var(--glass-edge),0 2px 10px rgba(27,26,23,.08)}
.pg-legal .lg-back:active{opacity:.6}
.pg-legal .lg-sp{width:44px;flex:none}
/* ---------- share screen: "Next" (iOS glass capsule, top right) and ✕ both go to your profile, where the new story is marked ---------- */
.pp-next{height:44px;padding:0 12px 0 18px;border-radius:22px;display:inline-flex;align-items:center;gap:2px;font:600 17px var(--sf);letter-spacing:-.4px;color:#fff;text-decoration:none;
  background:var(--glass-dark);box-shadow:var(--glass-edge-d);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
.pp-next:active{opacity:.7}.pp-next svg{width:18px;height:18px}
.sx-tile .sx-posted{position:absolute;right:8px;top:12px;z-index:2;box-shadow:0 1px 6px rgba(0,0,0,.25)}
.sx-tile.posted{box-shadow:0 0 0 3px var(--green)}
/* ---------- post sheet "Field first" (Alex, ask-sheet idea 1) + option B chips: the ask field leads; Document + Link pills; Retake on the video ---------- */
.askform .askta{min-height:76px}
/* app.css .err keeps 20px + 10px even when empty; that plus the old 16px group margin was the ~47pt gap under the hint. Hide it until it has text. */
.askform .pad>.err:empty{display:none}
/* 12pt under the hint. Chips are the white fill the grouped rows used (rgba 255,255,255,.72), ~36pt, left-aligned in one row. */
.askform .ask-group{margin-top:12px;display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:center;column-gap:8px;row-gap:8px;background:none;border-radius:0;overflow:visible}
.askform .ask-group .att-new,.askform .ask-group .lk-new{display:contents;margin:0}
html.hig .askform .ask-group .att-add.ask-chip,html.hig .askform .ask-group .att-add.slim.ask-chip{width:auto;flex:0 0 auto;order:1;height:36px;min-height:36px;padding:0 14px 0 12px;border-radius:18px;background:rgba(255,255,255,.72);gap:6px;position:relative;font:400 15px/20px var(--sf);letter-spacing:-.2px;color:var(--ink);white-space:nowrap}
html.hig .askform .ask-group .ask-chip svg{width:16px;height:16px}
/* 44pt hit target, same invisible box as .wlink::after; height grows to 44, width stays the pill (already wider than 44) plus 4pt each side */
.askform .ask-group .ask-chip::after{content:"";position:absolute;left:50%;top:50%;width:max(calc(100% + 8px),44px);height:max(100%,44px);transform:translate(-50%,-50%)}
/* attached document: the existing row (icon, name, size, remove), as its own white pill above the remaining chip */
.askform .ask-group .att-row.slim{order:0;flex:1 0 100%;max-width:100%;min-width:0;border:0!important;border-radius:18px!important;background:rgba(255,255,255,.72)!important;margin:0;padding:8px 6px 8px 12px}
html.hig .askform .ask-group .lk-add{order:2;flex:1 0 100%;max-width:100%;min-width:0;min-height:44px;height:auto;border-radius:22px!important;background:rgba(255,255,255,.72);margin:0;padding:2px 4px 2px 10px}
.askform .ask-group .lk-add .lk-ic.sm{width:28px;height:28px;border-radius:9px}
.askform .ask-group .att-err,.askform .ask-group .lk-err{order:3;flex:1 0 100%;max-width:100%;margin:0;min-height:0;padding:0 4px}
.askform .ask-group .att-x{position:relative}
.askform .ask-group .att-x::after{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%)}
.askform>.foot{padding-top:12px}
.retake-top{display:none;height:44px;padding:0 16px 0 13px;border:0;border-radius:22px;align-items:center;gap:6px;font:600 17px var(--sf);letter-spacing:-.4px;color:#fff;cursor:pointer;
  background:var(--glass-dark);box-shadow:var(--glass-edge-d);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
.cam.asking .retake-top{display:inline-flex}
.cam.asking .camtop>a.iconbtn,.cam.asking .camtop [data-act=flip]{display:none}
/* ---------- report / block: iOS action sheet, report reasons, thanks ---------- */
.rmore{margin-left:auto;width:32px;height:32px;border:0;background:transparent;color:var(--label3);display:flex;align-items:center;justify-content:center;flex:none;padding:0}
.rmore svg{width:18px;height:18px}
.pp-act{position:fixed;inset:0;z-index:140;display:flex;align-items:flex-end;justify-content:center}
.pp-act-stack{position:relative;width:100%;max-width:420px;padding:0 var(--m) var(--sheetb);display:flex;flex-direction:column;gap:8px}
.pp-act-card{background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 10px 40px rgba(27,26,23,.18)}
.pp-act-card button{display:flex;align-items:center;justify-content:center;width:100%;min-height:56px;border:0;background:transparent;font:600 20px/24px var(--sf);letter-spacing:-.4px;color:var(--ink);border-top:.5px solid var(--sep)}
.pp-act-card button:first-child{border-top:0}
.pp-act-card button.bad{color:var(--red)}
.pp-act-cancel{min-height:56px;border:0;border-radius:14px;background:#fff;font:600 20px/24px var(--sf);letter-spacing:-.4px;color:var(--ink);box-shadow:0 8px 28px rgba(27,26,23,.12)}
.pp-report{position:fixed;inset:0;z-index:150;display:flex;align-items:flex-end;justify-content:center;padding:0 var(--m) var(--sheetb)}
/* These hosts are not .modal-wrap, so the scrim's .on fade never runs and it stays at opacity 0.
   The shared .sheet is 16% glass and its `up` keyframe animates opacity, which drops the blur and
   lets the inbox show through the card. Report and thanks are an opaque sheet over a dimmed scrim. */
.pp-act .modal-scrim,.pp-report .modal-scrim{opacity:1}
.pp-report .sheet{position:relative;left:auto;right:auto;bottom:auto;width:100%;max-width:420px;max-height:min(640px,calc(100% - 24px));overflow:auto;padding:6px 20px 20px;border-radius:36px;background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;animation:none;opacity:1;transform:none}
.pp-block .modal{background:#fff!important;-webkit-backdrop-filter:none;backdrop-filter:none}
.pp-report .hrow{display:flex;align-items:center;justify-content:space-between;margin-top:8px}
.pp-report .why{font-size:15px;line-height:20px;color:var(--label2);margin:4px 0 8px}
.pp-reason{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:48px;padding:10px 2px;border:0;border-top:.5px solid var(--sep);background:transparent;font:400 17px/22px var(--sf);letter-spacing:-.4px;color:var(--ink);text-align:left}
.pp-reason:first-child{border-top:0}
.pp-reason .tick{width:26px;height:26px;border-radius:13px;background:var(--sun);display:none;align-items:center;justify-content:center;flex:none}
.pp-reason.on .tick{display:flex}
.pp-note{width:100%;min-height:76px;margin:8px 0 4px;border:0;border-radius:14px;background:var(--fill3);padding:12px 14px;font:400 16px/21px var(--sf);color:var(--ink);resize:none}
.pp-report .btn.primary:disabled{opacity:.4}
.pp-thanks{text-align:center}
.pp-thanks-ic{width:64px;height:64px;border-radius:32px;background:#E5F6EE;color:var(--green);display:flex;align-items:center;justify-content:center;margin:18px auto 12px}
.pp-thanks .h1{font-size:28px}
.pp-thanks .btn{margin-top:18px}
.pp-thanks .textlink{margin-top:8px}
.brow{display:flex;align-items:center;gap:12px}
.brow-a{display:flex;align-items:center;gap:12px;min-width:0}
.brow .cname{font-weight:600;font-size:17px}
.unblock{height:34px;padding:0 14px;border:0;border-radius:17px;background:var(--fill3);color:var(--ink);font:600 15px/20px var(--sf);flex:none}