:root {
  --cream: #f4e3cf;
  --cream-soft: #f7ead9;
  --green: #0b4a38;
  --green-deep: #083e30;
  --gold: #b98318;
  --glass: rgba(255, 248, 238, 0.47);
  --line: rgba(255, 255, 255, 0.62);
  --shadow: 0 10px 26px rgba(92, 63, 36, 0.14), inset 0 1px 0 rgba(255,255,255,.82);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #d7c6b4; color: var(--green); }
body { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif; overflow-x: hidden; }
button, input { font: inherit; }
button { color: inherit; }

#app { min-height: 100dvh; }

.home-shell {
  position: relative;
  width: min(100vw, 432px);
  min-height: 100dvh;
  margin: 0 auto;
  overflow: hidden;
  background:
    radial-gradient(circle at 76% 8%, rgba(255,255,255,.22), transparent 28%),
    radial-gradient(circle at 16% 80%, rgba(159,104,52,.035), transparent 35%),
    linear-gradient(180deg, #f4dec3 0%, #efd5b5 100%);
  isolation: isolate;
}

.home-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .16;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='110' viewBox='0 0 110 110'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
  z-index: 0;
}

.home-top, .home-hero, .home-footer { position: relative; z-index: 2; }
.home-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: max(34px, env(safe-area-inset-top)) 12px 0 24px;
  gap: 8px;
}
.brand-block { min-width: 0; padding-top: 1px; }
.brand-word {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 34px;
  line-height: .96;
  letter-spacing: -1.7px;
  white-space: nowrap;
}
.brand-word span { font-weight: 700; color: var(--green); }
.brand-word b { color: var(--gold); font-weight: 700; }
.brand-tagline {
  margin-top: 6px;
  font-size: 7px;
  letter-spacing: .8px;
  font-weight: 850;
  white-space: nowrap;
  color: var(--green-deep);
}

.home-actions { display: flex; align-items: center; gap: 5px; padding-top: 5px; }
.home-header-button {
  position: relative;
  height: 36px;
  min-width: 36px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border: 1px solid rgba(255,255,255,.74);
  border-radius: 18px;
  background: rgba(255,248,238,.43);
  box-shadow: 0 7px 17px rgba(92,63,36,.13), inset 0 1px 0 rgba(255,255,255,.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  -webkit-tap-highlight-color: transparent;
}
.home-header-button svg { width: 18px; height: 18px; }
.home-header-button strong { color: #9b6c12; font-family: Georgia, serif; font-size: 15px; line-height: 1; }
.streak-button svg { color: var(--gold); fill: rgba(185,131,24,.16); }
.icon-only { width: 36px; padding: 0; color: var(--green); }
.notification-dot { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #c38b18; top: 7px; right: 6px; }

.home-hero {
  position: relative;
  min-height: 430px;
  padding: 49px 24px 0;
}
.hero-copy { position: relative; z-index: 3; width: 63%; }
.hero-copy h1 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 24px;
  line-height: 1.12;
  letter-spacing: -.45px;
  color: var(--green);
}
.hero-leaf { display: inline-flex; width: 18px; height: 18px; flex: 0 0 auto; }
.hero-leaf svg { width: 100%; height: 100%; stroke-width: 1.9; }
.exam-days {
  margin: 10px 0 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
  line-height: 1.18;
  white-space: nowrap;
}
.state-line {
  margin: 16px 0 0;
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  line-height: 1.2;
  white-space: nowrap;
}
.state-line svg { width: 20px; height: 20px; flex: 0 0 auto; }
.state-line span:empty { display: none; }
.home-landscape {
  position: absolute;
  z-index: 1;
  top: -3px;
  right: 0;
  width: 65.3%;
  height: auto;
  object-fit: contain;
  object-position: top right;
  user-select: none;
  pointer-events: none;
}

.home-footer {
  position: absolute;
  left: 12.3%;
  right: 8.8%;
  bottom: max(17px, calc(env(safe-area-inset-bottom) + 9px));
  height: 52px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  padding: 0 8px;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 30px;
  background: rgba(255,246,235,.40);
  box-shadow: 0 8px 21px rgba(118,82,48,.13), inset 0 1px 0 rgba(255,255,255,.94);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
}
.footer-item {
  position: relative;
  width: 40px;
  height: 40px;
  margin: 0 auto;
  border: 0;
  border-radius: 50%;
  background: transparent;
  display: grid;
  place-items: center;
  color: var(--green);
  -webkit-tap-highlight-color: transparent;
}
.footer-item svg { width: 24px; height: 24px; }
.footer-item.active {
  background: rgba(178, 207, 169, .45);
  box-shadow: 0 7px 14px rgba(49,92,63,.16), inset 0 1px 1px rgba(255,255,255,.84);
}

.home-loading, .boot-shell { min-height: 100dvh; display: grid; place-items: center; background: linear-gradient(#f7ead9,#f2dfca); }
.home-loading span, .spinner { width: 28px; height: 28px; border: 3px solid rgba(11,74,56,.14); border-top-color: var(--gold); border-radius: 50%; animation: spin .75s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.boot-shell { align-content: center; gap: 20px; }
.boot-brand { font-family: Georgia, serif; font-size: 38px; font-weight: 700; letter-spacing: -2px; }
.boot-brand span { color: var(--green); } .boot-brand b { color: var(--gold); }

.auth-shell { min-height: 100dvh; display: grid; place-items: center; padding: 24px; background: linear-gradient(180deg,#f7ead9,#f1dfcc); }
.auth-card { width: min(100%, 380px); padding: 30px 24px; border: 1px solid rgba(255,255,255,.7); border-radius: 30px; background: rgba(255,251,245,.58); box-shadow: var(--shadow); }
.auth-brand { font-family: Georgia, serif; font-size: 38px; font-weight: 700; letter-spacing: -2px; }
.auth-brand span { color: var(--green); } .auth-brand b { color: var(--gold); }
.auth-tagline { margin-top: 7px; font-size: 8px; letter-spacing: 1.8px; font-weight: 850; }
.auth-card h1 { margin: 28px 0 7px; font-family: Georgia, serif; font-size: 31px; }
.auth-card p { margin: 0 0 22px; color: #6f6b61; line-height: 1.45; }
.auth-card label { display: grid; gap: 7px; margin: 0 0 14px; font-size: 12px; font-weight: 750; }
.auth-card input { width: 100%; height: 52px; border: 1px solid rgba(11,74,56,.18); border-radius: 15px; background: rgba(255,255,255,.72); padding: 0 14px; outline: none; }
.auth-card input:focus { border-color: rgba(11,74,56,.42); box-shadow: 0 0 0 3px rgba(11,74,56,.07); }
.primary-auth { width: 100%; min-height: 52px; border: 0; border-radius: 15px; background: #095636; color: white; font-weight: 850; margin-top: 5px; }
.primary-auth:disabled { opacity: .55; }
.text-button { width: 100%; border: 0; background: transparent; margin-top: 17px; font-size: 13px; }
.auth-error { min-height: 18px; margin-top: 12px; color: #8e2e26; font-size: 12px; }

.placeholder-shell { min-height: 100dvh; width: min(100vw,432px); margin: 0 auto; padding: max(42px,env(safe-area-inset-top)) 24px 40px; background: #f5e5d2; }
.placeholder-shell h1 { font-family: Georgia, serif; font-size: 36px; margin: 42px 0 10px; }
.placeholder-shell p { color: #676b63; line-height: 1.55; }
.back-home { border: 0; background: transparent; padding: 0; font-weight: 750; }
.danger-button { margin-top: 25px; border: 0; background: #823d35; color: #fff; border-radius: 14px; padding: 13px 18px; font-weight: 800; }
.inline-error { margin: 150px 24px 0; padding: 20px; border-radius: 18px; background: rgba(255,255,255,.45); }
.inline-error button { display: block; margin-top: 15px; border: 0; border-radius: 12px; padding: 11px 14px; background: var(--green); color: #fff; }

@media (max-width: 380px) {
  .home-top { padding-left: 20px; padding-right: 8px; gap: 6px; }
  .brand-word { font-size: 30px; }
  .brand-tagline { font-size: 6.2px; letter-spacing: .82px; margin-top: 5px; }
  .home-actions { gap: 4px; padding-top: 4px; }
  .home-header-button { min-width: 32px; height: 32px; border-radius: 16px; padding: 0 5px; }
  .home-header-button svg { width: 16px; height: 16px; }
  .home-header-button strong { font-size: 13px; }
  .icon-only { width: 32px; }
  .home-hero { padding-left: 20px; padding-right: 18px; padding-top: 40px; }
  .hero-copy h1 { font-size: 21px; }
  .hero-leaf { width: 16px; height: 16px; }
  .exam-days { font-size: 15px; margin-top: 9px; }
  .state-line { font-size: 16px; margin-top: 14px; gap: 8px; }
  .state-line svg { width: 18px; height: 18px; }
  .home-landscape { width: 65.3%; right: 0; top: -6px; }
  .home-footer { left: 12%; right: 9%; height: 42px; }
  .footer-item { width: 34px; height: 34px; }
  .footer-item svg { width: 21px; height: 21px; }
}

@media (min-width: 700px) {
  body { background: #262726; }
  .home-shell, .placeholder-shell { box-shadow: 0 0 50px rgba(0,0,0,.12); }
}

/* Registration onboarding — intentionally isolated from HOME-01. */
.onboarding-shell {
  padding: max(18px, env(safe-area-inset-top)) 18px max(22px, env(safe-area-inset-bottom));
  place-items: start center;
  overflow-y: auto;
}
.onboarding-card {
  width: min(100%, 390px);
  margin: 4px 0 18px;
  padding: 28px 24px 24px;
}
.onboarding-step {
  margin-top: 22px;
  color: var(--gold);
  font-size: 9px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 1.8px;
}
.onboarding-card h1 {
  margin: 9px 0 7px;
  line-height: 1.02;
}
.onboarding-card > p {
  margin-bottom: 20px;
}
.onboarding-card form {
  display: grid;
  gap: 15px;
}
.onboarding-card label {
  display: grid;
  gap: 8px;
  margin: 0;
  min-width: 0;
  font-size: 13px;
  line-height: 1.2;
  font-weight: 800;
  color: var(--green);
}
.onboarding-field-shell {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: 50px;
  margin: 0;
  border: 1px solid rgba(11,74,56,.20);
  border-radius: 16px;
  background-color: rgba(255,255,255,.74);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.82);
  overflow: hidden;
}
.onboarding-field-shell:focus-within {
  border-color: rgba(11,74,56,.46);
  box-shadow: 0 0 0 3px rgba(11,74,56,.07), inset 0 1px 0 rgba(255,255,255,.9);
}
.onboarding-field-shell input,
.onboarding-field-shell select {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--green);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1;
  font-weight: 650;
  outline: none;
}
.onboarding-field-shell input {
  padding: 0 16px;
}
.onboarding-field-shell input::placeholder {
  color: #aaa49b;
  opacity: 1;
  font-weight: 600;
}
.onboarding-field-shell select {
  padding: 0 48px 0 16px;
  appearance: none;
  -webkit-appearance: none;
}
.onboarding-field-shell--select::after {
  content: "";
  position: absolute;
  right: 17px;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-top: -6px;
  border-right: 2px solid var(--green);
  border-bottom: 2px solid var(--green);
  transform: rotate(45deg);
  pointer-events: none;
}
.onboarding-field-shell--date input {
  inline-size: 100%;
  min-inline-size: 0;
  max-inline-size: 100%;
  height: 50px;
  padding: 0 16px;
  text-align: left;
  line-height: 50px;
  font-variant-numeric: tabular-nums;
  -webkit-appearance: none;
  appearance: none;
}
.onboarding-field-shell--date input::-webkit-date-and-time-value {
  display: flex;
  align-items: center;
  min-width: 0;
  height: 50px;
  margin: 0;
  padding: 0;
  text-align: left;
}
.onboarding-field-shell--date input::-webkit-datetime-edit {
  display: flex;
  align-items: center;
  min-width: 0;
  height: 50px;
  padding: 0;
}
.onboarding-field-shell--date input::-webkit-calendar-picker-indicator {
  opacity: .9;
  margin-left: 8px;
  cursor: pointer;
}
.onboarding-hint {
  margin: -1px 0 0;
  color: #777166;
  font-size: 11.5px;
  line-height: 1.45;
}
.onboarding-hint strong {
  color: var(--green);
  font-weight: 800;
}
.onboarding-card .primary-auth {
  min-height: 50px;
  margin-top: 1px;
  border-radius: 16px;
  font-size: 14px;
  letter-spacing: .35px;
}
.onboarding-card .auth-error {
  margin-top: -4px;
}
.onboarding-card .text-button {
  margin-top: 12px;
}

@media (max-width: 380px) {
  .onboarding-shell { padding-left: 14px; padding-right: 14px; }
  .onboarding-card { padding: 24px 20px 22px; }
  .onboarding-card h1 { font-size: 29px; }
  .onboarding-card > p { font-size: 14px; }
  .onboarding-card form { gap: 13px; }
}

@media (max-height: 720px) {
  .onboarding-card { margin-top: 0; }
  .onboarding-step { margin-top: 18px; }
  .onboarding-card > p { margin-bottom: 16px; }
  .onboarding-card form { gap: 12px; }
}

/* LEARN-01 — isolated learning dashboard. */
.learn-shell {
  position: relative;
  width: min(100vw, 432px);
  min-height: 100dvh;
  margin: 0 auto;
  padding: max(34px, env(safe-area-inset-top)) 20px 104px;
  overflow-x: hidden;
  color: var(--green);
  background:
    radial-gradient(circle at 88% 4%, rgba(255,255,255,.28), transparent 27%),
    linear-gradient(180deg, #f5e4cf 0%, #f0d8bd 100%);
}
.learn-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .11;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='110' viewBox='0 0 110 110'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}
.learn-header,
.learn-overview,
.learn-subjects-section,
.learn-topic-panel,
.learn-footer { position: relative; z-index: 2; }
.learn-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 2px 22px;
}
.learn-title-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.74);
  border-radius: 16px;
  color: var(--gold);
  background: rgba(255,248,238,.48);
  box-shadow: 0 8px 20px rgba(92,63,36,.11), inset 0 1px 0 rgba(255,255,255,.9);
}
.learn-title-icon svg { width: 25px; height: 25px; stroke-width: 1.9; }
.learn-eyebrow {
  margin-bottom: 2px;
  color: var(--gold);
  font-size: 9px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 1.8px;
}
.learn-header h1 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 35px;
  line-height: 1;
  letter-spacing: -.7px;
}
.learn-overview {
  padding: 16px 16px 15px;
  border: 1px solid rgba(255,255,255,.75);
  border-radius: 24px;
  background: rgba(255,249,241,.55);
  box-shadow: 0 9px 22px rgba(92,63,36,.10), inset 0 1px 0 rgba(255,255,255,.92);
  backdrop-filter: blur(13px);
  -webkit-backdrop-filter: blur(13px);
}
.learn-overview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 13px;
}
.learn-overview-head span { font-family: Georgia, serif; font-size: 20px; font-weight: 700; }
.learn-overview-head small { color: #807668; font-size: 11px; font-weight: 650; }
.learn-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.learn-stat {
  min-width: 0;
  padding: 10px 7px;
  border-radius: 16px;
  text-align: center;
  background: rgba(255,255,255,.42);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.78);
}
.learn-stat strong { display: block; font-family: Georgia, serif; font-size: 23px; line-height: 1; }
.learn-stat span { display: block; margin-top: 5px; color: #6f6b61; font-size: 9.5px; font-weight: 750; white-space: nowrap; }
.learn-stat--correct strong { color: #0c684a; }
.learn-stat--wrong strong, .learn-stat--wrong span { color: #a4463e; }
.learn-stat--open strong { color: var(--gold); }
.learn-subjects-section { margin-top: 24px; }
.learn-section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 2px 11px; }
.learn-section-heading h2 { margin: 0; font-family: Georgia, serif; font-size: 23px; }
.learn-section-heading span { color: #82796d; font-size: 9.5px; font-weight: 650; }
.learn-subject-carousel {
  display: flex;
  gap: 11px;
  margin: 0 -20px;
  padding: 0 20px 15px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.learn-subject-carousel::-webkit-scrollbar { display: none; }
.learn-subject-card {
  position: relative;
  flex: 0 0 145px;
  height: 128px;
  scroll-snap-align: center;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.70);
  border-radius: 22px;
  padding: 14px 13px 12px;
  text-align: left;
  color: var(--green);
  background: rgba(255,249,241,.49);
  box-shadow: 0 8px 19px rgba(92,63,36,.09), inset 0 1px 0 rgba(255,255,255,.9);
  -webkit-tap-highlight-color: transparent;
}
.learn-subject-card.selected {
  border-color: rgba(185,131,24,.52);
  background: rgba(255,247,232,.75);
  box-shadow: 0 10px 22px rgba(113,79,37,.13), inset 0 0 0 1px rgba(185,131,24,.15), inset 0 1px 0 rgba(255,255,255,.92);
}
.learn-subject-art {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-bottom: 8px;
  border-radius: 13px;
  color: var(--gold);
  background: rgba(185,131,24,.09);
}
.learn-subject-art svg { width: 24px; height: 24px; }
.learn-subject-title { display: block; font-family: Georgia, serif; font-size: 17px; font-weight: 700; line-height: 1; }
.learn-subject-meta { display: block; margin-top: 5px; color: #7a7368; font-size: 8.5px; font-weight: 650; }
.learn-subject-progress { position: absolute; left: 13px; right: 13px; bottom: 10px; height: 3px; overflow: hidden; border-radius: 4px; background: rgba(11,74,56,.09); }
.learn-subject-progress i { display: block; height: 100%; border-radius: inherit; background: var(--gold); }
.learn-topic-panel {
  margin-top: -2px;
  padding: 18px 16px 16px;
  border: 1px solid rgba(255,255,255,.78);
  border-radius: 26px;
  background: rgba(255,249,241,.70);
  box-shadow: 0 12px 28px rgba(92,63,36,.12), inset 0 1px 0 rgba(255,255,255,.94);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
}
.learn-topic-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.learn-topic-kicker { display: block; margin-bottom: 3px; color: var(--gold); font-size: 8.5px; font-weight: 900; letter-spacing: 1.2px; text-transform: uppercase; }
.learn-topic-head h2 { margin: 0; font-family: Georgia, serif; font-size: 21px; line-height: 1.08; }
.learn-topic-all {
  min-width: 51px;
  height: 35px;
  border: 1px solid rgba(11,74,56,.12);
  border-radius: 18px;
  background: rgba(255,255,255,.50);
  font-size: 11px;
  font-weight: 800;
}
.learn-topic-all.selected { background: rgba(184,207,170,.48); }
.learn-topic-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.learn-topic-chip {
  min-width: 0;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  border: 1px solid rgba(11,74,56,.11);
  border-radius: 15px;
  padding: 9px 9px 9px 11px;
  text-align: left;
  color: var(--green);
  background: rgba(255,255,255,.42);
  font-size: 10px;
  line-height: 1.17;
  font-weight: 720;
}
.learn-topic-chip span { min-width: 0; }
.learn-topic-chip svg { width: 13px; height: 13px; flex: 0 0 auto; opacity: .55; }
.learn-topic-chip.selected { border-color: rgba(185,131,24,.45); background: rgba(185,131,24,.08); }
.learn-actions-row { display: grid; grid-template-columns: 1fr 1.15fr; gap: 9px; margin-top: 15px; }
.learn-secondary-action,
.learn-primary-action {
  min-height: 50px;
  border-radius: 16px;
  font-size: 11px;
  font-weight: 880;
  letter-spacing: .25px;
}
.learn-secondary-action { border: 1px solid rgba(11,74,56,.20); color: var(--green); background: rgba(255,255,255,.50); }
.learn-primary-action { border: 0; color: white; background: #09613f; box-shadow: 0 8px 16px rgba(9,97,63,.15); }
.learn-footer {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  width: min(calc(100vw - 40px), 380px);
  bottom: max(15px, calc(env(safe-area-inset-bottom) + 8px));
  height: 54px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  padding: 0 9px;
  border: 1px solid rgba(255,255,255,.74);
  border-radius: 30px;
  background: rgba(255,246,235,.70);
  box-shadow: 0 9px 24px rgba(84,58,34,.15), inset 0 1px 0 rgba(255,255,255,.95);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.learn-loading { position: relative; z-index: 2; min-height: 70dvh; display: grid; place-items: center; }
.learn-loading span { width: 28px; height: 28px; border: 3px solid rgba(11,74,56,.14); border-top-color: var(--gold); border-radius: 50%; animation: spin .75s linear infinite; }

@media (max-width: 380px) {
  .learn-shell { padding-left: 16px; padding-right: 16px; }
  .learn-subject-carousel { margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; }
  .learn-topic-list { grid-template-columns: 1fr; }
  .learn-stat span { font-size: 8.7px; }
  .learn-footer { width: min(calc(100vw - 28px), 360px); }
}

/* LEARN-01 app layout — one screen, no vertical scrolling. */
body.screen-lock {
  overflow: hidden;
}

.learn-app-shell {
  position: relative;
  width: min(100vw, 432px);
  height: 100dvh;
  margin: 0 auto;
  overflow: hidden;
  background:
    radial-gradient(circle at 88% 5%, rgba(255,255,255,.18), transparent 20%),
    radial-gradient(circle at 18% 88%, rgba(159,104,52,.04), transparent 28%),
    linear-gradient(180deg, #f5e4cf 0%, #eed8bd 100%);
  isolation: isolate;
}

.learn-app-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .11;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='110' viewBox='0 0 110 110'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

.learn-app-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
  padding: max(24px, env(safe-area-inset-top)) 16px max(10px, env(safe-area-inset-bottom));
  gap: 10px;
}

.learn-topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.learn-title-block {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  padding-top: 2px;
}

.learn-page-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  color: var(--gold);
  flex: 0 0 auto;
}

.learn-page-icon svg {
  width: 31px;
  height: 31px;
  stroke-width: 1.9;
}

.learn-title-block h1 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 42px;
  line-height: .95;
  letter-spacing: -1px;
  color: var(--green);
}

.learn-title-block p {
  margin: 7px 0 0;
  font-size: 7px;
  line-height: 1;
  letter-spacing: 1.05px;
  font-weight: 850;
  white-space: nowrap;
  color: var(--green-deep);
}

.learn-actions {
  flex: 0 0 auto;
  padding-top: 2px;
}

.learn-app-content {
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  gap: 10px;
}

.learn-section-header {
  padding: 0 2px;
}

.learn-section-header h2 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 28px;
  line-height: 1;
  letter-spacing: -.4px;
  color: var(--green);
}

.learn-section-header--overview {
  padding-top: 2px;
}

.learn-card-strip {
  display: flex;
  gap: 14px;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 1px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.learn-card-strip::-webkit-scrollbar { display: none; }

.learn-card {
  position: relative;
  flex: 0 0 calc((100% - 14px) / 2);
  min-width: calc((100% - 14px) / 2);
  height: 246px;
  border-radius: 28px;
  overflow: hidden;
  scroll-snap-align: start;
  border: 1px solid rgba(255,255,255,.78);
  background: rgba(255,248,238,.50);
  box-shadow: 0 10px 24px rgba(92,63,36,.10), inset 0 1px 0 rgba(255,255,255,.92);
}

.learn-card-art {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  transform: scale(1.01);
}

.learn-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,245,230,.82) 0%, rgba(255,241,223,.38) 32%, rgba(255,239,220,.08) 58%, rgba(255,238,219,0) 100%);
}

.learn-card-copy {
  position: absolute;
  inset: 16px 15px 28px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  color: var(--green);
}

.learn-card-label {
  font-size: 10px;
  line-height: 1.05;
  font-weight: 500;
  margin-bottom: 8px;
}

.learn-card h3 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 25px;
  line-height: .98;
  letter-spacing: -.5px;
  text-wrap: balance;
}

.learn-card-progress {
  position: absolute;
  z-index: 3;
  left: 15px;
  right: 15px;
  bottom: 14px;
  height: 12px;
  padding: 2px;
  border-radius: 999px;
  background: rgba(255,255,255,.78);
  box-shadow: inset 0 1px 2px rgba(92,63,36,.14);
}

.learn-card-progress i,
.learn-summary-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(180deg, #44a58a 0%, #2c8971 100%);
  min-width: 0;
}

.learn-summary-card {
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px 16px 14px;
  border: 1px solid rgba(255,255,255,.76);
  border-radius: 28px;
  background: rgba(255,248,240,.44);
  box-shadow: 0 10px 24px rgba(92,63,36,.10), inset 0 1px 0 rgba(255,255,255,.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.learn-summary-top h3 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 27px;
  line-height: .98;
  letter-spacing: -.5px;
}

.learn-summary-top p {
  margin: 10px 0 0;
  color: var(--green);
  font-size: 15px;
  line-height: 1.15;
}

.learn-summary-progress {
  margin: 12px 0 10px;
  height: 8px;
  border-radius: 999px;
  background: rgba(155,127,95,.16);
  box-shadow: inset 0 1px 1px rgba(92,63,36,.06);
}

.learn-summary-legend {
  display: grid;
  gap: 8px;
}

.legend-row {
  display: grid;
  grid-template-columns: 20px 1fr auto;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  line-height: 1.05;
  color: var(--green);
}

.legend-row strong {
  font-size: 12px;
  font-weight: 500;
}

.legend-swatch {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.45), 0 1px 3px rgba(60,42,23,.12);
}

.legend-swatch--green { background: linear-gradient(180deg, #0d7a57 0%, #0b5d43 100%); }
.legend-swatch--red { background: linear-gradient(180deg, #cb443d 0%, #a52d2b 100%); }
.legend-swatch--gold { background: linear-gradient(180deg, #d9b382 0%, #c79a5e 100%); }

.learn-cta-stack {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.learn-primary-cta {
  display: grid;
  grid-template-columns: 1fr 78px;
  align-items: stretch;
  min-height: 58px;
  border-radius: 22px;
  overflow: hidden;
  background: linear-gradient(180deg, #09714d 0%, #085a3d 100%);
  box-shadow: 0 12px 20px rgba(9,97,63,.18);
}

.learn-go-button,
.learn-filter-button,
.learn-secondary-cta {
  border: 0;
  color: inherit;
  background: transparent;
}

.learn-go-button {
  color: #fff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 28px;
  letter-spacing: -.5px;
}

.learn-filter-button {
  position: relative;
  display: grid;
  place-items: center;
  color: rgba(255,255,255,.92);
}

.learn-filter-button::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 1px;
  background: rgba(255,255,255,.22);
}

.learn-filter-button svg {
  width: 24px;
  height: 24px;
}

.learn-secondary-cta {
  min-height: 56px;
  border: 2px solid rgba(11,74,56,.78);
  border-radius: 22px;
  background: rgba(255,251,245,.22);
  color: var(--green);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 24px;
  letter-spacing: -.35px;
}

.learn-nav {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  height: 56px;
  padding: 0 10px;
  border: 1px solid rgba(255,255,255,.74);
  border-radius: 30px;
  background: rgba(255,246,235,.58);
  box-shadow: 0 8px 22px rgba(118,82,48,.12), inset 0 1px 0 rgba(255,255,255,.94);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
}

@media (max-height: 780px) {
  .learn-app-inner {
    padding-top: max(16px, env(safe-area-inset-top));
    gap: 8px;
  }

  .learn-title-block h1 { font-size: 34px; }
  .learn-title-block p { margin-top: 5px; font-size: 6.2px; letter-spacing: .82px; }
  .learn-page-icon { width: 34px; height: 34px; }
  .learn-page-icon svg { width: 28px; height: 28px; }
  .learn-section-header h2 { font-size: 24px; }
  .learn-app-content { gap: 8px; }
  .learn-card { height: 210px; border-radius: 24px; }
  .learn-card-copy { inset: 12px 12px 24px; }
  .learn-card-label { margin-bottom: 6px; font-size: 9px; }
  .learn-card h3 { font-size: 19px; }
  .learn-card-progress { left: 12px; right: 12px; bottom: 12px; height: 10px; }
  .learn-summary-card { padding: 15px 14px 12px; border-radius: 24px; }
  .learn-summary-top h3 { font-size: 23px; }
  .learn-summary-top p { margin-top: 8px; font-size: 13px; }
  .learn-summary-progress { margin: 10px 0 8px; }
  .learn-summary-legend { gap: 6px; }
  .legend-row { font-size: 11px; }
  .legend-row strong { font-size: 11px; }
  .legend-swatch { width: 16px; height: 16px; }
  .learn-cta-stack { gap: 8px; margin-top: 10px; }
  .learn-primary-cta { min-height: 48px; grid-template-columns: 1fr 64px; border-radius: 18px; }
  .learn-go-button { font-size: 22px; }
  .learn-filter-button svg { width: 20px; height: 20px; }
  .learn-secondary-cta { min-height: 46px; border-radius: 18px; font-size: 18px; }
  .learn-nav { height: 50px; }
}

@media (max-width: 380px) {
  .learn-app-inner { padding-left: 12px; padding-right: 12px; }
  .learn-card-strip { gap: 12px; }
  .learn-card { flex-basis: calc((100% - 12px) / 2); min-width: calc((100% - 12px) / 2); }
  .learn-title-block h1 { font-size: 38px; }
  .learn-title-block p { font-size: 6.2px; letter-spacing: .82px; }
  .learn-actions { gap: 4px; }
  .learn-summary-top h3 { font-size: 24px; }
}

/* LEARN-01 final-fit refinements */
.learn-card {
  height: clamp(188px, 26.5dvh, 238px);
}

.learn-card::after {
  background: linear-gradient(
    180deg,
    rgba(248,234,216,.98) 0%,
    rgba(248,234,216,.96) 17%,
    rgba(248,234,216,.80) 31%,
    rgba(248,234,216,.18) 49%,
    rgba(248,234,216,0) 67%
  );
}

.learn-card-copy {
  inset: 14px 14px 28px;
}

.learn-card-label {
  font-size: clamp(9px, 2.35vw, 11px);
  margin-bottom: 7px;
}

.learn-card h3 {
  max-width: 100%;
  font-size: clamp(18px, 5.25vw, 24px);
  line-height: .98;
}

.learn-card-progress {
  height: 11px;
}

.learn-summary-card {
  padding-top: clamp(13px, 2.1dvh, 19px);
  padding-bottom: clamp(10px, 1.7dvh, 14px);
}

.learn-summary-top h3 {
  font-size: clamp(22px, 6.3vw, 27px);
}

.learn-summary-top p {
  margin-top: 7px;
  font-size: clamp(12px, 3.5vw, 15px);
}

.learn-summary-progress {
  margin: clamp(7px, 1.1dvh, 11px) 0 clamp(7px, 1.1dvh, 10px);
  height: 7px;
}

.learn-summary-legend {
  gap: clamp(5px, .8dvh, 8px);
}

.legend-row,
.legend-row strong {
  font-size: clamp(10px, 2.9vw, 12px);
}

.legend-swatch {
  width: clamp(15px, 4.1vw, 18px);
  height: clamp(15px, 4.1vw, 18px);
}

.learn-cta-stack {
  gap: clamp(6px, .9dvh, 9px);
  margin-top: clamp(8px, 1.2dvh, 11px);
}

.learn-primary-cta {
  min-height: clamp(44px, 6.4dvh, 56px);
}

.learn-go-button {
  font-size: clamp(21px, 6vw, 27px);
}

.learn-secondary-cta {
  min-height: clamp(42px, 6dvh, 52px);
  font-size: clamp(17px, 5vw, 22px);
}

.learn-nav {
  height: clamp(48px, 6.3dvh, 54px);
}

@media (max-height: 700px) {
  .learn-app-inner { gap: 6px; padding-top: max(10px, env(safe-area-inset-top)); padding-bottom: max(6px, env(safe-area-inset-bottom)); }
  .learn-title-block h1 { font-size: 31px; }
  .learn-title-block p { font-size: 5.7px; margin-top: 4px; }
  .learn-page-icon { width: 30px; height: 30px; }
  .learn-page-icon svg { width: 25px; height: 25px; }
  .learn-section-header h2 { font-size: 21px; }
  .learn-app-content { gap: 6px; }
  .learn-card { height: 168px; border-radius: 21px; }
  .learn-card-copy { inset: 10px 11px 22px; }
  .learn-card-label { font-size: 8px; margin-bottom: 4px; }
  .learn-card h3 { font-size: 16px; }
  .learn-card-progress { left: 11px; right: 11px; bottom: 10px; height: 9px; }
  .learn-summary-card { padding: 11px 12px 9px; border-radius: 21px; }
  .learn-summary-top h3 { font-size: 20px; }
  .learn-summary-top p { margin-top: 5px; font-size: 11px; }
  .learn-summary-progress { margin: 6px 0; height: 6px; }
  .learn-summary-legend { gap: 4px; }
  .legend-row { grid-template-columns: 16px 1fr auto; gap: 8px; font-size: 9.5px; }
  .legend-row strong { font-size: 9.5px; }
  .legend-swatch { width: 14px; height: 14px; }
  .learn-cta-stack { gap: 5px; margin-top: 7px; }
  .learn-primary-cta { min-height: 39px; border-radius: 15px; grid-template-columns: 1fr 56px; }
  .learn-go-button { font-size: 19px; }
  .learn-filter-button svg { width: 18px; height: 18px; }
  .learn-secondary-cta { min-height: 37px; border-radius: 15px; font-size: 16px; }
  .learn-nav { height: 44px; }
  .footer-item { width: 33px; height: 33px; }
  .footer-item svg { width: 20px; height: 20px; }
}


/* LEARN-01 app scroll fit learn01-fit7 */
.learn-app-shell {
  min-height: 100dvh;
}

.learn-app-inner {
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding-top: max(24px, env(safe-area-inset-top));
  padding-bottom: max(10px, env(safe-area-inset-bottom));
}

.learn-app-content {
  grid-template-rows: auto auto auto auto;
  align-content: start;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 1px;
  min-height: 0;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.learn-app-content::-webkit-scrollbar { display: none; }

.learn-card-strip {
  padding: 0 1px 2px;
}

.learn-card {
  flex: 0 0 calc((100% - 14px) / 2);
  min-width: calc((100% - 14px) / 2);
  height: 246px;
  border-radius: 28px;
}

.learn-card-art {
  background-size: cover;
}
.learn-card-art.art-sg1 { background-position: 52% center; }
.learn-card-art.art-sg2 { background-position: center center; }
.learn-card-art.art-sg3 { background-position: center center; }
.learn-card-art.art-sg4 { background-position: center center; }
.learn-card-art.art-unsorted { background-position: center center; }

.learn-summary-card {
  padding: 18px 16px 14px;
}

.learn-summary-top h3 {
  font-size: 27px;
}
.learn-summary-top p {
  margin-top: 9px;
  font-size: 15px;
}
.learn-summary-progress {
  margin: 12px 0 12px;
}
.learn-summary-legend {
  gap: 9px;
}
.legend-row,
.legend-row strong {
  font-size: 12px;
}
.learn-cta-stack {
  margin-top: 14px;
  gap: 10px;
}
.learn-primary-cta { min-height: 56px; }
.learn-secondary-cta { min-height: 54px; font-size: 24px; }
.learn-nav { height: 56px; }

@media (max-height: 780px) {
  .learn-app-content {
    gap: 8px;
  }
  .learn-card {
    height: 222px;
    border-radius: 25px;
  }
  .learn-card-copy { inset: 12px 12px 24px; }
  .learn-card h3 { font-size: 21px; }
  .learn-summary-card { padding: 15px 14px 12px; }
}

@media (max-height: 700px) {
  .learn-app-content { gap: 6px; }
  .learn-card { height: 192px; }
  .learn-card h3 { font-size: 18px; }
  .learn-summary-top h3 { font-size: 22px; }
  .learn-summary-top p { font-size: 12px; }
}


/* LEARN-01 filter sheet + overview enclosure */
.learn-summary-card {
  overflow: hidden;
  padding-bottom: 16px !important;
  background: rgba(255, 248, 240, .60) !important;
}
.learn-cta-stack {
  width: 100%;
  padding-bottom: 0;
}
.learn-secondary-cta {
  width: 100%;
  background: rgba(255, 249, 240, .24);
}

.learn-card {
  cursor: pointer;
  outline: none;
}
.learn-card.is-active {
  border-color: rgba(11,74,56,.36);
  box-shadow: 0 10px 24px rgba(92,63,36,.11), inset 0 0 0 1px rgba(11,74,56,.10), inset 0 1px 0 rgba(255,255,255,.92);
}

.learn-sheet-layer {
  position: absolute;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  visibility: hidden;
}
.learn-sheet-layer.open {
  pointer-events: auto;
  visibility: visible;
}
.learn-sheet-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  opacity: 0;
  background: rgba(27,31,28,.14);
  backdrop-filter: blur(1.5px);
  -webkit-backdrop-filter: blur(1.5px);
  transition: opacity .22s ease;
}
.learn-sheet-layer.open .learn-sheet-backdrop { opacity: 1; }

.learn-filter-sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 78%;
  overflow-y: auto;
  padding: 12px 18px max(82px, calc(env(safe-area-inset-bottom) + 70px));
  border-radius: 34px 34px 0 0;
  border: 1px solid rgba(255,255,255,.82);
  background:
    radial-gradient(circle at 18% 5%, rgba(255,255,255,.25), transparent 30%),
    rgba(249,237,221,.97);
  box-shadow: 0 -18px 42px rgba(70,49,31,.16), inset 0 1px 0 rgba(255,255,255,.94);
  transform: translateY(102%);
  transition: transform .28s cubic-bezier(.2,.82,.2,1);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.learn-filter-sheet::-webkit-scrollbar { display: none; }
.learn-sheet-layer.open .learn-filter-sheet { transform: translateY(0); }

.learn-sheet-handle {
  display: block;
  width: 78px;
  height: 20px;
  margin: -2px auto 5px;
  border: 0;
  background: transparent;
  padding: 7px 0;
}
.learn-sheet-handle span,
.learn-topic-sheet-handle span {
  display: block;
  width: 45px;
  height: 5px;
  margin: 0 auto;
  border-radius: 999px;
  background: rgba(174,132,81,.45);
}
.learn-filter-context { padding: 4px 8px 12px; }
.learn-filter-context h2 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 28px;
  line-height: 1.05;
  letter-spacing: -.5px;
  color: var(--green);
}
.learn-filter-context p {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--green);
}
.learn-filter-selector {
  width: 100%;
  min-height: 58px;
  display: grid;
  grid-template-columns: 38px 1fr 20px;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  border: 1px solid rgba(121,86,47,.12);
  border-radius: 18px;
  background: rgba(255,249,240,.55);
  box-shadow: 0 7px 18px rgba(90,62,37,.07), inset 0 1px 0 rgba(255,255,255,.82);
  text-align: left;
  color: var(--green);
}
.learn-filter-selector-icon {
  display: grid;
  place-items: center;
}
.learn-filter-selector-icon svg { width: 24px; height: 24px; }
.learn-filter-selector > svg { width: 18px; height: 18px; justify-self: end; }
#learn-filter-selector-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 20px;
}

.learn-topic-sheet {
  margin-top: 12px;
  padding: 8px 14px 14px;
  border-radius: 30px;
  border: 1px solid rgba(255,255,255,.78);
  background: rgba(255,249,240,.64);
  box-shadow: 0 10px 24px rgba(90,62,37,.09), inset 0 1px 0 rgba(255,255,255,.88);
}
.learn-topic-sheet-handle { height: 18px; padding-top: 4px; }
.learn-topic-sheet-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 4px 10px;
}
.learn-topic-sheet-head h3 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 25px;
  line-height: 1.08;
}
.learn-topic-back {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: rgba(11,74,56,.07);
  font-family: Georgia, serif;
  font-size: 28px;
  line-height: 1;
}
.learn-topic-back[hidden] { display: none; }
.learn-topic-rows {
  overflow: hidden;
  border: 1px solid rgba(121,86,47,.12);
  border-radius: 18px;
  background: rgba(255,249,240,.36);
}
.learn-topic-row {
  width: 100%;
  min-height: 58px;
  display: grid;
  grid-template-columns: 46px minmax(0,1fr) auto 20px;
  align-items: center;
  gap: 10px;
  padding: 0 13px;
  border: 0;
  border-bottom: 1px solid rgba(121,86,47,.10);
  background: transparent;
  text-align: left;
  color: var(--green);
}
.learn-topic-row:last-child { border-bottom: 0; }
.learn-topic-row.selected { background: rgba(178,207,169,.20); }
.learn-topic-folder {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(121,86,47,.12);
  border-radius: 12px;
  background: rgba(244,225,198,.52);
}
.learn-topic-folder svg { width: 25px; height: 25px; }
.learn-topic-name {
  min-width: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
  line-height: 1.15;
}
.learn-topic-count {
  min-width: 22px;
  text-align: right;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px;
}
.learn-topic-chevron svg { width: 17px; height: 17px; }
.learn-topic-empty {
  padding: 24px 18px;
  color: #716a61;
  text-align: center;
  font-size: 13px;
  line-height: 1.4;
}

body.learn-sheet-open { overscroll-behavior: none; }

@media (max-height: 780px) {
  .learn-filter-sheet { max-height: 82%; padding-left: 14px; padding-right: 14px; }
  .learn-filter-context h2 { font-size: 24px; }
  #learn-filter-selector-text { font-size: 18px; }
  .learn-topic-sheet-head h3 { font-size: 22px; }
  .learn-topic-row { min-height: 52px; grid-template-columns: 42px minmax(0,1fr) auto 18px; gap: 8px; }
  .learn-topic-folder { width: 34px; height: 34px; }
  .learn-topic-folder svg { width: 22px; height: 22px; }
  .learn-topic-name { font-size: 15px; }
  .learn-topic-count { font-size: 14px; }
}


/* LEARN-01 fit10 — visual match to the approved target screen.
   Goal: bring the full Übersicht card including Prüfungssimulation into view,
   keep both CTAs inside the light card, and reduce vertical pressure so the
   screen reads like the approved reference. */
.learn-app-inner {
  padding-top: max(18px, env(safe-area-inset-top)) !important;
  padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
  gap: 8px !important;
}

.learn-topbar {
  min-height: auto !important;
}

.learn-title-block {
  gap: 10px !important;
  padding-top: 0 !important;
}

.learn-page-icon {
  width: 34px !important;
  height: 34px !important;
}

.learn-page-icon svg {
  width: 28px !important;
  height: 28px !important;
}

.learn-title-block h1 {
  font-size: 37px !important;
  line-height: .95 !important;
}

.learn-title-block p {
  margin-top: 5px !important;
  font-size: 6.2px !important;
  letter-spacing: .82px !important;
}

.learn-actions {
  padding-top: 0 !important;
}

.learn-app-content {
  grid-template-rows: auto auto auto auto !important;
  align-content: start !important;
  gap: 8px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-bottom: 6px !important;
  min-height: 0 !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch !important;
}
.learn-app-content::-webkit-scrollbar { display: none !important; }

.learn-section-header {
  padding: 0 2px !important;
}
.learn-section-header h2 {
  font-size: 24px !important;
}

.learn-card-strip {
  gap: 12px !important;
  padding: 0 1px 1px !important;
}

.learn-card {
  flex: 0 0 calc((100% - 12px) / 2) !important;
  min-width: calc((100% - 12px) / 2) !important;
  height: 210px !important;
  border-radius: 25px !important;
}

.learn-card-copy {
  inset: 12px 12px 24px !important;
}

.learn-card-label {
  margin-bottom: 6px !important;
  font-size: 9px !important;
}

.learn-card h3 {
  font-size: 20px !important;
  line-height: .98 !important;
}

.learn-card-progress {
  left: 12px !important;
  right: 12px !important;
  bottom: 12px !important;
  height: 10px !important;
}

.learn-summary-card {
  padding: 14px 14px 12px !important;
  border-radius: 24px !important;
  overflow: visible !important;
  background: rgba(255, 248, 240, .66) !important;
}

.learn-summary-top h3 {
  font-size: 24px !important;
  line-height: .98 !important;
}

.learn-summary-top p {
  margin-top: 7px !important;
  font-size: 13px !important;
  line-height: 1.15 !important;
}

.learn-summary-progress {
  margin: 9px 0 8px !important;
  height: 7px !important;
}

.learn-summary-legend {
  gap: 5px !important;
}

.legend-row {
  grid-template-columns: 18px 1fr auto !important;
  gap: 8px !important;
  font-size: 11px !important;
}
.legend-row strong {
  font-size: 11px !important;
  font-weight: 500 !important;
}
.legend-swatch {
  width: 16px !important;
  height: 16px !important;
}

.learn-cta-stack {
  gap: 8px !important;
  margin-top: 10px !important;
}

.learn-primary-cta {
  min-height: 48px !important;
  grid-template-columns: 1fr 64px !important;
  border-radius: 18px !important;
}

.learn-go-button {
  font-size: 22px !important;
}

.learn-filter-button::before {
  top: 10px !important;
  bottom: 10px !important;
}

.learn-filter-button svg {
  width: 20px !important;
  height: 20px !important;
}

.learn-secondary-cta {
  display: block !important;
  width: 100% !important;
  min-height: 46px !important;
  border-radius: 18px !important;
  font-size: 18px !important;
  background: rgba(255, 251, 245, .24) !important;
}

.learn-nav {
  height: 50px !important;
  margin-top: 2px !important;
}

@media (max-height: 780px) {
  .learn-app-inner {
    padding-top: max(14px, env(safe-area-inset-top)) !important;
    gap: 6px !important;
  }

  .learn-title-block h1 {
    font-size: 34px !important;
  }

  .learn-title-block p {
    margin-top: 4px !important;
    font-size: 5.9px !important;
  }

  .learn-section-header h2 {
    font-size: 22px !important;
  }

  .learn-app-content {
    gap: 6px !important;
  }

  .learn-card {
    height: 192px !important;
    border-radius: 22px !important;
  }

  .learn-card-copy {
    inset: 11px 11px 22px !important;
  }

  .learn-card-label {
    font-size: 8.5px !important;
    margin-bottom: 5px !important;
  }

  .learn-card h3 {
    font-size: 18px !important;
  }

  .learn-card-progress {
    left: 11px !important;
    right: 11px !important;
    bottom: 10px !important;
    height: 9px !important;
  }

  .learn-summary-card {
    padding: 12px 12px 10px !important;
    border-radius: 22px !important;
  }

  .learn-summary-top h3 {
    font-size: 21px !important;
  }

  .learn-summary-top p {
    margin-top: 5px !important;
    font-size: 11.5px !important;
  }

  .learn-summary-progress {
    margin: 7px 0 6px !important;
    height: 6px !important;
  }

  .learn-summary-legend {
    gap: 4px !important;
  }

  .legend-row {
    grid-template-columns: 16px 1fr auto !important;
    gap: 7px !important;
    font-size: 10px !important;
  }

  .legend-row strong {
    font-size: 10px !important;
  }

  .legend-swatch {
    width: 14px !important;
    height: 14px !important;
  }

  .learn-cta-stack {
    gap: 6px !important;
    margin-top: 8px !important;
  }

  .learn-primary-cta {
    min-height: 43px !important;
    grid-template-columns: 1fr 58px !important;
    border-radius: 16px !important;
  }

  .learn-go-button {
    font-size: 20px !important;
  }

  .learn-filter-button svg {
    width: 18px !important;
    height: 18px !important;
  }

  .learn-secondary-cta {
    min-height: 41px !important;
    border-radius: 16px !important;
    font-size: 16px !important;
  }

  .learn-nav {
    height: 46px !important;
  }

  .footer-item {
    width: 34px !important;
    height: 34px !important;
  }

  .footer-item svg {
    width: 20px !important;
    height: 20px !important;
  }
}

/* RECOGNIZE-01 — Erkennen & Benennen */
.recognize-shell {
  position: relative;
  width: min(100vw, 432px);
  height: 100dvh;
  margin: 0 auto;
  overflow: hidden;
  background:
    radial-gradient(circle at 86% 4%, rgba(255,255,255,.22), transparent 24%),
    radial-gradient(circle at 12% 88%, rgba(159,104,52,.04), transparent 28%),
    linear-gradient(180deg, #f5e4cf 0%, #eed8bd 100%);
  isolation: isolate;
}
.recognize-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .10;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='110' viewBox='0 0 110 110'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}
.recognize-inner {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: max(18px, env(safe-area-inset-top)) 16px max(10px, env(safe-area-inset-bottom));
  overflow: hidden;
}
.recognize-topbar {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.recognize-heading {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  min-width: 0;
}
.recognize-heading-icon {
  display: grid;
  place-items: center;
  width: 33px;
  height: 33px;
  flex: 0 0 auto;
  color: var(--gold);
}
.recognize-heading-icon svg { width: 27px; height: 27px; }
.recognize-heading h1 {
  margin: 0;
  max-width: 235px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 29px;
  line-height: .96;
  letter-spacing: -.75px;
  color: var(--green);
  white-space: nowrap;
}
.recognize-heading p {
  margin: 5px 0 0;
  color: var(--green-deep);
  font-size: 5.6px;
  line-height: 1;
  letter-spacing: .66px;
  font-weight: 850;
  white-space: nowrap;
}
.recognize-actions { padding-top: 0; }
.recognize-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 2px 1px 12px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.recognize-content::-webkit-scrollbar { display: none; }
.recognize-section-title h2 {
  margin: 2px 2px 10px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 23px;
  line-height: 1.05;
  color: var(--green);
}
.recognize-smart-card {
  width: 100%;
  min-height: 92px;
  display: grid;
  grid-template-columns: 1fr 72px;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid rgba(255,255,255,.78);
  border-radius: 24px;
  background:
    linear-gradient(120deg, rgba(255,249,240,.72), rgba(235,221,196,.60)),
    rgba(255,248,238,.48);
  box-shadow: 0 9px 22px rgba(92,63,36,.10), inset 0 1px 0 rgba(255,255,255,.92);
  text-align: left;
  color: var(--green);
}
.recognize-smart-card.selected {
  border-color: rgba(11,74,56,.42);
  box-shadow: 0 10px 24px rgba(92,63,36,.10), inset 0 0 0 1px rgba(11,74,56,.12), inset 0 1px 0 rgba(255,255,255,.92);
}
.recognize-smart-copy { display: grid; gap: 2px; min-width: 0; }
.recognize-smart-copy small {
  color: var(--gold);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 1.1px;
  text-transform: uppercase;
}
.recognize-smart-copy strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 24px;
  line-height: 1;
  font-weight: 700;
}
.recognize-smart-copy span {
  margin-top: 4px;
  color: #6e685f;
  font-size: 10px;
  line-height: 1.3;
}
.recognize-smart-icon {
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  justify-self: end;
  border-radius: 19px;
  background: rgba(185,131,24,.09);
  color: var(--gold);
}
.recognize-smart-icon svg { width: 38px; height: 38px; }
.recognize-category-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
  margin-top: 10px;
}
.recognize-category-card {
  min-height: 105px;
  display: grid;
  grid-template-columns: 45px 1fr;
  grid-template-rows: 1fr auto;
  align-items: center;
  column-gap: 10px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 21px;
  background: rgba(255,248,238,.48);
  box-shadow: 0 7px 18px rgba(92,63,36,.08), inset 0 1px 0 rgba(255,255,255,.86);
  text-align: left;
  color: var(--green);
}
.recognize-category-card.selected {
  border-color: rgba(11,74,56,.40);
  background: rgba(239,240,218,.55);
  box-shadow: 0 7px 18px rgba(92,63,36,.09), inset 0 0 0 1px rgba(11,74,56,.10), inset 0 1px 0 rgba(255,255,255,.86);
}
.recognize-category-icon {
  grid-row: 1 / 3;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  color: var(--green);
  background: rgba(255,247,235,.56);
  border: 1px solid rgba(121,86,47,.10);
}
.recognize-category-icon svg { width: 30px; height: 30px; }
.recognize-category-title {
  align-self: end;
  min-width: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px;
  line-height: 1.06;
  font-weight: 700;
}
.recognize-category-meta {
  align-self: start;
  margin-top: 4px;
  color: #81786d;
  font-size: 8px;
  font-weight: 650;
}
.recognize-options-card {
  margin-top: 12px;
  padding: 15px 14px 13px;
  border: 1px solid rgba(255,255,255,.76);
  border-radius: 25px;
  background: rgba(255,248,240,.60);
  box-shadow: 0 9px 22px rgba(92,63,36,.09), inset 0 1px 0 rgba(255,255,255,.9);
}
.recognize-option-block + .recognize-option-block { margin-top: 14px; }
.recognize-option-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
}
.recognize-option-head h3 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 19px;
  line-height: 1;
}
.recognize-option-head span {
  color: #81786d;
  font-size: 8px;
  font-weight: 650;
}
.recognize-mode-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 7px;
}
.recognize-mode,
.recognize-length {
  min-height: 39px;
  border: 1px solid rgba(11,74,56,.15);
  border-radius: 14px;
  background: rgba(255,255,255,.36);
  color: var(--green);
  font-size: 11px;
  font-weight: 750;
}
.recognize-mode.selected,
.recognize-length.selected {
  border-color: rgba(11,74,56,.31);
  background: rgba(178,207,169,.44);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
}
.recognize-length-control {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 6px;
  padding: 4px;
  border-radius: 16px;
  background: rgba(11,74,56,.055);
}
.recognize-length { border: 0; background: transparent; }
.recognize-length.selected { background: rgba(255,251,245,.74); box-shadow: 0 3px 10px rgba(92,63,36,.08); }
.recognize-start {
  width: 100%;
  min-height: 52px;
  margin-top: 14px;
  display: grid;
  grid-template-columns: 1fr 24px;
  align-items: center;
  padding: 0 17px 0 24px;
  border: 0;
  border-radius: 18px;
  background: linear-gradient(180deg,#09714d 0%,#085a3d 100%);
  color: #fff;
  box-shadow: 0 10px 18px rgba(9,97,63,.17);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 21px;
}
.recognize-start svg { width: 20px; height: 20px; justify-self: end; }
.recognize-nav {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(4,1fr);
  align-items: center;
  height: 50px;
  padding: 0 10px;
  border: 1px solid rgba(255,255,255,.74);
  border-radius: 30px;
  background: rgba(255,246,235,.58);
  box-shadow: 0 8px 22px rgba(118,82,48,.12), inset 0 1px 0 rgba(255,255,255,.94);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
}

@media (max-width: 380px) {
  .recognize-inner { padding-left: 12px; padding-right: 12px; }
  .recognize-heading h1 { font-size: 25px; max-width: 205px; }
  .recognize-heading p { font-size: 4.9px; letter-spacing: .5px; }
  .recognize-category-card { min-height: 98px; padding: 10px; column-gap: 8px; }
  .recognize-category-icon { width: 40px; height: 40px; }
  .recognize-category-icon svg { width: 27px; height: 27px; }
  .recognize-category-title { font-size: 13px; }
}


/* RECOGNIZE-01 polish — prevent header overlap and clipped category labels */
.recognize-topbar {
  gap: 6px !important;
}

.recognize-heading {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  gap: 8px !important;
}

.recognize-heading > div:last-child {
  min-width: 0 !important;
}

.recognize-heading h1 {
  max-width: 170px !important;
  white-space: normal !important;
  font-size: 25px !important;
  line-height: .94 !important;
  letter-spacing: -.55px !important;
}

.recognize-heading p {
  margin-top: 5px !important;
  max-width: 175px !important;
  white-space: normal !important;
  font-size: 5.1px !important;
  line-height: 1.18 !important;
  letter-spacing: .5px !important;
}

.recognize-actions {
  flex: 0 0 auto !important;
  gap: 4px !important;
  padding-top: 0 !important;
}

.recognize-actions .home-header-button {
  min-width: 34px !important;
  width: 34px;
  height: 34px !important;
  padding: 0 !important;
  border-radius: 17px !important;
}

.recognize-actions .streak-button {
  width: auto !important;
  min-width: 47px !important;
  padding: 0 6px !important;
}

.recognize-category-card {
  grid-template-columns: 40px minmax(0, 1fr) !important;
  column-gap: 8px !important;
  padding: 11px !important;
}

.recognize-category-icon {
  width: 40px !important;
  height: 40px !important;
}

.recognize-category-icon svg {
  width: 27px !important;
  height: 27px !important;
}

.recognize-category-title {
  max-width: 100% !important;
  font-size: 14px !important;
  line-height: 1.02 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere !important;
  hyphens: auto !important;
}

.recognize-category-meta {
  font-size: 7.8px !important;
}

@media (max-width: 390px) {
  .recognize-inner {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .recognize-heading h1 {
    max-width: 158px !important;
    font-size: 23px !important;
  }

  .recognize-heading p {
    max-width: 160px !important;
    font-size: 4.7px !important;
  }

  .recognize-actions .home-header-button {
    min-width: 31px !important;
    width: 31px !important;
    height: 31px !important;
  }

  .recognize-actions .streak-button {
    width: auto !important;
    min-width: 43px !important;
  }

  .recognize-category-card {
    grid-template-columns: 37px minmax(0, 1fr) !important;
    column-gap: 7px !important;
    padding: 9px !important;
  }

  .recognize-category-icon {
    width: 37px !important;
    height: 37px !important;
  }

  .recognize-category-title {
    font-size: 12.8px !important;
  }
}


/* RECOGNIZE-01 — full-width Jagdhorn selection */
.recognize-horn-card {
  width: 100%;
  min-height: 92px;
  margin-top: 10px;
  display: grid;
  grid-template-columns: 1fr 72px;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid rgba(255,255,255,.78);
  border-radius: 24px;
  background:
    linear-gradient(120deg, rgba(255,249,240,.72), rgba(235,221,196,.60)),
    rgba(255,248,238,.48);
  box-shadow: 0 9px 22px rgba(92,63,36,.10), inset 0 1px 0 rgba(255,255,255,.92);
  text-align: left;
  color: var(--green);
}

.recognize-horn-card.selected {
  border-color: rgba(11,74,56,.42);
  background:
    linear-gradient(120deg, rgba(239,240,218,.68), rgba(232,224,197,.62)),
    rgba(255,248,238,.48);
  box-shadow: 0 10px 24px rgba(92,63,36,.10), inset 0 0 0 1px rgba(11,74,56,.12), inset 0 1px 0 rgba(255,255,255,.92);
}

.recognize-horn-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.recognize-horn-copy small {
  color: var(--gold);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 1.1px;
  text-transform: uppercase;
}

.recognize-horn-copy strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 24px;
  line-height: 1;
  font-weight: 700;
}

.recognize-horn-copy span {
  margin-top: 4px;
  color: #6e685f;
  font-size: 10px;
  line-height: 1.3;
}

.recognize-horn-icon {
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  justify-self: end;
  border-radius: 19px;
  background: rgba(185,131,24,.09);
  color: var(--gold);
}

.recognize-horn-icon svg {
  width: 38px;
  height: 38px;
}

@media (max-width: 390px) {
  .recognize-horn-card {
    grid-template-columns: 1fr 62px;
    min-height: 88px;
    padding: 13px 14px;
  }

  .recognize-horn-copy strong {
    font-size: 22px;
  }

  .recognize-horn-icon {
    width: 54px;
    height: 54px;
  }

  .recognize-horn-icon svg {
    width: 34px;
    height: 34px;
  }
}

/* RECOGNIZE SESSION — training flow preview */
.recognize-session-shell {
  width: min(100vw, 432px);
  height: 100dvh;
  margin: 0 auto;
  overflow: hidden;
  color: var(--green);
  background:
    radial-gradient(circle at 82% 6%, rgba(255,255,255,.22), transparent 24%),
    linear-gradient(180deg, #f6e7d4 0%, #efd9be 100%);
}

.recognize-session-inner {
  height: 100%;
  display: grid;
  grid-template-rows: auto auto minmax(0,1fr);
  gap: 10px;
  padding: max(18px, env(safe-area-inset-top)) 16px max(12px, env(safe-area-inset-bottom));
}

.recognize-session-topbar {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  align-items: center;
  gap: 10px;
}

.recognize-session-back {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.76);
  border-radius: 20px;
  background: rgba(255,248,238,.48);
  box-shadow: 0 7px 16px rgba(92,63,36,.10), inset 0 1px 0 rgba(255,255,255,.9);
}
.recognize-session-back svg { width: 20px; height: 20px; }

.recognize-session-title {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.recognize-session-title span {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}
.recognize-session-title small {
  color: #7b7063;
  font-size: 9px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.recognize-session-count {
  min-width: 54px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0 10px;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 17px;
  background: rgba(255,248,238,.5);
  font-family: Georgia, serif;
  font-size: 15px;
  font-weight: 700;
}

.recognize-session-progress {
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(151,122,88,.14);
}
.recognize-session-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #b98318, #0b7654);
  transition: width .25s ease;
}

.recognize-session-content {
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 14px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.recognize-session-content::-webkit-scrollbar { display: none; }

.recognize-session-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 10px;
}
.recognize-session-meta span {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 11px;
  border: 1px solid rgba(11,74,56,.12);
  border-radius: 14px;
  background: rgba(255,249,240,.46);
  font-size: 9px;
  font-weight: 800;
}

.recognize-media-card {
  position: relative;
  min-height: 260px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.82);
  border-radius: 28px;
  background: rgba(255,248,238,.54);
  box-shadow: 0 12px 28px rgba(92,63,36,.12), inset 0 1px 0 rgba(255,255,255,.92);
}

.recognize-media-card--image {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  padding: 24px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 28%, rgba(255,255,255,.7), transparent 34%),
    linear-gradient(155deg, rgba(231,218,195,.72), rgba(248,237,220,.72));
}

.recognize-media-placeholder {
  width: 86px;
  height: 86px;
  display: grid;
  place-items: center;
  border-radius: 28px;
  background: rgba(255,249,240,.66);
  color: var(--gold);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.86);
}
.recognize-media-placeholder svg { width: 48px; height: 48px; }

.recognize-media-copy { display: grid; gap: 3px; }
.recognize-media-copy span {
  color: var(--gold);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.recognize-media-copy strong {
  font-family: Georgia, serif;
  font-size: 28px;
}
.recognize-media-copy small {
  max-width: 260px;
  color: #766e64;
  font-size: 11px;
  line-height: 1.35;
}

.recognize-media-card--audio {
  min-height: 250px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  padding: 24px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 30%, rgba(255,255,255,.72), transparent 36%),
    linear-gradient(155deg, rgba(234,220,191,.76), rgba(248,238,222,.78));
}
.recognize-audio-mark {
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  border-radius: 24px;
  background: rgba(185,131,24,.10);
  color: var(--gold);
}
.recognize-audio-mark svg { width: 46px; height: 46px; }
.recognize-media-card--audio p {
  margin: 0;
  font-family: Georgia, serif;
  font-size: 25px;
  font-weight: 700;
}
.recognize-media-card--audio small { color: #766e64; font-size: 10px; }

.recognize-play-button {
  min-width: 188px;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 24px;
  background: #0a6747;
  color: #fff;
  box-shadow: 0 9px 18px rgba(10,103,71,.18);
  font-weight: 800;
}
.recognize-play-button svg { width: 24px; height: 24px; }
.recognize-play-button.is-playing { transform: scale(.98); opacity: .88; }

.recognize-question-block {
  margin-top: 14px;
  padding: 18px;
  border: 1px solid rgba(255,255,255,.78);
  border-radius: 26px;
  background: rgba(255,249,240,.60);
  box-shadow: 0 10px 22px rgba(92,63,36,.08), inset 0 1px 0 rgba(255,255,255,.9);
}

.recognize-question-kicker {
  margin: 0 0 5px;
  color: var(--gold);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 1.4px;
}
.recognize-question-block h1 {
  margin: 0 0 15px;
  font-family: Georgia, serif;
  font-size: 27px;
  line-height: 1.05;
}

.recognize-answer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}
.recognize-answer {
  min-height: 70px;
  display: grid;
  grid-template-columns: 30px 1fr;
  align-items: center;
  gap: 7px;
  padding: 10px 12px;
  border: 1px solid rgba(11,74,56,.14);
  border-radius: 18px;
  background: rgba(255,255,255,.40);
  text-align: left;
  color: var(--green);
}
.recognize-answer > span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(11,74,56,.06);
  font-family: Georgia, serif;
  font-weight: 700;
}
.recognize-answer strong { font-size: 12px; line-height: 1.15; }
.recognize-answer.correct { border-color: rgba(12,104,74,.50); background: rgba(178,207,169,.38); }
.recognize-answer.wrong { border-color: rgba(164,70,62,.45); background: rgba(209,139,130,.22); }
.recognize-answer.muted { opacity: .52; }

.recognize-feedback {
  margin-top: 14px;
  padding: 18px;
  border: 1px solid rgba(255,255,255,.80);
  border-radius: 26px;
  background: rgba(255,249,240,.68);
  box-shadow: 0 10px 24px rgba(92,63,36,.09), inset 0 1px 0 rgba(255,255,255,.92);
}
.recognize-feedback[hidden] { display: none; }

.recognize-feedback-result {
  display: grid;
  gap: 2px;
  margin-bottom: 14px;
  padding: 12px 14px;
  border-radius: 18px;
}
.recognize-feedback-result.is-correct { background: rgba(178,207,169,.34); color: #0b5f43; }
.recognize-feedback-result.is-wrong { background: rgba(209,139,130,.20); color: #8d3d36; }
.recognize-feedback-result strong { font-family: Georgia, serif; font-size: 22px; }
.recognize-feedback-result span { font-size: 11px; }

.recognize-feedback-grid { display: grid; gap: 8px; }
.recognize-feedback-grid article {
  padding: 11px 12px;
  border: 1px solid rgba(11,74,56,.08);
  border-radius: 16px;
  background: rgba(255,255,255,.28);
}
.recognize-feedback-grid small {
  color: var(--gold);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .8px;
  text-transform: uppercase;
}
.recognize-feedback-grid p {
  margin: 4px 0 0;
  color: #625f58;
  font-size: 11px;
  line-height: 1.35;
}

.recognize-next {
  width: 100%;
  min-height: 54px;
  margin-top: 12px;
  display: grid;
  grid-template-columns: 1fr 24px;
  align-items: center;
  padding: 0 18px;
  border: 0;
  border-radius: 20px;
  background: #0a6747;
  color: #fff;
  font-family: Georgia, serif;
  font-size: 22px;
  box-shadow: 0 9px 18px rgba(10,103,71,.16);
}
.recognize-next svg { width: 20px; height: 20px; }

@media (max-width: 390px) {
  .recognize-session-inner { padding-left: 12px; padding-right: 12px; }
  .recognize-session-title span { font-size: 19px; }
  .recognize-media-card { min-height: 232px; }
  .recognize-question-block { padding: 15px; }
  .recognize-question-block h1 { font-size: 24px; }
  .recognize-answer { min-height: 64px; padding: 9px 10px; }
}

/* HOME-01 refresh + STATISTICS-01 — JagdIQ visual system */
.home-shell--dashboard,
.statistics-shell {
  position: relative;
  width: min(100vw, 432px);
  height: 100dvh;
  margin: 0 auto;
  overflow: hidden;
  background:
    radial-gradient(circle at 88% 6%, rgba(255,255,255,.20), transparent 22%),
    radial-gradient(circle at 14% 88%, rgba(159,104,52,.04), transparent 30%),
    linear-gradient(180deg, #f5e4cf 0%, #eed8bd 100%);
  isolation: isolate;
}

.home-shell--dashboard::before,
.statistics-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .10;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='110' viewBox='0 0 110 110'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

.home-dashboard-inner,
.statistics-inner {
  position: relative;
  z-index: 2;
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0,1fr) auto;
  gap: 9px;
  padding: max(22px, env(safe-area-inset-top)) 14px max(10px, env(safe-area-inset-bottom));
}

.home-top--dashboard {
  position: relative;
  z-index: 3;
  padding: 0;
  align-items: flex-start;
}

.home-top--dashboard .brand-word {
  font-size: 37px;
  line-height: .94;
  letter-spacing: -1.7px;
}

.home-top--dashboard .brand-tagline {
  margin-top: 6px;
  font-size: 6.4px;
  letter-spacing: .92px;
}

.home-dashboard-content {
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 0 1px 4px;
}
.home-dashboard-content::-webkit-scrollbar { display: none; }

.home-hero--dashboard {
  min-height: 292px;
  padding: 40px 8px 0 8px;
  overflow: hidden;
  border-radius: 30px;
}

.home-hero--dashboard .hero-copy {
  width: 62%;
  padding-left: 7px;
}

.home-hero--dashboard .hero-copy h1 {
  font-size: 23px;
}

.home-hero--dashboard .exam-days {
  margin-top: 10px;
  font-size: 16px;
}

.home-hero--dashboard .state-line {
  margin-top: 14px;
  font-size: 17px;
}

.home-hero--dashboard .home-landscape {
  top: 2px;
  right: -2px;
  width: 66%;
}

.home-statistics-card {
  width: 100%;
  min-height: 152px;
  margin: 5px 0 4px;
  padding: 16px 16px 15px;
  border: 1px solid rgba(255,255,255,.78);
  border-radius: 28px;
  background: rgba(255,249,241,.55);
  box-shadow: 0 10px 25px rgba(92,63,36,.10), inset 0 1px 0 rgba(255,255,255,.93);
  color: var(--green);
  text-align: left;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.home-statistics-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.home-statistics-kicker,
.statistics-kicker {
  display: block;
  color: var(--gold);
  font-size: 7.5px;
  font-weight: 900;
  letter-spacing: 1.15px;
}

.home-statistics-heading h2 {
  margin: 2px 0 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 27px;
  line-height: 1;
}

.home-statistics-arrow {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  background: rgba(185,131,24,.10);
  color: var(--gold);
}
.home-statistics-arrow svg { width: 20px; height: 20px; }

.home-statistics-body {
  display: grid;
  grid-template-columns: 84px minmax(0,1fr);
  align-items: center;
  gap: 14px;
  margin-top: 10px;
}

.home-readiness-ring,
.statistics-readiness-ring {
  position: relative;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(#0d7453 var(--progress), rgba(11,74,56,.10) 0deg);
}

.home-readiness-ring {
  width: 78px;
  height: 78px;
}
.home-readiness-ring::before,
.statistics-readiness-ring::before {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: inherit;
  background: #f6e8d6;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
}

.home-readiness-ring-inner,
.statistics-readiness-ring > div {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  text-align: center;
}

.home-readiness-ring strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  line-height: 1;
}
.home-readiness-ring span {
  margin-top: 3px;
  font-size: 7px;
  color: #726b61;
}

.home-statistics-details { min-width: 0; }
.home-statistics-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 9.5px;
  color: #70695f;
}
.home-statistics-row strong {
  color: var(--green);
  font-weight: 750;
  text-align: right;
}

.home-statistics-progress,
.statistics-main-progress,
.statistics-subject-progress {
  overflow: hidden;
  border-radius: 999px;
  background: rgba(155,127,95,.15);
  box-shadow: inset 0 1px 1px rgba(92,63,36,.06);
}
.home-statistics-progress {
  height: 7px;
  margin-top: 7px;
}
.home-statistics-progress i,
.statistics-main-progress i,
.statistics-subject-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #bd891e 0%, #0b7453 100%);
}

.home-statistics-mini {
  display: flex;
  gap: 16px;
  margin-top: 9px;
  color: #726b61;
  font-size: 8.7px;
}
.home-statistics-mini b {
  color: var(--green);
  font-size: 12px;
}

.home-footer--dashboard {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  width: 100%;
  height: 54px;
  border-radius: 30px;
}

/* STATISTICS-01 */
.statistics-topbar {
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: center;
  gap: 10px;
}

.statistics-back {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.76);
  border-radius: 50%;
  background: rgba(255,248,238,.54);
  color: var(--green);
  box-shadow: 0 7px 16px rgba(92,63,36,.10), inset 0 1px 0 rgba(255,255,255,.9);
}
.statistics-back svg { width: 21px; height: 21px; }

.statistics-title {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.statistics-title span {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 32px;
  line-height: 1;
  font-weight: 700;
  color: var(--green);
}
.statistics-title small {
  font-size: 6.5px;
  font-weight: 850;
  letter-spacing: 1.1px;
  color: var(--green-deep);
}

.statistics-content {
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 2px 1px 8px;
}
.statistics-content::-webkit-scrollbar { display: none; }

.statistics-readiness-card,
.statistics-card {
  border: 1px solid rgba(255,255,255,.78);
  background: rgba(255,249,241,.58);
  box-shadow: 0 10px 24px rgba(92,63,36,.10), inset 0 1px 0 rgba(255,255,255,.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.statistics-readiness-card {
  min-height: 174px;
  display: grid;
  grid-template-columns: 1fr 122px;
  align-items: center;
  gap: 18px;
  padding: 20px;
  border-radius: 30px;
}

.statistics-readiness-copy h1 {
  margin: 6px 0 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 47px;
  line-height: .95;
  letter-spacing: -1px;
}
.statistics-readiness-copy p {
  margin: 8px 0 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
}
.statistics-trend {
  display: inline-block;
  margin-top: 9px;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(178,207,169,.27);
  color: #0b6849;
  font-size: 8.5px;
  font-weight: 750;
}

.statistics-readiness-ring {
  width: 112px;
  height: 112px;
  justify-self: end;
}
.statistics-readiness-ring::before { inset: 10px; }
.statistics-readiness-ring strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 25px;
  line-height: 1;
}
.statistics-readiness-ring span {
  margin-top: 4px;
  font-size: 8px;
  color: #746d62;
}

.statistics-card {
  margin-top: 10px;
  padding: 17px;
  border-radius: 26px;
}

.statistics-card-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}
.statistics-card-head h2,
.statistics-small-card h2 {
  margin: 3px 0 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 24px;
  line-height: 1;
}
.statistics-card-head > strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 24px;
}
.statistics-card-head--simple { align-items: flex-start; }

.statistics-main-progress {
  height: 8px;
  margin-top: 14px;
}
.statistics-progress-copy {
  margin: 7px 0 0;
  color: #716a61;
  font-size: 9.5px;
}

.statistics-triplet {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  margin-top: 13px;
}
.statistics-number {
  min-width: 0;
  padding: 10px 9px;
  border-radius: 17px;
  background: rgba(255,251,246,.48);
  border: 1px solid rgba(11,74,56,.07);
}
.statistics-number span {
  display: block;
  font-size: 8px;
  color: #756e64;
}
.statistics-number strong {
  display: block;
  margin-top: 4px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 21px;
}
.statistics-number--green strong { color: #0b6849; }
.statistics-number--red strong { color: #a4433b; }
.statistics-number--gold strong { color: #b57d16; }

.statistics-accuracy,
.statistics-today-goal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  font-size: 9.5px;
  color: #716a61;
}
.statistics-accuracy strong,
.statistics-today-goal strong {
  color: var(--green);
  font-size: 11px;
}

.statistics-today-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  margin-top: 13px;
}
.statistics-today-grid article {
  padding: 10px 8px;
  border-radius: 17px;
  background: rgba(255,251,246,.46);
  text-align: center;
}
.statistics-today-grid strong {
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 21px;
}
.statistics-today-grid span {
  display: block;
  margin-top: 3px;
  font-size: 8px;
  color: #756e64;
}

.statistics-level-card {
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(202,220,190,.45), rgba(255,249,241,.62));
}
.statistics-level-progress {
  height: 8px;
  margin-top: 14px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(11,74,56,.09);
}
.statistics-level-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #bd891e 0%, #0b7453 100%);
}
.statistics-level-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
  color: #716a61;
  font-size: 8px;
}
.statistics-level-meta strong { color: var(--green); }

.statistics-achievement-list {
  display: grid;
  gap: 7px;
  margin-top: 13px;
}
.statistics-achievement {
  display: grid;
  grid-template-columns: 30px minmax(0,1fr);
  gap: 9px;
  align-items: center;
  padding: 9px 10px;
  border-radius: 15px;
  border: 1px solid rgba(11,74,56,.07);
  background: rgba(255,251,246,.42);
  opacity: .66;
}
.statistics-achievement.is-unlocked {
  opacity: 1;
  background: rgba(199,219,188,.34);
  border-color: rgba(11,106,73,.13);
}
.statistics-achievement-mark {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(11,74,56,.07);
  color: #857b6e;
  font-size: 12px;
  font-weight: 900;
}
.statistics-achievement.is-unlocked .statistics-achievement-mark {
  background: rgba(11,106,73,.12);
  color: #0b6849;
}
.statistics-achievement > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.statistics-achievement strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 11px;
}
.statistics-achievement small {
  color: #756e64;
  font-size: 7px;
  line-height: 1.3;
}
.statistics-achievement-progress {
  height: 3px;
  margin-top: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(11,74,56,.08);
}
.statistics-achievement-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #0b7453;
}

.statistics-split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.statistics-small-card {
  min-height: 120px;
}
.statistics-small-card p {
  margin: 10px 0 0;
  color: #746d63;
  font-size: 9px;
  line-height: 1.35;
}
.statistics-small-card p strong { color: var(--green); }

.statistics-subject-list {
  display: grid;
  gap: 11px;
  margin-top: 13px;
}
.statistics-subject-row-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 9.5px;
}
.statistics-subject-row-head strong { font-size: 9.5px; }
.statistics-subject-progress {
  height: 6px;
  margin-top: 5px;
}
.statistics-empty {
  padding: 14px 0 4px;
  color: #756e64;
  font-size: 10px;
  line-height: 1.45;
}

.statistics-focus-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  margin-top: 13px;
}
.statistics-focus-grid div {
  padding: 10px 7px;
  border-radius: 16px;
  background: rgba(255,251,246,.48);
  text-align: center;
}
.statistics-focus-grid span {
  display: block;
  font-size: 7.8px;
  color: #756e64;
}
.statistics-focus-grid strong {
  display: block;
  margin-top: 4px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 20px;
}

.statistics-nav {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  height: 54px;
  padding: 0 10px;
  border: 1px solid rgba(255,255,255,.74);
  border-radius: 30px;
  background: rgba(255,246,235,.58);
  box-shadow: 0 8px 22px rgba(118,82,48,.12), inset 0 1px 0 rgba(255,255,255,.94);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
}

@media (max-height: 780px) {
  .home-dashboard-inner,
  .statistics-inner {
    padding-top: max(14px, env(safe-area-inset-top));
    gap: 7px;
  }

  .home-top--dashboard .brand-word { font-size: 33px; }
  .home-top--dashboard .brand-tagline { font-size: 5.8px; }
  .home-hero--dashboard { min-height: 255px; padding-top: 32px; }
  .home-hero--dashboard .hero-copy h1 { font-size: 20px; }
  .home-hero--dashboard .exam-days { font-size: 14px; }
  .home-hero--dashboard .state-line { font-size: 15px; }
  .home-statistics-card { min-height: 140px; padding: 14px; }
  .home-statistics-heading h2 { font-size: 24px; }
  .home-statistics-body { grid-template-columns: 72px 1fr; gap: 12px; }
  .home-readiness-ring { width: 68px; height: 68px; }

  .statistics-title span { font-size: 29px; }
  .statistics-readiness-card { min-height: 156px; grid-template-columns: 1fr 102px; padding: 17px; }
  .statistics-readiness-copy h1 { font-size: 42px; }
  .statistics-readiness-ring { width: 96px; height: 96px; }
  .statistics-card { padding: 15px; }
}

@media (max-width: 380px) {
  .home-dashboard-inner,
  .statistics-inner { padding-left: 12px; padding-right: 12px; }
  .home-top--dashboard .brand-word { font-size: 31px; }
  .home-top--dashboard .brand-tagline { font-size: 5.3px; letter-spacing: .75px; }
  .home-hero--dashboard { min-height: 250px; }
  .home-statistics-body { grid-template-columns: 68px 1fr; }
  .home-readiness-ring { width: 64px; height: 64px; }
  .home-statistics-mini { gap: 10px; }
  .statistics-readiness-card { grid-template-columns: 1fr 92px; gap: 10px; }
  .statistics-readiness-ring { width: 88px; height: 88px; }
  .statistics-readiness-copy h1 { font-size: 38px; }
  .statistics-readiness-copy p { font-size: 15px; }
}

/* LIBRARY-01 — JagdIQ Nachschlagewerk */
.library-shell {
  position: relative;
  width: min(100vw, 432px);
  height: 100dvh;
  margin: 0 auto;
  overflow: hidden;
  background:
    radial-gradient(circle at 86% 6%, rgba(255,255,255,.20), transparent 25%),
    radial-gradient(circle at 14% 86%, rgba(154,104,52,.04), transparent 32%),
    linear-gradient(180deg, #f6e6d2 0%, #efd8bb 100%);
  isolation: isolate;
}
.library-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .11;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='110' viewBox='0 0 110 110'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}
.library-inner {
  position: relative;
  z-index: 2;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: max(22px, env(safe-area-inset-top)) 14px max(10px, env(safe-area-inset-bottom));
}
.library-topbar {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.library-heading {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  min-width: 0;
}
.library-page-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: var(--gold);
  flex: 0 0 auto;
}
.library-page-icon svg { width: 29px; height: 29px; }
.library-heading h1 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 37px;
  line-height: .95;
  letter-spacing: -.8px;
  color: var(--green);
}
.library-heading p {
  margin: 6px 0 0;
  color: var(--green-deep);
  font-size: 6px;
  font-weight: 850;
  letter-spacing: .78px;
  white-space: nowrap;
}
.library-actions { padding-top: 0; }
.library-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 2px 1px 10px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.library-content::-webkit-scrollbar { display: none; }
.library-search-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) 52px;
  gap: 9px;
  align-items: center;
}
.library-search {
  height: 52px;
  display: grid;
  grid-template-columns: 27px minmax(0,1fr);
  align-items: center;
  gap: 7px;
  padding: 0 14px;
  border: 1px solid rgba(255,255,255,.80);
  border-radius: 19px;
  background: rgba(255,249,241,.57);
  box-shadow: 0 8px 20px rgba(91,62,37,.08), inset 0 1px 0 rgba(255,255,255,.93);
}
.library-search svg { width: 21px; height: 21px; }
.library-search input {
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--green);
  font-size: 13px;
}
.library-search input::placeholder { color: #82786c; opacity: 1; }
.library-quick-button,
.library-circle-action {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.80);
  border-radius: 19px;
  background: rgba(255,249,241,.57);
  box-shadow: 0 8px 20px rgba(91,62,37,.08), inset 0 1px 0 rgba(255,255,255,.93);
  color: var(--green);
}
.library-quick-button svg,
.library-circle-action svg { width: 23px; height: 23px; }
.library-circle-action.active { color: var(--gold); background: rgba(238,224,194,.82); }
.library-search-results {
  margin-top: 8px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.75);
  border-radius: 19px;
  background: rgba(255,249,241,.92);
  box-shadow: 0 12px 28px rgba(91,62,37,.12);
}
.library-search-results button {
  width: 100%;
  min-height: 62px;
  display: grid;
  grid-template-columns: 40px minmax(0,1fr) 18px;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 0;
  border-bottom: 1px solid rgba(121,86,47,.09);
  background: transparent;
  text-align: left;
}
.library-search-results button:last-child { border-bottom: 0; }
.library-search-results button > svg { width: 17px; height: 17px; }
.library-search-results strong { display: block; font-family: Georgia, serif; font-size: 16px; }
.library-search-results small { display: block; margin-top: 3px; color: #7b7368; font-size: 10px; }
.library-search-results p { margin: 0; padding: 18px; color: #746d63; text-align: center; font-size: 12px; }
.library-result-icon,
.library-mini-icon,
.library-category-icon,
.library-article-icon {
  display: grid;
  place-items: center;
  color: var(--green);
}
.library-result-icon svg { width: 30px; height: 30px; }
.library-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 17px 3px 9px;
}
.library-section-head h2 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 26px;
  line-height: 1;
}
.library-section-head span { color: #7c746a; font-size: 9px; font-weight: 650; }
.library-recent-strip {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 0 1px 2px;
  scrollbar-width: none;
}
.library-recent-strip::-webkit-scrollbar { display: none; }
.library-recent-card {
  flex: 0 0 142px;
  min-height: 110px;
  display: grid;
  grid-template-rows: 38px auto auto;
  align-content: center;
  gap: 3px;
  padding: 11px;
  border: 1px solid rgba(255,255,255,.78);
  border-radius: 23px;
  background: rgba(255,249,241,.54);
  box-shadow: 0 8px 20px rgba(91,62,37,.08), inset 0 1px 0 rgba(255,255,255,.92);
  text-align: left;
}
.library-mini-icon { width: 36px; height: 36px; border-radius: 13px; background: rgba(255,250,243,.72); }
.library-mini-icon svg { width: 26px; height: 26px; }
.library-recent-card strong { font-family: Georgia, serif; font-size: 15px; }
.library-recent-card small { color: #766e64; font-size: 9px; }
.library-category-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
}
.library-category-card {
  position: relative;
  min-width: 0;
  min-height: 126px;
  display: grid;
  grid-template-columns: 48px minmax(0,1fr);
  grid-template-rows: 1fr;
  align-items: center;
  gap: 9px;
  padding: 12px 11px;
  border: 1px solid rgba(255,255,255,.82);
  border-radius: 25px;
  background: rgba(255,249,241,.51);
  box-shadow: 0 9px 21px rgba(91,62,37,.08), inset 0 1px 0 rgba(255,255,255,.93);
  text-align: left;
}
.library-category-icon {
  width: 46px;
  height: 46px;
  border: 1px solid rgba(121,86,47,.08);
  border-radius: 16px;
  background: rgba(255,250,243,.70);
}
.library-category-icon svg { width: 31px; height: 31px; }
.library-category-copy { min-width: 0; }
.library-category-copy strong {
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px;
  line-height: 1.02;
  overflow-wrap: anywhere;
}
.library-category-copy small {
  display: block;
  margin-top: 5px;
  color: #756d63;
  font-size: 8.5px;
  line-height: 1.2;
}
.library-category-chevron { position: absolute; right: 10px; top: 10px; opacity: .32; }
.library-category-chevron svg { width: 14px; height: 14px; }
.library-offline-banner {
  min-height: 80px;
  margin-top: 12px;
  display: grid;
  grid-template-columns: 44px minmax(0,1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.78);
  border-radius: 24px;
  background: rgba(238,226,202,.66);
}
.library-offline-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 15px; background: rgba(255,250,243,.66); color: var(--gold); }
.library-offline-icon svg { width: 24px; height: 24px; }
.library-offline-banner strong { display: block; font-family: Georgia, serif; font-size: 15px; }
.library-offline-banner small { display: block; margin-top: 3px; color: #746d63; font-size: 8.5px; line-height: 1.25; }
.library-offline-banner button { min-height: 34px; padding: 0 11px; border: 1px solid rgba(11,74,56,.16); border-radius: 14px; background: rgba(255,255,255,.42); font-size: 9px; font-weight: 800; }
.library-nav {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(4,1fr);
  align-items: center;
  height: 54px;
  padding: 0 10px;
  border: 1px solid rgba(255,255,255,.78);
  border-radius: 30px;
  background: rgba(255,246,235,.58);
  box-shadow: 0 8px 22px rgba(118,82,48,.12), inset 0 1px 0 rgba(255,255,255,.94);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
}

/* Library category / article subpages */
.library-inner--subpage,
.library-inner--article { gap: 10px; }
.library-subpage-header,
.library-article-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
}
.library-subpage-header > div { min-width: 0; }
.library-subpage-header h1 {
  margin: 0;
  font-family: Georgia, serif;
  font-size: 32px;
  line-height: 1;
}
.library-subpage-header p {
  margin: 5px 0 0;
  color: var(--green-deep);
  font-size: 6.4px;
  font-weight: 850;
  letter-spacing: .85px;
}
.library-back {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.84);
  border-radius: 50%;
  background: rgba(255,249,241,.54);
  box-shadow: 0 8px 20px rgba(91,62,37,.08), inset 0 1px 0 rgba(255,255,255,.93);
  font-family: Georgia, serif;
  font-size: 35px;
  line-height: 1;
}
.library-content--subpage { padding-top: 2px; }
.library-subfilters {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 1px 0 9px;
  scrollbar-width: none;
}
.library-subfilters::-webkit-scrollbar { display: none; }
.library-subfilters button {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid rgba(11,74,56,.13);
  border-radius: 16px;
  background: rgba(255,249,241,.48);
  font-size: 10px;
  font-weight: 800;
}
.library-subfilters button.active { background: rgba(190,207,170,.55); border-color: rgba(11,74,56,.25); }
.library-lexicon-search { margin-bottom: 9px; }
.library-lexicon-letters { padding-bottom: 7px; }
.library-lexicon-letters button {
  min-width: 34px;
  padding: 0 10px;
}
.library-lexicon-meta {
  min-height: 24px;
  padding: 0 3px 7px;
  color: #766f65;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.library-lexicon-more {
  width: 100%;
  min-height: 44px;
  margin-top: 10px;
  border: 1px solid rgba(11,74,56,.15);
  border-radius: 17px;
  background: rgba(255,249,241,.62);
  box-shadow: 0 7px 18px rgba(91,62,37,.07), inset 0 1px 0 rgba(255,255,255,.9);
  color: var(--green);
  font-size: 11px;
  font-weight: 800;
}
.library-lexicon-more[hidden] { display: none; }
.library-article-list {
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.78);
  border-radius: 26px;
  background: rgba(255,249,241,.52);
  box-shadow: 0 9px 22px rgba(91,62,37,.08), inset 0 1px 0 rgba(255,255,255,.91);
}
.library-article-row {
  width: 100%;
  min-height: 72px;
  display: grid;
  grid-template-columns: 48px minmax(0,1fr) 20px;
  align-items: center;
  gap: 10px;
  padding: 8px 13px;
  border: 0;
  border-bottom: 1px solid rgba(121,86,47,.10);
  background: transparent;
  text-align: left;
}
.library-article-row:last-child { border-bottom: 0; }
.library-article-icon {
  width: 44px;
  height: 44px;
  border-radius: 15px;
  background: rgba(255,250,243,.67);
  border: 1px solid rgba(121,86,47,.07);
}
.library-article-icon svg { width: 29px; height: 29px; }
.library-article-copy strong { display: block; font-family: Georgia, serif; font-size: 17px; }
.library-article-copy small { display: block; margin-top: 4px; color: #766f65; font-size: 9px; }
.library-article-row > svg { width: 17px; height: 17px; }
.library-empty { min-height: 240px; display: grid; place-items: center; align-content: center; gap: 12px; padding: 30px; text-align: center; color: #746d63; }
.library-empty > span { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 22px; background: rgba(255,250,243,.70); color: var(--gold); }
.library-empty svg { width: 39px; height: 39px; }
.library-empty p { margin: 0; font-size: 12px; line-height: 1.45; }
.library-article-header { justify-content: space-between; }
.library-article-header-actions { display: flex; gap: 8px; margin-left: auto; }
.library-article-content { padding-top: 0; }
.library-article-hero,
.library-info-card,
.library-highlight-card,
.library-law-card,
.library-crosslinks {
  border: 1px solid rgba(255,255,255,.80);
  background: rgba(255,249,241,.55);
  box-shadow: 0 9px 22px rgba(91,62,37,.08), inset 0 1px 0 rgba(255,255,255,.92);
}
.library-article-hero {
  min-height: 190px;
  display: grid;
  grid-template-columns: 100px minmax(0,1fr);
  align-items: center;
  gap: 12px;
  padding: 18px;
  border-radius: 30px;
  background:
    radial-gradient(circle at 20% 25%, rgba(185,131,24,.10), transparent 35%),
    rgba(255,249,241,.55);
}
.library-article-hero-icon { width: 96px; height: 96px; display: grid; place-items: center; border-radius: 30px; background: rgba(238,224,194,.55); color: var(--gold); }
.library-article-hero-icon svg { width: 66px; height: 66px; }
.library-article-hero small { color: var(--gold); font-size: 8px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; }
.library-article-hero h1 { margin: 4px 0 7px; font-family: Georgia, serif; font-size: 32px; line-height: 1; }
.library-article-hero p { margin: 0; color: #6f695f; font-size: 10px; line-height: 1.4; }
.library-info-card,
.library-law-card { margin-top: 10px; padding: 17px; border-radius: 25px; }
.library-info-kicker,
.library-highlight-card > span { color: var(--gold); font-size: 8px; font-weight: 900; letter-spacing: 1.5px; }
.library-info-card h2,
.library-law-card h2 { margin: 5px 0 9px; font-family: Georgia, serif; font-size: 22px; }
.library-info-card ul { margin: 0; padding: 0 0 0 18px; color: #69645c; font-size: 11px; line-height: 1.45; }
.library-info-card li + li { margin-top: 5px; }
.library-info-card p,
.library-law-card p { margin: 7px 0 0; color: #69645c; font-size: 11px; line-height: 1.45; }
.library-highlight-card { margin-top: 10px; padding: 17px; border-radius: 25px; background: rgba(235,227,203,.72); }
.library-highlight-card p { margin: 7px 0 0; font-family: Georgia, serif; font-size: 17px; line-height: 1.25; }
.library-law-card { background: rgba(237,224,194,.58); }
.library-crosslinks { margin-top: 10px; overflow: hidden; border-radius: 25px; }
.library-crosslinks button { width: 100%; min-height: 55px; display: grid; grid-template-columns: 1fr 20px; align-items: center; padding: 0 16px; border: 0; border-bottom: 1px solid rgba(121,86,47,.10); background: transparent; font-family: Georgia, serif; font-size: 16px; text-align: left; }
.library-crosslinks button:last-child { border-bottom: 0; }
.library-crosslinks svg { width: 17px; height: 17px; }

@media (max-width: 390px) {
  .library-inner { padding-left: 12px; padding-right: 12px; }
  .library-heading h1 { font-size: 33px; }
  .library-heading p { font-size: 5.4px; letter-spacing: .65px; }
  .library-actions { gap: 4px; }
  .library-actions .home-header-button { min-width: 32px; height: 32px; padding: 0 5px; }
  .library-actions .home-header-button svg { width: 16px; height: 16px; }
  .library-category-card { min-height: 118px; grid-template-columns: 43px minmax(0,1fr); gap: 7px; padding: 10px 9px; }
  .library-category-icon { width: 42px; height: 42px; }
  .library-category-icon svg { width: 28px; height: 28px; }
  .library-category-copy strong { font-size: 14.5px; }
  .library-article-hero { grid-template-columns: 82px minmax(0,1fr); padding: 15px; }
  .library-article-hero-icon { width: 78px; height: 78px; }
  .library-article-hero-icon svg { width: 54px; height: 54px; }
  .library-article-hero h1 { font-size: 28px; }
}

/* LIBRARY-02 — polished category wrapping + reusable article template */
.library-category-copy strong {
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}

.library-category-card[data-category="wildbrethygiene"] .library-category-copy strong,
.library-category-card[data-category="natur"] .library-category-copy strong {
  font-size: 14px;
  line-height: 1.02;
}

.library-category-card[data-category="jagdhorn"] .library-category-copy strong {
  line-height: 1.02;
}

.library-article-media {
  position: relative;
  min-height: 190px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.82);
  border-radius: 28px;
  background:
    radial-gradient(circle at 76% 24%, rgba(255,255,255,.34), transparent 27%),
    linear-gradient(145deg, rgba(238,220,190,.92), rgba(229,205,170,.70));
  box-shadow: 0 10px 24px rgba(92,63,36,.10), inset 0 1px 0 rgba(255,255,255,.94);
}

.library-article-media::before,
.library-article-media::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.library-article-media::before {
  left: -8%;
  right: -8%;
  bottom: -32px;
  height: 110px;
  opacity: .20;
  background:
    radial-gradient(ellipse at 12% 100%, rgba(11,74,56,.38) 0 19%, transparent 20%),
    radial-gradient(ellipse at 28% 100%, rgba(11,74,56,.28) 0 22%, transparent 23%),
    radial-gradient(ellipse at 54% 100%, rgba(11,74,56,.23) 0 19%, transparent 20%),
    radial-gradient(ellipse at 78% 100%, rgba(11,74,56,.30) 0 23%, transparent 24%);
}

.library-article-media::after {
  inset: 0;
  opacity: .10;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.14'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

.library-article-media-art {
  position: relative;
  z-index: 2;
  min-height: 190px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 14px;
  padding: 22px;
  color: var(--gold);
}

.library-article-media-icon {
  width: 92px;
  height: 92px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.56);
  border-radius: 30px;
  background: rgba(255,248,238,.40);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.82), 0 10px 24px rgba(92,63,36,.07);
}

.library-article-media-icon svg {
  width: 61px;
  height: 61px;
}

.library-article-media-kicker {
  color: rgba(11,74,56,.76);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}

.library-article-hero {
  display: block !important;
  min-height: 0 !important;
  margin-top: 10px;
  padding: 18px !important;
}

.library-article-hero > div {
  min-width: 0;
}

.library-article-hero small {
  display: block;
}

.library-article-hero h1 {
  margin-top: 5px;
}

/* All article blocks now share one reusable JagdIQ card rhythm. */
.library-info-card,
.library-highlight-card,
.library-law-card,
.library-crosslinks {
  border: 1px solid rgba(255,255,255,.74);
  background: rgba(255,249,241,.54);
  box-shadow: 0 8px 20px rgba(91,62,37,.07), inset 0 1px 0 rgba(255,255,255,.89);
}

.library-highlight-card {
  background: rgba(235,227,203,.74);
}

.library-law-card {
  background: rgba(237,224,194,.60);
}

@media (max-width: 380px) {
  .library-category-card[data-category="wildbrethygiene"] .library-category-copy strong,
  .library-category-card[data-category="natur"] .library-category-copy strong {
    font-size: 12.8px;
  }

  .library-article-media,
  .library-article-media-art {
    min-height: 168px;
  }

  .library-article-media-icon {
    width: 80px;
    height: 80px;
  }

  .library-article-media-icon svg {
    width: 53px;
    height: 53px;
  }
}


/* SETTINGS-01 */
.settings-shell {
  width: min(100vw, 432px);
  height: 100dvh;
  margin: 0 auto;
  overflow: hidden;
  color: var(--green);
  background:
    radial-gradient(circle at 82% 4%, rgba(255,255,255,.22), transparent 24%),
    linear-gradient(180deg, #f6e5d0 0%, #eed7ba 100%);
}

.settings-inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: max(22px, env(safe-area-inset-top)) 16px max(14px, env(safe-area-inset-bottom));
}

.settings-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 2px 0 12px;
}

.settings-back {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.8);
  border-radius: 50%;
  background: rgba(255,248,238,.52);
  box-shadow: 0 7px 17px rgba(92,63,36,.10), inset 0 1px 0 rgba(255,255,255,.92);
  color: var(--green);
  font-family: Georgia, serif;
  font-size: 40px;
  line-height: 1;
  padding: 0 0 5px;
}

.settings-title {
  min-width: 0;
}

.settings-title h1 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 37px;
  line-height: .95;
  letter-spacing: -1px;
}

.settings-title p {
  margin: 6px 0 0;
  font-size: 6.5px;
  line-height: 1;
  letter-spacing: 1.05px;
  font-weight: 850;
}

.settings-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: grid;
  gap: 12px;
  padding: 0 1px 22px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.settings-content::-webkit-scrollbar { display: none; }

.settings-card {
  padding: 16px;
  border: 1px solid rgba(255,255,255,.78);
  border-radius: 26px;
  background: rgba(255,248,240,.58);
  box-shadow: 0 10px 24px rgba(92,63,36,.08), inset 0 1px 0 rgba(255,255,255,.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.settings-card-heading {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 14px;
}

.settings-card-heading--compact {
  margin-bottom: 0;
  flex: 1 1 auto;
}

.settings-card-icon {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 15px;
  color: var(--green);
  background: rgba(247,237,222,.75);
  box-shadow: inset 0 0 0 1px rgba(121,86,47,.08);
}

.settings-card-icon svg {
  width: 27px;
  height: 27px;
}

.settings-card-heading small {
  display: block;
  color: var(--gold);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 1.35px;
}

.settings-card-heading h2 {
  margin: 3px 0 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 24px;
  line-height: 1;
}

.settings-card-heading p {
  margin: 4px 0 0;
  color: #746e65;
  font-size: 10px;
}

.settings-form-grid {
  display: grid;
  gap: 11px;
}

.settings-field {
  display: grid;
  gap: 6px;
}

.settings-field > span {
  font-size: 10px;
  font-weight: 750;
  color: #5f625c;
}

.settings-field input,
.settings-field select {
  width: 100%;
  height: 48px;
  border: 1px solid rgba(11,74,56,.15);
  border-radius: 15px;
  outline: 0;
  padding: 0 13px;
  color: var(--green);
  background: rgba(255,255,255,.62);
  font-size: 14px;
  font-weight: 650;
  -webkit-appearance: none;
  appearance: none;
}

.settings-field input:focus,
.settings-field select:focus {
  border-color: rgba(11,74,56,.38);
  box-shadow: 0 0 0 3px rgba(11,74,56,.06);
}

.settings-segmented {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  padding: 4px;
  margin-bottom: 12px;
  border-radius: 16px;
  background: rgba(143,117,84,.10);
}

.settings-segmented button {
  height: 42px;
  border: 0;
  border-radius: 13px;
  background: transparent;
  color: var(--green);
  font-weight: 800;
}

.settings-segmented button.active {
  background: rgba(194,214,181,.66);
  box-shadow: 0 2px 6px rgba(64,85,58,.10), inset 0 0 0 1px rgba(11,74,56,.18);
}

.settings-goal-field {
  margin-bottom: 11px;
}

.settings-toggle-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 46px;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid rgba(121,86,47,.09);
}

.settings-toggle-row:first-of-type {
  border-top: 0;
}

.settings-toggle-row span strong,
.settings-toggle-row span small {
  display: block;
}

.settings-toggle-row span strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px;
}

.settings-toggle-row span small {
  margin-top: 3px;
  color: #756f66;
  font-size: 10px;
  line-height: 1.25;
}

.settings-toggle-row input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.settings-toggle-row i {
  position: relative;
  width: 44px;
  height: 26px;
  justify-self: end;
  border-radius: 999px;
  background: rgba(125,120,109,.23);
  box-shadow: inset 0 1px 2px rgba(60,50,40,.08);
  transition: background .18s ease;
}

.settings-toggle-row i::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fffaf3;
  box-shadow: 0 2px 5px rgba(70,55,38,.16);
  transition: transform .18s ease;
}

.settings-toggle-row input:checked + i {
  background: #0b6a49;
}

.settings-toggle-row input:checked + i::after {
  transform: translateX(18px);
}

.settings-note {
  margin: 8px 0 0;
  color: #7a746b;
  font-size: 9px;
  line-height: 1.35;
}

.settings-row-card {
  display: flex;
  align-items: center;
  gap: 12px;
}

.settings-small-button {
  flex: 0 0 auto;
  min-width: 92px;
  height: 40px;
  border: 1px solid rgba(11,74,56,.18);
  border-radius: 14px;
  background: rgba(255,255,255,.48);
  color: var(--green);
  font-size: 11px;
  font-weight: 850;
}

.settings-offline-bundle {
  display:grid;
  gap:13px;
  border-color:rgba(11,106,73,.16);
  background:
    linear-gradient(145deg,rgba(203,223,191,.33),rgba(255,249,241,.58));
}
.settings-offline-bundle-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:7px;
}
.settings-offline-bundle-grid>div {
  min-width:0;
  display:grid;
  gap:3px;
  padding:10px 8px;
  border-radius:15px;
  background:rgba(255,255,255,.42);
  text-align:center;
}
.settings-offline-bundle-grid strong {
  font-family:Georgia,"Times New Roman",serif;
  font-size:18px;
  line-height:1;
}
.settings-offline-bundle-grid span {
  overflow:hidden;
  color:#746e65;
  font-size:7.5px;
  line-height:1.25;
  text-overflow:ellipsis;
}
.settings-offline-bundle-note {
  color:#6f6960;
  font-size:9px;
  line-height:1.4;
}
.settings-offline-actions {
  display:flex;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
}
.settings-offline-actions--bundle {
  justify-content:stretch;
}
.settings-offline-actions--bundle .settings-small-button {
  flex:1 1 140px;
}
.settings-small-button--primary {
  border-color:transparent;
  background:linear-gradient(180deg,#08704d 0%,#07583c 100%);
  color:#fff;
  box-shadow:0 8px 16px rgba(9,97,63,.13);
}
.settings-small-button--quiet {
  background:rgba(255,255,255,.32);
}
.settings-small-button:disabled {
  opacity:.5;
}
@media(max-width:380px){
  .settings-offline-bundle-grid{grid-template-columns:1fr}
  .settings-offline-bundle-grid>div{
    grid-template-columns:auto 1fr;
    align-items:center;
    text-align:left;
  }
  .settings-offline-bundle-grid strong{font-size:16px}
}

.settings-account-row {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid rgba(121,86,47,.09);
}

.settings-account-row:first-of-type {
  border-top: 0;
}

.settings-account-row span small,
.settings-account-row span strong {
  display: block;
}

.settings-account-row span small {
  color: #7a746b;
  font-size: 9px;
}

.settings-account-row span strong {
  margin-top: 3px;
  font-size: 12px;
  overflow-wrap: anywhere;
}

.settings-status-pill {
  flex: 0 0 auto;
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(185,131,24,.10);
  color: #95690f;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .8px;
}

.settings-access-note{
  margin-top:8px;
  padding:12px 13px;
  border-radius:16px;
  background:rgba(11,74,56,.055);
}
.settings-access-note strong{
  display:block;
  font-family:Georgia,"Times New Roman",serif;
  font-size:13px;
}
.settings-access-note p{
  margin:4px 0 0;
  color:#746e65;
  font-size:8.5px;
  line-height:1.42;
}

.settings-save {
  width: 100%;
  min-height: 52px;
  border: 0;
  border-radius: 18px;
  background: linear-gradient(180deg, #08704d 0%, #07583c 100%);
  color: #fff;
  font-weight: 900;
  letter-spacing: .5px;
  box-shadow: 0 10px 20px rgba(9,97,63,.16);
}

.settings-save:disabled {
  opacity: .62;
}

.settings-save-message {
  min-height: 17px;
  margin: -5px 0 0;
  text-align: center;
  font-size: 10px;
  font-weight: 750;
}

.settings-save-message.success { color: #0b6a49; }
.settings-save-message.error { color: #a43d34; }

.settings-logout {
  width: 100%;
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid rgba(155,62,53,.20);
  border-radius: 18px;
  background: rgba(255,248,240,.42);
  color: #9b3f36;
  font-weight: 850;
}

.settings-logout svg {
  width: 22px;
  height: 22px;
}

@media (max-height: 780px) {
  .settings-inner {
    padding-top: max(14px, env(safe-area-inset-top));
  }
  .settings-header {
    padding-bottom: 9px;
  }
  .settings-back {
    width: 43px;
    height: 43px;
    font-size: 35px;
  }
  .settings-title h1 {
    font-size: 32px;
  }
  .settings-card {
    padding: 14px;
    border-radius: 23px;
  }
}


/* FIVE-TAB NAVIGATION */
.home-footer,
.learn-footer,
.learn-nav,
.recognize-nav,
.statistics-nav,
.library-nav {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.footer-item {
  justify-self: center;
}
@media (max-width: 380px) {
  .home-footer,
  .learn-footer,
  .learn-nav,
  .recognize-nav,
  .statistics-nav,
  .library-nav {
    padding-left: 5px;
    padding-right: 5px;
  }
  .footer-item {
    width: 32px;
    height: 32px;
  }
  .footer-item svg {
    width: 19px;
    height: 19px;
  }
}


/* STATISTICS EXAM HISTORY */
.statistics-exam-open {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(11,74,56,.14);
  border-radius: 11px;
  background: rgba(255,255,255,.34);
  color: var(--green);
  font-size: 8px;
  font-weight: 850;
}
.statistics-exam-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px;
  border-radius: 17px;
  background: rgba(232,218,190,.46);
}
.statistics-exam-main.is-pass { background: rgba(184,211,177,.45); }
.statistics-exam-main.is-fail { background: rgba(222,179,169,.30); }
.statistics-exam-main span,
.statistics-exam-main strong { display: block; }
.statistics-exam-main span { color: #756f66; font-size: 8px; }
.statistics-exam-main strong { margin-top: 2px; font-family: Georgia,serif; font-size: 25px; }
.statistics-exam-main b { font-size: 9px; }
.statistics-exam-main.is-pass b { color: #0b6949; }
.statistics-exam-main.is-fail b { color: #9b3f36; }
.statistics-exam-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 7px;
  margin-top: 8px;
}
.statistics-exam-grid > div {
  min-width: 0;
  padding: 10px 7px;
  border-radius: 14px;
  background: rgba(255,255,255,.30);
  text-align: center;
}
.statistics-exam-grid span,
.statistics-exam-grid strong { display: block; }
.statistics-exam-grid span { color: #776f66; font-size: 7px; }
.statistics-exam-grid strong { margin-top: 4px; font-size: 11px; }


/* CATALOG RELEASE GATE */
.learn-catalog-pending-content {
  display: grid;
  align-content: center;
  gap: 12px;
  padding: 18px 2px 76px;
}
.learn-catalog-pending {
  padding: 20px 18px;
  border: 1px solid rgba(255,255,255,.78);
  border-radius: 27px;
  background: rgba(255,249,241,.56);
  box-shadow: 0 10px 25px rgba(92,63,36,.09), inset 0 1px 0 rgba(255,255,255,.92);
}
.learn-catalog-pending-kicker {
  color: #9a711d;
  font-size: 7.5px;
  font-weight: 900;
  letter-spacing: 1.15px;
}
.learn-catalog-pending h2 {
  margin: 8px 0 7px;
  font-family: Georgia,serif;
  font-size: 26px;
  line-height: 1.06;
}
.learn-catalog-pending > p {
  margin: 0;
  color: #69635b;
  font-size: 11px;
  line-height: 1.45;
}
.learn-catalog-policy {
  margin-top: 14px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(231,216,180,.48);
  font-size: 9px;
  line-height: 1.4;
}
.learn-catalog-policy strong,
.learn-catalog-policy span { display: block; }
.learn-catalog-policy span { margin-top: 3px; color: #666159; }
.learn-recognition-standalone {
  width: 100%;
  min-height: 70px;
  display: grid;
  grid-template-columns: 42px minmax(0,1fr) 20px;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  border: 1px solid rgba(11,74,56,.12);
  border-radius: 21px;
  background: rgba(255,249,241,.50);
  color: var(--green);
  text-align: left;
}
.learn-recognition-standalone > span {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: rgba(11,74,56,.08);
}
.learn-recognition-standalone > span svg { width: 23px; height: 23px; }
.learn-recognition-standalone strong,
.learn-recognition-standalone small { display: block; }
.learn-recognition-standalone strong { font-family: Georgia,serif; font-size: 15px; }
.learn-recognition-standalone small { margin-top: 3px; color: #756f66; font-size: 8px; }
.learn-recognition-standalone > svg { width: 18px; height: 18px; }


/* EXAM HISTORY IN PROGRESS */
.statistics-exam-list{display:grid;gap:7px}
.statistics-exam-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 0;border-top:1px solid rgba(121,86,47,.09)}
.statistics-exam-row:first-child{border-top:0}
.statistics-exam-row strong,.statistics-exam-row small{display:block}
.statistics-exam-row strong{font-size:11px}
.statistics-exam-row small{margin-top:3px;color:#756f66;font-size:8px}
.statistics-exam-row>span{font-family:Georgia,serif;font-size:17px;font-weight:700}
.statistics-exam-row.is-pass>span{color:#0b6949}
.statistics-exam-row.is-fail>span{color:#9b3f36}
.statistics-exam-empty{padding:8px 0;color:#756f66;font-size:9px;line-height:1.4}


/* OFFICIAL CATALOG ATTRIBUTION */
.learn-catalog-source{
  display:block;
  margin:7px 0 8px;
  padding:8px 10px;
  border:1px solid rgba(11,74,56,.10);
  border-radius:13px;
  background:rgba(255,255,255,.26);
  color:var(--green);
  text-decoration:none;
}
.learn-catalog-source>span,
.learn-catalog-source>strong,
.learn-catalog-source>small{display:block}
.learn-catalog-source>span{color:#9a711d;font-size:6px;font-weight:900;letter-spacing:1px}
.learn-catalog-source>strong{margin-top:2px;font-size:8.5px;line-height:1.2}
.learn-catalog-source>small{margin-top:2px;color:#746e65;font-size:6.5px;line-height:1.25}
@media(max-height:780px){
  .learn-catalog-source{margin:5px 0 6px;padding:6px 8px}
  .learn-catalog-source>strong{font-size:7.8px}
  .learn-catalog-source>small{font-size:6px}
}


/* HOME-STATISTICS-02 — larger overview card */
.home-statistics-card{
  min-height:190px;
  padding:20px 19px 18px;
}
.home-statistics-heading h2{
  font-size:31px;
}
.home-statistics-arrow{
  width:43px;
  height:43px;
}
.home-statistics-arrow svg{
  width:22px;
  height:22px;
}
.home-statistics-body{
  grid-template-columns:96px minmax(0,1fr);
  gap:17px;
  margin-top:14px;
}
.home-readiness-ring{
  width:90px;
  height:90px;
}
.home-readiness-ring::before{
  inset:8px;
}
.home-readiness-ring strong{
  font-size:22px;
}
.home-readiness-ring span{
  font-size:8px;
}
.home-statistics-row{
  font-size:11px;
}
.home-statistics-progress{
  height:9px;
  margin-top:9px;
}
.home-statistics-mini{
  gap:18px;
  margin-top:11px;
  font-size:10px;
}
.home-statistics-mini b{
  font-size:14px;
}

@media (max-height:780px){
  .home-statistics-card{
    min-height:180px;
    padding:18px 17px 16px;
  }
  .home-statistics-heading h2{
    font-size:29px;
  }
  .home-statistics-body{
    grid-template-columns:90px minmax(0,1fr);
    gap:15px;
    margin-top:12px;
  }
  .home-readiness-ring{
    width:84px;
    height:84px;
  }
  .home-readiness-ring strong{
    font-size:21px;
  }
  .home-statistics-row{
    font-size:10.5px;
  }
  .home-statistics-progress{
    height:8px;
    margin-top:8px;
  }
  .home-statistics-mini{
    margin-top:10px;
    font-size:9.6px;
  }
  .home-statistics-mini b{
    font-size:13px;
  }
}

@media (max-width:380px){
  .home-statistics-card{
    min-height:176px;
    padding:17px 16px 15px;
  }
  .home-statistics-heading h2{
    font-size:28px;
  }
  .home-statistics-body{
    grid-template-columns:86px minmax(0,1fr);
    gap:14px;
  }
  .home-readiness-ring{
    width:80px;
    height:80px;
  }
}


/* NOTIFICATION CENTER */
.notification-shell{
  width:min(100vw,432px);
  height:100dvh;
  margin:0 auto;
  overflow:hidden;
  color:var(--green);
  background:radial-gradient(circle at 82% 3%,rgba(255,255,255,.24),transparent 25%),linear-gradient(180deg,#f6e5d0 0%,#eed7ba 100%);
}
.notification-inner{
  height:100%;
  min-height:0;
  display:flex;
  flex-direction:column;
  padding:max(18px,env(safe-area-inset-top)) 15px max(14px,env(safe-area-inset-bottom));
}
.notification-header{
  flex:0 0 auto;
  display:grid;
  grid-template-columns:44px minmax(0,1fr) 44px;
  gap:10px;
  align-items:center;
}
.notification-back,
.notification-settings{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.78);
  border-radius:50%;
  background:rgba(255,249,241,.54);
  color:var(--green);
  box-shadow:0 7px 18px rgba(86,60,37,.08),inset 0 1px 0 rgba(255,255,255,.92);
}
.notification-back{font-family:Georgia,serif;font-size:26px;line-height:1;padding-bottom:3px}
.notification-settings svg{width:20px;height:20px}
.notification-header>div{min-width:0}
.notification-header>div>span{display:block;color:#9a711d;font-size:7px;font-weight:900;letter-spacing:1.2px}
.notification-header h1{margin:2px 0 0;font-family:Georgia,serif;font-size:23px;line-height:1.05}
.notification-header p{margin:3px 0 0;color:#746e65;font-size:8px}
.notification-content{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  padding:14px 1px 12px;
  scrollbar-width:none;
}
.notification-content::-webkit-scrollbar{display:none}
.notification-card{
  display:grid;
  grid-template-columns:46px minmax(0,1fr);
  gap:11px;
  padding:13px;
  margin-bottom:9px;
  border:1px solid rgba(255,255,255,.76);
  border-radius:21px;
  background:rgba(255,249,241,.53);
  box-shadow:0 8px 21px rgba(91,62,37,.07),inset 0 1px 0 rgba(255,255,255,.85);
}
.notification-card--high{
  border-color:rgba(185,131,24,.24);
  background:rgba(235,219,180,.60);
}
.notification-icon{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:15px;
  background:rgba(11,74,56,.08);
}
.notification-icon svg{width:23px;height:23px}
.notification-icon--errors,.notification-icon--system{color:#9b3f36;background:rgba(164,61,52,.09)}
.notification-icon--exam{color:#8c6717;background:rgba(185,131,24,.12)}
.notification-copy{min-width:0}
.notification-copy>span{display:block;color:#9a711d;font-size:6.5px;font-weight:900;letter-spacing:1px}
.notification-copy h2{margin:3px 0 0;font-family:Georgia,serif;font-size:16px;line-height:1.13}
.notification-copy p{margin:5px 0 0;color:#6f6960;font-size:9.5px;line-height:1.4}
.notification-copy button{
  min-height:31px;
  margin-top:9px;
  padding:0 11px;
  border:1px solid rgba(11,74,56,.16);
  border-radius:11px;
  background:rgba(255,255,255,.38);
  color:var(--green);
  font-size:8px;
  font-weight:850;
}
.notification-empty{
  min-height:300px;
  display:grid;
  place-items:center;
  align-content:center;
  gap:9px;
  padding:24px;
  border:1px solid rgba(255,255,255,.76);
  border-radius:25px;
  background:rgba(255,249,241,.48);
  text-align:center;
}
.notification-empty>div{
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  border-radius:19px;
  background:rgba(11,74,56,.08);
}
.notification-empty svg{width:28px;height:28px}
.notification-empty h2{margin:4px 0 0;font-family:Georgia,serif;font-size:24px}
.notification-empty p{max-width:270px;margin:0;color:#706a62;font-size:10px;line-height:1.4}
.notification-empty button{
  min-height:42px;
  padding:0 18px;
  border:0;
  border-radius:15px;
  background:linear-gradient(180deg,#08704d 0%,#07583c 100%);
  color:#fff;
  font-size:9px;
  font-weight:900;
}
.notification-nav{
  flex:0 0 auto;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  align-items:center;
  height:54px;
  padding:0 9px;
  border:1px solid rgba(255,255,255,.74);
  border-radius:30px;
  background:rgba(255,246,235,.62);
  box-shadow:0 9px 24px rgba(84,58,34,.13),inset 0 1px 0 rgba(255,255,255,.95);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
@media(max-height:760px){
  .notification-inner{padding-top:max(12px,env(safe-area-inset-top))}
  .notification-content{padding-top:10px}
  .notification-card{padding:10px;border-radius:18px}
  .notification-icon{width:39px;height:39px;border-radius:13px}
  .notification-header h1{font-size:21px}
}


/* Recognition backend states */
.recognize-category-card:disabled,
.recognize-smart-card:disabled,
.recognize-horn-card:disabled,
.recognize-mode:disabled,
.recognize-start:disabled {
  cursor: default;
  opacity: .46;
  filter: saturate(.55);
}
.recognize-category-card.is-pending,
.recognize-smart-card.is-pending,
.recognize-horn-card.is-pending {
  border-style: dashed;
}
.recognize-category-card.is-pending .recognize-category-meta,
.recognize-smart-card.is-pending small,
.recognize-horn-card.is-pending small {
  opacity: .78;
}
.recognize-loading {
  min-height: 58vh;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  color: rgba(27, 43, 31, .72);
}
.recognize-loading > span {
  width: 30px;
  height: 30px;
  border: 3px solid rgba(38, 82, 49, .16);
  border-top-color: rgba(38, 82, 49, .72);
  border-radius: 999px;
  animation: recognize-spin .8s linear infinite;
}
@keyframes recognize-spin {
  to { transform: rotate(360deg); }
}
.recognize-training-image {
  display: block;
  width: 100%;
  height: min(48vh, 520px);
  object-fit: contain;
  border-radius: inherit;
  background: rgba(255,255,255,.66);
}
.recognize-media-card audio {
  width: min(100%, 520px);
  margin-top: 12px;
}


/* Recognition difficulty */
.recognize-difficulty-card {
  margin-bottom: 12px;
  padding: 12px 13px;
  border: 1px solid rgba(255,255,255,.76);
  border-radius: 20px;
  background: rgba(255,248,240,.60);
  box-shadow: 0 7px 18px rgba(92,63,36,.07), inset 0 1px 0 rgba(255,255,255,.9);
}
.recognize-difficulty-card .recognize-option-head {
  margin-bottom: 8px;
}
.recognize-difficulty-card .recognize-option-head > div {
  min-width: 0;
}
.recognize-difficulty-card .recognize-option-head h3 {
  margin-bottom: 3px;
  font-size: 17px;
}
.recognize-difficulty-card .recognize-option-head span {
  display: block;
  font-size: 8px;
  line-height: 1.3;
}
.recognize-difficulty-control {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  padding: 4px;
  border-radius: 15px;
  background: rgba(11,74,56,.055);
}
.recognize-difficulty {
  min-height: 36px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--green);
  font: inherit;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}
.recognize-difficulty.selected {
  background: rgba(255,251,245,.82);
  box-shadow: 0 3px 10px rgba(92,63,36,.09);
}
.recognize-difficulty:disabled {
  cursor: default;
  opacity: .42;
}


/* RECOGNIZE-03 — compact premium layout */
.recognize-inner{
  gap:7px;
  padding-top:max(15px,env(safe-area-inset-top));
}
.recognize-topbar{
  align-items:center !important;
  gap:8px !important;
}
.recognize-heading{
  align-items:center !important;
  gap:8px !important;
}
.recognize-heading-icon{
  width:31px;
  height:31px;
}
.recognize-heading-icon svg{
  width:25px;
  height:25px;
}
.recognize-heading h1{
  max-width:182px !important;
  font-size:24px !important;
  line-height:.95 !important;
  letter-spacing:-.45px !important;
}
.recognize-heading p{
  margin-top:4px;
  font-size:5.1px;
  letter-spacing:.55px;
}
.recognize-actions .home-header-button{
  width:38px;
  height:38px;
}
.recognize-actions .streak-button{
  width:auto;
  min-width:50px;
}
.recognize-content{
  padding-top:4px;
}
.recognize-difficulty-card{
  margin:0 0 11px;
  padding:10px 11px 11px;
  border-radius:18px;
  background:rgba(255,249,242,.48);
  box-shadow:0 6px 15px rgba(92,63,36,.055),inset 0 1px 0 rgba(255,255,255,.86);
}
.recognize-difficulty-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  margin-bottom:7px;
}
.recognize-difficulty-head strong{
  font-family:Georgia,"Times New Roman",serif;
  font-size:15px;
  line-height:1;
  color:var(--green);
}
.recognize-difficulty-head span{
  min-width:0;
  color:#7c746b;
  font-size:7.5px;
  font-weight:650;
  text-align:right;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.recognize-difficulty-control{
  gap:4px;
  padding:3px;
  border-radius:13px;
  background:rgba(11,74,56,.06);
}
.recognize-difficulty{
  min-height:32px;
  border-radius:10px;
  font-size:10px;
  transition:background .16s ease,color .16s ease,box-shadow .16s ease,transform .16s ease;
}
.recognize-difficulty.selected{
  background:linear-gradient(180deg,#147253 0%,#0c5f44 100%);
  color:#fffaf2;
  box-shadow:0 4px 10px rgba(8,76,52,.18),inset 0 1px 0 rgba(255,255,255,.20);
}
.recognize-difficulty:active{
  transform:scale(.985);
}
.recognize-section-title{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:8px;
  margin:0 2px 8px;
}
.recognize-section-title>span{
  order:2;
  color:#a1761b;
  font-size:6.5px;
  font-weight:900;
  letter-spacing:1.05px;
}
.recognize-section-title h2{
  margin:0 !important;
  font-size:20px !important;
  line-height:1.05 !important;
  letter-spacing:-.25px;
}
.recognize-smart-card{
  min-height:76px;
  grid-template-columns:minmax(0,1fr) 52px;
  gap:10px;
  padding:11px 13px;
  border-radius:20px;
}
.recognize-smart-copy{
  gap:1px;
}
.recognize-smart-copy small{
  font-size:6.5px;
  letter-spacing:1.05px;
}
.recognize-smart-copy strong{
  font-size:20px;
}
.recognize-smart-copy span{
  max-width:260px;
  margin-top:3px;
  font-size:8.5px;
  line-height:1.25;
}
.recognize-smart-icon{
  width:48px;
  height:48px;
  border-radius:16px;
}
.recognize-smart-icon svg{
  width:28px;
  height:28px;
}
.recognize-category-grid{
  gap:8px;
  margin-top:8px;
}
.recognize-category-card{
  min-height:84px;
  grid-template-columns:39px minmax(0,1fr);
  column-gap:9px;
  padding:10px 11px;
  border-radius:18px;
  background:rgba(255,249,242,.43);
  box-shadow:0 5px 14px rgba(92,63,36,.06),inset 0 1px 0 rgba(255,255,255,.80);
}
.recognize-category-card.selected{
  background:linear-gradient(135deg,rgba(230,235,205,.72),rgba(241,237,209,.56));
  border-color:rgba(11,74,56,.40);
  box-shadow:0 7px 16px rgba(62,82,55,.08),inset 0 0 0 1px rgba(11,74,56,.08),inset 0 1px 0 rgba(255,255,255,.88);
}
.recognize-category-icon{
  width:38px;
  height:38px;
  border-radius:13px;
  background:rgba(255,250,243,.68);
}
.recognize-category-icon svg{
  width:25px;
  height:25px;
}
.recognize-category-title{
  font-size:13.5px;
  line-height:1.04;
}
.recognize-category-meta{
  margin-top:3px;
  font-size:7.3px;
  letter-spacing:.05px;
}
.recognize-category-card.selected .recognize-category-meta{
  color:#46725e;
  font-weight:800;
}
.recognize-category-card.is-pending{
  border-style:solid;
  opacity:.82;
}
.recognize-smart-card.is-pending{
  border-style:solid;
  opacity:.72;
}
.recognize-horn-card{
  min-height:76px;
  margin-top:8px;
  border-radius:20px;
}
.recognize-options-card{
  margin-top:9px;
  padding:13px 12px 12px;
  border-radius:21px;
}
.recognize-option-head h3{
  font-size:16px;
}
.recognize-option-head span{
  font-size:7.3px;
}
.recognize-mode,
.recognize-length{
  min-height:35px;
  border-radius:12px;
  font-size:10px;
}
.recognize-start{
  min-height:48px;
  margin-top:11px;
  border-radius:16px;
  font-size:18px;
}
.recognize-nav{
  height:52px;
}

@media(max-width:380px){
  .recognize-heading h1{
    max-width:158px !important;
    font-size:22px !important;
  }
  .recognize-difficulty-head span{
    max-width:170px;
  }
  .recognize-section-title h2{
    font-size:18px !important;
  }
  .recognize-category-card{
    min-height:80px;
    padding:9px;
  }
  .recognize-category-title{
    font-size:12.5px;
  }
}


/* Recognition live category covers */
.recognize-category-card.has-cover{
  position:relative;
  overflow:hidden;
  padding:0;
  background-image:var(--recognize-cover);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  border-color:rgba(255,255,255,.84);
  box-shadow:0 7px 18px rgba(92,63,36,.10),inset 0 1px 0 rgba(255,255,255,.88);
}
.recognize-category-card.has-cover > *{
  opacity:0;
  pointer-events:none;
}
.recognize-category-card.has-cover.selected{
  border-color:rgba(11,74,56,.46);
  box-shadow:0 8px 19px rgba(62,82,55,.10),inset 0 0 0 1px rgba(11,74,56,.10),inset 0 1px 0 rgba(255,255,255,.88);
}
.recognize-category-card.has-cover.is-pending{
  opacity:1;
  filter:none;
}


/* RECOGNIZE-04 — approved category artwork */
.recognize-category-card.has-artwork{
  position:relative;
  overflow:hidden;
  padding:0 !important;
  background-image:none !important;
  background-size:200% 600% !important;
  background-position:var(--art-x) var(--art-y) !important;
  background-repeat:no-repeat !important;
  border-style:solid !important;
  border-color:rgba(255,255,255,.86) !important;
  opacity:1 !important;
  filter:none !important;
  box-shadow:0 7px 18px rgba(92,63,36,.10),inset 0 1px 0 rgba(255,255,255,.90) !important;
}
.recognize-category-card.has-artwork > *{
  opacity:0 !important;
  pointer-events:none !important;
}
.recognize-category-card.has-artwork.selected{
  border-color:rgba(11,74,56,.58) !important;
  box-shadow:
    0 8px 20px rgba(62,82,55,.13),
    inset 0 0 0 2px rgba(11,74,56,.17),
    inset 0 1px 0 rgba(255,255,255,.92) !important;
}
.recognize-category-card.has-artwork:active{
  transform:scale(.985);
}

.recognize-horn-card.has-artwork{
  position:relative;
  overflow:hidden;
  min-height:76px;
  padding:0 !important;
  background-image:url('/assets/recognize/jagdhorn-card.webp') !important;
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
  border-style:solid !important;
  border-color:rgba(255,255,255,.86) !important;
  opacity:1 !important;
  filter:none !important;
  box-shadow:0 8px 20px rgba(92,63,36,.10),inset 0 1px 0 rgba(255,255,255,.90) !important;
}
.recognize-horn-card.has-artwork > *{
  opacity:0 !important;
  pointer-events:none !important;
}
.recognize-horn-card.has-artwork.selected{
  border-color:rgba(11,74,56,.58) !important;
  box-shadow:
    0 9px 22px rgba(62,82,55,.13),
    inset 0 0 0 2px rgba(11,74,56,.17),
    inset 0 1px 0 rgba(255,255,255,.92) !important;
}
.recognize-horn-card.has-artwork:disabled{
  opacity:1 !important;
  filter:none !important;
}


/* RECOGNIZE-05 — live photographic category cards */
.recognize-category-card.has-artwork{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:flex !important;
  align-items:center;
  justify-content:flex-start;
  min-height:84px;
  padding:10px 12px !important;
  background:linear-gradient(135deg,rgba(255,250,243,.96),rgba(249,239,223,.82)) !important;
  border:1px solid rgba(255,255,255,.88) !important;
  opacity:1 !important;
  filter:none !important;
}
.recognize-category-card.has-artwork::before{
  content:"";
  position:absolute;
  z-index:-2;
  top:0;
  right:0;
  width:66%;
  height:100%;
  background-image:url('/recognition/category-cards.webp');
  background-repeat:no-repeat;
  background-size:100% 1200%;
  background-position:center var(--art-y);
}
.recognize-category-card.has-artwork::after{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  background:linear-gradient(
    90deg,
    rgba(255,249,241,.99) 0%,
    rgba(255,249,241,.96) 31%,
    rgba(255,249,241,.78) 47%,
    rgba(255,249,241,.30) 67%,
    rgba(255,249,241,.04) 100%
  );
  pointer-events:none;
}
.recognize-category-card.has-artwork > *{
  opacity:1 !important;
  pointer-events:none !important;
  position:relative;
  z-index:1;
}
.recognize-category-card.has-artwork .recognize-category-icon,
.recognize-category-card.has-artwork .recognize-category-meta{
  display:none !important;
}
.recognize-category-card.has-artwork .recognize-category-title{
  max-width:62%;
  color:#0b4a38;
  font-family:Georgia,"Times New Roman",serif;
  font-size:14px;
  font-weight:700;
  line-height:1.05;
  text-align:left;
  text-shadow:0 1px 0 rgba(255,255,255,.46);
}
.recognize-category-card.has-artwork.selected{
  border-color:rgba(11,74,56,.48) !important;
  box-shadow:
    0 8px 20px rgba(62,82,55,.12),
    inset 0 0 0 1px rgba(11,74,56,.12),
    inset 0 1px 0 rgba(255,255,255,.92) !important;
}
.recognize-category-card.has-artwork.selected::after{
  background:linear-gradient(
    90deg,
    rgba(238,241,214,.99) 0%,
    rgba(238,241,214,.95) 31%,
    rgba(238,241,214,.72) 49%,
    rgba(238,241,214,.24) 69%,
    rgba(238,241,214,.02) 100%
  );
}

.recognize-horn-card.has-artwork{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:flex !important;
  align-items:center;
  min-height:82px;
  padding:12px 14px !important;
  background:linear-gradient(135deg,rgba(255,248,238,.96),rgba(247,232,207,.82)) !important;
  border:1px solid rgba(255,255,255,.88) !important;
  opacity:1 !important;
  filter:none !important;
}
.recognize-horn-card.has-artwork::before{
  content:"";
  position:absolute;
  z-index:-2;
  inset:0 0 0 38%;
  background:url('/recognition/jagdhorn-card.webp') center/cover no-repeat;
}
.recognize-horn-card.has-artwork::after{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  background:linear-gradient(
    90deg,
    rgba(255,248,238,.99) 0%,
    rgba(255,248,238,.96) 36%,
    rgba(255,248,238,.74) 52%,
    rgba(255,248,238,.18) 72%,
    rgba(255,248,238,.02) 100%
  );
  pointer-events:none;
}
.recognize-horn-card.has-artwork > *{
  opacity:1 !important;
  pointer-events:none !important;
  position:relative;
  z-index:1;
}
.recognize-horn-card.has-artwork .recognize-horn-copy{
  max-width:58%;
}
.recognize-horn-card.has-artwork .recognize-horn-icon{
  display:none !important;
}
.recognize-horn-card.has-artwork .recognize-horn-copy small{
  color:#a1761b;
}
.recognize-horn-card.has-artwork .recognize-horn-copy strong{
  color:#0b4a38;
}
.recognize-horn-card.has-artwork .recognize-horn-copy span{
  color:#7c746b;
}
.recognize-horn-card.has-artwork:disabled{
  opacity:1 !important;
  filter:none !important;
}

@media(max-width:380px){
  .recognize-category-card.has-artwork{
    min-height:80px;
    padding:9px 10px !important;
  }
  .recognize-category-card.has-artwork .recognize-category-title{
    max-width:64%;
    font-size:12.5px;
  }
  .recognize-horn-card.has-artwork{
    min-height:78px;
    padding:10px 12px !important;
  }
}


/* RECOGNIZE-06 — final static card assets */
.recognize-category-card.has-artwork{
  position:relative !important;
  isolation:isolate !important;
  overflow:hidden !important;
  display:flex !important;
  align-items:flex-end !important;
  justify-content:flex-start !important;
  min-height:84px !important;
  padding:12px !important;
  background:rgba(255,248,238,.46) !important;
  background-image:none !important;
  border:1px solid rgba(255,255,255,.88) !important;
  opacity:1 !important;
  filter:none !important;
}
.recognize-category-card.has-artwork::before{
  content:"" !important;
  position:absolute !important;
  z-index:0 !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  background-image:var(--card-image) !important;
  background-repeat:no-repeat !important;
  background-size:100% 1200% !important;
  background-position:center var(--art-y) !important;
  pointer-events:none !important;
}
.recognize-category-card.has-artwork::after{
  content:"" !important;
  position:absolute !important;
  z-index:1 !important;
  inset:0 !important;
  background:linear-gradient(
    90deg,
    rgba(255,249,241,.94) 0%,
    rgba(255,249,241,.76) 30%,
    rgba(255,249,241,.28) 55%,
    rgba(255,249,241,.02) 78%
  ) !important;
  pointer-events:none !important;
}
.recognize-category-card.has-artwork > *{
  opacity:1 !important;
  position:relative !important;
  z-index:2 !important;
  pointer-events:none !important;
}
.recognize-category-card.has-artwork .recognize-category-icon,
.recognize-category-card.has-artwork .recognize-category-meta{
  display:none !important;
}
.recognize-category-card.has-artwork .recognize-category-title{
  display:block !important;
  max-width:68% !important;
  color:#0b4a38 !important;
  font-family:Georgia,"Times New Roman",serif !important;
  font-size:14px !important;
  font-weight:700 !important;
  line-height:1.03 !important;
  text-align:left !important;
  text-shadow:0 1px 0 rgba(255,255,255,.65) !important;
}
.recognize-category-card.has-artwork.selected{
  border-color:rgba(11,74,56,.55) !important;
  box-shadow:
    0 8px 20px rgba(62,82,55,.13),
    inset 0 0 0 2px rgba(11,74,56,.14),
    inset 0 1px 0 rgba(255,255,255,.92) !important;
}
.recognize-category-card.has-artwork.selected::after{
  background:linear-gradient(
    90deg,
    rgba(238,241,214,.94) 0%,
    rgba(238,241,214,.73) 31%,
    rgba(238,241,214,.24) 57%,
    rgba(238,241,214,.02) 80%
  ) !important;
}
.recognize-category-card.has-artwork.is-pending{
  opacity:1 !important;
  filter:none !important;
}

.recognize-horn-card.has-artwork{
  position:relative !important;
  isolation:isolate !important;
  overflow:hidden !important;
  display:flex !important;
  align-items:center !important;
  min-height:82px !important;
  padding:13px 15px !important;
  background:rgba(255,248,238,.46) !important;
  background-image:none !important;
  border:1px solid rgba(255,255,255,.88) !important;
  opacity:1 !important;
  filter:none !important;
}
.recognize-horn-card.has-artwork::before{
  content:"" !important;
  position:absolute !important;
  z-index:0 !important;
  inset:0 !important;
  background-image:var(--horn-image) !important;
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
  pointer-events:none !important;
}
.recognize-horn-card.has-artwork::after{
  content:"" !important;
  position:absolute !important;
  z-index:1 !important;
  inset:0 !important;
  background:linear-gradient(
    90deg,
    rgba(255,248,238,.97) 0%,
    rgba(255,248,238,.88) 34%,
    rgba(255,248,238,.42) 56%,
    rgba(255,248,238,.03) 80%
  ) !important;
  pointer-events:none !important;
}
.recognize-horn-card.has-artwork > *{
  opacity:1 !important;
  position:relative !important;
  z-index:2 !important;
  pointer-events:none !important;
}
.recognize-horn-card.has-artwork .recognize-horn-copy{
  display:grid !important;
  gap:2px !important;
  max-width:58% !important;
}
.recognize-horn-card.has-artwork .recognize-horn-copy small{
  color:var(--gold) !important;
  font-size:7px !important;
  font-weight:900 !important;
  letter-spacing:1.1px !important;
}
.recognize-horn-card.has-artwork .recognize-horn-copy strong{
  color:var(--green) !important;
  font-family:Georgia,"Times New Roman",serif !important;
  font-size:21px !important;
  line-height:1 !important;
}
.recognize-horn-card.has-artwork .recognize-horn-icon{
  display:none !important;
}
.recognize-horn-card.has-artwork:disabled{
  opacity:1 !important;
  filter:none !important;
}


/* RECOGNIZE-07 — corrected photo cards */
.recognize-category-card.has-artwork{
  position:relative !important;
  isolation:isolate !important;
  overflow:hidden !important;
  display:flex !important;
  align-items:flex-end !important;
  justify-content:flex-start !important;
  min-height:84px !important;
  padding:12px !important;
  background:rgba(255,248,238,.46) !important;
  background-image:none !important;
  border:1px solid rgba(255,255,255,.88) !important;
  opacity:1 !important;
  filter:none !important;
}
.recognize-category-card.has-artwork::before{
  content:"" !important;
  position:absolute !important;
  z-index:0 !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  background-image:none !important;
  background-repeat:no-repeat !important;
  background-size:200% 600% !important;
  background-position:var(--art-x) var(--art-y) !important;
  pointer-events:none !important;
}
.recognize-category-card.has-artwork::after{
  content:"" !important;
  position:absolute !important;
  z-index:1 !important;
  inset:0 !important;
  background:linear-gradient(
    90deg,
    rgba(255,249,241,.96) 0%,
    rgba(255,249,241,.82) 28%,
    rgba(255,249,241,.34) 52%,
    rgba(255,249,241,.03) 78%
  ) !important;
  pointer-events:none !important;
}
.recognize-category-card.has-artwork > *{
  opacity:1 !important;
  position:relative !important;
  z-index:2 !important;
  pointer-events:none !important;
}
.recognize-category-card.has-artwork .recognize-category-icon,
.recognize-category-card.has-artwork .recognize-category-meta{
  display:none !important;
}
.recognize-category-card.has-artwork .recognize-category-title{
  display:block !important;
  max-width:72% !important;
  color:#0b4a38 !important;
  font-family:Georgia,"Times New Roman",serif !important;
  font-size:14px !important;
  font-weight:700 !important;
  line-height:1.03 !important;
  text-align:left !important;
  text-shadow:0 1px 0 rgba(255,255,255,.70) !important;
  overflow-wrap:normal !important;
  hyphens:none !important;
}
.recognize-category-card.has-artwork.selected{
  border-color:rgba(11,74,56,.55) !important;
  box-shadow:
    0 8px 20px rgba(62,82,55,.13),
    inset 0 0 0 2px rgba(11,74,56,.14),
    inset 0 1px 0 rgba(255,255,255,.92) !important;
}
.recognize-category-card.has-artwork.selected::after{
  background:linear-gradient(
    90deg,
    rgba(238,241,214,.96) 0%,
    rgba(238,241,214,.80) 29%,
    rgba(238,241,214,.30) 55%,
    rgba(238,241,214,.03) 80%
  ) !important;
}
.recognize-category-card.has-artwork.is-pending{
  opacity:1 !important;
  filter:none !important;
}

/* Jagdhorn: clean photo zone, no baked-in status text */
.recognize-horn-card.has-artwork{
  position:relative !important;
  isolation:isolate !important;
  overflow:hidden !important;
  display:flex !important;
  align-items:center !important;
  min-height:82px !important;
  padding:13px 15px !important;
  background:linear-gradient(120deg,rgba(255,249,240,.96),rgba(243,229,207,.92)) !important;
  background-image:none !important;
  border:1px solid rgba(255,255,255,.90) !important;
  opacity:1 !important;
  filter:none !important;
}
.recognize-horn-card.has-artwork::before{
  content:"" !important;
  position:absolute !important;
  z-index:0 !important;
  inset:0 0 0 43% !important;
  background-image:var(--horn-image) !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  pointer-events:none !important;
}
.recognize-horn-card.has-artwork::after{
  content:"" !important;
  position:absolute !important;
  z-index:1 !important;
  inset:0 !important;
  background:linear-gradient(
    90deg,
    rgba(255,248,238,.99) 0%,
    rgba(255,248,238,.97) 34%,
    rgba(255,248,238,.78) 46%,
    rgba(255,248,238,.30) 60%,
    rgba(255,248,238,.02) 79%
  ) !important;
  pointer-events:none !important;
}
.recognize-horn-card.has-artwork > *{
  opacity:1 !important;
  position:relative !important;
  z-index:2 !important;
  pointer-events:none !important;
}
.recognize-horn-card.has-artwork .recognize-horn-copy{
  display:grid !important;
  gap:3px !important;
  max-width:48% !important;
}
.recognize-horn-card.has-artwork .recognize-horn-copy small{
  color:var(--gold) !important;
  font-size:7px !important;
  font-weight:900 !important;
  letter-spacing:1.05px !important;
}
.recognize-horn-card.has-artwork .recognize-horn-copy strong{
  color:var(--green) !important;
  font-family:Georgia,"Times New Roman",serif !important;
  font-size:20px !important;
  line-height:.98 !important;
}
.recognize-horn-card.has-artwork .recognize-horn-icon{
  display:none !important;
}
.recognize-horn-card.has-artwork:disabled{
  opacity:1 !important;
  filter:none !important;
}


/* RECOGNIZE-08 — direct artwork layers, Safari-safe */
.recognize-category-card.has-artwork{
  position:relative !important;
  overflow:hidden !important;
  display:flex !important;
  align-items:stretch !important;
  justify-content:stretch !important;
  min-height:84px !important;
  padding:0 !important;
  background:#f7ead9 !important;
  border:1px solid rgba(255,255,255,.90) !important;
  opacity:1 !important;
  filter:none !important;
}
.recognize-category-card.has-artwork::before,
.recognize-category-card.has-artwork::after{
  display:none !important;
  content:none !important;
}
.recognize-category-card.has-artwork .recognize-category-art{
  position:absolute !important;
  inset:0 !important;
  z-index:1 !important;
  display:block !important;
  background-image:none !important;
  background-repeat:no-repeat !important;
  background-size:200% 600% !important;
  background-position:var(--art-x) var(--art-y) !important;
  pointer-events:none !important;
}
.recognize-category-card.has-artwork .recognize-category-title,
.recognize-category-card.has-artwork .recognize-category-icon,
.recognize-category-card.has-artwork .recognize-category-meta{
  display:none !important;
}
.recognize-category-card.has-artwork.selected{
  border-color:rgba(11,74,56,.58) !important;
  box-shadow:
    0 8px 20px rgba(62,82,55,.13),
    inset 0 0 0 2px rgba(11,74,56,.18),
    inset 0 1px 0 rgba(255,255,255,.92) !important;
}
.recognize-category-card.has-artwork.is-pending{
  opacity:1 !important;
  filter:none !important;
}

.recognize-horn-card.has-artwork{
  position:relative !important;
  overflow:hidden !important;
  display:flex !important;
  align-items:center !important;
  min-height:82px !important;
  padding:13px 15px !important;
  background:#f5e7d4 !important;
  border:1px solid rgba(255,255,255,.90) !important;
  opacity:1 !important;
  filter:none !important;
}
.recognize-horn-card.has-artwork::before,
.recognize-horn-card.has-artwork::after{
  display:none !important;
  content:none !important;
}
.recognize-horn-card.has-artwork .recognize-horn-art{
  position:absolute !important;
  z-index:0 !important;
  inset:0 0 0 44% !important;
  display:block !important;
  background-image:var(--horn-image) !important;
  background-size:cover !important;
  background-position:center 54% !important;
  background-repeat:no-repeat !important;
  pointer-events:none !important;
}
.recognize-horn-card.has-artwork .recognize-horn-art::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(245,231,212,.88) 0%,rgba(245,231,212,.28) 28%,rgba(245,231,212,0) 62%);
}
.recognize-horn-card.has-artwork .recognize-horn-copy{
  position:relative !important;
  z-index:2 !important;
  display:grid !important;
  gap:3px !important;
  max-width:47% !important;
}
.recognize-horn-card.has-artwork .recognize-horn-copy small{
  color:var(--gold) !important;
  font-size:7px !important;
  font-weight:900 !important;
  letter-spacing:1.05px !important;
}
.recognize-horn-card.has-artwork .recognize-horn-copy strong{
  color:var(--green) !important;
  font-family:Georgia,"Times New Roman",serif !important;
  font-size:20px !important;
  line-height:.98 !important;
}
.recognize-horn-card.has-artwork .recognize-horn-icon{
  display:none !important;
}
.recognize-horn-card.has-artwork:disabled{
  opacity:1 !important;
  filter:none !important;
}


/* RECOGNIZE-11 — individual card images, no sprite seams */
.recognize-category-card.has-artwork{
  position:relative !important;
  overflow:hidden !important;
  min-height:84px !important;
  padding:0 !important;
  background:#f7ead9 !important;
  border:1px solid rgba(255,255,255,.92) !important;
}
.recognize-category-card.has-artwork::before,
.recognize-category-card.has-artwork::after{
  display:none !important;
  content:none !important;
}
.recognize-category-card.has-artwork .recognize-category-art{
  position:absolute !important;
  inset:0 !important;
  z-index:1 !important;
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  object-fit:cover !important;
  border:0 !important;
  border-radius:inherit !important;
  pointer-events:none !important;
}
.recognize-category-card.has-artwork .recognize-category-title,
.recognize-category-card.has-artwork .recognize-category-icon,
.recognize-category-card.has-artwork .recognize-category-meta{
  display:none !important;
}
.recognize-category-card.has-artwork.selected{
  border-color:rgba(11,74,56,.62) !important;
  box-shadow:
    0 8px 20px rgba(62,82,55,.13),
    inset 0 0 0 2px rgba(11,74,56,.18),
    inset 0 1px 0 rgba(255,255,255,.92) !important;
}
.recognize-category-card.has-artwork.is-pending{
  opacity:1 !important;
  filter:none !important;
}


/* RECOGNIZE-12 — final JagdIQ illustrated individual cards */
.recognize-category-card.has-artwork{
  position:relative !important;
  display:block !important;
  width:100% !important;
  min-height:0 !important;
  height:auto !important;
  aspect-ratio:2.9/1 !important;
  padding:0 !important;
  overflow:hidden !important;
  border-radius:20px !important;
  background:#f4e4cf !important;
  border:1px solid rgba(255,255,255,.94) !important;
  box-shadow:0 7px 18px rgba(92,63,36,.08), inset 0 1px 0 rgba(255,255,255,.9) !important;
}
.recognize-category-card.has-artwork::before,
.recognize-category-card.has-artwork::after{
  content:none !important;
  display:none !important;
}
.recognize-category-card.has-artwork .recognize-category-art{
  position:absolute !important;
  inset:0 !important;
  z-index:1 !important;
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  object-fit:cover !important;
  object-position:center center !important;
  border:0 !important;
  border-radius:inherit !important;
  pointer-events:none !important;
}
.recognize-category-card.has-artwork .recognize-category-title,
.recognize-category-card.has-artwork .recognize-category-icon,
.recognize-category-card.has-artwork .recognize-category-meta{
  display:none !important;
}
.recognize-category-card.has-artwork.selected{
  border-color:#0b4a38 !important;
  box-shadow:0 7px 18px rgba(92,63,36,.09),
    inset 0 0 0 2px rgba(11,74,56,.60),
    inset 0 1px 0 rgba(255,255,255,.92) !important;
}
.recognize-category-card.has-artwork.is-pending{
  opacity:1 !important;
  filter:none !important;
}

.recognize-horn-card.has-artwork{
  position:relative !important;
  display:block !important;
  width:100% !important;
  min-height:0 !important;
  height:auto !important;
  aspect-ratio:5.1/1 !important;
  padding:0 !important;
  overflow:hidden !important;
  border-radius:21px !important;
  background:#f4e4cf !important;
  border:1px solid rgba(255,255,255,.94) !important;
  box-shadow:0 7px 18px rgba(92,63,36,.08), inset 0 1px 0 rgba(255,255,255,.9) !important;
}
.recognize-horn-card.has-artwork::before,
.recognize-horn-card.has-artwork::after{
  content:none !important;
  display:none !important;
}
.recognize-horn-card.has-artwork .recognize-horn-art{
  position:absolute !important;
  inset:0 !important;
  z-index:1 !important;
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  object-fit:cover !important;
  object-position:center center !important;
  border:0 !important;
  border-radius:inherit !important;
  pointer-events:none !important;
}
.recognize-horn-card.has-artwork .recognize-horn-copy{
  display:none !important;
}
.recognize-horn-card.has-artwork.selected{
  border-color:#0b4a38 !important;
  box-shadow:0 7px 18px rgba(92,63,36,.09),
    inset 0 0 0 2px rgba(11,74,56,.60),
    inset 0 1px 0 rgba(255,255,255,.92) !important;
}
.recognize-horn-card.has-artwork:disabled{
  opacity:1 !important;
  filter:none !important;
}


/* RECOGNIZE-SMART-MIX-13 — artwork only */
.recognize-smart-card.has-artwork{
  position:relative !important;
  isolation:isolate !important;
  overflow:hidden !important;
  padding:0 !important;
  display:block !important;
  background:#f7ead9 !important;
  border:1px solid rgba(255,255,255,.94) !important;
}
.recognize-smart-card.has-artwork .recognize-smart-art{
  position:absolute !important;
  inset:0 !important;
  z-index:1 !important;
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  object-fit:cover !important;
  object-position:center center !important;
  border:0 !important;
  border-radius:inherit !important;
  pointer-events:none !important;
}
.recognize-smart-card.has-artwork.selected{
  border-color:rgba(11,74,56,.68) !important;
  box-shadow:
    0 9px 22px rgba(92,63,36,.10),
    inset 0 0 0 2px rgba(11,74,56,.22),
    inset 0 1px 0 rgba(255,255,255,.92) !important;
}
.recognize-smart-card.has-artwork.is-pending,
.recognize-smart-card.has-artwork:disabled{
  opacity:1 !important;
  filter:none !important;
}

/* RECOGNIZE-SMART-MIX-18 — exact approved image, normal card height */
.recognize-smart-card.has-artwork{
  position:relative !important;
  width:100% !important;
  min-height:84px !important;
  height:84px !important;
  aspect-ratio:auto !important;
  padding:0 !important;
  display:block !important;
  overflow:hidden !important;
  border-radius:20px !important;
  background:#f7ead9 !important;
  border:1px solid rgba(255,255,255,.94) !important;
}
.recognize-smart-card.has-artwork .recognize-smart-art{
  position:absolute !important;
  inset:0 !important;
  z-index:1 !important;
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  object-fit:cover !important;
  object-position:center center !important;
  border:0 !important;
  border-radius:inherit !important;
  pointer-events:none !important;
}
.recognize-smart-card.has-artwork.selected{
  border-color:rgba(11,74,56,.68) !important;
  box-shadow:
    0 8px 20px rgba(62,82,55,.13),
    inset 0 0 0 2px rgba(11,74,56,.22),
    inset 0 1px 0 rgba(255,255,255,.92) !important;
}


/* JagdIQ Prüfungsreife 2.0 */
.statistics-readiness-detail-card{display:grid;gap:18px}
.statistics-readiness-components{display:grid;gap:13px}
.statistics-readiness-component{display:grid;gap:7px}
.statistics-readiness-component>div:first-child{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px}
.statistics-readiness-component>div:first-child span{color:var(--text-soft,#6f665d)}
.statistics-readiness-component>div:first-child strong{font-size:13px;color:var(--text,#2e2925)}
.statistics-readiness-component-track{height:7px;border-radius:999px;background:rgba(73,65,57,.09);overflow:hidden}
.statistics-readiness-component-track i{display:block;height:100%;border-radius:inherit;background:currentColor;opacity:.78}
.statistics-risk-panel{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:15px;border-radius:16px;background:rgba(77,104,77,.08)}
.statistics-risk-panel>div{display:grid;gap:3px;min-width:0}
.statistics-risk-panel span{font-size:10px;letter-spacing:.08em;color:var(--text-soft,#6f665d)}
.statistics-risk-panel strong{font-size:15px;color:var(--text,#2e2925)}
.statistics-risk-panel small{font-size:12px;color:var(--text-soft,#6f665d)}
.statistics-risk-panel button{border:0;border-radius:999px;padding:10px 13px;font:inherit;font-size:12px;font-weight:700;background:var(--text,#2e2925);color:#fff;white-space:nowrap}
@media(max-width:520px){.statistics-risk-panel{align-items:flex-start;flex-direction:column}.statistics-risk-panel button{width:100%}}


/* JagdIQ Tagesplan auf Home */
.home-daily-plan{
  display:grid;
  gap:12px;
  margin:5px 0 4px;
  padding:16px;
  border:1px solid rgba(255,255,255,.80);
  border-radius:28px;
  background:rgba(255,249,241,.58);
  box-shadow:0 10px 25px rgba(92,63,36,.09),inset 0 1px 0 rgba(255,255,255,.93);
  color:var(--green);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.home-daily-plan-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}
.home-daily-plan-head>div:first-child{display:grid;gap:2px;min-width:0}
.home-daily-kicker{
  color:var(--gold);
  font-size:7.5px;
  font-weight:900;
  letter-spacing:1.15px;
}
.home-daily-plan-head h2{
  margin:1px 0 0;
  font-family:Georgia,"Times New Roman",serif;
  font-size:25px;
  line-height:1;
}
.home-daily-plan-head p{
  margin:4px 0 0;
  color:#726b61;
  font-size:9px;
}
.home-daily-readiness{
  display:grid;
  justify-items:end;
  gap:2px;
  flex:0 0 auto;
}
.home-daily-readiness strong{
  font-family:Georgia,"Times New Roman",serif;
  font-size:23px;
  line-height:1;
}
.home-daily-readiness span{color:#726b61;font-size:7.5px}
.home-daily-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:7px;
}
.home-daily-grid>div{
  min-width:0;
  display:grid;
  gap:2px;
  padding:9px 8px;
  border-radius:14px;
  background:rgba(11,74,56,.055);
}
.home-daily-grid strong{
  font-family:Georgia,"Times New Roman",serif;
  font-size:17px;
  line-height:1;
}
.home-daily-grid span{
  overflow:hidden;
  color:#726b61;
  font-size:7.5px;
  line-height:1.15;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.home-daily-focus{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  padding:10px 10px 10px 12px;
  border-radius:16px;
  background:rgba(189,137,30,.07);
}
.home-daily-focus>div{display:grid;gap:2px;min-width:0}
.home-daily-focus>div>span{
  color:#9a711d;
  font-size:6.8px;
  font-weight:900;
  letter-spacing:.9px;
}
.home-daily-focus strong{
  overflow:hidden;
  font-size:11px;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.home-daily-focus small{
  overflow:hidden;
  color:#726b61;
  font-size:8px;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.home-daily-focus button{
  min-width:91px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  border:0;
  border-radius:14px;
  background:linear-gradient(180deg,#08704d 0%,#07583c 100%);
  color:#fff;
  font:inherit;
  font-size:9px;
  font-weight:900;
  box-shadow:0 7px 15px rgba(9,97,63,.14);
}
.home-daily-focus button svg{width:16px;height:16px}
@media(max-width:380px){
  .home-daily-plan{padding:14px}
  .home-daily-grid{gap:6px}
  .home-daily-focus button{min-width:82px}
}

/* Recognition Pro: Antwortmodus & Freitext */
.recognize-answer-style-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.recognize-answer-style{display:grid;place-items:center;gap:2px;min-height:44px;padding:9px;border:1px solid rgba(70,62,54,.12);border-radius:12px;background:rgba(255,255,255,.7);font:inherit;font-size:12px;font-weight:700;color:var(--text,#2d2824)}
.recognize-answer-style small{font-size:8px;font-weight:600;opacity:.6}
.recognize-answer-style.selected{border-color:currentColor;background:rgba(75,96,72,.1)}
.recognize-answer-style:disabled{opacity:.4}
.recognize-free-text-form{display:grid;gap:9px;margin-top:8px}
.recognize-free-text-form label{font-size:11px;font-weight:800;letter-spacing:.06em;color:var(--text-soft,#74695f)}
.recognize-free-text-form input{width:100%;box-sizing:border-box;border:1px solid rgba(70,62,54,.16);border-radius:14px;padding:14px 15px;background:rgba(255,255,255,.88);font:inherit;font-size:16px;color:var(--text,#2d2824);outline:none}
.recognize-free-text-form input:focus{border-color:currentColor;box-shadow:0 0 0 3px rgba(75,96,72,.08)}
.recognize-free-text-form button{border:0;border-radius:14px;padding:13px 15px;background:var(--text,#2d2824);color:#fff;font:inherit;font-weight:800}
@media(max-width:520px){.recognize-answer-style-grid{grid-template-columns:1fr 1fr}.recognize-answer-style:last-child{grid-column:1/-1}}


/* Recognition Pro Fortschritt */
.recognize-progress-card{display:grid;gap:10px;padding:15px 16px;border-radius:17px;background:rgba(255,255,255,.76);border:1px solid rgba(70,62,54,.09)}
.recognize-progress-card>div:first-child{display:flex;align-items:center;justify-content:space-between;gap:12px}
.recognize-progress-card>div:first-child span{font-size:10px;letter-spacing:.1em;font-weight:800;color:var(--text-soft,#74695f)}
.recognize-progress-card>div:first-child strong{font-size:20px;color:var(--text,#2d2824)}
.recognize-progress-track,.recognize-card-progress{display:block;height:6px;border-radius:999px;background:rgba(71,91,68,.1);overflow:hidden}
.recognize-progress-track i,.recognize-card-progress i{display:block;height:100%;border-radius:inherit;background:currentColor;opacity:.78}
.recognize-progress-meta{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:10px;color:var(--text-soft,#74695f)}
.recognize-card-progress{position:absolute;left:12px;right:12px;bottom:8px;height:4px}
.recognize-category-card{position:relative}


/* JagdIQ KI-Jagdlehrer */
.qs-ai-coach{display:grid;gap:12px;margin-top:14px;padding:15px;border:1px solid rgba(66,79,60,.12);border-radius:18px;background:linear-gradient(145deg,rgba(255,255,255,.92),rgba(241,239,230,.88))}
.qs-ai-coach-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.qs-ai-coach-head>div{display:grid;gap:2px}
.qs-ai-coach-head small{font-size:9px;letter-spacing:.12em;font-weight:800;color:var(--text-soft,#74695f)}
.qs-ai-coach-head strong{font-size:15px;color:var(--text,#2d2824)}
.qs-ai-coach-head>span{display:grid;place-items:center;min-width:32px;height:26px;padding:0 8px;border-radius:999px;background:rgba(72,95,68,.1);font-size:10px;font-weight:900;letter-spacing:.06em}
.qs-ai-actions{display:flex;flex-wrap:wrap;gap:7px}
.qs-ai-actions button{border:1px solid rgba(70,62,54,.12);border-radius:999px;padding:9px 11px;background:rgba(255,255,255,.78);font:inherit;font-size:11px;font-weight:750;color:var(--text,#2d2824)}
.qs-ai-actions button:disabled{opacity:.5}
.qs-ai-actions button.is-loading{background:rgba(72,95,68,.1)}
.qs-ai-answer{padding:12px 13px;border-radius:13px;background:rgba(72,95,68,.075);font-size:13px;line-height:1.48;color:var(--text,#2d2824)}
.qs-ai-answer p{margin:0;white-space:pre-wrap}
.qs-ai-answer.is-loading{display:flex;align-items:center;gap:9px;color:var(--text-soft,#74695f)}
.qs-ai-answer.is-loading>span{width:15px;height:15px;border-radius:50%;border:2px solid rgba(70,62,54,.18);border-top-color:currentColor;animation:qs-ai-spin .75s linear infinite}
.qs-ai-answer.is-error{background:rgba(139,80,65,.07)}
@keyframes qs-ai-spin{to{transform:rotate(360deg)}}


/* Phase 6 · Recognition ↔ Bibliothek */
.recognize-library-links{
  display:grid;
  gap:9px;
  margin-top:10px;
  padding:12px;
  border:1px solid rgba(255,255,255,.76);
  border-radius:16px;
  background:rgba(255,249,241,.58);
}
.recognize-library-links[hidden]{display:none}
.recognize-library-links-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.recognize-library-links-head>div{display:grid;gap:2px;min-width:0}
.recognize-library-links-head small{
  color:#9a711d;
  font-size:7px;
  font-weight:900;
  letter-spacing:.9px;
}
.recognize-library-links-head strong{
  font-family:Georgia,"Times New Roman",serif;
  font-size:14px;
}
.recognize-library-links-head>span{
  padding:5px 7px;
  border-radius:999px;
  background:rgba(11,74,56,.07);
  font-size:7px;
  font-weight:900;
}
.recognize-library-link-list{display:grid;gap:6px}
.recognize-library-link-list button{
  width:100%;
  display:grid;
  grid-template-columns:minmax(0,1fr) 18px;
  align-items:center;
  gap:7px;
  padding:8px 9px;
  border:1px solid rgba(11,74,56,.08);
  border-radius:13px;
  background:rgba(255,255,255,.44);
  color:inherit;
  text-align:left;
}
.recognize-library-link-list button>span{display:grid;gap:2px;min-width:0}
.recognize-library-link-list strong{
  overflow:hidden;
  font-size:9px;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.recognize-library-link-list small{
  display:-webkit-box;
  overflow:hidden;
  color:#746e65;
  font-size:7.5px;
  line-height:1.3;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}
.recognize-library-link-list i{
  font-family:Georgia,"Times New Roman",serif;
  font-size:20px;
  font-style:normal;
}


/* Phase 7 · Bibliotheksmedien */
.library-approved-media{
  display:grid;
  gap:10px;
  padding:14px;
  border:1px solid rgba(255,255,255,.78);
  border-radius:20px;
  background:rgba(255,249,241,.56);
  box-shadow:0 8px 20px rgba(72,52,33,.05);
}
.library-approved-media-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
}
.library-approved-media-head span{
  color:#9a711d;
  font-size:7px;
  font-weight:900;
  letter-spacing:1px;
}
.library-approved-media-head strong{
  font-family:Georgia,"Times New Roman",serif;
  font-size:14px;
}
.library-approved-media-list{display:grid;gap:9px}
.library-approved-media-item{
  margin:0;
  overflow:hidden;
  border:1px solid rgba(11,74,56,.08);
  border-radius:15px;
  background:rgba(255,255,255,.5);
}
.library-approved-media-item--image img{
  width:100%;
  max-height:260px;
  display:block;
  object-fit:cover;
}
.library-approved-media-item--image figcaption{
  padding:8px 10px;
  color:#746e65;
  font-size:8px;
  line-height:1.3;
}
.library-approved-media-item--audio{
  display:grid;
  gap:8px;
  padding:10px;
}
.library-approved-media-item--audio>div{display:grid;gap:2px}
.library-approved-media-item--audio small{
  color:#9a711d;
  font-size:7px;
  font-weight:900;
  letter-spacing:.8px;
}
.library-approved-media-item--audio strong{font-size:10px}
.library-approved-media-item--audio audio{width:100%;height:36px}


/* HOME current feature hub */
.home-feature-hub{
  display:grid;
  gap:11px;
  margin:5px 0 7px;
  padding:15px;
  border:1px solid rgba(255,255,255,.80);
  border-radius:28px;
  background:rgba(255,249,241,.58);
  box-shadow:0 10px 25px rgba(92,63,36,.09),inset 0 1px 0 rgba(255,255,255,.93);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.home-feature-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:12px;
}
.home-feature-head>div{display:grid;gap:2px}
.home-feature-kicker{
  color:var(--gold);
  font-size:7.5px;
  font-weight:900;
  letter-spacing:1.15px;
}
.home-feature-head h2{
  margin:0;
  font-family:Georgia,"Times New Roman",serif;
  font-size:24px;
  line-height:1;
  color:var(--green);
}
.home-feature-head small{
  max-width:116px;
  color:#776f65;
  font-size:7.5px;
  line-height:1.3;
  text-align:right;
}
.home-feature-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
.home-feature-card{
  min-width:0;
  min-height:92px;
  display:grid;
  grid-template-columns:34px minmax(0,1fr) 14px;
  align-items:center;
  gap:8px;
  padding:11px 9px 11px 10px;
  border:1px solid rgba(11,74,56,.07);
  border-radius:18px;
  background:rgba(255,252,247,.58);
  color:var(--green);
  text-align:left;
  font:inherit;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.72);
}
.home-feature-card--smart{
  grid-column:1/-1;
  min-height:88px;
  background:
    radial-gradient(circle at 90% 10%,rgba(189,137,30,.13),transparent 32%),
    linear-gradient(135deg,rgba(204,222,191,.58),rgba(255,249,241,.67));
  border-color:rgba(11,106,73,.12);
}
.home-feature-icon{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:rgba(11,74,56,.07);
  color:#0a6749;
}
.home-feature-card--smart .home-feature-icon{background:rgba(11,106,73,.11)}
.home-feature-icon svg{width:19px;height:19px}
.home-feature-copy{
  min-width:0;
  display:grid;
  gap:2px;
}
.home-feature-copy b{
  color:var(--gold);
  font-size:6.7px;
  font-weight:950;
  letter-spacing:.9px;
}
.home-feature-copy strong{
  overflow:hidden;
  font-family:Georgia,"Times New Roman",serif;
  font-size:12px;
  line-height:1.1;
  text-overflow:ellipsis;
}
.home-feature-card--smart .home-feature-copy strong{font-size:16px}
.home-feature-copy small{
  overflow:hidden;
  color:#746d63;
  font-size:7.2px;
  line-height:1.25;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}
.home-feature-chevron{display:grid;place-items:center;color:var(--gold)}
.home-feature-chevron svg{width:14px;height:14px}
.home-feature-card:active{transform:translateY(1px)}
@media(max-width:360px){
  .home-feature-hub{padding:13px}
  .home-feature-grid{gap:6px}
  .home-feature-card{grid-template-columns:30px minmax(0,1fr) 12px;padding:9px 7px;min-height:86px}
  .home-feature-icon{width:30px;height:30px}
  .home-feature-copy strong{font-size:11px}
}


/* STATISTICS-02 — compact progress overview */
.statistics-topbar--progress .statistics-title span{
  font-size:30px;
  letter-spacing:-.7px;
}
.statistics-topbar--progress .statistics-title small{
  color:#756e64;
  font-size:9.5px;
  font-weight:600;
  letter-spacing:0;
  text-transform:none;
}

.statistics-tabs{
  position:sticky;
  top:0;
  z-index:6;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:4px;
  margin:2px 0 10px;
  padding:4px;
  border:1px solid rgba(255,255,255,.84);
  border-radius:18px;
  background:rgba(255,249,241,.74);
  box-shadow:0 7px 18px rgba(92,63,36,.08), inset 0 1px 0 rgba(255,255,255,.94);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.statistics-tabs button{
  min-height:38px;
  padding:8px 7px;
  border:0;
  border-radius:14px;
  background:transparent;
  color:#5f5b54;
  font-size:11px;
  font-weight:700;
}
.statistics-tabs button.active{
  background:linear-gradient(135deg,#0b6849,#07533d);
  color:#fff;
  box-shadow:0 5px 12px rgba(11,104,73,.18);
}

.statistics-tab-panel{display:none}
.statistics-tab-panel.active{display:block}

.statistics-overview-card{
  position:relative;
  min-height:188px;
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(118px,.9fr);
  align-items:center;
  gap:14px;
  padding:17px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.84);
  border-radius:27px;
  background:
    radial-gradient(circle at 4% 100%,rgba(95,121,72,.10),transparent 32%),
    rgba(255,249,241,.68);
  box-shadow:0 10px 24px rgba(92,63,36,.09), inset 0 1px 0 rgba(255,255,255,.94);
}
.statistics-overview-card::after{
  content:"";
  position:absolute;
  left:-24px;
  bottom:-42px;
  width:150px;
  height:105px;
  opacity:.14;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 24% 72%,#0b6849 0 3%,transparent 4%),
    radial-gradient(ellipse at 38% 54%,#8b6b31 0 2.5%,transparent 3.5%),
    radial-gradient(ellipse at 50% 72%,#0b6849 0 2.5%,transparent 3.5%);
  transform:rotate(-7deg);
}
.statistics-overview-ring{
  position:relative;
  width:142px;
  height:142px;
  display:grid;
  place-items:center;
  justify-self:center;
  border-radius:50%;
  background:conic-gradient(#0d7453 var(--progress),rgba(11,74,56,.10) 0deg);
}
.statistics-overview-ring::before{
  content:"";
  position:absolute;
  inset:15px;
  border-radius:50%;
  background:#f7ead9;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.88);
}
.statistics-overview-ring>div{
  position:relative;
  z-index:1;
  display:grid;
  place-items:center;
  text-align:center;
}
.statistics-overview-ring strong{
  color:var(--green);
  font-family:Georgia,"Times New Roman",serif;
  font-size:34px;
  line-height:1;
}
.statistics-overview-ring span{
  margin-top:5px;
  color:#716a61;
  font-size:9px;
  font-weight:650;
}

.statistics-overview-legend{
  display:grid;
  align-self:stretch;
  align-content:center;
}
.statistics-overview-legend>div{
  display:grid;
  grid-template-columns:18px minmax(0,1fr);
  align-items:center;
  gap:9px;
  min-height:46px;
  padding:6px 0;
}
.statistics-overview-legend>div+div{
  border-top:1px solid rgba(122,91,57,.08);
}
.statistics-overview-legend i{
  width:12px;
  height:12px;
  border-radius:50%;
  box-shadow:0 1px 3px rgba(0,0,0,.08);
}
.statistics-overview-legend i.is-green{background:#15945e}
.statistics-overview-legend i.is-red{background:#c4413c}
.statistics-overview-legend i.is-gray{background:#9ea09b}
.statistics-overview-legend p{margin:0}
.statistics-overview-legend strong{
  display:block;
  color:var(--green);
  font-family:Georgia,"Times New Roman",serif;
  font-size:20px;
  line-height:1;
}
.statistics-overview-legend span{
  display:block;
  margin-top:4px;
  color:#777067;
  font-size:9px;
}

.statistics-quick-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin-top:9px;
}
.statistics-quick-grid article{
  min-width:0;
  min-height:92px;
  display:grid;
  grid-template-columns:32px minmax(0,1fr);
  grid-template-rows:auto auto;
  align-content:center;
  align-items:center;
  gap:5px 6px;
  padding:11px 9px;
  border:1px solid rgba(255,255,255,.84);
  border-radius:20px;
  background:rgba(255,249,241,.62);
  box-shadow:0 7px 18px rgba(92,63,36,.07), inset 0 1px 0 rgba(255,255,255,.92);
}
.statistics-quick-icon{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  grid-row:1;
  border-radius:50%;
  background:rgba(93,139,92,.12);
  color:var(--green);
  font-size:18px;
  font-weight:800;
}
.statistics-quick-grid strong{
  grid-column:2;
  color:var(--green);
  font-family:Georgia,"Times New Roman",serif;
  font-size:21px;
  line-height:1;
}
.statistics-quick-grid small{
  grid-column:1/-1;
  overflow:hidden;
  color:#6f685f;
  font-size:8px;
  font-weight:700;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.statistics-activity-card{
  margin-top:10px;
  padding:17px 16px 15px;
  border:1px solid rgba(255,255,255,.84);
  border-radius:25px;
  background:rgba(255,249,241,.62);
  box-shadow:0 9px 22px rgba(92,63,36,.08), inset 0 1px 0 rgba(255,255,255,.92);
}
.statistics-section-title h2{
  margin:0;
  color:var(--green);
  font-family:Georgia,"Times New Roman",serif;
  font-size:25px;
  line-height:1;
}
.statistics-section-title p{
  margin:6px 0 0;
  color:#766f65;
  font-size:10px;
}
.statistics-activity-card--timeline .statistics-section-title .statistics-kicker{margin-bottom:4px}
.statistics-activity-grid{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  align-items:end;
  gap:6px;
  height:124px;
  margin-top:15px;
}
.statistics-activity-day{
  min-width:0;
  height:100%;
  display:grid;
  grid-template-rows:minmax(0,1fr) 13px 14px;
  align-items:end;
  justify-items:center;
  gap:3px;
}
.statistics-activity-bar{
  width:18px;
  height:78px;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  border-radius:10px;
  background:rgba(133,117,93,.10);
}
.statistics-activity-bar i{
  width:100%;
  min-height:8px;
  display:block;
  border-radius:10px;
  background:linear-gradient(180deg,#6b9a74,#0b6849);
}
.statistics-activity-day strong{
  color:#81786d;
  font-size:7px;
  line-height:1;
}
.statistics-activity-day span{
  color:#6f685f;
  font-size:8.5px;
}

.statistics-bottom-metrics{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
  margin-top:9px;
}
.statistics-bottom-metrics article{
  min-height:70px;
  display:grid;
  grid-template-columns:42px minmax(0,1fr);
  align-items:center;
  gap:9px;
  padding:11px 12px;
  border:1px solid rgba(255,255,255,.84);
  border-radius:21px;
  background:rgba(255,249,241,.62);
  box-shadow:0 7px 18px rgba(92,63,36,.07), inset 0 1px 0 rgba(255,255,255,.92);
}
.statistics-bottom-icon{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:rgba(93,139,92,.12);
  color:var(--green);
  font-size:24px;
  font-weight:800;
}
.statistics-bottom-icon svg{width:22px;height:22px}
.statistics-bottom-metrics strong{
  display:block;
  color:var(--green);
  font-family:Georgia,"Times New Roman",serif;
  font-size:21px;
  line-height:1.05;
}
.statistics-bottom-metrics small{
  display:block;
  margin-top:5px;
  color:#746d63;
  font-size:9px;
}

.statistics-tab-intro{margin-top:0}

@media(max-width:380px){
  .statistics-topbar--progress .statistics-title span{font-size:27px}
  .statistics-tabs button{font-size:10px}
  .statistics-overview-card{
    grid-template-columns:minmax(0,1fr) 105px;
    gap:8px;
    padding:14px;
  }
  .statistics-overview-ring{width:124px;height:124px}
  .statistics-overview-ring strong{font-size:30px}
  .statistics-overview-legend strong{font-size:18px}
  .statistics-quick-grid article{padding:10px 7px}
  .statistics-quick-grid strong{font-size:18px}
  .statistics-quick-grid small{font-size:7.2px}
  .statistics-activity-grid{gap:4px}
  .statistics-activity-bar{width:15px}
}


/* STATISTICS-03 — readiness ring matched to approved reference */
.statistics-overview-card::after{
  display:none!important;
}
.statistics-overview-ring-wrap{
  position:relative;
  width:170px;
  min-height:168px;
  display:grid;
  place-items:start center;
  justify-self:center;
  padding-bottom:30px;
}
.statistics-overview-ring{
  position:relative;
  z-index:2;
  width:146px;
  height:146px;
  display:grid;
  place-items:center;
  justify-self:center;
  border-radius:50%;
  background:
    conic-gradient(
      from -90deg,
      #0f7253 0deg,
      #1b8363 var(--progress),
      #d7d6cd var(--progress),
      #d7d6cd 360deg
    );
  box-shadow:
    0 4px 12px rgba(31,63,49,.05),
    inset 0 1px 0 rgba(255,255,255,.36);
}
.statistics-overview-ring::before{
  content:"";
  position:absolute;
  inset:17px;
  border-radius:50%;
  background:
    radial-gradient(circle at 46% 28%,rgba(255,255,255,.35),transparent 42%),
    #f7ecdd;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.42);
}
.statistics-overview-ring>div{
  position:relative;
  z-index:3;
  display:grid;
  place-items:center;
  text-align:center;
}
.statistics-overview-ring strong{
  color:#0b4a38;
  font-family:Georgia,"Times New Roman",serif;
  font-size:36px;
  font-weight:700;
  line-height:.95;
  letter-spacing:-.7px;
}
.statistics-overview-ring span{
  margin-top:6px;
  color:#716b63;
  font-size:10px;
  font-weight:650;
}
.statistics-overview-botanical{
  position:absolute;
  z-index:4;
  left:50%;
  bottom:-1px;
  width:154px;
  height:auto;
  transform:translateX(-50%);
  overflow:visible;
  filter:drop-shadow(0 2px 2px rgba(86,63,38,.04));
  pointer-events:none;
}
@media(max-width:380px){
  .statistics-overview-ring-wrap{
    width:148px;
    min-height:154px;
    padding-bottom:28px;
  }
  .statistics-overview-ring{
    width:132px;
    height:132px;
  }
  .statistics-overview-ring::before{inset:16px}
  .statistics-overview-ring strong{font-size:32px}
  .statistics-overview-botanical{width:138px}
}


/* STATISTICS-04 — match approved progress reference */
.statistics-tabs{
  min-height:52px;
  padding:4px;
  margin-bottom:10px;
  border-radius:22px;
  background:rgba(255,250,244,.76);
}
.statistics-tabs button{
  min-height:44px;
  border-radius:18px;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:11.5px;
  font-weight:700;
}
.statistics-tabs button.active{
  background:linear-gradient(135deg,#0a654a,#074b39);
  box-shadow:0 7px 15px rgba(7,75,57,.18);
}

.statistics-overview-card{
  min-height:244px;
  grid-template-columns:minmax(0,1.12fr) minmax(112px,.88fr);
  align-items:center;
  gap:4px;
  padding:14px 14px 12px 10px;
  border:1px solid rgba(111,84,54,.05);
  border-radius:25px;
  background:rgba(255,250,244,.70);
  box-shadow:0 8px 20px rgba(92,63,36,.055), inset 0 1px 0 rgba(255,255,255,.74);
}
.statistics-overview-ring-wrap{
  position:relative;
  width:188px;
  min-height:208px;
  display:block;
  justify-self:start;
  align-self:center;
  padding:0;
}
.statistics-overview-ring{
  position:absolute;
  z-index:2;
  top:2px;
  left:27px;
  width:160px;
  height:160px;
  background:
    conic-gradient(
      from -30deg,
      #0b6249 0deg,
      #176f55 var(--progress),
      #d8d8cf var(--progress),
      #d8d8cf 360deg
    );
  box-shadow:none;
}
.statistics-overview-ring::before{
  inset:17px;
  background:#f8eee2;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.56);
}
.statistics-overview-ring strong{
  font-size:38px;
  letter-spacing:-1px;
}
.statistics-overview-ring span{
  margin-top:6px;
  font-size:10.5px;
  font-weight:650;
}
.statistics-overview-botanical{
  position:absolute;
  z-index:4;
  left:-10px;
  bottom:-1px;
  width:238px;
  max-width:none;
  height:auto;
  transform:none;
  filter:none;
  pointer-events:none;
}
.statistics-overview-legend{
  min-width:0;
  align-self:center;
  padding-left:14px;
  border-left:1px solid rgba(112,89,62,.07);
}
.statistics-overview-legend>div{
  grid-template-columns:19px minmax(0,1fr);
  gap:10px;
  min-height:56px;
  padding:8px 0;
}
.statistics-overview-legend i{
  width:13px;
  height:13px;
}
.statistics-overview-legend strong{
  font-size:21px;
}
.statistics-overview-legend span{
  margin-top:5px;
  font-size:9.5px;
}

.statistics-quick-grid{
  gap:9px;
  margin-top:9px;
}
.statistics-quick-grid article{
  min-height:94px;
  grid-template-columns:38px minmax(0,1fr);
  gap:6px 7px;
  padding:12px 10px 11px;
  border:1px solid rgba(111,84,54,.045);
  border-radius:19px;
  background:rgba(255,250,244,.68);
  box-shadow:0 7px 17px rgba(92,63,36,.045), inset 0 1px 0 rgba(255,255,255,.72);
}
.statistics-quick-icon{
  width:36px;
  height:36px;
  font-size:21px;
  background:rgba(101,133,91,.11);
}
.statistics-quick-grid strong{
  font-size:21px;
}
.statistics-quick-grid small{
  margin-top:2px;
  color:#4f4b46;
  font-size:9.6px;
  font-weight:650;
  white-space:normal;
  line-height:1.1;
}
.statistics-activity-card{
  margin-top:10px;
  padding-top:18px;
}
.statistics-section-title h2{
  font-size:26px;
}
.statistics-section-title p{
  margin-top:6px;
  font-size:10.5px;
}

@media(max-width:380px){
  .statistics-overview-card{
    min-height:226px;
    grid-template-columns:minmax(0,1.08fr) minmax(104px,.92fr);
    padding-left:8px;
  }
  .statistics-overview-ring-wrap{
    width:166px;
    min-height:194px;
  }
  .statistics-overview-ring{
    left:22px;
    width:144px;
    height:144px;
  }
  .statistics-overview-ring::before{inset:16px}
  .statistics-overview-ring strong{font-size:34px}
  .statistics-overview-botanical{
    left:-8px;
    width:210px;
  }
  .statistics-overview-legend{
    padding-left:10px;
  }
  .statistics-overview-legend>div{
    min-height:52px;
    gap:8px;
  }
  .statistics-overview-legend strong{font-size:19px}
  .statistics-quick-grid article{
    min-height:88px;
    padding:10px 8px;
  }
  .statistics-quick-icon{
    width:32px;
    height:32px;
    font-size:18px;
  }
  .statistics-quick-grid strong{font-size:19px}
  .statistics-quick-grid small{font-size:8.8px}
}


/* STATISTICS-05 — final reference proportions */
.statistics-overview-card{
  min-height:258px;
  grid-template-columns:minmax(0,1.18fr) minmax(118px,.82fr);
  gap:2px;
  padding:16px 14px 14px 8px;
}
.statistics-overview-ring-wrap{
  width:210px;
  min-height:226px;
}
.statistics-overview-ring{
  top:0;
  left:28px;
  width:174px;
  height:174px;
}
.statistics-overview-ring::before{
  inset:18px;
}
.statistics-overview-ring strong{
  font-size:41px;
}
.statistics-overview-ring span{
  font-size:11px;
}
.statistics-overview-botanical{
  left:-18px;
  bottom:-4px;
  width:282px;
}
.statistics-overview-legend{
  padding-left:16px;
}
.statistics-overview-legend>div{
  min-height:61px;
  padding:9px 0;
}
.statistics-overview-legend strong{
  font-size:22px;
}
.statistics-overview-legend span{
  font-size:10px;
}
@media(max-width:380px){
  .statistics-overview-card{
    min-height:238px;
    grid-template-columns:minmax(0,1.14fr) minmax(102px,.86fr);
    padding-left:6px;
  }
  .statistics-overview-ring-wrap{
    width:178px;
    min-height:206px;
  }
  .statistics-overview-ring{
    left:21px;
    width:154px;
    height:154px;
  }
  .statistics-overview-ring::before{inset:17px}
  .statistics-overview-ring strong{font-size:36px}
  .statistics-overview-botanical{
    left:-14px;
    width:238px;
  }
  .statistics-overview-legend{
    padding-left:10px;
  }
}

/* Recognition card labels: visible above photographic artwork */
.recognize-category-card.has-artwork .recognize-category-title{
  display:block !important;position:absolute !important;z-index:5 !important;
  left:12px !important;right:10px !important;bottom:9px !important;
  width:auto !important;max-width:calc(100% - 22px) !important;
  color:#fff !important;font:700 14px/1.15 Georgia,serif !important;
  text-align:left !important;text-shadow:0 1px 4px rgba(0,0,0,.85),0 2px 9px rgba(0,0,0,.65) !important;
  pointer-events:none !important;
}
.recognize-category-card.has-artwork::after{
  content:"";position:absolute;z-index:3;pointer-events:none;
  inset:45% 0 0;border-radius:inherit;
  background:linear-gradient(to bottom,transparent,rgba(0,0,0,.58));
}
.recognize-smart-card.has-artwork::after,.recognize-horn-card.has-artwork::after{
  content:"";position:absolute;z-index:3;pointer-events:none;inset:40% 0 0;
  background:linear-gradient(to bottom,transparent,rgba(0,0,0,.58));
}
.recognize-smart-label,.recognize-horn-label{
  position:absolute;z-index:5;bottom:12px;left:16px;color:#fff;
  font:700 17px/1.1 Georgia,serif;text-shadow:0 1px 4px #000,0 2px 9px #000;
  pointer-events:none;
}

/* Learning selection is visible before starting a session. */
.learn-selected-topic{margin:12px 0 8px;padding:10px 13px;border-radius:12px;background:rgba(18,93,65,.08);border:1px solid rgba(18,93,65,.16);color:#13523f;font-size:13px;font-weight:700;line-height:1.4;overflow-wrap:anywhere}