*{margin:0;padding:0;box-sizing:border-box}
  html{scrollbar-color:#3e4653 var(--canvas)}
  body{
    background:var(--canvas); color:var(--ink);
    font-family:"Segoe UI",system-ui,-apple-system,sans-serif;
    font-size:14px; line-height:1.45; padding:26px 28px 70px;
  }
  .wrap{max-width:1280px;margin:0 auto;display:flex;flex-direction:column;gap:var(--gap)}
  .card{
    background:var(--canvas); border-radius:var(--r); padding:var(--pad) var(--padx);
    box-shadow:8px 8px 16px var(--lo), -6px -6px 14px var(--hi);
  }
  .well{
    border-radius:var(--rw); padding:14px;
    box-shadow:inset 4px 4px 9px var(--lo), inset -4px -4px 9px var(--hi);
  }
  /* Kartenkopf: Titel + Untertitel bilden IMMER denselben Block (feste Höhe),
     damit die Charts in benachbarten Spalten auf gleicher Höhe beginnen. */
  h2{font-size:13.5px;font-weight:650;color:var(--ink);letter-spacing:.2px;line-height:1.3}
  .sub{font-size:11.5px;line-height:1.35;color:var(--ink3)}
  h2+.sub{margin-top:2px}
  .chead{min-height:36px;margin-bottom:12px}
  .chead.tight{min-height:0;margin-bottom:10px}
  .chead+.chead,.well+.chead{margin-top:16px}
  /* Platzhalter-Tabs, bis das Backend die echten Daten liefert */
  .soon{padding:44px 26px;text-align:center;max-width:62ch;margin:0 auto}
  .soon h2{font-size:19px;margin-bottom:10px}
  .soon p{font-size:13px;line-height:1.65;color:var(--ink3)}
  .soon .badge{display:inline-block;margin-top:16px;font-size:10.5px;font-weight:700;
    letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);padding:6px 14px;border-radius:999px;
    box-shadow:inset 3px 3px 7px var(--lo),inset -3px -3px 7px var(--hi)}
  .empty{padding:26px 10px;text-align:center;font-size:12.5px;color:var(--ink3)}

  /* ---------- Topbar ----------
     Rangfolge, festgelegt am Bildschirmfoto (28.07.2026):
     Vorher trugen fuenf Gruppen dasselbe Gewicht, und der GROESSTE Text der
     Zeile war „LoL Stats" (17 px) — der Blick landete auf dem Namen der Seite,
     der nichts verraet, was man nicht schon weiss. Die Reiter, also der Weg zu
     allem, waren mit 11 px der kleinste Text.
     Jetzt gilt: die REITERLEISTE ist der Blickfang, die Marke ist Beiwerk,
     die Vorwahlen (Skin/Sprache) sind leise. Und der Akzentton bedeutet in
     dieser Zeile nur noch EINES: „hier stehst du". Deshalb markieren die
     Vorwahlen ihren aktiven Knopf in --ink statt in --cyan — sonst buhlen
     drei Cyan-Marken um denselben Blick. */
  .topbar{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:13px 24px}
  /* Marke: da, aber klein und ruhig (Wunsch des Nutzers). Aus 44 px Kachel +
     17 px Fettschrift wird 28 px + 12,5 px in --ink2. */
  .logo{width:28px;height:28px;border-radius:9px;display:flex;align-items:center;justify-content:center;
    font-weight:800;font-size:10.5px;color:var(--cyan);letter-spacing:.4px;flex:0 0 auto;
    box-shadow:inset 3px 3px 6px var(--lo),inset -3px -3px 6px var(--hi)}
  .appname{font-size:12.5px;font-weight:650;letter-spacing:.2px;color:var(--ink2)}
  .appname span{color:var(--ink3);font-weight:500;font-size:12px;display:block;letter-spacing:.6px;text-transform:uppercase}
  .tb-profile{display:flex;align-items:center;gap:14px;margin-left:14px;padding-left:20px;
    border-left:1px solid var(--grid)}
  .avatar{width:42px;height:42px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
    font-size:16px;font-weight:700;color:var(--violet);
    box-shadow:6px 6px 12px var(--lo),-5px -5px 10px var(--hi)}
  .who .name{font-size:15px;font-weight:700}
  .who .name span{color:var(--ink3);font-weight:500}
  .who .meta{font-size:11.5px;color:var(--ink2);margin-top:1px}
  .rankgem{display:inline-block;width:9px;height:9px;border-radius:3px;background:linear-gradient(135deg,#e8c15c,#a8760f);margin-right:5px;vertical-align:-1px}
  /* Bedienelemente (Skin, Sprache, Sync, Admin) stehen wieder in DERSELBEN
     Zeile wie alles andere (Wunsch des Nutzers, 28.07.2026 abends — die
     zweizeilige Fassung von nachmittags ist damit zurueckgenommen).
     Kein `flex:1 1 100%` mehr; sie reihen sich rechts an den Accountblock.
     Der Sync-Status weicht in schmalen Fenstern wieder als Erstes, weil er
     die einzige Angabe hier ist, die auch woanders steht (Admin-Tab) -
     siehe die Regel weiter unten. Am Telefon greift ohnehin der eigene
     Umbruchpunkt. */
  .tb-sync{display:flex;align-items:center;justify-content:flex-end;
    gap:12px;flex-wrap:nowrap;min-width:0}
  /* Vorwahlen: Skin und Sprache gehoeren zusammen, also stehen sie auch
     zusammen — enger Innenabstand, gemeinsamer Block. Sie treten zurueck
     (kleiner, --ink3, keine eigene Mulde), damit die Reiterleiste die einzige
     auffaellige Knopfgruppe der Zeile bleibt. Verschwinden tun sie nicht. */
  .tb-prefs{display:flex;align-items:center;gap:6px;flex:0 0 auto}
  .tb-prefs .seg{padding:2px;box-shadow:none;background:transparent}
  .tb-prefs .seg button{font-size:10px;font-weight:700;letter-spacing:.3px;padding:4px 7px;
    color:var(--ink3)}
  .tb-prefs .seg button:hover{color:var(--ink2)}
  /* Aktiv = --ink, NICHT --cyan: der Akzent ist in dieser Zeile fuer die
     Navigation reserviert. Die Mulde bleibt als zweiter Kanal. */
  .tb-prefs .seg button.on{color:var(--ink);background:var(--canvas);
    box-shadow:inset 2px 2px 5px var(--lo),inset -2px -2px 5px var(--hi)}
  .syncstat{font-size:11.5px;color:var(--ink3);white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis}
  .btn{
    border:0;font:inherit;font-size:12.5px;font-weight:700;color:var(--cyan);cursor:pointer;
    background:var(--canvas);padding:9px 18px;border-radius:12px;
    box-shadow:5px 5px 10px var(--lo),-4px -4px 9px var(--hi);transition:box-shadow .15s
  }
  .btn:hover{color:#7ad4f0}
  .btn:active{box-shadow:inset 4px 4px 8px var(--lo),inset -4px -4px 8px var(--hi)}

  /* ---------- Filterbar ---------- */
  .stickybar{position:sticky;top:0;z-index:40;background:var(--canvas);
    margin:-8px -28px 0;padding:8px 28px 4px}
  /* Zwei bewusst gebildete Zeilen statt zufälligem Umbruch:
     oben der Umfang (Games/Zeitraum), unten die Auswahl (Rolle/Queue/Champion). */
  /* Alle Filter in EINER Leiste. Trenner zwischen den Gruppen statt Zeilenumbruch;
     erst bei wirklich schmalen Fenstern darf umbrochen werden. */
  .filterbar{display:flex;align-items:center;gap:0 14px;flex-wrap:wrap;padding:9px 14px}
  .fgroup{display:flex;align-items:center;gap:7px;padding:3px 0}
  .fgroup+.fgroup{border-left:1px solid rgba(0,0,0,.34);padding-left:14px;box-shadow:-1px 0 0 var(--hi)}
  .flbl{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--ink3);white-space:nowrap}
  .seg{display:inline-flex;gap:2px;padding:3px;border-radius:11px;
    box-shadow:inset 4px 4px 8px var(--lo),inset -4px -4px 8px var(--hi)}
  .seg button{
    border:0;background:transparent;color:var(--ink3);font:inherit;font-size:11.5px;font-weight:600;
    padding:5px 9px;border-radius:9px;cursor:pointer;display:inline-flex;align-items:center;gap:4px;
    transition:color .12s;white-space:nowrap}
  .seg button:hover{color:var(--ink2)}
  .seg button.on{color:var(--cyan);background:var(--canvas);
    box-shadow:4px 4px 8px rgba(0,0,0,.42),-3px -3px 7px var(--hi)}
  .seg button svg{display:block}
  .selwrap{position:relative;display:inline-block}
  .selwrap::after{content:"▾";position:absolute;right:12px;top:50%;transform:translateY(-52%);
    color:var(--ink3);pointer-events:none;font-size:10px}
  select{
    appearance:none;-webkit-appearance:none;border:0;outline:none;cursor:pointer;
    background:var(--canvas);color:var(--ink);font:inherit;font-size:11.5px;font-weight:600;
    padding:7px 28px 7px 12px;border-radius:11px;
    box-shadow:inset 4px 4px 8px var(--lo),inset -4px -4px 8px var(--hi)}
  select option{background:#2b313b;color:var(--ink)}