/* =====================
   Reset & Base
   ===================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --bg: #171d18;
  --surface: #222a23;
  --surface2: #2b342c;
  --surface-raised: #253027;
  --border: #3c493e;
  --primary: #d6f36c;
  --primary-hover: #c8e45f;
  --accent: #b7d1a4;
  --warning: #f0c189;
  --secondary: #333125;
  --secondary-hover: #464333;
  --danger: #f08b79;
  --danger-hover: #dc7565;
  --success: #b4d99c;
  --error: #f08b79;
  --text: #f3f4e9;
  --text-muted: #b6c0ae;
  --radius: 20px;
  --radius-sm: 12px;
  --shadow: 0 16px 50px rgba(0,0,0,0.2);
  --ahzo-lime: #d6f36c;
  --ahzo-ink: #262a23;
  --ahzo-cream: #f7f6ef;
}

/* Light mode */
body.light {
  --bg: #f7f6ef;
  --surface: #fffef9;
  --surface2: #eeeee3;
  --surface-raised: #fffef9;
  --border: #dedfd3;
  --primary: #526b28;
  --primary-hover: #3c5420;
  --accent: #536e46;
  --warning: #a16b2f;
  --secondary: #f8ecd9;
  --secondary-hover: #f1dfc4;
  --danger: #b94535;
  --danger-hover: #993c2e;
  --success: #497043;
  --error: #b94535;
  --text: #262a23;
  --text-muted: #6d7268;
  --shadow: 0 16px 50px rgba(45,50,29,0.07);
}

body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Custom icon language: one line weight, rounded corners, no icon font. */
.ui-icon {
  width: 1.2em;
  height: 1.2em;
  display: inline-block;
  flex: 0 0 auto;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.18em;
}

.ui-icon-label {
  width: 1.05rem;
  height: 1.05rem;
}

.language-mark {
  --language-mark-color: var(--primary);
  width: 28px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 28px;
  border: 1px solid color-mix(in srgb, var(--language-mark-color) 48%, var(--border));
  border-radius: 7px;
  background: color-mix(in srgb, var(--language-mark-color) 13%, var(--surface));
  color: color-mix(in srgb, var(--language-mark-color) 78%, white);
  font-size: 0.56rem;
  font-weight: 850;
  line-height: 1;
  letter-spacing: 0.055em;
  direction: ltr;
}

.language-mark--en, .language-mark--uk { --language-mark-color: #46a9dd; }
.language-mark--tr, .language-mark--it { --language-mark-color: #e06f78; }
.language-mark--ar, .language-mark--es { --language-mark-color: #dc9c44; }
.language-mark--fa, .language-mark--el { --language-mark-color: #b978d2; }
.language-mark--ru, .language-mark--fr { --language-mark-color: #52ad8a; }
.language-mark--de { --language-mark-color: #8075ef; }

/* =====================
   Layout
   ===================== */
.app-header {
  width: 100%;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 10px 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 100;
}


.header-logo-link {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.header-logo {
  height: 40px;
  width: auto;
  display: block;
}

.header-brand {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: 1px;
  margin-left: 8px;
}

.header-lang-cluster {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  vertical-align: middle;
}

.header-target-flag {
  display: inline-flex;
  line-height: 1;
}

.header-lang-arrow {
  display: inline-flex;
  font-size: 0.72rem;
  color: var(--text-muted);
  line-height: 1;
  margin: 0 2px;
  transition: color 0.15s;
}

.header-lang-arrow:hover {
  color: var(--text);
}

.header-ui-flag {
  display: inline-flex;
  line-height: 1;
}

.container {
  width: 100%;
  max-width: 680px;
  padding: 24px 16px;
  flex: 1;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 72%, transparent);
  outline-offset: 3px;
}

.container.wordlist-container {
  max-width: 1040px;
}

.container.home-container {
  max-width: 1180px;
}

.container.study-container {
  max-width: 1180px;
}

/* =====================
   Screens
   ===================== */
.screen {
  display: none;
}

.screen.active {
  display: block;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* =====================
   Buttons
   ===================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 20px;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  text-decoration: none;
}

.btn:active { transform: scale(0.97); }

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

.btn-secondary {
  background: #2a2a1a;
  border: 1px solid #e0a030;
  color: #e0a030;
}
.btn-secondary:hover { background: #e0a030; color: #fff; }

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

.btn-danger-outline {
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--danger) 72%, var(--border));
  color: var(--danger);
}

.btn-danger-outline:hover {
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  border-color: var(--danger);
  color: color-mix(in srgb, var(--danger) 78%, white);
}

.btn-outline {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
}
.btn-outline:hover { background: var(--surface2); color: var(--text); }

.btn-sm {
  padding: 6px 14px;
  font-size: 0.8rem;
}

.btn-lg {
  padding: 14px 32px;
  font-size: 1rem;
  border-radius: var(--radius);
}

/* =====================
   Home Screen
   ===================== */
.home-header {
  margin-bottom: 24px;
}

.home-header h1,
.home-header h2 {
  font-size: 1.4rem;
  margin-bottom: 6px;
}

.home-header p {
  color: var(--text-muted);
  font-size: 0.9rem;
}

.upload-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.upload-section-icon {
  font-size: 1.6rem;
  color: var(--primary);
  font-weight: 300;
  line-height: 1;
  flex-shrink: 0;
}

.upload-section-text {
  flex: 1;
}

.upload-section-text p {
  color: var(--text-muted);
  font-size: 0.88rem;
  margin: 0;
}

.sets-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 12px;
  font-size: 0.8rem;
}

.set-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  transition: border-color 0.15s;
}

.set-card:hover {
  border-color: var(--primary);
}

.set-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.set-name {
  font-weight: 600;
  font-size: 1rem;
}

.set-meta {
  font-size: 0.8rem;
  color: var(--text-muted);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
}

.set-stat {
  font-weight: 600;
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 0.75rem;
}

.set-stat-due {
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.12);
}

.set-stat-new {
  color: var(--text-muted);
  background: var(--surface2);
}

.set-stat-learned {
  color: #22c55e;
  background: rgba(34, 197, 94, 0.12);
}

.set-stat-next {
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border);
}

.due-badge {
  color: var(--primary);
  font-weight: 600;
}

.set-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.set-actions .btn {
  flex: 1 1 calc(50% - 4px);
  min-width: 0;
  justify-content: center;
}

/* Geniş ekranda sağa yasla, butonlar doğal genişlikte */
@media (min-width: 520px) {
  .set-actions {
    flex-wrap: nowrap;
    justify-content: flex-end;
    width: 100%;
  }
  .set-actions .btn {
    flex: 0 0 auto;
  }
}

.empty-msg {
  color: var(--text-muted);
  text-align: center;
  padding: 40px 0;
  font-size: 0.9rem;
}

.trust-section {
  margin-top: 28px;
  padding: 22px 0 8px;
  border-top: 1px solid var(--border);
}

.trust-copy {
  margin-bottom: 16px;
}

.trust-kicker {
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.trust-copy h2 {
  font-size: 1.15rem;
  line-height: 1.25;
  margin-bottom: 8px;
}

.trust-copy p,
.trust-card p {
  color: var(--text-muted);
  font-size: 0.88rem;
  line-height: 1.6;
}

.trust-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.trust-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
}

.trust-card h3 {
  font-size: 0.9rem;
  margin-bottom: 6px;
}

.site-footer {
  width: 100%;
  border-top: 1px solid var(--border);
  background: var(--surface);
}

.site-footer-inner {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 18px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.site-footer strong {
  color: var(--text);
  font-size: 0.95rem;
}

.site-footer p {
  color: var(--text-muted);
  font-size: 0.8rem;
  line-height: 1.5;
  margin-top: 3px;
}

.footer-links {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.footer-links a {
  color: var(--text-muted);
  font-size: 0.82rem;
  text-decoration: none;
}

.footer-links a:hover {
  color: var(--primary);
}

#cookie-consent {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 180;
  max-width: 680px;
  margin: 0 auto;
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.cookie-consent-copy strong {
  display: block;
  margin-bottom: 3px;
  font-size: 0.9rem;
}

.cookie-consent-copy p {
  color: var(--text-muted);
  font-size: 0.8rem;
  line-height: 1.5;
}

.cookie-consent-copy a {
  color: var(--primary);
}

.cookie-consent-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.cookie-consent-actions button {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 8px 12px;
}

#cookie-decline {
  background: transparent;
  color: var(--text-muted);
}

#cookie-accept {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.content-page {
  display: block;
  max-width: 780px;
  margin: 0 auto;
  padding: 32px 20px 72px;
  align-items: initial;
}

.content-page .back-link {
  display: inline-block;
  margin-bottom: 22px;
  color: var(--primary);
  text-decoration: none;
  font-size: 0.9rem;
}

.content-page .back-link:hover {
  text-decoration: underline;
}

.content-page header {
  margin-bottom: 28px;
}

.content-page h1 {
  font-size: 2rem;
  line-height: 1.15;
  margin-bottom: 10px;
}

.content-page .lead {
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.7;
}

.content-page section {
  margin-top: 30px;
}

.content-page h2 {
  font-size: 1.2rem;
  margin-bottom: 10px;
}

.content-page h3 {
  font-size: 0.98rem;
  margin-bottom: 6px;
}

.content-page p,
.content-page li {
  color: var(--text-muted);
  line-height: 1.75;
  font-size: 0.95rem;
}

.content-page ul,
.content-page ol {
  padding-left: 22px;
  margin-top: 8px;
}

.content-page li + li {
  margin-top: 6px;
}

.content-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.content-card,
.notice-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
}

.notice-card {
  border-color: rgba(242, 184, 75, 0.55);
  background: rgba(242, 184, 75, 0.08);
}

.content-page a {
  color: var(--primary);
}

.practice-unit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.practice-unit-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  min-height: 128px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  transition: border-color 0.18s ease, transform 0.18s ease;
}

.practice-unit-card:hover {
  border-color: var(--primary);
  transform: translateY(-1px);
}

.practice-unit-heading {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.practice-unit-number {
  color: var(--primary);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.practice-unit-topic {
  font-size: 0.94rem;
  font-weight: 700;
  line-height: 1.35;
}

.practice-unit-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.content-page .practice-unit-action {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.content-page .practice-unit-action-secondary {
  background: var(--surface2);
  color: var(--text);
}

.content-page .practice-unit-action-secondary:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.content-page .practice-unit-action-primary {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}

.content-page .practice-unit-action-primary:hover {
  filter: brightness(1.08);
}

.content-page .practice-language-note {
  margin-top: 12px;
  font-size: 0.86rem;
}

.vocabulary-preview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.vocabulary-preview-card {
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.vocabulary-preview-card h3 {
  color: var(--primary);
}

.vocabulary-preview-card p {
  margin: 0;
  font-size: 0.9rem;
}

/* =====================
   Progress Bar
   ===================== */
.progress-bar {
  width: 100%;
  height: 4px;
  background: var(--surface2);
  border-radius: 2px;
  margin-bottom: 20px;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  background: var(--primary);
  border-radius: 2px;
  transition: width 0.3s ease;
}

/* =====================
   Session Header
   ===================== */
.session-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.session-header .set-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.session-header .progress-text {
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* =====================
   Flashcard
   ===================== */
.flashcard-study-layout {
  display: block;
}

.flashcard-study-main {
  min-width: 0;
}

.fc-secondary-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 24px;
  text-align: center;
}

.fc-session-sidebar {
  position: fixed;
  z-index: 70;
  top: 84px;
  right: 18px;
  bottom: 18px;
  width: clamp(300px, 24vw, 360px);
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 18px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 14px;
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--primary) 12%, transparent), transparent 42%),
    var(--surface);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.2);
}

.fc-sidebar-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.fc-sidebar-kicker {
  display: block;
  margin-bottom: 5px;
  color: var(--primary);
  font-size: 0.67rem;
  font-weight: 800;
  letter-spacing: 0.75px;
  text-transform: uppercase;
}

.fc-sidebar-header h2 {
  color: var(--text);
  font-size: 1.05rem;
  line-height: 1.25;
}

.fc-sidebar-count {
  flex: 0 0 auto;
  padding: 5px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface2);
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 700;
  white-space: nowrap;
}

.fc-sidebar-desc {
  margin-top: 9px;
  color: var(--text-muted);
  font-size: 0.76rem;
  line-height: 1.45;
}

.fc-sidebar-list {
  flex: 1;
  min-height: 0;
  max-height: none;
  margin-top: 16px;
  padding-right: 5px;
  overflow-y: auto;
  list-style: none;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.fc-sidebar-list li {
  list-style: none;
}

.fc-sidebar-row {
  width: 100%;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-bottom-color: var(--border);
  border-radius: 9px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.fc-sidebar-list li:last-child .fc-sidebar-row {
  border-bottom-color: transparent;
}

.fc-sidebar-row:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--primary) 38%, var(--border));
  background: color-mix(in srgb, var(--primary) 8%, var(--surface));
}

.fc-sidebar-row:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--primary) 35%, transparent);
  outline-offset: -2px;
}

.fc-sidebar-row.is-current {
  border-color: color-mix(in srgb, var(--primary) 72%, var(--border));
  background: color-mix(in srgb, var(--primary) 14%, var(--surface));
}

.fc-sidebar-index {
  color: var(--text-muted);
  font-size: 0.67rem;
  font-variant-numeric: tabular-nums;
  font-weight: 750;
}

.fc-sidebar-row.is-current .fc-sidebar-index {
  color: var(--primary);
}

.fc-sidebar-row.is-completed {
  grid-template-columns: minmax(48px, auto) minmax(0, 1fr);
  cursor: default;
  opacity: 0.5;
}

.fc-sidebar-row.is-completed .fc-sidebar-index {
  color: var(--success);
  width: max-content;
  padding: 3px 7px;
  border: 1px solid color-mix(in srgb, var(--success) 28%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--success) 10%, transparent);
  font-size: 0.67rem;
  line-height: 1;
  white-space: nowrap;
}

.fc-sidebar-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

.fc-sidebar-copy strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fc-sidebar-copy strong {
  color: var(--text);
  font-size: 0.82rem;
  line-height: 1.25;
}

.fc-scene {
  perspective: 1000px;
  margin: 0 auto 24px;
}

.fc-card {
  width: 100%;
  min-height: 260px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  border-radius: var(--radius);
}

.fc-card.flipped {
  transform: rotateY(180deg);
}

.fc-face {
  position: absolute;
  width: 100%;
  min-height: 260px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
  border: 1px solid var(--border);
}

.speech-btn {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--primary);
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.speech-btn:hover {
  transform: translateY(-1px);
  border-color: var(--primary);
  background: var(--surface2);
}

.speech-btn:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--primary) 35%, transparent);
  outline-offset: 2px;
}

.speech-btn[hidden] {
  display: none;
}

.speech-btn-icon {
  display: inline-flex;
  line-height: 1;
}

.speech-btn-icon .ui-icon {
  width: 20px;
  height: 20px;
}

.speech-btn.is-speaking {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 14%, var(--surface));
}

.speech-btn.is-speaking .speech-btn-icon {
  animation: speech-pulse 0.7s ease-in-out infinite alternate;
}

.speech-btn-card {
  position: absolute;
  z-index: 2;
  top: 14px;
  right: 14px;
}

.fc-card:not(.flipped) .fc-back,
.fc-card.flipped .fc-front {
  pointer-events: none;
}

@keyframes speech-pulse {
  from { transform: scale(0.9); opacity: 0.65; }
  to { transform: scale(1.12); opacity: 1; }
}

.fc-front {
  background: var(--surface);
}

.fc-back {
  background: var(--surface2);
  transform: rotateY(180deg);
}

.fc-word {
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 8px;
  color: var(--text);
}

.fc-hint {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* Çok parçalı kelimede gizli parçalar için alt çizgili boşluk */
.fc-word-blank {
  display: inline-block;
  width: var(--blank-width, 2em);
  border-bottom: 3px solid var(--primary);
  margin-bottom: 2px;
  opacity: 0.5;
  vertical-align: bottom;
}

.fc-translate {
  font-size: 1.4rem;
  font-weight: 600;
  text-align: center;
  color: var(--primary);
  margin-bottom: 16px;
}

.fc-word-back {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-muted);
  text-align: center;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  width: 100%;
}

.fc-example {
  font-size: 0.9rem;
  color: var(--text-muted);
  text-align: center;
  font-style: italic;
  margin-bottom: 4px;
}

.fc-example-tr {
  font-size: 0.85rem;
  color: var(--text-muted);
  text-align: center;
  opacity: 0.7;
}

.fc-next-review {
  margin-top: 12px;
  font-size: 0.75rem;
  color: var(--text-muted);
  background: var(--surface);
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid var(--border);
}

.fc-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.rating-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.rating-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 600;
  transition: all 0.15s;
  min-width: 70px;
}

.rating-btn:hover { transform: translateY(-2px); }
.rating-btn:active { transform: scale(0.96); }

.rating-btn.q0 { border-color: #e05252; }
.rating-btn.q0:hover { background: #e05252; color: #fff; }
.rating-btn.q1 { border-color: #e0b852; }
.rating-btn.q1:hover { background: #e0b852; color: #fff; }
.rating-btn.q2 { border-color: #4caf7d; }
.rating-btn.q2:hover { background: #4caf7d; color: #fff; }
.rating-btn.q3 { border-color: #52b8e0; }
.rating-btn.q3:hover { background: #52b8e0; color: #fff; }

.rating-mark {
  height: 17px;
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  color: var(--text-muted);
}

.rating-mark-bar {
  width: 3px;
  height: 5px;
  display: block;
  border-radius: 2px;
  background: currentColor;
  opacity: 0.18;
}

.rating-mark-bar:nth-child(2) { height: 8px; }
.rating-mark-bar:nth-child(3) { height: 11px; }
.rating-mark-bar:nth-child(4) { height: 15px; }
.rating-mark-bar.is-active { opacity: 1; }
.rating-mark.q0 { color: #e05252; }
.rating-mark.q1 { color: #e0b852; }
.rating-mark.q2 { color: #4caf7d; }
.rating-mark.q3 { color: #52b8e0; }
.rating-btn:hover .rating-mark { color: currentColor; }

.rating-btn .rating-label {
  font-size: 0.75rem;
  font-weight: 600;
}

.rating-btn .rating-time {
  font-size: 0.7rem;
  font-weight: 400;
  opacity: 0.7;
}

/* =====================
   Quiz
   ===================== */
.quiz-word-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 8px;
}

.quiz-word {
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 0;
}

.quiz-example {
  font-size: 0.9rem;
  color: var(--text-muted);
  text-align: center;
  font-style: italic;
  margin-bottom: 4px;
}

.quiz-example-tr {
  font-size: 0.85rem;
  color: var(--text-muted);
  text-align: center;
  opacity: 0.7;
  margin-bottom: 24px;
}

.quiz-question-label {
  font-size: 0.85rem;
  color: var(--text-muted);
  text-align: center;
  margin-bottom: 16px;
}

.quiz-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 20px;
}

.quiz-option {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 14px 12px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  text-align: center;
  line-height: 1.4;
}

.quiz-option:hover:not(:disabled) {
  border-color: var(--primary);
  background: var(--surface2);
}

.quiz-option.correct {
  background: rgba(76, 175, 125, 0.2);
  border-color: var(--success);
  color: var(--success);
}

.quiz-option.wrong {
  background: rgba(224, 82, 82, 0.2);
  border-color: var(--error);
  color: var(--error);
}

.quiz-option:disabled {
  cursor: default;
}

.quiz-feedback {
  text-align: center;
  font-weight: 600;
  font-size: 1rem;
  min-height: 28px;
  margin-bottom: 12px;
}

.quiz-feedback.correct { color: var(--success); }
.quiz-feedback.wrong { color: var(--error); }

.quiz-next {
  display: flex;
  justify-content: center;
}

/* =====================
   Session End
   ===================== */
.end-screen {
  text-align: center;
  padding: 40px 0;
}

.end-screen h2 {
  font-size: 1.6rem;
  margin-bottom: 8px;
}

.end-screen .end-subtitle {
  color: var(--text-muted);
  margin-bottom: 32px;
  font-size: 0.9rem;
}

.end-stats {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}

.stat-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 28px;
  min-width: 100px;
}

.stat-box .stat-value {
  font-size: 2rem;
  font-weight: 700;
  display: block;
}

.stat-box .stat-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 4px;
  display: block;
}

.stat-box.correct .stat-value { color: var(--success); }
.stat-box.wrong .stat-value { color: var(--error); }
.stat-box.pct .stat-value { color: var(--primary); }

.end-actions {
  display: flex;
  gap: 12px;
  margin-top: 28px;
  justify-content: center;
  flex-wrap: wrap;
}

/* =====================
   Toast
   ===================== */
#toast {
  opacity: 0;
  visibility: hidden;
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 12px 24px;
  border-radius: 24px;
  font-size: 0.9rem;
  font-weight: 500;
  box-shadow: var(--shadow);
  transition: transform 0.3s ease, opacity 0.3s ease;
  z-index: 999;
  white-space: nowrap;
}

#toast.show {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* =====================
   Responsive
   ===================== */
@media (max-width: 480px) {
  .quiz-options {
    grid-template-columns: 1fr;
  }

  .rating-buttons {
    gap: 6px;
  }

  .rating-btn {
    min-width: 56px;
    padding: 8px 10px;
    font-size: 0.75rem;
  }

  .fc-word, .quiz-word {
    font-size: 1.6rem;
  }
}

/* =====================
   Word List Screen
   ===================== */
.wordlist-header {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 20px;
  padding: 20px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 9%, transparent), transparent 55%),
    var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.12);
}

.wl-top-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.wordlist-title-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  flex: 1;
  min-width: 0;
}

.wordlist-title {
  font-size: 1.25rem;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.wl-title-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}

.wl-group-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 3px 9px;
  color: var(--text-muted);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
}

.wl-settings-toggle {
  flex: 0 0 auto;
  color: var(--text-muted);
}

.wl-settings-toggle.is-open {
  color: var(--primary);
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, var(--surface));
}

.wl-study-intro {
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.wl-section-kicker {
  display: block;
  margin-bottom: 5px;
  color: var(--primary);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.wl-study-intro h2,
.wl-list-toolbar h2 {
  margin: 0;
  color: var(--text);
  font-size: 1.05rem;
}

.wl-study-intro p {
  margin: 6px 0 0;
  color: var(--text-muted);
  font-size: 0.83rem;
  line-height: 1.5;
}

.wordlist-header-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.wordlist-action-card.btn {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  min-height: 82px;
  min-width: 0;
  padding: 13px 15px;
  color: var(--text);
  background: color-mix(in srgb, var(--primary) 7%, var(--surface-raised));
  border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--border));
  white-space: normal;
  text-align: left;
  box-shadow: none;
}

.wordlist-action-card.btn-secondary {
  background: color-mix(in srgb, #d3a437 8%, var(--surface-raised));
  border-color: color-mix(in srgb, #d3a437 32%, var(--border));
}

.wordlist-action-card.btn-schreiben {
  background: color-mix(in srgb, #44c78b 8%, var(--surface-raised));
  border-color: color-mix(in srgb, #44c78b 30%, var(--border));
}

.wordlist-action-card.btn-listen-all {
  background: color-mix(in srgb, #5599e8 8%, var(--surface-raised));
  border-color: color-mix(in srgb, #5599e8 30%, var(--border));
}

.wordlist-action-card:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
}

.wl-action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 13%, var(--surface));
  border-radius: 12px;
  font-size: 1.15rem;
  font-weight: 800;
}

.wl-action-icon .ui-icon {
  width: 22px;
  height: 22px;
}

.wl-action-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 3px;
}

.wl-action-copy strong {
  color: var(--text);
  font-size: 0.9rem;
}

.wl-action-copy small {
  color: var(--text-muted);
  font-size: 0.73rem;
  font-weight: 500;
  line-height: 1.35;
}

.btn-listen-all.wordlist-action-card.is-speaking {
  color: #fff;
  border-color: var(--danger);
  background: var(--danger);
}

.btn-listen-all.wordlist-action-card.is-speaking:hover {
  border-color: var(--danger-hover);
  background: var(--danger-hover);
}

.btn-listen-all.wordlist-action-card.is-speaking .wl-action-icon {
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
}

.btn-listen-all.wordlist-action-card.is-speaking .wl-action-copy strong,
.btn-listen-all.wordlist-action-card.is-speaking .wl-action-copy small {
  color: #fff;
}

.wl-speech-floating-controls {
  position: fixed;
  z-index: 120;
  top: 50%;
  right: max(16px, env(safe-area-inset-right));
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--primary) 44%, var(--border));
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transform: translateY(-50%);
  animation: wl-speech-controls-in 0.2s ease-out;
}

.wl-speech-floating-controls[hidden] {
  display: none;
}

.wl-speech-control {
  position: relative;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface2);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-size: 1.05rem;
  font-weight: 900;
  box-shadow: 0 7px 18px rgba(0, 0, 0, 0.22);
  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, opacity 0.16s ease;
}

.wl-speech-control .ui-icon {
  width: 21px;
  height: 21px;
}

.wl-speech-control:hover:not(:disabled) {
  transform: translateX(-2px);
}

.wl-speech-control:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--primary) 38%, transparent);
  outline-offset: 2px;
}

.wl-speech-control:disabled {
  cursor: default;
  opacity: 0.38;
}

.wl-speech-control::after {
  content: attr(aria-label);
  position: absolute;
  top: 50%;
  right: calc(100% + 10px);
  padding: 6px 9px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transform: translate(4px, -50%);
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.wl-speech-control:hover:not(:disabled)::after,
.wl-speech-control:focus-visible::after {
  opacity: 1;
  transform: translate(0, -50%);
}

.wl-speech-pause:not(:disabled) {
  border-color: color-mix(in srgb, var(--warning) 60%, var(--border));
  color: var(--warning);
}

.wl-speech-play:not(:disabled) {
  border-color: color-mix(in srgb, var(--success) 64%, var(--border));
  color: var(--success);
  animation: speech-pulse 0.8s ease-in-out infinite alternate;
}

.wl-speech-stop:not(:disabled) {
  border-color: color-mix(in srgb, var(--danger) 70%, var(--border));
  color: #fff;
  background: color-mix(in srgb, var(--danger) 82%, var(--surface));
}

.wl-speech-floating-controls.is-paused .wl-speech-pause {
  border-color: var(--warning);
  background: color-mix(in srgb, var(--warning) 22%, var(--surface2));
  color: var(--warning);
  opacity: 1;
}

@keyframes wl-speech-controls-in {
  from { opacity: 0; transform: translate(14px, -50%); }
  to { opacity: 1; transform: translate(0, -50%); }
}

.wordlist-table-wrap {
  overflow-x: auto;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.wordlist-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.wordlist-table thead tr {
  background: var(--surface2);
}

.wordlist-table th {
  padding: 12px 16px;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}

.wordlist-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.wordlist-table tbody tr:last-child td {
  border-bottom: none;
}

.wordlist-table tbody tr:hover {
  background: var(--surface2);
}

.wordlist-table tbody tr.is-auto-speaking td {
  background: color-mix(in srgb, var(--primary) 14%, var(--surface));
}

.wordlist-table tbody tr.is-auto-speaking .wl-word {
  color: color-mix(in srgb, var(--primary) 72%, var(--text));
}

.wordlist-table tbody tr.is-auto-speaking .speech-btn {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 18%, var(--surface2));
}

.wordlist-table tbody tr.is-auto-speaking .speech-btn-icon {
  animation: speech-pulse 0.7s ease-in-out infinite alternate;
}

.wl-word-cell {
  min-width: 220px;
}

.wl-word-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.speech-btn-compact {
  width: 34px;
  height: 34px;
  flex-basis: 34px;
  box-shadow: none;
}

.speech-btn-compact .speech-btn-icon {
  font-size: 0.9rem;
}

.wl-word {
  font-weight: 600;
  color: var(--text);
}

.wl-example {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 8px;
  padding: 7px 0 7px 10px;
  border-left: 2px solid var(--primary);
  color: var(--text-muted);
  line-height: 1.4;
}

.wl-example-text {
  color: var(--text);
  font-size: 0.84rem;
  font-style: italic;
}

.wl-example-translate {
  color: var(--text-muted);
  font-size: 0.8rem;
}

.wl-translate {
  color: var(--text-muted);
}

.wl-time {
  white-space: nowrap;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.wl-rep {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.due-now {
  color: var(--primary);
  font-weight: 600;
}

/* =====================
   End Screen - Rating breakdown
   ===================== */
.end-total {
  color: var(--text-muted);
  font-size: 0.95rem;
  margin-bottom: 28px;
}

.end-ratings-wrap {
  margin-bottom: 32px;
}

.end-ratings {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 340px;
  margin: 0 auto;
}

.end-rating-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 16px;
}

.end-rating-mark {
  width: 28px;
  justify-content: center;
}

.end-rating-label {
  flex: 1;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.end-rating-count {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
}

/* =====================
   Modal
   ===================== */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 200;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.modal-overlay.open {
  display: flex;
}

.modal-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  width: 100%;
  max-width: 520px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  max-height: 90vh;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border);
}

.modal-header h3 {
  font-size: 1rem;
  font-weight: 700;
}

.modal-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  line-height: 1;
}
.modal-close:hover { background: var(--surface2); color: var(--text); }

.modal-close .ui-icon {
  width: 19px;
  height: 19px;
}

.modal-body {
  padding: 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.modal-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
  display: block;
}

.modal-input {
  width: 100%;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 10px 14px;
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.15s;
}
.modal-input:focus { border-color: var(--primary); }

.modal-textarea {
  width: 100%;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 10px 14px;
  font-size: 0.82rem;
  font-family: 'Courier New', monospace;
  outline: none;
  resize: vertical;
  min-height: 200px;
  line-height: 1.5;
  transition: border-color 0.15s;
}
.modal-textarea:focus { border-color: var(--primary); }

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--border);
}

/* =====================
   Language Switcher
   ===================== */
.lang-switcher {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.lang-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
  letter-spacing: 0.5px;
}

.lang-btn:hover {
  background: var(--surface2);
  color: var(--text);
}

.lang-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

/* =====================
   Modal Tabs & AI Prompt
   ===================== */
.modal-box-wide {
  max-width: 620px;
}

.modal-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  padding: 0 20px;
}

.modal-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  padding: 10px 16px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
}

.modal-tab:hover { color: var(--text); }

.modal-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

.ai-row {
  display: flex;
  gap: 12px;
}

.ai-col {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.ai-prompt-box {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 0.78rem;
  font-family: 'Courier New', monospace;
  color: var(--text-muted);
  white-space: pre-wrap;
  max-height: 180px;
  overflow-y: auto;
  line-height: 1.5;
  margin-bottom: 10px;
}

.ai-prompt-actions {
  display: flex;
  gap: 8px;
}

.ai-prompt-actions a {
  text-decoration: none;
}

/* =====================
   Schreiben Mode
   ===================== */
.btn-schreiben {
  background: #2a3a2a;
  border: 1px solid #4caf7d;
  color: #4caf7d;
}
.btn-schreiben:hover {
  background: #4caf7d;
  color: #fff;
}

.sw-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 24px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sw-instruction {
  font-size: 0.85rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

.sw-word {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary);
  line-height: 1.3;
}

.sw-hint-toggle {
  align-self: flex-start;
  font-weight: 500;
  color: var(--text-muted);
  margin-top: 4px;
}

#sw-hint-content[hidden] {
  display: none;
}

#sw-hint-content:not([hidden]) {
  display: grid;
  gap: 6px;
}

.sw-hint-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 600;
  margin-top: 4px;
}

.sw-hint {
  font-size: 0.9rem;
  color: var(--text-muted);
  font-style: italic;
}

.sw-textarea {
  width: 100%;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 12px 14px;
  font-size: 1rem;
  font-family: inherit;
  outline: none;
  resize: vertical;
  min-height: 90px;
  line-height: 1.5;
  margin-top: 8px;
  transition: border-color 0.15s;
}
.sw-textarea:focus { border-color: var(--primary); }

.sw-actions {
  display: flex;
  justify-content: center;
  margin-bottom: 8px;
}

/* Schreiben Result */
.sw-result-header {
  margin-bottom: 16px;
}

.sw-result-header h2 {
  font-size: 1.4rem;
  margin-bottom: 6px;
}

.sw-result-header p {
  color: var(--text-muted);
  font-size: 0.9rem;
}

.sw-result-actions {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.sw-result-actions a {
  text-decoration: none;
}

/* =====================
   Home Actions Bar
   ===================== */
.home-actions {
  display: flex;
  gap: 10px;
  margin-bottom: 24px;
}

.home-actions .btn {
  flex: 1;
  justify-content: center;
}

/* =====================
   Groups
   ===================== */
.group-section {
  margin-bottom: 16px;
}

.group-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
}

.group-header:hover {
  background: #2a2f4a;
}

.group-chevron {
  display: inline-flex;
  color: var(--text-muted);
  width: 14px;
}

.group-chevron .ui-icon {
  width: 14px;
  height: 14px;
}

.group-name {
  font-weight: 700;
  font-size: 0.95rem;
  flex: 1;
}

.group-count {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.group-delete-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.8rem;
  padding: 2px 6px;
  border-radius: 4px;
  line-height: 1;
}
.group-delete-btn:hover { background: var(--danger); color: #fff; }

.group-delete-btn .ui-icon {
  width: 15px;
  height: 15px;
}

.group-body {
  padding: 8px 0 0 12px;
  border-left: 2px solid var(--border);
  margin-left: 6px;
}

.group-body.collapsed {
  display: none;
}

/* Set card group row */
.set-card {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

.set-card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

/* Set actions butonları eşit genişlikte */
.set-actions .btn {
  flex: 1 1 auto;
  justify-content: center;
  text-align: center;
}

.set-group-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.set-group-select {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 0.78rem;
  padding: 4px 8px;
  cursor: pointer;
  outline: none;
  max-width: 160px;
}
.set-group-select:focus { border-color: var(--primary); }

/* =====================
   Settings Screen
   ===================== */
.settings-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
}

.settings-header h2 {
  font-size: 1.3rem;
  font-weight: 700;
}

.danger-zone-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--danger);
  margin-bottom: 12px;
}

.settings-card {
  background: var(--surface);
  border: 1px solid var(--danger);
  border-radius: var(--radius);
  overflow: hidden;
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  flex-wrap: wrap;
}

.settings-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.settings-action-title {
  font-weight: 600;
  font-size: 0.9rem;
}

.settings-action-desc {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.settings-divider {
  height: 1px;
  background: var(--border);
  margin: 0 20px;
}

.settings-legal-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 24px;
  padding-bottom: 8px;
}

.settings-legal-links a {
  color: var(--text-muted);
  font-size: 0.8rem;
  text-decoration: none;
  transition: color 0.2s;
}

.settings-legal-links a:hover {
  color: var(--primary);
  text-decoration: underline;
}

.settings-legal-sep {
  color: var(--border);
  font-size: 0.8rem;
}

/* =====================
   AI Wizard Steps
   ===================== */
.ai-steps {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.ai-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.ai-step-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface2);
  border: 2px solid var(--border);
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.ai-step-label {
  font-size: 0.7rem;
  color: var(--text-muted);
  font-weight: 600;
  white-space: nowrap;
}

.ai-step.active .ai-step-num {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.ai-step.active .ai-step-label {
  color: var(--primary);
}

.ai-step.done .ai-step-num {
  background: var(--success);
  border-color: var(--success);
  color: #fff;
}

.ai-step.done .ai-step-label {
  color: var(--success);
}

.ai-step-line {
  flex: 1;
  height: 2px;
  background: var(--border);
  margin: 0 8px;
  margin-bottom: 16px;
}

.ai-step-desc {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 4px;
  padding: 10px 12px;
  background: var(--surface2);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--primary);
}

.ai-step-desc code {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
  font-family: 'Courier New', monospace;
  font-size: 0.82em;
  color: var(--primary);
}

/* =====================
   Settings - Language Grid
   ===================== */
.settings-section-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.settings-lang-card {
  border-color: var(--border) !important;
  margin-bottom: 28px;
}

.lang-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
  padding: 16px;
}

.lang-grid-btn {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  padding: 10px 12px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 6px;
}

.lang-grid-btn:hover {
  background: var(--secondary-hover);
  color: var(--text);
}

.lang-grid-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.lang-grid-btn.active .language-mark {
  border-color: rgba(255, 255, 255, 0.44);
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

/* =====================
   AI Lang Display
   ===================== */
.ai-lang-display {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  margin-bottom: 4px;
}

.ai-lang-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 16px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  flex: 1;
  text-align: center;
}

.ai-lang-badge .language-mark {
  margin-inline-end: 7px;
  vertical-align: middle;
}

.ai-lang-arrow {
  font-size: 1.2rem;
  color: var(--primary);
  font-weight: 700;
  flex-shrink: 0;
}

/* =====================
   Onboarding Modal
   ===================== */
.onboarding-overlay {
  z-index: 300;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
}

.onboarding-box {
  max-width: 480px;
  padding: 0;
  animation: ob-slide-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes ob-slide-in {
  from { opacity: 0; transform: translateY(32px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.onboarding-step {
  padding: 32px 28px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.onboarding-icon {
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--primary) 36%, var(--border));
  border-radius: 19px;
  background: color-mix(in srgb, var(--primary) 12%, var(--surface));
  color: var(--primary);
  margin-bottom: 4px;
}

.onboarding-icon .ui-icon {
  width: 32px;
  height: 32px;
  stroke-width: 1.55;
}

.onboarding-title {
  font-size: 1.4rem;
  font-weight: 800;
  text-align: center;
  color: var(--text);
}

.onboarding-desc {
  font-size: 0.9rem;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.6;
  max-width: 360px;
}

.onboarding-question {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  text-align: center;
  margin-top: 4px;
}

.onboarding-hint {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-align: center;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 7px 14px;
  margin-top: -4px;
  line-height: 1.5;
}

.onboarding-lang-grid {
  width: 100%;
  padding: 0;
  margin-top: 4px;
}

.onboarding-back-btn {
  align-self: flex-start;
}

.settings-danger {
  margin-top: 4px;
}

.settings-danger-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-raised);
  color: var(--text);
  cursor: pointer;
  list-style: none;
  transition: border-color 0.15s, background 0.15s;
}

.settings-danger-summary::-webkit-details-marker {
  display: none;
}

.settings-danger-summary:hover {
  border-color: color-mix(in srgb, var(--danger) 58%, var(--border));
  background: color-mix(in srgb, var(--danger) 5%, var(--surface-raised));
}

.settings-danger-icon {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 28px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  color: var(--danger);
}

.settings-danger-icon .ui-icon {
  width: 16px;
  height: 16px;
}

.settings-danger-copy {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 3px;
}

.settings-danger-copy strong {
  color: var(--danger);
  font-size: 0.78rem;
  letter-spacing: 0.7px;
  text-transform: uppercase;
}

.settings-danger-copy small {
  color: var(--text-muted);
  font-size: 0.8rem;
  line-height: 1.4;
}

.settings-danger-chevron {
  display: inline-flex;
  color: var(--text-muted);
  transition: transform 0.18s ease;
}

.settings-danger-chevron .ui-icon {
  width: 17px;
  height: 17px;
}

.settings-danger[open] .settings-danger-chevron {
  transform: rotate(180deg);
}

.settings-danger-card {
  margin-top: 10px;
  border-color: color-mix(in srgb, var(--danger) 48%, var(--border));
}

.onboarding-actions {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
}

.onboarding-skip-btn {
  background: none;
  border: 0;
  color: var(--text-muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 8px 4px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.onboarding-skip-btn:hover {
  color: var(--text);
}

/* RTL support for onboarding */
[dir="rtl"] .onboarding-back-btn {
  align-self: flex-end;
}

/* =====================
   Wordlist - Set Settings
   ===================== */
.wl-settings-panel {
  margin-bottom: 22px;
  padding: 20px;
  background: var(--surface-raised);
  border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--border));
  border-radius: var(--radius);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.14);
}

.wl-settings-panel[hidden] {
  display: none;
}

.wl-settings-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.wl-settings-header h2 {
  margin: 0;
  color: var(--text);
  font-size: 1rem;
}

.wl-settings-header p,
.wl-settings-copy p {
  margin: 5px 0 0;
  color: var(--text-muted);
  font-size: 0.78rem;
  line-height: 1.5;
}

.wl-settings-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  padding: 0;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.2rem;
}

.wl-settings-close:hover {
  color: var(--text);
  border-color: var(--primary);
}

.wl-settings-group-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 1.25fr);
  align-items: center;
  gap: 22px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.wl-settings-item-title {
  display: block;
  color: var(--text);
  font-size: 0.84rem;
  font-weight: 700;
}

.wl-settings-group-control {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) auto auto;
  gap: 8px;
}

.wl-settings-group-control .set-group-select {
  width: 100%;
  max-width: none;
}

.wl-settings-manage-list {
  margin-top: 16px;
  border-top: 1px solid var(--border);
}

.wl-settings-manage-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 2px 0;
}

.wl-settings-manage-row[hidden] {
  display: none;
}

.wl-settings-danger-row {
  margin-top: 16px;
  border-top: 1px solid color-mix(in srgb, var(--danger) 25%, var(--border));
}

.wl-list-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin: 0 2px 12px;
}

.wl-word-count {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 10px;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}

.nomen-verb-filter {
  margin-bottom: 16px;
  padding: 14px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.nomen-verb-filter-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.nomen-verb-filter-title {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.nomen-verb-filter-summary {
  margin-top: 4px;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
}

.nomen-verb-filter-chips {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 8px;
  max-height: 184px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 2px 2px 4px;
}

.nomen-verb-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface2);
  color: var(--text);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 650;
  cursor: pointer;
  text-align: left;
  min-width: 0;
  white-space: nowrap;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.1s ease;
}

.nomen-verb-chip span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nomen-verb-chip small {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 700;
}

.nomen-verb-chip:hover {
  border-color: var(--primary);
  background: var(--surface);
}

.nomen-verb-chip.active,
#nomen-verb-clear-btn.active {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}

.nomen-verb-chip.active small {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}

#nomen-verb-clear-btn {
  min-height: 36px;
  flex: 0 0 auto;
}

/* =====================
   Set Source Badge
   ===================== */
.set-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  width: 100%;
}

.set-source-badge {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.set-source-builtin {
  background: rgba(108, 99, 255, 0.15);
  color: var(--primary);
  border: 1px solid rgba(108, 99, 255, 0.3);
}

.set-source-user {
  background: rgba(76, 175, 125, 0.15);
  color: var(--success);
  border: 1px solid rgba(76, 175, 125, 0.3);
}

/* Wordlist header title + badge — defined above in Word List Screen section */

/* =====================
   Help Modal
   ===================== */
.help-modal-body {
  padding: 0 !important;
  gap: 0 !important;
  overflow-y: auto;
  max-height: 70vh;
}

.help-block {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
}

.help-block:last-child {
  border-bottom: none;
}

.help-block-data {
  background: var(--card-bg, var(--bg));
  border-top: 2px solid var(--border);
  opacity: 0.85;
}

.help-block-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--primary);
  margin-bottom: 14px;
}

.help-block-label-icon {
  display: flex;
  align-items: center;
  gap: 7px;
}

.help-block-label-icon .ui-icon {
  width: 15px;
  height: 15px;
}

.help-item {
  margin-bottom: 14px;
}

.help-item:last-child {
  margin-bottom: 0;
}

.help-item-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}

.help-item-desc {
  font-size: 0.83rem;
  color: var(--text-muted);
  line-height: 1.65;
}

.help-rating-table {
  margin-top: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.help-rating-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 0.82rem;
}

.help-rating-row:last-child {
  border-bottom: none;
}

.help-rating-label {
  color: var(--text-muted);
}

.help-rating-val {
  font-weight: 600;
  color: var(--text);
  font-size: 0.8rem;
}

/* =====================
   End Screen - Word Log
   ===================== */
.end-word-log {
  margin: 16px auto 0;
  max-width: 420px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  text-align: left;
}

.end-word-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
}

.end-word-row:last-child {
  border-bottom: none;
}

/* Sol kenara ince renk şeridi */
.end-word-row.q0 { border-left: 3px solid #e05252; }
.end-word-row.q1 { border-left: 3px solid #e07a52; }
.end-word-row.q2 { border-left: 3px solid #e0b852; }
.end-word-row.q3 { border-left: 3px solid #a0c050; }
.end-word-row.q4 { border-left: 3px solid #4caf7d; }
.end-word-row.q5 { border-left: 3px solid #52b8e0; }

.end-word-text {
  font-weight: 600;
  color: var(--text);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.end-word-translate {
  color: var(--text-muted);
  font-size: 0.8rem;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.end-word-mark {
  transform: scale(0.82);
  flex-shrink: 0;
}

/* =====================
   End Screen - Next Hint
   ===================== */
.end-next-hint {
  max-width: 400px;
  margin: 0 auto;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  line-height: 1.5;
  text-align: center;
}

.end-next-hint.hint-due {
  background: rgba(108, 99, 255, 0.1);
  border: 1px solid rgba(108, 99, 255, 0.3);
  color: var(--primary);
}

.end-next-hint.hint-later {
  background: rgba(76, 175, 125, 0.1);
  border: 1px solid rgba(76, 175, 125, 0.3);
  color: var(--success);
}

.end-next-hint.hint-done {
  background: rgba(76, 175, 125, 0.1);
  border: 1px solid rgba(76, 175, 125, 0.3);
  color: var(--success);
}

/* =====================
   Set Card - Progress Bar
   ===================== */
.set-progress-bar {
  display: flex;
  height: 4px;
  border-radius: 2px;
  overflow: hidden;
  background: var(--surface2);
  margin-top: 8px;
  gap: 1px;
}

.set-progress-learned {
  background: var(--success);
  border-radius: 2px 0 0 2px;
  transition: width 0.4s ease;
}

.set-progress-due {
  background: #8a6a20;
  transition: width 0.4s ease;
}

.set-progress-new {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 0 2px 2px 0;
  transition: width 0.4s ease;
}

/* =====================
   Design Refresh
   ===================== */
.app-header {
  min-height: 60px;
  padding: 10px clamp(14px, 3vw, 28px);
}

.header-logo {
  height: 38px;
}

.header-brand {
  letter-spacing: 0;
}

.lang-switcher {
  gap: 6px;
}

.header-lang-cluster {
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
  color: var(--text-muted);
  min-height: 32px;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
}

.header-lang-cluster:hover {
  background: var(--surface2);
  color: var(--text);
}

.lang-btn {
  width: 32px;
  height: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  letter-spacing: 0;
}

.home-header {
  margin: 0;
  min-width: 0;
  flex: 1;
}

.home-intro-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 24px;
}

.home-intro-row .home-header h1 {
  font-size: clamp(1.55rem, 2vw, 2rem);
  line-height: 1.15;
}

.home-intro-row .home-header p {
  max-width: 640px;
  margin-top: 8px;
  line-height: 1.55;
}

.home-intro-row .home-actions {
  width: min(420px, 42%);
  flex: 0 0 auto;
  margin: 0;
}

.home-intro-row .home-actions .btn {
  flex: 1 1 auto;
}

.home-add-set-btn {
  border-color: color-mix(in srgb, var(--primary) 68%, var(--border));
  color: color-mix(in srgb, var(--primary) 78%, white);
  background: color-mix(in srgb, var(--primary) 7%, transparent);
}

.home-add-set-btn:hover {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 13%, transparent);
}

.home-add-group-btn {
  flex-grow: 0 !important;
  color: var(--text-muted);
}

.home-dashboard {
  margin-bottom: 30px;
}

.home-overview {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(300px, 0.75fr);
  gap: 14px;
}

.home-focus-panel,
.home-stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset;
}

.home-focus-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 184px;
  padding: 24px 26px;
}

.home-focus-copy {
  min-width: 0;
}

.home-kicker {
  display: inline-flex;
  margin-bottom: 8px;
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.home-focus-panel h3 {
  font-size: 1.55rem;
  line-height: 1.2;
  margin-bottom: 6px;
}

.home-focus-panel p {
  color: var(--text-muted);
  font-size: 0.88rem;
  line-height: 1.5;
}

.home-focus-set {
  margin-top: 10px;
  color: var(--text);
  font-size: 0.8rem;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-continue-btn {
  min-width: 118px;
  flex-shrink: 0;
}

.home-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.home-stat-card {
  min-height: 85px;
  padding: 16px;
}

.home-stat-card span {
  display: block;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.1;
}

.home-stat-card small {
  display: block;
  margin-top: 6px;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.home-stat-due span { color: var(--warning); }
.home-stat-new span { color: var(--accent); }
.home-stat-learned span { color: var(--success); }
.home-stat-sets span { color: var(--primary); }

.home-container .sets-title {
  margin: 2px 0 14px;
  color: var(--text-muted);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.home-set-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: -2px 0 16px;
}

.home-set-search {
  position: relative;
  min-width: 0;
  flex: 1;
}

.home-set-search-icon {
  position: absolute;
  top: 50%;
  left: 13px;
  color: var(--text-muted);
  width: 17px;
  height: 17px;
  transform: translateY(-52%);
  pointer-events: none;
  z-index: 1;
}

.home-set-search input {
  width: 100%;
  min-height: 40px;
  padding: 9px 14px 9px 38px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 0.86rem;
  transition: border-color 0.15s, background 0.15s;
}

.home-set-search input::placeholder {
  color: var(--text-muted);
}

.home-set-search input:hover,
.home-set-search input:focus {
  border-color: color-mix(in srgb, var(--primary) 65%, var(--border));
  background: var(--surface-raised);
}

.home-due-filter {
  min-height: 40px;
  white-space: nowrap;
}

.home-due-filter[aria-pressed="true"] {
  border-color: var(--warning);
  background: color-mix(in srgb, var(--warning) 12%, transparent);
  color: var(--warning);
}

.home-set-empty {
  margin: 4px 0 18px;
  padding: 18px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  color: var(--text-muted);
  text-align: center;
  font-size: 0.88rem;
}

.home-set-empty[hidden],
.home-set-toolbar[hidden],
.group-section[hidden],
.set-card[hidden] {
  display: none !important;
}

.group-body.filter-expanded {
  display: grid;
}

.home-container .group-section {
  margin-bottom: 18px;
}

.home-container .group-header {
  min-height: 48px;
  padding: 12px 16px;
  background: color-mix(in srgb, var(--primary) 6%, var(--surface2));
  border-radius: var(--radius);
}

.home-container .group-header:hover {
  background: color-mix(in srgb, var(--primary) 12%, var(--surface2));
}

.home-container .group-name {
  font-size: 1rem;
}

.home-container .group-count {
  padding: 3px 9px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
}

.set-card {
  padding: 16px;
  background: var(--surface-raised);
}

.set-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.set-info {
  min-width: 0;
  flex: 1;
}

.set-name {
  line-height: 1.25;
}

.set-card-bottom {
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.set-detail-action {
  min-width: 64px;
  min-height: 28px;
  margin-left: auto;
  padding: 5px 9px;
  border-color: var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 650;
  border-radius: 8px;
}

.set-detail-action:hover {
  border-color: var(--primary);
  background: var(--surface2);
  color: var(--text);
}

.set-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
}

.set-actions .btn {
  width: 100%;
  min-height: 34px;
  flex: initial;
}

.set-actions .set-flashcard-action {
  grid-column: 1 / -1;
  min-height: 40px;
  font-weight: 800;
  box-shadow: 0 8px 20px rgba(124, 92, 255, 0.22);
}

.btn-secondary {
  background: rgba(242, 184, 75, 0.08);
  border-color: rgba(242, 184, 75, 0.65);
  color: var(--warning);
}

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

.btn-schreiben {
  background: rgba(76, 175, 125, 0.1);
}

.settings-card {
  background: var(--surface-raised);
}

@media (min-width: 900px) {
  .home-container .group-body:not(.collapsed) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 12px;
    margin-left: 0;
    padding: 12px 0 0;
    border-left: 0;
  }

  .home-container .group-body:not(.collapsed) .set-card {
    height: 100%;
    margin-bottom: 0;
  }

  .home-container .group-body:not(.collapsed) .set-card-bottom {
    margin-top: auto;
  }

  .home-container .trust-section {
    margin-top: 42px;
  }
}

@media (min-width: 1041px) {
  .container.study-container {
    max-width: 1180px;
  }

  .flashcard-study-layout {
    display: grid;
    grid-template-columns: minmax(0, 680px) minmax(300px, 360px);
    align-items: start;
    justify-content: center;
    gap: clamp(24px, 3vw, 42px);
    max-width: none;
    margin-inline: auto;
  }

  .fc-session-sidebar {
    position: sticky;
    top: 84px;
    right: auto;
    bottom: auto;
    width: 100%;
    height: min(720px, calc(100vh - 102px));
  }
}

@media (max-width: 1040px) {
  .container.study-container {
    max-width: 680px;
  }

  .flashcard-study-layout {
    display: block;
  }

  .fc-session-sidebar {
    display: none;
  }
}

@media (max-width: 700px) {
  .container {
    padding: 22px 16px;
  }

  .home-intro-row {
    align-items: stretch;
    flex-direction: column;
    gap: 16px;
  }

  .home-intro-row .home-actions {
    width: 100%;
  }

  .home-overview {
    grid-template-columns: 1fr;
  }

  .trust-grid {
    grid-template-columns: 1fr;
  }

  .content-page {
    padding: 24px 16px 64px;
  }

  .content-page h1 {
    font-size: 1.55rem;
  }

  .content-grid,
  .practice-unit-grid,
  .vocabulary-preview-grid {
    grid-template-columns: 1fr;
  }

  .site-footer-inner {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }

  .footer-links {
    justify-content: flex-start;
  }

  #cookie-consent {
    align-items: stretch;
    flex-direction: column;
  }

  .cookie-consent-actions {
    width: 100%;
  }

  .cookie-consent-actions button {
    flex: 1;
  }

  .set-card-top {
    align-items: stretch;
    flex-direction: column;
  }

  .set-info {
    width: 100%;
  }

  .set-detail-action {
    align-self: center;
    width: auto;
  }

  .set-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .wl-speech-floating-controls {
    right: max(8px, env(safe-area-inset-right));
    gap: 6px;
    padding: 6px;
    border-radius: 15px;
  }

  .wl-speech-control {
    width: 44px;
    height: 44px;
    border-radius: 11px;
    font-size: 0.98rem;
  }

  .wl-speech-control::after {
    display: none;
  }

  .wordlist-header {
    gap: 16px;
    padding: 16px;
  }

  .wl-top-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: flex-start;
  }

  .wordlist-title {
    white-space: normal;
  }

  .wl-settings-toggle {
    grid-column: 1 / -1;
    width: 100%;
  }

  .wordlist-header-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .wordlist-action-card.btn {
    min-height: 96px;
    padding: 12px;
  }

  .wl-action-icon {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }

  .wl-settings-panel {
    padding: 16px;
  }

  .wl-settings-group-section {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .wl-settings-group-control {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wl-settings-group-control .set-group-select {
    grid-column: 1 / -1;
  }

  .wl-settings-manage-row {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
  }

  .wl-settings-manage-row .btn {
    width: 100%;
  }

  .nomen-verb-filter-top {
    align-items: stretch;
    flex-direction: column;
  }

  #nomen-verb-clear-btn {
    width: 100%;
  }

  .nomen-verb-filter {
    padding: 12px;
  }

  .nomen-verb-filter-chips {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: 210px;
    gap: 7px;
  }

  .nomen-verb-chip {
    min-height: 42px;
    padding: 8px 9px;
    font-size: 0.82rem;
  }

  .wordlist-table-wrap {
    overflow: visible;
    border: 0;
    border-radius: 0;
  }

  .wordlist-table,
  .wordlist-table tbody,
  .wordlist-table tr,
  .wordlist-table td {
    display: block;
    width: 100%;
  }

  .wordlist-table thead {
    display: none;
  }

  .wordlist-table tbody {
    display: grid;
    gap: 10px;
  }

  .wordlist-table tbody tr {
    background: linear-gradient(180deg, var(--surface-raised), var(--surface));
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px;
  }

  .wordlist-table td {
    border-bottom: 0;
    padding: 6px 0;
    display: grid;
    grid-template-columns: minmax(86px, 0.38fr) minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    line-height: 1.35;
  }

  .wordlist-table td::before {
    content: attr(data-label);
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
  }

  .wordlist-table td:first-child {
    display: block;
    padding-bottom: 10px;
    font-size: 1rem;
    border-bottom: 1px solid var(--border);
  }

  .wordlist-table td:first-child::before {
    display: none;
  }

  .wordlist-table .wl-translate {
    color: var(--text);
    font-size: 0.95rem;
    padding-top: 10px;
  }

  .wordlist-table .wl-time,
  .wordlist-table .wl-rep {
    text-align: left;
  }

  .wl-example {
    margin-top: 10px;
  }

  .wordlist-table tbody tr:hover {
    background: var(--surface);
  }
}

@media (max-width: 460px) {
  .wordlist-header-actions {
    grid-template-columns: 1fr;
  }

  .wordlist-action-card.btn {
    min-height: 76px;
  }

  .wl-list-toolbar {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }
}

@media (max-width: 430px) {
  .app-header {
    padding-inline: 12px;
  }

  .header-logo {
    height: 32px;
  }

  .header-brand {
    display: inline;
    font-size: 1.05rem;
    margin-left: 6px;
  }

  .lang-switcher {
    gap: 4px;
  }

  .header-lang-cluster {
    padding-inline: 6px;
  }

  .lang-btn {
    width: 30px;
    height: 30px;
  }

  .home-actions {
    gap: 8px;
  }

  .home-actions .btn {
    padding-inline: 12px;
  }

  .home-focus-panel {
    align-items: stretch;
    flex-direction: column;
  }

  .home-continue-btn {
    width: 100%;
  }

  .home-stat-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 520px) {
  .home-set-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .home-due-filter {
    width: 100%;
  }

  .settings-danger-summary {
    align-items: flex-start;
  }

  .settings-danger-card .settings-row {
    align-items: stretch;
    flex-direction: column;
  }

  .settings-danger-card .btn {
    width: 100%;
  }
}

/* Account and writing feedback */
.lang-btn.account-header-btn {
  width: auto;
  padding-inline: 9px;
  gap: 6px;
}
.account-header-label {
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.78rem;
}
.account-header-btn.is-signed-in { color: var(--accent); }
.account-modal-box { max-width: 620px; }
.account-body { gap: 16px; }
.account-note { color: var(--text-muted); font-size: 0.85rem; line-height: 1.6; }
.account-sync-status { padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface2); font-size: 0.83rem; line-height: 1.5; }
.account-tabs { margin-bottom: 18px; }
.account-form { display: grid; gap: 16px; }
.account-form .modal-label { margin-bottom: 6px; }
.account-form .account-note { margin-top: 6px; }
#account-online-note { margin-top: 12px; }
.account-member-heading, .account-history-heading, .account-history-entry-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.account-member-heading { padding-bottom: 20px; border-bottom: 1px solid var(--border); }
.account-member-heading > div { min-width: 0; overflow-wrap: anywhere; }
.account-history-heading { margin-top: 20px; margin-bottom: 8px; }
.account-history-heading { flex-wrap: wrap; }
.account-history-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.account-history { display: grid; gap: 12px; margin-top: 12px; }
.account-history-entry { padding: 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface2); overflow-wrap: anywhere; }
.account-history-entry-heading { align-items: baseline; flex-wrap: wrap; margin-bottom: 8px; }
.account-history-entry-heading strong { font-size: 0.83rem; }
.account-history-entry-heading time { font-size: 0.72rem; color: var(--text-muted); }
.account-history-entry p { margin-top: 6px; line-height: 1.55; font-size: 0.86rem; white-space: pre-wrap; }
.account-history-word { color: var(--text-muted); }
#account-history-more { margin-top: 14px; }
.account-details { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }
.account-details summary, .account-history-feedback summary { cursor: pointer; font-size: 0.87rem; font-weight: 600; }
.account-details > p { margin-block: 12px; }
.account-danger summary { color: var(--danger); }
.account-status { min-height: 1em; font-size: 0.86rem; line-height: 1.5; overflow-wrap: anywhere; }
.account-status:empty { display: none; }
.account-modal-box .is-error, .writing-ai-panel .is-error { color: var(--error); }
.account-modal-box .is-correct, .writing-ai-panel .is-correct { color: var(--success); }
.account-history-feedback { margin-top: 10px; }
.account-history-feedback h4 { margin-top: 12px; font-size: 0.83rem; }
.account-history-feedback ul { padding-inline-start: 20px; }
.writing-ai-panel { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border); text-align: start; }
.writing-ai-panel h3 { font-size: 1rem; margin-bottom: 8px; }
.writing-ai-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.writing-ai-actions a { font-size: 0.8rem; color: var(--text-muted); }
.writing-ai-panel .account-status { margin-top: 14px; }
.writing-ai-result { margin-top: 16px; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface2); overflow-wrap: anywhere; }
.writing-ai-result h4 { margin-block: 14px 6px; font-size: 0.85rem; }
.writing-ai-result p { font-size: 0.91rem; line-height: 1.65; white-space: pre-wrap; }
.writing-ai-result ul { padding-inline-start: 20px; }
.writing-ai-result li { margin-top: 10px; }
.writing-ai-followup { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); }
.writing-ai-question-prompts { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 14px 18px; }
.writing-ai-question-prompts .btn { white-space: normal; text-align: start; }
.writing-ai-conversation { display: grid; gap: 16px; }
.writing-ai-turn { display: grid; gap: 10px; min-width: 0; }
.writing-ai-message { padding: 12px 14px; border-radius: 14px; background: var(--surface2); overflow-wrap: anywhere; }
.writing-ai-message.is-question { margin-inline-start: 24px; background: color-mix(in srgb, var(--ahzo-lime) 14%, var(--surface)); }
.writing-ai-message strong { display: block; font-size: 0.78rem; color: var(--text-muted); margin-bottom: 5px; }
.writing-ai-message p { font-size: 0.91rem; line-height: 1.65; white-space: pre-wrap; }
#sw-ai-question-form { margin-top: 18px; }
.writing-ai-question { min-height: 84px; margin-block: 8px 12px; }
.writing-ai-followup .account-status:empty { display: none; }
#account-modal [hidden], #sw-ai-panel [hidden] { display: none !important; }
#account-modal button:disabled, #sw-ai-panel button:disabled { cursor: not-allowed; opacity: 0.55; }
@media (max-width: 620px) {
  .account-header-label { display: none; }
  .lang-btn.account-header-btn { width: 32px; padding-inline: 0; }
}
@media (max-width: 380px) {
  .app-header .header-brand { display: none; }
  .lang-btn.account-header-btn { width: 30px; }
  .account-member-heading { align-items: flex-start; flex-direction: column; }
}

/* ahzo.de — a little curiosity, a little further. */
html { scroll-behavior: smooth; scroll-padding-top: 110px; }
body { font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font-family: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
[data-member-only][hidden], [data-guest-only][hidden], #library-retry-btn[hidden] { display: none !important; }
.app-header { min-height: 90px; padding: 22px max(28px, calc((100% - 1180px) / 2)); background: var(--bg); border-bottom: 1px solid var(--border); gap: 24px; }
.header-logo-link { flex: 0 0 auto; }
.app-header .header-logo { width: 145px; height: 40px; }
body:not(.light) .header-logo, body:not(.light) .footer-brand img { filter: brightness(0) invert(0.95); }
.ahzo-header-nav { display: flex; align-items: center; gap: 30px; margin-inline: auto; }
.ahzo-header-nav a, .ahzo-header-nav button { padding: 8px 0; border: 0; background: none; color: var(--text-muted); font-size: 0.86rem; font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer; }
.ahzo-header-nav a:hover, .ahzo-header-nav button:hover { color: var(--text); }
body[data-screen="home"] #member-library-nav { color: var(--text); box-shadow: 0 2px 0 var(--primary); }
.lang-switcher { gap: 12px; margin-inline-start: 0; }
.lang-btn { border-color: transparent; background: transparent; color: var(--text-muted); }
.lang-btn:hover { background: var(--surface2); color: var(--text); }
.public-language-picker select { width: 49px; border: 0; background: none; color: var(--text-muted); font-size: 0.75rem; font-weight: 650; padding: 9px 0; cursor: pointer; }
.public-language-picker option { background: var(--surface); color: var(--text); }
.header-signup-btn { min-height: 40px; font-size: 0.8rem; padding-inline: 18px; }
body[data-member="false"] .account-header-btn { width: auto; padding-inline: 0; color: var(--text); }
body[data-member="false"] .account-header-btn .ui-icon { display: none; }
body[data-member="false"] .account-header-label { display: inline; max-width: 85px; font-size: 0.8rem; }
.btn { border-radius: 12px; min-height: 40px; font-weight: 650; letter-spacing: -0.01em; box-shadow: none; }
.btn-primary { border-color: transparent; background: var(--ahzo-lime); color: var(--ahzo-ink); }
.btn-primary:hover { background: #c8e75e; border-color: transparent; color: var(--ahzo-ink); box-shadow: 0 5px 16px rgba(100,122,49,0.13); }
.btn-outline { border-color: var(--border); color: var(--text); }
.btn-outline:hover { background: var(--surface2); border-color: var(--text-muted); color: var(--text); }
.btn-secondary { border-color: color-mix(in srgb, var(--warning) 30%, var(--border)); background: var(--secondary); color: var(--warning); }
.btn-secondary:hover { background: var(--secondary-hover); color: var(--text); }
.btn-schreiben { border-color: color-mix(in srgb, var(--success) 30%, var(--border)); background: color-mix(in srgb, var(--success) 7%, var(--surface)); color: var(--success); }
.btn-schreiben:hover { background: color-mix(in srgb, var(--success) 15%, var(--surface)); color: var(--success); }
.container.landing-container { width: 100%; max-width: 1240px; padding: 0 30px 70px; }
.ahzo-eyebrow { display: flex; align-items: center; gap: 9px; color: var(--text-muted); font-size: 0.72rem; font-weight: 650; letter-spacing: 0.09em; text-transform: uppercase; line-height: 1.5; }
.eyebrow-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 10%, transparent); }
.landing-hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; gap: 26px; padding: 78px 0 72px; min-height: 660px; }
.landing-hero-copy { position: relative; z-index: 2; padding-bottom: 8px; }
.landing-hero h1 { margin: 22px 0 26px; font-size: clamp(3.4rem, 5.75vw, 5.2rem); font-weight: 750; line-height: 1.08; letter-spacing: -0.062em; }
.landing-hero h1 > span { display: block; }
.landing-hero h1 em { position: relative; z-index: 0; font-family: Georgia, 'Times New Roman', serif; font-weight: 500; letter-spacing: -0.07em; }
.landing-hero h1 em::after { position: absolute; inset: auto -5px 2px; height: 25%; background: var(--ahzo-lime); border-radius: 4px 4px 10px 7px; content: ''; z-index: -1; transform: rotate(-2deg); }
body:not(.light) .landing-hero h1 em { color: var(--ahzo-lime); }
body:not(.light) .landing-hero h1 em::after { background: #526b28; }
.landing-hero-description { max-width: 450px; color: var(--text-muted); font-size: 1.02rem; line-height: 1.85; }
.landing-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; margin-top: 32px; }
.landing-primary-cta { min-height: 54px; gap: 18px; padding-inline: 24px; border-radius: 14px; font-size: 0.89rem; }
.landing-text-link { display: inline-flex; align-items: center; gap: 15px; color: var(--text); background: transparent; padding: 8px 0; border: 0; font-size: 0.88rem; font-weight: 600; text-decoration: none; cursor: pointer; }
.landing-text-link:hover { color: var(--primary); }
.landing-text-link > span:last-child { font-size: 1.35em; font-weight: 400; }
.landing-hero-note { display: flex; gap: 7px; align-items: center; margin-top: 20px; color: var(--text-muted); font-size: 0.74rem; line-height: 1.6; }
.landing-hero-note .ui-icon { width: 15px; height: 15px; color: var(--success); }
.hero-playground { min-width: 0; position: relative; height: 480px; isolation: isolate; }
.hero-orbit { position: absolute; width: 440px; height: 440px; border: 1px dashed color-mix(in srgb, var(--text-muted) 27%, transparent); border-radius: 50%; left: 50%; top: 28px; transform: translateX(-50%); }
.hero-orbit::before, .hero-orbit::after { content: ''; position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--text-muted); opacity: 0.35; }
.hero-orbit::before { top: 36px; left: 92px; }
.hero-orbit::after { bottom: 61px; right: 58px; }
.sample-card-backdrop { position: absolute; top: 55px; left: calc(50% - 171px); width: 302px; height: 361px; border: 1px solid #d6c1ae; border-radius: 23px; background: #f4dfc8; transform: rotate(-10deg); padding: 45px 30px; z-index: -1; }
.sample-card-backdrop > span { font-size: 2rem; font-weight: 600; color: #c19877; line-height: 1.6; letter-spacing: -0.04em; }
.sample-card-backdrop svg { width: 100px; height: 45px; margin-top: 40px; fill: none; stroke: #b38664; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.sample-card-wrap { position: absolute; top: 78px; left: calc(50% - 151px); width: 312px; transform: rotate(6deg); }
.sample-preview-label { position: absolute; top: -31px; left: 28px; font-size: 0.68rem; font-weight: 650; letter-spacing: 0.02em; padding: 7px 12px; color: var(--ahzo-ink); background: #ecebdc; border-radius: 6px 6px 0 0; transform: rotate(-6deg); }
.sample-card { display: flex; width: 100%; min-height: 356px; flex-direction: column; align-items: stretch; gap: 0; text-align: left; border: 1px solid #d2d6c6; border-radius: 22px; background: #fffef9; color: var(--ahzo-ink); box-shadow: 10px 15px 0 rgba(40,46,26,0.035), 0 25px 44px rgba(71,77,44,0.11); padding: 28px; cursor: pointer; transition: background 0.22s, transform 0.22s, box-shadow 0.22s; }
.sample-card:hover { transform: translateY(-5px); box-shadow: 10px 20px 0 rgba(40,46,26,0.035), 0 30px 48px rgba(71,77,44,0.14); }
.sample-card.is-flipped { background: #eff7d8; transform: rotate(-4deg); }
.sample-card-top { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.sample-language { display: inline-flex; gap: 10px; color: #68705d; font-size: 0.68rem; font-weight: 600; }
.sample-card-number { color: #a6ad9c; font-size: 0.7rem; }
.sample-card-content { display: flex; flex-direction: column; flex: 1; justify-content: center; min-height: 235px; }
.sample-word-type { color: #88917c; font-size: 0.7rem; margin-bottom: 14px; }
.sample-card-content strong { font-size: 2.5rem; line-height: 1.15; letter-spacing: -0.065em; font-weight: 650; }
#landing-preview-example { color: #757d6c; font-size: 0.8rem; line-height: 1.55; margin-top: 17px; max-width: 230px; }
.sample-card-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 17px; border-top: 1px solid #e3e7d8; font-size: 0.71rem; font-weight: 600; color: #65714e; }
.sample-flip-icon { display: grid; place-items: center; width: 26px; height: 26px; background: #eff2e5; border-radius: 50%; font-size: 1.1rem; }
.hero-sticker { position: absolute; top: 4px; right: 0; width: 116px; height: 116px; background: var(--ahzo-lime); color: var(--ahzo-ink); border-radius: 50% 42% 49% 44%; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 2.2rem; line-height: 0.88; font-weight: 750; letter-spacing: -0.065em; transform: rotate(12deg); z-index: 2; }
.hero-sticker > span { font-family: Georgia, serif; font-weight: 500; font-size: 2.65rem; }
.hero-sticker svg { position: absolute; top: -15px; right: -17px; width: 31px; height: 31px; fill: var(--text); transform: rotate(-18deg); }
.hero-preview-note { position: absolute; display: flex; align-items: center; gap: 9px; bottom: 7px; left: calc(50% - 124px); padding: 12px 16px; background: var(--surface); color: var(--text-muted); border: 1px solid var(--border); border-radius: 12px; font-size: 0.72rem; box-shadow: 0 7px 12px rgba(38,45,28,0.025); white-space: nowrap; transform: rotate(-4deg); }
.preview-check { width: 21px; height: 21px; display: grid; place-items: center; border-radius: 50%; background: var(--ahzo-lime); color: var(--ahzo-ink); font-size: 0.75rem; }
.hero-doodle { position: absolute; left: -7px; bottom: 4px; width: 74px; height: 74px; fill: none; stroke: var(--text-muted); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.landing-languages { display: grid; grid-template-columns: 0.72fr 1fr; gap: 52px; align-items: center; border-block: 1px solid var(--border); padding: 34px 0; scroll-margin-top: 25px; }
.landing-languages h2 { max-width: 330px; margin-top: 10px; font-size: 1.45rem; line-height: 1.35; font-weight: 600; letter-spacing: -0.04em; }
.landing-language-list { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 10px 8px; }
.landing-language-list span { font-size: 0.76rem; color: var(--text-muted); padding: 8px 12px; border: 1px solid var(--border); border-radius: 7px; background: color-mix(in srgb, var(--surface) 65%, transparent); }
.landing-method { padding: 96px 0 80px; scroll-margin-top: 0; }
.landing-section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 70px; margin-bottom: 34px; }
.landing-section-heading h2, .writing-feature-copy h2 { margin-top: 14px; font-size: clamp(2rem, 3vw, 2.65rem); font-weight: 600; line-height: 1.2; letter-spacing: -0.045em; white-space: pre-line; }
.landing-section-heading > p { max-width: 320px; color: var(--text-muted); font-size: 0.9rem; line-height: 1.85; padding-bottom: 2px; }
.landing-method-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.method-card { min-width: 0; border: 1px solid var(--border); border-radius: 20px; background: var(--surface); padding: 24px 27px 30px; }
.method-illustration { height: 162px; position: relative; margin-bottom: 22px; border-radius: 12px; overflow: hidden; }
.curiosity-illustration { background: #ececdd; }
.illustration-word { position: absolute; top: 37px; left: 31px; transform: rotate(-6deg); font-weight: 650; font-size: 2.2rem; letter-spacing: -0.065em; color: #3b4930; }
.illustration-translation { position: absolute; bottom: 32px; right: 24px; padding: 7px 20px 9px; background: var(--ahzo-lime); border-radius: 9px; color: var(--ahzo-ink); font-family: Georgia, serif; font-style: italic; font-size: 1.9rem; transform: rotate(5deg); }
.illustration-spark { position: absolute; top: 21px; right: 27px; font-size: 2.4rem; color: #526a30; }
.memory-illustration { background: #eee6f2; }
.mini-memory-card { position: absolute; top: 26px; left: calc(50% - 75px); width: 148px; height: 115px; padding: 18px; border: 1px solid #d7cce0; border-radius: 12px; background: #fffafc; transform: rotate(-7deg); display: flex; flex-direction: column; gap: 9px; box-shadow: 5px 5px 0 #e0d4e6; }
.mini-memory-card > span:first-child { color: #8b7892; font-size: 0.71rem; }
.mini-memory-card strong { font-size: 1.5rem; color: #514257; font-weight: 550; letter-spacing: -0.06em; }
.memory-card-check { position: absolute; right: 15px; top: 16px; color: #6d8561; }
.memory-loop { position: absolute; right: 20px; top: 54px; font-size: 4.2rem; font-weight: 300; color: #a489ac; transform: rotate(22deg); line-height: 1; }
.writing-illustration { background: #e0ece9; }
.illustration-sentence { position: absolute; left: 33px; top: 24px; color: #526a60; font-size: 1.8rem; line-height: 1.3; font-weight: 500; letter-spacing: -0.05em; transform: rotate(-4deg); }
.illustration-sentence > span { font-family: Georgia, serif; font-style: italic; }
.illustration-sentence i { position: absolute; bottom: -5px; left: -3px; width: 136px; height: 3px; background: #a7c4b3; transform: rotate(-1deg); }
.writing-illustration svg { position: absolute; right: 22px; bottom: 21px; width: 48px; height: 48px; fill: #d6f36c; stroke: #648173; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; transform: rotate(7deg); }
.method-number { color: var(--text-muted); font-size: 0.7rem; font-weight: 650; letter-spacing: 0.04em; }
.method-card h3 { margin: 13px 0 12px; font-size: 1.21rem; line-height: 1.4; font-weight: 600; letter-spacing: -0.035em; }
.method-card > p { color: var(--text-muted); font-size: 0.85rem; line-height: 1.85; }
.landing-writing-feature { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; align-items: center; padding: 16px 0 96px; }
.writing-feature-art { position: relative; min-height: 300px; display: flex; justify-content: center; flex-direction: column; padding: 40px; border-radius: 25px; border: 1px solid #dfdcca; background: #eeeddf; color: var(--ahzo-ink); }
.writing-art-label { color: #92977c; font-size: 0.65rem; font-weight: 600; letter-spacing: 0.13em; margin-bottom: 26px; }
.writing-art-sentence { font-size: 2.35rem; font-weight: 500; line-height: 1.35; letter-spacing: -0.065em; }
.writing-art-sentence em { font-family: Georgia, serif; font-size: 2.2rem; }
.writing-art-underline { height: 9px; width: 69%; background: var(--ahzo-lime); border-radius: 5px; margin-top: 5px; transform: rotate(-2deg); }
.writing-feature-art img { position: absolute; right: -25px; bottom: -14px; width: 90px; height: 90px; transform: rotate(14deg); }
.writing-feature-copy > p:not(.ahzo-eyebrow) { color: var(--text-muted); line-height: 1.85; font-size: 0.9rem; margin-top: 20px; }
.writing-feature-copy .landing-ai-status { font-size: 0.75rem !important; line-height: 1.5 !important; margin-top: 13px !important; }
.writing-feature-copy .landing-text-link { margin-top: 14px; }
.landing-final-cta { position: relative; display: flex; justify-content: space-between; gap: 30px; align-items: center; padding: 56px 60px; border-radius: 25px; background: var(--ahzo-lime); color: var(--ahzo-ink); overflow: hidden; }
.landing-final-cta .ahzo-eyebrow { color: #617536; }
.landing-final-cta h2 { margin: 14px 0 24px; font-size: clamp(2.4rem, 4vw, 3.45rem); font-weight: 600; line-height: 1.16; letter-spacing: -0.055em; white-space: pre-line; }
.landing-dark-cta { min-height: 50px; padding-inline: 22px; background: var(--ahzo-ink); border: 1px solid var(--ahzo-ink); color: #f7f6ef; gap: 20px; border-radius: 12px; font-size: 0.85rem; }
.landing-dark-cta:hover { background: #414935; color: #f7f6ef; border-color: #414935; }
.final-login-copy { margin-top: 18px; font-size: 0.74rem; color: #647541; }
.final-login-copy button { border: 0; background: none; color: var(--ahzo-ink); margin-left: 3px; font-size: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.final-aha-art { position: relative; width: 242px; flex-shrink: 0; margin-right: 28px; transform: rotate(8deg); }
.final-aha-art > span { display: block; font-family: Georgia, serif; font-size: 7rem; font-style: italic; font-weight: 500; line-height: 0.85; letter-spacing: -0.09em; }
.final-aha-art svg { position: absolute; top: -5px; right: -9px; width: 53px; height: 53px; fill: var(--ahzo-ink); }
.site-footer { background: transparent; padding: 32px 28px 36px; border-top: 1px solid var(--border); }
.site-footer-inner { max-width: 1180px; align-items: center; gap: 40px; }
.footer-brand { display: inline-block; text-decoration: none; }
.footer-brand img { display: block; }
.site-footer p { max-width: 360px; margin-top: 9px; font-size: 0.76rem; line-height: 1.7; color: var(--text-muted); }
.footer-links { max-width: 640px; gap: 12px 21px; }
.footer-links a { font-size: 0.75rem; color: var(--text-muted); text-decoration: none; }
.footer-links a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 4px; }

/* The member's learning room uses the same quiet paper-and-ink palette. */
.container.home-container { max-width: 1240px; padding: 48px 30px 80px; }
.home-intro-row { gap: 30px; margin-bottom: 28px; align-items: center; }
.home-intro-row .home-header h1 { margin-top: 12px; font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 600; letter-spacing: -0.05em; line-height: 1.2; }
.home-intro-row .home-header > p:not(.ahzo-eyebrow) { max-width: 510px; font-size: 0.9rem; line-height: 1.8; }
.home-intro-row .home-actions { width: auto; }
.home-add-set-btn { color: var(--text); background: var(--surface); border-color: var(--border); }
.home-add-set-btn:hover { background: var(--surface2); }
.home-actions .btn { font-size: 0.76rem; }
.library-language-controls { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; padding: 18px 21px; margin-bottom: 24px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.library-language-controls label { display: flex; align-items: center; gap: 12px; }
.library-language-controls label > span { color: var(--text-muted); font-size: 0.76rem; }
.library-language-controls select { background: var(--surface2); border: 1px solid var(--border); color: var(--text); font-size: 0.81rem; border-radius: 9px; padding: 9px 28px 9px 12px; min-width: 140px; max-width: 195px; }
.library-pair-arrow { color: var(--text-muted); font-size: 1.1rem; }
.library-pair-note { margin-left: auto; color: var(--text-muted); font-family: Georgia, serif; font-style: italic; font-size: 0.92rem; }
.home-overview { grid-template-columns: minmax(0, 1.4fr) minmax(330px, 0.8fr); gap: 20px; }
.home-focus-panel { background: color-mix(in srgb, var(--ahzo-lime) 23%, var(--surface)); min-height: 204px; padding: 28px; gap: 20px; border-color: color-mix(in srgb, var(--primary) 22%, var(--border)); }
.home-focus-panel h3 { font-weight: 600; font-size: 1.7rem; letter-spacing: -0.045em; }
.home-kicker { font-size: 0.66rem; letter-spacing: 0.09em; color: var(--text-muted); }
.home-focus-panel p { max-width: 320px; line-height: 1.7; font-size: 0.84rem; }
.home-focus-set { font-weight: 550; font-size: 0.78rem; margin-top: 13px; }
.home-stat-grid { gap: 12px; }
.home-stat-card { padding: 21px; }
.home-stat-card span { font-size: 1.75rem; font-weight: 550; letter-spacing: -0.04em; }
.home-stat-card small { font-size: 0.64rem; letter-spacing: 0.065em; margin-top: 8px; }
.home-container .sets-title { font-size: 0.71rem; font-weight: 600; margin-top: 8px; }
.home-set-toolbar { gap: 12px; margin-bottom: 24px; }
.home-set-search input { min-height: 46px; font-size: 0.83rem; border-radius: 12px; padding-left: 42px; }
.home-set-search-icon { left: 15px; }
.home-due-filter { min-height: 46px; font-size: 0.77rem; }
.home-container .group-header { min-height: 52px; border: 1px solid var(--border); background: var(--surface2); padding: 14px 19px; border-radius: 13px; }
.home-container .group-header:hover { background: color-mix(in srgb, var(--primary) 6%, var(--surface)); }
.home-container .group-name { font-size: 0.91rem; font-weight: 650; }
.home-container .group-count { font-size: 0.68rem; font-weight: 500; background: var(--surface); }
.home-container .group-section { margin-bottom: 18px; }
.set-card { padding: 22px; border-radius: 17px; gap: 18px; }
.set-card:hover { border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); box-shadow: 0 6px 18px rgba(58,65,41,0.035); }
.set-name { font-size: 1rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.45; }
.set-meta { font-size: 0.73rem; line-height: 1.6; }
.set-card-bottom { padding-top: 16px; }
.set-actions { gap: 9px; }
.set-actions .btn { min-height: 36px; font-size: 0.77rem; }
.set-actions .set-flashcard-action { min-height: 43px; box-shadow: none; font-weight: 600; }
.set-detail-action { background: var(--surface2); border: 0; border-radius: 8px; font-size: 0.69rem; }
.library-load-message { margin-block: 12px; color: var(--text-muted); font-size: 0.9rem; }
.library-load-message p { line-height: 1.8; }
.library-load-message .btn { margin-top: 10px; }
.library-load-message:has(p:empty):has(button[hidden]) { display: none; }
.session-header { margin-top: 14px; }
.session-header .set-label { color: var(--text-muted); font-size: 0.74rem; letter-spacing: 0.045em; }
.session-header .progress-text { color: var(--text-muted); font-size: 0.79rem; }
.progress-bar { height: 5px; background: var(--surface2); margin: 18px 0 26px; border-radius: 10px; }
.progress-bar-fill { background: var(--ahzo-lime); border-radius: 10px; }
.fc-card { min-height: 340px; }
.fc-face { border: 1px solid var(--border); border-radius: 23px; box-shadow: 0 10px 24px rgba(41,51,28,0.045); }
.fc-front { background: var(--surface); }
.fc-back { background: color-mix(in srgb, var(--ahzo-lime) 10%, var(--surface)); }
.fc-word, .fc-translate { font-weight: 600; letter-spacing: -0.05em; }
.fc-word { font-size: clamp(2rem, 4vw, 3rem); }
.fc-hint { font-size: 0.79rem; color: var(--text-muted); }
.fc-example { color: var(--text); font-size: 1.1rem; line-height: 1.7; }
.rating-buttons { gap: 10px; }
.rating-btn { border-radius: 13px; padding: 16px 12px; background: var(--surface); }
.rating-btn .rating-label { font-weight: 600; font-size: 0.82rem; }
.rating-btn .rating-time { font-size: 0.68rem; }
.fc-session-sidebar { border-color: var(--border); border-radius: 20px; background: var(--surface); box-shadow: none; }
.fc-sidebar-header { padding: 21px; }
.fc-sidebar-header h2 { font-weight: 600; letter-spacing: -0.02em; }
.quiz-options { gap: 12px; }
.quiz-option { border-radius: 14px; background: var(--surface); padding: 18px 20px; font-weight: 550; }
.quiz-option:hover:not(:disabled) { background: var(--surface2); border-color: var(--primary); }
.quiz-option.correct { background: color-mix(in srgb, var(--ahzo-lime) 28%, var(--surface)); color: var(--success); border-color: var(--success); }
.sw-card { background: var(--surface); border-color: var(--border); border-radius: 22px; padding: 30px; box-shadow: none; }
.sw-word { font-weight: 600; letter-spacing: -0.035em; }
.sw-textarea { border-radius: 12px; background: var(--bg); }
.writing-ai-panel { margin-top: 24px; padding-top: 24px; }
.writing-ai-panel h3 { font-size: 0.93rem; font-weight: 600; }
.writing-ai-result { border-radius: 15px; background: color-mix(in srgb, var(--ahzo-lime) 9%, var(--surface)); }
.wordlist-action-card.btn { border-radius: 17px; box-shadow: none; }
.wordlist-table-wrap { border-radius: 16px; border-color: var(--border); }
.wordlist-table thead { background: var(--surface2); }
.modal-box { border-radius: 23px; box-shadow: 0 28px 90px rgba(21,29,19,0.16); }
.modal-header { padding: 21px 24px 18px; }
.modal-body { padding: 24px; }
.modal-input { border-radius: 11px; background: var(--bg); min-height: 43px; border-color: var(--border); }
.modal-label { text-transform: none; letter-spacing: 0; font-size: 0.8rem; color: var(--text); font-weight: 600; }
.modal-tabs { border-color: var(--border); }
.modal-tab { font-size: 0.85rem; font-weight: 600; }
.modal-tab.active { color: var(--text); border-bottom-color: var(--primary); }
.account-note { line-height: 1.8; }
.account-history-entry { background: var(--bg); border-radius: 14px; padding: 16px; }
.account-sync-status { border-radius: 12px; background: color-mix(in srgb, var(--ahzo-lime) 12%, var(--surface)); }
.settings-card { border-radius: 17px; }
.settings-section-label { font-size: 0.7rem; letter-spacing: 0.07em; }
.lang-grid-btn { border-radius: 12px; }
.lang-grid-btn.active { background: color-mix(in srgb, var(--ahzo-lime) 28%, var(--surface)); color: var(--text); border-color: var(--primary); }
.language-mark { border-radius: 6px; font-weight: 650; }
body.light .language-mark { color: color-mix(in srgb, var(--language-mark-color) 60%, #19231a); }

@media (min-width: 1060px) {
  .home-container .group-body:not(.collapsed) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding-top: 16px; }
}
@media (max-width: 1050px) {
  .app-header { padding-inline: 25px; gap: 22px; }
  .ahzo-header-nav { gap: 20px; }
  .landing-hero { gap: 12px; padding-top: 52px; min-height: 590px; }
  .landing-hero h1 { font-size: 3.95rem; }
  .hero-playground { transform: scale(0.9); transform-origin: center; }
  .landing-hero-actions { gap: 18px; }
  .landing-primary-cta { padding-inline: 19px; font-size: 0.81rem; }
  .landing-languages { gap: 30px; }
  .method-card { padding-inline: 20px; }
  .landing-writing-feature { gap: 65px; }
  .writing-feature-art { padding-inline: 30px; }
  .writing-art-sentence { font-size: 2rem; }
  .writing-art-sentence em { font-size: 1.9rem; }
  .home-overview { grid-template-columns: 1fr; }
  .home-stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 850px) {
  .ahzo-header-nav { display: none; }
  .app-header { justify-content: space-between; }
  .landing-hero { grid-template-columns: 1fr 0.85fr; }
  .landing-hero h1 { font-size: 3.5rem; }
  .hero-playground { transform: scale(0.81); transform-origin: 50% 50%; }
  .hero-sticker { right: -38px; }
  .landing-hero-description { font-size: 0.94rem; }
  .landing-method-grid { gap: 13px; }
  .method-card { padding: 17px 17px 23px; }
  .method-card h3 { font-size: 1.08rem; }
  .method-card p { font-size: 0.79rem; }
  .method-illustration { height: 140px; }
  .illustration-word { left: 18px; font-size: 1.8rem; }
  .illustration-translation { right: 12px; bottom: 20px; font-size: 1.65rem; padding-inline: 13px; }
  .illustration-spark { font-size: 1.8rem; right: 12px; }
  .mini-memory-card { left: 12px; top: 22px; width: 124px; height: 99px; padding: 15px; }
  .mini-memory-card strong { font-size: 1.25rem; }
  .memory-loop { right: 1px; font-size: 3.5rem; }
  .illustration-sentence { left: 17px; font-size: 1.55rem; }
  .writing-illustration svg { width: 39px; height: 39px; right: 8px; bottom: 11px; }
  .illustration-sentence i { width: 105px; }
  .landing-section-heading { gap: 30px; }
  .landing-section-heading > p { max-width: 250px; font-size: 0.83rem; }
  .landing-writing-feature { gap: 42px; }
  .writing-feature-art { min-height: 280px; padding: 25px; }
  .writing-art-sentence { font-size: 1.75rem; }
  .writing-art-sentence em { font-size: 1.6rem; }
  .writing-feature-copy h2 { font-size: 2rem; }
  .landing-final-cta { padding: 43px 35px; }
  .final-aha-art { width: 185px; margin-right: 0; }
  .final-aha-art > span { font-size: 6rem; }
  .final-aha-art svg { width: 38px; height: 38px; }
  .library-pair-note { display: none; }
}
@media (max-width: 700px) {
  .app-header { min-height: 76px; padding: 17px 21px; gap: 14px; }
  .app-header .header-logo { width: 126px; height: 35px; }
  .lang-switcher { gap: 10px; }
  .header-signup-btn { min-height: 37px; padding-inline: 14px; font-size: 0.74rem; }
  .container.landing-container { padding: 0 23px 48px; }
  .landing-hero { display: flex; flex-direction: column; align-items: stretch; padding: 47px 0 38px; gap: 25px; }
  .landing-hero h1 { font-size: clamp(3.2rem, 8.7vw, 4.4rem); margin-block: 19px 23px; max-width: 570px; }
  .landing-hero-description { max-width: 450px; font-size: 0.95rem; }
  .landing-hero-actions { margin-top: 24px; }
  .landing-primary-cta { min-height: 50px; font-size: 0.85rem; padding-inline: 19px; }
  .landing-hero-note { font-size: 0.71rem; }
  .hero-playground { width: 100%; height: 455px; transform: scale(0.92); transform-origin: 50% 50%; }
  .hero-sticker { top: 10px; right: calc(50% - 208px); }
  .hero-preview-note { bottom: -3px; }
  .hero-doodle { left: calc(50% - 210px); bottom: 18px; }
  .landing-languages { grid-template-columns: 1fr; gap: 22px; padding: 28px 0; }
  .landing-languages h2 { max-width: 360px; font-size: 1.45rem; }
  .landing-language-list { gap: 9px; }
  .landing-language-list span { padding: 7px 11px; }
  .landing-method { padding: 59px 0 54px; }
  .landing-section-heading { align-items: flex-start; flex-direction: column; gap: 19px; margin-bottom: 26px; }
  .landing-section-heading h2 { font-size: 2rem; }
  .landing-section-heading > p { max-width: 370px; font-size: 0.9rem; }
  .landing-method-grid { grid-template-columns: 1fr; gap: 15px; }
  .method-card { display: grid; grid-template-columns: 148px minmax(0,1fr); align-items: start; column-gap: 21px; padding: 21px; }
  .method-illustration { grid-row: 1 / 4; width: 148px; height: 152px; margin-bottom: 0; }
  .method-number { align-self: end; margin-top: 5px; }
  .method-card h3 { font-size: 1.13rem; margin-block: 9px 7px; }
  .method-card > p { font-size: 0.82rem; line-height: 1.75; }
  .landing-writing-feature { grid-template-columns: 1fr; gap: 44px; padding: 0 0 59px; }
  .writing-feature-art { max-width: 480px; min-height: 245px; padding: 35px; }
  .writing-art-sentence { font-size: 2.35rem; }
  .writing-art-sentence em { font-size: 2.2rem; }
  .writing-feature-art img { width: 75px; height: 75px; right: -7px; }
  .writing-feature-copy h2 { font-size: 2rem; }
  .writing-feature-copy > p:not(.ahzo-eyebrow) { max-width: 460px; }
  .landing-final-cta { padding: 36px 30px; }
  .landing-final-cta h2 { font-size: 2.45rem; }
  .final-aha-art { width: 128px; align-self: flex-start; padding-top: 15px; }
  .final-aha-art > span { font-size: 4.7rem; }
  .final-aha-art svg { top: 13px; right: 0; width: 28px; height: 28px; }
  .site-footer { padding: 28px 23px; }
  .site-footer-inner { flex-direction: column; align-items: flex-start; gap: 23px; }
  .footer-links { justify-content: flex-start; gap: 13px 21px; }
  .container.home-container { padding: 30px 22px 55px; }
  .home-intro-row { margin-bottom: 22px; gap: 19px; }
  .home-intro-row .home-actions { width: 100%; }
  .library-language-controls { padding: 16px; gap: 12px; }
  .library-language-controls label { flex: 1; flex-direction: column; align-items: stretch; gap: 8px; min-width: 0; }
  .library-language-controls select { width: 100%; min-width: 0; max-width: none; }
  .library-pair-arrow { padding-top: 20px; }
  .home-stat-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .home-focus-panel { padding: 24px; min-height: 190px; }
  .home-focus-panel h3 { font-size: 1.5rem; }
  .home-focus-panel p { font-size: 0.82rem; }
  .home-stat-card { padding: 20px; }
  .home-set-toolbar { flex-direction: row; align-items: center; }
  .home-due-filter { width: auto; font-size: 0.71rem; padding-inline: 11px; }
  .set-card { padding: 20px; }
  .sw-card { padding: 23px; }
  .modal-overlay { padding: 14px; }
}
@media (max-width: 520px) {
  .header-signup-btn { display: none !important; }
  body[data-member="false"] #theme-toggle-btn { display: none; }
  .app-header { padding-inline: 21px; }
  .public-language-picker select { width: 44px; }
  .landing-hero { padding-top: 37px; }
  .landing-hero h1 { font-size: clamp(2.95rem, 9.5vw, 4.4rem); letter-spacing: -0.06em; }
  .landing-hero-actions { gap: 15px 21px; }
  .landing-primary-cta { font-size: 0.79rem; gap: 12px; }
  .landing-text-link { font-size: 0.79rem; }
  .hero-playground { height: 419px; transform: scale(0.85); margin-top: -4px; margin-bottom: -22px; }
  .hero-sticker { right: calc(50% - 194px); }
  .hero-doodle { left: calc(50% - 181px); bottom: -27px; width: 55px; }
  .hero-preview-note { bottom: -40px; left: calc(50% - 132px); }
  .method-card { grid-template-columns: 118px minmax(0,1fr); column-gap: 17px; padding: 19px 17px; }
  .method-illustration { width: 118px; height: 156px; }
  .illustration-word { top: 34px; left: 13px; font-size: 1.65rem; }
  .illustration-translation { font-size: 1.4rem; bottom: 30px; right: 6px; padding-inline: 10px; }
  .illustration-spark { top: 14px; right: 10px; font-size: 1.6rem; }
  .mini-memory-card { width: 98px; height: 97px; left: 10px; top: 31px; padding: 11px; }
  .mini-memory-card strong { font-size: 1.15rem; }
  .mini-memory-card > span:first-child { font-size: 0.6rem; }
  .memory-card-check { right: 9px; top: 10px; font-size: 0.8rem; }
  .memory-loop { font-size: 2.6rem; top: 105px; right: 0; }
  .illustration-sentence { left: 11px; top: 35px; font-size: 1.3rem; }
  .illustration-sentence i { width: 83px; }
  .writing-illustration svg { width: 34px; height: 34px; bottom: 13px; }
  .method-card h3 { font-size: 1.04rem; line-height: 1.3; }
  .method-card > p { font-size: 0.76rem; line-height: 1.7; }
  .writing-feature-art { min-height: 222px; padding: 29px; }
  .writing-art-label { font-size: 0.57rem; margin-bottom: 20px; }
  .writing-art-sentence { font-size: 1.85rem; }
  .writing-art-sentence em { font-size: 1.78rem; }
  .landing-final-cta { padding: 32px 25px; }
  .landing-final-cta h2 { font-size: 2.3rem; }
  .final-aha-art { display: none; }
  .final-login-copy { font-size: 0.69rem; }
  .container.home-container { padding-inline: 20px; }
  .home-intro-row .home-header h1 { font-size: 1.85rem; }
  .home-focus-panel { align-items: stretch; flex-direction: column; }
  .home-focus-panel .home-continue-btn { width: 100%; }
  .home-set-toolbar { align-items: stretch; flex-direction: column; }
  .home-due-filter { align-self: flex-start; }
  .app-header #header-help-btn { display: none; }
  body[data-member="true"] .lang-switcher { gap: 5px; }
  body[data-member="true"] .header-logo { width: 115px; height: 32px; }
  body[data-member="true"] .lang-btn { width: 29px; height: 30px; }
  body[data-member="true"] .header-lang-cluster { padding-inline: 5px; }
  .fc-card { min-height: 330px; }
  .rating-buttons { gap: 7px; }
  .rating-btn { padding: 13px 6px; }
  .rating-btn .rating-label { font-size: 0.7rem; }
  .rating-btn .rating-time { font-size: 0.61rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sample-card, .fc-card { transition: none; }
}

/* A little illustrated adventure for the public landing page. */
#screen-landing .landing-hero { grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: 24px; padding: 60px 0 56px; min-height: 660px; }
#screen-landing .landing-hero h1 { font-size: clamp(3.2rem, 5.1vw, 4.7rem); }
#screen-landing .landing-hero-description { max-width: 450px; font-size: 1.03rem; line-height: 1.8; }
.landing-benefit-tags { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 23px; }
.landing-benefit-tags > span { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border-radius: 8px; background: #ece5f3; color: #58486b; font-size: 0.74rem; font-weight: 600; }
.landing-benefit-tags > span:nth-child(2) { background: #eaf2d9; color: #526933; }
.landing-benefit-tags svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.landing-benefit-tags > span:first-child svg { fill: #d5c4eb; }
.hero-learning-art { position: relative; min-width: 0; width: 100%; height: 480px; isolation: isolate; }
.hero-art-blob { position: absolute; inset: 50px 8px 16px 10px; border-radius: 48% 43% 45% 42%; background: color-mix(in srgb, #dcd0ee 35%, transparent); transform: rotate(-5deg); z-index: -1; }
.hero-learning-illustration { display: block; position: absolute; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; top: 62px; left: 0; }
.hero-hello-note { position: absolute; top: 23px; left: 6px; z-index: 1; padding: 10px 17px; background: #fffef9; border: 1.5px solid #71745d; border-radius: 14px 15px 14px 3px; font-size: 1.04rem; font-weight: 600; line-height: 1.3; color: var(--ahzo-ink); transform: rotate(-8deg); box-shadow: 3px 4px 0 #e5dfca; }
.hero-hello-note em { font-family: Georgia, serif; font-weight: 400; }
.hero-learning-art .hero-sticker { top: 14px; right: 9px; width: 88px; height: 88px; font-size: 1.72rem; box-shadow: 2px 3px 0 #a4be4a; }
.hero-learning-art .hero-sticker > span { font-size: 2.05rem; }
.hero-learning-art .hero-sticker svg { width: 22px; height: 22px; top: -11px; right: 3px; }
.hero-free-ticket { position: absolute; right: 6px; bottom: 2px; display: flex; align-items: center; gap: 11px; max-width: 220px; background: #f5dfd1; color: #604239; border: 1px solid #d6b7a7; border-radius: 8px 14px 7px 12px; padding: 10px 15px; transform: rotate(6deg); }
.hero-free-ticket strong { font-family: Georgia, serif; font-size: 2rem; font-style: italic; font-weight: 500; }
.hero-free-ticket > span { font-size: 0.69rem; line-height: 1.45; font-weight: 600; max-width: 120px; }
.hero-pencil-doodle { position: absolute; bottom: -2px; left: 4px; width: 94px; height: 63px; fill: none; stroke: #6b7752; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
#screen-landing .landing-languages { padding-block: 31px; }
.landing-language-list span:nth-child(3n + 1) { border-radius: 10px 7px 12px 8px; }
.landing-language-list span:nth-child(3n + 2) { transform: rotate(-2deg); }
.landing-language-list span:nth-child(3n) { transform: rotate(2deg); }
.landing-play-section { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: 68px; align-items: center; margin-top: 68px; padding: 46px 66px; background: color-mix(in srgb, #e3d8f0 53%, var(--surface)); border-radius: 28px 28px 35px 25px; border: 1px solid color-mix(in srgb, #b8a5ce 37%, var(--border)); }
.landing-play-copy { position: relative; min-width: 0; }
.landing-play-copy h2 { font-size: clamp(1.9rem, 3.1vw, 2.6rem); line-height: 1.2; font-weight: 600; letter-spacing: -0.045em; margin: 15px 0 18px; white-space: pre-line; }
.landing-play-copy > p:not(.ahzo-eyebrow) { color: var(--text-muted); font-size: 0.9rem; line-height: 1.85; max-width: 360px; }
.landing-play-copy .play-preview-note { display: flex; align-items: center; gap: 8px; margin-top: 27px; font-size: 0.76rem !important; }
.play-preview-note .preview-check { flex-shrink: 0; }
.play-arrow { display: block; width: 120px; height: 50px; margin: 10px 0 -5px 180px; fill: none; stroke: #8c6cab; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; transform: rotate(-9deg); }
.landing-play-card { position: relative; width: 100%; max-width: 335px; justify-self: center; transform: rotate(4deg); }
.landing-play-card .sample-preview-label { background: #d2c0e4; color: #49365e; }
.landing-play-card .sample-card { min-height: 315px; box-shadow: 8px 8px 0 rgba(122,94,147,0.11), 0 16px 36px rgba(70,49,87,0.06); }
.landing-play-card .sample-card-content { min-height: 200px; }
.landing-play-card .sample-card-content strong { font-size: clamp(2rem, 3vw, 2.5rem); }
.play-card-spark { position: absolute; width: 57px; height: 57px; bottom: -14px; right: -21px; fill: #d5ef79; stroke: #778c47; stroke-width: 2; stroke-linecap: round; transform: rotate(-13deg); pointer-events: none; }
#screen-landing .landing-method { padding: 83px 0 80px; }
#screen-landing .method-card { border-radius: 21px 20px 25px 18px; }
.method-drawn-art { display: block; width: 100%; height: 100%; fill: none; stroke: #525a45; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
#screen-landing .writing-illustration .method-drawn-art { position: static; inset: auto; width: 100%; height: 100%; transform: none; fill: none; stroke-width: 2.6; }
.method-drawn-art circle { fill: #525a45; }
.method-drawn-art .draw-fill-paper { fill: #fffdf3; }
.method-drawn-art .draw-fill-lime { fill: #dbef9b; }
.method-drawn-art .draw-fill-lavender { fill: #d9c8e8; }
.method-card-memory .method-drawn-art { stroke: #79638c; }
.method-card-writing .method-drawn-art { stroke: #537368; }
#screen-landing .landing-writing-feature { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 70px; padding-bottom: 69px; }
.ai-practice-board { position: relative; min-width: 0; padding: 29px; background: color-mix(in srgb, #e8eed9 65%, var(--surface)); border: 1px solid var(--border); border-radius: 25px 28px 23px 25px; transform: rotate(-2deg); }
.ai-board-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 17px; }
.ai-board-top > span { font-size: 0.66rem; font-weight: 650; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); max-width: 220px; line-height: 1.5; }
.ai-friend { width: 52px; height: 52px; flex-shrink: 0; fill: #d6f36c; stroke: #59683d; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transform: rotate(8deg); }
.ai-friend circle { fill: #59683d; stroke: none; }
.ai-friend > path:last-child { fill: none; }
.ai-example-before, .ai-example-after { background: var(--surface); border: 1px solid var(--border); border-radius: 12px 13px 11px 15px; padding: 18px 20px; }
.ai-example-label { display: block; color: var(--text-muted); font-size: 0.68rem; font-weight: 600; margin-bottom: 10px; }
.ai-example-before p, .ai-example-after p { font-size: clamp(1.1rem, 1.7vw, 1.45rem); line-height: 1.5; letter-spacing: -0.035em; }
.ai-example-before p { color: var(--text-muted); text-decoration: underline wavy #cc977f; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.ai-correction-arrow { display: block; margin: 1px 0 1px 54%; width: 65px; height: 29px; fill: none; stroke: #8e9e66; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.ai-example-after { border-color: #abb887; }
.ai-example-after mark { border-radius: 4px; padding: 0 4px; color: #384423; background: #d8ef9d; }
.ai-example-explanation { display: block; margin-top: 12px; font-size: 0.76rem; line-height: 1.8; color: var(--text-muted); }
.ai-example-followup { margin-top: 19px; padding: 15px 17px; border-radius: 13px 13px 13px 4px; background: color-mix(in srgb, #e5d8f0 63%, var(--surface)); border: 1px solid color-mix(in srgb, #b59bc9 30%, var(--border)); }
.ai-followup-question { display: flex; align-items: center; gap: 7px; font-size: 0.76rem; font-weight: 650; }
.ai-followup-question svg { width: 17px; height: 17px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.ai-example-followup > p { margin-top: 8px; color: var(--text-muted); font-size: 0.73rem; line-height: 1.8; }
.ai-preview-caption { margin-top: 17px; text-align: center; font-size: 0.65rem; line-height: 1.6; color: var(--text-muted); }
.ai-eyebrow-spark { width: 19px; height: 19px; flex-shrink: 0; fill: #d6c4e6; stroke: #897196; stroke-width: 1.4; }
.ai-learning-list { padding: 0; margin: 22px 0 0; list-style: none; display: grid; gap: 12px; }
.ai-learning-list li { display: flex; align-items: center; gap: 9px; font-size: 0.8rem; line-height: 1.55; color: var(--text); }
.ai-learning-list li > span:first-child { display: grid; place-items: center; width: 20px; height: 20px; flex-shrink: 0; border-radius: 50%; background: color-mix(in srgb, var(--ahzo-lime) 36%, var(--surface)); color: var(--success); font-size: 0.7rem; }
.landing-free-note { display: flex; align-items: center; gap: 28px; padding: 30px 37px; margin-bottom: 65px; border: 1px dashed color-mix(in srgb, var(--text-muted) 40%, transparent); border-radius: 19px 25px 22px 20px; }
.free-note-drawing { position: relative; width: 112px; height: 112px; flex-shrink: 0; transform: rotate(-9deg); }
.free-note-drawing svg { display: block; width: 100%; height: 100%; fill: #f4dfcd; stroke: #9d7c66; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.free-note-drawing svg circle { fill: #fffaf2; }
.free-note-drawing > strong { position: absolute; bottom: 21px; left: 27px; font-family: Georgia, serif; font-style: italic; font-weight: 400; font-size: 2.8rem; color: #76533c; transform: rotate(4deg); }
.landing-free-note h2 { font-size: 1.8rem; font-weight: 600; letter-spacing: -0.04em; margin: 9px 0 10px; line-height: 1.3; }
.landing-free-note > div:last-child { min-width: 0; }
.landing-free-note > div > p:not(.ahzo-eyebrow) { max-width: 760px; font-size: 0.83rem; color: var(--text-muted); line-height: 1.8; }
.landing-free-note .free-ai-note { margin-top: 9px; font-size: 0.72rem !important; }
.final-aha-art .final-art-squiggle { position: relative; width: 205px; height: 55px; top: auto; right: auto; margin-top: 17px; fill: none; stroke: #72883f; stroke-width: 2.5; stroke-linecap: round; }
body:not(.light) .landing-benefit-tags > span { background: #43384f; color: #e4d6ee; }
body:not(.light) .landing-benefit-tags > span:nth-child(2) { background: #344126; color: #dbe6c7; }
body:not(.light) #screen-landing .hero-art-blob { background: #2b2832; }
body:not(.light) #screen-landing .landing-play-section { background: #30283b; border-color: #544360; }
body:not(.light) #screen-landing .play-arrow { stroke: #b89bce; }
body:not(.light) #screen-landing .ai-practice-board { background: #2c3424; border-color: #505a40; }
body:not(.light) #screen-landing .ai-example-followup { background: #352d3e; border-color: #60526b; }
body:not(.light) #screen-landing .ai-correction-arrow { stroke: #b1c085; }
@media (max-width: 1050px) {
  #screen-landing .landing-hero { padding-top: 46px; min-height: 615px; }
  #screen-landing .landing-hero h1 { font-size: 3.8rem; }
  .hero-learning-art { height: 425px; }
  .hero-learning-illustration { top: 83px; }
  .hero-free-ticket { bottom: 3px; }
  .landing-play-section { padding: 42px; gap: 40px; }
  #screen-landing .landing-writing-feature { gap: 45px; }
}
@media (max-width: 850px) {
  #screen-landing .landing-hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 12px; min-height: 570px; }
  #screen-landing .landing-hero h1 { font-size: 3.3rem; }
  #screen-landing .landing-hero-description { font-size: 0.95rem; }
  .hero-learning-art { height: 400px; }
  .hero-learning-illustration { top: 100px; }
  .hero-hello-note { top: 42px; left: 13px; font-size: 0.86rem; }
  .hero-learning-art .hero-sticker { top: 28px; right: 12px; width: 74px; height: 74px; font-size: 1.45rem; }
  .hero-learning-art .hero-sticker > span { font-size: 1.8rem; }
  .hero-free-ticket { bottom: 26px; right: 14px; padding: 8px 10px; }
  .hero-free-ticket strong { font-size: 1.6rem; }
  .hero-free-ticket > span { max-width: 97px; font-size: 0.59rem; }
  .hero-pencil-doodle { bottom: 13px; width: 72px; }
  .landing-play-section { padding: 39px 33px; gap: 34px; }
  .landing-play-card .sample-card { padding: 23px; }
  .landing-play-copy h2 { font-size: 2rem; }
  .play-arrow { margin-left: 120px; width: 100px; }
  .ai-practice-board { padding: 22px; }
  .ai-example-before, .ai-example-after { padding: 16px; }
  #screen-landing .landing-writing-feature { gap: 36px; }
  .landing-free-note { padding: 25px; gap: 24px; }
}
@media (max-width: 700px) {
  #screen-landing .landing-hero { display: flex; gap: 15px; padding: 39px 0 35px; min-height: 0; }
  #screen-landing .landing-hero h1 { font-size: clamp(3rem, 8vw, 4.2rem); max-width: 540px; }
  #screen-landing .landing-hero-description { max-width: 490px; font-size: 0.96rem; }
  .landing-benefit-tags { margin-top: 20px; }
  .hero-learning-art { height: auto; aspect-ratio: 1.15; max-width: 520px; align-self: center; margin-top: 10px; overflow: hidden; }
  .hero-learning-illustration { top: 54px; }
  .hero-art-blob { inset: 37px 12px 32px; }
  .hero-hello-note { top: 14px; left: 15px; font-size: 0.91rem; }
  .hero-learning-art .hero-sticker { top: 18px; right: 14px; }
  .hero-free-ticket { bottom: 18px; right: 14px; padding: 10px 12px; }
  .hero-free-ticket > span { font-size: 0.64rem; }
  .hero-free-ticket strong { font-size: 1.8rem; }
  .hero-pencil-doodle { bottom: 9px; left: 14px; width: 79px; }
  .landing-play-section { grid-template-columns: 1fr; gap: 35px; margin-top: 43px; padding: 30px 27px 36px; }
  .landing-play-copy h2 { font-size: 2.1rem; }
  .landing-play-copy > p:not(.ahzo-eyebrow) { max-width: 450px; }
  .landing-play-copy .play-preview-note { margin-top: 17px; }
  .play-arrow { display: none; }
  .landing-play-card { max-width: 310px; width: calc(100% - 14px); }
  .landing-play-card .sample-card { min-height: 286px; padding: 25px; }
  .landing-play-card .sample-card-content { min-height: 174px; }
  .landing-play-card .sample-card-content strong { font-size: 2.2rem; }
  .play-card-spark { width: 45px; height: 45px; right: -13px; }
  #screen-landing .landing-method { padding-block: 60px 57px; }
  #screen-landing .method-card { grid-template-columns: 132px minmax(0, 1fr); column-gap: 20px; }
  #screen-landing .method-illustration { width: 132px; height: 130px; align-self: center; }
  .method-drawn-art { width: 155%; max-width: none; margin-left: -26%; }
  #screen-landing .writing-illustration .method-drawn-art { width: 155%; }
  #screen-landing .landing-writing-feature { grid-template-columns: 1fr; gap: 35px; padding: 0 0 45px; }
  .ai-practice-board { max-width: 480px; padding: 26px; }
  .ai-example-before p, .ai-example-after p { font-size: 1.38rem; }
  .ai-example-explanation { font-size: 0.79rem; }
  .writing-feature-copy .ai-learning-list { margin-top: 21px; }
  .landing-free-note { padding: 26px 23px; gap: 20px; margin-bottom: 43px; align-items: flex-start; }
  .free-note-drawing { width: 85px; height: 85px; margin-top: 18px; }
  .free-note-drawing > strong { font-size: 2.1rem; left: 22px; bottom: 16px; }
  .landing-free-note h2 { font-size: 1.65rem; }
  .landing-free-note .ahzo-eyebrow { font-size: 0.64rem; }
  .final-aha-art .final-art-squiggle { width: 132px; height: 45px; }
}
@media (max-width: 420px) {
  #screen-landing .landing-hero { padding-top: 30px; }
  #screen-landing .landing-hero h1 { font-size: clamp(2.5rem, 9.3vw, 3.7rem); margin: 19px 0 21px; }
  #screen-landing .landing-hero-copy > .ahzo-eyebrow { font-size: 0.64rem; letter-spacing: 0.06em; }
  .landing-benefit-tags > span { padding: 7px 9px; font-size: 0.68rem; }
  .hero-learning-art { aspect-ratio: 1.03; }
  .hero-learning-illustration { top: 61px; }
  .hero-learning-art .hero-sticker { width: 62px; height: 62px; right: 11px; font-size: 1.25rem; }
  .hero-learning-art .hero-sticker > span { font-size: 1.52rem; }
  .hero-hello-note { padding: 8px 11px; top: 13px; left: 12px; font-size: 0.8rem; }
  .hero-free-ticket { bottom: 12px; right: 10px; }
  .hero-pencil-doodle { left: 8px; bottom: 1px; width: 62px; }
  .landing-play-section { padding: 28px 21px 33px; }
  .landing-play-copy h2 { font-size: 1.82rem; }
  .landing-play-copy > p:not(.ahzo-eyebrow) { font-size: 0.84rem; }
  .landing-play-card .sample-card { padding: 22px; }
  .landing-play-card .sample-card-content strong { font-size: 1.95rem; }
  #screen-landing .method-card { grid-template-columns: 102px minmax(0, 1fr); column-gap: 16px; }
  #screen-landing .method-illustration { width: 102px; height: 122px; }
  .ai-practice-board { padding: 19px; }
  .ai-example-before p, .ai-example-after p { font-size: 1.21rem; }
  .ai-example-explanation { font-size: 0.73rem; }
  .landing-free-note { display: block; padding: 22px; }
  .free-note-drawing { width: 76px; height: 76px; margin: -1px 0 16px; }
  .free-note-drawing > strong { font-size: 1.9rem; left: 19px; bottom: 14px; }
  .landing-free-note h2 { font-size: 1.65rem; }
}
@media (prefers-reduced-motion: reduce) {
  .landing-play-card .sample-card { transition: none; }
}