/* Аренда в Барселоне — UI styles.
   Look: shadcn/ui create preset beEl4DNg — style Luma, base Zinc, theme Sky, Inter, Lucide icons
   (plain-CSS port: no Tailwind, no inline styles — strict CSP). Class names are the project's own. */

/* ---------- Inter Variable, self-hosted (CSP font-src 'self') ----------
   @fontsource-variable/inter 5.3.0, OFL-1.1 (static/web/fonts/OFL.txt). Latin covers Catalan
   and Spanish (à ç l·l ñ), € and typographic punctuation; Cyrillic covers the Russian UI. */
@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("fonts/inter-cyrillic-wght-normal.de93fdc85e3d.woff2") format("woff2-variations"), url("fonts/inter-cyrillic-wght-normal.de93fdc85e3d.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("fonts/inter-latin-wght-normal.260c81a4759b.woff2") format("woff2-variations"), url("fonts/inter-latin-wght-normal.260c81a4759b.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- tokens ---------- */
:root {
  color-scheme: light;
  /* shadcn theme: zinc + sky */
  --radius: 0.625rem;
  --background: oklch(1 0 0);
  --foreground: oklch(0.141 0.005 285.823);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.141 0.005 285.823);
  --primary: oklch(0.5 0.134 242.749);             /* sky-700 */
  --primary-foreground: oklch(0.977 0.013 236.62);
  --secondary: oklch(0.967 0.001 286.375);
  --secondary-foreground: oklch(0.21 0.006 285.885);
  --muted: oklch(0.967 0.001 286.375);
  --muted-foreground: oklch(0.53 0.016 285.938);   /* zinc-500 darkened a notch: AA (4.5:1) on the gray canvas */
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.92 0.004 286.32);
  --input: oklch(0.92 0.004 286.32);
  --ring: oklch(0.705 0.015 286.067);              /* gray focus ring, as in the preset */
  /* statuses (not in the preset: Tailwind emerald / amber, used only for dots and icons) */
  --success: oklch(0.596 0.145 163.225);
  /* filled «Новое» badge (owner decision 23.09.2026: green, not sky); emerald-700 on emerald-50 = 5.5:1 */
  --success-fill: oklch(0.508 0.118 165.612);
  --success-fill-foreground: oklch(0.979 0.021 166.113);
  --warning: oklch(0.666 0.179 58.318);
  --link: var(--primary);
  --focus-outline: var(--link);                    /* focus is sky, not the preset's gray ring: 3:1 on every surface */
  --control-border: oklch(0.62 0.015 286.067);     /* checkbox / radio edge, 3:1 on card and canvas */
  --destructive-text: oklch(0.505 0.213 27.518);   /* red-700 on the soft red fill: 4.5:1 */
  --destructive-text-hover: oklch(0.444 0.177 26.899);

  --radius-sm: calc(var(--radius) * 0.6);
  --radius-md: calc(var(--radius) * 0.8);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) * 1.4);
  --radius-2xl: calc(var(--radius) * 1.8);
  --radius-3xl: calc(var(--radius) * 2.2);
  --radius-4xl: calc(var(--radius) * 2.6);

  --font-sans: "Inter Variable", Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --duration: 150ms;

  /* page canvas: gray page behind white cards (create preview) */
  --canvas: var(--muted);
  --header-bg: var(--card);
  /* Luma state tokens (light values; dark ones in dark.css) */
  --surface-ring: color-mix(in oklab, var(--foreground) 5%, transparent);
  --invalid-ring: color-mix(in oklab, var(--destructive) 20%, transparent);
  --invalid-border: var(--destructive);
  --control-bg: color-mix(in oklab, var(--input) 50%, transparent);
  --control-bg-strong: color-mix(in oklab, var(--input) 90%, transparent);
  --outline-bg: var(--background);
  --outline-bg-hover: var(--muted);
  --ghost-bg-hover: var(--muted);
  --destructive-soft: color-mix(in oklab, var(--destructive) 10%, transparent);
  --destructive-soft-hover: color-mix(in oklab, var(--destructive) 20%, transparent);
  --secondary-hover: color-mix(in oklch, var(--secondary), var(--foreground) 5%);
  --pressed-bg: color-mix(in oklab, var(--primary) 10%, transparent);
  /* muted fills vanish on the gray canvas: segmented controls on the page use a deeper gray */
  --tabs-bg: color-mix(in oklab, var(--foreground) 6%, var(--canvas));
  --tabs-active-bg: var(--card);
  --tab-fg: color-mix(in oklab, var(--foreground) 60%, transparent);
  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6b75' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --glyph-chevron-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
  --glyph-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  /* elements that exist for one theme only (the switcher's sun / moon) */
  --show-on-light: block;
  --show-on-dark: none;
}

/* dark theme: static/web/dark.css overrides these tokens; base.html switches it on by its media attribute */

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; border-color: var(--border); }
[hidden]:where(:not([hidden="until-found"])) { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }   /* sticky header must not cover scroll targets */
body {
  margin: 0;
  background: var(--canvas);
  color: var(--foreground);
  font: 400 0.875rem/1.25rem var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
}
button, input, select, textarea { font: inherit; letter-spacing: inherit; color: inherit; }
svg { display: block; max-width: 100%; }
a { color: var(--link); text-decoration: none; text-underline-offset: 4px; }
@media (hover: hover) { a:hover { text-decoration: underline; } }
/* links inside running text are underlined, not told apart by colour alone */
:where(p, dd, .helptext, .hint, .demo-strip, .feed-head-meta) > a:not(.btn) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
@media (hover: hover) { :where(p, dd, .helptext, .hint, .demo-strip, .feed-head-meta) > a:not(.btn):hover { text-decoration-thickness: 2px; } }
h1, h2, h3 { margin: 0 0 .5rem; font-weight: 500; }
h1 { font-size: 1.5rem; line-height: 2rem; letter-spacing: -0.015em; }
h2 { font-size: 1.125rem; line-height: 1.75rem; letter-spacing: -0.01em; }
h3 { font-size: 1rem; line-height: 1.5rem; }
p { margin: 0 0 .75rem; }
strong, b { font-weight: 600; }
code, pre { font-family: var(--font-mono); font-size: .8125rem; }
code { padding: .125rem .375rem; border-radius: var(--radius-sm); background: var(--muted); }
pre { margin: 0; padding: 1rem; overflow: auto; max-height: 460px; border-radius: var(--radius-2xl); background: var(--muted); line-height: 1.5; }
:focus-visible { outline: 2px solid var(--focus-outline); outline-offset: 2px; }
:where(:focus-visible) { border-radius: var(--radius-sm); }
::placeholder { opacity: 1; color: var(--muted-foreground); }

.container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 16px; }
.muted { color: var(--muted-foreground); }
.faint { color: var(--muted-foreground); }
.small { font-size: .8125rem; line-height: 1.125rem; }
.nowrap { white-space: nowrap; }
.num, .tabular { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: -9999px; top: 8px; z-index: 100; padding: 8px 14px; border-radius: 999px; background: var(--card); box-shadow: var(--shadow-md); }
.skip-link:focus { left: 8px; }
.stack > * + * { margin-top: 12px; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.row-nowrap { flex-wrap: nowrap; }   /* buttons side by side in a scrolling table cell */
.icon { width: 1rem; height: 1rem; flex: none; }
.icon-sm { width: .875rem; height: .875rem; }
.icon-lg { width: 1.25rem; height: 1.25rem; }
a:not(.btn) > .icon { display: inline-block; vertical-align: -0.15em; margin-left: 3px; }
.crumbs a:not(.btn) > .icon, li > .icon, .pager a > .icon { margin-left: 0; }

/* ---------- surfaces (Luma card: 26px radius, hairline ring + shadow-md, no border) ---------- */
.panel, .card, .auth-card, .search-item, .kpi, .ops-nav, .empty, .error-box, .filters, .tg-phone {
  background: var(--card);
  color: var(--card-foreground);
  border-radius: var(--radius-4xl);
  box-shadow: 0 0 0 1px var(--surface-ring), var(--shadow-md);
}
.panel { padding: 24px; }
.panel + .panel, .panel + section, section + .panel { margin-top: 16px; }
.panel > h2, .panel > h3:first-child, .search-top h2 { font-size: 1rem; line-height: 1.5rem; font-weight: 500; letter-spacing: 0; margin: 0 0 16px; }
.panel h3 { font-size: .875rem; line-height: 1.25rem; font-weight: 500; margin: 20px 0 8px; }
.panel.table-wrap { padding: 8px 12px; }

/* ---------- header / footer ---------- */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in oklab, var(--header-bg) 88%, transparent);
  backdrop-filter: saturate(1.6) blur(12px);
  -webkit-backdrop-filter: saturate(1.6) blur(12px);
  box-shadow: 0 1px 0 var(--border);
}
.header-inner { display: flex; align-items: center; gap: 12px 16px; min-height: 64px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--foreground); margin-right: auto; min-width: 0; }
.brand:hover { text-decoration: none; }
.brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: none; border-radius: var(--radius-lg); background: var(--primary); color: var(--primary-foreground); }
.brand-mark .brand-glyph { width: 100%; height: 100%; } /* the glyph is the whole tile; the flower keeps its margin */
.brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.brand-text strong { font-size: .9375rem; font-weight: 600; letter-spacing: -0.01em; }
.brand-text small { color: var(--muted-foreground); font-size: .75rem; }
.main-nav { display: flex; align-items: center; gap: 2px; }
.main-nav a:not(.btn) {
  display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 999px;
  color: var(--muted-foreground); font-weight: 500; white-space: nowrap; transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease);
}
@media (hover: hover) { .main-nav a:not(.btn):hover { background: var(--muted); color: var(--foreground); text-decoration: none; } }
.main-nav a[aria-current="page"] { background: var(--muted); color: var(--foreground); font-weight: 600; }
.header-actions { display: flex; align-items: center; gap: 8px; margin-left: 4px; }
/* theme toggle: a moon on light pages, a sun on dark ones — the icon shows where a click leads.
   Needs JS, so hidden without it (.js-only). */
.show-on-light { display: var(--show-on-light); }
.show-on-dark { display: var(--show-on-dark); }
.theme-toggle {
  align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; padding: 0;
  border: 0; border-radius: 999px; background: transparent; color: var(--muted-foreground); cursor: pointer;
  transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease), translate var(--duration) var(--ease);
}
.theme-toggle > .icon { width: 18px; height: 18px; }   /* no label beside it: a notch larger than button icons, as in shadcn's header */
@media (hover: hover) { .theme-toggle:hover { background: var(--muted); color: var(--foreground); } }
.theme-toggle:active { translate: 0 1px; }
/* while the theme switches, colours change at once instead of each element fading at its own pace */
.theme-switching *, .theme-switching *::before, .theme-switching *::after { transition: none !important; }
.demo-strip { color: var(--muted-foreground); font-size: .75rem; line-height: 1rem; text-align: center; padding: 8px 16px 0; }
.demo-strip::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--warning); vertical-align: 1px; }
.demo-strip a { font-weight: 500; }
.main { padding-top: 28px; padding-bottom: 56px; min-height: 60vh; }
.site-footer { border-top: 1px solid var(--border); color: var(--muted-foreground); font-size: .8125rem; line-height: 1.25rem; }
.footer-inner { padding-top: 20px; padding-bottom: 24px; }
.footer-inner p { margin: 0 0 4px; }

/* ---------- buttons (Luma: 36px pills, weight 500) ---------- */
.btn {
  --btn-bg-hover: var(--outline-bg-hover);
  --btn-fg-hover: var(--foreground);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex-shrink: 0;
  min-height: 36px; max-width: 100%; padding: 7px 14px; text-align: center;
  border: 1px solid var(--border); border-radius: 999px; background: var(--outline-bg); background-clip: padding-box; color: var(--foreground);
  font: inherit; font-weight: 500; line-height: 1.25rem; text-decoration: none; cursor: pointer; user-select: none;
  transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease), border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease), translate var(--duration) var(--ease);
}
@media (hover: hover) { .btn:hover { background-color: var(--btn-bg-hover); color: var(--btn-fg-hover); text-decoration: none; } }
.btn:focus-visible { outline: 2px solid var(--focus-outline); outline-offset: 2px; }
.btn:active { translate: 0 1px; }
.btn:has(> .icon:first-child:not([data-icon="inline-end"])) { padding-left: 11px; }
.btn:has(> [data-icon="inline-end"]) { padding-right: 11px; }
.btn-primary { --btn-bg-hover: color-mix(in oklab, var(--primary) 85%, transparent); --btn-fg-hover: var(--primary-foreground); border-color: transparent; background: var(--primary); color: var(--primary-foreground); }
.btn-ghost { --btn-bg-hover: var(--ghost-bg-hover); border-color: transparent; background: transparent; color: var(--foreground); }
/* ghost buttons sitting on the gray canvas: the --muted hover would equal the page colour */
.page-head .btn-ghost, .detail-head .btn-ghost { --btn-bg-hover: var(--tabs-bg); }
.btn-danger { --btn-bg-hover: var(--destructive-soft-hover); --btn-fg-hover: var(--destructive-text-hover); border-color: transparent; background: var(--destructive-soft); color: var(--destructive-text); }
.btn-sm { min-height: 32px; padding: 5px 12px; gap: 4px; }
.btn-sm:has(> .icon:first-child:not([data-icon="inline-end"])) { padding-left: 9px; }
.btn-sm:has(> [data-icon="inline-end"]) { padding-right: 9px; }
.inline-form > .btn-sm { min-height: 36px; padding: 7px 14px; gap: 6px; }   /* same height as the fields beside it */
.table .btn { white-space: nowrap; }
.btn-block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }

/* ---------- forms (Luma: filled, borderless pills) ---------- */
label { font-weight: 500; }
input[type="text"], input[type="email"], input[type="number"], input[type="search"], input[type="time"], input[type="url"], select, textarea {
  display: block; width: 100%; min-width: 0; height: 36px; padding: 4px 12px;
  border: 1px solid transparent; border-radius: 999px; background-color: var(--control-bg); color: inherit;
  font-size: 1rem; line-height: 1.5rem; outline: none;
  transition: color var(--duration) var(--ease), box-shadow var(--duration) var(--ease), background-color var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
textarea { height: auto; min-height: 4rem; padding: 12px; border-radius: var(--radius-2xl); }
select { appearance: none; -webkit-appearance: none; padding-right: 32px; font-size: .875rem; line-height: 1.25rem; background-image: var(--select-chevron); background-repeat: no-repeat; background-position: right 10px center; background-size: 16px 16px; }
select option, select optgroup { background-color: Canvas; color: CanvasText; }
input[type="number"] { -moz-appearance: textfield; font-variant-numeric: tabular-nums; }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--focus-outline); outline-offset: 2px; }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--invalid-border); box-shadow: 0 0 0 3px var(--invalid-ring); }
input:disabled, select:disabled, textarea:disabled { opacity: .5; cursor: not-allowed; }
@media (min-width: 768px) {
  input[type="text"], input[type="email"], input[type="number"], input[type="search"], input[type="time"], input[type="url"], textarea { font-size: .875rem; line-height: 1.25rem; }
}
input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; flex: none; margin: 0; border: 1px solid var(--control-border); border-radius: 5px;
  background: var(--control-bg-strong); color: var(--primary-foreground); cursor: pointer; transition: box-shadow var(--duration) var(--ease);
}
input[type="checkbox"]::before { content: ""; display: none; width: 12px; height: 12px; background: currentColor; -webkit-mask: var(--glyph-check) center / contain no-repeat; mask: var(--glyph-check) center / contain no-repeat; }
input[type="checkbox"]:checked { border-color: var(--primary); background: var(--primary); }
input[type="checkbox"]:checked::before { display: block; }
input[type="radio"] {
  appearance: none; -webkit-appearance: none; display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; flex: none; margin: 0; border: 1px solid var(--control-border); border-radius: 999px; background: var(--control-bg-strong); cursor: pointer;
}
input[type="radio"]::before { content: ""; display: none; width: 8px; height: 8px; border-radius: 999px; background: var(--primary-foreground); }
input[type="radio"]:checked { border-color: var(--primary); background: var(--primary); }
input[type="radio"]:checked::before { display: block; }
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { outline: 2px solid var(--focus-outline); outline-offset: 2px; }
.field { display: grid; gap: 8px; margin-bottom: 20px; }
.field > label, .field > .label, .field > legend { font-size: .875rem; line-height: 1; font-weight: 500; }
fieldset.field { border: 0; padding: 0; margin-inline: 0; min-width: 0; }
fieldset.field > legend { padding: 0; margin-bottom: 8px; }
.field .helptext, .hint { display: block; color: var(--muted-foreground); font-size: .8125rem; line-height: 1.125rem; font-weight: 400; }
.errorlist { list-style: none; padding: 0; margin: 0; color: var(--destructive); font-size: .8125rem; }
.check { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-weight: 400; cursor: pointer; }
.check-sm { padding: 3px 0; font-size: .8125rem; }
.radio-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.radio-list label {
  display: flex; gap: 10px; align-items: center; padding: 12px 14px; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--radius-2xl); background: var(--card); font-weight: 500;
  transition: border-color var(--duration) var(--ease), background-color var(--duration) var(--ease);
}
.radio-list label:has(input:checked) { border-color: var(--link); background: var(--pressed-bg); }
.input-icon { position: relative; }
.input-icon > .icon { position: absolute; left: 12px; top: 50%; translate: 0 -50%; color: var(--muted-foreground); pointer-events: none; }
.input-icon > input { padding-left: 34px; }

/* ---------- alerts: messages & banners (Luma alert: card box, hairline border, 18px radius) ---------- */
.messages { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 8px; }
.msg, .banner {
  overflow-wrap: anywhere;
  display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; margin: 0;
  border: 1px solid var(--border); border-radius: var(--radius-2xl); background: var(--card); color: var(--card-foreground);
}
.banner { margin-bottom: 20px; }
.panel .banner, .stack .banner { margin-bottom: 0; }
.msg::before { content: ""; width: 8px; height: 8px; margin-top: 6px; flex: none; border-radius: 50%; background: var(--link); }
.msg-success::before { background: var(--success); }
.msg-warning::before { background: var(--warning); }
.msg-error { color: var(--destructive); }
.msg-error::before { background: var(--destructive); }
.banner > .icon { margin-top: 2px; color: var(--muted-foreground); }
.banner p { margin: 0; color: var(--muted-foreground); }
.banner p strong { color: var(--foreground); font-weight: 500; }
.banner-warn > .icon { color: var(--warning); }
.banner-info > .icon { color: var(--link); }
.banner-ok > .icon { color: var(--success); }
.banner-bad > .icon, .banner-bad p, .banner-bad p strong { color: var(--destructive); }
.banner-bad p { color: color-mix(in oklab, var(--destructive) 90%, transparent); }

/* ---------- badges (Luma: 20px pills, weight 500; statuses as dot badges like «● Pending Setup») ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 8px; width: fit-content;
  border: 1px solid transparent; border-radius: 999px; background: var(--secondary); color: var(--secondary-foreground);
  font-size: .75rem; line-height: 1rem; font-weight: 500; white-space: nowrap; flex-shrink: 0;
}
.badge-new { background: var(--success-fill); color: var(--success-fill-foreground); }
.badge-ok::before, .badge-warn::before, .badge-bad::before, .badge-info::before { content: ""; width: 6px; height: 6px; border-radius: 50%; flex: none; }
.badge-ok::before { background: var(--success); }
.badge-warn::before { background: var(--warning); }
.badge-bad::before { background: var(--destructive); }
.badge-info::before { background: var(--link); }
.count-pill {
  display: inline-flex; min-width: 20px; height: 20px; padding: 0 6px; align-items: center; justify-content: center;
  border-radius: 999px; background: var(--primary); color: var(--primary-foreground); font-size: .75rem; font-weight: 500; font-variant-numeric: tabular-nums;
}
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted-foreground); flex: none; }
.dot-ok { background: var(--success); }
.dot-warn { background: var(--warning); }
.dot-bad { background: var(--destructive); }

/* ---------- feed ---------- */
.feed-head { display: flex; gap: 12px 24px; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; margin-bottom: 24px; }
.feed-head h1 { margin-bottom: 6px; font-size: 1.875rem; line-height: 2.25rem; letter-spacing: -0.02em; }
.lead { color: var(--muted-foreground); font-size: .9375rem; line-height: 1.5rem; max-width: 720px; margin: 0; }
.feed-head-meta { display: flex; gap: 6px 16px; color: var(--muted-foreground); flex-wrap: wrap; }
.feed-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 24px; align-items: start; }
.filters-col { position: sticky; top: 88px; }
.filters { padding: 8px 20px 20px; }
.filters-summary {
  list-style: none; display: flex; align-items: center; gap: 8px; padding: 12px 0;
  font-size: 1rem; line-height: 1.5rem; font-weight: 500; cursor: pointer;
}
.filters-summary::-webkit-details-marker { display: none; }
.filters-summary .chevron { margin-left: auto; color: var(--muted-foreground); transition: rotate 200ms var(--ease); }
details[open] > .filters-summary .chevron { rotate: 180deg; }
.fgroup { border: 0; padding: 16px 0; margin: 0; border-top: 1px solid var(--border); min-width: 0; }
.fgroup legend { float: left; width: 100%; padding: 0; margin-bottom: 10px; font-size: .8125rem; font-weight: 500; color: var(--muted-foreground); }
.fgroup legend + * { clear: both; }
.filters > .fgroup:first-child { border-top: 0; }
.geo-search { margin-bottom: 8px; }
.geo-city { padding: 1px 0; }
.geo-sub { margin: 0 0 4px 24px; }
.geo-sub > summary, .geo-more > summary { list-style: none; display: flex; align-items: center; gap: 4px; width: fit-content; padding: 2px 0; cursor: pointer; color: var(--link); font-size: .8125rem; font-weight: 500; }
.geo-sub > summary::-webkit-details-marker, .geo-more > summary::-webkit-details-marker { display: none; }
.geo-sub > summary::before, .geo-more > summary::before { content: ""; flex: none; width: 14px; height: 14px; background: currentColor; -webkit-mask: var(--glyph-chevron-right) center / contain no-repeat; mask: var(--glyph-chevron-right) center / contain no-repeat; transition: rotate 200ms var(--ease); }
.geo-sub[open] > summary::before, .geo-more[open] > summary::before { rotate: 90deg; }
/* «Другие города»: the towns after the main list, a level up from «Округа и районы» */
.geo-more > summary { gap: 8px; padding: 6px 0 4px; font-size: .875rem; }
.geo-more > summary::before { width: 16px; height: 16px; }
.geo-district { margin-top: 2px; }
.geo-hoods { margin-left: 24px; }
.faint.small { font-weight: 400; }
.is-hidden { display: none !important; }
.price-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; color: var(--muted-foreground); }
.toggles { display: flex; flex-wrap: wrap; gap: 6px; }
.toggle { position: relative; font-weight: 500; }
.toggle input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.toggle span {
  display: inline-flex; align-items: center; justify-content: center; height: 32px; min-width: 36px; padding: 0 12px;
  border: 1px solid var(--input); border-radius: 999px; background: transparent; color: var(--foreground); cursor: pointer;
  transition: background-color var(--duration) var(--ease), border-color var(--duration) var(--ease), color var(--duration) var(--ease);
}
@media (hover: hover) { .toggle:hover span { background: var(--muted); } }
.toggle input:focus-visible + span { outline: 2px solid var(--focus-outline); outline-offset: 2px; }
.toggle input:checked + span { background: var(--pressed-bg); border-color: var(--link); color: var(--link); }
@media (forced-colors: active) { .toggle input:checked + span { forced-color-adjust: none; background: Highlight; border-color: Highlight; color: HighlightText; } }
.filters-actions { display: grid; gap: 8px; padding-top: 16px; border-top: 1px solid var(--border); }   /* full-width buttons, one per row */
.js .filters-apply { display: none; }
.js .filters-actions .btn-ghost { border-color: var(--border); }
.filters:has(> details:not([open])) { padding-bottom: 8px; }

.results-col { min-width: 0; position: relative; }
.results-bar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.results-count { margin: 0; font-size: .9375rem; }
.results-count strong { font-weight: 600; font-variant-numeric: tabular-nums; }
.results-count small { color: var(--muted-foreground); font-size: .8125rem; margin-left: 6px; }
.results-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-left: auto; min-width: 0; max-width: 100%; }
.sort { display: flex; gap: 2px; height: 36px; padding: 4px; border-radius: 999px; background: var(--tabs-bg); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.sort::-webkit-scrollbar { display: none; }
.sort a {
  display: inline-flex; align-items: center; flex: none; padding: 0 12px; border-radius: 999px;
  color: var(--tab-fg); font-weight: 500; white-space: nowrap; transition: color var(--duration) var(--ease), background-color var(--duration) var(--ease);
}
@media (hover: hover) { .sort a:hover { color: var(--foreground); text-decoration: none; } }
.sort a[aria-current="true"] { background: var(--tabs-active-bg); color: var(--foreground); font-weight: 600; }   /* weight: a non-colour cue for the selected segment */
.active-chips { list-style: none; display: flex; gap: 6px; flex-wrap: wrap; padding: 0; margin: 0 0 16px; }
.chip { display: inline-flex; align-items: center; min-height: 26px; max-width: 100%; padding: 4px 10px; border: 1px solid var(--border); border-radius: 13px; font-size: .75rem; line-height: 1rem; font-weight: 500; overflow-wrap: anywhere; color: var(--foreground); background: color-mix(in oklab, var(--card) 60%, transparent); }
.chips-row { display: flex; align-items: flex-start; gap: 6px; margin: 0 0 16px; }
.chips-row .active-chips { flex: 0 1 auto; min-width: 0; margin: 0; }
a.chips-reset { flex: none; display: inline-flex; align-items: center; gap: 4px; min-height: 26px; padding: 4px 8px; border-radius: 13px; color: var(--muted-foreground); font-size: .75rem; line-height: 1rem; font-weight: 500; white-space: nowrap; }
a.chips-reset > .icon { width: 12px; height: 12px; margin: 0; }
@media (hover: hover) { a.chips-reset:hover { background: var(--tabs-bg); color: var(--foreground); text-decoration: none; } }
.loading-bar { position: absolute; top: -12px; left: 0; height: 2px; width: 0; background: var(--primary); border-radius: 2px; opacity: 0; transition: opacity .2s; }
.results-col[aria-busy="true"] .loading-bar { opacity: 1; animation: load 1.2s ease-in-out infinite; }
.results-col[aria-busy="true"] .cards, .results-col[aria-busy="true"] .empty { opacity: .5; transition: opacity .2s; }
@keyframes load { 0% { left: 0; width: 0; } 50% { left: 20%; width: 60%; } 100% { left: 100%; width: 0; } }

/* Minimal text cards: no images (owner's decision) — price first, then what and where. */
.cards { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.card { transition: background-color var(--duration) var(--ease); }
@media (hover: hover) { .card:hover { background: color-mix(in oklab, var(--muted) 50%, var(--card)); } }   /* Luma: hover fills, never changes the shadow */
.card-link { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 20px 22px; border-radius: inherit; color: inherit; }
.card-link:hover { color: inherit; text-decoration: none; }
.card-link:focus-visible { outline: 2px solid var(--focus-outline); outline-offset: 2px; }
.card-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px; margin-bottom: 6px; }
.card-price { margin: 0; white-space: nowrap; font-size: 1.375rem; line-height: 1.75rem; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.card-price span { margin-left: 2px; color: var(--muted-foreground); font-size: .8125rem; font-weight: 400; letter-spacing: 0; }
.card-title { margin: 0; font-size: .875rem; line-height: 1.25rem; font-weight: 500; letter-spacing: 0; }
.card-loc, .card-facts { margin: 0; color: var(--muted-foreground); }
.card-facts { font-size: .8125rem; }
.card-meta { margin: auto 0 0; padding-top: 14px; color: var(--muted-foreground); font-size: .75rem; line-height: 1rem; }
.card-meta > span { white-space: nowrap; }   /* «добавлено 13 сентября ·» and «2 источника» wrap as wholes */
.card-stale .card-price { color: var(--muted-foreground); }

/* feed view: one card per row, a grid (default) or a list; same card markup, laid out by the list's class */
.view-switch { flex: none; gap: 2px; height: 36px; padding: 4px; border-radius: 999px; background: var(--tabs-bg); }   /* display comes from .js-only */
.view-switch button {
  display: inline-flex; align-items: center; justify-content: center; width: 32px; padding: 0;
  border: 0; border-radius: 999px; background: transparent; color: var(--tab-fg); cursor: pointer;
  transition: color var(--duration) var(--ease), background-color var(--duration) var(--ease);
}
@media (hover: hover) { .view-switch button:hover { color: var(--foreground); } }
.view-switch button[aria-pressed="true"] { background: var(--tabs-active-bg); color: var(--foreground); }
.view-switch button:focus-visible { outline-offset: -2px; }

/* A couple of lines of the description live only on the wide «по одному» card (owner decision 23.09.2026) */
.card-desc { display: none; }
.cards-one { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 641px) {   /* on a phone a card fills the row anyway */
  .cards-one .card-link {
    display: grid; grid-template-columns: 11rem minmax(0, 1fr); grid-template-areas: "top title" "top loc" "top facts" "top desc" "top meta";
    align-content: start; gap: 4px 24px; padding: 22px 26px;
  }
  .cards-one .card-top { grid-area: top; flex-direction: column; align-items: flex-start; margin: 0; }
  .cards-one .card-title { grid-area: title; font-size: 1rem; line-height: 1.5rem; }
  .cards-one .card-loc { grid-area: loc; }
  .cards-one .card-facts { grid-area: facts; }
  .cards-one .card-desc {
    grid-area: desc; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
    margin: 4px 0 0; color: var(--muted-foreground); font-size: .875rem; line-height: 1.25rem; overflow-wrap: anywhere;
  }
  .cards-one .card-meta { grid-area: meta; padding-top: 8px; }
}

.cards-list { container-type: inline-size; display: block; overflow: hidden; background: var(--card); border-radius: var(--radius-4xl); box-shadow: 0 0 0 1px var(--surface-ring), var(--shadow-md); }
.cards-list .card { border-radius: 0; background: transparent; box-shadow: none; }
@media (hover: hover) { .cards-list .card:hover { background: color-mix(in oklab, var(--muted) 50%, var(--card)); } }
.cards-list .card + .card { border-top: 1px solid var(--border); }
.cards-list .card-link { gap: 2px; padding: 12px 20px; }
.cards-list .card-link:focus-visible { outline-offset: -2px; }   /* the panel clips anything outside */
.cards-list .card-top { margin: 0; }
.cards-list .card-price { font-size: 1.0625rem; line-height: 1.5rem; }
.cards-list .card-facts { display: none; }
.cards-list .card-meta { padding-top: 2px; }
/* every row is its own grid: fixed outer columns keep the inner ones aligned from row to row */
@container (min-width: 34rem) {
  .cards-list .card-link {
    display: grid; grid-template-columns: 8.5rem minmax(0, 1fr) 10rem;
    grid-template-areas: "top title meta" "top loc meta" "top facts meta"; align-items: start; gap: 2px 16px;
  }
  .cards-list .card-top { grid-area: top; flex-direction: column; align-items: flex-start; gap: 4px; }
  .cards-list .card-title { grid-area: title; }
  .cards-list .card-loc { grid-area: loc; font-size: .8125rem; }
  .cards-list .card-facts { grid-area: facts; display: block; }
  .cards-list .card-meta { grid-area: meta; margin: 0; padding: 4px 0 0; text-align: right; }   /* level with the price, not pushed down */
}
@container (min-width: 46rem) {   /* room for the facts in a column of their own */
  .cards-list .card-link { grid-template-columns: 8.5rem minmax(0, 1fr) minmax(0, 1fr) 10rem; grid-template-areas: "top title title meta" "top loc facts meta"; }
}

.pager { display: flex; justify-content: center; align-items: center; gap: 4px; margin-top: 28px; flex-wrap: wrap; }
.pager a, .pager span { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 10px; border: 1px solid transparent; border-radius: 999px; color: var(--foreground); font-weight: 500; font-variant-numeric: tabular-nums; }
@media (hover: hover) { .pager a:hover { background: var(--card); text-decoration: none; } }
.pager [aria-current="page"] { border-color: var(--border); background: var(--card); box-shadow: var(--shadow-xs); }
.pager .gap { color: var(--muted-foreground); }
.pager a[rel] { padding: 0; }

.empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 48px 24px; text-align: center; text-wrap: balance; }
.empty-media { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-bottom: 8px; border-radius: var(--radius-xl); background: var(--muted); color: var(--foreground); }
.empty h2, .empty h3 { margin: 0; font-size: 1.125rem; line-height: 1.75rem; letter-spacing: -0.025em; }
.empty p { max-width: 460px; margin: 0; color: var(--muted-foreground); line-height: 1.625; }
.suggestions { list-style: none; padding: 0; margin: 12px 0 4px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.suggestions a { display: inline-flex; gap: 8px; align-items: center; height: 32px; padding: 0 12px; border: 1px solid var(--border); border-radius: 999px; color: var(--foreground); font-weight: 500; }
@media (hover: hover) { .suggestions a:hover { background: var(--muted); text-decoration: none; } }
.suggestions a span { color: var(--link); font-variant-numeric: tabular-nums; }
.empty-actions { justify-content: center; margin-top: 8px; }
.error-box { padding: 32px 24px; text-align: center; }
.error-box h2 { font-size: 1.125rem; color: var(--destructive); }
.error-box p { color: var(--muted-foreground); }

/* ---------- property page ---------- */
.crumbs { display: flex; gap: 6px 8px; flex-wrap: wrap; align-items: center; list-style: none; padding: 0; margin: 0 0 16px; color: var(--muted-foreground); }
.crumbs li { display: inline-flex; align-items: center; gap: 8px; }
.crumbs a { color: inherit; }
@media (hover: hover) { .crumbs a:hover { color: var(--foreground); text-decoration: none; } }
.crumbs [aria-current="page"] { color: var(--foreground); }
.crumbs .icon { color: var(--muted-foreground); }
.detail-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 20px; }
.detail-head h1 { margin-bottom: 4px; }
.detail-head p { margin: 0; }
.detail-head > .badge { border-color: var(--border); background: transparent; color: var(--muted-foreground); }
.detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; grid-template-areas: "main aside"; gap: 24px; align-items: start; }
.detail-main { grid-area: main; min-width: 0; }
.summary-panel { grid-area: aside; position: sticky; top: 88px; display: flex; flex-direction: column; gap: 14px; }
.summary-panel > * { margin: 0; }
.big-price { margin: 0; font-size: 2rem; line-height: 2.5rem; font-weight: 600; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; }
.big-price span { color: var(--muted-foreground); font-size: .9375rem; font-weight: 400; letter-spacing: 0; }
.key-facts { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--muted-foreground); }
.key-facts strong { color: var(--foreground); font-weight: 600; font-variant-numeric: tabular-nums; }
.actions { display: grid; gap: 8px; }
.js-only { display: none; }
.js .js-only { display: inline-flex; }
.status-line { display: flex; gap: 8px; align-items: center; color: var(--muted-foreground); flex-wrap: wrap; padding-top: 14px; border-top: 1px solid var(--border); }
dl.facts { display: grid; grid-template-columns: minmax(140px, 36%) 1fr; margin: 0; }
dl.facts dt, dl.facts dd { padding: 10px 0; border-bottom: 1px solid var(--border); }
dl.facts dt:last-of-type, dl.facts dd:last-of-type { border-bottom: 0; }
dl.facts dt { color: var(--muted-foreground); padding-right: 16px; }
dl.facts dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
dl.facts dd.unknown { color: var(--muted-foreground); font-weight: 400; }
.description { white-space: pre-line; line-height: 1.625; margin-bottom: 12px; overflow-wrap: anywhere; }
.translation-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }
.translation-head .badge { height: auto; min-height: 20px; max-width: 100%; padding-block: 2px; white-space: normal; }   /* the Russian label wraps on a phone instead of widening the page */
.translation-wait { display: flex; align-items: flex-start; gap: 6px; }
.translation-wait .icon { flex: none; margin-top: 2px; animation: spin 1.2s linear infinite; }   /* prefers-reduced-motion stops it below */
@keyframes spin { to { rotate: 360deg; } }
.original { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.original > summary { list-style: none; display: flex; align-items: center; gap: 4px; width: fit-content; padding: 2px 0; cursor: pointer; color: var(--link); font-size: .8125rem; font-weight: 500; }
.original > summary::-webkit-details-marker { display: none; }
.original > summary::before { content: ""; flex: none; width: 14px; height: 14px; background: currentColor; -webkit-mask: var(--glyph-chevron-right) center / contain no-repeat; mask: var(--glyph-chevron-right) center / contain no-repeat; transition: rotate 200ms var(--ease); }
.original[open] > summary { margin-bottom: 10px; }
.original[open] > summary::before { rotate: 90deg; }
.original > *:last-child { margin-bottom: 0; }
/* scrolling boxes are the containing block, so absolutely positioned .sr-only text inside cannot widen the page */
.table-wrap { position: relative; overflow-x: auto; }
.main-nav, .sort, .tabs, .ops-nav, .geo-list { position: relative; }
table.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: 12px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--border); }
.table th { height: 48px; padding-top: 0; padding-bottom: 0; color: var(--foreground); font-weight: 500; white-space: nowrap; }
.table tbody tr:last-child td { border-bottom: 0; }
@media (hover: hover) { .table tbody tr:hover { background: color-mix(in oklab, var(--muted) 50%, transparent); } }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table-compact th, .table-compact td { padding: 8px 10px; }
.table-compact th { height: 36px; padding-top: 0; padding-bottom: 0; }
.toast {
  position: fixed; bottom: 24px; left: 50%; z-index: 50; padding: 8px 16px; border-radius: 999px; pointer-events: none;
  width: max-content; max-width: calc(100vw - 32px); text-align: center;   /* not squeezed into the right half by left: 50% */
  background: var(--foreground); color: var(--background); font-weight: 500; box-shadow: var(--shadow-lg);
  opacity: 0; transform: translateX(-50%) translateY(12px); transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- pages: auth, searches, account ---------- */
.narrow { max-width: 440px; margin: 32px auto; }
.mid { max-width: 820px; margin: 0 auto; }
.auth-card { padding: 28px; }
.auth-card h1 { font-size: 1.375rem; line-height: 1.875rem; }
.auth-card form { margin: 20px 0 16px; }
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px 16px; flex-wrap: wrap; margin-bottom: 24px; }
.page-head h1 { margin: 0 0 4px; }
.page-head p { margin: 0; overflow-wrap: anywhere; }
.page-head > div, .search-top > div { min-width: 0; }
.auth-card p { overflow-wrap: anywhere; }
.search-list { display: grid; gap: 16px; }
.search-item { padding: 22px 24px; }
.search-item.paused .search-top h2 { color: var(--muted-foreground); }   /* the badge carries the state; no opacity on live controls */
.search-top { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.search-top h2 { margin-bottom: 10px; overflow-wrap: anywhere; }
.search-top .active-chips { margin: 0; }
.search-stats { display: flex; gap: 6px 20px; flex-wrap: wrap; color: var(--muted-foreground); margin: 16px 0; padding: 14px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.search-stats strong { color: var(--foreground); font-variant-numeric: tabular-nums; }
.search-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.search-actions form { margin: 0; }
.form-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.tg-box { display: flex; gap: 16px; align-items: flex-start; }
.tg-icon { width: 40px; height: 40px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-xl); background: var(--primary); color: var(--primary-foreground); }
.tg-icon .icon { width: 20px; height: 20px; }
.tg-box .stack { flex: 1; min-width: 0; }
.tg-box .stack p { margin: 0; }

/* Telegram simulator — a phone mock in the site palette */
.tg-phone { max-width: 460px; margin: 0 auto; overflow: hidden; }
.tg-top { display: flex; gap: 10px; align-items: center; padding: 14px 18px; background: var(--primary); color: var(--primary-foreground); }
.tg-top strong { font-weight: 600; }
.tg-top small { display: block; opacity: .9; }
.tg-chat { display: grid; gap: 10px; max-height: 60vh; overflow: auto; padding: 16px 14px; background: var(--muted); }
.tg-msg { overflow-wrap: anywhere; max-width: 92%; padding: 10px 14px; border-radius: 18px 18px 18px 6px; background: var(--card); box-shadow: var(--shadow-xs); white-space: pre-line; }
.tg-msg time { display: block; margin-top: 4px; text-align: right; color: var(--muted-foreground); font-size: .6875rem; }
.tg-empty { padding: 24px; text-align: center; color: var(--muted-foreground); }
.tg-bar { display: flex; gap: 8px; flex-wrap: wrap; padding: 12px; border-top: 1px solid var(--border); }

/* ---------- profile: «Настройки источников» ---------- */
.source-list { list-style: none; margin: 16px 0; padding: 0; }
.source-row { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; padding: 14px 0; border-top: 1px solid var(--border); }
.source-row:last-child { border-bottom: 1px solid var(--border); }
.source-info { min-width: 0; }
.source-title { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.source-title h3 { margin: 0; font-size: .875rem; line-height: 1.25rem; overflow-wrap: anywhere; }
.source-info p { margin: 4px 0 0; color: var(--muted-foreground); font-size: .8125rem; line-height: 1.125rem; overflow-wrap: anywhere; }
.source-meta > span { display: inline-block; max-width: 100%; }   /* «каждые 10 мин» wraps as a whole, between the dots */
.source-row form { margin: 0; }

/* switch (shadcn Switch); the «off» track is --control-border, 3:1 like checkbox edges */
.switch {
  position: relative; display: inline-flex; align-items: center; flex: none; width: 36px; height: 20px; padding: 2px;
  border: 0; border-radius: 999px; background: var(--control-border); cursor: pointer;
  transition: background-color var(--duration) var(--ease);
}
.switch::before {
  content: ""; width: 16px; height: 16px; border-radius: 50%; background: var(--primary-foreground); box-shadow: var(--shadow-sm);
  transition: translate var(--duration) var(--ease);
}
.switch::after { content: ""; position: absolute; inset: -12px -4px; }   /* 44 × 44 px to tap */
.switch[aria-checked="true"] { background: var(--primary); }
.switch[aria-checked="true"]::before { translate: 16px 0; }
.switch:focus-visible { outline: 2px solid var(--focus-outline); outline-offset: 2px; }
.switch[aria-busy="true"] { cursor: progress; }
@media (forced-colors: active) {
  .switch { forced-color-adjust: none; border: 1px solid ButtonText; background: Canvas; }
  .switch::before { background: ButtonText; box-shadow: none; }
  .switch[aria-checked="true"] { background: Highlight; }
  .switch[aria-checked="true"]::before { background: HighlightText; }
}

/* ---------- ops ---------- */
.ops-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; align-items: start; }
.ops-layout > div { min-width: 0; }
.ops-nav { position: sticky; top: 88px; display: grid; gap: 2px; padding: 8px; }
.ops-nav a { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 36px; padding: 0 12px; border-radius: 999px; color: var(--foreground); white-space: nowrap; }
@media (hover: hover) { .ops-nav a:hover { background: var(--muted); text-decoration: none; } }
.ops-nav a[aria-current="page"] { background: var(--muted); font-weight: 500; }
.ops-nav .count-pill { background: var(--muted); color: var(--muted-foreground); }
.ops-nav a[aria-current="page"] .count-pill:not(.hot) { background: var(--card); }
.ops-nav .count-pill.hot { background: var(--primary); color: var(--primary-foreground); }
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 16px; margin-bottom: 24px; }
.kpi { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 6px; padding: 18px 20px; }
.kpi strong { display: block; font-size: 1.625rem; line-height: 2rem; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.kpi span { color: var(--muted-foreground); font-size: .75rem; line-height: 1rem; font-weight: 500; }
.tabs { display: flex; gap: 2px; width: fit-content; max-width: 100%; height: 36px; padding: 4px; margin-bottom: 20px; border-radius: 999px; background: var(--tabs-bg); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 0 12px; border-radius: 999px; color: var(--tab-fg); font-weight: 500; white-space: nowrap; }
@media (hover: hover) { .tabs a:hover { color: var(--foreground); text-decoration: none; } }
.tabs a[aria-current="page"] { background: var(--tabs-active-bg); color: var(--foreground); font-weight: 600; }
/* links inside scrolling strips: draw the focus ring inside, the strip would clip it */
.main-nav a:focus-visible, .sort a:focus-visible, .tabs a:focus-visible, .ops-nav a:focus-visible { outline-offset: -2px; }
.bar { height: 8px; min-width: 80px; overflow: hidden; border-radius: 999px; background: var(--muted); }
.bar > i { display: block; height: 100%; background: var(--primary); }
.bar.warn > i { background: var(--warning); }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.pair > * { min-width: 0; }
.pair > .panel + .panel { margin-top: 0; }
.inline-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0; min-width: 0; }
.inline-form input, .inline-form select { width: auto; min-width: 0; max-width: 100%; flex: 1 1 160px; }
.inline-form label { display: inline-flex; align-items: center; gap: 8px; font-weight: 400; }
.inline-form label input { width: 88px; flex: none; }
.kv { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 8px 12px; margin: 0; }
.kv dt { color: var(--muted-foreground); }
.kv dd { margin: 0; word-break: break-word; }
.kv dd .badge { height: auto; min-height: 20px; max-width: 100%; padding-block: 2px; white-space: normal; }
/* a key-value list in a narrow half of .pair stacks instead of squeezing the values */
.pair > * { container-type: inline-size; }
@container (max-width: 400px) { .kv { grid-template-columns: minmax(0, 1fr); gap: 2px 0; } .kv dd { margin-bottom: 8px; } }
.w0 { width: 0%; } .w5 { width: 5%; } .w10 { width: 10%; } .w15 { width: 15%; } .w20 { width: 20%; } .w25 { width: 25%; }
.w30 { width: 30%; } .w35 { width: 35%; } .w40 { width: 40%; } .w45 { width: 45%; } .w50 { width: 50%; } .w55 { width: 55%; }
.w60 { width: 60%; } .w65 { width: 65%; } .w70 { width: 70%; } .w75 { width: 75%; } .w80 { width: 80%; } .w85 { width: 85%; }
.w90 { width: 90%; } .w95 { width: 95%; } .w100 { width: 100%; }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  html { scroll-padding-top: 120px; }
  .header-inner { padding-top: 10px; padding-bottom: 10px; min-height: 0; }
  .main-nav { order: 3; width: 100%; }
  .results-actions { margin-left: 0; }
  .feed-layout, .detail-grid, .form-grid, .ops-layout { grid-template-columns: minmax(0, 1fr); }
  .detail-grid { grid-template-areas: "aside" "main"; }
  .filters-col, .summary-panel, .ops-nav { position: static; max-height: none; }
  .ops-nav { display: flex; overflow-x: auto; scrollbar-width: none; border-radius: 999px; padding: 4px; }
  .ops-nav::-webkit-scrollbar { display: none; }
  .ops-nav a { flex: none; }
}
@media (min-width: 961px) {
  .filters { max-height: calc(100vh - 104px); overflow: auto; scrollbar-width: none; }   /* the card scrolls itself, so its shadow is not clipped; no bar */
  .filters::-webkit-scrollbar { display: none; }
}
@media (max-width: 640px) {
  .brand { flex: 1 1 0; max-width: max-content; }
  .brand-text small { display: none; }
  .header-inner { column-gap: 12px; }
  .header-actions { margin-left: 0; gap: 4px; }   /* the site name stays on one line next to «Войти» down to 360 px */
  .main-nav { width: calc(100% + 32px); margin: 0 -16px; padding: 0 28px 2px 16px; overflow-x: auto; scrollbar-width: none; }
  .main-nav::-webkit-scrollbar { display: none; }
  .main-nav { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
  .main-nav a:not(.btn) { padding: 0 12px; }
  .main { padding-top: 20px; }
  .feed-head h1 { font-size: 1.5rem; line-height: 2rem; }
  .results-actions { width: 100%; }
  .sort { flex: 1 1 0; min-width: 0; }   /* shares its row with the view switch */
  .sort a { flex: 1 0 auto; justify-content: center; padding: 0 8px; }
  .results-bar .save-search { width: 100%; }
  /* a phone shows one card per row in the grid too: «По одному» would change nothing */
  .view-switch [data-view-choice="one"] { display: none; }
  .view-switch:has([data-view-choice="one"][aria-pressed="true"]) [data-view-choice="grid"] { background: var(--tabs-active-bg); color: var(--foreground); }
  .panel { padding: 20px; }
  .search-item { padding: 20px; }
  dl.facts, .kv { grid-template-columns: minmax(0, 1fr); }
  dl.facts dt { padding: 10px 0 0; border-bottom: 0; }
  dl.facts dd { padding: 2px 0 10px; }
  .kv dd { margin-bottom: 8px; }
  .pair { grid-template-columns: 1fr; }
  .big-price { font-size: 1.75rem; line-height: 2.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .results-col[aria-busy="true"] .loading-bar { left: 0; width: 100%; opacity: .6; }
}