@import url('https://fonts.googleapis.com/css2?family=Alexandria:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root,
[data-theme="light"] {
  --hn-bg: #f7f9fd;
  --hn-surface: #ffffff;
  --hn-surface-soft: #f1f5fb;
  --hn-surface-tint: #edf5ff;
  --hn-text: #1d2b4f;
  --hn-text-muted: #66738e;
  --hn-text-faint: #96a1b5;
  --hn-border: rgba(76, 105, 160, 0.14);
  --hn-border-strong: rgba(76, 105, 160, 0.24);
  --hn-primary: #3567ae;
  --hn-primary-dark: #234d8b;
  --hn-primary-soft: #e8f1ff;
  --hn-pink: #c9658a;
  --hn-success: #388d69;
  --hn-shadow-sm: 0 3px 10px rgba(39, 65, 111, 0.06);
  --hn-shadow-md: 0 14px 35px rgba(39, 65, 111, 0.10);
  --hn-shadow-lg: 0 24px 55px rgba(39, 65, 111, 0.14);
  --hn-radius-sm: 12px;
  --hn-radius-md: 18px;
  --hn-radius-lg: 26px;
  --hn-content: 1180px;
  --hn-font-ar: "Alexandria", -apple-system, BlinkMacSystemFont, sans-serif;
  --hn-font-en: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, sans-serif;
}

[data-theme="dark"] {
  --hn-bg: #11192a;
  --hn-surface: #18243a;
  --hn-surface-soft: #1d2b44;
  --hn-surface-tint: #203657;
  --hn-text: #edf4ff;
  --hn-text-muted: #b5c2d9;
  --hn-text-faint: #8392ab;
  --hn-border: rgba(181, 204, 242, 0.16);
  --hn-border-strong: rgba(181, 204, 242, 0.28);
  --hn-primary: #8ab7f3;
  --hn-primary-dark: #c4dcff;
  --hn-primary-soft: #253c60;
  --hn-pink: #ef9fbd;
  --hn-success: #77caa5;
  --hn-shadow-sm: 0 3px 10px rgba(0, 0, 0, 0.16);
  --hn-shadow-md: 0 14px 35px rgba(0, 0, 0, 0.22);
  --hn-shadow-lg: 0 24px 55px rgba(0, 0, 0, 0.3);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-height: 100dvh;
  color: var(--hn-text);
  background: var(--hn-bg);
  font-family: var(--hn-font-ar);
  font-size: clamp(0.95rem, 0.91rem + 0.2vw, 1.05rem);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  transition: background-color .22s ease, color .22s ease;
}

body::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(232, 241, 255, .48), transparent 330px);
}

[data-theme="dark"] body::before {
  background: linear-gradient(180deg, rgba(45, 76, 121, .2), transparent 330px);
}

img,
svg {
  max-width: 100%;
  height: auto;
}

a,
button,
input,
select {
  -webkit-tap-highlight-color: transparent;
}

a {
  color: inherit;
}

button,
a,
input,
select {
  min-height: 44px;
}

:focus-visible {
  outline: 3px solid rgba(75, 138, 225, .7);
  outline-offset: 3px;
  border-radius: 8px;
}

.hn-skip-link {
  position: fixed;
  z-index: 10000;
  top: -70px;
  right: 18px;
  padding: 10px 14px;
  color: #fff;
  background: var(--hn-primary-dark);
  border-radius: 10px;
  text-decoration: none;
  transition: top .2s ease;
}

.hn-skip-link:focus {
  top: 14px;
}

.hn-theme-toggle {
  display: inline-grid;
  place-items: center;
  width: 42px;
  min-width: 42px;
  height: 42px;
  padding: 0;
  color: var(--hn-text-muted);
  background: var(--hn-surface);
  border: 1px solid var(--hn-border);
  border-radius: 12px;
  box-shadow: var(--hn-shadow-sm);
  cursor: pointer;
}

.hn-theme-toggle:hover {
  color: var(--hn-primary);
  border-color: var(--hn-border-strong);
  transform: translateY(-1px);
}

.site-header,
.hn-tool-header {
  position: sticky;
  z-index: 100;
  top: 0;
  width: min(100%, var(--hn-content));
  margin-inline: auto;
  background: color-mix(in srgb, var(--hn-bg) 86%, transparent);
  border-bottom: 1px solid var(--hn-border);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.hn-tool-header {
  width: min(100%, var(--hn-content));
  color: var(--hn-text);
}

.site-header a,
.hn-tool-header a {
  font-weight: 700;
}

.hn-tool-nav a {
  color: var(--hn-text-muted);
}

.hn-tool-nav a:hover,
.hn-tool-nav a.is-active {
  color: var(--hn-primary);
  background: var(--hn-primary-soft);
}

.hn-pro-home {
  width: min(calc(100% - 32px), var(--hn-content));
  margin: clamp(22px, 4vw, 54px) auto clamp(25px, 5vw, 64px);
  padding: clamp(24px, 4vw, 56px);
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr);
  align-items: center;
  gap: clamp(24px, 5vw, 72px);
  overflow: hidden;
  color: var(--hn-text);
  background: var(--hn-surface);
  border: 1px solid var(--hn-border);
  border-radius: var(--hn-radius-lg);
  box-shadow: var(--hn-shadow-md);
}

.hn-pro-home-content {
  max-width: 640px;
}

.hn-pro-label {
  display: inline-flex;
  align-items: center;
  min-height: 31px;
  margin: 0 0 14px;
  padding: 5px 11px;
  color: var(--hn-primary);
  background: var(--hn-primary-soft);
  border-radius: 999px;
  font-family: var(--hn-font-en);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: .03em;
}

.hn-pro-home h1 {
  margin: 0;
  color: var(--hn-text);
  font-size: clamp(2rem, 4vw, 3.55rem);
  font-weight: 800;
  line-height: 1.27;
  letter-spacing: -.035em;
}

.hn-pro-home p {
  max-width: 48ch;
  margin: 18px 0 0;
  color: var(--hn-text-muted);
  font-size: clamp(1rem, .96rem + .24vw, 1.13rem);
}

.hn-pro-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}

.hn-pro-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 47px;
  padding: 10px 18px;
  color: #fff;
  background: var(--hn-primary);
  border: 1px solid var(--hn-primary);
  border-radius: 12px;
  box-shadow: 0 8px 18px rgba(53, 103, 174, .18);
  font-weight: 800;
  text-decoration: none;
}

.hn-pro-button:hover {
  background: var(--hn-primary-dark);
  border-color: var(--hn-primary-dark);
  transform: translateY(-2px);
}

.hn-pro-button.secondary {
  color: var(--hn-primary);
  background: transparent;
  border-color: var(--hn-border-strong);
  box-shadow: none;
}

.hn-pro-button.secondary:hover {
  color: var(--hn-primary-dark);
  background: var(--hn-primary-soft);
  border-color: var(--hn-primary);
}

.hn-pro-metrics {
  display: grid;
  gap: 12px;
  padding: 18px;
  background: var(--hn-surface-soft);
  border: 1px solid var(--hn-border);
  border-radius: var(--hn-radius-md);
}

.hn-pro-metrics div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--hn-border);
}

.hn-pro-metrics div:last-child {
  padding-bottom: 0;
  border: 0;
}

.hn-pro-metrics strong {
  color: var(--hn-primary);
  font-family: var(--hn-font-en);
  font-size: 1.45rem;
  font-weight: 800;
}

.hn-pro-metrics span {
  color: var(--hn-text-muted);
  font-size: .86rem;
  font-weight: 700;
}

.hn-tool-page {
  color: var(--hn-text);
  background: var(--hn-bg);
}

.hn-tool-page,
.hn-tool-page .hn-tool-intro h1,
.hn-tool-page .hn-word-row h2,
.hn-tool-page .hn-letter-card h2 {
  color: var(--hn-text);
}

.hn-tool-page .hn-tool-intro > p:last-child,
.hn-tool-page .hn-word-row p,
.hn-tool-page .hn-definition,
.hn-tool-page .hn-example,
.hn-tool-page .hn-letter-example,
.hn-tool-page .hn-tool-card em {
  color: var(--hn-text-muted);
}

.hn-tool-card,
.hn-dictionary-card,
.hn-verb-card,
.hn-relation-card,
.hn-letter-card,
.hn-alphabet-progress,
.hn-toolbar {
  background: var(--hn-surface);
  border-color: var(--hn-border);
  box-shadow: var(--hn-shadow-sm);
}

.hn-tool-card:hover,
.lesson-card:hover,
.course-card:hover,
.path-card:hover {
  border-color: var(--hn-border-strong);
  box-shadow: var(--hn-shadow-md);
}

.hn-tool-card-icon {
  color: var(--hn-primary);
  background: var(--hn-primary-soft);
}

.hn-dictionary-card,
.hn-verb-card,
.hn-relation-card,
.hn-letter-card,
.lesson-card,
.course-card,
.path-card {
  content-visibility: auto;
}

.hn-speak,
.hn-filter,
.hn-learn-button,
.hn-more-button {
  font-family: var(--hn-font-ar);
}

.hn-speak,
.hn-filter {
  color: var(--hn-primary);
  background: var(--hn-primary-soft);
}

.hn-filter.is-selected,
.hn-filter:hover,
.hn-more-button {
  color: #fff;
  background: var(--hn-primary);
}

.hn-search-label input,
.hn-select-label select {
  color: var(--hn-text);
  background: var(--hn-surface);
  border-color: var(--hn-border-strong);
}

.hn-search-label input::placeholder {
  color: var(--hn-text-faint);
}

.hn-verb-forms > div,
.hn-relation-pair > div,
.hn-progress-track {
  background: var(--hn-surface-soft);
}

.hn-verb-forms b,
.hn-relation-pair b,
.hn-letter-example b {
  color: var(--hn-primary);
}

.hn-tool-footer {
  color: var(--hn-text-muted);
  border-color: var(--hn-border);
}

.hn-tool-footer > a {
  color: var(--hn-primary);
}

.phone,
.phone-frame,
.phone-mockup,
.iphone,
.device-frame,
[class*="phone-frame"],
[class*="phone-mockup"] {
  border-color: color-mix(in srgb, var(--hn-text) 90%, transparent);
  box-shadow: var(--hn-shadow-lg);
}

.lesson-card,
.course-card,
.path-card,
.tool-card,
.feature-card,
[class*="lesson-card"],
[class*="course-card"],
[class*="path-card"] {
  border-color: var(--hn-border);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.lesson-card:hover,
.course-card:hover,
.path-card:hover,
.tool-card:hover,
.feature-card:hover {
  transform: translateY(-3px);
}

@media (max-width: 760px) {
  .site-header,
  .hn-tool-header {
    position: relative;
  }

  .hn-pro-home {
    width: min(calc(100% - 22px), var(--hn-content));
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 14px;
    padding: 24px 18px;
    border-radius: 22px;
  }

  .hn-pro-home h1 {
    font-size: clamp(1.72rem, 8vw, 2.35rem);
  }

  .hn-pro-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 13px 10px;
  }

  .hn-pro-metrics div {
    display: grid;
    gap: 3px;
    padding: 0 7px;
    text-align: center;
    border: 0;
  }

  .hn-pro-metrics strong {
    font-size: 1.12rem;
  }

  .hn-pro-metrics span {
    font-size: .68rem;
  }

  .hn-theme-toggle {
    width: 38px;
    min-width: 38px;
    height: 38px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}