*{box-sizing:border-box}
/* В полноэкранном режиме приложение лежит под шапкой Telegram и вырезом экрана. Вне его значения нулевые. */
:root{--app-top:calc(var(--tg-safe-area-inset-top,0px) + var(--tg-content-safe-area-inset-top,0px));
  --app-height:calc(var(--tg-viewport-stable-height,100vh) - var(--app-top))}
/* Прокручивается только #app: страницу целиком WebView оттягивает за край вместе с нижней навигацией */
html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none}
body{background:#EFE6D4;color:#17110F;font-family:'Golos Text',system-ui,sans-serif;-webkit-font-smoothing:antialiased;overscroll-behavior:none}
a{color:#D8241F;text-decoration:none}
a:hover{color:#A81813}
*{scrollbar-width:none}
*::-webkit-scrollbar{display:none}
#app{height:100%;overflow-y:auto;overscroll-behavior:none;-webkit-overflow-scrolling:touch}
.screen{min-height:var(--tg-viewport-stable-height,100vh);padding-top:var(--app-top)}
[data-loading]{opacity:.5;pointer-events:none}
[data-disabled]{opacity:.45;pointer-events:none;filter:grayscale(.4)}
/* выглядит неактивной, но нажимается: по нажатию экран объясняет, что не так */
[data-invalid]{opacity:.45;filter:grayscale(.4)}
[data-action],[data-nav],[data-go],[data-href],[data-back]{cursor:pointer;-webkit-tap-highlight-color:transparent}
[data-photo]{background-size:cover;background-position:center}
/* Telegram рисует свой статус-бар: декоративные «9:41» из макета не показываем */
[data-statusbar]>span:first-child:not(:only-child){visibility:hidden}
input,textarea{font:inherit;color:inherit;background:transparent;border:0;outline:0;width:100%;padding:0;margin:0;resize:none}
input::placeholder,textarea::placeholder{color:#9a8a7c;opacity:1}

/* Экран собирается за кадром, пока подставляются данные (router.js) */
.stage{position:fixed;top:0;left:-200vw;width:100vw;visibility:hidden;pointer-events:none}
/* Полоска загрузки, если данные экрана задерживаются */
body.route-loading::before{content:'';position:fixed;top:0;left:0;height:3px;width:40%;z-index:200;background:#C21A16;
  animation:route-loading 1s ease-in-out infinite}
@keyframes route-loading{0%{transform:translateX(-100%)}100%{transform:translateX(260%)}}

/* Заставка при запуске (index.html), пока грузятся данные */
.splash{min-height:var(--tg-viewport-stable-height,100vh);display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:18px;background:#C21A16;color:#F6EFE1;padding-top:var(--app-top)}
.splash-mark{width:16px;height:16px;background:#F6EFE1;transform:rotate(45deg);animation:splash 1.2s ease-in-out infinite}
.splash-title{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.3em;font-size:13px;font-weight:600}
@keyframes splash{0%,100%{opacity:.35;transform:rotate(45deg) scale(.8)}50%{opacity:1;transform:rotate(45deg) scale(1.15)}}

/* Нижняя навигация всегда у нижнего края экрана. В разметке экранов стоит overflow:hidden, а внутри него
   sticky держится за сам экран и уезжает вместе со страницей; clip обрезает так же, но не мешает sticky. */
@supports (overflow:clip){.screen{overflow:clip!important}}
[data-tabbar]{position:sticky!important;bottom:0;z-index:20;padding-bottom:calc(22px + max(env(safe-area-inset-bottom),var(--tg-safe-area-inset-bottom,0px)))!important}

/* Клавиатура открыта (router.js): нижней навигации над ней не место */
body.typing [data-tabbar]{display:none!important}

/* Тост: короткие подтверждения и ошибки (ТЗ §10) */
.toast{position:fixed;left:50%;bottom:calc(92px + env(safe-area-inset-bottom));transform:translate(-50%,20px);opacity:0;
  max-width:calc(100% - 40px);background:#17110F;color:#F6EFE1;border:2px solid #17110F;border-radius:14px;padding:11px 16px;
  font-family:'Golos Text',sans-serif;font-size:14px;line-height:1.35;box-shadow:3px 3px 0 #C6A052;z-index:100;
  transition:opacity .18s,transform .18s;pointer-events:none;text-align:center}
.toast.visible{opacity:1;transform:translate(-50%,0)}
.toast-error{background:#C21A16;box-shadow:3px 3px 0 #17110F}

/* Попапы и шторки поверх экрана (router.openModal) */
.modal-layer{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;transition:opacity .18s}
.modal-layer.visible{opacity:1}
.modal-backdrop{position:absolute;inset:0;background:rgba(23,17,15,.55)}
/* в макете попап позиционирован внутри своего экрана-подложки: поверх приложения это сбрасываем */
.modal-layer>[data-modal]{position:relative!important;inset:auto!important;z-index:1;width:100%;max-width:420px;max-height:calc(100% - 20px - var(--app-top));overflow:auto;margin:0!important}
.modal-sheet{align-items:flex-end;padding:0}
.modal-sheet>[data-modal]{max-width:none;border-bottom-left-radius:0!important;border-bottom-right-radius:0!important;
  transform:translateY(24px);transition:transform .2s;padding-bottom:calc(env(safe-area-inset-bottom) + 18px)!important}
.modal-sheet.visible>[data-modal]{transform:none}

/* Экран, который не смог загрузиться */
.fatal{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:calc(32px + var(--app-top)) 28px 32px;gap:10px}
.fatal h2{font-family:'Archivo',sans-serif;font-weight:900;text-transform:uppercase;font-size:26px;margin:0}
.fatal p{margin:0;color:#5b4a40;font-size:15px;line-height:1.45}
.fatal button{margin-top:14px;align-self:flex-start;background:#C21A16;color:#F6EFE1;border:2px solid #17110F;border-radius:14px;
  padding:12px 18px;font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.12em;font-size:13px;box-shadow:3px 3px 0 #17110F}

/* Пустые состояния внутри экранов */
.empty-note{padding:18px 16px;border:2px dashed rgba(23,17,15,.35);border-radius:16px;color:#5b4a40;font-size:14px;line-height:1.45;text-align:center}

/* Dev-меню со списком экранов (#/) */
.dev{padding:24px 20px 40px;background:#241012;color:#F4EDDE;min-height:100vh}
.dev h1{font-family:'Archivo',sans-serif;font-weight:900;text-transform:uppercase;font-size:28px;margin:0 0 20px}
.dev h2{font-family:'Oswald',sans-serif;font-size:12px;letter-spacing:.24em;color:#C6A052;margin:24px 0 8px;text-transform:uppercase}
.dev a{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid rgba(198,160,82,.2);color:#F4EDDE;font-size:15px}
.dev a span{font-family:'Oswald',sans-serif;color:#C9B6A6;min-width:96px}
.dev-row{display:flex;flex-wrap:wrap;gap:6px}
.dev-row button{background:transparent;color:#F4EDDE;border:1px solid rgba(198,160,82,.5);border-radius:8px;padding:6px 10px;font-size:13px}
.dev-row button.on{background:#C6A052;color:#241012}
.dev-out{min-height:18px;margin:8px 0;font-size:13px;color:#C9B6A6}

/* Стрелка «назад»: рисуем сама, символ ‹ в этих шрифтах стоит ниже середины текста */
.back-arrow{flex:none;width:8px;height:8px;margin:9px 0 9px 2px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(1px) rotate(45deg)}
.back-arrow+span{position:relative;top:1px}