/* ═══════════════════════════════════════════════════════════════
   Modern Glass — Design-Ebene für alle Panel-Seiten
   Wird NACH style.css und themes.css geladen und legt sich darüber.

   • 8 abgestimmte Themes (Farb-Tokens als "R G B" + 3 Aurora-Farben)
   • Halbtransparente Glas-Flächen mit Unschärfe (Karten, Seitenleiste, Pop-ups)
   • Sanfte Aurora im Hintergrund (respektiert "Bewegung reduzieren")
   • Einklappbare Seitenleisten-Gruppen, Handy-Ansicht
   ═══════════════════════════════════════════════════════════════ */

/* ── Themes ─────────────────────────────────────────────────────── */
:root,
[data-theme="snojan"] {
  --c-sunken: 8 9 20; --c-surface: 15 17 34; --c-raised: 24 27 50;
  --c-border: 48 53 90; --c-border-strong: 70 77 124; --c-hover: 36 40 72;
  --c-brand: 99 102 241; --c-brand-hover: 79 82 221; --c-accent: 165 170 255;
  --aur-1: 99 102 241; --aur-2: 168 85 247; --aur-3: 56 189 248;
  --glow-accent: rgba(99, 102, 241, 0.45); --glow-secondary: rgba(168, 85, 247, 0.3);
}
[data-theme="citysurvival"] {
  --c-sunken: 17 10 6; --c-surface: 28 17 11; --c-raised: 42 26 16;
  --c-border: 82 50 30; --c-border-strong: 116 72 42; --c-hover: 58 36 22;
  --c-brand: 234 108 32; --c-brand-hover: 206 90 22; --c-accent: 253 164 95;
  --aur-1: 234 108 32; --aur-2: 225 29 72; --aur-3: 250 204 21;
  --glow-accent: rgba(234, 108, 32, 0.5); --glow-secondary: rgba(225, 29, 72, 0.3);
}
[data-theme="ocean"] {
  --c-sunken: 3 13 20; --c-surface: 7 23 33; --c-raised: 11 34 48;
  --c-border: 22 66 86; --c-border-strong: 32 94 120; --c-hover: 16 48 64;
  --c-brand: 14 165 183; --c-brand-hover: 8 145 162; --c-accent: 94 234 212;
  --aur-1: 14 165 183; --aur-2: 59 130 246; --aur-3: 16 185 129;
  --glow-accent: rgba(14, 165, 183, 0.5); --glow-secondary: rgba(59, 130, 246, 0.3);
  --on-brand: #022c33;
}
[data-theme="sakura"] {
  --c-sunken: 19 9 19; --c-surface: 30 15 31; --c-raised: 44 22 45;
  --c-border: 84 44 84; --c-border-strong: 116 62 116; --c-hover: 60 30 62;
  --c-brand: 236 72 153; --c-brand-hover: 219 39 119; --c-accent: 249 168 212;
  --aur-1: 236 72 153; --aur-2: 167 139 250; --aur-3: 251 113 133;
  --glow-accent: rgba(236, 72, 153, 0.5); --glow-secondary: rgba(167, 139, 250, 0.3);
}
[data-theme="neonvice"] {
  --c-sunken: 9 5 22; --c-surface: 17 10 38; --c-raised: 26 15 56;
  --c-border: 60 34 110; --c-border-strong: 88 52 150; --c-hover: 38 22 76;
  --c-brand: 255 47 176; --c-brand-hover: 230 30 155; --c-accent: 34 211 238;
  --aur-1: 255 47 176; --aur-2: 34 211 238; --aur-3: 139 92 246;
  --glow-accent: rgba(255, 47, 176, 0.55); --glow-secondary: rgba(34, 211, 238, 0.35);
}
[data-theme="forest"] {
  --c-sunken: 5 13 9; --c-surface: 10 23 16; --c-raised: 15 34 23;
  --c-border: 32 68 46; --c-border-strong: 46 96 66; --c-hover: 21 47 32;
  --c-brand: 34 197 94; --c-brand-hover: 22 163 74; --c-accent: 134 239 172;
  --aur-1: 34 197 94; --aur-2: 20 184 166; --aur-3: 163 230 53;
  --glow-accent: rgba(34, 197, 94, 0.45); --glow-secondary: rgba(20, 184, 166, 0.3);
  --on-brand: #052e16;
}
[data-theme="gold"] {
  --c-sunken: 13 10 5; --c-surface: 23 18 9; --c-raised: 34 27 13;
  --c-border: 72 57 26; --c-border-strong: 104 82 38; --c-hover: 46 37 17;
  --c-brand: 217 170 50; --c-brand-hover: 190 146 36; --c-accent: 245 211 120;
  --aur-1: 217 170 50; --aur-2: 234 88 12; --aur-3: 250 204 21;
  --glow-accent: rgba(217, 170, 50, 0.45); --glow-secondary: rgba(234, 88, 12, 0.3);
  --on-brand: #1c1403;
}
[data-theme="light"] {
  --c-sunken: 238 241 250; --c-surface: 255 255 255; --c-raised: 255 255 255;
  --c-border: 222 226 238; --c-border-strong: 199 205 222; --c-hover: 236 239 248;
  --c-brand: 99 102 241; --c-brand-hover: 79 82 221; --c-accent: 79 70 229;
  --aur-1: 129 140 248; --aur-2: 244 114 182; --aur-3: 56 189 248;
  --glow-accent: rgba(99, 102, 241, 0.25); --glow-secondary: rgba(244, 114, 182, 0.18);
  --t-text: #161a2b; --t-text-dim: #4a5068; --t-text-muted: #7b8199;
}

/* ── Glas-Grundwerte ───────────────────────────────────────────── */
:root {
  --glass: rgb(var(--c-raised) / 0.58);
  --glass-strong: rgb(var(--c-surface) / 0.82);
  --glass-border: rgb(255 255 255 / 0.07);
  --glass-border-strong: rgb(255 255 255 / 0.13);
  --glass-highlight: inset 0 1px 0 rgb(255 255 255 / 0.05);
  --glass-shadow: 0 10px 40px rgb(0 0 0 / 0.35);
  --blur: blur(18px) saturate(150%);
  --radius: 16px;
  --radius-sm: 11px;
  --text-muted: var(--t-text-muted, #8088a6);
  --text-dim: var(--t-text-dim, #b0b6cb);
}
:root[data-theme="light"] {
  --glass: rgb(255 255 255 / 0.7);
  --glass-strong: rgb(255 255 255 / 0.9);
  --glass-border: rgb(15 23 42 / 0.08);
  --glass-border-strong: rgb(15 23 42 / 0.14);
  --glass-highlight: inset 0 1px 0 rgb(255 255 255 / 0.8);
  --glass-shadow: 0 10px 34px rgb(30 41 90 / 0.1);
  --text: #161a2b; --text-dim: #4a5068; --text-muted: #7b8199;
}

/* ── Hintergrund: sanfte Aurora ────────────────────────────────── */
body {
  background:
    radial-gradient(900px 650px at 0% 0%, rgb(var(--aur-1) / 0.22), transparent 60%),
    radial-gradient(850px 650px at 100% 100%, rgb(var(--aur-2) / 0.2), transparent 60%),
    radial-gradient(700px 500px at 60% 40%, rgb(var(--aur-3) / 0.06), transparent 70%),
    rgb(var(--c-sunken));
  background-attachment: fixed;
}
#particles-canvas { display: none !important; }
.mesh-bg span { filter: blur(120px); opacity: 1 !important; will-change: transform; }
.mesh-bg span:nth-child(1) { display: block; width: 58vw; height: 58vw; top: -22vw; left: -14vw; background: radial-gradient(circle, rgb(var(--aur-1) / 0.42), transparent 65%); animation: aurora1 38s ease-in-out infinite; }
.mesh-bg span:nth-child(2) { display: block; width: 52vw; height: 52vw; bottom: -24vw; right: -12vw; background: radial-gradient(circle, rgb(var(--aur-2) / 0.34), transparent 65%); animation: aurora2 46s ease-in-out infinite; }
.mesh-bg span:nth-child(3) { display: block; width: 36vw; height: 36vw; top: 32%; left: 38%; background: radial-gradient(circle, rgb(var(--aur-3) / 0.2), transparent 65%); animation: aurora3 54s ease-in-out infinite; }
.mesh-bg span:nth-child(4) { display: none !important; }
[data-theme="light"] .mesh-bg span:nth-child(1) { background: radial-gradient(circle, rgb(var(--aur-1) / 0.22), transparent 65%); }
[data-theme="light"] .mesh-bg span:nth-child(2) { background: radial-gradient(circle, rgb(var(--aur-2) / 0.16), transparent 65%); }
[data-theme="light"] .mesh-bg span:nth-child(3) { background: radial-gradient(circle, rgb(var(--aur-3) / 0.12), transparent 65%); }
@keyframes aurora1 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(8vw, 6vh) scale(1.12); } }
@keyframes aurora2 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-7vw, -8vh) scale(1.1); } }
@keyframes aurora3 { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(-10vw, 6vh) scale(1.15); } 66% { transform: translate(6vw, -5vh) scale(0.95); } }
@media (prefers-reduced-motion: reduce) {
  .mesh-bg span { animation: none !important; }
  .tab-pane.active, .card { animation: none !important; }
}

/* ── Glas-Flächen ──────────────────────────────────────────────── */
.card, .stat-card, .guild-card, .modal-box, .lg-card, .lg-feature, .lg-stats > div {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-highlight), var(--glass-shadow);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
}
.card:hover { border-color: var(--glass-border-strong); }
/* Innere Flächen in Karten & Pop-ups: leicht getönt statt massiv */
.card, .modal-box, .sidebar {
  --bg-1: rgb(var(--c-sunken) / 0.55);
  --bg-2: rgb(var(--c-hover) / 0.32);
  --bg-3: rgb(var(--c-hover) / 0.6);
  --border: var(--glass-border);
  --border-bright: var(--glass-border-strong);
}
[data-theme="light"] .card, [data-theme="light"] .modal-box, [data-theme="light"] .sidebar {
  --bg-1: rgb(255 255 255 / 0.85);
  --bg-2: rgb(var(--c-sunken) / 0.6);
  --bg-3: rgb(var(--c-hover));
}
/* Aufklappbare Listen & Menüs brauchen eine feste Fläche (sonst schlecht lesbar) */
.ar-dropdown, .theme-popover, select option, .rc-seg, .cm-seg {
  background-color: rgb(var(--c-surface));
}
.ar-dropdown { backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); box-shadow: 0 16px 40px rgb(0 0 0 / 0.45); }

.card { border-radius: var(--radius); margin-bottom: 18px; }
.card-header {
  background: linear-gradient(90deg, rgb(var(--c-brand) / 0.14), rgb(var(--aur-2) / 0.04) 55%, transparent 80%);
  border-bottom: 1px solid var(--glass-border);
  padding: 16px 22px;
}
.card-header h3 { font-size: 0.95rem; font-weight: 800; letter-spacing: -0.01em; }
.card-body { padding: 22px; }
.wk-hint { line-height: 1.6; }

/* Kacheln */
.stat-card { border-radius: var(--radius); position: relative; overflow: hidden; }
/* farbiger Lichtstreifen oben an jeder Kachel */
.stat-card::before { content: ""; position: absolute; top: 0; left: 12%; right: 12%; height: 2px; border-radius: 0 0 4px 4px; background: linear-gradient(90deg, transparent, rgb(var(--aur-1)), rgb(var(--aur-2)), transparent); opacity: 0.8; }
.stat-card:hover { transform: translateY(-3px); border-color: rgb(var(--c-brand) / 0.45); box-shadow: var(--glass-highlight), 0 12px 30px rgb(var(--c-brand) / 0.18); }
.stat-icon { background: linear-gradient(135deg, rgb(var(--c-brand) / 0.25), rgb(var(--c-accent) / 0.12)); border: 1px solid rgb(var(--c-brand) / 0.3); color: var(--accent-2); }
.stat-value {
  background-image: linear-gradient(135deg, var(--text) 30%, rgb(var(--c-accent)));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
[data-theme="light"] .stat-value { background-image: linear-gradient(135deg, var(--text) 30%, rgb(var(--c-brand))); }

/* Buttons */
.btn { border-radius: var(--radius-sm); }
.btn-primary {
  background: linear-gradient(135deg, rgb(var(--c-brand)), rgb(var(--c-brand-hover)));
  color: var(--on-brand-color);
  box-shadow: 0 4px 18px rgb(var(--c-brand) / 0.35), inset 0 1px 0 rgb(255 255 255 / 0.18);
}
.btn-primary:hover { background: linear-gradient(135deg, rgb(var(--c-accent)), rgb(var(--c-brand))); box-shadow: 0 6px 24px rgb(var(--c-brand) / 0.5), inset 0 1px 0 rgb(255 255 255 / 0.2); transform: translateY(-1px); }
.btn-ghost { background: rgb(var(--c-hover) / 0.35); border: 1px solid var(--glass-border-strong); color: var(--text-dim); }
.btn-ghost:hover { background: rgb(var(--c-brand) / 0.14); border-color: rgb(var(--c-brand) / 0.45); color: var(--text); }

/* Eingabefelder */
.form-input, .form-select {
  background: var(--bg-1);
  border: 1px solid var(--glass-border-strong);
  border-radius: var(--radius-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.form-input:hover, .form-select:hover { border-color: rgb(var(--c-brand) / 0.35); }
.form-input:focus, .form-select:focus { border-color: rgb(var(--c-brand)); box-shadow: 0 0 0 3px rgb(var(--c-brand) / 0.2); background: rgb(var(--c-sunken) / 0.75); }
[data-theme="light"] .form-input:focus, [data-theme="light"] .form-select:focus { background: #fff; }
.form-group label { color: var(--text-dim); }

/* Pop-ups */
.modal-overlay { background: rgb(0 0 0 / 0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.modal-box { background: var(--glass-strong); border-radius: 20px; box-shadow: 0 30px 80px rgb(0 0 0 / 0.55), var(--glass-highlight); }
.modal-header { border-bottom: 1px solid var(--glass-border); }

/* Hinweis-Meldungen */
.toast { background: var(--glass-strong); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border: 1px solid var(--glass-border-strong); box-shadow: 0 12px 40px rgb(0 0 0 / 0.4); border-radius: 14px; }

/* Reiter-Wechsel: sanft einblenden */
.tab-pane.active { animation: pane-in 0.35s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes pane-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ── Kopfzeile ─────────────────────────────────────────────────── */
.topbar {
  background: rgb(var(--c-sunken) / 0.45);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border-bottom: 1px solid var(--glass-border);
  padding: 16px 32px;
}
[data-theme="light"] .topbar { background: rgb(255 255 255 / 0.6); }
.topbar h2 { font-size: 1.2rem; }
.topbar-crumb { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--text-muted); margin-top: 3px; }
.topbar-crumb b { color: var(--accent-2); font-weight: 700; }

/* ── Seitenleiste ──────────────────────────────────────────────── */
.sidebar {
  background: rgb(var(--c-surface) / 0.55);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border-right: 1px solid var(--glass-border);
  width: 262px;
  padding: 18px 14px;
}
[data-theme="light"] .sidebar { background: rgb(255 255 255 / 0.65) !important; }
.main-content { margin-left: 262px; }
.sidebar-brand { border-bottom: 1px solid var(--glass-border); }
.sidebar-bot-avatar { border-radius: 14px; box-shadow: 0 0 0 2px rgb(var(--c-brand) / 0.5), 0 6px 20px var(--glow-accent); }
.sidebar-back { border-radius: var(--radius-sm); }
.side-search {
  position: relative; margin: 2px 0 10px;
}
.side-search input {
  width: 100%; padding: 8px 10px 8px 32px; border-radius: var(--radius-sm);
  background: rgb(var(--c-sunken) / 0.5); border: 1px solid var(--glass-border);
  color: var(--text); font: inherit; font-size: 0.8rem; outline: none;
}
.side-search input:focus { border-color: rgb(var(--c-brand) / 0.6); box-shadow: 0 0 0 3px rgb(var(--c-brand) / 0.15); }
.side-search svg, .side-search .side-search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 0.8rem; opacity: 0.6; pointer-events: none; }
[data-theme="light"] .side-search input { background: rgb(255 255 255 / 0.8); }
.side-link { border-radius: var(--radius-sm); padding: 9px 12px; font-size: 0.84rem; color: var(--text-dim); }
.side-link .side-icon { color: var(--text-muted); transition: color 0.15s ease; }
.side-link:hover { background: rgb(var(--c-hover) / 0.55); transform: none; }
.side-link:hover .side-icon { color: var(--accent-2); }
.side-link.active {
  background: linear-gradient(90deg, rgb(var(--c-brand) / 0.28), rgb(var(--c-brand) / 0.06));
  color: var(--text);
  box-shadow: inset 0 0 0 1px rgb(var(--c-brand) / 0.28), 0 4px 16px rgb(var(--c-brand) / 0.18);
}
.side-link.active .side-icon { color: var(--accent-2); }
/* Einklappbare Gruppen */
.side-group { margin-top: 6px; }
.side-group-head {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 8px 12px 4px; background: none; border: 0; cursor: pointer; font: inherit;
  font-size: 0.66rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted);
}
.side-group-head:hover { color: var(--text); }
.side-group-caret { transition: transform 0.2s ease; font-size: 0.7rem; }
.side-group.collapsed .side-group-caret { transform: rotate(-90deg); }
.side-group-body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 0.25s ease; }
.side-group-body > div { overflow: hidden; display: flex; flex-direction: column; gap: 2px; }
.side-group.collapsed .side-group-body { grid-template-rows: 0fr; }
.side-group-count { font-size: 0.62rem; font-weight: 700; padding: 1px 6px; border-radius: 8px; background: rgb(var(--c-hover) / 0.6); margin-left: auto; margin-right: 6px; letter-spacing: 0; }
.side-group:not(.collapsed) .side-group-count { display: none; }
.sidebar-nav.searching .side-group-head { display: none; }
.sidebar-nav.searching .side-group { margin-top: 0; }
.side-empty { font-size: 0.78rem; color: var(--text-muted); padding: 8px 12px; }
.sidebar .nav-user-info { background: rgb(var(--c-sunken) / 0.45); border: 1px solid var(--glass-border); }

/* ── Server-Auswahl ────────────────────────────────────────────── */
.guild-card { border-radius: var(--radius); }
.guild-card:hover { transform: translateY(-4px); border-color: rgb(var(--c-brand) / 0.5); box-shadow: 0 16px 40px rgb(var(--c-brand) / 0.22), var(--glass-highlight); }

/* ── Login ─────────────────────────────────────────────────────── */
.login-body { background:
    radial-gradient(900px 600px at 10% 0%, rgb(var(--aur-1) / 0.22), transparent 60%),
    radial-gradient(800px 600px at 90% 100%, rgb(var(--aur-2) / 0.18), transparent 60%),
    rgb(var(--c-sunken)); }
.lg-card { border-radius: 22px; }
.lg-feature { border-radius: 14px; }
.lg-feature:hover { border-color: rgb(var(--c-brand) / 0.4); transform: translateY(-2px); }

/* ── Handy & Tablet ────────────────────────────────────────────── */
.sidebar-backdrop { display: none; }
@media (max-width: 900px) {
  .main-content { margin-left: 0; }
  .sidebar { left: -290px; width: 272px; box-shadow: 0 0 60px rgb(0 0 0 / 0.5); background: rgb(var(--c-surface) / 0.92); }
  .sidebar.open { left: 0; }
  .sidebar-backdrop { display: block; position: fixed; inset: 0; z-index: 55; background: rgb(0 0 0 / 0.5); backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity 0.2s ease; }
  .sidebar.open ~ .sidebar-backdrop, .sidebar-backdrop.show { opacity: 1; pointer-events: auto; }
  .topbar { padding: 12px 16px; }
  .mobile-nav-toggle { display: inline-flex !important; align-items: center; justify-content: center; background: var(--glass) !important; }
  .container { padding: 16px; }
}
@media (max-width: 600px) {
  .card-body { padding: 16px; }
  .card-header { padding: 14px 16px; flex-wrap: wrap; gap: 8px; }
  .stats-grid, .stats-grid.stats-row2 { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .stat-card { padding: 14px 10px; }
  .modal-overlay { padding: 8px; align-items: flex-end; }
  .modal-box { max-height: 92vh; border-radius: 20px 20px 14px 14px; width: 100% !important; }
  .lv-grid3, .cm-grid, .rc-colors, .cm-legend, .db-perms { grid-template-columns: 1fr !important; }
  .topbar h2 { font-size: 1rem; }
  .btn { min-height: 38px; }
  .save-bar { bottom: 10px; }
  .toast { left: 12px; right: 12px; bottom: 12px; }
}

/* ── Leistung: Unschärfe sparsam einsetzen ──────────────────────────
   Karten nur leicht weichzeichnen; auf Handys bei Karten ganz ohne
   (Seitenleiste, Kopfzeile & Pop-ups behalten den vollen Glas-Effekt). */
.card, .stat-card, .guild-card, .lg-feature, .lg-stats > div { backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%); }
@media (max-width: 900px), (prefers-reduced-transparency: reduce) {
  .card, .stat-card, .guild-card, .lg-feature, .lg-stats > div { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgb(var(--c-raised) / 0.88); }
  [data-theme="light"] .card, [data-theme="light"] .stat-card, [data-theme="light"] .guild-card { background: rgb(255 255 255 / 0.92); }
  .mesh-bg span { filter: blur(80px); }
}

/* ── Patchnotes: Abos & Spielsuche ─────────────────────────────── */
.pn-subs { display: flex; flex-direction: column; gap: 10px; }
.pn-sub { display: flex; gap: 12px; align-items: center; padding: 10px; border: 1px solid var(--glass-border); border-radius: var(--radius-sm); background: var(--bg-2); }
.pn-sub.off { opacity: 0.6; }
.pn-sub-img { width: 120px; aspect-ratio: 460 / 215; border-radius: 8px; background: rgb(var(--c-hover)) center / cover no-repeat; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; }
.pn-sub-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.pn-sub-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pn-sub-head strong { font-size: 0.92rem; }
.pn-sub-head small { font-size: 0.72rem; color: var(--text-muted); margin-left: auto; }
.pn-src { font-size: 0.66rem; font-weight: 700; padding: 2px 7px; border-radius: 8px; background: rgb(var(--c-brand) / 0.15); color: var(--accent-2); white-space: nowrap; }
.pn-src.warn { background: rgb(237 66 69 / 0.15); color: #f87171; }
.pn-sub-controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pn-sub-controls .form-select { flex: 1; min-width: 150px; padding-top: 6px; padding-bottom: 6px; }
.pn-sub-controls .wk-check { margin: 0; }
.pn-sub-actions { display: flex; flex-direction: column; gap: 6px; }
.pn-add-box { max-width: 760px; width: 96vw; }
.pn-add-top { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.pn-results { display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow-y: auto; }
.pn-result { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 1px solid var(--glass-border); border-radius: var(--radius-sm); background: var(--bg-2); }
.pn-result img, .pn-result-noimg { width: 92px; height: 35px; object-fit: cover; border-radius: 6px; flex-shrink: 0; background: rgb(var(--c-hover)); display: flex; align-items: center; justify-content: center; }
.pn-result-name { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pn-result-name strong { font-size: 0.86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pn-result-name small { font-size: 0.72rem; color: var(--text-muted); }
@media (max-width: 600px) { .pn-sub { flex-wrap: wrap; } .pn-sub-img { width: 100%; } .pn-sub-actions { flex-direction: row; } }

/* ── Ankündigungen ─────────────────────────────────────────── */
.an-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.an-layout > .col { min-width: 0; }
.an-side { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 20px; }
.an-side .card { margin: 0; }
.an-row { display: flex; gap: 8px; align-items: center; }
.an-row .form-select { flex: 1; }
.an-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.an-seg { margin-bottom: 0; }
.an-seg button { padding: 8px; }
.an-muted { color: var(--text-muted); font-weight: 400; }
.an-inline-check { align-self: end; margin-bottom: 18px; }
.an-swatches { display: flex; gap: 5px; flex-wrap: wrap; }
.an-swatches button { width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgb(255 255 255 / 0.2); cursor: pointer; padding: 0; }
.an-swatches button:hover { transform: scale(1.15); }
.an-embed-opts { padding: 12px 12px 0; margin-bottom: 14px; border: 1px dashed var(--glass-border-strong); border-radius: var(--radius-sm); }
.an-toolbar { display: flex; flex-wrap: wrap; gap: 3px; padding: 5px; border: 1px solid var(--glass-border); border-bottom: 0; border-radius: var(--radius-sm) var(--radius-sm) 0 0; background: rgb(var(--c-sunken)); }
.an-toolbar button { min-width: 30px; height: 30px; padding: 0 7px; border: 0; border-radius: 6px; background: none; color: var(--text); font: inherit; font-size: 0.84rem; cursor: pointer; }
.an-toolbar button:hover { background: rgb(var(--c-hover)); }
.an-tb-sep { width: 1px; margin: 5px 3px; background: var(--glass-border-strong); }
.an-textarea { border-top-left-radius: 0; border-top-right-radius: 0; font-family: ui-monospace, 'Cascadia Code', Consolas, monospace; font-size: 0.82rem; line-height: 1.55; resize: vertical; min-height: 260px; }
.view-only .an-textarea { border-radius: var(--radius-sm); }
#tab-announcements .form-group { position: relative; }
.an-pop { position: absolute; top: 72px; left: 0; z-index: 30; width: 290px; max-height: 320px; overflow-y: auto; padding: 10px; border-radius: 12px; background: var(--glass-strong); border: 1px solid var(--glass-border-strong); box-shadow: 0 16px 40px rgb(0 0 0 / 0.45); backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur)); display: flex; flex-direction: column; gap: 6px; }
.an-pop[hidden] { display: none; }
.an-pop-h { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-top: 4px; }
.an-emojis { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; }
.an-emojis button { font-size: 1.15rem; padding: 3px 0; border: 0; border-radius: 6px; background: none; cursor: pointer; }
.an-emojis button:hover { background: rgb(var(--c-hover)); }
.an-under { display: flex; justify-content: space-between; gap: 10px; margin-top: 6px; }
.an-hint { color: var(--text-muted); font-size: 0.72rem; }
.an-count { font-size: 0.74rem; font-weight: 700; color: var(--text-muted); white-space: nowrap; }
.an-count.near { color: #fbbf24; }
.an-count.over { color: #f87171; }
.an-actions { display: flex; gap: 8px; margin-top: 14px; }
.an-draft-note { display: block; margin-top: 8px; font-size: 0.7rem; text-align: center; }
.an-editing { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; padding: 10px 12px; border-radius: var(--radius-sm); background: rgb(250 166 26 / 0.12); border: 1px solid rgb(250 166 26 / 0.35); font-size: 0.82rem; }
.an-editing[hidden] { display: none; }
.an-send-opts { margin-top: 4px; }
/* Discord-Vorschau */
.an-discord { background: #313338; border-radius: var(--radius-sm); padding: 16px 14px; max-height: 70vh; overflow-y: auto; }
.an-md { color: #dbdee1; font-size: 0.9rem; line-height: 1.375; overflow-wrap: anywhere; }
.an-md .an-line { min-height: 1.375em; }
.an-md .an-empty { min-height: 1.375em; }
.an-md .an-h1 { font-size: 1.5em; font-weight: 700; color: #f2f3f5; margin: 8px 0 4px; line-height: 1.25; }
.an-md .an-h2 { font-size: 1.25em; font-weight: 700; color: #f2f3f5; margin: 8px 0 4px; line-height: 1.25; }
.an-md .an-h3 { font-size: 1em; font-weight: 700; color: #f2f3f5; margin: 8px 0 4px; }
.an-md .an-line:first-child { margin-top: 0; }
.an-md .an-sub { font-size: 0.8em; color: #949ba4; }
.an-md .an-quote { border-left: 4px solid #4e5058; padding-left: 12px; }
.an-md .an-li { position: relative; padding-left: 20px; }
.an-md .an-li::before { content: '•'; position: absolute; left: 6px; }
.an-md .an-li2 { padding-left: 38px; }
.an-md .an-li2::before { content: '◦'; left: 24px; }
.an-md .an-num { display: inline-block; min-width: 20px; color: #b5bac1; }
.an-md strong { color: #f2f3f5; }
.an-md a { color: #00a8fc; }
.an-md .an-time { background: rgb(255 255 255 / 0.08); border-radius: 3px; padding: 0 3px; }
.an-md .an-cemoji { width: 1.375em; height: 1.375em; vertical-align: bottom; object-fit: contain; }
.an-spoiler { background: #1e1f22; color: transparent; border-radius: 3px; cursor: pointer; }
.an-spoiler.open { background: rgb(255 255 255 / 0.1); color: inherit; }
.an-codeblock { background: #2b2d31; border: 1px solid #1e1f22; border-radius: 4px; padding: 8px; margin: 4px 0; font-size: 0.82em; color: #dbdee1; white-space: pre-wrap; }
.an-embed { max-width: 520px; margin-top: 4px; }
.an-embed .an-md { font-size: 0.84rem; }
.an-empty-prev { color: #949ba4; font-size: 0.84rem; font-style: italic; }
.an-reacts { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
.an-reacts span { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 8px; background: rgb(88 101 242 / 0.15); border: 1px solid #5865f2; font-size: 0.85rem; }
.an-reacts b { font-size: 0.75rem; color: #dee0fc; }
/* Verlauf */
.an-history { display: flex; flex-direction: column; gap: 8px; max-height: 420px; overflow-y: auto; }
.an-h-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--glass-border); border-radius: var(--radius-sm); background: var(--bg-2); }
.an-h-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.an-h-main strong { font-size: 0.84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-h-main small { font-size: 0.7rem; color: var(--text-muted); }
.an-h-actions { display: flex; gap: 4px; flex-shrink: 0; }
.an-h-actions .btn { padding: 4px 8px; }
/* Baukasten */
.an-builder-box { max-width: 720px; width: 96vw; max-height: 90vh; overflow-y: auto; }
.an-b-grid { display: grid; grid-template-columns: 80px 1fr; gap: 10px; }
.an-b-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.an-b-row { display: grid; grid-template-columns: 56px 1fr 1.6fr auto; gap: 6px; align-items: center; }
.an-b-e { text-align: center; }
@media (max-width: 1100px) { .an-layout { grid-template-columns: minmax(0, 1fr); } .an-side { position: static; } }
@media (max-width: 600px) {
  .an-grid2 { grid-template-columns: 1fr; }
  .an-inline-check { margin-bottom: 14px; }
  .an-b-row { grid-template-columns: 48px 1fr auto; }
  .an-b-row input:nth-child(3) { grid-column: 1 / 3; }
  .an-pop { left: 0 !important; width: 100%; }
  .an-under { flex-direction: column; gap: 2px; }
}

/* Minigames: zusätzliche Optionen */
.gm-opts { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 14px; }
.gm-opts .wk-check { margin: 0; align-items: flex-start; line-height: 1.4; }
.gm-inline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.8rem; }
.gm-inline .wk-check { margin: 0; }
.gm-inline [hidden] { display: none; }
.gm-mini { display: inline-block; width: auto; min-width: 64px; padding: 4px 8px; }
.gm-count-set { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.gm-count-set .form-input { width: 110px; padding-top: 6px; padding-bottom: 6px; }

/* ── Leistung: schnelle Ansicht (Standard) ─────────────────────────
   Glas-Unschärfe (backdrop-filter) über einem bewegten Hintergrund muss der Browser
   bei jedem Bild neu berechnen — das bremst schwächere PCs stark aus. Standardmäßig
   daher: ruhiger Hintergrund, keine Unschärfe, dafür fast deckende Flächen.
   Den vollen Effekt gibt es per Schalter in der Theme-Auswahl (html[data-fx="on"]). */
html:not([data-fx="on"]) .mesh-bg span { filter: none; animation: none !important; will-change: auto; }
html:not([data-fx="on"]) *:not(.modal-overlay):not(.sidebar-backdrop) { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
html:not([data-fx="on"]) .card, html:not([data-fx="on"]) .stat-card, html:not([data-fx="on"]) .guild-card,
html:not([data-fx="on"]) .lg-feature, html:not([data-fx="on"]) .lg-stats > div, html:not([data-fx="on"]) .lg-card { background: rgb(var(--c-raised) / 0.92); }
html:not([data-fx="on"]) .modal-box, html:not([data-fx="on"]) .toast, html:not([data-fx="on"]) .ar-dropdown,
html:not([data-fx="on"]) .theme-popover, html:not([data-fx="on"]) .an-pop { background: rgb(var(--c-raised) / 0.98); }
html:not([data-fx="on"]) .sidebar { background: rgb(var(--c-surface) / 0.96); }
html:not([data-fx="on"]) .topbar { background: rgb(var(--c-sunken) / 0.94); }
html:not([data-fx="on"])[data-theme="light"] .card, html:not([data-fx="on"])[data-theme="light"] .stat-card,
html:not([data-fx="on"])[data-theme="light"] .guild-card, html:not([data-fx="on"])[data-theme="light"] .lg-feature,
html:not([data-fx="on"])[data-theme="light"] .lg-card, html:not([data-fx="on"])[data-theme="light"] .modal-box,
html:not([data-fx="on"])[data-theme="light"] .toast, html:not([data-fx="on"])[data-theme="light"] .ar-dropdown,
html:not([data-fx="on"])[data-theme="light"] .theme-popover, html:not([data-fx="on"])[data-theme="light"] .an-pop { background: rgb(255 255 255 / 0.96); }
html:not([data-fx="on"])[data-theme="light"] .sidebar { background: rgb(255 255 255 / 0.97) !important; }
html:not([data-fx="on"])[data-theme="light"] .topbar { background: rgb(255 255 255 / 0.95); }
.ts-fx { display: flex; align-items: center; gap: 7px; margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--glass-border); font-size: 0.74rem; color: var(--text-muted); cursor: pointer; white-space: nowrap; }
.ts-fx input { width: 14px; height: 14px; margin: 0; }
.gm-range { display: flex; align-items: center; gap: 6px; }
.gm-range .form-input { min-width: 0; }
.gm-range span { font-size: 0.78rem; color: var(--text-muted); }