/* Смуга повітряної тривоги — поверх усього, але не закриває урок */
#tryv{position:fixed;left:50%;transform:translateX(-50%);top:14px;z-index:99998;max-width:min(94vw,860px);
 display:flex;align-items:center;gap:12px;padding:12px 14px 12px 18px;border-radius:999px;
 font-size:15.5px;font-weight:800;line-height:1.3;box-shadow:0 14px 40px rgba(31,49,83,.28);
 animation:tvIn .35s ease both}
@keyframes tvIn{from{opacity:0;transform:translate(-50%,-14px)}to{opacity:1;transform:translate(-50%,0)}}
#tryv.on{background:linear-gradient(140deg,#FFD9D9,#FFC1C9);color:#8A2438}
#tryv.off{background:linear-gradient(140deg,#D4F5E4,#B4EAD0);color:#1F5C40}
#tryv .tv-d{width:12px;height:12px;border-radius:50%;flex:none;background:currentColor}
#tryv.on .tv-d{animation:tvPulse 1.1s ease-in-out infinite}
@keyframes tvPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.78)}}
#tryv .tv-x{margin-left:4px;min-width:40px;min-height:40px;border:0;background:rgba(255,255,255,.5);color:inherit;font:inherit;font-size:19px;
 line-height:1;width:30px;height:30px;border-radius:50%;cursor:pointer;flex:none}
@media (prefers-reduced-motion:reduce){#tryv,#tryv .tv-d{animation:none}}

/* Вікно тривоги — поверх будь-якої сторінки сайту (в уроці замість нього вмикається режим «Тривога») */
#tryvM{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;padding:16px;
 background:rgba(52,12,24,.58);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:tvFade .25s ease both;
 font-family:Nunito,system-ui,-apple-system,"Segoe UI",sans-serif}
@keyframes tvFade{from{opacity:0}to{opacity:1}}
#tryvM .tvm-c{width:min(100%,540px);max-height:calc(100vh - 32px);overflow:auto;background:#FFF7F8;color:#3A1520;border-radius:32px;
 padding:30px 28px 22px;text-align:center;box-shadow:0 30px 80px rgba(40,6,16,.45),inset 0 -6px 0 rgba(176,40,64,.10);
 animation:tvPop .35s cubic-bezier(.2,1.3,.4,1) both}
@keyframes tvPop{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}
#tryvM .tvm-i{width:84px;height:84px;margin:0 auto 12px;border-radius:50%;display:grid;place-items:center;color:#fff;
 background:radial-gradient(circle at 35% 30%,#FF7A8C,#D3243F);box-shadow:0 0 0 0 rgba(211,36,63,.45);animation:tvRing 1.6s ease-out infinite}
#tryvM .tvm-i svg{width:46px;height:46px}
@keyframes tvRing{0%{box-shadow:0 0 0 0 rgba(211,36,63,.45)}100%{box-shadow:0 0 0 22px rgba(211,36,63,0)}}
#tryvM h2{margin:0 0 6px;font-size:clamp(26px,6vw,34px);line-height:1.15;font-weight:900;color:#B0203A}
#tryvM .tvm-l{display:inline-block;margin:0 0 10px;padding:6px 14px;border-radius:999px;font-size:15.5px;font-weight:900;background:#FFE1E6;color:#8C1F30}
#tryvM .tvm-l.red{background:#D3243F;color:#fff}
#tryvM .tvm-l.yellow{background:#FFD866;color:#4A3800}
#tryvM .tvm-src{margin:2px 0 4px;font-size:12.5px;font-weight:700;color:#8A5A66;line-height:1.35}
#tryvM .tvm-p{margin:0 0 12px;font-size:17px;font-weight:800;color:#6B2C3A}
#tryvM .tvm-d{margin:0 0 12px;font-size:18px;font-weight:700;line-height:1.45}
#tryvM .tvm-n{margin:0 0 14px;padding:10px 14px;border-radius:16px;background:#FFE6EA;font-size:14.5px;font-weight:700;color:#6B2C3A}
#tryvM .tvm-n a,#tryvM .tvm-s{color:#B0203A;font-weight:900}
#tryvM .tvm-demo{display:inline-block;margin:0 0 8px;padding:4px 12px;border-radius:999px;background:#FFE6EA;font-size:13.5px;font-weight:900;color:#8C1F30}
#tryvM .tvm-b{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:6px 0 12px}
#tryvM button{min-height:56px;padding:0 26px;border:0;border-radius:999px;font:inherit;font-size:18px;font-weight:900;cursor:pointer}
#tryvM .tvm-ok{background:#D3243F;color:#fff;box-shadow:0 8px 20px rgba(211,36,63,.35)}
#tryvM .tvm-ok:hover{background:#BA1C35}
#tryvM .tvm-mute{background:#FFE1E6;color:#8C1F30}
#tryvM button:focus-visible,#tryvM a:focus-visible{outline:3px solid #3A7BFF;outline-offset:3px}
#tryvM .tvm-s{display:inline-block;font-size:15px;padding:6px}
@media (max-width:480px){#tryvM .tvm-c{padding:24px 18px 16px;border-radius:26px}#tryvM .tvm-b button{flex:1 1 100%}#tryvM .tvm-d{font-size:16.5px}}
/* низький екран (телефон боком, маленьке вікно): усе стискаємо, кнопка «Зрозуміло» завжди видна */
#tryvM .tvm-b{position:sticky;bottom:-22px;background:#FFF7F8;padding:6px 0 8px;margin-bottom:4px}
@media (max-height:640px){#tryvM .tvm-c{padding:16px 18px 12px}#tryvM .tvm-i{width:52px;height:52px;margin-bottom:6px}#tryvM .tvm-i svg{width:30px;height:30px}
 #tryvM h2{font-size:24px;margin-bottom:2px}#tryvM .tvm-p{font-size:15px;margin-bottom:6px}#tryvM .tvm-d{font-size:15.5px;margin-bottom:8px}
 #tryvM .tvm-n{font-size:13.5px;padding:8px 12px;margin-bottom:8px}#tryvM button{min-height:48px;font-size:16.5px}#tryvM .tvm-b{bottom:-12px}}
@media (prefers-reduced-motion:reduce){#tryvM,#tryvM .tvm-c,#tryvM .tvm-i{animation:none}}
@media (max-width:600px){#tryv{top:auto;bottom:12px;font-size:14px;border-radius:22px;width:calc(100vw - 24px)}}

/* Налаштування тривоги (кабінет, /air-alert) */
.tvs{border:0;margin:0 0 6px;padding:0;display:grid;gap:8px}
.tvs legend{font-weight:900;font-size:17px;margin:0 0 8px;padding:0}
.tvs-o{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:18px;background:var(--tray,#F1F3FA);cursor:pointer;line-height:1.35}
.tvs-o input{width:22px;height:22px;margin:1px 0 0;flex:none;accent-color:#D3243F}
.tvs-o b{display:block;font-size:16px}
.tvs-o span{font-size:14.5px;font-weight:700;color:var(--mu,#5B6478)}
.tvs-o span b{color:var(--tx,#1F2A44)}
.tvs-o:has(input:checked){outline:3px solid #F3A6B3}
.tvs-snd{margin-top:8px}
.tvs-r{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px}
.tvs-ok{font-size:14.5px;font-weight:800;color:var(--ink-mint,#1F5C40)}
@media print{#tryvM,#tryv{display:none!important}}