/* ================================================================
   DARK.CSS - DARK MODE (LOGIN-STIL FÜR ALLE SEITEN)
   ================================================================ */

[data-theme="dark"] {
  /* ===== HINTERGRUND (LOGIN-STIL FÜR ALLE SEITEN) ===== */
  --bg-body: #0f172a;
  --bg-body-gradient: radial-gradient(ellipse at 30% 50%, #1a2744 0%, #0f172a 70%);

  /* ===== WEBSITE HINTERGRUND ===== */
  --bg-website: #1D283A;

  /* ===== CARDS (GLASMORPHISM) ===== */
  --bg-card: rgba(255, 255, 255, 0.04);
  --bg-card-hover: rgba(255, 255, 255, 0.07);
  --bg-card-border: rgba(255, 255, 255, 0.06);
  --bg-card-border-hover: rgba(255, 255, 255, 0.12);
  --blur-card: blur(16px);

  /* ===== MODAL - FARBEN ANGEPASST AN WEBSITE ===== */
  --bg-modal: #141E36;
  --bg-modal-border: rgba(255, 255, 255, 0.06);
  --blur-modal: blur(0px);
  --shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.5);

  /* ===== SIDEBAR ===== */
  --bg-sidebar: rgba(15, 23, 42, 0.95);
  --bg-sidebar-hover: rgba(255, 255, 255, 0.04);
  --bg-sidebar-active: rgba(69, 126, 246, 0.12);
  --text-sidebar: rgba(255, 255, 255, 0.4);
  --text-sidebar-hover: #ffffff;
  --text-sidebar-active: #ffffff;
  --shadow-sidebar-active: 0 0 20px rgba(69, 126, 246, 0.06);

  /* ===== TEXTE ===== */
  --text-primary: #ffffff;
  --text-secondary: #e2e8f0;
  --text-muted: rgba(255, 255, 255, 0.35);
  --text-placeholder: rgba(255, 255, 255, 0.15);
  --text-label: rgba(255, 255, 255, 0.5);

  /* ===== INPUTS ===== */
  --bg-input: rgba(255, 255, 255, 0.04);
  --bg-input-focus: rgba(255, 255, 255, 0.06);
  --border-input: rgba(255, 255, 255, 0.06);
  --border-input-focus: #457EF6;
  --shadow-input-focus: 0 0 0 4px rgba(69, 126, 246, 0.08);

  /* ===== BORDER ===== */
  --border-color: rgba(255, 255, 255, 0.06);

  /* ===== DIVIDER ===== */
  --divider-color: rgba(255, 255, 255, 0.18);
  --divider-sidebar: rgba(255, 255, 255, 0.15);

  /* ===== BUTTONS ===== */
  --btn-primary-bg: linear-gradient(135deg, #457EF6, #8360F6);
  --btn-primary-text: #ffffff;
  --btn-primary-shadow: 0 8px 30px rgba(69, 126, 246, 0.2);
  --btn-primary-hover: linear-gradient(135deg, #3A6BE0, #754DE0);

  --btn-success-bg: linear-gradient(135deg, #22c55e, #16a34a);
  --btn-success-text: #ffffff;
  --btn-success-shadow: 0 8px 30px rgba(34, 197, 94, 0.2);

  --btn-danger-bg: linear-gradient(135deg, #ef4444, #dc2626);
  --btn-danger-text: #ffffff;
  --btn-danger-shadow: 0 8px 30px rgba(239, 68, 68, 0.2);

  --btn-warning-bg: linear-gradient(135deg, #f59e0b, #d97706);
  --btn-warning-text: #ffffff;
  --btn-warning-shadow: 0 8px 30px rgba(245, 158, 11, 0.2);

  --btn-purple-bg: linear-gradient(135deg, #8b5cf6, #7c3aed);
  --btn-purple-text: #ffffff;
  --btn-purple-shadow: 0 8px 30px rgba(139, 92, 246, 0.2);

  --btn-gray-bg: rgba(255, 255, 255, 0.05);
  --btn-gray-text: rgba(255, 255, 255, 0.5);
  --btn-gray-hover: rgba(255, 255, 255, 0.08);

  /* ===== SHADOWS ===== */
  --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.2);
  --shadow-card-hover: 0 12px 48px rgba(0, 0, 0, 0.3);
  --shadow-btn: 0 8px 24px rgba(0, 0, 0, 0.2);

  /* ===== STATUS ===== */
  --bg-success: rgba(34, 197, 94, 0.08);
  --text-success: #86efac;
  --bg-error: rgba(239, 68, 68, 0.08);
  --text-error: #f87171;
  --bg-warning: rgba(245, 158, 11, 0.08);
  --text-warning: #fcd34d;
  --bg-info: rgba(59, 130, 246, 0.08);
  --text-info: #60a5fa;

  /* ===== TOGGLE ===== */
  --bg-toggle: rgba(255, 255, 255, 0.12);
  --bg-toggle-active: #22c55e;

  /* ===== ROLLEN ===== */
  --bg-role-admin: rgba(245, 158, 11, 0.12);
  --text-role-admin: #fbbf24;
  --bg-role-moderator: rgba(59, 130, 246, 0.12);
  --text-role-moderator: #60a5fa;

  /* ===== PERMISSION STATS ===== */
  --stat-green: #22c55e;
  --stat-red: #ef4444;
  --stat-blue: #457EF6;
  --stat-purple: #8360F6;
  --stat-amber: #f59e0b;

  /* ===== PERMISSION CARD BORDER ===== */
  --perm-allowed: #22c55e;
  --perm-denied: #ef4444;

  /* ===== CSS-EDITOR TAB FARBEN ===== */
  --bg-core-tab: #64748b;
  --text-core-tab: #ffffff;
  --bg-light-tab: #f59e0b;
  --text-light-tab: #ffffff;
  --bg-dark-tab: #6366f1;
  --text-dark-tab: #ffffff;

  /* ===== CSS-EDITOR COLUMN BORDER ===== */
  --border-core: #64748b;
  --border-light: #f59e0b;
  --border-dark: #6366f1;

  /* ===== CSS-EDITOR BADGE FARBEN ===== */
  --bg-core-badge: rgba(100, 116, 139, 0.15);
  --text-core-badge: #64748b;
  --bg-light-badge: rgba(245, 158, 11, 0.15);
  --text-light-badge: #b45309;
  --bg-dark-badge: rgba(99, 102, 241, 0.15);
  --text-dark-badge: #818cf8;
  --bg-variable-badge: rgba(139, 92, 246, 0.15);
  --text-variable-badge: #7c3aed;

  /* ===== SCROLLBAR ===== */
  --scrollbar-track: rgba(255, 255, 255, 0.01);
  --scrollbar-thumb: rgba(255, 255, 255, 0.06);
  --scrollbar-thumb-hover: rgba(255, 255, 255, 0.12);

  /* ===== CHANGELOG FARBEN ===== */
  --changelog-icon-bg: linear-gradient(135deg, #457EF6, #8360F6);
  --changelog-icon-shadow: 0 4px 16px rgba(69, 126, 246, 0.3);
  --badge-bg: rgba(69, 126, 246, 0.15);
  --badge-border: rgba(69, 126, 246, 0.1);
  --badge-text: #60a5fa;
  --entry-feature-bg: rgba(34, 197, 94, 0.12);
  --entry-feature-text: #22c55e;
  --entry-fix-bg: rgba(239, 68, 68, 0.12);
  --entry-fix-text: #f87171;
  --entry-change-bg: rgba(245, 158, 11, 0.12);
  --entry-change-text: #fbbf24;
  --entry-security-bg: rgba(139, 92, 246, 0.12);
  --entry-security-text: #a78bfa;
  --tag-new-bg: rgba(34, 197, 94, 0.12);
  --tag-new-text: #22c55e;
  --tag-fixed-bg: rgba(239, 68, 68, 0.12);
  --tag-fixed-text: #f87171;
  --tag-changed-bg: rgba(245, 158, 11, 0.12);
  --tag-changed-text: #fbbf24;
  --progress-100: #22c55e;
  --progress-90: #22c55e;
  --progress-75: #f59e0b;
  --progress-65: #f59e0b;
  --progress-50: #f59e0b;
  --progress-30: #ef4444;
  --progress-bar-bg: rgba(255, 255, 255, 0.04);
}

/* ===== MODAL BOX - SPEZIFISCHE ANPASSUNG ===== */
[data-theme="dark"] .modal-box {
  background: var(--bg-modal) !important;
  border: 1px solid var(--bg-modal-border) !important;
  backdrop-filter: var(--blur-modal) !important;
  -webkit-backdrop-filter: var(--blur-modal) !important;
  box-shadow: var(--shadow-modal) !important;
}

/* ===== BODY ===== */
[data-theme="dark"] body {
  background: var(--bg-body);
  background-image: radial-gradient(ellipse at 30% 50%, #1a2744 0%, #0f172a 70%);
  background-attachment: fixed;
  min-height: 100vh;
  margin: 0;
  color: var(--text-primary);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* ===== SIDEBAR ===== */
[data-theme="dark"] .sidebar-nav {
  background: var(--bg-sidebar);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-right: 1px solid var(--divider-sidebar);
}

[data-theme="dark"] .sidebar-link {
  color: var(--text-sidebar);
}

[data-theme="dark"] .sidebar-link:hover {
  background: var(--bg-sidebar-hover);
  color: var(--text-sidebar-hover);
}

[data-theme="dark"] .sidebar-link.active {
  background: var(--bg-sidebar-active);
  color: var(--text-sidebar-active);
  box-shadow: var(--shadow-sidebar-active);
}

[data-theme="dark"] .sidebar-divider {
  border-top-color: var(--divider-sidebar);
}

[data-theme="dark"] .main-content {
  background: transparent;
}

/* ===== CARDS ===== */
[data-theme="dark"] .card,
[data-theme="dark"] .setting-card,
[data-theme="dark"] .profile-header,
[data-theme="dark"] .search-result-card,
[data-theme="dark"] .admin-access-denied,
[data-theme="dark"] .user-tabs,
[data-theme="dark"] .dashboard-item,
[data-theme="dark"] .editor-column,
[data-theme="dark"] .css-editor-panel,
[data-theme="dark"] .class-overview,
[data-theme="dark"] .gallery-item,
[data-theme="dark"] .file-item,
[data-theme="dark"] .nav-card,
[data-theme="dark"] .permission-group,
[data-theme="dark"] .media-upload-card,
[data-theme="dark"] .class-card,
[data-theme="dark"] .perm-stat-card,
[data-theme="dark"] .file-list-container {
  background: var(--bg-card);
  backdrop-filter: var(--blur-card);
  -webkit-backdrop-filter: var(--blur-card);
  border: 1px solid var(--bg-card-border);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

[data-theme="dark"] .card:hover,
[data-theme="dark"] .setting-card:hover,
[data-theme="dark"] .profile-header:hover,
[data-theme="dark"] .dashboard-item:hover,
[data-theme="dark"] .editor-column:hover,
[data-theme="dark"] .gallery-item:hover,
[data-theme="dark"] .nav-card:hover,
[data-theme="dark"] .class-card:hover,
[data-theme="dark"] .card-elegant:hover,
[data-theme="dark"] .backup-box:hover,
[data-theme="dark"] .perm-stat-card:hover,
[data-theme="dark"] .file-list-container:hover {
  border-color: var(--bg-card-border-hover);
  box-shadow: var(--shadow-card-hover);
}

/* ===== MODAL OVERLAY ===== */
[data-theme="dark"] .modal-overlay {
  background: rgba(0, 0, 0, 0.6);
}

/* ===== BUTTONS ===== */
[data-theme="dark"] .btn-primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
}
[data-theme="dark"] .btn-primary:hover {
  box-shadow: var(--btn-primary-shadow);
}

[data-theme="dark"] .btn-success {
  background: var(--btn-success-bg);
  color: var(--btn-success-text);
}
[data-theme="dark"] .btn-success:hover {
  box-shadow: var(--btn-success-shadow);
}

[data-theme="dark"] .btn-danger {
  background: var(--btn-danger-bg);
  color: var(--btn-danger-text);
}
[data-theme="dark"] .btn-danger:hover {
  box-shadow: var(--btn-danger-shadow);
}

[data-theme="dark"] .btn-warning {
  background: var(--btn-warning-bg);
  color: var(--btn-warning-text);
}
[data-theme="dark"] .btn-warning:hover {
  box-shadow: var(--btn-warning-shadow);
}

[data-theme="dark"] .btn-purple {
  background: var(--btn-purple-bg);
  color: var(--btn-purple-text);
}
[data-theme="dark"] .btn-purple:hover {
  box-shadow: var(--btn-purple-shadow);
}

[data-theme="dark"] .btn-gray {
  background: var(--btn-gray-bg);
  color: var(--btn-gray-text);
}
[data-theme="dark"] .btn-gray:hover {
  background: var(--btn-gray-hover);
}

/* ===== INPUTS ===== */
[data-theme="dark"] .input,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="url"],
[data-theme="dark"] select,
[data-theme="dark"] textarea,
[data-theme="dark"] .setting-card .form-group input,
[data-theme="dark"] .setting-card .form-group select,
[data-theme="dark"] .login-form .input-field,
[data-theme="dark"] .filter-row .filter-input,
[data-theme="dark"] .filter-row select,
[data-theme="dark"] .modal-body .form-group .input,
[data-theme="dark"] .modal-body .form-group select,
[data-theme="dark"] .modal-body .form-group textarea,
[data-theme="dark"] .modal-body .property-row .prop-input,
[data-theme="dark"] .edit-input {
  background: var(--bg-input);
  border: 1.5px solid var(--border-input);
  color: var(--text-primary);
}

/* ===== FORM-GROUP (modal-formulare, z.B. notizen) ===== */
[data-theme="dark"] .form-group {
  margin-bottom: 16px;
}
[data-theme="dark"] .form-group:last-child {
  margin-bottom: 0;
}
[data-theme="dark"] .form-group > label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 5px;
}
[data-theme="dark"] .checkbox-group {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--text-primary);
  cursor: pointer;
}
[data-theme="dark"] .checkbox-group input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #457EF6;
}

[data-theme="dark"] .input:focus,
[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] .setting-card .form-group input:focus,
[data-theme="dark"] .setting-card .form-group select:focus,
[data-theme="dark"] .login-form .input-field:focus,
[data-theme="dark"] .filter-row .filter-input:focus,
[data-theme="dark"] .filter-row select:focus,
[data-theme="dark"] .modal-body .form-group .input:focus,
[data-theme="dark"] .modal-body .form-group select:focus,
[data-theme="dark"] .modal-body .property-row .prop-input:focus,
[data-theme="dark"] .edit-input:focus {
  border-color: var(--border-input-focus);
  background: var(--bg-input-focus);
  box-shadow: var(--shadow-input-focus);
}

[data-theme="dark"] .input::placeholder,
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder,
[data-theme="dark"] .login-form .input-field::placeholder,
[data-theme="dark"] .filter-row .filter-input::placeholder,
[data-theme="dark"] .modal-body .form-group .input::placeholder,
[data-theme="dark"] .edit-input::placeholder {
  color: var(--text-placeholder);
}

/* ===== TABS ===== */
[data-theme="dark"] .user-tabs .tab-btn {
  color: var(--text-muted);
}

[data-theme="dark"] .user-tabs .tab-btn:hover {
  background: var(--bg-card-hover);
  color: var(--text-primary);
}

[data-theme="dark"] .user-tabs .tab-btn.active {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
}

/* ===== CSS-EDITOR MODE TABS ===== */
[data-theme="dark"] .css-editor-panel .mode-tabs .tab.active-core {
  background: var(--bg-core-tab);
  color: var(--text-core-tab);
}

[data-theme="dark"] .css-editor-panel .mode-tabs .tab.active-light {
  background: var(--bg-light-tab);
  color: var(--text-light-tab);
}

[data-theme="dark"] .css-editor-panel .mode-tabs .tab.active-dark {
  background: var(--bg-dark-tab);
  color: var(--text-dark-tab);
}

/* ===== CSS-EDITOR COLUMN BORDERS ===== */
[data-theme="dark"] .editor-column.core-column {
  border-top-color: var(--border-core);
}

[data-theme="dark"] .editor-column.light-column {
  border-top-color: var(--border-light);
}

[data-theme="dark"] .editor-column.dark-column {
  border-top-color: var(--border-dark);
}

/* ===== CSS-EDITOR BADGES ===== */
[data-theme="dark"] .badge.core {
  background: var(--bg-core-badge);
  color: var(--text-core-badge);
}

[data-theme="dark"] .badge.light {
  background: var(--bg-light-badge);
  color: var(--text-light-badge);
}

[data-theme="dark"] .badge.dark {
  background: var(--bg-dark-badge);
  color: var(--text-dark-badge);
}

[data-theme="dark"] .badge.variable {
  background: var(--bg-variable-badge);
  color: var(--text-variable-badge);
}

/* ===== TABELLE ===== */
[data-theme="dark"] .user-table th {
  color: var(--text-muted);
  border-bottom-color: var(--border-color);
}

[data-theme="dark"] .user-table td {
  border-bottom-color: var(--border-color);
  color: var(--text-secondary);
}

[data-theme="dark"] .user-table tr:hover td {
  background: var(--bg-card-hover);
}

/* ===== AVATAR ===== */
[data-theme="dark"] .avatar {
  background: var(--bg-input);
  border-color: var(--bg-card-border);
  color: var(--text-primary);
}

[data-theme="dark"] .avatar:hover {
  border-color: var(--border-input-focus);
}

[data-theme="dark"] .avatar-upload-btn {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border-color: var(--bg-card);
}

[data-theme="dark"] .avatar-remove-btn {
  background: var(--btn-danger-bg);
  color: var(--btn-danger-text);
  border-color: var(--bg-card);
}

/* ===== ROLE BADGE ===== */
[data-theme="dark"] .role-badge.admin {
  background: var(--bg-role-admin);
  color: var(--text-role-admin);
}
[data-theme="dark"] .role-badge.moderator {
  background: var(--bg-role-moderator);
  color: var(--text-role-moderator);
}
[data-theme="dark"] .role-badge.user {
  background: rgba(100, 116, 139, 0.15);
  color: #94a3b8;
}

/* ===== PERMISSION ROLE BADGE ===== */
[data-theme="dark"] .perm-card .perm-role.admin {
  background: var(--bg-role-admin);
  color: var(--text-role-admin);
}
[data-theme="dark"] .perm-card .perm-role.moderator {
  background: var(--bg-role-moderator);
  color: var(--text-role-moderator);
}
[data-theme="dark"] .perm-card .perm-role.user {
  background: rgba(100, 116, 139, 0.12);
  color: #94a3b8;
}

/* ===== PERMISSION STATS FARBEN ===== */
[data-theme="dark"] .perm-stat-card.green::before {
  background: var(--stat-green);
}
[data-theme="dark"] .perm-stat-card.green .stat-number {
  color: var(--stat-green);
}

[data-theme="dark"] .perm-stat-card.red::before {
  background: var(--stat-red);
}
[data-theme="dark"] .perm-stat-card.red .stat-number {
  color: var(--stat-red);
}

[data-theme="dark"] .perm-stat-card.blue::before {
  background: var(--stat-blue);
}
[data-theme="dark"] .perm-stat-card.blue .stat-number {
  color: var(--stat-blue);
}

[data-theme="dark"] .perm-stat-card.purple::before {
  background: var(--stat-purple);
}
[data-theme="dark"] .perm-stat-card.purple .stat-number {
  color: var(--stat-purple);
}

[data-theme="dark"] .perm-stat-card.amber::before {
  background: var(--stat-amber);
}
[data-theme="dark"] .perm-stat-card.amber .stat-number {
  color: var(--stat-amber);
}

/* ===== PERMISSION CARD BORDER ===== */
[data-theme="dark"] .perm-card.allowed {
  border-left-color: var(--perm-allowed);
}
[data-theme="dark"] .perm-card.denied {
  border-left-color: var(--perm-denied);
}

/* ===== STATUS BADGE ===== */
[data-theme="dark"] .status-badge.active {
  background: var(--bg-success);
  color: var(--text-success);
}
[data-theme="dark"] .status-badge.locked {
  background: var(--bg-error);
  color: var(--text-error);
}

/* ===== TOTP ===== */
[data-theme="dark"] .totp-status {
  background: var(--bg-input);
  border-color: var(--border-color);
}

[data-theme="dark"] .totp-status .status-dot.active {
  background: #22c55e;
}
[data-theme="dark"] .totp-status .status-dot.inactive {
  background: #475569;
}

[data-theme="dark"] .totp-qr-container {
  background: var(--bg-input);
  border-color: var(--border-color);
}

/* ===== EMAIL MATCH ===== */
[data-theme="dark"] #emailMatchHint.match {
  color: var(--text-success);
  background: var(--bg-success);
}
[data-theme="dark"] #emailMatchHint.no-match {
  color: var(--text-error);
  background: var(--bg-error);
}
[data-theme="dark"] #emailMatchHint.empty {
  color: var(--text-muted);
}

/* ===== MESSAGE ===== */
[data-theme="dark"] .message.success {
  background: var(--bg-success);
  color: var(--text-success);
}
[data-theme="dark"] .message.error {
  background: var(--bg-error);
  color: var(--text-error);
}
[data-theme="dark"] .message.info {
  background: var(--bg-info);
  color: var(--text-info);
}
[data-theme="dark"] .message.warning {
  background: var(--bg-warning);
  color: var(--text-warning);
}

/* ===== DASHBOARD WIDGETS ===== */
[data-theme="dark"] .dashboard-item .widget-header {
  border-bottom-color: var(--border-color);
}

[data-theme="dark"] .dashboard-item .widget-title {
  color: var(--text-secondary);
}

[data-theme="dark"] .cpu-ram-item,
[data-theme="dark"] .disk-item,
[data-theme="dark"] .online-user-item,
[data-theme="dark"] .last-login-item,
[data-theme="dark"] .system-status-item,
[data-theme="dark"] .system-info-item {
  background: var(--bg-input);
  border-color: var(--border-color);
}

[data-theme="dark"] .quick-action-btn {
  background: var(--bg-input);
  color: var(--text-secondary);
}

[data-theme="dark"] .quick-action-btn:hover {
  background: var(--bg-card-hover);
}

[data-theme="dark"] .todo-widget .todo-item {
  background: var(--bg-input);
}

[data-theme="dark"] .todo-widget .todo-input-row input {
  background: var(--bg-input);
  border-color: var(--border-color);
  color: var(--text-primary);
}

/* ===== LOGIN SEITE ===== */
[data-theme="dark"] .login-page {
  background: var(--bg-body);
  background-image: radial-gradient(ellipse at 30% 50%, #1a2744 0%, #0f172a 70%);
}

[data-theme="dark"] .login-card {
  background: var(--bg-card);
  backdrop-filter: var(--blur-card);
  -webkit-backdrop-filter: var(--blur-card);
  border: 1px solid var(--bg-card-border);
  box-shadow: var(--shadow-card);
}

[data-theme="dark"] .login-card:hover {
  border-color: var(--bg-card-border-hover);
  box-shadow: var(--shadow-card-hover);
}

[data-theme="dark"] .login-logo-placeholder {
  background: var(--btn-primary-bg);
  box-shadow: var(--btn-primary-shadow);
}

[data-theme="dark"] .login-title {
  color: var(--text-primary);
}

[data-theme="dark"] .login-subtitle {
  color: var(--text-muted);
}

[data-theme="dark"] .login-link {
  color: var(--text-muted);
}

[data-theme="dark"] .login-link:hover {
  color: var(--text-primary);
}

/* ===== PERMISSIONS TOGGLE ===== */
[data-theme="dark"] .perm-toggle .toggle-slider {
  background: var(--bg-toggle);
}

[data-theme="dark"] .perm-toggle input:checked + .toggle-slider {
  background: var(--bg-toggle-active);
}

[data-theme="dark"] .perm-card.changed {
  background: var(--bg-warning);
}

[data-theme="dark"] .perm-card .perm-changed-badge {
  color: var(--text-warning);
}

[data-theme="dark"] .permission-group.has-changes {
  border-color: rgba(245, 158, 11, 0.3);
}

[data-theme="dark"] .permission-group .group-changed {
  color: var(--text-warning);
  background: var(--bg-warning);
}

/* ===== WEBFTP FILE ACTIONS ===== */
[data-theme="dark"] .file-item .file-actions .file-action.download {
  color: var(--text-info);
}

[data-theme="dark"] .file-item .file-actions .file-action.edit {
  color: var(--text-warning);
}

[data-theme="dark"] .file-item .file-actions .file-action.delete {
  color: var(--text-error);
}

/* ===== CHANGELOG SEITE ===== */
[data-theme="dark"] .changelog-card {
  background: var(--bg-card);
  backdrop-filter: var(--blur-card);
  -webkit-backdrop-filter: var(--blur-card);
  border: 1px solid var(--bg-card-border);
  box-shadow: var(--shadow-card);
}

[data-theme="dark"] .changelog-card:hover {
  border-color: var(--bg-card-border-hover);
  box-shadow: var(--shadow-card-hover);
}

[data-theme="dark"] .changelog-icon {
  background: var(--changelog-icon-bg);
  box-shadow: var(--changelog-icon-shadow);
}

[data-theme="dark"] .version-badge {
  background: var(--badge-bg);
  border-color: var(--badge-border);
  color: var(--badge-text);
}

[data-theme="dark"] .version-badge .date {
  color: var(--text-muted);
}

[data-theme="dark"] .changelog-entry .entry-type.feature {
  background: var(--entry-feature-bg);
  color: var(--entry-feature-text);
}

[data-theme="dark"] .changelog-entry .entry-type.fix {
  background: var(--entry-fix-bg);
  color: var(--entry-fix-text);
}

[data-theme="dark"] .changelog-entry .entry-type.change {
  background: var(--entry-change-bg);
  color: var(--entry-change-text);
}

[data-theme="dark"] .changelog-entry .entry-type.security {
  background: var(--entry-security-bg);
  color: var(--entry-security-text);
}

[data-theme="dark"] .changelog-entry .entry-changes li .tag.new {
  background: var(--tag-new-bg);
  color: var(--tag-new-text);
}

[data-theme="dark"] .changelog-entry .entry-changes li .tag.fixed {
  background: var(--tag-fixed-bg);
  color: var(--tag-fixed-text);
}

[data-theme="dark"] .changelog-entry .entry-changes li .tag.changed {
  background: var(--tag-changed-bg);
  color: var(--tag-changed-text);
}

/* ===== PROGRESS BAR ===== */
[data-theme="dark"] .changelog-entry .entry-progress-bar {
  background: var(--progress-bar-bg);
}

[data-theme="dark"] .changelog-entry .entry-progress-bar .progress-fill[style*="width:100%"] {
  background: var(--progress-100);
}

[data-theme="dark"] .changelog-entry .entry-progress-bar .progress-fill[style*="width:90%"] {
  background: var(--progress-90);
}

[data-theme="dark"] .changelog-entry .entry-progress-bar .progress-fill[style*="width:75%"] {
  background: var(--progress-75);
}

[data-theme="dark"] .changelog-entry .entry-progress-bar .progress-fill[style*="width:65%"] {
  background: var(--progress-65);
}

[data-theme="dark"] .changelog-entry .entry-progress-bar .progress-fill[style*="width:50%"] {
  background: var(--progress-50);
}

[data-theme="dark"] .changelog-entry .entry-progress-bar .progress-fill[style*="width:30%"] {
  background: var(--progress-30);
}

/* ===== SCROLLBAR ===== */
[data-theme="dark"] ::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}
[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 3px;
}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

/* ===== RESPONSIVE SIDEBAR ===== */
@media (max-width: 480px) {
  [data-theme="dark"] .sidebar-nav {
    background: var(--bg-sidebar);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
}

/* ================================================================
   🎨 DESIGN-UPGRADE v7.8 — AUF ALLE ADMIN-SEITEN ÜBERTRAGEN (09.08.)
   Gradient-Titel, Akzentlinie, Karten-Strich, Lila-Glow
   (1:1 aus domain-manager.css übernommen)
   ================================================================ */

/* ---- PAGE HEADER: Gradient-Titel + Akzentlinie ---- */
[data-theme="dark"] .page-header {
  position: relative;
}
[data-theme="dark"] .page-header::after { display: none; }
[data-theme="dark"] .page-header h1 {
  font-size: 28px;
  background: linear-gradient(120deg, var(--text-primary) 20%, #8360F6 90%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

/* ---- CHANGELOG (eigene Header-Struktur) ---- */
[data-theme="dark"] .changelog-header {
  position: relative;
}
[data-theme="dark"] .changelog-header::after { display: none; }
[data-theme="dark"] .changelog-title {
  background: linear-gradient(120deg, var(--text-primary) 20%, #8360F6 90%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

/* ---- USERS-Seite (Profile-Header statt page-header) ---- */
[data-theme="dark"] .profile-header-left h2 {
  background: linear-gradient(120deg, var(--text-primary) 20%, #8360F6 90%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

/* ---- KARTEN: Gradient-Strich oben + Lila-Glow beim Hover ---- */
[data-theme="dark"] .card {
  position: relative;
}
[data-theme="dark"] .setting-card {
  position: relative;
}
[data-theme="dark"] .profile-header {
  position: relative;
}
[data-theme="dark"] .search-result-card {
  position: relative;
}
[data-theme="dark"] .admin-access-denied {
  position: relative;
}
[data-theme="dark"] .user-tabs {
  position: relative;
}
[data-theme="dark"] .dashboard-item {
  position: relative;
}
[data-theme="dark"] .editor-column {
  position: relative;
}
[data-theme="dark"] .css-editor-panel {
  position: relative;
}
[data-theme="dark"] .class-overview {
  position: relative;
}
[data-theme="dark"] .gallery-item {
  position: relative;
}
[data-theme="dark"] .file-item {
  position: relative;
}
[data-theme="dark"] .nav-card {
  position: relative;
}
[data-theme="dark"] .permission-group {
  position: relative;
}
[data-theme="dark"] .media-upload-card {
  position: relative;
}
[data-theme="dark"] .class-card {
  position: relative;
}
[data-theme="dark"] .file-list-container {
  position: relative;
}

/* Farbverlauf-Linie oben an der Karte */
[data-theme="dark"] .card::before /* Farbverlauf-Linie oben an der Karte */
[data-theme="dark"] .card::before { display: none; }

[data-theme="dark"] .setting-card::before { display: none; }

[data-theme="dark"] .profile-header::before { display: none; }

[data-theme="dark"] .search-result-card::before { display: none; }

[data-theme="dark"] .admin-access-denied::before { display: none; }

[data-theme="dark"] .user-tabs::before { display: none; }

[data-theme="dark"] .dashboard-item::before { display: none; }

[data-theme="dark"] .editor-column::before { display: none; }

[data-theme="dark"] .css-editor-panel::before { display: none; }

[data-theme="dark"] .class-overview::before { display: none; }

[data-theme="dark"] .gallery-item::before { display: none; }

[data-theme="dark"] .file-item::before { display: none; }

[data-theme="dark"] .nav-card::before { display: none; }

[data-theme="dark"] .permission-group::before { display: none; }

[data-theme="dark"] .media-upload-card::before { display: none; }

[data-theme="dark"] .class-card::before { display: none; }

[data-theme="dark"] .file-list-container::before { display: none; }

[data-theme="dark"] .card:hover::before {
  opacity: 1;
}

[data-theme="dark"] .setting-card:hover::before {
  opacity: 1;
}

[data-theme="dark"] .profile-header:hover::before {
  opacity: 1;
}

[data-theme="dark"] .search-result-card:hover::before {
  opacity: 1;
}

[data-theme="dark"] .admin-access-denied:hover::before {
  opacity: 1;
}

[data-theme="dark"] .user-tabs:hover::before {
  opacity: 1;
}

[data-theme="dark"] .dashboard-item:hover::before {
  opacity: 1;
}

[data-theme="dark"] .editor-column:hover::before {
  opacity: 1;
}

[data-theme="dark"] .css-editor-panel:hover::before {
  opacity: 1;
}

[data-theme="dark"] .class-overview:hover::before {
  opacity: 1;
}

[data-theme="dark"] .gallery-item:hover::before {
  opacity: 1;
}

[data-theme="dark"] .file-item:hover::before {
  opacity: 1;
}

[data-theme="dark"] .nav-card:hover::before {
  opacity: 1;
}

[data-theme="dark"] .permission-group:hover::before {
  opacity: 1;
}

[data-theme="dark"] .media-upload-card:hover::before {
  opacity: 1;
}

[data-theme="dark"] .class-card:hover::before {
  opacity: 1;
}

[data-theme="dark"] .file-list-container:hover::before {
  opacity: 1;
}

/* Hover: lila Rand + leuchtender Schatten */
[data-theme="dark"] .card:hover,
[data-theme="dark"] .setting-card:hover,
[data-theme="dark"] .profile-header:hover,
[data-theme="dark"] .search-result-card:hover,
[data-theme="dark"] .admin-access-denied:hover,
[data-theme="dark"] .user-tabs:hover,
[data-theme="dark"] .dashboard-item:hover,
[data-theme="dark"] .editor-column:hover,
[data-theme="dark"] .css-editor-panel:hover,
[data-theme="dark"] .class-overview:hover,
[data-theme="dark"] .gallery-item:hover,
[data-theme="dark"] .file-item:hover,
[data-theme="dark"] .nav-card:hover,
[data-theme="dark"] .permission-group:hover,
[data-theme="dark"] .media-upload-card:hover,
[data-theme="dark"] .class-card:hover,
[data-theme="dark"] .card-elegant:hover,
[data-theme="dark"] .backup-box:hover,
[data-theme="dark"] .file-list-container:hover {
  border-color: rgba(131, 96, 246, 0.45);
  box-shadow: 0 12px 32px rgba(69, 126, 246, 0.18), var(--shadow-card-hover);
}

/* ================================================================
   🎨 DESIGN-UPGRADE TEIL 2 (09.08.) — FEHLENDE BLÖCKE + NAV
   ================================================================ */

/* ---- ZUSÄTZLICHE KARTEN: Streifen oben + Lila-Glow ---- */
[data-theme="dark"] .filter-bar {
  position: relative;
}
[data-theme="dark"] .permissions-table-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid var(--bg-card-border);
  background: var(--bg-card);
}
[data-theme="dark"] .permissions-table-wrapper .card-header {
  border-radius: 16px 16px 0 0;
}
[data-theme="dark"] .backups-section {
  position: relative;
}
[data-theme="dark"] .sql-editor {
  position: relative;
}
[data-theme="dark"] .tabs-container {
  position: relative;
}

[data-theme="dark"] .filter-bar::before { display: none; }

[data-theme="dark"] .permissions-table-wrapper::before { display: none; }

[data-theme="dark"] .backups-section::before { display: none; }

[data-theme="dark"] .sql-editor::before { display: none; }

[data-theme="dark"] .tabs-container::before { display: none; }

[data-theme="dark"] .filter-bar:hover::before {
  opacity: 1;
}

[data-theme="dark"] .permissions-table-wrapper:hover::before {
  opacity: 1;
}

[data-theme="dark"] .backups-section:hover::before {
  opacity: 1;
}

[data-theme="dark"] .sql-editor:hover::before {
  opacity: 1;
}

[data-theme="dark"] .tabs-container:hover::before {
  opacity: 1;
}

[data-theme="dark"] .filter-bar:hover,
[data-theme="dark"] .permissions-table-wrapper:hover,
[data-theme="dark"] .backups-section:hover,
[data-theme="dark"] .sql-editor:hover,
[data-theme="dark"] .tabs-container:hover {
  border-color: rgba(131, 96, 246, 0.45);
  box-shadow: 0 12px 32px rgba(69, 126, 246, 0.18), var(--shadow-card-hover);
}

/* ---- PERM-STAT-CARDS: Streifen via ::after (::before ist für Farbpunkte) ---- */
[data-theme="dark"] .perm-stat-card {
  position: relative;
}
[data-theme="dark"] .perm-stat-card::after { display: none; }
[data-theme="dark"] .perm-stat-card:hover::after {
  opacity: 1;
}
[data-theme="dark"] .perm-stat-card:hover {
  border-color: rgba(131, 96, 246, 0.45);
  box-shadow: 0 12px 32px rgba(69, 126, 246, 0.18), var(--shadow-card-hover);
}

/* ---- DASHBOARD: Team/Admin-Switch-Buttons als Karten-Block ---- */
[data-theme="dark"] #switchToTeamBtn, [data-theme="dark"] #switchToAdminBtn {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
}
[data-theme="dark"] #switchToTeamBtn::before, [data-theme="dark"] #switchToAdminBtn::before { display: none; }
[data-theme="dark"] #switchToTeamBtn:hover::before, [data-theme="dark"] #switchToAdminBtn:hover::before {
  opacity: 1;
}
[data-theme="dark"] #switchToTeamBtn:hover, [data-theme="dark"] #switchToAdminBtn:hover {
  border-color: rgba(131, 96, 246, 0.45);
  box-shadow: 0 8px 24px rgba(69, 126, 246, 0.18);
}

/* ---- NAV-MENÜ: Farbverlauf in Schrift (Labels) ---- */
[data-theme="dark"] .sidebar-link .label {
  background: linear-gradient(120deg, var(--text-sidebar) 10%, #8360F6 85%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: background 0.3s ease;
}
[data-theme="dark"] .sidebar-link:hover .label {
  background: linear-gradient(120deg, var(--text-sidebar-hover) 10%, #a78bfa 85%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
[data-theme="dark"] .sidebar-link.active .label {
  background: linear-gradient(120deg, #ffffff 10%, #a78bfa 85%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---- NAV-MENÜ: Farbverlauf in den Trennern ---- */
[data-theme="dark"] .sidebar-divider {
  border: none;
  height: 2px;
  background: linear-gradient(90deg, #457EF6, #8360F6 50%, transparent);
  opacity: 0.6;
  margin: 10px 12px;
}
[data-theme="dark"] .sidebar-footer {
  border-top: 2px solid transparent;
  border-image: linear-gradient(90deg, #457EF6, #8360F6 50%, transparent) 1;
}

/* ================================================================
   🎨 DESIGN-UPGRADE TEIL 4 (09.08.) — DASHBOARD-TABS
   ================================================================ */

[data-theme="dark"] .dashboard-tabs {
  position: relative;
}
[data-theme="dark"] .dashboard-tabs::before { display: none; }
[data-theme="dark"] .dashboard-tabs:hover::before {
  opacity: 1;
}
[data-theme="dark"] .dashboard-tabs:hover {
  border-color: rgba(131, 96, 246, 0.45);
  box-shadow: 0 12px 32px rgba(69, 126, 246, 0.18), var(--shadow-card-hover);
}

/* ---- BRAND-ICON (Squircle im Header/Nav) ---- */
[data-theme="dark"] .brand-icon-container {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--btn-primary-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: white;
  box-shadow: 0 4px 16px rgba(69, 126, 246, 0.3);
  flex-shrink: 0;
}

/* ===== CARD-ELEGANT (Backup-Box Design: gradient-header + indigo trennlinie) ===== */
[data-theme="dark"] .card-elegant {
  background: var(--bg-card);
  backdrop-filter: var(--blur-card);
  -webkit-backdrop-filter: var(--blur-card);
  border: 1px solid var(--bg-card-border);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
[data-theme="dark"] .card-elegant .card-header,
[data-theme="dark"] .sql-editor .editor-header,
[data-theme="dark"] .setting-card .card-header,
[data-theme="dark"] .class-card .card-header,
[data-theme="dark"] .dashboard-item .widget-header {
  display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important;
  padding: 14px 18px !important;
  background: linear-gradient(90deg, rgba(99,102,241,.14), rgba(99,102,241,.02)) !important;
  border-bottom: 2px solid #6366f1 !important;
}
[data-theme="dark"] .card-elegant .card-title { font-size: 15px; font-weight: 700; color: var(--text-primary); letter-spacing:.3px; }
[data-theme="dark"] .card-elegant .card-title i { color: #818cf8; margin-right: 8px; }
[data-theme="dark"] .card-elegant .card-body { padding: 16px 18px; }
[data-theme="dark"] .card-body { padding: 18px 24px 22px 24px; }

/* ===== BACKUP-BOX (alias) ===== */
[data-theme="dark"] .backup-box {
  background: var(--bg-card);
  border: 1px solid var(--bg-card-border);
  border-radius: 16px; box-shadow: var(--shadow-card); overflow: hidden; margin-top: 24px;
}
[data-theme="dark"] .backup-box .editor-header,
[data-theme="dark"] .result-container .result-header {
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  padding: 14px 18px !important;
  background: linear-gradient(90deg, rgba(99,102,241,.14), rgba(99,102,241,.02)) !important;
  border-bottom: 2px solid #6366f1 !important;
}
[data-theme="dark"] .backup-box .editor-title { font-size: 15px; font-weight: 700; color: var(--text-primary); letter-spacing:.3px; }
[data-theme="dark"] .backup-box .editor-title i { color: #818cf8; margin-right: 8px; }
[data-theme="dark"] .backup-box .editor-body { padding: 16px 18px; }
[data-theme="dark"] .backup-box .backup-hint { color: var(--text-muted); font-size: 13px; margin-bottom: 14px; line-height:1.5; }
[data-theme="dark"] .backup-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; margin-bottom: 10px; border: 1px solid var(--border-color); border-radius: 12px; background: var(--bg-input, #0f141f); transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
[data-theme="dark"] .backup-item:hover { border-color: #6366f1; box-shadow: 0 0 0 1px rgba(99,102,241,.35), 0 6px 20px rgba(99,102,241,.18); transform: translateY(-1px); }
[data-theme="dark"] .backup-item .bi-name { font-size: 13px; font-weight: 600; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 320px; }
[data-theme="dark"] .backup-item .bi-meta { font-size: 11px; color: var(--text-muted); margin-top: 3px; }
[data-theme="dark"] .backup-item .bi-del { color: #f59e0b; font-size: 11px; }
[data-theme="dark"] .backup-item .bi-actions { display: flex; gap: 6px; flex-shrink: 0; }
[data-theme="dark"] .backup-item .bi-btn { padding: 5px 11px; border-radius: 8px; font-size: 12px; font-weight: 600; border: 1px solid var(--border-color); background: var(--bg-card, #161b27); color: var(--text-primary); cursor: pointer; transition: background .15s, border-color .15s; }
[data-theme="dark"] .backup-item .bi-btn:hover { border-color: #6366f1; background: rgba(99,102,241,.12); }
[data-theme="dark"] .backup-empty { color: var(--text-muted); font-size: 13px; padding: 10px 2px; }

/* ===== EDITOR/RESULT HEADER (datenbank + globals) ===== */
[data-theme="dark"] .editor-header,
[data-theme="dark"] .result-header {
  display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important;
  padding: 14px 18px !important;
  background: linear-gradient(90deg, rgba(99,102,241,.14), rgba(99,102,241,.02)) !important;
  border-bottom: 2px solid #6366f1 !important;
}
[data-theme="dark"] .editor-title,
[data-theme="dark"] .result-title { font-size: 15px; font-weight: 700; color: var(--text-primary); letter-spacing: .3px; }
[data-theme="dark"] .editor-title i, [data-theme="dark"] .result-title i { color: #818cf8; margin-right: 8px; }

/* ===== CARD-HEADER (global) ===== */
[data-theme="dark"] .card-header,
[data-theme="dark"] .card .card-header,
[data-theme="dark"] .setting-card .card-header,
[data-theme="dark"] .nav-card .card-header,
[data-theme="dark"] .permission-group .card-header,
[data-theme="dark"] .media-upload-card .card-header,
[data-theme="dark"] .class-overview .card-header,
[data-theme="dark"] .file-item .card-header,
[data-theme="dark"] .gallery-item .card-header,
[data-theme="dark"] .file-list-container .card-header,
[data-theme="dark"] .filter-bar .card-header,
[data-theme="dark"] .backups-section .card-header,
[data-theme="dark"] .tabs-container .card-header,
[data-theme="dark"] .profile-header .card-header,
[data-theme="dark"] .search-result-card .card-header,
[data-theme="dark"] .admin-access-denied .card-header,
[data-theme="dark"] .user-tabs .card-header {
  display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 10px !important;
  padding: 14px 18px !important;
  background: linear-gradient(90deg, rgba(99,102,241,.14), rgba(99,102,241,.02)) !important;
  border-bottom: 2px solid #6366f1 !important;
}
[data-theme="dark"] .card-header .card-title,
[data-theme="dark"] .card-header h2,
[data-theme="dark"] .card-header h3 { font-size: 15px; font-weight: 700; color: var(--text-primary); letter-spacing: .3px; margin: 0; }
[data-theme="dark"] .card-header .card-icon { color: #818cf8; margin-right: 8px; }

/* ===== WIDGET-HEADER (dashboard) ===== */
[data-theme="dark"] .widget-header {
  display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important;
  padding: 14px 18px !important;
  background: linear-gradient(90deg, rgba(99,102,241,.14), rgba(99,102,241,.02)) !important;
  border-bottom: 2px solid #6366f1 !important;
}
[data-theme="dark"] .widget-title { font-size: 15px; font-weight: 700; color: var(--text-primary); letter-spacing: .3px; margin: 0; }
[data-theme="dark"] .widget-header i, [data-theme="dark"] .widget-title i { color: #818cf8; margin-right: 8px; }

/* ===== MODAL-HEADER (alle modals: gradient + indigo trennlinie) ===== */
[data-theme="dark"] .modal-header {
  display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important;
  padding: 16px 24px !important;
  background: linear-gradient(90deg, rgba(99,102,241,.14), rgba(99,102,241,.02)) !important;
  border-bottom: 2px solid #6366f1 !important;
}
[data-theme="dark"] .modal-header .modal-title { font-size: 17px; font-weight: 700; color: var(--text-primary); margin: 0; }


/* ===== ABSTAND ZWISCHEN BOXEN ===== */
[data-theme="dark"] .card-elegant,
[data-theme="dark"] .sql-editor,
[data-theme="dark"] .backup-box,
[data-theme="dark"] .result-container { margin-bottom: 20px; }