:root {
  color-scheme: dark;
  --bg: #07090a;
  --panel: #0e1311;
  --panel-2: #141b18;
  --line: rgba(0, 230, 118, .18);
  --text: #e6f5ec;
  --muted: #8aa596;
  --neon: #00e676;
  --alert: #ff3d6e;
  --warn: #ffb300;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; }
#map { position: fixed; inset: 0; }

/* top bar */
.topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 10; display: flex; justify-content: space-between;
  align-items: center; padding: calc(var(--safe-t) + .6rem) .8rem .6rem;
  background: linear-gradient(var(--bg), rgba(7, 9, 10, .7) 70%, transparent); pointer-events: none; }
.topbar > * { pointer-events: auto; }
.brand { display: flex; align-items: center; gap: .5rem; }
.logo { font: 800 1.6rem/1 var(--mono); letter-spacing: .02em; color: var(--neon);
  text-shadow: 0 0 10px rgba(0, 230, 118, .6); }
.live { width: .55rem; height: .55rem; border-radius: 50%; background: #444; transition: background .3s; }
.live.on { background: var(--neon); box-shadow: 0 0 8px var(--neon); animation: blink 2.4s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .4; } }
.top-actions { display: flex; gap: .5rem; }
.icon-btn { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 4px; border: 1px solid var(--line);
  background: rgba(14, 19, 17, .9); color: var(--neon); font-size: 1.25rem; cursor: pointer; backdrop-filter: blur(4px); }
.icon-btn.small { width: 2.1rem; height: 2.1rem; font-size: 1.1rem; }
.icon-btn:active { transform: scale(.96); }

.counter { position: fixed; z-index: 10; top: calc(var(--safe-t) + 3.7rem); left: 50%; transform: translateX(-50%);
  padding: .3rem .8rem; border-radius: 3px; background: rgba(14, 19, 17, .92); border: 1px solid var(--line);
  font: .78rem var(--mono); color: var(--muted); white-space: nowrap; }
.counter b { color: var(--alert); }

/* main action */
.report-btn { position: fixed; z-index: 10; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--safe-b) + 1.2rem); padding: 1rem 1.8rem; white-space: nowrap; border: none; border-radius: 4px;
  background: var(--alert); color: #fff; font: 800 1rem var(--mono); letter-spacing: .12em; text-transform: uppercase;
  box-shadow: 0 0 0 1px rgba(255, 61, 110, .5), 0 8px 30px rgba(255, 61, 110, .45); cursor: pointer; }
.report-btn:active { transform: translateX(-50%) scale(.97); }

/* bottom sheet */
.sheet-backdrop { position: fixed; inset: 0; z-index: 20; background: rgba(0, 0, 0, .45); }
.sheet { position: fixed; z-index: 21; left: 0; right: 0; bottom: 0; max-height: 82vh; display: flex; flex-direction: column;
  background: var(--panel); border-top: 1px solid var(--line); border-radius: 12px 12px 0 0;
  padding: 0 1rem calc(var(--safe-b) + 1rem); box-shadow: 0 -10px 40px rgba(0, 0, 0, .6);
  animation: up .22s cubic-bezier(.2, .8, .2, 1); }
@media (min-width: 700px) { .sheet { left: 50%; right: auto; width: 520px; transform: translateX(-50%); } }
@keyframes up { from { translate: 0 40px; opacity: 0; } }
.sheet-grip { width: 2.6rem; height: .3rem; margin: .5rem auto .2rem; border-radius: 3px; background: #2a3530; }
.sheet-head { display: flex; align-items: center; gap: .5rem; padding: .3rem 0 .7rem; }
.sheet-head h2 { flex: 1; margin: 0; font: 700 .95rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.sheet-body { overflow-y: auto; overscroll-behavior: contain; }

.step-hint { margin: 0 0 .7rem; color: var(--muted); font-size: .85rem; }
.search { width: 100%; padding: .75rem .85rem; margin-bottom: .6rem; border-radius: 4px; border: 1px solid var(--line);
  background: #050706; color: var(--text); font-size: 1rem; }
.search:focus { outline: none; border-color: var(--neon); }
.list { display: flex; flex-direction: column; gap: .35rem; }
.item { display: flex; justify-content: space-between; align-items: center; gap: .6rem; width: 100%; text-align: left;
  padding: .8rem .85rem; border-radius: 4px; border: 1px solid var(--line); background: var(--panel-2); cursor: pointer; }
.item:active, .item:focus-visible { border-color: var(--neon); outline: none; }
.item small { color: var(--muted); font: .78rem var(--mono); white-space: nowrap; }
.item.skip { justify-content: center; color: var(--muted); border-style: dashed; background: transparent; }

.cat { margin: .8rem 0 .4rem; font: .72rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip { min-width: 3rem; padding: .55rem .75rem; border-radius: 4px; border: 1px solid var(--line); background: var(--panel-2);
  font: 700 .92rem var(--mono); cursor: pointer; }
.chip:active, .chip.on { background: var(--neon); color: #03140b; border-color: var(--neon); }
.chip.ubahn { border-color: rgba(64, 150, 255, .55); }
.chip.sbahn { border-color: rgba(0, 200, 120, .55); }
.chip.tram { border-color: rgba(255, 70, 70, .55); }
.chip.bahn { border-color: rgba(200, 200, 200, .4); }

.seg { display: flex; gap: .35rem; margin-bottom: .9rem; }
.seg button { flex: 1; padding: .7rem .4rem; border-radius: 4px; border: 1px solid var(--line); background: var(--panel-2);
  font: 600 .85rem var(--mono); cursor: pointer; }
.seg button.on { background: var(--neon); color: #03140b; border-color: var(--neon); }
.label { margin: .2rem 0 .4rem; font: .72rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.summary { margin: 0 0 1rem; padding: .7rem .85rem; border-left: 2px solid var(--neon); background: var(--panel-2); font-size: .92rem; }
.primary { width: 100%; padding: 1rem; border: none; border-radius: 4px; background: var(--alert); color: #fff;
  font: 800 .95rem var(--mono); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.primary:disabled { opacity: .5; }
.note { margin: .8rem 0 0; color: var(--muted); font-size: .78rem; line-height: 1.45; }

/* report details */
.detail-title { margin: 0 0 .2rem; font-size: 1.15rem; font-weight: 700; }
.detail-sub { margin: 0 0 .8rem; color: var(--muted); font: .85rem var(--mono); }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: 0 0 1rem; font-size: .9rem; }
.facts dt { color: var(--muted); font: .78rem var(--mono); text-transform: uppercase; letter-spacing: .06em; padding-top: .1rem; }
.facts dd { margin: 0; }
.meter { height: .45rem; border-radius: 3px; background: #1d2723; overflow: hidden; margin-top: .3rem; }
.meter i { display: block; height: 100%; background: linear-gradient(90deg, var(--warn), var(--alert)); }
.votes { display: flex; gap: .5rem; }
.votes button { flex: 1; padding: .85rem; border-radius: 4px; border: 1px solid var(--line); background: var(--panel-2);
  font: 700 .88rem var(--mono); cursor: pointer; }
.votes button.on.yes { background: var(--alert); border-color: var(--alert); color: #fff; }
.votes button.on.no { background: #34423b; border-color: #56685f; }
.votes button:disabled { opacity: .45; }

/* menu */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; margin-bottom: .8rem; text-align: center; }
.stats div { padding: .6rem .3rem; border-radius: 4px; background: var(--panel-2); border: 1px solid var(--line); }
.stats b { display: block; font: 800 1.15rem var(--mono); color: var(--neon); }
.stats span { font-size: .7rem; color: var(--muted); }
.menu-text h3 { margin: 1.1rem 0 .3rem; font: 700 .8rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--neon); }
.menu-text p, .menu-text li { color: #b7cbbf; font-size: .87rem; line-height: 1.5; }
.menu-text ul { padding-left: 1.1rem; margin: .3rem 0; }
.menu-text a { color: var(--neon); }
.danger-link { margin-top: 1rem; background: none; border: 1px solid rgba(255, 61, 110, .4); color: #ff8aa6;
  padding: .6rem .8rem; border-radius: 4px; font: .8rem var(--mono); cursor: pointer; }

.toast { position: fixed; z-index: 30; left: 50%; transform: translateX(-50%); bottom: calc(var(--safe-b) + 5.5rem);
  max-width: calc(100% - 2rem); padding: .7rem 1rem; border-radius: 4px; background: #101814; border: 1px solid var(--neon);
  color: var(--text); font-size: .9rem; box-shadow: 0 0 20px rgba(0, 230, 118, .25); }
.toast.err { border-color: var(--alert); box-shadow: 0 0 20px rgba(255, 61, 110, .3); }

.maplibregl-ctrl-attrib { background: rgba(7, 9, 10, .7) !important; color: #6d8578 !important; font-size: 10px; }
.maplibregl-ctrl-attrib a { color: #8fb3a0 !important; }
.maplibregl-ctrl-bottom-right { bottom: calc(var(--safe-b) + 4.8rem); }
@media (prefers-reduced-motion: reduce) { .sheet, .live.on { animation: none; } }