/* Приложение app.qrush.delivery (гость/сотрудник). Самодостаточный стиль,
   мобильный-first, «как приложение». Нижнее меню-футер — следующая фаза. */
:root {
    --app-bg: #f5f3f0;   /* тёплый фон приложения, как в оболочке отеля */
    --app-surface: #ffffff;
    --app-text: #111827;
    --app-muted: #6b7280;
    --app-border: #e6e8ec;
    --app-accent: #0369a1;
    --app-dark: #0b1220;
    --app-danger: #b91c1c;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { height: 100%; }   /* стабильная база высоты (= высота WebView), без пересчёта как у 100dvh */
body.app {
    background: var(--app-bg);
    color: var(--app-text);
    font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    line-height: 1.5;
    touch-action: manipulation;   /* без зума по двойному тапу */
    -webkit-tap-highlight-color: transparent;
}
.app-shell {
    max-width: 520px;
    margin: 0 auto;
    min-height: 100vh; min-height: 100dvh;
    /* --safe-top/--safe-bottom — закэшированные (localStorage) значения safe-area, которые
       инлайн-скрипт в <head> app_header.php выставляет С НУЛЕВОГО кадра. Иначе WKWebView на
       новом документе (напр. после logout) отдаёт env(...) = 0 и через кадры реальное значение —
       из-за чего центрированная форма авторизации «прыгает». Fallback на env() — первая загрузка
       (её прячет is-loading/сплэш) и обычный браузер. */
    padding: var(--safe-top, env(safe-area-inset-top)) 16px calc(20px + var(--safe-bottom, env(safe-area-inset-bottom)));
}

/* ═══════════ ВХОД / РЕГИСТРАЦИЯ ═══════════ */
.auth { padding-top: 34px; }
.auth__brand { text-align: center; margin-bottom: 26px; }
.auth__logo { width: 56px; height: 56px; padding: 12px; background: var(--app-dark); border-radius: 16px; }
.auth__tagline { color: var(--app-muted); font-size: 14px; margin-top: 12px; }

.auth__tabs { display: flex; gap: 6px; background: #eceff3; border-radius: 12px; padding: 4px; margin-bottom: 18px; }
.auth__tab { flex: 1; border: 0; background: none; padding: 10px; border-radius: 9px; font-size: 15px; font-weight: 700; color: var(--app-muted); cursor: pointer; }
.auth__tab.is-active { background: var(--app-surface); color: var(--app-text); box-shadow: 0 1px 3px rgba(0,0,0,.08); }

.auth__form { display: none; flex-direction: column; gap: 14px; }
.auth__form.is-active { display: flex; }

.auth__avatar {
    position: relative; align-self: center; width: 104px; height: 104px; border-radius: 50%;
    border: 0; background: #e9edf2 center/cover no-repeat; cursor: pointer; overflow: hidden; margin-bottom: 4px;
}
.auth__avatar-cam { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--app-muted); font-size: 24px; transition: opacity .15s, background .15s; }
.auth__avatar.has-img .auth__avatar-cam { opacity: 0; color: #fff; }
.auth__avatar.has-img:hover .auth__avatar-cam, .auth__avatar.has-img:active .auth__avatar-cam { opacity: 1; background: rgba(0,0,0,.35); }

.auth__field { display: flex; flex-direction: column; gap: 6px; }
.auth__field label { font-size: 12.5px; font-weight: 600; color: var(--app-muted); }
.auth__field input {
    width: 100%; border: 1px solid var(--app-border); background: var(--app-surface); color: var(--app-text);
    border-radius: 12px; padding: 13px 14px; font-size: 16px;
}
.auth__field input:focus { outline: none; border-color: var(--app-accent); box-shadow: 0 0 0 3px rgba(3,105,161,.15); }
.auth__pass { position: relative; }
.auth__pass input { padding-right: 46px; }
.auth__eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: none; color: var(--app-muted); padding: 8px 10px; cursor: pointer; font-size: 15px; }

.auth__err { color: var(--app-danger); font-size: 13.5px; }
.auth__err[hidden] { display: none; }
/* Инфо-баннер над формой регистрации (напр. «это стаф-аккаунт, зарегистрируйтесь как гость») */
.auth__note { background: rgba(3,105,161,.10); color: #0369a1; border: 1px solid rgba(3,105,161,.25); border-radius: 12px; padding: 11px 14px; font-size: 13.5px; line-height: 1.45; margin-bottom: 16px; text-align: center; }
.auth__note[hidden] { display: none; }

.auth__btn {
    margin-top: 4px; border: 0; background: var(--app-dark); color: #fff; font-size: 16px; font-weight: 700;
    padding: 15px; border-radius: 14px; cursor: pointer; transition: opacity .15s;
}
.auth__btn:disabled { opacity: .6; cursor: default; }
.auth__btn:active { opacity: .85; }

/* выбор роли */
/* Выбор роли при входе (макет заказчика 23.09.2026): тёплая шторка с хватом,
   два варианта карточками с круглой бежевой иконкой и стрелкой, серая «Cancel». */
.auth-role { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: center; background: rgba(20,16,12,.42); }
.auth-role[hidden] { display: none; }
.auth-role__box {
    width: 100%; max-width: 520px; background: #faf9f7; border-radius: 24px 24px 0 0;
    padding: 10px 26px calc(10px + env(safe-area-inset-bottom));   /* низ всех шторок: 10 + вырез, на уровне кнопки «Добавить гостя» (владелец 27.10.2026) */
    box-shadow: 0 -18px 44px rgba(30,25,20,.18);
}
.auth-role__grip { display: block; width: 40px; height: 5px; border-radius: 3px; background: #d5d1cb; margin: 0 auto 18px; }
.auth-role__title { font-size: 17px; font-weight: 800; letter-spacing: -.01em; color: var(--qr-ink, #0e1424); text-align: center; }
.auth-role__sub { font-size: 13px; color: var(--qr-muted, #6b7180); text-align: center; margin-top: 5px; }
.auth-role__opt {
    width: 100%; box-sizing: border-box; display: flex; align-items: center; gap: 22px;
    margin-top: 14px; padding: 9px 14px 9px 9px; min-height: 69px;
    border: 1px solid #efece7; border-radius: 16px; background: #fbf9f6; cursor: pointer; font-family: inherit; text-align: left;
}
.auth-role__opt + .auth-role__opt { margin-top: 8px; }
.auth-role__opt:active { transform: scale(.995); background: #f6f2ec; }
.auth-role__ic {
    flex: 0 0 auto; width: 50px; height: 50px; border-radius: 50%; background: #eddfd0;
    display: flex; align-items: center; justify-content: center; color: var(--qr-gold, #b07c2e); font-size: 22px;
}
.auth-role__tx { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.auth-role__n { font-size: 16px; font-weight: 800; color: var(--qr-ink, #0e1424); }
.auth-role__d { font-size: 13px; color: var(--qr-muted, #6b7180); }
.auth-role__go { flex: 0 0 auto; color: var(--qr-gold, #b07c2e); font-size: 16px; margin-right: 4px; }
.auth-role__cancel {
    width: 100%; box-sizing: border-box; margin-top: 11px; min-height: 51px; padding: 10px;
    border: 0; border-radius: 16px; background: #eae9ea; color: #6f747c; font-size: 16px; font-weight: 500;
    font-family: inherit; cursor: pointer;
}
.auth-role__cancel:active { background: #e2e1e2; }

/* ═══════════ ПЛАШКА «СКАЧАТЬ ПРИЛОЖЕНИЕ» (веб, гость) ═══════════ */
/* Вид плашки .ah-dlbar — в parts/app_dlbanner.php; здесь только отступ под неё.
   Селектор body.has-dlbar (а не body.app) — потому что app.css грузится и в оболочке отеля,
   когда SPA открывает оверлей посещений/заказа/профиля (js/app-hotel-nav.js ensureAppCss):
   там тело body.app-hotel.has-dlbar.ah-overlay, контент оборачивается в .app-shell, и его тоже
   надо сдвинуть под плашку — иначе оверлей наезжает на плашку (было). --dlbar-h задаёт своя
   оболочка (app.css для body.app, app-hotel.css для body.app-hotel). */
body.app.has-dlbar { --dlbar-h: 58px; }
body.has-dlbar .app-shell { padding-top: calc(var(--dlbar-h) + var(--safe-top, env(safe-area-inset-top))); }
body.has-dlbar .app-hd { top: var(--dlbar-h); }   /* липкая шапка залипает под плашкой, не под ней */

/* ═══════════ ЕДИНЫЙ ХЕДЕР ПРИЛОЖЕНИЯ (гость + стафф) ═══════════ */
/* Белый фон + полоса снизу, липкий, во всю ширину (выходит за боковой padding шелла). */
.app-hd {
    position: sticky; top: 0; z-index: 30; box-sizing: border-box; height: calc(env(safe-area-inset-top) + 60px);
    margin: calc(-1 * env(safe-area-inset-top)) -16px 28px;   /* нижний отступ 28px — контент начинается как на списке/профиле (.ah-page) */
    padding: calc(env(safe-area-inset-top) + 10px) 16px 10px;
    background: #faf9f7; border-bottom: 0; box-shadow: 0 6px 26px rgba(45, 38, 30, .07);   /* хедер v2: тёплый фон + мягкая тень (как главный/футер) */
}

/* ═══════════ СПИСОК ПОСЕЩЕНИЙ ═══════════ */
.vis { padding-top: 0; }
.vis__top { display: flex; align-items: center; justify-content: space-between; }
.vis__hi { display: flex; align-items: center; gap: 12px; min-width: 0; }
.vis__ava { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; background: #e9edf2; flex: 0 0 auto; border: 2px solid var(--app-border); }
.vis__hello { font-size: 13px; color: var(--app-muted); }
.vis__name { font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.vis__logout, .vis__gear { width: 42px; height: 42px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: var(--app-surface); border: 1px solid var(--app-border); color: var(--app-muted); text-decoration: none; }
.vis__gear:active, .vis__logout:active { background: #f0f2f5; }
.vis__actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }

/* Делаем ТОЛЬКО шапку «Hello + аватар» (.vis__top) выше и просторнее — на всех платформах
   (веб, iOS, Android). Другие хедеры на .app-hd (заказ .osv__top, профиль .acc__head, legal)
   НЕ трогаем. Формула с env(safe-area-inset-top) корректна везде: на Android env=0 (статус-бар
   держит нативный контейнер), на iOS/вебе с чёлкой добавляется реальная safe-area. */
.vis__top.app-hd {
    height: calc(env(safe-area-inset-top) + 88px);
    padding-top: calc(env(safe-area-inset-top) + 18px);
    padding-bottom: 18px;
}
/* под полоской ролей (parts/demo_bar.php) у нее свое белое поле 14px снизу: содержимое шапок поднимаем, чтобы на глаз
   от переключателя до кнопок было столько же, сколько от кнопок до низа шапки (владелец 19.10.2026) */
body.has-demobar .app-hd { padding-top: calc(env(safe-area-inset-top) + 3px); padding-bottom: 17px; }
body.has-demobar .vis__top.app-hd { padding-top: calc(env(safe-area-inset-top) + 11px); padding-bottom: 25px; }

/* ═══════════ ПРОФИЛЬ ГОСТЯ (/me) — карточка-список ═══════════ */
/* Фон приложения НЕ меняем (остаётся --app-bg). Акцент страницы — фиолетовый. */
/* Редактор каталога (css/food-admin.css, css/service.css) общий с кабинетом отеля: там акцент
   синий, а ВНУТРИ приложения он должен быть фирменным золотым. Переопределяем переменные,
   сам файл редактора остаётся прежним для веба. */
body.app, body.app-hotel {
    --ea: #b07c2e;
    --ea-05: rgba(176, 124, 46, .05);
    --ea-07: rgba(176, 124, 46, .07);
    --ea-1:  rgba(176, 124, 46, .10);
    --ea-15: rgba(176, 124, 46, .15);
    --ea-2:  rgba(176, 124, 46, .20);
    --ea-25: rgba(176, 124, 46, .25);
    --ea-35: rgba(176, 124, 46, .35);
}

/* акцент профиля - фирменное золото (был фиолетовый #6d5ef5) */
.acc { --acc: var(--qr-gold, #b07c2e); --acc-soft: var(--qr-gold-soft, #f1ece5); padding: 0 0 6px; }

/* шапка-панель: назад · заголовок · спейсер (единый стиль хедера) */
.acc__head { display: flex; align-items: center; gap: 8px; }
.acc__back { width: 40px; height: 40px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; font-size: 16px;
    border-radius: 12px; background: #fff; border: 1px solid var(--qr-line, #ece7df); color: var(--qr-ink, #0e1424); text-decoration: none;
    box-shadow: 0 1px 3px rgba(60,50,40,.06); }
.acc__back:active { transform: scale(.94); }
.acc__title { flex: 1; min-width: 0; margin: 0; text-align: center; font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.acc__sp { width: 40px; flex: 0 0 auto; }
.acc__logout { color: var(--app-muted); }   /* кнопка выхода справа в хедере профиля (как на списке посещений) */

/* аватар: белое кольцо + бейдж камеры */
.acc__avawrap { display: flex; justify-content: center; margin: 8px 0 14px; }
.acc__ava { position: relative; width: 122px; height: 122px; border-radius: 50%; border: 5px solid var(--qr-surface, #fff);
    background: var(--qr-bg-2, #f0ece6) center/cover no-repeat; box-shadow: 0 10px 26px rgba(60,50,40,.14); cursor: pointer; }
.acc__ava-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--qr-faint, #9a968f); font-size: 40px; }
.acc__ava i.acc__ava-ph { display: flex; }   /* иначе .fa-solid (подключается позже) ставит inline-block, и значок уезжает к верху круга */
.acc__cam { position: absolute; right: 2px; bottom: 2px; width: 34px; height: 34px; border-radius: 50%; background: #fff;
    display: flex; align-items: center; justify-content: center; color: var(--acc); font-size: 14px; box-shadow: 0 3px 10px rgba(60,50,40,.20); }

.acc__name { text-align: center; font-size: 24px; font-weight: 800; letter-spacing: -.01em; }
/* первый блок профиля как в регистрации (владелец 26.10.2026): квадратное фото слева, справа карточки имени и почты */
.acc-hero { display: grid; grid-template-columns: 38% minmax(0, 1fr); gap: 12px; margin: 8px 0 12px; }   /* все промежутки блока 12 */
.acc-hero .acc__ava { width: auto; height: auto; aspect-ratio: 1; border: 0; border-radius: 18px; background-color: var(--qr-surface, #fff);
    box-shadow: var(--qr-sh-card, 0 4px 18px rgba(60,50,40,.06)); }
.acc-hero .acc__cam { right: 8px; bottom: 8px; }
.acc-hero__f { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.acc-hero__in { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 0 14px; border-radius: 18px;
    background: var(--qr-surface, #fff); box-shadow: var(--qr-sh-card, 0 4px 18px rgba(60,50,40,.06)); cursor: text; }
.acc-hero__ro { font-size: 16px; font-weight: 600; text-align: left; letter-spacing: 0; color: var(--app-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-hero + .acc-err { margin: -4px 4px 12px; }
.acc__name + .acc-list { margin-top: 22px; }
.acc__back.acc__back--sp { visibility: hidden; pointer-events: none; }   /* пустое место слева в шапке: заголовок по центру (pages/app/visits.php) */   /* плашку роли и должности под именем убрали (владелец 20.10.2026), отступ до списка прежний */
.acc__member { display: flex; width: max-content; margin: 8px auto 22px; align-items: center; gap: 7px;
    background: var(--acc-soft); color: var(--acc); font-size: 13px; font-weight: 700; padding: 7px 14px; border-radius: 999px; }

/* карточка-список полей */
.acc-list { background: var(--qr-surface, #fff); border: 0; border-radius: 18px; padding: 4px 16px;
    box-shadow: var(--qr-sh-card, 0 4px 18px rgba(60,50,40,.06)); }
.acc-row { display: flex; align-items: center; gap: 14px; padding: 15px 0; cursor: text; }
.acc-row__ic { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px; background: var(--acc-soft); color: var(--acc);
    display: flex; align-items: center; justify-content: center; font-size: 16px; }
.acc-row__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.acc-row__label { font-size: 12.5px; color: var(--app-muted); font-weight: 600; }
.acc-row__inp { border: 0; background: none; padding: 0; font-size: 16px; font-weight: 600; color: var(--app-text); width: 100%; }
.acc-row__inp:focus { outline: none; }
.acc-row__inp::placeholder { color: #c2c8d0; font-weight: 500; letter-spacing: .06em; }
.acc-row__chev { color: var(--qr-faint, #9a968f); font-size: 14px; flex: 0 0 auto; }
.acc-row--link { cursor: pointer; text-decoration: none; }
/* строка-кнопка (напр. «Звук уведомлений»): сбрасываем дефолт <button> → вид как у остальных строк */
.acc-row--btn { width: 100%; background: transparent; border: 0; margin: 0; padding: 15px 0; text-align: left; font: inherit; color: inherit; -webkit-appearance: none; appearance: none; cursor: pointer; }
.acc-row__val { font-size: 16px; font-weight: 600; color: var(--app-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Выбор языка в профиле. ⚠ Кегль 16px обязателен: при меньшем iOS увеличивает
   страницу, когда поле получает фокус. Родную стрелку убираем, в строке уже
   есть своя справа. */
/* Язык интерфейса - обычный выпадающий список. Строка выглядит как соседние
   (подпись и значение), справа галочка вниз, а сам <select> лежит поверх всей
   строки и прозрачен.
   ⚠ Именно поверх, а не внутри строки: тап по <label> открывает список не во всех
     мобильных браузерах, а по самому списку - всегда.
   ⚠ Кегль 16px обязателен: при меньшем iOS зумит страницу на фокусе. */
.acc-row--lang { position: relative; }
/* Тема (Профиль): образец цвета в строке и раскрывающийся список под ней (pages/app/account.php, js/app-account.js) */
.acc-th__cur { display: flex; align-items: center; gap: 8px; }
.acc-th__dot { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
#thOpen.is-open .acc-row__chev { transform: rotate(180deg); }
.acc-row__chev { transition: transform .2s ease; }
.acc-th { display: flex; flex-direction: column; padding: 0 0 8px 50px; }
.acc-th[hidden] { display: none; }
.acc-th__opt { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 4px; border: 0; border-radius: 10px; background: none;
    font: inherit; font-size: 15px; font-weight: 600; color: var(--app-text); text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.acc-th__opt:active { background: rgba(0,0,0,.04); }
.acc-th__opt span { flex: 1; min-width: 0; }
.acc-th__ok { visibility: hidden; color: var(--qr-gold, #b07c2e); font-size: 14px; }
.acc-th__opt.is-on .acc-th__ok { visibility: visible; }

.acc-row__sel {
    appearance: none;
    -webkit-appearance: none;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    border: 0;
    padding: 0;
    background: transparent;
    font: inherit;
    font-size: 16px;
    color: transparent;
    opacity: 0;
    cursor: pointer;
}

.acc-row__sel:focus { outline: none; }
.acc-row--lang .acc-row__chev { font-size: 13px; }
.acc-row--lang:focus-within .acc-row__label { color: var(--app-gold, #b27a31); }
.acc-row__div { height: 1px; background: var(--qr-line, #ece7df); }
.acc-eye { position: static; transform: none; width: 44px; height: 44px; flex: 0 0 auto; display: flex; align-items: center;
    justify-content: center; border: 0; border-radius: 12px; background: var(--app-bg); color: var(--app-muted); cursor: pointer; font-size: 15px; padding: 0; }
.acc-eye:active { background: #eceef2; }
.acc-err { padding: 0 0 12px 56px; margin: -4px 0 0; }
.acc-err.is-ok { color: #16a34a; }
.auth__err.is-ok { color: #16a34a; }

/* удаление аккаунта — отдельная красная карточка */
/* display перебивает атрибут hidden - без этой строки скрытая ссылка видна */
.acc-getapp[hidden] { display: none; }
.acc-getapp { width: 100%; margin-top: 18px; display: flex; align-items: center; gap: 14px; text-align: left; text-decoration: none; color: inherit;
    border: 0; background: var(--qr-surface, #fff); border-radius: 18px; padding: 16px; cursor: pointer;
    box-shadow: var(--qr-sh-card, 0 4px 18px rgba(60,50,40,.06)); }
.acc-getapp:active { background: #faf8f5; }
.acc-getapp__ic { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px; background: var(--qr-gold-soft, #f1ece5); color: var(--qr-gold, #b07c2e);
    display: flex; align-items: center; justify-content: center; font-size: 18px; }
.acc-getapp__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.acc-getapp__ttl { font-size: 16px; font-weight: 700; color: var(--app-text); }
.acc-getapp__sub { font-size: 13px; color: var(--app-muted); }
.acc-getapp__chev { color: var(--app-muted); font-size: 14px; flex: 0 0 auto; opacity: .5; }

.acc-del { width: 100%; margin-top: 18px; display: flex; align-items: center; gap: 14px; text-align: left;
    border: 0; background: var(--qr-danger-soft, #fbecea); border-radius: 18px; padding: 16px; cursor: pointer; }
.acc-del:active { background: rgba(220,38,38,.10); }
.acc-del__ic { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px; background: rgba(192,57,43,.12); color: var(--qr-danger, #c0392b);
    display: flex; align-items: center; justify-content: center; font-size: 16px; }
.acc-del__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.acc-del__ttl { font-size: 16px; font-weight: 700; color: var(--qr-danger, #c0392b); }
.acc-del__sub { font-size: 13px; color: var(--app-muted); }
.acc-del__chev { color: #e2a3a3; font-size: 14px; flex: 0 0 auto; }
/* «Выйти» - перед удалением, в том же виде, но спокойным цветом (владелец 26.10.2026) */
.acc-del.acc-out { text-decoration: none; background: var(--qr-surface, #fff); box-shadow: var(--qr-sh-card, 0 4px 18px rgba(60,50,40,.06)); }
.acc-del.acc-out:active { background: #faf8f5; }
.acc-out .acc-del__ic { background: var(--acc-soft); color: var(--acc); }
.acc-out .acc-del__ttl { color: var(--app-text); }
.acc-out .acc-del__chev { color: var(--app-muted); opacity: .5; }
.acc-del.acc-out, .acc-out + .acc-del { margin-top: 12px; }

/* футер */
.acc-foot { text-align: center; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--qr-line, #ece7df);
    color: var(--app-muted); font-size: 13px; line-height: 1.7; }
.acc-foot__links a { color: var(--acc); text-decoration: none; font-weight: 600; }
.acc-foot__links a:hover { text-decoration: underline; }
.acc-foot__dot { color: var(--app-muted); margin: 0 6px; }
.acc-foot__pb { margin-top: 14px; }
.acc-foot__logo { display: inline-block; margin-top: 8px; }
.acc-foot__logo img { display: block; width: 120px; height: auto; }
.acc-foot__copy { margin-top: 12px; font-size: 12px; color: #9aa1ad; }

/* Гостевые документы (/legal/privacy, /legal/terms) — читаемая типографика */
.legal { padding: 0 0 44px; color: var(--app-text); line-height: 1.6; }
/* Заголовок и отступ до хедера — как в разделах Еда/Магазин/Сервис (26px/800, прижат к верху):
   .app-hd даёт 28px снизу, margin-top:-4px → ~24px под баром, как --ah-content-top в разделах отеля. */
.legal__h1 { font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; margin: -4px 0 4px; }
.legal__meta { color: var(--app-muted); font-size: 13px; margin-bottom: 18px; }
.legal__h2 { font-size: 17px; font-weight: 800; margin: 22px 0 8px; }
.legal p { font-size: 15px; margin-bottom: 12px; }
.legal__ul { margin: 0 0 12px; padding-left: 20px; }
.legal__ul li { font-size: 15px; margin-bottom: 6px; list-style: disc; }
.legal__pb { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--app-border); color: var(--app-muted); font-size: 13px; }
/* незаполненное отелем поле — подсвечиваем, чтобы было видно до заполнения в настройках */
.legal-ph { color: #c0392b; background: rgba(192,57,43,.08); padding: 0 4px; border-radius: 4px; font-style: italic; }

.acc-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(8px); z-index: 3000;
    display: inline-flex; align-items: center; gap: 8px; background: var(--app-dark); color: #fff; padding: 10px 18px;
    border-radius: 999px; font-size: 14px; font-weight: 600; box-shadow: 0 8px 24px rgba(0,0,0,.25); opacity: 0;
    transition: opacity .2s, transform .2s; }
.acc-toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }
.acc-toast[hidden] { display: none; }
.acc-toast i { color: #4ade80; }

/* ═══ Экран «Посещения» по макету заказчика (23.09.2026) ═══
   Золотая кнопка «Add a trip» с узором справа, карточка поездки: фото сверху,
   ярлык поездки на фото, белое тело со строками и круглой кнопкой-стрелкой. */
.vis__add {
    position: relative; overflow: hidden; width: 100%; display: flex; align-items: center; justify-content: center; gap: 12px;
    border: 0; background-color: #ae742e; color: #fff; font-size: 18px; font-weight: 800; letter-spacing: -.01em;
    min-height: 64px; box-sizing: border-box; padding: 16px; border-radius: 14px; cursor: pointer; margin-bottom: 22px;
    text-decoration: none; box-shadow: 0 8px 20px rgba(110,72,20,.22);
    background-blend-mode: normal;
    /* узор с макета: пальмовый лист и волны в правой части кнопки */
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 120' preserveAspectRatio='xMaxYMid slice'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.12' stroke-width='2'%3E%3Cpath d='M104 -8c11 28 -13 43 0 69s11 47 0 73'/%3E%3Cpath d='M115 -8c11 28 -13 43 0 69s11 47 0 73'/%3E%3Cpath d='M126 -8c11 28 -13 43 0 69s11 47 0 73'/%3E%3Cpath d='M137 -8c11 28 -13 43 0 69s11 47 0 73'/%3E%3Cpath d='M148 -8c11 28 -13 43 0 69s11 47 0 73'/%3E%3Cpath d='M159 -8c11 28 -13 43 0 69s11 47 0 73'/%3E%3Cpath d='M170 -8c11 28 -13 43 0 69s11 47 0 73'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='b'%3E%3CfeGaussianBlur stdDeviation='1.1'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23b)' fill='%23000000' fill-opacity='.15'%3E%3Cpath d='M241 -9Q231.3 -11.0 219 -9Q234.8 -16.7 241 -9Z'/%3E%3Cpath d='M241 -9Q247.1 -1.3 251 11Q250.6 -7.0 241 -9Z'/%3E%3Cpath d='M238 -4Q225.7 -6.4 212 -6Q230.1 -13.7 238 -4Z'/%3E%3Cpath d='M238 -4Q245.7 5.6 252 18Q250.1 -1.7 238 -4Z'/%3E%3Cpath d='M235 1Q220.4 -1.4 205 -3Q225.7 -10.3 235 1Z'/%3E%3Cpath d='M235 1Q244.0 12.5 253 25Q249.3 3.6 235 1Z'/%3E%3Cpath d='M232 6Q215.3 4.0 199 1Q221.3 -6.4 232 6Z'/%3E%3Cpath d='M232 6Q242.1 19.4 253 32Q248.1 9.0 232 6Z'/%3E%3Cpath d='M229 11Q210.4 9.6 193 5Q217.0 -2.2 229 11Z'/%3E%3Cpath d='M229 11Q240.0 26.3 253 39Q246.7 14.6 229 11Z'/%3E%3Cpath d='M226 17Q205.7 15.5 188 10Q212.9 2.5 226 17Z'/%3E%3Cpath d='M226 17Q237.8 33.2 252 45Q244.9 20.2 226 17Z'/%3E%3Cpath d='M222 23Q201.2 21.6 183 15Q208.8 7.6 222 23Z'/%3E%3Cpath d='M222 23Q235.3 40.0 251 52Q242.9 26.0 222 23Z'/%3E%3Cpath d='M219 29Q197.1 27.9 178 21Q204.9 13.2 219 29Z'/%3E%3Cpath d='M219 29Q232.7 46.7 249 59Q240.5 32.0 219 29Z'/%3E%3Cpath d='M216 35Q193.2 34.5 174 27Q201.1 19.1 216 35Z'/%3E%3Cpath d='M216 35Q230.0 53.4 247 65Q237.9 38.0 216 35Z'/%3E%3Cpath d='M213 42Q189.6 41.2 170 34Q197.4 25.5 213 42Z'/%3E%3Cpath d='M213 42Q227.1 60.0 245 71Q234.9 44.3 213 42Z'/%3E%3Cpath d='M209 49Q186.3 48.1 166 41Q194.0 32.3 209 49Z'/%3E%3Cpath d='M209 49Q224.0 66.5 242 78Q231.7 50.7 209 49Z'/%3E%3Cpath d='M206 55Q183.3 55.1 164 49Q190.7 39.5 206 55Z'/%3E%3Cpath d='M206 55Q220.7 72.9 238 84Q228.1 57.3 206 55Z'/%3E%3Cpath d='M203 62Q180.6 62.3 161 56Q187.6 47.1 203 62Z'/%3E%3Cpath d='M203 62Q217.3 79.2 234 90Q224.3 64.0 203 62Z'/%3E%3Cpath d='M200 70Q178.3 69.6 159 65Q184.8 55.1 200 70Z'/%3E%3Cpath d='M200 70Q213.7 85.4 230 96Q220.2 70.9 200 70Z'/%3E%3Cpath d='M196 77Q176.3 77.1 158 73Q182.2 63.5 196 77Z'/%3E%3Cpath d='M196 77Q209.9 91.6 225 102Q215.8 78.0 196 77Z'/%3E%3Cpath d='M193 84Q174.6 84.6 157 82Q179.8 72.2 193 84Z'/%3E%3Cpath d='M193 84Q206.0 97.8 220 109Q211.2 85.3 193 84Z'/%3E%3Cpath d='M190 92Q173.2 92.3 157 91Q177.7 81.2 190 92Z'/%3E%3Cpath d='M190 92Q201.9 103.9 214 115Q206.4 92.8 190 92Z'/%3E%3Cpath d='M187 100Q172.1 100.1 157 101Q175.8 90.5 187 100Z'/%3E%3Cpath d='M187 100Q197.6 110.1 208 121Q201.4 100.4 187 100Z'/%3E%3Cpath d='M184 108Q171.3 108.0 158 111Q174.3 100.0 184 108Z'/%3E%3Cpath d='M184 108Q193.1 116.2 201 127Q196.1 108.2 184 108Z'/%3E%3Cpath d='M181 116Q170.9 116.1 159 121Q173.2 109.8 181 116Z'/%3E%3Cpath d='M181 116Q188.4 122.4 194 133Q190.6 116.1 181 116Z'/%3E%3C/g%3E%3Cpath d='M244 -14C224 18 198 66 178 124' fill='none' stroke='%23000000' stroke-opacity='.2' stroke-width='3'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right -6px center; background-size: auto 165%;
}
.vis__add:active { transform: translateY(1px); }

.vis__sec { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--app-muted); margin: 4px 2px 12px; }

.visit {
    display: block; position: relative; background: #fff; border: 0;
    border-radius: 16px; padding: 0; overflow: hidden; margin-bottom: 14px; box-shadow: 0 2px 12px rgba(60,50,40,.06);
    text-decoration: none; color: inherit;
}
.visit:active { transform: scale(.995); }
.visit__photo {
    position: relative; width: 100%; aspect-ratio: 2 / 1; border-radius: 0; background: #f0ece6 center/cover no-repeat;
    display: flex; align-items: center; justify-content: center; color: #c2b9aa; font-size: 30px;
}
/* ярлык поездки поверх фото */
.visit__badge { position: absolute; left: 14px; top: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    background: #e8d7be; color: #8a6524; border-radius: 999px; padding: 7px 14px; font-size: 13.5px; font-weight: 600; line-height: 1.2; }
.visit__badge-ic { flex: 0 0 auto; font-size: 13px; line-height: 1; }
.visit__badge-tx { display: block; }
.visit__body { position: relative; min-width: 0; display: flex; flex-direction: column; gap: 9px; padding: 16px 74px 18px 16px; }
.visit__hotel { font-size: 19px; font-weight: 800; letter-spacing: -.01em; color: var(--app-dark, #0e1424); }
.visit__place, .visit__dates, .visit__room { font-size: 14px; color: var(--app-muted); display: flex; align-items: center; gap: 9px; }
.visit__room { font-weight: 400; }
/* круглая кнопка-стрелка справа, по центру тела */
.visit__go { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 50px; height: 50px;
    border-radius: 50%; background: #f9f6f1; color: var(--qr-gold, #b07c2e); display: flex; align-items: center;
    justify-content: center; font-size: 17px; }
.visit__place { align-items: flex-start; }   /* иконку локации — по верхнему краю текста */
.visit__place i, .visit__dates i, .visit__room i { color: #9aa0ab; width: 16px; text-align: center; }
.visit__place i { margin-top: 3px; }

.vis--past .visit { opacity: .72; }

/* окно «приезжайте снова»: выходит по нажатию на прошлую поездку */
.rebook { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; padding: 24px; }
.rebook[hidden] { display: none; }
.rebook__ov { position: absolute; inset: 0; background: rgba(20, 16, 12, .5); }
.rebook__box { position: relative; width: 100%; max-width: 340px; background: #faf9f7; border-radius: 22px;
    padding: 26px 22px 22px; text-align: center; box-shadow: 0 18px 44px rgba(30, 25, 20, .22); }
.rebook__ic { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%; background: var(--qr-gold-soft, #f1ece5);
    display: flex; align-items: center; justify-content: center; font-size: 26px; color: var(--qr-gold, #b07c2e); }
.rebook__ttl { font-size: 20px; font-weight: 800; letter-spacing: -.02em; color: var(--app-dark, #0e1424); }
.rebook__sub { margin-top: 8px; font-size: 14.5px; line-height: 1.4; color: var(--app-muted); }
.rebook__btn { display: block; margin-top: 20px; padding: 14px; border-radius: 14px; background: var(--qr-gold, #b07c2e);
    color: #fff; font-size: 16px; font-weight: 800; text-decoration: none; }
.rebook__later { margin-top: 10px; width: 100%; padding: 12px; border: 0; background: none; cursor: pointer;
    font-size: 15px; font-weight: 600; color: var(--app-muted); }

.vis__empty { text-align: center; color: var(--app-muted); padding: 48px 20px; }
/* заглушки ленты стаффа — по центру свободной высоты экрана (под шапкой+табами, над футером) */
/* ⚠ Пустой список НЕ должен делать экран выше окна. Раньше тут стояло
   min-height: calc(100dvh - 300px): число подогнали на глаз, и вместе с шапкой, вкладками и
   нижней панелью экран выходил на 62px выше окна - список пустой, а экран прокручивался
   (нашёл заказчик 25.09.2026). Теперь пустой блок просто занимает ОСТАВШЕЕСЯ место:
   колонка флексом от оболочки до списка, никаких подобранных чисел. */
.ord-list .vis__empty { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 120px; padding: 20px; flex: 1 1 auto; }
body.app .app-shell { display: flex; flex-direction: column; }
body.app .app-shell > * { flex: 0 0 auto; }
body.app .app-shell > .vis { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
body.app .vis > .ord-list:not([hidden]) { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
/* маяк подгрузки «выполненных»: виден, пока есть что грузить */
.ord-more { display: flex; align-items: center; justify-content: center; padding: 18px 0 8px; color: var(--app-muted); font-size: 18px; }
.ord-more[hidden] { display: none; }
.vis__empty i { font-size: 46px; opacity: .35; }
.vis__empty p { margin-top: 14px; font-size: 15px; }

/* ═══════════ СКАНЕР QR (гость) ═══════════ */
.scan { padding-top: 14px; }
.scan__top { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.scan__back { width: 40px; height: 40px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
    border-radius: 12px; background: var(--app-surface); border: 1px solid var(--app-border); color: var(--app-text); text-decoration: none; }
.scan__title { font-size: 18px; font-weight: 800; }
.scan__stage { position: relative; width: 100%; aspect-ratio: 1/1; border-radius: 20px; overflow: hidden; background: #0b1220; }
.scan__stage video { width: 100%; height: 100%; object-fit: cover; }
.scan__frame { position: absolute; inset: 14%; border: 3px solid rgba(255,255,255,.9); border-radius: 18px;
    box-shadow: 0 0 0 100vmax rgba(0,0,0,.35); }
.scan__hint { color: var(--app-muted); font-size: 14px; text-align: center; margin-top: 16px; }
.scan__err { color: var(--app-danger); font-size: 14px; text-align: center; margin-top: 12px; }
.scan__err[hidden] { display: none; }

/* ═══════════ БРОНИ ОТЕЛЯ (сотрудник) ═══════════ */
.stbk { display: flex; align-items: center; gap: 12px; background: var(--app-surface); border: 1px solid var(--app-border);
    border-radius: 16px; padding: 14px; margin-bottom: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.05); }
.stbk__body { min-width: 0; flex: 1; }
.stbk__name { font-size: 16px; font-weight: 700; }
.stbk__room { color: var(--app-muted); font-weight: 600; font-size: 14px; }
.stbk__dates { color: var(--app-muted); font-size: 13.5px; margin-top: 4px; display: flex; align-items: center; gap: 6px; }
.stbk__dates i { color: var(--qr-gold, #b07c2e); }
.stbk__claimed { color: var(--qr-green, #12a046); font-size: 12.5px; font-weight: 600; margin-top: 5px; }
.stbk__qr { flex: 0 0 auto; width: 52px; height: 52px; border: 0; border-radius: 16px; background: var(--qr-gold, #b07c2e); color: #fff;
    font-size: 22px; cursor: pointer; display: flex; align-items: center; justify-content: center; }

/* ═══════════ СЕТКА АКТИВНЫХ БРОНЕЙ (сотрудник) ═══════════ */
.stgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }   /* minmax(0): длинное имя гостя не распирает столбец за край */
.stcard { position: relative; min-width: 0; display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: inherit;
    background: var(--qr-surface, #fff); border: 0; border-radius: 18px; padding: 16px 14px;
    box-shadow: var(--qr-sh-card, 0 4px 18px rgba(60, 50, 40, .06)); }
.stcard:active { background: #faf8f5; }
/* Плитка «+ новая бронь» (право Booking) */
.stcard--add { align-items: center; justify-content: center; gap: 8px; border: 1px dashed var(--qr-gold, #b07c2e); background: var(--qr-gold-soft, #f1ece5); color: var(--qr-gold, #b07c2e); box-shadow: none; min-height: 96px; }
.stcard__plus { width: 40px; height: 40px; border-radius: 50%; background: var(--qr-gold, #b07c2e); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.stcard__addtx { font-size: 13px; font-weight: 700; color: var(--qr-gold, #b07c2e); }
.stcard__room { font-size: 24px; font-weight: 800; letter-spacing: -.02em; color: var(--qr-gold, #b07c2e); }
.stcard__room i { font-size: 20px; opacity: .6; }
.stcard__name { font-size: 15px; font-weight: 700; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stcard__dates { color: var(--qr-muted, #6b7180); font-size: 13px; }
.stcard__ok { position: absolute; top: 12px; right: 12px; color: var(--qr-green, #12a046); font-size: 16px; }

/* ═══════════ СТРАНИЦА БРОНИ (сотрудник) ═══════════ */
.stview { padding-top: 6px; }
/* Форма создания брони сотрудником (мобильная) */
.nb-form { padding: 6px 16px 28px; display: flex; flex-direction: column; gap: 14px; }
.nb-row { display: flex; flex-direction: column; gap: 14px; }   /* даты в столбик — iOS date-инпут не сжимается в узкой колонке */
.nb-row .nb-field { flex: none; min-width: 0; }
/* даты рядом: заезд слева, выезд справа (владелец 26.10.2026). Поле даты в WebKit не сжимается само - ширину держит
   колонка с min-width: 0, у поля width: 100% и min-width: 0 */
.nb-row.nb-row--dates { flex-direction: row; gap: 12px; }
.nb-row--dates .nb-field { flex: 1 1 0; }
.nb-row--dates .nb-input[type="date"] { min-width: 0; max-width: 100%; }
/* подсказка в пустом поле даты: поверх поля, нажатия проходят в само поле; пустое значение поля прячем, чтобы не
   просвечивали серые цифры браузера (на компьютере он рисует сегодняшнюю дату) */
.nb-date { position: relative; display: block; }
.nb-date__ph { position: absolute; left: 14px; right: 10px; top: 50%; transform: translateY(-50%); pointer-events: none; overflow: hidden;
    white-space: nowrap; text-overflow: ellipsis; font-size: 16px; color: #a6abb5; display: none; }
.nb-date.is-empty .nb-date__ph { display: block; }
.nb-date.is-empty .nb-input { color: transparent; }
.nb-date.is-empty .nb-input::-webkit-datetime-edit { color: transparent; }
.nb-step { display: flex; flex-direction: column; gap: 14px; min-width: 0; margin: 0; padding: 0; border: 0; transition: opacity .2s ease; }
.nb-step:disabled { opacity: .4; }
.nb-field { display: flex; flex-direction: column; gap: 6px; }
.nb-field label { font-size: 13px; color: var(--qr-muted, #6b7180); font-weight: 600; }
.nb-input { width: 100%; min-width: 0; box-sizing: border-box; border: 0; background-color: var(--qr-surface, #fff); box-shadow: var(--qr-sh-card, 0 4px 18px rgba(60,50,40,.06)); color: var(--qr-ink, #0e1424); border-radius: 16px; padding: 13px 14px; font-size: 16px; font-family: inherit; }
/* В WebKit select со штатным видом игнорирует padding и радиус — строка выходила 21px вместо 44px
   и выглядела как текст без поля. Рисуем свою стрелку. */
select.nb-input { -webkit-appearance: none; appearance: none; padding-right: 40px; line-height: 18px;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%239a968f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 15px center; }
/* iOS игнорирует width у нативного date-инпута → снимаем нативный вид, чтобы подчинялся контейнеру */
.nb-input[type="date"] { -webkit-appearance: none; appearance: none; text-align: left; height: 44px; line-height: 18px; }   /* без высоты поле даты в WebKit выходит на 4px выше остальных */
.nb-input:focus { outline: 0; box-shadow: var(--qr-sh-card, 0 4px 18px rgba(60,50,40,.06)), 0 0 0 2px rgba(176, 124, 46, .30); }
textarea.nb-input { resize: none; }
.nb-err { color: var(--qr-danger, #c0392b); font-size: 13.5px; }
.nb-err[hidden] { display: none; }
.nb-btn { margin-top: 4px; border: 0; background: var(--qr-gold, #b07c2e); color: #fff; border-radius: 16px; padding: 17px; font-size: 16px; font-weight: 800; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px;
    box-shadow: 0 6px 18px rgba(172, 114, 36, .26); }
.nb-btn:disabled { opacity: .6; }
.stview__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.stview__back { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 12px;
    background: var(--app-surface); border: 1px solid var(--app-border); color: var(--app-text); text-decoration: none; }
.stview__ttl { font-size: 18px; font-weight: 800; }
.stview__top span { width: 40px; }
.stview__guest { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; margin: 10px 0 22px;
    min-height: 196px; }   /* строка «Added by guest» есть не всегда — держим высоту, иначе скелетон и контент расходятся */
.stview__ava { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; background: var(--qr-bg-2, #f0ece6); }
.stview__name { font-size: 22px; font-weight: 800; margin-top: 6px; }
.stview__dates { color: var(--app-muted); font-size: 15px; display: flex; align-items: center; gap: 8px; }
.stview__dates i { color: var(--qr-gold, #b07c2e); }
.stview__claimed { color: var(--qr-green, #12a046); font-size: 13.5px; font-weight: 600; display: flex; align-items: center; gap: 6px; }

.stview__qrwrap { background: var(--qr-surface, #fff); border: 0; border-radius: 18px; padding: 26px 20px;
    display: flex; flex-direction: column; align-items: center; gap: 16px; box-shadow: var(--qr-sh-card, 0 4px 18px rgba(60,50,40,.06)); }
.stview__qr { display: flex; align-items: center; justify-content: center; width: 240px; height: 240px; }   /* размер задан заранее: пока qrcode.js рисует картинку, карточка не схлопывается и низ не прыгает */
.stview__qr img, .stview__qr canvas { border-radius: 8px; }
.stview__hint { color: var(--app-muted); font-size: 14px; text-align: center; max-width: 280px; line-height: 1.5; }
.stview__del { display: flex; align-items: center; justify-content: center; gap: 8px; width: fit-content; margin: 22px auto 0; padding: 13px 24px; border: 0; background: var(--qr-danger-soft, #fbecea); color: var(--qr-danger, #c0392b); border-radius: 16px; font-size: 15px; font-weight: 700; cursor: pointer; }
.stview__del:active { transform: scale(.98); }
/* Кнопки отправки брони на e-ink экран отеля (Display/Clear) под QR */
.stview__screen { display: flex; flex-direction: column; align-items: center; gap: 10px; width: fit-content; margin: 16px auto 0; }
.stview__display { display: inline-flex; align-items: center; gap: 8px; padding: 13px 26px; border: 0; border-radius: 16px; background: var(--qr-gold, #b07c2e); color: #fff; font-size: 15px; font-weight: 700; cursor: pointer; }
.stview__display.is-on { background: var(--qr-danger, #c0392b); }   /* бронь на экране → кнопка = «Отключить» */
.stview__display:active { transform: scale(.98); }
.stview__display:disabled { opacity: .55; cursor: default; }
.stview__clear { border: 0; background: none; color: var(--app-muted); font-size: 14px; font-weight: 600; cursor: pointer; padding: 4px 8px; }
.stview__screen-msg { font-size: 13.5px; font-weight: 700; color: #16a34a; }

/* ═══════════ МОДАЛКА QR ═══════════ */
.qrm { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: 20px;
    background: rgba(0,0,0,.55); }
.qrm[hidden] { display: none; }
.qrm__box { background: var(--app-surface); border-radius: 20px; padding: 22px; text-align: center; max-width: 340px; width: 100%; }
.qrm__title { font-size: 16px; font-weight: 800; margin-bottom: 6px; }
.qrm__meta { color: var(--app-muted); font-size: 13.5px; margin-bottom: 16px; }
.qrm__code { display: flex; align-items: center; justify-content: center; }
.qrm__code img, .qrm__code canvas { border-radius: 8px; }
.qrm__close { margin-top: 18px; width: 100%; border: 0; background: var(--app-dark); color: #fff; font-weight: 700;
    font-size: 15px; padding: 13px; border-radius: 12px; cursor: pointer; }

/* ═══════════ ПРИГЛАШЕНИЕ СОТРУДНИКА (invite.qrush.delivery) ═══════════ */
.inv { padding-top: 26px; }
.inv-banner { background: rgba(3,105,161,.08); border: 1px solid rgba(3,105,161,.18); color: var(--app-text);
    border-radius: 14px; padding: 14px 16px; font-size: 14.5px; line-height: 1.5; text-align: center; margin-bottom: 22px; }
.inv-banner b { font-weight: 800; }
.inv [data-authpane], .inv form { display: flex; flex-direction: column; gap: 14px; }
.inv-who { text-align: center; margin: -2px 0 6px; }
.inv-who__name { font-size: 20px; font-weight: 800; }
.inv-who__pos { color: var(--app-muted); font-size: 14px; margin-top: 2px; }

.inv-bad { text-align: center; padding: 70px 20px; color: var(--app-muted); }
.inv-bad i { font-size: 48px; opacity: .4; }
.inv-bad h2 { color: var(--app-text); font-size: 22px; margin: 16px 0 8px; }
.inv-bad p { font-size: 15px; }

.inv-done { text-align: center; padding: 46px 8px 20px; }
.inv-done__ico i { font-size: 58px; color: #16a34a; }
.inv-done h2 { font-size: 24px; font-weight: 800; margin: 16px 0 8px; }
.inv-done p { color: var(--app-muted); font-size: 15px; margin-bottom: 24px; }
.inv-applink { display: block; text-decoration: none; text-align: center; }
.inv-weblink { display: inline-block; margin-top: 14px; color: var(--app-muted); font-size: 14px; text-decoration: underline; }

/* «Уже есть аккаунт? Войдите» + вход существующим аккаунтом */
.inv-alt { text-align: center; margin-top: 16px; font-size: 14.5px; color: var(--app-muted); }
.inv-alt a { color: #0369a1; font-weight: 700; text-decoration: none; }
.inv-alt a:active { opacity: .7; }

/* попап «уже сотрудник в другом отеле» */
.inv-pop { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center;
    padding: calc(env(safe-area-inset-top) + 20px) 20px calc(env(safe-area-inset-bottom) + 20px); }
.inv-pop[hidden] { display: none; }
.inv-pop__ov { position: absolute; inset: 0; background: rgba(0,0,0,.55); }
.inv-pop__box { position: relative; width: min(360px, 100%); background: var(--app-surface); border-radius: 18px;
    box-shadow: 0 20px 50px rgba(0,0,0,.3); padding: 26px 22px 22px; text-align: center; }
.inv-pop__ico i { font-size: 44px; color: #dc2626; }
.inv-pop__t { font-size: 19px; font-weight: 800; color: var(--app-text); margin: 14px 0 8px; }
.inv-pop__sub { font-size: 14.5px; color: var(--app-muted); line-height: 1.5; margin-bottom: 20px; }

/* ═══════════ КВАДРАТНЫЙ КРОППЕР АВАТАРА ═══════════ */
.acrop { position: fixed; inset: 0; z-index: 200; display: none; }
.acrop.is-open { display: block; }
.acrop__ov { position: absolute; inset: 0; background: rgba(0,0,0,.6); }
.acrop__dlg { position: relative; background: var(--app-surface); border-radius: 18px; box-shadow: 0 20px 60px rgba(0,0,0,.35);
    width: min(400px, calc(100% - 32px)); margin: 8vh auto 0; padding: 18px; }
.acrop__title { font-size: 13px; color: var(--app-muted); text-align: center; margin-bottom: 12px; }
.acrop__stage { position: relative; width: 100%; aspect-ratio: 1/1; border-radius: 12px; overflow: hidden; background: #111;
    touch-action: none; cursor: grab; user-select: none; }
.acrop__stage:active { cursor: grabbing; }
.acrop__stage img { position: absolute; top: 0; left: 0; transform-origin: 0 0; will-change: transform; max-width: none; }
.acrop__frame { position: absolute; inset: 0; pointer-events: none; box-shadow: 0 0 0 1px rgba(255,255,255,.5) inset; }
.acrop__frame--circle { border-radius: 50%; box-shadow: 0 0 0 2000px rgba(0,0,0,.45); }
.acrop__zoom { width: 100%; margin: 14px 0; }
.acrop__actions { display: flex; gap: 10px; justify-content: flex-end; }
.acrop__btn { border: 1px solid var(--app-border); background: var(--app-surface); color: var(--app-text);
    padding: 11px 20px; border-radius: 12px; font-size: 14px; font-weight: 700; cursor: pointer; }
.acrop__btn--p { background: var(--app-dark); color: #fff; border-color: var(--app-dark); }

/* ── шапка стафф-приложения: должность + рейтинг звёздами ── */
.vis__hi-txt { min-width: 0; }
.staff-sub { display: flex; align-items: center; gap: 10px; margin-top: 3px; flex-wrap: wrap; }
.staff-pos { color: var(--app-muted); font-size: 14px; font-weight: 600; }
.staff-stars { display: inline-flex; align-items: center; gap: 2px; color: #f5a623; font-size: 13px; line-height: 1; }
.staff-stars__n { color: var(--app-muted); font-size: 12.5px; margin-left: 4px; font-weight: 600; }

/* ═══════════ ЛЕНТА ЗАКАЗОВ (сотрудник) ═══════════ */
/* Переключатель как в гостевых «Заказах» (.ord2__seg): пилюля-трек, активная половина белая. */
.ord-switch { display: flex; gap: 4px; background: #f0ece6; border-radius: 999px; padding: 4px; margin: 4px 0 14px; }
.ord-switch__btn { flex: 1 1 0; box-sizing: border-box; min-height: 36px; border: 0; background: transparent; padding: 9px 6px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--qr-muted, #6b7180); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; line-height: 1; }   /* min-height: без счётчика (брони) половинка выходила на 5px ниже, чем на главной */
.ord-switch__btn i { font-size: 13px; }
.ord-switch__btn.is-on { background: var(--qr-surface, #fff); color: var(--qr-ink, #0e1424); box-shadow: var(--qr-sh-card, 0 4px 18px rgba(60,50,40,.06)); }
.ord-switch__n { background: var(--qr-gold, #b07c2e); color: #fff; font-size: 11px; font-weight: 800; min-width: 18px; height: 18px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; }

.ord-list { display: flex; flex-direction: column; gap: 4px; }   /* как в гостевых «Заказах» (.ord2__list) */
.ord-list[hidden] { display: none; }   /* класс display перебивал бы атрибут hidden */
/* Карточка заказа стафа: раскладка 1-в-1 с гостевой (.ord2c в app-hotel.css), только вместо
   картинки товара - фото гостя. Держать эти два блока согласованными: макет у них общий. */
.ordc { display: flex; gap: 11px; padding: 13px; background: #fff; border-radius: 18px;
    text-decoration: none; color: inherit; box-shadow: 0 4px 18px rgba(60, 50, 40, .06); }
.ordc:active { transform: scale(.99); }
.ordc__thumb { flex: 0 0 auto; width: 74px; height: 74px; border-radius: 14px; background: #f0ece6 center/cover no-repeat; }
.ordc__thumb.is-pic { background-color: #f6efe4; }
.ordc__thumb.is-icon { display: flex; align-items: center; justify-content: center; color: var(--qr-gold, #b07c2e); font-size: 26px; background: var(--qr-gold-soft, #f1ece5); }
.ordc__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: flex-start; }
/* три строки плашки против картинки 74 (владелец 27.10.2026): первая прижата к верху картинки, третья (теги) к низу, вторая
   ровно посередине между ними. Считано по видимым буквам (замер по пикселям в webkit): у названия над буквами 3.25 пустого поля,
   поэтому отрицательный отступ; строка тегов высотой 21.2 */
.ordc__body > .ordc__top { margin-top: -3.25px; }
.ordc__body > .ordc__mid { margin-top: calc(10.26px + 10.6px * (1 - var(--tk, 1))); }   /* дверь с номером посередине между названием и тегом даты; ужатые теги ниже на 21.2*(1-k), середина - на половину (замер по пикселям) */
.ordc__body > .ordc__foot { margin-top: calc(8.69px - 10.6px * (1 - var(--tk, 1))); height: 21.2px; }
.ordc__body > .ordc__foot > .ordc__tags { align-self: flex-end; }   /* ужатые теги - тоже вровень с низом картинки */
.ordc__tags > .ordc__dtag { margin-right: auto; }   /* дата слева, остальные теги прижаты вправо; ряд от левого края, чтобы лишнее уходило вправо и fitTags его видел */   /* низ цифр даты на линии низа картинки (владелец 27.10.2026), сдвиг подобран замером */
.ordc__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ordc__title { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; font-size: 14px; font-weight: 800; color: var(--qr-ink, #0e1424); line-height: 1.15; white-space: nowrap; }
/* режется только название услуги, «· ID N» и сумма видны всегда (владелец 27.10.2026) */
.ordc__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ordc__title > .ordc__no { flex: none; white-space: pre; }
.ordc__sum { flex: 0 0 auto; font-size: 14px; font-weight: 800; line-height: 1.15; color: var(--qr-ink, #0e1424); white-space: nowrap; }   /* та же высота строки, что у названия: иначе карточки с суммой и без неё расходятся на 2px */
/* номер заказа рядом с названием - тем же мелким серым, что и дата внизу карточки */
.ordc__no { font-size: 11px; font-weight: 600; line-height: 1.15; color: var(--qr-muted, #6b7180); }
.ordc .qr-cur { color: var(--qr-muted, #6b7180); opacity: 1; }   /* все серые тексты плашки одного цвета с дверью (владелец 27.10.2026): id, валюта, номер, место, дата */   /* «· id N» как код валюты у суммы (.qr-cur): мельче, полужирный, бледнее цвета строки (владелец 27.10.2026) */
.ordc__mid { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ordc__guest { flex: 0 0 auto; min-width: 0; font-size: 15px; line-height: 1.4; color: var(--qr-muted, #6b7180); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ordc__room { font-weight: 700; }   /* номер комнаты жирным (владелец 27.10.2026) */
.ordc__key { position: relative; top: -1.6px; margin-right: 5px; font-size: 14px; color: inherit; }   /* дверь вместо слова «Номер», цветом текста строки; поднята на 1.25, чтобы низ совпал с линией букв - замер по пикселям в webkit и chromium (владелец 27.10.2026) */
.ordc__loc { flex: 0 1 auto; min-width: 0; font-size: 12px; line-height: 1.4; color: var(--qr-muted, #6b7180); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; }   /* номер с датой не режем, сокращается место доставки (владелец 27.10.2026) */
.ordc__loc i { position: relative; top: -1.25px; margin-right: 1px; }   /* низ булавки на линии букв, как дверь у номера (замер по пикселям, 27.10.2026) */
.ordc__mid > .ordc__loc { position: relative; top: -2.64px; }   /* место доставки посередине между суммой и тегами; на ужатых тегах едет вместе со строкой (владелец 27.10.2026, замер по пикселям) */
.ordc__loc i { font-size: 10px; }
.ordc__foot { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 4px 10px; }   /* дата слева целиком, теги справа в одну строку (ужимает fitTags) */
/* дата и пилюля не сжимаются; с длинными чаевыми («Готово +6 050 IDR») пилюля не влезала и вылезала за карточку -
   теперь переносится на строку ниже, к правому краю (19.10.2026) */
.ordc__foot > .ordc__chip, .ordc__foot > .ordc__rate { margin-left: auto; max-width: 100%; }
/* теги справа (владелец 27.10.2026): прижаты вправо, переносятся целиком; значки и цифры таймера в одну строку */
.ordc__tags { margin-left: auto; justify-content: flex-start; min-width: 0; flex: 1 1 auto; flex-wrap: nowrap; overflow: hidden; gap: calc(5px * var(--tk, 1)); }
/* теги в одну строку: не влезают - ряд уменьшается целиком (--tk от 1 до .6 ставит fitTags в js/app-orders.js), перенос запрещен (владелец 27.10.2026) */
.ord-list .ordc.ordc--gift { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'><g fill='none' stroke='%232f7a45' stroke-width='1.5' stroke-linejoin='round' stroke-linecap='round' opacity='.1'><g transform='translate(6 6) rotate(-14 10 10) scale(1)'><rect x='2' y='8' width='16' height='11' rx='1.6'/><rect x='0' y='4' width='20' height='5' rx='1.3'/><path d='M10 4v15M10 4C8 0 3 0 4 3c1 2 6 1 6 1zM10 4c2-4 7-4 6-1-1 2-6 1-6 1z'/></g><g transform='translate(52 4) rotate(10 10 10) scale(0.8)'><rect x='2' y='8' width='16' height='11' rx='1.6'/><rect x='0' y='4' width='20' height='5' rx='1.3'/><path d='M10 4v15M10 4C8 0 3 0 4 3c1 2 6 1 6 1zM10 4c2-4 7-4 6-1-1 2-6 1-6 1z'/></g><g transform='translate(30 34) rotate(-6 10 10) scale(0.9)'><rect x='2' y='8' width='16' height='11' rx='1.6'/><rect x='0' y='4' width='20' height='5' rx='1.3'/><path d='M10 4v15M10 4C8 0 3 0 4 3c1 2 6 1 6 1zM10 4c2-4 7-4 6-1-1 2-6 1-6 1z'/></g><g transform='translate(74 40) rotate(18 10 10) scale(1)'><rect x='2' y='8' width='16' height='11' rx='1.6'/><rect x='0' y='4' width='20' height='5' rx='1.3'/><path d='M10 4v15M10 4C8 0 3 0 4 3c1 2 6 1 6 1zM10 4c2-4 7-4 6-1-1 2-6 1-6 1z'/></g><g transform='translate(8 62) rotate(12 10 10) scale(0.85)'><rect x='2' y='8' width='16' height='11' rx='1.6'/><rect x='0' y='4' width='20' height='5' rx='1.3'/><path d='M10 4v15M10 4C8 0 3 0 4 3c1 2 6 1 6 1zM10 4c2-4 7-4 6-1-1 2-6 1-6 1z'/></g><g transform='translate(50 70) rotate(-16 10 10) scale(0.95)'><rect x='2' y='8' width='16' height='11' rx='1.6'/><rect x='0' y='4' width='20' height='5' rx='1.3'/><path d='M10 4v15M10 4C8 0 3 0 4 3c1 2 6 1 6 1zM10 4c2-4 7-4 6-1-1 2-6 1-6 1z'/></g></g></svg>"); background-size: 96px 96px; background-position: 6px 2px; }   /* заказ с подарком из вишлиста: фон из прозрачных подарочков, 6 штук на квадрат 96, только в списке (владелец 27.10.2026) */
.ord-list .ordc.ordc--tip { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'><g fill='none' stroke='%232f7a45' stroke-width='1.5' stroke-linejoin='round' stroke-linecap='round' opacity='.1'><g transform='translate(6 10) rotate(-12 12 6.5) scale(1)'><rect x='0' y='0' width='24' height='13' rx='2'/><circle cx='12' cy='6.5' r='3'/><path d='M4 3.5v6M20 3.5v6'/></g><g transform='translate(50 4) rotate(8 12 6.5) scale(0.9)'><rect x='3' y='-3' width='24' height='13' rx='2'/><rect x='0' y='0' width='24' height='13' rx='2' fill='%23fff'/><circle cx='12' cy='6.5' r='3'/><path d='M4 3.5v6M20 3.5v6'/></g><g transform='translate(28 40) rotate(10 12 6.5) scale(0.85)'><rect x='0' y='0' width='24' height='13' rx='2'/><circle cx='12' cy='6.5' r='3'/><path d='M4 3.5v6M20 3.5v6'/></g><g transform='translate(70 40) rotate(-14 12 6.5) scale(0.95)'><rect x='0' y='0' width='24' height='13' rx='2'/><circle cx='12' cy='6.5' r='3'/><path d='M4 3.5v6M20 3.5v6'/></g><g transform='translate(6 68) rotate(6 12 6.5) scale(0.85)'><rect x='3' y='-3' width='24' height='13' rx='2'/><rect x='0' y='0' width='24' height='13' rx='2' fill='%23fff'/><circle cx='12' cy='6.5' r='3'/><path d='M4 3.5v6M20 3.5v6'/></g><g transform='translate(50 72) rotate(-6 12 6.5) scale(0.9)'><rect x='0' y='0' width='24' height='13' rx='2'/><circle cx='12' cy='6.5' r='3'/><path d='M4 3.5v6M20 3.5v6'/></g></g></svg>"); background-size: 96px 96px; background-position: 6px 2px; }   /* обычные чаевые: фон из прозрачных купюр, по одной и парами (владелец 27.10.2026, монетки не понравились) */
.ordc__done { display: none; }   /* теги «Выполнен» и «Отменен» не показываем ни в списке, ни в плашке открытого заказа: вкладка и так говорит статус (владелец 27.10.2026) */
.ordc__tags .qr-tag { flex: none; height: calc(21.2px * var(--tk, 1)); font-size: calc(12px * var(--tk, 1)); line-height: calc(19.2px * var(--tk, 1)); padding: 1px calc(7px * var(--tk, 1)); gap: calc(4px * var(--tk, 1)); }
.ordc__acc[hidden] { display: none !important; }
.ordc__tag .ordc__t { font-variant-numeric: tabular-nums; }
.qr-tag.ordc__timer.is-over, .ordc.is-overdue .qr-tag.ordc__timer { background: rgba(220, 38, 38, .08); color: #dc2626; }   /* опаздываем */
.ordc__dt { flex: 0 0 auto; font-size: 12px; line-height: 1.4; color: var(--qr-muted, #6b7180); white-space: nowrap; }   /* номер и дата целиком: ужимается пилюля, а не они */
.ordc__chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700;
    padding: 3px 9px; border-radius: 999px; line-height: 1.2; }
.ordc__chip.is-done { color: var(--qr-green, #12a046); background: var(--qr-green-soft, #e3f3e7); }
.ordc__chip.is-wait { color: var(--qr-gold, #b07c2e); background: var(--qr-gold-soft, #f1ece5); }
.ordc__chip.is-del  { color: var(--qr-danger, #c0392b); background: var(--qr-danger-soft, #fbecea); }
.ordc--accepted .ordc__chip.is-wait { color: #0369a1; background: rgba(3,105,161,.10); }
.ordc__chip.is-status, .ordc--accepted .ordc__chip.is-status { color: var(--qr-green, #12a046); background: var(--qr-green-soft, #e3f3e7); }   /* услуга-секундомер всегда зелёная */
.ordc__chip.is-over { color: var(--qr-danger, #c0392b); background: var(--qr-danger-soft, #fbecea); flex: 0 1 auto; min-width: 0; overflow: hidden; }
.ordc__chip.is-over .ordc__t { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }   /* цифры не режем, длинную подпись «Running late…» - можно */
.ordc.is-overdue { background: #fef6f5; }
/* «Опаздываем» - вся карточка красная (владелец 27.10.2026): html body перебивает белый фон карточки из staff-v2/glass */
/* непринятый заказ - красный кружок справа сверху, как значок уведомления на iPhone (владелец 27.10.2026) */
.ordc.ordc--pending .ordc__thumb, .ordc.is-unread .ordc__thumb { position: relative; }
/* точка непринятого заказа и непрочитанного события - на иконке справа сверху (владелец 27.10.2026); кольцо цвета карточки - вырез */
.ordc.ordc--pending .ordc__thumb::after, .ordc.is-unread .ordc__thumb::after { content: ''; position: absolute; top: 0; right: 0; width: 13px; height: 13px;
    border-radius: 50%; background: #ff3b30; pointer-events: none; box-shadow: 0 0 0 3px #fff; }
html body .ordc.is-overdue .ordc__thumb::after { box-shadow: 0 0 0 3px #fdecec; }
.ordc.ordc--head .ordc__thumb::after { content: none !important; }   /* в шапке открытого заказа точки нет (владелец 27.10.2026) */
/* просроченный заказ: розовый фон; рамку, свечение и пульс тега владелец убрал 27.10.2026 */
html body .ordc.is-overdue, html body.sv2:has(.vis__top--n2) .ordc.is-overdue { background: #fdecec; }
html body .ordc.is-overdue .ordc__thumb, html body .ordc.is-overdue .ordc__thumb.is-pic { background-color: #fbdada !important; }   /* важно: темы (theme-accent.css) ставят фон значка с !important */
html body .ordc.is-overdue :is(.ordc__title, .ordc__sum) { color: #b91c1c; }
/* на узком экране строка «номер + дата» упирается в пилюлю - чуть мельче, чтобы не обрезалась */
@media (max-width: 380px) { .ordc__dt { font-size: 11.5px; } }
@media (max-width: 340px) { .ordc__dt { font-size: 11px; } }
@media (max-width: 380px) { .ordc__chip { padding: 2px 8px; } }

/* ═══════════ СТРАНИЦА ЗАКАЗА (сотрудник) ═══════════ */
.osv { padding-top: 0; padding-bottom: 24px; }
.osv__top { display: flex; align-items: center; justify-content: space-between; }
.osv__back { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; font-size: 16px; border-radius: 12px; background: #fff; border: 1px solid var(--qr-line, #ece7df); color: var(--qr-ink, #0e1424); text-decoration: none; box-shadow: 0 1px 3px rgba(60,50,40,.06); }
.osv__back:active { transform: scale(.94); }
.osv__ttl { font-size: 18px; font-weight: 800; }
.osv__sp { width: 40px; }
.osv__room { flex: 1; text-align: center; font-size: 17px; font-weight: 800; color: var(--app-text); }
.osv__no { min-width: 40px; text-align: right; font-size: 15px; font-weight: 700; color: var(--app-muted); }
/* дата/время — пилюля с иконками (как на макете) */
.osv__dt { display: inline-flex; align-items: center; gap: 12px; background: var(--app-surface); border: 1px solid var(--app-border); border-radius: 12px; padding: 8px 14px; font-size: 14px; font-weight: 600; color: var(--app-text); box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.osv__dt > span { display: inline-flex; align-items: center; gap: 7px; }
.osv__dt i { color: var(--app-muted); }
.osv__dt-sep { width: 1px; height: 16px; background: var(--app-border); }
.osv__guest { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; margin: 8px 0 20px; }
.osv__ava { width: 110px; height: 110px; border-radius: 50%; border: 0; background: #e9edf2 center/cover no-repeat; box-shadow: 0 8px 22px rgba(17,24,39,.14); cursor: zoom-in; }
.osv__name { font-size: 22px; font-weight: 800; margin-top: 6px; }
.osv__sub { display: flex; gap: 14px; color: var(--app-muted); font-size: 13.5px; }
.osv__cat { display: inline-flex; align-items: center; gap: 7px; background: rgba(3,105,161,.08); color: var(--app-accent); font-size: 12.5px; font-weight: 800; text-transform: uppercase; padding: 6px 14px; border-radius: 999px; }
.ostimer { font-size: 14px; font-weight: 800; color: #b45309; background: rgba(180,83,9,.10); padding: 7px 16px; border-radius: 999px; }
.ostimer.is-accepted { color: #0369a1; background: rgba(3,105,161,.10); }
.ostimer.is-over { color: var(--app-danger); background: rgba(185,28,28,.12); }
.ostimer.is-status { color: #16a34a; background: rgba(22,163,74,.12); }
/* кнопка «Остановить» статус-услугу (гость) */
.osv-stop { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin: 6px 0 0; padding: 15px; border: 0; border-radius: var(--qr-r-sm, 14px); background: var(--qr-danger-soft, #fbecea); color: var(--qr-danger, #c0392b); font-size: 15px; font-weight: 700; cursor: pointer; }
.osv-stop:active { background: #f7ddd9; }
.osv-stop:disabled { opacity: .6; }
.osv__st { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 800; padding: 7px 16px; border-radius: 999px; }
.osv__st.is-done { color: #16a34a; background: rgba(22,163,74,.12); }
.osv__st.is-del { color: var(--app-muted); background: rgba(17,24,39,.06); }

.osv__body { display: flex; flex-direction: column; gap: 14px; }
.osv-svc { display: flex; align-items: center; gap: 14px; background: var(--app-surface); border: 1px solid var(--app-border); border-radius: 16px; padding: 16px; }
.osv-svc__ic { width: 52px; height: 52px; border-radius: 14px; background: rgba(3,105,161,.10); color: var(--app-accent); display: flex; align-items: center; justify-content: center; font-size: 22px; flex: 0 0 auto; }
.osv-svc__name { font-size: 16px; font-weight: 700; }
.osv-svc__cat { color: var(--app-muted); font-size: 13px; }
.osv-loc { display: inline-flex; align-items: center; gap: 8px; background: var(--app-surface); border: 1px solid var(--app-border); border-radius: 12px; padding: 10px 14px; font-size: 14px; font-weight: 600; width: max-content; }
.osv-loc i { color: var(--app-accent); }
.osv-items { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.osv-item { background: var(--app-surface); border: 1px solid var(--app-border); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.osv-item__q { font-weight: 800; color: var(--app-accent); font-size: 14px; }
.osv-item__n { font-size: 14px; font-weight: 600; }
.osv-item__p { color: var(--app-muted); font-size: 13px; }
.osv-empty { color: var(--app-muted); text-align: center; padding: 20px; }
.osv-total { display: flex; align-items: center; justify-content: space-between; background: var(--app-surface); border: 1px solid var(--app-border); border-radius: 14px; padding: 14px 16px; font-size: 15px; }
.osv-total b { font-size: 18px; }

.osv-full { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; touch-action: none; overflow: hidden; }
.osv-full[hidden] { display: none; }
.osv-full__ov { position: absolute; inset: 0; background: rgba(0,0,0,.92); }
.osv-full__img { position: relative; max-width: 100vw; max-height: 88vh; border-radius: 0; object-fit: contain; will-change: transform; }
.osv-full__x { position: absolute; top: calc(16px + var(--safe-top, env(safe-area-inset-top, 0px))); right: 20px; z-index: 2; width: 42px; height: 42px; border: 0; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; font-size: 24px; cursor: pointer; }

/* действия по заказу — фиксированные кнопки снизу */
.osv--acts { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
.osv-actions { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; gap: 10px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--app-surface); border-top: 1px solid var(--app-border);
    max-width: 520px; margin: 0 auto; }
.osv-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 14px;
    font-size: 15px; font-weight: 700; padding: 15px; cursor: pointer; }
.osv-btn:disabled { opacity: .6; }
.osv-btn--del { flex: 0 0 auto; padding: 15px 20px; background: rgba(220,38,38,.08); color: #dc2626; }
/* главная кнопка действия - золотая, как на макете страницы заказа (25.09.2026) */
.osv-btn--ok { background: var(--qr-gold, #b07c2e); color: #fff; }
.osv-btn--ok:active { background: #99682a; }

.osv-confirm { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; padding: 20px; }
.osv-confirm[hidden] { display: none; }
.osv-confirm__ov { position: absolute; inset: 0; background: rgba(0,0,0,.55); }
.osv-confirm__box { position: relative; background: var(--app-surface); border-radius: 18px; padding: 22px; width: min(340px,100%); text-align: center; }
.osv-confirm__t { font-size: 16px; font-weight: 700; margin-bottom: 18px; }
.osv-confirm__note { font-size: 13px; line-height: 1.45; color: var(--app-muted); background: rgba(180,83,9,.08); border-radius: 10px; padding: 10px 12px; margin: -8px 0 16px; }
.osv-confirm__btns { display: flex; gap: 10px; }
.osv-cbtn { flex: 1; border: 1px solid var(--app-border); background: var(--app-surface); color: var(--app-text); border-radius: 12px; padding: 12px; font-weight: 700; font-size: 14px; cursor: pointer; }
.osv-cbtn--del { background: #dc2626; color: #fff; border-color: #dc2626; }
.osv-cbtn--ok { background: var(--ov, var(--qr-gold, #b07c2e)); color: #fff; border-color: var(--ov, var(--qr-gold, #b07c2e)); }
.osv-confirm__ic { width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 50%; background: var(--ov-soft, rgba(47,107,237,.1)); color: var(--ov, #2f6bed); display: flex; align-items: center; justify-content: center; font-size: 24px; }
.osv-confirm__sub { font-size: 14px; color: var(--app-muted); margin: -10px 0 18px; line-height: 1.4; }

/* журнал действий по заказу */
.osv-log { background: var(--app-surface); border: 1px solid var(--app-border); border-radius: 18px; box-shadow: 0 2px 10px rgba(17,24,39,.05); padding: 2px 16px; margin-top: 14px; }
.osv-log__ttl { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--app-muted); padding: 12px 0 8px; }
.osv-log__row { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid var(--app-border); font-size: 14px; }
.osv-log__row:first-child { border-top: 0; }
.osv-log__ava { flex: 0 0 auto; width: 54px; height: 54px; border-radius: 50%; background: #e9edf2 center/cover no-repeat; border: 2px solid var(--app-border); }
.osv-log__ava.is-zoomable { cursor: zoom-in; }
.osv-log__txt { flex: 1; min-width: 0; }
.osv-log__who { font-size: 17px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* имя одной строкой: рядом теги со значками, на 320 «Тест 2» ломалось по словам */
.osv-log__role { font-size: 14px; color: var(--app-muted); margin-top: 1px; }
.osv-log__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex: 0 0 auto; }
.osv-log__act { font-weight: 700; font-size: 12.5px; padding: 2px 9px; border-radius: 999px; }
.osv-log__act.is-accepted { color: #0369a1; background: rgba(3,105,161,.10); }
.osv-log__act.is-done { color: #16a34a; background: rgba(22,163,74,.12); }
.osv-log__act.is-deleted { color: var(--app-danger); background: rgba(185,28,28,.10); }
.osv-log__act.is-joined { color: #0369a1; background: rgba(3,105,161,.10); }
.osv-log__act.is-left { color: var(--app-danger); background: rgba(185,28,28,.08); border: 1px solid var(--app-danger); }
.osv-log__time { color: var(--app-muted); font-size: 13px; }
.osv-log__meta .qr-tag { height: calc(21.2px * var(--tk, 1)); font-size: calc(12px * var(--tk, 1)); line-height: calc(19.2px * var(--tk, 1)); padding: 1px calc(7px * var(--tk, 1)); gap: calc(4px * var(--tk, 1)); white-space: nowrap; box-sizing: border-box; }   /* размер тегов плашки (.ordc__tags .qr-tag) */

/* ═══════════ ГОСТЕВОЙ СПИСОК ЗАКАЗОВ ═══════════ */
.gord-h1 { font-size: 26px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 14px; }
.gord-list { display: flex; flex-direction: column; gap: 12px; }
.gord { display: flex; gap: 12px; align-items: center; background: var(--app-surface); border: 1px solid var(--app-border); border-radius: 16px; padding: 12px; text-decoration: none; color: inherit; box-shadow: 0 1px 3px rgba(0,0,0,.05); }
.gord:active { background: #f7f9fb; }
.gord__ic { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 12px; background: rgba(3,105,161,.08); color: var(--app-accent); display: flex; align-items: center; justify-content: center; font-size: 20px; }
.gord__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.gord__top { display: flex; align-items: center; justify-content: space-between; }
.gord__cat { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; color: var(--app-accent); }
.gord__no { font-size: 12px; font-weight: 700; color: var(--app-muted); }
.gord__sub { font-size: 14px; font-weight: 600; display: flex; gap: 8px; }
.gord__sum { color: var(--app-muted); font-weight: 700; }
.gord__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 2px; }
.gord__dt { font-size: 12px; color: var(--app-muted); }
.gord__st { font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; display: inline-flex; align-items: center; gap: 5px; }
.gord__st.is-wait { color: #b45309; background: rgba(180,83,9,.10); }
.gord__st.is-done { color: #16a34a; background: rgba(22,163,74,.12); }
.gord__st.is-rate { color: #fff; background: var(--app-accent); }
.gord__st.is-del { color: var(--app-muted); background: rgba(17,24,39,.06); }

.osv-catic { width: 110px; height: 110px; border-radius: 50%; background: rgba(3,105,161,.08); color: var(--app-accent); display: flex; align-items: center; justify-content: center; font-size: 44px; }
.osv__st { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 800; padding: 7px 16px; border-radius: 999px; }
.osv__st.is-wait { color: #b45309; background: rgba(180,83,9,.10); }
.osv-myrate { background: var(--app-surface); border: 1px solid var(--app-border); border-radius: 16px; padding: 16px; text-align: center; }
.osv-myrate__stars { color: #f5a623; font-size: 20px; display: flex; justify-content: center; gap: 3px; }
.osv-myrate__tip { margin-top: 10px; font-weight: 700; color: #16a34a; }
.osv-myrate__cmt { margin-top: 10px; color: var(--app-muted); font-style: italic; }

/* оценка в списке — пилюля как таймер/статусы: 4-5 зелёная, ниже красная */
.ordc__rate { flex: 0 0 auto; font-size: 12.5px; font-weight: 800; padding: 3px 9px; border-radius: 999px; line-height: 1.2; display: inline-flex; align-items: center; gap: 5px;
    color: var(--qr-green, #12a046); background: var(--qr-green-soft, #e3f3e7); }
.ordc__rate.is-good { color: #16a34a; background: rgba(22,163,74,.12); }
.ordc__rate.is-bad { color: #dc2626; background: rgba(220,38,38,.12); }
.ordc__tip { color: #16a34a; }
.ordc__cmt { color: var(--app-danger); }
.ordc__rate.is-good .ordc__cmt, .ordc__rate.is-bad .ordc__cmt { color: inherit; }
.osv-grate { background: var(--app-surface); border: 1px solid var(--app-border); border-radius: 16px; padding: 14px 16px; margin-top: 14px; }
.osv-grate__ttl { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--app-muted); margin-bottom: 8px; }
.osv-grate__stars { color: #f5a623; font-size: 18px; display: flex; align-items: center; gap: 3px; }
.osv-grate__n { color: var(--app-text); font-size: 14px; font-weight: 700; margin-left: 6px; }
.osv-grate__cmt { margin-top: 8px; color: var(--app-muted); font-style: italic; }
/* чаевые — яркий зелёный баннер в заказе сотрудника */
.osv-tip { display: flex; align-items: center; gap: 13px; background: linear-gradient(135deg, #16a34a, #15803d); color: #fff; border-radius: 16px; padding: 13px 16px; margin-top: 12px; box-shadow: 0 8px 20px rgba(22,163,74,.30); }
.osv-tip__ic { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.22); display: flex; align-items: center; justify-content: center; font-size: 20px; }
.osv-tip__txt { display: flex; flex-direction: column; line-height: 1.15; }
.osv-tip__lbl { font-size: 13px; font-weight: 600; opacity: .92; }
.osv-tip__amt { font-size: 23px; font-weight: 800; letter-spacing: -.01em; }

/* ═══════════ ОКНО ОЦЕНКИ (гость) ═══════════ */
.rate { position: fixed; inset: 0; z-index: 150; display: flex; align-items: flex-end; justify-content: center; background: rgba(0,0,0,.5); }
.rate[hidden] { display: none; }
/* кнопка добровольной оценки внизу страницы заказа (pages/app/order.php $rateOpt): как основная кнопка гостя (.cartsheet__place) */
.ov-rate { width: 100%; min-height: 52px; padding: 8px 20px; border: 0; border-radius: 16px; background: var(--qr-gold, #b07c2e); color: #fff;
    font: inherit; font-size: 15.5px; font-weight: 800; display: flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; }
.ov-rate:active { opacity: .85; }
.rate__box { position: relative; width: 100%; max-width: 520px; background: var(--app-surface); border-radius: 22px 22px 0 0; padding: 30px 20px calc(10px + env(safe-area-inset-bottom)); text-align: center; }
.rate__x { position: absolute; top: 14px; right: 16px; border: 0; background: none; font-size: 24px; color: var(--app-muted); cursor: pointer; }
.rate__ava { width: 276px; height: 276px; border-radius: 50%; margin: 0 auto 14px; background: #e9edf2 center/cover no-repeat; border: 5px solid #fff; box-shadow: 0 6px 18px rgba(17,24,39,.14); max-width: 82vw; max-height: 82vw; }
/* шапка окна оценки: фото, имя, должность - рисуются один раз на все шаги */
.rate__head[hidden] { display: none; }
/* шаги выравнены по высоте из js, чтобы окно не прыгало при смене оценки на чаевые */
.rate__step { display: flex; flex-direction: column; justify-content: center; }
.rate__step[hidden] { display: none; }
.rate__who { font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.rate__role { font-size: 13px; color: var(--app-muted); margin: 1px 0 14px; }
.rate__ttl { font-size: 20px; font-weight: 800; }
.rate__sub { color: var(--app-muted); font-size: 14px; margin-top: 6px; margin-bottom: 20px; }
.rate__stars { display: flex; justify-content: center; gap: 8px; }
.rate__star { border: 0; background: none; color: #f5a623; font-size: 38px; cursor: pointer; padding: 4px; }
.rate__star:disabled { cursor: default; }
/* мечта сотрудника — над кнопками чаевых */
.rate__dream { display: flex; align-items: center; gap: 11px; text-align: left; background: var(--qr-gold-soft, #f1ece5); border: 1px solid var(--qr-line, #ece7df); border-radius: 14px; padding: 12px 14px; margin: 2px 0 18px; font-size: 14px; line-height: 1.35; }
.rate__dream-ic { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; color: var(--qr-gold, #b07c2e); font-size: 17px; box-shadow: 0 2px 7px rgba(176,124,46,.22); }
.rate__dream b { color: var(--app-text); font-weight: 800; }
.rate__tipttl { font-size: 14.5px; font-weight: 700; color: var(--app-text); margin-bottom: 12px; }
.rate__tips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
.rate__tip { display: flex; flex-direction: column; align-items: center; gap: 5px; border: 1px solid var(--app-border); background: var(--app-surface); color: var(--app-text); border-radius: 16px; padding: 12px 0 10px; cursor: pointer; transition: transform .1s, border-color .15s, box-shadow .15s; }
.rate__tip:active { transform: scale(.95); border-color: var(--qr-gold, #b07c2e); box-shadow: 0 5px 14px rgba(176,124,46,.16); }
.rate__tip:disabled { opacity: .5; }
.rate__tip-emo { font-size: 27px; line-height: 1; }
.rate__tip-amt { font-size: 15px; font-weight: 800; }
/* Еда: чаевые в процентах — крупный % + сумма в валюте под ним. */
.rate__tips--pct .rate__tip { padding: 11px 3px 9px; }
.rate__tip-pct { font-size: 20px; font-weight: 800; line-height: 1; }
.rate__tips--pct .rate__tip-amt { font-size: 11px; font-weight: 700; color: var(--app-muted); line-height: 1.15; word-break: break-word; }
.rate__decline { border: 0; background: none; color: var(--app-muted); font-size: 15px; padding: 8px; cursor: pointer; }
.rate__sorry { font-size: 52px; color: #f59e0b; margin-bottom: 12px; }
.rate__cmt { width: 100%; border: 1px solid var(--app-border); border-radius: 14px; padding: 12px 14px; font-size: 15px; min-height: 90px; resize: none; margin-bottom: 14px; font-family: inherit; box-sizing: border-box; }
.rate__cmt:focus { outline: none; border-color: var(--app-accent); }
.rate__send { width: 100%; border: 0; background: var(--qr-gold, #b07c2e); color: #fff; font-size: 16px; font-weight: 700; padding: 15px; border-radius: 14px; cursor: pointer; }
.rate__thanks i { font-size: 54px; color: #e0245e; margin-bottom: 12px; }

/* ═══ Футер стаффа: чёрная QR-кнопка → брони гостей ═══ */
.staff-fspacer { height: 86px; }
.staff-fbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    display: flex; justify-content: center;
    padding: 10px 18px calc(10px + env(safe-area-inset-bottom));
    background: #faf9f7; border-top: 0; box-shadow: 0 -6px 26px rgba(45, 38, 30, .07);
    max-width: 520px; margin: 0 auto;
}
.staff-qrbtn {
    width: 100%; height: 57px; border-radius: 16px; border: 0; box-shadow: 0 6px 18px rgba(172, 114, 36, .26);
    background: var(--qr-gold, #b07c2e); color: #fff; font-size: 16px; font-weight: 800; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
}
.staff-qrbtn i { font-size: 20px; }
.staff-qrbtn:active { transform: scale(.98); }

.bksheet { position: fixed; inset: 0; z-index: 60; }
.bksheet[hidden] { display: none; }
.bksheet__ov { position: absolute; inset: 0; background: rgba(0,0,0,.45); }
.bksheet__box {
    position: absolute; left: 0; right: 0; bottom: 0; background: #faf9f7;
    border-radius: 24px 24px 0 0; padding: 10px 18px calc(10px + env(safe-area-inset-bottom));   /* низ всех шторок: 10 + вырез, на уровне кнопки «Добавить гостя» (владелец 27.10.2026) */
    max-width: 520px; margin: 0 auto; overflow-y: auto; animation: bkUp .22s ease;
    box-shadow: 0 -18px 44px rgba(30, 25, 20, .18);
    /* сверху остается полоса экрана: шторка не должна выглядеть открытой на весь экран (просьба владельца 17.10) */
    max-height: min(90%, calc(100% - var(--safe-top, env(safe-area-inset-top, 0px)) - 16px));   /* шторки не выше 90% экрана (владелец 25.10.2026, до этого 80%) */
}
body.has-demobar .bksheet__box { max-height: min(90%, calc(100% - var(--safe-top, env(safe-area-inset-top, 0px)) - var(--dlbar-h, 58px) - 16px)); }   /* полоска демо-режима сверху */
/* хват сверху - как в остальных шторках */
.bksheet__grip { display: block; width: 38px; height: 5px; border-radius: 3px; background: #d5d1cb; margin: 0 auto 14px; }
@keyframes bkUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
/* QR брони прямо в шторке (pages/app/staff_booking.php ?sheet=1): номер, даты, QR, подпись, монитор, удаление */
.bksheet.is-qr .bksheet__hd { display: none; }
.bksheet .bk-in { animation: bkIn .26s ease; }   /* слой шторки (список номеров / QR) проступает при смене */
@keyframes bkIn { from { opacity: 0; transform: translateY(6px); } }
.stcard.is-busy { opacity: .55; transition: opacity .15s ease; }   /* нажатый номер, пока грузится бронь */
.bkqr { display: flex; flex-direction: column; align-items: center; text-align: center; padding-bottom: 6px; }
.bkqr__hd { display: flex; align-items: center; gap: 10px; align-self: stretch; margin: 0 0 4px; }
.bkqr__back { flex: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; border-radius: 12px;
    background: #f1efec; color: var(--app-text, #111827); font-size: 16px; cursor: pointer; }
.bkqr__room { flex: 1; min-width: 0; font-size: 22px; font-weight: 800; letter-spacing: -.01em; color: var(--app-text, #111827); }
.bkqr__sp { flex: none; width: 40px; }
.bkqr__dates { display: flex; align-items: center; justify-content: center; gap: 8px; height: 22px; margin: 0 0 16px; font-size: 15px; color: var(--app-muted, #6b7280); }
.bkqr__qr { padding: 14px; border-radius: 20px; background: #fff; box-shadow: 0 4px 18px rgba(60, 50, 40, .06); }
.bkqr__hint { max-width: 300px; margin: 14px auto 0; font-size: 14px; line-height: 1.45; color: var(--app-muted, #6b7280); }
/* «Новая бронь» в той же шторке: заголовок по центру, как у QR; поля по краям шапки и вкладок, без отступов страницы */
.bknb .bkqr__room { text-align: center; }
.bknb .bkqr__hd { margin-bottom: 12px; }
.bknb .nb-form { padding: 14px 0 6px; }
.bknb .stcal-wrap { margin: 14px 0 0; }
.bksheet__hd { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; font-size: 21px; font-weight: 800; letter-spacing: -.02em; color: var(--qr-ink, #0e1424); }
.bksheet__sub { font-size: 12.5px; font-weight: 500; color: var(--qr-muted, #6b7180); margin-top: 3px; }
/* шапка «Номерной фонд» прилипает к верху при прокрутке, как у всех шторок (app-hotel.css .cartsheet__hd, владелец 27.10.2026):
   ручка рисуется фоном самой шапки, отдельная полоска прячется - иначе при прокрутке она уезжала бы вместе со списком */
.bksheet__box > .bksheet__grip { display: none; }
.bksheet__box > .bksheet__hd { position: sticky; top: -10px; z-index: 3; margin: -10px -18px 0; padding: 29px 18px 14px; background-color: inherit;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='5'%3E%3Crect width='38' height='5' rx='2.5' fill='%23d5d1cb'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: center 10px; background-size: 38px 5px; }
.bksheet__x { flex: 0 0 auto; width: 35px; height: 35px; padding: 0; border: 0; border-radius: 50%; background: var(--qr-gold-soft, #f1ece5);
    color: #4a4e58; font-size: 16px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.bksheet__x:active { transform: scale(.94); }


/* шахматка номера × даты */
.nb-btn--cal { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; text-decoration: none; }
.stcal-wrap { overflow: auto; -webkit-overflow-scrolling: touch; max-height: 520px; border-radius: 16px;
    background: var(--qr-surface, #fff); box-shadow: var(--qr-sh-card, 0 4px 18px rgba(60,50,40,.06)); }
.stcal { border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 12.5px; }
.stcal th, .stcal td { border-right: 1px solid var(--qr-line, #ece7df); border-bottom: 1px solid var(--qr-line, #ece7df); }
.stcal__corner, .stcal__rh { width: 58px; }
.stcal__corner { position: sticky; top: 0; left: 0; z-index: 4; background: var(--qr-surface, #fff); }
.stcal__dh { position: sticky; top: 0; z-index: 3; width: 40px; padding: 5px 4px; text-align: center; font-weight: 700; color: var(--qr-muted, #6b7180); background: var(--qr-surface, #fff); }
.stcal__dh .stcal__dow { display: block; font-size: 10px; text-transform: uppercase; opacity: .7; }
.stcal__dh .stcal__dnum { display: block; font-size: 14px; color: var(--qr-ink, #0e1424); }
.stcal__dh.is-today { color: var(--qr-gold, #b07c2e); }
.stcal__dh.is-today .stcal__dnum { color: var(--qr-gold, #b07c2e); }
.stcal__rh { position: sticky; left: 0; z-index: 2; background: var(--qr-surface, #fff); color: var(--qr-ink, #0e1424);
    font-weight: 800; text-align: left; padding: 6px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stcal__free { background: var(--qr-surface, #fff); }
.stcal__free.is-today { background: rgba(176, 124, 46, .06); }
.stcal__bk { background: rgba(176, 124, 46, .18); padding: 0; }
.stcal__bk.is-claimed { background: rgba(18, 160, 70, .15); }
.stcal__bk a { display: block; padding: 8px 8px; color: var(--qr-ink, #0e1424); text-decoration: none; font-weight: 700;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* стабильная ширина таймеров: моноширинные цифры + фикс поля числа (не дёргается при отсчёте) */
.ordc__timer, .ostimer { font-variant-numeric: tabular-nums; }
.ordc__t, .ostimer__t { display: inline-block; text-align: center; min-width: 4ch; }

/* карточка исполнителя на гостевой странице заказа (принял / выполнил) */
.osv-exec { display: flex; align-items: center; gap: 12px; margin: 2px 0 18px; padding: 12px 16px;
    background: var(--app-surface); border: 1px solid var(--app-border); border-radius: 16px; box-shadow: 0 1px 3px rgba(0,0,0,.05); }
.osv-exec__ava { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; background: #e9edf2 center/cover no-repeat; border: 2px solid var(--app-border); }
.osv-exec__lbl { font-size: 12.5px; color: var(--app-muted); font-weight: 600; }
.osv-exec__name { font-size: 16px; font-weight: 800; color: var(--app-text); }

/* ═══ Гостевая страница заказа — карточный дизайн (/go/{id}) ═══ */
body.ov-page { background: var(--qr-bg, #f5f3f0); }   /* тёплый фон фирстиля при прямом заходе (не в SPA-оболочке) */
.ov { --ov: var(--qr-gold, #b07c2e); --ov-soft: var(--qr-gold-soft, #f1ece5); padding-top: 0; padding-bottom: 20px; }

/* карточка-шапка (фирстиль: тёплая поверхность, мягкая тень без линии) */
.ov-head { position: relative; background: var(--qr-surface, #fff); border: 0; border-radius: var(--qr-r-md, 18px); padding: 16px 18px; box-shadow: var(--qr-sh-card, 0 4px 18px rgba(60,50,40,.06)); }
.ov-head__row { display: flex; align-items: center; gap: 16px; }
.ov-head__ic { flex: 0 0 auto; width: 76px; height: 76px; border-radius: 20px; background: var(--ov-soft); color: var(--ov); display: flex; align-items: center; justify-content: center; font-size: 30px; }
.ov-head__main { min-width: 0; flex: 1; }
.ov-head__title { font-size: 21px; font-weight: 800; letter-spacing: -.01em; color: var(--app-text); margin-bottom: 10px; }
.ov-head__pills { display: flex; flex-wrap: wrap; gap: 8px; }
.ov-head__pills.qr-tags { gap: 5px; }   /* у стафа в шапке заказа теги ленты (parts/order_tags.php): зазор как в карточке */
.ov-pill { display: inline-flex; align-items: center; gap: 7px; background: var(--ov-soft); color: var(--ov); font-size: 13px; font-weight: 700; padding: 6px 13px; border-radius: 999px; }
.ov-pill--cat { text-transform: uppercase; letter-spacing: .02em; }
.ov-pill--wait { color: var(--qr-gold-2, #916b39); background: var(--qr-gold-soft, #f1ece5); }
/* цвет таймера в шапке заказа = цвет таймера в списке: до принятия — золотой, после — зелёный */
.ov-timer--accept { color: var(--qr-gold-2, #916b39); background: var(--qr-gold-soft, #f1ece5); }
.ov-timer--work { color: var(--qr-green, #12a046); background: var(--qr-green-soft, #e3f3e7); }
.ov-pill--done { color: var(--qr-green, #12a046); background: var(--qr-green-soft, #e3f3e7); }
.ov-pill--del  { color: var(--qr-danger, #c0392b); background: var(--qr-danger-soft, #fbecea); }
.ov-timer { font-variant-numeric: tabular-nums; }
.ov-head__date { display: flex; align-items: center; gap: 9px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--qr-line, #ece7df); color: var(--qr-muted, #6b7180); font-size: 14px; }

/* подписи секций */
.ov-label { margin: 20px 2px 8px; font-size: 15px; font-weight: 700; color: var(--qr-muted, #6b7180); }

/* карточки-строки (исполнитель, детали) */
.ov-exec, .ov-task, .ov-items, .ov-deliv { background: var(--qr-surface, #fff); border: 0; border-radius: var(--qr-r-md, 18px); box-shadow: var(--qr-sh-card, 0 4px 18px rgba(60,50,40,.06)); }

/* доставка: фото места + куда везём */
.ov-deliv { display: flex; gap: 14px; align-items: center; padding: 12px; }
.ov-deliv__media { flex: 0 0 auto; width: 92px; height: 92px; border-radius: 14px; background: var(--qr-bg-2, #f0ece6) center/cover no-repeat; display: flex; align-items: center; justify-content: center; color: var(--qr-faint, #9a968f); font-size: 28px; }
.ov-deliv__media.is-zoomable { cursor: zoom-in; }
.ov-deliv__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ov-deliv__lbl { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--app-muted); }
.ov-deliv__name { font-size: 17px; font-weight: 800; color: var(--app-text); }
.ov-deliv__desc { font-size: 13px; color: var(--app-muted); line-height: 1.35; }

/* раздел тура в заказе: фото + описание + опции */
.ov-tour { background: var(--qr-surface, #fff); border: 0; border-radius: var(--qr-r-md, 18px); overflow: hidden; box-shadow: var(--qr-sh-card, 0 4px 18px rgba(60,50,40,.06)); }
.ov-tour__media { width: 100%; aspect-ratio: 1/1; background: var(--qr-bg-2, #f0ece6) center/cover no-repeat; }
.ov-tour__media.is-zoomable { cursor: zoom-in; }
.ov-tour__body { padding: 14px 16px; }
.ov-tour__name { font-size: 17px; font-weight: 800; color: var(--app-text); }
.ov-tour__desc { font-size: 14px; color: var(--app-muted); margin-top: 6px; line-height: 1.45; }
.ov-tour__specs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 12px; margin-top: 14px; }
.ov-tour__spec { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ov-tour__spec-ic { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px; background: var(--ov-soft, rgba(47,107,237,.09)); color: var(--ov, #2f6bed); display: flex; align-items: center; justify-content: center; font-size: 15px; }
.ov-tour__spec-txt { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.ov-tour__spec-lbl { font-size: 12.5px; font-weight: 700; color: var(--app-text); }
.ov-tour__spec-val { font-size: 12.5px; font-weight: 600; color: var(--app-muted); }
.ov-tour__spec-val.is-yes { color: #16a34a; }
.ov-tour__spec-val.is-no { color: #dc2626; }

/* число гостей (только еда) */
.ov-guests { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 12px 16px; background: var(--qr-surface, #fff); border: 0; border-radius: var(--qr-r-sm, 14px); box-shadow: var(--qr-sh-card, 0 4px 18px rgba(60,50,40,.06)); font-size: 15px; color: var(--app-text); }
.ov-guests i { color: var(--ov); }
.ov-guests b { font-weight: 800; }

/* комментарий гостя к заказу */
.ov-note { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; background: var(--qr-surface, #fff); border: 0; border-radius: var(--qr-r-md, 18px); box-shadow: var(--qr-sh-card, 0 4px 18px rgba(60,50,40,.06)); font-size: 15px; line-height: 1.45; color: var(--app-text); }
.ov-note i { color: var(--ov); margin-top: 2px; flex: 0 0 auto; }
.ov-note span { min-width: 0; word-break: break-word; }
/* important information в заказе тура — как на странице тура: без иконки, голубой блок */
.ov-note--tour { display: block; background: rgba(3,105,161,.06); border-color: rgba(3,105,161,.15); box-shadow: none; }

/* удаление позиции сотрудником + зачёркивание удалённой */
.ov-item__del { flex: 0 0 auto; margin-left: 4px; width: 32px; height: 32px; border: 0; border-radius: 9px; background: none; color: #dc2626; font-size: 15px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.ov-item__del:active { background: rgba(220,38,38,.12); }
.ov-item--del .ov-item__q, .ov-item--del .ov-item__n, .ov-item--del .ov-item__p { text-decoration: line-through; opacity: .5; }
.osv-log__detail { font-size: 13px; color: var(--app-muted); margin-top: 1px; }

/* ── два квадрата над позицией: эталон из меню + фото реального блюда (сотрудник) ── */
.oiph { margin: 12px 0 8px; }
.oiph__cell { position: relative; width: 132px; aspect-ratio: 1/1; border-radius: 14px; background: #e9edf2 center/cover no-repeat; border: 1px solid var(--app-border); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--app-muted); overflow: hidden; text-align: center; }
.oiph__cell[data-full] { cursor: zoom-in; }
.oiph__cell--staff { cursor: pointer; border-style: dashed; border-color: #c7ccd4; background-color: #f7f8fa; }
.oiph__cell--staff.has-photo { border-style: solid; border-color: var(--app-border); }
.oiph__cell--staff.is-locked { cursor: default; border-style: solid; border-color: var(--app-border); }
.oiph__cell--staff.is-locked.has-photo { cursor: zoom-in; }
.oiph__ic { font-size: 30px; }
.oiph__cell--staff:not(.has-photo) .oiph__ic { color: var(--ov); }
.oiph__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 5px 8px; font-size: 11.5px; font-weight: 600; color: #fff; background: rgba(0,0,0,.45); }
.oiph__cell.is-empty .oiph__cap, .oiph__cell--staff:not(.has-photo) .oiph__cap { position: static; padding: 0 8px; color: var(--app-muted); background: none; }
.oiph__cap--hint { color: var(--ov) !important; font-weight: 700; font-size: 12.5px; }
.oiph__retake { position: absolute; top: 6px; right: 6px; width: 30px; height: 30px; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; cursor: pointer; }
.oiph__cell.is-busy { opacity: .5; pointer-events: none; }

/* ── квадратный кроппер (страница заказа сотрудника) ── */
.crop { position: fixed; inset: 0; display: none; z-index: 3000; }
.crop.is-open { display: block; }
.crop__overlay { position: absolute; inset: 0; background: rgba(0,0,0,.6); }
.crop__dialog { position: relative; background: var(--app-surface); border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.35); padding: 18px; width: min(400px, calc(100% - 32px)); margin: 8vh auto 0; }
.crop__title { font-size: 14px; color: var(--app-muted); margin-bottom: 12px; text-align: center; }
.crop__stage { position: relative; width: 100%; aspect-ratio: 1/1; border-radius: 12px; overflow: hidden; background: #111; touch-action: none; cursor: grab; user-select: none; }
.crop__stage:active { cursor: grabbing; }
.crop__stage img { position: absolute; top: 0; left: 0; transform-origin: 0 0; will-change: transform; max-width: none; }
.crop__frame { position: absolute; inset: 0; pointer-events: none; box-shadow: 0 0 0 1px rgba(255,255,255,.5) inset; }
.crop__zoom { width: 100%; margin: 14px 0; }
.crop__actions { display: flex; gap: 10px; justify-content: flex-end; }
.crop__btn { border: 1px solid var(--app-border); background: var(--app-surface); color: var(--app-text); padding: 10px 20px; border-radius: 10px; font-size: 14px; font-weight: 700; cursor: pointer; }
.crop__btn--primary { background: var(--ov, #2f6bed); color: #fff; border-color: var(--ov, #2f6bed); }
.ov-exec { display: flex; align-items: center; gap: 14px; padding: 14px 16px; }
.ov-exec__ava { position: relative; flex: 0 0 auto; width: 54px; height: 54px; border-radius: 50%; background: var(--qr-bg-2, #f0ece6) center/cover no-repeat; border: 2px solid var(--qr-line, #ece7df); }
.ov-exec__dot { position: absolute; right: -1px; bottom: -1px; width: 15px; height: 15px; border-radius: 50%; background: var(--qr-green, #12a046); border: 3px solid var(--qr-surface, #fff); }
.ov-exec__txt { flex: 1; min-width: 0; }
.ov-exec__name { font-size: 17px; font-weight: 800; color: var(--app-text); }
.ov-exec__role { font-size: 14px; color: var(--app-muted); margin-top: 1px; }
.ov-room-ic { position: relative; top: -1.5px; margin-right: 5px; font-size: 13px; color: inherit; }   /* дверь вместо «Номер» в заказе стафа, пропорции как у .ordc__key (27.10.2026) */
.ov-exec__call { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; background: var(--ov-soft); color: var(--ov); display: flex; align-items: center; justify-content: center; font-size: 17px; text-decoration: none; }
.ov-exec__call:active { background: rgba(47,107,237,.18); }

/* кто сделал заказ (аватар + имя) */
.ov-by { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--qr-surface, #fff); border: 0; border-radius: var(--qr-r-md, 18px); box-shadow: var(--qr-sh-card, 0 4px 18px rgba(60,50,40,.06)); }
.ov-by__ava { flex: 0 0 auto; width: 54px; height: 54px; border-radius: 50%; background: var(--qr-bg-2, #f0ece6) center/cover no-repeat; border: 2px solid var(--qr-line, #ece7df); }
.ov-by__name { font-size: 16px; font-weight: 800; color: var(--app-text); }
.ov-by__you { font-size: 12.5px; color: var(--app-muted); margin-top: 1px; }

/* детали услуги */
.ov-task { display: flex; align-items: center; gap: 14px; padding: 14px 16px; }
.ov-task__ic { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 14px; background: var(--ov-soft); color: var(--ov); display: flex; align-items: center; justify-content: center; font-size: 21px; }
.ov-task__txt { flex: 1; min-width: 0; }
.ov-task__name { font-size: 17px; font-weight: 800; color: var(--app-text); }
.ov-task__sub { font-size: 14px; color: var(--app-muted); margin-top: 1px; }

/* позиции (еда/магазин/туры) */
.ov-items { padding: 6px 16px; }
.ov-items__loc { display: flex; align-items: center; gap: 8px; color: var(--app-muted); font-size: 14px; padding: 12px 0 4px; }
.ov-item { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--qr-line, #ece7df); }
.ov-item:last-child { border-bottom: 0; }
.ov-item__q { flex: 0 0 auto; color: var(--ov); font-weight: 800; font-size: 15px; min-width: 30px; }
.ov-item__n { flex: 1; min-width: 0; font-weight: 600; color: var(--app-text); }
.ov-item__p { font-weight: 700; color: var(--app-text); }
.ov-item--total { font-weight: 800; }
.ov-item--total .ov-item__n, .ov-item--total .ov-item__p { font-weight: 800; }
/* строки разбивки налог/сбор — приглушённые, выровнены под колонку цены */
.ov-item--sub { padding: 8px 0; }
.ov-item--sub .ov-item__n { flex: 1; font-weight: 500; color: var(--app-muted); }
.ov-item--sub .ov-item__p { font-weight: 600; color: var(--app-muted); }
.ov-total { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; padding: 14px 16px; background: var(--qr-surface, #fff); border: 0; border-radius: var(--qr-r-md, 18px); box-shadow: var(--qr-sh-card, 0 4px 18px rgba(60,50,40,.06)); }
.ov-total span { color: var(--app-muted); } .ov-total b { font-size: 17px; }
.ov-total--tip { margin-top: 8px; padding: 10px 16px; background: transparent; border: 0; }
.ov-total--tip b { font-size: 15px; font-weight: 700; color: var(--app-muted); }

/* прогресс с кольцом */
.ov-prog { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 14px; padding: 20px 22px; background: #eaf0fd; border-radius: 18px; }
.ov-prog__lbl { color: var(--ov); font-weight: 700; font-size: 15px; }
.ov-prog__time { font-size: 42px; font-weight: 800; color: var(--ov); letter-spacing: -.02em; line-height: 1.05; margin: 4px 0; font-variant-numeric: tabular-nums; }
.ov-prog__sub { color: #7c8aa6; font-size: 14px; }
.ov-ring { position: relative; flex: 0 0 auto; width: 96px; height: 96px; }
.ov-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ov-ring circle { fill: none; stroke-width: 8; }
.ov-ring__t { stroke: rgba(47,107,237,.16); }
.ov-ring__a { stroke: var(--ov); stroke-linecap: round; stroke-dasharray: 264; }
.ov-ring i { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--ov); font-size: 24px; }

.ov .osv-myrate { margin-top: 0; }
.ov .osv-stop { margin-top: 16px; }

/* фикс-подвал с кнопкой заказа (гостевая страница заказа) */
.ov-actions { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: #faf9f7; border-top: 0; box-shadow: 0 -6px 26px rgba(45,38,30,.07); max-width: 520px; margin: 0 auto; }
.ov-actions .osv-stop { margin: 0; }
.ov--acts { padding-bottom: 92px; }

/* рейтинг исполнителя (звёзды) справа в карточке Handled by */
.ov-exec__rate { flex: 0 0 auto; display: inline-flex; gap: 3px; color: #f5a623; font-size: 14px; }

/* строка времени пробуждения (Wake-up) на странице заказа стаффа */
.osv-sched { display: flex; align-items: center; gap: 8px; background: var(--app-surface); border: 1px solid var(--app-border); border-radius: 14px; padding: 12px 16px; margin-bottom: 12px; font-size: 15px; color: var(--app-text); }
.osv-sched i { color: var(--app-accent); }
.osv-sched b { font-weight: 800; }

/* фото гостя на странице заказа стаффа — кликабельно (fullscreen) */
button.ov-exec__ava--btn { padding: 0; cursor: pointer; }

/* просроченные заказы (не приняты/не выполнены вовремя) — светло-красный + иконка «!» */
.ov-head.is-overdue { background: #fef2f2; border-color: #fca5a5; }
.ordc.is-overdue .ordc__chip, .ov-head.is-overdue .ov-timer { color: var(--qr-danger, #c0392b); background: var(--qr-danger-soft, #fbecea); }

/* ═══════════ РЕДИЗАЙН АВТОРИЗАЦИИ (v2) — scoped под .auth--v2 ═══════════ */
/* Страница логина: центрируем контент по .app-shell (100% от СТАБИЛЬНОЙ высоты WebView),
   БЕЗ 100dvh/svh — они пересчитываются в WKWebView при навигации (logout) и дают «дёрг».
   Плюс плавное появление (is-loading → fade) как аккуратная деталь. */
body.app-auth { height: 100%; }
body.app-auth .app-shell { min-height: 100%; display: flex; flex-direction: column; justify-content: center; }
.auth--v2 { max-width: 400px; width: 100%; margin: 0 auto; padding: 16px 0 28px; opacity: 1; transition: opacity .3s ease; }
.auth--v2.is-loading { opacity: 0; animation: authReveal .3s ease 2.5s forwards; }   /* страховка: если JS не снял класс — проявить к 2.5с */
@keyframes authReveal { to { opacity: 1; } }
.auth--v2 .auth__brand { text-align: center; margin-bottom: 24px; }
.auth--v2 .auth__logo { width: auto; height: 70px; max-width: 260px; padding: 0; background: none; border-radius: 0; box-shadow: none; object-fit: contain; }
.auth--v2 .auth__tagline { color: var(--app-muted); font-size: 14px; margin-top: 14px; }

/* табы-переключатель */
.auth--v2 .auth__tabs { display: flex; gap: 6px; background: #eceff5; border-radius: 16px; padding: 5px; margin-bottom: 22px; }
.auth--v2 .auth__tab { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; background: none; padding: 12px; border-radius: 12px; font-size: 15px; font-weight: 700; color: var(--app-muted); cursor: pointer; transition: background .18s, color .18s, box-shadow .18s; }
.auth--v2 .auth__tab i { font-size: 14px; }
.auth--v2 .auth__tab.is-active { background: #fff; color: #2c48c7; box-shadow: 0 4px 12px rgba(17,24,39,.10); }

/* формы */
.auth--v2 .auth__form { display: none; flex-direction: column; gap: 0; }
.auth--v2 .auth__form.is-active { display: flex; }

/* поле ввода с иконкой-плиткой */
.auth--v2 .auth__field { margin-bottom: 16px; }
.auth--v2 .auth__field label { display: block; font-size: 13px; font-weight: 700; color: #3a4256; margin-bottom: 8px; }
.auth--v2 .auth__inp { display: flex; align-items: center; gap: 10px; background: #fff; border: 1.5px solid #e6e8ef; border-radius: 15px; padding: 7px 12px 7px 7px; transition: border-color .15s, box-shadow .15s; }
.auth--v2 .auth__inp:focus-within { border-color: #4b6ee6; box-shadow: 0 0 0 4px rgba(75,110,230,.13); }
.auth--v2 .auth__inp-ic { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 11px; background: #eef1fe; color: #3b5bdb; display: flex; align-items: center; justify-content: center; font-size: 16px; }
.auth--v2 .auth__inp input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-size: 16px; line-height: 1.5; color: var(--app-text); padding: 2px 0; }
.auth--v2 .auth__inp input:focus { box-shadow: none; }
.auth--v2 .auth__inp input::placeholder { color: #aab0bd; }
.auth--v2 .auth__ok { flex: 0 0 auto; display: flex; color: #3b5bdb; font-size: 22px; }
.auth--v2 .auth__ok[hidden] { display: none; }
.auth--v2 .auth__eye { position: static; transform: none; flex: 0 0 auto; border: 0; background: none; color: #9aa1ad; font-size: 17px; padding: 6px 2px 6px 8px; cursor: pointer; }

/* строка «запомнить меня» / «забыли пароль» */
.auth--v2 .auth__meta { display: flex; align-items: center; justify-content: space-between; margin: 4px 2px 18px; }
.auth--v2 .auth__remember { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; color: #3a4256; font-weight: 600; cursor: pointer; user-select: none; }
.auth--v2 .auth__remember input { position: absolute; opacity: 0; width: 0; height: 0; }
.auth--v2 .auth__box { width: 20px; height: 20px; flex: 0 0 auto; border-radius: 6px; border: 1.5px solid #cdd2de; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 11px; transition: background .15s, border-color .15s; }
.auth--v2 .auth__box i { opacity: 0; transition: opacity .15s; }
.auth--v2 .auth__remember input:checked + .auth__box { background: #3b5bdb; border-color: #3b5bdb; }
.auth--v2 .auth__remember input:checked + .auth__box i { opacity: 1; }
.auth--v2 .auth__forgot { border: 0; background: none; color: #3b5bdb; font-size: 13.5px; font-weight: 700; cursor: pointer; padding: 0; }
.auth--v2 .auth__hint { font-size: 13px; color: var(--app-muted); background: #f0f2f8; border-radius: 12px; padding: 10px 12px; margin-bottom: 14px; }
.auth--v2 .auth__hint[hidden] { display: none; }

/* ошибка */
.auth--v2 .auth__err { color: var(--app-danger); font-size: 13.5px; margin-bottom: 12px; }
.auth--v2 .auth__err[hidden] { display: none; }

/* основная кнопка — градиент + стрелка */
.auth--v2 .auth__btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; border: 0; border-radius: 16px; padding: 16px; font-size: 16px; font-weight: 800; color: #fff; background: var(--app-dark); box-shadow: none; cursor: pointer; transition: transform .12s, opacity .15s; margin-top: 4px; }
.auth--v2 .auth__btn i { font-size: 15px; }
.auth--v2 .auth__btn:active { transform: translateY(1px); }
.auth--v2 .auth__btn:disabled { opacity: .6; }

/* аватар регистрации */
.auth--v2 .auth__avatar { align-self: center; width: 104px; height: 104px; border-radius: 50%; border: 3px solid #fff; background: #eef1fe center/cover no-repeat; box-shadow: 0 8px 22px rgba(47,75,201,.18); position: relative; cursor: pointer; margin: 2px 0 16px; overflow: hidden; }
.auth--v2 .auth__avatar-cam { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #3b5bdb; font-size: 24px; transition: opacity .15s, background .15s; }
.auth--v2 .auth__avatar.has-img .auth__avatar-cam { opacity: 0; color: #fff; }
.auth--v2 .auth__avatar.has-img:active .auth__avatar-cam { opacity: 1; background: rgba(0,0,0,.35); }
.auth--v2 .auth__legal { margin-top: 16px; text-align: center; font-size: 12.5px; color: var(--app-muted); line-height: 1.55; }
.auth--v2 .auth__legal a { color: #3b5bdb; font-weight: 600; text-decoration: none; white-space: nowrap; }

/* подпись-просьба под аватаром регистрации */
.auth--v2 .auth__avahint { align-self: center; max-width: 310px; text-align: center; font-size: 13px; color: var(--app-muted); line-height: 1.5; margin: -6px 0 18px; }

/* попап «нужно фото» */
.auth-pop { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(17,24,39,.55); }
.auth-pop[hidden] { display: none; }
.auth-pop__ov { position: absolute; inset: 0; }
.auth-pop__box { position: relative; width: 100%; max-width: 360px; background: var(--app-surface); border-radius: 22px; padding: 26px 22px 20px; text-align: center; box-shadow: 0 20px 50px rgba(17,24,39,.30); }
.auth-pop__ic { width: 66px; height: 66px; margin: 0 auto 14px; border-radius: 50%; background: #eef1fe; color: #3b5bdb; display: flex; align-items: center; justify-content: center; font-size: 27px; }
.auth-pop__ttl { font-size: 19px; font-weight: 800; margin-bottom: 8px; }
.auth-pop__msg { font-size: 14px; color: var(--app-muted); line-height: 1.5; margin-bottom: 20px; }
.auth-pop__btn { width: 100%; border: 0; border-radius: 14px; padding: 15px; font-size: 15px; font-weight: 800; color: #fff; background: var(--app-dark); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 9px; }
.auth-pop__btn:active { transform: translateY(1px); }
.auth-pop__cancel { display: block; width: 100%; border: 0; background: none; color: var(--app-muted); font-size: 14px; padding: 14px 8px 2px; cursor: pointer; }
/* Экран сброса пароля: успех — зелёная галка + сообщение */
.rs-done { text-align: center; padding: 8px 4px; }
.rs-done__ic { width: 74px; height: 74px; margin: 0 auto 16px; border-radius: 50%; background: rgba(22,163,74,.12); color: #16a34a; display: flex; align-items: center; justify-content: center; font-size: 36px; }
.rs-done__ttl { font-size: 22px; font-weight: 800; margin-bottom: 8px; }
.rs-done__txt { color: var(--app-muted); font-size: 14px; line-height: 1.5; margin-bottom: 24px; }

/* Экран сброса пароля: сообщение об истёкшей/неверной ссылке (/reset/{token}) */
.rs-msg { text-align: center; padding: 8px 4px; }
.rs-msg__ic { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%; background: rgba(220,38,38,.10); color: #dc2626; display: flex; align-items: center; justify-content: center; font-size: 26px; }
.rs-msg__ttl { font-size: 20px; font-weight: 800; margin-bottom: 8px; }
.rs-msg__txt { color: var(--app-muted); font-size: 14px; line-height: 1.5; margin-bottom: 22px; }

.auth-pop__ic--danger { background: rgba(220,38,38,.12); color: #dc2626; }   /* деструктивное подтверждение (удаление) */
.auth-pop__btn--danger { background: #dc2626; }
.auth-pop__btn:disabled { opacity: .6; }
/* выбранные опции блюда в заказе */
.ov-item__opt { display: block; font-size: 12px; color: var(--app-muted); font-weight: 500; margin-top: 2px; }

/* сохраняем переносы строк в описаниях заказа */
.ov-tour__desc, .ov-deliv__desc, .ov-deliv__info, .ov-note span { white-space: pre-line; }

/* Иконка раздела «Туры/Travel» — кастомный SVG (микроавтобус); рисуется маской, цвет наследуется как у FontAwesome (currentColor) */
.icn-travel{display:inline-block;width:1em;height:1em;vertical-align:-.125em;background-color:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='36'%20height='36'%20viewBox='0%200%2036%2036'%20fill='none'%3E%3Cpath%20d='M27.964%205.40466C29.7519%204.76613%2031.4782%206.49245%2030.8397%208.28034L22.8695%2030.5968C22.1338%2032.657%2019.1882%2032.5616%2018.5872%2030.4581L15.7425%2020.5018L5.78623%2017.6572C3.68275%2017.0562%203.58739%2014.1106%205.64759%2013.3748L27.964%205.40466Z'%20fill='%23fff'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='36'%20height='36'%20viewBox='0%200%2036%2036'%20fill='none'%3E%3Cpath%20d='M27.964%205.40466C29.7519%204.76613%2031.4782%206.49245%2030.8397%208.28034L22.8695%2030.5968C22.1338%2032.657%2019.1882%2032.5616%2018.5872%2030.4581L15.7425%2020.5018L5.78623%2017.6572C3.68275%2017.0562%203.58739%2014.1106%205.64759%2013.3748L27.964%205.40466Z'%20fill='%23fff'/%3E%3C/svg%3E") center/contain no-repeat;}

/* команда исполнителей на странице заказа сотрудника (+ Accept / удалить себя) */
.ov-team { display: flex; flex-wrap: wrap; gap: 12px; }
.ov-team__item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 74px; }
.ov-team__ava { width: 54px; height: 54px; border-radius: 50%; background: #e9edf2 center/cover no-repeat; border: 2px solid var(--app-border); }
.ov-team__name { font-size: 12px; font-weight: 600; color: var(--app-text); text-align: center; max-width: 74px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-team__rm { position: absolute; top: -4px; right: 8px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: #dc2626; color: #fff; font-size: 11px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.ov-team__add { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 6px; width: 74px; border: 0; background: none; color: var(--app-accent, #2f6bed); font-size: 12px; font-weight: 700; cursor: pointer; padding: 0; }
.ov-team__plus { width: 54px; height: 54px; border-radius: 50%; border: 1.5px dashed var(--app-accent, #2f6bed); background: rgba(47,107,237,.05); display: flex; align-items: center; justify-content: center; font-size: 18px; }

/* команда исполнителей у гостя (фото рядышком) */
.rate__team { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-bottom: 8px; }
.rate__team-item { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 76px; }
.rate__team-ava { width: 60px; height: 60px; border-radius: 50%; background: #e9edf2 center/cover no-repeat; }
.rate__team-name { font-size: 12.5px; font-weight: 600; color: var(--app-text); text-align: center; max-width: 76px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* команда в шаге чаевых — компактнее */
.rate__team--sm { gap: 10px; margin-bottom: 12px; }
.rate__team--sm .rate__team-ava { width: 46px; height: 46px; }
.rate__team--sm .rate__team-item { width: 62px; }
.rate__team--sm .rate__team-name { font-size: 11.5px; max-width: 62px; }

/* список исполнителей у гостя (каждый отдельной строкой) */
.ov-execs { display: flex; flex-direction: column; gap: 10px; }

/* Баннер «Новый заказ» у стафа (js/app-orders.js): выезжает сверху, звук+вибро идут отдельно. */
.ord-toast { position: fixed; left: 50%; top: calc(env(safe-area-inset-top) + 10px); z-index: 9999;
    transform: translateX(-50%) translateY(-160%); background: #6d5ef5; color: #fff; font-weight: 600; font-size: 14px;
    padding: 12px 18px; border-radius: 14px; box-shadow: 0 10px 28px rgba(109,94,245,.42); display: flex; align-items: center; gap: 8px;
    opacity: 0; transition: transform .32s cubic-bezier(.2,.85,.25,1), opacity .32s; pointer-events: none; max-width: 90vw; }
.ord-toast.is-on { transform: translateX(-50%) translateY(0); opacity: 1; pointer-events: auto; }

/* Скелетоны в app-оболочке (стаф SPA app-staff-nav.js). Базовые шиммер-классы дублируем сюда —
   app-оболочка не грузит common.css/app-hotel.css, где они живут для гостя. */
@keyframes qsk-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.qsk-line { display: block; height: 12px; border-radius: 6px; width: 80%; }
.qsk-line--sm { width: 45%; }
.qsk-sh, .qsk-line { background-image: linear-gradient(100deg, #e9ecf1 28%, #f3f5f8 44%, #e9ecf1 60%); background-size: 200% 100%; animation: qsk-shimmer 1.15s ease-in-out infinite; }
.qsk-sh { background-image: linear-gradient(100deg, #e9ecf1 28%, #f3f5f8 44%, #e9ecf1 60%) !important; background-size: 200% 100% !important; }

/* Меню управления каталогом у admin-сотрудника (staff.php) — в футере под кнопкой Add guest. */
.staff-fbar--admin { flex-direction: column; gap: 8px; }
.staff-fspacer--admin { height: 168px; }
.staff-amenu { display: flex; gap: 8px; width: 100%; }
.staff-amenu__btn {
    flex: 1; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
    height: 66px; padding: 9px 4px; border-radius: 14px; background: #f2f1ef; color: #6b7180; text-decoration: none;
    font-size: 12.5px; font-weight: 600;
}
.staff-amenu__btn i { font-size: 20px; color: #4a5260; }
.staff-amenu__btn:active { background: #eae8e4; }

/* Скелетон редактора каталога (стаф-SPA /manage/*). В app.css — доступен сразу, т.к. css редактора
   (common/food-admin) грузится позже вместе с фрагментом. Мерцание — общий .qsk-sh (выше). */
.msk { padding-bottom: 40px; }
.msk__top { display: flex; align-items: center; gap: 8px; box-sizing: border-box;
    height: calc(env(safe-area-inset-top) + 56px); padding: calc(env(safe-area-inset-top) + 8px) 12px 8px;
    background: #fff; border-bottom: 1px solid var(--app-border); margin-bottom: 4px; }
.msk__back { width: 40px; height: 40px; border-radius: 12px; flex: 0 0 auto; }
.msk__ttl { width: 120px; height: 18px; border-radius: 8px; margin: 0 auto; }
.msk__body { padding: 0 16px; }
.msk-h { width: 130px; height: 20px; border-radius: 8px; margin: 12px 0; }
.msk-loc { display: flex; align-items: center; gap: 14px; background: var(--app-surface); border: 1px solid var(--app-border); border-radius: 18px; padding: 12px; margin-bottom: 12px; }
.msk-loc__img { width: 88px; height: 88px; border-radius: 14px; flex: 0 0 auto; }
.msk-loc__b { flex: 1; min-width: 0; }
.msk-l { height: 13px; border-radius: 7px; margin-bottom: 8px; display: block; }
.msk-dishes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 14px; }
.msk-dish__img { width: 100%; aspect-ratio: 1/1; border-radius: 16px; margin-bottom: 6px; display: block; }

/* Редактор каталога в SPA-оболочке стафа занимает всю ширину (у него своя шапка .stman__top).
   overflow-x тут НЕ ставим — оно делает .app-shell/body скролл-контейнером и ломает position:sticky шапки/категорий. */
body.stman-open .app-shell { padding: 0; max-width: 100%; }

/* Пикер звука уведомлений (настройки сотрудника) — нижняя шторка со списком 30 звуков */
.sndsheet { position: fixed; inset: 0; z-index: 1300; display: flex; align-items: flex-end; }
.sndsheet[hidden] { display: none; }
.sndsheet__ov { position: absolute; inset: 0; background: rgba(0,0,0,.45); }
.sndsheet__box { position: relative; width: 100%; max-height: 90%; display: flex; flex-direction: column; background: var(--app-surface,#fff); border-radius: 20px 20px 0 0; padding: 6px 0 calc(env(safe-area-inset-bottom) + 10px); }
.sndsheet__box::before { content: ''; flex: none; width: 38px; height: 5px; margin: 4px auto 0; border-radius: 3px; background: #d5d1cb; }   /* палочка: тянуть вниз - закрыть (js/sheet-drag.js) */
.sndsheet__hd { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px 2px; font-weight: 800; font-size: 16px; color: var(--app-text,#111827); }
.sndsheet__x { border: 0; background: transparent; font-size: 24px; line-height: 1; color: var(--app-muted,#6b7280); cursor: pointer; padding: 0 4px; }
.sndsheet__hint { padding: 0 18px 8px; font-size: 12.5px; color: var(--app-muted,#6b7280); line-height: 1.4; }
.sndsheet__list { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 4px 10px; }
.sndrow { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border: 0; background: transparent; padding: 11px 10px; border-radius: 12px; cursor: pointer; font-size: 15px; color: var(--app-text,#111827); }
.sndrow:active { background: #eef0f4; }
.sndrow.is-sel { background: rgba(109,94,245,.10); }
.sndrow__play { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; background: #eef0f4; color: var(--app-accent,#6d5ef5); display: flex; align-items: center; justify-content: center; font-size: 12px; }
.sndrow__play--none { background: transparent; }
.sndrow__name { flex: 1 1 auto; min-width: 0; font-weight: 600; }
.sndrow__chk { flex: 0 0 auto; color: var(--app-accent,#6d5ef5); opacity: 0; font-size: 15px; }
.sndrow.is-sel .sndrow__chk { opacity: 1; }

/* ═══════════ СБОРКА ГЛАВНОГО ЭКРАНА СОТРУДНИКА ═══════════
   Классы ставит скрипт из parts/staff_intro.php:
     .sfx        - режим сборки ВКЛЮЧЁН. Не снимается: под ним живёт анимация карточек, которая
                   играет при переключении «Активные/Выполненные» и при возврате на ленту.
     .sfx-first  - ПЕРВАЯ сборка при открытии приложения: шапка, кольцо, панель, блик и длинные
                   задержки карточек. Снимается, когда доиграл блик.
   ⚠ Стили лежат ЗДЕСЬ, а не в подключаемом куске страницы: при переходах внутри приложения
   (зашёл в заказ - вернулся) .app-shell подменяется целиком, и стили из него исчезали вместе с
   содержимым - анимация переставала работать. Нашёл заказчик.
   Остальные грабли - в qrush.info, раздел «Сборка главного экрана сотрудника». */
@media (prefers-reduced-motion: no-preference) {
@media (prefers-reduced-motion: no-preference) {

@keyframes sfxFade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes sfxDeck  { from { opacity: 0; transform: translateY(150px) rotate(7deg) scale(.9); }
                      60%  { opacity: 1; }
                      to   { opacity: 1; transform: none; } }
@keyframes sfxUp    { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: none; } }
@keyframes sfxShine { 0%   { opacity: 1; transform: translateX(-140%); }
                      85%  { opacity: 1; }
                      100% { opacity: 0; transform: translateX(220%); } }
@keyframes sfxRing  { 0%   { opacity: 0; transform: rotate(-90deg) scale(.82); }
                      15%  { opacity: 1; transform: rotate(90deg) scale(1); }
                      85%  { opacity: 1; transform: rotate(900deg) scale(1); }
                      100% { opacity: 0; transform: rotate(1010deg) scale(1.1); } }

/* До запуска держим скрытым: старт отложен до готовности страницы, иначе сборка отыгрывает,
   пока человек смотрит на нативную заставку («видны последние секунды»). Страховка - через 4с
   всё проявится само, даже если скрипт не сработает. */
@keyframes sfxSafe { to { opacity: 1; } }
body.sfx-hold .vis__top,
body.sfx-hold .ord-switch,
body.sfx-hold .ord-list:not([hidden]) > *,
body.sfx-hold .staff-fbar { opacity: 0; animation: sfxSafe 0s linear 6s forwards; }

/* шапка: только проявление, БЕЗ смещения (см. предупреждение выше) */
body.sfx-first .vis__top    { animation: sfxFade .5s ease-out both; }
body.sfx-first .ord-switch  { animation: sfxUp .5s cubic-bezier(.22,.9,.3,1) .12s both; }
body.sfx .ord-list:not([hidden]) > *{ animation: sfxDeck .72s cubic-bezier(.16,1.12,.3,1) both; }
/* Скелетон НЕ анимируем. Он и так шиммерит, а влёт серых заглушек читается как двойная
   анимация: сначала прилетают прямоугольники, следом настоящие карточки. Корень скелетона
   помечен aria-hidden="true" (js/app-staff-nav.js) - по нему и отсекаем. */
body.sfx [aria-hidden="true"] .ord-list > * { animation: none; }
/* Карточки, догруженные прокруткой, НЕ анимируем: влёт хорош при первом показе списка, а на
   подгрузке читается как дёрганье (просьба заказчика 25.09.2026). Пометку ставит js/app-orders.js. */
body.sfx .ord-list:not([hidden]) > [data-more] { animation: none; opacity: 1; }
body.sfx-first .staff-fbar  { animation: sfxUp .55s cubic-bezier(.22,.9,.3,1) .6s both; }
/* переключение «Активные/Выполненные»: ждать нечего, стартуем сразу */
/* Шаг между карточками ТОТ ЖЕ, что при первой сборке (0.1с) - это и есть выбранный «влёт
   колодой». Отличие только в том, что ждать нечего: старт без задержки. Шаг не сокращать:
   заказчик замечает смену ритма и читает её как «анимация поменялась». */
body.sfx .ord-list:not([hidden]) > :nth-child(1){animation-delay:0s}   body.sfx .ord-list:not([hidden]) > :nth-child(2){animation-delay:.1s}
body.sfx .ord-list:not([hidden]) > :nth-child(3){animation-delay:.2s}  body.sfx .ord-list:not([hidden]) > :nth-child(4){animation-delay:.3s}
body.sfx .ord-list:not([hidden]) > :nth-child(5){animation-delay:.4s}  body.sfx .ord-list:not([hidden]) > :nth-child(n+6){animation-delay:.5s}
/* первая сборка при открытии приложения: с оглядкой на нативную заставку (класс снимается, когда отыграло) */
body.sfx-first .ord-list:not([hidden]) > :nth-child(1){animation-delay:.24s} body.sfx-first .ord-list:not([hidden]) > :nth-child(2){animation-delay:.34s}
body.sfx-first .ord-list:not([hidden]) > :nth-child(3){animation-delay:.44s} body.sfx-first .ord-list:not([hidden]) > :nth-child(4){animation-delay:.54s}
body.sfx-first .ord-list:not([hidden]) > :nth-child(5){animation-delay:.64s} body.sfx-first .ord-list:not([hidden]) > :nth-child(n+6){animation-delay:.74s}

/* Блик по золотой кнопке, когда панель уже встала на место. */
body.sfx-first .staff-qrbtn { position: relative; overflow: hidden; }
body.sfx-first .staff-qrbtn::after {
    content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 55%; pointer-events: none;
    background: linear-gradient(104deg, rgba(255,255,255,0) 35%, rgba(255,255,255,.42) 50%, rgba(255,255,255,0) 65%);
    animation: sfxShine .9s cubic-bezier(.35,.1,.25,1) 1.25s both;
}

/* «Крутилка»: золотая дуга обегает аватар и гаснет. Рисуем псевдоэлементом поверх .vis__ava -
   у img своих псевдоэлементов нет.
   ⚠ СДЕЛАНО ОБЫЧНЫМ БОРДЮРОМ НАМЕРЕННО. Первая версия была коническим градиентом под -webkit-mask
   плюс will-change: в headless-WebKit рисовалась, а на живом айфоне у заказчика кольца не было
   вовсе. Маска + слой + градиент - связка, которая в WKWebView умеет не отрисовываться. Дуга на
   border-color работает везде и стоит столько же (крутится один маленький слой). */
body.sfx-first .vis__hi { position: relative; }
body.sfx-first .vis__hi::before {
    content: ''; position: absolute; left: -4px; top: 50%; margin-top: -30px;
    width: 54px; height: 54px; border-radius: 50%; pointer-events: none; z-index: 2;
    border: 3px solid transparent; border-top-color: #e3c07a; border-right-color: #b07c2e;
    animation: sfxRing 1.7s cubic-bezier(.35,.02,.3,1) both;
}

}
}

/* ═══════════ ПОЯВЛЕНИЕ СПИСКА ПОСЕЩЕНИЙ ═══════════
   То же движение, что во всех разделах приложения («Появление списков» в css/app-hotel.css):
   карточка выезжает снизу, фото внутри идёт НАВСТРЕЧУ и доезжает до места.
   ⚠ Кадры продублированы НАМЕРЕННО: экран посещений открывается и без оболочки отеля, где
   app-hotel.css не подключён. Числа обязаны совпадать с оболочкой - за этим следит проверка
   в наборе (ops/checks.php), руками их врозь не править.
   Номер карточки (--i) ставит js/app-appear.js: тут карточки идут вперемежку с заголовками
   разделов, и nth-child считал бы заголовки.
   Анимируем только помеченный список (.is-real): у скелетона те же классы. */
body { --qap-dur: 1.8s; --qap-ease: cubic-bezier(.22,.9,.3,1); --qap-step: .18s; }

@media (prefers-reduced-motion: no-preference) {
@keyframes qapCard  { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: none; } }
@keyframes qapPhoto { from { transform: translateY(-26px) scale(1.14); } to { transform: none; } }
@keyframes qapSafe  { to { opacity: 1; } }

/* до запуска держим скрытым; если запуск не придёт - через 6с проявится само */
body.qap-hold .vis > .visit,
body.qap-hold .vis--past > .visit { opacity: 0; animation: qapSafe 0s linear 6s forwards; }
/* скелетон остаётся видимым и не анимируется */
body.qap-hold [aria-hidden="true"] .visit { opacity: 1; animation: none; }
[aria-hidden="true"] .visit { animation: none; }

body.qap-in .vis.is-real .visit {
    animation: qapCard var(--qap-dur) var(--qap-ease) both;
    animation-delay: calc(var(--i, 0) * var(--qap-step) + .04s);
}
body.qap-in .vis.is-real .visit .visit__photo {
    animation: qapPhoto var(--qap-dur) var(--qap-ease) both;
    animation-delay: calc(var(--i, 0) * var(--qap-step) + .04s);
}
}

/* ═══════════ ЗАКАЗ У СОТРУДНИКА: ПОЗИЦИИ КАРТОЧКАМИ (макет 25.09.2026) ═══════════
   Фото слева, название, корзина в углу, счётчик количества и сумма строки. Цвета сняты
   пипеткой с макета и совпадают с фирстилем: кнопка #B37930, бежевая подложка #F5EADE,
   карточка #FCF9F6. Числа - при ширине 420 (макет снят на iPhone, плотность 3). */
.oicards { background: none; box-shadow: none; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.oicard { display: flex; gap: 14px; align-items: flex-start;
    background: var(--qr-surface, #fff); border-radius: 18px; padding: 12px;
    box-shadow: var(--qr-sh-card, 0 4px 18px rgba(60,50,40,.06)); }
.oicard__ph { flex: 0 0 auto; width: 92px; height: 92px; border-radius: 16px; overflow: hidden;
    background: #f0ece6 center/cover no-repeat; display: flex; align-items: center; justify-content: center;
    color: #c9c2b6; font-size: 20px; }
.oicard__ph.is-empty { background: linear-gradient(135deg, #f5f0e8, #ece5d9); }
.oicard__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column;
    justify-content: space-between; align-self: stretch; min-height: 92px; }
.oicard__top { display: flex; align-items: flex-start; gap: 10px; }
.oicard__name { flex: 1 1 auto; min-width: 0; font-weight: 800; font-size: 16px; line-height: 1.25;
    letter-spacing: -.01em; color: var(--app-text); }
.oicard__opt { display: block; font-weight: 500; font-size: 13px; color: var(--app-muted); margin-top: 3px; }
/* корзина - бежевый кружок, как на макете; размер с замера (31px) */
.oicard__del { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; border: 0; cursor: pointer;
    background: var(--qr-gold-soft, #f1ece5); color: var(--qr-gold, #b07c2e); font-size: 14px;
    display: inline-flex; align-items: center; justify-content: center; transition: transform .12s, background .15s; }
.oicard__del:active { transform: scale(.92); }
.oicard__bot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.oicard__p { font-weight: 800; font-size: 17px; color: var(--app-text); white-space: nowrap; }
/* счётчик: бежевая пилюля, в середине белое поле с числом */
.oiqty { display: inline-flex; align-items: center; background: var(--qr-gold-soft, #f1ece5);
    border-radius: 999px; padding: 3px; }
.oiqty__b { width: 32px; height: 32px; border: 0; border-radius: 50%; cursor: pointer;
    background: transparent; color: var(--qr-gold, #b07c2e); font-size: 13px; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center; transition: background .15s, transform .12s; }
.oiqty__b:active { transform: scale(.9); }
.oiqty__b:disabled { opacity: .45; cursor: default; }
.oiqty__n { min-width: 42px; height: 32px; border-radius: 999px; background: var(--qr-surface, #fff);
    display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px;
    color: var(--app-text); }
.oiqty--static { background: none; padding: 0; }
.oiqty--static .oiqty__n { background: var(--qr-gold-soft, #f1ece5); }
.oicard.is-del { opacity: .5; }
.oicard.is-del .oicard__name { text-decoration: line-through; }
.oicard--empty { justify-content: center; color: var(--app-muted); padding: 18px 12px; }
/* подытог/налог отдельной карточкой, итог - бежевой плашкой (как на макете) */
.oisum { background: var(--qr-surface, #fff); border-radius: 18px; padding: 4px 16px; margin-top: 14px;
    box-shadow: var(--qr-sh-card, 0 4px 18px rgba(60,50,40,.06)); }
.oisum__row { display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 13px 0; font-size: 15px; color: var(--app-muted); }
.oisum__row + .oisum__row { border-top: 1px solid rgba(60,50,40,.08); }
.oisum__row b { font-weight: 700; color: var(--app-text); }
.ov-total { background: var(--qr-gold-soft, #f1ece5); box-shadow: none; padding: 16px; }
.ov-total span { color: var(--qr-gold-2, #916b39); font-weight: 600; }
.ov-total b { font-size: 20px; font-weight: 800; color: var(--qr-gold, #b07c2e); }
/* просьбы гостя в вызове официанта (pages/app/staff_order.php, владелец 24.10.2026): карточка со строками - значок, что принести, сколько */
.ov-asks { padding: 4px 16px; background: var(--qr-surface, #fff); border-radius: var(--qr-r-md, 18px); box-shadow: var(--qr-sh-card, 0 4px 18px rgba(60,50,40,.06)); }
.ov-ask { display: flex; align-items: center; gap: 12px; padding: 12px 0; }
.ov-ask + .ov-ask { border-top: 1px solid #f0f1f4; }
.ov-ask__ic { flex: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #f2f3f5; font-size: 16px; color: var(--qr-ink, #0e1424); }
.ov-ask__t { flex: 1 1 auto; min-width: 0; font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--qr-ink, #0e1424); overflow-wrap: break-word; }
.ov-ask__n { flex: none; min-width: 52px; padding: 6px 10px; border-radius: 10px; background: #f2f3f5; text-align: center; font-size: 14px; font-weight: 800; color: var(--qr-ink, #0e1424); }
/* шторки не оттягиваются: без пружины iOS у края прокрутки (владелец 24.10.2026) */
:is(.sndsheet__list, .bksheet__box) { overscroll-behavior: none; }
/* меню и кнопки приложения не обводятся и не выделяются: ни рамки фокуса после касания, ни подсветки,
   долгое нажатие не выделяет подписи и не открывает меню ссылки (владелец 24.10.2026). Поля ввода не трогаем. */
:is(body.app, body.app-hotel) :is(a, button, [role="tab"], nav, label) { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
:is(body.app, body.app-hotel) :is(nav, [role="tablist"], .ah-tabbar, .hadm-bar, .dmb, .food-cats, .tvp-cats, .tr-cats, .ord2__seg) :is(a, button, [role="tab"]):is(:focus, :focus-visible) { outline: none; }
/* у шторок нет крестика: закрываются смахиванием вниз (js/sheet-drag.js) и нажатием на затемнение (владелец 25.10.2026) */
:is(.cartsheet__x, .sndsheet__x, .bksheet__x, .qhelp__x, .ghw__x) { display: none !important; }

/* статусы заказов - прямоугольником со скруглением, а не пилюлей (владелец 25.10.2026): карточка заказа (гость и стаф),
   список заказов гостя (css/app-hotel.css .ord2c__chip), лента стафа. В админке то же - css/orders-admin.css .ordp-pill */
html body :is(.ov-pill, .ordc__chip, .ord2c__chip) { border-radius: 8px; }
/* заказ у стафа: подарки из вишлиста рядом с чаевыми и оценки блюд гостем (pages/app/staff_order.php, владелец 25.10.2026) */
/* подарки - отдельными плитками справа от плашки чаевых, на ее высоту, отступ 8px (владелец 25.10.2026); больше двух - первый и «+N» */
.osv-tiprow { display: flex; align-items: stretch; gap: 8px; margin-top: 12px; }
.osv-tiprow > .osv-tip { flex: 1 1 auto; min-width: 0; margin-top: 0; }
.osv-tipgift { flex: 0 0 70px; display: flex; align-items: center; justify-content: center; border-radius: 16px; background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .06); }
.osv-tipgift img { width: 52px; height: 52px; object-fit: contain; }
.osv-tipgift--more { font-size: 18px; font-weight: 800; color: #16a34a; }
.oicard__rate { display: flex; gap: 2px; margin-top: 4px; font-size: 12px; color: #f5b301; }
.oicard__rate .fa-regular { color: #d5d1cb; }
/* страница заказа у гостя: «Ваш подарок» - подарки из вишлиста карточкой, как «Ваша оценка» (владелец 26.10.2026) */
.osv-mygift { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; background: var(--app-surface); border: 1px solid var(--app-border); border-radius: 16px; padding: 16px; }
.osv-mygift__it { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; border-radius: 14px; background: var(--app-bg); }
.osv-mygift__it img { width: 48px; height: 48px; object-fit: contain; }
/* шторки без полосы прокрутки (владелец 26.10.2026): прокрутка работает, полосы нет. В оболочке отеля полосы спрятаны
   везде (common.css), здесь - для стафа, «QRush» и профиля. Новая шторка - добавить ее корень в список */
:is(.dmb-sh, .osh, .cartsheet, .sndsheet, .bksheet, .pf-sheet, .asksheet, .locsheet, .prodsheet, .toursheet, .wlsheet, .r2sheet, .qhelp, .ghw, .optpop), :is(.dmb-sh, .osh, .cartsheet, .sndsheet, .bksheet, .pf-sheet, .asksheet, .locsheet, .prodsheet, .toursheet, .wlsheet, .r2sheet, .qhelp, .ghw, .optpop) * { scrollbar-width: none; -ms-overflow-style: none; }
:is(.dmb-sh, .osh, .cartsheet, .sndsheet, .bksheet, .pf-sheet, .asksheet, .locsheet, .prodsheet, .toursheet, .wlsheet, .r2sheet, .qhelp, .ghw, .optpop)::-webkit-scrollbar, :is(.dmb-sh, .osh, .cartsheet, .sndsheet, .bksheet, .pf-sheet, .asksheet, .locsheet, .prodsheet, .toursheet, .wlsheet, .r2sheet, .qhelp, .ghw, .optpop) *::-webkit-scrollbar { width: 0; height: 0; display: none; }
/* обрезка знака отеля (js/app-crop.js logo): светлая шахматка вместо черного фона - видно прозрачные поля и темные надписи */
.acrop--logo .acrop__stage { background-color: #fff; background-image: linear-gradient(45deg, #eceef1 25%, transparent 25%, transparent 75%, #eceef1 75%), linear-gradient(45deg, #eceef1 25%, transparent 25%, transparent 75%, #eceef1 75%);
    background-size: 16px 16px; background-position: 0 0, 8px 8px; }

/* галочка согласия на обработку ПД (php/app/consent.php app_consent_html, владелец 26.10.2026): своя рамка, ссылки на документы */
.qr-agree { display: flex; align-items: flex-start; gap: 10px; margin: 14px 0 0; cursor: pointer; text-align: left; -webkit-tap-highlight-color: transparent; }
.qr-agree input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.qr-agree__box { flex: none; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-top: 1px; box-sizing: border-box;
    border: 1.5px solid #c9ccd3; border-radius: 6px; background: #fff; color: transparent; font-size: 12px; transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.qr-agree input:checked + .qr-agree__box { background: var(--ea, var(--qr-ink, #0e1424)); border-color: var(--ea, var(--qr-ink, #0e1424)); color: #fff; }
.qr-agree input:focus-visible + .qr-agree__box { box-shadow: 0 0 0 3px rgba(14, 20, 36, .15); }
.qr-agree__tx { font-size: 13px; line-height: 1.45; color: var(--app-muted, #6b7180); }
.qr-agree__tx a { color: var(--qr-ink, #0e1424); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }