:root {
    --bg: #0f0f10;
    --panel: #18181b;
    --text: #f5f5f5;
    --muted: #a1a1aa;
    --accent: #ff7a1a;
    --accent-fg: #111;
    --radius: 14px;
    --pad: 16px;

    /* Standard-Fallbacks für Theme-Varianten */
    --accent-1: var(--accent);
    --accent-2: var(--accent);
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body.app {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px var(--pad);   /* etwas mehr vertikal */
    min-height: 56px;           /* sichert Höhe fürs Icon */
    background: rgba(15,15,16,.9);
    backdrop-filter: blur(6px);
}

.brand { display: flex; align-items: center; gap: 10px; }

.logo {
    display: grid; place-items: center;
    width: 28px; height: 28px; border-radius: 8px;
    background: var(--accent); color: #111; font-weight: 900;
}
.brand-text { font-weight: 700; letter-spacing: .2px; }
.topbar-right { display: flex; align-items: center; gap: 10px; }
.tag { font-size: .9rem; color: var(--muted); }

.btn { padding: 10px 14px; border-radius: 10px; text-decoration: none; display: inline-block; }
.btn-ghost { background: #232326; color: var(--text); }
.btn-danger { color: #ff6b6b; background: transparent; }
.btn-sm { padding: .35rem .55rem; font-size: .9rem; border-radius: 8px; }

.container { padding: 18px var(--pad) 28px; }
.h1 { font-size: 2rem; margin: 8px 0 18px; }

.actions-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 22px;
}

.tile {
    display: flex; align-items: center; justify-content: center; text-align: center;
    min-height: 110px; padding: 14px; border-radius: var(--radius);
    text-decoration: none; font-weight: 600; font-size: 1.05rem;
    transition: all 0.2s ease-in-out;
}
.tile span { color: inherit; }

.tile-accent { background: var(--accent); color: var(--accent-fg); }
.tile-outline { background: var(--panel); color: var(--text); border: 1px solid #26262b; }

.section { margin: 18px 0; }
.section-title { font-size: 1.05rem; color: #e7e7ea; margin: 0 0 10px 2px; }

.skeleton-row {
    height: 72px; border-radius: 12px;
    background: linear-gradient(90deg,#1d1d21 0%,#242428 50%,#1d1d21 100%);
    background-size: 200% 100%;
    animation: shimmer 1.4s linear infinite;
}
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

@media (min-width:720px) {
    .h1 { font-size: 2.4rem; }
    .actions-grid { grid-template-columns: repeat(4,1fr); }
}

/* ===================== */
/* (Alt) feste Kachel-Farben – optional weiter nutzbar */
/* ===================== */
.tile-blue   { background-color: #3A7DFF; color: #fff; }
.tile-yellow { background-color: #FFD43A; color: #000; }
.tile-purple { background-color: #8A4DFF; color: #fff; }
.tile-teal   { background-color: #2DD4BF; color: #000; }

.tile-blue:hover,
.tile-yellow:hover,
.tile-purple:hover,
.tile-teal:hover { opacity: .85; transform: scale(1.03); }

/* Brand-Link klickbar & sauber ausrichten */
.brand-link { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text); }

/* Das kleine Icon-Badge links neben dem Namen */
.logo-badge {
  display:grid; place-items:center;
  width:28px; height:28px; border-radius:8px;
  background: var(--accent); color:#111; font-weight:900; line-height:1;
}
.brand-link:hover .logo-badge { filter: brightness(1.08); }

/* Page themes: setzen die Akzentfarbe pro Seite (Primär) */
.theme-purple  { --accent:#8A4DFF; }
.theme-blue    { --accent:#3A7DFF; }
.theme-yellow  { --accent:#FFD43A; }
.theme-teal    { --accent:#2DD4BF; }

/* Elemente, die die Akzentfarbe nutzen dürfen */
.lead { color: var(--muted); margin: -6px 0 14px; }
.panel{
  background: var(--panel);
  border: 1px solid #26262b;
  border-left: 4px solid var(--accent);
  border-radius: 12px;
  padding: 14px;
}
.btn-primary{
  background: var(--accent);
  color: #111;
  border-radius: 10px;
  padding: 10px 14px;
  text-decoration: none;
  display: inline-block;
}
.btn-primary:hover{ filter: brightness(1.05); }

.logout-inline { display:inline; margin:0; }
.logout-inline .btn { cursor:pointer; }

/* Leaderboard (älterer Stil, weiterhin nutzbar) */
.lb-list { list-style:none; padding:0; margin:10px 0 0; display:flex; flex-direction:column; gap:12px; }
.lb-item { display:flex; gap:12px; align-items:center; }

.lb-avatar { width:48px; height:48px; border-radius:999px; overflow:hidden; background:#26262b; display:grid; place-items:center; flex:0 0 48px; }
.lb-avatar img { width:100%; height:100%; object-fit:cover; display:block; }
.lb-avatar-fallback { color:#fff; font-weight:700; }

.lb-bar { position:relative; background:#1b1b1f; border:1px solid #26262b; border-radius:14px; flex:1; height:48px; overflow:hidden; }
.lb-bar-fill { position:absolute; inset:0 auto 0 0; background:var(--accent); opacity:.9; }
.lb-bar-content { position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; height:100%; padding:0 12px; }
.lb-name { font-weight:600; }
.lb-points { font-variant-numeric:tabular-nums; opacity:.9; }

.tile-disabled { opacity: .85; }
.tile-disabled:hover { opacity: .85; transform: none; }

.code-chip{
  display:inline-block;
  padding: .4rem .6rem;
  border: 1px solid var(--border);
  border-radius: .6rem;
  background: var(--bg-muted);
  font-weight: 600;
  letter-spacing: .08em;
}

.btn-ghost.danger { border-color: var(--border); color: #c0392b; }
.btn-ghost.danger:hover { background: rgba(192,57,43,.09); }

.leader-item {
  display: grid;
  grid-template-columns: 36px minmax(120px, 1fr) minmax(200px, 3fr) auto;
  gap: .75rem;
  align-items: center;
}
.leader-item .avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.leader-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar { height: 10px; background: var(--c-bg-2,#1f1f1f); border-radius: 999px; overflow: hidden; }
.fill { height: 100%; background: var(--c-accent,#ffd54d); }
.leader-points { font-variant-numeric: tabular-nums; font-weight: 700; min-width: 4ch; text-align: right; }

.card { border: 1px solid var(--c-border,#333); border-radius: 12px; background: var(--c-bg-2,#191919); padding: 1rem; }
.card-header { display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--c-border,#333); padding-bottom:.4rem; margin-bottom:.6rem; }
.card-body { display:flex; flex-direction:column; gap:.5rem; }

/* ===================== */
/* NEU: Theme-System pro Bereich (Primär + 2 Varianten) */
/* ===================== */

/* Leaderboard – Blau */
.theme-leaderboard {
  --accent:   #4A90E2;
  --accent-1: #6AA8EA; /* heller */
  --accent-2: #2F6BB7; /* dunkler */
}

/* Events – Pink */
.theme-events {
  --accent:   #E24AB2;
  --accent-1: #EC72C5;
  --accent-2: #B7368A;
}

/* Challenges – Lila */
.theme-challenges {
  --accent:   #A34CCF;
  --accent-1: #B96BEB;
  --accent-2: #7F2FA8;
}

/* Profil – Gelb */
.theme-profile {
  --accent:   #F3C553;
  --accent-1: #F7D67E;
  --accent-2: #C49A3F;
}

/* Sub-Kacheln, die die Varianten aufgreifen */
.tile-sub1 {
  background: var(--accent-1);
  color: #111;               /* hellerer Ton → dunkler Text */
}
.tile-sub2 {
  background: var(--accent-2);
  color: #fff;               /* dunklerer Ton → heller Text */
}

/* Einheitliche Hover-Effekte für Kacheln mit Theme-Farben */
.tile-accent:hover,
.tile-sub1:hover,
.tile-sub2:hover {
  opacity: 0.92;
  transform: scale(1.03);
}