/* Public site light theme (colors aligned with app light palette) */
html[data-theme="light"] {
  --bg: #F8F9FB;
  --surface: #FFFFFF;
  --surface2: #F9FCFD;
  --border: #DAE7E7;
  --border-bright: #C8DFDF;
  --text: #242E38;
  --text-dim: #59646E;
  --text-muted: #59646E;
  --cyan: #009287;
  --cyan-dim: rgba(0, 146, 135, 0.14);
  --cyan-glow: rgba(0, 146, 135, 0.24);
  --accent: #009287;
}

html[data-theme="light"] body {
  background: var(--bg) !important;
  color: var(--text);
}

html[data-theme="light"] body::before {
  opacity: 0.018;
}

html[data-theme="light"] .hero,
html[data-theme="light"] .card,
html[data-theme="light"] .seo-block,
html[data-theme="light"] .counter-card,
html[data-theme="light"] .meta,
html[data-theme="light"] .timeline-item,
html[data-theme="light"] .day-card,
html[data-theme="light"] .app-download-block,
html[data-theme="light"] .related-card,
html[data-theme="light"] .seo-wrap {
  box-shadow: none;
}

html[data-theme="light"] .hero {
  background: linear-gradient(180deg, #FFFFFF, #F9FCFD) !important;
  border-color: #DAE7E7 !important;
}

html[data-theme="light"] .hero::after {
  background: radial-gradient(circle, rgba(0, 146, 135, 0.14), rgba(0, 146, 135, 0)) !important;
}

html[data-theme="light"] .counter-card,
html[data-theme="light"] .duration-card,
html[data-theme="light"] .app-benefit {
  background: #FFFFFF !important;
  border-color: #DAE7E7 !important;
}

html[data-theme="light"] .counter-value,
html[data-theme="light"] .duration-value {
  color: #009287 !important;
  text-shadow: none !important;
}

html[data-theme="light"] .counter-label,
html[data-theme="light"] .duration-label,
html[data-theme="light"] .timeline-item .sub,
html[data-theme="light"] .day-card .t {
  color: #59646E !important;
}

html[data-theme="light"] .timeline-item .date,
html[data-theme="light"] .day-card .d,
html[data-theme="light"] .app-benefit strong,
html[data-theme="light"] .progress-value {
  color: #009287 !important;
}

html[data-theme="light"] .app-download-block {
  background: linear-gradient(145deg, #FFFFFF, #F9FCFD) !important;
  border-color: #DAE7E7 !important;
}

html[data-theme="light"] #seo-panel .seo-wrap {
  background: linear-gradient(145deg, #e9f5f7, #dbe7ef) !important;
  border-color: #bfd5de !important;
  box-shadow: 0 8px 24px rgba(77, 163, 255, 0.08) !important;
}

html[data-theme="light"] #seo-panel .seo-card {
  background: rgba(255, 255, 255, 0.88) !important;
  border-color: #c7dade !important;
}

html[data-theme="light"] .related-card,
html[data-theme="light"] .quick-card,
html[data-theme="light"] .step,
html[data-theme="light"] .phrase,
html[data-theme="light"] .tip,
html[data-theme="light"] .seo-card,
html[data-theme="light"] .field,
html[data-theme="light"] .metric,
html[data-theme="light"] .goal,
html[data-theme="light"] .grade-item,
html[data-theme="light"] .contest-row,
html[data-theme="light"] .ach-line,
html[data-theme="light"] .info {
  background: #FFFFFF !important;
  border-color: #D2E3E4 !important;
}

html[data-theme="light"] .related-card h3,
html[data-theme="light"] .quick-card h3,
html[data-theme="light"] .step h3,
html[data-theme="light"] .goal .name,
html[data-theme="light"] .grade-item h4 {
  color: #1E2934 !important;
}

html[data-theme="light"] .related-card p,
html[data-theme="light"] .quick-card p,
html[data-theme="light"] .step p,
html[data-theme="light"] .tip,
html[data-theme="light"] .goal .desc,
html[data-theme="light"] .field .sub-note,
html[data-theme="light"] .metric .k,
html[data-theme="light"] .info,
html[data-theme="light"] .contest-title,
html[data-theme="light"] .phrase {
  color: #5A6672 !important;
}

html[data-theme="light"] .metric .v,
html[data-theme="light"] .field .value,
html[data-theme="light"] .step .nr,
html[data-theme="light"] .goal .tag {
  color: #008E84 !important;
}

html[data-theme="light"] .step .nr,
html[data-theme="light"] .goal .tag {
  background: rgba(0, 146, 135, 0.12) !important;
  border-color: rgba(0, 146, 135, 0.28) !important;
}

html[data-theme="light"] .grade-btn,
html[data-theme="light"] .stepper button {
  background: #FFFFFF !important;
  color: #4B5763 !important;
  border-color: #D2E3E4 !important;
}

html[data-theme="light"] .grade-btn.active {
  background: rgba(0, 146, 135, 0.14) !important;
  border-color: rgba(0, 146, 135, 0.42) !important;
  color: #0B7F76 !important;
}

html[data-theme="light"] .stepper .num {
  color: #5A6672 !important;
}

html[data-theme="light"] .cta,
html[data-theme="light"] .contact-form button,
html[data-theme="light"] .seo-btn {
  background: linear-gradient(120deg, #9cf0e6 0%, #73ded3 45%, #54c9bd 100%) !important;
  background-size: 220% 100% !important;
  animation: light-cta-gradient-rtl 3.8s linear infinite alternate;
  color: #062B2A !important;
  border-color: transparent !important;
  box-shadow: 0 10px 20px rgba(0, 146, 135, 0.16) !important;
}

html[data-theme="light"] .cta:hover,
html[data-theme="light"] .contact-form button:hover,
html[data-theme="light"] .seo-btn:hover {
  filter: brightness(0.97);
}

@keyframes light-cta-gradient-rtl {
  0% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

html[data-theme="light"] .testimonial-card {
  background: linear-gradient(160deg, #FFFFFF, #F7FBFC) !important;
  border-color: #CFE2E4 !important;
  box-shadow: 0 1px 0 rgba(36, 46, 56, 0.03), inset 0 0 0 1px rgba(0, 146, 135, 0.08) !important;
}

html[data-theme="light"] .testimonial-quote {
  color: #2B3440 !important;
}

html[data-theme="light"] .testimonial-name {
  color: #009287 !important;
}

html[data-theme="light"] .testimonial-tag {
  color: #0B7F76 !important;
  background: rgba(0, 146, 135, 0.1) !important;
  border-color: rgba(0, 146, 135, 0.3) !important;
}

html[data-theme="light"] .testimonials-arrow {
  background: #FFFFFF !important;
  color: #45505D !important;
  border-color: #CFE2E4 !important;
}

html[data-theme="light"] .testimonials-arrow:hover {
  color: #009287 !important;
  border-color: #00A192 !important;
}

html[data-theme="light"] .app-benefit span,
html[data-theme="light"] .app-download-block p,
html[data-theme="light"] .seo-block p,
html[data-theme="light"] .source,
html[data-theme="light"] #statusLine {
  color: #59646E !important;
}

html[data-theme="light"] .progress-track {
  background: rgba(89, 100, 110, 0.15) !important;
  border-color: #DAE7E7 !important;
}

html[data-theme="light"] .progress-fill {
  background: linear-gradient(90deg, #01A29A, #009287) !important;
  box-shadow: none !important;
}

.nav-theme-toggle {
  border: 1px solid var(--border, #1e293b);
  border-radius: 10px;
  background: var(--surface, #111827);
  color: var(--text-dim, #94a3b8);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}

.nav-theme-toggle:hover {
  border-color: var(--accent, #009287);
  color: var(--text, #e2e8f0);
}

.nav-theme-toggle .icon-sun,
.nav-theme-toggle .icon-moon {
  font-size: 14px;
  line-height: 1;
}

html[data-theme="dark"] .nav-theme-toggle .icon-sun { display: inline; }
html[data-theme="dark"] .nav-theme-toggle .icon-moon { display: none; }
html[data-theme="light"] .nav-theme-toggle .icon-sun { display: none; }
html[data-theme="light"] .nav-theme-toggle .icon-moon { display: inline; }

html[data-theme="light"] .nav-theme-toggle {
  background: #FFFFFF;
  color: #59646E;
}

html[data-theme="light"] nav,
html[data-theme="light"] body.has-shared-shell nav {
  background: rgba(248, 249, 251, 0.96) !important;
  border-bottom-color: #D6E4E5 !important;
}

html[data-theme="light"] nav .logo,
html[data-theme="light"] body.has-shared-shell .logo {
  color: #009287 !important;
}

html[data-theme="light"] nav .nav-links a,
html[data-theme="light"] body.has-shared-shell .nav-links a {
  color: #2F3A45 !important;
}

html[data-theme="light"] nav .nav-links a:hover,
html[data-theme="light"] body.has-shared-shell .nav-links a:hover {
  color: #0E141B !important;
}

html[data-theme="light"] nav .nav-toggle,
html[data-theme="light"] body.has-shared-shell .nav-toggle {
  background: #FFFFFF !important;
  color: #2F3A45 !important;
  border-color: #D0E0E1 !important;
}

html[data-theme="light"] nav .nav-backdrop,
html[data-theme="light"] body.has-shared-shell .nav-backdrop {
  background: rgba(36, 46, 56, 0.18) !important;
}

@media (max-width: 768px) {
  .nav-theme-toggle {
    width: 100%;
    justify-content: center;
    font-size: 13px;
    padding: 10px 12px;
    background: rgba(15, 23, 42, 0.45);
  }

  html[data-theme="light"] .nav-theme-toggle {
    background: rgba(255, 255, 255, 0.92);
  }

  html[data-theme="light"] nav .nav-links,
  html[data-theme="light"] body.has-shared-shell .nav-links {
    background: rgba(248, 249, 251, 0.99) !important;
    border-left-color: #D6E4E5 !important;
  }

  html[data-theme="light"] nav .nav-links a,
  html[data-theme="light"] body.has-shared-shell .nav-links a {
    background: #FFFFFF !important;
    border-color: #D8E6E7 !important;
    color: #2F3A45 !important;
  }
}