/* Общие глобальные стили приложения (шрифт, keyframes, фокус полей,
   :active-состояния, декоративные классы шапки) — вынесены из <style> в
   <head> www/index.html в отдельный файл 22.08.2026, по просьбе заказчика
   (тот же приём, что и у www/css/anchor-hunter.css — см. её комментарий).
   Подключается статическим <link rel="stylesheet" href="css/style.css">
   в <head>. Стили ВНУТРИ HTML-строк экранов (screenXxx() и т.п. в
   www/index.html) сюда НЕ переносились и не будут — они слишком завязаны
   на конкретную генерацию разметки, разносить их в CSS-классы означало
   бы отдельную более рискованную переделку дизайна, а не просто перенос
   файла (см. документацию проекта).

   Путь в url() — ../img/logo-anchor.png, а не img/logo-anchor.png: он
   разрешается относительно ЭТОГО файла (www/css/), а не относительно
   www/index.html, как было раньше внутри <style> в <head>. */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;background:#aeb8c8;font-family:'Golos Text',system-ui,-apple-system,sans-serif;}
button{font-family:inherit;cursor:pointer;border:none;background:none;}
input{font-family:inherit;}
/* input[type="password"] — системный шрифт, НЕ inherit. В Safari символ
   маски пароля берётся из глифа текущего font-family, а не рисуется
   браузером отдельно от шрифта — пока веб-шрифт Golos Text ещё не
   догрузился (например, при открытии страницы из кэша, когда HTML/CSS
   отдаются мгновенно, а сам файл шрифта с Google Fonts ещё в пути),
   WebKit на первый кадр подставляет запасной глиф — точки на мгновение
   превращаются в квадратики, пока не подъедет и не применится Golos
   Text. Системный стек (-apple-system и т.п.) всегда на месте без
   сетевого запроса, поэтому маска сразу рисуется точками. */
input[type="password"]{font-family:-apple-system,system-ui,sans-serif;}
a{-webkit-tap-highlight-color:transparent;}
::-webkit-scrollbar{width:0;height:0;}
@keyframes glow{0%,100%{opacity:.55;}50%{opacity:1;}}
@keyframes spin{to{transform:rotate(360deg);}}
@keyframes typingDot{0%,60%,100%{opacity:.3;transform:translateY(0);}30%{opacity:1;transform:translateY(-2px);}}
@keyframes logoShine{from{background-position:0% 0%;}to{background-position:100% 100%;}}
/* Полоса блеска замаскирована по альфа-каналу img/logo-anchor.png (тот же
   обрезанный якорь, что и в favicon/иконке Android) — видна только в
   силуэте якоря, а не по всему прямоугольнику картинки. Координаты/
   размер оверлея — доля от img/logo-white.png (593×145), где вырезан
   якорь. Все картинки (в т.ч. эти два файла) лежат в www/img/ — вынесены
   туда из www/ 22.08.2026, см. документацию проекта «Редизайн интерфейса». */
.logo-shine{position:absolute;left:2.698%;top:15.172%;width:14.503%;height:70.345%;
  -webkit-mask-image:url(../img/logo-anchor.png);-webkit-mask-size:100% 100%;-webkit-mask-repeat:no-repeat;
  mask-image:url(../img/logo-anchor.png);mask-size:100% 100%;mask-repeat:no-repeat;
  /* Сам якорь заливкой чисто белый (255,255,255) — красить блеск тоже
     белым поверх бесполезно, разница не видна (белое на белом). Вместо
     этого — одна мягкая полупрозрачная тёмно-синяя полоса даёт контраст,
     на фоне которого нетронутая белая часть якоря читается как блик;
     blur() размывает её жёсткие края. Полоса — в узком диапазоне
     38%–62% гигантского (420%) фона: в состоянии покоя (background-position
     0% 0%, тот же старт, что и у keyframe "from") видимое окно строго
     в прозрачной зоне по краю градиента (запас ~14 п.п.) — якорь чистый. */
  background:linear-gradient(115deg,transparent 0%,transparent 38%,rgba(7,10,53,.6) 50%,transparent 62%,transparent 100%);
  background-size:420% 420%;background-position:0% 0%;filter:blur(1.5px);
  pointer-events:none;}
/* Сам проход (0%→100%, за 1.75с) запускается точечно из JS — навешивание
   класса .sweep — а не бесконечным CSS-циклом: периодичность между
   проходами должна быть случайной (2.5–9с, см. scheduleLogoShine() в JS
   ниже), а не строго регулярной, чего чистый CSS-keyframe не умеет. */
.logo-shine.sweep{animation:logoShine 1.75s linear;}
/* Редизайн 22.08.2026 (см. документацию проекта «Редизайн интерфейса») — общие
   декоративные классы шапки, переиспользуемые на всех мигрированных
   экранах. Диагональная штриховка — чистый CSS, без картинки. Водяной
   знак-якорь в углу шапки — НЕ новый файл из хендоффа (assets/mark-white.png
   из пакета не используется вовсе), а тот же самый img/logo-anchor.png,
   что уже вырезан из текущего логотипа для блеска/favicon/иконки
   Android — тем же приёмом маски, что и у .logo-shine выше и у спрайта
   пасхалки «Якорь Хантер» (.ah-sprite). Это сознательно: логотип и его
   ассеты остаются ровно те же, что и были, просто окрашенный силуэт
   того же вырезанного якоря используется как фоновая деталь шапки. */
.header-stripes{position:absolute;inset:0;background:repeating-linear-gradient(102deg,transparent 0 23px,rgba(255,255,255,.035) 23px 24px);pointer-events:none;}
.header-anchor-mark{position:absolute;right:-18px;bottom:-26px;width:127px;height:150px;background:#fff;
  -webkit-mask-image:url(../img/logo-anchor.png);-webkit-mask-size:100% 100%;-webkit-mask-repeat:no-repeat;
  mask-image:url(../img/logo-anchor.png);mask-size:100% 100%;mask-repeat:no-repeat;opacity:.07;pointer-events:none;}
/* Блеск, пробегающий по диагональным полоскам шапки (добавлено 22.08.2026,
   по просьбе заказчика — «эффект волны в виде блеска»). Тот же узор
   repeating-linear-gradient, что и .header-stripes, но ярче и обычно
   невидим (opacity:0) — виден только там, где его открывает движущаяся
   мягкая диагональная полоса-маска (тот же угол 102deg, что и у самих
   полосок, чтобы блеск двигался вдоль их направления, а не поперёк).
   В отличие от .logo-shine (там движется САМ градиент, а маска
   статична — вырезает форму якоря) — здесь наоборот: узор полосок
   статичен как background, а маска движется (mask-position в keyframe),
   точечно "открывая" его по ходу движения. Запускается точечно из JS
   (scheduleHeaderShine()/runHeaderShine(), см. ниже) навешиванием класса
   .sweep — тем же приёмом, что и у .logo-shine, случайная пауза между
   проходами (не бесконечный CSS-луп, чтобы не быть навязчивым на
   постоянно видимой шапке). */
.header-stripes-shine{position:absolute;inset:0;pointer-events:none;opacity:0;
  background:repeating-linear-gradient(102deg,transparent 0 23px,rgba(255,255,255,.4) 23px 24px);
  -webkit-mask-image:linear-gradient(102deg,transparent 0%,transparent 42%,#fff 50%,transparent 58%,transparent 100%);
  -webkit-mask-size:360% 360%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:0% 0%;
  mask-image:linear-gradient(102deg,transparent 0%,transparent 42%,#fff 50%,transparent 58%,transparent 100%);
  mask-size:360% 360%;mask-repeat:no-repeat;mask-position:0% 0%;}
@keyframes headerStripesShine{
  0%{-webkit-mask-position:0% 0%;mask-position:0% 0%;opacity:0;}
  12%{opacity:1;}
  88%{opacity:1;}
  100%{-webkit-mask-position:100% 100%;mask-position:100% 100%;opacity:0;}
}
.header-stripes-shine.sweep{animation:headerStripesShine 3.6s ease-in-out;}
/* Фокус-свечение полей — по классу .field-2026, навешивается только на
   полях уже мигрированных на новый дизайн экранов, чтобы не менять вид
   полей на остальных экранах раньше времени. */
.field-2026:focus{border-color:#1874ff !important;background:#fff !important;box-shadow:0 0 0 4px rgba(24,116,255,.13);}
/* интерактивные состояния (в standalone заменяют style-active / style-focus) */
input:focus{border-color:#1071ff !important;background:#fff !important;}
.tap:active{transform:scale(.992);}
.bcard:active{border-color:#1071ff !important;}
.ghost:active{border-color:#1071ff !important;color:#1071ff !important;}
.img-spinner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;}
.img-spinner::after{content:'';width:26px;height:26px;border-radius:50%;border:3px solid #d7dfeb;border-top-color:#1071ff;animation:spin .8s linear infinite;}
.btn-spinner{display:inline-block;width:16px;height:16px;margin-right:9px;vertical-align:-3px;border-radius:50%;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;animation:spin .7s linear infinite;}
