/* Buttons & UI Components */
.btn{display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:10px; border:1px solid var(--border); background:var(--bg); color:var(--text); cursor:pointer;}
.btn.iconbtn{width:36px; height:36px; padding:0; justify-content:center}
.btn:hover{border-color:var(--brand)}
.btn.primary{background:var(--brand); color:#fff; border-color:transparent}
.btn.primary:hover{filter:brightness(1.1)}
.btn.good{border-color:transparent; background:var(--btn-good-bg); color:var(--btn-good-fg)}
.btn.bad{border-color:transparent; background:var(--btn-bad-bg); color:var(--btn-bad-fg)}
.btn.warn{border-color:transparent; background:var(--btn-warn-bg); color:var(--btn-warn-fg)}
.btn.toggle{min-width:42px; justify-content:center}
.btn.toggle[aria-pressed="true"]{background:var(--brand); color:#fff; border-color:transparent}

#btnAccountTop{border-color:var(--accent)}
#btnAccountTop:hover{border-color:var(--brand)}

.iconbtn{position:relative; display:inline-flex; align-items:center; justify-content:center}
.iconbtn{width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center; border-radius:10px}

/* Panel & Cards */
.panel{
  background:var(--panel);
  border:none;
  border-radius:12px;
  box-shadow:0 2px 8px rgba(0,0,0,0.15);
  transition:transform .2s ease, box-shadow .2s ease;
  padding:var(--card-padding);
  margin-bottom:24px;
}
.panel:hover{transform:translateY(-1px); box-shadow:0 4px 12px rgba(0,0,0,0.2)}

/* Pills & Badges */
.pill{display:inline-block; padding:4px 8px; border-radius:999px; border:1px solid var(--border); background:var(--bg); font-size:12px}
.pill.q-cat{max-width:100%; font-size:11px; padding:3px 8px; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

.badge-grid{display:grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap:10px}
.badge-card{border:1px solid var(--border); border-radius:12px; padding:var(--card-padding); background:var(--bg); display:flex; gap:10px; align-items:flex-start}
.badge-card .badge-icon{font-size:20px; line-height:1}
.badge-card .badge-name{font-weight:600}
.badge-card .badge-meta{font-size:12px; color:var(--muted)}
.badge-card.locked{opacity:.45; filter:grayscale(1)}

.badge-count{display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; margin-left:6px; padding:0 6px; font-size:11px; border-radius:999px; background:#ef4444; color:white; line-height:1}
.badge-dot{position:absolute; top:4px; right:2px; min-width:12px; height:12px; padding:0 3px; font-size:9px; font-weight:700; line-height:12px; background:#ef4444; color:#fff; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; box-shadow:0 0 0 2px rgba(0,0,0,0.35)}

/* Lists & Tags */
.list{display:flex; flex-direction:column; gap:8px}
.list .item{padding:10px 12px; border:1px solid var(--border); border-radius:10px; background:var(--bg)}
.list .meta{font-size:12px; color:var(--muted)}

.tag{display:inline-flex; align-items:center; gap:6px; padding:2px 8px; border-radius:999px; border:1px solid var(--border); background:var(--bg); font-size:11px}
.chip{display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; border:1px solid var(--border); background:var(--bg); font-size:12px}

/* Progress & Bars */
.kbd, kbd{display:inline-block; padding:2px 6px; border:1px solid var(--border); border-radius:6px; background:var(--bg); font-family:inherit; font-size:inherit}
.bar{height:10px; background:var(--bg); border-radius:999px; overflow:hidden; border:1px solid var(--border)}
.bar > span{display:block; height:100%; background:linear-gradient(90deg, #22d3ee, #7c3aed)}

/* Lock & Overlay */
.lock{display:inline-flex;align-items:center;gap:6px;padding:2px 8px;border-radius:999px;border:1px solid #2a3a56;background:color-mix(in srgb, var(--panel) 80%, var(--bg) 20%)}
.lock.ok{border-color:#1f5a32}
.hint{font-size:12px;color:#9fb0c8}

.disabledOverlay{position:relative}
.disabledOverlay.locked{pointer-events:none}
.disabledOverlay.locked::after{content:"🔒 Editor gesperrt – bitte einloggen";position:absolute;inset:0;background:rgba(9,12,18,.65);display:flex;align-items:center;justify-content:center;color:#c9d6e8;font-weight:700;border-radius:14px;pointer-events:auto}

/* Leaderboard */
.leaderboard{margin:8px 0 0; padding-left:18px}
.leaderboard li{padding:6px 8px; border-bottom:1px dashed var(--border)}

/* Icon System */
.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  stroke-width: 2;
  stroke: currentColor;
  fill: none;
  vertical-align: -0.125em;
}
.icon--sm { width: 16px; height: 16px; }
.icon--md { width: 20px; height: 20px; }
.icon--lg { width: 24px; height: 24px; }
.icon--xl { width: 32px; height: 32px; }
.icon--brand { stroke: var(--brand); }
.icon--ok { stroke: var(--ok); }
.icon--bad { stroke: var(--bad); }
.icon--muted { stroke: var(--muted); }