/* UA Porto Hub Mini App
   Colours come from Telegram theme vars (--tg-theme-*), with light/dark fallbacks keyed on
   html[data-scheme] (set from WebApp.colorScheme) for a plain browser.
   Text colours that Telegram ships below WCAG AA (hint, link, destructive on white) are
   derived with color-mix so body text stays >= 4.5:1 in both themes. */

:root {
  --bg: var(--tg-theme-secondary-bg-color, #efeff4);
  --surface: var(--tg-theme-section-bg-color, var(--tg-theme-bg-color, #ffffff));
  --text: var(--tg-theme-text-color, #000000);
  --hint: var(--tg-theme-hint-color, #8e8e93);
  --link: var(--tg-theme-link-color, #007aff);
  --btn: var(--tg-theme-button-color, #007aff);
  --btn-text: var(--tg-theme-button-text-color, #ffffff);
  --danger: var(--tg-theme-destructive-text-color, #ff3b30);
  --sep: var(--tg-theme-section-separator-color, rgba(60, 60, 67, .29));
  --tab-bg: var(--tg-theme-bottom-bar-bg-color, var(--tg-theme-header-bg-color, #f7f7f7));
  --ok: #34c759;
  --lk: 78%;                 /* how much of the theme link colour survives in --link-text */
  --dk: 70%;                 /* same for destructive text */
  --tk: 12%;                 /* tint strength */
  --shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 2px 10px rgba(0, 0, 0, .04);
  --hair: rgba(60, 60, 67, .22);

  /* AA-safe derived colours (fallbacks first, color-mix overrides when supported) */
  --muted: var(--hint);
  --quiet: var(--hint);
  --link-text: var(--link);
  --danger-text: var(--danger);
  --btn-fill: var(--btn);
  --danger-fill: var(--danger);
  --tint: rgba(0, 122, 255, .12);
  --skel: rgba(127, 127, 127, .16);

  --r-lg: 14px;
  --r-md: 12px;
  --pad: 16px;
  --top: var(--tg-chrome-top, 0px);
  --bottom: var(--tg-chrome-bottom, 0px);
  --safe-b: max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px));
  --tabs-h: calc(56px + var(--safe-b));
}
html[data-scheme="dark"] {
  --bg: var(--tg-theme-secondary-bg-color, #1c1c1d);
  --surface: var(--tg-theme-section-bg-color, var(--tg-theme-bg-color, #2c2c2e));
  --text: var(--tg-theme-text-color, #ffffff);
  --hint: var(--tg-theme-hint-color, #98989e);
  --link: var(--tg-theme-link-color, #3e88f7);
  --btn: var(--tg-theme-button-color, #3e88f7);
  --danger: var(--tg-theme-destructive-text-color, #eb5545);
  --sep: var(--tg-theme-section-separator-color, rgba(84, 84, 88, .65));
  --tab-bg: var(--tg-theme-bottom-bar-bg-color, var(--tg-theme-header-bg-color, #1a1a1a));
  --lk: 68%;
  --dk: 66%;
  --tk: 10%;
  --shadow: none;
  --hair: rgba(255, 255, 255, .16);
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
  :root, html[data-scheme="dark"] {
    --muted: color-mix(in srgb, var(--text) 64%, var(--bg));
    --quiet: color-mix(in srgb, var(--text) 52%, var(--bg));
    --link-text: color-mix(in srgb, var(--link) var(--lk), var(--text));
    --danger-text: color-mix(in srgb, var(--danger) var(--dk), var(--text));
    --btn-fill: color-mix(in srgb, var(--btn) 86%, #000000);
    --danger-fill: color-mix(in srgb, var(--danger) 84%, #000000);
    --tint: color-mix(in srgb, var(--btn) var(--tk), var(--surface));
    --skel: color-mix(in srgb, var(--text) 9%, var(--surface));
  }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
@supports (font: -apple-system-body) { html { font: -apple-system-body; } }  /* iOS Dynamic Type */
/* macOS Telegram resolves -apple-system-body to 13px; Dynamic Type only matters on touch devices. */
@media (pointer: fine) { html { font-size: 16px; } }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--bg);
}
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow-wrap: break-word;
}
body.sheet-open { overflow: hidden; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }
h1, h2, h3, p { margin: 0; }
img { display: block; }
.ic { flex: none; display: block; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:focus-visible { outline: 2px solid var(--link-text); outline-offset: 2px; border-radius: 6px; }

#view { padding-top: var(--top); }
.screen {
  padding: 12px var(--pad) calc(32px + var(--bottom) + var(--safe-b));
  max-width: 640px;
  margin: 0 auto;
}
body.with-tabs .screen { padding-bottom: calc(var(--tabs-h) + var(--bottom) + 24px); }
body.toast-on .screen { padding-bottom: calc(32px + var(--bottom) + var(--safe-b) + var(--toast-pad, 0px)); }
body.toast-on.with-tabs .screen { padding-bottom: calc(var(--tabs-h) + var(--bottom) + 24px + var(--toast-pad, 0px)); }

/* ---------- typography ---------- */
.page-title { font-size: 1.625rem; line-height: 1.2; font-weight: 700; letter-spacing: -.01em; }
.page-title-lg { font-size: 2rem; margin: 4px 0 16px; }
.page-title-lg + .page-note { margin-top: -8px; }
.page-head { display: flex; align-items: center; gap: 12px; margin: 4px 0 14px; }
.page-lead { color: var(--muted); font-size: .9375rem; margin: 6px 0 18px; }
.sec-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 1.1875rem; font-weight: 700; letter-spacing: -.005em;
  margin: 26px 0 10px;
}
.sec-count {
  font-size: .8125rem; font-weight: 600; color: var(--muted);
  background: var(--surface); border-radius: 10px; padding: 1px 8px; min-width: 24px; text-align: center;
}
.caption { color: var(--muted); font-size: .8125rem; margin: 6px 4px 8px; }

/* ---------- home ---------- */
.home-head { margin: 4px 0 0; }
.home-head-row { display: flex; align-items: center; gap: 12px; }
.app-icon { flex: none; width: 48px; height: 48px; border-radius: 12px; box-shadow: var(--shadow); }
.home-title { flex: 1; min-width: 0; min-height: 2.285714em; font-size: 1.75rem; line-height: 1.142857; font-weight: 800; letter-spacing: -.6px; }
.home-title-city { display: block; }
.founder-link { display: flex; align-items: center; gap: 12px; margin-top: 16px; min-height: 56px; padding: 8px 12px 8px 8px; border-radius: 28px; background: var(--surface); box-shadow: var(--shadow); color: var(--text); text-decoration: none; }
.founder-monogram { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--tint); color: var(--link-text); font-size: 17px; font-weight: 700; }
.founder-text { flex: 1; min-width: 0; }
.founder-text b { display: block; font-size: 15px; line-height: 20px; font-weight: 600; }
.founder-text span { display: block; font-size: 13px; line-height: 18px; color: var(--muted); }
.founder-text em { font-style: normal; font-weight: 600; color: var(--link-text); }

.home-card { margin-top: 16px; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); }
.launch { padding: 16px 16px 4px; }
.launch > :last-child.btn-filled { margin-bottom: 12px; }
.launch h2 { margin-top: 0; font-size: 20px; line-height: 24px; font-weight: 700; letter-spacing: -.2px; }
.launch p { margin-top: 8px; font-size: 15px; line-height: 20px; color: var(--muted); }
.launch .btn-filled { width: 100%; margin-top: 16px; }
.launch .launch-link { width: 100%; min-height: 44px; margin-top: 4px; font-size: 15px; }
.grow { display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 12px 12px 12px 16px; }
.grow-text { flex: 1; min-width: 0; }
.grow-text b { display: block; font-size: 17px; line-height: 22px; font-weight: 600; }
.grow-text span { display: block; font-size: 13px; line-height: 18px; color: var(--muted); }
.grow .btn { flex: none; min-height: 44px; padding: 0 16px; font-size: 15px; }

.search {
  position: relative; display: flex; align-items: center; gap: 8px;
  background: var(--surface); border-radius: var(--r-md);
  min-height: 46px; padding: 0 4px 0 12px; margin-bottom: 4px;
  color: var(--muted); box-shadow: var(--shadow);
}
.home .search { min-height: 48px; margin: 16px 0 0; }
.home .search-input { height: 48px; }
.search:focus-within { box-shadow: 0 0 0 2px color-mix(in srgb, var(--btn) 55%, transparent); }
.search-input {
  flex: 1; min-width: 0; height: 46px; border: 0; background: none; outline: none;
  font-size: max(16px, 1rem); color: var(--text); padding: 0;
  -webkit-appearance: none; appearance: none;
}
.search-input::placeholder { color: transparent; }
/* Visual placeholder is a separate span so it can be a touch smaller than the 16px input
   text (which must stay >= 16px or iOS zooms on focus) and still fit the brief's copy. */
.search-ph {
  position: absolute; left: 40px; right: 12px; top: 50%; transform: translateY(-50%);
  color: var(--muted); font-size: .9375rem; pointer-events: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.search.has-value .search-ph { display: none; }
.search-input::-webkit-search-cancel-button { display: none; }
.search-clear {
  display: none; border: 0; background: none; color: var(--muted);
  width: 44px; height: 44px; align-items: center; justify-content: center; flex: none;
}
.search.has-value .search-clear { display: flex; }

.cats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px 8px;
}
.cat {
  display: flex; flex-direction: column; align-items: stretch; gap: 8px; min-width: 0;
  border: 0; background: none; padding: 0; min-height: 44px; color: var(--text);
}
.cat-ic {
  width: 58px; height: 58px; border-radius: 17px;
  display: grid; place-items: center;
  background: var(--surface); color: var(--link-text);
  box-shadow: var(--shadow);
}
.cat-ic { position: relative; }
.cat-count {
  color: var(--hint); font-size: .75rem; font-weight: 500; line-height: 1.3;
}
.cats .cat-ic { width: auto; height: 64px; border-radius: 16px; }

.home .sec { margin-top: 32px; }
.home .sec-title { margin: 0; font-size: 20px; line-height: 24px; letter-spacing: -.2px; }
.sec-sub { margin-top: 4px; font-size: 13px; line-height: 18px; color: var(--muted); }
.home .cats { margin-top: 16px; }
.home .sec > .hscroll { margin-top: 14px; }
.home .mini { width: 160px; padding: 16px; border-radius: 16px; }
.home-rows { margin-top: 32px; border-radius: 16px; }
.home-rows .row { min-height: 64px; gap: 12px; padding: 12px 12px 12px 16px; }
.home-rows .row + .row::before { left: 68px; }
.home-rows .row-ic { width: 40px; height: 40px; border-radius: 12px; background: var(--tint); }
.home-rows .row-label { font-size: 15px; line-height: 20px; font-weight: 600; }
.home-rows .row-label small { font-size: 13px; line-height: 18px; font-weight: 400; }
.cta { margin-top: 16px; padding: 16px; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); }
.cta b { display: block; font-size: 17px; line-height: 22px; font-weight: 600; }
.cta span { display: block; margin-top: 4px; font-size: 15px; line-height: 20px; color: var(--muted); }
.cta .btn { margin-top: 16px; }

.hscroll {
  display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory;
  margin: 0 calc(var(--pad) * -1); padding: 2px var(--pad) 8px;
  scroll-padding-inline: var(--pad);
  scrollbar-width: none;
}
.hscroll::-webkit-scrollbar { display: none; }
.mini {
  flex: none; width: 156px; scroll-snap-align: start;
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  text-align: left; border: 0; border-radius: var(--r-lg);
  background: var(--surface); padding: 14px; box-shadow: var(--shadow);
  color: var(--text);
}
.mini .av { margin-bottom: 6px; }
.mini-name { font-weight: 600; font-size: .9375rem; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; width: 100%; }
.mini-head { font-size: .8125rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; }
.mini-cat { font-size: .75rem; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; width: 100%; }

/* ---------- chips (filters) ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; padding: 2px 0; }
.chips::-webkit-scrollbar { display: none; }
.chip-wrap {
  flex: none; display: inline-flex; align-items: center; max-width: 100%; min-width: 0;
  border-radius: 20px; background: var(--surface); box-shadow: var(--shadow);
}
.chip {
  display: inline-flex; align-items: center; gap: 4px;
  min-height: 40px; padding: 0 12px 0 14px; border: 0; background: none;
  font-size: .9375rem; font-weight: 500; color: var(--text); white-space: normal; min-width: 0; text-align: left;
}
.chip span { min-width: 0; overflow-wrap: anywhere; }
.chip .ic, .chip-x { flex-shrink: 0; }
.chip-wrap.on { background: var(--tint); box-shadow: none; }
.chip-wrap.on .chip { color: var(--link-text); padding-right: 2px; }
.chip-x {
  width: 36px; min-height: 40px; display: grid; place-items: center;
  border: 0; background: none; color: var(--link-text); margin-right: 2px;
}

/* ---------- groups & rows ---------- */
.group {
  background: var(--surface); border-radius: var(--r-md); overflow: hidden;
  box-shadow: var(--shadow);
}
.group-gap { margin-top: 18px; }
.row {
  position: relative; width: 100%;
  display: flex; align-items: center; gap: 12px;
  min-height: 48px; padding: 10px 14px 10px 16px;
  border: 0; background: none; text-align: left; color: var(--text);
}
.row + .row::before, .prow + .prow::before {
  content: ""; position: absolute; top: 0; right: 0; left: 52px;
  border-top: .5px solid var(--sep);
}
.row:not(:has(.row-ic)) + .row::before { left: 16px; }
button.row:active, .prow:active, .mini:active, .tile:active:not(:disabled) { background: color-mix(in srgb, var(--text) 6%, var(--surface)); }
.row-ic { color: var(--link-text); display: grid; place-items: center; width: 24px; flex: none; }
.row-label { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.row-label small { color: var(--muted); font-size: .8125rem; line-height: 1.3; }
.row-label.ph { color: var(--muted); }
.row-value { color: var(--muted); text-align: right; max-width: 55%; margin-left: auto; font-size: .9375rem; }
.row:has(.row-value) .row-label { flex: none; white-space: nowrap; }
.row-value { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.row-chev { color: var(--muted); opacity: .7; flex: none; }
.row-check { color: var(--link-text); width: 22px; flex: none; display: grid; place-items: center; }
.row-check.ok { color: var(--ok); }
.row-danger, .row-danger .row-ic { color: var(--danger-text); }
.row-pick { min-height: 50px; }
.row-pick .row-label { overflow-wrap: anywhere; }
.row-body { flex: 1; min-width: 0; }
.row-sub { display: block; color: var(--muted); font-size: .8125rem; }
.row-text { align-items: flex-start; }
.row-text .row-label { font-size: .9375rem; }

/* ---------- profile rows ---------- */
.results { margin-top: 10px; }
.results-count { color: var(--muted); font-size: .8125rem; margin: 6px 4px 8px; }
.prow {
  position: relative; width: 100%;
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 12px 14px 16px; border: 0; background: none; text-align: left; color: var(--text);
}
.prow + .prow::before { left: 80px; }
.prow > .ic { color: var(--muted); opacity: .6; align-self: center; }
.prow-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.prow-top { display: flex; align-items: center; gap: 8px; }
.prow-name { font-weight: 600; font-size: 1rem; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.prow-head { font-size: .9375rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.prow-meta { color: var(--muted); font-size: .8125rem; line-height: 1.3; }
.prow-meta .nw { display: inline-block; max-width: 100%; white-space: normal; }
.prow-fresh { white-space: nowrap; }

.av {
  --s: 48px;
  width: var(--s); height: var(--s); flex: none;
  border-radius: 50%; overflow: hidden;
  display: grid; place-items: center;
  background: var(--tint); color: var(--link-text);
  font-weight: 650; font-size: calc(var(--s) * .36); letter-spacing: .01em;
  user-select: none;
}
.av img { width: 100%; height: 100%; object-fit: cover; }

.fresh {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .8125rem; line-height: 1.3; color: var(--muted);
}
.fresh::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex: none; }
.fresh.stale::before { background: none; box-shadow: inset 0 0 0 1.5px var(--muted); }

.promo {
  flex: none; display: inline-flex; align-items: center; gap: 3px;
  font-size: .6875rem; font-weight: 700; letter-spacing: .02em;
  padding: 2px 7px; border-radius: 6px;
  background: color-mix(in srgb, var(--text) 9%, var(--surface)); color: var(--text);
}
.ic-star { color: var(--hint); }

/* ---------- profile page ---------- */
.hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 8px 8px 4px; }
.hero .av { margin-bottom: 8px; box-shadow: 0 0 0 4px var(--surface); }
.hero-name { font-size: 1.5rem; line-height: 1.2; font-weight: 700; letter-spacing: -.01em; }
.hero-head { font-size: 1.0625rem; line-height: 1.35; }
.hero-meta { color: var(--muted); font-size: .9375rem; }
.hero .fresh { margin-top: 4px; }
.hero-promo { display: inline-flex; align-items: center; gap: 5px; font-size: .75rem; color: var(--text); background: color-mix(in srgb, var(--text) 9%, var(--surface)); padding: 3px 9px; border-radius: 8px; margin-top: 4px; }

.tiles { display: grid; gap: 8px; margin: 20px 0 4px; }
.tiles.n1 { grid-template-columns: 1fr; }
.tiles.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tiles.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  min-height: 64px; padding: 10px 4px; border: 0; border-radius: var(--r-md);
  background: var(--surface); color: var(--link-text); box-shadow: var(--shadow);
  font-size: .75rem; letter-spacing: -.02em; font-weight: 600; text-align: center; line-height: 1.2;
}
.tile.done { color: var(--muted); }
/* three tiles do not fit «Порекомендувати» on a phone: that tile takes its own row */
@media (max-width: 400px) {
  .tiles.n3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiles.n3 .tile:nth-child(2) { grid-column: 1 / -1; order: 3; }
}
.tile.done .ic { color: var(--ok); }

.card {
  background: var(--surface); border-radius: var(--r-md); padding: 14px 16px;
  box-shadow: var(--shadow);
}
.bio { white-space: pre-line; font-size: 1rem; line-height: 1.5; }
.muted-card { color: var(--muted); font-size: .9375rem; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.tag {
  display: inline-flex; align-items: center; gap: 2px;
  font-size: .8125rem; font-weight: 500; padding: 5px 11px; border-radius: 14px;
  background: var(--surface); color: var(--text); box-shadow: var(--shadow);
}
.tag-x { padding-right: 2px; }
.tag-del { width: 32px; height: 32px; margin: -6px 0; border: 0; background: none; color: var(--muted); display: grid; place-items: center; }
.tags-edit:not(:empty) { margin-bottom: var(--pad); }

.recs { display: flex; flex-direction: column; gap: 8px; }
.rec { background: var(--surface); border-radius: var(--r-md); padding: 12px 6px 14px 14px; box-shadow: var(--shadow); }
.rec-head { display: flex; align-items: center; gap: 10px; }
.rec-head .av { font-size: .8125rem; }
.rec-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.rec-meta strong { font-size: .9375rem; font-weight: 600; }
.rec-meta span { color: var(--muted); font-size: .75rem; }
.rec-text { margin: 8px 8px 0 0; font-size: .9375rem; line-height: 1.45; }
.rv-chip {
  display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; margin-top: 4px;
  padding: 3px 10px; border: 0; border-radius: 14px; background: transparent; color: var(--hint);
  font-size: .8125rem; font-weight: 500; line-height: 1.3;
}
.rv-chip svg:first-child { color: currentColor; }
.rv-chip-btn { align-self: center; margin-top: 8px; min-height: 28px; }
.hero .rv-count { color: var(--rv-hint); }
.rv-rule { margin-bottom: 12px; padding: 12px 14px; border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow); }
.rv-rule strong { font-size: .9375rem; }
.rv-rule p { margin: 4px 0 0; color: var(--rv-hint); font-size: .875rem; line-height: 1.4; }
.rv-note { margin: -4px 0 10px; color: var(--rv-hint); font-size: .8125rem; }
.rv-sub { margin: 4px 0 0; color: var(--rv-hint); font-size: .875rem; line-height: 1.35; }
.rv-list .chips .chip-wrap.on .chip { color: var(--rv-link); }
.rv-month { margin: 18px 0 8px 4px; color: var(--rv-hint); font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.rv-card { margin-bottom: 8px; padding: 12px 14px; border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow); }
.rv-text {
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;
  width: 100%; padding: 0; border: 0; background: none; color: var(--text); text-align: left; font: inherit; font-size: .9375rem; line-height: 1.45;
}
.rv-text.open { display: block; -webkit-line-clamp: unset; }
.rv-expand { padding: 0; border: 0; background: none; color: var(--rv-link); font-size: .9375rem; }
.rv-by { display: flex; align-items: center; gap: 8px; margin-top: 10px; color: var(--rv-hint); font-size: .75rem; }
.rv-by strong { color: var(--text); font-weight: 600; }
.rv-by .av { font-size: .5625rem; }
.rv-spec { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding-top: 10px; border-top: .5px solid var(--sep); }
.rv-spec-body { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.rv-spec-body strong { font-size: .9375rem; font-weight: 600; }
.rv-spec-body small { color: var(--rv-hint); font-size: .75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-write { min-height: 32px; padding: 0 14px; border: 0; border-radius: 16px; background: var(--tint); color: var(--rv-link); font-size: .875rem; font-weight: 600; }

.foot { display: flex; justify-content: center; margin-top: 22px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 18px;
  border: 0; border-radius: var(--r-md);
  font-size: 1rem; font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none;
}
.btn:active:not(:disabled) { opacity: .85; }
.btn:disabled { opacity: .5; }
.btn-sm { min-height: 44px; padding: 0 14px; font-size: .9375rem; }
.btn-block { width: 100%; }
.btn[hidden] { display: none; }
.btn-filled { background: var(--btn-fill); color: var(--btn-text); }
.btn-tinted { background: var(--tint); color: var(--link-text); }
.btn-plain { background: none; color: var(--link-text); }
.btn-danger { background: color-mix(in srgb, var(--danger) 10%, var(--surface)); color: var(--danger-text); }
.btn-danger-filled { background: var(--danger-fill); color: #ffffff; }
.btn-danger-text { color: var(--danger-text); font-weight: 500; font-size: .9375rem; }
.icon-btn {
  width: 44px; height: 44px; flex: none; display: grid; place-items: center;
  border: 0; border-radius: 22px; background: none; color: var(--muted);
}
.icon-btn-quiet { opacity: .8; }

/* ---------- states ---------- */
.state { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 28px 12px 8px; gap: 8px; }
.state-ic {
  width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center;
  background: var(--tint); color: var(--link-text); margin-bottom: 8px;
}
.state-ic .logo { border-radius: 14px; }
.state-title { font-size: 1.25rem; line-height: 1.3; font-weight: 700; max-width: 22em; }
.state-text { color: var(--muted); font-size: .9375rem; line-height: 1.45; max-width: 26em; }
.state-actions { display: flex; flex-direction: column; gap: 10px; width: 100%; margin-top: 16px; }
.system .state { min-height: calc(100vh - 160px); justify-content: center; }
.note-ok { display: flex; align-items: center; gap: 8px; color: var(--text); font-weight: 500; padding: 12px 14px; text-align: left; background: color-mix(in srgb, var(--ok) 16%, var(--surface)); border-radius: var(--r-md); }
.note-ok .ic { color: var(--ok); }
.note { display: flex; gap: 10px; align-items: flex-start; color: var(--muted); font-size: .875rem; margin: 14px 4px 0; text-align: left; }
.note .ic { margin-top: 1px; }
.note-body { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; }
.note-action:empty { display: none; }
.note-action .note-ok { padding: 8px 12px; font-size: .875rem; }
.results-note { color: var(--muted); font-size: .8125rem; margin: 10px 4px 0; }
/* Hidden profile preview: visibly «off» (no card fill, dashed edge, grey avatar) without losing text contrast. */
.group.dim { background: transparent; box-shadow: none; outline: 1.5px dashed var(--sep); outline-offset: -1.5px; }
.group.dim .av { filter: grayscale(1); }
.row-phone { padding: 0 6px 0 0; }
.row-phone .row-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 10px 8px 10px 16px; min-height: 48px; color: var(--text); text-decoration: none; }
.row-phone .row-main:active { background: color-mix(in srgb, var(--text) 6%, var(--surface)); }
.row-phone .row-label { font-variant-numeric: tabular-nums; }
.label .opt { font-weight: 400; }

/* ---------- banners ---------- */
.banner {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 14px; border-radius: var(--r-md); margin: 0 0 14px;
  background: var(--surface); box-shadow: var(--shadow); font-size: .9375rem;
}
.banner > .ic { margin-top: 1px; }
.banner-body { flex: 1; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.banner-body .btn { margin-top: 8px; }
.banner-info { background: var(--tint); box-shadow: none; color: var(--text); align-items: center; }
.banner-info .ic { color: var(--link-text); }
.banner-warn { background: var(--tint); box-shadow: none; }
.banner-warn > .ic { color: var(--text); }
.banner-bad { background: color-mix(in srgb, var(--danger) 12%, var(--surface)); box-shadow: none; }
.banner-bad > .ic { color: var(--danger-text); }
.banner-accent { background: var(--tint); box-shadow: none; }
.banner-accent > .ic { color: var(--link-text); }

/* ---------- my profile ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); gap: 8px; }
.stat { background: var(--surface); border-radius: var(--r-md); padding: 12px 12px 14px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 2px; }
.stat b { font-size: 1.625rem; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
.stat span { color: var(--muted); font-size: .8125rem; line-height: 1.25; }


.me-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 8px; }
.me-head .page-title { min-width: 0; margin: 0; }
.me-share { flex: none; height: 44px; min-height: 44px; padding: 0 16px 0 13px; border-radius: 22px; gap: 7px; font-size: .9375rem; white-space: nowrap; }
.me-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 12px 8px 0; }
.me-empty .illo { margin-bottom: 8px; }
.checks { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; text-align: left; }
.checks li { display: flex; align-items: flex-start; gap: 10px; font-size: .9375rem; }
.checks .ic { color: var(--ok); margin-top: 2px; }

/* ---------- form ---------- */
.field { margin-top: 18px; }
.field-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.label { display: block; font-size: .8125rem; font-weight: 600; color: var(--muted); margin: 0 4px 7px; }
.counter { font-size: .75rem; color: var(--muted); font-variant-numeric: tabular-nums; margin: 0 4px 7px; }
.counter.bad { color: var(--danger-text); font-weight: 600; }
.counter.ok { color: var(--muted); }
.input {
  display: block; width: 100%;
  min-height: 48px; padding: 12px 14px;
  border: 0; border-radius: var(--r-md); outline: none;
  background: var(--surface); color: var(--text); box-shadow: var(--shadow);
  font-size: max(16px, 1rem); line-height: 1.35;
  -webkit-appearance: none; appearance: none;
}
.input + .input { margin-top: 8px; }
.input[type="date"] { min-width: 0; text-align: left; }
.input::placeholder { color: var(--muted); opacity: 1; }
.input:focus { box-shadow: 0 0 0 2px color-mix(in srgb, var(--btn) 60%, transparent); }
.input[aria-invalid="true"] { box-shadow: 0 0 0 1.5px var(--danger-text); }
.textarea { resize: none; min-height: 110px; }
.select {
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%;
  background-size: 5px 5px; background-repeat: no-repeat; padding-right: 40px;
}
/* Keep the native accessible select, with a wrapping visible label at narrow widths. */
.area-select { position: relative; overflow-wrap: anywhere; }
.area-select select { position: absolute; inset: 0; width: 100%; height: 100%; min-width: 0; opacity: 0; cursor: pointer; }
.area-select:focus-within { box-shadow: 0 0 0 2px color-mix(in srgb, var(--btn) 60%, transparent); }
.hero-meta { overflow-wrap: anywhere; }
.field-err { color: var(--danger-text); font-size: .8125rem; margin: 7px 4px 0; font-weight: 500; }
.field-note { color: var(--muted); font-size: .8125rem; margin: 7px 4px 0; }
.field-bottom { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.field-bottom .field-err { margin-top: 0; }
.field-bottom .counter { margin: 0 4px 0 auto; }
.row-field { min-height: 52px; }
.field-note-ic { display: flex; align-items: flex-start; gap: 6px; }
.field-note-ic[hidden] { display: none; }
.field-note-ic .ic { flex: none; margin-top: 1px; }

.photo-edit { display: flex; align-items: center; gap: 16px; margin-top: 4px; }
.photo-col { flex: 0 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.photo-av { position: relative; flex: none; cursor: pointer; }
.photo-cap { color: var(--muted); font-size: .75rem; text-align: center; }
.photo-cam {
  position: absolute; right: -2px; bottom: -2px; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; background: var(--btn-fill); color: var(--btn-text);
  box-shadow: 0 0 0 3px var(--bg);
}
.photo-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.photo-actions .btn-plain { padding-left: 14px; }
.photo-actions .field-note { margin: 2px 4px 0 14px; }
.photo-actions label.btn { cursor: pointer; }

.toggles { display: flex; flex-wrap: wrap; gap: 8px; }
.toggle {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0 16px; border: 0; border-radius: 22px;
  background: var(--surface); color: var(--text); box-shadow: var(--shadow); font-weight: 500;
}
.toggle[aria-pressed="true"] { background: var(--tint); color: var(--link-text); box-shadow: none; }

.more-toggle {
  width: 100%; margin-top: 24px; display: flex; align-items: center; gap: 12px;
  min-height: 60px; padding: 12px 16px; border: 0; border-radius: var(--r-md);
  background: var(--surface); color: var(--text); text-align: left; box-shadow: var(--shadow);
}
.more-toggle > .ic { color: var(--muted); }
.more-toggle[aria-expanded="true"] > .ic { transform: rotate(180deg); }
.more-text { flex: 1; display: flex; flex-direction: column; }
.more-text strong { color: var(--link-text); font-weight: 600; }
.more-text small { color: var(--muted); font-size: .8125rem; }
.more-body > .group { margin-top: 18px; }

.switch {
  -webkit-appearance: none; appearance: none; flex: none; margin: 0;
  width: 51px; height: 31px; border-radius: 16px; position: relative;
  background: color-mix(in srgb, var(--text) 16%, var(--surface));
}
.switch::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%;
  background: #ffffff; box-shadow: 0 2px 4px rgba(0, 0, 0, .25);
}
.switch:checked { background: var(--ok); }
.switch:checked::after { transform: translateX(20px); }

.consent { margin-top: 24px; padding: 14px 14px 6px; background: var(--surface); border-radius: var(--r-md); box-shadow: var(--shadow); }
.consent-row { display: flex; gap: 12px; align-items: flex-start; font-size: .9375rem; line-height: 1.4; cursor: pointer; }
.consent-link { margin-left: 34px; padding-left: 0; min-height: 44px; }
.check {
  -webkit-appearance: none; appearance: none; flex: none; margin: 1px 0 0;
  width: 22px; height: 22px; border-radius: 6px;
  box-shadow: inset 0 0 0 2px var(--muted); background: var(--surface); position: relative;
}
.check:checked { background: var(--btn-fill); box-shadow: none; }
.check:checked::after {
  content: ""; position: absolute; left: 7px; top: 3px; width: 6px; height: 11px;
  border: solid var(--btn-text); border-width: 0 2.4px 2.4px 0; transform: rotate(45deg);
}
.consent-row:has(.check) { padding: 4px 0; }
.radio { width: 22px; height: 22px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 2px var(--muted); }
.radio.on { box-shadow: inset 0 0 0 7px var(--btn-fill); }

/* ---------- success ---------- */
.success { text-align: center; }
.success-mark {
  width: 84px; height: 84px; margin: 24px auto 16px; border-radius: 50%;
  display: grid; place-items: center; background: var(--tint); color: var(--link-text);
  box-shadow: none;
}
.success-mark .ic { stroke-width: 2.6; }
.success-title { font-size: 1.375rem; font-weight: 650; margin-bottom: 8px; letter-spacing: -.01em; }
.success .state-text { margin: 0 auto 20px; }
.success .group { text-align: left; }

/* ---------- tab bar ---------- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: var(--bottom); z-index: 20;
  display: flex; justify-content: space-around;
  padding: 0 12px var(--safe-b);
  background: var(--tab-bg);
  border-top: .5px solid var(--sep);
}
.tabbar[hidden] { display: none; }
.tab {
  flex: 1; max-width: 200px; min-height: 56px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border: 0; background: none; color: var(--muted);
  font-size: .6875rem; font-weight: 600; letter-spacing: .01em;
}
.tab[aria-current="page"] { color: var(--link-text); }

/* ---------- sheets ---------- */
#sheet-root[hidden] { display: none; }
.sheet-backdrop {
  position: fixed; left: 0; right: 0; top: var(--top); bottom: var(--bottom); z-index: 40;
  background: rgba(0, 0, 0, .4); opacity: 0;
}
.sheet {
  position: fixed; left: 0; right: 0; bottom: var(--bottom); z-index: 41;
  max-width: 640px; margin: 0 auto;
  max-height: calc(var(--tg-viewport-stable-height, 100vh) - var(--top) - 24px);
  display: flex; flex-direction: column;
  background: var(--bg); border-radius: 16px 16px 0 0;
  transform: translateY(105%);
  box-shadow: 0 -6px 30px rgba(0, 0, 0, .18);
}
#sheet-root.open .sheet { transform: none; }
#sheet-root.open .sheet-backdrop { opacity: 1; }
.sheet-grab { width: 36px; height: 5px; border-radius: 3px; background: var(--sep); margin: 7px auto 0; flex: none; }
.sheet-head { display: flex; align-items: center; gap: 8px; padding: 4px 6px 4px var(--pad); flex: none; }
.sheet-title { flex: 1; font-size: 1.1875rem; font-weight: 700; line-height: 1.3; }
.sheet-body { overflow-y: auto; overscroll-behavior: contain; padding: 4px var(--pad) calc(20px + var(--safe-b)); }
.sheet-stack { display: flex; flex-direction: column; gap: 12px; }
.sheet-hint { color: var(--muted); font-size: .9375rem; }
.sheet-lead { font-size: 1rem; line-height: 1.45; }
.sheet-who { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--surface); border-radius: var(--r-md); }
.sheet-who > div { min-width: 0; display: flex; flex-direction: column; }
.sheet-who strong { font-weight: 600; }
.sheet-who span { color: var(--muted); font-size: .875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sheet .group, .sheet .input, .sheet .consent { box-shadow: none; }
.sheet .consent { margin-top: 0; }
.sheet .banner { margin: 0; }
/* A step inside the same sheet: back chevron in the head (R7B «Немає моєї категорії»). */
.sheet-back { color: var(--link-text); }
.sheet-back[hidden] { display: none; }
.sheet-head:has(.sheet-back:not([hidden])) { padding-left: 4px; }
.picker-more { margin-top: 16px; }
.picker-more .row-label { color: var(--link-text); font-weight: 600; }
.picker-more .row-label small { font-weight: 400; }
.picker-more .row:disabled { opacity: .5; }
.propose-step .field-bottom { margin-top: 7px; }
.propose-step .field-bottom .field-note { margin: 0 4px; }
.propose-step .btn { margin-top: 16px; min-height: 50px; }

/* ---------- toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: calc(var(--bottom) + var(--safe-b) + 16px); z-index: 60;
  transform: translate(-50%, 16px); opacity: 0; pointer-events: none;
  max-width: calc(100% - 32px); width: max-content;
  padding: 11px 16px; border-radius: 12px;
  /* Same dark slab in both themes; never an inverted white block in dark mode. */
  background: #2c2c2e; color: #fff; border: .5px solid rgba(255, 255, 255, .12);
  font-size: .9375rem; font-weight: 500; text-align: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .2);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
body.with-tabs .toast { bottom: calc(var(--bottom) + var(--tabs-h) + 12px); }
.toast.has-act {
  display: flex; align-items: center; gap: 8px; width: calc(100% - 32px); max-width: 608px;
  min-height: 48px; padding: 0 4px 0 16px; text-align: left; pointer-events: auto;
}
.toast-text { flex: 1; min-width: 0; }
.toast-act {
  min-height: 44px; padding: 0 12px; border: 0; background: none;
  color: #7caefa; font-size: .9375rem; font-weight: 600;
}

/* ---------- skeletons ---------- */
.skel { background: var(--skel); border-radius: 8px; display: block; }
.skel-line { height: 12px; margin: 4px 0; }
.skel-av { width: 52px; height: 52px; border-radius: 50%; flex: none; }
.skel-hero { width: 104px; height: 104px; border-radius: 50%; margin-bottom: 10px; }
.skel-row { pointer-events: none; }
.cat-ic.skel { box-shadow: none; }

@media (max-width: 350px) {
  .cats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.me-empty > .btn { margin-top: 20px; }

/* ---------- MVP1: suggest, saved, tips, completeness, idea ---------- */
.nw { white-space: nowrap; }
.page-note { color: var(--muted); font-size: .9375rem; line-height: 1.4; margin: 0 0 14px; }
.prow-wrap { position: relative; display: flex; align-items: center; }
.prow-wrap + .prow-wrap::before { content: ""; position: absolute; top: 0; right: 0; left: 80px; border-top: .5px solid var(--sep); }
.prow-wrap .prow { flex: 1; min-width: 0; width: auto; padding-right: 4px; }
.bm {
  width: 44px; height: 44px; flex: none; display: grid; place-items: center;
  border: 0; border-radius: 22px; background: none; color: var(--muted); margin-right: 6px;
}
.bm[aria-pressed="true"] { color: var(--link-text); }
.bm[aria-pressed="true"] .ic, .tile[aria-pressed="true"] .ic { fill: currentColor; }

.entry {
  width: 100%; margin-top: 14px; min-height: 68px; padding: 12px 12px 12px 14px;
  display: flex; align-items: center; gap: 12px; border: 0; border-radius: var(--r-lg);
  background: var(--surface); box-shadow: var(--shadow); text-align: left; color: var(--text);
}
.entry:active { background: color-mix(in srgb, var(--text) 6%, var(--surface)); }
.entry-ic { width: 44px; height: 44px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--tint); color: var(--link-text); }
.entry-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.entry-body strong { font-size: .9375rem; font-weight: 600; line-height: 1.3; }
.entry-body span { font-size: .8125rem; line-height: 1.3; color: var(--muted); }
.entry > .ic { color: var(--muted); opacity: .7; }

.row-badge { color: var(--muted); font-size: .9375rem; font-variant-numeric: tabular-nums; }
.me-extra { margin-top: 22px; }
.me-extra .group + .group { margin-top: 18px; }
.me-other-city { display: block; width: 100%; min-height: 44px; margin-top: 24px; padding: 8px 4px; border: 0; background: none; color: var(--hint); font-size: 13px; font-weight: 400; text-align: left; }

.hl { background: var(--tint); box-shadow: 0 0 0 2px var(--link); border-radius: 12px; padding: 12px; }

.contact { background: var(--surface); border-radius: var(--r-md); box-shadow: var(--shadow); }
.contact[aria-invalid="true"] { box-shadow: 0 0 0 1.5px var(--danger-text); }
.contact-row { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 14px 0 16px; }
.contact-row input {
  flex: 1; min-width: 0; height: 52px; border: 0; background: none; outline: none; padding: 0;
  font-size: max(16px, 1rem); color: var(--text);
}
.contact-row input::placeholder { color: var(--muted); opacity: 1; }
.or { position: relative; height: 0; border-top: .5px solid var(--sep); margin: 0 16px 0 52px; }
.or span {
  position: absolute; left: 50%; top: -10px; transform: translateX(-50%);
  height: 20px; padding: 0 8px; border-radius: 10px; background: var(--surface);
  color: var(--muted); font-size: .75rem; font-weight: 600; line-height: 20px;
}
.ta-auto { min-height: 48px; overflow: hidden; }
.ta-md { min-height: 96px; }
.ta-idea { min-height: 132px; }
.banner-top { align-items: flex-start; margin: 0 0 4px; }
.banner-body .btn-surface { background: var(--surface); color: var(--link-text); margin-top: 8px; }
.banner-body { gap: 2px; }
.foot-note { display: flex; gap: 10px; align-items: flex-start; color: var(--muted); font-size: .875rem; line-height: 1.4; margin: 14px 4px 0; }
.foot-note .ic { margin-top: 1px; }

.steps { list-style: none; padding: 16px 16px 16px 14px; margin: 0; background: var(--surface); border-radius: var(--r-md); box-shadow: var(--shadow); text-align: left; }
.steps li { display: flex; gap: 12px; align-items: stretch; padding-bottom: 16px; }
.steps li:last-child { padding-bottom: 0; }
.step-n { flex: none; width: 28px; display: flex; flex-direction: column; align-items: center; }
.step-n b {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--tint); color: var(--link-text); font-size: .875rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.steps li:first-child .step-n b { background: var(--btn-fill); color: #ffffff; }
.step-n i { flex: 1; width: 2px; min-height: 14px; margin-top: 4px; border-radius: 1px; background: color-mix(in srgb, var(--text) 9%, var(--surface)); }
.step-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding-top: 3px; }
.step-t strong { font-size: 1rem; font-weight: 600; line-height: 1.3; }
.step-t span { font-size: .875rem; line-height: 1.4; color: var(--muted); }
.success-title-sm { font-size: 1.625rem; line-height: 1.2; font-weight: 700; }

.tip { padding: 12px 14px 12px 16px; display: flex; flex-direction: column; gap: 2px; width: 100%; border: 0; background: none; text-align: left; color: var(--text); position: relative; }
.tip + .tip::before { content: ""; position: absolute; top: 0; right: 0; left: 16px; border-top: .5px solid var(--sep); }
button.tip:active { background: color-mix(in srgb, var(--text) 6%, var(--surface)); }
.tip-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tip-name { font-weight: 600; font-size: 1rem; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tip-meta { color: var(--muted); font-size: .8125rem; line-height: 1.3; }
.tip-meta .nw { white-space: nowrap; }
.tip-sub { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tip-sub .tip-meta { flex: 1; min-width: 0; }
.tip-text { font-size: .875rem; line-height: 1.4; margin-top: 6px; }
.tip-act { margin-top: 10px; }
.tip-again { flex: none; min-height: 44px; margin: -10px -4px -10px 0; padding: 0 4px; border: 0; background: none; color: var(--link-text); font-size: .9375rem; font-weight: 600; }
.tip-chev { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); opacity: .7; }
button.tip { padding-right: 36px; }
.stchip {
  display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 9px 0 7px; border-radius: 12px; flex: none;
  font-size: .8125rem; font-weight: 600; line-height: 1; white-space: nowrap; color: var(--text);
}
.stchip .ic { stroke-width: 2.2; }
.st-pending { background: color-mix(in srgb, var(--text) 9%, var(--surface)); }
.st-pending .ic { color: var(--muted); }
.st-wait { background: var(--tint); color: var(--link-text); }
.st-ok { background: color-mix(in srgb, var(--ok) 16%, var(--surface)); }
.st-ok .ic { color: color-mix(in srgb, var(--ok) 70%, var(--text)); }
.st-bad { background: color-mix(in srgb, var(--danger) 12%, var(--surface)); color: var(--danger-text); }
.st-off { background: transparent; color: var(--muted); box-shadow: inset 0 0 0 1px var(--sep); }
.tips-empty { padding-top: 40px; }

.idea-meta { display: flex; justify-content: space-between; gap: 8px; margin-top: -4px; font-size: .75rem; color: var(--muted); }
.idea-meta .hint { margin-left: 4px; }
.idea-meta .hint.bad { color: var(--danger-text); font-weight: 600; }
.idea-meta .count { margin-right: 4px; font-variant-numeric: tabular-nums; }
.fb-seg { display: flex; padding: 2px; border-radius: 9px; background: color-mix(in srgb, var(--text) 8%, var(--surface)); }
.fb-seg button { flex: 1; min-height: 40px; padding: 6px 8px; border: 0; border-radius: 7px; background: none; color: var(--text); font: inherit; font-size: .9375rem; font-weight: 500; }
.fb-seg button[aria-pressed="true"] { background: var(--surface); box-shadow: 0 1px 3px rgba(0, 0, 0, .18), 0 0 0 .5px var(--sep); font-weight: 600; }
.fb-shot { display: flex; align-items: center; gap: 12px; }
.fb-shot img { width: 56px; height: 56px; object-fit: cover; border-radius: 10px; box-shadow: 0 0 0 .5px var(--sep); }
.fb-shot-x { width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--tint); color: var(--link-text); }
.fb-foot { text-align: center; margin-top: -4px; font-size: .8125rem; color: var(--muted); }

/* ---------- several cards per account (plan-multi.md SPEC D, design-multi-notes.md) ---------- */
.page-title-card { margin: 4px 0 14px; }
.cards .card-item { position: relative; }
.card-item + .card-item::before { content: ""; position: absolute; top: 0; right: 0; left: 80px; border-top: .5px solid var(--sep); }
.card-item.off .av { filter: grayscale(1); }
.card-cat { display: flex; align-items: center; gap: 6px; min-width: 0; }
.card-cat-ic { color: var(--link-text); display: grid; place-items: center; flex: none; }
.card-cat-name { font-weight: 600; font-size: 1rem; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.card-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 3px; }
.chip-state {
  flex: none; display: inline-flex; align-items: center; font-size: .6875rem; font-weight: 700; letter-spacing: .02em;
  padding: 2px 7px; border-radius: 6px; background: color-mix(in srgb, var(--text) 9%, var(--surface)); color: var(--hint);
}
.card-stale {
  display: flex; align-items: center; gap: 8px; min-height: 44px; margin: -8px 0 4px 80px; padding: 0 12px 0 0;
  border: 0; background: none; color: var(--link-text); font-size: .9375rem; font-weight: 600; text-align: left;
}
.card-stale-dot { width: 7px; height: 7px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px currentColor; flex: none; }
.add-card { margin-top: 16px; }
.add-hint { text-align: center; }
.cards-full { display: flex; gap: 8px; align-items: flex-start; color: var(--muted); font-size: .8125rem; line-height: 1.4; margin: 14px 4px 0; }
.cards-full .ic { flex: none; margin-top: 1px; }
.add-quiet {
  width: 100%; margin-top: 14px; padding: 8px 12px 8px 14px; display: flex; align-items: center; gap: 12px;
  border: 0; border-radius: var(--r-lg); background: none; text-align: left; color: var(--text);
}
.add-quiet:active { background: color-mix(in srgb, var(--text) 6%, var(--bg)); }
.add-quiet-ic { width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px var(--link-text); color: var(--link-text); }
.add-quiet-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.add-quiet-body strong { color: var(--link-text); font-size: 1.0625rem; font-weight: 600; line-height: 1.3; }
.add-quiet-body span { color: var(--muted); font-size: .8125rem; line-height: 1.3; }
.also-ic { width: 40px; height: 40px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--tint); color: var(--link-text); }
.also-row .row-label strong { font-weight: 600; }
/* N1 (design-review-multi.md): a long headline ends with an ellipsis instead of running under the chevron. */
.also-head { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.also .row + .row::before { left: 68px; }

/* ---------- save catalog sheet and team footer ---------- */
body.save-sheet-open { overflow: hidden; }
.save-overlay {
  --save-dim: color-mix(in srgb, var(--text) 38%, transparent);
  --save-touch: color-mix(in srgb, var(--text) 18%, transparent);
  --save-ok-tint: color-mix(in srgb, var(--ok) 16%, var(--surface));
  position: fixed; inset: var(--top) 0 var(--bottom); z-index: 250;
  display: flex; align-items: flex-end; justify-content: center; color: var(--text);
}
html[data-scheme="dark"] .save-overlay { --save-dim: rgba(0, 0, 0, .6); }
.save-backdrop { position: absolute; inset: 0; background: var(--save-dim); }
.save-sheet {
  position: relative; width: 100%; max-width: 640px; max-height: 100%; overflow-y: auto;
  overscroll-behavior: contain; border-radius: 16px 16px 0 0; background: var(--surface);
  padding: 8px 16px max(34px, var(--safe-b)); box-shadow: 0 -1px 0 var(--sep);
}
.save-grabber { width: 36px; height: 5px; margin: 0 auto 6px; border-radius: 3px; background: var(--skel); }
.save-close-row { display: flex; justify-content: flex-end; height: 30px; margin: -4px -8px 0 0; }
.save-close {
  position: relative; display: grid; place-items: center; flex: none; width: 44px; height: 44px;
  margin: -7px; padding: 0; border: 0; background: none; color: var(--muted); isolation: isolate;
}
.save-close::before { content: ''; position: absolute; inset: 7px; z-index: -1; border-radius: 50%; background: var(--skel); }
.save-title { margin: 22px 0 0; font-size: 24px; line-height: 29px; font-weight: 700; letter-spacing: -.3px; text-align: center; text-wrap: balance; }
.save-title:focus { outline: none; }
.save-lead { margin: 8px 6px 0; font-size: 16px; line-height: 21px; color: var(--muted); text-align: center; text-wrap: pretty; }
.save-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
.save-button { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 50px; padding: 10px 12px; border: 0; border-radius: 12px; font-size: 17px; line-height: 22px; font-weight: 600; }
.save-primary { background: var(--btn-fill); color: var(--btn-text); }
.save-secondary { background: var(--tint); color: var(--link-text); }
.save-tertiary { min-height: 44px; padding: 0 12px; background: transparent; color: var(--link-text); font-weight: 400; }
.save-button:disabled, .save-close:disabled { opacity: .4; }
.save-primary:disabled { opacity: .85; }
.save-primary[aria-busy="true"] { gap: 10px; }
.save-note { margin: 14px 0 0; font-size: 13px; line-height: 17px; color: var(--muted); text-align: center; }
.save-actions .save-note { margin: -2px 0 4px; }
.save-art { background: var(--bg); border-radius: 18px; }
.save-chat-list { display: flex; flex-direction: column; gap: 2px; padding: 14px 12px 12px; margin-top: 2px; }
.save-chat { display: flex; align-items: center; gap: 12px; min-width: 0; height: 68px; padding: 0 12px; background: var(--surface); border-radius: 14px; }
.save-chat-fresh { height: auto; min-height: 66px; padding: 10px 12px; box-shadow: var(--shadow); transform: translateY(-2px); }
.save-chat-avatar { position: relative; display: flex; flex: none; }
.save-chat-copy { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.save-chat-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.save-chat strong { font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.save-chat small { font-size: 13px; color: var(--hint); }
.save-chat-line > span { font-size: 14px; line-height: 18px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.save-unread { flex: none; display: grid; place-items: center; min-width: 20px; height: 20px; border-radius: 10px; background: var(--btn); color: var(--btn-text); font-size: 13px; font-weight: 600; }
.save-ghost { display: flex; align-items: center; gap: 12px; padding: 10px 12px; opacity: .9; }
.save-ghost-avatar { width: 46px; height: 46px; border-radius: 50%; background: var(--skel); flex: none; }
.save-ghost > div { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.save-ghost > div span { width: 46%; height: 10px; border-radius: 5px; background: var(--skel); }
.save-ghost > div span + span { width: 72%; height: 8px; border-radius: 4px; }
.save-ghost-1 { opacity: .55; }
.save-ghost-1 > div span { width: 34%; }
.save-ghost-1 > div span + span { width: 60%; }
.save-result { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 2px; }
.save-success { display: grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: 50%; background: var(--save-ok-tint); color: var(--ok); }
.save-success .ic { stroke-width: 2.4; }
.save-result .save-title, .save-result .save-lead { margin-top: 0; }
.save-pin-art { display: flex; flex-direction: column; gap: 12px; padding: 12px; margin-top: 18px; }
.save-pin-art > p { margin: 0 4px; font-size: 15px; line-height: 20px; }
.save-pin-ios { position: relative; height: 68px; overflow: hidden; border-radius: 14px; background: var(--surface); }
.save-swipe-action { position: absolute; inset: 0 auto 0 0; width: 88px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 13px; font-weight: 500; background: var(--ok); color: var(--btn-text); }
.save-pin-ios .save-chat { position: absolute; left: 88px; width: 100%; border-radius: 0; box-shadow: var(--shadow); }
.save-gesture-swipe { position: absolute; left: 150px; top: 20px; }
.save-pin-android { overflow: hidden; border-radius: 14px; background: var(--surface); }
.save-android-toolbar { height: 48px; display: flex; align-items: center; gap: 18px; padding: 0 14px; border-bottom: .5px solid var(--sep); color: var(--muted); }
.save-android-toolbar > span:first-of-type { flex: 1; font-size: 18px; font-weight: 500; color: var(--text); }
.save-pin-highlight { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--tint); color: var(--link); box-shadow: 0 0 0 2px var(--link); }
.save-pin-android .save-chat { background: var(--tint); border-radius: 0; }
.save-selected { position: absolute; right: -2px; bottom: -2px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--surface); background: var(--ok); color: var(--btn-text); }
.save-selected .ic { stroke-width: 4; }
.save-pin-desktop { position: relative; height: 150px; }
.save-pin-desktop .save-chat { height: 64px; border-radius: 12px; }
.save-pin-desktop .logo { width: 42px; height: 42px; }
.save-pin-desktop .save-chat strong { font-size: 15px; }
.save-pin-desktop .save-chat-line > span { font-size: 13px; }
.save-context-menu { position: absolute; right: 0; top: 40px; width: 196px; max-width: 100%; border-radius: 10px; background: var(--surface); box-shadow: var(--shadow), 0 0 0 .5px var(--sep); padding: 5px; display: flex; flex-direction: column; font-size: 14px; }
.save-context-menu > span { display: flex; align-items: center; height: 34px; padding: 0 10px 0 38px; color: var(--muted); white-space: nowrap; }
.save-context-menu > span:first-child { padding: 0 10px; gap: 10px; border-radius: 6px; background: var(--tint); color: var(--link-text); font-weight: 600; }
.save-gesture-cursor { position: absolute; left: max(0px, calc(100% - 206px)); top: 30px; }
.save-actions-sent { margin-top: 18px; }
.save-home-art { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 18px; justify-items: center; padding: 18px 22px 14px; }
.save-home-tile { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 100%; max-width: 60px; }
.save-home-tile > span, .save-home-tile > .logo { width: 100%; max-width: 56px; height: auto; aspect-ratio: 1; border-radius: 13px; background: var(--skel); }
.save-home-tile.is-app > .logo { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--link); }
.save-home-tile small { width: 38px; max-width: 100%; height: 7px; margin-top: 3px; border-radius: 4px; background: var(--skel); }
.save-home-tile.is-app small { width: auto; max-width: none; height: auto; margin: 0; background: none; font-size: 11px; line-height: 13px; white-space: nowrap; font-weight: 500; }
.save-home-art + .save-title { margin-top: 20px; }
.save-bookmark { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--btn); color: var(--btn-text); }
.save-saved-art { padding: 12px; }
.save-saved-art .save-chat { box-shadow: var(--shadow); height: auto; min-height: 66px; padding: 10px 12px; }
.save-saved-art .save-chat-copy { gap: 4px; }
.save-open-pill { align-self: flex-start; font-size: 13px; color: var(--link-text); background: var(--tint); border-radius: 8px; padding: 3px 8px; }
.save-result-saved { margin-top: 6px; }
.save-result-saved + .save-actions { margin-top: 24px; }
.save-sheet[data-state="homeguide"], .save-sheet[data-state="homepending"] { background: var(--bg); }
.save-sheet[data-state="homeguide"] { padding-bottom: 0; }
.save-guide-actions { position: sticky; bottom: 0; z-index: 1; margin: 14px -16px 0; padding: 12px 16px max(34px, var(--safe-b)); background: var(--surface); }
.save-sheet[data-state="homeguide"] .save-title, .save-sheet[data-state="homepending"] .save-title { margin: -26px 30px 0 0; font-size: 20px; line-height: 26px; text-align: left; }
.save-home-brand { display: flex; align-items: center; gap: 12px; margin: 22px 0 18px; }
.save-home-brand > .logo { flex: none; }
.save-home-brand strong { font-size: 18px; }
.save-home-brand p, .save-home-intro { margin: 3px 0 0; color: var(--muted); font-size: 15px; line-height: 20px; }
.save-home-intro { margin-bottom: 10px; }
.save-home-steps { list-style: none; counter-reset: save-step; padding: 0 14px; margin: 0; border-radius: 16px; background: var(--surface); }
.save-home-steps li { counter-increment: save-step; display: flex; align-items: baseline; gap: 12px; padding: 14px 0; font-size: 16px; line-height: 24px; }
.save-home-steps li + li { border-top: .5px solid var(--sep); }
.save-home-steps li::before { content: counter(save-step); display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--tint); color: var(--link-text); font-size: 14px; font-weight: 600; }
.save-home-steps li > div { min-width: 0; }
.save-home-steps p { margin: 5px 0 0; color: var(--muted); font-size: 14px; line-height: 20px; }
.save-home-steps strong { color: var(--text); font-weight: 600; }
.save-glyph { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; vertical-align: middle; border-radius: 50%; background: var(--skel); color: var(--text); font-size: 20px; }
.save-browser-switch { display: flex; gap: 3px; padding: 3px; margin-bottom: 12px; border-radius: 10px; background: var(--skel); }
.save-browser-switch button { flex: 1; min-width: 0; min-height: 40px; padding: 7px 4px; border: 0; border-radius: 8px; background: transparent; color: var(--text); font-size: 15px; }
.save-browser-switch button[aria-pressed="true"] { background: var(--surface); box-shadow: var(--shadow); font-weight: 600; }
.save-home-confirm { padding: 16px; border-radius: 16px; background: var(--surface); font-size: 16px; line-height: 22px; }
.save-home-confirm > strong { font-size: 18px; }
.save-home-confirm p { margin: 6px 0 0; color: var(--muted); }
.save-home-permission { margin: 16px 0; padding-top: 16px; border-top: .5px solid var(--sep); }
@media (max-width: 359px) {
  .save-home-art { gap: 14px 12px; padding-inline: 14px; }
  .save-home-tile.is-app small { font-size: 9px; }
  .save-android-toolbar { gap: 12px; padding-inline: 12px; }
}
/* first save-sheet state (design round 4): pinned-chat illustration, one dismiss */
.save-sheet:is([data-state="offer"], [data-state="busy"]) { --save-sheet: var(--surface); --save-card: var(--bg); --save-pinned: var(--surface); background: var(--save-sheet); }
html[data-scheme="dark"] .save-sheet:is([data-state="offer"], [data-state="busy"]) { --save-sheet: var(--bg); --save-card: var(--surface); --save-pinned: color-mix(in srgb, var(--text) 10%, var(--surface)); }
.save-sheet:is([data-state="offer"], [data-state="busy"]) .save-grabber { margin: 0 auto; }
.save-sheet:is([data-state="offer"], [data-state="busy"]) .save-chat-list { gap: 0; margin-top: 16px; padding: 8px 0; border-radius: 16px; background: var(--save-card); text-align: left; overflow: hidden; }
.save-sheet:is([data-state="offer"], [data-state="busy"]) .save-chat { height: 64px; min-height: 0; padding: 0 16px; border-radius: 0; background: transparent; }
.save-sheet:is([data-state="offer"], [data-state="busy"]) .save-chat-fresh { background: var(--save-pinned); box-shadow: none; transform: none; }
.save-sheet:is([data-state="offer"], [data-state="busy"]) .save-chat-line .ic { color: var(--quiet); }
.save-sheet:is([data-state="offer"], [data-state="busy"]) .save-ghost { height: 64px; padding: 0 16px; opacity: .9; }
.save-sheet:is([data-state="offer"], [data-state="busy"]) .save-ghost-avatar { width: 48px; height: 48px; background: var(--hair); opacity: .5; }
.save-sheet:is([data-state="offer"], [data-state="busy"]) .save-ghost > div { gap: 10px; }
.save-sheet:is([data-state="offer"], [data-state="busy"]) .save-ghost > div span { width: 44%; height: 10px; border-radius: 5px; background: var(--hair); opacity: .5; }
.save-sheet:is([data-state="offer"], [data-state="busy"]) .save-ghost > div span + span { width: 78%; height: 10px; border-radius: 5px; }
.save-sheet:is([data-state="offer"], [data-state="busy"]) .save-ghost-1 { opacity: .9; }
.save-sheet:is([data-state="offer"], [data-state="busy"]) .save-ghost-1 > div span { width: 36%; }
.save-sheet:is([data-state="offer"], [data-state="busy"]) .save-ghost-1 > div span + span { width: 64%; }
.save-sheet:is([data-state="offer"], [data-state="busy"]) .save-title { margin: 24px 0 0; font-size: 22px; line-height: 28px; }
.save-sheet:is([data-state="offer"], [data-state="busy"]) .save-lead { margin: 8px 0 0; font-size: 15px; line-height: 20px; text-wrap: balance; }
.save-sheet:is([data-state="offer"], [data-state="busy"]) .save-actions { gap: 0; margin-top: 24px; }
.save-sheet:is([data-state="offer"], [data-state="busy"]) .save-actions .save-note { margin: 8px 0 0; font-size: 13px; line-height: 18px; }
.save-sheet:is([data-state="offer"], [data-state="busy"]) .save-secondary { margin-top: 16px; }
.save-sheet:is([data-state="offer"], [data-state="busy"]) .save-later { margin-top: 8px; }
@media (max-height: 640px) {
  .save-sheet:is([data-state="offer"], [data-state="busy"]) { padding-bottom: max(16px, var(--safe-b)); }
  .save-sheet:is([data-state="offer"], [data-state="busy"]) .save-ghost { display: none; }
  .save-sheet:is([data-state="offer"], [data-state="busy"]) .save-title { margin-top: 16px; }
  .save-sheet:is([data-state="offer"], [data-state="busy"]) .save-actions { margin-top: 16px; }
  .save-sheet:is([data-state="offer"], [data-state="busy"]) .save-secondary { margin-top: 8px; }
  .save-sheet:is([data-state="offer"], [data-state="busy"]) .save-later { margin-top: 4px; }
}

/* ---------- first-start welcome (design round 4) ---------- */
.welcome { display: flex; flex-direction: column; min-height: calc(100vh - var(--top)); padding: 0 var(--pad) calc(16px + var(--bottom) + var(--safe-b)); }
.welcome-hero { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: 16px; text-align: center; }
.welcome-icon { width: 88px; height: 88px; border-radius: 22px; box-shadow: 0 2px 6px rgba(0, 87, 184, .18), 0 12px 32px rgba(0, 87, 184, .18); }
.welcome-title { margin-top: 24px; font-size: 32px; line-height: 36px; font-weight: 800; letter-spacing: -.8px; }
.welcome-sub { margin-top: 8px; font-size: 17px; line-height: 22px; color: var(--muted); text-wrap: balance; }
.welcome-vals { align-self: stretch; margin-top: 32px; display: flex; flex-direction: column; gap: 16px; text-align: left; }
.welcome-val { display: flex; align-items: center; gap: 16px; }
.welcome-val-ic { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--tint); color: var(--link-text); }
.welcome-val-t { min-width: 0; }
.welcome-val-t b { display: block; font-size: 16px; line-height: 20px; font-weight: 600; }
.welcome-val-t span { display: block; margin-top: 2px; font-size: 13px; line-height: 18px; color: var(--muted); }
.welcome-city { padding-top: 24px; }
.welcome-note { font-size: 13px; line-height: 18px; color: var(--muted); text-align: center; }
.welcome-note { margin-top: 8px; }
@media (max-height: 640px) {
  .welcome { padding-bottom: calc(8px + var(--bottom) + var(--safe-b)); }
  .welcome-icon { width: 64px; height: 64px; border-radius: 16px; }
  .welcome-title { margin-top: 16px; font-size: 26px; line-height: 30px; letter-spacing: -.5px; }
  .welcome-sub { font-size: 15px; line-height: 20px; }
  .welcome-vals { margin-top: 24px; gap: 8px; }
  .welcome-val-ic { width: 36px; height: 36px; border-radius: 10px; }
  .welcome-val-ic .ic { width: 20px; height: 20px; }
  .welcome-val-t span { display: none; }
  .welcome-city { padding-top: 16px; }
}

.home-footer { margin-top: 24px; text-align: center; color: var(--muted); font-size: 13px; line-height: 18px; }
.home-team-line { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0 4px; min-height: 44px; }
.foot-monogram { width: 24px; height: 24px; font-size: 11px; margin-right: 4px; }
.home-team-line .home-footer-link { padding: 0; min-width: 0; }
.home-footer-link { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--link-text); font-size: 13px; font-weight: 600; }
.home-footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 8px; }
.home-footer-links .home-footer-link { color: var(--quiet); font-weight: 400; padding: 0 6px; white-space: nowrap; }
.changes-day + .changes-day { margin-top: 24px; }
.changes-day h3 { margin: 8px 0 12px; color: var(--muted); font-size: 13px; font-weight: 600; }
.changes-day ul { margin: 0; padding-left: 20px; }
.changes-day li { margin-bottom: 12px; line-height: 1.45; overflow-wrap: anywhere; }

.allcats { margin-top: 16px; }
.allcats + .home-rows { margin-top: 24px; }
.page-head + .sec-sub { margin: -6px 0 0; }
.cat-empty-page { display: flex; flex-direction: column; min-height: calc(100dvh - var(--top)); }
.cat-empty-body { flex: 1; display: flex; flex-direction: column; }
.cat-empty-body .state { flex: 1; justify-content: center; gap: 0; padding: 0 12px 56px; }
.cat-empty-body .state-ic { width: 72px; height: 72px; margin-bottom: 0; }
.cat-empty-body .state-title { margin-top: 16px; font-size: 20px; line-height: 24px; }
.cat-empty-body .state-text { margin-top: 8px; max-width: 300px; font-size: 15px; line-height: 20px; text-wrap: balance; }
.cat-empty-body .state-actions { gap: 8px; margin-top: 24px; }
.cat-spec { margin: 0; text-align: center; color: var(--muted); font-size: 13px; line-height: 18px; }
@media (max-width: 340px) {
  .page-head .page-title { font-size: 22px; line-height: 28px; }
}

/* reviews: contrast-safe text (design note 05) */
:root { --rv-hint: #6a6a6f; --rv-link: #0068d6; --rv-btn: #0068d6; }
html[data-scheme="dark"] { --rv-hint: #98989f; --rv-link: #5197fb; --rv-btn: #2a6fdb; }

/* reviews: home rail and visitor viewer */
.rv-rail-title { justify-content: space-between; }
.rv-all { border: 0; background: none; padding: 0 0 0 12px; min-height: 44px; margin-block: -10px; color: var(--rv-link); font-size: .9375rem; font-weight: 600; }
.rv-scroll { align-items: stretch; }
.rv-card {
  flex: none; width: min(320px, calc(100% - 56px)); scroll-snap-align: start;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow); color: var(--text);
}
.rv-wide .rv-card { width: 100%; }
.rv-card button { border: 0; background: none; color: inherit; text-align: left; font: inherit; }
.rv-card-top { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 14px 14px 12px; min-height: 148px; }
.rv-clamp { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; font-size: .9375rem; line-height: 1.4; }
.rv-by { margin-top: auto; display: flex; align-items: center; gap: 8px; min-width: 0; }
.rv-by-text, .rv-spec-text { display: flex; flex-direction: column; min-width: 0; gap: 1px; align-items: flex-start; }
.rv-by-text b, .rv-spec-text b { font-size: .8125rem; font-weight: 650; line-height: 1.25; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-by-text small, .rv-spec-text small { color: var(--rv-hint); font-size: .75rem; line-height: 1.25; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-card-spec { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 14px; border-top: .5px solid var(--sep); color: var(--rv-hint); }
.rv-card-spec .rv-spec-text { flex: 1; }
.rv-card-spec .rv-spec-text b { color: var(--text); font-size: .875rem; }
.rv-card-spec .ic { flex: none; color: var(--rv-hint); }

.rv-viewer { display: flex; flex-direction: column; gap: 10px; padding-top: 6px; }
.rv-progress { display: flex; gap: 4px; padding: 0 2px 2px; }
.rv-progress span { flex: 1; height: 3px; border-radius: 2px; background: var(--sep); }
.rv-progress span.on { background: var(--text); }
.rv-vcard { flex: none; display: flex; flex-direction: column; gap: 14px; min-height: 380px; padding: 14px 16px 16px; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow); }
.rv-vtop { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: -4px -8px 0 0; }
.rv-chip { font-size: .75rem; font-weight: 500; line-height: 1; padding: 6px 9px; border-radius: 8px; color: var(--hint); background: transparent; }
.rv-more { color: var(--rv-hint); }
.rv-text { flex: 1; line-height: 1.38; overflow-wrap: anywhere; white-space: pre-line; }
.rv-pill { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; font-size: .8125rem; font-weight: 500; color: var(--rv-hint); background: var(--bg); border-radius: 999px; padding: 5px 10px; }
.rv-by-row { display: flex; align-items: center; gap: 10px; }
.rv-by-row .rv-by-text { flex: 1; }
.rv-by-row .rv-by-text b { font-size: .9375rem; }
.rv-nav { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--bg); color: var(--text); }
.rv-nav:disabled { opacity: .4; }
.rv-check { display: flex; align-items: center; gap: 6px; margin-top: -6px; font-size: .75rem; color: var(--rv-hint); }
.rv-vspec { display: flex; flex-direction: column; gap: 12px; padding: 12px; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow); }
.rv-vspec-top { display: flex; align-items: center; gap: 12px; }
.rv-vspec-top .rv-spec-text { flex: 1; }
.rv-vspec-top .rv-spec-text b { font-size: 1rem; }
.rv-share { color: var(--rv-link); }
.rv-status { display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; padding: 2px 8px; border-radius: 999px; background: transparent; color: var(--hint); font-size: .75rem; font-weight: 500; line-height: 1.4; }
.rv-actions { display: flex; gap: 8px; }
.rv-actions .btn { flex: 1; min-width: 0; }
.rv-actions .rv-btn { flex: 2; background: var(--rv-btn); color: #ffffff; }
.rv-actions .btn-tinted { color: var(--rv-link); }

/* reviews: owner viewer and story sheet */
.rv-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.rv-chip.rv-chip-on { background: var(--rv-btn); color: #ffffff; }
.rv-owner { display: flex; flex-direction: column; gap: 12px; }
.rv-owner-card { display: flex; flex-direction: column; gap: 12px; padding: 12px; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow); }
.rv-owner-top { display: flex; align-items: center; gap: 12px; }
.rv-thumb { flex: none; width: 54px; height: 96px; display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 8px; border-radius: 8px; background: #0057b7; }
.rv-thumb b { color: #ffd500; font-size: .4375rem; letter-spacing: .1em; }
.rv-thumb i { display: block; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .85); }
.rv-owner-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rv-owner-text b { font-size: 1rem; font-weight: 650; }
.rv-owner-text small { color: var(--rv-hint); font-size: .8125rem; line-height: 1.35; }
.rv-owner .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.rv-owner .rv-btn { background: var(--rv-btn); color: #ffffff; }
.rv-owner .btn-tinted { color: var(--rv-link); }
.rv-block { width: 100%; }
.rv-owner-progress { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px 4px 0; border-top: .5px solid var(--sep); }
.rv-owner-progress p { margin: 0; color: var(--rv-hint); font-size: .875rem; line-height: 1.4; }
.rv-dots { display: flex; gap: 6px; }
.rv-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--sep); }
.rv-dots i.on { background: #0057b7; }
.rv-linkbtn { padding: 0; min-height: 36px; border: 0; background: none; color: var(--rv-link); font-size: .9375rem; font-weight: 600; text-align: left; }
.rv-story { display: flex; flex-direction: column; gap: 14px; }
.rv-story-prev { display: grid; place-items: center; }
.rv-story-img { width: 210px; max-width: 60%; aspect-ratio: 9 / 16; border-radius: 12px; background: var(--bg); box-shadow: var(--shadow); object-fit: cover; }
.rv-story-img.loading { opacity: .4; }
.rv-themes { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.rv-swatch { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border: 1.5px solid transparent; border-radius: 999px; background: var(--bg); color: var(--text); font-size: .875rem; }
.rv-swatch.on { border-color: var(--rv-btn); }
.rv-swatch i { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--sep); }
.rv-ig { display: flex; flex-direction: column; gap: 12px; padding: 4px 4px 8px; }
.rv-ig-line { display: flex; align-items: center; gap: 10px; margin: 0; font-size: .9375rem; }
.rv-ig-line svg { flex: none; color: var(--rv-link); }
.rv-ig-step { margin: 0; color: var(--rv-hint); font-size: .875rem; line-height: 1.4; }

/* ---------- owner detail screens ---------- */
.owner-detail-text { margin: 12px 0 0; font-size: .9375rem; line-height: 1.4; color: var(--muted); }
.owner-detail .sec-title { margin: 24px 0 10px; }
.owner-detail > .ext > .sec-title:first-child { margin-top: 0; }
.ext-features { list-style: none; padding: 0; margin: 0; }
.ext-features .row-label small { display: block; margin-top: 2px; font-weight: 400; }
.ext-status { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.ext-badge { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 14px; background: var(--surface); color: var(--muted); font-size: .875rem; font-weight: 600; }
.ext-badge-on { background: color-mix(in srgb, var(--ok) 12%, var(--surface)); color: var(--ok); }
.ext-share { margin-top: 20px; }
.ext-metrics { display: flex; gap: 10px; }
.ext-metric { flex: 1; min-width: 0; padding: 12px 14px 13px; border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow); }
.ext-metric strong { display: block; font-size: 26px; line-height: 1.15; }
.ext-metric > span { display: block; margin-top: 2px; font-size: .8125rem; line-height: 1.3; color: var(--muted); }
.ext-rows { margin: 10px 0 0; padding: 0; list-style: none; }
.ext-rows .cl-tile { width: 32px; height: 32px; }
.ext-rows .row-label small { display: block; margin-top: 1px; font-weight: 400; }
.ext-note { margin: 12px 4px 0; }
.ext-activation { padding: 20px 18px 18px 16px; border-radius: var(--r-lg); }
.ext-steps { list-style: none; padding: 0; margin: 0; }
.ext-steps li { display: flex; align-items: stretch; gap: 14px; }
.ext-step-track { display: flex; flex-direction: column; align-items: center; width: 28px; flex: none; }
.ext-step-number { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--bg); color: var(--muted); font-size: .875rem; font-weight: 700; }
.ext-steps li:first-child .ext-step-number { background: none; color: var(--link-text); box-shadow: inset 0 0 0 2px var(--btn); }
.ext-step-connector { flex: 1; width: 2px; margin: 6px 0 2px; border-radius: 1px; background: var(--sep); }
.ext-step-body { flex: 1; min-width: 0; padding-top: 3px; }
.ext-steps li:first-child .ext-step-body { padding-bottom: 20px; }
.ext-steps strong { font-size: 1rem; line-height: 1.3; }
.ext-steps p { margin: 4px 0 0; color: var(--muted); font-size: .9375rem; line-height: 1.4; }
.ext-keep-on { margin: 18px 0 0 2px; padding-top: 14px; border-top: .5px solid var(--sep); font-size: .9375rem; line-height: 1.45; }
.ext-activation-small { margin: 8px 0 0 2px; }
.ext-unchanged { display: flex; align-items: flex-start; gap: 10px; margin: 22px 4px 0; color: var(--muted); font-size: .9375rem; line-height: 1.4; }
.ext-unchanged svg { flex: none; margin-top: 2px; }
.ext-small { display: flex; align-items: flex-start; gap: 6px; margin: 0; overflow-wrap: anywhere; }
.ext-small svg { flex: none; margin-top: 1px; }
.ext-sheet .row-chev svg { color: var(--link-text); }
.review-rule { margin-top: 28px; }
.owner-rule-title { color: var(--muted); font-size: .875rem; font-weight: 600; line-height: 1.4; }
.review-rule .owner-detail-text { font-size: .8125rem; }

/* ---------- review channel actions ---------- */
.cl-row { min-height: 60px; gap: 14px; }
.cl-row + .cl-row::before { left: 68px; }
.cl-tile {
  --c: var(--link-text);
  flex: none; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center;
  font-size: .9375rem; font-weight: 700;
  background: color-mix(in srgb, var(--c) 16%, var(--surface)); color: color-mix(in srgb, var(--c) 72%, var(--text));
}
.cl-tg, .cl-ts { --c: #229ed9; }
.cl-wa { --c: #25a05a; }
.cl-vb { --c: #7360f2; }
.cl-fb { --c: #1f5fc4; }
.cl-th, .cl-x { --c: var(--text); background: var(--tint); }
.cl-ig { --c: #d62976; }
.cl-cp { --c: #8e8e93; }
.cl-sheet { display: flex; flex-direction: column; gap: 14px; }
.cl-sheet-text { margin: 0; color: var(--muted); font-size: .9375rem; line-height: 1.4; }
.cl-variants { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; }
.cl-post { flex: 0 0 85%; min-width: 0; display: flex; flex-direction: column; justify-content: flex-start; padding: 14px; border: 0; border-radius: var(--r-md); background: var(--tint); font-size: .9375rem; line-height: 1.45; text-align: left; overflow-wrap: anywhere; scroll-snap-align: start; }
.cl-post[aria-pressed="true"] { outline: 2px solid var(--btn); outline-offset: -2px; }
.cl-post strong { display: block; margin-bottom: 8px; }
.cl-post span { display: block; color: var(--link-text); }
.cl-post .cl-post-text { display: block; margin: 0; color: inherit; }
.cl-info { display: flex; gap: 10px; align-items: flex-start; margin: 0; color: var(--muted); font-size: .875rem; line-height: 1.4; }
.cl-info svg { flex: none; color: var(--link-text); }
.cl-igbox { display: flex; gap: 16px; align-items: flex-start; }
.cl-ig-img { flex: none; width: 112px; aspect-ratio: 9 / 16; border-radius: 12px; background: var(--bg); box-shadow: var(--shadow); object-fit: cover; }
.cl-ig-img.loading { opacity: .4; }
.cl-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; font-size: .9375rem; line-height: 1.45; min-width: 0; }