/* Цвета - из темы Telegram (telegram-web-app.js выставляет --tg-theme-*), запасные - для браузера. */
:root {
  --bg: var(--tg-theme-bg-color, #fff);
  --bg2: var(--tg-theme-secondary-bg-color, #f1f2f6);
  --section: var(--tg-theme-section-bg-color, var(--bg));
  --text: var(--tg-theme-text-color, #111);
  --hint: var(--tg-theme-hint-color, #8a8f98);
  --link: var(--tg-theme-link-color, #2481cc);
  --btn: var(--tg-theme-button-color, #2481cc);
  --btn-text: var(--tg-theme-button-text-color, #fff);
  --accent: var(--tg-theme-accent-text-color, var(--link));
  --danger: var(--tg-theme-destructive-text-color, #e53935);
  --sep: var(--tg-theme-section-separator-color, rgba(127,127,127,.2));
  --head: var(--tg-theme-section-header-text-color, var(--hint));
  /* безопасные зоны: системная + зона кнопок Telegram в полноэкранном режиме */
  --top: calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px));
  --bottom: calc(var(--tg-safe-area-inset-bottom, 0px) + var(--tg-content-safe-area-inset-bottom, 0px));
  --left: max(12px, var(--tg-safe-area-inset-left, 0px));
  --right: max(12px, var(--tg-safe-area-inset-right, 0px));
}
@media (prefers-color-scheme: dark) {
  :root:not(.tg) { --bg: #17212b; --bg2: #0e1621; --text: #f5f5f5; --hint: #708499; --sep: rgba(255,255,255,.08); }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--bg2); color: var(--text); font: 15px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-tap-highlight-color: transparent; }
body { padding: var(--top) var(--right) calc(var(--bottom) + 16px) var(--left); min-height: var(--tg-viewport-height, 100vh); }
header { position: sticky; top: var(--top); z-index: 2; background: var(--bg2); padding-top: 8px; }
nav { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; }
nav button { flex: none; border: 0; border-radius: 18px; padding: 7px 14px; background: var(--section); color: var(--text); font: inherit; }
nav button.on { background: var(--btn); color: var(--btn-text); }
.card { background: var(--section); border-radius: 14px; padding: 14px; margin: 10px 0; }
.card h3 { margin: 0 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .03em; color: var(--head); font-weight: 600; }
.row { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--sep); }
.row:last-child { border-bottom: 0; }
.row span:first-child { color: var(--hint); }
.row span:last-child { text-align: right; }
.muted { color: var(--hint); }
.center { text-align: center; }
.big { font-size: 20px; font-weight: 600; }
.ok { color: #31b545; } .bad { color: var(--danger); }
.link { word-break: break-all; font: 13px ui-monospace, monospace; background: var(--bg2); padding: 10px; border-radius: 10px; cursor: pointer; }
.qr { display: flex; justify-content: center; } .qr svg { width: 220px; height: 220px; border-radius: 12px; background: #fff; }
.btns { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin-top: 10px; }
button.b { border: 0; border-radius: 10px; padding: 11px; background: var(--btn); color: var(--btn-text); font: inherit; font-weight: 500; }
button.s { border: 0; border-radius: 10px; padding: 11px; background: var(--bg2); color: var(--link); font: inherit; }
button.d { color: var(--danger); }
button:disabled { opacity: .5; }
details { border-bottom: 1px solid var(--sep); padding: 8px 0; } details:last-child { border-bottom: 0; }
summary { cursor: pointer; font-weight: 500; }
pre.steps { white-space: pre-wrap; font: inherit; margin: 8px 0 0; color: var(--text); }
input, textarea, select { width: 100%; border: 1px solid var(--sep); border-radius: 10px; padding: 10px; background: var(--bg2); color: var(--text); font: inherit; }
textarea { min-height: 120px; resize: vertical; }
.item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--sep); cursor: pointer; }
.item:last-child { border-bottom: 0; }
.item small { display: block; color: var(--hint); }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-right: 6px; background: var(--hint); }
.dot.on { background: #31b545; } .dot.off { background: var(--danger); }
.bar { height: 6px; background: var(--bg2); border-radius: 3px; overflow: hidden; margin-top: 6px; }
.bar i { display: block; height: 100%; background: var(--btn); }
#toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--bottom) + 24px); background: rgba(0,0,0,.8); color: #fff; padding: 10px 16px; border-radius: 20px; z-index: 9; max-width: 90vw; }