/* ============================================================
   dbweb.ru — портал: ТОЧНЫЙ перенос присланного референса.
   Блок 1: токены и базовые компоненты дизайн-системы Modernist.
   Блок 2: portal.css из архива, дословно (зелёный акцент,
           Geologica/Onest, .hd/.nv/.mega/.org/.bon/.rank/.ft ...).
   Подключается ПОСЛЕ app.css, поэтому выигрывает каскад.
   Не редактировать по мелочи — это перенос, а не наш слой.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Geologica:wght@400;500;600;700&family=Onest:wght@400;500;600;700;800&display=swap');

/* ─── БЛОК 1: Modernist (дизайн-система-основа) ─────────────── */
/* Modernist — design-system tokens and component classes. This file is the source of truth for the system's look; retune it here and see readme.md. */

:root {
  --color-bg: #f3f2f2;
  --color-surface: #eae9e9;
  --color-text: #201e1d;
  --color-accent: #ec3013;
  --color-accent-2: #e15b47;
  --color-divider: color-mix(in srgb, #201e1d 40%, transparent);

  /* Tonal ramps — generated in OKLCH on one shared lightness scale, so the
     same step of any role matches the others in visual value. */
  --color-neutral-100: #f8f4f4;
  --color-neutral-200: #eae7e7;
  --color-neutral-300: #d7d3d3;
  --color-neutral-400: #bab6b6;
  --color-neutral-500: #9b9797;
  --color-neutral-600: #7d7979;
  --color-neutral-700: #605d5d;
  --color-neutral-800: #444141;
  --color-neutral-900: #2d2b2b;

  --color-accent-100: #fff2ef;
  --color-accent-200: #ffe0d9;
  --color-accent-300: #ffc4b8;
  --color-accent-400: #ff9783;
  --color-accent-500: #ff563c;
  --color-accent-600: #dd2b0f;
  --color-accent-700: #ae1800;
  --color-accent-800: #7c1405;
  --color-accent-900: #4d170e;

  --color-accent-2-100: #fff2ef;
  --color-accent-2-200: #ffe0da;
  --color-accent-2-300: #ffc4b9;
  --color-accent-2-400: #ff9784;
  --color-accent-2-500: #ef6853;
  --color-accent-2-600: #c94b39;
  --color-accent-2-700: #9e3526;
  --color-accent-2-800: #71261b;
  --color-accent-2-900: #471d16;

  --font-heading: "Archivo", system-ui, sans-serif;
  --font-heading-weight: 800;
  --font-body: "Archivo", system-ui, sans-serif;

  --space-1: 4.0px;
  --space-2: 8.0px;
  --space-3: 12.0px;
  --space-4: 16.0px;
  --space-6: 24.0px;
  --space-8: 32.0px;

  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;

  /* Elevation — derived from the ground: soft ink-tinted shadows on a
     light theme, a hairline edge + ambient darkness on a dark one. */
  --shadow-sm: 0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent);
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); }

.grayscale{filter:grayscale(1) contrast(1.08)}

/* ══════════════════════════════════════════════════════════════════════════
   Components — built with the tokens above. Plain CSS
   on plain HTML: no JavaScript, no build step. Each class is documented in
   readme.md and demonstrated in foundations/ and components/.
   ══════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-size: 15px; line-height: 1.55; font-weight: 400; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2);
}
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; }
h6 { letter-spacing: 0.08em; text-transform: uppercase; }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent); text-underline-offset: 3px; }
img { display: block; max-width: 100%; }
figure { margin: 0; }
figcaption {
  font-size: 11px; margin-top: var(--space-1);
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

/* — rules — */
.hr {
  height: 2px; border: 0; margin: var(--space-4) 0;
  background: var(--color-divider);
}

/* — buttons — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; line-height: 1.2; color: var(--color-text); /* matches the .input's 14px —
     the pair sits side by side in sign-up rows */
  background: transparent; border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: var(--radius-md);
}
.btn svg { display: block; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); color: var(--color-bg); }
.btn-primary:hover { background: var(--color-accent-600); }
.btn-primary:active { background: var(--color-accent-700); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
.btn-icon { width: 36px; height: 36px; padding: 0; }
.btn-block { width: 100%; margin-top: var(--space-2); justify-content: flex-start; text-align: left; }

/* — forms — */
.field > label {
  display: block; font-size: 12px; margin-bottom: 5px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.input {
  width: 100%; min-height: 36px; padding: 6px 10px; font: inherit;
  font-size: 14px; color: var(--color-text); caret-color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
textarea.input { min-height: 90px; resize: vertical; }
.radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.radio input, .seg-opt input {
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.radio .dot {
  width: 16px; height: 16px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--color-divider);
}
.radio:hover .dot { border-color: var(--color-accent); }
.radio input:checked + .dot {
  border-color: var(--color-accent); background: var(--color-accent);
  box-shadow: inset 0 0 0 4px var(--color-bg);
}
.radio input:focus-visible + .dot { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.seg {
  display: inline-flex; overflow: hidden;
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.seg-opt {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; font-size: 13px; cursor: pointer;
}
.seg-opt + .seg-opt { border-left: 1px solid var(--color-divider); }
.seg-opt:has(input:checked) { background: var(--color-accent); color: var(--color-bg); }
.seg-opt:not(:has(input:checked)):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.seg-opt:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -2px; }

/* — cards — */
.card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface);
}
.card-kicker { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); }
.card-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 17px; line-height: 1.2;
}
.card-body { margin: 0; font-size: 13px; opacity: 0.8; flex: 1; }
.card-meta {
  display: flex; align-items: center; gap: 6px; font-size: 11px;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
.elev-sm { box-shadow: var(--shadow-sm); }
.elev-md { box-shadow: var(--shadow-md); }
.elev-lg { box-shadow: var(--shadow-lg); }

/* — tags — */
.tag {
  display: inline-flex; align-items: center; font-size: 11px;
  letter-spacing: 0.02em; padding: 3px 10px;
  border-radius: calc(var(--radius-md) * 0.75);
}
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }

/* — navigation — */
.nav {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: 2px solid var(--color-divider);
}
.nav-brand {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 18px; margin-right: auto;
}
.nav a { color: inherit; text-decoration: none; font-size: 14px; }
.nav a:hover, .nav a[aria-current='page'] { color: var(--color-accent); }

/* — tables — */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  padding: var(--space-2); border-bottom: 2px solid var(--color-divider);
}
.table td {
  padding: var(--space-2);
  border-bottom: 1px solid var(--color-divider);
}
.table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }

/* — dialog — */
.dialog-backdrop {
  position: fixed; inset: 0; display: grid; place-items: center;
  padding: var(--space-4);
  background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent);
}
.dialog {
  width: min(440px, 100%); display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-4); border-radius: var(--radius-lg);
  background: var(--color-surface); box-shadow: var(--shadow-lg);
}
.dialog-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 20px;
}
.dialog-body { font-size: 14px; opacity: 0.85; }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }



/* ─── БЛОК 2: portal.css (слой портала, дословно) ───────────── */
/* ДБВЕБ — слой стилей портала. Всё на токенах Modernist. Инлайн-стилей в разметке нет. */

:root{
  /* Акцент портала — спокойный зелёный вместо системного красного (красный/жёлтый под запретом). */
  /* Смягчённый зелёный (было #12915b — слишком насыщенный/грубый). */
  --color-accent:#1c9a6b;
  --color-accent-100:#eaf6f0;
  --color-accent-200:#d3ecdf;
  --color-accent-300:#a9dbc2;
  --color-accent-400:#74c69e;
  --color-accent-500:#2fac7c;
  --color-accent-600:#178257;
  --color-accent-700:#126846;
  --color-accent-800:#0f4f37;
  --color-accent-900:#0b3626;
  --color-accent-2:#0f7d4e;
  --color-accent-2-100:#edf7f1;
  --color-accent-2-200:#d0ebdd;
  --color-accent-2-800:#0a4b31;

  /* Современная кириллическая пара вместо Inter/Manrope.
     Geologica — геометричный дисплейный шрифт, тяжёлый на вид даже на
     средних насыщенностях — было 600, снижаем до 500 (Medium). */
  --font-heading:"Geologica","Onest",system-ui,sans-serif;
  --font-heading-weight:500;
  --font-body:"Onest",system-ui,sans-serif;

  --shell:1440px;
  --ctl:44px;
  --edge:2px solid var(--color-divider);
  --hair:1px solid var(--color-neutral-300);
  --ink-55:color-mix(in srgb, var(--color-text) 55%, transparent);
  --ink-70:color-mix(in srgb, var(--color-text) 70%, transparent);
  --ink-04:color-mix(in srgb, var(--color-text) 4%, transparent);
  --ink-08:color-mix(in srgb, var(--color-text) 8%, transparent);
  --card:var(--color-neutral-100);
  --warm:var(--color-accent-100);
}

html{-webkit-text-size-adjust:100%}
h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);font-weight:var(--font-heading-weight)}

/* единая метрика управляющих элементов: кнопка = инпут = поиск */
.btn{height:var(--ctl);padding:0 var(--space-4);font-family:var(--font-heading);font-weight:600;font-size:15px;letter-spacing:-.005em;gap:8px;white-space:nowrap;flex:none;justify-content:flex-start;text-align:left}
.input{min-height:var(--ctl);height:var(--ctl);padding:0 var(--space-3);font-family:var(--font-body);font-size:15px}
textarea.input{height:auto;min-height:104px;padding:10px var(--space-3)}
input[type="range"].input{padding:0 4px;accent-color:var(--color-accent)}
.btn-ghost{padding:0 var(--space-2)}
body{margin:0;background:var(--color-bg);color:var(--color-text);font-family:var(--font-body);font-size:15px;line-height:1.55}
.app{min-height:100vh;display:flex;flex-direction:column}
.shell{width:100%;max-width:var(--shell);margin:0 auto;padding:0 var(--space-6)}
.mono{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.u-hide{display:none !important}

/* ─── шапка (не прилипает) ──────────────────────────────── */
.hd{position:static;background:var(--color-neutral-100);border-bottom:var(--edge)}
.hd-strip{border-bottom:var(--hair);background:var(--warm);color:var(--color-accent-900)}
.hd-strip .shell{display:flex;align-items:center;gap:var(--space-6);height:38px;overflow:hidden}
.tick{display:flex;align-items:center;gap:var(--space-2);font-size:12px;white-space:nowrap}
.tick b{font-family:var(--font-heading);font-weight:600;font-variant-numeric:tabular-nums}
.tick span{color:color-mix(in srgb,var(--color-accent-900) 60%,transparent)}
.tick i{font-style:normal;font-size:11px;font-weight:600}
.tick i.up{color:var(--color-accent-700);}
.tick i.dn{color:var(--color-neutral-700)}
.hd-strip .tick:last-child{margin-left:auto}

.hd-main .shell{display:flex;align-items:center;gap:var(--space-6);padding-top:var(--space-4);padding-bottom:var(--space-4)}

.logo{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit;flex:none;background:transparent;border:0;padding:0;cursor:pointer}
.logo-mark{width:44px;height:44px;flex:none;background:var(--color-accent);color:var(--color-neutral-100);display:grid;place-items:center;position:relative;overflow:hidden}
.logo-mark span{font-family:var(--font-heading);font-weight:700;font-size:20px;letter-spacing:-.07em;line-height:1;transform:translateY(-2px)}
.logo-mark::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:4px;background:var(--color-accent-700)}
.logo-word{display:flex;flex-direction:column;line-height:1;text-align:left}
.logo-word b{font-family:var(--font-heading);font-weight:700;font-size:22px;letter-spacing:-.02em}
.logo-word b i{font-style:normal;color:var(--color-accent)}
.logo-word em{font-style:normal;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-55);margin-top:4px}

.search{flex:1;display:flex;align-items:center;gap:var(--space-2);min-width:0;border:1px solid var(--color-neutral-400);background:var(--color-bg);padding:0 var(--space-3);height:var(--ctl)}
.search:focus-within{border-color:var(--color-accent)}
.search svg{flex:none;color:var(--color-accent)}
.search input{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:14px;color:inherit;outline:none}
.search kbd{font-family:var(--font-heading);font-size:10px;letter-spacing:.06em;border:var(--hair);padding:2px 6px;color:var(--ink-55)}

.hd-acts{display:flex;align-items:center;gap:var(--space-2);flex:none}
.burger{display:none;width:var(--ctl);height:var(--ctl);border:1px solid var(--color-neutral-400);background:transparent;cursor:pointer;color:inherit;place-items:center}

/* ─── большая навигация ─────────────────────────────────── */
.nv{border-top:var(--hair);position:relative;background:var(--color-neutral-100)}
.nv-row{display:flex;align-items:stretch}
.nv-row a,.nv-row button{appearance:none;border:0;background:transparent;font-family:var(--font-heading);font-weight:600;font-size:15px;color:inherit;text-decoration:none;padding:15px var(--space-4);display:inline-flex;align-items:center;gap:7px;cursor:pointer;white-space:nowrap}
.nv-row a:hover,.nv-row button:hover{background:var(--warm);color:var(--color-accent-700)}
.nv-row .on{color:var(--color-accent);box-shadow:inset 0 -3px 0 var(--color-accent)}
.nv-row .nv-spacer{flex:1}
.nv-row .nv-cta{color:var(--color-accent-700)}
.nv-row button svg{transition:transform .18s ease}
.nv-row button[aria-expanded="true"] svg{transform:rotate(180deg)}

.mega{position:absolute;left:0;right:0;top:100%;background:var(--color-neutral-100);border-top:var(--hair);border-bottom:var(--edge);box-shadow:var(--shadow-md);z-index:39}
.mega .shell{display:grid;grid-template-columns:repeat(4,1fr);padding-top:var(--space-6);padding-bottom:var(--space-6)}
.mega-col{padding:0 var(--space-6);border-left:var(--hair)}
.mega-col:first-child{padding-left:0;border-left:0}
.mega-col h6{margin:0 0 var(--space-3);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--color-accent)}
.mega-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.mega-col li a{display:flex;justify-content:space-between;gap:var(--space-3);padding:8px 0;font-size:14px;text-decoration:none;color:inherit;border-bottom:var(--hair);cursor:pointer}
.mega-col li a:hover{color:var(--color-accent)}
.mega-col li a i{font-style:normal;font-size:12px;color:var(--ink-55);font-variant-numeric:tabular-nums}

.mob{display:none;border-top:var(--hair);background:var(--color-neutral-100)}
.mob ul{list-style:none;margin:0;padding:0}
.mob li a{display:flex;justify-content:space-between;align-items:center;padding:15px var(--space-4);font-family:var(--font-heading);font-weight:600;font-size:16px;text-decoration:none;color:inherit;border-bottom:var(--hair);cursor:pointer}
.mob li a i{font-style:normal;font-size:12px;color:var(--ink-55)}
.mob-foot{display:flex;gap:var(--space-2);padding:var(--space-4)}

/* ─── типовые секции ───────────────────────────────────── */
.sec{border-bottom:var(--hair)}
.sec-warm{background:var(--warm)}
.sec-pad{padding-top:var(--space-8);padding-bottom:var(--space-8)}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-6);margin-bottom:var(--space-6)}
.sec-head h2{margin:0;font-size:clamp(26px,2.6vw,36px);letter-spacing:-.025em}
.kicker{font-family:var(--font-heading);font-weight:600;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--color-accent);margin:0 0 var(--space-2)}
.lede{margin:var(--space-3) 0 0;max-width:66ch;color:var(--ink-70);font-size:16px;text-wrap:pretty}
.link-more{font-family:var(--font-heading);font-weight:600;font-size:14px;color:var(--color-accent-700);text-decoration:none;white-space:nowrap;cursor:pointer}
.link-more:hover{text-decoration:underline}

/* ─── хиро ─────────────────────────────────────────────── */
.hero{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--space-8);padding-top:var(--space-8);padding-bottom:var(--space-8)}
.hero h1{margin:0;font-size:clamp(36px,4.2vw,60px);line-height:1.03;letter-spacing:-.035em;text-wrap:balance}
.hero h1 mark{background:none;color:var(--color-accent)}
.hero-cta{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-6)}
.hero-meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-4);margin-top:var(--space-8);padding-top:var(--space-4);border-top:var(--hair)}
.hero-meta div b{display:block;font-family:var(--font-heading);font-weight:600;font-size:28px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.hero-meta div span{font-size:12px;color:var(--ink-55)}
.trust{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-4)}

/* ─── виджеты ──────────────────────────────────────────── */
.w{border:var(--hair);background:var(--card);display:flex;flex-direction:column;min-width:0}
.w-accent{border-color:var(--color-accent)}
.w-hd{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-bottom:var(--hair)}
.w-hd h4{margin:0;font-size:16px;letter-spacing:-.01em}
.w-tag{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-55);font-family:var(--font-heading);font-weight:600}
.w-bd{padding:var(--space-4);flex:1}
.w-bd-flush{padding:0;flex:1}
.w-ft{padding:var(--space-3) var(--space-4);border-top:var(--hair);display:flex;justify-content:space-between;align-items:center;gap:var(--space-3)}

.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-4)}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4)}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4)}
.grid-w{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:var(--space-4);align-items:start}
.stack{display:flex;flex-direction:column;gap:var(--space-4)}

/* метрика */
.met{border:var(--hair);padding:var(--space-4);background:var(--card);display:flex;flex-direction:column;gap:var(--space-2)}
.met-k{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-55);font-family:var(--font-heading);font-weight:600}
.met-v{font-family:var(--font-heading);font-weight:600;font-size:38px;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.met-d{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-55)}
.met-d em{font-style:normal;font-family:var(--font-heading);font-weight:600;color:var(--color-accent-700)}
.spark{display:flex;align-items:flex-end;gap:3px;height:32px;margin-top:auto}
.spark i{flex:1;background:var(--color-accent-200);display:block;height:100%}
.spark i.hi{background:var(--color-accent)}

/* карточка организации */
.org{border:var(--hair);background:var(--card);display:flex;flex-direction:column;min-width:0;transition:box-shadow .16s ease,border-color .16s ease}
.org:hover{box-shadow:var(--shadow-md);border-color:var(--color-accent)}
.org-t{display:flex;gap:var(--space-3);padding:var(--space-4);border-bottom:var(--hair);align-items:flex-start}
.org-logo{width:48px;height:48px;flex:none;background:var(--warm);color:var(--color-accent-800);display:grid;place-items:center;font-family:var(--font-heading);font-weight:600;font-size:17px;letter-spacing:-.03em}
.org-logo-a{background:var(--color-accent);color:var(--color-neutral-100)}
/* Реальные логотипы (см. Organization::getLogoAttribute) — почти все
   широкие горизонтальные вордмарки (~3.6:1), а .org-logo — квадратная
   плашка под двухбуквенные инициалы. object-fit:contain в квадрате 48px
   вписывал вордмарк без искажений, но вписывал его настолько мелко
   (реальная высота ~13px), что логотип был неотличим от пустой плашки —
   жалоба «теперь вообще ничего не показывается». У донора карточки
   логотипа прямоугольные, не квадратные — расширяем плашку под img
   отдельно от квадратной плашки под инициалы (та остаётся 48/64/80px). */
/* Фиксированный прямоугольник (100×44 и т.п.) не решал задачу: у реальных
   логотипов встречаются самые разные пропорции (у части ~3.6:1, у части
   уже, у части почти квадратные), и contain внутри ЗАФИКСИРОВАННОЙ высокой
   узкой рамки всё равно ужимал часть логотипов до нечитаемой полоски —
   то же самое «логотипов не видно», просто в других карточках. Правильный
   способ показывать логотипы разной ширины — задать высоту и дать ширине
   быть auto (как на сайте донора: там логотипы именно прямоугольные, а не
   вписаны в квадрат/фикс-бокс).
   НО: width:auto означает, что каждая карточка занимает разную ширину под
   лого (у широкого вордмарка — почти 170px, у квадратного — 44px), а .org-t
   — это flex с фиксированным gap. Значит текст названия у разных карточек
   начинался на разной дистанции от левого края — «пляшущие отступы»
   визуально при пролистывании списка. Фикс: ширина слота теперь
   ФИКСИРОВАНА (не auto, не потолок-max-width, а именно width) — начало
   текста названия всегда на одном месте. object-fit:contain внутри слота
   по-прежнему не мнёт и не обрезает лого; при типичных пропорциях реальных
   логотипов (до ~3.6:1) высота слота используется почти полностью. */
img.org-logo{width:170px;height:44px;object-fit:contain;object-position:left center;padding:0;background:none}
.rank-who img.org-logo{width:110px;height:28px}
.det-top img.org-logo{width:270px;height:72px}
.org-nm{min-width:0;flex:1}
.org-nm h4{margin:0 0 3px;font-size:17px;letter-spacing:-.015em}
.org-nm p{margin:0;font-size:12px;color:var(--ink-55)}
.org-rate{flex:none;text-align:right}
.org-rate b{display:block;font-family:var(--font-heading);font-weight:600;font-size:20px;line-height:1;font-variant-numeric:tabular-nums;color:var(--color-accent-700)}
.org-rate span{font-size:10px;color:var(--ink-55);letter-spacing:.06em;text-transform:uppercase}
.org-specs{list-style:none;margin:0;padding:0}
.org-specs li{display:flex;justify-content:space-between;gap:var(--space-3);padding:10px var(--space-4);font-size:13px;border-bottom:var(--hair)}
.org-specs li:last-child{border-bottom:0}
.org-specs li span{color:var(--ink-55)}
.org-specs li b{font-family:var(--font-heading);font-weight:600;font-variant-numeric:tabular-nums;text-align:right}
.org-tags{display:flex;flex-wrap:wrap;gap:6px;padding:var(--space-3) var(--space-4)}
.org-acts{display:flex;gap:var(--space-2);padding:var(--space-4);border-top:var(--hair);margin-top:auto}
.org-acts .btn{flex:1;justify-content:flex-start}

/* строка рейтинга */
.rank{display:grid;grid-template-columns:56px minmax(0,1fr) repeat(3,minmax(88px,132px)) auto;gap:var(--space-4);align-items:center;padding:var(--space-4);border-bottom:var(--hair)}
.rank:last-child{border-bottom:0}
.rank:hover{background:var(--warm)}
/* Виджет рейтинга на главной (.rank-compact) делит строку с блоком новостей —
   у него меньше ширины, чем у полной страницы /organizations/rating, но
   .rank рассчитан на неё же (3 колонки метрик по 88–132px). Из-за этого
   длинные названия («Альфа банк кредит на автомобиль») переносились на
   несколько строк и наезжали на подпись метрики под ними. Сужаем колонки
   метрик и прячем второстепенные (как уже делает адаптив на узких
   вьюпортах — тут та же логика, но по контейнеру, а не по ширине экрана,
   т.к. на широком экране сам виджет всё равно узкий). */
.rank-compact .rank{grid-template-columns:40px minmax(0,1fr) minmax(60px,96px) auto}
.rank-compact .rank-hide{display:none}
.rank-n{font-family:var(--font-heading);font-weight:600;font-size:30px;letter-spacing:-.04em;color:var(--color-neutral-400);font-variant-numeric:tabular-nums}
.rank-n.top{color:var(--color-accent)}
.rank-who{display:flex;gap:var(--space-3);align-items:center;min-width:0}
.rank-who b{display:block;font-family:var(--font-heading);font-weight:600;font-size:16px}
.rank-who span{font-size:12px;color:var(--ink-55)}
.rank-c b{display:block;font-family:var(--font-heading);font-weight:600;font-size:15px;font-variant-numeric:tabular-nums}
.rank-c span{font-size:11px;color:var(--ink-55);letter-spacing:.06em;text-transform:uppercase}
.bar{display:block;height:6px;background:var(--color-accent-200);margin-top:6px}
.bar i{display:block;height:100%;background:var(--color-accent)}
.bar-55 i{width:55%}.bar-62 i{width:62%}.bar-70 i{width:70%}.bar-78 i{width:78%}.bar-85 i{width:85%}.bar-92 i{width:92%}.bar-97 i{width:97%}

/* плитки направлений */
.tiles{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border-top:var(--hair);border-left:var(--hair)}
.tile{border-right:var(--hair);border-bottom:var(--hair);padding:var(--space-4);text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:var(--space-2);min-height:130px;background:var(--card);cursor:pointer}
.tile:hover{background:var(--warm)}
.tile b{font-family:var(--font-heading);font-weight:600;font-size:15px;margin-top:auto}
.tile span.cnt{font-size:12px;color:var(--ink-55);font-variant-numeric:tabular-nums}

/* бонус */
.bon{border:var(--hair);display:flex;flex-direction:column;background:var(--card);transition:box-shadow .16s ease}
.bon:hover{box-shadow:var(--shadow-md)}
.bon-hero{background:var(--color-accent);color:var(--color-neutral-100);padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-1)}
.bon-hero .v{font-family:var(--font-heading);font-weight:600;font-size:34px;line-height:1;letter-spacing:-.03em}
.bon-hero .k{font-size:11px;letter-spacing:.12em;text-transform:uppercase;opacity:.85}
.bon-warm .bon-hero{background:var(--warm);color:var(--color-accent-800)}
.bon-bd{padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-2);flex:1}
.bon-bd b{font-family:var(--font-heading);font-weight:600;font-size:16px}
.bon-bd p{margin:0;font-size:13px;color:var(--ink-70)}
.bon-ft{padding:var(--space-3) var(--space-4);border-top:var(--hair);display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);font-size:12px;color:var(--ink-55)}

/* новости */
.news{list-style:none;margin:0;padding:0}
.news li{display:grid;grid-template-columns:78px minmax(0,1fr);gap:var(--space-3);padding:var(--space-3) var(--space-4);border-bottom:var(--hair)}
.news li:last-child{border-bottom:0}
.news time{font-size:11px;color:var(--ink-55);font-variant-numeric:tabular-nums;letter-spacing:.04em;text-transform:uppercase}
.news a{display:block;font-size:14px;color:inherit;text-decoration:none;font-family:var(--font-heading);font-weight:500;text-wrap:pretty;cursor:pointer}
.news a:hover{color:var(--color-accent)}
.news p{margin:4px 0 0;font-size:12px;color:var(--ink-55)}

/* фильтры */
.chips{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.chip{appearance:none;height:40px;border:1px solid var(--color-neutral-400);background:var(--card);font-family:var(--font-heading);font-weight:500;font-size:14px;color:inherit;padding:0 14px;cursor:pointer;display:inline-flex;gap:7px;align-items:center}
.chip:hover{background:var(--warm);border-color:var(--color-accent)}
.chip i{font-style:normal;font-size:11px;color:var(--ink-55);font-variant-numeric:tabular-nums}
.chip.on{background:var(--color-accent);color:var(--color-neutral-100);border-color:var(--color-accent)}
.chip.on i{color:color-mix(in srgb,#f8f4f4 75%,transparent)}

.toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-4) 0;flex-wrap:wrap}
.toolbar .count{font-size:13px;color:var(--ink-55)}
.sort{display:inline-flex;border:1px solid var(--color-neutral-400)}
.sort button{appearance:none;height:40px;border:0;background:transparent;font-family:var(--font-heading);font-weight:500;font-size:14px;color:inherit;padding:0 14px;cursor:pointer}
.sort button + button{border-left:1px solid var(--color-neutral-400)}
.sort button.on{background:var(--color-accent);color:var(--color-neutral-100)}
.sort button:not(.on):hover{background:var(--warm)}

.pager{display:flex;gap:var(--space-2);align-items:center;padding:var(--space-6) 0}
.pager button{appearance:none;min-width:40px;height:40px;border:1px solid var(--color-neutral-400);background:var(--card);font-family:var(--font-heading);font-weight:500;font-size:14px;color:inherit;cursor:pointer;font-variant-numeric:tabular-nums}
.pager button.on{background:var(--color-accent);color:var(--color-neutral-100);border-color:var(--color-accent)}
.pager button:not(.on):hover{background:var(--warm)}
.pager span{color:var(--ink-55);font-size:13px;margin-left:auto}

.crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:var(--space-3) 0;font-size:12px;color:var(--ink-55);border-bottom:var(--hair)}
.crumbs a{color:inherit;text-decoration:none;cursor:pointer}
.crumbs a:hover{color:var(--color-accent)}

/* деталка */
.det{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:var(--space-8);padding-top:var(--space-8);padding-bottom:var(--space-8)}
.det-l{min-width:0}
/* Херо-шапка организации: раньше лого+название сидели прямо на фоне
   страницы без рамки/фона («хедер без карточки» — жалоба пользователя).
   Тёплый фирменный фон + рамка выделяют её как хедер, а не рядовую
   секцию, сохраняя тот же язык (радиус/тень), что и карточки ниже. */
.det-top{display:flex;gap:var(--space-4);align-items:flex-start;flex-wrap:wrap;background:var(--warm);border:1px solid var(--color-accent-200);border-radius:var(--r-md);padding:28px 32px;box-shadow:var(--shadow-sm)}
.det-top .org-logo{width:80px;height:80px;font-size:28px}
.det-top h1{margin:0;font-size:clamp(30px,3.4vw,48px);letter-spacing:-.03em;line-height:1.04}
/* Раньше каждая секция страницы организации (характеристики, обзор, FAQ,
   отзывы, похожие организации...) была своей отдельной .content-card с
   разрывом между ними. У организаций с малым количеством данных (только
   название и категория — без лицензии/сумм/отзывов) большинство секций
   скрыто условием @if, и 2-3 маленькие карточки с большими зазорами между
   ними на пустом фоне выглядели «куце» — жалоба «страница выглядит куце,
   лучше 1 карточка на всё». Теперь все секции — один сплошной блок
   .det-card с внутренними разделителями .det-sec вместо набора отдельных
   плавающих карточек. */
.det-card{background:#fff;border:1px solid #e8ecf1;border-radius:var(--r-md);box-shadow:var(--shadow-sm);overflow:hidden}
.det-sec{padding:28px 32px;border-bottom:1px solid #eef1f5}
.det-sec:last-child{border-bottom:none}
.det-sec h2,.det-sec h3{margin:0 0 var(--space-3);font-size:20px;font-weight:600;letter-spacing:-.02em}
.faq details{border-bottom:var(--hair);background:var(--card);padding:0 var(--space-4)}
.faq details:first-child{border-top:var(--hair)}
.faq summary{cursor:pointer;list-style:none;padding:var(--space-4) 0;font-family:var(--font-heading);font-weight:600;font-size:16px;display:flex;justify-content:space-between;gap:var(--space-4)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--color-accent);font-weight:700}
.faq details[open] summary::after{content:"–"}
.faq p{margin:0 0 var(--space-4);color:var(--ink-70);font-size:14px;max-width:72ch}

.form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4)}
.field{display:block;margin-bottom:var(--space-4)}
.field > label{display:block;font-size:12px;margin-bottom:5px;color:var(--ink-70)}
.form-box{border:var(--hair);background:var(--card);padding:var(--space-6)}

/* постер */
.poster{background:var(--color-accent);color:var(--color-neutral-100)}
.poster .shell{padding-top:80px;padding-bottom:80px;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--space-8);align-items:center}
.poster .kicker{color:color-mix(in srgb,#f8f4f4 80%,transparent)}
/* color:inherit обязателен: общее правило h1..h6{color:var(--text-primary)}
   (app.css) целится в сам тег <h2> и всегда бьёт унаследованный от .poster
   белый цвет — унаследованное значение не участвует в каскаде наравне с
   явно указанным, даже низкоспецифичным. Без этой строки заголовок постера
   был тёмно-почти-чёрным на зелёном фоне («чёрный на зелёном, страшно»). */
.poster h2{margin:0;font-size:clamp(24px,2.6vw,38px);line-height:1.1;letter-spacing:-.03em;text-wrap:balance;color:inherit}
.poster p{margin:0;font-size:16px;opacity:.92;max-width:48ch}
.poster .btn-primary{background:var(--color-neutral-100);color:var(--color-accent-800)}
.poster .btn-primary:hover{background:var(--color-accent-100)}
.poster .btn-secondary{border-color:color-mix(in srgb,#f8f4f4 65%,transparent);color:var(--color-neutral-100)}
.poster .btn-secondary:hover{background:color-mix(in srgb,#f8f4f4 18%,transparent)}
.poster .p-acts{display:flex;gap:var(--space-2);flex-wrap:wrap;margin-top:var(--space-4)}

/* футер */
.ft{margin-top:auto;background:var(--color-neutral-100);border-top:var(--edge)}
.ft a{color:inherit;text-decoration:none;cursor:pointer}
.ft a:hover{color:var(--color-accent)}
.ft-nav{display:grid;grid-template-columns:minmax(0,3fr) repeat(4,minmax(0,2fr));gap:var(--space-6);padding-top:var(--space-8);padding-bottom:var(--space-8)}
.ft-brand p{margin:var(--space-4) 0 0;font-size:13px;color:var(--ink-55);max-width:36ch}
.ft-brand .ft-soc{display:flex;gap:var(--space-2);margin-top:var(--space-4)}
.ft-col h6{margin:0 0 var(--space-3);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--color-accent)}
.ft-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.ft-col li a{font-size:14px}
.ft-btm{border-top:var(--hair);background:var(--color-bg)}
.ft-btm .shell{display:flex;flex-wrap:wrap;gap:var(--space-4);justify-content:space-between;padding-top:var(--space-4);padding-bottom:var(--space-4);font-size:12px;color:var(--ink-55)}
.ft-btm p{margin:0;max-width:92ch}
.ft-legal{display:flex;gap:var(--space-4);flex-wrap:wrap}

/* адаптив */
@media (max-width:1100px){
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-w{grid-template-columns:minmax(0,1fr)}
  .tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ft-nav{grid-template-columns:repeat(2,minmax(0,1fr))}
  .det{grid-template-columns:minmax(0,1fr)}
  .rank{grid-template-columns:48px minmax(0,1fr) minmax(88px,1fr) auto}
  .rank .rank-hide{display:none}
}
@media (max-width:860px){
  .shell{padding:0 var(--space-4)}
  .hd-strip .shell{gap:var(--space-4)}
  .hd-strip .tick:nth-child(n+4){display:none}
  .nv{display:none}
  .burger{display:grid}
  .mob.open{display:block}
  .search{display:none}
  .hd-acts .btn{display:none}
  .hero{grid-template-columns:minmax(0,1fr);gap:var(--space-6)}
  .hero-meta{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-3,.grid-2,.grid-4{grid-template-columns:minmax(0,1fr)}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .poster .shell{grid-template-columns:minmax(0,1fr);gap:var(--space-6)}
  .sec-head{flex-direction:column;align-items:flex-start;gap:var(--space-3)}
  .form-row{grid-template-columns:minmax(0,1fr)}
  .news li{grid-template-columns:minmax(0,1fr);gap:4px}
  .rank{grid-template-columns:40px minmax(0,1fr);row-gap:var(--space-2)}
  .rank .rank-c,.rank .btn{display:none}
  .met-v{font-size:30px}
}

/* ─── совместимость с Bootstrap, который грузится раньше ──────────────
   Правки минимальные и точечные: только там, где бутстрап перебивает
   перенесённые классы. Сам перенос выше не трогаем. */
.search kbd{background:transparent;color:var(--ink-55);border-radius:0;font-size:10px;line-height:1.4}
/* Раньше здесь стояло border-radius:0 (квадратные кнопки по всему сайту —
   в шапке, футере, карточках организаций, рейтинге, бонусах, промо-блоке,
   геро). Возвращаем то же скругление, что у остальных кнопок. */
.hd .btn,.ft .btn,.org-acts .btn,.rank .btn,.bon-ft .btn,.poster .btn,.hero-cta .btn{border-radius:var(--r-sm)}
.org-nm h4 a,.rank-who b a{color:inherit;text-decoration:none}
.org-nm h4 a:hover,.rank-who b a:hover{color:var(--color-accent)}
.tile b,.tile{text-decoration:none}
.page-full{display:block}
.page-content{padding-top:var(--space-6);padding-bottom:var(--space-8)}
.ft-soc .btn{flex:none}
/* Легаси-заголовок .section-title (страницы, не входившие в перенос) —
   приводим к типографике референса, чтобы не выбивался. */
.section-title{font-family:var(--font-heading);font-weight:600;font-size:clamp(24px,2.4vw,32px);letter-spacing:-.025em;margin:0 0 var(--space-4);display:flex;align-items:center;gap:var(--space-3)}
.section-title::before{content:"";display:block;width:4px;height:1em;background:var(--color-accent);flex:none}
/* .content-card на непереносившихся страницах — плоская карточка вместо скруглённой */
.content-card{background:var(--card);border:var(--hair);border-radius:var(--r-md);padding:var(--space-4)}

/* .sort/.pager в референсе описаны для <button>; у нас это ссылки и
   пагинатор Laravel (bootstrap-разметка) — даём им тот же вид. */
.sort a{appearance:none;height:40px;border:0;background:transparent;font-family:var(--font-heading);font-weight:500;font-size:14px;color:inherit;padding:0 14px;cursor:pointer;display:inline-flex;align-items:center;text-decoration:none}
.sort a + a{border-left:1px solid var(--color-neutral-400)}
.sort a.on{background:var(--color-accent);color:var(--color-neutral-100)}
.sort a:not(.on):hover{background:var(--warm)}

.pagination{display:flex;gap:var(--space-2);align-items:center;padding:var(--space-6) 0;list-style:none;margin:0;flex-wrap:wrap}
.pagination .page-item{display:block}
.pagination .page-link{min-width:40px;height:40px;border:1px solid var(--color-neutral-400);background:var(--card);font-family:var(--font-heading);font-weight:500;font-size:14px;color:inherit;display:inline-flex;align-items:center;justify-content:center;padding:0 10px;border-radius:0;text-decoration:none;box-shadow:none}
.pagination .page-item.active .page-link{background:var(--color-accent);color:var(--color-neutral-100);border-color:var(--color-accent)}
.pagination .page-item:not(.active) .page-link:hover{background:var(--warm)}
.pagination .page-item.disabled .page-link{opacity:.45}

/* Заголовки в референсе идут без вертикальной полосы — убираем её. */
.section-title::before{display:none}

/* ─── ИКОНКИ И ЛОГОТИП (наш слой поверх переноса) ───────────────────── */

/* Крупная марка логотипа — по просьбе: «ДБ» не мелкими. */
.logo-mark-lg{width:56px;height:56px}
.logo-mark-lg span{font-size:26px;letter-spacing:-.05em}
.logo-mark-lg::after{height:5px}
.logo{gap:13px}
.logo-word b{font-size:24px}
@media (max-width:860px){.logo-mark-lg{width:48px;height:48px}.logo-mark-lg span{font-size:22px}.logo-word b{font-size:21px}}

/* Иконки в навигации */
.nv-row a i,.nv-row button i.bi{font-size:15px;color:var(--color-accent);line-height:1}
.nv-row .on i.bi{color:var(--color-accent)}

/* Иконки в мега-меню */
.mega-lnk{display:inline-flex;align-items:center;gap:9px;min-width:0}
.mega-lnk i.bi{font-size:15px;color:var(--color-accent);flex:none}

/* Плитки направлений: иконка + номер в одной строке */
.tile-top{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2)}
.tile-top i.bi{font-size:24px;color:var(--color-accent);line-height:1}
.tile:hover .tile-top i.bi{color:var(--color-accent-700)}

/* Иконки в строках характеристик карточки */
.org-specs li span{display:inline-flex;align-items:center;gap:8px}
.org-specs li span i.bi{font-size:14px;color:var(--color-accent);flex:none;opacity:.85}

/* Иконки в тегах */
.tag{display:inline-flex;align-items:center;gap:6px}
.tag i.bi{font-size:12px;line-height:1}

/* Иконки на кнопках */
.btn i.bi{font-size:15px;line-height:1;flex:none}
.org-acts .btn i.bi{opacity:.9}

/* Иконки в футере */
.ft-col li a{display:inline-flex;align-items:center;gap:9px}
.ft-col li a i.bi{font-size:14px;color:var(--color-accent);flex:none;opacity:.85}
.ft-soc .btn i.bi{font-size:15px}

/* Иконка типа в шапке карточки бонуса */
.bon-hero .k{display:inline-flex;align-items:center;gap:7px}
.bon-hero .k i.bi{font-size:13px;opacity:.9}

/* ════════════════════════════════════════════════════════════════════
   ТЕМА v2 — «мягкая», по образцу banki.ru.

   Присланный референс (Modernist) — намеренно плоский: нулевые радиусы,
   серые волосяные линии вместо теней, подписи по 10–11px, полупрозрачный
   текст. Вживую это читается жёстко и старомодно, поэтому здесь он
   перенастраивается: скругления, белые карточки и поля, мягкие тени
   вместо линий, крупнее мелкий текст, выше контраст.

   Блоки выше не трогаем — это перенос макета. Все отличия собраны здесь,
   чтобы их можно было увидеть одним куском и при желании откатить.
   ════════════════════════════════════════════════════════════════════ */

:root{
  /* Скругления */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-pill:999px;
  --radius-sm:8px; --radius-md:12px; --radius-lg:16px;

  /* Поверхности: страница — холодный светлый фон, карточки — чистый белый */
  --color-bg:#f4f6f9;
  --card:#ffffff;
  --warm:#eef7f2;

  /* Границы почти невидимые: работу линий берут на себя тени */
  --hair:1px solid #e8ecf1;
  --edge:1px solid #e2e7ee;
  --color-divider:#e2e7ee;
  --color-neutral-300:#e8ecf1;
  --color-neutral-400:#d4dae3;

  /* Текст: вместо полупрозрачного — сплошные цвета с нормальным контрастом.
     Прежний ink-55 на белом давал ~3:1 и читался плохо. */
  --ink-55:#5c6b7a;
  --ink-70:#3d4a57;
  --color-text:#1a2029;

  --shadow-sm:0 1px 2px rgba(16,32,53,.06), 0 1px 3px rgba(16,32,53,.04);
  --shadow-md:0 2px 8px rgba(16,32,53,.08), 0 1px 3px rgba(16,32,53,.04);
  --shadow-lg:0 8px 28px rgba(16,32,53,.12);

  --ctl:40px;
}

/* ─── Кнопки: ниже, компактнее, скруглённые, текст по центру ───────── */
.btn{
  height:var(--ctl); padding:0 18px; border-radius:var(--r-sm);
  font-size:14px; font-weight:600; letter-spacing:0;
  justify-content:center; text-align:center;
  border:1px solid transparent; transition:background .15s, border-color .15s, color .15s;
}
/* Мы переиспользуем родные имена классов Bootstrap (.btn-primary/.btn-secondary),
   а не только их внешний вид — вместе с классом подключается и набор
   CSS-переменных --bs-btn-*, которые задаёт САМ Bootstrap для СВОЕЙ
   расцветки (.btn-secondary у Bootstrap — сплошная серая кнопка, поэтому
   --bs-btn-color/--bs-btn-hover-color/--bs-btn-active-color у него #fff).
   Наши правила ниже перекрывают background/border/color напрямую, но
   .btn:hover, .btn.active, .btn-check:checked+.btn и другие состояния
   в bootstrap.min.css берут цвет из этих переменных, а не из наших
   свойств — на них наш color не действует, и текст на hover/active
   становится белым Bootstrap-белым поверх нашего светлого фона
   («ховер белый»). Переопределяем сами переменные, а не только видимые
   свойства — тогда все состояния (не только :hover) берут наш цвет. */
.btn-primary{
  --bs-btn-color:#fff; --bs-btn-hover-color:#fff; --bs-btn-active-color:#fff; --bs-btn-disabled-color:#fff;
  --bs-btn-bg:var(--color-accent); --bs-btn-hover-bg:var(--color-accent-600); --bs-btn-active-bg:var(--color-accent-700);
  --bs-btn-border-color:var(--color-accent); --bs-btn-hover-border-color:var(--color-accent-600); --bs-btn-active-border-color:var(--color-accent-700);
  background:var(--color-accent); color:#fff; box-shadow:0 1px 2px rgba(18,145,91,.25);
}
.btn-primary:hover{background:var(--color-accent-600)}
.btn-secondary{
  --bs-btn-color:var(--color-text); --bs-btn-hover-color:var(--color-text); --bs-btn-active-color:var(--color-text); --bs-btn-disabled-color:var(--color-text);
  --bs-btn-bg:#fff; --bs-btn-hover-bg:#f4f6f9; --bs-btn-active-bg:#e9edf2;
  --bs-btn-border-color:#d4dae3; --bs-btn-hover-border-color:#b9c3cf; --bs-btn-active-border-color:#b9c3cf;
  background:#fff; border-color:#d4dae3; color:var(--color-text);
}
.btn-secondary:hover{background:#f4f6f9; border-color:#b9c3cf}
.btn-ghost{background:transparent; color:var(--color-accent); padding:0 10px}
/* Было: бледно-зелёный фон при наведении + зелёный текст — на пределе
   читаемости, текст будто «пропадал». Заливаем сплошным акцентом. */
.btn-ghost:hover{background:var(--color-accent); color:#fff}
.btn-sm{height:32px; padding:0 12px; font-size:13px}
/* Никаких подпрыгиваний при наведении */
.btn:hover, a.content-card:hover, .org:hover, .bon:hover, .tile:hover, .w:hover{transform:none}

/* ─── Карточки: белые, скруглённые, с мягкой тенью вместо рамки ───── */
.w, .org, .bon, .met, .content-card, .form-box, .card{
  background:#fff; border:1px solid #e8ecf1; border-radius:var(--r-md);
  box-shadow:var(--shadow-sm);
}
.org{overflow:hidden}
.org:hover, .bon:hover{box-shadow:var(--shadow-md); border-color:#d7dee7}
.w-accent{border-color:var(--color-accent-200); box-shadow:var(--shadow-sm)}
.w-hd{border-bottom:1px solid #eef1f5; padding:14px 18px}
.w-bd{padding:18px}
.w-ft{border-top:1px solid #eef1f5; padding:12px 18px; background:#fafbfc;
      border-radius:0 0 var(--r-md) var(--r-md)}

/* ─── Поля ввода: белый фон, скругление, заметный фокус ───────────── */
.input, .form-control, .form-select, input[type=text], input[type=email],
input[type=search], input[type=tel], input[type=url], input[type=number], textarea, select{
  background:#fff !important; border:1px solid #d4dae3 !important;
  border-radius:var(--r-sm) !important; min-height:var(--ctl);
  padding:0 14px; font-size:14px; color:var(--color-text);
  transition:border-color .15s, box-shadow .15s;
}
textarea, textarea.form-control{padding:10px 14px; min-height:110px; line-height:1.5}
.input:hover, .form-control:hover{border-color:#b9c3cf !important}
.input:focus, .form-control:focus, .form-select:focus, textarea:focus, select:focus{
  border-color:var(--color-accent) !important; outline:none;
  box-shadow:0 0 0 3px rgba(18,145,91,.14) !important;
}
.field > label, .form-label{font-size:13px; font-weight:500; color:var(--ink-70); margin-bottom:6px}

/* ─── Поиск в шапке ───────────────────────────────────────────────── */
.search{border:1px solid #d4dae3; border-radius:var(--r-sm); background:#fff; height:var(--ctl)}
.search:focus-within{border-color:var(--color-accent); box-shadow:0 0 0 3px rgba(18,145,91,.14)}
.search input{font-size:14px}
.search kbd{border:1px solid #e2e7ee; border-radius:6px; font-size:11px; padding:3px 8px}

/* ─── Шапка: убираем жирную нижнюю линию ──────────────────────────── */
.hd{background:#fff; border-bottom:1px solid #e8ecf1; box-shadow:0 1px 2px rgba(16,32,53,.04)}
.hd-strip{background:var(--warm); border-bottom:1px solid #e3efe8}
.hd-strip .shell{height:36px}
.tick{font-size:12.5px}
.nv{border-top:1px solid #eef1f5; background:#fff}
.nv-row a, .nv-row button{padding:13px 16px; font-size:14.5px; border-radius:0}
.nv-row a:hover, .nv-row button:hover{background:#f4f6f9; color:var(--color-accent-700)}
.nv-row .on{box-shadow:inset 0 -3px 0 var(--color-accent)}

/* ─── Мега-меню ───────────────────────────────────────────────────── */
.mega{border-radius:0 0 var(--r-md) var(--r-md); box-shadow:var(--shadow-lg);
      border:1px solid #e8ecf1; border-top:0}
.mega-col{border-left:1px solid #eef1f5}
.mega-col li a{border-bottom:1px solid #f2f5f8; font-size:14px; padding:9px 0}
.mega-col h6{font-size:12px; letter-spacing:.06em}

/* ─── Плитки направлений: отдельные карточки вместо сетки-таблицы ─── */
.tiles{border:0; gap:12px}
.tile{border:1px solid #e8ecf1; border-radius:var(--r-md); background:#fff;
      box-shadow:var(--shadow-sm); min-height:120px; transition:box-shadow .15s, border-color .15s}
.tile:hover{background:#fff; box-shadow:var(--shadow-md); border-color:var(--color-accent-200)}
.tile b{font-size:15px}
.tile span.cnt{font-size:12.5px; color:var(--ink-55)}

/* ─── Строки характеристик и рейтинга ─────────────────────────────── */
.org-t{border-bottom:1px solid #eef1f5; padding:16px 18px}
.org-logo{border-radius:10px}
.org-specs li{border-bottom:1px solid #f2f5f8; padding:10px 18px; font-size:13.5px}
.org-specs li span{color:var(--ink-55)}
.org-tags{padding:12px 18px 0}
.org-acts{border-top:1px solid #eef1f5; padding:14px 18px; gap:10px}
.rank{border-bottom:1px solid #f2f5f8; padding:14px 18px}
.rank:hover{background:#fafbfc}
.rank-c span{font-size:12px; letter-spacing:.02em; text-transform:none; color:var(--ink-55)}
.bar{border-radius:var(--r-pill); height:6px; background:#eef1f5}
.bar i{border-radius:var(--r-pill)}

/* ─── Бонусы ──────────────────────────────────────────────────────── */
.bon{overflow:hidden}
.bon-hero{border-radius:var(--r-md) var(--r-md) 0 0; padding:18px}
.bon-hero .k{font-size:12px; letter-spacing:.06em}
.bon-ft{border-top:1px solid #eef1f5; font-size:12.5px; padding:12px 18px}

/* ─── Чипы и сортировка: пилюли ───────────────────────────────────── */
.chip{border-radius:var(--r-pill); border:1px solid #d4dae3; background:#fff;
      height:38px; font-size:14px; padding:0 16px}
.chip:hover{border-color:var(--color-accent); background:var(--color-accent-100)}
.chip.on{border-color:var(--color-accent); box-shadow:0 1px 2px rgba(18,145,91,.2)}
.chip i{font-size:12px}
.sort{border:1px solid #d4dae3; border-radius:var(--r-pill); overflow:hidden; background:#fff}
.sort a{height:38px; font-size:14px}
.sort a + a{border-left:1px solid #e8ecf1}
.toolbar .count{font-size:13.5px}

/* ─── Пагинация ───────────────────────────────────────────────────── */
.pagination .page-link{border-radius:var(--r-sm) !important; border-color:#d4dae3;
                       min-width:40px; height:40px; font-size:14px}
.pagination .page-item.active .page-link{box-shadow:0 1px 2px rgba(18,145,91,.25)}

/* ─── Таблицы: без жирных линий ───────────────────────────────────── */
.table th{border-bottom:1px solid #e2e7ee; font-size:12.5px; color:var(--ink-55);
          text-transform:none; letter-spacing:0; font-weight:600; padding:12px 14px}
.table td{border-bottom:1px solid #f2f5f8; padding:12px 14px; font-size:14px}
.table tbody tr:hover{background:#fafbfc}

/* ─── Мелкий текст: поднимаем до читаемого ────────────────────────── */
.kicker{font-size:12px; letter-spacing:.08em}
.met-k, .w-tag, .org-rate span, .ft-col h6{font-size:12px; letter-spacing:.05em}
.crumbs{font-size:13px; border-bottom:0; padding:14px 0}
.news time{font-size:12px}
.news a{font-size:14.5px}
.lede{font-size:16px; color:var(--ink-70)}
.text-muted{color:var(--ink-55)}

/* ─── Футер ───────────────────────────────────────────────────────── */
.ft{background:#fff; border-top:1px solid #e8ecf1}
.ft-btm{background:#fafbfc; border-top:1px solid #eef1f5}
.ft-col li a{font-size:14px}
.ft-soc .btn{border-radius:var(--r-sm)}

/* ─── Постер ──────────────────────────────────────────────────────── */
.poster{border-radius:0}
.poster .btn-primary{background:#fff; color:var(--color-accent-800)}
.poster .btn-secondary{background:transparent; border-color:rgba(255,255,255,.5); color:#fff}
.poster .btn-secondary:hover{background:rgba(255,255,255,.14)}

/* ─── Прочее ──────────────────────────────────────────────────────── */
.tag{border-radius:var(--r-pill); padding:5px 11px; font-size:12.5px}
.det-top .org-logo{border-radius:14px}
.faq details{border:1px solid #e8ecf1; border-radius:var(--r-md); background:#fff; margin-bottom:10px}
.faq summary{padding:14px 18px; font-size:15px}

/* ─── Пустое состояние ────────────────────────────────────────────── */
.empty{background:#fff; border:1px solid #e8ecf1; border-radius:var(--r-md);
       box-shadow:var(--shadow-sm); padding:48px 24px; text-align:center;
       display:flex; flex-direction:column; align-items:center; gap:10px}
.empty-ico{width:56px; height:56px; border-radius:50%; background:var(--color-accent-100);
           color:var(--color-accent); display:grid; place-items:center; font-size:24px; margin-bottom:4px}
.empty b{font-family:var(--font-heading); font-weight:600; font-size:17px; color:var(--color-text)}
.empty p{margin:0; font-size:14px; color:var(--ink-55); max-width:52ch}
.empty .btn{margin-top:8px}

/* Легаси-хиро на страницах вне редизайна — раньше был тёмный градиент
   из донорской тёмной темы с тёмным же текстом поверх (заголовок был
   практически невидим). Приводим к общей светлой карточке. */
.hero-section{padding:20px 24px; margin-bottom:20px;
              background:var(--card,#fff); border:var(--hair,1px solid #e8ecf1);
              border-radius:var(--r-lg,16px); box-shadow:var(--shadow-sm)}
.hero-title{font-family:var(--font-heading); font-weight:600;
            font-size:clamp(26px,2.6vw,34px); letter-spacing:-.02em; margin:0 0 6px; color:var(--color-text)}
.hero-subtitle{font-size:16px; color:var(--ink-70); margin:0}

/* Инициалы в кружке рейтинга: правило .rank-who span из макета красило и
   логотип тоже — получались серые буквы на зелёном (контраст ~1.6:1).
   Возвращаем явные цвета. */
.rank-who .org-logo{color:var(--color-accent-800); font-size:14px}
.rank-who .org-logo-a{color:#fff}
.org-logo{color:var(--color-accent-800)}
.org-logo-a{color:#fff}

/* ─── Плашки инициалов вместо логотипов ───────────────────────────────
   Для организаций без реального логотипа (см. Organization::getLogoAttribute —
   часть каталога логотипы уже имеет, часть нет). Одинаковые квадраты
   делают списки неразличимыми, поэтому цвет плашки выводится из
   названия — устойчиво, у организации он всегда один и тот же. */
.org-logo[data-p]{color:#fff}
.org-logo[data-p="1"]{background:#2f6f4f}
.org-logo[data-p="2"]{background:#3a6ea5}
.org-logo[data-p="3"]{background:#6b5b95}
.org-logo[data-p="4"]{background:#a2673f}
.org-logo[data-p="5"]{background:#4a7c7e}
.org-logo[data-p="6"]{background:#8a5a72}
.org-logo[data-p="7"]{background:#55606e}
.org-logo[data-p="8"]{background:#7a7145}
.rank-who .org-logo[data-p]{color:#fff}

/* ─── .btn-lg: чистый бутстраповский размер (padding .5rem 1rem,
   font-size 1.25rem) нигде не был перекрыт нашей системой — на странице
   организации кнопка «Оформить у …» и кнопки скачивания приложения
   выходили заметно крупнее и грубее всех остальных кнопок сайта. ───── */
.btn-lg{height:48px; padding:0 22px; font-size:15px; font-weight:600; border-radius:var(--r-sm); line-height:1.2}

/* ─── Карточка бонуса кликабельна целиком, а не только по ссылке
   «Получить →» — весь блок ведёт туда же, куда и кнопка (паттерн
   «stretched link»: сама кнопка остаётся в потоке, псевдоэлемент
   растягивается на ближайшего позиционированного предка — .bon). ───── */
.bon{position:relative}
.bon-ft .btn::after{content:""; position:absolute; inset:0; z-index:1}

/* Строка рейтинга — «Профиль» и имя ведут на одну и ту же страницу,
   поэтому вся строка тоже кликабельна тем же приёмом. */
.rank{position:relative}
.rank .btn-secondary::after{content:""; position:absolute; inset:0; z-index:1}