:root {
  --bg:      #0a0c0f;
  --surface: #13171e;
  --border:  #1e2530;
  --accent:  #c8a84b;
  --accent2: #3b82f6;
  --text:    #e8eaf0;
  --muted:   #5a6478;
  --danger:  #ef4444;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ── Header ── */
header {
  border-bottom: 1px solid var(--border);
  padding: 0 2rem;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 10;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

/* Hamburger-Button: nur auf Mobile sichtbar */
#nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 1.1rem;
  line-height: 1;
  padding: 0.3rem 0.6rem;
  border-radius: 4px;
  cursor: pointer;
}

.logo {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.5rem;
  letter-spacing: 0.12em;
  color: var(--accent);
  white-space: nowrap;
}
.logo span { color: var(--text); }

#user-badge {
  display: none;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--muted);
}
.badge-name { color: var(--text); font-weight: 600; }

#logout-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 0.25rem 0.75rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.8rem;
  transition: border-color 0.2s, color 0.2s;
}
#logout-btn:hover { border-color: var(--accent); color: var(--accent); }

/* ── Login ── */
#login-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 2rem;
  text-align: center;
}

.field-label {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 3.5rem;
  letter-spacing: 0.06em;
  line-height: 1;
  margin-bottom: 0.5rem;
}
.field-label span { color: var(--accent); }

.tagline {
  color: var(--muted);
  font-size: 0.95rem;
  margin-bottom: 2.5rem;
  max-width: 340px;
}

.login-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 2rem;
  width: 100%;
  max-width: 360px;
}
.login-box label {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-bottom: 0.5rem;
}
.login-box input {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 0.75rem 1rem;
  border-radius: 6px;
  font-size: 1rem;
  font-family: 'Inter', sans-serif;
  outline: none;
  transition: border-color 0.2s;
  margin-bottom: 1rem;
}
.login-box input:focus { border-color: var(--accent); }

.btn-primary {
  width: 100%;
  background: var(--accent);
  color: #0a0c0f;
  border: none;
  padding: 0.8rem;
  border-radius: 6px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.1rem;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: opacity 0.2s;
}
.btn-primary:hover { opacity: 0.85; }
.btn-primary:disabled { opacity: 0.4; cursor: not-allowed; }

.error-msg {
  color: var(--danger);
  font-size: 0.82rem;
  margin-top: 0.75rem;
  display: none;
}

/* ── App ── */
#app-screen {
  display: none;
  padding: 2rem;
  min-width: 0;        /* Sidebar links verankert, Content fuellt den Rest; kein Zentrier-Sprung */
}

.section-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.2rem;
  letter-spacing: 0.1em;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 1rem;
}

/* ── Liga Cards ── */
.leagues-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
  margin-bottom: 2.5rem;
}

.league-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.25rem;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.15s;
}
.league-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.league-card.active { border-color: var(--accent); background: #1a1810; }

.league-name {
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 0.4rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.league-meta {
  font-size: 0.78rem;
  color: var(--muted);
  font-family: 'JetBrains Mono', monospace;
  margin-bottom: 0.6rem;
}

.badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 3px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-right: 0.4rem;
}
.badge-sf      { background: #1e3a5f; color: var(--accent2); }
.badge-dynasty { background: #2d1f00; color: var(--accent); }

/* ── Workspace: Sidebar + Content ── */
.workspace {
  display: none;          /* erst nach Liga-Auswahl per JS auf grid */
  grid-template-columns: 200px 1fr;
  gap: 1.5rem;
  align-items: start;
}

.sidebar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem 0.75rem;
  position: sticky;
  top: 72px;            /* unter dem Header */
}

.nav-group { margin-bottom: 1.25rem; }
.nav-group:last-child { margin-bottom: 0; }

.nav-group-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 0 0.5rem;
  margin-bottom: 0.4rem;
}

.nav-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: var(--muted);
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  padding: 0.45rem 0.5rem;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.nav-item:hover { color: var(--text); background: #1a1f29; }
.nav-item.active {
  color: var(--accent);
  background: #1a1810;
  font-weight: 600;
}

.content { min-width: 0; max-width: 1200px; }   /* Tabelle darf schrumpfen; Content sinnvoll begrenzt, linksbuendig */

/* ── Views ── */
.view { display: none; }
.view.active { display: block; }

.placeholder {
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: 8px;
  padding: 3rem 2rem;
  text-align: center;
  color: var(--muted);
}
.placeholder-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.4rem;
  letter-spacing: 0.1em;
  color: var(--text);
  margin-bottom: 0.5rem;
}
.placeholder p { font-size: 0.9rem; max-width: 420px; margin: 0 auto; }

/* ── Roster ── */
.roster-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.position-filters { display: flex; gap: 0.4rem; flex-wrap: wrap; }

.pos-btn {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 0.25rem 0.7rem;
  border-radius: 4px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  font-family: 'JetBrains Mono', monospace;
}
.pos-btn:hover, .pos-btn.active {
  border-color: var(--accent);
  color: var(--accent);
  background: #1a1810;
}

/* ── Stats Bar ── */
.stats-bar {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 2rem;
  padding: 1rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  flex-wrap: wrap;
}
.stat-item { text-align: center; }
.stat-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.8rem;
  color: var(--accent);
  line-height: 1;
}
.stat-lbl {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-top: 0.15rem;
}

/* ── Table ── */
.table-wrap { overflow-x: auto; }   /* horizontal scrollbar auf schmalen Screens */
table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
thead tr { border-bottom: 1px solid var(--border); }
th {
  text-align: left;
  padding: 0.6rem 0.75rem;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  font-weight: 500;
  white-space: nowrap;
}
tbody tr { border-bottom: 1px solid #0f1318; transition: background 0.1s; }
tbody tr:hover { background: var(--surface); }
td { padding: 0.65rem 0.75rem; }

.pos-tag {
  display: inline-block;
  width: 34px;
  text-align: center;
  padding: 0.15rem 0;
  border-radius: 3px;
  font-size: 0.72rem;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
}
.pos-QB  { background: #1e3a5f; color: #60a5fa; }
.pos-RB  { background: #14401f; color: #4ade80; }
.pos-WR  { background: #3b1f00; color: #fb923c; }
.pos-TE  { background: #2d1f3d; color: #c084fc; }
.pos-K   { background: #1a1a2e; color: #818cf8; }
.pos-DEF { background: #1a1a1a; color: #94a3b8; }
.pos-DL, .pos-LB, .pos-DB { background: #2d1f1f; color: #f87171; }

.player-name { font-weight: 500; }
.player-value { font-family: 'JetBrains Mono', monospace; font-weight: 600; color: var(--accent); }
.player-no-value { color: var(--muted); }
.player-age  { color: var(--muted); font-family: 'JetBrains Mono', monospace; font-size: 0.8rem; }
.player-team { color: var(--muted); font-size: 0.82rem; font-family: 'JetBrains Mono', monospace; }
.player-idp  { color: var(--muted); font-size: 0.78rem; }

.elite-badge { font-size: 0.75rem; white-space: nowrap; }

/* ── Loading ── */
.spinner {
  width: 18px; height: 18px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.5rem;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-text { color: var(--muted); font-size: 0.9rem; vertical-align: middle; }

/* ── Liga-Switcher (Chip + Dropdown im Header) ── */
.league-switcher { position: relative; display: none; }  /* per JS sichtbar wenn Liga gewählt */

.league-chip {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: #1a1810;
  border: 1px solid var(--accent);
  color: var(--accent);
  padding: 0.3rem 0.7rem;
  border-radius: 6px;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  max-width: 220px;
}
.league-chip #league-chip-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chip-caret { font-size: 0.7rem; opacity: 0.8; }

.league-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 220px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.4rem;
  z-index: 50;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.league-menu.open { display: block; }

.league-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  padding: 0.5rem 0.6rem;
  border-radius: 5px;
  cursor: pointer;
}
.league-menu-item:hover { background: #1a1f29; }
.league-menu-item.active { color: var(--accent); background: #1a1810; }
.league-menu-item .lm-meta {
  display: block;
  font-size: 0.72rem;
  color: var(--muted);
  font-family: 'JetBrains Mono', monospace;
  margin-top: 0.1rem;
}

/* ── Position Groups ── */
.pg-list { display: flex; flex-direction: column; gap: 0.6rem; }

.pg-room {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.pg-room-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  background: none;
  border: none;
  color: var(--text);
  padding: 0.85rem 1rem;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  text-align: left;
}
.pg-room-head:hover { background: #1a1f29; }

.pg-room-title {
  font-weight: 600;
  font-size: 0.9rem;
}
.pg-room-stat {
  margin-left: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85rem;
  color: var(--accent);
}
.pg-room-rank {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85rem;
  color: var(--text);
  min-width: 72px;
  text-align: right;
}
.pg-room-note {
  margin-left: auto;
  font-size: 0.8rem;
  color: var(--muted);
  font-style: italic;
}
.pg-caret { color: var(--muted); transition: transform 0.15s; font-size: 0.75rem; }
.pg-room.open .pg-caret { transform: rotate(180deg); }

.pg-room-body { display: none; border-top: 1px solid var(--border); }
.pg-room.open .pg-room-body { display: block; }

.pg-player {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 1rem;
  border-bottom: 1px solid #0f1318;
  font-size: 0.85rem;
}
.pg-player:last-child { border-bottom: none; }
.pg-player-name { flex: 1; }
.pg-player-rank {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  color: var(--muted);
  min-width: 60px;
}
.pg-player-val {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  color: var(--accent);
  min-width: 48px;
  text-align: right;
}

/* ── Mobile: Sidebar einklappbar ── */
@media (max-width: 768px) {
  header { padding: 0 1rem; }

  .logo { font-size: 1.2rem; letter-spacing: 0.08em; }

  #user-badge { font-size: 0.75rem; gap: 0.35rem; }
  #user-badge .badge-name { display: none; }   /* Name weglassen, Platz für Liga-Chip */
  .league-chip { max-width: 150px; font-size: 0.78rem; }

  #app-screen { padding: 1rem; }

  #nav-toggle { display: block; }

  /* Workspace wird einspaltig: Menü oben (wenn offen), Inhalt darunter */
  .workspace {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  /* Sidebar standardmaessig komplett versteckt */
  .sidebar {
    position: static;
    display: none;
    margin-bottom: 0;
  }
  /* nur wenn per Hamburger geoeffnet: als eigene Box zeigen */
  .sidebar.open {
    display: block;
  }
}
/* ══════════════════════════════════════════════════════════════════
   PLAYER-BEWERTUNG — Styles (ans Ende von css/style.css anhängen)
   ══════════════════════════════════════════════════════════════════ */

/* Hinweiszeile + Legende */
.pb-hint {
  color: var(--muted);
  font-size: .85rem;
  margin: 0 0 1rem;
}
.pb-legend {
  display: inline-block;
  padding: .1rem .4rem;
  border-radius: 4px;
  font-size: .75rem;
  font-weight: 600;
  margin: 0 .1rem;
}
.pb-legend.pb-mine { background: rgba(212,175,55,.2); color: var(--gold, #d4af37); }
.pb-legend.pb-fa   { background: rgba(120,120,140,.2); color: var(--muted); }

/* Spielerzeile: Grid mit Rang | Name | Team | Status | Wert */
.pb-player {
  display: grid;
  grid-template-columns: 3.5rem 1fr 3rem auto 3.5rem;
  align-items: center;
  gap: .6rem;
}
.pb-player-mine {
  background: rgba(212,175,55,.08);
  border-left: 2px solid var(--gold, #d4af37);
}

.pb-rank {
  font-size: .75rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.pb-team {
  font-size: .75rem;
  color: var(--muted);
  text-align: center;
}
.pb-status { text-align: right; }

/* Roster-Status-Chips */
.pb-chip {
  display: inline-block;
  padding: .12rem .45rem;
  border-radius: 4px;
  font-size: .7rem;
  font-weight: 600;
  white-space: nowrap;
  max-width: 8rem;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pb-chip-fa {
  background: rgba(120,120,140,.18);
  color: var(--muted);
}
.pb-chip-mine {
  background: rgba(212,175,55,.25);
  color: var(--gold, #d4af37);
}
.pb-chip-rostered {
  background: rgba(90,120,180,.18);
  color: #8fb0e0;
}

/* auf schmalen Screens: Team ausblenden, kompakter */
@media (max-width: 600px) {
  .pb-player { grid-template-columns: 3rem 1fr auto 3rem; }
  .pb-team { display: none; }
}
/* ══════════════════════════════════════════════════════════════════
   MODUS-UMSCHALTER (Player-Bewertung: Dynasty / Win-Now / Rebuild)
   ══════════════════════════════════════════════════════════════════ */
.modebar-label {
  font-family: 'Bebas Neue', sans-serif;
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 .4rem;
}

.pb-modebar {
  display: inline-flex;
  gap: .25rem;
  background: rgba(255,255,255,.03);
  border: 1px solid #1e2632;
  border-radius: 8px;
  padding: .25rem;
  margin: 0 0 .75rem;
}
.pb-mode-btn {
  background: transparent;
  border: none;
  color: var(--muted);
  padding: .4rem .9rem;
  border-radius: 6px;
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.pb-mode-btn:hover { color: #fff; }
.pb-mode-btn.active {
  background: var(--gold, #d4af37);
  color: #0d0d0d;
}

/* ── Kader: Slot-Ansicht ─────────────────────────────── */
#roster-slots { display: block; }
.slot-section { margin-bottom: 1.25rem; }
.slot-section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: .4rem .1rem; margin-bottom: .35rem;
  border-bottom: 1px solid var(--border);
}
.slot-section-title {
  font-family: 'Bebas Neue', sans-serif; letter-spacing: .04em;
  font-size: 1.05rem; color: var(--text);
}
.slot-section-meta {
  font-family: 'JetBrains Mono', monospace; font-size: .78rem; color: var(--muted);
}
.slot-row {
  display: grid;
  grid-template-columns: 44px 34px 1fr auto auto;
  align-items: center; gap: .6rem;
  padding: .45rem .5rem; border-radius: 6px;
}
.slot-row:nth-child(odd) { background: rgba(255,255,255,.02); }
.slot-tag {
  font-family: 'JetBrains Mono', monospace; font-weight: 700;
  font-size: .74rem; color: var(--accent); text-align: center;
}
.slot-tag-muted { color: var(--muted); }
.slot-name {
  font-weight: 500; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.slot-team {
  font-family: 'JetBrains Mono', monospace; font-size: .78rem; color: var(--muted);
}
.slot-val {
  font-family: 'JetBrains Mono', monospace; font-weight: 600;
  color: var(--accent); min-width: 3ch; text-align: right;
}
.slot-empty { opacity: .55; }
.slot-empty-txt { color: var(--muted); font-style: italic; grid-column: 2 / -1; }

/* ═══ Trade-Autocomplete ═══════════════════════════════════════════════ */
.trade-ac-wrap { position: relative; margin-top: .5rem; }
.trade-ac-input {
  width: 100%; box-sizing: border-box; padding: .55rem .7rem;
  background: #151a22; border: 1px solid #2a3441; border-radius: 6px;
  color: #e6e6e6; font-size: .95rem;
}
.trade-ac-input:focus { outline: none; border-color: #e8c96a; }
.trade-ac-input::placeholder { color: #8b94a3; }
.trade-sg {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 50;
  background: #12161d; border: 1px solid #2a3441; border-radius: 8px;
  max-height: 440px; overflow-y: auto;
  box-shadow: 0 12px 32px rgba(0,0,0,.45);
}
.trade-sg-item {
  display: flex; justify-content: space-between; align-items: center; gap: .75rem;
  padding: .5rem .7rem; cursor: pointer; border-bottom: 1px solid #1b222c;
}
.trade-sg-item:last-child { border-bottom: none; }
.trade-sg-item.trade-sg-active { background: #1e2530; }
.trade-sg-name { color: #e8e8ea; font-weight: 500; }
.trade-sg-meta { color: #8b94a3; font-size: .82rem; white-space: nowrap; }
.trade-sg-meta strong { color: #e8c96a; }
.trade-sg-item:hover { background: #1e2530; }

/* ═══ Weekly Overview — Bye-Matrix ═══════════════════════════════════ */
.wk-wrap { max-width: 1000px; }
.wk-tablewrap { overflow-x: auto; border: 1px solid #212a35; border-radius: 10px; }
.wk-table { border-collapse: collapse; width: 100%; font-size: .85rem; }
.wk-table th, .wk-table td { text-align: center; padding: .45rem .35rem; border-bottom: 1px solid #1b222c; }
.wk-col { color: #8b94a3; font-weight: 600; width: 2.2rem; font-family: 'JetBrains Mono', monospace; }
.wk-poshead { text-align: left; color: #e8e8ea; font-weight: 600; white-space: nowrap; padding-left: .75rem; background: #0f141b; position: sticky; left: 0; }
.wk-need { color: #8b94a3; font-size: .75rem; font-weight: 400; }
.wk-cell { color: #e6e6e6; font-family: 'JetBrains Mono', monospace; }
.wk-bye   { background: #1a2230; color: #8b94a3; }
.wk-tight { background: #3a3416; color: #e8c96a; font-weight: 600; }
.wk-hole  { background: #3d1d1d; color: #f0a0a0; font-weight: 700; }
.wk-legend { display: inline-block; padding: 0 .4rem; border-radius: 4px; font-size: .8rem; }
.wk-ok { background: #10241a; border: 1px solid #1f5138; color: #6ee7b7; border-radius: 8px; padding: .75rem 1rem; margin-bottom: 1rem; }
.wk-problems { background: #0f141b; border: 1px solid #4a2020; border-radius: 8px; padding: .75rem 1rem; margin-bottom: 1rem; }
.wk-problems-title { color: #f0a35e; font-weight: 600; margin-bottom: .5rem; }
.wk-problem-row { color: #cbd2dc; font-size: .9rem; padding: .2rem 0; }
.wk-problem-row strong { color: #f0a0a0; }

/* ═══ Weekly Builder — Slot-Sandkasten ═══════════════════════════════ */
.wkb-weeks { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .75rem; }
.wkb-week {
  position: relative; min-width: 2.1rem; padding: .35rem .4rem;
  background: #151a22; border: 1px solid #2a3441; border-radius: 6px;
  color: #8b94a3; cursor: pointer; font-family: 'JetBrains Mono', monospace; font-size: .85rem;
}
.wkb-week:hover { border-color: #3a4757; color: #e6e6e6; }
.wkb-week-ok    { border-color: #2f6b43; background: rgba(63,185,80,.12); }
.wkb-week-tight { border-color: #6b5a24; background: rgba(224,180,60,.16); color: #e8c96a; }
.wkb-week-hole  { border-color: #6b3030; background: rgba(220,80,80,.20); color: #f0a0a0; }
.wkb-week-active { background: #e8c96a; border-color: #e8c96a; color: #10141a; font-weight: 700; }
/* Wochen-Ampel in den Kopfzeilen von Overview (wk-col) und Saison (wkq-col) */
.wk-col.wk-week-ok,    .wkq-col.wkq-week-ok    { background: rgba(63,185,80,.14);  color: #7fd79a; border-radius: 4px 4px 0 0; }
.wk-col.wk-week-tight, .wkq-col.wkq-week-tight { background: rgba(224,180,60,.16); color: #e8c96a; border-radius: 4px 4px 0 0; }
.wk-col.wk-week-hole,  .wkq-col.wkq-week-hole  { background: rgba(220,80,80,.24);  color: #f0a0a0; border-radius: 4px 4px 0 0; }
.wkb-week-dot {
  position: absolute; top: -6px; right: -6px; background: #a33; color: #fff;
  border-radius: 999px; font-size: .62rem; padding: 0 .28rem; line-height: 1.35;
}
.wkb-status {
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem;
  background: #0f141b; border: 1px solid #212a35; border-radius: 8px;
  padding: .55rem .85rem; margin-bottom: 1rem; font-size: .9rem;
}
.wkb-ok   { color: #6ee7b7; }
.wkb-warn { color: #f0a35e; }
.wkb-sum  { color: #8b94a3; font-family: 'JetBrains Mono', monospace; margin-left: auto; }
.wkb-reset {
  background: none; border: 1px solid #2a3441; color: #8b94a3;
  border-radius: 6px; cursor: pointer; padding: .3rem .7rem; font-size: .82rem;
}
.wkb-reset:hover { color: #e6e6e6; border-color: #3a4757; }
.wkb-optimize { color: #57c98a; border-color: #2f6b43; }
.wkb-optimize:hover { color: #86efac; border-color: #57c98a; }
.wkb-strength {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem 1.25rem;
  background: #0f141b; border: 1px solid #212a35; border-radius: 8px;
  padding: .6rem .9rem; margin-bottom: 1rem;
}
.wkb-strength-main { display: flex; align-items: baseline; gap: .55rem; }
.wkb-strength-label { color: #8b94a3; font-size: .9rem; }
.wkb-strength-label small { color: #5f6b7a; }
.wkb-strength-val { color: #e8c96a; font-weight: 700; font-size: 1.4rem; font-family: 'JetBrains Mono', monospace; }
.wkb-strength-ref { color: #8b94a3; font-size: .85rem; }
.wkb-strength-ref strong { color: #e6e6e6; }
.wkb-row { position: relative; }
.wkb-row.wkb-bye { background: #2a1618; }
.wkb-flag {
  background: #5b2020; color: #f0a0a0; border-radius: 4px;
  padding: 0 .35rem; font-size: .68rem; font-weight: 700; letter-spacing: .04em; margin-left: .4rem;
}
.wkb-swap {
  background: none; border: 1px solid #2f6b43; color: #57c98a; border-radius: 6px;
  cursor: pointer; padding: .15rem .45rem; font-size: .9rem; line-height: 1.2; margin-left: .5rem;
}
.wkb-swap:hover { color: #86efac; border-color: #57c98a; background: #12241a; }
/* Nur der Sandkasten-Button "Auf eigenen Kader zurücksetzen" */
.wkb-reset-orange { color: #e0a44e; border-color: #6b4a24; }
.wkb-reset-orange:hover { color: #f0b968; border-color: #e0a44e; }
.wkb-picker {
  background: #0d1117; border: 1px solid #2a3441; border-left: 3px solid #e8c96a;
  border-radius: 0 6px 6px 0; margin: 0 0 .35rem 2.2rem; max-height: 260px; overflow-y: auto;
}
.wkb-cand {
  display: flex; justify-content: space-between; align-items: center; gap: .75rem;
  padding: .4rem .7rem; cursor: pointer; border-bottom: 1px solid #171d26;
}
.wkb-cand:last-child { border-bottom: none; }
.wkb-cand:hover { background: #1e2530; }
.wkb-cand-name { color: #e8e8ea; }
.wkb-cand-meta { color: #8b94a3; font-size: .8rem; white-space: nowrap; }
.wkb-cand-meta strong { color: #e8c96a; }
.wkb-cand-bye { opacity: .55; }
.wkb-cand-clear { color: #8b94a3; font-style: italic; }
.wkb-cand-empty { color: #8b94a3; cursor: default; font-style: italic; }
.wkb-cand-empty:hover { background: none; }

/* ═══ Sandkasten — Besitz-Kennzeichnung + Suchfeld ═══════════════════ */
.wks-own {
  background: #1e2530; color: #8b94a3; border-radius: 4px;
  padding: 0 .35rem; font-size: .66rem; font-weight: 600;
  letter-spacing: .03em; margin-left: .4rem; white-space: nowrap;
}
.wks-own-me { background: #1f3a2c; color: #6ee7b7; }
.wks-own-fa { background: #2a3a1c; color: #a8d05a; }
.wks-picker { padding-top: .4rem; }
.wks-search {
  width: calc(100% - 1.4rem); box-sizing: border-box; margin: 0 .7rem .4rem;
  padding: .45rem .6rem; background: #151a22; border: 1px solid #2a3441;
  border-radius: 6px; color: #e6e6e6; font-size: .88rem;
}
.wks-search:focus { outline: none; border-color: #e8c96a; }
.wks-search::placeholder { color: #8b94a3; }
#wks-cands { max-height: 260px; overflow-y: auto; }

/* ═══ Trade → Sandkasten ═════════════════════════════════════════════ */
.trade-to-sand {
  margin-top: .75rem; margin-left: .5rem;
  background: #1f2a1c; border: 1px solid #3d5a2a; color: #a8d05a;
  border-radius: 6px; cursor: pointer; padding: .4rem .8rem; font-size: .9rem;
}
.trade-to-sand:hover { background: #26331f; border-color: #4f7336; color: #c3e57a; }
.wks-own-trade { background: #3a2a1a; color: #f0a35e; }
.wks-trade {
  background: #0f141b; border: 1px solid #3a2f1a; border-left: 3px solid #e8c96a;
  border-radius: 8px; padding: .7rem .9rem; margin-bottom: 1rem;
}
.wks-trade-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .5rem; }
.wks-trade-title { color: #e8c96a; font-weight: 600; }
.wks-trade-row { color: #cbd2dc; font-size: .88rem; padding: .15rem 0; }
.wks-in, .wks-out {
  display: inline-block; min-width: 8.5rem; font-size: .7rem;
  font-weight: 700; letter-spacing: .04em; margin-right: .5rem;
}
.wks-in  { color: #6ee7b7; }
.wks-out { color: #f0a0a0; }
.wks-trade-note { color: #f0a35e; font-size: .82rem; margin-top: .45rem; font-style: italic; }

/* ═══ Saison-Tabelle (Entwurf) ═══════════════════════════════════════ */
.wkq-draft {
  background: #3a3416; color: #e8c96a; border-radius: 3px;
  padding: 0 .25rem; font-size: .6rem; margin-left: .3rem; vertical-align: middle;
}
.wkq-table { border-collapse: collapse; width: 100%; font-size: .8rem; }
.wkq-table th, .wkq-table td { border-bottom: 1px solid #171d26; padding: .3rem .25rem; text-align: center; }
.wkq-headname { text-align: left !important; padding-left: .75rem !important; color: #8b94a3; }
.wkq-name {
  text-align: left !important; white-space: nowrap; padding-left: .75rem !important;
  background: #0f141b; position: sticky; left: 0; z-index: 2; min-width: 190px;
}
.wkq-slot {
  display: inline-block; min-width: 2.2rem; color: #8b94a3;
  font-family: 'JetBrains Mono', monospace; font-size: .68rem;
}
.wkq-slot-bn { color: #55606e; }
.wkq-pname { color: #e8e8ea; margin-right: .4rem; }
.wkq-pmeta { color: #8b94a3; font-size: .72rem; }
.wkq-empty .wkq-pname { color: #55606e; font-style: italic; }
.wkq-col { color: #8b94a3; font-weight: 600; width: 2rem; font-family: 'JetBrains Mono', monospace; }
.wkq-col-problem { color: #f0a0a0; background: #2a1618; border-radius: 4px 4px 0 0; }
.wkq-cell { font-family: 'JetBrains Mono', monospace; font-size: .7rem; }
.wkq-play { color: #2e3947; }
.wkq-bye { background: #3d1d1d; color: #f0a0a0; font-weight: 700; font-size: .58rem; letter-spacing: .02em; }
.wkq-unknown { color: #6b5a2a; }
.wkq-row-bench .wkq-pname { color: #b9c0c9; }
.wkq-row-sum .wkq-pname { color: #e8c96a; font-weight: 600; }
.wkq-sum-ok    { color: #4a5a52; }
.wkq-sum-tight { background: #3a3416; color: #e8c96a; font-weight: 600; }
.wkq-sum-hole  { background: #3d1d1d; color: #f0a0a0; font-weight: 700; }
.wkq-sep td { background: #0c1017; border-bottom: 1px solid #212a35; padding: .3rem .25rem; }
.wkq-sep-txt {
  color: #8b94a3 !important; font-size: .7rem; text-transform: uppercase;
  letter-spacing: .06em; font-weight: 600;
}
.wkq-banner { border-radius: 8px; padding: .6rem .9rem; margin-bottom: .75rem; font-size: .9rem; }
.wkq-banner-ok   { background: #10241a; border: 1px solid #1f5138; color: #6ee7b7; }
.wkq-banner-warn { background: #1c1216; border: 1px solid #4a2020; color: #f0a35e; }
.wkq-legend { display: inline-block; padding: 0 .3rem; border-radius: 3px; font-size: .68rem; }

/* ═══ Sandkasten in Tabellen-Optik + Taxi-Abschnitt ══════════════════ */
.wkq-swap {
  margin-left: .5rem; padding: 0 .35rem; font-size: .78rem; vertical-align: middle;
}
.wkq-picker-row td { padding: 0 !important; background: #0d1117; }
.wkq-picker-row .wkb-picker { margin: 0 0 .4rem 0; border-left-width: 3px; }
.wkq-sep-taxi td { background: #0e1219; border-top: 1px solid #2a3441; }
.wkq-row-taxi .wkq-pname { color: #9aa3ae; }
.wkq-row-taxi .wkq-slot { color: #6b7684; }
.wkb-cand-bw { color: #f0a0a0; }

/* Builder-Zeile: 6 Spalten, damit ⇄ neben dem Namen bleibt (kein Umbruch) */
.wkb-row { grid-template-columns: 44px 34px 1fr auto auto auto; }
.wkb-row .wkb-swap { justify-self: start; margin-left: .2rem; }
.wkb-flag { display: inline-block; }

/* ═══ Free Agent Simulator ═══════════════════════════════════════════ */
.fa-wrap { max-width: 900px; }
.fa-intro { color: #8b94a3; font-size: .9rem; margin: .25rem 0 1rem; line-height: 1.5; }
.fa-banner { border-radius: 8px; padding: .6rem .9rem; margin: 1rem 0 .6rem; font-size: .9rem; }
.fa-banner-ok   { background: #10241a; border: 1px solid #1f5138; color: #6ee7b7; }
.fa-banner-none { background: #0f141b; border: 1px solid #212a35; color: #8b94a3; }
.fa-list { display: flex; flex-direction: column; gap: .35rem; }
.fa-row {
  display: grid; grid-template-columns: 1fr auto 1fr auto;
  align-items: center; gap: .75rem;
  background: #0f141b; border: 1px solid #1b222c; border-radius: 8px; padding: .5rem .75rem;
}
.fa-row:hover { border-color: #2a3441; }
.fa-side { display: flex; align-items: center; gap: .4rem; min-width: 0; }
.fa-lbl {
  font-family: 'JetBrains Mono', monospace; font-size: .6rem; font-weight: 700;
  letter-spacing: .06em; color: #f0a0a0; background: #2a1618;
  border-radius: 3px; padding: .1rem .3rem;
}
.fa-lbl-add { color: #6ee7b7; background: #10241a; }
.fa-chip { display: flex; align-items: center; gap: .4rem; min-width: 0; }
.fa-name { color: #e8e8ea; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fa-meta { color: #8b94a3; font-size: .76rem; white-space: nowrap; }
.fa-val { color: #e8c96a; font-family: 'JetBrains Mono', monospace; font-weight: 600; font-size: .85rem; }
.fa-arrow { color: #55606e; }
.fa-gain {
  color: #6ee7b7; font-family: 'JetBrains Mono', monospace; font-weight: 700;
  font-size: .9rem; min-width: 3.5rem; text-align: right;
}
.fa-sandbtn {
  grid-column: 1 / -1; justify-self: end; margin-top: .1rem;
  background: none; border: 1px solid #2f6b43; color: #57c98a;
  border-radius: 6px; cursor: pointer; padding: .25rem .6rem; font-size: .76rem;
}
.fa-sandbtn:hover { color: #86efac; border-color: #57c98a; background: #12241a; }
@media (max-width: 760px) {
  /* Mobile: DROP und ADD untereinander statt nebeneinander — auf schmalen
     Screens zerquetschen sich die beiden Chips sonst gegenseitig, Namen und
     Werte überlappen (Feedback Rhoderich). Gewinn rechts oben als Anker. */
  .fa-row {
    grid-template-columns: 1fr auto;
    grid-template-areas: 'drop gain' 'add gain' 'bid bid';
    row-gap: .4rem;
  }
  .fa-drop { grid-area: drop; }
  .fa-add  { grid-area: add; }
  .fa-gain { grid-area: gain; align-self: center; }
  .fa-bidline { grid-area: bid; }
  .fa-arrow { display: none; }
  /* Namen dürfen jetzt die volle Breite nutzen und werden nicht mehr
     vorzeitig abgeschnitten. */
  .fa-side { min-width: 0; }
  .fa-name { max-width: none; }
}
.fa-banner-locked { background: #1c1612; border: 1px solid #4a3a20; color: #e0a860; }
.fa-locked { opacity: .45; pointer-events: none; filter: grayscale(.6); }

/* ── Trade: Early/Mid/Late-Auswahl je Pick-Instanz ── */
.pick-tier { display: flex; gap: .3rem; margin-top: .4rem; }
.pick-tier-btn {
  background: none; border: 1px solid #2a3441; color: #8b94a3;
  border-radius: 5px; cursor: pointer; padding: .15rem .5rem; font-size: .75rem;
}
.pick-tier-btn:hover { color: #e6e9ef; border-color: #3a4655; }
.pick-tier-btn.active { background: #e8c96a; border-color: #e8c96a; color: #12161d; font-weight: 600; }

/* ── Position Groups: Starting-Roster-Block ──
   Bewusst andere Logik als die Rooms darunter: hier Spitzenstärke
   (bestmögliches Lineup inkl. Bench/Taxi), dort Kadertiefe. */
.sr-block {
  background: #0f141b; border: 1px solid #212a35; border-radius: 10px;
  padding: 1rem; margin-bottom: 1.25rem;
}
.sr-head { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; margin-bottom: .75rem; }
.sr-title { font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: .9rem; }
.sr-note  { color: #8b94a3; font-size: .8rem; }
.sr-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .6rem; }
.sr-card {
  background: #151a22; border: 1px solid #212a35; border-radius: 8px;
  padding: .6rem .75rem; text-align: center;
}
.sr-card.sr-active { border-color: #e8c96a; }
.sr-label { color: #8b94a3; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; }
.sr-val   { color: #e8c96a; font-size: 1.45rem; font-weight: 700; line-height: 1.3; }
.sr-rank  { color: #8b94a3; font-size: .8rem; }
.sr-age   { color: #8b94a3; font-size: .85rem; margin-top: .7rem; }
.sr-verdict {
  margin-top: .75rem; padding: .6rem .8rem; border-left: 3px solid #8b94a3;
  background: #12171f; border-radius: 0 6px 6px 0;
}
.sr-typ  { display: block; font-weight: 700; font-size: .95rem; margin-bottom: .2rem; }
.sr-text { color: #c3c9d4; font-size: .87rem; line-height: 1.45; }

/* ── Free Agent Simulator: Waiver-Bid-Empfehlung ──
   Spanne statt Punktzahl: echte Gebote streuen erheblich. */
/* Eigene Zeile über die volle Gridbreite — der Spielername darf nie
   verdrängt werden. */
.fa-bidline {
  grid-column: 1 / -1; margin-top: .35rem; padding-top: .35rem;
  border-top: 1px solid #1b222c;
  font-size: .8rem; color: #8b94a3;
}
.fa-bidline strong { color: #e8c96a; font-size: .9rem; }
.fa-bid-range { color: #6b7280; }
.fa-bid-rest  { color: #6b7280; }
.fa-bid-est   { color: #f0a35e; font-size: .72rem; font-style: italic; }
.fa-bidline-off { color: #7c8698; }

/* ── Trade: FAAB-Eingabe (freie Zahl statt Stufenliste) ── */
.trade-faab { display: flex; align-items: center; gap: .5rem; margin-top: .5rem; }
.trade-faab label { color: #8b94a3; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; }
.trade-faab-input {
  width: 5.5rem; background: #151a22; color: #e6e9ef;
  border: 1px solid #2a3441; border-radius: 6px; padding: .35rem .5rem;
}
.trade-faab-input:focus { outline: none; border-color: #e8c96a; }
.trade-faab-rest { color: #6b7280; font-size: .8rem; }

/* ── "What's new"-Popup ── */
.cl-overlay {
  position: fixed; inset: 0; z-index: 900;
  background: rgba(6,9,13,.72); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center; padding: 1.25rem;
}
.cl-box {
  background: #0f141b; border: 1px solid #2a3441; border-radius: 12px;
  max-width: 620px; width: 100%; max-height: 82vh; display: flex; flex-direction: column;
  box-shadow: 0 18px 50px rgba(0,0,0,.55);
}
.cl-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.15rem .75rem; border-bottom: 1px solid #1b222c;
}
.cl-title { font-weight: 700; letter-spacing: .03em; text-transform: uppercase; font-size: .92rem; }
.cl-x {
  background: none; border: none; color: #8b94a3; font-size: 1.5rem;
  line-height: 1; cursor: pointer; padding: 0 .25rem;
}
.cl-x:hover { color: #e6e9ef; }
.cl-body { padding: .5rem 1.15rem 1rem; overflow-y: auto; }
.cl-entry { padding: .85rem 0; border-bottom: 1px solid #161c25; }
.cl-entry:last-child { border-bottom: none; }
.cl-date { color: #6b7280; font-size: .76rem; letter-spacing: .04em; }
.cl-h { color: #e8c96a; font-weight: 600; margin: .15rem 0 .5rem; }
.cl-list { margin: 0; padding-left: 1.1rem; color: #c3c9d4; font-size: .88rem; line-height: 1.55; }
.cl-list li { margin-bottom: .35rem; }
.cl-foot { padding: .85rem 1.15rem 1.1rem; border-top: 1px solid #1b222c; text-align: right; }
.cl-ok {
  background: #e8c96a; color: #12161d; border: none; border-radius: 7px;
  padding: .5rem 1.3rem; font-weight: 700; cursor: pointer;
}
.cl-ok:hover { filter: brightness(1.08); }

/* ── Free Agent Simulator: Positionsfilter ── */
.fa-posbar { display: flex; flex-wrap: wrap; gap: .4rem; margin: .25rem 0 1rem; }
.fa-posbtn {
  background: #151a22; border: 1px solid #212a35; color: #8b94a3;
  border-radius: 6px; padding: .3rem .6rem; font-size: .82rem; cursor: pointer;
}
.fa-posbtn:hover { color: #e6e9ef; border-color: #2a3441; }
.fa-posbtn.active { background: #e8c96a; border-color: #e8c96a; color: #12161d; font-weight: 700; }
.fa-posn { opacity: .7; font-size: .75rem; }
.fa-posbtn.active .fa-posn { opacity: .85; }

/* ── Wert-Herleitung (qualitativ, ohne Zahlen) ──
   Balken zeigen die Mischung, nicht die Gewichte. Auf Klick aufklappbar,
   damit mobil und Desktop identisch bedienbar sind. */
.pb-has-hl { cursor: pointer; }
.hl-caret { color: #6b7280; font-size: .8rem; margin-left: .25rem; }
.pb-has-hl:hover .hl-caret { color: #e8c96a; }
.hl-box {
  display: none; grid-column: 1 / -1; margin-top: .5rem;
  background: #0c1016; border: 1px solid #1b222c; border-radius: 8px;
  padding: .7rem .85rem;
}
.hl-box.hl-open { display: block; }
.hl-label { color: #e6e9ef; font-size: .88rem; margin-bottom: .6rem; line-height: 1.4; }
.hl-bars { display: flex; flex-direction: column; gap: .35rem; }
.hl-bar-row { display: grid; grid-template-columns: 6.5rem 1fr; align-items: center; gap: .6rem; }
.hl-bar-label { color: #8b94a3; font-size: .78rem; }
.hl-bar-track { background: #161c25; border-radius: 4px; height: 8px; overflow: hidden; }
.hl-bar-fill { display: block; height: 100%; border-radius: 4px; }
/* Bewusst KEINE Prozentzahlen an den Balken. */
.hl-prod  { background: #6ee7b7; }
.hl-proj  { background: #8ab4f8; }
.hl-draft { background: #e8c96a; }
.hl-signale { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.hl-sig {
  background: #151a22; border: 1px solid #212a35; color: #c3c9d4;
  border-radius: 5px; padding: .15rem .45rem; font-size: .76rem;
}
.hl-hint { color: #55606e; font-size: .72rem; margin-top: .55rem; font-style: italic; }

/* ── Liga-Rankings ── */
.st-list { display:flex; flex-direction:column; gap:.4rem; margin-top:.5rem; }
.st-row {
  display:grid; grid-template-columns:2rem 1fr 8rem auto; align-items:center;
  gap:.75rem; padding:.55rem .8rem; background:#0f141b;
  border:1px solid #1b222c; border-radius:8px;
}
.st-row.st-mine { border-color:#e8c96a; background:#141310; }
.st-rank { color:#8b94a3; font-weight:700; text-align:center; }
.st-name { color:#e6e9ef; font-weight:600; }
.st-you {
  font-size:.7rem; background:#e8c96a; color:#12161d; padding:.05rem .35rem;
  border-radius:4px; font-weight:700; margin-left:.35rem;
}
.st-bar-wrap { background:#161c25; border-radius:4px; height:8px; overflow:hidden; }
.st-bar { display:block; height:100%; background:linear-gradient(90deg,#6ee7b7,#e8c96a); border-radius:4px; }
.st-val { color:#e8c96a; font-weight:700; font-variant-numeric:tabular-nums; text-align:right; }
.st-sub { grid-column:2 / -1; color:#6b7280; font-size:.75rem; }

/* League-Rankings — sortierbare Tabelle */
.lr-tablewrap { overflow-x:auto; margin-top:.5rem; }
.lr-table { width:100%; border-collapse:collapse; font-size:.88rem; }
.lr-table th, .lr-table td { padding:.5rem .65rem; border-bottom:1px solid rgba(255,255,255,.05); white-space:nowrap; }
.lr-th { color:var(--muted); font-weight:600; text-align:right; cursor:pointer; user-select:none; }
.lr-th:hover { color:var(--text); }
.lr-th-team { text-align:left; }
.lr-th-rank { cursor:default; text-align:right; }
.lr-rank { color:var(--muted); text-align:right; font-variant-numeric:tabular-nums; }
.lr-team { color:var(--text); font-weight:600; text-align:left; }
.lr-num { color:var(--text); text-align:right; font-variant-numeric:tabular-nums; }
.lr-gesamt { color:var(--accent); font-weight:700; }
.lr-table tr.lr-mine { background:#141310; }
.lr-table tr.lr-mine td { border-color:#e8c96a33; }
.lr-you { background:var(--accent); color:#10131a; font-size:.62rem; font-weight:700; padding:.05rem .3rem; border-radius:3px; margin-left:.3rem; letter-spacing:.03em; }
.lr-th-on { color:var(--accent); }
.lr-table th.lr-th-on, .lr-table td.lr-col-on { background:rgba(200,168,75,.07); }

/* Roster-Liste — Filter + sortierbare Tabelle */
.rl-filters { display:flex; flex-wrap:wrap; gap:1rem 1.5rem; margin:.25rem 0 1rem; align-items:center; }
.rl-fgroup { display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; }
.rl-flabel { font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-right:.15rem; }
.rl-chip { background:rgba(255,255,255,.04); border:1px solid #1e2632; color:var(--muted); padding:.3rem .7rem; border-radius:6px; font-size:.8rem; font-weight:600; cursor:pointer; transition:background .15s,color .15s,border-color .15s; }
.rl-chip:hover { color:var(--text); }
.rl-chip.on { background:var(--accent); border-color:var(--accent); color:#10131a; }
.rl-select { background:rgba(255,255,255,.04); border:1px solid #1e2632; color:var(--text); padding:.3rem .6rem; border-radius:6px; font-size:.8rem; font-weight:600; cursor:pointer; }
.roster-table .rl-th { cursor:pointer; user-select:none; white-space:nowrap; }
.roster-table .rl-th:hover { color:var(--text); }
.roster-table .rl-th.on { color:var(--accent); }
.roster-table .rl-th-static { cursor:default; }
.rl-band { color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap; }
.rl-exp { color:var(--muted); font-variant-numeric:tabular-nums; text-align:center; }
.rl-depth { color:var(--muted); font-size:.82rem; }
.rl-note { color:var(--muted); font-size:.72rem; margin:.6rem 0 0; font-style:italic; }
/* Slot-Ansicht als Tabelle (gleiche Spalten wie die Liste) */
.slot-table tr.slot-sec td { padding:.7rem .65rem .3rem; }
.slot-sec-title { font-family:'Bebas Neue',sans-serif; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); font-size:.9rem; }
.slot-sec-meta { color:var(--muted); font-size:.78rem; margin-left:.6rem; }
.slot-table tr.slot-empty td { color:var(--muted); font-style:italic; }
.pb-meta { color:var(--muted); font-size:.75rem; font-weight:400; white-space:nowrap; }
.ta-rebuild { background:#2a1f2e; border:1px solid #6b4a8a; color:#c9a7e8; font-size:.68rem; font-weight:700; padding:.1rem .4rem; border-radius:4px; margin-left:.35rem; letter-spacing:.02em; }
@media (max-width:768px) { .pb-meta { display:none; } }
.slot-table td.slot-tag { color:var(--muted); font-size:.72rem; font-weight:700; letter-spacing:.04em; }
.slot-table td.slot-tag-muted { color:#3d4654; }
@media (max-width:760px) {
  .st-row { grid-template-columns:1.8rem 1fr auto; }
  .st-bar-wrap { display:none; }
}



/* ── Trade Assistant ── */
.ta-need {
  background:#0f141b; border:1px solid #1b222c; border-radius:10px;
  padding:1rem; margin-bottom:1rem;
}
.ta-need-head { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin-bottom:.75rem; }
.ta-need-title { font-weight:700; }
.ta-need-rang { color:#8b94a3; font-size:.82rem; margin-left:auto; }
.ta-empty { color:#8b94a3; font-size:.87rem; font-style:italic; }
.ta-partners { display:flex; flex-direction:column; gap:.5rem; }
.ta-partner {
  background:#12171f; border:1px solid #212a35; border-radius:8px; padding:.6rem .8rem;
}
.ta-partner-name { font-weight:600; color:#e8c96a; }
.ta-bedarf { display:inline-block; font-weight:600; font-size:.72rem; color:#f0a35e; background:#2a1f12; border:1px solid #4a3316; border-radius:4px; padding:.05rem .35rem; margin-left:.4rem; vertical-align:middle; }
.ta-partner-meta { color:#8b94a3; font-size:.8rem; margin:.15rem 0 .35rem; }
.ta-target { font-size:.9rem; color:#c3c9d4; }
.ta-target strong { color:#e6e9ef; }
.ta-target-val { color:#8b94a3; font-size:.82rem; margin-left:.35rem; }
.ta-offer {
  background:#0c1016; border:1px solid #1b222c; border-radius:10px;
  padding:1rem; margin-top:1.5rem;
}
.ta-offer-head { font-weight:700; text-transform:uppercase; letter-spacing:.03em; font-size:.9rem; margin-bottom:.35rem; }
.ta-offer-hint { color:#8b94a3; font-size:.85rem; margin:0 0 .75rem; }
.ta-offer-list { display:flex; flex-wrap:wrap; gap:.5rem; }
.ta-offer-item {
  display:flex; align-items:center; gap:.4rem;
  background:#151a22; border:1px solid #212a35; border-radius:6px;
  padding:.35rem .6rem; font-size:.85rem; color:#c3c9d4;
}

/* ── Trade Assistant: Ziel-Werte + Upgrade ── */
.ta-target-age { color:#8b94a3; font-size:.8rem; }
.ta-target-vals { display:flex; align-items:baseline; gap:.6rem; margin:.35rem 0 .3rem; }
.ta-val-main { color:#e8c96a; font-weight:700; font-variant-numeric:tabular-nums; }
.ta-val-side { color:#6b7280; font-size:.78rem; font-variant-numeric:tabular-nums; }
.ta-upgrade { font-size:.83rem; color:#6ee7b7; }
.ta-upgrade strong { color:#8affc9; }
.ta-upgrade-none { color:#8b94a3; font-style:italic; }

/* ── Trade Assistant: Übernahme-Button ── */
.ta-tobtn {
  margin-top:.55rem; background:#151a22; border:1px solid #2a3441; color:#e8c96a;
  border-radius:7px; padding:.4rem .8rem; font-size:.83rem; font-weight:600; cursor:pointer;
}
.ta-tobtn:hover { background:#1c2530; border-color:#e8c96a; }

/* ── FA/Waiver Assistant: Position of Need + Cut-Kandidaten ── */
.fa-need-block { background:#12100c; border:1px solid #3a2f18; border-radius:10px; padding:.85rem 1rem; margin-bottom:1rem; }
.fa-need-title { color:#e8c96a; font-weight:700; font-size:.9rem; text-transform:uppercase; letter-spacing:.03em; margin-bottom:.55rem; }
.fa-need-item { display:flex; align-items:center; gap:.6rem; padding:.35rem 0; border-bottom:1px solid #221c10; }
.fa-need-item:last-child { border-bottom:none; }
.fa-need-grund { color:#c3c9d4; font-size:.86rem; }
.fa-need-hoch .fa-need-grund { color:#f0a35e; }
.fa-cut-block { margin-top:1.25rem; padding-top:1rem; border-top:1px solid #1b222c; }
.fa-cut-title { color:#8b94a3; font-size:.85rem; font-weight:600; margin-bottom:.5rem; }
.fa-cut-note { color:#6b7280; font-weight:400; font-style:italic; }
.fa-cut-list { display:flex; flex-wrap:wrap; gap:.5rem; }
.fa-cut-item { display:flex; align-items:center; gap:.4rem; background:#151a22; border:1px solid #212a35; border-radius:6px; padding:.3rem .55rem; font-size:.83rem; color:#c3c9d4; }
.fa-cut-val { color:#8b94a3; font-variant-numeric:tabular-nums; }

/* ── FA/Waiver Simulation ── */
.fasim-pick-my, .fasim-posbar { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin:.75rem 0; }
.fasim-lbl { color:#8b94a3; font-size:.85rem; }
.fasim-select { background:#0a0e13; color:#e6e9ef; border:1px solid #212a35; border-radius:7px; padding:.4rem .6rem; min-width:16rem; max-width:100%; }
.fasim-select:focus { outline:none; border-color:#e8c96a; }
.fasim-cols { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:.5rem; }
@media (max-width:760px){ .fasim-cols { grid-template-columns:1fr; } }
.fasim-col { background:#0f141b; border:1px solid #1b222c; border-radius:10px; padding:.85rem; }
.fasim-col-head { color:#8b94a3; font-size:.8rem; text-transform:uppercase; letter-spacing:.03em; margin-bottom:.6rem; }
.fasim-search { width:100%; box-sizing:border-box; margin-bottom:.5rem; background:#0e1218; border:1px solid #2a3441; color:#e8e8ea; border-radius:6px; padding:.45rem .6rem; font-size:.85rem; }
.fasim-search::placeholder { color:#5f6b7a; }
.fasim-falist { display:flex; flex-direction:column; gap:.35rem; max-height:11rem; overflow-y:auto; }
.fasim-fa-item { cursor:pointer; border-radius:7px; border:1px solid transparent; padding:.15rem; }
.fasim-fa-item:hover { border-color:#2a3441; background:#12171f; }
.fasim-fa-item.active { border-color:#e8c96a; background:#141310; }
.fasim-empty { color:#8b94a3; font-size:.85rem; padding:.5rem; }
.fasim-compare { background:#0c1016; border:1px solid #2a3441; border-radius:10px; padding:1rem; margin-top:1.25rem; }
.fasim-compare-head { color:#e8c96a; font-weight:700; text-transform:uppercase; font-size:.85rem; letter-spacing:.03em; margin-bottom:.75rem; }
.fasim-compare-grid { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:1rem; }
@media (max-width:640px){ .fasim-compare-grid { grid-template-columns:1fr; } .fasim-cmp-arrow { display:none; } }
.fasim-cmp-lbl { color:#8b94a3; font-size:.78rem; margin-bottom:.35rem; }
.fasim-cmp-modi { color:#6b7280; font-size:.78rem; margin-top:.35rem; font-variant-numeric:tabular-nums; }
.fasim-cmp-arrow { font-size:1.5rem; }
.fasim-verdict { margin-top:.85rem; padding:.6rem .8rem; border-radius:8px; font-size:.9rem; }
.fasim-v-ok { background:#0d1a14; border:1px solid #1f4535; color:#6ee7b7; }
.fasim-v-ok strong { color:#8affc9; }
.fasim-v-no { background:#1a1210; border:1px solid #3a2418; color:#f0a35e; }

/* ── Perspektivspieler-Marker ── */
.persp-chip {
  font-size:.7rem; background:#0d1a14; border:1px solid #1f4535; color:#6ee7b7;
  border-radius:5px; padding:.1rem .4rem; margin-left:.35rem; white-space:nowrap;
}

/* ── Position-Groups: klickbare Spieler ── */
.pg-player-click { cursor:pointer; transition:background .12s; }
.pg-player-click:hover { background:#12171f; }
.pg-player-click:hover .pg-player-name { color:#e8c96a; }

/* ── Player-Rating: kurzes Hervorheben nach Sprung ── */
.pb-flash { animation:pbFlash 1.6s ease-out; }
@keyframes pbFlash {
  0%   { background:#2a2410; }
  100% { background:transparent; }
}

/* ── HOME / Startseite ── */
.home-wrap { max-width:1000px; margin:0 auto; padding:.5rem 0 2rem; }
.home-hero { margin-bottom:1.75rem; }
.home-title { font-size:1.7rem; margin:0 0 .4rem; color:#e6e9ef; }
.home-sub { color:#8b94a3; font-size:1rem; margin:0; max-width:65ch; line-height:1.55; }
.home-areas { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-bottom:2rem; }
@media (max-width:820px){ .home-areas { grid-template-columns:1fr; } }
.home-area {
  background:#0f141b; border:1px solid #1b222c; border-radius:12px; padding:1.25rem;
  cursor:pointer; transition:border-color .15s, transform .15s;
}
.home-area:hover { border-color:#e8c96a; transform:translateY(-2px); }
.home-area-icon { font-size:1.6rem; margin-bottom:.5rem; }
.home-area-name { font-weight:700; font-size:1.15rem; color:#e8c96a; margin-bottom:.4rem; }
.home-area-desc { color:#c3c9d4; font-size:.88rem; line-height:1.5; margin:0 0 .85rem; }
.home-area-go { color:#8b94a3; font-size:.82rem; font-weight:600; }
.home-area:hover .home-area-go { color:#e8c96a; }
.home-liga {
  background:#0c1016; border:1px solid #1b222c; border-radius:12px; padding:1.25rem; margin-bottom:1.5rem;
}
.home-liga-head { display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:.5rem; margin-bottom:.85rem; }
.home-liga-title { font-weight:700; text-transform:uppercase; letter-spacing:.03em; font-size:.9rem; color:#e6e9ef; }
.home-liga-active { color:#8b94a3; font-size:.85rem; }
.home-grid-flash { animation:homeGridFlash 1.4s ease-out; border-radius:8px; }
@keyframes homeGridFlash { 0%{ box-shadow:0 0 0 3px #e8c96a44; } 100%{ box-shadow:0 0 0 0 transparent; } }
.home-note {
  background:#0f141b; border:1px solid #1b222c; border-radius:12px; padding:1.1rem 1.25rem;
}
.home-note-title { color:#8b94a3; font-size:.82rem; text-transform:uppercase; letter-spacing:.03em; margin-bottom:.4rem; }
.home-note p { color:#9aa3b0; font-size:.86rem; line-height:1.55; margin:0; max-width:75ch; }
.nav-home { color:#e8c96a; font-weight:600; }


/* ── Einheitlicher Sticky-Footer (auf allen Screens unten festgepinnt) ── */
body > header { flex: 0 0 auto; }
#landing-screen, #login-screen, #app-screen { flex: 1 0 auto; }
.site-footer {
  flex: 0 0 auto;
  border-top: 1px solid var(--border);
  padding: 1.3rem 1.6rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: .85rem;
}
.site-footer .sf-co { color: #5a6478; }
.site-footer .sf-links { display: flex; gap: 1.1rem; flex-wrap: wrap; }
.site-footer .sf-links a { color: #8b94a3; text-decoration: none; }
.site-footer .sf-links a:hover { color: var(--accent); }
@media (max-width: 640px) {
  .site-footer { justify-content: center; text-align: center; }
}

/* ═══ Slot-Modell: Ligaauswahl-Hinweis, inaktive Karten, Ersetzen-Dialog, Toast ═══ */
.lg-hint {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 0.86rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.6rem 0.85rem;
  margin-bottom: 0.2rem;
}
.lg-hint strong { color: var(--text); }

.league-card-inactive { opacity: 0.5; filter: grayscale(0.35); }
.league-card-inactive:hover { opacity: 0.85; border-color: var(--accent); transform: none; }
.lg-activate-hint {
  margin-top: 0.5rem;
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 6px;
  padding: 0.18rem 0.55rem;
}

.slr-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.62);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000; padding: 1rem;
}
.slr-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  max-width: 420px; width: 100%;
  padding: 1.4rem 1.5rem;
}
.slr-head { font-size: 1.1rem; font-weight: 600; color: var(--text); margin-bottom: 0.3rem; }
.slr-sub  { color: var(--muted); font-size: 0.9rem; margin: 0 0 1rem; }
.slr-note { color: var(--accent); }
.slr-list { display: flex; flex-direction: column; gap: 0.5rem; }
.slr-item {
  display: flex; justify-content: space-between; align-items: center; width: 100%;
  background: #0e1218; border: 1px solid var(--border); border-radius: 8px;
  padding: 0.7rem 0.85rem; cursor: pointer; color: var(--text);
  font-size: 0.92rem; font-family: inherit;
}
.slr-item:hover { border-color: var(--accent); }
.slr-x { color: var(--accent); font-size: 0.85rem; white-space: nowrap; }
.slr-cancel {
  margin-top: 1rem; width: 100%;
  background: none; border: 1px solid var(--border); color: var(--muted);
  border-radius: 8px; padding: 0.6rem; cursor: pointer; font-family: inherit;
}
.slr-cancel:hover { color: var(--text); border-color: var(--muted); }

#da-toast {
  position: fixed; left: 50%; bottom: 1.4rem; transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 0.5rem; z-index: 1100; pointer-events: none;
}
.da-toast-item {
  background: var(--surface); border: 1px solid var(--border); border-radius: 9px;
  padding: 0.7rem 1rem; font-size: 0.9rem; color: var(--text);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
  transition: opacity 0.3s, transform 0.3s;
}
.da-toast-ok   { border-left: 3px solid #6ee7b7; }
.da-toast-warn { border-left: 3px solid var(--danger); }
.da-toast-out  { opacity: 0; transform: translateY(6px); }

/* ── Freemium: PRO-Overlay (Paylock) ─────────────────────────────────── */
.paylock-wrap { position: relative; }
.paylock-overlay {
  position: absolute; inset: 0; z-index: 20;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10, 12, 15, .5);
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  border-radius: inherit;
}
.paylock-card { text-align: center; padding: 1.2rem; max-width: 300px; }
.paylock-icon { font-size: 1.5rem; margin-bottom: .3rem; }
.paylock-title { color: #f0f2f6; font-weight: 700; font-size: 1rem; margin-bottom: .3rem; }
.paylock-text { color: #c3c9d4; font-size: .88rem; line-height: 1.4; margin-bottom: .9rem; }
.paylock-btn {
  background: #c8a84b; color: #12100a; border: none; border-radius: 8px;
  padding: .6rem 1.1rem; font-weight: 600; cursor: pointer; font-family: inherit;
}
.paylock-btn:hover { filter: brightness(1.08); }

/* ── Freemium: League-Rankings-Gating + PRO-Badge ────────────────────── */
.lr-locked-cell { filter: blur(4px); user-select: none; opacity: .65; }
.lr-th-lock { cursor: pointer; color: #8b94a3; }
.lr-th-lock:hover { color: #e8c96a; }
.lr-prohint {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  background: #13171e; border: 1px solid #1e2530; border-radius: 8px;
  padding: .55rem .9rem; margin: .3rem 0 .8rem; color: #c3c9d4; font-size: .9rem;
}
.lr-prohint .paylock-btn { padding: .4rem .8rem; font-size: .85rem; }
.nav-pro {
  display: inline-block; margin-left: .4rem; font-size: .58rem; font-weight: 700;
  color: #12100a; background: #c8a84b; border-radius: 4px; padding: .05rem .3rem;
  letter-spacing: .5px; vertical-align: middle;
}

/* ── Freemium: Whole-View PRO-Teaser (gesperrte Features) ────────────── */
.pro-teaser-desc { color: #c3c9d4; padding: 0 1rem 1rem; max-width: 640px; line-height: 1.6; }
.pro-teaser-box { position: relative; margin: 0 1rem 1rem; display: flex; flex-direction: column; gap: .7rem; min-height: 220px; }
.pro-skel { height: 46px; border-radius: 10px; background: #13171e; border: 1px solid #1e2530; }

/* ── Freemium: FA/Waiver Free-Kachel ─────────────────────────────────── */
.fa-free-kachel { background:#13171e; border:1px solid #1e2530; border-radius:12px; overflow:hidden; margin:0 0 1rem; }
.fa-free-row { display:flex; align-items:center; gap:.8rem; padding:.7rem 1rem; border-bottom:1px solid #1e2530; }
.fa-free-row:last-child { border-bottom:none; }
.fa-free-pos { min-width:2.6rem; font-size:.72rem; font-weight:700; color:#c8a84b; letter-spacing:.5px; }
.fa-free-name { flex:1; color:#f0f2f6; }
.fa-free-val { color:#c3c9d4; font-family:'JetBrains Mono',monospace; }
.fa-free-more { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; background:#0e1218; border:1px solid #1e2530; border-radius:12px; padding:1rem 1.2rem; }
.fa-free-more-desc { flex:1; min-width:200px; color:#8b94a3; font-size:.9rem; line-height:1.5; }

/* ── Slot-Maske (Home) ───────────────────────────────────────────────── */
.slot-title { font-size: .78rem; letter-spacing: 1px; text-transform: uppercase; color: #8b94a3; font-weight: 700; margin: 0 0 .6rem; }
.slot-title-2 { margin-top: 1.4rem; }
.slot-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: .6rem; margin-bottom: .8rem; }
.slot-tile { border-radius: 12px; border: 1px solid #1e2530; background: #13171e; padding: .8rem; min-height: 96px; display: flex; flex-direction: column; gap: .3rem; cursor: pointer; transition: border-color .15s; }
.slot-tile:hover { border-color: #c8a84b; }
.slot-idx { font-size: .64rem; color: #8b94a3; letter-spacing: .5px; text-transform: uppercase; }
.slot-name { font-weight: 700; color: #f0f2f6; font-size: .9rem; line-height: 1.2; flex: 1; }
.slot-badges { display: flex; gap: .3rem; flex-wrap: wrap; }
.slot-active { border-color: #c8a84b; box-shadow: inset 0 0 0 1px #c8a84b; }
.slot-empty, .slot-locked { align-items: center; justify-content: center; text-align: center; color: #8b94a3; }
.slot-plus { font-size: 1.5rem; color: #c8a84b; line-height: 1; }
.slot-lock { font-size: 1.25rem; line-height: 1; }
.slot-sub { font-size: .66rem; }
.slot-locked { opacity: .7; }
.lglist { display: flex; flex-direction: column; gap: .4rem; }
.lgrow { display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: #13171e; border: 1px solid #1e2530; border-radius: 10px; padding: .7rem .9rem; cursor: pointer; transition: border-color .15s; }
.lgrow:hover { border-color: #c8a84b; }
.lgrow-name { color: #f0f2f6; font-weight: 600; }
.lgrow-meta { color: #8b94a3; font-size: .8rem; margin-top: .15rem; }
.lgrow-action { color: #c8a84b; font-size: .85rem; font-weight: 600; white-space: nowrap; }
.lgrow-active .lgrow-action { color: #6ee7a8; }
@media (max-width: 640px) { .slot-row { grid-template-columns: repeat(2, 1fr); } }
.slot-cd { font-size: .6rem; color: #c8a84b; margin-top: .1rem; }
/* Slot-Maske: Container-Grid der alten Liga-Karten aufheben, damit die Maske normal stapelt */
#leagues-grid { display: block; }

/* ── Positions-Stärken · dein Team (Faktentabelle, stärkste → schwächste) ── */
.psb-block{ margin-top:1.6rem; }
.psb-head{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem; margin-bottom:.7rem; }
.psb-title{ font-weight:700; color:var(--text); font-size:1.02rem; }
.psb-note{ color:var(--muted); font-size:.82rem; }
.psb-tablewrap{ overflow-x:auto; }
.psb-table{ border-collapse:collapse; }
.psb-table th, .psb-table td{ text-align:center; padding:.5rem .7rem; border:1px solid var(--border); white-space:nowrap; }
.psb-table th{ background:var(--surface); }
.psb-table td{ font-family:'JetBrains Mono',monospace; font-weight:600; color:var(--text); }

/* ── Best/Worst-Markierung der Positionsgruppen (Position Groups) ──────── */
.pg-room.pg-room-best { border-color: #2e6f52; }
.pg-room.pg-room-worst { border-color: #7a4a2e; }
.pg-mark { font-size: .68rem; font-weight: 700; padding: .08rem .45rem; border-radius: 5px; margin-left: .4rem; }
.pg-mark-best { background: rgba(110,231,183,.16); color: #6ee7b7; }
.pg-mark-worst { background: rgba(240,163,94,.16); color: #f0a35e; }

/* ── Grade-Tabelle (Draft- & Trade-Grades je Team) ──────────────────────── */
.gt-block{ margin-top:1.8rem; }
.gt-tablewrap{ overflow-x:auto; margin-top:.7rem; }
.gt-table{ width:100%; border-collapse:collapse; font-size:.88rem; }
.gt-table th, .gt-table td{ padding:.5rem .65rem; border-bottom:1px solid rgba(255,255,255,.05); white-space:nowrap; vertical-align:top; }
.gt-th{ color:var(--muted); font-weight:600; text-align:left; }
.gt-th-rank{ text-align:right; }
.gt-table tr.lr-mine{ background:#141310; }
.gt-table tr.lr-mine td{ border-color:#e8c96a33; }
.gt-colhead{ display:flex; align-items:baseline; gap:.4rem; }
.gt-warn{ color:#f0a35e; font-size:.68rem; font-weight:500; }
.gt-yrbar{ display:flex; gap:.25rem; margin-top:.3rem; }
.gt-yr{ background:transparent; border:1px solid var(--border); color:var(--muted); font-size:.68rem; padding:.1rem .4rem; border-radius:4px; cursor:pointer; }
.gt-yr:hover{ color:var(--text); border-color:var(--muted); }
.gt-yr.on{ background:rgba(200,168,75,.14); border-color:var(--accent); color:var(--accent); font-weight:600; }
.gt-team{ text-align:left; color:var(--text); }
.gt-pg{ text-align:left; }
.gt-rk{ color:var(--muted); font-size:.78rem; font-family:'JetBrains Mono',monospace; }
.gt-grade{ text-align:left; }
.gt-label{ font-weight:700; display:inline-block; }
.gt-sub{ color:var(--muted); font-size:.74rem; font-family:'JetBrains Mono',monospace; margin-left:.35rem; }
.gt-none{ color:var(--muted); }
.gt-legende{ color:var(--muted); font-size:.78rem; margin-top:.6rem; line-height:1.5; }

/* ── Home-KPI-Panel (A2.1) ──────────────────────────────────────────────── */
.home-kpi{ margin-top:1.2rem; }
.kpi-panel{ background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:1.1rem 1.2rem; }
.kpi-loading{ display:flex; align-items:center; gap:.6rem; color:var(--muted); }
.kpi-head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.9rem; flex-wrap:wrap; }
.kpi-title{ font-weight:700; color:var(--text); font-size:1.05rem; }
.kpi-roster-btn{ background:var(--accent); color:#10131a; border:none; border-radius:7px; padding:.4rem .85rem; font-size:.85rem; font-weight:700; cursor:pointer; white-space:nowrap; }
.kpi-roster-btn:hover{ filter:brightness(1.08); }
.kpi-sec-title{ color:var(--muted); font-size:.8rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em; margin:1rem 0 .5rem; }
.kpi-ps-row{ display:flex; flex-wrap:wrap; gap:.5rem; }
.kpi-pg{ display:flex; align-items:center; gap:.4rem; border:1px solid var(--border); border-radius:8px; padding:.35rem .6rem; }
.kpi-pg-rk{ font-family:'JetBrains Mono',monospace; font-size:.82rem; color:var(--text); }
.kpi-pg-strong{ border-color:#6ee7b7; background:rgba(110,231,183,.07); }
.kpi-pg-weak{ border-color:#f0a35e; background:rgba(240,163,94,.07); }
.kpi-grade-row{ display:flex; flex-wrap:wrap; gap:.7rem; }
.kpi-grade-item{ display:flex; align-items:baseline; gap:.4rem; border:1px solid var(--border); border-radius:8px; padding:.4rem .7rem; }
.kpi-grade-lbl{ color:var(--muted); font-size:.76rem; }
.kpi-grade-item strong{ color:var(--text); font-size:.92rem; }
.kpi-grade-sub{ color:var(--muted); font-family:'JetBrains Mono',monospace; font-size:.78rem; }
.kpi-grade-hint{ color:var(--muted); font-size:.76rem; margin-top:.5rem; }

/* ── Trade-Assistant: Modus-Hinweis ─────────────────────────────────────── */
.ta-mode-hint{ color:var(--muted); font-size:.82rem; margin:.4rem 0 1rem; line-height:1.5; }

/* ── Trade-Assistant: Status-Zeile + Erklärsatz (v1) ────────────────────── */
.ta-status-hint{ color:var(--text); font-size:.9rem; margin:.2rem 0 1.1rem; padding:.6rem .8rem; background:rgba(200,168,75,.08); border-left:3px solid var(--accent); border-radius:6px; line-height:1.5; }
.ta-grund{ color:var(--muted); font-size:.82rem; margin-top:.4rem; line-height:1.5; font-style:italic; }

/* ── Trade-Assistant: aufklappbare Wertherleitung ───────────────────────── */
.ta-herleitung{ margin-top:.5rem; cursor:pointer; }
.ta-herleitung-trigger{ color:var(--muted); font-size:.8rem; display:inline-flex; align-items:center; gap:.3rem; }
.ta-herleitung-trigger:hover{ color:var(--text); }
.ta-herleitung .hl-box{ margin-top:.4rem; }