@font-face { font-family: "Manrope"; font-weight: 200 800; font-display: swap; src: url(fonts/manrope-cyrillic.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Manrope"; font-weight: 200 800; font-display: swap; src: url(fonts/manrope-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+2000-206F, U+2191, U+2193, U+2212; }
:root {
  --bg: var(--tg-theme-secondary-bg-color, #f1f1f4); --card: var(--tg-theme-section-bg-color, #fff);
  --text: var(--tg-theme-text-color, #111); --hint: var(--tg-theme-hint-color, #8a8f98);
  --link: var(--tg-theme-link-color, #2481cc); --accent: var(--tg-theme-button-color, #2481cc);
  --accent-text: var(--tg-theme-button-text-color, #fff); --line: var(--tg-theme-section-separator-color, rgba(0,0,0,.08));
  --on: #34a853; --off: #d93025; --maybe: #f2a600; --sw: #e8710a; --track: rgba(0,0,0,.07);
  --note-bg: rgba(242,166,0,.13);
  font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; -webkit-text-size-adjust: 100%;
}
:root[data-scheme="dark"] { --bg: var(--tg-theme-secondary-bg-color, #0f0f10); --card: var(--tg-theme-section-bg-color, #1c1c1e);
  --text: var(--tg-theme-text-color, #f2f2f2); --line: var(--tg-theme-section-separator-color, rgba(255,255,255,.08));
  --on: #4cd277; --off: #ff6b5e; --maybe: #ffc247; --sw: #ff9a3d; --track: rgba(255,255,255,.10); --note-bg: rgba(255,194,71,.12); }
@media (prefers-color-scheme: dark) { :root:not([data-scheme]) { --bg: #0f0f10; --card: #1c1c1e; --text: #f2f2f2;
  --line: rgba(255,255,255,.08); --on: #4cd277; --off: #ff6b5e; --maybe: #ffc247; --sw: #ff9a3d; --track: rgba(255,255,255,.10);
  --note-bg: rgba(255,194,71,.12); } }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font-size: 15px; line-height: 1.4; }
#app { max-width: 640px; margin: 0 auto; padding: 12px 16px 32px; }
.top { position: sticky; top: 0; z-index: 2; background: var(--bg); padding-bottom: 8px; }
.title-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
h1 { font-size: 19px; margin: 4px 0; font-weight: 800; }
h2 { font-size: 16px; margin: 0 0 8px; font-weight: 700; }
.refresh { border: 0; background: var(--card); color: var(--text); width: 36px; height: 36px; border-radius: 50%; font-size: 18px; }
.updated { margin: 0 0 10px; color: var(--hint); font-size: 13px; }
.updated.warn { color: var(--off); }
.seg { display: flex; background: var(--card); border-radius: 12px; padding: 3px; gap: 3px; }
.seg button { flex: 1; border: 0; background: transparent; color: var(--text); padding: 8px 4px; border-radius: 9px; font: inherit; font-weight: 600; }
.seg button.on { background: var(--accent); color: var(--accent-text); }
.card { background: var(--card); border-radius: 14px; padding: 14px; margin-top: 12px; }
.hint { color: var(--hint); font-size: 13px; margin: 4px 0 8px; }
.note { background: var(--note-bg); border-radius: 10px; padding: 8px 10px; font-size: 13px; margin: 4px 0 10px; }
.empty { text-align: center; color: var(--hint); padding: 40px 8px; }
.sub { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 10px; }
.sub:first-of-type { border-top: 0; margin-top: 0; }
.subhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin-bottom: 6px; }
.badge { font-weight: 800; background: var(--track); border-radius: 8px; padding: 2px 8px; font-size: 13px; }
.state { font-weight: 700; }
.state.on { color: var(--on); } .state.off { color: var(--off); } .state.sw { color: var(--sw); } .state.maybe { color: var(--maybe); }
.state.none { color: var(--hint); }
.next { color: var(--hint); font-size: 13px; width: 100%; }
.day { margin: 8px 0 4px; }
.dayhead { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 4px; }
.dt { font-weight: 600; } .pub { color: var(--hint); }
.spans { margin: 4px 0 0; font-size: 13px; }
.tlw { position: relative; padding-bottom: 14px; }
.tl { position: relative; display: grid; grid-template-columns: repeat(48, 1fr); gap: 1px; height: 22px; border-radius: 6px; overflow: hidden; }
.c { display: block; height: 100%; }
.c.on { background: var(--on); opacity: .55; } .c.off { background: var(--off); } .c.maybe { background: var(--maybe); }
.c.sw { background: var(--sw); }
.c.down { background: linear-gradient(90deg, var(--on) 0 50%, var(--off) 50%); opacity: 1; }
.c.up { background: linear-gradient(90deg, var(--off) 0 50%, var(--on) 50%); opacity: 1; }
.now { position: absolute; top: -3px; height: 28px; width: 2px; background: var(--text); border-radius: 1px; }
.ticks { position: absolute; left: 0; right: 0; bottom: 0; height: 12px; font-size: 10px; color: var(--hint); }
.ticks span { position: absolute; transform: translateX(-50%); }
.ticks span:first-child { transform: none; } .ticks span:last-child { transform: translateX(-100%); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--hint); margin-top: 10px; }
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend .c { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.mrow { display: flex; gap: 10px; padding: 6px 0; border-top: 1px solid var(--line); }
.mrow:nth-of-type(1) { border-top: 0; }
.mname { width: 52px; flex: none; font-weight: 600; font-size: 13px; }
.mbars { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.mbar { display: grid; grid-template-columns: 34px 1fr 112px; align-items: center; gap: 6px; font-size: 12px; }
.msub { color: var(--hint); }
.track { height: 8px; background: var(--track); border-radius: 4px; overflow: hidden; }
.fill { display: block; height: 100%; }
.fill.off { background: var(--off); } .fill.maybe { background: var(--maybe); }
.mval { color: var(--hint); font-size: 12px; white-space: nowrap; text-align: right; }
.spark .mval { text-align: left; }
.spark { display: grid; grid-template-columns: 44px 1fr; gap: 4px 8px; align-items: end; margin: 10px 0; }
.spark .mval { grid-column: 2; }
.sbars { display: grid; grid-template-columns: repeat(30, 1fr); gap: 2px; height: 48px; align-items: end; }
.scol { height: 100%; display: flex; flex-direction: column-reverse; background: var(--track); border-radius: 2px; overflow: hidden; }
.scol .fill { width: 100%; height: 0; }
.chg { border-top: 1px solid var(--line); padding: 8px 0; }
.chghead { font-weight: 600; font-size: 13px; }
.foot { margin-top: 16px; }
.links { display: flex; gap: 14px; font-size: 13px; } .links a { color: var(--link); }
.tl { position: relative; }
.tl .ev { position: absolute; top: 0; bottom: 0; border-radius: 3px; border: 2px solid #7b1fa2;
  background: repeating-linear-gradient(135deg, rgba(123,31,162,.85) 0 4px, rgba(123,31,162,.45) 4px 8px); }
.tl .ev.planned { border-color: #3949ab; background: repeating-linear-gradient(135deg, rgba(57,73,171,.85) 0 4px, rgba(57,73,171,.45) 4px 8px); }
.legend .c.ev { background: repeating-linear-gradient(135deg, #7b1fa2 0 3px, #3949ab 3px 6px); }
.evtxt { font-weight: 600; } .evtxt.emergency { color: #9c27b0; } .evtxt.planned { color: #5c6bc0; }
:root[data-scheme="dark"] .evtxt.emergency { color: #ce93d8; } :root[data-scheme="dark"] .evtxt.planned { color: #9fa8da; }
.offsch { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 10px; }
h3 { font-size: 14px; margin: 0 0 6px; }
.evrow { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 13px; padding: 4px 0; }
.evk { font-weight: 700; } .evx { color: var(--hint); width: 100%; font-size: 12px; }
.evstat { font-size: 12px; }