/* ==========================================================
   ЛИСТИК
   style.css
   Чистая версия
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');


/* ==========================================================
   ПЕРЕМЕННЫЕ
   ========================================================== */

:root {

    --color-bg: #ffffff;
    --color-surface: #ffffff;

    --color-primary: #5aa56b;
    --color-primary-hover: #4d955e;
    --color-primary-light: #e8f4e9;

    --color-text: #28302b;
    --color-text-light: #737a75;

    --color-border: #e3e6e3;

    --radius-s: 14px;
    --radius-m: 20px;
    --radius-l: 28px;

    --shadow:
        0 10px 35px rgba(40, 60, 45, 0.08);

    --shadow-hover:
        0 14px 40px rgba(40, 60, 45, 0.13);

    --transition:
        0.2s ease;

    --max-card-width: 620px;
}


/* ==========================================================
   ОСНОВА
   ========================================================== */

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


html {
    font-size: 16px;
    -webkit-tap-highlight-color: transparent;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}


html,
body {
    width: 100%;
    min-height: 100%;
}


body {
    font-family:
        "Manrope",
        sans-serif;

    background:
        #ffffff;

    color:
        var(--color-text);

    min-height: 100vh;
    min-height: 100dvh;

    overflow-x: hidden;
}


/* ==========================================================
   ПРИЛОЖЕНИЕ
   ========================================================== */

#app {
    width: 100%;

    min-height: 100vh;
    min-height: 100dvh;
}


/* ==========================================================
   ЭКРАНЫ
   ========================================================== */

.screen {
    width: 100%;

    min-height: 100vh;
    min-height: 100dvh;

    animation:
        fadeUp 0.35s ease;
}


/* ==========================================================
   ОБЩАЯ КАРТОЧКА
   ========================================================== */

.card {
    width: 100%;
    max-width: var(--max-card-width);

    margin: 0 auto;

    background:
        var(--color-surface);

    border-radius:
        var(--radius-l);

    padding:
        40px 28px;

    box-shadow:
        var(--shadow);
}


/* ==========================================================
   ЛОГОТИП
   ========================================================== */

.brand-logo {
    width: 150px;
    height: 150px;

    object-fit: contain;

    display: block;
    margin: 0 auto;

    animation:
        leafFloat 4s ease-in-out infinite;

    transform-origin:
        center bottom;
}


.brand-logo:hover {
    animation:
        leafHappy 1.5s ease;
}


/* ==========================================================
   СТАРЫЙ ЭКРАН АВТОРИЗАЦИИ
   ========================================================== */

h1 {
    text-align: center;

    font-size: 2rem;

    font-weight: 700;
}


.subtitle {
    text-align: center;

    color:
        var(--color-text-light);

    margin-top: 8px;
    margin-bottom: 36px;

    line-height: 1.5;
}


form {
    display: flex;

    flex-direction: column;

    gap: 18px;
}


label {
    display: flex;

    flex-direction: column;

    gap: 8px;

    font-size: 0.95rem;
}


label span {
    font-weight: 600;
}


/* ==========================================================
   INPUT
   ========================================================== */

input[type="text"],
input[type="password"] {
    height: 54px;

    border-radius: 16px;

    border:
        1px solid var(--color-border);

    padding:
        0 16px;

    font-family:
        inherit;

    font-size: 1rem;

    background:
        white;

    transition:
        var(--transition);
}


input:focus {
    outline: none;

    border-color:
        var(--color-primary);

    box-shadow:
        0 0 0 4px
        rgba(77, 139, 91, 0.12);
}


/* ==========================================================
   ЗАПОМНИТЬ
   ========================================================== */

.remember {
    flex-direction: row;

    align-items: center;

    gap: 10px;

    color:
        var(--color-text-light);

    margin-top: 4px;
}


/* ==========================================================
   ОБЩИЕ КНОПКИ
   ========================================================== */

button {
    font-family:
        inherit;

    border: none;

    cursor: pointer;

    -webkit-tap-highlight-color:
        transparent;
}


button:focus-visible {
    outline:
        3px solid
        rgba(90, 165, 107, 0.35);

    outline-offset:
        3px;
}


/* ==========================================================
   КНОПКА АВТОРИЗАЦИИ
   ========================================================== */

form button {
    margin-top: 8px;

    height: 56px;

    border-radius:
        18px;

    background:
        var(--color-primary);

    color:
        white;

    font-size:
        1rem;

    font-weight:
        700;

    transition:
        var(--transition);
}


form button:hover {
    background:
        var(--color-primary-hover);
}


form button:active {
    transform:
        scale(0.98);
}


/* ==========================================================
   ГЛАВНЫЙ ЭКРАН
   ========================================================== */

.home-screen {
    width: 100%;

    min-height: 100vh;
    min-height: 100dvh;

    padding: 0;

    display: flex;

    justify-content: center;

    align-items: flex-start;

    background:
        var(--color-surface);
}


/* ==========================================================
   ГЛАВНАЯ КАРТОЧКА
   ========================================================== */

.home-card {
    width: 100%;

    max-width:
        var(--max-card-width);

    min-height: 100vh;
    min-height: 100dvh;

    padding:
        28px 24px 40px;

    margin: 0;

    border-radius: 0;

    background:
        var(--color-surface);

    box-shadow: none;
}


/* ==========================================================
   ШАПКА
   ========================================================== */

.home-header {
    position: relative;

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    /*
     * Именно эти два значения регулируют
     * расстояние перед зелёной кнопкой.
     */
    min-height: 90px;

    margin-bottom: 4px;
}


/* ==========================================================
   ЛОГО + ПРИВЕТСТВИЕ
   ========================================================== */

.brand-row {
    width: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 18px;
}


.home-logo {
    width: 92px;
    height: 92px;

    margin: 0;

    flex-shrink: 0;
}


.brand-copy {
    flex: 0 1 auto;

    min-width: 0;
}


.brand-copy h1 {
    margin: 0;

    text-align: left;

    font-size: 2.5rem;

    line-height: 1.05;

    font-weight: 800;

    letter-spacing: -0.04em;
}


.home-subtitle {
    margin-top: 10px;

    font-size: 1.05rem;

    color:
        var(--color-text-light);

    line-height: 1.4;
}


/* ==========================================================
   КНОПКА ВЫХОДА
   ========================================================== */

.icon-button {
    position: absolute;

    top: 4px;
    right: 0;

    width: 54px;
    height: 54px;

    margin: 0;

    padding: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:
        #eef5ef;

    color:
        #4d8b5b;

    font-size:
        1.4rem;

    transition:
        var(--transition);
}


.icon-button:hover {
    background:
        #e5f0e7;

    transform:
        rotate(-8deg);
}


.icon-button:active {
    transform:
        scale(0.94);
}


/* ==========================================================
   БЛОК ДЕЙСТВИЙ
   ========================================================== */

.action-grid {
    width: 100%;

    display: grid;

    grid-template-columns:
        1fr;

    gap:
        14px;

    /*
     * Расстояние после PDF/Галереи
     * перед списком домашних работ.
     */
    margin-top: 0;

    margin-bottom: 6px;
}


/* ==========================================================
   ВСЕ ACTION-КАРТОЧКИ
   ========================================================== */

.action-card {
    width: 100%;

    margin: 0;

    border-radius:
        24px;

    background:
        #f3f5f2;

    color:
        var(--color-text);

    text-align:
        left;

    transition:
        transform var(--transition),
        box-shadow var(--transition),
        background var(--transition);
}


.action-card:hover {
    transform:
        translateY(-2px);

    box-shadow:
        var(--shadow-hover);
}


.action-card:active {
    transform:
        scale(0.985);
}


/* ==========================================================
   БОЛЬШАЯ КНОПКА «СДЕЛАТЬ ФОТО»
   ========================================================== */

.action-camera {
    width: 100%;

    min-height: 145px;
    height: 145px;

    margin: 0;

    padding:
        20px 24px;

    border: none;

    border-radius:
        24px;

    display: flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    justify-content:
        center;

    text-align:
        left;

    background:
        #5daf6d;

    color:
        white;
}


.action-camera:hover {
    background:
        #65b775;
}


.action-camera .action-icon {
    margin-bottom:
        12px;

    font-size:
        2rem;

    line-height:
        1;
}


.action-camera .action-title {
    font-size:
        1.25rem;

    font-weight:
        700;
}


/*
 * Описательный текст под кнопкой
 * полностью убран.
 */

.action-camera .action-text {
    display: none;
}


/* ==========================================================
   ОБЩИЙ ТЕКСТ ACTION-КАРТОЧЕК
   ========================================================== */

.action-content {
    display:
        flex;

    flex-direction:
        column;

    gap:
        6px;
}


.action-title {
    font-size:
        1.1rem;

    line-height:
        1.25;

    font-weight:
        800;
}


.action-text {
    font-size:
        0.82rem;

    line-height:
        1.4;

    font-weight:
        500;

    opacity:
        0.82;
}


/* ==========================================================
   PDF + ГАЛЕРЕЯ
   ========================================================== */

.action-side {
    width: 100%;

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        12px;

    margin: 0;
}


.action-side .action-card {
    width: 100%;

    min-height: 110px;
    height: 110px;

    margin: 0;

    padding:
        16px;

    border: none;

    border-radius:
        22px;

    display: flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    justify-content:
        space-between;

    text-align:
        left;

    background:
        white;

    color:
        var(--color-text);

    box-shadow:
        0 5px 20px
        rgba(0, 0, 0, 0.06);
}


.action-side .action-icon {
    font-size:
        1.5rem;

    line-height:
        1;
}


.action-side .action-title {
    font-size:
        1.05rem;

    font-weight:
        700;
}


.action-side .action-text {
    font-size:
        0.82rem;

    color:
        var(--color-text-light);
}


/* ==========================================================
   ОТПРАВЛЕННЫЕ РАБОТЫ
   ========================================================== */

/*
 * Заголовок «Последние работы» полностью скрыт.
 */

.section-title {
    display:
        none;
}


/*
 * Расстояние перед списком.
 * Меняется здесь.
 */

.recent-section {
    width: 100%;

    margin-top:
        6px;
}


.recent-list {
    width: 100%;

    display:
        flex;

    flex-direction:
        column;

    gap:
        0;

    margin-top:
        0;
}


.recent-item {
    width: 100%;

    padding:
        18px 0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        16px;

    border-bottom:
        1px solid #edf0ed;
}


.recent-item:first-child {
    padding-top:
        4px;
}


.recent-info {
    min-width:
        0;
}


.recent-subject {
    font-size:
        1rem;

    font-weight:
        700;
}


.recent-date {
    margin-top:
        4px;

    font-size:
        0.82rem;

    color:
        var(--color-text-light);
}


.status {
    flex-shrink:
        0;

    padding:
        7px 12px;

    border-radius:
        20px;

    background:
        #edf7ef;

    color:
        #4d8b5b;

    font-size:
        0.78rem;

    font-weight:
        600;
}


.status.checked {
    background:
        #e5f4ea;

    color:
        #39834b;
}


.status.error {
    background:
        #f9e6e4;

    color:
        #b34e47;
}


/* ==========================================================
   ПУСТОЙ СПИСОК
   ========================================================== */

.recent-empty {
    padding:
        26px 20px;

    border-radius:
        22px;

    background:
        #f7f8f6;

    text-align:
        center;
}


.recent-empty-icon {
    font-size:
        1.8rem;

    margin-bottom:
        8px;
}


.recent-empty-title {
    font-size:
        0.98rem;

    font-weight:
        700;
}


.recent-empty-text {
    max-width:
        360px;

    margin:
        7px auto 0;

    color:
        var(--color-text-light);

    font-size:
        0.82rem;

    line-height:
        1.5;
}


/* ==========================================================
   ВЕРСИЯ
   ========================================================== */

.version {
    text-align:
        center;

    margin-top:
        28px;

    color:
        var(--color-text-light);

    font-size:
        0.85rem;
}


/* ==========================================================
   МОБИЛЬНАЯ ВЕРСИЯ
   ========================================================== */

@media (max-width: 600px) {

    .home-card {
        width: 100%;

        max-width: none;

        padding:
            22px 18px 32px;
    }


    /*
     * На телефоне эти значения остаются
     * согласованными с основной версией.
     */

    .home-header {
        min-height:
            90px;

        margin-bottom:
            4px;

        padding-right:
            38px;
    }


    .brand-row {
        justify-content:
            flex-start;

        gap:
            14px;

        padding-right:
            52px;
    }


    .home-logo {
        width:
            86px;

        height:
            86px;
    }


    .brand-copy h1 {
        font-size:
            2.1rem;

        line-height:
            1.05;
    }


    .home-subtitle {
        font-size:
            0.95rem;

        margin-top:
            7px;
    }


    .icon-button {
        width:
            46px;

        height:
            46px;

        right:
            0;

        top:
            2px;

        font-size:
            1.2rem;
    }


    .action-grid {
        grid-template-columns:
            1fr;

        gap:
            12px;

        margin-top:
            0;

        margin-bottom:
            6px;
    }


    .action-camera {
        width:
            100%;

        height:
            145px;

        min-height:
            145px;
    }


    .action-side {
        width:
            100%;

        grid-template-columns:
            1fr 1fr;

        gap:
            12px;
    }


    .action-side .action-card {
        height:
            110px;

        min-height:
            110px;

        border-radius:
            20px;
    }


    .recent-section {
        margin-top:
            6px;
    }


    .recent-item {
        padding:
            16px 0;
    }


    .recent-item:first-child {
        padding-top:
            4px;
    }

}


/* ==========================================================
   ОЧЕНЬ УЗКИЙ ТЕЛЕФОН
   ========================================================== */

@media (max-width: 380px) {

    .home-card {
        padding-left:
            14px;

        padding-right:
            14px;
    }


    .home-logo {
        width:
            74px;

        height:
            74px;
    }


    .brand-row {
        gap:
            10px;
    }


    .brand-copy h1 {
        font-size:
            1.8rem;
    }


    .home-subtitle {
        font-size:
            0.85rem;
    }


    .action-camera {
        height:
            140px;

        min-height:
            140px;
    }


    .action-side {
        gap:
            10px;
    }


    .action-side .action-card {
        height:
            105px;

        min-height:
            105px;

        padding:
            13px;
    }


    .action-side .action-text {
        font-size:
            0.72rem;
    }

}


/* ==========================================================
   АНИМАЦИЯ ПЕРЕХОДОВ
   ========================================================== */

@keyframes fadeUp {

    from {
        opacity:
            0;

        transform:
            translateY(10px);
    }

    to {
        opacity:
            1;

        transform:
            translateY(0);
    }

}


/* ==========================================================
   АНИМАЦИЯ ЛИСТИКА
   ========================================================== */

@keyframes leafFloat {

    0% {
        transform:
            rotate(-3deg);
    }

    25% {
        transform:
            rotate(2deg);
    }

    50% {
        transform:
            rotate(4deg);
    }

    75% {
        transform:
            rotate(-2deg);
    }

    100% {
        transform:
            rotate(-3deg);
    }

}


@keyframes leafHappy {

    0% {
        transform:
            scale(1);
    }

    30% {
        transform:
            scale(1.08)
            rotate(-4deg);
    }

    60% {
        transform:
            scale(0.98)
            rotate(4deg);
    }

    100% {
        transform:
            scale(1);
    }

}
/* ==========================================================
   ФИНАЛЬНАЯ НАСТРОЙКА DESKTOP + MOBILE
   ========================================================== */


/* =========================
   КОМПЬЮТЕР
   ========================= */

@media (min-width: 601px) {

    /* Приветствие — по левому краю */

    .brand-row {
        justify-content: flex-start;
        text-align: left;
    }

    .brand-copy {
        text-align: left;
    }

    .brand-copy h1 {
        text-align: left;
    }

    .home-subtitle {
        text-align: left;
    }


    /* «Сделать фото» — крупнее */

    .action-camera .action-title {
        font-size: 1.4rem;
    }

}


/* =========================
   ТЕЛЕФОН
   ========================= */

@media (max-width: 600px) {

    /* Зеленая кнопка — ниже по высоте */

    .action-camera {
        height: 115px !important;
        min-height: 115px !important;
    }


    /* PDF слева, Галерея справа */

    .action-side {
        display: grid !important;

        grid-template-columns:
            1fr 1fr !important;

        direction: ltr !important;
    }


    #pdfButton {
        grid-column: 1;
        grid-row: 1;
    }


    #galleryButton {
        grid-column: 2;
        grid-row: 1;
    }

}
/* ==========================================================
   БЕЛЫЙ ФОН ПРИЛОЖЕНИЯ
   ========================================================== */

html,
body {
    background: #ffffff !important;
}


/* Убираем бежевую подложку приложения */

#app {
    background: #ffffff !important;
}


/* Главный контейнер больше не выглядит отдельной карточкой */

.home-card {
    background: #ffffff !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}
/* ==========================================================
   ПРЕДПРОСМОТР ФОТО
   Крестик слева + галочка справа
   ========================================================== */

.preview-screen {
    position: fixed;
    inset: 0;

    width: 100%;
    height: 100dvh;

    background: #000000;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    z-index: 1000;
}


.preview-photo-wrap {
    position: relative;

    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;
}


.preview-image {
    display: block;

    max-width: 100%;
    max-height: 100%;

    width: auto;
    height: auto;

    object-fit: contain;
}


/* ==========================================================
   КНОПКИ ПОДТВЕРЖДЕНИЯ
   ========================================================== */

.preview-actions {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 28px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    padding:
        0 28px;

    pointer-events: none;

    z-index: 10;
}


.preview-button {
    width: 64px;
    height: 64px;

    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    pointer-events: auto;

    font-size: 2rem;
    font-weight: 600;

    line-height: 1;

    border: none;

    cursor: pointer;

    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.25);

    transition:
        transform 0.15s ease,
        background 0.15s ease;
}


.preview-button:active {
    transform: scale(0.92);
}


/* ==========================================================
   КРЕСТИК — СЛЕВА
   ========================================================== */

.preview-retake {
    background: rgba(255, 255, 255, 0.95);

    color: #333333;
}


/* ==========================================================
   ГАЛОЧКА — СПРАВА
   ========================================================== */

.preview-accept {
    background: #5daf6d;

    color: #ffffff;
}


/* ==========================================================
   ТЕЛЕФОН
   ========================================================== */

@media (max-width: 600px) {

    .preview-actions {
        bottom: 24px;

        padding:
            0 22px;
    }


    .preview-button {
        width: 60px;
        height: 60px;

        font-size: 1.9rem;
    }

}


/* ==========================================================
   ОЧЕНЬ УЗКИЙ ТЕЛЕФОН
   ========================================================== */

@media (max-width: 380px) {

    .preview-actions {
        bottom: 20px;

        padding:
            0 18px;
    }


    .preview-button {
        width: 56px;
        height: 56px;

        font-size: 1.7rem;
    }

}
/* ==========================================================
   PAGES — ПОЛНОЭКРАННЫЙ ПРОСМОТР
   ========================================================== */

.pages-screen {
    position: fixed;
    inset: 0;

    width: 100vw;
    height: 100vh;
    height: 100dvh;

    overflow: hidden;

    background: #000;

    color: #fff;

    z-index: 9999;
}


/* ==========================================================
   ПРОСМОТР ФОТО
   ========================================================== */

.pages-view {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;

    background: #000;

    touch-action: pan-y;

    z-index: 1;
}


.pages-track {
    width: 100%;
    height: 100%;

    display: flex;

    overflow-x: auto;
    overflow-y: hidden;

    scroll-snap-type: x mandatory;

    scroll-behavior: smooth;

    scrollbar-width: none;

    -ms-overflow-style: none;
}


.pages-track::-webkit-scrollbar {
    display: none;
}


/* ==========================================================
   ОДНА СТРАНИЦА
   ========================================================== */

.page {
    position: relative;

    flex:
        0 0 100vw;

    width: 100vw;
    height: 100dvh;

    scroll-snap-align: center;

    scroll-snap-stop: always;

    overflow: hidden;

    background: #000;

    display: flex;

    align-items: center;

    justify-content: center;
}


.page-image {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: contain;

    user-select: none;

    -webkit-user-select: none;

    pointer-events: none;

    -webkit-user-drag: none;
}


/* ==========================================================
   ВЕРХНЯЯ ИНФОРМАЦИЯ
   ========================================================== */

.pages-overlay {
    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    z-index: 20;

    pointer-events: none;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: flex-start;

    padding:
        max(18px, env(safe-area-inset-top))
        20px
        0;
}


/*
 * Предмет
 */

.pages-subject {
    margin-top: 8px;

    font-size: 0.95rem;

    font-weight: 600;

    line-height: 1.2;

    text-align: center;

    color: rgba(255, 255, 255, 0.88);

    text-shadow:
        0 1px 8px rgba(0, 0, 0, 0.7);
}


/*
 * Счётчик
 */

.pages-counter {
    margin-top: 5px;

    font-size: 0.78rem;

    font-weight: 500;

    color: rgba(255, 255, 255, 0.62);

    text-shadow:
        0 1px 7px rgba(0, 0, 0, 0.8);
}


/* ==========================================================
   НИЖНИЕ КНОПКИ
   ========================================================== */

.pages-controls {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    z-index: 30;

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 8px;

    padding:
        12px
        12px
        max(12px, env(safe-area-inset-bottom));

    background: #000000;

    pointer-events: auto;
}


/* ==========================================================
   КНОПКА
   ========================================================== */

.pages-control {
    min-width: 0;

    height: 54px;

    padding:
        6px 5px;

    border: none;

    border-radius: 16px;

    background:
        rgba(20, 20, 20, 0.58);

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);

    color: #fff;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 3px;

    font-family: inherit;

    font-size: 0.68rem;

    font-weight: 600;

    line-height: 1;

    transition:
        transform 0.15s ease,
        background 0.15s ease;
}


.pages-control:hover {
    background:
        rgba(30, 30, 30, 0.72);
}


.pages-control:active {
    transform:
        scale(0.94);
}


.pages-control-icon {
    font-size: 1.15rem;

    line-height: 1;
}


/* ==========================================================
   ОТПРАВИТЬ
   ========================================================== */

.pages-send {
    background:
        rgba(90, 165, 107, 0.86);
}


.pages-send:hover {
    background:
        rgba(90, 165, 107, 0.96);
}


/* ==========================================================
   ПУСТОЙ ЭКРАН
   ========================================================== */

.page-empty {
    width: 100%;
    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: rgba(255, 255, 255, 0.7);
}


/* ==========================================================
   ОШИБКА СТРАНИЦЫ
   ========================================================== */

.page-error {
    color: #fff;

    padding: 30px;

    text-align: center;
}


/* ==========================================================
   МОБИЛЬНЫЙ ЭКРАН
   ========================================================== */

@media (max-width: 600px) {

    .pages-control {
        height: 52px;

        border-radius: 15px;

        font-size: 0.63rem;
    }


    .pages-control-icon {
        font-size: 1.05rem;
    }


    .pages-controls {
        gap: 6px;

        padding-left: 8px;
        padding-right: 8px;
    }

}


/* ==========================================================
   ДЕСКТОП
   ========================================================== */

@media (min-width: 601px) {

    .pages-control {
        min-width: 100px;

        max-width: 150px;

        justify-self: center;
    }


    .pages-controls {
        grid-template-columns:
            repeat(4, auto);

        justify-content: center;

        gap: 12px;
    }

}
/* ==========================================================
   PAGES — ПОЛНОЭКРАННЫЙ ПРОСМОТР
   ========================================================== */

.pages-screen {
    position: fixed;
    inset: 0;

    width: 100vw;
    height: 100dvh;

    overflow: hidden;

    background: #000;
    color: #fff;

    z-index: 9999;
}


/* ==========================================================
   ОБЛАСТЬ ПРОСМОТРА
   ========================================================== */

.pages-view {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;

    background: #000;

    /* Разрешаем горизонтальный жест */
    touch-action: pan-x;
}


/* ==========================================================
   ЛЕНТА СТРАНИЦ
   ========================================================== */

.pages-track {
    width: 100%;
    height: 100%;

    display: flex;

    overflow-x: auto;
    overflow-y: hidden;

    /* Самое важное для свайпа */
    touch-action: pan-x;
    -webkit-overflow-scrolling: touch;

    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;

    scrollbar-width: none;

    background: #000;

    /* Не даём браузеру увести страницу вверх/вниз */
    overscroll-behavior-x: contain;
}


.pages-track::-webkit-scrollbar {
    display: none;
}


/* ==========================================================
   ОТДЕЛЬНАЯ СТРАНИЦА
   ========================================================== */

.page {
    position: relative;

    flex: 0 0 100vw;

    width: 100vw;
    height: 100dvh;

    scroll-snap-align: center;
    scroll-snap-stop: always;

    display: flex;

    align-items: center;
    justify-content: center;

    background: #000;
}


/* ==========================================================
   ФОТО
   ========================================================== */

.page-image {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: contain;

    user-select: none;
    -webkit-user-select: none;

    pointer-events: none;

    /* Картинка сама не должна перехватывать свайп */
    touch-action: none;
}


/* ==========================================================
   НАЗАД
   ========================================================== */

.pages-back {
    position: absolute;

    top: 18px;
    left: 18px;

    z-index: 20;

    width: 48px;
    height: 48px;

    border-radius: 50%;

    background: rgba(0, 0, 0, 0.48);

    color: #fff;

    font-size: 25px;

    display: flex;

    align-items: center;
    justify-content: center;

    backdrop-filter: blur(8px);

    -webkit-backdrop-filter: blur(8px);
}


/* ==========================================================
   ПРЕДМЕТ
   ========================================================== */

.pages-subject {
    position: absolute;

    top: 22px;
    left: 50%;

    transform: translateX(-50%);

    z-index: 20;

    padding: 6px 12px;

    border-radius: 20px;

    background: rgba(0, 0, 0, 0.28);

    color: rgba(255, 255, 255, 0.9);

    font-size: 14px;

    font-weight: 600;

    white-space: nowrap;

    backdrop-filter: blur(6px);

    -webkit-backdrop-filter: blur(6px);
}


/* ==========================================================
   1 / 1
   ========================================================== */

.pages-counter {
    position: absolute;

    top: 54px;
    left: 50%;

    transform: translateX(-50%);

    z-index: 20;

    color: rgba(255, 255, 255, 0.72);

    font-size: 12px;

    font-weight: 500;

    pointer-events: none;
}


/* ==========================================================
   НИЖНИЕ КНОПКИ
   ========================================================== */

.pages-actions {
    position: absolute;

    left: 50%;
    bottom: 24px;

    transform: translateX(-50%);

    z-index: 30;

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 10px;

    width: auto;

    padding: 8px;

    border-radius: 24px;

    background: rgba(0, 0, 0, 0.42);

    backdrop-filter: blur(10px);

    -webkit-backdrop-filter: blur(10px);
}


.pages-action {
    height: 44px;

    padding: 0 14px;

    border: none;

    border-radius: 16px;

    background: rgba(255, 255, 255, 0.14);

    color: #fff;

    font-family: inherit;

    font-size: 13px;

    font-weight: 600;

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 6px;

    white-space: nowrap;

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}


.pages-action:hover {
    background:
        rgba(255, 255, 255, 0.22);
}


.pages-action:active {
    transform: scale(0.95);
}


.pages-action-icon {
    font-size: 17px;
}


/* Отправить — чуть заметнее */

.pages-send {
    background:
        rgba(90, 165, 107, 0.9);
}


.pages-send:hover {
    background:
        rgba(90, 165, 107, 1);
}


/* ==========================================================
   УБИРАЕМ ВСЯКИЙ СТАРЫЙ HEADER / FOOTER
   ========================================================== */

.pages-screen .pages-header,
.pages-screen .pages-footer,
.pages-screen .pages-menu,
.pages-screen .pages-add {
    display: none !important;
}


/* ==========================================================
   НЕ ДОПУСКАЕМ БЕЛЫХ ПОЛЕЙ
   ========================================================== */

.pages-screen,
.pages-screen * {
    box-sizing: border-box;
}


html:has(.pages-screen),
body:has(.pages-screen) {
    margin: 0 !important;
    padding: 0 !important;

    width: 100% !important;
    height: 100% !important;

    overflow: hidden !important;

    background: #000 !important;
}


#app:has(.pages-screen) {
    width: 100vw !important;
    height: 100dvh !important;

    min-height: 100dvh !important;

    margin: 0 !important;
    padding: 0 !important;

    background: #000 !important;
}


/* ==========================================================
   МОБИЛЬНЫЙ
   ========================================================== */

@media (max-width: 600px) {

    .pages-back {
        top: 14px;
        left: 14px;

        width: 44px;
        height: 44px;

        font-size: 22px;
    }


    .pages-subject {
        top: 18px;

        font-size: 13px;
    }


    .pages-counter {
        top: 47px;

        font-size: 11px;
    }


    .pages-actions {
        bottom:
            calc(14px + env(safe-area-inset-bottom));

        width: calc(100% - 24px);

        gap: 6px;

        padding: 7px;

        border-radius: 21px;
    }


    .pages-action {
        flex: 1;

        height: 44px;

        padding: 0 8px;

        font-size: 12px;

        border-radius: 15px;
    }


    .pages-action-icon {
        font-size: 15px;
    }

}

/* ==========================================================
   ПОЛНОЭКРАННЫЙ PREVIEW
   Кнопки и надписи поверх фотографии
   ========================================================== */

.preview-screen {
    position: fixed;
    inset: 0;

    width: 100vw;
    height: 100vh;
    height: 100dvh;

    margin: 0;
    padding: 0;

    overflow: hidden;

    background: #000;

    z-index: 9999;

    display: flex;
    align-items: center;
    justify-content: center;
}


/* Фотография */

.preview-screen .preview-image {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: contain;

    display: block;

    z-index: 1;
}


/* Затемнение */

.preview-screen .preview-overlay {
    display: none;
}


/* Верхняя кнопка-крестик нам вообще НЕ нужна */

.preview-screen .preview-top-button {
    display: none !important;
}


/* Нижняя панель */

.preview-screen .preview-bottom-actions {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    z-index: 10;

    width: 100%;

    padding:
        18px
        18px
        calc(18px + env(safe-area-inset-bottom));

    display: grid;

    grid-template-columns:
        1fr
        1fr
        1fr
        1.25fr;

    gap: 10px;

    align-items: center;
}


/* Все четыре кнопки */

.preview-screen .preview-action-button {
    min-height: 52px;

    border: none;
    border-radius: 16px;

    padding: 10px 12px;

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 7px;

    background:
        rgba(255,255,255,0.88);

    color:
        #28302b;

    font-family:
        inherit;

    font-size:
        0.82rem;

    font-weight:
        700;

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);

    box-shadow:
        0 4px 18px rgba(0,0,0,0.18);
}


/* Кнопка Далее */

.preview-screen .preview-send-button {
    min-height: 52px;

    border: none;
    border-radius: 16px;

    padding: 10px 14px;

    background:
        #5daf6d;

    color: white;

    font-family:
        inherit;

    font-size:
        0.85rem;

    font-weight:
        800;

    box-shadow:
        0 4px 18px rgba(0,0,0,0.22);
}


.preview-screen .preview-action-icon {
    font-size: 1.2rem;
    line-height: 1;
}


/* Нажатие */

.preview-screen .preview-action-button:active,
.preview-screen .preview-send-button:active {
    transform: scale(0.96);
}


/* Очень узкий телефон */

@media (max-width: 500px) {

    .preview-screen .preview-bottom-actions {
        padding:
            12px
            10px
            calc(12px + env(safe-area-inset-bottom));

        gap: 7px;
    }


    .preview-screen .preview-action-button,
    .preview-screen .preview-send-button {

        min-height: 48px;

        padding:
            8px 6px;

        border-radius: 14px;

        font-size:
            0.72rem;
    }


    .preview-screen .preview-action-icon {
        font-size: 1.05rem;
    }

}
/* ==========================================================
   PAGES — КНОПКИ И НАВИГАЦИЯ
   ========================================================== */


/* ----------------------------------------------------------
   КОНТЕЙНЕР КНОПОК
   ---------------------------------------------------------- */

.pages-overlay-actions {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 32px;

    z-index: 50;

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 14px;

    pointer-events: none;
}


/* ----------------------------------------------------------
   ОБЫЧНЫЕ КНОПКИ
   ---------------------------------------------------------- */

.pages-overlay-button,
.pages-overlay-send {
    pointer-events: auto;

    position: relative;

    border: 0;

    cursor: pointer;

    -webkit-tap-highlight-color: transparent;

    user-select: none;
    -webkit-user-select: none;
}


/* ----------------------------------------------------------
   КРУГЛЫЕ КНОПКИ
   ---------------------------------------------------------- */

.pages-overlay-button {

    width: 52px;
    height: 52px;

    border-radius: 50%;

    display: flex;

    align-items: center;
    justify-content: center;

    background: rgba(0, 0, 0, 0.58);

    color: #fff;

    font-size: 24px;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.25);

    transition:
        transform 0.15s ease,
        background 0.15s ease;
}


.pages-overlay-button:active {

    transform: scale(0.92);

    background:
        rgba(255, 255, 255, 0.18);

}


/* ----------------------------------------------------------
   КНОПКА ДАЛЕЕ
   ---------------------------------------------------------- */

.pages-overlay-send {

    min-width: 120px;
    height: 52px;

    padding: 0 24px;

    border-radius: 26px;

    background: #fff;

    color: #111;

    font-size: 16px;
    font-weight: 600;

    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.25);

    transition:
        transform 0.15s ease,
        opacity 0.15s ease;
}


.pages-overlay-send:active {

    transform: scale(0.95);

}


/* ==========================================================
   СТРЕЛКИ ПЕРЕЛИСТЫВАНИЯ
   ========================================================== */

.pages-nav-arrow {

    position: absolute;

    top: 50%;

    z-index: 60;

    width: 42px;
    height: 64px;

    margin: 0;

    padding: 0;

    transform:
        translateY(-50%);

    border: 0;

    border-radius: 21px;

    background:
        rgba(0, 0, 0, 0.28);

    color: rgba(255, 255, 255, 0.9);

    font-family:
        Arial,
        sans-serif;

    font-size: 42px;

    font-weight: 200;

    line-height: 58px;

    display: flex;

    align-items: center;
    justify-content: center;

    cursor: pointer;

    opacity: 0;

    pointer-events: none;

    transition:
        opacity 0.2s ease,
        background 0.2s ease,
        transform 0.15s ease;

    -webkit-tap-highlight-color:
        transparent;

    user-select: none;
    -webkit-user-select: none;
}


.pages-nav-arrow.visible {

    opacity: 1;

    pointer-events: auto;

}


.pages-nav-arrow:active {

    background:
        rgba(255, 255, 255, 0.18);

}


/* ----------------------------------------------------------
   ЛЕВАЯ
   ---------------------------------------------------------- */

.pages-nav-prev {

    left: 14px;

}


/* ----------------------------------------------------------
   ПРАВАЯ
   ---------------------------------------------------------- */

.pages-nav-next {

    right: 14px;

}


/* ==========================================================
   ТЕЛЕФОН
   ========================================================== */

@media (max-width: 600px) {

    .pages-overlay-actions {

        bottom: 22px;

        gap: 9px;

    }


    .pages-overlay-button {

        width: 46px;
        height: 46px;

        font-size: 21px;

    }


    .pages-overlay-send {

        height: 46px;

        min-width: 100px;

        padding:
            0 18px;

        font-size: 15px;

    }


    .pages-nav-arrow {

        width: 34px;
        height: 54px;

        font-size: 34px;

        line-height: 50px;

        border-radius: 18px;

    }


    .pages-nav-prev {

        left: 7px;

    }


    .pages-nav-next {

        right: 7px;

    }

}
.pages-overlay-info {
    position: absolute;

    top: 24px;
    left: 50%;

    transform: translateX(-50%);

    z-index: 55;

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 8px;

    padding: 9px 16px;

    border-radius: 22px;

    background: rgba(0, 0, 0, 0.38);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    white-space: nowrap;

    pointer-events: none;

    box-shadow:
        0 4px 18px rgba(0, 0, 0, 0.18);
}


.pages-overlay-subject {
    font-size: 15px;

    font-weight: 600;

    color: #fff;
}


.pages-overlay-counter {
    font-size: 14px;

    font-weight: 400;

    color: rgba(255, 255, 255, 0.75);
}


@media (max-width: 600px) {

    .pages-overlay-info {

        top: 18px;

        padding:
            8px 14px;

        gap: 7px;

    }


    .pages-overlay-subject {
        font-size: 14px;
    }


    .pages-overlay-counter {
        font-size: 13px;
    }

}
/* Фото профиля выбирается нажатием на сам круг. */
.profile-avatar-frame{cursor:pointer}

.teacher-round-button.profile-icon-button {
    background: transparent !important;
    box-shadow: none !important;
}
/* Убираем фоновые плашки и границы под статус-баром телефона */
html, body {
  margin: 0;
  padding: 0;
  background-color: #ffffff; /* или ваш базовый цвет фона */
}

/* Настройка для всех экранов: контент заезжает под часы, но не перекрывается */
.teacher-screen, .home-screen, .screen {
  padding-top: calc(env(safe-area-inset-top, 0px) + 16px) !important;
}

/* Особая настройка для экрана просмотра фото (Stories): там фон строго чёрный */
.teacher-viewer {
  padding-top: env(safe-area-inset-top, 0px) !important;
  background-color: #000000 !important;
}

/* Убираем любые разделительные линии и рамки у верхних шапок */
.teacher-header, .home-header {
  border-bottom: none !important;
  box-shadow: none !important;
}
:root {
  --safe-top: env(safe-area-inset-top, 0px);
}

/* Растягиваем главный контейнер на физические границы экрана */
#app, body, html {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100dvh;
  margin: 0;
  padding: 0;
}

/* Убираем жесткую заливку у самого верхнего элемента шапки */
.teacher-header, .home-header, header {
  background: transparent !important;
  background-color: transparent !important;
  padding-top: calc(var(--safe-top) + 12px) !important;
}
/* 1. Делаем контент "под шторкой" */
.home-screen {
    padding-top: env(safe-area-inset-top, 20px) !important;
}

/* 2. Зеленый блок выше */
.home-actions {
    margin-top: -15px !important;
    margin-bottom: 20px !important; }


/* 3. Значок настроек выше и меньше */
#homeProfile {
    width: 32px !important;
    height: 32px !important;
    margin-top: -15px !important; /* Поднимаем относительно строки */
}
/* 1. Шторка: заставляем контент игнорировать верхнюю плашку */
#app {
    padding-top: env(safe-area-inset-top, 0px);
}

/* 7. Строгое правило переноса имени */
.home-header h1 {
    font-size: 24px;
    line-height: 1.2;
    padding-right: 45px; /* Резерв места под кнопку настроек */
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 80%;
}

/* 3. Значок настроек: выше и меньше */
#homeProfile {
    position: absolute;
    top: -5px; 
    right: 0;
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
}

/* 1. Намертво убираем системную зелёную полосу под статус-баром */
html, body, #app {
    background-color: #ffffff !important;
}
.home-screen {
    padding-top: calc(env(safe-area-inset-top, 20px) + 10px) !important;
    background: #ffffff !important;
}

/* 2. Аватарка покрупнее, значок настроек повыше и поменьше */
.home-header {
    position: relative;
    display: flex;
    align-items: center;
    padding-right: 40px;
}
.home-header img.teacher-avatar {
    width: 64px !important;
    height: 64px !important;
    border-radius: 50%;
}
#homeProfile {
    position: absolute;
    top: 5px;
    right: 0;
    width: 24px !important;
    height: 24px !important;
}

/* 3. Контейнер для свайпа карточек Зары */
.zara-swipe-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 14px;
    background: #f17267; /* Коралловый фон для удаления */
}

/* Стили кнопок действия Зары, которые прячутся справа */
.zara-actions-hidden {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    z-index: 1;
}
.zara-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: bold;
    color: white;
    border: none;
    cursor: pointer;
    padding: 0 16px;
    height: 100%;
}
.zara-btn-save { background: #000000; }
.zara-btn-delete { background: #f17267; }

/* Перекрашиваем кнопку "Проверено" в сочный фирменный оранжевый цвет */
.teacher-status.is-checked {
    background-color: #E07B39 !important;
    color: #ffffff !important;
    border: none !important;
}