:root { --ink:#0f141a; --graphite:#121a23; --graphite2:#1a2430; --paper:#f4f2ec; --paper2:#eae7de; --rule:#d6d2c6; --muted:#5b6470; --muted-d:#a3adba;
  --red:#c4122f; --red-d:#a30f27; --ok:#2e9e6b;
  --head:'Barlow Condensed','Arial Narrow',sans-serif; --body:'Barlow','Segoe UI',system-ui,sans-serif; }
*, *::before, *::after { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font:400 18px/1.6 var(--body); -webkit-font-smoothing:antialiased; }
h1,h2,h3,p,ul,ol,figure { margin:0; }
img { display:block; max-width:100%; height:auto; }
a { color:inherit; }
a:focus-visible, summary:focus-visible, .btn:focus-visible { outline:2px solid var(--red); outline-offset:3px; }
.wrap { width:min(1160px,100%); margin-inline:auto; padding-inline:max(24px,env(safe-area-inset-left,0px)); }

/* buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; padding:14px 26px; border:2px solid currentColor; border-radius:2px; font:600 16px/1 var(--body); letter-spacing:.04em; text-transform:uppercase; text-decoration:none; transition:background .15s,color .15s,border-color .15s; white-space:nowrap; cursor:pointer; }
.btn.solid { background:var(--red); border-color:var(--red); color:#fff; }
.btn.solid:hover { background:var(--red-d); border-color:var(--red-d); }
.btn.line { color:#fff; border-color:rgba(255,255,255,.6); }
.btn.line:hover { background:#fff; color:var(--ink); border-color:#fff; }
.btn.dark { color:var(--ink); border-color:var(--ink); }
.btn.dark:hover { background:var(--ink); color:#fff; }
.btn.sm { padding:10px 18px; font-size:14px; }

/* header */
.top { position:sticky; top:0; z-index:100; background:var(--graphite); border-bottom:3px solid var(--red); }
.top .wrap { display:flex; align-items:center; gap:36px; height:68px; }
.logo { font:700 26px/1 var(--head); letter-spacing:.03em; text-transform:uppercase; text-decoration:none; color:#fff; white-space:nowrap; }
.logo b { font-weight:700; color:var(--red); }
.logo span { margin-left:8px; padding-left:8px; border-left:1px solid rgba(255,255,255,.35); font-weight:600; color:var(--muted-d); }
.links { display:flex; gap:28px; margin-right:auto; }
.links a { font:500 16px/1 var(--body); color:#e6ebf1; text-decoration:none; padding:6px 0; border-bottom:2px solid transparent; }
.links a:hover { color:#fff; border-bottom-color:rgba(255,255,255,.5); }
.links a[aria-current] { color:#fff; border-bottom-color:var(--red); }

/* hero */
.hero { position:relative; background:var(--graphite); color:#fff; }
.hero > img { width:100%; height:clamp(520px,78vh,780px); object-fit:cover; object-position:50% 50%; }
.hero::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(10,14,20,.82) 0%,rgba(10,14,20,.55) 42%,rgba(10,14,20,.05) 75%); }
.hero .in { position:absolute; inset:0; z-index:1; display:flex; align-items:center; }
.hero h1 { font:700 clamp(2.8rem,6.2vw,5.4rem)/.98 var(--head); text-transform:uppercase; letter-spacing:.005em; max-width:760px; }
.hero p.lead { max-width:520px; margin-top:20px; font-size:1.2rem; color:#e3e8ee; }
.hero .cta { display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.hero .status { margin-top:22px; font-size:15px; color:var(--muted-d); display:flex; align-items:center; gap:9px; }
.hero .status i { width:9px; height:9px; border-radius:50%; background:var(--ok); }
.hero .status i.off { background:#c0453f; }
.hero .cap { position:absolute; right:0; bottom:10px; z-index:2; font-size:12px; color:rgba(255,255,255,.75); padding:3px 10px; background:rgba(10,14,20,.55); }
.cap a, .shot figcaption a { text-decoration:underline; text-underline-offset:2px; }

/* numbers */
.facts { background:var(--graphite2); color:#fff; border-bottom:1px solid #000; }
.facts .wrap { display:grid; grid-template-columns:repeat(4,1fr); }
.facts .c { padding:26px 24px 26px 0; border-right:1px solid rgba(255,255,255,.14); margin-right:24px; }
.facts .c:last-child { border-right:0; margin-right:0; }
.facts b { display:block; font:700 clamp(2.2rem,4vw,3.2rem)/1 var(--head); letter-spacing:.01em; }
.facts span { font-size:13px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted-d); }

/* sections */
.sec { padding-block:88px; }
.sec.dark { background:var(--graphite); color:#fff; }
.sec.alt { background:var(--paper2); }
.eyebrow { font:600 14px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--red); margin-bottom:14px; }
.dark .eyebrow { color:#ff6b7d; }
.sec h2 { font:700 clamp(2.1rem,4.2vw,3.2rem)/1.04 var(--head); text-transform:uppercase; letter-spacing:.01em; max-width:760px; }
.sec .intro { max-width:640px; margin-top:16px; color:var(--muted); font-size:1.1rem; }
.dark .intro { color:var(--muted-d); }

/* line diagram */
.stations { list-style:none; padding:0; margin:48px 0 0; display:flex; }
.stations li { flex:1; position:relative; padding-top:30px; font:600 15px/1.25 var(--body); text-align:center; min-width:0; }
.stations li::before { content:""; position:absolute; top:9px; left:0; right:0; height:4px; background:var(--ink); }
.stations li:first-child::before { left:50%; } .stations li:last-child::before { right:50%; }
.stations li::after { content:""; position:absolute; top:3px; left:50%; width:16px; height:16px; margin-left:-8px; border-radius:50%; background:var(--paper); border:4px solid var(--ink); }
.stations li.big::after { background:var(--red); border-color:var(--red); }
.stations small { display:block; font-weight:400; color:var(--muted); font-size:13px; }
.shots { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:56px; }
.shot img { width:100%; aspect-ratio:16/9; object-fit:cover; }
.shot figcaption { margin-top:10px; font-size:14px; color:var(--muted); }
.shot figcaption b { display:block; font:700 20px/1.2 var(--head); text-transform:uppercase; letter-spacing:.02em; color:var(--ink); }

/* split blocks */
.split { display:grid; grid-template-columns:1.15fr 1fr; gap:64px; align-items:center; }
.split.rev { grid-template-columns:1fr 1.15fr; } .split.rev .shot { order:2; }
.split .shot img { aspect-ratio:16/9; }
.dark .shot figcaption { color:var(--muted-d); } .dark .shot figcaption b { color:#fff; }
.facts-list { list-style:none; padding:0; margin:26px 0 0; border-top:1px solid var(--rule); }
.dark .facts-list { border-color:rgba(255,255,255,.18); }
.facts-list li { display:flex; justify-content:space-between; gap:20px; padding:12px 0; border-bottom:1px solid var(--rule); font-size:17px; }
.dark .facts-list li { border-color:rgba(255,255,255,.18); }
.facts-list span { color:var(--muted); } .dark .facts-list span { color:var(--muted-d); }
.facts-list strong { font-weight:600; text-align:right; }
.names { margin-top:22px; display:flex; flex-wrap:wrap; gap:8px; }
.names span { padding:6px 12px; border:1px solid rgba(255,255,255,.28); font-size:14px; letter-spacing:.02em; }

/* steps */
.steps { list-style:none; padding:0; margin:48px 0 0; display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:3px solid var(--ink); counter-reset:s; }
.steps li { counter-increment:s; padding:22px 28px 6px 0; }
.steps li::before { content:counter(s,decimal-leading-zero); display:block; font:700 2.6rem/1 var(--head); color:var(--red); margin-bottom:10px; }
.steps h3 { font:700 1.5rem/1.1 var(--head); text-transform:uppercase; letter-spacing:.01em; margin-bottom:8px; }
.steps p { color:var(--muted); font-size:16.5px; }
.steps a { color:var(--ink); }

/* faq */
.faq { max-width:860px; margin-top:36px; border-top:1px solid var(--rule); }
details { border-bottom:1px solid var(--rule); padding:20px 0; }
summary { cursor:pointer; list-style:none; font:600 1.2rem/1.3 var(--body); display:flex; justify-content:space-between; gap:20px; }
summary::-webkit-details-marker { display:none; }
summary::after { content:"+"; color:var(--red); font:400 1.7rem/1 var(--body); }
details[open] summary::after { content:"−"; }
details p { margin-top:10px; color:var(--muted); max-width:700px; }
details a { color:var(--ink); }

/* closing band */
.band { background:var(--red); color:#fff; padding-block:56px; }
.band .wrap { display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap; }
.band h2 { font:700 clamp(2rem,4vw,3rem)/1.05 var(--head); text-transform:uppercase; }
.band p { margin-top:6px; color:rgba(255,255,255,.88); }
.band .btn { background:#fff; border-color:#fff; color:var(--red); }
.band .btn:hover { background:var(--ink); border-color:var(--ink); color:#fff; }

/* inner pages */
.banner { background:var(--graphite); color:#fff; padding:44px 0 40px; }
.banner h1 { font:700 clamp(2.4rem,5vw,3.8rem)/1 var(--head); text-transform:uppercase; letter-spacing:.01em; }
.crumbs { font-size:14px; color:var(--muted-d); margin-bottom:10px; }
.crumbs a { text-decoration:none; } .crumbs a:hover { color:#fff; text-decoration:underline; }
.crumbs span { margin:0 8px; opacity:.6; }
.page { padding-block:56px 88px; }
.prose { max-width:800px; }
.page .wrap > .prose:not(:first-child) { margin-top:56px; margin-bottom:20px; }
.page .shots { margin-top:20px; }
.page .meta { margin-top:14px; }
.prose h2 { font:700 1.9rem/1.1 var(--head); text-transform:uppercase; letter-spacing:.01em; margin:44px 0 12px; padding-top:18px; border-top:1px solid var(--rule); }
.prose h2:first-child, .prose .note + h2 { margin-top:0; border-top:0; padding-top:0; }
.prose .note + h2 { margin-top:34px; }
.prose p + p { margin-top:12px; }
.prose ul { padding-left:22px; } .prose li { margin:7px 0; }
.prose a { color:var(--red); text-underline-offset:2px; }
.note { padding:14px 18px; border-left:4px solid var(--red); background:var(--paper2); margin-bottom:30px; }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:20px; margin:8px 0 36px; }
.card { padding:22px 24px; background:#fff; border:1px solid var(--rule); border-top:3px solid var(--ink); }
.card h3 { font:700 1.4rem/1.15 var(--head); text-transform:uppercase; letter-spacing:.01em; margin-bottom:8px; }
.card p { color:var(--muted); font-size:16.5px; }
.card b { display:block; font:700 2.6rem/1 var(--head); }
.card span { font-size:13px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); }
table.t { width:100%; border-collapse:collapse; font-size:17px; background:#fff; border:1px solid var(--rule); }
table.t th, table.t td { text-align:left; padding:13px 16px; border-bottom:1px solid var(--rule); }
table.t th { background:var(--graphite); color:#fff; font-weight:600; font-size:13px; letter-spacing:.09em; text-transform:uppercase; }
.empty { padding:30px; background:#fff; border:1px dashed #b9b4a6; color:var(--muted); text-align:center; }
.meta { margin-top:14px; font-size:14px; color:var(--muted); }
.credits li { margin:14px 0; }
.credits img { width:140px; aspect-ratio:16/9; object-fit:cover; float:left; margin-right:16px; }
.credits li::after { content:""; display:block; clear:both; }

/* footer */
footer { background:var(--graphite); color:var(--muted-d); padding-block:48px 36px; border-top:3px solid var(--red); font-size:16px; }
footer .wrap { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:36px 48px; }
footer .f-brand p { margin-top:12px; max-width:340px; }
footer nav { display:flex; flex-direction:column; gap:8px; }
footer nav a { text-decoration:none; color:#d4dbe4; } footer nav a:hover { color:#fff; text-decoration:underline; }
footer small { grid-column:1/-1; padding-top:24px; border-top:1px solid rgba(255,255,255,.14); font-size:13px; line-height:1.55; max-width:860px; }
footer small a { text-decoration:underline; }

@media (max-width:960px) {
  .links { display:none; } .top .wrap { gap:12px; } .top .btn { margin-left:auto; }
  .sec { padding-block:60px; }
  .split, .split.rev { grid-template-columns:1fr; gap:30px; } .split.rev .shot { order:0; }
  .facts .wrap { grid-template-columns:1fr 1fr; } .facts .c:nth-child(2) { border-right:0; margin-right:0; } .facts .c { border-bottom:1px solid rgba(255,255,255,.14); }
  .shots { grid-template-columns:1fr; }
  .steps { grid-template-columns:1fr 1fr; gap:10px 0; }
  .stations { flex-direction:column; margin-top:34px; padding-left:26px; }
  .stations li { text-align:left; padding:0 0 22px 28px; }
  .stations li::before { top:0; bottom:0; left:-14px; right:auto; width:4px; height:auto; }
  .stations li:first-child::before { top:8px; left:-14px; } .stations li:last-child::before { bottom:calc(100% - 22px); right:auto; left:-14px; }
  .stations li::after { top:3px; left:-14px; margin-left:-6px; }
  footer .wrap { grid-template-columns:1fr 1fr; } footer .f-brand { grid-column:1/-1; }
}
@media (max-width:560px) {
  body { font-size:17px; }
  .steps { grid-template-columns:1fr; } .hero .cta .btn { flex:1 1 100%; }
  .hero::after { background:linear-gradient(0deg,rgba(10,14,20,.88) 0%,rgba(10,14,20,.4) 100%); } .hero .in { align-items:flex-end; padding-bottom:36px; }
  .band .btn { width:100%; } footer .wrap { grid-template-columns:1fr; }
  .credits img { float:none; margin:0 0 8px; width:100%; max-width:280px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .btn { transition:none; } }

/* ---- accounts, panel, forms ---- */
.notice { background:var(--red); color:#fff; font-size:15px; text-align:center; padding:8px 0; }
.top .me { display:flex; align-items:center; gap:9px; text-decoration:none; color:#e6ebf1; font-weight:500; font-size:15px; max-width:200px; }
.top .me span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.av { border-radius:50%; object-fit:cover; background:var(--graphite2); flex:none; }
.av-ph { display:inline-grid; place-items:center; width:1.8em; height:1.8em; background:var(--graphite2); color:#fff; font:700 14px/1 var(--head); border-radius:50%; }
.flash { padding:12px 16px; margin-bottom:18px; border-left:4px solid var(--ok); background:#e8f4ee; color:#17432f; }
.flash.err { border-color:var(--red); background:#fbe9ec; color:#6b0f1d; }
.panel-grid { display:grid; grid-template-columns:230px 1fr; gap:44px; align-items:start; }
.side { display:flex; flex-direction:column; border-top:3px solid var(--ink); position:sticky; top:90px; }
.side a, .linklike { padding:12px 4px; border-bottom:1px solid var(--rule); text-decoration:none; font-weight:500; color:var(--ink); }
.side a:hover { color:var(--red); }
.side a[aria-current] { color:var(--red); font-weight:600; }
.linklike { background:none; border:0; border-bottom:1px solid var(--rule); text-align:left; font:500 18px/1.6 var(--body); cursor:pointer; width:100%; color:var(--muted); }
.panel-main { min-width:0; }
.panel-main > .cards { margin-top:0; }
h2.ph { font:700 1.7rem/1.1 var(--head); text-transform:uppercase; letter-spacing:.01em; margin:38px 0 14px; }
h2.ph:first-child { margin-top:0; }
.form { display:grid; gap:16px; max-width:640px; margin:0 0 22px; }
.form.inline { display:flex; flex-wrap:wrap; gap:10px; align-items:center; max-width:none; }
.form label { display:grid; gap:6px; font-weight:600; font-size:15px; }
.form label.check { display:flex; align-items:center; gap:10px; font-weight:500; font-size:17px; }
.form input, .form select, .form textarea, form.inline input { font:400 17px/1.4 var(--body); padding:11px 13px; border:1px solid #b9b4a6; background:#fff; color:var(--ink); border-radius:2px; width:100%; }
.form.inline input, .form.inline select, form.inline input { width:auto; min-width:0; }
.form input[type=checkbox] { width:auto; }
.form textarea { resize:vertical; }
.form input:focus, .form select:focus, .form textarea:focus { outline:2px solid var(--red); outline-offset:1px; }
form.inline { display:inline-flex; gap:8px; align-items:center; flex-wrap:wrap; }
.row { display:flex; gap:10px; flex-wrap:wrap; }
.badge { display:inline-block; padding:2px 9px; font:600 12px/1.6 var(--body); letter-spacing:.06em; text-transform:uppercase; background:var(--paper2); border:1px solid var(--rule); color:var(--ink); }
.b-open, .b-ban, .b-rejected, .b-revoked { background:#fbe9ec; border-color:#efb7c0; color:#7a1022; }
.b-answered, .b-accepted, .b-active { background:#e8f4ee; border-color:#b5dcc8; color:#17432f; }
.b-review, .b-warning, .b-mute, .b-kick { background:#fff3d9; border-color:#ecd49a; color:#6a4a00; }
.b-closed, .b-expired { background:#eceae3; color:#555; }
.r-owner, .r-admin { background:var(--red); border-color:var(--red); color:#fff; }
.r-moderator { background:var(--graphite); border-color:var(--graphite); color:#fff; }
.r-support { background:#2f4a66; border-color:#2f4a66; color:#fff; }
.profile { display:flex; gap:20px; align-items:center; margin-bottom:26px; }
.profile h2 { font:700 2rem/1.1 var(--head); text-transform:uppercase; }
.thread { display:grid; gap:14px; margin:18px 0 26px; }
.msg { border:1px solid var(--rule); background:#fff; padding:14px 18px; margin-bottom:14px; }
.msg.staff { border-left:4px solid var(--red); }
.msg-h { display:flex; gap:10px; align-items:center; font-size:15px; margin-bottom:6px; }
.msg-h span { margin-left:auto; color:var(--muted); font-size:13px; }
.msg-b p + p { margin-top:8px; }
.card.wide { margin-bottom:16px; border-top-width:3px; }
.card.wide .form { margin-top:12px; }
.filters { display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin-bottom:16px; font-size:15px; color:var(--muted); }
.filters a, .pager a { padding:5px 12px; border:1px solid var(--rule); background:#fff; text-decoration:none; color:var(--ink); font-size:15px; }
.filters a.on, .pager a.on { background:var(--ink); color:#fff; border-color:var(--ink); }
.pager { display:flex; gap:6px; flex-wrap:wrap; margin-top:18px; }
.secret { font:600 1.6rem/1.3 ui-monospace,Consolas,monospace; letter-spacing:.08em; background:#fff; border:1px dashed #b9b4a6; padding:14px 18px; display:inline-block; margin:6px 0 12px; word-break:break-all; }
.news-list { display:grid; gap:0; max-width:820px; }
.news-item { padding:22px 0; border-bottom:1px solid var(--rule); }
.news-item h2 { font:700 1.9rem/1.1 var(--head); text-transform:uppercase; margin:4px 0 8px; }
.news-item h2 a { text-decoration:none; } .news-item h2 a:hover { color:var(--red); }
.news-item p { color:var(--muted); }
.links-list { padding-left:20px; } .links-list li { margin:6px 0; }
.btn.dark.sm { padding:9px 14px; }
@media (max-width:860px) {
  .panel-grid { grid-template-columns:1fr; gap:24px; } .side { position:static; flex-direction:row; flex-wrap:wrap; border-top:0; gap:4px 18px; }
  .side a, .linklike { border-bottom:0; padding:6px 0; width:auto; }
  .top .me span { display:none; }
  table.t { display:block; overflow-x:auto; }
}

/* ---- landing page (numbered sections) ---- */
.util { background:#0b1118; color:var(--muted-d); font-size:13px; letter-spacing:.02em; }
.util .wrap { display:flex; justify-content:space-between; gap:20px; padding-block:7px; }
.util a { text-decoration:none; margin-left:20px; color:#c9d1db; } .util a:hover { color:#fff; text-decoration:underline; }
.btn.line-d { color:#fff; border-color:rgba(255,255,255,.35); } .btn.line-d:hover { background:#fff; color:var(--ink); border-color:#fff; }
.top { top:0; }
.dot { display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--ok); flex:none; }
.dot.off { background:#c0453f; }
.hero .kicker { display:inline-flex; align-items:center; gap:10px; font:600 13px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; color:#d8dee6; margin-bottom:20px; }
.hero .tagline { font:600 clamp(1.15rem,2.2vw,1.6rem)/1.3 var(--head); letter-spacing:.06em; text-transform:uppercase; color:#fff; margin-top:6px; }
.hero .tagline::before { content:""; display:block; width:56px; height:4px; background:var(--red); margin-bottom:16px; }
.hero p.lead { margin-top:14px; }
.eyebrow span { color:var(--ink); margin-right:10px; padding-right:10px; border-right:2px solid var(--red); }
.dark .eyebrow span { color:#fff; }
.wrap.two { display:grid; grid-template-columns:1.3fr 1fr; gap:64px; align-items:center; }
.sec h2 + .intro { margin-top:16px; }
.ticks { list-style:none; padding:0; margin:24px 0 0; display:grid; gap:10px; }
.ticks li { padding-left:30px; position:relative; }
.ticks li::before { content:""; position:absolute; left:2px; top:.45em; width:12px; height:7px; border-left:3px solid var(--red); border-bottom:3px solid var(--red); transform:rotate(-45deg); }
.livecard { background:var(--graphite); color:#fff; padding:26px 28px 22px; border-top:4px solid var(--red); box-shadow:0 24px 60px -30px rgba(0,0,0,.55); }
.live-h { display:flex; align-items:center; gap:10px; padding-bottom:16px; border-bottom:1px solid rgba(255,255,255,.14); font-size:16px; }
.live-h a { margin-left:auto; color:#c9d1db; font-size:14px; }
.live-g { display:grid; grid-template-columns:1fr 1fr; gap:0; }
.live-g div { padding:20px 0 18px; border-bottom:1px solid rgba(255,255,255,.1); }
.live-g div:nth-child(odd) { padding-right:18px; border-right:1px solid rgba(255,255,255,.1); } .live-g div:nth-child(even) { padding-left:22px; }
.live-g b { display:block; font:700 2.6rem/1 var(--head); }
.live-g span { font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-d); }
.live-f { margin-top:14px; font-size:13px; color:var(--muted-d); }
.sys { display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:44px; border-top:1px solid rgba(255,255,255,.2); }
.sys article { padding:28px 28px 8px 0; margin-right:28px; border-right:1px solid rgba(255,255,255,.14); }
.sys article:last-child { border-right:0; margin-right:0; }
.sys .n { font:700 14px/1 var(--body); letter-spacing:.14em; color:#ff6b7d; }
.sys h3 { font:700 1.7rem/1.1 var(--head); text-transform:uppercase; margin:14px 0 10px; }
.sys p { color:var(--muted-d); font-size:16.5px; }
.more { margin-top:36px; }
.price { display:grid; grid-template-columns:1fr 1fr; margin-top:34px; background:#fff; border:1px solid var(--rule); border-top:4px solid var(--red); }
.price-main { padding:34px 36px; border-right:1px solid var(--rule); }
.price-t { display:block; font:700 3.4rem/1 var(--head); text-transform:uppercase; margin-bottom:12px; }
.price-main p { color:var(--muted); margin-bottom:22px; max-width:380px; }
.price-list { list-style:none; margin:0; padding:34px 36px; display:grid; gap:14px; align-content:center; }
.price-list li { padding-left:30px; position:relative; }
.price-list li::before { content:""; position:absolute; left:2px; top:.45em; width:12px; height:7px; border-left:3px solid var(--red); border-bottom:3px solid var(--red); transform:rotate(-45deg); }
.req-h { font:700 1.5rem/1 var(--head); text-transform:uppercase; margin:46px 0 16px; }
.req { display:grid; grid-template-columns:1fr auto 1fr auto 1fr; gap:14px; align-items:stretch; }
.req article { background:#fff; border:1px solid var(--rule); padding:22px 24px; display:flex; flex-direction:column; gap:6px; }
.req b { font:700 1.35rem/1.15 var(--head); text-transform:uppercase; }
.req p { color:var(--muted); font-size:16px; flex:1; }
.req a { color:var(--red); font-weight:600; font-size:15px; }
.req-and { align-self:center; font:600 13px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
footer .wrap { grid-template-columns:1.5fr 1fr 1fr 1fr; }
footer h3 { font:600 13px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; color:#fff; margin-bottom:6px; }
footer .f-soc { margin-top:14px; } footer .f-soc a { color:#d4dbe4; text-decoration:underline; }
@media (max-width:960px) {
  .wrap.two { grid-template-columns:1fr; gap:34px; }
  .sys { grid-template-columns:1fr 1fr; } .sys article { padding:24px 20px 10px 0; margin-right:0; border-right:0; border-bottom:1px solid rgba(255,255,255,.14); }
  .price { grid-template-columns:1fr; } .price-main { border-right:0; border-bottom:1px solid var(--rule); }
  .req { grid-template-columns:1fr; } .req-and { justify-self:start; }
  footer .wrap { grid-template-columns:1fr 1fr; }
  .util .wrap > span:first-child { display:none; } .util .wrap { justify-content:flex-end; }
}
@media (max-width:560px) { .sys { grid-template-columns:1fr; } footer .wrap { grid-template-columns:1fr; } .util a { margin-left:14px; } }

/* ---- downloads / releases ---- */
.rel-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:22px; margin-bottom:18px; }
.rel { background:#fff; border:1px solid var(--rule); border-top:4px solid var(--red); padding:28px 30px; }
.rel-k { font:600 13px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--red); margin-bottom:10px; }
.rel h2 { font:700 3rem/1 var(--head); margin-bottom:8px; }
.rel-log { margin:16px 0 20px; padding-left:14px; border-left:2px solid var(--rule); color:#3c4652; }
.rel-hash { margin-top:18px; font-size:13px; color:var(--muted); display:grid; gap:4px; }
code { font:500 .9em ui-monospace,Consolas,monospace; background:var(--paper2); padding:1px 6px; word-break:break-all; }
.rel-hash code { display:block; padding:8px 10px; }
td.hash { font:500 13px ui-monospace,Consolas,monospace; color:var(--muted); }
td.acts form { display:flex; gap:6px; flex-wrap:nowrap; }

/* ======================= application shell (account + admin) ======================= */
body.app { background:#eef0f3; display:grid; grid-template-columns:250px 1fr; min-height:100vh; font-size:16px; line-height:1.5; color:#1b222b; }
.app .nav { background:#0f1620; color:#c3ccd8; padding:22px 14px 16px; position:sticky; top:0; height:100vh; overflow-y:auto; display:flex; flex-direction:column; border-right:1px solid #000; }
.app .nav .logo { font-size:22px; padding:0 10px; }
.app .nav-area { margin:18px 10px 6px; font:600 11px/1 var(--body); letter-spacing:.16em; text-transform:uppercase; color:#ff6b7d; }
.app .nav nav { display:flex; flex-direction:column; gap:2px; margin-top:6px; }
.app .nav-g { margin:18px 10px 6px; font:600 11px/1 var(--body); letter-spacing:.16em; text-transform:uppercase; color:#6d7a8b; }
.app .nav nav a { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 10px; border-radius:4px; text-decoration:none; color:#c3ccd8; font-weight:500; font-size:15.5px; border-left:3px solid transparent; }
.app .nav nav a:hover { background:#18222f; color:#fff; }
.app .nav nav a[aria-current] { background:#1c2837; color:#fff; border-left-color:var(--red); }
.app .nav nav em { font:700 12px/1 var(--body); font-style:normal; background:var(--red); color:#fff; border-radius:10px; padding:3px 8px; }
.app .nav-foot { margin-top:auto; padding-top:18px; display:flex; flex-direction:column; gap:2px; border-top:1px solid #1d2733; }
.app .nav-foot > a { padding:7px 10px; text-decoration:none; color:#9aa6b6; font-size:14.5px; }
.app .nav-foot > a:hover { color:#fff; }
.app .nav-user { display:flex; gap:10px; align-items:center; padding:12px 10px 6px; }
.app .nav-user strong { display:block; color:#fff; font-size:14.5px; line-height:1.2; max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.app .nav-user span { font-size:12.5px; color:#8794a5; }
.app .nav-foot .linklike { padding:7px 10px; border:0; color:#9aa6b6; font:500 14.5px/1.4 var(--body); text-align:left; }
.app .nav-foot .linklike:hover { color:#fff; }
.app .app-main { min-width:0; }
.app .bar { background:#fff; border-bottom:1px solid #dde1e6; padding:20px 36px 18px; }
.app .bar .crumbs { margin:0 0 4px; font-size:13px; color:#6a7684; }
.app .bar .crumbs a { color:#6a7684; } .app .bar .crumbs a:hover { color:var(--red); }
.app .bar h1 { font:700 2rem/1.1 var(--head); text-transform:uppercase; letter-spacing:.01em; color:#0f1620; }
.app .app-content { padding:28px 36px 64px; max-width:1240px; }

/* content blocks inside the shell */
.app h2.ph { font:700 1.15rem/1.2 var(--body); letter-spacing:.08em; text-transform:uppercase; color:#3a4654; margin:34px 0 12px; padding-bottom:10px; border-bottom:1px solid #dde1e6; }
.app h2.ph:first-child, .app .flash + h2.ph { margin-top:0; }
.app .cards { grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; margin:0 0 8px; }
.app .card { border:1px solid #dde1e6; border-top:3px solid #0f1620; padding:16px 18px; box-shadow:0 1px 2px rgba(15,22,32,.04); }
.app .card b { font:700 2.3rem/1 var(--head); color:#0f1620; }
.app .card span { display:block; margin-top:6px; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:#6a7684; }
.app .card.wide { border-top-width:1px; padding:18px 20px; }
.app .card.wide h3 { font:700 1.3rem/1.2 var(--head); text-transform:none; }
.app table.t { font-size:15px; border-color:#dde1e6; box-shadow:0 1px 2px rgba(15,22,32,.04); }
.app table.t th { background:#f6f7f9; color:#5a6574; border-bottom:1px solid #dde1e6; padding:10px 14px; font-size:11.5px; }
.app table.t td { padding:10px 14px; border-bottom:1px solid #eceff2; vertical-align:middle; }
.app table.t tbody tr:hover { background:#f9fafb; }
.app table.t tbody tr:last-child td { border-bottom:0; }
.app table.t a { color:#0f1620; font-weight:600; text-decoration:none; } .app table.t a:hover { color:var(--red); text-decoration:underline; }
.app .empty { background:#fff; border:1px dashed #c8cfd6; color:#6a7684; padding:26px; }
.app .meta { color:#6a7684; font-size:14px; }
.app .filters a, .app .pager a { border-radius:14px; padding:4px 13px; font-size:14px; }
.app .form { max-width:680px; background:#fff; border:1px solid #dde1e6; padding:22px 24px; box-shadow:0 1px 2px rgba(15,22,32,.04); }
.app .form.inline { background:none; border:0; padding:0; box-shadow:none; }
.app .form label { font-size:14px; color:#2b3541; }
.app .form input, .app .form select, .app .form textarea { font-size:16px; border-color:#c3cad2; }
.app .btn { border-radius:3px; padding:11px 20px; font-size:14px; }
.app .btn.sm { padding:7px 12px; font-size:12.5px; }
.app .btn.dark { color:#0f1620; border-color:#aeb7c1; background:#fff; } .app .btn.dark:hover { background:#0f1620; color:#fff; border-color:#0f1620; }
.app .msg { border-color:#dde1e6; } .app .msg.staff { border-left-color:var(--red); }
.app .profile { background:#fff; border:1px solid #dde1e6; padding:20px 24px; margin-bottom:20px; }
.app .profile h2 { font-size:1.7rem; }
.app .facts-list { background:#fff; border:1px solid #dde1e6; border-top:0; padding:0 18px; }
.app .facts-list li { font-size:15.5px; }
.app .flash { border-radius:0; }
.app .links-list { background:#fff; border:1px solid #dde1e6; padding:14px 14px 14px 36px; }
.app code { background:#e7ebef; }

/* dashboard */
.dash { display:grid; grid-template-columns:1.4fr 1fr; gap:22px; margin-top:26px; align-items:start; }
.panelbox { background:#fff; border:1px solid #dde1e6; box-shadow:0 1px 2px rgba(15,22,32,.04); }
.panelbox > h3 { font:600 12px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; color:#5a6574; padding:15px 18px; border-bottom:1px solid #eceff2; display:flex; justify-content:space-between; align-items:center; }
.panelbox > h3 a { font-size:12px; letter-spacing:.06em; text-transform:none; color:var(--red); }
.queue { list-style:none; margin:0; padding:0; }
.queue li a { display:flex; justify-content:space-between; align-items:center; padding:13px 18px; border-bottom:1px solid #eceff2; text-decoration:none; color:#1b222b; font-weight:500; }
.queue li:last-child a { border-bottom:0; } .queue li a:hover { background:#f9fafb; }
.queue b { font:700 1.4rem/1 var(--head); min-width:34px; text-align:right; } .queue b.hot { color:var(--red); }
.chart { padding:12px 18px 6px; }
.chart svg { width:100%; height:auto; display:block; }
.chart .bar-r { fill:#0f1620; } .chart .bar-t { fill:var(--red); } .chart .ax { stroke:#dde1e6; stroke-width:1; } .chart text { font:500 10px var(--body); fill:#6a7684; }
.chart-k { display:flex; gap:16px; font-size:13px; color:#5a6574; padding:0 18px 14px; } .chart-k i { display:inline-block; width:10px; height:10px; margin-right:6px; vertical-align:-1px; }
.activity { list-style:none; margin:0; padding:0; }
.activity li { padding:10px 18px; border-bottom:1px solid #eceff2; font-size:14.5px; display:flex; gap:12px; }
.activity li:last-child { border-bottom:0; } .activity time { color:#6a7684; font-size:12.5px; min-width:92px; padding-top:2px; } .activity b { font-weight:600; }
@media (max-width:960px) {
  body.app { display:block; }
  .app .nav { position:static; height:auto; padding:14px 14px 10px; border-right:0; flex-direction:column; }
  .app .nav nav { flex-direction:row; flex-wrap:wrap; } .app .nav-g { display:none; }
  .app .nav nav a { border-left:0; border-bottom:2px solid transparent; padding:7px 10px; } .app .nav nav a[aria-current] { border-bottom-color:var(--red); }
  .app .nav-foot { margin-top:10px; padding-top:8px; flex-direction:row; flex-wrap:wrap; align-items:center; gap:4px 12px; }
  .app .nav-user { padding:4px 6px; margin-left:auto; }
  .app .bar, .app .app-content { padding-inline:18px; }
  .dash { grid-template-columns:1fr; }
  .app table.t { display:block; overflow-x:auto; }
}
.k-r { background:#0f1620; } .k-t { background:var(--red); }
.app .panelbox table.t, .app .panelbox .facts-list { border:0; box-shadow:none; } .app .panelbox .empty { border:0; margin:0; }
.app .panelbox.spaced { margin-top:22px; }
.app .facts-list.flat { margin:0; padding:0 18px; }

/* ======================= dark theme for the panel (default; the sidebar button switches it) ======================= */
body.app.dark { background:#0b0f14; color:#e6ebf1; color-scheme:dark; }
.dark .nav { background:#080b10; border-right-color:#1a2330; }
.dark .nav-foot { border-top-color:#1a2330; }
.dark .bar { background:#10161d; border-bottom-color:#232d3a; }
.dark .bar h1 { color:#fff; }
.dark .bar .crumbs, .dark .bar .crumbs a { color:#8a97a7; } .dark .bar .crumbs a:hover { color:#ff6b7d; }
.dark h2.ph { color:#aab5c3; border-bottom-color:#232d3a; }
.dark .card { background:#131a22; border-color:#232d3a; border-top-color:#3a4757; box-shadow:none; }
.dark .card b { color:#fff; } .dark .card span { color:#8a97a7; }
.dark .card.wide h3 { color:#fff; }
.dark table.t { background:#131a22; border-color:#232d3a; box-shadow:none; }
.dark table.t th { background:#182029; color:#9aa6b6; border-bottom-color:#232d3a; }
.dark table.t td { border-bottom-color:#1d2631; color:#d8dfe8; }
.dark table.t tbody tr:hover { background:#17202a; }
.dark table.t a { color:#fff; } .dark table.t a:hover { color:#ff6b7d; }
.dark .empty { background:#131a22; border-color:#2f3b4b; color:#8a97a7; }
.dark .meta, .dark .app-content .meta { color:#8a97a7; }
.dark .filters, .dark .filters a, .dark .pager a { color:#c6cfda; }
.dark .filters a, .dark .pager a { background:#131a22; border-color:#2a3543; }
.dark .filters a.on, .dark .pager a.on { background:#e6ebf1; color:#0b0f14; border-color:#e6ebf1; }
.dark .form { background:#131a22; border-color:#232d3a; box-shadow:none; }
.dark .form.inline { background:none; }
.dark .form label { color:#c6cfda; }
.dark .form input, .dark .form select, .dark .form textarea, .dark form.inline input { background:#0e141b; color:#e6ebf1; border-color:#2f3b4b; }
.dark .form input::placeholder, .dark .form textarea::placeholder { color:#667384; }
.dark .btn.dark { background:transparent; color:#e6ebf1; border-color:#3a4757; }
.dark .btn.dark:hover { background:#e6ebf1; color:#0b0f14; border-color:#e6ebf1; }
.dark .msg { background:#131a22; border-color:#232d3a; } .dark .msg.staff { border-left-color:var(--red); }
.dark .msg-h span { color:#8a97a7; }
.dark .profile, .dark .panelbox, .dark .links-list, .dark .facts-list { background:#131a22; border-color:#232d3a; box-shadow:none; }
.dark .profile h2 { color:#fff; }
.dark .facts-list li { border-color:#232d3a; } .dark .facts-list span { color:#8a97a7; } .dark .facts-list strong { color:#e6ebf1; }
.dark .panelbox > h3 { color:#9aa6b6; border-bottom-color:#1d2631; } .dark .panelbox > h3 a { color:#ff6b7d; }
.dark .panelbox table.t, .dark .panelbox .facts-list { background:none; }
.dark .queue li a { color:#e6ebf1; border-bottom-color:#1d2631; } .dark .queue li a:hover { background:#17202a; }
.dark .queue b { color:#e6ebf1; } .dark .queue b.hot { color:#ff6b7d; }
.dark .activity li { border-bottom-color:#1d2631; color:#d8dfe8; } .dark .activity time { color:#8a97a7; }
.dark .chart .bar-r { fill:#e6ebf1; } .dark .chart .ax { stroke:#2a3543; } .dark .chart text { fill:#8a97a7; }
.dark .chart-k { color:#9aa6b6; } .dark .k-r { background:#e6ebf1; }
.dark .flash { background:#10261c; color:#bfe8d3; border-left-color:#2e9e6b; } .dark .flash.err { background:#2c1117; color:#f3c3cb; border-left-color:var(--red); }
.dark .badge { background:#1a2330; border-color:#2f3b4b; color:#e6ebf1; }
.dark .b-open, .dark .b-ban, .dark .b-rejected, .dark .b-revoked { background:#2c1117; border-color:#6b2230; color:#ffb3be; }
.dark .b-answered, .dark .b-accepted, .dark .b-active { background:#10261c; border-color:#1f5a3d; color:#9fe0bf; }
.dark .b-review, .dark .b-warning, .dark .b-mute, .dark .b-kick { background:#2d2410; border-color:#6b5516; color:#f0d58a; }
.dark .b-closed, .dark .b-expired { background:#1a2330; border-color:#2f3b4b; color:#9aa6b6; }
.dark code { background:#1a2330; color:#d8dfe8; }
.dark .secret { background:#131a22; border-color:#3a4757; color:#fff; }
.dark td.hash { color:#8a97a7; }
.dark .app-content p { color:#c6cfda; }
.dark .app-content strong { color:#fff; }
.nav-theme { background:none; border:0; text-align:left; padding:7px 10px; color:#9aa6b6; font:500 14.5px/1.4 var(--body); cursor:pointer; width:100%; }
.nav-theme:hover { color:#fff; }
.dark .r-owner, .dark .r-admin { background:var(--red); border-color:var(--red); color:#fff; } .dark .r-moderator { background:#2b3a4d; border-color:#3d5068; color:#fff; } .dark .r-support { background:#1f3a55; border-color:#2d5278; color:#fff; }
.dash.one { grid-template-columns:1fr; }

/* sidebar footer: user card + a tidy 2x2 grid of actions */
.app .nav-foot { padding-top:14px; gap:10px; border-top:1px solid #1d2733; }
.app .nav-foot .nav-user { margin:0; padding:10px 12px; background:#141d28; border:1px solid #1f2a38; border-radius:6px; gap:11px; }
.app .nav-foot .nav-user strong { max-width:140px; font-size:14.5px; }
.app .nav-acts { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.app .nav-acts form { margin:0; display:contents; }
.app .nav-acts a, .app .nav-act { display:flex; align-items:center; justify-content:center; min-height:36px; padding:6px 8px; border:1px solid #243040; border-radius:4px; background:transparent; color:#b6c0cd; font:500 13.5px/1.2 var(--body); text-decoration:none; text-align:center; cursor:pointer; width:100%; }
.app .nav-acts a:hover, .app .nav-act:hover { background:#18222f; color:#fff; border-color:#34445a; }
.app .nav-act.out:hover { background:#2c1117; border-color:#6b2230; color:#ffb3be; }
.dark .app-content a { color:inherit; }
@media (max-width:960px) { .app .nav-foot { flex-direction:row; flex-wrap:wrap; align-items:center; } .app .nav-foot .nav-user { flex:1 1 220px; } .app .nav-acts { flex:2 1 320px; grid-template-columns:repeat(4,1fr); } }



/* ---- online map: full-screen Leaflet application ---- */
body.map-app { margin:0; height:100vh; height:100dvh; display:grid; grid-template-rows:72px 1fr; background:#000; color:#fff; font-size:15px; overflow:hidden; }
.mbar { display:flex; align-items:center; gap:12px; padding:0 20px; background:#000; border-bottom:1px solid #1d1d1d; position:relative; z-index:1200; }
.mbtn { width:44px; height:44px; flex:none; display:grid; place-items:center; background:transparent; color:#fff; border:2px solid #fff; border-radius:10px; cursor:pointer; text-decoration:none; padding:0; }
.mbtn:hover, .mbtn[aria-expanded=true] { background:#fff; color:#000; }
.mlogo img { display:block; width:46px; height:46px; border-radius:50%; background:#0a1220; border:2px solid #2b3a52; padding:3px; }
.mtitle { margin:0 6px 0 2px; font:800 1.85rem/1 var(--body); letter-spacing:-.01em; color:#fff; white-space:nowrap; } .mtitle span { color:#fff; }
.srv { position:relative; display:flex; align-items:center; gap:10px; margin-left:4px; }
.srvname { font:400 1.2rem/1 var(--body); color:#d4d4d4; }
.srv select { position:absolute; inset:0; width:100%; opacity:0; cursor:pointer; }
.sdot { width:20px; height:20px; border-radius:50%; background:#1fd47a; box-shadow:0 0 0 3px rgba(31,212,122,.18),0 0 14px rgba(31,212,122,.6); display:inline-block; } .sdot.off { background:#d9534f; box-shadow:0 0 0 3px rgba(217,83,79,.18); }
.mspace { flex:1; }
.mstat { display:flex; align-items:center; gap:20px; font:500 1.55rem/1 ui-monospace,Consolas,'Courier New',monospace; letter-spacing:.04em; }
.mstat .sep { width:1px; height:30px; background:#2c2c2c; }
.mstat .cnt { color:#27d17f; } .mstat .clk { color:#f2c230; }
.mstat .dte { display:grid; justify-items:center; gap:3px; } .mstat .dte b { font-weight:500; color:#cfcfcf; }
.flag { font:700 .72rem/1 var(--body); letter-spacing:.06em; font-style:normal; } .flag i { font-style:normal; } .flag i:nth-child(1) { color:#3b6fe0; } .flag i:nth-child(2) { color:#fcd116; } .flag i:nth-child(3) { color:#ce1126; }
.msearchbox { position:relative; }
.searchpop { position:absolute; right:0; top:54px; width:320px; background:#0d0d0d; border:1px solid #2c2c2c; border-radius:8px; padding:10px; box-shadow:0 18px 40px rgba(0,0,0,.6); }
.searchpop[hidden], .mpanel[hidden] { display:none; }
.searchpop input { width:100%; background:#000; color:#fff; border:1px solid #383838; border-radius:6px; padding:10px 12px; font:400 15px/1.2 var(--body); } .searchpop input:focus { outline:2px solid #ff3b4a; outline-offset:1px; }
.searchpop ul { list-style:none; margin:8px 0 0; padding:0; max-height:300px; overflow-y:auto; }
.searchpop li { display:grid; gap:1px; padding:9px 10px; border-radius:5px; cursor:pointer; } .searchpop li:hover { background:#1c1c1c; } .searchpop li b { font-weight:600; } .searchpop li span { color:#9a9a9a; font-size:13px; } .searchpop li.none { color:#9a9a9a; cursor:default; }
.mmain { position:relative; min-height:0; }
#map { position:absolute; inset:0; background:#0d0d0d; font-family:var(--body); } body.light-map #map { background:#e9e9e9; }
.mmain .leaflet-control-zoom { border:0; box-shadow:0 2px 8px rgba(0,0,0,.5); } .mmain .leaflet-control-zoom a { width:32px; height:32px; line-height:32px; font-size:20px; font-weight:700; color:#000; background:#fff; }
.leaflet-control-attribution { background:rgba(0,0,0,.65) !important; color:#bdbdbd !important; font-size:11.5px; } .leaflet-control-attribution a { color:#8ab4f8 !important; }
body.light-map .leaflet-control-attribution { background:rgba(255,255,255,.8) !important; color:#333 !important; } body.light-map .leaflet-control-attribution a { color:#0b5fd1 !important; }

/* station and train markers */
.stn { display:grid; place-items:center; background:#080808; color:#fff; border:2px solid #fff; border-radius:7px; box-shadow:0 2px 6px rgba(0,0,0,.6); cursor:pointer; }
.stn.term { border-color:#ff3b4a; } .stn:hover { background:#ff3b4a; }
body.light-map .stn { background:#fff; color:#111; border-color:#111; } body.light-map .stn.term { border-color:#ff3b4a; } body.light-map .stn:hover { background:#ff3b4a; color:#fff; }
.leaflet-tooltip.stn-tip, .leaflet-tooltip.trn-tip { background:none; border:0; box-shadow:none; padding:0; font:600 13px/1.1 var(--body); color:#fff; text-shadow:0 0 3px #000,0 0 3px #000,0 0 6px #000; pointer-events:none; }
.leaflet-tooltip.stn-tip::before, .leaflet-tooltip.trn-tip::before { display:none; }
body.light-map .leaflet-tooltip.stn-tip { color:#111; text-shadow:0 0 3px #fff,0 0 3px #fff,0 0 6px #fff; }
.lbl-off .leaflet-tooltip.stn-tip { display:none; }
.leaflet-tooltip.trn-tip { font-weight:700; color:#fff; }
.trn { position:relative; }
.trn .core { position:absolute; left:6px; top:6px; width:14px; height:14px; border-radius:50%; background:#ff3b4a; border:2px solid #fff; box-sizing:border-box; box-shadow:0 0 0 1px rgba(0,0,0,.5); }
.trn .ring { position:absolute; inset:0; border-radius:50%; background:rgba(255,59,74,.38); animation:ping 2.2s ease-out infinite; }
.trn.sel .core { width:18px; height:18px; left:4px; top:4px; }
@keyframes ping { 0% { transform:scale(.55); opacity:.95; } 100% { transform:scale(1.9); opacity:0; } }
@media (prefers-reduced-motion:reduce) { .trn .ring { animation:none; } }

/* popups */
.rw-pop .leaflet-popup-content-wrapper { background:#0d0d0d; color:#fff; border-radius:6px; border-top:3px solid #ff3b4a; box-shadow:0 16px 40px rgba(0,0,0,.6); }
.rw-pop .leaflet-popup-tip { background:#0d0d0d; } .rw-pop .leaflet-popup-close-button { color:#9a9a9a; } .rw-pop .leaflet-popup-close-button:hover { color:#fff; }
.rw-pop .leaflet-popup-content { margin:14px 18px 12px; width:260px !important; font-family:var(--body); }
.pop .ckind { font:600 11px/1 var(--body); letter-spacing:.16em; text-transform:uppercase; color:#ff6b7d; margin:0; }
.pop h2 { font:700 1.7rem/1.1 var(--head); text-transform:uppercase; color:#fff; margin:6px 0 10px; }
.pop .crow { display:flex; justify-content:space-between; gap:14px; padding:6px 0; border-top:1px solid #232323; font-size:14px; } .pop .crow span { color:#9a9a9a; } .pop .crow strong { color:#eee; font-weight:600; text-align:right; }
.pop .cmuted { color:#9a9a9a; margin:0; }

/* list panel (menu button) */
.mpanel { position:absolute; left:14px; top:14px; bottom:14px; width:300px; z-index:1100; background:rgba(0,0,0,.93); border:1px solid #2a2a2a; border-radius:8px; display:flex; flex-direction:column; backdrop-filter:blur(6px); overflow:hidden; }
.mtabs { display:grid; grid-template-columns:1fr 1fr; border-bottom:1px solid #2a2a2a; }
.mtabs button { background:none; border:0; border-bottom:2px solid transparent; color:#9a9a9a; padding:14px 8px 12px; font:600 13px/1 var(--body); letter-spacing:.08em; text-transform:uppercase; cursor:pointer; }
.mtabs button b { margin-left:6px; background:#262626; color:#fff; border-radius:9px; padding:2px 7px; font-size:11.5px; }
.mtabs button[aria-selected=true] { color:#fff; border-bottom-color:#ff3b4a; }
.mlist { list-style:none; margin:0; padding:0; overflow-y:auto; flex:1; }
.mlist li { padding:11px 16px; border-bottom:1px solid #1d1d1d; cursor:pointer; display:grid; gap:2px; }
.mlist li:hover, .mlist li.on { background:#181818; } .mlist li.on { box-shadow:inset 3px 0 0 #ff3b4a; }
.mlist li b { color:#fff; font-weight:600; font-size:15px; } .mlist li span { color:#9a9a9a; font-size:13px; }
.mlist li.empty { background:none; border:0; border-bottom:1px solid #1d1d1d; padding:16px; text-align:left; cursor:default; color:#9a9a9a; }
.mnojs { position:absolute; inset:auto 14px 20px 14px; color:#ddd; z-index:1100; }

@media (max-width:1100px) { .mtitle { font-size:1.4rem; } .mstat { font-size:1.25rem; gap:14px; } .mstat .dte { display:none; } .mstat .sep:last-of-type { display:none; } }
@media (max-width:860px) {
  body.map-app { grid-template-rows:60px 1fr; }
  .mbar { gap:8px; padding:0 10px; } .mbtn { width:38px; height:38px; border-width:1.5px; }
  .mlogo, .mtitle { display:none; }
  .srvname { font-size:1rem; } .sdot { width:16px; height:16px; }
  .mstat { font-size:1.05rem; gap:10px; } .mstat .sep { height:22px; }
  .searchpop { position:fixed; left:10px; right:10px; top:64px; width:auto; }
  .mpanel { top:auto; left:0; right:0; bottom:0; width:auto; height:42%; border-radius:12px 12px 0 0; }
}

/* dark theme = OpenStreetMap tiles inverted and toned down; light theme = tiles as they are */
body.dark-map #map .leaflet-tile-pane { filter:invert(1) hue-rotate(180deg) brightness(.82) contrast(.92) saturate(.35); }
body.dark-map #map { background:#121212; }