/* ===== Dark Theme + Blue Accents ===== */
:root{
  --bg:#0b0f16;
  --topbar:#121827;
  --panel:#0f1626;
  --ink:#e8edf6;
  --muted:#8ea0bb;
  --line:rgba(42,139,239,.35);
  --line-strong:#2a8bef;
  --shadow:0 12px 28px rgba(2,6,23,.45);
  --radius:18px;
  --radius-lg:22px;
  --maxw:1280px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
img{max-width:100%;display:block}

/* ============= FIXER, NICHT-KACHELNDER HINTERGRUND ============= */
html{
  background: var(--bg);
  overflow-x: hidden;
}
body{
  position: relative;                  /* Anker für ::before */
  background: transparent;             /* Artwork kommt via ::before */
  color:var(--ink);
  font-family: ui-sans-serif,system-ui,-apple-system,Segoe UI,Inter,Roboto,Arial;
  -webkit-font-smoothing:antialiased; 
  text-rendering:optimizeLegibility;
}
body::before{
  content:"";
  position: fixed;                     /* bleibt stehen, scrollt nicht mit */
  inset: 0;
  z-index: -1;
  pointer-events: none;

  /* Grundfarbe + zwei Light-Spots */
  background-color: var(--bg);
  background-image:
    radial-gradient(60% 60% at 110% -10%, rgba(42,139,239,.12), transparent 65%),
    radial-gradient(55% 55% at -20% 25%, rgba(0,162,255,.08), transparent 65%);

  /* ganz wichtig: kein Kacheln */
  background-repeat: no-repeat, no-repeat;

  /* oversize, damit die Verläufe nie “enden” */
  background-size: 180vw 180vh, 140vw 140vh;
  background-position: 110% -10%, -20% 25%;
}
/* iOS/Safari-Fallback (fixed kann dort zicken) */
@supports (-webkit-touch-callout: none) {
  body::before{ position: absolute; background-attachment: scroll; }
}

/* ===== Topbar ===== */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 22px; background:var(--topbar);
  border-bottom:1px solid rgba(255,255,255,.06);
  position:sticky; top:0; z-index:50;
}
.brand{
  color:#fff; font-weight:1000; text-transform:uppercase; letter-spacing:.8px; font-size:24px;
}
.btn{appearance:none; border:0; cursor:pointer; font-weight:700}
.btn-pill{border-radius:999px; padding:10px 16px}
.btn-dark{background:#0b111c; color:#dbe6f7; border:1px solid rgba(255,255,255,.12)}

/* ===== Page layout (2 Spalten) ===== */
.container{max-width:var(--maxw); margin:24px auto; padding:0 18px}
.layout{
  display:grid; gap:22px;
  grid-template-columns: 2fr 1fr;   /* Links breit, rechts schmal */
  grid-auto-rows: minmax(160px, auto);
}
@media (max-width:1024px){
  .layout{ grid-template-columns: 1fr; }
}

/* ===== Panels ===== */
.panel{
  background:var(--panel);
  border-radius:var(--radius-lg);
  padding:18px; position:relative; overflow:hidden;
  border:1px solid rgba(255,255,255,.06);
}
.panel::after{
  content:""; position:absolute; right:-48px; top:-48px; width:200px; height:200px; border-radius:50%;
  background: radial-gradient(closest-side, rgba(42,139,239,.22), transparent 70%);
  filter: blur(6px); opacity:.55; pointer-events:none;
}
.panel-outline{
  box-shadow: var(--shadow);
  outline:1px solid var(--line);
}

/* ===== Profilpanel ===== */
.profile{ grid-row: span 2; }
.profile-head{ display:flex; align-items:center; gap:16px; margin-bottom:14px; }
.avatar{ width:86px; height:86px; border-radius:999px; overflow:hidden; background:#0b111c; border:1px solid var(--line); }
.id-block .display-name{ font-size:26px; font-weight:1000; letter-spacing:.3px; }
.id-block .username{ margin-top:4px; color:var(--muted); }

.meta-row{
  background:#0b111c; border:1px solid var(--line); border-radius:14px;
  padding:12px; margin:8px 0 16px;
}
.meta-label{ font-size:12px; letter-spacing:.3px; color:var(--muted); }
.meta-value{ font-weight:900; margin-top:4px; }

/* kleine Stat-Kacheln */
.tiles{ display:grid; grid-template-columns: repeat(2, 1fr); gap:12px; }
.tile{ background:#0b111c; border:1px solid var(--line); border-radius:14px; padding:12px; }
.tile-label{ font-size:12px; letter-spacing:.3px; color:var(--muted); }
.tile-value{ font-weight:900; margin-top:6px; }

/* ===== KPI-Panels ===== */
.kpi{ display:flex; flex-direction:column; justify-content:center; min-height:160px; }
.kpi .kpi-label{ font-weight:900; letter-spacing:.6px; color:#d9e4f7; }
.kpi .kpi-value{ font-size:64px; line-height:1; font-weight:1000; margin-top:10px; }

/* Utility */
.muted{ color:var(--muted); }

/* === SOLID BACKGROUND OVERRIDE (kein Kacheln, keine Glows) === */
html { background: #0b0f16 !important; }
body { background: #0b0f16 !important; }

/* alle evtl. vorhandenen Pseudo-Layer/Gradients abschalten */
body::before { content: none !important; background: none !important; }

/* optional: Panel-Leuchteffekt entfernen, damit wirklich alles clean wirkt */
.panel::after { display: none !important; }

/* ===== Scoreboard ===== */
.span-2{ grid-column: 1 / -1; }                 /* über beide Spalten */
.scoreboard{ margin-top: 14px; }                 /* kleinerer Abstand */
.sb-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; }
.sb-title{ font-weight:1000; font-size:18px; letter-spacing:.4px; }
.sb-controls{ display:flex; gap:10px; align-items:center; }

/* pill inputs */
.input-pill, .select-pill{
  background:#0b111c; color:var(--ink);
  border:1px solid rgba(42,139,239,.35);
  border-radius:9999px;
  padding:10px 14px;
  height:40px; line-height:40px;
  outline:none;
}
.input-pill::placeholder{ color:var(--muted); opacity:.85; }

/* Such-Icon im Feld */
.input-wrap{ position:relative; }
.input-wrap::before{
  content:"\1F50D"; /* 🔍 */
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  font-size:14px; color:var(--muted); pointer-events:none;
}
.input-wrap .input-pill{ padding-left:34px; min-width:260px; }
.select-pill{ min-width:140px; }

/* Tabelle */
.table-wrap{ overflow:auto; border-radius:14px; border:1px solid rgba(255,255,255,.06); }
.table{ width:100%; border-collapse:collapse; font-size:14px; }
.table thead th{
  text-align:left; padding:12px; background:#0b111c; color:#cfe0ff; font-weight:800;
  position:sticky; top:0;
}
.table tbody td{ padding:12px; border-top:1px solid rgba(255,255,255,.06); }
.table tbody tr:hover{ background:rgba(42,139,239,.07); }
.table .namecell{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:640px; }

.sb-total{ margin:4px 0 10px; }
@media (max-width:720px){
  .sb-controls{ width:100%; flex-direction:column; align-items:stretch; }
  .input-wrap .input-pill{ min-width:0; width:100%; }
  .select-pill{ min-width:0; width:100%; }
}

/* ===== Aktionen ===== */
.actions{ margin-top:16px; }
.actions-title{ font-weight:1000; font-size:18px; margin-bottom:10px; letter-spacing:.4px; }
.action-grid{
  display:grid; grid-template-columns: repeat(3, minmax(160px,1fr));
  gap:14px;
}
.action-card{
  appearance:none; border:1px solid var(--line); background:#0b111c; color:var(--ink);
  border-radius:16px; padding:18px; cursor:pointer; text-align:left;
  display:flex; align-items:center; gap:14px; transition:transform .06s ease, border-color .15s ease, background .15s ease;
}
.action-card:hover{ transform: translateY(-1px); border-color: var(--line-strong); background:#0e1524; }
.action-icon{
  width:46px; height:46px; border-radius:12px; display:grid; place-items:center;
  background: rgba(42,139,239,.14); font-size:22px;
}
.action-in .action-icon{ background: rgba(46,204,113,.18); }
.action-out .action-icon{ background: rgba(231,76,60,.18); }
.action-status .action-icon{ background: rgba(241,196,15,.18); }
.action-label{ font-weight:900; }

/* kleine Toast-Meldung */
.toast{
  position:relative; margin-top:12px; border-radius:12px; padding:10px 12px;
  font-weight:700; width:max-content; max-width:100%;
}
.toast.ok{ background:rgba(46,204,113,.14); border:1px solid rgba(46,204,113,.35); }
.toast.err{ background:rgba(231,76,60,.14);  border:1px solid rgba(231,76,60,.35); }

/* Scoreboard bereits vorhanden; Abstand harmonisieren */
.span-2{ grid-column: 1 / -1; }
.scoreboard{ margin-top: 16px; }

/* ===== Status-Badge im Profil-Panel ===== */
.profile{ position: relative; } /* Anker */
.status-banner{
  position:absolute; top:12px; right:12px;
  display:flex; align-items:center; gap:10px;
  padding:10px 14px; border-radius:9999px;
  font-weight:900; letter-spacing:.2px;
  border:1px solid rgba(255,255,255,.08);
  background:#0b111c; color:#e8edf6;
}
.status-banner .status-dot{
  width:10px; height:10px; border-radius:999px; display:inline-block;
  box-shadow: 0 0 0 3px rgba(255,255,255,.05) inset;
}
.status-banner.on{
  border-color: rgba(46,204,113,.35);
  background: rgba(46,204,113,.12);
  color:#dffbe8;
}
.status-banner.on .status-dot{ background:#2ecc71; }
.status-banner.off{
  border-color: rgba(231,76,60,.35);
  background: rgba(231,76,60,.12);
  color:#ffe6e3;
}
.status-banner.off .status-dot{ background:#e74c3c; }

/* ===== Status-Badge (falls noch nicht vorhanden) ===== */
.profile{ position: relative; }
.status-banner{
  position:absolute; top:12px; right:12px; display:flex; align-items:center; gap:10px;
  padding:10px 14px; border-radius:9999px; font-weight:900; letter-spacing:.2px;
  border:1px solid rgba(255,255,255,.08); background:#0b111c; color:#e8edf6;
}
.status-banner .status-dot{ width:10px; height:10px; border-radius:999px; display:inline-block; box-shadow:0 0 0 3px rgba(255,255,255,.05) inset; }
.status-banner.on{  border-color:rgba(46,204,113,.35); background:rgba(46,204,113,.12); color:#dffbe8; }
.status-banner.on .status-dot{ background:#2ecc71; }
.status-banner.off{ border-color:rgba(231,76,60,.35); background:rgba(231,76,60,.12); color:#ffe6e3; }
.status-banner.off .status-dot{ background:#e74c3c; }

/* ========== Aktionen – großes Kartendesign ========== */
.action-grid-large {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.btn-action {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(18,28,40,.95) 0%, rgba(12,18,28,.95) 100%);
  border: 1px solid rgba(70,103,171,.25);
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.btn-action:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
  border-color: rgba(91,137,218,.45);
}
.btn-action:active { transform: translateY(0); }

.btn-action-icon {
  width: 42px; height: 42px;
  display:grid; place-items:center;
  font-size: 22px;
  border-radius: 12px;
  background: rgba(91,137,218,.12);
  border: 1px solid rgba(91,137,218,.35);
}

.btn-action-text { display:flex; flex-direction:column; }
.btn-action-title { font-weight: 700; letter-spacing:.2px; }
.btn-action-sub   { font-size:.9rem; opacity:.7; }

/* Farbakzente pro Aktion */
.btn-action.in     .btn-action-icon{ background: rgba(0,200,120,.10); border-color: rgba(0,200,120,.35); }
.btn-action.out    .btn-action-icon{ background: rgba(220,50,70,.10);  border-color: rgba(220,50,70,.35);  }
.btn-action.status .btn-action-icon{ background: rgba(91,137,218,.12); border-color: rgba(91,137,218,.35); }

/* ========== Floating Notifier (Top-Right) ========== */
.notify-stack {
  position: fixed;
  right: 18px;
  top: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 1000;
}
.notify {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .2s ease, transform .2s ease;
  background: linear-gradient(180deg, rgba(20,28,45,.95) 0%, rgba(14,20,32,.95) 100%);
  color: #e8eefc;
  border: 1px solid rgba(91,137,218,.35);
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  border-radius: 14px;
  padding: 12px 14px;
  min-width: 220px;
}
.notify.show { opacity: 1; transform: translateY(0); }
.notify.err  { border-color: rgba(220,50,70,.45); }
.notify .notify-content { font-size: .95rem; }

/* ========== Kleines Layout-Finetuning ========== */
.actions .actions-title { margin-bottom: 10px; }
.scoreboard { margin-top: 16px; }

/* Responsive: bei < 900px zwei Spalten, bei < 640px eine Spalte */
@media (max-width: 900px){
  .action-grid-large { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .action-grid-large { grid-template-columns: 1fr; }
}

/* ========= Aktionen: modernes Karten-Design mit Akzentleiste ========= */

.action-row{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 18px;
}

/* Karte */
.action-card2{
  --bg: rgba(10,16,26,.72);
  --bd: rgba(86,120,185,.28);
  --glow: rgba(86,120,185,.18);

  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: var(--bg);
  backdrop-filter: blur(8px);
  border: 1px solid var(--bd);
  border-radius: 18px;
  box-shadow: 0 10px 26px rgba(0,0,0,.28);
  overflow: hidden;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}

/* Farbakzent als linke Leiste */
.action-card2::before{
  content:"";
  position:absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: var(--accent, linear-gradient(180deg,#5b89da,#335aa8));
  opacity: .85;
}

/* dezentes Glühen oben rechts */
.action-card2::after{
  content:"";
  position:absolute;
  right:-20px; top:-20px;
  width:120px; height:120px;
  border-radius: 50%;
  background: radial-gradient(60px 60px at center, var(--glow) 0%, transparent 60%);
  pointer-events:none;
}

.action-card2:hover{
  transform: translateY(-2px);
  border-color: rgba(91,137,218,.42);
  box-shadow: 0 14px 34px rgba(0,0,0,.36);
}

/* Icon-Kachel */
.ac-icon{
  width: 48px; height: 48px;
  display:grid; place-items:center;
  font-size: 22px;
  border-radius: 12px;
  border: 1px solid rgba(91,137,218,.35);
  background: rgba(91,137,218,.12);
}

/* Text */
.ac-text{ display:flex; flex-direction:column; gap: 2px; text-align:left; }
.ac-title{ font-weight: 700; letter-spacing:.2px; }
.ac-sub{ font-size:.92rem; opacity:.72; }

/* Variantfarben */
.action-card2.in{
  --accent: linear-gradient(180deg,#18e7a8,#0ba77c);
  --glow: rgba(24,231,168,.18);
}
.action-card2.in .ac-icon{
  background: rgba(24,231,168,.12);
  border-color: rgba(24,231,168,.40);
}

.action-card2.out{
  --accent: linear-gradient(180deg,#ff5b6b,#c42339);
  --glow: rgba(255,91,107,.18);
}
.action-card2.out .ac-icon{
  background: rgba(255,91,107,.12);
  border-color: rgba(255,91,107,.42);
}

.action-card2.status{
  --accent: linear-gradient(180deg,#64a0ff,#335aa8);
  --glow: rgba(100,160,255,.18);
}
.action-card2.status .ac-icon{
  background: rgba(100,160,255,.12);
  border-color: rgba(100,160,255,.40);
}

/* Responsive */
@media (max-width: 960px){
  .action-row{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .action-row{ grid-template-columns: 1fr; }
}


/* PATCH: Aktionen-Buttons – weiße Schrift & kein rechter Glow */
.action-card2,
.action-card2 .ac-title,
.action-card2 .ac-sub {
  color: #fff !important;
}

.action-card2 .ac-sub {
  opacity: .85;            /* gut lesbar, aber etwas ruhiger */
}

/* Glow rechts oben entfernen */
.action-card2::after {
  content: none !important;
  display: none !important;
}
/* ——— Hübscher Logout-Button (Pill-Chip) ——— */
.topbar .logout-chip { margin-left: auto; }

.logout-chip{
  --bg: linear-gradient(180deg, rgba(26,36,56,.95) 0%, rgba(14,21,34,.95) 100%);
  --bd: rgba(91,137,218,.38);
  --bd-hover: rgba(255,90,104,.55);
  --ink: #eaf2ff;

  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--bg);
  color: var(--ink);
  text-decoration: none;
  border: 1px solid var(--bd);
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
.logout-chip:hover{
  transform: translateY(-1px);
  border-color: var(--bd-hover);
  box-shadow: 0 12px 28px rgba(255,90,104,.18), 0 10px 26px rgba(0,0,0,.35);
}
.logout-chip:active{ transform: translateY(0); }
.logout-chip:focus-visible{
  outline: 2px solid rgba(255,90,104,.7);
  outline-offset: 2px;
}

.logout-chip .icon-wrap{
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: rgba(255,90,104,.12);
  border: 1px solid rgba(255,90,104,.45);
  color: #ff7a88;
}
.logout-chip .txt{
  font-weight: 700;
  letter-spacing: .2px;
}
/* ===== Login-Seite im Dashboard-Design ===== */
.login-page { min-height: 100vh; }

.login-wrap{
  min-height: calc(100vh - 72px); /* Topbar abziehen */
  display: grid;
  place-items: center;
  padding: 32px 20px;
}

.login-card{
  max-width: 560px;
  width: 100%;
}

.login-card-inner{
  padding: 32px 26px;
  display: grid;
  gap: 22px;
}

.login-head{
  display: grid;
  justify-items: center;
  gap: 10px;
  text-align: center;
}
.login-head h1{
  margin: 0;
  font-size: 1.8rem;
  letter-spacing: .3px;
}
.login-icon{
  width: 48px; height: 48px;
  display: grid; place-items: center;
  color: #8fb1ff;
  background: rgba(100,160,255,.12);
  border: 1px solid rgba(100,160,255,.35);
  border-radius: 14px;
}

/* Discord-Button – gleiches Glas/Accent-Feeling */
.btn-discord{
  --bg: linear-gradient(180deg, rgba(18,28,44,.93) 0%, rgba(12,18,28,.93) 100%);
  --bd: rgba(91,137,218,.35);
  --bd-hover: rgba(123,163,255,.55);
  --ink: #eaf2ff;

  display: grid;
  grid-template-columns: 44px 1fr;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  text-decoration: none;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--bd);
  box-shadow: 0 10px 26px rgba(0,0,0,.28);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.btn-discord:hover{
  transform: translateY(-1px);
  border-color: var(--bd-hover);
  box-shadow: 0 14px 34px rgba(0,0,0,.36), 0 10px 24px rgba(100,160,255,.18);
}

.dc-badge{
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: rgba(100,160,255,.12);
  border: 1px solid rgba(100,160,255,.45);
  color: #9ebbff;
}
.dc-text{ display:flex; flex-direction:column; }
.dc-text strong{ font-weight: 800; letter-spacing:.2px; }
.dc-sub{ opacity: .75; font-size: .92rem; }

.login-foot{ text-align:center; margin-top: 4px; font-size: .9rem; }

/* Panels/Topbar nutzen bereits deine bestehenden Styles */
/* Discord-Button: Badge im offiziellen Blurple, Icon weiß, sauber zentriert */
.btn-discord { grid-template-columns: 48px 1fr; gap: 16px; }

.dc-badge{
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 12px;            /* oder 999px für komplett rund */
  background: #5865F2;           /* Discord Blurple */
  color: #fff;                    /* Icon-Farbe (currentColor vom SVG) */
  border: none;
  box-shadow: 0 8px 20px rgba(88,101,242,.35);
  transform: translateZ(0);       /* crisper rendering */
}
.btn-discord:hover .dc-badge{
  box-shadow: 0 10px 26px rgba(88,101,242,.45);
}

.dc-glyph{ display:block; }

/* Optional: Button insgesamt etwas „voller“ wirken lassen */
.btn-discord{ padding: 16px 18px; border-radius: 16px; }
.dc-text strong{ font-weight: 800; }

/* ===== Discord Login Button – Präzisions-Fix ===== */
.btn-discord{
  -webkit-appearance: none; appearance: none;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 64px;
  padding: 14px 18px;
  border-radius: 16px;
  text-decoration: none;
  color: #eaf2ff;
  background: linear-gradient(180deg,#0f1a2a 0%, #0b1424 100%);
  border: 1px solid rgba(91,137,218,.35);
  box-shadow: 0 10px 26px rgba(0,0,0,.28);
  line-height: 1;                /* verhindert „springende“ Vertikalposition */
}
.btn-discord:hover{
  transform: translateY(-1px);
  border-color: rgba(123,163,255,.55);
  box-shadow: 0 14px 34px rgba(0,0,0,.36), 0 10px 24px rgba(100,160,255,.18);
}

.dc-badge{
  width: 40px; height: 40px;     /* harmonische Proportionen */
  flex: 0 0 40px;
  display: grid; place-items: center;
  border-radius: 12px;           /* oder 999px für rund */
  background: #5865F2;          /* Discord Blurple */
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 8px 20px rgba(88,101,242,.35);
}
.dc-glyph{ width: 20px; height: 20px; display:block; }

.dc-copy{ display:flex; flex-direction:column; gap: 2px; }
.dc-title{ font-weight: 800; letter-spacing: .2px; }
.dc-sub{ opacity: .80; font-size: .92rem; }

/* Karten-Panel rundet die Ecken gleich wie Dashboard */
.login-card{ border-radius: 20px; }

/* === Discord-Button mit deinem mittigen SVG === */
.btn-discord{
  position: relative;
  overflow: hidden;
  -webkit-appearance: none; appearance: none;
  display: inline-flex; align-items: center;
  min-height: 64px; padding: 16px 20px; gap: 14px;
  border-radius: 16px; text-decoration: none;
  color: #eaf2ff;
  background: linear-gradient(180deg,#0f1a2a 0%, #0b1424 100%);
  border: 1px solid rgba(91,137,218,.35);
  box-shadow: 0 10px 26px rgba(0,0,0,.28);
}
.btn-discord:hover{
  transform: translateY(-1px);
  border-color: rgba(123,163,255,.55);
  box-shadow: 0 14px 34px rgba(0,0,0,.36), 0 10px 24px rgba(100,160,255,.18);
}

/* zentriertes Watermark */
.btn-discord--wm .dc-watermark{
  position: absolute; inset: 0;
  display: grid; place-items: center;
  pointer-events: none; opacity: .18;     /* dezent hinter dem Text */
}
.btn-discord--wm .dc-glyph-img{
  width: clamp(44px, 30%, 84px);          /* skaliert responsiv */
  height: auto;
  filter: drop-shadow(0 2px 10px rgba(88,101,242,.24));
}

/* Text über dem Logo */
.btn-discord--wm .dc-copy{ position: relative; z-index: 1; display:flex; flex-direction:column; }
.dc-title{ font-weight: 800; letter-spacing: .2px; }
.dc-sub{ opacity: .80; font-size: .92rem; }

/* LOGIN: erzwungener Vollbild-Hintergrund (ohne Kacheln) */
body.login-page{
  background: none !important; /* alles Vorherige aushebeln */
  position: relative;
  min-height: 100vh;
}

/* Wir zeichnen den Hintergrund als eigenes Layer, damit nichts ihn überschreibt */
body.login-page::before{
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;                 /* hinter dem Inhalt */
  background-image:
    linear-gradient(180deg, rgba(8,12,20,.60) 0%, rgba(8,12,20,.78) 100%),
    url("/static/login-bg.png");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* Mobile/iOS: fixed kann ruckeln – dort lieber scroll */
@media (max-width: 820px){
  body.login-page::before{ background-attachment: scroll; }
}

/* Panel etwas transparent lassen, damit der BG sichtbar ist */
.login-card{
  background: linear-gradient(180deg, rgba(18,28,44,.86) 0%, rgba(12,18,28,.86) 100%) !important;
  border-color: rgba(91,137,218,.35) !important;
}
.player-list {
  margin-top: 12px;
  padding-left: 0;
  list-style: none;
  max-height: 240px;         /* scollbar bei vielen Einträgen */
  overflow: auto;
  border-top: 1px solid rgba(120,160,255,.12);
}
.player-list li {
  padding: 8px 0;
  border-bottom: 1px dashed rgba(120,160,255,.10);
}
.player-list li:last-child {
  border-bottom: none;
}
.muted { opacity: .6; }

:root{
  --bg: #0e131b;
  --panel: #121824;
  --panel-border: rgba(46,115,255,.16);
  --panel-glow: 0 0 0 1px rgba(46,115,255,.10), 0 10px 28px rgba(0,0,0,.45);
  --text: #eaf0ff;
  --muted: #9fb0cf;
  --accent: #2a8bef;
  --success: #16c782;
  --danger: #ff4d4f;
}

/* Einheitlicher Panel-Look */
.panel{
  background: radial-gradient(1100px 520px at 85% -120px, rgba(42,139,239,.06), transparent 70%), var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 18px;
  box-shadow: var(--panel-glow);
  color: var(--text);
}

.panel .kpi-title{
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .35rem;
}

.panel .kpi-value{ 
  font-size: 3rem; 
  font-weight: 800; 
  line-height: 1.1;
}
.panel .kpi-sub{
  margin-top: .25rem;
  color: var(--muted);
  font-size: .9rem;
}

/* 2-Spalten-Grid für „Spieler online“ + „LSPD im Spiel“ */
.row-grid-2{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.panel--stretch{
  min-height: 360px;
  display: flex;
  flex-direction: column;
}
.panel-head{
  display:flex; align-items:baseline; justify-content:space-between;
  margin-bottom: .75rem;
}
.panel-head h3{
  font-size: 1rem; font-weight: 700; margin:0; color: var(--text);
  letter-spacing: .02em;
}
.panel-head .muted{ color: var(--muted); font-size:.9rem; }

/* Liste der LSPD-Spieler */
.player-list{
  margin: .5rem 0 0;
  padding-left: 0;
  list-style: none;
  border-top: 1px solid rgba(120,160,255,.12);
  overflow: auto;
  max-height: 260px;
}
.player-list li{
  padding: 8px 0;
  border-bottom: 1px dashed rgba(120,160,255,.10);
}
.player-list li:last-child{ border-bottom: none; }

/* kleine Zähler-Pille oben rechts in der LSPD-Kachel (optional) */
.count-pill{
  display:inline-flex; align-items:center; gap:.5rem;
  font-weight:700; color:var(--text);
}

/* große Zahl in „Spieler online“ dezent größer */
.metric-number{ font-size: 3.2rem; font-weight: 800; }

/* Utility */
.muted{ opacity:.65; color: var(--muted); }

/* Mobile: Panels untereinander */
@media (max-width: 1100px){
  .row-grid-2{ grid-template-columns: 1fr; }
  .panel--stretch{ min-height: auto; }
}
/* 3-Spalten-Grid mit responsivem Fallback */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 18px;
}
.col-span-2 { grid-column: span 2; }

/* gleiche Höhe für die Kacheln in dem Grid */
.grid-3 .panel--stretch {
  min-height: 360px;
  display: flex;
  flex-direction: column;
}

/* Breakpoints */
@media (max-width: 1200px){
  .grid-3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .col-span-2 { grid-column: span 2; } /* „Spieler online“ bleibt über volle Breite */
}
@media (max-width: 720px){
  .grid-3 { grid-template-columns: 1fr; }
  .col-span-2 { grid-column: auto; }   /* normal untereinander */
}

/* Gemeinsames 3-Spalten-Grid für Header + mittlere Zeile */
.dashboard-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:18px;
}

/* Spalten-Hilfsklassen */
.col-span-2 { grid-column: span 2; }  /* 2 Spalten breit (wie Profil / Spieler online) */
.col-start-3 { grid-column: 3; }      /* erzwingt Spalte 3 (z.B. "Gesamt registriert" unten rechts) }

/* gleiche Mindesthöhe für große Kacheln */
.dashboard-grid .panel--stretch{
  min-height: 360px;
  display:flex; flex-direction:column;
}

/* Breakpoints */
@media (max-width:1200px){
  .dashboard-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .col-span-2 { grid-column: span 2; }   /* nimmt dann gesamte Zeile ein */
  .col-start-3 { grid-column: auto; }    /* Reihenfolge bleibt natürlich */
}
@media (max-width:720px){
  .dashboard-grid { grid-template-columns: 1fr; }
  .col-span-2 { grid-column: auto; }
}