MediaWiki:Common.css: відмінності між версіями

18 024 байти додано , Учора о 02:21

Картки: повна консолідація (заголовки→ink, тіні→shadow-токени, CTA/meta/лінки→токени)

Admin

Бюрократи, Адміністратори інтерфейсу, Адміністратори

2206

редагувань

MediaWiki:Common.css: відмінності між версіями

MediaWiki:Common.css (переглянути вихідний код)

Версія за 02:21, 3 серпня 2026

@@ Рядок 15: / Рядок 15: @@
    display: flex;
    flex-direction: column;
-   background: #fff;
+   background: var(--k-bg);
-   border: 1px solid #eef1f6;
+   border: 1px solid var(--k-border);
-   border-radius: 14px;
+   border-radius: var(--k-radius-md);
    overflow: hidden;
-   box-shadow: 0 1px 2px rgba(0,0,0,.03), 0 1px 8px rgba(0,0,0,.04);
+   box-shadow: var(--k-shadow-1);
    transition: transform .15s ease, box-shadow .15s ease;
 }
 .place-card:hover {
    transform: translateY(-2px);
-   box-shadow: 0 2px 4px rgba(0,0,0,.04), 0 6px 18px rgba(0,0,0,.08);
+   box-shadow: var(--k-shadow-2);
 }
 .place-card__img {
@@ Рядок 40: / Рядок 40: @@
 .place-card__body { padding: 14px 18px 18px; }
 .place-card__title { font-size: 17px; font-weight: 700; margin: 0 0 8px; line-height: 1.25; }
-.place-card__title a { color: #111827; text-decoration: none; }
+.place-card__title a { color: var(--k-ink); text-decoration: none; }
-.place-card__title a:hover { color: #2a6df4; }
+.place-card__title a:hover { color: var(--k-accent); }
-.place-card__meta { font-size: 13px; color: #6b7280; margin: 0 0 10px; line-height: 1.5; }
+.place-card__meta { font-size: 13px; color: var(--k-text-muted); margin: 0 0 10px; line-height: 1.5; }
-.place-card__desc { font-size: 14px; line-height: 1.5; color: #374151; }
+.place-card__desc { font-size: 14px; line-height: 1.5; color: var(--k-text-secondary); display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
+/* Whole card clickable (stretched link) */
+.place-card { position: relative; cursor: pointer; }
+.place-card__title a::after { content:""; position:absolute; top:0; left:0; right:0; bottom:0; z-index:1; }
+.place-card__meta a { position: relative; z-index:2; }
+/* Place detail view (на власній сторінці місця) */
+.place-detail { max-width: 760px; }
+.place-detail__img img { display:block; max-width:100%; height:auto; border-radius:14px; margin:4px 0 16px; }
+.place-detail__meta { font-size:14px; color:var(--k-text-muted); line-height:1.7; margin:0 0 14px; }
+.place-detail__desc { font-size:16px; line-height:1.65; color:var(--k-text-secondary); }
+.place-detail__desc--empty { color:var(--k-text-hint); font-style:italic; }
 /* Grid: 2 columns desktop, 1 column mobile */
@@ Рядок 275: / Рядок 286: @@
 }
-body:is(.page-🇷🇴_Румунія) .mw-page-container-inner {
+body:is(.page-🇷🇴_Румунія, .page-has-hero) .mw-page-container-inner {
    position: relative;
    padding-top: calc(var(--page-hero-height) + 24px); /* hero + top offset (12) + bottom gap (12) — симетрично */
@@ Рядок 294: / Рядок 305: @@
 /* Прибрати "Матеріал з Країнопедії" та інший pre-content шум, який створює
     асиметрію між верхнім (24px) і нижнім (виглядав ~70px) відступом hero. */
-body:is(.page-🇷🇴_Румунія) .vector-body-before-content,
+body:is(.page-🇷🇴_Румунія, .page-has-hero) .vector-body-before-content,
-body:is(.page-🇷🇴_Румунія) #contentSub {
+body:is(.page-🇷🇴_Румунія, .page-has-hero) #contentSub {
    display: none !important;
 }
-body:is(.page-🇷🇴_Румунія) #mw-content-text > .mw-parser-output > :first-child {
+body:is(.page-🇷🇴_Румунія, .page-has-hero) #mw-content-text > .mw-parser-output > :first-child {
    margin-top: 0 !important;
 }
 /* Vector-2022 додає власні top-paddings на content-обгортки — занулюємо
     щоб body-текст починався одразу під padding-top контейнера. */
-body:is(.page-🇷🇴_Румунія) main#content.mw-body,
+body:is(.page-🇷🇴_Румунія, .page-has-hero) main#content.mw-body,
-body:is(.page-🇷🇴_Румунія) #bodyContent.vector-body,
+body:is(.page-🇷🇴_Румунія, .page-has-hero) #bodyContent.vector-body,
-body:is(.page-🇷🇴_Румунія) #mw-content-text,
+body:is(.page-🇷🇴_Румунія, .page-has-hero) #mw-content-text,
-body:is(.page-🇷🇴_Румунія) #mw-content-text > .mw-parser-output {
+body:is(.page-🇷🇴_Румунія, .page-has-hero) #mw-content-text > .mw-parser-output {
    padding-top: 0 !important;
    margin-top: 0 !important;
 }
-body:is(.page-🇷🇴_Румунія) .vector-page-titlebar {
+body:is(.page-🇷🇴_Румунія, .page-has-hero) .vector-page-titlebar {
    position: absolute;
    top: 12px;
@@ Рядок 331: / Рядок 342: @@
 }
-body:is(.page-🇷🇴_Румунія) .vector-page-titlebar .firstHeading {
+body:is(.page-🇷🇴_Румунія, .page-has-hero) .vector-page-titlebar .firstHeading {
    text-align: center;
    font-size: 40px;
@@ Рядок 345: / Рядок 356: @@
 /* Mobile: коротший hero */
 @media screen and (max-width: 720px) {
-   body:is(.page-🇷🇴_Румунія) {
+   body:is(.page-🇷🇴_Румунія, .page-has-hero) {
      --page-hero-height: 220px;
    }
-   body:is(.page-🇷🇴_Румунія) .vector-page-titlebar {
+   body:is(.page-🇷🇴_Румунія, .page-has-hero) .vector-page-titlebar {
      padding: 0 16px;
    }
-   body:is(.page-🇷🇴_Румунія) .vector-page-titlebar .firstHeading {
+   body:is(.page-🇷🇴_Румунія, .page-has-hero) .vector-page-titlebar .firstHeading {
      font-size: 28px;
    }
@@ Рядок 358: / Рядок 369: @@
 /* MinervaNeue — hero для сторінок країн (картинка + заголовок, 60vh, з боковими відступами).
     Верхній і нижній отступи рівні (12px). */
-.skin-minerva.page-🇷🇴_Румунія .pre-content.heading-holder {
+:is(.skin-minerva.page-🇷🇴_Румунія, .skin-minerva.page-has-hero) .pre-content.heading-holder {
    position: relative;
    margin: 12px;
@@ Рядок 373: / Рядок 384: @@
    overflow: hidden;
 }
-.skin-minerva.page-🇷🇴_Румунія .pre-content.heading-holder .page-heading {
+:is(.skin-minerva.page-🇷🇴_Румунія, .skin-minerva.page-has-hero) .pre-content.heading-holder .page-heading {
    position: relative;
    z-index: 1;
@@ Рядок 380: / Рядок 391: @@
    text-align: center;
 }
-.skin-minerva.page-🇷🇴_Румунія .pre-content.heading-holder .firstHeading {
+:is(.skin-minerva.page-🇷🇴_Румунія, .skin-minerva.page-has-hero) .pre-content.heading-holder .firstHeading {
    font-family: "Manrope", sans-serif;
    font-size: 36px;
@@ Рядок 392: / Рядок 403: @@
    letter-spacing: -0.01em;
 }
-.skin-minerva.page-🇷🇴_Румунія .pre-content.heading-holder .tagline {
+:is(.skin-minerva.page-🇷🇴_Румунія, .skin-minerva.page-has-hero) .pre-content.heading-holder .tagline {
    display: none;
 }
 /* На зовсім малих екранах — трохи менший заголовок */
 @media screen and (max-width: 360px) {
-   .skin-minerva.page-🇷🇴_Румунія .pre-content.heading-holder .firstHeading {
+   :is(.skin-minerva.page-🇷🇴_Румунія, .skin-minerva.page-has-hero) .pre-content.heading-holder .firstHeading {
      font-size: 30px;
    }
+}
+/* Minerva city hero — таб-бар (Стаття/Обговорення) і панель дій (зірка/
+   історія/ред.) у Minerva сидять усередині heading-holder як flex-сусіди
+   заголовка й тиснуть його. Ховаємо таб-бар, а панель дій кладемо на низ
+   hero по центру білими іконками — заголовок тоді центрується сам. */
+.skin-minerva.page-has-hero .minerva__tab-container { display: none !important; }
+.skin-minerva.page-has-hero .pre-content.heading-holder .page-actions-menu {
+  position: absolute;
+  bottom: 10px;
+  left: 0;
+  right: 0;
+  margin: 0;
+  border: 0 !important;
+  z-index: 2;
+  display: flex;
+  justify-content: center;
+  background: transparent;
+  filter: brightness(0) invert(1) drop-shadow(0 1px 3px rgba(0, 0, 0, 0.45));
+}
+/* Minerva city hero — нижчий за country (60vh). Банер міста широкий і
+   тонкий (≈4:1), тож менша висота = менше вертикального зуму й бокового
+   кропу. Country (page-🇷🇴_Румунія) лишається 60vh. */
+.skin-minerva.page-has-hero .pre-content.heading-holder {
+  height: 200px !important;
+  min-height: 0 !important;
 }
@@ Рядок 409: / Рядок 447: @@
 }
-/* Сховати tabs "Обговорення" і "Головна" з UI */
+/* Main Menu (Головне меню, лівий sidebar) — те саме: ховаємо кнопки
-#ca-talk, #ca-nstab-main { display: none !important; }
+   "сховати" / "перемістити на бічну панель", меню завжди залишається. */
-/* "Обговорення" в персональному меню (User_talk:current_user) */
+[data-event-name^="pinnable-header.vector-main-menu."] {
-#pt-mytalk { display: none !important; }
+  display: none !important;
-/* Sticky header (з'являється при скролі) — дублі іконок талку та watch-зірки */
+}
-#ca-talk-sticky-header,
-#ca-watchstar-sticky-header { display: none !important; }
-/* Toolbar (Читати / Редагувати / ...) переміщається JS всередину hero
+/* Vector-2022 хардкодом ховає sidebar landmark для незалогінених
-    і ставиться на 24px від нижнього краю, по центру */
+   (vector-feature-main-menu-pinned-disabled). Перевизначаємо — sidebar
-body:is(.page-🇷🇴_Румунія) .vector-page-titlebar .vector-page-toolbar {
+   показуємо завжди, JS переносить меню в pinned-container. */
-   position: absolute;
+html.vector-feature-main-menu-pinned-disabled
+  .vector-main-menu-container .vector-main-menu-landmark {
+  display: block !important;
+}
+html.vector-feature-main-menu-pinned-disabled
+  #vector-main-menu-dropdown {
+  display: none !important;
+}
+/* Чистимо лівий sidebar: ховаємо заголовок "Головне меню" з його роздільником,
+   прибираємо border-лінії на menu-heading, додаємо відступ між "Міста" і списком */
+#vector-main-menu-pinned-container .vector-main-menu-pinnable-header {
+  display: none !important;
+}
+#vector-main-menu-pinned-container .vector-main-menu {
+  margin-top: 0 !important;
+  border: 0 !important;
+  box-shadow: none !important;
+  background-color: transparent !important;
+}
+#vector-main-menu-pinned-container .vector-menu-heading {
+  border-top: 0 !important;
+  border-bottom: 0 !important;
+}
+#p-cities .vector-menu-heading {
+  margin-bottom: 8px !important;
+}
+/* Блок "Інструменти" (#p-tb) — лише для адмінів.
+   Body отримує клас usergroup-sysop через Common.js. */
+/* Меню «Інструменти» (page-tools) приховане всюди для всіх */
+#p-tb,
+#vector-page-tools-dropdown,
+#vector-page-tools-pinned-container,
+#vector-page-tools-unpinned-container,
+.vector-page-tools-landmark { display: none !important; }
+/* Сховати tabs "Обговорення" і "Головна" з UI */
+#ca-talk, #ca-nstab-main { display: none !important; }
+/* "Обговорення" в персональному меню (User_talk:current_user) */
+#pt-mytalk { display: none !important; }
+/* Sticky header (з'являється при скролі) — дублі іконок талку та watch-зірки */
+#ca-talk-sticky-header,
+#ca-watchstar-sticky-header { display: none !important; }
+/* Toolbar (Читати / Редагувати / ...) переміщається JS всередину hero
+    і ставиться на 24px від нижнього краю, по центру */
+body:is(.page-🇷🇴_Румунія, .page-has-hero) .vector-page-titlebar .vector-page-toolbar {
+   position: absolute;
    bottom: 24px;
    left: 0;
@@ Рядок 430: / Рядок 514: @@
    justify-content: center;
 }
-body:is(.page-🇷🇴_Румунія) .vector-page-titlebar .vector-page-toolbar-container {
+body:is(.page-🇷🇴_Румунія, .page-has-hero) .vector-page-titlebar .vector-page-toolbar-container {
    width: auto !important;
    display: flex !important;
@@ Рядок 436: / Рядок 520: @@
    gap: 24px;
 }
-body:is(.page-🇷🇴_Румунія) .vector-page-titlebar .vector-page-toolbar a {
+body:is(.page-🇷🇴_Румунія, .page-has-hero) .vector-page-titlebar .vector-page-toolbar a {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
@@ Рядок 443: / Рядок 527: @@
 /* Прибрати суцільну горизонтальну лінію під toolbar (box-shadow Vector),
     лишається лише підкреслення активної вкладки */
-body:is(.page-🇷🇴_Румунія) .vector-page-titlebar .vector-page-toolbar-container {
+body:is(.page-🇷🇴_Румунія, .page-has-hero) .vector-page-titlebar .vector-page-toolbar-container {
    box-shadow: none !important;
 }
@@ Рядок 473: / Рядок 557: @@
    display: flex;
    flex-direction: column;
-   background: #fff;
+   background: var(--k-bg);
-   border: 1px solid #eef1f6;
+   border: 1px solid var(--k-border);
-   border-radius: 14px;
+   border-radius: var(--k-radius-md);
    overflow: hidden;
-   box-shadow: 0 1px 2px rgba(0,0,0,.03), 0 1px 8px rgba(0,0,0,.04);
+   box-shadow: var(--k-shadow-1);
    transition: transform .15s ease, box-shadow .15s ease;
 }
 .service-card:hover {
    transform: translateY(-2px);
-   box-shadow: 0 2px 4px rgba(0,0,0,.04), 0 6px 18px rgba(0,0,0,.08);
+   box-shadow: var(--k-shadow-2);
 }
 .service-card__body { padding: 16px 20px 18px; }
@@ Рядок 491: / Рядок 575: @@
    line-height: 1.25;
 }
-.service-card__title a { color: #111827; text-decoration: none; }
+.service-card__title a { color: var(--k-ink); text-decoration: none; }
-.service-card__title a:hover { color: #2a6df4; }
+.service-card__title a:hover { color: var(--k-accent); }
 .service-card__members {
    display: inline-block;
@@ Рядок 498: / Рядок 582: @@
    font-size: 12px;
    font-weight: 500;
-   color: #6b7280;
+   color: var(--k-text-muted);
    white-space: nowrap;
    vertical-align: middle;
@@ Рядок 505: / Рядок 589: @@
    font-size: 14px;
    line-height: 1.5;
-   color: #374151;
+   color: var(--k-text-secondary);
    margin-bottom: 12px;
 }
@@ Рядок 513: / Рядок 597: @@
    gap: 4px;
    font-size: 13px;
-   color: #4b5563;
+   color: var(--k-text-secondary);
    border-top: 1px solid #f3f4f6;
    padding-top: 10px;
@@ Рядок 524: / Рядок 608: @@
    background-size: 14px 14px;
 }
-.service-card__row a { color: #2a6df4; text-decoration: none; }
+.service-card__row a { color: var(--k-accent) !important; text-decoration: none; }
 .service-card__row a:hover { text-decoration: underline; }
-/* SVG-іконки (Heroicons solid, fill #4b5563, URL-encoded) */
+/* SVG-іконки (Heroicons solid, fill var(--k-text-secondary), URL-encoded) */
 .service-card__row--phone {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27%234b5563%27%3E%3Cpath%20fill-rule%3D%27evenodd%27%20d%3D%27M1.5%204.5a3%203%200%200%201%203-3h1.372c.86%200%201.61.586%201.819%201.42l1.105%204.423a1.875%201.875%200%200%201-.694%201.955l-1.293.97c-.135.101-.164.249-.126.352a11.285%2011.285%200%200%200%206.197%206.197c.103.038.25.009.352-.126l.97-1.293a1.875%201.875%200%200%201%201.955-.694l4.423%201.105c.834.209%201.42.959%201.42%201.82V19.5a3%203%200%200%201-3%203h-2.25C8.552%2022.5%201.5%2015.448%201.5%206.75V4.5z%27%20clip-rule%3D%27evenodd%27%2F%3E%3C%2Fsvg%3E");
@@ Рядок 546: / Рядок 630: @@
    justify-content: center;
    text-align: center;
-   background: #f8fafc;
+   background: var(--k-bg-subtle);
-   border: 2px dashed #cbd5e1;
+   border: 2px dashed var(--k-border-strong);
    box-shadow: none;
-   color: #4b5563;
+   color: var(--k-text-secondary);
    text-decoration: none;
    padding: 16px 20px 18px;
@@ Рядок 555: / Рядок 639: @@
 }
 .service-card--cta:hover {
-   border-color: #2a6df4;
+   border-color: var(--k-accent);
    background: #f0f6ff;
-   color: #2a6df4;
+   color: var(--k-accent);
    transform: translateY(-2px);
    box-shadow: none;
@@ Рядок 566: / Рядок 650: @@
    height: 36px;
    border-radius: 50%;
-   background: #fff;
+   background: var(--k-bg);
    border: 1.5px solid currentColor;
    display: flex;
@@ Рядок 584: / Рядок 668: @@
    display: block;
    font-size: 12px;
-   color: #6b7280;
+   color: var(--k-text-muted);
    margin-top: 4px;
 }
@@ Рядок 650: / Рядок 734: @@
    padding: 14px 16px 6px;
    font-family: inherit;
-   font-size: 12px;
+   font-size: 16px;
    font-weight: 700;
-   color: #72777d;
+   color: #202122;
-   text-transform: uppercase;
+   text-transform: none;
-   letter-spacing: 0.06em;
+   letter-spacing: normal;
    border: none;
    background: transparent;
+}
+/* Desktop sidebar — заголовок портлету "Міста" як рядки TOC (жирний + темний) */
+.skin-vector-2022 #p-cities .vector-menu-heading {
+  font-size: 14px;
+  font-weight: 700;
+  color: #202122;
+  text-transform: none;
+  letter-spacing: normal;
 }
 .skin-minerva .cities-drawer-section__list {
@@ Рядок 1888: / Рядок 1980: @@
    margin-top: auto;
 }
+/* ============================================================
+   Hero — ховаємо кнопки дій для анонімних (незалогінених) читачів.
+   Common.js додає body.usergroup-anon. Залогінені редактори бачать кнопки.
+   Desktop (Vector): тулбар Читати/Код/Історія всередині hero.
+   Mobile (Minerva): панель дій (мова/зірка/історія/ред.) на низу hero.
+   ============================================================ */
+body.usergroup-anon:is(.page-🇷🇴_Румунія, .page-has-hero) .vector-page-titlebar .vector-page-toolbar {
+  display: none !important;
+}
+body.usergroup-anon:is(.skin-minerva.page-🇷🇴_Румунія, .skin-minerva.page-has-hero) .pre-content.heading-holder .page-actions-menu {
+  display: none !important;
+}
+/* Hero kicker — лінк «← Країна» над заголовком міста (повернення на країну).
+   Генерується в Common.js, існує лише на сторінках міст. */
+.hero-titlewrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+}
+.hero-kicker {
+  display: inline-block;
+  color: var(--page-hero-fg, #ffffff);
+  font-size: 15px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  text-decoration: none;
+  opacity: 0.92;
+  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
+}
+.hero-kicker:hover,
+.hero-kicker:focus {
+  opacity: 1;
+  text-decoration: underline;
+}
+/* «← Назад» на звичайних внутрішніх сторінках (інжектиться Common.js). */
+.page-back-link {
+  display: block;
+  margin-bottom: 4px;
+  color: #4b5563;
+  font-size: 14px;
+  font-weight: 600;
+  text-decoration: none;
+}
+.page-back-link:hover,
+.page-back-link:focus {
+  color: #1a2240;
+  text-decoration: underline;
+}
+/* ============================================================
+   Callout-плашки — шаблони {{Увага}} / {{Порада}} / {{Нотатка з досвіду}}
+   ============================================================ */
+.callout {
+  margin: 14px 0;
+  padding: 12px 14px;
+  border-radius: 0 6px 6px 0;
+}
+.callout__icon { display: none; }
+.callout__body > :first-child { margin-top: 0; }
+.callout__body > :last-child { margin-bottom: 0; }
+.callout__label { font-weight: 700; margin-bottom: 2px; color: #202122; }
+.callout--note { background: #f3f5f8; border-left: 1px solid #3a59b8; }
+.callout--tip { background: #f2f7f5; border-left: 1px solid #1c8a45; }
+.callout--warning { background: #f8f4f3; border-left: 1px solid #d92c1c; }
+/* Картки лікарів: додаткові рядки (клініка, ціна, CNAS) */
+.service-card__row--clinic {
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27%234b5563%27%3E%3Cpath%20fill-rule%3D%27evenodd%27%20d%3D%27M11.54%2022.351l.07.04.028.016a.76.76%200%2000.723%200l.028-.015.071-.041a16.975%2016.975%200%20001.144-.742%2019.58%2019.58%200%20002.683-2.282c1.944-1.99%203.963-4.98%203.963-8.827a8.25%208.25%200%2000-16.5%200c0%203.846%202.02%206.837%203.963%208.827a19.58%2019.58%200%20002.682%202.282%2016.975%2016.975%200%20001.145.742zM12%2013.5a3%203%200%20100-6%203%203%200%20000%206z%27%20clip-rule%3D%27evenodd%27%2F%3E%3C%2Fsvg%3E");
+}
+.service-card__row--price {
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27%234b5563%27%3E%3Cpath%20d%3D%27M12%207.5a2.25%202.25%200%20100%204.5%202.25%202.25%200%20000-4.5z%27%2F%3E%3Cpath%20fill-rule%3D%27evenodd%27%20d%3D%27M1.5%204.875C1.5%203.839%202.34%203%203.375%203h17.25c1.035%200%201.875.84%201.875%201.875v9.75c0%201.036-.84%201.875-1.875%201.875H3.375A1.875%201.875%200%20011.5%2014.625v-9.75zM8.25%209.75a3.75%203.75%200%20117.5%200%203.75%203.75%200%2001-7.5%200zM18.75%209a.75.75%200%2000-.75.75v.008c0%20.414.336.75.75.75h.008a.75.75%200%2000.75-.75V9.75a.75.75%200%2000-.75-.75h-.008zM4.5%209.75A.75.75%200%20015.25%209h.008a.75.75%200%2001.75.75v.008a.75.75%200%2001-.75.75H5.25a.75.75%200%2001-.75-.75V9.75z%27%20clip-rule%3D%27evenodd%27%2F%3E%3Cpath%20d%3D%27M2.25%2018a.75.75%200%20000%201.5c5.4%200%2010.63.722%2015.6%202.075%201.19.324%202.4-.558%202.4-1.82V18.75a.75.75%200%2000-.75-.75H2.25z%27%2F%3E%3C%2Fsvg%3E");
+}
+.service-card__row--cnas {
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27%234b5563%27%3E%3Cpath%20fill-rule%3D%27evenodd%27%20d%3D%27M12.516%202.17a.75.75%200%2000-1.032%200%2011.209%2011.209%200%2001-7.877%203.08.75.75%200%2000-.722.515A12.74%2012.74%200%20002.25%209.75c0%205.942%204.064%2010.933%209.563%2012.348a.749.749%200%2000.374%200C17.686%2020.683%2021.75%2015.692%2021.75%209.75c0-1.44-.24-2.83-.678-4.128a.75.75%200%2000-.722-.515%2011.209%2011.209%200%2001-7.834-3.08zM15.53%209.53a.75.75%200%2000-1.06-1.06l-3.97%203.97-1.47-1.47a.75.75%200%2000-1.06%201.06l2%202a.75.75%200%20001.06%200l4.5-4.5z%27%20clip-rule%3D%27evenodd%27%2F%3E%3C%2Fsvg%3E");
+}/* === Країнопедія UI Kit: дизайн-токени + house-компоненти === */
+/* ЄДИНЕ ДЖЕРЕЛО ПРАВДИ. Живе в MediaWiki:Common.css (сайт) і віддзеркалюється
+   на сторінці https://nomadica.uno/uikit/ (вона вантажить цей же Common.css живим).
+   Правиш тут → міняється і сайт, і кіт. */
+:root{
+  /* — Бренд-мотив (чотири кольори смугастих банерів) — */
+  --k-brand-blue:#1070b0; --k-brand-red:#f84840; --k-brand-yellow:#f8b020; --k-brand-teal:#00b898;
+  /* — Дієві / семантичні — */
+  --k-accent:#2a6df4; --k-accent-hover:#1b57cc;
+  --k-danger:#f84840; --k-success:#00b898; --k-warning:#f8b020;
+  /* — Чорнило / текст — */
+  --k-ink:#1a2240; --k-text:#202122; --k-text-secondary:#374151; --k-text-muted:#6b7280; --k-text-hint:#9ca3af;
+  /* — Поверхні / межі — */
+  --k-bg:#ffffff; --k-bg-subtle:#fafbfd; --k-border:#eef1f6; --k-border-strong:#e3e7ef;
+  /* — Скруглення — */
+  --k-radius-xs:6px; --k-radius-sm:8px; --k-radius-md:14px; --k-radius-lg:20px; --k-radius-pill:999px;
+  /* — Тіні — */
+  --k-shadow-1:0 1px 3px rgba(26,34,64,.08);
+  --k-shadow-2:0 8px 30px rgba(26,34,64,.16);
+  --k-shadow-3:0 16px 50px rgba(26,34,64,.22);
+  /* — Відступи / гепи (крок 4px) — */
+  --k-space-0:0; --k-space-1:4px; --k-space-2:8px; --k-space-3:12px; --k-space-4:16px;
+  --k-space-5:20px; --k-space-6:24px; --k-space-8:32px; --k-space-10:40px; --k-space-12:48px;
+  /* — Типографіка — */
+  --k-font-sans:-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
+  --k-fs-xs:12px; --k-fs-sm:13px; --k-fs-base:14px; --k-fs-md:16px; --k-fs-lg:20px; --k-fs-xl:24px; --k-fs-2xl:30px;
+  --k-fw-normal:400; --k-fw-medium:600; --k-fw-bold:700;
+  --k-lh-tight:1.2; --k-lh-base:1.5; --k-lh-relaxed:1.7;
+  /* — Шари (z-index) — */
+  --k-z-fixed:1000; --k-z-overlay:1001; --k-z-tip:1002;
+}
+/* ——— Компоненти (розширюємо під приклад Александра) ——— */
+.k-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--k-space-2);
+  font:var(--k-fw-medium) var(--k-fs-base)/var(--k-lh-tight) var(--k-font-sans);padding:var(--k-space-2) var(--k-space-4);
+  border-radius:var(--k-radius-pill);border:1px solid transparent;cursor:pointer;
+  transition:background .15s,border-color .15s,box-shadow .15s}
+.k-btn--primary{background:var(--k-accent);color:#fff}
+.k-btn--primary:hover{background:var(--k-accent-hover)}
+.k-btn--quiet{background:var(--k-bg-subtle);color:var(--k-text);border-color:var(--k-border-strong)}
+.k-btn--quiet:hover{background:#f0f2f6}
+.k-btn--danger{background:var(--k-danger);color:#fff}
+.k-btn--danger:hover{filter:brightness(.94)}
+.k-input,.k-textarea{width:100%;box-sizing:border-box;background:var(--k-bg-subtle);
+  border:1px solid var(--k-border);border-radius:var(--k-radius-sm);padding:9px 11px;
+  font:var(--k-fs-base)/var(--k-lh-base) var(--k-font-sans);color:var(--k-text);
+  transition:border-color .15s,background .15s,box-shadow .15s}
+.k-input::placeholder,.k-textarea::placeholder{color:var(--k-text-hint)}
+.k-input:focus,.k-textarea:focus{outline:none;background:var(--k-bg);
+  border-color:var(--k-accent);box-shadow:0 0 0 3px rgba(42,109,244,.12)}
+.k-card{background:var(--k-bg);border:1px solid var(--k-border);border-radius:var(--k-radius-md);
+  box-shadow:var(--k-shadow-1);padding:var(--k-space-4);transition:transform .15s,box-shadow .15s}
+.k-card:hover{transform:translateY(-2px);box-shadow:var(--k-shadow-2)}
+.k-dialog{background:var(--k-bg);border-radius:var(--k-radius-md);box-shadow:var(--k-shadow-2);padding:20px 22px}
+.k-pill{display:inline-flex;align-items:center;gap:var(--k-space-1);padding:var(--k-space-1) var(--k-space-3);
+  border-radius:var(--k-radius-pill);font:var(--k-fw-medium) var(--k-fs-xs)/var(--k-lh-tight) var(--k-font-sans)}
+.k-pill--blue{background:rgba(16,112,176,.12);color:var(--k-brand-blue)}
+.k-pill--red{background:rgba(248,72,64,.12);color:var(--k-danger)}
+.k-pill--yellow{background:rgba(248,176,32,.16);color:#9a6a00}
+.k-pill--teal{background:rgba(0,184,152,.14);color:#067a64}
+.k-form{display:flex;flex-direction:column;gap:var(--k-space-5)}          /* геп між полями — регулюється тут */
+.k-field{display:flex;flex-direction:column;gap:var(--k-space-3)}          /* геп лейбл → інпут (12px) */
+.k-label{font:var(--k-fw-medium) var(--k-fs-sm)/var(--k-lh-base) var(--k-font-sans);color:var(--k-text-secondary)}
+.k-label span{font-weight:var(--k-fw-normal);color:var(--k-text-hint)}
+/* Картки (ціль міграції .place-card / .service-card) */
+.k-card--media{padding:0;overflow:hidden}
+.k-card__img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--k-bg-subtle)}
+.k-card__body{padding:var(--k-space-4) var(--k-space-5) var(--k-space-5)}
+.k-card__title{margin:0 0 var(--k-space-2);font:var(--k-fw-bold) var(--k-fs-md)/var(--k-lh-tight) var(--k-font-sans);color:var(--k-ink)}
+.k-card__title a{color:inherit;text-decoration:none}
+.k-card__title a:hover{color:var(--k-accent)}
+.k-card__meta{margin:0 0 var(--k-space-2);font-size:var(--k-fs-sm);color:var(--k-text-muted)}
+.k-card__desc{font-size:var(--k-fs-base);line-height:var(--k-lh-base);color:var(--k-text-secondary)}
+.k-card__rows{display:flex;flex-direction:column;gap:var(--k-space-2);margin-top:var(--k-space-3)}
+.k-card__row{display:flex;align-items:center;gap:var(--k-space-2);font-size:var(--k-fs-sm);color:var(--k-text-secondary)}
+.k-card__row a{color:var(--k-accent);text-decoration:none}
+.k-card__price{font-weight:var(--k-fw-bold);color:var(--k-ink)}
+.k-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:var(--k-radius-xs);font:var(--k-fw-medium) var(--k-fs-xs)/1.2 var(--k-font-sans);background:var(--k-bg-subtle);color:var(--k-text-secondary)}
+.k-badge--success{background:rgba(0,184,152,.14);color:#067a64}
+/* === /krai-uikit === */
+/* === Країнопедія: віджет «Повідомити про правку» (krai-feedback) — на UI Kit === */
+/* Кольори/радіуси/тіні — з токенів --k-*. Тут лише layout/позиціонування. */
+.krai-fb-btn{position:fixed;right:16px;bottom:16px;z-index:var(--k-z-fixed,1000);background:var(--k-bg);color:var(--k-ink);box-shadow:var(--k-shadow-2)}
+@media(max-width:640px){.krai-fb-btn{right:10px;bottom:10px}}
+.krai-fb-tip{position:absolute;z-index:var(--k-z-tip,1002);padding:6px 12px;font-size:13px;background:var(--k-bg);color:var(--k-ink);box-shadow:var(--k-shadow-2);white-space:nowrap}
+.krai-fb-overlay{display:none;position:fixed;inset:0;z-index:1001;background:rgba(26,34,64,.5);align-items:center;justify-content:center;padding:16px}
+.krai-fb-overlay.is-open{display:flex}
+.krai-fb-modal{max-width:460px;width:100%;position:relative;max-height:90vh;overflow:auto}
+.krai-fb-close{position:absolute;top:8px;right:12px;background:none;border:none;font-size:26px;line-height:1;color:var(--k-text-muted);cursor:pointer}
+.krai-fb-title{margin:0 0 4px;font-size:20px;color:var(--k-ink);border:none;padding:0}
+.krai-fb-sub{margin:0 0 14px;font-size:13px;color:var(--k-text-muted)}
+.krai-fb-hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0}
+.krai-fb-actions{display:flex;justify-content:flex-end;gap:10px}
+.krai-fb-msg{font-size:13px}
+.krai-fb-msg:empty{display:none}
+.krai-fb-msg.is-ok{color:var(--k-success)}
+.krai-fb-msg.is-err{color:var(--k-danger)}
+/* === /krai-feedback === */