* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, sans-serif; }
:root {
  --jm-brand-blue: #193cb8;
  --jm-brand-blue-dark: #122d8a;
  --jm-brand-blue-bg: #0d1f5a;
  --jm-dark-bg: #0f0b1e;
  --jm-dark-card: #1a1333;
  --jm-accent-orange: #fb4f14;
  --auth-bg-page: #f0f4f8;
  --auth-bg-card: #ffffff;
  --auth-border-card: #1a365d;
  --auth-text-main: #1e293b;
  --auth-text-secondary: #475569;
  --auth-bg-input: #ffffff;
  --auth-text-input: #1e293b;
  --auth-border-input: #cbd5e1;
  --auth-btn-bg: #1a365d;
  --auth-btn-text: #ffffff;
  --auth-btn-hover: #f95a17;
  --auth-border-footer: #cbd5e1;
  --auth-bg-lang: #fff;
  --auth-border-lang: #cbd5e1;
  --auth-border-lang-hover: #94a3b8;
  --auth-bg-lang-menu: #fff;
  --auth-border-lang-menu: #e2e8f0;
  --auth-text-lang-opt: #475569;
  --auth-bg-lang-opt-hover: #f1f5f9;
  --auth-text-link: #f95a17;
  --auth-bg-alert: #fee2e2;
  --auth-text-alert: #991b1b;
  --auth-shadow-focus: rgba(249, 90, 23, 0.12);
  --auth-bg-footer-hover: #eff6ff;
  --auth-text-footer-hover: #0f172a;

  --jmi-bg-body: #ffffff;
  --jmi-bg-left: #fafafa;
  --jmi-bg-right: #ffffff;
  --jmi-bg-header: #ffffff;
  --jmi-bg-hover: #f1f3f4;
  --jmi-bg-active: #e8f0fe;
  --jmi-bg-search: #f1f3f4;
  --jmi-bg-footer: #ffffff;
  --jmi-bg-addons: #fafafa;
  --jmi-bg-dropdown: #ffffff;
  --jmi-text-main: #202124;
  --jmi-text-secondary: #5f6368;
  --jmi-text-inverse: #ffffff;
  --jmi-accent-blue: #1a73e8;
  --jmi-border-color: #dadce0;
  --jmi-shadow-subtle: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  --jmi-shadow-dropdown: 0 4px 20px rgba(0,0,0,0.2);
  --jmi-modal-overlay: rgba(0,0,0,0.4);
  --jmi-tooltip-bg: #333;
  --jmi-tooltip-text: white;
  --jmi-progress-bg: #e5e7eb;
  --jmi-progress-fill: #2563eb;
  --jmi-switcher-bg-inactive: #d1d5db;
  --jmi-switcher-bg-active: #2563eb;
  --jmi-label-icon-color: #5f6368;
  --jmi-label-plus-bg: #f1f3f4;
  --jmi-label-plus-color: #202124;
  --jmi-compose-bg: linear-gradient(90deg, #2563eb, #9333ea);
  --jmi-compose-color: #ffffff;
  --jmi-orange: #f95a17;
}
body.blue-mode {
  --auth-bg-page: #1a1a2e;
  --auth-bg-card: #16213e;
  --auth-border-card: #0f3460;
  --auth-text-main: #e8e8e8;
  --auth-text-secondary: #b0b0b0;
  --auth-bg-input: #1a1a2e;
  --auth-text-input: #e0e0e0;
  --auth-border-input: #0f3460;
  --auth-btn-bg: #0f3460;
  --auth-btn-text: #ffffff;
  --auth-btn-hover: #f95a17;
  --auth-border-footer: #0f3460;
  --auth-bg-lang: #16213e;
  --auth-border-lang: #0f3460;
  --auth-border-lang-hover: #1a365d;
  --auth-bg-lang-menu: #16213e;
  --auth-border-lang-menu: #0f3460;
  --auth-text-lang-opt: #b0b0b0;
  --auth-bg-lang-opt-hover: #1a1a2e;
  --auth-text-link: #f95a17;
  --auth-bg-alert: #3d1a1a;
  --auth-text-alert: #ff6b6b;
  --auth-shadow-focus: rgba(249, 90, 23, 0.25);
  --auth-bg-footer-hover: #1a1a2e;
  --auth-text-footer-hover: #e8e8e8;

  --jmi-bg-body: #1a1a2e;
  --jmi-bg-left: #16213e;
  --jmi-bg-right: #1a1a2e;
  --jmi-bg-header: #16213e;
  --jmi-bg-hover: #1e2d4a;
  --jmi-bg-active: #1a3a5c;
  --jmi-bg-search: #1e2d4a;
  --jmi-bg-footer: #16213e;
  --jmi-bg-addons: #16213e;
  --jmi-bg-dropdown: #16213e;
  --jmi-text-main: #e8e8e8;
  --jmi-text-secondary: #b0b0b0;
  --jmi-accent-blue: #4a9eff;
  --jmi-border-color: #0f3460;
  --jmi-shadow-subtle: 0 1px 3px rgba(0,0,0,0.4);
  --jmi-shadow-dropdown: 0 4px 20px rgba(0,0,0,0.6);
  --jmi-modal-overlay: rgba(0,0,0,0.7);
  --jmi-progress-bg: #3d3d3d;
  --jmi-progress-fill: #4a9eff;
  --jmi-switcher-bg-inactive: #555;
  --jmi-switcher-bg-active: #2563eb;
  --jmi-label-icon-color: #f95a17;
  --jmi-label-plus-bg: transparent;
  --jmi-label-plus-color: #f95a17;
  --jmi-compose-bg: linear-gradient(90deg, #2563eb, #7c3aed);
  --jmi-compose-color: #ffffff;
}
body.dark-mode {
  --auth-bg-page: #0a0a0a;
  --auth-bg-card: #111111;
  --auth-border-card: #222222;
  --auth-text-main: #f0f0f0;
  --auth-text-secondary: #999999;
  --auth-bg-input: #0a0a0a;
  --auth-text-input: #f0f0f0;
  --auth-border-input: #222222;
  --auth-btn-bg: #1a1a1a;
  --auth-btn-text: #ffffff;
  --auth-btn-hover: #f95a17;
  --auth-border-footer: #222222;
  --auth-bg-lang: #111111;
  --auth-border-lang: #222222;
  --auth-border-lang-hover: #333333;
  --auth-bg-lang-menu: #111111;
  --auth-border-lang-menu: #222222;
  --auth-text-lang-opt: #999999;
  --auth-bg-lang-opt-hover: #0a0a0a;
  --auth-text-link: #f95a17;
  --auth-bg-alert: #2a0a0a;
  --auth-text-alert: #ff6b6b;
  --auth-shadow-focus: rgba(249, 90, 23, 0.3);
  --auth-bg-footer-hover: #0a0a0a;
  --auth-text-footer-hover: #f0f0f0;

  --jmi-bg-body: #0d0d0d;
  --jmi-bg-left: #111111;
  --jmi-bg-right: #080808;
  --jmi-bg-header: #111111;
  --jmi-bg-hover: #1a1a1a;
  --jmi-bg-active: #1a2a3a;
  --jmi-bg-search: #1a1a1a;
  --jmi-bg-footer: #111111;
  --jmi-bg-addons: #111111;
  --jmi-bg-dropdown: #111111;
  --jmi-text-main: #f0f0f0;
  --jmi-text-secondary: #999999;
  --jmi-accent-blue: #6ab0ff;
  --jmi-border-color: #1a1a1a;
  --jmi-shadow-subtle: 0 1px 3px rgba(0,0,0,0.6);
  --jmi-shadow-dropdown: 0 4px 20px rgba(0,0,0,0.8);
  --jmi-modal-overlay: rgba(0,0,0,0.85);
  --jmi-progress-bg: #1a1a1a;
  --jmi-progress-fill: #6ab0ff;
  --jmi-switcher-bg-inactive: #333;
  --jmi-switcher-bg-active: #555;
  --jmi-label-icon-color: #f95a17;
  --jmi-label-plus-bg: transparent;
  --jmi-label-plus-color: #f95a17;
  --jmi-compose-bg: linear-gradient(90deg, #333, #555);
  --jmi-compose-color: #ffffff;
}
.jesusmail-switch-track { width: 78px; height: 38px; background-color: var(--jmi-switcher-bg-inactive); border-radius: 19px; padding: 4px; transition: background-color 0.3s ease; display: flex; align-items: center; position: relative; }
body.blue-mode .jesusmail-switch-track, body.dark-mode .jesusmail-switch-track { background-color: var(--jmi-switcher-bg-active); }
.jesusmail-switch-thumb { width: 30px; height: 30px; background-color: #ffffff; border-radius: 50%; box-shadow: 0 2px 4px rgba(0,0,0,0.2); display: flex; align-items: center; justify-content: center; transition: transform 0.3s cubic-bezier(0.4,0,0.2,1); position: relative; }
body.blue-mode .jesusmail-switch-thumb { transform: translateX(20px); }
body.dark-mode .jesusmail-switch-thumb { transform: translateX(40px); }
.jesusmail-switch-icon-wrapper { width: 22px; height: 22px; position: absolute; transition: opacity 0.3s ease; display: flex; align-items: center; justify-content: center; }
.jesusmail-switch-icon-wrapper img { width: 22px; height: 22px; }
.jesusmail-switch-sun { opacity: 1; }
.jesusmail-switch-blue { opacity: 0; }
.jesusmail-switch-moon { opacity: 0; }
body.blue-mode .jesusmail-switch-sun { opacity: 0; }
body.blue-mode .jesusmail-switch-blue { opacity: 1; }
body.blue-mode .jesusmail-switch-moon { opacity: 0; }
body.dark-mode .jesusmail-switch-sun { opacity: 0; }
body.dark-mode .jesusmail-switch-blue { opacity: 0; }
body.dark-mode .jesusmail-switch-moon { opacity: 1; }

body.dark-mode .jesusmail-addon-plus { background: #ffffff; color: #000000; }
body.dark-mode .jesusmail-addon-plus:hover { background: #f95a17; color: #000000; }

body.blue-mode .jesusmail-addon-plus { background: #ffffff; color: #000000; }
body.blue-mode .jesusmail-addon-plus:hover { background: #f95a17; color: #000000; }

body.blue-mode .jesusmail-nav-item,
body.blue-mode .jesusmail-section-header,
body.blue-mode .jesusmail-labels-header,
body.blue-mode .jesusmail-label-item,
body.blue-mode .jesusmail-settings-item,
body.blue-mode .jesusmail-email-counts,
body.blue-mode .jesusmail-pagination .page-nav,
body.blue-mode .jesusmail-email-footer .footer-right,
body.blue-mode .jesusmail-email-footer .footer-center a,
body.blue-mode .jesusmail-email-footer .footer-center span,
body.blue-mode .jesusmail-usage-text,
body.blue-mode .jesusmail-usage-link,
body.blue-mode .jesusmail-email-interface-header .jesusmail-action-icon,
body.blue-mode .jesusmail-select-all-wrapper .select-arrow,
body.blue-mode .jesusmail-inbox-interface-topbar-left span,
body.blue-mode .jesusmail-hamburger,
body.blue-mode .jesusmail-addon-item,
body.blue-mode .jesusmail-apps-icon svg { color: #ffffff !important; }

body.blue-mode .jesusmail-nav-item svg,
body.blue-mode .jesusmail-section-header .section-icon svg,
body.blue-mode .jesusmail-labels-header .label-icon svg,
body.blue-mode .jesusmail-settings-item svg,
body.blue-mode .jesusmail-email-interface-header .jesusmail-action-icon svg,
body.blue-mode .jesusmail-apps-icon svg,
body.blue-mode .jesusmail-usage-link svg { fill: #ffffff !important; }

body.blue-mode .jesusmail-apps-grid { background: linear-gradient(135deg, #16213e 0%, #1a1a2e 100%); }
body.blue-mode .jesusmail-apps-grid .top-section-container { background: #1a1a2e; }
body.blue-mode .jesusmail-apps-grid .title { color: #e8e8e8; }
body.blue-mode .jesusmail-apps-grid .app-name { color: #b0b0b0; }
body.blue-mode .jesusmail-apps-grid .app-item:hover { background: #1e2d4a; }
body.blue-mode .jesusmail-apps-grid .apps-divider { border-color: #0f3460; }

body.dark-mode .jesusmail-nav-item svg,
body.dark-mode .jesusmail-section-header .section-icon svg,
body.dark-mode .jesusmail-labels-header .label-icon svg,
body.dark-mode .jesusmail-settings-item svg,
body.dark-mode .jesusmail-email-interface-header .jesusmail-action-icon svg,
body.dark-mode .jesusmail-apps-icon svg,
body.dark-mode .jesusmail-usage-link svg { fill: var(--jmi-text-secondary); }

body.dark-mode .jesusmail-apps-grid { background: linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 100%); }
body.dark-mode .jesusmail-apps-grid .top-section-container { background: #111111; }
body.dark-mode .jesusmail-apps-grid .title { color: var(--jmi-text-main); }
body.dark-mode .jesusmail-apps-grid .app-name { color: var(--jmi-text-secondary); }
body.dark-mode .jesusmail-apps-grid .app-item:hover { background: var(--jmi-bg-hover); }
body.dark-mode .jesusmail-apps-grid .apps-divider { border-color: var(--jmi-border-color); }

body.dark-mode .jesusmail-nav-item,
body.dark-mode .jesusmail-section-header,
body.dark-mode .jesusmail-labels-header,
body.dark-mode .jesusmail-label-item,
body.dark-mode .jesusmail-settings-item,
body.dark-mode .jesusmail-email-counts,
body.dark-mode .jesusmail-pagination .page-nav,
body.dark-mode .jesusmail-email-footer .footer-right,
body.dark-mode .jesusmail-email-footer .footer-center a,
body.dark-mode .jesusmail-email-footer .footer-center span,
body.dark-mode .jesusmail-usage-text,
body.dark-mode .jesusmail-usage-link,
body.dark-mode .jesusmail-email-interface-header .jesusmail-action-icon,
body.dark-mode .jesusmail-select-all-wrapper .select-arrow,
body.dark-mode .jesusmail-inbox-interface-topbar-left span,
body.dark-mode .jesusmail-hamburger,
body.dark-mode .jesusmail-addon-item,
body.dark-mode .jesusmail-apps-icon svg { color: var(--jmi-text-secondary); }

body.dark-mode .jesusmail-nav-item svg,
body.dark-mode .jesusmail-section-header .section-icon svg,
body.dark-mode .jesusmail-labels-header .label-icon svg,
body.dark-mode .jesusmail-settings-item svg,
body.dark-mode .jesusmail-email-interface-header .jesusmail-action-icon svg,
body.dark-mode .jesusmail-apps-icon svg,
body.dark-mode .jesusmail-usage-link svg { fill: var(--jmi-text-secondary); }