@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  --bg: #0a0d12;
  --surface: #12161d;
  --surface-2: #171c25;
  --border: #232935;
  --text: #e6e9ee;
  --text-dim: #8a93a6;
  --text-faint: #5a6274;
  --accent: #00d9b5;
  --accent-dim: #0a3c34;
  --accent-glow: color-mix(in srgb, var(--accent) 35%, transparent);
  --accent-glow-strong: color-mix(in srgb, var(--accent) 55%, transparent);
  --violet: #7c6cf0;
  --violet-dim: #241f4a;
  --warn: #ffb020;
  --warn-dim: #3a2a08;
  --danger: #ff5c5c;
  --danger-dim: #3a1414;
  --radius: 10px;
  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --ease-out-expo: cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
}

/* ---- Reset & Base ---- */
* { box-sizing: border-box; }
html, body {
  margin:0; padding:0; background:var(--bg); color:var(--text);
  font-family:var(--font-body); font-size:14px; -webkit-font-smoothing:antialiased;
  scrollbar-gutter:stable;
}
a { color:inherit; text-decoration:none; }
button { font-family:inherit; cursor:pointer; }

/* ---- Page Loader ---- */
.page-loader {
  position:fixed; top:0; left:0; right:0; height:2px; z-index:9999;
  pointer-events:none; opacity:0; transition:opacity .2s ease;
}
.page-loader.is-loading { opacity:1; }
.page-loader-bar {
  height:100%; width:0%;
  background: linear-gradient(90deg, var(--accent), var(--violet), var(--accent));
  background-size:200% 100%;
  box-shadow:0 0 10px var(--accent), 0 0 20px var(--accent);
  animation: loaderProgress 1.2s var(--ease-out-expo) forwards, loaderShimmer 1.5s linear infinite;
}
.page-loader.is-loading .page-loader-bar { width:100%; }
@keyframes loaderProgress { 0%{width:0%} 30%{width:45%} 60%{width:78%} 100%{width:92%} }
@keyframes loaderShimmer { 0%{background-position:0% 0%} 100%{background-position:200% 0%} }

/* ---- Shell ---- */
.shell { display:grid; grid-template-columns:248px 1fr; min-height:100vh; }

/* ---- Sidebar ---- */
.sidebar {
  background:var(--surface); border-right:1px solid var(--border);
  display:flex; flex-direction:column; padding:20px 14px;
  position:sticky; top:0; height:100vh; z-index:10; overflow-y:auto; scrollbar-width:thin;
}
.brand { display:flex; align-items:center; gap:10px; padding:6px 8px 22px 8px; }
.brand-mark {
  width:28px; height:28px; border-radius:8px;
  background: linear-gradient(135deg, var(--accent), var(--violet));
  flex-shrink:0;
  box-shadow: 0 0 18px var(--accent-glow);
  transition: transform .4s var(--ease-out-expo), box-shadow .4s ease;
}
.brand:hover .brand-mark { transform: rotate(8deg) scale(1.05); box-shadow:0 0 24px var(--accent-glow-strong); }
.brand-text { display:flex; flex-direction:column; }
.brand-name { font-family:var(--font-display); font-weight:700; font-size:16px; letter-spacing:-0.02em; line-height:1.1; }
.brand-sub { font-size:10.5px; color:var(--text-faint); font-family:var(--font-mono); letter-spacing:0.04em; display:flex; align-items:center; gap:6px; margin-top:2px; }
.brand-version {
  display:inline-flex; align-items:center; font-size:9px; font-weight:600; letter-spacing:0.06em;
  padding:1px 5px; border-radius:4px; background:var(--surface-2); border:1px solid var(--border);
  color:var(--accent); line-height:1.2; box-shadow:0 0 8px var(--accent-glow);
}
.nav-wrapper { position:relative; flex:1; }
.nav-indicator {
  position:absolute; left:0; top:0; width:100%; height:36px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 14%, transparent) 0%, color-mix(in srgb, var(--accent) 6%, transparent) 50%, rgba(18,22,29,0.9) 100%);
  border:1px solid color-mix(in srgb, var(--accent) 32%, transparent);
  border-radius:10px; pointer-events:none; z-index:0; opacity:0; transform:translateY(0);
  transition: transform 0.52s var(--ease-out-expo), height 0.38s var(--ease-out-expo), opacity 0.25s ease, box-shadow 0.3s ease, border-color 0.3s ease, background 0.3s ease;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 6%, transparent) inset, 0 0 20px var(--accent-glow), 0 2px 12px rgba(0,0,0,0.25);
  overflow:hidden;
}
.nav-indicator.is-visible { opacity:1; }
.nav-indicator::before {
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:3px; height:18px; border-radius:0 3px 3px 0; background:var(--accent);
  box-shadow:0 0 10px var(--accent), 0 0 20px var(--accent);
}
.nav-indicator-glow { position:absolute; inset:-20px; background: radial-gradient(120px circle at 20% 50%, var(--accent-glow), transparent 70%); pointer-events:none; }
.nav-group { margin-bottom:18px; position:relative; z-index:1; }
.nav-label { font-size:10.5px; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-faint); font-family:var(--font-mono); padding:0 10px; margin-bottom:6px; }
.nav-item {
  display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:8px;
  color:var(--text-dim); font-size:13.5px; font-weight:500; margin-bottom:2px;
  position:relative; z-index:1; transition: color .22s var(--ease-out-expo), transform .22s var(--ease-out-expo);
  will-change:transform; isolation:isolate;
}
.nav-item::after {
  content:""; position:absolute; inset:0;
  background: radial-gradient(120px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), color-mix(in srgb, var(--accent) 10%, transparent), transparent 60%);
  opacity:0; transition:opacity .25s ease; z-index:-1; pointer-events:none; border-radius:8px;
}
.nav-item:hover { color:var(--text); transform:translateX(2px); }
.nav-item:hover::after { opacity:1; }
.nav-item:active { transform:translateX(1px) scale(0.98); }
.nav-item.active { color:var(--text); background:transparent; }
.nav-item.active .nav-icon { color:var(--accent); opacity:1; filter: drop-shadow(0 0 6px var(--accent-glow-strong)); }
.nav-icon { width:17px; height:17px; flex-shrink:0; opacity:0.85; transition: transform .22s var(--ease-out-expo), color .22s ease, filter .22s ease; }
.nav-item:hover .nav-icon { transform:scale(1.08); }
.nav-badge { margin-left:auto; font-family:var(--font-mono); font-size:10.5px; padding:1px 6px; border-radius:20px; background:var(--warn-dim); color:var(--warn); }
.sidebar-footer { margin-top:auto; border-top:1px solid var(--border); padding-top:12px; position:relative; z-index:1; }
.node-settings-layout { display:grid; grid-template-columns:150px 1fr; gap:24px; }
.node-settings-layout > div { grid-column:2; }
.node-settings-tabs { display:flex; flex-direction:column; gap:4px; }
.node-settings-tab { border:0; border-left:2px solid transparent; background:transparent; color:var(--text-dim); text-align:left; padding:10px 12px; border-radius:6px; font:inherit; cursor:pointer; }
.node-settings-tab:hover { color:var(--text); background:var(--surface-2); }
.node-settings-tab.active { color:var(--accent); background:var(--accent-dim); border-left-color:var(--accent); }
.node-settings-panel { display:none; }
.node-settings-panel.active { display:block; }
.port-table-wrap { overflow-x:auto; margin-bottom:14px; border:1px solid var(--border); border-radius:10px; }
.port-table { width:100%; min-width:900px; border-collapse:collapse; font-size:12px; }
.port-table th { background:var(--surface-2); color:var(--text-faint); font-family:var(--font-mono); font-size:10px; font-weight:600; letter-spacing:.05em; text-align:left; text-transform:uppercase; padding:13px 12px; white-space:nowrap; }
.port-table td { border-top:1px solid var(--border); color:var(--text-dim); padding:12px; vertical-align:middle; }
.port-table tr:hover td { background:color-mix(in srgb, var(--accent) 4%, transparent); }
.port-table td strong { color:var(--text); display:block; font-family:var(--font-mono); }
.port-table td small { color:var(--text-faint); font-family:var(--font-mono); font-size:9px; }
.port-table input[type=text], .port-table select { width:130px; background:var(--surface-2); border:1px solid var(--border); color:var(--text); border-radius:6px; padding:7px 8px; font:inherit; }
.port-table input[type=text]:focus, .port-table select:focus { outline:none; border-color:var(--accent); }
.port-table form { display:inline-flex; align-items:center; gap:5px; }
.port-server, .port-available { display:inline-block; border-radius:12px; padding:4px 8px; font-family:var(--font-mono); font-size:9px; white-space:nowrap; }
.port-server { color:var(--accent); background:var(--accent-dim); }
.port-available { color:var(--text-dim); background:var(--surface-2); }
.port-action { border:0; background:transparent; color:var(--text-dim); font-size:17px; padding:5px; cursor:pointer; }
.port-action:hover { color:var(--accent); }
.port-action.danger:hover { color:var(--danger); }
@media (max-width:700px) { .node-settings-layout { grid-template-columns:1fr; } .node-settings-layout > div { grid-column:1; } .node-settings-tabs { flex-direction:row; overflow-x:auto; } .node-settings-tab { border-left:0; border-bottom:2px solid transparent; white-space:nowrap; } .node-settings-tab.active { border-bottom-color:var(--accent); } }

/* ---- Topbar ---- */
.topbar {
  display:flex; align-items:center; justify-content:space-between; padding:16px 28px;
  border-bottom:1px solid var(--border); background: rgba(10,13,18,0.7);
  backdrop-filter: blur(12px) saturate(1.2); position:sticky; top:0; z-index:20;
}
.breadcrumb { display:flex; align-items:center; gap:8px; font-family:var(--font-display); font-size:19px; font-weight:600; letter-spacing:-0.01em; }
.crumb-root { color:var(--text-faint); font-weight:500; transition: color .2s ease, transform .2s var(--ease-out-expo); }
.crumb-root:hover { color:var(--text-dim); transform:translateX(-1px); }
.crumb-sep { width:15px; height:15px; color:var(--text-faint); flex-shrink:0; }
.crumb-current { color:var(--text); }
.topbar-right { display:flex; align-items:center; gap:10px; }
.credit-pill {
  display:flex; align-items:center; gap:7px; background:var(--surface); border:1px solid var(--border);
  padding:7px 12px; border-radius:20px; font-family:var(--font-mono); font-size:12.5px;
  transition: border-color .2s ease, transform .2s var(--ease-out-expo);
}
.credit-pill:hover { border-color: color-mix(in srgb, var(--warn) 30%, var(--border)); transform:translateY(-1px); }
.credit-pill-num { color:var(--warn); font-weight:700; text-shadow:0 0 4px currentColor, 0 0 8px currentColor; }
.credit-dot { width:7px; height:7px; border-radius:50%; background:var(--warn); box-shadow:0 0 0 3px var(--warn-dim); }
.avatar {
  width:32px; height:32px; border-radius:8px; background:var(--surface-2); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:12px; color:var(--text-dim);
  transition: transform .2s var(--ease-out-expo), border-color .2s ease;
}
.avatar:hover { transform:scale(1.05); }

/* ---- LANG SWITCHER ---- */
.lang-switcher { position:relative; }
.lang-btn {
  display:flex; align-items:center; gap:6px;
  background:var(--surface); border:1px solid var(--border);
  padding:6px 10px; border-radius:20px; font-family:var(--font-mono); font-size:12px;
  color:var(--text-dim); transition: all .2s var(--ease-out-expo);
}
.lang-btn:hover { border-color:var(--accent); color:var(--text); transform:translateY(-1px); box-shadow:0 0 12px var(--accent-glow); }
.lang-flag { font-size:14px; line-height:1; }
.lang-code { font-weight:600; font-size:11px; }
.lang-chevron { width:12px; height:12px; opacity:0.6; transition: transform .2s ease; }
.lang-switcher.is-open .lang-chevron { transform: rotate(180deg); }
.lang-dropdown {
  position:absolute; top: calc(100% + 8px); right:0; width:300px; max-height:380px;
  background: #0f141c; border:1px solid var(--border); border-radius:12px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04) inset;
  overflow:hidden; z-index:100;
  opacity:0; transform: translateY(-8px) scale(0.98); pointer-events:none;
  transition: opacity .22s var(--ease-out-expo), transform .22s var(--ease-out-expo);
}
.lang-switcher.is-open .lang-dropdown { opacity:1; transform: translateY(0) scale(1); pointer-events:auto; }
.lang-dropdown-header {
  padding:12px 14px; font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:0.06em;
  color:var(--text-faint);
}
.lang-list { max-height:320px; overflow-y:auto; padding:6px; scrollbar-width:thin; }
.lang-option {
  display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:8px;
  cursor:pointer; transition: background .15s ease, transform .15s var(--ease-out-expo), color .15s ease;
  border:1px solid transparent;
}
.lang-option:hover { background: var(--surface-2); transform:translateX(2px); }
.lang-option.active {
  background: var(--accent); color: #04211c; border-color: var(--accent);
  box-shadow: 0 0 14px var(--accent-glow), 0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent) inset;
}
.lang-option.active .lang-option-name { color:#04211c; font-weight:700; }
.lang-option.active .lang-option-native { color: rgba(4,33,28,0.7); }
.lang-option-flag { font-size:18px; width:26px; text-align:center; flex-shrink:0; }
.lang-option-info { flex:1; min-width:0; }
.lang-option-name { font-size:13px; font-weight:600; color:var(--text); line-height:1.2; }
.lang-option-native { font-size:11px; color:var(--text-faint); font-family:var(--font-mono); }
.lang-option-code { font-size:10px; font-family:var(--font-mono); color:var(--text-faint); background:var(--surface-2); border:1px solid var(--border); padding:2px 5px; border-radius:4px; }
.lang-option.active .lang-option-code { background: rgba(4,33,28,0.15); border-color: rgba(4,33,28,0.2); color: #04211c; }

/* ---- CONTENT - NUR OPACITY, KEIN TRANSFORM - DAMIT HOVER BUTTERWEICH ---- */
.content {
  padding:26px 28px 60px 28px;
  animation: pageEnter 0.35s var(--ease-out-expo) both;
}
.content.is-exiting { animation: pageLeave 0.2s var(--ease-in-out) both !important; }
@keyframes pageEnter { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
@keyframes pageLeave { from { opacity:1; } to { opacity:0; } }

/* Nicht-Card Elemente nur Opacity - kein transform mehr */
.content .hero { animation: itemEnter 0.35s var(--ease-out-expo) both; animation-delay:0.02s; }
.content .section-title { animation: itemEnter 0.3s var(--ease-out-expo) both; animation-delay:0.04s; }
.content .stat-inline-row { animation: itemEnter 0.3s var(--ease-out-expo) both; animation-delay:0.06s; }
.content .quick-actions { animation: itemEnter 0.3s var(--ease-out-expo) both; animation-delay:0.08s; }
.content .banner-warn { animation: itemEnter 0.3s var(--ease-out-expo) both; animation-delay:0.03s; }
.content .panel-list { animation: itemEnter 0.3s var(--ease-out-expo) both; animation-delay:0.08s; }
.content .panel-row { animation: itemEnter 0.3s var(--ease-out-expo) both; }
.content .panel-row:nth-child(1){animation-delay:0.10s} .content .panel-row:nth-child(2){animation-delay:0.14s} .content .panel-row:nth-child(3){animation-delay:0.18s} .content .panel-row:nth-child(4){animation-delay:0.22s} .content .panel-row:nth-child(5){animation-delay:0.26s}
@keyframes itemEnter { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
.breadcrumb .crumb-current { display:inline-block; animation: itemEnter 0.3s var(--ease-out-expo) both; animation-delay:0.08s; }

/* ---- Status ---- */
.status { display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:11.5px; letter-spacing:0.02em; }
.status-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.status-online .status-dot { background:var(--accent); box-shadow:0 0 0 3px var(--accent-dim); } .status-online{color:var(--accent)}
.status-offline .status-dot { background:var(--text-faint); box-shadow:0 0 0 3px var(--surface-2); } .status-offline{color:var(--text-faint)}
.status-warn .status-dot { background:var(--warn); box-shadow:0 0 0 3px var(--warn-dim); animation:pulse 1.8s infinite; } .status-warn{color:var(--warn)}
.status-danger .status-dot { background:var(--danger); box-shadow:0 0 0 3px var(--danger-dim); } .status-danger{color:var(--danger)}






























@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(255,176,32,0.5)} 70%{box-shadow:0 0 0 6px rgba(255,176,32,0)} 100%{box-shadow:0 0 0 0 rgba(255,176,32,0)} }

/* ---- CARDS - EXAKT WIE GEWÜNSCHT - CLEAN ---- */
.grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(230px, 1fr));
  gap:14px;
  margin-bottom:24px;
  padding-top:8px;
  overflow:visible;
}
.ressourcen-grid {
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap:14px;
  margin-bottom:24px;
  padding-top:12px;
  padding-bottom:12px;
  overflow:visible;
}
.card {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px;
  cursor:pointer;
  transform: translateY(0);
  will-change: transform;
  transition:
    transform 0.32s cubic-bezier(0.16,1,0.3,1), /* expo out = clean */
    box-shadow 0.32s cubic-bezier(0.16,1,0.3,1),
    border-color 0.25s ease;
  animation: cardEnter 0.4s cubic-bezier(0.16,1,0.3,1) both;
}
.card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,0.38) !important;
}

.content .grid .card {
  animation: cardEnter 0.4s cubic-bezier(0.16,1,0.3,1) both !important;
}
.content .grid .card:nth-child(1) { animation-delay:0.08s; }
.content .grid .card:nth-child(2) { animation-delay:0.12s; }
.content .grid .card:nth-child(3) { animation-delay:0.16s; }
.content .grid .card:nth-child(4) { animation-delay:0.20s; }

.content .ressourcen-grid .card,
.ressourcen-grid .card,
.ressourcen-card {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px;
  cursor:pointer;
  animation: cardEnter 0.4s cubic-bezier(0.16,1,0.3,1) both !important;
}
.content .ressourcen-grid .card:nth-child(1), .ressourcen-grid .card:nth-child(1) { animation-delay:0.08s; }
.content .ressourcen-grid .card:nth-child(2), .ressourcen-grid .card:nth-child(2) { animation-delay:0.12s; }
.content .ressourcen-grid .card:nth-child(3), .ressourcen-grid .card:nth-child(3) { animation-delay:0.16s; }
.content .ressourcen-grid .card:nth-child(4), .ressourcen-grid .card:nth-child(4) { animation-delay:0.20s; }

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

.content .ressourcen-grid .card,
.ressourcen-grid .card,
.ressourcen-card {
  animation: cardEnter 0.4s cubic-bezier(0.16,1,0.3,1) both !important;
}

.card-stat-label { font-family:var(--font-mono); font-size:11px; color:var(--text-faint); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:8px; }
.card-stat-value { font-family:var(--font-display); font-size:26px; font-weight:600; text-shadow:0 0 5px currentColor, 0 0 10px currentColor; }
.card-stat-sub { font-size:12px; color:var(--text-dim); margin-top:4px; }
.section-title { font-family:var(--font-display); font-weight:600; font-size:15px; margin:28px 0 12px 0; }
.panel-list { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; transition:border-color .25s ease; }
.panel-list:hover { border-color:color-mix(in srgb, var(--border) 80%, var(--text-faint)); }
.panel-row { display:flex; align-items:center; gap:14px; padding:14px 18px; border-bottom:1px solid var(--border); transition: background .18s ease; }
.panel-row:hover { background:color-mix(in srgb, var(--surface-2) 70%, transparent); }
.panel-row:last-child { border-bottom:none; }
.row-icon { width:34px; height:34px; border-radius:8px; background:var(--surface-2); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.row-icon svg { width:17px; height:17px; }
.row-main { flex:1; min-width:0; }
.row-title { font-weight:600; font-size:13.5px; }
.row-sub { font-size:12px; color:var(--text-faint); font-family:var(--font-mono); margin-top:2px; }
.row-meta { display:flex; align-items:center; gap:22px; }
.row-metric { text-align:right; }
.admin-server-list { display:flex; flex-direction:column; gap:10px; }
.admin-server-card { position:relative; overflow:hidden; background:radial-gradient(circle at 8% 0%, rgba(0,217,181,.08), transparent 28%), var(--surface); border:1px solid var(--border); border-radius:12px; padding:15px 16px 12px; transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.admin-server-card::after { content:""; position:absolute; inset:0; pointer-events:none; opacity:.16; background-image:radial-gradient(var(--text-faint) .7px, transparent .7px); background-size:15px 15px; mask-image:linear-gradient(90deg, transparent 0%, #000 18%, #000 88%, transparent 100%); }
.admin-server-card:hover { transform:translateY(-2px); border-color:color-mix(in srgb, var(--accent) 45%, var(--border)); box-shadow:0 10px 26px rgba(0,0,0,.25); }
.admin-server-main, .admin-server-actions { position:relative; z-index:1; display:flex; align-items:center; }
.admin-server-main { gap:12px; min-height:38px; }
.admin-server-status { width:18px; display:flex; justify-content:center; }
.admin-server-status .status-dot, .admin-icon-btn .status-dot { width:8px; height:8px; border-radius:50%; background:var(--text-faint); box-shadow:0 0 0 3px var(--surface-2); }
.admin-server-resource { min-width:58px; text-align:right; margin-left:auto; display:flex; flex-direction:column; gap:2px; }
.admin-server-resource strong { font-family:var(--font-mono); font-size:13px; }
.admin-server-resource span { color:var(--text-faint); font-size:10px; font-family:var(--font-mono); }
.admin-server-actions { justify-content:flex-end; gap:13px; margin-top:12px; padding:10px 0 0 30px; border-top:1px solid color-mix(in srgb, var(--border) 75%, transparent); }
.admin-icon-btn { width:24px; height:24px; display:inline-flex; align-items:center; justify-content:center; padding:0; border:0; background:transparent; color:var(--text-dim); text-decoration:none; cursor:pointer; transition:color .18s ease, transform .18s ease; }
.admin-icon-btn svg { width:17px; height:17px; }
.admin-icon-btn:hover { color:var(--text); transform:translateY(-1px) scale(1.08); }
.admin-icon-btn.is-online .status-dot, .admin-server-status.is-online .status-dot { background:var(--accent); box-shadow:0 0 0 3px var(--accent-dim), 0 0 9px var(--accent); }
.admin-icon-btn.is-danger:hover { color:var(--danger); }
@media (max-width:600px) { .admin-server-actions { gap:9px; padding-left:0; } .admin-server-resource { min-width:46px; } }
.row-metric-value { font-family:var(--font-mono); font-size:13px; text-shadow:0 0 3px currentColor; }
.row-metric-label { font-size:10.5px; color:var(--text-faint); }

/* ---- Buttons ---- */
.btn {
  border:1px solid var(--border); background:var(--surface-2); color:var(--text);
  padding:8px 14px; border-radius:7px; font-size:12.5px; font-weight:500;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s var(--ease-out-expo);
}
.btn:hover { border-color:var(--accent); box-shadow:0 0 12px var(--accent-glow), 0 0 24px color-mix(in srgb, var(--accent) 15%, transparent); transform:translateY(-1px); }
.btn:active { transform:translateY(0) scale(0.98); }
.btn:disabled { opacity:0.45; cursor:not-allowed; border-color:var(--border) !important; background:var(--surface-2) !important; color:var(--text-faint) !important; box-shadow:none !important; transform:none !important; }
.btn-accent {
  background:var(--accent); color:#04211c; border-color:var(--accent); font-weight:600;
  box-shadow:0 0 14px var(--accent-glow), 0 0 28px color-mix(in srgb, var(--accent) 20%, transparent);
}
.btn-accent:hover { background: color-mix(in srgb, var(--accent) 88%, white); box-shadow:0 0 20px var(--accent-glow-strong), 0 0 36px color-mix(in srgb, var(--accent) 30%, transparent); transform:translateY(-1px); }
.btn-sm { padding:6px 10px; font-size:11.5px; }
.empty-state { text-align:center; padding:60px 20px; color:var(--text-faint); }
.empty-state-title { font-family:var(--font-display); color:var(--text-dim); font-size:15px; margin-bottom:6px; }
.progress-track { height:6px; border-radius:4px; background:var(--surface-2); overflow:hidden; margin-top:8px; }
.progress-fill { height:100%; border-radius:4px; background:linear-gradient(90deg, var(--accent), var(--violet)); box-shadow:0 0 8px var(--accent-glow); }
.two-col { display:grid; grid-template-columns:1.4fr 1fr; gap:16px; }
@media (max-width: 900px) { .shell{grid-template-columns:1fr} .sidebar{display:none} .two-col{grid-template-columns:1fr} .content{padding:18px 16px 50px 16px} .lang-dropdown{width:260px; right:-40px} }
.field { margin-bottom:14px; }
.field label { display:block; font-size:12px; color:var(--text-dim); margin-bottom:6px; font-family:var(--font-mono); }
.field-help { display:block; color:var(--text-faint); font-size:11px; margin-top:5px; line-height:1.4; }
.node-create-toolbar { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:24px; padding:18px 20px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); }
.node-create-card { margin-bottom:24px; scroll-margin-top:86px; }
.node-create-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:18px; padding-bottom:16px; border-bottom:1px solid var(--border); }
.node-create-card[hidden] { display:none; }
@media (max-width:700px) { .node-create-toolbar, .node-create-card-head { align-items:stretch; flex-direction:column; } }
.check-row { display:flex; align-items:center; gap:9px; color:var(--text-dim); font-size:12.5px; margin:4px 0 18px; cursor:pointer; }
.check-row input { accent-color:var(--accent); width:15px; height:15px; }
.field input, .field select, .field textarea {
  width:100%; background:var(--surface-2); border:1px solid var(--border); color:var(--text);
  padding:9px 12px; border-radius:7px; font-family:var(--font-body); font-size:13px; transition: border-color .18s ease, box-shadow .18s ease;
}
.field input:focus, .field select:focus, .field textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-dim), 0 0 12px var(--accent-glow); }
.tag { display:inline-block; font-family:var(--font-mono); font-size:10.5px; padding:2px 8px; border-radius:20px; background:var(--violet-dim); color:var(--violet); }
.price-tag { display:inline-flex; align-items:center; gap:5px; font-family:var(--font-mono); font-size:12.5px; font-weight:600; color:var(--warn); background:var(--warn-dim); padding:4px 10px; border-radius:20px; white-space:nowrap; text-shadow:0 0 3px currentColor; }
.banner-warn { background:var(--warn-dim); border:1px solid rgba(255,176,32,0.35); color:var(--warn); padding:12px 16px; border-radius:var(--radius); font-size:13px; margin-bottom:18px; }
.banner-ok { background:var(--accent-dim); border:1px solid rgba(120,200,140,0.35); color:var(--accent); padding:12px 16px; border-radius:var(--radius); font-size:13px; margin-bottom:18px; }
.hero { display:grid; grid-template-columns:1fr 340px; gap:24px; margin-bottom:28px; align-items:start; }
.hero-greeting { font-family:var(--font-display); font-weight:700; font-size:34px; letter-spacing:-0.02em; margin-bottom:10px; }
.hero-sub { color:var(--text-dim); font-size:14.5px; }
.credit-hero-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:20px 22px; transition: transform .25s var(--ease-out-expo), border-color .25s ease; }
.credit-hero-card:hover { transform:translateY(-2px); border-color:color-mix(in srgb, var(--warn) 18%, var(--border)); }
.credit-hero-value { font-family:var(--font-display); font-size:34px; font-weight:700; color:var(--warn); display:flex; align-items:baseline; gap:8px; margin:6px 0 12px 0; text-shadow:0 0 6px currentColor, 0 0 14px currentColor; }
.credit-hero-value span { font-size:13px; font-weight:500; color:var(--text-dim); font-family:var(--font-body); text-shadow:none; }
.segment-bar { display:flex; gap:3px; margin-bottom:14px; }
.segment-bar i { flex:1; height:8px; border-radius:2px; background:var(--surface-2); font-style:normal; transition:background .3s ease; }
.segment-bar i.filled { background:var(--warn); box-shadow:0 0 6px color-mix(in srgb, var(--warn) 40%, transparent); }
.hero-note { font-size:12.5px; color:var(--text-dim); line-height:1.6; }
.hero-note strong { color:var(--text); font-weight:600; }
.quick-actions { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:28px; }
.quick-btn {
  display:flex; align-items:center; gap:8px; padding:11px 16px; border-radius:9px; font-size:13px; font-weight:600;
  border:1px solid var(--border); background:var(--surface); color:var(--text);
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s var(--ease-out-expo);
}
.quick-btn svg { width:16px; height:16px; transition:transform .2s var(--ease-out-expo); }
.quick-btn:hover { border-color:var(--accent); box-shadow:0 0 12px var(--accent-glow); transform:translateY(-2px); }
.quick-btn:hover svg { transform:scale(1.1); }
.quick-btn:active { transform:translateY(0) scale(0.98); }
.quick-btn.primary { background:var(--surface); border-color:var(--border); color:var(--text); box-shadow:none; }
.quick-btn.primary:hover { background:var(--surface); border-color:var(--accent); box-shadow:0 0 12px var(--accent-glow); transform:translateY(-2px); }
.empty-cta { text-align:center; padding:64px 20px; }
.empty-cta-title { font-family:var(--font-display); font-weight:600; font-size:16px; margin-bottom:8px; }
.empty-cta-sub { color:var(--text-dim); font-size:13.5px; line-height:1.6; margin-bottom:22px; }

/* ---- ACCENT PICKER ---- */
.accent-picker { background: transparent; border:none; border-radius:0; overflow:hidden; }
.accent-picker-header { display:flex; gap:12px; padding:18px 18px 14px 18px; border-bottom:none; background: transparent; }
.accent-icon { width:34px; height:34px; border-radius:8px; background: var(--surface-2); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--accent); box-shadow:0 0 12px var(--accent-glow); }
.accent-icon svg { width:18px; height:18px; }
.accent-title { font-family:var(--font-display); font-weight:600; font-size:14px; margin-bottom:2px; }
.accent-sub { font-size:12.5px; color:var(--text-dim); line-height:1.5; }
.accent-picker-body { display:grid; grid-template-columns: 1.6fr 0.9fr; gap:18px; padding:18px; }
.cp-sv { position:relative; width:100%; aspect-ratio: 1.6/1; border-radius:10px; overflow:hidden; cursor:crosshair; background: hsl(var(--cp-hue, 200), 100%, 50%); border:1px solid var(--border); }
.cp-sv-white { position:absolute; inset:0; background: linear-gradient(90deg, #fff, transparent); }
.cp-sv-black { position:absolute; inset:0; background: linear-gradient(0deg, #000, transparent); }
.cp-cursor { position:absolute; width:16px; height:16px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,0.6), 0 2px 6px rgba(0,0,0,0.4); transform:translate(-50%,-50%); pointer-events:none; z-index:2; }
.cp-hue-wrap { margin-top:12px; }
.cp-hue { position:relative; height:16px; border-radius:20px; background: linear-gradient(90deg, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%); border:1px solid var(--border); cursor:pointer; }
.cp-hue-cursor { position:absolute; top:50%; width:14px; height:20px; border-radius:6px; background:#fff; border:1px solid rgba(0,0,0,0.3); box-shadow:0 1px 4px rgba(0,0,0,0.4); transform:translate(-50%,-50%); pointer-events:none; }
.accent-picker-right { display:flex; flex-direction:column; gap:12px; }
.cp-preview { width:100%; height:46px; border-radius:8px; border:1px solid var(--border); background: var(--accent); box-shadow:0 0 16px var(--accent-glow) inset, 0 0 20px var(--accent-glow); }
.cp-field { display:flex; flex-direction:column; gap:4px; flex:1; }
.cp-field label { font-family:var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-faint); }
.cp-field input { width:100%; background:var(--surface-2); border:1px solid var(--border); color:var(--text); padding:8px 10px; border-radius:7px; font-family:var(--font-mono); font-size:12.5px; }
.cp-field input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-dim), 0 0 12px var(--accent-glow); }
.cp-rgb-row { display:flex; gap:8px; }
.cp-presets { padding:0 18px 18px 18px; }
.cp-presets-label { font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-faint); margin-bottom:10px; }
.cp-presets-grid { display:flex; gap:8px; flex-wrap:wrap; }
.cp-preset { width:28px; height:28px; border-radius:7px; border:2px solid transparent; cursor:pointer; transition: transform .18s var(--ease-out-expo), border-color .18s ease, box-shadow .18s ease; position:relative; }
.cp-preset:hover { transform: scale(1.12); }
.cp-preset.active { border-color:#fff; box-shadow:0 0 0 2px var(--bg), 0 0 0 4px var(--accent), 0 2px 8px rgba(0,0,0,0.4); }
@media (max-width: 700px) { .accent-picker-body { grid-template-columns:1fr; } }

/* ---- KONTO LANG ---- */
.konto-lang-section { margin-top:18px; }
.konto-lang-label { font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-faint); margin-bottom:8px; }
.konto-lang-custom { position:relative; }
.konto-lang-trigger {
  width:100%; display:flex; align-items:center; gap:10px; padding:10px 12px;
  background:var(--surface-2); border:1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); border-radius:8px;
  color:var(--text); font-size:13.5px; font-weight:500; cursor:pointer;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s var(--ease-out-expo);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 8%, transparent) inset;
}
.konto-lang-trigger:hover { border-color:var(--accent); box-shadow:0 0 12px var(--accent-glow); transform:translateY(-1px); }
.konto-lang-trigger:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-dim); }
.konto-lang-trigger-flag { font-size:18px; }
.konto-lang-trigger-name { flex:1; text-align:left; }
.konto-lang-trigger-chevron { width:14px; height:14px; opacity:0.6; transition: transform .2s ease; }
.konto-lang-custom.is-open .konto-lang-trigger-chevron { transform: rotate(180deg); }
.konto-lang-dropdown {
  position:absolute; top: calc(100% + 6px); left:0; right:0;
  background:#0f141c; border:1px solid var(--border); border-radius:10px;
  box-shadow:0 12px 32px rgba(0,0,0,0.5); z-index:50;
  max-height:280px; overflow:hidden;
  opacity:0; transform:translateY(-6px) scale(0.98); pointer-events:none;
  transition: opacity .18s var(--ease-out-expo), transform .18s var(--ease-out-expo);
}
.konto-lang-custom.is-open .konto-lang-dropdown { opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.konto-lang-list { max-height:260px; overflow-y:auto; padding:6px; }
.konto-lang-option { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:7px; cursor:pointer; transition: background .15s ease; }
.konto-lang-option:hover { background:var(--surface-2); }
.konto-lang-option.active { background: var(--accent); color:#04211c; border:1px solid var(--accent); box-shadow:0 0 12px var(--accent-glow); }
.konto-lang-option.active .konto-lang-option-name { color:#04211c; font-weight:700; }
.konto-lang-option.active .konto-lang-option-sub { color: rgba(4,33,28,0.7); }
.konto-lang-option-flag { font-size:18px; width:24px; text-align:center; }
.konto-lang-option-name { font-size:13px; font-weight:500; flex:1; }
.konto-lang-option-sub { font-size:11px; color:var(--text-faint); font-family:var(--font-mono); }
.settings-save-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:20px; padding:14px 0 0 0; background:transparent; border:none; }
.settings-save-info { font-size:12.5px; color:var(--text-dim); }
.settings-save-info strong { color:var(--text); }
.card-danger { background:var(--surface); border:1px solid rgba(255,92,92,0.35); border-radius:var(--radius); padding:18px; }
.card-danger .section-title { color:var(--danger); margin-top:0; }
.btn-danger { background:var(--danger-dim); border-color:rgba(255,92,92,0.4); color:var(--danger); font-weight:600; transition: border-color .18s ease, box-shadow .18s ease, transform .18s var(--ease-out-expo); }
.btn-danger:hover { border-color:var(--danger); box-shadow:0 0 10px rgba(255, 92, 92, 0.35); transform:translateY(-1px); }
.copy-row { display:flex; gap:8px; align-items:center; }
.copy-row input { flex:1; background:var(--surface-2); border:1px solid var(--border); color:var(--accent); font-family:var(--font-mono); font-size:12.5px; padding:9px 12px; border-radius:7px; }
.copy-icon-btn { border:1px solid var(--border); background:var(--surface-2); color:var(--text-dim); width:36px; height:36px; border-radius:7px; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all .18s ease; }
.copy-icon-btn:hover { border-color:var(--accent); color:var(--accent); transform:translateY(-1px); }
.copy-icon-btn svg { width:15px; height:15px; }
.stat-inline-row { display:grid; grid-template-columns:repeat(4, 1fr); background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.stat-inline { padding:16px 20px; border-right:1px solid var(--border); transition:background .2s ease; }
.stat-inline:hover { background:color-mix(in srgb, var(--surface-2) 60%, transparent); }
.stat-inline:last-child { border-right:none; }
.stat-inline-label { font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:0.05em; color:var(--text-faint); margin-bottom:6px; }
.stat-inline-value { font-family:var(--font-display); font-size:22px; font-weight:600; color:var(--warn); text-shadow:0 0 5px currentColor, 0 0 10px currentColor; }

body.is-navigating .sidebar { pointer-events:none; }
body.is-navigating .nav-item:not(.active) { opacity:0.55; }
body.is-navigating .content { pointer-events:none; }

/* ---- LEADERBOARD ---- */
.lb-tabs { display:flex; gap:8px; margin-bottom:20px; background:var(--surface); border:1px solid var(--border); padding:4px; border-radius:10px; width:fit-content; }
.lb-tab { padding:8px 16px; border-radius:7px; font-size:13px; font-weight:600; color:var(--text-dim); cursor:pointer; border:1px solid transparent; transition: all .2s ease; font-family:var(--font-display); }
.lb-tab:hover { color:var(--text); background:var(--surface-2); }
.lb-tab.active { background:var(--accent); color:#04211c; border-color:var(--accent); box-shadow:0 0 12px var(--accent-glow); }
.lb-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:24px; }
.lb-stat { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:14px 16px; }
.lb-stat-label { font-family:var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-faint); margin-bottom:6px; }
.lb-stat-value { font-family:var(--font-display); font-size:22px; font-weight:700; }
.lb-podium { display:grid; grid-template-columns:1fr 1.15fr 1fr; gap:14px; align-items:end; margin:0 auto 28px auto; max-width:800px; justify-content:center; }
.lb-podium-card { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:18px; text-align:center; position:relative; transition: transform .22s ease-out, box-shadow .22s ease-out, border-color .22s ease; }
.lb-podium-card:hover { transform: translateY(-6px); box-shadow:0 12px 30px rgba(0,0,0,0.4); }
.lb-podium-card.first { border-color: color-mix(in srgb, var(--warn) 45%, var(--border)); padding-top:26px; padding-bottom:22px; transform: scale(1.05); z-index:2; }
.lb-podium-card.first:hover { transform: scale(1.05) translateY(-6px); }
.lb-podium-card.second { border-color: color-mix(in srgb, #8a93a6 30%, var(--border)); }
.lb-podium-card.third { border-color: color-mix(in srgb, #cd7f32 30%, var(--border)); }
.lb-crown { position:absolute; top:-12px; left:50%; transform:translateX(-50%); font-size:20px; }
.lb-podium-rank { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; font-size:14px; margin:0 auto 10px auto; }
.lb-podium-rank.r1 { background:var(--warn); color:#000; box-shadow:0 0 12px color-mix(in srgb, var(--warn) 50%, transparent); }
.lb-podium-rank.r2 { background:var(--surface-2); border:1px solid var(--border); color:var(--text-dim); }
.lb-podium-rank.r3 { background: #3a2a14; border:1px solid #5a3a1a; color:#ffb020; }
.lb-podium-avatar { width:52px; height:52px; border-radius:12px; background:var(--surface-2); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:16px; margin:0 auto 10px auto; }
.lb-podium-name { font-weight:600; font-size:14px; margin-bottom:4px; }
.lb-podium-sub { font-family:var(--font-mono); font-size:11px; color:var(--text-faint); }
.lb-podium-value { font-family:var(--font-display); font-size:18px; font-weight:700; margin-top:8px; color:var(--accent); }
.lb-podium-card.first .lb-podium-value { color:var(--warn); text-shadow:0 0 8px color-mix(in srgb, var(--warn) 50%, transparent); }
.lb-list-rank { font-family:var(--font-mono); font-size:12px; font-weight:700; width:28px; text-align:center; color:var(--text-faint); }
.lb-list-rank.top { color:var(--text); }
.lb-row-me { background: color-mix(in srgb, var(--accent) 10%, var(--surface)) !important; border:1px solid color-mix(in srgb, var(--accent) 30%, var(--border)) !important; }
.lb-badge { display:inline-flex; align-items:center; gap:4px; font-family:var(--font-mono); font-size:10px; padding:2px 7px; border-radius:20px; background:var(--surface-2); border:1px solid var(--border); color:var(--text-faint); }
.lb-badge.gold { background:var(--warn-dim); border-color:rgba(255,176,32,0.3); color:var(--warn); }
@media(max-width:700px){
  .lb-podium{grid-template-columns:1fr; max-width:360px; gap:12px; align-items:stretch; }
  .lb-podium-card.second{order:1;}
  .lb-podium-card.first{order:2; transform:none; margin:4px 0;}
  .lb-podium-card.first:hover{transform:translateY(-4px);}
  .lb-podium-card.third{order:3;}
  .lb-stats{grid-template-columns:1fr;}
}

/* ---- Konto: aufklappbare Unterpunkte, Benachrichtigung & API ---- */
.konto-subnav[hidden], .konto-panel[hidden], .konto-key-list[hidden],
.konto-empty[hidden], .sidebar-backdrop[hidden] { display:none !important; }
.konto-nav-chevron { width:14px; height:14px; margin-left:auto; flex-shrink:0; transition:transform .2s ease; }
.konto-nav-parent[aria-expanded="true"] .konto-nav-chevron { transform:rotate(90deg); }
.konto-nav-parent.konto-nav-current { color:var(--text); }
.konto-nav-parent.konto-nav-current > .nav-icon { color:var(--accent); }
.konto-subnav { position:relative; margin:3px 4px 6px 18px; padding:0 0 0 12px; }
.konto-subnav::before { content:""; position:absolute; left:0; top:0; bottom:20px; width:1px; background:var(--border); }
.konto-subnav .nav-item { font-size:12.5px; padding:10px 8px; gap:8px; animation:none !important; transform:none !important; }
.konto-subnav .nav-item::before { content:""; position:absolute; left:-12px; top:50%; width:12px; height:1px; background:var(--border); }
.konto-subnav .nav-icon { width:15px; height:15px; }
.konto-subnav .nav-item.active { color:var(--accent); }
.konto-nav-parent:focus-visible, .konto-subnav a:focus-visible,
.konto-page button:focus-visible, .mobile-nav-toggle:focus-visible,
.mobile-sidebar-close:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.konto-page { min-width:0; }
.konto-panel { outline:none; }
.konto-panel:not([data-konto-panel="profil"]) { max-width:1000px; margin:0 auto; }
.konto-section-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin:4px 0 26px; }
.konto-eyebrow { color:var(--text-faint); font-family:var(--font-mono); font-size:10px; letter-spacing:.13em; margin:0 0 9px; text-transform:uppercase; }
.konto-panel-title { font-family:var(--font-display); font-size:28px; font-weight:600; letter-spacing:-.035em; line-height:1.2; margin:0 0 10px; }
.konto-section-description { color:var(--text-dim); font-size:13px; line-height:1.65; margin:0; }
.konto-demo-badge { display:inline-flex; align-items:center; gap:6px; flex-shrink:0; padding:6px 9px; margin-top:4px; border:1px solid var(--border); background:var(--surface); color:var(--text-dim); border-radius:6px; font:10px var(--font-mono); }
.konto-demo-badge svg { width:13px; height:13px; }
.card.konto-settings-card { padding:0 !important; margin-bottom:18px; overflow:hidden; cursor:default !important; transform:none !important; will-change:auto !important; }
.card.konto-settings-card:hover { transform:none !important; box-shadow:none !important; border-color:var(--border) !important; }
.konto-card-heading { padding:23px 24px; display:flex; align-items:center; gap:14px; border-bottom:1px solid var(--border); }
.konto-card-icon { display:flex; align-items:center; justify-content:center; flex:0 0 40px; width:40px; height:40px; border:1px solid color-mix(in srgb, var(--accent) 24%, var(--border)); background:color-mix(in srgb, var(--accent) 8%, var(--surface)); color:var(--accent); border-radius:10px; }
.konto-card-icon svg { width:20px; height:20px; }
.konto-card-heading h2 { font-family:var(--font-display); font-size:16px; font-weight:600; margin:0 0 5px; letter-spacing:-.015em; }
.konto-card-heading p { margin:0; font-size:12px; color:var(--text-dim); line-height:1.6; overflow-wrap:anywhere; }
.konto-card-heading strong { font-weight:500; color:var(--text); }
.konto-preferences { margin:0; padding:0 24px; border:0; min-width:0; }
.konto-preference { display:flex; align-items:center; gap:14px; padding:23px 0; cursor:pointer; border-bottom:1px solid var(--border); }
.konto-preference:last-child { border-bottom:0; }
.konto-preference-icon { width:34px; height:34px; display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--text-dim); background:var(--surface-2); border-radius:8px; }
.konto-preference-icon svg { width:17px; height:17px; }
.konto-preference-text { display:block; flex:1; min-width:0; }
.konto-preference-title { display:block; font-size:13px; font-weight:600; margin-bottom:6px; }
.konto-preference-description { display:block; color:var(--text-dim); font-size:12px; line-height:1.6; }
.konto-switch { position:relative; width:40px; height:24px; flex:0 0 40px; margin-left:16px; }
.konto-switch input { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; z-index:1; }
.konto-switch-track { display:block; width:100%; height:100%; border:1px solid #444d5e; background:var(--surface-2); border-radius:20px; transition:background .18s ease, border-color .18s ease; }
.konto-switch-track::after { content:""; position:absolute; left:4px; top:4px; width:16px; height:16px; border-radius:50%; background:var(--text-dim); box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .18s ease, background .18s ease; }
.konto-switch input:checked + .konto-switch-track { border-color:var(--accent); background:var(--accent); }
.konto-switch input:checked + .konto-switch-track::after { transform:translateX(16px); background:#04211c; }
.konto-switch input:focus-visible + .konto-switch-track { outline:2px solid var(--accent); outline-offset:4px; }
.konto-card-footer { padding:18px 24px; display:flex; justify-content:space-between; align-items:center; gap:16px; background:color-mix(in srgb, var(--surface-2) 40%, var(--surface)); border-top:1px solid var(--border); }
.konto-status { margin:0; color:var(--text-dim); font-size:11.5px; line-height:1.6; }
.konto-status[data-tone="success"] { color:var(--accent); }
.konto-status[data-tone="error"] { color:var(--danger); }
.konto-status[data-tone="warning"] { color:var(--warn); }
.konto-footer-actions { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.konto-panel:not([data-konto-panel="profil"]) .btn { min-height:36px; font-size:12px; display:inline-flex; align-items:center; justify-content:center; gap:7px; }
.konto-panel:not([data-konto-panel="profil"]) .btn svg { width:15px; height:15px; flex-shrink:0; }
.konto-panel:not([data-konto-panel="profil"]) .btn-accent { box-shadow:none; }
.konto-demo-note { display:flex; align-items:flex-start; gap:9px; color:var(--text-dim); font-size:11.5px; line-height:1.7; margin:16px 2px 0; }
.konto-demo-note svg { width:15px; height:15px; margin-top:2px; flex-shrink:0; color:var(--text-faint); }
.konto-demo-note p { margin:0; }
.konto-demo-notice { margin:0 0 20px; padding:12px 15px; background:color-mix(in srgb, var(--warn) 5%, var(--surface)); border:1px solid color-mix(in srgb, var(--warn) 20%, var(--border)); border-radius:8px; }
.konto-demo-notice svg { color:var(--warn); }
.konto-demo-notice strong { color:var(--text); font-weight:500; }
.konto-api-create-body { padding:22px 24px; }
.konto-api-create-row { display:flex; align-items:flex-end; gap:12px; }
.konto-input-field { flex:1; min-width:0; }
.konto-input-label { display:block; font-size:12px; font-weight:500; margin-bottom:8px; }
.konto-text-input { width:100%; min-width:0; padding:11px 12px; height:40px; border:1px solid var(--border); border-radius:7px; background:var(--surface-2); color:var(--text); font:13px var(--font-body); }
.konto-text-input::placeholder { color:var(--text-faint); }
.konto-text-input:focus { outline:2px solid color-mix(in srgb, var(--accent) 35%, transparent); outline-offset:1px; border-color:var(--accent); }
.konto-api-create-row .btn { height:40px; white-space:nowrap; }
.konto-input-hint { font-size:11px; color:var(--text-dim); line-height:1.6; margin:10px 0 0; }
.konto-api-create-body > .konto-status { margin-top:12px; }
.konto-api-create-body > .konto-status:empty { display:none; }
.konto-key-list-heading { justify-content:space-between; }
.konto-key-count { color:var(--text-dim); background:var(--surface-2); border:1px solid var(--border); padding:4px 8px; border-radius:5px; font:11px var(--font-mono); white-space:nowrap; }
.konto-empty { padding:38px 24px 34px; text-align:center; }
.konto-empty-icon { width:46px; height:46px; margin:0 auto 15px; display:flex; align-items:center; justify-content:center; border:1px solid var(--border); border-radius:12px; background:var(--surface-2); color:var(--text-dim); }
.konto-empty-icon svg { width:22px; height:22px; }
.konto-empty h3 { font-family:var(--font-display); font-size:14px; font-weight:500; margin:0 0 8px; }
.konto-empty p { font-size:12px; color:var(--text-dim); margin:0; line-height:1.6; }
.konto-key-list { list-style:none; padding:0 24px; margin:0; }
.konto-key-row { display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:20px; padding:19px 0; border-bottom:1px solid var(--border); }
.konto-key-row:last-child { border-bottom:0; }
.konto-key-main { min-width:0; }
.konto-key-name { display:block; color:var(--text); font-size:12.5px; font-weight:500; margin-bottom:7px; overflow-wrap:anywhere; }
.konto-key-prefix { font:11px var(--font-mono); color:var(--text-dim); }
.konto-key-date { font:10px var(--font-mono); color:var(--text-dim); line-height:1.7; }
.konto-key-date span { display:block; color:var(--text-faint); font:10px var(--font-body); }
.konto-page .konto-key-delete { color:var(--danger); background:transparent; border-color:transparent; box-shadow:none; }
.konto-page .konto-key-delete:hover { border-color:color-mix(in srgb, var(--danger) 30%, var(--border)); background:var(--danger-dim); }
.konto-dialog { background:var(--surface); color:var(--text); padding:26px; width:calc(100% - 32px); max-width:510px; max-height:calc(100dvh - 40px); overflow-y:auto; border:1px solid var(--border); border-radius:14px; box-shadow:0 28px 90px rgba(0,0,0,.55); }
.konto-dialog::backdrop { background:rgba(0,0,0,.72); backdrop-filter:blur(5px); }
.konto-dialog-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:20px; }
.konto-dialog-close { display:flex; justify-content:center; align-items:center; color:var(--text-dim); background:transparent; border:1px solid transparent; width:32px; height:32px; border-radius:6px; }
.konto-dialog-close:hover { color:var(--text); border-color:var(--border); }
.konto-dialog-close svg { width:18px; height:18px; }
.konto-dialog h2 { margin:0 0 10px; font:600 21px var(--font-display); letter-spacing:-.025em; }
.konto-dialog-description { font-size:12.5px; color:var(--text-dim); line-height:1.7; margin:0 0 20px; overflow-wrap:anywhere; }
.konto-dialog-description strong { color:var(--text); font-weight:500; }
.konto-secret { display:block; resize:none; width:100%; padding:13px; border:1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); border-radius:8px; background:var(--bg); color:var(--accent); font:12px/1.8 var(--font-mono); margin-bottom:13px; word-break:break-all; }
.konto-secret:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.konto-dialog-actions { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:8px; margin-top:24px; }
.konto-dialog .konto-status { margin-top:12px; }
.konto-dialog .konto-demo-note { font-size:11px; }
.konto-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; }
.konto-crumb-parent { color:var(--text-dim); }

/* Auch auf kleinen Displays bleiben die neuen Unterpunkte erreichbar. */
.mobile-nav-toggle, .mobile-sidebar-close { display:none; }
.sidebar-backdrop { position:fixed; inset:0; z-index:90; border:0; background:rgba(0,0,0,.6); backdrop-filter:blur(3px); }
@media (max-width:900px) {
  .mobile-nav-toggle, .mobile-sidebar-close { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; width:34px; height:34px; padding:7px; color:var(--text-dim); border:1px solid var(--border); border-radius:7px; background:var(--surface); }
  .mobile-nav-toggle svg, .mobile-sidebar-close svg { width:18px; height:18px; }
  .mobile-sidebar-close { width:28px; height:28px; margin-left:auto; padding:5px; }
  .sidebar { display:flex; position:fixed; inset:0 auto 0 0; width:280px; max-width:calc(100vw - 44px); height:100dvh; z-index:100; visibility:hidden; transform:translateX(-100%) !important; animation:none !important; }
  .sidebar.mobile-open { visibility:visible; transform:none !important; }
  body.mobile-nav-open { overflow:hidden; }
  .topbar { padding:14px 16px; gap:10px; }
  .breadcrumb { flex:1; min-width:0; flex-wrap:wrap; gap:5px; font-size:15px; }
  .crumb-sep { width:12px; height:12px; }
  .topbar-right { gap:6px; }
  .topbar-right > .avatar { display:none; }
  .credit-pill { padding:5px 8px; font-size:10px; white-space:nowrap; }
}
@media (max-width:600px) {
  .konto-section-heading { flex-direction:column; gap:12px; margin-bottom:22px; }
  .konto-panel-title { font-size:26px; overflow-wrap:anywhere; }
  .konto-demo-badge { margin-top:0; }
  .konto-card-heading { padding:19px 17px; align-items:flex-start; }
  .konto-preferences, .konto-key-list { padding:0 17px; }
  .konto-preference { padding:21px 0; gap:11px; }
  .konto-preference-icon { display:none; }
  .konto-switch { margin-left:8px; }
  .konto-card-footer { padding:17px; align-items:stretch; flex-direction:column; }
  .konto-footer-actions { justify-content:flex-end; flex-wrap:wrap; }
  .konto-footer-actions .btn-accent { flex:1; }
  .konto-api-create-body { padding:19px 17px; }
  .konto-api-create-row { flex-direction:column; align-items:stretch; }
  .konto-key-row { grid-template-columns:minmax(0,1fr) auto; gap:10px; }
  .konto-key-main { grid-column:1; grid-row:1; }
  .konto-key-date { grid-column:1; grid-row:2; }
  .konto-key-date span { display:inline; margin-right:6px; }
  .konto-key-delete { grid-column:2; grid-row:1 / span 2; }
  .konto-dialog { padding:20px; }
  .konto-dialog-actions { flex-direction:column; }
  .konto-dialog-actions .btn { width:100%; }
  .konto-key-list-heading { align-items:center; }
}
@media (prefers-reduced-motion:reduce) {
  .konto-nav-chevron, .konto-switch-track, .konto-switch-track::after { transition:none; }
  .konto-page .konto-settings-card, .konto-subnav .nav-item { animation:none !important; }
}

/* ---- Discord Bot: erstellte Server unter dem aufklappbaren Hauptpunkt ---- */
.discord-subnav[hidden] { display:none !important; }
.discord-nav-chevron { width:14px; height:14px; margin-left:auto; flex-shrink:0; transition:transform .2s ease; }
.discord-nav-parent[aria-expanded="true"] .discord-nav-chevron { transform:rotate(90deg); }
.discord-subnav { position:relative; margin:3px 4px 6px 18px; padding:0 0 0 12px; }
.discord-subnav::before { content:""; position:absolute; left:0; top:0; bottom:20px; width:1px; background:var(--border); }
.discord-subnav .nav-item { min-width:0; font-size:12.5px; padding:10px 8px; gap:8px; animation:none !important; transform:none !important; }
.discord-subnav .nav-item::before, .discord-subnav-empty::before { content:""; position:absolute; left:-12px; top:50%; width:12px; height:1px; background:var(--border); }
.discord-subnav .nav-icon { width:15px; height:15px; }
.discord-subnav .nav-text { min-width:0; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.discord-subnav .nav-item.active { color:var(--accent); }
.discord-subnav-empty { position:relative; margin:0; padding:10px 8px; color:var(--text-dim); font-size:11px; line-height:20px; }
.discord-nav-parent:focus-visible, .discord-subnav a:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
@media (prefers-reduced-motion:reduce) { .discord-nav-chevron { transition:none; } }