/* ---- fonts: served from /fonts, nothing loads from Google ----------------
   Assistant (OFL) for everything; Carmela (Nir Yeni) for headings — Hebrew
   only, one weight: Latin inside a heading falls through to Assistant, and
   font-synthesis:none keeps the browser from faking a bold it does not have. */
@font-face { font-family:'Assistant'; font-style:normal; font-weight:300; font-display:swap; src:url('/fonts/assistant-300.woff2') format('woff2'); }
@font-face { font-family:'Assistant'; font-style:normal; font-weight:400; font-display:swap; src:url('/fonts/assistant-400.woff2') format('woff2'); }
@font-face { font-family:'Assistant'; font-style:normal; font-weight:600; font-display:swap; src:url('/fonts/assistant-600.woff2') format('woff2'); }
@font-face { font-family:'Assistant'; font-style:normal; font-weight:700; font-display:swap; src:url('/fonts/assistant-700.woff2') format('woff2'); }
@font-face { font-family:'Carmela'; font-style:normal; font-weight:400; font-display:swap; src:url('/fonts/carmela.woff2') format('woff2'); }

/* WoHo — semantic design tokens.
   Light = design direction B ("אור ראשון"), dark = direction A ("אחרי חצות").
   Every rule below uses a semantic variable, never a raw hex, so swapping the
   theme is a token change and nothing else. */

:root {
  --plum:#760B4D; --deep:#052C36; --teal:#0B7675; --blue:#108EAD;
  --cyan:#1ACBF6; --cyanL:#43E0F7; --turq:#15DDCF;
  --pink:#F579C2; --magenta:#F74398; --paper:#F5F8F9; --ink:#020202;

  --surface:#F5F8F9;
  --surface-raised:#FFFFFF;
  --surface-sunken:#E9F1F3;
  --on-surface:#052C36;
  --on-surface-dim:#5E7078;
  --accent:#760B4D;
  --on-accent:#FFFFFF;
  --interactive:#0B7675;
  --presence:#15DDCF;
  --alert:#F74398;
  --hairline:#DCE6E9;
  --tile-bg:#E4F0F3;
  --shadow:0 6px 18px -12px rgba(5,44,54,.55);

  --display:'Carmela','Assistant',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --ui:'Assistant',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --radius:22px;
  /* The recorded eye strip is 640x240. Every surface that shows one uses this
     ratio, so both eyes are always fully visible instead of centre-cropped. */
  --band:2.6667;
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-t:env(safe-area-inset-top,0px);
}

[data-theme="dark"] {
  --surface:#020508;
  --surface-raised:#08222B;
  --surface-sunken:#010F14;
  --on-surface:#F5F8F9;
  --on-surface-dim:rgba(245,248,249,.60);
  --accent:#F579C2;
  --on-accent:#22071A;
  --interactive:#43E0F7;
  --presence:#15DDCF;
  --alert:#F74398;
  --hairline:rgba(26,203,246,.16);
  --tile-bg:#08313D;
  --shadow:0 0 40px -22px rgba(26,203,246,.7);
}

* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { margin:0; padding:0; height:100%; overscroll-behavior-y:none; }
body {
  background:var(--surface); color:var(--on-surface);
  font-family:var(--ui); font-weight:400; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
button,input,textarea,select { font:inherit; color:inherit; }
button { background:none; border:0; cursor:pointer; padding:0; }
a { color:var(--interactive); }
img,video { display:block; max-width:100%; }

#app { min-height:100%; display:flex; flex-direction:column; }

/* ---------------------------------------------------------------- chrome */
.topbar {
  position:sticky; top:0; z-index:20; flex:none;
  padding:calc(var(--safe-t) + 10px) 16px 10px;
  display:flex; align-items:center; gap:10px;
  background:var(--surface); border-bottom:1px solid var(--hairline);
}
/* The wordmark is a mask filled with the accent colour, so it is plum in the
   light theme and pink after dark, exactly as the old text brand was.
   wordmark.svg is a vector trace of the logo (viewBox 2480x1892), so it stays
   sharp at any size and DPI; width = height * 1.311. */
.brand {
  display:block; background:var(--accent); flex:none;
  -webkit-mask:url(/icons/wordmark.svg) center/contain no-repeat;
  mask:url(/icons/wordmark.svg) center/contain no-repeat;
}
.topbar .brand { height:40px; width:53px; }
.brand.big { height:120px; width:158px; margin:0 auto; }
@media (min-width:700px) {
  .topbar .brand { height:52px; width:68px; }
  .brand.big { height:150px; width:197px; }
}
.topbar .spacer { margin-inline-start:auto; }
.topbar h1 { font-family:var(--display); font-weight:500; font-size:19px; margin:0; }

.iconbtn {
  width:36px; height:36px; border-radius:50%; border:1px solid var(--hairline);
  display:grid; place-items:center; font-size:15px; color:var(--interactive);
  background:var(--surface-raised); flex:none;
}
.iconbtn:active { transform:scale(.94); }

.tabbar {
  position:sticky; bottom:0; z-index:20; flex:none;
  height:calc(58px + var(--safe-b)); padding-bottom:var(--safe-b);
  display:flex; align-items:center; justify-content:space-around;
  background:var(--surface-raised); border-top:1px solid var(--hairline);
}
.tabbar a { text-decoration:none; color:var(--on-surface-dim); font-size:10px; text-align:center; position:relative; }
.tabbar a.on { color:var(--accent); font-weight:600; }
.tabbar b { display:block; font-size:18px; font-weight:400; line-height:1.2; }
.tabbar a[href="#/looks"] b { font-family:var(--display); font-weight:700; font-size:16px; letter-spacing:.02em; }
.dot-badge {
  position:absolute; top:-2px; inset-inline-end:-8px; min-width:16px; height:16px;
  padding:0 4px; border-radius:9px; background:var(--alert); color:#fff;
  font-size:9px; font-weight:700; display:grid; place-items:center;
}

main { flex:1; padding-bottom:6px; }
.pad { padding:16px; }

/* ------------------------------------------------------------------ type */
h2 { font-family:var(--display); font-weight:500; font-size:24px; margin:0 0 6px; color:var(--accent); }
/* Carmela has one weight; nothing set in --display may be synthesized into a fake bold. */
h2, .topbar h1, .pname, .empty b, .evbody b, .evdone b, .gamepanel .gp-q, .eyeclock, .avmine h3, .pricecard b, .planactions h3, .payhist h3, .tabbar a[href="#/looks"] b, .iconbtn.game36 { font-synthesis:none; }
.lede { color:var(--on-surface-dim); font-size:14.5px; margin:0 0 18px; }
.muted { color:var(--on-surface-dim); font-size:12.5px; }

/* ----------------------------------------------------------------- forms */
label { display:block; font-size:12.5px; color:var(--on-surface-dim); margin:14px 0 5px; }
input[type=text],input[type=email],input[type=password],input[type=number],textarea,select {
  width:100%; padding:12px 14px; border-radius:14px;
  border:1px solid var(--hairline); background:var(--surface-raised);
  outline:none; font-size:16px;   /* 16px stops iOS zoom on focus */
}
input:focus-visible,textarea:focus-visible,select:focus-visible,button:focus-visible,a:focus-visible {
  outline:2px solid var(--interactive); outline-offset:2px;
}
textarea { min-height:88px; resize:vertical; }

.btn {
  display:block; width:100%; text-align:center; padding:14px;
  border-radius:100px; font-size:15px; font-weight:600; margin-top:16px;
}
.btn.pri { background:var(--accent); color:var(--on-accent); }
.btn.sec { border:1px solid var(--hairline); color:var(--interactive); background:var(--surface-raised); }
.btn.ghost { color:var(--on-surface-dim); font-weight:400; font-size:13.5px; }
.btn[disabled] { opacity:.5; pointer-events:none; }
.btnrow { display:flex; gap:9px; }
.btnrow .btn { margin-top:0; }

.chips { display:flex; flex-wrap:wrap; gap:7px; }
.chip {
  font-size:12.5px; padding:7px 14px; border-radius:100px;
  border:1px solid var(--hairline); color:var(--interactive); background:var(--surface-raised);
}
.chip.on { background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
.chip.sm { font-size:11px; padding:4px 11px; }

.seg { display:flex; border-bottom:1px solid var(--hairline); margin:0 16px 12px; font-size:13.5px; }
.seg button { flex:1; padding:0 0 10px; color:var(--on-surface-dim); }
.seg button.on { color:var(--accent); font-weight:600; box-shadow:inset 0 -2px 0 var(--accent); }

.err { color:var(--alert); font-size:13px; margin-top:10px; min-height:18px; }

/* ------------------------------------------------------------------ wall */
/* Two across on a phone, three on a landscape tablet, four on a desktop. */
.wall { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; padding:0 14px; align-items:start; }
@media (min-width:700px)  { .wall { grid-template-columns:repeat(3,1fr); gap:12px; } }
@media (min-width:1024px) { .wall { grid-template-columns:repeat(4,1fr); gap:14px; } }
.tile {
  position:relative; border-radius:var(--radius); overflow:hidden;
  background:var(--tile-bg); box-shadow:var(--shadow); border:0;
}
.tile video,.tile img { width:100%; height:100%; object-fit:cover; }
.tile .presence {
  position:absolute; inset-inline-end:9px; top:9px; width:8px; height:8px;
  border-radius:50%; background:var(--presence); border:1.5px solid var(--surface-raised);
}
.tile .meta {
  position:absolute; inset-inline:0; bottom:0; padding:16px 10px 8px; text-align:start;
  font-size:11px; color:#fff;
  background:linear-gradient(transparent,rgba(0,0,0,.6));
}
/* A band tile is short, so the name plate has to be shallow or it sits across
   the lower lids. */
.tile.band .meta {
  padding:9px 9px 5px; font-size:10.5px; letter-spacing:.01em;
  background:linear-gradient(transparent,rgba(0,0,0,.62));
}
.h1{aspect-ratio:1/1.15}.h2{aspect-ratio:1/.66}
/* A legacy eye clip sits letterboxed inside the same portrait tile as a photo,
   so the grid stays even and both eyes stay in frame. */
.tile.band{aspect-ratio:1/1.15; display:grid; place-items:center; background:linear-gradient(160deg,var(--deep),#12060f);}
.tile.band video,.tile.band img{width:100%; height:auto; aspect-ratio:var(--band); object-fit:cover; border-radius:10px;}

/* ---------------------------------------------------------------- swipe */
.stack { position:relative; height:min(56vh,460px); display:grid; place-items:center; margin:0 16px; }
.swcard {
  position:absolute; width:min(88vw,360px);
  border-radius:26px; overflow:hidden; background:var(--surface-raised);
  border:1px solid var(--hairline); box-shadow:var(--shadow);
  display:flex; flex-direction:column; text-decoration:none;
}
.swcard video,.swcard img {
  width:100%; aspect-ratio:var(--band); height:auto; object-fit:cover;
  display:block; background:var(--tile-bg);
}
/* On a band this short an overlay would sit straight across the eyes, so the
   caption gets its own row under the strip. */
.swcard .info { padding:13px 16px 15px; color:var(--on-surface-dim); font-size:13px; }
.swcard .info b {
  font-family:var(--display); font-weight:500; font-size:19px; display:block;
  color:var(--accent); margin-bottom:2px;
}
/* Swipe gesture: the card follows the finger; the tag fades in as the drag
   nears the threshold. Left = send a look, right = skip. */
.swcard { touch-action:pan-y; user-select:none; -webkit-user-select:none; -webkit-user-drag:none; -webkit-touch-callout:none; will-change:transform; }
.swcard video,.swcard img { pointer-events:none; }
.swtag {
  position:absolute; top:14px; padding:6px 14px; border-radius:999px;
  font-family:var(--display); font-size:15px; font-weight:500; letter-spacing:.02em;
  opacity:0; transform:scale(.9); transition:opacity .12s, transform .12s; pointer-events:none;
}
.swtag.look { right:14px; background:var(--accent); color:var(--on-accent); }
.swtag.skip { left:14px; background:var(--surface-raised); color:var(--on-surface-dim); border:1px solid var(--hairline); }
.swcard.tilt-look .swtag.look, .swcard.tilt-skip .swtag.skip { opacity:var(--swk,0); transform:scale(1); }
/* A photo card must still fit the fixed-height deck above the buttons. With
   no caption row the picture takes the whole card. */
.swcard.face img { aspect-ratio:auto; height:min(58vh,520px); }
.stack { height:min(60vh,540px); }
.swactions { display:flex; justify-content:center; gap:20px; margin-top:16px; }
.swbtn { width:54px; height:54px; border-radius:50%; display:grid; place-items:center;
  font-size:19px; border:1px solid var(--hairline); background:var(--surface-raised); }
.swbtn.yes { background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
.swbtn svg { display:block; }

/* --------------------------------------------------------------- profile */
.hero { margin:0 16px; border-radius:26px; overflow:hidden; background:var(--tile-bg); aspect-ratio:var(--band); }
.hero.ph { aspect-ratio:4/5; max-height:min(62vh,520px); }
.hero video,.hero img { width:100%; height:100%; object-fit:cover; }
.pname { font-family:var(--display); font-weight:500; font-size:26px; margin:14px 0 0; color:var(--accent); }
.locked {
  margin-top:16px; border-radius:var(--radius); padding:24px 16px; text-align:center;
  background:var(--surface-raised); border:1px solid var(--hairline);
}
.locked .blurface {
  width:74px; height:74px; border-radius:50%; margin:0 auto 12px; object-fit:cover;
  background:linear-gradient(135deg,var(--pink),var(--cyanL)); filter:blur(9px);
}

/* ------------------------------------------------------------------ chat */
.chatwrap { display:flex; flex-direction:column; height:100dvh; }
.msgs { flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:9px; }
.msg { max-width:78%; padding:10px 14px; font-size:14px; line-height:1.5; border-radius:19px; word-break:break-word; }
.msg.them { align-self:flex-start; background:var(--surface-raised); border:1px solid var(--hairline); border-end-start-radius:6px; }
.msg.me { align-self:flex-end; background:var(--accent); color:var(--on-accent); border-end-end-radius:6px; }
.msg .stamp { display:block; font-size:10.5px; line-height:1; margin-top:5px; opacity:.6; text-align:end; direction:ltr; }
.msg.media .stamp { margin:5px 6px 2px; }
.msg.media { padding:5px; }
.msg.media img,.msg.media video { border-radius:14px; max-width:200px; }
.msg.media .blurred { filter:blur(14px); }
/* ---- stickers */
.msg.sticker { background:none; border:0; padding:0; max-width:none; }
.msg.sticker img { width:150px; height:150px; object-fit:contain; display:block; border-radius:18px; }   /* opaque artwork gets soft corners; transparent ones don't care */
.msg.sticker .stamp { margin:2px 6px 0; color:var(--on-surface-dim); opacity:1; }
.stickerpanel {
  flex:none; max-height:42vh; overflow-y:auto; overscroll-behavior:contain;
  background:var(--surface-raised); border-top:1px solid var(--hairline);
}
.stgrid { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; padding:10px 12px; align-items:start; }
@media (min-width:520px) { .stgrid { grid-template-columns:repeat(6,1fr); } }
.stgrid .st { aspect-ratio:1; border-radius:14px; padding:6px; background:var(--surface-sunken); }
.stgrid .st:active { transform:scale(.94); }
.stgrid .st img { width:100%; height:100%; object-fit:contain; display:block; border-radius:9px; }
.stgrid .sthead { grid-column:1 / -1; font-size:12px; color:var(--on-surface-dim); margin:6px 2px 0; }
.stmedia {
  grid-column:1 / -1; display:flex; align-items:center; gap:8px; padding:9px 12px; border-radius:100px;
  border:1px solid var(--hairline); color:var(--interactive); font-size:13.5px; font-weight:600; width:max-content;
}
.stmedia b { font-weight:400; }

.composer {
  flex:none; display:flex; align-items:center; gap:9px;
  padding:10px 12px calc(10px + var(--safe-b));
  border-top:1px solid var(--hairline); background:var(--surface-raised);
}
.composer input { flex:1; border-radius:100px; }
.sendbtn { width:40px; height:40px; border-radius:50%; background:var(--accent); color:var(--on-accent); display:grid; place-items:center; flex:none; }
.notice { text-align:center; font-size:11px; color:var(--on-surface-dim); padding:4px 0 8px; }

/* ------------------------------------------------------------------ list */
.row {
  display:flex; align-items:center; gap:12px; padding:12px 16px;
  border-bottom:1px solid var(--hairline); text-decoration:none; color:inherit;
}
.avatar {
  width:76px; aspect-ratio:var(--band); height:auto; border-radius:10px;
  overflow:hidden; background:var(--tile-bg); flex:none;
}
.avatar video,.avatar img { width:100%; height:100%; object-fit:cover; }
.avatar.ph { aspect-ratio:1; border-radius:14px; }
a.avatar { display:block; text-decoration:none; }
.row .nm { font-weight:600; font-size:15px; }
.row .pv { font-size:12.5px; color:var(--on-surface-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ----------------------------------------------------------- photo step */
.photoframe {
  position:relative; width:min(64vw,240px); aspect-ratio:4/5; margin:10px auto 0; cursor:pointer;
  border-radius:26px; overflow:hidden; background:var(--tile-bg); border:1.5px dashed var(--hairline);
  display:grid; place-items:center;
}
.photoframe img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.photoframe .ph { font-size:64px; color:var(--on-surface-dim); opacity:.5; }
.photoframe em {
  position:absolute; bottom:12px; inset-inline:0; margin:0 auto; width:max-content; font-style:normal;
  font-size:13px; padding:6px 12px; border-radius:100px; background:var(--surface-raised);
  border:1px solid var(--hairline); color:var(--interactive);
}

/* ---------------------------------------------------------------- toast */
#toast {
  position:fixed; inset-inline:0; bottom:calc(76px + var(--safe-b)); z-index:60;
  display:flex; justify-content:center; pointer-events:none;
}
#toast span {
  background:var(--on-surface); color:var(--surface); padding:10px 18px;
  border-radius:100px; font-size:13.5px; opacity:0; transition:opacity .2s;
  max-width:80vw; text-align:center;
}
#toast span.show { opacity:.95; }
#toast span.act { pointer-events:auto; cursor:pointer; background:var(--accent); color:var(--on-accent); }

.empty { text-align:center; padding:60px 26px; color:var(--on-surface-dim); }
.empty b { display:block; font-family:var(--display); font-size:19px; color:var(--on-surface); margin-bottom:8px; }

.stepdots { display:flex; gap:6px; justify-content:center; margin:6px 0 20px; }
.stepdots i { width:7px; height:7px; border-radius:50%; background:var(--hairline); }
.stepdots i.on { background:var(--accent); }

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.001ms !important; transition-duration:.001ms !important; }
}
/* The column widens with the screen so that three, then four eye strips stay
   big enough to actually meet. Without this a tablet would show three tiles
   SMALLER than a phone shows two, which is the wrong way round. Everything
   meant to be read or typed into stays narrow regardless. */
@media (min-width:760px) {
  #app { max-width:780px; margin:0 auto; box-shadow:0 0 0 1px var(--hairline); }
  /* width:100% matters — #app is a flex column, and an auto inline margin on a
     flex item makes it shrink to its content instead of stretching to the cap. */
  .pad, .chatwrap, .stack, .hero, .seg { width:100%; max-width:600px; margin-inline:auto; }
}
@media (min-width:1024px) {
  #app { max-width:1060px; }
}

/* Live preview of exactly what will be saved: the cropped eye band. Shown so
   she can see the promise being kept, not just read it. */
/* Password field: one input plus a reveal button, since there is no second
   "confirm" box to type into. */
.field { position:relative; }
.field input { padding-inline-end:74px; }
.reveal {
  position:absolute; inset-inline-end:6px; top:50%; transform:translateY(-50%);
  padding:7px 11px; border-radius:10px; font-size:13px;
  color:var(--interactive); background:var(--surface-sunken); border:0;
}
.hint { font-size:12.5px; margin-top:6px; min-height:17px; color:var(--on-surface-dim); }
.hint.bad  { color:var(--alert); }
.hint.good { color:var(--interactive); }

.spamnote {
  margin:14px 0 0; padding:12px 14px; border-radius:14px; font-size:13.5px; line-height:1.6;
  background:var(--surface-sunken); border:1px solid var(--hairline); color:var(--on-surface);
}
.spamnote span { color:var(--on-surface-dim); }

.btn.pri:disabled { opacity:.45; }
.laterrow { display:flex; gap:10px; align-items:flex-start; margin:22px 0 0; font-size:14px; color:var(--on-surface); }
.laterrow[hidden], .btn[hidden] { display:none; }
.laterrow input { margin-top:4px; }
.laterrow .muted { margin-top:2px; }

.verifybar {
  display:block; width:100%; margin:0 0 14px; padding:11px 14px;
  border-radius:14px; font-size:13px; line-height:1.5; text-align:start;
  background:var(--surface-sunken); border:1px solid var(--hairline); color:var(--alert);
}

/* ================================================================ Tune In */
/* The events billboard. One column on a phone, up to four on a desktop; the
   cards are posters, so the image leads and the text sits under it. */
.pill {
  display:inline-block; padding:8px 14px; border-radius:100px; font-size:13px; font-weight:600;
  background:var(--accent); color:var(--on-accent); text-decoration:none; white-space:nowrap;
}
.evlede { margin:12px 16px 14px; }
.evgrid { display:grid; grid-template-columns:1fr; gap:14px; padding:0 16px 20px; align-items:start; }
@media (min-width:520px)  { .evgrid { grid-template-columns:repeat(2,1fr); } }
@media (min-width:760px)  { .evgrid { grid-template-columns:repeat(3,1fr); gap:16px; padding:0 20px 24px; } }
@media (min-width:1024px) { .evgrid { grid-template-columns:repeat(4,1fr); } }
.evcard {
  display:block; text-decoration:none; color:inherit; border-radius:var(--radius); overflow:hidden;
  background:var(--surface-raised); border:1px solid var(--hairline); box-shadow:var(--shadow);
  transition:transform .15s ease;
}
.evcard:active { transform:scale(.985); }
@media (hover:hover) { .evcard:hover { transform:translateY(-2px); } }
/* A highlighted (later: paid) placement takes two columns wherever there are two. */
@media (min-width:520px) { .evcard.featured { grid-column:span 2; } }
.evimg { position:relative; aspect-ratio:4/3; background:var(--tile-bg); overflow:hidden; }
.evcard.featured .evimg { aspect-ratio:16/9; }
.evimg img,.evhero img { width:100%; height:100%; object-fit:cover; display:block; }
.noimg { width:100%; height:100%; background:linear-gradient(135deg,var(--tile-bg),var(--surface-sunken)); }
.evdate {
  position:absolute; top:10px; inset-inline-start:10px; padding:5px 11px; border-radius:100px;
  font-size:12px; font-weight:600; background:var(--surface-raised); color:var(--accent);
  box-shadow:0 2px 8px rgba(0,0,0,.18);
}
.evtag {
  position:absolute; top:10px; inset-inline-end:10px; padding:4px 10px; border-radius:100px;
  font-size:11px; font-weight:600; background:var(--accent); color:var(--on-accent);
}
.evbody { padding:12px 14px 13px; display:flex; flex-direction:column; gap:3px; }
.evbody b { font-family:var(--display); font-weight:500; font-size:18px; line-height:1.3; color:var(--on-surface); }
.evmeta { font-size:12.5px; color:var(--on-surface-dim); }
.evfoot { display:flex; align-items:center; gap:10px; margin-top:6px; font-size:12px; color:var(--on-surface-dim); flex-wrap:wrap; }
.evcat { padding:2px 9px; border-radius:100px; font-size:11px; background:var(--surface-sunken); color:var(--on-surface-dim); }
.evcat.free { color:var(--interactive); }
.evcat.big { display:inline-block; font-size:12px; padding:4px 11px; margin-bottom:6px; }

/* ---- popup: a sheet from the bottom on a phone, a centred card on a desktop */
.modal-bg {
  position:fixed; inset:0; z-index:80; background:rgba(2,12,16,.55); backdrop-filter:blur(3px);
  display:flex; align-items:flex-end; justify-content:center; opacity:0; transition:opacity .18s;
}
.modal-bg.show { opacity:1; }
.modal {
  position:relative; width:100%; max-height:92dvh; overflow-y:auto; overscroll-behavior:contain;
  background:var(--surface); color:var(--on-surface); border-radius:26px 26px 0 0;
  transform:translateY(24px); transition:transform .2s ease; box-shadow:0 -10px 40px rgba(0,0,0,.25);
}
.modal-bg.show .modal { transform:none; }
@media (min-width:700px) {
  .modal-bg { align-items:center; padding:24px; }
  .modal { width:min(600px,100%); max-height:88vh; border-radius:26px; transform:scale(.97); }
}
.modal-x {
  position:sticky; top:10px; inset-inline-start:10px; z-index:2; width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center; background:var(--surface-raised); color:var(--on-surface);
  border:1px solid var(--hairline); margin:10px 10px -46px; box-shadow:0 2px 8px rgba(0,0,0,.18);
}
body.modal-open { overflow:hidden; }
/* ---- in-app camera (desktop) */
.camsheet { padding:0 0 18px; }
.camview { aspect-ratio:4/3; background:#000; overflow:hidden; border-radius:26px 26px 0 0; }
.camview video { width:100%; height:100%; object-fit:cover; transform:scaleX(-1); }
.camrow { display:flex; justify-content:center; margin-top:14px; }
.camshutter {
  width:64px; height:64px; border-radius:50%; background:var(--accent);
  border:4px solid var(--surface); box-shadow:0 0 0 2px var(--accent);
}
.camshutter:active { transform:scale(.94); }
.evhero { aspect-ratio:16/10; background:var(--tile-bg); position:relative; overflow:hidden; }
.modal .evhero { border-radius:26px 26px 0 0; }
.evtext { padding:16px 18px calc(22px + var(--safe-b)); }
.evtext h2 { font-size:26px; line-height:1.2; margin:0 0 8px; }
.evwhen { font-size:16px; font-weight:600; margin:0 0 2px; color:var(--interactive); }
.evwhere,.evprice { margin:0 0 4px; font-size:14px; color:var(--on-surface-dim); }
.evdesc { white-space:pre-wrap; font-size:14.5px; line-height:1.65; margin:14px 0 10px; }
.evtext .btn.sec { margin-top:10px; text-decoration:none; }
.reacts { display:flex; gap:9px; margin-top:16px; }
.react {
  flex:1; display:flex; align-items:center; justify-content:center; gap:7px; padding:12px 10px;
  border-radius:100px; border:1px solid var(--hairline); background:var(--surface-raised);
  font-size:14px; font-weight:600; color:var(--interactive); transition:background .15s,color .15s;
}
.react b { font-weight:400; font-size:16px; }
.react span { font-size:12px; opacity:.8; padding:1px 7px; border-radius:100px; background:var(--surface-sunken); }
.react.on { background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
.react.on span { background:rgba(255,255,255,.22); }
.evpanel { margin-top:12px; }
.evpanel h3, .evinvite h3, .invhead {
  font-family:var(--display); font-weight:500; font-size:16px; color:var(--accent); margin:14px 0 4px;
}
.evpeople { display:grid; gap:4px; }
.row.slim { padding:8px 0; }
.evlist { max-height:44vh; overflow-y:auto; margin-top:6px; }
.evlist .row.slim .chip { flex:none; }
.evcompose { margin-top:12px; padding:14px; border-radius:var(--radius); background:var(--surface-raised); border:1px solid var(--hairline); }
.radio { display:flex; gap:10px; align-items:flex-start; margin:10px 0; font-size:14px; color:var(--on-surface); }
.radio input { margin-top:4px; }
.link { color:var(--interactive); text-decoration:none; font-size:13px; }
.msg.me .link { color:var(--on-accent); text-decoration:underline; }
.msg.them .link { text-decoration:underline; }
.btn.small { padding:10px; font-size:13.5px; margin-top:0; }

/* ---- invitations waiting, at the top of מבטים */
.invrow { display:flex; gap:12px; padding:12px 16px; border-bottom:1px solid var(--hairline); background:var(--surface-raised); }
.invrow .avatar { align-self:flex-start; }
.invrow .quote { white-space:normal; font-style:italic; margin-top:2px; }
.invhead { margin:14px 16px 4px; }

/* ---- submit form */
.evupload {
  position:relative; aspect-ratio:16/10; border-radius:var(--radius); overflow:hidden; cursor:pointer;
  border:1.5px dashed var(--hairline); background:var(--surface-raised); display:grid; place-items:center;
  color:var(--on-surface-dim); margin-bottom:6px;
}
.evupload img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.evupload span { font-size:40px; line-height:1; color:var(--interactive); }
.evupload em {
  position:relative; z-index:1; font-style:normal; font-size:13px; padding:6px 12px; border-radius:100px;
  background:var(--surface-raised); border:1px solid var(--hairline);
}
.evdone { text-align:center; padding:40px 10px; }
.evdone b { display:block; font-family:var(--display); font-weight:500; font-size:24px; color:var(--accent); margin-bottom:8px; }
.evdone p { color:var(--on-surface-dim); font-size:14.5px; }
.evdone .btn { text-decoration:none; }
.avatar.sq { aspect-ratio:4/3; width:88px; border-radius:12px; }
.avatar.sq img { width:100%; height:100%; object-fit:cover; }
.status { display:inline-block; margin-top:4px; padding:2px 9px; border-radius:100px; font-size:11px; font-weight:600; background:var(--surface-sunken); color:var(--on-surface-dim); }
.status.ok { background:var(--accent); color:var(--on-accent); }
.status.no { color:var(--alert); }

/* ---- admin queue */
.admcard { margin:14px 16px; padding:0 0 16px; border-radius:var(--radius); overflow:hidden; background:var(--surface-raised); border:1px solid var(--hairline); max-width:600px; }
@media (min-width:760px) { .admcard { margin-inline:auto; } }
.admcard .evhero { aspect-ratio:16/9; max-height:340px; }
.admcard h2 { font-size:20px; margin:12px 16px 4px; }
.admcard .evdesc, .admcard .btnrow, .admcard .muted { margin-inline:16px; }
.admtable { margin:0 16px; font-size:13px; border-collapse:collapse; }
.admtable td { padding:2px 0; vertical-align:top; }
.admtable td:first-child { color:var(--on-surface-dim); padding-inline-end:12px; white-space:nowrap; }

/* ------------------------------------------------------- 36 שאלות (the game) */
/* ⓘ with a tooltip: hover on a mouse, tap on a finger (.open). */
.info { position:relative; display:inline-grid; place-items:center; width:26px; height:26px; border-radius:50%;
  color:var(--interactive); font-size:17px; line-height:1; flex:none; vertical-align:middle; }
.info .tip {
  display:none; position:fixed; width:320px; max-width:calc(100vw - 16px);
  padding:12px 14px; border-radius:16px; background:var(--on-surface); color:var(--surface);
  font-size:13px; line-height:1.55; text-align:start; font-weight:400; z-index:90; box-shadow:0 10px 30px rgba(0,0,0,.25);
  cursor:default;
}
.info .tip::after { content:''; position:absolute; top:100%; left:calc(var(--arrow,50%) - 7px); border:7px solid transparent; border-top-color:var(--on-surface); }
.info .tip.below::after { top:auto; bottom:100%; border-top-color:transparent; border-bottom-color:var(--on-surface); }
.info.open .tip { display:block; }
.gamerow { align-items:center; }
.gamerow .btn { flex:1; }

.iconbtn.game36 { font-family:var(--display); font-weight:700; font-size:13px; letter-spacing:.02em; }

.gamepanel {
  flex:none; margin:0 12px 6px; padding:12px 14px; border-radius:18px;
  background:var(--surface-raised); border:1px solid var(--hairline); box-shadow:var(--shadow);
}
.gamepanel .gp-top { display:flex; align-items:center; gap:8px; }
.gamepanel .gp-lvl { font-size:12px; color:var(--on-surface-dim); font-weight:600; }
.gamepanel .gp-q { margin:8px 0 6px; font-family:var(--display); font-size:17px; line-height:1.45; color:var(--on-surface); }
.gamepanel .gp-state { font-size:12.5px; color:var(--on-surface-dim); }
.gamepanel .gp-state.turn { color:var(--accent); font-weight:600; }
.gamepanel .gp-head { font-size:14px; }
.gamepanel .gp-head b { display:inline-block; margin-inline-end:4px; }
.gamepanel .gp-eye { display:flex; align-items:center; gap:8px; margin-top:8px; }
.gamepanel .gp-eye .btn { flex:none; width:auto; padding-inline:16px; }
.gamepanel .btnrow { margin-top:8px; }
.linkbtn { color:var(--interactive); font-size:12.5px; margin-inline-start:6px; }

.qcard {
  align-self:center; max-width:88%; margin:14px auto 6px; padding:8px 14px; border-radius:14px;
  background:var(--surface-sunken); color:var(--on-surface); font-size:13px; line-height:1.45; text-align:center;
}
.qcard b { display:block; font-size:11px; color:var(--on-surface-dim); letter-spacing:.03em; margin-bottom:2px; }

/* ---- the four-minute look: eyes-only strips, one big, one small */
.eyesheet { padding:0 0 18px; }
.eyeremote { position:relative; aspect-ratio:8/3; background:#000; border-radius:26px 26px 0 0; overflow:hidden; }
.eyeremote video { width:100%; height:100%; object-fit:cover; }
.eyewait { position:absolute; inset:0; display:grid; place-items:center; color:#fff; font-size:15px; opacity:.8; }
.eyerow { display:flex; align-items:center; gap:14px; padding:12px 16px 0; }
.eyeself { width:160px; height:60px; border-radius:12px; background:#000; transform:scaleX(-1); flex:none; }
.eyeclock { font-family:var(--display); font-size:34px; color:var(--accent); font-variant-numeric:tabular-nums; margin-inline-start:auto; }
.eyenote { text-align:center; margin:10px 16px 0; }
.eyeend { padding:40px 22px 30px; text-align:center; }
.eyeend h2 { margin-bottom:6px; }

/* ------------------------------------------------------- wall filter strip */
.fstrip {
  display:flex; gap:7px; padding:0 16px 10px; overflow-x:auto; scrollbar-width:none; flex:none;
  -webkit-overflow-scrolling:touch;
}
.fstrip::-webkit-scrollbar { display:none; }
.fpill {
  flex:none; font-size:12.5px; padding:6px 13px; border-radius:100px; white-space:nowrap;
  border:1px solid var(--hairline); color:var(--on-surface); background:var(--surface-raised);
}
.fpill.on { background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
.fpill.reset { color:var(--on-surface-dim); background:transparent; }
.fsheet .btn { margin-top:22px; }
@media (min-width:700px) { .fstrip { justify-content:center; flex-wrap:wrap; } }

/* ---- info popup (the invitation explanation) */
.infosheet .infop { font-size:15px; line-height:1.6; margin:0 0 12px; color:var(--on-surface); }
.infosheet .infop:first-of-type { font-weight:600; }
.infosheet .btn { margin-top:18px; }
.info.pop .tip { display:none !important; }

/* ------------------------------------------------------------- avatar picker */
.avsheet { max-height:92dvh; }
.avwrap { position:relative; margin:4px -16px 0; }
.avtrack {
  display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; padding:6px 16px 8px;
  scrollbar-width:none; -webkit-overflow-scrolling:touch; scroll-padding-inline:calc(50% - 130px);
}
.avtrack::-webkit-scrollbar { display:none; }
.avcard {
  flex:none; width:min(66vw,260px); aspect-ratio:1; border-radius:22px; overflow:hidden; scroll-snap-align:center;
  border:3px solid transparent; background:var(--tile-bg); box-shadow:var(--shadow); transition:transform .18s, border-color .18s;
  transform:scale(.94);
}
.avcard.on { border-color:var(--accent); transform:scale(1); }
.avcard img { width:100%; height:100%; object-fit:cover; pointer-events:none; }
.avarrow {
  position:absolute; top:50%; transform:translateY(-50%); z-index:2; width:36px; height:36px; border-radius:50%;
  background:var(--surface-raised); border:1px solid var(--hairline); color:var(--on-surface); font-size:22px; line-height:1;
  display:none;
}
.avarrow.prev { right:6px; } .avarrow.next { left:6px; }
@media (hover:hover) and (pointer:fine) { .avarrow { display:grid; place-items:center; } }
.avmeta { text-align:center; font-size:12.5px; color:var(--on-surface-dim); margin-top:2px; }
.avstatus { text-align:center; margin:6px 0 0; }
.avbody .btn.pri { margin-top:10px; }
.avmine { margin-top:22px; padding-top:16px; border-top:1px solid var(--hairline); }
.avmine h3 { font-family:var(--display); font-weight:500; font-size:19px; margin:0 0 4px; color:var(--accent); }
.avmine .btnrow { margin-top:10px; }
.avpreview { aspect-ratio:1; max-width:320px; margin:8px auto 0; border-radius:22px; overflow:hidden; background:var(--tile-bg); box-shadow:var(--shadow); }
.avpreview img { width:100%; height:100%; object-fit:cover; }
.avdraw { text-align:center; padding:30px 0 10px; }
.avspin { width:44px; height:44px; margin:0 auto 14px; border-radius:50%; border:4px solid var(--hairline); border-top-color:var(--accent); animation:avspin 1s linear infinite; }
@keyframes avspin { to { transform:rotate(360deg); } }

/* ------------------------------------------------------------------ WoHo+ */
.quotanote { text-align:center; margin-top:10px; }
.planrow { display:flex; justify-content:space-between; align-items:center; }
.planrow.warn { border-color:var(--alert); color:var(--alert); }
.quotabox { padding:12px 14px; border-radius:16px; background:var(--surface-sunken); margin:6px 0 16px; font-size:14px; }
.quotabox b { display:block; margin-bottom:2px; }
.perks { list-style:none; padding:0; margin:0 0 18px; }
.perks li { padding:8px 0 8px 0; border-bottom:1px solid var(--hairline); font-size:14.5px; }
.perks li::before { content:'✦'; color:var(--accent); margin-inline-end:8px; }
.pricegrid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:6px; }
.pricecard {
  padding:18px 12px; border-radius:20px; border:1.5px solid var(--hairline); background:var(--surface-raised);
  text-align:center; display:flex; flex-direction:column; gap:2px; color:var(--on-surface);
}
.pricecard b { font-family:var(--display); font-size:26px; color:var(--accent); }
.pricecard em { font-style:normal; font-size:12px; color:var(--on-surface-dim); }
.pricecard.best { border-color:var(--accent); box-shadow:var(--shadow); }
.founder { padding:12px 14px; border-radius:16px; background:var(--accent); color:var(--on-accent); font-size:14px; margin:0 0 14px; }
.okbar { padding:12px 14px; border-radius:16px; background:var(--presence); color:#052C36; font-weight:600; margin-bottom:14px; }
.warnbar { padding:12px 14px; border-radius:16px; border:1.5px solid var(--alert); font-size:14px; margin-bottom:14px; }
.planactions h3, .payhist h3 { font-family:var(--display); font-weight:500; font-size:19px; margin:22px 0 4px; color:var(--accent); }
.planactions .btn { margin-top:10px; }
.payrow { display:grid; grid-template-columns:auto 1fr auto auto auto; gap:10px; align-items:center; padding:10px 0; border-bottom:1px solid var(--hairline); font-size:13.5px; }
.payrow .amt { font-weight:600; }
.payrow .st { color:var(--on-surface-dim); }
.payrow.bad .st { color:var(--alert); }

.lockedbox { display:flex; justify-content:space-between; align-items:center; margin:10px 16px; padding:12px 14px; border-radius:16px;
  background:var(--surface-raised); border:1px dashed var(--accent); text-decoration:none; color:var(--on-surface); }
.fpill.plus { border-style:dashed; }
.swbtn.undo { width:42px; height:42px; font-size:18px; align-self:center; }
.swbtn[hidden] { display:none; }
.msg .read { display:block; font-size:10.5px; color:var(--on-surface-dim); margin-top:2px; text-align:start; }

/* ------------------------------------------------------------ her photos */
.photos { margin-top: 10px; }
.phead { display:flex; justify-content:space-between; align-items:baseline; margin:0 0 8px; font-size:14px; }
.pgrid { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
.ptile {
  position:relative; aspect-ratio:4/5; border-radius:16px; overflow:hidden; background:var(--tile-bg);
  border:2px solid transparent; padding:0;
}
.ptile.main { border-color:var(--accent); }
.ptile img { width:100%; height:100%; object-fit:cover; display:block; }
.ptile.add {
  border:1.5px dashed var(--hairline); display:grid; place-items:center; color:var(--interactive); cursor:pointer;
  font-size:34px; line-height:1; background:transparent;
}
.ptag {
  position:absolute; top:6px; inset-inline-start:6px; font-size:11px; padding:2px 8px; border-radius:100px;
  background:var(--accent); color:#fff; pointer-events:none;
}
.ptag.av { inset-inline-start:auto; inset-inline-end:6px; background:var(--surface-raised); color:var(--on-surface); border:1px solid var(--hairline); }
.pacts { position:absolute; bottom:6px; inset-inline:6px; display:flex; justify-content:space-between; gap:4px; }
.pacts button {
  width:30px; height:30px; border-radius:50%; border:1px solid var(--hairline); background:var(--surface-raised);
  color:var(--on-surface); font-size:14px; line-height:1; display:grid; place-items:center; cursor:pointer;
}
.pacts button:first-child:not(:last-child) { color:var(--accent); }
.pacts button:only-child { margin-inline-start:auto; }
.pstatus { min-height:1.2em; margin:8px 0 0; text-align:center; }
.namerow { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.namerow label { display:block; }
.fieldnote { margin:-6px 0 12px; font-size:12.5px; }

/* the swipe gallery on a profile */
.gallery { position:relative; margin:0 16px; }
.gtrack {
  display:flex; overflow-x:auto; scroll-snap-type:x mandatory; border-radius:26px; background:var(--tile-bg);
  scrollbar-width:none; -webkit-overflow-scrolling:touch; aspect-ratio:4/5; max-height:min(62vh,520px);
}
.gtrack::-webkit-scrollbar { display:none; }
.gslide { flex:none; width:100%; height:100%; scroll-snap-align:start; }
.gslide img { width:100%; height:100%; object-fit:cover; display:block; }
.gdots { position:absolute; bottom:10px; inset-inline:0; display:flex; justify-content:center; gap:6px; pointer-events:none; }
.gdots i { width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.55); box-shadow:0 0 3px rgba(0,0,0,.4); transition:transform .15s, background .15s; }
.gdots i.on { background:#fff; transform:scale(1.25); }
.gallery .avarrow { display:none; }
@media (hover:hover) and (pointer:fine) { .gallery .avarrow { display:grid; place-items:center; } }
@media (min-width:700px) { .gallery { width:100%; max-width:600px; margin-inline:auto; } }

/* ------------------------------------------------------------- legal pages */
.consent { text-align:center; font-size:12.5px; margin-top:10px; }
.consent a { color:var(--interactive); }
.legal h1 { font-size:24px; margin:6px 0 2px; }
.legal h2 { font-size:18px; margin:26px 0 8px; }
.legal p, .legal li { font-size:15px; line-height:1.65; }
.legal ol, .legal ul { padding-inline-start:20px; }
.legal .meta { color:var(--on-surface-dim); font-size:13px; margin-bottom:18px; }
.legal .box { background:var(--tile-bg); border-radius:14px; padding:10px 14px; margin:12px 0; }
.legal table { border-collapse:collapse; width:100%; font-size:13.5px; margin:6px 0 14px; display:block; overflow-x:auto; }
.legal th, .legal td { text-align:right; vertical-align:top; padding:7px 6px; border-bottom:1px solid var(--hairline); min-width:120px; }
.legal a { color:var(--interactive); }