:root{
  --bg:#12140f; --bg2:#1b1e16; --panel:#20241b; --panel2:#282d21;
  --line:#3a4130; --txt:#e6e9df; --muted:#9aa189; --accent:#7cae3f;
  --accent2:#5a8a2a; --danger:#c0392b; --warn:#e67e22; --info:#3498db;
  --radius:10px; --shadow:0 4px 18px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--txt);
  font:14px/1.5 system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
.hidden{display:none !important}
.muted{color:var(--muted)}
.err{color:#ff8a7a;min-height:1.2em;font-size:13px;margin-top:6px}
a{color:var(--accent)}

/* Buttons & inputs */
.btn{background:var(--panel2);color:var(--txt);border:1px solid var(--line);
  border-radius:8px;padding:8px 14px;cursor:pointer;font-size:14px;transition:.15s}
.btn:hover{border-color:var(--accent);background:var(--panel)}
.btn.primary{background:var(--accent2);border-color:var(--accent);color:#fff;font-weight:600}
.btn.primary:hover{background:var(--accent)}
.btn.ghost{background:transparent}
.btn.danger{background:var(--danger);border-color:var(--danger);color:#fff}
.btn.small{padding:4px 9px;font-size:12px}
input,select,textarea{background:var(--bg2);color:var(--txt);border:1px solid var(--line);
  border-radius:8px;padding:9px 11px;font-size:14px;width:100%;font-family:inherit}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent)}
label.field{display:block;margin:10px 0}
label.field span{display:block;color:var(--muted);font-size:12px;margin-bottom:4px}
.chk{display:flex;align-items:center;gap:7px;cursor:pointer;font-size:13px}
.chk input{width:auto}
/* Rollenauswahl im Shop: scrollt in sich, damit der Dialog bei vielen Rollen
   nicht ins Endlose waechst. */
.rollen-box{max-height:190px;overflow:auto;border:1px solid var(--line);
  border-radius:8px;padding:8px;display:flex;flex-direction:column;gap:4px}

/* Onboarding */
.overlay{position:fixed;inset:0;background:radial-gradient(circle at 50% 30%,#1c2016,#0c0e0a);
  display:flex;align-items:center;justify-content:center;z-index:50;padding:20px}
.onboard-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;
  padding:32px;max-width:440px;width:100%;box-shadow:var(--shadow)}
/* .brand liefert nur Bild+Name nebeneinander; Groesse und Abstand bleiben die
   des Anmeldebildschirms, deshalb hier nach .brand nochmal gesetzt. */
.onboard-card h1{margin:0 0 18px;font-size:24px}
.onboard-card h1.brand{font-size:24px}
.onboard-card h1 .brand-avatar{width:32px;height:32px}
.ob-step input,.ob-step select{margin:8px 0}
.ob-step .btn{width:100%;margin-top:6px}
/* Zwei Antwort-Buttons nebeneinander; auf schmalen Displays untereinander. */
.ob-actions{display:flex;gap:10px;margin-top:6px}
.ob-actions .btn{flex:1;width:auto}
@media (max-width:520px){.ob-actions{flex-direction:column;gap:0}}
/* Auswahl des eigenen Discord-Servers: Kacheln, zweispaltig solange der Platz
   reicht, darunter einspaltig. Lange Server-Namen brechen um statt zu
   ueberlaufen – auf 412 px steht sonst der Knopf ausserhalb der Kachel. */
.guild-grid{display:grid;gap:10px;margin:10px 0 4px;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.guild-kachel{background:var(--bg2);border:1px solid var(--line);border-radius:12px;
  padding:12px;display:flex;flex-direction:column;align-items:center;gap:6px;
  text-align:center;min-width:0}
.guild-kachel.ohne-bot{opacity:.85}
/* Der gerade eingerichtete Server – im Wechsler unter Optionen. */
.guild-kachel.aktiv{border-color:var(--accent)}
.guild-aktiv{color:var(--accent);font-size:12px;font-weight:600;margin-top:2px}
.guild-icon{width:48px;height:48px;border-radius:50%;object-fit:cover;
  border:1px solid var(--line);background:var(--panel);flex:0 0 auto}
.guild-icon.leer{display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:20px;color:var(--muted)}
.guild-name{font-weight:600;font-size:14px;line-height:1.25;overflow-wrap:break-word;
  min-width:0;width:100%}
.guild-note{color:var(--muted);font-size:11px;line-height:1.3;overflow-wrap:break-word;
  min-width:0;width:100%}
.guild-kachel .btn{margin-top:2px}
.guild-kachel a.btn{text-decoration:none;text-align:center}
.ob-foot{margin-top:10px}
.ob-foot .btn{width:auto}

/* Topbar */
.topbar{display:flex;align-items:center;gap:16px;padding:10px 18px;background:var(--bg2);
  border-bottom:1px solid var(--line);z-index:20;flex:0 0 auto}
/* Bild+Name des Bots, mit dem Support-Discord-Knopf darunter. */
.brand-wrap{display:flex;flex-direction:column;align-items:flex-start;gap:5px;min-width:0}
/* Bild und Name des Bots. Fehlt das Bild, rueckt der Name allein nach links. */
.brand{font-weight:700;font-size:17px;display:flex;align-items:center;gap:8px;min-width:0}
.support-link{display:inline-block;text-decoration:none;line-height:1.2}
.brand-avatar{width:26px;height:26px;border-radius:50%;object-fit:cover;
  border:1px solid var(--line);background:var(--panel);flex:0 0 auto}
/* Umbrechen an Wortgrenzen – so stand die Beschriftung schon vorher da. */
#brand-name{min-width:0}
.status{display:flex;gap:8px;flex:1;flex-wrap:wrap}
.topbar-actions{display:flex;gap:8px;align-items:flex-start}
/* Angemeldeter Discord-Nutzer: Bild, darunter der Name, darunter Abmelden. */
.me{display:flex;flex-direction:column;align-items:center;gap:4px}
.me-avatar{width:34px;height:34px;border-radius:50%;object-fit:cover;
  border:1px solid var(--line);background:var(--panel)}
.me-name{font-size:12px;color:var(--muted);max-width:150px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Nitrado-Token in den Optionen: bricht auch als langer Klartext sauber um. */
.token{background:var(--bg2);border:1px solid var(--line);border-radius:8px;
  padding:6px 10px;font-size:13px;word-break:break-all;flex:1;min-width:0}
.pill{background:var(--panel);border:1px solid var(--line);border-radius:20px;
  padding:3px 12px;font-size:12px;color:var(--muted)}
.pill.map{color:var(--accent)}
.pill.online{color:#7cff9b;border-color:#2f6b3f}
.pill.offline{color:#ff8a7a;border-color:#6b2f2f}

/* Layout
   #app ist eine Flex-Spalte auf exakt Viewport-Höhe: die Topbar nimmt sich, was
   sie braucht (auf schmalen Displays umbrechen die Status-Pills auf mehrere
   Zeilen), .body bekommt automatisch den Rest. Deshalb wird die Header-Höhe
   NICHT mehr geschätzt – ein hartkodiertes calc(100vh - 53px) hat auf dem Handy
   dafür gesorgt, dass die Seite scrollt und die Karten-Bedienelemente unter dem
   Header verschwanden. */
#app{display:flex;flex-direction:column;height:100vh;height:100dvh}
.body{display:flex;flex:1 1 auto;min-height:0}
.sidebar{width:210px;flex-shrink:0;background:var(--bg2);border-right:1px solid var(--line);
  padding:12px 8px;display:flex;flex-direction:column;gap:3px;overflow:auto}
.nav{background:transparent;border:none;color:var(--txt);text-align:left;padding:10px 12px;
  border-radius:8px;cursor:pointer;font-size:14px}
.nav:hover{background:var(--panel)}
.nav.active{background:var(--accent2);color:#fff;font-weight:600}
/* Ohne Premium gesperrt: sichtbar, aber erkennbar zu. Anklickbar bleibt es –
   der Klick fuehrt zur Erklaerung statt ins Leere. */
.nav.gesperrt{color:var(--muted);opacity:.6}
.nav.gesperrt::after{content:" 🔒";font-size:11px}
.premium-sperre h2{margin:0 0 6px;font-size:20px}
.nav-sep{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:1px;
  padding:12px 12px 4px}
#content{flex:1;padding:22px;overflow:auto;min-width:0;min-height:0}
.view h2{margin:0 0 4px;font-size:22px}
.view .sub{color:var(--muted);margin:0 0 18px}

/* Cards / tables */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px;margin-bottom:16px}
.grid{display:grid;gap:14px}
.grid.two{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid.three{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.grid.stats{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.stat .n{font-size:26px;font-weight:700}
.stat .l{color:var(--muted);font-size:12px}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);font-size:13px}
th{color:var(--muted);font-weight:600}
tr:hover td{background:var(--bg2)}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.row.between{justify-content:space-between}
.tag{display:inline-block;background:var(--panel2);border:1px solid var(--line);
  border-radius:6px;padding:2px 8px;font-size:12px;margin:2px}
.badge-on{color:#7cff9b}.badge-off{color:#ff8a7a}

/* Feeds */
.feed-row{display:grid;grid-template-columns:1fr 220px;gap:10px;align-items:center;
  padding:8px 0;border-bottom:1px solid var(--line)}
.feed-row .label{font-size:13px}
.feed-row .label small{color:var(--muted);display:block}

/* Feeds: durchsuchbare Auswahl. Die Liste liegt ueber allem anderen, damit sie
   im Dialog nicht hinter dem naechsten Feld verschwindet. */
.such-auswahl{position:relative}
.sa-liste{position:absolute;left:0;right:0;top:100%;z-index:60;max-height:230px;
  overflow:auto;background:var(--panel2);border:1px solid var(--line);
  border-radius:8px;margin-top:4px;box-shadow:var(--shadow)}
.sa-gruppe{color:var(--muted);font-size:11px;text-transform:uppercase;
  letter-spacing:1px;padding:8px 10px 4px}
.sa-eintrag{padding:8px 10px;cursor:pointer;font-size:14px}
.sa-eintrag:hover{background:var(--panel)}
.sa-eintrag.aktiv{background:var(--accent2);color:#fff}
.sa-leer{padding:10px;color:var(--muted);font-size:13px}
/* Farbpunkt vor dem Feed-Namen in der Tabelle. */
.feed-punkt{display:inline-block;width:10px;height:10px;border-radius:50%;
  margin-right:8px;border:1px solid var(--line);vertical-align:middle}
.feed-note{color:var(--muted);overflow-wrap:break-word;max-width:220px}
/* Breite Tabellen scrollen in sich, statt die Seite zu sprengen (412 px). */
.tabelle-scroll{overflow-x:auto}

/* Zonen: Mehrfachauswahl (Ping Roles, Allowlist Roles, Allowlist-Spieler) –
   ausgewaehlte Werte bleiben als Chips ueber der Such-Auswahl stehen. */
.mehrfach-auswahl .such-auswahl{margin-top:6px}
.ma-chips{display:flex;flex-wrap:wrap;gap:6px}
.ma-chip{display:inline-flex;align-items:center;gap:6px;background:var(--panel2);
  border:1px solid var(--line);border-radius:999px;padding:4px 6px 4px 10px;font-size:13px}
.ma-chip .entfernen{background:none;border:none;color:var(--muted);cursor:pointer;
  font-size:15px;line-height:1;padding:0 2px}
.ma-chip .entfernen:hover{color:var(--txt)}

/* Zonen-Formular: eingebettete Karte zum Zeichnen – braucht eine feste
   Groesse und position:relative, damit das absolut positionierte #leaflet
   genau diesen Kasten fuellt statt der ganzen Seite. */
.zone-map-eingebettet{position:relative;height:420px;border:1px solid var(--line);
  border-radius:10px;overflow:hidden;margin-top:10px;background:#0c0e0a}
.punkt-zeile{align-items:end}
.zonen-filter{display:flex;flex-wrap:wrap;gap:10px;align-items:end;margin-bottom:14px}
.zonen-filter .field{min-width:140px}
.zonen-pagination{display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  justify-content:space-between;margin-top:12px}
.zonen-pagination .seiten{display:flex;gap:6px;align-items:center}

/* Modal */
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;
  justify-content:center;z-index:40;padding:20px}
.modal{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px;
  max-width:560px;width:100%;max-height:90vh;overflow:auto;box-shadow:var(--shadow)}
.modal h3{margin:0 0 14px}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:18px}

/* Shop item rows / autofill */
.item-line{display:grid;grid-template-columns:1fr 40px;gap:8px;margin-bottom:8px;position:relative}
.ac-box{position:absolute;top:100%;left:0;right:40px;background:var(--panel2);
  border:1px solid var(--line);border-radius:8px;z-index:5;max-height:220px;overflow:auto;box-shadow:var(--shadow)}
.ac-item{padding:7px 10px;cursor:pointer;font-size:13px}
.ac-item:hover,.ac-item.sel{background:var(--accent2);color:#fff}
.ac-item small{color:var(--muted);margin-left:6px}
.ac-item:hover small,.ac-item.sel small{color:#dfeccb}

/* Karte / Map
   height:100% bezieht sich auf #content, das seine Höhe aus der Flex-Kette von
   #app bekommt. Damit füllt die Karte genau den sichtbaren Bereich – die Seite
   scrollt nicht, und +/- sowie das Filter-Panel bleiben IN der Karte. */
.map-view{position:relative;padding:0;height:100%;display:block}
/* Beim Kartenblick den Innenabstand von #content wegnehmen, damit die Karte die
   volle Fläche nutzt (auf dem Handy sonst 44px verschenkt). */
#content:has(> .map-view:not(.hidden)){padding:0}
.leaflet{position:absolute;inset:0;background:#0c0e0a}
/* Zoom-Buttons gehören sichtbar in die Karte, nicht an den Rand gequetscht. */
.leaflet-top,.leaflet-bottom{z-index:600}
.leaflet-control-zoom{margin:12px 12px 0 0 !important;border:1px solid var(--line) !important;
  box-shadow:var(--shadow) !important;overflow:hidden;border-radius:10px}
.leaflet-control-zoom a{background:rgba(26,29,20,.96) !important;color:var(--txt) !important;
  border-bottom:1px solid var(--line) !important;width:34px;height:34px;line-height:34px;
  font-size:19px;font-weight:700}
.leaflet-control-zoom a:last-child{border-bottom:none !important}
.leaflet-control-zoom a:hover{background:var(--panel2) !important;color:#fff !important}
.leaflet-container{background:#0c0e0a;font-family:inherit}
.map-panel{position:absolute;top:12px;left:12px;z-index:500;width:250px;background:rgba(26,29,20,.96);
  border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);overflow:hidden;transition:.2s}
.map-panel.collapsed{width:46px}
.map-panel.collapsed .map-filters,.map-panel.collapsed .map-panel-foot,
.map-panel.collapsed .map-panel-head span{display:none}
.map-panel-head{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;
  border-bottom:1px solid var(--line);font-weight:600}
.map-filters{padding:8px;max-height:50vh;overflow:auto}
.flt{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:8px;cursor:pointer;
  border:1px solid transparent}
.flt:hover{background:var(--panel2)}
.flt.off{opacity:.45}
.flt .dot{width:12px;height:12px;border-radius:50%;flex-shrink:0}
.flt .cnt{margin-left:auto;color:var(--muted);font-size:12px}
.map-panel-foot{padding:10px 12px;border-top:1px solid var(--line);display:flex;
  flex-direction:column;gap:8px}
.event-list{position:absolute;bottom:12px;right:12px;z-index:500;width:330px;max-height:44vh;
  overflow:auto;background:rgba(26,29,20,.96);border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--shadow);padding:8px}
.ev{display:flex;gap:8px;padding:6px 8px;border-bottom:1px solid var(--line);font-size:12.5px;cursor:pointer}
.ev:last-child{border-bottom:none}
.ev .ico{flex-shrink:0}
.ev .tx b{color:var(--txt)}
.ev .tm{color:var(--muted);margin-left:auto;font-size:11px;white-space:nowrap}
.map-marker-label{background:transparent;border:none;color:#e8f0d8;font-size:9px;
  text-shadow:0 1px 2px #000,0 0 2px #000;font-weight:500;white-space:nowrap}
.map-marker-label.lbl-capital{font-size:12px;font-weight:700;color:#fff}
.map-marker-label.lbl-city{font-size:10.5px;font-weight:600;color:#f4f8ea}
.map-marker-label.lbl-hill,.map-marker-label.lbl-local,
.map-marker-label.lbl-marine{color:#c9d4b4;font-style:italic}

/* Toast */
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:80;
  background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:11px 18px;
  box-shadow:var(--shadow);max-width:90vw}
.toast.ok{border-color:#2f6b3f}
.toast.bad{border-color:#6b2f2f}

@media(max-width:800px){
  /* Die Navigation wandert über den Inhalt und wird quer scrollbar. Vorher
     stand hier font-size:0 – das hat Beschriftung UND Emoji unsichtbar
     gemacht, die Liste war dadurch nicht mehr benutzbar. */
  .body{flex-direction:column}
  .sidebar{width:auto;flex-direction:row;gap:6px;overflow-x:auto;overflow-y:hidden;
    padding:8px;border-right:none;border-bottom:1px solid var(--line);
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .sidebar::-webkit-scrollbar{display:none}
  .nav{flex:0 0 auto;white-space:nowrap;padding:8px 13px;font-size:13px;text-align:center}
  .nav-sep{display:none}
  #content{padding:14px}
  .feed-row{grid-template-columns:1fr}
  /* Event-Liste an der Karte ausrichten (nicht am Viewport) – sonst ragte sie
     links aus der Karte heraus und wurde abgeschnitten. */
  /* Panel und Liste kompakt halten, sonst verdecken sie auf dem Handy fast die
     ganze Karte. Beide bleiben scrollbar, es fehlt also nichts. */
  .event-list{width:auto;left:10px;right:10px;bottom:10px;max-height:26%}
  .map-panel{width:200px;max-width:calc(100% - 74px)}
  .map-filters{max-height:30vh;padding:5px}
  .flt{padding:5px 6px;gap:6px;font-size:12.5px}
  .map-panel-head{padding:7px 10px}
  .map-panel-foot{padding:8px 10px}
  .topbar{gap:10px;padding:8px 12px}
  .brand{font-size:15px}
}

/* Serverliste: Ueberschrift je Discord-Server (mehrere Nitrado-Server je Guild) */
.sl-gruppe { margin: 18px 0 8px; font-size: 15px; color: var(--fg, #e6e9ef); }
.sl-gruppe:first-child { margin-top: 0; }