/* ══════════════════════════════════════════════════════════════
   VS Rail — Style System
   Layout: Flex-Column, keine absoluten Map-Overlays mehr
   Themes: Dark (default) + Light (via html.light)
══════════════════════════════════════════════════════════════ */

* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

/* ── DARK THEME (Default) ── */
:root {
  --bg:        #0D0F12;
  --bg-2:      #16181C;
  --bg-3:      #1E2128;
  --bg-card:   #1C1F26;
  --border:    #2A2D35;
  --border-2:  #222630;
  --t1:        #F0F2F5;
  --t2:        #8A92A2;
  --t3:        #50586A;

  --vs-red:    #CC0000;
  --vs-red-dk: #AA0000;
  --vs-red-bg: rgba(204,0,0,.14);
  --green:     #00A550;
  --green-bg:  rgba(0,165,80,.13);
  --blue:      #0057A8;
  --blue-bg:   rgba(0,87,168,.13);
  --orange:    #E8950A;
  --orange-bg: rgba(232,149,10,.13);

  --shadow-sm: 0 1px 4px rgba(0,0,0,.5);
  --shadow-md: 0 4px 18px rgba(0,0,0,.55);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.65);

  --r-sm:4px; --r-md:10px; --r-lg:14px; --r-xl:22px;

  /* Feste Layout-Höhen */
  --hdr-h:   52px;
  --chips-h: 46px;   /* Layer-Chips-Zeile */
  --nav-h:   68px;

  /* Z-Index — alle UI-Elemente ÜBER Leaflet (max ~1000) */
  --z-ui:      1050;
  --z-chrome:  1100;   /* Header, Navbar */
  --z-views:   1200;
  --z-sheet:   1300;
  --z-loading: 1400;
}

/* ── LIGHT THEME ── */
html.light {
  --bg:        #F5F6F8;
  --bg-2:      #FFFFFF;
  --bg-3:      #ECEEF2;
  --bg-card:   #FFFFFF;
  --border:    #DDE0E8;
  --border-2:  #E8EAF0;
  --t1:        #111318;
  --t2:        #5A6070;
  --t3:        #9098A8;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08);
  --shadow-md: 0 4px 14px rgba(0,0,0,.10);
  --shadow-lg: 0 12px 36px rgba(0,0,0,.13);
}

html, body {
  height:100%; overflow:hidden;
  background:var(--bg); color:var(--t1);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  transition:background .25s, color .25s;
}

/* ══════════════════════════════════════════════════════════════
   APP LAYOUT — Flex-Column, kein absolutes Overlay mehr
   Reihenfolge: Header → Chips → Map → Navbar
   (Karte bekommt den verbleibenden Raum via flex:1)
══════════════════════════════════════════════════════════════ */
.app {
  position:fixed; inset:0;
  display:flex; flex-direction:column;
  background:var(--bg);
}

/* ── HEADER ── */
.hdr {
  height:var(--hdr-h);
  min-height:var(--hdr-h);
  background:var(--bg-2);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 14px;
  flex-shrink:0;
  z-index:var(--z-chrome);
  position:relative;
}
.hdr-l { display:flex; align-items:center; gap:10px; }
.db-logo {
  background:var(--vs-red); color:#fff;
  font-weight:900; font-size:11px; letter-spacing:.4px;
  padding:4px 8px; border-radius:4px; white-space:nowrap;
}
.hdr-title { font-size:14px; font-weight:700; color:var(--t1); }
.hdr-sub { font-size:10px; color:var(--t3); margin-top:1px; }
.icon-btn {
  width:34px; height:34px;
  border:1px solid var(--border); background:var(--bg-3);
  border-radius:8px; font-size:15px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; color:var(--t2);
}

/* ── LAYER CHIPS — eigene Zeile, kein Overlay ── */
.layer-bar {
  height:var(--chips-h);
  min-height:var(--chips-h);
  background:var(--bg-2);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center;
  gap:6px; padding:0 10px;
  overflow-x:auto; scrollbar-width:none;
  flex-shrink:0;
  z-index:var(--z-chrome);
  position:relative;
}
.layer-bar::-webkit-scrollbar { display:none; }
.lpill {
  display:flex; align-items:center; gap:5px;
  background:var(--bg-3); border:1px solid var(--border);
  border-radius:20px; padding:5px 11px;
  font-size:11px; font-weight:600; color:var(--t2);
  white-space:nowrap; cursor:pointer;
  flex-shrink:0; transition:all .15s; user-select:none;
}
.lpill.on { background:var(--vs-red); color:#fff; border-color:var(--vs-red); }
.lpill .dot { width:7px; height:7px; border-radius:50%; }

/* ── MAP CONTAINER — nimmt restlichen Platz ── */
.map-wrap {
  flex:1;
  position:relative;
  overflow:hidden;
  min-height:0;
}
#map {
  position:absolute; inset:0;
  z-index:1;
  background:var(--bg);
}

/* ── Search-Overlay auf der Karte ── */
.search-overlay {
  position:absolute;
  top:10px; left:10px; right:10px;
  z-index:var(--z-ui);
  pointer-events:none;
}
.search-bar {
  background:var(--bg-2); border:1px solid var(--border);
  border-radius:var(--r-xl); display:flex; align-items:center; gap:10px;
  padding:10px 14px; box-shadow:var(--shadow-md);
  cursor:pointer; pointer-events:all;
}
.search-icon { font-size:15px; color:var(--t3); }
.search-placeholder { font-size:13px; color:var(--t3); font-weight:500; }

/* ── FABs — links unten in map-wrap ── */
.fab-group {
  position:absolute; left:12px; bottom:12px;
  z-index:var(--z-ui);
  display:flex; flex-direction:column; gap:9px; align-items:center;
}
.fab {
  width:44px; height:44px; border-radius:50%;
  background:var(--bg-2); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-md); cursor:pointer;
  font-size:18px; color:var(--t2);
  transition:transform .15s, background .15s;
}
.fab:active { transform:scale(.92); }
.fab.primary { background:var(--vs-red); border-color:var(--vs-red); color:#fff; }
.fab.active { background:var(--bg-3); color:var(--t1); }

/* ── OSM Toast — rechts unten in map-wrap ── */
.osm-status {
  position:absolute; bottom:12px; left:68px; right:12px;
  z-index:var(--z-ui);
  background:var(--bg-2); border:1px solid var(--border);
  border-radius:9px; padding:8px 12px;
  font-size:11px; font-weight:600;
  display:flex; align-items:center; gap:7px;
  box-shadow:var(--shadow-sm); color:var(--t2);
  transition:opacity .3s;
}
.osm-status.ok    { border-color:rgba(0,165,80,.3); color:var(--green); }
.osm-status.warn  { border-color:rgba(232,149,10,.3); color:var(--orange); }
.osm-status.info  { border-color:rgba(0,87,168,.3); color:#5a9fd4; }
.osm-status.hide  { opacity:0; pointer-events:none; }

/* ── Legend — rechts oben in map-wrap ── */
.legend { position:absolute; top:10px; right:10px; z-index:var(--z-ui); }
.legend-toggle {
  width:32px; height:32px; background:var(--bg-2); border:1px solid var(--border);
  border-radius:50%; box-shadow:var(--shadow-md);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:14px; color:var(--t2);
}
.legend-body {
  display:none; position:absolute; top:38px; right:0;
  background:var(--bg-2); border:1px solid var(--border);
  border-radius:var(--r-md); padding:10px 13px;
  box-shadow:var(--shadow-lg); font-size:11px; color:var(--t2); min-width:158px;
}
.legend-body.open { display:block; }
.lr { display:flex; align-items:center; gap:7px; margin-bottom:5px; }
.lr:last-child { margin-bottom:0; }
.ldot { width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.lsq { width:14px; height:3px; border-radius:2px; flex-shrink:0; }

/* ── Marking Panel — in map-wrap ── */
.marking-panel {
  position:absolute; left:10px; right:10px; bottom:10px;
  z-index:var(--z-ui);
  background:var(--bg-2); border:1px solid var(--border);
  border-radius:var(--r-lg); box-shadow:var(--shadow-lg);
  padding:14px 16px; transition:transform .25s, opacity .25s;
}
.marking-panel.hidden { transform:translateY(20px); opacity:0; pointer-events:none; }
.mp-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:4px; }
.mp-title { font-size:13px; font-weight:800; color:var(--t1); }
.mp-close { width:24px; height:24px; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--t3); }
.mp-sub { font-size:11px; color:var(--t3); margin-bottom:12px; }
.color-row { display:flex; gap:8px; margin-bottom:10px; }
.color-swatch { width:28px; height:28px; border-radius:50%; cursor:pointer; border:2px solid transparent; transition:all .15s; }
.color-swatch.selected { border-color:var(--t1); transform:scale(1.12); }
.thickness-row { display:flex; gap:6px; margin-bottom:12px; }
.thickness-btn { flex:1; padding:7px; background:var(--bg-3); border-radius:7px; font-size:11px;
  font-weight:700; text-align:center; cursor:pointer; border:1px solid var(--border); color:var(--t2); transition:all .15s; }
.thickness-btn.active { background:var(--vs-red); color:#fff; border-color:var(--vs-red); }
.mp-actions { display:flex; gap:8px; }
.mp-btn { flex:1; padding:10px; border-radius:9px; border:1px solid var(--border);
  background:var(--bg-3); font-size:12px; font-weight:700; cursor:pointer; color:var(--t2); }
.mp-btn.primary { background:var(--vs-red); color:#fff; border-color:var(--vs-red); }

/* ── Leaflet Controls ── */
.leaflet-bottom.leaflet-right { bottom:12px !important; right:12px !important; }
.leaflet-control-zoom {
  border:1px solid var(--border) !important;
  border-radius:var(--r-md) !important;
  overflow:hidden; box-shadow:var(--shadow-md) !important;
}
.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
  background:var(--bg-2) !important; color:var(--t1) !important;
  border-bottom:1px solid var(--border) !important;
  width:34px !important; height:34px !important; line-height:34px !important; font-size:18px !important;
}
.leaflet-control-zoom-out { border-bottom:none !important; }
.leaflet-control-zoom-in:hover,
.leaflet-control-zoom-out:hover { background:var(--bg-3) !important; }

/* ── NAVBAR ── */
.navbar {
  height:var(--nav-h); min-height:var(--nav-h);
  background:var(--bg-2); border-top:1px solid var(--border);
  display:flex; align-items:flex-start; padding-top:8px;
  flex-shrink:0; z-index:var(--z-chrome); position:relative;
}
.nav-item { flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
  cursor:pointer; padding:5px 0; transition:transform .15s; }
.nav-item:active { transform:scale(.92); }
.nav-icon { width:24px; height:24px; display:flex; align-items:center; justify-content:center;
  border-radius:7px; font-size:17px; transition:all .2s; }
.nav-item.active .nav-icon { background:var(--vs-red-bg); }
.nav-label { font-size:10px; font-weight:600; color:var(--t3); }
.nav-item.active .nav-label { color:var(--vs-red); }

/* ══════════════════════════════════════════════════════════════
   FULLSCREEN VIEWS
══════════════════════════════════════════════════════════════ */
.view {
  position:fixed; inset:0;
  background:var(--bg); z-index:var(--z-views);
  display:flex; flex-direction:column;
  transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.view.hidden { transform:translateY(100%); pointer-events:none; }
.appbar {
  height:52px; background:var(--bg-2); border-bottom:1px solid var(--border);
  display:flex; align-items:center; padding:0 14px; flex-shrink:0; gap:10px;
}
.appbar-back { width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  border-radius:8px; background:var(--bg-3); border:1px solid var(--border);
  cursor:pointer; font-size:17px; color:var(--t2); flex-shrink:0; }
.appbar-title { font-size:15px; font-weight:800; flex:1; color:var(--t1); }
.appbar-sub { font-size:11px; color:var(--t3); font-weight:500; }
.scroll { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.scroll::-webkit-scrollbar { display:none; }

/* ── SEARCH VIEW ── */
.search-input-wrap { padding:12px 14px; position:relative; border-bottom:1px solid var(--border); }
.search-input { width:100%; background:var(--bg-3); border:1px solid var(--border);
  border-radius:var(--r-xl); padding:11px 16px 11px 42px;
  font-size:14px; font-weight:500; outline:none; color:var(--t1); font-family:inherit; }
.search-input::placeholder { color:var(--t3); }
.search-input-icon { position:absolute; left:28px; top:50%; transform:translateY(-50%);
  font-size:17px; pointer-events:none; color:var(--t3); }
.search-section { padding:16px 14px 4px; }
.search-section-lbl { font-size:10px; font-weight:800; letter-spacing:1.2px;
  text-transform:uppercase; color:var(--t3); margin-bottom:8px; }
.search-result { display:flex; align-items:center; gap:10px; padding:11px 14px;
  border-bottom:1px solid var(--border-2); cursor:pointer; transition:background .1s; }
.search-result:active { background:var(--bg-3); }
.search-result:last-child { border-bottom:none; }
.sr-icon { width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; }
.sr-icon.station { background:var(--vs-red-bg); }
.sr-icon.route   { background:var(--blue-bg); }
.sr-icon.recent,
.sr-icon.place   { background:var(--bg-3); }
.sr-info { flex:1; min-width:0; }
.sr-name { font-size:13px; font-weight:700; color:var(--t1); }
.sr-sub  { font-size:11px; color:var(--t3); margin-top:2px; }
.sr-badge { font-size:10px; font-weight:700; padding:3px 8px; border-radius:5px;
  background:var(--bg-3); color:var(--t2); flex-shrink:0; }
.search-empty   { padding:36px 20px; text-align:center; color:var(--t3); font-size:13px; }
.search-loading { padding:14px 20px; text-align:center; color:var(--t3); font-size:13px; }

/* ── BAUSTELLEN VIEW ── */
.bau-filter-bar { padding:10px 14px; background:var(--bg-2); border-bottom:1px solid var(--border);
  display:flex; gap:7px; overflow-x:auto; scrollbar-width:none; flex-shrink:0; }
.bau-filter-bar::-webkit-scrollbar { display:none; }
.filter-chip { display:flex; align-items:center; gap:5px; padding:6px 13px; border-radius:20px;
  font-size:11px; font-weight:700; white-space:nowrap; cursor:pointer;
  border:1px solid var(--border); background:var(--bg-3); color:var(--t3); flex-shrink:0; transition:all .15s; }
.filter-chip.active         { background:var(--bg-card); color:var(--t1); border-color:var(--t3); }
.filter-chip.red.active     { background:var(--vs-red);  border-color:var(--vs-red);  color:#fff; }
.filter-chip.blue.active    { background:var(--blue);    border-color:var(--blue);    color:#fff; }
.filter-chip.green.active   { background:var(--green);   border-color:var(--green);   color:#fff; }
.filter-chip.orange.active  { background:var(--orange);  border-color:var(--orange);  color:#fff; }
.bau-card { margin:10px 14px 0; background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--r-lg); overflow:hidden; cursor:pointer; transition:transform .15s; }
.bau-card:active { transform:scale(.98); }
.bau-card-stripe { height:3px; }
.bau-card-body { padding:13px 14px; }
.bau-card-header { display:flex; align-items:flex-start; gap:10px; margin-bottom:10px; }
.bau-card-icon { width:36px; height:36px; border-radius:9px; display:flex; align-items:center;
  justify-content:center; font-size:17px; flex-shrink:0; background:var(--bg-3); }
.bau-card-title { font-size:13px; font-weight:800; line-height:1.3; color:var(--t1); }
.bau-card-sub   { font-size:11px; color:var(--t3); margin-top:2px; }
.bau-card-meta  { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:9px; }
.meta-pill { font-size:10px; font-weight:700; padding:3px 8px; border-radius:5px;
  display:inline-flex; align-items:center; gap:3px; }
.meta-pill.red    { background:var(--vs-red-bg); color:var(--vs-red); }
.meta-pill.orange { background:var(--orange-bg); color:var(--orange); }
.meta-pill.green  { background:var(--green-bg);  color:var(--green); }
.meta-pill.blue   { background:var(--blue-bg);   color:var(--blue); }
.meta-pill.grey   { background:var(--bg-3); color:var(--t3); }
.bau-card-rows { display:flex; flex-direction:column; gap:4px; }
.bau-row   { display:flex; gap:8px; font-size:12px; }
.bau-key   { color:var(--t3); font-weight:600; min-width:74px; flex-shrink:0; }
.bau-val   { color:var(--t1); flex:1; font-weight:500; }
.bau-progress     { height:2px; background:var(--bg-3); border-radius:2px; margin-top:10px; }
.bau-progress-fill { height:100%; border-radius:2px; transition:width .5s; }
.bau-progress-lbl { font-size:10px; color:var(--t3); margin-top:3px; }

/* ── SETTINGS VIEW ── */
.settings-section { padding:16px 14px 0; }
.settings-lbl { font-size:10px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase; color:var(--t3); margin-bottom:8px; }
.settings-group { background:var(--bg-card); border-radius:var(--r-md); border:1px solid var(--border); overflow:hidden; }
.settings-row { display:flex; align-items:center; gap:12px; padding:13px 14px;
  border-bottom:1px solid var(--border-2); cursor:pointer; }
.settings-row:last-child { border-bottom:none; }
.settings-icon   { font-size:17px; width:28px; text-align:center; flex-shrink:0; }
.settings-content { flex:1; }
.settings-label  { font-size:13px; font-weight:600; color:var(--t1); }
.settings-sub    { font-size:11px; color:var(--t3); margin-top:2px; }
.settings-value  { font-size:12px; color:var(--t3); font-weight:500; }
.toggle { width:44px; height:25px; border-radius:13px; background:var(--bg-3);
  border:1px solid var(--border); position:relative; cursor:pointer; transition:background .2s; flex-shrink:0; }
.toggle.on { background:var(--vs-red); border-color:var(--vs-red); }
.toggle::after { content:''; position:absolute; width:19px; height:19px; background:#fff;
  border-radius:50%; top:2px; left:2px; transition:transform .2s; box-shadow:var(--shadow-sm); }
.toggle.on::after { transform:translateX(19px); }

/* ══════════════════════════════════════════════════════════════
   BOTTOM SHEET
══════════════════════════════════════════════════════════════ */
.backdrop { position:fixed; inset:0; background:rgba(0,0,0,.55);
  z-index:var(--z-sheet); opacity:0; pointer-events:none; transition:opacity .25s; }
.backdrop.vis { opacity:1; pointer-events:all; }
.sheet { position:fixed; left:0; right:0; bottom:0;
  z-index:calc(var(--z-sheet) + 1);
  background:var(--bg-2); border:1px solid var(--border); border-bottom:none;
  border-radius:18px 18px 0 0; box-shadow:0 -4px 40px rgba(0,0,0,.5);
  transform:translateY(100%); transition:transform .35s cubic-bezier(.32,.72,0,1);
  max-height:88vh; display:flex; flex-direction:column; }
.sheet.open { transform:translateY(0); }
.sh-handle { display:flex; justify-content:center; padding:11px 0 7px; flex-shrink:0; cursor:pointer; }
.sh-bar { width:34px; height:3px; background:var(--border); border-radius:2px; }
.sh-scroll { overflow-y:auto; flex:1; padding-bottom:32px; -webkit-overflow-scrolling:touch; }
.sh-hero { padding:4px 18px 14px; border-bottom:1px solid var(--border); }
.sh-name { font-size:19px; font-weight:800; color:var(--t1); }
.sh-tags { display:flex; gap:5px; flex-wrap:wrap; margin-top:8px; }
.tag { background:var(--bg-3); border-radius:5px; padding:3px 8px; font-size:11px; font-weight:600; color:var(--t2); }
.tag.red   { background:var(--vs-red-bg); color:var(--vs-red); }
.tag.blue  { background:var(--blue-bg);   color:var(--blue); }
.tag.green { background:var(--green-bg);  color:var(--green); }
.sec { padding:14px 18px; border-bottom:1px solid var(--border-2); }
.sec:last-child { border-bottom:none; }
.sec-lbl { font-size:9px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:var(--t3); margin-bottom:10px; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.card { background:var(--bg-3); border-radius:9px; padding:11px; border:1px solid var(--border-2); }
.card.full { grid-column:1/-1; }
.card-lbl { font-size:9px; color:var(--t3); font-weight:600; letter-spacing:.4px; text-transform:uppercase; }
.card-val { font-size:19px; font-weight:800; margin-top:2px; line-height:1; color:var(--t1); }
.card-val.sm { font-size:12px; font-family:monospace; color:var(--t2); }
.card-sub { font-size:10px; color:var(--t3); margin-top:3px; }
.nbtn { display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:10px;
  border:1px solid var(--border); background:var(--bg-3); text-decoration:none; color:var(--t1); margin-bottom:7px; }
.nbtn:last-child { margin-bottom:0; }
.nbtn.primary { background:var(--vs-red); border-color:var(--vs-red); color:#fff; }
.nicon { font-size:19px; width:24px; text-align:center; flex-shrink:0; }
.nlbl  { font-size:13px; font-weight:600; }
.nsub  { font-size:11px; color:var(--t3); margin-top:2px; }
.nbtn.primary .nsub { color:rgba(255,255,255,.55); }

/* ── Abfahrtstafel ── */
.dep-table { display:flex; flex-direction:column; gap:6px; padding:4px 0 8px; }
.dep-row   { display:flex; align-items:center; gap:8px; font-size:12px; }
.dep-line  { background:var(--bg-3); color:var(--t1); font-size:10px; font-weight:700;
  padding:2px 7px; border-radius:5px; min-width:46px; text-align:center; flex-shrink:0; }
.dep-dir   { flex:1; color:var(--t1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dep-plat  { color:var(--t3); font-size:11px; flex-shrink:0; }
.dep-time  { font-size:12px; font-weight:600; flex-shrink:0; min-width:68px; text-align:right; color:var(--t2); }
.dep-hint  { font-size:11px; color:var(--t3); padding:6px 0; }

/* ── Leaflet Popup ── */
.leaflet-popup-content-wrapper { background:var(--bg-2) !important; border:1px solid var(--border) !important;
  border-radius:12px !important; box-shadow:var(--shadow-lg) !important; color:var(--t1) !important; }
.leaflet-popup-tip { background:var(--bg-2) !important; }
.leaflet-popup-content { margin:13px 15px !important; min-width:190px; max-width:270px; }
.ptitle { font-size:13px; font-weight:700; margin-bottom:7px; color:var(--t1); }
.prow   { display:flex; justify-content:space-between; font-size:11px; color:var(--t2); margin-bottom:3px; gap:7px; }
.pkey   { color:var(--t3); flex-shrink:0; }
.pnav   { display:block; margin-top:9px; background:var(--vs-red); color:#fff; border:none;
  border-radius:7px; padding:8px 12px; font-size:12px; font-weight:700; text-align:center; text-decoration:none; width:100%; }

/* ── Loading Screen ── */
.loading { position:fixed; inset:0; background:var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  z-index:var(--z-loading); gap:12px; }
.spin { width:28px; height:28px; border:2px solid var(--border); border-top-color:var(--vs-red);
  border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin { to{transform:rotate(360deg)} }
.loading-txt { font-size:13px; font-weight:600; color:var(--t2); }
.loading-sub { font-size:11px; color:var(--t3); text-align:center; max-width:240px; }
.loading.done { display:none; }

/* ── Misc ── */
.badge { font-size:10px; font-weight:700; padding:2px 8px; border-radius:8px; flex-shrink:0; }
.badge.green { background:var(--green-bg); color:var(--green); }
.badge.blue  { background:var(--blue-bg);  color:var(--blue); }
.badge.grey  { background:var(--bg-3); color:var(--t3); }
.badge.red   { background:var(--vs-red-bg); color:var(--vs-red); }