/* ROVA — design system (from app mockups) */

/* ---------- fonts: self-hosted, deliberately not Google ----------
   These used to come from fonts.googleapis.com. That cost two DNS + TLS handshakes and two
   round trips (the CSS, then the font files) BEFORE any text could paint in the right face —
   so every open showed a fallback and then jumped. The service worker made it worse, not
   better: it passes cross-origin through and never caches it, so an installed home-screen app
   re-fetched them every cold start.
   Now same-origin, precached by the worker, and no third party sees your users' IP addresses
   on app open. The optical-size axis is dropped from all three families (the sizes here are
   fixed, so a size-responsive axis bought nothing) — that alone took 453KB down to 234KB.
   Both faces are SIL Open Font License, which expressly permits self-hosting.
   Latin + Latin-Extended only; anything outside those ranges falls back, as it did before. */
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('assets/fonts/dmsans-normal-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('assets/fonts/dmsans-normal-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Josefin Sans';font-style:normal;font-weight:300 500;font-display:swap;
  src:url('assets/fonts/josefin-normal-300-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Josefin Sans';font-style:normal;font-weight:300 500;font-display:swap;
  src:url('assets/fonts/josefin-normal-300-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:400;font-display:swap;
  src:url('assets/fonts/newsreader-italic-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:400;font-display:swap;
  src:url('assets/fonts/newsreader-italic-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:400 500;font-display:swap;
  src:url('assets/fonts/newsreader-normal-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:400 500;font-display:swap;
  src:url('assets/fonts/newsreader-normal-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

:root{
  color-scheme:light; /* stop iOS dark mode using a BLACK page canvas behind the app */
  --paper:#f4efe5; --paper-2:#efe8db; --ink:#1b1a17; --ink-soft:#3d3a33;
  --muted:#86806f; --muted-2:#a39d8d; --olive:#4a5c3a; --olive-deep:#3a4a2d; --olive-lt:#6f8556; --olive-light:#cfe0bf;
  --line:rgba(27,26,23,.10); --line-2:rgba(27,26,23,.07); --cream:#f6f1e8; --maxw:440px;
  --serif:"Newsreader",Georgia,serif;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-webkit-tap-highlight-color:transparent;}
/* explicit background on html + #root so a full re-render's reflow gap never shows the
   browser's default canvas (which is BLACK on an iPhone in dark mode) — the black-flash fix */
html,body{height:100%;background:#e7e0d2;}
#root{min-height:100%;background:#e7e0d2;}
/* The page ground MUST match the app surface at phone widths. `.app` is capped at 440px so it
   fills a phone entirely and this colour is never meant to be seen there — but render()
   rebuilds `.app` wholesale, and iOS drops and re-rasterises the layer when a large subtree
   is replaced. Anything not yet re-rasterised paints as the PAGE background, so a darker
   ground here shows through as a FULL-SCREEN flash on every repaint — which is exactly what
   the user reported. Same colour = nothing to see. The darker "desk" shade is restored at
   >=520px, where the app no longer fills the viewport and it is genuinely visible. */
html{background:var(--paper);}
body{font-family:"DM Sans",system-ui,sans-serif;color:var(--ink);background:var(--paper);overscroll-behavior:none;touch-action:manipulation;}
img{display:block;-webkit-touch-callout:none;}
button{font-family:inherit;border:none;background:none;cursor:pointer;color:inherit;-webkit-user-select:none;user-select:none;transition:transform .09s ease,opacity .09s ease;}
button:active{transform:scale(.96);}
.tab:active,.q-clear:active{transform:none;}
input,textarea,select{font-family:inherit;font-size:16px;}
/* 16px on all form controls prevents iOS Safari from auto-zooming on focus */

.app{position:relative;display:flex;flex-direction:column;width:100%;max-width:var(--maxw);
  height:100dvh;margin:0 auto;background:var(--paper);overflow:hidden;}
@media(min-width:520px){
  html,body{background:#e7e0d2;} /* the desk surround, only where the app doesn't fill the viewport */
  body{display:flex;justify-content:center;}
  .app{height:100dvh;box-shadow:0 0 0 1px var(--line),0 30px 80px -40px rgba(40,35,25,.4);}
}
.app::before{content:"";position:absolute;inset:0;z-index:60;pointer-events:none;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");mix-blend-mode:multiply;}

/* header */
.topbar{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:max(14px,env(safe-area-inset-top)) 22px 8px;}
.wordmark{font-family:"Josefin Sans",sans-serif;font-weight:300;font-size:22px;letter-spacing:10px;text-indent:10px;color:var(--ink);}
.own-handle-top{font-size:16px;font-weight:600;letter-spacing:.2px;}
.iconbtn{width:26px;height:26px;color:var(--ink);position:relative;display:flex;align-items:center;justify-content:center;}
/* iOS Safari collapses a viewBox-only inline SVG to 0×0 inside flex — size it explicitly. */
.iconbtn svg{width:24px;height:24px;flex:none;}
.iconbtn .dot{position:absolute;top:0;right:0;width:7px;height:7px;border-radius:50%;background:var(--olive);box-shadow:0 0 0 2px var(--paper);}
.detailbar{align-items:center;}
.dtitle{flex:1 1 auto;text-align:center;font-family:"Josefin Sans";font-weight:400;font-size:16px;letter-spacing:1px;}
.vb{width:14px;height:14px;color:var(--olive);flex:0 0 auto;display:inline-block;vertical-align:middle;}

.subhead{flex:0 0 auto;padding:0 22px;}
.seg{display:flex;gap:26px;align-items:center;margin-top:6px;}
.seg button{font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:var(--muted);font-weight:500;padding-bottom:9px;position:relative;}
.seg button.on{color:var(--ink);}
.seg button.on::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--olive);}
.rule{height:1px;background:var(--line);}

#body{flex:1 1 auto;min-height:0;position:relative;display:flex;flex-direction:column;overflow:hidden;}
.screen{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;scrollbar-color:rgba(27,26,23,.26) transparent;}
.screen::-webkit-scrollbar{width:10px;}
.screen::-webkit-scrollbar-thumb{background:rgba(27,26,23,.24);border-radius:10px;border:3px solid var(--paper);}
.screen.reels::-webkit-scrollbar{width:0;}
.empty{text-align:center;color:var(--muted);padding:50px 30px;font-size:13px;line-height:1.6;}
/* fast, opacity-only screen entrance — a translateY here forces a reflow/composite on
   every navigation (reads as "hesitation"); plain opacity is snappy and smooth */
.fade-in{animation:fade .16s ease both;}@keyframes fade{from{opacity:0}to{opacity:1}}

/* stories */
.rail{padding:14px 0 12px;}
.rail .track{display:flex;gap:17px;padding:0 22px;overflow-x:auto;}
.rail .track::-webkit-scrollbar{display:none;}
.biz{display:flex;flex-direction:column;align-items:center;gap:7px;width:68px;flex:0 0 auto;}
.avatar{width:68px;height:68px;border-radius:50%;padding:2px;background:var(--paper);box-shadow:0 0 0 1px var(--line);}
.avatar.live{box-shadow:0 0 0 1.5px var(--olive);}
.avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover;}
.avatar.add{display:flex;align-items:center;justify-content:center;background:var(--paper-2);}
.avatar.add span{font-family:"Josefin Sans";font-weight:300;font-size:24px;color:var(--muted);line-height:1;}
.biz small{font-size:9px;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted);white-space:nowrap;max-width:80px;overflow:hidden;text-overflow:ellipsis;}

/* post — full-bleed Instagram structure */
.post{padding:0;}
.post .head{display:flex;align-items:center;gap:11px;padding:11px 16px;}
.post .head .av{width:38px;height:38px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1px var(--line);}
.post .head .meta{flex:1 1 auto;min-width:0;}
.post .head .name{font-size:14.5px;font-weight:600;display:flex;align-items:center;gap:5px;}
.kosher{display:inline-flex;align-items:center;font-size:8.5px;font-weight:600;letter-spacing:1px;color:var(--olive);
  border:1px solid rgba(74,92,58,.4);border-radius:3px;padding:1.5px 4px;text-transform:uppercase;}
.post .head .sub{font-size:10px;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted);margin-top:3px;}
.frame{position:relative;overflow:hidden;background:var(--paper-2);}
.frame .photo{width:100%;height:300px;object-fit:cover;display:block;}
.actions{display:flex;align-items:center;gap:18px;padding:11px 16px 0;}
.act{display:flex;align-items:center;gap:7px;color:var(--ink);}
.act svg{width:24px;height:24px;}
.act.on{color:var(--olive);}
.act span{font-size:12.5px;font-weight:500;font-variant-numeric:tabular-nums;}
.act .heart-fill,.act .save-fill{display:none;}
.act.on .heart-fill,.act.on .save-fill{display:block;}
.act.on .heart-line,.act.on .save-line{display:none;}
.spacer{flex:1 1 auto;}
.likes{font-size:13.5px;font-weight:600;color:var(--ink);padding:9px 16px 0;font-variant-numeric:tabular-nums;}
.reserve-pill{display:inline-flex;align-items:center;margin:10px 16px 0;font-size:11px;letter-spacing:1.2px;text-transform:uppercase;font-weight:600;
  color:var(--olive);border:1px solid rgba(74,92,58,.45);border-radius:100px;padding:8px 16px;background:transparent;}
.reserve-pill:active{background:rgba(74,92,58,.07);}
.viewcomments{display:block;text-align:left;font-size:13px;color:var(--muted);padding:7px 16px 0;}
.caption{font-size:13.5px;line-height:1.5;color:var(--ink-soft);padding:6px 16px 0;}
.caption b{font-weight:600;color:var(--ink);}
.stamp{font-size:9.5px;letter-spacing:1.8px;text-transform:uppercase;color:var(--muted);padding:9px 16px 0;}
.div{height:1px;background:var(--line-2);margin:16px 0 0;}

/* explore / search */
.searchhead{flex:0 0 auto;padding:8px 22px 10px;}
.searchbar{display:flex;align-items:center;gap:10px;background:var(--paper-2);border:1px solid var(--line);border-radius:22px;padding:11px 16px;}
.searchbar svg{width:18px;height:18px;color:var(--muted);flex:0 0 auto;}
.searchbar input{flex:1 1 auto;border:none;background:none;font-size:16px;color:var(--ink);outline:none;}
.searchbar input::placeholder{color:var(--muted);}
.q-clear{flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:rgba(27,26,23,.12);color:var(--ink-soft);font-size:17px;line-height:1;display:flex;align-items:center;justify-content:center;}
.chips{display:flex;gap:9px;overflow-x:auto;padding:8px 22px 4px;}
.chips::-webkit-scrollbar{display:none;}
.chip{flex:0 0 auto;font-size:10px;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:100px;padding:8px 14px;white-space:nowrap;}
.chip.on{color:var(--cream);background:var(--olive);border-color:var(--olive);}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:13px;padding:14px 22px 0;}
.card{border-radius:5px;overflow:hidden;background:var(--paper-2);box-shadow:0 0 0 1px var(--line),0 18px 30px -26px rgba(40,35,25,.5);}
.card .ph{position:relative;width:100%;aspect-ratio:1/1;}
.card .ph img{width:100%;height:100%;object-fit:cover;}
.card .ph .cat{position:absolute;top:8px;left:8px;font-size:8px;letter-spacing:1.2px;text-transform:uppercase;color:var(--cream);background:rgba(15,13,10,.34);backdrop-filter:blur(2px);padding:3px 7px;border-radius:2px;}
.card .body{padding:10px 11px 13px;}
.card .nm{font-size:13.5px;font-weight:600;display:flex;align-items:center;gap:4px;}
.card .nm .vb{width:12px;height:12px;}
.card .loc{font-size:9.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin-top:4px;}
.sb-mic{flex:0 0 auto;width:18px;height:18px;color:var(--muted);display:flex;}
.sb-mic svg{width:18px;height:18px;}
/* explore Discover/Places segmented toggle */
.ex-seg{display:flex;gap:5px;background:var(--paper-2);border:1px solid var(--line);border-radius:12px;padding:4px;margin-top:11px;}
.ex-seg button{flex:1;height:34px;border-radius:9px;font-size:11px;letter-spacing:1.2px;text-transform:uppercase;font-weight:600;color:var(--ink-soft);background:transparent;transition:background .16s,color .16s;}
.ex-seg button.on{background:var(--ink);color:var(--cream);}
/* explore masonry */
.masonry{column-count:2;column-gap:5px;padding:11px 18px 0;}
.mtile{position:relative;break-inside:avoid;margin-bottom:5px;border-radius:3px;overflow:hidden;background:var(--paper-2);box-shadow:0 0 0 1px var(--line-2);}
.mtile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.mglyph{position:absolute;top:7px;right:7px;width:16px;height:16px;color:#fff;filter:drop-shadow(0 1px 3px rgba(0,0,0,.55));}
/* places business cards */
.masonry.places .pcard{position:relative;break-inside:avoid;margin-bottom:5px;border-radius:6px;overflow:hidden;box-shadow:0 0 0 1px var(--line),0 16px 28px -24px rgba(40,35,25,.5);}
.pcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.pcat{position:absolute;top:8px;left:8px;z-index:2;font-size:8px;letter-spacing:1.2px;text-transform:uppercase;color:var(--cream);background:rgba(15,13,10,.4);backdrop-filter:blur(2px);padding:3px 8px;border-radius:100px;}
.pcard-grad{position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(12,10,8,.78),rgba(12,10,8,.06) 52%,transparent);}
.pcard-info{position:absolute;left:11px;right:11px;bottom:10px;z-index:2;color:#fff;}
.pcard-info .pnm{font-family:"Josefin Sans";font-weight:500;font-size:15px;letter-spacing:.3px;display:flex;align-items:center;gap:4px;text-shadow:0 1px 6px rgba(0,0,0,.4);}
.pcard-info .pnm .vb{width:12px;height:12px;color:var(--olive-light);}
.pcard-info .ploc{font-size:9.5px;letter-spacing:1.4px;text-transform:uppercase;color:rgba(255,255,255,.82);margin-top:3px;}
/* explore search row + filter button */
.searchbar-row{display:flex;gap:9px;align-items:center;}
.searchbar-row .searchbar{flex:1 1 auto;}
.sb-filter{flex:0 0 auto;width:46px;height:46px;border-radius:14px;border:1px solid var(--line);background:var(--paper-2);color:var(--ink);display:flex;align-items:center;justify-content:center;}
.sb-filter svg{width:20px;height:20px;}

/* search / filter sheet */
.app.is-sheet .tabs{display:none;}
.searchfilter{display:flex;flex-direction:column;padding:0;overflow:hidden;}
.sf-head{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:max(14px,env(safe-area-inset-top)) 18px 10px;}
.sf-x{width:26px;height:26px;color:var(--ink);}
.sf-x svg{width:24px;height:24px;}
.sf-title{font-family:"Josefin Sans";font-weight:400;font-size:16px;letter-spacing:1px;}
.sf-reset{font-size:12px;letter-spacing:.4px;font-weight:600;color:var(--olive);}
.sf-searchbar{flex:0 0 auto;display:flex;align-items:center;gap:10px;margin:0 18px 10px;background:var(--paper-2);border:1px solid var(--line);border-radius:14px;padding:11px 15px;}
.sf-searchbar svg{width:18px;height:18px;color:var(--muted);flex:0 0 auto;}
.sf-searchbar input{flex:1 1 auto;min-width:0;border:none;background:none;font-size:16px;color:var(--ink);outline:none;}
.sf-applied{flex:0 0 auto;display:flex;gap:7px;flex-wrap:wrap;padding:0 18px 4px;}
.fchip-applied{display:inline-flex;align-items:center;gap:6px;font-size:11px;letter-spacing:.3px;font-weight:600;color:var(--cream);background:var(--olive-deep);border-radius:100px;padding:7px 12px;}
.fchip-applied i{font-style:normal;font-size:14px;line-height:1;}
.sf-body{flex:1 1 auto;min-height:0;overflow-y:auto;padding:4px 18px 0;}
.sf-body::-webkit-scrollbar{width:0;}
.sf-group-l{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);font-weight:600;padding:16px 0 11px;display:flex;align-items:baseline;justify-content:space-between;}
.sf-dist{font-size:11px;letter-spacing:.2px;text-transform:none;color:var(--olive);font-weight:600;}
.sm-seg{display:flex;gap:6px;background:var(--paper-2);border:1px solid var(--line);border-radius:12px;padding:4px;}
.sm-opt{flex:1;height:36px;border-radius:9px;font-size:11.5px;letter-spacing:.5px;font-weight:600;color:var(--ink-soft);}
.sm-opt.on{background:var(--ink);color:var(--cream);}
.fcloud{display:flex;flex-wrap:wrap;gap:8px;}
.fchip{font-size:11.5px;letter-spacing:.3px;font-weight:500;color:var(--ink-soft);border:1px solid var(--line);border-radius:100px;padding:9px 14px;background:var(--paper-2);}
.fchip.on{background:var(--olive);color:var(--cream);border-color:var(--olive);}
.sf-slider{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:4px;background:var(--line);outline:none;margin:4px 0 7px;}
.sf-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:var(--olive);border:3px solid var(--paper);box-shadow:0 0 0 1px var(--olive);cursor:pointer;}
.sf-slider::-moz-range-thumb{width:18px;height:18px;border:3px solid var(--paper);border-radius:50%;background:var(--olive);}
.sf-ticks{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.5px;color:var(--muted);padding:0 1px 16px;}
.sf-ticks span.on{color:var(--olive);font-weight:700;}
.sf-footer{flex:0 0 auto;display:flex;gap:10px;align-items:center;padding:11px 18px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--paper);}
.sf-reset2{flex:0 0 auto;font-size:11px;letter-spacing:1px;text-transform:uppercase;font-weight:600;color:var(--ink);border:1px solid var(--line);border-radius:100px;padding:13px 20px;background:var(--paper-2);}
.sf-apply{flex:1 1 auto;height:50px;border-radius:100px;background:var(--ink);color:var(--cream);font-size:12.5px;letter-spacing:1.2px;text-transform:uppercase;font-weight:700;}

/* shared grid */
.grid-tight{display:grid;grid-template-columns:1fr 1fr 1fr;gap:3px;padding:3px;}
.grid-tight.on-profile{padding:3px 0 0;}
.gcell{position:relative;aspect-ratio:1/1;overflow:hidden;}
.gcell img{width:100%;height:100%;object-fit:cover;}
.gplay{position:absolute;top:6px;right:6px;width:15px;height:15px;color:#fff;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5));}
.section-label{font-size:10px;letter-spacing:2.4px;text-transform:uppercase;color:var(--muted);padding:16px 22px 4px;}
.stat{text-align:center;}
.stat b{font-family:"Josefin Sans";font-weight:500;font-size:18px;display:block;letter-spacing:.3px;}
.stat small{font-size:9px;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted);}
.ptabs{display:flex;margin-top:16px;border-top:1px solid var(--line);}
.ptabs div{flex:1;display:flex;align-items:center;justify-content:center;padding:11px 0;color:var(--muted);position:relative;}
.ptabs div svg{width:20px;height:20px;}
.ptabs div.on{color:var(--ink);}
.ptabs div.on::after{content:"";position:absolute;left:0;right:0;top:-1px;height:1.5px;background:var(--olive);}

/* own profile */
.own-id{display:flex;align-items:center;gap:24px;padding:14px 22px 0;}
.own-av{width:80px;height:80px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1.5px var(--olive);flex:0 0 auto;}
.own-stats{flex:1 1 auto;display:flex;justify-content:space-between;gap:6px;}
.own-stats .stat{flex:1;min-width:0;}
.own-stats .stat small{letter-spacing:1.2px;}
.own-meta{padding:14px 22px 0;}
.own-name{font-family:"Josefin Sans";font-weight:400;font-size:22px;}
.own-handle{font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted);margin-top:4px;}
.own-bio{font-size:13.5px;line-height:1.5;color:var(--ink-soft);margin-top:11px;}
.pill{flex:1 1 auto;text-align:center;background:var(--olive);color:var(--cream);font-size:12.5px;font-weight:600;letter-spacing:.5px;padding:11px;border-radius:8px;}
.pill.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line);}
.pill.wide{display:block;width:100%;margin-top:14px;}

/* business / creator profile */
.bizprofile{padding:0;}
.cover{position:relative;height:172px;flex:0 0 auto;}
.cover img{width:100%;height:100%;object-fit:cover;filter:contrast(1.03) brightness(.97);}
.cover-scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(244,239,229,.55),transparent 50%);}
.idblock{padding:0 22px;}
.avatar-lg{width:80px;height:80px;border-radius:50%;border:3px solid var(--paper);overflow:hidden;margin-top:-40px;position:relative;box-shadow:0 6px 16px -8px rgba(40,35,25,.5);}
.avatar-lg img{width:100%;height:100%;object-fit:cover;}
.namerow{display:flex;align-items:center;gap:7px;margin-top:11px;}
.namerow .n{font-family:"Josefin Sans";font-weight:400;font-size:23px;letter-spacing:.4px;}
.vbig .vb{width:17px;height:17px;}
.bcat{font-size:10px;letter-spacing:2.2px;text-transform:uppercase;color:var(--muted);margin-top:4px;}
.bstats{display:flex;gap:26px;margin-top:15px;}
.bstats .stat{text-align:left;}
.bbio{font-size:13px;line-height:1.5;color:var(--ink-soft);margin-top:15px;}
.bbio .link{color:var(--olive);font-weight:600;}
.bactions{display:flex;gap:9px;margin-top:15px;}
.btn{height:42px;border-radius:21px;display:flex;align-items:center;justify-content:center;gap:7px;font-size:12px;letter-spacing:1.4px;text-transform:uppercase;font-weight:600;}
.btn.follow{flex:1.4;background:var(--ink);color:var(--cream);}
.btn.follow.on{background:var(--paper-2);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line);}
.btn.msg{flex:1;background:var(--paper-2);border:1px solid var(--line);color:var(--ink);}
.contact{display:flex;margin-top:15px;border:1px solid var(--line);border-radius:12px;overflow:hidden;}
.contact a{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;padding:11px 0;border-right:1px solid var(--line);cursor:pointer;}
.contact a:last-child{border-right:none;}
.contact a svg{width:17px;height:17px;color:var(--olive);}
.contact a span{font-size:9px;letter-spacing:1.4px;text-transform:uppercase;color:var(--ink-soft);font-weight:600;}
.role-pill{font-size:9px;letter-spacing:1.4px;text-transform:uppercase;font-weight:600;color:var(--olive);border:1px solid rgba(74,92,58,.4);border-radius:100px;padding:3px 9px;margin-left:2px;}
.highlights{display:flex;gap:16px;margin-top:18px;overflow-x:auto;padding-bottom:2px;}
.highlights::-webkit-scrollbar{display:none;}
.hl{display:flex;flex-direction:column;align-items:center;gap:6px;flex:0 0 auto;width:60px;}
.hl-ring{width:60px;height:60px;border-radius:50%;padding:2px;background:var(--paper);box-shadow:0 0 0 1.5px var(--line);}
.hl-ring img{width:100%;height:100%;border-radius:50%;object-fit:cover;}
.hl small{font-size:9px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);white-space:nowrap;max-width:60px;overflow:hidden;text-overflow:ellipsis;}

/* notifications */
.nlist{padding:4px 0;}
.nrow{display:flex;align-items:center;gap:13px;padding:13px 22px;border-bottom:1px solid var(--line-2);}
/* unread notifications get a warm tint + an olive edge, so "new since last time" reads at a
   glance without a loud badge on every row. Fades to normal once marked read. */
.nrow.unread{background:var(--paper-2);box-shadow:inset 3px 0 0 var(--olive);}
.nav-av{width:46px;height:46px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1px var(--line);flex:0 0 auto;}
.nmeta{flex:1 1 auto;min-width:0;}
.nwho{font-size:14px;font-weight:600;}
.ntext{font-size:12.5px;color:var(--ink-soft);margin-top:2px;}
.ntime{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);}
.livedot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--olive);margin-left:5px;vertical-align:middle;}

/* reels */
.app.is-reels{background:#0c0b0a;}
.reels-top{position:absolute;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  padding:max(16px,calc(env(safe-area-inset-top) + 6px)) 22px 10px;}
.reels-brand{font-family:"Josefin Sans";font-weight:300;font-size:15px;letter-spacing:6px;text-indent:6px;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.5);opacity:.92;}
.reels-seg{display:flex;gap:22px;}
.reels-seg button{font-size:14px;font-weight:500;color:rgba(255,255,255,.6);text-shadow:0 1px 4px rgba(0,0,0,.5);position:relative;}
.reels-seg button.on{color:#fff;font-weight:600;}
.reels-seg button.on::after{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:-7px;width:16px;height:2px;background:#fff;border-radius:2px;}
.reels-cam{width:24px;height:24px;color:#fff;filter:drop-shadow(0 1px 3px rgba(0,0,0,.5));}
.screen.reels{scroll-snap-type:y mandatory;background:#0c0b0a;}
.reel{position:relative;height:100%;min-height:100%;scroll-snap-align:start;overflow:hidden;background:#0c0b0a;}
.reel-bg{position:absolute;inset:0;background-size:cover;background-position:center;animation:kb 11s ease-in-out infinite alternate;will-change:transform;}
.reel-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:transparent;z-index:1;}
@keyframes kb{0%{transform:scale(1.06) translate(0,0)}100%{transform:scale(1.2) translate(-2%,-3%)}}
.reel-grad-t{position:absolute;top:0;left:0;right:0;height:170px;background:linear-gradient(to bottom,rgba(0,0,0,.55),transparent);}
.reel-grad{position:absolute;bottom:0;left:0;right:0;height:48%;background:linear-gradient(to top,rgba(8,7,6,.82),rgba(8,7,6,.1) 60%,transparent);}
.reel-rail{position:absolute;right:14px;bottom:calc(40px + env(safe-area-inset-bottom));z-index:6;display:flex;flex-direction:column;align-items:center;gap:20px;}
.reel-rail .rb{display:flex;flex-direction:column;align-items:center;gap:5px;color:#fff;filter:drop-shadow(0 1px 5px rgba(0,0,0,.5));}
.reel-rail .rb svg{width:29px;height:29px;}
.reel-rail .rb small{font-size:11.5px;font-weight:600;}
.reel-rail .rb.on{color:var(--olive-lt);}
.reel-rail .rb.on .heart-line,.reel-rail .rb.on .save-line{display:none;}
.reel-rail .rb.on .heart-fill{display:block;color:#e2675f;}
.reel-rail .rb.on .save-fill{display:block;}
.reel-rail .rb .heart-fill,.reel-rail .rb .save-fill{display:none;}
.reel-rail .avbtn{position:relative;width:44px;height:44px;border-radius:50%;border:1.5px solid #fff;overflow:hidden;margin-bottom:6px;}
.reel-rail .avbtn img{width:100%;height:100%;object-fit:cover;}
.reel-rail .avbtn .plus{position:absolute;bottom:-7px;left:50%;transform:translateX(-50%);width:18px;height:18px;border-radius:50%;background:var(--olive-lt);border:2px solid #0c0b0a;color:#fff;font-size:12px;line-height:15px;text-align:center;font-weight:700;}
.reel-rail .disc{width:32px;height:32px;border-radius:9px;overflow:hidden;border:2px solid rgba(255,255,255,.5);margin-top:2px;padding:0;}
.reel-rail .disc img{width:100%;height:100%;object-fit:cover;}
.reel-info{position:absolute;left:22px;right:78px;bottom:calc(28px + env(safe-area-inset-bottom));z-index:6;color:#fff;text-shadow:0 1px 5px rgba(0,0,0,.5);}
.reel-who{display:flex;align-items:center;gap:9px;}
.reel-h{font-size:15px;font-weight:700;}
.reel-who .vb{width:14px;height:14px;color:var(--cream);}
.reel-follow{font-size:11px;letter-spacing:1px;text-transform:uppercase;font-weight:600;border:1px solid rgba(255,255,255,.7);border-radius:6px;padding:3px 11px;color:#fff;}
.reel-follow.on{border-color:rgba(255,255,255,.4);color:rgba(255,255,255,.75);}
.reel-cap{font-size:13.5px;line-height:1.45;margin-top:11px;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;}
.reel-audio{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:12px;color:rgba(255,255,255,.92);}
.reel-audio svg{width:13px;height:13px;}
.reel-progress{position:absolute;left:22px;right:22px;bottom:calc(14px + env(safe-area-inset-bottom));height:2.5px;background:rgba(255,255,255,.28);border-radius:2px;z-index:6;}
.reel-progress .fill{height:100%;width:0;background:#fff;border-radius:2px;}
.reel.active .reel-progress .fill{animation:reelfill 5.5s linear forwards;}
@keyframes reelfill{from{width:0}to{width:100%}}
.reels-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 40px;color:#fff;}
.re-h{font-size:17px;font-weight:600;}
.re-s{font-size:13px;line-height:1.5;color:rgba(255,255,255,.72);margin:10px 0 20px;}
.re-btn{font-size:12px;letter-spacing:1.2px;text-transform:uppercase;font-weight:600;color:#0c0b0a;background:#fff;border-radius:100px;padding:11px 22px;}

/* bottom tabs */
/* No backdrop-filter here. The tab bar is a flex SIBLING of the scroller, not an overlay on
   top of it — nothing ever passes behind it, so the blur was sampling a flat, static colour
   that the .94 background already hides. Zero visual output, but it still forced its own
   compositing layer on every device. The blurs that remain (.pcat, .cat, .ep-badge, #storyv)
   all sit over real photography and earn their cost. */
.tabs{flex:0 0 auto;background:rgba(244,239,229,.94);border-top:1px solid var(--line);
  padding:11px 34px max(14px,env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:space-between;z-index:40;}
.tab{display:flex;flex-direction:column;align-items:center;color:var(--muted);position:relative;width:42px;}
.tab svg{width:25px;height:25px;}
.tab.on{color:var(--ink);}
.tab.on::after{content:"";position:absolute;bottom:-7px;width:4px;height:4px;border-radius:50%;background:var(--olive);}
.app.is-reels .tabs{background:linear-gradient(to top,rgba(0,0,0,.6),transparent);border-top:none;}
.app.is-reels .tab{color:rgba(255,255,255,.6);}
.app.is-reels .tab.on{color:#fff;}
.app.is-reels .tab.on::after{background:#fff;}

/* welcome */
.welcome{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;padding:max(30px,env(safe-area-inset-top)) 30px max(30px,env(safe-area-inset-bottom));}
.w-top{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;}
.w-mark{font-family:"Josefin Sans";font-weight:300;font-size:30px;letter-spacing:15px;text-indent:15px;}
.w-rule{width:34px;height:1px;background:var(--olive);margin:20px 0 26px;}
.w-head{font-family:"Josefin Sans";font-weight:400;font-size:32px;line-height:1.18;}
.w-head b{font-weight:500;}
.w-head.serif{font-family:var(--serif);font-weight:400;font-size:33px;line-height:1.16;letter-spacing:.2px;}
.w-head.serif i{font-style:italic;color:var(--olive);}
.w-sub{font-size:13.5px;line-height:1.6;color:var(--ink-soft);margin-top:16px;max-width:288px;}
.w-strip{display:flex;gap:8px;justify-content:center;margin-top:34px;}
.w-strip img{width:54px;height:70px;object-fit:cover;border-radius:6px;box-shadow:0 0 0 1px var(--line);}
.w-strip img:nth-child(even){transform:translateY(-8px);}
.w-actions{flex:0 0 auto;display:flex;flex-direction:column;gap:10px;}
.btn.primary{height:52px;border-radius:26px;background:var(--ink);color:var(--cream);font-size:13px;letter-spacing:1.6px;text-transform:uppercase;font-weight:600;}
.btn.ghost{height:46px;border-radius:23px;background:transparent;color:var(--ink-soft);font-size:12px;letter-spacing:1.4px;text-transform:uppercase;font-weight:600;}
.w-fine{text-align:center;font-size:10.5px;line-height:1.5;color:var(--muted);margin-top:10px;}

/* ===== onboarding ===== */
.onboard{position:relative;}
.onboard .w-top{justify-content:flex-start;align-items:stretch;text-align:left;padding-top:34px;}
.onboard .w-mark{text-align:center;font-size:24px;letter-spacing:12px;text-indent:12px;}
.onboard .w-rule{width:34px;height:1px;background:var(--line);margin:14px auto 26px;}
.ob-back{position:absolute;top:calc(env(safe-area-inset-top) + 4px);left:0;width:26px;height:26px;color:var(--ink);}
.ob-back svg{width:26px;height:26px;}
.ob-head{font-family:"Josefin Sans";font-weight:400;font-size:25px;color:var(--ink);}
.ob-sub{font-size:13px;line-height:1.55;color:var(--ink-soft);margin:8px 0 24px;}
.ob-field{display:block;margin-bottom:16px;}
.ob-field>span{display:block;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:7px;}
.ob-field input,.ob-field select{width:100%;border:1px solid var(--line);background:var(--paper-2);border-radius:12px;padding:13px 15px;font-size:16px;color:var(--ink);outline:none;font-family:inherit;}
.ob-field input:focus,.ob-field select:focus{border-color:var(--olive);}
.ob-field input::placeholder{color:var(--muted);}
.ob-handle{display:flex;align-items:center;border:1px solid var(--line);background:var(--paper-2);border-radius:12px;padding-left:15px;}
.ob-handle:focus-within{border-color:var(--olive);}
.ob-handle i{font-style:normal;color:var(--muted);font-size:15px;}
.ob-handle input{border:none;background:none;border-radius:0;padding-left:6px;}
.ob-select{position:relative;display:flex;align-items:center;}
.ob-select svg{position:absolute;left:15px;width:17px;height:17px;color:var(--muted);pointer-events:none;}
.ob-select select{padding-left:42px;appearance:none;-webkit-appearance:none;}
/* signup account-type toggle + auth error */
.auth .w-top{padding-top:34px;}
/* Signup/login forms can be taller than a short phone screen (Safari chrome / keyboard).
   Let the fields scroll while the action button stays pinned + always reachable. */
.onboard .w-top,.auth .w-top{min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;}
.onboard .w-actions,.auth .w-actions{padding-top:12px;}
.atoggle{display:flex;gap:6px;background:var(--paper-2);border:1px solid var(--line);border-radius:14px;padding:4px;margin-bottom:20px;}
.atoggle-opt{flex:1;height:38px;border-radius:10px;font-size:11px;letter-spacing:1.4px;text-transform:uppercase;font-weight:600;color:var(--ink-soft);background:transparent;transition:background .18s,color .18s;}
.atoggle-opt.on{background:var(--ink);color:var(--cream);}
.au-err{font-size:12.5px;line-height:1.5;color:#9c3b2c;background:rgba(156,59,44,.08);border:1px solid rgba(156,59,44,.22);border-radius:10px;max-height:0;padding:0 12px;overflow:hidden;opacity:0;transition:max-height .2s,padding .2s,opacity .2s;}
.au-err.show:not(:empty){max-height:90px;padding:10px 12px;opacity:1;margin-top:2px;}

/* ===== creator studio ===== */
.studio{padding:16px 18px 0;}
.st-hero{background:var(--paper-2);border:1px solid var(--line);border-radius:16px;padding:16px 16px 12px;}
.st-hero-top{display:flex;align-items:flex-start;justify-content:space-between;}
.st-reach{font-family:"Josefin Sans";font-weight:400;font-size:34px;line-height:1;color:var(--ink);}
.st-reach-l{font-size:11px;letter-spacing:.4px;color:var(--muted);margin-top:5px;}
.st-trend{font-size:12px;font-weight:600;color:var(--olive);}
.spark{display:block;width:100%;height:66px;margin:12px 0 2px;}
.st-days{display:flex;justify-content:space-between;font-size:9px;letter-spacing:1px;color:var(--muted);padding:0 1px;}
/* a genuinely flat week gets an honest line instead of a misleading zero-height chart */
.st-flat{height:66px;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--muted-2);}
.st-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:14px;}
.st-tile{background:var(--paper-2);border:1px solid var(--line);border-radius:13px;padding:13px 14px;}
.st-v{font-size:21px;font-weight:600;color:var(--ink);}
.st-l{font-size:10.5px;letter-spacing:.3px;color:var(--muted);margin-top:3px;}
.st-d{font-size:10px;font-weight:600;color:var(--olive);margin-top:6px;}
.st-sec{font-size:10px;letter-spacing:2.2px;text-transform:uppercase;color:var(--muted);padding:22px 1px 11px;}
.st-aud{display:flex;flex-direction:column;gap:10px;}
.aud-row{display:flex;align-items:center;gap:11px;}
.aud-n{flex:0 0 84px;font-size:12.5px;color:var(--ink-soft);}
.aud-bar{flex:1 1 auto;height:7px;border-radius:4px;background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--line-2);overflow:hidden;}
.aud-bar i{display:block;height:100%;border-radius:4px;background:var(--olive);}
.aud-p{flex:0 0 32px;text-align:right;font-size:11px;font-weight:600;color:var(--muted);}
.st-content{display:flex;flex-direction:column;}
.ct-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line-2);}
.ct-row img{width:46px;height:46px;border-radius:8px;object-fit:cover;flex:0 0 auto;box-shadow:0 0 0 1px var(--line);}
.ct-meta{flex:1 1 auto;min-width:0;}
.ct-cap{font-size:13px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ct-sub{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin-top:4px;}
.ct-stat{flex:0 0 auto;text-align:right;min-width:44px;}
.ct-stat b{display:block;font-size:14px;font-weight:600;color:var(--ink);}
.ct-stat small{font-size:9px;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);}

/* ===== settings / edit profile ===== */
.settings{padding:10px 22px 0;}
.set-id{display:flex;align-items:center;gap:13px;padding:8px 0 10px;}
.set-id img{width:60px;height:60px;border-radius:50%;object-fit:cover;flex:0 0 auto;box-shadow:0 0 0 1px var(--line);}
.set-name{font-size:17px;font-weight:600;color:var(--ink);}
.set-handle{font-size:12px;color:var(--muted);margin-top:3px;}
.set-bio{width:100%;min-height:66px;resize:none;border:1px solid var(--line);background:var(--paper-2);border-radius:12px;padding:12px 14px;font-size:16px;line-height:1.5;color:var(--ink);outline:none;font-family:inherit;}
.set-bio:focus{border-color:var(--olive);}
.set-bio::placeholder{color:var(--muted);}
.set-save{display:block;width:100%;height:50px;border-radius:25px;background:var(--olive);color:var(--cream);font-size:12px;letter-spacing:1.4px;text-transform:uppercase;font-weight:700;margin-top:8px;}
.set-logout{display:block;width:100%;height:48px;border-radius:24px;border:1px solid var(--line);background:var(--paper-2);color:#a23b35;font-size:12px;letter-spacing:1.2px;text-transform:uppercase;font-weight:600;}
.set-ver{text-align:center;font-size:11px;color:var(--muted);padding:18px 0 0;}
.set-logout.confirming{background:#a23b35;color:var(--cream);border-color:#a23b35;}

/* ===== edit post ===== */
.editpost{padding:14px 22px 0;}
.ep-frame{position:relative;border-radius:11px;overflow:hidden;box-shadow:0 0 0 1px var(--line),0 18px 30px -26px rgba(40,35,25,.5);}
.ep-frame img{width:100%;max-height:330px;object-fit:cover;display:block;}
.ep-badge{position:absolute;top:11px;left:11px;font-size:9px;letter-spacing:1.4px;text-transform:uppercase;color:var(--cream);background:rgba(15,13,10,.42);backdrop-filter:blur(2px);padding:4px 9px;border-radius:4px;}
.editpost .set-save{margin-top:14px;}
.editpost .set-logout{margin-top:10px;}
.ep-meta{text-align:center;font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);padding:16px 0 0;}

/* ===== settings → business entry ===== */
.set-biz{display:flex;flex-direction:column;align-items:flex-start;gap:3px;width:100%;text-align:left;border:1px solid var(--line);background:var(--paper-2);border-radius:13px;padding:14px 16px;}
.set-biz-t{font-size:14px;font-weight:600;color:var(--ink);}
.set-biz-s{font-size:11.5px;color:var(--muted);}

/* ===== business dashboard ===== */
.bizdash .bd-id{display:flex;align-items:center;gap:12px;padding:2px 0 4px;}
.bd-av{width:46px;height:46px;border-radius:50%;object-fit:cover;flex:0 0 auto;box-shadow:0 0 0 1px var(--line);}
.bd-id-c{flex:1 1 auto;min-width:0;}
.bd-eyebrow{font-size:9.5px;letter-spacing:2.2px;text-transform:uppercase;color:var(--muted);font-weight:600;}
.bd-name{font-size:18px;font-family:"Josefin Sans";font-weight:500;color:var(--ink);display:flex;align-items:center;gap:5px;margin-top:2px;}
.bd-name .vb{width:15px;height:15px;}
.bd-period{flex:0 0 auto;font-size:11px;font-weight:600;letter-spacing:.4px;color:var(--ink-soft);background:var(--paper-2);border:1px solid var(--line);border-radius:100px;padding:7px 13px;}
.bd-tag{font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);margin-top:3px;}
/* olive hero metric card */
.bd-hero{margin-top:14px;background:var(--olive-deep);border-radius:18px;padding:17px 18px 15px;color:var(--cream);box-shadow:0 20px 40px -26px rgba(40,45,30,.7);}
.bd-hero-top{display:flex;align-items:flex-start;justify-content:space-between;}
.bd-hero-l{font-size:10px;letter-spacing:1.8px;text-transform:uppercase;color:rgba(246,241,232,.66);}
.bd-hero-v{font-family:"Josefin Sans";font-weight:400;font-size:40px;line-height:1.04;margin-top:6px;letter-spacing:.5px;}
.bd-hero-delta{font-size:12.5px;font-weight:600;color:var(--olive-light);}
.bd-hero-spark{margin:8px 0 0;}
.bd-hero-spark .spark{height:60px;}
.bd-hero-sub{font-size:11px;color:rgba(246,241,232,.6);margin-top:8px;}
/* tile icons + deltas */
.st-tile-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px;}
.st-ic{width:18px;height:18px;color:var(--olive);display:flex;}
.st-ic svg{width:18px;height:18px;}
.st-tile .st-d{margin-top:0;}
.st-tile .st-v{font-family:"Josefin Sans";font-weight:500;font-size:23px;}
.st-tile .st-l{margin-top:2px;}
.st-sec-row{display:flex;align-items:baseline;justify-content:space-between;}
.st-sec-side{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--olive);font-weight:600;}
.bd-growth{background:var(--paper-2);border:1px solid var(--line);border-radius:14px;padding:14px 14px 10px;}
.bd-growth .spark{height:118px;}
.bd-tops{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;}
.bd-top{position:relative;aspect-ratio:3/4;border-radius:8px;overflow:hidden;box-shadow:0 0 0 1px var(--line);}
.bd-top img{width:100%;height:100%;object-fit:cover;}
.bd-top-r{position:absolute;left:7px;bottom:7px;font-size:11px;font-weight:700;color:#fff;text-shadow:0 1px 5px rgba(0,0,0,.6);}
.bd-actions{display:flex;gap:8px;margin-top:16px;}
.bd-qa{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;border:1px solid var(--line);background:var(--paper-2);border-radius:12px;padding:11px 4px;}
.bd-qa svg{width:20px;height:20px;color:var(--olive);}
.bd-qa span{font-size:10px;font-weight:600;color:var(--ink);}
.bd-activity{display:flex;flex-direction:column;}
.bd-act{display:flex;align-items:center;gap:11px;padding:9px 0;border-bottom:1px solid var(--line-2);}
.bd-act img{width:38px;height:38px;border-radius:50%;object-fit:cover;flex:0 0 auto;box-shadow:0 0 0 1px var(--line);}
.bd-act-t{flex:1 1 auto;font-size:13px;color:var(--ink-soft);line-height:1.4;}
.bd-act-t b{font-weight:600;color:var(--ink);}
.bd-act-time{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);flex:0 0 auto;}

/* toast */
#toast{position:fixed;left:50%;bottom:96px;transform:translate(-50%,10px);background:rgba(26,26,23,.94);color:#f6f1e8;
  font-size:13px;padding:11px 20px;border-radius:100px;z-index:200;opacity:0;pointer-events:none;
  transition:opacity .2s ease,transform .2s ease;box-shadow:0 12px 30px -12px rgba(0,0,0,.5);}
#toast.show{opacity:1;transform:translate(-50%,0);}

/* ===== header buttons + create flow ===== */
.hbtns{display:flex;gap:18px;align-items:center;}
.hshare{font-size:14px;font-weight:700;color:var(--olive);}
.own-cta{display:flex;gap:8px;margin-top:14px;}
.own-cta .pill{padding:10px;}

.create{padding-bottom:0;}
.cintro{font-size:12.5px;line-height:1.5;color:var(--ink-soft);padding:12px 22px 4px;}
.cseg-wrap{display:flex;gap:8px;padding:10px 22px 6px;}
.cseg{flex:1;text-align:center;font-size:11px;letter-spacing:1px;text-transform:uppercase;font-weight:600;padding:9px 0;border-radius:100px;border:1px solid var(--line);color:var(--muted);background:var(--paper-2);}
.cseg.on{background:var(--olive);color:var(--cream);border-color:var(--olive);}
.cpreview{margin:12px 22px 0;aspect-ratio:1/1;border-radius:8px;overflow:hidden;background:var(--paper-2);box-shadow:0 0 0 1px var(--line);display:flex;align-items:center;justify-content:center;}
.cpreview img{width:100%;height:100%;object-fit:cover;}
.cph{display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--muted);font-size:12px;letter-spacing:.5px;}
.cph svg{width:34px;height:34px;}
.ccap{display:block;width:calc(100% - 44px);margin:14px 22px 0;min-height:62px;resize:none;border:1px solid var(--line);border-radius:10px;background:var(--paper-2);padding:12px 14px;font-size:16px;line-height:1.5;color:var(--ink);outline:none;font-family:inherit;}
.ccap::placeholder{color:var(--muted);}
.caudio{display:flex;align-items:center;gap:9px;margin:12px 22px 0;font-size:12.5px;color:var(--ink-soft);}
.caudio svg{width:15px;height:15px;color:var(--olive);}
.cpick-row{display:flex;gap:9px;padding:14px 22px 2px;}
.cpick-btn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;text-align:center;
  border:1px solid var(--line);background:var(--paper-2);border-radius:13px;padding:15px 8px;cursor:pointer;}
.cpick-btn:active{background:var(--paper);}
.cpick-btn svg{width:23px;height:23px;color:var(--olive);}
.cpick-btn span{font-size:11.5px;font-weight:600;line-height:1.3;color:var(--ink);}
.csection-label{font-size:10px;letter-spacing:2.2px;text-transform:uppercase;color:var(--muted);padding:18px 22px 8px;}
.cgallery{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;padding:0 3px;}
.gpick{position:relative;aspect-ratio:1/1;overflow:hidden;padding:0;}
.gpick img{width:100%;height:100%;object-fit:cover;}
.gpick.on::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 3px var(--olive);}
.cshare-big{display:block;width:calc(100% - 44px);margin:20px 22px 0;height:50px;border-radius:25px;background:var(--olive);color:var(--cream);font-size:13px;letter-spacing:1.4px;text-transform:uppercase;font-weight:700;}
.cor{display:flex;align-items:center;gap:12px;margin:18px 22px 0;color:var(--muted);font-size:10px;letter-spacing:2px;}
.cor span{flex:1;height:1px;background:var(--line);}
.csync{display:flex;align-items:center;justify-content:center;gap:9px;width:calc(100% - 44px);margin:14px 22px 0;height:46px;border-radius:12px;border:1px solid var(--line);background:var(--paper-2);font-size:13px;font-weight:600;color:var(--ink);}
.csync svg{width:19px;height:19px;}
.csync-note{font-size:11px;line-height:1.5;color:var(--muted);padding:10px 22px 0;}
.reel-mine{font-size:11px;letter-spacing:.4px;color:rgba(255,255,255,.85);border:1px solid rgba(255,255,255,.4);border-radius:6px;padding:3px 9px;}

/* ===== action sheet (overflow / report / block) ===== */
#actionsheet{position:fixed;inset:0;z-index:340;display:flex;flex-direction:column;justify-content:flex-end;}
.as-backdrop{position:absolute;inset:0;background:rgba(12,11,9,.46);animation:storyin .2s ease;}
.as-card{position:relative;width:100%;max-width:var(--maxw);margin:0 auto;padding:0 10px calc(12px + env(safe-area-inset-bottom));animation:sheetup .26s cubic-bezier(.2,.8,.2,1);}
.as-title{text-align:center;font-size:12px;color:var(--muted);padding:14px 18px 10px;background:var(--paper);border-radius:16px 16px 0 0;margin-bottom:1px;}
.as-items{background:var(--paper);border-radius:16px;overflow:hidden;}
.as-title + .as-items{border-radius:0 0 16px 16px;}
.as-item{display:block;width:100%;text-align:center;font-size:16px;color:var(--ink);padding:16px;background:var(--paper);}
.as-items .as-item + .as-item{border-top:1px solid var(--line-2);}
.as-item.danger{color:#c2362f;font-weight:500;}
.as-item:active{background:var(--paper-2);}
.as-cancel{margin-top:8px;border-radius:16px;font-weight:600;background:var(--paper);}

/* blocked profile */
.blocked-note{font-size:13px;line-height:1.55;color:var(--muted);text-align:center;margin:14px 18px 16px;}
.unblock-btn{background:var(--paper-2);border:1px solid var(--line);color:var(--ink);max-width:200px;margin:0 auto;padding:0 26px;}

/* ===== full-screen post view (one post per screen) ===== */
.app.is-pview{background:#0c0b0a;}
.app.is-pview .tabs{display:none;}
.pview{background:#0c0b0a;scroll-snap-type:y mandatory;padding:0;}
.pview::-webkit-scrollbar{width:0;}
.pview-back{position:absolute;top:calc(env(safe-area-inset-top) + 12px);left:14px;z-index:30;width:30px;height:30px;color:#fff;filter:drop-shadow(0 1px 5px rgba(0,0,0,.6));}
.pview-back svg{width:30px;height:30px;}
.pslide{position:relative;height:100%;min-height:100%;scroll-snap-align:start;overflow:hidden;display:flex;align-items:center;justify-content:center;background:#0c0b0a;}
.pslide-bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:blur(36px) brightness(.45);transform:scale(1.25);}
.pslide-photo{position:relative;z-index:1;max-width:100%;max-height:100%;object-fit:contain;}
.pslide-top{position:absolute;top:0;left:0;right:0;z-index:3;display:flex;align-items:center;gap:11px;padding:calc(env(safe-area-inset-top) + 14px) 16px 34px 54px;background:linear-gradient(to bottom,rgba(0,0,0,.55),transparent);}
.ps-av{width:38px;height:38px;border-radius:50%;object-fit:cover;flex:0 0 auto;box-shadow:0 0 0 1px rgba(255,255,255,.5);}
.ps-meta{flex:1 1 auto;min-width:0;}
.ps-name{color:#fff;font-size:14px;font-weight:600;display:flex;align-items:center;gap:5px;}
.ps-name .vb{width:14px;height:14px;color:#cfe0bf;}
.ps-sub{color:rgba(255,255,255,.72);font-size:10px;letter-spacing:1.4px;text-transform:uppercase;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ps-more{color:#fff;width:26px;height:26px;flex:0 0 auto;}
.ps-more svg{width:22px;height:22px;}
.pslide-bottom{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:46px 16px calc(env(safe-area-inset-bottom) + 18px);background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,.1) 70%,transparent);color:#fff;}
.ps-actions{display:flex;align-items:center;gap:20px;margin-bottom:13px;}
.ps-act{display:flex;align-items:center;gap:7px;color:#fff;}
.ps-act .ic,.ps-act svg{width:27px;height:27px;}
.ps-act span{font-size:13px;font-weight:600;}
.ps-act.on{color:var(--olive-lt);}
.ps-act .heart-fill,.ps-act .save-fill{display:none;}
.ps-act.on .heart-line,.ps-act.on .save-line{display:none;}
.ps-act.on .heart-fill{display:block;color:#e2675f;}
.ps-act.on .save-fill{display:block;color:#fff;}
.ps-spacer{flex:1 1 auto;}
.ps-reserve{font-size:10px;letter-spacing:1.4px;text-transform:uppercase;font-weight:600;color:#fff;border:1px solid rgba(255,255,255,.6);border-radius:7px;padding:6px 12px;}
.ps-caption{font-size:14px;line-height:1.45;color:#fff;}
.ps-caption b{font-weight:600;}
.ps-time{font-size:10px;letter-spacing:1.6px;text-transform:uppercase;color:rgba(255,255,255,.6);margin-top:8px;}

/* double-tap heart pop */
.heart-pop{position:absolute;top:50%;left:50%;width:92px;height:92px;margin:-46px 0 0 -46px;pointer-events:none;z-index:8;filter:drop-shadow(0 5px 16px rgba(0,0,0,.45));animation:heartpop .76s cubic-bezier(.2,.8,.2,1) forwards;}
.heart-pop svg{width:100%;height:100%;}
@keyframes heartpop{0%{transform:scale(.3) rotate(-8deg);opacity:0}18%{transform:scale(1.18) rotate(0);opacity:1}34%{transform:scale(1)}70%{opacity:1}100%{transform:scale(1) translateY(-10px);opacity:0}}

/* ===== stories viewer ===== */
.avatar.seen{box-shadow:0 0 0 1.5px var(--line);}
#storyv{position:fixed;inset:0;z-index:300;background:rgba(12,11,9,.82);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;animation:storyin .22s ease;}
@keyframes storyin{from{opacity:0}to{opacity:1}}
.story-card{position:relative;width:100%;max-width:var(--maxw);height:100dvh;background:#100f0d;overflow:hidden;}
/* we own the gestures here — stop iOS from hijacking the vertical drag as a scroll (which cancels the swipe) */
.story-card,.story-card .story-tap,.story-card .story-img,.story-card .story-reply,.story-card .story-top{touch-action:none;}
.story-card.dragging{transition:none;}
.story-card.snapback{transition:transform .22s cubic-bezier(.22,1,.36,1);}
@media(min-width:480px){.story-card{height:min(100dvh,920px);border-radius:14px;box-shadow:0 40px 90px -30px rgba(0,0,0,.7);}}
.story-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none;}
.story-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,7,5,.55) 0%,rgba(8,7,5,0) 22%,rgba(8,7,5,0) 60%,rgba(8,7,5,.6) 100%);pointer-events:none;}
.story-bars{position:absolute;top:10px;left:10px;right:10px;display:flex;gap:4px;z-index:4;}
.sbar{flex:1;height:2.5px;border-radius:2px;background:rgba(246,241,232,.32);overflow:hidden;}
.sbar.done{background:rgba(246,241,232,.92);}
.sbar .sfill{display:block;height:100%;width:0;background:rgba(246,241,232,.95);}
.sbar.active .sfill{animation:sgrow linear forwards;}
@keyframes sgrow{from{width:0}to{width:100%}}
.story-top{position:absolute;top:22px;left:14px;right:12px;display:flex;align-items:center;justify-content:space-between;z-index:5;}
.story-id{display:flex;align-items:center;gap:9px;color:var(--cream);}
.story-id img{width:34px;height:34px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1.5px rgba(246,241,232,.7);}
.story-id span{font-size:13.5px;font-weight:600;}
.story-id .vb{color:#cfe0bf;}
.story-id small{font-size:11px;color:rgba(246,241,232,.7);margin-left:2px;}
.story-x{color:var(--cream);font-size:30px;line-height:1;font-weight:300;padding:0 4px;z-index:5;}
.story-tap{position:absolute;top:54px;bottom:74px;z-index:3;background:none;}
.story-tap.prev{left:0;width:32%;}
.story-tap.next{right:0;width:68%;}
.story-cap{position:absolute;left:16px;right:16px;bottom:84px;z-index:4;color:var(--cream);font-size:13.5px;line-height:1.45;text-shadow:0 1px 12px rgba(0,0,0,.5);}
.story-reply{position:absolute;left:14px;right:14px;bottom:22px;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid rgba(246,241,232,.5);border-radius:100px;padding:12px 18px;color:rgba(246,241,232,.8);font-size:13px;}
.story-reply .ic{display:flex;width:22px;height:22px;color:var(--cream);flex:0 0 auto;}
.story-reply .ic svg{width:22px;height:22px;}
.story-reply .heart-fill{display:none;}
/* "Seen by N" control on your own story (replaces the reply bar) */
.story-seen{position:absolute;left:14px;bottom:22px;z-index:5;display:flex;align-items:center;gap:7px;
  background:none;border:none;color:rgba(246,241,232,.92);font-size:13px;font-weight:500;padding:6px 2px;text-shadow:0 1px 3px rgba(0,0,0,.4);}
.story-seen svg{width:19px;height:19px;color:rgba(246,241,232,.92);}
.story-seen b{font-weight:700;}

/* "Seen by" viewer sheet — reuses the comment-sheet visual system */
#seenbysheet{position:fixed;inset:0;z-index:340;display:flex;flex-direction:column;justify-content:flex-end;}
.sb-sheet{max-height:60dvh;}
.sb-sheet .cs-list{padding-bottom:22px;}

/* ===== comments sheet ===== */
#commentsheet{position:fixed;inset:0;z-index:320;display:flex;flex-direction:column;justify-content:flex-end;}
.cs-backdrop{position:absolute;inset:0;background:rgba(12,11,9,.42);animation:storyin .2s ease;}
.cs-sheet{position:relative;width:100%;max-width:var(--maxw);margin:0 auto;background:var(--paper);border-radius:18px 18px 0 0;
  max-height:74dvh;display:flex;flex-direction:column;box-shadow:0 -20px 50px -20px rgba(40,35,25,.45);animation:sheetup .26s cubic-bezier(.2,.8,.2,1);}
@keyframes sheetup{from{transform:translateY(100%)}to{transform:translateY(0)}}
.cs-grab{width:38px;height:4px;border-radius:3px;background:var(--line);margin:9px auto 4px;}
.cs-head{text-align:center;font-size:13px;font-weight:600;color:var(--ink);padding:6px 0 12px;border-bottom:1px solid var(--line-2);}
.cs-list{flex:1 1 auto;overflow-y:auto;padding:6px 18px 4px;}
.cs-list::-webkit-scrollbar{width:0;}
.cs-empty{text-align:center;color:var(--muted);font-size:13px;line-height:1.6;padding:48px 20px;}
.crow{display:flex;align-items:flex-start;gap:11px;padding:11px 0;}
.crow .cav{width:34px;height:34px;border-radius:50%;object-fit:cover;flex:0 0 auto;box-shadow:0 0 0 1px var(--line);}
.cbody{flex:1 1 auto;min-width:0;}
.cline{font-size:13.5px;line-height:1.45;color:var(--ink-soft);}
.cline b{font-weight:600;color:var(--ink);margin-right:5px;}
.cline b.tapname{cursor:pointer;}
.crow .cav[data-cprofile]{cursor:pointer;}
.creply{font-size:10px;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted);font-weight:600;}
.cmeta{font-size:10px;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted);margin-top:5px;}
.cheart{display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--muted);flex:0 0 auto;margin-top:7px;}
.cheart .ic,.cheart svg{width:16px;height:16px;}
.cheart small{font-size:9.5px;color:var(--muted);}
.cheart .heart-fill{display:none;}
.cheart.on{color:#e2675f;}
.cheart.on .heart-line{display:none;}
.cheart.on .heart-fill{display:block;color:#e2675f;}
.cheart.on small{color:#e2675f;}
.cs-compose{display:flex;align-items:center;gap:10px;padding:11px 16px;border-top:1px solid var(--line);background:var(--paper);
  padding-bottom:calc(11px + env(safe-area-inset-bottom));}
.cs-compose .cav{width:32px;height:32px;border-radius:50%;object-fit:cover;flex:0 0 auto;box-shadow:0 0 0 1px var(--line);}
.cs-compose input{flex:1 1 auto;min-width:0;border:1px solid var(--line);background:var(--paper-2);border-radius:100px;padding:10px 15px;font-size:16px;color:var(--ink);outline:none;font-family:inherit;}
.cs-compose input::placeholder{color:var(--muted);}
.cs-send{flex:0 0 auto;font-size:13px;font-weight:700;letter-spacing:.4px;color:var(--olive);padding:4px 6px;}

/* ===== messages: inbox ===== */
.dmlist{padding:6px 0;}
.dmrow{display:flex;align-items:center;gap:13px;padding:13px 22px;}
.dmrow:active{background:var(--paper-2);}
.dmav{width:52px;height:52px;border-radius:50%;object-fit:cover;flex:0 0 auto;box-shadow:0 0 0 1px var(--line);}
.dmmeta{flex:1 1 auto;min-width:0;}
.dmname{font-size:14px;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:5px;}
.dmlast{font-size:12.5px;color:var(--muted);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dmtime{font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);flex:0 0 auto;}

/* ===== messages: thread ===== */
.screen.dm{display:flex;flex-direction:column;padding:0;overflow:hidden;}
.dm-thread{flex:1 1 auto;overflow-y:auto;padding:18px 16px 10px;display:flex;flex-direction:column;gap:9px;}
.dm-thread::-webkit-scrollbar{width:0;}
.dm-intro{display:flex;flex-direction:column;align-items:center;text-align:center;gap:3px;padding:6px 0 20px;}
.dm-intro img{width:74px;height:74px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1px var(--line);margin-bottom:7px;}
.din-n{font-size:16px;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:6px;}
.din-s{font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted);}
.dm-view{margin-top:11px;font-size:11px;letter-spacing:1.2px;text-transform:uppercase;font-weight:600;color:var(--ink);border:1px solid var(--line);border-radius:100px;padding:8px 16px;}
.bubble{max-width:76%;padding:10px 14px;border-radius:18px;font-size:14px;line-height:1.4;position:relative;}
.bubble small{display:block;font-size:9px;letter-spacing:1px;text-transform:uppercase;opacity:.6;margin-top:4px;}
.bubble.them{align-self:flex-start;background:var(--paper-2);color:var(--ink);border-bottom-left-radius:5px;box-shadow:0 0 0 1px var(--line-2);}
.bubble.me{align-self:flex-end;background:var(--olive);color:var(--cream);border-bottom-right-radius:5px;}
.dm-compose{flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:11px 16px;border-top:1px solid var(--line);background:var(--paper);
  padding-bottom:calc(11px + env(safe-area-inset-bottom));}
.dm-compose input{flex:1 1 auto;min-width:0;border:1px solid var(--line);background:var(--paper-2);border-radius:100px;padding:11px 16px;font-size:16px;color:var(--ink);outline:none;font-family:inherit;}
.dm-compose input::placeholder{color:var(--muted);}
.dm-send{flex:0 0 auto;width:40px;height:40px;border-radius:50%;background:var(--olive);color:var(--cream);display:flex;align-items:center;justify-content:center;}
.dm-send svg{width:20px;height:20px;}

/* ---------- settings (Instagram-style, view-routed) ---------- */
.setpane{padding:2px 0 0;}
.set-pad{padding:0 22px;}
.set-grp{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);padding:20px 22px 8px;}
.set-row{display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:13px 22px;background:none;border:none;color:var(--ink);}
button.set-row.tap:active{background:var(--paper-2);}
.set-row .sr-ic{width:24px;height:24px;flex:0 0 auto;color:var(--ink);}
.set-row .sr-ic svg{width:24px;height:24px;}
.set-row .sr-tx{flex:1;min-width:0;}
.set-row .sr-t{font-size:15px;color:var(--ink);}
.set-row .sr-sub{font-size:12px;color:var(--muted);margin-top:3px;line-height:1.4;}
.set-row .sr-r{display:flex;align-items:center;gap:8px;color:var(--muted-2);flex:0 0 auto;}
.set-row .sr-rt{font-size:13px;color:var(--muted);}
.chev{width:17px;height:17px;color:var(--muted-2);flex:0 0 auto;}
/* iOS-style switch */
.sw{position:relative;width:46px;height:27px;border-radius:14px;background:var(--line);transition:background .2s;flex:0 0 auto;border:none;padding:0;cursor:pointer;}
.sw.on{background:var(--olive);}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s;}
.sw.on::after{transform:translateX(19px);}
/* profile id card as a tappable row */
.setpane .set-id.tap{width:100%;gap:13px;padding:15px 22px;background:none;border:none;text-align:left;align-items:center;}
.setpane .set-id.tap:active{background:var(--paper-2);}
.setpane .set-id .set-id-tx{flex:1;min-width:0;}
.setpane .set-id.tap .chev{margin-left:auto;}
/* segmented choice field */
.set-field{padding:10px 22px 6px;}
.sf-label{font-size:14px;font-weight:600;color:var(--ink);margin-bottom:5px;}
.sf-sub{font-size:12.5px;color:var(--muted);line-height:1.5;margin-bottom:10px;}
.set-seg{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:13px;overflow:hidden;background:var(--paper-2);}
.set-seg button{display:flex;align-items:center;justify-content:space-between;width:100%;text-align:left;padding:14px 15px;font-size:14.5px;color:var(--ink);border:none;border-bottom:1px solid var(--line);background:none;font-family:inherit;}
.set-seg button:last-child{border-bottom:none;}
.set-seg button.on{font-weight:600;}
.set-seg button.on::after{content:"✓";color:var(--olive);font-weight:700;font-size:15px;}
/* follow-request / blocked rows */
.req-row{display:flex;align-items:center;gap:12px;padding:11px 22px;}
.req-row img{width:46px;height:46px;border-radius:50%;object-fit:cover;flex:0 0 auto;box-shadow:0 0 0 1px var(--line);background:var(--paper-2);}
.req-tx{flex:1;min-width:0;}
.req-n{font-size:14px;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:5px;}
.req-n svg{width:13px;height:13px;}
.req-h{font-size:12px;color:var(--muted);margin-top:1px;}
.req-btns{display:flex;gap:8px;flex:0 0 auto;}
.req-ok{height:34px;padding:0 16px;border-radius:9px;background:var(--olive);color:var(--cream);font-size:13px;font-weight:600;border:none;}
.req-no{height:34px;padding:0 14px;border-radius:9px;background:var(--paper-2);border:1px solid var(--line);color:var(--ink);font-size:13px;font-weight:600;}
/* note card */
.note-card{margin:8px 22px;background:var(--paper-2);border:1px solid var(--line);border-radius:13px;padding:14px 16px;font-size:13px;line-height:1.55;color:var(--ink-soft);}
.note-card b{color:var(--ink);}
/* modesty */
.modesty-hero{text-align:center;padding:24px 22px 4px;}
.mh-ic{width:56px;height:56px;margin:0 auto 13px;display:flex;align-items:center;justify-content:center;border-radius:17px;background:var(--olive);color:var(--cream);}
.mh-ic svg{width:30px;height:30px;}
.mh-t{font-family:var(--serif);font-size:24px;color:var(--ink);}
.mh-s{font-size:13.5px;color:var(--muted);max-width:21em;margin:7px auto 0;line-height:1.5;}
.info-list{padding:2px 22px;}
.info-row{display:flex;gap:12px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--line-2);font-size:13.5px;line-height:1.5;color:var(--ink-soft);}
.info-row:last-child{border-bottom:none;}
.info-row svg{width:22px;height:22px;flex:0 0 auto;color:var(--olive);margin-top:1px;}
.info-row b{color:var(--ink);}
/* key/value (about, help) */
.kv{display:flex;justify-content:space-between;align-items:center;padding:14px 22px;border-bottom:1px solid var(--line-2);font-size:14px;color:var(--ink-soft);}
.kv b{color:var(--ink);font-weight:600;}
.about-mark{text-align:center;font-family:var(--serif);font-size:34px;letter-spacing:4px;color:var(--olive);padding:26px 0 0;}
.about-tag{text-align:center;font-size:13px;color:var(--muted);letter-spacing:1px;margin-top:2px;}
.legal-ph{padding:34px 26px;text-align:center;}
.lp-t{font-family:var(--serif);font-size:23px;color:var(--ink);margin-bottom:9px;}
.lp-s{font-size:13.5px;color:var(--muted);line-height:1.55;max-width:24em;margin:0 auto;}
.setpane .set-logout{margin-top:10px;}
/* comment-sheet states driven by settings */
.cs-hidden-note{font-size:12px;color:var(--muted);text-align:center;padding:8px 12px 12px;border-bottom:1px solid var(--line-2);margin-bottom:8px;}
.cs-off{flex:0 0 auto;text-align:center;color:var(--muted);font-size:13px;padding:16px;border-top:1px solid var(--line);background:var(--paper);}

/* ---------- Ideas / suggestion box ---------- */
/* the 💡 tile in the home-feed stories rail */
.idea-tile .avatar.idea{display:flex;align-items:center;justify-content:center;background:var(--cream);border:2px solid var(--olive);box-shadow:none;}
.idea-tile .avatar.idea svg{width:27px;height:27px;color:var(--olive);}
.idea-tile small{color:var(--olive);font-weight:600;}
/* board */
.ideas{padding:0 22px;}
.ideas-intro{font-size:13.5px;color:var(--ink-soft);line-height:1.55;padding:16px 0 14px;}
.ideas-new-btn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;height:50px;border-radius:25px;background:var(--olive);color:var(--cream);font-size:14px;font-weight:600;border:none;}
.ideas-new-btn .inb-ic svg{width:20px;height:20px;display:block;}
.ideas-private-note{display:flex;align-items:center;gap:9px;margin-top:12px;padding:11px 13px;background:var(--paper-2);border:1px solid var(--line);border-radius:12px;font-size:12.5px;color:var(--ink-soft);line-height:1.45;}
.ideas-private-note svg{width:18px;height:18px;flex:0 0 auto;color:var(--olive);}
.ideas-seg.seg{margin:18px 0 4px;gap:22px;}
.ideas-list{margin-top:6px;}
.idea-card{display:flex;gap:14px;align-items:flex-start;padding:15px 0;border-bottom:1px solid var(--line-2);}
.idea-vote{flex:0 0 auto;width:52px;display:flex;flex-direction:column;align-items:center;gap:2px;padding:7px 0;border:1px solid var(--line);border-radius:12px;background:var(--paper-2);color:var(--ink-soft);}
.idea-vote svg{width:19px;height:19px;}
.idea-vote b{font-size:13px;font-weight:700;}
.idea-vote.on{background:var(--olive);border-color:var(--olive);color:var(--cream);}
.idea-body{flex:1;min-width:0;}
.idea-title{font-size:15px;font-weight:600;color:var(--ink);line-height:1.35;display:flex;align-items:center;gap:7px;flex-wrap:wrap;}
.idea-mine{font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--olive);background:var(--olive-light);border-radius:20px;padding:2px 8px;}
.idea-det{font-size:13px;color:var(--muted);line-height:1.5;margin-top:4px;}
.idea-meta{font-size:11px;color:var(--muted-2);margin-top:7px;}
/* submit form: visibility choice */
.ideas-vis button{align-items:flex-start;padding:13px 15px;}
.ideas-vis .iv-tx{display:flex;flex-direction:column;gap:2px;text-align:left;}
.ideas-vis .iv-t{font-size:14px;font-weight:600;color:var(--ink);}
.ideas-vis .iv-s{font-size:12px;color:var(--muted);line-height:1.4;}
.ideas-vis button.on .iv-t{color:var(--olive);}

/* profile-photo picker (Edit profile + signup) */
.set-change-photo{display:block;margin:0 0 16px;padding:2px 0;background:none;border:none;color:var(--olive);font:inherit;font-weight:600;font-size:14px;letter-spacing:.01em;cursor:pointer;}
.set-change-photo:active{opacity:.55;}
.set-id img[data-avatar-pick]{cursor:pointer;}
.signup-avatar{position:relative;display:block;margin:10px auto 8px;width:94px;height:94px;padding:0;border:none;background:none;cursor:pointer;}
.signup-avatar img{width:94px;height:94px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1.5px var(--olive);display:block;background:var(--paper-2);}
.signup-avatar-cam{position:absolute;right:0;bottom:0;width:30px;height:30px;border-radius:50%;background:var(--olive);display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 3px var(--paper);}
.signup-avatar-cam svg{width:16px;height:16px;color:#fff;}
.signup-avatar-lbl{text-align:center;color:var(--muted);font-size:13px;margin:0 0 16px;letter-spacing:.02em;}

/* reel "Processing…" state — the author's honest placeholder while Bunny encodes */
.frame.proc{display:flex;align-items:center;justify-content:center;background:var(--paper-2,#ece5d6);min-height:300px;}
.proc-note{text-align:center;color:var(--muted);font-size:13.5px;line-height:1.6;padding:22px;max-width:26em;}
.proc-note b{color:var(--ink,#2a2a22);font-weight:600;}
.reel-proc{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#17160f;color:#cfc9ba;text-align:center;font-size:15px;line-height:1.7;z-index:2;padding:30px;}
.reel-proc b{color:#f4efe5;}

/* in-feed reels: the video plays inline (muted) while it's on screen; tap → Reels tab */
.frame.reel-in-feed{cursor:pointer;background:var(--paper-2);}
.frame.reel-in-feed .feed-reel{width:100%;height:420px;object-fit:cover;display:block;background:var(--paper-2);}
/* small persistent reel indicator in the corner (like IG/TikTok mark reels in-feed) */
.feed-reel-glyph{position:absolute;top:12px;right:12px;width:22px;height:22px;color:#fff;filter:drop-shadow(0 1px 3px rgba(0,0,0,.5));opacity:.9;pointer-events:none;}
.feed-reel-glyph svg{width:22px;height:22px;}
/* Instagram-style volume toggle on the feed reel */
.feed-reel-vol{position:absolute;right:12px;bottom:12px;width:34px;height:34px;border-radius:50%;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:3;transition:transform .09s ease;}
.feed-reel-vol:active{transform:scale(.9);}
.feed-reel-vol svg{width:18px;height:18px;color:#fff;}

/* reels-tab transition: run the Ken Burns pan only on the active reel (one GPU layer,
   not nine) and snap one reel at a time — kills the scroll glitch */
.reel-bg{animation:none;will-change:auto;transform:scale(1.06);}
.reel.active .reel-bg{animation:kb 11s ease-in-out infinite alternate;will-change:transform;}
.reel{scroll-snap-stop:always;}
/* the reels screen is a scroll-snap container — a translateY entry animation (the default
   .fade-in) fights snap recalculation + the first video's decode-start and glitches badly on
   iOS. Fade opacity only, no transform. */
.screen.reels.fade-in{animation:reelfade .22s ease both;}
@keyframes reelfade{from{opacity:0}to{opacity:1}}

/* Privacy Policy / Terms of Service — readable legal document */
.legal-doc{padding:6px 22px 34px;color:var(--ink-soft);font-size:14px;line-height:1.62;}
.legal-doc .ld-date{color:var(--muted);font-size:12.5px;margin:0 0 16px;}
.legal-doc h4{color:var(--ink);font-size:15px;font-weight:600;margin:20px 0 7px;}
.legal-doc p{margin:0 0 11px;}
.legal-doc ul{margin:0 0 12px;padding-left:20px;}
.legal-doc li{margin:0 0 5px;}
.legal-doc a{color:var(--olive);text-decoration:none;}
.kv[href]{cursor:pointer;text-decoration:none;}
.kv[href] b{color:var(--olive);}

/* video reels drive their own progress bar from real playback time (JS), so turn off the
   fixed 5.5s CSS animation — that was only meant for the seed photo-reels */
.reel.js-prog .reel-progress .fill{animation:none;}
.reel-mute svg{width:26px;height:26px;}

/* Stories: unread = electric gradient ring; read = dull gray (and sorted to the back) */
.avatar.live{background:linear-gradient(135deg,#3a8dff,#8b5cff);box-shadow:none;padding:2.5px;}
.avatar.live img{box-sizing:border-box;border:2px solid var(--paper);}
.avatar.live.seen{background:#cbc4b8;}
/* ---------- moderation queue (Settings → Moderation, admins only) ---------- */
.mod-tabs{display:flex;gap:6px;padding:6px 22px 12px;}
.mod-tabs button{flex:1;height:32px;border-radius:16px;border:1px solid var(--line);background:transparent;
  color:var(--muted);font-size:11px;letter-spacing:.6px;text-transform:uppercase;font-weight:600;}
.mod-tabs button.on{background:var(--olive);border-color:var(--olive);color:var(--cream);}
.mod-list{padding:0 16px;display:flex;flex-direction:column;gap:12px;}
.mod-card{background:var(--paper-2);border:1px solid var(--line);border-radius:14px;padding:12px 13px;}
.mod-card.busy{opacity:.55;pointer-events:none;}
.mod-head{display:flex;align-items:center;gap:8px;margin-bottom:9px;}
.mod-reason{font-size:13px;font-weight:600;color:var(--ink);flex:1;}
.mod-count{font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  background:#a23b35;color:var(--cream);border-radius:9px;padding:2px 7px;}
.mod-when{font-size:11px;color:var(--muted-2);}
.mod-post{display:flex;gap:10px;align-items:flex-start;}
.mod-thumb{width:56px;height:56px;border-radius:9px;object-fit:cover;flex:0 0 auto;background:var(--paper);}
.mod-thumb-none{display:flex;align-items:center;justify-content:center;color:var(--muted-2);font-size:15px;
  border:1px dashed var(--line);}
.mod-ptx{min-width:0;flex:1;}
.mod-cap{font-size:13px;line-height:1.45;color:var(--ink-soft);word-break:break-word;}
.mod-meta{font-size:11px;color:var(--muted);margin-top:4px;}
.mod-flag{color:#a23b35;font-weight:700;}
.mod-by{font-size:11px;color:var(--muted-2);margin:9px 0 0;}
.mod-acts{display:flex;gap:6px;margin-top:11px;flex-wrap:wrap;}
.mod-btn{flex:1 1 auto;min-height:34px;padding:0 10px;border-radius:17px;border:1px solid var(--line);
  background:var(--paper);color:var(--ink-soft);font-size:11px;letter-spacing:.5px;text-transform:uppercase;font-weight:600;}
.mod-btn:disabled{opacity:.4;}
.mod-btn.warn{color:#8a5a1e;}
.mod-btn.danger{color:#a23b35;}
/* a destructive action arms on first tap and fires on the second — same pattern as
   Delete account, because there is no undo surfaced for a ban */
.mod-btn.confirming{background:#a23b35;border-color:#a23b35;color:var(--cream);}
.mod-done{margin-top:10px;font-size:11px;color:var(--muted);letter-spacing:.4px;text-transform:uppercase;}

/* "Load more comments" — comments page in blocks of 50 rather than stopping dead at 200 */
.cs-more{display:block;width:calc(100% - 44px);margin:6px 22px 14px;padding:11px;border-radius:20px;
  border:1px solid var(--line);background:transparent;color:var(--muted);font-size:12px;
  letter-spacing:.5px;text-transform:uppercase;font-weight:600;}
.cs-more:disabled{opacity:.5;}

/* ---------- analytics dashboard (Settings → Rova team) ----------
   Reuses the Insights visual language (.st-hero / .st-grid / .st-aud). Those styles are
   written for `.studio`, which supplies its own 18px gutter; the settings pane is
   deliberately edge-to-edge so its rows can highlight full-width. This wrapper puts the
   gutter back for the charts only. */
.an-pane{padding:0 22px;}
.an-pane .st-sec:first-child{padding-top:10px;}
/* Insights labels are neighbourhood names — short. These are "Direct or a chat app" and
   "Settings · Privacy Policy", so the fixed 84px column has to grow or every row wraps. */
.an-pane .aud-n{flex:0 0 144px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.an-pane .aud-p{flex:0 0 42px;}
.an-pane .sf-sub b{color:var(--ink);font-weight:600;}

/* ---------- feature-ideas inbox (Settings → Rova team) ----------
   Cards, not rows: a suggestion is a title plus free text plus who sent it, and the details
   are the point — squeezing that into a .set-row would truncate the only part worth reading. */
.tidea-card{padding:14px 22px;border-bottom:1px solid var(--line-2);}
.tidea-top{display:flex;align-items:baseline;gap:10px;}
.tidea-title{flex:1 1 auto;font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.35;}
.tidea-votes{flex:0 0 auto;font-size:10.5px;letter-spacing:.4px;color:var(--muted);white-space:nowrap;}
/* Olive pill: a private note went to the founder and nobody else — it should not look like
   just another board post at a glance. */
.tidea-tag{flex:0 0 auto;font-size:9.5px;letter-spacing:1.2px;text-transform:uppercase;font-weight:600;
  color:var(--cream);background:var(--olive);border-radius:100px;padding:3px 9px;white-space:nowrap;}
.tidea-details{font-size:13px;color:var(--ink-soft);line-height:1.5;margin-top:7px;white-space:pre-wrap;}
.tidea-meta{font-size:11px;color:var(--muted);margin-top:8px;}

/* ---------- members list (Settings → Rova team) ----------
   `.tperson-*` not `.person-*`: the app already ships .idea-*, and the Feature-ideas screen
   had to be renamed after its classes silently overrode the public Ideas board. Prefix
   anything added for the team dashboard so it can never reach a user-facing screen. */
.tperson{padding:13px 22px;border-bottom:1px solid var(--line-2);}
.tperson-top{display:flex;align-items:center;gap:8px;}
.tperson-h{font-size:14px;font-weight:600;color:var(--ink);}
.tperson-when{margin-left:auto;font-size:10.5px;letter-spacing:.4px;color:var(--muted);white-space:nowrap;}
.tperson-tag{font-size:9px;letter-spacing:1.1px;text-transform:uppercase;font-weight:700;
  border-radius:100px;padding:2px 8px;white-space:nowrap;}
.tperson-tag.admin{color:var(--cream);background:var(--olive);}
.tperson-tag.banned{color:#fff;background:#8c3b32;}
.tperson-n{font-size:13px;color:var(--ink-soft);margin-top:3px;}
.tperson-meta{font-size:11.5px;color:var(--muted);margin-top:4px;}
.tperson-mail{display:inline-block;font-size:11.5px;color:var(--olive);margin-top:5px;text-decoration:none;word-break:break-all;}

/* ---------- push / pop navigation ----------
   Opening a post was a 0.16s opacity fade — an abrupt swap, and most of why the app read as a
   web page rather than an app. Screens now MOVE: forward, the new one slides in from the right
   while the old eases back and dims; back reverses it exactly, which is what makes "back" read
   as back rather than as another forward step.

   The outgoing screen is moved (not cloned) out of the DOM before render() wipes it, then
   re-attached here as .nav-leaving for the length of the animation — see render() in app.js.
   #body is already position:relative + overflow:hidden, so this layer clips cleanly.

   translate + opacity only: both are composited on the GPU, so this stays off the main thread
   and holds 60fps on a phone. Animating width/height/top here would defeat the whole point. */
.nav-leaving{position:absolute;inset:0;z-index:2;pointer-events:none;
  will-change:transform,opacity;overflow:hidden;}
.screen.nav-leaving-fwd{animation:navOutFwd .28s cubic-bezier(.32,.72,0,1) both;}
.screen.nav-leaving-back{animation:navOutBack .28s cubic-bezier(.32,.72,0,1) both;}
@keyframes navOutFwd  {from{transform:translateX(0);opacity:1} to{transform:translateX(-24%);opacity:.35}}
@keyframes navOutBack {from{transform:translateX(0);opacity:1} to{transform:translateX(100%);opacity:1}}

/* More specific than .fade-in (0,2,0 vs 0,1,0), so these win without touching that rule —
   a screen carries `class="screen fade-in"` everywhere and it was not worth editing 47 of them. */
.screen.nav-entering-fwd {animation:navInFwd  .28s cubic-bezier(.32,.72,0,1) both;}
.screen.nav-entering-back{animation:navInBack .28s cubic-bezier(.32,.72,0,1) both;}
@keyframes navInFwd  {from{transform:translateX(100%)}            to{transform:translateX(0)}}
@keyframes navInBack {from{transform:translateX(-24%);opacity:.35} to{transform:translateX(0);opacity:1}}

/* Motion sensitivity is a real accessibility need, and iOS exposes it system-wide. app.js also
   checks this and skips the whole mechanism; this is the belt to that braces. */
@media (prefers-reduced-motion: reduce){
  .screen.nav-leaving-fwd,
  .screen.nav-leaving-back,
  .screen.nav-entering-fwd,
  .screen.nav-entering-back{animation:none;}
  .nav-leaving{display:none;}
}