/* Оформление взято из макета index.html: палитра на зелёном, светлый фон,
   карточки с большим радиусом и мягкой тенью, Montserrat + JetBrains Mono. */

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('fonts/montserrat-cyrillic.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('fonts/montserrat-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400 500;
    font-display: swap;
    src: url('fonts/jetbrains-mono-cyrillic.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400 500;
    font-display: swap;
    src: url('fonts/jetbrains-mono-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Запасные hex идут первыми: планшеты на АЗС могут быть со старым браузером,
   где oklch() не поддерживается и правило было бы отброшено целиком. */
:root {
    --bg: #f4f5f4;
    --surface: #ffffff;
    --surface-soft: #eceeec;
    --surface-alt: #f1f3f1;
    --surface-dim: #fafbfa;
    --line: #e7e9e7;
    --line-strong: #d3d7d3;

    --ink: #161a17;
    --ink-2: #4b524d;
    --ink-3: #6b716c;
    --ink-4: #7c837d;
    --ink-5: #8b918c;
    --ink-6: #9aa09b;

    --green: #26c46a;
    --green-mid: #17b25c;
    --green-btn: #1a8548;
    --green-btn-hover: #14703b;
    --green-pale: #dcf7e4;
    --green-text: #126736;

    --dark: #16201a;
    --dark-hover: #24322a;

    --danger: #c0392b;
    --danger-pale: #fdecea;

    --shadow: 0 2px 0 rgba(20, 30, 22, 0.04), 0 24px 60px -40px rgba(20, 30, 22, 0.35);
    --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

@supports (color: oklch(0.5 0.1 150)) {
    :root {
        --green: oklch(0.72 0.17 152);
        --green-mid: oklch(0.66 0.17 152);
        --green-btn: oklch(0.52 0.13 152);
        --green-btn-hover: oklch(0.45 0.12 152);
        --green-pale: oklch(0.94 0.05 152);
        --green-text: oklch(0.42 0.12 152);
    }
}

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

body {
    background: var(--bg);
    font-family: Montserrat, Helvetica, Arial, sans-serif;
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--green-btn); }
a:hover { color: var(--green-btn-hover); }

@keyframes dcStripe { to { background-position: 64px 0; } }
@keyframes dcPulse  { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@keyframes dcSpin   { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------------ каркас */

.page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 32px;
}

.page--centred { justify-content: center; }

.shell {
    width: 100%;
    max-width: 860px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.shell--wide { max-width: 1180px; }

.topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.brand {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    transition: opacity 140ms ease;
}

/* Логотип ведёт на главную, но остаётся логотипом:
   без подчёркивания и без цвета обычной ссылки. */
a.brand:hover { opacity: 0.7; }
a.brand:hover .brand__text { color: var(--ink-3); }

.brand__mark {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    background: var(--green);
    flex: 0 0 auto;
}

.brand__text {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.topline__meta {
    font-family: var(--mono);
    font-size: 14px;
    color: var(--ink-6);
    display: flex;
    align-items: center;
    gap: 18px;
}

h1 {
    font-size: 48px;
    line-height: 1.04;
    font-weight: 800;
    letter-spacing: -0.035em;
    text-wrap: pretty;
}

.lede {
    margin-top: 12px;
    font-size: 19px;
    line-height: 1.4;
    color: var(--ink-3);
    max-width: 620px;
    text-wrap: pretty;
}

.card {
    background: var(--surface);
    border-radius: 28px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 26px;
    box-shadow: var(--shadow);
}

.hidden { display: none !important; }

/* ------------------------------------------------------------------ кнопки */

.btn {
    border: none;
    cursor: pointer;
    font-family: Montserrat, sans-serif;
    font-size: 18px;
    font-weight: 600;
    padding: 18px 30px;
    border-radius: 16px;
    transition: background 160ms ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.btn--primary { background: var(--green-btn); color: #fff; font-weight: 700; }
.btn--primary:hover:not(:disabled) { background: var(--green-btn-hover); color: #fff; }

.btn--big { font-size: 20px; padding: 22px 40px; border-radius: 18px; font-weight: 700; }

.btn--dark { background: var(--dark); color: #fff; }
.btn--dark:hover:not(:disabled) { background: var(--dark-hover); color: #fff; }

.btn--quiet { background: var(--surface-alt); color: var(--ink-2); }
.btn--quiet:hover:not(:disabled) { background: var(--line); color: var(--ink-2); }

.btn--danger { background: var(--danger-pale); color: var(--danger); }
.btn--danger:hover:not(:disabled) { background: #f9d9d5; color: var(--danger); }

.btn--grow { flex: 1; }

/* ------------------------------------------------------------------- поля */

.field { display: flex; flex-direction: column; gap: 9px; }

.field__label {
    font-size: 15px;
    font-weight: 600;
    color: var(--ink-2);
}

.field__hint { font-size: 14px; color: var(--ink-5); }

.input {
    font-family: Montserrat, sans-serif;
    font-size: 18px;
    color: var(--ink);
    background: var(--surface);
    border: 2px solid var(--line);
    border-radius: 16px;
    padding: 16px 18px;
    width: 100%;
    transition: border-color 160ms ease;
}

.input:focus { outline: none; border-color: var(--green); }
.input--mono { font-family: var(--mono); }

/* --------------------------------------------------------------- дропзона */

.drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    padding: 44px 40px;
    border-radius: 28px;
    cursor: pointer;
    transition: all 180ms ease;
    border: 3px dashed var(--line-strong);
    background: var(--surface-soft);
}

.drop:hover, .drop.is-dragging {
    border-color: var(--green);
    background: var(--surface);
}

.drop.is-locked { opacity: 0.5; cursor: not-allowed; }
.drop.is-locked:hover { border-color: var(--line-strong); background: var(--surface-soft); }

.drop__icon {
    width: 84px;
    height: 84px;
    border-radius: 24px;
    background: var(--green-pale);
    display: flex;
    align-items: center;
    justify-content: center;
}

.drop__glyph {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    border: 4px solid var(--green-btn);
    border-bottom-color: transparent;
    border-right-color: transparent;
    transform: rotate(45deg);
}

.drop__title { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; }
.drop__sub { font-size: 18px; color: var(--ink-4); }

.pills { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }

.pill {
    font-family: var(--mono);
    font-size: 13px;
    color: var(--ink-3);
    background: var(--line);
    border-radius: 999px;
    padding: 8px 16px;
}

/* --------------------------------------------------------------- прогресс */

.progress__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
}

.progress__phase { font-size: 19px; font-weight: 600; color: var(--ink-2); }

.progress__pct {
    font-family: var(--mono);
    font-size: 34px;
    font-weight: 500;
    letter-spacing: -0.02em;
}

.bar {
    height: 18px;
    border-radius: 999px;
    background: var(--line);
    overflow: hidden;
}

.bar__fill {
    height: 100%;
    width: 0;
    border-radius: 999px;
    transition: width 200ms linear;
    background: repeating-linear-gradient(115deg, var(--green) 0 22px, var(--green-mid) 22px 44px);
    background-size: 64px 100%;
    animation: dcStripe 1.1s linear infinite;
}

.bar__fill.is-idle { animation: none; background: var(--line-strong); }

.progress__foot {
    display: flex;
    justify-content: space-between;
    font-family: var(--mono);
    font-size: 15px;
    color: var(--ink-5);
    gap: 16px;
}

.badge {
    flex: 0 0 auto;
    font-family: var(--mono);
    font-size: 14px;
    padding: 10px 18px;
    border-radius: 999px;
    background: var(--green-pale);
    color: var(--green-text);
    animation: dcPulse 1.6s ease-in-out infinite;
}

.badge--still { animation: none; background: var(--surface-soft); color: var(--ink-3); }
.badge--bad { animation: none; background: var(--danger-pale); color: var(--danger); }

/* ------------------------------------------------------------ список файлов */

.queue {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: var(--line);
    border-radius: 18px;
    max-height: 340px;
    overflow-y: auto;
}

.queue__row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 20px;
    background: var(--surface);
}

.queue__thumb {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    object-fit: cover;
    background: var(--surface-alt);
    flex: 0 0 auto;
}

.queue__body { flex: 1; min-width: 0; }

.queue__name {
    font-size: 16px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.queue__meta { font-family: var(--mono); font-size: 13px; color: var(--ink-5); margin-top: 3px; }

.queue__state { font-family: var(--mono); font-size: 13px; flex: 0 0 auto; }
.queue__state--wait { color: var(--ink-6); }
.queue__state--go   { color: var(--green-text); }
.queue__state--ok   { color: var(--green-text); font-weight: 500; }
.queue__state--bad  { color: var(--danger); }

/* --------------------------------------------- страница в один экран */

/* Страница загрузки не должна расти вниз по мере обработки: список файлов
   на шаге 2 прибавляет по строке на каждый чек, и без этого вся страница
   уезжала бы в прокрутку. Приём взят из исходного макета — контейнер ровно
   в высоту экрана, а прокручивается только внутренность карточки.

   Обязательное условие — min-height: 0 на всей цепочке flex-контейнеров:
   по умолчанию элемент flex не сжимается меньше своего содержимого, и
   ограничение высоты просто не сработало бы. */
.page--fixed {
    height: 100vh;
    overflow: hidden;
}

.page--fixed .shell {
    min-height: 0;
    max-height: 100%;
}

.page--fixed .card {
    min-height: 0;
    overflow: hidden;
}

.page--fixed .queue {
    flex: 1 1 auto;
    max-height: none;
    min-height: 90px;
}

/* Шаг разбора: и список замечаний, и перечень АЗС бывают длинными.
   Без собственной прокрутки они распирают карточку, а та обрезается
   вместе с кнопкой «Загрузить чеки» — и продолжить становится нечем. */
/* Свободное место шага разбора отдаём замечаниям: ради них сюда и смотрят.
   Список АЗС при этом ограничен — он справочный, а не главный. */
.page--fixed #plan-problems {
    flex: 1 1 auto;
    min-height: 86px;
    max-height: 300px;
    overflow-y: auto;
}

.page--fixed .crumbs {
    flex: 0 1 auto;
    max-height: 124px;
    overflow-y: auto;
}

/* Плитки и шапка не сжимаются: иначе flex отъедает у них высоту
   вместо того, чтобы прокручивать замечания. */
.page--fixed .tiles,
.page--fixed .done__head,
.page--fixed .field { flex: 0 0 auto; }

/* Кнопки шага разбора не должны уезжать под обрез ни при каких списках. */
.page--fixed .row { flex: 0 0 auto; }

/* На невысоких и узких экранах втискивать содержимое в 100vh вредно:
   оно просто обрежется. Там возвращаем обычную прокрутку страницы. */
/* Невысокие экраны ноутбуков: поджимаем заголовок и отступы, чтобы шаг
   обработки продолжал помещаться целиком, а не сваливался в прокрутку. */
@media (max-height: 820px) {
    .page--fixed { padding: 20px 32px; }
    .page--fixed h1 { font-size: 34px; }
    .page--fixed .shell { gap: 16px; }
    .page--fixed .card { padding: 24px; gap: 20px; }
    .page--fixed .done__head { gap: 16px; }
}

@media (max-width: 720px), (max-height: 660px) {
    .page--fixed {
        height: auto;
        min-height: 100vh;
        overflow: visible;
    }

    .page--fixed .card { overflow: visible; }

    .page--fixed .queue {
        flex: 0 1 auto;
        max-height: 260px;
    }

    .page--fixed .crumbs { max-height: none; }
    .page--fixed #plan-problems { max-height: none; }
}

/* ------------------------------------------------------------------ итоги */

.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

.tile { background: var(--bg); border-radius: 18px; padding: 22px; }

.tile__value {
    font-family: var(--mono);
    font-size: 30px;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--dark);
}

.tile__label { font-size: 15px; color: var(--ink-4); margin-top: 6px; }

.done__head { display: flex; align-items: center; gap: 20px; }

.done__mark {
    width: 68px;
    height: 68px;
    border-radius: 20px;
    background: var(--green-btn);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.done__tick {
    width: 34px;
    height: 18px;
    border-left: 5px solid #fff;
    border-bottom: 5px solid #fff;
    transform: rotate(-45deg) translate(2px, -4px);
}

.done__title { font-size: 28px; font-weight: 800; letter-spacing: -0.025em; }
.done__sub { font-size: 17px; color: var(--ink-4); margin-top: 4px; }

.row { display: flex; gap: 14px; flex-wrap: wrap; }

/* ------------------------------------------------------------------- вход */

.login { width: 100%; max-width: 420px; }

.alert {
    background: var(--danger-pale);
    color: var(--danger);
    border-radius: 16px;
    padding: 16px 20px;
    font-size: 16px;
    line-height: 1.4;
}

.alert--calm { background: var(--green-pale); color: var(--green-text); }

/* ---------------------------------------------------------------- каталог */

.filters {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr auto;
    gap: 14px;
    align-items: end;
}

.crumbs {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-family: var(--mono);
    font-size: 14px;
    color: var(--ink-5);
}

.crumbs a { text-decoration: none; }

.folders { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }

.folder {
    background: var(--surface);
    border-radius: 18px;
    padding: 20px;
    box-shadow: var(--shadow);
    text-decoration: none;
    color: var(--ink);
    display: block;
    transition: transform 140ms ease;
}

.folder:hover { transform: translateY(-2px); color: var(--ink); }

.folder__name { font-size: 19px; font-weight: 700; letter-spacing: -0.015em; }
.folder__meta { font-family: var(--mono); font-size: 13px; color: var(--ink-5); margin-top: 6px; }

/* Карточка дня: основная ссылка ведёт внутрь дня, а в углу — выгрузка
   всего дня архивом. Ссылок две, поэтому карточка не ссылка, а контейнер. */
.folder--day { position: relative; }

.folder__link {
    display: block;
    text-decoration: none;
    color: inherit;
    /* Отступ справа, чтобы длинная дата не заезжала под кнопку. */
    padding-right: 30px;
}

.folder__zip {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: var(--surface-alt);
    color: var(--ink-5);
    font-size: 15px;
    text-decoration: none;
    transition: background 120ms ease, color 120ms ease;
}

.folder__zip:hover { background: var(--dark); color: #fff; }

/* Строка с выгрузкой дня над списком АЗС. */
.dayline { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

.dayline__note {
    font-family: var(--mono);
    font-size: 13px;
    color: var(--ink-5);
}

/* Подпись для программ чтения с экрана: кнопка обозначена стрелкой. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }

.shot {
    background: var(--surface);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
}

.shot__img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: var(--surface-alt);
    display: block;
    cursor: zoom-in;
}

.shot__body { padding: 14px 16px; display: flex; align-items: center; gap: 10px; }

.shot__meta { flex: 1; min-width: 0; font-family: var(--mono); font-size: 12px; color: var(--ink-5); }

.shot__name {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.icon-btn {
    border: none;
    background: var(--surface-alt);
    color: var(--ink-3);
    width: 34px;
    height: 34px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 15px;
    flex: 0 0 auto;
    transition: background 140ms ease, color 140ms ease;
}

.icon-btn:hover { background: var(--danger-pale); color: var(--danger); }

.empty {
    background: var(--surface);
    border-radius: 24px;
    padding: 48px 32px;
    text-align: center;
    color: var(--ink-4);
    font-size: 18px;
    box-shadow: var(--shadow);
}

/* --------------------------------------------------------- страницы */

.pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    flex-wrap: wrap;
    padding: 4px 0 8px;
}

.pager__btn {
    font-family: Montserrat, sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--ink-2);
    background: var(--surface);
    border-radius: 14px;
    padding: 12px 22px;
    text-decoration: none;
    box-shadow: var(--shadow);
    transition: background 140ms ease, color 140ms ease;
}

.pager__btn:hover { background: var(--green-pale); color: var(--green-text); }

/* Край списка: кнопка остаётся на месте, чтобы блок не прыгал. */
.pager__btn--off {
    opacity: 0.4;
    box-shadow: none;
    background: var(--surface-alt);
    cursor: default;
}

.pager__info {
    font-family: var(--mono);
    font-size: 14px;
    color: var(--ink-5);
    text-align: center;
    line-height: 1.5;
}

.pager__page { display: block; color: var(--ink-6); }

/* Просмотр в полный размер */
.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(12, 18, 14, 0.86);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    z-index: 100;
    cursor: zoom-out;
}

.lightbox img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 16px;
    box-shadow: 0 40px 120px -40px rgba(0, 0, 0, 0.8);
}

/* ------------------------------------------------------------------ узкие */

@media (max-width: 720px) {
    .page { padding: 20px 16px; }
    h1 { font-size: 34px; }
    .lede { font-size: 17px; }
    .card { padding: 22px; border-radius: 22px; }
    .tiles { grid-template-columns: 1fr; }
    .filters { grid-template-columns: 1fr; }
    .drop { padding: 32px 20px; }
    .drop__title { font-size: 22px; }
    .progress__pct { font-size: 26px; }
}