/* =============================================================
 * LIGHT THEME
 * Активируется атрибутом data-theme="light" на <html>.
 * Переопределяет переменные из style.css / dashboard.css / components.css.
 * ============================================================= */

 html[data-theme="light"] {
    --bg: #f5f6fa;
    --bg-elev: #ffffff;
    --bg-elev-2: #f0f2f7;
    --bg-elev-3: #e4e7ee;
    --border: #e2e5ec;
    --border-2: #cdd1db;
    --text: #14161c;
    --text-2: #3f4552;
    --muted: #6b7280;
    --primary: #5865F2;
    --primary-h: #4752c4;
    --primary-a: rgba(88, 101, 242, 0.12);
    --success: #16a34a;
    --success-a: rgba(22, 163, 74, 0.12);
    --danger: #dc2626;
    --danger-a: rgba(220, 38, 38, 0.12);
    --warning: #d97706;
    --warning-a: rgba(217, 119, 6, 0.12);
    --shadow: 0 4px 24px rgba(15, 20, 40, 0.10);
  }
  
  /* Admin-переменные */
  html[data-theme="light"] {
    --admin-bg:        #f5f6fa;
    --admin-bg-elev:   #ffffff;
    --admin-bg-elev-2: #f0f2f7;
    --admin-bg-elev-3: #e4e7ee;
    --admin-border:    rgba(0, 0, 0, 0.08);
    --admin-border-2:  rgba(0, 0, 0, 0.14);
    --admin-border-3:  rgba(0, 0, 0, 0.22);
    --admin-text:      #14161c;
    --admin-text-2:    #3f4552;
    --admin-muted:     #6b7280;
    --admin-accent:    #5865F2;
    --admin-accent-2:  #4752c4;
    --admin-accent-bg: rgba(88, 101, 242, 0.10);
    --admin-danger:    #dc2626;
    --admin-danger-bg: rgba(220, 38, 38, 0.08);
    --admin-success:   #16a34a;
    --admin-success-bg:rgba(22, 163, 74, 0.08);
    --admin-warning:   #d97706;
  }
  
  /* Точечные правки для светлой темы */
  html[data-theme="light"] body.admin-body {
    background-image:
      radial-gradient(1200px 600px at 0% -10%, rgba(88, 101, 242, 0.05), transparent 60%),
      radial-gradient(800px 400px at 100% 0%, rgba(138, 149, 255, 0.04), transparent 60%);
  }
  
  html[data-theme="light"] .topbar {
    background: rgba(255, 255, 255, 0.85);
  }
  
  html[data-theme="light"] .admin-topbar {
    background: rgba(255, 255, 255, 0.85);
  }
  
  html[data-theme="light"] .save-bar {
    background: rgba(255, 255, 255, 0.9);
  }
  
  html[data-theme="light"] .guild-card {
    border-color: rgba(0, 0, 0, 0.06);
  }
  
  html[data-theme="light"] .guild-banner-empty {
    background: linear-gradient(135deg, rgba(88, 101, 242, 0.18), rgba(138, 149, 255, 0.08));
  }
  
  html[data-theme="light"] .btn {
    border-color: var(--border);
  }
  
  html[data-theme="light"] .btn-primary {
    color: #fff;
  }
  
  html[data-theme="light"] .skeleton {
    background: linear-gradient(90deg, var(--bg-elev-2), var(--bg-elev-3), var(--bg-elev-2));
    background-size: 200% 100%;
  }
  
  html[data-theme="light"] .chip-tooltip {
    background: #14161c;
    color: #fff;
  }
  
  html[data-theme="light"] .chip-tooltip::after {
    border-top-color: #14161c;
  }
  
  html[data-theme="light"] .bot-preview-card {
    background: #ffffff;
  }
  
  html[data-theme="light"] .bot-preview-name {
    color: #14161c;
  }
  
  html[data-theme="light"] .landing-glow {
    background:
      radial-gradient(circle at 50% 35%, rgba(88, 101, 242, 0.12), transparent 42%),
      radial-gradient(circle at 15% 85%, rgba(88, 101, 242, 0.06), transparent 55%);
  }
  
  html[data-theme="light"] .landing-preview {
    background:
      linear-gradient(155deg, rgba(88,101,242,0.06), rgba(255,255,255,0.9) 55%),
      #ffffff;
    border-color: rgba(0,0,0,0.06);
  }
  
  html[data-theme="light"] .lp-row {
    background: rgba(0,0,0,0.03);
    border-color: rgba(0,0,0,0.06);
  }
  
  html[data-theme="light"] .lp-line {
    background: rgba(0,0,0,0.08);
  }
  
  html[data-theme="light"] .admin-table thead th {
    background: linear-gradient(180deg, var(--admin-bg-elev-3), var(--admin-bg-elev-2));
    color: var(--admin-text-2);
  }
  
  html[data-theme="light"] .admin-table tbody tr:nth-child(even) {
    background: rgba(0, 0, 0, 0.015);
  }
  
  html[data-theme="light"] .admin-table tbody tr:hover {
    background: rgba(88, 101, 242, 0.05);
  }
  
  html[data-theme="light"] .admin-edit-input {
    background: #ffffff;
    color: #14161c;
  }
  
  html[data-theme="light"] .admin-modal {
    background: #ffffff;
  }
  
  /* =============================================================
   * THEME TOGGLE (кнопка переключения)
   * ============================================================= */
  
  .theme-toggle {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 999;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg-elev);
    color: var(--text);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    box-shadow: var(--shadow);
    transition: transform 0.15s, background 0.15s, border-color 0.15s;
    -webkit-tap-highlight-color: transparent;
  }
  
  .theme-toggle:hover {
    background: var(--bg-elev-2);
    transform: scale(1.05);
  }
  
  .theme-toggle:active {
    transform: scale(0.95);
  }
  
  .theme-toggle-icon {
    display: none;
    line-height: 1;
  }
  
  /* В тёмной теме показываем солнце (переключить на светлую), в светлой — луну */
  html:not([data-theme="light"]) .theme-toggle-icon-light { display: inline-block; }
  html[data-theme="light"] .theme-toggle-icon-dark  { display: inline-block; }
  
  @media (max-width: 599px) {
    .theme-toggle {
      top: 14px;
      right: 14px;
      width: 40px;
      height: 40px;
      font-size: 16px;
    }
  }