/* ═══════════════════════════════════════════════════════════════
   VIANA ASSETS — Component Styles  v3.0
   Cards · Buttons · Forms · Tables · Badges · Modals · Toasts
═══════════════════════════════════════════════════════════════ */

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2-5) var(--space-5);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-normal);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  transition:
    background var(--duration-fast) var(--ease-default),
    border-color var(--duration-fast) var(--ease-default),
    color var(--duration-fast) var(--ease-default),
    box-shadow var(--duration-fast) var(--ease-default),
    transform var(--duration-fast) var(--ease-default);
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  position: relative;
  overflow: hidden;
}
.btn:active:not(:disabled) { transform: scale(0.97); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Primary */
.btn-primary {
  background: var(--color-accent);
  color: var(--color-text-on-color);
  border-color: var(--color-accent);
  box-shadow: 0 2px 12px rgba(124,92,252,0.2);
}
.btn-primary:hover:not(:disabled) {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  box-shadow: var(--shadow-accent);
}

/* Gold */
.btn-gold {
  background: var(--color-gold-muted);
  color: var(--color-gold);
  border-color: rgba(200,169,110,0.2);
}
.btn-gold:hover:not(:disabled) {
  background: rgba(200,169,110,0.18);
  border-color: rgba(200,169,110,0.35);
}

/* Secondary (outlined) */
.btn-secondary {
  background: transparent;
  color: var(--color-text-primary);
  border-color: var(--color-border-strong);
}
.btn-secondary:hover:not(:disabled) {
  background: var(--color-bg-elevated);
  border-color: rgba(255,255,255,0.18);
}

/* Ghost */
.btn-ghost {
  background: transparent;
  color: var(--color-text-secondary);
  border-color: transparent;
}
.btn-ghost:hover:not(:disabled) {
  background: var(--color-bg-elevated);
  color: var(--color-text-primary);
}

/* Danger */
.btn-danger {
  background: var(--color-danger-muted);
  color: var(--color-danger);
  border-color: rgba(240,64,96,0.2);
}
.btn-danger:hover:not(:disabled) {
  background: rgba(240,64,96,0.2);
  border-color: rgba(240,64,96,0.35);
}

/* Success */
.btn-success {
  background: var(--color-success-muted);
  color: var(--color-success);
  border-color: rgba(0,212,160,0.2);
}

/* Sizes */
.btn-sm  { padding: var(--space-1-5) var(--space-3); font-size: var(--text-xs); border-radius: var(--radius-sm); }
.btn-lg  { padding: var(--space-3-5) var(--space-7); font-size: var(--text-md); border-radius: var(--radius-lg); }
.btn-xl  { padding: var(--space-4) var(--space-9); font-size: var(--text-lg); border-radius: var(--radius-lg); }
.btn-icon { padding: var(--space-2-5); border-radius: var(--radius-md); min-width: 36px; min-height: 36px; }
.btn-full { width: 100%; }

/* Loading state */
.btn.loading { pointer-events: none; }
.btn.loading::after {
  content: '';
  position: absolute;
  width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,0.25);
  border-top-color: var(--color-text-on-color);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

/* ── Cards ───────────────────────────────────────────────── */
.card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-card);
  transition: border-color var(--duration-normal) var(--ease-default);
}
.card:hover { border-color: var(--color-border-strong); }
.card-sm { padding: var(--space-4); border-radius: var(--radius-lg); }
.card-lg { padding: var(--space-8); border-radius: var(--radius-2xl); }

/* Glass effect */
.card-glass {
  background: rgba(20, 20, 31, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.07);
}

/* Accent border variants */
.card-accent { border-color: var(--color-accent-muted); }
.card-gold   { border-color: rgba(200,169,110,0.2); }

/* ── KPI Cards ───────────────────────────────────────────── */
.kpi-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-5) var(--space-6);
  box-shadow: var(--shadow-card);
  transition: all var(--duration-normal) var(--ease-default);
  position: relative;
  overflow: hidden;
}
.kpi-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--kpi-color, var(--color-accent)), transparent);
  opacity: 0.5;
}
.kpi-card .kpi-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}
.kpi-card .kpi-value {
  font-family: var(--font-mono);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--kpi-color, var(--color-text-primary));
  line-height: 1;
  letter-spacing: var(--tracking-tight);
}
.kpi-card .kpi-sub {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-1-5);
}

/* KPI Color Variants */
.kpi-card.kpi-gold    { --kpi-color: var(--color-gold); }
.kpi-card.kpi-accent  { --kpi-color: var(--color-accent); }
.kpi-card.kpi-success { --kpi-color: var(--color-success); }
.kpi-card.kpi-danger  { --kpi-color: var(--color-danger); }
.kpi-card.kpi-warning { --kpi-color: var(--color-warning); }
.kpi-card.kpi-info    { --kpi-color: var(--color-info); }

/* ── Form Elements ───────────────────────────────────────── */
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5);
}

.form-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-text-secondary);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.form-input, .form-select, .form-textarea {
  width: 100%;
  padding: var(--space-2-5) var(--space-3-5);
  background: var(--color-bg-input);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  transition:
    border-color var(--duration-fast) var(--ease-default),
    background var(--duration-fast) var(--ease-default),
    box-shadow var(--duration-fast) var(--ease-default);
  outline: none;
  -webkit-appearance: none;
}
.form-input::placeholder, .form-textarea::placeholder {
  color: var(--color-text-muted);
}
.form-input:hover, .form-select:hover, .form-textarea:hover {
  border-color: rgba(255,255,255,0.18);
  background: var(--color-bg-input-focus);
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--color-border-focus);
  background: var(--color-bg-input-focus);
  box-shadow: 0 0 0 3px var(--color-accent-glow);
}
.form-input.mono {
  font-family: var(--font-mono);
  letter-spacing: var(--tracking-normal);
}

.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238b8aab' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  padding-right: var(--space-9);
  cursor: pointer;
}

.form-textarea {
  resize: vertical;
  min-height: 80px;
  line-height: var(--leading-relaxed);
}

/* Checkbox & Toggle */
.form-checkbox {
  width: 16px; height: 16px;
  background: var(--color-bg-input);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-xs);
  cursor: pointer;
  accent-color: var(--color-accent);
}

.toggle {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
  flex-shrink: 0;
}
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle-track {
  position: absolute;
  inset: 0;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-full);
  transition: all var(--duration-normal) var(--ease-default);
  cursor: pointer;
}
.toggle-track::before {
  content: '';
  position: absolute;
  width: 14px; height: 14px;
  left: 3px; top: 50%;
  transform: translateY(-50%);
  background: var(--color-text-muted);
  border-radius: 50%;
  transition: all var(--duration-normal) var(--ease-spring);
}
.toggle input:checked + .toggle-track {
  background: var(--color-accent-muted);
  border-color: var(--color-accent);
}
.toggle input:checked + .toggle-track::before {
  transform: translateX(18px) translateY(-50%);
  background: var(--color-accent);
}

/* Range Input */
.form-range {
  -webkit-appearance: none;
  width: 100%;
  height: 4px;
  background: var(--color-bg-elevated);
  border-radius: var(--radius-full);
  outline: none;
}
.form-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px; height: 18px;
  background: var(--color-accent);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(124,92,252,0.4);
  transition: transform var(--duration-fast);
}
.form-range::-webkit-slider-thumb:hover { transform: scale(1.15); }

/* Form error */
.form-error {
  font-size: var(--text-xs);
  color: var(--color-danger);
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.form-hint {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* ── Tables ──────────────────────────────────────────────── */
.table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.table thead {
  background: var(--color-bg-elevated);
  position: sticky;
  top: 0;
  z-index: var(--z-raised);
}
.table thead th {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-text-secondary);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid var(--color-border);
}
.table tbody tr {
  border-bottom: 1px solid var(--color-border);
  transition: background var(--duration-fast) var(--ease-default);
}
.table tbody tr:last-child { border-bottom: none; }
.table tbody tr:hover { background: var(--color-bg-elevated); }
.table tbody td {
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  white-space: nowrap;
}
.table tbody td.text-cell {
  font-family: var(--font-sans);
}

/* Table cell color variants */
.td-pos  { color: var(--color-success); }
.td-neg  { color: var(--color-danger); }
.td-gold { color: var(--color-gold); }
.td-accent { color: var(--color-accent); }
.td-muted  { color: var(--color-text-muted); }

/* ── Badges ──────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-0-5) var(--space-2-5);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border-radius: var(--radius-full);
  border: 1px solid transparent;
}
.badge-accent  { background: var(--color-accent-muted); color: var(--color-accent); border-color: rgba(124,92,252,0.2); }
.badge-gold    { background: var(--color-gold-muted); color: var(--color-gold); border-color: rgba(200,169,110,0.2); }
.badge-success { background: var(--color-success-muted); color: var(--color-success); border-color: rgba(0,212,160,0.2); }
.badge-danger  { background: var(--color-danger-muted); color: var(--color-danger); border-color: rgba(240,64,96,0.2); }
.badge-warning { background: var(--color-warning-muted); color: var(--color-warning); border-color: rgba(245,158,11,0.2); }
.badge-info    { background: var(--color-info-muted); color: var(--color-info); border-color: rgba(59,158,255,0.2); }
.badge-muted   { background: var(--color-bg-elevated); color: var(--color-text-secondary); border-color: var(--color-border); }

/* ── Modals ──────────────────────────────────────────────── */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: var(--color-bg-overlay);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: var(--z-overlay);
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-default);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}
.modal-backdrop.open { opacity: 1; }

.modal {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-modal);
  width: 100%;
  max-width: 560px;
  max-height: 90dvh;
  overflow-y: auto;
  transform: translateY(16px) scale(0.98);
  transition: transform var(--duration-slow) var(--ease-spring);
}
.modal-backdrop.open .modal { transform: translateY(0) scale(1); }

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-6);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  background: var(--color-bg-elevated);
  z-index: 1;
}
.modal-title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
}
.modal-body  { padding: var(--space-6); }
.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-border);
}

/* ── Toasts ──────────────────────────────────────────────── */
#toast-container {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: flex-end;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
  max-width: 360px;
  pointer-events: all;
  transform: translateX(20px);
  opacity: 0;
  transition: all var(--duration-normal) var(--ease-spring);
}
.toast.show { transform: translateX(0); opacity: 1; }
.toast.success { border-left: 3px solid var(--color-success); }
.toast.error   { border-left: 3px solid var(--color-danger); }
.toast.info    { border-left: 3px solid var(--color-accent); }
.toast.warning { border-left: 3px solid var(--color-warning); }

/* ── Dividers ────────────────────────────────────────────── */
.divider {
  height: 1px;
  background: var(--color-border);
  margin: var(--space-4) 0;
}
.divider-text {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  margin: var(--space-5) 0;
}
.divider-text::before, .divider-text::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

/* ── Loading States ──────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, var(--color-bg-elevated) 25%, var(--color-bg-card-hover) 50%, var(--color-bg-elevated) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
}

.spinner {
  width: 20px; height: 20px;
  border: 2px solid var(--color-border-strong);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

/* ── Info Box ────────────────────────────────────────────── */
.info-box {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
}
.info-box.accent { border-color: var(--color-accent-muted); background: var(--color-accent-muted); color: var(--color-text-primary); }
.info-box.gold   { border-color: rgba(200,169,110,0.2); background: var(--color-gold-muted); }
.info-box.success{ border-color: rgba(0,212,160,0.2); background: var(--color-success-muted); }
.info-box.danger { border-color: rgba(240,64,96,0.2); background: var(--color-danger-muted); }

/* ── Sync Indicator ──────────────────────────────────────── */
.sync-indicator {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.sync-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-success);
  flex-shrink: 0;
}
.sync-dot.syncing {
  background: var(--color-warning);
  animation: pulse 1s ease-in-out infinite;
}
.sync-dot.error { background: var(--color-danger); }

/* ── Animations ──────────────────────────────────────────── */
@keyframes spin    { to { transform: rotate(360deg); } }
@keyframes pulse   { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
@keyframes shimmer { to { background-position: -200% 0; } }
@keyframes fadeIn  { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

.animate-fade-in { animation: fadeIn var(--duration-normal) var(--ease-out) both; }

/* ── Table Cell Helpers (generisch, Feature-übergreifend) ──── */
.td-sub       { font-size: 10px; color: var(--color-text-muted); font-family: var(--font-sans); }
.td-semibold  { font-weight: 600; font-family: var(--font-sans); }
.td-small     { font-size: 10px; }
.td-gold      { color: var(--color-gold); }
.td-accent    { color: var(--color-accent); }
.td-pos       { color: var(--color-success); }
.td-neg       { color: var(--color-danger); }
.td-muted     { color: var(--color-text-muted); }
.td-text      { font-family: var(--font-sans); }
.highlight-row { background: rgba(200,169,110,0.06) !important; }
.highlight-row:hover { background: rgba(200,169,110,0.1) !important; }
.clickable-row { cursor: pointer; }
.clickable-row:hover td { background: var(--color-bg-elevated); }

/* ── KPI Card Farbvarianten (generisch) ────────────────────── */
.kpi-card { position: relative; }
.kpi-card.gold   { --kpi-accent: var(--color-gold);    }
.kpi-card.green  { --kpi-accent: var(--color-success);  }
.kpi-card.red    { --kpi-accent: var(--color-danger);   }
.kpi-card.blue   { --kpi-accent: var(--color-info);     }
.kpi-card.purple { --kpi-accent: var(--color-accent);   }
.kpi-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--kpi-accent, var(--color-accent)), transparent);
  opacity: 0.6;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.kpi-gold    { color: var(--color-gold)    !important; }
.kpi-green   { color: var(--color-success) !important; }
.kpi-red     { color: var(--color-danger)  !important; }
.kpi-accent  { color: var(--color-accent)  !important; }
.kpi-trend {
  position: absolute; top: 14px; right: 14px;
  font-size: 10px; font-weight: 700;
  padding: 2px 8px; border-radius: 99px;
}
.kpi-trend.up   { background: var(--color-success-muted); color: var(--color-success); }
.kpi-trend.down { background: var(--color-danger-muted);  color: var(--color-danger);  }

/* ── Form Info Boxes (generisch) ───────────────────────────── */
.form-info {
  padding: 10px 14px;
  border-radius: var(--radius-md);
  background: var(--color-accent-muted);
  border: 1px solid rgba(124,92,252,0.18);
  font-size: 12px;
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin-top: 4px;
}
.form-info-gold {
  background: var(--color-gold-muted);
  border-color: rgba(200,169,110,0.2);
}

/* ── Range Slider (generisch) ──────────────────────────────── */
.form-range {
  -webkit-appearance: none;
  width: 100%;
  height: 4px;
  background: var(--color-bg-elevated);
  border-radius: 99px;
  outline: none;
  margin-top: 6px;
}
.form-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--color-accent);
  cursor: pointer;
  box-shadow: 0 0 0 3px rgba(124,92,252,0.25);
  transition: transform 0.15s;
}
.form-range::-webkit-slider-thumb:hover { transform: scale(1.2); }
.range-val-inline {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-accent);
  font-weight: 500;
  margin-left: 6px;
}

/* ── Module Tabs (generisch, Feature-übergreifend) ─────────── */
.mod-tabs {
  display: flex;
  gap: 2px;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 3px;
  overflow-x: auto;
  scrollbar-width: none;
}
.mod-tabs::-webkit-scrollbar { display: none; }
.mod-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: calc(var(--radius-lg) - 2px);
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  user-select: none;
}
.mod-tab:hover  { color: var(--color-text-primary); background: rgba(255,255,255,0.04); }
.mod-tab.active { color: var(--color-accent); background: var(--color-accent-muted); font-weight: 600; }
.tab-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.6;
  flex-shrink: 0;
}
.mod-tab.active .tab-dot { opacity: 1; }


/* ── Toggle Switch (shared: admin, settings) ──────────────── */
.admin-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  flex-shrink: 0;
}
.admin-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.admin-toggle-track {
  width: 40px; height: 22px;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 99px;
  position: relative;
  transition: all 0.2s;
}
.admin-toggle-track::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--color-text-muted);
  transition: all 0.2s;
}
.admin-toggle input:checked + .admin-toggle-track {
  background: var(--color-accent-muted);
  border-color: var(--color-accent);
}
.admin-toggle input:checked + .admin-toggle-track::after {
  left: 20px;
  background: var(--color-accent);
}
/* ── Modal Dialog (confirm/prompt replacement) ────────────────
   Ersetzt native confirm() / prompt() Dialoge vollständig.
   Verwendet nur Design-Token-Variablen aus tokens.css.
────────────────────────────────────────────────────────────── */

.modal-overlay {
  position:         fixed;
  inset:            0;
  z-index:          var(--z-modal);
  background:       var(--color-bg-overlay);
  backdrop-filter:  blur(6px);
  display:          flex;
  align-items:      center;
  justify-content:  center;
  padding:          var(--space-4);
  opacity:          0;
  transition:       opacity 0.15s ease;
}
.modal-overlay.visible { opacity: 1; }

.modal-dialog {
  background:   var(--color-bg-elevated);
  border:       1px solid var(--color-border-strong);
  border-radius: var(--radius-xl);
  max-width:    420px;
  width:        100%;
  box-shadow:   0 24px 80px rgba(0,0,0,0.6);
  transform:    scale(0.95) translateY(8px);
  transition:   transform 0.15s var(--ease-spring);
}
.modal-overlay.visible .modal-dialog { transform: scale(1) translateY(0); }

.modal-dialog-inner {
  padding: var(--space-8) var(--space-6) var(--space-6);
  text-align: center;
}

.modal-dialog-icon {
  width:         48px;
  height:        48px;
  border-radius: var(--radius-lg);
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-size:     22px;
  margin:        0 auto var(--space-4);
}
.modal-dialog-icon.warn   { background: var(--color-warning-muted); color: var(--color-warning); }
.modal-dialog-icon.danger { background: var(--color-danger-muted);  color: var(--color-danger);  }

.modal-dialog-title {
  font-size:    18px;
  font-weight:  600;
  color:        var(--color-text-primary);
  margin-bottom: var(--space-2);
}

.modal-dialog-msg {
  font-size:   14px;
  color:       var(--color-text-secondary);
  line-height: 1.6;
  margin-bottom: var(--space-6);
}

.modal-dialog-actions {
  display:   flex;
  gap:       var(--space-3);
  justify-content: center;
}
.modal-dialog-actions .btn { min-width: 100px; }

@media (max-width: 480px) {
  .modal-dialog-actions { flex-direction: column-reverse; }
  .modal-dialog-actions .btn { width: 100%; }
}