/* A calm, EF-inspired finish that preserves the existing Germany image and Yallah mark. */
:root {
  color-scheme: light;
  --background: #f2f4f5;
  --foreground: #202832;
  --card: #ffffff;
  --card-foreground: #202832;
  --primary: #a74944;
  --primary-foreground: #ffffff;
  --secondary: #e8ecee;
  --muted-foreground: #596875;
  --border: #d5dde2;
  --ring: #a74944;
  --shadow: 0 10px 28px rgba(27, 39, 50, .08);
  --paper: var(--background);
  --white: var(--card);
  --soft: var(--secondary);
  --text: var(--foreground);
  --navy: #202832;
  --deep: #354657;
  --muted: var(--muted-foreground);
  --line: var(--border);
  --teal: var(--primary);
  --aqua: #f8e9e7;
  --lime: #f3e5c5;
  --blue: #4f6e8d;
  --accent: var(--primary);
  --accent-soft: #f8e9e7;
  --accent-line: #e7b9b4;
  --accent-ink: var(--primary-foreground);
  --red: #a83d45;
  --red-bg: #fae9ea;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --background: #131d27;
  --foreground: #edf1f3;
  --card: #202d39;
  --card-foreground: #edf1f3;
  --primary: #e88a7e;
  --primary-foreground: #241b1a;
  --secondary: #293744;
  --muted-foreground: #bbc6ce;
  --border: #40505d;
  --ring: #e88a7e;
  --shadow: 0 12px 30px rgba(0, 0, 0, .2);
  --paper: var(--background);
  --white: var(--card);
  --soft: var(--secondary);
  --text: var(--foreground);
  --navy: #edf1f3;
  --deep: #d5dfe5;
  --muted: var(--muted-foreground);
  --line: var(--border);
  --teal: var(--primary);
  --aqua: #3b2d30;
  --lime: #3b3540;
  --blue: #a8c6e1;
  --accent: var(--primary);
  --accent-soft: #3b2d30;
  --accent-line: #845c58;
  --accent-ink: var(--primary-foreground);
  --red: #f09a9c;
  --red-bg: #472c33;
}

body:not(.is-welcome) {
  background-color: var(--background);
  color: var(--foreground);
}

/* Keep the original Berlin backdrop visible under a soft, readable veil. */
.germany-backdrop::after {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--background) 28%, transparent),
    color-mix(in srgb, var(--background) 72%, transparent) 62%,
    var(--background));
}

.brand-logo {
  display: block;
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  object-fit: contain;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(24, 43, 62, .14);
}

.profile-logo {
  display: block;
  object-fit: contain;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 3px 12px rgba(24, 43, 62, .14);
}

.profile-hub,
.profile-destination,
.profile-empty,
.profile-certificate,
.profile-support-card,
.tutorial-step {
  border-color: var(--border);
  background: var(--card);
  color: var(--foreground);
  box-shadow: var(--shadow);
}

.profile-page-head h1,
.profile-empty h2,
.profile-certificate h2,
.profile-support-card h2 {
  color: var(--foreground);
}

.profile-page-head .eyebrow,
.profile-empty-icon,
.profile-certificate.is-earned {
  color: var(--primary);
}

.profile-page-head .subtle,
.profile-identity-copy span,
.profile-action-copy > span,
.profile-note,
.profile-empty p,
.profile-certificate p,
.profile-support-card p,
.tutorial-step-copy p {
  color: var(--muted-foreground);
}

.profile-identity,
.profile-action {
  border-color: var(--border);
}

.profile-action,
.profile-action-icon {
  color: var(--foreground);
}

.profile-action:hover,
.profile-action:focus-visible {
  background: var(--secondary);
  outline-color: var(--primary);
}

.profile-avatar,
.tutorial-step-number {
  background: #263440;
  color: #fff;
}

.profile-action-arrow {
  color: var(--muted-foreground);
}

.profile-support-card {
  background: var(--secondary);
}

.profile-certificate-status {
  background: #263440;
  color: #fff;
}

.masari-home,
.masari-root {
  --mblue: var(--primary);
}

.masari-study-time,
.masari-month-goal,
.masari-study-history {
  border-color: #394b5a;
  background: #24323e;
}

.masari-time-metrics > div { background: #2d3d4a; }
.masari-week-chart { background: #2a3946; }
.masari-week-track { background: #43515d; }
.masari-week-fill { background: #e88a7e; }
.masari-month-goal-head strong { color: #f1a198; }
.masari-month-goal progress { accent-color: #e88a7e; }
.masari-month-goal select { border-color: #62717d; background: #30414e; color: #f2f4f5; }
.masari-history-row { background: #2d3d4a; }

@media (max-width: 600px) {
  .brand-logo { width: 42px; height: 42px; }
}

/* One shared, low-glare palette across the landing page and signed-in app. */
body.is-welcome {
  --welcome-page: #f2f4f5;
  --welcome-surface: #ffffff;
  --welcome-surface-soft: #e8ecee;
  --welcome-text: #202832;
  --welcome-muted: #596875;
  --welcome-border: #d5dde2;
  --welcome-accent: #a74944;
  --welcome-accent-foreground: #ffffff;
  --welcome-accent-soft: #f8e9e7;
  --welcome-accent-line: #e7b9b4;
}
html[data-theme="dark"] body.is-welcome {
  --welcome-page: #131d27;
  --welcome-surface: #202d39;
  --welcome-surface-soft: #293744;
  --welcome-text: #edf1f3;
  --welcome-muted: #bbc6ce;
  --welcome-border: #40505d;
  --welcome-accent: #e88a7e;
  --welcome-accent-foreground: #241b1a;
  --welcome-accent-soft: #3b2d30;
  --welcome-accent-line: #845c58;
}
.topnav .nav-link { display: grid; justify-items: start; gap: 1px; min-width: max-content; line-height: 1.35; }
.topnav .nav-link bdi { color: var(--muted); font-size: 11px; font-weight: 700; }
.topnav .nav-link span { font-size: 13px; }
@media (max-width: 1100px) {
  .topnav { justify-content: flex-start; overflow-x: auto; scrollbar-width: thin; }
}
.learning-feature {
  display: grid;
  grid-template-columns: minmax(220px, .85fr) minmax(0, 1.15fr);
  align-items: stretch;
  gap: 0;
  min-height: 230px;
  margin: 8px 0 24px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--card);
  box-shadow: var(--shadow);
}
.learning-feature-photo { display: block; width: 100%; height: 100%; min-height: 230px; max-height: 300px; object-fit: cover; }
.learning-feature-copy { display: grid; align-content: center; gap: 7px; min-width: 0; padding: clamp(20px, 4vw, 38px); }
.learning-feature-copy .eyebrow,.masari-eyebrow { color: var(--primary); font-weight: 800; }
.learning-feature-copy h1 { margin: 0; color: var(--foreground); font-size: clamp(26px, 3vw, 38px); line-height: 1.4; }
.learning-feature-copy p:last-child { margin: 0; color: var(--muted-foreground); line-height: 1.8; }
.learn-heading.learning-feature { grid-template-columns: minmax(0, .9fr) minmax(0, 1fr) auto; align-items: center; }
.learn-heading.learning-feature .button { margin-inline: 16px; white-space: nowrap; }
.masari-progress-summary { background: var(--card)!important; color: var(--foreground)!important; border-color: var(--border)!important; box-shadow: var(--shadow)!important; }
.masari-progress-summary h2,.masari-level-progress h2,.masari-dashboard-title { color: var(--foreground)!important; }
.masari-dashboard-label { color: var(--primary); background: var(--accent-soft); }
.masari-dashboard-note,.masari-dashboard-goal small { color: var(--muted-foreground)!important; }
.masari-dashboard-goal,.masari-level-card,.masari-dashboard-totals>div { background: var(--secondary)!important; border-color: var(--border)!important; }
.masari-dashboard-goal-head strong,.masari-level-card em,.masari-dashboard-totals strong { color: var(--primary)!important; }
.masari-dashboard-goal progress,.masari-level-card progress,.masari-month-goal progress { accent-color: var(--primary)!important; }
.masari-dashboard-goal progress::-webkit-progress-bar,.masari-level-card progress::-webkit-progress-bar { background: var(--border)!important; }
.masari-dashboard-goal progress::-webkit-progress-value,.masari-level-card progress::-webkit-progress-value,.masari-dashboard-goal progress::-moz-progress-bar,.masari-level-card progress::-moz-progress-bar { background: var(--primary)!important; }
.masari-level-card .masari-level-code,.masari-level-card>span,.masari-level-card>small,.masari-dashboard-metrics span,.masari-dashboard-metrics strong,.masari-dashboard-totals span { color: var(--foreground)!important; }
.masari-level-card.is-current { background: var(--accent-soft)!important; border-color: var(--primary)!important; }
.masari-study-time,.masari-month-goal,.masari-study-history { background: var(--card)!important; border-color: var(--border)!important; box-shadow: var(--shadow); }
.masari-study-time h2,.masari-month-goal h2,.masari-study-history h2,.masari-time-metrics strong,.masari-week-day strong,.masari-history-row strong { color: var(--foreground)!important; }
.masari-time-metrics>div,.masari-week-chart,.masari-history-row { background: var(--secondary)!important; }
.masari-time-metrics span,.masari-week-day small,.masari-history-row span,.masari-history-row small,.masari-month-goal>small { color: var(--muted-foreground)!important; }
.masari-week-track { background: var(--border)!important; }
.masari-week-fill { background: var(--primary)!important; }
.masari-month-goal-head strong { color: var(--primary)!important; }
.masari-month-goal select { background: var(--card)!important; border-color: var(--border)!important; color: var(--foreground)!important; }
.masari-dashboard-continue { color: var(--primary-foreground)!important; background: var(--primary)!important; border-color: var(--primary)!important; }
.profile-progress-teaser { margin: 20px 0 10px; padding: clamp(18px, 3vw, 28px); border: 1px solid var(--border); border-radius: 20px; background: var(--card); box-shadow: var(--shadow); }
.profile-progress-head { display: grid; gap: 5px; }
.profile-progress-eyebrow { width: fit-content; padding: 4px 9px; border-radius: 5px; background: var(--accent-soft); color: var(--primary); font: 800 11px/1.4 system-ui,sans-serif; letter-spacing: .1em; }
.profile-progress-title { margin: 3px 0; color: var(--foreground); font-size: clamp(22px, 3vw, 30px); }
.profile-progress-head .profile-note { margin: 0; }
.profile-progress-stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; margin: 18px 0; }
.profile-progress-stat { display: grid; gap: 3px; min-width: 0; padding: 12px; border-radius: 11px; background: var(--secondary); }
.profile-progress-stat strong { color: var(--primary); font-size: clamp(16px,2vw,22px); direction: ltr; unicode-bidi: isolate; overflow-wrap: anywhere; }
.profile-progress-stat small { color: var(--foreground); font-size: 11px; font-weight: 750; }
.profile-progress-stat span { color: var(--muted-foreground); font-size: 12px; }
.profile-level-overview { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 7px; padding: 13px; border-radius: 12px; background: var(--secondary); }
.profile-level-row { display: grid; justify-items: center; gap: 5px; min-width: 0; }
.profile-level-row bdi { font-weight: 800; }
.profile-level-row progress { width: 100%; height: 8px; accent-color: var(--primary); }
.profile-level-row span { color: var(--muted-foreground); font-size: 10px; direction: ltr; unicode-bidi: isolate; }
.profile-progress-link { width: 100%; margin-top: 14px; border-color: var(--border)!important; color: var(--foreground)!important; }
.profile-progress-link:hover { background: var(--accent-soft)!important; }
@media (max-width: 760px) {
  .learning-feature,.learn-heading.learning-feature { grid-template-columns: 1fr; }
  .learning-feature-photo { height: 170px; min-height: 170px; max-height: 190px; }
  .learning-feature-copy { padding: 18px; }
  .learn-heading.learning-feature .button { margin: 0 16px 16px; }
  .profile-progress-teaser { padding: 16px; }
  .profile-progress-stats { gap: 6px; }
  .profile-progress-stat { padding: 9px 7px; }
  .profile-level-overview { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .mobile-nav button { display: grid; justify-items: center; align-content: center; gap: 0; min-width: 108px; min-height: 58px; white-space: normal; line-height: 1.25; }
  .mobile-nav button bdi { color: #b8c9df; font-size: 10px; font-weight: 750; }
  .mobile-nav button span { font-size: 12px; }
  .mobile-nav button small { font-size: 10px; }
}
@media (max-width: 380px) { .mobile-nav button { min-width: 99px; } }