/* ============================================
   TRACE OS — Discord-Native Design System
   Exact Discord dark-theme color tokens
   ============================================ */

:root {
  color-scheme: dark;
  --bg-primary:   #1e1f22;
  --bg-secondary: #2b2d31;
  --bg-tertiary:  #313338;
  --bg-floating:  #111214;
  --bg-accent:    #3a3d44;
  --bg-mod-faint: hsla(220,8%,100%,.06);
  --bg-mod-subtle:hsla(220,8%,100%,.10);
  --bg-mod-strong:hsla(220,8%,100%,.16);
  --text-normal:  #dbdee1;
  --text-muted:   #b5bac1;
  --text-faint:   #949ba4;
  --header-primary:#f2f3f5;
  --header-secondary:#b5bac1;
  --brand:        #5865F2;
  --brand-hover:  #4752C4;
  --brand-active: #3C45A5;
  --green:        #3ba55d;
  --green-hover:  #2d7d46;
  --red:          #ed4245;
  --red-hover:    #c03537;
  --yellow:       #f0b232;
  --input-bg:     #1e1f22;
  --border-subtle:#3f4147;
  --border-faint: #2b2d31;
  --scrollbar-thin:#4a4d55;
  --bg-modifier-hover: hsla(220,8%,100%,.10);
  --bg-modifier-selected: hsla(220,8%,100%,.16);
  --bg-mod-hover: hsla(220,8%,100%,.10);
  --font: 'Inter', 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Consolas', 'Monaco', monospace;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --sidebar-w: 240px;
  --header-h: 48px;
  --nav-row-h: 32px;
  --nav-row-h-touch: 40px;
  --nav-pad-x: 8px;
  --nav-pad-y: 6px;
  --nav-font: 14px;
  --nav-font-sm: 12px;
  --nav-gap: 4px;
  --nav-segment-bg: #1e1f22;
  --nav-segment-active: #404249;
}

@media (min-width: 1025px) {
  :root {
    --nav-row-h: 36px;
    --nav-pad-x: 10px;
    --nav-pad-y: 7px;
    --nav-font: 15px;
    --nav-font-sm: 13px;
    --nav-gap: 4px;
  }
}

@media (min-width: 1440px) {
  :root {
    --nav-row-h: 38px;
    --nav-pad-x: 12px;
    --nav-pad-y: 8px;
    --nav-font: 15px;
    --nav-font-sm: 13px;
    --sidebar-w: 248px;
  }
}

/* ===== Reset ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
body {
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-normal);
  background: var(--bg-tertiary);
  -webkit-font-smoothing: antialiased;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
a { color: inherit; text-decoration: none; }
img { display: block; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select, textarea {
  font-family: inherit;
  font-size: 14px;
  color: var(--text-normal);
  background: var(--input-bg);
  border: 1px solid var(--border-faint);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  outline: none;
  width: 100%;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
input:hover, select:hover, textarea:hover { border-color: var(--border-subtle); background: #1a1b1e; }
input:focus, select:focus, textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
input.input-error, select.input-error, textarea.input-error { border-color: var(--red); box-shadow: 0 0 0 1px var(--red); }
textarea { resize: vertical; min-height: 60px; }
/* Hide number input spinners */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
select {
  background: var(--bg-tertiary);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none'%3e%3cpath d='M7 10l5 5 5-5' stroke='%23b5bac1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 20px;
  padding-right: 36px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 42px;
}
select:focus {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none'%3e%3cpath d='M7 10l5 5 5-5' stroke='%23b5bac1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
}
select option {
  background: var(--surface-panel);
  color: var(--text-normal);
  padding: 10px 12px;
  font-size: 14px;
}
select option:hover,
select option:checked {
  background: var(--surface-hover);
}
select::-ms-expand { display: none; }
table { width: 100%; border-collapse: separate; border-spacing: 0; border-radius: 8px; overflow: hidden; background: var(--bg-secondary); }
thead { background: var(--bg-tertiary); }
th { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); padding: 10px 14px; text-align: left; border-bottom: 2px solid var(--border-faint); white-space: nowrap; }
td { font-size: 13px; padding: 10px 14px; border-bottom: 1px solid var(--border-faint); color: var(--text-normal); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: rgba(255, 255, 255, 0.045); }
tbody tr { transition: background 0.15s ease; }
.table-container { border-radius: 8px; overflow-x: auto; border: 1px solid var(--border-faint); }

/* ===== Views ===== */
.view { display: none; position: fixed; inset: 0; }
.view.active { display: flex; }
.hidden { display: none !important; }

/* ===== Rang-Rollen mapping (settings) ===== */
.rr-mapping-head {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 12px;
  padding: 10px 0;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
}
.rr-mapping-row {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-faint);
}
.rr-mapping-fam {
  color: var(--text-normal);
  font-weight: 600;
  font-size: 13px;
}
.rr-mapping-fam-only {
  /* user request: move rank name up slightly */
  transform: translateY(-2px);
}

/* ===== Server Selection Screen ===== */
#view-servers {
  align-items: center;
  justify-content: center;
  background: #202225;
}
.servers-page {
  width: 100%;
  max-width: 800px;
  padding: 40px 24px;
  animation: fadeIn .4s ease;
}
.servers-top {
  text-align: center;
  margin-bottom: 32px;
}
.servers-logo {
  width: 72px;
  height: 72px;
  border-radius: 16px;
  margin-bottom: 16px;
}
.servers-top h1 {
  font-size: 24px;
  font-weight: 700;
  color: var(--header-primary);
  margin-bottom: 4px;
}
.servers-top p {
  font-size: 15px;
  color: var(--text-muted);
}
.servers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  max-height: 60vh;
  overflow-y: auto;
  padding: 4px;
}
.server-tile {
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  padding: 20px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  transition: background .15s, box-shadow .15s, transform .1s;
  border: 2px solid transparent;
}
.server-tile:hover {
  background: var(--bg-mod-subtle);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
}
.server-tile.no-bot {
  opacity: .35;
  pointer-events: none;
  cursor: default;
}
.server-tile.server-tile-disabled {
  opacity: .58;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.server-tile.server-tile-disabled:hover {
  background: var(--bg-secondary);
  transform: none;
  box-shadow: none;
}
.server-tile.back-tile {
  border-color: var(--brand);
  background: rgba(88, 101, 242, 0.1);
}
.server-tile.back-tile:hover {
  background: rgba(88, 101, 242, 0.18);
}
.server-tile.back-tile .server-tile-icon {
  background: var(--brand);
  color: #fff;
}
.server-tile-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-accent);
  font-weight: 700;
  font-size: 18px;
  flex-shrink: 0;
  overflow: hidden;
  color: var(--text-normal);
}
.server-tile-icon img { width: 100%; height: 100%; object-fit: cover; }
.server-tile-info { flex: 1; min-width: 0; }
.server-tile-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--header-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.server-tile-role {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}
.server-tile-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 3px;
  flex-shrink: 0;
}
.server-tile-badge.admin { background: rgba(88, 101, 242, 0.22); color: var(--brand); }
.server-tile-badge.member { background: rgba(35,165,89,.15); color: var(--green); }
.server-tile-badge.nobot { background: rgba(148,155,164,.15); color: var(--text-muted); }
.servers-footer {
  text-align: center;
  margin-top: 24px;
}

/* ===== Login (Discord-style two-column) ===== */
#view-login {
  align-items: center;
  justify-content: center;
  background: var(--bg-tertiary);
}
.login-bg {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-tertiary);
  animation: fadeIn .4s ease;
}
.login-card {
  background: var(--bg-primary);
  border-radius: var(--radius-md);
  display: flex;
  width: 784px;
  max-width: 95vw;
  box-shadow: 0 8px 32px rgba(0,0,0,.45);
  overflow: hidden;
}
.login-left {
  flex: 1;
  padding: 32px;
}
.login-left h1 {
  font-size: 24px;
  font-weight: 700;
  color: var(--header-primary);
  margin-bottom: 4px;
  text-align: center;
}
.login-left > p {
  color: var(--header-secondary);
  font-size: 15px;
  text-align: center;
  margin-bottom: 20px;
}
.login-field {
  margin-bottom: 20px;
}
.login-field label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.btn-login {
  width: 100%;
  padding: 14px;
  font-size: 15px;
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
}
.login-hint {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 4px;
}
.login-hint a {
  color: var(--brand);
  font-size: 13px;
}
.login-hint a:hover { text-decoration: underline; }
.login-right {
  width: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  border-left: 1px solid var(--border-faint);
}
.login-qr-area {
  text-align: center;
}
.login-logo-box {
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 600px) {
  .login-card { flex-direction: column; }
  .login-right { width: 100%; border-left: none; border-top: 1px solid var(--border-faint); padding: 20px; }
}

/* ===== Buttons (Discord-native) ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
  font-family: inherit;
  transition: background-color 150ms ease-in-out, color 150ms ease-in-out, opacity 150ms ease-in-out, box-shadow 150ms ease-in-out, transform 100ms ease-out;
}
.btn:active:not(:disabled) { transform: scale(0.98) translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-blurple { background: var(--brand); color: #fff; }
.btn-blurple:hover:not(:disabled) { background: var(--brand-hover); }
.btn-blurple:active:not(:disabled) { background: var(--brand-active); }
.btn-secondary { background: var(--bg-accent); color: var(--text-normal); }
.btn-secondary:hover:not(:disabled) { background: #4f5258; }
.btn-secondary:active:not(:disabled) { background: #5c5f66; }
.btn-danger { background: var(--red); color: #fff; }
.btn-danger:hover:not(:disabled) { background: var(--red-hover); }
.btn-success { background: var(--green); color: #fff; }
.btn-success:hover:not(:disabled) { background: var(--green-hover); }
.btn-ghost { background: transparent; color: var(--text-muted); }
.btn-ghost:hover:not(:disabled) { background: var(--bg-mod-faint); color: var(--text-normal); }
.btn-sm { padding: 4px 12px; font-size: 12px; }
.btn-lg { padding: 12px 24px; font-size: 16px; border-radius: var(--radius-md); }

/* ===== Regelwerk Tabs ===== */
.rw-tab { background: var(--bg-secondary); color: var(--text-muted); cursor: pointer; transition: background .15s, color .15s; font-weight: 600; }
.rw-tab:hover { background: var(--bg-mod-subtle); color: var(--text-normal); }
.rw-tab.active { background: var(--brand); color: #fff; }

/* ===== Regelwerk Rule Formatting ===== */
.rw-rule-body { padding: 16px; background: var(--bg-tertiary); border-radius: 6px; font-size: 13.5px; line-height: 1.65; color: var(--text-normal); font-family: var(--font); }
.rw-sep { height: 1px; background: var(--bg-mod-subtle); margin: 14px 0; }
.rw-card-divider { height: 2px; background: linear-gradient(90deg, transparent, var(--bg-mod-subtle), transparent); margin: 8px 0; }

/* Discord markdown styles */
.dc-md-h1 { font-weight: 700; font-size: 20px; color: var(--header-primary); margin: 0; text-transform: capitalize; letter-spacing: .2px; }
.dc-md-h3 { font-weight: 700; font-size: 15px; color: var(--header-primary); padding: 8px 0 4px; margin: 0; }
.dc-md-rule { padding: 2px 0 0; color: var(--text-normal); }
.dc-md-rule strong { color: var(--header-primary); font-weight: 600; }
.dc-md-quote { border-left: 3px solid var(--bg-mod-subtle); padding: 2px 0 2px 12px; margin: 2px 0 6px; color: var(--text-muted); font-style: italic; font-size: 13px; }
.dc-md-bullet { padding: 1px 0 1px 16px; color: var(--text-normal); position: relative; }
.dc-md-bullet::before { content: "\2022"; position: absolute; left: 4px; color: var(--text-muted); }
.dc-md-text { padding: 2px 0; color: var(--text-normal); }

/* Legacy classes kept for compatibility */
.rw-section-title { font-weight: 700; font-size: 14px; color: var(--header-primary); padding: 10px 0 4px; text-transform: uppercase; letter-spacing: .3px; }
.rw-rule-num { padding: 3px 0 2px 4px; color: var(--text-normal); font-weight: 600; }
.rw-rule-bullet { padding: 1px 0 1px 20px; color: var(--text-muted); position: relative; }
.rw-rule-bullet::before { content: "\2022"; position: absolute; left: 8px; color: var(--brand); }
.rw-rule-text { padding: 2px 0; color: var(--text-normal); }

/* ===== App Frame ===== */
.app-frame,
.app-shell {
  display: flex;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
}

.touch-target {
  min-width: 44px;
  min-height: 44px;
}

/* Ensure sidebar parent containers pass height down so sidebar-scroll can overflow-y */
.nav-drawer-shell { display: flex; height: 100%; min-height: 0; }
.drawer-admin-nav { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }

/* ===== Sidebar ===== */
.sidebar {
  width: var(--sidebar-w);
  background: var(--bg-secondary);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.sidebar-header {
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  border-bottom: 1px solid var(--bg-tertiary);
  box-shadow: 0 1px 0 rgba(0,0,0,.2), 0 1.5px 0 rgba(0,0,0,.06);
  flex-shrink: 0;
}
.sidebar-title { font-size: 15px; font-weight: 700; color: var(--header-primary); }
.sidebar-title span { color: var(--brand); }
.sidebar-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 8px 8px; -webkit-overflow-scrolling: touch; }

/* Channel list (Discord style) */
.nav-category {
  margin-bottom: 2px;
}
.nav-cat-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 8px;
  cursor: pointer;
  user-select: none;
  border-radius: var(--radius-sm);
  transition: background .1s;
}
.nav-cat-header:hover {
  background: var(--bg-mod-faint);
}
.nav-cat-icon {
  width: 16px;
  height: 16px;
  color: var(--text-muted);
  flex-shrink: 0;
}
.nav-cat-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--text-muted);
  flex: 1;
}
.nav-cat-chevron {
  width: 16px;
  height: 16px;
  color: var(--text-muted);
  transition: transform .2s;
  flex-shrink: 0;
}
.nav-category.collapsed .nav-cat-chevron {
  transform: rotate(-90deg);
}
.nav-cat-items {
  overflow: hidden;
  margin-left: 17px;
  border-left: 2px solid var(--border-subtle);
}
.nav-category.collapsed .nav-cat-items {
  display: none;
}
.channel {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 4px 4px 10px;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background .1s, color .1s;
  margin-bottom: 1px;
}
.channel:hover { background: var(--bg-mod-faint); color: var(--header-secondary); }
.channel.active { background: var(--bg-mod-subtle); color: var(--header-primary); }
.ch-icon { width: 16px; height: 16px; flex-shrink: 0; opacity: .7; }
.channel.active .ch-icon { opacity: 1; }

/* Admin visibility */
.admin-only { display: none !important; }
body.is-admin .admin-only { display: flex !important; }
body.is-admin .admin-only.settings-col { display: block !important; }
body.is-admin .admin-only.content-card { display: block !important; }
body.is-admin .nav-category.admin-only { display: block !important; }

/* Personal-only: hidden when in admin mode */
body.is-admin .personal-only { display: none !important; }
body.is-admin .nav-category.personal-only { display: none !important; }

/* Personal mode: no left sidebar — navigation via header tabs only */
body:not(.is-admin) .nav-drawer-shell { display: none !important; }
body:not(.is-admin) .nav-drawer-backdrop { display: none !important; }
body:not(.is-admin) .personal-nav { display: inline-flex; }
body.is-admin .personal-nav { display: none; }
body:not(.is-admin) #nav-drawer-toggle { display: none !important; }

/* Nav drawer toggle button (burger) — hidden on desktop regardless of cascade */
@media (min-width: 1025px) {
  #nav-drawer-toggle {
    display: none !important;
  }
}

/* Nav drawer toggle button (burger) */
#nav-drawer-toggle {
  /* Desktop: hidden (sidebar is already visible). Mobile: enabled via media query. */
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  color: var(--text-muted);
  background: var(--bg-mod-faint);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
  flex-shrink: 0;
  position: relative;
  z-index: 12001;
  -webkit-tap-highlight-color: transparent;
}
#nav-drawer-toggle:hover { color: var(--header-primary); background: var(--bg-mod-hover); }
#nav-drawer-toggle:active { transform: translateY(0.5px); }

/* === Personal Nav (header tabs, Discord-style underline) =================
   Sits in the header's dedicated center grid column.
   - No outer body / capsule / gradient — only text + an underline indicator.
   - Each tab fills the full header height so hover/active surfaces span the
     entire tab area instead of a smaller inner pill.
   - Widths are stable: font-weight does NOT change between states, so the
     active tab cannot shift its siblings by even a sub-pixel.
   - Position stability comes from the .content-header grid (left | nav | right),
     not from this element's own width. */
.personal-nav {
  display: none;
  position: static;
  height: var(--header-h);
  justify-self: center;
  align-items: stretch;
  gap: 4px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  z-index: 1;
}
.personal-nav-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-width: 96px;
  padding: 0 18px;
  background: transparent;
  border: 0;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .01em;
  white-space: nowrap;
  cursor: pointer;
  transition: color .15s ease, background-color .15s ease;
}
.personal-nav-btn::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 0;
  height: 2px;
  background: var(--brand);
  border-radius: 2px 2px 0 0;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .18s cubic-bezier(.4,0,.2,1), opacity .15s ease;
  opacity: 0;
  pointer-events: none;
}
.personal-nav-btn:hover {
  color: var(--header-primary);
  background: rgba(255, 255, 255, .035);
}
.personal-nav-btn:hover::after {
  opacity: .4;
  transform: scaleX(.6);
}
.personal-nav-btn.active {
  color: var(--header-primary);
  background: transparent;
}
.personal-nav-btn.active::after {
  opacity: 1;
  transform: scaleX(1);
}
.personal-nav-btn:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
  border-radius: 4px;
}
@media (max-width: 520px) {
  .personal-nav-btn {
    min-width: 0;
    padding: 0 12px;
    font-size: 13px;
  }
  .personal-nav-btn::after { left: 8px; right: 8px; }
}
.personal-settings-btn {
  display: none;
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 6px;
  border-radius: var(--radius-sm);
  transition: color .15s, background .15s;
  line-height: 0;
}
.personal-settings-btn:hover {
  color: var(--text-normal);
  background: var(--bg-modifier-hover);
}
body:not(.is-admin) .personal-settings-btn { display: flex; }

/* Clickable member links */
.member-link {
  color: var(--text-normal);
  cursor: pointer;
  text-decoration: none;
  border-bottom: 1px dashed rgba(255,255,255,.2);
  padding-bottom: 1px;
  transition: color .15s, border-color .15s;
}
.member-link:hover {
  text-decoration: none;
  color: var(--brand);
  border-bottom: 1px solid var(--brand);
}

.member-link-static {
  color: var(--text-normal);
  cursor: default;
  text-decoration: none;
  border-bottom: none;
}

.dashboard-readonly-banner {
  border-color: rgba(88, 101, 242, 0.28);
  background: rgba(88, 101, 242, 0.08);
}

.section.dashboard-readonly .tag-picker,
.section.dashboard-readonly .dc-toggle,
.section.dashboard-readonly .toggle-switch,
.section.dashboard-readonly .cd-wrap {
  pointer-events: none;
  opacity: 0.6;
}

#permissions-discord-detail .tag-picker,
#permissions-tab-detail .tag-picker,
#permissions-dashboard-detail .tag-picker,
#permissions-dashboard-detail .dash-perm-role-editor .dc-toggle,
#permissions-dashboard-detail .dashboard-team-ranks-panel .tag-picker {
  pointer-events: auto;
  opacity: 1;
}

.dashboard-readonly-disabled {
  opacity: 0.6;
}

/* Coming soon placeholder */
.coming-soon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  margin-top: 12px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-mod-faint);
  border-radius: var(--radius-md);
  border: 1px dashed var(--border-subtle);
}

/* ===== Combo Search (searchable dropdown) ===== */
.combo-search-wrap {
  position: relative;
}
.combo-search-input {
  width: 100%;
}
.combo-search-list {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 220px;
  overflow-y: auto;
  background: var(--bg-floating);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  z-index: 100;
  box-shadow: 0 4px 12px rgba(0,0,0,.4);
}
.combo-search-wrap.open .combo-search-list {
  display: block;
}
.combo-search-item {
  padding: 8px 12px;
  cursor: pointer;
  font-size: .875rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.combo-search-item:hover,
.combo-search-item.active {
  background: var(--bg-mod-hover);
}
.combo-search-item .car-value {
  color: var(--text-muted);
  font-size: .75rem;
}

/* ===== Panel Footer (user area) ===== */
.panel-footer {
  position: relative;
  border-top: 1px solid var(--bg-tertiary);
  background: #e3e5e8;
  flex-shrink: 0;
}
.user-panel {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  height: 52px;
  cursor: pointer;
  transition: background .1s;
}
.user-panel:hover { background: var(--bg-mod-faint); }
.panel-avatar { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; object-fit: cover; }
.panel-info { flex: 1; min-width: 0; }
.panel-name { font-size: 13px; font-weight: 600; color: var(--header-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel-status { font-size: 11px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ===== Panel Actions (slide-up buttons) ===== */
.panel-actions {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s cubic-bezier(.4,0,.2,1), padding .3s ease;
  padding: 0 8px;
}
.panel-footer.open .panel-actions {
  max-height: 160px;
  padding: 4px 8px 8px;
}
.panel-action {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  width: 100%;
  transition: background .1s, color .1s;
}
.panel-action:hover { background: var(--bg-mod-faint); color: var(--text-normal); }
.panel-action-danger:hover { background: rgba(218,55,60,.12); color: var(--red); }

/* ===== Content ===== */
.content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-primary);
  position: relative;
  min-width: 0;
  width: 100%;
}
.content-header {
  height: var(--header-h);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  padding: 0 16px;
  border-bottom: 1px solid var(--bg-tertiary);
  box-shadow: 0 1px 0 rgba(0,0,0,.2), 0 1.5px 0 rgba(0,0,0,.06);
  flex-shrink: 0;
  position: relative;
  z-index: 10;
  background: var(--bg-primary);
}
.content-heading {
  min-width: 0;
  justify-self: start;
}
.content-header-actions {
  min-width: 0;
  justify-self: end;
}
.content-header h2 { font-size: 15px; font-weight: 700; color: var(--header-primary); }
/* scrollbar-gutter: stable reserves space for the vertical scrollbar even when
   content fits — this keeps the personal-nav and content from shifting when
   switching between sections of different heights (Übersicht ↔ Leaderboard). */
.section { display: none; flex: 1; overflow-y: auto; scrollbar-gutter: stable; padding: 16px; }
.section.active { display: block; }
#section-logs.active { display: flex; flex-direction: column; overflow-y: hidden; }
#section-logs .content-card { display: flex; flex-direction: column; min-height: 0; flex: 1; }
#section-logs #logs-tab-all { display: flex; flex-direction: column; min-height: 0; flex: 1; }
#section-logs #logs-tab-modules { overflow-y: auto; flex: 1; min-height: 0; }
#section-logs #logs-tab-detail { overflow-y: auto; flex: 1; min-height: 0; }
#section-logs #logs-tab-discord { overflow-y: auto; flex: 1; min-height: 0; }
#section-logs #logs-tab-discord .content-card { flex: none; }
#section-logs #logs-tab-dlog-browse { overflow-y: auto; flex: 1; min-height: 0; }
#section-logs #logs-tab-dlog-browse .content-card { flex: none; }

/* ===== Home Layout ===== */
.home-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 20px;
  animation: fadeIn .3s ease;
  align-items: start;
}

/* Profile Card (Discord-style) */
.profile-card {
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-faint);
}
.profile-banner {
  height: 88px;
  background: linear-gradient(135deg, #5865F2 0%, #4752C4 100%);
}
.profile-body { padding: 0 20px 20px; position: relative; }
.profile-avatar {
  width: 84px; height: 84px;
  border-radius: 50%;
  border: 6px solid var(--bg-secondary);
  position: absolute;
  top: -48px;
  left: 20px;
  object-fit: cover;
  background: var(--bg-tertiary);
}
.profile-username {
  margin-top: 44px;
  font-size: 20px;
  font-weight: 700;
  color: var(--header-primary);
  line-height: 1.2;
}
.profile-user {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 4px;
}
.profile-tag {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 4px;
}
.profile-divider {
  height: 1px;
  background: var(--border-faint);
  margin: 16px 0;
}
.profile-section h3 {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.profile-family {
  font-size: 14px;
  font-weight: 600;
  color: var(--brand);
}
.profile-value { font-size: 14px; color: var(--text-normal); font-weight: 500; }
.profile-section + .profile-section { margin-top: 16px; }

/* Stats Row */
.stats-column { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.stats-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.stat-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-faint);
  border-radius: var(--radius-lg);
  padding: 16px;
  text-align: left;
  min-height: 92px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 8px;
}
.stat-header {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}
.stat-big {
  font-size: 24px;
  font-weight: 700;
  color: var(--header-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  margin-top: 2px;
}
.stat-big.stat-date { font-size: 16px; font-weight: 600; }
.stat-big.is-negative,
.member-stat-value.is-negative,
.payout-amount.is-negative,
.lb-val.is-negative,
.pay-grid-amount.is-negative {
  color: var(--red) !important;
}

/* Chart */
.chart-wrap, .leaderboard-wrap {
  background: var(--bg-secondary);
  border: 1px solid var(--border-faint);
  border-radius: var(--radius-lg);
  padding: 18px;
}
.chart-head {
  font-size: 13px;
  font-weight: 600;
  color: var(--header-primary);
  margin-bottom: 14px;
  letter-spacing: .01em;
}
.chart-wrap canvas { max-height: 220px; }
.home-payout-chart-card .home-earnings-timeline-shell canvas {
  max-height: none;
}
.home-payout-chart-card .home-earnings-timeline-shell:hover,
.home-payout-chart-card .dash-chart-host:hover {
  background: transparent !important;
}
.home-payout-chart-card:hover,
.home-payout-chart-card:hover .home-payout-chart-layout,
.home-payout-chart-card:hover .home-analytics-grid,
.home-payout-chart-card .chart-wrap,
.home-payout-chart-card .chart-wrap:hover,
.home-payout-chart-card .home-earnings-insight-card,
.home-payout-chart-card .home-earnings-insight-card:hover {
  background-color: var(--bg-secondary) !important;
}
.home-payout-chart-card .home-earnings-timeline-shell,
.home-payout-chart-card .home-earnings-timeline-shell:hover,
.home-payout-chart-card .dash-chart-host,
.home-payout-chart-card .dash-chart-host:hover {
  background: transparent !important;
  background-color: transparent !important;
}

/* Leaderboard */
.lb-card {
  overflow: hidden;
  padding: 24px;
}
.lb-card .card-toolbar { padding: 0; margin-bottom: 18px; }
.lb-card .card-toolbar h3 { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.lb-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 20px;
  padding: 4px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-faint);
}
.lb-tab {
  font-size: 12.5px;
  padding: 8px 14px;
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  font-weight: 600;
  transition: background .15s, color .15s, transform .15s;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
}
.lb-tab:hover { background: rgba(255,255,255,0.05); color: var(--text-normal); }
.lb-tab.active {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.lb-card .lb-tabs {
  gap: 6px;
  padding: 6px;
  margin-bottom: 22px;
}
.lb-card .lb-tab {
  font-size: 14px;
  padding: 10px 16px;
  border-radius: 8px;
  min-height: 40px;
}
.lb-podium { display: none; }

/* ===== Modern leaderboard (personal view) — Discord-native list ===== */
.lb2-list {
  display: flex;
  flex-direction: column;
  background: var(--bg-secondary);
  border: 1px solid var(--border-faint);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.lb2-row {
  display: grid;
  grid-template-columns: 32px 36px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 8px 16px;
  transition: background 150ms ease-in-out;
  border-bottom: 1px solid var(--border-faint);
}
.lb2-row:last-child { border-bottom: 0; }
.lb2-row:hover { background: rgba(255,255,255,0.03); }
.lb2-row-self {
  background: rgba(88,101,242,0.10);
  box-shadow: inset 3px 0 0 var(--brand);
}
.lb2-row-self:hover { background: rgba(88,101,242,0.14); }
.lb2-rank-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.lb2-rank-gold,
.lb2-rank-silver,
.lb2-rank-bronze {
  border-radius: 50%;
  font-weight: 700;
  font-size: 12px;
}
.lb2-rank-gold   { background: #fcd34d; color: #422006; }
.lb2-rank-silver { background: #d1d5db; color: #1f2937; }
.lb2-rank-bronze { background: #d97706; color: #fff; }
.lb-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #5865F2 0%, #4752C4 100%);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  user-select: none;
  flex-shrink: 0;
}
.lb-avatar-img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
  background: linear-gradient(135deg, #5865F2 0%, #4752C4 100%);
}
.lb2-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--header-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}
.lb2-name a { color: inherit; text-decoration: none; }
.lb2-name a:hover { color: var(--brand); }
.lb2-val {
  font-size: 14px;
  font-weight: 600;
  color: var(--header-primary);
  font-variant-numeric: tabular-nums;
  text-align: right;
  letter-spacing: -0.01em;
}

.lb-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--radius-sm); transition: background .12s; }
.lb-row:hover { background: var(--bg-mod-faint); }
.lb-row.lb-row-self { background: rgba(88,101,242,.12); }
.lb-row.lb-row-self:hover { background: rgba(88,101,242,.16); }
.lb-rank {
  width: 30px;
  font-size: 13px; font-weight: 600;
  color: var(--text-muted);
  text-align: center;
  flex-shrink: 0;
}
.lb-name { flex: 1; font-size: 13px; font-weight: 500; color: var(--text-normal); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-val { font-size: 13px; font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* Stat card icons */
.stat-icon { width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px; opacity: .6; }
.stat-warn { color: var(--red) !important; }

/* Chip checkbox */
.chip-check { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--radius-sm); background: var(--bg-tertiary); font-size: 13px; font-weight: 500; color: var(--text-muted); cursor: pointer; transition: all .15s; user-select: none; }
.chip-check:hover { background: var(--bg-mod-faint); color: var(--text-normal); }
.chip-check input:checked + span, .chip-check:has(input:checked) { background: var(--brand); color: #fff; }
.chip-check input { accent-color: var(--brand); }

/* ===== Content Cards ===== */
.content-card {
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-faint);
  padding: 20px;
}
.content-card + .content-card { margin-top: 16px; }
.card-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

/* Blacklist refresh button is in card-toolbar (top right). */
.card-toolbar h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--header-primary);
  letter-spacing: -0.01em;
}
.card-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-shrink: 0;
}
.table-container { overflow-x: auto; }
.empty-state { text-align: center; color: var(--text-muted); padding: 24px; font-size: 13px; }

/* Fixed column layout for member tables */
#mtab-family table,
#mtab-special table,
#mtab-archived table { table-layout: fixed; }
#mtab-family table th:nth-child(1),
#mtab-special table th:nth-child(1),
#mtab-archived table th:nth-child(1) { width: 22%; }
#mtab-family table th:nth-child(2),
#mtab-special table th:nth-child(2),
#mtab-archived table th:nth-child(2) { width: 12%; }
#mtab-family table th:nth-child(3),
#mtab-special table th:nth-child(3),
#mtab-archived table th:nth-child(3) { width: 22%; }
#mtab-family table th:nth-child(4),
#mtab-special table th:nth-child(4),
#mtab-archived table th:nth-child(4) { width: 16%; }
#mtab-family table th:nth-child(5),
#mtab-special table th:nth-child(5),
#mtab-archived table th:nth-child(5) { width: 28%; }
#mtab-family table td,
#mtab-special table td,
#mtab-archived table td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


/* ===== Forms ===== */
.dc-form { margin-top: 8px; }
.module-editor-layout {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.module-editor-layout > .embed-builder {
  order: 1;
  margin-top: 0 !important;
}
.module-settings-stack {
  order: 2;
  margin-top: 0;
}
.module-editor-layout > .editor-action-row {
  order: 3;
  margin-top: 0;
}
.embed-builder.no-scroll {
  overflow-x: visible;
}
.embed-builder.no-scroll .embed-builder-row {
  min-width: 0;
}
.form-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-bottom: 12px; }
.dc-form .form-row { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--text-muted);
}
.result-msg {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: 13px;
}
.result-msg.success { background: rgba(35,165,89,.12); color: var(--green); }
.result-msg.error { background: rgba(218,55,60,.12); color: var(--red); }
.result-msg.info { background: rgba(88,101,242,0.12); color: var(--brand); }

/* Setup pills */
.server-pills { display: flex; gap: 8px; }
.pill {
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 14px;
  background: var(--input-bg);
  color: var(--text-muted);
  transition: all .15s;
  cursor: pointer;
}
.pill:hover { color: var(--text-normal); background: var(--bg-mod-subtle); }
.pill.active { background: var(--brand); color: #fff; }

/* ===== Modals ===== */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  animation: fadeIn .15s ease;
}
.modal-card {
  background: var(--bg-primary);
  border-radius: var(--radius-md);
  padding: 24px;
  width: 440px;
  max-width: 90vw;
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
  animation: modalIn .2s ease;
}
.modal-card h2 { font-size: 20px; font-weight: 700; color: var(--header-primary); margin-bottom: 4px; }
.modal-sub { color: var(--text-muted); font-size: 14px; margin-bottom: 16px; }
.modal-actions { margin-top: 20px; text-align: right; }
.modal-wide { width: 620px; }
.modal-card.fambiz-feld-cycle-modal { width: min(560px, 94vw); max-height: 90vh; display: flex; flex-direction: column; }
.fambiz-feld-cycle-modal .modal-body-scroll { overflow-y: auto; margin: 0 -4px; padding: 0 4px; max-height: min(52vh, 480px); }
.fambiz-feld-cycle-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.fambiz-feld-cycle-modal-badge { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--bg-mod-strong); color: var(--text-normal); white-space: nowrap; }
.fambiz-feld-cycle-progress-row { margin-bottom: 16px; }
.fambiz-feld-cycle-steps-list { display: flex; flex-direction: column; gap: 8px; }
.fambiz-feld-cycle-step-card { display: grid; grid-template-columns: 32px 1fr; gap: 10px 12px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--bg-secondary); border: 1px solid var(--bg-mod-strong); align-items: center; }
.fambiz-feld-cycle-step-card.is-done { border-color: rgba(87, 242, 135, 0.35); }
.fambiz-feld-cycle-step-card.is-pending { opacity: 0.55; }
.fambiz-feld-cycle-step-card.is-pending .fambiz-feld-cycle-step-meta { margin-bottom: 0; }
.fambiz-feld-cycle-step-card.is-active { border-color: rgba(88, 101, 242, 0.55); box-shadow: 0 0 0 1px rgba(88, 101, 242, 0.25); }
.fambiz-feld-cycle-step-card.is-locked .fambiz-feld-cycle-step-meta { margin-bottom: 0; }
.fambiz-feld-cycle-step-badge { display: inline-block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin-bottom: 4px; }
.fambiz-feld-cycle-step-card.is-active .fambiz-feld-cycle-step-badge { color: #5865f2; }
.fambiz-feld-cycle-nav { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; align-items: center; }
.fambiz-feld-cycle-nav .fambiz-feld-cycle-modal-badge { margin-left: auto; }
.fambiz-feld-cycle-step-num { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; background: var(--bg-mod-faint); color: var(--text-muted); }
.fambiz-feld-cycle-step-card.is-done .fambiz-feld-cycle-step-num { background: rgba(87, 242, 135, 0.2); color: #57f287; }
.fambiz-feld-cycle-step-main { min-width: 0; }
.fambiz-feld-cycle-step-title { font-size: 14px; font-weight: 600; color: var(--header-primary); margin-bottom: 2px; }
.fambiz-feld-cycle-step-meta { font-size: 12px; color: var(--text-muted); margin-bottom: 8px; }
.fambiz-feld-cycle-step-card .fambiz-detail-select { width: 100%; }

.fambiz-feld-cycle-modal-overlay .cd-wrap,
.fambiz-feld-cycle-modal-overlay .cd-trigger {
  pointer-events: auto !important;
  opacity: 1 !important;
}

.fambiz-feld-cycle-modal-overlay .cd-trigger.cd-disabled {
  pointer-events: auto !important;
  opacity: 1 !important;
  cursor: pointer;
}
.fambiz-feld-cycle-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 12px; margin-bottom: 12px; border-radius: var(--radius-sm); background: var(--bg-secondary); border: 1px solid var(--bg-mod-strong); font-size: 13px; color: var(--text-normal); }
.fambiz-feld-cycle-summary strong { color: var(--header-primary); }
.fambiz-feld-setup-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 12px; margin-bottom: 12px; border-radius: var(--radius-sm); background: var(--bg-secondary); border: 1px solid var(--bg-mod-strong); font-size: 13px; }
.fambiz-feld-setup-modal .fambiz-choice-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.fambiz-feld-setup-modal .fambiz-setup-choice-btn { min-width: 88px; }
.modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.modal-close { font-size: 24px; color: var(--text-muted); padding: 4px; border-radius: var(--radius-sm); }
.modal-close:hover { background: var(--bg-mod-faint); color: var(--text-normal); }

/* Settings (legacy removed — now full-screen) */

/* ===== Toasts ===== */
#toasts { position: fixed; bottom: 20px; right: 20px; z-index: 999; display: flex; flex-direction: column-reverse; gap: 6px; }
.toast {
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,.35);
  animation: toastIn .25s ease;
}
.toast.success { background: var(--green); }
.toast.error { background: var(--red); }
.toast.info { background: var(--brand); }
.toast.out { animation: toastOut .25s ease forwards; }

/* Payout history rows */
.payout-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px 16px;
  align-items: center;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  transition: background .1s;
}
.payout-row:hover { background: var(--bg-mod-faint); }
.payout-row + .payout-row { border-top: 1px solid var(--border-faint); }
.payout-amount { font-weight: 700; color: var(--green); white-space: nowrap; text-align: right; justify-self: end; }
.payout-date { font-size: 12px; color: var(--text-muted); }
.payout-info { font-size: 13px; color: var(--text-normal); }

/* Modern payout summary table */
.pay-table-row td { vertical-align: middle; }
.pay-name-cell { font-weight: 500; }
.pay-num-cell {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pay-total-cell {
  font-size: 15px;
}

/* Moderation payout: centered headers + values per column */
#section-moderation-payout #pay-tab-list .pay-summary-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
#section-moderation-payout #pay-tab-list .pay-summary-table {
  table-layout: fixed;
  width: 100%;
  min-width: 920px;
  border-collapse: separate;
  border-spacing: 0;
}
#section-moderation-payout #pay-tab-list .pay-summary-table .pay-col-name { width: 17%; }
#section-moderation-payout #pay-tab-list .pay-summary-table .pay-col-num { width: 10%; }
#section-moderation-payout #pay-tab-list .pay-summary-table .pay-col-ticket { width: 8%; }
#section-moderation-payout #pay-tab-list .pay-summary-table .pay-col-total { width: 12%; }
#section-moderation-payout #pay-tab-list .pay-summary-table thead th,
#section-moderation-payout #pay-tab-list .pay-summary-table tbody td {
  padding: 10px 8px;
  vertical-align: middle;
}
#section-moderation-payout #pay-tab-list .pay-summary-table thead th:first-child,
#section-moderation-payout #pay-tab-list .pay-summary-table tbody td.pay-name-cell {
  text-align: left;
}
#section-moderation-payout #pay-tab-list .pay-summary-table thead th:not(:first-child),
#section-moderation-payout #pay-tab-list .pay-summary-table tbody td.pay-num-cell,
#section-moderation-payout #pay-tab-list .pay-summary-table tbody td.pay-ticket-cell,
#section-moderation-payout #pay-tab-list .pay-summary-table tbody td.pay-sanction-cell,
#section-moderation-payout #pay-tab-list .pay-summary-table tbody td.pay-total-cell {
  text-align: center;
  font-variant-numeric: tabular-nums;
}
#section-moderation-payout #pay-tab-list .pay-muted-amt {
  color: var(--text-muted);
}
#section-moderation-payout #pay-tab-list .pay-missed-amt {
  color: var(--yellow);
  font-weight: 600;
}
#section-moderation-payout #pay-tab-list .pay-ticket-badge {
  color: #5865f2;
  font-weight: 600;
}
#section-moderation-payout #pay-tab-list .pay-ticket-note {
  display: block;
  color: #5865f2;
  font-size: 11px;
  font-weight: 600;
  margin-top: 2px;
}
#section-moderation-payout #pay-tab-list .pay-total-amt {
  font-size: 15px;
}

/* Blacklist list tab: Auszahlung-style summary table */
#section-blacklist #bl-tab-list .bl-summary-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
#section-blacklist #bl-tab-list .bl-summary-table {
  table-layout: fixed;
  width: 100%;
  min-width: 960px;
  border-collapse: separate;
  border-spacing: 0;
}
#section-blacklist #bl-tab-list .bl-summary-table .bl-col-player { width: 22%; }
#section-blacklist #bl-tab-list .bl-summary-table .bl-col-id { width: 9%; }
#section-blacklist #bl-tab-list .bl-summary-table .bl-col-reason { width: 24%; }
#section-blacklist #bl-tab-list .bl-summary-table .bl-col-status { width: 11%; }
#section-blacklist #bl-tab-list .bl-summary-table .bl-col-expires { width: 12%; }
#section-blacklist #bl-tab-list .bl-summary-table .bl-col-created { width: 10%; }
#section-blacklist #bl-tab-list .bl-summary-table .bl-col-by { width: 8%; }
#section-blacklist #bl-tab-list .bl-summary-table .bl-col-actions { width: 4%; }
#section-blacklist #bl-tab-list .bl-summary-table thead th,
#section-blacklist #bl-tab-list .bl-summary-table tbody td {
  padding: 10px 8px;
  vertical-align: middle;
}
#section-blacklist #bl-tab-list .bl-summary-table thead th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  font-weight: 600;
  background: var(--background-secondary);
  border-bottom: 1px solid var(--background-modifier-accent);
}
#section-blacklist #bl-tab-list .bl-summary-table thead th:first-child,
#section-blacklist #bl-tab-list .bl-summary-table tbody td.bl-player-cell,
#section-blacklist #bl-tab-list .bl-summary-table tbody td.bl-reason-cell {
  text-align: left;
}
#section-blacklist #bl-tab-list .bl-summary-table thead th:not(:first-child):not(:last-child),
#section-blacklist #bl-tab-list .bl-summary-table tbody td.bl-id-cell,
#section-blacklist #bl-tab-list .bl-summary-table tbody td.bl-status-cell,
#section-blacklist #bl-tab-list .bl-summary-table tbody td.bl-expires-cell,
#section-blacklist #bl-tab-list .bl-summary-table tbody td.bl-created-cell,
#section-blacklist #bl-tab-list .bl-summary-table tbody td.bl-by-cell {
  text-align: center;
}
#section-blacklist #bl-tab-list .bl-summary-table tbody tr.bl-table-row:hover td {
  background: rgba(88, 101, 242, 0.06);
}
#section-blacklist #bl-tab-list .bl-summary-table tbody tr.bl-table-row td {
  border-bottom: 1px solid var(--background-modifier-accent);
}
#section-blacklist #bl-tab-list .bl-summary-table tbody tr.bl-table-row:last-child td {
  border-bottom: none;
}
#section-blacklist #bl-tab-list .bl-reason-cell {
  color: var(--text-normal);
  word-break: break-word;
}
#section-blacklist #bl-tab-list .bl-actions-cell {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  flex-wrap: wrap;
  white-space: nowrap;
}
#section-blacklist #bl-tab-list .bl-member-avatar {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}
#section-blacklist #bl-tab-list .bl-member-avatar .lb-avatar-img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
#section-blacklist #bl-tab-list .bl-table-avatar-fallback {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, #faa61a 0%, #c77b07 100%);
}
#section-blacklist #bl-tab-list .bl-table-avatar-fallback.is-permanent {
  background: linear-gradient(135deg, #ed4245 0%, #b32024 100%);
}

/* Auszahlungssystem: Discord embed-like field (label above, value below) */
.pay-type-rule {
  display: flex;
  flex-direction: column;
  min-width: 0;
  font-size: 13px;
}
.pay-sanction-amt { color: var(--red); font-weight: 600; }
.pay-strike-badge { margin-left: 4px; font-size: 10px; }
.pay-ticket-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: rgba(88,101,242,.15);
  color: #b5bac1;
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 12px;
  font-weight: 600;
}
.pay-ticket-note {
  color: #b5bac1;
  font-size: 11px;
  font-weight: 600;
  margin-left: 4px;
}

/* Payout system grid (3-column like Discord embed) */
.pay-summary-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: .01em;
}
.pay-summary-bar .pay-cat { white-space: nowrap; }
.pay-summary-bar .pay-cat-val { color: var(--brand); font-weight: 700; }
.pay-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 640px) { .pay-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .pay-grid { grid-template-columns: 1fr; } }
.pay-grid-item {
  padding: 12px;
  border-radius: var(--radius-sm);
  background: var(--bg-primary);
  transition: background .1s;
}
.pay-grid-item:hover { background: var(--bg-mod-faint); }
.pay-grid-amount {
  font-size: 18px;
  font-weight: 800;
  color: var(--header-primary);
  margin-bottom: 2px;
}
.pay-grid-name {
  font-size: 12px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Payout system - category section with continuous left border */
.pay-section {
  border-left: 4px solid var(--section-accent, var(--brand));
  padding-left: 14px;
  margin-bottom: 22px;
}
.pay-section.is-crime  { --section-accent: #ed4245; }
.pay-section.is-biz    { --section-accent: #57f287; }
.pay-section.is-bonus  { --section-accent: #faa61a; }
.pay-section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--header-secondary);
  margin-bottom: 8px;
}
/* Payout system — rows list, no card boxes */
.pay-type-grid {
  display: flex;
  flex-direction: column;
}
.pay-type-card {
  display: grid;
  grid-template-columns: 160px 1fr auto;
  grid-template-areas: "header rules desc";
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: none;
  border-radius: 0;
  overflow: visible;
  gap: 0;
}
.pay-type-card:last-child { border-bottom: none; }
.pay-type-header {
  grid-area: header;
  font-size: 14px;
  font-weight: 700;
  color: var(--header-primary);
  padding-right: 16px;
  border-right: 1px solid rgba(255,255,255,.06);
  align-self: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pay-type-rules {
  grid-area: rules;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 0;
  padding: 0 16px;
}
/* Each rule is a label+value pair displayed inline with a separator */
.pay-type-rule {
  display: flex;
  flex-direction: column;
  padding: 0 20px 0 0;
  min-width: 0;
  font-size: 13px;
}
.pay-type-rule + .pay-type-rule {
  padding-left: 20px;
  border-left: 1px solid rgba(255,255,255,.06);
}
.pay-type-rule.is-accent .pay-type-rule-value { color: var(--header-primary); }
.pay-type-rule.is-muted  .pay-type-rule-value { color: var(--text-muted); font-style: italic; font-size: 12px; }
.pay-type-rule-label {
  color: var(--header-secondary);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  white-space: nowrap;
}
.pay-type-rule-value {
  color: var(--header-primary);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.pay-type-desc {
  grid-area: desc;
  width: 180px;
  box-sizing: border-box;
  background: rgba(0,0,0,.18);
  color: var(--text-normal);
  border: 1px solid var(--bg-mod-faint);
  border-radius: var(--radius-sm);
  padding: 5px 8px;
  resize: vertical;
  font-size: 12px;
  resize: none;
  font-family: inherit;
  min-height: 30px;
  height: 30px;
}
.pay-type-desc:focus { border-color: var(--brand); outline: none; }
.pay-type-desc:hover { border-color: var(--brand); }

/* Payout history */
.pay-hist-item {
  background: var(--bg-primary);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  overflow: hidden;
  transition: background .1s;
}
.pay-hist-row {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  cursor: pointer;
  gap: 12px;
}
.pay-hist-row:hover { background: var(--bg-mod-faint); }
.pay-hist-info { flex: 1; min-width: 0; }
.pay-hist-label { font-size: 14px; font-weight: 600; color: var(--header-primary); }
.pay-hist-meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.pay-hist-total { font-size: 16px; font-weight: 700; color: var(--green); white-space: nowrap; }
.pay-hist-expand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--text-muted);
  padding: 4px;
  transition: transform .2s, color .1s;
}
.pay-hist-row:hover .pay-hist-expand { color: var(--text-normal); }
.pay-hist-expand.open { transform: rotate(180deg); }
.pay-hist-detail { padding: 0 16px 16px; }
.pay-hist-members { list-style: none; margin: 0; padding: 0; }
.pay-hist-member {
  display: flex;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid var(--border-faint);
  gap: 10px;
}
.pay-hist-paid-btn {
  min-width: 96px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-secondary);
  color: var(--text-normal);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  transition: background .15s, border-color .15s, color .15s, opacity .15s;
}
.pay-hist-paid-btn:hover {
  border-color: var(--green);
  color: var(--header-primary);
}
.pay-hist-paid-btn.is-paid {
  background: rgba(87, 242, 135, .16);
  border-color: rgba(87, 242, 135, .45);
  color: var(--green);
}
.pay-hist-paid-btn:disabled {
  cursor: wait;
  opacity: .7;
}
.pay-hist-member-name { flex: 1; font-size: 13px; color: var(--text-normal); display: inline-flex; align-items: center; gap: 6px; }
.pay-hist-member-name.paid { text-decoration: line-through; opacity: .5; }
.pay-hist-status-icon { display: inline-flex; width: 18px; flex-shrink: 0; justify-content: center; }
.pay-hist-status-icon .dash-preview-emoji { vertical-align: -3px; }
.evt-hist-outcome-edit .evt-hist-filter-select,
.evt-hist-outcome-edit .cd-wrap { min-width: 180px; max-width: 240px; }
.evt-hist-outcome-edit .cd-wrap .cd-trigger { min-height: 42px; padding: 10px 12px; font-size: 14px; }
#section-quota #quota-tab-config .form-row { align-items: flex-end; }
#section-quota #quota-tab-config .form-group.ui-grow .cd-wrap,
#section-quota #quota-tab-config .form-group.ui-grow select { width: 100%; }
#section-quota .ui-chart-shell {
  position: relative;
  min-height: 280px;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
#section-quota .ui-chart-shell canvas { flex: 1 1 auto; width: 100%; align-self: stretch; }
#section-quota .quota-chart-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  font-size: 14px;
  color: var(--text-muted);
}
.ins-policy-form-row { align-items: flex-end; flex-wrap: wrap; gap: 12px; }
.ins-policy-form-row .ui-grow { flex: 1 1 220px; min-width: 200px; }
.ins-policy-form-row .form-group .cd-wrap,
.ins-policy-form-row .form-group select { width: 100%; }
.ins-policy-car-group .cd-wrap,
.ins-policy-car-group select { width: 100%; }

/* Versicherungen / Anti-Radar — compact toolbar (Fahrzeugliste-tool style) */
#section-insurance .ins-tool-panel {
  padding: 12px 14px;
}
#section-insurance .ins-tool-panel--list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}
#section-insurance .ins-policy-toolbar {
  margin: 0;
}
#section-insurance .ins-policy-toolbar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 16px;
  width: 100%;
}
#section-insurance .ins-policy-toolbar-row .ins-policy-car-group {
  flex: 1 1 240px;
  min-width: 200px;
  max-width: 520px;
  margin: 0;
}
#section-insurance .ins-policy-toolbar-row .ins-policy-car-group label,
#section-insurance .ins-policy-inline .ins-policy-field label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: 4px;
}
#section-insurance .ins-policy-inline {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
}
#section-insurance .ins-policy-inline .ins-policy-field {
  flex: 0 0 auto;
  margin: 0;
  min-width: 0;
}
#section-insurance .ins-policy-field--duration {
  width: 9.5rem;
}
#section-insurance .ins-policy-field--duration .cd-wrap,
#section-insurance .ins-policy-field--duration select,
#section-insurance .ins-policy-field--duration input {
  width: 100%;
}
#section-insurance .ins-policy-field--custom {
  width: 4.5rem;
}
#section-insurance .ins-policy-field--custom input {
  width: 100%;
  min-height: 36px;
  padding: 6px 8px;
}
#section-insurance .ins-policy-field--cost {
  width: 7.5rem;
}
#section-insurance .ins-policy-field--cost input {
  width: 100%;
  min-height: 36px;
  font-family: var(--font-mono);
  font-size: 13px;
  text-align: right;
}
#section-insurance .ins-policy-inline .ins-add-policy-btn,
#section-insurance .ins-policy-inline .ar-add-policy-btn {
  flex: 0 0 auto;
  width: auto;
  min-height: 36px;
  padding: 6px 12px;
  font-size: 12px;
  white-space: nowrap;
  margin: 0 0 0 4px;
}
#section-insurance .ins-cars-list-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 4px;
}
#section-insurance .ins-tool-panel--list .dc-fahrzeuge-toolbar {
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
}
#section-insurance .ins-tool-panel--list #ins-cars-list.dc-fahrzeuge-list {
  flex: 1 1 auto;
  min-height: 200px;
  max-height: min(60vh, 520px);
}
.ui-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.evt-hist-payout-restored { color: var(--green); font-size: 11px; font-weight: 600; margin-left: 4px; }
.evt-hist-payout-blocked { color: var(--text-muted); font-size: 11px; margin-left: 4px; }
.pay-hist-member-amount { font-size: 13px; font-weight: 600; color: var(--green); white-space: nowrap; }

/* Event cards (clickable) — canonical interactive-card hover */
.event-card,
.log-mod-card,
.bl-card,
.home-feed-item,
.evt-mod-card,
.clickable-row,
.evt-hist-row,
.log-row,
.bl-row {
  transition: background .1s, transform .1s, border-color .1s;
}
.event-card,
.log-mod-card,
.bl-card,
.home-feed-item,
.evt-mod-card {
  border: 1px solid transparent;
}
.event-card {
  background: var(--bg-primary);
  border-radius: var(--radius-sm);
  padding: 14px;
  margin-bottom: 8px;
  cursor: pointer;
}
.event-card:hover,
.log-mod-card:hover,
.log-mod-card:focus,
.bl-card:hover,
.home-feed-item:hover,
.evt-mod-card:hover,
.clickable-row:hover,
.evt-hist-row:hover,
.log-row:hover,
.ins-cars-table tbody tr:hover {
  background: var(--bg-mod-faint);
  border-color: var(--border-subtle);
  transform: translateY(-2px);
}
.bl-row:hover {
  background: var(--bg-mod-faint);
}
.ins-cars-table tbody tr:hover td {
  background: var(--bg-mod-faint);
}
.event-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.event-card-name { font-size: 14px; font-weight: 600; color: var(--header-primary); }
.event-card-date { font-size: 11px; color: var(--text-muted); }
.event-card-meta { font-size: 12px; color: var(--text-muted); }
.event-card-meta span { color: var(--text-normal); font-weight: 600; }

/* Event detail panel */
.event-detail { animation: fadeIn .2s ease; }
.event-detail-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  margin-bottom: 12px;
  padding: 4px 0;
  transition: color .1s;
}
.event-detail-back:hover { color: var(--text-normal); }
.event-detail-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.event-detail-stat {
  background: var(--bg-primary);
  border-radius: var(--radius-sm);
  padding: 12px;
  text-align: center;
}
.event-detail-stat .stat-header { font-size: 10px; font-weight: 600; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; }
.event-detail-stat .stat-big { font-size: 18px; font-weight: 800; color: var(--header-primary); }

/* Payout week group */
.payout-week {
  margin-bottom: 16px;
}
.payout-week-head {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--text-muted);
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border-faint);
}
.payout-breakdown {
  font-size: 12px;
  color: var(--text-faint);
  margin-top: 2px;
}



/* Section description text */
.section-desc {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 12px;
  line-height: 1.4;
}

/* ===== Scrollbar ===== */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thin); border-radius: 4px; min-height: 40px; }
::-webkit-scrollbar-thumb:hover { background: #25262b; }

/* ===== Setup Wizard (Fullpage) ===== */
#view-setup {
  background: var(--bg-tertiary);
  z-index: 60;
  flex-direction: column;
  overflow-x: hidden;
}
.wizard-page {
  width: 100%;
  height: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.wizard-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  border-bottom: 1px solid var(--border-faint);
  background: var(--bg-secondary);
  flex-shrink: 0;
}
.wizard-top-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.wizard-top-left > div {
  min-width: 0;
}
.wizard-logo {
  width: 36px;
  height: 36px;
  border-radius: 8px;
}
.wizard-top-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--header-primary);
}
.wizard-top-sub {
  font-size: 12px;
  color: var(--text-muted);
}
.wizard-skip {
  font-size: 13px;
  color: var(--text-muted);
  padding: 6px 12px;
  border-radius: var(--radius-md);
  transition: background .15s, color .15s;
}
.wizard-skip:hover { background: var(--bg-mod-subtle); color: var(--text-normal); }

.wizard-body {
  display: flex;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.wizard-steps {
  width: 280px;
  flex-shrink: 0;
  padding: 24px 16px;
  border-right: 1px solid var(--border-faint);
  background: var(--bg-secondary);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.wizard-step {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  margin-bottom: 4px;
  cursor: default;
  transition: background .15s;
  position: relative;
}
.wizard-step + .wizard-step::before {
  content: "";
  position: absolute;
  left: 27px;
  top: -8px;
  width: 2px;
  height: 12px;
  background: var(--border-faint);
}
.wizard-step-num {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--bg-mod-faint);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
  transition: background .2s, color .2s;
}
.wizard-step-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.wizard-step-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
}
.wizard-step-sub {
  font-size: 12px;
  color: var(--text-faint);
}
.wizard-step.active {
  background: var(--bg-mod-subtle);
}
.wizard-step.active .wizard-step-num {
  background: var(--brand);
  color: #fff;
}
.wizard-step.active .wizard-step-title {
  color: var(--header-primary);
}
.wizard-step.completed .wizard-step-num {
  background: var(--green);
  color: #fff;
}
.wizard-step.completed .wizard-step-title {
  color: var(--text-normal);
}

.wizard-content {
  flex: 1;
  min-width: 0;
  width: 100%;
  max-width: 880px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 36px 48px;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
}
#view-setup .form-row {
  min-width: 0;
}
#view-setup .form-group {
  min-width: 0;
}
#view-setup .form-group .cd-wrap,
#view-setup .form-group select,
#view-setup .form-group input {
  max-width: 100%;
}
#view-setup .server-pills {
  flex-wrap: wrap;
}
#view-setup #wiz-family-ranks {
  min-width: 0;
}
#view-setup #wiz-family-ranks .rank-row {
  min-width: 0;
}
#view-setup #wiz-family-ranks .rank-row .cd-wrap {
  min-width: 0;
}
.wizard-panel {
  animation: fadeIn .2s ease;
}
.wizard-panel h2 {
  font-size: 22px;
  font-weight: 700;
  color: var(--header-primary);
  margin-bottom: 6px;
}
.wizard-lead {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.5;
  max-width: 640px;
}
.wizard-hint {
  font-size: 12px;
  color: var(--text-faint);
  margin-top: 4px;
}
.wizard-summary {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.wiz-sum-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-faint);
  border-radius: var(--radius-md);
}
.wiz-sum-key {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 500;
}
.wiz-sum-val {
  font-size: 14px;
  color: var(--header-primary);
  font-weight: 600;
  text-align: right;
  max-width: 60%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wiz-sum-val.empty {
  color: var(--text-faint);
  font-weight: 400;
  font-style: italic;
}

.wizard-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-top: 1px solid var(--border-faint);
  background: var(--bg-secondary);
  flex-shrink: 0;
  gap: 24px;
}
.wizard-progress {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 360px;
}
.wizard-progress-bar {
  width: 100%;
  height: 6px;
  background: var(--bg-mod-faint);
  border-radius: 3px;
  overflow: hidden;
}
.wizard-progress-fill {
  height: 100%;
  background: var(--brand);
  border-radius: 3px;
  transition: width .25s ease;
  width: 25%;
}
.wizard-progress-text {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
}
.wizard-footer-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
.wizard-footer-actions .btn {
  white-space: nowrap;
}

/* Tablet: compact step rail */
@media (max-width: 880px) {
  .wizard-top {
    padding: 12px 16px;
  }
  .wizard-steps {
    width: 92px;
    padding: 16px 8px;
  }
  .wizard-step-meta {
    display: none;
  }
  .wizard-step + .wizard-step::before {
    left: 23px;
  }
  .wizard-content {
    padding: 24px 20px;
    max-width: none;
  }
  .wizard-panel h2 {
    font-size: 20px;
  }
  .wizard-footer {
    padding: 14px 16px;
    gap: 16px;
  }
  #view-setup .form-row {
    grid-template-columns: 1fr;
  }
}

/* Mobile: stacked layout, horizontal step strip */
@media (max-width: 640px) {
  .wizard-top {
    padding: 10px 14px;
  }
  .wizard-top-left {
    gap: 10px;
    min-width: 0;
  }
  .wizard-logo {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
  }
  .wizard-top-title {
    font-size: 14px;
  }
  .wizard-top-sub {
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .wizard-body {
    flex-direction: column;
  }
  .wizard-steps {
    width: 100%;
    flex-shrink: 0;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 6px;
    padding: 10px 12px;
    border-right: none;
    border-bottom: 1px solid var(--border-faint);
    overflow-x: auto;
    overflow-y: hidden;
  }
  .wizard-step {
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 44px;
    padding: 8px 6px;
    margin-bottom: 0;
  }
  .wizard-step + .wizard-step::before {
    display: none;
  }
  .wizard-step-num {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }
  .wizard-content {
    flex: 1;
    padding: 18px 14px 24px;
  }
  .wizard-panel h2 {
    font-size: 18px;
    line-height: 1.25;
  }
  .wizard-lead {
    font-size: 13px;
  }
  .wizard-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 12px 14px;
    padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
  }
  .wizard-progress {
    max-width: none;
    width: 100%;
  }
  .wizard-footer-actions {
    width: 100%;
    justify-content: stretch;
  }
  .wizard-footer-actions .btn {
    flex: 1;
    min-width: 0;
    justify-content: center;
  }
  .wiz-sum-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 10px 12px;
  }
  .wiz-sum-val {
    max-width: 100%;
    text-align: left;
    white-space: normal;
    word-break: break-word;
  }
  #view-setup .server-pills {
    gap: 6px;
  }
  #view-setup .server-pills .pill {
    flex: 1 1 calc(50% - 6px);
    min-width: 0;
    padding: 10px 12px;
    text-align: center;
  }
  #view-setup #wiz-family-ranks .rank-row {
    flex-wrap: wrap;
    gap: 8px;
  }
  #view-setup #wiz-family-ranks .rank-row .rank-num {
    flex: 0 0 28px;
  }
  #view-setup #wiz-family-ranks .rank-row .cd-wrap {
    flex: 1 1 100%;
    width: 100%;
  }
}

@media (max-width: 380px) {
  .wizard-footer-actions {
    flex-direction: column;
  }
  .wizard-footer-actions .btn {
    width: 100%;
  }
  #view-setup .server-pills .pill {
    flex: 1 1 100%;
  }
}

/* ===== Settings Full-Screen ===== */
#view-settings {
  background: var(--bg-tertiary);
  z-index: 50;
}
.settings-page {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.settings-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  border-bottom: 1px solid var(--border-faint);
  flex-shrink: 0;
}
.settings-top h1 {
  font-size: 18px;
  font-weight: 700;
  color: var(--header-primary);
}
.settings-close-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  padding: 6px 12px;
  border-radius: var(--radius-md);
  transition: background .15s, color .15s;
}
.settings-close-btn:hover { background: var(--bg-mod-subtle); color: var(--text-normal); }
.settings-layout {
  display: flex;
  flex: 1;
  overflow: hidden;
}
.settings-nav {
  width: 200px;
  padding: 16px;
  overflow-y: auto;
  flex-shrink: 0;
  border-right: 1px solid var(--border-faint);
}
.settings-nav-cat {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--text-muted);
  padding: 12px 8px 4px;
}
.settings-nav-item {
  display: block;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: background .1s, color .1s;
  margin-bottom: 2px;
}
.settings-nav-item:hover { background: var(--bg-mod-faint); color: var(--text-normal); }
.settings-nav-item.active { background: var(--bg-mod-subtle); color: var(--header-primary); }
.settings-content {
  flex: 1;
  overflow-y: auto;
  padding: 24px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.settings-tab { display: none; animation: fadeIn .2s ease; }
.settings-tab.active { display: block; }
.settings-tab h2 { font-size: 18px; font-weight: 700; color: var(--header-primary); }
body.is-admin .settings-nav .admin-only { display: block !important; }

/* Settings shell — full viewport + scroll safety */
#view-settings.view.active {
  flex-direction: column;
  align-items: stretch;
}
#view-settings .settings-page {
  flex: 1;
  min-height: 0;
  width: 100%;
}
.settings-layout {
  min-height: 0;
}
.settings-content {
  min-width: 0;
}
#view-settings .settings-tab {
  max-width: 920px;
  width: 100%;
}
#view-settings .settings-content > .save-bar {
  max-width: 920px;
  width: 100%;
}
#view-settings #settings-rank-limits > div:first-child,
#view-settings #settings-rank-roles > div:first-child {
  flex-wrap: wrap;
  row-gap: 8px;
}
#view-settings .rank-row .cd-wrap {
  flex: 1;
  min-width: 0;
}
#view-settings #cfg-family-ranks .btn.btn-sm {
  margin-left: 0;
}
#view-settings .rl-row {
  flex-wrap: wrap;
  gap: 8px 12px;
}
#view-settings .rl-row > span:nth-child(2) {
  flex: 1 1 12rem;
  min-width: 0;
}
#view-settings #rank-limits-content > div:first-child select {
  max-width: 100%;
}
#view-settings #rank-limits-content > div:last-child {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

@media (max-width: 960px) {
  .settings-layout { flex-direction: column; }
  .settings-nav {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--border-faint);
    display: flex;
    gap: 4px;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 8px 12px;
    flex-shrink: 0;
  }
  .settings-nav-cat { display: none; }
  .settings-nav-item {
    flex-shrink: 0;
    white-space: nowrap;
  }
  .settings-content {
    padding: 20px 16px 28px;
  }
}

@media (max-width: 768px) {
  #view-settings .rr-mapping-head { display: none; }
  #view-settings .rr-mapping-row {
    grid-template-columns: 1fr;
    gap: 6px;
    align-items: stretch;
  }
  #view-settings .rr-mapping-fam-only { transform: none; }
  #view-settings .rr-mapping-select-cell {
    min-width: 0;
  }
}

@media (max-width: 640px) {
  .settings-top {
    padding: 12px 14px;
  }
  .settings-top h1 { font-size: 16px; }
  .settings-close-btn {
    padding: 8px 10px;
    min-height: 44px;
  }
  .settings-content {
    padding: 16px 12px 96px;
  }
  #view-settings .settings-tab h2 { font-size: 16px; }
  #view-settings .content-card {
    padding: 14px 12px;
  }
  #view-settings .card-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  #view-settings .card-toolbar .btn {
    width: 100%;
    justify-content: center;
  }
  #view-settings .form-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  #view-settings .special-role-row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  #view-settings .special-role-row .del-btn {
    align-self: flex-end;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  #view-settings #cfg-family-ranks .btn.btn-sm {
    width: 100%;
    margin-top: 10px !important;
  }
  #view-settings #cfg-family-ranks .btn.btn-sm + .btn.btn-sm {
    margin-top: 8px !important;
  }
  #view-settings .save-bar {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: max(12px, env(safe-area-inset-bottom, 0px));
    width: auto;
    margin: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    z-index: 120;
  }
  #view-settings .save-bar-text {
    white-space: normal;
    text-align: center;
  }
  #view-settings .save-bar-actions {
    flex-direction: column;
    width: 100%;
  }
  #view-settings .save-bar-actions .btn {
    width: 100%;
    justify-content: center;
    min-height: 44px;
  }
  #view-settings .rl-row {
    flex-direction: column;
    align-items: stretch;
    padding: 12px 0;
  }
  #view-settings .rl-row > span {
    width: auto !important;
    text-align: left !important;
  }
  #view-settings .rl-row input[type="number"] {
    width: 100% !important;
    max-width: none;
  }
  #view-settings .rl-row > div {
    width: 100%;
    flex-wrap: wrap;
  }
}

@media (max-width: 480px) {
  .settings-nav { padding: 6px 8px; }
  .settings-nav-item {
    font-size: 13px;
    padding: 10px 12px;
  }
}

.members-detail-screen {
  margin-top: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  background: var(--bg-secondary);
  border: 1px solid var(--border-faint);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.members-detail-screen.hidden,
#members-overview.hidden {
  display: none;
}
.member-profile-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-faint);
  background: var(--bg-secondary);
  flex-shrink: 0;
}
.member-profile-topbar-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--header-primary);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.member-profile-topbar .btn-danger {
  margin-left: auto;
}
.member-profile-shell {
  display: grid;
  /* ~280px sidebar ≈ Discord profile card width → banner height ~99px at 680:240 */
  grid-template-columns: 280px minmax(0, 1fr);
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.member-profile-sidebar {
  display: flex;
  flex-direction: column;
  background: #2b2d31;
  border-right: 1px solid var(--border-faint);
  min-height: 0;
  overflow-y: auto;
}
/* Discord profile banner: 680×240 (17:6) — same aspect as per-server / Nitro banners */
.member-profile-banner {
  width: 100%;
  aspect-ratio: 680 / 240;
  height: auto;
  max-height: none;
  background: #5865f2;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.member-profile-banner-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}
.member-profile-banner-img.hidden {
  display: none;
}
.member-profile-banner.has-image {
  background-color: #2b2d31;
}
.member-profile-banner.has-animated-banner .member-profile-banner-img {
  image-rendering: auto;
}
.member-profile-identity {
  padding: 0 16px 14px;
  margin-top: -44px;
  position: relative;
  z-index: 1;
}
.member-profile-avatar-wrap {
  position: relative;
  width: 88px;
  height: 88px;
  flex-shrink: 0;
}
/* Discord-style presence: sits on the avatar corner, ring = panel bg */
.member-profile-status-dot {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 5px solid var(--bg-secondary, #2b2d31);
  background: #57f287;
  z-index: 3;
  box-sizing: border-box;
  pointer-events: none;
}
.member-profile-status-dot.hidden {
  display: none;
}
.member-profile-avatar {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  border: 6px solid #2b2d31;
  background: #1e1f22;
  object-fit: cover;
  display: block;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}
.member-profile-avatar-fallback {
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 800;
  color: #fff;
  background: #5865f2;
  border: 6px solid #2b2d31;
}
.member-profile-avatar-fallback.hidden {
  display: none;
}
.member-profile-avatar.is-hidden {
  opacity: 0;
  position: absolute;
  pointer-events: none;
}
.member-profile-display-name {
  margin: 8px 0 2px;
  font-size: 18px;
  font-weight: 700;
  color: var(--header-primary);
  line-height: 1.2;
  word-break: break-word;
}
.member-profile-discord-handle {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--text-muted);
}
.member-profile-chip {
  display: none;
}
.member-profile-rank-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}
.member-profile-rank-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-height: 22px;
  padding: 0 8px 0 6px;
  border-radius: 4px;
  background: #3f4147;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
}
.member-profile-role-dot {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #949ba4;
}
.member-profile-role-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.25;
  color: #f2f3f5;
}
.member-profile-nav {
  display: flex;
  flex-direction: column;
  padding: 8px;
  gap: 2px;
  border-top: 1px solid var(--border-faint);
  margin-top: auto;
}
.member-profile-nav-btn {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: #b5bac1;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.member-profile-nav-btn:hover {
  background: rgba(79, 84, 92, 0.35);
  color: #fff;
}
.member-profile-nav-btn.is-selected {
  background: rgba(88, 101, 242, 0.28);
  color: #fff;
}
.member-profile-main {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  background: #313338;
}
.member-profile-panel {
  display: none;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 24px 28px 32px;
  -webkit-overflow-scrolling: touch;
}
.member-profile-twink-card {
  margin-top: 20px;
  padding: 16px 18px;
  background: #2b2d31;
  border: 1px solid var(--border-faint);
  border-radius: var(--radius-md);
}
.member-profile-twink-hint {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.45;
}
.member-profile-twink-form-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.member-profile-twink-identity-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.member-forum-bewerb-disclaimer {
  margin: 0 0 10px;
  font-size: 12px;
  line-height: 1.45;
  color: #949ba4;
}
.member-forum-scan-status {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
  max-width: min(360px, calc(100vw - 40px));
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  background: var(--brand);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  animation: none;
  pointer-events: none;
}
.member-forum-group {
  margin-bottom: 16px;
}
.member-forum-group:last-child {
  margin-bottom: 0;
}
.member-forum-group-title {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #949ba4;
}
.member-profile-panel.is-active {
  display: block;
}
.member-profile-panel-title {
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 700;
  color: var(--header-primary);
}
.member-profile-subtitle {
  margin: 20px 0 10px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.member-profile-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.member-profile-panel-head .member-profile-panel-title {
  margin: 0;
}
.member-profile-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px 24px;
  padding: 16px;
  background: #2b2d31;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-faint);
}
.member-profile-meta-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.member-profile-meta-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
}
.member-profile-meta-value {
  font-size: 14px;
  color: var(--text-normal);
}
.member-profile-archive-note {
  margin-top: 16px;
  padding: 12px;
  border-radius: var(--radius-sm);
  background: rgba(237, 66, 69, 0.12);
  border: 1px solid rgba(237, 66, 69, 0.25);
}
.member-profile-id-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.member-profile-id-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: #2b2d31;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-faint);
}
.member-profile-id-row.is-active {
  border-color: rgba(88, 101, 242, 0.5);
}
.member-forum-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}
.member-forum-pill {
  padding: 6px 12px;
  border-radius: 999px;
  border: none;
  background: #2b2d31;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.member-forum-pill.is-active {
  background: rgba(88, 101, 242, 0.35);
  color: #fff;
}
.member-forum-snapshot {
  margin-bottom: 14px;
  padding: 12px 14px;
  background: #2b2d31;
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--text-muted);
}
.member-forum-snapshot:empty {
  display: none;
}
.member-forum-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.member-forum-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: #2b2d31;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-faint);
}
.member-forum-item-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--header-primary);
  word-break: break-word;
}
.member-forum-item-title a {
  color: #f2f3f5;
  text-decoration: none;
}
.member-forum-item-title a:hover {
  color: #fff;
  text-decoration: underline;
}
.member-forum-item-meta {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
}
.member-forum-status {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
}
.member-forum-panel.hidden {
  display: none;
}
.member-forum-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-bottom: 12px;
  padding: 8px 10px;
  background: #2b2d31;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
}
.member-forum-filter-row {
  display: contents;
}
.member-forum-filter-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #949ba4;
  flex-shrink: 0;
  margin-right: 2px;
}
.member-forum-sort-select,
.member-forum-select {
  width: auto;
  min-width: 0;
  max-width: 11rem;
  padding: 4px 28px 4px 8px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #1e1f22;
  color: #f2f3f5;
  font-size: 12px;
  line-height: 1.3;
  cursor: pointer;
  flex-shrink: 0;
}
.member-forum-sort-select:focus,
.member-forum-select:focus {
  border-color: #5865f2;
  outline: none;
  box-shadow: 0 0 0 2px rgba(88, 101, 242, 0.25);
}
.member-forum-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  flex: 1 1 12rem;
  min-width: 0;
}
.member-forum-chip {
  padding: 4px 10px;
  border-radius: 999px;
  border: none;
  background: #383a40;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.member-forum-chip:hover {
  color: #fff;
  background: #4e5058;
}
.member-forum-chip.is-active {
  background: #5865f2;
  color: #fff;
  border-color: #5865f2;
}
.member-forum-bewerb-section {
  margin-bottom: 20px;
}
.member-forum-bewerb-section:last-child {
  margin-bottom: 0;
}
.member-forum-section-title {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--header-primary);
}
.member-forum-section-sub {
  margin: -4px 0 10px;
  font-size: 12px;
  color: var(--text-muted);
}
.member-forum-unoff-hint {
  margin: 0 0 12px;
}
.member-forum-filter-bar.hidden {
  display: none;
}
.member-forum-item-main {
  flex: 1;
  min-width: 0;
}
.member-forum-item-head {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex-wrap: wrap;
}
.member-forum-mark {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 3px 8px;
  border-radius: 4px;
  line-height: 1.3;
  color: #fff;
}
.member-forum-mark--approved {
  background: #1e6b3a;
}
.member-forum-mark--rejected,
.member-forum-mark--archive {
  background: #4e5058;
}
.member-forum-mark--pending,
.member-forum-mark--on_consideration {
  background: rgba(250, 166, 26, 0.45);
}
.member-forum-mark--reviewed {
  background: #9ee5b0;
  color: #fff !important;
}
.member-forum-mark--open,
.member-forum-mark--filed,
.member-forum-mark--resolved {
  background: rgba(88, 101, 242, 0.55);
}
.member-forum-status--approved {
  background: #1e6b3a;
  color: #e8f5e9;
}
.member-forum-status--pending,
.member-forum-status--on_consideration {
  background: rgba(250, 166, 26, 0.28);
  color: #faa61a;
}
.member-forum-status--rejected,
.member-forum-status--archive {
  background: #4e5058;
  color: #dcddde;
}
.member-forum-status--reviewed {
  background: rgba(87, 242, 135, 0.22);
  color: #7fd99a;
}
.member-forum-status--filed {
  background: rgba(88, 101, 242, 0.25);
  color: #949cf7;
}
.member-reg-app-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.member-reg-app-card {
  padding: 14px 16px;
  background: #2b2d31;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-faint);
}
.member-reg-app-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.member-reg-app-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--header-primary);
}
.member-history-intro {
  margin: 0 0 16px;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.45;
}
.member-history-track {
  position: relative;
  padding: 4px 0 20px 20px;
  border-left: 2px solid #3f4147;
}
.member-history-spine {
  display: none;
}
.member-history-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.member-history-year {
  list-style: none;
  margin: 16px 0 6px -20px;
  padding-left: 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #949ba4;
}
.member-history-year:first-child {
  margin-top: 0;
}
.member-history-entry {
  position: relative;
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  gap: 0 12px;
  align-items: stretch;
}
.member-history-node {
  position: relative;
  width: 10px;
  height: 10px;
  margin-top: 14px;
  margin-left: -25px;
  border-radius: 50%;
  background: #1e1f22;
  border: 2px solid var(--member-tl-color, #5865f2);
  box-shadow: 0 0 0 3px #2b2d31;
  z-index: 2;
}
.member-history-card {
  position: relative;
  display: flex;
  min-width: 0;
  background: #313338;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}
.member-history-card-accent {
  width: 4px;
  flex-shrink: 0;
}
.member-history-card-body {
  flex: 1;
  min-width: 0;
  padding: 8px 12px 10px;
}
.member-history-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 12px;
  margin-bottom: 4px;
}
.member-history-card-title {
  font-size: 14px;
  font-weight: 600;
  color: #f2f3f5;
}
.member-history-card-date {
  font-size: 11px;
  color: #949ba4;
  white-space: nowrap;
}
.member-history-card-subtitle {
  font-size: 13px;
  color: #dbdee1;
  margin-top: 2px;
  line-height: 1.35;
}
.member-history-card-detail {
  font-size: 12px;
  color: #b5bac1;
  line-height: 1.4;
  margin-top: 4px;
}
.member-reg-app-card--forum {
  border-left: 3px solid #5865f2;
}
.member-history-empty {
  padding: 32px 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
}
.member-data-table {
  width: 100%;
  font-size: 13px;
}
.member-forum-loading {
  padding: 24px;
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
}
.member-profile-sidebar-meta {
  width: 100%;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
}
.member-profile-sidebar-meta-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.member-profile-sidebar-archive {
  width: 100%;
  margin-top: 8px;
  padding: 10px 12px;
  background: rgba(237, 66, 69, 0.08);
  border-radius: var(--radius-sm);
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-normal);
}
.member-profile-sidebar-archive .member-profile-meta-label {
  display: block;
  margin-bottom: 4px;
  color: #ed4245;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.member-profile-panel-head .member-profile-twink-open-btn {
  flex-shrink: 0;
}
.member-profile-charts {
  display: grid;
  gap: 16px;
  margin-top: 16px;
}
.member-profile-chart-card {
  padding: 14px 16px;
  background: #2b2d31;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.member-profile-chart-card .member-profile-subtitle {
  margin: 0 0 12px;
}
@media (max-width: 860px) {
  .member-profile-shell {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }
  .member-profile-sidebar {
    border-right: none;
    border-bottom: 1px solid var(--border-faint);
    max-height: none;
    overflow: visible;
  }
  .member-profile-nav {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-top: 0;
    -webkit-overflow-scrolling: touch;
  }
  .member-profile-nav-btn {
    flex: 0 0 auto;
    white-space: nowrap;
  }
  .member-profile-identity {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin-top: -32px;
  }
  .member-profile-avatar {
    width: 56px;
    height: 56px;
  }
  .member-profile-display-name {
    flex: 1;
    min-width: 120px;
    margin: 0;
  }
  .member-profile-discord-handle {
    width: 100%;
    margin: 0;
  }
}
.member-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-top: 12px;
}
#member-detail-stats-section .member-stats-grid {
  gap: 10px;
}
#member-detail-stats-section .member-stat-card {
  padding: 12px 14px;
  min-height: 72px;
  background: #2b2d31;
  border-color: rgba(255, 255, 255, 0.06);
}
.member-stat-card {
  padding: 14px 16px;
  border: 1px solid var(--border-faint);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 80px;
  justify-content: center;
}
.member-stat-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--text-muted);
}
.member-stat-value {
  font-size: 22px;
  font-weight: 800;
  color: var(--header-primary);
  line-height: 1.1;
}
.member-stat-sub {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  margin-right: 4px;
}

/* ===== Members Tabs (legacy fallback) ===== */
.members-tabs { display: flex; gap: 4px; margin-bottom: 16px; }
.members-tab {
  padding: 8px 20px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.members-tab:hover { color: var(--text-normal); }
.members-tab.active { color: var(--header-primary); border-bottom-color: var(--brand); }
.members-panel { display: none; }
.members-panel.active { display: block; }

/* ===== Members — Unified Profile View ===== */
.members-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.members-page-head-text { display: flex; flex-direction: column; gap: 4px; }
.members-page-title {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  color: var(--header-primary);
  line-height: 1.2;
}
.members-page-subtitle {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
}
.members-filter-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 14px;
  margin-bottom: 16px;
}
.members-search-row {
  position: relative;
  display: flex;
  align-items: center;
}
.members-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  display: inline-flex;
  pointer-events: none;
}
.members-search-row input {
  width: 100%;
  height: 40px;
  border-radius: 8px;
  background: var(--bg-tertiary, #1e1f22);
  border: 1px solid rgba(255,255,255,0.04);
  padding: 0 14px 0 40px;
  color: var(--text-normal);
  font-size: 14px;
  outline: none;
  transition: border-color .15s, background .15s;
}
.members-search-row input::placeholder { color: var(--text-muted); }
.members-search-row input:focus {
  border-color: var(--brand);
  background: var(--bg-secondary, #2b2d31);
}
.members-filter-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.members-filter-control {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.members-filter-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  display: inline-flex;
  pointer-events: none;
  z-index: 2;
}
.members-filter-control select,
.members-filter-control .cd-trigger {
  height: 36px;
  border-radius: 8px;
  background: var(--bg-tertiary, #1e1f22);
  border: 1px solid rgba(255,255,255,0.04);
  padding: 0 32px 0 34px;
  color: var(--text-normal);
  font-size: 13px;
  font-weight: 500;
  min-width: 160px;
}
.members-filter-control:nth-child(2) select,
.members-filter-control:nth-child(2) .cd-trigger {
  padding-left: 14px;
}

/* Members overview: header + filters fixed, only the table body scrolls */
#section-members.active {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}
#section-members.active #members-overview:not(.hidden) {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
#section-members.active #members-detail-screen:not(.hidden) {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
#members-overview .members-page-head,
#members-overview .members-filter-card {
  flex-shrink: 0;
}
#members-overview .members-results-card {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin-bottom: 0;
}
.members-results-card { padding: 0; overflow: hidden; }
.members-results-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 18px 22px 6px;
  flex-shrink: 0;
}
.members-results-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--header-primary);
}
.members-results-count {
  font-size: 12px;
  color: var(--text-muted);
}

/* Members overview — Discord-style list */
.members-dc-list-wrap {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.members-dc-list {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.members-dc-row {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 6px 12px;
  border-bottom: 1px solid var(--border-faint);
  cursor: pointer;
  transition: background 150ms ease-in-out;
}
.members-dc-row:last-child { border-bottom: 0; }
.members-dc-row:hover { background: rgba(255, 255, 255, 0.03); }
.members-dc-avatar { flex-shrink: 0; }
.members-dc-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.members-dc-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--header-primary);
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.members-dc-name .member-link,
.members-dc-name .member-link-static {
  color: inherit;
}
.members-dc-name .member-link:hover { color: var(--brand); }
.members-dc-sub {
  display: flex;
  align-items: center;
  min-width: 0;
  overflow: hidden;
  font-size: 12px;
  line-height: 1.35;
}
.members-dc-sub-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  flex-wrap: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.members-dc-sub-sep {
  flex-shrink: 0;
  color: var(--text-faint);
  user-select: none;
  padding: 0 1px;
}
.members-dc-copyable {
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  flex-shrink: 1;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.members-dc-copy-text {
  font-size: 12px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  transition: color 0.15s ease;
}
.members-dc-copy-text--empty {
  color: var(--text-faint);
}
.members-dc-copyable:hover .members-dc-copy-text,
.members-dc-copyable:focus-visible .members-dc-copy-text {
  color: var(--brand);
}
.members-dc-copyable.copied .members-dc-copy-text {
  color: #57f287;
}
.members-dc-end {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.members-dc-end .members-status-badge {
  flex-shrink: 0;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.members-dc-row .members-action-menu { flex-shrink: 0; }
.members-dc-row .members-action-trigger {
  opacity: 0.45;
  transition: opacity 150ms ease-in-out, background 150ms ease-in-out;
}
.members-dc-row:hover .members-action-trigger,
.members-dc-row:focus-within .members-action-trigger {
  opacity: 1;
}
.members-dc-empty,
.members-dc-loading {
  padding: 32px 16px;
  text-align: center;
  color: var(--text-muted);
}
.members-dc-loading .loading-dots {
  justify-content: center;
}

.members-unified-table-wrap {
  flex: 1;
  min-height: 0;
  overflow-x: auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
#section-members .members-dc-list-wrap.members-unified-table-wrap {
  overflow-x: hidden;
}
.members-unified-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--bg-secondary);
}
.members-results-card { position: relative; }
.members-action-popover { z-index: 10000; }
.members-action-popover.members-popover-floating:not([hidden]) {
  position: fixed;
  display: flex;
  z-index: 10050;
  margin: 0;
  width: max-content;
  max-width: min(320px, calc(100vw - 16px));
}
.members-action-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10040;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.members-action-sheet-backdrop.is-visible {
  opacity: 1;
  pointer-events: auto;
}
.members-action-popover.members-popover-as-sheet:not([hidden]) {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  top: auto;
  margin: 0;
  max-width: none;
  z-index: 10050;
  display: flex;
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
}
.members-unified-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.members-unified-table thead th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: none;
  letter-spacing: 0;
  padding: 10px 22px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  background: transparent;
  white-space: nowrap;
}
.members-unified-table tbody td {
  padding: 14px 22px;
  border-bottom: 1px solid rgba(255,255,255,0.03);
  color: var(--text-normal);
  vertical-align: middle;
}
.members-unified-table tbody tr:last-child td { border-bottom: 0; }
.members-unified-table tbody tr:hover td { background: rgba(255,255,255,0.02); }
.members-unified-table .member-ingame-cell .ingame-id-pill {
  display: inline-block;
  font-size: 13px;
  color: var(--text-normal);
  background: transparent;
  border: 0;
  padding: 2px 0;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  cursor: pointer;
  user-select: none;
  transition: color .12s;
}
.members-unified-table .member-ingame-cell .ingame-id-pill:hover {
  color: var(--brand);
}
.members-unified-table .member-ingame-cell .ingame-id-pill.copied {
  color: #2da75a;
}
.members-unified-table thead th,
.members-unified-table tbody td {
  text-align: left;
  vertical-align: middle;
}
.members-unified-table .member-ingame-cell .discord-copy-id,
.members-unified-table .member-twink-cell .discord-copy-id {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}
.members-unified-table .member-twink-cell .member-twink-id-empty {
  color: var(--text-muted);
}
.members-discord-cell {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-normal);
  font-size: 13px;
}
.members-discord-ico { color: var(--text-muted); flex-shrink: 0; }
.members-discord-handle { font-variant-numeric: tabular-nums; }

/* Discord-style copy badge for ID columns. Used by decorateCopyableElement.
   Applied directly to TD/SPAN by replacing innerHTML with discord-copy-label
   plus a hover icon. Use a contents wrapper so table layout is preserved. */
.discord-copy-id {
  cursor: pointer;
  user-select: none;
  transition: color .15s;
}
.discord-copy-id .discord-copy-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 500;
  font-family: var(--font-mono);
  color: var(--text-normal);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-faint);
  border-radius: 6px;
  font-variant-numeric: tabular-nums;
  transition: background .15s, border-color .15s, color .15s;
  position: relative;
}
.discord-copy-id:hover .discord-copy-label {
  background: rgba(88,101,242,0.12);
  border-color: rgba(88,101,242,0.35);
  color: var(--header-primary);
}
.discord-copy-id .discord-copy-icon {
  display: inline-flex;
  align-items: center;
  opacity: 0;
  transition: opacity .15s;
  color: var(--text-muted);
  margin-left: 4px;
  vertical-align: middle;
}
.discord-copy-id .discord-copy-icon svg,
.discord-copy-id .discord-copy-icon i { width: 12px; height: 12px; }
.discord-copy-id:hover .discord-copy-icon { opacity: 0.85; }
.discord-copy-id .discord-copy-success {
  display: none;
  align-items: center;
  gap: 4px;
  background: rgba(45,167,90,0.18);
  color: #2da75a;
  border: 1px solid rgba(45,167,90,0.35);
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
}
.discord-copy-id .discord-copy-success svg,
.discord-copy-id .discord-copy-success i { width: 12px; height: 12px; }
.discord-copy-id.copied .discord-copy-label { display: none; }
.discord-copy-id.copied .discord-copy-icon { display: none; }
.discord-copy-id.copied .discord-copy-success { display: inline-flex; }
/* Name column should not look like a clickable link in this table */
.members-unified-table .member-name-cell .member-link,
.members-unified-table .member-name-cell .member-link-static {
  color: var(--header-primary);
  border-bottom: 0;
  text-decoration: none;
  cursor: pointer;
  font-weight: 500;
  padding-bottom: 0;
}
.members-unified-table .member-name-cell .member-link:hover,
.members-unified-table .member-name-cell .member-link-static:hover {
  color: var(--header-primary);
  border-bottom: 0;
  text-decoration: none;
}
.members-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 999px;
  letter-spacing: 0.2px;
  background: rgba(87, 242, 135, 0.12);
  color: #57f287;
  border: 1px solid rgba(87,242,135,0.18);
}
.members-status-familie,
.members-status-active { background: rgba(87, 242, 135, 0.12); color: #57f287; border-color: rgba(87,242,135,0.18); }
.members-status-archived { background: rgba(180,180,180,0.10); color: #b5bac1; border-color: rgba(180,180,180,0.16); }
.members-status-freunde { background: rgba(88, 101, 242, 0.12); color: #949cf0; border-color: rgba(88,101,242,0.22); }
.members-status-unoff-orga { background: rgba(237, 66, 69, 0.14); color: #ed4245; border-color: rgba(237,66,69,0.28); }
.members-status-special-default { background: rgba(254, 231, 92, 0.10); color: #fee75c; border-color: rgba(254,231,92,0.2); }
.members-col-created { white-space: nowrap; }
.members-col-actions { width: 60px; }
.member-actions-cell { text-align: right; white-space: nowrap; position: relative; z-index: 2; }

.members-action-menu { position: relative; display: inline-block; z-index: 2; }
.members-action-trigger {
  background: transparent;
  border: 0;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, color .15s;
}
.members-action-trigger:hover {
  background: rgba(255,255,255,0.06);
  color: var(--header-primary);
}
.members-action-popover {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  min-width: 200px;
  background: var(--bg-floating, #1e1f22);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.45);
  z-index: 9000;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.members-action-popover[hidden] { display: none; }
.members-action-popover .cd-menu-item {
  background: transparent;
  border: 0;
  text-align: left;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--text-normal);
  cursor: pointer;
}
.members-action-popover .cd-menu-item:hover { background: rgba(255,255,255,0.06); }
.members-action-popover .cd-menu-item-danger { color: #ed4245; }
.members-action-popover .cd-menu-item-danger:hover { background: rgba(237,66,69,0.12); }

/* ===== Embed Builder ===== */
.embed-builder {
  overflow-x: auto;
}
.embed-builder-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 420px);
  align-items: start;
  gap: 24px;
  margin-top: 12px;
  min-width: 720px;
}
.embed-builder-form { display: flex; flex-direction: column; gap: 12px; }
.editor-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.embed-preview-wrap {
  width: min(100%, 420px);
  align-self: start;
  justify-self: end;
  position: sticky;
  top: 12px;
}
.embed-preview-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--text-muted);
  display: block;
  margin-bottom: 8px;
}

/* ── Discord Message Preview (pixel-accurate) ── */
.discord-msg-preview {
  display: flex;
  gap: 16px;
  width: 100%;
  background: var(--bg-primary);
  padding: 16px 48px 16px 20px;
  box-sizing: border-box;
  border-radius: var(--radius-md);
  font-size: 14px;
}
.discord-msg-avatar { flex-shrink: 0; }
.discord-msg-avatar svg, .discord-msg-avatar img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.discord-msg-body { flex: 1; min-width: 0; }
.discord-msg-header { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.discord-msg-name { font-size: 15px; font-weight: 600; color: var(--header-primary); }
.discord-msg-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brand);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  line-height: 15px;
  vertical-align: baseline;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.discord-msg-time { font-size: 11px; color: var(--text-muted); }

.discord-embed {
  display: flex;
  max-width: 100%;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: #2b2d31;
  border: 1px solid rgba(255,255,255,.08);
  margin-top: 4px;
}
.discord-embed-bar {
  width: 4px;
  flex-shrink: 0;
  background: var(--brand);
  border-radius: 3px 0 0 3px;
}
.discord-embed-inner {
  flex: 1;
  min-width: 0;
  padding: 8px 16px 12px 12px;
}
.discord-embed-content {
  margin-bottom: 0;
}
.discord-embed-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--header-primary);
  margin-bottom: 4px;
  word-wrap: break-word;
}
.discord-embed-desc {
  font-size: 13px;
  color: #dcddde;
  line-height: 1.375em;
  white-space: pre-wrap;
  word-wrap: break-word;
}
/* Discord markdown rendered elements */
.discord-embed-desc strong { font-weight: 700; color: var(--header-primary); }
.discord-embed-desc em { font-style: italic; }
.discord-embed-desc del { text-decoration: line-through; }
.discord-embed-desc u { text-decoration: underline; }
.discord-embed-desc code {
  padding: 1.5px 4.5px;
  border-radius: 3px;
  background: #1e1f22;
  font-family: var(--font-mono);
  font-size: 12.5px;
}
.discord-embed-desc .discord-spoiler {
  background: rgba(255,255,255,.12);
  border-radius: 3px;
  padding: 0 3px;
  cursor: pointer;
  color: transparent;
  transition: color .15s, background .15s;
  user-select: none;
}
.discord-embed-desc .discord-spoiler.revealed { color: inherit; background: rgba(78,79,86,.3); }
.discord-embed-desc .discord-mention {
  color: #dee0fc;
  background: rgba(88,101,242,.3);
  border-radius: 3px;
  padding: 0 2px;
  font-weight: 500;
  cursor: pointer;
}
.discord-embed-desc .discord-mention:hover { color: #fff; background: rgba(88,101,242,.6); }
#view-app .discord-embed-desc .discord-channel,
#view-settings .discord-embed-desc .discord-channel {
  color: var(--brand);
  background: rgba(88, 101, 242, 0.15);
  border-radius: 3px;
  padding: 0 2px;
  font-weight: 500;
  cursor: pointer;
}
#view-app .discord-embed-desc .discord-channel::before,
#view-settings .discord-embed-desc .discord-channel::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  vertical-align: text-bottom;
  margin-right: 1px;
  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%235865F2'%3e%3cpath d='M5.88 21l.97-3.46H3.44l.29-1.08h3.41l.78-2.92H4.5l.29-1.08h3.42L9.2 9H10.6l-.98 3.46h2.93L13.54 9h1.42l-.99 3.46h3.41l-.29 1.08h-3.41l-.78 2.92h3.42l-.29 1.08h-3.42L12.6 21h-1.42l.99-3.46H9.24L8.25 21H5.88zm4.14-5.54l.78-2.92H7.87l-.78 2.92h2.93z'/%3e%3c/svg%3e") no-repeat center;
  background-size: 16px;
}
#view-app .discord-embed-desc .discord-channel:hover,
#view-settings .discord-embed-desc .discord-channel:hover {
  color: #fff;
  background: rgba(88, 101, 242, 0.3);
}
.discord-embed-desc .discord-codeblock {
  display: block;
  background: #1e1f22;
  border-radius: 4px;
  padding: 8px;
  margin: 4px 0;
  font-family: var(--font-mono);
  font-size: 12.5px;
  white-space: pre;
  overflow-x: auto;
  color: #dcddde;
}

.discord-embed-image {
  display: none;
  margin-top: 8px;
}
.discord-embed-image.has-img { display: block; }
.discord-embed-image img {
  max-width: 100%;
  border-radius: var(--radius-sm);
  max-height: 220px;
  object-fit: cover;
}

/* Author, fields, footer — see Discohook section at bottom */

.discord-msg-components {
  margin-top: 8px;
  display: flex;
  align-items: stretch;
  gap: 8px;
  flex-wrap: wrap;
}
.discord-btn-preview {
  display: inline-flex;
  flex: 0 1 auto;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  min-width: 0;
  max-width: 100%;
  min-height: 32px;
  border-radius: 3px;
  font-size: 14px;
  font-weight: 500;
  background: var(--green);
  color: #fff;
  cursor: default;
  transition: opacity .17s ease;
  line-height: 1.2;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.discord-btn-preview:hover { opacity: .85; }
.discord-btn-preview .dash-preview-emoji,
.discord-embed-field-value .dash-preview-emoji {
  display: inline-block;
  vertical-align: -4px;
  flex-shrink: 0;
  font-size: 1.1em;
  line-height: 1;
}
.discord-btn-preview.is-primary { background: var(--brand); }
.discord-btn-preview.is-secondary { background: var(--bg-accent); }

/* Simple Discord-like select menu preview */
.discord-select-preview {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  min-height: 32px;
  min-width: 240px;
  max-width: 100%;
  border-radius: 3px;
  background: var(--bg-secondary);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-normal);
  cursor: default;
}
.discord-select-preview-label {
  font-size: 14px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.discord-select-preview-caret {
  color: var(--text-muted);
  flex-shrink: 0;
  font-size: 14px;
  line-height: 1;
}

/* ── Welcome / Goodbye card preview (mirrors Satori-rendered card) ── */
.welcome-card {
  position: relative;
  width: 100%;
  max-width: 520px;
  background: linear-gradient(135deg, #2b2d31 0%, #1e1f22 100%);
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.04);
  font-family: var(--font);
}
.welcome-card-accent {
  height: 4px;
  width: 100%;
  background: #5865F2;
}
.welcome-card-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px 24px 28px;
  gap: 8px;
}
.welcome-card-avatar {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background-color: #5865F2;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 32px;
  border: 4px solid #5865F2;
  box-sizing: border-box;
  margin-bottom: 8px;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.25);
}
.welcome-card-title {
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.3;
}
.welcome-card-username {
  font-size: 15px;
  font-weight: 600;
  color: #b5bac1;
  line-height: 1.3;
}
.welcome-card-subline {
  font-size: 12px;
  font-weight: 400;
  color: #b5bac1;
  margin-top: 2px;
  line-height: 1.4;
  max-width: 100%;
  word-break: break-word;
}

/* ── Drop Zone ── */
.drop-zone {
  position: relative;
  border: 2px dashed var(--border-subtle);
  border-radius: var(--radius-md);
  transition: border-color .2s, background .2s;
  overflow: hidden;
  cursor: pointer;
}
.drop-zone:hover, .drop-zone.drag-over {
  border-color: var(--brand);
  background: rgba(88,101,242,.06);
}
.drop-zone.drag-over { border-style: solid; }
.drop-zone-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 24px 16px;
  color: var(--text-muted);
  font-size: 13px;
  text-align: center;
}
.drop-zone-inner strong { color: var(--brand); }
.drop-zone-icon { color: var(--text-faint); }
.drop-zone-hint { font-size: 11px; color: var(--text-faint); }
.drop-zone-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 12px;
  min-height: 80px;
}
.drop-zone-preview img {
  max-width: 100%;
  max-height: 160px;
  border-radius: var(--radius-sm);
  object-fit: contain;
}
.drop-zone-remove {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0,0,0,.6);
  color: #fff;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s;
  border: none;
}
.drop-zone-remove:hover { background: var(--red); }

/* ── Autocomplete Popup ── */
.autocomplete-wrap { position: relative; }
.autocomplete-popup {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  max-height: min(320px, 50vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--bg-floating);
  border-radius: var(--radius-md);
  box-shadow: 0 -4px 16px rgba(0,0,0,.45);
  z-index: 20;
  padding: 6px;
  margin-bottom: 4px;
  display: none;
}
.autocomplete-popup.open { display: block; animation: fadeIn .1s ease; }
.autocomplete-popup.floating {
  position: fixed;
  bottom: auto;
  right: auto;
  margin-bottom: 0;
  z-index: 10000;
}
.autocomplete-popup .ac-header {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--text-muted);
  padding: 4px 8px 6px;
}
.autocomplete-popup .ac-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-normal);
  transition: background .08s;
}
.autocomplete-popup .ac-item:hover,
.autocomplete-popup .ac-item.active {
  background: var(--brand);
  color: #fff;
}
.autocomplete-popup .ac-item .ac-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--text-muted);
}
.autocomplete-popup .ac-item:hover .ac-icon,
.autocomplete-popup .ac-item.active .ac-icon { color: #fff; }
.autocomplete-popup .ac-item .ac-role-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Color picker */
.color-picker-wrap {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--input-bg);
  border: 1px solid var(--border-faint);
  border-radius: 3px;
  overflow: hidden;
  transition: border-color .15s;
  height: 48px;
}
.color-picker-wrap:hover { border-color: var(--border-subtle); }
.color-picker-wrap:focus-within { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.color-picker-wrap input[type="color"] {
  width: 48px;
  min-width: 48px;
  height: 48px;
  padding: 3px;
  border-radius: 0;
  cursor: pointer;
  border: none;
  background: transparent;
}
.color-picker-wrap input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; }
.color-picker-wrap input[type="color"]::-webkit-color-swatch { border-radius: 4px; border: none; }
.color-hex {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-muted);
  font-family: var(--font-mono);
  padding: 0 12px;
  background: transparent;
  border: none;
  outline: none;
  width: 110px;
  letter-spacing: .5px;
  pointer-events: none;
  user-select: none;
}

/* Form hint */
.form-hint {
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 2px;
}

/* Registration field builder rows */
.reg-field-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--bg-primary);
  border-radius: var(--radius-sm);
  margin-bottom: 6px;
  animation: fadeIn .15s ease;
}
.reg-field-row .reg-field-inputs {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr 140px 130px;
  gap: 8px;
  align-items: center;
}
.reg-field-row input, .reg-field-row select {
  padding: 6px 10px;
  font-size: 12px;
}
.reg-field-grip {
  color: var(--text-faint);
  cursor: grab;
  font-size: 16px;
  flex-shrink: 0;
}
.reg-field-del {
  color: var(--text-faint);
  cursor: pointer;
  font-size: 16px;
  flex-shrink: 0;
  padding: 4px;
  border-radius: var(--radius-sm);
  transition: color .1s, background .1s;
}
.reg-field-del:hover { color: var(--red); background: rgba(218,55,60,.1); }

/* ── Sticky Save Bar (Discord-style unsaved changes) ── */
.save-bar {
  position: sticky;
  bottom: 16px;
  margin: 16px auto 0;
  transform: translateY(0);
  width: min(820px, 100%);
  max-width: 100%;
  background: #ffffff;
  border-radius: 8px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  box-shadow: 0 4px 24px rgba(0,0,0,.6);
  z-index: 100;
  border: none;
  transition: transform .35s cubic-bezier(.4,.0,.2,1), opacity .35s cubic-bezier(.4,.0,.2,1);
}
.save-bar.hidden {
  transform: translateY(calc(100% + 32px));
  opacity: 0;
  pointer-events: none;
}
.save-bar-text {
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.save-bar-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
@media (max-width: 900px) {
  .save-bar {
    width: 100%;
    bottom: 12px;
  }
}

.table-action-group {
  display: flex;
  gap: 4px;
  align-items: stretch;
}

.table-action-btn {
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.table-action-btn-icon {
  min-width: 30px;
  padding: 0 8px;
}

.giveaway-editor-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
  gap: 24px;
  align-items: start;
}

.giveaway-preview-wrap {
  width: min(100%, 420px);
}

.giveaway-preview-note {
  margin-top: 8px;
}

.giveaway-stat-deadline {
  font-size: 18px;
  line-height: 1.2;
}

.giveaway-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 78px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.giveaway-status-badge.active {
  background: rgba(35,165,89,.16);
  color: var(--green);
}

.giveaway-status-badge.ended {
  background: rgba(148,155,164,.16);
  color: var(--text-muted);
}

.giveaway-winner-list {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}

.giveaway-winner-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(88,101,242,.14);
  color: #dee0fc;
  font-size: 12px;
  font-weight: 600;
}

@media (max-width: 1000px) {
  .giveaway-editor-grid {
    grid-template-columns: 1fr;
  }

  .giveaway-preview-wrap {
    width: 100%;
  }
}

/* ── Nick format variable tags ── */
.nick-var-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
.nick-var-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 500;
  background: rgba(88,101,242,.15);
  color: var(--brand);
  cursor: pointer;
  transition: background .1s;
  user-select: none;
}
.nick-var-tag:hover {
  background: rgba(88,101,242,.3);
}

/* ===== Custom Dropdown ===== */
.cd-wrap {
  position: relative;
  width: 100%;
}
.cd-wrap select { display: none; }

/* Legacy .ms-* multi-select styles removed — all multi-selects now use the
   single canonical .tag-picker component (same as Permissions/Channels). */
.cd-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  font-size: 14px;
  font-family: var(--font);
  color: var(--text-normal);
  background: var(--input-bg);
  border: 1px solid var(--border-faint);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, background .15s;
  user-select: none;
  overflow: hidden;
}
.cd-trigger:hover { border-color: var(--border-subtle); background: #1a1b1e; }
.cd-trigger.cd-disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }
.cd-trigger.open { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.cd-trigger-text {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cd-trigger-text.placeholder { color: var(--text-muted); }
.cd-chevron {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  transition: transform .2s ease;
}
.cd-trigger.open .cd-chevron { transform: rotate(180deg); }
.cd-menu {
  position: fixed;
  min-width: 280px;
  background: var(--bg-floating);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.2);
  z-index: 10001;
  padding: 6px;
  opacity: 0;
  transform: translateY(-4px) scale(.98);
  pointer-events: none;
  transition: opacity .12s ease, transform .12s ease;
  max-height: 280px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thin) transparent;
}
.cd-menu.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.cd-search {
  display: block;
  width: 100%;
  padding: 8px 10px;
  margin-bottom: 4px;
  font-size: 13px;
  font-family: var(--font);
  color: var(--text-normal);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-faint);
  border-radius: 4px;
  outline: none;
  transition: border-color .15s;
}
.cd-search:focus { border-color: var(--brand); }
.cd-search::placeholder { color: var(--text-faint); }
.cd-opt {
  display: flex;
  align-items: center;
  padding: 8px 10px;
  font-size: 14px;
  color: var(--text-normal);
  border-radius: 4px;
  cursor: pointer;
  transition: background .1s, color .1s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cd-opt:hover { background: var(--bg-mod-subtle); }
.cd-opt.active { background: rgba(88,101,242,.2); color: #fff; }
.cd-opt.active:hover { background: rgba(88,101,242,.35); }
.cd-opt.hidden { display: none; }
.cd-color-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; flex-shrink: 0; }
.cd-ch-icon { vertical-align: -2px; margin-right: 6px; opacity: .65; flex-shrink: 0; }
.cd-empty {
  padding: 12px 10px;
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
}
/* Compact variant for reg-field-row */
.reg-field-row .cd-wrap .cd-trigger {
  padding: 6px 10px;
  font-size: 12px;
  min-height: 0;
}

/* ===== Log Module Grid ===== */
.log-module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}
.log-mod-card {
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  box-shadow: 0 1.5px 4px 0 rgba(0,0,0,0.10);
  outline: none;
}
.log-mod-card:active {
  background: var(--bg-modifier-hover);
  box-shadow: 0 2px 8px 0 rgba(88,101,242,0.12), 0 1.5px 4px 0 rgba(0,0,0,0.10);
  transform: translateY(0);
}
.log-mod-btn {
  margin-top: 4px;
  align-self: flex-start;
}
.log-mod-header {
  display: flex;
  align-items: center;
  gap: 12px;
}
.log-mod-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.log-mod-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--header-primary);
  flex: 1;
  min-width: 0;
}
.log-mod-desc {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.4;
}
.log-mod-footer {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
  padding-top: 10px;
  border-top: 1px solid var(--border-faint);
  margin-top: auto;
}
.log-mod-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.log-detail-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.log-detail-subtitle {
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-muted);
}
.log-detail-grid {
  display: grid;
  gap: 12px;
}
.log-detail-item {
  padding: 12px;
  border: 1px solid var(--border-faint);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.02);
}
.log-detail-label {
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.log-detail-value {
  color: var(--text-normal);
  white-space: pre-wrap;
  word-break: break-word;
}
.log-detail-json {
  margin: 0;
  padding: 12px;
  border-radius: var(--radius-md);
  background: var(--bg-tertiary);
  color: var(--text-normal);
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}
.log-detail-assets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.log-detail-asset-link {
  display: inline-flex;
  align-items: center;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  background: var(--bg-tertiary);
  color: var(--accent-primary);
  text-decoration: none;
}
.log-detail-asset-link:hover {
  background: rgba(88,101,242,.16);
}
.activity-log-list {
  display: flex;
  flex-direction: column;
}
.logs-entries-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0;
}
.log-filter-bar {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-faint);
  flex-shrink: 0;
}
.log-filter-group { display: flex; flex-direction: column; gap: 2px; }
.log-filter-group label { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .4px; }
.log-filter-group select { height: 32px; font-size: 13px; padding: 0 8px; background: var(--input-bg); color: var(--text-normal); border: 1px solid var(--border-faint); border-radius: var(--radius-md); min-width: 160px; }
.log-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 10px;
  font-size: 12.5px;
  line-height: 1.35;
}
.log-row-clickable {
  cursor: pointer;
}
.log-row + .log-row {
  border-top: 1px solid rgba(255,255,255,.02);
}
.log-tag {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: .2px;
}
.log-msg {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-normal);
  font-size: 12.5px;
}
.log-u {
  color: #fff;
  font-weight: 600;
}
.log-d {
  color: var(--text-muted);
}
.log-ts {
  color: var(--text-faint);
  font-size: 10.5px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ===== Status Badges ===== */
.status-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .3px;
}
.status-badge.pending    { background: rgba(250,168,26,.15); color: #faa81a; }
.status-badge.approval   {
  background: linear-gradient(135deg, rgba(250,168,26,.18) 0%, rgba(250,168,26,.08) 100%);
  color: #f0b232;
  border: 1px solid rgba(250,168,26,.32);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.status-badge-action {
  cursor: pointer;
  font-family: inherit;
  line-height: 1.4;
  transition: background .15s ease, border-color .15s ease, transform .1s ease;
}
.status-badge-action:hover {
  background: linear-gradient(135deg, rgba(250,168,26,.28) 0%, rgba(250,168,26,.14) 100%);
  border-color: rgba(250,168,26,.5);
}
.status-badge-action:active { transform: scale(0.97); }
.status-badge-action.approval::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 6px;
  border-radius: 50%;
  background: #faa81a;
  box-shadow: 0 0 6px rgba(250,168,26,.65);
  vertical-align: middle;
  position: relative;
  top: -1px;
}
.status-badge.voting     { background: rgba(88,101,242,.15); color: #b5bac1; }
.status-badge.approved   { background: rgba(87,242,135,.15); color: #57f287; }
.status-badge.denied     { background: rgba(237,66,69,.15); color: #ed4245; }
.status-badge.success    { background: rgba(87,242,135,.15); color: #57f287; }
.status-badge.error      { background: rgba(237,66,69,.15); color: #ed4245; }
.status-badge.warning    { background: rgba(250,168,26,.15); color: #faa81a; }
.status-badge.neutral    { background: rgba(255,255,255,.12); color: #ffffff; }

/* Permission module groups */
.perm-module-group { margin-bottom: 12px; }
.perm-module-group table { width: 100%; table-layout: fixed; }
.perm-module-group td { padding: 14px 14px; }
.perm-module-header { font-size: 13px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; padding: 6px 16px; border-bottom: 1px solid var(--border-faint); background: var(--bg-secondary); border-radius: var(--radius-md) var(--radius-md) 0 0; }
.perm-module-group table { border-radius: 0 0 var(--radius-md) var(--radius-md); overflow: visible; table-layout: fixed; }
.permissions-detail-table { table-layout: fixed; width: 100%; }
.perm-entry-title { font-weight: 700; color: var(--header-primary); }
.perm-entry-detail { margin-top: 4px; font-size: 12px; color: var(--text-muted); word-break: break-word; overflow-wrap: anywhere; max-width: 100%; }
.perm-custom-ids-details { margin-top: 6px; max-width: 100%; }
.perm-custom-ids-summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--brand);
  list-style: none;
  user-select: none;
}
.perm-custom-ids-summary::-webkit-details-marker { display: none; }
.perm-custom-ids-body { margin-top: 6px; line-height: 1.35; font-size: 12px; }
.perm-table-scroll-wrap { max-width: 100%; overflow-x: clip; box-sizing: border-box; }
/* Discord Berechtigungen: always stacked cards (table columns clip pickers/buttons on desktop) */
.perm-table-scroll-wrap.discord-permissions-rows,
.table-container.perm-table-scroll-wrap.discord-permissions-rows {
  overflow-x: visible;
  overflow-y: visible;
}
.discord-permissions-rows .discord-permissions-table {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0 !important;
  table-layout: auto;
  border: none;
  background: transparent;
}
.discord-permissions-rows .discord-permissions-table thead {
  display: none;
}
.discord-permissions-rows .discord-permissions-table tbody {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.discord-permissions-rows .discord-permissions-table tr {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--border-faint);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  box-sizing: border-box;
  max-width: 100%;
  transition: border-color 0.15s ease;
}
.discord-permissions-rows .discord-permissions-table tr:hover,
.discord-permissions-rows .discord-permissions-table tr:hover td {
  background: var(--bg-secondary);
}
.discord-permissions-rows .discord-permissions-table tr:hover {
  border-color: var(--border-subtle);
}
.discord-permissions-rows .discord-permissions-table td {
  display: block;
  width: 100% !important;
  max-width: 100%;
  min-width: 0;
  padding: 0;
  border: none;
  box-sizing: border-box;
}
.discord-permissions-rows .discord-permissions-table td::before {
  content: attr(data-label);
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.discord-permissions-rows .discord-permissions-table td[data-label="Aktion"]::before {
  display: none;
}
.discord-permissions-rows .discord-permissions-table .perm-entry-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--header-primary);
  margin-bottom: 4px;
}
.discord-permissions-rows .discord-permissions-table .tag-picker {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.discord-permissions-rows .tag-picker-tags {
  min-height: 28px;
  padding: 3px 24px 3px 6px;
  gap: 3px;
  align-items: center;
  font-size: 12px;
}
.discord-permissions-rows .tag-picker-tags:hover,
.discord-permissions-rows .tag-picker-tags:focus-within,
.discord-permissions-rows .tag-picker-tags:focus-visible,
.discord-permissions-rows .tag-picker:focus-visible {
  border-color: var(--border-subtle);
  background: var(--input-bg);
  box-shadow: none;
  outline: none;
}
.discord-permissions-rows .tag-picker-tags.open {
  border-color: var(--border-subtle);
  box-shadow: none;
}
.discord-permissions-rows .tag-picker-tag {
  max-width: 128px;
  font-size: 10px;
  font-weight: 500;
  padding: 1px 5px 1px 7px;
  line-height: 1.2;
  flex: 0 1 auto;
  align-self: center;
  gap: 4px;
}
.discord-permissions-rows .tag-picker-tag:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.14);
}
.discord-permissions-rows .tag-picker-tag .tag-x {
  font-size: 12px;
  padding: 0 2px;
}
.discord-permissions-rows .tag-picker-tag .tag-x:hover {
  background: transparent;
  opacity: 0.85;
}
.discord-permissions-rows .tag-picker-placeholder {
  font-size: 12px;
  line-height: 20px;
}
.discord-permissions-rows .perm-actions-stack {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.discord-permissions-rows .perm-actions-stack .btn {
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  min-height: 0;
  padding: 5px 12px;
  font-size: 12px;
}
.perm-entry-title { word-break: break-word; overflow-wrap: anywhere; }
.perm-muted { color: var(--text-muted); font-size: 13px; }
.perm-actions-cell { vertical-align: middle; }
.perm-actions-stack { display: flex; flex-direction: row; gap: 6px; align-items: center; flex-wrap: wrap; }
/* Buttons table: 3 cols — Button / Erlaubte Rollen / Aktion */
.perm-module-group th:nth-child(1),
.perm-module-group td:nth-child(1) { width: 30%; }
.perm-module-group th:nth-child(2),
.perm-module-group td:nth-child(2) { width: 50%; }
.perm-module-group th:nth-child(3),
.perm-module-group td:nth-child(3) { width: 20%; white-space: nowrap; }
.permissions-detail-table th:nth-child(1),
.permissions-detail-table td:nth-child(1) { width: 26%; }
.permissions-detail-table th:nth-child(2),
.permissions-detail-table td:nth-child(2) { width: 10%; }
.permissions-detail-table th:nth-child(3),
.permissions-detail-table td:nth-child(3) { width: 26%; }
.permissions-detail-table th:nth-child(4),
.permissions-detail-table td:nth-child(4) { width: 22%; }
.permissions-detail-table th:nth-child(5),
.permissions-detail-table td:nth-child(5) { width: 16%; white-space: nowrap; }
@media (max-width: 1024px) {
  .discord-permissions-table.has-channels th,
  .discord-permissions-table.has-channels td,
  .discord-permissions-table.no-channels th,
  .discord-permissions-table.no-channels td,
  .discord-permissions-table.has-channels.module-free th,
  .discord-permissions-table.has-channels.module-free td,
  .discord-permissions-table.no-channels.module-free th,
  .discord-permissions-table.no-channels.module-free td {
    width: auto !important;
    max-width: 100%;
  }
  .discord-permissions-table {
    table-layout: auto !important;
    min-width: 0 !important;
  }
}
.discord-permissions-table.has-channels th:nth-child(1),
.discord-permissions-table.has-channels td:nth-child(1) { width: 12%; }
.discord-permissions-table.has-channels th:nth-child(2),
.discord-permissions-table.has-channels td:nth-child(2) { width: 16%; }
.discord-permissions-table.has-channels th:nth-child(3),
.discord-permissions-table.has-channels td:nth-child(3) { width: 22%; }
.discord-permissions-table.has-channels th:nth-child(4),
.discord-permissions-table.has-channels td:nth-child(4) { width: 10%; }
.discord-permissions-table.has-channels th:nth-child(5),
.discord-permissions-table.has-channels td:nth-child(5) { width: 22%; }
.discord-permissions-table.has-channels th:nth-child(6),
.discord-permissions-table.has-channels td:nth-child(6) { width: 18%; }
.discord-permissions-table.no-channels th:nth-child(1),
.discord-permissions-table.no-channels td:nth-child(1) { width: 14%; }
.discord-permissions-table.no-channels th:nth-child(2),
.discord-permissions-table.no-channels td:nth-child(2) { width: 24%; }
.discord-permissions-table.no-channels th:nth-child(3),
.discord-permissions-table.no-channels td:nth-child(3) { width: 30%; }
.discord-permissions-table.no-channels th:nth-child(4),
.discord-permissions-table.no-channels td:nth-child(4) { width: 10%; }
.discord-permissions-table.no-channels th:nth-child(5),
.discord-permissions-table.no-channels td:nth-child(5) { width: 22%; }
.discord-permissions-table.has-channels.module-free th:nth-child(1),
.discord-permissions-table.has-channels.module-free td:nth-child(1) { width: 22%; }
.discord-permissions-table.has-channels.module-free th:nth-child(2),
.discord-permissions-table.has-channels.module-free td:nth-child(2) { width: 28%; }
.discord-permissions-table.has-channels.module-free th:nth-child(3),
.discord-permissions-table.has-channels.module-free td:nth-child(3) { width: 24%; }
.discord-permissions-table.has-channels.module-free th:nth-child(4),
.discord-permissions-table.has-channels.module-free td:nth-child(4) { width: 26%; }
.discord-permissions-table.has-channels.module-free th:nth-child(5),
.discord-permissions-table.has-channels.module-free td:nth-child(5) { width: 0; }
.discord-permissions-table.no-channels.module-free th:nth-child(1),
.discord-permissions-table.no-channels.module-free td:nth-child(1) { width: 28%; }
.discord-permissions-table.no-channels.module-free th:nth-child(2),
.discord-permissions-table.no-channels.module-free td:nth-child(2) { width: 38%; }
.discord-permissions-table.no-channels.module-free th:nth-child(3),
.discord-permissions-table.no-channels.module-free td:nth-child(3) { width: 34%; }
.discord-permissions-table.no-channels.module-free th:nth-child(4),
.discord-permissions-table.no-channels.module-free td:nth-child(4) { width: 0; }
/* Commands table: 5 cols — Befehl / Typ / Erlaubte Rollen / Erlaubte Channels / Aktion */
#perm-tab-commands table { table-layout: fixed; width: 100%; }
#perm-tab-commands th:nth-child(1),
#perm-tab-commands td:nth-child(1) { width: 22%; }
#perm-tab-commands th:nth-child(2),
#perm-tab-commands td:nth-child(2) { width: 6%; }
#perm-tab-commands th:nth-child(3),
#perm-tab-commands td:nth-child(3) { width: 30%; }
#perm-tab-commands th:nth-child(4),
#perm-tab-commands td:nth-child(4) { width: 30%; }
#perm-tab-commands th:nth-child(5),
#perm-tab-commands td:nth-child(5) { width: 12%; white-space: nowrap; }
.perm-type-badge { display: inline-block; padding: 1px 6px; border-radius: 3px; font-size: 11px; font-weight: 600; margin-right: 4px; }
.perm-type-cmd { background: rgba(88, 101, 242, 0.21); color: #e3e5f7; border: 1px solid rgba(88, 101, 242, 0.35); font-family: var(--font-mono); }
.perm-type-btn { background: #3ba55c20; color: #3ba55c; border: 1px solid #3ba55c40; }
.perm-detail-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.perm-detail-tabs .btn.active {
  background: rgba(88,101,242,.2);
  color: var(--header-primary);
}
.perm-dashboard-list {
  display: grid;
  gap: 16px;
}
.perm-dashboard-card {
  padding-bottom: 16px;
}
.perm-dashboard-row {
  display: grid;
  grid-template-columns: minmax(220px, 320px) 1fr;
  gap: 16px;
  align-items: start;
  padding: 16px;
  border-top: 1px solid var(--border-faint);
}
.perm-dashboard-copy {
  min-width: 0;
}
.perm-dashboard-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 0 16px;
  margin-top: 16px;
}
@media (max-width: 860px) {
  .perm-dashboard-row {
    grid-template-columns: 1fr;
  }
}

/* Discord-style Dashboard Berechtigungen role editor */
.dash-perm-role-editor {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 0;
  min-height: 480px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-faint);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.dash-perm-roles-sidebar {
  display: flex;
  flex-direction: column;
  background: #2b2d31;
  border-right: 1px solid var(--border-faint);
  min-height: 0;
}
.dash-perm-roles-sidebar-head {
  padding: 12px;
  border-bottom: 1px solid var(--border-faint);
}
.dash-perm-sidebar-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.dash-perm-roles-search {
  width: 100%;
  padding: 8px 10px;
  font-size: 13px;
  background: #1e1f22;
  border: 1px solid var(--border-faint);
  border-radius: var(--radius-sm);
  color: var(--header-primary);
}
.dash-perm-roles-search:focus {
  outline: none;
  border-color: var(--brand);
}
.dash-perm-roles-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px 8px 12px;
}
.dash-perm-role-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  margin-bottom: 2px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: #dbdee1;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s;
}
.dash-perm-role-item:hover {
  background: rgba(79, 84, 92, 0.35);
}
.dash-perm-role-item.is-selected {
  background: rgba(88, 101, 242, 0.28);
  color: #fff;
}
.dash-perm-role-item.is-everyone {
  opacity: 0.65;
}
.dash-perm-role-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #4e5058;
}
.dash-perm-role-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dash-perm-roles-add {
  margin: 0 8px 12px;
  width: calc(100% - 16px);
}
.dash-perm-role-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: #313338;
}
.dash-perm-role-panel-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  color: var(--text-muted);
  font-size: 14px;
  text-align: center;
}
.dash-perm-role-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-faint);
  position: sticky;
  top: 0;
  z-index: 2;
  background: #313338;
}
.dash-perm-role-panel-title {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.dash-perm-role-panel-title h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #f2f3f5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dash-perm-role-panel-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.dash-perm-role-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 20px 24px;
}
.dash-perm-perm-group {
  margin-bottom: 8px;
  border: 1px solid var(--border-faint);
  border-radius: var(--radius-md);
  background: #2b2d31;
  overflow: hidden;
}
.dash-perm-perm-group-head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  margin: 0;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  user-select: none;
}
.dash-perm-perm-group-head:hover {
  background: rgba(79, 84, 92, 0.22);
}
.dash-perm-perm-group-head-static {
  cursor: default;
}
.dash-perm-perm-group-head-static:hover {
  background: transparent;
}
.dash-perm-collapse-chevron {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-right: 2px solid #b5bac1;
  border-bottom: 2px solid #b5bac1;
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
  margin-top: -2px;
}
.dash-perm-perm-group:not(.is-collapsed) .dash-perm-collapse-chevron {
  transform: rotate(45deg);
  margin-top: 2px;
}
.dash-perm-perm-group-title {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  color: #f2f3f5;
}
.dash-perm-perm-group-count {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  background: rgba(0, 0, 0, 0.2);
  padding: 2px 7px;
  border-radius: 10px;
}
.dash-perm-perm-group-body {
  display: block;
  border-top: 1px solid var(--border-faint);
  padding: 4px 0 8px;
}
.dash-perm-perm-group.is-collapsed .dash-perm-perm-group-body {
  display: none;
}
.dash-perm-perm-group-global {
  margin-bottom: 16px;
}
.dash-perm-role-dirty-dot {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #f0b232;
  margin-left: auto;
}
.dash-perm-perm-subgroup {
  padding: 0;
}
.dash-perm-perm-subgroup + .dash-perm-perm-subgroup {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.dash-perm-perm-subgroup-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px 6px;
  position: sticky;
  top: 0;
  z-index: 1;
  background: #2b2d31;
}
.dash-perm-perm-subgroup-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.dash-perm-select-all {
  flex-shrink: 0;
  padding: 0;
  border: none;
  background: none;
  color: var(--brand);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.dash-perm-select-all:hover {
  text-decoration: underline;
}
.dash-perm-select-all:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.dash-perm-perm-subgroup-body {
  padding-bottom: 4px;
}
.dash-perm-toggle-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 14px;
  transition: background 0.1s ease;
}
.dash-perm-toggle-row:hover:not(.is-disabled) {
  background: rgba(79, 84, 92, 0.18);
}
.dash-perm-toggle-row + .dash-perm-toggle-row {
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}
.dash-perm-toggle-row.is-danger .dash-perm-toggle-label {
  color: #f23f43;
}
.dash-perm-toggle-row.is-danger .dash-perm-toggle-hint {
  color: rgba(242, 63, 67, 0.75);
}
.dash-perm-toggle-row.is-danger:hover:not(.is-disabled) {
  background: rgba(242, 63, 67, 0.08);
}
.dash-perm-toggle-copy {
  flex: 1;
  min-width: 0;
}
.dash-perm-toggle-label {
  font-size: 14px;
  font-weight: 500;
  color: #dbdee1;
}
.dash-perm-toggle-hint {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--text-muted);
}
.dash-perm-toggle-row.is-disabled {
  opacity: 0.55;
}
.dash-perm-modules-toolbar {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.dash-perm-modules-search {
  flex: 1;
  min-width: 160px;
  padding: 8px 10px;
  font-size: 13px;
  background: #1e1f22;
  border: 1px solid var(--border-faint);
  border-radius: var(--radius-sm);
  color: var(--header-primary);
}
.dash-perm-role-editor-hint {
  padding: 12px 16px;
  margin-bottom: 12px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-muted);
  background: rgba(88, 101, 242, 0.08);
  border: 1px solid rgba(88, 101, 242, 0.2);
  border-radius: var(--radius-md);
}
/* Dashboard Berechtigungen: section does not scroll — only rank list + module panel */
#section-permissions-dashboard.active {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
  padding-bottom: 16px;
}
#section-permissions-dashboard #permissions-dashboard-detail {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
#section-permissions-dashboard .permissions-matrix-shell {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.dash-perm-role-editor:has(#dash-perm-roles-list) {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  max-height: none;
  overflow: hidden;
}
.permissions-matrix-shell:has(#dash-perm-roles-list) .dash-perm-role-editor.discord-perm-editor {
  min-height: 0;
}
.dash-perm-role-editor:has(#dash-perm-roles-list) .dash-perm-roles-sidebar {
  height: 100%;
  max-height: none;
  overflow: hidden;
}
.dash-perm-role-editor:has(#dash-perm-roles-list) .dash-perm-roles-sidebar-head {
  flex-shrink: 0;
}
.dash-perm-role-editor:has(#dash-perm-roles-list) .dash-perm-roles-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.dash-perm-role-editor:has(#dash-perm-roles-list) .dash-perm-role-panel {
  min-height: 0;
  overflow: hidden;
}
.dash-perm-role-editor:has(#dash-perm-roles-list) .dash-perm-role-panel-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.permissions-matrix-shell:has(#dash-perm-roles-list) {
  overflow: hidden;
  border-radius: var(--radius-md);
}
#section-permissions-dashboard .save-bar.save-bar-permissions {
  flex-shrink: 0;
  margin-top: 12px;
}

@media (max-width: 860px) {
  .dash-perm-role-editor {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .dash-perm-roles-sidebar {
    max-height: 220px;
    border-right: none;
    border-bottom: 1px solid var(--border-faint);
  }
  .dash-perm-role-editor:has(#dash-perm-roles-list) {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 200px) minmax(0, 1fr);
  }
  .dash-perm-role-editor:has(#dash-perm-roles-list) .dash-perm-roles-sidebar {
    height: auto;
    max-height: 200px;
  }
}

/* Discord / Dashboard Berechtigungen — no horizontal page scroll */
#section-permissions-discord,
#section-permissions-dashboard,
#permissions-discord-detail,
#permissions-dashboard-detail,
#permissions-tab-detail {
  max-width: 100%;
  overflow-x: clip;
  box-sizing: border-box;
}
#section-permissions-discord .perm-subnav-card,
#permissions-discord-detail .perm-subnav-card,
#permissions-tab-detail .perm-subnav-card {
  max-width: 100%;
  overflow: hidden;
}
#section-permissions-discord .table-container:not(.discord-permissions-rows),
#permissions-discord-detail .table-container:not(.discord-permissions-rows),
#permissions-tab-detail .table-container:not(.discord-permissions-rows) {
  max-width: 100%;
  overflow-x: clip;
}
#section-permissions-discord .table-container.discord-permissions-rows,
#permissions-discord-detail .table-container.discord-permissions-rows,
#permissions-tab-detail .table-container.discord-permissions-rows {
  max-width: 100%;
  overflow: visible;
  border: none;
}
#section-permissions-discord .discord-permissions-table .tag-picker,
#permissions-discord-detail .discord-permissions-table .tag-picker,
#permissions-tab-detail .discord-permissions-table .tag-picker {
  min-width: 0;
  max-width: 100%;
}
#section-permissions-discord .discord-permissions-rows .tag-picker-tags,
#permissions-discord-detail .discord-permissions-rows .tag-picker-tags,
#permissions-tab-detail .discord-permissions-rows .tag-picker-tags {
  min-height: 28px;
  padding: 3px 24px 3px 6px;
}
#section-permissions-discord .discord-permissions-rows .tag-picker-tags:hover,
#permissions-discord-detail .discord-permissions-rows .tag-picker-tags:hover,
#permissions-tab-detail .discord-permissions-rows .tag-picker-tags:hover,
#section-permissions-discord .discord-permissions-rows .tag-picker-tags:focus-within,
#permissions-discord-detail .discord-permissions-rows .tag-picker-tags:focus-within,
#permissions-tab-detail .discord-permissions-rows .tag-picker-tags:focus-within,
#section-permissions-discord .discord-permissions-rows .tag-picker-tags.open,
#permissions-discord-detail .discord-permissions-rows .tag-picker-tags.open,
#permissions-tab-detail .discord-permissions-rows .tag-picker-tags.open {
  border-color: var(--border-subtle);
  background: var(--input-bg);
  box-shadow: none;
  outline: none;
}
#section-permissions-discord .discord-permissions-rows .tag-picker-tag,
#permissions-discord-detail .discord-permissions-rows .tag-picker-tag,
#permissions-tab-detail .discord-permissions-rows .tag-picker-tag {
  max-width: 128px;
  font-size: 10px;
  padding: 1px 5px 1px 7px;
  line-height: 1.2;
}
#section-permissions-discord .discord-permissions-rows .tag-picker-tag:hover,
#permissions-discord-detail .discord-permissions-rows .tag-picker-tag:hover,
#permissions-tab-detail .discord-permissions-rows .tag-picker-tag:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.14);
}
#section-permissions-discord .tag-picker-opt:hover,
#permissions-discord-detail .tag-picker-opt:hover,
#permissions-tab-detail .tag-picker-opt:hover {
  background: transparent;
  color: var(--text-normal);
}

@media (max-width: 1024px) {
  #section-permissions-discord .discord-permissions-table,
  #permissions-discord-detail .discord-permissions-table,
  #permissions-tab-detail .discord-permissions-table {
    min-width: 0 !important;
    width: 100%;
    table-layout: auto;
  }
  #section-permissions-discord .discord-permissions-table th,
  #section-permissions-discord .discord-permissions-table td,
  #permissions-discord-detail .discord-permissions-table th,
  #permissions-discord-detail .discord-permissions-table td,
  #permissions-tab-detail .discord-permissions-table th,
  #permissions-tab-detail .discord-permissions-table td {
    width: auto !important;
    white-space: normal;
    word-break: break-word;
  }
  #section-permissions-dashboard .dash-perm-role-panel-body {
    padding: 12px 14px 20px;
  }
}

#section-permissions-discord .content-card,
#permissions-discord-detail .content-card,
#permissions-tab-detail .content-card {
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  box-sizing: border-box;
}
#section-permissions-discord .perm-table-scroll-wrap,
#permissions-discord-detail .perm-table-scroll-wrap,
#permissions-tab-detail .perm-table-scroll-wrap {
  min-width: 0;
  max-width: 100%;
}
@media (max-width: 1024px) {
  #section-permissions-discord .discord-permissions-table,
  #permissions-discord-detail .discord-permissions-table,
  #permissions-tab-detail .discord-permissions-table {
    display: block;
    border: none;
    background: transparent;
  }
  #section-permissions-discord .discord-permissions-table thead,
  #permissions-discord-detail .discord-permissions-table thead,
  #permissions-tab-detail .discord-permissions-table thead {
    display: none;
  }
  #section-permissions-discord .discord-permissions-table tbody,
  #permissions-discord-detail .discord-permissions-table tbody,
  #permissions-tab-detail .discord-permissions-table tbody {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  #section-permissions-discord .discord-permissions-table tr,
  #permissions-discord-detail .discord-permissions-table tr,
  #permissions-tab-detail .discord-permissions-table tr {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--border-faint);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
  }
  #section-permissions-discord .discord-permissions-rows tr:hover,
  #section-permissions-discord .discord-permissions-rows tr:hover td,
  #permissions-discord-detail .discord-permissions-rows tr:hover,
  #permissions-discord-detail .discord-permissions-rows tr:hover td,
  #permissions-tab-detail .discord-permissions-rows tr:hover,
  #permissions-tab-detail .discord-permissions-rows tr:hover td {
    background: var(--bg-secondary);
  }
  #section-permissions-discord .discord-permissions-table td,
  #permissions-discord-detail .discord-permissions-table td,
  #permissions-tab-detail .discord-permissions-table td {
    display: block;
    width: 100% !important;
    max-width: 100%;
    min-width: 0;
    padding: 0;
    border: none;
    box-sizing: border-box;
  }
  #section-permissions-discord .discord-permissions-table td::before,
  #permissions-discord-detail .discord-permissions-table td::before,
  #permissions-tab-detail .discord-permissions-table td::before {
    content: attr(data-label);
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 6px;
  }
  #section-permissions-discord .discord-permissions-table td[data-label="Aktion"]::before,
  #permissions-discord-detail .discord-permissions-table td[data-label="Aktion"]::before,
  #permissions-tab-detail .discord-permissions-table td[data-label="Aktion"]::before {
    display: none;
  }
  #section-permissions-discord .discord-permissions-table .perm-entry-title,
  #permissions-discord-detail .discord-permissions-table .perm-entry-title,
  #permissions-tab-detail .discord-permissions-table .perm-entry-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--header-primary);
    margin-bottom: 4px;
  }
  #section-permissions-discord .discord-permissions-table .tag-picker,
  #permissions-discord-detail .discord-permissions-table .tag-picker,
  #permissions-tab-detail .discord-permissions-table .tag-picker {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  #section-permissions-discord .perm-actions-stack,
  #permissions-discord-detail .perm-actions-stack,
  #permissions-tab-detail .perm-actions-stack {
    flex-direction: column;
    align-items: stretch;
  }
  #section-permissions-discord .discord-permissions-rows .perm-actions-stack,
  #permissions-discord-detail .discord-permissions-rows .perm-actions-stack,
  #permissions-tab-detail .discord-permissions-rows .perm-actions-stack {
    flex-direction: row;
    align-items: center;
  }
  #section-permissions-discord .discord-permissions-rows .perm-actions-stack .btn,
  #permissions-discord-detail .discord-permissions-rows .perm-actions-stack .btn,
  #permissions-tab-detail .discord-permissions-rows .perm-actions-stack .btn {
    width: auto;
    flex: 0 0 auto;
  }
  .dash-perm-modules-search,
  .dash-perm-roles-search {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 320px) {
  #section-permissions-discord,
  #section-permissions-dashboard,
  #permissions-discord-detail,
  #permissions-dashboard-detail,
  #permissions-tab-detail {
    padding-left: 8px;
    padding-right: 8px;
    overflow-x: clip;
  }
  #section-permissions-discord .perm-subnav .rw-tab,
  #permissions-discord-detail .perm-subnav .rw-tab,
  #permissions-tab-detail .perm-subnav .rw-tab {
    flex: 1 1 100%;
    justify-content: center;
  }
  #section-permissions-discord .content-card,
  #permissions-discord-detail .content-card,
  #permissions-tab-detail .content-card {
    padding: 10px;
    max-width: 100%;
    box-sizing: border-box;
  }
  #section-permissions-dashboard .dash-perm-role-editor {
    border-radius: var(--radius-sm);
  }
  #section-permissions-dashboard .dash-perm-roles-sidebar {
    max-height: 180px;
  }
  #section-permissions-dashboard .dash-perm-role-panel-head {
    padding: 12px;
    flex-direction: column;
    align-items: stretch;
  }
  #section-permissions-dashboard .dash-perm-role-panel-title h3 {
    white-space: normal;
    font-size: 16px;
  }
  #section-permissions-dashboard .dash-perm-role-panel-actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  #section-permissions-dashboard .dash-perm-role-panel-actions .btn {
    width: 100%;
  }
  #section-permissions-dashboard .dash-perm-toggle-row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  #section-permissions-dashboard .dash-perm-toggle-row .toggle-switch {
    align-self: flex-end;
  }
  #section-permissions-dashboard .dashboard-team-ranks-panel .perm-actions-stack {
    width: 100%;
  }
  .perm-role-multi {
    min-width: 0;
    width: 100%;
  }
}

.perm-role-multi {
  min-width: 240px;
  min-height: 120px;
  padding: 10px;
}
/* Multi-select tag picker */
/* ===== Canonical Multi-Select (.tag-picker) =====
   Used everywhere: Permissions, Automod, Logging, Veto-Ränge, etc. */
.tag-picker { position: relative; width: 100%; }
.tag-picker-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-height: 46px;
  background: var(--input-bg);
  border: 1px solid var(--border-faint);
  border-radius: var(--radius-md);
  padding: 6px 32px 6px 10px;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
  font-size: 13px;
  position: relative;
}
.tag-picker-tags::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--text-muted);
  border-bottom: 1.5px solid var(--text-muted);
  transform: translateY(-65%) rotate(45deg);
  transition: transform .15s;
  pointer-events: none;
}
.tag-picker-tags:hover { border-color: var(--border-subtle); }
.tag-picker-tags.open {
  border-color: var(--brand);
  box-shadow: 0 0 0 1px var(--brand);
}
.tag-picker-tags.open::after {
  transform: translateY(-25%) rotate(-135deg);
}
.tag-picker-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(88,101,242,0.16);
  color: #c7cdfa;
  font-size: 12px;
  font-weight: 500;
  padding: 3px 8px 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(88,101,242,0.28);
  line-height: 1.4;
  max-width: 220px;
}
.tag-picker-tag .tag-x {
  cursor: pointer;
  opacity: .7;
  font-size: 14px;
  line-height: 1;
  transition: opacity .12s, background .12s;
  padding: 0 4px;
  border-radius: 999px;
}
.tag-picker-tag .tag-x:hover { opacity: 1; background: rgba(255,255,255,0.10); }
.tag-picker-placeholder {
  color: var(--text-muted);
  font-size: 13px;
  line-height: 26px;
}
.tag-picker-dropdown {
  position: fixed;
  z-index: 9999;
  background: var(--bg-floating);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  max-height: 320px;
  display: none;
  flex-direction: column;
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
  padding: 0;
  overflow: hidden;
}
.tag-picker-dropdown.open { display: flex; }
.tag-picker-search {
  flex-shrink: 0;
  padding: 8px 8px 4px;
  background: var(--bg-floating);
  border-bottom: 1px solid var(--border-faint);
}
.tag-picker-search-input {
  width: 100%;
  padding: 6px 10px;
  background: var(--input-bg);
  border: 1px solid var(--border-faint);
  border-radius: var(--radius-sm);
  color: var(--text-normal);
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: border-color 150ms ease-in-out, box-shadow 150ms ease-in-out;
}
.tag-picker-search-input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 1px var(--brand);
}
.tag-picker-search-input::placeholder { color: var(--text-muted); }
.tag-picker-options {
  flex: 1;
  overflow-y: auto;
  padding: 4px;
  min-height: 0;
}
.tag-picker-empty {
  padding: 12px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}
.tag-picker-opt {
  padding: 8px 12px;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 6px;
  color: var(--text-normal);
  transition: background .12s, color .12s;
}
.tag-picker-opt:hover { background: rgba(255,255,255,0.05); color: var(--header-primary); }
.tag-picker-opt.selected {
  color: var(--header-primary);
  background: rgba(88,101,242,0.10);
}
.tag-picker-opt.selected::before {
  content: "✓";
  font-size: 12px;
  font-weight: 700;
  color: var(--brand);
  width: 14px;
  text-align: center;
}
.tag-picker-opt:not(.selected)::before {
  content: "";
  width: 14px;
}

/* ===== Reg Log Table ===== */
.reg-log-table { margin-top: 12px; }
.reg-log-table td { font-size: 12px; color: var(--text-muted); }
.reg-log-table td:first-child { color: var(--text-faint); white-space: nowrap; }

/* ===== Force Accept Modal Overlay ===== */
.force-modal-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0,0,0,.6);
  display: flex; align-items: center; justify-content: center;
  animation: fadeIn .15s ease;
}
.force-modal {
  background: var(--bg-floating); border-radius: var(--radius-lg);
  padding: 24px; width: 360px; max-width: 90vw;
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
  animation: modalIn .2s ease;
}
.force-modal h3 { margin: 0 0 16px; font-size: 18px; color: var(--header-primary); }
.force-modal .form-group { margin-bottom: 14px; }
.force-modal .force-btns { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; }

/* ===== Collapsible modal-fields card ===== */
.modal-fields-toggle {
  display: flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  gap: 8px;
}
.modal-fields-toggle h3 { margin: 0; }
.modal-fields-chevron {
  width: 16px;
  height: 16px;
  color: var(--text-muted);
  transition: transform .2s;
  flex-shrink: 0;
}
.modal-fields-card.collapsed .modal-fields-chevron {
  transform: rotate(-90deg);
}
.modal-fields-card.collapsed .modal-fields-body {
  display: none;
}

/* ===== Toggle switch ===== */
.toggle-switch { display: inline-flex; align-items: center; cursor: pointer; user-select: none; }
.toggle-switch input { display: none; }
.toggle-track {
  position: relative; width: 44px; height: 24px;
  background: var(--bg-tertiary); border-radius: 12px;
  border: 2px solid var(--border-subtle);
  transition: background .2s, border-color .2s;
}
.toggle-knob {
  position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--text-muted);
  transition: transform .2s, background .2s;
}
.toggle-switch input:checked + .toggle-track {
  background: var(--brand); border-color: var(--brand);
}
.toggle-switch input:checked + .toggle-track .toggle-knob {
  transform: translateX(20px); background: #fff;
}

/* ===== Rank config rows ===== */
.rank-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--border-faint);
}
.rank-row:last-child { border-bottom: none; }
.rank-row .rank-num {
  font-weight: 700; font-size: 14px; color: var(--text-muted);
  min-width: 28px; text-align: center;
}
.rank-row .cd-wrap { flex: 1; }

/* ===== Blacklist Sub-Nav Tabs ===== */
.sub-nav {
  display: flex;
  gap: var(--nav-gap);
  margin-bottom: 12px;
  padding: 3px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-md);
}
.sub-nav-btn {
  flex: 0 0 auto;
  min-height: var(--nav-row-h);
  padding: var(--nav-pad-y) 10px;
  border-radius: var(--radius-sm);
  font-size: var(--nav-font-sm);
  font-weight: 500;
  color: var(--text-muted);
  text-align: center;
  transition: background .15s, color .15s;
  cursor: pointer;
}
.sub-nav-btn:hover { color: var(--header-primary); background: rgba(79, 84, 92, 0.32); }
.sub-nav-btn.active { background: var(--nav-segment-active); color: var(--header-primary); }
.special-role-row {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 0;
}
.special-role-row input { flex: 1; }
.special-role-row .cd-wrap { flex: 1; }
.special-role-row .del-btn {
  color: var(--text-faint); cursor: pointer; font-size: 16px;
  transition: color .1s;
}
.special-role-row .del-btn:hover { color: var(--red); }

/* ===== Insurance Table ===== */
.ins-table { min-width: 900px; }
.ins-table th:last-child,
.ins-table td:last-child { text-align: right; }
.ins-cars-toolbar {
  display: flex;
  gap: 10px;
  flex-wrap: nowrap;
  align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid var(--background-modifier-accent);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
.ins-cars-toolbar-stable {
  min-height: 60px;
}
.ins-cars-toolbar-stable .ins-cars-sort-select {
  flex: 0 0 220px;
  width: 220px;
  min-width: 220px;
  max-width: 220px;
}
.ins-cars-toolbar-stable .ins-cars-count {
  flex: 0 0 auto;
  min-width: 7.5rem;
  text-align: right;
}
.ins-cars-toolbar-stable .ins-cars-search-wrap {
  flex: 1 1 0;
  min-width: 0;
  max-width: none;
}
.ins-cars-search-wrap {
  flex: 1 1 auto;
  min-width: 10rem;
  max-width: none;
}
.ins-cars-toolbar .members-search-row {
  width: 100%;
  min-width: 0;
}
.ins-cars-search-wrap input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding-right: 36px;
}
.ins-cars-search-clear {
  position: absolute;
  right: 8px;
  top: 0;
  bottom: 0;
  margin-top: auto;
  margin-bottom: auto;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--transition-standard), color var(--transition-standard);
}
.ins-cars-search-clear:hover {
  color: var(--text-normal);
  background: rgba(255,255,255,0.06);
}
.ins-cars-search-clear:active {
  transform: none;
  color: var(--text-normal);
  background: rgba(255,255,255,0.12);
}
.ins-cars-search-wrap input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}
.ins-cars-sort-select {
  flex: 0 0 auto;
  width: min(280px, 32vw);
  min-width: 200px;
  height: 40px;
  box-sizing: border-box;
}
.ins-cars-count {
  font-size: 12px;
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: auto;
}
@media (max-width: 720px) {
  .ins-cars-toolbar {
    flex-wrap: wrap;
  }
  .ins-cars-sort-select {
    width: 100%;
    min-width: 0;
  }
}
.ins-cars-table th.num,
.ins-cars-table td.num {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.ins-cars-table .ins-th-sort {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-align: inherit;
}
.ins-cars-table th.num .ins-th-sort {
  margin-left: auto;
}
.ins-cars-table .ins-th-sort:hover {
  color: var(--brand);
}
.ins-cars-table-wrap .table-container thead {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--bg-secondary);
}
/* Fahrzeug-Liste: card + table fill remaining viewport; scroll inside table */
#section-insurance.active:has(#ins-tab-cars:not(.hidden)) {
  display: flex;
  flex-direction: column;
  overflow-y: hidden;
  min-height: 0;
}
#section-insurance.active:has(#ins-tab-cars:not(.hidden)) > .sub-nav {
  flex-shrink: 0;
}
#ins-tab-cars:not(.hidden) {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
#ins-tab-cars:not(.hidden) > .content-card {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  margin-bottom: 0;
}
#ins-tab-cars:not(.hidden) .card-toolbar,
#ins-tab-cars:not(.hidden) .ins-cars-toolbar {
  flex-shrink: 0;
}
#ins-tab-cars:not(.hidden) #ins-cars-list.insurance-scroll-shell {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
#ins-tab-cars:not(.hidden) .ins-cars-table-wrap,
#ins-tab-cars:not(.hidden) .insurance-scroll-shell .table-container {
  flex: 1;
  min-height: 0;
  max-height: none;
  overflow: auto;
}
.insurance-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.insurance-summary-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid var(--border-faint);
  border-radius: 12px;
  background: var(--bg-secondary);
}
.insurance-summary-label {
  color: var(--text-muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.insurance-summary-card strong {
  font-size: 24px;
  color: var(--text-normal);
}
.insurance-scroll-shell .table-container {
  max-height: 420px;
  overflow: auto;
}
.insurance-total-banner {
  margin-top: 12px;
  padding: 12px 16px;
  font-weight: 600;
  color: var(--text-muted);
  border: 1px solid var(--border-faint);
  border-radius: 10px;
  background: var(--bg-tertiary);
}

/* ===== Blacklist Cards (legacy; list tab uses bl-summary-table) ===== */
.bl-card {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-faint);
}
.bl-card:last-child { border-bottom: none; }
.bl-card.bl-permanent { border-left: 3px solid var(--red); }
.bl-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.bl-card-identity {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.bl-card-id {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-normal);
  white-space: nowrap;
}
.bl-card-name {
  font-size: 13px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bl-card-badge {
  flex-shrink: 0;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3px;
}
.bl-badge-perm { background: rgba(237,66,69,.15); color: var(--red); }
.bl-badge-temp { background: rgba(250,168,26,.15); color: var(--yellow); }
.bl-card-reason {
  font-size: 13px;
  color: var(--text-normal);
  line-height: 1.4;
  margin-bottom: 8px;
  padding-left: 1px;
}
.bl-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.bl-card-meta {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: var(--text-faint);
}
.bl-card-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

@media (max-width: 960px) {
  .settings-layout { flex-direction: column; }
  .settings-nav { width: 100%; border-right: none; border-bottom: 1px solid var(--border-faint); display: flex; gap: 4px; flex-wrap: wrap; padding: 8px; }
  .settings-nav-cat { display: none; }
}

/* ===== Animations ===== */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalIn { from { opacity: 0; transform: scale(.95); } to { opacity: 1; transform: scale(1); } }
@keyframes toastIn { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } }
@keyframes toastOut { to { opacity: 0; transform: translateX(30px); } }

/* ===== Responsive ===== */
@media (max-width: 860px) {
  .home-layout { grid-template-columns: 1fr; }
  .settings-grid { grid-template-columns: 1fr; }
  .embed-builder.no-scroll .embed-builder-row { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .app-shell .sidebar { display: none; }
  .app-shell .nav-drawer-shell .sidebar { display: flex !important; }
}

/* ===== Home Layout ===== */
.home-side-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.home-status-card { padding: 16px; }
.home-status-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.home-status-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  border-radius: var(--radius-sm);
  background: var(--bg-mod-faint);
}
.home-status-item span {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
}
.home-status-item strong {
  font-size: 16px;
  font-weight: 800;
  color: var(--header-primary);
}
/* Discord-native locked-section state — matches the look Discord uses for
   unauthorised channels: muted icon, tight title, faint body copy, no gradient. */
.personal-lock-state {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 360px;
  padding: 48px 24px;
}
.personal-lock-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  max-width: 440px;
  padding: 12px;
}
.personal-lock-icon {
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--bg-mod-faint);
  color: var(--text-muted);
}
.personal-lock-icon svg {
  width: 26px;
  height: 26px;
}
.personal-lock-copy {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.personal-lock-copy h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--header-primary);
  letter-spacing: -0.01em;
}
.personal-lock-copy p {
  margin: 0;
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.45;
}
.stats-row-extended {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1500px) {
  .stats-row-extended { grid-template-columns: repeat(2, 1fr); }
}

/* Home view section grouping */
.home-section { display: flex; flex-direction: column; gap: 10px; }
.home-section + .home-section { margin-top: 4px; }
.home-section-head {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  padding: 0 2px;
}

/* ===== Home Analytics ===== */
.home-analytics-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.chart-card-wide { grid-column: span 2; }
.home-feed-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.home-feed-card { min-height: 280px; }
.home-feed-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.home-feed-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
}
.home-feed-rank {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--bg-mod-faint);
  color: var(--text-normal);
  font-weight: 800;
  font-size: 13px;
}
.home-feed-rank-status { background: rgba(240,178,50,.15); }
.home-feed-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.home-feed-copy strong {
  font-size: 13px;
  font-weight: 600;
  color: var(--header-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.home-feed-copy span,
.home-feed-value.muted {
  font-size: 12px;
  color: var(--text-muted);
}
.home-feed-value {
  font-size: 13px;
  font-weight: 700;
  color: var(--green);
}

/* ===== Content Header Extensions ===== */
.content-heading {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* ===== Insurance Scrollable ===== */
.insurance-scroll-shell .table-container {
  max-height: 400px;
  overflow-y: auto;
}
.insurance-scroll-shell .table-container thead {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg-tertiary);
}
.insurance-scroll-shell .table-container table {
  border-collapse: separate;
  border-spacing: 0;
}

/* ===== Badges ===== */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.badge-green { background: rgba(35,165,89,.15); color: var(--green); }
.badge-red { background: rgba(218,55,60,.15); color: var(--red); }
.badge-yellow { background: rgba(240,178,50,.15); color: var(--yellow); }
.badge-secondary { background: var(--bg-mod-faint); color: var(--text-muted); }

/* ===== Event Payout Cards ===== */
.evt-payout-card { margin-bottom: 16px; }
.evt-payout-card h4 {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
}
.evt-schedule-cell { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }

/* ===== Event Type Cards Grid ===== */
.evt-sub-nav {
  margin-bottom: 16px;
}

.evt-types-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 8px;
}
.evt-mod-card {
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  padding: 14px;
  cursor: pointer;
  position: relative;
}
.evt-mod-card:active { opacity: .85; }
.evt-mod-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.evt-card-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.evt-card-info {
  flex: 1;
  min-width: 0;
}
.evt-card-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.evt-card-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--header-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.evt-card-sub {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
  flex-wrap: wrap;
}
.evt-card-sub svg { flex-shrink: 0; }
.evt-card-sep { color: var(--text-faint); }
.evt-card-tools {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.evt-card-delete {
  width: 28px; height: 28px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); flex-shrink: 0;
  transition: background .15s, color .15s;
}
.evt-card-delete:hover { background: rgba(237,66,69,.15); color: #ed4245; }
.evt-card-badge-single {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .02em; padding: 1px 5px; border-radius: 4px;
  background: rgba(255,255,255,.06); color: var(--text-muted);
  flex-shrink: 0;
}
.evt-mod-disabled {
  opacity: .72;
}
.evt-mod-disabled:hover {
  opacity: .82;
}
.evt-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(255,255,255,.06);
  color: var(--header-primary);
}
.evt-card-icon svg { width: 20px; height: 20px; }
.evt-card-icon.is-brand {
  background: rgba(88,101,242,.16);
  color: #dfe3ff;
}
.evt-card-icon.is-danger {
  background: rgba(237,66,69,.16);
  color: #ffb7b8;
}
.evt-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  background: rgba(255,255,255,.05);
  color: var(--text-muted);
}
.evt-status-pill::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: .85;
}
.evt-status-pill.is-live {
  background: rgba(35,165,89,.14);
  color: #57f287;
}
.evt-status-pill.is-off {
  background: rgba(255,255,255,.05);
  color: #b5bac1;
}
.evt-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.evt-card-footer .btn {
  min-height: 32px;
  padding: 0 12px;
}

/* Event detail page */
.evt-detail-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  margin-bottom: 2px;
  background: #f2f3f5;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.evt-detail-back-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: var(--text-muted);
  transition: background .15s, color .15s;
  flex-shrink: 0;
}
.evt-detail-back-btn:hover {
  background: var(--bg-mod-faint);
  color: var(--text-normal);
}
.evt-detail-header .evt-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
}
.evt-detail-header .evt-card-icon svg { width: 20px; height: 20px; }
.evt-detail-hinfo { flex: 1; min-width: 0; }
.evt-detail-htitle {
  font-size: 18px;
  font-weight: 600;
  color: var(--header-primary);
}
.evt-detail-hmeta {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  align-items: center;
}
.evt-detail-hmeta span { display: inline-flex; align-items: center; gap: 4px; }
.evt-detail-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  padding: 3px 8px;
  border-radius: 999px;
}
.evt-badge-on  { background: rgba(35,165,89,.15); color: #23a559; }
.evt-badge-off { background: rgba(78,80,88,.2); color: #949ba4; }

/* Detail tab nav */
.evt-detail-nav {
  display: flex;
  background: var(--bg-tertiary);
  border: none;
  border-top: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  padding: 0 4px;
  margin-bottom: 12px;
  gap: 0;
}
.evt-detail-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--nav-pad-y) 12px;
  font-size: var(--nav-font-sm);
  font-weight: 500;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
  cursor: pointer;
}
.evt-detail-nav-btn:hover {
  color: var(--header-primary);
  background: transparent;
}
.evt-detail-nav-btn.active {
  color: var(--header-primary);
  border-bottom-color: var(--brand);
  background: transparent;
}
.evt-detail-nav-btn svg { opacity: .7; }
.evt-detail-nav-btn.active svg { opacity: 1; }

.evt-bw-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 16px;
}
.evt-bw-toolbar-top {
  justify-content: space-between;
  align-items: flex-end;
}
.evt-bw-toolbar-top .evt-bw-announce-toolbar-row {
  flex: 1;
  min-width: 280px;
  margin-bottom: 0;
}

.evt-bw-mult-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
}
.evt-bw-mult-lbl {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--text-muted);
  flex: 0 0 auto;
}
.evt-bw-mult-selects {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.evt-bw-mult-selects select,
.evt-bw-mult-selects input[type="number"] {
  width: auto;
  min-width: 90px;
  max-width: 140px;
}
.evt-bw-custom-wrap input[type="number"] {
  min-width: 72px;
  max-width: 100px;
}
.evt-bw-payout-inline {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
}
.evt-bw-payout-chip {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 12px;
  white-space: nowrap;
  color: var(--text-normal);
}
.evt-bw-payout-chip-label {
  color: var(--text-muted);
}
.evt-bw-payout-chip strong {
  color: var(--green);
  font-weight: 600;
}
.evt-bw-payout-empty {
  font-size: 12px;
  color: var(--text-muted);
}

.evt-bw-announce-layout {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.evt-bw-announce-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 400px);
  gap: 16px 20px;
  align-items: stretch;
}
.evt-bw-announce-form-main {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.evt-bw-announce-form-extra {
  min-width: 0;
}
.evt-bw-announce-preview-col {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  min-width: 0;
  position: sticky;
  top: 12px;
}
.evt-bw-announce-preview-col > .evt-bw-send-btn {
  align-self: flex-end;
  width: auto;
  max-width: 100%;
}
.evt-bw-announce-preview-col > .evt-bw-preview-label {
  margin: 0;
}
.evt-bw-announce-preview-col > .evt-bw-preview-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.evt-bw-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.evt-bw-preview-label {
  margin: 0;
  padding: 0;
  line-height: 1.2;
  text-align: left;
}
.evt-bw-send-btn {
  flex-shrink: 0;
  white-space: nowrap;
  padding: 4px 12px !important;
  font-size: 12px !important;
  line-height: 1.2;
  min-height: 0;
  height: auto;
}
.evt-bw-preview-wrap {
  width: 100%;
  min-width: 0;
  margin: 0;
}
.evt-bw-preview-wrap .discord-msg-preview {
  padding: 12px 16px 12px 12px;
}
@media (max-width: 900px) {
  .evt-bw-announce-row {
    grid-template-columns: 1fr;
  }
  .evt-bw-announce-preview-col {
    position: static;
  }
}

.evt-bw-payout-line {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 13px;
  flex-wrap: wrap;
}
.evt-bw-payout-line strong {
  color: var(--green);
  font-weight: 600;
}
.evt-bw-payout-base {
  font-size: 12px;
  color: var(--text-muted);
}

/* Metrics tab */
.evt-metrics-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
@media (max-width: 640px) {
  .evt-metrics-row { grid-template-columns: 1fr; }
}
.evt-metric-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #f2f3f5;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
}
.evt-metric-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  color: var(--header-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.evt-metric-data { min-width: 0; }
.evt-metric-val {
  font-size: 22px;
  font-weight: 700;
  color: var(--header-primary);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.evt-metric-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
  margin-top: 2px;
}
.evt-detail-metrics-chart {
  margin-bottom: 16px;
}
.evt-graphs-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 860px) {
  .evt-graphs-row { grid-template-columns: 1fr; }
}
.evt-graph-card {
  background: #f2f3f5;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--radius-lg);
  padding: 16px;
}
.evt-graph-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--header-primary);
  margin-bottom: 4px;
}
.evt-graph-header svg { color: var(--brand); opacity: .8; }

/* Settings tab */
.evt-settings-section {
  background: #f2f3f5;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--radius-lg);
  margin-bottom: 12px;
  overflow: hidden;
}
.evt-settings-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  font-size: 13px;
  font-weight: 700;
  color: var(--header-primary);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.evt-settings-header svg { color: var(--text-muted); }
.evt-settings-body {
  padding: 16px 20px;
}
.evt-settings-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}
.evt-settings-field label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.evt-settings-field input,
.evt-settings-field select {
  width: 100%;
}
.evt-settings-hint {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 12px;
  line-height: 1.4;
}
.evt-weekday-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.evt-weekday-btn {
  cursor: pointer;
}
.evt-weekday-btn input { display: none; }
.evt-weekday-btn span {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  background: var(--bg-tertiary);
  color: var(--text-muted);
  transition: background .15s, color .15s;
}
.evt-weekday-btn input:checked + span {
  background: rgba(88,101,242,.16);
  color: var(--header-primary);
}
.evt-settings-sub {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
  margin-bottom: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--border-faint);
}
.evt-settings-actions {
  padding-top: 8px;
}
.evt-settings-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Toggle switch */
.evt-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 4px 0;
}
.evt-toggle-info { flex: 1; min-width: 0; }
.evt-toggle-label { font-size: 14px; font-weight: 600; color: var(--header-primary); }
.evt-toggle-desc { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.dc-toggle { position: relative; display: inline-block; width: 40px; height: 22px; flex-shrink: 0; }
.dc-toggle input { opacity: 0; width: 0; height: 0; }
.dc-toggle-slider {
  position: absolute; cursor: pointer; inset: 0;
  background: var(--bg-mod-strong); border-radius: 11px;
  transition: background .2s;
}
.dc-toggle-slider::before {
  content: ''; position: absolute; width: 16px; height: 16px;
  left: 3px; bottom: 3px; background: #fff; border-radius: 50%;
  transition: transform .2s;
}
.dc-toggle input:checked + .dc-toggle-slider { background: var(--brand); }
.dc-toggle input:checked + .dc-toggle-slider::before { transform: translateX(18px); }

/* Famwar compact date picker */
.evt-settings-field--fw-date .fw-date-wrap {
  position: relative;
  display: block;
  max-width: 220px;
}
.fw-date-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 34px;
  padding: 6px 10px;
  font-size: 13px;
  font-family: var(--font);
  color: var(--text-normal);
  background: var(--input-bg);
  border: 1px solid var(--border-faint);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, background .15s;
  user-select: none;
  text-align: left;
}
.fw-date-trigger:hover {
  border-color: var(--border-subtle);
  background: #1a1b1e;
}
.fw-date-trigger:focus-visible {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 1px var(--brand);
}
.fw-date-trigger[aria-expanded="true"] {
  border-color: var(--brand);
  box-shadow: 0 0 0 1px var(--brand);
}
.fw-date-trigger-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: rgba(88, 101, 242, .14);
  color: var(--brand);
}
.fw-date-trigger-text {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
}
.fw-date-trigger-text.is-placeholder {
  color: var(--text-muted);
  font-weight: 500;
}
.fw-date-chevron {
  flex-shrink: 0;
  opacity: .55;
  transition: transform .15s ease;
}
.fw-date-trigger[aria-expanded="true"] .fw-date-chevron {
  transform: rotate(180deg);
}
.fw-date-popup {
  width: 260px;
  background: var(--bg-floating);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .45), 0 2px 8px rgba(0, 0, 0, .25);
  padding: 10px;
  z-index: 10002;
  opacity: 0;
  transform: translateY(-4px) scale(.98);
  pointer-events: none;
  transition: opacity .12s ease, transform .12s ease;
}
.fw-date-popup.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.fw-date-popup-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.fw-date-month-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--header-primary);
  text-align: center;
  flex: 1;
}
.fw-date-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: var(--bg-tertiary);
  color: var(--text-normal);
  cursor: pointer;
  transition: background .12s, color .12s;
}
.fw-date-nav:hover {
  background: rgba(88, 101, 242, .2);
  color: #fff;
}
.fw-date-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 4px;
}
.fw-date-weekday {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
  text-align: center;
  padding: 2px 0;
}
.fw-date-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.fw-date-day {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 30px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-normal);
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  transition: background .1s, color .1s;
}
.fw-date-day:hover {
  background: var(--bg-mod-subtle);
}
.fw-date-day.is-other {
  color: var(--text-faint);
  font-weight: 500;
}
.fw-date-day.is-today {
  box-shadow: inset 0 0 0 1px rgba(88, 101, 242, .65);
}
.fw-date-day.is-selected {
  background: var(--brand);
  color: #fff;
}
.fw-date-day.is-selected:hover {
  background: #4752c4;
}
.fw-date-popup-foot {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border-faint);
}
.fw-date-popup-foot .btn {
  flex: 1;
  min-height: 30px;
  font-size: 12px;
}

/* Leaderboard */
.evt-lb-body { padding: 8px 16px 12px; }
.evt-lb-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 4px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  font-size: 13px;
}
.evt-lb-row:last-child { border-bottom: none; }
.evt-lb-pos { width: 28px; text-align: center; font-weight: 700; font-size: 14px; }
.evt-lb-rank { color: var(--text-muted); display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; font-size: 12px; font-weight: 700; background: rgba(255,255,255,0.06); }
.evt-lb-rank-1 { background: #fab005; color: #1a1a1a; }
.evt-lb-rank-2 { background: #cdd0d3; color: #1a1a1a; }
.evt-lb-rank-3 { background: #cd7f32; color: #1a1a1a; }
.evt-lb-name { flex: 1; font-weight: 600; color: var(--header-primary); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.evt-lb-stat { color: var(--text-muted); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* History expandable */
.evt-hist-item {
  background: #f2f3f5;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--radius-lg);
  margin-bottom: 8px;
  overflow: hidden;
}
.evt-hist-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
}
.evt-hist-icon {
  width: 32px; height: 32px; border-radius: 8px;
  background: rgba(88,101,242,.12); color: var(--brand);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.evt-hist-icon svg { width: 16px; height: 16px; }
.evt-hist-info { flex: 1; min-width: 0; }
.evt-hist-name { font-size: 14px; font-weight: 600; color: var(--header-primary); }
.evt-hist-meta { font-size: 12px; color: var(--text-muted); display: flex; gap: 10px; margin-top: 2px; }
.evt-hist-expand {
  width: 28px; height: 28px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); transition: background .15s, transform .2s;
  flex-shrink: 0;
}
.evt-hist-expand:hover { background: var(--bg-mod-faint); }
.evt-hist-expand.open svg { transform: rotate(180deg); }
.evt-hist-detail-inner { padding: 0 16px 16px; }
.evt-hist-table {
  width: 100%; border-collapse: collapse; font-size: 13px;
}
.evt-hist-table th {
  text-align: left; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-muted); padding: 6px 8px;
  border-bottom: 1px solid var(--border-faint);
}
.evt-hist-table td {
  padding: 6px 8px; color: var(--text-normal);
  border-bottom: 1px solid var(--border-faint);
}
/* History filters */
.evt-hist-filters {
  margin-bottom: 12px;
}
.evt-hist-filter-row {
  display: flex; gap: 8px; flex-wrap: nowrap; align-items: center;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.evt-hist-filter-row .input,
.evt-hist-filter-row select,
.evt-hist-filter-row .select-wrap {
  font-size: 14px;
}
.evt-hist-filter-row .evt-hist-filter-search {
  flex: 1 1 160px;
  min-width: 140px;
  max-width: 220px;
}
.evt-hist-filter-row .evt-hist-filter-select,
.evt-hist-filter-row .cd-wrap {
  flex: 1 1 0;
  min-width: 140px;
  max-width: none;
  width: auto;
}
/* Match Versicherungen Laufzeit (ins-duration) dropdown styling */
.evt-hist-filter-row .cd-wrap .cd-trigger {
  min-height: 42px;
  padding: 10px 12px;
  font-size: 14px;
}
.section-insurance .form-group .cd-wrap,
.section-insurance .form-group select {
  width: 100%;
}
.ins-cars-toolbar .cd-wrap {
  flex: 0 0 auto;
  width: min(280px, 32vw);
  min-width: 200px;
}
.ins-cars-toolbar .cd-wrap.custom-select-wrapper,
.ins-cars-toolbar .custom-select-wrapper.cd-wrap {
  flex: 0 0 auto;
  width: min(280px, 32vw);
  min-width: 200px;
}
body:not(.is-admin) .content-header-actions .btn.personal-only:hover,
body:not(.is-admin) .content-header-actions .btn-secondary.personal-only:hover {
  background: rgba(237, 66, 69, 0.14);
  color: var(--red);
  border-color: rgba(237, 66, 69, 0.35);
}
/* History detail summary */
.evt-hist-summary {
  display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 12px;
  padding: 10px 12px; background: rgba(255,255,255,.04); border-radius: var(--radius-md);
}
.evt-hist-summary-item {
  display: flex; flex-direction: column; gap: 2px;
}
.evt-hist-summary-label {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted);
}
.evt-hist-summary-val {
  font-size: 14px; font-weight: 600; color: var(--header-primary);
}
/* Edit bar */
.evt-hist-edit-bar {
  display: flex; gap: 8px; align-items: center; flex-wrap: nowrap;
  margin-bottom: 8px; padding: 10px 12px;
  background: rgba(255,255,255,.04); border-radius: var(--radius-md);
  overflow-x: auto;
}
.evt-hist-edit-label {
  font-size: 12px; font-weight: 600; color: var(--text-muted);
  white-space: nowrap;
}
.evt-hist-edit-bar select,
.evt-hist-edit-bar .select-wrap { font-size: 13px; height: 32px; }
.evt-hist-outcome-edit .evt-hist-filter-select,
.evt-hist-outcome-edit .cd-wrap {
  flex: 0 1 180px;
  min-width: 140px;
  max-width: 220px;
}
.evt-hist-att-toolbar {
  display: flex; align-items: center; gap: 8px; margin: 12px 0 8px;
}
.evt-hist-log-upload { margin: 10px 0; }
.evt-hist-log-drop {
  min-height: 72px; padding: 12px;
  border: 1px dashed var(--border-faint); border-radius: var(--radius-md);
  cursor: pointer; text-align: center;
}
.evt-hist-log-drop .drop-zone-inner {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 13px; color: var(--text-muted);
}
.evt-hist-log-drop.drag-over { border-color: var(--brand); background: rgba(88,101,242,.08); }
.evt-hist-kills-input {
  background: var(--bg-tertiary); border: 1px solid var(--border-faint);
  border-radius: var(--radius-sm); color: var(--text-normal);
  padding: 2px 6px; font-size: 13px; text-align: center;
}
.evt-hist-kills-input:focus {
  border-color: var(--brand); outline: none;
}
/* Report section */
.evt-hist-report {
  margin-top: 12px; padding: 10px 12px;
  background: rgba(255,255,255,.04); border-radius: var(--radius-md);
}
.evt-hist-report-header {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-muted); margin-bottom: 6px;
}
.evt-hist-report-meta {
  display: flex; gap: 16px; font-size: 13px; color: var(--text-normal);
}
.evt-chart {
  display: block;
  width: 100%;
  height: 178px !important;
  max-height: 178px;
  padding: 8px 0 0;
  min-height: 178px;
}
.evt-bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 150px;
  padding: 0 2px;
}
.evt-bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}
.evt-bar-value {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 3px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.evt-bar-track {
  width: 100%;
  max-width: 24px;
  height: 110px;
  background: var(--bg-mod-faint);
  border-radius: 6px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.evt-bar-fill {
  width: 100%;
  border-radius: 6px;
  min-height: 3px;
  transition: height .4s cubic-bezier(.4,0,.2,1);
}
.evt-bar-label {
  font-size: 9px;
  color: var(--text-faint);
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  text-align: center;
}

/* Event Global Metrics */
.evt-gm-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 20px;
}
.evt-gm-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--header-primary);
  margin: 0;
}
.evt-gm-sub {
  font-size: 13px;
  color: var(--text-muted);
  margin: 2px 0 0;
}
.evt-gm-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.evt-gm-stat {
  background: #f2f3f5;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
}
.evt-gm-stat-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.evt-gm-stat-top span {
  font-size: 13px;
  color: var(--text-muted);
}
.evt-gm-stat-val {
  font-size: 28px;
  font-weight: 800;
  color: var(--header-primary);
  line-height: 1.1;
}
.evt-gm-stat-label {
  font-size: 12px;
  color: var(--text-faint);
  margin-top: 4px;
}
.evt-gm-chart-card,
.evt-detail-metrics-chart {
  background: #2f3136;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 16px 18px;
  box-shadow: none;
  transition: none !important;
}
.evt-gm-chart-card:hover,
.evt-detail-metrics-chart:hover {
  background: #2f3136 !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
  box-shadow: none !important;
  transform: none !important;
}
.evt-gm-chart-card .evt-gm-chart-toolbar,
.evt-gm-chart-card .evt-gm-chart-controls,
.evt-gm-chart-card .evt-gm-chart-actions,
.evt-gm-chart-card .evt-gm-legend-strip,
.evt-detail-metrics-chart .evt-gm-chart-toolbar,
.evt-detail-metrics-chart .evt-gm-chart-controls,
.evt-detail-metrics-chart .evt-gm-chart-actions,
.evt-detail-metrics-chart .evt-gm-legend-strip {
  transition: none !important;
}
/* Event charts: flat layout shell (match home payout — no nested borders / hover brighten) */
.evt-gm-chart-card .chart-wrap,
.evt-gm-chart-card .evt-gm-timeline-shell,
.evt-gm-chart-card .evt-gm-chart-layout,
.evt-gm-chart-card .dash-chart-host,
.evt-detail-metrics-chart .chart-wrap,
.evt-detail-metrics-chart .evt-gm-timeline-shell,
.evt-detail-metrics-chart .evt-gm-chart-layout {
  transition: none !important;
  box-shadow: none !important;
}
.evt-gm-chart-card .evt-gm-chart-layout .evt-gm-timeline-shell,
.evt-detail-metrics-chart .evt-gm-chart-layout .evt-gm-timeline-shell {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}
.evt-gm-chart-card .evt-gm-chart-layout .evt-gm-insight-card,
.evt-detail-metrics-chart .evt-gm-chart-layout .evt-gm-insight-card {
  background: transparent !important;
  border: none !important;
  border-left: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.evt-gm-chart-card .chart-wrap:hover,
.evt-gm-chart-card:hover .chart-wrap,
.evt-gm-chart-card .evt-gm-timeline-shell:hover,
.evt-gm-chart-card:hover .evt-gm-timeline-shell,
.evt-gm-chart-card .evt-gm-chart-layout:hover,
.evt-gm-chart-card:hover .evt-gm-chart-layout,
.evt-gm-chart-card .dash-chart-host:hover,
.evt-gm-chart-card:hover .dash-chart-host,
.evt-detail-metrics-chart .chart-wrap:hover,
.evt-detail-metrics-chart:hover .chart-wrap,
.evt-detail-metrics-chart .evt-gm-timeline-shell:hover,
.evt-detail-metrics-chart:hover .evt-gm-timeline-shell,
.evt-detail-metrics-chart .evt-gm-chart-layout:hover,
.evt-detail-metrics-chart:hover .evt-gm-chart-layout {
  outline: none !important;
  box-shadow: none !important;
}
.evt-gm-chart-card .chart-wrap:hover,
.evt-gm-chart-card:hover .chart-wrap,
.evt-gm-chart-card .evt-gm-timeline-shell:hover,
.evt-gm-chart-card:hover .evt-gm-timeline-shell,
.evt-gm-chart-card:hover .evt-gm-chart-layout .evt-gm-timeline-shell,
.evt-detail-metrics-chart .chart-wrap:hover,
.evt-detail-metrics-chart:hover .chart-wrap,
.evt-detail-metrics-chart .evt-gm-timeline-shell:hover,
.evt-detail-metrics-chart:hover .evt-gm-timeline-shell,
.evt-detail-metrics-chart:hover .evt-gm-chart-layout .evt-gm-timeline-shell {
  background: transparent !important;
  background-color: transparent !important;
  border-color: transparent !important;
}
.evt-gm-chart-card .evt-gm-chart-layout,
.evt-detail-metrics-chart .evt-gm-chart-layout {
  border: none !important;
}
.evt-gm-chart-card .evt-gm-chart-layout:hover,
.evt-gm-chart-card:hover .evt-gm-chart-layout,
.evt-detail-metrics-chart .evt-gm-chart-layout:hover,
.evt-detail-metrics-chart:hover .evt-gm-chart-layout {
  background: #2b2d31 !important;
  border: none !important;
  box-shadow: none !important;
}
.evt-gm-chart-card .evt-gm-insight-card:hover,
.evt-gm-chart-card:hover .evt-gm-insight-card,
.evt-detail-metrics-chart .evt-gm-insight-card:hover,
.evt-detail-metrics-chart:hover .evt-gm-insight-card,
.evt-gm-chart-card:hover .evt-gm-chart-layout .evt-gm-insight-card,
.evt-detail-metrics-chart:hover .evt-gm-chart-layout .evt-gm-insight-card {
  background: transparent !important;
  border-color: transparent !important;
  border-left-color: rgba(255, 255, 255, 0.06) !important;
  box-shadow: none !important;
}
.evt-gm-chart-card canvas,
.evt-detail-metrics-chart canvas,
.evt-gm-chart-card .evt-gm-timeline-shell:focus,
.evt-gm-chart-card .evt-gm-timeline-shell:focus-visible,
.evt-detail-metrics-chart .evt-gm-timeline-shell:focus,
.evt-detail-metrics-chart .evt-gm-timeline-shell:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}
.evt-gm-chart-toolbar {
  margin-bottom: 10px;
}
.evt-gm-chart-heading {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--header-primary);
}
.evt-gm-chart-controls {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.evt-gm-chart-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.evt-gm-chart-layout,
.home-payout-chart-layout {
  --evt-gm-chart-frame-h: 228px;
  --home-payout-panel-bg: #2b2d31;
  --home-payout-panel-border: rgba(255, 255, 255, 0.06);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(200px, 240px);
  gap: 0;
  align-items: stretch;
  background: var(--home-payout-panel-bg);
  border: 1px solid var(--home-payout-panel-border);
  border-radius: 10px;
  overflow: hidden;
}
.home-payout-chart-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-faint);
  border-radius: var(--radius-lg);
  padding: 18px;
}
.home-payout-chart-card .chart-wrap.home-earnings-timeline-shell,
.home-payout-chart-card .home-earnings-timeline-shell.chart-wrap {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 12px 14px 10px;
  box-shadow: none;
}
.home-payout-chart-card .home-earnings-insight-card {
  background: transparent;
  border: none;
  border-left: 1px solid var(--home-payout-panel-border);
  border-radius: 0;
  margin: 0;
}
.home-payout-chart-card .chart-head {
  margin-bottom: 12px;
}
.evt-gm-toggle {
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  color: var(--text-muted);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.evt-gm-toggle:hover {
  color: var(--header-primary);
  border-color: rgba(255,255,255,.14);
}
.evt-gm-toggle.active {
  background: rgba(88, 101, 242, 0.22);
  color: #e3e5ff;
  border-color: rgba(88, 101, 242, 0.45);
}

.evt-note-inline {
  color: var(--text-muted);
  font-size: 13px;
  padding: 4px 0;
}

.evt-note-inline strong {
  color: var(--header-primary);
}
.evt-gm-timeline-shell,
.home-earnings-timeline-shell {
  position: relative;
  width: 100%;
  height: var(--evt-gm-chart-frame-h);
  min-height: var(--evt-gm-chart-frame-h);
  box-sizing: border-box;
  padding: 12px 14px 10px;
  display: flex;
  flex-direction: column;
  background: #2b2d31;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
}
.evt-gm-chart-layout .evt-gm-timeline-shell,
.evt-gm-chart-layout .evt-gm-timeline-shell.chart-wrap {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}
.home-payout-chart-card .home-earnings-timeline-shell {
  background: transparent;
  border: none;
  border-radius: 0;
}
.evt-gm-timeline-shell canvas,
.home-earnings-timeline-shell canvas {
  display: block;
  width: 100% !important;
  flex: 1 1 auto;
  height: auto !important;
  min-height: 0;
  max-height: none;
}
.evt-gm-insight-card,
.home-earnings-insight-card {
  background: #2b2d31;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 12px 14px;
  height: var(--evt-gm-chart-frame-h);
  min-height: var(--evt-gm-chart-frame-h);
  max-height: var(--evt-gm-chart-frame-h);
  box-sizing: border-box;
  overflow-y: auto;
  font-size: 12px;
  line-height: 1.45;
  color: #dcddde;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.evt-gm-insight-pinned-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 14px;
  color: var(--header-primary);
}
.evt-gm-insight-pinned-meta {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.evt-gm-insight-pinned-meta strong {
  color: #dcddde;
}
.evt-gm-insight-pinned-hint {
  font-size: 11px;
  color: var(--text-faint);
  line-height: 1.4;
}
.evt-gm-insight-card .dash-chart-pinned-title,
.home-earnings-insight-card .dash-chart-pinned-title {
  text-align: left;
  margin-bottom: 8px;
}
.evt-gm-insight-card > div:not(.evt-gm-insight-placeholder),
.home-earnings-insight-card > div:not(.evt-gm-insight-placeholder) {
  text-align: left;
}
.evt-gm-insight-placeholder {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.5;
}
.home-earnings-insight-total {
  margin-bottom: 10px;
  font-size: 15px;
}
.home-earnings-insight-total.is-negative strong {
  color: #ed4245;
}
.home-earnings-pin-hint {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-faint);
  text-transform: none;
  letter-spacing: 0;
}
.home-earnings-insight-compose-head {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-faint);
  margin-bottom: 6px;
}
.home-earnings-compose-rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.home-earnings-compose-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-size: 12px;
}
.home-earnings-compose-row span {
  color: var(--text-muted);
}
.home-earnings-compose-row.is-credit strong {
  color: #57f287;
  font-weight: 600;
}
.home-earnings-compose-row.is-debit strong {
  color: #ed4245;
  font-weight: 600;
}
.home-earnings-compose-row.is-muted span,
.home-earnings-compose-row.is-muted strong {
  color: var(--text-faint);
  font-weight: 500;
}

/* FamBiz chart insight separator (nicer than dashes) */
.fambiz-insight-sep {
  height: 1px;
  background: rgba(255,255,255,.08);
  margin: 8px 0 10px;
}
.evt-gm-svg {
  width: 100%;
  height: auto;
}
.evt-gm-legend-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  justify-content: flex-end;
  flex: 1;
  min-width: 0;
  max-height: 64px;
  overflow-y: auto;
  padding: 2px 0;
}
.evt-gm-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-muted);
  border: 1px solid transparent;
  background: transparent;
  border-radius: 6px;
  padding: 4px 8px;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
  max-width: 160px;
}
.evt-gm-legend-item:hover {
  color: var(--header-primary);
  background: rgba(255, 255, 255, 0.04);
}
.evt-gm-legend-item.is-pinned {
  color: #e3e5ff;
  background: rgba(88, 101, 242, 0.18);
  border-color: rgba(88, 101, 242, 0.4);
}
.evt-gm-legend-item.is-hovered {
  color: var(--header-primary);
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
}
.evt-gm-legend-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.evt-gm-legend-dot {
  width: 11px;
  height: 11px;
  border-radius: 999px;
  box-shadow: 0 0 0 2px rgba(255,255,255,.08);
  flex-shrink: 0;
}

/* ===== Responsive Additions ===== */
@media (max-width: 860px) {
  .evt-gm-chart-layout,
  .home-payout-chart-layout {
    grid-template-columns: 1fr;
  }
  .evt-gm-chart-controls {
    flex-direction: column;
    align-items: stretch;
  }
  .evt-gm-chart-actions,
  .evt-gm-legend-strip {
    justify-content: flex-start;
  }
  .evt-gm-chart-layout,
  .home-payout-chart-layout {
    --evt-gm-chart-frame-h: 248px;
  }
  .stats-row-extended,
  .home-analytics-grid,
  .home-feed-grid { grid-template-columns: 1fr; }
  .chart-card-wide { grid-column: auto; }
  #section-payout .stats-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  .home-status-grid { grid-template-columns: 1fr; }
  #section-payout .stats-row { grid-template-columns: 1fr; }
}

/* POV Image Overlay */
.pov-image-wrapper { position: relative; display: inline-block; }
.pov-image-overlay {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 6px 8px;
  background: linear-gradient(transparent, rgba(0,0,0,.75));
  border-radius: 0 0 6px 6px;
  display: flex; flex-direction: column;
  pointer-events: none;
}
.pov-overlay-name { font-size: 12px; font-weight: 600; color: #fff; line-height: 1.3; }
.pov-overlay-user { font-size: 11px; color: rgba(255,255,255,.7); line-height: 1.3; }

/* ═══════════════════════════════════════════════════════════ */
/* Embed Creator                                              */
/* ═══════════════════════════════════════════════════════════ */

/* ── Embed preview enhancements ── */
.discord-embed-content {
  display: block;
  overflow: hidden;
}
.discord-embed-text-side {
  min-width: 0;
  overflow: hidden;
}
.discord-embed-thumbnail {
  float: right;
  margin: 0 0 8px 16px;
  width: 80px;
  height: 80px;
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.discord-embed-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.discord-embed-author {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #dcddde;
  margin-bottom: 4px;
}
.discord-embed-author-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
}

.discord-embed-fields {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 8px;
}
.discord-embed-field {
  grid-column: span 3;
}
.discord-embed-field.inline {
  grid-column: span 1;
}
.discord-embed-field-name {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 2px;
}
.discord-embed-field-value {
  font-size: 13px;
  color: #dcddde;
  line-height: 1.5;
}

.discord-embed-footer-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.discord-embed-footer-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
}
.discord-embed-footer-sep {
  color: var(--text-muted);
  font-size: 12px;
}
.discord-embed-footer-ts {
  font-size: .75rem;
  color: var(--text-muted);
}

.discord-msg-text {
  color: var(--text-normal);
  font-size: 15px;
  line-height: 1.375;
  margin-bottom: 4px;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* ── Link Buttons preview ── */
.discord-buttons-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.discord-link-button {
  display: inline-flex;
  align-items: center;
  padding: 2px 16px;
  height: 32px;
  border-radius: 3px;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  background: var(--bg-accent);
  text-decoration: none;
  transition: background .15s;
  cursor: pointer;
}
.discord-link-button:hover { background: #4e5058; }
.discord-btn-emoji { margin-right: 4px; }

/* ── Field / Button editor rows ── */
.ec-field-row {
  padding: 10px 12px;
  background: var(--bg-mod-faint);
  border-radius: var(--radius-sm);
  margin-bottom: 6px;
  border: 1px solid var(--border-faint);
}
.ec-button-row {
  padding: 8px 12px;
  background: var(--bg-mod-faint);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-faint);
}

/* ═══════════════════════════════════════════════════════════ */
/* Discord Logs Config                                        */
/* ═══════════════════════════════════════════════════════════ */

.dlog-events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  padding: 12px 0;
}
.dlog-event-category {
  background: var(--bg-tertiary);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  border: 1px solid var(--border-faint);
}
.dlog-event-category h4 {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 10px;
  letter-spacing: .5px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-faint);
}
.dlog-event-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  font-size: 13px;
  cursor: pointer;
  color: var(--text-normal);
  user-select: none;
}
.dlog-event-toggle span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dlog-event-toggle { cursor: default; }

/* Badge variants */
.badge-danger { background: var(--red); color: #fff; }
.badge-muted { background: var(--bg-accent); color: var(--text-muted); }

/* Button icon (for inline delete etc) */
.btn-icon {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color .15s, background .15s;
}
.btn-icon:hover {
  color: var(--header-primary);
  background: var(--bg-mod-subtle);
}
.btn-icon-danger:hover {
  color: var(--red);
  background: rgba(237,66,69,.12);
}

/* Switch label (checkbox + text) */
.switch-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-normal);
  cursor: pointer;
  user-select: none;
}
.switch-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--brand);
  cursor: pointer;
}

/* ===== AutoMod ===== */
.toggle-sm .toggle-track {
  width: 36px !important;
  height: 20px !important;
  border-width: 2px !important;
}
.toggle-sm .toggle-knob {
  width: 14px !important;
  height: 14px !important;
  top: 1px !important;
  left: 1px !important;
}
.toggle-sm input:checked + .toggle-track .toggle-knob {
  transform: translateX(16px) !important;
}

/* ===== Shared Shell Refresh ===== */
:root {
  --surface-panel: #202225;
  --surface-raised: #2f3136;
  --surface-hover: #36393f;
  --surface-overlay: rgba(17,18,20,.72);
  --border-strong: rgba(255,255,255,.08);
  --input-bg-hover: #2c2d31;
  --card-shadow: 0 1px 0 rgba(0,0,0,.18);
  --floating-shadow: 0 8px 24px rgba(0,0,0,.4);
}

body {
  background: linear-gradient(180deg, #111214 0%, #1e1f22 100%);
}

#view-login.landing-view:not(.discord-com-landing-root),
#view-servers {
  background: #23272a;
}

.login-card,
.servers-page,
.content-card,
.stat-card,
.profile-card,
.chart-wrap,
.leaderboard-wrap,
.modal-card {
  box-shadow: var(--card-shadow);
}

.login-card {
  border: 1px solid var(--border-strong);
  background: var(--surface-raised);
}

.login-left {
  padding: 36px 36px 32px;
}

.login-right {
  background: var(--surface-panel);
}

.login-logo-image {
  border-radius: 24px;
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
}

.servers-page {
  max-width: 960px;
  padding: 48px 32px;
  background: var(--surface-panel);
  border: 1px solid var(--border-strong);
  border-radius: 24px;
}

.servers-grid {
  gap: 14px;
}

.server-tile {
  border: 1px solid var(--border-strong);
  background: var(--surface-raised);
  box-shadow: 0 1px 0 rgba(0,0,0,.2);
}

.server-tile:hover {
  background: var(--surface-hover);
}

.server-tile.back-tile {
  border-color: rgba(88,101,242,.32);
  background: rgba(88,101,242,.12);
}

.server-tile.server-tile-disabled,
.server-tile.server-tile-disabled:hover {
  background: var(--surface-raised);
}

.panel-action:disabled,
.personal-nav-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
}

.sidebar {
  background: var(--bg-secondary);
  border-right: 1px solid rgba(0, 0, 0, 0.24);
}

.sidebar-header {
  height: var(--header-h);
  padding: 0 16px;
  background: var(--surface-panel);
  border-bottom: 1px solid var(--border-strong);
  box-shadow: none;
}

.sidebar-title {
  font-size: 15px;
  letter-spacing: .01em;
}

.nav-category {
  margin-bottom: 2px;
}

.nav-cat-header {
  padding: 6px 8px;
  border-radius: var(--radius-sm);
}

.nav-cat-header:hover {
  background: rgba(255,255,255,.04);
}

.nav-cat-items {
  margin-left: 17px;
  padding-left: 0;
  border-left: 2px solid var(--border-subtle);
}

.channel {
  min-height: var(--nav-row-h);
  gap: 6px;
  padding: 4px var(--nav-pad-x);
  font-size: var(--nav-font);
  border-radius: var(--radius-sm);
  margin-bottom: 1px;
}

.channel:hover {
  background: rgba(255,255,255,.06);
  color: var(--header-primary);
}

.channel.active {
  background: var(--bg-mod-subtle);
  color: var(--header-primary);
  box-shadow: none;
}

.panel-footer {
  background: var(--bg-tertiary);
  border-top: 1px solid var(--border-strong);
}

.user-panel {
  height: 58px;
  margin: 8px;
  padding: 8px 10px;
  border-radius: 12px;
}

.user-panel:hover {
  background: rgba(255,255,255,.04);
}

.panel-footer.open .panel-actions {
  padding: 0 8px 8px;
}

.panel-action {
  border-radius: 10px;
}

.content {
  background: var(--bg-primary);
}

.content-header {
  min-height: var(--header-h);
  height: auto;
  gap: 12px;
  padding: 0 16px;
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border-strong);
  box-shadow: none;
}

body:not(.is-admin) .content-heading {
  display: flex;
}

.content-heading {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.content-heading-icon {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  color: var(--header-primary);
  background: var(--bg-mod-faint);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
  flex-shrink: 0;
}

.content-heading-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.content-heading-top {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.content-header h2 {
  font-size: 15px;
  line-height: 1.2;
  font-weight: 700;
}

.content-subtitle {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--bg-mod-faint);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.content-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.header-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  background: var(--surface-panel);
  color: var(--header-primary);
  transition: background .15s, border-color .15s, transform .15s;
}

.header-action:hover {
  background: var(--surface-hover);
  border-color: rgba(255,255,255,.12);
  transform: none;
}

.header-action-server {
  min-width: 220px;
  justify-content: flex-start;
  padding: 8px 12px;
}

.header-action-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
}

.header-action-label {
  font-size: 10px;
  line-height: 1.1;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.header-action-copy strong {
  font-size: 13px;
  line-height: 1.2;
  color: var(--header-primary);
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.header-action.is-empty strong {
  color: var(--text-muted);
}

.personal-settings-btn {
  display: inline-flex;
  position: static;
  right: auto;
  top: auto;
  transform: none;
  padding: 0;
  line-height: 1;
}

.header-action-icon {
  width: 44px;
  min-width: 44px;
  padding: 0;
}

body:not(.is-admin) .personal-settings-btn {
  display: inline-flex;
}

.personal-nav {
  position: static;
  left: auto;
  transform: none;
  margin-left: auto;
  height: var(--header-h);
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

.personal-nav-btn {
  min-height: 0;
  min-width: 0;
  border-radius: var(--radius-sm);
  padding: 0 14px;
}

.personal-nav-btn.active {
  background: transparent;
  box-shadow: none;
}

.section {
  padding: 20px;
}

.content-card,
.stat-card,
.profile-card,
.chart-wrap,
.leaderboard-wrap {
  border: 1px solid var(--border-strong);
  background: var(--surface-raised);
}

.content-card {
  border-radius: 20px;
  padding: 18px;
}

.card-toolbar {
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.stat-card {
  align-items: flex-start;
  text-align: left;
  border-radius: 18px;
  gap: 6px;
}

.stat-big {
  font-size: 24px;
}

.chart-wrap,
.leaderboard-wrap,
.profile-card {
  border-radius: 20px;
}

.chart-head {
  margin-bottom: 14px;
  color: var(--header-primary);
}

.profile-banner {
  background: linear-gradient(135deg, #5865F2, #4752C4 58%, #3C45A5 100%);
}

.profile-body {
  padding: 16px 18px 18px;
}

.profile-avatar {
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
}

.btn {
  min-height: 38px;
  border: 1px solid transparent;
  border-radius: 10px;
}

.btn-blurple {
  background: var(--brand);
  box-shadow: none;
}

.btn-secondary {
  background: #3f4248;
  border-color: var(--border-strong);
}

.btn-secondary:hover {
  background: #4a4d55;
}

.btn-danger {
  box-shadow: none;
}

input,
select,
textarea,
.cd-trigger,
.ms-trigger {
  background: var(--input-bg);
  border-color: rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}

input:hover,
select:hover,
textarea:hover,
.cd-trigger:hover,
.ms-trigger:hover {
  background: var(--input-bg-hover);
}

input:focus,
select:focus,
textarea:focus,
.cd-trigger.open,
.ms-trigger.open {
  box-shadow: 0 0 0 1px var(--brand), 0 0 0 4px rgba(88,101,242,.12);
}

.cd-menu,
.ms-menu {
  background: var(--surface-panel);
  border: 1px solid var(--border-strong);
  box-shadow: var(--floating-shadow);
  backdrop-filter: blur(12px);
  padding: 8px;
  /* Ensure dropdowns always render above tables/cards (fix: dropdown clipped by permission rows) */
  z-index: 10050 !important;
}

/* Ensure permission table rows don't create stacking contexts that clip the floating dropdown */
.discord-permissions-table,
.discord-permissions-table td,
.discord-permissions-table tr,
.permissions-detail-table,
.permissions-detail-table td,
.permissions-detail-table tr {
  position: static !important;
  z-index: auto !important;
}
.discord-permissions-table .cd-wrap,
.permissions-detail-table .cd-wrap {
  position: static;
}

.cd-opt,
.ms-opt {
  min-height: 40px;
  border-radius: 10px;
}

.ms-tag,
.giveaway-winner-pill {
  border-radius: 999px;
}

.table-container {
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  background: rgba(17,18,20,.18);
}

.dc-page-fahrzeuge .table-container,
.dc-page-fahrzeuge .ins-cars-table-wrap,
.dc-page-fahrzeuge table.ins-cars-table {
  border: none !important;
  border-radius: 0 !important;
  background: #1e1f22 !important;
  box-shadow: none !important;
  outline: none !important;
}

table {
  background: transparent;
}

thead {
  background: rgba(17,18,20,.52);
}

th,
td {
  border-bottom-color: rgba(255,255,255,.06);
}

tr:hover td {
  background: rgba(88,101,242,.08);
}

.discord-permissions-rows tr:hover td,
.discord-permissions-rows tr:hover,
.discord-permissions-table.discord-permissions-rows tr:hover td,
#section-permissions-discord .discord-permissions-rows tr:hover td,
#permissions-discord-detail .discord-permissions-rows tr:hover td,
#permissions-tab-detail .discord-permissions-rows tr:hover td {
  background: var(--bg-secondary);
}

.lb-tabs,
.sub-nav,
.evt-sub-nav {
  display: flex;
  gap: 2px;
  flex-wrap: nowrap;
  padding: 4px;
  margin-bottom: 12px;
  border-radius: var(--radius-md);
  border: none;
  background: var(--nav-segment-bg);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14);
}

.members-tabs {
  display: flex;
  gap: var(--nav-gap);
  margin-bottom: 12px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
}

.lb-tab,
.sub-nav-btn,
.rw-tab {
  min-height: var(--nav-row-h);
  padding: var(--nav-pad-y) 10px;
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: var(--nav-font-sm);
  font-weight: 500;
  flex: 0 0 auto;
  white-space: nowrap;
}

.members-tab {
  padding: var(--nav-pad-y) 14px;
  font-size: var(--nav-font-sm);
  font-weight: 600;
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  cursor: pointer;
  transition: color .15s, border-color .15s;
  flex: 0 0 auto;
  white-space: nowrap;
}

.lb-tab:hover,
.sub-nav-btn:hover,
.rw-tab:hover {
  color: var(--header-primary);
  background: rgba(79, 84, 92, 0.32);
}

.members-tab:hover {
  color: var(--text-normal);
  background: transparent;
}

.lb-tab.active,
.sub-nav-btn.active,
.rw-tab.active {
  color: var(--header-primary);
  background: var(--nav-segment-active);
  box-shadow: none;
}

.members-tab.active {
  color: var(--header-primary);
  background: transparent;
  border-bottom-color: var(--brand);
}

.save-bar {
  background: linear-gradient(180deg, rgba(17,18,20,.96), rgba(22,23,27,.98));
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  box-shadow: var(--floating-shadow);
}

.save-bar-actions .btn {
  min-width: 112px;
}

/* ===== UI Utilities ===== */
.ui-inline-sm,
.ui-inline-md,
.ui-actions-inline,
.ui-actions-inline-wrap {
  display: flex;
  align-items: center;
}

.ui-inline-sm { gap: 8px; }
.ui-inline-md { gap: 12px; }
.ui-actions-inline { gap: 8px; }
.ui-actions-inline-wrap {
  gap: 16px;
  flex-wrap: wrap;
}

.ui-title-reset { margin: 0; }
.ui-margin-reset { margin: 0; }
.ui-section-title { margin-top: 16px; }
.ui-mt-8 { margin-top: 8px; }
.ui-mt-12 { margin-top: 12px; }
.ui-mt-16 { margin-top: 16px; }
.ui-mt-20 { margin-top: 20px; }
.ui-mb-12 { margin-bottom: 12px; }
.ui-mb-16 { margin-bottom: 16px; }
.ui-ml-8 { margin-left: 8px; }
.ui-hidden-input { display: none; }

.ui-form-row-auto-3 { grid-template-columns: auto 1fr 1fr; }
.ui-form-row-auto-2 { grid-template-columns: auto 1fr; }
.ui-form-row-sanctions {
  grid-template-columns: 1fr 100px 140px auto;
  align-items: end;
}

.ui-card-inset {
  padding: 16px;
  background: var(--bg-secondary);
}

.ui-tab-shell {
  padding: 0;
  overflow: hidden;
}

.ui-tab-strip {
  display: flex;
  border-bottom: 2px solid var(--bg-tertiary);
}

.ui-tab-fill {
  flex: 1;
  border-radius: 0;
  border: none;
  padding: 12px;
}

.ui-stat-grid-3 { grid-template-columns: repeat(3, 1fr); margin-bottom: 16px; }
.ui-stat-grid-4 { grid-template-columns: repeat(4, 1fr); margin-bottom: 16px; }
.ui-stat-grid-5 { grid-template-columns: repeat(5, 1fr); margin-bottom: 16px; }
@media (max-width: 1100px) {
  .ui-stat-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .ui-stat-grid-5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .ui-stat-grid-4 { grid-template-columns: 1fr; }
  .ui-stat-grid-5 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px) {
  .ui-stat-grid-5 { grid-template-columns: 1fr; }
}

.pay-stat-combined-loss .pay-stat-loss-hint {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
  margin-bottom: 6px;
  line-height: 1.3;
}
.pay-stat-combined-loss .stat-big {
  margin-top: 2px;
}

.ui-stat-brand { color: var(--brand); }
.ui-stat-danger { color: var(--red); }
.ui-stat-success { color: #3ba55d; }
.ui-stat-warning { color: #fee75c; }

.ui-overlay-primary,
.ui-overlay-secondary {
  position: absolute;
  inset: 0;
  z-index: 20;
  overflow-y: auto;
  padding: 24px;
}

.ui-overlay-primary { background: var(--bg-primary); }
.ui-overlay-secondary { background: var(--bg-secondary); }

.ui-readonly-display {
  background: var(--bg-tertiary) !important;
  color: var(--text-muted) !important;
}

.ui-toolbar-search {
  width: 200px;
  padding: 6px 10px;
  font-size: 13px;
}

.ui-select-compact {
  min-width: 180px;
  height: 32px;
  font-size: 12px;
}

.ui-icon-inline {
  vertical-align: -2px;
  margin-right: 4px;
}

.ui-note {
  color: var(--text-muted);
  font-size: 13px;
  margin-bottom: 12px;
}

.ui-note-sm {
  color: var(--text-muted);
  font-size: 12px;
  margin-top: 8px;
}

.ui-table-scroll-tall { max-height: 600px; }
.ui-chart-head-inset { padding: 16px 16px 0; }

.ui-chart-shell {
  max-width: 420px;
  margin: 0 auto;
  padding: 16px;
}

.ui-chart-tall { max-height: 360px; }
.ui-grow { flex: 1; }
.ui-minw-300 { min-width: 300px; }
.ui-self-end { align-self: flex-end; }

.ui-text-block-label {
  display: block;
  margin-bottom: 6px;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
}

.ui-textarea-panel {
  width: 100%;
  background: var(--bg-primary);
  color: var(--text-normal);
  border: 1px solid var(--bg-mod-faint);
  border-radius: var(--radius-sm);
  padding: 10px;
  font-size: 13px;
  resize: vertical;
  font-family: inherit;
}

.ui-border-top-form {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-faint);
}

.ui-border-top-form-lg {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border-faint);
}

.discord-btn-preview.is-brand { background: #5865F2; }
.discord-btn-preview.is-secondary { background: #4e5058; }
.discord-btn-preview.is-danger { background: #da373c; }
.discord-btn-preview.is-success { background: #248045; }
.ui-embed-bar-brand { background: #5865F2; }

/* ===== Blacklist table (Discord-like) ===== */
.bl-table-wrap { overflow-x: auto; }
.bl-table { width: 100%; border-collapse: collapse; }
.bl-table thead th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  padding: 10px 12px;
  border-bottom: 1px solid var(--background-modifier-accent);
  background: var(--background-secondary);
  position: sticky;
  top: 0;
  z-index: 1;
}
.bl-table tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  vertical-align: top;
}
.bl-table tbody tr:hover td { background: rgba(88, 101, 242, 0.06); }
.bl-user { display: flex; gap: 10px; min-width: 240px; }
.bl-user-meta { min-width: 0; }
.bl-user-name { font-weight: 700; color: var(--header-primary); line-height: 1.2; }
.bl-aliases { margin-top: 2px; font-size: 12px; color: var(--text-muted); line-height: 1.3; }
.bl-reason-cell { min-width: 280px; color: var(--text-normal); }
.bl-id-chip {
  display: inline-flex;
  align-items: center;
  font-weight: 700;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(79,84,92,0.25);
  color: var(--text-normal);
  cursor: pointer;
}
.bl-id-chip.copied { background: rgba(87, 242, 135, 0.18); color: #57F287; }
.bl-id-chip-discord {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-weight: 600;
  font-size: 11px;
}
.bl-actions-cell { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.bl-col-actions { width: 1%; white-space: nowrap; }
.bl-col-id, .bl-col-status, .bl-col-expires, .bl-col-by { white-space: nowrap; }

@media (max-width: 720px) {
  .bl-reason-cell { min-width: 220px; }
  .bl-user { min-width: 200px; }
}

/* ===== Discord embed preview mobile fixes ===== */
@media (max-width: 520px) {
  .discord-msg-preview { gap: 12px; }
  .discord-embed-inner { padding: 8px 12px 12px 10px; }
  .discord-embed-thumbnail {
    float: none;
    margin: 8px 0 0 0;
    width: 100%;
    height: auto;
    border-radius: 10px;
  }
  .discord-embed-thumbnail img { height: auto; object-fit: cover; }
  .discord-embed-fields { grid-template-columns: 1fr; }
  .discord-embed-field.inline { grid-column: span 1; }
}

/* ===== Blacklist rows (use Members table look) ===== */
.bl-member-cell { display: flex; align-items: center; gap: 10px; min-width: 220px; }
.bl-member-avatar { flex-shrink: 0; }
.bl-member-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bl-member-name { font-weight: 700; color: var(--header-primary); line-height: 1.2; }
.bl-member-sub { font-size: 12px; color: var(--text-muted); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 360px; }
.bl-actions-cell { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: nowrap; white-space: nowrap; width: 100%; }
.bl-actions-left { display: inline-flex; gap: 6px; align-items: center; }
.bl-actions-right { display: inline-flex; gap: 6px; align-items: center; justify-content: flex-end; }
.bl-col-reason { min-width: 260px; color: var(--text-normal); }
.bl-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid transparent;
  white-space: nowrap;
}
.bl-status-badge.is-active { background: rgba(254, 231, 92, 0.10); color: #FEE75C; border-color: rgba(254,231,92,0.18); }
.bl-status-badge.is-permanent { background: rgba(237, 66, 69, 0.10); color: #ED4245; border-color: rgba(237,66,69,0.18); }

/* ── Personal mode: header stacks on tablet/mobile (shell only) ── */
@media (max-width: 1024px) {
  body:not(.is-admin) .app-shell .content-header {
    display: flex;
    flex-wrap: wrap;
    height: auto;
    align-items: center;
    row-gap: 0;
  }

  body:not(.is-admin) .app-shell .content-heading {
    flex: 1 1 auto;
    min-width: 0;
  }

  body:not(.is-admin) .app-shell .content-header-actions {
    flex: 0 0 auto;
  }

  body:not(.is-admin) .app-shell .personal-nav {
    flex: 0 0 100%;
    order: 3;
    margin-left: 0;
    height: var(--nav-row-h-touch);
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: var(--nav-gap);
    padding: 0;
    border-radius: 0;
    background: transparent;
    border: none;
  }

  body:not(.is-admin) .app-shell .personal-nav::-webkit-scrollbar {
    display: none;
  }
}

@media (max-width: 600px) {
  .personal-nav-btn {
    min-width: 0;
    padding: 0 12px;
    font-size: var(--nav-font-sm);
  }
}

@media (max-width: 860px) {
  .section {
    padding: 16px;
  }

  .home-layout {
    grid-template-columns: 1fr;
  }
}

/* App shell: admin header stacks on narrow viewports */
@media (max-width: 1024px) {
  body.is-admin.guild-joined .app-shell .content-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    height: auto;
    min-height: var(--header-h);
    row-gap: 8px;
    padding-top: max(10px, env(safe-area-inset-top, 0px));
    padding-left: max(12px, env(safe-area-inset-left, 0px));
    padding-right: max(12px, env(safe-area-inset-right, 0px));
  }

  body.is-admin.guild-joined .app-shell .content-heading {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
  }

  body.is-admin.guild-joined .app-shell .content-header-actions {
    flex: 0 0 auto;
    margin-left: auto;
    width: auto;
    justify-content: flex-end;
  }
}

@media (max-width: 767px) {
  body.is-admin.guild-joined .app-shell .content-header-actions {
    flex: 1 1 100%;
    justify-content: stretch;
  }

  body.is-admin.guild-joined .app-shell .content-header-actions .btn {
    flex: 1;
    min-height: 44px;
  }
}

@media (max-width: 600px) {
  .content-subtitle {
    font-size: 11px;
  }

  .lb-tab,
  .members-tab,
  .sub-nav-btn,
  .rw-tab {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

/* ===== Discord Native Refresh ===== */
:root {
  --brand: #5865F2;
  --brand-hover: #4752C4;
  --brand-active: #3C45A5;
  --green: #23a559;
  --green-hover: #1a7d44;
  --red: #ed4245;
  --red-hover: #c03537;
  --bg-primary: #313338;
  --bg-secondary: #2b2d31;
  --bg-tertiary: #1e1f22;
  --bg-floating: #111214;
  --bg-accent: #36393f;
  --input-bg: #1e1f22;
  --surface-panel: #202225;
  --surface-raised: #2b2d31;
  --surface-hover: #36393f;
  --surface-overlay: rgba(0, 0, 0, 0.72);
  --overlay-modal: rgba(0, 0, 0, 0.72);
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-faint: rgba(255, 255, 255, 0.06);
  --bg-mod-faint: rgba(255, 255, 255, 0.06);
  --bg-mod-subtle: rgba(255, 255, 255, 0.1);
  --bg-mod-strong: rgba(255, 255, 255, 0.16);
  --focus-ring: var(--brand);
  --font: 'Inter', 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Consolas', 'Monaco', monospace;
  --text-normal: #dbdee1;
  --text-muted: #b5bac1;
  --header-primary: #f2f3f5;
  --header-secondary: #949ba4;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 8px;
  --transition-standard: 150ms ease-out;
  --spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --secondary-opacity: 0.6;
  --scrollbar-thin: rgba(121, 126, 138, 0.72);
}

html,
body {
  line-height: 1.4;
}

body {
  font-family: var(--font);
  background: var(--bg-primary);
  color: var(--text-normal);
  font-weight: 400;
}

#view-login:not(.discord-com-landing-root),
#view-servers,
.login-bg,
.app-frame,
.content-main,
.section,
.settings-page,
.settings-content {
  background: var(--bg-primary);
}

/* Session restore: hide personal chrome until guild admin state is applied */
html.trace-restore-guild .personal-nav,
html.trace-restore-guild .nav-category.personal-only {
  display: none !important;
}
html.trace-restore-guild #personal-nav {
  display: none !important;
}

/* Boot view — avoids landing flash before session */
body.auth-pending #view-login.landing-view {
  visibility: hidden !important;
  pointer-events: none !important;
}
body.auth-resolved #view-boot.dash-boot-view {
  display: none !important;
}

body.auth-resolved #view-login.landing-view:not(.active) {
  visibility: hidden !important;
  pointer-events: none !important;
}
.dash-boot-view {
  align-items: center;
  justify-content: center;
  background: #202225;
}
.dash-boot-inner {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 3px solid rgba(88, 101, 242, 0.22);
  border-top-color: #5865F2;
  animation: dashBootSpin 0.85s linear infinite;
}
@keyframes dashBootSpin {
  to { transform: rotate(360deg); }
}

/* In-app typography */
.app-frame h1,
.app-frame h2,
.app-frame h3,
.section h1,
.section h2,
.section h3,
.settings-page h1,
.settings-page h2,
.settings-page h3 {
  font-weight: 500;
}

/* Chart chrome (dashboard) */
.dash-chart-host {
  position: relative;
}
.chart-wrap,
.ui-chart-shell {
  background: #2b2d31;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: none;
  border-radius: 8px;
  transition: background 0.15s ease-out, border-color 0.15s ease-out;
}
.chart-wrap:hover,
.ui-chart-shell:hover {
  background: #36393f;
}
.evt-gm-chart-card .chart-wrap:hover,
.evt-gm-chart-card:hover .chart-wrap,
.evt-gm-chart-card .evt-gm-timeline-shell:hover,
.evt-gm-chart-card:hover .evt-gm-timeline-shell,
.evt-detail-metrics-chart .chart-wrap:hover,
.evt-detail-metrics-chart:hover .chart-wrap,
.evt-detail-metrics-chart .evt-gm-timeline-shell:hover,
.evt-detail-metrics-chart:hover .evt-gm-timeline-shell {
  background: transparent !important;
  background-color: transparent !important;
  border-color: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}
.home-payout-chart-card .chart-wrap,
.home-payout-chart-card .home-earnings-timeline-shell,
.home-payout-chart-card .home-earnings-timeline-shell.chart-wrap,
.home-payout-chart-card .home-payout-chart-layout,
.home-payout-chart-card .dash-chart-host {
  transition: none !important;
}
.home-payout-chart-card .chart-wrap:hover,
.home-payout-chart-card .home-earnings-timeline-shell:hover,
.home-payout-chart-card .home-payout-chart-layout:hover,
.home-payout-chart-card .dash-chart-host:hover,
.home-payout-chart-card:hover .chart-wrap,
.home-payout-chart-card:hover .home-earnings-timeline-shell,
.home-payout-chart-card:hover .home-payout-chart-layout {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
.home-payout-chart-layout .home-earnings-timeline-shell {
  background: transparent;
  border: none;
  border-radius: 0;
}
.dash-chart-pinned {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  max-width: min(320px, 48%);
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(32, 34, 37, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 12px;
  line-height: 1.35;
  color: #dcddde;
  pointer-events: none;
  text-align: right;
}
.dash-chart-pinned-title {
  font-size: 11px;
  font-weight: 600;
  color: #8e9297;
  margin-bottom: 4px;
}

.channel:hover,
.personal-nav-btn:hover {
  background: rgba(255, 255, 255, 0.06);
}

* {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

*:hover {
  scrollbar-color: var(--scrollbar-thin) transparent;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 999px;
}

*:hover::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thin);
}

*:focus {
  outline: none;
}

*:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

button,
.btn,
.channel,
.personal-nav-btn,
.pill,
.command-palette-item,
.discord-copy-id,
input,
select,
textarea {
  transition: background-color var(--transition-standard), color var(--transition-standard), border-color var(--transition-standard), opacity var(--transition-standard), transform 100ms ease-out;
}

button:active,
.btn:active,
.channel:active,
.personal-nav-btn:active,
.pill:active,
.command-palette-item:active,
.discord-copy-id:active {
  transform: scale(0.98) translateY(1px);
}

input,
select,
textarea {
  min-height: 40px;
  padding: 8px 16px;
  border-radius: 4px;
  background: var(--input-bg);
  border: 1px solid var(--border-faint);
}

input:hover,
select:hover,
textarea:hover,
.channel:hover,
.personal-nav-btn:hover,
.pill:hover,
.server-tile:hover,
.btn-secondary:hover {
  background: var(--bg-accent);
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible,
.channel:focus-visible,
.personal-nav-btn:focus-visible,
.pill:focus-visible,
.discord-copy-id:focus-visible,
.command-palette-item:focus-visible {
  border-color: var(--focus-ring);
}

.btn {
  min-height: 40px;
  padding: 8px 16px;
  border-radius: 4px;
  font-weight: 500;
}

.btn-sm {
  min-height: 28px;
  padding: 4px 8px;
}

.btn-lg {
  min-height: 48px;
  padding: 16px 24px;
  border-radius: 8px;
}

.btn-blurple {
  background: var(--brand);
}

.btn-blurple:hover {
  background: var(--brand-hover);
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.08);
}

.login-card,
.servers-page,
.content-card,
.stat-card,
.profile-card,
.chart-wrap,
.leaderboard-wrap,
.modal-card,
.force-modal,
.settings-nav,
.settings-content,
.sidebar,
.server-tile {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
}

.sidebar {
  border-right: 1px solid var(--border-subtle);
}

.sidebar-header,
.content-header,
.settings-top {
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-subtle);
}

.channel,
.nav-cat-header,
.pill,
.server-tile,
.rw-tab,
.lb-tab,
.sub-nav-btn {
  border-radius: var(--radius-sm);
}

.personal-nav-btn {
  border-radius: var(--radius-sm);
}

.members-tab {
  border-radius: 0;
}

.channel {
  gap: 6px;
  min-height: var(--nav-row-h);
  padding: 4px var(--nav-pad-x);
  font-size: var(--nav-font);
}

.personal-nav-btn {
  gap: 0;
  min-height: 0;
  padding: 0 14px;
}

.channel.active {
  background: var(--bg-mod-subtle);
  color: var(--header-primary);
  box-shadow: none;
}

.personal-nav-btn.active {
  background: transparent;
  color: var(--header-primary);
  box-shadow: none;
}

.rw-tab.active,
.lb-tab.active,
.sub-nav-btn.active {
  background: var(--nav-segment-active);
  color: var(--header-primary);
}

.members-tab.active {
  background: transparent;
  color: var(--header-primary);
  border-bottom-color: var(--brand);
}

.login-left > p,
.servers-top p,
.login-hint,
.server-tile-role,
.panel-status,
.content-subtitle,
.modal-sub,
.ui-note,
.ui-note-sm,
.evt-toggle-hint,
.evt-toggle-desc {
  opacity: var(--secondary-opacity);
  font-weight: 400;
}

.modal-backdrop,
.force-modal-overlay,
.command-palette-overlay {
  background: var(--overlay-modal);
}

.modal-card,
.force-modal {
  border-radius: 8px;
  animation: discordScaleIn 200ms ease-out;
}

.force-modal-overlay,
.modal-backdrop {
  animation: fadeIn 150ms ease-in-out;
}

.save-bar {
  position: sticky;
  bottom: 16px;
  margin-top: 16px;
  padding: 16px;
  background: #1f2023;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.28);
  transition: transform 200ms var(--spring), opacity 200ms ease-out;
}

.save-bar.hidden {
  transform: translateY(150%);
  opacity: 0;
}

.save-bar-text {
  color: #fff;
}

.toggle-track,
.dc-toggle-slider {
  width: 40px;
  height: 24px;
  border-radius: 999px;
  border: none;
  background: rgba(128, 132, 142, 0.45);
  transition: background-color var(--transition-standard);
}

.toggle-knob,
.dc-toggle-slider::before {
  width: 18px;
  height: 18px;
  top: 3px;
  left: 3px;
  border-radius: 50%;
  background: #fff;
  transition: transform var(--transition-standard), background-color var(--transition-standard);
}

.toggle-switch input:checked + .toggle-track,
.dc-toggle input:checked + .dc-toggle-slider {
  background: var(--brand);
}

.toggle-switch input:checked + .toggle-track .toggle-knob,
.dc-toggle input:checked + .dc-toggle-slider::before {
  transform: translateX(16px);
}

.command-palette {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 16px;
}

.command-palette.hidden {
  display: none;
}

.command-palette-overlay {
  position: absolute;
  inset: 0;
}

.command-palette-card {
  position: relative;
  width: min(640px, 100%);
  max-height: min(70vh, 720px);
  overflow: hidden;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.36);
  transform-origin: top center;
  animation: commandPaletteIn 200ms var(--spring);
}

.command-palette-head {
  padding: 16px;
  border-bottom: 1px solid var(--border-subtle);
}

.command-palette-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.command-palette-title-row h2 {
  font-size: 16px;
  font-weight: 700;
}

.command-palette-kbd {
  padding: 4px 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
}

.command-palette-input {
  width: 100%;
}

.command-palette-list {
  max-height: min(52vh, 560px);
  overflow-y: auto;
  padding: 8px;
}

.command-palette-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border-radius: 4px;
  text-align: left;
  color: var(--text-normal);
}

.command-palette-item:hover,
.command-palette-item.active {
  background: rgba(39, 39, 87, 0.16);
  color: var(--header-primary);
}

.command-palette-item-icon,
.command-palette-item-arrow,
.discord-copy-icon,
.discord-copy-success {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.command-palette-item-copy {
  flex: 1;
  min-width: 0;
}

.command-palette-item-label {
  display: block;
  font-size: 14px;
  font-weight: 500;
}

.command-palette-item-group {
  display: block;
  margin-top: 4px;
  color: var(--text-muted);
  opacity: var(--secondary-opacity);
}

.command-palette-empty {
  padding: 24px 16px;
  text-align: center;
  color: var(--text-muted);
}

.discord-copy-id {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 24px;
  color: var(--text-normal);
  cursor: pointer;
  user-select: none;
}

.discord-copy-id:hover {
  color: var(--header-primary);
}

.discord-copy-success {
  display: none;
  width: auto;
  gap: 4px;
  color: var(--green);
  font-size: 12px;
  font-weight: 500;
}

.discord-copy-id.copied {
  color: var(--green);
}

.discord-copy-id.copied .discord-copy-icon {
  display: none;
}

.discord-copy-id.copied .discord-copy-success {
  display: inline-flex;
}

[data-tooltip] {
  position: relative;
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translate(-50%, 4px);
  opacity: 0;
  pointer-events: none;
  padding: 8px;
  border-radius: 4px;
  background: #111214;
  color: #fff;
  white-space: nowrap;
  transition: opacity 100ms ease-out 50ms, transform 100ms ease-out 50ms;
  z-index: 30;
}

[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

.loading-dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.loading-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: loadingDots 1.4s infinite ease-in-out both;
}

.loading-dots span:nth-child(1) { animation-delay: -0.32s; }
.loading-dots span:nth-child(2) { animation-delay: -0.16s; }
.loading-dots span:nth-child(3) { animation-delay: 0s; }

.skeleton {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.16) 50%, rgba(255, 255, 255, 0.06) 100%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.5s linear infinite;
  border-radius: 4px;
}

@keyframes discordScaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes commandPaletteIn {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-8px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes loadingDots {
  0%,
  80%,
  100% {
    opacity: 0.4;
    transform: scale(0.8);
  }

  40% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes skeletonShimmer {
  from {
    background-position: 200% 0;
  }

  to {
    background-position: -200% 0;
  }
}

@media (max-width: 720px) {
  .command-palette {
    padding: 16px 8px;
  }

  .command-palette-card {
    max-height: calc(100vh - 32px);
  }

  .save-bar {
    bottom: 8px;
  }
}

/* ===== Late Dark Surface Fixes ===== */
.save-bar {
  background: #1f2023;
}

.perm-type-cmd,
.evt-schedule-cell {
  font-family: var(--font);
}

.evt-mod-card,
.evt-detail-header,
.evt-detail-nav,
.evt-metric-card,
.evt-graph-card,
.evt-settings-section,
.evt-hist-item,
.evt-gm-stat {
  background: var(--bg-secondary);
  border-color: var(--border-subtle);
}


.app-shell .evt-detail-nav-btn.active,
.app-shell .evt-detail-nav-btn:hover {
  background: transparent;
}

.evt-metric-icon,
.evt-hist-summary,
.evt-hist-report {
  background: rgba(255, 255, 255, 0.06);
}

/* Ingame ID pill (members table) */
.ingame-id-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  background: rgba(39, 39, 87, 0.14);
  border: 1px solid rgba(39, 39, 87, 0.32);
  color: var(--text-primary);
  border-radius: 999px;
  font-family: var(--font-mono, "JetBrains Mono", "SFMono-Regular", monospace);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
  user-select: none;
}
.ingame-id-pill:hover {
  background: rgba(39, 39, 87, 0.22);
  border-color: rgba(39, 39, 87, 0.5);
}
.ingame-id-pill:active {
  transform: translateY(1px);
}

/* Members table row hover only when clickable area */
tr[data-member-row] {
  cursor: pointer;
}
tr[data-member-row] .member-ingame-cell {
  cursor: default;
}

/* ==========================================================================
   Discord-Native Design System Overrides
   - Focus rings, scrollbars, animations, loading states, modal physics
   - Performance: NO backdrop-filter except where explicitly noted (modals only)
   ========================================================================== */

/* Spring curve token (overshoot for dropdown / unsaved bar entry) */
:root {
  --spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 100ms;
  --duration-base: 150ms;
  --duration-modal: 200ms;
  --focus-ring: var(--brand);
}

/* Focus rings — replace ugly browser defaults with a 2px solid ring */
*:focus { outline: none; }
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
.btn:focus-visible,
.tab:focus-visible,
.nav-item:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.tag-picker:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 1px;
}

/* Custom thin auto-hiding scrollbars */
* {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}
*:hover {
  scrollbar-color: var(--scrollbar-thin) transparent;
}
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 4px;
  min-height: 40px;
}
*:hover::-webkit-scrollbar-thumb { background: var(--scrollbar-thin); }
*::-webkit-scrollbar-thumb:hover { background: #5d6068; }
*::-webkit-scrollbar-corner { background: transparent; }

/* Modal — clean Discord-style overlay with subtle blur (modals only).
   The blur is GPU-cheap and isolated to the overlay layer. */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.7);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  animation: modalOverlayIn var(--duration-modal) ease-out;
  will-change: opacity;
}
.modal-card {
  animation: modalScaleIn var(--duration-modal) ease-out;
  will-change: transform, opacity;
}
@keyframes modalOverlayIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes modalScaleIn {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

/* Loading dots — pure CSS, GPU-cheap */
.loading-dots {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}
.loading-dots > span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
  animation: loadingDots 1.4s infinite ease-in-out;
  will-change: transform, opacity;
}
.loading-dots > span:nth-child(1) { animation-delay: -0.32s; }
.loading-dots > span:nth-child(2) { animation-delay: -0.16s; }
.loading-dots > span:nth-child(3) { animation-delay: 0s; }
@keyframes loadingDots {
  0%, 80%, 100% { transform: scale(0.4); opacity: 0.4; }
  40%           { transform: scale(1.0); opacity: 1; }
}

/* Skeleton shimmer — light wave on shape-accurate blocks */
.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
}
.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    90deg,
    transparent 0%,
    hsla(220, 8%, 100%, 0.05) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  background-repeat: no-repeat;
  animation: skeletonShimmer 1.5s linear infinite;
  will-change: background-position;
}
@keyframes skeletonShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Snappy tooltips */
[data-tooltip] { position: relative; }
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: 4px 8px;
  background: var(--bg-floating);
  color: var(--text-normal);
  font-size: 12px;
  font-weight: 500;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--duration-fast) ease-out, transform var(--duration-fast) ease-out;
  transition-delay: 50ms;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.32);
}
[data-tooltip]:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Tag picker / dropdown spring entry — only when actually visible */
.tag-picker-dropdown.open {
  transform-origin: top center;
  animation: dropdownIn 180ms var(--spring);
  will-change: transform, opacity;
}
.tag-picker-dropdown.above.open {
  transform-origin: bottom center;
}
@keyframes dropdownIn {
  0%   { opacity: 0; transform: translateY(-4px) scale(0.98); }
  100% { opacity: 1; transform: translateY(0)    scale(1);    }
}

/* Unsaved-changes bar uses spring curve for entry */
#unsaved-bar,
.unsaved-bar,
.dirty-bar {
  transition: transform 280ms var(--spring), opacity var(--duration-base) ease-out;
}

/* Click-to-copy success state */
.copied,
.id-copied {
  color: var(--green) !important;
  transition: color var(--duration-base) ease-in-out;
}

/* Hardware toggle (40x24px track, 18x18 knob) */
.hw-toggle {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 24px;
  flex-shrink: 0;
}
.hw-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.hw-toggle .hw-track {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: #80848e;
  transition: background-color var(--duration-base) ease-in-out;
  cursor: pointer;
}
.hw-toggle .hw-knob {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  top: 3px;
  left: 3px;
  transition: transform var(--duration-base) ease-in-out;
  will-change: transform;
}
.hw-toggle input:checked + .hw-track { background: var(--green); }
.hw-toggle input:checked + .hw-track .hw-knob { transform: translateX(16px); }

/* Performance: hardware acceleration hints for animated elements */
.modal-overlay,
.modal-card,
.tag-picker-dropdown,
.toast,
.loading-dots > span {
  transform: translateZ(0);
}

/* Reduce-motion respect */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ─── Blacklist list (Discord-native cards) ────────────────────── */
.bl-list {
  display: flex;
  flex-direction: column;
}
.bl-row {
  display: grid;
  grid-template-columns: 40px 1fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--background-modifier-accent);
  transition: background-color 120ms ease;
}
.bl-row:last-child { border-bottom: none; }
.bl-row .bl-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #5865F2 0%, #4752C4 100%);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  user-select: none;
  flex-shrink: 0;
}
.bl-row.is-permanent .bl-avatar { background: linear-gradient(135deg, #ed4245 0%, #b32024 100%); }
.bl-row.is-active .bl-avatar { background: linear-gradient(135deg, #faa61a 0%, #c77b07 100%); }
.bl-row .bl-avatar .lb-avatar-img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.bl-row .bl-avatar .lb-avatar {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.bl-row .bl-main { min-width: 0; }
.bl-row .bl-name {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 14px;
  font-weight: 600;
  color: var(--header-primary);
  line-height: 1.3;
}
.bl-row .bl-name .member-link,
.bl-row .bl-name .member-link-static {
  font-weight: 600;
  color: var(--header-primary);
}
.bl-row .bl-name .bl-id {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
  background: var(--background-tertiary);
  padding: 1px 6px;
  border-radius: 4px;
  cursor: pointer;
  transition: color 120ms ease, background 120ms ease;
}
.bl-row .bl-name .bl-id:hover { color: var(--header-primary); background: var(--background-modifier-hover); }
.bl-row .bl-name .bl-id.copied { color: #57f287; }
.bl-row .bl-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 2px;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
}
.bl-row .bl-reason {
  font-size: 13px;
  color: var(--text-normal);
  margin-top: 2px;
  word-break: break-word;
}
.bl-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.bl-status.permanent { background: rgba(237, 66, 69, 0.16); color: #ed4245; }
.bl-status.active { background: rgba(250, 166, 26, 0.16); color: #faa61a; }
.bl-status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.bl-actions {
  display: inline-flex;
  gap: 6px;
  flex-shrink: 0;
}
.bl-empty {
  padding: 48px 16px;
  text-align: center;
  color: var(--text-muted);
}
.bl-pill {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}
.bl-pill:hover { color: var(--header-primary); }
.bl-pill.active { background: var(--background-secondary-alt, #232428); color: var(--header-primary); }

@media (max-width: 600px) {
  .bl-row {
    grid-template-columns: 40px 1fr;
    grid-template-rows: auto auto;
    align-items: start;
  }
  .bl-row .bl-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding-top: 6px;
  }
  .bl-row .bl-name { font-size: 13px; }
  .bl-row .bl-reason { font-size: 12px; }
}

/* ===== Nav (Discord compact) — horizontal scroll in modules ===== */
.app-shell .sub-nav,
.app-shell .lb-tabs,
.app-shell .evt-sub-nav,
.app-shell .evt-detail-nav,
.app-shell .perm-subnav,
.app-shell .members-tabs {
  overflow-x: auto;
  flex-wrap: nowrap;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.app-shell .sub-nav::-webkit-scrollbar,
.app-shell .lb-tabs::-webkit-scrollbar,
.app-shell .evt-sub-nav::-webkit-scrollbar,
.app-shell .evt-detail-nav::-webkit-scrollbar,
.app-shell .perm-subnav::-webkit-scrollbar,
.app-shell .members-tabs::-webkit-scrollbar {
  display: none;
}

.app-shell .sub-nav-btn,
.app-shell .lb-tab,
.app-shell .rw-tab,
.app-shell .members-tab,
.app-shell .perm-subnav .rw-tab,
.app-shell .evt-detail-nav-btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* ===== Nav (Discord polish) — channel list + segmented tabs + header tabs ===== */
.app-shell .sidebar {
  background: var(--bg-secondary);
  border-right: 1px solid rgba(0, 0, 0, 0.24);
}

.app-shell .sidebar-header {
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 1.5px 0 rgba(0, 0, 0, 0.06);
}

.app-shell .sidebar-scroll {
  padding: 6px 8px 8px;
}

.app-shell .nav-cat-header:hover {
  color: var(--header-secondary);
}

.app-shell .channel {
  margin-left: 0;
  margin-right: 0;
}

.app-shell .channel:hover {
  background: var(--bg-modifier-hover, var(--bg-mod-hover));
  color: var(--header-secondary);
}

.app-shell .channel.active {
  background: var(--bg-modifier-selected, var(--bg-mod-subtle));
  color: var(--header-primary);
  font-weight: 500;
}

.app-shell .channel.active .ch-icon {
  color: var(--header-primary);
  opacity: 1;
}

.app-shell .sub-nav,
.app-shell .lb-tabs,
.app-shell .evt-sub-nav,
.app-shell .perm-subnav {
  background: var(--nav-segment-bg);
  padding: 4px;
  gap: 2px;
  border-radius: var(--radius-md);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14);
}

.app-shell .sub-nav-btn,
.app-shell .lb-tab,
.app-shell .rw-tab,
.app-shell .perm-subnav .rw-tab {
  color: var(--text-muted);
  font-weight: 500;
  transition: background 0.12s ease, color 0.12s ease;
}

.app-shell .sub-nav-btn:hover,
.app-shell .lb-tab:hover,
.app-shell .rw-tab:hover,
.app-shell .perm-subnav .rw-tab:hover {
  color: var(--header-primary);
  background: rgba(79, 84, 92, 0.32);
}

.app-shell .sub-nav-btn.active,
.app-shell .lb-tab.active,
.app-shell .rw-tab.active,
.app-shell .perm-subnav .rw-tab.active {
  background: var(--nav-segment-active);
  color: var(--header-primary);
  font-weight: 500;
}

.app-shell .members-tabs {
  gap: 0;
  padding: 0;
  border-bottom: 1px solid var(--border-subtle);
  background: transparent;
  box-shadow: none;
}

.app-shell .members-tab {
  padding: var(--nav-pad-y) 16px;
  font-size: var(--nav-font-sm);
  font-weight: 500;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.app-shell .members-tab:hover {
  color: var(--header-primary);
}

.app-shell .members-tab.active {
  color: var(--header-primary);
  border-bottom-color: var(--brand);
  font-weight: 500;
}

.app-shell .evt-detail-nav {
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  padding: 0 6px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}

.app-shell .evt-detail-nav-btn {
  padding: var(--nav-pad-y) 14px;
  font-size: var(--nav-font-sm);
  font-weight: 500;
  border-bottom: 2px solid transparent;
  border-radius: 0;
}

.app-shell .evt-detail-nav-btn:hover {
  color: var(--header-primary);
  background: transparent;
}

.app-shell .evt-detail-nav-btn.active {
  color: var(--header-primary);
  border-bottom-color: var(--brand);
  background: transparent;
}

.app-shell .personal-nav-btn {
  font-size: var(--nav-font);
  color: var(--text-muted);
}

.app-shell .personal-nav-btn:hover {
  color: var(--header-primary);
  background: var(--bg-mod-faint);
}

.app-shell .personal-nav-btn.active {
  color: var(--header-primary);
}

@media (min-width: 1025px) {
  .app-shell .ch-icon {
    width: 20px;
    height: 20px;
  }

  .app-shell .nav-cat-label {
    font-size: 12px;
    letter-spacing: 0.04em;
  }

  .app-shell .channel {
    padding: 6px var(--nav-pad-x) 6px 12px;
  }

  .app-shell .personal-nav-btn {
    min-width: 104px;
    padding: 0 20px;
    font-size: var(--nav-font);
  }

  .app-shell .sub-nav-btn,
  .app-shell .lb-tab,
  .app-shell .rw-tab,
  .app-shell .perm-subnav .rw-tab {
    padding: var(--nav-pad-y) 14px;
    font-size: var(--nav-font-sm);
  }
}

/* ===== App shell responsive (320–768 mobile, 768–1024 tablet, 1025+ desktop) ===== */
@media (min-width: 1025px) {
  body.is-admin .app-shell .nav-drawer-shell {
    position: static;
    transform: none;
    width: auto;
    max-width: none;
    height: 100%;
    box-shadow: none;
    z-index: auto;
    pointer-events: auto;
  }

  body.is-admin .app-shell .nav-drawer-backdrop {
    display: none !important;
  }
}

@media (max-width: 1024px) {
  .app-shell {
    position: relative;
  }

  .app-shell .content {
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    position: relative;
    z-index: 1;
  }

  .app-shell .nav-drawer-shell {
    position: fixed;
    top: 0;
    left: 0;
    height: 100dvh;
    width: min(280px, 85vw);
    max-width: 85vw;
    z-index: 200;
    transform: translateX(-100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.6);
    overflow: hidden;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .app-shell .nav-drawer-shell.nav-drawer-open {
    transform: translateX(0);
  }

  .app-shell .nav-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 199;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.28s ease, visibility 0.28s ease;
  }

  .app-shell .nav-drawer-backdrop.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .app-shell .nav-drawer-shell:not(.nav-drawer-open) {
    pointer-events: none;
  }

  .app-shell .nav-drawer-shell.nav-drawer-open {
    pointer-events: auto;
  }

  body.guild-joined.is-admin #nav-drawer-toggle {
    display: inline-flex !important;
  }

  .app-shell .nav-drawer-shell .sidebar {
    display: flex !important;
    width: 100%;
    height: 100%;
    background: var(--bg-secondary);
  }

  .app-shell .nav-drawer-shell .sidebar-scroll {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  .app-shell .nav-drawer-shell .channel,
  .app-shell .nav-drawer-shell .nav-cat-header,
  .app-shell .nav-drawer-shell .panel-action {
    min-height: var(--nav-row-h-touch);
  }

  .app-shell .user-panel {
    min-height: 52px;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  body.is-admin.guild-joined .app-shell .content-header {
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
  }
}

@media (max-width: 767px) {
  .app-shell .content-header {
    padding: 10px max(12px, env(safe-area-inset-right, 0px)) 10px max(12px, env(safe-area-inset-left, 0px));
    min-height: 56px;
    gap: 8px;
  }

  .app-shell .content-heading {
    gap: 10px;
  }

  .app-shell .content-heading-icon {
    width: 36px;
    height: 36px;
  }

  .app-shell .content-header h2 {
    font-size: 16px;
    line-height: 1.2;
  }

  body:not(.is-admin) .app-shell .personal-nav-btn {
    min-height: 0;
    padding: 0 14px;
  }

  #toasts {
    left: max(12px, env(safe-area-inset-left, 0px));
    right: max(12px, env(safe-area-inset-right, 0px));
    bottom: max(12px, env(safe-area-inset-bottom, 0px));
    align-items: stretch;
  }

  #toasts .toast {
    width: 100%;
    max-width: none;
  }

  .modal-overlay,
  .modal-backdrop,
  .force-modal-overlay {
    padding: max(12px, env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) max(12px, env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
    align-items: flex-end;
  }

  .modal-card,
  .modal-wide,
  .force-modal {
    width: 100%;
    max-width: none;
    margin: 0;
    border-radius: 12px 12px 0 0;
    max-height: min(92dvh, calc(100vh - 24px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .modal-close {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

@media (max-width: 374px) {
  .app-shell .content-header h2 {
    font-size: 15px;
  }

  body:not(.is-admin) .app-shell .personal-nav-btn {
    padding: 0 10px;
    font-size: 12px;
  }
}

/* ===== Event Auszahlung List ===== */
.evt-az-entry {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  padding: 10px 14px;
  background: var(--bg-tertiary, rgba(0,0,0,.25));
  border-radius: 8px;
  border: 1px solid var(--border-subtle, rgba(255,255,255,.07));
}
.evt-az-entry select,
.evt-az-entry input[type="number"] {
  background: var(--input-bg, var(--bg-secondary));
  color: var(--text-normal);
  border: 1px solid var(--border, rgba(255,255,255,.12));
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 13px;
  height: 34px;
  outline: none;
  transition: border-color .15s;
}
.evt-az-entry select:focus,
.evt-az-entry input[type="number"]:focus {
  border-color: var(--brand, #5865F2);
}
.evt-az-type { flex: 2; min-width: 0; }
.evt-az-result { flex: 1.5; min-width: 0; }
.evt-az-amount { flex: 1; min-width: 72px; }
.evt-az-remove {
  flex-shrink: 0;
  padding: 5px 10px;
  line-height: 1;
  opacity: .7;
}
.evt-az-remove:hover { opacity: 1; }
#evt-d-add-auszahlung {
  margin-top: 4px;
  width: 100%;
  justify-content: center;
  border-style: dashed;
  opacity: .8;
}
#evt-d-add-auszahlung:hover { opacity: 1; }

/* Famwar Runden — Auszahlungs-Editor */
.evt-fw-az-block > label {
  margin-bottom: 8px;
}
.evt-fw-az-panel {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle, rgba(255,255,255,.08));
  border-radius: var(--radius-md, 8px);
  padding: 10px 12px 4px;
}
.evt-fw-az-empty {
  padding: 12px 8px 16px;
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.45;
}
.evt-fw-az-head {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(72px, 0.75fr) 36px;
  gap: 8px;
  padding: 0 4px 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.evt-fw-az-entry {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(72px, 0.75fr) 36px;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
  padding: 8px;
  background: var(--bg-tertiary, rgba(0,0,0,.2));
  border-radius: var(--radius-md, 8px);
  border: 1px solid var(--border-faint, rgba(255,255,255,.06));
}
.evt-fw-az-field {
  min-width: 0;
}
.evt-fw-az-field .cd-wrap {
  width: 100%;
}
.evt-fw-az-field .cd-trigger {
  min-height: 34px;
}
.evt-fw-az-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.evt-fw-az-amount-wrap {
  display: flex;
  align-items: center;
  gap: 0;
  min-height: 34px;
  background: var(--input-bg);
  border: 1px solid var(--border-faint);
  border-radius: var(--radius-md, 6px);
  overflow: hidden;
  transition: border-color .15s;
}
.evt-fw-az-amount-wrap:focus-within {
  border-color: var(--brand);
}
.evt-fw-az-currency {
  flex-shrink: 0;
  padding: 0 0 0 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: default;
}
.evt-fw-az-entry .evt-az-amount {
  flex: 1;
  min-width: 0;
  width: 100%;
  height: 32px;
  border: none;
  background: transparent;
  padding: 6px 10px 6px 4px;
  box-shadow: none;
}
.evt-fw-az-entry .evt-az-amount:focus {
  border: none;
  outline: none;
}
.evt-fw-az-entry .evt-az-remove {
  justify-self: center;
  width: 34px;
  height: 34px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md, 6px);
  opacity: 0.65;
}
.evt-fw-az-entry .evt-az-remove:hover {
  opacity: 1;
  background: rgba(237, 66, 69, 0.12);
  color: #ed4245;
}
.evt-fw-subpanel {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.evt-fw-panel-empty {
  padding: 24px 12px;
}
.evt-fw-summary-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.evt-fw-summary-item {
  background: var(--bg-secondary);
  border: 1px solid var(--border-faint);
  border-radius: 8px;
  padding: 10px 14px;
  min-width: 120px;
}
.evt-fw-summary-val {
  display: block;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-normal);
}
.evt-fw-summary-lbl {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 2px;
}
.evt-fw-table td {
  vertical-align: middle;
}
.fw-redux-panel {
  gap: 8px;
}
.fw-redux-toolbar {
  margin-bottom: 0;
}
.fw-redux-list-wrap {
  background: #2b2d31;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  overflow: hidden;
}
.fw-redux-list {
  display: flex;
  flex-direction: column;
}
.fw-redux-row {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-faint);
  transition: background 150ms ease-in-out;
}
.fw-redux-row:last-child {
  border-bottom: 0;
}
.fw-redux-row:hover {
  background: rgba(255, 255, 255, 0.03);
}
.fw-redux-avatar {
  flex-shrink: 0;
}
.fw-redux-avatar .members-dc-avatar,
.fw-redux-avatar .lb-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}
.fw-redux-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.fw-redux-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--header-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fw-redux-subline {
  font-size: 12px;
  line-height: 1.35;
  color: var(--text-muted);
}
.fw-redux-sub.is-ok {
  color: #57f287;
}
.fw-redux-end {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.fw-redux-toggle {
  margin: 0;
}
.evt-fw-results-family {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.evt-fw-az-add {
  margin-top: 10px;
  width: 100%;
  justify-content: center;
  border-style: dashed;
}
@media (max-width: 640px) {
  .evt-fw-az-head {
    display: none;
  }
  .evt-fw-az-entry {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
  }
  .evt-fw-az-field--amount {
    grid-column: 1 / -1;
  }
  .evt-fw-az-entry .evt-az-remove {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }
}

/* ===== Member Detail Tab System (Change 4) ===== */
.members-detail-screen.is-special-member .member-family-only {
  display: none !important;
}
.members-detail-screen .member-stats-grid {
  margin-bottom: 0;
}

/* ===== Log Detail Rework (Change 7) ===== */
.log-detail-info-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.log-info-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--bg-tertiary);
}
.log-info-row:last-child {
  border-bottom: none;
}
.log-info-row-wide {
  flex-direction: column;
  gap: 6px;
}
.log-info-label {
  flex-shrink: 0;
  width: 130px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding-top: 1px;
}
.log-info-value {
  flex: 1;
  font-size: 13px;
  color: var(--header-primary);
  word-break: break-word;
  white-space: pre-wrap;
}

/* ===== Public Fahrzeugliste (no sidebar / login) ===== */
body.public-fahrzeug-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow: hidden;
  background: var(--bg-primary);
  color: var(--text-normal);
}
.public-fahrzeug-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-shrink: 0;
  padding: 16px 24px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-secondary);
}
.public-fahrzeug-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.public-fahrzeug-brand h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: var(--header-primary);
}
.public-fahrzeug-actions {
  display: flex;
  flex-shrink: 0;
  align-items: center;
}
.public-fahrzeug-actions .fahrzeuge-login-btn {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: auto !important;
  max-width: none;
  min-height: 40px;
  padding: 10px 16px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 500;
  border-radius: var(--radius-sm);
  text-decoration: none;
  white-space: nowrap;
  background: #5865f2;
  color: #fff;
}
.public-fahrzeug-actions .fahrzeuge-login-btn:hover {
  background: var(--brand-hover);
  color: #fff;
}
.public-fahrzeug-actions .fahrzeuge-login-btn svg {
  flex-shrink: 0;
  display: block;
  width: 24px;
  height: 19px;
}
.public-fahrzeug-actions .fahrzeuge-dashboard-btn {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 10px 16px;
  font-size: 14px;
  white-space: nowrap;
  text-decoration: none;
}
.public-fahrzeug-main {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 16px;
  box-sizing: border-box;
}
.public-fahrzeug-card {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  margin: 0;
}
.public-fahrzeug-card .ins-cars-toolbar,
#section-fahrzeugliste.active .ins-cars-toolbar {
  flex-shrink: 0;
}
.public-fahrzeug-table-shell {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.public-fahrzeug-table-shell .ins-cars-table-wrap,
.public-fahrzeug-table-shell .insurance-scroll-shell .table-container {
  flex: 1;
  min-height: 0;
  max-height: none;
  overflow: auto;
}

/* ----- Public landing + docs (Discord-like, scoped) ----- */
.landing-shell {
  --landing-bg: #36393f;
  --landing-bg2: #2f3136;
  --landing-elev: #2f3136;
  --landing-border: rgba(255, 255, 255, 0.06);
  --landing-text: #f2f3f5;
  --landing-muted: #b5bac1;
}

#view-login.landing-view.discord-com-landing-root,
body > .landing-view.discord-com-landing-root {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 100vh;
  background: #23272a;
  color: #fff;
}

body:has(> .landing-view.discord-com-landing-root) {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  height: auto;
  background: #23272a;
  color: #f2f3f5;
}

html:has(body > .landing-view.discord-com-landing-root) {
  overflow: auto;
  height: auto;
}

body > .landing-view.discord-com-landing-root {
  flex: 1;
  width: 100%;
}

body > .landing-view.discord-com-landing-root,
#view-login.landing-view.discord-com-landing-root,
body > .landing-view.discord-com-landing-root .discord-com-landing,
#view-login.landing-view.discord-com-landing-root .discord-com-landing {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.landing-page-root {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 100vh;
  width: 100%;
  color: var(--landing-text);
  box-sizing: border-box;
}

.landing-topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(30, 31, 34, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--landing-border);
}

.landing-topbar-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.landing-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
}

.landing-brand-logo {
  border-radius: 12px;
  flex-shrink: 0;
}

.landing-topnav {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
}

.landing-topnav-link {
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--landing-muted);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.landing-topnav-link:hover {
  color: var(--landing-text);
  background: rgba(255, 255, 255, 0.06);
}

.landing-topnav-link-active {
  color: var(--landing-text);
  background: rgba(88, 101, 242, 0.18);
}

.landing-topbar-actions {
  flex-shrink: 0;
}

.landing-discord-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 6px;
  text-decoration: none;
  white-space: nowrap;
}

.landing-main {
  flex: 1;
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  padding: 40px 20px 48px;
}

.landing-hero {
  text-align: center;
  padding: 12px 0 40px;
}

.landing-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #5865f2;
  margin: 0 0 12px;
}

.landing-hero-title {
  font-size: clamp(1.75rem, 4vw, 2.35rem);
  font-weight: 800;
  line-height: 1.2;
  margin: 0 0 16px;
  letter-spacing: -0.03em;
}

.landing-hero-sub {
  max-width: 640px;
  margin: 0 auto 28px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--landing-muted);
}

.landing-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  align-items: center;
}

.landing-cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 6px;
  text-decoration: none;
}

.landing-cta-secondary {
  padding: 12px 20px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 6px;
  text-decoration: none;
  border: 1px solid var(--landing-border);
  background: var(--landing-elev);
  color: var(--landing-text);
}

.landing-cta-secondary:hover {
  background: #35373c;
}

.landing-hero-hint {
  margin: 20px 0 0;
  font-size: 13px;
  color: var(--landing-muted);
}

.landing-hero-hint a {
  color: #5865f2;
  text-decoration: none;
}

.landing-hero-hint a:hover {
  text-decoration: underline;
}

.landing-section-title {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--landing-muted);
  margin: 0 0 16px;
}

.landing-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

.landing-card {
  background: var(--landing-elev);
  border: 1px solid var(--landing-border);
  border-radius: 10px;
  padding: 20px;
  text-align: left;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.landing-card:hover {
  border-color: rgba(39, 39, 87, 0.35);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
}

.landing-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(39, 39, 87, 0.15);
  color: #949cf7;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.landing-card-title {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 8px;
}

.landing-card-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--landing-muted);
}

.landing-card-text a {
  color: #949cf7;
  text-decoration: none;
}

.landing-card-text a:hover {
  text-decoration: underline;
}

.landing-footer {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--landing-border);
  text-align: center;
}

.landing-footer-note {
  margin: 0;
  font-size: 12px;
  color: #6d6f78;
  line-height: 1.5;
}

/* Docs page: /docs/fahrzeuge */
body.landing-docs-page {
  margin: 0;
  min-height: 100vh;
  background: linear-gradient(180deg, #1e1f22 0%, #111214 100%);
  color: #f2f3f5;
}

.landing-docs-main {
  max-width: 1000px;
  margin: 0 auto;
  padding: 28px 20px 48px;
}

.landing-docs-breadcrumb {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}

.landing-docs-title {
  font-size: 1.75rem;
  font-weight: 800;
  margin: 0 0 8px;
  letter-spacing: -0.02em;
}

.landing-docs-lead {
  margin: 0 0 24px;
  font-size: 15px;
  line-height: 1.5;
  color: #b5bac1;
  max-width: 720px;
}

.landing-docs-card {
  background: #2b2d31;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.landing-docs-table-shell {
  max-height: min(70vh, 640px);
}

@media (max-width: 720px) {
  .landing-topbar-inner {
    flex-wrap: wrap;
  }
  .landing-topnav {
    order: 3;
    width: 100%;
    flex: none;
    padding-top: 4px;
  }
}

/* ----- EventMate-style landing (Discord theme) ----- */
#landing-hero,
#landing-features {
  scroll-margin-top: 72px;
}

.landing-hero--splash {
  padding-top: 28px;
  padding-bottom: 8px;
}

.landing-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  max-width: 900px;
  margin: 0 auto 48px;
  padding: 0 8px;
}

.landing-stat {
  background: rgba(43, 45, 49, 0.85);
  border: 1px solid var(--landing-border);
  border-radius: 10px;
  padding: 16px 14px;
  text-align: center;
}

.landing-stat-value {
  display: block;
  font-size: 15px;
  font-weight: 800;
  color: #f2f3f5;
  letter-spacing: -0.02em;
}

.landing-stat-label {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--landing-muted);
  line-height: 1.35;
}

.landing-section-intro {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 28px;
}

.landing-section-headline {
  font-size: clamp(1.35rem, 3vw, 1.75rem);
  font-weight: 800;
  margin: 0 0 12px;
  letter-spacing: -0.02em;
  color: #f2f3f5;
}

.landing-section-sub {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--landing-muted);
}

.landing-features--wide {
  padding-bottom: 8px;
}

.landing-card-grid--six {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.landing-mid-stats {
  margin: 40px 0;
  padding: 32px 20px;
  background: #2f3136;
  border: 1px solid var(--landing-border);
  border-radius: 12px;
}

.landing-mid-stats-inner {
  max-width: 960px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.landing-mid-stat {
  text-align: center;
}

.landing-mid-stat-num {
  display: block;
  font-size: 1.25rem;
  font-weight: 800;
  color: #949cf7;
  margin-bottom: 6px;
}

.landing-mid-stat-text {
  font-size: 13px;
  color: var(--landing-muted);
  line-height: 1.4;
}

.landing-mid-stat-text a {
  color: #b5bac1;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.landing-mid-stat-text a:hover {
  color: #f2f3f5;
}

.landing-cta-panel {
  margin: 48px 0 40px;
}

.landing-cta-panel-inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  padding: 40px 28px;
  background: var(--landing-elev);
  border: 1px solid var(--landing-border);
  border-radius: 12px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.35);
}

.landing-cta-panel-title {
  font-size: 1.5rem;
  font-weight: 800;
  margin: 0 0 12px;
  letter-spacing: -0.02em;
}

.landing-cta-panel-text {
  margin: 0 0 24px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--landing-muted);
}

.landing-cta-panel-text a {
  color: #949cf7;
  text-decoration: none;
}

.landing-cta-panel-text a:hover {
  text-decoration: underline;
}

.landing-cta-trust {
  margin: 20px 0 0;
  font-size: 12px;
  color: #6d6f78;
}

.landing-footer--grid {
  display: grid;
  grid-template-columns: 1.2fr repeat(3, 1fr);
  gap: 28px 24px;
  text-align: left;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 32px;
}

.landing-footer-brand {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.landing-footer-brand-name {
  font-weight: 800;
  font-size: 1.1rem;
  margin-bottom: 6px;
}

.landing-footer-tagline {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--landing-muted);
}

.landing-footer-col-title {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #6d6f78;
  margin: 0 0 12px;
}

.landing-footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.landing-footer-links li {
  margin-bottom: 8px;
}

.landing-footer-links a {
  color: #b5bac1;
  text-decoration: none;
  font-size: 14px;
}

.landing-footer-links a:hover {
  color: #f2f3f5;
  text-decoration: underline;
}

.landing-footer-note--left {
  text-align: left;
  max-width: 220px;
}

.landing-topnav-crumb {
  cursor: default;
  pointer-events: none;
}

/* Docs hub /docs */
.docs-hub-page .docs-hub-main {
  max-width: 920px;
  margin: 0 auto;
  padding: 28px 20px 32px;
}

.docs-hub-section {
  margin-top: 36px;
}

.docs-hub-section:first-of-type {
  margin-top: 8px;
}

.docs-hub-section-title {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #949cf7;
  margin: 0 0 14px;
}

.docs-hub-section-lead {
  margin: -6px 0 16px;
  max-width: 720px;
  font-size: 15px;
  line-height: 1.55;
  color: #b5bac1;
}

.docs-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}

a.docs-hub-card {
  text-decoration: none;
  color: inherit;
}

.docs-hub-card {
  position: relative;
  display: block;
  background: #2b2d31;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 20px 44px 20px 20px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
}

a.docs-hub-card:hover {
  border-color: rgba(39, 39, 87, 0.45);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
  transform: translateY(-1px);
}

.docs-hub-card-muted {
  opacity: 0.72;
  cursor: not-allowed;
}

.docs-hub-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(39, 39, 87, 0.15);
  color: #949cf7;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.docs-hub-card-title {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 8px;
}

.docs-hub-card-desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: #b5bac1;
}

.docs-hub-card-arrow {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  color: #6d6f78;
}

a.docs-hub-card:hover .docs-hub-card-arrow {
  color: #949cf7;
}

.docs-hub-card-badge {
  display: inline-block;
  margin-top: 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  color: #b5bac1;
}

.docs-hub-footer {
  max-width: 920px;
  margin: 0 auto;
  padding: 0 20px 40px;
}

@media (max-width: 900px) {
  .landing-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .landing-mid-stats-inner {
    grid-template-columns: repeat(2, 1fr);
  }
  .landing-footer--grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 520px) {
  .landing-stats {
    grid-template-columns: 1fr;
  }
  .landing-mid-stats-inner {
    grid-template-columns: 1fr;
  }
  .landing-footer--grid {
    grid-template-columns: 1fr;
  }
}

/* ========== discord.com–style public landing (reference: https://discord.com/) ========== */
.discord-com-landing {
  --dc-blurple: #5865f2;
  --dc-black: #23272a;
  --dc-blurple-hover: #4752c4;
  font-family: "Inter", var(--font, system-ui), -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  flex: 1;
  min-height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background: var(--dc-black);
  color: #fff;
}

.dc-skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.dc-skip-link:focus {
  position: fixed;
  left: 16px;
  top: 16px;
  z-index: 1000;
  width: auto;
  height: auto;
  padding: 12px 16px;
  background: #5865f2;
  color: #fff;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
}

/* Full-screen dim/blur behind Tools menu — sits above page content, below nav/hero */
.dc-nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.08s ease, visibility 0.08s ease;
  backdrop-filter: blur(16px) brightness(0.5);
  -webkit-backdrop-filter: blur(16px) brightness(0.5);
  background: rgba(0, 0, 0, 0.45);
}

.discord-com-landing.tools-menu-open .dc-nav-overlay {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.discord-com-landing.dc-nav-open .dc-nav-overlay {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Keep header + Tools panel sharp above the overlay (works when header is sticky/scrolled) */
.discord-com-landing.tools-menu-open .dc-header--integrated,
.discord-com-landing.tools-menu-open .dc-header {
  z-index: 600;
}

.discord-com-landing.dc-nav-open .dc-header--integrated,
.discord-com-landing.dc-nav-open .dc-header {
  z-index: 600;
}

.discord-com-landing.tools-menu-open .dc-nav-dropdown.is-open {
  z-index: 601;
}

.discord-com-landing.tools-menu-open .dc-nav-mega-hit {
  z-index: 610;
}

/* Fixed corners: larger brand + anmelden, inset from viewport edges, no pill on wordmark */
.dc-corner-dock {
  position: fixed;
  z-index: 240;
  left: 0;
  right: 0;
  top: 0;
  padding: max(18px, env(safe-area-inset-top)) max(22px, env(safe-area-inset-right)) 0 max(22px, env(safe-area-inset-left));
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}

.dc-corner-dock > * {
  pointer-events: auto;
}

.dc-corner-brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: #fff;
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
  margin: 0;
}

.dc-corner-brand:hover .dc-corner-wordmark {
  color: #fff;
}

.dc-corner-logo {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: block;
}

.dc-corner-wordmark {
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: #f5f3ff;
}

.dc-corner-auth-link {
  font-size: 1.125rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--dc-electric-bright);
  padding: 10px 6px;
  border-radius: 10px;
  transition: color 0.15s ease, background 0.15s ease;
}

.dc-corner-auth-link:hover {
  color: #fff;
  background: rgba(39, 39, 87, 0.45);
  text-decoration: underline;
}

.dc-header-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: #fff;
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
  margin: 0;
  justify-self: start;
}

#view-login .dc-header-brand {
  gap: 8px;
}

.dc-header-brand:hover .dc-header-brand-text {
  color: var(--dc-electric-bright);
}

.dc-header-brand-mark {
  border-radius: 12px;
  display: block;
}

.discord-com-landing .dc-header-brand-mark.dc-header-brand-mark--landing {
  border-radius: 0;
}

.dc-header-brand-mark--landing,
.discord-com-landing .dc-header--integrated .dc-header-brand-mark.dc-header-brand-mark--landing {
  width: 4.05rem;
  height: 4.05rem;
  flex-shrink: 0;
  border-radius: 0;
  object-fit: contain;
  background: transparent;
}

.dc-header-brand-text {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: #f5f3ff;
}

.dc-btn-discord {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-sizing: border-box;
  font-family: var(--font);
  font-weight: 600;
  text-decoration: none;
  color: #fff;
  background: #23272a;
  border: 1px solid rgba(0, 0, 0, 0.35);
  border-radius: 999px;
  transition: filter 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
}

.dc-btn-discord:hover {
  filter: brightness(1.08);
}

.dc-btn-discord:active {
  transform: translateY(1px);
}

.dc-btn-discord--header {
  padding: 10px 18px;
  font-size: 15px;
  white-space: nowrap;
}

.dc-btn-discord-ico {
  flex-shrink: 0;
}

.dc-header {
  position: sticky;
  top: 0;
  z-index: 220;
  background: rgba(39, 39, 87, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}

.dc-header--integrated {
  position: sticky;
  top: 0;
  z-index: 220;
  margin: 0 0 8px;
  background: transparent;
  backdrop-filter: none;
  border-bottom: none;
  box-shadow: none;
}

.dc-header-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 14px 24px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px 16px;
}

.dc-header-logo.dc-logo {
  flex-shrink: 0;
}

.dc-header-auth {
  flex-shrink: 0;
  justify-self: end;
}

/* Marketing shell — mobile nav (landing + tool subpages) */
.dc-header-menu-btn,
.dc-nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.2);
  color: #fff;
  cursor: pointer;
  justify-self: center;
  flex-shrink: 0;
  transition: background 0.15s ease;
}

.dc-header-menu-btn:hover,
.dc-header-menu-btn:focus-visible,
.dc-nav-toggle:hover,
.dc-nav-toggle:focus-visible {
  background: rgba(0, 0, 0, 0.32);
  outline: none;
}

.dc-header-menu-icon--close,
.discord-com-landing.dc-nav-open .dc-header-menu-icon--open,
.discord-com-landing.dc-nav-open .dc-nav-toggle-bar:nth-child(1) {
  display: none;
}

.discord-com-landing.dc-nav-open .dc-header-menu-icon--close {
  display: block;
}

.dc-nav-toggle {
  flex-direction: column;
  gap: 5px;
}

.dc-nav-toggle-bar {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
}

.discord-com-landing.dc-nav-open .dc-nav-toggle-bar:nth-child(2) {
  display: none;
}

.discord-com-landing.dc-nav-open .dc-nav-toggle-bar:nth-child(3) {
  display: block;
  transform: rotate(-45deg) translateY(-1px);
}

.discord-com-landing.dc-nav-open .dc-nav-toggle-bar:nth-child(1) {
  display: block;
  transform: rotate(45deg) translateY(1px);
}

@media (max-width: 1023px) {
  .dc-header-inner {
    grid-template-columns: auto auto 1fr auto;
    gap: 10px 12px;
  }

  .dc-header-menu-btn,
  .dc-nav-toggle {
    display: inline-flex;
  }

  .discord-com-landing .dc-nav.dc-nav--integrated {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 500;
    width: min(100vw, 320px);
    max-width: 100%;
    margin: 0;
    padding: max(72px, calc(env(safe-area-inset-top, 0px) + 56px)) 16px
      max(24px, env(safe-area-inset-bottom, 0px));
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 4px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #23272a;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: -12px 0 40px rgba(0, 0, 0, 0.45);
    transform: translateX(105%);
    visibility: hidden;
    transition: transform 0.22s ease, visibility 0.22s ease;
  }

  .discord-com-landing.dc-nav-open .dc-nav.dc-nav--integrated {
    transform: translateX(0);
    visibility: visible;
  }

  .discord-com-landing .dc-nav.dc-nav--integrated .dc-nav-link {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 44px;
    padding: 10px 14px;
    box-sizing: border-box;
    border-radius: 8px;
    font-size: 16px;
  }

  .discord-com-landing .dc-nav.dc-nav--integrated .dc-nav-link--trigger {
    width: 100%;
    justify-content: space-between;
  }

  .discord-com-landing .dc-nav-dropdown {
    width: 100%;
  }

  .discord-com-landing .dc-nav-dropdown.is-open::after {
    display: none;
  }

  .discord-com-landing .dc-nav-mega-hit {
    position: static;
    left: auto;
    top: auto;
    transform: none;
    width: 100%;
    padding: 0;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease;
  }

  .discord-com-landing .dc-nav-dropdown.is-open .dc-nav-mega-hit,
  .discord-com-landing .dc-nav-dropdown:focus-within .dc-nav-mega-hit {
    max-height: 420px;
    margin-top: 4px;
  }

  .discord-com-landing .dc-nav-mega {
    min-width: 0;
    max-width: none;
    width: 100%;
    border-radius: 8px;
    background: #4752c4;
  }

  .discord-com-landing .dc-nav-mega-inner--list {
    padding: 4px 0;
  }

  .discord-com-landing .dc-nav-mega-link {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 10px 14px;
    font-size: 15px;
  }

  .discord-com-landing.dc-nav-open .dc-nav-overlay {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .discord-com-landing.dc-nav-open .dc-header--integrated,
  .discord-com-landing.dc-nav-open .dc-header {
    z-index: 600;
  }

  .discord-com-landing.dc-nav-open .dc-header-menu-btn,
  .discord-com-landing.dc-nav-open .dc-nav-toggle {
    z-index: 601;
  }
}

@media (min-width: 1024px) {
  .dc-header-menu-btn,
  .dc-nav-toggle {
    display: none !important;
  }
}

.dc-header-auth-link {
  font-size: 15px;
  font-weight: 500;
  font-family: var(--font);
  text-decoration: none;
  color: #c9b8ff;
  padding: 8px 4px;
  border-radius: 8px;
  transition: color 0.15s ease, background 0.15s ease;
}

.dc-header-auth-link:hover {
  color: #ebe4ff;
  background: rgba(255, 255, 255, 0.06);
  text-decoration: underline;
}

.dc-nav {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-self: center;
  min-width: 0;
}

.dc-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #f2f3f5;
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: -0.03em;
}

.dc-logo--float {
  padding: 6px 14px 6px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.dc-logo--float:hover {
  transform: translateY(1px);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5);
}

.dc-logo-mark {
  border-radius: 14px;
}

.dc-nav--integrated .dc-nav-link {
  color: rgba(255, 255, 255, 0.88);
  font-weight: 500;
}

.dc-nav-link {
  padding: 8px 14px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 500;
  color: #b5bac1;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.dc-nav-link:hover,
.dc-nav-link:focus-visible {
  background: #5865f2;
  color: #fff;
  outline: none;
}

.dc-nav-link[aria-current="page"] {
  background: rgba(88, 101, 242, 0.45);
  color: #fff;
}

.dc-nav-link[aria-current="page"]:hover,
.dc-nav-link[aria-current="page"]:focus-visible {
  background: #5865f2;
  color: #fff;
}

/* On blurple hero (landing + tool subpages): Discord-style nav pills */
.discord-com-landing .dc-hero .dc-nav-link {
  color: rgba(255, 255, 255, 0.92);
}

.discord-com-landing .dc-hero .dc-header-brand-text {
  color: #fff;
}

.discord-com-landing .dc-hero .dc-nav-link:hover,
.discord-com-landing .dc-hero .dc-nav-link:focus-visible {
  background: #4752c4;
  color: #fff;
}

.discord-com-landing .dc-hero .dc-nav-link[aria-current="page"] {
  background: transparent;
  color: rgba(255, 255, 255, 0.92);
}

.discord-com-landing .dc-hero .dc-nav-link[aria-current="page"]:hover,
.discord-com-landing .dc-hero .dc-nav-link[aria-current="page"]:focus-visible {
  background: #4752c4;
  color: #fff;
}

.dc-nav-link--trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  cursor: pointer;
  border: none;
  background: transparent;
  color: inherit;
}

.dc-nav-link--trigger:hover,
.dc-nav-link--trigger:focus-visible {
  background: #5865f2;
  color: #fff;
}

.discord-com-landing .dc-hero .dc-nav-link--trigger:hover,
.discord-com-landing .dc-hero .dc-nav-link--trigger:focus-visible {
  background: #4752c4;
  color: #fff;
}

.dc-nav-chevron {
  flex-shrink: 0;
  opacity: 0.85;
  transition: transform 0.2s ease;
}

.dc-nav-dropdown.is-open .dc-nav-chevron,
.dc-nav-dropdown:focus-within .dc-nav-chevron {
  transform: rotate(180deg);
}

.dc-nav-dropdown {
  position: relative;
}

/* Invisible hit area spanning trigger → floating panel (prevents close in the gap) */
.dc-nav-dropdown.is-open::after {
  content: "";
  position: absolute;
  left: -32px;
  right: -32px;
  top: 100%;
  height: 28px;
  z-index: 609;
}

/* Open menu: highlight Tools only while the trigger itself is hovered */
.dc-nav-dropdown.is-open .dc-nav-link--trigger {
  background: transparent;
  color: inherit;
  border-radius: 12px;
}

.dc-nav-dropdown.is-open .dc-nav-link--trigger:hover,
.dc-nav-dropdown.is-open .dc-nav-link--trigger:focus-visible {
  background: #5865f2;
  color: #fff;
}

.discord-com-landing .dc-hero .dc-nav-dropdown.is-open .dc-nav-link--trigger:hover,
.discord-com-landing .dc-hero .dc-nav-dropdown.is-open .dc-nav-link--trigger:focus-visible {
  background: #4752c4;
  color: #fff;
}

/* Transparent positioning shell: padding is hit slop only (no blurple) */
.dc-nav-mega-hit {
  position: absolute;
  left: 50%;
  top: calc(100% + 4px);
  transform: translateX(-50%);
  padding: 18px 30px 30px 30px;
  margin: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.08s ease, visibility 0.08s ease;
  z-index: 610;
}

.dc-nav-dropdown.is-open .dc-nav-mega-hit,
.dc-nav-dropdown:focus-within .dc-nav-mega-hit {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.dc-nav-mega {
  position: relative;
  left: auto;
  top: auto;
  transform: none;
  min-width: 520px;
  max-width: min(640px, calc(100vw - 32px));
  padding: 0;
  border-radius: 16px;
  background: #5865f2;
  color: #fff;
  border: none;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}

.dc-nav-mega--list {
  min-width: min(240px, calc(100vw - 32px));
  max-width: min(280px, calc(100vw - 32px));
  overflow: hidden;
  border-radius: 16px;
}


.dc-nav-mega-inner {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px 28px;
}

.dc-nav-mega-inner--list {
  display: flex;
  flex-direction: column;
  gap: 0;
  grid-template-columns: unset;
  padding: 0 0 4px;
}

.dc-nav-mega-kicker {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.72);
  margin: 0;
  padding: 14px 16px 10px;
}

.dc-nav-mega-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 16px;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  border-bottom: none;
  border-radius: 0;
  transition: background 0.12s ease, color 0.12s ease;
}

.dc-nav-mega-link:last-of-type {
  border-bottom: none;
  border-radius: 0 0 16px 16px;
}

.dc-nav-mega-link:hover,
.dc-nav-mega-link:focus-visible {
  background: #4752c4;
  color: #fff;
  outline: none;
}

.dc-nav-mega-link[aria-current="page"] {
  background: transparent;
}

.dc-nav-mega-link--ext .dc-ext-ico {
  flex-shrink: 0;
  opacity: 0.9;
}

.dc-nav-mega-note {
  margin: 10px 0 0;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.45;
}

.dc-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.dc-btn--float {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.08);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.dc-btn--float:hover {
  transform: translateY(1px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.dc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 500;
  text-decoration: none;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
  white-space: nowrap;
}

.dc-btn--ghost {
  padding: 8px 16px;
  font-size: 14px;
  color: #b5bac1;
  background: transparent;
}
.dc-btn--ghost:hover {
  text-decoration: underline;
  background: rgba(255, 255, 255, 0.06);
}

body:has(#view-login.discord-com-landing-root.active),
body:has(#view-boot.active) {
  background: #23272a !important;
}

.dc-btn--brand {
  padding: 8px 18px;
  font-size: 14px;
  color: #fff;
  background: #5865f2;
  box-shadow: none;
}
.dc-btn--brand:hover {
  background: #4752c4;
  box-shadow: none;
}

.dc-btn--outline {
  padding: 10px 22px;
  font-size: 15px;
  color: #f2f3f5;
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.35);
}
.dc-btn--outline:hover {
  background: rgba(255, 255, 255, 0.08);
}

.dc-btn--xl {
  padding: 14px 28px;
  font-size: 16px;
}

.dc-btn--discord.dc-btn--primary-hero,
.dc-btn.dc-btn--discord {
  font-weight: 700;
  color: #fff;
  background: #23272a;
  border: 1px solid rgba(0, 0, 0, 0.35);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
}

.dc-btn--discord.dc-btn--primary-hero:hover,
.dc-btn.dc-btn--discord:hover {
  filter: brightness(1.08);
}

.discord-com-landing .dc-btn--white,
.dc-btn--white {
  color: #23272a;
  background: #fff;
  border: none;
  font-weight: 700;
  box-shadow: none;
}

.discord-com-landing .dc-btn--white:hover,
.dc-btn--white:hover {
  background: #ebedef;
  filter: none;
}

.discord-com-landing .dc-btn-discord--header {
  background: #fff;
  color: #23272a;
  border: none;
  box-shadow: none;
  font-weight: 700;
}

.discord-com-landing .dc-btn-discord--header:hover {
  background: #ebedef;
  filter: none;
}

.dc-changelog-empty {
  margin: 24px 0 0;
  padding: 32px 24px;
  text-align: center;
  font-size: 1rem;
  color: #b5bac1;
  background: #2f3136;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
}

.dc-tools-card {
  margin-top: 8px;
  background: #2f3136;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 20px;
  box-shadow: none;
}

.dc-tools-card.landing-docs-card .filter-bar {
  margin-bottom: 12px;
}

/* Fahrzeugliste table + controls inside marketing shell */
.discord-com-landing .dc-tools-card .ins-cars-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  padding: 0;
  background: transparent;
  border: none;
}

.discord-com-landing .dc-tools-card .ins-cars-search-wrap {
  flex: 1 1 220px;
  min-width: 200px;
}

.discord-com-landing .dc-tools-card .ins-cars-search-wrap input,
.discord-com-landing .dc-tools-card .input,
.discord-com-landing .dc-tools-card select {
  background: #23272a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #f2f3f5;
  border-radius: 8px;
}

.discord-com-landing .dc-tools-card .ins-cars-search-wrap input:focus,
.discord-com-landing .dc-tools-card .input:focus,
.discord-com-landing .dc-tools-card select:focus {
  border-color: #5865f2;
  outline: none;
  box-shadow: 0 0 0 2px rgba(88, 101, 242, 0.25);
}

.discord-com-landing .dc-tools-card .ins-cars-search-wrap input::placeholder {
  color: #72767d;
}

.discord-com-landing .dc-tools-card .ins-cars-sort-select {
  min-width: 200px;
}

.discord-com-landing .dc-tools-card .ins-cars-count,
.discord-com-landing .dc-tools-card .text-muted {
  color: #b5bac1;
  font-size: 13px;
}

.discord-com-landing .dc-tools-card .ins-cars-search-clear {
  color: #b5bac1;
  background: transparent;
}

.discord-com-landing .dc-tools-card .ins-cars-search-clear:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.discord-com-landing .dc-tools-card .landing-docs-table-shell {
  max-height: min(65vh, 620px);
  overflow: auto;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: #23272a;
}

.dc-page-fahrzeuge .discord-com-landing .dc-tools-card .landing-docs-table-shell {
  max-height: none !important;
  overflow: hidden;
}

.discord-com-landing .dc-tools-card .table-container {
  border: none;
  border-radius: 0;
  background: transparent;
}

.discord-com-landing .dc-tools-card .ins-cars-table {
  width: 100%;
}

.discord-com-landing .dc-tools-card .ins-cars-table thead {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #2f3136;
}

.discord-com-landing .dc-tools-card .ins-cars-table th {
  color: #b5bac1;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 12px 14px;
}

.discord-com-landing .dc-tools-card .ins-cars-table td {
  color: #f2f3f5;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding: 11px 14px;
  font-size: 14px;
}

.discord-com-landing .dc-tools-card .ins-cars-table tbody tr:hover td {
  background: rgba(88, 101, 242, 0.1);
}

.discord-com-landing .dc-tools-card .ins-cars-table .ins-th-sort {
  color: inherit;
  font: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}

.discord-com-landing .dc-tools-card .ins-cars-table .ins-th-sort:hover {
  color: #fff;
}

.discord-com-landing .dc-tools-card .ins-cars-table td.num {
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.discord-com-landing .dc-tools-card .custom-select-wrapper .cd-trigger {
  background: #23272a;
  border-color: rgba(255, 255, 255, 0.1);
  color: #f2f3f5;
}

/* Fahrzeugliste — immersive tool page (matches Atomuhr / Changelog) */
html:has(body.dc-page-fahrzeuge),
body.dc-page-fahrzeuge {
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
  background: #1e1f22;
}

body.dc-page-fahrzeuge > .landing-view.discord-com-landing-root {
  background: #1e1f22;
}

body.dc-page-fahrzeuge > .landing-view.discord-com-landing-root {
  flex: 1 1 0;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
}

.dc-page-fahrzeuge .discord-com-landing {
  flex: 1 1 0;
  min-height: 0;
  height: 100%;
  max-height: 100dvh;
  overflow: hidden;
}

.dc-page-fahrzeuge .discord-com-landing .dc-main {
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.dc-page-fahrzeuge .dc-hero--fahrzeuge {
  flex-shrink: 0;
  padding-bottom: 0;
}

.dc-fahrzeuge-main {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #1e1f22;
}

.dc-fahrzeuge-stage {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.dc-fahrzeuge-bg-glow {
  display: none;
}

.dc-fahrzeuge-brand-bg {
  position: absolute;
  left: 50%;
  top: 32%;
  transform: translate(-50%, -50%);
  font-family: "Inter", var(--font, system-ui), sans-serif;
  font-size: clamp(6rem, 28vw, 16rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.9;
  color: #fff;
  opacity: 0.035;
  white-space: nowrap;
  user-select: none;
}

.dc-fahrzeuge-foreground {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: min(96vw, 1480px);
  margin: 0 auto;
  padding: 12px 20px 16px;
  box-sizing: border-box;
}

.dc-fahrzeuge-head {
  flex: 0 0 auto;
  text-align: center;
  margin-bottom: 12px;
}

.dc-fahrzeuge-page-title {
  margin: 0;
  font-family: "JetBrains Mono", var(--font-mono);
  font-size: clamp(0.8rem, 1.8vw, 1rem);
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

.dc-fahrzeuge-body {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #1e1f22;
}

.dc-page-fahrzeuge .dc-fahrzeuge-toolbar {
  flex: 0 0 auto;
  margin: 0 0 10px;
  padding: 0;
  background: #1e1f22;
  border: none;
}

.dc-page-fahrzeuge #pub-cars-list.dc-fahrzeuge-list,
.dc-page-fahrzeuge #pub-awk-list.dc-fahrzeuge-list {
  flex: 1 1 0;
  min-height: 0;
  max-height: none !important;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #1e1f22;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.dc-page-fahrzeuge #pub-cars-list .ins-cars-table-wrap,
.dc-page-fahrzeuge #pub-cars-list > .table-container,
.dc-page-fahrzeuge #pub-awk-list .ins-cars-table-wrap,
.dc-page-fahrzeuge #pub-awk-list > .table-container,
.dc-page-fahrzeuge #pub-awk-list .table-container.ins-cars-table-wrap {
  flex: 1 1 0;
  min-height: 0;
  max-height: none !important;
  overflow-x: auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: #1e1f22 !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none;
}

.dc-page-fahrzeuge #pub-cars-list .empty-state,
.dc-page-fahrzeuge #pub-awk-list .empty-state {
  color: #b5bac1;
  padding: 24px;
  background: transparent;
}

/* Fahrzeugliste — same tone as page (#1e1f22) */
.dc-page-fahrzeuge .dc-fahrzeuge-toolbar .ins-cars-search-wrap input,
.dc-page-fahrzeuge .dc-fahrzeuge-toolbar .input,
.dc-page-fahrzeuge .dc-fahrzeuge-toolbar select,
.dc-page-fahrzeuge .dc-fahrzeuge-toolbar .custom-select-wrapper .cd-trigger {
  background: #1e1f22;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #f2f3f5;
}

.dc-page-fahrzeuge .dc-fahrzeuge-toolbar .ins-cars-search-wrap input:focus,
.dc-page-fahrzeuge .dc-fahrzeuge-toolbar .input:focus,
.dc-page-fahrzeuge .dc-fahrzeuge-toolbar select:focus {
  border-color: rgba(88, 101, 242, 0.5);
  box-shadow: none;
  outline: none;
}

.dc-page-fahrzeuge .dc-fahrzeuge-toolbar .ins-cars-count,
.dc-page-fahrzeuge .dc-fahrzeuge-toolbar .text-muted {
  color: #949ba4;
}

.dc-page-fahrzeuge #pub-cars-list .ins-cars-table,
.dc-page-fahrzeuge #pub-awk-list .ins-cars-table,
.dc-page-fahrzeuge #pub-awk-list .ins-awk-table {
  width: 100%;
  min-width: 0;
  border-radius: 0 !important;
  background: #1e1f22 !important;
  box-shadow: none !important;
  border-spacing: 0;
}

.dc-page-fahrzeuge #pub-awk-list .ins-cars-table,
.dc-page-fahrzeuge #pub-awk-list .ins-awk-table {
  min-width: 960px;
}

.dc-page-fahrzeuge #pub-cars-list .ins-cars-table thead,
.dc-page-fahrzeuge #pub-awk-list .ins-cars-table thead,
.dc-page-fahrzeuge #pub-cars-list .ins-cars-table-wrap thead,
.dc-page-fahrzeuge #pub-awk-list .ins-cars-table-wrap thead {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #1e1f22 !important;
}

.dc-page-fahrzeuge #pub-cars-list .ins-cars-table th,
.dc-page-fahrzeuge #pub-awk-list .ins-cars-table th {
  color: #949ba4;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 12px 14px;
  background: #1e1f22 !important;
  box-shadow: none;
}

.dc-page-fahrzeuge #pub-awk-list .ins-cars-table th {
  white-space: nowrap;
}

.dc-page-fahrzeuge #pub-cars-list .ins-cars-table td,
.dc-page-fahrzeuge #pub-awk-list .ins-cars-table td {
  color: #f2f3f5;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding: 11px 14px;
  font-size: 14px;
  background: #1e1f22 !important;
  box-shadow: none;
  vertical-align: middle;
}

.dc-page-fahrzeuge #pub-awk-list .ins-cars-table td {
  vertical-align: middle;
}

.dc-page-fahrzeuge #pub-awk-list .ins-awk-table .dc-awk-col-name {
  min-width: 11rem;
  max-width: 14rem;
  text-align: left;
}

.dc-page-fahrzeuge #pub-awk-list .ins-awk-table .dc-awk-col-name .dc-awk-copy-text {
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.01em;
}

.dc-page-fahrzeuge #pub-awk-list .ins-awk-table .dc-awk-col-pv {
  text-align: center;
  width: 9.5rem;
  white-space: nowrap;
}

.dc-page-fahrzeuge #pub-awk-list .ins-awk-table th.dc-awk-col-pv {
  text-align: center;
}

.dc-page-fahrzeuge #pub-awk-list .ins-awk-table .dc-awk-pv {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.25rem;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.2;
  border: 1px solid transparent;
}

.dc-page-fahrzeuge #pub-awk-list .ins-awk-table .dc-awk-pv--ja {
  color: #57f287;
  background: rgba(87, 242, 135, 0.14);
  border-color: rgba(87, 242, 135, 0.35);
}

.dc-page-fahrzeuge #pub-awk-list .ins-awk-table .dc-awk-pv--nein {
  color: #b5bac1;
  background: rgba(148, 155, 164, 0.12);
  border-color: rgba(148, 155, 164, 0.28);
}

.dc-page-fahrzeuge #pub-awk-list .ins-awk-table .dc-awk-pv--empty,
.dc-page-fahrzeuge #pub-awk-list .ins-awk-table .dc-awk-pv--other {
  color: #949ba4;
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
  text-transform: none;
  font-weight: 500;
}

.dc-page-fahrzeuge #pub-awk-list .ins-awk-table .dc-awk-col-notes {
  min-width: 12rem;
  max-width: 28rem;
  color: #dcddde;
  line-height: 1.45;
}

.dc-page-fahrzeuge #pub-awk-list .ins-awk-table .dc-awk-notes {
  display: block;
  word-break: break-word;
}

.dc-page-fahrzeuge #pub-awk-list .ins-awk-table .dc-awk-notes--empty {
  color: #5c6370;
}

.dc-page-fahrzeuge #pub-awk-list .ins-awk-table th.dc-awk-col-phone,
.dc-page-fahrzeuge #pub-awk-list .ins-awk-table td.dc-awk-col-phone,
.dc-page-fahrzeuge #pub-awk-list .ins-awk-table th.dc-awk-col-passport,
.dc-page-fahrzeuge #pub-awk-list .ins-awk-table td.dc-awk-col-passport {
  text-align: center !important;
}

.dc-page-fahrzeuge #pub-awk-list .ins-awk-table th.dc-awk-col-phone,
.dc-page-fahrzeuge #pub-awk-list .ins-awk-table th.dc-awk-col-passport {
  text-align: center;
}

.dc-page-fahrzeuge #pub-awk-list .ins-awk-table td.dc-awk-col-phone {
  min-width: 7.5rem;
}

.dc-page-fahrzeuge #pub-awk-list .ins-awk-table td.dc-awk-col-passport {
  min-width: 6.5rem;
}

.dc-page-fahrzeuge #pub-awk-list .ins-awk-table .dc-awk-col-passport .dc-awk-copy-text {
  font-variant-numeric: tabular-nums;
}

.dc-page-fahrzeuge #pub-awk-list .ins-awk-table th.dc-awk-col-name,
.dc-page-fahrzeuge #pub-awk-list .ins-awk-table th.dc-awk-col-notes {
  text-align: left;
}

.dc-page-fahrzeuge #pub-cars-list .ins-cars-table tbody tr:hover,
.dc-page-fahrzeuge #pub-awk-list .ins-cars-table tbody tr:hover,
.dc-page-fahrzeuge #pub-awk-list .ins-awk-table tbody tr:hover {
  transform: none;
  border-color: transparent;
  background: rgba(88, 101, 242, 0.06);
}

.dc-page-fahrzeuge #pub-cars-list .ins-cars-table tbody tr:hover td,
.dc-page-fahrzeuge #pub-awk-list .ins-cars-table tbody tr:hover td,
.dc-page-fahrzeuge #pub-awk-list .ins-awk-table tbody tr:hover td {
  background: rgba(88, 101, 242, 0.14) !important;
}

.dc-page-fahrzeuge #pub-cars-list .ins-cars-table .ins-th-sort,
.dc-page-fahrzeuge #pub-awk-list .ins-cars-table .ins-th-sort {
  color: inherit;
  font: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  padding: 0;
  background: none !important;
  border: none;
  cursor: pointer;
  box-shadow: none;
}

.dc-page-fahrzeuge #pub-cars-list .ins-cars-table .ins-th-sort:hover,
.dc-page-fahrzeuge #pub-awk-list .ins-cars-table .ins-th-sort:hover {
  color: #fff;
}

.dc-page-fahrzeuge #pub-cars-list .ins-cars-table td.num,
.dc-page-fahrzeuge #pub-awk-list .ins-cars-table td.num {
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.dc-page-fahrzeuge .insurance-scroll-shell .table-container {
  max-height: none !important;
}

.dc-awk-toolbar {
  flex-wrap: wrap;
  gap: 8px;
}

.dc-page-fahrzeuge #pub-awk-list .ins-awk-table .dc-awk-col-phone,
.dc-page-fahrzeuge #pub-awk-list .ins-awk-table .dc-awk-col-passport {
  white-space: nowrap;
}

.dc-page-fahrzeuge #pub-awk-list .ins-awk-table .dc-awk-copy-cell {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  max-width: 100%;
}

.dc-page-fahrzeuge #pub-awk-list .ins-awk-table .dc-awk-col-name .dc-awk-copy-cell {
  justify-content: flex-start;
  width: auto;
  max-width: 100%;
}

.dc-page-fahrzeuge #pub-awk-list .ins-awk-table .dc-awk-col-phone .dc-awk-copy-cell,
.dc-page-fahrzeuge #pub-awk-list .ins-awk-table .dc-awk-col-passport .dc-awk-copy-cell {
  justify-content: center;
  width: 100%;
}

.dc-page-fahrzeuge #pub-awk-list .ins-awk-table .dc-awk-copy-text {
  font-size: 14px;
  color: #f2f3f5;
  letter-spacing: 0.01em;
  line-height: 1.35;
  transition: color 0.15s ease;
}

.dc-page-fahrzeuge #pub-awk-list .ins-awk-table .dc-awk-col-phone .dc-awk-copy-text {
  font-variant-numeric: tabular-nums;
}

.dc-page-fahrzeuge #pub-awk-list .ins-awk-table .dc-awk-copy-text--empty {
  color: #5c6370;
}

.dc-page-fahrzeuge #pub-awk-list .ins-awk-table .dc-awk-copyable {
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  box-shadow: none;
}

.dc-page-fahrzeuge #pub-awk-list .ins-awk-table .dc-awk-copyable:hover .dc-awk-copy-text,
.dc-page-fahrzeuge #pub-awk-list .ins-awk-table .dc-awk-copyable:focus-visible .dc-awk-copy-text {
  color: #5865f2;
}

.dc-page-fahrzeuge #pub-awk-list .ins-awk-table .dc-awk-copyable.copied .dc-awk-copy-text {
  color: #57f287;
}

.dc-awk-copy-tooltip {
  position: fixed;
  z-index: 20000;
  display: none;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 500;
  color: #f2f3f5;
  background: #111214;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
  white-space: nowrap;
  pointer-events: none;
  line-height: 1.3;
}

.dc-awk-copy-tooltip.is-visible {
  display: block;
}

.dc-awk-updated {
  margin-left: auto;
  font-size: 12px;
}

@media (max-width: 900px) {
  .dc-page-fahrzeuge .dc-fahrzeuge-toolbar.ins-cars-toolbar-stable {
    flex-wrap: wrap;
    align-items: stretch;
    gap: 10px;
    min-height: 0;
  }

  .dc-page-fahrzeuge .dc-fahrzeuge-toolbar.ins-cars-toolbar-stable .ins-cars-search-wrap {
    flex: 1 1 100%;
    min-width: 0;
    max-width: none;
  }

  .dc-page-fahrzeuge .dc-fahrzeuge-toolbar.ins-cars-toolbar-stable .ins-cars-sort-select,
  .dc-page-fahrzeuge .dc-fahrzeuge-toolbar.ins-cars-toolbar-stable .custom-select-wrapper.cd-wrap {
    flex: 1 1 calc(50% - 5px);
    width: auto;
    min-width: 0;
    max-width: none;
  }

  .dc-page-fahrzeuge .dc-fahrzeuge-toolbar.ins-cars-toolbar-stable .ins-cars-count {
    flex: 1 1 100%;
    min-width: 0;
    margin-left: 0;
    text-align: left;
    font-size: 13px;
  }

  .dc-page-fahrzeuge .dc-fahrzeuge-toolbar .ins-cars-search-wrap input,
  .dc-page-fahrzeuge .dc-fahrzeuge-toolbar .input,
  .dc-page-fahrzeuge .dc-fahrzeuge-toolbar .custom-select-wrapper .cd-trigger {
    min-height: 44px;
    font-size: 16px;
  }

  .dc-page-fahrzeuge .dc-fahrzeuge-toolbar .ins-cars-search-clear {
    width: 44px;
    height: 44px;
    right: 4px;
  }

  .dc-page-fahrzeuge .dc-fahrzeuge-toolbar .members-search-icon {
    align-self: center;
  }

  .dc-page-fahrzeuge #pub-cars-list .ins-cars-table-wrap,
  .dc-page-fahrzeuge #pub-cars-list > .table-container {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-gutter: stable;
  }

  .dc-page-fahrzeuge #pub-cars-list .ins-cars-table {
    min-width: 520px;
  }

  .dc-page-fahrzeuge #pub-cars-list .ins-cars-table .ins-th-sort {
    min-height: 44px;
    padding: 4px 0;
  }

  .dc-page-fahrzeuge #pub-awk-list .ins-awk-table-wrap,
  .dc-page-fahrzeuge #pub-awk-list > .table-container,
  .dc-page-fahrzeuge #pub-awk-list .table-container.ins-cars-table-wrap {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-gutter: stable;
  }

  .dc-page-fahrzeuge #pub-awk-list .ins-awk-table {
    min-width: 720px;
  }
}

@media (max-width: 640px) {
  .dc-fahrzeuge-foreground {
    padding: 10px max(12px, env(safe-area-inset-left, 0px)) max(12px, env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-right, 0px));
  }

  .dc-fahrzeuge-head {
    margin-bottom: 8px;
  }

  .dc-fahrzeuge-page-title {
    letter-spacing: 0.18em;
    font-size: 0.75rem;
  }

  .dc-awk-updated {
    width: 100%;
    margin-left: 0;
  }

  .dc-page-fahrzeuge .dc-fahrzeuge-toolbar.ins-cars-toolbar-stable .ins-cars-sort-select,
  .dc-page-fahrzeuge .dc-fahrzeuge-toolbar.ins-cars-toolbar-stable .custom-select-wrapper.cd-wrap {
    flex: 1 1 100%;
  }

  /* Vehicle list: card stack (sort via toolbar; thead hidden) */
  .dc-page-fahrzeuge #pub-cars-list .ins-cars-table-wrap,
  .dc-page-fahrzeuge #pub-cars-list > .table-container {
    overflow-x: visible;
  }

  .dc-page-fahrzeuge #pub-cars-list .ins-cars-table {
    min-width: 0;
    width: 100%;
  }

  .dc-page-fahrzeuge #pub-cars-list .ins-cars-table thead {
    display: none;
  }

  .dc-page-fahrzeuge #pub-cars-list .ins-cars-table tbody tr {
    display: block;
    margin-bottom: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.02);
  }

  .dc-page-fahrzeuge #pub-cars-list .ins-cars-table tbody tr:hover {
    background: rgba(88, 101, 242, 0.06);
  }

  .dc-page-fahrzeuge #pub-cars-list .ins-cars-table tbody tr:hover td {
    background: transparent !important;
  }

  .dc-page-fahrzeuge #pub-cars-list .ins-cars-table td {
    display: grid;
    grid-template-columns: minmax(6.5rem, 38%) minmax(0, 1fr);
    gap: 6px 12px;
    align-items: center;
    padding: 11px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    text-align: left !important;
    white-space: normal;
  }

  .dc-page-fahrzeuge #pub-cars-list .ins-cars-table td:last-child {
    border-bottom: none;
  }

  .dc-page-fahrzeuge #pub-cars-list .ins-cars-table td::before {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #949ba4;
  }

  .dc-page-fahrzeuge #pub-cars-list .ins-cars-table td:nth-child(1)::before {
    content: "Fahrzeug";
  }

  .dc-page-fahrzeuge #pub-cars-list .ins-cars-table td:nth-child(2)::before {
    content: "Staatswert";
  }

  .dc-page-fahrzeuge #pub-cars-list .ins-cars-table td:nth-child(3)::before {
    content: "30 Tage";
  }

  .dc-page-fahrzeuge #pub-cars-list .ins-cars-table td:nth-child(4)::before {
    content: "15 Tage";
  }

  .dc-page-fahrzeuge #pub-cars-list .ins-cars-table td.num {
    justify-items: end;
    text-align: right !important;
    font-variant-numeric: tabular-nums;
  }

  .dc-page-fahrzeuge #pub-cars-list .ins-cars-table td:nth-child(1) {
    font-weight: 600;
    padding-top: 12px;
  }

  /* Anwaltskammer: card stack (sort via toolbar; thead hidden) */
  .dc-page-fahrzeuge #pub-awk-list .ins-awk-table-wrap,
  .dc-page-fahrzeuge #pub-awk-list > .table-container,
  .dc-page-fahrzeuge #pub-awk-list .table-container.ins-cars-table-wrap {
    overflow-x: visible;
  }

  .dc-page-fahrzeuge #pub-awk-list .ins-awk-table {
    min-width: 0;
    width: 100%;
  }

  .dc-page-fahrzeuge #pub-awk-list .ins-awk-table thead {
    display: none;
  }

  .dc-page-fahrzeuge #pub-awk-list .ins-awk-table tbody tr {
    display: block;
    margin-bottom: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.02);
  }

  .dc-page-fahrzeuge #pub-awk-list .ins-awk-table tbody tr:hover,
  .dc-page-fahrzeuge #pub-awk-list .ins-awk-table tbody tr:hover td {
    background: transparent !important;
    transform: none;
  }

  .dc-page-fahrzeuge #pub-awk-list .ins-awk-table tbody tr:hover {
    background: rgba(88, 101, 242, 0.06);
  }

  .dc-page-fahrzeuge #pub-awk-list .ins-awk-table td {
    display: grid;
    grid-template-columns: minmax(6.75rem, 42%) minmax(0, 1fr);
    gap: 6px 12px;
    align-items: center;
    padding: 11px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    text-align: left !important;
    white-space: normal;
    min-width: 0;
    max-width: none;
    width: auto;
  }

  .dc-page-fahrzeuge #pub-awk-list .ins-awk-table td:last-child {
    border-bottom: none;
  }

  .dc-page-fahrzeuge #pub-awk-list .ins-awk-table td::before {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #949ba4;
  }

  .dc-page-fahrzeuge #pub-awk-list .ins-awk-table td.dc-awk-col-name::before {
    content: "Name";
  }

  .dc-page-fahrzeuge #pub-awk-list .ins-awk-table td.dc-awk-col-passport::before {
    content: "Reisepass Nr.";
  }

  .dc-page-fahrzeuge #pub-awk-list .ins-awk-table td.dc-awk-col-phone::before {
    content: "Tel.";
  }

  .dc-page-fahrzeuge #pub-awk-list .ins-awk-table td.dc-awk-col-pv::before {
    content: "Pflichtverteidiger";
  }

  .dc-page-fahrzeuge #pub-awk-list .ins-awk-table td.dc-awk-col-notes::before {
    content: "Zusatz Informationen";
  }

  .dc-page-fahrzeuge #pub-awk-list .ins-awk-table td.dc-awk-col-name {
    display: block;
    grid-template-columns: none;
    padding-top: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .dc-page-fahrzeuge #pub-awk-list .ins-awk-table td.dc-awk-col-name::before {
    display: none;
  }

  .dc-page-fahrzeuge #pub-awk-list .ins-awk-table td.dc-awk-col-name .dc-awk-copy-text {
    font-size: 15px;
  }

  .dc-page-fahrzeuge #pub-awk-list .ins-awk-table td.dc-awk-col-notes {
    align-items: start;
  }

  .dc-page-fahrzeuge #pub-awk-list .ins-awk-table td.dc-awk-col-notes .dc-awk-notes {
    line-height: 1.45;
  }

  .dc-page-fahrzeuge #pub-awk-list .ins-awk-table td.dc-awk-col-phone .dc-awk-copy-cell,
  .dc-page-fahrzeuge #pub-awk-list .ins-awk-table td.dc-awk-col-passport .dc-awk-copy-cell {
    justify-content: flex-start;
    width: auto;
  }

  .dc-page-fahrzeuge #pub-awk-list .ins-awk-table .dc-awk-col-pv {
    width: auto;
    text-align: left;
  }
}

/* Atomuhr — full-page immersive tool */
.dc-page-atomuhr,
.dc-page-atomuhr .landing-view.discord-com-landing-root,
.dc-page-atomuhr .discord-com-landing {
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
}

.dc-page-atomuhr .discord-com-landing {
  min-height: 0;
}

.dc-page-atomuhr .dc-main {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.dc-page-atomuhr .dc-hero--atomuhr {
  flex-shrink: 0;
  padding-bottom: 0;
}

.dc-atomuhr-main {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: #1e1f22;
}

.dc-atomuhr-stage {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.dc-atomuhr-bg-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 65% 50% at 50% 44%, rgba(88, 101, 242, 0.12) 0%, transparent 68%);
}

.dc-atomuhr-bg-ring {
  position: absolute;
  left: 50%;
  top: 46%;
  width: min(82vmin, 640px);
  height: min(82vmin, 640px);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.04);
  opacity: 0.5;
}

.dc-atomuhr-brand-bg {
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  margin: 0;
  font-family: "Inter", var(--font, system-ui), sans-serif;
  font-size: clamp(7rem, 34vw, 18rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.9;
  color: #fff;
  opacity: 0.04;
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
}

.dc-atomuhr-foreground {
  position: relative;
  z-index: 2;
  container-type: inline-size;
  container-name: atomuhr;
  box-sizing: border-box;
  width: 100%;
  max-width: min(96vw, 1100px);
  max-height: 100%;
  padding: 24px 20px 40px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.dc-atomuhr-page-title {
  margin: 0 0 clamp(20px, 4vh, 36px);
  font-family: "JetBrains Mono", var(--font-mono);
  font-size: clamp(0.8rem, 1.8vw, 1rem);
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

.dc-atomuhr-foreground .dc-atomuhr-time {
  display: block;
  margin: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  font-family: "JetBrains Mono", var(--font-mono);
  font-size: clamp(2rem, min(22vw, 20cqw), 10.5rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 0.95;
  color: #fff;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.35);
  white-space: nowrap;
  overflow: hidden;
}

.dc-page-atomuhr.dc-atomuhr--seconds .dc-atomuhr-foreground .dc-atomuhr-time {
  font-size: clamp(1.75rem, min(18vw, 12.5cqw), 8.5rem);
}

.dc-page-atomuhr.dc-atomuhr--ms .dc-atomuhr-foreground .dc-atomuhr-time {
  font-size: clamp(1.25rem, min(14vw, 8.33cqw), 6.5rem);
  letter-spacing: -0.05em;
}

.dc-atomuhr-date {
  margin: clamp(16px, 3vh, 28px) 0 0;
  font-family: var(--font);
  font-size: clamp(0.875rem, 2.4vw, 1.35rem);
  font-weight: 500;
  color: #b5bac1;
  line-height: 1.45;
  max-width: min(36ch, 100%);
  padding-inline: 4px;
  overflow-wrap: anywhere;
}

.dc-atomuhr-options {
  margin: clamp(28px, 5vh, 48px) 0 0;
  padding: 14px 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  background: rgba(35, 39, 42, 0.85);
  box-sizing: border-box;
  width: auto;
  max-width: min(100%, calc(100vw - 2.5rem));
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 24px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.dc-atomuhr-options-legend {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.dc-atomuhr-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #dbdee1;
}

.dc-atomuhr-toggle-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.dc-atomuhr-toggle-track {
  position: relative;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 12px;
  background: #40444b;
  transition: background 0.15s ease;
}

.dc-atomuhr-toggle-track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  transition: transform 0.15s ease;
}

.dc-atomuhr-toggle-input:checked + .dc-atomuhr-toggle-track {
  background: #5865f2;
}

.dc-atomuhr-toggle-input:checked + .dc-atomuhr-toggle-track::after {
  transform: translateX(20px);
}

.dc-atomuhr-toggle-input:focus-visible + .dc-atomuhr-toggle-track {
  outline: 2px solid #5865f2;
  outline-offset: 2px;
}

.dc-atomuhr-toggle-input:disabled + .dc-atomuhr-toggle-track {
  opacity: 0.45;
  cursor: not-allowed;
}

.dc-atomuhr-toggle:has(.dc-atomuhr-toggle-input:disabled) {
  opacity: 0.65;
  cursor: not-allowed;
}

@media (max-width: 640px) {
  .dc-atomuhr-foreground {
    padding: 16px 12px 28px;
  }

  .dc-atomuhr-page-title {
    margin-bottom: clamp(12px, 3vh, 20px);
    letter-spacing: 0.18em;
  }

  .dc-atomuhr-date {
    margin-top: clamp(10px, 2.5vh, 20px);
  }

  .dc-atomuhr-options {
    margin-top: clamp(18px, 4vh, 32px);
    border-radius: 16px;
    padding: 16px 18px;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    width: 100%;
    max-width: min(100%, calc(100vw - 1.5rem));
  }

  .dc-atomuhr-toggle {
    justify-content: space-between;
    width: 100%;
    min-width: 0;
    font-size: 0.875rem;
  }

  .dc-atomuhr-brand-bg {
    font-size: clamp(3.5rem, 26vw, 6.5rem);
  }

  .dc-atomuhr-bg-ring {
    width: min(88vmin, 520px);
    height: min(88vmin, 520px);
  }
}

@media (max-width: 380px) {
  .dc-atomuhr-foreground {
    padding-inline: 10px;
  }

  .dc-atomuhr-page-title {
    letter-spacing: 0.12em;
    font-size: 0.75rem;
  }

  .dc-atomuhr-foreground .dc-atomuhr-time {
    font-size: clamp(1.75rem, min(20vw, 19cqw), 6rem);
  }

  .dc-page-atomuhr.dc-atomuhr--seconds .dc-atomuhr-foreground .dc-atomuhr-time {
    font-size: clamp(1.5rem, min(16vw, 11.5cqw), 5rem);
  }

  .dc-page-atomuhr.dc-atomuhr--ms .dc-atomuhr-foreground .dc-atomuhr-time {
    font-size: clamp(1.125rem, min(13vw, 7.75cqw), 4rem);
    letter-spacing: -0.06em;
  }
}

@media (max-height: 640px) {
  .dc-atomuhr-main {
    align-items: flex-start;
    padding-block: 8px;
  }

  .dc-atomuhr-foreground {
    padding-block: 12px 20px;
    justify-content: flex-start;
  }

  .dc-atomuhr-page-title {
    margin-bottom: 10px;
  }

  .dc-atomuhr-date {
    margin-top: 10px;
  }

  .dc-atomuhr-options {
    margin-top: 16px;
  }
}

@media (max-width: 640px) and (max-height: 500px) {
  .dc-atomuhr-brand-bg {
    font-size: clamp(2.75rem, 22vw, 4.5rem);
    opacity: 0.03;
  }

  .dc-atomuhr-bg-ring {
    width: min(72vmin, 360px);
    height: min(72vmin, 360px);
  }
}

/* Changelog — timeline page (Atomuhr-style shell) */
.dc-page-changelog .dc-main {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.dc-page-changelog .dc-hero--changelog {
  flex-shrink: 0;
  padding-bottom: 0;
}

.dc-page-changelog .dc-site-footer--discord {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

.dc-page-changelog .discord-com-landing.dc-nav-open .dc-changelog-main {
  overflow: hidden;
}

.dc-changelog-main {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  background: #1e1f22;
}

.dc-changelog-stage {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.dc-changelog-bg-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 45% at 50% 20%, rgba(88, 101, 242, 0.1) 0%, transparent 65%);
}

.dc-changelog-brand-bg {
  position: absolute;
  left: 50%;
  top: 38%;
  transform: translate(-50%, -50%);
  font-family: "Inter", var(--font, system-ui), sans-serif;
  font-size: clamp(6rem, 28vw, 16rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.9;
  color: #fff;
  opacity: 0.035;
  white-space: nowrap;
  user-select: none;
}

.dc-changelog-foreground {
  position: relative;
  z-index: 1;
  max-width: min(96vw, 960px);
  margin: 0 auto;
  padding: 28px 20px 72px;
}

.dc-changelog-head {
  text-align: center;
  margin-bottom: 48px;
}

.dc-changelog-page-title {
  margin: 0;
  font-family: "JetBrains Mono", var(--font-mono);
  font-size: clamp(0.8rem, 1.8vw, 1rem);
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

/* Infographic-style center spine, alternating sides */
.dc-changelog-timeline {
  --tl-spine: #5865f2;
  list-style: none;
  margin: 0;
  padding: 0 8px 16px;
  position: relative;
}

.dc-changelog-timeline::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 4px;
  transform: translateX(-50%);
  border-radius: 4px;
  background: linear-gradient(
    180deg,
    #5865f2 0%,
    #5865f2 32%,
    #5eb3d6 32%,
    #5eb3d6 66%,
    #5865f2 66%,
    #5865f2 100%
  );
  opacity: 0.55;
}

.dc-changelog-entry {
  --tl-color: #5865f2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 52px minmax(0, 1fr);
  gap: 0 12px;
  align-items: start;
  margin-bottom: 56px;
  position: relative;
}

.dc-changelog-entry:last-child {
  margin-bottom: 0;
}

.dc-changelog-entry--tone-sky { --tl-color: #5eb3d6; }
.dc-changelog-entry--tone-blurple { --tl-color: #5865f2; }

.dc-changelog-node {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  width: 22px;
  height: 22px;
  margin-top: 18px;
  border-radius: 50%;
  background: #1e1f22;
  border: 4px solid var(--tl-color);
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.35);
  z-index: 2;
  position: relative;
}

.dc-changelog-entry--origin .dc-changelog-node {
  background: #2f3136;
}

.dc-changelog-card {
  grid-row: 1;
  position: relative;
  max-width: 340px;
  padding: 4px 8px 8px;
}

.dc-changelog-entry--right .dc-changelog-card {
  grid-column: 1;
  justify-self: end;
  text-align: right;
}

.dc-changelog-entry--left .dc-changelog-card {
  grid-column: 3;
  justify-self: start;
  text-align: left;
}

.dc-changelog-year {
  display: block;
  font-family: "Inter", var(--font, system-ui), sans-serif;
  font-size: clamp(2.5rem, 6vw, 3.75rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: #f2f3f5;
}

.dc-changelog-period {
  display: block;
  margin-top: 4px;
  font-family: "JetBrains Mono", var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tl-color);
}

.dc-changelog-entry-title {
  margin: 12px 0 8px;
  font-family: "JetBrains Mono", var(--font-mono);
  font-size: clamp(1rem, 2.2vw, 1.2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--tl-color);
}

.dc-changelog-entry-text {
  margin: 0;
  font-family: var(--font);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: #b5bac1;
}

.dc-changelog-entry-text a {
  color: #e3e5fc;
  font-weight: 500;
  text-decoration: none;
}

.dc-changelog-entry-text a:hover {
  text-decoration: underline;
  color: #fff;
}

@media (max-width: 768px) {
  .dc-changelog-timeline::before {
    left: 27px;
    transform: none;
  }

  .dc-changelog-timeline {
    padding: 0 0 16px;
  }

  .dc-changelog-entry {
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 0 16px;
    margin-bottom: 40px;
  }

  .dc-changelog-node {
    grid-column: 1;
    grid-row: 1;
    margin-top: 12px;
  }

  .dc-changelog-card,
  .dc-changelog-entry--right .dc-changelog-card,
  .dc-changelog-entry--left .dc-changelog-card {
    grid-column: 2;
    grid-row: 1;
    justify-self: stretch;
    max-width: none;
    text-align: left;
  }
}

@media (max-width: 640px) {
  .dc-page-changelog .dc-hero--changelog {
    padding-left: 0;
    padding-right: 0;
  }

  .dc-page-changelog .dc-header-inner {
    padding-left: 14px;
    padding-right: 14px;
  }

  .dc-changelog-foreground {
    padding: 20px 14px 48px;
  }

  .dc-changelog-head {
    margin-bottom: 32px;
  }

  .dc-changelog-brand-bg {
    font-size: clamp(4rem, 22vw, 8rem);
    top: 32%;
  }

  .dc-changelog-page-title {
    letter-spacing: 0.18em;
  }

  .dc-changelog-year {
    font-size: clamp(2rem, 10vw, 2.75rem);
  }

  .dc-changelog-entry-title {
    font-size: 1rem;
  }

  .dc-changelog-entry-text {
    font-size: 0.875rem;
  }

  .dc-page-changelog .dc-site-footer-top {
    padding-left: 16px;
    padding-right: 16px;
  }

  .dc-page-changelog .dc-footer-meta {
    padding-left: 16px;
    padding-right: 16px;
  }
}

.dc-cl-icon {
  display: none !important;
}

.discord-com-landing .dc-btn--outline {
  color: #fff;
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.65);
}

.discord-com-landing .dc-btn--outline:hover {
  background: rgba(255, 255, 255, 0.12);
}

.dc-btn--on-dark {
  color: #fff !important;
  background: transparent !important;
  border-color: #fff !important;
}
.dc-btn--on-dark:hover {
  background: rgba(255, 255, 255, 0.1) !important;
}

.dc-main {
  flex: 1 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#landing-main,
#landing-hero,
#landing-features {
  scroll-margin-top: 88px;
}

.discord-com-landing #landing-hero.dc-hero {
  padding-top: 20px;
}

.discord-com-landing .dc-hero.dc-hero--subpage {
  padding-top: 28px;
}

.dc-hero {
  position: relative;
  padding: 8px 24px 88px;
  overflow: hidden;
  background: #5865f2;
}

.discord-com-landing .dc-hero.dc-hero--subpage {
  background: #5865f2;
  overflow: visible;
}

.dc-hero--subpage {
  padding-bottom: 28px;
  overflow: visible;
}

.dc-hero--subpage .dc-header,
.dc-hero--subpage .dc-breadcrumb {
  position: relative;
  z-index: 2;
}

#dc-tools-nav {
  scroll-margin-top: 96px;
}

.dc-hero-bg {
  display: none;
}

.dc-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 980px;
  margin: 0 auto;
  padding-top: 8px;
  text-align: center;
}

.dc-hero-title {
  margin: 0 0 20px;
  font-family: "Inter", var(--font, system-ui), sans-serif;
  font-size: clamp(2.4rem, 6vw, 4rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: #fff;
}

.dc-hero-title-accent {
  color: #fff;
  display: block;
  margin-top: 0.15em;
  font-weight: 700;
  font-size: 0.92em;
}

.dc-hero-lead {
  margin: 0 auto 32px;
  max-width: 620px;
  font-size: clamp(1rem, 2.2vw, 1.2rem);
  line-height: 1.55;
  color: #b5bac1;
  font-weight: 450;
}

.dc-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  align-items: center;
}

.dc-hero-foot {
  margin: 28px 0 0;
  font-size: 14px;
  font-family: var(--font);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.85);
}
.dc-hero-foot a {
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
}
.dc-hero-foot a:hover {
  text-decoration: underline;
}

.dc-tagline-band {
  background: #2f3136;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 18px 24px;
}

.dc-tagline-inner {
  max-width: 980px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px 6px;
  font-size: 15px;
  font-weight: 600;
  color: #b5bac1;
  letter-spacing: 0.02em;
}

.dc-tagline-dot {
  color: #6d6f78;
  padding: 0 4px;
}

.dc-section {
  padding: 72px 24px;
}

.dc-section--features {
  background: #23272a;
}

.dc-section-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.dc-section-title {
  margin: 0 0 16px;
  text-align: center;
  font-family: "JetBrains Mono", var(--font-mono);
  font-size: clamp(1.6rem, 3.5vw, 2.35rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: #f0f0f0;
}

.dc-section-sub {
  margin: 0 auto 40px;
  max-width: 640px;
  text-align: center;
  font-size: 1.05rem;
  line-height: 1.55;
  color: #b5bac1;
}

.dc-section-sub a {
  color: #006ce7;
  font-weight: 600;
  text-decoration: none;
}
.dc-section-sub a:hover {
  text-decoration: underline;
}

.dc-feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}

.dc-feature-card {
  background: #23272a;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 24px 22px;
  transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.dc-feature-card:hover {
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
  transform: translateY(-2px);
}

.dc-feature-title {
  margin: 0 0 10px;
  font-family: "JetBrains Mono", var(--font-mono);
  font-size: 1.05rem;
  font-weight: 700;
  color: #f0f0f0;
}

.dc-feature-text {
  margin: 0;
  font-size: 15px;
  font-family: var(--font);
  font-weight: 400;
  line-height: 1.5;
  color: #b0b0b0;
}

.dc-feature-text a {
  color: #b5bac1;
  font-weight: 500;
  text-decoration: none;
}
.dc-feature-text a:hover {
  text-decoration: underline;
}

.dc-section--showcase {
  background: #23272a;
  padding-top: 48px;
  padding-bottom: 64px;
}

.dc-showcase-inner {
  display: flex;
  flex-direction: column;
  gap: 56px;
}

.dc-showcase-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}

.dc-showcase-intro {
  margin: 12px 0 0;
  font-size: 1.05rem;
  line-height: 1.55;
  color: #b0b0b0;
}

.dc-showcase-item {
  display: grid;
  grid-template-columns: minmax(0, 580px) minmax(0, 1fr);
  gap: 40px 48px;
  align-items: center;
}

.dc-showcase-item--reverse {
  grid-template-columns: minmax(0, 1fr) minmax(0, 580px);
}

.dc-showcase-item--reverse .dc-showcase-preview {
  order: 2;
}

.dc-showcase-item--reverse .dc-showcase-copy {
  order: 1;
}

.dc-showcase-preview {
  position: relative;
  display: block;
  width: 100%;
  max-width: 580px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: default;
  pointer-events: none;
  text-align: left;
  font: inherit;
  color: inherit;
  border-radius: 12px;
}

.dc-showcase-frame {
  position: relative;
  width: 100%;
  border-radius: 12px;
  background: var(--bg-primary);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.32);
}

/* Real dashboard markup inside landing previews — same classes as #view-app */
.dash-showcase-shell {
  pointer-events: none;
  user-select: none;
  background: var(--bg-primary);
}

.dash-showcase-shell .content {
  display: flex;
  flex-direction: column;
  background: var(--bg-primary);
  min-height: 0;
}

.dash-showcase-shell.is-personal .content-heading {
  display: flex;
}

.dash-showcase-shell.is-personal .personal-nav {
  display: inline-flex;
}

.dash-showcase-shell.is-personal .personal-only {
  display: inline-flex;
}

.dash-showcase-shell.is-admin .personal-nav {
  display: none;
}

.dash-showcase-section {
  display: block !important;
  padding: 16px;
  overflow: hidden;
}

.dc-showcase-preview .dash-showcase-section {
  max-height: none;
}

/* Übersicht preview: profile, Auszahlungen, chart */
.dc-showcase-preview--home .dc-showcase-frame {
  height: 380px;
  overflow: hidden;
}

.dc-showcase-preview--home .dash-showcase-shell {
  width: 920px;
  transform: scale(0.655);
  transform-origin: top left;
}

.dc-showcase-preview--home .dash-showcase-section {
  max-height: none;
  overflow: visible;
}

.dc-showcase-preview--home .dash-showcase-shell .home-layout {
  grid-template-columns: 320px 1fr;
  gap: 20px;
}

.dc-showcase-preview--home .stats-row-extended {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dc-showcase-preview--home .home-payout-chart-layout.dash-showcase-chart-single {
  grid-template-columns: minmax(0, 1fr);
}

.dc-showcase-preview--home .dash-showcase-chart-single .home-earnings-timeline-shell {
  min-height: 120px;
}

.dc-showcase-preview--home .dash-showcase-shell .content-header {
  min-height: 72px;
}

/* Leaderboard preview */
.dc-showcase-preview--leaderboard .dc-showcase-frame {
  height: 360px;
  overflow: hidden;
}

.dc-showcase-preview--leaderboard .dash-showcase-lb-tabs {
  margin-bottom: 12px;
}

.dc-showcase-preview--leaderboard .dash-showcase-lb-tabs .lb-tab {
  font-size: 10px;
  padding: 6px 8px;
  min-height: 0;
}

.dc-showcase-preview--leaderboard .dash-showcase-shell {
  width: 900px;
  transform: scale(0.644);
  transform-origin: top left;
}

.dc-showcase-preview--leaderboard .dash-showcase-section {
  max-height: none;
  overflow: visible;
}

.dc-showcase-preview--leaderboard .lb2-name,
.dc-showcase-preview--leaderboard .lb2-val {
  overflow: visible;
  text-overflow: unset;
  white-space: nowrap;
}

.dc-showcase-preview--leaderboard .lb2-row {
  grid-template-columns: 32px 36px minmax(0, 1fr) auto;
}

.dash-showcase-shell .home-layout {
  grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
  gap: 16px;
}

/* Static line chart — matches dashboard Chart.js earnings chart in previews */
.dash-showcase-chart-static {
  position: relative;
  height: 140px;
  margin-top: 2px;
}

.dash-showcase-chart-svg {
  display: block;
  width: 100%;
  height: 140px;
}

.dc-showcase-preview--home .dash-showcase-chart-static {
  height: 100px;
}

.dc-showcase-preview--home .dash-showcase-chart-svg {
  height: 100px;
}

.dc-showcase-preview--home .home-section:last-child {
  margin-bottom: 0;
}

.dash-showcase-shell .dash-showcase-chart-static .dash-chart-pinned {
  top: 8px;
  right: 8px;
}

/* Non-copyright placeholder avatars (initials only) */
.showcase-avatar-ph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
  background: hsl(var(--av-hue, 220) 42% 38%);
  color: #f2f3f5;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  user-select: none;
}

.showcase-avatar-ph.lb-avatar {
  width: 32px;
  height: 32px;
}

.profile-avatar.showcase-avatar-ph {
  display: flex;
  object-fit: unset;
  background: hsl(var(--av-hue, 220) 42% 38%);
  font-size: 22px;
}

.showcase-avatar-ph--lg {
  font-size: 22px;
}

.showcase-avatar-ph--sm {
  width: 24px;
  height: 24px;
  font-size: 10px;
}

.dash-showcase-table-member {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.dc-showcase-preview--sanctions .dash-showcase-table-member .bl-avatar {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.dc-showcase-preview--sanctions .dash-showcase-table-member .bl-avatar .lb-avatar {
  width: 28px;
  height: 28px;
  font-size: 10px;
  display: inline-flex !important;
}

.dash-showcase-shell .sub-nav-btn,
.dash-showcase-shell .lb-tab,
.dash-showcase-shell .personal-nav-btn {
  pointer-events: none;
  cursor: default;
}

/* Events preview */
.dc-showcase-preview--events .dc-showcase-frame {
  height: 300px;
  overflow: hidden;
}

.dc-showcase-preview--events .dash-showcase-shell {
  width: 820px;
  transform: scale(0.707);
  transform-origin: top left;
}

/* Sanktionen preview */
.dc-showcase-preview--sanctions .dc-showcase-frame {
  height: 280px;
  overflow: hidden;
}

.dc-showcase-preview--sanctions .dash-showcase-shell {
  width: 900px;
  transform: scale(0.66);
  transform-origin: top left;
}

.dc-showcase-preview--sanctions .dash-showcase-section .table-container {
  font-size: 12px;
}

.dc-showcase-preview--sanctions .dash-showcase-section th,
.dc-showcase-preview--sanctions .dash-showcase-section td {
  padding: 6px 8px;
}

/* Blacklist preview */
.dc-showcase-preview--blacklist .dc-showcase-frame {
  height: 320px;
  overflow: hidden;
}

.dc-showcase-preview--blacklist .dash-showcase-shell {
  width: 880px;
  transform: scale(0.665);
  transform-origin: top left;
}

.dc-showcase-preview--blacklist .bl-actions .btn {
  pointer-events: none;
}

.dc-showcase-preview--events .dash-showcase-section {
  max-height: none;
  overflow: visible;
}

.dc-showcase-copy {
  min-width: 0;
}

.dc-showcase-title {
  margin: 0 0 12px;
  font-family: "JetBrains Mono", var(--font-mono);
  font-size: clamp(1.25rem, 2.5vw, 1.65rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: #f0f0f0;
}

.dc-showcase-lead {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  color: #b0b0b0;
}

/* Landing subpages + footer (restored after mock cleanup) */
.discord-com-landing {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.discord-com-landing .dc-main {
  flex: 1 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.dc-subpage-main {
  flex: 1 0 auto;
  width: 100%;
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
  padding: 32px 24px 48px;
  box-sizing: border-box;
}

.dc-subpage-main--wide {
  max-width: min(96vw, 1100px);
}

.dc-subpage-title {
  margin: 0 0 12px;
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #f2f3f5;
}

.dc-changelog-empty {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  color: #b5bac1;
}

.dc-site-footer {
  width: 100%;
  margin-top: auto;
  flex-shrink: 0;
  box-sizing: border-box;
}

.dc-site-footer-inner {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  box-sizing: border-box;
  padding-left: 24px;
  padding-right: 24px;
}

.dc-site-footer--discord {
  background: #23272a;
  color: #f2f3f5;
  padding: 64px 0 0;
  border-top: 1px solid rgba(0, 0, 0, 0.2);
}

.dc-site-footer-top {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-bottom: 40px;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  box-sizing: border-box;
  padding-left: 24px;
  padding-right: 24px;
}

.dc-footer-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 140px));
  justify-content: center;
  gap: 24px 120px;
}

.dc-footer-col {
  text-align: center;
}

.dc-footer-heading {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: #f2f3f5;
}

.dc-footer-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dc-footer-list li {
  margin-bottom: 8px;
}

.dc-footer-list li:last-child {
  margin-bottom: 0;
}

.dc-footer-list a {
  color: #f2f3f5;
  text-decoration: none;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
}

.dc-footer-list a:hover {
  text-decoration: underline;
}

.dc-site-footer--discord .dc-footer-heading {
  color: #f2f3f5;
}

.dc-site-footer--discord .dc-footer-list a {
  color: #f2f3f5;
}

.dc-footer-meta {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  box-sizing: border-box;
  padding: 20px 24px 40px;
  border-top: 1px solid rgba(0, 0, 0, 0.2);
  font-size: 12px;
  line-height: 1.55;
  color: #72767d;
  text-align: center;
}

.dc-footer-meta-copy {
  display: block;
  color: #b9bbbe;
  font-weight: 500;
  margin-bottom: 4px;
}

.dc-footer-disclaimer {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: #72767d;
}

.discord-com-landing .dc-blob {
  display: none;
}

@media (max-width: 960px) {
  .dc-showcase-item,
  .dc-showcase-item--reverse {
    grid-template-columns: 1fr;
  }

  .dc-showcase-item--reverse .dc-showcase-preview,
  .dc-showcase-item--reverse .dc-showcase-copy {
    order: unset;
  }

  .dc-showcase-preview {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .dc-footer-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 72px;
  }
}

@media (max-width: 640px) {
  .dc-site-footer--discord {
    padding-top: 48px;
  }

  .dc-footer-columns {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .dc-footer-meta {
    padding-bottom: 32px;
  }
}

/* =============================================================================
   Public shell (landing, changelog, tools): locked brand + hover model
   Brand: /img/logo-landing.png + .dc-header-brand-mark--landing only (see HTML comment)
   Hover: buttons, copy targets, search-clear, table sort headers, form fields,
   Tools mega-menu links, Fahrzeugliste/Anwaltskammer table rows (subtle blurple)
   ============================================================================= */

.discord-com-landing-root .dc-header-brand-mark:not(.dc-header-brand-mark--landing) {
  display: none;
}

.discord-com-landing-root .dc-corner-auth-link:hover,
.discord-com-landing-root .dc-header-brand:hover .dc-header-brand-text,
.discord-com-landing-root .dc-header-brand:focus-visible .dc-header-brand-text,
.discord-com-landing .dc-hero .dc-nav-link:hover,
.discord-com-landing .dc-hero .dc-nav-link:focus-visible,
.discord-com-landing .dc-hero .dc-nav-link[aria-current="page"]:hover,
.discord-com-landing .dc-hero .dc-nav-link[aria-current="page"]:focus-visible,
.discord-com-landing .dc-hero .dc-nav-link--trigger:hover,
.discord-com-landing .dc-hero .dc-nav-link--trigger:focus-visible,
.discord-com-landing .dc-hero .dc-nav-dropdown.is-open .dc-nav-link--trigger:hover,
.discord-com-landing-root .landing-topnav-link:hover,
.discord-com-landing-root .landing-card:hover,
.discord-com-landing-root .landing-cta-secondary:hover,
.discord-com-landing-root .landing-hero-hint a:hover,
.discord-com-landing-root .landing-card-text a:hover,
.discord-com-landing-root .landing-mid-stat-text a:hover,
.discord-com-landing-root .landing-cta-panel-text a:hover,
.discord-com-landing-root .landing-footer-links a:hover,
.discord-com-landing-root .dc-footer-list a:hover,
.discord-com-landing-root .dc-showcase-copy a:hover,
.discord-com-landing-root .content-heading-copy a:hover,
.discord-com-landing-root .docs-hub-card:hover,
.discord-com-landing .dc-btn--outline:hover {
  color: inherit !important;
  background: transparent !important;
  background-color: transparent !important;
  filter: none !important;
  transform: none !important;
  text-decoration: none !important;
  box-shadow: none !important;
  outline: none !important;
  border-color: inherit !important;
}

.discord-com-landing .dc-hero .dc-nav-link:hover,
.discord-com-landing .dc-hero .dc-nav-link:focus-visible {
  color: rgba(255, 255, 255, 0.88) !important;
}

.discord-com-landing .dc-hero .dc-nav-link[aria-current="page"]:hover,
.discord-com-landing .dc-hero .dc-nav-link[aria-current="page"]:focus-visible {
  color: #fff !important;
}

.discord-com-landing-root .dc-header-brand:hover .dc-header-brand-text,
.discord-com-landing-root .dc-header-brand:focus-visible .dc-header-brand-text {
  color: #f5f3ff !important;
}

/* Tools dropdown: keep blurple row highlight when picking a tool */
.discord-com-landing-root .dc-nav-mega-link:hover,
.discord-com-landing-root .dc-nav-mega-link:focus-visible {
  background: #4752c4 !important;
  color: #fff !important;
  outline: none !important;
}

.discord-com-landing-root .landing-card:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* Docs preview tables: no row lift/highlight */
.discord-com-landing .dc-tools-card .ins-cars-table tbody tr:hover td {
  background: #1e1f22 !important;
}

.discord-com-landing .dc-tools-card .ins-cars-table tbody tr:hover {
  background: transparent !important;
  transform: none !important;
}

/* ===== Tuning tools (Chiptuning, Optiktuning) — Discord User Settings style ===== */
.dc-page-tuning .dc-tuning-body,
.dc-page-fahrzeuge .dc-fahrzeuge-body.dc-tuning-body {
  overflow: hidden;
  gap: 0;
  padding: 4px 0 0;
}

.dc-tuning-panel {
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  max-width: min(100%, 1080px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  background: #2b2d31;
  border-radius: 8px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(4, 4, 5, 0.15),
    0 2px 10px rgba(0, 0, 0, 0.2);
}

.dc-tuning-panel__toolbar {
  flex-shrink: 0;
  position: relative;
  z-index: 5;
  overflow: visible;
  padding: 16px 20px;
  background: #2b2d31;
  border-bottom: 1px solid #1e1f22;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
}

.dc-tuning-panel__scroll {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: #2b2d31;
}

.dc-tuning-kicker {
  margin: 0;
  padding: 16px 20px 4px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #949ba4;
}

.dc-tuning-toolbar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  width: 100%;
  gap: 20px;
}

.dc-tuning-panel .dc-tuning-car-group,
.dc-page-fahrzeuge .dc-tuning-car-group,
.dc-page-tuning .dc-tuning-car-group {
  flex: 0 1 auto;
  width: min(100%, 520px);
  max-width: 520px;
  min-width: 240px;
  margin: 0;
  order: 1;
}

.dc-page-fahrzeuge .dc-tuning-car-group label,
.dc-page-tuning .dc-tuning-car-group label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #949ba4;
  margin-bottom: 6px;
}

.dc-page-fahrzeuge .dc-tuning-car-group .cd-wrap,
.dc-page-tuning .dc-tuning-car-group .cd-wrap,
.dc-page-fahrzeuge .dc-tuning-car-group select,
.dc-page-tuning .dc-tuning-car-group select {
  width: 100%;
}

.dc-page-fahrzeuge .dc-tuning-car-group .cd-trigger,
.dc-page-tuning .dc-tuning-car-group .cd-trigger,
.dc-tuning-panel .dc-tuning-car-group .cd-trigger {
  min-height: 44px;
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 500;
  background: #1e1f22;
  border: none;
  border-radius: 4px;
  color: #dbdee1;
  box-shadow: none;
}

.dc-page-fahrzeuge .dc-tuning-car-group .cd-trigger:hover,
.dc-page-tuning .dc-tuning-car-group .cd-trigger:hover,
.dc-tuning-panel .dc-tuning-car-group .cd-trigger:hover {
  background: #232428;
}

.dc-page-fahrzeuge .dc-tuning-car-group .cd-trigger.open,
.dc-page-tuning .dc-tuning-car-group .cd-trigger.open,
.dc-tuning-panel .dc-tuning-car-group .cd-trigger.open {
  background: #232428;
  box-shadow: 0 0 0 2px rgba(88, 101, 242, 0.55);
}

.dc-tuning-state-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 7.125rem;
  min-width: 7.125rem;
  max-width: 7.125rem;
  flex-shrink: 0;
  margin-left: auto;
  order: 2;
}

.dc-tuning-state-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #949ba4;
}

.dc-tuning-state-value {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  font-family: "JetBrains Mono", var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #f2f3f5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: #1e1f22;
  border-radius: 4px;
  line-height: 1.2;
}

.dc-tuning-state-value.dc-tuning-state--empty {
  color: #949ba4;
  font-weight: 500;
}

.dc-tuning-tier-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.dc-tuning-tier-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #949ba4;
}

/* Discord segmented control (settings tabs / pills) */
.dc-segment {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 2px;
  background: #1e1f22;
  border-radius: 4px;
  border: none;
  max-width: 100%;
  box-sizing: border-box;
}

.dc-segment--tier {
  width: 100%;
}

.dc-segment-btn {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  padding: 10px 12px;
  border: none;
  border-radius: 3px;
  background: transparent;
  color: #b5bac1;
  font-family: "Inter", var(--font, system-ui), sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.286;
  cursor: pointer;
  transition: background 0.1s ease, color 0.1s ease;
}

.dc-segment-btn:hover:not(:disabled) {
  color: #dbdee1;
}

.dc-segment-btn.is-active {
  background: #4e5058;
  color: #fff;
  box-shadow: none;
}

.dc-segment--tier .dc-segment-btn.is-active {
  background: #5865f2;
  color: #fff;
}

.dc-segment--tier .dc-segment-btn.is-active:hover:not(:disabled) {
  background: #4752c4;
}

.dc-segment-sub {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: #949ba4;
  margin-top: 2px;
  line-height: 1.2;
}

.dc-segment--tier .dc-segment-btn.is-active .dc-segment-sub {
  color: rgba(255, 255, 255, 0.75);
}

.dc-segment-btn.is-active .dc-segment-sub {
  color: #b5bac1;
}

.dc-segment-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.dc-chip-settings,
.dc-chip-parts-list {
  display: flex;
  flex-direction: column;
  padding: 0 12px 16px;
  background: transparent;
  border: none;
}

.dc-chip-settings-row {
  padding: 12px 8px;
  margin-bottom: 2px;
  border-radius: 4px;
  border-bottom: none;
  background: transparent;
  transition: background 0.1s ease;
}

.dc-chip-settings-row:hover {
  background: #35373c;
}

.dc-chip-settings-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.dc-chip-settings-title {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.25;
  color: #f2f3f5;
}

.dc-chip-settings-total {
  font-family: "JetBrains Mono", var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  color: #b5bac1;
  padding: 4px 8px;
  background: #1e1f22;
  border-radius: 4px;
}

.dc-chip-settings-row:hover .dc-chip-settings-total,
.dc-chip-settings-row:focus-within .dc-chip-settings-total {
  color: #f2f3f5;
}

.dc-segment--stages {
  width: 100%;
}

.dc-segment-pct {
  display: block;
  font-size: 0.65rem;
  font-weight: 500;
  color: #72767d;
  margin-top: 2px;
}

.dc-segment-btn.is-active .dc-segment-pct {
  color: #b5bac1;
}

.dc-chip-settings.is-locked,
.dc-chip-parts-list.is-locked {
  opacity: 0.5;
  pointer-events: none;
}

.dc-chip-settings.is-locked .dc-segment-btn,
.dc-chip-parts-list.is-locked .dc-segment-btn {
  cursor: not-allowed;
}

/* Discord settings rows (toggle list) */
.dc-pick-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 12px 16px;
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: visible;
}

.dc-pick-list--single {
  margin-top: 0;
}

.dc-pick-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 16px;
  width: 100%;
  min-height: 48px;
  padding: 10px 8px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: #f2f3f5;
  font-family: "Inter", var(--font, system-ui), sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.25;
  text-align: left;
  cursor: default;
  transition: none;
  transform: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.dc-tuning-optik-list .dc-pick-row[role="switch"] {
  cursor: pointer;
}

.dc-tuning-optik-list .dc-pick-row[role="switch"] {
  outline: none;
  transition: background 0.1s ease;
}

.dc-tuning-optik-list .dc-pick-row[role="switch"]:hover:not([aria-disabled="true"]),
.dc-tuning-optik-list .dc-pick-row[role="switch"]:focus-visible {
  background: #35373c;
  transform: none;
  box-shadow: none;
}

.dc-tuning-optik-list .dc-pick-row[role="switch"].is-selected {
  background: transparent;
}

.dc-tuning-optik-list .dc-pick-row[role="switch"].is-selected:hover:not([aria-disabled="true"]) {
  background: #35373c;
}

.dc-tuning-optik-list .dc-pick-row[role="switch"]:active:not([aria-disabled="true"]) {
  background: #35373c;
  transform: none;
  box-shadow: none;
}

.dc-tuning-optik-list .dc-pick-row[role="switch"].is-selected:active:not([aria-disabled="true"]) {
  background: #35373c;
}

.dc-tuning-optik-list .dc-pick-row[role="switch"]:focus-visible {
  outline: 2px solid rgba(88, 101, 242, 0.55);
  outline-offset: 2px;
}

/* Override global button press animation if any pick-row stays a button */
.dc-tuning-optik-list button.dc-pick-row:active {
  transform: none;
}

.dc-pick-row-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  flex-shrink: 0;
  width: 8.75rem;
  min-width: 8.75rem;
}

.dc-pick-row-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dc-pick-row-label {
  flex: 1 1 auto;
  min-width: 0;
}

.dc-pick-row-desc {
  font-size: 0.75rem;
  font-weight: 400;
  color: #949ba4;
  line-height: 1.3;
}

.dc-pick-row-price {
  flex: 1 1 auto;
  min-width: 0;
  text-align: right;
  font-family: "JetBrains Mono", var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #949ba4;
  transition: color 0.12s ease;
}

.dc-pick-row.is-selected .dc-pick-row-price {
  color: #f2f3f5;
}

/* Discord settings toggle (tuning tools only — not dashboard .dc-toggle) */
.dc-settings-toggle {
  position: relative;
  flex-shrink: 0;
  width: 40px;
  min-width: 40px;
  height: 24px;
  border-radius: 12px;
  background: #4e5058;
  transition: background 0.15s ease;
  pointer-events: none;
}

.dc-settings-toggle-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s ease;
  will-change: transform;
}

.dc-pick-row.is-selected .dc-settings-toggle {
  background: #5865f2;
}

.dc-pick-row.is-selected .dc-settings-toggle-knob {
  transform: translateX(16px);
}

.dc-pick-row-check {
  display: none;
}

.dc-tuning-panel .dc-tuning-summary {
  flex: 0 0 auto;
  margin-top: 0;
  padding: 14px 20px 16px;
  background: #232428;
  border: none;
  border-top: 1px solid #1e1f22;
  border-radius: 0;
}

.dc-tuning-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 0;
  font-size: 14px;
  font-weight: 500;
  color: #b5bac1;
}

.dc-tuning-summary-row .num {
  font-family: "JetBrains Mono", var(--font-mono);
  font-size: 16px;
  font-weight: 700;
  color: #f2f3f5;
}

.dc-tuning-summary-row--total {
  margin: 0;
  padding: 0;
  border: none;
  font-size: 16px;
  font-weight: 600;
  color: #f2f3f5;
}

.dc-tuning-summary-row--total .num {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
}

.dc-tuning-optik-list {
  padding: 0;
}

.dc-tuning-optik-list .dc-pick-list {
  padding: 0 12px 16px;
}

.dc-tuning-optik-list.is-locked,
.dc-pick-list.is-locked {
  opacity: 0.5;
  pointer-events: none;
}

.dc-tuning-optik-list.is-locked .dc-settings-toggle,
.dc-pick-list.is-locked .dc-settings-toggle {
  opacity: 0.6;
}

@media (max-width: 900px) {
  .dc-page-tuning .dc-tuning-panel,
  .dc-page-fahrzeuge .dc-tuning-panel {
    max-width: 100%;
    border-radius: 6px;
  }

  .dc-page-tuning .dc-fahrzeuge-body.dc-tuning-body,
  .dc-page-fahrzeuge .dc-fahrzeuge-body.dc-tuning-body {
    padding-top: 2px;
  }
}

@media (max-width: 640px) {
  .dc-page-tuning .dc-fahrzeuge-foreground,
  .dc-page-fahrzeuge .dc-fahrzeuge-foreground:has(.dc-tuning-body) {
    padding: 10px 12px 12px;
    overflow-x: hidden;
    max-width: 100%;
  }

  .dc-page-tuning .dc-tuning-body,
  .dc-page-fahrzeuge .dc-fahrzeuge-body.dc-tuning-body {
    min-width: 0;
    overflow-x: hidden;
  }

  .dc-page-tuning .dc-tuning-panel,
  .dc-page-fahrzeuge .dc-tuning-panel {
    min-width: 0;
    max-width: 100%;
  }

  .dc-tuning-panel__toolbar {
    padding: 12px 14px;
    gap: 12px;
  }

  .dc-tuning-kicker {
    padding: 12px 14px 4px;
  }

  .dc-tuning-panel .dc-tuning-summary {
    padding: 12px 14px 14px;
  }

  .dc-tuning-panel__scroll {
    overflow-x: hidden;
  }

  .dc-tuning-toolbar-row {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 12px;
  }

  .dc-tuning-panel .dc-tuning-car-group,
  .dc-page-fahrzeuge .dc-tuning-car-group,
  .dc-page-tuning .dc-tuning-car-group {
    width: 100%;
    max-width: none;
    min-width: 0;
    order: 1;
  }

  .dc-tuning-state-block {
    width: 100%;
    min-width: 0;
    max-width: none;
    margin-left: 0;
    order: 2;
  }

  .dc-tuning-state-value {
    justify-content: flex-start;
  }

  .dc-page-tuning .dc-segment--tier,
  .dc-page-fahrzeuge .dc-tuning-panel .dc-segment--tier {
    flex-direction: column;
    gap: 4px;
  }

  .dc-page-tuning .dc-segment--tier .dc-segment-btn,
  .dc-page-fahrzeuge .dc-tuning-panel .dc-segment--tier .dc-segment-btn {
    flex: 1 1 auto;
    width: 100%;
    text-align: center;
  }

  .dc-page-tuning .dc-segment--stages,
  .dc-page-fahrzeuge .dc-tuning-panel .dc-segment--stages {
    flex-direction: column;
    gap: 4px;
  }

  .dc-page-tuning .dc-segment--stages .dc-segment-btn,
  .dc-page-fahrzeuge .dc-tuning-panel .dc-segment--stages .dc-segment-btn {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    text-align: center;
  }

  .dc-page-tuning .dc-tuning-panel .dc-segment-btn,
  .dc-page-fahrzeuge .dc-tuning-panel .dc-segment-btn {
    min-height: 44px;
    padding: 10px 12px;
    font-size: 13px;
  }

  .dc-page-tuning .dc-segment-sub,
  .dc-page-fahrzeuge .dc-tuning-panel .dc-segment-sub {
    font-size: 10px;
  }

  .dc-chip-settings,
  .dc-chip-parts-list {
    padding: 0 6px 12px;
  }

  .dc-chip-settings-row {
    padding: 10px 6px;
  }

  .dc-chip-settings-head {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px;
  }

  .dc-chip-settings-title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 15px;
  }

  .dc-chip-settings-total {
    flex-shrink: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .dc-pick-row {
    column-gap: 10px;
    min-height: 44px;
    padding: 8px 6px;
    font-size: 15px;
  }

  .dc-pick-row-meta {
    width: auto;
    min-width: 0;
    max-width: none;
    gap: 10px;
  }

  .dc-pick-row-price {
    font-size: 12px;
  }

  .dc-tuning-optik-list .dc-pick-list {
    padding: 0 8px 12px;
  }

  .dc-tuning-optik-list .dc-pick-row-label {
    overflow-wrap: anywhere;
  }
}

@media (max-width: 400px) {
  .dc-tuning-optik-list .dc-pick-row[role="switch"] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    row-gap: 6px;
    align-items: stretch;
  }

  .dc-tuning-optik-list .dc-pick-row-meta {
    width: 100%;
    justify-content: space-between;
  }
}

/* Member Twink modal — compact */
.member-twink-id-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.member-twink-edit-btn {
  flex-shrink: 0;
  opacity: 0.75;
}
.member-twink-edit-btn:hover {
  opacity: 1;
}
.member-twink-modal-body {
  min-width: 260px;
  max-width: 340px;
}
.member-twink-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.member-twink-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px;
}
.member-twink-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 11px;
  color: var(--text-muted);
}
.member-twink-field .input-compact {
  width: 96px;
  padding: 4px 8px;
  font-size: 13px;
  min-height: 28px;
}
.member-twink-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.member-twink-form .btn-xs {
  padding: 4px 10px;
  font-size: 12px;
  min-height: 28px;
  line-height: 1.2;
}

/* Tuning tools use Versicherungen cd-menu (body-fixed, z-index 10050) — no combo-search overlay */

/* ─── Familien-Unternehmen: zentrierte Detail-Ansicht & große Buttons ─── */
/* Discord-like split view (cards + compact settings) */
#section-family-business { padding: 0; }
.fambiz-shell {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 0;
  height: 100%;
  min-height: 0;
}

.fambiz-sidebar {
  background: var(--bg-secondary);
  border-right: 1px solid var(--border-faint);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.fambiz-sidebar-header {
  padding: 12px 12px 10px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.fambiz-sidebar-body {
  padding: 10px 8px 12px;
  overflow: auto;
  min-height: 0;
}

.fambiz-search {
  width: 100%;
  background: rgba(17,18,20,.65);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 10px;
  padding: 9px 10px;
  color: var(--text-normal);
  outline: none;
  margin: 0 4px 10px;
  font-size: 13px;
}

.fambiz-card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
}

.fambiz-card {
  position: relative;
  border: none;
  background: transparent;
  border-radius: 6px;
  padding: 8px 10px 8px 12px;
  cursor: pointer;
  transition: background .12s ease, transform .12s ease;
  text-align: left;
}
.fambiz-card:hover { background: rgba(255,255,255,.06); }
.fambiz-card.selected { background: rgba(255,255,255,.08); }
.fambiz-card.selected::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 999px;
  background: var(--header-primary);
}
.fambiz-card-top { display: flex; gap: 8px; align-items: center; }
.fambiz-card-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(17,18,20,.55);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  border: 1px solid rgba(255,255,255,.06);
}
.fambiz-card-title { font-weight: 700; color: var(--header-primary); font-size: 14px; line-height: 1.15; letter-spacing: .01em; }
.fambiz-card-sub { font-size: 12px; color: var(--text-muted); margin-top: 1px; display: flex; align-items: center; gap: 6px; }
.fambiz-card.is-active .fambiz-card-sub { color: #23a559; }
.fambiz-card.is-active .fambiz-card-sub::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #23a559;
  box-shadow: 0 0 0 2px rgba(35,165,89,.18);
}

.fambiz-content {
  padding: 0;
  overflow: auto;
  min-height: 0;
}

.fambiz-detail-header {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
  padding: 12px 16px;
  margin: 0;
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--bg-primary);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.fambiz-detail-header h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
}

.fambiz-detail-subtitle { color: var(--text-muted); font-size: 0.8rem; margin-top: 1px; }
/* FamBiz detail action row (buttons right-aligned) */
.fambiz-detail-actions { display:flex; align-items:center; justify-content: space-between; gap: 10px; width: 100%; }
.fambiz-detail-actions-btns { display:flex; gap: 10px; margin-left: auto; justify-content: flex-end; }

.fambiz-detail-card {
  padding: 14px 14px 12px;
  margin: 14px 16px 0;
}

/* Detail header (Discord-like) — aligned with Event module "info card" feel */
.fambiz-detail-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  margin: 0;
  border-radius: 0;
  background: transparent;
  border: none;
}
.fambiz-topbar-left { display:flex; align-items:center; gap: 10px; min-width: 0; }
.fambiz-topbar-icon {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(88,101,242,.18);
  color: #fff;
  flex-shrink: 0;
}
.fambiz-topbar-info { min-width: 0; }
.fambiz-topbar-title { font-weight: 700; color: var(--header-primary); font-size: 14px; line-height: 1.2; }
.fambiz-topbar-meta { margin-top: 2px; display:flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; color: var(--text-muted); align-items:center; }
.fambiz-topbar-actions { display:flex; gap: 8px; align-items:center; flex-wrap: wrap; justify-content: flex-end; }
.fambiz-topbar-actions .btn { min-height: 30px; padding: 0 10px; font-size: 12px; }

/* Make the "Feld" / settings panel feel like Discord forms */
#section-family-business .fambiz-detail-panel {
  margin-top: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
}

#section-family-business .fambiz-settings-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px 10px;
}

#section-family-business .fambiz-compact-full { grid-column: 1 / -1; }
#section-family-business .fambiz-compact-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 2fr 1.4fr;
  gap: 10px;
  align-items: end;
}

#section-family-business .fambiz-detail-panel .form-group label {
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

#section-family-business .fambiz-detail-panel input[type="number"],
#section-family-business .fambiz-detail-panel input[type="text"],
#section-family-business .fambiz-detail-panel select {
  background: var(--bg-primary) !important; /* integrated with page background */
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 10px !important;
  min-height: 32px;
  padding: 6px 10px;
  font-size: 12px;
}

#section-family-business .fambiz-detail-panel input[type="number"]:focus,
#section-family-business .fambiz-detail-panel input[type="text"]:focus,
#section-family-business .fambiz-detail-panel select:focus {
  border-color: rgba(88,101,242,.9) !important;
  box-shadow: 0 0 0 2px rgba(88,101,242,.22) !important;
}

/* Choice buttons (Größe / Sorte) like Discord segmented pills */
#section-family-business .fambiz-choice-grid {
  gap: 6px;
}

#section-family-business .fambiz-choice-grid--crops {
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 2px;
  padding-right: 10px;
}
#section-family-business .fambiz-choice-grid--crops .fambiz-choice-btn {
  flex: 0 0 auto;
  min-width: 108px;
  white-space: nowrap;
}
#section-family-business .fambiz-choice-grid--crops .fambiz-choice-btn:last-child { margin-right: 10px; }

/* Make custom dropdown trigger match the unified surface */
#section-family-business .fambiz-detail-surface .cd-trigger {
  background: var(--bg-primary);
  border-color: rgba(255,255,255,.08);
  min-height: 32px;
  padding: 6px 10px;
  font-size: 12px;
}
#section-family-business .fambiz-detail-surface .cd-trigger:hover {
  background: var(--bg-primary);
  border-color: rgba(255,255,255,.12);
}
#section-family-business .fambiz-detail-surface .cd-trigger.open {
  border-color: rgba(88,101,242,.9);
  box-shadow: 0 0 0 2px rgba(88,101,242,.22);
}

.fambiz-chart-info-head { display:flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.fambiz-chart-info-sub { color: var(--text-muted); font-size: 12px; }
.fambiz-pin-pill { font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: rgba(88,101,242,.18); color: #c9cdfb; vertical-align: 1px; }
.fambiz-chart-metrics { display:grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.fambiz-chart-metric { border: 1px solid rgba(255,255,255,.06); border-radius: 12px; padding: 8px 10px; background: rgba(255,255,255,.03); }
.fambiz-chart-metric .k { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.fambiz-chart-metric .v { margin-top: 4px; font-weight: 800; color: var(--text-normal); }
.fambiz-chart-breakdown-title { font-weight: 800; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin: 6px 0 6px; }
.fambiz-chart-hint { margin-top: 10px; font-size: 11px; color: var(--text-muted); }

#section-family-business .fambiz-choice-grid--sizes .fambiz-choice-btn {
  min-width: 64px;
  flex: 0 0 auto;
}

#section-family-business .fambiz-choice-btn {
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.06);
  color: var(--text-normal);
  font-weight: 700;
  min-height: 26px;
  padding: 4px 8px;
  font-size: 12px;
}

#section-family-business .fambiz-choice-btn.btn-secondary {
  background: rgba(255,255,255,.06);
}

#section-family-business .fambiz-choice-btn.btn-secondary:hover:not(:disabled) {
  background: rgba(255,255,255,.09);
}

#section-family-business .fambiz-choice-btn.btn-blurple {
  background: rgba(88,101,242,.95);
  border-color: rgba(88,101,242,.65);
}

#section-family-business .fambiz-choice-btn.btn-blurple:hover:not(:disabled) {
  filter: brightness(1.06);
}

#section-family-business .fambiz-detail-analytics {
  grid-template-columns: 1fr;
}

.fambiz-analytics-surface {
  border-top: 1px solid rgba(255,255,255,.06);
  padding-top: 12px;
}
.fambiz-analytics-head { display:flex; align-items:center; justify-content: space-between; margin-bottom: 8px; }
.fambiz-analytics-title { font-weight: 700; color: var(--header-primary); font-size: 13px; }

.fambiz-analytics-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 12px;
  align-items: start;
}
.fambiz-analytics-right {
  border-left: 1px solid rgba(255,255,255,.06);
  padding-left: 12px;
  min-width: 0;
}
#section-family-business .fambiz-analytics-right .home-earnings-insight-card {
  min-height: 220px;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
}
.fambiz-chart-info-title {
  font-weight: 700;
  color: var(--header-primary);
  font-size: 12px;
  margin-bottom: 6px;
}
.fambiz-chart-info-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 180px;
  overflow: auto;
  padding-right: 4px;
}
.fambiz-chart-info-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  color: var(--text-muted);
}
.fambiz-chart-info-value { color: var(--text-normal); font-weight: 700; }

.fambiz-chart-recent {
  border-top: 1px solid rgba(255,255,255,.06);
  margin-top: 10px;
  padding-top: 8px;
  max-height: 160px;
  overflow: auto;
}

.fambiz-detail-leaderboard-card {
  display:flex;
  flex-direction: column;
  max-height: 340px;
  border-top: 1px solid rgba(255,255,255,.06);
  padding-top: 12px;
}
.fambiz-detail-lb {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding-right: 4px;
}

.fambiz-lb-head { display:flex; gap: 10px; flex-wrap: wrap; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.fambiz-lb-tabs {
  display: inline-flex;
  gap: 6px;
  padding: 4px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
}
.fambiz-lb-tab {
  min-height: 26px;
  padding: 4px 10px;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-weight: 700;
  font-size: 12px;
}
.fambiz-lb-tab:hover { background: rgba(255,255,255,.06); color: var(--header-primary); }
.fambiz-lb-tab.active { background: rgba(88,101,242,.95); color: #fff; }

/* Unify everything into one background surface */
.fambiz-detail-surface {
  margin: 14px 16px 18px;
  padding: 14px;
  border-radius: 16px;
  background: transparent; /* integrated into section background */
  border: none;
}

@media (max-width: 980px) {
  #section-family-business .fambiz-settings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #section-family-business .fambiz-compact-grid { grid-template-columns: 1fr; }
  .fambiz-analytics-grid { grid-template-columns: 1fr; }
  .fambiz-analytics-right { border-left: none; padding-left: 0; border-top: 1px solid rgba(255,255,255,.06); padding-top: 10px; }
}

.fambiz-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
  align-items: start;
}

.fambiz-detail-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fambiz-detail-analytics {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
  gap: 14px;
  align-items: start;
  padding: 0 16px;
}

.fambiz-detail-chart-card {
  padding: 14px 14px 10px;
}

.fambiz-detail-chart-wrap {
  height: 260px;
  position: relative;
}

.fambiz-detail-chart-wrap canvas {
  width: 100% !important;
  height: 100% !important;
}

.fambiz-detail-overview-card {
  padding: 14px 14px 10px;
}

.fambiz-detail-recent {
  padding: 2px 0 6px;
}

.fambiz-recent-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-faint);
}

.fambiz-recent-row:last-child { border-bottom: 0; }

.fambiz-recent-main {
  color: var(--text-normal);
  font-size: 0.95rem;
  line-height: 1.25;
}

.fambiz-recent-meta {
  color: var(--text-muted);
  font-size: 0.85rem;
  white-space: nowrap;
}

.fambiz-recent-payout {
  color: var(--text-normal);
  font-weight: 800;
}

.fambiz-recent-row.is-empty {
  opacity: .85;
}

.fambiz-detail-leaderboard-card {
  padding: 14px 14px 10px;
  margin: 0 16px;
}

.fambiz-lb-list {
  display: flex;
  flex-direction: column;
}

/* FamBiz leaderboard now uses the global "lb-row" look */
.fambiz-lb-list .lb-row { border-radius: var(--radius-sm); padding: 10px 12px; }
.fambiz-lb-valwrap { display: flex; gap: 12px; align-items: baseline; justify-content: flex-end; }

.fambiz-lb-row {
  display: grid;
  grid-template-columns: 44px 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-faint);
}

.fambiz-lb-row:last-child { border-bottom: 0; }

.fambiz-lb-rank {
  color: var(--text-muted);
  font-weight: 700;
}

.fambiz-lb-metric {
  color: var(--text-muted);
  font-size: 0.9rem;
  white-space: nowrap;
}

.fambiz-detail-panel .fambiz-detail-row {
  margin-bottom: 4px;
}

.fambiz-detail-panel .form-group label {
  font-size: 0.72rem;
  margin-bottom: 6px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.fambiz-detail-input,
.fambiz-detail-panel .fambiz-detail-select {
  min-height: 32px;
  font-size: 0.9rem;
}

.fambiz-hint {
  color: var(--text-muted);
  font-weight: 400;
}

.fambiz-choice-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.fambiz-choice-grid--crops .fambiz-choice-btn {
  flex: 1 1 calc(50% - 10px);
  min-width: 120px;
}

.fambiz-choice-btn {
  flex: 1 1 auto;
  min-width: 80px;
  min-height: 30px;
  padding: 6px 10px;
  font-size: 0.85rem;
  font-weight: 700;
}

.fambiz-forum-title-hint { display: none; }

.fambiz-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 16px 16px 18px;
  justify-content: center;
}

.fambiz-action-btn {
  min-height: 34px;
  padding: 8px 14px;
  font-size: 0.88rem;
  font-weight: 600;
  flex: 1 1 180px;
  max-width: 280px;
}

.fambiz-action-btn--activate {
  background: var(--green);
  color: #fff;
}

.fambiz-action-btn--activate:hover {
  filter: brightness(1.08);
}

#section-family-business .fambiz-card-btn {
  min-height: 40px;
  padding: 10px 20px;
  font-size: 0.95rem;
  font-weight: 600;
  align-self: stretch;
  width: 100%;
  justify-content: center;
}

@media (max-width: 860px) {
  .fambiz-shell { grid-template-columns: 1fr; height: auto; min-height: 0; }
  .fambiz-sidebar { border-right: 0; border-bottom: 1px solid var(--border-faint); }
  .fambiz-content { padding: 14px 14px 18px; }
  .fambiz-settings-grid { grid-template-columns: 1fr; }
  .fambiz-detail-analytics { grid-template-columns: 1fr; }
  .fambiz-detail-chart-wrap { height: 240px; }
  .fambiz-lb-row { grid-template-columns: 36px 1fr; }
  .fambiz-lb-metric { justify-self: start; }
}

/* ===== BUSINESS sections — mobile-first responsive ===== */
#section-market,
#section-bizwars,
#section-family-business,
#section-private-business,
#section-solar-panels,
#section-quota {
  max-width: 100%;
  min-width: 0;
  overflow-x: clip;
}

#section-market .embed-builder,
#section-private-business .embed-builder {
  overflow-x: visible;
}

#section-market .embed-builder-row,
#section-private-business .embed-builder-row {
  min-width: 0;
  max-width: 100%;
}

#section-private-business .settings-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

#section-private-business .setting-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

#section-private-business .setting-row .custom-select-wrapper,
#section-private-business .setting-row select {
  width: 100%;
}

#section-market .table-container,
#section-bizwars .table-container,
#section-private-business .table-container,
#section-solar-panels .table-container,
#section-quota #quota-member-table {
  overflow-x: visible;
  max-width: 100%;
}

#section-market .table-container table,
#section-bizwars .table-container table,
#section-private-business .table-container table,
#section-solar-panels .table-container table,
#section-quota #quota-member-table table {
  table-layout: fixed;
  width: 100%;
}

#section-market .table-container th,
#section-market .table-container td,
#section-bizwars .table-container th,
#section-bizwars .table-container td,
#section-private-business .table-container th,
#section-private-business .table-container td,
#section-solar-panels .table-container th,
#section-solar-panels .table-container td,
#section-quota #quota-member-table th,
#section-quota #quota-member-table td {
  white-space: normal;
  word-break: break-word;
  vertical-align: top;
}

#section-market .table-container th,
#section-bizwars .table-container th,
#section-private-business .table-container th,
#section-solar-panels .table-container th,
#section-quota #quota-member-table th {
  white-space: normal;
}

#section-market .table-action-group,
#section-bizwars .table-action-group,
#section-solar-panels .table-action-group {
  flex-wrap: wrap;
  justify-content: flex-start;
  max-width: 100%;
}

#section-market .table-container img,
#section-bizwars .table-container img {
  max-width: 100%;
  height: auto;
}

#section-bizwars .bizwar-add-submit .bizwar-add-submit-label {
  display: block;
  min-height: 0;
  margin: 0;
  padding: 0;
  visibility: hidden;
  font-size: 12px;
  line-height: 1.2;
}

#section-bizwars .bizwar-add-btn {
  width: 100%;
  min-height: 42px;
  padding: 10px 16px;
  font-size: 14px;
}

#section-bizwars .table-container .bizwar-income-rating {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
}

#section-bizwars .table-container .bizwar-income-rating--sehr-gut { color: #3ba55d; }
#section-bizwars .table-container .bizwar-income-rating--gut { color: #57f287; }
#section-bizwars .table-container .bizwar-income-rating--mittel { color: #faa81a; }
#section-bizwars .table-container .bizwar-income-rating--bad { color: #ed4245; }
#section-bizwars .table-container .bizwar-income-rating--neutral { color: var(--text-muted); }

@media (max-width: 900px) {
  #section-market .embed-builder-row,
  #section-private-business .embed-builder-row {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  #section-market .embed-preview-wrap,
  #section-private-business .embed-preview-wrap {
    width: 100%;
    max-width: none;
    position: static;
    justify-self: stretch;
  }

  #section-market .discord-msg-preview,
  #section-private-business .discord-msg-preview {
    padding: 12px 14px;
  }

  #section-private-business #privbiz-tab-settings .embed-builder-form .form-row {
    grid-template-columns: 1fr !important;
  }

  #section-bizwars #bizwar-auszahlung-fields .form-row {
    grid-template-columns: 1fr;
  }

  #section-solar-panels #solar-tab-settings .dc-form > .form-row {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }

  #section-quota #quota-tab-config .form-row {
    grid-template-columns: 1fr;
  }

  #section-quota .ui-stat-grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #section-quota .ui-chart-shell {
    max-width: 100%;
    min-height: 260px;
  }
}

@media (max-width: 720px) {
  #section-market .dc-form .form-row,
  #section-market #mkt-modal-page .form-row,
  #section-bizwars .dc-form .form-row,
  #section-private-business #privbiz-modal-page .form-row,
  #section-solar-panels .dc-form .form-row {
    grid-template-columns: 1fr;
  }

  #section-bizwars #bizwar-tab-settings .content-card + .content-card .dc-form .form-row {
    grid-template-columns: 1fr;
  }

  #section-solar-panels #solar-tab-settings .dc-form > .form-row {
    grid-template-columns: 1fr;
  }

  #section-quota .ui-stat-grid-3 {
    grid-template-columns: 1fr;
  }

  #section-quota .ui-chart-shell {
    min-height: 220px;
    padding: 12px;
  }

  #section-quota #quota-member-table th:nth-child(4),
  #section-quota #quota-member-table td:nth-child(4),
  #section-quota #quota-member-table th:nth-child(5),
  #section-quota #quota-member-table td:nth-child(5) {
    display: none;
  }

  #section-market #market-tab-listings .table-container th:nth-child(1),
  #section-market #market-tab-listings .table-container td:nth-child(1),
  #section-market #market-tab-listings .table-container th:nth-child(2),
  #section-market #market-tab-listings .table-container td:nth-child(2),
  #section-market #market-tab-listings .table-container th:nth-child(7),
  #section-market #market-tab-listings .table-container td:nth-child(7),
  #section-market #market-tab-auctions .table-container th:nth-child(1),
  #section-market #market-tab-auctions .table-container td:nth-child(1),
  #section-market #market-tab-auctions .table-container th:nth-child(2),
  #section-market #market-tab-auctions .table-container td:nth-child(2),
  #section-market #market-tab-auctions .table-container th:nth-child(6),
  #section-market #market-tab-auctions .table-container td:nth-child(6),
  #section-market #market-tab-auctions .table-container th:nth-child(7),
  #section-market #market-tab-auctions .table-container td:nth-child(7) {
    display: none;
  }

  #section-bizwars #bizwar-tab-settings .table-container th:nth-child(6),
  #section-bizwars #bizwar-tab-settings .table-container td:nth-child(6),
  #section-bizwars #bizwar-tab-settings .table-container th:nth-child(7),
  #section-bizwars #bizwar-tab-settings .table-container td:nth-child(7),
  #section-bizwars #bizwar-tab-history .table-container th:nth-child(5),
  #section-bizwars #bizwar-tab-history .table-container td:nth-child(5) {
    display: none;
  }

  #section-private-business #privbiz-tab-overview .table-container th:nth-child(4),
  #section-private-business #privbiz-tab-overview .table-container td:nth-child(4),
  #section-private-business #privbiz-tab-overview .table-container th:nth-child(6),
  #section-private-business #privbiz-tab-overview .table-container td:nth-child(6) {
    display: none;
  }

  #section-solar-panels #solar-tab-history .table-container th:nth-child(4),
  #section-solar-panels #solar-tab-history .table-container td:nth-child(4),
  #section-solar-panels #solar-tab-history .table-container th:nth-child(5),
  #section-solar-panels #solar-tab-history .table-container td:nth-child(5) {
    display: none;
  }

  #market-detail-overlay,
  #section-market #mkt-modal-page,
  #section-private-business #privbiz-modal-page {
    padding: 16px 12px;
  }
}

@media (max-width: 640px) {
  #section-family-business .fambiz-settings-grid {
    grid-template-columns: 1fr;
  }

  #section-family-business .fambiz-choice-grid--crops {
    flex-wrap: wrap;
    overflow-x: visible;
    padding-right: 0;
  }

  #section-family-business .fambiz-choice-grid--crops .fambiz-choice-btn {
    flex: 1 1 calc(50% - 6px);
    min-width: 0;
    white-space: normal;
    margin-right: 0;
  }

  #section-family-business .fambiz-choice-grid--crops .fambiz-choice-btn:last-child {
    margin-right: 0;
  }

  #section-family-business .fambiz-choice-grid--sizes {
    flex-wrap: wrap;
  }

  #section-family-business .fambiz-choice-grid--sizes .fambiz-choice-btn {
    flex: 1 1 calc(33.333% - 6px);
    min-width: 56px;
  }

  #section-family-business .fambiz-detail-topbar {
    flex-direction: column;
    align-items: stretch;
  }

  #section-family-business .fambiz-topbar-actions {
    width: 100%;
    justify-content: flex-start;
  }

  #section-family-business .fambiz-detail-analytics {
    padding: 0 8px;
  }

  #section-family-business .fambiz-chart-metrics {
    grid-template-columns: 1fr;
  }

  #section-family-business .fambiz-detail-surface {
    margin: 10px 8px 14px;
    padding: 10px;
  }

  #section-family-business .fambiz-action-row {
    margin: 12px 8px 14px;
  }

  #section-family-business .fambiz-action-btn {
    max-width: none;
    flex: 1 1 100%;
  }
}

@media (max-width: 520px) {
  #section-bizwars #bizwar-tab-settings .table-container th:nth-child(2),
  #section-bizwars #bizwar-tab-settings .table-container td:nth-child(2),
  #section-bizwars #bizwar-tab-settings .table-container th:nth-child(8),
  #section-bizwars #bizwar-tab-settings .table-container td:nth-child(8) {
    display: none;
  }
}

/* ===== VERWALTUNG sections — mobile-first responsive ===== */
#section-events,
#section-giveaways,
#section-crime,
#section-organisation,
#section-voicechat,
#section-move,
#section-insurance,
#section-regelwerk,
#section-embed-creator {
  max-width: 100%;
  min-width: 0;
  overflow-x: clip;
}

/* — Events — */
#section-events .evt-sub-nav {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex-wrap: nowrap;
}
#section-events .evt-sub-nav::-webkit-scrollbar {
  display: none;
}
#section-events .evt-sub-nav .sub-nav-btn {
  flex: 0 0 auto;
  min-width: auto;
  padding-inline: 10px;
  white-space: nowrap;
}
#section-events .evt-types-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}
#section-events .evt-detail-header {
  flex-wrap: wrap;
}
#section-events .evt-detail-nav {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  flex-wrap: nowrap;
  scrollbar-width: none;
}
#section-events .evt-detail-nav::-webkit-scrollbar {
  display: none;
}
#section-events .evt-detail-nav-btn {
  flex: 0 0 auto;
  white-space: nowrap;
}
#section-events .evt-hist-filter-row {
  flex-wrap: nowrap;
}
#section-events .evt-hist-filter-row .cd-wrap,
#section-events .evt-hist-filter-row .evt-hist-filter-select {
  flex: 1 1 0;
  min-width: 140px;
  max-width: none;
}
#section-events .evt-hist-filter-row .evt-hist-filter-search {
  flex: 1 1 160px;
  min-width: 140px;
  max-width: 220px;
}
#section-events .evt-hist-outcome-edit {
  flex-wrap: nowrap;
}
#section-events .evt-hist-outcome-edit .cd-wrap,
#section-events .evt-hist-outcome-edit .evt-hist-filter-select {
  flex: 0 1 180px;
  min-width: 140px;
  max-width: 220px;
  width: auto;
}
#section-events .evt-hist-detail-inner {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
#section-events .evt-hist-table {
  min-width: 520px;
}
#section-events .evt-bw-toolbar-top .evt-bw-announce-toolbar-row {
  min-width: 0;
  flex: 1 1 100%;
}
#section-events .evt-card-footer {
  flex-wrap: wrap;
}
#section-events .evt-card-footer .btn {
  flex: 1 1 auto;
}
#section-events .evt-settings-row {
  grid-template-columns: 1fr;
}
@media (min-width: 560px) {
  #section-events .evt-settings-row {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
}

/* — Giveaways — */
#section-giveaways .card-toolbar-actions,
#section-giveaways .editor-action-row {
  width: 100%;
  flex-wrap: wrap;
}
#section-giveaways .giveaway-editor-grid {
  grid-template-columns: 1fr;
}
#section-giveaways .giveaway-preview-wrap {
  width: 100%;
  max-width: none;
}
#section-giveaways .table-container {
  max-width: 100%;
}
#section-giveaways .table-container table {
  min-width: 640px;
}

/* — Crime — */
#section-crime > .sub-nav {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex-wrap: nowrap;
}
#section-crime > .sub-nav::-webkit-scrollbar {
  display: none;
}
#section-crime > .sub-nav .sub-nav-btn {
  flex: 0 0 auto;
  min-width: auto;
  padding-inline: 10px;
  white-space: nowrap;
}
#section-crime #crime-events-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
}
#section-crime #crime-tab-detail,
#section-crime #crime-meldeamt-container,
#section-crime #crime-settings-container {
  min-width: 0;
  max-width: 100%;
}
#section-crime #crime-tab-detail .table-container,
#section-crime #crime-meldeamt-container .table-container {
  max-width: 100%;
}
#section-crime .evt-detail-header {
  flex-wrap: wrap;
}
#section-crime .evt-detail-nav {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  flex-wrap: nowrap;
  scrollbar-width: none;
}
#section-crime .evt-detail-nav::-webkit-scrollbar {
  display: none;
}
#section-crime .evt-detail-nav-btn {
  flex: 0 0 auto;
  white-space: nowrap;
}
#section-crime .evt-settings-row {
  grid-template-columns: 1fr;
}
@media (min-width: 560px) {
  #section-crime .evt-settings-row {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
}

/* — Organisation (Selfrole) — */
#section-organisation .card-toolbar {
  align-items: flex-start;
}
#section-organisation .card-toolbar .btn {
  flex-shrink: 0;
}
#section-organisation .sub-nav {
  width: 100%;
}
#section-organisation .embed-builder.no-scroll .embed-builder-row {
  min-width: 0;
}
#section-organisation .discord-msg-preview {
  padding: 12px 16px;
}

/* — Voice chat — */
#section-voicechat > .content-card:first-child > div {
  display: flex;
  flex-wrap: wrap;
}
#section-voicechat .rw-tab {
  flex: 0 0 auto;
  min-width: auto;
  white-space: nowrap;
  text-align: center;
  line-height: 1.25;
}
#section-voicechat #vc-buttons-list {
  min-width: 0;
}
#section-voicechat #vc-buttons-list > * {
  min-width: 0;
  max-width: 100%;
}

/* — Move — */
#section-move #move-channel-editor.form-row {
  grid-template-columns: 1fr;
}
#section-move #move-channel-editor .form-group[style*="align-self"] {
  align-self: stretch !important;
}
#section-move #move-channel-editor .form-group[style*="align-self"] .btn {
  width: 100%;
}
#section-move .table-container table.data-table {
  min-width: 480px;
}
#section-move #move-requests-card .table-container table.data-table {
  min-width: 720px;
}

/* — Insurance — */
#section-insurance > .sub-nav {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex-wrap: nowrap;
}
#section-insurance > .sub-nav::-webkit-scrollbar {
  display: none;
}
#section-insurance > .sub-nav .sub-nav-btn {
  flex: 0 0 auto;
  min-width: auto;
  padding-inline: 10px;
  white-space: nowrap;
}
#section-insurance .card-toolbar .ui-actions-inline {
  flex-wrap: wrap;
  justify-content: flex-end;
}
#section-insurance .ins-policy-form-row {
  grid-template-columns: 1fr;
}
#section-insurance .ins-policy-form-row .form-group {
  min-width: 0;
}
@media (max-width: 720px) {
  #section-insurance .ins-policy-inline {
    flex-wrap: wrap;
    width: 100%;
  }
  #section-insurance .ins-policy-inline .ins-add-policy-btn,
  #section-insurance .ins-policy-inline .ar-add-policy-btn {
    margin-left: 0;
  }
}
#section-insurance .insurance-scroll-shell .table-container {
  max-width: 100%;
}
#section-insurance .ins-table {
  min-width: 720px;
}
#section-insurance .ins-cars-table {
  min-width: 560px;
}
#section-insurance .ins-cars-toolbar .cd-wrap,
#section-insurance .ins-cars-toolbar .custom-select-wrapper.cd-wrap {
  width: 100%;
  min-width: 0;
  max-width: none;
}
#section-insurance .ins-cars-count {
  flex: 1 1 100%;
  margin-left: 0;
  text-align: left;
}

/* — Regelwerk — */
#section-regelwerk .card-toolbar > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
}
#section-regelwerk .card-toolbar > div #rw-auto-hint {
  flex: 1 1 100%;
  text-align: left;
}
#section-regelwerk #rw-grand-list {
  min-width: 0;
  overflow-wrap: anywhere;
}
#section-regelwerk .rw-rule-body {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* — Embed creator — */
#section-embed-creator > .sub-nav {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex-wrap: nowrap;
}
#section-embed-creator > .sub-nav::-webkit-scrollbar {
  display: none;
}
#section-embed-creator > .sub-nav .sub-nav-btn {
  flex: 0 0 auto;
  min-width: auto;
  padding-inline: 10px;
  white-space: nowrap;
}
#section-embed-creator .card-toolbar-actions {
  flex-wrap: wrap;
  margin-left: 0;
  width: 100%;
  justify-content: flex-start;
}
#section-embed-creator .embed-builder {
  overflow-x: visible;
}
#section-embed-creator .ui-form-row-auto-3 {
  grid-template-columns: 1fr;
}
#section-embed-creator #ec-existing-list {
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (min-width: 600px) {
  #section-embed-creator .ui-form-row-auto-3 {
    grid-template-columns: auto 1fr 1fr;
  }
}

@media (max-width: 768px) {
  #section-insurance.active:has(#ins-tab-cars:not(.hidden)) {
    display: block;
    overflow-y: visible;
    min-height: auto;
  }
  #section-insurance.active:has(#ins-tab-cars:not(.hidden)) > .sub-nav {
    flex-shrink: 0;
  }
  #ins-tab-cars:not(.hidden) {
    display: block;
    flex: none;
    min-height: auto;
  }
  #ins-tab-cars:not(.hidden) > .content-card {
    display: block;
    flex: none;
    min-height: auto;
  }
  #ins-tab-cars:not(.hidden) #ins-cars-list.insurance-scroll-shell {
    display: block;
    flex: none;
    min-height: auto;
    max-height: none;
  }
  #ins-tab-cars:not(.hidden) .ins-cars-table-wrap,
  #ins-tab-cars:not(.hidden) .insurance-scroll-shell .table-container {
    flex: none;
    min-height: auto;
    max-height: min(70vh, 560px);
  }
}

@media (max-width: 600px) {
  #section-events .evt-sub-nav .sub-nav-btn,
  #section-crime > .sub-nav .sub-nav-btn,
  #section-insurance > .sub-nav .sub-nav-btn {
    flex: 0 0 auto;
    min-width: auto;
    padding-inline: 10px;
  }
  #section-giveaways .color-picker-wrap {
    flex-wrap: wrap;
  }
  #section-giveaways .save-bar,
  #section-organisation .save-bar,
  #section-voicechat .save-bar,
  #section-insurance .save-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  #section-giveaways .save-bar-actions,
  #section-organisation .save-bar-actions,
  #section-voicechat .save-bar-actions,
  #section-insurance .save-bar-actions,
  #section-crime .save-bar-actions {
    width: 100%;
    flex-direction: column;
  }
  #section-giveaways .save-bar-actions .btn,
  #section-organisation .save-bar-actions .btn,
  #section-voicechat .save-bar-actions .btn,
  #section-insurance .save-bar-actions .btn,
  #section-crime .save-bar-actions .btn {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 420px) {
  #section-events .evt-types-grid {
    grid-template-columns: 1fr;
  }
  #section-crime #crime-events-grid {
    grid-template-columns: 1fr;
  }
  #section-voicechat .rw-tab {
    flex: 1 1 100%;
  }
}

/* ===== Server Picker — responsive layout ===== */
#view-servers {
  justify-content: flex-start;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  padding: 24px 16px;
}

.servers-page {
  min-width: 0;
  margin: auto;
  flex-shrink: 0;
}

.servers-grid {
  width: 100%;
  min-width: 0;
  max-height: min(60vh, 640px);
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.server-tile {
  min-height: 56px;
  touch-action: manipulation;
}

@media (max-width: 900px) {
  #view-servers {
    padding: max(16px, env(safe-area-inset-top, 0px))
      max(16px, env(safe-area-inset-right, 0px))
      max(16px, env(safe-area-inset-bottom, 0px))
      max(16px, env(safe-area-inset-left, 0px));
  }

  .servers-page {
    max-width: 100%;
    padding: 32px 20px;
    border-radius: 16px;
  }

  .servers-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  }
}

@media (max-width: 640px) {
  #view-servers {
    align-items: stretch;
    padding: max(12px, env(safe-area-inset-top, 0px))
      max(12px, env(safe-area-inset-right, 0px))
      max(12px, env(safe-area-inset-bottom, 0px))
      max(12px, env(safe-area-inset-left, 0px));
  }

  .servers-page {
    width: 100%;
    max-width: none;
    margin: auto 0;
    padding: 20px 14px 16px;
    border-radius: 12px;
  }

  .servers-top {
    margin-bottom: 18px;
  }

  .servers-logo {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    margin-bottom: 12px;
  }

  .servers-top h1 {
    font-size: 20px;
    line-height: 1.25;
  }

  .servers-top p {
    font-size: 14px;
    line-height: 1.45;
    padding: 0 4px;
  }

  .servers-grid {
    grid-template-columns: 1fr;
    gap: 10px;
    max-height: none;
    overflow: visible;
    padding: 0;
  }

  .server-tile {
    min-height: 56px;
    padding: 14px 12px;
    gap: 12px;
  }

  .server-tile-icon {
    width: 44px;
    height: 44px;
    font-size: 16px;
  }

  .server-tile-name {
    font-size: 15px;
    line-height: 1.35;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    word-break: break-word;
  }

  .server-tile-badge {
    font-size: 10px;
    padding: 3px 8px;
    letter-spacing: 0.02em;
  }

  .servers-footer {
    margin-top: 16px;
  }

  .servers-footer .btn {
    min-height: 44px;
    width: 100%;
    max-width: 320px;
  }
}

@media (max-width: 400px) {
  .servers-page {
    padding: 16px 12px 14px;
    border-radius: 10px;
  }

  .server-tile {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .server-tile-info {
    flex: 1 1 calc(100% - 56px);
    min-width: 0;
  }

  .server-tile-badge {
    flex: 1 1 100%;
    margin-left: calc(44px + 12px);
    align-self: flex-start;
    width: auto;
    max-width: calc(100% - 44px - 12px);
  }
}



/* SYSTEM dashboard sections - responsive */
.perm-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 4px;
  background: var(--nav-segment-bg);
  border-radius: var(--radius-md);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14);
}
.perm-subnav .rw-tab {
  flex: 0 0 auto;
  min-width: 0;
  min-height: var(--nav-row-h);
  padding: var(--nav-pad-y) 10px;
  font-size: var(--nav-font-sm);
}
.perm-subnav-count {
  opacity: 0.75;
  font-size: 11px;
  margin-left: 4px;
}
.perm-rank-defaults-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 16px;
}
.perm-rank-defaults-toolbar .form-hint {
  flex: 1 1 100%;
  margin: 0;
  font-size: 12px;
}
.perm-rank-defaults-toolbar .btn {
  flex: 0 1 auto;
  min-width: 0;
}
@media (max-width: 480px) {
  .perm-rank-defaults-toolbar .btn {
    flex: 1 1 100%;
  }
}

@media (max-width: 860px) {
  #section-permissions-discord,
  #section-permissions-dashboard,
  #section-welcome-goodbye,
  #section-trauerbox,
  #section-leaderboards,
  #section-logs,
  #section-sentinel,
  #section-ocr,
  #section-pov,
  #section-ai-rules,
  #section-settings {
    padding: 14px;
  }

  #section-logs > .sub-nav {
    flex: 0 0 auto;
    flex-shrink: 0;
  }
  #section-logs .log-filter-group {
    flex: 1 1 140px;
    min-width: 0;
  }
  #section-logs .log-filter-group select {
    width: 100%;
    min-width: 0;
  }
  #section-logs .log-module-grid,
  #section-permissions-dashboard .log-module-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }
  #section-logs .log-detail-header {
    flex-wrap: wrap;
  }

  #section-permissions-discord .table-container,
  #section-permissions-dashboard .table-container {
    overflow-x: clip;
    -webkit-overflow-scrolling: touch;
  }
  #section-permissions-discord .discord-permissions-table,
  #permissions-discord-detail .discord-permissions-table,
  #permissions-tab-detail .discord-permissions-table {
    table-layout: auto;
    min-width: 0;
    width: 100%;
  }
  #section-permissions-discord .discord-permissions-table th,
  #section-permissions-discord .discord-permissions-table td,
  #section-permissions-discord .permissions-detail-table th,
  #section-permissions-discord .permissions-detail-table td {
    width: auto !important;
    white-space: normal;
  }
  #section-permissions-discord .perm-actions-cell,
  #section-permissions-discord .perm-actions-stack {
    white-space: normal;
  }
  #section-permissions-discord .perm-detail-tabs {
    flex-wrap: wrap;
  }
  #section-permissions-discord .perm-module-group td {
    padding: 10px 12px;
  }

  #section-welcome-goodbye .embed-builder,
  #section-pov .embed-builder {
    overflow-x: visible;
  }
  #section-welcome-goodbye .embed-builder-row,
  #section-pov .embed-builder-row {
    grid-template-columns: 1fr;
    min-width: 0;
    gap: 16px;
  }
  #section-welcome-goodbye .embed-preview-wrap,
  #section-pov .embed-preview-wrap {
    width: 100%;
    max-width: none;
    position: static;
    justify-self: stretch;
  }
  #section-welcome-goodbye .discord-msg-preview,
  #section-pov .discord-msg-preview {
    padding: 12px 16px;
  }

  #section-ocr .table-container table {
    min-width: 640px;
  }
  #section-ocr #ocr-report-detail.ui-overlay-primary {
    padding: 14px;
  }

  #section-leaderboards #leaderboards-routing-table .form-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  #section-leaderboards #leaderboards-routing-table {
    min-width: 420px;
  }

  #section-pov .ui-tab-strip {
    flex-wrap: wrap;
  }
  #section-pov .ui-tab-fill {
    flex: 1 1 45%;
    min-width: 120px;
  }

  #section-permissions-dashboard .dash-perm-role-panel-head {
    flex-wrap: wrap;
  }
  #section-permissions-dashboard .dash-perm-role-panel-actions {
    flex-wrap: wrap;
  }
  #section-permissions-dashboard .dash-perm-toggle-row {
    gap: 12px;
  }
}

@media (max-width: 600px) {
  #section-permissions-discord,
  #section-permissions-dashboard,
  #section-welcome-goodbye,
  #section-trauerbox,
  #section-leaderboards,
  #section-logs,
  #section-sentinel,
  #section-ocr,
  #section-pov,
  #section-ai-rules,
  #section-settings {
    padding: 12px;
  }

  #section-logs .sub-nav-btn {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
  }
  #section-logs .log-filter-bar {
    flex-direction: column;
    align-items: stretch;
  }
  #section-logs .log-filter-group {
    flex: 1 1 auto;
    width: 100%;
  }
  #section-logs .log-module-grid,
  #section-permissions-dashboard .log-module-grid {
    grid-template-columns: 1fr;
  }

  #section-permissions-discord .perm-subnav .rw-tab,
  #section-permissions-discord .perm-detail-tabs .btn {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
  }
  #section-permissions-discord .perm-actions-stack {
    flex-direction: column;
    align-items: stretch;
  }
  #section-permissions-discord .perm-actions-stack .btn {
    width: 100%;
  }
  #section-permissions-discord .discord-permissions-rows .perm-actions-stack {
    flex-direction: row;
    align-items: center;
  }
  #section-permissions-discord .discord-permissions-rows .perm-actions-stack .btn {
    width: auto;
    flex: 0 0 auto;
    min-height: 28px;
    padding: 4px 10px;
    font-size: 12px;
  }

  #section-leaderboards .dc-form > .form-row {
    grid-template-columns: 1fr;
  }
  #section-leaderboards .card-toolbar {
    align-items: flex-start;
  }

  #section-ocr > .sub-nav .sub-nav-btn {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
  }

  #section-sentinel .form-row .form-group[style*="align-self"] {
    align-self: stretch !important;
  }
  #section-sentinel .form-row .form-group[style*="align-self"] .btn {
    width: 100%;
  }

  #section-welcome-goodbye .save-bar,
  #section-trauerbox .save-bar,
  #section-leaderboards .save-bar,
  #section-ocr .save-bar,
  #section-pov .save-bar,
  #section-sentinel .save-bar,
  #section-ai-rules .save-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  #section-welcome-goodbye .save-bar-text,
  #section-trauerbox .save-bar-text,
  #section-leaderboards .save-bar-text,
  #section-ocr .save-bar-text,
  #section-pov .save-bar-text,
  #section-sentinel .save-bar-text,
  #section-ai-rules .save-bar-text {
    white-space: normal;
    text-align: center;
  }
  #section-welcome-goodbye .save-bar-actions,
  #section-trauerbox .save-bar-actions,
  #section-leaderboards .save-bar-actions,
  #section-ocr .save-bar-actions,
  #section-pov .save-bar-actions,
  #section-sentinel .save-bar-actions,
  #section-ai-rules .save-bar-actions {
    flex-wrap: wrap;
    justify-content: stretch;
  }
  #section-welcome-goodbye .save-bar-actions .btn,
  #section-trauerbox .save-bar-actions .btn,
  #section-leaderboards .save-bar-actions .btn,
  #section-ocr .save-bar-actions .btn,
  #section-pov .save-bar-actions .btn,
  #section-sentinel .save-bar-actions .btn,
  #section-ai-rules .save-bar-actions .btn {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
  }

  #section-permissions-dashboard .dash-perm-role-panel-head {
    flex-direction: column;
    align-items: stretch;
  }
  #section-permissions-dashboard .dash-perm-role-panel-actions {
    width: 100%;
    justify-content: flex-end;
  }
  #section-permissions-dashboard .dash-perm-role-panel-actions .btn {
    flex: 1 1 auto;
  }
}

@media (max-width: 420px) {
  #section-ocr #ocr-report-detail.ui-overlay-primary {
    padding: 10px;
  }
  #section-pov .ui-tab-fill {
    flex: 1 1 100%;
  }
}

/* MODERATION dashboard sections - responsive (320px+) */
#section-registration,
#section-probezeit,
#section-rank-up,
#section-strikes,
#section-sanctions,
#section-blacklist,
#section-members,
#section-abmeldung,
#section-namechanges,
#section-moderation-payout,
#section-automod,
#section-mass-delete {
  --mod-touch-min: 44px;
}

#section-registration > .sub-nav,
#section-probezeit > .sub-nav,
#section-rank-up > .sub-nav,
#section-strikes > .sub-nav,
#section-sanctions > .sub-nav,
#section-blacklist > .sub-nav,
#section-abmeldung > .sub-nav,
#section-namechanges > .sub-nav,
#section-moderation-payout > .sub-nav,
#section-automod > .sub-nav,
#section-mass-delete > .sub-nav {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex-wrap: nowrap;
}

#section-registration > .sub-nav::-webkit-scrollbar,
#section-probezeit > .sub-nav::-webkit-scrollbar,
#section-rank-up > .sub-nav::-webkit-scrollbar,
#section-strikes > .sub-nav::-webkit-scrollbar,
#section-sanctions > .sub-nav::-webkit-scrollbar,
#section-blacklist > .sub-nav::-webkit-scrollbar,
#section-abmeldung > .sub-nav::-webkit-scrollbar,
#section-namechanges > .sub-nav::-webkit-scrollbar,
#section-moderation-payout > .sub-nav::-webkit-scrollbar,
#section-automod > .sub-nav::-webkit-scrollbar,
#section-mass-delete > .sub-nav::-webkit-scrollbar {
  display: none;
}

#section-registration > .sub-nav .sub-nav-btn,
#section-probezeit > .sub-nav .sub-nav-btn,
#section-rank-up > .sub-nav .sub-nav-btn,
#section-strikes > .sub-nav .sub-nav-btn,
#section-sanctions > .sub-nav .sub-nav-btn,
#section-blacklist > .sub-nav .sub-nav-btn,
#section-abmeldung > .sub-nav .sub-nav-btn,
#section-namechanges > .sub-nav .sub-nav-btn,
#section-moderation-payout > .sub-nav .sub-nav-btn,
#section-automod > .sub-nav .sub-nav-btn,
#section-mass-delete > .sub-nav .sub-nav-btn {
  flex: 0 0 auto;
  min-width: max-content;
  white-space: nowrap;
}

#section-members #member-detail-tabnav {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex-wrap: nowrap;
}

#section-members #member-detail-tabnav::-webkit-scrollbar {
  display: none;
}

#section-members #member-detail-tabnav .sub-nav-btn {
  flex: 0 0 auto;
  min-width: max-content;
  white-space: nowrap;
}

#section-registration .table-container,
#section-probezeit .table-container,
#section-rank-up .table-container,
#section-strikes .table-container,
#section-sanctions .table-container,
#section-blacklist .table-container,
#section-members .table-container,
#section-abmeldung .table-container,
#section-namechanges .table-container,
#section-moderation-payout .table-container,
#section-automod .table-container {
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}

#section-blacklist .members-unified-table-wrap {
  overflow-x: auto;
  overflow-y: visible;
}
#section-members .members-dc-list-wrap.members-unified-table-wrap,
#section-members .members-unified-table-wrap {
  overflow-x: hidden;
  overflow-y: auto;
}

#section-registration .table-container table { min-width: 640px; }
#section-probezeit .table-container table { min-width: 720px; }
#section-rank-up .table-container table { min-width: 720px; }
#section-strikes .table-container table { min-width: 760px; }
#section-sanctions .sanct-table-scroll .sanct-catalog-table { min-width: 680px; }

#section-sanctions .sanct-add-btn {
  width: 100%;
  min-height: 42px;
  padding: 10px 16px;
  font-size: 14px;
}

#section-sanctions .sanct-add-submit-label {
  visibility: hidden;
  font-size: 12px;
  line-height: 1.2;
}

#section-sanctions .sanct-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

#section-sanctions #sanctions-tab-history .content-card {
  min-width: 0;
  overflow: hidden;
}

#section-sanctions #sanctions-tab-history .card-toolbar {
  flex-wrap: wrap;
  gap: 10px;
}

#section-sanctions #sanctions-tab-history .log-filter-bar {
  width: 100%;
}

#section-sanctions #sanctions-tab-history .log-filter-group {
  flex: 1 1 160px;
  min-width: 0;
}

#section-sanctions #sanctions-tab-history .log-filter-group select {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

#section-sanctions .sanct-history-scroll {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

#section-sanctions .sanct-catalog-table {
  table-layout: fixed;
  width: 100%;
  min-width: 680px;
}

#section-sanctions .sanct-history-table {
  table-layout: fixed;
  width: 100%;
  min-width: 920px;
  border-collapse: separate;
  border-spacing: 0;
}

#section-sanctions .sanct-catalog-table thead th,
#section-sanctions .sanct-history-table thead th,
#section-sanctions .sanct-catalog-table tbody td.sanct-cell,
#section-sanctions .sanct-history-table tbody td.sanct-cell {
  text-align: center;
  vertical-align: middle;
}

#section-sanctions .sanct-catalog-table thead th:first-child,
#section-sanctions .sanct-catalog-table tbody td.sanct-cell:first-child {
  width: 28%;
  text-align: left;
}

#section-sanctions .sanct-catalog-table thead th:nth-child(2),
#section-sanctions .sanct-catalog-table tbody td.sanct-cell:nth-child(2) {
  width: 12%;
}

#section-sanctions .sanct-catalog-table thead th:nth-child(3),
#section-sanctions .sanct-catalog-table tbody td.sanct-cell:nth-child(3),
#section-sanctions .sanct-catalog-table thead th:nth-child(4),
#section-sanctions .sanct-catalog-table tbody td.sanct-cell:nth-child(4),
#section-sanctions .sanct-catalog-table thead th:nth-child(5),
#section-sanctions .sanct-catalog-table tbody td.sanct-cell:nth-child(5) {
  width: 12%;
}

#section-sanctions .sanct-catalog-table thead th:last-child,
#section-sanctions .sanct-catalog-table tbody td.sanct-actions-cell {
  width: 22%;
}

#section-sanctions .sanct-actions-cell .btn + .btn {
  margin-left: 6px;
}

#section-sanctions .sanct-amt {
  color: #ed4245;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

#section-sanctions .sanct-muted {
  color: var(--text-muted);
}

#section-sanctions .sanct-flag-yes {
  color: var(--yellow);
  font-weight: 600;
}

#section-sanctions .sanct-history-table .sanct-col-id { width: 5%; }
#section-sanctions .sanct-history-table .sanct-col-member { width: 16%; }
#section-sanctions .sanct-history-table .sanct-col-sanction { width: 14%; }
#section-sanctions .sanct-history-table .sanct-col-strikes { width: 7%; }
#section-sanctions .sanct-history-table .sanct-col-reason { width: 24%; }
#section-sanctions .sanct-history-table .sanct-col-by { width: 12%; }
#section-sanctions .sanct-history-table .sanct-col-date { width: 12%; }
#section-sanctions .sanct-history-table .sanct-col-action { width: 10%; }

#section-sanctions .sanct-history-table thead th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  font-weight: 600;
  background: var(--background-secondary);
  border-bottom: 1px solid var(--background-modifier-accent);
  white-space: nowrap;
}

#section-sanctions .sanct-history-table thead th,
#section-sanctions .sanct-history-table tbody td.sanct-cell {
  padding: 10px 8px;
}

#section-sanctions .sanct-history-table tbody td.sanct-cell-member,
#section-sanctions .sanct-history-table tbody td.sanct-cell-sanction,
#section-sanctions .sanct-history-table tbody td.sanct-cell-reason,
#section-sanctions .sanct-history-table thead th:nth-child(2),
#section-sanctions .sanct-history-table thead th:nth-child(3),
#section-sanctions .sanct-history-table thead th:nth-child(5) {
  text-align: left;
}

#section-sanctions .sanct-history-table tbody td.sanct-cell-reason {
  white-space: normal;
  word-break: break-word;
  line-height: 1.35;
}

#section-sanctions .sanct-history-table tbody td.sanct-cell-id,
#section-sanctions .sanct-history-table tbody td.sanct-cell-strikes,
#section-sanctions .sanct-history-table tbody td.sanct-cell-date,
#section-sanctions .sanct-history-table tbody td.sanct-cell-action {
  white-space: nowrap;
}

#section-sanctions .sanct-history-table tbody td.sanct-cell-action {
  text-align: center;
}

#section-sanctions .sanct-revoke-btn {
  min-height: var(--mod-touch-min, 32px);
  padding: 6px 12px;
  white-space: nowrap;
}

@media (max-width: 720px) {
  #section-sanctions .sanct-catalog-table {
    table-layout: auto;
    min-width: 560px;
    font-size: 12px;
  }

  #section-sanctions .sanct-catalog-table thead th,
  #section-sanctions .sanct-catalog-table tbody td.sanct-cell {
    padding: 8px 6px;
  }

  #section-sanctions .sanct-history-table {
    table-layout: auto;
    min-width: 880px;
    font-size: 12px;
  }

  #section-sanctions .sanct-history-table thead th,
  #section-sanctions .sanct-history-table tbody td.sanct-cell {
    padding: 8px 6px;
  }

  #section-sanctions .sanct-revoke-btn {
    min-height: var(--mod-touch-min, 44px);
    padding: 8px 14px;
  }
}
#section-blacklist .members-unified-table { min-width: 640px; }
#section-blacklist #bl-tab-list .bl-summary-table { min-width: 960px; }
#section-abmeldung .table-container table { min-width: 680px; }
#section-namechanges .table-container table { min-width: 640px; }
#section-moderation-payout #pay-tab-list .pay-summary-table { min-width: 920px; }
#section-automod .table-container table { min-width: 560px; }
#section-automod #automod-tab-violations .table-container table { min-width: 720px; }

#section-registration .card-toolbar,
#section-probezeit .card-toolbar,
#section-rank-up .card-toolbar,
#section-strikes .card-toolbar,
#section-sanctions .card-toolbar,
#section-blacklist .card-toolbar,
#section-members .card-toolbar,
#section-abmeldung .card-toolbar,
#section-namechanges .card-toolbar,
#section-moderation-payout .card-toolbar,
#section-automod .card-toolbar,
#section-mass-delete .card-toolbar {
  align-items: flex-start;
}

#section-sanctions .card-toolbar .ui-actions-inline,
#section-moderation-payout .card-toolbar .ui-actions-inline {
  flex-wrap: wrap;
  width: 100%;
  justify-content: flex-start;
}

#section-blacklist .card-toolbar .ui-actions-inline {
  flex-wrap: wrap;
  width: 100%;
  justify-content: flex-start;
}

#section-blacklist #bl-search {
  flex: 1 1 160px;
  min-width: 0;
  max-width: 100%;
}

#section-blacklist .ui-actions-inline-wrap {
  flex-direction: column;
  align-items: stretch;
}

#section-blacklist .ui-actions-inline-wrap > .content-card {
  min-width: 0;
  width: 100%;
}

#section-moderation-payout #pay-search {
  flex: 1 1 160px;
  min-width: 0;
  max-width: 100%;
}

#section-mass-delete .form-row .form-group[style*="width:160px"],
#section-mass-delete .form-row .md-bulk-count-group {
  width: 100% !important;
  max-width: 100%;
}

#section-mass-delete .md-bulk-count-group {
  flex: 0 0 220px;
  width: 220px;
  max-width: 100%;
}

#section-mass-delete .md-bulk-count-row {
  display: flex;
  align-items: stretch;
  gap: 6px;
}

#section-mass-delete .md-bulk-count-row input[type="number"] {
  flex: 1;
  min-width: 0;
}

#section-mass-delete .md-clear-all-btn {
  flex-shrink: 0;
  min-height: 38px;
  padding: 0 12px;
  border: none;
  border-radius: 3px;
  background: #4e5058;
  color: #dbdee1;
  font-family: "Inter", var(--font, system-ui), sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.286;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.1s ease, color 0.1s ease, box-shadow 0.1s ease;
}

#section-mass-delete .md-clear-all-btn:hover:not(:disabled) {
  background: #6d6f78;
  color: #fff;
}

#section-mass-delete .md-clear-all-btn.is-active {
  background: #5865f2;
  color: #fff;
  box-shadow: none;
}

#section-mass-delete .md-clear-all-btn.is-active:hover:not(:disabled) {
  background: #4752c4;
}

#section-mass-delete .md-clear-all-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

#section-mass-delete #md-bulk-count:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  background: #1e1f22;
  color: #6d6f78;
  border-color: #2b2d31;
}

#section-registration .embed-builder-row,
#section-rank-up .embed-builder-row,
#section-abmeldung .embed-builder-row,
#section-namechanges .embed-builder-row {
  min-width: 0;
}

#section-probezeit .stats-row[style*="repeat(4"] {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

@media (max-width: 900px) {
  #section-registration .embed-builder-row,
  #section-rank-up .embed-builder-row,
  #section-abmeldung .embed-builder-row,
  #section-namechanges .embed-builder-row {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  #section-registration .embed-preview-wrap,
  #section-rank-up .embed-preview-wrap,
  #section-abmeldung .embed-preview-wrap,
  #section-namechanges .embed-preview-wrap {
    width: 100%;
    max-width: 100%;
    position: static;
    top: auto;
  }

  #section-registration .ui-form-row-auto-3,
  #section-sanctions .ui-form-row-sanctions {
    grid-template-columns: 1fr 1fr;
  }

  #section-moderation-payout #pay-tab-list .pay-summary-table {
    table-layout: auto;
    min-width: 720px;
    font-size: 12px;
  }

  #section-moderation-payout #pay-tab-list .pay-summary-table thead th,
  #section-moderation-payout #pay-tab-list .pay-summary-table tbody td {
    padding: 8px 6px;
  }

  #section-moderation-payout #pay-tab-list .pay-total-amt {
    font-size: 13px;
  }

  #section-blacklist #bl-tab-list .bl-summary-table {
    table-layout: auto;
    min-width: 720px;
    font-size: 12px;
  }

  #section-blacklist #bl-tab-list .bl-summary-table thead th,
  #section-blacklist #bl-tab-list .bl-summary-table tbody td {
    padding: 8px 6px;
  }

  #section-blacklist #bl-tab-list .bl-member-sub {
    max-width: min(280px, 50vw);
  }

  #section-members .members-page-head {
    flex-wrap: wrap;
    gap: 12px;
  }

  #section-members .members-filter-row {
    flex-direction: column;
    align-items: stretch;
  }

  #section-members .members-filter-control,
  #section-members .members-filter-control select,
  #section-members .members-filter-control .cd-trigger {
    width: 100%;
    min-width: 0;
  }

  #section-members .members-results-head {
    flex-wrap: wrap;
    padding-left: 16px;
    padding-right: 16px;
  }

  #section-members .members-dc-row {
    padding: 8px 10px;
    gap: 10px;
  }
  #section-members .members-dc-end .members-status-badge {
    max-width: 88px;
    font-size: 11px;
    padding: 2px 6px;
  }

  #section-blacklist .members-unified-table thead th,
  #section-blacklist .members-unified-table tbody td {
    padding-left: 14px;
    padding-right: 14px;
  }

  #section-blacklist .bl-member-sub {
    max-width: min(360px, 55vw);
  }

  #section-sanctions .log-filter-group select {
    width: 100%;
    min-width: 0;
  }

  #section-sanctions .sanct-history-table {
    min-width: 800px;
  }
}

@media (max-width: 600px) {
  #section-registration,
  #section-probezeit,
  #section-rank-up,
  #section-strikes,
  #section-sanctions,
  #section-blacklist,
  #section-members,
  #section-abmeldung,
  #section-namechanges,
  #section-moderation-payout,
  #section-automod,
  #section-mass-delete {
    padding: 12px;
  }

  #section-registration > .sub-nav .sub-nav-btn,
  #section-probezeit > .sub-nav .sub-nav-btn,
  #section-rank-up > .sub-nav .sub-nav-btn,
  #section-strikes > .sub-nav .sub-nav-btn,
  #section-sanctions > .sub-nav .sub-nav-btn,
  #section-blacklist > .sub-nav .sub-nav-btn,
  #section-abmeldung > .sub-nav .sub-nav-btn,
  #section-namechanges > .sub-nav .sub-nav-btn,
  #section-moderation-payout > .sub-nav .sub-nav-btn,
  #section-automod > .sub-nav .sub-nav-btn,
  #section-mass-delete > .sub-nav .sub-nav-btn,
  #section-members #member-detail-tabnav .sub-nav-btn {
    min-height: var(--mod-touch-min);
    padding-top: 10px;
    padding-bottom: 10px;
  }

  #section-probezeit .stats-row[style*="repeat(4"] {
    grid-template-columns: 1fr !important;
  }

  #section-registration .ui-form-row-auto-3,
  #section-sanctions .ui-form-row-sanctions,
  #section-registration .dc-form .form-row,
  #section-probezeit .dc-form .form-row,
  #section-rank-up .dc-form .form-row,
  #section-strikes .dc-form .form-row,
  #section-sanctions .dc-form .form-row,
  #section-blacklist .dc-form .form-row,
  #section-abmeldung .dc-form .form-row,
  #section-namechanges .dc-form .form-row,
  #section-moderation-payout .form-row,
  #section-mass-delete .dc-form .form-row {
    grid-template-columns: 1fr;
  }

  #section-members .members-page-title {
    font-size: 20px;
  }

  #section-members .members-detail-screen .ui-inline-md {
    flex-wrap: wrap;
    gap: 10px;
  }

  #section-members #member-detail-archive-btn {
    margin-left: 0;
    width: 100%;
  }

  #section-members .member-stats-grid {
    grid-template-columns: 1fr;
  }

  #section-blacklist .bl-actions-cell {
    flex-wrap: wrap;
    white-space: normal;
  }

  #section-blacklist .bl-col-reason {
    min-width: 180px;
  }

  #section-blacklist .card-toolbar .ui-actions-inline {
    flex-direction: column;
    align-items: stretch;
  }

  #section-blacklist .card-toolbar .ui-actions-inline .btn,
  #section-blacklist #bl-search {
    width: 100%;
  }

  #section-blacklist #bl-tab-list .bl-summary-scroll {
    overflow-x: visible;
    border: none;
  }

  #section-blacklist #bl-tab-list .bl-summary-table {
    min-width: 0;
    width: 100%;
    table-layout: fixed;
  }

  #section-blacklist #bl-tab-list .bl-summary-table thead {
    display: none;
  }

  #section-blacklist #bl-tab-list .bl-summary-table colgroup {
    display: none;
  }

  #section-blacklist #bl-tab-list .bl-summary-table tbody tr.bl-table-row {
    display: block;
    padding: 12px 14px;
    border-bottom: 1px solid var(--background-modifier-accent);
  }

  #section-blacklist #bl-tab-list .bl-summary-table tbody tr.bl-table-row:last-child {
    border-bottom: none;
  }

  #section-blacklist #bl-tab-list .bl-summary-table tbody tr.bl-table-row td {
    display: grid;
    grid-template-columns: minmax(72px, 34%) 1fr;
    align-items: center;
    gap: 4px 10px;
    padding: 5px 0;
    border-bottom: none;
    text-align: left !important;
  }

  #section-blacklist #bl-tab-list .bl-summary-table tbody tr.bl-table-row td[data-label]:not([data-label=""])::before {
    content: attr(data-label);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    line-height: 1.3;
  }

  #section-blacklist #bl-tab-list .bl-summary-table tbody tr.bl-table-row td.bl-player-cell {
    display: block;
    padding: 0 0 10px;
    border-bottom: 1px solid var(--background-modifier-accent);
    margin-bottom: 6px;
  }

  #section-blacklist #bl-tab-list .bl-summary-table tbody tr.bl-table-row td.bl-player-cell::before {
    display: none;
  }

  #section-blacklist #bl-tab-list .bl-summary-table tbody tr.bl-table-row td.bl-actions-cell {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start;
    padding-top: 10px;
    margin-top: 4px;
    border-top: 1px solid var(--background-modifier-accent);
  }

  #section-blacklist #bl-tab-list .bl-summary-table tbody tr.bl-table-row td.bl-actions-cell::before {
    display: none;
  }

  #section-blacklist #bl-tab-list .bl-member-cell {
    min-width: 0;
  }

  #section-blacklist #bl-tab-list .bl-member-sub {
    max-width: 100%;
    white-space: normal;
  }

  #section-blacklist #bl-tab-list .bl-reason-cell {
    align-items: start;
  }

  #section-blacklist #bl-tab-list .bl-status-cell .bl-status-badge {
    justify-self: start;
  }

  #section-moderation-payout .card-toolbar .ui-actions-inline {
    flex-direction: column;
    align-items: stretch;
  }

  #section-moderation-payout .card-toolbar .ui-actions-inline .btn,
  #section-moderation-payout #pay-search {
    width: 100%;
  }

  #section-sanctions .card-toolbar .ui-actions-inline .ui-select-compact {
    width: 100%;
    min-width: 0;
  }

  #section-rank-up #ru-modal-page > div:first-child,
  #section-abmeldung #abm-modal-page > div:first-child,
  #section-namechanges #nc-modal-page > div:first-child {
    flex-wrap: wrap;
  }

  #section-registration .save-bar,
  #section-probezeit .save-bar,
  #section-rank-up .save-bar,
  #section-strikes .save-bar,
  #section-abmeldung .save-bar,
  #section-namechanges .save-bar,
  #section-moderation-payout .save-bar {
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px;
  }

  #section-registration .save-bar-text,
  #section-probezeit .save-bar-text,
  #section-rank-up .save-bar-text,
  #section-strikes .save-bar-text,
  #section-abmeldung .save-bar-text,
  #section-namechanges .save-bar-text,
  #section-moderation-payout .save-bar-text {
    white-space: normal;
  }

  #section-registration .save-bar-actions,
  #section-probezeit .save-bar-actions,
  #section-rank-up .save-bar-actions,
  #section-strikes .save-bar-actions,
  #section-abmeldung .save-bar-actions,
  #section-namechanges .save-bar-actions,
  #section-moderation-payout .save-bar-actions {
    width: 100%;
    justify-content: stretch;
  }

  #section-registration .save-bar-actions .btn,
  #section-probezeit .save-bar-actions .btn,
  #section-rank-up .save-bar-actions .btn,
  #section-strikes .save-bar-actions .btn,
  #section-abmeldung .save-bar-actions .btn,
  #section-namechanges .save-bar-actions .btn,
  #section-moderation-payout .save-bar-actions .btn {
    flex: 1 1 auto;
    min-width: 0;
  }
}

@media (max-width: 400px) {
  #section-members .members-dc-row {
    padding: 8px;
    gap: 8px;
  }
  #section-members .members-dc-name { font-size: 13px; }
  #section-members .members-dc-sub { font-size: 11px; }

  #section-blacklist .members-unified-table thead th,
  #section-blacklist .members-unified-table tbody td {
    padding-left: 10px;
    padding-right: 10px;
    font-size: 12px;
  }

  #section-members .members-action-trigger,
  #section-blacklist .members-action-trigger {
    width: var(--mod-touch-min);
    height: var(--mod-touch-min);
  }

  #section-blacklist .bl-member-sub {
    max-width: 42vw;
  }

  #section-registration .discord-msg-preview {
    padding-right: 16px;
    padding-left: 12px;
  }
}

#permissions-dashboard-detail,
#permissions-discord-detail {
  min-height: 420px;
}
.permissions-matrix-shell {
  min-height: 420px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Discord Server Settings — Berechtigungen (scoped to .discord-perm-editor)
   ═══════════════════════════════════════════════════════════════════════════ */

.discord-perm-editor {
  --discord-bg-primary: #313338;
  --discord-bg-secondary: #2b2d31;
  --discord-bg-tertiary: #1e1f22;
  --discord-bg-elevated: #383a40;
  --discord-text-normal: #dbdee1;
  --discord-text-muted: #949ba4;
  --discord-text-header: #f2f3f5;
  --discord-blurple: #5865f2;
  --discord-green: #23a559;
  --discord-divider: rgba(78, 80, 88, 0.48);
  border: none;
  border-radius: 8px;
  box-shadow: 0 1px 0 rgba(4, 4, 5, 0.2), 0 1.5px 0 rgba(6, 6, 7, 0.05), 0 2px 0 rgba(4, 4, 5, 0.05);
  min-height: 520px;
}

.discord-perm-editor .dash-perm-roles-sidebar {
  background: var(--discord-bg-secondary);
  border-right: 1px solid var(--discord-divider);
  width: 220px;
}

.discord-perm-editor .dash-perm-roles-sidebar-head {
  padding: 16px 12px 10px;
  border-bottom: none;
}

.discord-perm-editor .dash-perm-sidebar-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--discord-text-muted);
  margin-bottom: 8px;
}

.discord-perm-editor .dash-perm-roles-list {
  padding: 0 8px 12px;
}

.discord-perm-editor .dash-perm-role-item {
  padding: 6px 8px;
  margin-bottom: 2px;
  border-radius: 4px;
  font-size: 15px;
  font-weight: 500;
  color: var(--discord-text-muted);
}

.discord-perm-editor .dash-perm-role-item:hover:not(:disabled) {
  background: var(--discord-bg-elevated);
  color: var(--discord-text-normal);
}

.discord-perm-editor .dash-perm-role-item.is-selected {
  background: var(--discord-bg-elevated);
  color: var(--discord-text-header);
}

.discord-perm-editor .dash-perm-role-item:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.discord-perm-editor .dash-perm-role-name {
  font-size: 15px;
}

.discord-perm-editor .perm-subnav-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--discord-text-muted);
  background: var(--discord-bg-tertiary);
  padding: 2px 6px;
  border-radius: 8px;
  min-width: 1.5em;
  text-align: center;
}

.discord-perm-editor .dash-perm-role-item.is-selected .perm-subnav-count {
  color: var(--discord-text-normal);
  background: rgba(0, 0, 0, 0.25);
}

.discord-perm-editor .dash-perm-role-panel {
  background: var(--discord-bg-primary);
}

.discord-perm-editor .discord-perm-panel-head {
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--discord-divider);
  background: var(--discord-bg-primary);
}

.discord-perm-editor .discord-perm-panel-heading h3 {
  margin: 0 0 4px;
  font-size: 20px;
  font-weight: 600;
  color: var(--discord-text-header);
  line-height: 1.25;
}

.discord-perm-editor .discord-perm-panel-desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--discord-text-muted);
  max-width: 52em;
}

.discord-perm-editor .discord-perm-panel-desc-secondary {
  margin-top: 8px;
}

.discord-perm-editor .dash-perm-role-panel-body {
  padding: 16px 24px 32px;
  background: var(--discord-bg-primary);
}

.discord-perm-editor .discord-perm-search-wrap {
  position: relative;
  margin-bottom: 20px;
}

.discord-perm-editor .discord-perm-search {
  width: 100%;
  padding: 10px 12px 10px 36px;
  font-size: 14px;
  font-weight: 500;
  color: var(--discord-text-normal);
  background: var(--discord-bg-tertiary);
  border: none;
  border-radius: 4px;
  outline: none;
  transition: box-shadow 0.15s ease;
}

.discord-perm-editor .discord-perm-search::placeholder {
  color: var(--discord-text-muted);
}

.discord-perm-editor .discord-perm-search:focus {
  box-shadow: 0 0 0 2px var(--discord-blurple);
}

.discord-perm-editor .discord-perm-search-wrap::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  opacity: 0.55;
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23949ba4' viewBox='0 0 24 24'%3E%3Cpath d='M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z'/%3E%3C/svg%3E");
  pointer-events: none;
}

/* Module category — flat Discord settings sections */
.discord-perm-editor .discord-perm-category {
  margin-bottom: 24px;
}

.discord-perm-editor .discord-perm-category:last-child {
  margin-bottom: 8px;
}

.discord-perm-editor .discord-perm-category-header {
  padding: 0 0 8px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--discord-divider);
}

.discord-perm-editor .discord-perm-category-header h2 {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--discord-text-muted);
}

.discord-perm-editor .discord-perm-category-body {
  background: var(--discord-bg-secondary);
  border-radius: 8px;
  overflow: hidden;
}

/* Override heavy card style inside discord editor */
.discord-perm-editor .dash-perm-perm-group {
  margin: 0;
  border: none;
  border-radius: 0;
  background: transparent;
}

.discord-perm-editor .dash-perm-perm-group + .dash-perm-perm-group {
  margin-top: 24px;
}

.discord-perm-editor .dash-perm-perm-group-head {
  padding: 0 0 8px;
  border-bottom: 1px solid var(--discord-divider);
  margin-bottom: 4px;
}

.discord-perm-editor .dash-perm-perm-group-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--discord-text-muted);
}

.discord-perm-editor .dash-perm-perm-group-body {
  border: none;
  padding: 0;
  background: var(--discord-bg-secondary);
  border-radius: 8px;
  overflow: hidden;
}

/* Single permission row — Discord role override style */
.discord-perm-editor .discord-perm-setting-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(200px, 280px);
  gap: 16px 24px;
  align-items: start;
  padding: 16px 16px;
  border-bottom: 1px solid var(--discord-divider);
  transition: background 0.1s ease;
}

.discord-perm-editor .discord-perm-setting-row:last-child {
  border-bottom: none;
}

.discord-perm-editor .discord-perm-setting-row:hover {
  background: rgba(79, 84, 92, 0.16);
}

.discord-perm-editor .discord-perm-setting-name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 500;
  color: var(--discord-text-header);
  line-height: 1.3;
}

.discord-perm-editor .discord-perm-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.2;
}

.discord-perm-editor .discord-perm-pill--button {
  background: rgba(35, 165, 89, 0.15);
  color: #3ba55c;
}

.discord-perm-editor .discord-perm-pill--text {
  background: rgba(88, 101, 242, 0.18);
  color: #949cf0;
}

.discord-perm-editor .discord-perm-pill--vc {
  background: rgba(35, 165, 89, 0.12);
  color: #57f287;
}

.discord-perm-editor .discord-perm-pill--action {
  background: rgba(148, 155, 164, 0.15);
  color: var(--discord-text-muted);
}

.discord-perm-editor .discord-perm-setting-meta {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.35;
  color: var(--discord-text-muted);
  font-family: var(--font-mono, "JetBrains Mono", monospace);
}

.discord-perm-editor .perm-custom-ids-details {
  margin-top: 8px;
}

.discord-perm-editor .perm-custom-ids-summary {
  font-size: 13px;
  font-weight: 500;
  color: var(--discord-blurple);
  cursor: pointer;
  list-style: none;
}

.discord-perm-editor .perm-custom-ids-summary::-webkit-details-marker {
  display: none;
}

.discord-perm-editor .perm-custom-ids-summary:hover {
  text-decoration: underline;
}

.discord-perm-editor .discord-perm-setting-controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.discord-perm-editor .discord-perm-field-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--discord-text-muted);
  margin-bottom: -4px;
}

.discord-perm-editor .tag-picker {
  width: 100%;
}

.discord-perm-editor .tag-picker-tags {
  min-height: 40px;
  padding: 6px 28px 6px 10px;
  background: var(--discord-bg-tertiary);
  border: 1px solid transparent;
  border-radius: 4px;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.discord-perm-editor .tag-picker-tags:hover,
.discord-perm-editor .tag-picker-tags.open,
.discord-perm-editor .tag-picker-tags:focus-within {
  border-color: var(--discord-blurple);
  background: var(--discord-bg-tertiary);
  box-shadow: none;
}

.discord-perm-editor .tag-picker-placeholder {
  color: var(--discord-text-muted);
  font-size: 14px;
}

.discord-perm-editor .tag-picker-tag {
  background: var(--discord-bg-elevated);
  border: none;
  color: var(--discord-text-header);
  font-size: 13px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 4px;
}

.discord-perm-editor .tag-picker-tag .tag-x {
  opacity: 0.7;
}

.discord-perm-editor .tag-picker-tag .tag-x:hover {
  opacity: 1;
  color: #f23f43;
}

.discord-perm-editor .tag-picker-dropdown {
  background: var(--discord-bg-secondary);
  border: 1px solid var(--discord-divider);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.discord-perm-editor .tag-picker-opt {
  font-size: 14px;
  color: var(--discord-text-normal);
  padding: 8px 12px;
  border-radius: 4px;
  margin: 2px 4px;
}

.discord-perm-editor .tag-picker-opt:hover,
.discord-perm-editor .tag-picker-opt.selected {
  background: var(--discord-blurple);
  color: #fff;
}

.discord-perm-editor .tag-picker-search-input {
  background: var(--discord-bg-tertiary);
  color: var(--discord-text-normal);
  border-radius: 4px;
}

.discord-perm-editor .empty-state {
  color: var(--discord-text-muted);
  font-size: 15px;
  text-align: center;
  padding: 48px 24px !important;
}

/* Permissions floating save bar — match Dashboard Berechtigungen */
#section-permissions-discord .save-bar.save-bar-permissions,
#section-permissions-dashboard .save-bar.save-bar-permissions,
#permissions-discord-detail .save-bar.save-bar-permissions,
#perm-discord-save-bar,
#perm-dash-save-bar {
  background: #1f2023;
  border: 1px solid var(--border-strong, rgba(255, 255, 255, 0.08));
  border-radius: 16px;
  box-shadow: var(--floating-shadow, 0 8px 24px rgba(0, 0, 0, 0.4));
  padding: 16px;
  margin-top: 16px;
  width: min(820px, 100%);
}

#section-permissions-discord .save-bar.save-bar-permissions .save-bar-text,
#section-permissions-dashboard .save-bar.save-bar-permissions .save-bar-text,
#perm-discord-save-bar .save-bar-text,
#perm-dash-save-bar .save-bar-text {
  color: #fff;
  font-size: 14px;
  font-weight: 500;
}

#section-permissions-discord .save-bar.save-bar-permissions .save-bar-actions .btn,
#section-permissions-dashboard .save-bar.save-bar-permissions .save-bar-actions .btn,
#perm-discord-save-bar .save-bar-actions .btn,
#perm-dash-save-bar .save-bar-actions .btn {
  min-width: 112px;
}

#section-permissions-discord {
  padding-bottom: 24px;
}

@media (max-width: 900px) {
  .discord-perm-editor .discord-perm-setting-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .discord-perm-editor {
    grid-template-columns: 1fr;
  }

  .discord-perm-editor .dash-perm-roles-sidebar {
    max-height: 200px;
    width: auto;
  }
}

/* Permissions sections — avoid flat gray empty canvas */
#section-permissions-discord,
#section-permissions-dashboard {
  background: transparent;
}
#section-permissions-discord {
  padding-bottom: 80px;
}

.permissions-matrix-shell .dash-perm-role-editor.discord-perm-editor {
  min-height: 520px;
}

.discord-perm-editor .dash-perm-toggle-label {
  color: var(--discord-text-header, #f2f3f5);
  font-size: 15px;
}

.discord-perm-editor .dash-perm-toggle-hint {
  color: var(--discord-text-muted, #949ba4);
}

.discord-perm-editor .dash-perm-perm-group {
  margin-bottom: 16px;
  border: none;
  border-radius: 8px;
  background: var(--discord-bg-secondary, #2b2d31);
  overflow: hidden;
}

.discord-perm-editor .dash-perm-perm-group-head-static {
  padding: 12px 16px 8px;
  border-bottom: 1px solid var(--discord-divider, rgba(78, 80, 88, 0.48));
}

.discord-perm-editor .dash-perm-perm-group-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--discord-text-muted, #949ba4);
}

.discord-perm-editor .dash-perm-perm-group-body {
  padding: 0;
  background: transparent;
}

.discord-perm-editor .dash-perm-toggle-row {
  padding: 14px 16px;
}

.discord-perm-editor .dash-perm-modules-search {
  padding: 10px 12px 10px 36px;
  font-size: 14px;
  color: var(--discord-text-normal, #dbdee1);
  background: var(--discord-bg-tertiary, #1e1f22);
  border: none;
  border-radius: 4px;
}

.discord-perm-editor .dash-perm-modules-toolbar {
  position: relative;
  margin-bottom: 20px;
}

.discord-perm-editor .dash-perm-modules-toolbar::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  opacity: 0.55;
  pointer-events: none;
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23949ba4' viewBox='0 0 24 24'%3E%3Cpath d='M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z'/%3E%3C/svg%3E");
}

#section-permissions-discord .save-bar.save-bar-permissions,
#section-permissions-dashboard .save-bar.save-bar-permissions,
#perm-discord-save-bar,
#perm-dash-save-bar {
  position: sticky;
  bottom: 16px;
  z-index: 100;
}

/* Permissions UI — no hover/focus frame glow (Discord + Dashboard) */
#section-permissions-discord .discord-perm-editor .discord-perm-setting-row:hover,
#permissions-discord-detail .discord-perm-editor .discord-perm-setting-row:hover,
.discord-perm-editor .discord-perm-setting-row:hover,
.discord-perm-editor .dash-perm-role-item:hover:not(:disabled),
.discord-perm-editor .dash-perm-toggle-row:hover:not(.is-disabled),
#section-permissions-dashboard .dash-perm-role-editor .dash-perm-toggle-row:hover:not(.is-disabled),
#section-permissions-dashboard .dash-perm-role-editor .dash-perm-role-item:hover {
  background: transparent !important;
}

.discord-perm-editor .discord-perm-search:focus,
.discord-perm-editor .dash-perm-modules-search:focus,
.discord-perm-editor .dash-perm-roles-search:focus {
  box-shadow: none !important;
  outline: none !important;
}

.discord-perm-editor .tag-picker-tags:hover,
.discord-perm-editor .tag-picker-tags:focus-within,
.discord-perm-editor .tag-picker-tags.open,
#section-permissions-discord .discord-perm-editor .tag-picker-tags:hover,
#section-permissions-discord .discord-perm-editor .tag-picker-tags:focus-within,
#section-permissions-discord .discord-perm-editor .tag-picker-tags.open,
#permissions-discord-detail .discord-perm-editor .tag-picker-tags:hover,
#permissions-discord-detail .discord-perm-editor .tag-picker-tags:focus-within,
#permissions-discord-detail .discord-perm-editor .tag-picker-tags.open {
  border-color: transparent !important;
  box-shadow: none !important;
  background: var(--discord-bg-tertiary, #1e1f22) !important;
}

.discord-perm-editor .tag-picker-tag:hover,
.discord-perm-editor .tag-picker-opt:hover,
.discord-perm-editor .tag-picker-opt.selected {
  background: var(--discord-bg-elevated, #383a40) !important;
  color: var(--discord-text-header, #f2f3f5) !important;
}

#permissions-dashboard-detail .permissions-matrix-shell,
#permissions-dashboard-detail .dash-perm-role-editor {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  min-height: min(480px, calc(100vh - 128px));
}

#permissions-dashboard-detail:not(:empty)::before,
#permissions-discord-detail:not(:empty)::before {
  content: none !important;
  display: none !important;
}