/* Кабинет клиента A.L.E.X. — канон витрины: две темы, золото, 390 px без
   горизонтальной прокрутки, контраст не ниже 4,5:1. Цвета — только токенами. */
:root {
  --fon: #1c1b22; --fon2: #26252f; --fon3: #302f3a; --tekst: #f2efe6; --tekst2: #c9c4b6;
  --zoloto: #d4af37; --zoloto2: #f0d67a; --liniya: #3d3b48; --ok: #7fd18b; --beda: #ff8a80;
  --zhelt: #ffd166; --knopka-tekst: #1c1b22;
}
html[data-theme="day"] {
  --fon: #f7f4ea; --fon2: #ffffff; --fon3: #efe9d6; --tekst: #1c1b22; --tekst2: #4a4740;
  --zoloto: #8a6a12; --zoloto2: #b58a1c; --liniya: #d9d2bb; --ok: #1f7a34; --beda: #b00020;
  --zhelt: #8a5a00; --knopka-tekst: #ffffff;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--fon); color: var(--tekst);
  font: 16px/1.45 -apple-system, "Segoe UI", Roboto, Arial, sans-serif; max-width: 100vw; overflow-x: hidden; }
a { color: var(--zoloto2); }
button, input, textarea, select { font: inherit; }
#kab { min-height: 100vh; display: flex; flex-direction: column; }
.kab-zagruzka { padding: 40px 20px; color: var(--tekst2); text-align: center; }

/* Шапка */
.shapka { position: sticky; top: 0; z-index: 5; background: var(--fon2); border-bottom: 1px solid var(--liniya);
  display: flex; align-items: center; gap: 8px; padding: 10px 12px; padding-top: max(10px, env(safe-area-inset-top)); }
.shapka .logo { font-weight: 700; color: var(--zoloto); letter-spacing: .04em; white-space: nowrap; }
.shapka .rost { flex: 1; }
.knopka-ikonka { background: transparent; border: 1px solid var(--liniya); color: var(--tekst); border-radius: 10px;
  min-width: 40px; height: 40px; padding: 0 10px; cursor: pointer; }
.knopka-ikonka:focus-visible, .knopka:focus-visible, .knopka2:focus-visible { outline: 2px solid var(--zoloto2); outline-offset: 2px; }
select.yazyk { background: var(--fon3); color: var(--tekst); border: 1px solid var(--liniya); border-radius: 10px; height: 40px; padding: 0 8px; }

/* Содержимое */
.telo { flex: 1; padding: 14px 12px 90px; max-width: 720px; width: 100%; margin: 0 auto; }
h1 { font-size: 22px; margin: 6px 0 12px; color: var(--zoloto2); }
h2 { font-size: 17px; margin: 18px 0 8px; }
p { margin: 6px 0; }
.tiho { color: var(--tekst2); font-size: 14px; }
.kartochka { background: var(--fon2); border: 1px solid var(--liniya); border-radius: 14px; padding: 14px; margin: 10px 0; overflow-wrap: anywhere; }
.kartochka.zoloto { border-color: var(--zoloto); }
.stroka { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px dashed var(--liniya); }
.stroka:last-child { border-bottom: 0; }
.stroka b { color: var(--tekst); }
.metka { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 13px; background: var(--fon3); color: var(--tekst2); }
.metka.ok { color: var(--ok); } .metka.zhdet { color: var(--zhelt); } .metka.beda { color: var(--beda); }
.plashka { background: var(--fon3); border-left: 3px solid var(--zoloto); padding: 8px 12px; border-radius: 8px; font-size: 14px; margin: 8px 0; }
.plashka.beda { border-left-color: var(--beda); }
.plashka.ok { border-left-color: var(--ok); }

/* Кнопки и поля */
.knopka { display: inline-block; width: 100%; background: var(--zoloto); color: var(--knopka-tekst); border: 0; border-radius: 12px;
  padding: 13px 16px; font-weight: 600; cursor: pointer; margin: 6px 0; text-align: center; }
.knopka:disabled { opacity: .55; cursor: wait; }
.knopka2 { display: inline-block; width: 100%; background: transparent; color: var(--tekst); border: 1px solid var(--liniya);
  border-radius: 12px; padding: 12px 16px; cursor: pointer; margin: 6px 0; text-align: center; }
.knopka2.malaya { width: auto; padding: 8px 12px; font-size: 14px; }
.pole { display: block; width: 100%; background: var(--fon3); color: var(--tekst); border: 1px solid var(--liniya); border-radius: 10px;
  padding: 11px 12px; margin: 6px 0 10px; }
textarea.pole { min-height: 96px; resize: vertical; }
label.podpis { display: block; font-size: 14px; color: var(--tekst2); margin-top: 8px; }
.galochka { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0; font-size: 15px; }
.galochka input { width: 22px; height: 22px; flex: none; margin-top: 2px; accent-color: var(--zoloto); }
.provajdery { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0; }
.provajdery .knopka2 { margin: 0; }
.provajdery .knopka2[disabled] { opacity: .5; }
.oshibka { color: var(--beda); font-size: 14px; margin: 6px 0; }

/* Навигация снизу */
.niz { position: fixed; left: 0; right: 0; bottom: 0; background: var(--fon2); border-top: 1px solid var(--liniya);
  display: flex; justify-content: space-around; padding: 6px 4px; padding-bottom: max(6px, env(safe-area-inset-bottom)); z-index: 5; }
.niz button { background: transparent; border: 0; color: var(--tekst2); font-size: 12px; padding: 6px 2px; cursor: pointer; flex: 1; min-width: 0; }
.niz button.aktiv { color: var(--zoloto2); font-weight: 600; }
.niz button span { display: block; font-size: 18px; }
.menyu-eshche { position: fixed; right: 10px; bottom: 70px; background: var(--fon2); border: 1px solid var(--liniya); border-radius: 12px;
  padding: 6px; z-index: 6; box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.menyu-eshche button { display: block; width: 100%; text-align: left; background: transparent; border: 0; color: var(--tekst); padding: 10px 12px; cursor: pointer; border-radius: 8px; }
.menyu-eshche button:hover { background: var(--fon3); }

/* Чат */
.chat { display: flex; flex-direction: column; gap: 8px; }
.replika { max-width: 88%; padding: 10px 12px; border-radius: 14px; background: var(--fon3); overflow-wrap: anywhere; }
.replika.ya { align-self: flex-end; background: var(--zoloto); color: var(--knopka-tekst); }
.chat-vvod { display: flex; gap: 8px; position: sticky; bottom: 76px; background: var(--fon); padding: 6px 0; }
.chat-vvod .pole { margin: 0; }
.chat-vvod .knopka { width: auto; margin: 0; padding: 0 16px; }

/* Диагностика */
.chetyre h3 { margin: 12px 0 6px; font-size: 16px; color: var(--zoloto2); }
.chetyre ul { margin: 4px 0 8px 18px; padding: 0; }
.chetyre small { color: var(--tekst2); }
.fajly li { display: flex; justify-content: space-between; gap: 8px; }
ul.spisok { padding-left: 18px; }
.spravka details { border: 1px solid var(--liniya); border-radius: 10px; padding: 8px 12px; margin: 8px 0; background: var(--fon2); }
.spravka summary { cursor: pointer; font-weight: 600; }
img, video, table { max-width: 100%; }
@media (min-width: 720px) { .niz button span { display: inline; margin-right: 6px; } }

/* Подвал экрана входа (задача 1770): ссылки политики и заглушка согласия. */
.niz-vhod { margin: 14px 0 0; font-size: 12px; line-height: 1.5; }
.niz-vhod a { color: var(--zoloto2); }
/* задача 2036: сетка окон и таблица книги */
.okna{display:flex;flex-wrap:wrap;gap:6px}
.tabl{width:100%;border-collapse:collapse;font-size:14px}.tabl th,.tabl td{text-align:left;padding:6px 8px;border-bottom:1px solid rgba(128,128,128,.25);vertical-align:top}.tabl tr.beda td{background:rgba(220,60,60,.08)}.pole.malaya{width:auto;display:inline-block;margin-left:8px}
.tabl th{white-space:nowrap}.tabl .knopka,.tabl .knopka2{width:auto;display:inline-block;padding:4px 10px;margin:2px 4px 2px 0;font-size:13px;white-space:nowrap}
/* Телефон (задача 2036, круг 3): шесть колонок книги на 390 px сжимали кнопки в столбик букв — строка таблицы становится карточкой, подпись колонки — из data-k. */
@media (max-width: 600px){.tabl thead{display:none}.tabl tr{display:block;padding:8px 0;border-bottom:1px solid rgba(128,128,128,.35)}.tabl td{display:block;border-bottom:0;padding:2px 0}.tabl td[data-k]:before{content:attr(data-k) ": ";opacity:.65}}
.stroka [data-otmena]{white-space:nowrap}