:root { color-scheme: dark; --bg:#0b1713; --card:#14261f; --text:#f4f2e9; --muted:#aebdb5; --accent:#ffd65a; --green:#45d483; --red:#ff6b6b; --blue:#62a8ff; }
* { box-sizing:border-box; }
body { margin:0; background:radial-gradient(circle at top right,#1d4938 0,var(--bg) 38%); color:var(--text); font:15px/1.45 system-ui,-apple-system,"Segoe UI",sans-serif; }
header, main, footer { width:min(100%,760px); margin:auto; }
header { padding:24px 16px 14px; }
.eyebrow { margin:0 0 4px; color:var(--accent); font-size:11px; font-weight:800; letter-spacing:.12em; }
h1 { margin:0; font-size:32px; line-height:1.08; }
h2 { margin:0; font-size:20px; }
#summary,.status,footer { color:var(--muted); }
button { border:0; border-radius:12px; padding:11px 14px; background:var(--accent); color:#172014; font-weight:750; cursor:pointer; }
button:disabled { opacity:.55; cursor:wait; }
.header-actions { display:flex; flex-wrap:wrap; gap:9px; align-items:center; margin-top:14px; }
.telegram-cta { display:inline-flex; align-items:center; min-height:42px; border-radius:12px; padding:10px 14px; background:#2aabee; color:#071b26; font-weight:800; text-decoration:none; }
.telegram-cta::before { content:"➤"; margin-right:7px; }
.telegram-cta:hover { background:#54bff3; }
.telegram-cta:focus-visible,button:focus-visible { outline:3px solid #fff; outline-offset:2px; }
.telegram-cta[hidden] { display:none; }
.status { min-height:22px; margin:7px 2px 0; font-size:13px; }
.map-card,.feed { margin:0 12px 14px; overflow:hidden; border:1px solid #2a4238; border-radius:18px; background:rgba(20,38,31,.94); box-shadow:0 12px 40px #0005; }
#map { height:47vh; min-height:330px; background:#d9e2dc; }
.legend { display:flex; gap:8px; align-items:center; padding:10px 14px; color:var(--muted); font-size:12px; }
.legend span { width:9px; height:9px; border-radius:50%; }
.available { background:var(--green); }.delayed { background:var(--accent); }.unavailable { background:var(--red); }
.feed { padding:15px; }
.feed-title { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.feed-title button { background:#294439; color:var(--text); padding:8px 11px; }
.report { padding:13px 0; border-top:1px solid #294037; }
.report:first-child { border-top:0; }
.meta { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:6px; }
.pill { border-radius:999px; padding:3px 8px; background:#263d34; color:var(--muted); font-size:12px; }
.pill.available { color:#10271f }.pill.delayed { color:#332900 }.pill.unavailable { color:#fff }
.report p { margin:5px 0; white-space:pre-wrap; }
.report a { color:#88bfff; text-decoration:none; }
.distance { color:var(--accent); font-weight:700; }
.empty { padding:22px 4px; color:var(--muted); }
footer { padding:4px 18px 28px; font-size:12px; }
.user-dot { width:16px;height:16px;border:3px solid white;border-radius:50%;background:var(--blue);box-shadow:0 0 0 5px #62a8ff55; }
@media (min-width:700px) { header { display:grid; grid-template-columns:1fr auto; align-items:end; } .header-actions { justify-content:flex-end; margin-top:0; } header .status { grid-column:1/-1; } }