:root {
  --bg: var(--tg-theme-secondary-bg-color, #f1f1f4);
  --card: var(--tg-theme-section-bg-color, var(--tg-theme-bg-color, #fff));
  --text: var(--tg-theme-text-color, #111);
  --hint: var(--tg-theme-hint-color, #84848a);
  --link: var(--tg-theme-link-color, #2481cc);
  --btn: var(--tg-theme-button-color, #2481cc);
  --btn-text: var(--tg-theme-button-text-color, #fff);
  --danger: var(--tg-theme-destructive-text-color, #d93a3a);
  --sep: var(--tg-theme-section-separator-color, rgba(128, 128, 128, .22));
  --ok: #2fa84f;
  --v3: #1d8a6b;
  --v2: #b5740f;
  --cas: #5b57c9;
}
:root { --s1: #2a78d6; --s2: #eb6834; --cell-off: rgba(128, 128, 128, .16); --pause: #d98a00; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--tg-theme-secondary-bg-color, #111114);
    --card: var(--tg-theme-section-bg-color, var(--tg-theme-bg-color, #1d1d21));
    --text: var(--tg-theme-text-color, #f2f2f4);
    --hint: var(--tg-theme-hint-color, #8d8d94);
    --v3: #4fc7a4; --v2: #e6ac4f; --cas: #a3a0f2;
    --s1: #3987e5; --s2: #d95926; --pause: #e6ac4f;
  }
}
:root[data-theme="dark"] {
  --bg: var(--tg-theme-secondary-bg-color, #111114);
  --card: var(--tg-theme-section-bg-color, var(--tg-theme-bg-color, #1d1d21));
  --text: var(--tg-theme-text-color, #f2f2f4);
  --hint: var(--tg-theme-hint-color, #8d8d94);
  --v3: #4fc7a4; --v2: #e6ac4f; --cas: #a3a0f2;
  --s1: #3987e5; --s2: #d95926; --pause: #e6ac4f;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); }
body { font: 15px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; -webkit-tap-highlight-color: transparent; }
main { max-width: 520px; margin: 0 auto; padding: 12px 12px 32px; }
h1 { font-size: 21px; font-weight: 600; margin: 4px 4px 2px; }
h2 { font-size: 13px; font-weight: 500; color: var(--hint); margin: 18px 4px 6px; }
.sub { color: var(--hint); font-size: 13px; }
.mono { font-variant-numeric: tabular-nums; }
.top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.top .plain { font-size: 14px; white-space: nowrap; }
.back, .plain { background: none; border: 0; color: var(--link); font: inherit; padding: 4px; cursor: pointer; }
.card { background: var(--card); border-radius: 12px; overflow: hidden; }
.card + .card { margin-top: 8px; }
.card.info { margin-top: 10px; padding: 5px 0; }
.row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; background: none; border: 0; color: inherit; font: inherit; text-align: left; }
button.row { cursor: pointer; }
.row + .row { border-top: .5px solid var(--sep); }
.grow { flex: 1; min-width: 0; }
.name { overflow-wrap: anywhere; }
.chev { color: var(--hint); font-size: 18px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--hint); opacity: .45; flex: none; }
.dot.on { background: var(--ok); opacity: 1; }
.dot.bad { background: var(--danger); opacity: 1; }
.tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.tag { font-size: 12px; padding: 1px 7px; border-radius: 6px; background: var(--bg); color: var(--hint); }
.tag.v3 { color: var(--v3); } .tag.v2 { color: var(--v2); } .tag.cas { color: var(--cas); }
.route { font-size: 13px; margin-top: 3px; }
.lock { font-size: 12px; color: var(--hint); flex: none; }
.btn { display: block; width: 100%; padding: 12px; margin-top: 8px; border: 0; border-radius: 10px; font: inherit; font-weight: 500; background: var(--btn); color: var(--btn-text); cursor: pointer; }
.btn.alt { background: var(--card); color: var(--link); }
.btn.bad { background: var(--card); color: var(--danger); }
.btn:disabled { opacity: .55; }
.err { background: var(--card); color: var(--danger); border-radius: 10px; padding: 10px 12px; margin-top: 8px; font-size: 14px; }
.note { background: var(--card); border-radius: 10px; padding: 10px 12px; margin-top: 8px; font-size: 13px; color: var(--hint); }
details { background: var(--card); border-radius: 12px; margin-top: 10px; }
summary { padding: 11px 12px; cursor: pointer; color: var(--link); }
.kv { display: flex; justify-content: space-between; gap: 12px; padding: 5px 12px; font-size: 13px; }
.kv span:first-child { color: var(--hint); }
.kv span:last-child { text-align: right; }
.rule { padding: 4px 12px; font-size: 13px; }
.rules { padding-bottom: 10px; }
.opt { display: flex; gap: 10px; align-items: flex-start; }
.opt input { margin-top: 3px; flex: none; }
input[type=text] { width: 100%; padding: 11px 12px; border: 0; border-radius: 10px; background: var(--card); color: var(--text); font: inherit; }
.qr { background: #fff; border-radius: 12px; padding: 12px; margin-top: 8px; text-align: center; }
.qr img { width: 100%; max-width: 320px; image-rendering: pixelated; display: block; margin: 0 auto; }
.conf { margin: 8px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--card); color: var(--text); font: 12px/1.5 ui-monospace, Menlo, monospace; white-space: pre-wrap; overflow-wrap: anywhere; -webkit-user-select: text; user-select: text; }
.dot.pause { background: var(--pause); opacity: 1; }
.paused { background: var(--card); color: var(--pause); border-radius: 10px; padding: 10px 12px; margin-top: 8px; font-size: 14px; }
.hint { margin: 2px 4px 6px; }
.form { margin: 4px 0; }
.two { display: flex; gap: 8px; }
.two > * { flex: 1; min-width: 0; }
.card.pad { padding: 10px 12px 12px; }
.seg { display: flex; background: var(--bg); border-radius: 9px; padding: 2px; }
.seg button { flex: 1; border: 0; background: none; color: var(--hint); font: inherit; font-size: 13px; padding: 6px 4px; border-radius: 7px; cursor: pointer; }
.seg button.on { background: var(--card); color: var(--text); font-weight: 500; }
main > .seg { background: var(--card); margin-top: 8px; }
main > .seg button.on { background: var(--bg); }
.readout { font-size: 13px; margin: 10px 0 4px; min-height: 18px; }
.chart { display: block; width: 100%; height: auto; }
.chart .grid { stroke: var(--sep); stroke-width: 1; }
.chart .tick { font-size: 10px; fill: var(--hint); }
.chart .tick.end { text-anchor: end; }
.chart .tick.mid { text-anchor: middle; }
.chart .s1 { fill: var(--s1); }
.chart .s2 { fill: var(--s2); }
.chart .hit { fill: transparent; cursor: pointer; }
.chart .band { fill: var(--sep); }
.chart .cell-on { fill: var(--s1); cursor: pointer; }
.chart .cell-off { fill: var(--cell-off); cursor: pointer; }
.chart .cell-sel { stroke: var(--text); stroke-width: 1; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; font-size: 12px; color: var(--hint); }
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.sw { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.sw.s1, .sw.on { background: var(--s1); }
.sw.s2 { background: var(--s2); }
.sw.off { background: var(--cell-off); }
table.days { width: 100%; margin-top: 8px; border-collapse: collapse; background: var(--card); border-radius: 12px; overflow: hidden; font-size: 13px; font-variant-numeric: tabular-nums; }
.days th { font-weight: 500; color: var(--hint); font-size: 12px; }
.days th, .days td { padding: 6px 12px; text-align: right; }
.days th:first-child, .days td:first-child { text-align: left; }
.days tbody td { border-top: .5px solid var(--sep); }
.days tfoot td { border-top: .5px solid var(--sep); font-weight: 500; }
.plain.inline { padding: 0; font-size: 13px; }
.plain.link { font-size: 13px; }
.card.list { margin-top: 2px; }
button.row:disabled { opacity: .55; }
select { display: block; width: 100%; padding: 11px 12px; border: 0; border-radius: 10px; background: var(--card); color: var(--text); font: inherit; }
main > .seg + h2, main > .seg + .btn { margin-top: 14px; }
.empty { padding: 10px 12px; color: var(--hint); font-size: 13px; }
.center { text-align: center; padding: 40px 16px; color: var(--hint); }