#research-plan { min-width: 0; overflow-wrap: anywhere; }
#research-plan .cyber-card { margin-block: 1rem; min-width: 0; }
#research-plan form { display: flex; flex-wrap: wrap; align-items: end; gap: .75rem; margin-block: .75rem; }
#research-plan label { display: flex; flex-direction: column; gap: .4rem; min-width: 0; max-width: 100%; }
#research-plan select, #research-plan input { max-width: 100%; box-sizing: border-box; }
#research-plan select { width: 28rem; }
#research-plan li { margin-block: .75rem; }
#research-plan li > span { display: block; }
#research-plan details > div { max-width: 100%; min-width: 0; }
#research-plan .cyber-btn { white-space: normal; }

#blueprints-deck { min-width: 0; overflow-wrap: anywhere; }
#blueprints-deck .cyber-card { min-width: 0; margin-block: 1rem; }
#blueprints-deck form > label { display: block; margin-block: .75rem; }
#blueprints-deck input, #blueprints-deck select { max-width: 100%; box-sizing: border-box; }
#blueprints-deck .blueprint-component { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-block: .75rem; }
#blueprints-deck .blueprint-component > label:first-child { flex: 1 1 18rem; }
#blueprints-deck .blueprint-component input[type=number] { width: 5rem; }
#blueprints-deck fieldset { min-width: 0; }
#blueprints-deck .cyber-btn { white-space: normal; }
#blueprints-deck li { margin-block: .75rem; }

#dossiers-deck, #dossiers-deck .cyber-card { min-width: 0; overflow-wrap: anywhere; }
#dossiers-deck form { display: flex; flex-wrap: wrap; gap: .75rem; margin-block: 1rem; align-items: end; }
#dossiers-deck form label { flex: 1 1 14rem; }
#dossiers-deck #dossier-editor { display: block; }
#dossiers-deck #dossier-editor label { display: block; margin-block: .75rem; }
#dossiers-deck input, #dossiers-deck textarea, #dossiers-deck select { width: 100%; max-width: 100%; box-sizing: border-box; }
#dossiers-deck .cyber-btn { white-space: normal; }
#dossiers-deck .dossier-snapshot { border-top: 1px solid var(--border-color, #334155); margin-top: 1rem; padding-top: 1rem; }
#dossiers-deck dl { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
#dossiers-deck li { margin-block: .75rem; }

#archive-deck, #archive-deck .card { min-width: 0; overflow-wrap: anywhere; }
#archive-deck .archive-filter { display: flex; flex-wrap: wrap; gap: .75rem; margin-block: 1rem; align-items: end; }
#archive-deck .archive-filter label { display: flex; flex-direction: column; gap: .4rem; flex: 1 1 12rem; min-width: 0; }
#archive-deck select { width: 100%; max-width: 100%; box-sizing: border-box; }
#archive-deck .cyber-btn { white-space: normal; }
#archive-deck dl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: .5rem; }
#archive-deck dd { margin: 0; }
#archive-deck .card { margin-block: 1rem; }

#simulator-deck, #simulator-deck .card { min-width: 0; overflow-wrap: anywhere; }
#simulator-deck .simulator-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: 1rem; }
#simulator-deck .simulator-side { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 7rem); gap: .4rem .75rem; align-items: center; border: 0; padding: 0; margin: .75rem 0 0; }
#simulator-deck .simulator-side legend, #simulator-deck .simulator-side p { grid-column: 1 / -1; margin: 0; }
#simulator-deck legend { font-weight: 600; }
#simulator-deck input, #simulator-deck select { width: 100%; max-width: 100%; box-sizing: border-box; }
#simulator-deck .simulator-hint { color: var(--warning, #f59e0b); font-size: .85rem; }
#simulator-deck .simulator-actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
#simulator-deck .cyber-btn { white-space: normal; }
#simulator-deck dl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: .5rem; }
#simulator-deck dd { margin: 0; }
#simulator-deck .card { margin-block: 1rem; }
#simulator-deck .simulator-influence { width: 100%; border-collapse: collapse; font-size: .9rem; }
#simulator-deck .simulator-influence th, #simulator-deck .simulator-influence td { padding: .3rem .4rem; text-align: left; border-bottom: 1px solid var(--border-color, #334155); }

#campaign-deck, #campaign-deck .card { min-width: 0; overflow-wrap: anywhere; }
#campaign-deck .card { margin-block: 1rem; }
#campaign-deck .campaign-chapters { list-style: none; padding: 0; margin: 1rem 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 1rem; }
#campaign-deck .campaign-chapter { margin-block: 0; }
#campaign-deck .campaign-chapter[data-state="next"] { border-color: rgb(var(--accent)); }
#campaign-deck .campaign-chapter[data-state="locked"] { border-style: dashed; }
#campaign-deck dl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: .5rem; }
#campaign-deck dd { margin: 0; }
#campaign-deck .campaign-cost-note, #campaign-deck .campaign-blocked { border-left: 3px solid rgb(var(--warning)); padding-left: .75rem; }
#campaign-deck .campaign-error { border-left: 3px solid rgb(var(--danger)); }
#campaign-deck .cyber-btn { white-space: normal; max-width: 100%; }
#campaign-deck .campaign-table-wrap { max-width: 100%; overflow-x: auto; }
#campaign-deck .campaign-history { width: 100%; border-collapse: collapse; font-size: .9rem; }
#campaign-deck .campaign-history th, #campaign-deck .campaign-history td { padding: .3rem .4rem; text-align: left; border-bottom: 1px solid var(--border-color, #334155); overflow-wrap: normal; white-space: nowrap; }

#funding-deck, #funding-deck .cyber-card { min-width: 0; overflow-wrap: anywhere; }
#funding-deck label { display: block; margin-block: .75rem; }
#funding-deck select, #funding-deck textarea { width: 100%; max-width: 100%; box-sizing: border-box; }
#funding-deck .cyber-btn { white-space: normal; }
#funding-deck progress { width: min(100%, 24rem); }

/* Refs #93: Kollektiv-Wochenauftrag, nur lesend; Tabellen scrollen auf schmalen Bildschirmen horizontal. */
#contract-deck, #contract-deck .card { min-width: 0; overflow-wrap: anywhere; }
#contract-deck .card { margin-block: 1rem; }
#contract-deck dl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: .5rem; }
#contract-deck dd { margin: 0; }
#contract-deck .contract-note { border-left: 3px solid rgb(var(--warning)); padding-left: .75rem; }
#contract-deck .contract-tiers { padding-left: 0; list-style: none; margin: 1rem 0; display: grid; gap: .5rem; }
#contract-deck .contract-tier { padding: .4rem .6rem; border-left: 3px solid var(--border-color, #334155); }
#contract-deck .contract-tier[data-reached="true"] { border-left-color: rgb(var(--success)); }
#contract-deck .contract-tier progress { width: min(100%, 16rem); vertical-align: middle; }
#contract-deck .contract-roles, #contract-deck .contract-rules ul { padding-left: 1.25rem; }
#contract-deck .contract-table-wrap { max-width: 100%; overflow-x: auto; }
#contract-deck .contract-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
#contract-deck .contract-table th, #contract-deck .contract-table td { padding: .3rem .4rem; text-align: left; border-bottom: 1px solid var(--border-color, #334155); overflow-wrap: normal; white-space: nowrap; }
#contract-deck .contract-rules .contract-table td:last-child { white-space: normal; min-width: 12rem; }
/* Refs #95: Kollektiv-Einsatzplanung */
#operations-deck, #operations-deck .card { min-width: 0; overflow-wrap: anywhere; }
#operations-deck .card { margin-block: 1rem; }
#operations-deck .operation-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem; }
#operations-deck .operation-head h4 { margin: 0; }
#operations-deck .operation-status { padding: .1rem .5rem; border: 1px solid var(--border-color, #334155); border-radius: 999px; font-size: .85rem; white-space: nowrap; }
#operations-deck .operation-status[data-status="offen"] { border-color: rgb(var(--success)); }
#operations-deck .operation-status[data-status="abgebrochen"] { border-color: rgb(var(--warning)); }
#operations-deck .operation-facts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: .4rem .75rem; }
#operations-deck .operation-facts dd { margin: 0; }
#operations-deck .operation-note { border-left: 3px solid rgb(var(--warning)); padding-left: .75rem; }
#operations-deck .operation-purpose { white-space: normal; border-left: 3px solid var(--border-color, #334155); padding-left: .75rem; }
#operations-deck .operation-table-wrap { max-width: 100%; overflow-x: auto; }
#operations-deck .operation-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
#operations-deck .operation-table caption { text-align: left; padding-bottom: .3rem; }
#operations-deck .operation-table th, #operations-deck .operation-table td { padding: .3rem .4rem; text-align: left; border-bottom: 1px solid var(--border-color, #334155); }
#operations-deck .operation-own ul { padding-left: 1.25rem; }
#operations-deck .operation-form, #operations-deck .operation-pledge { display: grid; gap: .4rem; max-width: 40rem; }
#operations-deck .operation-form input[type="text"], #operations-deck .operation-form select, #operations-deck .operation-form textarea { width: 100%; box-sizing: border-box; }
#operations-deck .operation-window { display: flex; flex-wrap: wrap; gap: .75rem; }
#operations-deck .operation-window label { display: grid; gap: .25rem; }
#operations-deck .operation-invites, #operations-deck .operation-pledge fieldset { display: grid; gap: .25rem; min-width: 0; }
#operations-deck .operation-transitions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
#operations-deck .operation-transitions form { margin: 0; }
@media (max-width: 600px) {
    #operations-deck .operation-facts { grid-template-columns: minmax(0, 1fr); }
    #operations-deck .operation-facts dt { font-weight: 600; }
}

:root {
  color-scheme: dark;
  /* --- Cyberdeck OS Design Tokens (2026+) --- */
  --deck-bg: #04070b;
  --deck-panel: rgba(9, 15, 25, 0.82);
  --deck-panel-active: rgba(14, 23, 38, 0.92);
  --deck-border-subtle: rgba(0, 240, 255, 0.12);
  --deck-border-glow: rgba(0, 240, 255, 0.45);
  --deck-glow-cyan: 0 0 16px rgba(0, 240, 255, 0.35);
  --deck-glow-emerald: 0 0 16px rgba(0, 255, 157, 0.35);
  --deck-glow-amber: 0 0 16px rgba(255, 184, 0, 0.35);
  --deck-glow-gold: 0 0 16px rgba(255, 215, 0, 0.45);
  --deck-glow-crimson: 0 0 16px rgba(255, 51, 102, 0.4);

  --bg: var(--deck-bg);
  --bg-2: #070c14;
  --bg-3: #0c1524;
  --text: #e6f1ff;
  --text-muted: #8899ac;
  --accent: 0 240 255;
  /* RGB triplet for neon cyan */
  --accent-secondary: 0 140 255;
  /* RGB for blue */
  --danger: 255 51 102;
  --success: 0 255 157;
  --warning: 255 184 0;
  --border: var(--deck-border-subtle);
  --border-highlight: #22344e;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --sidebar-width: 68px;
  --sidebar-width-expanded: 240px;
  --header-height: 64px;
  --notification-bottom: 20px;
  --font-main: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", Consolas, monospace;
  --z-toast: 9999;
  --z-modal: 10000;

  /* --- Cyberpunk Design System Tokens --- */
  --cyber-bg: var(--deck-bg);
  --cyber-surface-1: #070c14;
  --cyber-surface-2: #0c1524;
  --cyber-surface-glass: var(--deck-panel);
  --cyber-surface-glass-hover: var(--deck-panel-active);
  --neon-cyan: #00f0ff;
  --neon-cyan-rgb: 0, 240, 255;
  --neon-emerald: #00ff9d;
  --neon-emerald-rgb: 0, 255, 157;
  --neon-amber: #ffb800;
  --neon-amber-rgb: 255, 184, 0;
  --neon-gold: #ffd700;
  --neon-gold-rgb: 255, 215, 0;
  --neon-crimson: #ff3366;
  --neon-crimson-rgb: 255, 51, 102;
  --neon-purple: #a855f7;
  --neon-purple-rgb: 168, 85, 247;
  
  --glow-cyan: var(--deck-glow-cyan);
  --glow-emerald: var(--deck-glow-emerald);
  --glow-amber: var(--deck-glow-amber);
  --glow-gold: var(--deck-glow-gold);
  --glow-crimson: var(--deck-glow-crimson);
  --glow-purple: 0 0 16px rgba(168, 85, 247, 0.35);

  --chamfer-sm: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
  --chamfer-md: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  --chamfer-btn: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Sammelstart: native Dialog-Fokusführung, fest sichtbarer Abschlussbutton. */
.bulk-results-dialog {
  width: min(560px, calc(100% - 32px));
  max-width: none;
  max-height: 90vh;
  max-height: 90dvh;
  padding: 24px;
  color: var(--text);
  background: var(--bg-2);
  border: 1px solid rgba(var(--accent) / 0.45);
  border-radius: var(--radius-md);
  box-shadow: var(--deck-glow-cyan), 0 24px 80px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  overflow-wrap: anywhere;
}

.bulk-results-dialog[open] { display: flex; flex-direction: column; gap: 16px; }
.bulk-results-dialog::backdrop { background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(4px); }
.bulk-results-dialog h3 { margin: 0; font-size: 1.2rem; }
.bulk-results-dialog > h3,
.bulk-results-dialog > p,
.bulk-results-dialog > button { flex-shrink: 0; }
.bulk-results-dialog > button { align-self: flex-end; }
#qol-bulk-results-summary { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.bulk-results-count { padding: 4px 10px; border: 1px solid currentColor; border-radius: var(--radius-sm); font-size: 0.85rem; }
.bulk-results-success { color: rgb(var(--success)); }
.bulk-results-warning { color: rgb(var(--warning)); }
.bulk-results-danger { color: rgb(var(--danger)); }
.bulk-results-content { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.bulk-results-content > p { margin: 0 0 16px; }
.bulk-results-list { list-style: none; margin: 0; padding: 0; }
.bulk-results-list li { padding: 12px 0; border-bottom: 1px solid var(--border); }
.bulk-results-list strong { display: block; }
.bulk-results-list span { font-size: 0.85rem; }
.bulk-results-list p { margin: 4px 0 0; color: var(--text-muted); font-size: 0.9rem; }
.bulk-results-content details { margin-top: 12px; }
.bulk-results-content summary { cursor: pointer; color: rgb(var(--accent)); }
.bulk-results-content summary:focus-visible { outline: 2px solid rgb(var(--accent)); outline-offset: 2px; }

[hidden] {
  display: none !important;
}

html {
  /* Gleiche Inhaltsbreite auf kurzen und langen Spielseiten. */
  scrollbar-gutter: stable;
  overflow-x: hidden;
  max-width: 100vw;
}

body {
  margin: 0;
  overflow-x: hidden;
  max-width: 100vw;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-main);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  background-image:
    radial-gradient(ellipse 90% 50% at 50% -10%, rgba(0, 240, 255, 0.08) 0%, transparent 65%),
    radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(var(--accent)/0.09) 0%, transparent 55%),
    linear-gradient(rgba(0, 240, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 240, 255, 0.025) 1px, transparent 1px),
    linear-gradient(var(--deck-bg) 0%, #070c14 100%);
  background-size: 100% 100%, 100% 100%, 32px 32px, 32px 32px, 100% 100%;
  background-attachment: fixed;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

button {
  background: none;
  border: none;
  font: inherit;
  cursor: pointer;
  color: inherit;
}

img {
  max-width: 100%;
  height: auto;
}

/* --- Layout Shell --- */
.app-shell {
  display: flex;
  min-height: 100vh;
  min-height: 100dvh;
}

/* --- Tactical Command Dock (Sidebar - Cyberdeck OS 2026+) --- */
.app-sidebar {
  width: var(--sidebar-width);
  background: rgba(9, 14, 23, 0.95);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 50;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s ease;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  overflow: visible;
}

.app-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-left: var(--sidebar-width);
  min-width: 0;
  transition: margin-left 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Sidebar bleibt fest als 68px Icon-Rail auf Desktop */
@media (min-width: 901px) {
  .app-sidebar {
    width: 68px !important;
    min-width: 68px !important;
    max-width: 68px !important;
    overflow: visible !important;
  }
  .app-main {
    margin-left: 68px !important;
  }
  .sidebar-header {
    justify-content: center !important;
    padding: 0 !important;
  }
  .app-sidebar .brand {
    justify-content: center !important;
    width: auto !important;
  }
  .app-sidebar .brand-text {
    display: none !important;
  }
  .sidebar-nav {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 6px 4px !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 240, 255, 0.35) rgba(10, 16, 26, 0.4);
  }
  .sidebar-nav::-webkit-scrollbar {
    width: 4px !important;
  }
  .sidebar-nav::-webkit-scrollbar-track {
    background: rgba(10, 16, 26, 0.5) !important;
    border-radius: 2px !important;
  }
  .sidebar-nav::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(0, 240, 255, 0.55), rgba(0, 255, 157, 0.35)) !important;
    border-radius: 2px !important;
    box-shadow: 0 0 6px rgba(0, 240, 255, 0.4) !important;
  }
  .sidebar-nav::-webkit-scrollbar-thumb:hover {
    background: var(--neon-cyan) !important;
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.8) !important;
  }
  .sidebar-nav ul {
    overflow: visible !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .sidebar-nav li {
    position: relative !important;
    overflow: visible !important;
  }
  .nav-group-title {
    display: none !important;
  }
  .sidebar-nav-link {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 2px auto !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: var(--radius-md) !important;
    overflow: visible !important;
    transform: none !important;
  }
  .sidebar-nav-link:hover {
    transform: none !important;
  }
  .sidebar-nav-link .nav-icon-wrapper {
    width: 36px !important;
    height: 36px !important;
    border-radius: 8px !important;
  }
  .sidebar-nav-link .nav-icon svg {
    width: 20px !important;
    height: 20px !important;
  }

  /* Schwebendes Cyberdeck Kasten-Flyout auf Desktop */
  .sidebar-nav-link .nav-flyout {
    position: fixed !important;
    left: -9999px;
    top: -9999px;
    transform: translateY(-50%) translateX(-8px) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 14px !important;
    background: rgba(8, 14, 24, 0.98) !important;
    border: 1px solid rgba(0, 240, 255, 0.4) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.9), 0 0 16px rgba(0, 240, 255, 0.25) !important;
    border-radius: 6px !important;
    white-space: nowrap !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.15s ease, transform 0.15s ease !important;
    z-index: 99999 !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
  }
  .sidebar-nav-link .nav-flyout::before {
    content: '' !important;
    position: absolute !important;
    right: 100% !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    border-width: 6px 7px 6px 0 !important;
    border-style: solid !important;
    border-color: transparent rgba(0, 240, 255, 0.4) transparent transparent !important;
  }
  .sidebar-nav-link:hover .nav-flyout,
  .sidebar-nav-link:focus-visible .nav-flyout,
  .sidebar-nav li:hover .nav-flyout {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(-50%) translateX(0) !important;
  }
  .sidebar-nav-link .nav-flyout .nav-label {
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    letter-spacing: 0.3px !important;
    display: inline-block !important;
  }
  .sidebar-nav-link .nav-flyout .nav-kbd {
    font-size: 10px !important;
    font-family: var(--font-mono) !important;
    background: rgba(0, 240, 255, 0.12) !important;
    border: 1px solid rgba(0, 240, 255, 0.3) !important;
    color: var(--neon-cyan) !important;
    padding: 2px 6px !important;
    border-radius: 3px !important;
    display: inline-block !important;
  }

  .sidebar-footer {
    display: none !important;
  }
}

/* --- Brand in Sidebar --- */
.sidebar-header {
  height: var(--header-height);
  display: flex;
  align-items: center;
  padding: 0 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--text);
  overflow: hidden;
  width: 100%;
}

.brand-logo-wrapper {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  filter: drop-shadow(0 0 8px rgba(var(--accent)/0.4));
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: rgba(12, 19, 31, 0.6);
  border: 1px solid rgba(0, 240, 255, 0.12);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.brand:hover .brand-logo-wrapper {
  border-color: rgba(0, 240, 255, 0.35);
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.2);
}

.brand-logo {
  width: 26px;
  height: 26px;
}

.brand-text {
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.4px;
  white-space: nowrap;
  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.brand-text .highlight {
  color: rgb(var(--accent));
  text-shadow: 0 0 10px rgba(0, 240, 255, 0.4);
}

/* --- Navigation & Items --- */
.sidebar-nav {
  flex: 1;
  padding: 8px 6px;
  overflow: visible;
}

.sidebar-nav::-webkit-scrollbar {
  width: 4px;
}
.sidebar-nav::-webkit-scrollbar-thumb {
  background: rgba(var(--accent)/0.15);
  border-radius: 4px;
}

.nav-group {
  margin-bottom: 12px;
}

.nav-group-title {
  padding: 4px 10px;
  margin-bottom: 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--text-muted);
  opacity: 0.6;
  white-space: nowrap;
  overflow: hidden;
  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.sidebar-nav ul {
  display: flex;
  flex-direction: column;
  gap: 4px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-logout-form {
  margin: 0;
}

.nav-logout-button {
  width: 100%;
  font: inherit;
  color: inherit;
  cursor: pointer;
  appearance: none;
}

.nav-logout-button.sidebar-nav-link {
  background: transparent;
  text-align: left;
}

.nav-logout-button.mobile-menu-link {
  height: 100%;
}

.sidebar-nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 4px;
  border-radius: var(--radius-md);
  color: var(--text-muted);
  font-weight: 500;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  border: 1px solid transparent;
  font-size: 13.5px;
  text-decoration: none;
  white-space: nowrap;
  position: relative;
}

.sidebar-nav-link:hover {
  background: rgba(0, 240, 255, 0.06);
  color: var(--text);
  border-color: rgba(0, 240, 255, 0.16);
  transform: translateX(1px);
}

.sidebar-nav-link.active {
  background: linear-gradient(90deg, rgba(0, 240, 255, 0.14) 0%, rgba(0, 240, 255, 0.02) 100%);
  color: #fff;
  border-color: rgba(0, 240, 255, 0.25);
  box-shadow: inset 3px 0 0 var(--neon-cyan), 0 0 16px rgba(0, 240, 255, 0.08);
}

/* Haptic Icon Capsule */
.nav-icon-wrapper {
  position: relative;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 10px;
  background: rgba(12, 19, 31, 0.65);
  border: 1px solid rgba(0, 240, 255, 0.12);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.sidebar-nav-link:hover .nav-icon-wrapper {
  background: rgba(0, 240, 255, 0.12);
  border-color: rgba(0, 240, 255, 0.35);
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.2);
  color: var(--neon-cyan);
}

.sidebar-nav-link.active .nav-icon-wrapper {
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.25), rgba(0, 255, 157, 0.1));
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.4), inset 0 0 8px rgba(0, 240, 255, 0.2);
  border: 1px solid rgba(0, 240, 255, 0.5);
  color: var(--neon-cyan);
  filter: drop-shadow(0 0 4px #00f0ff);
}

.nav-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.85;
  transition: opacity 0.2s, transform 0.2s;
}

.sidebar-nav-link:hover .nav-icon,
.sidebar-nav-link.active .nav-icon {
  opacity: 1;
  transform: scale(1.08);
}

.cyber-nav-svg {
  width: 20px;
  height: 20px;
}

/* Micro Live-Puls-Pips on Icons */
.nav-status-pip {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  pointer-events: none;
  border: 1.5px solid rgba(9, 15, 25, 0.95);
  animation: pulseNeonPip 2s infinite ease-in-out;
}

.pip-amber {
  background: var(--neon-amber);
  box-shadow: 0 0 8px var(--neon-amber), 0 0 2px #fff;
}

.pip-purple {
  background: var(--neon-purple);
  box-shadow: 0 0 8px var(--neon-purple), 0 0 2px #fff;
}

.pip-crimson {
  background: var(--neon-crimson);
  box-shadow: 0 0 8px var(--neon-crimson), 0 0 2px #fff;
}

.pip-cyan {
  background: var(--neon-cyan);
  box-shadow: 0 0 8px var(--neon-cyan), 0 0 2px #fff;
}

@keyframes pulseNeonPip {
  0%, 100% {
    transform: scale(1);
    opacity: 0.95;
  }
  50% {
    transform: scale(1.35);
    opacity: 0.45;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-status-pip {
    animation: none !important;
  }
}

.nav-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-kbd {
  font-size: 10px;
  font-family: var(--font-mono);
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(0, 240, 255, 0.15);
  padding: 1px 5px;
  border-radius: 3px;
  color: var(--text-muted);
  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- Sidebar Footer & Pin Toggle --- */
.sidebar-footer {
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  background: rgba(6, 10, 16, 0.9);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-shrink: 0;
  min-height: 52px;
}

.sidebar-footer-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  overflow: hidden;
}

.server-status {
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.indicator {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.indicator.online {
  background: rgb(var(--success));
  box-shadow: 0 0 8px rgba(var(--success)/0.6);
}

.server-time {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}

.sidebar-pin-toggle {
  background: transparent;
  border: 1px solid rgba(0, 240, 255, 0.15);
  color: var(--text-muted);
  width: 28px;
  height: 28px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}

.sidebar-pin-toggle:hover {
  border-color: var(--neon-cyan);
  color: var(--neon-cyan);
  background: rgba(0, 240, 255, 0.1);
  box-shadow: 0 0 8px rgba(0, 240, 255, 0.2);
}

/* --- Tactical Topbar HUD (Cyberdeck OS 2026+) --- */
.top-bar {
  height: calc(var(--header-height) + env(safe-area-inset-top, 0px));
  background: rgba(6, 11, 19, 0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--deck-border-subtle);
  display: flex;
  align-items: center;
  padding: env(safe-area-inset-top, 0px) 16px 0 16px;
  position: sticky;
  top: 0;
  z-index: 40;
  justify-content: space-between;
  gap: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  min-width: 0;
}

.top-bar-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex-shrink: 1;
}

.top-bar-center {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.top-bar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex-shrink: 1;
  justify-content: flex-end;
}

.page-title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  color: var(--text);
}

.sidebar-toggle {
  display: none;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  flex-shrink: 0;
}

.sidebar-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
}

/* --- Active Server Node Pill (Left HUD Telemetrie) --- */
.active-node-container {
  position: relative;
  display: flex;
  align-items: center;
}

.active-node-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  background: rgba(9, 15, 25, 0.85);
  border: 1px solid rgba(0, 240, 255, 0.2);
  border-radius: 9999px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  cursor: default;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 2px 8px rgba(0, 0, 0, 0.4);
  white-space: nowrap;
}

.active-node-pill.has-dropdown {
  cursor: pointer;
}

.active-node-pill.has-dropdown:hover,
.active-node-pill.has-dropdown[aria-expanded="true"] {
  background: rgba(14, 23, 38, 0.95);
  border-color: var(--neon-cyan);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), var(--deck-glow-cyan);
}

.node-ping-indicator {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 10px;
  height: 10px;
}

.ping-dot {
  width: 6px;
  height: 6px;
  background: var(--neon-emerald);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--neon-emerald);
}

.ping-wave {
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 1px solid var(--neon-emerald);
  opacity: 0.8;
  animation: pingPulse 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes pingPulse {
  0% { transform: scale(0.8); opacity: 0.9; }
  70%, 100% { transform: scale(2.2); opacity: 0; }
}

.node-latency {
  color: var(--neon-emerald);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.3px;
  transition: color 0.3s ease;
}

/* Farbcodierung & Ping-Qualitäten */
.node-ping-indicator.ping-low .ping-dot,
.node-ping-indicator:not(.ping-medium):not(.ping-high):not(.offline) .ping-dot {
  background: var(--neon-emerald);
  box-shadow: 0 0 6px var(--neon-emerald);
}
.node-ping-indicator.ping-low .ping-wave,
.node-ping-indicator:not(.ping-medium):not(.ping-high):not(.offline) .ping-wave {
  border-color: var(--neon-emerald);
}
.node-latency.ping-low {
  color: var(--neon-emerald);
}

/* Mittel = Gelb (30ms - 69ms) */
.node-ping-indicator.ping-medium .ping-dot {
  background: #ffd700;
  box-shadow: 0 0 6px #ffd700;
}
.node-ping-indicator.ping-medium .ping-wave {
  border-color: #ffd700;
}
.node-latency.ping-medium,
.ping-val-medium {
  color: #ffd700 !important;
}

/* Hoch = Orange (>= 70ms) */
.node-ping-indicator.ping-high .ping-dot {
  background: #ff8800;
  box-shadow: 0 0 6px #ff8800;
}
.node-ping-indicator.ping-high .ping-wave {
  border-color: #ff8800;
}
.node-latency.ping-high,
.ping-val-high {
  color: #ff8800 !important;
}

/* Offline = Rot (Blockiert / n.A.) */
.node-ping-indicator.offline .ping-dot {
  background: #ff3366;
  box-shadow: 0 0 6px #ff3366;
}
.node-ping-indicator.offline .ping-wave {
  display: none !important;
}
.node-latency.offline,
.ping-val-offline {
  color: #ff3366 !important;
}

.ping-val-low {
  color: var(--neon-emerald) !important;
}

.active-node-pill.is-blocked {
  border-color: rgba(255, 51, 102, 0.4);
  background: rgba(255, 51, 102, 0.08);
}
.active-node-pill.is-blocked:hover {
  border-color: rgba(255, 51, 102, 0.7);
  background: rgba(255, 51, 102, 0.14);
}

.server-option.is-offline {
  opacity: 0.85;
  border-left: 2px solid #ff3366;
}
.server-offline-pill {
  font-size: 0.65rem;
  color: #ff3366;
  background: rgba(255, 51, 102, 0.15);
  border: 1px solid rgba(255, 51, 102, 0.4);
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.node-divider {
  opacity: 0.25;
  color: var(--text-muted);
}

.node-cluster {
  color: var(--text-muted);
  font-size: 0.75rem;
}

.node-name {
  font-weight: 600;
  color: var(--text);
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 1;
}

.node-arrow {
  font-size: 8px;
  opacity: 0.6;
  color: var(--neon-cyan);
  transition: transform 0.2s ease;
}

.active-node-pill[aria-expanded="true"] .node-arrow {
  transform: rotate(180deg);
}

/* Server Switcher Dropdown (Cyberdeck Glass) */
.server-switcher-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 100%;
  width: max-content;
  min-width: 320px;
  max-width: min(440px, calc(100vw - 32px));
  max-height: 440px;
  overflow-y: auto;
  background: rgba(9, 15, 25, 0.98);
  border: 1px solid rgba(0, 240, 255, 0.35);
  border-radius: var(--radius-sm);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.85), var(--deck-glow-cyan);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 100;
  display: none;
  flex-direction: column;
  padding: 8px;
  animation: zdeSlideUp 0.2s ease-out;
}

.server-switcher-dropdown.active {
  display: flex;
}

.server-dropdown-header {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--text-muted);
  padding: 4px 8px 6px 8px;
  border-bottom: 1px solid rgba(0, 240, 255, 0.1);
  margin-bottom: 4px;
}

.server-option {
  display: flex;
  flex-direction: column;
  padding: 8px 10px;
  border-radius: 4px;
  transition: all 0.2s;
  color: var(--text);
  text-decoration: none;
}

.server-option:hover {
  background: rgba(0, 240, 255, 0.08);
  border-left: 2px solid var(--neon-cyan);
}

.server-option.active {
  background: rgba(0, 240, 255, 0.14);
  border-left: 2px solid var(--neon-cyan);
  color: var(--neon-cyan);
}

.server-opt-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 8px;
}

.server-ip {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: 2px;
}

.server-active-pill {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.8px;
  padding: 2px 8px;
  border-radius: 9999px;
  background: rgba(0, 240, 255, 0.18);
  color: var(--neon-cyan);
  border: 1px solid rgba(0, 240, 255, 0.45);
  box-shadow: 0 0 8px rgba(0, 240, 255, 0.2);
  flex-shrink: 0;
}

.server-dropdown-actions {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  margin-top: 8px !important;
  padding-top: 8px !important;
  border-top: 1px solid rgba(0, 240, 255, 0.15) !important;
}

.server-dropdown-action-btn {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 12px !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text) !important;
  text-decoration: none !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  background: rgba(0, 240, 255, 0.05) !important;
  border: 1px solid rgba(0, 240, 255, 0.15) !important;
  box-sizing: border-box !important;
  width: 100% !important;
  white-space: nowrap !important;
}

.server-dropdown-action-btn:hover {
  background: rgba(0, 240, 255, 0.15) !important;
  border-color: var(--neon-cyan) !important;
  color: #fff !important;
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.25) !important;
  transform: translateX(2px) !important;
}

.server-dropdown-action-btn .action-icon {
  font-size: 1rem !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
}

.server-dropdown-footer {
  margin-top: 6px;
  padding: 8px 10px 4px 10px;
  border-top: 1px solid rgba(0, 240, 255, 0.12);
  font-size: 0.75rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* --- Topbar Telemetry Chip (Online Users & Live Clock) --- */
.topbar-telemetry-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  background: rgba(8, 14, 23, 0.75);
  border: 1px solid rgba(0, 240, 255, 0.15);
  border-radius: 9999px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-muted);
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.topbar-telemetry-chip .telemetry-online {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.topbar-telemetry-chip .telemetry-online-cnt {
  font-weight: 700;
  color: #fff;
}

.topbar-telemetry-chip .telemetry-divider {
  opacity: 0.3;
  font-size: 0.75rem;
}

.topbar-telemetry-chip .telemetry-time {
  font-weight: 700;
  color: var(--neon-cyan);
  letter-spacing: 0.5px;
}

/* --- Global Queue Watcher (Topbar HUD Chips) --- */
.global-queue-watcher {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hud-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: rgba(8, 14, 23, 0.75);
  border: 1px solid rgba(0, 240, 255, 0.12);
  border-radius: 9999px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-muted);
  text-decoration: none;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.hud-chip:hover {
  border-color: rgba(0, 240, 255, 0.35);
  color: var(--text);
  background: rgba(0, 240, 255, 0.08);
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.2);
}

.hud-chip-icon {
  font-size: 0.9rem;
  line-height: 1;
}

.hud-chip-label {
  display: inline;
}

.hud-chip-val {
  font-weight: 700;
  color: var(--text);
}

.hud-chip-max {
  opacity: 0.5;
  font-size: 0.68rem;
  display: inline;
}

.hud-chip-upgrades.hud-chip-active {
  border-color: rgba(255, 184, 0, 0.6);
  background: rgba(255, 184, 0, 0.12);
  color: #fff;
  animation: hudPulseAmber 2s ease-in-out infinite;
}
.hud-chip-upgrades.hud-chip-active .hud-chip-val {
  color: var(--neon-amber);
}

.hud-chip-research.hud-chip-active {
  border-color: rgba(168, 85, 247, 0.6);
  background: rgba(168, 85, 247, 0.12);
  color: #fff;
  animation: hudPulsePurple 2s ease-in-out infinite;
}
.hud-chip-research.hud-chip-active .hud-chip-val {
  color: var(--neon-purple);
}

.hud-chip-attacks.hud-chip-active {
  border-color: rgba(255, 51, 102, 0.65);
  background: rgba(255, 51, 102, 0.12);
  color: #fff;
  animation: hudPulseCrimson 2s ease-in-out infinite;
}
.hud-chip-attacks.hud-chip-active .hud-chip-val {
  color: var(--neon-crimson);
}

@keyframes hudPulseAmber {
  0%, 100% {
    box-shadow: 0 0 8px rgba(255, 184, 0, 0.25), inset 0 0 6px rgba(255, 184, 0, 0.15);
    border-color: rgba(255, 184, 0, 0.45);
  }
  50% {
    box-shadow: 0 0 16px rgba(255, 184, 0, 0.55), inset 0 0 10px rgba(255, 184, 0, 0.3);
    border-color: rgba(255, 184, 0, 0.85);
  }
}

@keyframes hudPulsePurple {
  0%, 100% {
    box-shadow: 0 0 8px rgba(168, 85, 247, 0.25), inset 0 0 6px rgba(168, 85, 247, 0.15);
    border-color: rgba(168, 85, 247, 0.45);
  }
  50% {
    box-shadow: 0 0 16px rgba(168, 85, 247, 0.55), inset 0 0 10px rgba(168, 85, 247, 0.3);
    border-color: rgba(168, 85, 247, 0.85);
  }
}

@keyframes hudPulseCrimson {
  0%, 100% {
    box-shadow: 0 0 8px rgba(255, 51, 102, 0.3), inset 0 0 6px rgba(255, 51, 102, 0.15);
    border-color: rgba(255, 51, 102, 0.5);
  }
  50% {
    box-shadow: 0 0 18px rgba(255, 51, 102, 0.65), inset 0 0 10px rgba(255, 51, 102, 0.35);
    border-color: rgba(255, 51, 102, 0.9);
  }
}

/* --- High-Tech CryptoCoin-Ticker (Topbar Resource) --- */
.topbar-resource-ticker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 4px 12px;
  background: rgba(9, 15, 25, 0.85);
  border: 1px solid rgba(255, 184, 0, 0.3);
  border-radius: 9999px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 2px 10px rgba(0, 0, 0, 0.4);
  transition: all 0.25s ease;
  user-select: none;
}

.topbar-resource-ticker:hover {
  border-color: var(--neon-amber);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), var(--deck-glow-amber);
}

.crypto-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.crypto-chip-icon {
  font-size: 1rem;
  color: var(--neon-amber);
  text-shadow: 0 0 8px rgba(255, 184, 0, 0.6);
  line-height: 1;
}

.crypto-chip-val {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.85rem;
  color: #ffdf7a;
  text-shadow: 0 0 10px rgba(255, 184, 0, 0.4);
  letter-spacing: 0.3px;
}

.crypto-chip-unit {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--neon-amber);
  letter-spacing: 0.5px;
  opacity: 0.9;
}

.crypto-pulse-wave {
  width: 52px;
  height: 16px;
  display: block;
}

.pulse-line {
  fill: none;
  stroke: var(--neon-amber);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 80;
  animation: ekgPulse 3s linear infinite;
}

@keyframes ekgPulse {
  0% {
    stroke-dashoffset: 80;
    opacity: 0.35;
  }
  50% {
    opacity: 1;
    filter: drop-shadow(0 0 3px var(--neon-amber));
  }
  100% {
    stroke-dashoffset: -80;
    opacity: 0.35;
  }
}

.topbar-resource-ticker.ticker-flash-up {
  animation: tickerFlashGreen 1.2s ease-out;
}

@keyframes tickerFlashGreen {
  0% {
    box-shadow: 0 0 20px rgba(0, 255, 157, 0.7);
    border-color: var(--neon-emerald);
  }
  100% {
    box-shadow: none;
    border-color: rgba(255, 184, 0, 0.3);
  }
}

/* --- Topbar Globale HUD-Suche & Dropdown --- */
.topbar-global-search {
  position: relative;
  display: flex;
  align-items: center;
}

.topbar-search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  background: rgba(9, 15, 25, 0.88);
  border: 1px solid rgba(0, 240, 255, 0.22);
  border-radius: 9999px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  width: 240px;
  max-width: 100%;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.topbar-search-bar:focus-within,
.topbar-global-search.is-active .topbar-search-bar {
  width: 310px;
  background: rgba(12, 20, 32, 0.98);
  border-color: var(--neon-cyan);
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.topbar-search-icon {
  color: var(--neon-cyan);
  filter: drop-shadow(0 0 3px rgba(0, 240, 255, 0.4));
  flex-shrink: 0;
}

.topbar-search-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: #fff;
  padding: 0;
}

.topbar-search-input::placeholder {
  color: rgba(140, 160, 185, 0.55);
}

.topbar-search-kbd {
  background: rgba(0, 240, 255, 0.08);
  border: 1px solid rgba(0, 240, 255, 0.3);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--neon-cyan);
  letter-spacing: 0.5px;
  flex-shrink: 0;
  user-select: none;
}

.topbar-search-clear {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0 3px;
  font-size: 0.85rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: color 0.15s ease;
}

.topbar-search-clear[hidden] {
  display: none !important;
}

.topbar-search-clear:hover {
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .ping-wave,
  .pulse-line,
  .hud-chip-upgrades.hud-chip-active,
  .hud-chip-research.hud-chip-active,
  .hud-chip-attacks.hud-chip-active,
  .topbar-search-dropdown,
  .search-pulse-dot.is-loading {
    animation: none !important;
  }
}

/* --- Dropdown Container (Klappt direkt nach unten auf) --- */
.topbar-search-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 490px;
  max-width: 92vw;
  background: rgba(9, 14, 23, 0.98);
  border: 1px solid rgba(0, 240, 255, 0.35);
  border-radius: 10px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.92), 0 0 25px rgba(0, 240, 255, 0.16);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 9999;
  display: none;
  flex-direction: column;
  max-height: 480px;
  overflow: hidden;
}

.topbar-search-dropdown.active,
.topbar-search-dropdown:not([hidden]) {
  display: flex;
  animation: searchDropdownSlide 0.16s cubic-bezier(0.16, 1, 0.3, 1);
}

.topbar-search-dropdown[hidden] {
  display: none !important;
}

@keyframes searchDropdownSlide {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 768px) {
  .topbar-search-dropdown {
    position: fixed;
    top: calc(78px + env(safe-area-inset-top, 0px));
    left: 10px;
    right: 10px;
    width: auto;
    max-width: none;
    max-height: 75vh;
  }
}

.search-dropdown-filter-tabs {
  display: flex;
  gap: 6px;
  padding: 8px 12px;
  background: rgba(0, 240, 255, 0.03);
  border-bottom: 1px solid rgba(0, 240, 255, 0.12);
  overflow-x: auto;
}

.search-filter-tab {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-family: var(--font-mono);
  padding: 3px 8px;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.search-filter-tab:hover,
.search-filter-tab.active {
  background: rgba(0, 240, 255, 0.12);
  border-color: rgba(0, 240, 255, 0.3);
  color: var(--neon-cyan);
}

.search-dropdown-scrollable {
  overflow-y: auto;
  padding: 6px 8px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 340px;
}

.search-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 4px;
}

.search-group-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--neon-cyan);
  opacity: 0.85;
  padding: 6px 8px 3px 8px;
  font-family: var(--font-mono);
  font-weight: 700;
}

.search-group-count {
  font-size: 0.64rem;
  background: rgba(0, 240, 255, 0.1);
  padding: 0 5px;
  border-radius: 9999px;
  color: var(--neon-cyan);
}

.search-result-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 6px;
  text-decoration: none;
  color: var(--text);
  transition: all 0.12s ease;
  border-left: 2px solid transparent;
}

.search-result-item:hover,
.search-result-item.selected {
  background: rgba(0, 240, 255, 0.1);
  border-left-color: var(--neon-cyan);
  transform: translateX(3px);
  color: #fff;
}

.search-item-icon {
  width: 28px;
  height: 28px;
  border-radius: 5px;
  background: rgba(0, 240, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--neon-cyan);
  flex-shrink: 0;
  font-size: 0.85rem;
}

.search-item-body {
  flex: 1;
  min-width: 0;
}

.search-item-main {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.search-item-title {
  font-size: 0.84rem;
  font-weight: 600;
  color: #fff;
}

.search-item-category-badge {
  font-size: 0.64rem;
  font-family: var(--font-mono);
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-muted);
}

.search-item-badge {
  font-size: 0.65rem;
  font-family: var(--font-mono);
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(0, 240, 255, 0.1);
  border: 1px solid rgba(0, 240, 255, 0.2);
  color: var(--neon-cyan);
}

.search-item-kollektiv {
  font-size: 0.72rem;
  font-family: var(--font-mono);
  color: #ffaa00;
  font-weight: 600;
}

.search-item-server-name {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.search-item-desc {
  font-size: 0.72rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}

.search-item-arrow {
  color: var(--text-muted);
  font-size: 0.8rem;
  opacity: 0.5;
  transition: all 0.15s ease;
}

.search-result-item:hover .search-item-arrow,
.search-result-item.selected .search-item-arrow {
  color: var(--neon-cyan);
  opacity: 1;
  transform: translateX(2px);
}

.search-item-action-badge {
  font-size: 0.68rem;
  font-family: var(--font-mono);
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(0, 240, 255, 0.1);
  color: var(--neon-cyan);
  border: 1px solid rgba(0, 240, 255, 0.2);
}

.search-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 28px 16px;
  text-align: center;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.8rem;
}

.search-empty-icon {
  font-size: 1.6rem;
}

.search-dropdown-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 12px;
  background: rgba(5, 8, 13, 0.94);
  border-top: 1px solid rgba(0, 240, 255, 0.1);
  font-size: 0.7rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.search-status-text {
  display: flex;
  align-items: center;
  gap: 6px;
}

.search-pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--neon-cyan);
  box-shadow: 0 0 6px var(--neon-cyan);
  display: inline-block;
}

.search-pulse-dot.is-loading {
  background: #ffaa00;
  box-shadow: 0 0 8px #ffaa00;
  animation: searchDotPulse 0.5s infinite alternate ease-in-out;
}

.search-pulse-dot.is-error {
  background: #ff3344;
  box-shadow: 0 0 8px #ff3344;
}

@keyframes searchDotPulse {
  from { opacity: 0.3; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1.3); }
}

.search-hint-shortcuts {
  display: flex;
  align-items: center;
  gap: 8px;
}

.search-hint-shortcuts kbd {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 3px;
  padding: 1px 4px;
  color: var(--text);
  font-size: 0.65rem;
}

.top-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

.notification-badge {
  background: rgba(var(--danger)/0.2);
  color: rgb(var(--danger));
  border: 1px solid rgba(var(--danger)/0.3);
  padding: 4px 10px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 700;
  transition: 0.2s;
  text-decoration: none;
}

.notification-badge:hover {
  background: rgb(var(--danger));
  color: white;
}

/* --- Tactical Topbar HUD: Dynamic Responsive Tiers --- */

/* Tier 1: Very Wide Screens (> 1750px) bekommen alle Labels standardmäßig */
.hud-chip-label {
  display: inline;
}

/* Tier 2: Standard Desktop & Laptops (<= 1750px) */
@media (max-width: 1750px) {
  /* HUD Chips: Text-Labels (Upgrades, Forschung, Angriffe) ausblenden */
  .hud-chip-label {
    display: none !important;
  }
  .hud-chip {
    padding: 4px 8px;
    gap: 5px;
  }

  /* Node-Pill: Cluster-Standort und Trenner ausblenden -> Servername bleibt voll sichtbar */
  .active-node-pill .node-cluster,
  .active-node-pill .node-divider {
    display: none !important;
  }

  /* Ticker: SVG-Pulswelle ausblenden für mehr Platz */
  .topbar-resource-ticker .crypto-pulse-wave {
    display: none !important;
  }
  .topbar-resource-ticker {
    padding: 3px 10px;
    gap: 6px;
  }

  /* Suche proportional schlanker */
  .topbar-search-bar {
    width: 170px;
  }
  .topbar-search-bar:focus-within,
  .topbar-global-search.is-active .topbar-search-bar {
    width: 230px;
  }
}

/* Tier 3: 1600px Desktop & typische Laptops (<= 1650px) - Nur Icons mit Zahlen */
@media (max-width: 1650px) {
  /* HUD Chips: Nur Icons mit den Zahlen (z.B. ⚡ 0, 🔬 0, 💀 0) */
  .hud-chip-max {
    display: none !important;
  }
  .hud-chip {
    padding: 3px 8px;
    gap: 4px;
    font-size: 0.78rem;
  }
  .global-queue-watcher {
    gap: 5px;
  }

  /* Telemetrie: Wort 'online' ausblenden -> '• 2 | 13:28:00' */
  .topbar-telemetry-chip .telemetry-online-label {
    display: none !important;
  }

  /* Latenz: 'latency' Text ausblenden -> z.B. '8ms' */
  .active-node-pill .latency-label {
    display: none !important;
  }

  .top-bar {
    gap: 8px;
    padding-left: 12px;
    padding-right: 12px;
  }

  .topbar-search-bar {
    width: 150px;
  }
  .topbar-search-bar:focus-within,
  .topbar-global-search.is-active .topbar-search-bar {
    width: 210px;
  }
}

/* Tier 4: Kompakte Screens (<= 1200px) */
@media (max-width: 1200px) {
  /* Telemetrie-Chip ausblenden (Daten im Menü/Sidebar-Footer vorhanden) */
  .topbar-telemetry-chip {
    display: none !important;
  }

  /* Node-Pill: Latenz-Zahl ausblenden, Ping-Dot & Tooltip bleiben aktiv */
  .active-node-pill .node-latency {
    display: none !important;
  }
  .active-node-pill .node-name {
    max-width: 110px;
  }

  .topbar-search-bar {
    width: 130px;
  }
  .topbar-search-bar:focus-within,
  .topbar-global-search.is-active .topbar-search-bar {
    width: 190px;
  }
  .topbar-search-kbd {
    display: none !important;
  }
}

/* Tier 5: Tablet Portrait / Off-Canvas View (<= 900px) */
@media (max-width: 900px) {
  .top-bar {
    padding-left: 10px;
    padding-right: 10px;
    gap: 8px;
  }

  .top-bar-left {
    gap: 8px;
  }
  .top-bar-right {
    gap: 8px;
  }

  .active-node-pill {
    padding: 4px 10px;
    gap: 6px;
    font-size: 0.76rem;
  }

  .active-node-pill .node-name {
    max-width: 90px;
  }

  .hud-chip {
    padding: 4px 8px;
    gap: 4px;
    font-size: 0.74rem;
  }
  .global-queue-watcher {
    gap: 6px;
  }

  .topbar-resource-ticker {
    padding: 4px 8px;
    gap: 6px;
  }
  .crypto-chip-val {
    font-size: 0.8rem;
  }
  .crypto-chip-unit {
    display: inline !important;
  }

  .topbar-search-bar {
    width: 120px;
    padding: 3px 8px;
  }
  .topbar-search-bar:focus-within,
  .topbar-global-search.is-active .topbar-search-bar {
    width: 180px;
  }
}

/* Tier 6 & 7: Mobile Smartphones (<= 768px) - Two-Tier Tactical Cyberdeck HUD */
@media (max-width: 768px) {
  .top-bar {
    flex-wrap: wrap !important;
    height: auto !important;
    min-height: var(--header-height);
    padding: calc(env(safe-area-inset-top, 0px) + 8px) 12px 8px 12px !important;
    gap: 8px 10px !important;
    position: sticky;
    top: 0;
    z-index: 50;
  }

  /* Page-Titel in Topbar auf Mobile ausblenden (verhindert Quetschen & Überlappung) */
  .top-bar .page-title {
    display: none !important;
  }

  /* Burger-Toggle ausblenden (Bottom-Nav steuert die Navigation) */
  .top-bar .sidebar-toggle {
    display: none !important;
  }

  /* Row 1 - Links: Server Node Switcher Pill */
  .top-bar-left {
    order: 1 !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
    overflow: visible !important;
    gap: 8px !important;
  }

  .active-node-pill {
    padding: 5px 10px !important;
    gap: 6px !important;
    font-size: 0.78rem !important;
    border-radius: 9999px !important;
    max-width: 160px !important;
  }

  .active-node-pill .node-name {
    max-width: 90px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
  }

  .active-node-pill .node-arrow {
    display: inline-block !important;
    font-size: 0.65rem;
    opacity: 0.7;
  }

  /* Row 1 - Rechts: CC Ticker, Suche, Mail, Bell */
  .top-bar-right {
    order: 2 !important;
    flex: 1 0 auto !important;
    margin-left: auto !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    min-width: 0 !important;
  }

  .topbar-resource-ticker {
    padding: 4px 10px !important;
    gap: 6px !important;
    flex-shrink: 1 !important;
    min-width: 0 !important;
  }

  .crypto-chip {
    gap: 4px !important;
    font-size: 0.8rem !important;
  }

  .crypto-chip-val {
    font-size: 0.8rem !important;
    font-weight: 700;
  }

  .crypto-chip-unit {
    font-size: 0.68rem !important;
    display: inline !important;
  }

  /* Suche auf Mobilgeräten: Ausfahrbarer runder Button */
  .topbar-global-search {
    position: relative;
  }
  .topbar-search-bar {
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    justify-content: center !important;
    border-radius: 50% !important;
    cursor: pointer;
  }
  .topbar-search-input {
    width: 0;
    opacity: 0;
    padding: 0;
    pointer-events: none;
    transition: width 0.2s ease, opacity 0.2s ease;
  }
  .topbar-search-icon {
    margin: 0;
  }
  .topbar-search-bar:focus-within,
  .topbar-global-search.is-active .topbar-search-bar {
    position: absolute;
    right: 0;
    width: min(240px, calc(100vw - 32px)) !important;
    height: 36px !important;
    padding: 4px 10px !important;
    border-radius: 9999px !important;
    justify-content: flex-start !important;
    z-index: 60 !important;
    cursor: auto;
  }
  .topbar-search-bar:focus-within .topbar-search-input,
  .topbar-global-search.is-active .topbar-search-bar .topbar-search-input {
    width: 100%;
    opacity: 1;
    pointer-events: auto;
  }

  .bell-btn {
    width: 34px !important;
    height: 34px !important;
  }

  .notification-badge {
    padding: 3px 8px !important;
    font-size: 11px !important;
  }

  /* Row 2 - Volle Breite: Global Queue Watcher HUD Strip */
  .top-bar-center {
    order: 3 !important;
    width: 100% !important;
    flex-basis: 100% !important;
    justify-content: stretch !important;
    padding-top: 6px !important;
    border-top: 1px solid rgba(0, 240, 255, 0.08) !important;
    margin: 0 !important;
  }

  .global-queue-watcher {
    width: 100% !important;
    display: flex !important;
    justify-content: space-between !important;
    gap: 6px !important;
  }

  .hud-chip {
    flex: 1 1 0 !important;
    justify-content: center !important;
    padding: 5px 8px !important;
    font-size: 0.74rem !important;
    border-radius: 8px !important;
    text-align: center;
    background: rgba(10, 16, 26, 0.85) !important;
    border: 1px solid rgba(0, 240, 255, 0.15) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    min-width: 0 !important;
    overflow: hidden;
  }

  .hud-chip-label {
    display: inline !important;
    font-size: 0.7rem !important;
  }

  .hud-chip-max {
    display: inline !important;
    font-size: 0.65rem !important;
    opacity: 0.6;
  }
}

/* Sehr schmale Mobilgeräte (<= 420px) */
@media (max-width: 420px) {
  .top-bar {
    padding-left: 8px !important;
    padding-right: 8px !important;
    gap: 6px 8px !important;
  }
  .active-node-pill .node-name {
    max-width: 65px !important;
  }
  .crypto-chip-val {
    font-size: 0.74rem !important;
  }
  .crypto-chip-unit {
    display: none !important;
  }
  .hud-chip-label {
    display: none !important;
  }
  .hud-chip {
    padding: 5px 4px !important;
    font-size: 0.72rem !important;
  }
}

/* --- Content Area --- */
.content-area {
  padding: 24px;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  overflow-x: hidden;
  transition: max-width 0.2s ease;
}

@media (min-width: 1440px) {
  .content-area {
    max-width: 1440px;
  }
}

@media (min-width: 1680px) {
  .content-area {
    max-width: 1640px;
  }
}

@media (min-width: 1920px) {
  .content-area {
    max-width: 1800px;
  }
}

@media (max-width: 768px) {
  .content-area {
    padding: 14px 10px calc(80px + env(safe-area-inset-bottom, 0px) + 24px) 10px !important;
  }
  .content,
  .card,
  .cyber-card {
    padding: 16px 12px !important;
    margin-bottom: 16px !important;
  }
}

/* --- Cards & Panels --- */
.content,
.card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.content h1,
.content h2,
.content h3 {
  margin-top: 0;
  color: rgb(var(--accent));
}

.content h1 {
  font-size: 24px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 16px;
  margin-bottom: 20px;
}

/* --- Tables --- */
table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 16px;
}

th,
td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  overflow-wrap: break-word;
  word-break: break-word;
}

th {
  color: var(--text-muted);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

tr:last-child td {
  border-bottom: none;
}

tr:hover td {
  background: rgba(255, 255, 255, 0.02);
}

/* Die neunspaltige Adminliste scrollt innerhalb ihrer Karte. */
#admin-dt .daily-tasks-scroll {
  max-width: 100%;
  overflow-x: auto;
}

#admin-dt .admin-table {
  display: table;
  min-width: 1100px;
  max-width: none;
  overflow: visible;
}

#admin-dt .admin-table th,
#admin-dt .admin-table td {
  overflow-wrap: normal;
  word-break: normal;
  white-space: nowrap;
}

#admin-dt .admin-table td:nth-child(2) {
  min-width: 220px;
  max-width: 360px;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* --- Forms & Buttons --- */
input,
select,
textarea {
  width: 100%;
  background: var(--bg-3);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 12px;
  border-radius: var(--radius-sm);
  font-family: inherit;
  outline: none;
  transition: 0.2s;
}

input[type="checkbox"],
input[type="radio"] {
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  flex-shrink: 0;
}

input:focus,
select:focus,
textarea:focus {
  border-color: rgb(var(--accent));
  box-shadow: 0 0 0 3px rgba(var(--accent)/0.1);
}

select {
  color-scheme: dark;
}

select option {
  background-color: var(--cyber-surface-1, #070c14);
  color: var(--text, #e6f1ff);
  font-family: var(--font-mono, monospace);
  padding: 8px 12px;
}

/* Login Form Refinement */
.login-form {
  max-width: 400px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
}

.form-group label {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.form-check {
  margin-top: 4px;
}

.form-check label {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  text-transform: none;
  font-weight: normal;
  font-size: 15px;
  color: var(--text);
}

.form-check label span {
  white-space: nowrap;
}

.form-actions {
  margin-top: 10px;
}

.form-error {
  background: rgba(var(--danger)/0.1);
  color: rgb(var(--danger));
  padding: 12px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(var(--danger)/0.2);
  margin-top: 20px;
  font-size: 14px;
}

.btn,
button,
input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  text-align: center;
  transition: 0.2s;
  background: var(--bg-3);
  border: 1px solid var(--border-highlight);
  color: var(--text);
  white-space: nowrap;
}

.btn:hover,
button:hover,
input[type="submit"]:hover {
  background: var(--border-highlight);
  transform: translateY(-1px);
}


.btn:disabled,
button:disabled,
input[type="submit"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
}
.btn-primary,
input[type="submit"] {
  background: rgba(var(--accent)/0.1);
  border-color: rgba(var(--accent)/0.3);
  color: rgb(var(--accent));
}

.btn-primary:hover,
input[type="submit"]:hover {
  background: rgb(var(--accent));
  color: var(--bg);
  box-shadow: 0 4px 15px rgba(var(--accent)/0.3);
}

/* --- Utilities --- */
.text-right {
  text-align: right;
}

.text-center {
  text-align: center;
}

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

.success {
  color: rgb(var(--success));
}

.danger {
  color: rgb(var(--danger));
}

.warning {
  color: rgb(var(--warning));
}

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

.mobile-only {
  display: none;
}

.desktop-only {
  display: block;
}

@media (max-width: 900px) {
  .mobile-only {
    display: block;
  }

  .desktop-only {
    display: none;
  }

  .sidebar-footer .server-time {
    display: none;
  }

  .sidebar-footer .server-status {
    justify-content: center;
  }
}

/* --- Landing Page / Hero --- */
.hero {
  padding: 60px 0;
  text-align: center;
}

.hero h1, .hero-title {
  font-size: clamp(32px, 5vw, 64px);
  font-weight: 800;
  margin-bottom: 20px;
  background: linear-gradient(180deg, #fff, rgba(255, 255, 255, 0.7));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1.1;
}

.hero p, .hero-lead {
  max-width: 700px;
  margin: 0 auto 30px;
  color: var(--text-muted);
  font-size: 1.1em;
}

.section-title {
  text-align: center;
  font-size: 2rem;
  font-weight: 700;
  margin: 60px 0 30px;
  color: var(--text);
  letter-spacing: -0.5px;
}

.cta {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 60px;
}

/* --- Features Grid --- */
.features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 30px;
}

.features .span-full,
.features .card.span-12,
.features .cyber-card.span-12,
.features .dashboard-top-grid {
  grid-column: 1 / -1;
}

.features .card.span-6,
.features .cyber-card.span-6 {
  grid-column: span 1;
}

.features .dashboard-sections-grid {
  grid-column: 1 / -1;
}

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

  .features .card.span-6,
  .features .cyber-card.span-6 {
    grid-column: auto;
  }
}

/* Large Desktop: 3 Spalten */
@media (min-width: 1600px) {
  .features {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 24px;
  }

  .features .card.span-6,
  .features .cyber-card.span-6 {
    grid-column: span 1;
  }

  .features .span-full,
  .features .card.span-12,
  .features .cyber-card.span-12,
  .features .dashboard-top-grid,
  .features .dashboard-sections-grid {
    grid-column: 1 / -1;
  }
}

/* Ultrawide: 4 Spalten */
@media (min-width: 2000px) {
  .features {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 28px;
  }
}

.features .card {
  margin: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  text-align: left;
  min-width: 0;
}

.features .card h2,
.features .card h3 {
  margin-top: 0;
  margin-bottom: 0;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.25rem;
}

.features .card p {
  color: var(--text-muted);
  margin-bottom: 0;
}

/* Erlaubt das Ausdehnen von Text nur in Karten mit Footer (z.B. Landingpage Features) */
.features .card:has(.task-footer) p,
.features .card:has(.btn) p {
  flex: 1;
}

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

.task-footer .reward {
  font-size: 0.9em;
  color: rgb(var(--accent));
}

.task-action form {
  margin: 0;
}

.kpi.kpi-icon {
  display: flex;
  align-items: center;
  text-align: left;
  overflow: hidden;
}

/* Flex-Kind muss schrumpfen können, damit Label nicht aus Kachel ragt */
.kpi.kpi-icon > .stat {
  min-width: 0;
  flex: 1;
  overflow: hidden;
}

.kpi.kpi-icon .label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kpi-icon-char {
  font-size: 2.5rem;
  margin-right: 15px;
  color: rgb(var(--accent));
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
}

.table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: 15px;
}

.table-scroll table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 0;
}

.table-card {
  padding: 24px;
}

.features .icon {
  width: 48px;
  height: 48px;
  background: rgba(var(--accent)/0.1);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

/* --- KPI Strip --- */
.strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-top: 0;
  margin-bottom: 20px;
}

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

.kpi {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px;
  text-align: center;
  position: relative;
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.2s;
  cursor: default;
}

.kpi:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
  border-color: rgba(var(--accent)/0.3);
  background: rgba(var(--accent)/0.04);
}

.kpi-info-icon {
  position: absolute;
  top: 12px;
  left: 14px;
  font-size: 14px;
  color: var(--text-muted);
  opacity: 0.5;
  cursor: help;
  transition: opacity 0.2s;
  line-height: 1;
}

.kpi-info-icon:hover {
  opacity: 1;
  color: rgb(var(--accent));
}

.kpi .label {
  color: var(--text-muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
}

.kpi .value {
  font-size: 24px;
  font-weight: 700;
  color: rgb(var(--accent));
  font-family: var(--font-mono);
  word-wrap: break-word;
  overflow-wrap: break-word;
  line-height: 1.2;
}

/* Response CC shortening */
.cc-text::after {
  content: " CryptoCoins";
}

@media (max-width: 480px) {
  .kpi .value {
    font-size: 18px;
  }

  .cc-text::after {
    content: " CC";
  }
}

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

/* --- Public Shell (Login/Home/Landing) --- */
.public-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--bg);
}

.public-header {
  padding: 16px 0;
  border-bottom: 1px solid rgba(0, 240, 255, 0.12);
  background: rgba(9, 14, 23, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  position: sticky;
  top: 0;
  z-index: 50;
}

.public-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.public-header .brand {
  width: auto;
  flex-shrink: 0;
}

.public-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}

.public-nav a:not(.btn) {
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  transition: all 0.2s ease;
}

.public-nav a:not(.btn):hover {
  color: var(--neon-cyan);
  background: rgba(0, 240, 255, 0.06);
}

.public-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  padding: 40px 20px;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.public-content.public-centered {
  align-items: center;
  justify-content: center;
}

.public-auth-box {
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
}

.public-footer {
  padding: 30px 0;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  border-top: 1px solid rgba(0, 240, 255, 0.1);
  background: rgba(9, 14, 23, 0.9);
}

.public-footer .links {
  margin-top: 8px;
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.public-footer a {
  color: var(--text-muted);
  transition: color 0.2s;
}

.public-footer a:hover {
  color: var(--neon-cyan);
}

/* ==========================================================================
   Cyberpunk Design System: Base Components
   ========================================================================== */

/* --- Cyber Card --- */
.cyber-card {
  background:
    linear-gradient(var(--deck-panel), var(--deck-panel)) padding-box,
    linear-gradient(135deg, rgba(0, 240, 255, 0.3), rgba(0, 240, 255, 0.05)) border-box;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 22px 24px;
  margin-bottom: 20px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 10px 30px rgba(0, 0, 0, 0.6);
  position: relative;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease, background 0.25s ease;
}

.cyber-card:hover {
  background:
    linear-gradient(var(--deck-panel-active), var(--deck-panel-active)) padding-box,
    linear-gradient(135deg, rgba(0, 240, 255, 0.5), rgba(0, 240, 255, 0.12)) border-box;
  border-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 12px 36px rgba(0, 0, 0, 0.7), var(--deck-glow-cyan);
}

.cyber-card-highlight {
  background:
    linear-gradient(var(--deck-panel-active), var(--deck-panel-active)) padding-box,
    linear-gradient(135deg, rgba(0, 240, 255, 0.75), rgba(0, 255, 157, 0.25)) border-box;
  border-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 24px rgba(0, 240, 255, 0.25), 0 12px 36px rgba(0, 0, 0, 0.7);
}

.cyber-card-chamfer {
  clip-path: var(--chamfer-md);
  border-radius: 0;
}

/* --- Cyber Datacenter Selection Grid & Cards --- */
.datacenter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 18px;
  margin-top: 24px;
}

@media (max-width: 640px) {
  .datacenter-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

.datacenter-card {
  background:
    linear-gradient(var(--deck-panel), var(--deck-panel)) padding-box,
    linear-gradient(135deg, rgba(0, 240, 255, 0.22), rgba(0, 240, 255, 0.04)) border-box;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: 22px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 24px rgba(0, 0, 0, 0.45);
  user-select: none;
}

.datacenter-card:hover {
  background:
    linear-gradient(var(--deck-panel-active), var(--deck-panel-active)) padding-box,
    linear-gradient(135deg, rgba(0, 240, 255, 0.65), rgba(0, 240, 255, 0.18)) border-box;
  border-color: transparent;
  transform: translateY(-4px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 14px 32px rgba(0, 0, 0, 0.65), var(--deck-glow-cyan);
}

.datacenter-card:focus-visible {
  outline: 2px solid var(--neon-cyan);
  outline-offset: 2px;
}

.datacenter-card.active {
  background:
    linear-gradient(var(--deck-panel-active), var(--deck-panel-active)) padding-box,
    linear-gradient(135deg, rgba(0, 240, 255, 0.95), rgba(0, 255, 157, 0.6)) border-box;
  border-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 24px rgba(0, 240, 255, 0.4), 0 12px 36px rgba(0, 0, 0, 0.7);
  transform: translateY(-2px);
}

.datacenter-card.active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--neon-cyan);
  box-shadow: 0 0 10px var(--neon-cyan);
}

.dc-region-badge,
.dc-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  font-size: 10px;
  font-weight: 700;
  font-family: var(--font-mono);
  background: rgba(0, 240, 255, 0.12);
  color: var(--neon-cyan);
  padding: 3px 8px;
  border-radius: 99px;
  border: 1px solid rgba(0, 240, 255, 0.28);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  box-shadow: 0 0 8px rgba(0, 240, 255, 0.15);
}

.dc-icon {
  font-size: 26px;
  line-height: 1;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 240, 255, 0.06);
  border: 1px solid rgba(0, 240, 255, 0.15);
  border-radius: var(--radius-sm);
  margin-bottom: 2px;
}

.dc-name {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  padding-right: 56px;
  line-height: 1.3;
  letter-spacing: 0.2px;
}

.dc-desc,
.dc-info {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.45;
  margin-top: -2px;
}

.dc-stats {
  display: flex;
  gap: 14px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid rgba(0, 240, 255, 0.12);
  font-size: 11px;
  font-family: var(--font-mono);
}

.dc-stat,
.dc-stat-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}

.dc-stat-label {
  color: var(--text-muted);
  opacity: 0.7;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}

.dc-stat-value {
  color: var(--neon-cyan);
  font-weight: 700;
  font-size: 12px;
}

.dc-security-bar {
  display: inline-flex;
  gap: 2.5px;
  align-items: center;
  height: 16px;
}

.dc-security-pip {
  display: inline-block;
  width: 6px;
  height: 9px;
  border-radius: 1px;
  background: rgba(0, 240, 255, 0.12);
  border: 1px solid rgba(0, 240, 255, 0.22);
  transition: all 0.2s ease;
}

.dc-security-pip.filled {
  background: var(--neon-emerald);
  border-color: rgba(0, 255, 157, 0.7);
  box-shadow: 0 0 6px rgba(0, 255, 157, 0.5);
}

/* Kollektiv-Mitgliederliste: schrumpfbare Karte statt abgeschnittener Überbreite. */
.features.member-list {
  grid-template-columns: minmax(0, 1fr);
}

.member-list .member-list-back,
.member-list .member-list-card,
.member-list .member-list-title,
.member-list .member-list-heading,
.member-list .member-list-sort,
.member-list .cyber-data-stream,
.member-list .cyber-data-body,
.member-list .member-list-cell,
.member-list .member-list-cell > * {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.member-list .member-list-back .cyber-btn {
  white-space: normal;
}

.member-list .member-list-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
  border-bottom: 1px solid rgba(0, 240, 255, 0.15);
  padding-bottom: 14px;
}

.member-list .member-list-title {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 220px;
}

.member-list .member-list-title .landing-card-icon {
  flex-shrink: 0;
}

.member-list .member-list-sort {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}

.member-list .member-list-sort .cyber-select-wrapper,
.member-list .member-list-sort .cyber-select-trigger {
  min-width: 0;
  max-width: 100%;
}

.member-list .member-list-sort .cyber-select-label {
  white-space: normal;
  overflow-wrap: anywhere;
}

.member-list .cyber-data-header,
.member-list .cyber-data-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.5fr);
  gap: 12px;
}

.member-list .cyber-data-header {
  padding: 8px 15px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--text-muted);
  opacity: 0.7;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  overflow-wrap: anywhere;
}

.member-list .cyber-data-body > .cyber-data-row {
  align-items: center;
  padding: 10px 14px;
  margin-bottom: 0;
  border-radius: 6px;
  background: rgba(12, 19, 30, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.04);
  transition: all 0.15s;
}

.member-list .cyber-badge {
  white-space: normal;
  text-align: left;
}

.member-list .member-list-label {
  display: none;
}

.member-list .member-list-login {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-muted);
  text-align: right;
}

@media (max-width: 900px) {
  .member-list .cyber-data-header {
    display: none;
  }

  .member-list .cyber-data-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .member-list .member-list-cell {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.5fr);
    align-items: start;
    gap: 10px;
    text-align: left;
  }

  .member-list .member-list-label {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-muted);
  }

  .member-list .member-list-cell .cyber-badge {
    justify-self: start;
  }
}

/* --- Cyber Data Row (Replaces Tables) --- */
.cyber-data-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  margin-bottom: 10px;
  border-radius: var(--radius-sm);
  background: rgba(15, 23, 36, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.cyber-data-row:hover {
  background: rgba(18, 28, 44, 0.85);
  border-color: rgba(0, 240, 255, 0.25);
  transform: translateX(3px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.cyber-data-row.active {
  border-color: rgba(0, 240, 255, 0.5);
  background: rgba(0, 240, 255, 0.06);
}

.cyber-data-row.row-danger {
  border-color: rgba(255, 51, 102, 0.35);
  background: rgba(255, 51, 102, 0.05);
}

/* --- Cyber Badges & Pills --- */
.cyber-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}

.cyber-badge-cyan {
  background: rgba(0, 240, 255, 0.1);
  border-color: rgba(0, 240, 255, 0.4);
  color: var(--neon-cyan);
}

.cyber-badge-emerald {
  background: rgba(0, 255, 157, 0.1);
  border-color: rgba(0, 255, 157, 0.4);
  color: var(--neon-emerald);
}

.cyber-badge-amber {
  background: rgba(255, 184, 0, 0.1);
  border-color: rgba(255, 184, 0, 0.4);
  color: var(--neon-amber);
}

.cyber-badge-crimson {
  background: rgba(255, 51, 102, 0.1);
  border-color: rgba(255, 51, 102, 0.4);
  color: var(--neon-crimson);
}

.cyber-badge-purple {
  background: rgba(168, 85, 247, 0.1);
  border-color: rgba(168, 85, 247, 0.4);
  color: var(--neon-purple);
}

/* --- Topbar HUD Chips --- */
.hud-status-strip {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hud-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  background: rgba(15, 23, 36, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 12px;
  font-family: var(--font-mono);
  color: var(--text);
  text-decoration: none;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.hud-chip:hover {
  background: rgba(20, 32, 50, 0.95);
  border-color: rgba(0, 240, 255, 0.3);
  color: #ffffff;
  transform: translateY(-1px);
}

.hud-chip.active-pulse {
  border-color: rgba(0, 240, 255, 0.5);
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.25);
  animation: hudPulse 2s infinite ease-in-out;
}

.hud-chip.threat-alert {
  border-color: rgba(255, 51, 102, 0.6);
  color: var(--neon-crimson);
  background: rgba(255, 51, 102, 0.12);
  animation: hudAlertPulse 1.5s infinite ease-in-out;
}

@keyframes hudPulse {
  0%, 100% { box-shadow: 0 0 6px rgba(0, 240, 255, 0.2); }
  50% { box-shadow: 0 0 14px rgba(0, 240, 255, 0.5); }
}

@keyframes hudAlertPulse {
  0%, 100% { box-shadow: 0 0 6px rgba(255, 51, 102, 0.3); }
  50% { box-shadow: 0 0 18px rgba(255, 51, 102, 0.7); }
}

/* --- Cyber Buttons --- */
.cyber-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 10px 18px;
  border-radius: 4px;
  clip-path: var(--chamfer-btn);
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.15), rgba(0, 140, 255, 0.15));
  border: 1px solid var(--neon-cyan);
  color: var(--neon-cyan);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
}

.cyber-btn:hover {
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.3), rgba(0, 140, 255, 0.3));
  box-shadow: 0 0 18px rgba(0, 240, 255, 0.4);
  transform: translateY(-2px);
  color: #ffffff;
}

.cyber-btn:active {
  transform: translateY(0);
}

.cyber-btn-primary {
  background: var(--neon-cyan);
  color: #05080c;
  font-weight: 800;
}

.cyber-btn-primary:hover {
  background: #2bf4ff;
  color: #020406;
  box-shadow: 0 0 24px rgba(0, 240, 255, 0.6);
}

.cyber-btn-danger {
  border-color: var(--neon-crimson);
  color: var(--neon-crimson);
  background: rgba(255, 51, 102, 0.15);
}

.cyber-btn-danger:hover {
  background: rgba(255, 51, 102, 0.3);
  box-shadow: 0 0 18px rgba(255, 51, 102, 0.5);
  color: #ffffff;
}

.cyber-btn-outline {
  background: transparent;
  border-color: rgba(0, 240, 255, 0.45);
  color: var(--neon-cyan);
}

.cyber-btn-outline:hover {
  background: rgba(0, 240, 255, 0.15);
  border-color: var(--neon-cyan);
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.35);
  color: #ffffff;
}

.cyber-btn-sm {
  padding: 6px 12px;
  font-size: 11px;
}

/* --- Cyberdeck Standard Page-Deck & Page-Header --- */
.page-deck {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 30px;
}

/* Entfernt doppeltes Padding und Box-in-Box Rahmen, wenn .content in .content-area liegt */
.content-area > .content {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  margin-bottom: 0 !important;
}

.content-area > .content > h1:first-child,
.content-area > .content > h2:first-child {
  margin-top: 0;
}

.cyber-page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
  width: 100%;
}

.cyber-page-header-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.cyber-page-icon {
  display: none !important;
}

.cyber-page-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.cyber-page-title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: #ffffff;
  line-height: 1.2;
}

.cyber-page-subtitle {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.3;
}

.cyber-page-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* --- Cyberdeck Slot Badge with Visual Pips --- */
.cyber-slot-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(10, 20, 32, 0.75);
  border: 1px solid rgba(0, 240, 255, 0.25);
  border-radius: var(--radius-sm, 6px);
  padding: 6px 14px;
  backdrop-filter: blur(8px);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  transition: border-color var(--transition-base, 0.2s ease), box-shadow var(--transition-base, 0.2s ease);
}

.cyber-slot-badge:hover {
  border-color: rgba(0, 240, 255, 0.45);
  box-shadow: 0 2px 14px rgba(0, 240, 255, 0.15);
}

.cyber-slot-badge-label {
  color: var(--text-muted, #8b9bb4);
  font-size: 0.8rem;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.cyber-slot-badge-count {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--neon-cyan, #00f0ff);
  letter-spacing: 0.5px;
}

.slot-pips {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 4px;
  padding-left: 8px;
  border-left: 1px solid rgba(255, 255, 255, 0.15);
}

.slot-pip {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.22);
  transition: all 0.25s ease;
}

.slot-pip.active {
  background: var(--neon-cyan, #00f0ff);
  border-color: #00f0ff;
  box-shadow: 0 0 8px rgba(0, 240, 255, 0.8);
}

/* --- Standard Cyber Telemetrie / KPI Strip (Kompakt & Notebook-freundlich) --- */
.cyber-telemetry-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
  width: 100%;
}

.cyber-telemetry-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  min-height: 42px;
  margin-bottom: 0;
  flex: 1 1 180px;
  background: rgba(12, 19, 31, 0.7);
  border: 1px solid rgba(0, 240, 255, 0.15);
  border-radius: var(--radius-sm);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.cyber-telemetry-icon {
  width: 26px;
  height: 26px;
  border-radius: 4px;
  background: rgba(0, 240, 255, 0.08);
  border: 1px solid rgba(0, 240, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
  color: var(--neon-cyan);
}

.cyber-telemetry-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.cyber-telemetry-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  line-height: 1.1;
  margin-bottom: 1px;
}

.cyber-telemetry-value {
  font-size: 0.95rem;
  font-weight: 700;
  font-family: var(--font-mono);
  color: #ffffff;
  letter-spacing: 0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.cyber-telemetry-value.val-cc {
  color: var(--neon-amber);
  text-shadow: 0 0 6px rgba(255, 184, 0, 0.35);
}

.cyber-telemetry-value.val-cyan {
  color: var(--neon-cyan);
  text-shadow: 0 0 6px rgba(0, 240, 255, 0.35);
}

.cyber-telemetry-value.val-emerald {
  color: var(--neon-emerald);
  text-shadow: 0 0 6px rgba(0, 255, 157, 0.35);
}

@media (max-width: 600px) {
  .cyber-page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .cyber-page-header-right {
    width: 100%;
    justify-content: flex-start;
  }
  .cyber-telemetry-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .cyber-telemetry-card {
    flex: none;
    padding: 6px 10px;
  }
}

/* ==========================================================================
   Landing Page & Public Showcase
   ========================================================================== */
.landing-hero {
  text-align: center;
  padding: 48px 0 32px 0;
  position: relative;
}

.landing-title {
  font-size: clamp(28px, 5vw, 46px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -1px;
  margin-bottom: 16px;
  text-transform: uppercase;
  background: linear-gradient(180deg, #ffffff 30%, var(--neon-cyan) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.landing-lead {
  font-size: clamp(16px, 2.5vw, 19px);
  color: var(--text-muted);
  max-width: 780px;
  margin: 0 auto 28px auto;
  line-height: 1.6;
}

.landing-cta {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

/* --- Interactive Teaser Terminal --- */
.landing-teaser-terminal {
  max-width: 700px;
  margin: 0 auto 56px auto;
  border-radius: var(--radius-md);
  background: #030508;
  border: 1px solid rgba(0, 240, 255, 0.25);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6), 0 0 20px rgba(0, 240, 255, 0.1);
  overflow: hidden;
  text-align: left;
}

.teaser-term-header {
  background: rgba(15, 23, 36, 0.95);
  padding: 8px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(0, 240, 255, 0.15);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
}

.teaser-term-dots {
  display: flex;
  gap: 6px;
}

.teaser-term-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
}

.teaser-term-dot.dot-red { background: #ff5555; }
.teaser-term-dot.dot-yellow { background: #ffaa00; }
.teaser-term-dot.dot-green { background: #00ffaa; }

.teaser-term-body {
  padding: 18px 20px;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
  color: #b0e6ff;
  min-height: 120px;
}

.teaser-term-prompt {
  color: var(--neon-cyan);
  font-weight: 700;
  margin-right: 8px;
}

.teaser-term-input-row {
  display: flex;
  align-items: center;
  margin-top: 10px;
}

.teaser-term-input {
  background: transparent !important;
  border: none !important;
  color: #ffffff !important;
  font-family: var(--font-mono) !important;
  font-size: 13px !important;
  padding: 0 !important;
  width: 100% !important;
  outline: none !important;
  box-shadow: none !important;
}

/* --- Landing Feature Grid --- */
.landing-feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 48px;
}

.landing-card {
  background: var(--cyber-surface-glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(0, 240, 255, 0.12);
  border-radius: var(--radius-md);
  padding: 24px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
}

.landing-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 240, 255, 0.35);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4), 0 0 20px rgba(0, 240, 255, 0.1);
}

.landing-card-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: rgba(0, 240, 255, 0.08);
  border: 1px solid rgba(0, 240, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  font-size: 22px;
  color: var(--neon-cyan);
}

.landing-card h3 {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 10px 0;
  color: #ffffff;
}

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

/* --- Landing KPI Bar --- */
.landing-kpi-bar {
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}

.landing-kpi-chip {
  background: rgba(15, 23, 36, 0.85);
  border: 1px solid rgba(0, 240, 255, 0.15);
  border-radius: var(--radius-sm);
  padding: 12px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 140px;
}

.landing-kpi-label {
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.landing-kpi-val {
  font-size: 20px;
  font-weight: 800;
  font-family: var(--font-mono);
  color: var(--neon-cyan);
  margin-top: 2px;
}

/* --- Cyber Document View (Static Pages) --- */
.cyber-doc-wrapper {
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
}

.cyber-doc-header {
  border-bottom: 1px solid rgba(0, 240, 255, 0.15);
  padding-bottom: 16px;
  margin-bottom: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.cyber-doc-header h1 {
  font-size: 26px;
  font-weight: 800;
  margin: 0;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  overflow-wrap: anywhere;
}

.cyber-doc-content {
  background: var(--cyber-surface-glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(0, 240, 255, 0.12);
  border-radius: var(--radius-md);
  padding: 32px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
  line-height: 1.7;
}

.cyber-doc-content h2,
.cyber-doc-content h3 {
  color: var(--neon-cyan);
  margin-top: 28px;
  margin-bottom: 12px;
  font-weight: 700;
}

.cyber-doc-content h2:first-child,
.cyber-doc-content h3:first-child {
  margin-top: 0;
}

.cyber-doc-content p {
  color: var(--text);
  margin-bottom: 16px;
}

.cyber-doc-content ul {
  list-style: square;
  padding-left: 24px;
  margin-bottom: 16px;
  color: var(--text-muted);
}

.cyber-doc-content li {
  margin-bottom: 6px;
}

/* --- Public Rules & FAQ / Netzwerk-Dokumente Styling --- */
.rules-container,
.faq-container {
  width: 100%;
  color: var(--text);
}

.rules-hero {
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(0, 240, 255, 0.15);
}

.rules-meta-badge {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.rules-lead {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--text);
  margin-bottom: 18px;
}

.rule-callout {
  border-radius: var(--radius-md);
  padding: 16px 20px;
  margin: 18px 0;
  border: 1px solid transparent;
  line-height: 1.6;
}

.rule-callout p {
  margin-bottom: 0 !important;
}

.rule-callout-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.rule-callout-warning {
  background: rgba(255, 184, 0, 0.08);
  border-color: rgba(255, 184, 0, 0.35);
  color: var(--text);
}
.rule-callout-warning .rule-callout-title {
  color: var(--neon-amber);
}

.rule-callout-danger {
  background: rgba(255, 51, 102, 0.08);
  border-color: rgba(255, 51, 102, 0.35);
  color: var(--text);
}
.rule-callout-danger .rule-callout-title {
  color: var(--neon-crimson);
}

.rule-callout-info {
  background: rgba(0, 240, 255, 0.08);
  border-color: rgba(0, 240, 255, 0.35);
  color: var(--text);
}
.rule-callout-info .rule-callout-title {
  color: var(--neon-cyan);
}

.rules-nav-box {
  background: rgba(7, 12, 20, 0.7);
  border: 1px solid rgba(0, 240, 255, 0.15);
  border-radius: var(--radius-md);
  padding: 20px;
  margin-bottom: 30px;
}

.rules-nav-title {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--neon-cyan);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 14px;
}

.rules-nav-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
}

#public-doc-faq {
  overflow-wrap: anywhere;
}

#public-doc-faq .rules-nav-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
}

@media (max-width: 600px) {
  .public-guide-content,
  #public-doc-faq .rule-card,
  #public-doc-faq .rules-nav-box {
    padding: 16px;
  }
}

.rules-nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(12, 21, 36, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 0.88rem;
  text-decoration: none;
  transition: all 0.2s ease;
}

.rules-nav-item:hover {
  background: rgba(0, 240, 255, 0.1);
  border-color: rgba(0, 240, 255, 0.3);
  color: var(--neon-cyan);
  transform: translateX(3px);
}

.rules-nav-item .nav-p {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--neon-cyan);
  font-size: 0.8rem;
}

.rule-card {
  background: rgba(9, 15, 25, 0.6);
  border: 1px solid rgba(0, 240, 255, 0.12);
  border-radius: var(--radius-md);
  padding: 24px;
  margin-bottom: 24px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
  scroll-margin-top: 80px;
}

.rule-card:hover {
  border-color: rgba(0, 240, 255, 0.28);
  box-shadow: 0 4px 20px rgba(0, 240, 255, 0.06);
}

.rule-card-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding-bottom: 12px;
}

.rule-badge-p,
.faq-badge-q {
  background: rgba(0, 240, 255, 0.12);
  border: 1px solid rgba(0, 240, 255, 0.4);
  color: var(--neon-cyan);
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 0.95rem;
  padding: 4px 12px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.rule-card-header h3 {
  margin: 0;
  font-size: 1.25rem;
  color: #ffffff;
  font-weight: 700;
}

.rule-card-body p {
  margin-bottom: 14px;
  line-height: 1.68;
}

.rule-card-body p strong {
  color: #ffffff;
}

.rule-card-body ul {
  margin: 12px 0 16px 20px;
  padding-left: 10px;
}

.rule-card-body li {
  margin-bottom: 8px;
  line-height: 1.6;
}

.rules-table-responsive {
  width: 100%;
  overflow-x: auto;
  margin: 18px 0;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(0, 240, 255, 0.15);
}

.rules-matrix-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  text-align: left;
}

.rules-matrix-table th {
  background: rgba(12, 21, 36, 0.85);
  color: var(--neon-cyan);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(0, 240, 255, 0.2);
}

.rules-matrix-table td {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  vertical-align: middle;
}

.rules-matrix-table tr:last-child td {
  border-bottom: none;
}

.rules-matrix-table tr:hover td {
  background: rgba(0, 240, 255, 0.03);
}

.rules-footer-banner {
  background: rgba(12, 21, 36, 0.85);
  border: 1px solid rgba(0, 240, 255, 0.25);
  border-radius: var(--radius-md);
  padding: 24px;
  margin-top: 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.rules-footer-text h4 {
  margin: 0 0 6px 0;
  color: #ffffff;
  font-size: 1.1rem;
}

.rules-footer-text p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.rules-footer-btns {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.landing-introduction {
  max-width: 780px;
  margin: 0 auto 28px;
  text-align: left;
}

.participation-notice {
  text-align: left;
  overflow-wrap: anywhere;
}

/* --- Hacker Terminal --- */
.terminal-window {
  background: #050505;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8);
  border: 1px solid #1a1a1a;
  margin-bottom: 30px;
  font-family: var(--font-mono);
  display: flex;
  flex-direction: column;
  position: relative;
}

.terminal-header {
  background: #1a1a1a;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid #000;
}

.terminal-buttons {
  display: flex;
  gap: 8px;
}

.t-btn {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  opacity: 0.8;
}

.t-btn.red {
  background: #ff5f56;
}

.t-btn.yellow {
  background: #ffbd2e;
}

.t-btn.green {
  background: #27c93f;
}

.terminal-title {
  color: #666;
  font-size: 11px;
  flex: 1;
  text-align: center;
  margin-right: 52px;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 700;
}

.terminal-body {
  padding: 24px;
  min-height: 450px;
  max-height: 70vh;
  overflow-y: auto;
  cursor: text;
  display: flex;
  flex-direction: column;
  position: relative;
  background:
    radial-gradient(circle at 50% 50%, rgba(var(--accent)/0.03) 0%, transparent 80%),
    #050505;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--accent)/0.3) #050505;
}

.terminal-output {
  color: #ccc;
  margin-bottom: 10px;
  white-space: pre-wrap;
  font-size: 15px;
  font-family: var(--font-mono);
  word-break: break-word;
  overflow-wrap: break-word;
  line-height: 1.5;
}

.terminal-body::-webkit-scrollbar {
  width: 8px;
}

.terminal-body::-webkit-scrollbar-track {
  background: #050505;
}

.terminal-body::-webkit-scrollbar-thumb {
  background: rgba(var(--accent)/0.2);
  border-radius: 4px;
}

.terminal-body::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--accent)/0.4);
}

.terminal-body::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.1) 50%),
    linear-gradient(90deg, rgba(255, 0, 0, 0.02), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.02));
  background-size: 100% 4px, 3px 100%;
  pointer-events: none;
  z-index: 5;
}

.terminal-prompt-line {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: #fff;
  font-size: 15px;
}

.terminal-prompt {
  color: rgb(var(--accent));
  white-space: nowrap;
  font-weight: 700;
  user-select: none;
}

.terminal-input {
  width: 100%;
  background: transparent !important;
  border: none !important;
  color: #fff !important;
  font-family: var(--font-mono) !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  resize: none;
  outline: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  height: auto;
  min-height: 1.6em;
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
}


.terminal-input::placeholder {
  color: rgba(255, 255, 255, 0.1);
}

.terminal-footer {
  background: #0a0a0a;
  padding: 12px 24px;
  border-top: 1px solid #1a1a1a;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #444;
}

.terminal-status {
  display: flex;
  align-items: center;
  gap: 20px;
}

.status-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgb(var(--accent));
  box-shadow: 0 0 5px rgb(var(--accent));
}

/* --- Server Switcher --- */
.top-bar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex-shrink: 0;
}

/* Redundante server-switcher Deklarationen wurden in den Topbar HUD Bereich migriert */

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

/* --- Dashboard Server-Liste --- */
.server-list-compact {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.server-list-compact .server-option {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--text);
  padding: 8px 14px;
  min-width: 140px;
  max-width: 220px;
  flex-shrink: 0;
}

.server-list-compact .server-option.active {
  border-color: rgba(var(--accent) / 0.6);
}

.server-active-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: rgb(var(--accent));
  letter-spacing: 0.5px;
  margin-top: 2px;
}

/* --- Mobile / Responsive --- */
@media (max-width: 900px) {
  :root {
    --sidebar-width: 280px;
  }

  /* Fix 6: Off-Canvas Sidebar – Sidebar bleibt im DOM, wird per Transform ein-/ausgeblendet */
  .app-sidebar {
    width: 280px !important;
    transform: translateX(-100%);
    z-index: 60;
  }

  body.sidebar-expanded .app-sidebar {
    transform: translateX(0);
  }

  .app-sidebar .nav-flyout {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    flex: 1;
    min-width: 0;
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    box-shadow: none !important;
    background: transparent !important;
    border: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
  .app-sidebar .nav-flyout::before {
    display: none !important;
  }
  .app-sidebar .sidebar-nav-link {
    width: 100% !important;
    height: auto !important;
    min-height: 44px !important;
    padding: 8px 10px !important;
    margin: 2px 0 !important;
    justify-content: flex-start !important;
    gap: 12px !important;
  }
  .app-sidebar .sidebar-nav-link .nav-icon-wrapper {
    width: 36px !important;
    height: 36px !important;
  }
  .app-sidebar .brand-text,
  .app-sidebar .nav-label {
    display: inline-block !important;
    opacity: 1 !important;
    visibility: visible !important;
    width: auto !important;
  }
  .app-sidebar .nav-kbd {
    display: inline-flex !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  .app-sidebar .nav-group-title {
    font-size: 10px !important;
    height: auto !important;
    padding: 0 12px !important;
    background: none !important;
    opacity: 0.6 !important;
    visibility: visible !important;
  }
  .app-sidebar .sidebar-footer-info .status-text {
    display: inline !important;
  }
  .app-sidebar .server-time {
    font-size: 13px !important;
  }
  .sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(3, 7, 13, 0.75);
    backdrop-filter: blur(6px);
    z-index: 55;
  }
  body.sidebar-expanded .sidebar-overlay {
    display: block;
  }

  .app-main {
    margin-left: 0;
  }

  .content-area {
    padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px) + 24px) !important;
  }

  :root {
    --notification-bottom: calc(76px + env(safe-area-inset-bottom, 0px) + 16px);
  }

  /* Burger-Menü-Toggle auf mobilen Geräten ausblenden (Bottom-Nav übernimmt die Navigation) */
  .sidebar-toggle {
    display: none;
  }

  /* Close-Sheet Button Styling */
  .close-sheet {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--border);
    color: var(--text);
    cursor: pointer;
    transition: background 0.2s;
  }

  .close-sheet:hover,
  .close-sheet:active {
    background: rgba(255, 255, 255, 0.15);
  }

  /* Topbar responsive HUD styles are defined centrally in Tactical Topbar HUD block */

  .sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 45;
    opacity: 0;
    pointer-events: none;
    transition: 0.3s;
    backdrop-filter: blur(2px);
  }

  body.sidebar-expanded .sidebar-overlay {
    opacity: 1;
    pointer-events: auto;
  }

  /* Mobile Tables -> Cards (Legacy adaptation) */
  .mobile-table tr {
    display: flex;
    flex-direction: column;
    background: var(--bg-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    margin-bottom: 16px;
    padding: 12px;
  }

  .mobile-table td {
    border-bottom: 1px dashed var(--border);
    padding: 8px 0;
    display: flex;
    justify-content: space-between;
    text-align: right;
  }

  .mobile-table td[colspan],
  .mobile-table td.options,
  .mobile-table td.navigation {
    display: block !important;
    text-align: left !important;
    width: 100% !important;
  }

  .mobile-table td[colspan]::before,
  .mobile-table td.options::before,
  .mobile-table td.navigation::before {
    display: none !important;
  }

  .mobile-table td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--text-muted);
    text-align: left;
    margin-right: 12px;
  }

  .mobile-table td:last-child {
    border-bottom: none;
  }

  .mobile-table thead {
    display: none;
  }
}

/* Beim Vollreload keine Inhaltsverschiebung animieren: Der Browser stellt
   die Scrollposition sonst relativ zu den bewegten Elementen wieder her.
   Weiche Menüwechsel blenden den Inhalt bereits in soft-nav.js ein. */

/* Legacy Fixes for ingame.php generated content */

.content center {
  text-align: left;
}

/* Stop centering everything */

.content form {
  display: grid;
  gap: 16px;
}

/* Fix for "menu" class used in some legacy files if any */

.menu a {
  margin-right: 10px;
  display: inline-block;
  margin-bottom: 8px;
}

/* --- Bottom Navigation (Mobile) --- */
.bottom-nav,
.mobile-menu-overlay,
#mobileMenuTouchLayer {
  display: none !important;
}

@media (max-width: 900px) {
  #mobileMenuTouchLayer {
    display: block !important;
  }

  .content-area {
    padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px) + 24px) !important;
  }

  :root {
    --notification-bottom: calc(76px + env(safe-area-inset-bottom, 0px) + 16px);
  }

  .bottom-nav {
    display: flex !important;
    position: fixed !important;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(60px + env(safe-area-inset-bottom, 0px));
    background: rgba(9, 15, 25, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid rgba(0, 240, 255, 0.15);
    z-index: 100;
    justify-content: space-around;
    align-items: center;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.6);
  }

  .bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: var(--text-muted);
    flex: 1;
    min-width: 0;
    height: 100%;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    -webkit-tap-highlight-color: transparent;
    padding: 6px 0;
    text-decoration: none;
  }

  .bottom-nav-item:active {
    background: rgba(var(--accent) / 0.1);
    transform: scale(0.96);
  }

  .bottom-nav-item.active {
    color: rgb(var(--accent));
  }

  .bottom-nav-item.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 28px;
    height: 2px;
    background: rgb(var(--accent));
    box-shadow: 0 0 10px rgb(var(--accent));
    border-radius: 0 0 2px 2px;
  }

  .bottom-nav-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 24px;
    height: 24px;
    line-height: 1;
    transition: transform 0.2s;
  }

  .bottom-nav-icon .cyber-nav-svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    stroke-width: 2;
    transition: all 0.2s ease;
  }

  .bottom-nav-item.active .bottom-nav-icon {
    transform: translateY(-1px);
  }

  .bottom-nav-item.active .bottom-nav-icon .cyber-nav-svg {
    stroke: rgb(var(--accent));
    filter: drop-shadow(0 0 6px rgba(var(--accent) / 0.7));
  }

  .bottom-nav-item.active .nav-icon-attack .cyber-nav-svg {
    stroke: var(--neon-crimson);
    filter: drop-shadow(0 0 8px rgba(255, 51, 102, 0.7));
  }

  .bottom-nav-label {
    font-size: 10px !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    padding: 0 2px;
  }

  /* --- Mobile Menu Sheet --- */
  .mobile-menu-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }

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

  .mobile-menu-sheet {
    position: fixed;
    bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    left: 0;
    right: 0;
    background: var(--bg-2);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding: 24px;
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    border-top: 2px solid rgb(var(--accent));
    max-height: 70vh;
    max-height: 70dvh;
    overflow-y: auto;
    z-index: 1001;
  }

  .mobile-menu-overlay.active .mobile-menu-sheet {
    transform: translateY(0);
  }

  .mobile-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgb(var(--accent));
  }

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

  .mobile-menu-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 8px;
    background: var(--bg-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    transition: all 0.2s;
  }

  .mobile-menu-link .menu-icon {
    font-size: clamp(24px, 6vw, 32px);
    font-family: var(--font-mono);
    margin-bottom: 4px;
    flex-shrink: 0;
  }

  .mobile-menu-link .menu-label {
    font-size: clamp(11px, 3vw, 13px);
    font-weight: 600;
    text-align: center;
    color: var(--text-muted);
    line-height: 1.3;
    flex-shrink: 0;
  }

  .mobile-menu-link.active {
    border-color: rgba(var(--accent)/0.3);
    background: rgba(var(--accent)/0.05);
  }

  .mobile-menu-link.active .menu-label {
    color: rgb(var(--accent));
  }

  .bottom-nav-icon .nav-badge {
    position: absolute;
    top: -8px;
    right: -14px;
    background: rgb(var(--danger));
    color: white;
    font-size: 10px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    border: 2px solid #0b1016;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  }
}

.nav-icon-attack {
  color: rgb(var(--danger)) !important;
  filter: drop-shadow(0 0 2px rgba(var(--danger)/0.3));
}

/* --- Tooltips --- */



.tooltip-popover {



  position: fixed;



  z-index: 1000;



  background: var(--bg-2);



  border: 1px solid var(--border-highlight);



  border-radius: var(--radius-sm);



  padding: 8px 12px;



  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);



  pointer-events: none;



  font-size: 14px;



  line-height: 1.4;



  max-width: 300px;



  white-space: pre-wrap;



  color: var(--text);



}







.tooltip-popover.is-wide {



  max-width: 400px;



}







/* --- Mobile Tooltip Bottom Sheet --- */



.tooltip-backdrop {



  position: fixed;



  inset: 0;



  background: rgba(0, 0, 0, 0.7);



  backdrop-filter: blur(4px);



  z-index: 1999;



  opacity: 0;



  pointer-events: none;



  transition: opacity 0.3s;



}



.tooltip-backdrop.active {



  opacity: 1;



  pointer-events: auto;



}







.tooltip-sheet {



  position: fixed;



  bottom: 0;



  left: 0;



  right: 0;



  background: var(--bg-2);



  border-top: 3px solid rgb(var(--accent));



  border-radius: var(--radius-lg) var(--radius-lg) 0 0;



  padding: 24px;



  padding-bottom: max(24px, env(safe-area-inset-bottom));



  z-index: 2000;



  transform: translateY(100%);



  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);



  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.8);



  max-height: 70vh;



  overflow-y: auto;



}



.tooltip-sheet.active {



  transform: translateY(0);



}



.tooltip-sheet-header {



  display: flex;



  justify-content: space-between;



  align-items: center;



  margin-bottom: 16px;



}



.tooltip-sheet-title {



  font-weight: 700;



  color: rgb(var(--accent));



  font-size: 1.1em;



  text-transform: uppercase;



  letter-spacing: 1px;



}



.tooltip-sheet-close {



  width: 40px;



  height: 40px;



  display: flex;



  align-items: center;



  justify-content: center;



  background: var(--bg-3);



  border-radius: 50%;



  color: var(--text);



  font-size: 20px;



  cursor: pointer;



  border: 1px solid var(--border-highlight);



}



.tooltip-sheet-content {



  color: var(--text);



  line-height: 1.6;



  white-space: pre-wrap;



  font-size: 16px;



}



.tooltip-sheet-hint {



  margin-top: 20px;



  padding-top: 15px;



  border-top: 1px solid var(--border);



  font-size: 13px;



  color: var(--text-muted);



  text-align: center;



}

/* =========================================================================
   Admin-Interface Hilfsstile
   ========================================================================= */

/* Kleinere Schaltflächenvariante für Tabellen-Aktionen */
.btn.btn-sm,
.btn-sm {
  padding: 4px 10px;
  font-size: 12px;
  border-radius: 6px;
}

/* Gefährliche Aktion (Löschen) */
.btn.btn-danger,
.btn-danger {
  background: rgba(var(--danger)/0.12);
  border-color: rgba(var(--danger)/0.3);
  color: rgb(var(--danger));
}

.btn.btn-danger:hover,
.btn-danger:hover {
  background: rgb(var(--danger));
  color: #fff;
}

/* Info-Schaltfläche (Abhängigkeiten etc.) */
.btn.btn-info,
.btn-info {
  background: rgba(var(--accent-secondary, 0 140 255)/0.12);
  border-color: rgba(0 140 255 / 0.3);
  color: rgb(0 160 255);
}

.btn.btn-info:hover,
.btn-info:hover {
  background: rgb(0 140 255);
  color: #fff;
}

/* Typ-Badges in Daily-Task-Liste */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.badge-upgrade {
  background: rgba(var(--accent)/0.15);
  color: rgb(var(--accent));
}

.badge-research {
  background: rgba(0 140 255 / 0.15);
  color: rgb(0 180 255);
}

.badge-attack {
  background: rgba(var(--danger)/0.15);
  color: rgb(var(--danger));
}

/* Horizontale Formularzeile für Inline-Felder nebeneinander */
.form-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 0;
}

.form-row .form-group {
  min-width: 120px;
}

/* Admin-Tabellen: Aktionszellen rechtsbündig */
.admin-table td.actions {
  text-align: right;
  white-space: nowrap;
}

.admin-table code {
  font-family: var(--font-mono);
  font-size: 12px;
  background: rgba(255, 255, 255, 0.05);
  padding: 2px 6px;
  border-radius: 4px;
}

/* --- Sidebar Tasks --- */
.sidebar-tasks {
  background: rgba(var(--accent)/0.03);
  border: 1px solid rgba(var(--accent)/0.1);
  border-radius: var(--radius-md);
  padding: 12px 0;
  margin: 0 8px 20px 8px;
}

.sidebar-tasks .nav-group-title {
  color: rgb(var(--accent));
  opacity: 0.8;
  padding: 0 16px;
  margin-bottom: 12px;
}

.task-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 12px;
}

.task-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: var(--bg-3);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  font-size: 13px;
}

.task-icon {
  font-size: 16px;
  filter: drop-shadow(0 0 5px rgba(var(--accent)/0.3));
}

.task-details {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.task-name {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
}

.task-timer {
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgb(var(--accent));
}

/* --- Dashboard List --- */
.dashboard-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  list-style: none;
  padding: 0;
  margin: 5px 0 0 0;
}

/* --- Dashboard-Wrapper: Mobile 1 Spalte, Desktop 2 Spalten --- */
/* Spezifität 0,2,0 nötig, um display:flex aus .features .card zu überschreiben */
.features .dashboard-top-wrapper,
.features .dashboard-sections-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.features .dashboard-top-wrapper > *,
.features .dashboard-sections-wrapper > * {
  width: 100%;
  min-width: 0;
}

@media (min-width: 640px) {
  .features .dashboard-top-wrapper,
  .features .dashboard-sections-wrapper {
    grid-template-columns: 1fr 1fr;
  }
}

.dashboard-list-header {
  padding-bottom: 8px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}

.dashboard-list-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 10px 14px !important;
  border-radius: var(--radius-sm, 6px);
  background: rgba(12, 19, 31, 0.45);
  border: 1px solid rgba(0, 240, 255, 0.06);
  margin-bottom: 8px;
  width: 100% !important;
  transition: all 0.2s ease;
}

.dashboard-list-item:hover {
  background: rgba(16, 26, 42, 0.65);
  border-color: rgba(0, 240, 255, 0.18);
}

.dashboard-list-item:last-child {
  margin-bottom: 0;
}

.dashboard-list-item .item-info {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}

.dashboard-list-item .item-name {
  font-weight: 600;
  color: #e2e8f0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.92rem;
  min-width: 110px;
}

.dashboard-list-item .item-level {
  font-family: var(--font-mono);
  color: var(--neon-cyan, #00f0ff);
  font-size: 0.82rem;
  background: rgba(0, 240, 255, 0.08);
  border: 1px solid rgba(0, 240, 255, 0.2);
  padding: 2px 8px;
  border-radius: 4px;
  white-space: nowrap !important;
  word-break: normal !important;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
}

.dashboard-list-item .cd,
.dashboard-list-item .item-action {
  font-family: var(--font-mono);
  color: rgb(var(--accent));
  font-size: 0.9em;
  text-align: right;
  display: inline-flex !important;
  justify-content: flex-end;
  align-items: center;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Mobile: Name oben links, Stufe rechts, Action-Button volle Breite darunter */
@media (max-width: 599px) {
  .dashboard-list-item {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding: 10px 12px !important;
  }

  .dashboard-list-item .item-info {
    justify-content: space-between !important;
    width: 100% !important;
  }

  .dashboard-list-item .item-action {
    width: 100% !important;
  }

  .dashboard-list-item .upgrade-btn,
  .dashboard-list-item .cyber-upgrade-btn {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
    min-height: 40px;
  }
}

/* Spezielle Formatierung für die Eigenschaften-Liste (Server-Info), damit Name und Wert linksbündig stehen */
#server-properties .dashboard-list-item {
  display: flex !important;
  grid-template-columns: none !important;
  justify-content: flex-start !important;
  gap: 12px !important;
}

#server-properties .item-level {
  text-align: left !important;
  opacity: 1 !important;
}

.upgrade-btn,
.cyber-upgrade-btn {
  font-family: var(--font-mono) !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  padding: 4px 10px !important;
  border-radius: 4px !important;
  border: 1px solid rgba(0, 255, 157, 0.45) !important;
  background: linear-gradient(135deg, rgba(0, 255, 157, 0.16), rgba(0, 240, 255, 0.08)) !important;
  color: var(--neon-emerald) !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 24px !important;
  box-shadow: 0 0 8px rgba(0, 255, 157, 0.12) !important;
}

.upgrade-btn:hover:not(.disabled),
.cyber-upgrade-btn:hover:not(.disabled) {
  background: linear-gradient(135deg, rgba(0, 255, 157, 0.35), rgba(0, 240, 255, 0.2)) !important;
  border-color: var(--neon-emerald) !important;
  color: #fff !important;
  box-shadow: 0 0 14px rgba(0, 255, 157, 0.45) !important;
  transform: translateY(-1px) !important;
}

.upgrade-btn.disabled,
.cyber-upgrade-btn.disabled {
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  color: var(--text-muted) !important;
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  transform: none !important;
}

.upgrade-status.running {
  font-family: var(--font-mono);
  font-size: 0.85em;
  color: var(--neon-cyan);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.affordable-hint {
  font-size: 9px;
  color: var(--neon-amber);
  opacity: 0.85;
  text-align: right;
  margin-top: 2px;
  white-space: nowrap;
  font-family: var(--font-mono);
}

/* --- Research Unlocks --- */
.unlock-hint {
  font-size: 11px;
  color: rgb(var(--accent-secondary, 0 140 255));
  opacity: 0.8;
  margin-top: 2px;
  font-weight: 500;
}

/* --- Terminal Layout --- */
.terminal-layout {
  display: flex;
  gap: 20px;
  align-items: stretch;
  margin-bottom: 30px;
}

.terminal-main {
  flex: 3;
  min-width: 0;
}

.terminal-sidebar {
  flex: 1;
  min-width: 250px;
}

@media (max-width: 1100px) {
  .terminal-layout {
    flex-direction: column;
  }
  .terminal-sidebar {
    min-width: 100%;
  }
}

@media (max-width: 768px) {
  .terminal-body {
    min-height: 300px;
    max-height: 55vh;
    padding: 10px;
  }
  .terminal-output {
    font-size: 14px;
  }
  .terminal-footer {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 14px;
  }
  .terminal-title {
    font-size: 10px;
    letter-spacing: 0.5px;
  }
  .terminal-input {
    font-size: 14px;
  }
  .terminal-prompt-line {
    gap: 6px;
    align-items: center;
  }

  /* Mobile: Send-Button neben dem Eingabefeld einblenden */
  .terminal-send-btn {
    display: flex !important;
  }

  /* Mobile: Confirm-Button Touch-Target ≥ 44px */
  .terminal-confirm-btn {
    min-height: 44px;
    min-width: 88px;
    padding: 10px 18px;
    font-size: 15px;
  }
}

/* Terminal Confirm Button */
.terminal-confirm-btn {
  background: none;
  border: 1px solid rgb(var(--accent));
  color: rgb(var(--accent));
  padding: 6px 14px;
  font-family: var(--font-mono);
  cursor: pointer;
}

/* Terminal Send-Button (nur auf Mobile sichtbar) */
.terminal-send-btn {
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  background: rgba(var(--accent)/0.12);
  border: 1px solid rgba(var(--accent)/0.3);
  border-radius: var(--radius-sm);
  color: rgb(var(--accent));
  font-size: 18px;
  flex-shrink: 0;
  cursor: pointer;
  transition: background 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.terminal-send-btn:active {
  background: rgba(var(--accent)/0.25);
}

/* --- Terminal Help-Befehlsliste (responsiv) --- */
.help-cmd-list {
  display: grid;
  grid-template-columns: minmax(60px, auto) minmax(120px, auto) 1fr;
  gap: 2px 16px;
  margin: 4px 0;
  font-family: var(--font-mono);
  font-size: 13px;
}

.help-cmd-row {
  display: contents;
}

.help-cmd-name {
  color: rgb(var(--accent));
  font-weight: 700;
  white-space: nowrap;
}

.help-cmd-syntax {
  color: rgba(var(--text) / 0.6);
  white-space: nowrap;
}

.help-cmd-desc {
  color: rgba(var(--text) / 0.85);
}

@media (max-width: 600px) {
  .help-cmd-list {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .help-cmd-row {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 4px 0;
    border-bottom: 1px solid rgba(var(--accent) / 0.1);
  }

  .help-cmd-syntax {
    font-size: 11px;
  }
}

.recent-targets-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.target-card-mini {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color 0.2s;
}

.target-card-mini:hover {
  border-color: rgba(var(--accent)/0.3);
}

.target-card-mini .target-ip {
  font-family: var(--font-mono);
  font-size: 13px;
  color: rgb(var(--accent));
  line-height: 1;
}

.target-card-mini .target-name {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
}

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

.fav-toggle {
  font-size: 16px;
  cursor: pointer;
  color: var(--text-muted);
  opacity: 0.5;
  transition: all 0.2s;
  text-decoration: none !important;
}

.fav-toggle:hover {
  opacity: 1;
  transform: scale(1.2);
}

.fav-toggle.active {
  color: #ffb100;
  opacity: 1;
  filter: drop-shadow(0 0 5px rgba(255, 177, 0, 0.4));
}

.target-card-mini .target-btn {
  padding: 4px 8px;
  font-size: 14px;
}

/* --- Mobile Menu Tasks --- */
.mobile-active-tasks {
  margin-bottom: 24px;
}

.mobile-menu-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.mobile-tasks-scroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 8px;
  scrollbar-width: none;
}

.mobile-tasks-scroll::-webkit-scrollbar {
  display: none;
}

.mobile-task-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  min-width: 180px;
  flex-shrink: 0;
}

.mobile-task-card .task-icon {
  font-size: 20px;
}

.mobile-task-card .task-name {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.mobile-task-card .task-timer {
  font-family: var(--font-mono);
  font-size: 12px;
  color: rgb(var(--accent));
}

/* Hinweistext */
.hint {
  color: var(--text-muted);
  font-size: 13px;
  margin-top: 0;
  margin-bottom: 1rem;
}

/* --- Mail / Inbox Styles --- */
.mailbox-container {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  width: 100%;
}

.mailbox-sidebar {
  width: 220px;
  flex-shrink: 0;
  position: sticky;
  top: 88px;
}

.mailbox-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--bg-3);
  padding: 8px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}

.mailbox-nav-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  transition: all 0.2s;
}

.mailbox-nav-item:hover {
  background: rgba(var(--accent)/0.05);
  color: var(--text);
}

.mailbox-nav-item.active {
  background: rgba(var(--accent)/0.1);
  color: rgb(var(--accent));
  font-weight: 600;
}

.mailbox-nav-item .badge {
  background: rgb(var(--danger));
  color: #fff;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 11px;
}

.mailbox-main {
  flex: 1;
  min-width: 0;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.message-list {
  display: flex;
  flex-direction: column;
}

.mailbox-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  gap: 12px;
}

.mailbox-actions-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.message-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.15s, border-left 0.1s;
  border-left: 3px solid transparent;
  gap: 16px;
}

.message-item:last-child {
  border-bottom: none;
}

.message-item:hover {
  background: rgba(var(--accent)/0.03);
  border-left-color: rgba(var(--accent)/0.3);
}

.message-item.unread {
  background: rgba(var(--accent)/0.01);
  border-left-color: rgb(var(--accent));
}

.message-item.unread .message-sender,
.message-item.unread .message-subject {
  font-weight: 700;
  color: var(--text);
}

.message-checkbox {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.message-sender {
  width: 160px;
  flex-shrink: 0;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-muted);
}

.message-main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.message-subject {
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 420px;
  flex-shrink: 0;
}

.message-preview {
  font-size: 13px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.7;
}

.message-time {
  flex-shrink: 0;
  font-size: 12px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  text-align: right;
  white-space: nowrap;
  min-width: 130px;
}

/* --- Message View --- */
.message-view {
  display: flex;
  flex-direction: column;
  max-width: 100%;
  box-sizing: border-box;
}

.message-view-header {
  padding: 24px;
  border-bottom: 1px solid var(--border);
}

.message-view-subject {
  font-size: 22px;
  margin: 0 0 16px 0 !important;
  color: var(--text) !important;
}

.message-view-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  color: var(--text-muted);
}

.message-view-body {
  padding: 24px;
  min-height: 200px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
}

.message-view-footer {
  padding: 16px 24px;
  background: rgba(255, 255, 255, 0.02);
  border-top: 1px solid var(--border);
  display: flex;
  gap: 12px;
}

/* --- Cyberdeck Mailbox Enhancements --- */
.cyber-mailbox-main {
  background:
    linear-gradient(var(--deck-panel), var(--deck-panel)) padding-box,
    linear-gradient(135deg, rgba(0, 240, 255, 0.3), rgba(0, 240, 255, 0.05)) border-box;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 30px rgba(0, 0, 0, 0.6);
}

.cyber-mailbox-nav {
  background:
    linear-gradient(var(--deck-panel), var(--deck-panel)) padding-box,
    linear-gradient(135deg, rgba(0, 240, 255, 0.25), rgba(0, 240, 255, 0.05)) border-box;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 8px 24px rgba(0, 0, 0, 0.5);
}

.cyber-mailbox-nav .cyber-nav-item {
  position: relative;
  border-left: 3px solid transparent;
  border-radius: var(--radius-sm);
  transition: all 0.2s ease;
}

.cyber-mailbox-nav .cyber-nav-item:hover {
  background: rgba(0, 240, 255, 0.06);
  border-left-color: rgba(0, 240, 255, 0.4);
  color: #fff;
  transform: translateX(2px);
}

.cyber-mailbox-nav .cyber-nav-item.active {
  background: rgba(0, 240, 255, 0.12);
  border-left-color: var(--neon-cyan);
  color: var(--neon-cyan);
  box-shadow: inset 0 0 12px rgba(0, 240, 255, 0.08);
  font-weight: 700;
}

.cyber-mail-card {
  position: relative;
  background: rgba(10, 15, 25, 0.4);
  border-bottom: 1px solid rgba(0, 240, 255, 0.08);
  border-left: 3px solid transparent;
  transition: background 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-left-color 0.2s, transform 0.15s ease;
}

.cyber-mail-card:hover {
  background: rgba(0, 240, 255, 0.05);
  border-left-color: rgba(0, 240, 255, 0.6);
  transform: translateX(2px);
}

.cyber-mail-card.unread,
.cyber-mail-card.is-unread {
  background: rgba(0, 240, 255, 0.08);
  border-left-color: var(--neon-cyan);
}

.cyber-mail-card.unread .mail-subject,
.cyber-mail-card.is-unread .mail-subject {
  color: #fff;
  font-weight: 700;
  text-shadow: 0 0 8px rgba(0, 240, 255, 0.2);
}

.cyber-mail-card.unread .mail-sender,
.cyber-mail-card.is-unread .mail-sender {
  color: var(--neon-cyan);
  font-weight: 600;
}

.mail-indicator-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: transparent;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.message-item.unread .mail-indicator-dot,
.cyber-mail-card.unread .mail-indicator-dot,
.cyber-mail-card.is-unread .mail-indicator-dot {
  background: var(--neon-cyan);
  box-shadow: 0 0 8px var(--neon-cyan), 0 0 16px rgba(0, 240, 255, 0.4);
}

/* --- Mail Modal --- */
#zde-mail-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: var(--z-modal, 9000);
  align-items: flex-start;
  justify-content: center;
  padding: 24px 16px;
  overflow-y: auto;
}

#zde-mail-modal.active {
  display: flex;
}

.mail-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
  z-index: -1;
}

.mail-modal-card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  width: 100%;
  max-width: 720px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  margin: auto;
}

.mail-modal-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.mail-modal-subject {
  flex: 1;
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  overflow-wrap: break-word;
  line-height: 1.3;
}

.mail-modal-close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 4px;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}

.mail-modal-close:hover {
  background: rgba(var(--danger), 0.15);
  color: rgb(var(--danger));
}

.mail-modal-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 24px;
  font-size: 13px;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  gap: 12px;
  flex-wrap: wrap;
}

.mail-modal-meta a {
  color: rgb(var(--accent));
  text-decoration: none;
}

.mail-modal-meta a:hover {
  text-decoration: underline;
}

.mail-modal-body {
  flex: 1;
  min-height: 0; /* Pflicht für Flex-Overflow-Scroll: verhindert dass der Body max-height des Eltern-Containers ignoriert */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* iOS: sanftes Momentum-Scrolling */
  padding: 24px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
}

.mail-modal-loading {
  text-align: center;
  padding: 40px;
  color: var(--text-muted);
  font-size: 28px;
  animation: pulse 1s ease-in-out infinite;
}

.mail-modal-actions {
  display: flex;
  gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  flex-wrap: wrap;
}

@media (max-width: 600px) {
  #zde-mail-modal {
    padding: 0;
    align-items: flex-end;
  }

  .mail-modal-card {
    max-width: 100%;
    max-height: 92vh;
    height: 92vh; /* Feste Höhe statt nur max-height: erzwingt korrekte Flex-Aufteilung */
    border-radius: 12px 12px 0 0;
    margin: 0;
  }

  .mail-modal-header {
    padding: 16px 16px 12px;
  }

  .mail-modal-meta {
    padding: 8px 16px;
    flex-shrink: 0; /* Darf nicht schrumpfen – sonst stiehlt Header Platz vom Body */
  }

  .mail-modal-body {
    padding: 16px;
    overflow-y: scroll; /* 'scroll' statt 'auto' – zuverlässiger auf iOS Safari */
    -webkit-overflow-scrolling: touch;
  }

  .mail-modal-actions {
    padding: 12px 16px;
    flex-direction: column; /* Buttons untereinander auf kleinen Screens */
    flex-shrink: 0;
  }

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

  .mail-modal-actions .btn {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
}

/* --- Compose Form --- */
#messages-compose {
  padding: 0;
}

#messages-compose form {
  display: flex;
  flex-direction: column;
  gap: 0;
}

#messages-compose table {
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
}

#messages-compose table th,
#messages-compose table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}

#messages-compose table th {
  width: 120px;
  vertical-align: middle;
}

#messages-compose textarea {
  min-height: 300px;
  resize: vertical;
}

.btn.ghost {
  background: transparent;
  border-color: var(--border-highlight);
}

.btn.ghost:hover {
  background: rgba(255,255,255,0.05);
}

@media (max-width: 900px) {
  .mailbox-container {
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .mailbox-sidebar {
    width: 100%;
    position: static;
  }

  .mailbox-main {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .message-sender {
    width: 120px;
  }

  /* Aktionsleiste: Umbruch erlauben damit Select nicht überläuft */
  .mailbox-actions {
    flex-wrap: wrap;
  }

  .mailbox-actions-left {
    flex-wrap: wrap;
    min-width: 0;
    max-width: 100%;
    gap: 8px;
  }

  /* Select-Breite durch langen deutschen Optionstext begrenzen */
  .mailbox-actions select,
  .mailbox-actions .cyber-select-wrapper {
    max-width: 180px;
    min-width: 0;
  }

  /* Suchfeld: volle Breite auf Mobile */
  .mailbox-search {
    width: 100%;
    max-width: 100% !important;
    flex: 1 1 100%;
    box-sizing: border-box;
  }

  .mailbox-search input {
    width: 100%;
    box-sizing: border-box;
  }

  .message-item {
    min-width: 0;
    overflow: hidden;
  }

  .message-main {
    flex-direction: column;
    gap: 0;
  }

  .message-subject {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .message-preview {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  /* Tablet/Mobile: Text-Umbruch aktivieren - überschreibt 900px nowrap */
  .message-subject {
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    text-overflow: clip !important;
  }

  .message-preview {
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    text-overflow: clip !important;
  }
}

@media (max-width: 600px) {
  /* Content-Padding reduzieren für mehr Platz */
  .content {
    padding: 12px !important;
  }

  /* Mail-Read View: Header fixieren, Scroll nur für Content */
  #message-read {
    position: relative !important;
    max-height: 100vh !important;
    overflow-y: auto !important;
    padding: 0 !important;
  }

  #message-read .mailbox-container {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
  }

  /* Header: Sticky oben */
  .message-view-header {
    position: sticky !important;
    top: 0 !important;
    background: var(--bg-2) !important;
    z-index: 100 !important;
    padding: 12px !important;
    border-bottom: 1px solid var(--border) !important;
    margin-bottom: 0 !important;
  }

  /* Zurück-Button: Größer, besser klickbar */
  #message-read .btn.sm.ghost {
    width: 100% !important;
    justify-content: center !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    min-height: 44px !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 101 !important;
    background: var(--bg-2) !important;
    border-bottom: 1px solid var(--border) !important;
  }

  /* Mailbox-Container: Volle Breite erzwingen */
  .mailbox-container {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* Kleine Displays: Auswahl und Text nebeneinander, Zeit darunter. */
  .message-item {
    display: flex !important;
    gap: 8px !important;
    padding: 12px !important;
    min-width: 0 !important;
    overflow: hidden !important;
    width: 100% !important;
    box-sizing: border-box !important;
    flex-wrap: wrap !important;
  }

  /* Einzel- und Alle-Auswahl auch mobil mit ausreichend großer Touchfläche. */
  .message-checkbox {
    display: flex !important;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    cursor: pointer;
  }

  .message-checkbox input[type="checkbox"] {
    width: 20px;
    height: 20px;
  }

  .mailbox-actions .cyber-checkbox-label {
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
  }

  /* Sender: Verstecken */
  .message-sender {
    display: none !important;
  }

  /* Zeit: Unter den Text setzen, volle Breite */
  .message-time {
    width: 100% !important;
    min-width: 0 !important;
    font-size: 11px !important;
    order: 3 !important;
    margin-top: 4px !important;
    color: var(--text-muted) !important;
  }

  /* Subject: Volle Breite, mehr Platz */
  .message-subject {
    font-size: 14px !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    max-width: 100% !important;
    white-space: normal !important;
    text-overflow: clip !important;
    overflow: visible !important;
    width: 100% !important;
    flex: 1 1 100% !important;
  }

  /* Preview: Volle Breite, mehr Platz */
  .message-preview {
    font-size: 13px !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    max-width: 100% !important;
    white-space: normal !important;
    text-overflow: clip !important;
    overflow: visible !important;
    width: 100% !important;
    flex: 1 1 100% !important;
  }

  /* Nachrichtentext neben der Auswahl statt einer zusätzlichen Auswahlzeile. */
  .message-main {
    width: auto !important;
    max-width: 100% !important;
    flex: 1 1 0 !important;
  }

  .mailbox-actions-right {
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }

  /* Select-Breite auf kleinen Geräten hart begrenzen */
  .mailbox-actions select,
  .mailbox-actions .cyber-select-wrapper {
    max-width: 160px !important;
    font-size: 13px !important;
  }

  .mailbox-search {
    width: 100% !important;
    max-width: 100% !important;
    flex-basis: 100% !important;
  }

  .mailbox-search input {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .mailbox-main {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }
  
  /* Upgrade-Tabelle Mobile-Optimierung */
  #upgradeTableInner th:nth-child(2),
  #upgradeTableInner td:nth-child(2),
  #upgradeTableInner th:nth-child(3),
  #upgradeTableInner td:nth-child(3),
  #upgradeTableInner th:nth-child(4),
  #upgradeTableInner td:nth-child(4),
  #upgradeTableInner th:nth-child(5),
  #upgradeTableInner td:nth-child(5) {
    display: none;
  }
  
  #upgradeTableInner th:first-child,
  #upgradeTableInner td:first-child {
    width: 100%;
  }
  
  /* Card-View für Upgrades auf Mobile */
  #upgradeTableInner tbody tr {
    display: block;
    background: var(--bg-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    margin-bottom: 12px;
    padding: 12px;
  }
  
  #upgradeTableInner tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
  }
  
  #upgradeTableInner tbody td:last-child {
    border-bottom: none;
    justify-content: flex-end;
  }
  
  #upgradeTableInner thead {
    display: none;
  }
  
  /* Labels vor Werten einfügen */
  #upgradeTableInner td[data-value]::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--text-muted);
    margin-right: 12px;
  }
}

/* ===== Mobile: Außen-Padding reduzieren (verhindert horizontalen Scroll) ===== */
@media (max-width: 600px) {
  .content-area {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .content,
  .card {
    padding: 12px !important;
  }

  /* .content form ist display:grid – sicherstellen, dass Grid-Items nicht überlaufen */
  .content form {
    min-width: 0;
    overflow-x: hidden;
  }

  /* mailbox-container: sicherstellen, dass Container nie die Viewport-Breite überschreitet */
  .mailbox-container {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
}

/* ===== Tactical Cyberdeck Progress Bars (Neon Streams) ===== */
.progress-bar {
  height: 8px;
  background: rgba(6, 11, 19, 0.85);
  border: 1px solid rgba(0, 240, 255, 0.18);
  border-radius: 9999px;
  overflow: hidden;
  margin-top: 6px;
  width: 100%;
  position: relative;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.7);
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--neon-cyan, #00f0ff), var(--neon-emerald, #00ff9d));
  border-radius: 9999px;
  transition: width 1s linear;
  min-width: 4px;
  position: relative;
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.65), 0 0 4px #fff;
}

.progress-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.45) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: neonSheen 2.5s linear infinite;
  pointer-events: none;
}

@keyframes neonSheen {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .progress-fill::after {
    animation: none;
    display: none;
  }
}

/* ===== Queue Status-Leiste ===== */
.queue-status-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

.queue-status-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 6px;
  padding: 8px 12px;
  background: var(--bg-3);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  flex: 1;
  min-width: 180px;
}

.queue-status-label {
  font-size: 0.8em;
  color: var(--text-muted);
  white-space: nowrap;
  font-weight: 600;
  width: 100%;
  margin-bottom: 2px;
}

.queue-status-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.82em;
  background: rgba(var(--accent), 0.08);
  border: 1px solid rgba(var(--accent), 0.2);
  border-radius: 3px;
  padding: 2px 7px;
  white-space: nowrap;
  max-width: 100%;
  box-sizing: border-box;
}

.queue-status-item .item-name-short {
  color: var(--text);
  font-weight: 500;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 1;
}

.queue-status-item .cd {
  font-family: var(--font-mono);
  color: rgb(var(--accent));
  font-size: 0.9em;
  flex-shrink: 0;
}

.queue-status-empty {
  font-size: 0.82em;
  color: var(--text-muted);
}

.queue-status-maximal {
  font-size: 0.82em;
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgb(var(--warning));
  text-transform: uppercase;
}

.queue-status-progress {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Queue-Item mit Progress-Bar: Stack vertikal */
.dashboard-list-item .queue-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.dashboard-list-item .queue-timer-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Cancel-Button in Dashboard-Queue */
.btn-cancel-queue {
  background: none;
  border: none;
  color: rgba(var(--danger), 0.7);
  cursor: pointer;
  font-size: 0.8em;
  padding: 2px 4px;
  border-radius: 3px;
  line-height: 1;
  opacity: 0.6;
  transition: opacity 0.2s;
  flex-shrink: 0;
}

.btn-cancel-queue:hover {
  opacity: 1;
  color: rgb(var(--danger));
}

/* Forschung / Upgrade: Filter-Toolbar */
.filter-toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.filter-toolbar input[type=text] {
  flex: 1;
  min-width: 160px;
  max-width: 300px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(0,0,0,0.3);
  color: var(--text);
  font-size: 0.9em;
}

.filter-toolbar label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9em;
  cursor: pointer;
  white-space: nowrap;
}

/* Macro-Buttons in Server-Liste */
.macro-btn {
  background: none;
  border: 1px solid rgba(var(--accent)/0.4);
  color: rgb(var(--accent));
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 0.75em;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}

.macro-btn:hover {
  background: rgba(var(--accent)/0.15);
}

@media (max-width: 768px) {
  .macro-btn {
    min-width: 44px;
    min-height: 44px;
    font-size: 1.1em;
    padding: 4px 8px;
  }
}


/* ---- Sortier-Pfeile (sort-arrow / sort-arrows) – aus Templates konsolidiert ---- */
.sort-arrow,
.sort-arrows {
    display: inline-flex;
    flex-direction: column;
    font-size: 0.7em;
    color: rgb(var(--accent));
    opacity: 0.9;
    margin-left: auto;
    line-height: 1.1;
    padding-left: 10px;
}

.sort-arrow span:first-child,
.sort-arrows span:first-child {
    margin-bottom: -3px;
}

/* ---- Market-Modal Formular-Elemente (Fix #18: Inline-Styles entfernt) ---- */
.modal-amount-wrap {
    display: none;
    margin: 16px 0;
    text-align: left;
}

.modal-label {
    font-size: 0.9em;
    color: var(--text-muted);
}

.modal-amount-input {
    margin-top: 4px;
    width: 100%;
    padding: 6px 10px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(0, 0, 0, 0.4);
    color: var(--text);
    font-size: 1em;
}

/* ---- Disabled-Button-Klasse (btn.disabled) ---- */
.btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ---- Notification Toast (.zde-toast-container / .zde-toast) ---- */
#zde-notification-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column-reverse;
    gap: 10px;
    pointer-events: none;
    width: calc(100% - 40px);
    max-width: 320px;
}

.zde-toast {
    pointer-events: auto;
    box-sizing: border-box;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    padding: 16px;
    background: var(--bg-2);
    border-radius: var(--radius-sm);
    animation: zdeSlideUp 0.5s ease-out;
    word-wrap: break-word;
    opacity: 1;
    border: 1px solid var(--border-highlight);
}

.zde-toast h3 {
    margin: 0 0 8px 0;
    font-size: 1.1em;
    font-weight: 700;
}

.zde-toast p {
    margin: 0;
    font-size: 0.95em;
    color: var(--text);
    white-space: pre-wrap;
    line-height: 1.4;
}

/* ---- Phase 5 QoL: F5 – Sticky Table Headers ---- */
.table-scroll thead th {
  position: sticky;
  top: 0;
  background: var(--bg-2);
  z-index: 5;
  box-shadow: 0 1px 0 var(--border);
}

/* ---- Phase 5 QoL: F6 – Search-Clear-Button ---- */
.search-input-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.search-input-wrap input[type="text"] {
  padding-right: 28px;
}

.search-clear-btn {
  position: absolute;
  right: 6px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  padding: 0 4px;
  font-size: 0.9em;
  line-height: 1;
}

.search-clear-btn:hover {
  color: var(--text);
}

/* ---- Phase 5 QoL: M6 – Focus-Styles für Keyboard-Navigation ---- */
.btn:focus-visible {
  outline: 2px solid rgb(var(--accent));
  outline-offset: 2px;
}

a:focus-visible {
  outline: 2px solid rgb(var(--accent));
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---- Phase 5 QoL: P5/F3 – Utility-Farb-Klassen ---- */
.text-success {
  color: rgb(var(--success));
}

.text-danger {
  color: rgb(var(--danger));
}

.text-warning {
  color: rgb(var(--warning));
}

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

/* ---- Phase 5 QoL: P2 – Truncation für lange Namen in Tabellen ---- */
.table-cell-truncate {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  vertical-align: middle;
}

@media (max-width: 900px) {
  .table-cell-truncate {
    max-width: 120px;
  }
}

/* ---- Phase 5 QoL: P3 – KPI-Labels Mobile responsive ---- */
@media (max-width: 480px) {
  .kpi h3.value.small {
    font-size: 0.85em;
  }

  .kpi .label {
    font-size: 0.75em;
  }
}

/* ---- Phase 5 QoL: P4 – Sort-Arrow persistent – aktive Spalte visuell markieren ---- */
.sortable-th.sort-active .sort-arrow,
.sortable-th.sort-active .sort-arrows {
  opacity: 1;
  color: rgb(var(--accent));
}

.sortable-th:not(.sort-active) .sort-arrow,
.sortable-th:not(.sort-active) .sort-arrows {
  opacity: 0.4;
}

.sortable-th.sort-active.sort-asc .sort-arrow span:first-child,
.sortable-th.sort-active.sort-asc .sort-arrows span:first-child {
  opacity: 1;
}

.sortable-th.sort-active.sort-asc .sort-arrow span:last-child,
.sortable-th.sort-active.sort-asc .sort-arrows span:last-child {
  opacity: 0.3;
}

.sortable-th.sort-active.sort-desc .sort-arrow span:first-child,
.sortable-th.sort-active.sort-desc .sort-arrows span:first-child {
  opacity: 0.3;
}

.sortable-th.sort-active.sort-desc .sort-arrow span:last-child,
.sortable-th.sort-active.sort-desc .sort-arrows span:last-child {
  opacity: 1;
}

/* ---- Phase 5 QoL: P6 – Skeleton-Loader während refreshUI() ---- */
.is-loading tbody tr {
  pointer-events: none;
}

.is-loading tbody tr td {
  color: transparent !important;
  background: linear-gradient(90deg, var(--bg-3) 25%, var(--bg-2) 50%, var(--bg-3) 75%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.4s ease-in-out infinite;
  border-radius: 3px;
}

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

/* ---- Phase 5 QoL: P10 – Queue-Einträge Transitions ---- */
#queue-section tbody tr,
#upgradequeue .queue-status-item,
#researchqueue .queue-status-item,
#attackqueue .queue-status-item {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* ---- Phase 5 QoL: P11 – Nav-Shortcut-Badges ---- */
.nav-kbd {
  float: right;
  font-size: 0.7em;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1px 5px;
  font-family: var(--font-mono);
  color: var(--text-muted);
  opacity: 0;
  transition: opacity 0.2s;
}

.sidebar-nav a:hover .nav-kbd,
.sidebar-nav a:focus .nav-kbd {
  opacity: 1;
}

/* ---- Phase 5 QoL: P12 – Market 'Besitzt'-Badge ---- */
.owned-badge {
  background: rgba(var(--success) / 0.15);
  color: rgb(var(--success));
  border: 1px solid rgba(var(--success) / 0.3);
  font-size: 0.7em;
  padding: 2px 6px;
  border-radius: 3px;
  display: inline-block;
  margin-bottom: 4px;
}

/* ---- Phase 5 QoL: M1 – Breadcrumbs ---- */
.breadcrumbs {
  padding: 6px 20px;
  font-size: 0.82em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}

.breadcrumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
  padding: 0;
  align-items: center;
}

.breadcrumbs li {
  display: flex;
  align-items: center;
  gap: 4px;
}

.breadcrumbs a {
  color: var(--text-muted);
  text-decoration: none;
}

.breadcrumbs a:hover {
  color: rgb(var(--accent));
}

.breadcrumbs [aria-current="page"] {
  color: var(--text);
}

/* ---- Phase 5 QoL: M8 – Zeichen-Counter ---- */
.char-counter {
  font-size: 0.8em;
  color: var(--text-muted);
  text-align: right;
  margin-top: 4px;
}

textarea.over-limit {
  border-color: rgb(var(--danger));
}

/* ---- Phase 5 QoL: P1 – Progress-% Label ---- */
.progress-bar.show-pct {
  position: relative;
  height: 10px;
}

.progress-bar.show-pct::after {
  content: attr(data-pct);
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 8px;
  line-height: 1;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.9), 0 0 6px rgba(0, 240, 255, 0.5);
  font-family: var(--font-mono);
  pointer-events: none;
  z-index: 2;
}

/* ---- Phase 5 QoL: P9 – Screenreader-Only Klasse ---- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* =========================================================================
   Mobile UI Fix 1: Responsive Tabellen-Wrapper
   Alias für .table-scroll – vereinheitlicht Legacy-Templates
   ========================================================================= */
.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-responsive table {
  width: 100%;
  border-collapse: collapse;
}

/* =========================================================================
   Mobile UI Fixes 2, 3 + 4: iOS Auto-Zoom, Touch-Targets & Dropdown
   ========================================================================= */
@media (max-width: 768px) {
  /* Fix 3: Server-Switcher-Dropdown – responsive Breite auf Mobilgeräten */
  .server-switcher-dropdown {
    width: min(320px, calc(100vw - 32px));
    max-width: calc(100vw - 32px);
  }

  /* Fix 2: iOS Safari erzwingt Seiten-Zoom bei Inputs < 16px – verhindert das */
  input,
  select,
  textarea {
    font-size: 16px !important;
  }

  /* Fix 4: Touch-Targets gemäß Apple HIG / WCAG 2.5.5 (≥ 44×44 px) */
  .btn,
  button,
  input[type="submit"],
  input[type="button"],
  .pagination a {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Fix 5: Mindestschriftgröße 14px für lesbare Inhalte auf mobilen Geräten.
     Kleine Werte (9–13px) sind auf hochauflösenden Handy-Displays kaum lesbar.
     Dekorative Elemente (Pfeile, Badges) erhalten mind. 12px. */
  th,
  .message-preview,
  .message-time,
  .target-card-mini .target-ip,
  .target-card-mini .target-name,
  .hint,
  .mobile-task-card .task-name,
  .mobile-task-card .task-timer,
  .affordable-hint,
  .unlock-hint,
  .task-timer,
  .btn-sm,
  .terminal-footer {
    font-size: 14px !important;
  }

  /* Kompakte Labels: mind. 12px (z.B. Badges, Gruppenüberschriften) */
  .nav-group-title,
  .server-status,
  .notification-badge,
  .kpi .label,
  .terminal-title,
  .badge,
  .mailbox-nav-item .badge,
  .server-option .server-ip,
  .server-option .server-name,
  .admin-table code,
  .mobile-menu-title,
  .server-label-badge,
  .mobile-menu-link .menu-label,
  .bottom-nav-icon .nav-badge {
    font-size: 12px !important;
  }
}

/* =========================================================================
   Mobile High: Neue Utility-Klassen (ersetzt Inline-Styles)
   ========================================================================= */

/* Formular-Container mit Maximalbreite */
.form-narrow {
  max-width: 600px;
  margin: 20px auto;
}

/* Seiten-Karte für Datencenter/Land-Auswahl */
.page-card {
  max-width: 1100px;
  margin: 20px auto;
  padding: 30px;
}

/* Terminal-Sidebar-Panel */
.terminal-sidebar-panel {
  height: 100%;
  margin-bottom: 0;
  padding: 20px;
}

/* Mailbox-Sidebar: Schreiben-Button */
.btn-compose {
  width: 100%;
  height: 48px;
  border-radius: 24px;
  box-shadow: 0 4px 12px rgba(var(--accent) / 0.2);
  font-size: 16px;
}

/* =========================================================================
   Mobile UI Fix: Datacenter/Country-Selection – Schriftgrößen
   Kleinere Font-Sizes für Labels, Badges und Info-Texte auf mobilen Geräten
   ========================================================================= */
@media (max-width: 768px) {
  .dc-stat-label { font-size: 12px; }
  .dc-stats      { font-size: 13px; }
  .dc-region-badge, .dc-badge { font-size: 12px; }
  .dc-info       { font-size: 14px; }
}

/* =========================================================================
   Mobile UI Fix H-3: upgrade-btn Touch-Target 44px
   ========================================================================= */
@media (max-width: 768px) {
  a.upgrade-btn, span.upgrade-btn {
    min-height: 44px !important;
    min-width: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 0 8px !important;
  }
}

/* =========================================================================
   Mobile UI Fix M-1: header-section Padding reduzieren
   ========================================================================= */
@media (max-width: 768px) {
  .header-section {
    padding: 20px 16px;
  }
}

/* =========================================================================
   Item-Card-Grid – Kachel-Layout für Upgrades & Forschung (Phase 5)
   ========================================================================= */

/* Container: responsives Grid */
.item-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 14px;
}

/* Einzelne Kachel */
.item-card {
  background: rgba(10, 16, 26, 0.82);
  border: 1px solid rgba(0, 240, 255, 0.14);
  border-radius: var(--radius-sm);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 8px 24px rgba(0, 0, 0, 0.5);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  min-width: 0;
}

.item-card:hover {
  border-color: rgba(0, 240, 255, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 12px 32px rgba(0, 0, 0, 0.7), var(--deck-glow-cyan);
  transform: translateY(-2px);
}

/* Linke Akzentlinie für startbare Items */
.item-card[data-affordable="true"] {
  border-left: 3px solid var(--neon-cyan);
  border-color: rgba(0, 240, 255, 0.28);
}

/* Gedämpft: nicht startbar */
.item-card[data-affordable="false"] {
  opacity: 0.65;
  border-color: rgba(255, 255, 255, 0.07);
  border-left: 3px solid rgba(255, 255, 255, 0.15);
}

/* Kopfzeile: Icon + Name + Level */
.item-card-header {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Icon-Container */
.item-card-icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 240, 255, 0.08);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(0, 240, 255, 0.25);
  box-shadow: inset 0 0 10px rgba(0, 240, 255, 0.08);
}

.item-card-icon img {
  width: 32px;
  height: 32px;
  filter: drop-shadow(0 0 4px rgba(0, 240, 255, 0.3));
}

.item-card-icon svg {
  width: 28px;
  height: 28px;
  stroke: var(--neon-cyan);
  filter: drop-shadow(0 0 4px rgba(0, 240, 255, 0.4));
}

/* Titel-Block */
.item-card-meta {
  flex: 1;
  min-width: 0;
}

.item-card-name {
  font-weight: 700;
  font-size: 1rem;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.3px;
}

.item-card-level {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
  margin-top: 3px;
}

/* Statistik-Zeilen */
.item-card-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 14px;
  font-size: 0.85rem;
  background: rgba(6, 11, 19, 0.6);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.item-card-stat {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
}

.item-card-stat-value {
  color: var(--text);
  font-weight: 600;
  font-family: var(--font-mono);
}

/* Kostenanzeige in glühendem Amber (Phase 5.2) */
.item-card-price {
  font-weight: 700;
  font-size: 0.95rem;
  font-family: var(--font-mono);
  color: var(--neon-amber, #ffb800) !important;
  text-shadow: 0 0 10px rgba(255, 184, 0, 0.5);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Unlock-Hinweis */
.item-card-unlock {
  font-size: 0.8rem;
  color: var(--neon-amber, #ffb800);
  background: rgba(255, 184, 0, 0.08);
  border: 1px solid rgba(255, 184, 0, 0.2);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  line-height: 1.35;
}

/* Footer: Badge + Button */
.item-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* Abhängigkeits-Badges (dep-badge) */
.dep-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 3px 9px;
  border-radius: var(--radius-xs, 4px);
  border: 1px solid transparent;
  white-space: nowrap;
}

.dep-badge.dep-ok {
  background: rgba(0, 255, 157, 0.08);
  border-color: rgba(0, 255, 157, 0.35);
  color: var(--neon-emerald);
  box-shadow: 0 0 8px rgba(0, 255, 157, 0.15);
}

.dep-badge.dep-missing {
  background: rgba(255, 51, 102, 0.08);
  border-color: rgba(255, 51, 102, 0.35);
  color: var(--neon-crimson);
  box-shadow: 0 0 8px rgba(255, 51, 102, 0.15);
}

/* Leer-Nachricht im Grid */
.item-card-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 36px 20px;
  color: var(--text-muted);
  font-style: italic;
  background: rgba(9, 15, 25, 0.5);
  border: 1px dashed rgba(0, 240, 255, 0.2);
  border-radius: var(--radius-sm);
}

/* --- Cyber Filter & Search Bar (Phase 5.2) --- */
.cyber-panel-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.cyber-search-box {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.cyber-search-input {
  background: rgba(6, 11, 19, 0.8);
  border: 1px solid rgba(0, 240, 255, 0.2);
  border-radius: 4px;
  padding: 6px 30px 6px 12px;
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  outline: none;
  transition: all 0.2s ease;
  min-width: 170px;
}

.cyber-search-input:focus {
  border-color: var(--neon-cyan);
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.3);
  background: rgba(10, 18, 30, 0.95);
}

.cyber-search-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.search-clear-btn {
  position: absolute;
  right: 8px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 14px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.search-clear-btn:hover {
  color: var(--neon-crimson);
}

.cyber-checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
}

.cyber-checkbox-label input[type="checkbox"] {
  accent-color: var(--neon-cyan);
  cursor: pointer;
}

.cyber-checkbox-label:hover {
  color: #fff;
}

/* --- Cyberdeck Select Fallback & Custom Component --- */
.cyber-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: rgba(6, 11, 19, 0.85);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%2300f0ff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  border: 1px solid rgba(0, 240, 255, 0.28);
  border-radius: var(--radius-sm, 4px);
  color: var(--text, #e6f1ff);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  padding: 6px 30px 6px 12px;
  cursor: pointer;
  outline: none;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  min-height: 34px;
  box-sizing: border-box;
}

.cyber-select:hover,
.cyber-select:focus {
  border-color: var(--neon-cyan);
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.3);
  background-color: rgba(10, 18, 30, 0.95);
}

.cyber-select option {
  background-color: #070c14;
  color: #e6f1ff;
  font-family: var(--font-mono);
}

/* Versteckt natives Select nach JS-Enhancement barrierefrei */
.cyber-select-native {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  clip: rect(0, 0, 0, 0) !important;
  overflow: hidden !important;
}

.cyber-select-wrapper {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  font-family: var(--font-mono);
}

.cyber-select-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(6, 11, 19, 0.85);
  border: 1px solid rgba(0, 240, 255, 0.28);
  border-radius: var(--radius-sm, 4px);
  color: var(--text, #e6f1ff);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  padding: 6px 12px 6px 14px;
  min-height: 34px;
  cursor: pointer;
  user-select: none;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-sizing: border-box;
  text-align: left;
  width: 100%;
}

.cyber-select-trigger:hover {
  border-color: var(--neon-cyan);
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.25);
  background: rgba(10, 18, 30, 0.95);
}

.cyber-select-wrapper.is-open .cyber-select-trigger,
.cyber-select-trigger:focus-visible {
  border-color: var(--neon-cyan);
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.4);
  background: rgba(10, 18, 30, 0.98);
  outline: none;
}

.cyber-select-label {
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.3px;
}

.cyber-select-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: var(--neon-cyan);
  opacity: 0.8;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
}

.cyber-select-arrow svg {
  display: block;
}

.cyber-select-wrapper.is-open .cyber-select-arrow {
  transform: rotate(180deg);
  opacity: 1;
}

.cyber-select-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 100%;
  width: max-content;
  max-width: min(340px, calc(100vw - 24px));
  max-height: 280px;
  overflow-y: auto;
  background: rgba(7, 12, 20, 0.96);
  border: 1px solid rgba(0, 240, 255, 0.35);
  border-radius: var(--radius-sm, 6px);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.85), 0 0 16px rgba(0, 240, 255, 0.25);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 4px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-sizing: border-box;
  animation: cyberSelectOpen 0.15s cubic-bezier(0.2, 0, 0.2, 1);
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 240, 255, 0.3) transparent;
}

.cyber-select-menu[hidden] {
  display: none !important;
}

.cyber-select-menu::-webkit-scrollbar {
  width: 4px;
}

.cyber-select-menu::-webkit-scrollbar-thumb {
  background: rgba(0, 240, 255, 0.3);
  border-radius: 2px;
}

@keyframes cyberSelectOpen {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.cyber-select-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--text, #e6f1ff);
  border-radius: 4px;
  border-left: 2px solid transparent;
  cursor: pointer;
  user-select: none;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
}

.cyber-select-option:hover,
.cyber-select-option.is-highlighted {
  background: rgba(0, 240, 255, 0.1);
  border-left-color: var(--neon-cyan);
  color: #ffffff;
  padding-left: 14px;
}

.cyber-select-option.is-active {
  background: rgba(0, 240, 255, 0.16);
  border-left-color: var(--neon-cyan);
  color: var(--neon-cyan);
  font-weight: 700;
}

.cyber-select-option.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* Gefährliche Optionen (z.B. Löschen) */
.cyber-select-option.is-danger:hover,
.cyber-select-option.is-danger.is-highlighted {
  background: rgba(255, 51, 102, 0.15);
  border-left-color: var(--neon-crimson);
  color: #ff6685;
}

.cyber-select-option.is-danger.is-active {
  background: rgba(255, 51, 102, 0.2);
  border-left-color: var(--neon-crimson);
  color: var(--neon-crimson);
}

.cyber-opt-text {
  flex: 1 1 auto;
}

.cyber-opt-check {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--neon-cyan);
  opacity: 0;
  transition: opacity 0.15s ease;
}

.cyber-select-option.is-active .cyber-opt-check {
  opacity: 1;
}

.cyber-select-option.is-danger.is-active .cyber-opt-check {
  color: var(--neon-crimson);
}

/* Mobile: 1 Spalte ab 400px */
@media (max-width: 480px) {
  .item-card-grid {
    grid-template-columns: 1fr;
  }

  /* Touch-Target sicherstellen */
  .item-card-footer .btn {
    min-height: 44px;
    padding: 0 14px;
  }
}

/* Server-Liste: 2 Spalten auf Desktop, 1 Spalte auf Mobile */
.item-card-grid--servers {
  grid-template-columns: repeat(2, 1fr);
  align-items: start; /* Kacheln nicht auf Zeilenhöhe strecken */
}

@media (max-width: 640px) {
  .item-card-grid--servers {
    grid-template-columns: 1fr;
  }
}

/* Server-Liste: Exakte 3-Spalten-Ausrichtung für Statistiken */
.item-card-grid--servers .item-card-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px 12px;
  align-items: center;
}

@media (max-width: 480px) {
  .item-card-grid--servers .item-card-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Aktiver Server (Hervorhebung) */
.item-card.is-active {
  border-color: var(--neon-cyan, #00f0ff);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 0 20px rgba(0, 240, 255, 0.18), var(--deck-glow-cyan);
}

/* Server-Kachel Footer & Quick-Action-Buttons */
.server-action-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cyber-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: var(--radius-xs, 4px);
  background: rgba(0, 240, 255, 0.06);
  border: 1px solid rgba(0, 240, 255, 0.25);
  color: var(--neon-cyan, #00f0ff);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  box-sizing: border-box;
  flex-shrink: 0;
}

.cyber-btn-icon:hover {
  background: rgba(0, 240, 255, 0.2);
  border-color: var(--neon-cyan, #00f0ff);
  color: #ffffff;
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.4);
  transform: translateY(-1px);
}

.cyber-btn-icon:active {
  transform: translateY(0);
}

.cyber-btn-icon svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  filter: drop-shadow(0 0 3px rgba(0, 240, 255, 0.45));
  transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1), filter 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  display: block;
}

.cyber-btn-icon:hover svg {
  filter: drop-shadow(0 0 6px var(--neon-cyan, #00f0ff));
  transform: scale(1.1);
}

.cyber-btn-icon.copy-success {
  background: rgba(0, 255, 157, 0.15);
  border-color: var(--neon-emerald, #00ff9d);
  color: var(--neon-emerald, #00ff9d);
  box-shadow: 0 0 14px rgba(0, 255, 157, 0.35);
}

.cyber-btn-icon.copy-success svg {
  stroke: var(--neon-emerald, #00ff9d);
  filter: drop-shadow(0 0 6px var(--neon-emerald, #00ff9d));
}

/* ---- Kachel: Status-Varianten (Angriff-Queue) ---- */
.item-card[data-status="running"] {
  border-left: 3px solid rgb(var(--warning));
}

.item-card[data-status="finished"] {
  border-left: 3px solid rgb(var(--success));
}

/* ---- Kachel: Aktueller Eintrag hervorheben (Ranking) ---- */
.item-card.item-card-highlight {
  border-color: rgb(var(--accent));
  background: rgba(var(--accent) / 0.05);
  font-weight: bold;
}

/* ---- Ranking: Rang-Zahl im Icon-Bereich ---- */
.rank-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}

.rank-badge.rank-badge-top {
  color: rgb(var(--accent));
  background: rgba(var(--accent) / 0.1);
  border-color: rgba(var(--accent) / 0.4);
}

/* ---- Ranking-Grid: kompaktere Kacheln ---- */
.item-card-grid.item-card-grid-ranking {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}


/* ---- Pull-to-Refresh ---- */
[data-pull-refresh] {
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  position: relative;
}

.pull-refresh-spinner {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 16px;
  background: rgb(var(--accent));
  color: #fff;
  border-radius: var(--radius-sm, 4px);
  z-index: 1000;
  font-size: 0.9em;
  white-space: nowrap;
  animation: ptr-spin 1s linear infinite;
}

@keyframes ptr-spin {
  from { transform: translateX(-50%) rotate(0deg); }
  to   { transform: translateX(-50%) rotate(360deg); }
}

/* ============================================================
   Notification Bell & Panel
   ============================================================ */

.bell-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.bell-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  padding: 0;
}

.bell-btn:hover,
.bell-btn[aria-expanded="true"] {
  background: rgba(var(--accent) / 0.12);
  color: rgb(var(--accent));
  border-color: rgba(var(--accent) / 0.4);
}

.bell-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.bell-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  background: rgb(var(--danger));
  color: #fff;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  pointer-events: none;
  animation: bell-badge-pop 0.25s ease;
}

@keyframes bell-badge-pop {
  0%   { transform: scale(0.5); opacity: 0; }
  60%  { transform: scale(1.25); }
  100% { transform: scale(1);   opacity: 1; }
}

/* --- Panel --- */

.notification-panel[hidden] {
  display: none !important;
}

.notification-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 320px;
  max-width: calc(100vw - 8px);
  max-height: 420px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 32px rgba(0,0,0,0.35);
  z-index: 900;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.notification-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.notification-panel-title {
  font-weight: 700;
  font-size: 14px;
  color: var(--text);
}

.notification-mark-all {
  background: transparent;
  border: none;
  color: rgb(var(--accent));
  font-size: 12px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  min-height: 32px;
  transition: background 0.15s;
}

.notification-mark-all:hover {
  background: rgba(var(--accent) / 0.1);
}

.notification-panel-body {
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
  padding: 4px 0;
}

.notification-empty {
  padding: 24px 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  margin: 0;
}

/* --- Einzelne Einträge --- */

.notif-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 16px;
  cursor: pointer;
  transition: background 0.1s;
  min-height: 44px;
}

.notif-item:hover {
  background: rgba(var(--accent) / 0.06);
}

.notif-unread {
  background: rgba(var(--accent) / 0.08);
}

.notif-unread::before {
  content: '';
  display: block;
  position: absolute;
  left: 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgb(var(--accent));
  margin-top: 4px;
}

.notif-item {
  position: relative;
}

.notif-icon {
  font-size: 18px;
  flex-shrink: 0;
  line-height: 1.4;
}

.notif-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}

.notif-title {
  font-size: 13px;
  color: var(--text);
  white-space: normal;
  word-break: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
}

.notif-time {
  font-size: 11px;
  color: var(--text-muted);
}

/* --- Mobile: Panel von unten --- */
@media (max-width: 600px) {
  .bell-wrapper {
    position: static;
  }

  .notification-panel {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
    width: 100%;
    max-height: 65vh;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    border-bottom: none;
  }

  .notification-panel-body {
    padding: 4px 8px;
  }

  .notif-item {
    padding: 10px 12px;
    max-width: 100%;
    box-sizing: border-box;
  }

  .server-switcher-toggle .server-name {
    max-width: 90px;
  }

  .page-title {
    font-size: 15px;
  }
}

/* Universeller Tabellen-Overflow-Schutz für Mobile */
@media (max-width: 768px) {
  .content table:not(.mobile-table),
  .card table:not(.mobile-table) {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Mobile-Optimierung für Mail-Ansicht */
@media (max-width: 768px) {
  /* mailbox-main: vertikal scrollbar, horizontal kein Überlauf */
  .mailbox-main {
    overflow-y: auto;
    overflow-x: hidden;
  }

  /* Beim Nachrichten-Lesen: Sidebar verstecken (nav-Links nicht nötig, Zurück-Button oben vorhanden) */
  #message-read .mailbox-sidebar {
    display: none;
  }

  /* Kein Flex-Gap nötig wenn Sidebar weg */
  #message-read .mailbox-container {
    display: block;
  }

  /* Padding im Read-Container reduzieren */
  #message-read {
    padding: 12px 8px !important;
  }

  .message-view-header {
    padding: 12px !important;
  }

  .message-view-subject {
    font-size: 16px !important;
    word-break: break-word;
    word-wrap: break-word;
    hyphens: auto;
  }

  .message-view-meta {
    gap: 8px !important;
  }

  .message-view-body {
    font-size: 15px !important;
    line-height: 1.6 !important;
    padding: 12px !important;
    overflow-x: hidden !important;
  }

  .message-view-body img {
    max-width: 100% !important;
    height: auto !important;
  }

  .message-view-body pre {
    white-space: pre-wrap !important;
    word-wrap: break-word !important;
    font-size: 13px !important;
  }

  .message-view-body code {
    word-break: break-word !important;
  }

  .message-view-footer {
    padding: 12px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  .message-view-footer .btn {
    width: 100% !important;
    margin-bottom: 0 !important;
    justify-content: center !important;
  }
}

/* ==========================================================================
   Tactical Cyberdeck UI Components (Zero Tables Architecture)
   ========================================================================== */

/* --- Cyber Queue Rows / Operations Cards (Phase 5.1) --- */
.cyber-queue-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cyber-queue-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 20px;
  border-radius: var(--radius-sm);
  background: rgba(9, 15, 25, 0.85);
  border: 1px solid rgba(0, 240, 255, 0.18);
  border-left: 3px solid var(--neon-cyan);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 4px 20px rgba(0, 0, 0, 0.5);
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  flex-wrap: nowrap;
}

.cyber-queue-row:hover {
  border-color: rgba(0, 240, 255, 0.45);
  border-left-color: var(--neon-cyan);
  background: rgba(14, 23, 38, 0.92);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 8px 28px rgba(0, 0, 0, 0.6), var(--deck-glow-cyan);
  transform: translateY(-2px);
}

.cyber-queue-info {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 0 0 310px;
  max-width: 310px;
  min-width: 0;
}

.cyber-queue-info > div {
  min-width: 0;
  overflow: hidden;
}

.cyber-queue-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.12), rgba(0, 255, 157, 0.05));
  border: 1px solid rgba(0, 240, 255, 0.35);
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--neon-cyan);
}

.cyber-queue-icon img {
  width: 28px;
  height: 28px;
  filter: drop-shadow(0 0 4px rgba(0, 240, 255, 0.4));
}

.cyber-queue-icon svg {
  width: 24px;
  height: 24px;
  stroke: var(--neon-cyan);
  filter: drop-shadow(0 0 4px rgba(0, 240, 255, 0.5));
}

.cyber-queue-title {
  font-weight: 700;
  font-size: 0.95rem;
  color: #ffffff;
  letter-spacing: 0.3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cyber-queue-level {
  margin-top: 3px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.cyber-queue-level .cyber-badge {
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: 0.5px;
  box-shadow: 0 0 8px rgba(0, 240, 255, 0.25);
  font-size: 0.72rem;
  padding: 2px 7px;
}

/* Die Textspalte muss schrumpfen können, bevor ein langer Stufenname überläuft. */
.upgradelist-deck .cyber-queue-info > div:not(.cyber-queue-icon) {
  flex: 1;
}

.upgradelist-deck .cyber-queue-level .cyber-badge {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.upgradelist-deck .cyber-queue-progress-box .progress-bar {
  min-width: 0;
}

.cyber-queue-progress-box {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.cyber-queue-progress-box .progress-bar {
  flex: 1 1 auto;
  margin: 0;
  min-width: 80px;
  height: 10px;
}

.cyber-queue-eta-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--text-muted);
  flex-shrink: 0;
  padding: 2px 7px;
  background: rgba(0, 240, 255, 0.08);
  border: 1px solid rgba(0, 240, 255, 0.22);
  border-radius: 3px;
  line-height: 1.2;
}

.cyber-queue-time-val {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--text-muted);
  flex-shrink: 0;
  min-width: 105px;
  text-align: right;
  white-space: nowrap;
}

.cyber-queue-time-val strong,
.cyber-queue-time strong {
  color: var(--neon-cyan);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
}

.cyber-queue-time {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.cyber-queue-actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

@media (max-width: 640px) {
  .cyber-queue-row {
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 14px;
  }

  .cyber-queue-info {
    flex: 1 1 auto;
    max-width: calc(100% - 110px);
  }

  .cyber-queue-actions {
    flex-shrink: 0;
  }

  .cyber-queue-progress-box {
    flex: 1 1 100%;
    max-width: 100%;
    order: 3;
    gap: 10px;
  }
}

/* --- Tech Chip Grid (Completed Modules - Phase 5.3) --- */
.tech-chip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.tech-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: rgba(9, 15, 25, 0.75);
  border: 1px solid rgba(0, 255, 157, 0.18);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 4px 16px rgba(0, 0, 0, 0.4);
  transition: all 0.2s ease;
}

.tech-chip:hover {
  border-color: rgba(0, 255, 157, 0.5);
  background: rgba(0, 255, 157, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 6px 20px rgba(0, 0, 0, 0.5), 0 0 12px rgba(0, 255, 157, 0.25);
  transform: translateY(-2px);
}

.tech-chip-icon {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  background: rgba(0, 255, 157, 0.08);
  border: 1px solid rgba(0, 255, 157, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--neon-emerald);
}

.tech-chip-icon img {
  width: 22px;
  height: 22px;
  filter: drop-shadow(0 0 3px rgba(0, 255, 157, 0.4));
}

.tech-chip-icon svg {
  width: 20px;
  height: 20px;
  stroke: var(--neon-emerald);
  filter: drop-shadow(0 0 3px rgba(0, 255, 157, 0.4));
}

.tech-chip-info {
  flex: 1;
  min-width: 0;
}

.tech-chip-name {
  font-weight: 600;
  font-size: 0.88rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #fff;
  letter-spacing: 0.2px;
}

.tech-chip-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 3px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-muted);
}

.tech-chip-meta .cyber-badge-green,
.tech-chip-meta .cyber-badge-emerald {
  font-size: 0.68rem;
  padding: 1px 6px;
  box-shadow: 0 0 8px rgba(0, 255, 157, 0.4);
}

/* --- Cyber Comms / Mail Stream --- */
.cyber-mail-stream {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cyber-mail-card {
  display: grid;
  grid-template-columns: 24px 8px 140px 1fr 140px;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  background: rgba(12, 19, 31, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: all 0.18s ease;
  position: relative;
}

.cyber-mail-card:hover {
  background: rgba(16, 26, 42, 0.8);
  border-color: rgba(0, 240, 255, 0.2);
  transform: translateX(2px);
}

.cyber-mail-card.is-unread {
  background: rgba(0, 240, 255, 0.06);
  border-color: rgba(0, 240, 255, 0.25);
  box-shadow: inset 2px 0 0 var(--neon-cyan);
}

.cyber-mail-card.is-unread .mail-subject {
  color: #ffffff;
  font-weight: 700;
}

.mail-indicator-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: transparent;
}

.cyber-mail-card.is-unread .mail-indicator-dot {
  background: var(--neon-cyan);
  box-shadow: 0 0 8px var(--neon-cyan);
}

.cyber-mail-card.is-unread .mail-indicator-dot.system-dot {
  background: var(--neon-purple);
  box-shadow: 0 0 8px var(--neon-purple);
}

.mail-sender-link {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.cyber-mail-card.is-unread .mail-sender-link {
  color: var(--neon-cyan);
}

.mail-sender-link:hover {
  text-decoration: underline;
}

.mail-main {
  min-width: 0;
}

.mail-subject-link {
  text-decoration: none;
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mail-subject {
  font-size: 0.9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mail-preview-snippet {
  font-size: 0.8rem;
  color: var(--text-muted);
  opacity: 0.7;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mail-timestamp {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-muted);
  text-align: right;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .cyber-mail-card {
    grid-template-columns: 24px 8px 1fr auto;
    gap: 10px;
    padding: 10px 12px;
  }
  .mail-sender {
    grid-column: 3;
    font-size: 0.8rem;
  }
  .mail-main {
    grid-column: 3 / -1;
    margin-top: 2px;
  }
  .mail-timestamp {
    grid-column: 4;
    font-size: 0.7rem;
  }
}

/* --- Dashboard Cyberdeck Matrix (Phase 4 Transformation) --- */
.dashboard-deck {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 30px;
  width: 100%;
}

/* 1. Header Row */
.dashboard-header-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 20px;
  align-items: stretch;
}

@media (max-width: 960px) {
  .dashboard-header-row {
    grid-template-columns: 1fr;
  }
}

.dashboard-welcome-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.dashboard-welcome-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 8px;
}

.welcome-avatar-icon {
  margin-bottom: 0;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: rgba(0, 240, 255, 0.1);
  border: 1px solid rgba(0, 240, 255, 0.25);
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.welcome-user-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.welcome-user-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.highlight-cyan {
  color: var(--neon-cyan);
  text-shadow: 0 0 10px rgba(0, 240, 255, 0.4);
}

.welcome-title-badge {
  vertical-align: middle;
  margin-left: 6px;
  font-size: 0.72rem;
}

.welcome-server-tag {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

@media (max-width: 768px) {
  .welcome-user-title {
    white-space: normal !important;
    font-size: 1.15rem !important;
    line-height: 1.35 !important;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
  }
  .welcome-title-badge {
    margin-left: 0 !important;
  }
  .welcome-server-tag {
    flex-wrap: wrap !important;
    gap: 4px 8px !important;
  }
}

.welcome-spec-badge {
  font-size: 0.65rem;
  padding: 2px 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.server-ip-mono {
  opacity: 0.65;
  font-size: 0.75rem;
}

.welcome-motd {
  margin: 8px 0 0 0;
  line-height: 1.5;
  color: var(--text-muted);
  font-size: 0.88rem;
}

.welcome-alert-pill {
  margin-top: 12px;
}

.welcome-alert-pill a {
  text-decoration: none;
  padding: 4px 10px;
}

/* KPI Card */
.dashboard-kpi-card {
  display: flex;
  flex-direction: column;
}

.kpi-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.kpi-card-title {
  margin: 0;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--neon-cyan);
  font-weight: 700;
}

.kpi-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--neon-emerald);
  box-shadow: 0 0 8px var(--neon-emerald);
  animation: pulseNeonPip 2s infinite ease-in-out;
}

.dashboard-kpi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  height: 100%;
}

@media (max-width: 540px) {
  .dashboard-kpi-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .dashboard-kpi-item {
    padding: 10px 14px;
  }
  .dashboard-kpi-item .kpi-value {
    font-size: 1.15rem;
  }
}

.dashboard-kpi-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: rgba(12, 19, 31, 0.65);
  border: 1px solid rgba(0, 240, 255, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.dashboard-kpi-item .kpi-label {
  font-size: 0.75rem;
  font-family: var(--font-mono);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.dashboard-kpi-item .kpi-value {
  font-size: 1.3rem;
  font-weight: 700;
  font-family: var(--font-mono);
  letter-spacing: -0.5px;
}

.kpi-val-cc {
  color: var(--neon-amber);
  text-shadow: 0 0 10px rgba(255, 184, 0, 0.35);
}

.kpi-val-pts {
  color: var(--neon-cyan);
  text-shadow: 0 0 10px rgba(0, 240, 255, 0.35);
}

/* 2. Alert Strip & Threat Banners */
.dashboard-alert-strip {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.live-threat-banner {
  border-radius: var(--radius-md);
  padding: 16px 20px;
  margin-bottom: 0;
  position: relative;
  overflow: hidden;
}

@keyframes alertBannerPulse {
  0%, 100% {
    box-shadow: 0 0 16px rgba(255, 51, 102, 0.15), inset 0 0 12px rgba(255, 51, 102, 0.05);
  }
  50% {
    box-shadow: 0 0 28px rgba(255, 51, 102, 0.35), inset 0 0 20px rgba(255, 51, 102, 0.15);
  }
}

.threat-warning {
  background: linear-gradient(135deg, rgba(255, 184, 0, 0.12) 0%, rgba(9, 15, 25, 0.95) 100%);
  border: 1px solid rgba(255, 184, 0, 0.5);
  box-shadow: 0 0 16px rgba(255, 184, 0, 0.15);
}

.threat-warning .threat-badge {
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid var(--neon-amber);
  color: var(--neon-amber);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
}

.threat-vulnerable {
  background: linear-gradient(135deg, rgba(255, 51, 102, 0.15) 0%, rgba(9, 15, 25, 0.95) 100%);
  border: 1px solid rgba(255, 51, 102, 0.6);
  animation: alertBannerPulse 2.5s infinite ease-in-out;
}

.threat-vulnerable .threat-badge {
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid var(--neon-crimson);
  color: var(--neon-crimson);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
}

.threat-protected {
  background: linear-gradient(135deg, rgba(0, 255, 157, 0.1) 0%, rgba(9, 15, 25, 0.95) 100%);
  border: 1px solid rgba(0, 255, 157, 0.45);
  box-shadow: 0 0 16px rgba(0, 255, 157, 0.12);
}

.threat-protected .threat-badge {
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid var(--neon-emerald);
  color: var(--neon-emerald);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
}

.threat-sale {
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.1) 0%, rgba(9, 15, 25, 0.95) 100%);
  border: 1px solid rgba(0, 240, 255, 0.45);
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.15);
}

.threat-sale .threat-badge {
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid var(--neon-cyan);
  color: var(--neon-cyan);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
}

.threat-banner-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.threat-banner-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.threat-icon {
  font-size: 28px;
  line-height: 1;
  flex-shrink: 0;
}

.threat-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.threat-title {
  margin: 0;
  font-size: 1.05rem;
  letter-spacing: 0.4px;
  color: #fff;
}

.threat-desc {
  margin: 4px 0 0 0;
  font-size: 0.85rem;
}

.threat-requirements {
  margin-top: 6px;
  font-size: 0.85rem;
  color: var(--neon-crimson);
  font-weight: bold;
}

.req-item {
  margin-right: 10px;
}

.threat-protected-msg {
  margin-top: 6px;
  font-size: 0.85rem;
  color: var(--neon-emerald);
  font-weight: bold;
}

.threat-banner-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.threat-expiry {
  font-size: 0.82rem;
  font-family: var(--font-mono);
  opacity: 0.85;
}

/* 3. Streak & Milestones Rows */
.dashboard-streak-row {
  width: 100%;
}

.dashboard-milestones-row {
  width: 100%;
}

.login-streak-card {
  display: flex;
  flex-direction: column;
}

.streak-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}

.streak-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.streak-flame-icon {
  font-size: 24px;
  filter: drop-shadow(0 0 8px rgba(255, 184, 0, 0.6));
}

.streak-title {
  margin: 0;
  font-size: 1.1rem;
  letter-spacing: 0.4px;
}

.streak-claim-banner {
  margin-bottom: 14px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: rgba(0, 255, 157, 0.1);
  border: 1px solid rgba(0, 255, 157, 0.35);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.88rem;
}

.streak-claim-icon {
  font-size: 20px;
}

.streak-booster-text {
  color: var(--neon-emerald);
  font-weight: bold;
}

.streak-days-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}

@media (max-width: 768px) {
  .streak-days-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 8px;
    gap: 8px;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }
  .streak-day-chip {
    flex: 0 0 88px;
    min-width: 88px;
  }
}

.streak-day-chip {
  background: rgba(12, 19, 31, 0.6);
  border: 1px solid rgba(0, 240, 255, 0.1);
  border-radius: 8px;
  padding: 10px 6px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 92px;
  min-width: 80px;
  scroll-snap-align: start;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.streak-day-chip:hover {
  border-color: rgba(0, 240, 255, 0.3);
  transform: translateY(-2px);
}

.streak-day-chip.streak-claimed {
  background: rgba(0, 255, 157, 0.08);
  border-color: rgba(0, 255, 157, 0.35);
  box-shadow: 0 0 10px rgba(0, 255, 157, 0.1);
}

.streak-day-chip.streak-current {
  background: linear-gradient(135deg, rgba(255, 184, 0, 0.14) 0%, rgba(12, 19, 31, 0.85) 100%);
  border-color: rgba(255, 184, 0, 0.6);
  box-shadow: 0 0 14px rgba(255, 184, 0, 0.25);
}

.streak-day-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
  font-family: var(--font-mono);
}

.streak-day-val {
  font-size: 0.95rem;
  font-weight: 700;
  font-family: var(--font-mono);
  color: #ffffff;
}

.streak-claimed .streak-day-val {
  color: var(--neon-emerald);
}

.streak-day-bonus {
  font-size: 0.68rem;
  color: var(--neon-amber);
  margin-top: 4px;
  font-weight: 700;
  line-height: 1.2;
}

.streak-chip-status {
  margin-top: 8px;
}

.status-claimed {
  font-size: 0.7rem;
  color: var(--neon-emerald);
  font-weight: bold;
}

.status-current {
  font-size: 0.7rem;
  color: var(--neon-amber);
  font-weight: bold;
}

.status-upcoming {
  font-size: 0.7rem;
  opacity: 0.4;
}

/* Achievement Widget */
.achievement-summary-widget {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.achievement-widget-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}

.achievement-widget-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.achievement-icon {
  margin-bottom: 0;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(0, 240, 255, 0.1);
  border: 1px solid rgba(0, 240, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.achievement-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.achievement-title {
  margin: 0;
  font-size: 1.05rem;
}

.ach-badge-pulse {
  animation: hudPulseAmber 2s infinite ease-in-out;
}

.achievement-subtext {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: 2px;
}

.achievement-widget-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.achievement-progress-bar {
  width: 140px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 9999px;
  height: 8px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.achievement-progress-fill {
  background: linear-gradient(90deg, var(--neon-cyan), var(--neon-emerald));
  height: 100%;
  border-radius: 9999px;
  box-shadow: 0 0 8px var(--neon-cyan);
}

.ach-btn-pulse {
  animation: hudPulseAmber 2s infinite ease-in-out;
}

/* 4. Operations & Queues Row */
.dashboard-operations-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
  align-items: stretch;
}

@media (max-width: 1024px) {
  .dashboard-operations-row {
    grid-template-columns: 1fr;
  }
}

.dashboard-queues-card {
  display: flex;
  flex-direction: column;
}

.queues-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(0, 240, 255, 0.12);
  padding-bottom: 10px;
}

.queue-header-icon {
  margin-bottom: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(0, 240, 255, 0.1);
  border: 1px solid rgba(0, 240, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.queues-title {
  margin: 0;
  font-size: 1.1rem;
}

.dashboard-cluster-kollektiv-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.cluster-card-header,
.kollektiv-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(0, 240, 255, 0.12);
  padding-bottom: 8px;
}

.cluster-header-icon,
.kollektiv-header-icon {
  margin-bottom: 0;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(0, 240, 255, 0.1);
  border: 1px solid rgba(0, 240, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cluster-title,
.kollektiv-title {
  margin: 0;
  font-size: 1.05rem;
}

.kollektiv-summary-box {
  background: rgba(12, 19, 31, 0.6);
  border: 1px solid rgba(0, 240, 255, 0.1);
  border-radius: 8px;
  padding: 12px 14px;
}

.kollektiv-name-row {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.kollektiv-link {
  color: var(--neon-cyan);
  text-decoration: none;
  text-shadow: 0 0 8px rgba(0, 240, 255, 0.3);
}

.kollektiv-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.85rem;
}

.kollektiv-empty-text {
  line-height: 1.5;
  font-size: 0.88rem;
}

/* 5. Server Hardware Matrix Row */
.dashboard-matrix-row {
  width: 100%;
}

.dashboard-sections-grid {
  display: grid;
  /* Leere Kategorien lassen bestehende Kacheln nicht auf volle Breite wachsen. */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr));
  gap: 20px;
  align-items: start;
}

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

.server-section-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
}

.server-section-card .item-info {
  flex-wrap: wrap;
}

.server-section-card .item-name {
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

.server-section-card .item-level {
  min-width: 0;
  max-width: 100%;
  white-space: normal !important;
  overflow-wrap: anywhere;
}

.dashboard-list-item .item-max-badge.item-locked-badge {
  color: var(--warning, #ffc857);
  cursor: help;
}

.dashboard-list-item .item-locked-badge:focus-visible {
  outline: 2px solid var(--primary, #00f0ff);
  outline-offset: 3px;
}

.server-section-card .item-action {
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.section-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(0, 240, 255, 0.12);
  padding-bottom: 10px;
}

.section-icon {
  margin-bottom: 0;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(0, 240, 255, 0.1);
  border: 1px solid rgba(0, 240, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.section-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
}

.dashboard-list-item .item-max-badge {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

/* ==========================================================================
   Phase 6: Dynamik, Haptik, View Transitions & Micro-Interactions
   ========================================================================== */

/* --- 6.1 Haptisches Klick-Feedback (Tactile Haptics) --- */
/* Schnelle, federnde Transition für alle interaktiven Steuerelemente */
.cyber-btn,
.btn,
.upgrade-btn,
.cyber-upgrade-btn,
.topbar-search-bar,
.hud-chip,
.topbar-server-pill,
.crypto-ticker-chip,
.topbar-queue-item,
.action-pill,
.filter-chip,
.badge-action,
.tech-chip,
.search-clear-btn,
.sort-btn,
.tab-btn,
.btn-tab,
.item-card,
.cyber-card.clickable,
.search-result-item {
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.06s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.15s ease, border-color 0.15s ease;
}

/* Taktiles Einsinken für Buttons, Chips & Navigations-Pills */
.cyber-btn:not(:disabled):not(.disabled):active,
.btn:not(:disabled):not(.disabled):active,
.upgrade-btn:not(:disabled):not(.disabled):active,
.cyber-upgrade-btn:not(:disabled):not(.disabled):active,
.topbar-search-bar:active,
.hud-chip:active,
.topbar-server-pill:active,
.crypto-ticker-chip:active,
.topbar-queue-item:active,
.action-pill:active,
.filter-chip:active,
.badge-action:active,
.tech-chip:active,
.search-clear-btn:active,
.sort-btn:active,
.tab-btn:active,
.btn-tab:active,
.cmd-item:active,
.app-sidebar a:not(.active):active,
.bottom-nav a:not(.active):active,
.mobile-menu-grid a:not(.active):active,
.breadcrumbs a:active {
  transform: scale(0.97);
}

/* Dezentere Haptik für großflächige interaktive Karten */
.item-card:not(.disabled):active,
.cyber-card.clickable:active,
.server-section-card:active {
  transform: scale(0.985);
}

.cyber-card,
.item-card,
.cyber-queue-row,
.tech-chip,
.cyber-mail-card {
  will-change: transform, border-color;
}

/* CC-Puls bei Live-Guthabenaktualisierung (AJAX) */
.cc-value-pulse {
  animation: ccPulseGlow 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes ccPulseGlow {
  0% {
    transform: scale(1);
    color: var(--neon-cyan);
    text-shadow: 0 0 4px var(--neon-cyan);
  }
  30% {
    transform: scale(1.18);
    color: #ffffff;
    text-shadow: 0 0 16px var(--neon-cyan), 0 0 24px var(--neon-cyan);
  }
  100% {
    transform: scale(1);
    color: var(--neon-cyan);
    text-shadow: none;
  }
}

/* --- 6.3 Live-Zähler & Countdown-Glow (< 10 Sekunden) --- */
/* Pulsierendes Neon-Gold für ablaufende Timer */
.cd.cd-glow-gold,
.cd-glow-gold,
.countdown-critical,
.cd.countdown-critical,
[data-timer-end].countdown-critical {
  color: var(--neon-gold, #ffd700) !important;
  font-weight: 700;
  display: inline-block;
  animation: cdPulseGold 1s ease-in-out infinite alternate !important;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.7), 0 0 16px rgba(255, 184, 0, 0.4);
}

@keyframes cdPulseGold {
  0% {
    color: var(--neon-gold, #ffd700);
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.7), 0 0 16px rgba(255, 184, 0, 0.4);
    transform: scale(1);
  }
  100% {
    color: #fff8bd;
    text-shadow: 0 0 14px rgba(255, 215, 0, 0.95), 0 0 26px rgba(255, 184, 0, 0.8), 0 0 36px rgba(255, 215, 0, 0.5);
    transform: scale(1.05);
  }
}

/* Goldene Kanten-Aura für Queue-Zeilen mit < 10s Restzeit */
.cyber-queue-row.queue-row-critical {
  border-left: 3px solid var(--neon-gold, #ffd700) !important;
  border-color: rgba(255, 215, 0, 0.4) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 6px 24px rgba(0, 0, 0, 0.6), 0 0 18px rgba(255, 215, 0, 0.28) !important;
}

/* Goldener Progress-Bar Stream für kritische Countdown-Phase */
.progress-fill.progress-fill-gold {
  background: linear-gradient(90deg, #ffb800, #ffd700) !important;
  box-shadow: 0 0 12px #ffd700, 0 0 4px #ffffff !important;
}

/* Barrierefreiheit: Keine Animationen/Skalierungen bei prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .cyber-btn:not(:disabled):not(.disabled):active,
  .btn:not(:disabled):not(.disabled):active,
  .upgrade-btn:not(:disabled):not(.disabled):active,
  .cyber-upgrade-btn:not(:disabled):not(.disabled):active,
  .topbar-search-bar:active,
  .hud-chip:active,
  .item-card:not(.disabled):active,
  .tech-chip:active,
  .app-sidebar a:not(.active):active,
  .bottom-nav a:not(.active):active {
    transform: none !important;
  }

  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }

  .cd.cd-glow-gold,
  .cd-glow-gold,
  .countdown-critical,
  .cd.countdown-critical,
  [data-timer-end].countdown-critical,
  .cc-value-pulse {
    animation: none !important;
    transform: none !important;
  }
}

/* ==========================================================================
   Cookie Consent System (TDDDG & DSGVO konform)
   ========================================================================== */

.cookie-banner-wrap {
  position: fixed;
  inset: 0;
  z-index: 10005;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.25s ease;
}

.cookie-banner-wrap.is-visible {
  opacity: 1;
  visibility: visible;
}

.cookie-banner-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(3, 7, 13, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: auto;
}

.cookie-banner-dialog {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 640px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  pointer-events: auto;
  background: var(--deck-panel-active, #090f19);
  border: 1px solid var(--neon-cyan);
  border-radius: var(--radius-md, 10px);
  padding: 24px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.85), 0 0 24px rgba(0, 240, 255, 0.25);
  animation: zdeSlideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.cookie-header {
  margin-bottom: 14px;
}

.cookie-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.cookie-icon {
  font-size: 1.25rem;
}

.cookie-title {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 1.15rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.5px;
}

.cookie-subtitle {
  margin: 8px 0 0 0;
  font-size: 0.86rem;
  line-height: 1.45;
}

.cookie-body {
  margin-bottom: 20px;
}

.cookie-text {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--text);
  margin: 0 0 12px 0;
}

.cookie-links {
  font-size: 0.86rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

.cookie-links a {
  color: var(--neon-cyan);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
  transition: color 0.15s;
}

.cookie-links a:hover {
  color: #ffffff;
  text-shadow: 0 0 8px var(--neon-cyan);
}

.cookie-links .separator {
  color: var(--text-muted);
}

.cookie-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 14px;
  border-top: 1px solid rgba(0, 240, 255, 0.12);
}

/* Ebene 2: Kategorien */
.cookie-categories {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

.cookie-cat-card {
  background: rgba(12, 21, 36, 0.65);
  border: 1px solid rgba(0, 240, 255, 0.18);
  border-radius: var(--radius-sm, 6px);
  padding: 14px 16px;
  transition: border-color 0.2s, background-color 0.2s;
}

.cookie-cat-card.is-locked {
  background: rgba(7, 12, 20, 0.5);
  border-color: rgba(255, 255, 255, 0.1);
}

.cookie-cat-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}

.cookie-cat-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.cookie-cat-name {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 700;
  color: #ffffff;
}

.cookie-cat-desc {
  margin: 0 0 8px 0;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--text-muted);
}

.cookie-cat-details {
  font-size: 0.78rem;
  font-family: var(--font-mono);
  color: var(--text-muted);
}

.cookie-cat-details code {
  color: var(--neon-cyan);
  background: rgba(0, 240, 255, 0.08);
  padding: 2px 6px;
  border-radius: 3px;
}

/* Cyber Toggle Switch */
.cookie-switch-wrap {
  position: relative;
  display: inline-block;
  width: 46px;
  height: 24px;
  flex-shrink: 0;
}

.cookie-switch-wrap input[type="checkbox"] {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.cookie-switch-label {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 12px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.cookie-switch-label::before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 3px;
  background-color: #ffffff;
  border-radius: 50%;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.cookie-switch-wrap input:checked + .cookie-switch-label {
  background-color: rgba(0, 240, 255, 0.35);
  border-color: var(--neon-cyan);
}

.cookie-switch-wrap input:checked + .cookie-switch-label::before {
  transform: translateX(22px);
  background-color: var(--neon-cyan);
  box-shadow: 0 0 8px var(--neon-cyan);
}

.cookie-switch-wrap input:disabled + .cookie-switch-label {
  opacity: 0.6;
  cursor: not-allowed;
}

.cookie-switch-wrap input:focus-visible + .cookie-switch-label {
  outline: 2px solid var(--neon-cyan);
  outline-offset: 2px;
}

/* Zurück-Button */
.cookie-btn-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid rgba(0, 240, 255, 0.3);
  color: var(--neon-cyan);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.cookie-btn-back:hover {
  background: rgba(0, 240, 255, 0.15);
  color: #ffffff;
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.3);
}

/* Responsive / Mobile Anpassungen */
@media (max-width: 600px) {
  .cookie-banner-wrap {
    padding: 8px;
    align-items: flex-end;
  }

  .cookie-banner-dialog {
    padding: 16px;
    max-height: 90vh;
  }

  .cookie-footer {
    flex-direction: column-reverse;
    width: 100%;
  }

  .cookie-footer .cyber-btn {
    width: 100%;
    justify-content: center;
  }
}




/* Account-Seiten verwenden dieselben Karten und Buttons wie das Login. */
.account-card-header { display:flex; align-items:center; gap:12px; margin-bottom:20px; padding-bottom:14px; border-bottom:1px solid rgba(0,240,255,.15); }
.account-card-header h2 { margin:4px 0 0; font-size:1.25rem; letter-spacing:.5px; }
.account-card-icon { margin-bottom:0; flex-shrink:0; width:38px; height:38px; font-size:18px; }
.account-card-badge { color:var(--text-muted); font: .75rem var(--font-mono); letter-spacing:1px; }
.account-card-description { color:var(--text-muted); line-height:1.65; margin-bottom:22px; }
.account-card .form-group { margin-bottom:18px; }
.account-card .form-group label { display:block; margin-bottom:6px; font: .85rem var(--font-mono); color:var(--text-muted); }
.account-card-actions { display:grid; gap:12px; margin-top:24px; }
.account-card-actions .cyber-btn { width:100%; padding:12px; justify-content:center; text-align:center; white-space:normal; }
.account-card-message { display:block; padding:16px; white-space:normal; line-height:1.65; text-transform:none; font-size:.9rem; border-radius:8px; }

#public-login .login-error-message {
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Komfortaktionen: auf schmalen Bildschirmen umbrechen. */
.qol-actions { display:inline-flex; flex-wrap:wrap; gap:6px; align-items:center; }
.subnet-deck .subnet-target { display:inline-flex; flex-direction:column; align-items:flex-start; gap:8px; min-width:0; }
.subnet-deck .subnet-address { white-space:nowrap; }
.subnet-deck .mobile-table td.ip::before { white-space:nowrap; flex-shrink:0; }
.qol-scan-row { display:block; white-space:pre-wrap; padding:4px; }
.qol-selected-target { outline:2px solid var(--neon-cyan); background:rgba(0,240,255,.08); }
.qol-highlight, :target.item-card { outline:2px solid var(--neon-cyan); outline-offset:4px; }

.qol-requirements { font-size:.85rem; padding:8px 0; }
.qol-select { display:flex; gap:8px; align-items:center; padding:8px 0; }
.qol-money-presets { margin:8px; }

/* Betragshilfen bleiben auch auf schmalen Formularen bedienbar. */
form[data-money-form] { flex-wrap: wrap; }
.qol-money-presets { flex-basis: 100%; margin-top: 6px; }
form[data-money-form] input[type="number"] { min-width: 0; }
#fleet-grid .item-card[hidden] { display: none !important; }
.fleet-controls .qol-actions { display:flex; }
.fleet-controls input[type="search"], .fleet-controls select { max-width:100%; }
.fleet-facets { display:flex; flex-wrap:wrap; gap:10px; margin:12px 0; }
.fleet-facet { flex:1 1 180px; min-width:0; padding:10px; border:1px solid var(--border-color); border-radius:8px; }
.fleet-facet summary { cursor:pointer; font-weight:600; }
.fleet-facet label { display:flex; align-items:flex-start; gap:8px; margin-top:8px; overflow-wrap:anywhere; }
.fleet-facet input { flex-shrink:0; }
#fleet-chips button { white-space:normal; text-align:left; }
.filter-profiles { margin:12px 0; padding:12px; border:1px solid var(--border-color); border-radius:8px; }
.filter-profiles .qol-actions { display:flex; }
.filter-profiles label { min-width:0; flex:1 1 180px; }
.filter-profiles input, .filter-profiles select { width:100%; max-width:100%; }
.filter-profiles button { white-space:normal; }
.security-server-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap:16px; }
.security-section, .security-server { padding:20px; margin-bottom:16px; min-width:0; overflow-wrap:anywhere; }
.security-server h3 small { display:block; font-size:0.8rem; color:var(--text-muted); margin-top:6px; }
.security-threat, .security-trace { margin:12px 0; padding:12px 0; border-top:1px solid var(--border); }
.security-deck .cyber-btn { white-space:normal; max-width:100%; text-align:left; }
.security-deck ul { padding-left:20px; }
.qol-next-action { padding: 16px; border: 1px solid var(--border-highlight); border-radius: var(--radius-md); }
.qol-quick-reply { padding: 16px; }
.qol-quick-reply textarea { display: block; width: 100%; margin: 8px 0; }

/* Spieler-Changelog im vorhandenen Cyberdeck-Design. */
.changelog-version-link {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.changelog-version-link:hover,
.changelog-version-link:focus-visible {
  color: var(--text);
}

.changelog-version-link:focus-visible {
  outline: 2px solid var(--neon-cyan);
  outline-offset: 5px;
  border-radius: 2px;
}

.changelog-intro {
  color: var(--text);
  line-height: 1.7;
}

.changelog-history-note {
  color: var(--text-muted);
  font-size: 13px;
  margin-bottom: 28px;
}

.changelog-timeline {
  list-style: none;
  margin: 0 0 32px 8px;
  padding: 0 0 0 24px;
  border-left: 1px solid rgba(0, 240, 255, 0.2);
}

.changelog-timeline > li {
  position: relative;
  margin-bottom: 24px;
}

.changelog-timeline > li::before {
  content: '';
  position: absolute;
  left: -30px;
  top: 30px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--neon-cyan);
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.3);
}

.changelog-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 16px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 13px;
}

.changelog-version {
  color: var(--neon-cyan);
  border: 1px solid rgba(0, 240, 255, 0.2);
  background: rgba(0, 240, 255, 0.06);
  border-radius: var(--radius-sm);
  padding: 3px 10px;
}

.changelog-release h2 {
  font-size: 20px;
  margin-top: 16px;
  overflow-wrap: anywhere;
}

.changelog-release ul {
  margin-bottom: 0;
}

@media (max-width: 600px) {
  .changelog-timeline {
    padding-left: 16px;
    margin-left: 4px;
  }

  .changelog-timeline > li::before {
    left: -22px;
  }

  .changelog-release {
    padding: 20px 16px;
  }

  .changelog-release h2 {
    font-size: 18px;
  }
}

/* Einstellungen und Rangliste im gemeinsamen Cyberdeck-Design. */
.settings-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
  align-items: start;
  gap: 20px;
}
.settings-deck .cyber-card,
.ranking-deck .cyber-card {
  min-width: 0;
  margin-bottom: 0;
}
.settings-group {
  min-width: 0;
  margin: 0 0 24px;
  padding: 0 0 24px;
  border: 0;
  border-bottom: 1px solid var(--border);
}
.settings-group legend,
.settings-sidebar h3,
.ranking-deck h3 {
  padding: 0;
  margin: 0 0 12px;
  color: var(--text);
  font-size: 1.05rem;
  font-weight: 700;
}
.settings-group p,
.settings-sidebar p {
  margin: 0 0 18px;
  font-size: 0.88rem;
  line-height: 1.6;
}
.settings-field + .settings-field { margin-top: 18px; }
.settings-field label,
.ranking-sort label {
  display: block;
  margin-bottom: 8px;
  color: var(--text-muted);
  font-size: 0.85rem;
}
.settings-field input,
.settings-field textarea { box-sizing: border-box; }
.settings-field textarea { resize: vertical; min-height: 110px; }
.settings-password-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.settings-password-grid .settings-field { margin-top: 0; }
.settings-save { display: flex; justify-content: flex-end; }
.settings-sidebar { display: grid; gap: 20px; min-width: 0; }
.settings-sidebar .cyber-badge { margin-bottom: 16px; }
.settings-sidebar .cyber-btn { max-width: 100%; white-space: normal; }

.ranking-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.ranking-anchor { height: 0; margin-bottom: -20px; scroll-margin-top: 100px; }
.ranking-list { display: grid; gap: 8px; }
.ranking-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(110px, auto) 270px;
  align-items: center;
  gap: 18px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(0, 240, 255, 0.025);
}
#rankTableKollektive .ranking-row { grid-template-columns: minmax(0, 1fr) minmax(110px, auto); }
.ranking-row:hover { background: rgba(0, 240, 255, 0.055); }
.ranking-row-current { border-color: var(--neon-cyan); background: rgba(0, 240, 255, 0.08); }
.ranking-identity { display: flex; align-items: center; gap: 14px; min-width: 0; }
.ranking-deck .rank-badge { width: 42px; height: 42px; border-radius: var(--radius-sm); font-family: var(--font-mono); }
.ranking-deck .rank-badge-top { color: var(--neon-amber); border-color: rgba(255, 184, 0, 0.4); background: rgba(255, 184, 0, 0.08); }
.ranking-meta { min-width: 0; }
.ranking-name { font-weight: 700; font-size: 0.95rem; overflow-wrap: anywhere; }
.ranking-name a { color: var(--text); text-decoration: none; }
.ranking-name a:hover { color: var(--neon-cyan); }
.ranking-detail { margin-top: 4px; color: var(--text-muted); font-size: 0.8rem; overflow-wrap: anywhere; }
.ranking-score { text-align: right; }
.ranking-stat { display: flex; flex-direction: column; gap: 4px; }
.ranking-score-label { color: var(--text-muted); font-size: 0.75rem; }
.ranking-score-value { color: var(--neon-cyan); font-family: var(--font-mono); font-size: 1rem; font-weight: 700; overflow-wrap: anywhere; }
.ranking-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.ranking-pagination { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border); }
.ranking-search-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; }
.ranking-search-label { flex-basis: 100%; color: var(--text-muted); font-size: 0.85rem; }
.ranking-search-row .form-control { flex: 1 1 200px; width: auto; min-width: 0; box-sizing: border-box; }
.ranking-search-row input[type="submit"] { width: auto; }
.ranking-sort { max-width: 420px; margin-top: 20px; }
.ranking-empty { padding: 20px 0; }
#rankTableNetwars .ranking-row { grid-template-columns: minmax(0, 1fr) minmax(110px, auto); }
.netwars-week-own { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 12px 0 16px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.netwars-week-rules { margin: 0 0 16px; padding-left: 20px; line-height: 1.5; }
.netwars-week-history { padding: 12px 0; border-top: 1px solid var(--border); }
.netwars-week-podium { margin: 8px 0; padding-left: 0; list-style: none; overflow-wrap: anywhere; }
/* Refs #94: Phasenraid – Phasenleiste, Unterstützung und Regelbox; schmale Bildschirme stapeln statt zu scrollen. */
.netwars-phases { margin: 0 0 20px; min-width: 0; overflow-wrap: anywhere; }
.netwars-phases-title { margin: 0 0 10px; font-size: 1rem; color: var(--text); }
.netwars-phase-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 8px; margin: 0 0 10px; padding: 0; list-style: none; }
.netwars-phase { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 10px 12px; border: 1px solid var(--border); border-left-width: 4px; border-radius: var(--radius-sm); }
.netwars-phase.is-done { border-left-color: var(--neon-emerald); }
.netwars-phase.is-current { border-left-color: var(--neon-crimson); background: rgba(255, 45, 85, 0.08); }
.netwars-phase.is-stopped { border-left-color: var(--neon-amber); }
.netwars-phase-range, .netwars-phase-state { font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-muted); }
.netwars-phase-own { font-size: 0.8rem; color: var(--neon-cyan); }
.netwars-phase-own.is-lapsed { color: var(--neon-amber); }
.netwars-phase-bonus, .netwars-phase-score { margin: 4px 0; font-size: 0.9rem; }
.netwars-support { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border); min-width: 0; overflow-wrap: anywhere; }
.netwars-support h4 { margin: 0 0 6px; }
.netwars-support .cyber-btn { white-space: normal; }
.netwars-support-status { margin-bottom: 10px; font-family: var(--font-mono); font-size: 0.95rem; color: var(--neon-cyan); }
.netwars-support-score { display: block; font-weight: 400; color: var(--text-muted); }
.netwars-rules { margin-bottom: 24px; min-width: 0; overflow-wrap: anywhere; line-height: 1.5; }
.netwars-rules summary { cursor: pointer; font-weight: 700; color: var(--text); }
.netwars-rules-phases, .netwars-rules-list { padding-left: 20px; }
.netwars-rules-phases li, .netwars-rules-list li { margin-bottom: 6px; }

@media (max-width: 1100px) {
  .ranking-row { grid-template-columns: minmax(0, 1fr) minmax(100px, auto); }
  .ranking-actions { grid-column: 1 / -1; padding-top: 12px; border-top: 1px solid var(--border); }
}
@media (max-width: 800px) {
  .settings-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 540px) {
  .settings-password-grid { grid-template-columns: minmax(0, 1fr); }
  .settings-deck .cyber-card,
  .ranking-deck .cyber-card { padding: 18px 14px; }
  .settings-save .cyber-btn { width: 100%; white-space: normal; }
  .ranking-row { padding: 12px; gap: 12px; }
  .ranking-identity { gap: 10px; }
  .ranking-actions { justify-content: flex-start; }
  .ranking-actions .cyber-btn { white-space: normal; }
}


/* Operation Center: Ziel und Befehle auch mit Bildschirmtastatur bedienbar. */
.terminal-controls {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: #0a0a0a;
}
.terminal-selected-target { color: #ccc; overflow-wrap: anywhere; }
.terminal-selected-target code { color: rgb(var(--accent)); }
.terminal-touch-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.terminal-input { min-width: 0; flex: 1; }
.terminal-input::placeholder { color: #999; }
.terminal-output, #promptContainer { flex-shrink: 0; }
.terminal-touch-actions .btn:focus-visible,
.terminal-send-btn:focus-visible,
.terminal-confirm-btn:focus-visible {
  outline: 2px solid rgb(var(--accent));
  outline-offset: 2px;
}
@media (max-width: 768px), (pointer: coarse) {
  .terminal-prompt-line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
  }
  .terminal-prompt-line > .terminal-prompt {
    grid-column: 1 / -1;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .terminal-input {
    min-height: 44px;
    height: 44px !important;
    font-size: 16px !important;
  }
  .terminal-send-btn { display: flex; }
  .terminal-body {
    min-height: 160px;
    max-height: min(55dvh, 480px);
  }
  .terminal-controls { padding: 12px; }
  .terminal-touch-actions .btn,
  .terminal-confirm-btn,
  .terminal-layout .target-btn,
  .terminal-layout .qol-favorite,
  .terminal-layout .copy-btn,
  .terminal-layout .fav-toggle {
    min-height: 44px;
    min-width: 44px;
    touch-action: manipulation;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .terminal-layout .qol-scan-row { white-space: normal; padding: 12px 4px; line-height: 1.8; }
  .terminal-layout .qol-scan-row .btn { margin: 4px 4px 4px 0; }
  .terminal-status { flex-wrap: wrap; gap: 8px 16px; }
  .terminal-footer { color: #aaa; }
  .terminal-footer .console-hint { color: rgb(var(--accent)) !important; }
  .terminal-footer .console-hint a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* Datenschutz-Einstellungen ohne automatischen Auswahlbanner. */
.privacy-dialog { width: min(640px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; box-sizing: border-box; color: var(--text-main); background: var(--bg, #04070b); padding: 24px; }
.privacy-dialog:not([open]) { display: none; }
.privacy-dialog::backdrop { background: rgba(0, 0, 0, .75); }
.privacy-dialog .settings-field { margin: 20px 0; }
.privacy-dialog label { display: flex; align-items: flex-start; gap: 10px; }
.privacy-dialog input[type="checkbox"] { flex-shrink: 0; margin-top: 4px; }
.privacy-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
/* Optionale Katalogdichte: dieselben Items, Werte, Filter und Aktionen. */
.catalog-density-control { grid-column:1/-1; display:flex; flex-wrap:wrap; gap:8px; align-items:center; border:0; padding:8px 0; min-width:0; }
/* Wissensarchiv: dieselben Cyberdeck-Bausteine wie die Spielansichten. */
/* Kollektiv-Zentrale und Unterseiten teilen Orientierung und Cyberdeck-Flächen. */
.kollektiv-deck { min-width:0; overflow-wrap:anywhere; }
.kollektiv-page-header { margin-bottom:16px; }
.kollektiv-page-identity { display:flex; align-items:flex-start; gap:16px; min-width:0; }
.kollektiv-page-identity > div { min-width:0; }
.kollektiv-page-identity .landing-card-icon { flex-shrink:0; margin:0; }
.kollektiv-page-identity p { max-width:70ch; margin:8px 0 0; line-height:1.6; }
.kollektiv-navigation { display:flex; flex-wrap:wrap; gap:8px; padding-bottom:18px; margin-bottom:20px; border-bottom:1px solid var(--border); }
.kollektiv-navigation a { display:flex; align-items:center; min-height:44px; padding:8px 14px; border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--text); background:rgba(0,0,0,.2); text-decoration:none; box-sizing:border-box; }
.kollektiv-navigation a[aria-current] { border-color:var(--neon-cyan); color:var(--neon-cyan); background:rgba(0,240,255,.08); }
.kollektiv-hero { display:flex; justify-content:space-between; align-items:center; gap:20px; border-left:3px solid var(--neon-cyan); }
.kollektiv-hero > div { min-width:0; }
.kollektiv-hero h2 { margin:12px 0 8px; font-size:clamp(1.3rem,3vw,2rem); }
.kollektiv-logo { max-height:80px; max-width:100px; object-fit:contain; border-radius:var(--radius-sm); }
.kollektiv-kpis { grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.kollektiv-kpis .kpi { min-width:0; padding:16px; background:rgba(0,240,255,.04); }
.kollektiv-kpis .kpi-icon-char { color:var(--neon-cyan); }
.kollektiv-kpis .kpi-icon-char svg { width:26px; height:26px; }
.kollektiv-functions { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr)); gap:8px; margin:16px 0; }
.kollektiv-function { display:flex; align-items:center; gap:10px; min-height:54px; padding:12px; color:var(--text); text-decoration:none; background:rgba(0,240,255,.04); border:1px solid var(--border); border-radius:var(--radius-sm); }
.kollektiv-function > :last-child { margin-left:auto; color:var(--neon-cyan); }
.kollektiv-card-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr)); gap:20px; }
.kollektiv-form-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr)); gap:8px; }
.kollektiv-deck .features { grid-template-columns:repeat(2,minmax(0,1fr)); }
.kollektiv-deck .features > div:not(.card):not(.cyber-card) { grid-column:1 / -1; }
.kollektiv-deck :where(.card,.cyber-card,.content,form,div) { min-width:0; }
.kollektiv-deck :is(.card,.content) { background:linear-gradient(145deg,var(--deck-panel),var(--bg-2)); border-color:rgba(0,240,255,.2); box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 10px 30px rgba(0,0,0,.3); }
.kollektiv-deck .features .card { height:auto; }
.kollektiv-deck .features .card :is(h2,h3) { margin-bottom:14px; line-height:1.4; }
.kollektiv-deck .features .card p { flex:initial; margin-bottom:12px; line-height:1.6; }
.kollektiv-deck .table-responsive,.kollektiv-deck .table-scroll { max-width:100%; overflow-x:auto; }
.kollektiv-deck :is(.btn,.cyber-btn,input[type=submit]) { min-height:44px; height:auto; max-width:100%; white-space:normal; overflow-wrap:anywhere; }
.kollektiv-deck :is(.form-control,.cyber-input,select,textarea) { min-width:0; max-width:100%; box-sizing:border-box; }
.kollektiv-deck .form-control { width:100%; }
.kollektiv-deck .cyber-badge { white-space:normal; max-width:100%; overflow-wrap:anywhere; }
.kollektiv-deck img { max-width:100%; object-fit:contain; }
@media (max-width:800px) {
    .kollektiv-deck .features { grid-template-columns:minmax(0,1fr); }
    .kollektiv-page-identity { gap:10px; }
    .kollektiv-page-identity .landing-card-icon { width:36px; height:36px; }
    .kollektiv-page-identity .cyber-page-title { font-size:1.4rem; }
    .kollektiv-navigation { gap:6px; }
    .kollektiv-navigation a { padding:8px 10px; font-size:.8rem; }
    .kollektiv-hero { flex-wrap:wrap; }
    .kollektiv-kpis { gap:6px; }
    .kollektiv-kpis .kpi { display:flex; flex-direction:column; gap:8px; text-align:center; padding:12px 6px; }
    .kollektiv-kpis .kpi .value { font-size:.85rem; }
    .kollektiv-kpis .kpi .caption { font-size:.65rem; }
    .kollektiv-deck [style*="display: flex"],.kollektiv-deck [style*="display:flex"] { flex-wrap:wrap; }
    .kollektiv-deck :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select) { min-width:0; }
}
.lexicon-deck { min-width:0; }
.lexicon-deck .cyber-page-header { align-items:flex-start; }
.lexicon-deck .cyber-page-header-left { min-width:0; }
.lexicon-deck .cyber-page-header p { max-width:70ch; line-height:1.6; }
.lexicon-tools { margin-bottom:20px; }
.lexicon-search-form label { display:block; margin-bottom:8px; font-weight:600; }
.lexicon-search-row { display:flex; gap:10px; flex-wrap:wrap; }
.lexicon-search-row input { flex:1 1 260px; min-width:0; max-width:100%; box-sizing:border-box; }
.lexicon-search-row .cyber-btn { min-height:44px; }
.lexicon-categories { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.lexicon-category { display:flex; align-items:center; gap:8px; min-height:44px; padding:8px 12px; border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--text); text-decoration:none; box-sizing:border-box; }
.lexicon-category span { font-family:var(--font-mono); color:var(--text-muted); }
.lexicon-category[aria-current] { border-color:var(--neon-cyan); background:rgba(0,240,255,.08); }
.lexicon-results { margin:16px 0 0; }
.lexicon-jump { display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; margin-bottom:20px; font-size:.85rem; }
.lexicon-jump a { padding:6px 0; }
.lexicon-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.lexicon-entry { display:flex; flex-direction:column; min-width:0; overflow-wrap:anywhere; scroll-margin-top:calc(var(--header-height,70px) + 24px); }
.lexicon-entry:target { border-color:var(--neon-cyan); box-shadow:0 0 18px rgba(0,240,255,.15); }
.lexicon-entry-header .cyber-badge { width:fit-content; }
.lexicon-entry-header h2 { margin:12px 0; font-size:1.1rem; line-height:1.4; }
.lexicon-rule { line-height:1.65; margin:0 0 16px; }
.lexicon-example { background:rgba(0,0,0,.18); padding:10px 12px; border-left:2px solid var(--neon-cyan); margin-bottom:18px; line-height:1.6; }
.lexicon-example summary { cursor:pointer; min-height:24px; font-size:.85rem; }
.lexicon-entry footer { margin-top:auto; }
.lexicon-entry .cyber-btn,.lexicon-empty .cyber-btn { white-space:normal; max-width:100%; height:auto; min-height:44px; overflow-wrap:anywhere; }
@media (max-width:800px) { .lexicon-grid { grid-template-columns:minmax(0,1fr); } }
.catalog-density-control legend { font-weight:600; }
.catalog-density-control [aria-pressed="true"] { outline:2px solid rgb(var(--accent)); outline-offset:2px; }

/* Planungsseiten: gemeinsamer Serverkontext und Cyberdeck-Bedienleiste. */
.upgradelist-deck .cyber-page-header { align-items:center; }
.upgradelist-deck .cyber-page-header-right { min-width:0; max-width:100%; }
.page-deck .upgrade-server-context {
  display:flex; align-items:center; gap:10px; min-width:0; max-width:100%;
  padding:8px 12px; border:1px solid rgba(0,240,255,.18); border-radius:var(--radius-sm,6px);
  background:rgba(10,20,32,.75);
}
.page-deck .upgrade-server-context > div { min-width:0; }
.page-deck .upgrade-server-context strong { display:block; overflow-wrap:anywhere; font-size:.85rem; }
.page-deck .upgrade-context-label {
  display:block; font: .65rem/1.5 var(--font-mono); text-transform:uppercase;
  letter-spacing:.08em; color:var(--text-muted);
}
.page-deck .upgrade-server-context svg,
.planning-toolbar .upgrade-quicklink svg { flex-shrink:0; width:20px; height:20px; color:var(--neon-cyan,#00f0ff); }
.planning-toolbar {
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px 20px;
   margin:0; padding:12px 14px; min-width:0;
  border:1px solid rgba(0,240,255,.2); border-left:3px solid var(--neon-cyan,#00f0ff);
  border-radius:var(--radius-sm,6px); background:rgba(10,20,32,.75);
}
.planning-toolbar .upgrade-quicklinks { display:flex; flex-wrap:wrap; gap:8px; min-width:0; flex:1 1 600px; }
.planning-toolbar .upgrade-quicklink {
  display:flex; align-items:center; gap:10px; padding:8px 12px; min-width:0;
  border:1px solid transparent; border-radius:var(--radius-sm,6px);
  color:var(--text-main,#e0edf5); text-decoration:none; background:rgba(0,240,255,.035);
  transition:background .2s ease,border-color .2s ease;
}
.planning-toolbar .upgrade-quicklink > span { min-width:0; overflow-wrap:anywhere; }
.planning-toolbar .upgrade-quicklink strong { display:block; font-size:.82rem; line-height:1.4; }
.planning-toolbar .upgrade-quicklink small { display:block; color:var(--text-muted); font: .72rem/1.5 var(--font-mono); }
.planning-toolbar .upgrade-quicklink:hover,
.planning-toolbar .upgrade-quicklink[aria-current] { background:rgba(0,240,255,.09); border-color:rgba(0,240,255,.35); }
.page-deck .upgrade-toolbar .catalog-density-control { margin:0; padding:0; gap:4px; }
.page-deck .upgrade-toolbar .catalog-density-control legend {
  margin-bottom:5px; color:var(--text-muted); font: .65rem/1.5 var(--font-mono);
  text-transform:uppercase; letter-spacing:.08em;
}
.page-deck .upgrade-toolbar [data-catalog-density] {
  min-height:36px; padding:7px 12px; border:1px solid rgba(0,240,255,.2);
  border-radius:var(--radius-sm,6px); background:rgba(0,0,0,.2);
  color:var(--text-muted); font: .75rem/1.4 var(--font-mono);
}
.page-deck .upgrade-toolbar [data-catalog-density][aria-pressed="true"] {
  outline:none; background:rgba(0,240,255,.12); border-color:var(--neon-cyan,#00f0ff);
  color:var(--neon-cyan,#00f0ff); box-shadow:inset 0 -2px 0 var(--neon-cyan,#00f0ff);
}
.page-deck .upgrade-toolbar [data-catalog-density]:hover { color:var(--neon-cyan,#00f0ff); }
.planning-toolbar .upgrade-quicklink:focus-visible,
.page-deck .upgrade-toolbar [data-catalog-density]:focus-visible {
  outline:2px solid var(--neon-cyan,#00f0ff); outline-offset:3px;
}
.page-deck .upgrade-toolbar [data-catalog-density-status]:empty { display:none; }
.page-deck .upgrade-toolbar [data-catalog-density-status] {
  flex-basis:100%; max-width:24rem; overflow-wrap:anywhere; font-size:.75rem; color:var(--text-muted);
}
@media (max-width:640px) {
  .planning-toolbar { padding:10px; }
  .planning-toolbar .upgrade-quicklinks { width:100%; }
  .planning-toolbar .upgrade-quicklink { flex:1 1 100%; }
   .page-deck .upgrade-toolbar .catalog-density-control { width:100%; }
   .page-deck .cyber-slot-badge { flex-wrap:wrap; max-width:100%; box-sizing:border-box; }
}
.page-deck .planning-question { margin:0; font-size:.9rem; flex-basis:100%; }
.upgradelist-deck,.research-deck,#research-plan,#economy-deck,#blueprints-deck { gap:12px; }
.page-deck > .planning-hint,#economy-deck > p { margin:0; }
.planning-hint { margin:8px 0 12px; font-size:.85rem; line-height:1.5; color:var(--text-muted); overflow-wrap:anywhere; }
.upgrade-steps { display:flex; flex-wrap:wrap; gap:8px 28px; padding-inline-start:20px; margin:0; font-size:.85rem; }
.upgrade-steps li { padding-inline-end:8px; }
.qol-filter-primary { display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; margin:12px 0; }
.qol-filter-primary label { display:flex; flex-wrap:wrap; align-items:center; gap:8px; min-width:0; }
.qol-filter-primary input[type="search"] { width:min(280px,100%); min-width:0; max-width:100%; box-sizing:border-box; }
.qol-filter-primary [data-qol-count] { flex-basis:100%; font-size:.8rem; color:var(--text-muted); }
.qol-filter-advanced summary { cursor:pointer; min-height:44px; display:flex; align-items:center; font-size:.85rem; }
.qol-filter-advanced summary::before { content:'▸'; margin-inline-end:8px; }
.qol-filter-advanced[open] summary::before { content:'▾'; }
.qol-filter-simple input,.qol-filter-simple select { max-width:100%; box-sizing:border-box; }
.qol-filter-simple .cyber-panel-controls label { min-width:0; overflow-wrap:anywhere; }
.qol-filter-simple .qol-actions { display:flex; flex-wrap:wrap; gap:8px; }
.qol-filter-simple .qol-actions label { min-width:0; max-width:100%; }
#blueprints-deck .cyber-card { margin-bottom:16px; min-width:0; overflow-wrap:anywhere; }
#blueprints-deck form { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:12px 0; }
#blueprints-deck form > fieldset { flex-basis:100%; min-width:0; }
#blueprints-deck input,#blueprints-deck select { max-width:100%; box-sizing:border-box; }
#blueprints-deck form > label { min-width:0; max-width:100%; }
#blueprints-deck .cyber-btn { white-space:normal; height:auto; min-height:44px; max-width:100%; }
#blueprint-editor { scroll-margin-top:calc(var(--header-height,70px) + 24px); }
.upgradelist-deck .cyber-panel-controls { flex-wrap:wrap; gap:8px; }
.upgradelist-deck .cyber-panel-controls button { white-space:normal; height:auto; max-width:100%; min-height:44px; padding:8px 10px; font-size:.78rem; }
.catalog-details-button { display:none; }
.catalog-list [data-qol-list] { grid-template-columns:minmax(0,1fr) !important; gap:8px !important; }
.catalog-list [data-qol-item] { padding:12px; min-width:0; overflow-wrap:anywhere; }
.catalog-list .item-card { display:grid; grid-template-columns:minmax(150px,2fr) minmax(140px,1fr) minmax(180px,2fr); gap:8px 16px; align-items:center; }
.bounty-catalog-card { display:flex; flex-direction:column; justify-content:space-between; }
.catalog-list.bounties-deck [data-qol-item] { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:12px 20px; align-items:start; }
.catalog-list.bounties-deck [data-qol-item] > div { min-width:0; }
.catalog-list .item-card-header,.catalog-list .item-card-stats,.catalog-list .item-card-footer { margin:0; min-width:0; }
.catalog-list .income-upgrade-preview { grid-column:1 / -1; min-width:0; overflow-wrap:anywhere; }
.catalog-list .item-card-footer { flex-wrap:wrap; }
.catalog-list .item-card-desc,.catalog-list .qol-requirements,.catalog-list .item-card-unlock { grid-column:1/-1; }
.catalog-list .qol-select { grid-column:1/-1; }
.catalog-list .item-card-icon { width:28px; height:28px; }
@media(max-width:700px) {
    .catalog-list .item-card { grid-template-columns:minmax(0,1fr); }
    .catalog-list.bounties-deck [data-qol-item] { grid-template-columns:minmax(0,1fr); }
    .catalog-list .item-card-stats { justify-content:flex-start; gap:20px; }
    .catalog-list .item-card-footer { justify-content:flex-start; gap:10px; }
    .catalog-list .catalog-details-button { display:inline-flex; width:fit-content; }
    .catalog-list [data-qol-item]:not(.catalog-expanded) .item-card-desc,
    .catalog-list [data-qol-item]:not(.catalog-expanded) .qol-requirements,
    .catalog-list [data-qol-item]:not(.catalog-expanded) .item-card-unlock,
    .catalog-list [data-qol-item]:not(.catalog-expanded) [data-catalog-description] { display:none; }
}
.server-switcher-row { display:flex; align-items:center; gap:6px; min-width:0; }
/* Mobile Forschung/Hardware: zwei kompakte Zeilen, Zusatzinfos aufklappbar. */
@media (max-width:700px) {
    :is(.research-deck,.upgradelist-deck).catalog-list .item-card[data-qol-item] {
        grid-template-columns:28px minmax(0,1fr) auto;
        gap:4px 6px; padding:8px; border-left-width:2px;
    }
    :is(.research-deck,.upgradelist-deck).catalog-list .qol-select {
        grid-column:1; grid-row:1; margin:0; font-size:0;
        display:flex; align-items:center; justify-content:center; min-height:44px;
    }
    :is(.research-deck,.upgradelist-deck).catalog-list .qol-select input { margin:0; width:20px; height:20px; }
    :is(.research-deck,.upgradelist-deck).catalog-list .item-card-header { grid-column:2; grid-row:1; gap:0; }
    :is(.research-deck,.upgradelist-deck).catalog-list .item-card-icon { display:none; }
    :is(.research-deck,.upgradelist-deck).catalog-list .item-card-meta { min-width:0; width:100%; }
    :is(.research-deck,.upgradelist-deck).catalog-list .item-card-name { font-size:.85rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    :is(.research-deck,.upgradelist-deck).catalog-list .item-card-level { font-size:.7rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    :is(.research-deck,.upgradelist-deck).catalog-list .catalog-details-button { grid-column:3; grid-row:1; min-height:44px; padding:4px 8px; font-size:.7rem; max-width:100%; }
    :is(.research-deck,.upgradelist-deck).catalog-list .item-card-stats {
        grid-column:1 / 3; grid-row:2; padding:0; border:0; background:none;
        gap:8px; flex-wrap:wrap; font-size:.75rem;
    }
    :is(.research-deck,.upgradelist-deck).catalog-list .item-card-stat { gap:3px; min-width:0; }
    :is(.research-deck,.upgradelist-deck).catalog-list .item-card-stat-label { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
    :is(.research-deck,.upgradelist-deck).catalog-list .item-card-stat-value { font-size:.75rem; overflow-wrap:anywhere; }
    :is(.research-deck,.upgradelist-deck).catalog-list .item-card-footer {
        grid-column:3; grid-row:2; padding:0; border:0; gap:0; justify-content:flex-end;
    }
    :is(.research-deck,.upgradelist-deck).catalog-list .item-card-footer .cyber-btn { min-height:44px; padding:4px 8px; font-size:.7rem; max-width:100%; }
    :is(.research-deck,.upgradelist-deck).catalog-list .item-card:not(.catalog-expanded) .item-card-footer > :first-child:not(:last-child),
    :is(.research-deck,.upgradelist-deck).catalog-list .item-card:not(.catalog-expanded) .income-upgrade-preview { display:none; }
    :is(.research-deck,.upgradelist-deck).catalog-list .item-card.catalog-expanded .item-card-footer { flex-direction:column; align-items:flex-end; gap:4px; }
    :is(.research-deck,.upgradelist-deck).catalog-list .item-card.catalog-expanded .item-card-header { grid-column:2 / 4; }
    :is(.research-deck,.upgradelist-deck).catalog-list .item-card.catalog-expanded .item-card-name,
    :is(.research-deck,.upgradelist-deck).catalog-list .item-card.catalog-expanded .item-card-level { white-space:normal; overflow-wrap:anywhere; }
    :is(.research-deck,.upgradelist-deck).catalog-list .item-card.catalog-expanded .catalog-details-button { grid-column:1 / -1; grid-row:auto; }
}
.server-switcher-row[hidden] { display:none !important; }
.server-switcher-row .server-option { flex:1; min-width:0; overflow-wrap:anywhere; }
.server-favorite-button[aria-pressed="true"] { color:var(--neon-amber); }
#server-switcher-search { width:100%; box-sizing:border-box; }
#serverSwitcherDropdown { min-width:0; max-width:min(440px,calc(100vw - 24px)); }
.server-switcher-row .server-opt-header { flex-wrap:wrap; }
.server-switcher-row .server-opt-header > div { min-width:0; flex-wrap:wrap; }
.server-switcher-row .server-name { min-width:0; overflow-wrap:anywhere; }
@media (max-width:768px) {
    #serverSwitcherDropdown { position:fixed; left:12px; right:12px; width:auto; max-width:none; top:calc(var(--header-height) + env(safe-area-inset-top,0px) + 10px); }
}
.qol-batch-plan { overflow-wrap:anywhere; }
.qol-batch-plan ol { padding-inline-start:1.5em; }
.qol-batch-plan input { max-width:100%; box-sizing:border-box; }
.qol-batch-plan button { white-space:normal; height:auto; max-width:100%; margin:4px; }
.network-search-filters { border:0; padding:16px 0; min-width:0; }
.network-search-filters legend { font-weight:700; }
.network-search-fields { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr)); gap:14px; min-width:0; }
.network-search-fields label { display:flex; flex-direction:column; gap:6px; min-width:0; }
.network-search-fields input,.network-search-fields select { width:100%; min-width:0; max-width:100%; box-sizing:border-box; }
.network-search-buttons,.network-search-types,.network-search-pagination { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }
.network-search-buttons .btn { white-space:normal; overflow-wrap:anywhere; max-width:100%; }
#searchTerminal,#search-results,#subnet-content { min-width:0; overflow-wrap:anywhere; }
#search-results .mobile-table td { white-space:normal; }

/* Baupläne und Einnahmen: gemeinsame Cyberdeck-Planungsoberfläche. */
.planning-deck { min-width:0; overflow-wrap:anywhere; container-type:inline-size; container-name:planning-layout; }
.planning-deck .planning-toolbar .upgrade-quicklinks { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); }
.planning-deck .planning-toolbar .upgrade-quicklink { min-width:0; margin:0; }
.planning-deck .cyber-page-header { margin:0; align-items:center; }
.planning-deck :where(h2,h3,h4,p,dl) { margin-top:0; }
.planning-deck .planning-eyebrow { color:var(--text-muted); font: .7rem/1.5 var(--font-mono); letter-spacing:.04em; }
.planning-deck .upgrade-server-context { display:flex; align-items:center; gap:10px; padding:8px 12px; border:1px solid var(--deck-border-subtle); border-radius:var(--radius-sm); background:var(--bg-2); min-width:0; }
.planning-deck .upgrade-server-context > div { min-width:0; }
.planning-deck .upgrade-server-context svg { color:var(--neon-cyan); flex-shrink:0; }
.planning-deck .upgrade-server-context strong { display:block; font-size:.85rem; }
.planning-deck .upgrade-context-label { display:block; color:var(--text-muted); font: .65rem/1.5 var(--font-mono); text-transform:uppercase; }
.planning-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
#economy-deck .planning-metric { margin:0; }
.planning-deck .planning-metric { display:flex; flex-direction:column; gap:8px; min-width:0; padding:18px 20px; }
.planning-metric > strong { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 8px; font:700 clamp(1.15rem,2.2vw,1.65rem)/1.3 var(--font-mono); color:var(--neon-cyan); font-variant-numeric:tabular-nums; }
.planning-value,.planning-value-pair { white-space:nowrap; overflow-wrap:normal; }
.planning-value-pair { display:inline-flex; align-items:baseline; gap:6px; }
.planning-metric strong small,.economy-server-rate small { color:var(--text-muted); font-size:.72rem; font-weight:400; }
.planning-metric > span:last-child { color:var(--text-muted); font-size:.75rem; line-height:1.5; }
.planning-metric-primary { border-left:3px solid var(--neon-cyan); }
.planning-metric-amber > strong { color:var(--neon-amber); }
.planning-deck .planning-note { background:var(--bg-2); border:1px solid var(--deck-border-subtle); border-radius:var(--radius-sm); padding:0 14px; }
.planning-disclosure > summary { min-height:44px; cursor:pointer; display:flex; align-items:center; gap:8px; color:var(--neon-cyan); font-size:.8rem; list-style:none; }
.planning-disclosure > summary::-webkit-details-marker { display:none; }
.planning-disclosure > summary::before { content:'▸'; flex-shrink:0; }
.planning-disclosure[open] > summary::before { content:'▾'; }
.planning-disclosure p { font-size:.8rem; color:var(--text-muted); line-height:1.6; }
.planning-disclosure > summary:focus-visible,.planning-deck :is(a,button,input,select):focus-visible { outline:2px solid var(--neon-cyan); outline-offset:3px; }
.planning-section-heading { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; margin-top:8px; }
.planning-section-heading h2 { display:flex; align-items:center; gap:10px; margin:0; font-size:1rem; }
.planning-section-heading svg { color:var(--neon-cyan); width:20px; height:20px; }
.planning-deck .planning-section-heading .planning-hint { margin:0; }
.economy-server-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; align-items:start; }
.planning-deck .economy-server-card { margin:0; min-width:0; }
.planning-card-heading { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:16px; }
.planning-card-icon { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; flex-shrink:0; color:var(--neon-cyan); background:rgba(0,240,255,.07); border:1px solid var(--deck-border-subtle); border-radius:var(--radius-sm); }
.planning-card-icon svg { width:20px; height:20px; }
.planning-card-title { flex:1 1 12rem; min-width:0; }
.planning-card-title :is(h2,h3) { font-size:1rem; line-height:1.4; margin:0 0 3px; }
.economy-server-rate { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; padding:12px 14px; margin-bottom:12px; background:var(--bg-2); border-left:2px solid var(--neon-emerald); border-radius:var(--radius-sm); }
.economy-server-rate > span { color:var(--text-muted); font-size:.8rem; }
.economy-server-rate strong { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 8px; color:var(--neon-emerald); font:700 1.4rem/1.3 var(--font-mono); font-variant-numeric:tabular-nums; }
.economy-breakdown { border-top:1px solid var(--deck-border-subtle); }
.economy-breakdown h4 { margin:14px 0 6px; text-transform:uppercase; }
.planning-data-list { margin:0; }
.planning-data-list > div { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; padding:9px 0; border-bottom:1px solid rgba(255,255,255,.04); font-size:.8rem; }
.planning-data-list dt { color:var(--text-muted); }
.planning-data-list dd { margin:0; text-align:right; font-family:var(--font-mono); }
.planning-data-list dd small { display:block; color:var(--text-muted); font-size:.65rem; }
.planning-data-list .planning-data-total { border-top:1px solid var(--deck-border-subtle); }
.planning-data-total :is(dt,dd) { color:var(--neon-cyan); }
.planning-deck .planning-empty { padding:16px 0; font-size:.85rem; line-height:1.6; }
.planning-empty h3 { margin:0 0 6px; font-size:.9rem; }
.planning-empty p { color:var(--text-muted); margin:0; }
#economy-deck > .planning-empty { padding:24px; text-align:center; }
.blueprint-workspace { display:grid; grid-template-columns:minmax(240px,1fr) minmax(0,3fr); gap:16px; align-items:start; }
#blueprints-deck .cyber-card { margin:0; }
#blueprints-deck .blueprint-library { padding:20px; }
#blueprints-deck .blueprint-library > .cyber-btn { width:100%; }
#blueprints-deck .blueprint-library .planning-empty { padding:8px 0 14px; }
#blueprint-list { list-style:none; padding:0; margin:0 0 14px; }
#blueprint-list li { margin:0 0 8px; }
#blueprint-list a { display:flex; flex-direction:column; gap:5px; padding:12px; border:1px solid var(--deck-border-subtle); border-radius:var(--radius-sm); background:var(--bg-2); text-decoration:none; }
#blueprint-list a[aria-current],#blueprint-list a:hover { border-color:var(--deck-border-glow); background:rgba(0,240,255,.06); }
#blueprint-list strong { font-size:.85rem; }
#blueprint-list small { color:var(--text-muted); font: .65rem/1.5 var(--font-mono); }
.blueprint-snapshot { margin-top:20px; padding-top:20px; border-top:1px solid var(--deck-border-subtle); }
.blueprint-snapshot h3 { font-size:.9rem; margin-bottom:8px; }
#blueprints-deck .blueprint-snapshot-form { display:flex; flex-direction:column; align-items:stretch; gap:8px; margin:12px 0 0; }
#blueprints-deck .blueprint-snapshot-form > label { margin:0; color:var(--text-muted); font-size:.8rem; }
#blueprints-deck .blueprint-editor-form { display:block; margin:0; }
.blueprint-identity { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin:18px 0; align-items:start; }
.blueprint-identity label { display:flex; flex-direction:column; gap:7px; font-size:.8rem; color:var(--text-muted); }
.blueprint-identity small { font-size:.7rem; }
#blueprints-deck .blueprint-identity :is(input,select),#blueprints-deck .blueprint-snapshot-form input { width:100%; min-width:0; min-height:44px; }
.blueprint-component-groups { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,23rem),1fr)); gap:14px; align-items:start; }
#blueprints-deck .blueprint-component-group { margin:0; padding:10px; border:1px solid var(--deck-border-subtle); border-radius:var(--radius-sm); background:var(--bg-2); }
.blueprint-component-group legend { padding:0 6px; font-size:.85rem; font-weight:600; }
.blueprint-component-group legend svg { width:16px; height:16px; color:var(--neon-cyan); vertical-align:middle; margin-right:4px; }
#blueprints-deck .blueprint-component,.blueprint-column-head { display:grid; grid-template-columns:minmax(0,1fr) 64px minmax(72px,max-content); gap:8px; align-items:center; margin:0; }
.blueprint-column-head { padding:6px 0 10px; font: .65rem/1.4 var(--font-mono); color:var(--text-muted); }
.blueprint-column-head > :not(:first-child) { text-align:center; }
.blueprint-column-head > :last-child { text-align:right; white-space:nowrap; }
#blueprints-deck .blueprint-component { padding:4px 0; border-top:1px solid rgba(255,255,255,.05); }
#blueprints-deck .blueprint-component:has(input[type="checkbox"]:checked) { background:rgba(0,240,255,.05); }
.blueprint-component-select { display:flex; gap:8px; align-items:center; font-size:.78rem; line-height:1.4; min-height:44px; cursor:pointer; }
#blueprints-deck .blueprint-component input[type="checkbox"] { width:16px; height:16px; flex-shrink:0; accent-color:var(--neon-cyan); }
#blueprints-deck .blueprint-component input[type="number"] { width:100%; min-width:0; min-height:44px; padding:6px; text-align:center; font: .8rem var(--font-mono); }
.blueprint-current { text-align:right; font: .75rem var(--font-mono); font-variant-numeric:tabular-nums; color:var(--neon-cyan); }
.blueprint-level-pair { display:inline-flex; align-items:baseline; gap:.35em; white-space:nowrap; overflow-wrap:normal; }
.blueprint-level-divider,.blueprint-level-max { color:var(--text-muted); }
.blueprint-form-footer { border-top:1px solid var(--deck-border-subtle); margin-top:18px; padding-top:16px; }
#blueprints-deck .blueprint-delete-form { margin:16px 0 0; padding-top:16px; border-top:1px solid var(--deck-border-subtle); }
.planning-feedback { padding:12px 16px; border:1px solid rgba(0,255,157,.3); border-radius:var(--radius-sm); color:var(--neon-emerald); background:rgba(0,255,157,.05); font-size:.85rem; }
.planning-feedback-error { color:var(--neon-crimson); border-color:rgba(255,51,102,.3); background:rgba(255,51,102,.05); }
.blueprint-plan-metrics { margin:16px 0; background:var(--bg-2); border:1px solid var(--deck-border-subtle); border-radius:var(--radius-sm); }
.blueprint-plan-metrics .planning-metric > strong { font-size:1.15rem; }
.blueprint-plan-list { padding-left:24px; margin:16px 0 0; }
#blueprints-deck .blueprint-plan-list li { padding:12px; margin:8px 0; background:var(--bg-2); border:1px solid var(--deck-border-subtle); border-radius:var(--radius-sm); }
.blueprint-plan-list li::marker { font: .8rem var(--font-mono); color:var(--neon-cyan); }
.blueprint-plan-step { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; font-size:.85rem; }
.blueprint-plan-step > .planning-eyebrow { white-space:nowrap; }
.blueprint-plan-list .planning-hint { margin:8px 0 0; }
.planning-footer-links { display:flex; flex-wrap:wrap; gap:10px; }
.planning-footer-links svg { width:16px; height:16px; }
@container planning-layout (min-width:1450px) {
    .planning-deck .planning-toolbar .upgrade-quicklinks { grid-template-columns:1.1fr .9fr 1fr 1.25fr; }
}
@container planning-layout (max-width:900px) {
    .blueprint-workspace,.economy-server-grid { grid-template-columns:minmax(0,1fr); }
}
@container planning-layout (max-width:600px) {
    .planning-metrics,.blueprint-identity { grid-template-columns:minmax(0,1fr); }
    .cyber-page-header-right { width:100%; }
    #blueprints-deck .cyber-card,.economy-server-card { padding:16px 12px; }
    .planning-data-list > div { grid-template-columns:minmax(0,1fr); gap:4px; }
    .planning-data-list dd { text-align:left; }
    .planning-card-heading > .cyber-badge { margin-left:46px; }
    .planning-card-heading .planning-card-title { flex:1 1 calc(100% - 46px); }
    .planning-card-heading > .cyber-btn { flex-basis:100%; }
    .blueprint-plan-metrics { gap:0; }
    #blueprints-deck .blueprint-component,.blueprint-column-head { grid-template-columns:minmax(0,1fr) 54px minmax(64px,max-content); gap:6px; }
}
@media (max-width:900px) {
    .blueprint-workspace { grid-template-columns:minmax(0,1fr); }
    .economy-server-grid { grid-template-columns:minmax(0,1fr); }
}
@media (max-width:600px) {
    .planning-metrics,.blueprint-identity { grid-template-columns:minmax(0,1fr); }
    .planning-deck .cyber-page-header-right { width:100%; }
    #blueprints-deck .cyber-card,.planning-deck .economy-server-card { padding:16px 12px; }
    .planning-data-list > div { grid-template-columns:minmax(0,1fr); gap:4px; }
    .planning-data-list dd { text-align:left; }
    .planning-card-heading > .cyber-badge { margin-left:46px; }
    .planning-card-heading .planning-card-title { flex:1 1 calc(100% - 46px); }
    .planning-card-heading > .cyber-btn { flex-basis:100%; }
    .blueprint-plan-metrics { gap:0; }
    #blueprints-deck .blueprint-component,.blueprint-column-head { grid-template-columns:minmax(0,1fr) 54px minmax(64px,max-content); gap:6px; }
    .planning-deck .cyber-btn { white-space:normal; height:auto; min-height:44px; max-width:100%; }
}
/* Geschlossene Registrierung: weiterhin sichtbar, Hinweis per Hover/Fokus/Touch. */
.registration-control { position: relative; display: inline-flex; }
.registration-control .registration-disabled,
.registration-control .registration-disabled:hover,
.registration-control .registration-disabled:focus {
    color: #c7c7c7;
    background: #333;
    border-color: #777;
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
}
.registration-disabled:focus-visible { outline: 2px solid #ccc; outline-offset: 3px; }
.registration-hint {
    display: none;
    position: absolute;
    top: 100%;
    /* Unter dem Button zentriert, damit der Hinweis auch in schmalen Fenstern sichtbar bleibt. */
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    width: min(20rem, 80vw);
    padding: 1rem;
    background: #222;
    color: #eee;
    border: 1px solid #777;
    border-radius: 6px;
    font-size: .9rem;
    line-height: 1.5;
    text-align: left;
    white-space: normal;
}
.registration-control:hover > .registration-hint,
.registration-control:focus-within > .registration-hint { display: block; }
.registration-control .registration-hint a:not(.btn) {
    /* Navigationslinks im Kopfbereich (.public-nav a) nicht in den Fließtext übernehmen. */
    padding: 0;
    border-radius: 0;
    background: none;
    font: inherit;
    color: #8eeaff;
    text-decoration: underline;
    transition: none;
}
.registration-control .registration-hint a:not(.btn):hover,
.registration-control .registration-hint a:not(.btn):focus-visible {
    color: #c4f6ff;
    background: none;
}
@media (hover: none) {
    .registration-control { flex-wrap: wrap; }
    .registration-hint { display: block; position: static; transform: none; margin-top: .5rem; }
}