:root{
  --bg:#f2f5f6;--surface:#fff;--surface-2:#eef2f3;--text:#0f2128;--muted:#5d6e75;--faint:#8a989e;--line:#e2e8ea;
  --accent:#0f766e;--accent-2:#0b5f58;--focus:#147aaf;
  --low:#16a34a;--low-tint:#e8f7ee;--mid:#d68a00;--mid-tint:#fff4dc;--high:#dc3b3b;--high-tint:#fdeaea;--none:#9aa7ac;--none-tint:#eef2f3;
  --shadow:0 1px 2px #0f21280a,0 8px 28px #0f21280d;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;color:var(--text);background:var(--bg);font-size:16px;font-synthesis:none;-webkit-font-smoothing:antialiased
}
*{box-sizing:border-box}
body{margin:0;padding:24px;min-width:240px;background:var(--bg)}
a{color:var(--accent)}
button,a{-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
[hidden]{display:none!important}
.page{max-width:600px;margin:0 auto;display:grid;gap:14px}

/* Шапка */
.top{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;padding:4px 4px 6px}
.eyebrow{display:block;font-size:13px;color:var(--muted);margin-bottom:6px}
h1{font-size:clamp(26px,6vw,34px);line-height:1.1;letter-spacing:-.02em;margin:0;font-weight:750}
.live{display:inline-flex;align-items:center;gap:8px;font-size:13px;line-height:1.3;color:var(--muted);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:7px 12px;font-variant-numeric:tabular-nums}
.live-dot{position:relative;width:8px;height:8px;flex-shrink:0;border-radius:50%;background:var(--none)}
.live[data-active="true"]{color:var(--text)}
.live[data-active="true"] .live-dot{background:var(--low)}
.live[data-active="true"] .live-dot:after{content:"";position:absolute;inset:-4px;border:1.5px solid var(--low);border-radius:50%;opacity:.5}

/* Главная карточка */
.reading{--c:var(--none);--tint:var(--none-tint);position:relative;background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:22px 24px 0;box-shadow:var(--shadow);overflow:hidden}
.reading[data-level="low"]{--c:var(--low);--tint:var(--low-tint)}
.reading[data-level="medium"]{--c:var(--mid);--tint:var(--mid-tint)}
.reading[data-level="high"]{--c:var(--high);--tint:var(--high-tint)}
.reading-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.queue-level{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:650;color:var(--c);background:var(--surface);border-radius:999px;padding:6px 12px 6px 10px;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 30%,transparent)}
.level-dot{width:9px;height:9px;border-radius:50%;background:currentColor;flex-shrink:0}
.status{font-size:13px;color:var(--muted)}
.reading[data-tone="normal"] .status{display:none}
.reading[data-tone="warning"] .status{color:var(--mid);font-weight:600}
.number{font-size:clamp(64px,17vw,92px);font-weight:750;letter-spacing:-.045em;line-height:1;margin:22px 0 4px;font-variant-numeric:tabular-nums}
.count-label{font-size:17px;line-height:1.4;margin:0;color:var(--muted)}
.meter{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:22px}
.meter i{height:8px;border-radius:4px;background:var(--surface-2)}
.reading[data-level="low"] .meter i:nth-child(-n+1),
.reading[data-level="medium"] .meter i:nth-child(-n+2),
.reading[data-level="high"] .meter i{background:var(--c)}
.meter-scale{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:6px;font-size:11px;color:var(--faint)}
.notice{font-size:14px;line-height:1.55;color:var(--muted);margin:16px 0 0;padding:10px 12px;background:var(--surface-2);border-radius:10px}
.reading[data-tone="warning"] .notice{background:var(--mid-tint);color:var(--text)}
.update{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:20px -24px 0;padding:14px 24px;border-top:1px solid var(--line)}
.update>div{min-width:0;flex:1}
.label{display:block;font-size:12px;color:var(--faint);margin-bottom:2px}
time{font-size:14px;line-height:1.4;display:block}

/* Кнопка */
button{font:inherit}
#refresh{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:7px;flex-shrink:0;min-height:42px;min-width:124px;padding:0 16px;border:0;border-radius:999px;background:var(--text);color:var(--surface);font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap}
#refresh:hover{opacity:.88}
#refresh:active{transform:scale(.98)}
#refresh .refresh-icon{font-size:17px;line-height:1}
#refresh:disabled{cursor:wait;opacity:1}
#refresh.is-checking .refresh-icon{display:inline-block;animation:spin .9s linear infinite}
.result-refreshing{opacity:.4}

/* Расписание */
.schedule{display:flex;gap:12px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:14px 18px;line-height:1.45}
.schedule strong{font-size:15px;font-weight:650}
.schedule p{margin:2px 0 0;color:var(--muted);font-size:14px}
.schedule-dot{width:10px;height:10px;border-radius:50%;margin-top:6px;flex-shrink:0;background:var(--none)}
.schedule-dot[data-state="open"]{background:var(--low)}
.schedule-dot[data-state="soon"]{background:var(--mid)}
.schedule-dot[data-state="closed"]{background:var(--high)}

/* Камера */
.camera{margin:0}
.frame-crop{display:block;position:relative;overflow:hidden;width:100%;aspect-ratio:2080/640;padding:0;border:0;border-radius:18px;background:var(--surface-2);cursor:zoom-out;box-shadow:var(--shadow)}
.frame-crop img{position:absolute;width:162.5%;max-width:none;height:auto;left:-62.5%;top:-95.3125%;display:block}
.frame-crop.is-full{aspect-ratio:auto;cursor:zoom-in}
.frame-crop.is-full img{position:static;width:100%}
.frame-toggle{position:absolute;right:10px;bottom:10px;font-size:12px;font-weight:600;color:#fff;background:#0f2128b3;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-radius:999px;padding:5px 10px;pointer-events:none}
.camera figcaption{font-size:13px;color:var(--faint);padding:8px 4px 0}

/* Неделя */
.weekly{background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:20px 22px}
.weekly-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.weekly h2{font-size:19px;letter-spacing:-.01em;margin:0}
#week-period{font-size:13px;color:var(--faint)}
.week-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0 12px}
.week-day{padding:14px 16px;border-radius:14px}
.quiet-day{background:var(--low-tint)}
.busy-day{background:var(--mid-tint)}
.week-day span,.week-day small{display:block;font-size:12px;line-height:1.45;color:var(--muted)}
.week-day strong{display:block;font-size:20px;margin:6px 0 2px;font-weight:700}
.weekly p{font-size:13px;line-height:1.55;color:var(--muted);margin:0}

/* Подвал */
footer{display:flex;justify-content:space-between;align-items:center;gap:8px 16px;flex-wrap:wrap;padding:2px 4px 4px;font-size:13px;line-height:1.5;color:var(--faint)}
footer p{margin:0}
footer a{font-weight:600;text-decoration:none}
footer a:hover{text-decoration:underline}

.check-animation{display:inline-flex;gap:3px;align-items:center}
.check-animation i{width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.6}

@media(max-width:420px){
  body{padding:12px}
  .reading{padding:20px 18px 0;border-radius:20px}
  .update{margin:18px -18px 0;padding:12px 18px}
  .weekly{padding:18px}
  #refresh{min-width:0}
  .week-day{padding:12px 14px}
  .week-day strong{font-size:18px}
}
@media(max-width:340px){.week-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:no-preference){
  #refresh{transition:opacity .15s,transform .1s}
  .meter i{transition:background .4s}
  .live[data-active="true"] .live-dot:after{animation:pulse 2s ease-out infinite}
  .check-animation i{animation:dots 1.2s ease-in-out infinite}
  .check-animation i:nth-child(2){animation-delay:.2s}
  .check-animation i:nth-child(3){animation-delay:.4s}
  .result-refreshing{animation:fade .65s ease-in-out infinite}
}
@keyframes pulse{0%{transform:scale(.55);opacity:.8}100%{transform:scale(1.7);opacity:0}}
@keyframes dots{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
@keyframes fade{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes spin{to{transform:rotate(360deg)}}