/* ── Design tokens ────────────────────────────────────────────
   Redesign 2026: darker, bluer base with hairline borders that
   carry a slight violet tint instead of flat white alpha. Token
   NAMES and their meaning are unchanged, so every existing page
   (dxBinder included) picks up the new look without markup edits. */
:root {
  --bg: #0a0b13;
  --page-bg:
    radial-gradient(900px 500px at 12% -6%, rgba(59, 130, 246, 0.16), transparent 60%),
    radial-gradient(700px 480px at 92% 8%, rgba(91, 110, 245, 0.12), transparent 60%),
    radial-gradient(1000px 700px at 50% 115%, rgba(59, 130, 246, 0.07), transparent 60%),
    #0a0b13;
  --panel: rgba(255, 255, 255, 0.05);
  --panel-2: rgba(255, 255, 255, 0.08);
  --border: rgba(150, 155, 200, 0.14);
  --border-2: rgba(150, 155, 200, 0.24);
  --text: #eef0f8;
  --muted: #9195b0;
  --muted-2: #5c6080;
  --shadow: 0 20px 80px rgba(0, 0, 0, 0.6);
  --ring: rgba(59, 130, 246, 0.30);
  --brand-1: #3b82f6;
  --brand-2: #5b6ef5;
  --brand-soft: rgba(59, 130, 246, 0.14);
  --surface: #12141f;
  --surface-2: #171a2a;
  --surface-3: #1d2033;
  --live: #34d399;
  --live-soft: rgba(52, 211, 153, 0.13);
  --radius: 16px;
  --glow-1: rgba(59, 130, 246, 0.25);
  --glow-2: rgba(59, 130, 246, 0.10);
  --topbar-h: 60px;
  --font-display: 'Sora', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Manrope', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Consolas', 'Courier New', monospace;
}

[data-theme="light"] {
  --bg: #f8f9fc;
  --page-bg:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(59, 130, 246, 0.12), transparent),
    radial-gradient(ellipse 60% 40% at 100% 0%, rgba(37, 99, 235, 0.06), transparent),
    radial-gradient(ellipse 50% 30% at 0% 100%, rgba(59, 130, 246, 0.04), transparent),
    linear-gradient(180deg, #ffffff 0%, #f8f9fc 100%);
  --panel: rgba(0, 0, 0, 0.03);
  --panel-2: rgba(0, 0, 0, 0.05);
  --border: rgba(0, 0, 0, 0.08);
  --border-2: rgba(0, 0, 0, 0.14);
  --text: rgba(0, 0, 0, 0.88);
  --muted: rgba(0, 0, 0, 0.55);
  --muted-2: rgba(0, 0, 0, 0.40);
  --surface: #ffffff;
  --surface-2: #f4f5fa;
  --surface-3: #eceef6;
  --live: #0f9f6e;
  --live-soft: rgba(15, 159, 110, 0.12);
}

[data-theme="light"] .sh-shell .hero::before {
  background:
    linear-gradient(180deg, rgba(248, 249, 252, 0.85) 0%, rgba(248, 249, 252, 0.7) 50%, rgba(248, 249, 252, 0.9) 100%),
    radial-gradient(ellipse at top, rgba(59, 130, 246, 0.08), transparent 60%);
}

* { box-sizing: border-box; }
html, body { height: 100%; }

select {
  background-color: rgba(28, 32, 42, 0.9);
  color: var(--text);
}

select option {
  background-color: rgba(28, 32, 42, 1);
  color: var(--text);
}

[data-theme="light"] select {
  background-color: rgba(255, 255, 255, 1);
  color: var(--text);
}

[data-theme="light"] select option {
  background-color: rgba(255, 255, 255, 1);
  color: var(--text);
}

html {
  overflow-x: clip;
  background: var(--page-bg);
  background-attachment: fixed;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
}

::-webkit-scrollbar {
  width: 6px;
}

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

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.22);
}

body {
  margin: 0;
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  background: transparent;
  color: var(--text);
  line-height: 1.55;
  min-height: 100vh;
  overflow-x: clip;
  /* .topbar is now `position: fixed` (see there for why), which takes it
     out of normal flow — this reserves the space it used to occupy so
     page content doesn't jump up underneath it. */
  padding-top: var(--topbar-h);
}

/* Faint technical grid over the page glow. Masked so it fades out
   below the fold — present enough to read as "technical", never as
   a full-page cyberpunk lattice. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(150, 155, 200, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(150, 155, 200, 0.05) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, black 30%, transparent 100%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, black 30%, transparent 100%);
  opacity: 0.5;
  pointer-events: none;
  z-index: -1;
}

[data-theme="light"] body::before {
  background-image:
    linear-gradient(rgba(60, 65, 110, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(60, 65, 110, 0.05) 1px, transparent 1px);
}

body::after { content: none; }

a { color: inherit; text-decoration: none; }

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid transparent;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15);
  border-radius: 12px;
}

.container {
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 40px;
}

@media (max-width: 720px) {
  .container { padding: 0 20px; }
}

.sh-shell .container {
  width: min(1640px, calc(100% - 16px));
  max-width: none;
}

.sh-shell .hero {
  padding-top: 0;
  background: var(--page-bg);
  min-height: calc(100vh - var(--topbar-h));
  position: relative;
}

.sh-shell .hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(12, 14, 20, 0.3) 0%, rgba(12, 14, 20, 0.15) 50%, rgba(12, 14, 20, 0.35) 100%),
    radial-gradient(ellipse at top, rgba(59, 130, 246, 0.05), transparent 60%);
  z-index: 0;
  pointer-events: none;
  display: none;
}

.sh-shell .hero .container {
  position: relative;
  z-index: 1;
}

.topbar .container {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0 24px;
}

.topbar-inner {
  margin: 0;
}

.topbar {
  /* `sticky` never actually stuck here — html/body both set overflow-x:
     clip (needed to stop decorative glow elements from causing horizontal
     scroll), which breaks position:sticky for descendants. Using `fixed`
     instead, unconditionally, per explicit request that the header must
     stay put no matter where you scroll — see body's padding-top below,
     which reserves the space this no longer occupies in normal flow. */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  background: transparent;
  border-bottom: 1px solid var(--border);
  transition: transform 220ms ease;
  will-change: transform;
}

[data-theme="light"] .topbar {
  background: transparent;
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

html.topbar-hidden .topbar {
  transform: translateY(-110%);
}

/* Frosted background once scrolled — see site.js for why this exists now
   that .topbar is fixed instead of sticky. */
html.topbar-scrolled .topbar {
  background: rgba(12, 14, 20, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

html[data-theme="light"].topbar-scrolled .topbar {
  background: rgba(248, 249, 252, 0.75);
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

.topbar-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
}

.topbar-inner > nav {
  display: flex;
  justify-content: flex-end;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-self: start;
}

.logo {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  box-shadow: 0 12px 30px rgba(59, 130, 246, 0.16);
}

.brand-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.brand-title strong {
  font-size: 16px;
  letter-spacing: 0.2px;
}

.brand-title span {
  font-size: 12px;
  color: var(--muted);
}

/* dxBinder Dashboard Brand */
.brand-dxbinder {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  transition: background 0.2s ease;
}

.brand-dxbinder:hover {
  background: none;
}

.brand-banner {
  height: 26px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
}

.brand-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.brand-name {
  font-family: 'Sora', ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.2px;
  line-height: 1.2;
}

.brand-sub {
  font-size: 9px;
  font-weight: 600;
  color: var(--brand-1);
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: 0.8;
}

@media (max-width: 480px) {
  .brand-banner {
    height: 24px;
  }

  .brand-name {
    font-size: 12px;
  }

  .brand-sub {
    font-size: 8px;
  }

  .brand-dxbinder {
    margin-left: 0;
    gap: 6px;
    padding: 4px 6px;
  }
}

.nav {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap;
  justify-content: flex-end;
  justify-self: end;
}

.nav a {
  font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
  font-size: 13.5px;
  padding: 8px 12px;
  border-radius: 10px;
  color: var(--muted);
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}

.nav-dd {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.nav-dd-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  padding: 8px 12px;
  border-radius: 10px;
  color: var(--muted);
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
  line-height: 1;
  -webkit-appearance: none;
  appearance: none;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}

.nav-dd-trigger:hover {
  color: var(--text);
  background: var(--panel);
  border-color: var(--border);
}

.nav-caret {
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.8;
  transition: transform 160ms ease, opacity 160ms ease;
}

.nav-caret svg { width: 14px; height: 14px; display: block; }

/* ========== DROPDOWN MENU ========== */
.nav-dd-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) scaleY(0.95);
  min-width: 160px;
  width: max-content;
  max-width: 220px;
  border-radius: 14px;
  border: 1px solid rgba(59, 130, 246, 0.15);
  background: linear-gradient(135deg, rgba(20, 24, 36, 0.95) 0%, rgba(15, 18, 28, 0.98) 100%);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), 0 0 40px rgba(59, 130, 246, 0.1);
  padding: 14px 6px 6px 6px;
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms cubic-bezier(0.16, 1, 0.3, 1), transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
  transform-origin: top center;
  backdrop-filter: blur(12px);
}

.nav-dd.open .nav-dd-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) scaleY(1);
}

.actions .nav-dd-menu {
  left: auto;
  right: 0;
  transform: scaleY(0.95);
}

.actions .nav-dd.open .nav-dd-menu {
  transform: scaleY(1);
}

[data-theme="light"] .nav-dd-menu {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 249, 252, 0.99) 100%);
  border-color: rgba(59, 130, 246, 0.1);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 0 40px rgba(59, 130, 246, 0.08);
}

.nav-dd-menu::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 12px;
  height: 12px;
  background: linear-gradient(135deg, rgba(20, 24, 36, 0.95), rgba(15, 18, 28, 0.98));
  border-left: 1px solid rgba(59, 130, 246, 0.15);
  border-top: 1px solid rgba(59, 130, 246, 0.15);
  backdrop-filter: blur(12px);
  z-index: 1;
}

[data-theme="light"] .nav-dd-menu::before {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 249, 252, 0.99));
  border-color: rgba(59, 130, 246, 0.1);
}

.nav-dd-separator {
  height: 1px;
  background: rgba(59, 130, 246, 0.12);
  margin: 6px 8px;
}

.nav-dd-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--muted-2);
  padding: 12px 12px 6px;
  margin-bottom: 2px;
  border-bottom: 1px solid rgba(59, 130, 246, 0.1);
}

.nav-dd-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--text);
  width: 100%;
  transition: all 150ms cubic-bezier(0.16, 1, 0.3, 1);
  font-size: 13px;
  font-weight: 500;
  position: relative;
  overflow: hidden;
}

.nav-dd-item::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(59, 130, 246, 0) 100%);
  opacity: 0;
  transition: opacity 150ms ease;
}

.nav-dd-item i {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 14px;
  flex-shrink: 0;
  text-align: center;
  background: rgba(59, 130, 246, 0.08);
  border-radius: 8px;
  transition: all 150ms cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-dd-item span {
  display: inline-block;
  position: relative;
  z-index: 1;
}

.nav-dd-item:hover {
  background: rgba(59, 130, 246, 0.12);
  transform: translateX(4px);
}

.nav-dd-item:hover::before {
  opacity: 1;
}

.nav-dd-item:hover i {
  background: rgba(59, 130, 246, 0.25);
  color: #a89eff;
  transform: scale(1.1);
}

[data-theme="light"] .nav-dd-item:hover {
  background: rgba(59, 130, 246, 0.08);
}

[data-theme="light"] .nav-dd-item i {
  background: rgba(59, 130, 246, 0.1);
}

[data-theme="light"] .nav-dd-item:hover i {
  background: rgba(59, 130, 246, 0.2);
}

.nav-dd-submenu {
  position: relative;
}

.nav-dd-submenu-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: none;
  color: var(--text);
  width: 100%;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  transition: all 150ms cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.nav-dd-submenu-trigger::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(59, 130, 246, 0) 100%);
  opacity: 0;
  transition: opacity 150ms ease;
}

.nav-dd-submenu-trigger > span:first-of-type {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  position: relative;
  z-index: 1;
}

.nav-dd-submenu-trigger i {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(59, 130, 246, 0.08);
  color: var(--muted);
  font-size: 14px;
  flex-shrink: 0;
  transition: all 150ms cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-dd-submenu-trigger:hover {
  background: rgba(59, 130, 246, 0.12);
  transform: translateX(4px);
}

.nav-dd-submenu-trigger:hover::before {
  opacity: 1;
}

.nav-dd-submenu-trigger:hover i {
  background: rgba(59, 130, 246, 0.25);
  color: #a89eff;
  transform: scale(1.1);
}

[data-theme="light"] .nav-dd-submenu-trigger i {
  background: rgba(59, 130, 246, 0.1);
}

[data-theme="light"] .nav-dd-submenu-trigger:hover {
  background: rgba(59, 130, 246, 0.08);
}

[data-theme="light"] .nav-dd-submenu-trigger:hover i {
  background: rgba(59, 130, 246, 0.2);
}

.nav-dd-submenu-caret {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.5;
  transition: transform 200ms ease, opacity 200ms ease;
}

.nav-dd-submenu-caret svg {
  width: 16px;
  height: 16px;
  display: block;
}

.nav-dd-submenu.is-open .nav-dd-submenu-caret {
  transform: rotate(180deg);
  opacity: 1;
}

.nav-dd-submenu-items {
  max-height: 0;
  overflow: hidden;
  flex-direction: column;
  gap: 2px;
  padding-left: 8px;
  margin-top: 0;
  padding-top: 0;
  opacity: 0;
  transition: max-height 250ms ease, opacity 200ms ease, padding-top 200ms ease, margin-top 200ms ease;
}

.nav-dd-submenu.is-open .nav-dd-submenu-items {
  max-height: 500px;
  opacity: 1;
  padding-top: 4px;
  margin-top: 4px;
}

.nav-dd-submenu-items .nav-dd-item {
  padding: 8px 12px;
  font-size: 13px;
  border-radius: 8px;
}

.nav-dd-submenu-items .nav-dd-item i {
  width: 24px;
  height: 24px;
  font-size: 11px;
  border-radius: 6px;
}

/* Mobile: Submenu-Items immer sichtbar wenn geöffnet */
@media (max-width: 768px) {
  .nav-dd-submenu.is-open .nav-dd-submenu-items {
    max-height: none !important;
    overflow: visible !important;
  }
}

.nav-dd:focus-within .nav-dd-menu,
.nav-dd:hover .nav-dd-menu {
  display: flex;
}

.nav-dd.open .nav-dd-menu {
  display: flex !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateX(-50%) scaleY(1) !important;
}

.nav-dd::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 8px;
  z-index: 101;
  pointer-events: auto;
  background: transparent;
}

/* Sicherstellen, dass das Menü auch bei Hover über die Lücke sichtbar bleibt */
.nav-dd:hover .nav-dd-menu,
.nav-dd.open .nav-dd-menu {
  pointer-events: auto;
}

.nav-dd:focus-within .nav-caret,
.nav-dd:hover .nav-caret {
  transform: rotate(180deg);
  opacity: 1;
}

.nav-dd.open .nav-caret {
  transform: rotate(180deg);
  opacity: 1;
}

.nav-icon {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
  opacity: 0.92;
}

.nav-icon svg {
  width: 16px;
  height: 16px;
  display: block;
}

.nav a:hover {
  color: var(--text);
  background: var(--panel);
  border-color: var(--border);
}

.actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  justify-self: end;
}

.support-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, #5865F2 0%, #4752C4 100%);
  border-radius: 12px;
  text-decoration: none;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(88, 101, 242, 0.3);
}

.support-btn:hover {
  background: linear-gradient(135deg, #6973F5 0%, #5865F2 100%);
  box-shadow: 0 4px 12px rgba(88, 101, 242, 0.4);
  transform: translateY(-1px);
}

.support-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(88, 101, 242, 0.3);
}

.support-btn i {
  font-size: 14px;
}

/* Mobile Menu Toggle Button */
.mobile-menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 12px;
  cursor: pointer;
  color: var(--text);
  transition: background 150ms ease, border-color 150ms ease;
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  z-index: 30;
  flex-shrink: 0;
}

.mobile-menu-toggle:hover {
  background: var(--panel);
  border-color: var(--border);
}

.mobile-menu-icon {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 20px;
  height: 16px;
  position: relative;
}

.mobile-menu-icon span {
  display: block;
  width: 100%;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 250ms ease, opacity 250ms ease;
}

.mobile-menu-toggle[aria-expanded="true"] .mobile-menu-icon span:nth-child(1) {
  transform: rotate(45deg) translate(7px, 7px);
}

.mobile-menu-toggle[aria-expanded="true"] .mobile-menu-icon span:nth-child(2) {
  opacity: 0;
}

.mobile-menu-toggle[aria-expanded="true"] .mobile-menu-icon span:nth-child(3) {
  transform: rotate(-45deg) translate(7px, -7px);
}

/* Mobile Menu Overlay */
.mobile-menu-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 98;
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

@media (max-width: 768px) {
  .mobile-menu-overlay {
    display: block;
  }
}

.mobile-menu-overlay.active {
  opacity: 1;
  pointer-events: none !important;
}

/* Overlay blockiert nicht die Navigation - Navigation liegt darüber */
@media (max-width: 768px) {
  .mobile-menu-overlay.active {
    z-index: 98;
    pointer-events: none !important;
    opacity: 0 !important;
    background: transparent !important;
  }

  .nav.mobile-open {
    pointer-events: auto !important;
    z-index: 100 !important;
    position: fixed !important;
    isolation: isolate;
  }

  /* Alle Navigation-Elemente sind klickbar */
  .nav.mobile-open,
  .nav.mobile-open *,
  .nav.mobile-open a,
  .nav.mobile-open button,
  .nav.mobile-open .nav-dd-trigger,
  .nav.mobile-open .nav-dd-item,
  .nav.mobile-open .nav-dd-submenu-trigger,
  .nav.mobile-open .nav-dd-menu,
  .nav.mobile-open .nav-dd-submenu-items,
  .nav.mobile-open .nav-dd-submenu {
    pointer-events: auto !important;
    cursor: pointer !important;
    position: relative;
  }

  /* Dropdown-Menüs müssen über allem liegen */
  .nav.mobile-open .nav-dd-menu {
    z-index: 1 !important;
    position: relative !important;
  }

  .nav.mobile-open .nav-dd-submenu-items {
    z-index: 2 !important;
    position: relative !important;
  }
}

[data-theme="light"] .mobile-menu-overlay {
  background: rgba(0, 0, 0, 0.3);
}

/* Overlay verdunkelt Navigation nicht mehr */
@media (max-width: 768px) {
  .mobile-menu-overlay.active {
    opacity: 0.2 !important;
  }
  
  [data-theme="light"] .mobile-menu-overlay.active {
    opacity: 0.15 !important;
  }
}

/* Mobile Navigation */
@media (max-width: 768px) {
  .mobile-menu-toggle {
    display: flex;
    order: 3;
    justify-self: end;
    grid-column: 3;
  }

  .mobile-menu-overlay {
    display: block;
  }

  .topbar-inner {
    grid-template-columns: auto 1fr auto;
    position: relative;
    gap: 12px;
  }

  .topbar-inner .nav {
    display: none !important;
  }

  .topbar-inner .nav.mobile-open {
    display: flex !important;
  }

  .brand {
    order: 1;
    justify-self: start;
  }

  /* Mobile Navigation - Modernes Design */
  .nav {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    max-width: none !important;
    background: linear-gradient(180deg, rgba(18, 21, 30, 0.98) 0%, rgba(22, 26, 36, 0.98) 100%) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 0;
    overflow-y: auto;
    overflow-x: hidden;
    transform: translateX(-100%);
    transition: transform 350ms cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 100 !important;
    margin: 0;
    visibility: hidden;
    pointer-events: none !important;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
  }

  [data-theme="light"] .nav {
    background: linear-gradient(180deg, rgba(250, 251, 254, 0.98) 0%, rgba(246, 247, 252, 0.98) 100%) !important;
  }

  .nav.mobile-open {
    display: flex !important;
    transform: translateX(0) !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 100 !important;
  }

  .nav.mobile-open * {
    pointer-events: auto !important;
  }

  /* Mobile Navigation Header */
  .nav::before {
    content: 'Navigation';
    display: block;
    padding: 24px 60px 20px 24px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--muted);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: transparent !important;
    position: sticky;
    top: 0;
    z-index: 10;
  }

  [data-theme="light"] .nav::before {
    background: transparent !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  }

  /* Mobile Menu Close Button */
  .mobile-menu-close {
    display: none;
    position: fixed;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    cursor: pointer;
    color: var(--text);
    transition: all 200ms ease;
    z-index: 101 !important;
    align-items: center;
    justify-content: center;
    -webkit-appearance: none;
    appearance: none;
  }

  .mobile-menu-close:active {
    transform: scale(0.92);
    background: rgba(255, 255, 255, 0.12);
  }

  [data-theme="light"] .mobile-menu-close {
    background: rgba(0, 0, 0, 0.06);
  }

  [data-theme="light"] .mobile-menu-close:active {
    background: rgba(0, 0, 0, 0.1);
  }

  /* Mobile Navigation Content */
  .nav {
    padding: 8px 16px 32px;
    padding-top: 0;
  }

  /* Mobile Navigation Links */
  .nav > a,
  .nav > .nav-dd {
    width: 100%;
    margin-bottom: 0;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .nav a:not(.nav-dd-trigger),
  .nav-dd-trigger {
    width: 100%;
    justify-content: flex-start;
    padding: 16px 16px;
    font-size: 16px;
    font-weight: 500;
    border-radius: 12px;
    margin-bottom: 4px;
    min-height: 52px;
    background: transparent !important;
    border: none !important;
    color: var(--text) !important;
    transition: background 150ms ease;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center;
    gap: 14px;
    cursor: pointer !important;
  }

  .nav a:not(.nav-dd-trigger):hover,
  .nav a:not(.nav-dd-trigger):active,
  .nav-dd-trigger:hover,
  .nav-dd-trigger:active {
    background: rgba(255, 255, 255, 0.06) !important;
  }

  [data-theme="light"] .nav a:not(.nav-dd-trigger):hover,
  [data-theme="light"] .nav a:not(.nav-dd-trigger):active,
  [data-theme="light"] .nav-dd-trigger:hover,
  [data-theme="light"] .nav-dd-trigger:active {
    background: rgba(0, 0, 0, 0.04) !important;
  }

  .nav a:not(.nav-dd-trigger) .nav-icon,
  .nav-dd-trigger .nav-icon {
    width: 20px;
    height: 20px;
    font-size: 18px;
    opacity: 0.7 !important;
    color: var(--brand-1);
    display: inline-flex !important;
    visibility: visible !important;
    flex-shrink: 0;
  }

  .nav a:not(.nav-dd-trigger) .nav-icon i,
  .nav-dd-trigger .nav-icon i {
    font-size: 18px;
    color: var(--brand-1);
  }

  .nav a:not(.nav-dd-trigger) .nav-icon svg,
  .nav-dd-trigger .nav-icon svg {
    color: var(--brand-1);
  }

  .nav a:not(.nav-dd-trigger) span:not(.nav-icon),
  .nav-dd-trigger span:not(.nav-icon):not(.nav-caret) {
    font-size: 16px;
    font-weight: 500;
    color: var(--text);
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .nav-dd {
    width: 100%;
    position: relative;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
  }

  .nav-dd-trigger {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    position: relative;
  }

  .nav-dd-trigger .nav-caret {
    margin-left: auto;
    width: 18px;
    height: 18px;
    opacity: 0.4;
    transition: transform 200ms ease;
  }

  .nav-dd.open .nav-dd-trigger .nav-caret {
    transform: rotate(180deg);
  }

  .nav-dd-menu {
    position: relative !important;
    display: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 8px 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    left: 0 !important;
    transform: translateX(-50%) !important;
    top: auto !important;
  }

  .nav-dd-menu::before {
    display: none !important;
  }

  .nav-dd.open .nav-dd-menu {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
  }

  .nav-dd-label {
    padding: 12px 16px 8px !important;
    font-size: 11px !important;
    color: var(--muted-2) !important;
  }

  .nav-dd-label::after {
    display: none !important;
  }

  .nav-dd-item {
    padding: 12px 16px !important;
    font-size: 15px !important;
    border-radius: 12px !important;
    background: transparent !important;
    display: flex !important;
    gap: 14px !important;
    color: var(--text) !important;
  }

  .nav-dd-item i {
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 10px !important;
    background: rgba(59, 130, 246, 0.1) !important;
    color: #3b82f6 !important;
    font-size: 15px !important;
    flex-shrink: 0 !important;
  }

  .nav-dd-item:active {
    background: rgba(59, 130, 246, 0.08) !important;
  }

  [data-theme="light"] .nav-dd-item:active {
    background: rgba(59, 130, 246, 0.06) !important;
  }

  [data-theme="light"] .nav-dd-item i {
    background: rgba(59, 130, 246, 0.08) !important;
  }

  .nav-dd-submenu {
    width: 100%;
  }

  .nav-dd-submenu-trigger {
    padding: 12px 16px !important;
    font-size: 15px !important;
    border-radius: 12px !important;
    background: transparent !important;
    gap: 14px !important;
    width: 100%;
    display: flex;
    align-items: center;
    color: var(--text) !important;
  }

  .nav-dd-submenu-trigger i {
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 10px !important;
    background: rgba(59, 130, 246, 0.1) !important;
    color: #3b82f6 !important;
    font-size: 15px !important;
  }

  .nav-dd-submenu-trigger:active {
    background: rgba(59, 130, 246, 0.08) !important;
  }

  [data-theme="light"] .nav-dd-submenu-trigger:active {
    background: rgba(59, 130, 246, 0.06) !important;
  }

  [data-theme="light"] .nav-dd-submenu-trigger i {
    background: rgba(59, 130, 246, 0.08) !important;
  }

  .nav-dd-submenu-items {
    padding-left: 8px !important;
    margin: 4px 0 0 0 !important;
    display: none !important;
    flex-direction: column !important;
    gap: 4px !important;
  }

  .nav-dd-submenu.is-open .nav-dd-submenu-items {
    display: flex !important;
  }

  .nav-dd-submenu-items .nav-dd-item {
    padding: 10px 14px !important;
  }

  .nav-dd-submenu-items .nav-dd-item i {
    width: 28px !important;
    height: 28px !important;
    font-size: 12px !important;
    border-radius: 8px !important;
  }

  .nav-dd-submenu.is-open .nav-dd-submenu-trigger {
    background: rgba(59, 130, 246, 0.05) !important;
  }

  [data-theme="light"] .nav-dd-submenu.is-open .nav-dd-submenu-trigger {
    background: rgba(0, 0, 0, 0.03) !important;
  }

  .nav-dd-submenu-items .nav-dd-item {
    padding: 10px 14px !important;
    font-size: 14px !important;
  }

  .nav-dd-submenu-caret {
    margin-left: auto;
    width: 16px;
    height: 16px;
    opacity: 0.4;
    transition: transform 200ms ease;
  }

  .nav-dd-submenu.is-open .nav-dd-submenu-caret {
    transform: rotate(180deg);
  }

  .actions {
    gap: 8px;
    order: 2;
    justify-self: end;
  }

  .support-btn {
    padding: 6px 12px;
    font-size: 12px;
  }

  .support-btn span {
    display: none;
  }

  .support-btn i {
    font-size: 16px;
  }

  /* Avatar-Menü ausblenden wenn Navigation offen ist */
  .nav.mobile-open ~ * .actions,
  .topbar-inner:has(~ .nav.mobile-open) .actions {
    display: none !important;
  }

  .user-dd {
    position: relative;
    z-index: 102 !important;
  }

  /* User-Menü auch ausblenden wenn Navigation offen ist */
  .nav.mobile-open ~ * .user-dd {
    display: none !important;
  }

  .user-dd .user-menu {
  top: calc(100% + 8px);
    position: fixed !important;
    right: 20px !important;
    left: 50% !important;
    top: calc(var(--topbar-h, 60px) + 8px) !important;
    bottom: auto !important;
    min-width: 280px;
    max-width: calc(100vw - 40px);
    z-index: 102 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2),
                0 4px 12px rgba(0, 0, 0, 0.15);
    border-radius: 16px;
    padding: 16px;
    background: rgba(28, 32, 42, 1) !important;
    border: 1px solid var(--border);
  }

  [data-theme="light"] .user-dd .user-menu {
  top: calc(100% + 8px);
    background: rgba(255, 255, 255, 1) !important;
  }

  .user-dd .user-menu * {
    pointer-events: auto !important;
  }

  .user-head {
    padding: 8px 4px 12px 7px;
  }

  .user-hello {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 6px;
  }

  .user-sub {
    font-size: 13px;
    line-height: 1.5;
  }

  .user-dd .nav-dd-item {
    padding: 14px 16px;
    font-size: 15px;
    min-height: 52px;
    border-radius: 12px;
  }

  .user-divider {
    margin: 10px 4px;
  }

  .brand-title strong {
    font-size: 15px;
  }

  .brand-title span {
    font-size: 11px;
  }
}

@media (max-width: 480px) {
  .topbar .container {
    padding: 0 12px;
  }

  .topbar-inner {
    padding: 10px 0;
    gap: 8px;
  }

  .nav {
    padding: 6px 12px 24px !important;
  }

  .nav::before {
    padding: 20px 50px 16px 16px;
    font-size: 12px;
  }

  .nav a:not(.nav-dd-trigger),
  .nav-dd-trigger {
    padding: 14px 14px;
    font-size: 15px;
    min-height: 50px;
    border-radius: 10px;
  }

  .nav a:not(.nav-dd-trigger) .nav-icon,
  .nav-dd-trigger .nav-icon {
    width: 18px;
    height: 18px;
    font-size: 16px;
  }

  .nav a:not(.nav-dd-trigger) span:not(.nav-icon),
  .nav-dd-trigger span:not(.nav-icon):not(.nav-caret) {
    font-size: 15px;
  }

  .nav-dd-item {
    padding: 12px 12px;
    font-size: 14px;
    min-height: 44px;
    border-radius: 8px;
  }

  .nav-dd-submenu-trigger {
    padding: 12px 12px;
    font-size: 14px;
    min-height: 44px;
    border-radius: 8px;
  }

  .mobile-menu-close {
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
  }

  .brand-title strong {
    font-size: 14px;
  }

  .mobile-menu-toggle {
    width: 40px;
    height: 40px;
  }

  .avatar {
    width: 36px;
    height: 36px;
  }

  .user-dd .user-menu {
  top: calc(100% + 8px);
    right: 12px !important;
    top: calc(var(--topbar-h, 60px) + 8px) !important;
    min-width: 220px;
    max-width: calc(100vw - 24px);
  }
}

.user-dd .nav-dd-trigger.user-trigger {
  background: transparent;
  border: 1px solid transparent;
  padding: 6px 8px;
  border-radius: 12px;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.user-dd .nav-dd-trigger.user-trigger:hover {
  color: var(--text);
  background: var(--panel);
  border-color: var(--border);
}

.user-dd .user-menu {
  top: calc(100% + 8px);
  left: auto !important;
  right: 0 !important;
  transform: scaleY(0.95) !important;
  min-width: 220px;
}

.user-dd.open .user-menu {
  transform: scaleY(1) !important;
}

.user-head {
  padding: 12px 14px 12px 17px;
}

.user-hello {
  font-size: 13px;
  color: var(--text);
  margin-bottom: 4px;
}

.user-sub {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.35;
}

.user-label {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 4px;
}

.user-displayname {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}

.user-email {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

.user-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}

.user-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 6px 6px;
}

[data-theme="light"] .user-divider {
  background: rgba(0, 0, 0, 0.10);
}

.user-theme {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid transparent;
}

.user-theme:hover {
  background: var(--panel);
  border-color: var(--border);
}

.user-theme-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
}

.user-theme-label i {
  width: 16px;
  text-align: center;
  opacity: 0.9;
}

.user-theme .theme-switch {
  cursor: pointer;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel);
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.08);
}

.avatar:hover {
  background: var(--panel-2);
}

.theme-switch {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.theme-switch input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.theme-switch .track {
  width: 54px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background:
    radial-gradient(80px 40px at 15% 50%, rgba(59, 130, 246, 0.16), transparent 62%),
    linear-gradient(to bottom, rgba(255,255,255,0.10), rgba(255,255,255,0.03));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 10px 30px rgba(0,0,0,0.18);
  position: relative;
  transition: background 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

[data-theme="light"] .theme-switch .track {
  background:
    radial-gradient(80px 40px at 85% 50%, rgba(58, 166, 255, 0.10), transparent 62%),
    linear-gradient(to bottom, rgba(0,0,0,0.06), rgba(0,0,0,0.02));
}

.theme-switch .thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255,255,255,0.22), rgba(255,255,255,0.06));
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow:
    0 12px 26px rgba(0,0,0,0.28),
    inset 0 1px 0 rgba(255,255,255,0.35);
  transform: translateX(0);
  transition: transform 320ms cubic-bezier(0.2, 0.9, 0.2, 1);
  display: grid;
  place-items: center;
  overflow: hidden;
}

[data-theme="dark"] .theme-switch .thumb {
  box-shadow:
    0 12px 26px rgba(0,0,0,0.28),
    0 0 0 6px rgba(59, 130, 246, 0.10),
    inset 0 1px 0 rgba(255,255,255,0.35);
}

[data-theme="light"] .theme-switch .thumb {
  box-shadow:
    0 12px 26px rgba(10,15,23,0.12),
    0 0 0 6px rgba(58, 166, 255, 0.08),
    inset 0 1px 0 rgba(255,255,255,0.35);
}

[data-theme="light"] .theme-switch .thumb {
  transform: translateX(24px);
  border-color: rgba(0,0,0,0.10);
  background: linear-gradient(135deg, rgba(255,255,255,0.80), rgba(255,255,255,0.45));
}

.theme-switch:active .thumb {
  transform: translateX(0) scale(0.96);
}

[data-theme="light"] .theme-switch:active .thumb {
  transform: translateX(24px) scale(0.96);
}

.thumb-icon {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(255,255,255,0.88);
  transition: transform 360ms cubic-bezier(0.2, 0.9, 0.2, 1), opacity 220ms ease, color 220ms ease;
}

[data-theme="light"] .thumb-icon { color: rgba(0,0,0,0.72); }

.thumb-icon svg {
  width: 14px;
  height: 14px;
  display: block;
}

.icon-moon {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

.icon-sun {
  opacity: 0;
  transform: rotate(-140deg) scale(0.82);
}

[data-theme="light"] .icon-moon {
  opacity: 0;
  transform: rotate(140deg) scale(0.82);
}

[data-theme="light"] .icon-sun {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

.hero {
  padding: 72px 0 40px;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 18px;
}

.hero-grid.solo {
  grid-template-columns: 1fr;
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .actions, .brand { min-width: unset; }
}

.card {
  border: 1px solid var(--border);
  background: linear-gradient(180deg, var(--surface), var(--surface) 60%, var(--surface-2));
  border-radius: var(--radius);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  position: relative;
  overflow: hidden;
}

.card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at top left, rgba(59, 130, 246, 0.05), transparent 50%);
  pointer-events: none;
}

[data-theme="light"] .card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 249, 252, 0.95) 100%);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .card::before {
  background: radial-gradient(ellipse at top left, rgba(59, 130, 246, 0.08), transparent 50%);
}

.hero-main {
  padding: 26px;
  overflow: hidden;
  position: relative;
}

.hero-main--plain {
  padding: 18px 0;
  overflow: visible;
  background: transparent;
}

.sh-shell .hero-main--plain {
  background: transparent;
}

.hero-main--plain::before,
.hero-main--plain::after {
  content: none;
}

/* Inner-page hero (Support, Tools, Status, legal pages …). Sized to
   sit a step below the homepage headline but in the same voice. */
.hero-main--plain h1 {
  margin-bottom: 14px;
  font-size: clamp(34px, 4.6vw, 56px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.03em;
}

.hero-main--plain p {
  max-width: 56ch;
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.7;
}

.hero-main::before {
  content: none;
  position: absolute;
  inset: -120px -140px auto auto;
  width: 360px;
  height: 360px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, rgba(36, 208, 255, 0.18), transparent 60%),
              radial-gradient(circle at 70% 70%, rgba(124, 92, 255, 0.20), transparent 58%);
  filter: blur(2px);
  opacity: 0.9;
  pointer-events: none;
  animation: orbFloat 8.5s ease-in-out infinite;
}

.hero-main::after {
  content: none;
  position: absolute;
  inset: auto auto -140px -160px;
  width: 420px;
  height: 420px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, rgba(124, 92, 255, 0.20), transparent 62%),
              radial-gradient(circle at 70% 70%, rgba(36, 208, 255, 0.16), transparent 58%);
  opacity: 0.8;
  pointer-events: none;
  animation: orbFloat2 10.5s ease-in-out infinite;
}

.hero-main h1 {
  margin: 0 0 10px;
  font-size: clamp(26px, 3.1vw, 42px);
  line-height: 1.15;
  letter-spacing: -0.4px;
  position: relative;
  z-index: 1;
}

.grad {
  background: linear-gradient(90deg, var(--brand-1), var(--brand-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-main p {
  margin: 0 0 18px;
  color: var(--muted);
  max-width: 64ch;
  position: relative;
  z-index: 1;
}

.type-line {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.type {
  color: var(--text);
}

.cursor {
  width: 10px;
  height: 1.05em;
  display: inline-block;
  border-left: 2px solid currentColor;
  opacity: 0.85;
  transform: translateY(1px);
  animation: blink 1s steps(2, jump-none) infinite;
}

@keyframes blink {
  50% { opacity: 0; }
}

.loading {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.18);
  border-top-color: rgba(255, 255, 255, 0.70);
  margin: 8px 0 16px;
  position: relative;
  z-index: 1;
  animation: spin 0.9s linear infinite;
}

[data-theme="light"] .loading {
  border-color: rgba(0, 0, 0, 0.14);
  border-top-color: rgba(0, 0, 0, 0.55);
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  position: relative;
  z-index: 1;
}

.chip {
  font-size: 12px;
  padding: 7px 10px;
  border-radius: 999px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--muted);
}

.hero-side {
  padding: 18px;
  display: grid;
  gap: 10px;
}

.cta-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
  position: relative;
  z-index: 1;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 180ms ease;
  position: relative;
  overflow: hidden;
}

.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, transparent 50%);
  opacity: 0;
  transition: opacity 180ms ease;
}

.btn:hover {
  transform: translateY(-2px);
  border-color: rgba(59, 130, 246, 0.25);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.btn:hover::before {
  opacity: 1;
}

.btn-primary {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(37, 99, 235, 0.1) 100%);
  border-color: rgba(59, 130, 246, 0.25);
}

.btn-primary:hover {
  border-color: rgba(59, 130, 246, 0.4);
  box-shadow: 0 8px 30px rgba(59, 130, 246, 0.2);
}

[data-theme="light"] .btn {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.8) 0%, rgba(248, 249, 252, 0.9) 100%);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .btn:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .btn-primary {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(37, 99, 235, 0.05) 100%);
}

.auth-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(10px);
  display: grid;
  place-items: center;
  padding: 18px;
  z-index: 1000;
}

[data-theme="light"] .auth-overlay {
  background: rgba(0, 0, 0, 0.25);
}

.auth-card {
  width: min(420px, 100%);
  border-radius: 18px;
  border: 1px solid var(--border);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.03));
  box-shadow: var(--shadow);
  padding: 16px;
  position: relative;
}

[data-theme="light"] .auth-card {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.70));
}

.auth-head {
  margin-bottom: 12px;
}

.auth-close {
  position: absolute;
  top: 10px;
  left: 50%; transform: translateX(-50%) rotate(45deg);
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
  line-height: 1;
  font-size: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.auth-close:hover {
  background: var(--panel-2);
}

.auth-title {
  font-size: 16px;
  letter-spacing: 0.2px;
  margin-bottom: 2px;
}

.auth-sub {
  font-size: 13px;
  color: var(--muted);
}

.auth-form {
  display: grid;
  gap: 10px;
}

.auth-field {
  display: grid;
  gap: 6px;
}

.auth-field span {
  font-size: 12px;
  color: var(--muted);
}

.auth-field input {
  width: 100%;
  padding: 11px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
}

.auth-field input::placeholder {
  color: var(--muted-2);
}

.auth-btn {
  width: 100%;
}

.auth-error {
  font-size: 12px;
  color: rgba(255, 120, 120, 0.95);
  background: rgba(255, 120, 120, 0.10);
  border: 1px solid rgba(255, 120, 120, 0.20);
  padding: 10px 12px;
  border-radius: 14px;
}

.auth-hint {
  font-size: 12px;
  color: var(--muted);
  text-align: center;
  padding-top: 4px;
}

.stat {
  padding: 14px 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--panel);
}

.stat b {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
  letter-spacing: 0.2px;
}

.stat div {
  font-size: 14px;
  color: var(--text);
}

.section {
  padding: 18px 0 44px;
}

.section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 12px;
}

.section-header h2 {
  margin: 0;
  font-size: 16px;
  letter-spacing: 0.2px;
}

.section-header p {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

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

.sh-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 10px;
  align-items: start;
}

.sh-sidebar {
  border: 1px solid var(--border);
  background: linear-gradient(to bottom, rgba(26, 30, 41, 0.85), rgba(24, 28, 38, 0.6));
  backdrop-filter: blur(14px);
  border-radius: 16px;
  padding: 10px;
  position: sticky;
  top: calc(var(--topbar-h) + 24px);
}

[data-theme="light"] .sh-sidebar {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.52));
}

.sh-side-top {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 6px 6px 10px;
}

.sh-side-brand {
  font-size: 13px;
  letter-spacing: 0.2px;
  color: var(--text);
}

.sh-main {
  border: 1px solid var(--border);
  background: linear-gradient(135deg, rgba(16, 20, 30, 0.85) 0%, rgba(12, 15, 22, 0.95) 100%);
  backdrop-filter: blur(20px);
  border-radius: 14px;
  padding: 24px;
  margin-left: 0;
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  min-width: 0;
  overflow-wrap: anywhere;
  position: relative;
}

.sh-main::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.2), transparent);
  pointer-events: none;
}

[data-theme="light"] .sh-main {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 249, 252, 0.98) 100%);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .sh-main::before {
  background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.15), transparent);
}

.sh-admin-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.sh-admin-title {
  font-size: 16px;
  font-weight: 750;
  letter-spacing: 0.2px;
  color: var(--text);
}

.sh-admin-sub {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}

.sh-alert {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px 12px;
  margin: 10px 0 12px;
  background: var(--panel);
  color: var(--text);
}

.sh-alert--success { border-color: rgba(34, 197, 94, 0.28); }
.sh-alert--error { border-color: rgba(239, 68, 68, 0.28); }

.sh-toast-host {
  position: fixed;
  right: 24px;
  top: calc(var(--topbar-h) + 14px);
  z-index: 95;
  display: grid;
  gap: 10px;
  width: min(420px, calc(100vw - 48px));
  pointer-events: none;
}

@media (min-width: 1980px) {
  .sh-toast-host {
    right: max(24px, calc((100vw - 1640px) / 2 - 444px));
  }
}

.sh-toast-host .sh-toast {
  pointer-events: auto;
}

.sh-toast {
  display: grid;
  grid-template-columns: 36px 1fr 32px;
  gap: 12px;
  align-items: start;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(28, 32, 42, 0.98);
  backdrop-filter: blur(20px);
  box-shadow: 0 10px 40px rgba(0,0,0,0.3);
  transform: translateX(100%);
  opacity: 0;
  animation: shToastIn 300ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
  position: relative;
  overflow: hidden;
}

.sh-toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background: rgba(34, 197, 94, 0.8);
  width: 100%;
  transform-origin: left;
  animation: shToastProgress 5s linear forwards;
}

.sh-toast.is-error .sh-toast-progress {
  background: rgba(239, 68, 68, 0.8);
}

[data-theme="light"] .sh-toast {
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 10px 40px rgba(0,0,0,0.12);
}

.sh-toast.is-success { 
  border-left: 3px solid rgba(34, 197, 94, 0.8);
}

.sh-toast.is-error { 
  border-left: 3px solid rgba(239, 68, 68, 0.8);
}

.sh-toast-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--panel-2);
  flex-shrink: 0;
  font-size: 16px;
}

.sh-toast.is-success .sh-toast-icon { 
  color: rgba(34, 197, 94, 0.9); 
  border-color: rgba(34, 197, 94, 0.2);
  background: rgba(34, 197, 94, 0.08);
}

.sh-toast.is-error .sh-toast-icon { 
  color: rgba(239, 68, 68, 0.9); 
  border-color: rgba(239, 68, 68, 0.2);
  background: rgba(239, 68, 68, 0.08);
}

.sh-toast-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  margin-bottom: 3px;
  line-height: 1.4;
}

.sh-toast-msg {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}

.sh-toast-close {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 120ms ease;
  flex-shrink: 0;
}

.sh-toast-close:hover {
  background: var(--panel-2);
  color: var(--text);
}

.sh-toast-close:active {
  transform: scale(0.95);
}

@keyframes shToastIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to { 
    transform: translateX(0); 
    opacity: 1; 
  }
}

@keyframes shToastProgress {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}

.sh-toast.is-hiding {
  animation: shToastOut 250ms cubic-bezier(0.4, 0, 1, 1) forwards;
}

@keyframes shToastOut {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to { 
    transform: translateX(100%); 
    opacity: 0; 
  }
}

.sh-admin-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 12px 0 14px;
}

.sh-stat-card {
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 12px;
  background: var(--panel);
}

.sh-stat-title {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 10px;
}

.sh-stat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.sh-stat-value {
  font-size: 22px;
  font-weight: 780;
  letter-spacing: -0.2px;
  color: var(--text);
}

.sh-stat-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
  color: var(--text);
}

.sh-stat-icon.is-green { border-color: rgba(34, 197, 94, 0.28); color: rgba(34, 197, 94, 0.95); }
.sh-stat-icon.is-amber { border-color: rgba(245, 158, 11, 0.28); color: rgba(245, 158, 11, 0.95); }
.sh-stat-icon.is-red { border-color: rgba(239, 68, 68, 0.28); color: rgba(239, 68, 68, 0.95); }

.sh-admin-filter {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 8px 0 12px;
}

.sh-check {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-size: 13px;
  user-select: none;
}

.sh-check input {
  width: 16px;
  height: 16px;
  accent-color: rgba(59, 130, 246, 0.95);
}

/* ── Panel-Tabellen ──────────────────────────────────────────
   Nur dxBinder benutzt .sh-* (logs, stats, gk, abkommen,
   exelist, kautionskatalog, feedback_verlauf).

   Der Wrap ist der Scroll-Container. Vorher stand hier
   `overflow: hidden`: dadurch hatte das `position: sticky` am
   thead nichts, woran es kleben konnte, und breite Tabellen
   wurden auf Mobil abgeschnitten statt scrollbar zu sein. */
.sh-table-wrap {
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: auto;
  max-height: min(72vh, 760px);
  overscroll-behavior: contain;
  background: rgba(255,255,255,0.02);
  box-shadow: 0 14px 40px rgba(0,0,0,0.24);
  scrollbar-width: thin;
  scrollbar-color: var(--border-2) transparent;
}

.sh-table-wrap::-webkit-scrollbar { width: 10px; height: 10px; }
.sh-table-wrap::-webkit-scrollbar-track { background: transparent; }

.sh-table-wrap::-webkit-scrollbar-thumb {
  background-color: var(--border-2);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: 999px;
}

.sh-table-wrap::-webkit-scrollbar-thumb:hover {
  background-color: var(--muted-2);
}

.sh-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

/* Ab hier die Spalten nicht weiter quetschen, sondern den Wrap
   horizontal scrollen lassen — logs.php hat bis zu 8 Spalten. */
@media (max-width: 900px) {
  .sh-table { min-width: 720px; }
}

/* Kopfzeile liest sich als Label-Reihe, nicht als fette
   Datenzeile: kleiner, gesperrt, in Versalien. */
.sh-table thead th {
  text-align: left;
  /* Mikrolabel wie .dd-strip__label auf Home: Mono, Versalien,
     weit gesperrt, gedaempft. */
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted-2);
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 2;
  /* Deckende Basis unter der bisherigen 3%-Aufhellung: sticky
     braucht Deckkraft, sonst scrollen die Zeilen sichtbar
     durch den Kopf hindurch. Der Farbeindruck bleibt gleich. */
  background:
    linear-gradient(rgba(255,255,255,0.03), rgba(255,255,255,0.03)),
    var(--surface);
}

[data-theme="light"] .sh-table thead th {
  background:
    linear-gradient(rgba(0,0,0,0.03), rgba(0,0,0,0.03)),
    #fff;
}

.sh-table-separator {
  text-align: center !important;
  width: 20px;
  padding: 12px 4px !important;
  color: var(--muted) !important;
  font-weight: 400 !important;
}

.sh-table tbody td {
  padding: 13px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  vertical-align: middle;
}

[data-theme="light"] .sh-table tbody td {
  border-bottom-color: rgba(0,0,0,0.06);
}

/* Letzte Zeile braucht keinen Trenner — darunter kommt der
   Rand des Wraps. */
.sh-table tbody tr:last-child td { border-bottom: 0; }

/* Zebra ist raus: der 1,5-%-Wechsel war praktisch unsichtbar
   und machte die Tabelle nur unruhig. Stattdessen tragen die
   Zeilentrenner die Struktur und der Hover wird deutlicher.
   Die Akzentkante links kommt als inset-shadow, damit die
   Zeile beim Ueberfahren nicht springt. */
.sh-table tbody tr {
  transition: background 120ms ease, box-shadow 120ms ease;
}

.sh-table tbody tr:hover {
  background: rgba(59, 130, 246, 0.07);
  box-shadow: inset 2px 0 0 rgba(59, 130, 246, 0.55);
}

[data-theme="light"] .sh-table tbody tr:hover {
  background: rgba(59, 130, 246, 0.06);
}

.sh-table-no-hover tbody tr:hover,
[data-theme="light"] .sh-table-no-hover tbody tr:hover {
  background: transparent;
  box-shadow: none;
}

/* "Keine Eintraege gefunden" ist keine Datenzeile — kein Hover,
   keine Akzentkante. */
.sh-table tbody tr:has(> td[colspan]):hover {
  background: transparent;
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  .sh-table tbody tr { transition: none; }
}

.sh-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-weight: 750;
  font-size: 12px;
}

.sh-rank.is-low { color: rgba(34, 197, 94, 0.95); border-color: rgba(34, 197, 94, 0.28); }
.sh-rank.is-mid { color: rgba(245, 158, 11, 0.95); border-color: rgba(245, 158, 11, 0.28); }
.sh-rank.is-high { color: rgba(59, 130, 246, 0.85); border-color: rgba(59, 130, 246, 0.25); }

.sh-rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-weight: 750;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.sh-rank-badge--coleader {
  color: rgba(59, 130, 246, 0.95);
  border-color: rgba(59, 130, 246, 0.28);
  background: rgba(59, 130, 246, 0.08);
}

.sh-rank-badge--leader {
  color: rgba(168, 85, 247, 0.95);
  border-color: rgba(168, 85, 247, 0.28);
  background: rgba(168, 85, 247, 0.08);
}

.sh-rank-badge--admin {
  color: rgba(239, 68, 68, 0.95);
  border-color: rgba(239, 68, 68, 0.28);
  background: rgba(239, 68, 68, 0.08);
}

.sh-fraction {
  margin-left: 8px;
  color: var(--muted);
}

.sh-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 12px;
  font-weight: 700;
}

.sh-status.is-active { color: rgba(34, 197, 94, 0.95); border-color: rgba(34, 197, 94, 0.28); }
.sh-status.is-inactive { color: rgba(245, 158, 11, 0.95); border-color: rgba(245, 158, 11, 0.28); }

.sh-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font: inherit;
}

.sh-action--danger {
  border-color: rgba(239, 68, 68, 0.28);
  color: rgba(239, 68, 68, 0.95);
}

.sh-action--danger:hover {
  background: rgba(239, 68, 68, 0.08);
}

.sh-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.sh-iconbtn {
  width: 38px;
  height: 38px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.02);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 140ms ease, background 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
  font: inherit;
}

.sh-iconbtn:hover {
  transform: translateY(-1px);
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.18);
  box-shadow: 0 12px 30px rgba(0,0,0,0.18);
}

.sh-iconbtn:active {
  transform: translateY(0px) scale(0.98);
}

.sh-iconbtn--danger {
  color: rgba(239, 68, 68, 0.95);
  border-color: rgba(239, 68, 68, 0.22);
}

.sh-iconbtn--danger:hover {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.35);
  box-shadow: 0 12px 30px rgba(239, 68, 68, 0.12);
}

.sh-field {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}

.sh-field span {
  font-size: 12px;
  color: var(--muted);
}

.sh-field input,
.sh-field select {
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
  color: var(--text);
  font: inherit;
}

.sh-field select {
  background: rgba(28, 32, 42, 0.9);
  color: var(--text);
  cursor: pointer;
}

.sh-field select option {
  background: rgba(28, 32, 42, 1);
  color: var(--text);
  padding: 8px;
}

[data-theme="light"] .sh-field input,
[data-theme="light"] .sh-field select {
  background: rgba(0,0,0,0.03);
}

[data-theme="light"] .sh-field select {
  background: rgba(255, 255, 255, 1);
  color: var(--text);
}

[data-theme="light"] .sh-field select option {
  background: rgba(255, 255, 255, 1);
  color: var(--text);
}

.sh-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  padding: 0;
  box-sizing: border-box;
}

.sh-modal.is-open { 
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 10vh;
}

.sh-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(8px);
  animation: shBackdropIn 150ms ease;
  z-index: 1;
}

@keyframes shBackdropIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.sh-modal-dialog {
  position: relative;
  width: min(520px, calc(100vw - 40px));
  margin: 0;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(28, 32, 42, 0.98);
  backdrop-filter: blur(10px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  overflow: hidden;
  animation: shModalPop 200ms ease-out;
  max-height: calc(100vh - 20vh);
  display: flex;
  flex-direction: column;
  z-index: 2;
  flex-shrink: 0;
}

[data-theme="light"] .sh-modal-dialog {
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 20px 60px rgba(0,0,0,0.12);
}

.sh-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px;
  border-bottom: 1px solid var(--border);
}

.sh-modal-title {
  font-weight: 700;
  font-size: 20px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  letter-spacing: -0.2px;
}

.sh-modal-title i {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  opacity: 0.7;
}

.sh-modal-x {
  border: none;
  background: transparent;
  color: var(--muted);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 120ms ease;
}

.sh-modal-x:hover {
  background: var(--panel-2);
  color: var(--text);
}

.sh-modal-x:active {
  transform: scale(0.95);
}

.sh-modal-body { 
  padding: 24px;
  overflow-y: auto;
  flex: 1;
}

.sh-modal-text { 
  color: var(--text); 
  margin-bottom: 20px; 
  line-height: 1.6;
  font-size: 15px;
}

.sh-modal-user {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  background: var(--panel-2);
  margin-bottom: 20px;
}

.sh-modal-user-header {
  display: flex;
  align-items: center;
  gap: 14px;
}

.sh-modal-user-avatar {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: var(--panel);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 20px;
  flex-shrink: 0;
}

.sh-modal-user-info {
  flex: 1;
  min-width: 0;
}

.sh-modal-user-name { 
  font-weight: 600; 
  font-size: 16px;
  margin-bottom: 4px;
  color: var(--text);
  line-height: 1.4;
}

.sh-modal-user-sub { 
  color: var(--muted); 
  font-size: 13px;
  line-height: 1.5;
}

.sh-modal-user-sub span {
  font-weight: 500;
  color: var(--text);
}

.sh-modal-note { 
  margin-top: 20px; 
  padding: 12px 14px;
  border-radius: 8px;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.2);
  color: var(--text);
  font-size: 13px;
  line-height: 1.5;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.sh-modal-note i {
  flex-shrink: 0;
  margin-top: 1px;
  font-size: 14px;
  opacity: 0.8;
}

.sh-modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 20px 24px;
  border-top: 1px solid var(--border);
}

.sh-inline { display: inline; }

@keyframes shModalPop {
  from { 
    transform: translateY(-10px);
    opacity: 0; 
  }
  to { 
    transform: translateY(0);
    opacity: 1; 
  }
}

.sh-announcements {
  margin-bottom: 24px;
}

.sh-announcement-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(59, 130, 246, 0.05) 100%);
  box-shadow: 0 4px 20px rgba(59, 130, 246, 0.1);
  transition: all 280ms cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.sh-announcement-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.1) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 400ms ease;
  pointer-events: none;
}

.sh-announcement-card:hover {
  transform: translateY(-2px);
  border-color: rgba(59, 130, 246, 0.3);
  box-shadow: 0 8px 32px rgba(59, 130, 246, 0.15);
}

.sh-announcement-card:hover::before {
  opacity: 1;
}

.sh-announcement-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.25), rgba(59, 130, 246, 0.2));
  color: rgba(59, 130, 246, 0.95);
  font-size: 20px;
  flex-shrink: 0;
  transition: all 280ms ease;
}

.sh-announcement-card:hover .sh-announcement-icon {
  transform: scale(1.1) rotate(5deg);
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.35), rgba(59, 130, 246, 0.3));
}

.sh-announcement-content {
  flex: 1;
}

.sh-announcement-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 4px;
  color: var(--text);
}

.sh-announcement-text {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}

/* Simple Notification Bar */
.sh-notify-bar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

.sh-notify-item {
  padding: 12px 16px;
  background: rgba(59, 130, 246, 0.15);
  border-left: 3px solid #3b82f6;
  border-radius: 4px;
  font-size: 14px;
  color: var(--text);
}

.sh-notify-item a {
  color: #60a5fa;
  text-decoration: underline;
  font-weight: 500;
}

.sh-notify-item a:hover {
  color: #c4b5fd;
}

.sh-quick-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}

.sh-quick-link {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: linear-gradient(135deg, var(--panel) 0%, rgba(255, 255, 255, 0.02) 100%);
  text-decoration: none;
  color: var(--text);
  transition: all 280ms cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.sh-quick-link::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(59, 130, 246, 0.03) 100%);
  opacity: 0;
  transition: opacity 280ms ease;
  pointer-events: none;
}

.sh-quick-link:hover {
  transform: translateY(-3px) scale(1.02);
  border-color: rgba(59, 130, 246, 0.35);
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(59, 130, 246, 0.05) 100%);
  box-shadow: 
    0 8px 32px rgba(59, 130, 246, 0.15),
    0 0 0 1px rgba(59, 130, 246, 0.1);
  text-decoration: none;
  color: var(--text);
}

.sh-quick-link:hover::before {
  opacity: 1;
}

.sh-quick-link-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0.15));
  color: rgba(59, 130, 246, 0.95);
  font-size: 18px;
  flex-shrink: 0;
  transition: all 280ms ease;
}

.sh-quick-link:hover .sh-quick-link-icon {
  transform: scale(1.15) rotate(5deg);
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.35), rgba(59, 130, 246, 0.25));
}

.sh-quick-link-content {
  flex: 1;
  min-width: 0;
}

.sh-quick-link-title {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 2px;
  color: var(--text);
}

.sh-quick-link-desc {
  font-size: 12px;
  color: var(--muted);
}

.sh-quick-link-arrow {
  color: var(--muted);
  font-size: 14px;
  transition: all 280ms ease;
  flex-shrink: 0;
}

.sh-quick-link:hover .sh-quick-link-arrow {
  transform: translateX(4px);
  color: rgba(59, 130, 246, 0.95);
}

.sh-distribution-section {
  margin-top: 32px;
  border-top: 1px solid var(--border);
  padding-top: 24px;
}

.sh-distribution-section-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.sh-distribution-section-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(59, 130, 246, 0.1));
  border: 1px solid rgba(59, 130, 246, 0.2);
  color: rgba(59, 130, 246, 0.95);
}

.sh-distribution-card {
  border: 1px solid var(--border);
  border-radius: 18px;
  background: linear-gradient(135deg, var(--panel) 0%, rgba(255, 255, 255, 0.02) 100%);
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  transition: all 280ms ease;
}

.sh-distribution-card:hover {
  box-shadow: 0 8px 32px rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.2);
}

.sh-distribution-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
}

.sh-distribution-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
}

.sh-distribution-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: var(--muted);
  text-align: center;
}

.sh-distribution-empty i {
  font-size: 32px;
  margin-bottom: 12px;
  opacity: 0.5;
}

.sh-distribution-empty span {
  font-size: 14px;
}

.sh-distribution-content {
  padding: 20px 24px;
}

.sh-distribution-item {
  margin-bottom: 20px;
}

.sh-distribution-item:last-child {
  margin-bottom: 0;
}

.sh-distribution-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.sh-distribution-percent {
  font-weight: 700;
  color: rgba(59, 130, 246, 0.95);
}

.sh-distribution-bar {
  width: 100%;
  height: 24px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .sh-distribution-bar {
  background: rgba(0, 0, 0, 0.08);
}

.sh-distribution-bar-fill {
  height: 100%;
  border-radius: 12px;
  transition: width 600ms cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.sh-distribution-bar-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.sh-stats-nav {
  margin-bottom: 24px;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.sh-stats-nav-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 16px;
}

.sh-stats-nav-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sh-stats-nav-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  transition: all 280ms ease;
}

.sh-stats-nav-tab:hover {
  background: rgba(59, 130, 246, 0.05);
  border-color: rgba(59, 130, 246, 0.2);
  text-decoration: none;
  color: var(--text);
}

.sh-stats-nav-tab.active {
  background: rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.3);
  color: rgba(59, 130, 246, 0.95);
}

.sh-stats-nav-tab i {
  font-size: 14px;
}

.sh-stats-section-tabs {
  display: flex;
  gap: 8px;
  padding: 0 24px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border);
}

.sh-stats-section-tab {
  border: none;
  background: transparent;
  color: var(--muted);
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all 280ms ease;
  position: relative;
  z-index: 1;
  pointer-events: auto;
}

.sh-stats-section-tab:hover {
  color: var(--text);
}

.sh-stats-section-tab.active {
  color: rgba(59, 130, 246, 0.95);
  border-bottom-color: rgba(59, 130, 246, 0.95);
}

.sh-stats-section-pane {
  display: none;
}

.sh-stats-section-pane.active {
  display: block;
}

.sh-stat-detail {
  border: 1px solid var(--border);
  border-radius: 18px;
  background: linear-gradient(135deg, var(--panel) 0%, rgba(255, 255, 255, 0.02) 100%);
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.sh-stat-detail-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px;
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
}

.sh-stat-detail-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.25), rgba(59, 130, 246, 0.2));
  color: rgba(59, 130, 246, 0.95);
  font-size: 24px;
  flex-shrink: 0;
}

.sh-stat-detail-content {
  flex: 1;
}

.sh-stat-detail-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}

.sh-stat-detail-subtitle {
  font-size: 13px;
  color: var(--muted);
}

.sh-stat-detail-body {
  padding: 24px;
}

.sh-stat-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.sh-stat-detail-card {
  padding: 20px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
  transition: all 280ms ease;
}

.sh-stat-detail-card:hover {
  transform: translateY(-2px);
  border-color: rgba(59, 130, 246, 0.2);
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(59, 130, 246, 0.03));
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.1);
}

.sh-stat-detail-card-label {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 8px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.sh-stat-detail-card-value {
  font-size: 24px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.5px;
}

.sh-stats-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}

.sh-stats-title {
  font-size: 14px;
  color: var(--text);
  font-weight: 650;
}

.sh-tabs {
  display: inline-flex;
  gap: 6px;
  padding: 6px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
}

.sh-tab {
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  padding: 8px 10px;
  border-radius: 12px;
  cursor: pointer;
  font-size: 13px;
}

.sh-tab:hover {
  color: var(--text);
  background: rgba(59, 130, 246, 0.04);
  border-color: rgba(59, 130, 246, 0.15);
}

.sh-tab.active {
  color: var(--text);
  font-weight: 700;
  background: rgba(59, 130, 246, 0.08);
  border-color: rgba(59, 130, 246, 0.2);
}

.sh-tabs-secondary {
  margin-top: 10px;
}

.sh-tab-small {
  padding: 6px 12px;
  font-size: 12px;
}

.sh-pane {
  display: none;
}

.sh-pane.active {
  display: block;
}

.sh-pane[data-timeframe] {
  display: none;
}

.sh-pane[data-timeframe].active {
  display: block;
}

.sh-pane.active {
  display: block;
}

.sh-total-card {
  border: 1px solid rgba(59, 130, 246, 0.2);
  background: rgba(59, 130, 246, 0.05);
  border-radius: 16px;
  padding: 14px;
  margin-bottom: 12px;
}

.sh-total-label {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 4px;
}

.sh-total-value {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.2px;
}

.sh-muted {
  color: var(--muted);
}

.tile h3 {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.tile h3 i {
  margin-right: 8px;
  opacity: 0.9;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.sh-compare {
  margin-top: 14px;
  border-top: 1px solid var(--border);
  padding-top: 14px;
}

.sh-compare-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.sh-compare-title {
  font-size: 14px;
  font-weight: 750;
  color: var(--text);
}

.sh-compare-sub {
  font-size: 12px;
  color: var(--muted);
}

.sh-compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 900px) {
  .sh-compare-grid { grid-template-columns: 1fr; }
}

.sh-compare-card {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(255,255,255,0.03);
  padding: 14px;
}

.sh-compare-card.winner {
  border-color: rgba(59, 130, 246, 0.25);
  background: rgba(59, 130, 246, 0.06);
}

.sh-compare-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.sh-compare-badge {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
}

.sh-compare-badge.sapd {
  background: rgba(52, 152, 219, 0.14);
  color: rgba(52, 152, 219, 0.95);
}

.sh-compare-badge.fbi {
  background: rgba(155, 89, 182, 0.14);
  color: rgba(155, 89, 182, 0.95);
}

.sh-compare-name {
  font-size: 13px;
  font-weight: 800;
}

.sh-compare-desc {
  font-size: 12px;
  color: var(--muted);
}

.sh-compare-crown {
  margin-left: auto;
  color: #f5c542;
  opacity: 0.95;
}

.sh-compare-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid rgba(255,255,255,0.06);
}

[data-theme="light"] .sh-compare-row {
  border-top-color: rgba(0,0,0,0.06);
}

.sh-compare-row span {
  font-size: 12px;
  color: var(--muted);
}

.sh-compare-row b {
  font-size: 13px;
  color: var(--text);
  font-weight: 800;
}

@media (max-width: 1024px) {
  .sh-layout { grid-template-columns: 210px minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .sh-layout { grid-template-columns: 1fr; }
  .sh-sidebar { position: static; top: auto; left: auto; width: auto; height: auto; overflow: visible; }
  .sh-main { margin-top: 12px; }
}

.sh-side-title {
  font-size: 11px;
  color: var(--muted);
  padding: 6px 10px 6px;
  letter-spacing: 0.25px;
  text-transform: uppercase;
  opacity: 0.9;
}

.sh-nav {
  display: grid;
  gap: 4px;
  padding-bottom: 8px;
}

.sh-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid transparent;
  color: var(--text);
  background: transparent;
  font-size: 13px;
  transition: all 0.2s ease;
}

.sh-nav a:hover {
  background: rgba(59, 130, 246, 0.04);
  border-color: rgba(59, 130, 246, 0.15);
}

.sh-link-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sh-nav a i {
  width: 16px;
  text-align: center;
  opacity: 0.9;
}

.sh-nav a.active {
  background: rgba(59, 130, 246, 0.06);
  border-color: rgba(59, 130, 246, 0.2);
  font-weight: 700;
}

.sh-nav a.active i {
  opacity: 1;
}

.sh-nav a.active::before {
  content: "›";
  color: var(--text);
  opacity: 0.9;
  margin-right: 2px;
}

.sh-title {
  text-align: center;
  margin-bottom: 6px;
}

.sh-subtitle {
  text-align: center;
  font-size: 13px;
  color: var(--text);
  margin-bottom: 12px;
}

.sh-subtitle-muted {
  color: var(--muted);
}

.sh-intro {
  text-align: center;
  margin-bottom: 10px;
  color: var(--muted);
}

.tile {
  padding: 20px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: linear-gradient(135deg, var(--panel) 0%, rgba(255, 255, 255, 0.02) 100%);
  position: relative;
  overflow: hidden;
}

.tile h3 i {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0.15));
  padding: 8px;
  border-radius: 10px;
  margin-right: 8px;
}

@keyframes orbFloat {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-10px, 10px) scale(1.02); }
  100% { transform: translate(0, 0) scale(1); }
}

@keyframes orbFloat2 {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(12px, -8px) scale(1.02); }
  100% { transform: translate(0, 0) scale(1); }
}

.tile h3 {
  margin: 0 0 6px;
  font-size: 14px;
}

.tile p {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

.footer {
  border-top: 1px solid var(--border);
  padding: 32px 0 44px;
  color: var(--muted-2);
  font-size: 13px;
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--muted-2);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
}
.footer-brand img { height: 18px; width: auto; opacity: 0.85; }
.footer-links { display: flex; gap: 22px; font-weight: 600; font-size: 13px; }
.footer-links a { color: var(--muted-2); transition: color 150ms ease; }
.footer-links a:hover { color: var(--text); }
.footer-copy { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted-2); }

@media (prefers-reduced-motion: reduce) {
  .nav a,
  .switch,
  .switch::after,
  .tile,
  .hero-main::before,
  .hero-main::after { transition: none; animation: none; }
}

/* Modern Login Styles */
.login-container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  height: calc(100vh - var(--topbar-h));
  max-height: calc(100vh - var(--topbar-h));
  position: relative;
  padding: 20px 20px 0 20px;
  padding-top: calc(var(--topbar-h) + 20px);
  overflow: hidden;
}

.login-box {
  background: 
    linear-gradient(135deg, rgba(28, 32, 42, 0.98) 0%, rgba(24, 28, 38, 0.95) 100%);
  backdrop-filter: blur(24px) saturate(180%);
  padding: 50px 55px;
  border-radius: 24px;
  box-shadow: 
    0 20px 60px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  text-align: center;
  width: 480px;
  max-width: 100%;
  position: relative;
  animation: loginSlideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  border: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.login-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(255, 255, 255, 0.1) 20%, 
    rgba(255, 255, 255, 0.15) 50%, 
    rgba(255, 255, 255, 0.1) 80%, 
    transparent 100%);
  pointer-events: none;
}

.login-box::after {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.03) 0%, transparent 70%);
  pointer-events: none;
  animation: loginGlow 8s ease-in-out infinite;
}

@keyframes loginGlow {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.3; }
  50% { transform: translate(10px, -10px) scale(1.1); opacity: 0.5; }
}

[data-theme="light"] .login-box {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(250, 251, 253, 0.95) 100%);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 
    0 20px 60px rgba(0, 0, 0, 0.12),
    0 0 0 1px rgba(0, 0, 0, 0.03),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

[data-theme="light"] .login-box::before {
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(0, 0, 0, 0.03) 20%, 
    rgba(0, 0, 0, 0.05) 50%, 
    rgba(0, 0, 0, 0.03) 80%, 
    transparent 100%);
}

[data-theme="light"] .login-box::after {
  background: radial-gradient(circle, rgba(59, 130, 246, 0.02) 0%, transparent 70%);
}

@keyframes loginSlideUp {
  from {
    transform: translateY(30px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.login-logo {
  font-size: 2.4rem;
  font-weight: 700;
  text-shadow: 
    0 2px 8px rgba(0, 0, 0, 0.3),
    0 0 20px rgba(0, 0, 0, 0.1);
  margin-bottom: 40px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  display: inline-block;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  z-index: 1;
}

.login-logo-banner {
  max-width: 100%;
  height: auto;
  max-height: 80px;
  display: block;
  margin: 0 auto;
  object-fit: contain;
}

.login-logo-ascii {
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.5rem;
  line-height: 1.2;
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--text);
  text-align: center;
  white-space: pre;
  overflow: visible;
  letter-spacing: 0;
  text-shadow: 
    0 2px 8px rgba(0, 0, 0, 0.3),
    0 0 20px rgba(59, 130, 246, 0.2);
  display: block;
}

@media (min-width: 480px) {
  .login-logo-ascii {
    font-size: 0.6rem;
  }
}

@media (min-width: 600px) {
  .login-logo-ascii {
    font-size: 0.7rem;
  }
}

.login-logo:hover {
  transform: translateY(-3px) scale(1.02);
}

.login-logo .staats {
  color: var(--text);
}

.login-logo .hub-container {
  background: linear-gradient(135deg, #FF8100 0%, #FF9A40 100%);
  color: #000000;
  padding: 5px 10px;
  border-radius: 6px;
  margin-left: -6px;
  position: relative;
  transition: transform 0.3s ease;
  box-shadow: 0 2px 8px rgba(255, 129, 0, 0.3);
}

.login-logo:hover .hub-container {
  transform: translateX(2px) rotate(1deg);
}

.login-notification {
  padding: 16px 20px;
  margin: 0 0 28px;
  border-radius: 14px;
  font-size: 0.95rem;
  font-weight: 500;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  word-wrap: break-word;
  animation: loginSlideUp 0.5s ease-out forwards;
  backdrop-filter: blur(12px);
  box-shadow: 
    0 4px 16px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  position: relative;
  z-index: 1;
}

.login-notification i {
  font-size: 1.1rem;
  flex-shrink: 0;
}

.login-notification p {
  margin: 0;
}

.login-error {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.18) 0%, rgba(239, 68, 68, 0.12) 100%);
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: rgba(239, 68, 68, 0.95);
  box-shadow: 
    0 0 0 1px rgba(239, 68, 68, 0.1),
    0 4px 16px rgba(239, 68, 68, 0.15);
}

.login-form {
  display: grid;
  gap: 0;
  position: relative;
  z-index: 1;
}

.form-floating {
  position: relative;
  margin-bottom: 24px;
}

.form-floating > input {
  width: 100%;
  border: 2px solid rgba(255, 255, 255, 0.08);
  background: 
    linear-gradient(135deg, rgba(41, 41, 41, 0.6) 0%, rgba(35, 35, 35, 0.5) 100%);
  color: var(--text);
  font-size: 1rem;
  font-weight: 500;
  padding: 18px 60px 18px 56px;
  border-radius: 16px;
  box-shadow: 
    inset 0 2px 8px rgba(0, 0, 0, 0.25),
    0 4px 20px rgba(0, 0, 0, 0.15),
    0 0 0 0 rgba(59, 130, 246, 0);
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(20px);
  position: relative;
}

[data-theme="light"] .form-floating > input {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(250, 251, 253, 0.85) 100%);
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 
    inset 0 2px 8px rgba(0, 0, 0, 0.05),
    0 4px 20px rgba(0, 0, 0, 0.08),
    0 0 0 0 rgba(59, 130, 246, 0);
}

.form-floating > input:focus {
  outline: none;
  border-color: rgba(59, 130, 246, 0.35);
  background: linear-gradient(135deg, rgba(55, 55, 55, 0.75) 0%, rgba(50, 50, 50, 0.7) 100%);
  box-shadow: 
    0 0 0 4px rgba(59, 130, 246, 0.08),
    0 0 0 8px rgba(59, 130, 246, 0.03),
    0 12px 32px rgba(59, 130, 246, 0.15),
    0 4px 16px rgba(0, 0, 0, 0.2),
    inset 0 1px 4px rgba(0, 0, 0, 0.2);
  transform: translateY(-3px);
}

[data-theme="light"] .form-floating > input:focus {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.95) 100%);
  border-color: rgba(59, 130, 246, 0.3);
  box-shadow: 
    0 0 0 4px rgba(59, 130, 246, 0.06),
    0 0 0 8px rgba(59, 130, 246, 0.02),
    0 12px 32px rgba(59, 130, 246, 0.12),
    0 4px 16px rgba(0, 0, 0, 0.1),
    inset 0 1px 4px rgba(0, 0, 0, 0.05);
}

.form-floating > input:hover:not(:focus) {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(47, 47, 47, 0.6);
  transform: translateY(-1px);
}

[data-theme="light"] .form-floating > input:hover:not(:focus) {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(0, 0, 0, 0.12);
}

.form-floating > label {
  position: absolute;
  left: 56px;
  top: 18px;
  color: var(--muted);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  font-weight: 500;
  font-size: 0.95rem;
  z-index: 2;
}

.form-floating > input:focus ~ label,
.form-floating > input:not(:placeholder-shown) ~ label {
  transform: translateY(-36px) translateX(-12px) scale(0.85);
  color: rgba(59, 130, 246, 0.7);
  font-weight: 600;
  background: rgba(28, 32, 42, 0.95);
  padding: 4px 10px;
  border-radius: 8px;
  backdrop-filter: blur(20px);
  border: 1px solid rgba(59, 130, 246, 0.15);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

[data-theme="light"] .form-floating > input:focus ~ label,
[data-theme="light"] .form-floating > input:not(:placeholder-shown) ~ label {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(59, 130, 246, 0.15);
  color: rgba(59, 130, 246, 0.65);
}

.icon-container {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 1.1rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 3;
  background: rgba(255, 255, 255, 0.05);
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
}

.form-floating:focus-within .icon-container {
  transform: translateY(-50%) scale(1.1);
  color: rgba(59, 130, 246, 0.6);
  background: rgba(59, 130, 246, 0.05);
  box-shadow: 
    0 0 16px rgba(59, 130, 246, 0.08),
    0 4px 12px rgba(0, 0, 0, 0.15);
  border-color: rgba(59, 130, 246, 0.2);
}

.logs-search-wrapper {
  position: relative;
  flex: 1;
  min-width: 250px;
  max-width: 400px;
}

.logs-search-input {
  width: 100%;
  padding: 10px 12px 10px 40px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  transition: all 140ms ease;
}

.logs-search-input::placeholder {
  color: var(--muted-2);
}

.logs-search-input:focus {
  outline: none;
  border-color: rgba(59, 130, 246, 0.4);
  background: var(--panel-2);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.logs-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
  font-size: 14px;
}

.logs-search-wrapper:focus-within .logs-search-icon {
  color: rgba(59, 130, 246, 0.7);
}

.logs-per-page-select {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(28, 32, 42, 0.9);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  min-width: 80px;
  transition: all 140ms ease;
}

.logs-per-page-select:hover {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(28, 32, 42, 1);
}

.logs-per-page-select:focus {
  outline: none;
  border-color: rgba(59, 130, 246, 0.4);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

[data-theme="light"] .logs-search-input {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .logs-search-input:focus {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(59, 130, 246, 0.3);
}

[data-theme="light"] .logs-per-page-select {
  background: rgba(255, 255, 255, 1);
  border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .logs-per-page-select:hover {
  border-color: rgba(0, 0, 0, 0.15);
}

.logs-time-cell {
  position: relative;
}

.password-toggle {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 1rem;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}

.password-toggle:hover {
  color: rgba(59, 130, 246, 0.6);
  background: rgba(59, 130, 246, 0.05);
  border-color: rgba(59, 130, 246, 0.15);
  transform: translateY(-50%) scale(1.1);
  box-shadow: 
    0 4px 16px rgba(59, 130, 246, 0.06),
    0 0 12px rgba(0, 0, 0, 0.15);
}

.password-toggle:active {
  transform: translateY(-50%) scale(0.95);
}

.form-floating > input::placeholder {
  color: transparent;
}

.custom-checkbox {
  display: flex;
  align-items: center;
  margin: 24px 0 32px 0;
  user-select: none;
  cursor: pointer;
  justify-content: flex-start;
}

.custom-checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkmark {
  position: relative;
  height: 20px;
  width: 20px;
  background: rgba(41, 41, 41, 0.6);
  border-radius: 6px;
  margin-right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 2px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  box-shadow: 
    inset 0 1px 3px rgba(0, 0, 0, 0.2),
    0 2px 8px rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .checkmark {
  background: rgba(255, 255, 255, 0.8);
  border-color: rgba(0, 0, 0, 0.08);
}

.custom-checkbox:hover input ~ .checkmark {
  background: rgba(50, 50, 50, 0.7);
  transform: scale(1.05);
  border-color: rgba(255, 255, 255, 0.12);
}

[data-theme="light"] .custom-checkbox:hover input ~ .checkmark {
  background: rgba(255, 255, 255, 0.95);
}

.custom-checkbox input:checked ~ .checkmark {
  background: rgba(59, 130, 246, 0.08);
  border-color: rgba(59, 130, 246, 0.25);
  transform: scale(1.1);
  box-shadow: 
    0 0 20px rgba(59, 130, 246, 0.08),
    0 4px 12px rgba(0, 0, 0, 0.2),
    inset 0 1px 2px rgba(255, 255, 255, 0.1);
}

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
  width: 6px;
  height: 10px;
  border: solid white;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

.custom-checkbox input:checked ~ .checkmark:after {
  display: block;
  animation: checkmarkPop 0.3s ease-out;
}

@keyframes checkmarkPop {
  0% {
    transform: rotate(45deg) scale(0);
    opacity: 0;
  }
  50% {
    transform: rotate(45deg) scale(1.2);
    opacity: 0.8;
  }
  100% {
    transform: rotate(45deg) scale(1);
    opacity: 1;
  }
}

.checkbox-label {
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 500;
  transition: color 0.3s ease;
}

.custom-checkbox:hover .checkbox-label {
  color: var(--text);
}

.login-btn {
  background: 
    linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(59, 130, 246, 0.05) 100%);
  border: 1px solid rgba(59, 130, 246, 0.25);
  color: var(--text);
  padding: 17px 32px;
  font-size: 1.1rem;
  font-weight: 600;
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  width: 100%;
  position: relative;
  overflow: hidden;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  box-shadow: 
    0 4px 16px rgba(59, 130, 246, 0.08),
    0 0 0 0 rgba(59, 130, 246, 0);
}

.login-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(59, 130, 246, 0.1), 
    transparent);
  transition: left 0.5s ease;
}

.login-btn:hover:not(:disabled)::before {
  left: 100%;
}

.login-btn:hover:not(:disabled) {
  transform: translateY(-3px) scale(1.01);
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.12) 0%, rgba(59, 130, 246, 0.08) 100%);
  border-color: rgba(59, 130, 246, 0.35);
  box-shadow: 
    0 8px 24px rgba(59, 130, 246, 0.15),
    0 0 0 4px rgba(59, 130, 246, 0.05),
    0 4px 16px rgba(0, 0, 0, 0.2);
}

.login-btn:active:not(:disabled) {
  transform: translateY(0);
}

.login-btn:disabled {
  cursor: not-allowed;
  opacity: 0.8;
}

.btn-text {
  display: block;
}

.btn-loader {
  display: none;
}

.btn-loader .spinner {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: white;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Guest Login Link */
.guest-login-link {
  display: block;
  text-align: center;
  margin-top: 20px;
  padding: 12px 24px;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  border-radius: 10px;
  transition: all 0.3s ease;
  background: transparent;
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}

.guest-login-link::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,
    transparent,
    rgba(255, 255, 255, 0.05),
    transparent);
  transition: left 0.5s ease;
}

.guest-login-link:hover {
  color: var(--text);
  border-color: rgba(59, 130, 246, 0.3);
  background: rgba(59, 130, 246, 0.03);
  transform: translateY(-2px);
}

.guest-login-link:hover::before {
  left: 100%;
}

.guest-login-link:active {
  transform: translateY(0);
}

/* Willkommensseite nach Login */
.login-welcome {
  text-align: center;
  padding: 40px 20px;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.login-welcome-loader {
  margin-bottom: 30px;
}

.spinner-large {
  width: 60px;
  height: 60px;
  border: 4px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  border-top-color: var(--brand-1);
  animation: spin 0.8s linear infinite;
  margin: 0 auto;
}

.login-welcome-content {
  animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.login-welcome-fraction {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--brand-1);
  margin-bottom: 20px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.login-welcome-message {
  font-size: 1.25rem;
  color: var(--text);
  margin-bottom: 10px;
}

.login-welcome-message strong {
  color: var(--brand-1);
  font-weight: 600;
}

.login-welcome-sub {
  font-size: 0.95rem;
  color: var(--muted);
  margin-top: 10px;
}

@media (max-width: 576px) {
  .login-box {
    padding: 35px 25px;
    width: 95%;
  }
  
  .login-logo {
    font-size: 2rem;
  }

  .form-floating > input {
    padding: 16px 55px 16px 50px;
  }

  .form-floating > label {
    left: 50px;
  }
  
  .login-welcome-fraction {
    font-size: 1.25rem;
  }
  
  .login-welcome-message {
    font-size: 1.1rem;
  }

  .icon-container {
    left: 16px;
    width: 24px;
    height: 24px;
    font-size: 0.95rem;
  }
}

.sh-username-online {
  color: #2ecc71;
  font-weight: 500;
}

.sh-badge { padding: 2px 8px; border-radius: 4px; font-size: 0.8em; font-weight: 600; }
.sh-badge-green { background: rgba(0,194,94,0.15); color: #00c25e; }
.sh-badge-red   { background: rgba(255,60,60,0.15); color: #ff3c3c; }

.lang-switcher {
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 11px;
  padding: 3px;
  backdrop-filter: blur(8px);
}

.lang-btn {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 5px 10px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.4px;
  transition: all 160ms ease;
  display: flex;
  align-items: center;
  gap: 5px;
  line-height: 1;
  white-space: nowrap;
  user-select: none;
}

.lang-btn:hover {
  background: var(--panel-2);
  color: var(--text);
}

.lang-btn.lang-active {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.18) 0%, rgba(37, 99, 235, 0.12) 100%);
  border-color: rgba(59, 130, 246, 0.28);
  color: var(--brand-1);
  box-shadow: 0 2px 10px rgba(59, 130, 246, 0.18);
}

[data-theme="light"] .lang-btn.lang-active {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.12) 0%, rgba(37, 99, 235, 0.08) 100%);
  border-color: rgba(59, 130, 246, 0.3);
  color: var(--brand-2);
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);
}

@media (max-width: 768px) {
  .lang-switcher {
    display: none;
  }
}
.sh-badge-gray  { background: rgba(150,150,150,0.15); color: #999999; }

/* ── Main auth buttons ─────────────────────────────────── */
.main-auth-btn {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 8px;
  color: var(--muted);
  transition: color 150ms ease;
  white-space: nowrap;
}

.main-auth-btn:hover {
  color: var(--text);
}

.main-auth-btn--primary {
  background: linear-gradient(135deg, var(--brand-1) 0%, var(--brand-2) 100%);
  color: #fff;
  padding: 7px 16px;
  box-shadow: 0 2px 12px rgba(59, 130, 246,0.25);
  transition: opacity 150ms ease, box-shadow 150ms ease;
}

.main-auth-btn--primary:hover {
  color: #fff;
  opacity: 0.9;
  box-shadow: 0 4px 18px rgba(59, 130, 246,0.35);
}

@media (max-width: 768px) {
  .main-auth-btn { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   REDESIGN 2026 — shared design system
   Primitives used across home, projects, status, docs, tools,
   support and the auth/legal pages so the whole site reads as one
   product. Defined last on purpose: these are the canonical look
   for the class names they cover.
   ═══════════════════════════════════════════════════════════════ */

/* ── Typography ──────────────────────────────────────────────── */
h1, h2, h3, h4,
.dd-title, .sect-title, .page-title {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}

.mono, .dd-mono { font-family: var(--font-mono); }

.grad {
  background: linear-gradient(100deg, var(--brand-1), var(--brand-2) 75%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

::selection { background: var(--brand-1); color: #0a0b13; }

/* ── Section scaffolding ─────────────────────────────────────── */
.dd-section { padding: 80px 0; }
.dd-section--tight { padding-top: 44px; }
.dd-section--flush { padding-top: 0; }

@media (max-width: 720px) {
  .dd-section { padding: 56px 0; }
  .dd-section--tight { padding-top: 32px; }
}

.sect-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 48px;
  flex-wrap: wrap;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-1);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.eyebrow::before {
  content: '';
  width: 14px;
  height: 1px;
  background: var(--brand-1);
}

.sect-title {
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 700;
  margin: 0;
}

.sect-note {
  color: var(--muted-2);
  font-size: 13.5px;
  max-width: 34ch;
  text-align: right;
  margin: 0;
}
@media (max-width: 720px) { .sect-note { text-align: left; } }

/* ── Page hero (inner pages) ─────────────────────────────────── */
.dd-page-hero { padding: 72px 0 40px; }

.dd-page-hero h1 {
  font-size: clamp(34px, 4.6vw, 56px);
  font-weight: 800;
  line-height: 1.02;
  margin: 0 0 14px;
}

.dd-page-hero p {
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.7;
  max-width: 56ch;
  margin: 0;
}

/* ── Terminal accent line ────────────────────────────────────── */
.term-line {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--muted-2);
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 22px;
  letter-spacing: 0.01em;
}
.term-dollar { color: var(--live); font-weight: 600; }
.term-cmd { color: var(--muted); }
.term-cursor {
  display: inline-block;
  width: 7px;
  height: 15px;
  background: var(--brand-1);
  animation: ddBlink 1s step-end infinite;
}
@keyframes ddBlink { 50% { opacity: 0; } }

/* ── Status pill ─────────────────────────────────────────────── */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--live);
  background: var(--live-soft);
  border-radius: 99px;
  padding: 5px 11px 5px 9px;
  width: fit-content;
}
.status-pill .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--live);
  box-shadow: 0 0 0 3px var(--live-soft);
}
.status-pill.is-beta { color: #fbbf24; background: rgba(251, 191, 36, 0.13); }
.status-pill.is-beta .dot { background: #fbbf24; box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.13); }
.status-pill.is-dev { color: var(--brand-1); background: var(--brand-soft); }
.status-pill.is-dev .dot { background: var(--brand-1); box-shadow: 0 0 0 3px var(--brand-soft); }

/* ── Buttons ─────────────────────────────────────────────────── */
.dd-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13.5px;
  background: var(--text);
  color: var(--bg);
  padding: 13px 22px;
  border-radius: 11px;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.dd-btn:hover {
  color: var(--bg);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(59, 130, 246, 0.22);
}
.dd-btn i, .dd-btn svg { transition: transform 200ms ease; }
.dd-btn:hover i, .dd-btn:hover svg { transform: translateX(2px); }

.dd-btn--ghost {
  background: transparent;
  color: var(--brand-1);
  border: 1px solid var(--border-2);
}
.dd-btn--ghost:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: none;
}

.dd-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 13px;
  color: var(--brand-1);
}
.dd-link i, .dd-link svg { transition: transform 200ms ease; }
.dd-link:hover i, .dd-link:hover svg { transform: translate(2px, -2px); }

/* ── Surfaces / cards ────────────────────────────────────────── */
.dd-card {
  background: linear-gradient(180deg, var(--surface), var(--surface) 60%, var(--surface-2));
  border: 1px solid var(--border);
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  transition: transform 320ms cubic-bezier(.16, 1, .3, 1), border-color 320ms ease, box-shadow 320ms ease;
}
a.dd-card:hover,
.dd-card--hover:hover {
  transform: translateY(-4px);
  border-color: var(--border-2);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.38);
}

.dd-card__topline {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.4), transparent);
}

/* Browser-chrome strip above a screenshot */
.dd-chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 11px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.dd-chrome > span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
}
.dd-chrome__label {
  margin-left: 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--muted-2);
  letter-spacing: 0.02em;
}

/* ── Hairline data strip (stats / specs) ─────────────────────── */
.dd-strip {
  display: flex;
  gap: 0;
  border-top: 1px solid var(--border);
}
/* Die Trennlinie gehoert jeweils zum linken Nachbarn (border-right).
   Ohne padding-left klebte der Inhalt des naechsten Feldes direkt an
   dieser Linie — deshalb Luft auf beiden Seiten. Erstes und letztes
   Feld bleiben aussen buendig, dort ist keine Linie. */
.dd-strip > div {
  flex: 1;
  padding: 22px 28px 0 28px;
  border-right: 1px solid var(--border);
  min-width: 140px;
}
.dd-strip > div:first-child { padding-left: 0; }
.dd-strip > div:last-child { border-right: none; padding-right: 0; }

.dd-strip__label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted-2);
  margin-bottom: 10px;
}
.dd-strip__val {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 28px;
  color: var(--text);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  min-height: 24px;
}
.dd-strip__val small {
  font-size: 14px;
  color: var(--muted-2);
  font-weight: 400;
  margin-left: 2px;
}

@media (max-width: 640px) {
  .dd-strip { flex-wrap: wrap; }
  .dd-strip > div {
    flex: 1 1 45%;
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 18px 0 16px;
  }
  .dd-strip > div:last-child { border-bottom: none; }
}

.stat-shimmer {
  display: inline-block;
  width: 64px;
  height: 22px;
  border-radius: 5px;
  background: linear-gradient(90deg, var(--surface) 25%, var(--surface-2) 50%, var(--surface) 75%);
  background-size: 300% 100%;
  animation: ddShimmer 1.8s ease-in-out infinite;
}
@keyframes ddShimmer {
  0%   { background-position: 150% 0; }
  100% { background-position: -150% 0; }
}

/* ── FAQ / accordion rows ────────────────────────────────────── */
.dd-faq { border-top: 1px solid var(--border); max-width: 820px; }
.dd-faq__row { border-bottom: 1px solid var(--border); }
.dd-faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: none;
  border: none;
  text-align: left;
  color: var(--text);
  cursor: pointer;
  padding: 22px 4px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15.5px;
  transition: color 150ms ease;
}
.dd-faq__q:hover { color: var(--brand-1); }

.dd-faq__plus { position: relative; width: 18px; height: 18px; flex-shrink: 0; }
.dd-faq__plus::before,
.dd-faq__plus::after {
  content: '';
  position: absolute;
  background: var(--muted-2);
  transition: transform 260ms ease, background 260ms ease, opacity 260ms ease;
}
.dd-faq__plus::before { width: 100%; height: 1.5px; top: 50%; left: 0; transform: translateY(-50%); }
.dd-faq__plus::after  { height: 100%; width: 1.5px; left: 50%; top: 0; transform: translateX(-50%); }
.dd-faq__row.open .dd-faq__plus::after { transform: translateX(-50%) rotate(90deg); opacity: 0; }
.dd-faq__row.open .dd-faq__plus::before { background: var(--brand-1); }

.dd-faq__a { max-height: 0; overflow: hidden; transition: max-height 380ms cubic-bezier(.16, 1, .3, 1); }
.dd-faq__row.open .dd-faq__a { max-height: 320px; }
.dd-faq__a p {
  margin: 0 4px 22px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
  max-width: 64ch;
}
.dd-faq__a code {
  font-family: var(--font-mono);
  font-size: 12px;
  background: var(--brand-soft);
  color: var(--brand-1);
  padding: 2px 6px;
  border-radius: 4px;
}

/* ── Closing CTA band ────────────────────────────────────────── */
.cta-band {
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 44px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  background: linear-gradient(120deg, rgba(59, 130, 246, 0.08), rgba(91, 110, 245, 0.05));
}
.cta-band h3 { font-size: 22px; margin: 0 0 6px; font-weight: 700; }
.cta-band p { margin: 0; color: var(--muted); font-size: 14px; }

@media (max-width: 640px) {
  .cta-band { padding: 32px 24px; }
}

/* ── Scroll reveal ───────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 700ms cubic-bezier(.16, 1, .3, 1), transform 700ms cubic-bezier(.16, 1, .3, 1);
}
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .term-cursor, .stat-shimmer { animation: none; }
}

/* ── Main-site nav: text-only, per the redesign ───────────────
   Panel areas (dxBinder, dxBots, PurpleV, RPG-City) keep their
   icon-led menus — see $shellArea in partials/header.php. */
.area-site .nav > a .nav-icon,
.area-site .nav > .nav-dd > .nav-dd-trigger .nav-icon {
  display: none;
}

.area-site .brand-name { font-size: 16.5px; }
.area-site .brand-sub:empty { display: none; }

/* On mobile the nav becomes a full-screen drawer where icons do
   help scanning, so bring them back there. */
@media (max-width: 768px) {
  .area-site .nav > a .nav-icon,
  .area-site .nav > .nav-dd > .nav-dd-trigger .nav-icon {
    display: inline-flex;
  }
}

/* Main-site header shares the content column's 1360px box but, unlike
   page content, sits flush against its edges (no 40px inset). That is
   what makes the brand overhang the headline slightly on the left and
   the nav reach past it on the right — matching the design. Panel
   areas keep the full-bleed bar. */
.area-site .topbar .container {
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: 0;
}

@media (max-width: 720px) {
  .area-site .topbar .container { padding: 0 20px; }
}

/* Dropdown entries are text-only on the main site, like the nav itself. */
.area-site .nav > .nav-dd .nav-dd-menu .nav-dd-item i {
  display: none;
}

/* Desktop main-site bar mirrors the design's flex row: brand pushed
   left, nav flush right. The grid version left a 16px gap for the
   (whitespace-only, so not :empty) actions column, pulling the nav in
   from the edge. Mobile keeps the grid — the drawer layout depends on
   its column placement. */
@media (min-width: 769px) {
  .area-site .topbar-inner {
    display: flex;
    align-items: center;
    gap: 28px;
  }
  .area-site .topbar-inner .brand { margin-right: auto; }
  .area-site .topbar-inner .nav { justify-self: auto; margin: 0; }
  .area-site .topbar-inner .actions { gap: 10px; }

  /* Renders as whitespace-only for signed-out visitors, so :empty
     never matches — test for element children instead, or it keeps
     its flex slot and the 28px gap before it. */
  .area-site .topbar-inner .actions:not(:has(*)) { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   dxBinder — Neuaufbau in der Formensprache der Hauptseite

   Home baut mit Haarlinien, Mono-Mikrolabels und grossen Mono-
   Zahlen (siehe .dd-strip / .eyebrow) — fast ohne gefuellte
   Kaesten. Das Panel machte bisher das Gegenteil: Karte in Karte
   in Karte. Genau daher kam der Bruch beim Wechsel Home →
   dxBinder. Dieser Abschnitt dreht das um: Fuellungen raus,
   Haarlinien rein, Typo auf die Home-Skala.

   Alles laeuft ueber die gemeinsamen .sh-*-Hooks; unter
   dxbinder/ wurde keine Datei angefasst. .sh-* benutzt nur
   dxBinder — PurpleV und RPG-City nicht —, der Abschnitt ist
   damit von selbst abgegrenzt. Palette, Verlaeufe und der
   Seitenhintergrund bleiben unveraendert.
   ═══════════════════════════════════════════════════════════════ */

/* ── Header: eine Reihe ──────────────────────────────────────
   Logo links, Navigation mittig, Profil-Avatar ganz rechts —
   die Basis-Grid-Aufteilung (auto 1fr auto) macht das schon,
   sie brauchte nur Platz.

   Denn dxBinder hat 9 Top-Level-Punkte mit Icon und Caret. Mit
   allen Labels braucht die Leiste rund 1490px; die 1360er-Box
   der Startseite reichte dafuer nicht, .nav { flex-wrap: wrap }
   hat sie deshalb still umgebrochen — daher der "geht einen
   tiefer"-Effekt.

   Zwei Stellschrauben loesen das: die Leiste bekommt dieselbe
   1640er-Breite wie der Panel-Inhalt (.sh-shell .container),
   wodurch Header und Seiteninhalt endlich buendig stehen, und
   unterhalb von 1560px klappen die Gruppen-Labels auf Icon +
   Caret ein. Umgebrochen wird nie mehr. */
@media (min-width: 769px) {
  .area-panel.panel-dxbinder .topbar .container {
    width: min(1640px, calc(100% - 16px));
    max-width: none;
    margin: 0 auto;
    padding: 0;
  }

  /* Basis-Grid beibehalten: Brand | Nav | Aktionen. Nur der
     Umbruch muss weg. */
  .area-panel.panel-dxbinder .topbar-inner > .nav {
    flex-wrap: nowrap;
    gap: 2px;
  }

  .area-panel.panel-dxbinder .nav a,
  .area-panel.panel-dxbinder .nav .nav-dd-trigger {
    font-size: 13px;
    padding: 7px 11px;
    border-radius: 9px;
    white-space: nowrap;
  }

  .area-panel.panel-dxbinder .nav .nav-icon { opacity: 0.75; }

  .area-panel.panel-dxbinder .nav a:hover .nav-icon,
  .area-panel.panel-dxbinder .nav .nav-dd-trigger:hover .nav-icon { opacity: 1; }

  .area-panel.panel-dxbinder .brand-name { font-size: 16.5px; }

  /* Avatar bleibt der rechte Anker der Leiste. */
  .area-panel.panel-dxbinder .topbar-inner .actions {
    justify-self: end;
    align-self: center;
    gap: 10px;
  }

  /* Rendert fuer ausgeloggte Besucher als reiner Whitespace, also
     greift :empty nicht — auf Kindelemente pruefen. */
  .area-panel.panel-dxbinder .topbar-inner .actions:not(:has(*)) { display: none; }
}

/* Unter 1560px reicht der Platz nicht fuer alle neun Labels:
   Gruppen auf Icon + Caret einklappen. Die Beschriftung bleibt
   im DOM (Screenreader) und haengt als Tooltip am Element; die
   eigentliche Navigation steckt ohnehin in den Menues. */
@media (min-width: 769px) and (max-width: 1559px) {
  .area-panel.panel-dxbinder .nav > .nav-dd > .nav-dd-trigger > span:not(.nav-icon):not(.nav-caret),
  .area-panel.panel-dxbinder .nav > a > span:not(.nav-icon) {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .area-panel.panel-dxbinder .nav > .nav-dd > .nav-dd-trigger,
  .area-panel.panel-dxbinder .nav > a { gap: 4px; }

  /* Der Benutzername kostet hier ebenfalls Breite — der Avatar
     traegt die Erkennung, der Name steht im Menue darunter. */
  .area-panel.panel-dxbinder .actions .user-trigger .user-name { display: none; }
}

/* ── Seitenkopf ──────────────────────────────────────────────
   Gleicher Aufbau wie .sect-head auf Home: Mono-Eyebrow ueber
   der Display-Ueberschrift, darunter eine Haarlinie. Die
   Ueberschrift bleibt in Panel-Groesse — Homes 38px waeren
   ueber einer dichten Tabelle deplatziert. */
.sh-admin-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.sh-admin-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--text);
}

.sh-admin-sub {
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
  margin-top: 8px;
  max-width: 68ch;
}

/* ── Kennzahlen als Leiste statt als Karten ──────────────────
   Das ist .dd-strip von der Startseite: keine Fuellung, keine
   Rahmen, nur Haarlinien zwischen den Spalten, Mono-Mikrolabel
   oben, grosse Mono-Zahl darunter. Der groesste einzelne
   Schritt weg vom Karte-in-Karte-Look. */
.sh-admin-stats {
  display: flex;
  gap: 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin: 0 0 24px;
  padding: 0;
}

.sh-stat-card {
  flex: 1;
  min-width: 150px;
  border: 0;
  border-right: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  padding: 20px 24px 20px 0;
}

.sh-stat-card:first-child { padding-left: 0; }
.sh-stat-card:last-child { border-right: 0; padding-right: 0; }

.sh-stat-title,
.sh-total-label,
.sh-field span {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted-2);
  margin-bottom: 10px;
}

.sh-stat-value,
.sh-total-value {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 28px;
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

/* Das Icon war die halbe Fuellung der alten Karte — als reine
   Kontur neben der Zahl bleibt es lesbar, ohne einen Kasten
   aufzumachen. */
.sh-stat-icon {
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  border-radius: 0;
  color: var(--muted-2);
  font-size: 16px;
}

.sh-stat-icon.is-green,
.sh-stat-icon.is-amber,
.sh-stat-icon.is-red { border: 0; }

@media (max-width: 900px) {
  .sh-admin-stats { flex-wrap: wrap; }
  .sh-stat-card {
    flex: 1 1 45%;
    border-right: 0;
    padding: 16px 0;
  }
  .sh-stat-card:nth-child(odd) { padding-right: 20px; }
}

/* Die Summenkarte bleibt als einziges Element hervorgehoben —
   sie ist der Abschluss einer Rechnung, kein Datenpunkt unter
   vielen. Fuellung raus, Akzentlinie links rein. */
.sh-total-card {
  border: 0;
  border-left: 2px solid rgba(59, 130, 246, 0.55);
  border-radius: 0;
  background: transparent;
  padding: 4px 0 4px 16px;
  margin-bottom: 20px;
}

/* ── Tabs als Unterstrich-Leiste ─────────────────────────────
   Die Pillen-Gruppe war noch ein gefuellter Kasten im Kasten.
   Eine Haarlinie mit aktiver Unterstreichung liegt naeher an
   Home und braucht keinen eigenen Hintergrund. */
.sh-tabs {
  display: flex;
  gap: 4px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}

.sh-tabs::-webkit-scrollbar { display: none; }

.sh-tab {
  position: relative;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 10px 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  white-space: nowrap;
  color: var(--muted-2);
  transition: color 140ms ease;
}

.sh-tab::after {
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: -1px;
  height: 2px;
  background: rgba(59, 130, 246, 0.75);
  transform: scaleX(0);
  transition: transform 160ms ease;
}

.sh-tab:hover {
  color: var(--text);
  background: transparent;
  border-color: transparent;
}

.sh-tab.active {
  color: var(--text);
  font-weight: 700;
  background: transparent;
  border-color: transparent;
}

.sh-tab.active::after { transform: scaleX(1); }

.sh-tabs-secondary { margin-top: 14px; }

.sh-tab-small { padding: 8px 12px; font-size: 10.5px; }

/* ── Tabellen: Rahmen weg, Haarlinien bleiben ────────────────
   Der gerundete Kasten mit Schlagschatten war der letzte
   Karte-in-Karte-Rest. Die Tabelle sitzt jetzt direkt auf dem
   Panel und wird nur von ihren Linien getragen. Scrollen und
   der klebende Kopf aus dem Tabellenblock bleiben. */
.sh-table-wrap {
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.sh-table thead th {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

[data-theme="light"] .sh-table thead th { background: #fff; }

/* .sh-action / .sh-status / .sh-check werden sitewide nirgends
   benutzt — dxBinder nimmt fuer Buttons .btn / .btn-primary, also
   dieselbe Komponente wie die Startseite. Hier stand kurzzeitig
   eine Angleichung dafuer; sie waere toter Code gewesen.
   .sh-iconbtn ist dagegen in Gebrauch (14x). */
.sh-iconbtn { border-radius: 12px; }

/* ── Formularfelder ──────────────────────────────────────────
   Sichtbarer Fokus-Ring; vorher lag darauf nur der Browser-
   Default. */
.sh-field input,
.sh-field select {
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

.sh-field input:hover,
.sh-field select:hover { border-color: var(--border-2); }

.sh-field input:focus,
.sh-field select:focus {
  outline: none;
  border-color: rgba(59, 130, 246, 0.45);
  box-shadow: 0 0 0 3px var(--ring);
}

.sh-field input::placeholder { color: var(--muted-2); }

/* ── Fokus-Ringe ─────────────────────────────────────────────
   Durchgaengig tastaturbedienbar. :focus-visible statt :focus,
   damit Mausklicks keinen Ring hinterlassen. */
.sh-tab:focus-visible,
.sh-action:focus-visible,
.sh-iconbtn:focus-visible,
.sh-modal-x:focus-visible,
.sh-table a:focus-visible {
  outline: 2px solid rgba(59, 130, 246, 0.75);
  outline-offset: 2px;
}

/* ── Panel auf Mobil ─────────────────────────────────────────
   24px Innenabstand kosten auf einem 360er-Schirm zu viel
   Textbreite. */
@media (max-width: 640px) {
  .sh-main { padding: 16px; border-radius: 12px; }
  .sh-admin-head { margin-bottom: 16px; padding-bottom: 12px; }
  .sh-admin-title { font-size: 19px; }
  .sh-stat-value, .sh-total-value { font-size: 24px; }
  .sh-admin-filter { flex-wrap: wrap; gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .sh-tab,
  .sh-tab::after,
  .sh-table tbody tr { transition: none; }
  .sh-iconbtn:hover { transform: none; }
}