/* ===== Оболонка сайту в новому дизайні (режим за cookie): шапка, меню, промо, підвал, модалки входу/реєстрації =====
   Підключається макетом views/layouts/frontend.php лише з класом body.tb-chrome. Розмітка — класична (NavBar/Nav),
   тут — тільки оформлення у токенах бети (beta.css задає змінні на :root, але на класичних сторінках його може не бути,
   тому змінні дублюємо). */
body.tb-chrome {
    --ink: #263238; --ink-2: #40596b; --ink-3: #78909c; --ink-shadow: #102027;
    --line: #e2e8ec; --line-2: #cfd8dc; --paper: #f4f6f8; --card: #fff;
    --go: #ffab00; --go-d: #e69500; --orange: #f48617; --orange-d: #e65100; --sun: #ffe082; --sky: #42a5f5; --mint: #26a69a; --coral: #ef5350; --grape: #7e57c2; --pink: #ec407a;
    --f-body: 'Fira Sans', 'Segoe UI', Roboto, sans-serif; --f-display: 'Fira Sans', 'Segoe UI', Roboto, sans-serif;
    font-family: var(--f-body);
    background: var(--paper);
    color: var(--ink);
}
/* ---- шапка ---- */
body.tb-chrome .main-nav { min-height: 64px; background: #fff; box-shadow: none; border-bottom: 2px solid var(--line); }
body.tb-chrome .main-nav .navbar-brand { padding: 9px 12px !important; }
body.tb-chrome .main-nav .navbar-brand { display: inline-flex; align-items: center; gap: 10px; height: 64px; color: var(--ink-2) !important; text-decoration: none !important; }
body.tb-chrome .main-nav .navbar-brand img { display: none; }
body.tb-chrome .main-nav .navbar-brand::before { content: ''; display: block; width: 38px; height: 38px; background: url(/img/logo.png) center / contain no-repeat; transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); }
body.tb-chrome .main-nav .navbar-brand::after { content: 'На Урок'; font: 700 18px/1 var(--f-display); color: var(--ink-2); white-space: nowrap; }
body.tb-chrome .main-nav .navbar-brand:hover::before { transform: rotate(-12deg); }
@media (max-width: 400px) { body.tb-chrome .main-nav .navbar-brand::after { display: none; } }
body.tb-chrome .main-nav .navbar-nav > li > a { padding: 20px 10px; font: 700 15px/24px var(--f-body); color: var(--ink); border-radius: 0; position: relative; }
body.tb-chrome .main-nav .navbar-nav > li > a:hover, body.tb-chrome .main-nav .navbar-nav > li > a:focus { color: var(--orange-d); background: transparent; }
body.tb-chrome .main-nav .navbar-nav > li > a::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: 10px; height: 3px; border-radius: 2px; background: var(--go); opacity: 0; transition: opacity .15s; }
body.tb-chrome .main-nav .navbar-nav > li.active > a { color: var(--ink) !important; background: transparent; }
body.tb-chrome .main-nav .navbar-nav > li.active > a::after, body.tb-chrome .main-nav .navbar-nav > li > a:hover::after { opacity: 1; }
/* іконка пошуку — фон-картинка: загальне «background: transparent» на hover її стирало */
body.tb-chrome .main-nav .navbar-nav > li > a.head-search-icon,
body.tb-chrome .main-nav .navbar-nav > li > a.head-search-icon:focus { background: transparent url(/img/homepage/search-head.svg) no-repeat center / 18px auto; }
body.tb-chrome .main-nav .navbar-nav > li > a.head-search-icon:hover { background: transparent url(/img/homepage/search.svg) no-repeat center / 18px auto; }
body.tb-chrome .main-nav .navbar-nav > li > a.head-search-icon::after { display: none; }
/* класичні 66px іконки пошуку робили шапку на 2px вищою за 64px — пункти меню, «Додати» й аватар зсувалися з центру */
body.tb-chrome .main-nav .navbar-nav > li > a.head-search-icon { height: 64px; padding-top: 0; padding-bottom: 0; }
/* site.css: .navbar-header { min-height: 66px } — під класичну 66px шапку; у новій шапці все — 64px */
body.tb-chrome .main-nav .navbar-header, body.tb-chrome .main-nav .navbar-collapse { min-height: 64px; }
body.tb-chrome .main-nav .navbar-nav > li > a sup { color: var(--coral); font-weight: 800; }
body.tb-chrome .main-nav .tb-menu-sup { display: inline-block; vertical-align: super; margin-left: 2px; padding: 1px 5px; border-radius: 999px; background: var(--go); color: #fff !important; font: 800 9.5px/1.2 var(--f-display); letter-spacing: .02em; }
body.tb-chrome .main-nav .dropdown-menu .tb-menu-sup { vertical-align: 1px; }
body.tb-chrome .main-nav .navbar-nav > .open > a, body.tb-chrome .main-nav .navbar-nav > .open > a:hover, body.tb-chrome .main-nav .navbar-nav > .open > a:focus { background: var(--paper); color: var(--ink); border-radius: 12px 12px 0 0; }
body.tb-chrome .main-nav .dropdown-menu { margin-top: 0; padding: 8px; border: 2px solid var(--line); border-radius: 0 14px 14px 14px; box-shadow: 0 6px 0 var(--line), 0 18px 40px rgba(38, 50, 56, .14); font-size: 14.5px; min-width: 240px; }
body.tb-chrome .main-nav .dropdown-menu-right, body.tb-chrome .main-nav .navbar-right .dropdown-menu { border-radius: 14px 0 14px 14px; }
body.tb-chrome .main-nav .dropdown-menu > li > a { padding: 8px 12px; border-radius: 9px; color: var(--ink); font-weight: 600; }
body.tb-chrome .main-nav .dropdown-menu > li > a:hover, body.tb-chrome .main-nav .dropdown-menu > li > a:focus { background: #fff8e1; color: var(--ink); }
body.tb-chrome .main-nav .dropdown-menu > li.divider { margin: 6px 4px; background: var(--line); }
body.tb-chrome .main-nav .dropdown-menu .fa { color: var(--ink-3); width: 18px; text-align: center; margin-right: 4px; }
/* «+ Додати» — головна дія шапки */
body.tb-chrome .main-nav .library_button > a { margin: 11px 6px 0 8px !important; padding: 9px 16px !important; min-height: 42px; height: auto !important; border: 0 !important; border-radius: 12px !important; background: var(--go) !important; color: #fff !important; text-shadow: 0 1px 0 rgba(0, 0, 0, .18); font: 800 15px/22px var(--f-body) !important; box-shadow: 0 4px 0 var(--go-d) !important; text-transform: none !important; }
body.tb-chrome .main-nav .library_button > a .fa { font-size: 14px; margin-right: 2px; }
body.tb-chrome .main-nav .library_button > a .caret { margin-left: 4px; border-top-color: #fff; }
body.tb-chrome .main-nav .library_button > a::after { display: none; }
body.tb-chrome .main-nav .library_button > a:hover, body.tb-chrome .main-nav .library_button > a:focus, body.tb-chrome .main-nav .library_button.open > a { background: #ffbf3d !important; color: #fff !important; }
body.tb-chrome .main-nav .library_button > a:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--go-d) !important; }
body.tb-chrome .main-nav .library_button.open > a { border-radius: 12px 12px 0 0 !important; }
/* аватар і меню профілю */
body.tb-chrome .main-nav .profile-avatar-menu > a { padding-top: 11px !important; padding-bottom: 11px !important; }
body.tb-chrome .main-nav .profile-avatar-menu > a::after { display: none; }
body.tb-chrome .main-nav .profile-avatar-menu .profile-avatar { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--go); }
/* пошук у шапці */
body.tb-chrome .main-nav .head-search-input .form-control { height: 42px; border: 2px solid var(--line); border-radius: 12px; background: var(--paper); box-shadow: none; font-family: var(--f-body); }
body.tb-chrome .main-nav .head-search-input .form-control:focus { border-color: var(--sky); background: #fff; }
/* гість: Вхід / Реєстрація */
body.tb-chrome .main-nav .navbar-right > li > a[href$="/registration"], body.tb-chrome .main-nav .navbar-right > li > a[href="/registration"] { margin: 11px 4px 0 6px; padding: 9px 16px !important; min-height: 42px; line-height: 22px; border-radius: 12px; border: 2px solid var(--ink); color: var(--ink) !important; font-weight: 800; }
body.tb-chrome .main-nav .navbar-right > li > a[href$="/registration"]::after { display: none; }
/* мобільна шапка */
body.tb-chrome .main-nav .navbar-toggle { margin: 13px 12px; padding: 9px; border: 2px solid var(--line); border-radius: 12px; }
body.tb-chrome .main-nav .navbar-toggle .icon-bar { background: var(--ink); height: 3px; border-radius: 2px; }
body.tb-chrome .main-nav .navbar-toggle:hover, body.tb-chrome .main-nav .navbar-toggle:focus { background: var(--paper); }
@media (max-width: 767px) {
    body.tb-chrome .main-nav .navbar-collapse { border-top: 2px solid var(--line); background: #fff; }
    body.tb-chrome .main-nav .navbar-nav > li > a { padding: 12px 16px; }
    body.tb-chrome .main-nav .navbar-nav > li > a::after { display: none; }
    body.tb-chrome .main-nav .navbar-nav > li.active > a { background: #fff8e1; border-radius: 10px; }
    body.tb-chrome .main-nav .dropdown-menu { box-shadow: none; border: 0; border-left: 3px solid var(--go); border-radius: 0; margin: 0 16px 8px; }
    body.tb-chrome .main-nav .library_button > a { margin: 8px 16px; display: inline-block; }
    body.tb-chrome .main-nav .navbar-right > li > a[href$="/registration"] { display: inline-block; margin: 8px 16px; }
}
/* ---- промо під шапкою (конкурс, вебінар, технічні роботи) ---- */
body.tb-chrome .contest-promo { border-bottom: 2px solid var(--line); font-family: var(--f-body); }
body.tb-chrome .contest-promo .sth-btn-shaped-lime { border-radius: 12px !important; font-family: var(--f-body); font-weight: 800; letter-spacing: 0; text-transform: none; }
body.tb-chrome .header-promo-webinar { background: var(--ink); color: #fff; font-family: var(--f-body); }
/* конкурс «Фантастична п’ятірка» (views/beta/_contest_promo.php): картка під шапкою */
/* на всю ширину під шапкою (як класична смуга промо), вміст — у полях сторінки */
body.tb-chrome .tb-contest { padding: 0; }
body.tb-chrome .tb-contest-card {
    position: relative; overflow: hidden; display: flex; align-items: center; gap: 22px; width: 100%; margin: 0;
    /* фон — на всю ширину, вміст — у межах області сторінки (контейнер 1280px з полями 10px, як body.tb-chrome > .tb-embedded) */
    padding: 14px max(10px, calc((100% - 1260px) / 2));
    border: 0; border-bottom: 2px solid #ffd54f; border-radius: 0; color: var(--ink); text-decoration: none !important; font-family: var(--f-body);
    background:
        radial-gradient(320px 180px at 100% 0%, rgba(255, 171, 0, .35), transparent 70%),
        linear-gradient(100deg, #fff8e1 0%, #ffecb3 100%);
}
body.tb-chrome .tb-contest-card:hover { color: var(--ink); background-color: #ffecb3; }
body.tb-chrome .tb-contest-days {
    display: flex; align-items: center; gap: 10px; flex: none; padding: 10px 16px 10px 12px; border-radius: 16px;
    background: var(--ink); color: #fff; box-shadow: 0 4px 0 var(--ink-shadow);
}
body.tb-chrome .tb-contest-days b { font: 900 40px/1 var(--f-display); color: var(--go); }
body.tb-chrome .tb-contest-days span { font: 700 12px/1.25 var(--f-body); color: rgba(255, 255, 255, .8); }
body.tb-chrome .tb-contest-text { display: flex; flex-direction: column; flex: 1; min-width: 0; gap: 2px; }
body.tb-chrome .tb-contest-kicker { font: 800 12px/1.2 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
body.tb-chrome .tb-contest-text strong { font: 800 24px/1.15 var(--f-display); color: var(--ink); }
body.tb-chrome .tb-contest-sub { font: 600 15px/1.35 var(--f-body); color: var(--ink-2); }
body.tb-chrome .tb-contest-btn {
    position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; flex: none; min-height: 48px; padding: 10px 20px;
    border-radius: 14px; background: var(--ink); color: #fff; font: 800 16px/1 var(--f-body);
    box-shadow: 0 5px 0 var(--ink-shadow); /* не «Додати» — тож не бурштин (DESIGN.md §2.1) */ transition: transform .08s, box-shadow .08s;
}
body.tb-chrome .tb-contest-btn svg { width: 18px; height: 18px; }
body.tb-chrome .tb-contest-card:hover .tb-contest-btn { background: #37474f; box-shadow: 0 6px 0 var(--ink-shadow); }
body.tb-chrome .tb-contest-card:active .tb-contest-btn { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink-shadow); }
@media (max-width: 991px) {
    body.tb-chrome .tb-contest-card { gap: 14px; padding-top: 12px; padding-bottom: 12px; }
    body.tb-chrome .tb-contest-text strong { font-size: 19px; }
    body.tb-chrome .tb-contest-sub { display: none; }
}
/* на телефоні поля сторінки — 16px (theme/_layout.css) */
@media (max-width: 767px) { body.tb-chrome .tb-contest-card { padding-left: 16px; padding-right: 16px; } }
/* ---- підвал ---- */
body.tb-chrome .site-footer { font-family: var(--f-body); }
body.tb-chrome .site-footer__document-check { background: var(--ink-2); padding: 28px 0; }
body.tb-chrome .site-footer__document-check .text-center:first-child { font: 800 18px/1.3 var(--f-display); color: #fff; margin-bottom: 4px; }
body.tb-chrome .site-footer__document-check .text-center:nth-child(2) { font: 500 14px/1.4 var(--f-body); color: rgba(255, 255, 255, .8); margin-bottom: 14px; }
/* форма перевірки документа: поле і кнопка — один з’єднаний контрол дизайн-системи */
body.tb-chrome .site-footer__form { display: flex; align-items: stretch; width: min(560px, 100%); margin: 0 auto; }
body.tb-chrome .site-footer__input-wrapper { flex: 1 1 auto; min-width: 0; padding: 0 !important; margin: 0 !important; }
body.tb-chrome .site-footer__button-wrapper { flex: none; padding: 0 !important; margin: 0 !important; }
body.tb-chrome .site-footer__form input { display: block; width: 100% !important; max-width: none !important; margin: 0 !important; height: 48px; padding: 10px 16px; border: 2px solid transparent; border-right: 0; border-radius: 12px 0 0 12px; background: #fff; color: var(--ink); font: 600 16px/1.3 var(--f-body); outline: none; box-shadow: none; transition: border-color .15s; }
body.tb-chrome .site-footer__form input::placeholder { color: var(--ink-3); font-weight: 500; }
body.tb-chrome .site-footer__form input:focus { border-color: var(--sky); }
body.tb-chrome .site-footer__form button { display: block; height: 48px; margin: 0 !important; padding: 10px 22px; border: 0; border-radius: 0 12px 12px 0; background: var(--go); color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, .18); font: 800 15px/1.2 var(--f-body); text-transform: none; letter-spacing: 0; cursor: pointer; transition: background .15s; white-space: nowrap; }
body.tb-chrome .site-footer__form button:hover { background: #ffbf3d; }
body.tb-chrome .site-footer__form button:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }
@media (max-width: 480px) { body.tb-chrome .site-footer__form button { padding: 10px 14px; font-size: 14px; } }
body.tb-chrome .site-footer__main { background: var(--ink); }
body.tb-chrome .site-footer__title { font: 800 15px/1.3 var(--f-display); letter-spacing: .02em; }
body.tb-chrome .site-footer__item a { color: rgba(255, 255, 255, .85); }
body.tb-chrome .site-footer__item a:hover { color: var(--go); }
body.tb-chrome .site-footer .button--primary { border-radius: 12px; background: var(--go); color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, .18); font-weight: 800; box-shadow: 0 4px 0 var(--go-d); }
/* «Зворотний зв'язок»: текст по центру в один рядок, висота як у .tb-btn (класика давала фіксовану ширину й перенос) */
body.tb-chrome .site-footer .button--primary { display: inline-flex; align-items: center; justify-content: center; width: auto; min-width: 0; min-height: 44px; height: auto; padding: 10px 18px; text-align: center; white-space: nowrap; line-height: 1.1; }
/* заголовки колонок — блоками, щоб однорядковий і дворядковий заголовок починалися на одній лінії */
body.tb-chrome .site-footer__title { display: block; }
body.tb-chrome .site-footer__social-item { border-radius: 12px; }
body.tb-chrome .site-footer__copyright { border-top-color: rgba(255, 255, 255, .15); }
body.tb-chrome .site-footer hr { border-color: rgba(255, 255, 255, .15); }
body.tb-chrome .olymp5-promo { font-family: var(--f-body); }
/* ---- модалки входу / реєстрації / тек ---- */
body.tb-chrome .modal-content { border: 2px solid var(--line); border-radius: 20px; box-shadow: 0 6px 0 var(--line), 0 24px 60px rgba(38, 50, 56, .22); font-family: var(--f-body); }
body.tb-chrome .modal-header { border-bottom: 1px solid var(--line); }
body.tb-chrome .modal-header .modal-title, body.tb-chrome .modal .h1-block { font: 800 22px/1.2 var(--f-display); color: var(--ink); }
body.tb-chrome .modal .close { opacity: .6; font-size: 28px; }
body.tb-chrome .modal .form-control, body.tb-chrome .sth-form .form-control { min-height: 46px; border: 2px solid var(--line); border-radius: 12px; box-shadow: none; font-family: var(--f-body); font-size: 15px; }
body.tb-chrome .modal .form-control:focus, body.tb-chrome .sth-form .form-control:focus { border-color: var(--sky); box-shadow: none; }
body.tb-chrome .modal .btn-orange, body.tb-chrome .sth-form .btn-orange, body.tb-chrome .modal .btn-primary, body.tb-chrome .sth-form .btn-primary { min-height: 46px; padding: 10px 18px; border: 0; border-radius: 12px; background: var(--go); color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, .18); font: 800 15px/1.2 var(--f-body); box-shadow: 0 4px 0 var(--go-d); text-transform: none; }
body.tb-chrome .modal .btn-orange:hover, body.tb-chrome .sth-form .btn-orange:hover, body.tb-chrome .modal .btn-primary:hover, body.tb-chrome .sth-form .btn-primary:hover { background: #ffbf3d; color: #fff; }
body.tb-chrome .modal .btn-default, body.tb-chrome .sth-form .btn-default { min-height: 46px; border: 2px solid var(--line-2); border-radius: 12px; background: #fff; color: var(--ink); font: 700 15px/1.2 var(--f-body); }
body.tb-chrome .modal .btn-facebook, body.tb-chrome .sth-form .btn-facebook, body.tb-chrome .modal .btn-google, body.tb-chrome .sth-form .btn-google { border-radius: 12px; font-family: var(--f-body); font-weight: 700; }
body.tb-chrome .modal a { color: var(--ink-2); font-weight: 600; }
body.tb-chrome .modal a:hover { color: var(--orange-d); }
/* загальні елементи класичних сторінок, що ще не в темі: трохи ближче до бети, без зміни розмітки */
body.tb-chrome .h1-block { font-family: var(--f-display); font-weight: 800; color: var(--ink); }
body.tb-chrome .btn-orange { border-radius: 12px; font-family: var(--f-body); font-weight: 800; background: var(--go); border-color: var(--go); color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, .18); }
body.tb-chrome .btn-orange:hover, body.tb-chrome .btn-orange:focus { background: #ffbf3d; border-color: #ffbf3d; color: #fff; }
/* класичні .btn-primary / .btn-success на сторінках поза темою (/library/awards тощо) — основна кнопка, як у DESIGN.md §2.1
   (були темно-сірі/зелені з кутами 3px); .btn-default — другорядна */
body.tb-chrome .btn-primary:not(.navbar *), body.tb-chrome .btn-success:not(.navbar *) { border: 0; border-radius: 12px; background: var(--go); color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, .18); font-family: var(--f-body); font-weight: 800; box-shadow: 0 4px 0 var(--go-d); }
body.tb-chrome .btn-primary:not(.navbar *):hover, body.tb-chrome .btn-primary:not(.navbar *):focus, body.tb-chrome .btn-success:not(.navbar *):hover, body.tb-chrome .btn-success:not(.navbar *):focus { background: #ffbf3d; color: #fff; }
body.tb-chrome .btn-default:not(.navbar *) { border: 2px solid var(--line-2); border-radius: 12px; background: #fff; color: var(--ink); font-family: var(--f-body); font-weight: 700; }
body.tb-chrome .btn-default:not(.navbar *):hover { border-color: var(--ink-3); background: #fff; color: var(--ink); }
/* класичні кнопки (.btn-orange на /five тощо) — без великих літер, як .tb-btn */
body.tb-chrome .btn:not(.navbar *) { text-transform: none; letter-spacing: .01em; }
body.tb-chrome .content-block { border-radius: 16px; }
/* ---- блок «Підтвердіть ім’я» (views/layouts/_confirm_name.php) ---- */
body.tb-chrome .confirm-name { font-family: var(--f-body); }
body.tb-chrome .confirm-name__inner { border-radius: 16px; border: 2px solid var(--line); background: #fff8e1; box-shadow: 0 4px 0 var(--line); }
body.tb-chrome .confirm-name__title { font-weight: 800; color: var(--ink); }
body.tb-chrome .confirm-name__hint { color: var(--ink-2); }
body.tb-chrome .confirm-name__input { min-height: 44px; padding: 8px 12px; border: 2px solid var(--line-2); border-radius: 12px; background: #fff; font: 500 15px/1.3 var(--f-body); color: var(--ink); box-shadow: none; }
body.tb-chrome .confirm-name__input:focus { border-color: var(--sky); outline: none; }
body.tb-chrome .confirm-name__btn { min-height: 44px; padding: 8px 18px; border: 0; border-radius: 12px; background: var(--go); color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, .18); font: 800 15px/1.2 var(--f-body); box-shadow: 0 4px 0 var(--go-d); cursor: pointer; }
body.tb-chrome .confirm-name__btn:hover { background: #ffbf3d; }
/* ---- плаваюче промо «В прямому ефірі» (views/site/_promo_live_event.php, інлайн-стилі → перекриваємо) ---- */
body.tb-chrome .video-preview-promo { width: 340px !important; padding: 14px 16px 16px !important; border-radius: 18px; border: 2px solid var(--line); box-shadow: 0 6px 0 var(--line), 0 18px 40px rgba(38, 50, 56, .18) !important; font-family: var(--f-body); animation: none !important; }
body.tb-chrome .video-preview-promo > div:first-child { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 10px !important; padding: 4px 10px; border-radius: 999px; background: #ffebee; color: var(--coral) !important; font: 800 12px/1.2 var(--f-display) !important; text-transform: uppercase; letter-spacing: .04em; }
body.tb-chrome .video-preview-promo > div:first-child .fa { font-size: 9px; }
body.tb-chrome .video-preview-promo > a[onclick] { top: 12px !important; right: 12px !important; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--paper); color: var(--ink-2) !important; font-size: 18px; line-height: 1; text-decoration: none; }
body.tb-chrome .video-preview-promo > a[onclick]:hover { background: var(--line); }
body.tb-chrome .video-preview-promo .click-video-preview { padding: 0 !important; border-radius: 12px; border: 2px solid var(--line); transition: border-color .15s; }
body.tb-chrome .video-preview-promo .click-video-preview:hover { background: none; border-color: var(--go); }
body.tb-chrome .video-preview-promo > div:last-child { margin-top: 10px !important; font: 700 14px/1.35 var(--f-body) !important; color: var(--ink); }
@media (max-width: 640px) {
    body.tb-chrome .video-preview-promo { left: 16px; right: 16px !important; bottom: 12px !important; width: auto !important; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 4px 12px; align-items: center; padding: 10px 44px 10px 10px !important; }
    body.tb-chrome .video-preview-promo > div:first-child { grid-column: 2; margin: 0 !important; justify-self: start; }
    body.tb-chrome .video-preview-promo > a:not([onclick]) { grid-column: 1; grid-row: 1 / span 2; }
    body.tb-chrome .video-preview-promo > div:last-child { grid-column: 2; margin: 0 !important; font-size: 13px !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}
/* ---- слайд-апи вебінару/конференції та модалка конференції (views/site/_promo_slide_webinar.php, _promo_conference.php) ---- */
body.tb-chrome .webinar-slideup-promo-wrapper, body.tb-chrome .conference-slideup-promo-wrapper { font-family: var(--f-body); border-top: 2px solid var(--line); box-shadow: 0 -12px 40px rgba(38, 50, 56, .16); }
body.tb-chrome .webinar-slideup-promo-inner, body.tb-chrome .conference-slideup-promo-inner { background: rgba(255, 255, 255, .94); padding: 14px 0; }
body.tb-chrome .webinar-promo-name, body.tb-chrome .conference-promo-name { font: 700 14px/1.3 var(--f-body); color: var(--ink-2); }
body.tb-chrome .webinar-promo-title, body.tb-chrome .conference-promo-title { font: 800 18px/1.25 var(--f-display); color: var(--ink); margin: 4px 0; }
body.tb-chrome .webinar-promo-time, body.tb-chrome .conference-promo-time { font: 600 13px/1.3 var(--f-body); color: var(--ink-3); }
body.tb-chrome .webinar-promo-actions .btn, body.tb-chrome .conference-promo-actions .btn { min-height: 46px; padding: 10px 18px; border: 0; border-radius: 12px; background: var(--go); color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, .18); font: 800 15px/1.2 var(--f-body); box-shadow: 0 4px 0 var(--go-d); text-transform: none; }
body.tb-chrome .webinar-promo-actions .btn:hover, body.tb-chrome .conference-promo-actions .btn:hover { background: #ffbf3d; color: #fff; }
body.tb-chrome .webinar-promo-dismiss a, body.tb-chrome .conference-promo-dismiss a { color: var(--ink-3); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
body.tb-chrome .conference-popup-promo { border-radius: 20px; border: 2px solid var(--line); font-family: var(--f-body); }
body.tb-chrome .conference-popup-promo .modal-body { padding: 24px; }
/* ---- чат з постаттю: плаваюче меню «Створити з розмови» (views/beta/_chrome_extras.php) ---- */
body.tb-chrome .tb-chat-actions { position: fixed; z-index: 90; right: 20px; bottom: 20px; font-family: var(--f-body); }
body.tb-chrome .tb-chat-actions-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 8px 16px; border: 0; border-radius: 12px; background: var(--ink); color: #fff; font: 800 15px/1.2 var(--f-body); cursor: pointer; box-shadow: 0 4px 0 var(--ink-shadow), 0 12px 30px rgba(38, 50, 56, .25); transition: transform .1s, box-shadow .1s; }
body.tb-chrome .tb-chat-actions-btn:hover { transform: translateY(-1px); box-shadow: 0 5px 0 var(--ink-shadow), 0 14px 32px rgba(38, 50, 56, .28); }
body.tb-chrome .tb-chat-actions-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--ink-shadow); }
body.tb-chrome .tb-chat-actions-btn:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; }
body.tb-chrome .tb-chat-actions-btn > svg { width: 18px; height: 18px; color: var(--go); }
body.tb-chrome .tb-chat-actions-btn .tb-chat-actions-chevron { width: 16px; height: 16px; color: rgba(255, 255, 255, .7); transition: transform .15s; }
body.tb-chrome .tb-chat-actions.is-open .tb-chat-actions-chevron { transform: rotate(180deg); }
body.tb-chrome .tb-chat-actions-menu { position: absolute; right: 0; bottom: calc(100% + 8px); display: none; min-width: 260px; padding: 8px; border-radius: 14px; background: #fff; border: 2px solid var(--line); box-shadow: 0 6px 0 var(--line), 0 18px 40px rgba(38, 50, 56, .18); }
body.tb-chrome .tb-chat-actions.is-open .tb-chat-actions-menu { display: grid; gap: 2px; }
body.tb-chrome .tb-chat-actions-title { padding: 6px 10px 0; font: 800 14px/1.2 var(--f-display); color: var(--ink); }
body.tb-chrome .tb-chat-actions-title span { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 4px; border-radius: 999px; background: var(--go); color: #fff; font: 800 11px/1 var(--f-display); vertical-align: 2px; }
body.tb-chrome .tb-chat-actions-hint { padding: 2px 10px 8px; font-size: 12.5px; color: var(--ink-3); border-bottom: 1px solid var(--line); margin-bottom: 4px; }
body.tb-chrome .tb-chat-actions-menu a { display: block; min-height: 36px; padding: 8px 12px; border-radius: 9px; color: var(--ink); font: 600 14px/1.3 var(--f-body); text-decoration: none; }
body.tb-chrome .tb-chat-actions-menu a:hover, body.tb-chrome .tb-chat-actions-menu a:focus-visible { background: #fff8e1; color: var(--ink); outline: none; }
body.tb-chrome .tb-chat-actions-menu a.is-all { margin-top: 4px; border-top: 1px solid var(--line); border-radius: 0 0 9px 9px; color: var(--ink-2); }
@media (max-width: 640px) { body.tb-chrome .tb-chat-actions { right: 12px; bottom: 84px; } body.tb-chrome .tb-chat-actions-btn span { font-size: 14px; } body.tb-chrome .tb-chat-actions-menu { min-width: 240px; } }
body.tb-chrome .tb-chat-actions.is-disabled .tb-chat-actions-btn { opacity: .55; cursor: default; box-shadow: 0 4px 0 var(--ink-shadow); transform: none; }
body.tb-chrome .tb-chat-actions.is-disabled .tb-chat-actions-menu { display: none !important; }
/* картинка, якої немає на сервері (позначає views/beta/_chrome_extras.php) — без значка «зламаної» картинки */
body.tb-chrome img[data-tb-broken] { visibility: hidden; }
/* класичні (не перетемлені) сторінки: ті самі 16px полів на телефоні, що й сторінки теми (_layout.css тут не вантажиться) */
@media (max-width: 767px) { body.tb-chrome .container-fluid { padding-left: 16px; padding-right: 16px; } }
/* класична фіксована смуга «Поширити у Facebook» (до 659px) закривала останній рядок футера — запас знизу на її висоту */
@media (max-width: 659px) { body.tb-chrome:has(.fixed-bottom-overlay.socialbar:not(.sth-post-article *)) { padding-bottom: 42px; } }
/* кнопки завжди в один рядок — і на класичних сторінках, де theme/_layout.css не вантажиться */
body.tb-chrome .btn, body.tb-chrome .tb-btn, body.tb-chrome .button { white-space: nowrap !important; max-width: 100%; }
/* /library/awards (класична сторінка): фільтри сертифікатів — один рядок «рік · предмет · пошук», однакова висота 44px */
body.tb-chrome .doc-filters:not(.tb-filters) { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; margin: 0 0 14px; }
body.tb-chrome .doc-filters:not(.tb-filters) .doc-dd { flex: none; }
body.tb-chrome .doc-filters:not(.tb-filters) .doc-dd > .btn { height: 44px; padding: 0 14px; }
body.tb-chrome .doc-filters:not(.tb-filters) .doc-search { flex: 1 1 240px; width: auto; height: 44px; padding: 0 14px; border: 2px solid var(--line-2); border-radius: 12px; box-shadow: none; font: 600 15px/1.2 var(--f-body); color: var(--ink); }
body.tb-chrome .doc-filters:not(.tb-filters) .doc-search:focus { border-color: var(--sky); box-shadow: 0 0 0 4px rgba(41, 121, 255, .18); }
body.tb-chrome .doc-filters:not(.tb-filters) .doc-filters-reset { align-self: center; }
@media (max-width: 640px) { body.tb-chrome .doc-filters:not(.tb-filters) .doc-dd { flex: 1 1 calc(50% - 5px); } body.tb-chrome .doc-filters:not(.tb-filters) .doc-dd > .btn { width: 100%; } }

/* Запрошення на вебінар знизу сторінки (views/beta-theme/site/_promo_slide_webinar.php): біла картка, а не білий текст на білому */
body.tb-chrome .webinar-slideup-promo-wrapper.tb-slideup { left: 0; right: 0; bottom: 0; width: auto; padding: 0 16px 16px; background: none !important; border: 0; box-shadow: none; pointer-events: none; z-index: 200; }
body.tb-chrome .tb-slideup-in { pointer-events: auto; display: flex; align-items: center; gap: 16px; max-width: 1080px; margin: 0 auto; padding: 12px 14px 12px 12px; border: 2px solid var(--line); border-radius: 18px; background: #fff; box-shadow: 0 4px 0 var(--line), 0 18px 40px rgba(38, 50, 56, .18); color: var(--ink); font-family: var(--f-body); }
body.tb-chrome .tb-slideup-img { flex: none; display: block; width: 132px; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; background: var(--paper); }
body.tb-chrome .tb-slideup-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.tb-chrome .tb-slideup-body { flex: 1 1 auto; min-width: 0; display: grid; gap: 4px; }
body.tb-chrome .tb-slideup-kicker { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font: 600 13px/1.3 var(--f-body); color: var(--ink-2); }
body.tb-chrome .tb-slideup-kicker .tb-chip svg { width: 14px; height: 14px; margin-right: 2px; vertical-align: -2px; }
body.tb-chrome .tb-slideup-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font: 800 17px/1.3 var(--f-display); color: var(--ink); }
body.tb-chrome .tb-slideup-time { display: inline-flex; align-items: center; gap: 6px; font: 700 13px/1.3 var(--f-body); color: var(--ink-2); }
body.tb-chrome .tb-slideup-time svg { width: 15px; height: 15px; flex: none; }
body.tb-chrome .tb-slideup-actions { flex: none; display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
body.tb-chrome .tb-slideup-actions .tb-btn { justify-content: center; white-space: nowrap; text-decoration: none !important; }
@media (max-width: 640px) {
    body.tb-chrome .webinar-slideup-promo-wrapper.tb-slideup { padding: 0 8px 8px; }
    body.tb-chrome .tb-slideup-in { flex-wrap: wrap; gap: 10px 12px; padding: 10px; }
    body.tb-chrome .tb-slideup-img { width: 84px; }
    body.tb-chrome .tb-slideup-body { flex-basis: calc(100% - 96px); }
    body.tb-chrome .tb-slideup-title { font-size: 15px; }
    body.tb-chrome .tb-slideup-actions { flex: 1 1 100%; flex-direction: row; }
    body.tb-chrome .tb-slideup-actions .tb-btn { flex: 1 1 0; min-width: 0; }
}
/* Запрошення на конференцію знизу (класична розмітка): класичні правила з білим текстом мають вищу специфічність — перебиваємо */
body.tb-chrome .conference-slideup-promo-wrapper .conference-slideup-promo-inner { background: rgba(255, 255, 255, .97); color: var(--ink); }
body.tb-chrome .conference-slideup-promo-wrapper .conference-slideup-promo-inner .conference-promo-name { color: var(--ink-2); }
body.tb-chrome .conference-slideup-promo-wrapper .conference-slideup-promo-inner .conference-promo-title { color: var(--ink); }
body.tb-chrome .conference-slideup-promo-wrapper .conference-slideup-promo-inner .conference-promo-time,
body.tb-chrome .conference-slideup-promo-wrapper .conference-slideup-promo-inner .conference-promo-time i { color: var(--ink-2); }
body.tb-chrome .conference-slideup-promo-wrapper .conference-slideup-promo-inner .conference-promo-dismiss a { color: var(--ink-3); font-style: normal; text-decoration: underline; text-underline-offset: 3px; }
body.tb-chrome .conference-slideup-promo-wrapper .conference-slideup-promo-inner p { color: var(--ink-2); }
/* поки видно запрошення знизу, картку прямого ефіру піднімаємо над ним, щоб вони не накладалися */
body.tb-chrome:has(.tb-slideup:not(.hide):not(.slideOutDown)) .video-preview-promo { bottom: 164px !important; transition: bottom .3s ease; }
@media (max-width: 640px) { body.tb-chrome:has(.tb-slideup:not(.hide):not(.slideOutDown)) .video-preview-promo { display: none !important; } }