:root {
  --bg: #08111e;
  --panel: rgba(12, 20, 32, .975);
  --panel-2: #111c2c;
  --panel-3: #162335;
  --border: rgba(147, 197, 253, .12);
  --border-strong: rgba(56, 189, 248, .30);
  --text: #f5f9ff;
  --muted: #91a1b6;
  --accent: #18bff0;
  --accent-2: #2563eb;
  --accent-soft: rgba(24, 191, 240, .12);
  --online: #37d993;
  --offline: #64748b;
  --danger: #ff6b78;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body, #app { width:100%; height:100%; margin:0; overflow:hidden; background:var(--bg); color:var(--text); }
button, input { font:inherit; }
button { color:inherit; }
#app { display:flex; }

.sidebar {
  width:348px;
  min-width:348px;
  height:100%;
  z-index:5;
  background:linear-gradient(180deg,rgba(14,24,39,.985),rgba(10,17,29,.985));
  border-right:1px solid var(--border);
  display:flex;
  flex-direction:column;
  box-shadow:12px 0 40px rgba(0,0,0,.26);
  transition:width .22s ease,min-width .22s ease,border-color .22s ease;
  overflow:hidden;
}
.sidebar.collapsed { width:0; min-width:0; border-right-color:transparent; }
.brand-row { display:flex; align-items:center; }
.brand-row-logo {
  min-height:112px;
  padding:10px 20px 4px;
  justify-content:center;
  background:radial-gradient(circle at 50% 5%,rgba(13,173,255,.10),transparent 60%);
}
.brand-logo {
  display:block;
  width:205px;
  max-width:100%;
  height:auto;
  max-height:96px;
  object-fit:contain;
  filter:drop-shadow(0 8px 18px rgba(0,190,255,.15));
}
.search {
  display:flex;
  align-items:center;
  margin:8px 16px 10px;
  min-height:46px;
  background:#172435;
  border:1px solid rgba(148,163,184,.16);
  border-radius:13px;
  box-shadow:0 6px 20px rgba(0,0,0,.18);
  overflow:hidden;
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease;
}
.search:focus-within { border-color:rgba(24,191,240,.58); box-shadow:0 0 0 3px rgba(24,191,240,.10),0 8px 24px rgba(0,0,0,.22); background:#1a293b; }
.search input { flex:1; min-width:0; border:0; outline:0; background:transparent; color:var(--text); padding:12px 14px; }
.search input::placeholder { color:#8494a9; }
.search button { width:44px; align-self:stretch; border:0; background:transparent; cursor:pointer; font-size:22px; color:#9fc8de; transition:background .15s ease,color .15s ease; }
.search button:hover { background:rgba(24,191,240,.08); color:white; }
.quick-filters { display:flex; gap:6px; padding:0 16px 11px; overflow-x:auto; scrollbar-width:none; }
.quick-filters::-webkit-scrollbar { display:none; }
.quick-filters button { flex:0 0 auto; border:1px solid rgba(148,163,184,.14); background:#141f30; border-radius:999px; padding:7px 10px; cursor:pointer; font-size:11px; color:#aab7c8; transition:.15s ease; }
.quick-filters button:hover { border-color:rgba(24,191,240,.30); color:#eaf8ff; }
.quick-filters button.active { background:var(--accent-soft); border-color:rgba(24,191,240,.46); color:#dff8ff; box-shadow:inset 0 0 14px rgba(24,191,240,.04); }
.summary { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; padding:0 16px 12px; }
.summary div { background:rgba(16,27,43,.82); border:1px solid rgba(148,163,184,.10); border-radius:11px; padding:9px 10px; }
.summary strong { display:block; font-size:16px; line-height:1; }
.summary span { display:block; color:var(--muted); font-size:10px; margin-top:5px; }
.results { flex:1; overflow:auto; padding:0 9px 14px; scrollbar-color:#27374c transparent; }
.result-card { display:grid; grid-template-columns:54px minmax(0,1fr) auto; gap:10px; align-items:center; margin:3px 5px; padding:9px; border-radius:13px; cursor:pointer; border:1px solid transparent; transition:background .15s ease,border-color .15s ease,transform .15s ease; }
.result-card:hover { background:#142236; border-color:rgba(148,163,184,.11); transform:translateY(-1px); }
.thumb { width:54px; height:54px; border-radius:10px; overflow:hidden; background:radial-gradient(circle at 25% 20%,rgba(32,199,255,.32),transparent 28%),linear-gradient(135deg,#26364d,#101927); position:relative; }
.thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.thumb::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.42)); pointer-events:none; }
.result-name { font-weight:690; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.result-meta { color:var(--muted); font-size:11px; margin-top:3px; line-height:1.38; }
.status-badge { border:1px solid rgba(148,163,184,.13); color:var(--muted); font-size:10px; padding:5px 7px; border-radius:999px; white-space:nowrap; }
.status-badge.on { color:#81edba; border-color:rgba(57,217,138,.28); background:rgba(57,217,138,.07); }
.empty-state { margin:34px 22px; display:flex; flex-direction:column; align-items:center; text-align:center; color:var(--muted); }
.empty-state .empty-icon { width:44px; height:44px; display:grid; place-items:center; border-radius:50%; margin-bottom:11px; font-size:22px; color:#8de8ff; background:rgba(24,191,240,.08); border:1px solid rgba(24,191,240,.18); }
.empty-state strong { color:#dce8f4; font-size:13px; }
.empty-state span { max-width:250px; margin-top:6px; font-size:11px; line-height:1.5; }

.details { position:absolute; left:0; top:0; bottom:0; width:348px; background:var(--panel); z-index:7; overflow:auto; }
.hidden { display:none !important; }
.back { position:absolute; z-index:2; left:13px; top:13px; background:rgba(6,12,21,.84); border:1px solid rgba(255,255,255,.12); border-radius:999px; padding:7px 10px; cursor:pointer; backdrop-filter:blur(8px); }
.hero { height:188px; background:radial-gradient(circle at 70% 20%,rgba(37,99,235,.55),transparent 28%),radial-gradient(circle at 30% 75%,rgba(24,191,240,.32),transparent 26%),linear-gradient(145deg,#233249,#0b1320); background-size:cover; background-position:center; }
.detail-content { padding:17px; }
.eyebrow { color:#91a6bb; font-size:11px; text-transform:uppercase; letter-spacing:.14em; }
h1 { margin:7px 0 8px; font-size:25px; line-height:1.12; }
.status-line { display:flex; align-items:center; gap:8px; color:#c9d3df; font-size:12px; }
.dot { width:8px; height:8px; border-radius:50%; background:var(--offline); }
.dot.on { background:var(--online); box-shadow:0 0 0 4px rgba(57,217,138,.11); }
.details p { color:#aebbc9; font-size:13px; line-height:1.55; }
.facts { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin:15px 0; }
.facts div { background:#121e2e; border:1px solid rgba(148,163,184,.10); border-radius:11px; padding:9px; }
.facts span { display:block; color:var(--muted); font-size:9px; text-transform:uppercase; letter-spacing:.07em; }
.facts strong { display:block; margin-top:5px; font-size:12px; }
.primary { display:block; text-align:center; padding:11px 14px; border-radius:11px; text-decoration:none; color:white; font-weight:700; font-size:13px; background:linear-gradient(135deg,#09bce9,#2563eb); box-shadow:0 8px 22px rgba(9,188,233,.12); }

.map-shell { flex:1; position:relative; min-width:0; }
.sidebar-toggle { position:absolute; z-index:9; left:0; top:50%; transform:translateY(-50%); width:24px; height:58px; border:1px solid rgba(148,163,184,.16); border-left:0; border-radius:0 10px 10px 0; background:rgba(12,20,32,.92); color:#aac2d1; cursor:pointer; box-shadow:6px 0 18px rgba(0,0,0,.18); backdrop-filter:blur(10px); font-size:21px; line-height:1; }
.sidebar-toggle:hover { color:white; background:#142338; }
.topbar { position:absolute; z-index:4; top:15px; left:34px; right:16px; display:flex; justify-content:space-between; align-items:center; gap:10px; pointer-events:none; color:#cfd9e5; font-size:12px; }
.topbar > * { pointer-events:auto; }
.map-context, .world-pill, .live-pill { display:flex; align-items:center; min-height:34px; background:rgba(11,19,31,.82); border:1px solid rgba(148,163,184,.12); border-radius:11px; backdrop-filter:blur(12px); box-shadow:0 6px 20px rgba(0,0,0,.16); }
.map-context { gap:8px; padding:7px 11px; color:#c7d6e4; }
.map-context-dot { width:8px; height:8px; border-radius:2px; background:linear-gradient(135deg,#14cdf5,#2563eb); box-shadow:0 0 12px rgba(24,191,240,.45); transform:rotate(45deg); }
.topbar-right { display:flex; align-items:center; gap:7px; }
.live-pill { gap:7px; padding:7px 10px; }
.world-pill { padding:7px 11px; font-weight:600; }
.pulse { width:7px; height:7px; border-radius:50%; background:var(--online); box-shadow:0 0 0 4px rgba(57,217,138,.11); }
.map-viewport { width:100%; height:100%; position:relative; overflow:hidden; cursor:grab; background-color:#0d1725; background-image:linear-gradient(rgba(126,164,200,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(126,164,200,.035) 1px,transparent 1px),radial-gradient(circle at 50% 43%,rgba(30,62,98,.35),transparent 48%); background-size:32px 32px,32px 32px,100% 100%; }
.map-viewport.dragging { cursor:grabbing; }
.map-canvas { position:absolute; left:50%; top:50%; transform-origin:0 0; will-change:transform; }
.region-tile { position:absolute; width:210px; height:210px; border:1px solid rgba(130,190,230,.13); border-radius:8px; overflow:hidden; cursor:pointer; background:linear-gradient(150deg,#20334a,#111b28); box-shadow:0 12px 28px rgba(0,0,0,.24); transition:transform .15s ease,border-color .15s ease,filter .15s ease,box-shadow .15s ease; }
.region-tile:hover { transform:translateY(-3px); border-color:rgba(24,191,240,.58); filter:brightness(1.07); box-shadow:0 15px 32px rgba(0,0,0,.30),0 0 0 1px rgba(24,191,240,.10); }
.region-tile.offline { filter:saturate(.35) brightness(.72); }
.region-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.84; }
.region-pattern { position:absolute; inset:0; background:radial-gradient(circle at 23% 22%,rgba(24,191,240,.27),transparent 17%),radial-gradient(circle at 70% 65%,rgba(37,99,235,.24),transparent 20%),linear-gradient(25deg,transparent 45%,rgba(255,255,255,.05) 46%,rgba(255,255,255,.05) 48%,transparent 49%); }
.region-shade { position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.01),rgba(0,0,0,.04) 45%,rgba(4,9,16,.84)); }
.region-label { position:absolute; left:12px; right:12px; bottom:11px; }
.region-title { font-weight:720; font-size:13px; text-shadow:0 2px 6px rgba(0,0,0,.65); }
.region-sub { display:flex; justify-content:space-between; gap:8px; color:#cdd9e5; font-size:9px; margin-top:4px; }
.region-pin { width:9px; height:9px; border-radius:50%; background:var(--offline); box-shadow:0 0 0 5px rgba(100,116,139,.14); position:absolute; right:12px; top:12px; }
.region-pin.on { background:var(--online); box-shadow:0 0 0 5px rgba(57,217,138,.14); }
.map-controls { position:absolute; right:16px; bottom:62px; display:flex; flex-direction:column; gap:6px; }
.map-controls button { width:40px; height:40px; border:1px solid rgba(148,163,184,.14); border-radius:10px; background:rgba(12,20,32,.90); backdrop-filter:blur(10px); font-size:20px; cursor:pointer; box-shadow:0 7px 20px rgba(0,0,0,.20); transition:.15s ease; }
.map-controls button:hover { border-color:rgba(24,191,240,.35); background:#152439; }
.legend { position:absolute; left:16px; bottom:16px; display:flex; gap:12px; background:rgba(12,20,32,.82); border:1px solid rgba(148,163,184,.12); padding:7px 10px; border-radius:10px; color:#aebdca; font-size:10px; backdrop-filter:blur(10px); }
.legend span { display:flex; align-items:center; gap:6px; }
.legend-dot { width:6px; height:6px; border-radius:50%; background:var(--offline); }
.legend-dot.online { background:var(--online); }
.map-attribution { position:absolute; right:15px; bottom:14px; color:rgba(184,202,219,.55); font-size:9px; letter-spacing:.02em; pointer-events:none; }

@media (max-width:800px) {
  .sidebar { position:absolute; width:min(90vw,348px); min-width:0; }
  .sidebar.collapsed { width:0; }
  .map-shell { margin-left:0; width:100%; }
  .details { width:min(90vw,348px); }
  .map-context { display:none; }
  .topbar { left:32px; }
  .map-attribution { display:none; }
}
/* 0.2.0-dev: echte NexVerse MapImages liegen kachelgenau ohne künstliche Zwischenräume. */
.region-tile { border-radius: 2px; box-shadow: none; }
.region-tile:hover { transform: none; z-index: 3; border-color: rgba(32,199,255,.78); box-shadow: 0 0 0 2px rgba(32,199,255,.18), 0 10px 28px rgba(0,0,0,.30); }
.region-bg { image-rendering: auto; user-select:none; pointer-events:none; }
.region-pattern { background: radial-gradient(circle at 23% 22%,rgba(32,199,255,.20),transparent 17%), radial-gradient(circle at 70% 65%,rgba(124,92,255,.18),transparent 20%), linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px), linear-gradient(150deg,#23304a,#141a27); background-size:auto,auto,22px 22px,22px 22px,auto; }

/* NexVerse Maps 0.3.0-dev — Seamless World + echtes Tile-Layer */
.map-context { flex-wrap:wrap; max-width:min(440px,55vw); }
.map-context small { display:block; width:100%; margin-left:16px; color:#6f879d; font-size:9px; letter-spacing:.02em; }
.map-context small.active::before { content:""; display:inline-block; width:5px; height:5px; margin-right:5px; border-radius:50%; background:#37d993; vertical-align:1px; }
.map-context small[data-zoom]::after { content:" · " attr(data-zoom); }

.map-canvas { pointer-events:none; }
.tile-layer, .region-overlay { position:absolute; inset:0; }
.tile-layer { overflow:hidden; background:#0d1826; pointer-events:none; }
.world-tile { position:absolute; display:block; object-fit:fill; user-select:none; pointer-events:none; border:0; margin:0; padding:0; image-rendering:auto; }
.world-tile.tile-error { opacity:0; }
.region-overlay { pointer-events:none; z-index:2; }
.region-hitbox { position:absolute; appearance:none; border:0; padding:0; margin:0; background:transparent; cursor:pointer; pointer-events:auto; outline:0; overflow:visible; }
.region-hitbox::after { content:""; position:absolute; inset:0; border:1px solid transparent; transition:border-color .12s ease,background .12s ease,box-shadow .12s ease; }
.region-hitbox:hover::after { border-color:rgba(39,205,244,.72); background:rgba(20,199,240,.04); box-shadow:inset 0 0 0 1px rgba(39,205,244,.10); }
.region-hitbox.selected::after { border:2px solid rgba(56,211,255,.95); background:rgba(24,191,240,.06); box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),0 0 14px rgba(24,191,240,.30); }
.region-overlay.show-borders .region-hitbox::after { border-color:rgba(151,190,218,.22); }
.region-overlay.show-borders .region-hitbox:hover::after { border-color:rgba(39,205,244,.85); }
.region-hitbox.filtered-out:not(.selected) .region-map-label,
.region-hitbox.filtered-out:not(.selected) .region-status-marker { opacity:.16 !important; }

.region-status-marker { position:absolute; top:12px; right:12px; width:8px; height:8px; border-radius:50%; background:#64748b; box-shadow:0 0 0 3px rgba(5,12,20,.55); opacity:0; transform:scale(var(--inv-scale,1)); transform-origin:center; transition:opacity .15s ease; }
.region-status-marker.on { background:#37d993; box-shadow:0 0 0 3px rgba(5,12,20,.58),0 0 12px rgba(55,217,147,.55); }
.region-overlay.show-status .region-status-marker { opacity:1; }

.region-map-label { position:absolute; left:50%; top:50%; display:flex; flex-direction:column; align-items:center; gap:2px; opacity:0; pointer-events:none; white-space:nowrap; transform:translate(-50%,-50%) scale(var(--inv-scale,1)); transform-origin:center; transition:opacity .14s ease; text-align:center; text-shadow:0 1px 2px rgba(0,0,0,.95),0 2px 8px rgba(0,0,0,.85); }
.region-map-label strong { display:block; padding:3px 6px; border-radius:6px; background:rgba(5,12,19,.52); color:#f8fbff; font-size:11px; font-weight:700; line-height:1.15; backdrop-filter:blur(4px); box-shadow:0 1px 7px rgba(0,0,0,.22); }
.region-map-label small { display:none; padding:2px 5px; border-radius:5px; background:rgba(5,12,19,.45); color:#bdd0df; font-size:8px; line-height:1.15; backdrop-filter:blur(4px); }
.region-overlay.show-labels .region-map-label { opacity:1; }
.region-overlay.show-label-meta .region-map-label small { display:block; }
.region-hitbox.selected .region-map-label { opacity:1 !important; }

.result-card.selected { background:rgba(24,191,240,.08); border-color:rgba(24,191,240,.28); }
.layer-panel { position:absolute; right:64px; bottom:62px; z-index:8; width:218px; padding:13px; border:1px solid rgba(148,163,184,.17); border-radius:12px; background:rgba(10,18,30,.96); box-shadow:0 16px 38px rgba(0,0,0,.34); backdrop-filter:blur(14px); }
.layer-panel strong { display:block; margin-bottom:9px; font-size:12px; }
.layer-panel label { display:flex; align-items:center; gap:8px; padding:6px 2px; color:#c4d2df; font-size:11px; cursor:pointer; }
.layer-panel input { accent-color:#18bff0; }
.layer-panel small { display:block; margin-top:8px; color:#71869a; font-size:9px; line-height:1.4; }

/* Alte Region-Bildkarten werden seit 0.3 nicht mehr auf der Weltfläche gerendert. */
.region-tile { display:none !important; }

@media (max-width:800px) {
  .layer-panel { right:62px; bottom:58px; }
  .map-context small { display:none; }
}