/* Токены дизайн-системы v2.1 + базовая раскладка. Все цвета — только через переменные. */
/* Контраст: все текстовые пары проверены на AA (≥4.5:1 для мелкого текста).
   --mut/--dim затемнены в светлой теме (были 3.96 и 2.01); заливки кнопок и текст
   на них разведены токенами --*-btn / --on-accent (белый на ярком акценте в тёмной
   теме давал 2.4–3.3:1). Бренд-цвета --rose/--teal для акцентов НЕ меняются. */
#app {
  color-scheme: light; /* нативные select/скроллбары в системной светлой палитре */
  --bg: #FBFBF9; --card: #FFFFFF; --line: #E7E7E2; --line2: #F0F0EC;
  --ink: #16181B; --mut: #6B7178; --dim: #6E757C;
  --rose: #D9346B; --teal: #0E8FA6;
  --rose-soft: #FBEAF0; --teal-soft: #E7F4F7;
  --ph1: #EDEDEA; --ph2: #E0E0DB;
  --danger: #C25A50; --ok: #4A7D4E;
  /* заливки кнопок: белый текст на них проходит AA */
  --rose-btn: #D9346B; --teal-btn: #0C7E92; --danger-btn: #BC5147;
  --on-accent: #FFFFFF;
}
#app[data-orb-theme="dark"] {
  color-scheme: dark; /* иначе списки select рисуются светлыми — «белое на белом» */
  --bg: #121316; --card: #1A1C20; --line: #2A2D33; --line2: #22252A;
  --ink: #F0F1F3; --mut: #8B9098; --dim: #7B818A;
  --rose: #E85C8B; --teal: #3FB6CC;
  --rose-soft: #3A2230; --teal-soft: #16333A;
  --ph1: #26282E; --ph2: #1C1E23;
  --danger: #E07A70; --ok: #7DB380;
  /* в тёмной теме на ярких заливках — тёмный текст (5.6–7.8:1 вместо 2.4–3.3:1) */
  --rose-btn: #E85C8B; --teal-btn: #3FB6CC; --danger-btn: #E07A70;
  --on-accent: #121316;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body { background: #0D0E10; }

/* Высота строго = вьюпорту (100dvh-структура): контент выше окна скроллится
   ВНУТРИ экранов (.scrolly/.ob-body/.empty), а не выпадает за край. */
#app {
  max-width: 430px; margin: 0 auto; height: 100vh; height: 100dvh; min-height: 0;
  display: flex; flex-direction: column;
  background: var(--bg); color: var(--ink);
  font-family: 'Golos Text', system-ui, sans-serif; font-size: 15px;
  position: relative; overflow: hidden;
}

button {
  font-family: inherit; font-size: inherit; border: none; background: none;
  color: inherit; padding: 0; cursor: pointer; text-align: inherit;
}
button:disabled { cursor: default; }
button:focus-visible, a:focus-visible {
  outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 8px;
}
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--teal); outline-offset: 1px;
}
a { color: var(--teal); }

.wordmark { font-family: 'Unbounded', sans-serif; font-weight: 600; font-size: 17px; }
.wordmark i { color: var(--rose); font-style: normal; }

.hdr {
  padding: calc(14px + env(safe-area-inset-top)) 18px 8px;
  display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; gap: 12px;
}
.stitle { font-size: 23px; font-weight: 600; letter-spacing: -.01em; }
.ssub { font-size: 12.5px; color: var(--mut); margin-top: 2px; }

.view { flex: 1; display: none; flex-direction: column; overflow: hidden; min-height: 0; }
.view.on { display: flex; }
.scrolly { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; min-height: 0; }

.fade { animation: fadeIn .22s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes shimmer { from { opacity: .65; } 50% { opacity: 1; } to { opacity: .65; } }
@media (prefers-reduced-motion: reduce) {
  .fade { animation: none; }
  .skel { animation: none !important; }
}