/* ============================================================
   Виртуальная лаборатория

   Вся страница тёмная, как рабочее окно профессионального
   приложения: раствор в пробирке узнают по цвету, а на светлом фоне
   голубой сульфат меди и бледно-зелёный сульфат железа почти
   неразличимы. На тёмном стекло светится, как под лампой вытяжного
   шкафа, и разница видна сразу.

   Раскладка:
     • компьютер — три колонки: библиотека реактивов, стол, инспектор
       (сосуд и журнал вкладками); боковые колонки прилипают и
       прокручиваются внутри себя;
     • планшет — библиотека слева, стол и инспектор друг под другом;
     • телефон — стол прилипает под меню сайта, а внизу экрана панель
       вкладок, как в приложении: «Реактивы», «Сосуд», «Журнал».

   Имена классов с префиксом lab-, чтобы стили сайта (style.css) не
   пересекались с лабораторией и наоборот.
   ============================================================ */

.lab-page {
    --lab-bg: #0A111D;
    --lab-surface: #0F1A2A;
    --lab-surface-2: #13213A;
    --lab-raise: rgba(255, 255, 255, .04);
    --lab-raise-2: rgba(255, 255, 255, .07);
    --lab-line: rgba(255, 255, 255, .08);
    --lab-line-2: rgba(255, 255, 255, .14);
    --lab-ink: #E6EDF7;
    --lab-ink-2: #B7C3D4;
    --lab-muted: #8D9BB0;
    --lab-faint: #5F6E84;

    --lab-gold: #F5A623;
    --lab-gold-ink: #FFD58A;
    --lab-ok: #34D399;
    --lab-bad: #F43F5E;

    --lab-radius: 20px;
    --lab-ease: cubic-bezier(.2, .8, .2, 1);
    --lab-top: calc(var(--hp-bar-h, 62px) + var(--hp-bar-gap, 12px) * 2);
    --lab-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

    background: var(--lab-bg);
    color: var(--lab-ink);
    color-scheme: dark;
}

/* overflow-x: hidden у body сайта делает его контейнером прокрутки, и
   тогда position: sticky перестаёт работать — стол на телефоне уезжал
   вверх. clip обрезает то же самое, но контейнером не становится;
   браузеры, которые clip не знают, оставят прежнее hidden. */
body.lab-page {
    background:
        radial-gradient(1200px 520px at 50% -160px, rgba(245, 166, 35, .07), transparent 70%),
        radial-gradient(900px 600px at 100% 0, rgba(56, 132, 255, .06), transparent 70%),
        var(--lab-bg);
    background-attachment: fixed;
    overflow-x: hidden; overflow-x: clip;
}

.lab-root {
    width: 100%;
    max-width: 1640px;
    margin-inline: auto;
    padding: 4px 18px 36px;
    box-sizing: border-box;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-feature-settings: 'cv11', 'ss01';
    -webkit-font-smoothing: antialiased;
}

/* Заголовки сайта несут свою оранжевую черту и выключку по ширине —
   в лаборатории они мешают. */
.lab-root h1, .lab-root h2, .lab-root h3 { font-family: inherit; color: inherit; }
.lab-root h1::before, .lab-root h1::after, .lab-root h2::before, .lab-root h2::after, .lab-root h3::before { content: none; display: none; }
.lab-root h1 { border: 0; padding: 0; background: none; -webkit-text-fill-color: currentColor; }
.lab-root p { text-align: left; hyphens: manual; }
.lab-root button { font-family: inherit; -webkit-tap-highlight-color: transparent; }
.lab-root svg { flex: none; }

.lab-root ::-webkit-scrollbar { width: 8px; height: 8px; }
.lab-root ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .12); border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; }
.lab-root ::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, .22); }
.lab-root ::-webkit-scrollbar-track { background: transparent; }
.lab-root * { scrollbar-color: rgba(255, 255, 255, .14) transparent; scrollbar-width: thin; }

/* ——————————————— Панель приложения ——————————————— */

/*
  style.css делает любой <header> липким (position: sticky, z-index 100).
  Здесь это мешало бы: шапка прилипала бы к верху и закрывала стол,
  который на телефоне прилипает там же.
*/
.lab-bar {
    position: static; z-index: auto; background: transparent; border: 0; box-shadow: none;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "brand stats acts" "sub sub sub";
    align-items: center; gap: 10px 22px;
    padding: 8px 4px 18px;
}
.lab-bar__brand { grid-area: brand; display: flex; align-items: center; gap: 14px; min-width: 0; }
.lab-bar__logo {
    width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
    background: linear-gradient(145deg, #FFC761, #E8890C);
    box-shadow: 0 10px 28px -12px rgba(245, 166, 35, .9), inset 0 1px 0 rgba(255, 255, 255, .45);
}
.lab-bar__logo svg { width: 24px; height: 24px; fill: none; stroke: #1A1204; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lab-bar__kicker {
    margin: 0 0 5px; font: 800 .66rem/1 'Inter', sans-serif;
    letter-spacing: .16em; text-transform: uppercase; color: var(--lab-gold);
}
.lab-bar__title { margin: 0; font: 850 1.7rem/1.05 'Inter', sans-serif; letter-spacing: -.025em; color: #fff; }
.lab-bar__sub { grid-area: sub; display: none; margin: 0; max-width: 78ch; font-size: .88rem; line-height: 1.5; color: var(--lab-muted); }

.lab-bar__stats {
    grid-area: stats; justify-self: center;
    display: flex; gap: 0; margin: 0; padding: 5px; list-style: none;
    border-radius: 16px; background: var(--lab-raise); border: 1px solid var(--lab-line);
}
.lab-bar__stats li {
    display: flex; flex-direction: column; gap: 3px; padding: 6px 16px;
    border-left: 1px solid var(--lab-line);
}
.lab-bar__stats li:first-child { border-left: 0; }
.lab-bar__stats b { font: 850 1.02rem/1 'Inter', sans-serif; color: #fff; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.lab-bar__stats span { font-size: .68rem; font-weight: 600; color: var(--lab-muted); white-space: nowrap; }
.lab-bar__acts { grid-area: acts; display: flex; gap: 8px; }

.lab-btn {
    display: inline-flex; align-items: center; gap: 8px; height: 40px;
    padding: 0 15px; border-radius: 12px; cursor: pointer;
    background: var(--lab-raise-2); border: 1px solid var(--lab-line-2);
    color: var(--lab-ink); font: 700 .82rem/1 'Inter', sans-serif; white-space: nowrap;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
    transition: background .18s, border-color .18s, transform .18s var(--lab-ease);
}
.lab-btn:hover { background: rgba(255, 255, 255, .12); }
/* Ссылка на курс — оранжевая, чтобы выделялась среди кнопок журнала */
.lab-btn--course {
    text-decoration: none; color: #16191F; border-color: transparent;
    background: linear-gradient(135deg, #F7B84B 0%, #E8850A 100%);
    box-shadow: 0 8px 18px -10px rgba(232, 133, 10, .9), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.lab-btn--course:hover { background: linear-gradient(135deg, #F9C566 0%, #EE9320 100%); color: #16191F; }
.lab-btn--course svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lab-btn:active { transform: scale(.97); }
.lab-btn:focus-visible { outline: 2px solid var(--lab-gold); outline-offset: 2px; }
.lab-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lab-btn--ghost { background: transparent; box-shadow: none; }
.lab-btn--ghost:hover { background: rgba(244, 63, 94, .14); border-color: rgba(244, 63, 94, .4); color: #FFC2CC; }

/* ——————————————— Сетка ——————————————— */

.lab-grid {
    display: grid;
    grid-template-columns: 318px minmax(0, 1fr) 368px;
    grid-template-areas: "shelf bench side";
    gap: 16px;
    align-items: start;
}
.lab-panel--shelf { grid-area: shelf; }
.lab-bench { grid-area: bench; }
.lab-side { grid-area: side; }
.lab-tabs { display: none; }

/* ——————————————— Панели ——————————————— */

.lab-panel {
    position: relative;
    background: linear-gradient(180deg, rgba(20, 33, 54, .92), rgba(13, 22, 37, .96));
    border: 1px solid var(--lab-line);
    border-radius: var(--lab-radius);
    box-shadow: 0 30px 60px -40px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .05);
    overflow: hidden;
}
.lab-panel__head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 15px 16px 12px;
}
.lab-panel__title {
    margin: 0; font: 800 .72rem/1.2 'Inter', sans-serif;
    letter-spacing: .14em; text-transform: uppercase; color: var(--lab-ink-2);
}
.lab-panel__count {
    flex: none; padding: 4px 9px; border-radius: 999px;
    background: var(--lab-raise-2); border: 1px solid var(--lab-line);
    font: 700 .7rem/1 'Inter', sans-serif; color: var(--lab-ink-2);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* ——————————————— Библиотека реактивов ——————————————— */

.lab-search { position: relative; display: block; padding: 0 12px 10px; }
.lab-search input {
    width: 100%; box-sizing: border-box; height: 42px;
    padding: 0 12px 0 38px; border-radius: 12px;
    border: 1px solid var(--lab-line-2); background: rgba(3, 8, 16, .45);
    font: 500 .88rem 'Inter', sans-serif; color: var(--lab-ink);
    transition: border-color .18s, box-shadow .18s, background .18s;
    -webkit-appearance: none; appearance: none;
}
.lab-search input::placeholder { color: var(--lab-faint); }
.lab-search input:focus {
    outline: 0; border-color: rgba(245, 166, 35, .7); background: rgba(3, 8, 16, .7);
    box-shadow: 0 0 0 4px rgba(245, 166, 35, .14);
}
.lab-search svg {
    position: absolute; left: 25px; top: 21px; transform: translateY(-50%);
    width: 16px; height: 16px; stroke: var(--lab-muted); fill: none; stroke-width: 2; stroke-linecap: round;
    pointer-events: none;
}

.lab-chips {
    display: flex; flex-wrap: wrap; gap: 6px;
    padding: 2px 12px 12px; border-bottom: 1px solid var(--lab-line);
}
.lab-chip {
    display: inline-flex; align-items: center; gap: 6px;
    height: 30px; padding: 0 10px; border-radius: 999px; cursor: pointer; white-space: nowrap;
    border: 1px solid var(--lab-line); background: var(--lab-raise);
    font: 650 .74rem/1 'Inter', sans-serif; color: var(--lab-ink-2);
    transition: background .18s, color .18s, border-color .18s;
}
.lab-chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--sh, #888); box-shadow: 0 0 8px var(--sh, transparent); }
.lab-chip b { font-weight: 700; font-size: .66rem; color: var(--lab-faint); font-variant-numeric: tabular-nums; }
.lab-chip:hover { background: var(--lab-raise-2); color: var(--lab-ink); }
.lab-chip[aria-pressed="true"] { background: rgba(245, 166, 35, .15); border-color: rgba(245, 166, 35, .55); color: var(--lab-gold-ink); }
.lab-chip[aria-pressed="true"] b { color: rgba(255, 213, 138, .7); }
.lab-chip:focus-visible { outline: 2px solid var(--lab-gold); outline-offset: 1px; }

.lab-shelf {
    padding: 6px;
    overflow-y: auto; overscroll-behavior: contain;
    /* Палец должен листать список, а не тащить склянку: без touch-action
       браузер считает жест началом перетаскивания. */
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
}

.lab-reagent {
    display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 10px;
    touch-action: pan-y;
    width: 100%; box-sizing: border-box; text-align: left;
    padding: 7px 10px 7px 6px; margin: 0 0 2px;
    border: 1px solid transparent; border-radius: 12px; background: transparent; cursor: grab;
    color: inherit;
    transition: background .15s, border-color .15s, transform .15s var(--lab-ease);
}
.lab-reagent:hover { background: var(--lab-raise-2); border-color: var(--lab-line); }
.lab-reagent:active { cursor: grabbing; transform: scale(.985); background: rgba(245, 166, 35, .1); }
.lab-reagent:focus-visible { outline: 2px solid var(--lab-gold); outline-offset: -2px; }
.lab-reagent__ico {
    width: 38px; height: 40px; border-radius: 10px; display: grid; place-items: center;
    background:
        radial-gradient(80% 60% at 50% 100%, color-mix(in srgb, var(--sh, #888) 22%, transparent), transparent 70%),
        rgba(255, 255, 255, .035);
    border: 1px solid var(--lab-line);
}
.lab-reagent__ico svg { width: 26px; height: 30px; overflow: visible; }
.lab-reagent__main { min-width: 0; }
.lab-reagent__formula {
    display: block; font: 750 .95rem/1.15 'Inter', sans-serif; color: #fff; letter-spacing: -.005em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lab-reagent__name {
    display: block; margin-top: 3px; font-size: .74rem; font-weight: 500; color: var(--lab-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lab-reagent__name i { font-style: normal; color: var(--lab-faint); }
.lab-reagent__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.lab-reagent__conc { font: 650 .66rem/1 'Inter', sans-serif; color: var(--lab-faint); white-space: nowrap; font-variant-numeric: tabular-nums; }
.lab-reagent__haz { color: #FB7185; }
.lab-reagent__haz::before { content: "⚠ "; }

/* Подсказка: что даст этот реактив в выбранном сосуде. */
.lab-reagent__hint {
    padding: 3px 7px; border-radius: 6px; white-space: nowrap;
    font: 750 .6rem/1 'Inter', sans-serif; letter-spacing: .03em; text-transform: uppercase;
    background: var(--lab-raise-2); color: var(--lab-ink-2);
}
.lab-hint--precipitate { background: rgba(139, 92, 246, .18); color: #C4B5FD; }
.lab-hint--gas { background: rgba(14, 165, 233, .18); color: #7DD3FC; }
.lab-hint--color { background: rgba(245, 166, 35, .18); color: #FCD38A; }
.lab-hint--heat { background: rgba(244, 63, 94, .18); color: #FDA4AF; }
.lab-hint--dissolve, .lab-hint--note { background: rgba(16, 185, 129, .16); color: #6EE7B7; }
.lab-hint--mirror { background: rgba(203, 213, 225, .14); color: #E2E8F0; }

.lab-empty { margin: 0; padding: 28px 18px; text-align: center; color: var(--lab-muted); font-size: .84rem; line-height: 1.5; }

/* ——————————————— Лабораторный стол: сцена ——————————————— */

/*
  Стол — не список блоков, а вид на столешницу под лампой вытяжного
  шкафа: сверху тёплый свет, снизу столешница, на ней отражения и
  цветные пятна света от растворов. Всё рисуется градиентами и тенями,
  без картинок, поэтому страница остаётся лёгкой и чёткой.
*/
.lab-bench {
    position: relative;
    border-radius: 24px;
    background:
        radial-gradient(90% 55% at 50% -8%, rgba(245, 166, 35, .20), transparent 60%),
        radial-gradient(80% 45% at 50% 108%, rgba(47, 168, 216, .12), transparent 62%),
        linear-gradient(180deg, #17293F 0%, #101F32 46%, #0A1523 100%);
    border: 1px solid rgba(255, 255, 255, .09);
    box-shadow:
        0 44px 90px -46px rgba(0, 0, 0, .95),
        0 8px 26px -18px rgba(0, 0, 0, .8),
        inset 0 1px 0 rgba(255, 255, 255, .07);
    overflow: hidden;
    isolation: isolate;
}
/* Сетка на столешнице — как разметка на лабораторном коврике. */
.lab-bench::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
    background-size: 28px 28px;
    -webkit-mask-image: radial-gradient(90% 70% at 50% 40%, #000, transparent 75%);
    mask-image: radial-gradient(90% 70% at 50% 40%, #000, transparent 75%);
}
/* Виньетка и зерно: ровные градиенты выглядят пластиково, лёгкий шум
   делает сцену похожей на снятую камерой. */
.lab-bench::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
    background:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.14'/></svg>"),
        radial-gradient(78% 62% at 50% 38%, transparent 52%, rgba(4, 10, 20, .5));
    background-size: 160px 160px, cover;
}

.lab-bench__top {
    position: relative; z-index: 3;
    display: flex; align-items: center; gap: 14px;
    padding: 14px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.lab-bench__title {
    margin: 0; flex: none; display: inline-flex; align-items: center; gap: 8px;
    font: 800 .72rem/1 'Inter', sans-serif; letter-spacing: .14em; text-transform: uppercase;
    color: var(--lab-ink-2);
}
.lab-bench__title::before {
    content: ""; width: 8px; height: 8px; border-radius: 50%;
    background: var(--lab-ok); box-shadow: 0 0 0 3px rgba(52, 211, 153, .18), 0 0 12px var(--lab-ok);
}
.lab-bench__hint {
    margin: 0; min-width: 0; font-size: .78rem; font-weight: 500; line-height: 1.35;
    color: rgba(230, 237, 247, .55);
}

.lab-scene { position: relative; }
/* Конус света от лампы: сужается кверху, поэтому взгляд сам идёт к посуде. */
.lab-scene::before {
    content: ""; position: absolute; left: 50%; top: -18px; transform: translateX(-50%);
    width: 86%; height: 78%; pointer-events: none; z-index: 0;
    background: linear-gradient(180deg, rgba(255, 226, 168, .09), rgba(255, 226, 168, 0) 76%);
    -webkit-mask-image: radial-gradient(58% 100% at 50% 0, #000 20%, transparent 76%);
    mask-image: radial-gradient(58% 100% at 50% 0, #000 20%, transparent 76%);
    filter: blur(26px);
}

/* Посуда стоит в один ряд: перенос на вторую строку ломает и
   столешницу, и ощущение стола. Не поместилось — прокручиваем. */
.lab-stand {
    position: relative; z-index: 1;
    display: flex; align-items: flex-end; justify-content: safe center;
    flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
    overscroll-behavior-x: contain; scroll-snap-type: x proximity;
    gap: 14px; padding: 18px 22px 0; min-height: 360px;
}
.lab-stand::-webkit-scrollbar { height: 6px; }

/* Каждый сосуд — три ряда: подпись, стекло, описание. Ряды одинаковые
   у всех, поэтому донышки стоят на одной линии. */
.lab-slot {
    position: relative;
    display: grid; grid-template-rows: auto 1fr auto; align-items: end; justify-items: center;
    flex: 0 0 auto; width: 172px; padding: 10px 6px 14px;
    border-radius: 18px; cursor: pointer; scroll-snap-align: center;
    border: 1px solid transparent; background: transparent;
    transition: background .2s, border-color .2s, box-shadow .2s;
}
.lab-slot:hover { background: rgba(255, 255, 255, .035); }
.lab-slot.is-active {
    background:
        radial-gradient(70% 50% at 50% 100%, rgba(245, 166, 35, .16), transparent 70%),
        rgba(255, 255, 255, .04);
    border-color: rgba(245, 166, 35, .5);
    box-shadow: inset 0 0 0 1px rgba(245, 166, 35, .18), 0 0 40px -18px rgba(245, 166, 35, .6);
}
.lab-slot.is-target {
    border-color: rgba(52, 211, 153, .75); background: rgba(52, 211, 153, .10);
    animation: lab-target 1.4s ease-in-out infinite;
}
@keyframes lab-target { 50% { box-shadow: 0 0 0 4px rgba(52, 211, 153, .16); } }
.lab-slot:focus-visible { outline: 2px solid var(--lab-gold); outline-offset: 2px; }

.lab-slot__label {
    display: flex; align-items: center; justify-content: center; gap: 5px; white-space: nowrap;
    margin-bottom: 10px;
    font: 750 .74rem/1.2 'Inter', sans-serif; letter-spacing: .01em; color: rgba(230, 237, 247, .92);
}
.lab-slot__label small {
    padding: 2px 6px; border-radius: 6px; background: rgba(255, 255, 255, .07);
    font-weight: 600; font-size: .66rem; color: rgba(230, 237, 247, .6); font-variant-numeric: tabular-nums;
}
.lab-slot__fire {
    padding: 2px 6px; border-radius: 6px; font: 800 .62rem/1.2 'Inter', sans-serif; font-style: normal;
    background: rgba(244, 63, 94, .22); color: #FDA4AF;
}
.lab-slot__x {
    width: 20px; height: 20px; padding: 0;
    border: 0; border-radius: 50%; cursor: pointer; line-height: 1;
    background: rgba(255, 255, 255, .10); color: var(--lab-ink); font-size: .9rem;
    display: inline-grid; place-items: center;
    transition: background .15s, color .15s;
}
.lab-slot__x:hover { background: var(--lab-bad); color: #fff; }

/* --base: сколько пикселей от нижнего края рисунка до донышка
   (в макете это 230 − 186 = 44 из 230 по высоте). */
.lab-slot__glass { position: relative; display: block; --base: 46px; }
/* Стекло крупное: цвет раствора и осадок должны читаться с
   расстояния, как в настоящем опыте. */
.lab-glass {
    display: block; height: 240px; width: auto; overflow: visible; margin: 16px 0 0;
    position: relative; z-index: 1;
    transition: transform .28s var(--lab-ease);
}
.lab-slot:hover .lab-glass { transform: translateY(-3px); }

/* Пятно света от раствора на столешнице. */
.lab-slot__pool {
    position: absolute; left: 50%; bottom: calc(var(--base, 0px) - 6px); transform: translateX(-50%);
    width: 230%; height: 150px; pointer-events: none;
    background: radial-gradient(48% 52% at 50% 100%, var(--glow, transparent), transparent 74%);
    opacity: .55; filter: blur(18px);
    transition: opacity .4s var(--lab-ease);
}
.lab-slot:hover .lab-slot__pool { opacity: .75; }
/* Тень под донышком: сосуд перестаёт «висеть». */
.lab-slot__shadow {
    position: absolute; left: 50%; bottom: calc(var(--base, 0px) - 9px); transform: translateX(-50%);
    width: 78%; height: 16px; pointer-events: none;
    background: radial-gradient(closest-side, rgba(2, 7, 14, .75), transparent);
}
/* Отражение в столешнице. Пузырьки и подписи газа в нём прячем: в
   перевёрнутом виде они «идут вниз», и глаз читает это как ошибку. */
.lab-slot__mirror .lab-bubble,
.lab-slot__mirror .lab-puff,
.lab-slot__mirror text { display: none; }
.lab-slot__mirror {
    position: absolute; left: 0; right: 0; top: calc(100% - var(--base, 0px));
    display: block; pointer-events: none;
    transform: scaleY(-.42); transform-origin: top center;
    opacity: .38; filter: blur(.5px);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .95), transparent 62%);
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .95), transparent 62%);
}
.lab-slot__note {
    margin-top: 26px; max-width: 152px; min-height: 3.4em; text-align: center;
    font-size: .72rem; font-weight: 500; line-height: 1.35; color: rgba(230, 237, 247, .7);
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}

/* Столешница: светлая кромка под донышками и уходящая в тень плоскость.
   Высоту --lab-floor скрипт считает по тени под сосудом — так кромка
   совпадает с линией, на которой стоят донышки. */
.lab-bench__floor {
    position: absolute; left: 0; right: 0; z-index: 0; pointer-events: none;
    bottom: calc(var(--lab-floor, 159px) - 112px); height: 112px;
    background: linear-gradient(180deg,
        rgba(255, 255, 255, .13) 0,
        rgba(255, 255, 255, .03) 18%,
        rgba(4, 10, 20, .35) 100%);
    border-top: 1px solid rgba(255, 255, 255, .3);
    box-shadow: 0 -22px 50px -30px rgba(0, 0, 0, .9);
}

/* Струя при наливании. */
.lab-stream {
    position: absolute; left: 50%; top: -34px; width: 5px; margin-left: -2.5px;
    height: 0; border-radius: 3px; pointer-events: none; z-index: 2;
    background: linear-gradient(180deg, transparent, var(--stream, #BFDCEF));
    box-shadow: 0 0 10px -2px var(--stream, #BFDCEF);
    animation: lab-pour-stream .7s ease-in forwards;
}
@keyframes lab-pour-stream {
    0% { height: 0; opacity: 0; }
    20% { opacity: 1; }
    55% { height: 78px; opacity: 1; }
    100% { height: 78px; opacity: 0; }
}

/* ——————————————— Док инструментов ——————————————— */

/*
  Как панель инструментов в редакторе: плитки «значок над подписью»,
  разбитые на две группы — приборы и посуда. Группа подписана сверху
  мелким заголовком, он берётся из aria-label.
*/
.lab-tools {
    position: relative; z-index: 3;
    display: flex; flex-wrap: wrap; gap: 12px 18px;
    margin: 0 12px 12px; padding: 12px 14px 12px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .03));
    border: 1px solid rgba(255, 255, 255, .09);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 20px 40px -26px rgba(0, 0, 0, .9);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.lab-tools__group { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; flex: 1 1 100%; }
.lab-tools__group > .lab-tool { flex: 1 1 0; }
.lab-tools__group::before {
    content: attr(aria-label); flex: 0 0 100%;
    font: 750 .6rem/1 'Inter', sans-serif; letter-spacing: .14em; text-transform: uppercase;
    color: var(--lab-faint); padding: 0 2px 2px;
}
/* Посуда: строка кнопок «значок + название» — их всего четыре. */
.lab-tools__group--glass .lab-tool { flex-direction: row; justify-content: center; min-height: 40px; padding: 8px 10px; gap: 8px; font-size: .74rem; }
.lab-tools__group--glass .lab-tool svg { width: 18px; height: 18px; }
.lab-tools__group--glass .lab-tool::before { content: "+"; font-weight: 800; color: #6EE7B7; margin-right: -4px; }

.lab-tool {
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 6px;
    min-width: 64px; min-height: 64px; padding: 9px 4px 8px; box-sizing: border-box;
    border-radius: 13px; cursor: pointer;
    background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .08);
    color: var(--lab-ink); font: 650 .66rem/1.15 'Inter', sans-serif; text-align: center;
    transition: background .18s, transform .18s var(--lab-ease), border-color .18s, box-shadow .18s, color .18s;
}
.lab-tool svg {
    width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8;
    stroke-linecap: round; stroke-linejoin: round;
}
.lab-tool span { display: block; }
.lab-tool:hover { background: rgba(255, 255, 255, .10); border-color: rgba(255, 255, 255, .16); transform: translateY(-1px); }
.lab-tool:active { transform: scale(.96); }
.lab-tool:focus-visible { outline: 2px solid var(--lab-gold); outline-offset: 2px; }
.lab-tool[aria-pressed="true"] {
    background: linear-gradient(180deg, #FFC761, #E8890C); color: #1A1204; border-color: transparent;
    box-shadow: 0 0 0 1px rgba(245, 166, 35, .5), 0 10px 22px -10px rgba(245, 166, 35, .9);
}
.lab-tool[disabled] { opacity: .35; cursor: not-allowed; transform: none; }
.lab-tool--add { color: #A7F3D0; }
.lab-tool--add svg { stroke: #6EE7B7; }
.lab-tool--add:hover { background: rgba(52, 211, 153, .12); border-color: rgba(52, 211, 153, .35); }
/* «Вылить и промыть» — действие необратимое, поэтому выделено цветом
   всегда, а не только под курсором: его не должны нажимать случайно. */
.lab-tool--danger { background: rgba(244, 63, 94, .10); border-color: rgba(244, 63, 94, .32); color: #FECDD3; }
.lab-tool--danger:hover { background: var(--lab-bad); border-color: var(--lab-bad); color: #fff; }

/* ——————————————— Инспектор ——————————————— */

.lab-side { display: flex; flex-direction: column; gap: 10px; min-width: 0; }

/* Переключатель «Сосуд / Журнал» — сегментированный, как в приложениях. */
.lab-itabs {
    display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px;
    border-radius: 14px; background: var(--lab-raise); border: 1px solid var(--lab-line);
}
.lab-itab {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    height: 36px; border: 0; border-radius: 10px; cursor: pointer;
    background: transparent; color: var(--lab-muted);
    font: 700 .8rem/1 'Inter', sans-serif;
    transition: background .18s, color .18s, box-shadow .18s;
}
.lab-itab:hover { color: var(--lab-ink); }
.lab-itab[aria-selected="true"] {
    background: linear-gradient(180deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .07));
    color: #fff; box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .1);
}
.lab-itab__n:not(:empty) {
    min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 99px;
    display: inline-grid; place-items: center;
    background: var(--lab-gold); color: #1A1204; font: 800 .64rem/1 'Inter', sans-serif;
}
.lab-root[data-itab="vessel"] #labLogCard,
.lab-root[data-itab="log"] #labVesselCard { display: none; }

.lab-inspector { display: flex; flex-direction: column; }

/* Карточка сосуда: образец раствора, название и объём. */
.lab-state { padding: 16px 16px 4px; }
.lab-vhead { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.lab-vhead__sw {
    width: 48px; height: 48px; border-radius: 14px; position: relative; overflow: hidden;
    background:
        linear-gradient(180deg, transparent 38%, var(--c) 38%),
        repeating-linear-gradient(45deg, rgba(255, 255, 255, .04) 0 4px, transparent 4px 8px),
        rgba(255, 255, 255, .03);
    border: 1px solid var(--lab-line-2);
    box-shadow: inset 0 -8px 16px -8px rgba(0, 0, 0, .5), 0 0 26px -8px var(--c);
}
.lab-vhead__sw::after {
    content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 4px; border-radius: 4px;
    background: rgba(255, 255, 255, .35);
}
.lab-vhead__t { min-width: 0; }
.lab-vhead__t b { display: block; font: 800 1rem/1.2 'Inter', sans-serif; color: #fff; }
.lab-vhead__t span {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    margin-top: 3px; font-size: .75rem; line-height: 1.35; color: var(--lab-muted);
}
.lab-vhead__vol { font: 800 1.35rem/1 'Inter', sans-serif; color: #fff; font-variant-numeric: tabular-nums; letter-spacing: -.02em; text-align: right; }
.lab-vhead__vol small { font-size: .7rem; font-weight: 600; color: var(--lab-faint); letter-spacing: 0; }

.lab-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.lab-metric {
    min-width: 0; padding: 10px 12px; border-radius: 12px;
    background: rgba(255, 255, 255, .03); border: 1px solid var(--lab-line);
}
.lab-metric--wide { grid-column: 1 / -1; }
.lab-metric__k {
    display: block; margin-bottom: 7px;
    font: 750 .6rem/1 'Inter', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--lab-faint);
}
.lab-metric__v { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; font-size: .8rem; font-weight: 600; color: var(--lab-ink); }
.lab-metric__v em { font-style: normal; color: var(--lab-faint); font-weight: 500; }
.lab-metric__v--num { font: 800 1.05rem/1.1 'Inter', sans-serif; font-variant-numeric: tabular-nums; }
.lab-metric__v--num.is-hot { color: #FDA4AF; }
.lab-metric__v--seq b { color: var(--lab-faint); font-weight: 600; }
.lab-pill {
    display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
    padding: 4px 9px 4px 6px; border-radius: 8px;
    background: rgba(255, 255, 255, .06); font-size: .75rem; font-weight: 600; line-height: 1.25;
}
.lab-pill:not(:has(i)) { padding-left: 9px; }
.lab-pill i {
    flex: none; width: 12px; height: 12px; border-radius: 4px; background: var(--c);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25), 0 0 8px -2px var(--c);
}
.lab-pill small { color: var(--lab-muted); font-weight: 600; }
.lab-seq { padding: 3px 7px; border-radius: 6px; background: rgba(255, 255, 255, .06); font-weight: 700; font-size: .78rem; }

/* Шкала pH. */
.lab-ph { padding: 12px 16px 16px; }
.lab-ph__head { display: flex; align-items: baseline; justify-content: space-between; }
.lab-ph__head span { font: 750 .6rem/1 'Inter', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--lab-faint); }
.lab-ph__head b { font: 850 1.4rem/1 'Inter', sans-serif; color: var(--lab-gold-ink); font-variant-numeric: tabular-nums; }
.lab-ph__scale {
    position: relative; height: 10px; border-radius: 99px; margin-top: 10px;
    background: linear-gradient(90deg, #E0453C, #F5A623, #F2D02C, #4CAF50, #2F8FD0, #6A3FB5);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35);
}
.lab-ph__pin {
    position: absolute; top: -6px; width: 22px; height: 22px; margin-left: -11px;
    border-radius: 50%; background: #fff; border: 4px solid #0A111D;
    box-sizing: border-box; box-shadow: 0 0 0 2px rgba(255, 255, 255, .9), 0 4px 10px rgba(0, 0, 0, .6);
    transition: left .35s var(--lab-ease);
}
.lab-ph__ends { display: flex; justify-content: space-between; margin-top: 8px; font-size: .64rem; font-weight: 600; color: var(--lab-faint); }

.lab-panel__head--sub { border-top: 1px solid var(--lab-line); padding-top: 13px; }

/* Все реакции выбранного сосуда. */
.lab-reactions, .lab-journal__list { overflow-y: auto; overscroll-behavior: contain; }
.lab-reactions { padding: 0 12px 12px; }
.lab-react {
    display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: start;
    padding: 10px 4px; border-top: 1px solid var(--lab-line);
}
.lab-react:first-child { border-top: 0; }
.lab-react__n {
    width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center;
    background: var(--lab-raise-2); color: var(--lab-ink-2);
    font: 800 .7rem/1 'Inter', sans-serif;
}
.lab-react--precipitate .lab-react__n { background: rgba(139, 92, 246, .2); color: #C4B5FD; }
.lab-react--gas .lab-react__n, .lab-react--boom .lab-react__n { background: rgba(14, 165, 233, .2); color: #7DD3FC; }
.lab-react--color .lab-react__n { background: rgba(245, 166, 35, .2); color: #FCD38A; }
.lab-react--heat .lab-react__n { background: rgba(244, 63, 94, .2); color: #FDA4AF; }
.lab-react__body { min-width: 0; }
.lab-react__text { margin: 2px 0 0; font-size: .82rem; font-weight: 550; line-height: 1.45; color: var(--lab-ink); }

.lab-react__eq, .lab-entry__eq {
    margin-top: 7px; padding: 8px 10px; border-radius: 10px;
    background: rgba(2, 6, 14, .5); border: 1px solid var(--lab-line);
    font: 550 .78rem/1.55 'Inter', sans-serif; color: #F1F5FB;
    overflow-x: auto; white-space: nowrap;
}
.lab-react__eq--ion { color: var(--lab-ink-2); background: rgba(2, 6, 14, .3); }

/* Журнал опыта. */
.lab-journal__list { padding: 0 12px 14px; }
.lab-entry {
    position: relative; padding: 11px 12px 12px 14px; margin-bottom: 8px;
    border: 1px solid var(--lab-line); border-radius: 14px;
    background: rgba(255, 255, 255, .03);
    animation: lab-in .35s var(--lab-ease) both;
}
.lab-entry::before {
    content: ""; position: absolute; left: -1px; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0;
    background: var(--k, var(--lab-faint));
}
.lab-entry:nth-child(2) { animation-delay: .05s; }
.lab-entry:nth-child(3) { animation-delay: .1s; }
.lab-entry__act { font: 650 .7rem/1.3 'Inter', sans-serif; color: var(--lab-faint); font-variant-numeric: tabular-nums; }
.lab-entry__obs { margin: 5px 0 0; font-size: .86rem; font-weight: 600; line-height: 1.45; color: var(--lab-ink); }
.lab-entry__eq span { display: block; }
.lab-entry__eq i {
    font-style: normal; margin-right: 8px;
    font-size: .6rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--lab-faint);
}
.lab-entry--gas { --k: #38BDF8; }
.lab-entry--boom { --k: #38BDF8; }
.lab-entry--precipitate { --k: #A78BFA; }
.lab-entry--color { --k: var(--lab-gold); }
.lab-entry--heat { --k: var(--lab-bad); }
.lab-entry--dissolve { --k: var(--lab-ok); }
.lab-entry--mirror { --k: #CBD5E1; }
.lab-entry--note { --k: var(--lab-faint); }

@keyframes lab-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ——————————————— Стекло: анимации ——————————————— */

/*
  Точка отсчёта для превращений внутри рисунка.

  По умолчанию CSS считает transform-origin от системы координат всего
  SVG, а не от самой фигуры. Из-за этого scale() у пузырька не просто
  менял размер, а сдвигал его к центру рисунка и обратно — сильнее, чем
  поднимал translateY. Пузырьки в пробирке из-за этого ехали вниз.
  transform-box: fill-box заставляет считать от самой фигуры.
*/
.lab-bubble, .lab-puff, .lab-boom {
    transform-box: fill-box;
    transform-origin: center;
}
.lab-flame {
    transform-box: fill-box;
    transform-origin: 50% 100%;
}

/* Высота подъёма пузырька — по высоте раствора в этом сосуде. */
/* Пузырёк держит плотность почти весь подъём и гаснет у поверхности:
   при плавном затухании по всей высоте он казался полупрозрачным и
   газ выглядел слабым. */
@keyframes lab-bubble {
    0% { transform: translateY(0) scale(.45); opacity: 0; }
    10% { opacity: 1; }
    78% { opacity: 1; transform: translateY(calc(var(--rise, -58px) * .82)) scale(1.05); }
    100% { transform: translateY(var(--rise, -58px)) scale(1.3); opacity: 0; }
}
.lab-bubble { animation: lab-bubble 1.5s linear infinite; }

/* Облако газа над горлом сосуда. */
@keyframes lab-puff {
    0% { transform: translateY(8px) scale(.7); opacity: 0; }
    25% { opacity: .55; }
    100% { transform: translateY(-15px) scale(1.4); opacity: 0; }
}
.lab-puff { animation: lab-puff 2.8s ease-out infinite; }

/* Хлопок при поджигании водорода. */
@keyframes lab-boom {
    0% { opacity: 0; transform: scale(.35); }
    30% { opacity: 1; transform: scale(1.05); }
    100% { opacity: 0; transform: scale(1.7); }
}
.lab-boom { animation: lab-boom .7s ease-out forwards; transform-origin: 50% 18%; }

@keyframes lab-flame {
    0%, 100% { transform: scaleY(1) translateY(0); opacity: .95; }
    50% { transform: scaleY(1.12) translateY(-2px); opacity: 1; }
}
.lab-flame { animation: lab-flame .7s ease-in-out infinite; transform-origin: 50% 100%; }


.lab-liquid { transition: height .5s var(--lab-ease), y .5s var(--lab-ease), fill .5s var(--lab-ease); }
.lab-sediment { transition: height .45s var(--lab-ease), y .45s var(--lab-ease), fill .45s var(--lab-ease); }

@media (prefers-reduced-motion: reduce) {
    .lab-bubble, .lab-flame, .lab-stream, .lab-puff, .lab-boom, .lab-slot.is-target { animation: none; }
    .lab-liquid, .lab-sediment, .lab-entry, .lab-glass { transition: none; animation: none; }
}

/* ——————————————— Всплывающая подсказка ——————————————— */

.lab-toast {
    position: fixed; left: 50%; transform: translateX(-50%); z-index: 9400;
    bottom: calc(22px + env(safe-area-inset-bottom));
    max-width: calc(100vw - 32px); box-sizing: border-box;
    padding: 12px 18px; border-radius: 14px;
    background: rgba(20, 33, 54, .92); color: #fff; border: 1px solid rgba(255, 255, 255, .14);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    box-shadow: 0 22px 44px -18px rgba(0, 0, 0, .9);
    font: 650 .84rem/1.35 'Inter', sans-serif; text-align: center;
    animation: lab-in .25s var(--lab-ease);
}
.lab-toast[hidden] { display: none; }

/* ============================================================
   Компьютер: колонки прилипают и листаются внутри себя

   Окно лаборатории не уезжает вместе со страницей: библиотека и
   инспектор занимают высоту экрана, а длинный список реактивов и
   журнал прокручиваются каждый в своей колонке, как панели в
   профессиональном редакторе.
   ============================================================ */

/* Описание под заголовком — там, где экран высокий и ему есть место. */
@media (min-width: 901px) and (min-height: 1000px) {
    .lab-bar__sub { display: block; }
}

@media (min-width: 1281px) {
    .lab-panel--shelf, .lab-side {
        position: sticky; top: calc(var(--lab-top) + 4px);
        height: calc(100vh - var(--lab-top) - 20px);
        height: calc(100dvh - var(--lab-top) - 20px);
        max-height: 900px;
    }
    .lab-panel--shelf { display: flex; flex-direction: column; }
    .lab-shelf { flex: 1 1 auto; min-height: 0; }
    .lab-side > .lab-inspector { flex: 1 1 auto; min-height: 0; }
    .lab-reactions, .lab-journal__list { flex: 1 1 auto; min-height: 0; }
}

/* ——— Ноутбук и планшет: библиотека слева, стол и инспектор справа ——— */
@media (min-width: 901px) and (max-width: 1280px) {
    .lab-grid {
        grid-template-columns: 300px minmax(0, 1fr);
        grid-template-areas: "shelf bench" "shelf side";
    }
    .lab-panel--shelf {
        position: sticky; top: calc(var(--lab-top) + 4px);
        display: flex; flex-direction: column;
        height: calc(100vh - var(--lab-top) - 20px);
        height: calc(100dvh - var(--lab-top) - 20px);
    }
    .lab-shelf { flex: 1 1 auto; min-height: 0; }
    .lab-reactions, .lab-journal__list { max-height: 440px; }
    .lab-bar { grid-template-columns: auto 1fr; grid-template-areas: "brand acts" "stats stats" "sub sub"; }
    .lab-bar__acts { justify-self: end; }
    .lab-bar__stats { justify-self: start; }
    .lab-stand { min-height: 380px; }
}

/* ============================================================
   Телефон

   Стол закреплён под меню сайта и виден всегда, сосуды стоят лентой
   вбок. Внизу экрана — панель вкладок, как в приложении: «Реактивы»,
   «Сосуд», «Журнал»; под столом видна та панель, что выбрана.
   Результат каждого действия всплывает строкой над панелью вкладок,
   так что за ним не нужно переключаться.
   ============================================================ */

@media (max-width: 900px) {
    .lab-root { padding: 0 10px calc(92px + env(safe-area-inset-bottom)); }
    .lab-grid { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
    .lab-grid > * { min-width: 0; max-width: 100%; }
    .lab-side > * { min-width: 0; }
    .lab-bench { order: 1; }
    .lab-side { display: contents; }
    .lab-side > .lab-inspector { order: 2; }
    .lab-panel--shelf { order: 3; }
    .lab-itabs { display: none; }

    /* Шапка — одна строка: экран нужен опыту, а не описанию. */
    .lab-bar {
        grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "brand acts";
        gap: 10px; padding: 2px 2px 12px;
    }
    .lab-bar__stats, .lab-bar__sub { display: none; }
    .lab-bar__logo { width: 38px; height: 38px; border-radius: 12px; }
    .lab-bar__logo svg { width: 20px; height: 20px; }
    .lab-bar__brand { gap: 10px; }
    .lab-bar__kicker { font-size: .58rem; margin-bottom: 4px; }
    .lab-bar__title { font-size: 1.14rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .lab-bar__acts { gap: 6px; }
    .lab-btn { width: 40px; padding: 0; justify-content: center; }
    .lab-btn--course { width: auto; padding: 0 11px; gap: 6px; }
    .lab-btn__more { display: none; }
    .lab-btn span { display: none; }

    /* Стол прилипает под верхним меню сайта. */
    .lab-bench { position: sticky; top: calc(var(--hp-bar-h, 62px) + 6px); z-index: 16; border-radius: 20px; }
    /* Заголовок «Стол» на телефоне лишний, а каждые 40 px высоты здесь
       на счету: подсказки к приборам всплывают строкой внизу. */
    .lab-bench__top { display: none; }

    .lab-stand {
        justify-content: flex-start; min-height: 0; gap: 4px; padding: 8px 8px 0;
    }
    .lab-stand::-webkit-scrollbar { height: 0; }
    .lab-slot { width: 128px; padding: 6px 4px 8px; border-radius: 16px; }
    .lab-slot__label { font-size: .68rem; gap: 4px; margin-bottom: 2px; }
    .lab-slot__label small { display: none; }
    .lab-slot__glass { --base: 27px; }
    .lab-glass { height: 142px; margin-top: 4px; }
    .lab-slot__mirror { display: none; }
    .lab-slot__pool { height: 90px; }
    .lab-slot__note { margin-top: 8px; max-width: 120px; min-height: 0; font-size: .62rem; line-height: 1.25; -webkit-line-clamp: 3; }
    .lab-slot:hover .lab-glass { transform: none; }

    /* Инструменты — лентой, плитки компактнее. */
    .lab-tools {
        flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
        margin: 0 8px 8px; padding: 8px; gap: 10px; border-radius: 16px;
        scrollbar-width: none;
    }
    .lab-tools::-webkit-scrollbar { height: 0; }
    .lab-tools__group { flex: none; flex-wrap: nowrap; gap: 5px; }
    .lab-tools__group > .lab-tool { flex: 0 0 auto; }
    .lab-tools__group--glass .lab-tool { flex-direction: column; min-height: 56px; padding: 8px 9px 7px; gap: 5px; font-size: .62rem; }
    .lab-tools__group--glass .lab-tool::before { content: none; }
    .lab-tools__group::before { display: none; }
    .lab-tools__group--glass { margin-left: 0; padding-left: 10px; border-left: 1px solid var(--lab-line); }
    .lab-tool { flex: 0 0 auto; width: auto; min-width: 62px; min-height: 56px; padding: 8px 9px 7px; gap: 5px; font-size: .62rem; white-space: nowrap; }
    .lab-tool svg { width: 18px; height: 18px; }

    /* Под столом видна ровно одна панель — выбранная внизу. */
    .lab-root[data-tab="shelf"] #labVesselCard,
    .lab-root[data-tab="shelf"] #labLogCard,
    .lab-root[data-tab="vessel"] .lab-panel--shelf,
    .lab-root[data-tab="vessel"] #labLogCard,
    .lab-root[data-tab="log"] .lab-panel--shelf,
    .lab-root[data-tab="log"] #labVesselCard { display: none; }
    .lab-root[data-tab="vessel"] #labVesselCard,
    .lab-root[data-tab="log"] #labLogCard { display: flex; }

    /* На телефоне никакой вложенной прокрутки: страница листается целиком.
       Иначе палец попадает в список со своей прокруткой, и кажется, что
       листается только верх. */
    .lab-shelf, .lab-reactions, .lab-journal__list { max-height: none; overflow: visible; overscroll-behavior: auto; }
    .lab-panel { border-radius: 18px; }
    .lab-chips {
        flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
        margin: 0; padding: 2px 12px 12px;
    }
    .lab-chips::-webkit-scrollbar { height: 0; }
    .lab-chip { flex: 0 0 auto; height: 34px; }
    .lab-search input { height: 44px; font-size: 16px; } /* 16px — иначе iOS увеличивает страницу при фокусе */
    .lab-reagent { padding: 8px 8px 8px 6px; }
    .lab-reagent__formula { font-size: 1rem; }

    /* Нижняя панель вкладок. */
    .lab-tabs {
        display: grid; grid-template-columns: repeat(3, 1fr);
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 9300;
        padding: 6px 10px calc(6px + env(safe-area-inset-bottom));
        background: rgba(10, 17, 29, .86);
        -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
        border-top: 1px solid rgba(255, 255, 255, .09);
        box-shadow: 0 -18px 40px -24px rgba(0, 0, 0, .9);
    }
    .lab-tab {
        position: relative;
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
        height: 54px; border: 0; border-radius: 14px; cursor: pointer;
        background: transparent; color: var(--lab-muted);
        font: 700 .66rem/1 'Inter', sans-serif; letter-spacing: .01em;
        transition: color .18s, background .18s;
    }
    .lab-tab svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
    .lab-tab[aria-selected="true"] { color: var(--lab-gold-ink); background: rgba(245, 166, 35, .12); }
    .lab-tab[aria-selected="true"] svg { stroke: var(--lab-gold); }
    .lab-tab__dot {
        position: absolute; top: 9px; left: calc(50% + 9px);
        width: 8px; height: 8px; border-radius: 50%;
        background: var(--lab-bad); box-shadow: 0 0 0 2px #0A111D;
    }
    .lab-tab__dot[hidden] { display: none; }

    .lab-toast { bottom: calc(80px + env(safe-area-inset-bottom)); }
    /* Сообщение о cookie сайта — над панелью вкладок, а не поверх неё. */
    .lab-page .hp-cookie { bottom: calc(80px + env(safe-area-inset-bottom)); }
}

@media (max-width: 380px) {
    .lab-slot { width: 116px; }
    .lab-glass { height: 128px; }
    .lab-slot__note { max-width: 108px; }
    .lab-bar__kicker { display: none; }
}