/* ============================================================================
   app.css – Interner Bereich · Happy Accident
   ----------------------------------------------------------------------------
   Ergänzt /core.css (die "Arkanes Konsolen-HUD"-Basis der Gildenseite, wird
   ZUERST geladen und liefert Tokens, Foto-/Runen-Hintergrund, Nav, .glass,
   Buttons, Chips, Footer, Reveal). Hier stehen NUR die internen Komponenten
   (Panels, Tabellen, Subnav, Hub-Kacheln, 3-Spalten-Shell, Formulare, Badges),
   auf denselben HUD-Look gehoben. core.css nicht duplizieren.
   ========================================================================== */

/* ---- Layout-Breite: intern etwas breiter als die öffentliche Seite -------- */
body { --wrap: 1180px; }
body.wide { --wrap: 1440px; }
main.wrap { padding-top: 26px; padding-bottom: 52px; display: grid; gap: 20px; align-content: start; }

/* ---- Nav-Feinschliff (Basis kommt aus core.css) --------------------------- */
.nav .brand { margin-right: 14px; }
.nav-right { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.who { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--ink-dim); display: inline-flex; align-items: center; gap: 8px; }
.who .pill { text-transform: uppercase; }
.nav-links a.back-site { color: var(--rune); }
.nav-links a.back-site:hover { color: var(--rune); background: rgba(79,227,255,.1); }

/* ---- Glas-Panels (die zentrale Fläche, wie core.css .glass) --------------- */
.panel {
  position: relative; border-radius: 16px; padding: clamp(20px, 3vw, 30px);
  background: var(--glass); backdrop-filter: blur(16px) saturate(1.1); -webkit-backdrop-filter: blur(16px) saturate(1.1);
  border: 1px solid var(--line);
  box-shadow: 0 18px 44px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.05);
}
h1 { font-family: var(--serif); font-weight: 900; font-size: clamp(24px, 4vw, 38px); line-height: 1.06;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold) 55%, var(--gold-deep));
  -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 8px; }
h2 { font-family: var(--serif); color: var(--gold-bright); font-size: 20px; margin-bottom: 14px; }
.lead { color: var(--ink-dim); max-width: 64ch; }
.dim { color: var(--ink-dim); }
.info-note {
  margin: 4px 0 2px; padding: 12px 16px; border-radius: 12px; font-size: 14px; line-height: 1.55;
  color: var(--ink-dim); border: 1px solid var(--line); background: rgba(124,92,255,.10);
}
.info-note b { color: var(--ink); }
.info-note strong { color: var(--gold-bright); font-weight: 600; }
.row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }

/* ---- Buttons: core.css liefert die .primary/.ghost/.arc-Varianten (spezifischer);
   hier nur die Default-Optik (.btn ohne Variante) + die kleine Größe. ---------- */
.btn { color: var(--ink); border: 1px solid rgba(185,140,255,.5); background: rgba(124,92,255,.12);
  padding: 11px 20px; border-radius: 11px; font-size: 14px; }
/* Hover nur Lift+Glow (keine Farb-/Border-Änderung – sonst Kollision mit .primary/.ghost). */
.btn:hover { transform: translateY(-2px); box-shadow: 0 0 22px rgba(124,92,255,.28); }
.btn.sm { padding: 7px 13px; font-size: 13px; border-radius: 9px; }
.inline { display: inline; }

/* ---- Formulare ------------------------------------------------------------ */
.form { display: grid; gap: 16px; max-width: 520px; margin-top: 6px; }
.form label { display: grid; gap: 6px; font-family: var(--serif); font-size: 14px; color: var(--ink); }
.form input, .form select, .form textarea {
  font-family: var(--sans); font-size: 15px; color: var(--ink);
  padding: 11px 14px; border-radius: 10px; background: rgba(10,6,22,.5); border: 1px solid var(--line);
}
.form input:focus, .form select:focus, .form textarea:focus {
  outline: none; border-color: var(--arcane); box-shadow: 0 0 0 3px rgba(124,92,255,.18);
}
/* Solider, dunkler Grund fürs native Dropdown-Popup, sonst heller Text auf hellem Grund. */
select { color: var(--ink); background: #17102a; color-scheme: dark; }
.form select { background: #17102a; }
select option { color: var(--ink); background: #17102a; }
.form label.chk { display: flex; flex-direction: row; align-items: center; gap: 8px; }
.form label.chk input { width: auto; }

/* ---- Interner Bereich: Admin-Seiten nutzen dieselbe 3-Spalten-.shell wie /me
   (Nav | Inhalt | Kontext, siehe weiter unten). Nur die größere Arbeitsbreite ist
   admin-spezifisch. */
body.admin { --wrap: 1440px; }

/* Sidebar-Komponente – Glass-Panel wie /me .sidenav (linke Spalte der .shell) */
.adminside { display: flex; flex-direction: column; gap: 3px; padding: 8px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--glass);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.adminside .navgroup { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--rune-dim); padding: 14px 12px 5px; }
.aside-link, .aside-sum {
  display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none;
  font-family: var(--serif); font-size: 14px; color: var(--ink-dim);
  padding: 9px 12px; border-radius: 10px; transition: color .15s, background .15s, box-shadow .15s;
}
.aside-link .ai, .aside-sum .ai { width: 18px; text-align: center; font-size: 14px; flex: none; }
.aside-link:hover, .aside-sum:hover { color: var(--gold-bright); background: rgba(185,140,255,.1); }
.aside-link.active { color: var(--gold-bright); background: rgba(79,227,255,.1); box-shadow: inset 2px 0 0 var(--rune); }
.aside-sum::-webkit-details-marker { display: none; }
.aside-sum .chev { margin-left: auto; color: var(--rune-dim); font-size: 17px; line-height: 1; transition: transform .18s ease; }
.aside-grp[open] > .aside-sum .chev { transform: rotate(90deg); }
.aside-grp > .aside-sum.active { color: var(--gold-bright); }
.aside-sub { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 4px 20px; padding-left: 12px;
  border-left: 1px solid var(--line); }
.aside-sub a { font-family: var(--serif); font-size: 13px; color: var(--ink-faint); padding: 7px 12px; border-radius: 9px;
  transition: color .15s, background .15s; }
.aside-sub a:hover { color: var(--gold-bright); background: rgba(185,140,255,.08); }
.aside-sub a.active { color: var(--rune); background: rgba(79,227,255,.08); box-shadow: inset 2px 0 0 var(--rune-dim); }
.aside-link.back { margin-top: 14px; color: var(--rune-dim); font-size: 13px; }
.aside-link.back:hover { color: var(--rune); background: rgba(79,227,255,.08); }

/* ---- Übersicht: klare Kennzahlen-Linie ------------------------------------ */
.ovstats { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 20px; }
.ovstat { flex: 1 1 160px; min-width: 148px; position: relative; overflow: hidden;
  padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--glass-2); }
.ovstat::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--rune); box-shadow: 0 0 12px var(--rune); opacity: .7; }
.ovstat-num { display: block; font-family: var(--serif); font-weight: 900; font-size: 30px; line-height: 1; color: var(--gold-bright); }
.ovstat-lbl { display: block; margin-top: 8px; font-size: 12.5px; color: var(--ink-dim); line-height: 1.4; }

/* ---- Hub-Kacheln (Dashboard-Schnellzugriff) ------------------------------- */
.hub { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; margin-top: 22px; }
.tile { --accent: var(--arcane); position: relative; display: flex; align-items: center; gap: 18px;
  padding: 22px 24px; border-radius: 16px; border: 1px solid var(--line); color: var(--ink);
  background: var(--glass); backdrop-filter: blur(14px) saturate(1.1); -webkit-backdrop-filter: blur(14px) saturate(1.1);
  box-shadow: 0 12px 30px rgba(0,0,0,.34); overflow: hidden;
  transition: transform .16s ease, border-color .16s, box-shadow .16s; }
.tile::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); box-shadow: 0 0 14px var(--accent); }
.tile:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 18px 40px rgba(0,0,0,.46); }
.tile-badge { flex: none; width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
  font-size: 25px; background: rgba(255,255,255,.04); border: 1px solid var(--accent); box-shadow: 0 4px 12px rgba(0,0,0,.35); }
.tile-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; margin-right: auto; }
.tile-title { font-family: var(--serif); font-size: 17.5px; color: var(--ink); }
.tile-desc { font-size: 13px; color: var(--ink-dim); }
.tile-num { font-family: var(--mono); font-weight: 700; font-size: 28px; line-height: 1; color: var(--accent); flex: none; }
.tile-go { font-size: 22px; color: var(--ink-dim); flex: none; }
.tile:hover .tile-go { color: var(--accent); }
.tile-warn { --accent: var(--gold); } .tile-raid { --accent: var(--arcane); }
.tile-member { --accent: #6fa0ff; } .tile-bans { --accent: var(--horde); }
.tile-users { --accent: #5fd98a; } .tile-discord { --accent: #9a9bf2; }
.tile-db { --accent: var(--rune); cursor: default; } .tile-db:hover { transform: none; }
.tile-db .tile-num { white-space: nowrap; }

/* ---- 3-Spalten-Shell: Navigation | Hauptteil | Kontext -------------------- */
.shell { display: grid; grid-template-columns: 210px minmax(0, 1fr) 270px; gap: 20px; align-items: start; }
.shell--noctx { grid-template-columns: 210px minmax(0, 1fr); }
.shell-main { display: grid; gap: 20px; align-content: start; min-width: 0; }
.shell-nav, .shell-ctx { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 12px; }
@media (max-width: 1080px) { .shell { grid-template-columns: 1fr; } .shell-nav, .shell-ctx { position: static; } }
.sidenav { display: flex; flex-direction: column; gap: 3px; padding: 8px; border-radius: 14px;
  border: 1px solid var(--line); background: var(--glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.sidenav .navgroup { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--rune-dim); padding: 10px 12px 4px; }
.sidenav .navgroup:first-child { padding-top: 4px; }
.sidenav a { font-family: var(--serif); font-size: 13.5px; color: var(--ink-dim); padding: 9px 12px; border-radius: 10px;
  transition: color .15s, background .15s; }
.sidenav a:hover { color: var(--gold-bright); background: rgba(185,140,255,.1); }
.sidenav a.active { color: var(--gold-bright); background: rgba(79,227,255,.1); box-shadow: inset 2px 0 0 var(--rune); }
.ctx-card { border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; background: var(--glass-2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.ctx-card h3 { font-family: var(--serif); color: var(--gold-bright); font-size: 14px; margin: 0 0 8px; }
.ctx-card p { font-size: 13px; color: var(--ink-dim); margin: 0 0 6px; }
.ctx-card p:last-child { margin-bottom: 0; }
.ctx-card .btn { display: block; width: 100%; text-align: center; }

/* ---- Ankündigungsfeld (Dashboard) ----------------------------------------- */
.announce { display: flex; align-items: center; gap: 16px; margin-top: 22px;
  padding: 18px 22px; border-radius: 14px; color: var(--ink);
  border: 1px solid var(--line-strong);
  background: linear-gradient(160deg, rgba(245,193,90,.14), rgba(245,193,90,.035));
  box-shadow: 0 12px 30px rgba(0,0,0,.28); }
.announce-badge { flex: none; width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
  font-size: 24px; background: rgba(245,193,90,.12); border: 1px solid rgba(245,193,90,.5); }
.announce-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.announce-label { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.announce-text { margin: 0; font-size: 15.5px; color: var(--ink); }
.announce-edit { margin-top: 12px; }
.announce-edit > summary { cursor: pointer; list-style: none; font-family: var(--serif); font-size: 13px; color: var(--ink-dim); }
.announce-edit > summary::-webkit-details-marker { display: none; }
.announce-edit > summary:hover { color: var(--ink); }
.announce-form { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.announce-form input[type=text] { flex: 1; min-width: 240px; font-family: var(--sans); font-size: 15px;
  color: var(--ink); padding: 11px 14px; border-radius: 10px; background: rgba(10,6,22,.5); border: 1px solid var(--line); }
.announce-form input[type=text]:focus { outline: none; border-color: var(--arcane); box-shadow: 0 0 0 3px rgba(124,92,255,.18); }

/* ---- Tabellen ------------------------------------------------------------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--glass-2); }
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 520px; }
.tbl thead th {
  text-align: left; font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--rune); padding: 12px 14px;
  background: rgba(79,227,255,.05); border-bottom: 1px solid var(--line);
}
.tbl tbody td { padding: 11px 14px; border-bottom: 1px solid rgba(185,140,255,.1); vertical-align: middle; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover td { background: rgba(124,92,255,.05); }
.tbl tr.muted { opacity: 0.5; }
.tbl .num { font-family: var(--mono); }
.tbl select, .tbl input[type="number"] { font-family: var(--sans); font-size: 13px; color: var(--ink);
  padding: 5px 9px; border-radius: 8px; background: #17102a; border: 1px solid var(--line); }
.tbl select { max-width: 130px; }
.tbl input[type="number"] { max-width: 84px; }
.tbl td.cats { white-space: nowrap; }
.tbl td.cats label { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ink-dim); margin-right: 8px; }

/* ---- Badges --------------------------------------------------------------- */
.pill { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; padding: 2px 10px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--ink-dim); }
.sev { font-size: 12px; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--line); white-space: nowrap; }
.sev-info { color: #cfe0ff; border-color: rgba(74,127,214,.5); background: rgba(74,127,214,.12); }
.sev-minor { color: #ffd9a8; border-color: rgba(245,193,90,.5); background: rgba(245,193,90,.12); }
.sev-major { color: #ffb27c; border-color: rgba(255,128,0,.5); background: rgba(255,128,0,.12); }
.sev-severe { color: #ff9a9a; border-color: rgba(196,30,58,.55); background: rgba(196,30,58,.16); }
/* Charakter-Chips (Main/Twinks) – überschreibt bewusst core.css .chip (Mono-Pill). */
.chip { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; padding: 4px 11px;
  border-radius: 999px; border: 1px solid var(--line); background: rgba(185,140,255,.10); color: var(--ink); white-space: nowrap; }
.chip-main { color: var(--gold-bright); border-color: rgba(245,193,90,.5); background: rgba(245,193,90,.12); }

/* ---- Kader-Verwaltung: Roster als Zeilen-Karten --------------------------- */
.krows { display: grid; gap: 10px; }
.krow {
  --cc: #6b6b6b; position: relative; display: grid; gap: 13px;
  padding: 14px 18px 14px 22px; border-radius: 14px;
  border: 1px solid var(--line); background: var(--glass-2);
  transition: border-color .16s, box-shadow .16s, transform .16s;
}
/* Klassenfarb-Signatur links – die Zeile "gehört" ihrer Klasse */
.krow::before {
  content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--cc); box-shadow: 0 0 12px var(--cc);
}
.krow:hover { border-color: rgba(185,140,255,.42); box-shadow: 0 12px 30px rgba(0,0,0,.34); transform: translateY(-1px); }
.krow.is-muted { opacity: .5; }
.krow.is-banned { border-color: rgba(196,30,58,.4); }
.krow.is-banned::before { background: var(--horde); box-shadow: 0 0 12px var(--horde); }

/* Kopf: Identität links, Kennzahlen rechts */
.krow-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.krow-id { min-width: 0; }
.krow-name { font-family: var(--serif); font-weight: 700; font-size: 16.5px; line-height: 1.15;
  display: inline-flex; align-items: center; gap: 7px; }
.krow-name .cname-btn { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer;
  border-bottom: 1px dotted rgba(255,255,255,.28); }
.krow-name .cname-btn:hover { color: var(--gold-bright); }
.krow-ban { font-size: 13px; }
.krow-sub { font-size: 12.5px; color: var(--ink-dim); margin-top: 3px; line-height: 1.4; }
.krow-bt { white-space: nowrap; }

.krow-metrics { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; text-align: right; }
.krow-ilvl { font-family: var(--serif); font-weight: 900; font-size: 23px; line-height: 1; color: var(--gold-bright); }
.krow-ilvl small { font-family: var(--mono); font-weight: 400; font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint); margin-left: 5px; }
.krow-ilvl--none { color: var(--ink-faint); font-weight: 700; }
.krow-sub2 { font-family: var(--mono); font-size: 11px; color: var(--ink-dim); }
.krow-badge { display: inline-flex; align-items: center; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }
.krow-rank { font-size: 11px; color: var(--ink-dim); }

/* Steuerzeile: Zuordnung links, Kategorien + Aktionen rechts */
.krow-ctl { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
  padding-top: 12px; border-top: 1px solid rgba(185,140,255,.12); }
.krow-ctl--add { justify-content: flex-start; }
.krow-selects { display: flex; flex-wrap: wrap; gap: 7px; }
.krow-selects select { font-family: var(--sans); font-size: 12.5px; color: var(--ink);
  padding: 7px 11px; border-radius: 9px; background: #17102a; border: 1px solid var(--line);
  transition: border-color .15s, box-shadow .15s; max-width: 130px; }
.krow-selects select:hover { border-color: rgba(185,140,255,.5); }
.krow-selects select:focus { outline: none; border-color: var(--arcane); box-shadow: 0 0 0 3px rgba(124,92,255,.18); }
.krow-tail { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-left: auto; }

/* Toggle-Chips Raid / M+ / PvP – ein Segment-Schalter, leuchtet in Runen-Cyan wenn aktiv.
   Native Checkbox bleibt (name + form="rf-<id>") → kader-live.js speichert weiter sofort. */
.tgls { display: inline-flex; gap: 4px; padding: 3px; border-radius: 999px;
  border: 1px solid var(--line); background: rgba(10,6,22,.45); }
.tgl { position: relative; display: inline-flex; margin: 0; border-radius: 999px; }
.tgl input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.tgl span { display: inline-flex; align-items: center; padding: 5px 13px; border-radius: 999px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .03em; color: var(--ink-faint);
  border: 1px solid transparent; transition: color .15s, background .15s, border-color .15s, box-shadow .15s; }
.tgl input:hover + span { color: var(--ink-dim); }
.tgl input:checked + span { color: var(--rune); background: rgba(79,227,255,.12);
  border-color: var(--rune-dim); box-shadow: 0 0 12px rgba(79,227,255,.2); }
.tgl input:focus-visible + span { outline: 2px solid var(--rune); outline-offset: 1px; }
.tgls--ro { font-family: var(--mono); font-size: 11.5px; color: var(--ink-dim); }

.krow-act { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.btn.sm.icon { padding: 7px 10px; }

@media (max-width: 560px) {
  .krow-head { flex-direction: column; gap: 10px; }
  .krow-metrics { flex-direction: row; align-items: center; align-self: stretch; justify-content: space-between; text-align: left; }
  .krow-tail { width: 100%; }
}

/* ---- Lesemodus (Gäste / zeitbegrenzter Zugang) ---------------------------- */
.readonly-note { margin: 14px 0 4px; padding: 10px 14px; border-radius: 10px; font-size: 14px;
  color: #ffd9a8; border: 1px solid rgba(245,193,90,.45); background: rgba(245,193,90,.10); }
body.readonly main form.form[method="post"] { display: none; }
body.readonly main details { display: none; }
body.readonly main button { display: none; }
body.readonly main form[method="get"] button { display: revert; }
body.readonly main select, body.readonly main textarea,
body.readonly main input:not([type="hidden"]) { pointer-events: none; opacity: 0.55; }
body.readonly main form[method="get"] input, body.readonly main form[method="get"] select { pointer-events: auto; opacity: 1; }

/* ---- Aufklappbare Erläuterung --------------------------------------------- */
details.explainer { border: 1px solid var(--line); border-radius: 14px; background: var(--glass-2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
details.explainer > summary { cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent;
  display: flex; align-items: center; gap: 10px; padding: 15px clamp(18px, 3vw, 26px);
  font-family: var(--serif); font-size: 16px; color: var(--gold-bright); }
details.explainer > summary::-webkit-details-marker { display: none; }
details.explainer > summary::before { content: "\25B8"; color: var(--rune); font-size: 14px; transition: transform .15s ease; }
details.explainer[open] > summary::before { transform: rotate(90deg); }
details.explainer > summary:hover { color: var(--gold); }
details.explainer .explainer-body { padding: 0 clamp(18px, 3vw, 26px) clamp(18px, 3vw, 24px); }
body.readonly main details.explainer { display: revert; }

/* ---- Admin-Übersicht als aufklappbares Dropdown-Menü (linke Nav) ----------
   Ersetzt die frühere flache Linkliste: EIN natives <details> bündelt alle
   Verwaltungs-Bereiche; auf Admin-Seiten server-seitig `open` -> keine Klicks
   nötig, aber jederzeit zuklappbar. Nutzt dieselben Tokens wie .aside-*. */
.aside-menu { margin-top: 4px; }
.aside-menusum {
  display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none;
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold); padding: 9px 12px; border-radius: 11px;
  border: 1px solid rgba(185,140,255,.14); background: rgba(185,140,255,.05);
}
.aside-menusum::-webkit-details-marker { display: none; }
.aside-menusum:hover { color: var(--gold-bright); background: rgba(185,140,255,.12); }
.aside-menusum.active { color: var(--gold-bright); }
.aside-menusum .ai { width: 18px; text-align: center; font-size: 14px; flex: none; }
.aside-menusum .chev { margin-left: auto; color: var(--rune-dim); font-size: 17px; line-height: 1; transition: transform .18s ease; }
.aside-menu[open] > .aside-menusum .chev { transform: rotate(90deg); }
.aside-menubody { display: flex; flex-direction: column; gap: 3px; margin-top: 4px; }
.aside-menubody .navgroup { margin-top: 9px; }

/* Ankündigung als erstes Element im Inhalt -> keinen doppelten Abstand oben. */
.shell-main > .announce:first-child,
.shell-main > .announce-edit:first-child { margin-top: 0; }

/* ---- Dezentes "Gespeichert"-Toast (AJAX-Submit ohne Reload) ---------------- */
.ha-toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(10px);
  background: rgba(18,12,36,.97); color: var(--ink);
  border: 1px solid rgba(185,140,255,.4); box-shadow: 0 10px 34px rgba(0,0,0,.55);
  padding: 11px 20px; border-radius: 13px; font-family: var(--sans); font-size: 14px;
  opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; z-index: 9999;
}
.ha-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.ha-toast.err { border-color: rgba(255,120,120,.5); }
@media (prefers-reduced-motion: reduce) { .ha-toast { transition: opacity .2s ease; } }

/* Kurzes Aufleuchten des neu geladenen Inhalts nach einem AJAX-Speichern. */
@keyframes ha-saved-glow { from { box-shadow: inset 0 0 0 2px rgba(79,227,255,.35); } to { box-shadow: inset 0 0 0 2px rgba(79,227,255,0); } }
.shell-main.ha-saved { animation: ha-saved-glow .9s ease; border-radius: 16px; }
@media (prefers-reduced-motion: reduce) { .shell-main.ha-saved { animation: none; } }

/* ---- Sortier-Umschalter im Gilden-Roster (Kader) --------------------------- */
.ksort { display: inline-flex; align-items: center; gap: 6px; }
.ksort .btn.active {
  color: var(--gold-bright); border-color: var(--gold); background: rgba(245,193,90,.14);
}