:root {
  --bg: #edf6ed;
  --card: rgba(255,255,255,.96);
  --text: #171a18;
  --muted: #7f8580;
  --line: #e1e6e1;
  --blue: #398c45;
  --blue2: #2f7f3b;
  --green: #54bd61;
  /* Neither green nor red: a check that is late or a source that is down. */
  --attention: #b7791f;
  --shadow: 0 10px 28px rgba(39,95,48,.10), 0 1px 3px rgba(15,23,42,.04);
  --radius: 20px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
}

/* Profile and control center */
.ui-icon{width:20px;height:20px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.profile-identity-card{position:relative;align-items:center}
.profile-identity-card .profile-avatar{width:56px;height:56px;flex:0 0 56px;border-radius:18px;background:linear-gradient(145deg,#def7e7,#eefbf2);color:var(--accent);font-size:22px}
.profile-status-pill{display:flex;align-items:center;gap:6px;padding:7px 9px;border-radius:999px;background:#f2f3f3;color:var(--muted);font-size:10px;font-weight:800;white-space:nowrap}
.profile-status-pill i, .system-chip i{width:7px;height:7px;border-radius:50%;background:currentColor}.profile-status-pill.active{background:#e9f8ee;color:var(--accent)}
.search-pulse{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:12px;align-items:center;margin-bottom:10px;padding:16px;border:1px solid #b9e2c5;border-radius:22px;background:linear-gradient(135deg,#f4fcf6 0%,#fff 68%);box-shadow:0 10px 30px rgba(21,126,60,.07)}
.pulse-radar{display:grid;place-items:center;width:52px;height:52px;border-radius:17px;background:#dcf6e5;color:var(--accent)}.search-pulse.active .pulse-radar{animation:pulseGlow 2.4s ease-in-out infinite}.pulse-radar .ui-icon{width:27px;height:27px}
.pulse-copy{min-width:0}.pulse-copy small{display:block;color:var(--accent);font-size:10px;font-weight:850;text-transform:uppercase;letter-spacing:.08em}.pulse-copy h2{margin:3px 0 2px;font-size:17px}.pulse-copy p{margin:0;color:var(--muted);font-size:11px}

.pulse-actions{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:8px}.pulse-actions button{display:flex;align-items:center;justify-content:center;gap:7px;min-height:42px;border:1px solid #b9e2c5;border-radius:13px;background:#fff;color:var(--accent);font-size:11px;font-weight:800}.pulse-actions button:first-child{border-color:var(--accent);background:var(--accent);color:#fff}

.profile-section-label{margin:18px 4px 7px;color:var(--muted);font-size:10px;font-weight:850;text-transform:uppercase;letter-spacing:.08em}
.setting-icon{display:grid;place-items:center;width:38px;height:38px;flex:0 0 38px;border-radius:12px;background:#eef8f1;color:var(--accent)}.setting-copy{min-width:0;flex:1}.setting-copy b,.setting-copy small{display:block}.setting-copy b{font-size:13px}.setting-copy small{margin-top:3px;color:var(--muted);font-size:10px;line-height:1.35}.setting-value{font-size:10px;font-weight:800;color:var(--muted)}.setting-value.is-active,.setting-value.is-current{color:var(--accent)}.setting-chevron{width:17px;height:17px;color:#9aa09c}
.privacy-policy summary{display:flex;align-items:center;gap:8px;min-height:60px;padding:8px 12px;list-style:none}.privacy-policy summary::-webkit-details-marker{display:none}.privacy-policy[open] .setting-chevron{transform:rotate(90deg)}

.admin-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.admin-head small{color:var(--accent);font-size:10px;font-weight:850}.admin-head h1{margin:2px 0;font-size:25px}.admin-head p{margin:0;color:var(--muted);font-size:10px}.admin-head button{display:grid;place-items:center;width:44px;height:44px;border:1px solid #dce5df;border-radius:14px;background:#fff;color:var(--accent)}.admin-head button.is-loading .ui-icon{animation:adminSpin .8s linear infinite}
.admin-kpis>div{display:flex;align-items:center;gap:9px;min-height:78px;text-align:left}.admin-kpis .ui-icon{color:var(--accent)}.admin-kpis span{display:flex;flex-direction:column;margin:0}.admin-kpis small{line-height:1.25}
.admin-card{border:1px solid #e2e9e4;border-radius:18px;background:#fff;box-shadow:0 8px 24px rgba(23,62,36,.04)}.admin-card h2{margin:0 0 12px;font-size:14px}.admin-card-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}.admin-card-title h2{margin:0}
.system-chip{display:flex;align-items:center;gap:6px;padding:6px 9px;border-radius:999px;background:#eaf8ef;color:#178b44;font-size:9px;font-weight:850}.system-chip.error,.system-chip.degraded{background:#fff0ee;color:#c74337}.system-chip.stale{background:#fff7df;color:#9b6b00}
.admin-system-grid,.delivery-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.admin-system-grid span,.delivery-grid span{display:flex;flex-direction:column;padding:10px;border-radius:12px;background:#f5f7f6;color:var(--muted);font-size:9px}.admin-system-grid b,.delivery-grid b{margin-top:4px;color:var(--text);font-size:13px}.delivery-grid{grid-template-columns:repeat(3,1fr)}.delivery-rate{color:var(--accent);font-size:18px}
.attention-row,.admin-all-clear{display:flex;align-items:center;gap:9px;padding:10px;border-radius:12px;background:#fff2ef;color:#b63e34}.admin-all-clear{background:#edf9f1;color:#168a43}.attention-row span{display:flex;flex-direction:column}.attention-row small{margin-top:2px}
.admin-bars{display:grid;gap:10px}.admin-bar-row{display:grid;grid-template-columns:minmax(85px,1fr) 1.4fr 28px;align-items:center;gap:8px;font-size:10px}.admin-bar-row>i{height:7px;border-radius:9px;background:#edf1ee;overflow:hidden}.admin-bar-row>i b{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#19a74b,#6ed68e)}.admin-bar-row strong{text-align:right}
.admin-search-wrap{display:flex;align-items:center;gap:8px;margin-bottom:5px;padding:0 12px;border:1px solid #dce5df;border-radius:13px}.admin-search-wrap .ui-icon{color:var(--muted)}.admin-search-wrap input{width:100%;border:0;background:transparent;outline:0;font-size:12px}
button.admin-user-row{grid-template-columns:38px minmax(0,1fr) auto 18px;gap:9px;min-height:58px}.admin-avatar{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:#eef8f1;color:var(--accent);font-style:normal;font-weight:850}.admin-user-row em{color:var(--muted);font-size:9px;font-style:normal}.admin-user-row .ui-icon{width:16px;color:#a6aca8}
.admin-events-card summary{display:flex;align-items:center;justify-content:space-between;list-style:none;font-size:14px;font-weight:850}.admin-events-card summary::-webkit-details-marker{display:none}.admin-events-card[open] summary .ui-icon{transform:rotate(90deg)}.admin-events-list{margin-top:8px}.admin-event-row{grid-template-columns:8px minmax(0,1fr) auto;gap:9px}.admin-event-row>i{width:8px;height:8px;border-radius:50%;background:#43bd68}.admin-event-row time{color:var(--muted);font-size:8px}
.admin-error{margin-top:10px}.admin-error summary{color:#a84339;font-size:10px}.admin-error code{display:block;max-height:90px;margin-top:6px;padding:8px;overflow:auto;border-radius:9px;background:#fff3f1;color:#8b342d;font-size:9px;white-space:pre-wrap}
@keyframes pulseGlow{50%{box-shadow:0 0 0 7px rgba(24,168,74,.10)}}@keyframes adminSpin{to{transform:rotate(360deg)}}
@media(max-width:360px){.search-pulse{grid-template-columns:44px minmax(0,1fr) 56px;padding:12px;gap:9px}.pulse-radar{width:44px;height:44px}.pulse-copy h2{font-size:15px}.delivery-grid{gap:5px}.delivery-grid span{padding:8px 5px}}
@media(prefers-reduced-motion:reduce){.search-pulse.active .pulse-radar,.admin-head button.is-loading .ui-icon{animation:none}}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); }
.boot-splash{display:grid;position:fixed;inset:0;z-index:9999;place-items:center;background:var(--tg-bg,#edf6ed);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .28s ease,visibility 0s linear .28s}
.boot-brand{display:grid;place-items:center;gap:17px;transform:translateY(-2vh)}
.boot-mark{position:relative;width:82px;height:82px;display:grid;place-items:center;isolation:isolate;animation:boot-mark-enter .55s cubic-bezier(.2,.85,.3,1) both}
.boot-mark::before{content:"";position:absolute;inset:-8px;z-index:-1;border-radius:28px;background:conic-gradient(from 20deg,transparent 0 35%,rgba(20,165,65,.18) 47%,#14a541 55%,transparent 68%);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 0);mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 0);animation:boot-scan 1.35s linear infinite}
.boot-mark::after{content:"";position:absolute;inset:5px;z-index:-1;border-radius:23px;background:rgba(20,165,65,.12);animation:boot-glow 1.8s ease-in-out infinite}
.boot-mark svg{width:64px;height:64px;overflow:visible;filter:drop-shadow(0 10px 18px rgba(20,112,52,.2))}.boot-mark svg rect{fill:#14a541}.boot-mark svg path{fill:#fff}
.boot-source{position:absolute;width:7px;height:7px;border-radius:50%;background:#14a541;box-shadow:0 0 0 5px rgba(20,165,65,.1);animation:boot-source 1.35s ease-in-out infinite}.boot-source-one{left:-13px;top:17px}.boot-source-two{right:-12px;top:30px;animation-delay:.18s}.boot-source-three{left:11px;bottom:-12px;animation-delay:.36s}
.boot-brand strong{font-size:25px;font-weight:820;letter-spacing:-.7px;color:var(--text);animation:boot-word-enter .55s .14s cubic-bezier(.2,.85,.3,1) both}.boot-brand strong span{color:#14a541}
.boot-progress{width:86px;height:3px;overflow:hidden;border-radius:999px;background:rgba(20,165,65,.14);animation:boot-word-enter .55s .22s ease both}.boot-progress i{display:block;width:42%;height:100%;border-radius:inherit;background:#14a541;animation:boot-progress 1.05s ease-in-out infinite}
body.app-booting .boot-splash{opacity:1;visibility:visible;pointer-events:auto;transition:none}
body.app-booting #app,body.app-booting #accessGate{visibility:hidden}
@keyframes boot-scan{to{transform:rotate(360deg)}}
@keyframes boot-glow{50%{transform:scale(1.12);opacity:.42}}
@keyframes boot-source{0%,100%{transform:scale(.7);opacity:.35}45%{transform:scale(1);opacity:1}}
@keyframes boot-progress{0%{transform:translateX(-115%)}55%,100%{transform:translateX(245%)}}
@keyframes boot-mark-enter{from{opacity:0;transform:scale(.78) rotate(-7deg)}to{opacity:1;transform:none}}
@keyframes boot-word-enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.boot-mark,.boot-mark::before,.boot-mark::after,.boot-source,.boot-brand strong,.boot-progress,.boot-progress i{animation:none}}
body {
  background: radial-gradient(circle at 50% -10%, rgba(94,168,85,.24), transparent 30%), var(--bg);
  padding-top: env(safe-area-inset-top, 0px);
}
button, input, select { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }

#app { min-height: 100vh; padding-bottom: 114px; }

.hidden { visibility: hidden !important; }
.form-row.field-hidden { display: none !important; }

.content { width: min(760px, 100%); margin: 0 auto; padding: 14px; }

.hero {
  min-height: 136px;
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 24px; margin-bottom: 14px; border-radius: var(--radius);
  background: linear-gradient(135deg, #4fa85b, #2e7d3b);
  color: white; box-shadow: var(--shadow);
}
.hero h2 { margin: 0; font-size: 18px; }
.hero small { display: inline-block; margin-top: 10px; padding: 7px 13px; background: white; color: #8c28b8; border-radius: 999px; font-size: 12px; }

.card {
  background: var(--card); border: 1px solid rgba(220,221,226,.8);
  border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 14px; overflow: hidden;
}

.empty { font-size: 14px; padding: 28px 24px; }
.section-title {
  padding: 21px 26px 8px; color: #74777e; font-size: 13px; text-transform: uppercase;
  letter-spacing: 1.5px; font-weight: 600;
}

.category-row, .filter-row {
  width: calc(100% - 52px); margin: 0 26px; min-height: 66px;
  display: grid; grid-template-columns: 46px 1fr 28px; align-items: center;
  border-top: 1px solid var(--line); cursor: pointer;
}
.category-row:first-of-type { border-top: 1px solid var(--line); }
.category-icon {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 10px;
  background: #edf9f1;
  color: #18a94b;
  box-shadow: inset 0 0 0 1px rgba(24, 169, 75, .04);
}
/* Both kinds of mark, or the three that are files would keep the 20px of
   the base rule and stand half the size of their neighbours (seen on the
   owner's phone, 21 September 2026). */
.category-icon svg,
.category-icon img.category-picture {
  width: 32px;
  height: 32px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}
.category-glyph {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}
/* Every rubric's mark is a picture now: a file for the three the owner
   supplied, an inline drawing for the rest. Both carry their own colours, so
   the single-colour stroke above must not reach them; and both are cropped to
   themselves, so they fill whatever place they are given instead of sitting
   in a square with air around it (the owner, 21 September 2026). The sizes
   stay where they were, per place, and only grow where a plate was dropped. */
/* `.category-icon svg` (0,1,1) outranks a lone class, and it paints a stroke
   in the app's green: a coloured drawing came out outlined. Every place that
   styles the old glyph is answered here by name. */
.category-picture,
.category-icon .category-picture,
.category-icon svg.category-picture,
.filter-chip-icon .category-picture,
.wizard-category-group-icon .category-picture,
.wizard-control-with-icon>span>.category-picture,
.car-brand-mark .category-picture,
.listing-placeholder .category-picture,
.generic-title .category-picture,
.match-filter-option .category-picture {
  fill: none;
  stroke: none;
  object-fit: contain;
  color: inherit;
}
/* A picture needs no plate under it: the frame and the tinted ground were
   there to give a thin one-colour glyph a body of its own. A paused filter
   still reads as paused -- the whole card fades and keeps its own border. */
.category-icon:has(.category-picture),
.filter-chip-icon:has(.category-picture),
.filter-chip-card.is-inactive .filter-chip-icon:has(.category-picture),
[data-theme="dark"] .filter-chip-icon:has(.category-picture),
[data-theme="dark"] .filter-chip-card.is-inactive .filter-chip-icon:has(.category-picture) {
  border: 0;
  background: none;
  box-shadow: none;
}

.category-row strong { font-size: 14px; letter-spacing: -.2px; }
.chevron { color: #c4c6cc; font-size: 30px; line-height: 1; text-align: right; }

.form-card { padding: 10px 26px 18px; }
.form-row {
  min-height: 82px; display: grid; grid-template-columns: minmax(125px, 1fr) minmax(140px, 1fr);
  gap: 14px; align-items: center;
}
.form-row label { font-size: 14px; }
.form-control {
  width: 100%; border: 0; border-bottom: 2px solid #d8d9dd; padding: 13px 4px 8px;
  outline: none; background: transparent; font-size: 14px; text-align: right; color: #202124;
}
.form-control:focus { border-color: var(--blue); }
select.form-control { text-align-last: right; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.input-unit { position: relative; }
.input-unit .unit { position: absolute; right: 2px; bottom: 11px; font-size: 14px; }
.input-unit input { padding-right: 28px; }

.save-wrap {
  position: static;
  padding: 12px 0 4px;
  background: transparent;
}
.primary {
  width: 100%; border: 0; border-radius: 18px; padding: 18px; background: var(--blue);
  color: white; font-size: 15px; font-weight: 700; cursor: pointer; box-shadow: 0 10px 26px rgba(8,125,245,.22);
}
.primary:active { transform: scale(.995); }

.bottom-nav {
  position: fixed; z-index: 30; left: 50%; bottom: max(14px, env(safe-area-inset-bottom));
  transform: translateX(-50%); width: min(650px, calc(100% - 48px));
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  padding: 9px; border-radius: 999px; background: rgba(255,255,255,.70);
  box-shadow: 0 14px 45px rgba(16,24,40,.12); backdrop-filter: blur(22px);
}
.nav-pill {
  border: 0; border-radius: 999px; padding: 15px 12px; color: #73767d;
  font-size: 14px; font-weight: 700; background: rgba(250,250,252,.78); cursor: pointer;
}
.nav-pill.active { color: var(--blue2); background: white; }

.status-card {
  display: flex; align-items: center; justify-content: space-between;
  padding: 25px 26px; font-size: 17px;
}
.status { padding: 6px 13px; border-radius: 999px; background: var(--green); color: white; font-size: 13px; }

.listing {
  display: grid; grid-template-columns: 118px 1fr; gap: 15px; padding: 15px;
  border-bottom: 1px solid var(--line); cursor: pointer;
}
.listing:last-child { border-bottom: 0; }
.listing img {
  width: 118px; height: 92px; object-fit: cover; border-radius: 14px; background: #e8e9ed;
}
.listing .placeholder {
  width: 118px; height: 92px; border-radius: 14px; background: #e8e9ed; display:grid; place-items:center; font-size: 27px;
}
.listing h3 { margin: 2px 0 8px; font-size: 14px; }
.meta { color: #7e8188; font-size: 11px; }
.price { margin-top: 9px; font-size: 15px; font-weight: 750; }

.toast {
  position: fixed; left: 50%; top: 108px; z-index: 100; transform: translate(-50%, -20px);
  opacity: 0; pointer-events:none; padding: 11px 17px; border-radius: 999px;
  width:max-content; max-width:min(340px,calc(100vw - 32px)); text-align:center; line-height:1.35;
  color:white; background: rgba(20,22,27,.92); transition:.2s ease;
}
.toast.show { transform: translate(-50%, 0); opacity: 1; }

@media (max-width: 430px) {
  .content { padding: 10px; }
  .card { border-radius: 18px; }
  .section-title { padding-left: 20px; padding-right: 20px; }
  .category-row{ margin-left:20px; margin-right:20px; width: calc(100% - 40px); }
  .form-card { padding-left: 20px; padding-right: 20px; }
  .form-row { grid-template-columns: 1fr 1.18fr; }
  .form-row label { font-size: 14px; }
}

body.keyboard-open .bottom-nav {
  display: none;
}

body.keyboard-open #app {
  padding-bottom: 20px;
}

body.keyboard-open .save-wrap {
  position: static;
}

@media (max-height: 620px) {
  .bottom-nav { position: static; transform: none; margin: 12px auto; }
  #app { padding-bottom: 16px; }
}

/* Approved multi-filter UI */

.web-back {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 10px);
  left: 12px;
  z-index: 40;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(220,225,220,.9);
  border-radius: 999px;
  background: rgba(255,255,255,.9);
  color: var(--blue2);
  box-shadow: 0 5px 18px rgba(28,40,31,.1);
  backdrop-filter: blur(16px);
  font-size: 34px;
  line-height: 1;
}
.web-back span { transform: translateY(-2px); }
.content { padding-top: 12px; }

.saved-filters-card { overflow: hidden; }

.filters-horizontal {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 10px 20px 16px;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}

/* v2 — Telegram-native theme, dashboard and listing experience */
:root{
  --surface:var(--tg-section-bg,#fff);
  --surface-soft:var(--tg-secondary-bg,#f3f5f4);
  --ink:var(--tg-text,#1f2421);
  --muted:var(--tg-hint,#6f7771);
  --accent:#159f3f;
  --accent-ink:#fff;
  --line:color-mix(in srgb,var(--ink) 12%,transparent);
  /* Parser.lv Premium — the paid product's own palette. Every Premium
     surface paints from these and only these, so the offer looks like one
     product on the home screen, on the profile and in the source picker.
     The dark block below redefines the same names; nothing here may be
     left undefined there. */
  --premium-gold:#ffd166;
  --premium-ink:#fff;
  --premium-ink-soft:color-mix(in srgb,#fff 92%,transparent);
  --premium-sheen:color-mix(in srgb,#fff 55%,transparent);
  --premium-line:color-mix(in srgb,var(--accent) 55%,#000 6%);
  /* Deep enough that white reads on it — measured, not guessed: the title
     clears 4.5:1 and the sentence under it clears it too. */
  --premium-field:radial-gradient(120% 150% at 88% -12%,color-mix(in srgb,var(--premium-gold) 48%,transparent) 0%,transparent 58%),
    radial-gradient(88% 130% at 4% 112%,color-mix(in srgb,var(--premium-gold) 18%,transparent) 0%,transparent 62%),
    linear-gradient(118deg,color-mix(in srgb,var(--accent) 80%,#000 20%) 0%,color-mix(in srgb,var(--accent) 70%,#000 30%) 55%,color-mix(in srgb,var(--accent) 58%,#000 42%) 100%);
  --premium-shadow:0 12px 28px color-mix(in srgb,var(--accent) 34%,transparent);
  --premium-mark-bg:#fff;
  --premium-mark-ink:#12833a;
  --premium-cta-bg:linear-gradient(135deg,#ffe28f 0%,var(--premium-gold) 46%,#f4b333 100%);
  --premium-cta-ink:#4a2f00;
  --premium-tag-bg:#ffd166;
  --premium-tag-ink:#4a2f00;
}
body{background:var(--tg-bg,#f4f5f9);color:var(--ink)}
.card, .profile-card, .listing-card, .access-card{background:var(--surface);color:var(--ink);border-color:var(--line)}
.form-control,.access-card input,.feedback-form select,.feedback-form textarea{background:var(--surface-soft);color:var(--ink);border-color:var(--line)}
.bottom-nav{background:color-mix(in srgb,var(--surface) 92%,transparent);border-color:var(--line);backdrop-filter:blur(18px)}
.nav-pill{color:var(--ink)}


.listing-mode-hint{margin:0 3px 14px;color:var(--muted);font-size:12px}
.listing-mode-hint.match-context {
  margin: 0 0 14px;
  padding: 11px 13px;
  border-left: 4px solid var(--accent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 9%, var(--surface));
  color: color-mix(in srgb, var(--accent) 82%, var(--ink));
  font-weight: 750;
}
.listing-grid{gap:12px}
.listing-card{grid-template-columns:132px minmax(0,1fr);gap:14px;padding:12px;cursor:pointer;overflow:hidden;transition:transform .15s ease,box-shadow .15s ease}
.listing-card:active{transform:scale(.985)}
.listing-card.is-new{border-color:color-mix(in srgb,var(--accent) 48%,var(--line));box-shadow:0 8px 26px color-mix(in srgb,var(--accent) 11%,transparent)}
.listing-photo{position:relative}
.listing-photo img,.listing-placeholder{width:132px;height:132px}
.listing-new{position:absolute;left:7px;top:7px;background:var(--accent);color:var(--accent-ink);box-shadow:0 2px 8px rgba(0,0,0,.16)}
.listing-copy{display:flex;min-width:0;flex-direction:column}
.listing-copy h3{margin:6px 0 4px;font-size:16px;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.listing-price{font-size:19px;letter-spacing:-.3px}
.listing-meta-row{display:flex;flex-wrap:wrap;gap:5px;margin:2px 0 8px}
.listing-meta-row span{padding:4px 7px;border-radius:7px;background:var(--surface-soft);color:var(--muted);font-size:10px}
.open-sslv{float:none;margin:auto 0 0;align-self:flex-start;background:transparent;color:var(--accent);border-color:color-mix(in srgb,var(--accent) 60%,transparent)}

.browse-refresh,.refresh-link{color:var(--accent)}

@media(max-width:370px){
  .listing-card{grid-template-columns:108px minmax(0,1fr);gap:10px}
  .listing-photo img,.listing-placeholder{width:108px;height:118px}
  .listing-copy h3{font-size:14px}
  .listing-price{font-size:17px}
}
@media(min-width:720px){
  .listing-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .listing-card{grid-template-columns:120px minmax(0,1fr)}
  .listing-photo img,.listing-placeholder{width:120px;height:132px}
}
[data-theme="dark"] .empty-art{background:color-mix(in srgb,var(--accent) 16%,var(--surface));color:var(--accent)}
[data-theme="dark"] .access-gate{background:color-mix(in srgb,var(--tg-bg,#101412) 94%,transparent)}
.filters-horizontal::-webkit-scrollbar { display: none; }

.filter-chip-card {
  box-sizing:border-box;
  flex: 0 0 210px;
  min-height: 210px;
  border: 1px solid #dfe5df;
  border-radius: 18px;
  padding: 14px;
  background: #fff;
  text-align: left;
  scroll-snap-align: start;
  cursor: pointer;
}
.filter-chip-card.is-active {
  border-color: #379146;
  box-shadow: inset 0 0 0 1px #379146;
}
.filter-chip-card.is-inactive { opacity: .72; }

.filter-chip-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.filter-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  color: #34803f;
}
.filter-chip-card.is-inactive .filter-state { color: #85898e; }
.filter-state-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #4eb55a;
}
.filter-chip-card.is-inactive .filter-state-dot { background: #b9bdc1; }

.filter-delete {
  width: 29px;
  height: 29px;
  border: 0;
  border-radius: 9px;
  background: #fff0f0;
  color: #e34848;
  font-size: 15px;
  cursor: pointer;
}
.filter-chip-icon { margin-top: 12px; font-size: 22px; }
.filter-chip-title {
  display: block;
  margin-top: 5px;
  font-size: 14px;
  line-height: 1.2;
}
.filter-chip-details {
  display: block;
  margin-top: 8px;
  color: #777d84;
  font-size: 11px;
  line-height: 1.55;
}

.add-filter-card {
  flex: 0 0 145px;
  min-height: 210px;
  border: 2px dashed #d6ddd6;
  border-radius: 18px;
  background: rgba(255,255,255,.76);
  color: #318841;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  scroll-snap-align: start;
}
.add-filter-plus {
  display: block;
  font-size: 32px;
  font-weight: 300;
  margin-bottom: 8px;
}
.filters-hint {
  padding: 0 20px 17px;
  color: #7b8086;
  text-align: center;
  font-size: 10px;
}

body.keyboard-open .bottom-nav { display: none; }

/* Core mobile layout */

/* Never let iOS auto-zoom form fields.
   16px is the important Safari threshold. */
input,
select,
textarea {
  font-size: 16px !important;
}

/* Page rhythm */
.content {
  padding-top: 10px !important;
}

/* Saved filters block */
.saved-filters-card {
  /* The card's own foot, under the hint. Twelve pixels here plus the hint's
     own padding read as a hole between the filters and the Premium offer
     below them (the owner, 8 September 2026). */
  padding-bottom: 4px !important;
  overflow: hidden;
}

.saved-filters-card .section-title {
  padding: 18px 20px 8px !important;
}

.filters-horizontal {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  overflow-x: auto !important;
  padding: 8px 20px 10px !important;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.filters-horizontal::-webkit-scrollbar {
  display: none;
}

/* Main filter card: compact square instead of tall rectangle */
.filter-chip-card {
  position: relative !important;
  flex: 0 0 184px !important;
  width: 184px !important;
  min-width: 184px !important;
  height: 184px !important;
  min-height: 184px !important;
  padding: 12px !important;
  border-radius: 16px !important;
  background: #fff !important;
  display: flex !important;
  flex-direction: column !important;
  scroll-snap-align: start;
  overflow: hidden;
}

.filter-chip-card.is-active {
  border: 2px solid #318d43 !important;
  box-shadow: none !important;
}

.filter-chip-card.is-inactive {
  border: 1px solid #dce2dc !important;
  opacity: .72;
}

/* Header inside filter card */
.filter-chip-top {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 0 0 auto;
}

.filter-state {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #eef0ee !important;
  padding: 5px 9px !important;
  color: #31833e !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

.filter-state-dot {
  width: 9px !important;
  height: 9px !important;
  flex: 0 0 9px;
  border-radius: 999px !important;
  background: #48b457 !important;
}

.filter-delete {
  width: 30px !important;
  height: 30px !important;
  flex: 0 0 30px;
  border: 0 !important;
  border-radius: 10px !important;
  background: #fff0f0 !important;
  color: #e44646 !important;
  font-size: 18px !important;
  line-height: 1 !important;
}

/* Content in card is packed toward the bottom.
   PRICE -> GREEN BORDER bottom gap is exactly 10px. */
.filter-chip-body {
  flex: 1 1 auto !important;
  min-height: 0;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
}

.filter-chip-icon {
  margin: 0 0 5px !important;
  font-size: 25px !important;
  line-height: 1 !important;
}

.filter-chip-title {
  display: block !important;
  margin: 0 0 5px !important;
  font-size: 17px !important;
  line-height: 1.15 !important;
  font-weight: 750 !important;
}

.filter-chip-details {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #737980 !important;
  font-size: 14px !important;
  line-height: 1 !important;
}

/* With 12px card padding and 2px active border,
   the visual whitespace after the price is ~10px. */
.filter-chip-card.is-active .filter-chip-details {
  margin-bottom: -2px !important;
}

/* Add-filter card matches the same square geometry */
.add-filter-card {
  flex: 0 0 184px !important;
  width: 184px !important;
  min-width: 184px !important;
  height: 184px !important;
  min-height: 184px !important;
  padding: 12px !important;
  border: 2px dashed #d5ddd5 !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,.78) !important;
  color: #318d43 !important;
  display: grid !important;
  place-content: center !important;
  text-align: center !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}

.add-filter-plus {
  display: block !important;
  margin: 0 0 6px !important;
  font-size: 38px !important;
  line-height: .9 !important;
  font-weight: 300 !important;
}

.filters-hint {
  /* The hint sits between the filters and the Premium offer; the gap under it
     was doing the work of a section break (the owner, 8 September 2026). */
  padding: 6px 20px 0 !important;
  text-align: center !important;
  color: #777d84 !important;
  font-size: 12px !important;
  line-height: 1.3 !important;
}

/* Notification promo */
.promo-banner {
  position: relative;
  min-height: 128px;
  margin: 10px 0 14px;
  overflow: hidden;
  border: 1px solid #d7eee0;
  border-radius: 16px;
  background: linear-gradient(112deg, #eefaf2 0%, #e4f5e9 67%, #d8efdf 100%);
  box-shadow: inset 0 1px rgba(255,255,255,.75), 0 5px 16px rgba(35,111,59,.055);
}
.promo-copy {
  position: relative;
  z-index: 2;
  display: grid;
  width: 57%;
  min-height: 128px;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 18px 0 18px 16px;
}
.promo-copy h2 {
  margin: 0;
  color: #173d24;
  font-size: 14px;
  font-weight: 850;
  letter-spacing: -.025em;
  line-height: 1.2;
}
.promo-copy p {
  margin: 7px 0 0;
  color: #6f8476;
  font-size: 9px;
  font-weight: 600;
  line-height: 1.35;
}
.promo-bell {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  background: #18aa4c;
  color: #fff;
  box-shadow: 0 7px 16px rgba(24, 170, 76, .22);
}
.promo-bell svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

/* ── Parser.lv Premium ──────────────────────────────────────────────────
   One paid product, so one field wherever it is offered. The banner (on the
   home screen and, since 17 September 2026, the profile) and the Premium
   page's card share every declaration in this section: same field, same gold
   rim, same star, same call to action. The source picker borrows the same gold for the board it
   has to keep shut. All of it paints from the --premium-* tokens, which are
   defined for both themes, so nothing here can be right in one and wrong in
   the other.

   This section deliberately sits after .promo-bell: an earlier
   .promo-bell-subscription block lost to it on source order and the star
   badge came out green on green. Measured with getComputedStyle, not read. */
.promo-subscription,
.profile-card.subscription-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid var(--premium-line);
  background: var(--premium-field);
  box-shadow: var(--premium-shadow);
  color: var(--premium-ink);
}
/* Content sits above the sweeping light. */
.promo-subscription > *,
.subscription-card > * { position: relative; z-index: 2; }
/* A gold light travelling along the top edge — the mark every Premium
   surface carries, and the cheapest way to say «this one is the paid one». */
.promo-subscription::before,
.subscription-card::before {
  content: "";
  position: absolute;
  z-index: 3;
  top: 0;
  right: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    color-mix(in srgb, var(--premium-gold) 25%, transparent) 22%,
    var(--premium-gold) 50%,
    color-mix(in srgb, var(--premium-gold) 25%, transparent) 78%,
    transparent 100%);
  background-size: 220% 100%;
  animation: premium-rim 4.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes premium-rim {
  0%, 100% { background-position: 118% 0; }
  50% { background-position: -18% 0; }
}
/* A light sweeps across the field. */
.promo-subscription::after,
.subscription-card::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: -60%;
  bottom: -60%;
  left: -35%;
  width: 26%;
  transform: rotate(18deg);
  background: linear-gradient(90deg, transparent, var(--premium-sheen), transparent);
  animation: promo-sheen 3.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes promo-sheen {
  0% { left: -35%; opacity: 0; }
  12% { opacity: .9; }
  60% { opacity: .55; }
  100% { left: 125%; opacity: 0; }
}
/* The star: one disc, one gold ring, the same on both surfaces. */
.promo-bell-subscription,
.premium-mark {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  border-radius: 50%;
  background: var(--premium-mark-bg);
  color: var(--premium-mark-ink);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--premium-gold) 60%, transparent), 0 6px 14px rgba(0,0,0,.18);
  animation: promo-badge 2.4s ease-in-out infinite;
}
.promo-bell-subscription svg,
.premium-mark svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  stroke: none;
}
@keyframes promo-badge {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 2px color-mix(in srgb, var(--premium-gold) 60%, transparent), 0 6px 14px rgba(0,0,0,.18); }
  50% { transform: scale(1.06); box-shadow: 0 0 0 5px color-mix(in srgb, var(--premium-gold) 68%, transparent), 0 8px 20px rgba(0,0,0,.22); }
}
/* One call to action, and it carries the price. Gold on the green field so
   the thing to press is the brightest thing on the screen. */
.promo-subscription-action button,
.subscription-card .primary,
.subscription-card .profile-action {
  width: 100%;
  min-height: 48px;
  padding: 0 16px;
  border: 0;
  border-radius: 13px;
  background: var(--premium-cta-bg);
  color: var(--premium-cta-ink);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: -.01em;
  line-height: 1.25;
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
  animation: promo-cta 2.4s ease-in-out infinite;
}
@keyframes promo-cta {
  0%, 100% { box-shadow: 0 6px 16px rgba(0,0,0,.18); }
  50% { box-shadow: 0 6px 16px rgba(0,0,0,.18), 0 0 0 4px color-mix(in srgb, var(--premium-gold) 32%, transparent); }
}
.promo-subscription-action button:disabled,
.subscription-card .primary:disabled { opacity: .62; animation: none; }

/* The banner on the home screen. */
.promo-subscription {
  display: grid;
  min-height: 104px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}
.promo-subscription .promo-copy {
  width: auto;
  max-width: none;
  min-height: 0;
  gap: 11px;
  padding: 17px 8px 17px 16px;
}
.promo-subscription-action {
  display: grid;
  justify-items: end;
  gap: 5px;
  padding: 17px 16px 17px 8px;
}

/* The home screen's Premium block, on the profile (17 September 2026): the
   block keeps its own look; only its outer margins give way to the profile's
   rhythm, and the manage row below it is the settings list's own row. */
.profile-premium { display: grid; gap: 8px; margin: 0 0 12px; }
.profile-premium > .promo-banner,
.profile-premium > .promo-premium-on,
.profile-screen .profile-premium > .profile-settings { margin: 0; }

/* The Premium page's card — the same product, in a card's shape. */
.profile-card.subscription-card {
  display: grid;
  gap: 10px;
  padding: 16px;
}
.subscription-head { display: flex; align-items: center; gap: 11px; }
.subscription-title { min-width: 0; }
/* The product's name, the same weight and size on both surfaces. */
.promo-subscription .promo-copy h2,
.subscription-head b {
  display: block;
  margin: 0;
  color: var(--premium-ink);
  font-size: 15px;
  font-weight: 850;
  letter-spacing: -.02em;
  line-height: 1.2;
}
/* And the sentence under it, likewise. */
.promo-subscription .promo-copy p,
.subscription-line {
  margin: 0;
  color: var(--premium-ink-soft);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
}
/* Only the gap under the name is per-surface; everything above is shared. */
.promo-subscription .promo-copy p { margin-top: 6px; }
/* The lesser line is lesser by size, never by fading it out of reach. */
.subscription-filters { font-size: 10px; }
.subscription-error { margin:0; padding:8px 10px; border-radius:10px; background:color-mix(in srgb,var(--premium-ink) 17%,transparent); color:var(--premium-ink); font-size:10px; line-height:1.4; }

/* Every animation in this section stops for a reader who asked the system
   for less motion; the sweeping light is hidden rather than frozen mid-pass. */
/* The boards the offer opens, named under its line. */
/* The corner of the first screen. Off-state is an invitation, on-state is a
   mark; both wear the Premium tokens so they cannot drift from the offer. */
/* The plaque shares the section's own title row rather than floating above
   it: they were on two levels and read as two unrelated things (8 Sep 2026). */
.section-title.section-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.premium-corner {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  padding: 5px 11px;
  border: 1px solid color-mix(in srgb, var(--premium-gold) 62%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--premium-gold) 16%, var(--surface));
  color: color-mix(in srgb, var(--premium-cta-ink) 82%, var(--text));
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.premium-corner.is-on { background: var(--premium-cta-bg); color: var(--premium-cta-ink); border-color: transparent; }
.premium-corner-star { display: grid; width: 13px; height: 13px; place-items: center; }
.premium-corner-star svg { width: 13px; height: 13px; fill: currentColor; stroke: none; }
.promo-subscription-boards { display: flex; flex-wrap: wrap; margin: 7px 0 0; gap: 4px; }
/* Written to match the element in its own context rather than shouted with
   !important: the pill sits inside the board list and must outrank it. */
.promo-subscription-boards i.promo-boards-filters {
  background: color-mix(in srgb, var(--premium-gold) 30%, transparent);
  color: var(--premium-ink);
}
.promo-subscription-boards i {
  padding: 3px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--premium-ink) 20%, transparent);
  color: var(--premium-ink);
  font-size: 8px;
  font-style: normal;
  font-weight: 800;
}
/* Premium already on: a mark, not a pitch — and the size of a mark. It used
   to wear the offer's whole banner, 104px of gradient and a sweeping light
   for a fact the reader already knows; the owner asked for far less on
   8 September 2026. Same palette as the corner plaque, so the two read as one
   product. */
.promo-premium-on {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 16px 0 18px;
  padding: 7px 12px;
  border: 1px solid color-mix(in srgb, var(--premium-gold) 55%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--premium-gold) 15%, var(--surface));
}
.promo-premium-on b {
  min-width: 0;
  /* The plaque's own ink is meant for gold; on this soft field it turned dark
     brown on dark olive in the night theme (measured, 8 September 2026). The
     text colour is the theme's own, and gold is carried by the star and the
     edge. */
  color: var(--text);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: -.01em;
}
.promo-premium-on small {
  margin-left: auto;
  padding-left: 8px;
  /* Muted alone measured 4.36:1 on this pale field — under the bar for text
     this size, so it is pulled towards the theme's own ink. */
  color: color-mix(in srgb, var(--muted) 78%, var(--text));
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
}
.promo-premium-on-star {
  display: grid;
  width: 15px;
  height: 15px;
  flex: none;
  place-items: center;
  color: color-mix(in srgb, var(--premium-gold) 62%, var(--text));
}
.promo-premium-on-star svg { width: 15px; height: 15px; fill: currentColor; stroke: none; }
/* The card a reader lands on when Telegram did not hand this window its
   identity back after paying. */
.payment-return b { display: block; margin-bottom: 6px; font-size: 15px; font-weight: 850; }
.payment-return p { margin: 0 0 12px; }
@media (prefers-reduced-motion: reduce) {
  .promo-subscription::after,
  .promo-bell-subscription,
  .promo-subscription-action button,
  .promo-subscription::before,
  .subscription-card::before,
  .subscription-card::after,
  .subscription-card .primary,
  .subscription-card .profile-action,
  .premium-mark { animation: none; }
  .promo-subscription::after,
  .subscription-card::after { opacity: 0; }
  .promo-subscription::before,
  .subscription-card::before { background-position: 50% 0; }
}
/* Phone-first: the offer stacks and the call to action spans the card, so
   the price is on a target the thumb cannot miss. */
@media (max-width: 560px) {
  .promo-subscription { grid-template-columns: minmax(0, 1fr); }
  .promo-subscription .promo-copy { padding: 16px 16px 12px; }
  .promo-subscription-action { justify-items: stretch; padding: 0 16px 16px; }
}
.promo-device {
  position: absolute;
  z-index: 1;
  top: 4px;
  right: 0;
  width: 46%;
  height: 164px;
}
.promo-phone {
  position: absolute;
  top: 0;
  right: 26px;
  width: 91px;
  height: 158px;
  overflow: hidden;
  border: 4px solid #0d2119;
  border-radius: 22px;
  background: linear-gradient(155deg, #0e704a, #164c39 64%, #0b2e24);
  box-shadow: 0 10px 22px rgba(14, 57, 38, .24);
  color: #fff;
  transform: rotate(-7deg);
  transform-origin: 50% 58%;
}
.promo-phone i {
  position: absolute;
  top: 4px;
  left: 50%;
  width: 35px;
  height: 8px;
  border-radius: 0 0 6px 6px;
  background: #09140f;
  transform: translateX(-50%);
}
.promo-phone b {
  display: block;
  margin-top: 23px;
  font-size: 17px;
  font-weight: 450;
  text-align: center;
}
.promo-phone span {
  position: absolute;
  right: -22px;
  bottom: -24px;
  width: 90px;
  height: 90px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 50%;
  box-shadow: -22px -30px 0 rgba(255,255,255,.04);
}
.promo-notification {
  position: absolute;
  z-index: 2;
  top: 45px;
  right: 1px;
  display: grid;
  width: 148px;
  min-height: 48px;
  grid-template-columns: minmax(0, 1fr) 31px;
  align-items: center;
  gap: 6px;
  padding: 6px 7px;
  border: 1px solid rgba(22, 72, 40, .08);
  border-radius: 10px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 8px 18px rgba(24, 64, 40, .18);
  color: #1d3024;
  transform: rotate(-7deg);
}
.promo-notification span { display: flex; min-width: 0; flex-direction: column; }
.promo-notification strong { font-size: 7px; line-height: 1.1; }
.promo-notification small { margin-top: 1px; color: #647368; font-size: 5.5px; font-weight: 650; line-height: 1.15; }
.promo-notification span > b { margin-top: 2px; overflow: hidden; font-size: 5.5px; font-weight: 750; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }
.promo-notification img {
  width: 31px;
  height: 29px;
  border-radius: 6px;
  background: #f5f6f5;
  object-fit: contain;
}

.home-support-card {
  display:grid;
  width:100%;
  min-height:66px;
  grid-template-columns:42px minmax(0,1fr) 22px;
  align-items:center;
  gap:11px;
  margin:-4px 0 14px;
  padding:10px 13px;
  border:1px solid color-mix(in srgb,#f0b429 24%,var(--line));
  border-radius:16px;
  background:linear-gradient(105deg,color-mix(in srgb,#ffd86b 13%,var(--surface)),var(--surface) 64%);
  box-shadow:0 5px 16px rgba(111,76,10,.055);
  color:var(--ink);
  text-align:left;
}
.home-support-icon {
  display:grid;
  width:42px;
  height:42px;
  place-items:center;
  border-radius:14px;
  background:linear-gradient(145deg,#fff7ce,#ffd86b 62%,#f0b429);
  box-shadow:0 7px 16px rgba(189,123,0,.15),inset 0 1px rgba(255,255,255,.86);
  font-size:20px;
}
.home-support-copy { display:flex; min-width:0; flex-direction:column; gap:3px; }
.home-support-copy strong { font-size:13px; font-weight:850; line-height:1.2; }
.home-support-copy small { color:var(--muted); font-size:9px; font-weight:650; line-height:1.3; }
.home-support-chevron { color:#bd7b00; font-size:25px; font-weight:500; text-align:right; }
.home-support-card:active { transform:translateY(1px); }
.home-support-card:focus-visible { outline:2px solid color-mix(in srgb,#f0b429 58%,transparent); outline-offset:2px; }

/* Boards the app searches, right under the promo; the pill is the listing card's. */
.home-sources { display:flex; flex-wrap:wrap; align-items:center; gap:5px; margin:-4px 2px 12px; }
.home-sources-caption { margin-right:2px; color:var(--muted); font-size:11px; font-weight:700; line-height:1.3; }
.home-sources .listing-source { margin:0; padding:4px 7px; font-size:9px; line-height:1.2; }

.category-icon .category-icon-fill {
  fill: currentColor;
  stroke: none;
}

/* Categories: no search bar, compact rows */

.category-row {
  min-height: 54px !important;
  margin: 0 20px !important;
  width: calc(100% - 40px) !important;
}

.category-row strong {
  font-size: 16px !important;
}

.category-row .category-icon { width: 36px; height: 36px; }

.chevron {
  font-size: 28px !important;
}

/* Explicitly kill any stale category-search element */
input[placeholder="Поиск фильтров"]{
  display: none !important;
}

/* Premium is permanently removed */

/* Bottom navigation keeps approved proportions */
.bottom-nav .nav-pill {
  font-size: 16px !important;
}

/* Narrow iPhone widths */
@media (max-width: 390px) {
  .filter-chip-card,
  .add-filter-card {
    flex-basis: 172px !important;
    width: 172px !important;
    min-width: 172px !important;
    height: 172px !important;
    min-height: 172px !important;
  }

  .filters-horizontal {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

}

@media (max-width: 364px) {
  .promo-copy { width: 59%; padding-left: 13px; }
  .promo-copy h2 { font-size: 12px; }
  .promo-device { right: 0; width: 44%; }
  .promo-phone { right: 18px; width: 84px; height: 151px; }
  .promo-notification { width: 138px; min-height: 45px; }
  .promo-notification img { width: 27px; height: 27px; }
}

@media (min-width: 430px) {
  .promo-copy { max-width: 210px; }
  .promo-phone { right: 34px; width: 96px; height: 164px; }
  .promo-notification { width: 154px; min-height: 50px; }
}

/* Optional password gate. It deliberately reuses the existing visual language. */
.access-gate {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(244, 245, 249, .96);
  backdrop-filter: blur(18px);
}
.access-gate.hidden { display: none !important; }
.access-card {
  width: min(390px, 100%);
  padding: 30px 26px;
  border: 1px solid rgba(220,221,226,.9);
  border-radius: 24px;
  background: var(--card);
  box-shadow: 0 24px 70px rgba(16,24,40,.14);
  text-align: center;
}
.access-logo {
  width: 72px;
  height: 72px;
  margin: 0 auto 18px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  background: white;
  color: #23853a;
  font-size: 22px;
  font-weight: 850;
  letter-spacing: -1px;
  box-shadow: 0 2px 12px rgba(0,0,0,.07);
}
.access-card h2 { margin: 0; font-size: 20px; }
.access-card p { margin: 8px 0 20px; color: #777980; font-size: 14px; }
.access-card input {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 12px;
  padding: 15px 16px;
  border: 1px solid #d8d9dd;
  border-radius: 15px;
  background: #f8f9fb;
  color: #202124;
  font-size: 16px;
  outline: none;
}
.access-card input:focus { border-color: var(--blue); }
.access-card .primary { border-radius: 15px; padding: 15px; }
.access-error { min-height: 20px; margin-top: 12px; color: #c62828; font-size: 13px; }

/* One-time source guide shown after the selected profile language is loaded. */
.welcome-notice {
  position:fixed;
  inset:0;
  z-index:1200;
  display:grid;
  place-items:center;
  padding:max(20px,env(safe-area-inset-top)) 18px max(20px,env(safe-area-inset-bottom));
  background:rgba(17,28,20,.28);
  -webkit-backdrop-filter:blur(13px) saturate(118%);
  backdrop-filter:blur(13px) saturate(118%);
  opacity:1;
  transition:opacity .2s ease,visibility .2s ease;
}
.welcome-notice.hidden { visibility:hidden !important; opacity:0; pointer-events:none; }
body.welcome-notice-open { overflow:hidden; }
.welcome-notice-card {
  position:relative;
  width:min(390px,100%);
  max-height:calc(100dvh - 40px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  overflow:auto;
  box-sizing:border-box;
  padding:25px 22px 20px;
  border:1px solid rgba(44,173,81,.24);
  border-radius:26px;
  background:
    radial-gradient(circle at 88% 7%,rgba(94,221,132,.16),transparent 30%),
    linear-gradient(150deg,rgba(255,255,255,.98),rgba(247,252,248,.96));
  box-shadow:0 24px 72px rgba(17,57,29,.22),inset 0 1px 0 rgba(255,255,255,.95);
  color:#172119;
}
.welcome-notice-close {
  position:absolute;
  top:13px;
  right:13px;
  width:38px;
  height:38px;
  border:0;
  border-radius:50%;
  background:rgba(31,144,64,.08);
  color:#57705e;
  font-size:25px;
  line-height:1;
}
.welcome-notice-mark {
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  border:1px solid rgba(41,177,79,.2);
  border-radius:19px;
  background:linear-gradient(145deg,rgba(51,195,94,.19),rgba(234,250,239,.68));
  color:#18a144;
  box-shadow:0 10px 26px rgba(35,162,72,.13),inset 0 1px 0 rgba(255,255,255,.75);
}
.welcome-notice-mark svg { width:29px; height:29px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.welcome-notice-mark span {
  position:absolute;
  margin:37px 0 0 39px;
  min-width:27px;
  padding:3px 4px;
  border:2px solid #f8fcf9;
  border-radius:8px;
  background:#14a842;
  color:#fff;
  font-size:8px;
  font-weight:850;
  text-align:center;
}
.welcome-notice-card h2 { margin:18px 0 7px; font-size:23px; line-height:1.14; letter-spacing:-.45px; }
.welcome-notice-intro { margin:0; color:#57625a; font-size:13px; line-height:1.48; }
.welcome-notice-sources { display:grid; gap:7px; margin:18px 0; padding:0; list-style:none; }
.welcome-notice-sources li {
  display:grid;
  grid-template-columns:28px minmax(0,1fr);
  gap:10px;
  align-items:center;
  padding:10px 11px;
  border:1px solid rgba(35,148,66,.11);
  border-radius:14px;
  background:rgba(255,255,255,.65);
}
.welcome-notice-sources li>span {
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:rgba(27,168,66,.11);
  color:#12a13b;
  font-size:13px;
  font-weight:900;
}
.welcome-notice-sources p { margin:0; min-width:0; }
.welcome-notice-sources strong { display:block; color:#172119; font-size:12px; line-height:1.25; }
.welcome-notice-sources small { display:block; margin-top:2px; color:#6a746d; font-size:10px; line-height:1.32; }
.welcome-notice-disclaimer {
  margin:0 0 14px;
  padding:11px 12px;
  border-radius:13px;
  background:rgba(31,145,64,.065);
  color:#617067;
  font-size:10px;
  line-height:1.42;
}
.welcome-notice-confirm {
  width:100%;
  min-height:49px;
  border:1px solid rgba(20,155,58,.26);
  border-radius:15px;
  background:linear-gradient(135deg,rgba(16,169,62,.95),rgba(56,185,93,.88));
  color:#fff;
  box-shadow:0 11px 27px rgba(22,160,62,.21),inset 0 1px 0 rgba(255,255,255,.23);
  font-size:14px;
  font-weight:820;
}
.welcome-notice-close:active,.welcome-notice-confirm:active { transform:scale(.98); }

[data-theme="dark"] .welcome-notice { background:rgba(3,9,5,.58); }
[data-theme="dark"] .welcome-notice-card {
  border-color:rgba(73,213,117,.2);
  background:radial-gradient(circle at 88% 7%,rgba(73,213,117,.12),transparent 30%),linear-gradient(150deg,rgba(28,38,31,.98),rgba(19,27,22,.98));
  color:#eff8f1;
  box-shadow:0 28px 80px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.05);
}
[data-theme="dark"] .welcome-notice-close { background:rgba(73,213,117,.09); color:#9eb3a4; }
[data-theme="dark"] .welcome-notice-intro { color:#a9b9ad; }
[data-theme="dark"] .welcome-notice-sources li { border-color:rgba(73,213,117,.1); background:rgba(73,213,117,.035); }
[data-theme="dark"] .welcome-notice-sources strong { color:#eff8f1; }
[data-theme="dark"] .welcome-notice-sources small,[data-theme="dark"] .welcome-notice-disclaimer { color:#a4b4a8; }
[data-theme="dark"] .welcome-notice-disclaimer { background:rgba(73,213,117,.055); }

@media(max-width:360px) {
  .welcome-notice-card { padding:21px 17px 17px; border-radius:22px; }
  .welcome-notice-mark { width:52px; height:52px; border-radius:17px; }
  .welcome-notice-card h2 { margin-top:15px; font-size:20px; }
  .welcome-notice-sources { margin:14px 0; }
  .welcome-notice-sources li { padding:8px 9px; }
}
@media(prefers-reduced-motion:reduce) {
  .welcome-notice,.welcome-notice-close,.welcome-notice-confirm { transition:none; }
}

/* Listings, profile and language selector */
.bottom-nav { grid-template-columns: repeat(3, 1fr) !important; gap: 6px !important; }
.nav-pill { display:flex; flex-direction:column; align-items:center; gap:3px; padding:10px 6px !important; font-size:11px !important; }
.nav-pill .nav-icon { font-size:20px; line-height:1; font-weight:400; }
.page-title { margin: 6px 4px 16px; font-size: 28px; line-height:1.1; font-weight:850; letter-spacing:-.8px; }

.listings-info { display:flex; justify-content:space-between; gap:12px; margin:10px 2px; color:#606762; font-size:11px; }
.listings-state, .listings-empty { min-height:52vh; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:30px 24px 90px; }
.empty-art { width:120px; height:120px; border-radius:50%; display:grid; place-items:center; background:#edf8ef; color:#159f3f; font-size:62px; font-weight:300; }
.listings-empty h2 { margin:22px 0 8px; font-size:21px; }
.listings-empty p { max-width:330px; margin:0; color:#626964; line-height:1.5; font-size:13px; }
.listings-state h2 { margin:22px 0 8px; font-size:21px; }
.listings-state p { max-width:330px; margin:0; color:#626964; line-height:1.5; font-size:13px; }
.listings-error .state-art { width:78px; height:78px; display:grid; place-items:center; border-radius:50%; background:#fff0f0; color:#cf3f3f; font-size:38px; font-weight:800; }
.listings-error h2 { color:#a92d2d; }
.state-spinner { width:46px; height:46px; border:4px solid #dcecdf; border-top-color:#159f3f; border-radius:50%; animation:listings-spin .8s linear infinite; }
@keyframes listings-spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .state-spinner { animation-duration:1.8s; } }
.refresh-link { margin-top:22px; border:0; background:transparent; color:#149c3a; font-size:14px; font-weight:750; }
/* An empty feed offers its next step as a real button and the refresh as the
   quiet link under it; the two stack, so neither pushes past a narrow screen. */
.listings-state .state-actions { display:flex; flex-direction:column; align-items:center; gap:6px; margin-top:22px; }
.listings-state .state-actions .refresh-link { margin-top:0; }
.listings-state .state-primary { width:auto; min-width:220px; max-width:100%; padding:14px 22px; border-radius:14px; font-size:14px; }
.listing-grid { display:grid; gap:10px; }
.listing-card { position:relative; display:grid; grid-template-columns:118px 1fr 18px; gap:12px; padding:12px; border:1px solid #e5e8e5; border-radius:18px; background:#fff; box-shadow:0 5px 20px rgba(28,40,31,.05); }
.listing-photo img,.listing-placeholder { width:118px; height:105px; border-radius:13px; object-fit:cover; background:#edf0ed; }
.listing-placeholder { display:grid; place-items:center; align-content:center; gap:5px; font-size:32px; }
/* Одно объявление из сорока приходит без единого снимка — продавец так
   выложил. Без подписи пустая рамка читается как «приложение не смогло
   загрузить» (владелец, 10 сентября 2026), и это ровно та ошибка, за
   которую винят нас вместо доски. */
.listing-placeholder-icon { display:grid; place-items:center; line-height:1; }
.listing-nophoto { font-size:9px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:var(--muted,#6c7c73); line-height:1; }
.listing-copy { min-width:0; }
.listing-topline { min-height:21px; display:flex; justify-content:space-between; align-items:center; gap:6px; }
.listing-topline time { color:#7c827e; font-size:10px; white-space:nowrap; }
.listing-new { display:inline-block; padding:4px 8px; border-radius:8px; background:#d8f3de; color:#218b39; font-size:10px; font-weight:750; }
.listing-copy h3 { margin:2px 0 5px; font-size:15px; line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.listing-price { color:#159f3f; font-size:16px; font-weight:850; margin-bottom:5px; }
.listing-meta { color:#555e58; font-size:10px; line-height:1.45; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.open-sslv { float:right; margin-top:7px; border:1px solid #24a449; background:#fff; color:#168e39; border-radius:9px; padding:7px 10px; font-size:10px; font-weight:750; }

.profile-card { background:#fff; border:1px solid #e1e5e2; border-radius:18px; padding:17px; margin-bottom:12px; box-shadow:0 5px 20px rgba(28,40,31,.04); }

.profile-avatar { width:78px; height:78px; display:grid; place-items:center; border-radius:50%; background:#dff3e3; color:#159f3f; font-size:46px; line-height:1; }
.profile-identity h2 { margin:0 0 3px; font-size:20px; }
.profile-username { color:#159f3f; font-size:13px; font-weight:700; }
.profile-id { margin-top:8px; color:#454c47; font-size:11px; }

.profile-card h3 { margin:0 0 10px; font-size:14px; }
.profile-row { min-height:43px; display:flex; align-items:center; justify-content:space-between; gap:12px; border-top:1px solid #edf0ed; font-size:12px; }
.profile-row:first-of-type { border-top:0; }
.profile-row strong { font-size:11px; text-align:right; }
.profile-row small { display:block; margin-top:3px; color:#767d78; font-size:10px; font-weight:400; }

.language-picker { margin-top:8px; border-top:1px solid #edf0ed; }
.language-picker.hidden { display:none; }
.language-option { width:100%; border:0; border-bottom:1px solid #edf0ed; background:#fff; padding:13px 4px; display:flex; justify-content:space-between; font-size:13px; text-align:left; }
.language-option:last-child { border-bottom:0; }
.language-option span { opacity:0; color:#159f3f; font-weight:900; }
.language-option.selected span { opacity:1; }

@media (max-width:390px){
  .page-title{font-size:25px;}
  .listing-card{grid-template-columns:102px 1fr 14px; gap:9px; padding:10px;}
  .listing-photo img,.listing-placeholder{width:102px;height:96px;}
  .open-sslv{font-size:9px;padding:6px 8px;}
  
  .profile-avatar{width:66px;height:66px;font-size:38px;}
}

/* Bottom navigation */
.nav-pill .nav-label {
  display:block;
  max-width:100%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  line-height:1.15;
}
.bottom-nav .nav-pill { min-width:0; min-height:62px; justify-content:center; }
@media (max-width: 430px) {
  #app { padding-bottom: 110px; }
  .bottom-nav { width: calc(100% - 30px); bottom: max(10px, env(safe-area-inset-bottom)); }
}

/* Compact filters and monitoring details */
.saved-filters-card{padding-top:12px!important}.saved-filters-card .section-title{margin:0 16px 4px!important}.filters-horizontal{padding-top:7px!important;padding-bottom:10px!important}.filters-hint{margin-top:0!important;padding-bottom:0!important}
.filter-chip-card{flex:0 0 176px!important;width:176px!important;min-width:176px!important;height:160px!important;min-height:160px!important}.add-filter-card{flex:0 0 104px!important;width:104px!important;min-width:104px!important;height:160px!important;min-height:160px!important;padding:10px!important}.add-filter-plus{font-size:30px!important;margin-bottom:4px!important}.filter-chip-body{justify-content:flex-end!important}.filter-chip-icon{margin:0 0 3px!important}.filter-chip-title{margin-bottom:6px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.filter-chip-details{display:grid!important;gap:3px!important;width:100%;font-size:11px!important}
.category-picker{padding:6px 14px!important}.category-pick{width:100%;display:grid;grid-template-columns:34px 1fr 20px;align-items:center;gap:8px;border:0;border-bottom:1px solid #edf0ed;background:transparent;padding:14px 4px;text-align:left;font:inherit;color:inherit}.category-pick:last-child{border-bottom:0}.category-pick span{font-size:22px}.category-pick strong{font-size:14px}.category-pick em{font-style:normal;font-size:24px;color:#929792}
.category-pick .category-icon{width:34px;height:34px;font-size:0}.category-pick .category-icon svg,.category-pick .category-icon img.category-picture{width:30px;height:30px}
.category-group-title,.generic-section-title{padding:10px 4px 6px;color:var(--muted);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.generic-title{display:flex;align-items:center;gap:10px}
.generic-title span{font-size:28px}
.generic-main{padding-top:8px}

.generic-save{
  position:sticky;
  bottom:calc(92px + env(safe-area-inset-bottom));
  z-index:25;
  margin:10px 6px 4px;
  padding:9px;
  border:1px solid color-mix(in srgb,var(--accent) 18%,var(--line));
  border-radius:22px;
  background:color-mix(in srgb,var(--surface) 94%,transparent);
  box-shadow:0 10px 30px rgba(16,24,40,.14);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
.generic-save .primary{min-height:52px;padding:14px 18px;border-radius:15px}
body.keyboard-open .generic-save{
  position:static!important;
  margin:10px 0 4px;
  border-color:transparent;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
@media(max-width:430px){.generic-main .form-row{min-height:66px}.generic-save .primary{padding:15px}}
.monitor-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#aeb4b0;margin-right:7px}.monitor-dot.on{background:#18a946;box-shadow:0 0 0 4px rgba(24,169,70,.10)}.monitor-status-head{display:flex;align-items:center;padding:2px 0 12px;font-size:15px}.monitor-info{margin:10px 4px 24px;padding:14px 16px;border-radius:16px;background:#eef8f0;color:#4f6254;font-size:12px;line-height:1.45}
@media(max-width:390px){.filter-chip-card{flex-basis:166px!important;width:166px!important;min-width:166px!important;height:154px!important;min-height:154px!important}.add-filter-card{height:154px!important;min-height:154px!important}}

/* Monitoring category rows */
.home-category-card { padding: 4px 0; }
.home-category-card .category-row {
  border-left: 0; border-right: 0; border-bottom: 0; background: transparent;
  color: inherit; text-align: left; padding: 0;
}
.home-category-card .category-row:first-child { border-top: 0; }

/* Technical inspection filter */
.check-option {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  cursor: pointer;
  color: #202124;
  font-size: 14px;
}
.check-option input {
  width: 22px;
  height: 22px;
  accent-color: var(--blue);
}
.check-option span { font-weight: 600; }

/* Live listing catalog */

.browse-kind{font-size:10px;color:#738078;font-weight:700}
.browse-refresh{border:0;background:transparent;color:#159f3f;font-size:11px;font-weight:750;padding:0}
.browse-more{display:block;width:100%;min-height:46px;margin:12px 0 20px;border:1px solid #159f3f;border-radius:13px;background:#fff;color:#159f3f;font-weight:800}

.feedback-form label { display:block; margin-bottom:16px; font-size:12px; font-weight:700; }
.feedback-form select, .feedback-form textarea { width:100%; box-sizing:border-box; margin-top:8px; border:1px solid #d8dfda; border-radius:13px; background:#f8faf8; padding:13px; font:inherit; color:#1d241f; outline:none; }
.feedback-form textarea { resize:vertical; min-height:150px; line-height:1.45; }
.feedback-form select:focus, .feedback-form textarea:focus { border-color:#20a64a; box-shadow:0 0 0 2px rgba(32,166,74,.10); }
.feedback-count { margin:-10px 3px 12px; text-align:right; color:#8a918d; font-size:10px; }
.feedback-send { width:100%; min-height:48px; border:0; border-radius:14px; font-weight:750; }

/* Main-view transition surface */
#view {
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Saved-filter carousel gesture priority */
.saved-filters-card {
  /* Horizontal drags in this whole block belong to the filter carousel, not page navigation. */
  overscroll-behavior-x: contain;
}

.filters-horizontal {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  touch-action: pan-x pan-y;
  scroll-padding-inline: 20px;
}

/* Shared component cascade */
html { color-scheme: light dark; }
body { background: var(--tg-bg, #f4f5f9); color: var(--ink); }
.card, .profile-card, .listing-card, .access-card{
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line);
}
.bottom-nav {
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border-color: var(--line);
}

.match-filter {
  display: inline-flex;
  gap: 4px;
  margin: 0 0 14px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}
.match-filter button {
  min-height: 38px;
  padding: 0 14px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font-weight: 750;
}
.match-filter button.active {
  background: color-mix(in srgb, var(--accent) 13%, var(--surface));
  color: var(--accent);
}
.match-filter-list {
  display: flex;
  gap: 8px;
  margin: 0 0 14px;
  padding: 2px 1px 6px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.match-filter-list::-webkit-scrollbar { display: none; }
.match-sort {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0 0 12px;
  padding:8px 10px 8px 13px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--surface);
  color:var(--muted);
  font-size:11px;
  font-weight:750;
}
.match-sort select {
  min-width:0;
  min-height:36px;
  padding:0 30px 0 11px;
  border:1px solid color-mix(in srgb,var(--accent) 20%,var(--line));
  border-radius:10px;
  background:color-mix(in srgb,var(--accent) 6%,var(--surface));
  color:var(--ink);
  font:inherit;
}
/* Which boards the feed is being read from. It narrows what is shown and
   nothing else - the filter behind it is untouched - so it sits with the sort
   control rather than with the filters: both are ways of reading the same day.
   «Чтобы пользователь смотрел не на кашу» (the owner, 10 September 2026). */
.match-sources { margin: 0 0 12px; }
.match-sources-caption {
  display: block;
  margin: 0 0 6px 2px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.match-sources-row {
  display: flex;
  gap: 6px;
  padding: 1px 1px 5px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.match-sources-row::-webkit-scrollbar { display: none; }
.match-source {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 32px;
  padding: 5px 10px 5px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
/* The box itself. Empty when the board is not being shown, a tick when it is,
   because the owner asked for «галочки» and a tick is the one mark nobody has
   to learn. */
.match-source i {
  display: grid;
  place-items: center;
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  border: 1.5px solid color-mix(in srgb, var(--muted) 45%, transparent);
  border-radius: 4px;
  font-style: normal;
  font-size: 9px;
  line-height: 1;
}
.match-source.is-on {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  color: var(--accent);
}
.match-source.is-on i {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
}
.match-source.is-on i::after { content: "✓"; }
/* How many of the day's adverts came from that board. Counted over the whole
   day, so the number does not move as boards are ticked off: it says what the
   day holds, not what the picker is doing. */
.match-source b {
  padding: 1px 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  color: inherit;
  font-size: 10px;
  font-weight: 800;
}
.match-source.is-on b { background: color-mix(in srgb, var(--accent) 16%, transparent); }
/* A board that sent nothing today is still worth ticking - it is how a
   reader asks «а с этой площадки что?» - but it should not look like the
   ones that did. */
.match-source.is-empty { opacity: .62; }
.match-source:active { transform: scale(.985); }
.matches-checking {
  display:flex;
  align-items:center;
  gap:11px;
  margin:0 0 12px;
  padding:12px 13px;
  border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line));
  border-radius:15px;
  background:color-mix(in srgb,var(--accent) 7%,var(--surface));
}
.matches-checking-spinner {
  width:24px;
  height:24px;
  flex:0 0 24px;
  border:3px solid color-mix(in srgb,var(--accent) 18%,transparent);
  border-top-color:var(--accent);
  border-radius:50%;
  animation:listings-spin .8s linear infinite;
}
.matches-checking span { display:grid; gap:2px; min-width:0; }
.matches-checking b { color:var(--ink); font-size:11px; line-height:1.3; }
.matches-checking small { color:var(--muted); font-size:9px; line-height:1.35; }
.match-filter-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  flex: 0 0 auto;
  /* Fit the title, and stop at a width no title may exceed. A fixed width
     gave «Bmw» exactly as much room as «Аренда · 104» — three letters filling
     two thirds of the row and pushing the next filter off the edge (the
     owner, 10 September 2026). The title inside ellipsizes at the cap. */
  width: auto;
  max-width: min(250px, 76vw);
  min-height: 48px;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface);
  color: var(--ink);
  text-align: left;
  scroll-snap-align: start;
}
/* «Все фильтры» has no title to cap, so it keeps neither the maximum above
   nor the room a title would need — only a little more breathing space on
   the right than a chip whose text runs to the edge. */
.match-filter-option.is-all {
  width: auto;
  max-width: none;
  padding-right: 14px;
}
.match-filter-option b {
  overflow: hidden;
  font-size: 12px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.match-filter-option .category-glyph { width: 18px; height: 18px; }
.match-filter-option.active {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  color: var(--accent);
}
.listing-grid { gap: 12px; }
.listing-card {
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 14px;
  padding: 12px;
  cursor: pointer;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--accent) 22%, var(--line));
  transition: transform .15s ease, box-shadow .15s ease;
}
.listing-card:active { transform: scale(.985); }
.listing-card.is-new {
  border-color: color-mix(in srgb, var(--accent) 48%, var(--line));
  box-shadow: 0 8px 26px color-mix(in srgb, var(--accent) 11%, transparent);
}
.listing-photo { position: relative; }
.listing-photo img, .listing-placeholder {
  width: 132px;
  height: 132px;
  border-radius: 14px;
  object-fit: cover;
}
.listing-new {
  position: absolute;
  left: 7px;
  top: 7px;
  background: var(--accent);
  color: var(--accent-ink);
}
.listing-copy { display: flex; min-width: 0; flex-direction: column; }
.listing-copy h3 {
  margin: 6px 0 4px;
  font-size: 16px;
  line-height: 1.22;
  white-space: normal;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.listing-price { font-size: 19px; }
.listing-meta-row { display: flex; flex-wrap: wrap; gap: 5px; margin: 2px 0 8px; }
.listing-meta-row span {
  padding: 4px 7px;
  border-radius: 7px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 10px;
}
.listing-republication {
  width: fit-content;
  margin: 2px 0 4px;
  padding: 3px 7px;
  border: 1px solid color-mix(in srgb, var(--green) 28%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--green) 9%, transparent);
  color: var(--green);
  font-size: 10px;
  font-weight: 750;
  line-height: 1.2;
}

.listing-price-history {
  margin-top: 7px;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
  color: var(--ink);
  font-size: 10px;
}
.listing-price-history summary {
  display: flex;
  min-height: 30px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 9px;
  cursor: pointer;
  color: var(--accent);
  font-weight: 780;
  list-style: none;
}
.listing-price-history summary::-webkit-details-marker { display: none; }
.listing-price-history summary strong { white-space: nowrap; }
.listing-price-history ol {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 0 9px 8px;
  list-style: none;
}
.listing-price-history li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
}
.listing-price-history li b { color: var(--ink); }
/* The same row, shut: for a reader without Premium the server empties the
   entries and the block becomes one button -- its own frame, the summary's
   height and ink, a sentence that names Premium -- that opens the Premium
   page. Its font comes from the reset near the top (`button { font: inherit }`);
   restating the shorthand here would outrank the block's 10px. */
.listing-price-history.is-locked {
  display: flex;
  width: 100%;
  min-height: 30px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 9px;
  font-weight: 780;
  color: var(--accent);
  text-align: left;
  cursor: pointer;
}
.open-sslv {
  float: none;
  align-self: flex-start;
  min-height: 36px;
  margin: auto 0 0;
  background: transparent;
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
}

button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 42%, transparent);
  outline-offset: 2px;
}
@media (max-width: 370px) {
  .listing-card { grid-template-columns: 108px minmax(0, 1fr); gap: 10px; }
  .listing-photo img, .listing-placeholder { width: 108px; height: 118px; }
}
@media (min-width: 720px) {
  .content { max-width: 680px; }
  .listing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .listing-card { grid-template-columns: 120px minmax(0, 1fr); }
  .listing-photo img, .listing-placeholder { width: 120px; height: 132px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Active-filter cards */
.filter-chip-card {
  position:relative;
  display:grid !important;
  grid-template-rows:auto minmax(0,1fr);
  flex:0 0 248px !important;
  width:248px !important;
  min-width:248px !important;
  height:258px !important;
  min-height:258px !important;
  padding:14px !important;
  overflow:hidden;
  border:2px solid rgba(21,159,63,.42) !important;
  border-radius:24px !important;
  background:
    radial-gradient(circle at 104% -4%,rgba(41,189,89,.14),transparent 40%),
    linear-gradient(155deg,#fff 0%,#fbfefc 68%,#f5fbf7 100%) !important;
  box-shadow:0 12px 30px rgba(26,79,42,.09),inset 0 1px 0 rgba(255,255,255,.92) !important;
  isolation:isolate;
  scroll-snap-align:start;
  transition:transform .22s ease,box-shadow .28s ease,border-color .28s ease,background .28s ease;
}
.filter-chip-card.is-active {
  border-color:rgba(21,159,63,.48) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.94) !important;
}
.filter-chip-card.is-inactive {
  opacity:1 !important;
  border-color:rgba(221,68,68,.48) !important;
  background:
    radial-gradient(circle at 104% -4%,rgba(224,76,76,.12),transparent 40%),
    linear-gradient(155deg,#fff 0%,#fffdfd 68%,#fff8f8 100%) !important;
  box-shadow:0 13px 30px rgba(169,44,44,.10),inset 0 1px 0 rgba(255,255,255,.92) !important;
  filter:none !important;
}
.filter-chip-card.is-active,
.filter-chip-card.is-inactive {
  border-width:2px !important;
  border-style:solid !important;
}
.filter-chip-top {
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:48px;
  margin:-2px -2px 8px !important;
  padding:2px;
  border-radius:18px;
  cursor:pointer;
}
.filter-state {
  position:relative;
  display:flex;
  align-items:center;
  width:150px;
  min-width:150px;
  min-height: 44px;
  padding:0 !important;
  overflow:hidden;
  border:1px solid rgba(21,159,63,.38) !important;
  border-radius: 999px !important;
  background:linear-gradient(135deg,rgba(35,196,91,.28),rgba(21,159,63,.09)) !important;
  color:#08782f !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.82),0 7px 20px rgba(21,159,63,.16),0 0 0 4px rgba(21,159,63,.045) !important;
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  font-size: 12px !important;
  font-weight:800;
  letter-spacing: .01em;
  cursor: pointer;
  transition:background .28s ease,color .28s ease,border-color .28s ease,box-shadow .28s ease;
}
.filter-state:active:not(:disabled) { transform:none !important; }
.filter-state:disabled { opacity:.62; cursor:wait; }
.filter-state[aria-busy="true"] { pointer-events:none; }
.filter-chip-card:has(.filter-state:active) {
  transform:none !important;
}
.filter-chip-card.is-inactive .filter-state {
  border-color:rgba(221,68,68,.34) !important;
  background:linear-gradient(135deg,rgba(224,68,68,.20),rgba(224,68,68,.06)) !important;
  color:#bd3434 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.74),0 7px 18px rgba(190,45,45,.12),0 0 0 4px rgba(224,68,68,.04) !important;
}
.filter-state-label {
  position:absolute;
  left:37px;
  right:37px;
  overflow:hidden;
  text-align:center;
  font-size:11.5px;
  letter-spacing:-.015em;
  white-space:nowrap;
}
.filter-state-dot {
  position:absolute;
  left:6px;
  width:30px !important;
  height:30px !important;
  flex:0 0 30px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.84);
  background:linear-gradient(145deg,#fff,#def8e6) !important;
  box-shadow:0 3px 9px rgba(13,84,34,.22),inset 0 1px 1px rgba(255,255,255,.9);
  transition:background .28s ease, box-shadow .28s ease, transform .28s cubic-bezier(.22,.8,.3,1);
  transform:translateX(106px);
}
.filter-chip-card.is-inactive .filter-state-dot {
  background:linear-gradient(145deg,#ff918c,#dd4747) !important;
  box-shadow:0 3px 9px rgba(137,27,27,.18),inset 0 1px 1px rgba(255,255,255,.45);
  transform:translateX(0);
}
.filter-delete {
  width: 44px !important;
  height: 44px !important;
  flex: 0 0 44px !important;
  border-radius: 14px !important;
  background: transparent !important;
  color: #a4aaa5 !important;
  font-size: 24px !important;
  transition: color .16s ease, background .16s ease;
  cursor: pointer;
}
.filter-delete:active, .filter-delete:focus-visible { background: #fff0f0 !important; color: #d84040 !important; }
.filter-edit-surface {
  display:grid;
  grid-template-rows:minmax(0,1fr) auto;
  width:100%;
  min-width:0;
  min-height:0;
  padding:0;
  border:0;
  border-radius:15px;
  background:transparent;
  color:inherit;
  text-align:left;
  cursor:pointer;
  transition:transform .18s ease,background .18s ease;
}
.filter-edit-surface:active { transform:scale(.99); }
.filter-edit-surface:focus-visible { outline:3px solid rgba(21,159,63,.25); outline-offset:2px; }
.filter-chip-card.is-inactive .filter-edit-surface:focus-visible { outline-color:rgba(221,68,68,.25); }
.filter-chip-body {
  display:grid !important;
  grid-template-rows:auto minmax(60px,1fr);
  justify-content:stretch !important;
  justify-items:stretch;
  width:100%;
  min-width:0;
  min-height:0;
}
.filter-chip-heading {
  display: grid;
  grid-template-columns:44px minmax(0,1fr);
  align-items: center;
  width:100%;
  gap:11px;
}
.filter-chip-icon {
  display: grid;
  place-items: center;
  width:44px;
  height:44px;
  margin: 0 !important;
  border:1px solid rgba(21,159,63,.08);
  border-radius:14px;
  background:linear-gradient(145deg,#f3fbf5,#e8f6ec);
  color: var(--accent);
  font-size: 23px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
.filter-chip-icon .category-glyph { width: 36px; height: 36px; }
.filter-chip-card.is-inactive .filter-chip-icon {
  border-color:rgba(221,68,68,.16);
  background:linear-gradient(145deg,#fff5f5,#fde8e8);
  color:#cf3f3f;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 0 16px rgba(221,68,68,.07);
}
.filter-chip-card.is-inactive .filter-chip-icon .category-glyph { color:inherit !important; }
.filter-chip-copy { min-width: 0; }
.filter-chip-category {
  display: block;
  margin-bottom: 3px;
  color: #6e7a70;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .08em;
  line-height: 1;
  text-transform: uppercase;
}
.filter-chip-title {
  display:-webkit-box;
  min-height:38px;
  margin: 0 !important;
  color: #17221a;
  font-size: 16px !important;
  line-height:1.18 !important;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space:normal;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}
.filter-chip-details {
  display:flex !important;
  align-content:flex-start;
  align-items:flex-start;
  flex-wrap:wrap;
  gap:7px !important;
  min-height:60px;
  max-height:60px;
  margin-top:11px !important;
  overflow:hidden;
}
.filter-parameter {
  display: inline-flex;
  align-items: center;
  min-width:0;
  max-width:100%;
  gap:6px;
  min-height:27px;
  padding:6px 9px;
  border:1px solid rgba(74,105,83,.13);
  border-radius:999px;
  background:rgba(247,250,247,.82);
  color: #536057;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}
.filter-parameter-mark {
  width:6px;
  height:6px;
  flex:0 0 6px;
  border-radius:50%;
  background:#25a94c;
  box-shadow:0 0 0 3px rgba(37,169,76,.10);
}
.filter-parameter-currency { flex:0 0 auto; color:#159f3f; font-weight:850; }
.filter-parameter-value { min-width:0; overflow:hidden; text-overflow:ellipsis; }
.filter-chip-card.is-inactive .filter-parameter-mark {
  background:#d94a4a;
  box-shadow:0 0 0 3px rgba(217,74,74,.09);
}
.filter-chip-card.is-inactive .filter-parameter-currency {
  color:#c83232;
  transition:color .28s ease;
}
.filter-parameter-price { flex:1 1 auto; }
.filter-parameter-more {
  display:grid;
  place-items:center;
  min-width:27px;
  min-height:27px;
  padding:0 7px;
  border-radius:999px;
  background:rgba(21,159,63,.09);
  color:#168b3a;
  font-size:10px;
  font-weight:850;
}
.filter-chip-card.is-inactive .filter-parameter-more { background:rgba(221,68,68,.09); color:#bd3434; }
.filter-chip-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top:10px;
  padding-top:10px;
  border-top: 1px solid #edf1ed;
  color: #168b3a;
  font-size: 12px;
  font-weight: 750;
  transition:color .28s ease, border-color .28s ease;
}
.filter-edit-arrow {
  display: grid;
  place-items: center;
  width:34px;
  height:34px;
  min-width:34px !important;
  min-height:34px !important;
  border-radius: 50%;
  background: #e9f8ed;
  font-size: 15px;
  color:#168b3a;
  transition:background .28s ease, color .28s ease;
}
.filter-chip-card.is-inactive .filter-chip-footer {
  border-top-color:rgba(221,54,54,.13);
  color:#c83232;
}
.filter-chip-card.is-inactive .filter-edit-arrow {
  background:rgba(221,54,54,.10);
  color:#c83232;
}
@media (hover:hover) {
  .filter-chip-card:hover {
    transform: translateY(-2px);
    border-color: #159f3f !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.94) !important;
  }
  .filter-delete:hover { background: #fff0f0 !important; color: #d84040 !important; }
  .filter-chip-card.is-inactive:hover {
    border-color:rgba(221,54,54,.58) !important;
    box-shadow:0 12px 30px rgba(180,39,39,.12) !important;
  }
}
@media(max-width:390px) {
  .filter-chip-card {
    flex-basis:232px !important;
    width:232px !important;
    min-width:232px !important;
    height:258px !important;
    min-height:258px !important;
  }
  .filter-state { width:142px; min-width:142px; }
  .filter-state-dot { transform:translateX(98px); }
}

/* Filter rail, job-seeker controls and catalog */
.saved-filters-card {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 0 0 10px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.saved-filters-card .section-title {
  margin: 0 !important;
  padding: 8px 4px 6px !important;
}
.saved-filters-card .filters-horizontal {
  padding: 8px 0 10px !important;
  scroll-padding-inline: 0 !important;
}
.saved-filters-card .filters-hint {
  margin: 0 !important;
  padding: 2px 4px 6px !important;
}
.form-row-stack {
  grid-template-columns: 1fr !important;
  align-items: start !important;
  gap: 8px !important;
  padding: 10px 0;
}

.switch-option {
  display:flex; align-items:center; justify-content:flex-end; gap:8px;
  color:var(--muted); font-size:12px !important;
}
.switch-option input { width:22px; height:22px; accent-color:var(--accent); }

/* A fact wraps to the next line rather than losing its tail. As flex items
   the three could shrink, so «2.5 dīzelis» came out «2.5 dīze…» and a region
   «Cēsis un r…» -- the answer to what the reader filtered on, cut off. They
   keep their own width now; only a fact wider than the whole column, alone on
   its line, is still trimmed. */
.listing-meta-row span {
  display:block;
  flex: 0 0 auto;
  max-width:100%;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

/* Profile dashboard */
.profile-hero {
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:12px;
  padding:18px;
  border:1px solid color-mix(in srgb,var(--accent) 18%,var(--line));
  border-radius:22px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 10%,var(--surface)),var(--surface) 68%);
  box-shadow:0 10px 28px rgba(29,83,44,.07);
}
.profile-hero .profile-avatar {
  width:58px;
  height:58px;
  flex:0 0 58px;
  display:grid;
  place-items:center;
  border-radius:18px;
  background:var(--accent);
  color:#fff;
  font-size:24px;
  font-weight:850;
  box-shadow:0 8px 18px rgba(21,159,63,.20);
}
.profile-hero .profile-identity h2 { margin:0 0 2px; font-size:19px; line-height:1.2; }
.profile-hero .profile-username { color:var(--muted); font-size:12px; font-weight:650; }
.profile-live {
  display:flex;
  align-items:center;
  margin-top:8px;
  color:var(--accent);
  font-size:11px;
  font-weight:800;
}

.profile-settings {
  overflow:hidden;
  margin-bottom:12px;
  border:1px solid var(--line);
  border-radius:20px;
  background:var(--surface);
  box-shadow:0 6px 20px rgba(28,40,31,.04);
}

.privacy-policy { border-top:1px solid var(--line); }
.privacy-policy summary {
  min-height:44px; display:flex; align-items:center; justify-content:space-between;
  color:var(--ink); cursor:pointer; font-size:10px; font-weight:800; list-style:none;
}
.privacy-policy summary::-webkit-details-marker { display:none; }
.privacy-policy summary span { color:var(--muted); font-size:18px; transition:transform .2s ease; }
.privacy-policy[open] summary span { transform:rotate(90deg); }
.privacy-copy { padding:2px 0 6px; }
.privacy-copy h3 { margin:12px 0 4px; color:var(--ink); font-size:10px; }
.privacy-copy p { margin:0; color:var(--muted); font-size:9px; line-height:1.55; }
.profile-setting {
  width:100%;
  min-height:64px;
  display:grid;
  grid-template-columns:38px minmax(0,1fr) auto 10px;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border:0;
  border-top:1px solid var(--line);
  background:transparent;
  color:var(--ink);
  text-align:left;
}
.profile-setting:first-child { border-top:0; }
.setting-icon {
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border-radius:11px;
  background:color-mix(in srgb,var(--accent) 10%,var(--surface-soft));
  color:var(--accent);
  font-size:17px;
  font-weight:850;
}
.setting-copy { min-width:0; }
.setting-copy b { display:block; font-size:13px; }
.setting-copy small {
  display:block;
  margin-top:3px;
  overflow:hidden;
  color:var(--muted);
  font-size:9px;
  font-weight:500;
  line-height:1.25;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.setting-value { color:var(--muted); font-size:10px; font-weight:750; white-space:nowrap; }
.setting-value.is-active { color:var(--accent); }

.profile-settings .language-picker { margin:0 14px 10px 62px; }
@media(max-width:360px) {
  .profile-setting { grid-template-columns:36px minmax(0,1fr) 10px; }
  .setting-value { display:none; }
  
}

/* Owner-only administration dashboard */

.admin-summary { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-bottom:10px; }
.admin-summary div {
  min-height:86px; display:grid; place-content:center; text-align:center;
  border:1px solid var(--line); border-radius:18px; background:var(--surface);
}
.admin-summary strong { color:var(--accent); font-size:25px; line-height:1; }
.admin-summary span { margin-top:7px; color:var(--muted); font-size:9px; font-weight:750; }

.admin-card {
  margin-bottom:10px; padding:15px; border:1px solid var(--line);
  border-radius:20px; background:var(--surface); box-shadow:0 5px 18px rgba(28,40,31,.035);
}
.admin-card h3 { display:flex; justify-content:space-between; margin:0 0 10px; font-size:13px; }
.admin-card h3 small { color:var(--muted); font-size:8px; font-weight:600; }
.admin-user-row,.admin-event-row {
  min-height:48px; display:flex; align-items:center; justify-content:space-between; gap:12px;
  border-top:1px solid var(--line); font-size:11px;
}
.admin-user-row:first-of-type,.admin-event-row:first-of-type { border-top:0; }
.admin-user-row span,.admin-event-row span { min-width:0; }
.admin-user-row b,.admin-event-row b { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.admin-user-row small,.admin-event-row small { display:block; margin-top:3px; color:var(--muted); font-size:8px; }
.admin-user-row strong { min-width:28px; color:var(--accent); text-align:center; }
.admin-event-row time { max-width:82px; color:var(--muted); font-size:8px; text-align:right; }
.admin-events-card {
  padding:0;
  overflow:hidden;
}
.admin-events-card summary {
  display:flex;
  min-height:56px;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:0 15px;
  color:var(--ink);
  font-size:13px;
  font-weight:800;
  cursor:pointer;
  list-style:none;
  -webkit-tap-highlight-color:transparent;
}
.admin-events-card summary::-webkit-details-marker { display:none; }
.admin-events-card summary i {
  display:grid;
  width:28px;
  height:28px;
  place-items:center;
  border-radius:50%;
  background:color-mix(in srgb,var(--accent) 9%,var(--surface-soft));
  color:var(--accent);
  font-size:19px;
  font-style:normal;
  transition:transform .24s ease,background .24s ease;
}
.admin-events-card[open] summary i {
  transform:rotate(90deg);
}
.admin-events-card[open] summary {
  border-bottom:1px solid color-mix(in srgb,var(--accent) 9%,var(--line));
}
.admin-events-list {
  display:grid;
  gap:6px;
  margin:8px;
  padding:6px;
  border:1px solid color-mix(in srgb,var(--accent) 10%,var(--line));
  border-radius:16px;
  background:color-mix(in srgb,var(--accent) 4%,var(--surface-soft));
}
.admin-events-card[open] .admin-events-list {
  animation:view-enter .22s ease both;
}
.admin-events-list .admin-event-row {
  min-height:52px;
  padding:8px 10px;
  border:0;
  border-radius:12px;
  background:var(--surface);
  box-shadow:0 2px 8px rgba(28,40,31,.035);
}
.admin-events-list .admin-empty {
  padding:16px 10px;
}

.admin-empty { padding:14px 0; color:var(--muted); font-size:10px; text-align:center; }
.admin-periods {
  display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-bottom:10px;
  padding:5px; border:1px solid var(--line); border-radius:15px; background:var(--surface);
}
.admin-periods button {
  min-height:38px; border:0; border-radius:11px; background:transparent;
  color:var(--muted); font-size:11px; font-weight:800;
}
.admin-periods button.active { background:var(--accent); color:#fff; box-shadow:0 5px 13px rgba(21,159,63,.18); }

.admin-system-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:7px; }
.admin-system-grid span {
  min-height:58px; display:flex; flex-direction:column; justify-content:center;
  padding:9px; border-radius:12px; background:var(--surface-soft); color:var(--muted); font-size:8px;
}
.admin-system-grid b { margin-top:5px; overflow:hidden; color:var(--ink); font-size:10px; white-space:nowrap; text-overflow:ellipsis; }
.admin-error { margin-top:8px; padding:9px; border-radius:10px; background:#fff0f0; color:#bd3434; font-size:9px; line-height:1.35; }
.admin-search {
  width:100%; min-height:42px; margin-bottom:7px; padding:0 12px;
  border:1px solid var(--line); border-radius:12px; background:var(--surface-soft); color:var(--ink); font-size:11px;
}
button.admin-user-row {
  width:100%; padding:0; border-right:0; border-bottom:0; border-left:0;
  background:transparent; color:var(--ink); text-align:left;
}
.admin-user-row.hidden { display:none; }
.admin-user-hero .profile-live { color:var(--muted); font-weight:650; }
.admin-filter-row {
  min-height:48px; display:flex; align-items:center; justify-content:space-between; gap:10px;
  border-top:1px solid var(--line); font-size:11px;
}
.admin-filter-row:first-of-type { border-top:0; }
.admin-filter-row small { display:block; margin-top:3px; color:var(--accent); font-size:8px; }
.admin-filter-row strong { color:var(--muted); font-size:9px; }
.admin-filter-row.no-results { margin:4px -6px; padding:0 6px; border:0; border-radius:10px; background:#fff7e8; }
.admin-filter-row.no-results small { color:#b87211; }
[data-theme="dark"] .admin-error { background:#3a2020; color:#ffaaaa; }
[data-theme="dark"] .admin-filter-row.no-results { background:#392f1e; }

/* Unified bottom-navigation icon set */
.bottom-nav .nav-icon {
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
}
.bottom-nav .nav-icon svg {
  width:22px;
  height:22px;
  overflow:visible;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.bottom-nav .nav-pill.active .nav-icon svg { stroke-width:2.15; }

/* Stable listing-card geometry */
.listing-card { min-height:158px; align-items:stretch; }
.listing-copy h3 { min-height:39px; }
.listing-meta-row { min-height:45px; align-content:flex-start; }
.open-sslv {
  width:max-content;
  min-width:94px;
  margin-top:auto;
  align-self:flex-start;
  white-space:nowrap;
}
@media(max-width:370px) {
  .listing-card { min-height:154px; }
  .listing-copy h3 { min-height:34px; }
  .listing-meta-row { min-height:42px; }
}

/* Mobile listing cards */
.listing-grid {
  gap: 14px;
}
.listing-card {
  display: grid;
  grid-template-columns: 126px minmax(0, 1fr);
  align-items: stretch;
  gap: 13px;
  min-height: 0;
  padding: 11px;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
  border-radius: 20px;
  background: var(--surface);
  box-shadow: 0 7px 22px rgba(25, 61, 36, .07);
}
.listing-card.is-new {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
  box-shadow: 0 9px 25px color-mix(in srgb, var(--accent) 10%, transparent);
}
/* The photo keeps its own shape instead of following the text beside it.
   It used to stretch to the card's height, so a card with a description, a
   price history and three facts pulled its photo into a tall portrait while
   the next card stayed square: the feed read as a ragged pile (the owner, on
   his phone, 21 September 2026). The shape is the upright one the card always
   had -- 4:5, near the 126x154 it used to settle at -- the picture is cropped
   to fill it, and the card grows downward under it. */
.listing-photo {
  position:relative;
  align-self: start;
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 15px;
  background: var(--surface-soft);
}
.listing-gallery {
  display:flex;
  width:100%;
  height:100%;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  overscroll-behavior-x:contain;
  touch-action:pan-x pan-y;
}
.listing-gallery[hidden] { display:none; }
.listing-gallery::-webkit-scrollbar { display:none; }
.listing-gallery img {
  flex:0 0 100%;
  scroll-snap-align:start;
  scroll-snap-stop:always;
}
.gallery-dots {
  position:absolute;
  left:0;
  right:0;
  bottom:8px;
  width:max-content;
  margin-inline:auto;
  z-index:2;
  display:flex;
  gap:3px;
  padding:4px 5px;
  border-radius:999px;
  background:rgba(20,27,22,.38);
  backdrop-filter:blur(5px);
}
.gallery-dots i {
  width:4px;
  height:4px;
  border-radius:50%;
  background:rgba(255,255,255,.55);
}
.gallery-dots i.active { width:10px; border-radius:4px; background:#fff; }
.listing-photo img,
.listing-placeholder {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  object-position: center;
}
.listing-placeholder {
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--accent) 9%, var(--surface-soft));
  font-size: 34px;
}
.listing-image-fallback[hidden] {
  display: none;
}
.listing-placeholder .category-glyph { width: 48px; height: 48px; color: var(--accent); }
.listing-new {
  left: 8px;
  top: 8px;
  padding: 5px 8px;
  border: 1px solid rgba(255,255,255,.58);
  border-radius: 999px;
  box-shadow: 0 3px 10px rgba(0,0,0,.14);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1;
  text-transform: uppercase;
}
.listing-copy {
  display: flex;
  min-width: 0;
  min-height: 154px;
  flex-direction: column;
}
.listing-topline {
  min-width: 0;
  gap: 6px;
}
/* Three things want this line and only two of them fit on a narrow phone:
   the category word, the board the advert came from, and its age. The board
   is the one that must survive - it is what the product is for, and the
   category is already said by the icon beside it and by the filter the reader
   opened. So the row is a flex line in which the WORD is the part allowed to
   shrink: «АВТОМОБИЛИ Autogidas.lt · 49 мин. назад» came out as «АВТОМОБИЛИ …»
   with the board's name cut off entirely (the owner, 10 September 2026). */
.browse-kind {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  color: color-mix(in srgb, var(--accent) 86%, var(--ink));
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.browse-kind-word {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.browse-kind .listing-source { flex: 0 0 auto; }
.browse-kind .category-glyph {
  width: 11px;
  height: 11px;
  margin-right: 3px;
  vertical-align: -2px;
}
.generic-title .category-glyph { width: 34px; height: 34px; color: var(--accent); }
.listing-topline time {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 9px;
  white-space: nowrap;
}
.listing-copy h3 {
  display: -webkit-box;
  min-height: 0;
  margin: 7px 0 3px;
  overflow: hidden;
  color: var(--ink);
  font-size: 15px;
  font-weight: 780;
  letter-spacing: -.015em;
  line-height: 1.23;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.listing-description {
  display: -webkit-box;
  margin: 2px 0 3px;
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  font-weight: 580;
  line-height: 1.3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
/* A rental's other periods under the headline price: the description's
   quiet line, one row, a touch firmer so figures stay legible. */
.listing-price-periods {
  display: block;
  margin: 0 0 4px;
  overflow: hidden;
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.listing-price {
  margin-top: 1px;
  color: var(--accent);
  font-size: 20px;
  font-weight: 850;
  letter-spacing: -.025em;
  line-height: 1.15;
}
.listing-meta-row {
  display: flex;
  min-height: 0;
  flex-wrap: nowrap;
  gap: 5px;
  margin: 7px 0 0;
  overflow: hidden;
}
.listing-meta-row span {
  min-width: 0;
  padding: 5px 7px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 12%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 5%, var(--surface-soft));
  color: color-mix(in srgb, var(--muted) 90%, var(--ink));
  font-size: 9px;
  font-weight: 680;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.open-sslv {
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: 38px;
  align-items: center;
  align-self: stretch;
  justify-content: space-between;
  gap: 8px;
  margin: 10px 0 0;
  padding: 0 11px;
  border: 1px solid color-mix(in srgb, var(--accent) 48%, var(--line));
  border-radius: 11px;
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}
.open-sslv-arrow {
  display: grid;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 13px;
}
@media(max-width:370px) {
  .listing-card {
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 10px;
    padding: 9px;
    border-radius: 17px;
  }
  .listing-photo {
    width: 100%;
    height: auto;
    min-height: 0;
    border-radius: 13px;
  }
  .listing-copy { min-height: 140px; }
  .listing-copy h3 {
    margin-top: 5px;
    font-size: 13px;
  }
  .listing-price { font-size: 17px; }
  .listing-meta-row { margin-top: 5px; }
  .listing-meta-row span { padding: 4px 5px; font-size: 8px; }
  .open-sslv {
    min-height: 34px;
    margin-top: 7px;
    padding: 0 8px;
    font-size: 9px;
  }
  .open-sslv-arrow {
    width: 20px;
    height: 20px;
    flex-basis: 20px;
  }
}

/* Unified controls */
.primary, .generic-save .primary, .feedback-send, .access-card .primary{
  min-height:50px;
  padding:0 18px;
  border:1px solid var(--accent);
  border-radius:14px;
  background:var(--accent);
  color:var(--accent-ink);
  font-size:13px;
  font-weight:820;
  letter-spacing:-.01em;
  box-shadow:0 7px 18px color-mix(in srgb,var(--accent) 20%,transparent);
  transition:transform .14s ease,box-shadow .14s ease,filter .14s ease;
}
.primary:active, .generic-save .primary:active, .feedback-send:active{ transform:scale(.975); box-shadow:0 3px 9px color-mix(in srgb,var(--accent) 17%,transparent); }
.primary:disabled{ opacity:.55; box-shadow:none; }
.browse-more {
  min-height:46px;
  border:1px solid color-mix(in srgb,var(--accent) 50%,var(--line));
  border-radius:13px;
  background:color-mix(in srgb,var(--accent) 5%,var(--surface));
  color:var(--accent);
  font-size:12px;
  font-weight:800;
  box-shadow:none;
}
.browse-refresh,.refresh-link {
  min-height:36px;
  display:inline-flex;
  align-items:center;
  padding:0 10px;
  border:0;
  border-radius:10px;
  background:color-mix(in srgb,var(--accent) 8%,transparent);
  color:var(--accent);
  font-weight:800;
}

.bottom-nav {
  width:min(650px,calc(100% - 28px));
  gap:3px;
  padding:6px;
  border:1px solid color-mix(in srgb,var(--accent) 12%,var(--line));
  border-radius:22px;
  box-shadow:0 12px 34px rgba(20,45,27,.12);
}
.bottom-nav .nav-pill {
  min-height:56px;
  gap:4px;
  padding:7px 4px !important;
  border-radius:16px;
  background:transparent;
  color:var(--muted);
  font-size:10px !important;
  font-weight:720;
  transition:background .16s ease,color .16s ease,transform .14s ease;
}
.bottom-nav .nav-pill.active {
  background:color-mix(in srgb,var(--accent) 10%,var(--surface));
  color:var(--accent);
  box-shadow:none;
}
.bottom-nav .nav-pill:active { transform:scale(.94); }
.bottom-nav .nav-pill.active .nav-label { font-weight:850; }
.match-filter button{
  border-radius:11px;
  transition:transform .14s ease,background .14s ease,color .14s ease;
}
.match-filter button:active{ transform:scale(.97); }
@media(hover:hover) {
  .primary:hover { filter:brightness(.96); }
  .bottom-nav .nav-pill:not(.active):hover { background:var(--surface-soft); color:var(--ink); }
}

/* Keep the listing action aligned to the bottom edge with a stable content gap. */
.listing-copy { height:100%; }
.listing-action {
  margin-top:auto;
  padding-top:8px;
}
.listing-copy .open-sslv { margin:0; }
@media(max-width:370px) {
  .listing-action { padding-top:7px; }
}

/* Listings toolbar */
.listing-overview {
  margin-bottom:12px;
  padding:7px;
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--accent) 25%,var(--line));
  border-radius:18px;
  background:var(--surface);
  box-shadow:0 5px 18px rgba(28,60,36,.045);
}

/* The unread count heads the feed as a number, not a button: a label and a
   badge on the card's own surface, nothing to press. The day's total sits
   below it in the info line. */
.listing-overview .listing-unread {
  display:flex;
  align-items:center;
  gap:8px;
  margin:0;
  padding:13px 8px 4px;
  color:var(--ink);
  font-size:15px;
  font-weight:800;
}
.listing-overview .listing-unread b {
  display:inline-grid;
  place-items:center;
  min-width:24px;
  height:24px;
  padding:0 7px;
  border-radius:999px;
  background:color-mix(in srgb,var(--accent) 14%,transparent);
  color:var(--accent);
  font-size:12px;
  font-weight:800;
}
/* «Сохранённые» opens from the feed's header: a quiet link at the right. */
.listing-overview .listing-saved-link {
  display:inline-flex;
  align-items:center;
  gap:5px;
  margin-left:auto;
  padding:4px 0;
  border:0;
  background:transparent;
  color:var(--accent);
  font:inherit;
  font-size:12px;
  font-weight:800;
  cursor:pointer;
}
.listing-overview .listing-saved-link .ui-icon { width:16px; height:16px; }
/* «♡ Сохранить»: a round button in the photo's corner, filled once kept. */
.listing-save {
  position:absolute;
  right:6px;
  top:6px;
  z-index:2;
  width:40px;
  height:40px;
  min-height:40px;
  display:grid;
  place-items:center;
  padding:0;
  border:0;
  border-radius:999px;
  background:color-mix(in srgb,var(--surface) 88%,transparent);
  color:var(--muted);
  box-shadow:0 2px 8px rgba(0,0,0,.14);
  cursor:pointer;
}
.listing-save .ui-icon { width:18px; height:18px; }
.listing-save.is-saved { color:var(--accent); }
.listing-save.is-saved .ui-icon { fill:currentColor; }
/* The saved screen: the person's note under the whole card, edited in place.
   It spans both columns of the card's grid, so the photo column keeps the
   height of the details beside it instead of stretching down to the note. */
.saved-hint { margin:0 3px 12px; }
.saved-note { grid-column:1 / -1; display:grid; gap:6px; margin-top:0; padding-top:10px; border-top:1px solid var(--line); }
.saved-note-text { margin:0; color:var(--ink); font-size:13px; line-height:1.4; white-space:pre-wrap; }
.saved-note-input { width:100%; box-sizing:border-box; padding:9px 10px; border:1px solid var(--line); border-radius:11px; background:var(--surface); color:var(--ink); font:inherit; font-size:13px; resize:vertical; }
.saved-note-actions { display:flex; flex-wrap:wrap; gap:6px 12px; }
.saved-note-button { display:inline-flex; align-items:center; min-height:36px; padding:0; border:0; background:transparent; color:var(--accent); font:inherit; font-size:12px; font-weight:750; cursor:pointer; }
.saved-note-button.is-quiet { color:var(--muted); }
.saved-meta { color:var(--muted); font-size:11px; }
.listing-action { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; }
/* The note field reads the dark tokens like every other field. */
[data-theme="dark"] .saved-note-input { background:var(--surface-soft) !important; color:var(--ink) !important; border-color:var(--line) !important; }
.listing-overview-context { padding:0 7px; }
.listing-overview .listing-mode-hint,
.listing-overview .listing-mode-hint.match-context {
  margin:0;
  padding:11px 1px 9px;
  border:0;
  border-radius:0;
  background:transparent;
  color:var(--muted);
  font-size:10px;
  font-weight:650;
  line-height:1.35;
}
.listing-overview .listings-info {
  margin:0;
  padding:8px 0 2px;
  align-items:center;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:10px;
}
.listing-overview .listings-info b { color:var(--ink); font-size:11px; }
.listing-overview .browse-refresh {
  min-height:32px;
  padding:0 9px;
  border-radius:9px;
  font-size:10px;
}

/* Shared motion system */
:root {
  --motion-fast:140ms;
  --motion-base:220ms;
  --motion-slow:360ms;
  --motion-ease:cubic-bezier(.22,.8,.28,1);
  --motion-spring:cubic-bezier(.2,1.35,.35,1);
}
@keyframes view-enter {
  from { opacity:0; transform:translateY(7px); }
  to { opacity:1; transform:translateY(0); }
}
@keyframes card-enter {
  from { opacity:0; transform:translateY(10px) scale(.985); }
  to { opacity:1; transform:translateY(0) scale(1); }
}
@keyframes filter-card-enter {
  from { opacity:0; }
  to { opacity:1; }
}
@keyframes soft-pop {
  from { opacity:0; transform:scale(.92); }
  to { opacity:1; transform:scale(1); }
}
.content > .page-title, .content > .listing-overview, .content > .profile-hero, .content > .profile-settings, .content > .admin-periods, .content > .admin-summary, .content > .admin-card, .content > .card, .content > .saved-filters-card, .content > .status-card{
  animation:view-enter var(--motion-base) var(--motion-ease) both;
}
.listing-card, .category-row{
  animation:card-enter var(--motion-slow) var(--motion-ease) both;
}
.filter-chip-card {
  animation:filter-card-enter var(--motion-base) var(--motion-ease) both;
}
.listing-card:nth-child(2),.filter-chip-card:nth-child(2),.category-row:nth-child(2) { animation-delay:35ms; }
.listing-card:nth-child(3),.filter-chip-card:nth-child(3),.category-row:nth-child(3) { animation-delay:70ms; }
.listing-card:nth-child(4),.filter-chip-card:nth-child(4),.category-row:nth-child(4) { animation-delay:105ms; }
.listing-new, .monitor-dot.on{ animation:soft-pop var(--motion-slow) var(--motion-spring) both; }
button, .filter-chip-card, .listing-card, .category-row{
  -webkit-tap-highlight-color:transparent;
  transition:
    transform var(--motion-fast) var(--motion-ease),
    background-color var(--motion-base) var(--motion-ease),
    border-color var(--motion-base) var(--motion-ease),
    color var(--motion-base) var(--motion-ease),
    box-shadow var(--motion-base) var(--motion-ease),
    opacity var(--motion-base) var(--motion-ease);
}
button:active:not(:disabled), .filter-chip-card:active, .listing-card:active, .category-row:active{ transform:scale(.972); }
.primary:active:not(:disabled),.open-sslv:active:not(:disabled) { transform:scale(.965); filter:brightness(.96); }
.bottom-nav .nav-icon {
  transition:transform var(--motion-base) var(--motion-spring),color var(--motion-base) var(--motion-ease);
}
.bottom-nav .nav-pill.active .nav-icon { transform:translateY(-1px) scale(1.08); }
.bottom-nav .nav-pill.active {
  transition:background-color var(--motion-base) var(--motion-ease),color var(--motion-base) var(--motion-ease);
}
.language-picker:not(.hidden) {
  transform-origin:top center;
  animation:view-enter var(--motion-base) var(--motion-ease) both;
}
.toast.show { animation:soft-pop var(--motion-base) var(--motion-spring) both; }
.state-spinner { animation-duration:.75s; }
input,select,textarea {
  transition:border-color var(--motion-base) var(--motion-ease),box-shadow var(--motion-base) var(--motion-ease),background-color var(--motion-base) var(--motion-ease);
}
input:focus,select:focus,textarea:focus {
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 11%,transparent);
}
@media(prefers-reduced-motion:reduce) {
  :root { --motion-fast:1ms; --motion-base:1ms; --motion-slow:1ms; }
}
::view-transition-old(root) {
  animation:120ms ease-out both listing-view-out;
}
::view-transition-new(root) {
  animation:230ms var(--motion-ease) both listing-view-in;
}
@keyframes listing-view-out {
  to { opacity:0; transform:translateY(-5px); }
}
@keyframes listing-view-in {
  from { opacity:0; transform:translateY(7px); }
  to { opacity:1; transform:translateY(0); }
}

.view-transitioning .content > *,
.view-transitioning .listing-card,
.view-transitioning .filter-chip-card {
  animation:none !important;
}
.entry-motion-suppressed {
  animation:none !important;
}
/* The listings header is replaced during tab changes; keeping it static avoids
   Telegram WebView layer flashes while the cards animate once below it. */
.content > .page-title,
.content > .listing-overview {
  animation:none;
}

/* Multi-source filters and listing provenance */
.source-picker { align-items:stretch !important; }
.source-options { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.source-option { position:relative; min-width:0; }
/* The dark theme repaints every disabled input (opacity .78 and a ground of
   its own), which outranked the rule below: the native box showed on the
   corner of a locked Premium tile. The tile's input is hidden in both themes. */
.source-option input,
[data-theme="dark"] .source-option input:disabled { position:absolute; opacity:0; pointer-events:none; }
.source-option span {
  min-height:58px; display:flex; flex-direction:column; justify-content:center;
  padding:9px 11px 9px 36px; border:1px solid var(--line); border-radius:13px;
  background:var(--surface-soft); color:var(--ink);
}
.source-option span::before {
  content:'✓'; position:absolute; left:11px; top:50%; width:17px; height:17px;
  display:grid; place-items:center; transform:translateY(-50%);
  border:1px solid var(--line); border-radius:6px; background:var(--surface); color:transparent; font-size:10px; font-weight:900;
}
.source-option input:checked + span {
  border-color:color-mix(in srgb,var(--accent) 55%,var(--line));
  background:color-mix(in srgb,var(--accent) 8%,var(--surface));
}
.source-option input:checked + span::before { border-color:var(--accent); background:var(--accent); color:#fff; }
.source-option b { font-size:11px; }
.source-option small,.source-hint { margin-top:3px; color:var(--muted); font-size:8px; line-height:1.25; }
/* One role — a board that cannot be ticked right now: not connected yet, or
   waiting for the subscription. Both states share the block so they cannot
   drift apart, and both read from tokens so the dark theme follows. */
/* The heading of the paid group spans the two columns of the picker; it
   borrows the wording style the category lists already use. */
.source-group-title {
  grid-column: 1 / -1;
  padding: 6px 2px 0;
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.source-option-soon,.source-option-paid { opacity:.62; cursor:not-allowed; }
.source-option-soon span,.source-option-paid span { background:var(--surface-soft); }
/* Premium is the reason this one is shut, so it wears the product's gold —
   a rim on the tile, nothing that fights the shared background above. */
.source-option-paid span,
.premium-example-board input:checked + span {
  border-color:color-mix(in srgb,var(--premium-gold) 62%,var(--line));
  box-shadow:inset 3px 0 0 color-mix(in srgb,var(--premium-gold) 85%,transparent);
}
.source-option-paid small { color:var(--ink); font-size:9px; font-weight:700; }
/* A paid board the reader picked before the access closed. The tick stays
   (their choice is kept for the day they subscribe) but the tile is shut: a
   lock where the tick was, the gold rim, and no accent -- «выбрано» must not
   read as «работает». It can still be unticked, so the cursor is a hand. */
.source-option-held { opacity:.85; cursor:pointer; }
.source-option-held input:checked + span {
  border-color:color-mix(in srgb,var(--premium-gold) 62%,var(--line));
  background:var(--surface-soft);
}
.source-option-held input:checked + span::before {
  content:'🔒'; border-color:color-mix(in srgb,var(--premium-gold) 62%,var(--line));
  background:var(--surface); color:var(--ink); font-size:9px;
}
.source-option-held small { color:var(--muted); font-weight:700; }
/* One pill on a board tile. The shape is shared; the tone arrives through two
   custom properties, so a state cannot be recoloured by a specificity race. */
.source-option-soon em,.source-option-paid em,.premium-tag {
  display:inline-flex; padding:2px 6px; border-radius:999px;
  background:var(--tag-bg,color-mix(in srgb,var(--muted) 18%,var(--surface-soft)));
  color:var(--tag-ink,var(--muted));
  font-size:8px; font-style:normal; font-weight:850;
  text-transform:uppercase; letter-spacing:.05em;
}
.source-option-soon em { margin-left:4px; }
.premium-tag { --tag-bg:var(--premium-tag-bg); --tag-ink:var(--premium-tag-ink); margin-right:5px; }
/* The sentence that explains the locked boards is the only full-strength
   Premium thing on this step — the tiles above it are dimmed by design. */
.source-hint-paid {
  display:block; margin-top:8px; padding:9px 11px;
  border:1px solid color-mix(in srgb,var(--premium-gold) 48%,var(--line));
  border-left:3px solid color-mix(in srgb,var(--premium-gold) 85%,transparent);
  border-radius:12px;
  background:color-mix(in srgb,var(--premium-gold) 13%,var(--surface));
  color:var(--ink); font-size:9px; line-height:1.45;
}
.listing-source {
  display:inline-flex; margin-left:4px; padding:3px 5px; border-radius:6px;
  background:color-mix(in srgb,var(--accent) 9%,var(--surface-soft)); color:var(--muted);
  font-size:7px; font-style:normal; font-weight:850; text-transform:none;
}
.listing-source.source-pp { background:#fff4e8; color:#b75a13; }
.listing-source.source-city24 { background:#eaf5ff; color:#17689a; }
.listing-source.source-andele { background:#f2eaff; color:#7042a8; }
.listing-source.source-balticar { background:#eef8ef; color:#28743c; }
.listing-source.source-autoplius { background:#eaf2ff; color:#245ca8; }
.listing-source.source-auto24 { background:#fdeeee; color:#a8232b; }
.listing-source.source-autogidas { background:#fff4e3; color:#9a5b12; }
@media(max-width:350px) { .source-options { grid-template-columns:1fr; } }

/* Mobile spacing and touch-target normalization.
   A compact final layer keeps the historical cascade on one 4/8px rhythm. */
:root {
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --touch-min:44px;
}

#app {
  padding-bottom:calc(96px + env(safe-area-inset-bottom, 0px));
}
.content {
  padding:var(--space-3);
}
.page-title {
  margin:var(--space-2) 0 var(--space-3);
}
.card, .listing-overview, .profile-hero, .admin-card{
  margin-bottom:var(--space-3);
}
.admin-card{
  padding:var(--space-4);
}

/* Controls remain comfortably tappable without making compact cards taller. */
button, .category-row, .category-pick, .profile-setting, .language-option, .match-filter button{
  min-height:var(--touch-min);
}
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  min-height:var(--touch-min);
}
.filter-delete, .filter-edit-arrow{
  min-width:var(--touch-min);
  min-height:var(--touch-min);
}

/* Forms: consistent vertical rhythm and keyboard-safe save action. */
.form-card {
  padding:var(--space-2) var(--space-4) var(--space-4);
}
.form-row {
  min-height:64px;
  gap:var(--space-3);
}
.form-row-stack {
  gap:var(--space-2) !important;
  padding:var(--space-2) 0;
}
.pair, .source-options{
  gap:var(--space-2);
}
.generic-main {
  padding-top:var(--space-2);
}

.generic-save {
  bottom:calc(80px + env(safe-area-inset-bottom, 0px));
  margin:var(--space-2) 0 var(--space-1);
  padding:var(--space-2);
}
.generic-save .primary {
  min-height:48px;
  padding:0 var(--space-4);
}
body.keyboard-open .generic-save {
  margin:var(--space-2) 0 0;
  padding:0;
}

/* Monitoring and filters align with the main content edge. */
.saved-filters-card {
  padding-bottom:var(--space-2) !important;
}
.saved-filters-card .section-title {
  padding:var(--space-2) var(--space-1) !important;
}
.saved-filters-card .filters-horizontal {
  gap:var(--space-2) !important;
  padding:var(--space-2) 0 !important;
}
/* A filter card throws a soft tinted shadow up to 20px above and 48px
   below itself. The strip scrolls sideways, and a sideways scroller clips
   vertically too, so the shadow was cut at the strip's edges into a hard
   pink or green band. Give the strip that room and pull the neighbours
   back by the same amount, so nothing on the page moves. */
.saved-filters-card .filters-horizontal {
  padding-top:calc(var(--space-2) + 20px) !important;
  padding-bottom:calc(var(--space-2) + 48px) !important;
  margin-top:-20px !important;
  margin-bottom:-48px !important;
}
.saved-filters-card .filters-hint {
  padding:var(--space-1) var(--space-1) var(--space-2) !important;
  /* On top of that room: legible, not tinted by the shadow. */
  position:relative;
  z-index:1;
}

.monitor-info {
  margin:var(--space-2) 0 var(--space-5);
  padding:var(--space-3) var(--space-4);
}

/* Catalog toolbar and cards share the same 8/12px internal spacing. */

.listing-overview {
  padding:var(--space-2);
}

.listing-overview-context {
  padding:0 var(--space-2);
}
.listing-overview .listing-mode-hint,
.listing-overview .listing-mode-hint.match-context {
  padding:var(--space-3) 0 var(--space-2);
}
.listing-overview .listings-info {
  padding:var(--space-2) 0 0;
}
.listing-grid {
  gap:var(--space-3);
}

/* Profile uses one vertical rhythm across summary, metrics and settings. */
.profile-hero {
  gap:var(--space-3);
  padding:var(--space-4);
}

.profile-setting {
  gap:var(--space-2);
  padding:var(--space-2) var(--space-3);
}
.profile-settings .language-picker {
  margin:0 var(--space-3) var(--space-2) 56px;
}

/* Bottom navigation respects both narrow screens and the Telegram safe area. */
.bottom-nav {
  width:min(650px, calc(100% - 16px));
  bottom:max(var(--space-2), env(safe-area-inset-bottom, 0px));
  gap:var(--space-1);
  padding:var(--space-1);
}
.bottom-nav .nav-pill {
  min-height:56px;
  gap:var(--space-1);
  padding:var(--space-2) var(--space-1) !important;
}

@media(max-width:360px) {
  .content {
    padding:var(--space-2);
  }
  .admin-card{
    padding:var(--space-3);
  }
  .form-card {
    padding:var(--space-2) var(--space-3) var(--space-3);
  }
  .profile-hero {
    gap:var(--space-2);
    padding:var(--space-3);
  }
}

/* Keep the current component skin above earlier component declarations. */
body .search-pulse{display:grid;grid-template-columns:52px minmax(0,1fr) auto}
body .profile-status-pill{display:flex}
body .profile-section-label{display:block}
body .profile-settings .setting-icon{display:grid;width:38px;height:38px;flex:0 0 38px}
body .admin-card{padding:16px;border:1px solid #e2e9e4;border-radius:18px;background:#fff;box-shadow:0 8px 24px rgba(23,62,36,.04)}
body .admin-card h2{margin:0 0 12px;font-size:14px}
body .admin-kpis>div{display:flex;min-height:78px;padding:12px}
body .admin-system-grid,body .delivery-grid{display:grid}
body .admin-search-wrap{display:flex}
body button.admin-user-row{display:grid}
@media(max-width:360px){body .search-pulse{grid-template-columns:44px minmax(0,1fr) 56px}}

/* Privacy accordion: only the chevron rotates, never its icon or copy. */
body .privacy-policy{border-top:1px solid var(--line);background:var(--surface)}
body .privacy-policy summary{display:flex;justify-content:flex-start;gap:10px;min-height:64px;padding:10px 14px;cursor:pointer}
body .privacy-policy summary>.setting-icon,
body .privacy-policy summary>.setting-copy{color:inherit;font-size:inherit;transform:none!important}
body .privacy-policy summary>.setting-copy{min-width:0;flex:1}
body .privacy-policy summary>.setting-copy b{color:var(--ink);font-size:13px}
body .privacy-policy summary>.setting-copy small{display:-webkit-box;overflow:hidden;color:var(--muted);font-size:9px;line-height:1.35;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:2}
body .privacy-policy summary>.setting-chevron{margin-left:auto;transition:transform .2s ease}
body .privacy-policy[open] summary>.setting-chevron{transform:rotate(90deg)}
body .privacy-policy .privacy-copy{padding:2px 14px 18px;border-top:1px solid color-mix(in srgb,var(--line) 65%,transparent);animation:privacyReveal .2s ease-out}
body .privacy-policy .privacy-copy h3{margin:16px 0 5px;color:var(--ink);font-size:12px;line-height:1.35}
body .privacy-policy .privacy-copy p{margin:0;color:var(--muted);font-size:11px;line-height:1.6}

/* Progressive car filter builder. */

.filter-wizard-review-title p{margin:0;color:var(--muted);font-size:13px;line-height:1.45}

.filter-wizard-progress{display:grid;grid-template-columns:repeat(3,1fr) auto;align-items:center;gap:6px;margin-bottom:14px}
.filter-wizard-progress i{height:4px;border-radius:999px;background:color-mix(in srgb,var(--line) 88%,transparent)}
.filter-wizard-progress i.active{background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 72%,white),var(--accent))}
.filter-wizard-progress span{margin-left:6px;color:var(--muted);font-size:10px;font-weight:750;white-space:nowrap}

.car-wizard-section-title button{min-height:40px;padding:0 12px;border:1px solid color-mix(in srgb,var(--accent) 22%,var(--line));border-radius:13px;background:color-mix(in srgb,var(--accent) 7%,var(--surface));color:var(--accent);font:inherit;font-size:12px;font-weight:800}

.car-wizard-form{padding-top:6px}
.car-wizard-additional{margin:8px 0 0;border-top:1px solid var(--line)}
.car-wizard-additional summary{display:flex;min-height:66px;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;list-style:none}
.car-wizard-additional summary::-webkit-details-marker{display:none}
.car-wizard-additional summary span{display:grid;gap:3px}
.car-wizard-additional summary b{color:var(--ink);font-size:14px}
.car-wizard-additional summary small{color:var(--muted);font-size:10px;line-height:1.35}
.car-wizard-additional summary i{color:var(--accent);font-size:22px;font-style:normal;transition:transform .2s ease}
.car-wizard-additional[open] summary i{transform:rotate(180deg)}
.car-wizard-additional-fields{padding-top:4px;border-top:1px solid color-mix(in srgb,var(--line) 65%,transparent)}
.car-wizard-preview{display:grid;gap:5px;margin:12px 0;padding:15px 17px;border:1px solid color-mix(in srgb,var(--accent) 20%,var(--line));border-radius:18px;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 8%,var(--surface)),var(--surface));color:var(--ink)}
.car-wizard-preview span{font-size:14px;font-weight:750}.car-wizard-preview span strong{color:var(--accent);font-size:20px}
.car-wizard-preview small{color:var(--muted);font-size:10px;line-height:1.4}
.car-wizard-preview-next{background:var(--surface)}
.car-wizard-actions{position:sticky;bottom:calc(80px + env(safe-area-inset-bottom,0px));z-index:24;margin:8px 0 0;padding:8px;border:1px solid color-mix(in srgb,var(--accent) 18%,var(--line));border-radius:20px;background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.car-wizard-actions .primary{display:flex;align-items:center;justify-content:center;gap:10px;min-height:50px;border-radius:14px}.car-wizard-actions .primary span{font-size:20px}
.filter-wizard-review-title{padding:2px 4px 12px}.filter-wizard-review-title h2{margin:0 0 5px;color:var(--ink);font-size:20px}
.car-wizard-summary{padding:16px;margin-bottom:12px}.car-wizard-section-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px;color:var(--ink);font-size:13px;font-weight:850}
.car-wizard-summary dl{margin:0}.car-wizard-summary dl div{display:grid;grid-template-columns:minmax(90px,.8fr) minmax(0,1.2fr);gap:12px;padding:10px 0;border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent)}.car-wizard-summary dl div:last-child{border-bottom:0}
.car-wizard-summary dt{color:var(--muted);font-size:12px}.car-wizard-summary dd{margin:0;color:var(--ink);font-size:12px;font-weight:800;text-align:right;overflow-wrap:anywhere}
.car-wizard-sources{padding:8px 16px 14px}.car-wizard-sources .source-picker{border:0}
.car-wizard-review-actions{display:grid;grid-template-columns:minmax(105px,.72fr) minmax(0,1.6fr);gap:10px;position:sticky;bottom:calc(80px + env(safe-area-inset-bottom,0px));z-index:24;margin:10px 0 0;padding:8px;border:1px solid color-mix(in srgb,var(--accent) 18%,var(--line));border-radius:20px;background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.car-wizard-review-actions button{min-height:50px;border-radius:14px;font-weight:800}.car-wizard-review-actions .secondary{border:1px solid var(--line);background:var(--surface);color:var(--ink)}
body.keyboard-open .car-wizard-actions,body.keyboard-open .car-wizard-review-actions{position:static}
[data-theme="dark"] .car-wizard-preview{background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 12%,var(--surface)),var(--surface) 75%)}
@media(max-width:360px){.car-wizard-review-actions{grid-template-columns:1fr 1.5fr}}

/* Visual parity for the three-step car filter wizard. */
.wizard-stage{max-width:620px;margin:0 auto;padding-bottom:4px}
.filter-wizard-page-head{margin:4px 2px 18px;padding:0;background:transparent}
.filter-wizard-title-row{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px}
.filter-wizard-title-row h1{margin:0;color:var(--ink);font-size:clamp(27px,6vw,34px);line-height:1.05;letter-spacing:-.045em}
.filter-wizard-title-row>span{display:inline-flex;align-items:center;min-height:38px;padding:0 14px;border:1px solid color-mix(in srgb,var(--accent) 15%,transparent);border-radius:999px;background:color-mix(in srgb,var(--accent) 12%,var(--surface));color:var(--accent);font-size:12px;font-weight:850;white-space:nowrap}
.filter-wizard-progress{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0}
.filter-wizard-progress button{position:relative;height:14px;padding:5px 0;border:0;background:transparent;cursor:pointer}
.filter-wizard-progress button i{display:block;width:100%;height:5px;border-radius:999px;background:color-mix(in srgb,var(--ink) 10%,transparent);transition:background .2s ease,transform .2s ease}
.filter-wizard-progress button.active i{background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 76%,white),var(--accent))}
.filter-wizard-progress button.current i{transform:scaleY(1.18);box-shadow:0 3px 10px color-mix(in srgb,var(--accent) 22%,transparent)}
.filter-wizard-progress button:disabled{cursor:default}
.filter-wizard-progress button:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}
.wizard-glyph{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

.wizard-category-card,.wizard-main-card,.wizard-review-card{border-color:color-mix(in srgb,var(--accent) 20%,var(--line));border-radius:22px;background:var(--surface);box-shadow:0 12px 34px color-mix(in srgb,var(--accent) 8%,transparent)}
.wizard-category-card{padding:18px}
.wizard-card-title{display:flex;align-items:center;gap:12px;margin-bottom:15px}
.wizard-card-title>div{display:grid;gap:3px;min-width:0}
.wizard-card-title strong{color:var(--ink);font-size:15px;font-weight:900;text-transform:uppercase;letter-spacing:.015em}
.wizard-card-title small{color:var(--muted);font-size:10px;line-height:1.4}
.wizard-title-icon,.wizard-additional-icon,.wizard-preview-icon{display:grid;place-items:center;flex:0 0 auto;width:42px;height:42px;border-radius:14px;background:color-mix(in srgb,var(--accent) 10%,var(--surface));color:var(--accent)}
.wizard-category-accordions{display:grid;gap:8px}
.wizard-category-accordion{border:1px solid color-mix(in srgb,var(--ink) 12%,transparent);border-radius:17px;background:color-mix(in srgb,var(--surface-soft) 34%,var(--surface));overflow:hidden;transition:border-color .18s ease,background .18s ease,box-shadow .18s ease}
.wizard-category-accordion[open]{border-color:color-mix(in srgb,var(--accent) 32%,var(--line));background:color-mix(in srgb,var(--accent) 4%,var(--surface));box-shadow:0 8px 22px color-mix(in srgb,var(--accent) 7%,transparent)}
.wizard-category-accordion summary{display:grid;grid-template-columns:40px minmax(0,1fr) 30px;align-items:center;gap:11px;min-height:66px;padding:9px 11px;cursor:pointer;list-style:none;-webkit-tap-highlight-color:transparent}
.wizard-category-accordion summary::-webkit-details-marker{display:none}
.wizard-category-accordion summary:focus-visible{outline:2px solid var(--accent);outline-offset:-3px;border-radius:15px}
.wizard-category-group-icon{display:grid;width:40px;height:40px;place-items:center;border-radius:13px;background:color-mix(in srgb,var(--accent) 10%,var(--surface));color:var(--accent)}
.wizard-category-group-icon .category-glyph{width:30px;height:30px}
.wizard-category-group-copy{display:flex;min-width:0;align-items:center;justify-content:space-between;gap:8px}
.wizard-category-group-copy strong{color:var(--ink);font-size:13px;font-weight:820}
.wizard-category-group-copy small{display:grid;min-width:25px;height:25px;padding:0 7px;place-items:center;border-radius:999px;background:color-mix(in srgb,var(--ink) 6%,transparent);color:var(--muted);font-size:10px;font-weight:750}
.wizard-category-chevron{display:grid;width:28px;height:28px;place-items:center;border:1px solid color-mix(in srgb,var(--ink) 9%,transparent);border-radius:50%;background:var(--surface);color:var(--muted);transition:transform .2s ease,color .2s ease,background .2s ease}
.wizard-category-chevron svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.wizard-category-accordion[open] .wizard-category-chevron{transform:rotate(180deg);background:color-mix(in srgb,var(--accent) 10%,var(--surface));color:var(--accent)}
.car-wizard-form [hidden]{display:none!important}
.wizard-category-reveal{display:grid;grid-template-rows:1fr;padding:0 10px 10px}
.wizard-category-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;min-height:0}
.wizard-category-tile{display:grid;grid-template-columns:36px minmax(0,1fr);align-items:center;gap:9px;min-height:57px;padding:8px;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--surface-soft) 42%,var(--surface));color:var(--ink);text-align:left;cursor:pointer;transition:border-color .18s ease,background .18s ease,transform .18s ease}
.wizard-category-tile .category-icon{width:38px;height:38px;border-radius:12px}
.wizard-category-tile .category-icon svg,.wizard-category-tile .category-icon img.category-picture{width:30px;height:30px}
.wizard-category-tile strong{min-width:0;font-size:11px;line-height:1.2;overflow-wrap:anywhere}
.wizard-category-tile:active{transform:scale(.985)}
.wizard-category-tile:focus-visible,.wizard-category-tile:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line));background:color-mix(in srgb,var(--accent) 6%,var(--surface))}

.wizard-main-card{display:grid;gap:11px;padding:17px!important;overflow:visible}
.wizard-main-card .wizard-card-title{margin-bottom:1px}
.wizard-field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.wizard-field-grid>.wizard-field-wide{grid-column:1/-1}
.wizard-field-card,.form-card .form-row{min-width:0;padding:10px 11px;border:1px solid color-mix(in srgb,var(--ink) 13%,transparent);border-radius:16px;background:color-mix(in srgb,var(--surface-soft) 25%,var(--surface))}
.wizard-field-card>label,.form-card .form-row>label:not(.check-option):not(.switch-option){display:block;margin-bottom:6px;color:var(--muted);font-size:10px;font-weight:750}
.wizard-field-card .form-control,.form-card .form-row .form-control{min-height:43px;padding:9px 10px;border:1px solid color-mix(in srgb,var(--ink) 15%,transparent);border-radius:12px;background:var(--surface);color:var(--ink);font-size:13px;text-align:left;text-align-last:left;box-shadow:0 1px 2px color-mix(in srgb,var(--ink) 5%,transparent)}
.wizard-field-card .form-control:focus,.form-card .form-row .form-control:focus{border-color:color-mix(in srgb,var(--accent) 70%,var(--line));box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 10%,transparent)}
.wizard-field-card [hidden],.form-card .form-row [hidden]{display:none!important}
.wizard-field-card .car-section-unavailable{border-style:dashed;background:color-mix(in srgb,var(--ink) 4%,var(--surface));color:var(--muted);opacity:.82}
.wizard-control-with-icon{position:relative;min-width:0}
.wizard-control-with-icon>span{position:absolute;z-index:2;left:10px;top:50%;display:grid;width:24px;height:24px;place-items:center;transform:translateY(-50%);color:var(--accent);pointer-events:none}
.wizard-control-with-icon>span>.category-glyph,.wizard-control-with-icon>span>.wizard-glyph{width:21px;height:21px}
.wizard-control-with-icon>.form-control{padding-left:42px}
.wizard-range{grid-template-columns:minmax(0,1fr) 16px minmax(0,1fr);align-items:center;gap:5px}
.wizard-range>i{color:var(--muted);font-style:normal;text-align:center}
.wizard-range .wizard-control-with-icon>span{left:9px}
.wizard-range .wizard-control-with-icon>.form-control{padding-left:39px}
#brandBadge{display:grid;width:27px;height:27px;place-items:center}
#brandBadge>.car-brand-mark{position:static;transform:none}
.car-brand-mark{display:grid;width:27px!important;height:27px!important;place-items:center;border:1px solid color-mix(in srgb,var(--ink) 18%,transparent);border-radius:50%;background:linear-gradient(145deg,var(--surface),var(--surface-soft));color:var(--ink);font-size:7px;font-weight:900;letter-spacing:-.04em;overflow:hidden}
.car-brand-mark img{grid-area:1/1;width:23px;height:23px;object-fit:contain}
.car-brand-mark b{grid-area:1/1;font-size:7px;line-height:1}
.car-brand-mark img:not([hidden])+b{display:none}
.car-brand-mark.is-empty{border:0;border-radius:0;background:transparent;color:var(--accent)}
.car-brand-mark.is-empty .category-glyph{width:22px;height:22px}
.motorcycle-brand-mark{border:0;border-radius:9px;background:color-mix(in srgb,var(--accent) 11%,var(--surface-soft));color:var(--accent)}
.motorcycle-brand-mark .category-glyph{width:20px;height:20px}
.car-brand-picker{position:relative;min-width:0}
.car-brand-picker-trigger{display:grid;width:100%;min-height:43px;grid-template-columns:27px minmax(0,1fr) 18px;align-items:center;gap:9px;padding:7px 9px;border:1px solid color-mix(in srgb,var(--ink) 15%,transparent);border-radius:12px;background:var(--surface);color:var(--ink);text-align:left;box-shadow:0 1px 2px color-mix(in srgb,var(--ink) 5%,transparent);cursor:pointer}
.car-brand-picker-trigger strong{min-width:0;overflow:hidden;font-size:13px;font-weight:500;text-overflow:ellipsis;white-space:nowrap}
.car-brand-picker-trigger>i{color:var(--muted);font-style:normal;font-size:17px;text-align:center;transition:transform .18s ease}
.car-brand-picker-trigger[aria-expanded="true"]>i{transform:rotate(180deg)}
.car-brand-picker-trigger:focus-visible{border-color:color-mix(in srgb,var(--accent) 70%,var(--line));outline:3px solid color-mix(in srgb,var(--accent) 10%,transparent)}
.car-brand-picker-trigger:disabled{cursor:not-allowed;opacity:.5}
.car-brand-picker-menu{position:absolute;z-index:42;top:calc(100% + 7px);left:-10px;width:min(310px,calc(200% + 20px));max-height:290px;padding:7px;border:1px solid color-mix(in srgb,var(--accent) 24%,var(--line));border-radius:16px;background:color-mix(in srgb,var(--surface) 96%,transparent);box-shadow:0 18px 44px color-mix(in srgb,var(--ink) 18%,transparent);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);overflow:auto;overscroll-behavior:contain}
.car-brand-picker-menu[hidden]{display:none}
.car-brand-option{display:grid;width:100%;grid-template-columns:35px minmax(0,1fr);align-items:center;gap:10px;min-height:45px;padding:6px 9px;border:0;border-radius:11px;background:transparent;color:var(--ink);text-align:left;cursor:pointer}
.car-brand-option>span{display:grid;width:35px;height:31px;place-items:center}.car-brand-option .car-brand-mark{width:30px!important;height:30px!important}.car-brand-option .car-brand-mark img{width:26px;height:26px}
.car-brand-option strong{font-size:12px;font-weight:650}.car-brand-option:hover,.car-brand-option:focus-visible{outline:0;background:color-mix(in srgb,var(--accent) 8%,var(--surface-soft))}.car-brand-option.selected{background:color-mix(in srgb,var(--accent) 12%,var(--surface-soft));color:var(--accent)}

/* Every field is a framed card now, so a frame around the whole block as well
   nested three borders around one control. The divider under the summary is
   enough to separate the section. */
.wizard-main-card .car-wizard-additional{margin:1px 0 0;padding:0;border:0;border-radius:0;background:none;overflow:visible}
.wizard-main-card .car-wizard-additional summary{display:grid;grid-template-columns:38px minmax(0,1fr) 20px;min-height:64px;gap:9px}
.wizard-main-card .wizard-additional-icon{width:36px;height:36px;border-radius:12px}
.wizard-main-card .car-wizard-additional summary>i{text-align:right}
.wizard-main-card .car-wizard-additional-fields{display:grid;gap:11px;padding:11px 0 0}
/* The card layout is single column: the label sits above its control instead
   of beside it, which is what made the two halves of the form look unrelated. */
.form-card .form-row{display:grid;grid-template-columns:minmax(0,1fr);min-height:0;gap:6px;align-items:stretch}
.form-card .form-row-stack{gap:6px!important}
.form-card .form-row>label:not(.check-option):not(.switch-option){font-size:10px}
.form-card .form-row .pair{gap:8px}
.form-card .form-row .input-unit .unit{right:11px;bottom:auto;top:50%;transform:translateY(-50%);color:var(--muted);font-size:11px;font-weight:700}
.form-card .form-row .input-unit input{padding-right:34px}
.form-card .form-row .check-option,.form-card .form-row .switch-option{justify-content:flex-start;min-height:43px;padding:9px 10px;border:1px solid color-mix(in srgb,var(--ink) 15%,transparent);border-radius:12px;background:var(--surface);font-size:13px}
.wizard-empty-additional{margin:4px 2px 0;color:var(--muted);font-size:13px;line-height:1.45}

.car-wizard-preview{grid-template-columns:34px minmax(0,1fr);align-items:center;gap:10px!important}
.wizard-preview-icon{width:34px;height:34px;border-radius:50%;background:color-mix(in srgb,var(--accent) 11%,var(--surface))}
.wizard-preview-icon .wizard-glyph{width:21px;height:21px}
.wizard-preview-copy{display:grid;gap:4px;min-width:0}
.wizard-preview-copy b{color:var(--ink);font-size:13px;line-height:1.35}
.wizard-preview-copy b strong{color:var(--accent);font-size:19px}
.wizard-preview-copy small{color:var(--muted);font-size:9px;line-height:1.35}
.car-wizard-actions,.car-wizard-review-actions{display:grid;grid-template-columns:minmax(96px,.72fr) minmax(0,1.45fr);gap:9px;position:sticky;bottom:calc(80px + env(safe-area-inset-bottom,0px));z-index:24;margin:9px 0 0;padding:8px;border:1px solid color-mix(in srgb,var(--accent) 18%,var(--line));border-radius:19px;background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.car-wizard-actions button,.car-wizard-review-actions button{display:flex;align-items:center;justify-content:center;gap:7px;min-height:49px;padding:10px 12px;border-radius:13px;font-size:12px;font-weight:850}
.car-wizard-actions .secondary,.car-wizard-review-actions .secondary{border:1px solid var(--line);background:var(--surface);color:var(--ink)}
.car-wizard-actions .primary,.car-wizard-review-actions .primary{border:1px solid var(--accent);background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 78%,#23d36a),var(--accent));color:var(--accent-ink);box-shadow:0 8px 20px color-mix(in srgb,var(--accent) 18%,transparent)}
.car-wizard-actions .wizard-glyph,.car-wizard-review-actions .wizard-glyph{width:18px;height:18px}
.wizard-step-hint{margin:7px 4px 0;color:var(--muted);font-size:9px;text-align:center}

.filter-wizard-review-title{padding:0 3px 12px}
.wizard-review-card{padding:16px!important}
.wizard-review-hero{display:flex;align-items:center;gap:11px;margin:4px 0 9px;padding:12px;border-radius:15px;background:color-mix(in srgb,var(--accent) 7%,var(--surface-soft))}
.wizard-review-hero>span{display:grid;place-items:center;width:42px;height:42px}
.wizard-review-hero .car-brand-mark{width:38px!important;height:38px!important}
.wizard-review-hero div{display:grid;gap:2px;min-width:0}.wizard-review-hero small{color:var(--muted);font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.wizard-review-hero strong{color:var(--ink);font-size:16px;overflow-wrap:anywhere}
.car-wizard-summary dl div{grid-template-columns:minmax(115px,.9fr) minmax(0,1.1fr);padding:9px 0}
.car-wizard-summary dt{display:flex;align-items:center;gap:7px}.car-wizard-summary dt>span{display:grid;color:var(--accent)}.car-wizard-summary dt .wizard-glyph{width:16px;height:16px}
.car-wizard-sources{padding:10px 16px 15px}

[data-theme="dark"] .wizard-category-card,[data-theme="dark"] .wizard-main-card,[data-theme="dark"] .wizard-review-card{background:var(--surface)!important}
[data-theme="dark"] .wizard-field-card,[data-theme="dark"] .wizard-category-tile{background:color-mix(in srgb,var(--surface-soft) 52%,var(--surface))}
[data-theme="dark"] .car-brand-mark{background:var(--surface-soft);color:var(--ink)}
[data-theme="dark"] .car-brand-picker-menu{background:color-mix(in srgb,var(--surface) 96%,transparent)}
@media(max-width:390px){
  .filter-wizard-title-row h1{font-size:27px}.filter-wizard-title-row>span{min-height:35px;padding:0 11px;font-size:10px}
  .wizard-category-card{padding:14px}.wizard-category-grid{gap:6px}.wizard-category-tile{grid-template-columns:34px minmax(0,1fr);min-height:55px;padding:7px;gap:7px}.wizard-category-tile .category-icon{width:34px;height:34px}.wizard-category-tile strong{font-size:10px}
  .wizard-main-card{padding:14px!important}.wizard-field-grid{gap:8px}.wizard-field-card{padding:9px}.wizard-field-card .form-control{font-size:12px}.wizard-range{grid-template-columns:minmax(0,1fr) 12px minmax(0,1fr)}
  .car-wizard-actions,.car-wizard-review-actions{grid-template-columns:92px minmax(0,1fr)}
}
@media(max-width:340px){.wizard-category-grid,.wizard-field-grid{grid-template-columns:1fr}.wizard-category-tile strong{font-size:11px}.wizard-range{grid-template-columns:1fr}.wizard-range>i{display:none}}
@keyframes privacyReveal{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){body .privacy-policy .privacy-copy{animation:none}}

/* Expandable application description. */
body .about-app-details{border:0;background:var(--surface)}
body .about-app-details summary{display:flex;align-items:center;gap:10px;min-height:64px;padding:10px 14px;cursor:pointer;list-style:none}
body .about-app-details summary::-webkit-details-marker{display:none}
body .about-app-details summary>.setting-copy{min-width:0;flex:1}
body .about-app-details summary>.setting-chevron{margin-left:0;transition:transform .2s ease}
body .about-app-details[open] summary>.setting-chevron{transform:rotate(90deg)}
body .about-app-copy{padding:2px 14px 17px;border-top:1px solid color-mix(in srgb,var(--line) 65%,transparent);animation:privacyReveal .2s ease-out}
body .about-app-copy p{margin:13px 0 10px;color:var(--ink);font-size:11px;line-height:1.55}
body .about-app-copy ul{display:grid;gap:8px;margin:0;padding:0;list-style:none}
body .about-app-copy li{position:relative;color:var(--muted);font-size:10px;line-height:1.45}
body .about-app-copy ul li{padding-left:18px}
body .about-app-copy ul li::before{content:'✓';position:absolute;left:0;top:0;color:var(--accent);font-weight:900}
body .about-app-copy ol li::before{content:none}
@media(prefers-reduced-motion:reduce){body .about-app-copy{animation:none}}

/* Collapsible admin sections. */
body .admin-collapsible>summary{display:grid;grid-template-columns:minmax(0,1fr) auto 18px;align-items:center;gap:9px;min-height:44px;cursor:pointer;list-style:none}
body .admin-collapsible>summary::-webkit-details-marker{display:none}
body .admin-collapsible>summary>span{display:flex;align-items:center;gap:9px;min-width:0}
body .admin-collapsible>summary>span>.ui-icon{color:var(--accent)}
body .admin-collapsible>summary b{font-size:14px}
body .admin-collapsible>summary em{display:grid;place-items:center;min-width:27px;height:24px;padding:0 7px;border-radius:999px;background:#edf8f0;color:var(--accent);font-size:9px;font-style:normal;font-weight:850}
body .admin-collapse-chevron{width:17px;height:17px;color:var(--muted);transition:transform .2s ease}
body .admin-collapsible[open] .admin-collapse-chevron{transform:rotate(90deg)}
body .admin-collapsible-body{padding-top:12px;animation:privacyReveal .2s ease-out}
@media(prefers-reduced-motion:reduce){body .admin-collapsible-body{animation:none}}

/* High-contrast dark theme.
   This final cascade intentionally sits after the earlier component rules. */
[data-theme="dark"] {
  color-scheme: dark;
  --bg:#0b100d;
  --card:#151c17;
  --text:#f2f6f3;
  --muted:#aab6ad;
  --line:#344139;
  --border:#344139;
  --blue:#49d575;
  --blue2:#49d575;
  --green:#49d575;
  --surface:#151c17;
  --surface-soft:#212b24;
  --ink:#f2f6f3;
  --accent:#49d575;
  --accent-ink:#06130a;
  --attention:#f0b429;
  --shadow:0 10px 30px rgba(0,0,0,.34),0 1px 2px rgba(0,0,0,.28);
  /* Premium in the dark theme: the same gold and the same green, deeper,
     so the offer keeps its identity instead of dissolving into the page. */
  --premium-gold:#ffcf5c;
  --premium-ink:#fff;
  --premium-ink-soft:color-mix(in srgb,#fff 87%,transparent);
  --premium-sheen:color-mix(in srgb,#fff 30%,transparent);
  --premium-line:color-mix(in srgb,var(--accent) 42%,#000 26%);
  --premium-field:radial-gradient(120% 150% at 88% -12%,color-mix(in srgb,var(--premium-gold) 30%,transparent) 0%,transparent 58%),
    radial-gradient(88% 130% at 4% 112%,color-mix(in srgb,var(--premium-gold) 12%,transparent) 0%,transparent 62%),
    linear-gradient(118deg,color-mix(in srgb,var(--accent) 48%,#000 52%) 0%,color-mix(in srgb,var(--accent) 40%,#02180c 60%) 55%,color-mix(in srgb,var(--accent) 30%,#02140a 70%) 100%);
  --premium-shadow:0 12px 30px rgba(0,0,0,.36);
  --premium-mark-bg:#fff;
  --premium-mark-ink:#0d6b30;
  --premium-cta-bg:linear-gradient(135deg,#ffdf85 0%,var(--premium-gold) 46%,#eeab2c 100%);
  --premium-cta-ink:#3a2400;
  --premium-tag-bg:#f5c14e;
  --premium-tag-ink:#3a2400;
}

[data-theme="dark"] body {
  background:
    radial-gradient(circle at 50% -12%, rgba(73,213,117,.12), transparent 34%),
    var(--bg) !important;
  color:var(--ink);
}
[data-theme="dark"] .boot-splash,
[data-theme="dark"] .access-gate {
  background:rgba(11,16,13,.97) !important;
}

[data-theme="dark"] .section-title, [data-theme="dark"] .filters-hint, [data-theme="dark"] .meta, [data-theme="dark"] .feedback-count, [data-theme="dark"] .profile-row small{
  color:var(--muted) !important;
}
[data-theme="dark"] .check-option{
  color:var(--ink);
  border-color:color-mix(in srgb,var(--ink) 72%,transparent);
}
[data-theme="dark"] .chevron, [data-theme="dark"] .category-pick em{
  color:#8f9b93;
}

[data-theme="dark"] .card, [data-theme="dark"] .form-card, [data-theme="dark"] .profile-card, [data-theme="dark"] .profile-hero, [data-theme="dark"] .profile-settings, [data-theme="dark"] .listing-overview, [data-theme="dark"] .listing-card, [data-theme="dark"] .access-card, [data-theme="dark"] body .admin-card{
  border-color:var(--line) !important;
  background:var(--surface) !important;
  color:var(--ink) !important;
  box-shadow:0 8px 26px rgba(0,0,0,.26) !important;
}
[data-theme="dark"] .category-row, [data-theme="dark"] .filter-row, [data-theme="dark"] .profile-row, [data-theme="dark"] .profile-setting, [data-theme="dark"] .language-option, [data-theme="dark"] .category-pick, [data-theme="dark"] .language-picker{
  border-color:var(--line) !important;
}
[data-theme="dark"] .language-option, [data-theme="dark"] button.admin-user-row{
  background:transparent !important;
  color:var(--ink) !important;
}
[data-theme="dark"] .category-icon {
  background:color-mix(in srgb,var(--accent) 14%,var(--surface-soft));
  color:#45d579;
  box-shadow:inset 0 0 0 1px rgba(69,213,121,.08);
}
[data-theme="dark"] .promo-banner {
  border-color:#304c39;
  background:
    radial-gradient(circle at 94% 12%, rgba(69, 213, 121, .16), transparent 34%),
    linear-gradient(120deg, #19271e, #17231b);
  box-shadow:0 9px 25px rgba(0,0,0,.24);
}
[data-theme="dark"] .promo-copy h2 { color:#eff8f1; }
[data-theme="dark"] .promo-copy p { color:#9caf9f; }
/* The dark theme repaints .promo-banner and .profile-card — the trap the
   guide warns about: a theme rule outranks a plain modifier, and the card's
   is !important on top. Both Premium surfaces have to say it again here, but
   they say it with the very same tokens as the light rule, so the two can
   never drift apart; only the token values differ between the themes. */
[data-theme="dark"] .promo-subscription {
  border-color: var(--premium-line);
  background: var(--premium-field);
  box-shadow: var(--premium-shadow);
  color: var(--premium-ink);
}
[data-theme="dark"] .profile-card.subscription-card {
  border-color: var(--premium-line) !important;
  background: var(--premium-field) !important;
  box-shadow: var(--premium-shadow) !important;
  color: var(--premium-ink) !important;
}
[data-theme="dark"] .promo-subscription .promo-copy h2 { color: var(--premium-ink); }
[data-theme="dark"] .promo-subscription .promo-copy p { color: var(--premium-ink-soft); }
/* And the theme repaints .primary too, which left the two buy buttons dark
   green on gold while «Управлять подпиской» stayed brown. Measured with
   getComputedStyle; one rule, all three, from the same token. */
[data-theme="dark"] .promo-subscription-action button,
[data-theme="dark"] .subscription-card .primary,
[data-theme="dark"] .subscription-card .profile-action { color: var(--premium-cta-ink); }
[data-theme="dark"] .promo-notification {
  border-color:rgba(22,72,40,.08);
  background:rgba(255,255,255,.97);
  color:#1d3024;
}
[data-theme="dark"] .promo-notification small { color:#647368; }

[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]), [data-theme="dark"] select, [data-theme="dark"] textarea, [data-theme="dark"] .form-control, [data-theme="dark"] .feedback-form select, [data-theme="dark"] .feedback-form textarea, [data-theme="dark"] .admin-search, [data-theme="dark"] .admin-search-wrap{
  border-color:#3b4a41 !important;
  background:#202923 !important;
  color:var(--ink) !important;
  box-shadow:none;
}
[data-theme="dark"] select option {
  background:#202923;
  color:var(--ink);
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color:#8f9b93;
  opacity:1;
}
[data-theme="dark"] input:focus, [data-theme="dark"] select:focus, [data-theme="dark"] textarea:focus, [data-theme="dark"] .form-control:focus{
  border-color:var(--accent) !important;
  outline:2px solid color-mix(in srgb,var(--accent) 28%,transparent);
  outline-offset:1px;
}
[data-theme="dark"] input:disabled,
[data-theme="dark"] select:disabled,
[data-theme="dark"] textarea:disabled {
  color:#849087 !important;
  background:#19201b !important;
  opacity:.78;
}
[data-theme="dark"] .form-row label, [data-theme="dark"] .feedback-form label, [data-theme="dark"] .generic-title, [data-theme="dark"] .page-title{
  color:var(--ink);
}

[data-theme="dark"] .bottom-nav {
  border-color:#344139 !important;
  background:rgba(21,28,23,.94) !important;
  box-shadow:0 12px 34px rgba(0,0,0,.42);
}
[data-theme="dark"] .bottom-nav .nav-pill {
  color:#aab6ad;
}
[data-theme="dark"] .bottom-nav .nav-pill.active {
  background:color-mix(in srgb,var(--accent) 16%,var(--surface));
  color:var(--accent);
}

[data-theme="dark"] .search-pulse {
  border-color:color-mix(in srgb,var(--accent) 34%,var(--line));
  background:linear-gradient(135deg,#18271d 0%,var(--surface) 72%);
  box-shadow:0 10px 30px rgba(0,0,0,.24);
}
[data-theme="dark"] .pulse-radar,
[data-theme="dark"] .setting-icon,
[data-theme="dark"] .profile-avatar,
[data-theme="dark"] .admin-avatar {
  background:color-mix(in srgb,var(--accent) 15%,var(--surface-soft)) !important;
  color:var(--accent) !important;
}
[data-theme="dark"] .profile-status-pill {
  background:var(--surface-soft);
  color:var(--muted);
}
[data-theme="dark"] .profile-status-pill.active,
[data-theme="dark"] .system-chip,
[data-theme="dark"] .admin-all-clear {
  background:color-mix(in srgb,var(--accent) 14%,var(--surface));
  color:var(--accent);
}
[data-theme="dark"] .pulse-actions button,
[data-theme="dark"] .admin-head button {
  border-color:color-mix(in srgb,var(--accent) 34%,var(--line));
  background:var(--surface-soft);
  color:var(--accent);
}
[data-theme="dark"] .pulse-actions button:first-child {
  border-color:var(--accent);
  background:var(--accent);
  color:var(--accent-ink);
}
[data-theme="dark"] .filter-state{
  color:var(--accent-ink) !important;
}
[data-theme="dark"] .admin-system-grid span, [data-theme="dark"] .delivery-grid span, [data-theme="dark"] .admin-events-list, [data-theme="dark"] .admin-events-list .admin-event-row{
  border-color:var(--line);
  background:var(--surface-soft);
  color:var(--muted);
  box-shadow:none;
}
[data-theme="dark"] .admin-system-grid b,
[data-theme="dark"] .delivery-grid b {
  color:var(--ink);
}
[data-theme="dark"] .admin-bar-row>i {
  background:#2b372f;
}
[data-theme="dark"] .attention-row,
[data-theme="dark"] .system-chip.error,
[data-theme="dark"] .system-chip.degraded,
[data-theme="dark"] .admin-error {
  background:#3a2222 !important;
  color:#ffb1ab !important;
}
[data-theme="dark"] .admin-error code {
  background:#291919;
  color:#ffc3be;
}
[data-theme="dark"] .system-chip.stale,
[data-theme="dark"] .admin-filter-row.no-results {
  background:#392f1e !important;
  color:#ffd277;
}
[data-theme="dark"] .admin-filter-row.no-results small {
  color:#ffd277;
}

[data-theme="dark"] .match-filter, [data-theme="dark"] .browse-more{
  border-color:var(--line) !important;
  background:var(--surface-soft) !important;
  color:var(--ink) !important;
}

[data-theme="dark"] .match-filter button:not(.active){
  color:var(--muted);
}

[data-theme="dark"] .listings-info, [data-theme="dark"] .listings-empty p, [data-theme="dark"] .listings-state p{
  color:var(--muted);
}

[data-theme="dark"] .listing-card.is-new {
  border-color:color-mix(in srgb,var(--accent) 52%,var(--line)) !important;
}
[data-theme="dark"] .listing-meta-row span {
  border-color:#39473e;
  background:#202a23;
  color:#b7c2ba;
}
[data-theme="dark"] .open-sslv {
  border-color:color-mix(in srgb,var(--accent) 58%,var(--line));
  background:color-mix(in srgb,var(--accent) 10%,var(--surface));
  color:var(--accent);
}
[data-theme="dark"] .listing-source {
  border:1px solid color-mix(in srgb,currentColor 34%,transparent);
}
[data-theme="dark"] .listing-source.source-sslv {
  background:#253029;
  color:#b8c2bb;
}
[data-theme="dark"] .listing-source.source-pp {
  background:#3b2230;
  color:#ffafd0;
}
[data-theme="dark"] .listing-source.source-city24 {
  background:#172d3a;
  color:#8bd2ff;
}
[data-theme="dark"] .listing-source.source-andele {
  background:#20332a;
  color:#74e2a1;
}
[data-theme="dark"] .listing-source.source-balticar {
  background:#1f3326;
  color:#8fe0a8;
}
[data-theme="dark"] .listing-source.source-autoplius {
  background:#1b2a40;
  color:#8fb8ff;
}
[data-theme="dark"] .listing-source.source-auto24 {
  background:#3a1f22;
  color:#ff9d9d;
}
[data-theme="dark"] .listing-source.source-autogidas {
  background:#3a2c17;
  color:#f0c07a;
}
[data-theme="dark"] .empty-art,
[data-theme="dark"] .monitor-info {
  background:color-mix(in srgb,var(--accent) 13%,var(--surface));
  color:#bceacb;
}
[data-theme="dark"] .listings-error .state-art,
[data-theme="dark"] .filter-delete:active,
[data-theme="dark"] .filter-delete:focus-visible {
  background:#3a2222 !important;
  color:#ff9d98 !important;
}

[data-theme="dark"] .filter-chip-card {
  border-color:color-mix(in srgb,var(--accent) 44%,var(--line)) !important;
  background:
    radial-gradient(circle at 104% -4%,rgba(73,213,117,.14),transparent 40%),
    linear-gradient(155deg,#18211b 0%,#151c17 72%,#17251b 100%) !important;
  color:var(--ink);
  box-shadow:0 14px 34px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.035) !important;
}
[data-theme="dark"] .filter-chip-card.is-inactive {
  border-color:rgba(255,105,105,.58) !important;
  background:
    radial-gradient(circle at 104% -4%,rgba(255,105,105,.12),transparent 40%),
    linear-gradient(155deg,#211919 0%,#1c1617 72%,#271919 100%) !important;
}
[data-theme="dark"] .filter-chip-title,
[data-theme="dark"] .filter-chip-footer {
  color:var(--ink);
}
[data-theme="dark"] .filter-chip-category{
  color:var(--muted);
}

[data-theme="dark"] .filter-chip-icon,
[data-theme="dark"] .filter-edit-arrow {
  background:color-mix(in srgb,var(--accent) 15%,var(--surface-soft)) !important;
}
[data-theme="dark"] .filter-chip-icon { border-color:rgba(73,213,117,.13); }
[data-theme="dark"] .filter-chip-card.is-inactive .filter-chip-icon {
  border-color:rgba(255,105,105,.24) !important;
  background:rgba(255,105,105,.11) !important;
  color:#ff7772 !important;
}
[data-theme="dark"] .filter-state {
  border-color:rgba(73,213,117,.38) !important;
  background:linear-gradient(135deg,rgba(73,213,117,.22),rgba(73,213,117,.07)) !important;
  color:#8ce9a8 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 7px 20px rgba(0,0,0,.22),0 0 0 4px rgba(73,213,117,.04) !important;
}
[data-theme="dark"] .filter-edit-arrow {
  color:var(--accent);
}
[data-theme="dark"] .filter-parameter {
  border-color:#354239;
  background:rgba(31,42,34,.86);
  color:#b7c2ba;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}
[data-theme="dark"] .filter-parameter-mark,
[data-theme="dark"] .filter-parameter-currency {
  color:var(--accent);
}
[data-theme="dark"] .filter-parameter-more { background:rgba(73,213,117,.11); color:#8ce9a8; }
[data-theme="dark"] .filter-chip-card.is-inactive .filter-chip-footer,
[data-theme="dark"] .filter-chip-card.is-inactive .filter-parameter-currency,
[data-theme="dark"] .filter-chip-card.is-inactive .filter-edit-arrow,
[data-theme="dark"] .filter-chip-card.is-inactive .filter-state {
  color:#ff918c !important;
}
[data-theme="dark"] .filter-chip-card.is-inactive .filter-state {
  border-color:rgba(255,105,105,.48) !important;
  background:rgba(255,105,105,.12) !important;
}
[data-theme="dark"] .filter-chip-card.is-inactive .filter-edit-arrow {
  background:rgba(255,105,105,.13) !important;
}
[data-theme="dark"] .filter-chip-card.is-inactive .filter-parameter-more { background:rgba(255,105,105,.11); color:#ff918c; }
[data-theme="dark"] .filter-chip-footer {
  border-top-color:var(--line);
}
[data-theme="dark"] .add-filter-card {
  border-color:#455349 !important;
  background:rgba(27,36,30,.84) !important;
  color:var(--accent) !important;
}

[data-theme="dark"] .generic-save {
  border-color:#3b4a41;
  background:rgba(21,28,23,.94);
  box-shadow:0 12px 30px rgba(0,0,0,.42);
}
[data-theme="dark"] .primary, [data-theme="dark"] .generic-save .primary, [data-theme="dark"] .feedback-send, [data-theme="dark"] .access-card .primary{
  color:var(--accent-ink);
}
[data-theme="dark"] .toast {
  border:1px solid #3c4840;
  background:#1b241e;
  color:var(--ink);
  box-shadow:0 10px 28px rgba(0,0,0,.42);
}
[data-theme="dark"] .access-logo {
  background:color-mix(in srgb,var(--accent) 14%,var(--surface-soft));
  color:var(--accent);
}
[data-theme="dark"] .access-card p {
  color:var(--muted);
}

/* Profile glass system: one hierarchy, one icon language and no duplicated CTAs. */
.profile-screen {
  --profile-border:color-mix(in srgb,var(--accent) 22%,var(--line));
  --profile-glow:color-mix(in srgb,var(--accent) 13%,transparent);
  position:relative;
  padding-bottom:24px;
}
.profile-screen > .page-title {
  margin:4px 4px 14px;
  color:var(--ink);
  font-size:28px;
  font-weight:850;
  line-height:1.08;
  letter-spacing:-.035em;
}
.profile-screen .profile-glass {
  border:1px solid var(--profile-border) !important;
  background:
    radial-gradient(circle at 96% 2%,var(--profile-glow),transparent 40%),
    linear-gradient(145deg,rgba(255,255,255,.88),rgba(244,252,246,.70)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.88),
    0 12px 30px rgba(24,108,52,.075) !important;
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
}
.profile-screen .ui-icon {
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.85;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.profile-screen .profile-identity-card {
  display:grid;
  grid-template-columns:56px minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  min-height:88px;
  margin-bottom:12px;
  padding:15px;
  border-radius:24px;
}
.profile-screen .profile-identity { min-width:0; }
.profile-screen .profile-identity-card .profile-avatar {
  width:56px;
  height:56px;
  flex:0 0 56px;
  border:1px solid rgba(255,255,255,.62);
  border-radius:18px;
  background:linear-gradient(145deg,#19ae4d,#11913d);
  color:#fff;
  box-shadow:0 9px 22px rgba(21,159,63,.22),inset 0 1px 0 rgba(255,255,255,.24);
}
.profile-screen .profile-identity h2 {
  display:-webkit-box;
  margin:0 0 3px;
  overflow:hidden;
  color:var(--ink);
  font-size:18px;
  font-weight:850;
  line-height:1.16;
  overflow-wrap:anywhere;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}
.profile-screen .profile-username {
  overflow:hidden;
  color:var(--muted);
  font-size:12px;
  font-weight:650;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.profile-screen .profile-status-pill {
  min-height:30px;
  padding:7px 10px;
  border:1px solid color-mix(in srgb,var(--accent) 16%,transparent);
  background:color-mix(in srgb,var(--accent) 9%,rgba(255,255,255,.68));
  color:var(--accent);
  font-size:10px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.72);
}

.profile-screen .profile-monitor-card {
  display:block;
  margin-bottom:12px;
  padding:16px;
  border-radius:24px;
  overflow:hidden;
}
.profile-screen .profile-monitor-card.off {
  --profile-border:rgba(206,85,77,.23);
  --profile-glow:rgba(214,73,66,.09);
}
.profile-monitor-head {
  display:grid;
  grid-template-columns:48px minmax(0,1fr) 24px;
  align-items:center;
  gap:12px;
}
.profile-screen .pulse-radar {
  width:48px;
  height:48px;
  border:1px solid color-mix(in srgb,var(--accent) 15%,transparent);
  border-radius:16px;
  background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 16%,#fff),rgba(255,255,255,.55));
  color:var(--accent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.76),0 8px 20px rgba(21,159,63,.10);
}
.profile-screen .profile-monitor-card.off .pulse-radar {
  border-color:rgba(206,85,77,.16);
  background:linear-gradient(145deg,rgba(255,229,227,.72),rgba(255,255,255,.52));
  color:#c94f48;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 8px 20px rgba(193,65,59,.07);
}
.profile-screen .pulse-radar .ui-icon { width:24px; height:24px; }
.profile-screen .pulse-copy small {
  color:var(--accent);
  font-size:10px;
  letter-spacing:.11em;
}
.profile-screen .profile-monitor-card.off .pulse-copy small { color:#c94f48; }
/* "Attention" sits between running and off: a late check, a source down. */
.profile-screen .profile-monitor-card.attention {
  --profile-border:color-mix(in srgb,var(--attention) 26%,transparent);
  --profile-glow:color-mix(in srgb,var(--attention) 9%,transparent);
}
.profile-screen .profile-monitor-card.attention .pulse-radar {
  border-color:color-mix(in srgb,var(--attention) 18%,transparent);
  background:linear-gradient(145deg,color-mix(in srgb,var(--attention) 14%,#fff),rgba(255,255,255,.52));
  color:var(--attention);
}
.profile-screen .profile-monitor-card.attention .pulse-copy small { color:var(--attention); }
.profile-screen .pulse-copy h2 {
  margin:3px 0 3px;
  color:var(--ink);
  font-size:18px;
  line-height:1.15;
}
.profile-screen .pulse-copy p {
  display:-webkit-box;
  margin:0;
  overflow:hidden;
  color:var(--muted);
  font-size:11px;
  line-height:1.35;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}
.profile-monitor-light {
  display:grid;
  width:24px;
  height:24px;
  place-items:center;
  border-radius:50%;
  background:rgba(139,148,142,.08);
}
.profile-monitor-light i {
  width:8px;
  height:8px;
  border-radius:50%;
  background:#a8aeaa;
  box-shadow:0 0 0 5px rgba(139,148,142,.08);
}
.profile-monitor-light.active i {
  background:var(--accent);
  box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 11%,transparent),0 0 14px color-mix(in srgb,var(--accent) 36%,transparent);
}
/* One tone for "not quite right": a late check or a source that is down.
   The same token drives the light, the radar and the status dot. */
.profile-monitor-light.attention i {
  background:var(--attention);
  box-shadow:0 0 0 5px color-mix(in srgb,var(--attention) 14%,transparent);
}
.search-pulse.attention .pulse-radar {
  color:var(--attention);
  background:color-mix(in srgb,var(--attention) 16%,var(--surface));
}
.monitor-dot.attention { background:var(--attention); }

.profile-screen .pulse-actions {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
  margin-top:14px;
}
.profile-screen .profile-quick-action {
  display:grid;
  grid-template-columns:34px minmax(0,1fr) auto;
  align-items:center;
  gap:9px;
  min-width:0;
  min-height:56px;
  padding:8px 10px;
  border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);
  border-radius:17px;
  text-align:left;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.48),0 8px 20px rgba(22,138,59,.09);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}
.profile-screen .profile-quick-primary {
  background:linear-gradient(135deg,rgba(17,159,63,.94),rgba(67,194,104,.86));
  color:#fff;
}
.profile-screen .profile-quick-secondary {
  background:linear-gradient(145deg,rgba(255,255,255,.72),color-mix(in srgb,var(--accent) 7%,rgba(255,255,255,.56)));
  color:var(--accent);
}
.profile-quick-icon {
  display:grid;
  width:34px;
  height:34px;
  place-items:center;
  border:1px solid rgba(255,255,255,.20);
  border-radius:11px;
  background:rgba(255,255,255,.15);
}
.profile-quick-secondary .profile-quick-icon {
  border-color:color-mix(in srgb,var(--accent) 13%,transparent);
  background:color-mix(in srgb,var(--accent) 9%,rgba(255,255,255,.48));
}
.profile-quick-copy { min-width:0; }
.profile-quick-copy b,
.profile-quick-copy small { display:block; }
.profile-quick-copy b {
  overflow:hidden;
  font-size:11px;
  line-height:1.2;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.profile-quick-copy small {
  margin-top:3px;
  overflow:hidden;
  color:currentColor;
  font-size:9px;
  font-weight:650;
  line-height:1.15;
  opacity:.76;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.profile-quick-action > strong {
  font-size:20px;
  font-weight:900;
  line-height:1;
}
.profile-monitor-summary {
  display:flex;
  align-items:center;
  gap:7px;
  min-height:32px;
  margin-top:10px;
  padding:7px 10px 0;
  border-top:1px solid color-mix(in srgb,var(--profile-border) 65%,transparent);
  color:var(--muted);
  font-size:10px;
  font-weight:700;
}
.profile-monitor-summary .ui-icon { width:16px; height:16px; color:var(--accent); }
.profile-monitor-summary strong { margin-left:auto; color:var(--ink); font-size:13px; }

.profile-screen .profile-section-label {
  margin:19px 5px 8px;
  color:var(--muted);
  font-size:11px;
  letter-spacing:.12em;
}
.profile-screen .profile-settings {
  margin-bottom:12px;
  border-radius:22px;
  overflow:hidden;
}
.profile-screen .profile-setting,
.profile-screen .about-app-details summary,
.profile-screen .privacy-policy summary {
  min-height:66px;
  gap:11px;
  padding:10px 13px;
  background:transparent;
}
.profile-screen .profile-setting {
  grid-template-columns:40px minmax(0,1fr) auto 17px;
}
.profile-screen .setting-icon {
  display:grid;
  width:40px;
  height:40px;
  flex:0 0 40px;
  place-items:center;
  border:1px solid color-mix(in srgb,var(--accent) 13%,transparent);
  border-radius:13px;
  background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 13%,#fff),rgba(255,255,255,.56));
  color:var(--accent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.72);
}
.profile-screen .setting-copy b { font-size:13px; line-height:1.25; }
.profile-screen .setting-copy small {
  display:-webkit-box;
  margin-top:3px;
  overflow:hidden;
  font-size:10px;
  line-height:1.35;
  white-space:normal;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}
.profile-screen .setting-value { font-size:10px; }
.profile-screen .setting-chevron {
  width:17px;
  height:17px;
  margin-left:0;
  color:color-mix(in srgb,var(--muted) 78%,transparent);
}
.profile-screen .language-picker {
  margin:0 13px 12px 64px;
  padding:5px;
  border:1px solid color-mix(in srgb,var(--accent) 12%,var(--line));
  border-radius:14px;
  background:rgba(255,255,255,.58);
}
.profile-screen .language-option {
  border-radius:10px;
  font-size:11px;
}
.profile-screen .language-option.selected {
  background:color-mix(in srgb,var(--accent) 10%,transparent);
  color:var(--accent);
}
.profile-screen .about-app-details,
.profile-screen .privacy-policy { background:transparent; }
.profile-screen .about-app-details summary,
.profile-screen .privacy-policy summary { border-top:1px solid color-mix(in srgb,var(--line) 76%,transparent); }
.profile-screen .about-app-copy,
.profile-screen .privacy-copy { background:color-mix(in srgb,var(--accent) 2.5%,transparent); }
.profile-screen .about-app-copy p,
.profile-screen .privacy-copy p { font-size:11px; }
.profile-screen .about-app-copy ol {
  display:grid;
  gap:9px;
  margin:0;
  padding:13px 14px 2px 31px;
}
.profile-screen .about-app-copy ol li {
  padding-left:4px;
  color:var(--muted);
  font-size:10px;
  line-height:1.45;
}
.profile-screen .profile-guide-copy {
  padding:2px 14px 18px;
  border-top:1px solid color-mix(in srgb,var(--line) 65%,transparent);
  animation:privacyReveal .2s ease-out;
}
.profile-screen .profile-guide-copy h3 {
  margin:14px 0 5px;
  color:var(--ink);
  font-size:11px;
  line-height:1.35;
}
.profile-screen summary:focus-visible,
.profile-screen button:focus-visible {
  outline:2px solid color-mix(in srgb,var(--accent) 58%,transparent);
  outline-offset:-3px;
}

/* Telegram Stars voluntary support */
.support-screen { max-width:560px; margin:0 auto; }

/* The Premium page: the profile's card at a page's width. The privileges are
   rows parted by lines, not cards inside the card; everything paints from the
   Premium tokens the card already wears in both themes. */
.premium-screen { max-width:560px; margin:0 auto; }
.premium-privileges { display:grid; gap:0; margin:0; padding:0; list-style:none; }
.premium-privileges > li { display:grid; gap:2px; min-width:0; padding:9px 0; border-top:1px solid color-mix(in srgb,var(--premium-ink) 22%,transparent); color:var(--premium-ink); }
.premium-privileges > li > b { font-size:12px; font-weight:800; }
.premium-privileges > li > small { color:var(--premium-ink-soft); font-size:10px; line-height:1.4; }
/* A picture under each privilege, made of the app's own pieces: the filter
   form's board tile (ticked, with the gold rim it wears there) and a listing
   card's price-history block. The rows above are matched as children only:
   a descendant selector would have repainted the tile's caption and framed
   the history's rows. The tile is a picture here, so it is one line tall. */
.premium-example { min-width:0; margin-top:6px; }
.premium-example-board span { min-height:40px; }
.premium-example-label { display:block; color:var(--premium-ink-soft); font-size:8px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.premium-example .listing-price-history { margin-top:4px; }
/* «С 3 до 10», drawn: one place per filter, the free allowance against
   Premium's, on one scale so the difference is the picture. */
.premium-example-filters { display:grid; gap:6px; }
.premium-slots { display:grid; grid-template-columns:64px minmax(0,1fr) 20px; align-items:center; gap:8px; color:var(--premium-ink); font-size:10px; font-weight:700; }
.premium-slots > div { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:3px; }
.premium-slots i { height:16px; border:1px dashed color-mix(in srgb,var(--premium-ink) 45%,transparent); border-radius:4px; }
.premium-slots i.is-on { border-style:solid; border-color:transparent; background:color-mix(in srgb,var(--premium-ink) 86%,transparent); }
.premium-slots-paid i.is-on { background:var(--premium-gold); }
.premium-slots > b { font-size:12px; font-weight:850; font-variant-numeric:tabular-nums; text-align:right; }
.premium-plan { margin:0; color:var(--premium-ink); font-size:15px; font-weight:850; }
/* The periods on sale: the support screen's own choice buttons (one role, one
   component), painted for Premium's field with its tokens. Written under
   .subscription-card so it outranks the base and the dark theme's gold. */
.subscription-card .premium-plans > div { grid-template-columns:repeat(2,minmax(0,1fr)); }
.subscription-card .premium-plans .support-amount {
  flex-direction:column;
  gap:2px;
  min-height:66px;
  border-color:color-mix(in srgb,var(--premium-ink) 30%,transparent);
  background:color-mix(in srgb,var(--premium-ink) 10%,transparent);
  color:var(--premium-ink);
}
.subscription-card .premium-plans .support-amount strong { font-size:16px; font-weight:850; }
.subscription-card .premium-plans .support-amount span { color:var(--premium-ink-soft); font-size:10px; font-weight:700; }
.subscription-card .premium-plans .support-amount em { padding:2px 7px; border-radius:999px; background:color-mix(in srgb,var(--premium-gold) 34%,transparent); color:var(--premium-ink); font-size:9px; font-style:normal; font-weight:850; }
.subscription-card .premium-plans .support-amount.selected {
  border-color:var(--premium-gold);
  background:color-mix(in srgb,var(--premium-gold) 22%,transparent);
  color:var(--premium-ink);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--premium-gold) 35%,transparent);
}

.support-card {
  display:grid;
  gap:16px;
  padding:20px;
  border-radius:24px;
}
.support-hero {
  display:grid;
  width:70px;
  height:70px;
  margin:2px auto 0;
  place-items:center;
  border:1px solid color-mix(in srgb,#f0b429 28%,var(--line));
  border-radius:24px;
  background:radial-gradient(circle at 35% 25%,#fff7ce,#ffd86b 58%,#f0b429);
  box-shadow:0 14px 32px rgba(189,123,0,.18),inset 0 1px 0 rgba(255,255,255,.88);
}
.support-hero span { font-size:32px; filter:drop-shadow(0 3px 6px rgba(102,63,0,.16)); }
.support-intro { margin:0; color:var(--ink); font-size:14px; line-height:1.55; text-align:center; }
.support-notice {
  margin:0;
  padding:11px 13px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--surface-soft);
  color:var(--muted);
  font-size:11px;
  line-height:1.45;
  text-align:center;
}
.support-amounts { min-width:0; margin:0; padding:0; border:0; }
.support-amounts legend { margin-bottom:9px; color:var(--muted); font-size:11px; font-weight:750; }
.support-amounts > div { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.support-amount {
  display:flex;
  min-width:0;
  min-height:58px;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:9px 6px;
  border:1px solid var(--line);
  border-radius:15px;
  background:var(--surface-soft);
  color:var(--ink);
}
.support-amount span { font-size:15px; }
.support-amount strong { font-size:17px; }
.support-amount.selected {
  border-color:#e0a00d;
  background:color-mix(in srgb,#ffd86b 24%,var(--surface));
  color:#805300;
  box-shadow:0 0 0 2px color-mix(in srgb,#f0b429 15%,transparent);
}
.support-amount:disabled { cursor:default; opacity:.62; }
.support-terms {
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--surface-soft);
}
.support-terms summary {
  min-height:44px;
  display:flex;
  align-items:center;
  padding:0 12px;
  color:var(--ink);
  font-size:11px;
  font-weight:800;
  cursor:pointer;
}
.support-terms p { margin:0; padding:0 12px 12px; color:var(--muted); font-size:10px; line-height:1.5; }
.support-consent {
  display:grid;
  grid-template-columns:20px minmax(0,1fr);
  align-items:start;
  gap:9px;
  color:var(--ink);
  font-size:10px;
  line-height:1.45;
  cursor:pointer;
}
.support-consent input { width:18px; height:18px; margin:0; accent-color:var(--accent); }
.support-consent input:focus-visible { outline:2px solid color-mix(in srgb,var(--accent) 55%,transparent); outline-offset:2px; }
.support-pay { width:100%; min-height:50px; border-radius:15px; font-size:13px; font-weight:800; }
.support-status {
  display:grid;
  grid-template-columns:34px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:15px;
  background:var(--surface-soft);
}
.support-status-mark {
  display:grid;
  width:32px;
  height:32px;
  place-items:center;
  border-radius:50%;
  background:color-mix(in srgb,var(--accent) 12%,var(--surface));
  color:var(--accent);
  font-size:16px;
  font-weight:850;
}
.support-status strong { display:block; color:var(--ink); font-size:12px; }
.support-status p { margin:3px 0 0; color:var(--muted); font-size:10px; line-height:1.4; }
.support-status button { border:0; background:transparent; color:var(--accent); font-size:10px; font-weight:800; }
.support-status.is-cancelled .support-status-mark,
.support-status.is-failed .support-status-mark { background:rgba(220,70,70,.10); color:#cf4646; }

[data-theme="dark"] .home-support-card { border-color:rgba(255,216,107,.16); background:linear-gradient(105deg,rgba(255,216,107,.08),var(--surface) 65%); }
[data-theme="dark"] .home-support-icon { box-shadow:0 8px 18px rgba(0,0,0,.24); }
[data-theme="dark"] .support-hero { border-color:rgba(255,216,107,.18); box-shadow:0 15px 34px rgba(0,0,0,.30); }
[data-theme="dark"] .support-amount.selected { border-color:#d6a32b; background:rgba(255,216,107,.12); color:#ffe69a; }

@media(max-width:360px) {
  .support-card { gap:13px; padding:15px; }
  .support-hero { width:60px; height:60px; border-radius:20px; }
  .support-hero span { font-size:28px; }
  .support-amount { min-height:52px; gap:4px; }
  .support-amount strong { font-size:15px; }
  .support-status { grid-template-columns:32px minmax(0,1fr); }
  .support-status button { grid-column:2; justify-self:start; padding:0; }
}

[data-theme="dark"] .profile-screen {
  --profile-border:rgba(73,213,117,.17);
  --profile-glow:rgba(73,213,117,.105);
}
[data-theme="dark"] .profile-screen .profile-glass {
  background:
    radial-gradient(circle at 96% 2%,var(--profile-glow),transparent 40%),
    linear-gradient(145deg,rgba(27,38,30,.94),rgba(19,27,22,.88)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 13px 32px rgba(0,0,0,.29) !important;
}
[data-theme="dark"] .profile-screen .profile-identity-card .profile-avatar {
  border-color:rgba(104,232,143,.16);
  background:linear-gradient(145deg,#20b454,#11843a) !important;
  color:#fff !important;
}
[data-theme="dark"] .profile-screen .profile-status-pill {
  border-color:rgba(73,213,117,.14);
  background:rgba(73,213,117,.10);
  color:#72de94;
}
[data-theme="dark"] .profile-screen .pulse-radar,
[data-theme="dark"] .profile-screen .setting-icon {
  border-color:rgba(73,213,117,.13);
  background:linear-gradient(145deg,rgba(73,213,117,.14),rgba(32,43,35,.72)) !important;
  color:#62d888 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045);
}
[data-theme="dark"] .profile-screen .profile-monitor-card.off {
  --profile-border:rgba(255,105,105,.25);
  --profile-glow:rgba(255,105,105,.085);
}
[data-theme="dark"] .profile-screen .profile-monitor-card.off .pulse-radar {
  border-color:rgba(255,105,105,.17);
  background:linear-gradient(145deg,rgba(255,105,105,.12),rgba(40,29,29,.72)) !important;
  color:#ff918c !important;
}
/* "Attention" beside "off": the dark radar rule above wins on specificity and
   !important, so the tone is stated at the same strength. */
[data-theme="dark"] .profile-screen .profile-monitor-card.attention {
  --profile-border:color-mix(in srgb,var(--attention) 28%,transparent);
  --profile-glow:color-mix(in srgb,var(--attention) 10%,transparent);
}
[data-theme="dark"] .profile-screen .profile-monitor-card.attention .pulse-radar {
  border-color:color-mix(in srgb,var(--attention) 22%,transparent);
  background:linear-gradient(145deg,color-mix(in srgb,var(--attention) 16%,transparent),rgba(40,36,29,.72)) !important;
  color:var(--attention) !important;
}
[data-theme="dark"] .profile-screen .profile-quick-primary {
  background:linear-gradient(135deg,rgba(28,177,76,.90),rgba(62,190,101,.78));
  color:#f7fff9;
}
[data-theme="dark"] .profile-screen .profile-quick-secondary {
  border-color:rgba(73,213,117,.17);
  background:linear-gradient(145deg,rgba(43,57,47,.76),rgba(29,39,32,.68));
  color:#71df93;
}
[data-theme="dark"] .profile-screen .profile-quick-secondary .profile-quick-icon,
[data-theme="dark"] .profile-screen .language-picker {
  border-color:rgba(73,213,117,.12);
  background:rgba(73,213,117,.08);
}
[data-theme="dark"] .profile-screen .about-app-copy,
[data-theme="dark"] .profile-screen .privacy-copy { background:rgba(73,213,117,.025); }

@media(max-width:360px) {
  .profile-screen > .page-title { margin-left:2px; font-size:25px; }
  .profile-screen .profile-identity-card {
    grid-template-columns:48px minmax(0,1fr);
    gap:10px;
    padding:13px;
  }
  .profile-screen .profile-identity-card .profile-avatar { width:48px; height:48px; flex-basis:48px; border-radius:16px; }
  .profile-screen .profile-status-pill { grid-column:2; justify-self:start; margin-top:-4px; }
  .profile-screen .profile-monitor-card { padding:13px; }
  .profile-monitor-head { grid-template-columns:44px minmax(0,1fr) 20px; gap:9px; }
  .profile-screen .pulse-radar { width:44px; height:44px; }
  .profile-screen .pulse-copy h2 { font-size:16px; }
  .profile-screen .pulse-actions {
    grid-template-columns:1fr;
    gap:7px;
  }
  .profile-screen .profile-quick-action {
    grid-template-columns:30px minmax(0,1fr) auto;
    gap:7px;
    min-height:54px;
    padding:7px 8px;
  }
  .profile-quick-icon { width:30px; height:30px; }
  .profile-quick-copy b { font-size:10px; }
  .profile-quick-copy small { font-size:8px; }
  .profile-quick-action > strong { font-size:17px; }
  .profile-screen .profile-setting { grid-template-columns:40px minmax(0,1fr) 17px; }
  .profile-screen .profile-setting .setting-value { display:none; }
  
  
}

@media(max-width:420px) {
  .profile-screen .profile-quick-copy b {
    display:-webkit-box;
    overflow:hidden;
    white-space:normal;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
  }
  .profile-screen .profile-quick-copy small { display:none; }
}

@media(prefers-reduced-motion:reduce) {
  .profile-screen .search-pulse.active .pulse-radar { animation:none; }
  .profile-screen .profile-quick-action,
  .profile-screen .profile-setting { transition:none; }
}
.property-location{display:grid;gap:14px;margin-top:2px}.property-location-title{font-size:14px;font-weight:800;color:var(--text)}.property-location-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:5px;border-radius:16px;background:var(--surface-2,#eef2f7)}.property-location-tabs button{min-width:0;border:0;border-radius:12px;background:transparent;color:var(--muted);padding:10px 9px;text-align:left;display:grid;gap:3px;font:inherit}.property-location-tabs button b{font-size:13px;color:inherit}.property-location-tabs button small{font-size:10px;line-height:1.25;color:inherit}.property-location-tabs button.active{background:var(--card,#fff);color:var(--text);box-shadow:0 4px 16px rgba(22,39,68,.1)}.property-region-field{margin:0}.property-radius-map{height:292px;width:100%;overflow:hidden;border:1px solid var(--border);border-radius:18px;background:#dce8ef;isolation:isolate}.property-radius-map .leaflet-control-zoom a{color:#182235}.property-radius-map .leaflet-control-attribution{font-size:9px;background:rgba(255,255,255,.86)}.property-radius-controls{display:grid;grid-template-columns:1fr 130px;align-items:center;gap:12px;margin-top:12px}.property-radius-controls label{font-size:13px;font-weight:750}.property-map-hint{margin:8px 2px 0;color:var(--muted);font-size:11px}.property-map-compatibility{display:grid;gap:3px;margin-top:10px;padding:11px 12px;border-radius:13px;background:rgba(22,131,255,.09);color:var(--text)}.property-map-compatibility b{font-size:12px;color:#1683ff}.property-map-compatibility span{font-size:10px;line-height:1.35;color:var(--muted)}

/* The same card, now at the foot of the profile rather than on the home screen. */
.profile-support-card { margin-top: 10px; }

/* The catalogue of chats and groups (the owner, 21 September 2026). A card
   says the platform, what the group is for and whether it lets you in at
   once; the ones that answer the reader's own filters stand first and wear a
   gold edge, because that ranking is the thing only Parser.lv can do. */
.community-screen { display:grid; gap:14px; }
.community-lead { margin:-6px 0 0; color:var(--muted); font-size:12px; line-height:1.45; }
.community-empty { margin:10px 0; color:var(--muted); font-size:12px; }
.community-section { display:grid; gap:9px; }
.community-section h2 {
  margin:0; color:var(--muted); font-size:11px; font-weight:800;
  text-transform:uppercase; letter-spacing:.07em;
}
.community-grid { display:grid; gap:9px; }
/* A make inside a topic: «Запчасти» is a short page of makes that open on a
   tap, not a scroll of every group (the owner, 21 September 2026). */
.community-make { min-width:0; }
.community-make + .community-make { margin-top:7px; }
.community-make > summary {
  display:flex; align-items:center; gap:8px; min-height:40px;
  padding:9px 12px; border:1px solid var(--line); border-radius:13px;
  background:var(--surface); color:var(--ink);
  font-size:13px; font-weight:800; cursor:pointer; list-style:none;
}
.community-make > summary::-webkit-details-marker { display:none; }
.community-make > summary::after {
  content:'⌄'; margin-left:auto; color:var(--muted); font-size:14px; line-height:1;
  transition:transform .15s ease;
}
.community-make[open] > summary::after { transform:rotate(180deg); }
.community-make > summary > span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.community-make > summary > i {
  flex:0 0 auto; margin-left:2px; padding:2px 7px; border-radius:999px;
  background:var(--surface-soft); color:var(--muted);
  font-size:10px; font-style:normal; font-weight:800;
}
.community-make[open] > summary { border-bottom-left-radius:0; border-bottom-right-radius:0; }
.community-make > .community-grid { padding:9px 0 0 10px; }
.community-card {
  display:grid; gap:6px; padding:12px; min-width:0;
  border:1px solid var(--line); border-radius:16px; background:var(--surface);
}
.community-card.is-matched {
  border-color:color-mix(in srgb,var(--premium-gold) 55%,var(--line));
  box-shadow:0 0 0 1px color-mix(in srgb,var(--premium-gold) 22%,transparent);
}
.community-platform {
  justify-self:start; padding:2px 7px; border-radius:999px;
  font-size:8px; font-weight:850; text-transform:uppercase; letter-spacing:.06em;
}
.platform-whatsapp { background:#e6f6ec; color:#18794a; }
.platform-telegram { background:#e6f1fb; color:#1c6aa8; }
[data-theme="dark"] .platform-whatsapp { background:#16301f; color:#5fd08a; }
[data-theme="dark"] .platform-telegram { background:#16283a; color:#6ab5ea; }
.community-name { font-size:14px; font-weight:800; line-height:1.25; }
.community-summary { margin:0; color:var(--muted); font-size:11px; line-height:1.4; }
.community-facts { display:flex; flex-wrap:wrap; gap:5px; }
.community-facts i {
  flex:0 0 auto; padding:3px 7px; border-radius:7px;
  background:var(--surface-soft); color:var(--muted); font-size:10px; font-style:normal;
}
.community-access.access-request { background:color-mix(in srgb,var(--premium-gold) 26%,var(--surface-soft)); color:var(--ink); }
.community-open {
  justify-self:start; min-height:34px; padding:7px 16px;
  border:0; border-radius:11px; background:var(--accent); color:#fff;
  font-size:12px; font-weight:800; cursor:pointer;
}
.community-suggest { display:grid; gap:10px; padding:14px; }
.community-suggest .form-row { display:grid; gap:4px; }
.community-suggest .form-row > label { font-size:11px; }
.community-suggest h2 { margin:0; font-size:13px; font-weight:800; }
.community-note { margin:0 0 4px; color:var(--muted); font-size:10px; line-height:1.45; }

/* Four pills instead of three: the labels are shorter than the room they had. */
.bottom-nav .nav-pill { min-width:0; }
.bottom-nav .nav-label { white-space:nowrap; }
@media(max-width:370px) { .bottom-nav .nav-label { font-size:9px; } }

/* «Угадай цену»: the car whose price is known over the car whose price is not,
   and two buttons. Drawn to the owner's mockup of 9 September 2026, in the
   app's own palette. */
.duel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 6px; }
.duel-head h1 { margin: 0; font-size: 19px; font-weight: 850; letter-spacing: -.02em; color: var(--ink); }
.duel-head p { margin: 3px 0 0; color: var(--muted); font-size: 13px; }
.duel-board-button { flex: none; width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 50%; background: var(--card); font-size: 15px; line-height: 1; cursor: pointer; }

.duel-status { display: flex; align-items: center; gap: 6px; margin: 0 0 7px; }
.duel-pill { display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--muted); font-size: 11px; font-weight: 600; }
.duel-pill.is-score { color: var(--ink); }
.duel-pill.is-score i { color: #f0a500; font-style: normal; }
.duel-pill b { color: var(--ink); font-size: 12px; font-weight: 800; }
.duel-status .duel-board-button { margin-left: 2px; }
/* The trophy alone did not say what it opens. It carries its name now, which
   costs width, so the hearts give it a little room instead of sitting against
   it. They keep `margin-left: auto` - they are still what pushes right. */
.duel-board-button.is-labelled { width: auto; height: auto; padding: 4px 9px; border-radius: 999px; display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: var(--muted); }
.duel-board-button.is-labelled i { font-style: normal; font-size: 13px; line-height: 1; }
.duel-status .duel-lives { margin-right: 4px; }
.duel-lives { margin-left: auto; display: inline-flex; gap: 4px; font-size: 15px; line-height: 1; }
.duel-heart { color: #e2574c; }
.duel-heart.is-lost { color: var(--line); }
.duel-heart.is-spent { animation: duel-heart-break .5s ease-out both; }

/* Five seconds a pair. This bar is only the clock the player watches: the
   moment itself is decided in JS against a deadline, because a re-render -
   opening the table mid-round, for one - restarts a CSS animation, and a
   countdown that restarts hands out free time. The elapsed part is fed back
   in as a negative delay so a re-render resumes rather than begins. */
.duel-timer { height: 4px; margin: 0 0 7px; border-radius: 999px; background: var(--line); overflow: hidden; }
.duel-timer i { display: block; height: 100%; transform-origin: left center; border-radius: 999px; background: linear-gradient(90deg, #4c9f70, #f0a500); animation: duel-countdown var(--duel-seconds, 5s) linear var(--duel-elapsed, 0s) forwards; }
.duel-timer.is-urgent i { background: #e2574c; }
@keyframes duel-cheer-still { from { opacity: 0; } 30% { opacity: 1; } to { opacity: 0; } }
@keyframes duel-cheer {
  from { opacity: 1; transform: translate3d(0, -12vh, 0) rotate(0deg); }
  to { opacity: .15; transform: translate3d(var(--duel-drift, 0px), 104vh, 0) rotate(560deg); }
}
@keyframes duel-countdown { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* The verdict, told by motion as well as by colour: a right answer lifts,
   a wrong one shakes, and running out of time drops. */
.duel-card.is-right { animation: duel-right .45s cubic-bezier(.2,.9,.3,1.4) both; }
.duel-card.is-wrong { animation: duel-wrong .4s ease-in-out both; }
.duel-card.is-late { animation: duel-late .45s ease-out both; }
.duel-pill.is-score.is-scored { animation: duel-score .45s ease-out both; }
@keyframes duel-right { 0% { transform: scale(1); } 45% { transform: scale(1.035) translateY(-3px); } 100% { transform: scale(1); } }
@keyframes duel-wrong { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 45% { transform: translateX(5px); } 70% { transform: translateX(-3px); } }
@keyframes duel-late { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(4px); opacity: .82; } }
@keyframes duel-score { 0% { transform: scale(1); } 40% { transform: scale(1.14); } 100% { transform: scale(1); } }
@keyframes duel-heart-break { 0% { transform: scale(1); } 35% { transform: scale(1.35) rotate(-8deg); } 100% { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .duel-timer i { animation: none; transform: scaleX(var(--duel-left, 1)); }
  .duel-card-challenger.is-right,
  .duel-card-challenger.is-wrong,
  .duel-card-challenger.is-late,
  .duel-pill.is-score.is-scored,
  .duel-heart.is-spent { animation: none; }
}

/* A round is as tall as the screen allows, and the frames take what the rest of
   the column does not. The navigation is a 62px pill sitting 14px off the
   bottom, .content pads 10 above, and 14 is left between the two so nothing
   crowds the buttons. */
.duel-play { display: flex; flex-direction: column; margin-bottom: -12px; min-height: calc(100dvh - 86px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); }
.duel-play.is-open { min-height: 0; margin-bottom: 0; }
.duel-play .duel-card { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.duel-play .duel-photo { flex: 1 1 0; height: auto; min-height: 92px; }

.duel-card { overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--card); box-shadow: 0 10px 26px color-mix(in srgb, var(--ink) 7%, transparent); }
.duel-card.is-right { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.duel-card.is-wrong { border-color: #e2574c; }
/* The car that actually cost more, named after the round is judged. */
.duel-card.is-dearer { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
/* The cards are read, not pressed: the answer is the two buttons below them. */
.duel-photo { position: relative; overflow: hidden; height: clamp(120px, 24vh, 200px); background: color-mix(in srgb, var(--ink) 5%, transparent); }
.duel-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.duel-nophoto { display: grid; place-items: center; width: 100%; height: 100%; font-size: 40px; }
.duel-badge { position: absolute; top: 7px; left: 7px; padding: 4px 8px; border-radius: 999px; background: var(--card); color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.duel-badge.is-verdict { background: color-mix(in srgb, var(--ink) 78%, transparent); color: var(--card); }

.duel-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 10px; }
.duel-names { min-width: 0; display: grid; gap: 1px; }
.duel-names b { font-size: 14px; font-weight: 800; line-height: 1.15; color: var(--ink); }
/* One line: it is allowed to run out of room rather than wrap into two. */
.duel-names small { color: var(--muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.duel-chip { flex: none; padding: 6px 10px; border-radius: 11px; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); font-size: 14px; font-weight: 850; text-align: center; white-space: nowrap; }
.duel-chip.is-hidden { display: grid; gap: 2px; }
.duel-chip.is-hidden b { font-size: 15px; }
.duel-chip.is-hidden small { color: var(--muted); font-size: 9px; font-weight: 600; }
.duel-chip.is-top { background: var(--accent); color: var(--accent-ink); }

/* The badge straddles the seam between the two cards. At 18px of gap a 24px
   circle laps three pixels onto each card and reads as stuck to them, which
   is what it looked like on a phone. The gap now holds the circle, and a ring
   of page colour keeps it clear of both edges. */
.duel-vs { position: relative; display: grid; place-items: center; height: 26px; }
.duel-vs::before { content: ""; position: absolute; top: 0; bottom: 0; width: 2px; background: color-mix(in srgb, var(--accent) 35%, transparent); }
/* The burst that marks a right answer, the length of the screen. */
.duel-cheer { position: fixed; inset: 0; z-index: 1300; overflow: hidden; pointer-events: none; }
.duel-cheer i { position: absolute; top: 0; border-radius: 2px; animation-name: duel-cheer; animation-timing-function: cubic-bezier(.25,.55,.4,1); animation-fill-mode: both; }
/* Asked for less motion: the pieces stay where they are and fade rather
   than falling the length of the screen. Hiding it outright meant a reader
   with that setting on never saw a right answer acknowledged at all. */
@media (prefers-reduced-motion: reduce) {
  .duel-cheer i { top: 42%; animation-name: duel-cheer-still; animation-duration: 1500ms !important; }
}
.duel-vs span { position: relative; display: grid; place-items: center; width: 24px; height: 24px; border: 2px solid var(--accent); border-radius: 50%; background: var(--card); box-shadow: 0 0 0 3px var(--bg); color: var(--accent); font-size: 10px; font-weight: 850; }

/* Once the round is judged: keep the car, or go and see it. They lie over
   the bottom of the photograph rather than under it, because the round is a
   column and anything added to a card is taken out of its picture. */
.duel-links { position: absolute; left: 8px; right: 8px; bottom: 7px; display: flex; gap: 5px; }
/* A scrim under them, so a small pill reads on a white car too. */
.duel-links::before { content: ""; position: absolute; inset: -34px -8px -7px; border-radius: 0 0 16px 16px; background: linear-gradient(to top, rgba(10,34,20,.62), rgba(10,34,20,.16) 55%, rgba(10,34,20,0)); pointer-events: none; }
/* Half the height it would have as an ordinary button. The rule that makes
   every control 44 pixels tall is answered below, by the hit area rather
   than by the pill: shrinking the one that is seen must not shrink the one
   that is touched. */
.duel-link { position: relative; flex: 1 1 0; min-height: 0; display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 3px 6px; border: 1px solid rgba(255,255,255,.5); border-radius: 999px; background: linear-gradient(180deg, color-mix(in srgb, var(--card) 96%, transparent), color-mix(in srgb, var(--card) 78%, transparent)); color: var(--ink); font-size: 10px; font-weight: 700; line-height: 1.4; cursor: pointer; backdrop-filter: blur(8px); box-shadow: 0 3px 10px rgba(0,0,0,.2); }
/* The tap reaches past the pill, so a small control is still a comfortable
   target. Kept narrower than the gap between the two, so neither steals the
   other's taps. */
.duel-link::after { content: ""; position: absolute; inset: -11px -2px; }
.duel-link i { font-style: normal; }
.duel-link svg { width: 11px; height: 11px; }
.duel-link.is-save.is-saved { border-color: rgba(226,87,76,.55); color: #c23b30; background: linear-gradient(180deg, color-mix(in srgb, #fff 92%, #e2574c), color-mix(in srgb, #fff 80%, #e2574c)); }
.duel-link.is-save.is-saved svg { fill: currentColor; }
.duel-link.is-open { border-color: color-mix(in srgb, var(--accent) 70%, #0b3a22); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 88%, #fff), var(--accent) 52%, color-mix(in srgb, var(--accent) 62%, #0b3a22)); color: var(--accent-ink); }
.duel-link:active { transform: scale(.985); }
/* The round stops here until the player asks for the next pair. */
.duel-verdict { display: flex; align-items: center; gap: 10px; margin: 0; }
.duel-verdict-word { flex: none; padding: 7px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 800; }
.duel-verdict-word.is-right { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.duel-verdict-word.is-wrong { background: color-mix(in srgb, #e2574c 14%, transparent); color: #c23b30; }
.duel-next { flex: 1 1 auto; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 10px; border: 0; border-radius: 13px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 88%, #fff), var(--accent) 55%, color-mix(in srgb, var(--accent) 66%, #0b3a22)); color: var(--accent-ink); font-size: 14px; font-weight: 800; cursor: pointer; box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 30%, transparent); }
.duel-next i { font-style: normal; }
.duel-next:active { transform: scale(.985); }
/* The photographs share what the column leaves them, so this strip is the
   price they pay for it. Its height is the taller of the two things it can
   hold - the two answer buttons with their line of hint, or the verdict -
   and it keeps that height in both: a card that changed size when a round
   was judged would move the crop under the reader. */
.duel-tail { display: flex; flex-direction: column; justify-content: center; min-height: 66px; }
.duel-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.duel-action { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 11px 8px; border: 0; border-radius: 14px; background: var(--accent); color: var(--accent-ink); font-size: 14px; font-weight: 750; cursor: pointer; }
.duel-action i { display: grid; place-items: center; width: 20px; height: 20px; border: 2px solid color-mix(in srgb, var(--accent-ink) 55%, transparent); border-radius: 50%; font-style: normal; font-size: 12px; }
.duel-action:active { transform: scale(.985); }
/* The button that was pressed, held down while the server is asked: the
   answer has to look taken before the round trip, not after it. */
.duel-action.is-picked { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px color-mix(in srgb, var(--accent) 55%, transparent); }
.duel-action[disabled] { opacity: .75; cursor: default; }
.duel-hint { margin: 6px 0 0; color: var(--muted); font-size: 11px; text-align: center; }

.duel-over { display: grid; gap: 12px; justify-items: center; padding: 22px 16px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); text-align: center; }

/* The way in. It was a white card with a sentence and a system button on it,
   which is what the owner called boring - and the button was grey because
   `primary-button` is a class the stylesheet never defined.
   The art is drawn rather than photographed. The promo photograph the app
   ships is 240x160, and a band across a phone wants about a thousand device
   pixels: stretched four times it looked exactly as poor as it was. A drawing
   is sharp at any density, weighs nothing, and raises no question about whose
   marks are on the screen. */
.duel-intro { position: relative; overflow: hidden; display: grid; gap: 12px; justify-items: center; padding: 0 16px 22px; border: 1px solid var(--line); border-radius: 18px; text-align: center;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 20%, var(--card)) 0%, var(--card) 64%); }
.duel-intro-art { justify-self: stretch; width: calc(100% + 32px); margin: 0 -16px 4px; height: 132px; display: block; color: var(--accent); }
.duel-intro p { margin: 0; }
[data-theme="dark"] .duel-intro-art { opacity: .85; }

/* Three buttons in this game carry `primary-button`, and nothing styled it,
   so the call to action of the whole screen was a grey system button. They
   all carry `duel-again` as well, which is inside the game's own block and
   cannot leak into another screen. */
.duel-again { min-width: 200px; padding: 13px 22px; border: 0; border-radius: 14px; background: var(--accent); color: var(--accent-ink); font-size: 15px; font-weight: 800; letter-spacing: .01em; cursor: pointer; box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 30%, transparent); }
.duel-again:active { transform: scale(.985); }
.duel-over-label, .duel-over-best { margin: 0; color: var(--muted); font-size: 14px; }
.duel-over-score { font-size: 46px; font-weight: 850; line-height: 1; color: var(--ink); }
.duel-board { display: grid; gap: 8px; margin: 0 0 12px; }
.duel-board-table { padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.duel-board-table h3 { margin: 0 0 6px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.duel-board-table ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 3px; }
.duel-board-table li { display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 8px; font-size: 11px; color: var(--ink); }
.duel-board-table li.is-you { font-weight: 700; }
.duel-place { color: var(--muted); font-size: 10px; }
/* Twenty names fit in the hall of fame and most players are not among them.
   This line is what the table cannot say: where they actually stand. It sits
   under the list, separated, and appears only when they are not on it. */
.duel-board-table .duel-place-mine { display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 8px; margin: 6px 0 0; padding: 6px 0 0; border-top: 1px dashed var(--line); font-size: 11px; font-weight: 700; color: var(--ink); }
.duel-board-table .duel-place-mine .duel-place { font-weight: 700; color: var(--ink); }
.duel-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.duel-empty { margin: 0; color: var(--muted); font-size: 10px; }
.duel-error { margin: 4px 0 12px; color: var(--muted); font-size: 13px; }

@media (max-height: 720px) {
  .duel-photo { height: clamp(112px, 22vh, 168px); }
}
@media (max-width: 380px) {
  .duel-head h1 { font-size: 21px; }
  .duel-names b { font-size: 15px; }
  .duel-chip { padding: 7px 10px; font-size: 15px; }
  .duel-action { padding: 12px 8px; font-size: 14px; }
}

.home-game-button { display: flex; align-items: center; gap: 10px; width: 100%; margin: 0 0 10px; padding: 11px 14px; border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line)); border-radius: 16px; background: color-mix(in srgb, var(--accent) 7%, var(--card)); color: var(--ink); text-align: left; cursor: pointer; }
.home-game-button:active { transform: scale(.995); }
.home-game-icon { font-size: 18px; line-height: 1; }
.home-game-copy { display: flex; align-items: center; min-width: 0; flex: 1; }
.home-game-copy strong { font-size: 14px; font-weight: 600; }
/* «Лови находку» is new behind this button; English like the button itself. */
.home-game-badge { flex: none; margin-left: 8px; padding: 2px 7px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 14%, var(--card)); color: var(--accent); font-size: 10px; font-weight: 700; line-height: 1.4; letter-spacing: .02em; white-space: nowrap; }
.home-game-copy small { color: var(--muted); font-size: 12px; line-height: 1.3; }
.home-game-chevron { color: var(--accent); font-size: 18px; }
/* The game chooser: a card per game, its picture above its name. */
.games-screen { display: grid; gap: 12px; }
.game-choice { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 10px; width: 100%; padding: 0 0 12px; border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line)); border-radius: 18px; background: var(--card); color: var(--ink); text-align: left; cursor: pointer; overflow: hidden; }
.game-choice:active { transform: scale(.995); }
.game-choice-art { grid-column: 1 / -1; display: block; width: 100%; aspect-ratio: 7 / 3; object-fit: cover; margin: 0 0 10px; background: color-mix(in srgb, var(--accent) 12%, var(--card)); }
.game-choice-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-left: 14px; }
.game-choice-copy strong { font-size: 15px; font-weight: 650; }
.game-choice-copy small { color: var(--muted); font-size: 12px; line-height: 1.3; }
.game-choice-chevron { padding-right: 14px; color: var(--accent); font-size: 20px; }
.duel-error { margin: 4px 0 12px; color: var(--muted); font-size: 13px; }