/* «Сканер» — снимок текста → чтение вслух (skaner.php). Телефон, одна рука: большая кнопка внизу, текст крупно.
   Тёмная тема по умолчанию (как у «Голоса»), светлая — по настройке телефона. */

:root {
  --fon: #0e1621; --karta: #17212b; --karta2: #1f2c3a; --tekst: #e8eef5; --tih: #8a9bb0; --linia: #2a3a4d;
  --akcent: #4da3ff; --govor: #35c98a; --dum: #f0b429; --bed: #ff6b62; --podsvet: rgba(77,163,255,.22); --prochitano: #b5c2d1;
  --glav: 92px; --shrift: 21px;
}
@media (prefers-color-scheme: light) {
  :root { --fon: #f4f6f9; --karta: #ffffff; --karta2: #eef2f6; --tekst: #17212b; --tih: #66788a; --linia: #dbe2ea;
          --akcent: #1c6ea4; --govor: #17915f; --dum: #c98a00; --bed: #c62f27; --podsvet: rgba(28,110,164,.16); --prochitano: #4a5a6b; }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* приложение на весь экран: страница целиком не прокручивается никогда — только лента текста внутри (иначе на телефоне
   двигались бы шапка и кнопки, а Chrome прятал и показывал адресную строку) */
html, body { height: 100%; margin: 0; overflow: hidden; }
body { background: var(--fon); color: var(--tekst); font: 17px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
       overscroll-behavior: none; -webkit-text-size-adjust: 100%; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; touch-action: manipulation; }
svg { width: 24px; height: 24px; fill: currentColor; stroke: currentColor; }
[hidden] { display: none !important; }

.s-app { display: flex; flex-direction: column; height: 100%; height: 100dvh; max-width: 680px; margin: 0 auto;
         padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left); }

/* ── шапка ── */
.s-shapka { display: flex; align-items: center; gap: 6px; padding: 8px 10px 6px 14px; min-height: 52px; }
.s-logo { width: 22px; height: 22px; fill: none; stroke: var(--akcent); flex: none; }
/* с текстом на экране шапке тесно: «Установить» остаётся на первом экране и в настройках */
.s-app[data-tekst="1"] #s-ustanovit { display: none !important; }
.s-nazv { font-weight: 700; font-size: 18px; }
.s-razd { flex: 1; }
.s-kn-tekst { font-size: 15px; color: var(--akcent); padding: 9px 11px; border-radius: 10px; text-decoration: none; }
.s-kn-tekst:active { background: var(--karta2); }
.s-kn-ikon { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: var(--tih); flex: none; }
.s-kn-ikon:active { background: var(--karta2); }
.s-kn-ikon svg { width: 22px; height: 22px; }
.s-app[data-tekst="0"] .s-est-tekst { display: none; }
.s-kn-ustanovit:not([hidden]) { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; }
.s-kn-ustanovit svg, .s-kn-ustanovka svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* ── плашка ── */
.s-plashka { margin: 0 12px 8px; padding: 12px 14px; border-radius: 12px; background: #3a2c0c; color: #ffe2a6; font-size: 15px; }
.s-plashka.s-bed { background: #401b1a; color: #ffc9c5; }
.s-plashka a, .s-plashka button { display: inline-block; margin-top: 8px; margin-right: 8px; padding: 8px 14px; border-radius: 10px;
                                  background: rgba(255,255,255,.14); color: inherit; font-weight: 600; text-decoration: none; }
@media (prefers-color-scheme: light) {
  .s-plashka { background: #fff3d6; color: #6b4a00; } .s-plashka.s-bed { background: #fde4e2; color: #8a1f19; }
  .s-plashka a, .s-plashka button { background: rgba(0,0,0,.08); }
}

/* ── лента ── */
.s-lenta { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 16px 16px; -webkit-overflow-scrolling: touch; }
.s-privet { padding: 5vh 4px 0; text-align: center; }
.s-privet-ris svg { width: 150px; height: 120px; }
.s-r-list { fill: var(--karta); stroke: var(--linia); stroke-width: 2; }
.s-r-stroki { stroke: var(--tih); stroke-width: 4; stroke-linecap: round; fill: none; }
.s-r-volny { stroke: var(--govor); stroke-width: 5; stroke-linecap: round; fill: none; }
.s-privet h1 { font-size: 25px; line-height: 1.25; margin: 10px 0 12px; font-weight: 700; }
.s-privet p { margin: 0 auto 12px; color: var(--tih); max-width: 420px; }
.s-melko { font-size: 13px; color: var(--tih); }
.s-kn-ustanovka { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 12px 16px; border-radius: 14px;
                  background: var(--karta); border: 1px solid var(--linia); color: var(--akcent); font-weight: 600; font-size: 15px; }
.s-kn-ustanovka:active { background: var(--karta2); }

.s-foto-ryad { display: flex; align-items: center; gap: 12px; margin: 6px 0 14px; }
.s-foto { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; border: 1px solid var(--linia); flex: none; background: var(--karta); }
.s-foto-pod { min-width: 0; }
.s-hod { font-size: 15px; font-weight: 600; }
.s-hod.s-bed { color: var(--bed); }

/* ── оригинал / перевод: переключатель над текстом (появляется с началом перевода) ── */
.s-vidy { display: flex; gap: 4px; margin: 0 0 12px; padding: 4px; border-radius: 14px; background: var(--karta); border: 1px solid var(--linia); }
.s-vid { flex: 1; min-width: 0; padding: 7px 8px; border-radius: 11px; display: flex; flex-direction: column; align-items: center; gap: 1px; color: var(--tih); }
.s-vid[aria-selected="true"] { background: var(--karta2); color: var(--tekst); box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.s-vid:active { opacity: .8; }
.s-vid-zag { font-weight: 600; font-size: 15px; }
.s-vid-pod { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.s-vid[aria-selected="true"] .s-vid-pod { color: var(--akcent); }
.s-vid[data-idet="1"] .s-vid-pod::after { content: ' ▍'; color: var(--akcent); animation: s-mig 1s steps(2) infinite; }
.s-ik-perevod { stroke: none; }
#s-perevesti:disabled { opacity: .4; }
.s-privet-perevod { color: var(--govor) !important; font-size: 15px; }

/* ── текст: фразы по одной, звучащая подсвечена; касание фразы — читать с неё ── */
.s-tekst { font-size: var(--shrift); line-height: 1.55; overflow-wrap: anywhere; }
.s-tekst p { margin: 0 0 .75em; }
.s-fr { border-radius: 6px; padding: 1px 1px; transition: background-color .25s; cursor: pointer; }
.s-fr.s-tek { background: var(--podsvet); box-shadow: 0 0 0 3px var(--podsvet); }
.s-fr.s-bylo { color: var(--prochitano); }
.s-hvost { color: var(--tih); }
.s-hvost::after { content: ' ▍'; color: var(--akcent); animation: s-mig 1s steps(2) infinite; }
@keyframes s-mig { 50% { opacity: 0; } }
.s-pusto { padding: 18px; border-radius: 14px; background: var(--karta); border: 1px dashed var(--linia); color: var(--tih); font-size: 16px; }

/* ── строка состояния ── */
.s-status { min-height: 22px; padding: 2px 16px 4px; font-size: 14px; color: var(--tih); text-align: center; }
.s-status.s-bed { color: var(--bed); } .s-status.s-ok { color: var(--govor); }

/* ── низ: большая кнопка и две боковые ── */
.s-niz { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px 10px;
         padding: 6px 14px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--linia); background: var(--fon); }
.s-glav { width: var(--glav); height: var(--glav); border-radius: 50%; display: grid; place-items: center; position: relative;
          background: var(--akcent); color: #fff; box-shadow: 0 6px 22px rgba(0,0,0,.35); grid-row: 1; grid-column: 2; }
.s-glav:active { transform: scale(.96); }
.s-glav svg { width: 40px; height: 40px; position: absolute; }
.s-glav .s-ik-kamera { fill: none; }
.s-glav svg { display: none; }
.s-app[data-sost="gotov"] .s-glav .s-ik-kamera, .s-app[data-sost="gotovo"] .s-glav .s-ik-kamera { display: block; }
.s-app[data-sost="zagruzka"] .s-glav .s-ik-stop { display: block; }
.s-app[data-sost="chitayu"] .s-glav .s-ik-pauza { display: block; }
.s-app[data-sost="pauza"] .s-glav .s-ik-igrat { display: block; }
.s-app[data-sost="zagruzka"] .s-glav { background: var(--karta2); color: var(--tekst); }
.s-app[data-sost="chitayu"] .s-glav { background: var(--govor); }
.s-glav-kolco { position: absolute; inset: -6px; border-radius: 50%; border: 3px solid transparent; pointer-events: none; }
.s-app[data-sost="zagruzka"] .s-glav-kolco { border-top-color: var(--akcent); border-right-color: var(--akcent); animation: s-krutit 1s linear infinite; }
@keyframes s-krutit { to { transform: rotate(360deg); } }
.s-app[data-sost="chitayu"] .s-glav-kolco { border-color: var(--govor); opacity: .5; animation: s-dyshat 1.6s ease-in-out infinite; }
@keyframes s-dyshat { 50% { transform: scale(1.08); opacity: .15; } }

.s-kn-bok { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--tih); font-size: 12px; justify-self: center; min-width: 76px; }
#s-lev { grid-column: 1; grid-row: 1; } #s-prav { grid-column: 3; grid-row: 1; }
.s-krug { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: var(--karta); border: 1px solid var(--linia); color: var(--tekst); }
.s-kn-bok:active .s-krug { background: var(--karta2); }
.s-kn-bok svg { display: none; }
.s-kn-bok .s-ik-galereya { fill: none; }
.s-kn-bok .s-ik-galereya circle { fill: currentColor; }
.s-kn-bok .s-ik-snova { fill: none; }
/* какая боковая кнопка что делает — по состоянию: готов — галерея; читаю/пауза — назад/дальше; прочитано — сначала/галерея */
.s-app[data-sost="gotov"] #s-lev .s-ik-galereya { display: block; }
.s-app[data-sost="gotov"] #s-prav { visibility: hidden; }
.s-app[data-sost="zagruzka"] #s-lev, .s-app[data-sost="zagruzka"] #s-prav { visibility: hidden; }
.s-app[data-sost="chitayu"] #s-lev .s-ik-nazad, .s-app[data-sost="pauza"] #s-lev .s-ik-nazad { display: block; }
.s-app[data-sost="chitayu"] #s-prav .s-ik-dalshe, .s-app[data-sost="pauza"] #s-prav .s-ik-dalshe { display: block; }
.s-app[data-sost="gotovo"] #s-lev .s-ik-snova { display: block; }
.s-app[data-sost="gotovo"] #s-prav .s-ik-galereya { display: block; }
.s-podpis { grid-column: 1 / -1; grid-row: 2; text-align: center; font-size: 13px; color: var(--tih); min-height: 18px; }

/* ── настройки ── */
.s-okno { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: flex; align-items: flex-end; justify-content: center; z-index: 10; }
.s-okno-list { width: 100%; max-width: 680px; max-height: 92vh; overflow-y: auto; background: var(--karta); border-radius: 18px 18px 0 0;
               padding: 18px 18px calc(18px + env(safe-area-inset-bottom)); }
.s-okno-list h2 { margin: 0 0 14px; font-size: 20px; }
.s-pole { display: block; margin-bottom: 14px; }
.s-pole > span { display: block; font-size: 14px; color: var(--tih); margin-bottom: 6px; }
.s-pole b { color: var(--tekst); font-weight: 600; margin-left: 4px; }
.s-pole select { width: 100%; padding: 11px 12px; border-radius: 12px; border: 1px solid var(--linia); background: var(--karta2); }
.s-pole input[type="range"] { width: 100%; accent-color: var(--akcent); }
.s-okno-knopki { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 6px; align-items: center; }
.s-kn-glav { margin-left: auto; padding: 11px 20px; border-radius: 12px; background: var(--akcent); color: #fff; font-weight: 600; }

/* ── нет интернета (страница сканера и вход) ── */
.s-set { margin: 0 12px 8px; padding: 10px 14px; border-radius: 12px; background: var(--karta2); border: 1px solid var(--linia); color: var(--tekst); font-size: 14px; }
.s-povtor { margin-top: 8px; padding: 9px 16px; border-radius: 10px; background: var(--akcent); color: #fff; font-weight: 600; font-size: 15px; }
.s-povtor:disabled { opacity: .55; }

/* ── вход в сканер (skaner_vhod.php) — в стиле самого приложения ── */
.s-vhod .s-lenta { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
.s-vhod-forma { text-align: left; max-width: 380px; margin: 10px auto 0; }
.s-pole > span.s-parol { position: relative; display: block; font-size: inherit; color: inherit; margin: 0; }
.s-vhod-forma input[type="text"], .s-vhod-forma input[type="password"] { width: 100%; padding: 13px 14px; border-radius: 12px; border: 1px solid var(--linia);
  background: var(--karta2); color: var(--tekst); font-size: 18px; }
.s-vhod-forma input:focus { outline: 2px solid var(--akcent); outline-offset: 1px; }
.s-parol input { padding-right: 52px !important; }
.s-parol .s-kn-ikon { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); }
.s-parol .s-kn-ikon svg { fill: none; }
.s-galka { display: flex; gap: 10px; align-items: center; margin: 2px 0 14px; font-size: 15px; color: var(--tih); }
.s-galka input { width: 20px; height: 20px; accent-color: var(--akcent); flex: none; }
.s-kn-voyti { width: 100%; padding: 15px; border-radius: 14px; background: var(--akcent); color: #fff; font-weight: 700; font-size: 18px; }
.s-kn-voyti:disabled { opacity: .55; }
.s-vhod-oshibka { margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: rgba(255,107,98,.14); color: var(--bed); font-size: 15px; text-align: left; }
/* .s-privet p задаёт поля абзацам первого экрана — здесь нужна большая точность селектора */
.s-privet .s-vhod-sklad { margin: 22px auto 0; }
.s-vhod-uzhe { display: block; text-decoration: none; text-align: center; margin: 4px 0 8px; }
.s-privet .s-vhod-kto { margin: 0 auto 18px; }
.s-vhod-sklad a, .s-kto a { color: var(--akcent); }
.s-kto { margin: 0 0 12px; font-size: 14px; color: var(--tih); }

.s-noscript { padding: 24px; }
@media (min-height: 760px) { :root { --glav: 100px; } }
/* короткий экран (телефон с адресной строкой браузера): первый экран должен помещаться целиком, без прокрутки */
@media (max-height: 720px) {
  .s-privet { padding-top: 2vh; }
  .s-privet-ris svg { width: 110px; height: 88px; }
  .s-privet h1 { font-size: 22px; margin: 4px 0 8px; }
  .s-privet p { margin-bottom: 8px; font-size: 16px; }
  .s-kn-ustanovka { margin-top: 6px; padding: 10px 14px; }
  :root { --glav: 84px; }
  .s-krug { width: 50px; height: 50px; }
}
@media (max-height: 620px) {
  .s-privet-ris { display: none; }
  .s-privet-perevod { display: none; }
  .s-privet:not(.s-vhod-blok) .s-melko { display: none; }   /* на входе подписи нужны: «вы вошли как…», «логин склада» */
}