/* Прототип нового интерфейса тестовой студии (lab v2).
 *
 * Это надстройка над текущей lab: разметка и stencil.js остаются прежними,
 * а экран перестраивается в «холст + всплывающие панели». Стили ограничены
 * #stencil-app.lab-v2, поэтому /studio/lab/ и основная студия не меняются.
 */

body.lab-v2-page {
    background: #121417;
    color: #f3efe6;
}

body.lab-v2-page .site-header,
body.lab-v2-page .site-footer,
body.lab-v2-page .maintenance-bar {
    display: none !important;
}

body.lab-v2-page .site-shell,
body.lab-v2-page .page-shell {
    min-height: 100vh;
    min-height: 100dvh;
    padding: 0 !important;
    background: transparent;
}

#stencil-app.lab-v2 {
    --v2-bg: #121417;
    --v2-panel: #191d22;
    --v2-panel-2: #20262c;
    --v2-border: #2d343c;
    --v2-text: #f3efe6;
    --v2-muted: #98a2ad;
    --v2-gold: #e6b34a;
    --v2-gold-soft: rgba(230, 179, 74, .13);
    --v2-topbar: calc(4.25rem + env(safe-area-inset-top, 0px));

    min-height: 100vh;
    min-height: 100dvh;
    padding: calc(var(--v2-topbar) + .9rem) 1rem 4rem;
    max-width: 1440px;
    margin: 0 auto;
    color: var(--v2-text);
    background:
        radial-gradient(1100px 520px at 50% -12%, #20272f 0%, transparent 60%),
        var(--v2-bg);
}

#stencil-app.lab-v2 * {
    box-sizing: border-box;
}

/* Старые шапка-заголовок и тестовая плашка: их роль играет новое меню. */
#stencil-app.lab-v2 .stencil-lab-banner,
#stencil-app.lab-v2 .stencil-page-header {
    display: none !important;
}

/* ------------------------------------------------------------------ topbar */
#stencil-app.lab-v2 .v2-topbar {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 1150;
    height: var(--v2-topbar);
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0 1.25rem;
    padding-top: env(safe-area-inset-top, 0px);
    background: rgba(18, 20, 23, .94);
    border-bottom: 1px solid var(--v2-border);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

#stencil-app.lab-v2 .v2-brand {
    display: flex;
    align-items: center;
    gap: .65rem;
    min-width: 0;
}

#stencil-app.lab-v2 .v2-logo {
    width: 2rem;
    height: 2rem;
    border-radius: .65rem;
    display: grid;
    place-items: center;
    background: var(--v2-gold);
    color: #17130a;
    font-weight: 800;
    font-size: .8rem;
    letter-spacing: -.02em;
    flex: 0 0 auto;
}

#stencil-app.lab-v2 .v2-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
    min-width: 0;
    font-family: var(--font-heading, sans-serif);
}

#stencil-app.lab-v2 .v2-brand-text strong {
    font-size: .95rem;
    white-space: nowrap;
}

#stencil-app.lab-v2 .v2-brand-text small {
    color: var(--v2-gold);
    font-size: .58rem;
    letter-spacing: .18em;
    font-weight: 700;
}

#stencil-app.lab-v2 .v2-tabs {
    display: flex;
    align-items: center;
    gap: .25rem;
    padding: .22rem;
    border: 1px solid var(--v2-border);
    border-radius: 999px;
    background: rgba(255, 255, 255, .025);
}

#stencil-app.lab-v2 .v2-tab {
    border: 0;
    border-radius: 999px;
    padding: .45rem .9rem;
    background: transparent;
    color: var(--v2-muted);
    font: inherit;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

#stencil-app.lab-v2 .v2-tab:hover {
    color: var(--v2-text);
}

#stencil-app.lab-v2 .v2-tab.is-active {
    color: #17130a;
    background: var(--v2-gold);
}

#stencil-app.lab-v2 .v2-actions {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-left: auto;
    min-width: 0;
}

#stencil-app.lab-v2 .v2-btn,
#stencil-app.lab-v2 .v2-icon,
#stencil-app.lab-v2 .v2-link {
    font: inherit;
    font-size: .8rem;
    line-height: 1;
    border-radius: .65rem;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
}

#stencil-app.lab-v2 .v2-btn {
    padding: .55rem .8rem;
    color: var(--v2-text);
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--v2-border);
}

#stencil-app.lab-v2 .v2-btn:hover {
    border-color: #46505a;
    background: rgba(255, 255, 255, .07);
}

#stencil-app.lab-v2 .v2-btn.is-active {
    color: #17130a;
    background: var(--v2-gold);
    border-color: var(--v2-gold);
    font-weight: 700;
}

#stencil-app.lab-v2 .v2-btn.is-active:hover {
    background: #f0c264;
    border-color: #f0c264;
}

#stencil-app.lab-v2 .v2-icon {
    width: 2rem;
    height: 2rem;
    display: grid;
    place-items: center;
    color: var(--v2-muted);
    background: transparent;
    border: 1px solid var(--v2-border);
    font-weight: 700;
}

#stencil-app.lab-v2 .v2-link {
    padding: .45rem .3rem;
    color: var(--v2-muted);
}

#stencil-app.lab-v2 .v2-link:hover {
    color: var(--v2-gold);
}

/* --------------------------------------------------------------- основное */
#stencil-app.lab-v2 .stencil-workspace {
    margin: 0;
}

#stencil-app.lab-v2 .stencil-layout {
    display: block;
}

#stencil-app.lab-v2 .stencil-preview-column {
    position: static !important;
    z-index: auto !important;
    width: 100%;
    max-width: 1040px;
    margin: 0 auto;
}

#stencil-app.lab-v2 .stencil-preview-sticky {
    width: 100%;
}

#stencil-app.lab-v2 .stencil-preview-below {
    margin-top: .9rem;
}

/* Карточка выдачи под холстом: без «панельного» шума. */
#stencil-app.lab-v2 .stencil-download {
    background: var(--v2-panel);
    border: 1px solid var(--v2-border);
    border-radius: 1rem;
    padding: 1rem;
}

#stencil-app.lab-v2 .stencil-download .stencil-section-title {
    color: var(--v2-text);
}

#stencil-app.lab-v2 .stencil-download .btn {
    border-radius: .7rem;
}

/* ------------------------------------------------------------- загрузка */
#stencil-app.lab-v2 .stencil-upload {
    max-width: 860px;
    margin: 4vh auto;
    padding: 2.2rem 1.25rem;
    border: 1px dashed #3a434d;
    border-radius: 1.4rem;
    background:
        radial-gradient(560px 220px at 50% 0, var(--v2-gold-soft), transparent 70%),
        var(--v2-panel);
    box-shadow: 0 30px 90px rgba(0, 0, 0, .28);
}

#stencil-app.lab-v2 .stencil-upload-pick {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .65rem;
    min-width: min(100%, 430px);
    padding: 2.4rem 1.5rem;
    border: 1px dashed #46505a;
    border-radius: 1rem;
    background: rgba(255, 255, 255, .02);
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease;
}

#stencil-app.lab-v2 .stencil-upload-pick:hover {
    border-color: var(--v2-gold);
    background: var(--v2-gold-soft);
}

#stencil-app.lab-v2 .stencil-upload-pick .btn {
    font-size: .95rem;
    padding: .7rem 1.15rem;
    border-radius: .7rem;
}

#stencil-app.lab-v2 .stencil-upload-actions {
    margin-top: .9rem;
}

#stencil-app.lab-v2 .stencil-upload-actions .btn {
    border-radius: .7rem;
}

#stencil-app.lab-v2 .stencil-boot,
#stencil-app.lab-v2 .stencil-upload-status,
#stencil-app.lab-v2 .stencil-remaining,
#stencil-app.lab-v2 .stencil-error {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

/* ------------------------------------------------- выдвижная панель */
#stencil-app.lab-v2 .stencil-settings {
    position: fixed;
    z-index: 1100;
    top: calc(var(--v2-topbar) + .75rem);
    bottom: .75rem;
    left: .75rem;
    width: min(430px, calc(100vw - 1.5rem));
    max-height: none;
    margin: 0;
    padding: 1rem 1rem 1.6rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    border: 1px solid var(--v2-border);
    border-radius: 1rem;
    background: rgba(25, 29, 34, .985);
    box-shadow: 0 30px 90px rgba(0, 0, 0, .55);
    transform: translateX(calc(-100% - 1.5rem));
    transition: transform .22s ease;
    display: block !important;
}

#stencil-app.lab-v2.v2-settings-open .stencil-settings {
    transform: none;
}

#stencil-app.lab-v2 .v2-drawer-head {
    position: sticky;
    top: -.25rem;
    z-index: 6;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    height: 2rem;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    pointer-events: none;
}

#stencil-app.lab-v2 .v2-drawer-head .v2-drawer-close {
    pointer-events: auto;
}

#stencil-app.lab-v2 .v2-drawer-close {
    width: 2rem;
    height: 2rem;
    border-radius: .6rem;
    border: 1px solid var(--v2-border);
    background: rgba(25, 29, 34, .94);
    color: var(--v2-text);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
}

#stencil-app.lab-v2 .v2-drawer-close:hover {
    border-color: var(--v2-gold);
    color: var(--v2-gold);
}

/* В режиме «Настройки печати» старый CSS прячет содержимое панели, кроме
 * print-slot; заголовок панели должен остаться видимым. */
#stencil-app.lab-v2.stencil-print-mode .stencil-settings > .v2-drawer-head {
    display: flex !important;
}

body.lab-v2-page .v2-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: transparent;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
}

body.lab-v2-page .v2-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
}

/* --------------------------------------------------------------- график */
#stencil-app.lab-v2 .stencil-calendar {
    max-width: 1200px;
    margin: 1rem auto 1.4rem;
    padding: 1rem;
    border: 1px solid var(--v2-border);
    border-radius: 1rem;
    background: var(--v2-panel);
}

#stencil-app.lab-v2 .stencil-calendar-head {
    gap: .6rem 1rem;
}

#stencil-app.lab-v2 .stencil-calendar-range {
    color: var(--v2-text);
}

#stencil-app.lab-v2 .stencil-calendar-hint {
    color: var(--v2-muted);
}

#stencil-app.lab-v2 .stencil-cal-table th,
#stencil-app.lab-v2 .stencil-cal-table td {
    border-color: var(--v2-border);
}

#stencil-app.lab-v2 .stencil-cal-cell:hover {
    background: var(--v2-gold-soft);
}

#stencil-app.lab-v2 .stencil-cal-today {
    background: rgba(230, 179, 74, .07);
}

/* В режиме графика студия не мешает: одна задача — один экран. */
#stencil-app.lab-v2.calendar-open .stencil-upload,
#stencil-app.lab-v2.calendar-open .stencil-workspace {
    display: none !important;
}

/* ------------------------------------------------------------- элементы */
#stencil-app.lab-v2 .stencil-field-label {
    color: var(--v2-muted);
}

#stencil-app.lab-v2 .stencil-hint,
#stencil-app.lab-v2 .stencil-sub-hint {
    color: var(--v2-muted);
}

#stencil-app.lab-v2 .btn-outline {
    border-color: var(--v2-border);
    color: var(--v2-text);
}

#stencil-app.lab-v2 .btn-outline:hover {
    border-color: var(--v2-gold);
    color: var(--v2-gold);
}

#stencil-app.lab-v2 .stencil-segment {
    border-radius: .55rem;
}

#stencil-app.lab-v2 .stencil-segment.is-active,
#stencil-app.lab-v2 .stencil-segment.active {
    border-color: var(--v2-gold);
    background: var(--v2-gold-soft);
    color: var(--v2-gold);
}

/* ------------------------------------------------------------- телефоны */
/* Телефон и планшет: настройки — нижняя половина экрана, верхняя остаётся
   для обзора картинки. Фон не затемняем, чтобы превью было видно. */
@media (max-width: 991.98px) {
    #stencil-app.lab-v2 .stencil-settings {
        top: auto;
        left: .5rem;
        right: .5rem;
        bottom: calc(.5rem + env(safe-area-inset-bottom, 0px));
        width: auto;
        height: 50vh;
        height: 50dvh;
        max-height: 50vh;
        max-height: 50dvh;
        border-radius: 1rem 1rem .75rem .75rem;
        transform: translateY(calc(100% + 1rem));
    }

    #stencil-app.lab-v2.v2-settings-open .stencil-settings {
        transform: none;
    }

    body.lab-v2-page .v2-backdrop {
        background: transparent;
    }
}

@media (max-width: 767.98px) {
    #stencil-app.lab-v2 {
        padding: calc(var(--v2-topbar) + .55rem) .55rem 3rem;
    }

    #stencil-app.lab-v2 .v2-topbar {
        gap: .45rem;
        padding: 0 .55rem;
    }

    #stencil-app.lab-v2 .v2-brand-text,
    #stencil-app.lab-v2 .v2-link {
        display: none;
    }

    #stencil-app.lab-v2 .v2-tabs {
        padding: .18rem;
    }

    #stencil-app.lab-v2 .v2-tab,
    #stencil-app.lab-v2 .v2-btn {
        padding: .45rem .55rem;
        font-size: .76rem;
    }

    #stencil-app.lab-v2 .v2-icon {
        width: 1.8rem;
        height: 1.8rem;
    }

    #stencil-app.lab-v2 .stencil-upload {
        margin: 2vh auto;
        padding: 1.2rem .8rem;
    }

    #stencil-app.lab-v2 .stencil-upload-pick {
        min-width: 100%;
        padding: 1.8rem 1rem;
    }

    #stencil-app.lab-v2 .stencil-calendar {
        margin: .7rem auto 1rem;
        padding: .7rem;
        border-radius: .8rem;
    }

    #stencil-app.lab-v2 .stencil-calendar-head {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (max-width: 380px) {
    #stencil-app.lab-v2 .v2-tab,
    #stencil-app.lab-v2 .v2-btn {
        padding: .4rem .45rem;
        font-size: .72rem;
    }
}


/* В v2 не показываем старую памятку, отзывы и служебную шестерёнку:
   у прототипа своё меню и своя навигация. */
body.lab-v2-page #intro-modal,
body.lab-v2-page .stencil-reviews-wrap,
body.lab-v2-page .staff-tools {
    display: none !important;
}

/* Экран загрузки — по центру окна, как стартовый экран приложения. */
#stencil-app.lab-v2 .stencil-upload {
    min-height: calc(100vh - var(--v2-topbar) - 2.5rem);
    min-height: calc(100dvh - var(--v2-topbar) - 2.5rem);
    justify-content: center;
}

/* Внутри нового приложения свои панели: нижнюю панель Телеграма и
   значок чата не показываем. */
body.lab-v2-page .tg-tabbar,
body.lab-v2-page .rabbit-tools {
    display: none !important;
}

#stencil-app.lab-v2 .v2-btn:disabled {
    opacity: .42;
    cursor: not-allowed;
}


/* Подсказки и модальные окна должны быть выше выдвижной панели. */
body.lab-v2-page .stencil-tip {
    z-index: 1300;
}
body.lab-v2-page .stencil-text-modal {
    z-index: 1200;
}

/* На телефоне подсказка — компактное облачко, а не половина экрана. */
@media (max-width: 991.98px) {
    body.lab-v2-page .stencil-tip {
        max-width: calc(100vw - 24px);
        max-height: 32vh;
        overflow: auto;
    }
}

/* Памятка по кнопке «?»: обычное окно, не нижняя шторка настроек. */
body.lab-v2-page #intro-modal {
    display: none !important;
}
body.lab-v2-page.v2-help-open #intro-modal {
    display: flex !important;
    z-index: 1300;
}
body.lab-v2-page.v2-help-open #intro-modal .stencil-text-modal-card {
    max-height: 90vh;
}

/* В шапке панели — только крестик. Печать живёт внутри блока печати. */
#stencil-app.lab-v2 .v2-print-action {
    display: none;
    width: 100%;
    margin: 0 0 .9rem;
    padding: .75rem 1rem;
    border: 1px solid var(--v2-gold);
    border-radius: .7rem;
    background: var(--v2-gold);
    color: #17130a;
    font: inherit;
    font-size: .92rem;
    font-weight: 700;
    cursor: pointer;
}
#stencil-app.lab-v2.stencil-print-mode .v2-print-action {
    display: block;
}
/* В режиме печати в панели только печать, без кнопок замены картинки. */
#stencil-app.lab-v2.stencil-print-mode .stencil-settings .stencil-change-block {
    display: none !important;
}

/* Внутри Telegram у .page-shell есть анимация с transform — она ломает
   position: fixed у панели настроек (панель считается от всей страницы и
   уезжает вниз). На странице v2 анимацию отключаем. */
html.tg-context body.lab-v2-page .page-shell {
    animation: none !important;
    transform: none !important;
}
html.tg-context body.lab-v2-page {
    padding-bottom: 0;
}


/* Возврат на главную: на сайте — на главную, в приложении — на экран /tg/. */
#stencil-app.lab-v2 .v2-home {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}
#stencil-app.lab-v2 .v2-home-icon {
    font-size: 1rem;
    line-height: 1;
}
#stencil-app.lab-v2 .v2-home:hover {
    color: var(--v2-gold);
}

@media (max-width: 767.98px) {
    #stencil-app.lab-v2 .v2-home {
        display: inline-flex !important;
        padding: .45rem .25rem;
    }
    #stencil-app.lab-v2 .v2-home-label {
        display: none;
    }
}