/* Cornerpiece — content-first UI with a blue brand accent. Mobile-first (390px), light + dark.
   Rules: blue for primary actions, selection and highlights; neutral ink for text; hairlines over
   shadows; sentence-case labels; motion only where it explains (page swipe, sheet slide). */
:root {
  --bg: #F7F7F5; --surface: #FFFFFF; --surface-2: #F0F0ED; --surface-3: #E4E4E0;
  --ink: #111113; --ink-2: #5C5C63; --ink-3: #93939A;
  --line: rgba(17, 17, 19, .09); --line-2: rgba(17, 17, 19, .16);
  --accent: #2563EB; --accent-soft: rgba(37, 99, 235, .10); --accent-2: #F59E0B;
  --brand-grad: linear-gradient(135deg, #1D4ED8 0%, #3B82F6 100%);
  --btn: #2563EB; --btn-ink: #FFFFFF;
  --ok: #2E8B57; --teal: #19827C; --gold: #D9991A; --danger: #C93A2E; --pink: #C64F78;
  --photo-bg: #FFFFFF;
  --shadow: 0 1px 2px rgba(17, 17, 19, .04);
  --shadow-lg: 0 18px 50px -18px rgba(17, 17, 19, .32);
  --glass: rgba(247, 247, 245, .82);
  --r: 14px; --r-sm: 10px;
  --tab-h: 58px; --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0C0C0D; --surface: #161617; --surface-2: #1E1E20; --surface-3: #2A2A2D;
    --ink: #F2F2F3; --ink-2: #A3A3AA; --ink-3: #6B6B72;
    --line: rgba(255, 255, 255, .08); --line-2: rgba(255, 255, 255, .15);
    --accent: #7AA2FF; --accent-soft: rgba(122, 162, 255, .15); --accent-2: #FBBF24;
    --brand-grad: linear-gradient(135deg, #1E40AF 0%, #2F65E0 100%);
    --btn: #2F65E0; --btn-ink: #FFFFFF;
    --ok: #4FBF85; --teal: #3DBDB5; --gold: #EDB43B; --danger: #F2685C; --pink: #EE7FA5;
    --photo-bg: #F2F1EE;
    --shadow: none; --shadow-lg: 0 18px 50px -14px rgba(0, 0, 0, .75);
    --glass: rgba(12, 12, 13, .8);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0C0C0D; --surface: #161617; --surface-2: #1E1E20; --surface-3: #2A2A2D;
  --ink: #F2F2F3; --ink-2: #A3A3AA; --ink-3: #6B6B72;
  --line: rgba(255, 255, 255, .08); --line-2: rgba(255, 255, 255, .15);
  --accent: #7AA2FF; --accent-soft: rgba(122, 162, 255, .15); --accent-2: #FBBF24;
  --brand-grad: linear-gradient(135deg, #1E40AF 0%, #2F65E0 100%);
  --btn: #2F65E0; --btn-ink: #FFFFFF;
  --ok: #4FBF85; --teal: #3DBDB5; --gold: #EDB43B; --danger: #F2685C; --pink: #EE7FA5;
  --photo-bg: #F2F1EE;
  --shadow: none; --shadow-lg: 0 18px 50px -14px rgba(0, 0, 0, .75);
  --glass: rgba(12, 12, 13, .8);
  color-scheme: dark;
}

/* ---------- base ---------- */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.45 var(--font); -webkit-font-smoothing: antialiased; overscroll-behavior-y: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: var(--ink); }
img { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); line-height: 1.15; letter-spacing: -.02em; font-weight: 650; }
h1 { font-size: 1.75rem; font-weight: 700; }
h2 { font-size: 1.12rem; }
h3 { font-size: 1rem; letter-spacing: -.01em; }
h4 { font-size: .9rem; }
p { margin: 0; }
.muted { color: var(--ink-2); } .faint { color: var(--ink-3); }
.small { font-size: .82rem; } .strong { font-weight: 600; }
.upper { font-size: .78rem; font-weight: 600; color: var(--ink-2); }
.mono { font-family: var(--mono); font-size: .85em; letter-spacing: 0; }
.center { text-align: center; } .right { align-self: flex-end; }
.grow { flex: 1; min-width: 0; } .pad { padding: 16px; } .pad-x { padding: 0 2px; } .pad-b { margin-bottom: 4px; }
.row { display: flex; } .row.gap { gap: 10px; } .gap-xs { gap: 6px; } .row.space { justify-content: space-between; } .center-v { align-items: center; }
.row.end { justify-content: flex-end; gap: 8px; } .row.center { justify-content: center; }
.stack { display: flex; flex-direction: column; gap: 12px; } .stack.tight { gap: 10px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ic { display: inline-flex; width: 1.2em; height: 1.2em; vertical-align: -.22em; flex: none; }
.ic svg { width: 100%; height: 100%; stroke-width: 1.8; }
.ic.flip { transform: rotate(180deg); }
.link, .linkbtn { color: var(--accent); font-weight: 550; }
.linkbtn { font-size: .86rem; display: inline-flex; align-items: center; gap: 4px; }
.footnote { font-size: .76rem; color: var(--ink-3); }

#app { max-width: 600px; margin: 0 auto; min-height: 100dvh; position: relative; }
.view { padding: calc(var(--safe-t) + 10px) 18px calc(var(--tab-h) + var(--safe-b) + 32px); display: flex; flex-direction: column; gap: 28px; }
.view.sub { gap: 24px; }
.view.bare { padding-bottom: calc(var(--safe-b) + 24px); }
.view > section { display: flex; flex-direction: column; gap: 10px; }

/* ---------- tab bar ---------- */
.tabbar { position: fixed; inset-inline-start: 0; inset-inline-end: 0; bottom: 0; z-index: 20; height: calc(var(--tab-h) + var(--safe-b)); padding: 0 6px var(--safe-b);
  display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; max-width: 600px; margin: 0 auto;
  background: var(--glass); backdrop-filter: saturate(160%) blur(20px); -webkit-backdrop-filter: saturate(160%) blur(20px); border-top: .5px solid var(--line-2); }
.tabbar[hidden] { display: none; }
.tab { display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--ink-3); font-size: .64rem; font-weight: 550; padding: 6px 0 2px; }
.tab .ic { width: 24px; height: 24px; }
.tab.on { color: var(--accent); }
.tab.on .ic svg { stroke-width: 2.1; }
.scan-btn { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--brand-grad); color: #fff; box-shadow: 0 4px 12px -4px rgba(37, 99, 235, .55); }
.scan-btn .ic { width: 22px; height: 22px; }
.tab.scan:active .scan-btn { opacity: .8; }

.timer-pill { position: fixed; z-index: 19; left: 50%; transform: translateX(-50%); bottom: calc(var(--tab-h) + var(--safe-b) + 8px);
  width: min(564px, calc(100% - 24px)); display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px;
  background: var(--btn); color: var(--btn-ink); box-shadow: var(--shadow-lg); font-weight: 550; font-size: .86rem; }
.timer-pill span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.timer-pill b { font-variant-numeric: tabular-nums; font-weight: 600; }
.timer-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: #34C77B; flex: none; }
.timer-pill.paused .dot { background: var(--gold); }

/* ---------- headers ---------- */
.topbar { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.topbar.big { padding-top: 6px; } .topbar.big h1 { font-size: 1.9rem; }
.iconbtn { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--surface-2); flex: none; color: var(--ink); }
.iconbtn:active { opacity: .7; }
.iconbtn .ic { width: 19px; height: 19px; }
.iconbtn.on { color: var(--pink); } .iconbtn.on svg { fill: currentColor; }
.iconbtn.sm { width: 32px; height: 32px; background: transparent; color: var(--ink-3); }
.iconbtn.plain { background: transparent; margin-inline-start: -8px; }
.hero { display: flex; flex-direction: column; gap: 18px; padding-top: 6px; }
.hero h1 { font-size: 1.9rem; }
.me-btn .av { width: 38px; height: 38px; font-size: .95rem; }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }

.stat-strip { display: grid; grid-template-columns: repeat(4, 1fr); border-top: .5px solid var(--line-2); border-bottom: .5px solid var(--line-2); padding: 12px 0; }
.stat-strip .stat { background: none; border: 0; padding: 0 4px; text-align: start; }
.stat-strip .stat + .stat { border-inline-start: .5px solid var(--line); padding-inline-start: 12px; }
.stat { min-width: 0; padding: 12px; border-radius: var(--r); background: var(--surface); border: .5px solid var(--line); }
.stat b { display: block; font: 650 1.1rem/1.25 var(--font-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat small { color: var(--ink-2); font-size: .72rem; }
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }

/* ---------- controls ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 46px; padding: 0 18px; border-radius: 12px; font-weight: 600; font-size: .93rem; transition: opacity .15s, background .15s; white-space: nowrap; }
.btn:active { opacity: .78; }
.btn .ic { width: 18px; height: 18px; }
.btn.primary { background: var(--btn); color: var(--btn-ink); }
.btn.accent { background: var(--btn); color: var(--btn-ink); }   /* --btn, not --accent: dark-mode accents are light, white text on them fails contrast */
.btn.ghost { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); }
.btn.plain { background: transparent; color: var(--ink-2); }
.btn.ghost.light { background: rgba(255, 255, 255, .12); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); }
.btn.danger { background: var(--danger); color: #fff; }
.danger-text { color: var(--danger) !important; }
.btn.sm { min-height: 34px; padding: 0 12px; font-size: .82rem; border-radius: 9px; }
.btn.lg { min-height: 50px; font-size: .98rem; }
.btn.block { width: 100%; }
.btn:disabled { opacity: .45; pointer-events: none; }
.btn.social { min-height: 50px; gap: 10px; }
.btn.social.apple { background: #000; color: #fff; }
.btn.social.google { background: #fff; color: #1F1F1F; box-shadow: inset 0 0 0 1px #DADCE0; }
:root[data-theme="dark"] .btn.social.apple { background: #fff; color: #000; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn.social.apple { background: #fff; color: #000; } }
.sicon { display: inline-flex; width: 18px; height: 18px; } .sicon svg { width: 100%; height: 100%; }

.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > span { font-size: .8rem; font-weight: 550; color: var(--ink-2); }
.field.center { align-items: center; }
.input, .field input, .field select, .field textarea, form.row input, .set-row select {
  width: 100%; min-height: 46px; padding: 11px 13px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface); outline: none; font-size: 16px; transition: border-color .15s; }
.field textarea { resize: vertical; }
.input:focus, .field input:focus, .field select:focus, .field textarea:focus, form.row input:focus { border-color: var(--ink); }
.input.bad, .field input.bad { border-color: var(--danger); }
.field-err { color: var(--danger); font-size: .78rem; }
.field-err:empty { display: none; }
.pw-wrap { position: relative; }
.pw-wrap .input { padding-inline-end: 64px; }
.eye { position: absolute; inset-inline-end: 6px; top: 50%; transform: translateY(-50%); font-size: .78rem; font-weight: 600; color: var(--ink-2); padding: 8px 10px; }
.pw-rules { list-style: none; padding: 0; margin: -4px 0 0; display: flex; gap: 16px; font-size: .78rem; color: var(--ink-3); }
.pw-rules li { display: flex; align-items: center; gap: 6px; }
.pw-rules li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; border: 1px solid currentColor; }
.pw-rules li.ok { color: var(--ok); } .pw-rules li.ok::before { background: currentColor; }
.check { display: flex; align-items: center; gap: 10px; font-size: .9rem; }
.check input, .set-row input[type=checkbox]:not(.switch) { width: 20px; height: 20px; accent-color: var(--ink); flex: none; }

.pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 6px; font-size: .72rem; font-weight: 600; background: var(--surface-2); color: var(--ink-2); white-space: nowrap; }
.pill .ic { width: 13px; height: 13px; }
.pill.ok { color: var(--ok); } .pill.warn { color: var(--accent); }
.demo-pill { font-size: .7rem; font-weight: 600; padding: 3px 8px; border-radius: 6px; background: var(--surface-2); color: var(--ink-2); }
.status { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 550; color: var(--ink-2); }
.status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); }
.status.purchased::before { background: var(--ink-2); } .status.active::before { background: var(--teal); }
.status.completed::before { background: var(--ok); } .status.wishlist::before { background: var(--pink); }

.card { background: var(--surface); border-radius: var(--r); padding: 16px; border: .5px solid var(--line-2); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 10px; }
.card.center { align-items: center; }
.nudge { gap: 12px; } .nudge .btn { align-self: flex-start; }
.group, .list { background: var(--surface); border-radius: var(--r); border: .5px solid var(--line-2); overflow: hidden; }

/* lists: the default way to show rows of things */
.list-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; text-align: start; width: 100%; min-height: 50px; position: relative; font-size: .93rem; }
.list-row + .list-row::before, .set-row + .set-row::before { content: ''; position: absolute; inset-inline-start: 14px; inset-inline-end: 0; top: 0; height: .5px; background: var(--line-2); }
a.list-row:active, button.list-row:active { background: var(--surface-2); }
.list-row.static { cursor: default; }
.list-row.on { color: var(--accent); }
.row-title { display: block; font-weight: 550; }
.row-sub { display: block; font-size: .78rem; color: var(--ink-2); }
.sheet .list-row { padding-inline-start: 2px; padding-inline-end: 2px; }
.sheet .list-row + .list-row::before { inset-inline-start: 2px; }

/* ---------- covers & tiles ---------- */
.cover { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-sm); background: var(--surface-2); }
.cover.photo { object-fit: contain; background: var(--photo-bg); padding: 7%; }
.cover.sm { width: 92px; flex: none; } .cover.xs { width: 56px; flex: none; border-radius: 8px; }
.dots { display: inline-flex; gap: 3px; } .dots i { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14); }
.scroller { display: grid; grid-auto-flow: column; grid-auto-columns: 38%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 18px; margin: 0 -18px; padding: 0 18px 4px; scrollbar-width: none; }
.scroller::-webkit-scrollbar { display: none; }
.scroller > * { scroll-snap-align: start; }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 12px; }
.tile { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tile strong { font-size: .86rem; font-weight: 550; line-height: 1.3; margin-top: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tile small { font-size: .76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile .btn { margin-top: 6px; }
.tile-img { position: relative; display: block; border-radius: var(--r-sm); box-shadow: inset 0 0 0 .5px var(--line-2); }
.tile-img .cover { box-shadow: inset 0 0 0 .5px var(--line-2); }
.badge { position: absolute; top: 6px; inset-inline-end: 6px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--surface); color: var(--ink-2); box-shadow: 0 0 0 .5px var(--line-2); }
.badge .ic { width: 13px; height: 13px; }
.badge .ic svg { stroke-width: 2.4; }
.badge.completed { background: var(--ok); color: #fff; box-shadow: none; } .badge.active { background: var(--teal); color: #fff; box-shadow: none; }
.badge.purchased { background: var(--surface); } .badge.wishlist { background: var(--pink); color: #fff; box-shadow: none; }

.active-card { display: flex; gap: 14px; background: var(--surface); border-radius: var(--r); padding: 10px; border: .5px solid var(--line-2); align-items: center; }
.active-card.live { border-color: var(--teal); }
.ac-img { position: relative; width: 84px; flex: none; }
.ac-img img { border-radius: 9px; aspect-ratio: 1; width: 100%; }
.live-dot { position: absolute; inset-inline-start: 5px; top: 5px; background: var(--teal); color: #fff; font-size: .58rem; font-weight: 650; padding: 2px 5px; border-radius: 5px; }
.ac-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ac-body strong { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-stats { display: flex; gap: 12px; font-size: .8rem; color: var(--ink-2); margin-top: 6px; }
.ac-stats span { display: inline-flex; gap: 4px; align-items: center; } .ac-stats b { color: var(--ink); font-variant-numeric: tabular-nums; font-weight: 600; }

.mini-post { display: flex; align-items: center; gap: 10px; padding: 12px 14px; position: relative; }
.mini-post + .mini-post::before { content: ''; position: absolute; inset-inline-start: 14px; inset-inline-end: 0; top: 0; height: .5px; background: var(--line-2); }
.mini-post > .ic { color: var(--ink-3); }
.feed-mini { background: var(--surface); border-radius: var(--r); border: .5px solid var(--line-2); overflow: hidden; }
.av { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: #fff; font-style: normal; font-weight: 600; flex: none; }
.av.xs { width: 20px; height: 20px; font-size: .62rem; } .av.sm { width: 30px; height: 30px; font-size: .8rem; } .av.md { width: 42px; height: 42px; } .av.xl { width: 80px; height: 80px; font-size: 1.9rem; }

/* ---------- catalog ---------- */
.sticky-tools { position: sticky; top: 0; z-index: 5; margin: -14px -18px 0; padding: calc(var(--safe-t) + 8px) 18px 10px; background: var(--glass); backdrop-filter: saturate(160%) blur(18px); -webkit-backdrop-filter: saturate(160%) blur(18px); display: flex; flex-direction: column; gap: 10px; border-bottom: .5px solid var(--line); }
.searchbar { display: flex; align-items: center; gap: 8px; background: var(--surface-2); border-radius: 10px; padding: 0 4px 0 11px; color: var(--ink-3); }
.searchbar input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; min-height: 40px; font-size: 16px; }
.searchbar input::placeholder { color: var(--ink-3); }
.searchbar .iconbtn { background: transparent; }
.chips { display: flex; gap: 6px; } .chips.wrap { flex-wrap: wrap; }
.chips.scroll { overflow-x: auto; margin: 0 -18px; padding: 0 18px 2px; scrollbar-width: none; } .chips.scroll::-webkit-scrollbar { display: none; }
.chip { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 10px 0 12px; border-radius: 8px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); font-weight: 550; font-size: .8rem; white-space: nowrap; flex: none; }
.chip.on { background: var(--btn); color: var(--btn-ink); box-shadow: none; }
.chip b { font-weight: 650; font-size: .74rem; opacity: .8; }
.chip b::before { content: '· '; }
.chip .caret { width: 14px; height: 14px; opacity: .6; }
.chip.clear { color: var(--accent); box-shadow: none; background: transparent; padding: 0 6px; }
.opt-list { display: flex; flex-direction: column; }
.opt { display: flex; align-items: center; gap: 10px; padding: 13px 2px; border-bottom: .5px solid var(--line-2); text-align: start; }
.opt span:not(.tick) { flex: 1; }
.opt .tick { opacity: 0; color: var(--ink); } .opt.on .tick { opacity: 1; }
.opt.on { font-weight: 600; }
.color-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.color-grid .opt { flex-direction: column; gap: 6px; border: 1px solid var(--line-2); border-radius: 10px; padding: 12px 4px; position: relative; font-size: .8rem; }
.color-grid .opt.on { border-color: var(--ink); }
.color-grid .tick { position: absolute; top: 5px; inset-inline-end: 6px; width: 15px; height: 15px; }
.sw { width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
.swatch { width: 32px; height: 32px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
.swatch.on { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink); }
.add-own { margin-top: 8px; }

/* ---------- segments ---------- */
.segments { display: flex; gap: 2px; background: var(--surface-2); padding: 2px; border-radius: 10px; }
.segments.scroll { overflow-x: auto; scrollbar-width: none; } .segments.scroll::-webkit-scrollbar { display: none; }
.seg { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 32px; padding: 0 10px; border-radius: 8px; font-weight: 550; font-size: .82rem; color: var(--ink-2); white-space: nowrap; }
.seg.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .1), 0 0 0 .5px var(--line); }
.seg b { font-size: .72rem; color: var(--ink-3); font-weight: 550; }
.seg-mini { display: inline-flex; background: var(--surface-2); padding: 2px; border-radius: 8px; }
.seg-mini button { padding: 5px 10px; border-radius: 6px; font-size: .78rem; font-weight: 550; color: var(--ink-2); }
.seg-mini button.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.tab-body { display: flex; flex-direction: column; gap: 14px; margin-top: -12px; }

.wall { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 12px; }
.wall-item { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.wall-item strong { font-size: .86rem; font-weight: 550; margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.frame { border-radius: var(--r-sm); overflow: hidden; box-shadow: inset 0 0 0 .5px var(--line-2); }
.frame img { aspect-ratio: 1; width: 100%; border-radius: 0; }

.showcases { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.showcase { background: var(--surface); border-radius: var(--r); overflow: hidden; border: .5px solid var(--line-2); display: flex; flex-direction: column; min-width: 0; }
.sc-mosaic { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 1px; aspect-ratio: 1; min-height: 0; overflow: hidden; background: var(--line); }
.sc-mosaic img { width: 100%; height: 100%; min-height: 0; object-fit: cover; aspect-ratio: auto; border-radius: 0; }
.sc-mosaic img.photo { padding: 0; object-fit: cover; }   /* every tile full-bleed, so mixed sources look like one set */
.sc-mosaic.n1 { grid-template-columns: 1fr; grid-template-rows: 1fr; } .sc-mosaic.n2 img { grid-row: span 2; } .sc-mosaic.n3 img:first-child { grid-row: span 2; }
.sc-mosaic.n0 { display: none; }
.sc-mosaic.big { border-radius: var(--r); overflow: hidden; border: .5px solid var(--line-2); aspect-ratio: 4/3; }
.sc-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px; }
.sc-body strong { font-size: .88rem; font-weight: 600; }
.sc-hero { display: flex; flex-direction: column; gap: 8px; }
.share-shelf { flex-direction: row; align-items: center; gap: 12px; }
.banner { display: flex; gap: 8px; align-items: center; padding: 10px 14px; border-radius: 10px; background: var(--surface-2); font-size: .86rem; }

/* ---------- puzzle page ---------- */
.gallery-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: -4px; }
.gallery { width: 100%; border-radius: var(--r); overflow: hidden; background: var(--photo-bg); border: .5px solid var(--line-2); touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: zoom-in; }
.gallery-img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.gallery-img.photo { object-fit: contain; padding: 6%; }
.gallery-dots { display: flex; gap: 6px; }
.gallery-dots button { width: 6px; height: 6px; border-radius: 50%; background: var(--line-2); padding: 0; }
.gallery-dots button.on { background: var(--ink); }
.pz-head { gap: 8px !important; }
.pz-head h1 { font-size: 1.6rem; line-height: 1.2; }
.brand-line { display: flex; align-items: center; justify-content: space-between; font-size: .86rem; color: var(--ink-2); font-weight: 550; }
.desc { color: var(--ink-2); font-size: .9rem; line-height: 1.55; }
.desc.clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.desc-wrap { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; margin-top: 2px; }
.specs { margin: 0; background: var(--surface); border-radius: var(--r); border: .5px solid var(--line-2); overflow: hidden; }
.spec { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 11px 14px; position: relative; font-size: .9rem; }
.spec + .spec::before { content: ''; position: absolute; inset-inline-start: 14px; inset-inline-end: 0; top: 0; height: .5px; background: var(--line-2); }
.spec dt { color: var(--ink-2); }
.spec dd { margin: 0; text-align: end; font-weight: 550; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stars { display: inline-flex; gap: 1px; color: var(--surface-3); }
.stars .st { display: inline-flex; width: 14px; height: 14px; }
.stars.md .st { width: 20px; height: 20px; } .stars.lg .st { width: 38px; height: 38px; padding: 2px; }
.stars .st svg { width: 100%; height: 100%; fill: currentColor; stroke: none; }
.stars .st.on { color: var(--gold); }
.buy { gap: 10px !important; }
.sub-h { margin-top: 8px; }

.start-card { gap: 12px; }
.stopwatch { align-items: stretch; gap: 6px; background: #151517; color: #F2F2F3; border-color: transparent; --btn: #F2F2F3; --btn-ink: #111113; }
.stopwatch .muted { color: rgba(242, 242, 243, .6); }
.sw-top { display: flex; justify-content: space-between; font-size: .82rem; }
.sw-clock { font: 600 3.6rem/1 var(--font-display); text-align: center; font-variant-numeric: tabular-nums; letter-spacing: -.03em; padding: 16px 0 12px; }
.stopwatch.running .sw-clock { color: #7BE0A9; }
.stopwatch.paused .sw-clock { color: var(--gold); }
.sw-btns { display: flex; gap: 8px; }
.stopwatch .btn.ghost { background: rgba(255, 255, 255, .08); color: #F2F2F3; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
.stopwatch .linkbtn { align-self: center; color: rgba(242, 242, 243, .72); padding: 6px; font-weight: 500; }
.stat-row { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--surface); border-radius: var(--r); border: .5px solid var(--line-2); overflow: hidden; }
.stat-row > div { padding: 11px 14px; min-width: 0; }
.stat-row > div + div { border-inline-start: .5px solid var(--line); }
.stat-row small { display: block; font-size: .74rem; color: var(--ink-2); }
.stat-row strong { font: 600 1.04rem/1.35 var(--font-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sessions { display: flex; flex-direction: column; }
.session { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 0; border-top: .5px solid var(--line); }
.se-strip { flex-basis: 100%; display: flex; gap: 6px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding-block-end: 2px; }
.se-strip::-webkit-scrollbar { display: none; }
.se-strip .se-photo { scroll-snap-align: start; }
.session strong { font-weight: 550; font-size: .9rem; }
.se-photo { width: 54px; height: 42px; border-radius: 7px; overflow: hidden; flex: none; background: var(--surface-2); display: grid; place-items: center; color: var(--ink-3); }
.se-photo img { width: 100%; height: 100%; object-fit: cover; }
.se-photo.add { border: 1px dashed var(--line-2); background: transparent; }
.end-btns .btn { min-height: 48px; }

.journey { display: grid; grid-template-columns: 38% 1fr; gap: 10px; }
.journey small { font-size: .76rem; color: var(--ink-2); }
.j-progress { display: flex; flex-direction: column; gap: 8px; max-height: 340px; overflow-y: auto; }
.j-thumb { position: relative; border-radius: 8px; overflow: hidden; }
.j-thumb img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.j-thumb span { position: absolute; inset-inline-start: 0; inset-inline-end: 0; bottom: 0; padding: 3px 6px; font-size: .62rem; font-weight: 550; color: #fff; background: linear-gradient(transparent, rgba(0, 0, 0, .6)); text-align: start; }
.j-final { display: flex; flex-direction: column; gap: 8px; }
.j-final-img { border-radius: 10px; overflow: hidden; position: relative; box-shadow: inset 0 0 0 .5px var(--line-2); }
.j-final-img img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 0; }
.j-final-img.none img { filter: grayscale(.6) opacity(.4); }
.j-final-img.none span { position: absolute; inset: auto 0 42% 0; text-align: center; font-weight: 600; font-size: .84rem; }
.quote { color: var(--ink-2); }
.swap-toggle { flex-direction: row; align-items: center; gap: 12px; }
.review { display: flex; gap: 10px; padding: 12px 14px; position: relative; }
.review + .review::before { content: ''; position: absolute; inset-inline-start: 14px; inset-inline-end: 0; top: 0; height: .5px; background: var(--line-2); }
.review .grow { display: flex; flex-direction: column; gap: 3px; }
.reviews { background: var(--surface); border-radius: var(--r); border: .5px solid var(--line-2); overflow: hidden; }

/* ---------- community ---------- */
.post { padding: 0; gap: 0; overflow: hidden; }
.post-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; }
.post-head strong { font-weight: 600; }
.post-media { position: relative; display: block; background: var(--photo-bg); }
.post-img { width: 100%; aspect-ratio: 4/3; border-radius: 0; }
.post-img.photo { padding: 5% 20%; }
.post-strip { display: flex; gap: 6px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 14px; padding: 8px 14px 0; scrollbar-width: none; overscroll-behavior-x: contain; }
.post-strip::-webkit-scrollbar { display: none; }
.post-thumb { flex: none; width: 76px; height: 57px; border-radius: 7px; overflow: hidden; scroll-snap-align: start; background: var(--surface-2); }
.post-thumb img { width: 100%; height: 100%; object-fit: cover; }
.post-body { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; }
.post-mosaic { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 4px; }
.post-mosaic img { border-radius: 6px; }
.post-foot { display: flex; justify-content: space-between; align-items: center; padding: 2px 14px 12px; }
.kudos { display: inline-flex; align-items: center; gap: 5px; font-weight: 550; font-size: .82rem; padding: 6px 10px; border-radius: 8px; background: var(--surface-2); color: var(--ink-2); }
.kudos .ic { width: 15px; height: 15px; }
.kudos.on { color: var(--accent); background: var(--accent-soft); }
.person { display: flex; align-items: center; gap: 10px; padding: 12px 14px; position: relative; }
.person + .person::before { content: ''; position: absolute; inset-inline-start: 14px; inset-inline-end: 0; top: 0; height: .5px; background: var(--line-2); }
.people { background: var(--surface); border-radius: var(--r); border: .5px solid var(--line-2); overflow: hidden; }
.person strong { font-weight: 600; }
.comments { display: flex; flex-direction: column; gap: 14px; max-height: 50vh; overflow-y: auto; }
.comment { display: flex; gap: 10px; }
.comment p { margin: 1px 0; }
form.row input { flex: 1; }
.profile-head { align-items: center; text-align: center; gap: 4px !important; padding-top: 4px; }
.profile-head .btn { margin-top: 10px; }
.milestone .ms-mark { width: 22px; height: 22px; border-radius: 50%; flex: none; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px var(--line-2); }
.milestone.done .ms-mark { background: var(--ok); color: #fff; box-shadow: none; }
.milestone .ms-mark .ic { width: 13px; height: 13px; } .milestone .ms-mark .ic svg { stroke-width: 2.6; }
.bar { display: block; height: 4px; border-radius: 2px; background: var(--surface-2); margin-top: 6px; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--ink); border-radius: 2px; }
.milestone.done .bar i { background: var(--ok); }
.tile.swap { background: var(--surface); border-radius: var(--r); padding: 8px; border: .5px solid var(--line-2); }

/* ---------- settings ---------- */
.settings { gap: 10px !important; }
.settings h2 { margin-top: 12px; }
.set-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; text-align: start; width: 100%; min-height: 50px; position: relative; }
.set-row strong { font-weight: 500; font-size: .93rem; }
.set-row select { width: auto; max-width: 50%; min-height: 36px; }
button.set-row:active { background: var(--surface-2); }
.switch { appearance: none; -webkit-appearance: none; width: 48px; height: 29px; border-radius: 999px; background: var(--surface-3); position: relative; transition: background .2s; cursor: pointer; flex: none; margin: 0; }
.switch::after { content: ''; position: absolute; top: 2px; inset-inline-start: 2px; width: 25px; height: 25px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .2s; }
.switch:checked { background: var(--ok); } .switch:checked::after { transform: translateX(19px); }
.hidden-file { position: absolute; width: 1px; height: 1px; opacity: 0; }

/* ---------- auth ---------- */
.auth { display: flex; flex-direction: column; gap: 20px; padding-top: 4px; min-height: calc(100dvh - var(--safe-t) - 40px); }
.auth-top { min-height: 44px; display: flex; align-items: center; }
.auth-head { display: flex; flex-direction: column; gap: 6px; }
.auth-head h1 { font-size: 1.8rem; }
.dev-banner { display: flex; gap: 8px; align-items: flex-start; font-size: .78rem; padding: 9px 12px; border-radius: 10px; background: var(--surface-2); color: var(--ink-2); }
.dev-banner .ic { margin-top: 1px; }
.divider { display: flex; align-items: center; gap: 12px; color: var(--ink-3); font-size: .78rem; }
.divider::before, .divider::after { content: ''; flex: 1; height: .5px; background: var(--line-2); }
.legal { font-size: .72rem; color: var(--ink-3); text-align: center; max-width: 300px; margin: 0 auto; }
.sent { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 20px 8px; }
.sent-ic { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--ink); }
.sent-ic .ic { width: 24px; height: 24px; }
.dev-inbox { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 12px; border: 1px dashed var(--line-2); }
.mail { display: flex; flex-direction: column; }
.dev-inbox .btn { align-self: flex-start; }
.choice { display: flex; gap: 14px; align-items: center; text-align: start; padding: 16px; border-radius: var(--r); background: var(--surface); border: .5px solid var(--line-2); }
.choice:active { background: var(--surface-2); }
.choice > .ic { width: 24px; height: 24px; }
.choice div { display: flex; flex-direction: column; gap: 2px; }
.setup { justify-content: center; }

.welcome { display: flex; flex-direction: column; gap: 28px; min-height: calc(100dvh - var(--safe-t) - 34px); justify-content: flex-end; }
.welcome-shelf { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.welcome-shelf .cover { border-radius: 10px; box-shadow: inset 0 0 0 .5px var(--line-2); }
.welcome-body { display: flex; flex-direction: column; gap: 14px; }
.welcome-body h1 { font-size: 1.95rem; letter-spacing: -.025em; }
.brandmark { display: flex; align-items: center; gap: 8px; font-weight: 650; font-size: .95rem; }
.brandmark .logo { width: 20px; height: 20px; color: var(--accent); }

/* ---------- overlays ---------- */
#overlays { position: relative; z-index: 50; }
.scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, .38); z-index: 50; animation: fade .2s; }
.scrim.center { display: grid; place-items: center; padding: 24px; }
.scrim.out, .sheet.out { animation: fadeout .2s forwards; }
.sheet { position: fixed; z-index: 51; inset-inline-start: 0; inset-inline-end: 0; bottom: 0; max-width: 600px; margin: 0 auto; max-height: 90dvh; display: flex; flex-direction: column;
  background: var(--surface); border-radius: 18px 18px 0 0; padding: 0 18px calc(18px + var(--safe-b)); animation: up .28s cubic-bezier(.2, .9, .3, 1); box-shadow: var(--shadow-lg); }
.sheet.tall { height: min(90dvh, var(--vvh, 100dvh)); }
.sheet.out { animation: down .2s forwards; }
.grab { width: 36px; height: 4px; border-radius: 2px; background: var(--line-2); margin: 8px auto 6px; flex: none; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 0 12px; flex: none; }
.sheet-head .iconbtn { width: 30px; height: 30px; }
.sheet-head .iconbtn .ic { width: 15px; height: 15px; }
.sheet-body { overflow-y: auto; padding: 2px 0 4px; overscroll-behavior: contain; }
.dialog { background: var(--surface); border-radius: 16px; padding: 20px; width: min(330px, 100%); display: flex; flex-direction: column; gap: 8px; box-shadow: var(--shadow-lg); animation: fade .15s; }
.dialog p { color: var(--ink-2); font-size: .92rem; }
.dialog .row { margin-top: 12px; }
@keyframes up { from { transform: translateY(100%); } }
@keyframes down { to { transform: translateY(100%); } }
@keyframes fade { from { opacity: 0; } }
@keyframes fadeout { to { opacity: 0; } }
.pick-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pick { position: relative; display: flex; flex-direction: column; gap: 4px; text-align: start; border-radius: 10px; padding: 4px; }
.pick-photo { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; background: var(--surface-2); }
.pick small { font-size: .7rem; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pick .tick { position: absolute; top: 8px; inset-inline-end: 8px; width: 22px; height: 22px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px var(--line-2); }
.pick .tick .ic { opacity: 0; width: 13px; height: 13px; }
.pick.on { background: var(--surface-2); } .pick.on .tick { background: var(--ink); color: var(--bg); box-shadow: none; } .pick.on .tick .ic { opacity: 1; }
.box-thumb { display: flex; }
.scan-hit { display: flex; gap: 14px; align-items: center; }
.scan-hit > div { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; min-width: 0; }
.scan-miss { display: flex; gap: 12px; align-items: flex-start; } .scan-miss > .ic { width: 30px; height: 30px; color: var(--ink-2); }
.celebrate { text-align: center; display: flex; flex-direction: column; gap: 6px; align-items: center; padding-top: 4px; }
.done-mark { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--ok); color: #fff; }
.done-mark .ic { width: 24px; height: 24px; } .done-mark .ic svg { stroke-width: 2.6; }

.toast { position: fixed; z-index: 80; left: 50%; transform: translateX(-50%); top: calc(var(--safe-t) + 12px); background: #1F2937; color: #fff; padding: 10px 14px; border-radius: 12px;
  font-weight: 500; font-size: .86rem; display: flex; gap: 14px; align-items: center; box-shadow: var(--shadow-lg); animation: fade .2s; max-width: calc(100% - 32px); }
.toast button { color: #9DB8FF; font-weight: 700; }
.toast.out { opacity: 0; transition: opacity .3s; }
.empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 40px 16px; color: var(--ink-2); }
.empty h4 { color: var(--ink); font-size: 1rem; }
.empty-piece { width: 40px; height: 40px; color: var(--surface-3); margin-bottom: 4px; }
.empty .btn { margin-top: 10px; }

.lightbox { position: fixed; inset: 0; z-index: 70; background: rgba(0, 0, 0, .94); display: grid; place-items: center; animation: fade .2s; touch-action: none; overscroll-behavior: contain; }
.lb-cap { position: absolute; bottom: calc(24px + var(--safe-b)); color: #fff; font-weight: 500; font-size: .86rem; }
.lb-x { position: absolute; top: calc(var(--safe-t) + 12px); inset-inline-end: 12px; background: rgba(255, 255, 255, .15); color: #fff; }
.lb-nav { position: absolute; top: 50%; width: 42px; height: 42px; margin-top: -21px; border-radius: 50%; background: rgba(255, 255, 255, .15); color: #fff; display: grid; place-items: center; }
.lb-nav.l { inset-inline-start: 10px; } .lb-nav.r { inset-inline-end: 10px; } .lb-nav.r .ic { transform: rotate(180deg); }

/* ---------- camera ---------- */
.camera { position: fixed; inset: 0; z-index: 60; background: #000; color: #fff; display: flex; flex-direction: column; animation: fade .2s; }
.camera.out { animation: fadeout .2s forwards; }
.cam-top { padding: calc(var(--safe-t) + 14px) 16px 10px; text-align: center; font-size: 1rem; font-weight: 600; }
.cam-stage { position: relative; flex: 1; overflow: hidden; display: grid; place-items: center; }
.cam-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cam-reticle { position: relative; width: min(82%, 380px); aspect-ratio: 2.2/1; border-radius: 16px; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .5); border: 2px solid rgba(255, 255, 255, .9); transition: border-color .2s; }
.cam-stage.hit .cam-reticle { border-color: #34C77B; }
.laser { position: absolute; inset-inline-start: 6%; inset-inline-end: 6%; top: 50%; height: 1.5px; background: rgba(255, 90, 54, .9); }
.cam-stage.nocam .cam-reticle { display: none; }
.cam-fallback { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; padding: 24px; max-width: 320px; color: #ddd; }
.cam-fallback > .ic { width: 40px; height: 40px; opacity: .7; }
.cam-status { text-align: center; padding: 10px 16px; font-size: .88rem; color: #ccc; min-height: 40px; }
.cam-manual { display: flex; gap: 8px; padding: 0 16px 8px; }
.cam-manual input { flex: 1; min-width: 0; min-height: 44px; border-radius: 10px; border: 0; padding: 0 12px; background: rgba(255, 255, 255, .14); color: #fff; font-size: 16px; }
.cam-manual input::placeholder { color: rgba(255, 255, 255, .55); }
.cam-manual .btn.primary { background: #fff; color: #000; }
.cam-controls { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 12px 24px calc(20px + var(--safe-b)); }
.cam-side { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: .72rem; font-weight: 550; color: #ddd; }
.cam-side .ic { width: 24px; height: 24px; }
.shutter { width: 70px; height: 70px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px #000, 0 0 0 6px #fff; }
.shutter:active { opacity: .8; }
.shutter-space { width: 70px; }
.cam-review { position: absolute; inset: 0; background: #000; display: flex; flex-direction: column; justify-content: center; gap: 20px; padding: 20px 16px calc(24px + var(--safe-b)); }
.cam-review img { max-height: 72dvh; object-fit: contain; margin: 0 auto; border-radius: 8px; }
.cam-review .btn.primary { background: #fff; color: #000; }

@media (min-width: 640px) {
  .scroller { grid-auto-columns: 28%; }
  .grid, .wall { grid-template-columns: repeat(3, 1fr); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

.load-more { height: 1px; }
.load-more[hidden] { display: none; }

/* ---------- activity chart (profile) ---------- */
.act-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.act-head h2 { margin: 0; }
.act-readout { margin: 6px 0 10px; min-height: 1.2em; }
.act-chart { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2px; height: 128px; padding: 12px 10px 8px; background: var(--surface); border: .5px solid var(--line-2); border-radius: var(--r); }
.act-col { display: flex; flex-direction: column; align-items: stretch; gap: 6px; min-width: 0; height: 100%; padding: 0; border-radius: 6px; }
.act-track { position: relative; flex: 1; display: flex; align-items: flex-end; justify-content: center; border-bottom: 1px solid var(--line-2); }
.act-track i { display: block; width: min(14px, 70%); background: var(--accent); border-radius: 4px 4px 0 0; opacity: .85; transition: opacity .15s; }
.act-track i.zero { height: 0; }
.act-col.on .act-track i, .act-col:hover .act-track i { opacity: 1; }
.act-chart:has(.act-col.on) .act-col:not(.on) .act-track i { opacity: .35; }
.act-max { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); font-size: .68rem; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.act-mon { font-size: .66rem; color: var(--ink-3); text-align: center; line-height: 1; }
.act-col.on .act-mon { color: var(--ink); font-weight: 600; }
.photos-link { margin-top: 4px; background: var(--surface); border: .5px solid var(--line-2); border-radius: var(--r); gap: 10px; }

/* ---------- photo gallery ---------- */
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.photo-grid .ph { margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ph-img { position: relative; display: block; width: 100%; aspect-ratio: 1; padding: 0; border-radius: var(--r-sm); overflow: hidden; background: var(--surface-2); }
.ph-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph-tag { position: absolute; inset-inline-start: 6px; bottom: 6px; padding: 2px 6px; border-radius: 6px; font-size: .64rem; font-weight: 600; background: rgba(0, 0, 0, .55); color: #fff; }
.photo-grid figcaption { display: flex; flex-direction: column; min-width: 0; font-size: .78rem; line-height: 1.25; }
.photo-grid figcaption a { font-weight: 550; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.photo-grid figcaption small { font-size: .7rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- community: swap requests, tab badge ---------- */
.seg-dot { display: inline-grid; place-items: center; min-width: 17px; height: 17px; padding: 0 5px; border-radius: 9px; background: var(--btn); color: var(--btn-ink) !important; font-size: .66rem !important; font-weight: 700 !important; }
.swap-req { gap: 8px; }
.swap-req .quote { margin: 0; }
.swap-req .ic { width: 15px; height: 15px; vertical-align: -3px; }

/* ---------- notifications ---------- */
.bell { position: relative; }
.bell-n, .tab-badge { position: absolute; display: grid; place-items: center; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--btn); color: var(--btn-ink); font-size: .62rem; font-weight: 700; box-shadow: 0 0 0 2px var(--bg); }
.bell-n { top: -3px; inset-inline-end: -4px; }
.tab { position: relative; }
.tab-badge { top: 2px; inset-inline-start: calc(50% + 6px); }
.notifs .notif { gap: 12px; align-items: center; }
.notif.unread { background: var(--accent-soft); }
.notif-av { position: relative; flex: none; }
.notif-kind { position: absolute; inset-inline-end: -4px; bottom: -4px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--surface); box-shadow: 0 0 0 1px var(--line-2); color: var(--ink-2); }
.notif-kind .ic { width: 11px; height: 11px; }
.notif-text { display: block; font-size: .88rem; line-height: 1.3; overflow-wrap: anywhere; }
.unread-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.swap-req.unread { box-shadow: inset 3px 0 0 var(--accent), var(--shadow); }
.swap-req > a { color: inherit; }

/* (swap chat styles live in the "social" section at the end) */
.steps { margin: 0; padding-inline-start: 1.3em; display: flex; flex-direction: column; gap: 8px; line-height: 1.4; }

/* ---------- My puzzles: sort + favorites ranking ---------- */
.list-tools { flex-wrap: wrap; }
.sort-chip .ic { width: 15px; height: 15px; }
.fav-list { margin: 0; padding: 0; list-style: none; }
.fav-row { gap: 10px; padding: 8px 10px; }
.fav-rank { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: .8rem; font-weight: 700; }
.fav-row .clip { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fav-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fav-moves { display: flex; flex: none; gap: 2px; }
.fav-moves .iconbtn:disabled { opacity: .3; }
.wall-item .frame { position: relative; }
.fav-badge { position: absolute; top: 6px; inset-inline-start: 6px; padding: 2px 7px; border-radius: 10px; background: var(--btn); color: var(--btn-ink); font-size: .7rem; font-weight: 700; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }

/* ---------- friends activity ---------- */
.av-stack { display: inline-flex; }
.av-stack .av, .av-stack > a > .av { box-shadow: 0 0 0 2px var(--surface); }
.av-stack > * + * { margin-inline-start: -6px; }
.tile-img .av-stack { position: absolute; inset-inline-start: 6px; bottom: 6px; }
.av-more { display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 4px; border-radius: 11px; background: var(--surface); color: var(--ink-2); font-size: .64rem; font-weight: 700; font-style: normal; box-shadow: 0 0 0 2px var(--surface); }
.friends-line { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--r-sm); background: var(--accent-soft); }
.friends-line .small { line-height: 1.35; }
.stack-xs { display: flex; flex-direction: column; gap: 6px; }
.fav-scroller { list-style: none; margin: 0; padding: 0; }

/* ---------- My puzzles: hero header ---------- */
.shelf-hero { margin: 0 -18px; padding: calc(var(--safe-t) + 6px) 18px 16px; background: var(--brand-grad); color: #fff; border-radius: 0 0 22px 22px; box-shadow: 0 10px 30px -18px rgba(29, 78, 216, .7); }
.view:has(> .shelf-hero) { padding-top: 0; }
.shelf-hero h1 { color: #fff; }
.hero-btn { background: rgba(255, 255, 255, .18); color: #fff; }
.hero-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.hero-stats > div { display: flex; flex-direction: column; padding: 8px 10px; border-radius: 12px; background: rgba(255, 255, 255, .14); min-width: 0; }
.hero-stats b { font-size: 1.15rem; font-weight: 700; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; }
.hero-stats small { font-size: .66rem; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stack-lg { display: flex; flex-direction: column; gap: 22px; }

/* ---------- the bookcase: wooden shelves that scroll sideways ---------- */
:root { --wood: #B98652; --wood-dark: #8B5E34; --wood-edge: #6E4826; --shelf-back: #F3EADF; --shelf-shadow: rgba(80, 50, 20, .22); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --wood: #7A5434; --wood-dark: #5A3C22; --wood-edge: #3F2914; --shelf-back: #241D17; --shelf-shadow: rgba(0, 0, 0, .55); } }
:root[data-theme="dark"] { --wood: #7A5434; --wood-dark: #5A3C22; --wood-edge: #3F2914; --shelf-back: #241D17; --shelf-shadow: rgba(0, 0, 0, .55); }
.bookcase { padding: 4px 12px 2px; border-radius: 16px; background: var(--shelf-back); border: 8px solid var(--wood); border-top-width: 10px; border-bottom-width: 12px;
  box-shadow: inset 0 12px 22px -16px var(--shelf-shadow), 0 1px 0 var(--wood-edge), 0 14px 24px -18px rgba(0, 0, 0, .45); }
.bc-shelf + .bc-shelf { margin-top: 6px; }
.bc-head { display: flex; align-items: baseline; justify-content: space-between; padding: 10px 2px 0; }
.bc-head h2 { font-size: .95rem; display: flex; align-items: center; gap: 6px; }
.bc-count { font-size: .7rem; font-weight: 700; color: var(--btn-ink); background: var(--btn); border-radius: 9px; padding: 1px 7px; }
.bc-all { font-size: .8rem; font-weight: 600; color: var(--accent); }
.bc-row { display: flex; align-items: flex-end; gap: 10px; min-height: 114px; padding: 10px 4px 0; margin: 0 -12px; padding-inline: 14px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
.bc-row::-webkit-scrollbar { display: none; }
.bc-box { flex: none; width: 82px; scroll-snap-align: start; -webkit-touch-callout: none; user-select: none; }
.bc-cover { position: relative; display: block; width: 82px; border-radius: 3px 3px 1px 1px; overflow: hidden; background: var(--surface-2);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1), 3px 0 0 -1px rgba(0, 0, 0, .12), 2px 4px 8px -2px rgba(0, 0, 0, .35); }
.bc-cover img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; border-radius: 0; padding: 0; background: none; }
.bc-cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(255, 255, 255, .22) 0, rgba(255, 255, 255, 0) 30%, rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, .14) 100%); pointer-events: none; }
.bc-box:active .bc-cover { transform: translateY(-2px); }
.bc-badge { position: absolute; z-index: 1; top: 4px; inset-inline-end: 4px; display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 4px; border-radius: 10px; font-size: .64rem; font-weight: 800; color: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .35); }
.bc-badge .ic { width: 12px; height: 12px; }
.bc-badge.live { background: var(--accent); } .bc-badge.live.ticking { background: var(--ok); }
.bc-badge.wish { background: var(--pink); } .bc-badge.done { background: var(--ok); } .bc-badge.rank { background: var(--accent-2); color: #3A2A00; }
.bc-empty { align-self: center; margin: 0 auto 12px; max-width: 260px; text-align: center; font-size: .8rem; color: var(--ink-2); }
.bc-plank { height: 13px; margin: 0 -12px; border-radius: 2px; background: linear-gradient(180deg, var(--wood) 0%, var(--wood-dark) 75%, var(--wood-edge) 100%);
  box-shadow: 0 7px 9px -5px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .25); }

/* ---------- trophy case: glass cabinet with brass plaques ---------- */
.trophy-case { position: relative; padding: 14px 14px 12px; border-radius: 16px; border: 9px solid #4A2F1A; color: #E8EEF9; overflow: hidden;
  background: radial-gradient(120% 70% at 50% -10%, rgba(255, 244, 210, .28), rgba(255, 244, 210, 0) 60%), linear-gradient(180deg, #1C2638 0%, #0E1522 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), 0 14px 26px -18px rgba(0, 0, 0, .6); }
.trophy-case::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, rgba(255, 255, 255, .09) 0%, rgba(255, 255, 255, 0) 28%, rgba(255, 255, 255, 0) 62%, rgba(255, 255, 255, .05) 75%, rgba(255, 255, 255, 0) 86%); }
.tc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.tc-head h2 { color: #F5E6B8; font-size: 1rem; letter-spacing: .02em; }
.tc-new { background: rgba(255, 255, 255, .12); color: #fff; box-shadow: none; }
.tc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
.trophy { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; padding-bottom: 10px; border-bottom: 6px solid #3A2614; -webkit-touch-callout: none; }
.trophy-art { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 2px; width: 100%; aspect-ratio: 1; border-radius: 6px; overflow: hidden; background: #0B111C;
  box-shadow: 0 10px 18px -8px rgba(0, 0, 0, .7), 0 0 0 2px rgba(245, 230, 184, .25); }
.trophy-art.n1 { grid-template-columns: 1fr; grid-template-rows: 1fr; } .trophy-art.n2 { grid-template-rows: 1fr; } .trophy-art.n3 > :first-child { grid-row: span 2; }
.trophy-art img { width: 100%; height: 100%; min-height: 0; object-fit: cover; aspect-ratio: auto; border-radius: 0; padding: 0; background: none; }
.plaque { display: flex; flex-direction: column; align-items: center; max-width: 100%; padding: 4px 10px; border-radius: 3px; text-align: center; color: #3A2A08;
  background: linear-gradient(180deg, #F3D98A 0%, #C99A3A 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 2px 4px rgba(0, 0, 0, .4); }
.plaque b { font-size: .74rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .plaque small { font-size: .62rem; opacity: .8; }
.tc-empty { position: relative; z-index: 1; margin: 6px 0 4px; font-size: .82rem; color: #C9D3E6; }
.tc-all { position: relative; z-index: 1; display: block; margin-top: 10px; font-size: .78rem; font-weight: 600; color: #9DB8FF; }

/* ---------- the attic: dusty beams, sepia boxes ---------- */
.attic { position: relative; padding: 14px 14px 12px; border-radius: 16px; color: #E9DFD0; overflow: hidden;
  background: radial-gradient(rgba(255, 240, 210, .07) 1px, transparent 1.4px) 0 0 / 11px 11px, radial-gradient(90% 60% at 80% 0%, rgba(255, 220, 160, .16), transparent 60%),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .18) 0 3px, transparent 3px 92px), linear-gradient(180deg, #4A3B2D 0%, #2E251D 100%);
  box-shadow: inset 0 18px 24px -18px rgba(0, 0, 0, .7); }
.attic::before { content: ''; position: absolute; top: 0; inset-inline-end: 0; width: 70px; height: 70px; opacity: .35; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 70' fill='none' stroke='%23fff' stroke-width='.7'%3E%3Cpath d='M70 0L20 50M70 0L35 62M70 0L8 30M70 0L50 66M70 0L5 12'/%3E%3Cpath d='M58 12Q52 8 47 6M52 22Q42 16 36 10M46 32Q33 24 25 16M40 42Q24 31 14 22'/%3E%3C/svg%3E") no-repeat top right / contain; }
.attic-head { display: flex; align-items: baseline; justify-content: space-between; }
.attic-head h2 { color: #F1E4CF; font-size: 1rem; }
.attic-all { font-size: .8rem; font-weight: 600; color: #E9C98F; }
.attic-sub { margin: 2px 0 10px; font-size: .76rem; color: #C2B49E; }
.attic-row { display: flex; align-items: flex-end; gap: 12px; overflow-x: auto; margin: 0 -14px; padding: 0 14px 4px; scrollbar-width: none; }
.attic-row::-webkit-scrollbar { display: none; }
.attic-box { flex: none; width: 76px; display: flex; flex-direction: column; align-items: center; gap: 5px; -webkit-touch-callout: none; transform: rotate(-1.5deg); }
.attic-box:nth-child(even) { transform: rotate(1.2deg); }
.attic-box .bc-cover { width: 76px; filter: sepia(.65) grayscale(.35) contrast(.9) brightness(.82); box-shadow: 2px 4px 8px -2px rgba(0, 0, 0, .6); }
.attic-box .bc-cover::before { content: ''; position: absolute; inset: 0; z-index: 1; background: radial-gradient(rgba(255, 255, 255, .22) .7px, transparent 1.2px) 0 0 / 7px 7px; mix-blend-mode: screen; }
.attic-box small { font-size: .64rem; color: #CDBFA8; text-align: center; }
.attic-empty { margin: 6px 0 4px; font-size: .82rem; font-style: italic; color: #B8A88F; }

/* ---------- long-press quick actions + 3D viewer ---------- */
[data-quick] { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
[data-quick] img { -webkit-user-drag: none; pointer-events: none; }
.quick-head { padding: 4px 2px 2px; }
.quick-head .clip { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.box3d-sheet .sheet-body { display: flex; flex-direction: column; }
.box3d-stage { position: relative; height: min(62dvh, 520px); border-radius: 16px; overflow: hidden; display: grid; place-items: center;
  background: radial-gradient(80% 60% at 50% 35%, var(--accent-soft), transparent 70%), var(--surface-2); }
.box3d-stage canvas { width: 100% !important; height: 100% !important; display: block; cursor: grab; }
.box3d-stage canvas:active { cursor: grabbing; }
.box3d-note { position: absolute; inset-inline-start: 10px; inset-inline-end: 10px; bottom: 8px; margin: 0; text-align: center; font-size: .72rem; }
.box3d-msg { margin: 0; }
.gallery { position: relative; }
.gallery-3d { position: absolute; z-index: 2; inset-inline-end: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 11px 0 9px; border-radius: 16px; background: var(--brand-grad); color: #fff; font-weight: 700; font-size: .8rem; box-shadow: 0 6px 14px -6px rgba(29, 78, 216, .8); }
.gallery-3d .ic { width: 16px; height: 16px; }
.gallery-3d[hidden] { display: none; } .gallery-3d.fade-in { animation: fade .25s ease-out; }
/* shelf/trophy/attic boxes show the art full-bleed (beats the catalog's letterboxed .cover.photo) */
.bc-cover img.cover, .bc-cover img.cover.photo, .trophy-art img.cover, .trophy-art img.cover.photo { object-fit: cover; padding: 0; background: var(--surface-2); }

/* ---------- timelapse recording screen ---------- */
.view:has(> .rec) { padding: 0; }
.rec { position: fixed; inset: 0; z-index: 30; background: #000; color: #fff; display: flex; flex-direction: column; justify-content: space-between; padding: calc(var(--safe-t) + 10px) 16px calc(var(--safe-b) + 16px); }
.rec-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
.rec::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 0, 0, .55) 0%, transparent 22%, transparent 62%, rgba(0, 0, 0, .7) 100%); pointer-events: none; }
.rec-top { display: flex; align-items: center; gap: 10px; }
.rec-top .clip { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rec-back { background: rgba(0, 0, 0, .45); color: #fff; }
.rec-status { display: block; font-size: .78rem; opacity: .85; }
.rec-dot { flex: none; width: 12px; height: 12px; border-radius: 50%; background: #EF4444; box-shadow: 0 0 0 4px rgba(239, 68, 68, .3); }
.rec.paused .rec-dot { background: #9CA3AF; box-shadow: none; }
.rec-mid { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: auto; margin-bottom: 18px; text-shadow: 0 2px 10px rgba(0, 0, 0, .6); }
.rec-time { font-size: 3.2rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.rec-frames { font-size: .85rem; opacity: .9; }
.rec-err { max-width: 280px; text-align: center; background: rgba(0, 0, 0, .6); padding: 12px 14px; border-radius: 12px; }
.rec-bottom { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; }
.rec-btn { height: 48px; padding: 0 14px; border-radius: 24px; font-weight: 700; font-size: .9rem; color: #fff; background: rgba(255, 255, 255, .16); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.rec-btn:disabled { opacity: .45; }
.rec-btn.primary { background: var(--brand-grad); }
.rec-btn[aria-label] { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; padding: 0; background: #fff; color: #111; }
.rec-btn[aria-label] .ic { width: 26px; height: 26px; }
.rec-tip { margin: 10px 0 0; text-align: center; font-size: .72rem; opacity: .75; }
.rec.paused .rec-tip::before { content: attr(data-paused); font-weight: 700; }
.rec-cta { margin-top: 10px; background: var(--accent-soft); color: var(--accent); font-weight: 650; }

/* ---------- timelapse + Fastest finishes cards ---------- */
.tl-card { gap: 10px; }
.tl-ok { color: var(--ok); display: flex; align-items: center; gap: 4px; }
.tl-ok .ic { width: 15px; height: 15px; }
.tl-thumb { position: relative; display: block; width: 100%; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; background: #000; }
.tl-thumb video { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.tl-play { position: absolute; inset: 0; margin: auto; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .92); color: #111; box-shadow: 0 6px 20px rgba(0, 0, 0, .35); }
.tl-play .ic { width: 24px; height: 24px; margin-inline-start: 3px; }
.tl-bar { height: 6px; }
.tl-player { width: 100%; max-height: 72dvh; border-radius: 12px; background: #000; }
.lb-card h3 .ic { width: 18px; height: 18px; color: var(--accent-2); }
.lb-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.lb-row { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-top: .5px solid var(--line); }
.lb-row:first-child { border-top: 0; }
.lb-row.me { background: var(--accent-soft); border-radius: 10px; }
.lb-rank { width: 26px; text-align: center; font-weight: 700; font-size: .9rem; flex: none; }
.lb-row .clip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .88rem; }
.lb-time { font-variant-numeric: tabular-nums; font-size: .9rem; }
.lb-ver { color: var(--ok); display: grid; } .lb-ver .ic { width: 14px; height: 14px; }
.post-video { background: #000; object-fit: contain; }

/* ---------- right-to-left (Hebrew, Arabic) ---------- */
/* directional icons point the other way (ui.js icon() tags each with data-i) */
[dir="rtl"] .ic[data-i="back"] svg, [dir="rtl"] .ic[data-i="chevron"] svg { transform: scaleX(-1); }
[dir="rtl"] .switch:checked::after, [dir="rtl"] input.switch:checked::before { transform: translateX(-19px); }
[dir="rtl"] .attic-box { transform: rotate(1.5deg); } [dir="rtl"] .attic-box:nth-child(even) { transform: rotate(-1.2deg); }
[dir="rtl"] .bc-cover::after { background: linear-gradient(260deg, rgba(255, 255, 255, .22) 0, rgba(255, 255, 255, 0) 30%, rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, .14) 100%); }
[dir="rtl"] body { font-family: var(--font); }
html[lang="ar"] body { font-family: -apple-system, "SF Arabic", "Geeza Pro", "Segoe UI", "Noto Sans Arabic", Tahoma, system-ui, sans-serif; }
html[lang="he"] body { font-family: -apple-system, "SF Hebrew", "Segoe UI", "Noto Sans Hebrew", Arial, system-ui, sans-serif; }
html[lang="zh-Hans"] body { font-family: -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif; }

/* ================================================================ social
   Community feed, post cards + composer, comments, profiles, notifications, swap requests + chat,
   showcases. Highlights use var(--accent)/--btn (css/themes.css re-tints them per section).
   Logical properties throughout (RTL-safe). Everything is laid out for a 390px-wide iPhone. */
.clip { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clip2, .clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.social { display: flex; flex-direction: column; gap: 14px; }
.sec-title { font-size: .8rem; font-weight: 650; color: var(--ink-2); letter-spacing: 0; padding-inline-start: 2px; }

/* -- feed -- */
.compose-prompt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 10px 10px 12px; border-radius: var(--r); background: var(--surface); border: .5px solid var(--line-2); box-shadow: var(--shadow); color: var(--ink-3); font-size: .9rem; text-align: start; }
.compose-prompt:active { background: var(--surface-2); }
.compose-ic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); flex: none; }
.compose-ic .ic { width: 17px; height: 17px; }
.feed-filter { align-self: flex-start; }
.feed { display: flex; flex-direction: column; gap: 14px; }

/* -- post card -- */
.post { background: var(--surface); border-radius: var(--r); border: .5px solid var(--line-2); box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; padding: 0; gap: 0; }
.post-head { display: flex; align-items: center; gap: 6px; padding: 10px 6px 10px 12px; }
.post-who { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.post-who strong { display: block; font-size: .9rem; font-weight: 600; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.post-meta { display: block; font-size: .76rem; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.post-media { display: block; width: 100%; position: relative; background: var(--photo-bg); text-align: start; }
.post-img.own { padding: 0; object-fit: cover; }
.post-media.vid { background: #000; }
.post-video { display: block; width: 100%; aspect-ratio: 4 / 5; max-height: 72dvh; object-fit: contain; background: #000; }
.media-badge { position: absolute; top: 10px; inset-inline-start: 10px; padding: 3px 9px; border-radius: 999px; background: rgba(0, 0, 0, .58); color: #fff; font-size: .7rem; font-weight: 650; pointer-events: none; }
.vid-sound { position: absolute; bottom: 10px; inset-inline-end: 10px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 0, 0, .58); color: #fff; pointer-events: none; }
.vid-sound .ic { width: 16px; height: 16px; }
.post-car { position: relative; background: #000; }
.car-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.car-track::-webkit-scrollbar { display: none; }
.car-slide { display: block; flex: 0 0 100%; aspect-ratio: 1; scroll-snap-align: center; background: var(--surface-2); }
.car-count { position: absolute; top: 10px; inset-inline-end: 10px; padding: 3px 9px; border-radius: 999px; background: rgba(0, 0, 0, .58); color: #fff; font-size: .7rem; font-weight: 650; font-variant-numeric: tabular-nums; pointer-events: none; }
.post-strip { padding: 8px 12px 0; }
.post-text { padding: 10px 14px 0; font-size: .93rem; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.post-text.clamp { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.post-text-wrap { display: flex; flex-direction: column; align-items: flex-start; }
.post-text-wrap .linkbtn { padding: 2px 14px 0; }
.post-puzzle { display: flex; align-items: center; gap: 10px; margin: 10px 12px 0; padding: 8px 10px 8px 8px; border-radius: 12px; background: var(--surface-2); min-width: 0; }
.post-puzzle .cover.xs { width: 44px; border-radius: 7px; }
.post-puzzle .grow { min-width: 0; }
.post-puzzle > .ic { color: var(--ink-3); }
.post-showcase { display: block; }
.post-showcase .sc-mosaic { aspect-ratio: 2 / 1; }
.post-showcase .post-body { padding: 10px 14px 0; gap: 2px; }
.post-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px 12px; }
.post-cmt { display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border-radius: 8px; font-weight: 550; font-size: .82rem; color: var(--ink-2); }
.post-cmt .ic, .post-foot .kudos .ic { width: 16px; height: 16px; }
.post-cmt:active, .kudos:active { opacity: .7; }

/* -- comments (sheet + post page) -- */
.comments { max-height: none; overflow: visible; gap: 12px; }
.comment { align-items: flex-start; gap: 8px; }
.cmt-bubble { flex: 1; min-width: 0; padding: 7px 12px 8px; border-radius: 16px; border-start-start-radius: 6px; background: var(--surface-2); }
.cmt-meta { display: flex; align-items: baseline; gap: 6px; }
.cmt-meta strong { font-size: .82rem; font-weight: 600; }
.cmt-meta small { font-size: .72rem; color: var(--ink-3); }
.cmt-bubble p { margin: 1px 0 0; font-size: .9rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.cmt-compose { display: flex; align-items: center; gap: 8px; padding: 8px 0 2px; background: var(--surface); }
.cmt-compose input { flex: 1; min-width: 0; height: 40px; padding: 0 14px; border-radius: 20px; border: .5px solid var(--line-2); background: var(--surface-2); font-size: 16px; outline: none; color: var(--ink); }
.cmt-compose input:focus { border-color: var(--accent); }
.cmt-compose.sticky { position: sticky; bottom: calc(var(--tab-h) + var(--safe-b)); z-index: 4; margin: 0 -18px; padding: 8px 18px; background: var(--glass); backdrop-filter: saturate(160%) blur(18px); -webkit-backdrop-filter: saturate(160%) blur(18px); border-top: .5px solid var(--line-2); }
.send-btn { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--btn); color: var(--btn-ink); transition: opacity .15s; }
.send-btn:disabled { opacity: .35; }
.send-btn .ic { width: 18px; height: 18px; } .send-btn .ic svg { stroke-width: 2.4; }

/* -- composer (finish post + moments) -- */
.composer .sheet-body { padding-bottom: 8px; }
.cmp-puzzle { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 14px; background: var(--surface-2); min-width: 0; }
.cmp-puzzle .grow { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cmp-cover { width: 52px; height: 52px; flex: none; border-radius: 10px; object-fit: cover; background: var(--surface); aspect-ratio: auto; }
.cmp-cover.photo { object-fit: contain; padding: 4px; background: var(--photo-bg); }
.cmp-text { position: relative; border-bottom: .5px solid var(--line-2); }
.cmp-text textarea { display: block; width: 100%; min-height: 96px; resize: none; border: 0; outline: none; background: transparent; color: var(--ink); font: inherit; font-size: 16px; line-height: 1.4; padding: 4px 2px 20px; }
.cmp-count { position: absolute; bottom: 4px; inset-inline-end: 2px; font-size: .7rem; font-variant-numeric: tabular-nums; }
.cmp-media:empty { display: none; }
.cmp-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.cmp-thumb { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--surface-2); }
.cmp-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cmp-x { position: absolute; top: 4px; inset-inline-end: 4px; z-index: 1; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(0, 0, 0, .62); color: #fff; }
.cmp-x .ic { width: 13px; height: 13px; } .cmp-x .ic svg { stroke-width: 2.6; }
.cmp-video-wrap { position: relative; border-radius: 14px; overflow: hidden; background: #000; }
.cmp-video { display: block; width: 100%; max-height: 46dvh; object-fit: contain; background: #000; }
.cmp-video-wrap .cmp-x { top: 8px; inset-inline-end: 8px; }
.cmp-tools { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -18px; padding: 2px 18px; }
.cmp-tools::-webkit-scrollbar { display: none; }
.cmp-tool { flex: none; display: inline-flex; flex-direction: column; align-items: center; gap: 4px; min-width: 70px; padding: 10px 8px; border-radius: 12px; background: var(--surface-2); color: var(--ink-2); font-size: .72rem; font-weight: 600; }
.cmp-tool .ic { width: 20px; height: 20px; color: var(--accent); }
.cmp-tool:active { opacity: .7; }

/* -- in-app clip recorder (camera overlay) -- */
.shutter.rec { background: #E5484D; transition: border-radius .2s, transform .2s; }
.shutter.rec.on { border-radius: 14px; transform: scale(.62); }
.clip-clock { font-size: .8rem; font-weight: 550; opacity: .85; margin-top: 2px; font-variant-numeric: tabular-nums; }
.clip-bar { position: absolute; top: 12px; inset-inline: 16px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .25); overflow: hidden; }
.clip-progress { display: block; width: 0; height: 100%; background: #E5484D; transition: width .2s linear; }
.clip-review-video { width: 100%; max-height: 72dvh; object-fit: contain; border-radius: 8px; background: #000; }

/* -- people + profiles -- */
.people:empty, .people[hidden] { display: none; }
.person .btn.sm { min-width: 92px; }
.profile-bio { max-width: 34ch; margin-top: 4px; }
.follow-btn { min-width: 128px; }

/* -- notifications -- */
.notifs .notif { padding: 10px 14px; }
.notif-kind.k-kudos { background: var(--accent); color: #fff; box-shadow: 0 0 0 2px var(--surface); }
.notif-kind.k-follow { background: var(--btn); color: var(--btn-ink); box-shadow: 0 0 0 2px var(--surface); }

/* -- swap requests -- */
.swap-req { padding: 12px; gap: 10px; }
.swap-req-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.swap-req-main .grow { display: flex; flex-direction: column; gap: 2px; }
.swap-req-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex: none; }
.swap-req.closed { opacity: .72; }
.tile.swap .clip { max-width: 100%; }

/* -- swap chat (Messages-style) -- */
.view.chat-view { gap: 0; padding-bottom: 0; min-height: 100dvh; }
body:has(.view.chat-view) .tabbar { display: none; }   /* a chat is full-screen, like Messages */
.chat-top { position: sticky; top: 0; z-index: 6; margin: calc(-1 * (var(--safe-t) + 10px)) -18px 0; padding: calc(var(--safe-t) + 6px) 12px 8px; background: var(--glass); backdrop-filter: saturate(160%) blur(18px); -webkit-backdrop-filter: saturate(160%) blur(18px); border-bottom: .5px solid var(--line-2); }
.chat-who { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.chat-who strong { display: block; font-size: .95rem; line-height: 1.2; }
.chat-who small { display: block; font-size: .74rem; }
.swap-sum { display: flex; flex-direction: column; gap: 10px; margin: 12px 0 4px; padding: 12px; border-radius: var(--r); background: var(--surface); border: .5px solid var(--line-2); }
.swap-pair { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; }
.swap-side { display: flex; align-items: center; gap: 8px; min-width: 0; }
.swap-side .cover.xs { width: 44px; border-radius: 7px; }
.swap-side .grow { display: flex; flex-direction: column; min-width: 0; }
.swap-side small { font-size: .7rem; }
.swap-side strong { font-size: .8rem; font-weight: 600; line-height: 1.25; }
.swap-none { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 7px; border: 1px dashed var(--line-2); color: var(--ink-3); }
.swap-none .ic { width: 16px; height: 16px; }
.swap-arrows { color: var(--accent); display: grid; } .swap-arrows .ic { width: 18px; height: 18px; }
.chat { display: flex; flex-direction: column; gap: 2px; padding: 6px 0 12px; flex: 1; }
.chat-intro { text-align: center; font-size: .74rem; color: var(--ink-3); padding: 6px 0 2px; }
.chat-stamp { text-align: center; font-size: .72rem; font-weight: 550; color: var(--ink-3); margin: 12px 0 4px; }
.msg { max-width: 78%; padding: 7px 12px; border-radius: 18px; font-size: .95rem; line-height: 1.35; }
.msg p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg.first { margin-top: 6px; }
.msg.them { align-self: flex-start; background: var(--surface-2); color: var(--ink); }
.msg.me { align-self: flex-end; background: var(--btn); color: var(--btn-ink); }
.msg.them:not(.first) { border-start-start-radius: 6px; } .msg.them:not(.last) { border-end-start-radius: 6px; } .msg.them.last { border-end-start-radius: 4px; }
.msg.me:not(.first) { border-start-end-radius: 6px; } .msg.me:not(.last) { border-end-end-radius: 6px; } .msg.me.last { border-end-end-radius: 4px; }
.msg-tag { display: block; margin-bottom: 1px; font-size: .66rem; font-weight: 650; opacity: .75; }
.chat-safety { text-align: center; font-size: .72rem; color: var(--ink-3); padding: 4px 12px 8px; }
.chat-safety .ic { width: 12px; height: 12px; }
.chat-compose { position: sticky; bottom: 0; z-index: 6; display: flex; align-items: flex-end; gap: 8px; margin: 0 -18px; padding: 8px 12px calc(8px + var(--safe-b)); background: var(--glass); backdrop-filter: saturate(160%) blur(18px); -webkit-backdrop-filter: saturate(160%) blur(18px); border-top: .5px solid var(--line-2); }
.chat-compose textarea { flex: 1; min-width: 0; min-height: 38px; max-height: 120px; resize: none; padding: 8px 14px; border-radius: 19px; border: .5px solid var(--line-2); background: var(--surface); color: var(--ink); font: inherit; font-size: 16px; line-height: 1.3; outline: none; }
.chat-compose textarea:focus { border-color: var(--accent); }
.chat-compose .send-btn { margin-bottom: 2px; }
.chat-closed { text-align: center; font-size: .8rem; color: var(--ink-3); padding: 16px 0 calc(24px + var(--safe-b)); }

/* -- showcases -- */
.sc-frame { position: relative; }
.sc-empty { display: grid; place-items: center; aspect-ratio: 1; background: var(--surface-2); color: var(--ink-3); }
.sc-empty .ic { width: 24px; height: 24px; }
.sc-lock { position: absolute; top: 8px; inset-inline-end: 8px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(0, 0, 0, .58); color: #fff; }
.sc-lock .ic { width: 14px; height: 14px; }
.sc-hero .pill .ic { width: 12px; height: 12px; }
.sc-order .sc-row { gap: 10px; padding: 8px 6px 8px 10px; min-height: 0; }
.sc-order .sc-row .cover.xs { width: 40px; }
.sc-rank { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: .76rem; font-weight: 700; }
.sc-order .fav-moves .iconbtn { width: 30px; height: 30px; }
.sc-public .set-row { cursor: pointer; }
.sc-public-sub { display: block; margin-top: 2px; font-weight: 400; }
.share-banner .brand-dot { display: inline-flex; width: 20px; height: 20px; color: var(--accent); flex: none; }
.share-banner .brand-dot svg { width: 100%; height: 100%; }
.cta-card { align-items: center; text-align: center; }

/* ---------- launch splash (index.html #splash; js/app.js holdSplash/dropSplash) ----------
   Matches the native launch screen: app background + the corner piece centred, tilted -8°. The piece
   then clicks into place (lift → settle), breathes softly while the first sync runs, and on hand-over
   lifts away while the app fades up. Reduced motion: a plain cross-fade. */
.splash { --piece: #2563EB; position: fixed; inset: 0; z-index: 75; display: grid; place-items: center; background: var(--bg); transition: opacity .42s ease .06s; }
.splash[hidden] { display: none; }
:root[data-theme="dark"] .splash { --piece: #3B6FE8; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .splash { --piece: #3B6FE8; } }
.splash-logo { width: min(168px, 44vw); transition: transform .45s cubic-bezier(.3, 0, .2, 1), opacity .4s ease; }
.splash-piece { display: block; width: 100%; height: auto; fill: var(--piece); overflow: visible; transform-origin: 50% 50%; transform: rotate(-8deg);
  animation: piece-settle .72s cubic-bezier(.2, .8, .2, 1) .12s forwards, piece-breathe 2.4s ease-in-out 1.4s infinite; }
@keyframes piece-settle {
  0% { transform: rotate(-8deg) scale(1); }
  38% { transform: rotate(-3deg) scale(1.06) translateY(-4%); }
  72% { transform: rotate(0deg) scale(.97) translateY(0); }
  100% { transform: rotate(0deg) scale(1); }
}
@keyframes piece-breathe { 0%, 100% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(0deg) scale(1.035); } }
.splash-word { position: absolute; left: 0; right: 0; top: calc(50% + min(84px, 22vw) + 22px); margin: 0; text-align: center; font: 650 1.05rem/1 var(--font-display); letter-spacing: .01em; color: var(--ink-2);
  opacity: 0; animation: splash-word .5s ease .7s forwards; }
@keyframes splash-word { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.splash-note { position: absolute; left: 24px; right: 24px; top: calc(50% + min(84px, 22vw) + 56px); margin: 0; text-align: center; font-size: .82rem; color: var(--ink-3); opacity: 0; transition: opacity .5s ease; }
.splash-note.on { opacity: 1; }
.splash.again { animation: fade .25s ease; }
.splash.again .splash-piece { animation: piece-breathe 2.4s ease-in-out infinite; transform: none; }
.splash.again .splash-word { animation: none; opacity: 1; }
.splash.out { opacity: 0; pointer-events: none; }
.splash.out .splash-logo { transform: scale(1.18); opacity: 0; }
.splash.out .splash-word, .splash.out .splash-note { opacity: 0; transition: opacity .2s; }
body.app-enter #view { animation: app-enter .5s cubic-bezier(.2, .8, .2, 1) .08s backwards; }
body.app-enter #tabbar { animation: fade .45s ease .12s backwards; }
@keyframes app-enter { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .splash-piece, .splash.again .splash-piece { animation: none !important; transform: none; }
  .splash-word { animation: none !important; opacity: 1; }
  .splash.out { transition: opacity .3s ease !important; }
  .splash.out .splash-logo { transform: none; }
  body.app-enter #view, body.app-enter #tabbar { animation: none !important; }
}

/* ---------- comments v2: author label, time · Reply, clamp, "…" menu, feed preview ---------- */
.comment { display: flex; }
.cmt-av { flex: none; padding-top: 2px; }
.cmt-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cmt-main .cmt-bubble { flex: none; align-self: flex-start; max-width: 100%; -webkit-touch-callout: none; }
.cmt-meta a { color: var(--ink); }
.cmt-author { font-size: .66rem; font-weight: 700; letter-spacing: .02em; padding: 1px 6px; border-radius: 6px; background: var(--accent-soft); color: var(--accent); }
.cmt-text.clamp { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.cmt-more-text { margin-top: 2px; }
.cmt-acts { display: flex; align-items: center; gap: 14px; padding-inline-start: 12px; font-size: .74rem; color: var(--ink-3); }
.cmt-act { font-weight: 650; font-size: .74rem; color: var(--ink-2); padding: 4px 0; }
.cmt-more { margin-top: 1px; }
.cmt-sheet .cmt-compose { padding-bottom: 6px; border-top: .5px solid var(--line); margin-inline: -18px; padding-inline: 18px; }
.cmt-compose.sticky { padding-bottom: 8px; }
.cmt-preview { display: flex; flex-direction: column; gap: 3px; padding: 0 14px 12px; margin-top: -4px; }
.cmt-all { align-self: flex-start; font-size: .82rem; color: var(--ink-3); padding: 2px 0; }
.cmt-line { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-align: start; font-size: .86rem; line-height: 1.35; color: var(--ink); overflow-wrap: anywhere; }
.cmt-line b { font-weight: 650; }
.kudos.pop .ic { animation: kudos-pop .32s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes kudos-pop { 0% { transform: scale(1); } 45% { transform: scale(1.35) rotate(-10deg); } 100% { transform: scale(1); } }

/* ---------- Home: friends puzzling now ---------- */
.fn-list { display: flex; flex-direction: column; background: var(--surface); border-radius: var(--r); border: .5px solid var(--line-2); overflow: hidden; }
.fn-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 14px; position: relative; }
.fn-row + .fn-row::before { content: ''; position: absolute; inset-inline-start: 68px; inset-inline-end: 0; top: 0; height: .5px; background: var(--line-2); }
.fn-av { position: relative; flex: none; }
.fn-dot { position: absolute; inset-inline-end: -1px; bottom: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 2px var(--surface); animation: fn-pulse 1.8s ease-in-out infinite; }
@keyframes fn-pulse { 50% { box-shadow: 0 0 0 2px var(--surface), 0 0 0 6px color-mix(in srgb, var(--ok) 22%, transparent); } }
.fn-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; }
.fn-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.fn-who { font-size: .78rem; color: var(--ink-2); }
.fn-row.live .fn-who { color: var(--ok); font-weight: 600; }
.fn-title { font-size: .92rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fn-sub { font-size: .74rem; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fn-cover { width: 52px; height: 52px; object-fit: cover; border-radius: 8px; flex: none; }
.fn-empty { display: flex; flex-direction: row; align-items: center; gap: 12px; padding: 12px 14px; }
.fn-empty p { margin: 0; color: var(--ink-2); }
.fn-empty-ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); flex: none; }
.fn-empty-ic .ic { width: 18px; height: 18px; }

/* ---------- sheets: swipe down to dismiss + keyboard-aware (ui.js sheet / keyboardInset) ----------
   --kb = px of the layout viewport hidden behind the on-screen keyboard, --vvh = visible height,
   html.kb-open while it's up (set only while a sheet / composer holds keyboardInset). */
.sheet { bottom: var(--kb, 0px); max-height: min(90dvh, var(--vvh, 100dvh));
  transition: bottom .25s cubic-bezier(.2, .9, .3, 1), height .25s cubic-bezier(.2, .9, .3, 1), max-height .25s cubic-bezier(.2, .9, .3, 1); }
.sheet.full { height: min(calc(100dvh - var(--safe-t) - 12px), var(--vvh, 100dvh)); max-height: none; }
.sheet.tall > .sheet-body, .sheet.full > .sheet-body { flex: 1; min-height: 0; }
html.kb-open .sheet { padding-bottom: 10px; }   /* the home-indicator inset is under the keyboard */
.grab, .sheet-head { touch-action: none; }
.grab { position: relative; }
.grab::before { content: ''; position: absolute; inset: -10px -64px; }   /* a bigger target for the drag handle */

/* comments sheet: list scrolls, composer pinned to the very bottom (safe area), rides the keyboard */
.sheet.cmts { padding-bottom: calc(6px + var(--safe-b)); }
html.kb-open .sheet.cmts { padding-bottom: 6px; }
.sheet.cmts > .sheet-body { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.cmt-sheet { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.cmt-sheet .comments { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 0 14px; }
.cmt-sheet .cmt-compose { flex: none; }

/* post page: the comment bar sits at the bottom (above the tab bar) and rides the keyboard */
.view.post-view { min-height: 100dvh; padding-bottom: calc(var(--tab-h) + var(--safe-b)); }
.view.post-view > .cmt-compose.sticky { margin-top: auto; }
.cmt-compose.sticky { transition: bottom .25s cubic-bezier(.2, .9, .3, 1); }
html.kb-open .cmt-compose.sticky { bottom: var(--kb); }
/* room to scroll the last content above a lifted composer */
html.kb-open .view.post-view, html.kb-open .view.chat-view { padding-bottom: var(--kb); }
/* swap chat composer */
.chat-compose { bottom: var(--kb, 0px); transition: bottom .25s cubic-bezier(.2, .9, .3, 1); }
html.kb-open .chat-compose { padding-bottom: 8px; }

/* ---------- photo slots: placeholder + spinner until loaded, fade in, tap to retry (ui.js photoSlot) ---------- */
.img-slot { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; background: var(--surface-2); }
.img-slot > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .22s ease; }
.img-slot.loaded > img { opacity: 1; }
.img-slot.err > img, .img-slot.loaded > .spinner, .img-slot.err > .spinner { display: none; }
.spinner { position: absolute; inset: 0; margin: auto; width: 26px; height: 26px; border-radius: 50%;
  border: 2.5px solid color-mix(in srgb, var(--ink-3) 30%, transparent); border-top-color: var(--ink-2); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes spin-pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .spinner { animation: spin-pulse 1.8s ease-in-out infinite !important; border-top-color: color-mix(in srgb, var(--ink-3) 30%, transparent); background: color-mix(in srgb, var(--ink-3) 18%, transparent); }
}
.img-retry { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 12px; text-align: center; color: var(--ink-2); font-size: .82rem; font-weight: 550; cursor: pointer; }
.img-retry small { font-size: .74rem; font-weight: 450; color: var(--ink-3); }
.img-retry .ic { width: 20px; height: 20px; margin-bottom: 2px; }
/* lightbox */
.lb-stage { position: absolute; inset: 0; display: flex; padding: calc(var(--safe-t) + 60px) 0 calc(var(--safe-b) + 60px); will-change: transform; }
.lb-slot { flex: 1; height: auto; background: transparent; }
.lb-slot > img { object-fit: contain; }
.lb-slot > .spinner { border-color: rgba(255, 255, 255, .22); border-top-color: rgba(255, 255, 255, .9); }
@media (prefers-reduced-motion: reduce) { .lb-slot > .spinner { border-top-color: rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .18); } }
.lb-slot .img-retry { color: rgba(255, 255, 255, .9); }
.lb-slot .img-retry small { color: rgba(255, 255, 255, .6); }
.lb-cap { z-index: 1; pointer-events: none; }

/* ---------- reported → hidden from you, with Undo ---------- */
.post-hidden { display: flex; align-items: center; gap: 10px; padding: 12px; padding-inline-start: 14px; border-radius: var(--r); background: var(--surface); border: .5px dashed var(--line-2); color: var(--ink-2); font-size: .86rem; line-height: 1.35; }
.post-hidden p { margin: 0; min-width: 0; }
.post-hidden > .ic { width: 16px; height: 16px; flex: none; color: var(--ink-3); }
.post-hidden .btn { flex: none; }
.cmt-hidden { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px; background: var(--surface-2); color: var(--ink-2); font-size: .8rem; line-height: 1.35; }
.cmt-hidden > .ic { width: 14px; height: 14px; flex: none; color: var(--ink-3); }
.cmt-hidden .linkbtn { flex: none; }