/* ===========================
   Gemini Theme Overrides
   =========================== */

:root,
html[data-theme="light"] {
  --primary: #00f0ff;
  --primary-dark: #00c3d9;
  --primary-light: rgba(0, 240, 255, 0.12);
  --secondary: #ff003c;
  --secondary-dark: #d90033;
  --accent: #fcee0a;
  --danger: #ff003c;
  --bg: #0b0f19;
  --bg-card: rgba(17, 24, 39, 0.84);
  --bg-input: rgba(7, 10, 17, 0.82);
  --text: #e2e8f0;
  --text-muted: #94a3b8;
  --text-light: #64748b;
  --border: rgba(0, 240, 255, 0.16);
  --shadow: 0 10px 30px rgba(2, 6, 23, 0.32);
  --shadow-md: 0 16px 36px rgba(2, 6, 23, 0.38);
  --shadow-lg: 0 24px 60px rgba(2, 6, 23, 0.46);
}

html[data-theme="dark"] {
  --primary: #00f0ff;
  --primary-dark: #00c3d9;
  --primary-light: rgba(0, 240, 255, 0.12);
  --secondary: #ff003c;
  --secondary-dark: #d90033;
  --accent: #fcee0a;
  --danger: #ff003c;
  --bg: #070a11;
  --bg-card: rgba(9, 13, 24, 0.9);
  --bg-input: rgba(5, 8, 15, 0.88);
  --text: #f8fafc;
  --text-muted: #8ea0ba;
  --text-light: #516074;
  --border: rgba(255, 0, 60, 0.16);
  --shadow: 0 12px 34px rgba(0, 0, 0, 0.44);
  --shadow-md: 0 18px 40px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 28px 70px rgba(0, 0, 0, 0.58);
}

body {
  color-scheme: dark;
  background:
    radial-gradient(circle at top left, rgba(0, 240, 255, 0.16), transparent 30%),
    radial-gradient(circle at 92% 10%, rgba(255, 0, 60, 0.12), transparent 24%),
    linear-gradient(180deg, var(--bg) 0%, #0d1321 42%, #070a11 100%);
}

html[data-theme="dark"] body {
  background:
    radial-gradient(circle at top left, rgba(0, 240, 255, 0.14), transparent 28%),
    radial-gradient(circle at 92% 10%, rgba(255, 0, 60, 0.18), transparent 24%),
    linear-gradient(180deg, #070a11 0%, #090e18 42%, #05080e 100%);
}

a {
  color: var(--primary);
}

p,
.section-subtitle,
.wizard-subtitle,
.course-info-row span,
.job-card-company,
.job-card-detail,
.auth-header p,
.auth-footer,
.modal-desc,
.modal-job-company,
.modal-meta-item,
.modal-list li,
.profile-info p,
.profile-field label,
.results-title,
.filter-count,
.course-platform,
.sidebar-user-role,
.footer-col a,
.footer-bottom p {
  color: var(--text-muted);
}

.card,
.auth-card,
.wizard-card,
.stepper,
.sidebar,
.profile-header,
.profile-section,
.sobre-content,
.modal-box,
.filters-toolbar,
.ods-card {
  background: var(--bg-card);
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(16px);
}

.card:hover,
.step-card:hover {
  box-shadow: 0 0 24px rgba(0, 240, 255, 0.08), var(--shadow-lg);
  border-color: rgba(0, 240, 255, 0.16);
}

.btn-primary {
  background: transparent;
  color: var(--primary);
  border: 1px solid var(--primary);
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.18), inset 0 0 12px rgba(0, 240, 255, 0.08);
}

.btn-primary:hover {
  background: var(--primary);
  color: #000;
  box-shadow: 0 0 22px rgba(0, 240, 255, 0.34);
}

.btn-secondary {
  background: transparent;
  color: var(--secondary);
  border: 1px solid var(--secondary);
  box-shadow: 0 0 14px rgba(255, 0, 60, 0.18), inset 0 0 12px rgba(255, 0, 60, 0.08);
}

.btn-secondary:hover {
  background: var(--secondary);
  color: #fff;
}

.btn-outline,
.btn-ghost,
.dark-toggle,
.hamburger,
.sort-btn,
.modal-close,
.radio-btn,
.filter-chip {
  background: rgba(7, 10, 17, 0.72);
  border-color: rgba(148, 163, 184, 0.16);
  color: var(--text);
}

.btn-outline:hover,
.btn-ghost:hover,
.dark-toggle:hover,
.filter-chip:hover,
.radio-btn:hover,
.sort-btn:hover {
  background: rgba(0, 240, 255, 0.08);
  border-color: var(--primary);
  color: var(--primary);
}

.btn-accent {
  background: transparent;
  color: var(--accent);
  border: 1px solid rgba(252, 238, 10, 0.7);
}

.btn-accent:hover {
  background: var(--accent);
  color: #111827;
}

.btn-danger {
  background: rgba(255, 0, 60, 0.14);
  border: 1px solid rgba(255, 0, 60, 0.28);
}

.badge-green {
  background: rgba(0, 240, 255, 0.12);
  color: var(--primary);
}

.badge-blue {
  background: rgba(0, 240, 255, 0.12);
  color: var(--primary);
}

.badge-yellow {
  background: rgba(252, 238, 10, 0.14);
  color: var(--accent);
}

.badge-gray {
  background: rgba(148, 163, 184, 0.12);
  color: var(--text-muted);
}

.badge-red,
.badge-purple {
  background: rgba(255, 0, 60, 0.12);
  color: #ff8ba7;
}

.tag,
.tag:hover,
.tag.selected,
.radio-btn.selected,
.filter-chip.active {
  color: var(--primary);
  border-color: rgba(0, 240, 255, 0.32);
  background: rgba(0, 240, 255, 0.1);
}

.tag .remove-btn {
  color: currentColor;
}

.form-input,
.filter-select,
.filters-selects select {
  background: var(--bg-input);
  border-color: rgba(148, 163, 184, 0.16);
  color: var(--text);
}

.form-input:focus,
.filter-select:focus,
.filters-selects select:focus {
  outline: none;
  border-color: rgba(0, 240, 255, 0.45);
  box-shadow: 0 0 0 4px rgba(0, 240, 255, 0.12);
}

.form-input.valid {
  border-color: rgba(0, 240, 255, 0.65);
}

.form-input.invalid {
  border-color: rgba(255, 0, 60, 0.65);
}

#navbar,
.nav-mobile {
  background: rgba(7, 10, 17, 0.84);
  border-color: rgba(0, 240, 255, 0.12);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(14px);
}

.nav-logo {
  color: var(--text);
}

.nav-logo:hover {
  color: var(--text);
}

.nav-logo i {
  color: var(--primary);
  text-shadow: 0 0 12px rgba(0, 240, 255, 0.26);
}

.nav-links a:hover,
.nav-links a.active,
.nav-mobile a:hover,
.nav-mobile a.active {
  background: rgba(0, 240, 255, 0.1);
  color: var(--primary);
}

.nav-avatar,
.sidebar-user-avatar,
.profile-avatar-lg,
.testimonial-avatar {
  background: linear-gradient(135deg, var(--primary), #00bfd4 55%, var(--secondary));
  color: #04131a;
  box-shadow: 0 0 18px rgba(0, 240, 255, 0.2);
}

.hamburger span {
  background: var(--text);
}

.hero,
.page-hero,
.sobre-intro,
.jobs-cta-banner,
.stats-section {
  background:
    linear-gradient(135deg, rgba(0, 240, 255, 0.18), rgba(11, 15, 25, 0.94) 45%, rgba(255, 0, 60, 0.18)),
    #0b0f19;
  color: #fff;
}

.hero p,
.page-hero p,
.sobre-intro p,
.jobs-cta-banner p,
.hero-stat-item .label,
.stat-item .stat-label {
  color: rgba(255, 255, 255, 0.86);
}

.hero-badge {
  background: rgba(0, 240, 255, 0.1);
  border-color: rgba(0, 240, 255, 0.18);
  color: var(--primary);
}

.hero .btn-white {
  background: transparent;
  color: var(--primary);
  border: 1px solid var(--primary);
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.18), inset 0 0 12px rgba(0, 240, 255, 0.08);
}

.hero .btn-white:hover {
  background: var(--primary);
  color: #000;
}

.hero .btn-outline-white {
  color: var(--secondary);
  border-color: rgba(255, 0, 60, 0.5);
}

.hero .btn-outline-white:hover {
  background: var(--secondary);
  border-color: var(--secondary);
  color: #fff;
}

.hero-stats,
.footer-bottom {
  border-top-color: rgba(255, 255, 255, 0.12);
}

.step-card {
  background: var(--bg-card);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.step-number {
  background: var(--primary);
  color: #000;
}

.step-icon {
  background: rgba(0, 240, 255, 0.12);
  color: var(--primary);
}

.testimonial-stars {
  color: var(--accent);
}

.ods-card.ods4 {
  border-left-color: var(--primary);
}

.ods-card.ods8 {
  border-left-color: var(--secondary);
}

.ods4 .ods-icon {
  background: linear-gradient(135deg, var(--primary), #00bfd4);
}

.ods8 .ods-icon {
  background: linear-gradient(135deg, var(--secondary), #ff4d6d);
}

footer {
  background: rgba(7, 10, 17, 0.96);
  color: var(--text-muted);
}

.footer-brand .nav-logo,
.footer-col h4,
.footer-col a:hover,
.footer-badge {
  color: #fff;
}

.social-icon {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-muted);
}

.social-icon:hover {
  background: rgba(0, 240, 255, 0.14);
  color: var(--primary);
}

.filters-toolbar {
  background: rgba(7, 10, 17, 0.84);
  border-bottom: 1px solid rgba(0, 240, 255, 0.12);
}

.filter-chip.active {
  color: var(--primary);
}

.course-card-pub .card-top-bar,
.course-card-top {
  background: linear-gradient(90deg, var(--primary), var(--secondary));
}

.platform-tag,
.modal-platform {
  background: rgba(0, 240, 255, 0.1);
  color: var(--primary);
}

.free-badge,
.job-match,
.success-icon,
.confirm-icon {
  background: rgba(0, 240, 255, 0.12);
  color: var(--primary);
}

.paid-badge {
  background: rgba(255, 0, 60, 0.12);
  color: #ff8ba7;
}

.level-badge {
  background: rgba(252, 238, 10, 0.14);
  color: var(--accent);
}

.sobre-section h2 {
  color: var(--primary);
  border-bottom-color: rgba(0, 240, 255, 0.18);
}

.auth-wrapper,
.dashboard-content {
  background: transparent;
}

.stepper-item.done:not(:last-child)::after,
.progress-bar {
  background: linear-gradient(90deg, var(--primary), var(--secondary));
}

.stepper-circle {
  background: rgba(7, 10, 17, 0.82);
}

.stepper-item.active .stepper-circle,
.stepper-item.done .stepper-circle {
  color: #000;
}

.selected-preview,
.rec-filters {
  background: rgba(7, 10, 17, 0.58);
  border-color: rgba(0, 240, 255, 0.12);
}

.sidebar-item:hover,
.sidebar-item.active,
.bottom-nav-item.active {
  background: rgba(0, 240, 255, 0.1);
  color: var(--primary);
}

.sidebar-logout:hover {
  background: rgba(255, 0, 60, 0.12);
}

.profile-completion .pct {
  color: var(--primary);
  text-shadow: 0 0 18px rgba(0, 240, 255, 0.18);
}

.bottom-nav {
  background: rgba(7, 10, 17, 0.92);
  border-top: 1px solid rgba(0, 240, 255, 0.12);
  box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.35);
}

.modal-backdrop {
  background: rgba(2, 6, 23, 0.76);
  backdrop-filter: blur(8px);
}

.modal-box {
  background: rgba(9, 13, 24, 0.96);
}

.modal-close:hover {
  background: var(--secondary);
  border-color: var(--secondary);
}

.toast {
  background: rgba(7, 10, 17, 0.96);
  border-color: rgba(0, 240, 255, 0.16);
  border-left-color: var(--primary);
}

.toast.success {
  border-left-color: var(--primary);
}

.toast.error {
  border-left-color: var(--secondary);
}

/* ===========================
   Theme Mode Overrides
   =========================== */

:root,
html[data-theme="light"] {
  --primary: #06b6d4;
  --primary-dark: #0891b2;
  --primary-light: rgba(14, 165, 233, 0.1);
  --secondary: #ec4899;
  --secondary-dark: #db2777;
  --accent: #f59e0b;
  --danger: #ef4444;
  --bg: #f6f8fc;
  --bg-card: rgba(255, 255, 255, 0.86);
  --bg-input: rgba(255, 255, 255, 0.92);
  --text: #0f172a;
  --text-muted: #64748b;
  --text-light: #94a3b8;
  --border: rgba(14, 165, 233, 0.16);
  --shadow: 0 10px 30px rgba(15, 23, 42, 0.1);
  --shadow-md: 0 16px 36px rgba(15, 23, 42, 0.12);
  --shadow-lg: 0 24px 60px rgba(15, 23, 42, 0.14);
}

html[data-theme="dark"] {
  --primary: #00f0ff;
  --primary-dark: #00c3d9;
  --primary-light: rgba(0, 240, 255, 0.12);
  --secondary: #ff003c;
  --secondary-dark: #d90033;
  --accent: #fcee0a;
  --danger: #ff003c;
  --bg: #070a11;
  --bg-card: rgba(9, 13, 24, 0.9);
  --bg-input: rgba(5, 8, 15, 0.88);
  --text: #f8fafc;
  --text-muted: #8ea0ba;
  --text-light: #516074;
  --border: rgba(0, 240, 255, 0.16);
  --shadow: 0 12px 34px rgba(0, 0, 0, 0.44);
  --shadow-md: 0 18px 40px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 28px 70px rgba(0, 0, 0, 0.58);
}

body {
  color-scheme: light;
  background:
    radial-gradient(circle at top left, rgba(14, 165, 233, 0.12), transparent 28%),
    radial-gradient(circle at 92% 10%, rgba(236, 72, 153, 0.08), transparent 22%),
    linear-gradient(180deg, #fbfdff 0%, #eef6ff 42%, #f6f8fc 100%);
}

html[data-theme="dark"] body {
  color-scheme: dark;
  background:
    radial-gradient(circle at top left, rgba(0, 240, 255, 0.16), transparent 30%),
    radial-gradient(circle at 92% 10%, rgba(255, 0, 60, 0.16), transparent 24%),
    linear-gradient(180deg, #070a11 0%, #090e18 42%, #05080e 100%);
}

.card,
.auth-card,
.wizard-card,
.stepper,
.sidebar,
.profile-header,
.profile-section,
.sobre-content,
.modal-box,
.filters-toolbar,
.ods-card,
.step-card {
  background: var(--bg-card);
  border: 1px solid rgba(255, 255, 255, 0.74);
  box-shadow: var(--shadow-lg);
}

html[data-theme="dark"] .card,
html[data-theme="dark"] .auth-card,
html[data-theme="dark"] .wizard-card,
html[data-theme="dark"] .stepper,
html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .profile-header,
html[data-theme="dark"] .profile-section,
html[data-theme="dark"] .sobre-content,
html[data-theme="dark"] .modal-box,
html[data-theme="dark"] .filters-toolbar,
html[data-theme="dark"] .ods-card,
html[data-theme="dark"] .step-card {
  border-color: rgba(255, 255, 255, 0.05);
}

.btn-primary,
.btn-secondary,
.btn-accent {
  background: transparent;
}

.btn-primary {
  color: var(--primary);
  border: 1px solid var(--primary);
  box-shadow: 0 8px 18px rgba(14, 165, 233, 0.12);
}

.btn-secondary {
  color: var(--secondary);
  border: 1px solid var(--secondary);
  box-shadow: 0 8px 18px rgba(236, 72, 153, 0.12);
}

.btn-accent {
  color: var(--accent);
  border: 1px solid rgba(245, 158, 11, 0.55);
  box-shadow: 0 8px 18px rgba(245, 158, 11, 0.1);
}

html[data-theme="dark"] .btn-primary {
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.18), inset 0 0 12px rgba(0, 240, 255, 0.08);
}

html[data-theme="dark"] .btn-secondary {
  box-shadow: 0 0 16px rgba(255, 0, 60, 0.18), inset 0 0 12px rgba(255, 0, 60, 0.08);
}

html[data-theme="dark"] .btn-accent {
  box-shadow: 0 0 16px rgba(252, 238, 10, 0.16), inset 0 0 12px rgba(252, 238, 10, 0.08);
}

.btn-primary:hover {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 16px 30px rgba(14, 165, 233, 0.2);
}

.btn-secondary:hover {
  background: var(--secondary);
  color: #fff;
  box-shadow: 0 16px 30px rgba(236, 72, 153, 0.22);
}

.btn-accent:hover {
  background: var(--accent);
  color: #111827;
  box-shadow: 0 16px 30px rgba(245, 158, 11, 0.18);
}

html[data-theme="dark"] .btn-primary:hover {
  color: #000;
  box-shadow: 0 0 26px rgba(0, 240, 255, 0.34);
}

html[data-theme="dark"] .btn-secondary:hover {
  box-shadow: 0 0 26px rgba(255, 0, 60, 0.34);
}

html[data-theme="dark"] .btn-accent:hover {
  box-shadow: 0 0 26px rgba(252, 238, 10, 0.28);
}

.btn-outline,
.btn-ghost,
.dark-toggle,
.hamburger,
.sort-btn,
.modal-close,
.radio-btn,
.filter-chip,
.form-input,
.filter-select,
.filters-selects select,
.selected-preview,
.rec-filters,
.social-icon {
  background: rgba(255, 255, 255, 0.9);
  border-color: var(--border);
  color: var(--text);
}

html[data-theme="dark"] .btn-outline,
html[data-theme="dark"] .btn-ghost,
html[data-theme="dark"] .dark-toggle,
html[data-theme="dark"] .hamburger,
html[data-theme="dark"] .sort-btn,
html[data-theme="dark"] .modal-close,
html[data-theme="dark"] .radio-btn,
html[data-theme="dark"] .filter-chip,
html[data-theme="dark"] .form-input,
html[data-theme="dark"] .filter-select,
html[data-theme="dark"] .filters-selects select,
html[data-theme="dark"] .selected-preview,
html[data-theme="dark"] .rec-filters,
html[data-theme="dark"] .social-icon {
  background: rgba(7, 10, 17, 0.76);
}

#navbar,
.nav-mobile,
.filters-toolbar {
  background: rgba(255, 255, 255, 0.78);
  border-color: var(--border);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
}

html[data-theme="dark"] #navbar,
html[data-theme="dark"] .nav-mobile,
html[data-theme="dark"] .filters-toolbar {
  background: rgba(7, 10, 17, 0.84);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.28);
}

.nav-logo i {
  text-shadow: none;
}

html[data-theme="dark"] .nav-logo i {
  text-shadow: 0 0 12px rgba(0, 240, 255, 0.26);
}

.nav-links a:hover,
.nav-links a.active,
.nav-mobile a:hover,
.nav-mobile a.active,
.sidebar-item:hover,
.sidebar-item.active,
.bottom-nav-item.active,
.filter-chip.active,
.radio-btn.selected,
.tag.selected {
  background: rgba(14, 165, 233, 0.1);
  color: var(--primary);
}

html[data-theme="dark"] .nav-links a:hover,
html[data-theme="dark"] .nav-links a.active,
html[data-theme="dark"] .nav-mobile a:hover,
html[data-theme="dark"] .nav-mobile a.active,
html[data-theme="dark"] .sidebar-item:hover,
html[data-theme="dark"] .sidebar-item.active,
html[data-theme="dark"] .bottom-nav-item.active,
html[data-theme="dark"] .filter-chip.active,
html[data-theme="dark"] .radio-btn.selected,
html[data-theme="dark"] .tag.selected {
  background: rgba(0, 240, 255, 0.1);
  box-shadow: inset 0 0 0 1px rgba(0, 240, 255, 0.14), 0 0 18px rgba(0, 240, 255, 0.08);
}

.nav-avatar,
.sidebar-user-avatar,
.profile-avatar-lg,
.testimonial-avatar,
.step-number,
.step-icon,
.ods4 .ods-icon,
.ods8 .ods-icon {
  background: linear-gradient(135deg, var(--primary), #38bdf8 55%, var(--secondary));
  color: #fff;
  box-shadow: 0 14px 28px rgba(14, 165, 233, 0.16);
}

html[data-theme="dark"] .nav-avatar,
html[data-theme="dark"] .sidebar-user-avatar,
html[data-theme="dark"] .profile-avatar-lg,
html[data-theme="dark"] .testimonial-avatar,
html[data-theme="dark"] .step-number,
html[data-theme="dark"] .step-icon,
html[data-theme="dark"] .ods4 .ods-icon,
html[data-theme="dark"] .ods8 .ods-icon {
  background: linear-gradient(135deg, var(--primary), #00bfd4 55%, var(--secondary));
  color: #04131a;
  box-shadow: 0 0 22px rgba(0, 240, 255, 0.2);
}

.hero,
.page-hero,
.sobre-intro,
.jobs-cta-banner,
.stats-section {
  background:
    linear-gradient(135deg, rgba(14, 165, 233, 0.14), rgba(255, 255, 255, 0.94) 48%, rgba(236, 72, 153, 0.1)),
    #f6f8fc;
  color: var(--text);
}

html[data-theme="dark"] .hero,
html[data-theme="dark"] .page-hero,
html[data-theme="dark"] .sobre-intro,
html[data-theme="dark"] .jobs-cta-banner,
html[data-theme="dark"] .stats-section {
  background:
    linear-gradient(135deg, rgba(0, 240, 255, 0.18), rgba(11, 15, 25, 0.94) 45%, rgba(255, 0, 60, 0.18)),
    #0b0f19;
  color: #fff;
}

.hero p,
.page-hero p,
.sobre-intro p,
.jobs-cta-banner p,
.hero-stat-item .label,
.stat-item .stat-label {
  color: var(--text-muted);
}

html[data-theme="dark"] .hero p,
html[data-theme="dark"] .page-hero p,
html[data-theme="dark"] .sobre-intro p,
html[data-theme="dark"] .jobs-cta-banner p,
html[data-theme="dark"] .hero-stat-item .label,
html[data-theme="dark"] .stat-item .stat-label {
  color: rgba(255, 255, 255, 0.86);
}

.hero-badge,
.platform-tag,
.modal-platform,
.free-badge,
.job-match,
.success-icon,
.confirm-icon {
  background: rgba(14, 165, 233, 0.12);
  color: var(--primary);
}

html[data-theme="dark"] .hero-badge,
html[data-theme="dark"] .platform-tag,
html[data-theme="dark"] .modal-platform,
html[data-theme="dark"] .free-badge,
html[data-theme="dark"] .job-match,
html[data-theme="dark"] .success-icon,
html[data-theme="dark"] .confirm-icon {
  background: rgba(0, 240, 255, 0.12);
}

.hero .btn-white {
  background: transparent;
  color: var(--primary);
  border: 1px solid var(--primary);
}

.hero .btn-outline-white {
  color: var(--secondary);
  border-color: rgba(236, 72, 153, 0.45);
}

html[data-theme="dark"] .hero .btn-white {
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.18), inset 0 0 12px rgba(0, 240, 255, 0.08);
}

html[data-theme="dark"] .hero .btn-outline-white {
  border-color: rgba(255, 0, 60, 0.5);
}

.paid-badge {
  background: rgba(236, 72, 153, 0.12);
  color: var(--secondary);
}

html[data-theme="dark"] .paid-badge {
  background: rgba(255, 0, 60, 0.12);
  color: #ff8ba7;
}

.level-badge {
  background: rgba(245, 158, 11, 0.14);
  color: var(--accent);
}

.stepper-item.done:not(:last-child)::after,
.progress-bar,
.course-card-pub .card-top-bar,
.course-card-top {
  background: linear-gradient(90deg, var(--primary), var(--secondary));
}

html[data-theme="dark"] .progress-bar,
html[data-theme="dark"] .course-card-pub .card-top-bar,
html[data-theme="dark"] .course-card-top {
  box-shadow: 0 0 18px rgba(0, 240, 255, 0.16);
}

footer {
  background: rgba(255, 255, 255, 0.88);
  color: var(--text-muted);
}

html[data-theme="dark"] footer {
  background: rgba(7, 10, 17, 0.96);
}

html[data-theme="dark"] .social-icon:hover {
  box-shadow: 0 0 18px rgba(0, 240, 255, 0.14);
}

.bottom-nav {
  background: rgba(255, 255, 255, 0.92);
  border-top: 1px solid var(--border);
  box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.08);
}

html[data-theme="dark"] .bottom-nav {
  background: rgba(7, 10, 17, 0.92);
  border-top-color: rgba(0, 240, 255, 0.12);
  box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.35);
}

.modal-backdrop {
  background: rgba(15, 23, 42, 0.3);
}

html[data-theme="dark"] .modal-backdrop {
  background: rgba(2, 6, 23, 0.76);
}

.toast {
  background: rgba(255, 255, 255, 0.92);
  border-color: var(--border);
  border-left-color: var(--primary);
  color: var(--text);
}

html[data-theme="dark"] .toast {
  background: rgba(7, 10, 17, 0.96);
  border-color: rgba(0, 240, 255, 0.16);
}