/* PASHOKKIE: mobile-first, light warm-neutral, monochrome accent. */
@font-face { font-family: 'Manrope'; src: url(/fonts/manrope-latin-wght-normal.woff2) format('woff2'); font-weight: 200 800; font-display: swap; }
@font-face { font-family: 'Instrument Serif'; src: url(/fonts/instrument-serif-latin-400-normal.woff2) format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Instrument Serif'; src: url(/fonts/instrument-serif-latin-400-italic.woff2) format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  --bg: #F4F1EC; --bg-2: #EAE6DF; --surface: #FFFFFF;
  --ink: #151412; --ink-2: #6B675F; --ink-3: #A29D93;
  --line: rgba(21, 20, 18, .08); --line-2: rgba(21, 20, 18, .16);
  --accent: #151412; --on-accent: #F7F4EE;
  --ok: #1E8E5A; --ok-bg: #E4F2E9; --warn: #B8791C; --warn-bg: #F7EBD6; --err: #C8392B; --err-bg: #F8E4E0;
  --r-xl: 24px; --r-lg: 18px; --r-md: 14px;
  --tab-h: 62px; --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px);
  --font: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --serif: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; overscroll-behavior: none; }
body { background: var(--bg); color: var(--ink); font: 15px/1.45 var(--font); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; border: 0; background: none; padding: 0; margin: 0; cursor: pointer; touch-action: manipulation; }
img { display: block; }
svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
h1, h2, h3, h4, p { margin: 0; }
h3 { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.sub { font-size: 13px; color: var(--ink-2); }
.sub.tips { margin-top: 12px; }
.sheet-content h3.mt { margin-top: 22px; }
.empty { font-size: 14px; color: var(--ink-2); padding: 18px 0; }
.wordmark, .cam-brand { font-family: var(--serif); font-weight: 400; letter-spacing: -.02em; }
.wordmark em, .cam-brand em { font-style: italic; }
.scroll { scrollbar-width: none; } .scroll::-webkit-scrollbar { display: none; }
::selection { background: var(--ink); color: var(--on-accent); }

/* ---------- screens ---------- */
.screen { display: none; position: fixed; inset: 0; }
.screen.on { display: flex; animation: screen-in .22s var(--ease); }
.page { flex-direction: column; background: var(--bg); }
.page.push.on { animation: push-in .28s var(--ease); }
.page-body { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 20px; overscroll-behavior: contain; }
.tab .page-body { padding-bottom: calc(var(--tab-h) + var(--sab) + 28px); }
#s-fit .page-body { padding-bottom: 150px; }
.topbar { display: flex; align-items: center; gap: 10px; padding: calc(var(--sat) + 8px) 12px 8px; min-height: 52px; }
.topbar h2 { flex: 1; font-size: 17px; font-weight: 700; text-align: center; }
.topbar.big { align-items: flex-start; justify-content: space-between; padding: calc(var(--sat) + 22px) 20px 14px; }
.tb-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.topbar.big h2 { font: 400 34px/1.05 var(--serif); letter-spacing: -.02em; text-align: left; }
.topbar-sub { font-size: 14px; color: var(--ink-2); margin-top: 4px; }

/* ---------- the avatar button (20 Sep 2026): Profile lives behind your initial, top right on the start screen and every tab; the dot = something needs you ---------- */
.avatar { position: relative; display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 auto; }
.avatar .ini { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--ink); color: var(--on-accent); font: 400 21px/1 var(--serif); letter-spacing: -.02em; padding-bottom: 1px; transition: transform .12s var(--ease); }
button.avatar:active .ini { transform: scale(.92); }
.avatar.light .ini { background: rgba(255, 255, 255, .92); color: var(--ink); box-shadow: 0 1px 10px rgba(0, 0, 0, .3); }
.avatar .dot { position: absolute; top: 3px; right: 3px; width: 11px; height: 11px; border-radius: 50%; background: var(--warn); box-shadow: 0 0 0 2px var(--bg); }
.avatar.light .dot { box-shadow: 0 0 0 2px rgba(0, 0, 0, .55); }
.avatar.big { width: 56px; height: 56px; } .avatar.big .ini { width: 56px; height: 56px; font-size: 32px; }
.topbar.big .avatar { margin-top: -4px; }
.start .avatar { position: absolute; top: calc(var(--sat) + 10px); right: 14px; }
.block { padding: 18px 0 6px; }
.block-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.block-head .sub { margin-top: 2px; }
.row { display: flex; gap: 10px; margin-top: 14px; } .row > .btn { flex: 1; }
.danger-zone { padding-top: 26px; }

/* ---------- buttons, chips, inputs ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 50px; padding: 0 20px; border-radius: 999px;
  font-weight: 700; font-size: 15px; letter-spacing: .005em; border: 1px solid transparent; transition: transform .12s var(--ease), opacity .15s, background .15s; white-space: nowrap; }
.btn svg { width: 20px; height: 20px; flex: 0 0 auto; }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .35; pointer-events: none; }
.btn-lg { height: 58px; font-size: 17px; width: 100%; }
.btn-lg small { font-size: 13px; font-weight: 600; opacity: .6; margin-left: 2px; }
.btn-sm { height: 38px; padding: 0 14px; font-size: 14px; }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-ghost { background: transparent; border-color: var(--line-2); color: var(--ink); }
.btn-light { background: #fff; color: var(--ink); }
.btn-glass { background: rgba(21, 20, 18, .55); color: #fff; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.btn-pill { height: 44px; padding: 0 18px; }
.btn.danger, .danger { color: var(--err); }
.icon-btn { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--ink); transition: transform .12s var(--ease); flex: 0 0 auto; }
.icon-btn svg { width: 22px; height: 22px; }
.icon-btn:active { transform: scale(.92); }
.icon-btn.glass { background: rgba(21, 20, 18, .42); color: #fff; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.icon-btn.lg { width: 54px; height: 54px; }
.chips { display: flex; gap: 8px; }
.chips.scroll { overflow-x: auto; padding: 2px 20px 4px; margin: 0 -20px; }
.chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2);
  background: var(--surface); font-weight: 600; font-size: 14px; color: var(--ink); transition: background .15s, color .15s, transform .12s var(--ease); }
.chip:active { transform: scale(.96); }
.chip.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.chip svg { width: 16px; height: 16px; }
.chip.add { border-style: dashed; color: var(--ink-2); background: transparent; }
.chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.chip.on .dot { background: #3CD37A; }
.input, .field input { width: 100%; height: 50px; border-radius: var(--r-md); border: 1px solid var(--line-2); background: var(--surface); color: var(--ink);
  padding: 0 16px; font: 500 16px var(--font); outline: none; transition: border-color .15s, box-shadow .15s; -webkit-appearance: none; appearance: none; }
.input:focus, .field input:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(21, 20, 18, .08); }
.input::placeholder, .field input::placeholder { color: var(--ink-3); }
.field { display: block; margin-bottom: 14px; }
.field span { display: block; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 6px; }
.form-hint { margin: -8px 0 14px; font-size: 12px; line-height: 1.35; }
.form-err { color: var(--err); font-size: 14px; font-weight: 600; min-height: 1.3em; margin: 2px 0 12px; }
.form-msg { font-size: 14px; min-height: 1.3em; margin: 0 0 12px; color: var(--ink-2); }
.form-msg.ok { color: var(--ok); } .form-msg.err { color: var(--err); }
.badge { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px; border-radius: 999px; background: var(--ok-bg); color: var(--ok); font-weight: 700; font-size: 13px; }
.badge svg { width: 14px; height: 14px; stroke-width: 3; }
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--bg-2); color: var(--ink-2); }
.pill.run { background: var(--ok-bg); color: var(--ok); } .pill.wait { background: var(--warn-bg); color: var(--warn); } .pill.err { background: var(--err-bg); color: var(--err); }
.seg { display: flex; background: var(--bg-2); border-radius: 999px; padding: 3px; }
.seg button { height: 32px; padding: 0 14px; border-radius: 999px; font-weight: 800; font-size: 13px; color: var(--ink-2); transition: background .15s, color .15s; }
.seg button.on { background: var(--accent); color: var(--on-accent); }

/* ---------- login ---------- */
.login { flex-direction: column; justify-content: center; justify-content: safe center; overflow-y: auto; padding: calc(var(--sat) + 64px) 28px calc(var(--sab) + 24px);
  background: radial-gradient(120% 80% at 50% -10%, #FFFFFF 0%, var(--bg) 60%); }
.lang-pill { position: absolute; top: calc(var(--sat) + 14px); right: 20px; height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-2); font-weight: 800; font-size: 12px; letter-spacing: .06em; color: var(--ink-2); }
.login-hero { margin-bottom: 40px; }
.login-hero .wordmark { font-size: 58px; line-height: 1; }
.tagline { color: var(--ink-2); font-size: 16px; margin-top: 12px; }
.login-form { width: 100%; max-width: 420px; }
.login-form h3 { font-size: 22px; margin-bottom: 4px; }
.login-form .form-sub { margin-bottom: 18px; }
.btn-text { display: block; width: 100%; height: 46px; margin-top: 10px; font-weight: 700; font-size: 14px; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
a.btn-text { display: grid; place-items: center; }   /* "Wat is PASHOKKIE?" is a link to the site since 26 Sep 2026 */
.check { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-2); margin: -2px 0 14px; }
.check input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
#reg-code { font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: .12em; text-transform: uppercase; }

/* ---------- camera ---------- */
.cam { position: fixed; inset: 0; background: #0C0C0B; color: #fff; z-index: 10; overflow: hidden; }
.cam.overlay { z-index: 30; }
#cam-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#cam-video { transform-origin: 50% 50%; }   /* mirror (front camera) and digital zoom are set inline by previewTransform() */
.cam-frame { position: absolute; left: 50%; top: 50%; width: min(76vw, 60vh * .75); aspect-ratio: 3 / 4; transform: translate(-50%, -56%); pointer-events: none; opacity: .9; }
.cam.home .cam-frame { transform: translate(-50%, -50%) translateY(calc(var(--tab-h) * -.35)); }
.cam-frame i { position: absolute; width: 30px; height: 30px; border: 2.5px solid #fff; border-radius: 4px; }
.cam-frame i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; border-top-left-radius: 14px; }
.cam-frame i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; border-top-right-radius: 14px; }
.cam-frame i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; border-bottom-left-radius: 14px; }
.cam-frame i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; border-bottom-right-radius: 14px; }
.cam-top { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 10px; padding: calc(var(--sat) + 12px) 14px 14px;
  background: linear-gradient(rgba(0, 0, 0, .55), transparent); z-index: 2; }
.cam-brand { flex: 1; font-size: 24px; text-shadow: 0 1px 8px rgba(0, 0, 0, .4); }
.cam.overlay .cam-brand { font-size: 18px; text-align: center; }
.cam-guide { position: absolute; left: 20px; right: 20px; top: calc(var(--sat) + 74px); text-align: center; font-size: 13px; font-weight: 600; z-index: 2; }
.cam-guide span { display: inline-block; background: rgba(21, 20, 18, .5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 8px 14px; border-radius: 999px; }
.cam-guide span.big { display: block; max-width: 340px; margin: 0 auto; padding: 14px 20px 16px; border-radius: 20px; font-size: 21px; line-height: 1.25; font-weight: 700; letter-spacing: -.01em; text-wrap: balance; }
.cam-guide span.big b { display: block; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; opacity: .72; margin-bottom: 5px; }
.cam-nolive { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px 32px calc(var(--tab-h) + var(--sab) + 60px); text-align: center; z-index: 1; }
.cam-nolive p { margin-bottom: 8px; }
.cam-nolive p { color: rgba(255, 255, 255, .72); font-size: 15px; max-width: 320px; }
.big-icon { width: 44px; height: 44px; stroke-width: 1.4; color: rgba(255, 255, 255, .5); }
.cam-block { position: absolute; left: 20px; right: 20px; top: 50%; transform: translateY(-60%); z-index: 3; background: rgba(21, 20, 18, .62); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-radius: var(--r-xl); padding: 22px; text-align: center; border: 1px solid rgba(255, 255, 255, .1); }
.cam-block b { display: block; font: 400 26px var(--serif); margin-bottom: 6px; }
.cam-block p { color: rgba(255, 255, 255, .75); font-size: 14px; margin-bottom: 16px; }
.cam-shots { position: absolute; left: 0; right: 0; bottom: calc(var(--sab) + 166px); display: flex; gap: 6px; overflow-x: auto; padding: 0 16px; z-index: 2; scrollbar-width: none; }
.cam-shots img { width: 48px; height: 64px; object-fit: cover; border-radius: 10px; flex: 0 0 auto; border: 2px solid #fff; animation: pop .25s var(--ease); }
.set-chip { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(var(--tab-h) + var(--sab) + 164px); z-index: 2; display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 14px 0 12px; border-radius: 999px; background: rgba(21, 20, 18, .5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #fff; font-size: 13px; font-weight: 700; }
.set-chip svg { width: 16px; height: 16px; }
.cam-bottom { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 14px; padding: 18px 34px calc(var(--sab) + 22px);
  background: linear-gradient(transparent, rgba(0, 0, 0, .65)); z-index: 2; }
.cam-row { display: flex; align-items: center; justify-content: space-between; }
/* camera tools (6 Sep): zoom by pinching plus the row of lens and zoom chips above the shutter, lamp/grid/timer in a rail on the right */
.cam-zoom { display: flex; justify-content: center; gap: 8px; min-height: 34px; }
.cam-zoom button { height: 34px; min-width: 44px; padding: 0 12px; border-radius: 999px; background: rgba(21, 20, 18, .42); color: #fff; font-size: 13px; font-weight: 800; letter-spacing: .02em;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: background .15s, color .15s; }
.cam-zoom button.on { background: #fff; color: var(--ink); }
.cam-tools { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 10px; z-index: 3; }
.cam.home .cam-tools { transform: translateY(calc(-50% - var(--tab-h) * .35)); }
.cam-tools .icon-btn { width: 40px; height: 40px; position: relative; }
.cam-tools .icon-btn svg { width: 20px; height: 20px; }
.cam-tools .icon-btn.on { background: #fff; color: var(--ink); }
.cam-tools b { position: absolute; right: -3px; top: -3px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: #fff; color: var(--ink); font-size: 11px; font-weight: 800; display: grid; place-items: center; }
.cam-tools .icon-btn.on b { background: var(--ink); color: #fff; }
.cam-grid { position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: .55;
  background: linear-gradient(to right, transparent calc(33.33% - .5px), #fff calc(33.33% - .5px), #fff calc(33.33% + .5px), transparent calc(33.33% + .5px), transparent calc(66.66% - .5px), #fff calc(66.66% - .5px), #fff calc(66.66% + .5px), transparent calc(66.66% + .5px)),
              linear-gradient(to bottom, transparent calc(33.33% - .5px), #fff calc(33.33% - .5px), #fff calc(33.33% + .5px), transparent calc(33.33% + .5px), transparent calc(66.66% - .5px), #fff calc(66.66% - .5px), #fff calc(66.66% + .5px), transparent calc(66.66% + .5px)); }
.cam-count { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 4; font: 400 140px/1 var(--serif); color: #fff; text-shadow: 0 4px 30px rgba(0, 0, 0, .5); pointer-events: none; animation: pop .3s var(--ease); }
.cam.home .cam-bottom { padding-bottom: calc(var(--tab-h) + var(--sab) + 18px); }
.cam-bottom > * { flex: 0 0 auto; }
#cam-shutter { width: 78px; height: 78px; border-radius: 50%; background: #fff; border: 4px solid rgba(255, 255, 255, .35); background-clip: content-box; padding: 3px; transition: transform .1s; }
#cam-shutter:active { transform: scale(.9); }
#cam-done { min-width: 96px; }
#cam-done:disabled { opacity: .4; }

/* ---------- fit ---------- */
/* as tall as the screen allows with everything else (chips, photos, remark, the fixed button) still in view: 460px is that rest, dvh follows the URL bar and the keyboard (20 Sep 2026) */
.aff-tag { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 6px 0 9px; border-radius: 999px; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .4); color: #fff; font-size: 11px; font-weight: 700; white-space: nowrap; text-shadow: none; }
.aff-tag i { display: grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid currentColor; font: italic 400 11px/1 var(--serif); }
.tip { position: absolute; bottom: 104px; left: 12px; z-index: 3; max-width: 300px; padding: 10px 12px; border-radius: 12px; background: rgba(21, 20, 18, .94); color: #fff; font-size: 13px; line-height: 1.4; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); animation: screen-in .18s var(--ease); }
.tip::before { content: ''; position: absolute; bottom: -6px; left: 40px; width: 12px; height: 12px; background: rgba(21, 20, 18, .94); transform: rotate(45deg); border-radius: 2px; }
.hero-cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; flex-direction: column; gap: 5px; padding: 10px 14px 12px; color: #fff; cursor: pointer;
  background: linear-gradient(to top, rgba(21, 20, 18, .82), rgba(21, 20, 18, .55)); text-shadow: 0 1px 6px rgba(0, 0, 0, .35); }
.hero-cap::before { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 36px; background: linear-gradient(to top, rgba(21, 20, 18, .55), rgba(21, 20, 18, 0)); pointer-events: none; }   /* the fade above the band is only looks: the band itself, with its 10px top padding, is the shop link */
.hero-cap:active { filter: brightness(1.12); }
.cap-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.hero-cap .pbrand { color: rgba(255, 255, 255, .78); }
.cap-row > b:first-child { flex: 1; min-width: 0; font-size: 15px; line-height: 1.25; font-weight: 700; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cap-foot { display: flex; align-items: center; gap: 8px; }
.cap-price { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 1px; font-size: 17px; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.cap-price svg { width: 16px; height: 16px; stroke-width: 2.2; opacity: .85; margin-right: -4px; }
#fit-cats { padding-top: 8px; }
#s-fit .block { padding: 14px 0 0; } #s-fit .block-head { margin-bottom: 10px; }
#fit-extra { margin-top: 10px; }
.strip { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -20px; padding: 0 20px; }
.strip::-webkit-scrollbar { display: none; }
.strip .thumb { position: relative; flex: 0 0 auto; width: 66px; height: 88px; border-radius: var(--r-md); overflow: hidden; background: var(--bg-2); }
.strip .thumb img { width: 100%; height: 100%; object-fit: cover; }
.strip .thumb .num { position: absolute; left: 6px; bottom: 6px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: rgba(21, 20, 18, .7); color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center; }
.strip .thumb .x { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; border-radius: 50%; background: rgba(21, 20, 18, .72); color: #fff; display: grid; place-items: center; }
.strip .thumb .x svg { width: 13px; height: 13px; stroke-width: 2.4; }
.strip .thumb.more { display: grid; place-items: center; font-weight: 700; color: var(--ink-2); background: transparent; border: 1px dashed var(--line-2); }
.strip .thumb.more svg { width: 22px; height: 22px; }   /* without a size an <svg> becomes 300x150 and you see a clipped plus */
.cta-bar { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 20px calc(var(--sab) + 16px); background: linear-gradient(to top, var(--bg) 62%, rgba(244, 241, 236, 0)); z-index: 3; }
.cta-note { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); margin-bottom: 10px; padding: 0 4px; }
.cta-note::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--warn); flex: 0 0 auto; }
.cta-note.err::before { background: var(--err); }

/* ---------- discover (catalog) + product on the fit screen ---------- */
.shop-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 12px; padding-top: 14px; }
.pcard { display: flex; flex-direction: column; align-items: stretch; text-align: left; gap: 2px; transition: transform .12s var(--ease); }
.pcard:active { transform: scale(.97); }
.pcard .pimg { display: block; aspect-ratio: 3 / 4; border-radius: var(--r-lg); overflow: hidden; background: var(--surface); border: 1px solid var(--line); margin-bottom: 6px; }
.pcard img { width: 100%; height: 100%; object-fit: cover; }
.pbrand { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.pcard .ptitle { font-size: 14px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pcard .pprice { font-size: 14px; color: var(--ink-2); font-weight: 600; }
/* the chip bar of Ontdekken (Discover): the chips scroll, the shop button stays put */
.disc-bar { display: flex; align-items: center; gap: 8px; }
.disc-bar .chips { flex: 1; min-width: 0; }
.disc-bar .chips.scroll { margin-right: 0; padding-right: 6px; }   /* .chips.scroll normally runs to the screen edge; next to the button it may not, or a chip slides under it */
.disc-bar .chips[hidden] { display: none; }
.disc-shops { flex: 0 0 auto; border: 1px solid transparent; }   /* the border is always there, so the button does not jump when it switches on */
.disc-shops.on { background: var(--ink); color: var(--on-accent); border-color: var(--ink); }
.shop-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 2px; border-bottom: 1px solid var(--line); text-align: left; background: none; }
.shop-row:last-child { border-bottom: 0; }
.shop-row .grow { flex: 1; min-width: 0; font-size: 16px; font-weight: 600; }
.shop-row .cnt { font-size: 13px; color: var(--ink-2); font-weight: 600; }
.shop-row .box { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 8px; border: 1.5px solid var(--line-2); display: grid; place-items: center; }
.shop-row .box svg { width: 16px; height: 16px; opacity: 0; }
.shop-row.on .box { background: var(--ink); border-color: var(--ink); }
.shop-row.on .box svg { opacity: 1; color: var(--on-accent); }

/* the bottom of the endless feed: as soon as this block comes near, the app fetches the next page */
.feed-end { display: flex; justify-content: center; padding: 22px 0 6px; }
.feed-end .spin { width: 20px; height: 20px; border: 2px solid var(--line-2); border-top-color: var(--ink-2); border-radius: 50%; animation: spin .9s linear infinite; }

/* ---------- grids / tiles ---------- */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tile { position: relative; aspect-ratio: 3 / 4; border-radius: var(--r-lg); overflow: hidden; background: var(--bg-2); transition: transform .12s var(--ease); }
.tile:active { transform: scale(.97); }
.tile img { width: 100%; height: 100%; object-fit: cover; transition: opacity .15s; }
.tile.sel::after { content: ''; position: absolute; inset: 0; border-radius: var(--r-lg); box-shadow: inset 0 0 0 3px var(--accent); pointer-events: none; }
.grid.pick .tile:not(.sel) img { opacity: .5; }
.tile .tick { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, .88); border: 1.5px solid rgba(21, 20, 18, .18); display: grid; place-items: center; color: transparent; }
.tile.sel .tick { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.tile .tick svg { width: 14px; height: 14px; stroke-width: 3.2; }
.tile .del { position: absolute; top: 8px; left: 8px; width: 28px; height: 28px; border-radius: 50%; background: rgba(21, 20, 18, .55); color: #fff; display: grid; place-items: center; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.tile .del svg { width: 14px; height: 14px; stroke-width: 2.4; }
.tile .num { position: absolute; left: 8px; bottom: 8px; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: rgba(21, 20, 18, .7); color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center; }
.tile.skel { display: grid; place-items: center; color: var(--ink-3); }
.tile.skel::before { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%); animation: shimmer 1.6s infinite; }
.tile.skel .spinner { border-color: rgba(21, 20, 18, .15); border-top-color: var(--ink-2); }
.tile.err { display: grid; place-items: center; color: var(--err); background: var(--err-bg); }
.tile.err svg { width: 22px; height: 22px; }

/* ---------- history ---------- */
.day { margin-top: 22px; }
.day h4 { font: 400 24px/1.1 var(--serif); letter-spacing: -.01em; margin-bottom: 12px; }
.tryon { margin-bottom: 20px; }
.tryon-top { display: flex; align-items: center; gap: 4px; margin-bottom: 10px; }
.tryon-head { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; text-align: left; }
.tryon-del { color: var(--ink-2); margin-right: -8px; }
.tryon-del svg { width: 20px; height: 20px; }
.tryon-head img { width: 44px; height: 56px; border-radius: 12px; object-fit: cover; background: var(--bg-2); flex: 0 0 auto; }
.tryon-meta { flex: 1; min-width: 0; }
.tryon-meta b { display: block; font-size: 15px; }
.tryon-meta span { font-size: 13px; color: var(--ink-2); }
.tryon .err-text { font-size: 13px; color: var(--err); margin-bottom: 8px; }
.empty-state { text-align: center; padding: 16vh 12px 0; }
.empty-state h3 { font: 400 32px/1.1 var(--serif); letter-spacing: -.02em; margin-bottom: 10px; }
.empty-state p { color: var(--ink-2); max-width: 300px; margin: 0 auto; }
.empty-state .btn { margin-top: 22px; }

/* ---------- profile ---------- */
.set-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0 8px; }
#set-hint { margin-bottom: 12px; }
.list { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden; margin-top: 12px; }
.list-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 58px; padding: 8px 18px; border-bottom: 1px solid var(--line); font-size: 15px; font-weight: 600; text-align: left; color: var(--ink); }
.list > :last-child { border-bottom: 0; }
.btn-row svg { width: 18px; height: 18px; color: var(--ink-3); flex: 0 0 auto; }
.btn-row:active { background: var(--bg); }
.list-form { padding: 6px 18px 18px; border-bottom: 1px solid var(--line); }
.list-form .field { margin-top: 10px; }

/* ---------- tabs ---------- */
#tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; height: calc(var(--tab-h) + var(--sab)); padding: 6px 10px var(--sab);
  background: rgba(244, 241, 236, .88); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-top: 1px solid var(--line); transition: background .2s; }
#tabs button { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--ink-3); font-size: 11px; font-weight: 800; letter-spacing: .01em; border-radius: 14px; transition: color .15s, transform .12s var(--ease); }
#tabs button svg { width: 24px; height: 24px; transition: transform .15s var(--ease); }
#tabs button:active svg { transform: scale(.9); }
#tabs button.on { color: var(--ink); }
#tabs.dark { background: rgba(12, 12, 11, .72); border-top-color: rgba(255, 255, 255, .08); }
#tabs.dark button { color: rgba(255, 255, 255, .45); }
#tabs.dark button.on { color: #fff; }

/* ---------- viewer ---------- */
.viewer { position: fixed; inset: 0; background: #0C0C0B; color: #fff; z-index: 40; display: flex; flex-direction: column; animation: fade .2s; }
.viewer-top { position: absolute; top: 0; left: 0; right: 0; z-index: 2; padding: calc(var(--sat) + 10px) 14px 16px; background: linear-gradient(rgba(0, 0, 0, .6), transparent); }
.segs { display: flex; gap: 4px; height: 3px; }
.segs .seg { flex: 1; border-radius: 2px; background: rgba(255, 255, 255, .28); position: relative; overflow: hidden; }
.segs .seg.done { background: rgba(255, 255, 255, .6); }
.segs .seg.cur { background: #fff; }
.segs .seg.wait::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .8), transparent); animation: shimmer 1.4s infinite; }
.viewer-bar { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.viewer-garment { width: 40px; height: 52px; border-radius: 10px; object-fit: cover; background: #222; flex: 0 0 auto; }
.viewer-title { flex: 1; min-width: 0; }
.viewer-title b { display: block; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.viewer-title span { font-size: 12px; color: rgba(255, 255, 255, .7); }
.track { flex: 1; min-height: 0; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.track::-webkit-scrollbar { display: none; }
.slide { flex: 0 0 100%; width: 100%; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; display: flex; align-items: center; justify-content: center; padding: calc(var(--sat) + 92px) 0 calc(var(--sab) + 100px); }
/* A result is draggable in Chrome on Android: on a slow swipe the browser picks up the image instead of scrolling the
   track, and then it looks as if you are stuck on the first image. Hence no dragging or selecting anywhere. */
.slide img { max-width: 100%; max-height: 100%; object-fit: contain; animation: fade .3s; -webkit-user-drag: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.track.zoomed { overflow: hidden; }                 /* zoomed in: the finger pans the image, it does not switch images */
.track.zoomed .slide { touch-action: none; }
.slide img.zoom-anim { transition: transform .22s var(--ease); }
/* Previous and next: swiping still works, but it is no longer needed. */
.viewer-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 44px; height: 64px; display: flex; align-items: center; justify-content: center;
  color: #fff; background: rgba(0, 0, 0, .38); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: opacity .15s, transform .12s var(--ease); }
.viewer-nav svg { width: 26px; height: 26px; }
.viewer-nav.prev { left: 0; border-radius: 0 14px 14px 0; }
.viewer-nav.prev svg { transform: rotate(180deg); }
.viewer-nav.next { right: 0; border-radius: 14px 0 0 14px; }
.viewer-nav:disabled { opacity: .25; }
.viewer-nav:active { transform: translateY(-50%) scale(.92); }
.slide .skel { width: min(72%, 60vh * .75); aspect-ratio: 3 / 4; border-radius: 22px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: rgba(255, 255, 255, .7); font-size: 14px; font-weight: 600; position: relative; overflow: hidden; text-align: center; padding: 20px; }
.slide .skel::before { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .08) 50%, transparent 70%); animation: shimmer 1.8s infinite; }
.slide .skel.err { color: #FF8A7A; }
.slide .skel.err svg { width: 28px; height: 28px; }
.spinner { width: 28px; height: 28px; border: 2.5px solid rgba(255, 255, 255, .22); border-top-color: #fff; border-radius: 50%; animation: spin .9s linear infinite; }
/* ---------- the article screen (20 Sep 2026, decision Allan: fewer clicks). From Ontdekken you land straight on the photo,
   full screen: the track and the arrows of the viewer with the bar of the fit screen below it, and the button Passen below
   that. The options (your photos, the category, the remark) sit in a sheet that only comes up when you tap Passen,
   with the photo still behind it. ---------- */
.fitview { background: #0C0C0B; color: #fff; flex-direction: column; }
.fitview .slide { padding: calc(var(--sat) + 64px) 0 calc(var(--sab) + 92px); }
.fitview.has-cap .slide { padding-bottom: calc(var(--sab) + 198px); }
.fit-back { position: absolute; top: calc(var(--sat) + 12px); left: 14px; z-index: 3; }
.fit-top { position: absolute; top: calc(var(--sat) + 12px); right: 14px; z-index: 3; display: flex; align-items: center; gap: 8px; }
/* The bar runs down to the bottom edge of the photo (--cap-top from fitCapTop), so the black in between is also the shop
   link (Allan 20 Sep 2026); the text stays at the bottom. The fade belongs above a bar that lies over a photo and would
   dirty the bottom edge of the photo here. */
.fitview .hero-cap { bottom: calc(var(--sab) + 88px); padding-bottom: 14px; }
.fitview.has-cap .hero-cap { top: var(--cap-top, auto); justify-content: flex-end; }
.fitview .hero-cap::before { display: none; }
.fitview .tip { bottom: calc(var(--sab) + 200px); }
.fit-cta { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; padding: 14px 20px calc(var(--sab) + 16px);
  background: linear-gradient(to top, #0C0C0B 68%, rgba(12, 12, 11, 0)); }
.fit-cta .btn-light { box-shadow: 0 8px 28px rgba(0, 0, 0, .35); }   /* white on the dark article screen (Allan 20 Sep: attention to the button); in the sheet Passen stays black on ivory */
/* the sheet with the options: same shape as the other sheets, but it belongs to this screen and has its own layer */
.opts { position: fixed; inset: 0; z-index: 50; color: var(--ink); }
.opts-bd { position: absolute; inset: 0; background: rgba(21, 20, 18, .45); animation: fade .2s; }
.opts-panel { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; max-height: 86dvh;
  background: var(--bg); border-radius: 26px 26px 0 0; padding: 8px 20px calc(var(--sab) + 16px);
  animation: sheet-up .26s var(--ease); box-shadow: 0 -10px 40px rgba(0, 0, 0, .18); }
.opts-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.opts-body .block:first-child { padding-top: 6px; }
.opts-cta { padding-top: 14px; }
.opts-cta .cta-note { margin-bottom: 10px; }
.viewer-actions { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; justify-content: space-around; padding: 18px 20px calc(var(--sab) + 16px); background: linear-gradient(transparent, rgba(0, 0, 0, .65)); }
.vbtn { display: flex; flex-direction: column; align-items: center; gap: 6px; color: #fff; font-size: 12px; font-weight: 700; min-width: 72px; transition: transform .12s var(--ease), opacity .15s; }
.vbtn svg { width: 24px; height: 24px; }
.vbtn:active { transform: scale(.92); }
.vbtn:disabled { opacity: .3; }

/* ---------- sheet + toast ---------- */
.sheet { position: fixed; inset: 0; z-index: 50; }
.sheet-backdrop { position: absolute; inset: 0; background: rgba(21, 20, 18, .45); animation: fade .2s; }
.sheet-panel { position: absolute; left: 0; right: 0; bottom: 0; background: var(--bg); border-radius: 26px 26px 0 0; padding: 8px 20px calc(var(--sab) + 16px); max-height: 88dvh; display: flex; flex-direction: column;
  animation: sheet-up .3s var(--ease); box-shadow: 0 -10px 40px rgba(0, 0, 0, .15); }
.sheet.closing .sheet-panel { animation: sheet-down .22s var(--ease) forwards; }
.sheet.closing .sheet-backdrop { animation: fade-out .22s forwards; }
.sheet-grip { width: 40px; height: 5px; border-radius: 3px; background: var(--line-2); margin: 4px auto 14px; flex: 0 0 auto; }
.sheet-content { overflow-y: auto; flex: 1; min-height: 0; -webkit-overflow-scrolling: touch; }
.sheet h3 { font: 400 26px/1.1 var(--serif); letter-spacing: -.02em; }
.sheet .sub { margin: 4px 0 14px; }
.sheet .sub.what { margin-top: -8px; }
.sheet .chips.scroll { margin: 0 -20px 14px; }
.sheet-actions { display: flex; gap: 10px; margin-top: 16px; }
.sheet-actions .btn { flex: 1; }
.sheet-list { display: flex; flex-direction: column; gap: 6px; }
.sheet-list button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 16px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); font-weight: 600; font-size: 15px; text-align: left; }
.sheet-list button svg { width: 20px; height: 20px; color: var(--ink-3); }
.sheet-list button.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.sheet-list button.on svg { color: var(--ink); }
.sheet-list button .grow { flex: 1; }
.sheet-list button small { color: var(--ink-2); font-weight: 600; }
.sheet-list .thumbs { display: flex; gap: 3px; }
.sheet-list .thumbs img { width: 22px; height: 30px; border-radius: 5px; object-fit: cover; background: var(--bg-2); }
.sheet .grid { margin-bottom: 4px; }
.sheet .field { margin-top: 12px; }
.sheet p.text { font-size: 15px; color: var(--ink-2); margin-top: 8px; }
.btn-danger { background: var(--err); color: #fff; }
#toast { position: fixed; top: calc(var(--sat) + 14px); left: 50%; transform: translateX(-50%); background: var(--accent); color: var(--on-accent); padding: 12px 18px; border-radius: 999px;
  font-size: 14px; font-weight: 600; z-index: 70; max-width: 90vw; text-align: center; box-shadow: 0 10px 30px rgba(0, 0, 0, .22); animation: toast-in .25s var(--ease); }

/* ---------- motion ---------- */
@keyframes screen-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes push-in { from { transform: translateX(100%); } }
@keyframes sheet-up { from { transform: translateY(100%); } }
@keyframes sheet-down { to { transform: translateY(100%); } }
@keyframes fade { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, -8px); } }
@keyframes pop { from { transform: scale(.6); opacity: 0; } }
@keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* ---------- larger screens: keep the phone layout centred ---------- */
@media (min-width: 640px) {
  .page-body, .topbar, .cta-bar, .login-form, .login-hero { width: 100%; max-width: 520px; margin-left: auto; margin-right: auto; }
  .cta-bar { left: 50%; transform: translateX(-50%); }
  #tabs { justify-content: center; } #tabs button { max-width: 130px; }
  .cam-bottom { max-width: 520px; margin: 0 auto; }
}

/* ---------- onboarding (onboard.js): welcome cards, cheer, tour ---------- */
.onb { flex-direction: column; background: var(--bg); padding: calc(var(--sat) + 14px) 28px calc(var(--sab) + 22px); overflow-y: auto; -webkit-overflow-scrolling: touch; }
.onb-top { display: flex; align-items: center; justify-content: space-between; min-height: 44px; flex: 0 0 auto; width: 100%; max-width: 420px; margin: 0 auto; }
.dots { display: flex; gap: 6px; }
.dots i { width: 8px; height: 8px; border-radius: 4px; background: var(--line-2); transition: background .2s, width .25s var(--ease); }
.dots i.on { width: 22px; background: var(--ink); }
.btn-text.skip { width: auto; height: 44px; margin: 0; padding: 0 4px; }
.onb-card { flex: 1; display: flex; flex-direction: column; justify-content: center; width: 100%; max-width: 420px; margin: 0 auto; padding: 8px 0; animation: screen-in .3s var(--ease); }
.onb-card h2 { font: 400 48px/1.02 var(--serif); letter-spacing: -.025em; margin: 16px 0 12px; }
.onb-card .lead { font-size: 19px; line-height: 1.4; color: var(--ink-2); max-width: 340px; }
#onb-1 h2 { font-size: 58px; margin-top: 22px; }                                         /* little text here, so big and clear (Allan) */
#onb-1 .lead { font-size: 25px; line-height: 1.3; font-weight: 500; color: var(--ink); max-width: none; }
#onb-1 .onb-actions { margin-top: 34px; }
.onb-art { position: relative; height: 170px; margin: 6px 0 4px; }
.onb-art i { position: absolute; left: 50%; top: 50%; width: 88px; height: 116px; border-radius: 18px; border: 1px solid var(--line-2); background: var(--surface);
  box-shadow: 0 12px 30px rgba(21, 20, 18, .08); display: grid; place-items: center; animation: pop .5s var(--ease) both; }
.onb-art i:nth-child(1) { transform: translate(-50%, -50%) translateX(-58px) rotate(-12deg); background: var(--bg-2); animation-delay: .05s; }
.onb-art i:nth-child(2) { transform: translate(-50%, -50%) translateX(58px) rotate(12deg); background: var(--bg-2); animation-delay: .12s; }
.onb-art i:nth-child(3) { transform: translate(-50%, -50%) translateY(-4px); background: var(--accent); color: var(--on-accent); border-color: var(--accent); animation-delay: .2s; }
.onb-art svg { width: 30px; height: 30px; }
.tips { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-direction: column; gap: 12px; }
.tips li { display: flex; align-items: center; gap: 14px; font-size: 17px; font-weight: 600; }
.tips .ic { width: 42px; height: 42px; border-radius: 50%; background: var(--surface); border: 1px solid var(--line); display: grid; place-items: center; flex: 0 0 auto; }
.tips svg { width: 22px; height: 22px; }
.magic { font: italic 400 25px/1.22 var(--serif); letter-spacing: -.01em; margin: 22px 0 6px; }
.slots { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 14px 0 4px; }
.slot { aspect-ratio: 3 / 4; border-radius: 12px; border: 1.5px dashed var(--line-2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 4px 2px; text-align: center; overflow: hidden; }
.slot span { font: 400 20px/1 var(--serif); color: var(--ink-3); }
.slot small { font-size: 10px; font-weight: 700; line-height: 1.15; color: var(--ink-2); }
.slot.has { border: 0; background: var(--bg-2); padding: 0; animation: pop .35s var(--ease) both; }
.slot.has img { width: 100%; height: 100%; object-fit: cover; }
.onb-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 26px; }
.nudge { margin-top: 10px; font-size: 14px; }
.bigcheck { width: 92px; height: 92px; margin-bottom: 4px; }
.bigcheck svg { width: 100%; height: 100%; stroke-width: 2.4; color: var(--ink); }
.bigcheck circle { stroke-dasharray: 190; stroke-dashoffset: 190; animation: draw .6s var(--ease) forwards; }
.bigcheck path { stroke-dasharray: 40; stroke-dashoffset: 40; stroke-width: 3.4; animation: draw .35s .45s var(--ease) forwards; }
.bigcheck.sm { width: 40px; height: 40px; margin: 0; }
.confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; }
.confetti i { position: absolute; top: -14px; width: 7px; height: 12px; border-radius: 2px; opacity: 0; animation: confetti 1.8s cubic-bezier(.2, .6, .4, 1) forwards; }
.confetti i.round { width: 8px; height: 8px; border-radius: 50%; }
.tour { position: fixed; inset: 0; z-index: 45; animation: fade .3s; }
.tour-hole { position: absolute; box-shadow: 0 0 0 2.5px rgba(255, 255, 255, .95), 0 0 0 200vmax rgba(12, 12, 11, .78); transition: left .3s var(--ease), top .3s var(--ease), width .3s var(--ease), height .3s var(--ease), border-radius .3s; pointer-events: none; }
.tour-hole::after { content: ''; position: absolute; inset: -4px; border-radius: inherit; border: 2px solid rgba(255, 255, 255, .8); animation: ring 1.4s var(--ease) infinite; }
.tour-card { position: absolute; left: 20px; right: 20px; max-width: 440px; margin: 0 auto; background: var(--surface); color: var(--ink); border-radius: 22px; padding: 16px 20px 14px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .35); animation: pop .3s var(--ease); }
.tour-card::after { content: ''; position: absolute; left: var(--px, 50%); bottom: -9px; width: 18px; height: 18px; margin-left: -9px; background: var(--surface); transform: rotate(45deg); border-radius: 3px; }   /* the pointer, aimed at the hole */
.tour-card.below::after { bottom: auto; top: -9px; }
.tour-card p { font-size: 17px; line-height: 1.4; font-weight: 500; margin: 10px 0 14px; }
.tour-card .dots:not([hidden]) + p { margin-top: 12px; }
.tour-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.tour-actions .skip { margin-right: auto; }
.cheer-mini { position: fixed; top: calc(var(--sat) + 96px); left: 50%; transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: 12px; max-width: 92vw;
  background: var(--surface); color: var(--ink); padding: 10px 22px 10px 12px; border-radius: 999px; font-size: 16px; font-weight: 700; white-space: nowrap; box-shadow: 0 14px 40px rgba(0, 0, 0, .3); animation: toast-in .3s var(--ease); }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes ring { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } }
@keyframes confetti { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--x, 0), 72vh) rotate(var(--rot, 360deg)); } }

/* beta agreement (terms.js): the text scrolls inside the card, both buttons always in view and the same size */
.terms { overflow: hidden; }
.terms .onb-card { justify-content: flex-start; min-height: 0; }
.terms .onb-card h2 { font-size: 40px; margin: 8px 0 8px; }
.terms .lead { font-size: 17px; max-width: none; }
.terms-tag { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.terms-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; margin-top: 14px; padding-right: 4px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.terms-list { list-style: none; padding: 14px 0 4px; margin: 0; display: flex; flex-direction: column; gap: 14px; counter-reset: terms; }
.terms-list li { counter-increment: terms; position: relative; padding-left: 32px; }
.terms-list li::before { content: counter(terms); position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--surface); border: 1px solid var(--line-2); font-size: 12px; font-weight: 800; display: grid; place-items: center; }
.terms-list b { display: block; font-size: 15px; margin-bottom: 3px; }
.terms-list p { font-size: 14px; line-height: 1.45; color: var(--ink-2); margin: 0; }
.terms-body .sub { padding: 8px 0 12px; font-size: 12px; }
.terms-ticks { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.terms-tick { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.4; cursor: pointer; }
.terms-tick input { flex: 0 0 auto; width: 20px; height: 20px; margin: 0; accent-color: var(--ink); }
.terms-ticks-hint { margin: 0; font-size: 13px; font-weight: 600; color: var(--err); }
.terms-consequence { margin-top: 12px; font-size: 14px; font-weight: 600; line-height: 1.4; }
.terms-actions { margin-top: 12px; }
.cam { touch-action: none; }
.cam-shots { touch-action: pan-x; }

/* ---------- encryption (0.4.0, docs/ENCRYPTION.md): the promise line, the migration bar, the reset form ---------- */
.enc-hint { display: flex; gap: 8px; align-items: flex-start; }
.enc-hint svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 1px; color: var(--ink-2); }
.enc-text { display: inline-flex; align-items: center; gap: 10px; }
.enc-text svg { width: 18px; height: 18px; color: var(--ink); }
.migrate-bar { height: 6px; border-radius: 3px; background: var(--bg-2); overflow: hidden; margin: 22px 0 10px; }
.migrate-bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .25s var(--ease); }
img.broken { opacity: .25; }

/* ---------- start screen (0.6.8): what the app opens on, one big camera button; Profiel > App sets it back to the camera ---------- */
.start { flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: calc(var(--sat) + 40px) 26px calc(var(--tab-h) + var(--sab) + 40px); background: var(--bg); }
.start .wordmark { font-size: 52px; line-height: 1; }
.start-cta { margin-top: auto; margin-bottom: auto; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.start-cam { width: 136px; height: 136px; border-radius: 50%; background: var(--accent); color: var(--on-accent);
  display: grid; place-items: center; box-shadow: 0 16px 34px rgba(21, 20, 18, .22); transition: transform .14s var(--ease); }
.start-cam:active { transform: scale(.94); }
.start-cam svg { width: 50px; height: 50px; stroke-width: 1.5; }
.start-label { font-size: 16px; font-weight: 800; letter-spacing: .005em; }

/* ---------- lazy pictures (0.6.6) ---------- */
/* A tile fetches its own picture only when it comes near the screen (the two observers in app.js) and shows a heavily
   blurred default in the meantime: one soft shape in the warm neutrals of the app, so a half-loaded roll stays calm.
   The moment the tile is really in view the picture rises into place and sharpens out of that blur. A picture we already
   have in memory skips the whole thing and is simply there. The viewer and the sheets never wait: they load at once. */
:root { --wait-img: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA5MCAxMjAnIHByZXNlcnZlQXNwZWN0UmF0aW89J3hNaWRZTWlkIHNsaWNlJz48cmVjdCB3aWR0aD0nOTAnIGhlaWdodD0nMTIwJyBmaWxsPScjRURFOEUxJy8+PGcgZmlsdGVyPSd1cmwoI2IpJz48ZWxsaXBzZSBjeD0nNDUnIGN5PSczNicgcng9JzE4JyByeT0nMjAnIGZpbGw9JyNEN0NEQkUnLz48cGF0aCBkPSdNMTAgMTIwYzAtMzEgMTYtNDcgMzUtNDdzMzUgMTYgMzUgNDd6JyBmaWxsPScjQ0NDMUFGJy8+PGVsbGlwc2UgY3g9JzE4JyBjeT0nMTYnIHJ4PScyNCcgcnk9JzE3JyBmaWxsPScjRjhGNUVGJy8+PGVsbGlwc2UgY3g9Jzc4JyBjeT0nMTAxJyByeD0nMjYnIHJ5PScyMycgZmlsbD0nI0UxREFDQicvPjwvZz48ZGVmcz48ZmlsdGVyIGlkPSdiJyB4PSctNDAlJyB5PSctNDAlJyB3aWR0aD0nMTgwJScgaGVpZ2h0PScxODAlJz48ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPScxMicvPjwvZmlsdGVyPjwvZGVmcz48L3N2Zz4="); }
img[data-img].wait { background: var(--wait-img) center / cover no-repeat; }
img[data-img].wait:not(.in) { filter: blur(14px); transform: translateY(14px) scale(1.07); }
img[data-img].wait.in { filter: none; transform: none; transition: filter .6s var(--ease), transform .6s var(--ease); }
/* the small thumbnails keep the default but not the blur: they have no box that clips it, and at 44 px it says nothing */
.tryon-head img[data-img].wait:not(.in), .thumbs img[data-img].wait:not(.in), .strip .thumb img[data-img].wait:not(.in) { filter: none; transform: translateY(6px) scale(1.05); }

/* ---------- plan and allowance (0.5.0): profile block, plan cards in the sheet, the free pill on the camera ---------- */
.plan-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 16px 18px; }
.plan-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.plan-head b { font-size: 21px; letter-spacing: -.01em; }
.pill.founder { background: var(--accent); color: var(--on-accent); }
.meters { display: grid; gap: 12px; margin-top: 14px; }
.meter { font-size: 13px; color: var(--ink-2); }
.meter .row2 { display: flex; justify-content: space-between; margin-bottom: 6px; font-weight: 600; }
.meter .row2 b { color: var(--ink); font-variant-numeric: tabular-nums; }
.meter > i { display: block; height: 6px; border-radius: 3px; background: var(--bg-2); overflow: hidden; }
.meter > i > b { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 3px; transition: width .3s var(--ease); }
.plan-extra { margin-top: 12px; }
.plan-what { margin-top: 6px; }
.plan-card .btn { margin-top: 14px; width: 100%; }
.plan-list { display: grid; gap: 10px; }
.plan-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px 16px; }
.plan-item.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.plan-item .top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.plan-item .top > b { font-size: 18px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.plan-item .price { text-align: right; font-weight: 700; flex: 0 0 auto; }
.plan-item .price s { color: var(--ink-3); font-weight: 600; margin-right: 6px; }
.plan-item .price small { display: block; font-weight: 600; color: var(--ink-2); font-size: 12px; }
.plan-item ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 5px; font-size: 13px; color: var(--ink-2); }
.plan-item li { display: flex; gap: 10px; }
.plan-item li > span { flex: 0 0 88px; color: var(--ink-3); }
.plan-item .btn { margin-top: 12px; width: 100%; }
/* payments (0.14.0): the packs under the plans, the subscription card, the test-mode line */
.packs { margin-top: 22px; }
.packs h4 { font-size: 17px; font-weight: 700; }
.packs .sub { margin: 4px 0 12px; }
.plans-note { margin-top: 12px; }
.sub-card { margin-top: 12px; }
.sub-card .plan-head b { font-size: 18px; }
.sub-due .sub { color: var(--err); font-weight: 600; margin-top: 10px; }
.test-note { color: var(--warn); font-weight: 600; }
.page-body > .test-note { margin-top: 12px; }
.pay-ticks { margin: 4px 0 6px; }
.pay-ticks a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.buys-card { margin-top: 12px; }
.buys-card .plan-head b { font-size: 18px; }
.buys { display: grid; gap: 12px; margin-top: 10px; }
.buy { border-top: 1px solid var(--line); padding-top: 10px; }
.buy .top { display: flex; justify-content: space-between; gap: 10px; font-size: 15px; }
.buy .sub { margin: 2px 0 0; font-size: 13px; }
.plan-card .buy .btn { margin-top: 8px; }
/* ---------- Sparen (Rewards) (0.6.0): the streak, the weekly tasks and the user's own invites (sub-page #s-rewards) ---------- */
.plan-card .btn + .btn { margin-top: 8px; }
.streak-card { margin-top: 4px; }
.streak { display: flex; align-items: baseline; gap: 10px; }
.streak b { font: 400 44px/1 var(--serif); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.streak span { font-size: 15px; font-weight: 600; color: var(--ink-2); }
.dots { display: flex; gap: 7px; margin: 14px 0 12px; }
.dots i { flex: 1 1 0; min-width: 0; height: 8px; border-radius: 4px; background: var(--bg-2); }
.dots i.on { background: var(--accent); }
.dots i.today { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--line-2); }
.rw-row .side { gap: 10px; }
.rw-row .side b { color: var(--ink); font-weight: 700; }
.rw-row.done span:first-child { color: var(--ink-2); }
.rw-row .prog { font-variant-numeric: tabular-nums; }
.pill.ok { background: var(--ok-bg); color: var(--ok); }
.rw-steps-legend { display: grid; gap: 4px; margin: 10px 0 14px; font-size: 13px; color: var(--ink-2); }
.rw-steps-legend span { display: flex; align-items: center; gap: 8px; }
.rw-steps-legend i { width: 6px; height: 6px; border-radius: 50%; background: var(--line-2); flex: 0 0 auto; }
.rw-steps-legend b { margin-left: auto; color: var(--ink); white-space: nowrap; }
.rw-new { display: flex; gap: 8px; margin-top: 6px; }
.rw-new input { flex: 1; min-width: 0; height: 44px; padding: 0 14px; border-radius: var(--r-md); border: 1px solid var(--line-2); background: var(--surface); font: inherit; color: var(--ink); }
.rw-new .btn { flex: 0 0 auto; }
#rw-left { margin-top: 8px; }
.codes { display: grid; gap: 10px; margin-top: 12px; }
.code-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px 16px; }
.code-card .top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.code-card .top b { font-size: 16px; }
.code-card .code { font: 700 19px/1.2 var(--font); letter-spacing: .06em; margin-top: 8px; font-variant-numeric: tabular-nums; }
.code-card .acts { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.code-card .acts .btn { flex: 1 1 auto; }
.code-card .steps { display: grid; gap: 5px; margin-top: 10px; font-size: 13px; color: var(--ink-3); }
.code-card .steps span { display: flex; align-items: center; gap: 8px; }
.code-card .steps span.on { color: var(--ink); font-weight: 600; }
.code-card .steps svg { width: 14px; height: 14px; stroke-width: 3; color: var(--ok); }
.code-card .steps i { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--line-2); flex: 0 0 auto; }
.sub.earned { margin: 18px 0 6px; }
ul.got { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 8px; }
ul.got li { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 14px; }
ul.got span { font-weight: 700; white-space: nowrap; }
.got-card { margin: 8px 0 12px; } .got-card h3 { margin-bottom: 8px; }

/* profile as a menu (0.5.1): name and plan on top, grouped rows; photos, plan, password, encryption and install are sub-pages (.page.sub) */
.prof-head { display: flex; align-items: center; gap: 14px; padding: 4px 0 8px; }
.prof-head > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.prof-head b { font-size: 20px; letter-spacing: -.01em; }
.prof-head span { font-size: 14px; color: var(--ink-2); }
.group { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); margin: 18px 0 -4px 18px; }
#s-profile .list-row { min-height: 54px; }
#s-profile .page-body { padding-top: 4px; padding-bottom: calc(var(--sab) + 28px); }   /* a pushed page since 20 Sep 2026, no tab bar under it */
.list-row .side { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); font-weight: 600; font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.enc-text { display: inline-flex; align-items: center; gap: 10px; } .btn-row .enc-text svg { color: var(--ink); }
.topbar-spacer { width: 44px; flex: 0 0 auto; }
.page.sub .page-body { padding-top: 4px; padding-bottom: calc(var(--sab) + 28px); }
.sub.top { margin: 4px 0 12px; }
.sub-form { padding-top: 10px; } .sub-form .btn { width: 100%; }
.sub-text { padding-top: 10px; } .sub-text .lic { margin-bottom: 14px; } .sub-text h3 { margin: 18px 0 6px; } .sub-text p { color: var(--ink-2); font-size: 15px; line-height: 1.5; } .sub-text p + p { margin-top: 10px; }
.sub-text a { color: var(--ink); font-weight: 700; text-underline-offset: 3px; }
.cta-note.tap { cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.free-line { font-weight: 600; color: var(--ink); }

/* icon tile of the sub-pages (it came with the front door, which moved to the site on 26 Sep 2026) */
.lic { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--bg-2); color: var(--ink); } .lic svg { width: 20px; height: 20px; }