/*
 * IMS Glass — теми «Світла / Графітова» для всіх сторінок (замість фото-фонів і меню «Фон»).
 *
 * Тема — атрибутами <html data-theme="light|graphite" data-ims-tone="light|dark"> (inc/theme-switch.php, ims-theme.js).
 * 1. Токени двох тем (--imscco-*; джерело — погоджений прототип _imscco-redesign/prototype/assets/css/ims-tokens.css).
 * 2. Однотонний фон: наявні шари (ims-vision.css та ін., @layer ims-design) малюють фон через змінні --v-*;
 *    тут вони перевизначаються поза шаром, тож виграють без !important: без фото, текстур, градієнтів і затемнень.
 * 3. Міст кольорів: ті самі змінні --v-* (через них забарвлені всі модулі кабінету й сторінки) → прозоре 3D-скло:
 *    майже безбарвна поверхня, світлий край, товщина по периметру, тонкий контур, стримана тінь; підкладки — лише
 *    полям, меню й вікнам над вмістом. Функціональні кольори статусів і графіків не змінюються.
 * 4. Перемикач тем у шапці й бічній панелі — на місці колишньої кнопки «Фон», тих самих розмірів.
 * Розмітка, розміщення й розміри блоків не змінюються — лише кольори.
 */

/* ---------------------------------------------------------------- 1. Токени */

:root,
:root[data-theme="light"] {
	color-scheme: light;

	/* Основа (ТЗ 2.1) */
	--imscco-bg: #ECEEF0;                     /* підібрано для прозорого скла (порівняння: #F5F5F5, #F1F2F4) */
	--imscco-text: #272A2E;
	--imscco-ink-rgb: 39, 42, 46;
	--imscco-shade-rgb: 39, 42, 46;
	--imscco-divider: rgba(39, 42, 46, .1);       /* розділювачі всередині скляних блоків */
	--imscco-divider-soft: rgba(39, 42, 46, .06);
	--imscco-text-2: #414B55;                 /* другорядний текст на прозорому світлому склі */
	--imscco-line: #D8DADD;                   /* межі та розділювачі */
	--imscco-line-strong: #85888E;            /* межі полів і елементів керування — ≥ 3 : 1 */
	--imscco-focus: #272A2E;
	--imscco-focus-halo: rgba(39, 42, 46, .16);

	/* Кнопки */
	--imscco-btn: #303237;
	--imscco-btn-text: #FFFFFF;
	--imscco-btn-hover: #3D4046;
	--imscco-btn-active: #232528;
	--imscco-btn-2: rgba(255, 255, 255, .12);
	--imscco-btn-2-hover: rgba(255, 255, 255, .24);
	--imscco-btn-2-active: rgba(59, 91, 111, .09);
	--imscco-btn-2-line: rgba(39, 42, 46, .2);
	--imscco-btn-2-text: #272A2E;
	--imscco-disabled-bg: rgba(39, 42, 46, .06);
	--imscco-disabled-text: #8E9196;

	/* Прозоре 3D-скло: майже безбарвне; блок відокремлюють світлий край, товщина по периметру й тонкий контур */
	--imscco-glass: rgba(59, 91, 111, .045);        /* чисте скло з легким холодним відтінком */
	--imscco-glass-soft: rgba(59, 91, 111, .018);
	--imscco-glass-strong: rgba(59, 91, 111, .055);   /* поля трохи заглиблені, без білої підкладки */
	--imscco-glass-overlay: rgba(215, 231, 239, .38);
	--imscco-glass-line: rgba(59, 91, 111, .23);
	/* Скло видно за краєм, а не за заливкою: чіткий контур, яскрава верхня грань, бічні відблиски (світло згори зліва),
	   помітна товщина по периметру, заломлення біля верхнього краю й тінь біля нижнього. */
	--imscco-glass-edge:
		0 0 0 1px rgba(39, 66, 83, .08),
		inset 0 1px 0 rgba(255, 255, 255, .62),
		inset 0 -1px 0 rgba(39, 66, 83, .1),
		inset 1px 0 0 rgba(255, 255, 255, .22);
	--imscco-glass-blur: 16px;                         /* розмиває текст під вікном, зберігаючи колір тла */
	--imscco-glass-saturate: 120%;

	/* Заливки всередині поверхонь */
	--imscco-fill: rgba(39, 42, 46, .045);
	--imscco-fill-2: rgba(39, 42, 46, .07);
	--imscco-hover: rgba(39, 42, 46, .05);
	--imscco-pressed: rgba(39, 42, 46, .09);
	--imscco-selected: rgba(39, 42, 46, .08);
	--imscco-backdrop: rgba(236, 238, 240, .2);

	/* Тіні: легкі, природні */
	/* Тіні: природні, з одного джерела згори; ближня — коротка й чітка, дальня — м'яка (відчуття пластини над фоном). */
	--imscco-shadow-1: 0 1px 1px rgba(39, 42, 46, .05), 0 6px 12px -8px rgba(39, 42, 46, .14), 0 20px 36px -22px rgba(39, 42, 46, .34);
	--imscco-shadow-2: 0 2px 4px rgba(39, 42, 46, .06), 0 10px 20px -12px rgba(39, 42, 46, .18), 0 28px 52px -26px rgba(39, 42, 46, .4);
	--imscco-shadow-3: 0 2px 8px rgba(39, 42, 46, .07), 0 18px 36px -18px rgba(39, 42, 46, .22), 0 44px 96px -32px rgba(39, 42, 46, .42);
	/* Натиснутий стан: поверхня «вдавлюється» */
	--imscco-press: inset 0 2px 5px rgba(39, 42, 46, .16), inset 0 0 0 1px rgba(39, 42, 46, .08);
	/* Тактильність: відблиск скла, клавіша (основна кнопка), піднята пластина й заглиблення (вкладки, поля). */
	--imscco-sheen: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, 0) 28%);
	--imscco-key: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 -1px 0 rgba(0, 0, 0, .3), 0 1px 2px rgba(20, 22, 26, .2), 0 8px 18px -10px rgba(20, 22, 26, .55);
	--imscco-key-hover: inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 -1px 0 rgba(0, 0, 0, .3), 0 2px 4px rgba(20, 22, 26, .2), 0 14px 26px -12px rgba(20, 22, 26, .6);
	--imscco-key-press: inset 0 2px 5px rgba(0, 0, 0, .4), 0 1px 1px rgba(20, 22, 26, .1);
	--imscco-raised: inset 0 1px 0 #FFFFFF, 0 1px 2px rgba(39, 42, 46, .08), 0 6px 14px -8px rgba(39, 42, 46, .3);
	--imscco-raised-hover: inset 0 1px 0 #FFFFFF, 0 2px 4px rgba(39, 42, 46, .09), 0 14px 24px -12px rgba(39, 42, 46, .38);
	--imscco-well: inset 0 1px 3px rgba(39, 42, 46, .1), inset 0 0 0 1px rgba(39, 42, 46, .04);
	/* М'яке світло за склом (без фото): теплий відсвіт згори зліва, прохолодний справа, теплий знизу. */
	--imscco-ambient:
		radial-gradient(62% 56% at 8% 4%, rgba(255, 218, 182, .8), transparent 72%),
		radial-gradient(50% 48% at 92% 12%, rgba(196, 214, 238, .85), transparent 74%),
		radial-gradient(66% 58% at 74% 104%, rgba(236, 210, 186, .72), transparent 72%),
		radial-gradient(44% 46% at 18% 72%, rgba(206, 220, 236, .6), transparent 72%),
		radial-gradient(40% 40% at 46% 46%, rgba(255, 255, 255, .4), transparent 70%);
	--imscco-frost: blur(1.5px) saturate(105%);      /* фактура фону проходить крізь робочі панелі */

	/* Corporate ID: непрозорий матовий пластик */
	--imscco-badge: #FCFCFC;
	--imscco-badge-edge: #D9DADD;
	--imscco-badge-edge-2: #E6E7E9;
	--imscco-badge-rule: #E1E2E5;
	--imscco-badge-fill: #F1F2F3;
	--imscco-badge-fill-line: #E3E4E7;
	--imscco-badge-shadow: rgba(39, 42, 46, .26);
	--imscco-badge-shade: 0, 0, 0;            /* затінення граней при повороті (RGB) */

	/* QR-код: біле поле в обох темах */
	--imscco-qr-field: #FFFFFF;
	--imscco-qr-ink: #1B1C1F;
	--imscco-qr-line: #E1E2E5;

	/* Функціональні кольори: статуси, попередження, графіки */
	--imscco-success: #1C7443;  --imscco-success-bg: rgba(28, 116, 67, .1);   --imscco-success-line: rgba(28, 116, 67, .3);
	--imscco-warning: #8A5300;  --imscco-warning-bg: rgba(214, 132, 0, .14);  --imscco-warning-line: rgba(176, 108, 0, .34);
	--imscco-danger: #B42318;   --imscco-danger-bg: rgba(180, 35, 24, .09);   --imscco-danger-line: rgba(180, 35, 24, .3);
	--imscco-info: #0B5CAD;     --imscco-info-bg: rgba(11, 92, 173, .09);     --imscco-info-line: rgba(11, 92, 173, .28);
	--imscco-neutral: #55585E;  --imscco-neutral-bg: rgba(39, 42, 46, .07);   --imscco-neutral-line: rgba(39, 42, 46, .18);

	--imscco-chart-1: #2F6DB0;
	--imscco-chart-2: #2B8455;
	--imscco-chart-3: #C3841A;
	--imscco-chart-4: #7B7E85;
	--imscco-chart-5: #B4483F;
	--imscco-chart-grid: rgba(39, 42, 46, .09);
	--imscco-chart-track: rgba(39, 42, 46, .08);
}

:root[data-theme="graphite"] {
	color-scheme: dark;

	/* Основа (ТЗ 2.2): благородний середньотемний графіт, не чорний */
	--imscco-bg: #45474C;                     /* підібрано для прозорого скла (порівняння: #414348, #494B50) */
	--imscco-text: #F3F3F4;
	--imscco-ink-rgb: 243, 243, 244;
	--imscco-shade-rgb: 0, 0, 0;
	--imscco-divider: rgba(255, 255, 255, .1);
	--imscco-divider-soft: rgba(255, 255, 255, .06);
	--imscco-text-2: #C3C5C8;                 /* 5,7 : 1 на фоні */
	--imscco-line: #72757B;
	--imscco-line-strong: #9A9DA3;            /* 3,6 : 1 */
	--imscco-focus: #F3F3F4;
	--imscco-focus-halo: rgba(243, 243, 244, .2);

	--imscco-btn: #DCDDE0;
	--imscco-btn-text: #272A2E;
	--imscco-btn-hover: #E9EAEC;
	--imscco-btn-active: #CCCED2;
	--imscco-btn-2: rgba(255, 255, 255, .07);
	--imscco-btn-2-hover: rgba(255, 255, 255, .12);
	--imscco-btn-2-active: rgba(255, 255, 255, .16);
	--imscco-btn-2-line: rgba(255, 255, 255, .22);
	--imscco-btn-2-text: #F3F3F4;
	--imscco-disabled-bg: rgba(255, 255, 255, .05);
	--imscco-disabled-text: #9A9DA2;

	/* Графітове прозоре скло: контрольовані світлі контури без підсвічування */
	--imscco-glass: rgba(34, 38, 42, .34);             /* прозоре скло: крізь нього переливається тло */
	--imscco-glass-soft: rgba(255, 255, 255, .04);
	--imscco-glass-strong: rgba(255, 255, 255, .07);   /* локальна підкладка: поля форм */
	--imscco-glass-overlay: rgba(34, 38, 42, .7);      /* меню, модальні вікна, сповіщення — над вмістом, із сильним розмиттям */
	--imscco-glass-line: rgba(255, 255, 255, .2);
	--imscco-glass-edge:
		0 0 0 1px rgba(0, 0, 0, .22),
		inset 0 1px 0 rgba(255, 255, 255, .24),
		inset 0 -1px 0 rgba(0, 0, 0, .3),
		inset 1px 0 0 rgba(255, 255, 255, .08),
		inset 0 0 0 4px rgba(255, 255, 255, .03),
		inset 0 20px 24px -20px rgba(255, 255, 255, .11),
		inset 0 -18px 22px -20px rgba(0, 0, 0, .28);
	--imscco-glass-blur: 26px;
	--imscco-glass-saturate: 175%;

	/* Вкладені заливки темніші: другорядний текст лишається ≥ 4,5 : 1 */
	--imscco-fill: rgba(0, 0, 0, .13);
	--imscco-fill-2: rgba(0, 0, 0, .19);
	--imscco-hover: rgba(255, 255, 255, .045);
	--imscco-pressed: rgba(255, 255, 255, .08);
	--imscco-selected: rgba(255, 255, 255, .07);
	--imscco-backdrop: rgba(54, 56, 60, .5);

	--imscco-shadow-1: 0 1px 1px rgba(0, 0, 0, .16), 0 6px 12px -8px rgba(0, 0, 0, .3), 0 22px 40px -22px rgba(0, 0, 0, .6);
	--imscco-shadow-2: 0 2px 4px rgba(0, 0, 0, .18), 0 10px 20px -12px rgba(0, 0, 0, .34), 0 30px 56px -26px rgba(0, 0, 0, .64);
	--imscco-shadow-3: 0 2px 8px rgba(0, 0, 0, .2), 0 18px 36px -18px rgba(0, 0, 0, .38), 0 46px 100px -32px rgba(0, 0, 0, .62);
	--imscco-press: inset 0 2px 6px rgba(0, 0, 0, .34), inset 0 0 0 1px rgba(0, 0, 0, .18);
	--imscco-sheen: linear-gradient(160deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .02) 46%, rgba(255, 255, 255, 0) 72%);
	--imscco-key: inset 0 1px 0 rgba(255, 255, 255, .75), inset 0 -1px 0 rgba(0, 0, 0, .22), 0 1px 2px rgba(0, 0, 0, .3), 0 8px 18px -10px rgba(0, 0, 0, .62);
	--imscco-key-hover: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 -1px 0 rgba(0, 0, 0, .22), 0 2px 4px rgba(0, 0, 0, .32), 0 14px 26px -12px rgba(0, 0, 0, .68);
	--imscco-key-press: inset 0 2px 5px rgba(0, 0, 0, .32), 0 1px 1px rgba(0, 0, 0, .2);
	--imscco-raised: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .28), 0 6px 14px -8px rgba(0, 0, 0, .55);
	--imscco-raised-hover: inset 0 1px 0 rgba(255, 255, 255, .24), 0 2px 4px rgba(0, 0, 0, .3), 0 14px 24px -12px rgba(0, 0, 0, .62);
	--imscco-well: inset 0 1px 3px rgba(0, 0, 0, .32), inset 0 0 0 1px rgba(0, 0, 0, .14);
	--imscco-ambient:
		radial-gradient(62% 56% at 8% 4%, rgba(255, 186, 132, .17), transparent 72%),
		radial-gradient(50% 48% at 92% 12%, rgba(132, 164, 214, .19), transparent 74%),
		radial-gradient(66% 58% at 74% 104%, rgba(255, 196, 150, .12), transparent 72%),
		radial-gradient(44% 46% at 18% 72%, rgba(132, 160, 200, .1), transparent 72%),
		radial-gradient(40% 40% at 46% 46%, rgba(255, 255, 255, .04), transparent 70%);
	--imscco-frost: blur(22px) saturate(175%);

	--imscco-badge: #35373C;
	--imscco-badge-edge: #26282C;
	--imscco-badge-edge-2: #2D2F33;
	--imscco-badge-rule: #4A4C52;
	--imscco-badge-fill: #3D3F44;
	--imscco-badge-fill-line: #4B4D53;
	--imscco-badge-shadow: rgba(0, 0, 0, .42);
	--imscco-badge-shade: 0, 0, 0;

	--imscco-qr-field: #FFFFFF;
	--imscco-qr-ink: #1B1C1F;
	--imscco-qr-line: transparent;

	--imscco-success: #7ADBA2;  --imscco-success-bg: rgba(122, 219, 162, .13); --imscco-success-line: rgba(122, 219, 162, .34);
	--imscco-warning: #F2C266;  --imscco-warning-bg: rgba(242, 194, 102, .14); --imscco-warning-line: rgba(242, 194, 102, .36);
	--imscco-danger: #FF9B92;   --imscco-danger-bg: rgba(255, 155, 146, .13);  --imscco-danger-line: rgba(255, 155, 146, .36);
	--imscco-info: #8DC2FF;     --imscco-info-bg: rgba(141, 194, 255, .13);    --imscco-info-line: rgba(141, 194, 255, .36);
	--imscco-neutral: #D4D6D9;  --imscco-neutral-bg: rgba(255, 255, 255, .08); --imscco-neutral-line: rgba(255, 255, 255, .22);

	--imscco-chart-1: #7DB4F5;
	--imscco-chart-2: #6FCF97;
	--imscco-chart-3: #E9B65A;
	--imscco-chart-4: #A9ACB2;
	--imscco-chart-5: #F08B80;
	--imscco-chart-grid: rgba(255, 255, 255, .1);
	--imscco-chart-track: rgba(255, 255, 255, .09);
}

/* Спільне для обох тем: ремінець, фурнітура, бренд, типографіка, ритм, рух. */
:root {
	/* Подвійний ремінець — завжди графітовий, незалежно від теми (ТЗ 5) */
	--imscco-lanyard: #34363A;
	--imscco-lanyard-weave: #3C3E43;
	--imscco-metal-hi: #F1F2F3;
	--imscco-metal: #B7BABF;
	--imscco-metal-lo: #6E7176;

	/* Фірмовий бордовий — лише логотип */
	--imscco-brand: #C05157;

	/* Типографіка: наявне сімейство Manrope */
	--imscco-font: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--imscco-fs-display: 32px;  --imscco-lh-display: 1.15;
	--imscco-fs-h1: 26px;       --imscco-lh-h1: 1.2;
	--imscco-fs-h2: 20px;       --imscco-lh-h2: 1.3;
	--imscco-fs-h3: 16px;       --imscco-lh-h3: 1.35;
	--imscco-fs-body: 15px;     --imscco-lh-body: 1.6;
	--imscco-fs-sm: 13px;       --imscco-lh-sm: 1.5;
	--imscco-fs-xs: 12px;       --imscco-lh-xs: 1.45;
	--imscco-fs-eyebrow: 11px;  --imscco-ls-eyebrow: .12em;
	--imscco-fs-btn: 14px;
	--imscco-fs-table: 13.5px;
	--imscco-fs-input: 15px;
	--imscco-fs-stat: 24px;
	--imscco-fw-regular: 450;
	--imscco-fw-medium: 550;
	--imscco-fw-semibold: 650;
	--imscco-fw-bold: 750;

	/* Відступи: крок 4 px */
	--imscco-s-1: 4px;  --imscco-s-2: 8px;  --imscco-s-3: 12px; --imscco-s-4: 16px; --imscco-s-5: 20px;
	--imscco-s-6: 24px; --imscco-s-7: 32px; --imscco-s-8: 40px; --imscco-s-9: 48px; --imscco-s-10: 64px;

	/* Радіуси */
	--imscco-r-xs: 6px; --imscco-r-sm: 8px; --imscco-r-md: 12px; --imscco-r-lg: 16px; --imscco-r-xl: 20px; --imscco-r-2xl: 24px; --imscco-r-pill: 999px;

	/* Висота елементів керування */
	--imscco-h-sm: 32px; --imscco-h-md: 40px; --imscco-h-lg: 48px;

	/* Рух: стримано */
	--imscco-ease: cubic-bezier(.2, .7, .2, 1);
	--imscco-ease-out: cubic-bezier(.16, 1, .3, 1);
	--imscco-ease-in-out: cubic-bezier(.65, 0, .35, 1);
	--imscco-t-fast: 140ms; --imscco-t: 220ms; --imscco-t-slow: 360ms;

	/* Шари */
	--imscco-z-badge: 10; --imscco-z-chrome: 30; --imscco-z-popover: 50; --imscco-z-modal: 80; --imscco-z-toast: 90;
}

@media (max-width: 640px) {
	:root { --imscco-fs-input: 16px; --imscco-fs-display: 26px; --imscco-fs-h1: 22px; }
}

/* ---------------------------------------------------------------- 2. Тло: одна фотографія в обох темах */

/* Шар body::after (ims-vision.css) і сцена головної (.ims-home) малюють: вуаль теми, фото, його віддзеркалене розмите
   продовження (решта екрана), тон теми під ним. Фото показано повністю, не більше за природний розмір (1376 × 1029)
   і без обрізання; краї м'яко переходять у продовження, яке далі від фото розмите сильніше (глибина). Графітова — оригінальна акварель під легкою вуаллю,
   Світла — та сама фотографія в перлинно-білих тонах (ті самі текстури й композиція). */
html:is([data-theme], #v#v#v) {
	/* Розмір фото: увесь кадр у вікні, але не більше за природний розмір; продовження — у п'ять разів більше. */
	/* Фото — по центру, повністю видиме, ~88 % екрана й не більше природних 1376 px (чітке); плитка 2 × 2 з дзеркальними
	   копіями (tools/rooms.mjs) повторюється, тож кадр продовжується за своїми межами без швів і без розмиття. */
	--v-photo: min(1376px, 88vw, calc(88dvh * 1.771));
	--v-bg: url(../images/rooms/graphite.webp) calc(50% + var(--v-photo) / 2) calc(50% + var(--v-photo) / 3.542) / calc(var(--v-photo) * 2) auto repeat, linear-gradient(transparent, transparent);
	--v-bg-m: var(--v-bg);
	/* Та сама акварель у світлому тоні: зберігаємо колір і фактуру, не вибілюючи їх до суцільного білого. */
	--v-scrim: linear-gradient(rgba(246, 250, 252, .67), rgba(246, 250, 252, .67));
	--v-bg-base: var(--imscco-bg);
	--g-texture: none;
	background-color: var(--imscco-bg);
}
/* Вертикальний екран телефона: кадр на всю висоту (інакше вузьке фото повторювалося б смугами). */
@media (max-aspect-ratio: 3/4) {
	html:is([data-theme], #v#v#v) { --v-photo: min(1376px, calc(100dvh * 1.771)); }
}
html[data-theme="graphite"]:is([data-theme], #v#v#v) {
	--v-bg: url(../images/rooms/graphite.webp) calc(50% + var(--v-photo) / 2) calc(50% + var(--v-photo) / 3.542) / calc(var(--v-photo) * 2) auto repeat, linear-gradient(transparent, transparent);
	--v-bg-m: var(--v-bg);
	--v-scrim:
		linear-gradient(180deg, rgba(26, 29, 32, .4), rgba(28, 31, 34, .5) 55%, rgba(30, 33, 36, .6)),
		radial-gradient(70% 60% at 6% 0%, rgba(120, 200, 190, .12), transparent 70%);
}

/* ---------------------------------------------------------------- 3. Міст кольорів → прозоре 3D-скло */

html:is([data-theme], #v#v#v) {
	/* Текст */
	--v-ink: var(--imscco-text);
	--v-text: var(--imscco-text);
	--v-ink-rgb: var(--imscco-ink-rgb);
	--v-text-2: var(--imscco-text-2);
	--v-muted: var(--imscco-text-2);
	--v-faint: var(--imscco-text-2);
	--v-shade: var(--imscco-shade-rgb);
	/* Межі: розділювачі всередині блоків — тонкі; межі полів — помітні (≥ 3 : 1) */
	--v-line: var(--imscco-divider);
	--v-line-soft: var(--imscco-divider-soft);
	--v-line-strong: var(--imscco-line-strong);
	/* Скло: вікно, панелі, вкладені блоки, плитки піктограм */
	--v-window: var(--imscco-glass-soft);
	--v-window-line: var(--imscco-glass-line);
	--v-window-edge: var(--imscco-glass-edge);
	--v-window-shadow: var(--imscco-shadow-2);
	--v-panel: var(--imscco-glass);
	--v-panel-raised: var(--imscco-glass);
	--v-panel-nested: var(--imscco-glass-soft);
	--v-panel-line: var(--imscco-glass-line);
	--v-panel-shadow: var(--imscco-shadow-1);
	--v-edge: var(--imscco-glass-edge);
	--v-tile: var(--imscco-glass-soft);
	--v-shadow: var(--imscco-shadow-2);
	--v-lift: var(--imscco-shadow-1);
	/* Стани */
	--v-panel-hover: var(--imscco-hover);
	--v-hover: var(--imscco-hover);
	--v-active: var(--imscco-pressed);
	--v-sunken: var(--imscco-fill);
	--v-sunken-soft: var(--imscco-fill);
	/* Кнопки: основні — графітові (у Графітовій темі — світлі), другорядні — нейтральні */
	--v-btn: var(--imscco-btn-2);
	--v-chip: var(--imscco-btn-2);
	--v-btn-hover: var(--imscco-btn-2-hover);
	--v-btn-active: var(--imscco-btn-2-active);
	--v-btn-line: var(--imscco-btn-2-line);
	--v-btn-ink: var(--imscco-btn-2-text);
	--v-primary: var(--imscco-btn);
	--v-primary-line: var(--imscco-btn);
	--v-primary-hover: var(--imscco-btn-hover);
	--v-primary-ink: var(--imscco-btn-text);
	/* Поля, меню, вікна над вмістом — локальна читабельна підкладка */
	--v-field: var(--imscco-glass-strong);
	--v-field-line: var(--imscco-line-strong);
	--v-field-focus: var(--imscco-focus);
	--v-solid: var(--imscco-glass-overlay);
	--v-solid-strong: var(--imscco-glass-overlay);
	--v-solid-soft: var(--imscco-glass-overlay);
	--v-solid-line: var(--imscco-glass-line);
	--v-option: var(--imscco-badge);
	--v-autofill: var(--imscco-badge);
	--v-backdrop: var(--imscco-backdrop);
	/* Текст статусів — функціональні кольори теми (відтінки зелений / синій / бурштиновий / червоний зберігаються) */
	--v-blue-text: var(--imscco-info);
	--v-green-text: var(--imscco-success);
	--v-amber-text: var(--imscco-warning);
	--v-red-text: var(--imscco-danger);
	--v-rose-text: var(--imscco-danger);
	--v-danger-ink: var(--imscco-danger);
	--v-danger-bg: var(--imscco-danger-bg);
	--v-danger-line: var(--imscco-danger-line);
}

/* ---------------------------------------------------------------- 3a. Матове скло й підйом карток */

/* Робочі блоки сайту й кабінету — матове скло над м'яким світлом фону: розмиття, відблиск згори, край і тінь.
   Колір поверхні не змінюється (альфа ≤ 0,2), розміщення — теж. Картки-посилання під курсором трохи піднімаються. */
@layer ims-design {
	html:is(:root, #c#c#c#c) body :is(#ims-crm-side, .ims-crm-tile, .ims-cab-card, .ims-workspace-heading, .imsc-card, .imsc-file-area, .ir-card, .ir-dashboard-stat, .imss-plan, .imss-pricing-intro, .ims-pp-block, .imsnr-card) {
		-webkit-backdrop-filter: var(--imscco-frost) !important;
		backdrop-filter: var(--imscco-frost) !important;
		background-image: var(--imscco-sheen) !important;
	}
	html:is(:root, #c#c#c#c) body :is(a.ims-crm-tile, a.ims-crm-stat, button.ir-dashboard-stat, .imss-plan, .ims-cab-card.ims-crm-mini) {
		transition: transform var(--imscco-t) var(--imscco-ease-out), box-shadow var(--imscco-t) var(--imscco-ease-out) !important;
	}
	@media (hover: hover) {
		html:is(:root, #c#c#c#c) body :is(a.ims-crm-tile, a.ims-crm-stat, button.ir-dashboard-stat, .imss-plan, .ims-cab-card.ims-crm-mini):hover {
			transform: translateY(-4px) !important;
			box-shadow: var(--imscco-glass-edge), var(--imscco-shadow-3) !important;
		}
	}
	html:is(:root, #c#c#c#c) body :is(a.ims-crm-tile, a.ims-crm-stat, button.ir-dashboard-stat):active {
		transform: translateY(-1px) !important;
		box-shadow: var(--imscco-glass-edge), var(--imscco-shadow-1) !important;
	}
	/* Кнопки — тактильні: основні — як клавіша (піднімаються під курсором, утискаються під пальцем), решта — утискаються. */
	html:is(:root, #c#c#c#c) body :is(.ims-account-primary-btn, .imshp-plan, .ims-pp-btn.is-dark, .ims-modal-primary, .ims-crm-sub-link.is-cta, .fx-btn.is-primary, .imsc-primary, .imss-primary, .ims-crm-new, .ims-cab-btn) {
		box-shadow: var(--imscco-key) !important;
		transition: transform var(--imscco-t-fast) var(--imscco-ease), box-shadow var(--imscco-t-fast) var(--imscco-ease), background-color var(--imscco-t-fast) var(--imscco-ease) !important;
	}
	@media (hover: hover) {
		html:is(:root, #c#c#c#c) body :is(.ims-account-primary-btn, .imshp-plan, .ims-pp-btn.is-dark, .ims-modal-primary, .ims-crm-sub-link.is-cta, .fx-btn.is-primary, .imsc-primary, .imss-primary, .ims-crm-new, .ims-cab-btn):hover {
			box-shadow: var(--imscco-key-hover) !important;
			transform: translateY(-1px) !important;
		}
	}
	html:is(:root, #c#c#c#c) body :is(.ims-account-primary-btn, .imshp-plan, .ims-pp-btn.is-dark, .ims-modal-primary, .ims-crm-sub-link.is-cta, .fx-btn.is-primary, .imsc-primary, .imss-primary, .ims-crm-new, .ims-cab-btn):active {
		box-shadow: var(--imscco-key-press) !important;
		transform: translateY(1px) !important;
	}
	html:is(:root, #c#c#c#c) body :is(button, a[class*="btn"], a[class*="button"], input[type="submit"], input[type="button"]):not(:disabled):not(.ims-account-primary-btn):active {
		transform: translateY(1px);
	}
	@media (prefers-reduced-motion: reduce) {
		html:is(:root, #c#c#c#c) body :is(a.ims-crm-tile, a.ims-crm-stat, button.ir-dashboard-stat, .imss-plan, .ims-cab-card.ims-crm-mini, .ims-account-primary-btn, .imshp-plan, .ims-pp-btn.is-dark, .ims-modal-primary, .fx-btn.is-primary, .imsc-primary, .imss-primary):is(:hover, :active) { transform: none !important; }
	}
}

/* ---------------------------------------------------------------- 4. Перемикач тем (шапка, бічна панель) */

/* Вигляд і розміри кнопки — спільні з дзвіником і мовою (ims-vision.css, клас .ims-theme-btn).
   Піктограма показує поточну тему (сонце / місяць) зі стриманим бордовим акцентом. */
.ims-theme-btn .is-moon,
:root[data-theme="graphite"] .ims-theme-btn .is-sun { display: none; }
:root[data-theme="graphite"] .ims-theme-btn .is-moon { display: block; }
.ims-theme-btn svg { color: #B8484E; }
:root[data-theme="graphite"] .ims-theme-btn svg { color: #E5868B; }

/* ---------------------------------------------------------------- 5. Вхід у панелі головної (вікно «ims-auth-home») */

/* Сторінка входу кабінету в панелі поруч із бейджем (html.ims-embed-home, inc/theme-switch.php): без власної рамки
   картки, логотипа й вкладок — заголовок кроку й вкладки показує панель головної. Форми, поля й логіка — ті самі.
   Правила — у тому самому шарі, що й режим вбудовування (ims-vision.css), і пізніше за нього. Класи ущільнення
   (ims-embed-compact / -tight / -min) ставить ims-home.js, коли панель не вміщається між шапкою й футером. */
@layer ims-design {
	html.ims-embed:is(:root, #v#v#v) body :is(.ims-sitebar, #ims-footer) { display: none !important; } /* нові шапка й футер — так само, як старі */
	html.ims-embed-home:is(:root, #v#v#v) body { overflow: hidden !important; }
	html.ims-embed-home:is(:root, #v#v#v) body .ims-account-card { padding: 2px 4px 4px !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; }
	html.ims-embed-home:is(:root, #v#v#v) body :is(.ims-account-heading, .ims-account-auth-tabs) { display: none !important; }
	html.ims-embed-home:is(:root, #v#v#v) body.login { min-width: 0 !important; background: transparent !important; }
	html.ims-embed-home:is(:root, #v#v#v) body.login #login { width: auto !important; max-width: none !important; margin: 0 !important; padding: 2px 4px 4px !important; }
	html.ims-embed-home:is(:root, #v#v#v) body.login :is(#login > h1, #backtoblog, .privacy-policy-page-link, .language-switcher) { display: none !important; }
	html.ims-embed-home:is(:root, #v#v#v) body.login #login :is(form, .message, .notice) { margin-top: 0 !important; box-shadow: none !important; }
	html.ims-embed-home.ims-embed-compact:is(:root, #v#v#v) body .ims-account-form-note { display: none !important; }
	html.ims-embed-home.ims-embed-tight:is(:root, #v#v#v) body .ims-account-form { gap: 10px !important; }
	html.ims-embed-home.ims-embed-tight:is(:root, #v#v#v) body .ims-account-form-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; } /* ім'я й прізвище — поруч */
	html.ims-embed-home.ims-embed-tight:is(:root, #v#v#v) body .ims-account-verification-intro { margin-bottom: 8px !important; }
	html.ims-embed-home.ims-embed-min:is(:root, #v#v#v) body .ims-account-form label > span:not(:only-child) { font-size: 12.5px !important; }
	/* Реєстрація з організацією й посадою: на найщільнішому рівні — нижчі поля й менші проміжки (усе видно без прокручування). */
	html.ims-embed-home.ims-embed-tight:is(:root, #v#v#v) body .ims-account-field { gap: 4px !important; }
	html.ims-embed-home.ims-embed-tight:is(:root, #v#v#v) body .ims-account-field > label { font-size: 12.5px !important; }
	html.ims-embed-home.ims-embed-min:is(:root, #v#v#v) body .ims-account-form { gap: 7px !important; }
	html.ims-embed-home.ims-embed-min:is(:root, #v#v#v) body .ims-account-field > :is(input, select) { min-height: 36px !important; height: 36px !important; padding-top: 0 !important; padding-bottom: 0 !important; font-size: 15px !important; }
	html.ims-embed-home.ims-embed-min:is(:root, #v#v#v) body .ims-account-form-grid { gap: 7px 8px !important; }
	html.ims-embed-home.ims-embed-min:is(:root, #v#v#v) body .ims-account-check { font-size: 12px !important; line-height: 1.35 !important; }
	html.ims-embed-home.ims-embed-min:is(:root, #v#v#v) body .ims-account-primary-btn { min-height: 40px !important; }
	/* Реєстрація на найменшому екрані: підписи полів — у підказках полів (підписи лишаються для читачів екрана). */
	html.ims-embed-home.ims-embed-min:is(:root, #v#v#v) body .ims-account-register-form .ims-account-field > label { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; }
}

/* ---------------------------------------------------------------- 6. Поля у фокусі — без темної обводки (увесь сайт) */
/* Старі шари малювали полю у фокусі темний або синій контур. Одне правило для всіх сторінок і вікна входу: край поля
   трохи темнішає й з'являється м'який ореол — фокус помітний, але без чорної рамки. Прапорці й перемикачі не змінюються. */
@layer ims-design {
	html:is(:root, #f#f#f#f#f#f) body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="range"]):not([type="file"]):not([type="color"]), select, textarea):is(:focus, :focus-visible):not(:is(.ir-search, .imsc-search, .fx-search-field, .fx-filter-search, .ims-crm-search, .ims-cm-search, .ims-consult-search, .ims-news-search, .imsnr-search, .ims-ai-search, .imsc-pick-search, .ims-cm-panel-search, .ims-section-search, .ims-404-search, .search-form, .wp-block-search__inside-wrapper, .ims-cab-search, .ir-document-search, .ims-crm-filter, .ims-crm-side-search) *) {
		outline: none !important;
		border-color: var(--imscco-text-2) !important;
		box-shadow: 0 0 0 4px rgba(var(--imscco-ink-rgb), .08) !important;
	}
	/* Поле всередині капсули пошуку: фокус показує сама капсула (ims-workzones / ims-dashboards). */
	html:is(:root, #f#f#f#f#f#f) body :is(.ir-search, .imsc-search, .fx-search-field, .fx-filter-search, .ims-crm-search, .ims-cm-search, .ims-consult-search, .ims-news-search, .imsnr-search, .ims-ai-search, .imsc-pick-search, .ims-cm-panel-search, .ims-section-search, .ims-404-search, .search-form, .wp-block-search__inside-wrapper, .ims-cab-search, .ir-document-search, .ims-crm-filter, .ims-crm-side-search) :is(input, input[type="search"]):is(:focus, :focus-visible) {
		outline: none !important;
		border-color: transparent !important;
		background: transparent !important;
		box-shadow: none !important;
	}
}

/* ---------------------------------------------------------------- 7. Графітова тема: світлі кнопки й плашки старих сторінок */
/* Старі шари малювали на сторінках правових документів, архіву новин, 404 і консультацій білі кнопки, чипи й картки —
   у Графітовій темі світлий текст на них зливався із заливкою. Тут вони — прозоре скло з контрастним текстом. */
@layer ims-design {
	html[data-theme="graphite"]:is(:root, #g#g#g#g#g#g) body :is(.ims-legal-tool, .ims-legal-size, .ims-legal-meta li, .ims-legal-docs a[aria-current="page"], .ims-legal-foot a, .ims-404-btn:not(.is-dark), .ims-consult-row-more, #ims-account-workspace .ims-cab-file-ext) {
		background: rgba(255, 255, 255, .08) !important;
		border-color: rgba(255, 255, 255, .16) !important;
		color: var(--imscco-text) !important;
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14) !important;
	}
	html[data-theme="graphite"]:is(:root, #g#g#g#g#g#g) body :is(.ims-legal-tool, .ims-legal-size button, .ims-legal-foot a, .ims-404-btn:not(.is-dark), .ims-consult-row-more):hover {
		background: rgba(255, 255, 255, .16) !important;
		color: var(--imscco-text) !important;
	}
	html[data-theme="graphite"]:is(:root, #g#g#g#g#g#g) body .ims-legal-tools {
		background: rgba(0, 0, 0, .16) !important;
		border-color: rgba(255, 255, 255, .1) !important;
	}
	html:is(:root, #g#g#g#g#g#g) body :is(.ims-404-card, .ims-consult-list, .ast-archive-description, :is(.archive, .search, .blog) .blog-layout-4) {
		background: var(--imscco-glass) !important;
		border-color: rgba(var(--imscco-ink-rgb), .14) !important;
		color: var(--imscco-text) !important;
		-webkit-backdrop-filter: var(--imscco-frost) !important;
		backdrop-filter: var(--imscco-frost) !important;
	}
	html:is(:root, #g#g#g#g#g#g) body .ims-404-btn.is-dark {
		background: var(--imscco-btn) !important;
		color: var(--imscco-btn-text) !important;
		-webkit-text-fill-color: currentColor !important;
	}
}

/* ---------------------------------------------------------------- 8. Контакти: теми підтримки й акцентні кнопки */
/* Старий шар фарбував склом кожен елемент із «bg-gray-50» у класі — разом із класом наведення, який лишається на щойно
   вибраній темі, тож вибір було не видно. Тут стани явні: невибрана тема — скло, вибрана — опукла пластина з рамкою. */
@layer ims-design {
	html:is(:root, #g#g#g#g#g#g) body #ims-contact-page .faq-btn {
		background: rgba(255, 255, 255, .34) !important;
		border-color: rgba(var(--imscco-ink-rgb), .12) !important;
		color: var(--imscco-text-2) !important;
		box-shadow: none !important;
	}
	html:is(:root, #g#g#g#g#g#g) body #ims-contact-page .faq-btn:hover {
		background: rgba(255, 255, 255, .55) !important;
	}
	html:is(:root, #g#g#g#g#g#g) body #ims-contact-page .faq-btn[class*="bg-ims-mint"] {
		background: #FFFFFF !important;
		border-color: rgba(var(--imscco-ink-rgb), .45) !important;
		color: var(--imscco-text) !important;
		box-shadow: var(--imscco-raised, 0 1px 2px rgba(39, 42, 46, .08)) !important;
	}
	html[data-theme="graphite"]:is(:root, #g#g#g#g#g#g) body #ims-contact-page .faq-btn {
		background: rgba(255, 255, 255, .06) !important;
	}
	html[data-theme="graphite"]:is(:root, #g#g#g#g#g#g) body #ims-contact-page .faq-btn:hover {
		background: rgba(255, 255, 255, .12) !important;
	}
	html[data-theme="graphite"]:is(:root, #g#g#g#g#g#g) body #ims-contact-page .faq-btn[class*="bg-ims-mint"] {
		background: rgba(255, 255, 255, .2) !important;
		border-color: rgba(255, 255, 255, .6) !important;
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2) !important;
	}
	/* Акцентні кнопки («Запросити рахунок», «Все одно потрібна допомога»): у Графітовій темі — скло з контрастним текстом. */
	html[data-theme="graphite"]:is(:root, #g#g#g#g#g#g) body #ims-contact-page .bg-ims-mint:not(.faq-btn) {
		background: rgba(255, 255, 255, .12) !important;
		border: 1px solid rgba(255, 255, 255, .22) !important;
		color: var(--imscco-text) !important;
	}
	html[data-theme="graphite"]:is(:root, #g#g#g#g#g#g) body #ims-contact-page .bg-ims-mint:not(.faq-btn):hover {
		background: rgba(255, 255, 255, .2) !important;
	}
	html[data-theme="graphite"]:is(:root, #g#g#g#g#g#g) body #ims-contact-page .bg-ims-mint:not(.faq-btn) * {
		color: inherit !important;
	}
}

/* Діалог «Прикріпити з хмарного сховища»: поле пошуку — без власної рамки й тла всередині капсули; капсула у фокусі —
   м'який ореол без синього контуру. */
@layer ims-design {
	html:is(:root, #f#f#f#f#f#f) body .imsc-pick-search :is(input, input[type="search"]) {
		border: 0 !important;
		border-radius: 0 !important;
		background: transparent !important;
		box-shadow: none !important;
		outline: none !important;
	}
	html:is(:root, #f#f#f#f#f#f) body .imsc-pick-search:focus-within {
		outline: none !important;
		border-color: var(--imscco-text-2) !important;
		box-shadow: 0 0 0 4px rgba(var(--imscco-ink-rgb), .08) !important;
	}
	/* Плитки значків сервісів (кабінет → підписка, сторінка тарифів): у Графітовій темі — скло зі світлим значком. */
	html[data-theme="graphite"]:is(:root, #g#g#g#g#g#g) body :is(.ims-plan-icon, .ims-pp-icon) {
		background: rgba(255, 255, 255, .1) !important;
		border-color: rgba(255, 255, 255, .18) !important;
		color: var(--imscco-text) !important;
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14) !important;
	}
}

/* Графітова тема: системні елементи браузера (прапорці, перемикачі, смуги прокручування) — темні. */
:root[data-theme="graphite"] { color-scheme: dark; }