/* ==========================================================================
   На Урок · бета-інтерфейс тестів (/test-beta)
   Фірмові кольори й Fira Sans naurok.com.ua + ігрова подача: товсті натискні кнопки, наліпки.
   Тема paper — конструктор, тема arena — проходження.
   ========================================================================== */

:root {
    /* фірмові кольори naurok.com.ua: бурштинова кнопка #ffab00, помаранчевий #f48617
       (книжка в лого), сіро-сині заголовки #40596b / навбар #263238, індиго #5c6bc0 */
    --ink: #263238;
    --ink-2: #40596b;
    --ink-3: #78909c;
    --paper: #eef1f3;
    --paper-2: #fff8e1;
    --card: #ffffff;
    --line: rgba(38, 50, 56, .10);
    --line-2: rgba(38, 50, 56, .20);

    --go: #ffab00;
    --go-d: #cc8600;
    --orange: #f48617;
    --orange-d: #c0640a;
    --coral: #ff5722;
    --coral-d: #c4401a;
    --sun: #ffc107;
    --sun-d: #c79100;
    --mint: #43a047;
    --mint-d: #2e7d32;
    --sky: #2979ff;
    --sky-d: #1c54c4;
    --grape: #5c6bc0;
    --grape-d: #3f4b94;
    --pink: #ec407a;
    --pink-d: #b42a5a;
    --teal: #00acc1;
    --teal-d: #00838f;

    --arena: #1e2a30;
    --arena-2: #2b3a42;
    --shadow-soft: #cfd8dc;
    --ink-shadow: #11181c;
    --ok-bg: #e8f5e9;
    --bad-bg: #fbe9e7;

    --r-sm: 8px;
    --r: 14px;
    --r-lg: 20px;
    --r-xl: 28px;
    --press: 5px;

    --f-display: 'Fira Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --f-body: 'Fira Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body.tb {
    font-family: var(--f-body);
    font-size: 16px;
    line-height: 1.45;
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    min-height: 100dvh;
}

body.tb-paper {
    background-color: var(--paper);
    background-image:
        radial-gradient(circle at 1px 1px, rgba(38, 50, 56, .09) 1px, transparent 0);
    background-size: 22px 22px;
}

/* Поверхні сцени гри задаються змінними: світла тема naurok для учня й редактора
   і темна сланцева (tb-stage) — для екрана вчителя на проєкторі. */
body.tb-arena, .tb-editor {
    --s-fg: var(--ink);
    --s-muted: var(--ink-2);
    --s-faint: var(--ink-3);
    --s-surface: #fff;
    --s-surface-line: rgba(38, 50, 56, .08);
    --s-chip: #fff;
    --s-chip-hover: #f4f6f7;
    --s-soft: rgba(38, 50, 56, .05);
    --s-soft-2: rgba(38, 50, 56, .09);
    --s-line: rgba(38, 50, 56, .18);
    --s-input: rgba(38, 50, 56, .05);
    --s-shadow: 0 4px 0 rgba(38, 50, 56, .08);
}
body.tb-stage {
    --s-fg: #fff;
    --s-muted: rgba(255, 255, 255, .78);
    --s-faint: rgba(255, 255, 255, .5);
    --s-surface: rgba(255, 255, 255, .07);
    --s-surface-line: rgba(255, 255, 255, .1);
    --s-chip: rgba(255, 255, 255, .1);
    --s-chip-hover: rgba(255, 255, 255, .18);
    --s-soft: rgba(255, 255, 255, .06);
    --s-soft-2: rgba(255, 255, 255, .12);
    --s-line: rgba(255, 255, 255, .25);
    --s-input: rgba(0, 0, 0, .18);
    --s-shadow: none;
}

body.tb-arena {
    color: var(--s-fg);
    background-color: var(--paper);
    background-image:
        radial-gradient(700px 420px at 0% 0%, rgba(255, 171, 0, .10), transparent 60%),
        radial-gradient(600px 420px at 100% 100%, rgba(92, 107, 192, .10), transparent 60%),
        radial-gradient(circle at 1px 1px, rgba(38, 50, 56, .08) 1px, transparent 0);
    background-size: auto, auto, 22px 22px;
    background-attachment: fixed;
    overflow-x: hidden;
}

body.tb-stage {
    color: var(--s-fg);
    background-color: var(--arena);
    background-image:
        radial-gradient(900px 600px at 10% -10%, rgba(92, 107, 192, .35), transparent 60%),
        radial-gradient(700px 500px at 110% 20%, rgba(255, 171, 0, .16), transparent 60%),
        radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .06) 1px, transparent 0);
    background-size: auto, auto, 26px 26px;
    background-attachment: fixed;
    overflow-x: hidden;
}

[v-cloak] { display: none !important; }

a { color: inherit; }
img { max-width: 100%; }

.tb-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* --------------------------------------------------------------------------
   Кнопки: товсті, «натискні»
   -------------------------------------------------------------------------- */

.tb-btn {
    --c: var(--card);
    --c-d: var(--line-2);
    --t: var(--ink);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 18px;
    border: 0;
    border-radius: var(--r);
    background: var(--c);
    color: var(--t);
    font: 800 15px/1.1 var(--f-body);
    letter-spacing: .01em;
    text-decoration: none;
    white-space: nowrap; /* кнопка завжди в один рядок (DESIGN.md §2.1) */
    cursor: pointer;
    box-shadow: 0 var(--press) 0 var(--c-d);
    transform: translateY(0);
    transition: transform .08s ease, box-shadow .08s ease, filter .15s ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
}
.tb-btn:hover { filter: brightness(1.05); }
.tb-btn:active, .tb-btn.is-pressed {
    transform: translateY(calc(var(--press) - 1px));
    box-shadow: 0 1px 0 var(--c-d);
}
.tb-btn:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; }
.tb-btn[disabled], .tb-btn.is-disabled {
    cursor: not-allowed;
    filter: grayscale(.5) opacity(.55);
    transform: none;
}
.tb-btn-ghost { --c: transparent; --c-d: transparent; box-shadow: none; }
.tb-btn-ghost:hover { background: rgba(38, 50, 56, .06); filter: none; }
.tb-stage .tb-btn-ghost { --t: #fff; }
.tb-stage .tb-btn-ghost:hover { background: rgba(255, 255, 255, .1); }
.tb-btn-line { --c: var(--card); --c-d: var(--line-2); border: 2px solid var(--line-2); }
.tb-btn-go { --c: var(--go); --c-d: var(--go-d); --t: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, .18); }
.tb-btn-go:hover { --c: #ffbf3d; filter: none; }
.tb-btn-mint { --c: var(--mint); --c-d: var(--mint-d); --t: #fff; }
.tb-btn-sky { --c: var(--sky); --c-d: var(--sky-d); --t: #fff; }
.tb-btn-coral { --c: var(--coral); --c-d: var(--coral-d); --t: #fff; }
.tb-btn-ink { --c: var(--ink); --c-d: var(--ink-shadow); --t: #fff; }
.tb-btn-white { --c: #fff; --c-d: var(--shadow-soft); --t: var(--ink); }
.tb-btn-ai {
    --c: var(--ink);
    --c-d: var(--ink-shadow);
    --t: #fff;
    background:
        linear-gradient(var(--ink), var(--ink)) padding-box,
        conic-gradient(from var(--spin, 0deg), var(--pink), var(--sun), var(--mint), var(--sky), var(--grape), var(--pink)) border-box;
    border: 2px solid transparent;
    animation: tb-spin-border 4s linear infinite;
}
@property --spin { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes tb-spin-border { to { --spin: 360deg; } }
.tb-btn-sm { min-height: 34px; padding: 7px 12px; font-size: 13px; border-radius: var(--r-sm); --press: 3px; }
.tb-btn-lg { min-height: 52px; padding: 14px 24px; font-size: 17px; }
.tb-btn-xl { min-height: 62px; padding: 16px 28px; font-size: 20px; border-radius: 20px; --press: 6px; width: 100%; font-family: var(--f-display); font-weight: 700; }
.tb-btn-icon { width: 44px; padding: 0; }
.tb-btn-sm.tb-btn-icon { width: 34px; }

.tb-spark { display: inline-block; animation: tb-twinkle 1.8s ease-in-out infinite; }
@keyframes tb-twinkle { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.25) rotate(15deg); } }

.tb-spinner {
    width: 18px; height: 18px;
    border: 3px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: tb-rot .7s linear infinite;
    flex: none;
}
@keyframes tb-rot { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   Поля
   -------------------------------------------------------------------------- */

.tb-label {
    display: block;
    margin: 0 0 6px;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-2);
}
.tb-stage .tb-label { color: rgba(255, 255, 255, .7); }

.tb-input, .tb-select, .tb-textarea {
    width: 100%;
    min-height: 48px;
    padding: 11px 14px;
    border: 2px solid var(--line-2);
    border-radius: var(--r);
    background: var(--card);
    color: var(--ink);
    font: 700 16px/1.3 var(--f-body);
    outline: none;
    transition: border-color .15s, box-shadow .15s;
    appearance: none;
    -webkit-appearance: none;
}
.tb-textarea { resize: vertical; min-height: 110px; line-height: 1.45; }
.tb-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none'%3E%3Cpath d='M1.5 1.5 7 7l5.5-5.5' stroke='%23263238' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 40px;
    cursor: pointer;
}
.tb-input:focus, .tb-select:focus, .tb-textarea:focus {
    border-color: var(--sky);
    box-shadow: 0 0 0 4px rgba(41, 121, 255, .18);
}
.tb-input::placeholder, .tb-textarea::placeholder { color: var(--ink-3); font-weight: 600; }
.tb-input-xl { min-height: 60px; font-size: 20px; border-radius: 18px; }
.tb-input-code {
    min-height: 76px;
    margin-bottom: 18px;
    text-align: center;
    font: 800 34px/1 var(--f-display);
    letter-spacing: .18em;
    border-radius: 20px;
}

.tb-error {
    margin-top: 10px;
    padding: 10px 14px;
    border-radius: var(--r-sm);
    background: rgba(255, 87, 34, .14);
    color: var(--coral-d);
    font-weight: 800;
}
.tb-stage .tb-error { background: rgba(255, 87, 34, .22); color: #ffccbc; }

.tb-field { margin-bottom: 16px; }
.tb-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.tb-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    font-weight: 800;
}
.tb-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.tb-toggle-track {
    position: relative;
    width: 52px; height: 30px;
    flex: none;
    border-radius: 99px;
    background: var(--line-2);
    transition: background .2s;
}
.tb-toggle-track::after {
    content: '';
    position: absolute;
    top: 3px; left: 3px;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 0 rgba(0, 0, 0, .15);
    transition: transform .2s cubic-bezier(.34, 1.56, .64, 1);
}
.tb-toggle input:checked + .tb-toggle-track { background: var(--mint); }
.tb-toggle input:checked + .tb-toggle-track::after { transform: translateX(22px); }
.tb-toggle input:focus-visible + .tb-toggle-track { outline: 3px solid var(--sky); outline-offset: 2px; }
.tb-toggle small { display: block; font-weight: 600; color: var(--ink-3); }

/* «таблетки» вибору (кількість, складність) */
.tb-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.tb-pill {
    min-height: 40px;
    padding: 8px 14px;
    border: 2px solid var(--line-2);
    border-radius: 99px;
    background: var(--card);
    color: var(--ink);
    font: 800 14px/1 var(--f-body);
    cursor: pointer;
    transition: transform .1s, background .15s, border-color .15s;
}
.tb-pill:hover { transform: translateY(-1px); }
.tb-pill.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }

.tb-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    border-radius: 99px;
    font: 800 12px/1.2 var(--f-body);
    letter-spacing: .02em;
    background: rgba(38, 50, 56, .07);
    color: var(--ink-2);
    white-space: nowrap;
}
.tb-chip-sun { background: var(--sun); color: #3e2c00; }
.tb-chip-sky { background: var(--sky); color: #fff; }
.tb-chip-mint { background: var(--mint); color: #fff; }
.tb-chip-pink { background: var(--pink); color: #fff; }
.tb-chip-grape { background: var(--grape); color: #fff; }
.tb-chip-ink { background: var(--ink); color: #fff; }

/* --------------------------------------------------------------------------
   Анімації
   -------------------------------------------------------------------------- */

.tb-pop { animation: tb-pop .5s cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes tb-pop { from { opacity: 0; transform: scale(.9) translateY(14px); } }

.tb-rise { animation: tb-rise .45s cubic-bezier(.2, .9, .3, 1.2) both; }
@keyframes tb-rise { from { opacity: 0; transform: translateY(18px); } }

.tb-shake { animation: tb-shake .45s ease both; }
@keyframes tb-shake {
    20% { transform: translateX(-9px) rotate(-1deg); }
    40% { transform: translateX(8px) rotate(1deg); }
    60% { transform: translateX(-5px); }
    80% { transform: translateX(3px); }
}

.tb-fade-enter-active, .tb-fade-leave-active { transition: opacity .2s ease; }
.tb-fade-enter-from, .tb-fade-leave-to { opacity: 0; }

.tb-slide-enter-active { transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), opacity .2s; }
.tb-slide-leave-active { transition: transform .2s ease, opacity .2s; }
.tb-slide-enter-from { transform: translateY(100%); opacity: 0; }
.tb-slide-leave-to { transform: translateY(40%); opacity: 0; }

.tb-list-move, .tb-list-enter-active, .tb-list-leave-active { transition: all .35s cubic-bezier(.2, .9, .3, 1.1); }
.tb-list-enter-from { opacity: 0; transform: translateY(16px) scale(.98); }
.tb-list-leave-to { opacity: 0; transform: translateX(-30px); }
.tb-list-leave-active { position: absolute; width: 100%; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* --------------------------------------------------------------------------
   Тости
   -------------------------------------------------------------------------- */

.tb-toasts {
    position: fixed;
    left: 50%;
    bottom: 22px;
    z-index: 200;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    transform: translateX(-50%);
    pointer-events: none;
    width: max-content;
    max-width: calc(100vw - 32px);
}
.tb-toast {
    padding: 12px 18px;
    border-radius: var(--r);
    background: var(--ink);
    color: #fff;
    font-weight: 800;
    box-shadow: 0 5px 0 var(--ink-shadow), 0 14px 30px rgba(0, 0, 0, .25);
    animation: tb-pop .35s cubic-bezier(.34, 1.56, .64, 1) both;
}
.tb-toast-error { background: var(--coral); box-shadow: 0 5px 0 var(--coral-d), 0 14px 30px rgba(0, 0, 0, .25); }
.tb-toast-ok { background: var(--mint); box-shadow: 0 5px 0 var(--mint-d), 0 14px 30px rgba(0, 0, 0, .25); }

/* --------------------------------------------------------------------------
   Модальні вікна
   -------------------------------------------------------------------------- */

.tb-modal-wrap {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 4vh 16px;
    background: rgba(30, 42, 48, .55);
    backdrop-filter: blur(4px);
    overflow-y: auto;
}
.tb-modal {
    position: relative;
    width: 100%;
    max-width: 640px;
    padding: 26px;
    border-radius: var(--r-xl);
    background: var(--paper);
    box-shadow: 0 8px 0 rgba(38, 50, 56, .35), 0 30px 80px rgba(0, 0, 0, .3);
    animation: tb-pop .4s cubic-bezier(.34, 1.56, .64, 1) both;
}
.tb-modal-wide { max-width: 980px; }
.tb-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.tb-modal-title { margin: 0; font: 800 22px/1.2 var(--f-display); }
.tb-modal-sub { margin: 6px 0 0; color: var(--ink-2); font-weight: 600; }
.tb-modal-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.tb-x {
    flex: none;
    width: 40px; height: 40px;
    border: 0;
    border-radius: 12px;
    background: rgba(38, 50, 56, .07);
    color: var(--ink);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
.tb-x:hover { background: rgba(38, 50, 56, .14); }

/* ==========================================================================
   КОНСТРУКТОР
   ========================================================================== */

.tb-bar {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px clamp(12px, 3vw, 28px);
    background: rgba(238, 241, 243, .92);
    backdrop-filter: blur(10px);
    border-bottom: 2px solid var(--line);
}
.tb-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    font: 800 15px/1 var(--f-display);
    color: var(--ink);
    flex: none;
}
.tb-logo-mark {
    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);
}
.tb-logo:hover .tb-logo-mark { transform: rotate(-12deg); }
.tb-logo-text { font: 700 18px/1 var(--f-display); color: var(--ink-2); }
.tb-beta {
    padding: 3px 7px;
    border-radius: 6px;
    background: var(--ink);
    color: var(--go);
    font: 800 10px/1 var(--f-display);
    letter-spacing: .1em;
    text-transform: uppercase;
}
.tb-bar-title {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}
.tb-bar-title input {
    flex: 1;
    min-width: 0;
    padding: 8px 10px;
    border: 2px solid transparent;
    border-radius: 12px;
    background: transparent;
    color: var(--ink);
    font: 800 17px/1.2 var(--f-display);
    outline: none;
    text-overflow: ellipsis;
}
.tb-bar-title input:hover { border-color: var(--line); }
.tb-bar-title input:focus { border-color: var(--sky); background: #fff; }
.tb-save-state { flex: none; font-size: 13px; font-weight: 800; color: var(--ink-3); display: inline-flex; align-items: center; gap: 6px; }
.tb-save-state.is-saving { color: var(--sky); }
.tb-save-state.is-saved::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--mint); }
.tb-bar-actions { display: flex; gap: 8px; flex: none; }

.tb-builder {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: clamp(16px, 3vw, 32px);
    max-width: 1240px;
    margin: 0 auto;
    padding: clamp(16px, 3vw, 32px) clamp(12px, 3vw, 28px) 120px;
}

.tb-side { position: sticky; top: 84px; align-self: start; display: flex; flex-direction: column; gap: 16px; }

.tb-cover {
    position: relative;
    overflow: hidden;
    padding: 22px;
    border-radius: var(--r-lg);
    background: var(--ink);
    color: #fff;
    box-shadow: 0 6px 0 var(--ink-shadow);
}
.tb-cover::before, .tb-cover::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.tb-cover::before { width: 160px; height: 160px; right: -50px; top: -60px; background: var(--go); opacity: .9; }
.tb-cover::after { width: 90px; height: 90px; right: 50px; top: 40px; background: var(--sun); opacity: .9; border-radius: 22px; transform: rotate(20deg); }
.tb-cover > * { position: relative; z-index: 1; }
.tb-cover-name { margin: 26px 0 12px; font: 800 20px/1.25 var(--f-display); word-break: break-word; }
.tb-cover-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tb-cover-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.tb-cover-stat { padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, .1); }
.tb-cover-stat b { display: block; font: 800 24px/1 var(--f-display); }
.tb-cover-stat span { font-size: 12px; font-weight: 700; opacity: .75; }
.tb-status {
    display: inline-flex;
    padding: 5px 10px;
    border-radius: 99px;
    font: 800 11px/1 var(--f-body);
    letter-spacing: .08em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, .15);
}
.tb-status-pub { background: var(--mint); }

.tb-panel {
    padding: 18px;
    border-radius: var(--r-lg);
    background: var(--card);
    border: 2px solid var(--line);
}
.tb-panel-title { margin: 0 0 12px; font: 800 13px/1 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.tb-add-grid { display: grid; gap: 10px; }
.tb-add {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px;
    border: 2px solid var(--line);
    border-radius: var(--r);
    background: var(--paper);
    color: var(--ink);
    font: 800 15px/1.2 var(--f-body);
    text-align: left;
    cursor: pointer;
    transition: transform .12s, border-color .12s, box-shadow .12s;
}
.tb-add:hover { transform: translateY(-2px); border-color: var(--ink); box-shadow: 0 4px 0 var(--ink); }
.tb-add small { display: block; font-weight: 600; color: var(--ink-3); font-size: 12px; margin-top: 2px; }
.tb-add-ico {
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    flex: none;
    border-radius: 12px;
    color: #fff;
    font-size: 18px;
}

.tb-ai-card {
    position: relative;
    overflow: hidden;
    padding: 20px;
    border-radius: var(--r-lg);
    color: #fff;
    background:
        radial-gradient(120px 120px at 90% 10%, rgba(255, 171, 0, .55), transparent 70%),
        radial-gradient(160px 160px at 0% 100%, rgba(244, 134, 23, .5), transparent 70%),
        linear-gradient(135deg, #37474f, #263238);
    box-shadow: 0 6px 0 var(--ink-shadow);
}
.tb-ai-card h3 { margin: 0 0 6px; font: 800 18px/1.2 var(--f-display); }
.tb-ai-card p { margin: 0 0 14px; font-weight: 600; opacity: .85; font-size: 14px; }
.tb-ai-left { margin-top: 10px; font-size: 12px; font-weight: 700; opacity: .7; }

.tb-main-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.tb-main-head h2 { margin: 0; font: 800 22px/1.2 var(--f-display); }

.tb-qlist { position: relative; display: flex; flex-direction: column; gap: 14px; }

.tb-qcard {
    position: relative;
    padding: 18px 18px 16px 18px;
    border-radius: var(--r-lg);
    background: var(--card);
    border: 2px solid var(--line);
    box-shadow: 0 4px 0 var(--line);
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.tb-qcard:hover { border-color: var(--line-2); box-shadow: 0 6px 0 var(--line-2); }
.tb-qcard.sortable-ghost { opacity: .35; }
.tb-qcard.sortable-chosen { transform: rotate(-.6deg) scale(1.01); box-shadow: 0 14px 30px rgba(38, 50, 56, .2); }
.tb-qcard-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.tb-qnum {
    display: grid;
    place-items: center;
    min-width: 34px; height: 34px;
    padding: 0 8px;
    border-radius: 11px;
    background: var(--ink);
    color: #fff;
    font: 800 14px/1 var(--f-display);
}
.tb-handle {
    display: grid;
    place-items: center;
    width: 30px; height: 34px;
    border-radius: 8px;
    color: var(--ink-3);
    cursor: grab;
    touch-action: none;
}
.tb-handle:hover { background: rgba(38, 50, 56, .06); color: var(--ink); }
.tb-qcard-tools { margin-left: auto; display: flex; gap: 4px; }
.tb-qcard-body { cursor: pointer; }
.tb-qtext { font-size: 17px; font-weight: 700; line-height: 1.45; word-break: break-word; }
.tb-qtext p { margin: 0 0 4px; }
.tb-qimg { display: block; max-height: 160px; margin: 10px 0 0; border-radius: 12px; }
.tb-qopts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.tb-qopt {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 8px 10px;
    border-radius: 12px;
    background: var(--paper);
    font-weight: 500;
    font-size: 14px;
    color: var(--ink-2);
}
.tb-qopt p { margin: 0; }
.tb-qopt img { max-height: 48px; border-radius: 6px; }
.tb-qopt-dot { flex: none; width: 12px; height: 12px; border-radius: 4px; }
.tb-qopt.is-correct { background: rgba(67, 160, 71, .14); color: var(--ink); }
.tb-qopt-check { margin-left: auto; flex: none; color: var(--mint-d); font-weight: 900; }
.tb-qopt-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.tb-empty {
    padding: 48px 24px;
    border: 3px dashed var(--line-2);
    border-radius: var(--r-xl);
    text-align: center;
}
.tb-empty-art { font-size: 54px; line-height: 1; margin-bottom: 12px; }
.tb-empty h3 { margin: 0 0 8px; font: 800 22px/1.2 var(--f-display); }
.tb-empty p { margin: 0 auto 20px; max-width: 420px; color: var(--ink-2); font-weight: 600; }
.tb-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

/* --------------------------------------------------------------------------
   Редактор запитання (повноекранний)
   -------------------------------------------------------------------------- */

.tb-editor {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: flex;
    flex-direction: column;
    color: var(--s-fg);
    background-color: var(--paper);
    background-image:
        radial-gradient(600px 380px at 100% 0%, rgba(255, 171, 0, .10), transparent 60%),
        radial-gradient(circle at 1px 1px, rgba(38, 50, 56, .07) 1px, transparent 0);
    background-size: auto, 22px 22px;
    animation: tb-editor-in .3s cubic-bezier(.2, .9, .3, 1.1) both;
}
@keyframes tb-editor-in { from { opacity: 0; transform: translateY(30px); } }
.tb-editor-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 12px clamp(12px, 3vw, 28px);
    background: #fff;
    border-bottom: 2px solid var(--line);
}
.tb-editor-bar .tb-spacer { flex: 1; }
.tb-points {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    border-radius: 14px;
    background: var(--s-soft);
    font-weight: 800;
}
.tb-points button {
    display: grid;
    place-items: center;
    width: 32px; height: 32px;
    border: 0;
    border-radius: 9px;
    background: #fff;
    color: var(--ink);
    font: 800 18px/1 var(--f-body);
    box-shadow: 0 2px 0 var(--line-2);
    cursor: pointer;
}
.tb-points button:hover { background: var(--paper-2); }
.tb-points span { min-width: 64px; text-align: center; font-size: 14px; }

.tb-editor-body {
    flex: 1;
    overflow-y: auto;
    padding: clamp(14px, 3vw, 32px) clamp(12px, 3vw, 28px) 40px;
}
.tb-editor-inner { max-width: 1100px; margin: 0 auto; }

.tb-qbox {
    position: relative;
    padding: 16px 20px 18px;
    border-radius: var(--r-lg);
    background: #fff;
    border: 2px solid var(--line);
    box-shadow: 0 5px 0 var(--line);
}
.tb-qbox-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.tb-qbox-img { position: relative; display: inline-block; margin-top: 12px; }
.tb-qbox-img img { display: block; max-height: 220px; border-radius: 14px; }
.tb-img-x {
    position: absolute;
    top: -10px; right: -10px;
    display: grid;
    place-items: center;
    width: 30px; height: 30px;
    border: 0;
    border-radius: 50%;
    background: var(--coral);
    color: #fff;
    box-shadow: 0 3px 0 var(--coral-d);
    cursor: pointer;
}

.tb-hint { margin: 14px 2px 10px; font-weight: 600; color: var(--s-muted); font-size: 14px; }

/* Плитки варіантів: пастельні тони класичного плеєра naurok + насичений акцент-бейдж */
.tb-eopts { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.tb-eopt {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 180px;
    padding: 12px;
    border-radius: var(--r-lg);
    background: var(--p, #fff);
    border: 2px solid var(--p-d, var(--line));
    box-shadow: 0 5px 0 var(--p-d, var(--line));
    transition: transform .15s, box-shadow .15s, border-color .15s;
}
.tb-eopt.is-correct { border-color: var(--mint); box-shadow: 0 5px 0 var(--mint-d), 0 0 0 3px rgba(67, 160, 71, .25); }
.tb-eopt-head { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.tb-eopt-letter {
    display: grid;
    place-items: center;
    width: 30px; height: 30px;
    border-radius: 9px;
    background: var(--c, var(--sky));
    color: #fff;
    font: 800 14px/1 var(--f-display);
}
.tb-eopt-head .tb-spacer { flex: 1; }
.tb-eopt-tool {
    display: grid;
    place-items: center;
    width: 32px; height: 32px;
    border: 0;
    border-radius: 9px;
    background: rgba(255, 255, 255, .7);
    color: var(--ink-2);
    cursor: pointer;
}
.tb-eopt-tool:hover { background: #fff; color: var(--ink); }
.tb-correct-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 10px 0 4px;
    border: 0;
    border-radius: 99px;
    background: rgba(255, 255, 255, .75);
    color: var(--ink-2);
    font: 700 12px/1 var(--f-body);
    cursor: pointer;
}
.tb-correct-btn i {
    display: grid;
    place-items: center;
    width: 24px; height: 24px;
    border-radius: 50%;
    border: 2px solid var(--line-2);
    background: #fff;
    font-style: normal;
}
.tb-correct-btn.is-on { background: var(--mint); color: #fff; }
.tb-correct-btn.is-on i { background: #fff; border-color: #fff; color: var(--mint-d); }
.tb-eopt-input {
    flex: 1;
    min-height: 84px;
    padding: 10px;
    border-radius: 14px;
    outline: none;
    font: 500 18px/1.35 var(--f-body);
    color: var(--ink);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    word-break: break-word;
    cursor: text;
}
.tb-eopt-input:focus { background: rgba(255, 255, 255, .7); }
.tb-eopt-input:empty::before { content: attr(data-placeholder); color: var(--ink-3); }
.tb-eopt-input p { margin: 0; }
.tb-eopt-img { position: relative; align-self: center; margin-top: 6px; }
.tb-eopt-img img { display: block; max-height: 110px; border-radius: 10px; }
.tb-eopt-add {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 180px;
    border: 3px dashed var(--line-2);
    border-radius: var(--r-lg);
    background: transparent;
    color: var(--ink-2);
    font: 700 15px/1.2 var(--f-body);
    cursor: pointer;
}
.tb-eopt-add:hover { border-color: var(--go); color: var(--ink); background: rgba(255, 171, 0, .06); }
.tb-eopt-add b { font-size: 32px; line-height: 1; color: var(--go); }

.tb-editor-err {
    margin-top: 16px;
    padding: 12px 16px;
    border-radius: var(--r);
    background: var(--coral);
    box-shadow: 0 4px 0 var(--coral-d);
    color: #fff;
    font-weight: 700;
}

.tb-editor-foot {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px clamp(12px, 3vw, 28px) calc(12px + env(safe-area-inset-bottom));
    border-top: 2px solid var(--line);
    background: #fff;
}

/* кольори плиток: --c акцент (бейдж, рамка вибору), --p/--p-d пастельне тло й тінь —
   тони класичного плеєра naurok (#f7cdcd, #fce3b9, #d9f3fc, #e2ffd2, #e4e4f2, …) */
.tb-c0 { --c: var(--sky); --c-d: var(--sky-d); --p: #d9f3fc; --p-d: #a8dcef; }
.tb-c1 { --c: #e0565b; --c-d: #b23a3f; --p: #f7cdcd; --p-d: #e4a5a5; }
.tb-c2 { --c: var(--go); --c-d: var(--go-d); --p: #fce3b9; --p-d: #edc584; }
.tb-c3 { --c: var(--mint); --c-d: var(--mint-d); --p: #e2ffd2; --p-d: #b6e3a2; }
.tb-c4 { --c: var(--grape); --c-d: var(--grape-d); --p: #e4e4f2; --p-d: #c3c4e0; }
.tb-c5 { --c: var(--pink); --c-d: var(--pink-d); --p: #fce1ec; --p-d: #efb7cd; }
.tb-c6 { --c: var(--teal); --c-d: var(--teal-d); --p: #d6f3f6; --p-d: #a3dde4; }
.tb-c7 { --c: var(--orange); --c-d: var(--orange-d); --p: #ffecb3; --p-d: #f0cf72; }
.tb-dot0 { background: var(--sky); } .tb-dot1 { background: #e0565b; } .tb-dot2 { background: var(--go); }
.tb-dot3 { background: var(--mint); } .tb-dot4 { background: var(--grape); } .tb-dot5 { background: var(--pink); }
.tb-dot6 { background: var(--teal); } .tb-dot7 { background: var(--orange); }

/* --------------------------------------------------------------------------
   ШІ-генерація
   -------------------------------------------------------------------------- */

.tb-ai-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 40px 10px;
    text-align: center;
    font-weight: 800;
}
.tb-ai-orb {
    width: 76px; height: 76px;
    border-radius: 50%;
    background: conic-gradient(var(--pink), var(--sun), var(--mint), var(--sky), var(--grape), var(--pink));
    animation: tb-rot 1.4s linear infinite, tb-breathe 1.4s ease-in-out infinite;
    -webkit-mask: radial-gradient(circle, transparent 22px, #000 23px);
    mask: radial-gradient(circle, transparent 22px, #000 23px);
}
@keyframes tb-breathe { 50% { transform: scale(1.12) rotate(180deg); } }
.tb-ai-loading small { color: var(--ink-3); font-weight: 700; }

.tb-ai-results { display: flex; flex-direction: column; gap: 10px; max-height: 56vh; overflow-y: auto; padding: 4px 4px 4px 0; }
.tb-ai-item {
    display: flex;
    gap: 12px;
    padding: 14px;
    border: 2px solid var(--line);
    border-radius: var(--r);
    background: var(--card);
    cursor: pointer;
    transition: border-color .15s, opacity .15s;
}
.tb-ai-item.is-off { opacity: .5; }
.tb-ai-item.is-on { border-color: var(--ink); }
.tb-check {
    display: grid;
    place-items: center;
    width: 26px; height: 26px;
    flex: none;
    border: 2px solid var(--line-2);
    border-radius: 8px;
    color: transparent;
    font-weight: 900;
    font-size: 14px;
}
.is-on > .tb-check { background: var(--ink); border-color: var(--ink); color: #fff; }
.tb-ai-item .tb-qtext { font-size: 15px; }
.tb-ai-item .tb-qopts { margin-top: 8px; }
.tb-ai-item .tb-qopt { font-size: 13px; padding: 6px 8px; }

/* ==========================================================================
   СТВОРЕННЯ ТЕСТУ
   ========================================================================== */

.tb-create {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: clamp(20px, 4vw, 56px);
    align-items: center;
    max-width: 1180px;
    min-height: calc(100vh - 70px);
    margin: 0 auto;
    padding: clamp(20px, 4vw, 48px) clamp(16px, 3vw, 28px) 60px;
}
.tb-create h1 {
    margin: 0 0 14px;
    font: 900 clamp(34px, 5.4vw, 64px)/1.02 var(--f-display);
    letter-spacing: -.02em;
}
.tb-create h1 em {
    font-style: normal;
    display: inline-block;
    padding: 0 .18em;
    border-radius: .2em;
    background: var(--sun);
    transform: rotate(-2deg);
    box-shadow: 0 6px 0 var(--sun-d);
}
.tb-create-lead { margin: 0 0 26px; max-width: 520px; font-size: 18px; font-weight: 600; color: var(--ink-2); }
.tb-create-card {
    padding: clamp(18px, 3vw, 28px);
    border-radius: var(--r-xl);
    background: var(--card);
    border: 2px solid var(--ink);
    box-shadow: 8px 8px 0 var(--ink);
}
.tb-create-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; }
.tb-create-ai {
    margin-top: 16px;
    padding: 16px;
    border-radius: var(--r-lg);
    background: var(--paper);
    border: 2px dashed var(--line-2);
}

.tb-hero-art { position: relative; aspect-ratio: 1 / 1; max-width: 520px; width: 100%; justify-self: center; }
.tb-hero-art-card {
    position: absolute;
    padding: 16px 18px;
    border-radius: 22px;
    font-weight: 800;
    box-shadow: 0 6px 0 rgba(0, 0, 0, .2);
    animation: tb-float 6s ease-in-out infinite;
}
.tb-hero-art-q {
    inset: 8% 6% auto 4%;
    padding: 24px;
    background: var(--ink);
    color: #fff;
    font: 800 clamp(16px, 2vw, 22px)/1.3 var(--f-display);
    transform: rotate(-3deg);
    animation-delay: -1s;
}
.tb-hero-art-o { width: 42%; text-align: center; color: #fff; font-size: clamp(14px, 1.6vw, 18px); }
.tb-hero-art-o1 { left: 2%; top: 46%; background: var(--sky); transform: rotate(2deg); animation-delay: -2s; }
.tb-hero-art-o2 { right: 4%; top: 42%; background: var(--coral); transform: rotate(-4deg); animation-delay: -3s; }
.tb-hero-art-o3 { left: 8%; top: 68%; background: var(--mint); transform: rotate(-2deg); animation-delay: -4s; box-shadow: 0 6px 0 var(--mint-d), 0 0 0 5px var(--paper), 0 0 0 9px var(--ink); }
.tb-hero-art-o4 { right: 2%; top: 64%; background: var(--sun); color: #3e2c00; transform: rotate(3deg); animation-delay: -5s; }
.tb-hero-art-star {
    position: absolute;
    right: 8%; bottom: 2%;
    width: 86px; height: 86px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--pink);
    color: #fff;
    font: 900 16px/1 var(--f-display);
    box-shadow: 0 5px 0 var(--pink-d);
    animation: tb-wobble 3s ease-in-out infinite;
}
@keyframes tb-float { 50% { translate: 0 -10px; } }
@keyframes tb-wobble { 50% { transform: rotate(12deg) scale(1.06); } }

/* ==========================================================================
   ЛОБІ (старт, вхід за кодом)
   ========================================================================== */

.tb-decor { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.tb-shape { position: absolute; display: block; opacity: .9; animation: tb-drift 14s ease-in-out infinite; }
.tb-shape-1 { width: 120px; height: 120px; left: 6%; top: 12%; border-radius: 30px; background: var(--sun); transform: rotate(18deg); }
.tb-shape-2 { width: 90px; height: 90px; right: 10%; top: 18%; border-radius: 50%; background: var(--pink); animation-delay: -3s; }
.tb-shape-3 { width: 0; height: 0; left: 12%; bottom: 14%; border-left: 60px solid transparent; border-right: 60px solid transparent; border-bottom: 104px solid var(--mint); animation-delay: -6s; }
.tb-shape-4 { width: 150px; height: 150px; right: 6%; bottom: 10%; border-radius: 50%; border: 22px solid var(--sky); animation-delay: -9s; }
.tb-shape-5 { width: 54px; height: 54px; left: 46%; top: 6%; border-radius: 14px; background: var(--go); animation-delay: -4s; }
@keyframes tb-drift {
    0%, 100% { translate: 0 0; rotate: 0deg; }
    33% { translate: 14px -18px; rotate: 10deg; }
    66% { translate: -12px 12px; rotate: -8deg; }
}

.tb-lobby {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 24px 16px;
}
.tb-lobby-card {
    width: 100%;
    max-width: 480px;
    padding: clamp(22px, 5vw, 36px);
    border-radius: var(--r-xl);
    background: #fff;
    color: var(--ink);
    border: 2px solid var(--line);
    box-shadow: 0 8px 0 var(--shadow-soft), 0 30px 60px rgba(38, 50, 56, .12);
    text-align: center;
}
.tb-lobby-badge {
    display: inline-block;
    margin-bottom: 14px;
    padding: 6px 12px;
    border-radius: 99px;
    background: var(--ink);
    color: var(--go);
    font: 800 11px/1 var(--f-display);
    letter-spacing: .12em;
    text-transform: uppercase;
}
.tb-lobby-title { margin: 0 0 14px; font: 800 clamp(22px, 4.6vw, 30px)/1.15 var(--f-display); word-break: break-word; }
.tb-lobby-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-bottom: 24px; }
.tb-lobby-form { text-align: left; }
.tb-lobby-form .tb-btn-xl { margin-top: 18px; }
.tb-lobby-note { font-weight: 700; color: var(--ink-2); }
.tb-turnstile:empty { display: none; }
.tb-turnstile .cf-loader-text { justify-content: center; }

/* ==========================================================================
   ГРА (проходження)
   ========================================================================== */

.tb-game { position: relative; z-index: 1; display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }

.tb-hud {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px clamp(12px, 3vw, 24px);
}
.tb-hud-name { min-width: 0; flex: 1; font: 600 15px/1.2 var(--f-display); color: var(--s-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-hud-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 13px;
    border-radius: 12px;
    background: var(--s-chip);
    border: 2px solid var(--s-surface-line);
    box-shadow: var(--s-shadow);
    font: 700 15px/1 var(--f-display);
    white-space: nowrap;
    flex: none;
}
.tb-hud-chip .lucide { color: var(--go); }
.tb-hud-chip.is-hot { background: var(--orange); border-color: var(--orange); color: #fff; box-shadow: 0 4px 0 var(--orange-d); }
.tb-hud-chip.is-hot .lucide, .tb-hud-chip.is-low .lucide, .tb-hud-chip.is-live .lucide { color: #fff; }
.tb-hud-chip.is-low { background: var(--coral); border-color: var(--coral); color: #fff; box-shadow: 0 4px 0 var(--coral-d); animation: tb-pulse 1s ease-in-out infinite; }
.tb-hud-chip.is-bump { animation: tb-bump .5s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes tb-pulse { 50% { transform: scale(1.06); } }
@keyframes tb-bump { 40% { transform: scale(1.25); } }

.tb-track {
    display: flex;
    gap: 4px;
    padding: 0 clamp(12px, 3vw, 24px);
}
.tb-track i {
    flex: 1;
    height: 6px;
    border-radius: 99px;
    background: var(--s-soft-2);
    transition: background .3s;
}
.tb-track i.is-now { background: var(--go); }
.tb-track i.is-ok { background: var(--mint); }
.tb-track i.is-bad { background: var(--coral); }
.tb-track i.is-half { background: var(--sun); }
.tb-track i.is-done { background: var(--ink-3); }

.tb-stagebox {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: clamp(14px, 2.4vw, 22px);
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding: clamp(18px, 3vw, 30px) clamp(12px, 3vw, 24px) calc(120px + env(safe-area-inset-bottom));
}

/* картка запитання: біла, з бурштиновою «закладкою» згори */
.tb-question {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 22vh;
    padding: clamp(26px, 4vw, 40px) clamp(18px, 4vw, 40px) clamp(20px, 3vw, 32px);
    border-radius: var(--r-xl);
    background: var(--s-surface);
    border: 2px solid var(--s-surface-line);
    box-shadow: 0 6px 0 rgba(38, 50, 56, .07), 0 18px 40px rgba(38, 50, 56, .06);
    text-align: center;
    overflow: hidden;
}
.tb-question::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 6px;
    background: linear-gradient(90deg, var(--go), var(--orange));
}
.tb-question-num {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 99px;
    background: var(--ink);
    color: #fff;
    font: 700 12px/1 var(--f-display);
    letter-spacing: .06em;
    white-space: nowrap;
}
.tb-question-text {
    max-width: 900px;
    font: 600 clamp(20px, 3vw, 30px)/1.3 var(--f-body);
    color: var(--ink);
    word-break: break-word;
}
.tb-question-text p { margin: 0 0 .3em; }
.tb-question-text p:last-child { margin-bottom: 0; }
.tb-question-text img { max-width: 100%; border-radius: 12px; }
.tb-question-img { max-height: 32vh; border-radius: 16px; border: 2px solid var(--line); cursor: zoom-in; }
.tb-multi-hint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 99px;
    background: var(--paper-2);
    border: 2px solid rgba(255, 171, 0, .35);
    color: #7a5200;
    font-weight: 700;
    font-size: 13px;
}

/* варіанти: пастельні «рядки» з бейджем-літерою, текст ліворуч */
.tb-answers {
    display: grid;
    grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr));
    gap: clamp(10px, 1.6vw, 14px);
    align-content: start;
}
.tb-answers.is-4 { --cols: 4; }
.tb-answer {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: clamp(72px, 11vh, 110px);
    padding: 14px;
    border: 3px solid transparent;
    border-radius: var(--r-lg);
    background: var(--p, #fff);
    color: var(--ink);
    font: 500 clamp(16px, 2vw, 21px)/1.35 var(--f-body);
    text-align: left;
    cursor: pointer;
    box-shadow: 0 5px 0 var(--p-d, var(--line-2));
    transition: transform .1s ease, box-shadow .1s ease, border-color .15s, opacity .3s, filter .3s;
    overflow-wrap: break-word;
    -webkit-tap-highlight-color: transparent;
    animation: tb-rise .45s cubic-bezier(.2, .9, .3, 1.2) both;
}
.tb-answer:has(.tb-answer-tick) { padding-right: 52px; }
.tb-answers.is-4 .tb-answer, .tb-answer:has(img) { flex-direction: column; justify-content: center; text-align: center; padding: 44px 14px 16px; }
.tb-answer:nth-child(2) { animation-delay: .05s; }
.tb-answer:nth-child(3) { animation-delay: .1s; }
.tb-answer:nth-child(4) { animation-delay: .15s; }
.tb-answer:nth-child(5) { animation-delay: .2s; }
.tb-answer:nth-child(6) { animation-delay: .25s; }
.tb-answer:hover:not([disabled]) { transform: translateY(-2px); box-shadow: 0 7px 0 var(--p-d, var(--line-2)); border-color: var(--c); }
.tb-answer:active:not([disabled]) { transform: translateY(4px); box-shadow: 0 1px 0 var(--p-d, var(--line-2)); }
.tb-answer:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.tb-answer[disabled] { cursor: default; }
.tb-answer p { margin: 0; }
.tb-answer img { max-height: 18vh; border-radius: 12px; background: #fff; }
.tb-answer-key {
    display: grid;
    place-items: center;
    flex: none;
    width: 36px; height: 36px;
    border-radius: 11px;
    background: var(--c, var(--sky));
    color: #fff;
    font: 800 15px/1 var(--f-display);
    box-shadow: 0 3px 0 var(--c-d, var(--sky-d));
}
.tb-answers.is-4 .tb-answer-key, .tb-answer:has(img) .tb-answer-key { position: absolute; top: 10px; left: 10px; width: 30px; height: 30px; }
.tb-answer-tick {
    position: absolute;
    top: 50%; right: 14px;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 28px; height: 28px;
    border-radius: 8px;
    border: 3px solid var(--c, var(--line-2));
    background: #fff;
    color: #fff;
}
.tb-answer.is-picked { border-color: var(--c); transform: translateY(3px); box-shadow: 0 2px 0 var(--p-d, var(--line-2)), 0 0 0 4px color-mix(in srgb, var(--c) 22%, transparent); }
.tb-answer.is-picked .tb-answer-tick { background: var(--c); }
.tb-answer.is-dim { opacity: .45; filter: saturate(.5); }
.tb-answer.is-right { --p: var(--mint); --p-d: var(--mint-d); --c: var(--mint-d); color: #fff; opacity: 1; filter: none; animation: tb-bump .5s cubic-bezier(.34, 1.56, .64, 1); }
.tb-answer.is-wrong { --p: var(--coral); --p-d: var(--coral-d); --c: var(--coral-d); color: #fff; opacity: 1; filter: none; }
.tb-answer.is-right .tb-answer-key, .tb-answer.is-wrong .tb-answer-key { background: rgba(255, 255, 255, .25); box-shadow: none; }
.tb-answer.is-wrong.is-picked { animation: tb-shake .45s ease both; }

.tb-submit-row { display: flex; justify-content: center; }
.tb-submit-row .tb-btn { min-width: min(320px, 100%); }
.tb-arena .tb-submit-row .tb-btn-white, .tb-arena .tb-btn-white { --c: var(--ink); --c-d: var(--ink-shadow); --t: #fff; }

/* відгук після відповіді: плаваюча картка знизу */
.tb-feedback {
    position: fixed;
    left: 50%;
    bottom: calc(14px + env(safe-area-inset-bottom));
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 16px;
    width: min(680px, calc(100% - 24px));
    padding: 16px 16px 16px 18px;
    border-radius: 22px;
    background: #fff;
    color: var(--ink);
    border: 2px solid color-mix(in srgb, var(--c) 35%, transparent);
    box-shadow: 0 6px 0 color-mix(in srgb, var(--c) 45%, transparent), 0 24px 60px rgba(38, 50, 56, .25);
    transform: translateX(-50%);
    overflow: hidden;
    animation: tb-toast-in .35s cubic-bezier(.34, 1.56, .64, 1) both;
}
@keyframes tb-toast-in { from { opacity: 0; transform: translate(-50%, 30px) scale(.96); } }
.tb-feedback.is-ok { --c: var(--mint); --c-d: var(--mint-d); }
.tb-feedback.is-bad { --c: var(--coral); --c-d: var(--coral-d); }
.tb-feedback.is-half { --c: var(--go); --c-d: var(--go-d); }
.tb-feedback.is-saved { --c: var(--sky); --c-d: var(--sky-d); }
.tb-feedback-emoji {
    display: grid;
    place-items: center;
    flex: none;
    width: 56px; height: 56px;
    border-radius: 18px;
    background: var(--c);
    color: #fff;
    box-shadow: 0 4px 0 var(--c-d);
    animation: tb-bump .6s cubic-bezier(.34, 1.56, .64, 1);
}
.tb-feedback-emoji .lucide { width: 30px; height: 30px; stroke-width: 2.4; }
.tb-feedback-text { min-width: 0; flex: 1; }
.tb-feedback-title { font: 800 clamp(19px, 3vw, 24px)/1.15 var(--f-display); color: var(--c-d); }
.tb-feedback-sub { margin-top: 3px; font-weight: 600; color: var(--ink-2); }
.tb-feedback .tb-btn { flex: none; --c: var(--ink); --c-d: var(--ink-shadow); --t: #fff; }
.tb-feedback-bar { position: absolute; left: 0; bottom: 0; height: 4px; background: var(--c); animation: tb-bar linear forwards; }
@keyframes tb-bar { from { width: 0; } to { width: 100%; } }

.tb-plus {
    position: fixed;
    z-index: 70;
    left: 50%; top: 40%;
    pointer-events: none;
    font: 900 clamp(40px, 8vw, 80px)/1 var(--f-display);
    color: var(--sun);
    text-shadow: 0 5px 0 var(--sun-d), 0 0 40px rgba(255, 171, 0, .6);
    animation: tb-plus 1.1s cubic-bezier(.2, .9, .3, 1) forwards;
}
@keyframes tb-plus {
    0% { opacity: 0; transform: translate(-50%, 20px) scale(.6); }
    25% { opacity: 1; transform: translate(-50%, -10px) scale(1.15); }
    100% { opacity: 0; transform: translate(-50%, -120px) scale(1); }
}

.tb-center {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 40px 16px;
    text-align: center;
}
.tb-center h2 { margin: 0; font: 800 clamp(22px, 4vw, 32px)/1.2 var(--f-display); }
.tb-center p { margin: 0; max-width: 460px; font-weight: 600; color: var(--s-muted); }
.tb-loader-dots { display: flex; gap: 10px; }
.tb-loader-dots i { width: 18px; height: 18px; border-radius: 6px; animation: tb-hop .9s ease-in-out infinite; }
.tb-loader-dots i:nth-child(1) { background: var(--sky); }
.tb-loader-dots i:nth-child(2) { background: var(--coral); animation-delay: .12s; }
.tb-loader-dots i:nth-child(3) { background: var(--sun); animation-delay: .24s; }
.tb-loader-dots i:nth-child(4) { background: var(--mint); animation-delay: .36s; }
@keyframes tb-hop { 50% { transform: translateY(-16px) rotate(45deg); } }

.tb-zoom {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(17, 24, 28, .85);
    cursor: zoom-out;
}
.tb-zoom img { max-width: 100%; max-height: 100%; border-radius: 16px; }

/* --------------------------------------------------------------------------
   Результат
   -------------------------------------------------------------------------- */

.tb-result {
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
    padding: clamp(12px, 3vw, 28px) 16px 60px;
}
.tb-result-hero {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: clamp(18px, 4vw, 40px);
    align-items: center;
    padding: clamp(20px, 4vw, 36px);
    border-radius: var(--r-xl);
    background: #fff;
    color: var(--ink);
    border: 2px solid var(--line);
    box-shadow: 0 8px 0 var(--shadow-soft), 0 30px 60px rgba(38, 50, 56, .12);
}
.tb-ring { position: relative; width: clamp(150px, 26vw, 220px); aspect-ratio: 1; }
.tb-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.tb-ring circle { fill: none; stroke-width: 14; stroke-linecap: round; }
.tb-ring .tb-ring-bg { stroke: rgba(38, 50, 56, .08); }
.tb-ring .tb-ring-fg { transition: stroke-dashoffset 1.4s cubic-bezier(.2, .9, .3, 1); }
.tb-ring-val {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font: 900 clamp(34px, 6vw, 52px)/1 var(--f-display);
}
.tb-ring-val small { margin-top: 6px; font: 800 13px/1 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.tb-result-title { margin: 0 0 6px; font: 900 clamp(24px, 4.4vw, 40px)/1.1 var(--f-display); }
.tb-result-sub { margin: 0 0 18px; font-weight: 700; color: var(--ink-2); }
.tb-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.tb-stat { padding: 12px; border-radius: 16px; background: var(--paper); text-align: center; }
.tb-stat b { display: block; font: 900 26px/1 var(--f-display); }
.tb-stat span { display: block; margin-top: 4px; font-size: 12px; font-weight: 800; color: var(--ink-2); }
.tb-stat-ok b { color: var(--mint-d); }
.tb-stat-bad b { color: var(--coral-d); }
.tb-stat-half b { color: var(--sun-d); }
.tb-result-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

.tb-section-title { margin: 36px 0 14px; font: 800 20px/1.2 var(--f-display); }

.tb-leaders { display: flex; flex-direction: column; gap: 8px; }
.tb-leader {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: var(--r);
    background: var(--s-surface);
    border: 2px solid var(--s-surface-line);
    font-weight: 700;
}
.tb-leader.is-me { background: var(--go); color: #fff; box-shadow: 0 4px 0 var(--go-d); }
.tb-leader-pos { width: 32px; font: 900 18px/1 var(--f-display); text-align: center; }
.tb-leader-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-leader-score { font: 800 16px/1 var(--f-display); }

.tb-review { display: flex; flex-direction: column; gap: 12px; }
.tb-review-item {
    padding: 16px 18px;
    border-radius: var(--r-lg);
    background: #fff;
    color: var(--ink);
    border: 2px solid var(--line);
    border-left: 8px solid var(--c, var(--line-2));
}
.tb-review-item.is-ok { --c: var(--mint); }
.tb-review-item.is-bad { --c: var(--coral); }
.tb-review-item.is-half { --c: var(--sun); }
.tb-review-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.tb-review-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }
.tb-review-opt { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--paper); font-weight: 500; font-size: 14px; }
.tb-review-opt p { margin: 0; }
.tb-review-opt img { max-height: 50px; border-radius: 6px; }
.tb-review-opt.is-correct { background: rgba(67, 160, 71, .16); }
.tb-review-opt.is-chosen:not(.is-correct) { background: rgba(255, 87, 34, .14); }
.tb-review-opt em { margin-left: auto; font-style: normal; font-size: 12px; font-weight: 900; white-space: nowrap; }

/* ==========================================================================
   Адаптив
   ========================================================================== */

@media (max-width: 980px) {
    .tb-builder { grid-template-columns: minmax(0, 1fr); }
    /* на вузькому екрані запитання одразу під обкладинкою, інструменти — нижче */
    .tb-side { display: contents; }
    .tb-side > .tb-cover { order: -1; }
    .tb-builder > main { order: 0; }
    .tb-side > .tb-ai-card { order: 1; }
    .tb-side > .tb-panel { order: 2; }
    .tb-side > a { order: 3; justify-self: center; }
    .tb-create { grid-template-columns: minmax(0, 1fr); min-height: 0; }
    .tb-hero-art { max-width: 380px; order: -1; }
    .tb-answers.is-4 { --cols: 2; }
}

@media (max-width: 640px) {
    .tb-bar { flex-wrap: wrap; }
    .tb-bar-title { order: 3; flex-basis: 100%; }
    .tb-bar-actions { margin-left: auto; }
    .tb-bar-actions .tb-btn-label { display: none; }
    .tb-qopts, .tb-review-opts { grid-template-columns: minmax(0, 1fr); }
    .tb-qcard { padding: 14px 12px 12px; }
    .tb-qcard-tools { gap: 0; }
    .tb-field-row, .tb-create-actions { grid-template-columns: minmax(0, 1fr); }
    .tb-answers { --cols: 1 !important; }
    .tb-answers.is-tiny { --cols: 2 !important; }
    .tb-answer, .tb-answers.is-4 .tb-answer { flex-direction: row; justify-content: flex-start; text-align: left; min-height: 62px; padding: 10px; gap: 12px; font-size: 16px; }
    .tb-answer:has(.tb-answer-tick) { padding-right: 46px; }
    .tb-answers.is-4 .tb-answer-key { position: static; width: 34px; height: 34px; }
    .tb-answer:has(img) { flex-direction: column; text-align: center; padding: 40px 10px 12px; }
    .tb-answer-tick { right: 10px; }
    .tb-question { min-height: 0; }
    .tb-stagebox { gap: 12px; }
    .tb-hud-name { display: none; }
    .tb-hud { justify-content: space-between; }
    .tb-result-hero { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
    .tb-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tb-result-actions { justify-content: center; }
    .tb-feedback { flex-wrap: wrap; }
    .tb-feedback .tb-btn { margin-left: 0; width: 100%; }
    .tb-modal { padding: 20px 16px; border-radius: var(--r-lg); }
    .tb-editor-bar .tb-btn-label { display: none; }
    .tb-eopts { grid-template-columns: minmax(0, 1fr); }
    .tb-eopt, .tb-eopt-add { min-height: 130px; }
    .tb-eopt-input { min-height: 60px; }
}

/* ==========================================================================
   SVG-іконки (lucide)
   ========================================================================== */

.tb .lucide { width: 1.15em; height: 1.15em; stroke-width: 2.4; flex: none; vertical-align: -0.18em; }
.tb-btn .lucide { width: 1.2em; height: 1.2em; }
.tb-btn > svg { width: 18px; height: 18px; flex: none; }
.tb-beta { display: none !important; }
.tb-btn-sm .lucide { width: 1.1em; height: 1.1em; }
.tb-inline-ico.lucide { width: 1em; height: 1em; }
.tb-center-ico.lucide { width: 64px; height: 64px; stroke-width: 2; color: var(--go); }
.tb-title-ico.lucide { width: .9em; height: .9em; color: var(--go); }
.tb-empty-art .lucide { width: 56px; height: 56px; color: var(--go); }
.tb-add-ico .lucide, .tb-mode-ico .lucide { width: 22px; height: 22px; }
.tb-feedback-emoji .lucide { width: clamp(40px, 6vw, 56px); height: clamp(40px, 6vw, 56px); stroke-width: 2.2; }
.tb-check .lucide { width: 16px; height: 16px; stroke-width: 3; }
.tb-correct-btn i .lucide { width: 14px; height: 14px; stroke-width: 3.2; }
.tb-qopt-check .lucide { width: 16px; height: 16px; stroke-width: 3; }
.tb-answer-tick .lucide { width: 18px; height: 18px; stroke-width: 3.2; }
.tb-x .lucide { width: 22px; height: 22px; }
.tb-img-x .lucide { width: 16px; height: 16px; stroke-width: 3; }
.tb-spark { color: var(--go); }
.tb-ai-card .tb-spark, .tb-btn-ai .tb-spark { color: var(--sun); }
.tb-medal-0 { color: var(--sun); }
.tb-medal-1 { color: #b0bec5; }
.tb-medal-2 { color: #d7843c; }
.tb-flip { animation: tb-flip 1.6s ease-in-out infinite; }
@keyframes tb-flip { 50% { transform: rotate(180deg); } }

/* ==========================================================================
   Редактор: текст, типи, нові структури
   ========================================================================== */

.tb-rte-tools { display: flex; gap: 4px; margin-bottom: 8px; }
.tb-rte-btn {
    min-width: 34px; height: 32px;
    padding: 0 8px;
    border: 0;
    border-radius: 9px;
    background: var(--paper);
    color: var(--ink-2);
    font: 700 15px/1 var(--f-body);
    cursor: pointer;
}
.tb-rte-btn:hover { background: var(--paper-2); color: var(--ink); }
.tb-rte {
    min-height: 100px;
    padding: 6px 2px;
    outline: none;
    font: 700 22px/1.45 var(--f-body);
    color: var(--ink);
    word-break: break-word;
}
.tb-rte:empty::before { content: attr(data-placeholder); color: var(--ink-3); font-weight: 600; }
.tb-rte p { margin: 0 0 .3em; }
.tb-rte img { max-width: 100%; border-radius: 8px; }
.tb-rte table { border-collapse: collapse; }
.tb-rte td, .tb-rte th { border: 1px solid var(--line-2); padding: 4px 8px; }

.tb-typebar {
    display: flex;
    gap: 8px;
    padding: 10px clamp(12px, 3vw, 28px);
    overflow-x: auto;
    scrollbar-width: none;
    background: #fff;
    border-bottom: 2px solid var(--line);
    -webkit-overflow-scrolling: touch;
}
.tb-typebar::-webkit-scrollbar { display: none; }
.tb-typechip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: none;
    height: 40px;
    padding: 4px 14px 4px 4px;
    border: 2px solid var(--line);
    border-radius: 99px;
    background: #fff;
    color: var(--ink-2);
    font: 700 14px/1 var(--f-body);
    cursor: pointer;
    white-space: nowrap;
}
.tb-typechip i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #fff; font-style: normal; }
.tb-typechip i .lucide { width: 16px; height: 16px; }
.tb-typechip:hover { border-color: var(--line-2); color: var(--ink); }
.tb-typechip.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }

.tb-elist { display: flex; flex-direction: column; gap: 10px; }
.tb-erow, .tb-epair {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: var(--r);
    background: #fff;
    border: 2px solid var(--line);
    box-shadow: 0 3px 0 var(--line);
}
.tb-erow-num {
    display: grid;
    place-items: center;
    flex: none;
    width: 34px; height: 34px;
    border-radius: 10px;
    background: var(--pink);
    color: #fff;
    font: 800 15px/1 var(--f-display);
}
.tb-erow-num .lucide { width: 18px; height: 18px; stroke-width: 3; }
.tb-erow .tb-input { flex: 1; min-width: 0; }
.tb-erow-input {
    flex: 1;
    min-width: 0;
    min-height: 44px;
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--paper);
    border: 2px solid transparent;
    color: var(--ink);
    font: 500 17px/1.35 var(--f-body);
    outline: none;
    word-break: break-word;
}
.tb-erow-input:focus { background: #fff; border-color: var(--sky); }
.tb-erow-input:empty::before { content: attr(data-placeholder); color: var(--ink-3); }
.tb-erow-input p { margin: 0; }
.tb-erow-img { flex: none; max-height: 44px; max-width: 70px; border-radius: 8px; }
.tb-erow-tools { display: flex; gap: 4px; flex: none; }
.tb-erow-tool {
    display: grid;
    place-items: center;
    flex: none;
    width: 36px; height: 36px;
    border: 0;
    border-radius: 10px;
    background: var(--paper);
    color: var(--ink-2);
    cursor: pointer;
}
.tb-erow-tool:hover:not(:disabled) { background: var(--paper-2); color: var(--ink); }
.tb-erow-tool:disabled { opacity: .35; cursor: default; }
.tb-erow-add {
    min-height: 52px;
    border: 3px dashed var(--line-2);
    border-radius: var(--r);
    background: transparent;
    color: var(--ink-2);
    font: 700 15px/1.2 var(--f-body);
    cursor: pointer;
}
.tb-erow-add:hover { border-color: var(--go); color: var(--ink); background: rgba(255, 171, 0, .06); }
.tb-epair-side {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px;
    border-radius: 12px;
    background: var(--p, var(--paper));
}
.tb-epair-side .tb-erow-input { background: rgba(255, 255, 255, .75); }
.tb-epair-side .tb-erow-tool { background: rgba(255, 255, 255, .75); }

.tb-blanks { display: flex; flex-wrap: wrap; gap: 8px; }
.tb-blank-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 99px;
    background: var(--orange);
    color: #fff;
    font-weight: 700;
}
.tb-blank-chip b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(0, 0, 0, .2); font-size: 12px; }
.tb-blank-empty { color: var(--ink-3); font-weight: 600; }
.tb-fill-mark { padding: 1px 8px; border-radius: 6px; background: rgba(244, 134, 23, .2); color: inherit; font-weight: 700; }
.tb-fill-mark.is-ok { background: rgba(67, 160, 71, .22); }
.tb-fill-mark.is-bad { background: rgba(255, 87, 34, .2); text-decoration: line-through; }

/* перегляд у списку конструктора */
.tb-qanswers { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.tb-qanswers .tb-blank-chip { background: rgba(67, 160, 71, .14); color: var(--mint-d); }
.tb-qorder { margin: 12px 0 0; padding-left: 26px; display: flex; flex-direction: column; gap: 6px; font-weight: 500; color: var(--ink-2); }
.tb-qorder li { padding: 6px 10px; border-radius: 10px; background: var(--paper); }
.tb-qorder li p { margin: 0; display: inline; }
.tb-qorder li img { max-height: 40px; border-radius: 6px; vertical-align: middle; margin-right: 6px; }
.tb-qorder li.is-ok { background: rgba(67, 160, 71, .14); }
.tb-qorder li.is-bad { background: rgba(255, 87, 34, .12); }
.tb-qpairs { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.tb-qpair { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; }
.tb-qpair.is-ok .tb-qopt { background: rgba(67, 160, 71, .14); }
.tb-qpair.is-bad .tb-qopt { background: rgba(255, 87, 34, .12); }
.tb-qpair-link { color: var(--ink-3); display: grid; place-items: center; }
.tb-review-yours { grid-column: 1 / -1; font-size: 13px; color: var(--coral-d); font-style: normal; font-weight: 700; }

/* ==========================================================================
   Гра: нові типи відповідей
   ========================================================================== */

.tb-multi-hint .lucide { width: 16px; height: 16px; }
.tb-type-answer { display: flex; flex-direction: column; gap: 14px; max-width: 720px; width: 100%; margin: 0 auto; }
.tb-big-input {
    width: 100%;
    min-height: 76px;
    padding: 14px 20px;
    border: 3px solid var(--line-2);
    border-radius: var(--r-lg);
    background: #fff;
    color: var(--ink);
    font: 700 clamp(22px, 4vw, 30px)/1.2 var(--f-body);
    text-align: center;
    outline: none;
    box-shadow: 0 5px 0 var(--line-2);
}
.tb-big-input:focus { border-color: var(--go); box-shadow: 0 5px 0 var(--line-2), 0 0 0 4px rgba(255, 171, 0, .25); }
.tb-big-input.is-ok { border-color: var(--mint); background: var(--ok-bg); }
.tb-big-input.is-bad { border-color: var(--coral); background: var(--bad-bg); }
.tb-big-input.is-half { border-color: var(--sun); }
.tb-big-input:disabled { opacity: 1; }
.tb-solution {
    padding: 12px 16px;
    border-radius: var(--r);
    background: var(--ok-bg);
    border: 2px solid rgba(67, 160, 71, .45);
    color: var(--ink);
    font-weight: 700;
    line-height: 1.5;
}
.tb-solution-step { display: inline-flex; align-items: center; gap: 4px; margin: 2px 10px 2px 0; }
.tb-solution-step p { margin: 0; display: inline; }

.tb-fill-text .tb-question-text { line-height: 2.1; }
.tb-fill-wrap { display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; margin: 0 4px; }
.tb-fill-input {
    min-width: 4ch;
    max-width: 100%;
    height: 1.7em;
    padding: 0 10px;
    border: 0;
    border-bottom: 4px solid var(--go);
    border-radius: 10px 10px 4px 4px;
    background: var(--paper-2);
    color: var(--ink);
    font: inherit;
    font-size: .9em;
    text-align: center;
    outline: none;
}
.tb-fill-input:focus { box-shadow: 0 0 0 3px rgba(255, 171, 0, .45); }
.tb-fill-input.is-ok { border-bottom-color: var(--mint); background: var(--ok-bg); }
.tb-fill-input.is-bad { border-bottom-color: var(--coral); background: var(--bad-bg); text-decoration: line-through; }
.tb-fill-fix { font-size: .6em; line-height: 1.2; font-weight: 800; color: var(--mint-d); margin-top: 2px; }

.tb-order { list-style: none; margin: 0 auto; padding: 0; display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 760px; }
.tb-order-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 64px;
    padding: 10px 12px;
    border-radius: var(--r);
    background: var(--p, #fff);
    border: 3px solid transparent;
    box-shadow: 0 5px 0 var(--p-d, var(--line-2));
    color: var(--ink);
    font: 500 clamp(16px, 2.2vw, 20px)/1.35 var(--f-body);
    touch-action: manipulation;
}
.tb-order-item.is-drag { border-color: var(--c); box-shadow: 0 14px 30px rgba(38, 50, 56, .25); transform: scale(1.02); }
.tb-order-item.is-ok { --p: var(--ok-bg); --p-d: #b6dfb8; border-color: var(--mint); }
.tb-order-item.is-bad { --p: var(--bad-bg); --p-d: #f3c0b3; border-color: var(--coral); }
.tb-order-num { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--c, var(--sky)); color: #fff; font-family: var(--f-display); box-shadow: 0 3px 0 var(--c-d, var(--sky-d)); }
.tb-order-body { flex: 1; min-width: 0; word-break: break-word; }
.tb-order-body p { margin: 0; }
.tb-order-body img { max-height: 70px; border-radius: 8px; display: block; }
.tb-order-tools { display: flex; align-items: center; gap: 6px; flex: none; }
.tb-order-btn, .tb-order-handle {
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    border: 0;
    border-radius: 11px;
    background: rgba(255, 255, 255, .8);
    color: var(--ink);
    cursor: pointer;
}
.tb-order-btn:disabled { opacity: .3; cursor: default; }
.tb-order-handle { cursor: grab; touch-action: none; }
.tb-order-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #fff; flex: none; }
.tb-order-item.is-ok .tb-order-mark { color: var(--mint-d); }
.tb-order-item.is-bad .tb-order-mark { color: var(--coral-d); }
.tb-order-mark .lucide { stroke-width: 3.2; }

.tb-match-hint { margin: 0; text-align: center; font-weight: 600; color: var(--s-muted); min-height: 1.4em; }
.tb-match { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(10px, 3vw, 40px); width: 100%; max-width: 980px; margin: 0 auto; }
.tb-match-col { display: flex; flex-direction: column; gap: 10px; }
.tb-match-card {
    --pc: var(--sky);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 64px;
    padding: 12px 14px 12px 40px;
    border: 3px solid var(--line);
    border-radius: var(--r);
    background: #fff;
    color: var(--ink);
    font: 500 clamp(15px, 2vw, 19px)/1.35 var(--f-body);
    text-align: center;
    box-shadow: 0 5px 0 var(--line-2);
    cursor: pointer;
    transition: transform .1s, border-color .15s, background .15s;
    word-break: break-word;
}
.tb-match-col:first-child .tb-match-card { padding: 12px 40px 12px 14px; }
.tb-match-card p { margin: 0; }
.tb-match-card img { max-height: 80px; border-radius: 8px; }
.tb-match-card:active:not(:disabled) { transform: translateY(3px); }
.tb-match-card.is-active { border-color: var(--go); transform: translateY(-3px); box-shadow: 0 8px 0 var(--line-2), 0 0 0 4px rgba(255, 171, 0, .3); }
.tb-match-card.is-paired { border-color: var(--pc); background: color-mix(in srgb, var(--pc) 14%, #fff); }
.tb-match-card.is-ok { border-color: var(--mint); background: var(--ok-bg); }
.tb-match-card.is-bad { border-color: var(--coral); background: var(--bad-bg); }
.tb-match-card:disabled { cursor: default; }
.tb-match-badge {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 8px;
    display: grid;
    place-items: center;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--pc);
    color: #fff;
    font: 800 13px/1 var(--f-display);
}
.tb-match-col:last-child .tb-match-badge { right: auto; left: 8px; }

/* очікування старту гри */
.tb-lobby-wait h2 { font-size: clamp(24px, 5vw, 38px); }
.tb-pulse-ring {
    display: grid;
    place-items: center;
    width: 110px; height: 110px;
    border-radius: 50%;
    background: var(--go);
    color: #fff;
    box-shadow: 0 0 0 0 rgba(255, 171, 0, .6);
    animation: tb-ring 1.8s ease-out infinite;
}
.tb-pulse-ring .lucide { width: 50px; height: 50px; }
@keyframes tb-ring { 70% { box-shadow: 0 0 0 34px rgba(255, 171, 0, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 171, 0, 0); } }
.tb-offline { display: inline-flex; align-items: center; gap: 8px; color: var(--coral-d); }
.tb-hud-chip.is-live { background: var(--coral); box-shadow: 0 4px 0 var(--coral-d); }
.tb-hud-chip.is-live .lucide { animation: tb-pulse 1.2s ease-in-out infinite; }

/* ==========================================================================
   Сторінки вчителя: тест, ДЗ, результати
   ========================================================================== */

.tb-page { max-width: 1100px; margin: 0 auto; padding: clamp(16px, 3vw, 32px) clamp(12px, 3vw, 28px) 80px; }
.tb-page-narrow { max-width: 720px; }
.tb-page-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin: 32px 0 14px; font: 800 20px/1.2 var(--f-display); }
.tb-page-title small { font: 600 14px/1 var(--f-body); color: var(--ink-3); }
.tb-page-h1 { margin: 10px 0 4px; font: 800 clamp(24px, 4vw, 34px)/1.15 var(--f-display); word-break: break-word; }
.tb-muted { color: var(--ink-3); }
.tb-hub-cover { padding: clamp(20px, 4vw, 32px); }
.tb-hub-cover .tb-cover-name { font-size: clamp(24px, 4vw, 34px); max-width: 80%; }

.tb-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.tb-modes-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tb-mode {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px;
    border-radius: var(--r-lg);
    background: var(--card);
    border: 2px solid var(--line);
    color: var(--ink);
    text-decoration: none;
    box-shadow: 0 4px 0 var(--line);
    transition: transform .12s, border-color .12s, box-shadow .12s;
}
.tb-mode:hover:not(.is-disabled) { transform: translateY(-3px); border-color: var(--ink); box-shadow: 0 7px 0 var(--ink); }
.tb-mode.is-disabled { opacity: .55; cursor: not-allowed; }
.tb-mode-ico { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 16px; color: #fff; box-shadow: 0 4px 0 rgba(0, 0, 0, .18); }
.tb-mode-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.tb-mode-body b { font: 800 18px/1.2 var(--f-display); }
.tb-mode-body span { font-size: 14px; font-weight: 500; color: var(--ink-2); }
.tb-mode-go { color: var(--ink-3); }

.tb-hw-list { display: flex; flex-direction: column; gap: 8px; }
.tb-hw-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--r); background: var(--card); border: 2px solid var(--line); color: var(--ink); text-decoration: none; }
.tb-hw-row:hover { border-color: var(--ink-2); }
.tb-hw-kind { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--go); color: #fff; flex: none; }
.tb-hw-kind.is-live { background: var(--coral); }
.tb-hw-name { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tb-hw-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-hw-name small { color: var(--ink-3); font-weight: 600; }

.tb-form-head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.tb-toggles { display: flex; flex-direction: column; gap: 4px; }
.tb-toggle-row { padding: 10px 0; border-bottom: 1px solid var(--line); }
.tb-inline-field { display: flex; align-items: center; gap: 10px; padding: 8px 0 8px 64px; font-weight: 700; }
.tb-inline-field .tb-input { width: 100px; }

.tb-hw-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.tb-hw-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.tb-hw-grid { display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); gap: 14px; }
.tb-code-card { padding: 18px; border-radius: var(--r-lg); background: var(--ink); color: #fff; box-shadow: 0 6px 0 var(--ink-shadow); }
.tb-code-card .tb-label { color: rgba(255, 255, 255, .6); }
.tb-code-card p { margin: 6px 0 12px; font-size: 14px; opacity: .8; }
.tb-code { display: block; padding: 0; border: 0; background: none; color: var(--go); font: 900 clamp(34px, 5vw, 44px)/1 var(--f-display); letter-spacing: .06em; cursor: copy; }
.tb-stat-tile { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 16px; border-radius: var(--r-lg); background: var(--card); border: 2px solid var(--line); }
.tb-stat-tile .lucide { color: var(--ink-3); }
.tb-stat-tile b { font: 900 30px/1 var(--f-display); }
.tb-stat-tile span { font-size: 13px; font-weight: 700; color: var(--ink-2); }

.tb-table-wrap { overflow-x: auto; border-radius: var(--r-lg); border: 2px solid var(--line); background: var(--card); -webkit-overflow-scrolling: touch; }
.tb-table { width: 100%; border-collapse: collapse; min-width: 560px; }
.tb-table th { padding: 12px 14px; text-align: left; font: 800 12px/1 var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); border-bottom: 2px solid var(--line); }
.tb-table td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tb-table tr:last-child td { border-bottom: 0; }
.tb-table tr.is-link { cursor: pointer; }
.tb-table tr.is-link:hover td { background: var(--paper); }
.tb-progress { position: relative; height: 8px; width: 140px; max-width: 100%; border-radius: 99px; background: var(--line); overflow: hidden; margin-bottom: 4px; }
.tb-progress i { position: absolute; inset: 0 auto 0 0; border-radius: 99px; background: var(--go); }

.tb-hard-list { display: flex; flex-direction: column; gap: 8px; }
.tb-hard { display: grid; grid-template-columns: auto minmax(0, 1fr) 160px 48px; align-items: center; gap: 12px; padding: 10px 14px; border-radius: var(--r); background: var(--card); border: 2px solid var(--line); }
.tb-hard-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.tb-hard-text .lucide { color: var(--ink-3); }
.tb-hard-bar { height: 8px; border-radius: 99px; background: var(--line); overflow: hidden; }
.tb-hard-bar i { display: block; height: 100%; border-radius: 99px; }

/* ==========================================================================
   Гра в реальному часі: екран учителя
   ========================================================================== */

.tb-live { position: relative; z-index: 1; display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.tb-live-bar { display: flex; align-items: center; gap: 10px; padding: 12px clamp(12px, 3vw, 28px); }
.tb-live-tag { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border-radius: 14px; background: var(--coral); box-shadow: 0 4px 0 var(--coral-d); font: 800 14px/1 var(--f-display); text-transform: uppercase; letter-spacing: .04em; }
.tb-live-title { flex: 1; min-width: 0; font: 700 16px/1.2 var(--f-display); opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tb-live-lobby { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(16px, 3vw, 40px); align-items: start; padding: clamp(12px, 3vw, 40px); max-width: 1400px; width: 100%; margin: 0 auto; }
.tb-live-join { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: clamp(20px, 3vw, 36px); border-radius: var(--r-xl); background: #fff; color: var(--ink); text-align: center; box-shadow: 0 10px 0 var(--shadow-soft), 0 40px 80px rgba(0, 0, 0, .35); }
.tb-live-join p { margin: 0; font-size: clamp(16px, 2vw, 22px); font-weight: 600; }
.tb-live-code { font: 900 clamp(48px, 9vw, 110px)/1 var(--f-display); letter-spacing: .06em; color: var(--ink); }
.tb-live-qr { width: min(260px, 60vw); aspect-ratio: 1; image-rendering: pixelated; }
.tb-live-players h2 { margin: 0 0 16px; font: 800 clamp(22px, 3vw, 32px)/1.2 var(--f-display); }
.tb-live-chips { display: flex; flex-wrap: wrap; gap: 10px; min-height: 60px; }
.tb-live-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 8px 10px 16px;
    border-radius: 99px;
    background: var(--c, var(--sky));
    box-shadow: 0 4px 0 var(--c-d, var(--sky-d));
    font: 800 clamp(16px, 1.8vw, 20px)/1 var(--f-body);
    animation: tb-pop .45s cubic-bezier(.34, 1.56, .64, 1) both;
}
.tb-live-chip.is-away { opacity: .55; }
.tb-live-chip button { display: grid; place-items: center; width: 26px; height: 26px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .2); color: #fff; cursor: pointer; }
.tb-live-chip button .lucide { width: 14px; height: 14px; stroke-width: 3; }
.tb-live-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 28px; }
.tb-live-controls .tb-btn-xl { width: auto; min-width: 260px; }

.tb-live-board { flex: 1; width: 100%; max-width: 1200px; margin: 0 auto; padding: clamp(12px, 3vw, 32px); }
.tb-live-board-head { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-bottom: 18px; }
.tb-live-board-head h2 { display: inline-flex; align-items: center; gap: 10px; margin: 0; flex: 1; font: 800 clamp(22px, 3vw, 32px)/1.2 var(--f-display); }
.tb-live-board-head span { font-weight: 700; opacity: .8; }
.tb-live-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tb-live-row {
    display: grid;
    grid-template-columns: 44px minmax(0, 1.2fr) minmax(0, 2fr) 70px 36px;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border-radius: var(--r);
    background: var(--s-surface);
    transition: transform .4s cubic-bezier(.2, .9, .3, 1.1), background .3s;
    animation: tb-rise .4s both;
}
.tb-live-row.is-top { background: rgba(255, 171, 0, .16); }
.tb-live-row.is-done .tb-live-name { opacity: .75; }
.tb-live-pos { display: grid; place-items: center; font: 900 20px/1 var(--f-display); }
.tb-live-pos .lucide { color: var(--go); width: 28px; height: 28px; }
.tb-live-name { display: flex; align-items: center; gap: 10px; min-width: 0; font: 800 clamp(16px, 1.8vw, 20px)/1.2 var(--f-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--s-line); }
.tb-dot.is-on { background: #69f0ae; box-shadow: 0 0 0 3px rgba(105, 240, 174, .25); }
.tb-live-progress { position: relative; height: 14px; border-radius: 99px; background: var(--s-soft-2); overflow: hidden; }
.tb-live-progress i { position: absolute; inset: 0 auto 0 0; border-radius: 99px; background: var(--s-faint); transition: width .6s cubic-bezier(.2, .9, .3, 1); }
.tb-live-progress i.is-ok { background: var(--mint); }
.tb-live-score { font: 900 22px/1 var(--f-display); text-align: right; }
.tb-live-kick { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 10px; background: transparent; color: var(--s-faint); cursor: pointer; }
.tb-live-kick:hover { background: var(--s-chip); color: #fff; }

.tb-live-final { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 24px 16px 48px; }
.tb-live-final h1 { display: inline-flex; align-items: center; gap: 12px; margin: 0; font: 900 clamp(30px, 5vw, 56px)/1 var(--f-display); }
.tb-live-final h1 .lucide { color: var(--go); }
.tb-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 200px)); align-items: end; gap: clamp(8px, 2vw, 20px); width: 100%; justify-content: center; }
.tb-podium-col { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; animation: tb-rise .6s both; }
.tb-podium-col.is-1 { animation-delay: .5s; }
.tb-podium-col.is-2 { animation-delay: .25s; }
.tb-podium-name { font: 800 clamp(15px, 2vw, 22px)/1.2 var(--f-body); word-break: break-word; }
.tb-podium-score { font: 900 clamp(18px, 2.4vw, 26px)/1 var(--f-display); color: var(--go); }
.tb-podium-step { display: grid; place-items: center; width: 100%; border-radius: 18px 18px 0 0; font: 900 clamp(36px, 6vw, 64px)/1 var(--f-display); color: rgba(255, 255, 255, .9); }
.is-1 .tb-podium-step { height: clamp(150px, 26vh, 240px); background: linear-gradient(var(--go), var(--orange)); }
.is-2 .tb-podium-step { height: clamp(110px, 19vh, 180px); background: linear-gradient(#90a4ae, #607d8b); }
.is-3 .tb-podium-step { height: clamp(80px, 14vh, 130px); background: linear-gradient(#d7843c, #a0522d); }

/* ==========================================================================
   Флеш-картки
   ========================================================================== */

.tb-cards-stage { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 18px; padding: clamp(14px, 3vw, 32px) 16px 32px; }
.tb-flashcard {
    width: min(720px, 100%);
    height: clamp(300px, 52vh, 460px);
    padding: 0;
    border: 0;
    background: none;
    perspective: 1400px;
    cursor: pointer;
    transition: transform .16s ease, opacity .16s ease;
    -webkit-tap-highlight-color: transparent;
}
.tb-flashcard.is-out-left { transform: translateX(-60px) rotate(-4deg); opacity: 0; }
.tb-flashcard.is-out-right { transform: translateX(60px) rotate(4deg); opacity: 0; }
.tb-flashcard-inner { position: relative; display: block; width: 100%; height: 100%; transition: transform .55s cubic-bezier(.3, 1.3, .5, 1); transform-style: preserve-3d; }
.tb-flashcard.is-flipped .tb-flashcard-inner { transform: rotateY(180deg); }
.tb-flashcard-face {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: clamp(20px, 4vw, 40px);
    border-radius: var(--r-xl);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    overflow: auto;
    text-align: center;
}
.tb-flashcard-front { background: #fff; color: var(--ink); border: 2px solid var(--line); box-shadow: 0 8px 0 var(--shadow-soft), 0 24px 50px rgba(38, 50, 56, .14); }
.tb-flashcard-back { background: linear-gradient(135deg, var(--go), var(--orange)); color: #fff; transform: rotateY(180deg); box-shadow: 0 8px 0 var(--orange-d), 0 24px 50px rgba(38, 50, 56, .18); }
.tb-flashcard-face small { position: absolute; top: 16px; left: 20px; font: 800 12px/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; opacity: .55; }
.tb-flashcard-face em { position: absolute; bottom: 14px; font-style: normal; font-size: 13px; font-weight: 600; opacity: .45; }
.tb-flashcard-text { font: 600 clamp(18px, 3vw, 26px)/1.4 var(--f-body); word-break: break-word; }
.tb-flashcard-text p { margin: 0 0 .3em; }
.tb-flashcard-text ol { text-align: left; margin: 0; }
.tb-flashcard-text img, .tb-flashcard-face > img { max-height: 160px; max-width: 100%; border-radius: 12px; }
.tb-flashcard-text mark { background: var(--s-line); color: inherit; padding: 0 6px; border-radius: 6px; }
.tb-card-pairs { display: flex; flex-direction: column; gap: 6px; font-size: .85em; }
.tb-blank { display: inline-block; min-width: 3em; border-bottom: 3px solid var(--go); }
.tb-cards-controls { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.tb-cards-hint { margin: 0; font-size: 13px; font-weight: 600; opacity: .55; text-align: center; }

/* ==========================================================================
   «Відповідності»
   ========================================================================== */

.tb-pairs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(8px, 1.5vw, 14px); width: 100%; max-width: 1100px; margin: 0 auto; padding: clamp(12px, 3vw, 28px) 16px 32px; }
.tb-pair-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: clamp(84px, 15vh, 140px);
    padding: 12px;
    border: 3px solid var(--line);
    border-radius: var(--r-lg);
    color: var(--ink);
    font: 500 clamp(13px, 1.7vw, 17px)/1.35 var(--f-body);
    text-align: center;
    cursor: pointer;
    word-break: break-word;
    box-shadow: 0 5px 0 var(--line-2);
    transition: transform .12s, opacity .3s, border-color .15s;
    animation: tb-pop .4s cubic-bezier(.34, 1.56, .64, 1) both;
    -webkit-tap-highlight-color: transparent;
}
.tb-pair-tile p { margin: 0; }
.tb-pair-tile img { max-height: 70px; max-width: 100%; border-radius: 8px; }
.tb-pair-tile.is-q { background: #fff; }
.tb-pair-tile.is-a { background: var(--paper-2); border-color: rgba(255, 171, 0, .3); }
.tb-pair-tile.is-picked { border-color: var(--go); transform: translateY(-4px) scale(1.03); }
.tb-pair-tile.is-wrong { border-color: var(--coral); animation: tb-shake .4s ease both; }
.tb-pair-tile.is-cleared { opacity: 0; transform: scale(.6); pointer-events: none; }
.tb-pairs-score { font: 900 clamp(44px, 9vw, 72px)/1 var(--f-display); color: var(--go); }
.tb-pairs-top { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; font-weight: 800; }
.tb-pairs-top span { display: inline-flex; align-items: center; gap: 6px; }

/* ==========================================================================
   Адаптив нових частин
   ========================================================================== */

@media (max-width: 980px) {
    .tb-hw-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .tb-hw-grid .tb-code-card { grid-column: 1 / -1; }
    .tb-modes-3 { grid-template-columns: minmax(0, 1fr); }
    .tb-live-lobby { grid-template-columns: minmax(0, 1fr); }
    .tb-pairs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .tb-modes { grid-template-columns: minmax(0, 1fr); }
    .tb-hub-cover .tb-cover-name { max-width: 100%; }
    .tb-hw-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .tb-stat-tile { padding: 12px 10px; }
    .tb-stat-tile b { font-size: 22px; }
    .tb-hard { grid-template-columns: auto minmax(0, 1fr) 44px; }
    .tb-hard-bar { display: none; }
    .tb-epair { flex-wrap: wrap; }
    .tb-epair-side { flex-basis: calc(100% - 50px); }
    .tb-erow { flex-wrap: wrap; }
    .tb-erow-input { flex-basis: calc(100% - 50px); }
    .tb-erow-tools { margin-left: auto; }
    .tb-rte { font-size: 18px; min-height: 80px; }
    .tb-match { gap: 8px; }
    .tb-match-card { min-height: 56px; padding: 10px 10px 10px 32px; font-size: 14px; }
    .tb-match-col:first-child .tb-match-card { padding: 10px 32px 10px 10px; }
    .tb-match-badge { width: 22px; height: 22px; font-size: 11px; right: 5px; }
    .tb-match-col:last-child .tb-match-badge { left: 5px; }
    .tb-order-item { padding: 8px; gap: 8px; }
    .tb-order-btn, .tb-order-handle { width: 36px; height: 36px; }
    .tb-live-row { grid-template-columns: 30px minmax(0, 1fr) 54px 30px; }
    .tb-live-progress { grid-column: 2 / 4; grid-row: 2; height: 8px; }
    .tb-live-controls .tb-btn-xl { min-width: 0; width: 100%; }
    .tb-live-bar .tb-live-title { display: none; }
    .tb-pairs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tb-cards-controls .tb-btn-lg { flex: 1; }
    .tb-flashcard { height: clamp(280px, 56vh, 420px); }
    .tb-inline-field { padding-left: 0; }
}

.tb-review-cap { display: block; margin: 10px 0 4px; font: 700 12px/1 var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }

/* Старі запитання з бази часто мають порожні абзаци (<p><br></p>) на початку
   чи в кінці варіанта — не показуємо їх, щоб не ламали висоту плиток */
.tb-answer p:empty, .tb-answer p:has(> br:only-child),
.tb-qopt p:empty, .tb-qopt p:has(> br:only-child),
.tb-question-text p:empty, .tb-question-text p:has(> br:only-child),
.tb-review-opt p:empty, .tb-review-opt p:has(> br:only-child),
.tb-flashcard-text p:empty, .tb-flashcard-text p:has(> br:only-child),
.tb-pair-tile p:empty, .tb-pair-tile p:has(> br:only-child) { display: none; }
/* у варіантах абзаци — здебільшого артефакт вставки з PDF/Word (кожен рядок окремим <p>):
   зливаємо їх в один потік тексту */
.tb-answer p, .tb-qopt-text p, .tb-review-opt p, .tb-order-body p, .tb-match-card p, .tb-pair-tile p { display: inline; margin: 0; }
.tb-answer p + p::before, .tb-qopt-text p + p::before, .tb-review-opt p + p::before,
.tb-order-body p + p::before, .tb-match-card p + p::before, .tb-pair-tile p + p::before { content: ' '; }
/* довгі запитання: менший шрифт і вирівнювання по лівому краю, щоб читалось */
.tb-question.is-long .tb-question-text { font-size: clamp(16px, 1.9vw, 20px); font-weight: 400; text-align: left; line-height: 1.5; }
.tb-question.is-long .tb-question-text strong, .tb-question.is-long .tb-question-text b { font-weight: 700; }
.tb-answers.is-long { --cols: 1; }
.tb-answers.is-long .tb-answer { hyphens: auto; }
.tb-answers.is-long .tb-answer { font-size: clamp(15px, 1.7vw, 18px); min-height: 0; }

/* картинки гри: місце під картинку одразу, мерехтіння поки вантажиться */
.tb-img { display: inline-grid; place-items: center; max-width: 100%; border-radius: 12px; }
.tb-img img { display: block; max-width: 100%; max-height: 18vh; border-radius: 12px; background: #fff; }
.tb-img.is-loading { min-width: 96px; min-height: 80px; background: linear-gradient(90deg, rgba(38, 50, 56, .06), rgba(38, 50, 56, .12), rgba(38, 50, 56, .06)); background-size: 200% 100%; animation: tb-shimmer 1.2s linear infinite; }
.tb-img.is-loading img { opacity: 0; }
@keyframes tb-shimmer { to { background-position: -200% 0; } }
.tb-img-error { padding: 12px; font-size: 13px; font-weight: 600; color: var(--ink-3); }
.tb-question-img.tb-img img { max-height: 32vh; border-radius: 16px; border: 2px solid var(--line); cursor: zoom-in; }
.tb-question-img.tb-img.is-loading { min-width: 200px; min-height: 140px; }
/* кілька відповідей: місце під квадратик праворуч не перебивається компактними правилами */
.tb-answers .tb-answer:has(.tb-answer-tick) { padding-right: 52px; }
.tb-answers.is-4 .tb-answer:has(.tb-answer-tick), .tb-answers .tb-answer:has(img):has(.tb-answer-tick) { padding-right: 14px; }
.tb-answers.is-4 .tb-answer-tick, .tb-answer:has(img) .tb-answer-tick { top: 10px; transform: none; }
@media (max-width: 640px) {
    .tb-answers .tb-answer:has(.tb-answer-tick), .tb-answers.is-4 .tb-answer:has(.tb-answer-tick) { padding-right: 46px; }
    .tb-answers.is-4 .tb-answer-tick { top: 50%; transform: translateY(-50%); }
}

/* у варіантах звичайна вага; жирним лише те, що виділив сам учитель */
.tb-answer strong, .tb-answer b, .tb-order-item strong, .tb-match-card strong, .tb-pair-tile strong,
.tb-qopt strong, .tb-review-opt strong, .tb-eopt-input strong, .tb-erow-input strong { font-weight: 700; }

/* довгі варіанти в редакторі: одна колонка, текст ліворуч, абзаци з PDF — одним потоком */
.tb-eopts.is-long { grid-template-columns: minmax(0, 1fr); }
.tb-eopts.is-long .tb-eopt, .tb-eopts.is-long .tb-eopt-add { min-height: 0; }
.tb-eopts.is-long .tb-eopt-input { display: block; min-height: 0; text-align: left; font-size: 16px; line-height: 1.45; }
.tb-eopts.is-long .tb-eopt-input p { display: inline; }
.tb-eopts.is-long .tb-eopt-input p + p::before { content: ' '; }

/* ==========================================================================
   Телефон: щільніше — запитання з варіантами вміщуються на один екран
   ========================================================================== */
@media (max-width: 640px) {
    .tb-hud { padding: 8px 10px; gap: 6px; }
    .tb-hud-chip { height: 32px; padding: 0 10px; border-radius: 10px; font-size: 13px; gap: 4px; }
    .tb-hud .tb-btn-icon { width: 32px; min-height: 32px; }
    .tb-track { padding: 0 10px; gap: 3px; }
    .tb-track i { height: 5px; }

    .tb-stagebox { padding: 10px 10px calc(108px + env(safe-area-inset-bottom)); gap: 10px; }
    .tb-question { padding: 16px 14px 14px; gap: 8px; border-radius: 18px; box-shadow: 0 4px 0 rgba(38, 50, 56, .07); }
    .tb-question::before { height: 4px; }
    .tb-question-num { padding: 4px 9px; font-size: 10.5px; }
    .tb-question-text { font-size: 18px; line-height: 1.32; }
    .tb-question.is-long .tb-question-text { font-size: 15.5px; }
    .tb-question-img.tb-img img { max-height: 24vh; }
    .tb-multi-hint { padding: 4px 10px; font-size: 12px; }

    .tb-answers { gap: 8px; }
    .tb-answer, .tb-answers.is-4 .tb-answer { min-height: 52px; padding: 8px 10px; gap: 10px; border-radius: 14px; font-size: 15.5px; box-shadow: 0 3px 0 var(--p-d, var(--line-2)); }
    .tb-answers .tb-answer:has(.tb-answer-tick), .tb-answers.is-4 .tb-answer:has(.tb-answer-tick) { padding-right: 42px; }
    .tb-answer-key, .tb-answers.is-4 .tb-answer-key { width: 30px; height: 30px; border-radius: 9px; font-size: 13px; }
    .tb-answer-tick { width: 24px; height: 24px; right: 10px; }
    .tb-answers.is-long .tb-answer { font-size: 14.5px; }
    .tb-answer:has(img) { padding: 34px 8px 10px; }
    .tb-answer img, .tb-img img { max-height: 15vh; }

    .tb-submit-row .tb-btn-xl { min-height: 52px; font-size: 17px; }
    .tb-big-input { min-height: 58px; font-size: 22px; padding: 10px 14px; }
    .tb-order { gap: 8px; }
    .tb-order-item { min-height: 52px; padding: 6px 8px; font-size: 15.5px; }
    .tb-order-num { width: 28px; height: 28px; font-size: 13px; }
    .tb-order-btn, .tb-order-handle { width: 34px; height: 34px; border-radius: 9px; }
    .tb-match-col { gap: 8px; }

    /* відгук — компактна смужка-картка, кнопка в рядку */
    .tb-feedback { flex-wrap: nowrap; gap: 10px; padding: 10px 10px 10px 12px; border-radius: 18px; bottom: calc(8px + env(safe-area-inset-bottom)); width: calc(100% - 16px); }
    .tb-feedback-emoji { width: 42px; height: 42px; border-radius: 13px; }
    .tb-feedback-emoji .lucide { width: 24px; height: 24px; }
    .tb-feedback-title { font-size: 17px; }
    .tb-feedback-sub { font-size: 13px; }
    .tb-feedback .tb-btn { width: auto; min-height: 44px; padding: 8px 14px; font-size: 15px; }

    /* результат */
    .tb-result { padding: 10px 10px 40px; }
    .tb-result-hero { padding: 18px 14px; gap: 12px; border-radius: 22px; }
    .tb-ring { width: 128px; }
    .tb-ring-val { font-size: 32px; }
    .tb-result-title { font-size: 22px; }
    .tb-stat { padding: 8px; }
    .tb-stat b { font-size: 22px; }
    .tb-result-actions .tb-btn-lg { width: 100%; }

    /* лобі */
    .tb-lobby { padding: 12px 10px; }
    .tb-lobby-card { padding: 20px 16px; border-radius: 22px; }
    .tb-input-code { min-height: 64px; font-size: 28px; }

    /* конструктор і сторінки вчителя */
    .tb-bar { padding: 8px 10px; gap: 6px; }
    .tb-logo-text { display: none; }
    .tb-builder { padding: 10px 10px 80px; gap: 12px; }
    .tb-cover { padding: 16px; border-radius: 18px; }
    .tb-cover-name { margin: 14px 0 8px; font-size: 18px; }
    .tb-cover-stats { margin-top: 12px; gap: 8px; }
    .tb-cover-stat { padding: 8px 10px; }
    .tb-cover-stat b { font-size: 20px; }
    .tb-main-head { margin-bottom: 10px; }
    .tb-main-head h2 { font-size: 18px; }
    .tb-qlist { gap: 10px; }
    .tb-qcard { border-radius: 16px; }
    .tb-qtext { font-size: 15.5px; }
    .tb-qopt { padding: 6px 8px; font-size: 13.5px; }
    .tb-panel, .tb-ai-card { padding: 14px; border-radius: 18px; }
    .tb-page { padding: 12px 10px 60px; }
    .tb-page-title { margin: 22px 0 10px; font-size: 17px; }
    .tb-mode { padding: 12px; gap: 12px; }
    .tb-mode-ico { width: 44px; height: 44px; border-radius: 13px; }
    .tb-mode-body b { font-size: 16px; }
    .tb-mode-body span { font-size: 13px; }
    .tb-create { padding: 12px 10px 40px; gap: 14px; }
    .tb-create-card { padding: 16px; box-shadow: 5px 5px 0 var(--ink); }
    .tb-create h1 { font-size: 30px; }
    .tb-create-lead { font-size: 15px; margin-bottom: 14px; }
    .tb-hero-art { display: none; }

    /* редактор запитання */
    .tb-editor-bar { padding: 8px 10px; gap: 6px; }
    .tb-typebar { padding: 8px 10px; gap: 6px; }
    .tb-typechip { height: 36px; font-size: 13px; padding: 3px 12px 3px 3px; }
    .tb-typechip i { width: 28px; height: 28px; }
    .tb-editor-body { padding: 10px 10px 24px; }
    .tb-qbox { padding: 12px; border-radius: 16px; }
    .tb-rte { font-size: 17px; min-height: 64px; }
    .tb-eopts { gap: 10px; }
    .tb-eopt, .tb-eopt-add { min-height: 110px; border-radius: 16px; padding: 10px; }
    .tb-eopt-input { min-height: 48px; font-size: 16px; padding: 6px; }
    .tb-editor-foot { padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); }
    .tb-editor-foot .tb-btn-lg { min-height: 46px; padding: 10px 16px; font-size: 15px; }
    .tb-modal-wrap { padding: 8px; }
}
@media (max-width: 640px) {
    /* відповіді — внизу, під великим пальцем; питання — вгорі */
    .tb-game > .tb-stagebox { flex: 1; }
    .tb-stagebox > .tb-answers, .tb-stagebox > .tb-order, .tb-stagebox > .tb-type-answer { margin-top: auto; }
    .tb-answer, .tb-answers.is-4 .tb-answer { min-height: 58px; }
    .tb-answers.is-tiny .tb-answer { min-height: 70px; font-size: 18px; }
}
@media (max-width: 640px) {
    .tb-cover::before { width: 110px; height: 110px; right: -46px; top: -54px; }
    .tb-cover::after { width: 54px; height: 54px; right: 26px; top: 22px; opacity: .55; }
}
@media (max-width: 640px) {
    /* таблиця результатів — рядки-картки замість горизонтального скролу */
    .tb-table { min-width: 0; }
    .tb-table thead { display: none; }
    .tb-table tbody, .tb-table tr { display: block; }
    .tb-table tr { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
    .tb-table tr:last-child { border-bottom: 0; }
    .tb-table td { padding: 0; border: 0; }
    .tb-table td:nth-child(1) { grid-row: 1; grid-column: 1; color: var(--ink-3); font-weight: 700; }
    .tb-table td:nth-child(2) { grid-row: 1; grid-column: 2; min-width: 0; }
    .tb-table td:nth-child(4) { grid-row: 1; grid-column: 3; font-size: 17px; }
    .tb-table td:nth-child(3) { grid-row: 2; grid-column: 2 / -1; }
    .tb-table td:nth-child(5), .tb-table td:nth-child(6) { display: none; }
    .tb-table .tb-progress { width: 100%; }
    .tb-hw-head { margin-bottom: 12px; }
    .tb-page-h1 { font-size: 22px; }
}
@media (max-width: 640px) {
    .tb-live-qr { width: min(180px, 50vw); }
    .tb-live-code { font-size: 46px; }
    .tb-live-join { padding: 16px; gap: 10px; border-radius: 22px; }
    .tb-live-lobby { padding: 10px; gap: 16px; }
    .tb-live-bar { padding: 8px 10px; }
    .tb-live-board { padding: 10px; }
    .tb-live-row { padding: 10px; gap: 6px 10px; }
}
@media (max-width: 640px) {
    .tb-cards-stage { padding: 10px 10px 24px; gap: 12px; }
    .tb-cards-controls { flex-wrap: nowrap; gap: 6px; width: 100%; }
    .tb-cards-controls .tb-btn-lg { flex: 1; min-width: 0; padding: 12px 10px; font-size: 15px; }
    .tb-cards-controls .tb-btn-icon { flex: none; width: 40px; }
    .tb-flashcard-back .tb-flashcard-text { font-size: 24px; }
}
@media (max-width: 640px) {
    /* гра на швидкість — усе поле має бути видно без прокрутки */
    .tb-pairs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 10px; }
    .tb-pair-tile { min-height: 78px; padding: 8px 6px; border-radius: 14px; font-size: 13.5px; line-height: 1.25; box-shadow: 0 3px 0 var(--line-2); border-width: 2px; }
    .tb-pair-tile img { max-height: 54px; }
}
@media (max-width: 640px) {
    .tb-qcard-head { flex-wrap: nowrap; gap: 6px; }
    .tb-qcard-head .tb-chip-label { display: none; }
    .tb-qcard-head .tb-handle { width: 24px; }
}
/* ілюстрація на сторінці створення — у тій самій пастельній мові, що й гра */
.tb-hero-art-o { color: var(--ink); box-shadow: 0 5px 0 rgba(38, 50, 56, .12); }
.tb-hero-art-o1 { background: #d9f3fc; }
.tb-hero-art-o2 { background: #f7cdcd; }
.tb-hero-art-o3 { background: var(--mint); color: #fff; }
.tb-hero-art-o4 { background: #fce3b9; color: var(--ink); }
.tb-hero-art-star { display: flex; gap: 4px; }
.tb-hero-art-card .lucide { vertical-align: -0.15em; }

/* підтвердження (замість window.confirm) */
.tb-modal { color: var(--ink); }
.tb-confirm { z-index: 300; align-items: center; }
.tb-confirm-box { max-width: 440px; text-align: center; padding: 26px 24px 20px; }
.tb-confirm-box .tb-modal-foot { justify-content: center; }
.tb-confirm-ico { display: inline-grid; place-items: center; width: 56px; height: 56px; margin-bottom: 10px; border-radius: 18px; background: var(--paper-2); color: var(--go-d); }
.tb-confirm-ico.is-danger { background: var(--bad-bg); color: var(--coral-d); }
.tb-confirm-ico .lucide { width: 28px; height: 28px; }

/* формули (KaTeX) у тексті запитань і варіантів */
.tb-math .katex { font-size: 1.12em; }
.tb-math .katex-display { margin: .4em 0; }
.tb-answer .tb-math .katex, .tb-qopt .tb-math .katex, .tb-pair-tile .tb-math .katex { font-size: 1.18em; }
.tb-question-text .tb-math .katex { font-size: 1.08em; }

/* редактор формул */
.tb-rte-formula { display: inline-flex; align-items: center; gap: 5px; margin-left: 6px; background: var(--paper-2); color: #7a5200; }
.tb-rte-formula .lucide { width: 15px; height: 15px; }
.tb-formula-tools { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.tb-formula-tool {
    min-width: 44px; height: 40px;
    padding: 0 10px;
    border: 2px solid var(--line);
    border-radius: 11px;
    background: #fff;
    color: var(--ink);
    font: 600 17px/1 var(--f-body);
    cursor: pointer;
    box-shadow: 0 2px 0 var(--line);
}
.tb-formula-tool:hover:not(:disabled) { border-color: var(--go); background: var(--paper-2); }
.tb-formula-field { min-height: 72px; padding: 10px; border: 3px solid var(--line-2); border-radius: 16px; background: #fff; }
.tb-formula-field:focus-within { border-color: var(--go); box-shadow: 0 0 0 4px rgba(255, 171, 0, .2); }
.tb-mathfield { display: block; width: 100%; min-height: 48px; font-size: 28px; border: 0; outline: none; --caret-color: var(--go-d); --selection-background-color: rgba(255, 171, 0, .25); --contains-highlight-background-color: rgba(255, 171, 0, .08); }
.tb-formula-latex { margin-top: 10px; font-size: 13px; color: var(--ink-3); }
.tb-formula-latex summary { cursor: pointer; font-weight: 600; }
.tb-formula-latex code { display: block; margin-top: 6px; padding: 8px 10px; border-radius: 8px; background: var(--paper); color: var(--ink-2); word-break: break-all; }

/* попередній перегляд формул у конструкторі */
.tb-formula-preview { margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: var(--paper); border: 2px dashed var(--line-2); font-size: 18px; line-height: 1.5; color: var(--ink); }
.tb-formula-preview-cap { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 600; color: var(--ink-3); }
.tb-formula-preview .tb-math { cursor: pointer; border-radius: 6px; transition: background .15s; }
.tb-formula-preview .tb-math:hover { background: rgba(255, 171, 0, .2); outline: 2px solid rgba(255, 171, 0, .5); }
.tb-formula-preview p { margin: 0 0 .3em; }
.tb-formula-preview.is-compact { margin-top: 6px; padding: 6px 8px; font-size: 16px; text-align: center; background: rgba(255, 255, 255, .75); border-style: solid; border-width: 1px; }
.tb-erow .tb-formula-preview.is-compact { flex-basis: 100%; order: 5; text-align: left; }
@media (max-width: 640px) {
    .tb-formula-tool { min-width: 40px; height: 38px; font-size: 16px; }
    .tb-mathfield { font-size: 24px; }
}
/* дроби у варіантах не обрізаються (чисельник/знаменник вищі за рядок) */
.tb-qopt-text { overflow: visible; text-overflow: clip; }
.tb-qopt:has(.tb-math) { padding-top: 8px; padding-bottom: 8px; }

/* ==========================================================================
   Мобільний: картка запитання займає вільне місце, текст — по центру
   ========================================================================== */
@media (max-width: 640px) {
    .tb-stagebox > .tb-question.is-main { flex: 1 0 auto; min-height: 26vh; justify-content: center; }
    .tb-stagebox > .tb-question.is-main .tb-question-num { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); white-space: nowrap; }
    .tb-stagebox > .tb-question.is-main:has(.tb-question-num) { padding-top: 46px; }
}

/* розмір тексту (A− / A+) — масштабуємо лише запитання й відповіді */
.tb-stagebox { zoom: var(--tb-zoom, 1); }
.tb-hud-font { display: inline-flex; gap: 2px; flex: none; }
.tb-hud .tb-btn-icon:disabled { opacity: .35; }
@media (max-width: 400px) {
    .tb-hud { gap: 4px; }
    .tb-hud .tb-btn-icon { width: 36px; }
}

/* ==========================================================================
   Нові типи: конструктор
   ========================================================================== */
.tb-seg { display: inline-flex; flex: none; padding: 3px; border-radius: 12px; background: var(--paper); gap: 2px; }
.tb-seg button { min-height: 36px; padding: 0 12px; border: 0; border-radius: 9px; background: transparent; color: var(--ink-2); font: 700 14px/1 var(--f-body); cursor: pointer; }
.tb-seg button:hover { color: var(--ink); }
.tb-tf-seg button.is-on.is-true { background: var(--mint); color: #fff; box-shadow: 0 2px 0 var(--mint-d); }
.tb-tf-seg button.is-on.is-false { background: var(--coral); color: #fff; box-shadow: 0 2px 0 var(--coral-d); }
@media (max-width: 640px) {
    .tb-elist .tb-erow:has(.tb-tf-seg) { flex-wrap: wrap; }
    .tb-elist .tb-erow:has(.tb-tf-seg) .tb-erow-input { flex-basis: calc(100% - 50px); }
    .tb-elist .tb-erow:has(.tb-tf-seg) .tb-tf-seg { margin-left: 44px; }
}

.tb-egroups { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.tb-egroup { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: var(--r-lg); background: var(--p, var(--paper)); box-shadow: 0 4px 0 var(--p-d, var(--line)); }
.tb-egroup-head { display: flex; gap: 6px; align-items: center; }
.tb-egroup-head .tb-input { flex: 1; min-width: 0; font-weight: 800; background: #fff; }
.tb-egroup .tb-erow { padding: 6px; box-shadow: none; border-width: 0; }
.tb-egroup .tb-erow-add { min-height: 42px; background: rgba(255, 255, 255, .5); }
.tb-egroups .tb-eopt-add { min-height: 140px; }

.tb-enumeric { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; }
.tb-enumeric .tb-field { margin: 0; }
@media (max-width: 640px) { .tb-enumeric { grid-template-columns: 1fr; } }

.tb-blank-chip.is-select { background: var(--sky-d, #0288d1); }
.tb-blank-chip.is-select small { font-weight: 500; opacity: .85; }
.tb-blank-chip .lucide { width: 15px; height: 15px; stroke-width: 3; }

/* перегляд у списку */
.tb-qgroups { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; margin-top: 12px; }
.tb-qgroup { display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 12px; background: var(--paper); }
.tb-qgroup > b { font-weight: 800; }
.tb-qgroup > b p { margin: 0; display: inline; }
.tb-qtf { grid-template-columns: 1fr; }
.tb-qtf .tb-qopt.is-false { background: var(--paper); }
.tb-tf-chip { margin-left: auto; flex: none; padding: 3px 9px; border-radius: 99px; font-size: 12.5px; font-weight: 800; }
.tb-tf-chip.is-true { background: rgba(67, 160, 71, .16); color: var(--mint-d); }
.tb-tf-chip.is-false { background: rgba(255, 87, 34, .14); color: var(--coral-d); }
.tb-qpair .tb-tf-chip { margin-left: 0; justify-self: start; }

/* ==========================================================================
   Нові типи: гра
   ========================================================================== */
.tb-fill-select {
    max-width: min(100%, 260px);
    height: 1.8em;
    padding: 0 28px 0 10px;
    border: 0;
    border-bottom: 4px solid var(--sky);
    border-radius: 10px 10px 4px 4px;
    background: var(--paper-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23455a64' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 9px center;
    color: var(--ink);
    font: inherit;
    font-size: .85em;
    font-weight: 600;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    outline: none;
}
.tb-fill-select:focus { box-shadow: 0 0 0 3px rgba(41, 121, 255, .35); }
.tb-fill-select.is-ok { border-bottom-color: var(--mint); background-color: var(--ok-bg); }
.tb-fill-select.is-bad { border-bottom-color: var(--coral); background-color: var(--bad-bg); text-decoration: line-through; }
.tb-fill-select:disabled { opacity: 1; cursor: default; }

.tb-cat-pool { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.tb-cat-groups { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: 10px; }
.tb-cat-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 120px;
    padding: 10px;
    border: 3px dashed var(--s-line);
    border-radius: var(--r-lg);
    background: var(--s-surface);
    transition: border-color .15s, background .15s, transform .15s;
    cursor: default;
}
.tb-cat-group.is-target { border-color: var(--go); background: rgba(255, 171, 0, .08); cursor: pointer; }
.tb-cat-group.is-target:hover { transform: translateY(-2px); }
.tb-cat-title { font: 800 16px/1.25 var(--f-display); text-align: center; color: var(--s-fg); }
.tb-cat-title p { margin: 0; }
.tb-cat-items { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.tb-cat-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    min-height: 44px;
    padding: 8px 14px;
    border: 3px solid transparent;
    border-radius: 14px;
    background: var(--p, #fff);
    color: var(--ink);
    font: 500 16px/1.3 var(--f-body);
    box-shadow: 0 4px 0 var(--p-d, var(--line-2));
    cursor: pointer;
    overflow-wrap: anywhere;
    -webkit-tap-highlight-color: transparent;
    transition: transform .1s, box-shadow .1s, border-color .15s;
}
.tb-cat-chip p { margin: 0; display: inline; }
.tb-cat-chip img { max-height: 54px; border-radius: 8px; }
.tb-cat-chip:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--p-d, var(--line-2)); }
.tb-cat-chip.is-active { border-color: var(--ink); transform: translateY(-3px); box-shadow: 0 7px 0 var(--p-d, var(--line-2)); }
.tb-cat-chip.is-ok { border-color: var(--mint); }
.tb-cat-chip.is-bad { border-color: var(--coral); opacity: .75; }
.tb-cat-chip:disabled { cursor: default; }
@media (max-width: 640px) {
    .tb-cat-groups { grid-template-columns: repeat(min(var(--cols, 2), 2), minmax(0, 1fr)); gap: 8px; }
    .tb-cat-group { min-height: 96px; padding: 8px; }
    .tb-cat-chip { min-height: 40px; padding: 6px 10px; font-size: 15px; }
}

.tb-tf-list { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 860px; margin: 0 auto; }
.tb-tf-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 10px 10px 16px;
    border: 3px solid transparent;
    border-radius: var(--r-lg);
    background: var(--p, #fff);
    box-shadow: 0 4px 0 var(--p-d, var(--line-2));
    color: var(--ink);
    animation: tb-rise .45s cubic-bezier(.2, .9, .3, 1.2) both;
}
.tb-tf-row.is-ok { border-color: var(--mint); }
.tb-tf-row.is-bad { border-color: var(--coral); }
.tb-tf-text { flex: 1; min-width: 0; font: 500 clamp(15px, 1.9vw, 19px)/1.35 var(--f-body); overflow-wrap: break-word; }
.tb-tf-text p { margin: 0; }
.tb-tf-btns { display: inline-flex; gap: 6px; flex: none; }
.tb-tf-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 44px;
    padding: 0 12px;
    border: 2px solid rgba(38, 50, 56, .12);
    border-radius: 12px;
    background: rgba(255, 255, 255, .8);
    color: var(--ink-2);
    font: 700 14.5px/1 var(--f-body);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.tb-tf-btn .lucide { width: 16px; height: 16px; stroke-width: 3; }
.tb-tf-btn.is-true.is-on { background: var(--mint); border-color: var(--mint); color: #fff; box-shadow: 0 3px 0 var(--mint-d); }
.tb-tf-btn.is-false.is-on { background: var(--coral); border-color: var(--coral); color: #fff; box-shadow: 0 3px 0 var(--coral-d); }
.tb-tf-btn.is-solution:not(.is-on) { border-color: var(--mint); border-style: dashed; color: var(--mint-d); }
.tb-tf-btn:disabled { cursor: default; }
@media (max-width: 640px) {
    .tb-tf-row { flex-direction: column; align-items: stretch; gap: 8px; padding: 10px; }
    .tb-tf-btns { display: grid; grid-template-columns: 1fr 1fr; }
    .tb-tf-btn { justify-content: center; }
}

/* ==========================================================================
   Ігрові режими
   ========================================================================== */
.tb-game-svg { display: block; width: 100%; height: auto; }
.tb-svg-label { font-family: var(--f-display); paint-order: stroke; stroke: rgba(255, 255, 255, .85); stroke-width: 4px; stroke-linejoin: round; }
.tb-game-avatar { transition: transform 1s cubic-bezier(.3, .9, .3, 1.1); }
.tb-game-fill { transition: x2 1s ease; }
.tb-flag-wave { transform-box: fill-box; transform-origin: left center; animation: tb-wave 1.6s ease-in-out infinite alternate; }
.tb-sail { transform-box: fill-box; transform-origin: left bottom; animation: tb-wave 2.2s ease-in-out infinite alternate; }
@keyframes tb-wave { to { transform: skewY(-6deg) scaleX(.94); } }
@media (prefers-reduced-motion: reduce) {
    .tb-game-avatar, .tb-game-fill { transition: none; }
    .tb-flag-wave, .tb-sail { animation: none; }
}

.tb-game-band { position: relative; width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 clamp(12px, 3vw, 24px); }
.tb-game-band .tb-game-svg { max-height: 120px; border-radius: 16px; overflow: hidden; box-shadow: var(--s-shadow); border: 2px solid var(--s-surface-line); }
.tb-game-fact {
    position: absolute;
    left: 50%;
    top: calc(100% + 6px);
    z-index: 5;
    width: min(92%, 560px);
    transform: translateX(-50%);
    padding: 10px 14px;
    border-radius: 14px;
    background: var(--ink);
    color: #fff;
    font-size: 14.5px;
    line-height: 1.4;
    box-shadow: 0 10px 30px rgba(38, 50, 56, .25);
    animation: tb-rise .4s cubic-bezier(.2, .9, .3, 1.2) both;
}
.tb-game-fact b { color: var(--go); }
@media (max-width: 640px) { .tb-game-band .tb-game-svg { max-height: 72px; border-radius: 12px; } }

.tb-game-pick { max-width: 980px; margin: 0 auto; }
.tb-game-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: 100%; margin: 6px 0 18px; }
.tb-game-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 18px;
    border: 3px solid transparent;
    border-radius: var(--r-lg);
    background: var(--s-surface);
    color: var(--s-fg);
    text-align: left;
    box-shadow: 0 5px 0 var(--g, var(--line-2));
    cursor: pointer;
    transition: transform .12s, border-color .15s;
}
.tb-game-card:hover { transform: translateY(-3px); border-color: var(--g); }
.tb-game-card .lucide { width: 34px; height: 34px; padding: 6px; border-radius: 10px; background: var(--g); color: #fff; }
.tb-game-card b { font: 800 18px/1.2 var(--f-display); }
.tb-game-card span { font-size: 14px; line-height: 1.4; color: var(--s-muted); }
@media (max-width: 640px) {
    .tb-game-cards { grid-template-columns: 1fr; gap: 8px; }
    .tb-game-card { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 12px; padding: 12px; }
    .tb-game-card .lucide { grid-row: span 2; }
    .tb-game-card span { font-size: 13px; }
}

/* досягнення на сторінці результату й сцена для проєктора */
.tb-achieve { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 16px; align-items: center; margin: 18px 0; padding: 14px; border-radius: var(--r-xl); background: #fff; border: 2px solid var(--line); box-shadow: 0 5px 0 var(--line); }
.tb-achieve .tb-game-svg { border-radius: 14px; }
.tb-achieve h3 { margin: 0 0 6px; font: 800 22px/1.2 var(--f-display); }
.tb-achieve p { margin: 0; color: var(--ink-2); line-height: 1.45; }
@media (max-width: 640px) { .tb-achieve { grid-template-columns: 1fr; } }
.tb-live-stage { margin: 0 0 18px; border-radius: var(--r-xl); overflow: hidden; border: 2px solid var(--s-surface-line); }

/* вибір гри в налаштуваннях ДЗ / гри */
.tb-game-picker { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.tb-game-opt {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 12px;
    border: 2px solid var(--line);
    border-radius: var(--r);
    background: #fff;
    color: var(--ink);
    text-align: left;
    cursor: pointer;
    box-shadow: 0 3px 0 var(--line);
}
.tb-game-opt .lucide { width: 30px; height: 30px; padding: 5px; border-radius: 9px; background: var(--g, var(--ink-3)); color: #fff; }
.tb-game-opt b { font: 800 15px/1.2 var(--f-display); }
.tb-game-opt span { font-size: 12.5px; color: var(--ink-2); line-height: 1.3; }
.tb-game-opt.is-on { border-color: var(--g, var(--ink)); box-shadow: 0 3px 0 var(--g, var(--ink)); background: var(--paper); }
@media (max-width: 640px) { .tb-game-picker { grid-template-columns: 1fr 1fr; } }
.tb-live-game { margin: 0 0 10px; color: var(--s-muted); line-height: 1.4; }
.tb-live-game b { color: var(--s-fg); }
.tb-live-final .tb-live-stage { max-width: 900px; margin: 0 auto 18px; }
@media (max-width: 640px) {
    /* пропуски: текст із полями теж займає вільне місце */
    .tb-stagebox > .tb-question.tb-fill-text { flex: 1 0 auto; min-height: 26vh; }
    .tb-stagebox > .tb-question.is-main:not(.is-long) .tb-question-text { font-size: 21px; }
}
.tb-qpair.is-tf { grid-template-columns: minmax(0, 1fr) auto; }
@media (max-width: 640px) {
    .tb-tf-list { gap: 8px; }
    .tb-tf-row { gap: 6px; padding: 8px; }
    .tb-tf-btn { min-height: 40px; }
}

/* гра в реальному часі: поява фішок, «я», точки інших на смузі учня */
.tb-game-in { animation: tb-avatar-in .55s cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes tb-avatar-in { from { transform: scale(0); opacity: 0; } }
.tb-game-avatar.is-me > .tb-game-in { animation: tb-avatar-in .55s cubic-bezier(.34, 1.56, .64, 1) both, tb-me-bob 1.6s ease-in-out .6s infinite alternate; }
@keyframes tb-me-bob { to { transform: translateY(-4px); } }
.tb-band-others circle { opacity: .85; }
@media (prefers-reduced-motion: reduce) {
    .tb-game-in, .tb-game-avatar.is-me > .tb-game-in { animation: none; }
}
.tb-svg-label-strong { stroke-width: 5px; stroke: rgba(255, 255, 255, .92); }
.tb-hud-chip.is-full { background: var(--coral); border-color: var(--coral); color: #fff; }
.tb-hud-chip.is-full .lucide { color: #fff; }
.tb-band-strip { transition: transform 1s cubic-bezier(.3, .9, .3, 1.1); }
@media (prefers-reduced-motion: reduce) { .tb-band-strip { transition: none; } }
@media (max-width: 640px) { .tb-game-band .tb-game-svg { max-height: 96px; } }
.tb-svg-label-dark { stroke: rgba(13, 27, 42, .85); stroke-width: 4px; }

/* вибір гри: великі картки з живим прев’ю */
.tb-game-picker { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin-bottom: 18px; }
.tb-game-opt { padding: 8px; gap: 6px; overflow: hidden; }
.tb-game-opt b { display: flex; align-items: center; gap: 6px; font-size: 14.5px; }
.tb-game-opt b .lucide { width: 18px; height: 18px; padding: 0; border-radius: 0; background: none; color: var(--g); flex: none; }
.tb-game-thumb { display: block; width: 100%; aspect-ratio: 1000 / 560; border-radius: 10px; overflow: hidden; background: var(--paper); pointer-events: none; }
.tb-game-thumb .tb-game-svg { width: 100%; height: 100%; }
.tb-game-thumb.is-plain { display: grid; place-items: center; }
.tb-game-thumb.is-plain .lucide { width: 40px; height: 40px; padding: 8px; background: var(--ink-3); }
.tb-game-opt.is-on { box-shadow: 0 0 0 3px var(--g, var(--ink)); border-color: var(--g, var(--ink)); }
.tb-game-about { margin: -8px 0 18px; padding: 10px 14px; border-radius: 12px; background: var(--paper); color: var(--ink-2); line-height: 1.45; }
@media (max-width: 640px) { .tb-game-picker { grid-template-columns: 1fr 1fr; } }

/* ігри: «живі» деталі — вітер, сонце, поява нового етапу */
.tb-sway { transform-box: fill-box; transform-origin: 50% 100%; animation: tb-sway 4s ease-in-out infinite alternate; }
@keyframes tb-sway { from { transform: rotate(-2deg); } to { transform: rotate(2deg); } }
.tb-sun-rays > rect { transform-box: view-box; }
.tb-sun-rays { animation: tb-sun-pulse 3s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
@keyframes tb-sun-pulse { to { opacity: .85; } }
.tb-clouds { animation: tb-clouds 24s linear infinite alternate; }
@keyframes tb-clouds { to { transform: translateX(40px); } }
.tb-step-art { animation: tb-step-in .6s cubic-bezier(.34, 1.56, .64, 1); transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes tb-step-in { from { transform: scale(.8); opacity: .3; } }
.tb-flame { transform-box: fill-box; transform-origin: 50% 100%; animation: tb-flame .35s ease-in-out infinite alternate; }
@keyframes tb-flame { to { transform: scaleY(1.25) scaleX(.9); } }
@media (prefers-reduced-motion: reduce) {
    .tb-sway, .tb-sun-rays, .tb-clouds, .tb-step-art, .tb-flame { animation: none; }
}

/* повний прогрес гри (натиснути на малюнок у смузі) */
.tb-band-art { cursor: pointer; }
.tb-band-art:hover > rect { filter: brightness(.97); }
.tb-progress-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.tb-progress-steps li { display: grid; grid-template-columns: 76px 1fr; gap: 10px; align-items: start; padding: 10px; border-radius: 14px; background: var(--paper); border: 2px solid transparent; }
.tb-progress-steps li.is-now { background: #fff8e1; border-color: var(--go); }
.tb-progress-steps li.is-next { opacity: .55; }
.tb-progress-steps li.is-next .tb-progress-art { filter: grayscale(1); }
.tb-progress-art { display: grid; place-items: center; width: 76px; height: 90px; border-radius: 10px; background: #fff; }
.tb-progress-art svg { width: 100%; height: 100%; }
.tb-progress-art b { font: 900 28px/1 var(--f-display); color: var(--ink-3); }
.tb-progress-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tb-progress-text b { display: flex; align-items: center; gap: 4px; font-weight: 800; }
.tb-progress-text b .lucide { width: 16px; height: 16px; color: var(--mint-d); flex: none; }
.tb-progress-steps li.is-next .tb-progress-text b .lucide { color: var(--ink-3); }
.tb-progress-text small { color: var(--ink-2); line-height: 1.4; font-size: 13px; }
@media (max-width: 640px) { .tb-progress-steps { grid-template-columns: 1fr; } }
.tb-live-note { display: flex; align-items: center; gap: 8px; margin: -4px 0 12px; padding: 8px 12px; border-radius: 12px; background: #fff8e1; border: 2px solid var(--go); color: var(--ink); font-weight: 600; }
.tb-live-note .lucide { width: 18px; height: 18px; color: var(--orange-d, #e65100); flex: none; }
.tb-chip .lucide { width: 15px; height: 15px; vertical-align: -2px; }

/* ===== Ігри: смуга на всю ширину, повний екран, тло сторінки під гру ===== */
.tb-game-band .tb-game-svg, .tb-achieve .tb-game-svg { max-height: none; height: auto; }
@media (max-width: 640px) { .tb-game-band .tb-game-svg { max-height: none; } }
.tb-game-band-btn { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 16px; -webkit-tap-highlight-color: transparent; }
.tb-game-band-btn .tb-game-svg { border-radius: 16px; overflow: hidden; box-shadow: 0 4px 0 rgba(38, 50, 56, .12); }
.tb-game-band-btn:focus-visible { outline: 3px solid var(--go); outline-offset: 2px; }
.tb-game-band-hint { position: absolute; right: 8px; bottom: 8px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: #263238; color: #fff; box-shadow: 0 2px 0 rgba(0, 0, 0, .25); }
.tb-game-band-hint .lucide { width: 16px; height: 16px; }
.tb-game-fact { border: 0; text-align: left; font: inherit; cursor: pointer; }

.tb-game-full { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; background: #fffdf7; animation: tb-rise .3s ease both; }
.tb-game-full-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px clamp(12px, 3vw, 24px); background: #263238; color: #fff; }
.tb-game-full-head b { display: block; font: 800 20px/1.2 var(--f-display); }
.tb-game-full-head span { display: block; font-size: 14px; opacity: .8; }
.tb-game-full-body { flex: 1; overflow: auto; padding: clamp(10px, 2.5vw, 22px); display: grid; gap: 16px; align-content: start; max-width: 1200px; width: 100%; margin: 0 auto; }
.tb-game-full-stage .tb-game-svg { border-radius: 18px; overflow: hidden; box-shadow: 0 6px 0 rgba(38, 50, 56, .12); }

.tb-game.has-backdrop { isolation: isolate; }
.tb-backdrop { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.tb-backdrop svg { width: 100%; height: 100%; display: block; }
.tb-bd-drift { animation: tb-bd-drift 60s linear infinite alternate; }
@keyframes tb-bd-drift { to { transform: translateX(120px); } }
.tb-bd-twinkle { animation: tb-bd-twinkle 3s ease-in-out infinite alternate; }
@keyframes tb-bd-twinkle { to { opacity: .25; } }
.tb-bd-pulse { transform-box: fill-box; transform-origin: center; animation: tb-bd-pulse 2.6s ease-in-out infinite; }
@keyframes tb-bd-pulse { 50% { transform: scale(1.6); opacity: .35; } }
.tb-bd-wave { animation: tb-bd-wave 10s linear infinite; }
@keyframes tb-bd-wave { to { transform: translateX(200px); } }
.tb-waves { animation: tb-bd-wave 9s linear infinite alternate; }
.tb-bd-sail { animation: tb-bd-sail 70s linear infinite; }
@keyframes tb-bd-sail { from { transform: translateX(-120px); } to { transform: translateX(1320px); } }
.tb-bd-spin { transform-box: fill-box; transform-origin: center; animation: tb-bd-spin 40s linear infinite; }
@keyframes tb-bd-spin { to { transform: rotate(360deg); } }
.tb-bd-petal { animation: tb-bd-petal 12s linear infinite; }
@keyframes tb-bd-petal { from { transform: translate(0, 0) rotate(0); } to { transform: translate(120px, 860px) rotate(540deg); } }
.tb-bd-cart { animation: tb-bd-cart 90s linear infinite; }
@keyframes tb-bd-cart { from { transform: translateX(-80px); } to { transform: translateX(1300px); } }
@media (prefers-reduced-motion: reduce) {
    .tb-bd-drift, .tb-bd-twinkle, .tb-bd-pulse, .tb-bd-wave, .tb-waves, .tb-bd-sail, .tb-bd-spin, .tb-bd-petal, .tb-bd-cart { animation: none; }
}

/* ===== Ігри: камера, рух, стрічка етапів ===== */
.tb-camera { transition: transform 1.1s cubic-bezier(.3, .9, .3, 1.05); }
.tb-march { animation: tb-march 1.6s linear infinite; }
@keyframes tb-march { to { stroke-dashoffset: -22; } }
.tb-walk { animation: tb-walk .5s ease-in-out infinite alternate; }
@keyframes tb-walk { to { transform: translateY(-3px) rotate(-2deg); } }
.tb-bump { animation: tb-bump-ride .4s ease-in-out infinite alternate; }
@keyframes tb-bump-ride { to { transform: translateY(-2px); } }
.tb-wheel { animation: tb-wheel 1.2s linear infinite; transform-box: fill-box; transform-origin: center; }
@keyframes tb-wheel { to { transform: rotate(360deg); } }
.tb-oar { transform-box: fill-box; transform-origin: 100% 0; animation: tb-oar 1.1s ease-in-out infinite alternate; }
@keyframes tb-oar { from { transform: rotate(-18deg); } to { transform: rotate(22deg); } }
.tb-wake { animation: tb-wake 1.4s ease-in-out infinite alternate; }
@keyframes tb-wake { to { opacity: .25; transform: translateX(-6px); } }
.tb-legs { animation: tb-legs .6s ease-in-out infinite alternate; }
.tb-legs-b { animation: tb-legs .6s ease-in-out infinite alternate-reverse; }
@keyframes tb-legs { from { transform: rotate(-18deg); } to { transform: rotate(18deg); } }
.tb-dust { animation: tb-dust 1s ease-out infinite; }
@keyframes tb-dust { from { opacity: .7; transform: translateX(0) scale(.6); } to { opacity: 0; transform: translateX(14px) scale(1.3); } }
.tb-spin-slow { animation: tb-bd-spin 240s linear infinite; }
.tb-birds { animation: tb-birds 18s linear infinite alternate; }
@keyframes tb-birds { to { transform: translate(60px, -14px); } }
.tb-write { transform-box: fill-box; transform-origin: 50% 100%; animation: tb-write 1.2s ease-in-out infinite alternate; }
@keyframes tb-write { from { transform: translate(-6px, 2px) rotate(-6deg); } to { transform: translate(4px, -2px) rotate(4deg); } }
.tb-drip { animation: tb-drip 1.6s ease-in infinite; }
@keyframes tb-drip { from { transform: translateY(-8px); opacity: 0; } 30% { opacity: 1; } to { transform: translateY(12px); opacity: 0; } }
.tb-sparkle { animation: tb-sparkle 1.4s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
@keyframes tb-sparkle { from { opacity: .4; transform: scale(.8) rotate(-10deg); } to { opacity: 1; transform: scale(1.1) rotate(10deg); } }
.tb-shimmer { animation: tb-shimmer-glow 2.4s ease-in-out infinite alternate; }
@keyframes tb-shimmer-glow { to { filter: brightness(1.12) saturate(1.15); } }
.tb-rain { animation: tb-rain .7s linear infinite; }
@keyframes tb-rain { to { transform: translate(-4px, 16px); opacity: .2; } }
.tb-flutter { animation: tb-flutter 5s ease-in-out infinite alternate; }
@keyframes tb-flutter { 25% { transform: translate(-16px, -10px); } 60% { transform: translate(10px, -22px); } to { transform: translate(-6px, -4px); } }
.tb-bee { animation: tb-bee 4s ease-in-out infinite alternate; }
@keyframes tb-bee { 30% { transform: translate(-22px, 8px); } 65% { transform: translate(12px, -8px); } to { transform: translate(-4px, 4px); } }
.tb-wings { transform-box: fill-box; transform-origin: 50% 100%; animation: tb-wings .18s ease-in-out infinite alternate; }
@keyframes tb-wings { to { transform: scaleY(.3); } }
@media (prefers-reduced-motion: reduce) {
    .tb-camera { transition: none; }
    .tb-march, .tb-walk, .tb-bump, .tb-wheel, .tb-oar, .tb-wake, .tb-legs, .tb-legs-b, .tb-dust, .tb-spin-slow, .tb-birds, .tb-write, .tb-drip, .tb-sparkle, .tb-shimmer, .tb-rain, .tb-flutter, .tb-bee, .tb-wings { animation: none; }
}

/* стрічка етапів у повному екрані: рівні картки, факти обраного — знизу */
.tb-timeline-wrap { display: grid; gap: 14px; }
.tb-timeline { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 8), minmax(0, 1fr)); gap: 8px; position: relative; }
.tb-timeline::before { content: ''; position: absolute; left: 6%; right: 6%; top: 44px; height: 4px; border-radius: 2px; background: var(--line-2); z-index: 0; }
.tb-timeline li { position: relative; z-index: 1; min-width: 0; }
.tb-timeline button { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; color: var(--ink); font: inherit; }
.tb-timeline button:disabled { cursor: default; }
.tb-timeline-art { position: relative; display: grid; place-items: center; width: 88px; max-width: 100%; aspect-ratio: 1; border-radius: 16px; background: #fff; border: 3px solid var(--line-2); box-shadow: 0 4px 0 var(--line-2); overflow: hidden; transition: transform .15s, border-color .15s; }
.tb-timeline-art svg { width: 86%; height: 86%; }
.tb-timeline-art b { font: 900 30px/1 var(--f-display); color: var(--ink-3); }
.tb-timeline-mark { position: absolute; right: 4px; top: 4px; width: 18px; height: 18px; padding: 2px; border-radius: 50%; background: var(--mint); color: #fff; }
.tb-timeline-mark.is-lock { background: var(--ink-3); }
.tb-timeline li.is-done .tb-timeline-art { border-color: var(--mint); box-shadow: 0 4px 0 var(--mint-d); }
.tb-timeline li.is-now .tb-timeline-art { border-color: var(--go); box-shadow: 0 4px 0 var(--orange-d, #e65100); }
.tb-timeline li.is-next .tb-timeline-art { filter: grayscale(1); opacity: .55; }
.tb-timeline li.is-picked .tb-timeline-art { transform: translateY(-4px) scale(1.06); }
.tb-timeline-name { display: block; width: 100%; text-align: center; font-size: 13px; font-weight: 700; line-height: 1.2; color: var(--ink-2); }
.tb-timeline-name b { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 2px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 11px; }
.tb-timeline li.is-now .tb-timeline-name { color: var(--ink); }
.tb-timeline li.is-now .tb-timeline-name b { background: var(--go); color: var(--ink); }
.tb-timeline-facts { padding: 14px 18px; border-radius: 16px; background: #fff; border: 2px solid var(--line); animation: tb-rise .3s ease both; }
.tb-timeline-facts h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font: 800 20px/1.2 var(--f-display); }
.tb-timeline-facts p { margin: 0 0 8px; line-height: 1.5; color: var(--ink-2); }
.tb-timeline-facts p:last-child { margin-bottom: 0; }
@media (max-width: 640px) {
    .tb-timeline { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 4px; }
    .tb-timeline::before { display: none; }
    .tb-timeline-art { width: 64px; border-radius: 12px; }
    .tb-timeline-name { font-size: 11.5px; }
}

/* старт самостійного проходження: вибір гри */
.tb-lobby-games-label { display: block; margin-top: 18px; }
.tb-lobby-games { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.tb-lobby-game { position: relative; display: grid; grid-template-columns: 14px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 10px 12px; border: 2px solid var(--line); border-radius: 14px; background: #fff; cursor: pointer; text-align: left; }
.tb-lobby-game input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.tb-lobby-game-dot { grid-row: span 2; width: 14px; height: 14px; border-radius: 50%; background: var(--g); box-shadow: 0 0 0 3px color-mix(in srgb, var(--g) 25%, #fff); }
.tb-lobby-game b { font: 800 15px/1.2 var(--f-display); color: var(--ink); }
.tb-lobby-game small { font-size: 12.5px; line-height: 1.3; color: var(--ink-2); }
.tb-lobby-game:has(input:checked) { border-color: var(--g); box-shadow: 0 0 0 3px color-mix(in srgb, var(--g) 30%, transparent); background: #fffdf7; }
.tb-lobby-game:has(input:focus-visible) { outline: 3px solid var(--go); outline-offset: 2px; }
@media (max-width: 420px) { .tb-lobby-games { grid-template-columns: 1fr; } }

/* ===== Бібліотека тестів і «Мої тести» ===== */
.tb-catalog { max-width: 1180px; }
.tb-catalog-head { display: grid; gap: 10px; margin-bottom: 18px; }
.tb-catalog-head .tb-modal-sub { max-width: none; }
.tb-filters { display: grid; gap: 12px; padding: 14px 16px; margin-bottom: 18px; border-radius: 18px; background: #fff; border: 2px solid var(--line); box-shadow: 0 4px 0 var(--line); }
.tb-filters-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.tb-filters-block { display: grid; gap: 6px; }
.tb-search { position: relative; display: flex; align-items: center; flex: 1 1 260px; min-width: 200px; }
.tb-search > .lucide { position: absolute; left: 12px; width: 18px; height: 18px; color: var(--ink-3); pointer-events: none; }
.tb-search input { width: 100%; min-height: 44px; padding: 8px 40px 8px 38px; border: 2px solid var(--line); border-radius: 12px; background: var(--paper); font: 500 15px/1.3 var(--f-body); color: var(--ink); outline: none; }
.tb-search input:focus { border-color: var(--sky); background: #fff; }
.tb-search-clear { position: absolute; right: 6px; display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-2); cursor: pointer; }
.tb-search-clear .lucide { width: 16px; height: 16px; }
.tb-selectbox { display: inline-flex; align-items: center; gap: 8px; }
.tb-selectbox > span { font-size: 13px; font-weight: 700; color: var(--ink-2); white-space: nowrap; }
.tb-selectbox .tb-select { min-height: 44px; padding: 6px 32px 6px 12px; border-radius: 12px; }
.tb-toggle-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 2px solid var(--line); border-radius: 12px; background: var(--paper); font-weight: 700; cursor: pointer; user-select: none; }
.tb-toggle-chip input { width: 18px; height: 18px; accent-color: var(--go); margin: 0; }
.tb-toggle-chip.is-on { border-color: var(--go); background: #fff8e1; }
/* це <label>: класичне label { margin-bottom: 5px } (Bootstrap) робило ряд фільтрів вищим і зсувало кнопку «Знайти» */
.tb-search, .tb-selectbox, .tb-toggle-chip { margin: 0; }
/* кнопка пошуку завжди такої ж висоти, як поля в її ряду (DESIGN.md §2.9) */
.tb-filters-row > .tb-btn, .tb-search-form > .tb-btn { align-self: stretch; min-height: 44px; }
.tb-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tb-chip-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border: 2px solid var(--line); border-radius: 99px; background: #fff; color: var(--ink); font: 600 14px/1 var(--f-body); cursor: pointer; transition: border-color .12s, background .12s; }
.tb-chip-btn .lucide { width: 15px; height: 15px; color: var(--ink-3); }
.tb-chip-btn small { font-size: 12px; font-weight: 600; color: var(--ink-3); }
.tb-chip-btn:hover { border-color: var(--line-2); }
.tb-chip-btn.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.tb-chip-btn.is-on small, .tb-chip-btn.is-on .lucide { color: rgba(255, 255, 255, .75); }
.tb-chip-btn.is-more { border-style: dashed; color: var(--ink-2); }
.tb-active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 4px; border-top: 1px dashed var(--line); }
.tb-active-filters .tb-chip { border: 0; cursor: pointer; font: inherit; font-size: 13px; font-weight: 700; }
.tb-active-filters .tb-chip .lucide { width: 14px; height: 14px; }
.tb-catalog-count { margin: 0 0 10px; font-weight: 700; color: var(--ink-2); min-height: 1.4em; }
.tb-tcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; }
.tb-tcard { display: flex; flex-direction: column; border-radius: 18px; background: #fff; border: 2px solid var(--line); box-shadow: 0 4px 0 var(--line); overflow: hidden; transition: transform .12s, box-shadow .12s; }
.tb-tcard:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--line-2); }
.tb-tcard.is-draft { background: #fffdf7; border-style: dashed; }
.tb-tcard-img { display: block; aspect-ratio: 16 / 7; overflow: hidden; background: var(--paper); }
.tb-tcard-img img { width: 100%; height: 100%; object-fit: cover; }
.tb-tcard-body { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 14px 16px 12px; }
.tb-tcard-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.tb-tcard-tags .tb-chip { font-size: 12px; }
.tb-tcard-tags .tb-chip .lucide { width: 13px; height: 13px; }
.tb-tcard-title { margin: 0; font: 800 17px/1.25 var(--f-display); }
.tb-tcard-title a { color: var(--ink); text-decoration: none; }
.tb-tcard-title a:hover { color: var(--orange-d, #e65100); }
.tb-tcard-example { display: flex; gap: 6px; margin: 0; font-size: 13.5px; line-height: 1.4; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tb-tcard-example .lucide { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--ink-3); }
.tb-tcard-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.tb-tcard-meta span { display: inline-flex; align-items: center; gap: 4px; }
.tb-tcard-meta .lucide { width: 14px; height: 14px; color: var(--ink-3); }
.tb-tcard-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); }
.tb-tcard-author { font-size: 12.5px; color: var(--ink-3); min-width: 0; }
.tb-tcard-author a { color: var(--ink-2); font-weight: 700; text-decoration: none; }
.tb-tcard-actions { display: flex; gap: 6px; flex: none; }
.tb-catalog-more { display: grid; justify-items: center; gap: 8px; padding: 24px 0 8px; }
@media (max-width: 640px) {
    .tb-filters { padding: 10px 12px; border-radius: 14px; }
    .tb-selectbox > span { display: none; }
    .tb-tcards { grid-template-columns: 1fr; gap: 10px; }
    .tb-tcard-body { padding: 12px 12px 10px; }
    .tb-tcard-foot { flex-wrap: wrap; }
}

/* ===== Публічна сторінка тесту (/test-beta/<slug>.html) ===== */
.tb-single { max-width: 980px; }
.tb-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 12px; font-size: 13.5px; font-weight: 600; color: var(--ink-3); }
.tb-crumbs a { color: var(--ink-2); text-decoration: none; }
.tb-crumbs a:hover { color: var(--orange-d, #e65100); }
.tb-single-card { position: relative; padding: clamp(16px, 3vw, 26px); border-radius: 20px; background: #fff; border: 2px solid var(--line); box-shadow: 0 5px 0 var(--line); }
.tb-single-draft { position: absolute; top: 14px; right: 14px; }
.tb-single .tb-page-h1 { margin: 0 0 14px; padding-right: 110px; font-size: clamp(22px, 3vw, 30px); line-height: 1.2; }
.tb-single-top { display: flex; gap: 18px; align-items: flex-start; }
.tb-single-img { flex: 0 0 220px; max-width: 40%; border-radius: 14px; overflow: hidden; background: var(--paper); }
.tb-single-img img { display: block; width: 100%; height: auto; }
.tb-single-info { flex: 1; min-width: 0; }
.tb-single-desc { margin-bottom: 12px; line-height: 1.5; color: var(--ink); }
.tb-single-desc p { margin: 0 0 8px; }
.tb-single-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 6px 18px; margin: 0; }
.tb-single-meta div { display: flex; gap: 6px; font-size: 14px; }
.tb-single-meta dt { color: var(--ink-3); font-weight: 600; white-space: nowrap; }
.tb-single-meta dt::after { content: ':'; }
.tb-single-meta dd { margin: 0; color: var(--ink); font-weight: 600; }
.tb-single-meta dd a { color: var(--ink); }
.tb-single-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.tb-single-tools .is-disabled { opacity: .5; cursor: not-allowed; }
.tb-inline-form { display: inline; }
.tb-single-modes { margin: 18px 0 8px; }
.tb-single-modes-head { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; margin-bottom: 8px; }
.tb-single-modes-head div { display: grid; }
.tb-single-modes-head b { font: 800 12px/1.3 var(--f-display); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.tb-single-modes-head span { font-size: 12px; color: var(--ink-3); }
.tb-single-modes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.tb-mode.tb-mode-sm { gap: 10px; padding: 10px 12px; }
.tb-mode.tb-mode-sm .tb-mode-ico { width: 40px; height: 40px; border-radius: 12px; }
.tb-mode.tb-mode-sm .tb-mode-ico svg { width: 20px; height: 20px; }
.tb-mode.tb-mode-sm .tb-mode-body b { font-size: 14.5px; }
.tb-mode.tb-mode-sm .tb-mode-body span { font-size: 12px; }
.tb-single-questions { display: grid; gap: 12px; }
.tb-single-q { padding: 16px 18px; border-radius: 18px; background: #fff; border: 2px solid var(--line); box-shadow: 0 4px 0 var(--line); }
.tb-single-q-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.tb-single-q-label { font: 800 12px/1.3 var(--f-display); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.tb-single-q-head .tb-chip { margin-left: auto; font-size: 12px; }
.tb-single-q-body { display: flex; gap: 14px; align-items: flex-start; }
.tb-single-q-img { flex: 0 0 200px; max-width: 40%; border-radius: 12px; }
.tb-single-q-text { flex: 1; min-width: 0; font: 600 17px/1.45 var(--f-body); color: var(--ink); overflow-wrap: anywhere; }
.tb-single-q-text p { margin: 0 0 6px; }
.tb-single-q > .tb-single-q-label { margin: 12px 0 6px; }
.tb-single-opts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 6px; }
.tb-single-opts.is-inline { display: flex; flex-wrap: wrap; align-items: center; }
.tb-single-opt { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; background: var(--paper); font-size: 15px; line-height: 1.35; }
.tb-single-opt img { max-height: 90px; max-width: 160px; border-radius: 8px; }
.tb-single-opt p { margin: 0; display: inline; }
.tb-single-opt-num { font-weight: 800; color: var(--ink-2); padding: 0 4px; }
.tb-single-marker { flex: none; width: 16px; height: 16px; border: 2px solid var(--ink-3); border-radius: 50%; }
.tb-single-marker.is-check { border-radius: 4px; }
.tb-single-marker.is-order { width: 18px; height: 12px; border: 0; border-top: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); border-radius: 0; }
.tb-single-marker.is-dot { width: 8px; height: 8px; border: 0; background: var(--ink-3); }
.tb-single-marker.is-group { width: 14px; height: 14px; border-radius: 3px; background: var(--sun); border-color: var(--sun); }
.tb-single-marker.is-tf { width: 42px; height: 16px; border-radius: 8px; border-color: var(--line-2); background: linear-gradient(90deg, var(--mint) 50%, var(--coral) 50%); opacity: .5; }
.tb-single-pairs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tb-single-pairs .tb-single-opts { grid-template-columns: 1fr; }
.tb-single-blank { display: inline-block; min-width: 90px; border-bottom: 3px solid var(--go); vertical-align: baseline; }
.tb-single-cta { display: grid; justify-items: center; gap: 12px; margin: 22px 0; padding: 22px; border-radius: 20px; background: #fff8e1; border: 2px solid var(--go); text-align: center; }
.tb-single-cta p { margin: 0; max-width: 520px; font-weight: 600; color: var(--ink); line-height: 1.45; }
.tb-single-related { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.tb-single-related .tb-page-title { margin-top: 10px; }
.tb-single-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tb-single-links a { display: block; padding: 10px 14px; border-radius: 12px; background: #fff; border: 2px solid var(--line); color: var(--ink); font-weight: 600; text-decoration: none; }
.tb-single-links a:hover { border-color: var(--go); }
.tb-share { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; background: rgba(38, 50, 56, .5); }
.tb-share[hidden] { display: none; }
.tb-share-box { display: grid; gap: 12px; width: min(100%, 520px); padding: 22px; border-radius: 20px; background: #fff; }
.tb-share-box h3 { margin: 0; font: 800 20px/1.25 var(--f-display); }
.tb-share-row { display: flex; gap: 8px; }
.tb-share-row .tb-input { flex: 1; min-width: 0; }
@media (max-width: 640px) {
    .tb-single .tb-page-h1 { padding-right: 0; }
    .tb-single-draft { position: static; display: inline-flex; margin-bottom: 8px; }
    .tb-single-top { flex-direction: column; }
    .tb-single-img { flex: none; max-width: 100%; }
    .tb-single-modes-head { grid-template-columns: 1fr; }
    .tb-single-modes-grid { grid-template-columns: 1fr 1fr; }
    .tb-single-q-body { flex-direction: column; }
    .tb-single-q-img { max-width: 100%; }
    .tb-single-pairs { grid-template-columns: 1fr; }
}
.tb-modes-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tb-mode .tb-mode-ico svg { width: 26px; height: 26px; }
@media (max-width: 900px) { .tb-modes-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .tb-modes, .tb-modes-3, .tb-modes-4 { grid-template-columns: 1fr; } }
/* сторінка тесту всередині звичайного макета сайту (шапка й бічне меню — сайту, зміст — бети) */
.tb-mode > .tb-mode-go { width: 22px; height: 22px; flex: none; }
.tb-embedded { font-family: var(--f-body); color: var(--ink); }
.tb-embedded .tb-page { max-width: none; padding: 4px 0 40px; }
.tb-embedded h1, .tb-embedded h2, .tb-embedded h3 { font-family: var(--f-display); margin-top: 0; }
.tb-embedded .tb-page-title { margin: 26px 0 12px; }
/* заголовок розділу: скидання вище (.tb-embedded h2 { margin-top: 0 }) переважало .tb-section-h2 — розділи
   прилипали до попередніх карток (DESIGN.md §1.2: 26px зверху, 12px знизу; перший у сторінці — 0, див. _layout.css) */
.tb-embedded .tb-section-h2 { margin: 26px 0 12px; }
.tb-embedded a { text-decoration: none; }
.tb-embedded .tb-single-q-text p:last-child, .tb-embedded .tb-single-desc p:last-child { margin-bottom: 0; }
.tb-embedded .tb-cover-name, .tb-embedded .tb-cover .tb-status { color: #fff; }
.tb-embedded .tb-cover-name { margin: 0 0 12px; font-weight: 800; } /* класичний .library h1 { font-weight: 400 } перебивав базове правило */
.tb-embedded .tb-modes-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tb-embedded .tb-chip { line-height: 1.2; }
.tb-embedded ul, .tb-embedded ol { padding-left: 0; }
.tb-embedded .tb-single-q-text ul, .tb-embedded .tb-single-q-text ol, .tb-embedded .tb-single-desc ul, .tb-embedded .tb-single-desc ol { padding-left: 22px; }
/* схожі й рекомендовані тести — натискні картки, як режими */
.tb-embedded .tb-single-links a, .tb-single-links a {
    position: relative;
    display: flex; align-items: center; gap: 10px;
    padding: 12px 44px 12px 14px;
    border: 2px solid var(--line); border-radius: 14px; background: #fff;
    color: var(--ink); font-weight: 700; line-height: 1.3;
    box-shadow: 0 3px 0 var(--line);
    transition: transform .12s ease, border-color .15s, box-shadow .12s ease, color .15s;
}
.tb-single-links a::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--go); box-shadow: 0 0 0 3px #fff8e1; }
.tb-single-links a::after {
    content: ''; position: absolute; right: 14px; top: 50%; width: 10px; height: 10px;
    border-top: 2.5px solid var(--ink-3); border-right: 2.5px solid var(--ink-3);
    transform: translateY(-50%) rotate(45deg); transition: transform .15s, border-color .15s;
}
.tb-single-links a:hover, .tb-single-links a:focus-visible { transform: translateY(-3px); border-color: var(--ink); box-shadow: 0 6px 0 var(--ink); color: var(--ink); outline: none; }
.tb-single-links a:hover::after, .tb-single-links a:focus-visible::after { border-color: var(--go); transform: translate(4px, -50%) rotate(45deg); }
.tb-single-links a:active { transform: translateY(1px); box-shadow: 0 2px 0 var(--ink); }
.tb-single-links a:focus-visible { outline: 3px solid var(--go); outline-offset: 2px; }

/* бічне меню сайту всередині сторінки бети — у стилі бети (розмітка партіала /account/_sidebar без змін) */
/* ширша колонка меню (232px замість col-md-2) — на планшеті й телефоні сітка не діє, бо колонка прихована */
@media (min-width: 992px) {
    .tb-embedded > .row { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 0 24px; margin: 0; }
    .tb-embedded > .row > [class*="col-"] { float: none; width: auto; padding: 0; min-height: 0; }
    .tb-embedded > .row::before, .tb-embedded > .row::after { display: none; }
    /* класичні сторінки з меню бети (views/beta-theme/account/_sidebar.php): та сама сітка 232px + 24px;
       у селекторі є .personal-sidebar, щоб правило потрапило в BetaAssets::sidebarCss */
    .row:has(> [class*="col-"] > .tb-sidebar-solo > .personal-sidebar) { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 0 24px; margin-left: 0; margin-right: 0; }
    .row:has(> [class*="col-"] > .tb-sidebar-solo > .personal-sidebar) > [class*="col-"] { float: none; width: auto; padding: 0; min-height: 0; }
    .row:has(> [class*="col-"] > .tb-sidebar-solo > .personal-sidebar)::before, .row:has(> [class*="col-"] > .tb-sidebar-solo > .personal-sidebar)::after { display: none; }
}
/* як і на сторінках бети (колонка hidden-sm hidden-xs), на планшеті й телефоні меню кабінету не показується —
   деякі класичні сторінки (/five) кладуть його в col-md-2 без hidden-xs, і меню займало перший екран */
@media (max-width: 991px) { .tb-sidebar-solo > .personal-sidebar { display: none; } }
.tb-embedded .personal-sidebar { margin: 0 0 18px; padding: 16px 12px 12px; border-radius: 20px; background: #fff; border: 2px solid var(--line); box-shadow: 0 4px 0 var(--line); font-family: var(--f-body); }
.tb-embedded .personal-sidebar .profile-info { text-align: center; padding: 4px 6px 12px; }
.tb-embedded .personal-sidebar .profile-avatar { width: 72px; height: 72px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 3px var(--go); object-fit: cover; }
.tb-embedded .personal-sidebar .profile-name { margin: 8px 0 0; padding: 0; font: 800 15px/1.25 var(--f-display); color: var(--ink); }
.tb-embedded .personal-sidebar .profile-reginfo { margin: 6px 0 0; padding: 0; font-size: 12.5px; color: var(--ink-3); line-height: 1.45; word-break: break-word; }
.tb-embedded .personal-sidebar .profile-avatar { display: block; margin: 0 auto; }
.tb-embedded .personal-sidebar .profile-reginfo a:not(.btn) { color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-color: var(--go); text-underline-offset: 3px; }
.tb-embedded .personal-sidebar .btn.btn-default { display: block; width: 100%; min-height: 40px; margin-bottom: 8px; padding: 8px 12px; border: 0; border-radius: 12px; background: var(--go); color: var(--ink); font: 800 13px/1.2 var(--f-display); text-transform: none; letter-spacing: 0; box-shadow: 0 4px 0 var(--orange-d, #e65100); transition: transform .1s, box-shadow .1s; }
.tb-embedded .personal-sidebar .btn.btn-default:hover { transform: translateY(-1px); box-shadow: 0 5px 0 var(--orange-d, #e65100); }
.tb-embedded .personal-sidebar .btn.btn-default:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--orange-d, #e65100); }
.tb-embedded .personal-sidebar > div[style] { font-family: var(--f-body); }
.tb-embedded .personal-sidebar ul { list-style: none; margin: 4px 0 0; padding: 0; }
.tb-embedded .personal-sidebar ul li { margin: 0; padding: 0; border: 0; }
/* рядок без посилання — назва розділу */
/* назви розділів — одним рядком (без верхнього регістру: «Підвищення кваліфікації» інакше не вміщається) */
.tb-embedded .personal-sidebar ul li:not(.divider):not(:has(a)) { margin: 14px 10px 6px; font: 800 12.5px/1.3 var(--f-display); letter-spacing: .01em; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-embedded .personal-sidebar ul li.divider { height: 1px; margin: 10px 8px 2px; background: var(--line); }
.tb-embedded .personal-sidebar ul li a { position: relative; display: block; padding: 8px 10px 8px 16px; border-radius: 10px; color: var(--ink); font-size: 14.5px; font-weight: 600; line-height: 1.3; text-decoration: none; transition: background .12s, color .12s; }
.tb-embedded .personal-sidebar ul li a::before { content: ''; position: absolute; left: 5px; top: 50%; width: 4px; height: 0; border-radius: 2px; background: var(--go); transform: translateY(-50%); transition: height .15s; }
.tb-embedded .personal-sidebar ul li a:hover { background: var(--paper); color: var(--ink); }
.tb-embedded .personal-sidebar ul li a:hover::before { height: 60%; }
.tb-embedded .personal-sidebar ul li.active a { background: #fff8e1; color: var(--ink); font-weight: 800; }
.tb-embedded .personal-sidebar ul li.active a::before { height: 70%; }
.tb-embedded .personal-sidebar ul li a .fa { color: var(--ink-3); margin-right: 4px; }
.tb-embedded .personal-sidebar ul li a sup { color: var(--coral); }
/* інфо-картка тесту: дані у два стовпчики поруч із картинкою, без порожнечі праворуч */
.tb-single-meta { grid-template-columns: repeat(2, minmax(200px, max-content)); gap: 8px 28px; }
.tb-single-meta div { font-size: 15px; }
.tb-single-top { align-items: center; }
/* бібліотека й «Мої тести» всередині макета сайту */
.tb-catalog-head-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.tb-embedded .tb-catalog { max-width: none; }
.tb-embedded .tb-catalog-head { margin-top: 4px; }
.tb-embedded .tb-page-h1 { margin: 0; font: 800 clamp(22px, 2.6vw, 28px)/1.2 var(--f-display); color: var(--ink); }
.tb-embedded .tb-tcards { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.tb-embedded .tb-catalog-head, .tb-embedded .tb-single-card, .tb-embedded .tb-filters { position: relative; }

/* усередині макета сайту глобальне a:hover сайту (колір + підкреслення) не має ламати елементи бети */
.tb-embedded a:hover, .tb-embedded a:focus { text-decoration: none; }
.tb-embedded a.tb-btn, .tb-embedded a.tb-btn:hover, .tb-embedded a.tb-btn:focus, .tb-embedded a.tb-btn:active { color: var(--t) !important; text-decoration: none !important; }
.tb-embedded a.tb-btn:hover { filter: brightness(1.05); }
.tb-embedded a.tb-btn-go:hover { --c: #ffbf3d; filter: none; }
.tb-embedded a.tb-btn-ghost:hover { background: rgba(38, 50, 56, .06); filter: none; }
.tb-embedded a.tb-btn-line:hover { border-color: var(--ink); filter: none; }
.tb-embedded a.tb-btn:focus-visible { outline: 3px solid var(--go); outline-offset: 2px; }
.tb-embedded .tb-tcard-title a:hover, .tb-embedded .tb-tcard-title a:focus { color: var(--orange-d, #e65100) !important; }
.tb-embedded .tb-tcard-author a:hover, .tb-embedded .tb-single-meta dd a:hover, .tb-embedded .tb-tcard-foot a:not(.tb-btn):hover { color: var(--orange-d, #e65100) !important; text-decoration: underline; text-decoration-color: var(--go); text-underline-offset: 3px; }
.tb-embedded .tb-crumbs a:hover, .tb-embedded .tb-crumbs a:focus { color: var(--orange-d, #e65100) !important; }
.tb-embedded a.tb-mode, .tb-embedded a.tb-mode:hover, .tb-embedded a.tb-mode:focus { color: var(--ink) !important; }
.tb-embedded a.tb-mode:focus-visible { outline: 3px solid var(--go); outline-offset: 2px; }
.tb-embedded .tb-single-links a:hover, .tb-embedded .tb-single-links a:focus { color: var(--ink) !important; }
.tb-embedded .personal-sidebar ul li a:hover, .tb-embedded .personal-sidebar ul li a:focus { color: var(--ink) !important; text-decoration: none; }
.tb-embedded .personal-sidebar .profile-reginfo a:not(.btn):hover { color: var(--orange-d, #e65100) !important; }
.tb-embedded .personal-sidebar .btn.btn-default, .tb-embedded .personal-sidebar .btn.btn-default:hover, .tb-embedded .personal-sidebar .btn.btn-default:focus { color: var(--ink) !important; text-decoration: none !important; }
.tb-embedded .tb-chip-btn:hover { color: var(--ink); }
.tb-embedded .tb-chip-btn.is-on:hover { color: #fff; }
.tb-embedded .tb-tcard:hover .tb-tcard-title a { color: var(--ink); }

/* ---------- «На Урок ПРО»: інтерактивні типи й ШІ-ліміт ---------- */
.tb-pro-badge {
    display: inline-flex; align-items: center; gap: 3px; flex: none; margin-left: auto; padding: 3px 7px; border-radius: 6px;
    background: var(--ink); color: var(--go); font: 800 10px/1 var(--f-display); letter-spacing: .08em; text-transform: uppercase;
}
.tb-pro-badge svg { width: 11px; height: 11px; }
.tb-pill .tb-pro-badge, .tb-typechip .tb-pro-badge { margin-left: 6px; }
.tb-add.is-pro-locked .tb-add-ico, .tb-typechip.is-pro-locked i { filter: saturate(.55); }
.tb-add.is-pro-locked > span:nth-child(2), .tb-typechip.is-pro-locked { color: var(--ink-2); }
.tb-pill.is-pro-locked { display: inline-flex; align-items: center; }
.tb-pro-crown { width: 22px; height: 22px; margin-right: 4px; color: var(--go); vertical-align: -3px; }
.tb-pro-list { margin: 0 0 14px; padding: 0; list-style: none; display: grid; gap: 10px; }
.tb-pro-list li {
    position: relative; padding: 12px 14px 12px 40px; border: 2px solid var(--line); border-radius: var(--r); background: var(--card);
    font-weight: 600; line-height: 1.45;
}
.tb-pro-list li::before {
    content: '✓'; position: absolute; left: 14px; top: 12px; color: var(--mint); font-weight: 900;
}
.tb-pro-price { margin: 0; color: var(--ink-2); font-weight: 700; text-align: center; }

/* ===== Кабінет у новому дизайні (/beta/...) ===== */
.tb-cab .tb-filters form.tb-filters-row { margin: 0; }
.tb-cab .tb-seg a { text-decoration: none; }
.tb-cab a.tb-chip-btn, .tb-cab a.tb-chip-btn:hover { text-decoration: none; color: var(--ink); }
.tb-cab a.tb-chip-btn.is-on, .tb-cab a.tb-chip-btn.is-on:hover { color: #fff; }
.tb-cab .tb-seg a.tb-chip-btn { border: 0; border-radius: 9px; min-height: 36px; background: transparent; }
.tb-cab .tb-seg a.tb-chip-btn.is-on { background: var(--ink); }
.tb-cab .tb-active-filters a.tb-chip { text-decoration: none; }
.tb-hw-cards { display: grid; gap: 10px; }
.tb-hw-card { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto 22px; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 16px; background: #fff; border: 2px solid var(--line); box-shadow: 0 4px 0 var(--line); color: var(--ink) !important; text-decoration: none !important; transition: transform .12s, border-color .15s, box-shadow .12s; }
.tb-hw-card:hover { transform: translateY(-2px); border-color: var(--ink); box-shadow: 0 6px 0 var(--ink); }
.tb-hw-card.is-live { border-left: 6px solid var(--mint); }
.tb-hw-kind { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--go); color: #fff; box-shadow: 0 3px 0 rgba(0, 0, 0, .15); }
.tb-hw-kind.is-live { background: var(--coral); }
.tb-hw-kind svg { width: 24px; height: 24px; }
.tb-hw-main { display: grid; gap: 4px; min-width: 0; }
.tb-hw-title { font: 800 16px/1.25 var(--f-display); overflow-wrap: anywhere; }
.tb-hw-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.tb-hw-tags .tb-chip { font-size: 12px; }
.tb-hw-when { font-size: 13px; color: var(--ink-2); }
.tb-hw-stats { display: flex; gap: 18px; }
.tb-stat-mini { display: grid; justify-items: center; min-width: 64px; text-align: center; }
.tb-stat-mini b { font: 800 20px/1 var(--f-display); }
.tb-stat-mini span { font-size: 11px; color: var(--ink-3); margin-top: 3px; }
.tb-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); vertical-align: middle; }
.tb-dot.is-on { background: var(--mint); box-shadow: 0 0 0 3px rgba(67, 160, 71, .25); }
.tb-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; padding: 22px 0 8px; }
.tb-pager-page { display: grid; place-items: center; min-width: 38px; height: 38px; padding: 0 8px; border-radius: 10px; border: 2px solid var(--line); background: #fff; color: var(--ink) !important; font-weight: 700; text-decoration: none !important; }
.tb-pager-page:hover { border-color: var(--ink); }
.tb-pager-page.is-on { background: var(--ink); border-color: var(--ink); color: #fff !important; }
.tb-pager-gap { color: var(--ink-3); padding: 0 4px; }
.tb-stars { display: inline-block; width: 70px; height: 13px; background: linear-gradient(90deg, var(--go) calc(var(--v, 0) * 100%), var(--line-2) 0); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 13'%3E%3Cpath d='M7 0l2 4.3 4.7.6-3.4 3.3.8 4.7L7 10.6 2.9 12.9l.8-4.7L.3 4.9 5 4.3zM21 0l2 4.3 4.7.6-3.4 3.3.8 4.7L21 10.6l-4.1 2.3.8-4.7-3.4-3.3 4.7-.6zM35 0l2 4.3 4.7.6-3.4 3.3.8 4.7L35 10.6l-4.1 2.3.8-4.7-3.4-3.3 4.7-.6zM49 0l2 4.3 4.7.6-3.4 3.3.8 4.7L49 10.6l-4.1 2.3.8-4.7-3.4-3.3 4.7-.6zM63 0l2 4.3 4.7.6-3.4 3.3.8 4.7L63 10.6l-4.1 2.3.8-4.7-3.4-3.3 4.7-.6z'/%3E%3C/svg%3E") no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 13'%3E%3Cpath d='M7 0l2 4.3 4.7.6-3.4 3.3.8 4.7L7 10.6 2.9 12.9l.8-4.7L.3 4.9 5 4.3zM21 0l2 4.3 4.7.6-3.4 3.3.8 4.7L21 10.6l-4.1 2.3.8-4.7-3.4-3.3 4.7-.6zM35 0l2 4.3 4.7.6-3.4 3.3.8 4.7L35 10.6l-4.1 2.3.8-4.7-3.4-3.3 4.7-.6zM49 0l2 4.3 4.7.6-3.4 3.3.8 4.7L49 10.6l-4.1 2.3.8-4.7-3.4-3.3 4.7-.6zM63 0l2 4.3 4.7.6-3.4 3.3.8 4.7L63 10.6l-4.1 2.3.8-4.7-3.4-3.3 4.7-.6z'/%3E%3C/svg%3E") no-repeat; vertical-align: -2px; }
/* сертифікація */
.tb-cert-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-bottom: 18px; }
.tb-cert-summary .tb-stat-tile { display: grid; justify-items: center; gap: 4px; padding: 14px 12px; border-radius: 16px; background: #fff; border: 2px solid var(--line); box-shadow: 0 4px 0 var(--line); text-align: center; }
.tb-cert-summary .tb-stat-tile b { font: 800 26px/1 var(--f-display); }
.tb-cert-summary .tb-stat-tile span { font-size: 12.5px; color: var(--ink-2); line-height: 1.3; }
.tb-cert-levels { display: grid; gap: 14px; }
.tb-cert { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px; padding: 18px; border-radius: 20px; background: #fff; border: 2px solid var(--line); border-left: 8px solid var(--g); box-shadow: 0 5px 0 var(--line); }
.tb-cert.is-done { background: #fbfdf7; }
.tb-cert-preview { display: grid; gap: 6px; justify-items: center; align-content: start; }
.tb-cert-preview img { width: 100%; border-radius: 10px; box-shadow: 0 4px 0 var(--line); }
.tb-cert-preview small { font-size: 12px; color: var(--ink-3); text-align: center; }
.tb-cert-body { display: grid; gap: 10px; align-content: start; }
.tb-cert-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.tb-cert-head h2 { margin: 0; font: 800 20px/1.2 var(--f-display); }
.tb-cert-head .tb-chip svg { width: 14px; height: 14px; }
.tb-cert-bar { height: 8px; border-radius: 4px; background: var(--paper-2, var(--paper)); overflow: hidden; }
.tb-cert-bar i { display: block; height: 100%; border-radius: 4px; background: var(--g); transition: width .4s; }
.tb-cert-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tb-cert-steps li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: start; font-size: 15px; line-height: 1.45; color: var(--ink); }
.tb-cert-mark { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line-2); background: #fff; color: #fff; }
.tb-cert-mark svg { width: 14px; height: 14px; }
.tb-cert-steps li.is-ok .tb-cert-mark { background: var(--mint); border-color: var(--mint); }
.tb-cert-steps li.is-ok { color: var(--ink-2); }
.tb-cert-progress { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 99px; background: #fff8e1; color: var(--ink); font-size: 12.5px; font-weight: 700; }
.tb-cert-hint { display: block; margin-top: 2px; font-size: 12.5px; color: var(--ink-3); }
.tb-cert .tb-btn { justify-self: start; }
.tb-cert .tb-btn.is-disabled { opacity: .6; cursor: default; }
@media (max-width: 760px) {
    .tb-hw-card { grid-template-columns: 40px minmax(0, 1fr); }
    .tb-hw-kind { width: 40px; height: 40px; }
    .tb-hw-stats { grid-column: 1 / -1; justify-content: space-between; }
    .tb-hw-card > .tb-mode-go { display: none; }
    .tb-cert { grid-template-columns: 1fr; }
    .tb-cert-preview { grid-template-columns: 120px 1fr; justify-items: start; align-items: center; }
}
.tb-search > svg { position: absolute; left: 12px; width: 18px; height: 18px; color: var(--ink-3); pointer-events: none; }

/* ===== Кабінет: бібліотека (мої/збережені/завантажені розробки, відзнаки, конкурси) ===== */
.tb-lib-list { display: grid; gap: 10px; }
.tb-lib-item { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: start; gap: 14px; padding: 14px 16px; border-radius: 16px; background: #fff; border: 2px solid var(--line); box-shadow: 0 4px 0 var(--line); transition: transform .12s, box-shadow .12s; }
.tb-lib-item:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--line-2); }
.tb-lib-file { display: grid; place-items: center; width: 56px; height: 64px; border-radius: 10px; background: var(--ink); color: #fff !important; font: 800 12px/1 var(--f-display); text-transform: uppercase; text-decoration: none !important; letter-spacing: .02em; position: relative; }
.tb-lib-file::before { content: ""; position: absolute; top: 0; right: 0; width: 14px; height: 14px; border-radius: 0 10px 0 6px; background: rgba(255, 255, 255, .35); }
.tb-lib-file.is-docx, .tb-lib-file.is-doc { background: var(--sky); }
.tb-lib-file.is-pdf { background: var(--coral); }
.tb-lib-file.is-pptx, .tb-lib-file.is-ppt { background: var(--orange); }
.tb-lib-file.is-xlsx, .tb-lib-file.is-xls { background: var(--mint); }
.tb-lib-file.is-zip, .tb-lib-file.is-rar { background: var(--grape); }
.tb-lib-body { display: grid; gap: 6px; min-width: 0; }
.tb-lib-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.tb-lib-tags .tb-chip { font-size: 12px; }
.tb-lib-title { margin: 0; font: 800 17px/1.25 var(--f-display); word-break: break-word; }
.tb-lib-title a { color: var(--ink); text-decoration: none; }
.tb-lib-title a:hover { color: var(--orange-d, #e65100); }
.tb-lib-author { font-size: 13px; color: var(--ink-3); }
.tb-lib-author a { color: var(--ink-2); font-weight: 700; text-decoration: none; }
.tb-lib-attach { display: flex; gap: 6px; align-items: flex-start; font-size: 13px; color: var(--ink-2); }
.tb-lib-attach svg { flex: none; width: 15px; height: 15px; margin-top: 2px; color: var(--ink-3); }
.tb-lib-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.tb-lib-meta span { display: inline-flex; align-items: center; gap: 4px; }
.tb-lib-meta svg { width: 14px; height: 14px; color: var(--ink-3); }
.tb-lib-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; max-width: 240px; }
.tb-lib-actions .tb-btn svg { width: 15px; height: 15px; }
.tb-cab a.tb-btn, .tb-cab a.tb-btn:hover { text-decoration: none; }
.tb-cab .tb-modal-sub a { color: var(--ink-2); font-weight: 700; }
.tb-folders .tb-chip-btn svg { width: 15px; height: 15px; }
.tb-folders button.tb-chip-btn { font-family: var(--f-body); }
.tb-folder-actions { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 2px; }
.tb-filters .tb-hint { margin: 0; color: var(--ink-3); }
.tb-hint-block { margin: 18px 2px; color: var(--ink-2); }
.tb-hint-block a { color: var(--ink); font-weight: 700; }
.tb-note { padding: 12px 16px; margin-bottom: 16px; border-radius: 14px; background: #fff; border: 2px solid var(--line); font-weight: 600; color: var(--ink-2); }
.tb-note a { color: var(--ink); font-weight: 700; }
.tb-note-warn { background: #fff8e1; border-color: var(--go); }
.tb-section-h2 { margin: 26px 0 12px; font: 800 22px/1.2 var(--f-display); }
/* відзнаки */
.tb-awards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.tb-award { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; padding: 14px; border-radius: 18px; background: #fff; border: 2px solid var(--line); box-shadow: 0 4px 0 var(--line); border-top: 6px solid var(--g); }
.tb-award-preview { padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 8px; overflow: hidden; box-shadow: 0 3px 0 var(--line); align-self: start; }
.tb-award-preview img { display: block; width: 100%; }
.tb-award:not(.is-ready) .tb-award-preview img { opacity: .55; filter: grayscale(.4); }
.tb-award-body { display: grid; gap: 8px; align-content: start; }
.tb-award-kind { font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.tb-award-name { margin: 0; font: 800 15.5px/1.3 var(--f-display); }
.tb-award-body .tb-chip { justify-self: start; }
.tb-award-body .tb-chip svg { width: 14px; height: 14px; }
.tb-award-need { font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.tb-award-actions { display: flex; gap: 6px; padding-top: 2px; }
/* сертифікати про публікацію */
.tb-doc-table { display: grid; gap: 6px; }
.tb-doc-year { margin: 12px 0 2px; font: 800 14px/1 var(--f-display); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.tb-doc-row { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto auto; align-items: center; gap: 14px; padding: 10px 14px; border-radius: 14px; background: #fff; border: 2px solid var(--line); }
.tb-doc-row:hover { border-color: var(--line-2); }
.tb-doc-date { font-size: 13px; font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.tb-doc-name { display: grid; gap: 2px; min-width: 0; }
.tb-doc-name a { color: var(--ink); font-weight: 700; text-decoration: none; }
.tb-doc-name a:hover { color: var(--orange-d, #e65100); }
.tb-doc-name small { font-size: 12.5px; color: var(--ink-3); }
.tb-doc-number { font-size: 13px; font-weight: 700; color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tb-lightbox { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 20px; background: rgba(38, 50, 56, .72); }
.tb-lightbox[hidden] { display: none; }
.tb-lightbox-card { width: min(900px, 100%); max-height: 100%; overflow: auto; padding: 12px; border-radius: 18px; background: #fff; box-shadow: 0 10px 40px rgba(0, 0, 0, .3); }
.tb-lightbox-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; font: 700 15px/1.3 var(--f-display); }
.tb-lightbox img { display: block; width: 100%; border-radius: 10px; }
/* конкурси */
.tb-seasons { display: grid; gap: 10px; }
.tb-season { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; background: #fff; border: 2px solid var(--line); box-shadow: 0 4px 0 var(--line); border-left: 6px solid var(--line-2); }
.tb-season.is-done { border-left-color: var(--go); }
.tb-season-main { display: grid; gap: 6px; min-width: 0; }
.tb-season-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.tb-season-name { margin: 0; font: 800 18px/1.25 var(--f-display); }
.tb-season-when { font-size: 13.5px; color: var(--ink-2); }
.tb-season-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.tb-season-actions .tb-btn svg { width: 16px; height: 16px; }
/* модалки тек у стилі бети (розмітка класична — працюють ті самі обробники) */
.tb-embedded .folder-modal .modal-content { border-radius: 18px; border: 2px solid var(--line); box-shadow: 0 6px 0 var(--line), 0 20px 50px rgba(0, 0, 0, .2); font-family: var(--f-body); }
.tb-embedded .folder-modal .modal-header { border-bottom: 1px solid var(--line); font-family: var(--f-display); }
.tb-embedded .folder-modal .btn-orange { background: var(--go); border-color: var(--go-d); color: #fff; border-radius: 10px; font-weight: 700; }
.tb-embedded .folder-modal .btn-default { border-radius: 10px; font-weight: 700; }
.tb-embedded .folder-modal .form-control { border-radius: 10px; border: 2px solid var(--line); box-shadow: none; }
.tb-embedded .folder-modal .form-control:focus { border-color: var(--sky); }
.tb-embedded .folder-picker-item.is-checked { color: var(--ink); font-weight: 700; }
@media (max-width: 760px) {
    .tb-lib-item { grid-template-columns: 44px minmax(0, 1fr); padding: 12px; }
    .tb-lib-file { width: 44px; height: 52px; font-size: 10.5px; }
    .tb-lib-actions { grid-column: 1 / -1; justify-content: flex-start; max-width: none; }
    .tb-award { grid-template-columns: 80px minmax(0, 1fr); }
    .tb-doc-row { grid-template-columns: minmax(0, 1fr) auto; }
    .tb-doc-date { grid-column: 1 / -1; }
    .tb-doc-number { grid-column: 1; }
    .tb-season { grid-template-columns: 1fr; }
    .tb-season-actions { justify-content: flex-start; }
}
/* меню «ШІ» біля розробки: інструменти помічника, що працюють із файлом */
.tb-ai-menu { position: relative; }
.tb-ai-menu > summary { list-style: none; cursor: pointer; }
.tb-ai-menu > summary::-webkit-details-marker { display: none; }
.tb-ai-menu > summary svg { width: 15px; height: 15px; }
.tb-ai-menu-list { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: 280px; padding: 8px; border-radius: 14px; background: #fff; border: 2px solid var(--line); box-shadow: 0 6px 0 var(--line), 0 16px 40px rgba(38, 50, 56, .18); display: grid; gap: 2px; }
.tb-ai-menu-list > b { padding: 6px 10px 4px; font: 800 11.5px/1 var(--f-display); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.tb-ai-menu-list > a { display: grid; gap: 1px; padding: 7px 10px; border-radius: 10px; color: var(--ink) !important; text-decoration: none !important; }
.tb-ai-menu-list > a:hover { background: var(--paper); }
.tb-ai-menu-list > a span { font-weight: 700; font-size: 14px; }
.tb-ai-menu-list > a small { font-size: 12px; color: var(--ink-3); }
.tb-ai-menu-list > a.is-all { margin-top: 4px; border-top: 1px dashed var(--line); border-radius: 0 0 10px 10px; }
.tb-ai-menu-list > a.is-all span { color: var(--orange-d, #e65100); }
@media (max-width: 760px) { .tb-ai-menu-list { left: 0; right: auto; } }
/* відкрите меню «Створити з ШІ»: картка-рядок над наступними (інакше transform на hover замикав меню в її шарі,
   і кнопки нижніх карток перекривали список) */
.tb-lib-item { position: relative; }
.tb-lib-item:has(.tb-ai-menu[open]), .tb-lib-item:focus-within { z-index: 40; }
.tb-lib-item:has(.tb-ai-menu[open]) { transform: none; }
/* дії рядка з меню ШІ — рівною сіткою: «Створити з ШІ» на всю ширину, інші кнопки — однакові половини */
.tb-lib-actions:has(> .tb-ai-menu) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; width: 264px; max-width: none; align-content: start; }
.tb-lib-actions:has(> .tb-ai-menu) > .tb-ai-menu { grid-column: 1 / -1; }
.tb-lib-actions:has(> .tb-ai-menu) > .tb-ai-menu > summary, .tb-lib-actions:has(> .tb-ai-menu) > .tb-btn { width: 100%; justify-content: center; }
.tb-lib-actions:has(> .tb-ai-menu) > .tb-btn:last-child:nth-child(even) { grid-column: 1 / -1; }
@media (max-width: 640px) { .tb-lib-actions:has(> .tb-ai-menu) { width: 100%; } }

/* ===== Бібліотека: сторінка розробки (/beta/biblioteka/<slug>.html) ===== */
.tb-lib-single { max-width: 1180px; }
.tb-lib-single .tb-crumbs { margin: 6px 0 12px; padding: 0; background: none; border: 0; }
.tb-lib-single .tb-crumbs svg { width: 14px; height: 14px; color: var(--line-2); }
.tb-lib-head { grid-area: head; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; margin: 0; }
.tb-lib-head .tb-page-h1 { margin: 6px 0 10px; padding: 0; font-size: clamp(21px, 2.6vw, 28px); line-height: 1.2; }
.tb-lib-head-body { min-width: 0; }
.tb-lib-head .tb-tcard-tags a.tb-chip { text-decoration: none; }
.tb-lib-head .tb-tcard-tags a.tb-chip:hover { filter: brightness(.95); }
.tb-lib-head-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.tb-lib-head-meta > span { display: inline-flex; align-items: center; gap: 5px; }
.tb-lib-head-meta svg { width: 15px; height: 15px; color: var(--ink-3); }
.tb-lib-author-link { display: inline-flex; align-items: center; gap: 8px; color: var(--ink) !important; font-weight: 700; text-decoration: none !important; }
.tb-lib-author-link img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--go); }
.tb-lib-muted { color: var(--ink-3); }
.tb-lib-file-lg { width: 64px; height: 74px; font-size: 13px; }
.tb-lib-file-sm { width: 38px; height: 44px; font-size: 10px; border-radius: 8px; }
.tb-lib-file-sm::before { width: 10px; height: 10px; border-radius: 0 8px 0 5px; }
.tb-lib-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; grid-template-areas: "head top" "main top" "main bottom"; gap: 16px; align-items: start; }
.tb-lib-main { grid-area: main; display: grid; gap: 14px; min-width: 0; }
.tb-lib-aside { display: grid; gap: 14px; min-width: 0; }
.tb-lib-aside-top { grid-area: top; }
.tb-lib-aside-bottom { grid-area: bottom; }
.tb-lib-card { padding: 16px 18px; border-radius: 18px; background: #fff; border: 2px solid var(--line); box-shadow: 0 4px 0 var(--line); }
.tb-lib-h2 { margin: 0 0 10px; font: 800 18px/1.25 var(--f-display); color: var(--ink); }
.tb-lib-text { font-size: 15px; line-height: 1.6; color: var(--ink); }
.tb-lib-text p:last-child { margin-bottom: 0; }
.tb-lib-actions-card { display: grid; gap: 8px; }
/* усі дії — однакової висоти, з однаковим скругленням і вирівняним по центру змістом */
.tb-lib-actions-card .tb-btn, .tb-lib-dock .tb-btn { width: 100%; min-height: 46px; padding: 10px 14px; border-radius: 12px; font-size: 15px; justify-content: center; }
.tb-lib-actions-card .tb-btn-line, .tb-lib-dock .tb-btn-line { border-width: 2px; }
.tb-lib-actions-card .tb-btn svg, .tb-lib-dock .tb-btn svg { width: 18px; height: 18px; }
.tb-lib-actions-card .tb-btn.is-on, .tb-lib-dock .tb-btn.is-on { color: var(--coral-d, #c62828); border-color: var(--coral); }
.tb-lib-actions-card .tb-btn.is-on svg, .tb-lib-dock .tb-btn.is-on svg { fill: currentColor; }
.tb-lib-unavail { display: block; margin: -4px 0 2px; font-size: 12.5px; font-weight: 600; color: var(--coral-d, #c62828); text-align: center; }
/* панель помічника */
.tb-ai-panel { display: grid; gap: 10px; border-color: var(--ink); box-shadow: 0 4px 0 var(--ink); }
.tb-ai-panel-head { display: flex; align-items: center; gap: 10px; font: 800 15px/1.2 var(--f-display); }
.tb-ai-panel-head .tb-btn { pointer-events: none; flex: none; }
.tb-ai-panel-head .tb-btn svg { width: 14px; height: 14px; }
.tb-ai-panel > p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.tb-ai-panel-group { display: grid; gap: 6px; }
.tb-ai-panel-group > small { font: 800 11px/1 var(--f-display); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.tb-ai-panel .tb-chip-btn { min-height: 32px; padding: 0 10px; font-size: 13px; text-decoration: none !important; color: var(--ink) !important; }
.tb-ai-panel .tb-chip-btn:hover { border-color: var(--ink); background: var(--paper); }
.tb-ai-panel-all { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 13.5px; color: var(--orange-d, #e65100) !important; text-decoration: none !important; }
.tb-ai-panel-all svg { width: 15px; height: 15px; }
/* довідка про матеріал */
.tb-lib-info { display: grid; gap: 10px; }
.tb-lib-info-row { display: grid; gap: 2px; font-size: 14px; color: var(--ink); }
.tb-lib-info-row > small { font: 700 11.5px/1.2 var(--f-display); letter-spacing: .03em; text-transform: uppercase; color: var(--ink-3); }
.tb-lib-info-row > span { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; line-height: 1.4; }
.tb-lib-info-row svg { width: 15px; height: 15px; color: var(--ink-3); flex: none; }
.tb-lib-info-links a { padding: 2px 8px; border-radius: 99px; background: var(--paper); color: var(--ink) !important; font-weight: 700; font-size: 13px; text-decoration: none !important; }
.tb-lib-info-links a:hover { background: #fff8e1; }
/* промо вебінара й банери */
.tb-lib-webinar { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px; padding: 12px; font-size: 14px; color: var(--ink-2); }
.tb-lib-webinar-img { display: block; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; background: var(--paper); }
.tb-lib-webinar-img img { width: 100%; height: 100%; object-fit: cover; }
.tb-lib-webinar-body { display: grid; gap: 6px; align-content: center; min-width: 0; }
.tb-lib-webinar-body > b { font: 800 16px/1.3 var(--f-display); }
.tb-lib-webinar-body > b a { color: var(--ink) !important; text-decoration: none !important; }
.tb-lib-webinar-body > b a:hover { color: var(--orange-d, #e65100) !important; }
.tb-lib-webinar svg { width: 14px; height: 14px; vertical-align: -2px; }
.tb-lib-webinar .tb-btn { justify-self: start; margin-top: 2px; }
@media (max-width: 640px) { .tb-lib-webinar { grid-template-columns: 1fr; } }
.tb-lib-promo:empty, .tb-lib-promo-classic:empty { display: none; }
.tb-lib-promo-classic .promo-cert { border-radius: 18px; border: 2px solid var(--line); box-shadow: 0 4px 0 var(--line); }
/* перегляд файлу — класичні партіали в картці бети */
.tb-lib-preview { display: grid; gap: 14px; }
.tb-lib-preview .content-block, .tb-lib-preview .document-content-block > .content-block { margin: 0; padding: 16px 18px; border-radius: 18px; background: #fff; border: 2px solid var(--line); box-shadow: 0 4px 0 var(--line); }
.tb-lib-preview .document-content-block { display: grid; gap: 14px; }
.tb-lib-preview .doc-content-head, .tb-lib-preview .block-head { margin: 0 0 10px; padding: 0; border: 0; font: 800 18px/1.25 var(--f-display); color: var(--ink); background: none; }
.tb-lib-preview .doc-content { font-family: var(--f-body); line-height: 1.6; color: var(--ink); }
.tb-lib-preview .presentation-preview .navigator a { color: var(--ink); font-weight: 700; }
.tb-lib-preview .slide-transcript { padding: 10px 0; border-top: 1px dashed var(--line); }
.tb-lib-preview .slide-transcript .num { font-weight: 800; color: var(--ink-2); margin-bottom: 4px; }
.tb-lib-filetabs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tb-lib-filetabs li a { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border: 2px solid var(--line); border-radius: 12px; color: var(--ink) !important; font-size: 13.5px; font-weight: 700; text-decoration: none !important; }
.tb-lib-filetabs li.active a { border-color: var(--ink); background: var(--paper); }
/* відгуки — класичні партіали в картці бети */
.tb-lib-comments { font-family: var(--f-body); }
.tb-lib-comments .block-head { margin: 0 0 10px; padding: 0; border: 0; font: 800 18px/1.25 var(--f-display); color: var(--ink); background: none; }
.tb-lib-comments .block-head + .block-head, .tb-lib-comments .comment-wrapper + .block-head, .tb-lib-comments .rating-view.avarage + .block-head { margin-top: 18px; }
.tb-lib-comments .comment-form-container textarea.form-control { border: 2px solid var(--line); border-radius: 12px; box-shadow: none; font-family: var(--f-body); }
.tb-lib-comments .comment-form-container textarea.form-control:focus { border-color: var(--sky); }
.tb-lib-comments .btn-primary { background: var(--ink); border: 0; border-radius: 12px; font-weight: 700; box-shadow: 0 4px 0 var(--ink-shadow); }
.tb-lib-comments .btn-default.show-more { border: 2px solid var(--line-2); border-radius: 12px; font-weight: 700; }
.tb-lib-comments .comment { padding: 12px 0; border-top: 1px dashed var(--line); }
.tb-lib-comments .comment-author-avatar img { border-radius: 50%; }
.tb-lib-comments .rate-line { padding: 8px 0; }
.tb-lib-comments .desc-line { font-size: 12.5px; color: var(--ink-3); }
/* рекомендовані / схожі / поширити */
.tb-lib-rels { display: grid; gap: 6px; }
.tb-lib-rel { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 10px; align-items: center; padding: 6px; margin: 0 -6px; border-radius: 12px; color: var(--ink) !important; text-decoration: none !important; transition: background .12s; }
.tb-lib-rel:hover { background: var(--paper); }
.tb-lib-rel-body { display: grid; gap: 2px; min-width: 0; }
.tb-lib-rel-body b { font-size: 13.5px; line-height: 1.3; font-weight: 700; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tb-lib-rel-body small { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; color: var(--ink-3); }
.tb-lib-rel-body small svg { width: 13px; height: 13px; }
.tb-lib-share .tb-chip-btn { text-decoration: none !important; color: var(--ink) !important; }
.tb-lib-share .tb-share-facebook:hover { border-color: #1877f2; } .tb-lib-share .tb-share-viber:hover { border-color: #7360f2; } .tb-lib-share .tb-share-telegram:hover { border-color: #26a5e4; } .tb-lib-share .tb-share-twitter:hover { border-color: var(--ink); }
.tb-lib-admin { display: grid; gap: 6px; }
.tb-lib-admin > small { font: 800 11px/1 var(--f-display); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.tb-chip-btn-danger { color: var(--coral-d, #c62828) !important; border-color: var(--coral); }
.tb-note-ok { background: #e8f5e9; border-color: var(--mint); }
.tb-note-err { background: #ffebee; border-color: var(--coral); }
.tb-note svg { width: 16px; height: 16px; vertical-align: -3px; color: var(--ink-3); }
/* нижня панель на телефоні */
.tb-lib-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: #fff; border-top: 2px solid var(--line); box-shadow: 0 -6px 20px rgba(38, 50, 56, .08); }
.tb-lib-dock .tb-btn { width: 100%; }
.tb-lib-dock .tb-lib-unavail { display: none; }
.tb-lib-dock-dup { display: contents; }
@media (min-width: 768px) { .tb-lib-dock { display: none; } }
@media (max-width: 991px) {
    .tb-lib-grid { grid-template-columns: 1fr; grid-template-areas: "head" "top" "main" "bottom"; }
}
/* текст документа: конвертер лишає Times, «по ширині» й кеглі з Word — на екрані читаємо шрифтом бети
   (лише оформлення; сам текст — той самий, що індексується) */
.tb-lib-preview .doc-content, .tb-lib-preview .doc-content * { font-family: var(--f-body) !important; }
.tb-lib-preview .doc-content { overflow-x: auto !important; }
.tb-lib-preview .doc-content p, .tb-lib-preview .doc-content li, .tb-lib-preview .doc-content td, .tb-lib-preview .doc-content span, .tb-lib-preview .doc-content div { text-align: left !important; font-size: 15px !important; line-height: 1.6 !important; text-indent: 0 !important; }
.tb-lib-preview .doc-content h1, .tb-lib-preview .doc-content h2, .tb-lib-preview .doc-content h3 { text-align: left !important; font-size: 18px !important; line-height: 1.3 !important; }
.tb-lib-preview .doc-content img { max-width: 100% !important; height: auto !important; }
.tb-lib-preview .doc-content table { max-width: 100%; }
@media (max-width: 767px) {
    .tb-lib-single { padding-bottom: 72px; }
    .tb-lib-dock-dup { display: none; }
}
@media (max-width: 640px) {
    .tb-lib-head { grid-template-columns: 48px minmax(0, 1fr); gap: 12px; }
    .tb-lib-file-lg { width: 48px; height: 56px; font-size: 11px; }
    .tb-lib-head .tb-page-h1 { font-size: 20px; margin: 6px 0 8px; }
    .tb-lib-card { padding: 14px; border-radius: 14px; }
    .tb-lib-preview .content-block, .tb-lib-preview .document-content-block > .content-block { padding: 12px; border-radius: 14px; }
    .tb-lib-preview .doc-content p, .tb-lib-preview .doc-content li, .tb-lib-preview .doc-content td, .tb-lib-preview .doc-content span, .tb-lib-preview .doc-content div { font-size: 14.5px !important; }
    .tb-lib-grid { gap: 12px; }
    .tb-ai-panel .tb-chip-btn { min-height: 30px; font-size: 12.5px; }
}
/* відгуки на телефоні: оцінки в рядок зліва, без перенесення цифри на новий рядок */
.tb-lib-comments .rating-view .rating-mark { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; text-align: left; white-space: nowrap; }
.tb-lib-comments .rating-view .rating-mark .rating { display: inline-flex; flex: none; }
.tb-lib-comments .rating-view .rate-title { min-width: 0; }
.tb-lib-comments .comment-details .row > div { float: none; width: 100%; }
.tb-lib-comments .comment-details .rating-view { margin-top: 6px; }
@media (max-width: 640px) {
    .tb-lib-comments .rating-view.avarage .row > div { float: none; width: 100%; }
    .tb-lib-comments .comment-author-avatar { float: left; margin-right: 10px; }
    .tb-lib-comments .comment-author-avatar img { width: 40px; height: 40px; }
}
@media (max-width: 640px) {
    /* під аватаром (відступ 70px) оцінкам затісно — розгортаємо їх на всю ширину картки */
    .tb-lib-comments .comment-details .rating-view, .tb-lib-comments .comment-details .comment-body { margin-left: -70px; clear: both; }
    .tb-lib-comments .comment-details .comment-body { padding-top: 6px; }
    .tb-lib-comments .comment-details .rating-view .rating-mark { font-size: 13.5px; }
}
/* картка «Створити з цього файлу» (помічник вчителя) — у бічній колонці */
.tb-ai-section { display: grid; gap: 10px; padding: 14px; border-color: var(--ink); box-shadow: 0 4px 0 var(--ink); }
.tb-ai-section-head { display: flex; align-items: center; gap: 10px; }
.tb-ai-section-head .tb-btn { pointer-events: none; flex: none; min-height: 30px; padding: 0 10px; }
.tb-ai-section-head .tb-btn svg { width: 14px; height: 14px; }
.tb-ai-section-head .tb-lib-h2 { margin: 0; font-size: 16px; line-height: 1.2; }
.tb-ai-tools { display: grid; gap: 4px; }
.tb-ai-tool { display: grid; grid-template-columns: 30px minmax(0, 1fr) 14px; align-items: center; gap: 10px; min-height: 40px; padding: 4px 6px 4px 4px; border-radius: 10px; color: var(--ink) !important; text-decoration: none !important; transition: background .12s; }
.tb-ai-tool:hover { background: var(--paper); }
.tb-ai-tool b { font: 700 14px/1.25 var(--f-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-ai-tool-ico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; }
.tb-ai-tool-ico img { width: 17px; height: 17px; }
.tb-ai-tool > svg { width: 14px; height: 14px; color: var(--ink-3); }
.tb-ai-more > summary { list-style: none; display: inline-flex; align-items: center; gap: 4px; padding: 6px 4px; font-size: 13.5px; font-weight: 700; color: var(--ink-2); cursor: pointer; }
.tb-ai-more > summary::-webkit-details-marker { display: none; }
.tb-ai-more > summary svg { width: 14px; height: 14px; transform: rotate(90deg); transition: transform .15s; }
.tb-ai-more[open] > summary svg { transform: rotate(-90deg); }
.tb-ai-more[open] > summary { margin-bottom: 4px; }
.tb-ai-section-all { display: inline-flex; align-items: center; gap: 6px; padding-top: 8px; border-top: 1px dashed var(--line); font-weight: 800; font-size: 13.5px; color: var(--orange-d, #e65100) !important; text-decoration: none !important; }
.tb-ai-section-all svg { width: 15px; height: 15px; }
/* React-застосунки в оболонці: без власних відступів .tb-page — як було до спільної оболонки */
.tb-app-page { max-width: none; margin: 0; padding: 0; }
/* оболонка без бічного меню — одна колонка на всю ширину */
@media (min-width: 992px) { .tb-embedded.tb-embedded-wide > .row { grid-template-columns: minmax(0, 1fr); } }
/* сторінка тесту: відео й вебінар (ті самі посилання, що й у класичній правій колонці) */
.tb-single-extra { margin-top: 24px; padding: 16px 18px; border-radius: 18px; background: #fff; border: 2px solid var(--line); box-shadow: 0 4px 0 var(--line); }
.tb-single-extra-head h2 { margin: 0 0 4px; font: 800 18px/1.25 var(--f-display); color: var(--ink); }
.tb-single-extra-head p { margin: 0 0 10px; font-size: 14px; color: var(--ink-2); }
.tb-single-extra-head p a { color: var(--ink) !important; font-weight: 700; }
.tb-single-webinar { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 12px; align-items: center; margin: 12px 0; padding: 10px; border-radius: 14px; border: 2px solid var(--line); background: #fff; color: var(--ink) !important; text-decoration: none !important; }
.tb-single-webinar img { width: 100%; border-radius: 8px; }
.tb-single-webinar b { font: 800 15px/1.3 var(--f-display); }
.tb-single-video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.tb-single-video-grid a { display: block; border-radius: 10px; overflow: hidden; border: 2px solid var(--line); }
.tb-single-video-grid img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
@media (max-width: 640px) { .tb-single-webinar { grid-template-columns: 1fr; } .tb-single-video-grid { grid-template-columns: 1fr 1fr; } }
/* телефон/планшет: без від’ємних полів bootstrap-рядка оболонки (інакше сторінка ширша за екран) */
@media (max-width: 991px) {
    .tb-embedded > .row { margin-left: 0; margin-right: 0; }
    .tb-embedded > .row > [class*="col-"] { padding-left: 0; padding-right: 0; }
    .tb-embedded > .row::before, .tb-embedded > .row::after { display: none; }
}
@media (max-width: 640px) {
    .tb-single-meta { grid-template-columns: 1fr; gap: 6px; }
    .tb-single-meta div { flex-wrap: wrap; }
    .tb-single-info, .tb-single-card { min-width: 0; max-width: 100%; }
}

/* =====================================================================================
   ДИЗАЙН-СХЕМА КНОПОК І СТАНІВ (єдина для тестів, бібліотеки, кабінету, теми й помічника ШІ)
   Узгоджено з frontend/assistant/src/styles.css (.btn / .btn-primary / .btn-danger / .btn-ghost / .tab.active / .chip):
     primary   .tb-btn-go     — бурштин #ffab00, білий текст (головна дія сторінки: Завантажити, Створити, Зареєструватись, Знайти)
     secondary .tb-btn-line   — біла картка з рамкою 2px, темний текст (усі інші дії)
     ghost     .tb-btn-ghost  — прозора, темний текст (третьорядні дії: Скинути, Назад, Прибрати)
     danger    .tb-btn-coral  — корал, білий текст (лише руйнівні дії: Зупинити, Видалити)
     ai        .tb-btn-ai     — темна з веселковою рамкою (лише дії Помічника ШІ)
   Старі палітрові варіанти (.tb-btn-ink/.tb-btn-sky/.tb-btn-mint/.tb-btn-white) не видаляємо з розмітки — вони
   відображаються як primary/secondary, щоб на одній сторінці не було чорних, синіх і зелених кнопок.
   Вибрані стани (чипи, сторінки, вкладки) — як у помічника: світло-бурштинова підкладка з бурштиновою рамкою або біла картка з тінню. */
.tb-btn-ink, .tb-btn-sky, .tb-btn-mint { --c: var(--card); --c-d: var(--line-2); --t: var(--ink); border: 2px solid var(--line-2); text-shadow: none; }
.tb-btn-ink:hover, .tb-btn-sky:hover, .tb-btn-mint:hover, .tb-btn-line:hover { --c-d: var(--ink-3); border-color: var(--ink-3); filter: none; }
.tb-btn-white { --c: var(--card); --c-d: var(--line-2); --t: var(--ink); border: 2px solid var(--line-2); }
/* пошук — окремий стиль «search»: темна ink-кнопка з білим текстом (бурштин лишається за діями «Додати / Створити»,
   щоб на сторінці не було кількох однакових помаранчевих кнопок; див. DESIGN.md §2.1) */
.tb-filters .tb-btn-ink, .tb-filters button[type="submit"].tb-btn, .tb-search-form .tb-btn-ink, .tb-home-search-btn { --c: var(--ink); --c-d: var(--ink-shadow); --t: #fff; border: 0; text-shadow: none; }
.tb-filters .tb-btn-ink:hover, .tb-filters button[type="submit"].tb-btn:hover, .tb-search-form .tb-btn-ink:hover, .tb-home-search-btn:hover { --c: #37474f; --c-d: var(--ink-shadow); border: 0; filter: none; }
/* вхід / реєстрація — primary */
.tb-auth-submit.tb-btn-ink { --c: var(--go); --c-d: var(--go-d); --t: #fff; border: 0; text-shadow: 0 1px 0 rgba(0, 0, 0, .18); }
.tb-btn-go, .tb-btn-go:hover, .tb-btn-go:focus { color: #fff !important; }
.tb-btn-line, .tb-btn-ghost, .tb-btn-ink, .tb-btn-sky, .tb-btn-mint, .tb-btn-white { color: var(--ink) !important; }
.tb-btn-coral, .tb-btn-coral:hover, .tb-btn-ai, .tb-btn-ai:hover { color: #fff !important; }
/* кнопки пошуку (ink) і входу (amber) — білий текст (правило вище фарбувало аліас -ink у темний) */
.tb-filters .tb-btn-ink, .tb-filters button[type="submit"].tb-btn, .tb-search-form .tb-btn-ink, .tb-home-search-btn, .tb-auth-submit.tb-btn-ink { color: #fff !important; }
/* кнопки на темному тлі гри: «Далі / Завершити» у плашці відповіді, «Відповісти» на арені, прозорі на екрані проєктора —
   білий текст (правило вище фарбувало аліас -white у темний, і текст зливався з ink-тлом) */
.tb-feedback .tb-btn, .tb-arena .tb-btn-white { border: 0; }
.tb-feedback .tb-btn, .tb-feedback .tb-btn:hover, .tb-arena .tb-btn-white, .tb-arena .tb-btn-white:hover, .tb-stage .tb-btn-ghost, .tb-stage .tb-btn-ghost:hover { color: #fff !important; }
.tb-embedded a.tb-btn, .tb-embedded a.tb-btn:hover, .tb-embedded a.tb-btn:focus { text-decoration: none !important; }
/* вибрані стани */
.tb-chip-btn.is-on { background: var(--paper-2, #fff8e1); border-color: var(--go); color: var(--ink); box-shadow: 0 2px 0 var(--go-d, #cc8600); }
.tb-chip-btn.is-on small, .tb-chip-btn.is-on .lucide { color: var(--ink-2); }
.tb-cab a.tb-chip-btn.is-on, .tb-cab a.tb-chip-btn.is-on:hover { color: var(--ink); }
.tb-pager-page.is-on { background: var(--paper-2, #fff8e1); border-color: var(--go); color: var(--ink) !important; box-shadow: 0 2px 0 var(--go-d, #cc8600); }
.tb-seg button.is-on, .tb-seg button[aria-pressed="true"], .tb-cab .tb-seg a.tb-chip-btn.is-on, .tb-hw-tabs.nav-tabs > li.active > a, .tb-hw-tabs.nav-tabs > li.active > a:hover { background: var(--card); color: var(--ink) !important; box-shadow: 0 2px 0 var(--line-2); border-color: transparent; }
.tb-hw-tabs.nav-tabs > li > a:hover { background: rgba(255, 255, 255, .6); color: var(--ink); }
/* бічне меню: «Зареєструватись» — primary (білий текст), як усі головні дії */
.tb-embedded .personal-sidebar .btn.btn-default, .tb-embedded .personal-sidebar .btn.btn-default:hover, .tb-embedded .personal-sidebar .btn.btn-default:focus { color: #fff !important; text-shadow: 0 1px 0 rgba(0, 0, 0, .18); box-shadow: 0 4px 0 var(--go-d, #cc8600); }
.tb-embedded .personal-sidebar .btn.btn-default:hover { box-shadow: 0 5px 0 var(--go-d, #cc8600); }
/* розширені фільтри каталогів */
.tb-ext-filters { display: grid; gap: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
.tb-ext-filters .tb-chip-btn { min-height: 32px; font-size: 13px; text-decoration: none !important; }
.tb-tests .tb-tests-grid { grid-template-columns: minmax(0, 1fr) 320px; }

/* ===== Дизайн-система для класичних елементів форм/кнопок усередині сторінок нового дизайну =====
   Усі <input>/<select>/<textarea> (у т.ч. bootstrap .form-control) і bootstrap-кнопки (.btn-*) з класичних партіалів
   (форма відгуку, модалки тек, налаштування, DepDrop, Imperavi) отримують ті самі розміри, рамки, шрифт і кольори,
   що й .tb-input / .tb-btn. Без зміни розмітки — лише оформлення. */
.tb-embedded input[type="text"], .tb-embedded input[type="email"], .tb-embedded input[type="password"], .tb-embedded input[type="search"], .tb-embedded input[type="number"], .tb-embedded input[type="tel"], .tb-embedded input[type="url"], .tb-embedded input[type="date"],
.tb-embedded select, .tb-embedded textarea, .tb-embedded .form-control { min-height: 46px; height: auto; padding: 10px 14px; border: 2px solid var(--line); border-radius: 12px; background: var(--paper); box-shadow: none; font: 500 15px/1.3 var(--f-body); color: var(--ink); transition: border-color .12s, background .12s; }
.tb-embedded select, .tb-embedded select.form-control { padding-right: 36px; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2340596b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; }
.tb-embedded select[multiple] { background-image: none; }
.tb-embedded textarea, .tb-embedded textarea.form-control { min-height: 110px; line-height: 1.5; resize: vertical; }
.tb-embedded input:focus, .tb-embedded select:focus, .tb-embedded textarea:focus, .tb-embedded .form-control:focus { border-color: var(--sky); background: #fff; box-shadow: none; outline: none; }
.tb-embedded .has-error .form-control, .tb-embedded .has-error input { border-color: var(--coral); }
.tb-embedded .help-block, .tb-embedded .help-block-error { margin: 4px 2px 0; font-size: 12.5px; color: var(--coral-d, #c62828); }
.tb-embedded .help-block:empty { display: none; }
.tb-embedded .form-group { margin-bottom: 14px; }
.tb-embedded label.control-label, .tb-embedded .control-label { font: 700 13.5px/1.25 var(--f-body); color: var(--ink-2); margin-bottom: 6px; }
.tb-embedded .checkbox label, .tb-embedded .radio label { font: 500 14.5px/1.4 var(--f-body); color: var(--ink); }
.tb-embedded input[type="checkbox"], .tb-embedded input[type="radio"] { width: 18px; height: 18px; min-height: 0; padding: 0; accent-color: var(--go); margin-top: 2px; }
.tb-embedded .input-group .form-control:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.tb-embedded .input-group-addon, .tb-embedded .input-group-btn .btn { border-radius: 0 12px 12px 0; border: 2px solid var(--line); background: #fff; }
/* bootstrap-кнопки класичних партіалів → кнопки дизайн-системи */
.tb-embedded .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 18px; border: 2px solid var(--line-2); border-radius: 12px; background: #fff; color: var(--ink); font: 800 15px/1.1 var(--f-body); letter-spacing: .01em; text-transform: none; text-decoration: none; box-shadow: 0 4px 0 var(--line-2); transition: transform .08s, box-shadow .08s, filter .15s; }
.tb-embedded .btn:hover, .tb-embedded .btn:focus { color: var(--ink); background: #fff; border-color: var(--ink-3); box-shadow: 0 4px 0 var(--ink-3); text-decoration: none; outline: none; }
.tb-embedded .btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--line-2); }
.tb-embedded .btn-orange, .tb-embedded .btn-primary, .tb-embedded .btn-success, .tb-embedded .btn-info, .tb-embedded .btn-warning, .tb-embedded .sth-btn-shaped { border-color: transparent; background: var(--go); color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, .18); box-shadow: 0 4px 0 var(--go-d, #cc8600); }
.tb-embedded .btn-orange:hover, .tb-embedded .btn-primary:hover, .tb-embedded .btn-success:hover, .tb-embedded .btn-info:hover, .tb-embedded .btn-warning:hover, .tb-embedded .btn-orange:focus, .tb-embedded .btn-primary:focus, .tb-embedded .btn-success:focus, .tb-embedded .btn-info:focus { background: #ffbf3d; border-color: transparent; color: #fff; box-shadow: 0 4px 0 var(--go-d, #cc8600); }
.tb-embedded .btn-danger { border-color: transparent; background: var(--coral); color: #fff; box-shadow: 0 4px 0 var(--coral-d, #c4401a); }
.tb-embedded .btn-danger:hover, .tb-embedded .btn-danger:focus { background: var(--coral); color: #fff; filter: brightness(1.05); border-color: transparent; box-shadow: 0 4px 0 var(--coral-d, #c4401a); }
.tb-embedded .btn-link { border: 0; box-shadow: none; background: transparent; color: var(--ink-2); font-weight: 700; }
.tb-embedded .btn-sm, .tb-embedded .btn-xs { min-height: 34px; padding: 6px 12px; font-size: 13px; border-radius: 10px; box-shadow: 0 3px 0 var(--line-2); }
.tb-embedded .btn-orange.btn-sm, .tb-embedded .btn-primary.btn-sm, .tb-embedded .btn-orange.btn-xs { box-shadow: 0 3px 0 var(--go-d, #cc8600); }
.tb-embedded .btn-lg { min-height: 52px; padding: 14px 24px; font-size: 17px; }
.tb-embedded .btn-block { width: 100%; }
.tb-embedded .btn.disabled, .tb-embedded .btn[disabled] { opacity: .55; filter: grayscale(.4); cursor: not-allowed; transform: none; }
.tb-embedded .btn .fa { font-size: 15px; }
/* випадні списки bootstrap усередині сторінок бети */
.tb-embedded .dropdown-menu { padding: 8px; border: 2px solid var(--line); border-radius: 14px; box-shadow: 0 6px 0 var(--line), 0 16px 40px rgba(38, 50, 56, .14); font-family: var(--f-body); }
.tb-embedded .dropdown-menu > li > a { padding: 8px 12px; border-radius: 9px; color: var(--ink); font-weight: 600; }
.tb-embedded .dropdown-menu > li > a:hover { background: #fff8e1; color: var(--ink); }
/* kartik DepDrop / select2 / Imperavi — базове вирівнювання висоти й рамок */
.tb-embedded .select2-container--default .select2-selection--single { min-height: 46px; border: 2px solid var(--line); border-radius: 12px; background: var(--paper); font-family: var(--f-body); }
.tb-embedded .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 42px; color: var(--ink); padding-left: 14px; }
.tb-embedded .select2-container--default .select2-selection--single .select2-selection__arrow { height: 42px; }
.tb-embedded .redactor-box, .tb-embedded .redactor-editor { border: 2px solid var(--line) !important; border-radius: 12px; font-family: var(--f-body); }
/* сітка «центр + бічна колонка» без картки-шапки: центр починається з верху (інакше перший рядок сітки порожній) */
.tb-lib-grid:not(:has(> .tb-lib-head)) { grid-template-areas: "main top" "main bottom"; }
@media (max-width: 991px) { .tb-lib-grid:not(:has(> .tb-lib-head)) { grid-template-areas: "top" "main" "bottom"; } }
/* чипи типів матеріалів (клас .type/.active потрібен класичному JS updateType) — вигляд як у звичайних чипів */
.tb-embedded .tb-chip-btn.type, .tb-embedded .tb-chip-btn.type.active, .tb-embedded .tb-chip-btn.type:hover { float: none !important; margin: 0 !important; padding: 0 12px !important; min-height: 36px; width: auto !important; font: 600 14px/1 var(--f-body) !important; color: var(--ink) !important; text-transform: none !important; box-shadow: none; }
.tb-embedded .tb-chip-btn.type.active { background: var(--paper-2, #fff8e1) !important; border-color: var(--go) !important; box-shadow: 0 2px 0 var(--go-d, #cc8600); }
/* поле вибору файлу — зона завантаження в стилі системи */
.tb-embedded input[type="file"] { display: block; width: 100%; min-height: 0; padding: 14px; border: 2px dashed var(--line-2); border-radius: 12px; background: var(--paper); font: 500 14px/1.3 var(--f-body); color: var(--ink-2); cursor: pointer; }
.tb-embedded input[type="file"]::file-selector-button { margin-right: 12px; padding: 8px 14px; border: 0; border-radius: 10px; background: var(--go); color: #fff; font: 800 13px/1.1 var(--f-body); text-shadow: 0 1px 0 rgba(0, 0, 0, .18); cursor: pointer; }
.tb-embedded input[type="file"]:hover { border-color: var(--go); }
/* пошук: місце під іконку (глобальні правила полів не мають його перекривати) */
.tb-embedded .tb-search input, .tb-embedded .tb-search .form-control { padding-left: 40px !important; padding-right: 40px !important; min-height: 44px; }
/* сітка без картки-шапки на телефоні: спочатку зміст, бічна колонка (промо, довідка) — після нього */
@media (max-width: 991px) { .tb-lib-grid:not(:has(> .tb-lib-head)) { grid-template-areas: "main" "top" "bottom"; } }

/* ===== Сутність «картка» (tb-card) і нативні промо підвищення кваліфікації ===== */
.tb-card { display: block; padding: 16px 18px; border-radius: 18px; background: #fff; border: 2px solid var(--line); box-shadow: 0 4px 0 var(--line); color: var(--ink); min-width: 0; }
a.tb-card { text-decoration: none !important; color: var(--ink) !important; transition: transform .12s, box-shadow .12s, border-color .15s; }
a.tb-card:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--line); border-color: var(--line-2); }
.tb-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.tb-card-head-text { display: grid; gap: 2px; min-width: 0; }
.tb-card-head-text b { font: 800 16px/1.2 var(--f-display); color: var(--ink); }
.tb-card-head-text small { font-size: 13px; line-height: 1.3; color: var(--ink-3); }
.tb-card-foot { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.tb-ico { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 11px; background: var(--paper); color: var(--ink-2); }
.tb-ico svg { width: 20px; height: 20px; }
.tb-ico-go { background: var(--go); color: #fff; box-shadow: 0 3px 0 var(--go-d); }
.tb-ico-ink { background: var(--ink); color: var(--go); box-shadow: 0 3px 0 var(--ink-shadow); }
.tb-ico-sky { background: #e3f2fd; color: var(--sky); }
.tb-ico-mint { background: #e8f5e9; color: var(--mint); }
.tb-promo-ev-list { display: grid; gap: 8px; }
.tb-promo-ev-item { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 10px; padding: 8px; border-radius: 14px; border: 2px solid var(--line); background: #fff; color: var(--ink) !important; text-decoration: none !important; transition: border-color .15s, background .15s; }
.tb-promo-ev-item:hover { border-color: var(--go); background: #fff8e1; }
.tb-promo-ev-item:not(:has(.tb-promo-ev-img)) { grid-template-columns: minmax(0, 1fr); }
.tb-promo-ev-img { display: block; aspect-ratio: 4 / 3; border-radius: 10px; background: var(--paper) center / cover no-repeat; }
.tb-promo-ev-body { display: grid; gap: 4px; align-content: start; min-width: 0; }
.tb-promo-ev-body .tb-chips { gap: 4px; }
.tb-promo-ev-body .tb-chip { font-size: 11px; padding: 2px 7px; }
.tb-promo-ev-title { font: 700 14px/1.3 var(--f-body); color: var(--ink); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tb-promo-ev-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; line-height: 1.3; color: var(--ink-3); }
.tb-promo-ev-meta svg { width: 13px; height: 13px; vertical-align: -2px; color: var(--go-d); }
.tb-promo-ev-lectors { font-size: 12px; line-height: 1.3; color: var(--ink-2); }
.tb-promo-strip { display: grid; grid-template-columns: 200px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 12px; margin: 0 0 16px; }
.tb-promo-strip.margbottom { margin-bottom: 20px; }
.tb-promo-strip-img { display: block; aspect-ratio: 16 / 9; border-radius: 12px; background: var(--paper) center / cover no-repeat; }
.tb-promo-strip-body { display: grid; gap: 6px; min-width: 0; }
.tb-promo-strip-title { font: 800 16px/1.3 var(--f-display); color: var(--ink); }
.tb-promo-strip-cta { white-space: nowrap; }
@media (max-width: 640px) {
    .tb-promo-strip { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .tb-promo-strip-img { max-height: 160px; }
    .tb-promo-strip-cta { width: 100%; }
}

/* ===== Сутність «випадне меню» (tb-dd): кнопка зі значенням + список пунктів. Стани: hover, open (is-open), обраний пункт (is-on), disabled ===== */
.tb-dd { position: relative; display: inline-block; }
.tb-dd-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 10px 6px 12px; border: 2px solid var(--line-2); border-radius: 12px; background: #fff; color: var(--ink); font: 700 14px/1.2 var(--f-body); cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s; white-space: nowrap; max-width: 100%; }
.tb-dd-btn:hover { border-color: var(--ink); }
.tb-dd-btn:focus-visible { outline: none; border-color: var(--sky); box-shadow: 0 0 0 4px rgba(41, 121, 255, .18); }
.tb-dd-btn.is-on { border-color: var(--go); background: #fff8e1; }
.tb-dd.is-open .tb-dd-btn { border-color: var(--ink); background: var(--paper); }
.tb-dd-btn[disabled] { opacity: .5; cursor: default; }
.tb-dd-label { color: var(--ink-3); font-weight: 600; }
.tb-dd-label::after { content: ':'; }
.tb-dd-value { overflow: hidden; text-overflow: ellipsis; }
.tb-dd-btn > svg { width: 16px; height: 16px; flex: none; color: var(--ink-3); transition: transform .15s; }
.tb-dd.is-open .tb-dd-btn > svg { transform: rotate(180deg); }
.tb-dd-menu { position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; min-width: 100%; display: none; padding: 6px; border-radius: 14px; background: #fff; border: 2px solid var(--line); box-shadow: 0 6px 0 var(--line), 0 18px 40px rgba(38, 50, 56, .14); }
.tb-dd.is-open .tb-dd-menu { display: grid; gap: 2px; animation: tb-dd-in .12s ease-out; }
.tb-dd-menu.is-right { left: auto; right: 0; }
@keyframes tb-dd-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.tb-dd-item { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 36px; padding: 7px 30px 7px 12px; border: 0; border-radius: 9px; background: transparent; color: var(--ink); font: 600 14px/1.2 var(--f-body); text-align: left; cursor: pointer; white-space: nowrap; text-decoration: none; }
.tb-dd-item:hover, .tb-dd-item:focus-visible { background: #fff8e1; outline: none; }
.tb-dd-item.is-on { background: #fff8e1; font-weight: 800; position: relative; }
.tb-dd-item.is-on::after { content: ''; position: absolute; right: 10px; top: 50%; width: 8px; height: 8px; border-radius: 50%; background: var(--go); transform: translateY(-50%); }
.tb-dd-item.is-danger { color: var(--coral); }
.tb-dd-item[disabled] { opacity: .5; cursor: default; }
.tb-dd-sep { height: 1px; margin: 4px 2px; background: var(--line); }
/* класичні bootstrap-меню всередині сторінок нового дизайну — ті самі стани */
.tb-embedded .dropdown-menu, body.tb-chrome .tb-page .dropdown-menu { padding: 6px; border: 2px solid var(--line); border-radius: 14px; box-shadow: 0 6px 0 var(--line), 0 18px 40px rgba(38, 50, 56, .14); font-family: var(--f-body); }
.tb-embedded .dropdown-menu > li > a, body.tb-chrome .tb-page .dropdown-menu > li > a { min-height: 36px; padding: 7px 12px; border-radius: 9px; color: var(--ink); font-weight: 600; }
.tb-embedded .dropdown-menu > li > a:hover, .tb-embedded .dropdown-menu > li > a:focus, body.tb-chrome .tb-page .dropdown-menu > li > a:hover { background: #fff8e1; color: var(--ink); }
.tb-embedded .dropdown-menu > .active > a, .tb-embedded .dropdown-menu > .active > a:hover { background: #fff8e1; color: var(--ink); font-weight: 800; }
.tb-embedded .dropdown-menu > .divider { margin: 4px 2px; background: var(--line); }
/* ===== Розширені фільтри каталогу: згорнуті за замовчуванням ===== */
.tb-ext-filters { display: grid; gap: 10px; }
.tb-ext-toggle { display: inline-flex; align-items: center; gap: 8px; justify-self: start; min-height: 38px; padding: 6px 12px; border: 2px solid transparent; border-radius: 12px; background: transparent; color: var(--ink-2); font: 700 14px/1.2 var(--f-body); cursor: pointer; transition: background .15s, color .15s; }
.tb-ext-toggle:hover { background: var(--paper); color: var(--ink); }
.tb-ext-toggle > svg { width: 18px; height: 18px; flex: none; }
.tb-ext-toggle .tb-ext-chevron { width: 16px; height: 16px; color: var(--ink-3); transition: transform .15s; }
.tb-ext-filters.is-open .tb-ext-toggle { color: var(--ink); }
.tb-ext-filters.is-open .tb-ext-chevron { transform: rotate(180deg); }
.tb-ext-panel { padding-top: 10px; border-top: 1px dashed var(--line); }
.tb-ext-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tb-badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--paper); color: var(--ink-2); font: 800 11px/1 var(--f-display); }
.tb-badge-go { background: var(--go); color: #fff; }
.tb-badge-ink { background: var(--ink); color: #fff; }
.tb-badge-coral { background: var(--coral); color: #fff; }
@media (max-width: 640px) { .tb-ext-row .tb-dd, .tb-ext-row .tb-dd-btn { width: 100%; } .tb-dd-menu { right: 0; } }
/* промо бота (тема library/_bot_promo) */
.tb-bot-promo-img { display: block; margin-bottom: 10px; border-radius: 12px; overflow: hidden; border: 2px solid var(--line); }
.tb-bot-promo-img img { display: block; width: 100%; height: auto; }
.tb-bot-promo-name { margin: 0; font: 700 14px/1.35 var(--f-body); color: var(--ink); }
.tb-bot-promo-btn img { width: 18px; height: 18px; }

/* ===== DESIGN SYSTEM — states (see DESIGN.md) =====
   Єдині стани для всіх сутностей дизайн-системи: hover / active / focus-visible / disabled / selected / loading /
   error / empty — і ті самі стани для класичних елементів (bootstrap) усередині .tb-embedded та body.tb-chrome.
   Специфічність навмисно низька (один клас або нащадок .tb-embedded): правила сторінок і тем (theme/*.css і
   bootstrap.css вантажаться ПІСЛЯ beta.css) перекривають її. !important — лише там, де його вже використовують
   класичні bootstrap-правила або наші власні (колір .tb-btn-go). Розділ append-only: нові правила — лише нижче. */

/* --- 1. токени відступів і фокусу --- */
:root {
    --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px;
    --focus: var(--sky);
    --ring: 0 0 0 4px rgba(41, 121, 255, .18);
    --ring-err: 0 0 0 4px rgba(255, 87, 34, .16);
}
body.tb-chrome { --ring: 0 0 0 4px rgba(66, 165, 245, .22); --ring-err: 0 0 0 4px rgba(239, 83, 80, .18); }
.tb [hidden], .tb-embedded [hidden], body.tb-chrome [hidden] { display: none !important; }

/* --- 2. hover: контур вторинних контролів темнішає до --ink-3 (як у .tb-btn-line), картки — підіймаються --- */
.tb-chip-btn:hover, .tb-pager-page:hover, .tb-dd-btn:hover, .tb-toggle-chip:hover, .tb-lib-filetabs li a:hover,
.tb-input:hover, .tb-select:hover, .tb-textarea:hover, .tb-search input:hover,
.tb-embedded input[type="text"]:hover, .tb-embedded input[type="email"]:hover, .tb-embedded input[type="password"]:hover, .tb-embedded input[type="search"]:hover,
.tb-embedded input[type="number"]:hover, .tb-embedded input[type="tel"]:hover, .tb-embedded input[type="url"]:hover, .tb-embedded input[type="date"]:hover,
.tb-embedded select:hover, .tb-embedded textarea:hover, .tb-embedded .form-control:hover,
.tb-embedded .select2-container--default .select2-selection--single:hover, .tb-embedded .select2-container--default .select2-selection--multiple:hover,
.tb-embedded .pagination > li > a:hover, body.tb-chrome .tb-page .pagination > li > a:hover { border-color: var(--ink-3); }
.tb-chip-btn:active, .tb-pager-page:active, .tb-dd-btn:active, .tb-toggle-chip:active, .tb-ext-toggle:active, .tb-seg > button:active, .tb-seg > a:active,
.tb-embedded .pagination > li > a:active, .tb-embedded .nav-tabs > li > a:active { transform: translateY(1px); }
.tb-x:active, .tb-search-clear:active, .tb-img-x:active { transform: scale(.94); }
a.tb-chip:hover, button.tb-chip:hover { filter: brightness(.95); }
.tb-active-filters .tb-chip:hover { background: var(--paper-2, #fff8e1); color: var(--ink); }
a.tb-card:active, .tb-mode:active, .tb-hw-card:active, .tb-tcard:active, .tb-lib-item:active { transform: translateY(0); box-shadow: 0 2px 0 var(--line); }
.tb-promo-ev-item:active, .tb-lib-rel:active, .tb-ai-tool:active { background: var(--paper-2, #fff8e1); }
.tb-crumbs a:hover, .tb-tcard-title a:hover, .tb-lib-title a:hover, .tb-doc-name a:hover, .tb-lib-author a:hover { color: var(--orange-d, #e65100); }
.tb-toggle:hover .tb-toggle-track { background: rgba(38, 50, 56, .3); }
.tb-embedded .open > .btn, .tb-embedded .open > .btn.dropdown-toggle { background: var(--paper); border-color: var(--ink); color: var(--ink); box-shadow: 0 4px 0 var(--ink-3); }
.tb-embedded .open > .btn-primary, .tb-embedded .open > .btn-orange, .tb-embedded .open > .btn-primary.dropdown-toggle, .tb-embedded .open > .btn-orange.dropdown-toggle { background: #ffbf3d; border-color: transparent; color: #fff; box-shadow: 0 4px 0 var(--go-d, #cc8600); }
.tb-embedded .dropdown-menu > li > a:active, body.tb-chrome .dropdown-menu > li > a:active, .tb-dd-item:active { background: rgba(255, 171, 0, .25); }

/* --- 3. focus-visible: кільце --sky; на кліку мишкою кільця немає --- */
.tb-btn:focus, .tb-chip-btn:focus, .tb-pager-page:focus, .tb-seg > button:focus, .tb-seg > a:focus, .tb-ext-toggle:focus, .tb-x:focus, .tb-search-clear:focus, .tb-img-x:focus,
.tb-toggle-chip input:focus, .tb-lobby-game input:focus, .tb-embedded .btn:focus, body.tb-chrome .btn:focus, .tb-embedded .nav-tabs > li > a:focus, .tb-embedded .pagination > li > a:focus,
.tb-embedded .dropdown-menu > li > a:focus, body.tb-chrome .dropdown-menu > li > a:focus, body.tb-chrome .modal .close:focus { outline: none; }
.tb-btn:focus-visible, .tb-mode:focus-visible, a.tb-card:focus-visible, .tb-hw-card:focus-visible, .tb-promo-ev-item:focus-visible, .tb-single-links a:focus-visible,
.tb-game-band-btn:focus-visible, .tb-lobby-game:has(input:focus-visible), .tb-promo-strip-cta:focus-visible,
.tb-embedded .btn:focus-visible, .tb-embedded a.tb-btn:focus-visible, .tb-embedded a.tb-mode:focus-visible, body.tb-chrome .btn:focus-visible,
.tb-embedded input[type="file"]:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }
.tb-chip-btn:focus-visible, a.tb-chip:focus-visible, button.tb-chip:focus-visible, .tb-pager-page:focus-visible, .tb-seg > button:focus-visible, .tb-seg > a:focus-visible,
.tb-ext-toggle:focus-visible, .tb-x:focus-visible, .tb-search-clear:focus-visible, .tb-img-x:focus-visible, .tb-toggle-chip:has(input:focus-visible),
.tb-crumbs a:focus-visible, .tb-tcard-title a:focus-visible, .tb-lib-title a:focus-visible, .tb-lib-filetabs li a:focus-visible, .tb-lib-rel:focus-visible, .tb-ai-tool:focus-visible,
.tb-award-preview:focus-visible, .tb-code:focus-visible, .tb-timeline button:focus-visible,
.tb-embedded .nav-tabs > li > a:focus-visible, .tb-embedded .pagination > li > a:focus-visible, body.tb-chrome .tb-page .pagination > li > a:focus-visible,
.tb-embedded input[type="checkbox"]:focus-visible, .tb-embedded input[type="radio"]:focus-visible, body.tb-chrome input[type="checkbox"]:focus-visible, body.tb-chrome input[type="radio"]:focus-visible,
body.tb-chrome .modal .close:focus-visible, .tb-embedded .alert .close:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }
.tb-crumbs a:focus-visible, .tb-tcard-title a:focus-visible, .tb-lib-title a:focus-visible { border-radius: 4px; }
.tb-toggle-chip input:focus-visible, .tb-lobby-game input:focus-visible { outline: none; }
.tb-dd-item:focus-visible, .tb-embedded .dropdown-menu > li > a:focus-visible, body.tb-chrome .dropdown-menu > li > a:focus-visible,
.tb-embedded .personal-sidebar ul li a:focus-visible, .tb-ai-menu-list > a:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--sky); }
/* поля: фокус = рамка --sky + м’яке кільце (після hover, щоб фокус переважав) */
.tb-input:focus, .tb-select:focus, .tb-textarea:focus, .tb-search input:focus, .tb-dd-btn:focus-visible, .tb-dd.is-open .tb-dd-btn:focus-visible,
.tb-input:focus-visible, .tb-select:focus-visible, .tb-textarea:focus-visible, .tb-search input:focus-visible,
.tb-embedded input[type="text"]:focus, .tb-embedded input[type="email"]:focus, .tb-embedded input[type="password"]:focus, .tb-embedded input[type="search"]:focus,
.tb-embedded input[type="number"]:focus, .tb-embedded input[type="tel"]:focus, .tb-embedded input[type="url"]:focus, .tb-embedded input[type="date"]:focus,
.tb-embedded select:focus, .tb-embedded textarea:focus, .tb-embedded .form-control:focus, body.tb-chrome .form-control:focus,
.tb-embedded .select2-container--default.select2-container--focus .select2-selection--single, .tb-embedded .select2-container--default.select2-container--open .select2-selection--single,
.tb-embedded .select2-container--default.select2-container--focus .select2-selection--multiple, .tb-embedded .select2-container--default.select2-container--open .select2-selection--multiple,
.tb-embedded .redactor-box:focus-within, .tb-embedded .redactor-editor:focus { outline: none; border-color: var(--sky); box-shadow: var(--ring); }
.tb-search input:focus, .tb-embedded .form-control:focus, body.tb-chrome .form-control:focus { background: #fff; }
.tb-toggle input:focus-visible + .tb-toggle-track { outline: 3px solid var(--sky); outline-offset: 2px; }

/* --- 4. selected (is-on / .active / aria-checked / aria-pressed / aria-current): бурштинова підкладка + рамка --go --- */
.tb-chip-btn.is-on, .tb-chip-btn.is-on:hover, .tb-chip-btn.active, .tb-chip-btn.active:hover, .tb-chip-btn[aria-pressed="true"], .tb-chip-btn[aria-checked="true"],
.tb-pager-page.is-on, .tb-pager-page.is-on:hover, .tb-pager-page[aria-current="page"], .tb-pager-page[aria-current="page"]:hover,
.tb-dd-btn.is-on, .tb-dd-btn.is-on:hover, .tb-dd-btn[aria-pressed="true"],
.tb-toggle-chip.is-on, .tb-toggle-chip.is-on:hover, .tb-toggle-chip:has(input:checked), .tb-toggle-chip:has(input:checked):hover,
.tb-lib-filetabs li.active a, .tb-lib-filetabs li.active a:hover,
.tb-btn-line.is-on, .tb-btn-line.is-on:hover, .tb-btn-line[aria-pressed="true"], .tb-btn-white.is-on, .tb-btn-white[aria-pressed="true"],
.tb-embedded .pagination > .active > a, .tb-embedded .pagination > .active > a:hover, .tb-embedded .pagination > .active > a:focus, .tb-embedded .pagination > .active > span,
body.tb-chrome .tb-page .pagination > .active > a, body.tb-chrome .tb-page .pagination > .active > a:hover, body.tb-chrome .tb-page .pagination > .active > span,
.tb-embedded .btn.active, .tb-embedded .btn[aria-pressed="true"], .tb-embedded .btn-group > .btn.active { background: var(--paper-2, #fff8e1); border-color: var(--go); color: var(--ink); box-shadow: 0 2px 0 var(--go-d, #cc8600); --c-d: var(--go-d, #cc8600); }
.tb-chip-btn.is-on small, .tb-chip-btn.is-on .lucide, .tb-chip-btn.active small, .tb-chip-btn[aria-pressed="true"] small { color: var(--ink-2); }
.tb-dd-item.is-on, .tb-dd-item[aria-checked="true"], .tb-dd-item[aria-selected="true"], .tb-embedded .dropdown-menu > .active > a, .tb-embedded .dropdown-menu > .active > a:hover, .tb-embedded .dropdown-menu > .active > a:focus,
body.tb-chrome .dropdown-menu > .active > a, body.tb-chrome .dropdown-menu > .active > a:hover { background: var(--paper-2, #fff8e1); color: var(--ink); font-weight: 800; }
.tb-dd-item[aria-checked="true"], .tb-dd-item[aria-selected="true"] { position: relative; }
.tb-dd-item[aria-checked="true"]::after, .tb-dd-item[aria-selected="true"]::after { content: ''; position: absolute; right: 10px; top: 50%; width: 8px; height: 8px; border-radius: 50%; background: var(--go); transform: translateY(-50%); }
/* вкладки/сегменти: вибрана — біла картка з тінню */
.tb-seg > .is-on, .tb-seg > [aria-selected="true"], .tb-seg > [aria-pressed="true"], .tb-seg > [aria-current="page"],
.tb-embedded .nav-tabs > li.active > a, .tb-embedded .nav-tabs > li.active > a:hover, .tb-embedded .nav-tabs > li.active > a:focus, .tb-embedded .nav-tabs > li > a[aria-selected="true"] { background: var(--card); color: var(--ink); font-weight: 800; box-shadow: 0 2px 0 var(--line-2); border-color: transparent; }
/* рядки списків/таблиць */
.tb-table tr.is-selected > td, .tb-table tr[aria-selected="true"] > td, .tb-embedded .table > tbody > tr.is-selected > td, .tb-embedded .table > tbody > tr.active > td, .tb-embedded .table > tbody > tr[aria-selected="true"] > td { background: var(--paper-2, #fff8e1); }
.tb-lib-item.is-selected, .tb-tcard.is-selected, .tb-card.is-selected, .tb-lib-card.is-selected, .tb-hw-card.is-selected, .tb-mode.is-on, .tb-mode[aria-current="page"] { border-color: var(--go); box-shadow: 0 4px 0 var(--go-d, #cc8600); }
.tb-embedded .personal-sidebar ul li a[aria-current="page"] { background: var(--paper-2, #fff8e1); color: var(--ink); font-weight: 800; }
.tb-embedded .personal-sidebar ul li a[aria-current="page"]::before { height: 70%; }
.tb-crumbs [aria-current="page"], .tb-crumbs > span:not([itemprop]):last-child { color: var(--ink); font-weight: 700; }
.tb-chip.is-on { background: var(--go); color: #fff; }

/* --- 5. error / invalid: рамка --coral, підпис --coral-d --- */
.tb-help, .tb-field-help, .tb-embedded .hint-block { display: block; margin: 6px 0 0; font-size: 13px; line-height: 1.4; font-weight: 600; color: var(--ink-3); }
.tb-field-error, .tb-help.is-error, .has-error .tb-help, .has-error .tb-field-help, .tb-acc-error:not(:empty), .tb-embedded .has-error .help-block, .tb-embedded .has-error .hint-block,
.tb-embedded .help-block-error, body.tb-chrome .has-error .help-block, .tb-field.is-error .tb-help { display: block; margin: 6px 0 0; font-size: 13px; line-height: 1.4; font-weight: 600; color: var(--coral-d, #c4401a); }
.tb-help:empty, .tb-field-help:empty, .tb-field-error:empty, .tb-embedded .hint-block:empty { display: none; }
.has-error .tb-label, .tb-field.is-error .tb-label, .tb-embedded .has-error .control-label, .tb-embedded .has-error label.control-label, body.tb-chrome .has-error .control-label { color: var(--coral-d, #c4401a); }
.tb-input.is-error, .tb-select.is-error, .tb-textarea.is-error, .tb-input[aria-invalid="true"], .tb-select[aria-invalid="true"], .tb-textarea[aria-invalid="true"],
.has-error .tb-input, .has-error .tb-select, .has-error .tb-textarea, .tb-field.is-error .tb-input, .tb-field.is-error .tb-select, .tb-field.is-error .tb-textarea,
.tb-search.is-error input, .tb-search input[aria-invalid="true"], .tb-dd-btn.is-error, .tb-dd-btn[aria-invalid="true"], .tb-toggle-chip.is-error, .tb-big-input.is-error,
.tb-embedded .has-error .form-control, .tb-embedded .has-error input, .tb-embedded .has-error select, .tb-embedded .has-error textarea, .tb-embedded .form-control[aria-invalid="true"],
.tb-embedded .has-error .select2-container--default .select2-selection--single, .tb-embedded .has-error .select2-container--default .select2-selection--multiple, .tb-embedded .has-error .redactor-box,
body.tb-chrome .has-error .form-control, body.tb-chrome .form-control[aria-invalid="true"] { border-color: var(--coral); box-shadow: none; }
.tb-input.is-error:focus, .tb-select.is-error:focus, .tb-textarea.is-error:focus, .tb-input[aria-invalid="true"]:focus, .has-error .tb-input:focus, .has-error .tb-select:focus, .has-error .tb-textarea:focus,
.tb-field.is-error .tb-input:focus, .tb-search.is-error input:focus, .tb-embedded .has-error .form-control:focus, .tb-embedded .has-error input:focus, .tb-embedded .has-error select:focus, .tb-embedded .has-error textarea:focus,
.tb-embedded .form-control[aria-invalid="true"]:focus, body.tb-chrome .has-error .form-control:focus { border-color: var(--coral); box-shadow: var(--ring-err); }
.has-error input[type="checkbox"], .has-error input[type="radio"], .tb-embedded .has-error input[type="checkbox"], .tb-embedded .has-error input[type="radio"] { outline: 2px solid var(--coral); outline-offset: 1px; border-radius: 4px; }
.tb-embedded .has-error .checkbox label, .tb-embedded .has-error .radio label, .tb-embedded .has-error .checkbox, .tb-embedded .has-error .radio { color: var(--ink); }
.tb-chip-btn.is-error, .tb-btn.is-error { border-color: var(--coral); }
.tb-input[readonly], .tb-textarea[readonly], .tb-embedded .form-control[readonly], body.tb-chrome .form-control[readonly] { background: var(--paper); color: var(--ink-2); }

/* --- 6. disabled ([disabled] / .disabled / .is-disabled / [aria-disabled=true]): opacity .55, курсор звичайний, без підйому на hover --- */
.tb-btn[disabled], .tb-btn.disabled, .tb-btn.is-disabled, .tb-btn[aria-disabled="true"],
.tb-chip-btn[disabled], .tb-chip-btn.disabled, .tb-chip-btn.is-disabled, .tb-chip-btn[aria-disabled="true"], .tb-chip.is-disabled, .tb-chip[aria-disabled="true"],
.tb-pager-page.is-disabled, .tb-pager-page[aria-disabled="true"], .tb-dd-btn[disabled], .tb-dd-btn.is-disabled, .tb-dd-btn[aria-disabled="true"], .tb-dd-item[disabled], .tb-dd-item.is-disabled, .tb-dd-item[aria-disabled="true"],
.tb-toggle-chip.is-disabled, .tb-toggle-chip:has(input:disabled), .tb-toggle.is-disabled, .tb-toggle:has(input:disabled), .tb-seg > [disabled], .tb-seg > .is-disabled, .tb-seg > [aria-disabled="true"],
.tb-ext-toggle[disabled], .tb-x[disabled], .tb-search-clear[disabled], .tb-mode.is-disabled, .tb-mode[aria-disabled="true"], .tb-mode.disabled, a.tb-card.is-disabled, .tb-hw-card.is-disabled, .tb-lib-filetabs li.disabled a,
.tb-input[disabled], .tb-select[disabled], .tb-textarea[disabled], .tb-search input[disabled], .tb-field.is-disabled, .tb-single-tools .is-disabled, .tb-cert .tb-btn.is-disabled,
.tb-embedded .btn[disabled], .tb-embedded .btn.disabled, .tb-embedded .btn[aria-disabled="true"], .tb-embedded fieldset[disabled] .btn, body.tb-chrome .btn[disabled], body.tb-chrome .btn.disabled, body.tb-chrome .btn[aria-disabled="true"],
.tb-embedded .form-control[disabled], .tb-embedded fieldset[disabled] .form-control, .tb-embedded select[disabled], .tb-embedded textarea[disabled], .tb-embedded input[disabled], body.tb-chrome .form-control[disabled],
.tb-embedded .checkbox.disabled label, .tb-embedded .radio.disabled label, .tb-embedded fieldset[disabled] .checkbox label, .tb-embedded fieldset[disabled] .radio label,
.tb-embedded .pagination > .disabled > a, .tb-embedded .pagination > .disabled > span, body.tb-chrome .tb-page .pagination > .disabled > a, body.tb-chrome .tb-page .pagination > .disabled > span,
.tb-embedded .nav-tabs > .disabled > a, .tb-embedded .dropdown-menu > .disabled > a, body.tb-chrome .dropdown-menu > .disabled > a,
.tb-embedded .select2-container--disabled .select2-selection--single, .tb-embedded .select2-container--disabled .select2-selection--multiple { opacity: .55; cursor: default; filter: grayscale(.3); transform: none; }
/* на hover/active disabled не підіймається і не міняє колір */
.tb-btn[disabled]:hover, .tb-btn.disabled:hover, .tb-btn.is-disabled:hover, .tb-btn[aria-disabled="true"]:hover, .tb-btn[disabled]:active, .tb-btn.is-disabled:active,
.tb-chip-btn[disabled]:hover, .tb-chip-btn.is-disabled:hover, .tb-chip-btn[aria-disabled="true"]:hover, .tb-dd-btn[disabled]:hover, .tb-dd-btn.is-disabled:hover, .tb-pager-page.is-disabled:hover,
.tb-toggle-chip.is-disabled:hover, .tb-mode.is-disabled:hover, .tb-mode[aria-disabled="true"]:hover, a.tb-card.is-disabled:hover, .tb-hw-card.is-disabled:hover,
.tb-embedded .btn[disabled]:hover, .tb-embedded .btn.disabled:hover, .tb-embedded .btn[aria-disabled="true"]:hover, body.tb-chrome .btn[disabled]:hover, body.tb-chrome .btn.disabled:hover,
.tb-embedded .pagination > .disabled > a:hover, .tb-embedded .nav-tabs > .disabled > a:hover, .tb-embedded .dropdown-menu > .disabled > a:hover { transform: none; filter: grayscale(.3); }
.tb-btn[disabled]:hover, .tb-btn.disabled:hover, .tb-btn.is-disabled:hover, .tb-btn[aria-disabled="true"]:hover, .tb-btn[disabled]:active, .tb-btn.is-disabled:active { background: var(--c); box-shadow: 0 var(--press) 0 var(--c-d); }
.tb-btn-go[disabled]:hover, .tb-btn-go.is-disabled:hover, .tb-btn-go[aria-disabled="true"]:hover { --c: var(--go); }
.tb-filters .tb-btn-ink[disabled]:hover, .tb-home-search-btn[disabled]:hover { --c: var(--ink); }
.tb-btn-ghost[disabled]:hover, .tb-btn-ghost.is-disabled:hover, .tb-btn-ghost[aria-disabled="true"]:hover { background: transparent; }
.tb-btn-line[disabled]:hover, .tb-btn-line.is-disabled:hover, .tb-btn-white[disabled]:hover, .tb-btn-ink[disabled]:hover, .tb-btn-sky[disabled]:hover, .tb-btn-mint[disabled]:hover { --c-d: var(--line-2); border-color: var(--line-2); }
.tb-btn-ai[disabled], .tb-btn-ai.is-disabled, .tb-btn-ai[aria-disabled="true"] { animation: none; }
.tb-chip-btn[disabled]:hover, .tb-chip-btn.is-disabled:hover, .tb-chip-btn[aria-disabled="true"]:hover, .tb-dd-btn[disabled]:hover, .tb-dd-btn.is-disabled:hover, .tb-pager-page.is-disabled:hover, .tb-toggle-chip.is-disabled:hover,
.tb-input[disabled]:hover, .tb-select[disabled]:hover, .tb-textarea[disabled]:hover, .tb-embedded .form-control[disabled]:hover, .tb-embedded .pagination > .disabled > a:hover { border-color: var(--line); }
.tb-embedded .btn[disabled]:hover, .tb-embedded .btn.disabled:hover, body.tb-chrome .btn[disabled]:hover, body.tb-chrome .btn.disabled:hover { border-color: var(--line-2); box-shadow: 0 4px 0 var(--line-2); background: #fff; color: var(--ink); }
.tb-embedded .btn-primary[disabled]:hover, .tb-embedded .btn-primary.disabled:hover, .tb-embedded .btn-orange[disabled]:hover, .tb-embedded .btn-orange.disabled:hover, .tb-embedded .btn-success[disabled]:hover, .tb-embedded .btn-info[disabled]:hover, .tb-embedded .btn-warning[disabled]:hover,
body.tb-chrome .tb-page .btn-primary[disabled]:hover, body.tb-chrome .tb-page .btn-primary.disabled:hover, body.tb-chrome .btn-orange[disabled]:hover, body.tb-chrome .btn-orange.disabled:hover { background: var(--go); border-color: transparent; color: #fff; box-shadow: 0 4px 0 var(--go-d, #cc8600); }
.tb-embedded .btn-danger[disabled]:hover, .tb-embedded .btn-danger.disabled:hover { background: var(--coral); border-color: transparent; color: #fff; box-shadow: 0 4px 0 var(--coral-d, #c4401a); }
.tb-embedded .btn-link[disabled]:hover, .tb-embedded .btn-link.disabled:hover { background: transparent; box-shadow: none; border-color: transparent; }
.tb-embedded .nav-tabs > .disabled > a:hover { background: transparent; color: var(--ink-2); }
.tb-mode.is-disabled:hover, .tb-mode[aria-disabled="true"]:hover, a.tb-card.is-disabled:hover, .tb-hw-card.is-disabled:hover { border-color: var(--line); box-shadow: 0 4px 0 var(--line); }
.tb-toggle input:disabled + .tb-toggle-track { opacity: .55; }
.tb-toggle:hover input:disabled + .tb-toggle-track { background: var(--line-2); }
.tb-toggle:hover input:disabled:checked + .tb-toggle-track { background: var(--mint); }
/* посилання-кнопки з класом disabled не ведуть нікуди (як a.btn.disabled у bootstrap) */
a.tb-btn.is-disabled, a.tb-btn.disabled, a.tb-btn[aria-disabled="true"], a.tb-mode.is-disabled, a.tb-mode[aria-disabled="true"], a.tb-card.is-disabled, a.tb-chip-btn.is-disabled, a.tb-chip-btn[aria-disabled="true"], a.tb-pager-page.is-disabled, a.tb-pager-page[aria-disabled="true"],
.tb-embedded a.btn.disabled, .tb-embedded a.btn[aria-disabled="true"], .tb-embedded .pagination > .disabled > a, .tb-embedded .nav-tabs > .disabled > a, .tb-embedded .dropdown-menu > .disabled > a { pointer-events: none; }
.tb-input[disabled], .tb-select[disabled], .tb-textarea[disabled], .tb-search input[disabled], .tb-embedded .form-control[disabled], .tb-embedded select[disabled], .tb-embedded textarea[disabled], .tb-embedded input[disabled], body.tb-chrome .form-control[disabled] { background: var(--paper); }

/* --- 7. loading (.is-loading / [aria-busy=true]): спінер у ::after, без кліків --- */
.tb-btn.is-loading, .tb-btn[aria-busy="true"], .tb-chip-btn.is-loading, .tb-chip-btn[aria-busy="true"], .tb-dd-btn.is-loading, .tb-pager-page.is-loading, .tb-ext-toggle.is-loading, .tb-seg > .is-loading, .tb-toggle-chip.is-loading,
.tb-embedded .btn.is-loading, .tb-embedded .btn[aria-busy="true"], body.tb-chrome .btn.is-loading, body.tb-chrome .btn[aria-busy="true"], .tb-embedded .nav-tabs > li > a.is-loading, .tb-embedded .pagination > li > a.is-loading { position: relative; color: transparent !important; text-shadow: none; pointer-events: none; cursor: default; transition: none; }
.tb-btn.is-loading > *, .tb-btn[aria-busy="true"] > *, .tb-chip-btn.is-loading > *, .tb-dd-btn.is-loading > *, .tb-embedded .btn.is-loading > *, body.tb-chrome .btn.is-loading > * { visibility: hidden; }
.tb-btn.is-loading::after, .tb-btn[aria-busy="true"]::after, .tb-chip-btn.is-loading::after, .tb-chip-btn[aria-busy="true"]::after, .tb-dd-btn.is-loading::after, .tb-pager-page.is-loading::after, .tb-ext-toggle.is-loading::after, .tb-seg > .is-loading::after, .tb-toggle-chip.is-loading::after,
.tb-embedded .btn.is-loading::after, .tb-embedded .btn[aria-busy="true"]::after, body.tb-chrome .btn.is-loading::after, body.tb-chrome .btn[aria-busy="true"]::after, .tb-embedded .nav-tabs > li > a.is-loading::after, .tb-embedded .pagination > li > a.is-loading::after {
    content: ''; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; box-sizing: border-box; visibility: visible;
    border: 3px solid var(--t, var(--ink)); border-right-color: transparent; border-radius: 50%; animation: tb-rot .7s linear infinite;
}
.tb-btn-sm.is-loading::after, .tb-chip-btn.is-loading::after, .tb-chip-btn[aria-busy="true"]::after, .tb-pager-page.is-loading::after, .tb-seg > .is-loading::after, .tb-embedded .btn-sm.is-loading::after, .tb-embedded .btn-xs.is-loading::after, .tb-embedded .nav-tabs > li > a.is-loading::after, .tb-embedded .pagination > li > a.is-loading::after { width: 14px; height: 14px; margin: -7px 0 0 -7px; border-width: 2px; }
.tb-btn-lg.is-loading::after, .tb-btn-xl.is-loading::after, .tb-embedded .btn-lg.is-loading::after { width: 22px; height: 22px; margin: -11px 0 0 -11px; }
.tb-embedded .btn-primary.is-loading::after, .tb-embedded .btn-orange.is-loading::after, .tb-embedded .btn-danger.is-loading::after, .tb-embedded .btn-success.is-loading::after, .tb-embedded .btn-info.is-loading::after, .tb-embedded .btn-warning.is-loading::after,
.tb-embedded .btn-primary[aria-busy="true"]::after, .tb-embedded .btn-orange[aria-busy="true"]::after, body.tb-chrome .btn-primary.is-loading::after, body.tb-chrome .btn-orange.is-loading::after, body.tb-chrome .btn-primary[aria-busy="true"]::after, body.tb-chrome .btn-orange[aria-busy="true"]::after { border-color: #fff; border-right-color: transparent; }
.tb-btn-ai.is-loading { animation: none; }
/* поля й обгортки полів: спінер праворуч, значення лишається видимим */
.tb-search.is-loading, .tb-selectbox.is-loading, .tb-field.is-loading, .tb-dd.is-loading { position: relative; }
.tb-search.is-loading .tb-search-clear, .tb-search.is-loading > .lucide, .tb-search.is-loading > svg { visibility: hidden; }
.tb-search.is-loading::after, .tb-selectbox.is-loading::after, .tb-field.is-loading::after, .tb-dd.is-loading::after { content: ''; position: absolute; right: 14px; bottom: 15px; width: 18px; height: 18px; box-sizing: border-box; border: 3px solid var(--ink-3); border-right-color: transparent; border-radius: 50%; animation: tb-rot .7s linear infinite; pointer-events: none; z-index: 2; }
.tb-search.is-loading::after { right: 12px; bottom: auto; top: 50%; margin-top: -9px; }
.tb-dd.is-loading::after { right: 10px; bottom: auto; top: 50%; margin-top: -9px; width: 16px; height: 16px; }
.tb-dd.is-loading .tb-dd-btn > svg { visibility: hidden; }
.tb-input.is-loading, .tb-select.is-loading, .tb-textarea.is-loading, .tb-embedded .form-control.is-loading { pointer-events: none; color: var(--ink-3); }
/* контейнери (картки, фільтри, списки, таблиці, модалки): напівпрозора пелена + спінер по центру */
.tb-card.is-loading, .tb-lib-card.is-loading, .tb-filters.is-loading, .tb-ext-panel.is-loading, .tb-table-wrap.is-loading, .tb-table.is-loading, .tb-tcards.is-loading, .tb-lib-list.is-loading, .tb-lib-main.is-loading, .tb-lib-aside.is-loading,
.tb-pager.is-loading, .tb-modal.is-loading, .tb-note.is-loading, .tb-single-card.is-loading, .tb-catalog-head.is-loading, .tb-hw-cards.is-loading, .tb-promo-ev.is-loading, .tb-promo-strip.is-loading,
.tb-embedded .table.is-loading, .tb-embedded .alert.is-loading, body.tb-chrome .modal-content.is-loading, .tb-embedded .form-group.is-loading, [aria-busy="true"].tb-card, [aria-busy="true"].tb-lib-card, [aria-busy="true"].tb-filters, [aria-busy="true"].tb-table-wrap { position: relative; pointer-events: none; }
.tb-card.is-loading::before, .tb-lib-card.is-loading::before, .tb-filters.is-loading::before, .tb-ext-panel.is-loading::before, .tb-table-wrap.is-loading::before, .tb-table.is-loading::before, .tb-tcards.is-loading::before, .tb-lib-list.is-loading::before, .tb-lib-main.is-loading::before, .tb-lib-aside.is-loading::before,
.tb-pager.is-loading::before, .tb-modal.is-loading::before, .tb-note.is-loading::before, .tb-single-card.is-loading::before, .tb-catalog-head.is-loading::before, .tb-hw-cards.is-loading::before, .tb-promo-ev.is-loading::before, .tb-promo-strip.is-loading::before,
.tb-embedded .table.is-loading::before, .tb-embedded .alert.is-loading::before, body.tb-chrome .modal-content.is-loading::before, .tb-embedded .form-group.is-loading::before, [aria-busy="true"].tb-card::before, [aria-busy="true"].tb-lib-card::before, [aria-busy="true"].tb-filters::before, [aria-busy="true"].tb-table-wrap::before { content: ''; position: absolute; inset: 0; z-index: 5; border-radius: inherit; background: rgba(255, 255, 255, .6); }
.tb-card.is-loading::after, .tb-lib-card.is-loading::after, .tb-filters.is-loading::after, .tb-ext-panel.is-loading::after, .tb-table-wrap.is-loading::after, .tb-table.is-loading::after, .tb-tcards.is-loading::after, .tb-lib-list.is-loading::after, .tb-lib-main.is-loading::after, .tb-lib-aside.is-loading::after,
.tb-pager.is-loading::after, .tb-modal.is-loading::after, .tb-note.is-loading::after, .tb-single-card.is-loading::after, .tb-catalog-head.is-loading::after, .tb-hw-cards.is-loading::after, .tb-promo-ev.is-loading::after, .tb-promo-strip.is-loading::after,
.tb-embedded .table.is-loading::after, .tb-embedded .alert.is-loading::after, body.tb-chrome .modal-content.is-loading::after, .tb-embedded .form-group.is-loading::after, [aria-busy="true"].tb-card::after, [aria-busy="true"].tb-lib-card::after, [aria-busy="true"].tb-filters::after, [aria-busy="true"].tb-table-wrap::after { content: ''; position: absolute; left: 50%; top: 50%; z-index: 6; width: 28px; height: 28px; margin: -14px 0 0 -14px; box-sizing: border-box; border: 3px solid var(--ink-3); border-right-color: transparent; border-radius: 50%; animation: tb-rot .7s linear infinite; }
/* скелет (заглушка під час завантаження) і невизначений прогрес */
.tb-skeleton { display: block; min-height: 1em; border-radius: 8px; color: transparent !important; background: linear-gradient(90deg, rgba(38, 50, 56, .06), rgba(38, 50, 56, .12), rgba(38, 50, 56, .06)); background-size: 200% 100%; animation: tb-skeleton 1.2s linear infinite; pointer-events: none; }
.tb-skeleton-text { height: .9em; margin: .3em 0; }
.tb-skeleton-round { border-radius: 50%; }
@keyframes tb-skeleton { to { background-position: -200% 0; } }
.tb-progress.is-loading i, .tb-progress.is-loading .progress-bar, .tb-embedded .progress.is-loading .progress-bar { width: 40% !important; animation: tb-progress-slide 1.2s ease-in-out infinite; }
@keyframes tb-progress-slide { from { left: -40%; } to { left: 100%; } }

/* --- 8. empty: пунктирна рамка, сірий текст, без тіні --- */
.tb-empty-sm { padding: 24px 16px; border-width: 2px; border-radius: 18px; }
.tb-card.is-empty, .tb-lib-card.is-empty, .tb-filters.is-empty, .tb-tcards.is-empty, .tb-lib-list.is-empty, .tb-lib-main.is-empty, .tb-hw-cards.is-empty, .tb-table-wrap.is-empty, .tb-note.is-empty, .tb-single-card.is-empty,
.tb-embedded .table.is-empty, .tb-embedded .alert.is-empty { display: block; padding: 24px 16px; border: 2px dashed var(--line-2); border-radius: 18px; background: #fff; box-shadow: none; color: var(--ink-3); font-weight: 600; text-align: center; }
.tb-card.is-empty .tb-btn, .tb-lib-card.is-empty .tb-btn, .tb-lib-list.is-empty .tb-btn, .tb-tcards.is-empty .tb-btn { margin-top: 12px; }
.tb-tcards:empty, .tb-lib-list:empty, .tb-hw-cards:empty, .tb-chips:empty, .tb-active-filters:empty, .tb-lib-tags:empty, .tb-tcard-tags:empty, .tb-note:empty, .tb-badge:empty, .tb-pager:empty, .tb-ext-panel:empty { display: none; }
.tb-select.is-empty, .tb-select:invalid, .tb-embedded select.form-control:invalid, .tb-dd-btn.is-empty .tb-dd-value { color: var(--ink-3); }
.tb-table-empty, .tb-table tr.is-empty td, .tb-embedded .table tr.is-empty td { padding: 24px 14px; text-align: center; color: var(--ink-3); font-weight: 600; }

/* --- 9. класичні елементи у .tb-embedded: той самий вигляд, що й у сутностей системи --- */
/* кнопки: .btn-primary у вмісті сторінки нового дизайну = primary, як .btn-orange у chrome.css (шапку/промо не чіпаємо) */
body.tb-chrome .tb-page .btn-primary { 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 .tb-page .btn-primary:hover, body.tb-chrome .tb-page .btn-primary:focus { background: #ffbf3d; border-color: #ffbf3d; color: #fff; }
body.tb-chrome .tb-page .btn-primary:active, body.tb-chrome .tb-page .btn-orange:active, body.tb-chrome .tb-page .btn-default:active, body.tb-chrome .modal .btn-primary:active, body.tb-chrome .modal .btn-orange:active, body.tb-chrome .modal .btn-default:active { box-shadow: none; transform: translateY(1px); }
body.tb-chrome input[type="checkbox"], body.tb-chrome input[type="radio"] { accent-color: var(--go); }
/* .pagination → .tb-pager */
.tb-embedded .pagination, body.tb-chrome .tb-page .pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin: 22px 0 8px; padding: 0; border-radius: 0; }
.tb-embedded .pagination > li, body.tb-chrome .tb-page .pagination > li { display: contents; }
.tb-embedded .pagination > li > a, .tb-embedded .pagination > li > span, .tb-embedded .pagination > li:first-child > a, .tb-embedded .pagination > li:first-child > span, .tb-embedded .pagination > li:last-child > a, .tb-embedded .pagination > li:last-child > span,
body.tb-chrome .tb-page .pagination > li > a, body.tb-chrome .tb-page .pagination > li > span, body.tb-chrome .tb-page .pagination > li:first-child > a, body.tb-chrome .tb-page .pagination > li:last-child > a { display: grid; place-items: center; float: none; min-width: 38px; height: 38px; margin: 0; padding: 0 8px; border: 2px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); font: 700 15px/1 var(--f-body); text-decoration: none; transition: border-color .12s, transform .08s; }
.tb-embedded .pagination > li > a:hover, .tb-embedded .pagination > li > a:focus, body.tb-chrome .tb-page .pagination > li > a:hover { background: #fff; color: var(--ink); border-color: var(--ink-3); z-index: auto; }
.tb-embedded .pagination > .active > a, .tb-embedded .pagination > .active > a:hover, .tb-embedded .pagination > .active > a:focus, .tb-embedded .pagination > .active > span, .tb-embedded .pagination > .active > span:hover, body.tb-chrome .tb-page .pagination > .active > a, body.tb-chrome .tb-page .pagination > .active > span { background: var(--paper-2, #fff8e1); border-color: var(--go); color: var(--ink); box-shadow: 0 2px 0 var(--go-d, #cc8600); cursor: default; z-index: auto; }
.tb-embedded .pagination > .disabled > a, .tb-embedded .pagination > .disabled > a:hover, .tb-embedded .pagination > .disabled > span, body.tb-chrome .tb-page .pagination > .disabled > a { background: #fff; border-color: var(--line); color: var(--ink); }
/* .nav-tabs → .tb-seg (сегменти); варіант з підкресленням — .tb-tabs-line (і конференції .tb-ev-order) */
.tb-embedded .nav-tabs { display: inline-flex; flex-wrap: wrap; gap: 2px; margin: 0 0 12px; padding: 3px; border: 0; border-radius: 12px; background: var(--paper); }
.tb-embedded .nav-tabs > li { float: none; margin: 0; }
.tb-embedded .nav-tabs > li > a { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; margin: 0; padding: 8px 14px; border: 0; border-radius: 9px; background: transparent; color: var(--ink-2); font: 700 14px/1 var(--f-body); text-decoration: none; transition: background .12s, color .12s; }
.tb-embedded .nav-tabs > li > a:hover, .tb-embedded .nav-tabs > li > a:focus { border: 0; background: rgba(255, 255, 255, .6); color: var(--ink); }
.tb-embedded .nav-tabs > li.active > a, .tb-embedded .nav-tabs > li.active > a:hover, .tb-embedded .nav-tabs > li.active > a:focus { border: 0; background: var(--card); color: var(--ink); font-weight: 800; box-shadow: 0 2px 0 var(--line-2); cursor: default; }
.tb-embedded .nav-tabs > li > a .badge { margin-left: 2px; }
.tb-embedded .nav-tabs.tb-tabs-line, .tb-embedded .tb-ev-order .nav-tabs { display: flex; gap: 0; padding: 0; border-radius: 0; background: transparent; border-bottom: 2px solid var(--line); }
.tb-embedded .nav-tabs.tb-tabs-line > li > a, .tb-embedded .tb-ev-order .nav-tabs > li > a { margin-bottom: -2px; padding: 10px 14px; border-radius: 10px 10px 0 0; border-bottom: 3px solid transparent; }
.tb-embedded .nav-tabs.tb-tabs-line > li > a:hover, .tb-embedded .tb-ev-order .nav-tabs > li > a:hover { background: transparent; color: var(--ink); }
.tb-embedded .nav-tabs.tb-tabs-line > li.active > a, .tb-embedded .nav-tabs.tb-tabs-line > li.active > a:hover, .tb-embedded .tb-ev-order .nav-tabs > li.active > a, .tb-embedded .tb-ev-order .nav-tabs > li.active > a:hover { background: transparent; box-shadow: none; border-bottom: 3px solid var(--go); }
/* .alert → .tb-note */
.tb-embedded .alert { padding: 12px 16px; margin-bottom: 16px; border: 2px solid var(--line); border-radius: 14px; background: #fff; color: var(--ink-2); font-weight: 600; box-shadow: none; text-shadow: none; }
.tb-embedded .alert a, .tb-embedded .alert .alert-link { color: var(--ink); font-weight: 700; text-decoration: none; }
.tb-embedded .alert a:hover { color: var(--orange-d, #e65100); }
.tb-embedded .alert-success { background: #e8f5e9; border-color: var(--mint); }
.tb-embedded .alert-warning { background: #fff8e1; border-color: var(--go); }
.tb-embedded .alert-info { background: #e3f2fd; border-color: var(--sky); }
.tb-embedded .alert-danger { background: #ffebee; border-color: var(--coral); }
.tb-embedded .alert-dismissible, .tb-embedded .alert-dismissable { padding-right: 44px; }
.tb-embedded .alert .close { color: var(--ink); text-shadow: none; opacity: .6; font-size: 24px; line-height: 1; }
.tb-embedded .alert .close:hover, .tb-embedded .alert .close:focus { opacity: 1; color: var(--ink); }
.tb-note-info { background: #e3f2fd; border-color: var(--sky); }
/* .label → .tb-chip, .badge → .tb-badge */
.tb-embedded .label { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 99px; font: 800 12px/1.2 var(--f-body); letter-spacing: .02em; background: rgba(38, 50, 56, .07); color: var(--ink-2); white-space: nowrap; vertical-align: middle; }
.tb-embedded .label-default { background: rgba(38, 50, 56, .07); color: var(--ink-2); }
.tb-embedded .label-primary, .tb-embedded .label-warning { background: var(--sun); color: #3e2c00; }
.tb-embedded .label-success { background: var(--mint); color: #fff; }
.tb-embedded .label-info { background: var(--sky); color: #fff; }
.tb-embedded .label-danger { background: var(--coral); color: #fff; }
.tb-embedded .badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--paper); color: var(--ink-2); font: 800 11px/1 var(--f-display); vertical-align: middle; }
.tb-embedded .btn .badge, .tb-embedded .active > a > .badge, .tb-embedded .nav-tabs > li.active > a .badge { background: var(--ink); color: #fff; }
.tb-embedded .btn-primary .badge, .tb-embedded .btn-orange .badge { background: #fff; color: var(--ink); }
.tb-badge-sun { background: var(--sun); color: #3e2c00; }
.tb-badge-sky { background: var(--sky); color: #fff; }
.tb-badge-mint { background: var(--mint); color: #fff; }
/* .progress → .tb-progress */
.tb-embedded .progress { position: relative; height: 8px; margin-bottom: 0; border-radius: 99px; background: var(--line); box-shadow: none; overflow: hidden; }
.tb-embedded .progress-bar { position: absolute; inset: 0 auto 0 0; height: 100%; border-radius: 99px; background: var(--go); background-image: none; box-shadow: none; transition: width .4s ease; }
.tb-embedded .progress-bar-success { background: var(--mint); }
.tb-embedded .progress-bar-info { background: var(--sky); }
.tb-embedded .progress-bar-warning { background: var(--sun); }
.tb-embedded .progress-bar-danger { background: var(--coral); }
.tb-embedded .progress-striped .progress-bar, .tb-embedded .progress-bar-striped, .tb-embedded .progress-bar.active { background-image: none; animation: none; }
.tb-progress.is-ok i, .tb-progress.is-done i { background: var(--mint); }
.tb-progress.is-bad i { background: var(--coral); }
.tb-progress.is-half i { background: var(--sun); }
.tb-progress-lg { height: 14px; }
/* .table → .tb-table */
.tb-embedded .table { margin-bottom: 0; border-collapse: collapse; background: #fff; }
.tb-embedded .table > thead > tr > th, .tb-embedded .table > tbody > tr > th { padding: 12px 14px; border: 0; border-bottom: 2px solid var(--line); text-align: left; font: 800 12px/1 var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); vertical-align: middle; }
.tb-embedded .table > tbody > tr > td, .tb-embedded .table > tfoot > tr > td { padding: 12px 14px; border: 0; border-bottom: 1px solid var(--line); vertical-align: middle; line-height: 1.4; }
.tb-embedded .table > tbody > tr:last-child > td { border-bottom: 0; }
.tb-embedded .table-bordered, .tb-embedded .table-bordered > thead > tr > th, .tb-embedded .table-bordered > tbody > tr > td { border-left: 0; border-right: 0; }
.tb-embedded .table-striped > tbody > tr:nth-of-type(odd) > td { background: rgba(38, 50, 56, .025); }
.tb-embedded .table-hover > tbody > tr:hover > td, .tb-embedded .table > tbody > tr.is-link:hover > td { background: var(--paper); }
.tb-embedded .table-responsive { border: 2px solid var(--line); border-radius: 18px; margin-bottom: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tb-embedded .table-responsive > .table { border: 0; }
.tb-table-wrap.is-loading, .tb-embedded .table-responsive.is-loading { position: relative; pointer-events: none; }
/* select2 (випадний список рендериться у body — тому body.tb-chrome) */
.tb-embedded .select2-container--default .select2-selection--multiple { min-height: 46px; padding: 4px 8px; border: 2px solid var(--line); border-radius: 12px; background: var(--paper); font-family: var(--f-body); }
.tb-embedded .select2-container--default .select2-selection--multiple .select2-selection__choice { margin: 4px 4px 0 0; padding: 3px 9px; border: 0; border-radius: 99px; background: var(--paper-2, #fff8e1); color: var(--ink); font-weight: 700; font-size: 13px; }
.tb-embedded .select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--ink-3); }
.tb-embedded .select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: var(--ink-2) transparent transparent; }
.tb-embedded .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b { border-color: transparent transparent var(--ink-2); }
body.tb-chrome .select2-dropdown { margin-top: 6px; border: 2px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 6px 0 var(--line), 0 18px 40px rgba(38, 50, 56, .14); font-family: var(--f-body); overflow: hidden; }
body.tb-chrome .select2-dropdown.select2-dropdown--above { margin-top: 0; margin-bottom: 6px; }
body.tb-chrome .select2-results > .select2-results__options { padding: 6px; max-height: 280px; }
body.tb-chrome .select2-results__option { padding: 7px 12px; border-radius: 9px; font-weight: 600; color: var(--ink); }
body.tb-chrome .select2-container--default .select2-results__option--highlighted[aria-selected], body.tb-chrome .select2-container--default .select2-results__option--highlighted[data-selected] { background: var(--paper-2, #fff8e1); color: var(--ink); }
body.tb-chrome .select2-container--default .select2-results__option[aria-selected="true"], body.tb-chrome .select2-container--default .select2-results__option[data-selected="true"] { background: var(--paper-2, #fff8e1); color: var(--ink); font-weight: 800; }
body.tb-chrome .select2-container--default .select2-results__option[aria-disabled="true"] { opacity: .55; }
body.tb-chrome .select2-search--dropdown { padding: 6px 6px 0; }
body.tb-chrome .select2-container--default .select2-search--dropdown .select2-search__field { min-height: 40px; padding: 6px 10px; border: 2px solid var(--line); border-radius: 10px; font: 500 14px/1.3 var(--f-body); outline: none; }
body.tb-chrome .select2-container--default .select2-search--dropdown .select2-search__field:focus { border-color: var(--sky); box-shadow: var(--ring); }
body.tb-chrome .select2-results__group { padding: 8px 12px 4px; font: 800 11.5px/1 var(--f-display); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
/* .modal (класична) — стани елементів усередині */
body.tb-chrome .modal .close:hover, body.tb-chrome .modal .close:focus { opacity: 1; color: var(--ink); }
body.tb-chrome .modal .btn-default:hover, body.tb-chrome .modal .btn-default:focus, body.tb-chrome .sth-form .btn-default:hover { background: #fff; color: var(--ink); border-color: var(--ink-3); }
body.tb-chrome .modal .btn-default[disabled], body.tb-chrome .modal .btn-primary[disabled], body.tb-chrome .modal .btn-orange[disabled] { opacity: .55; }
/* checkbox / radio bootstrap-ряди */
.tb-embedded .checkbox label:hover, .tb-embedded .radio label:hover { color: var(--ink); }
.tb-embedded .checkbox-inline, .tb-embedded .radio-inline { font: 500 14.5px/1.4 var(--f-body); color: var(--ink); }

/* --- 10. аватар: кругле фото з білою рамкою і бурштиновим кільцем --- */
.tb-avatar { display: inline-block; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; box-shadow: 0 0 0 2px var(--go); background: var(--paper); vertical-align: middle; flex: none; }
.tb-avatar-sm { width: 28px; height: 28px; border-width: 0; box-shadow: 0 0 0 2px var(--go); }
.tb-avatar-lg { width: 72px; height: 72px; border-width: 3px; box-shadow: 0 0 0 3px var(--go); }
.tb-avatar-xl { width: 96px; height: 96px; border-width: 3px; box-shadow: 0 0 0 3px var(--go); }
.tb-avatar.is-off, .tb-avatar.is-disabled { filter: grayscale(1); opacity: .6; box-shadow: 0 0 0 2px var(--line-2); }
.tb-avatar.is-loading { background: linear-gradient(90deg, rgba(38, 50, 56, .06), rgba(38, 50, 56, .12), rgba(38, 50, 56, .06)); background-size: 200% 100%; animation: tb-skeleton 1.2s linear infinite; }
.tb-avatar.is-empty { display: inline-grid; place-items: center; color: var(--ink-3); font: 800 14px/1 var(--f-display); text-transform: uppercase; }
a:focus-visible > .tb-avatar, button:focus-visible > .tb-avatar, a:focus-visible > .profile-avatar { box-shadow: 0 0 0 3px var(--sky); }

/* --- 11. мобільні правила (≤640px): повна ширина кнопок у контейнерах, що на це підписані --- */
@media (max-width: 640px) {
    .tb-m-full > .tb-btn, .tb-m-full > .btn, .tb-m-full > a.tb-btn, .tb-m-full.tb-btn, .tb-catalog-head-row > .tb-btn, .tb-single-cta > .tb-btn, .tb-empty-actions > .tb-btn, .tb-modal-foot > .tb-btn, .tb-form-foot > .tb-btn { width: 100%; justify-content: center; }
    .tb-embedded .modal-footer > .btn, body.tb-chrome .modal-footer > .btn { display: flex; width: 100%; margin: 0 0 8px; }
    .tb-embedded .modal-footer > .btn:last-child, body.tb-chrome .modal-footer > .btn:last-child { margin-bottom: 0; }
    .tb-modal-foot, .tb-form-foot { flex-direction: column-reverse; }
    .tb-seg.tb-m-full { display: flex; }
    .tb-seg.tb-m-full > * { flex: 1 1 0; justify-content: center; text-align: center; }
    .tb-embedded .nav-tabs { display: flex; }
    .tb-embedded .nav-tabs > li { flex: 1 1 0; }
    .tb-embedded .nav-tabs > li > a { width: 100%; justify-content: center; }
    .tb-embedded .pagination > li > a, .tb-embedded .pagination > li > span, body.tb-chrome .tb-page .pagination > li > a { min-width: 34px; height: 34px; }
}
@media (prefers-reduced-motion: reduce) {
    .tb-skeleton, .tb-avatar.is-loading, .tb-progress.is-loading i, .tb-embedded .progress.is-loading .progress-bar { animation: none; }
}
/* Кеш: сторінки підключають /test-beta-static/beta.css?<assetVersion> (views/layouts/test-beta.php:25, мітка часу); у headless Chrome кешу немає — нічого робити не треба; на проді змінюється assetVersion. */
/* скарга на тест (views/test-beta/single.php, #tb-abuse) — у вікні .tb-share */
.tb-abuse-box { width: min(100%, 560px); max-height: calc(100vh - 32px); overflow-y: auto; }
.tb-abuse-types { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.tb-abuse-types legend { margin-bottom: 4px; }
.tb-abuse-type { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 10px 12px; border: 2px solid var(--line); border-radius: 12px; font: 600 14.5px/1.4 var(--f-body); color: var(--ink); cursor: pointer; }
.tb-abuse-type:has(input:checked) { border-color: var(--sky); background: #e8f0fe; }
.tb-abuse-type input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--sky); }
.tb-abuse-comment { min-height: 96px; resize: vertical; }
.tb-abuse-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.tb-abuse-types legend { width: auto; border: 0; padding: 0; }