/* ===========================================================================
   Grizzlies App — "Broadcast Scorebug" design system
   Athletic condensed type, deep broadcast charcoal, Grizzlies-red live accent.
   Legacy token names (--bg/--card/--border/--home/--away/--accent) are kept as
   aliases so existing markup/inline styles keep working.
   =========================================================================== */
:root {
  --ink:#0b0e12; --surface:#141a21; --surface-2:#1b232c; --line:#28313d;
  --text:#eef2f6; --muted:#8a97a6;
  --live:#ff2d3f;        /* Grizzlies cap red — LIVE / primary accent */
  --final:#26c281;       /* completed / run scored */
  --steel:#93a3b4;       /* official BSM (bear-fur grey) */
  --steel-bg:#26313d;
  --pitch:#4d9fd6;       /* Pitcherwechsel im Ticker (stahlblau) */
  --radius:14px;
  --shadow:0 8px 24px rgba(0,0,0,.38);
  --font-body:'Barlow',system-ui,-apple-system,sans-serif;
  --font-display:'Barlow Semi Condensed','Barlow',system-ui,sans-serif;
  /* legacy aliases */
  --bg:var(--ink); --card:var(--surface); --border:var(--line);
  --home:var(--final); --away:var(--live); --accent:var(--live);
  --home-cell:#333d49; --event-cell:#2a3a33;
  --f-bb-bg:#1f3d2b; --f-bb-fg:#8fd9a8; --f-sb-bg:#443a15; --f-sb-fg:#eec95c; --f-bbq-bg:#46251c; --f-bbq-fg:#f09a7b; --f-tb-bg:#2e2a4d; --f-tb-fg:#b1a7ef; --head-cell:#1c2530; --holiday:#f0a13c;
  --weekend-head:#203247; --weekend-cell:#182533; /* Wochenend-Zeilen (kühl-blau, abgesetzt von Ferien-Orange & Heim-Grau) */
  --site-header-h:58px; /* Höhe der stickenden Kopfleiste — Offset für die fixierten Matrix-Kopfzeilen */
}
:root[data-theme="light"] {
  --ink:#eaeef3; --surface:#ffffff; --surface-2:#f2f6fa; --line:#d6dee7;
  --text:#0d1319; --muted:#5b6774; --steel:#5b6774; --steel-bg:#e5ecf3; --pitch:#2a6ea8;
  --shadow:0 8px 20px rgba(20,30,45,.10);
  --home-cell:#d9dee5; --event-cell:#ddeae2;
  --f-bb-bg:#e3f1e0; --f-bb-fg:#27500a; --f-sb-bg:#faeeda; --f-sb-fg:#633806; --f-bbq-bg:#faece7; --f-bbq-fg:#712b13; --f-tb-bg:#eeedfe; --f-tb-fg:#3c3489; --head-cell:#e6ebf2; --holiday:#b45f06;
  --weekend-head:#d5e3f4; --weekend-cell:#eef4fb;
}

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; color:var(--text); font-family:var(--font-body); line-height:1.4;
  background:
    radial-gradient(1200px 500px at 50% -220px, rgba(255,45,63,.10), transparent 70%),
    var(--ink);
  min-height:100vh;
}

/* ---- Header: sticky broadcast bar ---- */
header {
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:12px; padding:12px 18px;
  background:rgba(11,14,18,.82); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
:root[data-theme="light"] header { background:rgba(255,255,255,.85); }
header h1 {
  margin:0; font-family:var(--font-display); font-weight:800;
  text-transform:uppercase; letter-spacing:.04em; font-size:20px;
  display:flex; align-items:center; gap:10px; line-height:1;
}
header h1 .logo { height:34px; width:auto; }
.theme-toggle {
  margin-left:auto; cursor:pointer; background:none; border:1px solid var(--line);
  color:var(--text); border-radius:10px; padding:6px 11px; font-size:15px;
}
#who, header .tag { margin-left:auto; }

/* ---- Filters ---- */
.filters { padding:14px 18px 0; display:flex; gap:8px; flex-wrap:wrap; align-items:center; max-width:820px; margin:0 auto; }
.league-filter { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:13px; text-transform:uppercase; letter-spacing:.05em; font-family:var(--font-display); font-weight:600; }
.league-filter select { min-width:210px; cursor:pointer; }

/* ---- Tabs: broadcast segmented underline ---- */
.tabs { display:flex; gap:2px; max-width:820px; margin:10px auto 0; padding:0 18px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.tab {
  background:none; border:0; border-bottom:2px solid transparent; margin-bottom:-1px;
  color:var(--muted); cursor:pointer; padding:11px 14px; display:flex; align-items:center; gap:8px;
  font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:.03em; font-size:14px;
  transition:color .15s ease, border-color .15s ease;
}
.tab:hover { color:var(--text); }
.tab.active { color:var(--text); border-bottom-color:var(--live); }
.tab .count { background:var(--surface-2); color:var(--muted); border-radius:999px; padding:1px 8px; font-size:12px; font-weight:700; }
.tab.active .count { background:var(--live); color:#fff; }

/* ---- Match list (scorebug rows) ---- */
.list { padding:14px 18px 48px; display:grid; gap:10px; max-width:820px; margin:0 auto; }
.section-list { display:grid; gap:10px; }
.match {
  position:relative; background:var(--surface); border:1px solid var(--line);
  border-left:4px solid var(--line); border-radius:var(--radius); padding:13px 14px;
  cursor:pointer; transition:transform .12s ease, border-color .12s ease, background .12s ease;
}
.match:hover { transform:translateY(-1px); border-color:var(--muted); }
.match .row { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.match .teams { font-family:var(--font-display); font-weight:700; font-size:17px; letter-spacing:.01em; }
.match .meta { color:var(--muted); font-size:12.5px; margin-top:6px; }
/* status spine encodes the match state */
.match.st-live   { border-left-color:var(--live); background:linear-gradient(90deg, rgba(255,45,63,.07), transparent 40%), var(--surface); }
.match.st-final  { border-left-color:var(--final); }
.match.st-result { border-left-color:var(--steel); }
.match.st-upcoming { border-left-color:var(--line); }

/* ---- Score chips ---- */
.scores { display:flex; gap:6px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
.score {
  font-family:var(--font-display); font-variant-numeric:tabular-nums; font-weight:800;
  font-size:15px; padding:3px 10px; border-radius:9px; white-space:nowrap; letter-spacing:.01em;
}
.score.off { background:var(--steel-bg); color:var(--text); }
.score.own.live { background:var(--live); color:#fff; display:inline-flex; align-items:center; gap:7px; }
.score.own.live::before { content:""; width:7px; height:7px; border-radius:50%; background:#fff; animation:pulse 1.25s ease-in-out infinite; }
.score.own.final { background:var(--final); color:#04140d; }
.score.muted { color:var(--muted); font-weight:700; }

/* ---- Badges ---- */
.badge { font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:.03em; font-size:11px; padding:3px 9px; border-radius:999px; background:var(--surface-2); color:var(--muted); }
.badge.live { background:var(--live); color:#fff; }
.badge.final { background:var(--final); color:#04140d; }
.empty { color:var(--muted); font-size:14px; margin:6px 2px 10px; }

/* ---- Detail: scoreboard ---- */
.detail { max-width:820px; margin:0 auto; padding:18px; }
.detail h2 { font-family:var(--font-display); font-weight:800; text-transform:uppercase; letter-spacing:.02em; font-size:26px; margin:8px 0 4px; line-height:1.05; }
.detail .meta { color:var(--muted); font-size:13px; }
.scores-summary { display:grid; gap:8px; margin:14px 0; }
.ss { display:flex; justify-content:space-between; align-items:center; gap:12px; background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--line); border-radius:12px; padding:12px 14px; }
.ss-label { color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.05em; font-family:var(--font-display); font-weight:600; }
.ss-val { font-family:var(--font-display); font-weight:800; font-variant-numeric:tabular-nums; font-size:24px; }
.ss.own { border-left-color:var(--live); }
.ss.off { border-left-color:var(--steel); }

.boxscore { width:100%; border-collapse:collapse; margin:14px 0; font-variant-numeric:tabular-nums; }
.boxscore th, .boxscore td { border:1px solid var(--line); padding:6px 9px; text-align:center; }
.boxscore thead th { font-family:var(--font-display); font-weight:700; color:var(--muted); font-size:12px; }
.boxscore tbody td:first-child { text-align:left; font-weight:600; }

/* ---- Ticker: play-by-play feed ---- */
.detail h3, .panel-ticker h3 { font-family:var(--font-display); text-transform:uppercase; letter-spacing:.04em; font-size:15px; margin:20px 0 8px; }
.ticker { display:grid; gap:5px; border-left:2px solid var(--line); padding-left:12px; }
.ticker-inning { font-family:var(--font-display); font-size:12px; font-weight:800; color:var(--live); text-transform:uppercase; letter-spacing:.06em; margin:12px 0 3px; }
.ticker-inning:first-child { margin-top:0; }
.ticker .line { background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:8px 11px; font-size:14px;
  display:flex; align-items:center; gap:8px; }
.ticker .line .line-text { flex:1; min-width:0; }
.ticker-move { display:inline-flex; gap:2px; flex:0 0 auto; }
.ticker-move button { border:1px solid var(--line); background:var(--surface-2); color:var(--muted);
  border-radius:6px; width:26px; height:26px; line-height:1; font-size:13px; cursor:pointer; padding:0; }
.ticker-move button:hover { color:var(--text); border-color:var(--live); }
/* Ereignisfarben: Runs grün, Outs gedämpft rot, Pitcherwechsel stahlblau */
.ticker .line.run { border-left:3px solid var(--final); background:rgba(38,194,129,.09); }
.ticker .line.out { border-left:3px solid rgba(255,45,63,.55); background:rgba(255,45,63,.07); }
.ticker .line.pitcher { border-left:3px solid var(--pitch); background:rgba(77,159,214,.10); font-style:italic; }
.ticker .line.note { border-left:3px solid var(--steel); background:var(--steel-bg); font-style:italic; color:var(--muted); }

a.back { color:var(--live); cursor:pointer; text-decoration:none; font-weight:600; }
a.back:hover { text-decoration:underline; }
.tag { font-size:12px; color:var(--muted); }

/* ---- Admin ---- */
.admin-wrap { max-width:860px; margin:0 auto; padding:18px; }
.login { max-width:360px; margin:56px auto; display:grid; gap:12px; }
.login h2 { font-family:var(--font-display); text-transform:uppercase; letter-spacing:.03em; margin:0 0 4px; }
input, select {
  background:var(--surface-2); color:var(--text); border:1px solid var(--line);
  border-radius:10px; padding:10px 12px; font:inherit;
}
.btn { background:var(--live); color:#fff; border:0; border-radius:10px; padding:10px 15px; cursor:pointer; font-family:var(--font-display); font-weight:700; letter-spacing:.02em; text-transform:uppercase; font-size:14px; transition:filter .12s ease, transform .12s ease; }
.btn:hover { filter:brightness(1.08); }
.btn:active { transform:translateY(1px); }
.btn.secondary { background:var(--surface-2); color:var(--text); border:1px solid var(--line); }
.btn.secondary.active { border-color:var(--live); color:var(--text); box-shadow:inset 0 -2px 0 var(--live); }
.toolbar { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:12px 0; }

/* Passwortfeld mit Auge-Toggle */
.pw-wrap { position:relative; display:inline-grid; vertical-align:middle; }
.pw-wrap input { width:100%; padding-right:40px; box-sizing:border-box; }
.pw-toggle { position:absolute; right:4px; top:50%; transform:translateY(-50%); background:none; border:0; padding:6px; cursor:pointer; color:var(--muted); display:flex; align-items:center; }
.pw-toggle:hover { color:var(--text); }
.pw-reset { gap:8px; }
.pw-reset .pw-wrap { flex:1; }

/* scoring form fields */
.fields { margin:10px 0; }
.field { display:block; margin:12px 0; font-family:var(--font-display); font-weight:600; text-transform:uppercase; letter-spacing:.04em; font-size:12px; color:var(--muted); }
.field select { display:block; width:100%; margin-top:5px; font-family:var(--font-body); text-transform:none; letter-spacing:0; font-size:15px; color:var(--text); font-weight:400; }

.grid-events { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:12px 0; }
.grid-events .btn { background:var(--surface-2); color:var(--text); border:1px solid var(--line); padding:15px 0; font-size:16px; }
.grid-events .btn:hover { border-color:var(--live); color:var(--text); }
.out-types { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.inning-grid { display:grid; grid-template-columns:auto repeat(2,1fr); gap:6px; align-items:center; }
.inning-grid b { font-family:var(--font-display); text-transform:uppercase; font-size:12px; letter-spacing:.04em; color:var(--muted); }
.roster-list { display:grid; gap:6px; margin:8px 0; }
/* Vier feste Spalten: Nr. | Name | Pos. bzw. BO | Löschen. Die Kaderverwaltung
   (/kader/) und der Spieltagskader im Scoring teilen sich dieses Raster -- so
   steht die Nummer in beiden Ansichten vorne und an derselben Stelle. Früher
   war das ein flex-Container ohne gap; dort klebte die Nummer direkt am leeren
   BO-Feld und sah aus, als stünde sie in der Batting-Order-Spalte. */
.roster-list .p { display:grid; grid-template-columns:64px minmax(0,1fr) 64px 44px; gap:8px; align-items:center; background:var(--surface); border:1px solid var(--line); border-radius:9px; padding:7px 11px; }
.roster-list .p input { width:100%; box-sizing:border-box; }
.roster-list .p input[data-f="number"],
.roster-list .p input[data-f="position"],
.roster-list .p input[data-f="bo"] { padding-left:6px; padding-right:6px; text-align:center; }
.roster-list .p .btn { width:100%; padding:10px 0; }
/* Spaltenüberschriften -- gleiches Raster, aber ohne Kasten */
.roster-list .p.roster-head { background:none; border-color:transparent; padding-top:0; padding-bottom:2px; font-family:var(--font-display); text-transform:uppercase; font-size:11px; letter-spacing:.04em; color:var(--muted); text-align:center; }
.roster-list .p.roster-head span:nth-child(2) { text-align:left; }
/* Ungespeicherte Änderung in einer Kaderzeile */
.roster-list .p.dirty { border-left:3px solid var(--live); }
.notice { background:rgba(255,45,63,.12); color:var(--text); border:1px solid var(--live); border-radius:10px; padding:10px 13px; margin:10px 0; font-size:14px; }

/* ---- Motion / a11y ---- */
@keyframes pulse { 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.35; transform:scale(.82);} }
:focus-visible { outline:2px solid var(--live); outline-offset:2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before { animation:none !important; transition:none !important; }
}

/* ---- Header-Navigation ---- */
.nav { display:flex; gap:4px; margin-left:10px; }
.nav a { color:var(--muted); text-decoration:none; font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:.03em; font-size:14px; padding:7px 11px; border-radius:9px; }
.nav a:hover { color:var(--text); }
.nav a.active { color:var(--text); background:var(--surface-2); }
.month-jump { display:flex; gap:10px; flex-wrap:wrap; font-size:13px; }

/* ---- Saison-Matrix ---- */
.plan-main { padding:14px 18px 48px; max-width:1500px; margin:0 auto; }
/* Kein fester Rahmen mehr: der Spielplan wird komplett dargestellt, die Seite
   scrollt. Team- und Feld-Kopfzeile (top) sowie die Datumsspalte (left) bleiben
   per position:sticky an der Kopfleiste bzw. am linken Rand fixiert. */
.matrix-wrap { overflow:visible; background:var(--surface); }
table.matrix { border-collapse:separate; border-spacing:0; font-size:11.5px; }
table.matrix th, table.matrix td { border-bottom:1px solid var(--line); border-right:1px solid var(--line); padding:3px 5px; vertical-align:top; min-width:104px; }
table.matrix thead th { position:sticky; top:var(--site-header-h); z-index:3; background:var(--head-cell); font-family:var(--font-display); font-size:11px; text-transform:uppercase; letter-spacing:.03em; text-align:left; height:22px; }
table.matrix thead tr.mx-fieldrow th { top:calc(var(--site-header-h) + 29px); text-transform:none; height:auto; padding-top:0; }
table.matrix td.mx-date, table.matrix th.mx-date { position:sticky; left:0; z-index:2; background:var(--head-cell); white-space:nowrap; font-weight:600; min-width:0; cursor:pointer; }
table.matrix thead th.mx-date { z-index:4; }
td.mx-home { background:var(--home-cell); }
td.mx-full { background:var(--event-cell); }
/* Wochenend-Zeilen abgesetzt einfärben (Datumsband kräftiger, Zellen dezent);
   Heim-/Termin-Zellen behalten ihre eigene Farbe. */
tr.mx-weekend td.mx-date { background:var(--weekend-head); }
tr.mx-weekend td.mx-cell:not(.mx-home) { background:var(--weekend-cell); }
td.mx-edit { cursor:pointer; }
td.mx-edit:hover { outline:2px dashed var(--muted); outline-offset:-2px; }
.chip { border-radius:6px; padding:2px 5px; margin:1px 0; background:var(--surface-2); font-size:11px; }
.chip.home { background:rgba(255,255,255,.10); }
:root[data-theme="light"] .chip.home { background:rgba(0,0,0,.06); }
.chip.ev { background:var(--event-cell); }
.chip.conflict { border:1.5px solid var(--live); }
.mx-warn { color:var(--live); }
.fbadge { font-family:var(--font-display); font-weight:700; font-size:9.5px; background:var(--steel-bg); color:var(--text); border-radius:5px; padding:1px 4px; vertical-align:1px; }
.fbadge.nofield { background:#b98a00; color:#fff; }

/* Feldfarben — Kopf-Chips, Zell-Badges, Tagesansicht */
.f-BB { background:var(--f-bb-bg); color:var(--f-bb-fg); }
.f-SB { background:var(--f-sb-bg); color:var(--f-sb-fg); }
.f-BBQ { background:var(--f-bbq-bg); color:var(--f-bbq-fg); }
.f-TB { background:var(--f-tb-bg); color:var(--f-tb-fg); }
.hfchip { display:inline-block; border-radius:6px; padding:1px 6px; font-size:10px; font-weight:700; font-family:var(--font-display); margin:0 3px 2px 0; }
/* Ferien */
td.mx-holiday { color:var(--holiday); }
.hol-dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--holiday); margin-right:4px; vertical-align:1px; }

/* ---- Feld-Tagesansicht ---- */
#dayview h2 { font-family:var(--font-display); font-weight:800; text-transform:uppercase; letter-spacing:.02em; margin:10px 0; }
.tracks { display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:12px; margin-top:12px; }
.track-head { font-family:var(--font-display); font-weight:700; text-transform:uppercase; font-size:12px; letter-spacing:.04em; color:var(--muted); margin-bottom:6px; }
.track-body { position:relative; height:640px; background:var(--surface); border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.hline { position:absolute; left:0; right:0; border-top:1px dashed var(--line); }
.hline span { position:absolute; top:2px; left:4px; font-size:10px; color:var(--muted); }
.block { position:absolute; left:34px; right:4px; background:var(--steel-bg); border:1px solid var(--line); border-radius:7px; padding:3px 6px; font-size:12px; overflow:hidden; z-index:1; }
.block.conflict { border-color:var(--live); background:rgba(255,45,63,.20); }
.block.buffer { background:repeating-linear-gradient(45deg, transparent, transparent 4px, var(--line) 4px, var(--line) 5px); border:0; z-index:0; }
.block.nostart { position:static; margin:4px 4px 4px 34px; }

/* ---- Mobile: roomier scoring, bigger touch targets ---- */
@media (max-width:600px) {
  .admin-wrap, .detail { padding:14px; }
  .list { padding:12px 14px 40px; }
  .tabs, .filters { padding-left:14px; padding-right:14px; }
  .match .teams { font-size:16px; }
  .grid-events { gap:10px; margin:14px 0; }
  .grid-events .btn { padding:18px 0; }
  .out-types { grid-template-columns:repeat(3,1fr); gap:8px; }
  .out-types .btn { padding:13px 0; }
  .toolbar { gap:10px; }
  .nav-toolbar .btn { flex:1 1 auto; justify-content:center; text-align:center; }
  .nav-toolbar .league-filter { flex:1 1 100%; }
  .nav-toolbar .league-filter select { flex:1; min-width:0; }
  .inning-grid input { padding:12px; }
  .roster-list .p { grid-template-columns:52px minmax(0,1fr) 52px 40px; gap:6px; padding:7px 8px; }
  .detail h2 { font-size:22px; }
  /* Header kompakt, damit Admin-/Konto-Button und Theme-Toggle nicht abgeschnitten werden */
  /* 84px = gemessene Höhe der zweizeiligen Kopfleiste auf der öffentlichen
     Spielplan-Seite (/spielplan/); dort dient der Token als Sticky-Offset für
     die Matrix. Die Admin-Seiten sind mit 82px minimal niedriger — ein
     2px-Spalt dort ist unkritisch, eine Überlappung hier nicht. */
  :root { --site-header-h:84px; }
  header { padding:10px 10px; gap:8px; flex-wrap:wrap; }
  header h1 { font-size:15px; gap:7px; }
  header h1 .logo { height:26px; }
  /* Navigation in eine eigene zweite Zeile — sonst schneidet der vierte Link
     rechts ab. `order:3` hält Login/Konto und Theme-Umschalter in Zeile 1,
     deren `margin-left:auto` wirkt dort weiter. */
  .nav { margin-left:0; gap:2px; order:3; flex:1 1 100%; flex-wrap:wrap; }
  .nav a { padding:5px 7px; font-size:12px; }
  .admin-link { padding:5px 8px; font-size:11.5px; }
  .theme-toggle { padding:5px 8px; font-size:13px; }
  .account-btn { padding:5px 8px; font-size:11.5px; max-width:90px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  /* Tabs einzeilig: kompakter, notfalls horizontal scrollbar statt Umbruch */
  .tabs { flex-wrap:nowrap; overflow-x:auto; }
  .tab { padding:10px 8px; font-size:13px; white-space:nowrap; }
  .tab .count { padding:1px 6px; font-size:11px; }
}

/* ---- Admin Spielplan: Modal ---- */
#modal-back { position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:50; display:flex; align-items:flex-start; justify-content:center; overflow:auto; padding:30px 12px; }
#modal { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:18px; max-width:440px; width:100%; box-shadow:var(--shadow); }
#modal h3 { font-family:var(--font-display); text-transform:uppercase; letter-spacing:.03em; margin:0 0 6px; }
#modal input:not([type="checkbox"]), #modal select { display:block; width:100%; margin-top:5px; }
.fieldchecks { display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:6px; }
.fieldcheck { display:flex; align-items:center; gap:6px; font-size:14px; cursor:pointer; }
.fieldcheck input { width:auto; margin:0; }

/* ---- Admin Spielplan: Settings ---- */
#settings h3 { font-family:var(--font-display); text-transform:uppercase; letter-spacing:.04em; font-size:15px; margin:22px 0 8px; }
.settings-tables { display:grid; gap:20px; grid-template-columns:1fr; max-width:820px; }
.settings-tables table { border-collapse:collapse; width:100%; font-size:14px; }
.settings-tables th, .settings-tables td { border-bottom:1px solid var(--line); padding:6px 8px; text-align:left; }
.settings-tables th { font-family:var(--font-display); font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
.settings-tables input[type="number"] { width:90px; }
#settings { max-width:900px; }

.user-flags { display:flex; gap:10px; align-items:center; flex-wrap:wrap; font-size:13px; color:var(--muted); }
.user-flags label { display:flex; align-items:center; gap:4px; }
a.btn { text-decoration:none; display:inline-flex; align-items:center; }

.admin-link { margin-left:auto; color:var(--muted); text-decoration:none; font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:.04em; font-size:13px; border:1px solid var(--line); border-radius:10px; padding:6px 12px; }
.admin-link:hover { color:var(--text); border-color:var(--muted); }
header .admin-link + .theme-toggle { margin-left:0; }

/* ---- Konto-Menü im Admin-Header ---- */
.account { margin-left:auto; position:relative; }
.account-btn {
  background:none; border:1px solid var(--line); color:var(--muted); cursor:pointer;
  border-radius:10px; padding:6px 12px; font-family:var(--font-display);
  font-weight:700; text-transform:uppercase; letter-spacing:.04em; font-size:13px;
}
.account-btn:hover { color:var(--text); border-color:var(--muted); }
.account-menu {
  position:absolute; right:0; top:calc(100% + 6px); z-index:30; min-width:180px;
  background:var(--surface); border:1px solid var(--line); border-radius:10px;
  box-shadow:var(--shadow); display:grid; padding:6px;
}
.account-menu[hidden] { display:none; }
.account-menu button {
  background:none; border:0; color:var(--text); text-align:left; cursor:pointer;
  padding:9px 11px; border-radius:7px; font:inherit; font-size:14px;
}
.account-menu button:hover { background:var(--surface-2); }

/* Manuelle Spiele */
.manual-bar { max-width: 1100px; margin: 0 auto; padding: 0 16px 8px; }
.mm-edit {
  border: none; background: none; color: var(--muted); cursor: pointer;
  font-size: 14px; margin-left: 6px; padding: 2px 4px;
}
.mm-edit:hover { color: var(--text); }
.badge.manual { background: var(--steel-bg); color: var(--steel); }
.badge.gone { background:transparent; border:1px dashed var(--muted); color:var(--muted); }
dialog#matchDialog {
  background: var(--surface); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px; max-width: 420px; width: 92vw; box-shadow: var(--shadow);
}
dialog#matchDialog::backdrop { background: rgba(0,0,0,0.55); }
#matchForm { display: flex; flex-direction: column; gap: 10px; }
#matchForm label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--muted); }
#matchForm input, #matchForm select {
  padding: 8px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--surface-2); color: var(--text); font: inherit;
}
.mm-error { color: var(--live); min-height: 1em; margin: 0; font-size: 13px; }
.dialog-actions { display: flex; gap: 8px; align-items: center; margin-top: 6px; }
.dialog-actions .spacer { flex: 1; }
/* Base-Diamant: als "Feld"-Karte abgesetzt, damit er in der GUI klar sichtbar ist. */
.diamond-card { background: var(--event-cell); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 10px 12px 6px; margin: 12px 0; }
.diamond-head { font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.diamond-hint { text-align: center; margin: 6px 0 2px; }
.diamond { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 4px 0; }
.diamond-row { display: flex; gap: 48px; }
.base { min-width: 96px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface); font-size: 12px; display: flex; flex-direction: column; cursor: pointer; }
.base.occupied { background: var(--home, #2a6ea8); border-color: var(--home, #2a6ea8); color: #fff; }
.base.active { outline: 2px solid var(--pitch, #2a6ea8); outline-offset: 1px; }
.base span { font-weight: 600; }
.diamond-card.readonly .base { cursor: default; }
.grid-events .btn.wpds { font-size: 12px; padding: 6px 4px; line-height: 1.25; }
/* "Fielder's Choice" ist ausgeschrieben zu lang fuer eine einzelne Rasterspalte. */
.grid-events .btn.fc { grid-column: span 2; }
.btn.danger[disabled] { opacity: .45; cursor: not-allowed; }
.pr-inline { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.pr-inline select { max-width: 180px; }
/* Freitext-Notiz im Scoring */
.note-input { display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin:8px 0; }
.note-input input { flex:1 1 200px; min-width:0; }
.char-count { font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; }
.char-count.near-limit { color:var(--live); }
/* Runner-Panel: Karte mit Kopf + je Aktion ein Label und ein Button-Raster,
   damit die Optionen auch mobil sauber ausgerichtet bleiben. */
.runner-panel { margin: 10px 0 14px; padding: 12px 14px; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.runner-panel .rp-head { font-family: var(--font-display); font-size: 16px; margin-bottom: 8px;
  padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.runner-panel .rp-group { display: grid; grid-template-columns: 92px 1fr; align-items: start;
  gap: 8px; margin: 8px 0; }
.runner-panel .rp-label { font-size: 12px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); padding-top: 9px; }
.runner-panel .rp-btns { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px; }
.runner-panel .rp-btns .btn { padding: 10px 6px; }
/* Mobil: Label über die Buttons stellen, Buttons in zwei gleiche Spalten.
   Steht bewusst NACH den Basis-Regeln, damit die Overrides greifen. */
@media (max-width:600px) {
  .runner-panel .rp-group { grid-template-columns:1fr; gap:4px; }
  .runner-panel .rp-label { padding-top:2px; }
  .runner-panel .rp-btns { grid-template-columns:repeat(2,1fr); }
  .runner-panel .rp-btns .btn { padding:13px 4px; }
}
.btn.danger { color: var(--live); border-color: var(--live); }
.imp-list { max-height: 52vh; overflow-y: auto; margin: 8px 0; display: grid; gap: 4px; }
.imp-row { display: flex; align-items: flex-start; gap: 8px; padding: 6px 8px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--surface); font-size: 14px; cursor: pointer; }
.imp-row input { margin-top: 3px; }
/* Umpire-/Scorer-Einteilung */
.officials-card { background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:10px 14px; margin:10px 0; }
.officials-head { font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:.04em; font-size:12px; color:var(--muted); margin-bottom:4px; }
.officials-card .field { margin:8px 0; }
.officials-card select { min-width:180px; }
.of-btn { font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:.03em;
  font-size:11px; padding:3px 9px; border-radius:999px; background:var(--surface-2); color:var(--muted);
  border:1px solid var(--line); cursor:pointer; margin-right:6px; }
.of-btn:hover { color:var(--text); border-color:var(--muted); }
.officials-box { position:absolute; right:12px; bottom:34px; z-index:5; display:grid; gap:3px;
  min-width:150px; background:var(--surface); border:1px solid var(--line); border-radius:10px;
  padding:9px 12px; font-size:13px; box-shadow:0 8px 24px rgba(0,0,0,.35); }
/* display:grid würde [hidden] überstimmen — explizit ausblenden. */
.officials-box[hidden] { display:none; }
.officials-box b { font-family:var(--font-display); font-weight:700; text-transform:uppercase;
  font-size:11px; letter-spacing:.04em; color:var(--muted); }
.officials-box .of-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.of-close { background:none; border:0; padding:0 2px; color:var(--muted); cursor:pointer;
  font-size:13px; line-height:1; }
.of-close:hover { color:var(--text); }
.of-toggle { display:flex; align-items:center; gap:8px; margin:10px 0; font-size:14px; color:var(--text); cursor:pointer; }
/* Auswahl "Kader vom letzten Spiel": klappt inline unter der Button-Zeile auf.
   [hidden] muss explizit gesetzt werden, sonst überstimmt display:flex das
   Attribut (dieselbe Falle wie beim .account-menu). */
.copy-pick { display: flex; flex-direction: column; align-items: flex-start;
  gap: 6px; margin: 6px 0 12px; }
.copy-pick[hidden] { display: none; }
.copy-pick .tag { margin-bottom: 2px; }