/* =====================================================================================
   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);
  --bg:var(--paper);                             /* cream = systemGroupedBackground */
  --cell:var(--card);                            /* 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 */
  --r-group:var(--r26);                          /* iOS 26 inset-grouped radius */
  --tabb:calc(var(--sab) + 8px);                 /* floating tab bar: above the home indicator, plus 8pt */
  --sheetb:calc(var(--sab) + 8px);               /* inset sheets, including ⋯ Cancel: same gap */
}
/* ---------- 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
   Shared roles (size and weight fixed in tokens.css): .t-title Title 2, .t-headline, .t-body, .t-label, .t-caption.
   Large Title stays .h1. Title 1 stays .h1.sm. Title 3 stays .h3. The story ask is a title; the video-page ask is a headline. */
.t-title{font:var(--t-title) var(--sf);letter-spacing:-.4px}
.t-headline{font:var(--t-headline) var(--sf);letter-spacing:-.4px}
.t-body{font:var(--t-body) var(--sf);letter-spacing:-.3px}
.t-label{font:var(--t-label) var(--sf);letter-spacing:-.05px}
.t-caption{font:var(--t-caption) var(--sf)}
.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:var(--t-title) var(--sf);letter-spacing:-.4px}
.h3{font-family:var(--sf);font-size:20px;line-height:25px;font-weight:600;letter-spacing:-.4px}
.lead{font:var(--t-body) var(--sf);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:var(--t-label) var(--sf);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)}
/* Generic failure, centered on the video or the page. A sentence next to a field stays .err. Tap dismisses the card. */
.pp-err-host{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:24px var(--m)}
.pp-err{max-width:min(300px,100%);padding:18px 22px;border-radius:var(--r22);background:var(--red);color:var(--card);font-family:var(--sf);font-size:17px;font-weight:600;line-height:22px;letter-spacing:-.4px;text-align:center;box-shadow:0 16px 40px rgba(20,19,17,.35)}
.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:var(--r22);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:var(--card);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:var(--t-headline) var(--sf);letter-spacing:-.4px;pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hour-top{position:absolute;left:72px;right:72px;top:0;height:56px;display:flex;align-items:center;justify-content:center;pointer-events:none}
.hour-pill{height:36px;padding:0 12px 0 10px;border-radius:18px;display:inline-flex;align-items:center;gap:6px;background:var(--green-tint);color:var(--green-ink);font:var(--t-label) var(--sf);letter-spacing:-.1px;font-variant-numeric:tabular-nums;white-space:nowrap}
.hour-pill svg{width:16px;height:16px;flex:none}
.top .between{}
/* glass group: several trailing bar buttons share one capsule  */
.gg{display:flex;align-items:center;height:44px;border-radius:var(--r22);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:var(--r22);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: one class per group that already paints the same ----------
   .btn          52pt capsule, full width. .primary yellow, .secondary fill, .google white, .danger red.
   .b-sun        44pt yellow Save (fill-in card and Edit profile). Padding stays on .pf-save / .sx-savetop.
   .textlink     44pt text button. Icon buttons, the record button, the tab bar, chips, toggles, and sliders stay separate.
   .nd-btn stays its own capsule. Sun is the same size as .btn.primary; apple is black and google uses a lighter hairline. */
.btn{height:52px;border-radius:var(--r26);display:flex;align-items:center;justify-content:center;width:100%;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:var(--sun-press);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);text-decoration:none;gap:10px}
.btn.google:active{transform:translateY(1px);background:#F6F3EC}
.btn.danger{background:var(--red);color:var(--card);box-shadow:none}
.btn.danger:disabled{opacity:.7}
.btn svg{width:20px;height:20px}
.b-sun{height:44px;border:0;border-radius:var(--r22);background:var(--sun);color:var(--ink);box-shadow:none;font:600 17px var(--sf);letter-spacing:-.4px;cursor:pointer}
.pill{height:50px;border-radius:25px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:17px;font-weight:600;letter-spacing:-.4px;padding:0 22px}
.textlink{height:44px;display:flex;align-items:center;justify-content:center;gap:6px;width:100%;font-size:17px;font-weight:500;letter-spacing:-.4px;text-decoration:none;color:var(--ink);cursor:pointer}
.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: one class for the boxes that already match ----------
   .input  52pt, radius 14, white, hairline. Phone, name, claim, connect, the link-recorder URL, the assistant label. The country code is that box, narrower.
   Kept distinct: .pf .input (48pt cream, no line);
   .askta, .input.area, and .pp-note (multiline; radii 18 or 14, weight and fill differ); the comment pill (45% white) and .sx-search (--fill3).
   Left as they are: .fi rows, .boxes code cells, the welcome field, .lk-input. The country code keeps font-weight 500. */
.input{height:52px;border-radius:var(--r14);background:var(--cell);border:0;box-shadow:var(--shadow-line);padding:0 var(--m);display:flex;align-items:center;width:100%;min-width:0;outline:0;color:var(--ink);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:var(--shadow-field)}
.input::placeholder{color:var(--label3);font-weight:400}
.input.area{font-size:17px;line-height:22px;padding:14px var(--m);border-radius:18px}
.input.askta{font-size:17px;line-height:22px;padding:15px var(--m);border-radius:18px;font-weight:500}
.ccpick{min-width:92px;font-weight:500}
.row10{gap:8px}
.boxes i{width:50px;height:58px;border-radius:var(--r14);background:var(--cell);border:0;box-shadow:var(--shadow-line);font-family:var(--sf);font-weight:600;font-size:28px}
.boxes i.cur{border:0;box-shadow:var(--shadow-field)}
/* ---------- 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: one glass for the cards that already match ----------
   .modal and .sx-sheet  radius 36, --glass-strong, blur 30, --shadow-sheet. Padding and position stay on each.
   .grab                 the 36×5 bar. Comment, share, gate, and aura use the same bar.
   .nd-toast and .lr-toast share one dark capsule. Top and z-index stay with each.
   Kept distinct: .sheet (radius 36 glass) and .save-sheet (radius 28, cream .94);
   .lsheet (above the tab bar); report, thanks, and the link-recorder URL sheet (opaque);
   .nd-share-card, .nd-gate-card, .nd-aura-card, .nd-comments-card; .pp-act-card and .pp-act-cancel;
   .lr-save; .save-card; .devbar; .banner.live and .banner.shut. */
.nd-toast,.lr-toast{position:fixed;left:50%;transform:translateX(-50%);max-width:calc(100% - 48px);padding:8px 14px;border-radius:16px;background:rgba(20,19,17,.82);color:var(--card);font-family:var(--sf);font-size:14px;font-weight:600;line-height:18px;letter-spacing:-.2px;text-align:center;pointer-events:none}
.nd-toast[hidden],.lr-toast[hidden]{display:none!important}
.nd-toast{z-index:45;top:calc(36px + var(--sat))}
.lr-toast{z-index:95;top:calc(12px + var(--sat))}
.grab,.nd-grab::before{width:36px;height:5px;border-radius:2.5px;background:rgba(27,26,23,.22)}
.grab{margin:6px auto 0;flex:none}
.sheet{left:var(--m);right:var(--m);bottom:var(--sheetb);border-radius:var(--r36);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)}
.modal,.sx-sheet{border-radius:var(--r36);background:var(--glass-strong)!important;-webkit-backdrop-filter:blur(30px) saturate(1.8);backdrop-filter:blur(30px) saturate(1.8);box-shadow:var(--shadow-sheet)}
.sx-sheet{left:var(--m)!important;right:var(--m)!important;bottom:var(--sheetb)!important;background-image:none!important;padding:6px 20px 20px}
.sx-sheet .grab{margin:0 auto 18px}
.modal-wrap{padding:0 var(--m) var(--sheetb)}
.modal{border:0!important;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:var(--red-wash);margin-bottom:12px}
.modal-ask{border:0;border-radius:var(--r14);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:var(--m)}
.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 var(--card)}
.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:var(--card);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 var(--m);min-height:64px}
.banner[hidden]{display:none!important}
.banner small[data-hour-back]{font-variant-numeric:tabular-nums;opacity:1}
.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:var(--t-caption) var(--sf);width:68px;gap:6px}.sbub b{font-weight:inherit;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)}
.hour-off .sx-tile,.hour-off .sbub.sx-friend .ring{filter:grayscale(1)}
.hour-off .sx-tile.unread{box-shadow:0 0 0 2.5px var(--bg),0 0 0 5px var(--line)}
.hour-off .sx-tile,.hour-off .sbub.sx-friend{pointer-events:none}
.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:var(--t-caption) var(--sf)}
.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:var(--r36);padding:5px 20px 20px;box-shadow:var(--glass-edge),0 10px 40px rgba(27,26,23,.22)}
.sx-lockui .lsheet .grab{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}
.sx-lockui.tapped .lsheet .btn{transform:scale(.97);box-shadow:none;background:var(--sun-press)}
.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:var(--t-title) var(--sf);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:var(--r22);background:var(--fill3);margin-left:6px}
.wlink{font-size:15px;font-weight:500;text-decoration:none;color:var(--ink);gap:6px}
.pbio{font:var(--t-body) var(--sf);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:var(--r14);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:var(--r14);font-size:17px;background:var(--bg);box-shadow:none}
.pf .input:focus-within{box-shadow:var(--shadow-field);border:0;padding:0 var(--m)}
.pf .input input{font:400 17px var(--sf);letter-spacing:-.4px}
.pf-act{gap:8px;margin-top:12px}
.pf-save{padding:0 24px}
.pf-skip{height:44px;padding:0 var(--m);border-radius:var(--r22);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{padding:0 18px}
.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 var(--m);border-top:0;position:relative}
.sx-form .f+.f::before{content:"";position:absolute;left:var(--m);right:0;top:0;height:.5px;background:var(--sep)}
.fl{font:var(--t-label) var(--sf);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:var(--r14)}
.hchip.add{border:0;background:var(--fill3);color:var(--ink);padding:0 12px}
/* settings = inset grouped list */
.set .it{min-height:52px;padding:0 var(--m);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:var(--red-wash)}
.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:var(--r14);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:var(--m)}
/* connections */
.sx-search{height:44px;border-radius:var(--r22);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:var(--t-headline) var(--sf);letter-spacing:-.4px}.csub{font-weight:400;font-size:15px}
.cmore{width:44px;height:44px;border-radius:var(--r22);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:var(--r26);padding:4px 4px 4px var(--m);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:var(--r22);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,var(--night))}
.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:var(--r22)}
.thumb{border-radius:var(--r14)}
.thumb .dur{background:rgba(20,19,17,.42);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.asktxt{font:var(--t-headline) var(--sf);letter-spacing:-.4px}
.reqdel{width:44px;height:44px;border-radius:var(--r22);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 var(--m);border-radius:var(--r22);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:var(--t-headline) var(--sf);letter-spacing:-.4px}
.rtext{font:var(--t-body) var(--sf);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:var(--r22);border:0;background:var(--fill3);font-weight:600;font-size:15px;color:var(--ink)}
.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:20px var(--m) 0;gap:10px}
.storyhead .vwho b{font:var(--t-headline) var(--sf);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:var(--t-headline) var(--sf);letter-spacing:-.4px}
.vacts{gap:10px}
.vbtn{height:52px;border-radius:var(--r26);font-size:17px;font-weight:600;letter-spacing:-.4px}
.vwrite{background:rgba(255,255,255,.24)!important;color:var(--card)!important;-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:var(--glass-edge-d)!important}
.vwrite svg{stroke:var(--card)}
.viewfoot.strip .fine,.fine{font-size:12px;font-weight:400;color:rgba(255,255,255,.66)}
.caption{font-family:var(--sf)}
.mini{border-radius:28px;width:180px;height:220px;margin-top:calc(14px + var(--sat))}
.mininame{font-weight:600}
.sheet.claim{min-height:0!important}
/* thanks */
.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:var(--r22);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,.att-paid{font-size:13px}
.progress{height:4px;border-radius:2px;background:var(--fill3)}
/* share page */
.target{font:var(--t-caption) var(--sf);color:var(--ink);gap:6px}
.target span{width:60px;height:60px;border-radius:30px;border:0;box-shadow:none}
.target b{font-weight:inherit}
.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:var(--t-headline) var(--sf);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:var(--t-title) var(--sf);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:var(--r26)}
.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}
/* ---------- 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:var(--red-wash);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 var(--m)}.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:var(--r14);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}
/* 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 var(--m)}
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:var(--r22);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:var(--r22);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:var(--card);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:var(--r22);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 var(--m) 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:var(--r22);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:var(--card)}
.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:var(--card);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:var(--r26);justify-content:center;gap:0;font-size:0!important;color:var(--card)}
.cam:not(.nocam) .uplink svg{width:24px;height:24px}
/* Record sources: Website and Presentation as glass pills under the flip button.
   Not .uplink: the rule above turns that class into the round shutter button. Upload stays that round button. */
.srcpills{position:absolute;z-index:6;right:16px;top:calc(8px + var(--sat) + 60px + 8px);display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.srcpill{box-sizing:border-box;height:44px;padding:0 18px;border:0;border-radius:var(--r22);background:var(--glass-dark);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:var(--glass-edge-d),var(--shadow-key);color:var(--card);font:500 15px/20px var(--sf);letter-spacing:-.2px;text-shadow:0 1px 2px rgba(0,0,0,.35);display:inline-flex;align-items:center;gap:8px;white-space:nowrap;text-decoration:none;cursor:pointer}
.srcpill svg{width:18px;height:18px;flex:none}
.cam.recording .srcpills,.cam.paused .srcpills,.cam.maxed .srcpills,.cam.has-clip .srcpills,.cam.slides .srcpills,.cam.lr-web .srcpills,.cam.nocam .srcpills{visibility:hidden}
/* ---------- 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%)}
.lk-plain{color:inherit;font-weight:600;text-decoration:underline;text-underline-offset:3px;word-break:break-word}
.viewfoot .lk-plain,.vfoot .lk-plain{display:block}
.wlink,.lk-plain,.kv a,.legal a,.scard .vname,.sx .scard .chip,.sx .peek .chip,.storyhead .sx-plink,a.phone{position:relative}
.wlink::after,.lk-plain::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:var(--r22);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:var(--r22);display:inline-flex;align-items:center;gap:2px;font:600 17px var(--sf);letter-spacing:-.4px;color:var(--card);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}
/* Test switch: sparkle sits in the field. 32pt face, 44pt tap. Text stays in the padding above it. */
.askform.ai .askta{min-height:112px;padding-bottom:48px}
.askform.ai .ai-cap{position:absolute;right:8px;bottom:8px;z-index:1;width:32px;height:32px;margin:0;padding:0;border:0;border-radius:16px;background:var(--sun);color:var(--ink);display:flex;align-items:center;justify-content:center}
.askform.ai .ai-cap::after{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%)}
.askform.ai .ai-cap svg{width:16px;height:16px}
.askform.ai .ai-cap .pp-spin{height:32px;padding:0;gap:3px;background:transparent}
.askform.ai .ai-cap .pp-spin i{width:5px;height:5px}
/* 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:var(--r22) !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 var(--m) 0 13px;border:0;border-radius:var(--r22);align-items:center;gap:6px;font:600 17px var(--sf);letter-spacing:-.4px;color:var(--card);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}
html.pp-leaving .retake-top{display:none!important}
/* ---------- post screen D (test switch, .askform.rail; app.js postRail): video full screen, one-line glass caption above Post, frosted rail on the right ---------- */
.askform.rail{--pr-glass:rgba(27,26,23,.55);left:0;right:0;bottom:var(--kb,0px);max-width:none;padding:0 var(--m) calc(var(--sab) + 8px);border-radius:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;color:var(--card);animation:none}
.askform.rail .grab,.askform.rail>.grow,.askform.rail .asr-state[data-state=idle]{display:none}
.askform.rail>.pad{display:flex;flex-direction:column;gap:8px;padding:0;margin:0}
.askform.rail .askwrap{order:3}
.askform.rail .ask-group{order:2;margin:0}
.askform.rail .asr-state,.askform.rail .pad>.err{order:1;margin:0;color:var(--card);text-shadow:0 1px 3px rgba(0,0,0,.6)}
.askform.rail>.foot{padding:12px 0 0!important}
html.hig .askform.rail .askta{min-height:48px;height:48px;padding:13px var(--m);border-radius:var(--r22);background:var(--pr-glass);box-shadow:var(--glass-edge-d);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);color:var(--card);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
html.hig .askform.rail .askta::placeholder{color:rgba(255,255,255,.72)}
html.hig .askform.rail.pr-typing .askta{height:auto;min-height:92px;white-space:normal;overflow:auto;box-shadow:var(--glass-edge-d),0 0 0 2px rgba(255,255,255,.45)}
.askform.rail.pr-typing .prail{display:none}
.cam.pr-typing .shade{background:rgba(0,0,0,.5)}
/* sideways takes: whole, full width, under the Retake row (as slides .sl-review), so the rail (lower right) never covers them */
.cam.pr-wide .playback{top:calc(var(--sat) + 68px);bottom:auto;height:auto;object-fit:contain}
/* doc + link preview chips by the caption: the existing rows on dark glass */
html.hig .askform.rail .ask-group .att-row.slim,html.hig .askform.rail .ask-group .lk-add{background:var(--pr-glass)!important;box-shadow:var(--glass-edge-d);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);color:var(--card)}
.askform.rail .ask-group .att-name,.askform.rail .ask-group .lk-input{color:var(--card)}
.askform.rail .ask-group .att-sub,.askform.rail .ask-group .lk-input::placeholder{color:rgba(255,255,255,.72)}
.askform.rail .ask-group .att-x svg,.askform.rail .ask-group .att-x svg *{stroke:var(--card)}
.askform.rail .ask-group .att-err,.askform.rail .ask-group .lk-err,.askform.rail .ask-group .att-paid{color:var(--card);text-shadow:0 1px 3px rgba(0,0,0,.6)}
/* the rail: 48pt circles, 64x68 tap area with the label, right edge, above the caption */
.askform.rail .prail{position:absolute;right:4px;bottom:100%;margin-bottom:16px;display:flex;flex-direction:column;gap:6px}
.askform.rail .prail .pr-it{position:relative;inset:auto;isolation:isolate;display:flex!important;flex-direction:column;align-items:center;justify-content:flex-start;width:64px;height:68px;min-height:0;margin:0;padding:13px 0 0;border:0;border-radius:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;color:var(--card);font-size:0;gap:0;cursor:pointer}
.askform.rail .prail .pr-it::before{content:"";position:absolute;z-index:-1;top:0;left:8px;width:48px;height:48px;border-radius:24px;background:var(--pr-glass);box-shadow:var(--glass-edge-d);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
.askform.rail .prail .pr-it::after{content:attr(data-pr-label);position:absolute;left:-8px;right:-8px;top:51px;width:auto;height:auto;transform:none;text-align:center;font:var(--t-caption) var(--sf);font-size:11.5px;letter-spacing:-.1px;white-space:nowrap;color:var(--card);text-shadow:0 1px 3px rgba(0,0,0,.7)}
.askform.rail .prail .pr-it svg{position:relative;width:22px;height:22px;stroke:currentColor}
.askform.rail .prail .pr-it svg *{stroke:currentColor}
.askform.rail .prail .pv-chip .pv-ico svg{fill:none}
.askform.rail .prail .pv-chip[aria-pressed=true]::before{background:var(--green)}
.askform.rail .prail .pv-chip[aria-pressed=true]{background:none!important}
.askform.rail .prail .pv-lab,.askform.rail .prail .pp-spin{display:none!important}
.askform.rail .prail .ai-cap[aria-busy=true]::before{animation:pr-busy 1s ease-in-out infinite alternate}
@keyframes pr-busy{to{opacity:.55}}
/* Document and Link: attach.js / link.js set [hidden] once added; the chip stays and its label span becomes a green badge */
.askform.rail .prail .ask-chip>span:not(.pv-ico){display:none}
.askform.rail .prail .ask-chip[hidden]>span:not(.pv-ico){display:block;position:absolute;top:0;right:10px;width:14px;height:14px;border-radius:7px;background:var(--green);box-shadow:0 0 0 2px var(--card)}
.askform.rail .prail .pr-it:active{opacity:.7}
/* Owner ⋯ stays above the share sheet. The progress line stays under that sheet. */
html.pg-view .storyhead{position:relative;z-index:72}
.sx-stage .topbar{z-index:72}
.owner-menu{position:absolute;z-index:3;top:100%;right:0;margin-top:6px;min-width:180px;padding:6px;border-radius:var(--r14);background:var(--card);color:var(--ink);box-shadow:0 10px 30px rgba(0,0,0,.28)}
.owner-menu[hidden]{display:none!important}
.owner-menu button{display:flex;align-items:center;width:100%;min-height:44px;padding:0 14px;border:0;border-radius:10px;background:transparent;color:#C8321F;font:600 17px/22px var(--sf);letter-spacing:-.3px;text-align:left}
.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:var(--card);border-radius:var(--r14);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-note{padding:12px 16px 4px;text-align:center;font:var(--t-caption) var(--sf);color:var(--muted)}
.pp-toast{z-index:160}
.pp-act-cancel{min-height:56px;border:0;border-radius:var(--r14);background:var(--card);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:var(--r36);background:var(--card);-webkit-backdrop-filter:none;backdrop-filter:none;animation:none;opacity:1;transform:none}
.pp-block .modal{background:var(--card)!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:var(--r14);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}
/* ---------- spinner: three ink dots in a yellow pill. Only the account with Test: new design on. ---------- */
.pp-spin{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;padding:0 14px;border-radius:var(--r22);background:var(--sun)}
.pp-spin-slot{display:flex;justify-content:center;margin-top:14px}
.pp-spin-slot[hidden]{display:none!important}
.pp-spin-float{position:fixed;z-index:25;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none}
.pp-spin-float[hidden]{display:none!important}
.pp-spin i{width:8px;height:8px;border-radius:50%;background:var(--ink);animation:pp-bob .9s ease-in-out infinite}
.pp-spin i:nth-child(2){animation-delay:.15s}
.pp-spin i:nth-child(3){animation-delay:.3s}
@keyframes pp-bob{0%,70%,100%{transform:translateY(0)}35%{transform:translateY(-5px)}}
@media (prefers-reduced-motion:reduce){.pp-spin i{animation:none}}

/* Sign-up "Almost there" (features/login/ageterms.js): birth year + Terms box. Mockups: /workspace/sketch/age-terms */
.step.at-step{background:radial-gradient(120% 60% at 0% 15%,#3a2c12 0%,#1c1813 45%,#141210 100%);color:#fff}
.step.at-step .brand{color:#fff}
.step.at-step .h1{color:#fff;font-size:36px;line-height:40px;font-weight:800;letter-spacing:-.5px}
.step.at-step .at-q{color:#bdb7ad;font-size:17px;margin-top:10px}
.at-year{display:block;position:relative}
.at-year select{-webkit-appearance:none;appearance:none;width:100%;height:58px;border-radius:18px;border:0;background:#24201b;color:#fff;font:600 21px/58px var(--ui,system-ui,sans-serif);text-align:center;text-align-last:center;padding:0 16px}
.at-year select:invalid,.at-year select.at-ph{color:#7d766c;font-weight:400}
.at-year::after{content:'';position:absolute;right:20px;top:50%;width:9px;height:9px;border-right:2px solid #7d766c;border-bottom:2px solid #7d766c;transform:translateY(-70%) rotate(45deg);pointer-events:none}
.step.at-step .at-err{color:#ff6b5e;font-size:15px;font-weight:600;min-height:20px}
.at-cb{display:flex;gap:12px;font-size:15px;line-height:21px;color:#d8d2c8;cursor:pointer}
.at-cb input{position:absolute;opacity:0;width:1px;height:1px}
.at-box{flex:0 0 24px;height:24px;border-radius:7px;border:2px solid #6d665c;margin-top:1px;display:flex;align-items:center;justify-content:center}
.at-cb input:checked+.at-box{background:#FFC930;border-color:#FFC930}
.at-cb input:checked+.at-box::after{content:'';width:6px;height:11px;border-right:3px solid #1a1611;border-bottom:3px solid #1a1611;transform:translateY(-1px) rotate(45deg)}
.at-cb input:focus-visible+.at-box{outline:2px solid #FFC930;outline-offset:2px}
.at-cb a{color:#FFC930;text-decoration:underline}
.step.at-step .at-foot{padding-bottom:calc(16px + var(--sab,env(safe-area-inset-bottom,0px)))}
.step.at-step .at-foot .btn.primary{height:58px;border-radius:29px;background:#FFC930;color:#1a1611;font-size:18px;font-weight:700}
.step.at-step .at-foot .btn.primary:disabled{background:#3a352e;color:#7d766c;opacity:1}
/* ---------- Send feedback (Settings > Help & safety, Test: new design only; public/site/feedback.js) ---------- */
.set .it.two{min-height:62px;padding-top:9px;padding-bottom:9px}
.set .it.two .itl{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.itsub{font:400 13px/18px var(--sf);letter-spacing:-.1px;color:var(--label2)}
.fb-wrap{position:fixed;inset:0;z-index:150;display:flex;align-items:flex-end;justify-content:center}
.fb-wrap .modal-scrim{opacity:1}
.fb-sheet{position:relative;width:100%;max-width:520px;max-height:calc(100% - 24px);overflow:auto;background:var(--paper);border-radius:30px 30px 0 0;padding:8px 20px calc(var(--sab) + 20px);box-shadow:var(--shadow-up)}
.fb-sheet .grab{margin:0 auto 12px}
.fb-sheet .h2{font:700 22px/28px var(--sf);letter-spacing:-.4px;margin:4px 0 14px}
.fb-seg{display:flex;background:#EFE9DE;border-radius:var(--r14);padding:3px;margin-bottom:12px}
.fb-seg button{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;height:38px;border:0;border-radius:11px;background:transparent;font:600 15px/20px var(--sf);color:var(--muted)}
.fb-seg button[aria-checked=true]{background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.1)}
.fb-text{display:block;width:100%;min-height:120px;border:0;border-radius:18px;background:var(--card);padding:14px 16px;font:500 16px/22px var(--sf);color:var(--ink);resize:none}
.fb-text:focus{outline:none;box-shadow:var(--shadow-field)}
.fb-att{display:flex;align-items:center;gap:10px;margin:12px 0}
.fb-thumb{position:relative;flex:none}
.fb-thumb[hidden]{display:none}
.fb-thumb img{display:block;width:56px;height:96px;object-fit:cover;border-radius:10px;border:2px solid var(--card);box-shadow:0 1px 4px rgba(0,0,0,.15)}
.fb-x{position:absolute;top:-8px;right:-8px;width:22px;height:22px;border:0;border-radius:11px;background:var(--ink);color:var(--card);font:700 13px/22px var(--sf);padding:0}
.fb-pick{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 14px;border-radius:20px;background:var(--card);font:500 15px/20px var(--sf);color:var(--ink);cursor:pointer}
.fb-note{font:500 12.5px/18px var(--sf);color:var(--muted);margin:4px 2px 10px}
.fb-sheet .err{color:var(--red);font-size:13px;min-height:0;margin-bottom:8px}
.fb-sheet .err:empty{display:none}
.fb-sheet .btn.primary{width:100%}
.fb-sheet .btn.primary:disabled{opacity:.4}
.fb-thanks{position:fixed;inset:0;z-index:160;background:var(--paper);display:flex;flex-direction:column;justify-content:space-between;padding:calc(var(--sat,0px) + 24px) 20px calc(var(--sab) + 24px)}
.fb-thanks-c{margin:auto 8px;text-align:center}
.fb-ok{width:84px;height:84px;border-radius:42px;background:var(--green);color:var(--card);display:flex;align-items:center;justify-content:center;margin:0 auto 18px}
.fb-thanks .h1{font:700 26px/32px var(--sf);letter-spacing:-.5px;margin:0 0 8px}
.fb-thanks .lead{font:500 16px/23px var(--sf);color:var(--muted)}
.fb-thanks .btn{width:100%}
/* /admin/feedback */
.fb-admin{background:var(--paper);color:var(--ink);font-family:var(--sf),system-ui,sans-serif;margin:0}
.fb-admin .wrap{max-width:1040px;margin:0 auto;padding:max(14px,env(safe-area-inset-top)) 16px 40px}
.fb-admin .top{display:flex;align-items:center;justify-content:space-between;height:52px}
.fb-admin .brand{font-weight:800;font-size:21px;letter-spacing:-.5px;text-decoration:none;color:inherit}
.fb-admin .chip{font-size:13px;font-weight:700;border:1.5px solid var(--ink);border-radius:999px;padding:6px 12px;text-decoration:none;color:inherit;background:var(--card)}
.fb-admin h1{font:800 30px/36px var(--sf);letter-spacing:-.8px;margin:6px 0 0}
.fb-tabs{display:flex;gap:18px;margin-top:14px;font-size:14px}
.fb-tabs a{color:var(--muted);text-decoration:none;padding-bottom:4px;border-bottom:2px solid transparent}
.fb-tabs a.on{color:var(--ink);font-weight:700;border-bottom-color:var(--ink)}
.fb-admin table{width:100%;border-collapse:collapse;background:var(--card);border-radius:20px;overflow:hidden;margin-top:14px}
.fb-admin th,.fb-admin td{padding:12px;text-align:left;border-top:1px solid var(--line);vertical-align:top;font-size:14px}
.fb-admin th{font-size:11px;letter-spacing:.8px;text-transform:uppercase;color:var(--muted);border-top:0}
.fb-admin .who{color:var(--muted);font-size:12.5px;margin-top:2px}
.fb-admin td.num,.fb-admin td.act{white-space:nowrap}
.fb-admin td.msg{max-width:360px;white-space:pre-wrap;word-break:break-word}
.fb-admin tr.done td{opacity:.55}
.fb-tag{display:inline-block;font-size:12px;font-weight:600;padding:2px 9px;border-radius:999px;background:var(--red-wash);color:var(--red)}
.fb-tag.idea{background:var(--sun-tint);color:#8A6200}
.fb-shot{display:block;width:32px;height:52px;object-fit:cover;border-radius:6px}
.fb-admin button{font:700 13px var(--sf),system-ui,sans-serif;border:1px solid var(--line);border-radius:999px;padding:7px 12px;background:var(--card);cursor:pointer}
.fb-admin .top .chip{width:auto;height:auto}
@media(max-width:700px){
.fb-admin thead{display:none}
.fb-admin tr{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"w t a" "m m s" "f f s" "d d s";gap:6px 10px;padding:12px;border-top:1px solid var(--line)}
.fb-admin tbody tr:first-child{border-top:0}
.fb-admin td{border:0;padding:0}
.fb-admin td:nth-child(1){grid-area:w}.fb-admin td:nth-child(2){grid-area:t}.fb-admin td:nth-child(3){grid-area:m;max-width:none}
.fb-admin td:nth-child(4){grid-area:s}.fb-admin td:nth-child(5){grid-area:f}.fb-admin td:nth-child(6){grid-area:d}.fb-admin td:nth-child(7){grid-area:a}
.fb-admin td[colspan]{grid-column:1/-1}
}