/* Main stylesheet for the rude Guild Page (moved out of index.html's
   <style> block). Asset URLs are relative to this file, hence ../assets/.
   The two rules that reference the inline SVG filter
   #designBurnFireDistort stay inline in index.html: a fragment-only
   url(#id) in an external stylesheet isn't reliably resolved against the
   page across browsers. */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Karla:wght@400;500;600;700&display=swap');

/* WoW Forever-inspired palette: dusk mountain sky, gold ornamentation,
   teal CTAs, warm parchment panels — original color/typography language,
   not a reproduction of any specific Blizzard artwork or logo. */
:root{
  /* Deep-sea navy palette (swapped from the earlier purple scheme) —
     gold/teal accents and the hero/parchment sections keep their own
     colors, only the general background/panel/border/text tones below
     come from this palette. */
  --bg-deep: #071b28;
  --bg-panel: #0c2f44;
  --bg-panel-raised: #12415c;
  --border: #2c6788;
  --border-soft: #1a3f56;
  --gold: #c9a227;
  --gold-bright: #f0cf6b;
  --teal: #1f7a72;
  --teal-bright: #2fae9e;
  --text: #e6eef2;
  --text-muted: #9ab3c4;
  --text-faint: #63808f;
  --danger: #b5493f;
  --danger-bright: #d96759;

  /* Extra tokens for a handful of spots that used to be hardcoded hex
     instead of a variable (gold badge/crest glints, the body/hero/
     parchment/news-thumb background gradients, form-field backgrounds,
     the teal button's text/border). Pulled out so the Horde reveal theme
     below can retint them too — see the "Design reveal" comment further
     down for what triggers that theme and how. */
  --gold-bright-rgb: 240,207,107;
  /* WoW item tooltip (js/item-tooltip.js) — the game's own colors, same in both themes. */
  --tip-bg: rgba(8, 10, 24, 0.94);
  --tip-border: #8f8f99;
  --tip-text: #ffffff;
  --tip-green: #1eff00;
  --tip-yellow: #ffd100;
  --tip-grey: #9d9d9d;
  /* Raid target markers (Taktik board, js/raid-tactics.js) — the game's colors, same in both themes. */
  --mk-1: #ffe14d;
  --mk-2: #ff9f40;
  --mk-3: #c060ff;
  --mk-4: #3fcf6e;
  --mk-5: #c9d6e8;
  --mk-6: #4da6ff;
  --mk-7: #ff4d4d;
  --mk-8: #f5f5f5;
  --badge-hi: #fff6c8;
  --badge-edge: #b8860b;
  --badge-text: #3a2600;
  --crest-shade: #7a5c12;
  --crest-text: #08202f;
  --body-grad-1: #08202f;
  --body-grad-2: #0a2a3c;
  --field-bg: #08192a;
  --parchment-grad-1: #0e4a4a;
  --parchment-grad-2: #0c3247;
  --parchment-grad-3: #081c2c;
  --parchment-text: #cfe3e6;
  --news-thumb-grad-1: #123f59;
  --news-thumb-grad-2: #0a2436;
  --teal-btn-text: #eafffb;
  --teal-btn-border: #1c6961;
  --hero-bg-fallback: #171432;
  --hero-scrim-rgb: 10,8,20;
  --body-vignette-rgb: 44,103,136;
  --topbar-bg-rgb: 7,22,34;

  /* Primary button gradient and the collapsible cards (Ankündigungen,
     Abstimmungen, Class Overview) — own tokens so the Horde theme can
     keep those red while the page frame turns neutral grey. Classic
     values = what these used before. */
  --btn-primary-top: var(--teal-bright);
  --btn-primary-bottom: var(--teal);
  --fold-border: var(--border-soft);
  --fold-head-bg: var(--bg-panel-raised);
  --fold-head-hover: rgba(255,255,255,0.05);
  --fold-body-bg: rgba(255,255,255,0.015);
}

/* ---------------------------------------------------------------------
   Design reveal — dark Horde theme
   ---------------------------------------------------------------------
   Applied to <html> (not <body>) as `.theme-horde`, so every var() above
   resolves to these values instead once it's added — nothing but this
   block needs to change for the whole site to retint, since the rest of
   the stylesheet only ever reaches colors through the custom properties
   above (see the refactor note on the tokens above — a few previously-
   hardcoded hex values were pulled into vars specifically so this block
   could reach them too).

   Who gets this class and when (see the big comment above
   initDesignReveal() near the end of the main script for the full
   picture, including why there are two separate localStorage keys):
   - First-time visitors still see the old navy/gold theme. On the very
     first page load in a given browser ("guild-loot-design-revealed" not
     yet in localStorage), a one-time popup asks whether to unlock the
     new design — rolled out to everyone as of 2026-10-01, no longer
     admin-only. Clicking "Okay" burns the old page away top-to-bottom
     (#designBurnOverlay, driven by startDesignBurn()) and adds this
     class underneath the burning paper, then sets both localStorage
     keys.
   - Once "guild-loot-design-theme" is 'horde', a tiny inline script at
     the very top of <head> adds this class before first paint (no flash
     of the old theme on repeat visits).
   A person can switch back at any time via the "Design" switcher in User
   Settings (also admin-only for now — see applyAccessControl()/
   setDesignTheme()); nothing here is destructive, the old :root values
   above are always still there underneath.

   Palette below isn't invented — it's sampled straight from the guild's
   own hero reveal artwork (assets/bg-texture-horde.jpg, set as the
   .hero background further down): dominant-color quantization on the
   image gave the near-blacks/oxbloods for the backgrounds/borders, and
   the banner's own glowing red-orange became --gold-bright (rgb
   219,90,56) almost unchanged. See PROJECT.md for the exact sampling. */
html.theme-horde{
  /* Page frame: neutral near-black and greys (2026-10-03, the all-red
     look was too much). Red stays as the accent (--gold*, headings,
     active nav, buttons) and on the
     Home intro card (--parchment-*), where it contrasts with the black.
     Collapsible cards (--fold-*) are grey like the other cards; their
     titles carry the red (see the html.theme-horde title rules). */
  --bg-deep: #0b0b0c;
  --bg-panel: #151517;
  --bg-panel-raised: #1f1f22;
  --border: #3a3a3f;
  --border-soft: #26262a;
  --gold: #7a2a1c;
  --gold-bright: #db5a38;
  --teal: #5c2e1c;
  --teal-bright: #c39a7c;
  --text: #ebe8e5;
  --text-muted: #a7a39f;
  --text-faint: #6f6c69;
  --danger: #9c2e28;
  --danger-bright: #e2705c;

  --gold-bright-rgb: 219,90,56;
  --badge-hi: #f2c9a8;
  --badge-edge: #5c1f14;
  --badge-text: #2a0e07;
  --crest-shade: #4a1712;
  --crest-text: #1a0806;
  --body-grad-1: #121213;
  --body-grad-2: #0e0e0f;
  --field-bg: #0f0f11;
  --parchment-grad-1: #5c2216;
  --parchment-grad-2: #38140d;
  --parchment-grad-3: #1a0806;
  --parchment-text: #f0ddc8;
  --news-thumb-grad-1: #4a1c12;
  --news-thumb-grad-2: #1c0b07;
  --teal-btn-text: #fff0e8;
  --teal-btn-border: #6e2418;
  --hero-bg-fallback: #0b0b0c;
  --hero-scrim-rgb: 11,11,12;
  --body-vignette-rgb: 60,60,64;
  --topbar-bg-rgb: 14,14,15;

  --btn-primary-top: #9e3624;
  --btn-primary-bottom: #82291b;
  --fold-border: #2e2e33;
  --fold-head-bg: #1f1f22;
  --fold-head-hover: #26262a;
  --fold-body-bg: #151517;
}

*{ box-sizing: border-box; }
html, body{ margin: 0; padding: 0; }
body{
  /* Deep-sea navy ambient background, fading into a flat panel color
     below the hero (the hero image/overlay itself is untouched). */
  background:
    radial-gradient(ellipse 70% 40% at 50% 0%, rgba(var(--body-vignette-rgb),0.35), transparent 60%),
    linear-gradient(180deg, var(--body-grad-1) 0%, var(--body-grad-2) 10%, var(--bg-deep) 30%, var(--bg-deep) 100%);
  background-attachment: fixed;
  color: var(--text);
  font-family: 'Karla', sans-serif;
  font-size: 14px;
  line-height: 1.5;
}
a{ color: inherit; }
.hidden{ display: none !important; }

h1, h2, h3{ font-family: 'Cinzel', serif; }

/* ---------- Buttons / inputs ---------- */
.btn{
  font-family: 'Karla', sans-serif;
  font-weight: 600;
  font-size: 13.5px;
  padding: 10px 20px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--bg-panel-raised);
  color: var(--text);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, filter .15s ease;
  white-space: nowrap;
  /* .btn is also used on <a> tags (e.g. the applicant "Auf Discord
     kontaktieren" link) — kill the browser's default link underline and
     make it lay out identically to a real <button>. */
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn:hover{ border-color: var(--gold); }
.btn-sm{ padding: 6px 12px; font-size: 12px; border-radius: 3px; }
.btn-block{ width: 100%; }
.btn-ghost{ background: transparent; }
.btn-teal{ background: linear-gradient(180deg, var(--btn-primary-top), var(--btn-primary-bottom)); color: var(--teal-btn-text); border: 1px solid var(--teal-btn-border); }
.btn-teal:hover{ filter: brightness(1.08); }
.btn-outline-gold{ background: transparent; border: 1px solid var(--gold); color: var(--gold-bright); }
.btn-outline-gold:hover{ background: rgba(201,162,39,0.12); }
.btn-discord{ background: #5865F2; color: #fff; border: 1px solid #4752c4; }
.btn-discord:hover{ background: #4752c4; }

select, textarea{
  font-family: 'Karla', sans-serif;
  font-size: 13.5px;
  padding: 8px 10px;
  background: var(--field-bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  width: 100%;
}
select:focus, textarea:focus{ outline: none; border-color: var(--gold); }

/* ---------- Shell: collapsible sidebar + main area ---------- */
.shell{ display: flex; align-items: stretch; min-height: 100vh; }
.sidebar{
  width: 240px; flex: none; overflow: hidden;
  background: var(--bg-panel); border-right: 1px solid var(--border-soft);
  transition: width .2s ease, border-color .2s ease;
  /* Pinned in place while the page scrolls, so the nav (and the
     burger toggle) stays reachable even when scrolled to the bottom. */
  position: sticky; top: 0; height: 100vh; align-self: flex-start;
}
/* Collapsed = a slim icon-only rail rather than nothing, so navigation
   stays reachable without expanding the full sidebar. */
.sidebar.collapsed{ width: 64px; }
.sidebar-inner{ width: 240px; padding: 20px 16px; height: 100%; overflow-y: auto; }
.sidebar.collapsed .sidebar-inner{ display: none; }
.sidebar-inner-mini{
  display: none; width: 64px; height: 100%; padding: 20px 0;
  flex-direction: column; align-items: center; gap: 18px; overflow-y: auto;
}
.sidebar.collapsed .sidebar-inner-mini{ display: flex; }
.sidebar-brand{ display: flex; align-items: center; gap: 10px; cursor: pointer; margin-bottom: 22px; }
.nav-crest{
  width: 36px; height: 36px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 35% 30%, var(--gold-bright), var(--gold) 55%, var(--crest-shade) 100%);
  border: 2px solid var(--gold-bright);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Cinzel', serif; font-weight: 700; color: var(--crest-text); font-size: 15px;
  box-shadow: 0 0 10px rgba(var(--gold-bright-rgb),0.35);
  cursor: pointer;
}
.nav-name{ font-family: 'Cinzel', serif; font-weight: 600; letter-spacing: 1.5px; font-size: 17px; color: var(--text); white-space: nowrap; }
.sidebar-nav{ display: flex; flex-direction: column; gap: 18px; }
.sidebar-nav-group{ display: flex; flex-direction: column; gap: 2px; }
.sidebar-nav-heading{
  padding: 0 12px 4px; font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--text-muted); opacity: .7;
}
.sidebar-nav-icon{ flex: none; display: inline-flex; width: 18px; height: 18px; opacity: .8; }
.sidebar-nav-icon svg{ width: 18px; height: 18px; }
.sidebar-nav-item.active .sidebar-nav-icon{ opacity: 1; }
.sidebar-nav-label{ flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sidebar-nav-item{
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: 6px;
  color: var(--text-muted); font-size: 14px; font-weight: 600;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  border: 1px solid transparent;
}
.sidebar-nav-item:hover{ color: var(--text); background: rgba(255,255,255,0.04); }
.sidebar-nav-item.active{ color: var(--gold-bright); background: rgba(var(--gold-bright-rgb),0.1); border-color: rgba(var(--gold-bright-rgb),0.25); }

.sidebar-nav-mini{ display: flex; flex-direction: column; align-items: center; gap: 6px; }
.sidebar-nav-mini-sep{ width: 24px; height: 1px; margin: 4px 0; background: var(--border-soft); }
.sidebar-nav-item-mini{
  position: relative;
  width: 38px; height: 38px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); cursor: pointer; border: 1px solid transparent;
}
.sidebar-nav-item-mini svg{ width: 18px; height: 18px; }
.sidebar-nav-item-mini:hover{ color: var(--text); background: rgba(255,255,255,0.04); }
.sidebar-nav-item-mini.active{ color: var(--gold-bright); background: rgba(var(--gold-bright-rgb),0.1); border-color: rgba(var(--gold-bright-rgb),0.25); }

/* ---------- "Quest available" markers — a WoW-style gold "!" next to a
   sidebar nav item (full rail) or a small dot on its icon (mini rail)
   when that page has something open for you: an unread announcement,
   or an open poll/the class survey you haven't voted in yet. Purely
   visual sugar around data that's already tracked elsewhere (votes,
   seenState/<uid>) — see pageQuestPending() / renderQuestBell() in the
   script for what actually decides when these show. ---------- */
.nav-quest-badge{
  flex: none; width: 18px; height: 18px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--badge-hi), var(--gold-bright) 55%, var(--badge-edge) 100%);
  border: 1px solid var(--badge-hi); color: var(--badge-text); font-family: 'Cinzel', serif; font-weight: 700; font-size: 12px;
  display: flex; align-items: center; justify-content: center; line-height: 1;
  box-shadow: 0 0 6px rgba(var(--gold-bright-rgb),0.6);
  animation: quest-badge-pulse 2s ease-in-out infinite;
}
.nav-quest-badge-mini{
  position: absolute; top: 1px; right: 1px; width: 11px; height: 11px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--badge-hi), var(--gold-bright) 55%, var(--badge-edge) 100%);
  border: 1px solid var(--badge-hi); box-shadow: 0 0 6px rgba(var(--gold-bright-rgb),0.7);
  animation: quest-badge-pulse 2s ease-in-out infinite;
}
@keyframes quest-badge-pulse{
  0%, 100%{ transform: scale(1); opacity: 1; }
  50%{ transform: scale(1.18); opacity: 0.85; }
}

/* ---------- Quest bell — topbar dropdown summarizing every pending
   "quest" at once (unread Ankündigungen + open Abstimmungen you haven't
   voted in), so you don't have to click through each nav item to find
   out. Reuses the same popover chrome as the account popover. ---------- */
.quest-bell-wrap{ position: relative; }
.quest-bell-btn{ position: relative; display: flex; align-items: center; justify-content: center; padding: 8px 10px; }
.quest-bell-btn svg.quest-bell-icon{ width: 16px; height: 22px; overflow: visible; }
/* The bell button itself is styled as a WoW "quest available" mark — a
   filled gold "!" when something's pending, and just its empty outline
   ("ein leerer Rahmen") when you're caught up. Toggled by the
   .has-pending class in renderQuestBell(), not by swapping markup. */
.quest-bell-icon-shape{ transition: fill .15s, stroke .15s; }
.quest-bell-btn:not(.has-pending) .quest-bell-icon-shape{
  fill: none; stroke: var(--text-muted); stroke-width: 1.6;
}
.quest-bell-btn:hover:not(.has-pending) .quest-bell-icon-shape{ stroke: var(--text); }
.quest-bell-btn.has-pending .quest-bell-icon-shape{
  fill: var(--gold-bright); stroke: var(--badge-hi); stroke-width: 0.6;
  filter: drop-shadow(0 0 4px rgba(var(--gold-bright-rgb),0.7));
}
.quest-bell-dot{
  position: absolute; top: 3px; right: 4px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 999px;
  background: radial-gradient(circle at 35% 30%, var(--badge-hi), var(--gold-bright) 55%, var(--badge-edge) 100%);
  border: 1px solid var(--badge-hi); color: var(--badge-text); font-family: 'Karla', sans-serif; font-weight: 700; font-size: 10px;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 0 6px rgba(var(--gold-bright-rgb),0.6);
}
.quest-popover{
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
  width: 280px; max-height: 360px; overflow-y: auto;
  background: var(--bg-panel-raised); border: 1px solid var(--gold);
  border-radius: 6px; padding: 14px; box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.quest-popover-title{ font-family: 'Cinzel', serif; color: var(--gold-bright); font-size: 13px; margin-bottom: 10px; }
.quest-popover-section-title{
  font-family: 'Cinzel', serif; font-size: 11px; letter-spacing: .6px; text-transform: uppercase;
  color: var(--text-muted); margin: 12px 0 6px;
}
.quest-popover-section-title:first-child{ margin-top: 0; }
.quest-popover-item{
  display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 5px;
  color: var(--text); font-size: 13px; text-decoration: none; cursor: pointer;
}
.quest-popover-item:hover{ background: rgba(var(--gold-bright-rgb),0.1); }
.quest-popover-item-icon{
  flex: none; width: 16px; height: 16px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--badge-hi), var(--gold-bright) 55%, var(--badge-edge) 100%);
  color: var(--badge-text); font-family: 'Cinzel', serif; font-weight: 700; font-size: 11px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.quest-popover-empty{ font-size: 12.5px; color: var(--text-muted); padding: 6px 2px; }

.main-area{ flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar{
  position: sticky; top: 0; z-index: 50;
  display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "burger countdown auth";
  align-items: center;
  padding: 10px 4vw 10px 16px; gap: 16px;
  background: rgba(var(--topbar-bg-rgb),0.86); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-soft);
}
.burger-btn{
  grid-area: burger;
  width: 38px; height: 38px; flex: none; border-radius: 6px;
  background: var(--bg-panel-raised); border: 1px solid var(--border);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  cursor: pointer; padding: 0;
}
.burger-btn:hover{ border-color: var(--gold); }
.burger-btn span{ display: block; width: 16px; height: 2px; background: var(--text-muted); border-radius: 1px; }
.burger-btn:hover span{ background: var(--gold-bright); }
.nav-auth{ grid-area: auth; justify-self: end; display: flex; align-items: center; gap: 10px; }

/* ---------- Release countdown pill (topbar, top-mid, every page) ---------- */
.topbar-countdown{
  grid-area: countdown; justify-self: center;
  display: flex; align-items: center; gap: 10px; max-width: 100%;
}
.topbar-countdown-logo{ width: 40px; height: auto; flex: none; }
.topbar-countdown-body{ display: flex; flex-direction: column; line-height: 1.25; white-space: nowrap; }
.topbar-countdown-label{ font-size: 10.5px; font-weight: 600; color: var(--gold-bright); }
.topbar-countdown-timer{ font-size: 15px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; font-family: 'Cinzel', serif; }
@media (max-width: 760px){
  .topbar{ grid-template-columns: auto auto; grid-template-areas: "burger auth" "countdown countdown"; row-gap: 10px; }
  .topbar-countdown{ justify-self: center; }
}
@media (max-width: 420px){
  .topbar-countdown-logo{ width: 32px; }
  .topbar-countdown-label{ display: none; }
}

/* ---------- Account / access control (reused across nav) ---------- */
.access-control{ position: relative; }
#accessSwitchBtn{ display: flex; align-items: center; gap: 7px; }
.access-avatar{ width: 20px; height: 20px; border-radius: 50%; flex: none; }
.access-popover{
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
  width: 220px; background: var(--bg-panel-raised); border: 1px solid var(--gold);
  border-radius: 6px; padding: 14px; box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.access-popover-title{ font-family: 'Cinzel', serif; color: var(--gold-bright); font-size: 13px; margin-bottom: 4px; word-break: break-word; }
.access-popover-sub{ font-size: 11.5px; color: var(--text-muted); margin-bottom: 12px; }
.access-popover-characters{ font-size: 11px; color: var(--teal-bright); margin: -6px 0 12px; }
.access-popover .btn-block{ margin-top: 6px; }

.access-modal{
  position: fixed; inset: 0; z-index: 80; background: rgba(0,0,0,0.65);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.access-modal-card{
  background: var(--bg-panel); border: 1px solid var(--gold); border-radius: 8px;
  padding: 22px 24px; max-width: 480px; width: 100%; max-height: 80vh; overflow-y: auto;
}
.access-modal-header{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.access-modal-header h2{ color: var(--gold-bright); font-size: 18px; margin: 0; }
.access-modal-note{ font-size: 12.5px; color: var(--text-muted); margin: 0 0 14px; line-height: 1.5; }
.access-role-group{ margin-bottom: 6px; }
.access-role-group:last-child{ margin-bottom: 0; }
.access-role-group-head{
  font-family: 'Cinzel', serif; font-size: 11.5px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--gold-bright); padding: 10px 4px 4px; border-bottom: 1px solid var(--gold);
}
.access-role-group-count{ color: var(--text-muted); font-family: 'Karla', sans-serif; letter-spacing: 0; text-transform: none; font-size: 11px; }
.access-member-block{ padding: 8px 0; border-bottom: 1px solid var(--border-soft); }
.access-member-block:last-child{ border-bottom: none; }
.access-member-row{ display: flex; align-items: center; gap: 10px; padding: 0 4px; }
.access-member-avatar{ width: 28px; height: 28px; border-radius: 50%; flex: none; background: var(--bg-panel-raised); }
.access-member-name{ flex: 1; min-width: 0; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.access-member-nickname{ font-weight: 400; color: var(--text-muted); }
.access-member-role-select{ width: auto; font-size: 12px; padding: 4px 8px; }
.access-member-role-select:disabled{ opacity: 0.55; cursor: not-allowed; }
.access-member-characters-row{ display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 6px 4px 0 42px; }
.access-member-characters-empty{ font-size: 11.5px; color: var(--text-muted); font-style: italic; }
.access-member-armory-refresh{ font-size: 11px; padding: 2px 8px; }
/* "Notify me about new applications" — only shown for Admin/Officer
   rows (see canNotify in renderAccessModal), indented to line up under
   the name/select above it rather than the avatar. */
.access-member-options{ display: flex; flex-wrap: wrap; gap: 4px 16px; padding-left: 42px; }
.access-member-options .access-member-notify{ padding-left: 0; }
.access-member-notify{
  display: flex; align-items: center; gap: 6px; padding: 4px 4px 0 42px;
  font-size: 11.5px; color: var(--text-muted); cursor: pointer;
}
.access-member-notify input{ cursor: pointer; }

/* Character chips — shared between Manage access and Bewerbungen. */
.character-chips{ display: flex; flex-wrap: wrap; gap: 6px; }
.character-chip{
  display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px;
  background: var(--bg-panel-raised); border: 1px solid var(--border-soft); border-radius: 20px;
  padding: 3px 10px; color: var(--text);
}
.character-chip-main{ border-color: var(--gold); color: var(--gold-bright); }
.character-chip-realm{ color: var(--text-muted); font-size: 10.5px; }
.character-chip-meta{ color: var(--teal-bright); font-size: 10.5px; }
.character-chip-meta-error{ color: var(--text-muted); font-style: italic; }

/* "User Settings" (formerly "Meine Charaktere verwalten") composer. */
.character-composer-row{
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 8px 0; border-bottom: 1px solid var(--border-soft);
}
.character-composer-row:last-child{ border-bottom: none; }
.character-composer-name{ flex: 1 1 140px; min-width: 0; }
.character-composer-realm{ flex: 1 1 100px; min-width: 0; }
.character-composer-main-label{ display: flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--text-muted); white-space: nowrap; }
.character-composer-list{ margin: 4px 0 12px; }

.application-characters{ margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border-soft); }
.application-characters strong{ display: block; margin-bottom: 6px; font-size: 12.5px; }
.application-characters .character-chips{ margin-bottom: 8px; }

/* ---------- "Meine Charaktere" page — character cards, own fantasy/
   gold styling language (tac-card look), not a copy of Blizzard's own
   Armory page design. ---------- */
.mychar-page-actions{ display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
/* Widened from 280px so the equipment grid's two columns (icon + name +
   enchant text) have room to breathe without wrapping awkwardly. */
.mychar-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(440px, 1fr)); gap: 18px; }
.mychar-card{
  background: var(--bg-panel); border: 1px solid var(--border-soft); border-top: 3px solid var(--gold);
  border-radius: 8px; padding: 18px 20px; display: flex; flex-direction: column; gap: 12px;
}
.mychar-card-head{ display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.mychar-card-name{ font-family: 'Cinzel', serif; font-size: 16px; color: var(--gold-bright); font-weight: 600; }
.mychar-main-badge{ font-family: 'Karla', sans-serif; font-size: 10.5px; color: var(--gold-bright); font-weight: 400; white-space: nowrap; }
.mychar-card-realm{ font-size: 11.5px; color: var(--text-muted); text-transform: capitalize; }
.mychar-card-loading{ font-size: 12.5px; color: var(--text-faint); font-style: italic; }
.mychar-card-error{ font-size: 12.5px; color: var(--text-muted); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mychar-stat-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
.mychar-stat{ display: flex; flex-direction: column; gap: 2px; }
.mychar-stat-label{ font-size: 10.5px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-faint); }
.mychar-stat-value{ font-size: 14px; font-weight: 600; color: var(--text); }
.mychar-refresh-btn{ align-self: flex-start; }
.mychar-armory-link{ font-size: 12px; color: var(--teal-bright); text-decoration: none; padding-top: 8px; border-top: 1px dashed var(--border-soft); }
.mychar-armory-link:hover{ text-decoration: underline; }

/* ---------- Equipment icon grid — a Wowhead-gear-check-style list of
   every equipped item (not a full character render; see
   discord-auth-worker.js's job-3 comment for why Classic can't offer
   one). Left/right columns mirror the in-game paper-doll's two halves,
   with weapons along the bottom. ---------- */
.mychar-equip-wrap{ border-top: 1px dashed var(--border-soft); padding-top: 12px; }
.mychar-equip-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; }
.mychar-equip-col{ display: flex; flex-direction: column; gap: 4px; }
.mychar-equip-item{ display: flex; align-items: flex-start; gap: 8px; min-height: 34px; }
.mychar-equip-icon{
  width: 30px; height: 30px; flex: none; border-radius: 4px; border: 2px solid var(--border-soft);
  object-fit: cover; background: var(--bg-deep);
}
.mychar-equip-icon-empty{ background: var(--bg-deep); border-style: dashed; opacity: 0.5; }
.mychar-equip-text{ min-width: 0; padding-top: 1px; }
.mychar-equip-name{ font-size: 12px; font-weight: 600; line-height: 1.25; overflow-wrap: break-word; }
.mychar-equip-enchant{ font-size: 10.5px; color: var(--uncommon-green, #1eff00); line-height: 1.25; overflow-wrap: break-word; }
.mychar-equip-bottom{ display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 6px; padding-top: 8px; border-top: 1px dashed var(--border-soft); }
.mychar-equip-bottom .mychar-equip-item{ flex: 1 1 160px; }

/* ---------- WarcraftLogs — current-phase raid rankings ---------- */
.mychar-wcl-wrap{ border-top: 1px dashed var(--border-soft); padding-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.mychar-wcl-head{ display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.mychar-wcl-title{ font-size: 11px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-faint); font-weight: 600; }
.mychar-wcl-link{ font-size: 11.5px; color: var(--teal-bright); text-decoration: none; }
.mychar-wcl-link:hover{ text-decoration: underline; }
.mychar-wcl-zones{ display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.mychar-wcl-zone{
  background: var(--bg-deep); border: 1px solid var(--border-soft); border-radius: 6px;
  padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; text-align: center;
}
.mychar-wcl-zone-label{ font-size: 10px; color: var(--text-muted); font-weight: 600; }
.mychar-wcl-zone-kills{ font-size: 15px; font-weight: 700; color: var(--gold-bright); }
.mychar-wcl-zone-none{ font-size: 11px; color: var(--text-faint); font-style: italic; }
.mychar-wcl-zone-stats{ display: flex; flex-direction: column; gap: 1px; }
.mychar-wcl-zone-stat-label{ font-size: 9.5px; color: var(--text-faint); text-transform: uppercase; margin-right: 5px; }
.mychar-wcl-zone-stat-value{ font-size: 11.5px; color: var(--text); font-weight: 600; }
.mychar-wcl-rank{ color: var(--teal-bright); }
.mychar-wcl-bestperf{
  align-self: center; text-align: center; padding: 8px 18px; border: 1px solid var(--border-soft);
  border-radius: 6px; background: var(--bg-deep);
}
.mychar-wcl-bestperf-label{ font-size: 10px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.4px; }
.mychar-wcl-bestperf-zone{ text-transform: none; letter-spacing: 0; }
.mychar-wcl-bestperf-value{ font-size: 26px; font-weight: 700; color: #a335ee; line-height: 1.2; }
.mychar-wcl-bestperf-median{ font-size: 11px; color: var(--teal-bright); }

/* ---------- "Hilfreich forEVER" — curated list of external community
   sites/tools. Reuses the .voting-card look (same border/radius/bg as
   Abstimmungen & Ankündigungen) but isn't collapsible: the whole header
   is a plain link straight to the site (title — domain), and the body
   always shows a thumbnail beside a short blurb. Cards are grouped by
   an optional `category` field on each entry in FOREVER_RESOURCES —
   today everything is one category so no group heading is shown, but
   the moment a second category is added (e.g. "Berufe", "Dungeons"),
   renderForeverToolsPage() starts printing a heading above each group
   automatically. See FOREVER_RESOURCES near the top of the script for
   how to add a new site. ---------- */
.resource-card{ border: 1px solid var(--border-soft); border-radius: 8px; margin-bottom: 20px; overflow: hidden; background: rgba(255,255,255,0.015); }
.resource-card-header{
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 16px 20px;
  background: var(--bg-panel-raised); text-decoration: none; color: inherit;
}
.resource-card-header:hover{ background: rgba(255,255,255,0.05); }
.resource-card-header:hover .resource-card-title{ color: var(--gold-bright); }
.resource-card-title{ font-family: 'Cinzel', serif; font-size: 15.5px; font-weight: 600; letter-spacing: .3px; color: var(--text); transition: color .1s; }
.resource-card-sep{ color: var(--text-faint); }
.resource-card-domain{ flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--text-muted); }
.resource-card-external{ flex: none; color: var(--text-faint); display: flex; }
.resource-card-external svg{ width: 14px; height: 14px; }
.resource-card-body{ padding: 20px; display: flex; gap: 20px; align-items: flex-start; }
.resource-thumb{
  flex: none; width: 168px; height: 105px; border-radius: 6px; overflow: hidden;
  background: var(--bg-panel-raised); border: 1px solid var(--border-soft);
  display: flex; align-items: center; justify-content: center;
}
.resource-thumb img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.resource-thumb-ph{ color: var(--text-faint); font-family: 'Cinzel', serif; font-size: 11px; text-align: center; padding: 8px; }
.resource-info{ flex: 1; min-width: 0; font-size: 14px; line-height: 1.6; color: var(--text); }
.resource-category-heading{
  font-family: 'Cinzel', serif; font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--gold-bright); margin: 28px 0 12px; padding-bottom: 6px; border-bottom: 1px solid var(--border-soft);
}
.resource-category-heading:first-child{ margin-top: 0; }
@media (max-width: 640px){
  .resource-card-body{ flex-direction: column; }
  .resource-thumb{ width: 100%; height: 140px; }
}

/* ---------- Hero: painterly floating-castle vista, provided by the guild
   (cropped to remove the foreground balcony) — used as the hero backdrop
   with a dark overlay gradient layered on top for text legibility. ---------- */
.hero{
  position: relative;
  min-height: 51vh;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  padding: 56px 6vw 84px;
  overflow: hidden;
  background-color: var(--hero-bg-fallback);
  background-image: url('../assets/bg-texture.jpg');
  background-size: cover;
  background-position: center 42%;
  background-repeat: no-repeat;
}
/* Horde reveal's own hero artwork (the burning-city/banner piece) —
   swapped in only for .theme-horde, same treatment (cover, no-repeat,
   .hero::after scrim below still applies on top of it) as the classic
   hero image otherwise. Needs assets/bg-texture-horde.jpg uploaded
   alongside the existing assets/bg-texture.jpg — see README.md. */
html.theme-horde .hero{
  background-image: url('../assets/bg-texture-horde.jpg');
  background-position: center 30%;
}
.hero::after{
  /* dark overlay so the hero text stays legible over the artwork, plus a
     soft bottom fade blending the photo into the page background. */
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(var(--hero-scrim-rgb),0.74) 0%, rgba(var(--hero-scrim-rgb),0.4) 32%, rgba(var(--hero-scrim-rgb),0.08) 55%, transparent 70%),
    linear-gradient(180deg, rgba(var(--hero-scrim-rgb),0.12) 0%, transparent 22%, transparent 68%, rgba(var(--hero-scrim-rgb),0.6) 100%);
}
.hero-content{ position: relative; z-index: 3; max-width: 620px; }
.hero-eyebrow{ font-size: 12.5px; letter-spacing: 4px; text-transform: uppercase; color: var(--gold-bright); margin: 0 0 10px; }
.hero-title{
  font-family: 'Cinzel', serif; font-weight: 700;
  font-size: clamp(38px, 6.5vw, 78px);
  line-height: 1.05; letter-spacing: 1.5px; margin: 0 0 12px;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 2px 26px rgba(0,0,0,0.35);
}
.hero-tagline{ font-size: 14px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-muted); margin: 0 0 18px; }
.hero-desc{ color: var(--text); font-size: 15px; line-height: 1.7; margin: 0 0 28px; max-width: 520px; }
.hero-actions{ display: flex; gap: 14px; flex-wrap: wrap; }

/* Secondary, shorter hero used at the top of sub-pages (e.g. WoW Forever) —
   same background/typography language as the main hero, smaller. */
.hero-sub{ min-height: 32vh; padding: 54px 6vw 64px; }
.hero-title-sm{ font-size: clamp(28px, 4.5vw, 46px); margin-bottom: 8px; }
.hero-sub .hero-desc{ margin-bottom: 0; }

.page-section{ display: block; }
.page-section.hidden{ display: none; }

/* ---------- Sections ---------- */
.section{ padding: 64px 6vw; max-width: 1600px; margin: 0 auto; }
/* Tighter gap between the intro card and the News section right below
   it on the Home page — other pages' section spacing is untouched. */
#introSection{ padding-bottom: 20px; }
#newsSection{ padding-top: 20px; }
.section-head{ margin-bottom: 28px; }
.section-head h2{ font-size: 27px; color: var(--gold-bright); margin: 0 0 6px; }
.section-sub{ color: var(--text-muted); font-size: 14px; margin: 0; }

.parchment{
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--parchment-grad-1) 0%, var(--parchment-grad-2) 55%, var(--parchment-grad-3) 100%);
  border: 1px solid var(--gold); border-radius: 12px;
  box-shadow: 0 0 0 1px rgba(var(--gold-bright-rgb),0.14) inset, 0 14px 36px rgba(0,0,0,0.4);
  padding: 40px; display: flex; gap: 40px; align-items: center; flex-wrap: wrap;
}
.parchment::before{
  content: ''; position: absolute; top: -60%; right: -8%; width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(var(--gold-bright-rgb),0.16), transparent 70%);
  pointer-events: none;
}
.parchment-eyebrow{ position: relative; font-size: 12px; letter-spacing: 3px; text-transform: uppercase; color: var(--teal-bright); margin: 0 0 10px; }
.parchment h2{ position: relative; font-size: 30px; margin: 0 0 14px; color: var(--gold-bright); }
.parchment p{ position: relative; color: var(--parchment-text); line-height: 1.75; max-width: 640px; margin: 0; flex: 1; min-width: 260px; }

/* News: a horizontally-scrolling carousel rather than a grid, so it can
   show a different number of cards at once depending on screen size —
   5 side by side on a wide screen, 3 on a smaller one, 1 on a phone —
   with arrow buttons to page through whatever doesn't fit. */
.news-carousel{ display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.news-carousel-track{
  flex: 1; display: flex; gap: 18px; overflow-x: auto; min-width: 0;
  scroll-snap-type: x mandatory; scroll-behavior: smooth; padding-bottom: 2px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.news-carousel-track::-webkit-scrollbar{ display: none; }
.news-carousel-arrow{
  flex: none; width: 36px; height: 36px; border-radius: 50%;
  background: var(--bg-panel-raised); border: 1px solid var(--border);
  color: var(--gold-bright); font-size: 18px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0;
  transition: border-color .15s ease, opacity .15s ease;
}
.news-carousel-arrow:hover{ border-color: var(--gold); }
.news-carousel-arrow:disabled{ opacity: 0.25; cursor: default; pointer-events: none; }
.news-card{
  background: var(--bg-panel); border: 1px solid var(--border-soft); border-radius: 8px; overflow: hidden;
  transition: transform .15s ease, border-color .15s ease;
  scroll-snap-align: start;
  flex: 0 0 calc((100% - 4 * 18px) / 5); /* 5 cards side by side by default */
  min-width: 0;
}
.news-card:hover{ transform: translateY(-3px); border-color: var(--gold); }
.news-card-link{ cursor: pointer; border-color: var(--gold); }
.news-card-placeholder{ border-style: dashed; opacity: 0.65; }
.news-card-placeholder:hover{ transform: none; border-color: var(--border-soft); }
.news-card-placeholder .news-thumb{ background: var(--bg-panel-raised); font-size: 26px; }
.news-card-placeholder .news-body p{ color: var(--text-faint); }
@media (max-width: 1150px){
  .news-card{ flex-basis: calc((100% - 2 * 18px) / 3); } /* 3 cards */
}
@media (max-width: 640px){
  .news-card{ flex-basis: 100%; } /* 1 card, arrows to page through the rest */
}
.news-thumb{
  position: relative;
  aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center;
  color: var(--text-faint); font-size: 11.5px; letter-spacing: 1px; text-transform: uppercase;
  background: linear-gradient(135deg, var(--news-thumb-grad-1), var(--news-thumb-grad-2));
  background-size: cover; background-position: center;
}
.news-badge{
  position: absolute; top: 8px; left: 8px;
  background: rgba(var(--topbar-bg-rgb),0.82); border: 1px solid var(--border-soft);
  color: var(--gold-bright); font-size: 10px; letter-spacing: .4px; text-transform: none;
  padding: 3px 8px; border-radius: 999px;
}
.news-body{ padding: 14px 16px; }
.news-body h3{ font-size: 15px; margin: 0 0 6px; color: var(--text); }
.news-body p{ font-size: 13px; color: var(--text-muted); line-height: 1.55; margin: 0; }

/* ---------- Voting card: a collapsible shell around one voting/survey.
   Every voting on the site (currently just WoW Forever) lives in one of
   these — a clickable header with a title + open/closed badge, and a
   body that collapses. Add a new voting later by duplicating this markup
   with a new id and reusing the same JS helpers (renderVotingChrome,
   toggleVotingCard, toggleVotingClosed). ---------- */
.voting-card{ border: 1px solid var(--fold-border); border-radius: 8px; margin-bottom: 20px; overflow: hidden; background: var(--fold-body-bg); }
.voting-card-header{
  width: 100%; display: flex; align-items: center; gap: 12px; padding: 16px 20px;
  background: var(--fold-head-bg); border: none; cursor: pointer; text-align: left;
}
.voting-card-header:hover{ background: var(--fold-head-hover); }
.voting-card-chevron{ flex: none; display: flex; color: var(--text-muted); transition: transform .15s ease; }
.voting-card.open .voting-card-chevron{ transform: rotate(90deg); }
.voting-card-chevron svg{ width: 14px; height: 14px; }
.voting-card-title{ flex: 1; font-family: 'Cinzel', serif; font-size: 15.5px; font-weight: 600; letter-spacing: .5px; color: var(--text); }
html.theme-horde .voting-card-title{ color: var(--gold-bright); }
.voting-status-badge{
  flex: none; font-family: 'Karla', sans-serif; font-size: 10.5px; font-weight: 700; letter-spacing: .6px;
  text-transform: uppercase; padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--teal-bright); color: var(--teal-bright);
}
.voting-status-badge.closed{ border-color: var(--danger-bright); color: var(--danger-bright); }
.voting-card-body{ padding: 20px; }
.voting-card-body.hidden{ display: none; }
.voting-admin-controls{
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 10px 14px; margin-bottom: 18px; border: 1px dashed var(--border); border-radius: 6px;
}
.voting-admin-controls .lootlib-note{ padding: 0; }
.voting-admin-controls-actions{ display: flex; align-items: center; gap: 10px; }
.voting-closed-note{
  font-size: 13px; color: var(--danger-bright); background: rgba(181,73,63,0.12);
  border: 1px solid var(--danger); border-radius: 6px; padding: 10px 14px; margin-bottom: 18px;
}
.voting-disabled{ opacity: .5; pointer-events: none; }

/* ---------- Announcements — reuse the same .voting-card collapsible
   shell (see above); only the header content and body differ. ---------- */
.announce-card-title{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.announce-card-meta{ flex: none; font-size: 11.5px; color: var(--text-faint); white-space: nowrap; }
.announce-card-meta .announce-edited-tag{ font-style: italic; opacity: .8; }
.announce-card-text{ font-size: 14px; line-height: 1.6; color: var(--text); margin: 0 0 14px; }
.announce-card-text h1{ font-family: 'Cinzel', serif; font-size: 22px; color: var(--gold-bright); margin: 4px 0 10px; line-height: 1.3; }
.announce-card-text h2{ font-family: 'Cinzel', serif; font-size: 17px; color: var(--gold-bright); margin: 4px 0 8px; line-height: 1.3; }
.announce-card-text p{ margin: 0 0 10px; }
.announce-card-text ul{ margin: 0 0 10px; padding-left: 22px; }
.announce-card-text li{ margin-bottom: 4px; }

.announce-title-input{
  font-family: 'Cinzel', serif; font-size: 15.5px; font-weight: 600; letter-spacing: .3px;
  padding: 9px 12px; margin-bottom: 10px; background: var(--bg-panel-raised);
  color: var(--text); border: 1px solid var(--border); border-radius: 6px; width: 100%;
}
.announce-title-input:focus{ outline: none; border-color: var(--gold); }
.announce-title-input::placeholder{ color: var(--text-faint); font-weight: 400; }

/* Rich-text editor: a contenteditable div standing in for a textarea, plus
   a small formatting toolbar above it. Reused for both the "new
   announcement" composer and inline per-card editing. */
.announce-toolbar{
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px;
  padding: 6px; margin-bottom: 8px; background: var(--bg-panel-raised);
  border: 1px solid var(--border); border-radius: 6px;
}
.announce-toolbar button{
  min-width: 30px; height: 28px; padding: 0 8px; font-size: 13px; font-family: 'Karla', sans-serif;
  background: transparent; border: 1px solid transparent; border-radius: 4px;
  color: var(--text-muted); cursor: pointer;
}
.announce-toolbar button:hover{ color: var(--text); background: rgba(255,255,255,0.06); border-color: var(--border); }
.announce-toolbar-sep{ width: 1px; height: 20px; background: var(--border); margin: 0 2px; }
.announce-toolbar select{
  width: auto; padding: 5px 8px; font-size: 12.5px; height: 28px;
  background: var(--field-bg); border: 1px solid var(--border); border-radius: 4px; color: var(--text-muted);
}
.announce-editor{
  width: 100%; min-height: 96px; max-height: 340px; overflow-y: auto; resize: vertical;
  padding: 10px 12px; font-size: 13.5px; line-height: 1.6;
  font-family: 'Karla', sans-serif; background: var(--bg-panel-raised); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px; margin-bottom: 12px;
}
.announce-editor:focus{ outline: none; border-color: var(--gold); }
.announce-editor:empty::before{ content: attr(data-placeholder); color: var(--text-faint); }
.announce-editor h1{ font-family: 'Cinzel', serif; font-size: 22px; color: var(--gold-bright); margin: 4px 0 10px; }
.announce-editor h2{ font-family: 'Cinzel', serif; font-size: 17px; color: var(--gold-bright); margin: 4px 0 8px; }
.announce-editor h3{ font-family: 'Cinzel', serif; font-size: 14px; color: var(--gold-bright); margin: 4px 0 8px; }
.announce-editor p{ margin: 0 0 10px; }
/* A pasted table keeps its grid instead of rendering borderless — same
   table styling used for the read-only view (Announcements, Class Deep
   Dives), so what Officers see while editing matches what gets saved. */
.announce-editor table{ border-collapse: collapse; width: 100%; margin: 8px 0; font-size: 13px; }
.announce-editor th, .announce-editor td{ border: 1px solid var(--border-soft); padding: 6px 9px; text-align: left; vertical-align: top; }
.announce-editor th{ background: var(--bg-panel-raised); color: var(--gold-bright); font-weight: 700; }
.announce-card-edit-actions{ display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }

/* ---------- WoW Forever survey ---------- */
.tac-card{ background: var(--bg-panel); border: 1px solid var(--border-soft); border-radius: 8px; padding: 20px 22px; margin-bottom: 18px; }
.tac-card-title{ font-family: 'Cinzel', serif; font-size: 15px; color: var(--gold-bright); font-weight: 600; margin-bottom: 6px; }
.tac-card-note{ font-size: 12.5px; color: var(--text-faint); margin-bottom: 14px; line-height: 1.55; }
.lootlib-note{ font-size: 12px; color: var(--text-faint); padding: 2px 0 10px; line-height: 1.5; }

.armory-status{ font-size: 12px; color: var(--text-faint); }
.armory-status-ok{ color: #3fd956; }
.armory-status-error{ color: var(--danger-bright); }

.forever-gate{ background: var(--bg-panel); border: 1px dashed var(--border); border-radius: 8px; padding: 36px; text-align: center; }
.forever-gate p{ color: var(--text-muted); margin: 0 0 16px; font-size: 14px; }
.discord-login-error{ min-height: 16px; font-size: 12.5px; color: var(--danger-bright); margin-bottom: 6px; }

.forever-class-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; margin-top: 12px; }
.forever-class-card{
  border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px;
  display: flex; flex-direction: column; gap: 8px; cursor: pointer;
  transition: border-color .15s, background .15s;
  background: rgba(255,255,255,0.02);
}
.forever-class-card:hover{ border-color: var(--gold); }
.forever-class-card.picked{ border-color: var(--gold-bright); background: rgba(240, 207, 107, 0.1); }
.forever-class-card.disabled{ opacity: .4; cursor: not-allowed; }
.forever-class-name{ font-weight: 600; display: flex; align-items: center; gap: 6px; }
.forever-class-dot{ width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.forever-class-card select{ width: 100%; padding: 5px 6px; font-size: 13px; }
.forever-role-rows{ display: flex; flex-direction: column; gap: 10px; }
/* Each row stacks its "Charakter N" label above the select, rather than
   squeezing both onto one line — with the label inline, the select had
   so little width left in a narrow card that the chosen spec text (e.g.
   "Beast Mastery", "Feral Combat") was clipped and unreadable. */
.forever-role-row{ display: flex; flex-direction: column; gap: 4px; }
.forever-role-controls{ display: flex; align-items: center; gap: 6px; }
.forever-role-controls select{ flex: 1; min-width: 0; font-size: 14px; padding: 7px 8px; }
.forever-role-charlabel{ flex: none; font-size: 11px; color: var(--text-faint); white-space: nowrap; }
.forever-role-remove{
  flex: none; background: none; border: none; color: var(--text-faint);
  cursor: pointer; font-size: 14px; line-height: 1; padding: 4px;
}
.forever-role-remove:hover{ color: var(--danger-bright); }
.forever-add-role-btn{
  width: 100%; margin-top: 2px; padding: 6px 8px; font-size: 11.5px; font-weight: 600;
  font-family: 'Karla', sans-serif; color: var(--gold-bright); background: rgba(var(--gold-bright-rgb),0.08);
  border: 1px dashed var(--gold); border-radius: 5px; cursor: pointer;
}
.forever-add-role-btn:hover{ background: rgba(var(--gold-bright-rgb),0.16); }
.forever-my-picks{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.forever-pick-chip{
  display: flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px;
  border: 1px solid var(--border); font-size: 13px;
}
.forever-pick-chip button{ background: none; border: none; color: var(--text-faint); cursor: pointer; font-size: 14px; line-height: 1; padding: 0; }
.forever-pick-chip button:hover{ color: var(--danger-bright); }
.forever-pick-chip-first{ box-shadow: 0 0 0 1px var(--gold) inset; }
.forever-pick-charnum{ color: var(--text-faint); font-weight: 400; }
.forever-firstpick-hint{ flex-basis: 100%; font-size: 12px; color: var(--text-muted); margin-bottom: 2px; }
.forever-firstpick-label{ display: flex; align-items: center; gap: 3px; font-size: 11px; color: var(--text-muted); white-space: nowrap; cursor: pointer; }
.forever-firstpick-label input{ margin: 0; }
.forever-firstpick-badge{ font-size: 11px; color: var(--gold-bright); white-space: nowrap; }
.forever-actions{ display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.forever-officer-table-wrap{ overflow-x: auto; }
.forever-officer-table{ width: 100%; border-collapse: collapse; font-size: 12.5px; }
.forever-officer-table th{ text-align: left; padding: 6px 10px; color: var(--gold-bright); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.forever-officer-table td{ padding: 8px 10px; border-bottom: 1px solid var(--border-soft); vertical-align: top; }
.forever-officer-table tbody tr:last-child td{ border-bottom: none; }
.forever-officer-table tbody tr:hover td{ background: rgba(var(--gold-bright-rgb),0.05); }
.forever-officer-table th[data-k]{ cursor: pointer; user-select: none; }
.forever-officer-table th[data-k]:hover{ color: var(--text); }
.forever-officer-table th[aria-sort="ascending"]::after{ content: " ▲"; font-size: 9px; }
.forever-officer-table th[aria-sort="descending"]::after{ content: " ▼"; font-size: 9px; }
/* First/Second Char cells — the class icon + the spec/talent-tree icon
   (same ones used on the chart above), with the class+spec text itself
   set in the class's own color instead of a separate color dot next to
   it. The earlier class-color dot and the Tank/Healer/Damage role dot
   were both dropped — the icons plus the colored text now carry all of
   that at a glance, so the dots were redundant. */
.forever-pick-cell{ display: inline-flex; align-items: center; gap: 6px; }
.forever-pick-icon{ width: 20px; height: 20px; flex-shrink: 0; }
/* When the table is sorted by First/Second Char, identical-class rows
   already sort next to each other alphabetically — this just makes that
   grouping visible, so the eye can jump straight to "where does the
   next class start" instead of reading every row. Only applied when
   sorted by one of those two columns (renderForeverOfficerTable decides
   that); sorting by Mitglied interleaves classes, so grouping wouldn't
   mean anything there. */
.forever-officer-table tr.forever-officer-group-start td{
  border-top: 2px solid rgba(var(--gold-bright-rgb),0.4);
  padding-top: 13px;
}
/* Class/spec survey overview — a grouped vertical-bar chart (one column
   per class, one bar per spec within it), closer to a glance-able "race
   chart" than the old per-spec text rows: every bar's height is scaled
   against the single largest spec count anywhere in the data
   (forever-ov-chart's --max-count custom property isn't used directly —
   see renderForeverOverview()'s heightPct math — this comment just
   documents the intent), so the tallest bar on the whole chart is always
   full height and everything else reads relative to it at a glance. Bars
   are colored by ROLE (tank/healer/damage), not by class or spec, via
   FOREVER_ROLE_COLORS — same legend as before. Raw vote counts are
   printed above each bar instead of percentages (easier to read at a
   glance, and matches how the rest of the page reports poll results).
   Each bar is still the click target for showVoteDetailsModal (who
   picked it), same as the old row version. */
.forever-ov-chart-wrap{ overflow-x: auto; padding-bottom: 4px; }
/* justify-content:space-between spreads the class columns across the
   card's full width instead of packing them to the left — at wide
   viewports the tightened column widths (see below) leave slack space,
   and without this the chart looked like it was missing content on the
   right. flex-wrap stays on as a fallback for narrow windows where even
   evenly-spread columns wouldn't fit on one line. */
.forever-ov-chart{ display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; width: 100%; min-width: min-content; padding: 4px 2px 0; flex-wrap: wrap; }
.forever-ov-class-col{ display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.forever-ov-bars{ display: flex; align-items: flex-end; gap: 3px; height: 140px; }
.forever-ov-bar-col{
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  height: 100%; width: 24px; cursor: pointer; border-radius: 4px 4px 0 0; padding-top: 2px;
}
.forever-ov-bar-col:hover{ background: rgba(255,255,255,0.05); }
.forever-ov-bar-count{ font-size: 11px; font-weight: 600; color: var(--text-muted); margin-bottom: 4px; white-space: nowrap; }
.forever-ov-bar{ width: 100%; min-height: 3px; border-radius: 3px 3px 0 0; transition: height 0.25s ease; }
/* A real, chunky talent icon per bar, directly underneath it — this row
   sits OUTSIDE .forever-ov-bars on purpose (a sibling, not nested
   inside a bar-col) so it never gets caught up in the bars' own height
   scaling; it just needs to line up column-for-column with the bars
   above it, which matching width+gap values (34px / 6px, same as
   .forever-ov-bar-col) takes care of. This is what makes classes with
   several specs in the same role (e.g. two DPS specs) instantly tell-
   apart-able — the bar color alone can't do that since same-role bars
   share a color. Sized and framed to actually look like a WoW ability
   icon (a bordered square with a warm bronze "ring" and a drop shadow,
   not a plain flat thumbnail) rather than a generic small avatar — at
   18px that framing was barely visible, so this and the class icon
   below both went up to a size where the frame and the art read
   clearly, using Wowhead's 'large' (56×56) source instead of 'medium'
   to stay sharp at that size. */
.forever-ov-spec-icons{ display: flex; gap: 3px; margin-top: 6px; }
.forever-ov-spec-icon-wrap{ width: 24px; display: flex; justify-content: center; cursor: pointer; }
.wow-icon-frame{
  border-radius: 4px; display: block; border: 1px solid #000;
  box-shadow: 0 0 0 1px rgba(201,162,97,0.85), 0 1px 3px rgba(0,0,0,0.55);
}
.forever-ov-spec-icon{ width: 22px; height: 22px; }
.forever-ov-spec-icon-wrap:hover .forever-ov-spec-icon{ box-shadow: 0 0 0 1px var(--gold-bright), 0 0 6px rgba(var(--gold-bright-rgb),0.6); }
.forever-ov-baseline{ width: 100%; height: 1px; background: var(--border); margin-top: 7px; }
/* Class icon (also from TALENT_DATA/Wowhead, same as above) to the left
   of the class name, with the name itself set in the class's own color
   instead of the page's default text color — ties the footer visually
   to both the bars above (role colors) and the rest of the page (class
   colors are used the same way in the officer table, picker, etc). */
.forever-ov-class-foot{ display: flex; align-items: center; gap: 5px; margin-top: 9px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.forever-ov-class-icon{ width: 20px; height: 20px; flex-shrink: 0; }
.forever-ov-class-total{ font-size: 10.5px; color: var(--text-faint); margin-top: 2px; }
.forever-ov-legend-count{ color: var(--text); font-weight: 700; margin-left: 2px; }
.forever-ov-filter{ display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.forever-ov-legend{ display: flex; gap: 14px; margin-bottom: 14px; font-size: 12px; color: var(--text-faint); flex-wrap: wrap; }
.forever-ov-legend-item{ display: flex; align-items: center; gap: 5px; }
.forever-ov-legend-dot{ width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
@media (max-width: 640px){
  .forever-ov-chart{ gap: 8px; }
  .forever-ov-bars{ height: 110px; }
  .forever-ov-bar-col{ width: 20px; }
  .forever-ov-spec-icon-wrap{ width: 20px; }
  .forever-ov-spec-icon{ width: 18px; height: 18px; }
  .forever-ov-class-icon{ width: 18px; height: 18px; }
  .forever-ov-class-foot{ font-size: 10.5px; }
}

/* ---------- Custom polls — a generic Offi-built voting tool (separate
   from the hard-coded WoW Forever class/spec survey above). Reuses the
   .voting-card / .tac-card shells. ---------- */
.poll-option-input-row{ display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.poll-option-input-row input[type="text"]{ flex: 1; }
/* Poll option and duration inputs: same look as the other text fields. */
.poll-option-input-row input[type="text"], .poll-config-field input[type="number"]{
  font-family: 'Karla', sans-serif; font-size: 13.5px; padding: 7px 10px;
  background: var(--field-bg); border: 1px solid var(--border); border-radius: 4px; color: var(--text);
}
.poll-option-input-row input[type="text"]:focus, .poll-config-field input[type="number"]:focus{ outline: none; border-color: var(--gold); }
.poll-option-input-row input[type="text"]::placeholder{ color: var(--text-faint); }
.poll-option-remove-btn{
  flex: none; width: 30px; height: 30px; padding: 0; font-size: 14px; line-height: 1;
  background: transparent; border: 1px solid var(--border); border-radius: 4px;
  color: var(--text-faint); cursor: pointer;
}
.poll-option-remove-btn:hover{ color: var(--danger-bright); border-color: var(--danger); }
.poll-add-option-btn{
  margin: 2px 0 14px; padding: 6px 10px; font-size: 12px; font-weight: 600; font-family: 'Karla', sans-serif;
  color: var(--gold-bright); background: rgba(var(--gold-bright-rgb),0.08); border: 1px dashed var(--gold);
  border-radius: 5px; cursor: pointer;
}
.poll-add-option-btn:hover{ background: rgba(var(--gold-bright-rgb),0.16); }
.poll-config-grid{ display: flex; flex-wrap: wrap; gap: 20px 28px; margin: 14px 0 16px; }
.poll-config-field{ display: flex; flex-direction: column; gap: 6px; }
.poll-config-field-label{ font-size: 11.5px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .4px; }
.poll-config-field input[type="number"]{ width: 90px; }
.poll-radio-group{ display: flex; gap: 16px; }
.poll-radio-option{ display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text); cursor: pointer; }
.poll-checkbox-field{ display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); cursor: pointer; }

.poll-card-meta-line{ font-size: 12px; color: var(--text-faint); margin-bottom: 14px; }
.poll-options-list{ display: flex; flex-direction: column; }
.poll-option-row{ display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border-soft); }
.poll-option-row:last-child{ border-bottom: none; }
.poll-option-control{ flex: none; width: 17px; height: 17px; accent-color: var(--gold-bright); cursor: pointer; }
.poll-option-control:disabled{ cursor: not-allowed; }
.poll-option-label{ flex: 0 1 200px; font-size: 13.5px; color: var(--text); }
.poll-option-bar-wrap{ flex: 1; min-width: 100px; display: flex; align-items: center; gap: 10px; cursor: pointer; }
.poll-option-bar-wrap:hover .poll-option-bar-track{ box-shadow: 0 0 0 1px var(--gold); }
.poll-option-bar-track{ flex: 1; height: 14px; border-radius: 4px; background: rgba(255,255,255,0.05); overflow: hidden; }
.poll-option-bar-fill{ height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--gold), var(--gold-bright)); }
.poll-option-count{ flex: none; min-width: 78px; text-align: right; font-size: 11.5px; color: var(--text-faint); }
.poll-hidden-results-note{ font-size: 12px; color: var(--text-faint); font-style: italic; margin-top: 10px; }
.poll-voters-note{ font-size: 11.5px; color: var(--text-faint); margin-top: 10px; line-height: 1.5; }

/* ---------- Setup screens (shown only until the admin configures Firebase/Discord/Worker) ---------- */
.setup-wrap{ max-width: 720px; margin: 60px auto; padding: 0 6vw; }
.setup-screen{ background: var(--bg-panel); border: 1px solid var(--gold); border-radius: 6px; padding: 24px 26px; margin-bottom: 22px; }
.setup-screen h2{ color: var(--gold-bright); margin: 0 0 10px; font-size: 19px; }
.setup-screen p{ font-size: 13.5px; color: var(--text-muted); line-height: 1.6; margin: 0 0 12px; }
.setup-screen ol{ margin: 0 0 14px; padding-left: 20px; }
.setup-screen li{ font-size: 13.5px; color: var(--text); line-height: 1.7; margin-bottom: 4px; }
.setup-screen code{ background: var(--field-bg); border: 1px solid var(--border); border-radius: 3px; padding: 1px 5px; font-size: 12.5px; color: var(--gold-bright); }
.setup-screen a{ color: var(--gold-bright); }
.setup-note{ font-size: 12px !important; color: var(--text-faint) !important; border-top: 1px solid var(--border-soft); padding-top: 10px; }

/* ---------- Footer ---------- */
.footer{ padding: 30px 6vw 50px; text-align: center; color: var(--text-faint); font-size: 12px; border-top: 1px solid var(--border-soft); }
.footer .save-status{ margin-top: 8px; min-height: 14px; }

/* ---------- Talent Builder ---------- */
.talent-class-selector{ display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.talent-class-btn{
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-panel); border: 1px solid var(--border-soft); border-radius: 999px;
  padding: 6px 14px 6px 6px; cursor: pointer; color: var(--text-muted); font-size: 13px; font-weight: 600;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.talent-class-btn img{ width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--border); display: block; }
.talent-class-btn:hover{ border-color: var(--class-color, var(--gold)); color: var(--text); }
.talent-class-btn.active{
  border-color: var(--class-color, var(--gold)); color: var(--text);
  background: var(--bg-panel-raised);
  box-shadow: 0 0 0 1px var(--class-color, var(--gold)) inset;
}
.talent-controls{
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px;
  background: var(--bg-panel); border: 1px solid var(--border-soft); border-radius: 8px;
  padding: 14px 18px; margin-bottom: 24px;
}
.talent-level-control{ display: flex; align-items: center; gap: 12px; flex: 1 1 220px; min-width: 200px; }
.talent-level-control label{ font-size: 13px; color: var(--text-muted); white-space: nowrap; min-width: 62px; }
.talent-level-control input[type="range"]{ flex: 1; accent-color: var(--gold); }
.talent-points-remaining{ font-size: 13.5px; font-weight: 600; color: var(--teal-bright); white-space: nowrap; }
.talent-points-remaining.talent-points-empty{ color: var(--gold-bright); }
.talent-trees-container{
  display: flex; flex-wrap: wrap; gap: 22px; justify-content: center;
  overflow-x: auto; padding-bottom: 6px;
}
.talent-tree-card{
  background: var(--bg-panel); border: 1px solid var(--border-soft); border-radius: 8px;
  padding: 16px; flex: 0 0 auto;
}
.talent-tree-head{ display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.talent-tree-icon{ width: 36px; height: 36px; border-radius: 6px; border: 1px solid var(--border); }
.talent-tree-head h3{ font-size: 15px; margin: 0; color: var(--gold-bright); }
.talent-tree-points{ font-size: 11.5px; color: var(--text-faint); }
.talent-reset-btn{ margin-left: auto; }
.talent-tree-grid{ position: relative; }
.talent-connectors{ position: absolute; top: 0; left: 0; pointer-events: none; }
.talent-connector{ fill: none; stroke: var(--border); stroke-width: 2; }
.talent-connector.active{ stroke: var(--gold); }
.talent-node{
  position: absolute; border-radius: 6px; border: 2px solid var(--border);
  background: var(--bg-deep); padding: 0; cursor: pointer; overflow: hidden;
  transition: border-color .15s ease, filter .15s ease, opacity .15s ease;
}
.talent-node img{ width: 100%; height: 100%; display: block; object-fit: cover; }
.talent-node.locked{ opacity: 0.35; filter: grayscale(1); cursor: default; }
.talent-node.has-points{ border-color: var(--gold); }
.talent-node.maxed{ border-color: var(--gold-bright); box-shadow: 0 0 8px rgba(var(--gold-bright-rgb),0.5); }
.talent-node.can-add:not(.has-points):hover{ border-color: var(--teal-bright); }
.talent-rank-pip{
  position: absolute; right: 2px; bottom: 1px; font-size: 10.5px; font-weight: 700;
  color: var(--text); background: rgba(var(--topbar-bg-rgb),0.85); border-radius: 3px; padding: 0 3px; line-height: 1.4;
}
.talent-attribution{ font-size: 11.5px; color: var(--text-faint); margin-top: 22px; text-align: center; line-height: 1.6; }
.talent-attribution a{ color: var(--gold-bright); }
.talent-tooltip{
  position: fixed; z-index: 200; max-width: 280px;
  background: var(--bg-panel-raised); border: 1px solid var(--gold); border-radius: 6px;
  padding: 10px 12px; font-size: 12.5px; line-height: 1.5; color: var(--text);
  pointer-events: none; box-shadow: 0 8px 24px rgba(0,0,0,0.45);
}
.item-tooltip{
  position: fixed; z-index: 210; max-width: 320px; min-width: 200px;
  background: var(--tip-bg); border: 1px solid var(--tip-border); border-radius: 5px;
  padding: 8px 10px; font-size: 12.5px; line-height: 1.4; color: var(--tip-text);
  pointer-events: none; box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  font-family: Verdana, Arial, sans-serif;
}
.item-tip-name{ font-size: 14px; font-weight: 600; margin-bottom: 1px; }
.item-tip-row{ display: flex; justify-content: space-between; gap: 18px; }
.item-tip-green{ color: var(--tip-green); }
.item-tip-yellow{ color: var(--tip-yellow); }
.item-tip-grey{ color: var(--tip-grey); }
.item-tip-set{ margin-top: 8px; }
.item-tip-piece{ color: var(--tip-grey); padding-left: 10px; }
.item-tip-piece.owned{ color: var(--tip-yellow); opacity: .85; }
.item-tip-set + .item-tip-line{ margin-top: 6px; }
.item-tip-src{ margin-top: 6px; padding-top: 5px; border-top: 1px solid var(--tip-border); color: var(--tip-grey); font-size: 11.5px; }
.talent-tip-title{ color: var(--gold-bright); font-weight: 700; margin-bottom: 3px; }
.talent-tip-rank{ color: var(--text-muted); font-size: 11.5px; margin-bottom: 5px; }
.talent-tip-desc{ color: var(--text); }
.talent-tip-cost{ color: var(--teal-bright); font-size: 11px; margin-top: 6px; }
.talent-tip-req{ font-size: 11px; margin-top: 6px; color: var(--danger-bright); }
.talent-tip-req.ok{ color: var(--teal-bright); }
@media (max-width: 1150px){
  .talent-trees-container{ flex-wrap: nowrap; justify-content: flex-start; }
}

/* On a phone the sidebar is a slide-out drawer, not a permanent rail —
   collapsed means fully hidden (no 64px icon strip sitting over the
   page content), and expanded means a full-width-ish overlay panel with
   a dimmed backdrop behind it. Opened via the burger button in the
   topbar; picking a page (or tapping the backdrop) closes it again —
   see maybeAutoCloseSidebarOnMobile() in the script. */
.sidebar-backdrop{ display: none; }
@media (max-width: 760px){
  .sidebar{ position: fixed; top: 0; left: 0; bottom: 0; z-index: 70; box-shadow: 0 0 30px rgba(0,0,0,0.5); }
  .sidebar.collapsed{ width: 0; border-right: none; box-shadow: none; }
  .sidebar.collapsed .sidebar-inner-mini{ display: none; }
  .sidebar-backdrop{
    display: block; position: fixed; inset: 0; z-index: 65;
    background: rgba(0,0,0,0.5); opacity: 0; pointer-events: none;
    transition: opacity .2s ease;
  }
  .sidebar:not(.collapsed) ~ .sidebar-backdrop{ opacity: 1; pointer-events: auto; }
}
@media (max-width: 640px){
  .parchment{ padding: 26px; }
}

/* ---------- Talent Builder: sub-tabs (Talente/Zauberbuch/Rassen/…) ---------- */
.talent-subnav{ display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.talent-subtab-btn{
  background: var(--bg-panel); border: 1px solid var(--border-soft); border-radius: 999px;
  padding: 7px 16px; cursor: pointer; color: var(--text-muted); font-size: 13px; font-weight: 600;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.talent-subtab-btn:hover{ border-color: var(--teal-bright); color: var(--text); }
.talent-subtab-btn.active{
  border-color: var(--gold); color: var(--text); background: var(--bg-panel-raised);
  box-shadow: 0 0 0 1px var(--gold) inset;
}
.talent-subtab-hint{ font-size: 12.5px; color: var(--text-faint); margin: 0 0 16px; }

/* ---------- Spellbook ---------- */
.spellbook-section{ margin-bottom: 22px; }
.spellbook-section h3{ font-size: 14px; color: var(--gold-bright); margin: 0 0 10px; }
.spellbook-grid{ display: flex; flex-wrap: wrap; gap: 8px; }
.spellbook-entry{
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-panel); border: 1px solid var(--border-soft); border-radius: 6px;
  padding: 6px 10px 6px 6px; cursor: pointer; color: var(--text); font-size: 12.5px; text-align: left;
  transition: border-color .15s ease;
}
.spellbook-entry:hover{ border-color: var(--teal-bright); }
.spellbook-entry img{ width: 26px; height: 26px; border-radius: 4px; border: 1px solid var(--border); flex-shrink: 0; }
.spellbook-noicon{ width: 26px; height: 26px; border-radius: 4px; background: var(--bg-deep); flex-shrink: 0; }
.spellbook-rank-count{ font-size: 10.5px; color: var(--text-faint); }

/* ---------- Racials ---------- */
.racials-faction-toggle{ display: flex; gap: 8px; margin-bottom: 14px; }
.racials-faction-btn{
  background: var(--bg-panel); border: 1px solid var(--border-soft); border-radius: 999px;
  padding: 7px 18px; cursor: pointer; color: var(--text-muted); font-size: 13px; font-weight: 600;
}
.racials-faction-btn.active{ border-color: var(--gold); color: var(--text); background: var(--bg-panel-raised); }
.racials-race-selector{ display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.racials-race-btn{
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-panel); border: 1px solid var(--border-soft); border-radius: 999px;
  padding: 6px 14px 6px 6px; cursor: pointer; color: var(--text-muted); font-size: 13px; font-weight: 600;
}
.racials-race-btn img{ width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--border); }
.racials-race-btn.active{ border-color: var(--gold); color: var(--text); background: var(--bg-panel-raised); }
.racials-panel-head{ display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.racials-panel-head img{ width: 44px; height: 44px; border-radius: 8px; border: 1px solid var(--border); }
.racials-panel-head h3{ margin: 0; font-size: 16px; color: var(--gold-bright); }
.racials-panel-head span{ display: block; font-size: 11.5px; color: var(--text-faint); margin-top: 2px; }
.racials-note{ font-size: 12px; color: var(--text-faint); margin: 20px 0 8px; }

/* ---------- Ability/racial cards (shared: Klassenänderungen + Rassen) ---------- */
.ability-card-grid{ display: flex; flex-direction: column; gap: 10px; }
.ability-card{
  display: flex; gap: 12px; background: var(--bg-panel); border: 1px solid var(--border-soft);
  border-radius: 8px; padding: 12px 14px;
}
.ability-card img{ width: 34px; height: 34px; border-radius: 6px; border: 1px solid var(--border); flex-shrink: 0; }
.ability-card-body h4{ margin: 0 0 4px; font-size: 13.5px; color: var(--gold-bright); }
.ability-card-body p{ margin: 0; font-size: 12.5px; color: var(--text-muted); line-height: 1.5; }
.ability-card-empty{ font-size: 12.5px; color: var(--text-faint); padding: 8px 0; }

/* ---------- Legacy perk nodes: same grid as talents, distinct tint,
   plus a dimmed non-interactive state for unimplemented placeholders. ---------- */
.talent-node.legacy-placeholder{ opacity: 0.25; cursor: default; }
.talent-node.legacy-placeholder:hover{ border-color: var(--border); }

/* ---------- Recruiting / Bewerbung ---------- */
.recruit-teaser{
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  background: var(--bg-panel); border: 1px solid var(--border-soft); border-radius: 10px;
  padding: 28px 32px;
}
.recruit-teaser-text h2{ font-size: 22px; margin: 0 0 6px; color: var(--gold-bright); }
.recruit-teaser-text p{ margin: 0; color: var(--text-muted); font-size: 14px; max-width: 560px; }
.recruit-teaser > .btn{ flex: none; }
.recruit-need-label{ font-size: 12px; color: var(--text-faint); margin: 12px 0 6px; }
.recruit-need-badges{ display: flex; flex-wrap: wrap; gap: 8px; }
.recruit-need-badge{
  display: inline-flex; align-items: baseline; gap: 5px;
  background: var(--bg-panel-raised); border: 1px solid var(--border); border-radius: 999px;
  padding: 4px 12px; font-size: 12.5px; font-weight: 600; color: var(--need-color, var(--text));
}
.recruit-need-badge em{ font-style: normal; color: var(--text-muted); font-weight: 500; }
.recruit-need-badges-empty{ font-size: 13px; color: var(--text-faint); }

.apply-field-label{ display: block; font-size: 12.5px; color: var(--text-muted); margin: 14px 0 6px; }
.apply-field-label:first-of-type{ margin-top: 4px; }
.apply-textarea{ width: 100%; resize: vertical; }
.apply-text-input{
  font-family: 'Karla', sans-serif; font-size: 13.5px; padding: 8px 10px;
  background: var(--field-bg); border: 1px solid var(--border); border-radius: 4px;
  color: var(--text); width: 100%;
}
.apply-spec-checkboxes{ display: flex; flex-wrap: wrap; gap: 6px 16px; }
.apply-profession-grid{ margin: 4px 0 6px; }
.apply-profession-secondary-label{ font-size: 11.5px; color: var(--text-faint); margin: 10px 0 6px; }

.apply-class-picks{ display: flex; flex-direction: column; gap: 10px; margin: 4px 0 6px; }
.apply-class-pick-row{
  border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px;
  background: rgba(255,255,255,0.02);
}
.apply-class-pick-head{ display: flex; align-items: flex-end; gap: 8px; }
.apply-class-pick-head .poll-config-field{ flex: 1; min-width: 0; }
.apply-class-pick-remove{
  flex: none; width: 30px; height: 30px; padding: 0; font-size: 14px; line-height: 1;
  background: transparent; border: 1px solid var(--border); border-radius: 4px;
  color: var(--text-faint); cursor: pointer; margin-bottom: 1px;
}
.apply-class-pick-remove:hover{ color: var(--danger-bright); border-color: var(--danger-bright); }
.apply-class-pick-specs{ margin-top: 8px; }
.apply-add-class-btn{
  padding: 7px 12px; font-size: 12.5px; font-weight: 600;
  font-family: 'Karla', sans-serif; color: var(--gold-bright); background: rgba(var(--gold-bright-rgb),0.08);
  border: 1px dashed var(--gold); border-radius: 5px; cursor: pointer;
}
.apply-add-class-btn:hover{ background: rgba(var(--gold-bright-rgb),0.16); }
.apply-add-class-btn:disabled{ opacity: .4; cursor: not-allowed; }

/* ---- Bewerbung chat-bot flow ---- */
.apply-chat-card{ display: flex; flex-direction: column; }
.apply-chat-log{
  display: flex; flex-direction: column; gap: 8px; max-height: 420px;
  overflow-y: auto; margin-bottom: 4px; padding-right: 2px;
}
.apply-chat-bubble{
  max-width: 86%; padding: 8px 13px; border-radius: 12px; font-size: 13px;
  line-height: 1.5; word-break: break-word;
}
.apply-chat-bubble-bot{
  align-self: flex-start; background: var(--bg-panel-raised);
  border: 1px solid var(--border-soft); color: var(--text);
  border-bottom-left-radius: 3px;
}
.apply-chat-bubble-user{
  align-self: flex-end; background: rgba(var(--gold-bright-rgb),0.14);
  border: 1px solid rgba(var(--gold-bright-rgb),0.35); color: var(--gold-bright);
  font-weight: 600; border-bottom-right-radius: 3px; white-space: pre-wrap;
}
.apply-chat-composer{ display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.apply-chat-input-area{ display: flex; flex-direction: column; gap: 8px; }
.apply-chat-error{ font-size: 12px; color: var(--danger-bright); }
.apply-chat-actions{ display: flex; align-items: center; gap: 8px; }
.apply-chat-done{ display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.apply-chat-char-row{ display: flex; align-items: center; gap: 10px; }
.apply-chat-char-row-label{ min-width: 90px; font-weight: 700; font-size: 13px; flex: none; }
.apply-chat-prof-block{
  border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px;
  background: rgba(255,255,255,0.02);
}
.apply-chat-prof-block + .apply-chat-prof-block{ margin-top: 10px; }
.apply-chat-prof-head{ font-weight: 700; font-size: 13px; margin-bottom: 6px; }
.apply-chat-level-rows{ display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.apply-chat-level-row{ display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.apply-chat-level-label{ min-width: 110px; color: var(--text-muted); }
.apply-chat-level-input{ width: 56px; font-size: 12.5px; padding: 4px 6px; }
.apply-chat-level-max{ display: flex; align-items: center; gap: 4px; color: var(--text-muted); cursor: pointer; }
.application-class-picks-v2{ flex-direction: column; gap: 10px; }
.application-class-block{
  border: 1px solid var(--border-soft); border-radius: 8px; padding: 8px 10px;
  background: rgba(255,255,255,0.015);
}
.application-class-block .application-class-pick{ margin-bottom: 4px; }
.application-class-block p{ margin: 2px 0; }

.recruit-needs-grid{ display: flex; flex-direction: column; gap: 12px; margin: 4px 0 6px; }
.recruit-needs-row{ display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.recruit-needs-class{ min-width: 90px; font-weight: 700; font-size: 13px; flex: none; }
.recruit-needs-specs{ display: flex; flex-wrap: wrap; gap: 6px 16px; }

.application-card{
  background: var(--bg-panel-raised); border: 1px solid var(--border-soft); border-radius: 8px;
  padding: 14px 16px; margin-bottom: 12px;
  transition: opacity .15s ease;
}
/* In-progress (Wird bearbeitet / Gespräch geplant / Potenzieller
   Kandidat) — dimmed so it doesn't read as "needs attention" the same
   way an untouched Offen application does; full brightness on hover so
   it's still easy to read once you're actually looking at it. */
/* Offen — not picked up by anyone yet: lighter card, gold edge and a
   gold "Offen" badge so it stands out from the ones in progress. */
.application-card-open{
  background: linear-gradient(rgba(var(--gold-bright-rgb),0.07), rgba(var(--gold-bright-rgb),0.07)), var(--bg-panel-raised);
  border-color: rgba(var(--gold-bright-rgb),0.45); border-left: 4px solid var(--gold-bright);
  box-shadow: 0 0 14px rgba(var(--gold-bright-rgb),0.12);
}
.application-card-open .application-status-open{ color: var(--bg-panel); background: var(--gold-bright); border-color: var(--gold-bright); }
.application-card-inprogress{ opacity: .68; background: var(--bg-panel); }
.application-card-inprogress:hover, .application-card-inprogress:focus-within{ opacity: 1; }
/* Closed (Angenommen / Abgelehnt) — collapses to a single toggle row
   (status badge + "Applicant — Characters") so a growing pile of
   finished applications doesn't bury the ones still open; click to
   expand the full card back open. */
.application-card-closed{ padding: 0; opacity: .6; }
.application-card-closed:hover, .application-card-closed.is-expanded{ opacity: .9; }
.application-card-toggle{
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: none; border: none; cursor: pointer; text-align: left;
  padding: 10px 16px; color: var(--text-muted); font-size: 13px; font-family: inherit;
}
.application-card-toggle:hover{ color: var(--text); }
.application-card-toggle-title{ font-weight: 600; flex: 1; }
.application-card-toggle-arrow{ font-size: 10px; color: var(--text-faint); }
.application-card-closed .application-card-body{ display: none; padding: 0 16px 14px; }
.application-card-closed.is-expanded .application-card-body{ display: block; }
.application-card-head{ display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin-bottom: 8px; }
/* Review-status row — every application (v1 and v2 alike) gets one of
   these right under the head: a colored badge for the current status,
   the dropdown to change it, and (depending on the status) who claimed
   it or the scheduled interview date. Each status gets its own color so
   the applications list reads at a glance without opening every card. */
.application-status-row{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.application-status-badge{
  display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em;
  border-radius: 999px; padding: 2px 10px; border: 1px solid transparent;
}
.application-status-open{ color: var(--text-muted); background: var(--bg-panel-raised); border-color: var(--border); }
.application-status-claimed{ color: #7cc4ff; background: rgba(76,158,255,.14); border-color: rgba(76,158,255,.35); }
.application-status-interview{ color: #c9a0ff; background: rgba(154,92,255,.14); border-color: rgba(154,92,255,.35); }
.application-status-candidate{ color: var(--gold-bright); background: rgba(217,180,96,.14); border-color: rgba(217,180,96,.35); }
.application-status-accepted{ color: #7adf9c; background: rgba(74,200,120,.14); border-color: rgba(74,200,120,.35); }
.application-status-rejected{ color: #ff9b9b; background: rgba(224,80,80,.14); border-color: rgba(224,80,80,.35); }
.application-status-select{
  font-size: 12px; background: var(--bg-panel-raised); color: var(--text); border: 1px solid var(--border);
  border-radius: 6px; padding: 3px 6px;
}
.application-status-meta{ font-size: 12px; color: var(--text-muted); }
.application-status-date{
  font-size: 12px; background: var(--bg-panel-raised); color: var(--text); border: 1px solid var(--border);
  border-radius: 6px; padding: 2px 6px;
}
/* Recruiting-team-only notes field — deliberately understated (small,
   muted label) since it's a working scratchpad, not applicant content. */
.application-notes-row{ margin: 2px 0 10px; }
.application-notes-label{ display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .03em; color: var(--text-faint); margin-bottom: 3px; }
.application-notes-input{
  width: 100%; resize: vertical; font-family: inherit; font-size: 12.5px; line-height: 1.4;
  background: var(--bg-panel); color: var(--text); border: 1px solid var(--border); border-radius: 6px;
  padding: 6px 8px;
}
/* Brief highlight flash for a #recruit?app=<id> deep link (from a
   Discord notification) landing on one specific application. */
.application-card-highlight{ animation: applicationCardFlash 2.6s ease-out; }
@keyframes applicationCardFlash{
  0%   { box-shadow: 0 0 0 2px var(--gold-bright); }
  70%  { box-shadow: 0 0 0 2px var(--gold-bright); }
  100% { box-shadow: 0 0 0 0 transparent; }
}
/* Class Deep Dives — one collapsed-by-default card per class. */
.classdive-card{ padding: 0; margin-bottom: 12px; overflow: hidden; }
html.theme-horde .classdive-card{ background: var(--fold-body-bg); border-color: var(--fold-border); }
.classdive-card-general{ border-color: var(--gold-bright); margin-bottom: 20px; }
.classdive-general-icon{ display: inline-flex; width: 22px; height: 22px; flex-shrink: 0; color: var(--gold-bright); }
.classdive-general-icon svg{ width: 100%; height: 100%; }
.classdive-toggle{
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: none; border: none; cursor: pointer; text-align: left;
  padding: 14px 16px; color: var(--text); font-family: inherit;
}
.classdive-toggle:hover{ background: var(--bg-panel); }
/* Horde: class cards share the fold look of Ankündigungen; titles in the accent red. */
html.theme-horde .classdive-toggle-title{ color: var(--gold-bright); }
html.theme-horde .classdive-toggle{ background: var(--fold-head-bg); }
html.theme-horde .classdive-toggle:hover{ background: var(--fold-head-hover); }
html.theme-horde .classdive-toggle-static:hover{ background: var(--fold-head-bg); }
.classdive-toggle-title{ font-weight: 700; font-size: 14px; }
.classdive-toggle-meta{ font-size: 11.5px; color: var(--text-faint); flex: 1; text-align: right; margin-right: 4px; }
.classdive-toggle-arrow{ font-size: 10px; color: var(--text-faint); flex-shrink: 0; }
.classdive-body{ padding: 0 16px 16px; }
.classdive-section{ margin-top: 10px; }
.classdive-section-head{ display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.classdive-section-title{ font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--gold-bright); margin-bottom: 6px; }
.classdive-section-head .classdive-section-title{ margin-bottom: 0; }
.classdive-summary-text{ font-size: 13.5px; line-height: 1.6; color: var(--text); }
.classdive-summary-edit{ min-height: 140px; }
.classdive-empty{ font-size: 13px; color: var(--text-faint); font-style: italic; margin: 2px 0; }
.classdive-updates{ display: flex; flex-direction: column; gap: 8px; }
.classdive-update{ background: var(--bg-panel); border: 1px solid var(--border-soft); border-radius: 6px; padding: 8px 10px; }
.classdive-update-head{ display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.classdive-update-date{ font-size: 11px; font-weight: 700; color: var(--text-muted); }
.classdive-update-delete{ padding: 0 4px; line-height: 1; min-height: auto; }
.classdive-update-text{ font-size: 13px; line-height: 1.5; color: var(--text); margin-top: 3px; }
.classdive-add-update{ margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border-soft); }
.classdive-add-update-date{
  font-size: 12px; background: var(--bg-panel); color: var(--text); border: 1px solid var(--border);
  border-radius: 6px; padding: 5px 6px; margin-bottom: 8px;
}
.classdive-add-update-text{ min-height: 56px; font-size: 12.5px; }
/* Rich-text content (summary + each update) can now include a pasted
   table — give it theme-consistent borders instead of the browser
   default so it actually reads as a table on our dark background. */
.classdive-summary-text table, .classdive-update-text table, .announce-card-text table{
  border-collapse: collapse; width: 100%; margin: 8px 0 14px; font-size: 13px;
}
.classdive-summary-text th, .classdive-summary-text td,
.classdive-update-text th, .classdive-update-text td,
.announce-card-text th, .announce-card-text td{
  border: 1px solid var(--border-soft); padding: 6px 9px; text-align: left; vertical-align: top;
}
.classdive-summary-text th, .classdive-update-text th, .announce-card-text th{
  background: var(--bg-panel-raised); color: var(--gold-bright); font-weight: 700;
}
.classdive-summary-text tr:nth-child(even) td, .announce-card-text tr:nth-child(even) td{ background: rgba(255,255,255,0.02); }
.classdive-summary-text h1, .classdive-summary-text h2, .classdive-summary-text h3{
  font-family: 'Cinzel', serif; color: var(--gold-bright); margin: 14px 0 8px;
}
.classdive-summary-text h1{ font-size: 20px; } .classdive-summary-text h2{ font-size: 16px; } .classdive-summary-text h3{ font-size: 14px; }
.classdive-summary-text p{ margin: 0 0 10px; }
.classdive-summary-text ul, .classdive-summary-text ol{ margin: 0 0 10px; padding-left: 22px; }
.classdive-spell-link{ color: var(--teal-bright); border-bottom: 1px dotted var(--teal-bright); cursor: help; }
/* Update-Historie + Quellen — always-expanded static cards pinned at
   the bottom of the page, same card shell as the per-class ones but no
   toggle/collapse behavior. */
.classdive-toggle-static{ cursor: default; }
.classdive-toggle-static:hover{ background: none; }
.classdive-history-wrap{ overflow-x: auto; }
.classdive-history-table{ border-collapse: collapse; width: 100%; font-size: 13px; }
.classdive-history-table th, .classdive-history-table td{
  border: 1px solid var(--border-soft); padding: 7px 10px; text-align: left; vertical-align: top;
}
.classdive-history-table th{ background: var(--bg-panel-raised); color: var(--gold-bright); font-weight: 700; white-space: nowrap; }
.classdive-history-table td:nth-child(1){ white-space: nowrap; color: var(--text-muted); }
.classdive-history-table td:nth-child(2){ white-space: nowrap; font-variant-numeric: tabular-nums; }
.classdive-history-table tr:nth-child(even) td{ background: rgba(255,255,255,0.02); }
.classdive-history-delete{ padding: 0 4px; line-height: 1; min-height: auto; }
.classdive-history-add{ margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border-soft); }
.classdive-history-add-row{ display: flex; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.classdive-history-add-date, .classdive-history-add-build{
  font-size: 12.5px; background: var(--bg-panel); color: var(--text); border: 1px solid var(--border);
  border-radius: 6px; padding: 6px 8px;
}
.classdive-history-add-date{ flex: 1; min-width: 140px; }
.classdive-history-add-build{ width: 120px; flex: none; }
.classdive-history-add-text{
  width: 100%; resize: vertical; font-family: inherit; font-size: 12.5px; line-height: 1.4;
  background: var(--bg-panel); color: var(--text); border: 1px solid var(--border); border-radius: 6px;
  padding: 6px 8px; margin-bottom: 8px;
}
.classdive-sources-list{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.classdive-source-item{
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: var(--bg-panel); border: 1px solid var(--border-soft); border-radius: 6px; padding: 8px 10px;
}
.classdive-source-item a{ color: var(--teal-bright); font-size: 13px; word-break: break-word; }
.classdive-source-delete{ padding: 0 4px; line-height: 1; min-height: auto; flex-shrink: 0; }
.classdive-source-add{ margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border-soft); display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start; }
.classdive-source-add-label, .classdive-source-add-url{
  font-size: 12.5px; background: var(--bg-panel); color: var(--text); border: 1px solid var(--border);
  border-radius: 6px; padding: 6px 8px; flex: 1; min-width: 180px;
}
.classdive-source-add .forever-actions{ width: 100%; }
@media (max-width: 640px){
  .classdive-toggle{ flex-wrap: wrap; }
  .classdive-toggle-meta{ text-align: left; width: 100%; order: 3; }
}
/* Class Deep Dives — left-hand category pre-filter (General + every
   class) plus a single-category main pane, replacing the old stacked
   "one collapsible card per class" layout. The sidebar is sticky on
   desktop so it stays in view while scrolling a long list of Patch-
   Update posts; it collapses into a horizontally-scrollable pill row
   above the main pane on narrow screens (see the media query below). */
.classdive-layout{ display: flex; align-items: flex-start; gap: 22px; margin-bottom: 18px; }
.classdive-sidebar{
  flex: 0 0 196px; display: flex; flex-direction: column; gap: 3px;
  /* Docks below the sticky topbar (~70 px), scrolls on its own when the
     window is shorter than the list. */
  position: sticky; top: 86px;
  max-height: calc(100vh - 102px); overflow-y: auto;
}
.classdive-filter-btn{
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: none; border: 1px solid transparent; border-radius: 7px;
  padding: 8px 10px; cursor: pointer; text-align: left; color: var(--text-muted);
  font-family: inherit; font-size: 13px; font-weight: 600;
}
.classdive-filter-btn:hover{ background: var(--bg-panel); color: var(--text); }
.classdive-filter-btn.active{
  background: var(--bg-panel-raised); border-color: var(--classdive-color, var(--gold-bright));
  color: var(--classdive-color, var(--gold-bright));
}
.classdive-filter-icon{ width: 18px; height: 18px; flex-shrink: 0; }
.classdive-filter-label{ flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.classdive-filter-count{
  flex-shrink: 0; font-size: 10.5px; font-weight: 700; color: var(--text-faint);
  background: var(--bg-panel); border: 1px solid var(--border-soft); border-radius: 999px;
  padding: 1px 6px; min-width: 18px; text-align: center;
}
.classdive-filter-btn.active .classdive-filter-count{ color: var(--classdive-color, var(--gold-bright)); border-color: currentColor; }
.classdive-main{ flex: 1 1 auto; min-width: 0; }
.classdive-main-head{ display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.classdive-main-head .classdive-filter-icon{ width: 26px; height: 26px; }
.classdive-main-title{ font-family: 'Cinzel', serif; font-size: 20px; margin: 0; }
.classdive-main-meta{ font-size: 11.5px; color: var(--text-faint); flex: 1; }
.classdive-summary-card .classdive-section-head{ display: flex; align-items: center; gap: 10px; margin-top: 0; }
.classdive-summary-card .classdive-section-head .classdive-section-title{ margin-bottom: 0; }
.classdive-summary-card .classdive-section-head .btn{ margin-left: auto; }
.classdive-updates-section{ margin-top: 4px; }
.classdive-updates{ display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
/* A single Patch-Update, forum-post style: a clickable header (title +
   date + expand arrow) and, collapsed, a short plain-text preview of
   the first few lines so you can tell what it's about before opening
   it — same idea as a forum thread list. The Deep Dive / Allgemeine
   Infos summary (classDiveSummaryCardHtml) reuses this exact same
   header/body/preview styling so it reads as the same kind of
   collapsible card, just pinned first. */
.classdive-post{ background: var(--bg-panel); border: 1px solid var(--border-soft); border-radius: 7px; overflow: hidden; }
.classdive-post.expanded{ border-color: var(--border); }
.classdive-post.classdive-summary-card{ margin-bottom: 16px; }
/* Noticeably lighter than the card body (var(--bg-panel-raised) instead
   of var(--bg-panel)) plus a gold title, so the clickable header reads
   as its own distinct bar — not just slightly-bolder text sitting in
   the same flat panel as everything below it. */
.classdive-post-head{
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 12px; cursor: pointer;
  background: var(--bg-panel-raised);
  border-bottom: 1px solid var(--border-soft);
}
.classdive-post-head:hover{ filter: brightness(1.15); }
.classdive-post-title{ font-weight: 700; font-size: 13.5px; color: var(--gold-bright); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.classdive-post-date{ font-size: 11px; font-weight: 700; color: var(--text-muted); flex-shrink: 0; }
.classdive-post-arrow{ font-size: 10px; color: var(--text-faint); flex-shrink: 0; }
.classdive-post-editbtn{ flex-shrink: 0; }
.classdive-post-preview{ padding: 10px 12px; cursor: pointer; }
.classdive-post-preview p{ font-size: 12.5px; line-height: 1.5; color: var(--text-muted); margin: 0 0 3px; }
.classdive-post-preview p:last-child{ margin-bottom: 0; }
.classdive-post-more{ color: var(--teal-bright) !important; font-weight: 600; }
.classdive-post-body{ padding: 12px; }
.classdive-post-actions{ display: flex; justify-content: flex-end; padding: 0 8px 8px; }
.classdive-add-update-row{ display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.classdive-add-update-row .classdive-add-update-date{ margin-bottom: 0; flex: 0 0 auto; }
.classdive-add-update-title{
  flex: 1; min-width: 180px; font-size: 12.5px; background: var(--bg-panel); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px; padding: 5px 8px;
}
@media (max-width: 760px){
  .classdive-layout{ flex-direction: column; gap: 14px; }
  .classdive-sidebar{
    position: static; flex: none; flex-direction: row; flex-wrap: nowrap; overflow-x: auto;
    width: 100%; gap: 6px; padding-bottom: 4px;
  }
  .classdive-filter-btn{ width: auto; flex-shrink: 0; }
  .classdive-filter-label{ white-space: nowrap; }
}
.application-class{ font-weight: 700; font-size: 13.5px; }
.application-specs{ font-size: 12.5px; color: var(--text-muted); }
.application-applicant{ font-size: 12.5px; color: var(--gold-bright); font-weight: 600; }
.application-date{ font-size: 11.5px; color: var(--text-faint); }
.application-card-head .btn{ margin-left: auto; }
.application-class-picks{ display: flex; flex-wrap: wrap; gap: 6px 10px; margin-bottom: 8px; }
.application-class-pick{
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--bg-panel-raised); border: 1px solid var(--border); border-radius: 999px;
  padding: 3px 10px;
}
/* Quick-glance summary bar at the top of a v2 (chat-form) application
   card — a handful of scannable stats plus the applied-for class icons,
   so an officer can judge the gist of an application before reading the
   full per-class detail blocks below it. */
.application-summary-row{
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
  background: var(--bg-panel-raised); border: 1px solid var(--border); border-radius: 10px;
  padding: 8px 12px; margin: 6px 0 10px;
}
.application-stat{ display: flex; flex-direction: column; gap: 1px; }
.application-stat-label{ font-size: 10.5px; text-transform: uppercase; letter-spacing: .03em; color: var(--text-faint); }
.application-stat-value{ font-size: 13px; color: var(--text); font-weight: 600; }
.application-summary-classchips{ display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.application-summary-classchip{
  display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600;
  background: var(--bg-panel); border: 1px solid var(--border); border-radius: 999px; padding: 2px 9px 2px 4px;
}
.application-reason, .application-remarks, .application-experience,
.application-logs, .application-professions, .application-namage{
  font-size: 13px; color: var(--text); line-height: 1.55; margin: 4px 0;
}
.application-reason strong, .application-remarks strong, .application-experience strong,
.application-logs strong, .application-professions strong, .application-namage strong{
  color: var(--text-muted); font-weight: 600;
}
.application-logs a, .application-remarks a, .application-experience a{
  color: var(--gold-bright); text-decoration: underline; word-break: break-all;
}
.application-logs a:hover, .application-remarks a:hover, .application-experience a:hover{ color: var(--gold); }
@media (max-width: 640px){
  .recruit-teaser{ flex-direction: column; align-items: flex-start; }
  .recruit-teaser > .btn{ width: 100%; }
}

/* ---------------------------------------------------------------------
   Design reveal — popup + burn transition
   ---------------------------------------------------------------------
   .design-reveal-modal is the one-time "unlock" prompt (see the "Design
   reveal" comment up by :root for the full picture — theme, localStorage
   key, the no-flash <head> script). .design-burn-overlay is the
   full-screen "the old page burns away top to bottom" transition that
   plays once its "Okay" button is clicked — see initDesignReveal() near
   the end of the main script for the show/hide timing and the ember-
   particle spawning (.design-burn-ember elements it creates and removes
   on the fly). Both sit above literally everything else on the page.
   Deliberately not using the --gold/--bg-* etc. tokens: the modal is
   always ember-colored regardless of which theme is currently active
   (it's foreshadowing the new one, not matching the old one), and the
   burn overlay paints the OLD theme's actual colors as fixed hex (not
   var()) on purpose — html.theme-horde gets added to the live page
   underneath it right as the burn starts, so if this used var() it would
   instantly show the new colors instead of "burning away" the old ones. */
.design-reveal-modal{
  position: fixed; inset: 0; z-index: 9000; background: rgba(4,2,1,0.78);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.design-reveal-card{
  position: relative; background: #170b08; border: 1px solid #a8431f; border-radius: 10px;
  padding: 32px 28px; max-width: 520px; width: 100%; max-height: 86vh; overflow-y: auto; text-align: center;
  box-shadow: 0 0 0 1px rgba(226,84,47,0.18) inset, 0 0 46px rgba(226,84,47,0.28), 0 20px 50px rgba(0,0,0,0.55);
}
.design-reveal-icon{
  width: 46px; height: 46px; margin: 0 auto 16px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffb27a, #e2542f 55%, #6b1f14 100%);
  box-shadow: 0 0 18px rgba(226,84,47,0.6);
}
.design-reveal-card h2{
  font-family: 'Cinzel', serif; font-size: 19px; margin: 0 0 12px; color: #f2a878; letter-spacing: .4px;
}
.design-reveal-card p{ font-size: 14px; color: #d9c4b4; line-height: 1.6; margin: 0 0 16px; text-align: left; }
.design-reveal-card p:first-of-type{ text-align: center; }
.design-reveal-card blockquote{
  margin: 0 0 16px; padding: 10px 14px; text-align: left; border-left: 3px solid #e2542f;
  background: rgba(226,84,47,0.08); border-radius: 0 6px 6px 0;
}
.design-reveal-card blockquote p{ margin: 0; font-style: italic; color: #f2cab0; }
.design-reveal-card blockquote cite{ display: block; margin-top: 4px; font-style: normal; font-size: 12px; color: #c99a7f; }
.design-reveal-card .btn{ margin-top: 6px; }
.design-reveal-card .btn{
  background: linear-gradient(180deg, #e2542f, #a8321a); color: #fff2e4; border: 1px solid #f2a878;
  padding: 11px 32px; font-size: 14.5px;
}
.design-reveal-card .btn:hover{ filter: brightness(1.08); }

.design-burn-overlay{
  position: fixed; inset: 0; z-index: 9500; overflow: hidden; pointer-events: none;
  display: none;
}
.design-burn-overlay.burning{ display: block; }
.design-burn-paper{
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 40% at 50% 0%, rgba(44,103,136,0.35), transparent 60%),
    linear-gradient(180deg, #08202f 0%, #0a2a3c 10%, #071b28 30%, #071b28 100%);
  clip-path: inset(0 0 0 0);
}
.design-burn-overlay.burning .design-burn-paper{
  animation: designBurnWipe 2.4s cubic-bezier(.45,0,.4,1) forwards;
}
@keyframes designBurnWipe{
  from{ clip-path: inset(0 0 0 0); }
  to{ clip-path: inset(100% 0 0 0); }
}
/* The glowing charred edge riding along the wipe — a soft band that
   fades from "still paper" through char into a bright ember line, so the
   cutoff reads as burning rather than a hard mechanical wipe. The
   designBurnFireDistort SVG filter (see markup near #designBurnOverlay)
   gives it a very slight organic wobble instead of a ruler-straight
   glow — kept subtle on purpose, a strong displacement on a thin band
   tears it into harsh blocky chunks instead of reading as fire. */
.design-burn-edge{
  position: absolute; left: 0; right: 0; top: 0; height: 34px; transform: translateY(-50%);
  background: linear-gradient(180deg,
    rgba(10,4,2,0) 0%,
    rgba(20,7,3,0.9) 38%,
    rgba(226,84,47,0.95) 66%,
    rgba(255,205,140,1) 100%);
  box-shadow: 0 0 26px 8px rgba(226,84,47,0.65), 0 0 60px 18px rgba(226,84,47,0.25);
  opacity: 0;
  /* filter: url(#designBurnFireDistort) is set in index.html's inline
     <style> — see the note there. */
}
.design-burn-overlay.burning .design-burn-edge{
  opacity: 1;
  animation: designBurnEdgeMove 2.4s cubic-bezier(.45,0,.4,1) forwards, designBurnFlicker .15s ease-in-out infinite alternate;
}
@keyframes designBurnEdgeMove{
  from{ top: 0%; }
  to{ top: 100%; }
}
/* @keyframes designBurnFlicker lives in index.html's inline <style>. */
/* A wide, soft haze riding along with the edge — the "glow of a horizon
   on fire" rather than a thin line. Big blur radius, low opacity, pure
   warm orange — this is what reads as ambient fire-light bouncing off
   smoke/air at a distance, filling in the gaps between individual
   flame tongues so the band feels continuous even where the tongues
   themselves don't overlap. */
.design-burn-haze{
  position: absolute; left: -10%; right: -10%; top: 0; height: 140px; transform: translateY(-60%);
  background: radial-gradient(ellipse 60% 100% at 50% 60%, rgba(255,140,55,0.55), transparent 72%);
  filter: blur(14px);
  opacity: 0;
}
.design-burn-overlay.burning .design-burn-haze{
  opacity: 1;
  animation: designBurnEdgeMove 2.4s cubic-bezier(.45,0,.4,1) forwards;
}

/* The "sea of flames" layer. Earlier versions built this out of
   discrete CSS flame-tongue divs (clip-path silhouettes, border-radius
   blobs, …) — however they were shaped, a finite number of
   independently-animated DOM shapes always reads as "a row of little
   flame icons", not real fire, because real fire has no individual
   tongues at all — it's one continuous turbulent mass. So this layer
   is a <canvas> (created and driven by startFireCanvas() in the main
   script) running an actual per-pixel fire simulation: a small
   low-resolution grid where the bottom row is a randomized-intensity
   "fire source" every frame, each pixel above inherits the intensity of
   a pixel below it (with a little horizontal jitter and random decay),
   and the resulting intensity grid is mapped through a black → red →
   orange → yellow → white → faint-blue palette (see buildFirePalette())
   — the same family of technique used for the classic "campfire"/"DOOM
   fire" effect. Rendered small (internal pixels, not CSS px) and then
   scaled up with the browser's own smoothing, which is what gives it
   the soft, licking, organic edges instead of a sprite look. The
   canvas's own top position is updated every frame in lockstep with
   the burn wipe, mix-blend-mode: screen so bright flame pixels light up
   the page underneath and near-black/low-alpha ones (the "smoke" end of
   the palette) stay unobtrusive instead of painting flat dark squares. */
.design-burn-flames{ position: absolute; inset: 0; mix-blend-mode: screen; }
.design-burn-fire-canvas{
  position: absolute; left: 0; width: 100%; height: 340px;
  transform: translateY(-78%);
  image-rendering: auto;
  /* The simulation only runs at ~160×72 internal pixels; blurring the
     scaled-up result is what turns that blocky grid into soft, licking
     tongues instead of a visible mosaic — belt-and-braces alongside the
     browser's own (bilinear) canvas upscaling. */
  filter: blur(3px) saturate(1.12);
}

/* Billowing smoke — slow, heavily-blurred dark puffs that drift upward
   off the flame line and dissolve. This is what separates "wildfire"
   from "clean fireplace": real fire this size throws up smoke, and the
   drifting dark haze reads as scale/danger even though it's only a
   handful of blurred circles. Sits above the flames (not screen-
   blended — a lightening blend would make dark smoke invisible) but
   below the embers, which should still read as bright sparks escaping
   through it. */
.design-burn-smoke{ position: absolute; inset: 0; }
.design-burn-smoke-puff{
  position: absolute; left: 0; top: 0; border-radius: 50%;
  background: radial-gradient(circle at 42% 38%, rgba(94,58,42,0.55), rgba(40,22,16,0.4) 55%, rgba(20,12,10,0) 78%);
  animation: designBurnSmokeRise 1.7s ease-out forwards;
}
@keyframes designBurnSmokeRise{
  0%{ transform: translateY(0) scale(.5); opacity: 0; }
  15%{ opacity: .65; }
  100%{ transform: translateY(-120px) scale(1.5); opacity: 0; }
}

.design-burn-embers{ position: absolute; inset: 0; }
.design-burn-ember{
  position: absolute; width: 4px; height: 4px; border-radius: 50%;
  background: #ffcf8c; box-shadow: 0 0 6px 2px rgba(255,150,60,0.9);
  animation: designBurnEmberRise .9s ease-out forwards;
}
@keyframes designBurnEmberRise{
  0%{ transform: translateY(0) scale(1); opacity: 1; }
  100%{ transform: translateY(-44px) scale(.3); opacity: 0; }
}
/* A wipe with no glow/embers/flames is still a perfectly readable
   transition, so reduced-motion gets an instant cut instead of a slow
   animated one. */
@media (prefers-reduced-motion: reduce){
  .design-burn-overlay.burning .design-burn-paper{ animation: none; clip-path: inset(100% 0 0 0); }
  .design-burn-overlay.burning .design-burn-edge{ display: none; }
  .design-burn-overlay.burning .design-burn-haze{ display: none; }
  .design-burn-flames{ display: none; }
  .design-burn-smoke{ display: none; }
}

/* Design switcher — lives in User Settings (#characterModal), admin-only
   for now (toggled in applyAccessControl()). A plain two-option segmented
   control rather than a checkbox/toggle-switch, since "which of two
   named designs" reads more clearly that way than on/off would. */
.settings-design-row{ margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--border-soft); }
.settings-design-badge{
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  background: rgba(var(--gold-bright-rgb),0.14); border: 1px solid var(--gold);
  color: var(--gold-bright); font-size: 10px; font-weight: 700; letter-spacing: .3px;
  text-transform: uppercase; vertical-align: middle;
}
.design-switcher{ display: flex; gap: 8px; }
.settings-design-retest-btn{ margin-top: 10px; }
.design-switcher-option{
  flex: 1; font-family: 'Karla', sans-serif; font-weight: 600; font-size: 13px;
  padding: 9px 10px; border-radius: 4px; border: 1px solid var(--border);
  background: var(--field-bg); color: var(--text-muted); cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.design-switcher-option:hover{ color: var(--text); border-color: var(--gold); }
.design-switcher-option.active{
  background: rgba(var(--gold-bright-rgb),0.14); border-color: var(--gold-bright); color: var(--gold-bright);
}

/* ---------- BiS-Planer (js/bis-planner.js) ---------- */
.bis-loading{ color: var(--text-muted); padding: 30px 0; text-align: center; }
.bis-controls{ display: flex; flex-wrap: wrap; gap: 16px 22px; align-items: flex-end; margin-bottom: 18px; }
.bis-control{ display: flex; flex-direction: column; gap: 6px; min-width: 150px; }
.bis-control > label{ font-size: 11.5px; letter-spacing: .5px; text-transform: uppercase; color: var(--text-muted); }
.bis-control > label strong{ color: var(--gold-bright); font-size: 13px; }
.bis-control-level{ flex: 1 1 200px; }
.bis-control-level input[type=range]{ width: 100%; accent-color: var(--gold); }
.bis-control-actions{ min-width: 0; margin-left: auto; }
.bis-class-row{ display: flex; flex-wrap: wrap; gap: 6px; }
.bis-class-row .talent-class-btn{ padding: 4px; }
.bis-layout{ display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 18px; align-items: start; }
.bis-side{ display: flex; flex-direction: column; gap: 18px; }
.bis-card-title{ font-family: 'Cinzel', serif; color: var(--gold-bright); font-size: 15px; margin: 0 0 12px; }
.bis-slot{ display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--border-soft); padding: 6px 0; }
.bis-slot:last-child{ border-bottom: none; }
.bis-slot-main{
  flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: 10px; text-align: left;
  background: none; border: 1px solid transparent; border-radius: 6px; padding: 6px; cursor: pointer; color: var(--text); font: inherit;
}
.bis-slot-main:hover:not(:disabled){ border-color: var(--border); background: var(--bg-panel-raised); }
.bis-slot-main:disabled{ cursor: default; opacity: .5; }
.bis-slot-done .bis-slot-main{ opacity: .55; }
.bis-slot-done .bis-item-name{ text-decoration: line-through; }
.bis-icon{ flex: none; border-radius: 4px; }
.bis-icon-empty{ display: inline-block; border: 1px dashed var(--border); background: var(--field-bg); }
.bis-slot-text{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bis-slot-label{ font-size: 11px; letter-spacing: .5px; text-transform: uppercase; color: var(--text-faint); }
.bis-item-name{ font-weight: 700; font-size: 14px; }
.bis-item-meta, .bis-item-stats{ font-size: 12px; color: var(--text-muted); }
.bis-item-src{ font-size: 12px; color: var(--teal-bright); }
.bis-item-src-none{ color: var(--text-faint); font-style: italic; }
.bis-slot-empty{ font-size: 13px; color: var(--text-faint); font-style: italic; }
.bis-done{ display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-muted); white-space: nowrap; cursor: pointer; }
.bis-stat-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 14px; }
.bis-stat{ display: flex; justify-content: space-between; gap: 8px; font-size: 13px; border-bottom: 1px dotted var(--border-soft); padding: 3px 0; }
.bis-stat span{ color: var(--text-muted); }
.bis-stat strong{ color: var(--text); }
.bis-est{ font-weight: 400; font-size: 11px; color: var(--text-faint); cursor: help; }
.bis-hint{ font-size: 12px; color: var(--text-faint); line-height: 1.5; margin: 12px 0 0; }
.bis-footnote{ text-align: center; margin-top: 18px; }
.bis-progress{ margin: 0 0 6px; font-size: 13px; color: var(--text-muted); }
.bis-progress-bar{ height: 6px; background: var(--field-bg); border-radius: 3px; overflow: hidden; margin-bottom: 10px; }
.bis-progress-bar span{ display: block; height: 100%; background: var(--gold); }
.bis-farm-group{ font-family: 'Cinzel', serif; font-size: 12.5px; color: var(--gold-bright); margin: 14px 0 6px; border-bottom: 1px solid var(--border-soft); padding-bottom: 3px; }
.bis-farm-list{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.bis-farm-list label{ display: flex; align-items: baseline; gap: 6px; cursor: pointer; }
.bis-farm-src{ font-size: 11.5px; color: var(--text-muted); margin: 2px 0 0 22px; line-height: 1.45; }
.bis-picker-card{ max-width: 720px; height: min(88vh, 900px); max-height: 88vh; display: flex; flex-direction: column; overflow: hidden; }
.bis-picker-filters{ display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin: 8px 0 10px; }
.bis-picker-filters input[type=search]{ flex: 1 1 220px; }
.bis-picker-filters select{ flex: 0 1 190px; width: auto; }
.bis-check{ display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--text-muted); cursor: pointer; }
.bis-picker-list{ overflow-y: auto; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 4px; }
.bis-pick-item{
  display: flex; align-items: flex-start; gap: 10px; text-align: left; width: 100%;
  background: none; border: 1px solid var(--border-soft); border-radius: 6px; padding: 7px; cursor: pointer; color: var(--text); font: inherit;
}
.bis-pick-item:hover{ border-color: var(--border); background: var(--bg-panel-raised); }
.bis-pick-item.active{ border-color: var(--gold); }
@media (max-width: 900px){
  .bis-layout{ grid-template-columns: 1fr; }
  .bis-control-actions{ margin-left: 0; }
}
.bis-item-src-wrong{ color: var(--danger-bright); }
.bis-profs .bis-prof{ border-bottom: 1px solid var(--border-soft); padding: 8px 0; font-size: 13px; }
.bis-profs .bis-prof:last-of-type{ border-bottom: none; }
.bis-prof-head{ display: flex; justify-content: space-between; gap: 8px; margin-bottom: 3px; }
.bis-prof-head span{ color: var(--gold-bright); font-weight: 700; }
.bis-prof-line{ font-size: 12px; color: var(--text-muted); line-height: 1.5; }
.bis-prof-buy{ color: var(--text-faint); }
.bis-mat-list{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 4px 14px; font-size: 13px; }
.bis-mat-list strong{ color: var(--gold-bright); }
.bis-combo{ position: relative; margin: 8px 0 0; }
.bis-combo-box{ display: flex; flex-wrap: wrap; align-items: center; gap: 5px; cursor: text; }
.bis-combo-box input{ flex: 1 1 160px; min-width: 120px; background: none; border: none; outline: none; color: var(--text); font: inherit; padding: 2px 0; }
.bis-combo-box:focus-within{ border-color: var(--gold); }
.bis-combo-chips{ display: contents; }
.bis-chip{ display: inline-flex; align-items: center; gap: 4px; background: var(--bg-panel-raised); border: 1px solid var(--gold); color: var(--gold-bright); border-radius: 999px; padding: 1px 4px 1px 9px; font-size: 12px; }
.bis-chip button{ background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 14px; line-height: 1; padding: 0 3px; }
.bis-chip button:hover{ color: var(--danger-bright); }
.bis-combo-list{ position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 5; max-height: 280px; overflow-y: auto; background: var(--bg-panel-raised); border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 8px 24px rgba(0,0,0,0.45); padding: 4px 0; }
.bis-combo-group{ font-size: 11px; letter-spacing: .5px; text-transform: uppercase; color: var(--text-faint); padding: 6px 12px 2px; }
.bis-combo-opt{ display: flex; align-items: center; gap: 8px; padding: 5px 12px; font-size: 13px; cursor: pointer; color: var(--text); }
.bis-combo-opt:hover{ background: var(--bg-panel); }
.bis-combo-opt.active{ color: var(--gold-bright); }
.bis-combo-check{ width: 14px; color: var(--gold-bright); text-align: center; }
.bis-setbar{ display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 18px; background: var(--bg-panel); border: 1px solid var(--border-soft); border-radius: 8px; padding: 14px 22px; margin-bottom: 18px; }
.bis-setbar .bis-control{ min-width: 200px; }
.bis-setbar-name{ flex: 1 1 220px; }
.bis-setbar-actions{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bis-setbar-actions .btn:disabled{ opacity: .45; cursor: default; }
.bis-setbar-status{ flex-basis: 100%; font-size: 12px; color: var(--text-muted); min-height: 0; }
.bis-setbar-status:empty{ display: none; }
.bis-dirty{ color: var(--gold-bright); }
/* Fixed height above: the search/filter row stays put however many items match. */
.bis-setbar-select select{ min-width: 220px; }
.bis-setbar-owner{ flex-basis: 100%; font-size: 13px; color: var(--text-muted); }
.bis-setbar-owner strong{ color: var(--gold-bright); }
#bisDialog{ z-index: 90; }
.bis-dialog-card{ max-width: 520px; }
.bis-dialog-card h2{ color: var(--gold-bright); font-size: 18px; margin: 0 0 10px; }
.bis-dialog-text{ font-size: 14px; color: var(--text); line-height: 1.55; margin: 0 0 18px; }
.bis-dialog-actions{ display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.bis-rec-badge{ display: inline-block; color: var(--gold-bright); font-weight: 700; margin-right: 6px; }
.bis-rec-toggle{ color: var(--gold-bright); }

/* BiS-Planer tabs + "Öffentliche Builds" (js/bis-browser.js) */
.bis-tabs{ display: flex; gap: 4px; border-bottom: 1px solid var(--border-soft); margin-bottom: 18px; }
.bis-tab{ background: none; border: none; border-bottom: 2px solid transparent; color: var(--text-muted); font: inherit; font-weight: 600; font-size: 14px; padding: 10px 16px; cursor: pointer; margin-bottom: -1px; }
.bis-tab:hover{ color: var(--text); }
.bis-tab.active{ color: var(--gold-bright); border-bottom-color: var(--gold-bright); }
.bis-class-all{ padding: 6px 14px; }
.bis-browse-count{ margin: 0 0 10px; }
.bis-build-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
.bis-build-card{ background: var(--bg-panel); border: 1px solid var(--border-soft); border-radius: 8px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.bis-build-card.bis-build-rec{ border-color: var(--gold); }
.bis-build-head{ display: flex; gap: 10px; align-items: center; }
.bis-build-class{ width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--border); flex: none; }
.bis-build-title{ min-width: 0; }
.bis-build-name{ font-family: 'Cinzel', serif; font-weight: 700; font-size: 15px; color: var(--gold-bright); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bis-build-meta{ font-size: 12px; color: var(--text-muted); }
.bis-build-meta strong{ color: var(--text); }
.bis-build-items{ display: flex; flex-wrap: wrap; gap: 4px; }
.bis-build-items .bis-icon{ display: block; }
.bis-build-owned{ opacity: .45; }
.bis-build-foot{ display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: auto; }
.bis-build-count{ font-size: 12px; color: var(--text-faint); }
.bis-build-actions{ display: flex; gap: 6px; }
@media (max-width: 600px){ .bis-build-grid{ grid-template-columns: 1fr; } }

/* BiS-Planer: talents in a set (js/bis-talents.js) */
.bis-tal-sum{ font-family: 'Karla', sans-serif; font-size: 13px; color: var(--text-muted); font-weight: 400; margin-left: 6px; }
.bis-tal-over{ color: var(--danger-bright); }
.bis-tal-tree{ border-top: 1px solid var(--border-soft); padding: 8px 0; }
.bis-tal-tree-head{ display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 6px; }
.bis-tal-tree-head span{ color: var(--gold-bright); font-weight: 700; }
.bis-tal-icons{ display: flex; flex-wrap: wrap; gap: 4px; }
.bis-tal-icon{ position: relative; width: 30px; height: 30px; border: 1px solid var(--border); border-radius: 4px; overflow: hidden; background: var(--field-bg); }
.bis-tal-icon img{ width: 100%; height: 100%; display: block; }
.bis-tal-icon b{ position: absolute; right: 1px; bottom: 0; font-size: 10px; color: var(--text); background: rgba(0,0,0,0.65); padding: 0 2px; border-radius: 2px; }
.bis-tal-actions{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.bis-tal-banner{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; background: var(--bg-panel-raised); border: 1px solid var(--gold); border-radius: 8px; padding: 12px 16px; margin-bottom: 16px; font-size: 13.5px; }
.bis-tal-banner .bis-tal-actions{ margin-top: 0; }
.bis-tal-icon{ cursor: help; }
.bis-tal-icon:focus{ outline: 1px solid var(--gold-bright); outline-offset: 1px; }
.bis-tal-tip-next{ margin-top: 6px; }

/* BiS-Planer: enchant per slot (js/bis-enchants.js) */
.bis-slot{ flex-wrap: wrap; }
.bis-ench{ flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 0 6px 4px 58px; font-size: 12px; }
.bis-ench-label{ color: var(--text-faint); text-transform: uppercase; letter-spacing: .5px; font-size: 11px; }
.bis-ench select{ width: 0; min-width: 160px; flex: 1 1 200px; font-size: 12.5px; padding: 5px 8px; }
.bis-ench-src{ flex-basis: 100%; color: var(--teal-bright); font-size: 12px; }
.bis-ench-done .bis-ench-src{ opacity: .55; text-decoration: line-through; }
@media (max-width: 600px){ .bis-ench{ padding-left: 6px; } }

/* ---- How to play (Class Overview, js/how-to-play.js) ---- */
.htp-card{ margin-bottom: 14px; }
.htp-card .classdive-section-head{ display: flex; align-items: center; gap: 10px; }
.htp-card .classdive-section-head .classdive-post-date{ margin-left: auto; }
.htp-intro{ margin: 8px 0 10px; line-height: 1.55; }
.htp-facts{ display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; margin-bottom: 12px; font-size: 13px; color: var(--text-muted); line-height: 1.5; }
.htp-facts > div{ background: var(--fold-body-bg); border: 1px solid var(--border-soft); border-radius: 8px; padding: 8px 10px; }
.htp-fact-label{ display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--gold-bright); margin-bottom: 2px; }
.htp-tabs{ display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--border-soft); margin-bottom: 12px; }
.htp-tab{ display: inline-flex; align-items: center; gap: 6px; background: none; border: none; border-bottom: 2px solid transparent; color: var(--text-muted); font: inherit; font-weight: 600; font-size: 14px; padding: 8px 12px; cursor: pointer; margin-bottom: -1px; }
.htp-tab img{ width: 20px; height: 20px; border-radius: 4px; }
.htp-tab:hover{ color: var(--text); }
.htp-tab.active{ color: var(--gold-bright); border-bottom-color: var(--gold-bright); }
.htp-summary{ margin: 0 0 12px; line-height: 1.55; }
.htp-role{ display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--role-color); border: 1px solid var(--role-color); border-radius: 999px; padding: 1px 8px; margin-right: 8px; vertical-align: 1px; }
.htp-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; }
.htp-block-wide{ grid-column: 1 / -1; }
.htp-block h4{ font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--gold-bright); margin: 0 0 4px; }
.htp-block h4 + p, .htp-block p{ margin: 0 0 10px; line-height: 1.55; font-size: 13.5px; }
.htp-list{ margin: 0 0 10px; padding-left: 20px; font-size: 13.5px; line-height: 1.55; }
.htp-list li + li{ margin-top: 2px; }
.htp-links{ margin-top: 12px; padding: 10px 12px; border: 1px solid var(--border-soft); border-radius: 8px; background: var(--fold-body-bg); }
.htp-links-head{ font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--gold-bright); margin-bottom: 8px; }
.htp-link-row{ display: flex; flex-wrap: wrap; gap: 6px; }
.htp-rec-list{ list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.htp-rec-list li{ display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13.5px; }
.htp-rec-name{ font-weight: 600; }
.htp-rec-meta{ color: var(--text-faint); font-size: 12px; flex: 1 1 auto; }
.htp-hint{ color: var(--text-faint); font-size: 12.5px; margin: 8px 0 0; }
.htp-sources{ margin-top: 12px; font-size: 13px; }
.htp-sources summary{ cursor: pointer; color: var(--text-muted); font-weight: 600; }
.htp-sources ul{ margin: 6px 0 0; padding-left: 20px; line-height: 1.6; }
.htp-sources a{ color: var(--teal-bright); }
.bis-htp-link{ display: block; margin-top: 4px; background: none; border: none; padding: 0; color: var(--teal-bright); font: inherit; font-size: 12px; cursor: pointer; text-align: left; }
.bis-htp-link:hover{ text-decoration: underline; }
@media (max-width: 720px){
  .htp-grid{ grid-template-columns: 1fr; }
}
.htp-drift{ margin: 8px 0 4px; padding: 8px 10px; border: 1px solid var(--danger); border-radius: 8px; font-size: 13px; }
.htp-drift summary{ cursor: pointer; color: var(--danger-bright); font-weight: 600; }
.htp-drift ul{ margin: 6px 0 0; padding-left: 18px; line-height: 1.5; }
.htp-drift li + li{ margin-top: 6px; }
.htp-drift-old{ color: var(--text-faint); }
.htp-drift-new{ color: var(--text); }

/* ---- Materialliste with sources (js/bis-materials.js) ---- */
.bis-mats .bis-mat-list{ display: flex; flex-direction: column; gap: 2px; }
.bis-mat-head{ display: flex; align-items: baseline; gap: 6px; width: 100%; background: none; border: none; padding: 3px 0; color: var(--text); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.bis-mat-head:disabled{ cursor: default; }
.bis-mat-head:not(:disabled):hover span:first-of-type{ text-decoration: underline; }
.bis-mat-head strong{ color: var(--gold-bright); min-width: 34px; }
.bis-mat-head .bis-item-meta, .bis-mat-arrow{ margin-left: auto; }
.bis-mat-arrow{ font-size: 10px; color: var(--text-faint); }
.bis-mat-src{ font-size: 11.5px; color: var(--text-muted); line-height: 1.45; margin: 0 0 6px 40px; }
.bis-mat-src > div + div{ margin-top: 2px; }
.bis-mat-raw{ display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-muted); margin-bottom: 6px; cursor: pointer; }
.bis-chance-groups{ display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 14px; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border-soft); }
.bis-chance-col{ display: flex; flex-direction: column; gap: 6px; }
.bis-talent-stats{ display: flex; flex-direction: column; gap: 3px; margin-top: 10px; font-size: 12px; color: var(--text-muted); }
.bis-talent-stat b{ color: var(--text); font-weight: 600; }
.bis-stat-split{ align-items: flex-start; }
.bis-stat-split small{ display: block; font-size: 11px; color: var(--text-faint); margin-top: 1px; }

/* ---- Gildenbedarf (js/bis-need.js) ---- */
.bis-need-kind{ width: auto; padding: 4px 12px; font-size: 13px; }
.bis-need-zone{ border: 1px solid var(--fold-border); border-radius: 8px; margin-bottom: 10px; background: var(--fold-body-bg); }
.bis-need-zone > summary{ display: flex; align-items: baseline; gap: 10px; padding: 10px 12px; cursor: pointer; background: var(--fold-head-bg); border-radius: 8px; }
.bis-need-zone[open] > summary{ border-radius: 8px 8px 0 0; }
.bis-need-zone-name{ font-weight: 700; color: var(--gold-bright); }
.bis-need-boss{ padding: 8px 12px; border-top: 1px solid var(--border-soft); }
.bis-need-boss-name{ font-weight: 600; margin-bottom: 4px; }
.bis-need-item{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 3px 0; font-size: 13px; }
.bis-need-item-name{ display: inline-flex; align-items: center; gap: 6px; min-width: 220px; flex: 0 1 280px; }
.bis-need-players{ display: flex; flex-wrap: wrap; gap: 4px; flex: 1 1 200px; }
.bis-need-player{ font-size: 12px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--class-color); color: var(--class-color); }
.bis-need-player.has{ opacity: .55; }

/* ---- Raids page (js/raids.js) ---- */
.raid-new{ margin-bottom: 12px; }
.raid-error{ color: var(--danger-bright); }
.raid-card{ margin-bottom: 14px; }
.raid-past{ opacity: .8; }
.raid-head{ display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; align-items: flex-start; }
.raid-date{ font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--gold-bright); }
.raid-title{ margin: 2px 0 0; font-size: 18px; }
.raid-counts{ display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 13px; color: var(--text-muted); }
.raid-count-yes{ font-weight: 700; color: var(--text); font-size: 15px; }
.raid-note{ margin: 8px 0 0; font-size: 13.5px; color: var(--text-muted); white-space: pre-line; }
.raid-signup{ margin-top: 12px; padding: 10px 12px; border: 1px solid var(--border-soft); border-radius: 8px; background: var(--fold-body-bg); }
.raid-signup-fields{ display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.raid-signup-fields > *{ flex: 1 1 150px; min-width: 0; }
.raid-signup-fields select{ background: var(--field-bg); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; font: inherit; font-size: 13px; }
.raid-signup-buttons{ display: flex; flex-wrap: wrap; gap: 6px; }
.raid-roster{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
.raid-col-head{ font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--gold-bright); margin-bottom: 4px; display: block; }
.raid-col-head span{ color: var(--text-muted); margin-left: 4px; }
.raid-col{ display: flex; flex-wrap: wrap; gap: 4px; align-content: flex-start; }
.raid-col .raid-col-head{ flex-basis: 100%; }
.raid-chip{ display: inline-flex; align-items: center; gap: 4px; font-size: 12px; padding: 1px 9px 1px 7px; border-radius: 2px 999px 999px 2px; border: 1px solid var(--class-color); border-left-width: 3px; color: var(--class-color); vertical-align: middle; }
.raid-chip-spec{ border-radius: 3px; flex: 0 0 auto; }
.raid-chip-note{ width: 11px; height: 11px; opacity: .8; }
/* Anmeldung: Tanks / Heiler / Melee / Range as columns, characters below each other. */
.raid-roster-cols{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.raid-roster-col{ min-width: 0; }
.raid-roster-label{ display: flex; align-items: center; gap: 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--gold-bright); padding-bottom: 6px; margin-bottom: 6px; border-bottom: 1px solid var(--border-soft); }
.raid-roster-label span{ color: var(--text-muted); }
.raid-roster-list{ display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
.raid-roster-list .raid-chip{ display: flex; min-width: 0; }
.raid-roster-list .raid-chip-name{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; min-width: 0; }
.raid-roster-extra-row{ display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border-soft); }
.raid-roster-extra-row .raid-roster-label{ border: 0; margin: 0 6px 0 0; padding: 0; color: var(--text-muted); }
@media (max-width: 640px){
  .raid-roster-cols{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.raid-roster-extra{ margin-top: 10px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.raid-roster-extra .raid-col-head{ display: inline; margin-right: 6px; }
.raid-roster-extra .raid-chip{ margin-right: 4px; }
.raid-admin{ display: flex; gap: 6px; justify-content: flex-end; margin-top: 10px; }
.raid-form-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px 12px; }
.raid-form label{ display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-muted); }
.raid-form select, .raid-form input[type="date"], .raid-form input[type="time"]{ background: var(--field-bg); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; font: inherit; }
.raid-form-note{ margin-top: 8px; }
.raid-past-list > summary{ cursor: pointer; color: var(--text-muted); font-weight: 600; margin: 6px 0 10px; }
@media (max-width: 720px){
  .raid-roster{ grid-template-columns: 1fr; }
  .raid-counts{ align-items: flex-start; }
}
.character-composer-class, .character-composer-spec{ flex: 1 1 110px; min-width: 0; background: var(--field-bg); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; font: inherit; font-size: 13px; }
.character-composer-spec:disabled{ opacity: .5; }
.raid-signup-fields select:disabled{ opacity: .75; cursor: not-allowed; }
.raid-class-hint{ margin: 0 0 8px; }
.raid-sr{ margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border-soft); }
.raid-sr-own{ margin: 4px 0 8px; }
.raid-sr-mine-list{ display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.raid-sr-mine{ display: inline-flex; align-items: center; gap: 6px; font-size: 13px; padding: 2px 4px 2px 2px; border: 1px solid var(--border); border-radius: 6px; background: var(--fold-body-bg); }
.raid-sr-mine button{ background: none; border: 0; color: var(--text-muted); cursor: pointer; font-size: 16px; line-height: 1; padding: 0 4px; }
.raid-sr-mine button:hover{ color: var(--danger-bright); }
.raid-sr-search{ max-width: 460px; }
.raid-sr-filter{ display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); margin-top: 4px; cursor: pointer; }
.raid-sr-results{ display: flex; flex-direction: column; margin-top: 4px; }
.raid-sr-results:empty{ display: none; }
.raid-sr-result{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px; text-align: left; font: inherit; font-size: 13px; padding: 4px 6px; border: 0; border-bottom: 1px solid var(--border-soft); background: var(--field-bg); color: var(--text); cursor: pointer; }
.raid-sr-result:hover{ background: var(--fold-body-bg); }
.raid-sr-result .bis-item-meta{ margin-left: auto; text-align: right; }
.raid-sr-result-empty{ font-size: 13px; color: var(--text-muted); padding: 4px 6px; }
.raid-sr-all > summary{ cursor: pointer; font-size: 13px; color: var(--text-muted); font-weight: 600; margin: 4px 0; }
.raid-sr-row{ display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 4px 0; border-bottom: 1px solid var(--border-soft); }
.raid-sr-item-label{ display: inline-flex; align-items: center; gap: 6px; }
.raid-sr-item{ display: inline-flex; align-items: center; gap: 6px; font-size: 13px; flex: 0 1 280px; min-width: 0; }
.raid-sr-count{ font-size: 11px; font-weight: 700; color: var(--gold-bright); }
.raid-sr-players{ display: flex; flex-wrap: wrap; gap: 4px; }
.raid-chip-out{ opacity: .5; text-decoration: line-through; }

/* Berufe page (js/professions.js) */
.prof-my{ margin-bottom: 14px; }
.prof-char{ padding: 10px 0; border-bottom: 1px solid var(--border-soft); }
.prof-char-name{ font-weight: 700; margin-bottom: 6px; }
.prof-char select{ background: var(--field-bg); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 5px 8px; font: inherit; font-size: 13px; margin-top: 6px; }
.prof-edit-row{ margin: 4px 0 8px; padding: 8px 10px; border: 1px solid var(--border-soft); border-radius: 8px; background: var(--fold-body-bg); }
.prof-edit-head{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.prof-skill{ font-size: 12px; color: var(--text-muted); display: inline-flex; align-items: center; gap: 6px; }
.prof-skill input{ width: 70px; background: var(--field-bg); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 4px 6px; font: inherit; }
.prof-edit-head .btn{ margin-left: auto; }
.prof-recipes{ display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 6px; align-items: center; }
.prof-recipe{ display: inline-flex; align-items: center; gap: 4px; font-size: 12px; padding: 1px 8px; border: 1px solid var(--border); border-radius: 999px; background: var(--fold-body-bg); }
.prof-recipe button{ background: none; border: 0; color: var(--text-muted); cursor: pointer; font-size: 14px; line-height: 1; padding: 0 2px; }
.prof-recipe button:hover{ color: var(--danger-bright); }
.prof-recipe-search{ flex-basis: 100%; max-width: 460px; }
.prof-filter-row{ flex-wrap: wrap; }
.prof-card{ margin-bottom: 12px; }
.prof-row{ padding: 6px 0; border-bottom: 1px solid var(--border-soft); }
.prof-row-head{ display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.prof-person{ margin-right: 10px; font-size: 13.5px; }
.prof-skill-val{ font-weight: 700; color: var(--gold-bright); }
.prof-who{ padding: 6px 0; border-bottom: 1px solid var(--border-soft); }
.prof-who-line{ font-size: 13px; margin-top: 3px; }

/* Meine Charaktere page (js/mychar-page.js) */
.mychar-savebar{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 16px; padding: 10px 12px; border: 1px solid var(--border-soft); border-radius: 8px; background: var(--bg-panel); position: sticky; top: 64px; z-index: 5; }
.mychar-savebar.dirty{ border-color: var(--gold); }
.mychar-card-head{ display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.mychar-form{ display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 12px; margin: 10px 0; padding: 10px 12px; border: 1px solid var(--border-soft); border-radius: 8px; background: var(--fold-body-bg); align-items: end; }
.mychar-form label{ display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-muted); }
.mychar-form select, .prof-add, .mychar-bis-row select{ background: var(--field-bg); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; font: inherit; font-size: 13px; }
.mychar-form .mychar-form-main{ flex-direction: row; align-items: center; gap: 6px; color: var(--text); }
.mychar-section{ margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border-soft); }
.mychar-section-title{ font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--gold-bright); margin-bottom: 6px; }
.prof-add{ margin-top: 6px; }
.mychar-bis-hint{ margin: 0 0 6px; }
.mychar-bis-row{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 4px 0; }
.mychar-bis-spec{ min-width: 110px; font-size: 13px; font-weight: 600; }
.mychar-bis-progress{ display: inline-block; width: 70px; height: 6px; border-radius: 3px; background: var(--border-soft); overflow: hidden; }
.mychar-bis-progress span{ display: block; height: 100%; background: var(--teal-bright); }
.prof-own-hint{ margin-bottom: 12px; }
.prof-own-hint a{ color: var(--gold-bright); }

/* Loot-Vergabe (js/loot.js) */
.loot-item{ display: inline-flex; align-items: center; gap: 6px; }
.loot-char{ font-weight: 600; }
.loot-tag{ font-size: 11px; padding: 0 6px; border: 1px solid var(--border); border-radius: 999px; color: var(--text-muted); white-space: nowrap; }
.loot-tag-good{ border-color: var(--teal-bright); color: var(--teal-bright); }
.loot-award-row{ display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 4px 0; border-bottom: 1px solid var(--border-soft); font-size: 13px; }
.loot-del{ margin-left: auto; background: none; border: 0; color: var(--text-muted); cursor: pointer; font-size: 16px; line-height: 1; }
.loot-del:hover{ color: var(--danger-bright); }
.loot-panel{ margin-top: 8px; padding: 10px 12px; border: 1px solid var(--border-soft); border-radius: 8px; background: var(--fold-body-bg); }
.loot-picked-head{ display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 14px; }
.loot-note{ margin-bottom: 8px; }
.loot-table{ width: 100%; border-collapse: collapse; font-size: 13px; }
.loot-table th{ text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); font-weight: 600; padding: 4px 6px; border-bottom: 1px solid var(--border); }
.loot-table td{ padding: 5px 6px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
.loot-table td .bis-item-meta{ display: block; }
.loot-row-strong td:first-child{ color: var(--gold-bright); font-weight: 700; }
.loot-actions{ white-space: nowrap; text-align: right; }
.loot-raid{ margin-bottom: 12px; }
@media (max-width: 640px){
  .loot-table th:nth-child(5), .loot-table td:nth-child(5){ display: none; }
}
.mychar-bis-private{ flex-basis: 100%; color: var(--danger-bright); }
.loot-import{ margin-bottom: 12px; }
.loot-import textarea{ width: 100%; font-family: monospace; font-size: 12px; }
.loot-import select{ background: var(--field-bg); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 3px 6px; font: inherit; font-size: 12.5px; max-width: 220px; }
.loot-imp-map{ display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px 20px; margin-bottom: 10px; }
.loot-imp-line{ display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13px; padding: 3px 0; }
.loot-imp-dup td{ opacity: .45; }
.loot-imp-missing td{ box-shadow: inset 0 -1px 0 var(--danger); }
.loot-imp-missing td:nth-child(3){ color: var(--danger-bright); }

/* Raid sign-ups with several characters + Aufstellung (js/raids.js, js/raid-comp.js) */
.raid-own-signups{ display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 8px; }
.raid-own-signup{ display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.raid-signup-closed{ opacity: .9; }
.raid-signup-buttons .bis-item-meta{ align-self: center; }
.raid-chip small{ font-size: 9px; font-weight: 700; opacity: .8; }
.raid-chip-twink{ border-style: dashed; }
.raid-signups-all > summary{ cursor: pointer; font-size: 13px; color: var(--text-muted); font-weight: 600; margin-top: 10px; }
.raid-comp-published{ margin-top: 12px; padding: 10px 12px; border: 1px solid rgba(var(--gold-bright-rgb),0.4); border-radius: 8px; background: rgba(var(--gold-bright-rgb),0.05); }
.raid-comp-published .raid-roster{ margin-top: 6px; }
.raid-comp-bar{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 12px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border-soft); }
.raid-comp-panel{ margin-top: 4px; }
.raid-comp-cols{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.raid-comp-col{ display: flex; flex-direction: column; gap: 4px; }
.raid-comp-col .raid-col-head{ display: flex; align-items: center; gap: 6px; }
.raid-comp-target{ width: 52px; margin-left: auto; background: var(--field-bg); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 2px 4px; font: inherit; font-size: 12px; }
.raid-comp-short{ color: var(--danger-bright) !important; }
.raid-comp-over{ color: var(--gold-bright) !important; }
.raid-comp-ok{ color: var(--teal-bright) !important; }
.raid-comp-row{ display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 3px 6px; border-radius: 6px; cursor: pointer; font-size: 13px; }
.raid-comp-row:hover{ background: var(--fold-body-bg); }
.raid-comp-row.picked{ background: rgba(var(--gold-bright-rgb),0.08); }
.raid-comp-row.other{ opacity: .5; }
.raid-comp-row .bis-item-meta{ flex-basis: 100%; padding-left: 22px; }
.mychar-role-badge{ font-size: 11px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--teal-bright); color: var(--teal-bright); vertical-align: middle; }
.mychar-role-badge.twink{ border-color: var(--border); color: var(--text-muted); }
@media (max-width: 760px){ .raid-comp-cols{ grid-template-columns: 1fr; } }

/* Bewerbung: name pair, back / edit, logs list */
.apply-chat-name-pair{ display: grid; grid-template-columns: 1fr 1fr; gap: 6px; flex: 1; min-width: 0; }
.apply-chat-hint{ font-size: 12px; color: var(--text-muted); margin: 6px 0 0; line-height: 1.45; }
.apply-chat-prof-count{ font-size: 11px; color: var(--text-muted); margin-left: 6px; }
.apply-chat-log-row{ display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.apply-chat-log-row .apply-text-input{ flex: 1; }
button.apply-chat-edit{ font: inherit; text-align: left; cursor: pointer; border: 0; }
button.apply-chat-edit:hover{ filter: brightness(1.12); }
.apply-chat-edit-icon{ opacity: .55; font-size: 11px; margin-left: 4px; }
.application-log-list{ margin: 4px 0 0; padding-left: 18px; font-size: 13px; }
@media (max-width: 520px){ .apply-chat-name-pair{ grid-template-columns: 1fr; } }

/* Testmodus bar (js/testmode.js) */
.testmode-bar{ position: sticky; top: 0; z-index: 300; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 8px 16px; font-size: 13px;
  background: var(--danger); color: var(--text); border-bottom: 2px solid var(--danger-bright); box-shadow: 0 2px 10px rgba(0,0,0,.4); }
.testmode-bar select, .testmode-bar button{ font: inherit; font-size: 12.5px; background: var(--field-bg); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 3px 8px; cursor: pointer; }
.testmode-bar label{ display: inline-flex; align-items: center; gap: 6px; }
.testmode-note{ opacity: .85; }
.testmode-guide{ flex-basis: 100%; background: var(--bg-panel); border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; }
.testmode-guide ol{ margin: 0; padding-left: 20px; line-height: 1.55; }

/* Raid window: list cards, steps, Loot-Runden, voting pop-up (js/raids.js, js/loot-session.js) */
.raid-list-card{ cursor: pointer; transition: border-color .15s; }
.raid-list-card:hover, .raid-list-card:focus-visible{ border-color: var(--gold); outline: none; }
.raid-open-hint{ font-size: 13px; font-weight: 700; color: var(--gold-bright); white-space: nowrap; }
.raid-list-facts{ display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px; font-size: 13px; color: var(--text-muted); }
.raid-me{ display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 8px; font-size: 13px; }
.raid-me-in{ color: var(--teal-bright); font-weight: 600; }
.raid-me-todo{ color: var(--gold-bright); font-weight: 600; }
.raid-phase{ display: inline-block; margin-left: 8px; font-size: 10.5px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-muted); letter-spacing: .02em; vertical-align: 1px; }
.raid-phase-signup{ border-color: var(--teal-bright); color: var(--teal-bright); }
.raid-phase-running{ border-color: var(--gold-bright); color: var(--gold-bright); background: rgba(var(--gold-bright-rgb),0.1); }
.raid-window-top{ display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; }
.raid-window-admin{ display: flex; gap: 6px; }
.raid-steps{ display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 14px 0 4px; }
.raid-step{ display: flex; align-items: center; gap: 10px; text-align: left; font: inherit; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--field-bg); color: var(--text); cursor: pointer; min-width: 0; }
.raid-step:hover{ border-color: var(--gold); }
.raid-step.active{ border-color: var(--gold-bright); background: rgba(var(--gold-bright-rgb),0.1); box-shadow: inset 0 -3px 0 var(--gold-bright); }
.raid-step-num{ flex: 0 0 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; border: 1px solid var(--border); color: var(--text-muted); }
.raid-step.active .raid-step-num{ border-color: var(--gold-bright); color: var(--gold-bright); }
.raid-step.done .raid-step-num{ border-color: var(--teal-bright); color: var(--teal-bright); }
.raid-step-text{ display: flex; flex-direction: column; min-width: 0; }
.raid-step-text b{ font-size: 14px; }
.raid-step-text small{ font-size: 11.5px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.raid-tab-body{ margin-top: 4px; }
.raid-next{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 14px; margin-top: 12px; padding: 10px 12px; border: 1px dashed var(--gold); border-radius: 8px; font-size: 13.5px; }
.raid-next .bis-item-meta{ display: block; }
.raid-next-hint{ margin-top: 10px; }
.raid-section-head{ margin-top: 14px; }
.raid-hr{ margin: 6px 0 10px; padding: 8px 10px; border: 1px solid var(--border-soft); border-radius: 8px; background: var(--fold-body-bg); }
.loot-tag-hr{ border-color: var(--gold-bright); color: var(--gold-bright); font-weight: 700; }
@media (max-width: 640px){
  .raid-steps{ grid-template-columns: 1fr; }
}

/* Raid window, step Taktik (js/raid-tactics.js) */
.raid-tactics{ display: flex; flex-direction: column; gap: 14px; }
.tac-section{ display: flex; flex-direction: column; gap: 8px; }
.tac-section .raid-col-head .btn{ margin-left: 8px; }
.tac-mine{ padding: 10px 12px; border: 1px solid var(--gold); border-radius: 8px; background: rgba(var(--gold-bright-rgb),0.07); }
.tac-mine ul{ margin: 6px 0 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.tac-mine li{ display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tac-bosses{ display: flex; flex-wrap: wrap; gap: 6px; }
.tac-boss{ display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 13px; padding: 5px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--field-bg); color: var(--text); cursor: pointer; }
.tac-boss:hover{ border-color: var(--gold); }
.tac-boss.active{ border-color: var(--gold-bright); color: var(--gold-bright); background: rgba(var(--gold-bright-rgb),0.1); }
.tac-boss small{ font-size: 11px; color: var(--teal-bright); }
.tac-roles{ display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0; font-size: 13.5px; }
.tac-summary{ display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 4px 14px; }
.tac-sum-row{ display: flex; align-items: baseline; gap: 6px; font-size: 13px; padding: 3px 0; border-bottom: 1px solid var(--border-soft); }
.tac-sum-label{ color: var(--text-muted); white-space: nowrap; }
.tac-sum-label small{ color: var(--text-faint); }
.tac-sum-who{ margin-left: auto; text-align: right; }
.tac-groups{ display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.tac-group{ padding: 8px 10px; border: 1px solid var(--border-soft); border-radius: 8px; background: var(--field-bg); font-size: 13px; }
.tac-group-head{ font-weight: 700; color: var(--gold-bright); margin-bottom: 4px; }
.tac-group-head small{ font-weight: 400; color: var(--text-faint); }
.tac-group-member{ display: flex; align-items: center; gap: 5px; padding: 1px 0; }
.tac-group-edit summary{ cursor: pointer; font-size: 13px; color: var(--text-muted); }
.tac-group-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px 14px; margin-top: 8px; }
.tac-group-grid label{ display: flex; align-items: center; gap: 6px; font-size: 13px; }
.tac-group-grid select{ margin-left: auto; }
.tac-abilities{ display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; }
.tac-ability{ padding: 8px 10px; border: 1px solid var(--border-soft); border-radius: 8px; background: var(--field-bg); }
.tac-ability-head{ display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13.5px; margin-bottom: 6px; }
.tac-assign-row{ display: grid; grid-template-columns: minmax(80px, 110px) 1fr; align-items: center; gap: 4px 8px; padding: 3px 0; font-size: 13px; }
.tac-assign-row.mine{ box-shadow: inset 3px 0 0 var(--gold-bright); padding-left: 6px; }
.tac-assign-row select, .tac-assign-row input[type="text"]{ min-width: 0; width: 100%; }
.tac-assign-row .tac-assign-note{ grid-column: 2; font-size: 12px; padding: 3px 6px; }
.tac-target{ color: var(--text); }
.tac-toggle{ display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); }
.tac-board{ position: relative; aspect-ratio: 16 / 10; border: 1px solid var(--border); border-radius: 8px; background-color: var(--field-bg); background-size: cover; background-position: center;
  background-image: radial-gradient(circle at 50% 50%, rgba(var(--gold-bright-rgb),0.08), transparent 60%); overflow: hidden; touch-action: none; }
.tac-board-hint{ position: absolute; left: 10px; top: 8px; font-size: 11.5px; color: var(--text-faint); pointer-events: none; }
.tac-tok{ display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; padding: 0 7px; border-radius: 15px; font-size: 12px; font-weight: 700; white-space: nowrap; border: 2px solid var(--border); background: var(--bg-panel-raised); color: var(--text); user-select: none; }
.tac-board .tac-tok{ position: absolute; transform: translate(-50%, -50%); }
.tac-board.editable .tac-tok, .tac-parking .tac-tok{ cursor: grab; touch-action: none; }
.tac-tok.dragging{ position: fixed; transform: translate(-50%, -50%); z-index: 50; cursor: grabbing; opacity: .85; }
.tac-tok-boss{ border-color: var(--danger-bright); background: var(--danger); color: var(--text); min-width: 44px; height: 44px; border-radius: 22px; }
.tac-tok-group{ border-color: var(--teal-bright); }
.tac-tok-tank{ border-color: var(--gold-bright); color: var(--gold-bright); }
.tac-tok-marker{ min-width: 22px; width: 22px; height: 22px; padding: 0; border-radius: 50%; border: 2px solid var(--bg-deep); }
.tac-mk1{ background: var(--mk-1); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); border-radius: 0; }
.tac-mk2{ background: var(--mk-2); }
.tac-mk3{ background: var(--mk-3); border-radius: 0; transform: rotate(45deg) scale(.8); }
.tac-board .tac-mk3{ transform: translate(-50%, -50%) rotate(45deg) scale(.8); }
.tac-mk4{ background: var(--mk-4); clip-path: polygon(50% 5%, 98% 95%, 2% 95%); border-radius: 0; }
.tac-mk5{ background: var(--mk-5); }
.tac-mk6{ background: var(--mk-6); border-radius: 3px; }
.tac-mk7{ background: var(--mk-7); clip-path: polygon(20% 0, 50% 30%, 80% 0, 100% 20%, 70% 50%, 100% 80%, 80% 100%, 50% 70%, 20% 100%, 0 80%, 30% 50%, 0 20%); border-radius: 0; }
.tac-mk8{ background: var(--mk-8); }
.tac-parking{ display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 1px dashed var(--border); border-radius: 8px; min-height: 46px; }
.tac-park-set{ display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tac-park-title{ flex: 0 0 110px; font-size: 11.5px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .04em; }
.tac-tok-player{ font-size: 11px; font-weight: 600; height: 24px; padding: 0 6px; border-radius: 6px; background: var(--bg-deep); }
.tac-tok-mine{ box-shadow: 0 0 0 2px var(--gold-bright); }
.tac-kicks{ display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.tac-kick{ padding: 8px 10px; border: 1px solid var(--border-soft); border-radius: 8px; background: var(--field-bg); display: flex; flex-direction: column; gap: 6px; }
.tac-kick-head{ display: flex; gap: 6px; align-items: center; }
.tac-kick-head input{ flex: 1; min-width: 0; }
.tac-kick-order{ margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.tac-kick-order li{ display: flex; align-items: center; gap: 6px; }
.tac-kick-order li.mine{ box-shadow: inset 3px 0 0 var(--gold-bright); padding-left: 6px; }
.tac-kick-num{ flex: 0 0 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; border: 1px solid var(--gold); color: var(--gold-bright); }
.tac-kick-btns{ margin-left: auto; display: inline-flex; gap: 2px; }
.tac-kick-btns .btn{ padding: 0 6px; min-width: 0; font-size: 12px; line-height: 20px; }
.tac-kick-btns .btn:disabled{ opacity: .35; cursor: default; }
.tac-bg{ display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--text-muted); }
.tac-note{ width: 100%; }
.tac-guide{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--border-soft); border-radius: 8px; background: var(--field-bg); }
.tac-guide .btn{ margin-left: auto; }
.tac-ability.recommended{ border-color: var(--gold); }
.tac-more summary{ cursor: pointer; font-size: 13px; color: var(--text-muted); margin: 4px 0 8px; }

/* Raid window, Anmeldung tab: titled panels (raidPanelHtml in js/raids.js) */
.raid-panel{ margin-top: 14px; border: 1px solid var(--border-soft); border-radius: 10px; background: var(--fold-body-bg); overflow: hidden; }
.raid-panel-head{ display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; padding: 10px 14px; border-bottom: 1px solid var(--border-soft); background: rgba(var(--gold-bright-rgb),0.04); }
.raid-panel-head h4{ margin: 0; font-family: 'Cinzel', serif; font-size: 15px; color: var(--gold-bright); letter-spacing: .02em; }
.raid-panel-head span{ font-size: 12.5px; color: var(--text-muted); }
.raid-panel-body{ padding: 12px 14px 14px; }
.raid-panel-body > :first-child{ margin-top: 0; }
.raid-panel-me{ border-color: var(--teal); }
.raid-panel-me .raid-panel-head{ background: rgba(47,174,158,0.08); }
.raid-panel-lead{ border: 1px dashed var(--gold); }
.raid-panel-lead.has-todo{ border-style: solid; box-shadow: 0 0 0 1px var(--gold); }
/* Inside a panel the old separators / boxes aren't needed. */
.raid-panel .raid-signup{ margin-top: 0; padding: 0; border: 0; background: none; }
.raid-panel .raid-roster{ margin-top: 0; }
.raid-panel .raid-sr{ margin-top: 0; padding-top: 0; border-top: 0; }
.raid-panel .raid-admin{ justify-content: flex-start; margin: 0 0 10px; }
.raid-panel .raid-section-head{ margin-top: 6px; }
.raid-panel .raid-hr{ margin-top: 0; }
.raid-note-box{ display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; padding: 10px 12px; border-left: 3px solid var(--gold); border-radius: 6px; background: var(--field-bg); }
.raid-note-box p{ margin: 0; font-size: 13.5px; color: var(--text-muted); white-space: pre-line; }
.raid-lead-part + .raid-lead-part{ margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-soft); }
.raid-panel .raid-lead-part .raid-hr{ padding: 0; border: 0; background: none; }
.raid-panel .raid-lead-part .raid-admin{ margin: 6px 0 0; }
.raid-todo-hint{ display: flex; align-items: center; gap: 6px; margin: 10px 0 0; font-size: 13.5px; color: var(--gold-bright); }

/* Levelguide (js/level-guide.js) */
.lg-top{ display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.lg-top .bis-hint{ flex-basis: 100%; margin: 0; }
.lg-level{ display: flex; align-items: center; gap: 8px; white-space: nowrap; font-size: 13px; color: var(--text-muted); }
.lg-level input{ width: 80px; }
.lg-search{ flex: 1 1 220px; min-width: 0; }
.lg-card{ padding: 0; overflow: hidden; }
.lg-card.lg-fits{ border-color: var(--teal-bright); }
.lg-card-head{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; width: 100%; padding: 12px 16px; border: 0; background: none; color: var(--text); font: inherit; font-size: 14.5px; text-align: left; cursor: pointer; }
.lg-card-head:hover{ background: rgba(var(--gold-bright-rgb),0.04); }
.lg-arrow{ margin-left: auto; color: var(--text-muted); }
.lg-range{ min-width: 56px; font-weight: 700; color: var(--gold-bright); font-variant-numeric: tabular-nums; }
.lg-tag{ font-size: 10.5px; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-muted); }
.lg-tag-fit{ border-color: var(--teal-bright); color: var(--teal-bright); }
.lg-card-body{ display: flex; flex-direction: column; border-top: 1px solid var(--border-soft); }
.lg-quest{ display: flex; flex-direction: column; gap: 4px; padding: 10px 16px; border-bottom: 1px solid var(--border-soft); font-size: 13.5px; }
.lg-quest:last-child{ border-bottom: 0; }
.lg-quest-high{ opacity: .6; }
.lg-quest-head{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.lg-qname{ color: var(--gold-bright); }
.lg-lvl{ display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 20px; padding: 0 4px; margin-right: 4px; border-radius: 4px; background: var(--field-bg); border: 1px solid var(--border); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.lg-class{ font-size: 11.5px; font-weight: 700; }
.lg-label{ display: inline-block; min-width: 72px; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint); }
.lg-quest-start, .lg-next, .lg-rewards{ display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.lg-where{ color: var(--text-muted); }
.lg-coords{ font-variant-numeric: tabular-nums; color: var(--text); }
.lg-way{ font: inherit; font-size: 11px; padding: 0 6px; border: 1px solid var(--border); border-radius: 4px; background: var(--field-bg); color: var(--teal-bright); cursor: pointer; }
.lg-chain-toggle{ font: inherit; font-size: 13px; padding: 0; border: 0; background: none; color: var(--teal-bright); cursor: pointer; text-align: left; }
.lg-steps{ margin: 6px 0 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.lg-steps li{ padding-left: 4px; }
.lg-step-final{ color: var(--gold-bright); }
.lg-item{ display: inline-flex; align-items: center; gap: 4px; }
.lg-item img{ border-radius: 3px; border: 1px solid var(--border); }
.lg-card.lg-other{ opacity: .55; }
.lg-task{ display: flex; flex-direction: column; gap: 4px; }
.lg-task > div{ display: flex; gap: 4px 10px; }
.lg-otext{ color: var(--text); line-height: 1.45; }
.lg-targets{ margin: 0; padding: 0 0 0 82px; list-style: none; display: flex; flex-direction: column; gap: 3px; }
.lg-targets li{ display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
.lg-ttype{ min-width: 64px; font-size: 11px; color: var(--teal-bright); }
.lg-titem{ color: var(--gold-bright); }
.lg-hubs{ padding: 10px 16px; border-bottom: 1px solid var(--border-soft); display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; }
.lg-hub{ display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
@media (max-width: 640px){
  .lg-card-head{ padding: 10px 12px; }
  .lg-quest{ padding: 10px 12px; }
  .lg-label{ min-width: 0; flex-basis: 100%; }
  .lg-task > div{ flex-wrap: wrap; }
  .lg-targets{ padding-left: 0; }
}

/* Problem melden / Meldungen (js/support.js) */
.support-fab{ position: fixed; right: 18px; bottom: 18px; z-index: 70; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1px solid var(--gold); border-radius: 999px; background: var(--bg-panel); color: var(--gold-bright); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; box-shadow: 0 4px 16px rgba(0,0,0,0.4); opacity: .9; }
.support-fab:hover{ opacity: 1; background: var(--bg-panel-raised); }
.support-fab svg{ width: 18px; height: 18px; }
.support-card{ max-width: 560px; }
.support-card .access-modal-header h2{ display: flex; align-items: center; gap: 8px; }
.support-field{ display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; font-size: 13px; color: var(--text-muted); }
.support-field select{ background: var(--field-bg); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 7px 8px; font: inherit; font-size: 13.5px; }
.support-shot-actions{ display: flex; flex-wrap: wrap; gap: 6px; }
.support-shot-actions label.btn{ cursor: pointer; }
.support-shot-tip{ font-size: 11.5px; color: var(--text-faint); }
.support-mine{ margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border-soft); display: flex; flex-direction: column; gap: 8px; }
.support-mine-item{ padding: 8px 10px; border: 1px solid var(--border-soft); border-radius: 8px; background: var(--field-bg); font-size: 13px; }
.support-mine-item p{ margin: 4px 0 0; }
.support-reply{ color: var(--teal-bright); }
.support-status{ display: inline-block; font-size: 10.5px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-muted); }
.support-status-open{ border-color: var(--gold-bright); color: var(--gold-bright); }
.support-status-progress{ border-color: var(--teal-bright); color: var(--teal-bright); }
.support-item{ display: flex; flex-direction: column; gap: 8px; }
.support-item-open{ border-color: var(--gold); }
.support-item-done{ opacity: .8; }
.support-item-head{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 14px; }
.support-text{ margin: 0; font-size: 14px; }
.support-ctx{ display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12.5px; color: var(--text-muted); }
.support-ctx code, .support-errors code{ font-size: 11.5px; color: var(--text-faint); }
.support-link{ font: inherit; color: var(--teal-bright); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }
.support-errors summary{ cursor: pointer; font-size: 12.5px; color: var(--danger-bright); }
.support-errors ul{ margin: 4px 0 0; padding-left: 18px; }
.support-handle{ display: flex; flex-direction: column; gap: 8px; padding-top: 8px; border-top: 1px solid var(--border-soft); }
.support-handle label{ display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--text-muted); max-width: 640px; }
.support-handle select{ max-width: 200px; background: var(--field-bg); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; font: inherit; }
#pageHost{ padding-bottom: 56px; }
@media (max-width: 760px){
  .support-fab{ right: 12px; bottom: 12px; padding: 10px; }
  .support-fab span{ display: none; }
}

/* Raid guest applications (js/raid-externals.js) */
.raid-chip-ext{ font-size: 10px; padding: 0 5px; margin-left: 3px; border-radius: 999px; border: 1px solid var(--teal-bright); color: var(--teal-bright); }
.raid-ext-intro p{ margin: 6px 0 0; font-size: 14px; }
.raid-ext-app{ display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.raid-ext-char{ display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13.5px; }
.raid-ext-char a{ color: var(--teal-bright); font-size: 12.5px; }
.raid-ext-char-row{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; padding: 4px 0; border-bottom: 1px solid var(--border-soft); }
.raid-ext-shots{ display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.raid-ext-shot{ position: relative; display: inline-block; padding: 0; border: 1px solid var(--border); border-radius: 6px; background: var(--field-bg); overflow: hidden; cursor: zoom-in; }
.raid-ext-shot img{ display: block; width: 140px; height: 90px; object-fit: cover; }
.raid-ext-shot button{ position: absolute; top: 2px; right: 2px; border: 0; border-radius: 50%; width: 22px; height: 22px; background: var(--danger); color: var(--text); cursor: pointer; }
.raid-ext-shot-add{ display: inline-flex; align-items: center; justify-content: center; width: 140px; height: 90px; border: 1px dashed var(--border); border-radius: 6px; color: var(--text-muted); cursor: pointer; font-size: 13px; }
.raid-ext-shot-add:hover{ border-color: var(--gold); color: var(--gold-bright); }
.raid-ext-form{ display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.raid-ext-form-char{ display: grid; grid-template-columns: 24px 1fr 1fr 1fr 2fr auto; gap: 6px 8px; align-items: end; }
.raid-ext-form-char label{ display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--text-muted); min-width: 0; }
.raid-ext-form-char .tac-kick-num{ margin-bottom: 8px; }
.raid-ext-thread{ display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.raid-ext-msg{ padding: 6px 10px; border: 1px solid var(--border-soft); border-radius: 8px; background: var(--field-bg); font-size: 13.5px; max-width: 85%; }
.raid-ext-msg.lead{ border-color: var(--gold); }
.raid-ext-msg.mine{ align-self: flex-end; }
.raid-ext-msg p{ margin: 3px 0 0; }
.raid-ext-msg-head{ display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; }
.raid-ext-reply{ display: flex; gap: 6px; align-items: flex-end; }
.raid-ext-reply textarea{ flex: 1; min-width: 0; }
.raid-ext-list{ display: flex; flex-direction: column; gap: 8px; }
.raid-ext-item{ padding: 8px 10px; border: 1px solid var(--gold); border-radius: 8px; background: var(--fold-body-bg); }
.raid-ext-item.accepted{ border-color: var(--teal-bright); }
.raid-ext-item.declined{ border-color: var(--border-soft); opacity: .8; }
.raid-ext-item > summary{ cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13.5px; }
.raid-ext-zoom{ position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 16px; background: var(--tip-bg); cursor: zoom-out; }
.raid-ext-zoom img{ max-width: 100%; max-height: 85vh; border: 1px solid var(--border); border-radius: 8px; }
@media (max-width: 760px){
  .raid-ext-form-char{ grid-template-columns: 24px 1fr 1fr; }
  .raid-ext-form-char .raid-ext-armory{ grid-column: 2 / -1; }
  .raid-ext-msg{ max-width: 100%; }
}

/* Boss-Guides page (js/boss-guides.js) */
.boss-picker{ display: flex; flex-direction: column; gap: 8px; }
.boss-picker-row{ display: flex; gap: 8px; align-items: flex-start; }
.boss-picker-row .tac-park-title{ padding-top: 7px; }
.boss-layout{ display: grid; grid-template-columns: 260px 1fr; gap: 18px; align-items: start; }
.boss-list{ position: sticky; top: 86px; padding: 14px; }
.boss-list ol{ list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.boss-list-item{ width: 100%; display: flex; align-items: center; gap: 8px; text-align: left; font: inherit; font-size: 13.5px; padding: 6px 8px; border: 1px solid transparent; border-radius: 6px; background: none; color: var(--text); cursor: pointer; }
.boss-list-item:hover{ border-color: var(--border); }
.boss-list-item.active{ border-color: var(--gold-bright); background: rgba(var(--gold-bright-rgb),0.1); color: var(--gold-bright); }
.boss-has-guide{ margin-left: auto; color: var(--teal-bright); }
.boss-source{ margin: 10px 0 0; }
.boss-detail .tac-card{ display: flex; flex-direction: column; gap: 16px; }
.boss-detail-head{ display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.boss-title{ font-family: 'Cinzel', serif; color: var(--gold-bright); font-size: 24px; margin: 2px 0 0; }
.boss-img{ display: block; align-self: flex-start; max-width: 100%; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--field-bg); }
.boss-img img{ display: block; max-width: 100%; max-height: 320px; object-fit: contain; }
.boss-mechs{ display: flex; flex-wrap: wrap; gap: 6px; }
.boss-mech{ display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; padding: 3px 9px 3px 4px; border: 1px solid var(--border); border-radius: 999px; background: var(--field-bg); }
.boss-mech-pick{ display: flex; flex-wrap: wrap; gap: 6px; }
.boss-mech-pick .boss-mech{ cursor: pointer; padding-left: 8px; }
.boss-mech-pick .boss-mech.locked{ opacity: .7; cursor: default; }
.boss-desc{ margin: 0; font-size: 14px; }
.boss-journal{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; }
.boss-journal.sub{ padding-left: 18px; border-left: 2px solid var(--border-soft); margin-top: 6px; }
.boss-journal p{ margin: 3px 0 0; color: var(--text-muted); }
.boss-journal-head{ display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.boss-flag{ font-size: 10.5px; padding: 0 6px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-muted); }
.boss-text{ font-size: 14px; line-height: 1.55; }
.boss-roles{ display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.boss-role{ padding: 8px 10px; border: 1px solid var(--border-soft); border-radius: 8px; background: var(--field-bg); font-size: 13.5px; }
.boss-role p{ margin: 4px 0 0; }
.boss-role-head{ display: flex; align-items: center; gap: 6px; font-weight: 700; }
.boss-classes{ display: flex; flex-direction: column; gap: 4px; }
.boss-class-row{ display: grid; grid-template-columns: 120px 1fr; gap: 8px; align-items: center; font-size: 13.5px; padding: 3px 0; border-bottom: 1px solid var(--border-soft); }
.boss-class{ display: inline-flex; align-items: center; gap: 5px; font-weight: 700; }
.boss-roles-edit{ display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.boss-roles-edit label, .boss-class-edit label{ display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.boss-class-edit{ display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px 14px; }
@media (max-width: 800px){
  .boss-layout{ grid-template-columns: 1fr; }
  .boss-list{ position: static; }
  .boss-picker-row{ flex-direction: column; gap: 4px; }
  .boss-picker-row .tac-park-title{ padding-top: 0; }
}
.home-tasks{ margin: 6px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; }
.home-tasks ul{ margin: 2px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.home-tasks ul li{ display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tac-note-text{ white-space: pre-wrap; margin: 0; font-size: 14px; }
@media (max-width: 640px){
  .tac-abilities{ grid-template-columns: 1fr; }
  .tac-park-title{ flex-basis: 100%; }
  .tac-tok{ min-width: 26px; height: 26px; font-size: 11px; }
}

.loot-howto{ margin-top: 10px; padding: 10px 12px; border: 1px solid var(--border-soft); border-radius: 8px; background: var(--fold-body-bg); font-size: 13.5px; }
.loot-howto ol{ margin: 6px 0 0; padding-left: 20px; line-height: 1.55; }
.loot-sr-hint{ margin-top: 10px; }
.loot-sess{ margin-top: 12px; padding: 10px 12px; border: 1px solid var(--gold); border-radius: 8px; background: var(--fold-body-bg); }
.loot-sess-closed{ border-color: var(--border-soft); }
.loot-sess-closed > summary{ cursor: pointer; list-style: none; }
.loot-sess-closed > summary::-webkit-details-marker{ display: none; }
.loot-sess-head{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 6px 14px; }
.loot-sess-head .bis-item-meta{ display: block; font-size: 12.5px; }
.loot-sess-items{ display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
.loot-sess-chip{ display: inline-flex; align-items: center; gap: 6px; font-size: 13px; padding: 2px 8px 2px 2px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-panel); }
.loot-sess-chip.done{ opacity: .7; }
.loot-sess-add{ margin-top: 8px; }
.loot-sess .loot-import{ margin-top: 8px; }
.loot-trade{ font-size: 12px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--teal-bright); color: var(--teal-bright); white-space: nowrap; }
.loot-trade-soon{ border-color: var(--gold-bright); color: var(--gold-bright); font-weight: 700; }
.loot-trade-over{ border-color: var(--danger-bright); color: var(--danger-bright); }
.loot-awarded{ margin-top: 16px; }

.loot-modal{ z-index: 310; padding: 12px; }
.loot-modal-card{ max-width: 1150px; height: 90vh; max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; padding: 16px 18px; }
.loot-modal-body{ flex: 1; min-height: 0; display: grid; grid-template-columns: 270px 1fr; gap: 14px; }
.loot-modal-list{ overflow-y: auto; display: flex; flex-direction: column; gap: 4px; padding-right: 4px; }
.loot-modal-main{ overflow-y: auto; padding-right: 4px; }
.loot-modal-item{ display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; font: inherit; font-size: 13px; padding: 6px 8px; border: 1px solid var(--border-soft); border-radius: 6px; background: var(--field-bg); color: var(--text); cursor: pointer; }
.loot-modal-item:hover{ border-color: var(--gold); }
.loot-modal-item.active{ border-color: var(--gold-bright); background: rgba(var(--gold-bright-rgb),0.1); }
.loot-modal-item.done{ opacity: .6; }
.loot-modal-item .bis-item-meta b{ color: var(--gold-bright); }
.loot-modal-item-head{ padding-bottom: 8px; border-bottom: 1px solid var(--border-soft); margin-bottom: 8px; }
.loot-modal-item-name{ font-size: 16px; font-weight: 700; }
.loot-modal-flags{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0 2px; }
.loot-mode-hint{ margin: 0 0 8px; }
.loot-vote-state{ font-size: 13px; margin-bottom: 6px; }
.loot-vote-table .loot-actions .btn{ margin-left: 3px; }
.loot-votes .bis-item-meta{ display: inline !important; }
.loot-row-lead td{ background: rgba(var(--gold-bright-rgb),0.1); }
.loot-row-lead td:nth-child(7) b{ color: var(--gold-bright); }
.loot-modal-foot{ display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; }
.loot-modal-foot .apply-text-input{ flex: 1 1 260px; }
.loot-modal-done{ font-size: 15px; padding: 10px 12px; border: 1px solid var(--teal-bright); border-radius: 8px; margin: 6px 0 10px; }
@media (max-width: 800px){
  .loot-modal-card{ height: 94vh; max-height: 94vh; padding: 12px; }
  .loot-modal-body{ grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .loot-modal-list{ flex-direction: row; overflow-x: auto; overflow-y: hidden; max-height: none; }
  .loot-modal-item{ flex: 0 0 200px; }
  .loot-vote-table th:nth-child(5), .loot-vote-table td:nth-child(5), .loot-vote-table th:nth-child(6), .loot-vote-table td:nth-child(6){ display: none; }
  .loot-modal-main{ overflow-x: auto; }
  .loot-vote-table{ min-width: 600px; }
}

/* Home dashboard (js/home-dashboard.js) */
.home-dash-section{ padding-top: 32px; padding-bottom: 8px; }
.home-dash-grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 1100px; }
.home-card-todo{ max-width: 1100px; }
.home-card{ margin-bottom: 0; display: flex; flex-direction: column; gap: 6px; }
.home-card-title{ font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--gold-bright); margin-bottom: 4px; display: flex; align-items: center; gap: 8px; }
.home-card-wide{ grid-column: span 2; }
.home-card-raid{ border-color: rgba(var(--gold-bright-rgb),0.35); }
.home-card-todo{ margin-bottom: 16px; border-color: var(--gold); }
.home-text{ margin: 0; font-size: 14px; line-height: 1.55; color: var(--text); }
.home-raid-title{ font-size: 17px; font-weight: 700; }
.home-status{ margin: 4px 0 0; font-size: 13.5px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.home-status-good{ color: var(--teal-bright); font-weight: 600; }
.home-status-todo{ color: var(--gold-bright); font-weight: 600; }
.home-links{ display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 8px; }
.home-list{ margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.home-list li{ display: flex; align-items: center; gap: 8px; }
.home-todo{ margin: 0; padding: 0; list-style: none; }
.home-todo li{ display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--border-soft); font-size: 14px; }
.home-todo li:last-child{ border-bottom: 0; }
.home-steps{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.home-steps li{ display: flex; gap: 10px; align-items: flex-start; }
.home-steps p{ margin: 2px 0 0; font-size: 13px; color: var(--text-muted); }
.home-step-num{ flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--gold-bright); color: var(--gold-bright); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
@media (max-width: 760px){
  .home-card-wide{ grid-column: auto; }
  .home-steps{ grid-template-columns: 1fr; }
  .home-dash-grid{ grid-template-columns: 1fr; }
}

.home-facts{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 6px 0; }
.home-facts div{ padding: 6px 10px; border: 1px solid var(--border-soft); border-radius: 6px; background: var(--fold-body-bg); }
.home-facts dt{ font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.home-facts dd{ margin: 2px 0 0; font-weight: 700; color: var(--gold-bright); }
@media (max-width: 520px){ .home-facts{ grid-template-columns: 1fr; } }

/* Home hero: countdown + slim variant for members (js/home.js, js/home-dashboard.js) */
.hero-countdown{ margin: -12px 0 24px; font-size: 15px; color: var(--text); letter-spacing: .02em; }
.hero-countdown b{ font-family: 'Cinzel', serif; font-size: 28px; color: var(--gold-bright); margin-right: 2px; }
.hero.hero-compact{ min-height: 0; padding: 36px 6vw 40px; }
.hero-compact .hero-title{ font-size: clamp(30px, 4.5vw, 48px); margin-bottom: 4px; }
.hero-compact .hero-tagline{ margin-bottom: 10px; }
.hero-compact .hero-desc{ display: none; }
.hero-compact .hero-countdown{ margin: 0 0 16px; }
.hero-compact .hero-countdown b{ font-size: 22px; }
.home-votes{ display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.home-vote{ display: flex; align-items: center; gap: 10px; text-align: left; font: inherit; font-size: 14px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--field-bg); color: var(--text); cursor: pointer; }
.home-vote:hover{ border-color: var(--gold); }
.home-vote-go{ margin-left: auto; font-size: 12.5px; font-weight: 700; color: var(--gold-bright); white-space: nowrap; }

/* Home: next 7 days strip (js/home-dashboard.js) */
.home-week{ display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin: 2px 0 4px; }
.home-day{ display: flex; flex-direction: column; gap: 4px; min-height: 74px; padding: 6px; border: 1px solid var(--border-soft); border-radius: 6px; background: var(--fold-body-bg); min-width: 0; }
.home-day.raid-day{ border-color: rgba(var(--gold-bright-rgb),0.35); }
.home-day.has-raid{ border-color: var(--gold); background: rgba(var(--gold-bright-rgb),0.06); }
.home-day-head{ display: flex; justify-content: space-between; align-items: baseline; gap: 4px; font-size: 12px; }
.home-day-head span{ color: var(--text-muted); font-size: 11px; }
.home-day-empty{ font-size: 11px; color: var(--text-muted); font-style: italic; }
.home-day-raid{ display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 5px; align-items: center; text-align: left; font: inherit; font-size: 12px; padding: 4px 5px; border: 1px solid var(--border); border-radius: 5px; background: var(--field-bg); color: var(--text); cursor: pointer; min-width: 0; }
.home-day-raid:hover{ border-color: var(--gold); }
.home-day-st{ grid-row: span 2; font-weight: 700; width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; border: 1px solid var(--border); }
.home-day-title{ font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.home-day-time{ color: var(--text-muted); font-size: 11px; }
.st-in .home-day-st{ border-color: var(--teal-bright); color: var(--teal-bright); }
.st-signed .home-day-st{ border-color: var(--teal-bright); color: var(--teal-bright); opacity: .8; }
.st-todo .home-day-st{ border-color: var(--gold-bright); color: var(--gold-bright); background: rgba(var(--gold-bright-rgb),0.15); }
.st-no .home-day-st, .st-closed .home-day-st{ color: var(--text-muted); }
.home-week-legend{ display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 6px; font-size: 11.5px; color: var(--text-muted); }
.home-card-sub{ margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--border-soft); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
@media (max-width: 760px){
  .home-week{ grid-template-columns: 1fr; gap: 4px; }
  .home-day{ flex-direction: row; align-items: center; min-height: 0; gap: 8px; }
  .home-day-head{ flex: 0 0 92px; }
  .home-day-raid{ flex: 1; }
  .home-day:not(.raid-day):not(.has-raid){ display: none; }
}

/* Home: guild numbers for guests (publicStats) */
.home-stats{ display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 4px 0 2px; }
.home-stats div{ display: flex; align-items: baseline; gap: 6px; }
.home-stats b{ font-family: 'Cinzel', serif; font-size: 24px; color: var(--gold-bright); }
.home-stats span{ font-size: 13px; color: var(--text-muted); }

/* Game-data changelog in the Patch-Updates (js/forever-changes.js) and the Wowhead article dropdown */
.fc-auto-tag{ font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--teal-bright); color: var(--teal-bright); margin-left: 8px; }
.fc-old{ color: var(--text-muted); text-decoration: line-through; text-decoration-color: var(--danger-bright); }
.fc-new{ color: var(--teal-bright); font-weight: 700; }
.fc-arrow{ color: var(--gold-bright); margin: 0 3px; }
.fc-del{ color: var(--danger-bright); text-decoration: line-through; background: rgba(var(--gold-bright-rgb),0.06); border-radius: 3px; padding: 0 2px; }
.fc-ins{ color: var(--teal-bright); font-weight: 700; text-decoration: none; background: rgba(var(--gold-bright-rgb),0.1); border-radius: 3px; padding: 0 2px; }
.fc-tag{ font-size: 10.5px; padding: 0 6px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-muted); }
.fc-tag-new{ border-color: var(--teal-bright); color: var(--teal-bright); }
.fc-hint{ font-size: 12.5px; color: var(--text-muted); font-style: italic; }
.fc-more{ list-style: none; color: var(--text-muted); font-size: 12.5px; }
.fc-class-link{ background: none; border: 0; padding: 0; font: inherit; font-weight: 700; cursor: pointer; text-decoration: underline dotted; }
.fc-auto-block{ margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border); }
.classdive-update-text li{ margin-bottom: 4px; }
.fc-items{ list-style: none; padding-left: 4px; }
.fc-items li{ display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
.fc-items li::before{ content: '•'; color: var(--gold-bright); margin-right: 2px; }
.fc-sep{ margin-left: -4px; }
.news-select{ width: 100%; margin-bottom: 8px; background: var(--field-bg); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 4px 6px; font: inherit; font-size: 12px; cursor: pointer; }

/* Game icons (js/game-icons.js): headings, roles, class / spec mentions */
.game-icon{ display: inline-block; vertical-align: -3px; border-radius: 4px; border: 1px solid rgba(0,0,0,0.6); box-shadow: 0 0 0 1px rgba(var(--gold-bright-rgb),0.25); object-fit: cover; }
h2 .game-icon{ vertical-align: -4px; margin-right: 4px; }
.home-card-title .game-icon, .raid-col-head .game-icon{ width: 18px; height: 18px; vertical-align: -4px; margin-right: 2px; }
.game-mention{ white-space: nowrap; font-weight: 600; color: var(--class-color); }
.game-mention .game-icon{ width: 16px; height: 16px; margin-right: 3px; }
.fc-class-link .game-icon{ width: 16px; height: 16px; margin-right: 4px; }
.role-counts{ display: inline-flex; gap: 10px; margin-left: 8px; }
.role-count{ display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--text); }
.game-spec-heading{ font-weight: inherit; color: inherit; }