.zd-catalog-page {
  min-height: 100vh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 8% 2%, rgba(245, 197, 24, 0.1), transparent 28rem),
    radial-gradient(circle at 94% 62%, rgba(38, 114, 87, 0.07), transparent 30rem),
    var(--zd-ui-bg);
  color: var(--zd-ui-text);
  font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
}

.zd-account-page {
  background: #f7f6f1;
}

.zd-account-main,
.zd-admin-main {
  width: 100%;
  min-height: 100vh;
  padding: calc(var(--zd-exam-header-height) + clamp(2rem, 5vw, 4.5rem)) var(--zd-page-gutter) clamp(4rem, 8vw, 7rem);
  color: var(--zd-ui-text);
}

.zd-account-main[dir="rtl"] {
  font-family: "Noto Sans Arabic", ui-sans-serif, system-ui, sans-serif;
}

.zd-account-main[dir="rtl"] .zd-account-kicker {
  letter-spacing: 0;
  text-transform: none;
}

.zd-account-main[dir="rtl"] .zd-account-hero h1,
.zd-account-main[dir="rtl"] .zd-payment-copy h1,
.zd-account-main[dir="rtl"] h2,
.zd-account-main[dir="rtl"] button,
.zd-account-main[dir="rtl"] input,
.zd-account-main[dir="rtl"] select {
  font-family: "Noto Sans Arabic", ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0;
}

.zd-account-hero {
  max-width: 62rem;
}

.zd-account-kicker {
  margin: 0 0 0.75rem;
  color: var(--zd-ui-green);
  font-size: 0.73rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.zd-account-hero h1,
.zd-payment-copy h1,
.zd-admin-heading h1 {
  margin: 0;
  font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(2.8rem, 6vw, 5.6rem);
  font-weight: 500;
  letter-spacing: -0.05em;
  line-height: 0.98;
}

.zd-account-hero > p:last-child,
.zd-payment-copy > p,
.zd-admin-heading > div > p:last-child {
  max-width: 48rem;
  margin: 1rem 0 0;
  color: var(--zd-ui-muted);
  font-size: clamp(1rem, 1.4vw, 1.13rem);
  line-height: 1.7;
}

.zd-subscription-status {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem);
  margin: 2rem 0 1rem;
  border: 1px solid #ead89c;
  background: #fff9df;
  padding: 1.1rem 1.25rem;
}

.zd-subscription-status.is-active {
  border-color: #acd2c0;
  background: #eff9f3;
}

.zd-subscription-status > div {
  display: grid;
  gap: 0.22rem;
}

.zd-subscription-status span,
.zd-subscription-status small {
  color: var(--zd-ui-muted);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.zd-subscription-status strong {
  font-size: 0.95rem;
}

.zd-subscription-status > a {
  margin-inline-start: auto;
  border-radius: 999px;
  background: var(--zd-ui-green);
  padding: 0.75rem 1.15rem;
  color: white;
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
}

.zd-plan-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9rem;
  margin-top: 1.5rem;
}

.zd-plan-card {
  min-height: 22rem;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--zd-ui-line);
  border-radius: 1.15rem;
  background: rgba(255, 255, 255, 0.92);
  padding: clamp(1.2rem, 2.2vw, 1.7rem);
  box-shadow: 0 18px 45px rgba(34, 46, 39, 0.045);
}

.zd-plan-card.is-trial {
  background: #fffbeb;
}

.zd-plan-card.is-selected {
  border-color: var(--zd-ui-green);
  box-shadow: inset 0 0 0 1px var(--zd-ui-green);
}

.zd-plan-card__duration {
  width: fit-content;
  border: 1px solid var(--zd-ui-line);
  border-radius: 999px;
  padding: 0.4rem 0.7rem;
  color: var(--zd-ui-muted);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.zd-plan-card__topline,
.zd-plan-card__duration,
.zd-plan-card__popular {
  display: flex;
  align-items: center;
}

.zd-plan-card__topline {
  min-height: 2rem;
  justify-content: space-between;
  gap: 0.5rem;
}

.zd-plan-card__duration,
.zd-plan-card__popular {
  gap: 0.35rem;
}

.zd-plan-card__duration svg,
.zd-plan-card__popular svg {
  width: 0.8rem;
  height: 0.8rem;
}

.zd-plan-card__popular {
  border-radius: 999px;
  background: var(--zd-ui-green-soft);
  padding: 0.42rem 0.65rem;
  color: var(--zd-ui-green);
  font-size: 0.64rem;
  font-weight: 700;
}

.zd-plan-card h2,
.zd-referral-panel h2,
.zd-payment-summary h2 {
  margin: 1.3rem 0 0.45rem;
  font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(1.7rem, 2.6vw, 2.55rem);
  font-weight: 500;
  letter-spacing: -0.04em;
}

.zd-plan-card > p {
  margin: 0;
  color: var(--zd-ui-muted);
  line-height: 1.65;
}

.zd-plan-features,
.zd-payment-summary__features {
  display: grid;
  gap: 0.55rem;
  margin: 1.2rem 0;
  padding: 0;
  list-style: none;
}

.zd-plan-features li,
.zd-payment-summary__features li {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: #405149;
  font-size: 0.75rem;
}

.zd-plan-features svg,
.zd-payment-summary__features svg {
  width: 0.95rem;
  height: 0.95rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--zd-ui-green-soft);
  padding: 0.12rem;
  color: var(--zd-ui-green);
}

.zd-plan-card > .zd-plan-card__balance {
  margin-top: 1rem;
  color: var(--zd-ui-green);
  font-size: 0.76rem;
  font-weight: 500;
}

.zd-plan-price {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  margin: auto 0 1rem;
}

.zd-plan-price strong {
  font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(2.7rem, 4vw, 3.8rem);
  font-weight: 500;
  letter-spacing: -0.06em;
  line-height: 1;
}

.zd-plan-price span {
  color: var(--zd-ui-muted);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
}

.zd-plan-card button,
.zd-account-primary,
.zd-account-secondary,
.zd-account-loading button,
.zd-admin-toolbar button,
.zd-admin-actions button {
  border: 0;
  border-radius: 999px;
  background: var(--zd-ui-green);
  padding: 0.9rem 1.15rem;
  color: white;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.zd-plan-card button:disabled,
.zd-admin-actions button:disabled {
  cursor: wait;
  opacity: 0.55;
}

.zd-account-secondary {
  border: 1px solid var(--zd-ui-line);
  background: white;
  color: var(--zd-ui-text);
}

.zd-account-alert {
  margin: 1rem 0;
  border: 1px solid #e4b4b0;
  background: #fff0ef;
  padding: 0.9rem 1rem;
  color: #8a312d;
}

.zd-verification-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 1rem 0;
  border: 1px solid #d9c87f;
  background: #fff9dc;
  padding: 0.9rem 1rem;
  color: #6d5200;
  font-size: 0.82rem;
}

.zd-verification-banner a {
  flex: 0 0 auto;
  border-radius: 999px;
  background: #6d5200;
  padding: 0.6rem 0.85rem;
  color: white;
  font-weight: 600;
  text-decoration: none;
}

.zd-referral-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(14rem, 0.65fr);
  gap: 2rem;
  margin-top: 1rem;
  border-top: 1px solid var(--zd-ui-line);
  background: white;
  padding: clamp(1.5rem, 4vw, 3rem);
}

.zd-referral-panel h2 {
  margin-top: 0;
}

.zd-referral-panel__copy > p:last-child {
  max-width: 48rem;
  color: var(--zd-ui-muted);
  line-height: 1.65;
}

.zd-referral-progress {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #f4f7f3;
  padding: 1.5rem;
}

.zd-referral-progress__value {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
}

.zd-referral-progress__value strong {
  font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
  font-size: 3.5rem;
  font-weight: 500;
  line-height: 1;
}

.zd-referral-progress > span {
  margin-top: 0.35rem;
  color: var(--zd-ui-muted);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.zd-referral-progress__track {
  height: 0.45rem;
  overflow: hidden;
  margin-top: 1rem;
  border-radius: 999px;
  background: #dce5df;
}

.zd-referral-progress__track i {
  height: 100%;
  display: block;
  border-radius: inherit;
  background: var(--zd-ui-green);
}

.zd-referral-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  grid-column: 1 / -1;
}

.zd-referral-privacy {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--zd-ui-muted);
  font-size: 0.72rem;
  line-height: 1.55;
}

.zd-payment-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(18rem, 0.55fr);
  gap: clamp(1.25rem, 4vw, 3.5rem);
  align-items: start;
}

.zd-payment-copy > h1 {
  max-width: 45rem;
  margin: 0.5rem 0;
  font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(2rem, 4vw, 3.7rem);
  font-weight: 500;
  letter-spacing: -0.05em;
  line-height: 1.06;
}

.zd-payment-copy > p:not(.zd-account-kicker) {
  max-width: 46rem;
  margin: 0 0 1.4rem;
  color: var(--zd-ui-muted);
  line-height: 1.6;
}

.zd-payment-copy ol {
  display: grid;
  gap: 1rem;
  margin: 2rem 0;
  padding-inline-start: 1.3rem;
}

.zd-payment-copy li {
  padding-inline-start: 0.5rem;
  line-height: 1.6;
}

.zd-payment-copy .zd-account-primary {
  display: inline-flex;
}

.zd-payment-back {
  display: inline-block;
  margin-inline-start: 1rem;
  color: var(--zd-ui-muted);
  font-size: 0.82rem;
}

.zd-currency-picker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 1.4rem 0 1rem;
  border: 1px solid var(--zd-ui-line);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.84);
  padding: 0.85rem 1rem;
}

.zd-currency-picker > div:first-child {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.7rem;
}

.zd-currency-picker > div:first-child > svg {
  width: 1.2rem;
  flex: 0 0 auto;
  color: var(--zd-ui-green);
}

.zd-currency-picker strong,
.zd-currency-picker small {
  display: block;
}

.zd-currency-picker strong { font-size: 0.78rem; }
.zd-currency-picker small { margin-top: 0.15rem; color: var(--zd-ui-muted); font-size: 0.65rem; line-height: 1.35; }

.zd-currency-picker > div:last-child {
  display: flex;
  flex: 0 0 auto;
  gap: 0.25rem;
  border-radius: 999px;
  background: #edf1ee;
  padding: 0.25rem;
}

.zd-currency-picker button {
  min-width: 3.2rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  padding: 0.55rem 0.65rem;
  color: var(--zd-ui-muted);
  font: inherit;
  font-size: 0.68rem;
  font-weight: 700;
  cursor: pointer;
}

.zd-currency-picker button.is-active {
  background: white;
  color: var(--zd-ui-text);
  box-shadow: 0 3px 10px rgba(34, 46, 39, 0.08);
}

.zd-payment-methods {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.zd-payment-method {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: start;
  gap: 0.8rem;
  border: 1px solid var(--zd-ui-line);
  border-radius: 1.1rem;
  background: white;
  padding: 1rem;
  box-shadow: 0 12px 32px rgba(34, 46, 39, 0.04);
}

.zd-payment-method.is-paypal { border-color: #b9cce6; background: linear-gradient(145deg, #fff, #f5f8fc); }
.zd-payment-method.is-card {
  grid-column: 1 / -1;
  border-color: #aecfc2;
  background: linear-gradient(145deg, #fff, #f4faf7);
}
.zd-payment-method.is-whatsapp { border-color: #b9d8ca; background: linear-gradient(145deg, #fff, #f3faf6); }

.zd-payment-method__icon {
  display: grid;
  width: 2.6rem;
  height: 2.6rem;
  place-items: center;
  border-radius: 0.8rem;
  background: var(--zd-ui-green-soft);
  color: var(--zd-ui-green);
}

.zd-payment-method__icon svg { width: 1.2rem; }
.zd-payment-method h2 { margin: 0; font-size: 1rem; }
.zd-payment-method p { margin: 0.18rem 0 0.55rem; color: var(--zd-ui-muted); font-size: 0.68rem; line-height: 1.4; }
.zd-payment-method strong { font-size: 1.15rem; font-weight: 650; }

.zd-payment-method > button,
.zd-payment-method > a {
  grid-column: 1 / -1;
  display: flex;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  border: 0;
  border-radius: 999px;
  background: var(--zd-ui-green);
  padding: 0.7rem 0.9rem;
  color: white;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.zd-payment-method.is-paypal > button { background: #153b69; }
.zd-payment-method > button:disabled { cursor: not-allowed; opacity: 0.48; }
.zd-payment-method > button svg { width: 0.95rem; }
.zd-payment-method > a svg { width: 0.95rem; }

.zd-paypal-card-button {
  grid-column: 1 / -1;
  width: 100%;
  min-height: 2.9rem;
  border-top: 1px solid var(--zd-ui-line);
  padding-top: 0.85rem;
  direction: ltr;
}

.zd-card-payment-state {
  grid-column: 1 / -1;
  display: flex;
  min-height: 3.4rem;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 1px dashed var(--zd-ui-line);
  border-radius: 0.8rem;
  color: var(--zd-ui-muted);
  font-size: 0.68rem;
  text-align: center;
}

.zd-card-payment-state svg { width: 1rem; }
.zd-card-payment-state.is-unavailable { background: rgba(255, 255, 255, 0.7); }
.zd-card-payment-state .is-spinning { animation: zd-payment-spin 0.85s linear infinite; }

@keyframes zd-payment-spin { to { transform: rotate(360deg); } }

.zd-payment-method > small {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--zd-ui-muted);
  font-size: 0.6rem;
  line-height: 1.4;
}

.zd-payment-method > small svg { width: 0.85rem; flex: 0 0 auto; }
.zd-payment-method details { grid-column: 1 / -1; border-top: 1px solid var(--zd-ui-line); padding-top: 0.7rem; }
.zd-payment-method summary { color: var(--zd-ui-green); font-size: 0.68rem; font-weight: 700; cursor: pointer; }
.zd-payment-method details ol { gap: 0.35rem; margin: 0.7rem 0 0; padding-inline-start: 1rem; color: var(--zd-ui-muted); font-size: 0.64rem; }

.zd-payment-result {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1rem;
  border: 1px solid #ddc67c;
  border-radius: 0.9rem;
  background: #fff9df;
  padding: 0.8rem 1rem;
  color: #715900;
  font-size: 0.76rem;
}

.zd-payment-result.is-success { border-color: #9ec9b4; background: #edf8f2; color: #176143; }
.zd-payment-result svg { width: 1.1rem; flex: 0 0 auto; }
.zd-payment-result a { margin-inline-start: auto; color: inherit; font-weight: 700; }

.zd-payment-summary {
  position: sticky;
  top: calc(var(--zd-exam-header-height, 5rem) + 1rem);
  border-top: 5px solid #f3c82f;
  border-radius: 1rem;
  background: white;
  padding: 2rem;
  box-shadow: 0 20px 45px rgba(34, 46, 39, 0.06);
}

.zd-payment-summary > span {
  color: var(--zd-ui-muted);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.zd-payment-summary .zd-plan-price {
  margin: 2.5rem 0 1rem;
}

.zd-payment-summary__price {
  margin: 1.5rem 0 0.5rem;
  font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(2.2rem, 4vw, 3.6rem);
  font-weight: 550;
  letter-spacing: -0.05em;
}

.zd-payment-summary > p {
  margin: 0;
  border-top: 1px solid var(--zd-ui-line);
  padding-top: 1rem;
  color: #936b00;
  font-size: 0.8rem;
  font-weight: 600;
}

.zd-profile-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 1rem;
  margin-top: 2rem;
}

.zd-profile-card,
.zd-profile-password {
  border: 1px solid var(--zd-ui-line);
  background: rgba(255, 255, 255, 0.94);
  padding: clamp(1.4rem, 3vw, 2.5rem);
  box-shadow: 0 18px 45px rgba(34, 46, 39, 0.045);
}

.zd-profile-card h2,
.zd-profile-password h2 {
  margin: 0;
  font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(2rem, 3.4vw, 3.5rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.05;
}

.zd-profile-details {
  display: grid;
  gap: 0;
  margin: 2rem 0 0;
}

.zd-profile-details > div {
  display: grid;
  grid-template-columns: minmax(7rem, 0.4fr) minmax(0, 1fr);
  gap: 1rem;
  border-top: 1px solid var(--zd-ui-line);
  padding: 1rem 0;
}

.zd-profile-details dt,
.zd-profile-plan__date span,
.zd-profile-usage span {
  color: var(--zd-ui-muted);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.zd-profile-details dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  font-size: 0.88rem;
  font-weight: 600;
}

.zd-profile-plan {
  border-top: 4px solid var(--zd-ui-green);
}

.zd-profile-plan__date {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 1.4rem 0 0;
  border-top: 1px solid var(--zd-ui-line);
  padding-top: 1rem;
}

.zd-profile-usage {
  margin: 2rem 0;
}

.zd-profile-usage > div:first-child {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.zd-profile-usage strong {
  font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(4rem, 8vw, 7rem);
  font-weight: 500;
  line-height: 1;
}

.zd-profile-usage__track {
  height: 0.55rem;
  overflow: hidden;
  margin-top: 0.75rem;
  border-radius: 999px;
  background: #dce5df;
}

.zd-profile-usage__track i {
  height: 100%;
  display: block;
  border-radius: inherit;
  background: var(--zd-ui-green);
}

.zd-profile-usage > p,
.zd-profile-empty {
  margin: 0.7rem 0 0;
  color: var(--zd-ui-muted);
  font-size: 0.78rem;
  line-height: 1.55;
}

.zd-profile-card .zd-account-primary {
  display: inline-flex;
}

.zd-profile-empty {
  max-width: 34rem;
  margin-bottom: 2rem;
  font-size: 0.9rem;
}

.zd-profile-language-form {
  display: grid;
  gap: 0.7rem;
  margin-top: 1.4rem;
  border-top: 1px solid var(--zd-ui-line);
  padding-top: 1.2rem;
}

.zd-profile-language-form label {
  display: grid;
  gap: 0.45rem;
}

.zd-profile-language-form label > span {
  color: var(--zd-ui-muted);
  font-size: 0.72rem;
  font-weight: 600;
}

.zd-profile-language-form select {
  width: 100%;
  min-height: 3.2rem;
  border: 1px solid var(--zd-ui-line);
  border-radius: 0;
  background: #fbfbf8;
  padding: 0.8rem 0.95rem;
  color: var(--zd-ui-text);
  font: inherit;
}

.zd-profile-language-form select:focus {
  outline: 2px solid rgba(38, 114, 87, 0.25);
  border-color: var(--zd-ui-green);
}

.zd-profile-language-form > p {
  margin: 0;
  color: var(--zd-ui-muted);
  font-size: 0.76rem;
  line-height: 1.5;
}

.zd-profile-language-form button {
  width: fit-content;
}

.zd-profile-language-form button:disabled {
  cursor: default;
  opacity: 0.5;
}

.zd-profile-pending {
  margin-top: 1rem;
}

.zd-onboarding-main {
  display: grid;
  align-content: start;
  grid-template-columns: minmax(16rem, 0.8fr) minmax(28rem, 1.2fr);
  gap: clamp(2rem, 7vw, 8rem);
}

.zd-onboarding-card {
  border-top: 4px solid var(--zd-ui-green);
  background: rgba(255, 255, 255, 0.96);
  padding: clamp(1.5rem, 3.5vw, 3rem);
  box-shadow: 0 18px 45px rgba(34, 46, 39, 0.05);
}

.zd-onboarding-card form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.15rem;
}

.zd-onboarding-card label {
  display: grid;
  gap: 0.5rem;
}

.zd-onboarding-card label > span {
  color: var(--zd-ui-muted);
  font-size: 0.78rem;
  font-weight: 650;
}

.zd-required-mark {
  margin-inline-start: 0.18rem;
  color: #b42318;
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 0;
  vertical-align: super;
}

.zd-onboarding-card input,
.zd-onboarding-card select {
  width: 100%;
  min-height: 3.35rem;
  border: 1px solid var(--zd-ui-line);
  border-radius: 0;
  background: #fbfbf8;
  padding: 0.82rem 0.95rem;
  color: var(--zd-ui-text);
  font: inherit;
}

.zd-onboarding-card input:focus,
.zd-onboarding-card select:focus {
  outline: 2px solid rgba(38, 114, 87, 0.2);
  border-color: var(--zd-ui-green);
}

.zd-onboarding-hint,
.zd-onboarding-card .zd-profile-form-status,
.zd-onboarding-card button {
  grid-column: 1 / -1;
}

.zd-onboarding-hint {
  margin: 0;
  color: var(--zd-ui-muted);
  font-size: 0.78rem;
  line-height: 1.6;
}

.zd-onboarding-card button {
  width: fit-content;
}

.zd-onboarding-card button:disabled {
  cursor: wait;
  opacity: 0.65;
}

.zd-profile-password {
  display: grid;
  grid-template-columns: minmax(15rem, 0.65fr) minmax(0, 1.35fr);
  gap: clamp(2rem, 6vw, 7rem);
  margin-top: 1rem;
}

.zd-profile-password > div > a {
  display: inline-block;
  max-width: 25rem;
  margin-top: 1rem;
  color: var(--zd-ui-muted);
  font-size: 0.78rem;
  line-height: 1.5;
}

.zd-profile-password form {
  display: grid;
  gap: 1rem;
}

.zd-profile-password label {
  display: grid;
  gap: 0.45rem;
}

.zd-profile-password label > span {
  color: var(--zd-ui-muted);
  font-size: 0.72rem;
  font-weight: 600;
}

.zd-profile-password input {
  width: 100%;
  min-height: 3.2rem;
  border: 1px solid var(--zd-ui-line);
  border-radius: 0;
  background: #fbfbf8;
  padding: 0.8rem 0.95rem;
  color: var(--zd-ui-text);
  font: inherit;
}

.zd-profile-password input:focus {
  outline: 2px solid rgba(38, 114, 87, 0.25);
  border-color: var(--zd-ui-green);
}

.zd-profile-password button {
  width: fit-content;
}

.zd-profile-password button:disabled {
  cursor: wait;
  opacity: 0.6;
}

.zd-profile-form-status {
  border: 1px solid #a9d3bf;
  background: #eff9f3;
  padding: 0.8rem 0.9rem;
  color: #1d6749;
  font-size: 0.8rem;
}

.zd-profile-form-status.is-error {
  border-color: #e4b4b0;
  background: #fff0ef;
  color: #8a312d;
}

.zd-admin-plan-request {
  display: block;
  margin-top: 0.28rem;
  color: #805d00;
  font-size: 0.68rem;
  font-weight: 600;
}

.zd-account-loading,
.zd-admin-loading {
  min-height: 45vh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.8rem;
  color: var(--zd-ui-muted);
  text-align: center;
}

.zd-account-loading strong {
  color: var(--zd-ui-text);
  font-size: 1.1rem;
}

.zd-admin-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 2rem;
}

.zd-admin-heading h1 {
  font-size: clamp(2.7rem, 5vw, 4.8rem);
}

.zd-admin-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.zd-admin-stats span {
  min-width: 8rem;
  display: grid;
  border: 1px solid var(--zd-ui-line);
  background: white;
  padding: 1rem;
  color: var(--zd-ui-muted);
  font-size: 0.72rem;
}

.zd-admin-stats strong {
  color: var(--zd-ui-text);
  font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
  font-size: 2rem;
  font-weight: 500;
}

.zd-admin-toolbar {
  display: flex;
  gap: 0.75rem;
  margin: 2rem 0 1rem;
}

.zd-admin-toolbar label {
  width: min(32rem, 100%);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  border: 1px solid var(--zd-ui-line);
  border-radius: 999px;
  background: white;
  padding: 0 1rem;
}

.zd-admin-toolbar label > svg {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  color: var(--zd-ui-muted);
}

.zd-admin-toolbar input {
  width: 100%;
  min-height: 2.75rem;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
}

.zd-admin-toolbar > button {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.zd-admin-toolbar > button svg {
  width: 0.9rem;
  height: 0.9rem;
}

.zd-admin-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--zd-ui-line);
  background: white;
}

.zd-admin-table {
  width: 100%;
  min-width: 94rem;
  border-collapse: collapse;
  text-align: start;
}

.zd-admin-table th,
.zd-admin-table td {
  border-bottom: 1px solid var(--zd-ui-line);
  padding: 1rem;
  text-align: start;
  vertical-align: middle;
}

.zd-admin-table th {
  background: #f7f7f3;
  color: var(--zd-ui-muted);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.zd-admin-table td {
  font-size: 0.83rem;
}

.zd-admin-table td:first-child strong,
.zd-admin-table td:first-child span {
  display: block;
}

.zd-admin-table td:first-child span {
  margin-top: 0.2rem;
  color: var(--zd-ui-muted);
  font-size: 0.72rem;
}

.zd-admin-status {
  display: inline-flex;
  border-radius: 999px;
  background: #eceeeb;
  padding: 0.4rem 0.65rem;
  color: var(--zd-ui-muted);
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: capitalize;
}

.zd-admin-status.is-active {
  background: #e1f2e8;
  color: #1d6749;
}

.zd-admin-status.is-pending_payment,
.zd-admin-status.is-pending_referrals {
  background: #fff2c4;
  color: #805d00;
}

.zd-admin-status.is-rejected,
.zd-admin-status.is-expired,
.zd-admin-status.is-cancelled {
  background: #f7e4e2;
  color: #913c35;
}

.zd-admin-account-status,
.zd-admin-referrals {
  display: block;
  margin-top: 0.4rem;
  color: var(--zd-ui-muted);
  font-size: 0.68rem;
}

.zd-admin-account-status {
  font-weight: 600;
}

.zd-admin-account-status.is-enabled {
  color: #267257;
}

.zd-admin-account-status.is-paused {
  color: #943d36;
}

.zd-admin-table tr.is-account-paused > td {
  background: #fffafa;
}

.zd-admin-balance {
  display: flex;
  align-items: stretch;
  gap: 0.35rem;
}

.zd-admin-balance label {
  width: 7rem;
  display: flex;
  align-items: center;
  border: 1px solid var(--zd-ui-line);
  background: #fbfbf8;
}

.zd-admin-balance label > span {
  padding-inline-start: 0.55rem;
  color: var(--zd-ui-muted);
  font-size: 0.62rem;
  font-weight: 600;
}

.zd-admin-balance input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  padding: 0.55rem 0.4rem;
  color: var(--zd-ui-text);
  font: inherit;
  font-size: 0.75rem;
}

.zd-admin-balance button,
.zd-admin-actions button {
  border: 0;
  border-radius: 999px;
  background: var(--zd-ui-green);
  padding: 0.55rem 0.8rem;
  color: white;
  font: inherit;
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
}

.zd-admin-balance button:disabled {
  cursor: wait;
  opacity: 0.55;
}

.zd-admin-table td > small {
  display: block;
  margin-top: 0.35rem;
  color: var(--zd-ui-muted);
  font-size: 0.64rem;
}

.zd-admin-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border: 1px solid var(--zd-ui-line);
  border-top: 0;
  background: rgba(255, 255, 255, 0.92);
  padding: 0.8rem 1rem;
}

.zd-admin-pagination p {
  margin: 0;
  color: var(--zd-ui-muted);
  font-size: 0.72rem;
}

.zd-admin-pagination > div {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.zd-admin-pagination button {
  min-width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--zd-ui-line);
  border-radius: 0.55rem;
  background: white;
  color: var(--zd-ui-text);
  font: inherit;
  font-size: 0.7rem;
  cursor: pointer;
}

.zd-admin-pagination button.is-active {
  border-color: var(--zd-ui-green);
  background: var(--zd-ui-green);
  color: white;
}

.zd-admin-pagination button:disabled {
  cursor: default;
  opacity: 0.35;
}

.zd-admin-pagination svg {
  width: 0.9rem;
  height: 0.9rem;
}

.zd-admin-usage {
  width: 15rem;
}

.zd-admin-usage > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.zd-admin-usage > div:first-child span,
.zd-admin-usage small {
  color: var(--zd-ui-muted);
  font-size: 0.65rem;
}

.zd-admin-usage__track {
  height: 0.35rem;
  overflow: hidden;
  margin: 0.35rem 0;
  border-radius: 999px;
  background: #e2e8e3;
}

.zd-admin-usage__track i {
  height: 100%;
  display: block;
  border-radius: inherit;
  background: var(--zd-ui-green);
}

.zd-admin-actions {
  display: flex;
  width: 10.5rem;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.zd-admin-actions button {
  padding: 0.55rem 0.8rem;
  font-size: 0.72rem;
}

.zd-admin-actions button.is-clarity {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.38rem;
  background: #eef4ff;
  color: #31578d;
  box-shadow: inset 0 0 0 1px #b9cce8;
}

.zd-admin-actions button.is-clarity svg {
  width: 0.9rem;
  height: 0.9rem;
}

.zd-admin-actions button.is-reject {
  background: transparent;
  color: #943d36;
  box-shadow: inset 0 0 0 1px #d9aaa6;
}

.zd-admin-actions button.is-cancel,
.zd-admin-actions button.is-pause {
  background: #fff5f3;
  color: #943d36;
  box-shadow: inset 0 0 0 1px #e0b8b4;
}

.zd-admin-actions button.is-resume {
  background: #e5f3eb;
  color: #1d6749;
}

.zd-admin-tabs {
  display: flex;
  gap: 0.4rem;
  margin-top: 2rem;
  border-bottom: 1px solid var(--zd-ui-line);
}

.zd-admin-tabs button {
  position: relative;
  min-width: 7rem;
  border: 0;
  background: transparent;
  padding: 0.9rem 1rem;
  color: var(--zd-ui-muted);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.zd-admin-tabs button.is-active {
  color: var(--zd-ui-green);
}

.zd-admin-tabs button.is-active::after {
  position: absolute;
  right: 0.7rem;
  bottom: -1px;
  left: 0.7rem;
  height: 3px;
  border-radius: 999px 999px 0 0;
  background: var(--zd-ui-green);
  content: "";
}

.zd-plan-manager {
  margin-top: 1.5rem;
}

.zd-plan-manager__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.zd-plan-manager__heading h2,
.zd-plan-editor h3,
.zd-admin-plan-card h3 {
  margin: 0;
  font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
  font-weight: 500;
  letter-spacing: -0.03em;
}

.zd-plan-manager__heading h2 {
  font-size: clamp(2rem, 3.5vw, 3rem);
}

.zd-plan-manager__heading p {
  margin: 0.3rem 0 0;
  color: var(--zd-ui-muted);
  font-size: 0.82rem;
}

.zd-plan-manager__heading > button,
.zd-plan-editor__actions button,
.zd-admin-plan-card__actions button {
  border: 0;
  border-radius: 999px;
  background: var(--zd-ui-green);
  padding: 0.78rem 1rem;
  color: white;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
}

.zd-plan-manager__message {
  margin-bottom: 1rem;
  border: 1px solid #a9d3bf;
  background: #eff9f3;
  padding: 0.85rem 1rem;
  color: #1d6749;
  font-size: 0.8rem;
}

.zd-plan-manager__message.is-error {
  border-color: #e4b4b0;
  background: #fff0ef;
  color: #8a312d;
}

.zd-plan-editor {
  margin-bottom: 1rem;
  border: 1px solid var(--zd-ui-line);
  border-top: 4px solid var(--zd-ui-green);
  background: white;
  padding: clamp(1.2rem, 2.8vw, 2rem);
  box-shadow: 0 18px 45px rgba(34, 46, 39, 0.055);
}

.zd-plan-editor__heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.zd-plan-editor__heading span {
  color: var(--zd-ui-green);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.zd-plan-editor h3 {
  margin-top: 0.25rem;
  font-size: 2rem;
}

.zd-plan-editor__heading > button {
  width: 2.35rem;
  height: 2.35rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--zd-ui-line);
  border-radius: 50%;
  background: white;
  color: var(--zd-ui-text);
  font: 300 1.5rem/1 sans-serif;
  cursor: pointer;
}

.zd-plan-editor__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.zd-plan-editor__grid label {
  min-width: 0;
  display: grid;
  gap: 0.4rem;
}

.zd-plan-editor__grid label > span {
  color: var(--zd-ui-muted);
  font-size: 0.7rem;
  font-weight: 600;
}

.zd-plan-editor__grid input,
.zd-plan-editor__grid textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--zd-ui-line);
  border-radius: 0;
  background: #fbfbf8;
  padding: 0.78rem 0.85rem;
  color: var(--zd-ui-text);
  font: inherit;
  font-size: 0.82rem;
}

.zd-plan-editor__grid input:focus,
.zd-plan-editor__grid textarea:focus {
  outline: 2px solid rgba(38, 114, 87, 0.18);
  border-color: var(--zd-ui-green);
}

.zd-plan-editor__grid input[readonly] {
  color: var(--zd-ui-muted);
  cursor: not-allowed;
}

.zd-plan-editor__grid .zd-plan-editor__active {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  border: 1px solid var(--zd-ui-line);
  background: #f5f8f4;
  padding: 0.75rem 0.85rem;
}

.zd-plan-editor__active input {
  width: 1rem;
  height: 1rem;
  flex: 0 0 1rem;
  padding: 0;
}

.zd-plan-editor__description {
  grid-column: 1 / -1;
}

.zd-plan-editor__description textarea {
  min-height: 7rem;
  resize: vertical;
}

.zd-plan-editor__actions,
.zd-admin-plan-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 1.25rem;
}

.zd-plan-editor__actions button:last-child,
.zd-admin-plan-card__actions button:last-child {
  background: transparent;
  color: #943d36;
  box-shadow: inset 0 0 0 1px #d9aaa6;
}

.zd-plan-editor__actions button:disabled,
.zd-admin-plan-card__actions button:disabled {
  cursor: wait;
  opacity: 0.55;
}

.zd-admin-plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 0.85rem;
}

.zd-admin-plan-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--zd-ui-line);
  background: white;
  padding: 1.25rem;
}

.zd-admin-plan-card.is-inactive {
  background: #f5f5f2;
  opacity: 0.72;
}

.zd-admin-plan-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.zd-admin-plan-card__top span {
  color: var(--zd-ui-muted);
  font: 600 0.64rem/1 "Manrope", sans-serif;
}

.zd-admin-plan-card__top strong {
  border-radius: 999px;
  background: #e1f2e8;
  padding: 0.38rem 0.55rem;
  color: #1d6749;
  font-size: 0.62rem;
}

.zd-admin-plan-card.is-inactive .zd-admin-plan-card__top strong {
  background: #e7e7e3;
  color: var(--zd-ui-muted);
}

.zd-admin-plan-card h3 {
  margin-top: 1.1rem;
  font-size: 1.75rem;
}

.zd-admin-plan-card > p {
  flex: 1;
  margin: 0.5rem 0 1rem;
  color: var(--zd-ui-muted);
  font-size: 0.78rem;
  line-height: 1.55;
}

.zd-admin-plan-card dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0;
  border-top: 1px solid var(--zd-ui-line);
}

.zd-admin-plan-card dl > div {
  display: grid;
  gap: 0.2rem;
  border-bottom: 1px solid var(--zd-ui-line);
  padding: 0.7rem 0;
}

.zd-admin-plan-card dt {
  color: var(--zd-ui-muted);
  font-size: 0.62rem;
  text-transform: uppercase;
}

.zd-admin-plan-card dd {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 600;
}

@media (max-width: 850px) {
  .zd-plan-grid,
  .zd-referral-panel,
  .zd-payment-layout,
  .zd-profile-grid,
  .zd-profile-password {
    grid-template-columns: 1fr;
  }

  .zd-onboarding-main {
    grid-template-columns: 1fr;
  }

  .zd-plan-card {
    min-height: 19rem;
  }

  .zd-payment-methods { grid-template-columns: 1fr; }
  .zd-payment-summary { position: static; }

  .zd-admin-heading,
  .zd-subscription-status {
    align-items: flex-start;
    flex-direction: column;
  }

  .zd-subscription-status > a {
    margin-inline-start: 0;
  }

  .zd-admin-stats {
    width: 100%;
  }

  .zd-admin-stats span {
    flex: 1;
  }

  .zd-plan-editor__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .zd-account-main,
  .zd-admin-main {
    padding-inline: 1rem;
  }

  .zd-plan-grid {
    gap: 0.75rem;
  }

  .zd-plan-card { min-height: 0; border-radius: 0.95rem; }
  .zd-currency-picker { align-items: stretch; flex-direction: column; }
  .zd-currency-picker > div:last-child { width: 100%; }
  .zd-currency-picker button { flex: 1; }
  .zd-payment-result { align-items: flex-start; flex-wrap: wrap; }
  .zd-payment-result a { width: 100%; margin-inline-start: 1.8rem; }

  .zd-onboarding-card form {
    grid-template-columns: 1fr;
  }

  .zd-referral-panel,
  .zd-payment-summary {
    padding: 1.25rem;
  }

  .zd-referral-actions > *,
  .zd-payment-copy .zd-account-primary {
    width: 100%;
  }

  .zd-payment-back {
    margin: 1rem 0 0;
  }

  .zd-plan-manager__heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .zd-plan-manager__heading > button {
    width: 100%;
  }

  .zd-plan-editor__grid {
    grid-template-columns: 1fr;
  }

  .zd-admin-toolbar,
  .zd-admin-pagination {
    align-items: stretch;
    flex-direction: column;
  }

  .zd-admin-toolbar > button {
    justify-content: center;
  }

  .zd-admin-pagination > div {
    justify-content: space-between;
  }
}

/* Learner dashboard ------------------------------------------------------- */
.zd-dashboard-main {
  display: grid;
  gap: 1.25rem;
}

.zd-target-gate {
  position: fixed;
  inset: var(--zd-exam-header-height) 0 0;
  z-index: 30;
  display: grid;
  place-items: center;
  overflow: auto;
  background: rgba(240, 244, 240, 0.88);
  padding: 1rem;
  backdrop-filter: blur(8px);
}

.zd-target-gate__dialog {
  width: min(34rem, 100%);
  border: 1px solid var(--zd-ui-line);
  border-radius: 1.1rem;
  background: white;
  padding: clamp(1.25rem, 5vw, 2.5rem);
  box-shadow: 0 24px 70px rgba(28,45,36,.16);
}

.zd-target-gate__icon {
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  margin-bottom: 1rem;
  border-radius: 50%;
  background: var(--zd-ui-green-soft);
  color: var(--zd-ui-green);
}

.zd-target-gate__icon svg { width: 1.25rem; }
.zd-target-gate h1 { margin: 0; font: 500 clamp(1.8rem,5vw,3rem)/1.05 "Manrope",sans-serif; letter-spacing: -.04em; }
.zd-target-gate p:not(.zd-account-kicker) { color: var(--zd-ui-muted); line-height: 1.7; }
.zd-target-gate form, .zd-target-gate label { display: grid; gap: .65rem; }
.zd-target-gate select { min-height: 3.2rem; border: 1px solid var(--zd-ui-line); border-radius: .7rem; background: #fafbf9; padding: .7rem; font: inherit; }
.zd-target-gate form > button { width: 100%; margin-top: .35rem; }

.zd-profile-dashboard-link {
  display: inline-flex;
  margin-top: 1rem;
  border-radius: 999px;
  background: var(--zd-ui-green);
  padding: 0.72rem 1rem;
  color: white;
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
}

.zd-dashboard-hero {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 2rem;
  border-bottom: 1px solid var(--zd-ui-line);
  padding-bottom: 1.5rem;
}

.zd-dashboard-hero h1,
.zd-saved-words h2,
.zd-activity-card h2,
.zd-admin-requests h2,
.zd-admin-user-modal h2 {
  margin: 0;
  font-family: "Manrope", sans-serif;
  font-size: clamp(2rem, 4vw, 4rem);
  font-weight: 500;
  letter-spacing: -0.045em;
}

.zd-dashboard-hero > div > p:last-child {
  margin: 0.6rem 0 0;
  color: var(--zd-ui-muted);
}

.zd-dashboard-hero form {
  min-width: min(100%, 24rem);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.55rem;
  border: 1px solid var(--zd-ui-line);
  border-radius: 1rem;
  background: white;
  padding: 0.75rem;
}

.zd-dashboard-hero label {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.2rem 0.55rem;
}

.zd-dashboard-hero label svg {
  grid-row: span 2;
  width: 1.15rem;
  color: var(--zd-ui-green);
}

.zd-dashboard-hero label span {
  color: var(--zd-ui-muted);
  font-size: 0.67rem;
  font-weight: 600;
  text-transform: uppercase;
}

.zd-dashboard-hero input {
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--zd-ui-text);
  font: inherit;
  font-weight: 600;
}

.zd-dashboard-hero form > button,
.zd-saved-words header > button {
  border: 0;
  border-radius: 999px;
  background: var(--zd-ui-green);
  padding: 0.75rem 1rem;
  color: white;
  font: 600 0.75rem/1 "Manrope", sans-serif;
  cursor: pointer;
}

.zd-days-left {
  grid-column: 1 / -1;
  color: #b53b34;
  font-size: 0.74rem;
}

.zd-dashboard-message {
  border-inline-start: 3px solid var(--zd-ui-green);
  background: var(--zd-ui-green-soft);
  padding: 0.75rem 1rem;
  color: var(--zd-ui-green);
  font-size: 0.8rem;
}

.zd-dashboard-stats,
.zd-module-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.zd-dashboard-stats article,
.zd-module-stat-grid article {
  display: grid;
  gap: 0.45rem;
  border: 1px solid var(--zd-ui-line);
  border-radius: 1rem;
  background: white;
  padding: 1rem;
}

.zd-dashboard-stats svg {
  width: 1.1rem;
  color: var(--zd-ui-green);
}

.zd-dashboard-stats span,
.zd-module-stat-grid span,
.zd-module-stat-grid small {
  color: var(--zd-ui-muted);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: capitalize;
}

.zd-dashboard-stats strong,
.zd-module-stat-grid strong {
  font: 500 1.75rem/1 "Manrope", sans-serif;
}

.zd-activity-card,
.zd-saved-words,
.zd-admin-requests {
  overflow: hidden;
  border: 1px solid var(--zd-ui-line);
  border-radius: 1rem;
  background: white;
  padding: 1.25rem;
}

.zd-activity-card h2,
.zd-saved-words h2,
.zd-admin-requests h2,
.zd-admin-user-modal h2 {
  font-size: clamp(1.5rem, 3vw, 2.4rem);
}

.zd-heatmap-scroll {
  overflow-x: auto;
  margin-top: 1.25rem;
  padding-bottom: 0.4rem;
}

.zd-activity-card__heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
}

.zd-activity-card__heading label {
  display: grid;
  gap: .25rem;
  color: var(--zd-ui-muted);
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
}

.zd-activity-card__heading select {
  min-width: 6rem;
  border: 1px solid var(--zd-ui-line);
  border-radius: .65rem;
  background: #fafbf9;
  padding: .55rem .7rem;
  color: var(--zd-ui-text);
  font: 600 .8rem/1 "Manrope", sans-serif;
}

.zd-heatmap-chart {
  width: max-content;
  display: grid;
  grid-template-columns: 2rem auto;
  grid-template-rows: 1rem auto;
  gap: .35rem .5rem;
}

.zd-heatmap-months {
  grid-column: 2;
  display: grid;
  grid-template-columns: repeat(var(--heatmap-weeks), .72rem);
  gap: .18rem;
}

.zd-heatmap-months span {
  overflow: visible;
  color: var(--zd-ui-muted);
  font-size: .58rem;
  white-space: nowrap;
}

.zd-heatmap-days {
  grid-row: 2;
  display: grid;
  grid-template-rows: repeat(7, .72rem);
  gap: .18rem;
}

.zd-heatmap-days span {
  align-self: center;
  color: var(--zd-ui-muted);
  font-size: .52rem;
  line-height: 1;
}

.zd-heatmap {
  grid-column: 2;
  grid-row: 2;
  width: max-content;
  display: grid;
  grid-template-columns: repeat(var(--heatmap-weeks), 0.72rem);
  grid-template-rows: repeat(7, 0.72rem);
  gap: 0.18rem;
}

.zd-heatmap i {
  width: .72rem;
  height: .72rem;
  border-radius: 0.18rem;
  background: #edf0ed;
  outline: 0;
}

.zd-heatmap i[data-count="1"] { background: #cce9da; }
.zd-heatmap i[data-count="2"] { background: #8fcbad; }
.zd-heatmap i[data-count="3"] { background: #4c9b76; }
.zd-heatmap i[data-count="4"] { background: #226747; }
.zd-heatmap i.is-empty { visibility: hidden; }
.zd-heatmap i.is-exam-day,
.zd-heatmap-legend i.is-exam-day { background: #d9423a; box-shadow: inset 0 0 0 1px #a91f1a; }
.zd-heatmap i:focus-visible { box-shadow: 0 0 0 2px white, 0 0 0 4px var(--zd-ui-green); }

.zd-heatmap-legend {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .3rem;
  margin-top: .55rem;
  color: var(--zd-ui-muted);
  font-size: .6rem;
}

.zd-heatmap-legend i {
  width: .72rem;
  height: .72rem;
  display: inline-block;
  border-radius: .18rem;
  background: #edf0ed;
}
.zd-heatmap-legend i[data-count="1"] { background: #cce9da; }
.zd-heatmap-legend i[data-count="2"] { background: #8fcbad; }
.zd-heatmap-legend i[data-count="3"] { background: #4c9b76; }
.zd-heatmap-legend i[data-count="4"] { background: #226747; }
.zd-heatmap-legend b { display:flex; align-items:center; gap:.3rem; margin-inline-start:.7rem; font-weight:600; }

.zd-module-stat-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.zd-module-stat-grid article > div {
  height: 0.38rem;
  overflow: hidden;
  border-radius: 999px;
  background: #e8ede9;
}

.zd-module-stat-grid article > div i {
  height: 100%;
  display: block;
  background: var(--zd-ui-green);
}

.zd-saved-words header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
}

.zd-word-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; }
.zd-word-actions button,
.zd-word-actions a {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  border: 0;
  border-radius: 999px;
  background: var(--zd-ui-green);
  padding: .75rem 1rem;
  color: white;
  font: 600 .75rem/1 "Manrope",sans-serif;
  text-decoration: none;
  cursor: pointer;
}
.zd-word-actions a { background: #f2c719; color: #27332c; }
.zd-word-actions svg { width: 1rem; height: 1rem; }
.zd-word-actions button:disabled,
.zd-word-actions a[aria-disabled="true"] { opacity: 0.4; pointer-events: none; }

.zd-word-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.65rem;
  margin-top: 1rem;
}

.zd-word-grid article {
  min-width: 0;
  border: 1px solid var(--zd-ui-line);
  border-radius: 0.8rem;
  background: #fafbf9;
  padding: 0.85rem;
}

.zd-word-grid span,
.zd-word-grid strong { display: block; overflow-wrap: anywhere; }
.zd-word-grid span { font-weight: 700; }
.zd-word-grid strong { margin-top: 0.25rem; color: var(--zd-ui-green); font-size: 0.8rem; }
.zd-word-grid p { margin: 0.55rem 0 0; color: var(--zd-ui-muted); font-size: 0.72rem; line-height: 1.5; }

.zd-word-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1rem;
}

.zd-word-pagination button,
.zd-practice-modal header button {
  width: 2.3rem;
  height: 2.3rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--zd-ui-line);
  border-radius: 50%;
  background: white;
  color: var(--zd-ui-text);
}

.zd-word-pagination svg,
.zd-practice-modal header svg { width: 1rem; }

.zd-practice-modal,
.zd-admin-user-modal {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: grid;
  place-items: center;
  background: rgba(25, 35, 30, 0.58);
  padding: 1rem;
  backdrop-filter: blur(6px);
}

.zd-practice-modal > section,
.zd-admin-user-modal > section {
  width: min(44rem, 100%);
  max-height: min(48rem, calc(100svh - 2rem));
  overflow: auto;
  border-radius: 1.1rem;
  background: white;
  padding: 1.25rem;
  box-shadow: 0 30px 80px rgba(0,0,0,0.24);
}

.zd-practice-modal header,
.zd-admin-user-modal header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.zd-practice-modal header span,
.zd-admin-user-modal header span { color: var(--zd-ui-green); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; }

.zd-practice-modal nav {
  display: flex;
  gap: 0.4rem;
  margin: 1rem 0;
}

.zd-practice-modal nav button {
  border: 1px solid var(--zd-ui-line);
  border-radius: 999px;
  background: white;
  padding: 0.65rem 1rem;
  font: inherit;
}

.zd-practice-modal nav button.is-active { border-color: var(--zd-ui-green); background: var(--zd-ui-green-soft); color: var(--zd-ui-green); }

.zd-practice-card { min-height: 23rem; display: grid; place-content: center; justify-items: center; gap: 1rem; border-radius: 1rem; background: #fff8d9; padding: 1.25rem; text-align: center; }
.zd-practice-card h3 { margin: 0; font-size: clamp(2rem, 7vw, 4rem); }
.zd-practice-card > button { border: 0; border-radius: 999px; background: var(--zd-ui-green); padding: 0.8rem 1.2rem; color: white; }
.zd-practice-card footer { display: flex; gap: 0.65rem; }
.zd-practice-card footer button { display: flex; align-items: center; gap: 0.35rem; border: 1px solid var(--zd-ui-line); border-radius: 999px; padding: 0.7rem 1rem; }
.zd-practice-card footer svg { width: 1rem; }
.zd-practice-card footer .is-correct { background: var(--zd-ui-green); color: white; }
.zd-practice-card footer .is-wrong { color: #a33d37; }

.zd-match-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.55rem; }
.zd-match-grid button { min-height: 5rem; border: 1px solid var(--zd-ui-line); border-radius: 0.8rem; background: #fafbf9; padding: 0.55rem; color: var(--zd-ui-text); overflow-wrap: anywhere; }
.zd-match-grid button.is-selected { border-color: #d3a400; background: #fff5c7; }
.zd-match-grid button.is-matched { border-color: #7fbaa0; background: #e8f7ef; color: #287153; opacity: 0.55; }
.zd-match-complete { grid-column: 1 / -1; color: var(--zd-ui-green); text-align: center; }

/* Matching game --------------------------------------------------------- */
.zd-matching-main { display: grid; gap: 1rem; }
.zd-match-hero { display:flex; align-items:end; justify-content:space-between; gap:2rem; border-bottom:1px solid var(--zd-ui-line); padding-bottom:1.25rem; }
.zd-match-hero h1 { margin:.25rem 0 0; font:500 clamp(2rem,5vw,4rem)/1 "Manrope",sans-serif; letter-spacing:-.05em; }
.zd-match-hero p:last-child { max-width:42rem; margin:.7rem 0 0; color:var(--zd-ui-muted); line-height:1.6; }
.zd-match-back { display:inline-flex; align-items:center; gap:.35rem; border:0; background:transparent; padding:0; color:var(--zd-ui-green); font:600 .75rem/1 "Manrope",sans-serif; cursor:pointer; }
.zd-match-back svg { width:1rem; }
[dir="rtl"] .zd-match-back svg { transform:rotate(180deg); }
.zd-match-live-stats { display:grid; grid-template-columns:repeat(3, minmax(5rem,1fr)); border:1px solid var(--zd-ui-line); border-radius:1rem; background:white; }
.zd-match-live-stats span { display:grid; gap:.25rem; min-width:6rem; padding:.8rem; color:var(--zd-ui-muted); font-size:.6rem; text-align:center; text-transform:uppercase; }
.zd-match-live-stats span + span { border-inline-start:1px solid var(--zd-ui-line); }
.zd-match-live-stats strong { color:var(--zd-ui-text); font:600 1.15rem/1 "Manrope",sans-serif; }
.zd-match-settings { display:flex; align-items:end; gap:.55rem; border:1px solid var(--zd-ui-line); border-radius:1rem; background:white; padding:.75rem; }
.zd-match-settings label { display:grid; flex:1 1 9rem; gap:.3rem; color:var(--zd-ui-muted); font-size:.62rem; font-weight:700; text-transform:uppercase; }
.zd-match-settings select,.zd-match-settings input { min-height:2.75rem; border:1px solid var(--zd-ui-line); border-radius:.65rem; background:#fafbf9; padding:.55rem .65rem; color:var(--zd-ui-text); font:inherit; font-size:.78rem; }
.zd-match-settings > button,.zd-match-result > div button { min-height:2.75rem; display:inline-flex; align-items:center; justify-content:center; gap:.4rem; border:0; border-radius:.7rem; background:var(--zd-ui-green); padding:.65rem 1rem; color:white; font:600 .75rem/1 "Manrope",sans-serif; cursor:pointer; }
.zd-match-settings > button svg,.zd-match-result > div button svg { width:1rem; }
.zd-match-summary { display:flex; align-items:center; gap:1.25rem; color:var(--zd-ui-muted); font-size:.7rem; }
.zd-match-summary span { display:inline-flex; align-items:center; gap:.35rem; }
.zd-match-summary span:first-child { border-radius:999px; background:var(--zd-ui-green-soft); padding:.5rem .7rem; color:var(--zd-ui-green); font-weight:700; }
.zd-match-summary svg { width:.9rem; color:#a77c00; }
.zd-match-board { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.85rem; }
.zd-match-column { display:grid; align-content:start; gap:.55rem; }
.zd-match-column h2 { margin:0 0 .25rem; color:var(--zd-ui-muted); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; }
.zd-match-column article { min-height:7rem; display:grid; align-content:center; gap:.65rem; border:1px solid var(--zd-ui-line); border-radius:.85rem; background:white; padding:.85rem; transition:transform 150ms ease,border-color 150ms ease,background 150ms ease; cursor:pointer; }
.zd-match-column article:hover { border-color:#8dbba8; transform:translateY(-1px); }
.zd-match-column article.is-selected { border-color:#d2a400; background:#fff8d9; box-shadow:0 0 0 2px rgba(210,164,0,.12); }
.zd-match-column article.is-wrong { border-color:#cf5a52; background:#fff1ef; animation:zd-match-shake .36s ease; }
.zd-match-column article.is-matched { border-color:#86bea5; background:#eaf7f0; color:#287153; opacity:.58; pointer-events:none; }
.zd-match-column article.is-revealed { border-color:#d2a400; box-shadow:inset 4px 0 #f2c719; }
.zd-match-column article > div:first-child { display:grid; gap:.2rem; }
.zd-match-column article strong { overflow-wrap:anywhere; font:600 clamp(.9rem,2vw,1.08rem)/1.45 "Manrope",sans-serif; }
.zd-match-column article small,.zd-match-column article p { margin:0; color:var(--zd-ui-muted); font-size:.7rem; line-height:1.45; }
.zd-match-card-actions { display:flex; flex-wrap:wrap; gap:.35rem; }
.zd-match-card-actions button,.zd-match-translation { display:inline-flex; align-items:center; gap:.3rem; border:1px solid var(--zd-ui-line); border-radius:999px; background:#fafbf9; padding:.4rem .55rem; color:var(--zd-ui-muted); font:600 .62rem/1 "Manrope",sans-serif; cursor:pointer; }
.zd-match-card-actions svg { width:.8rem; height:.8rem; }
.zd-match-translation { width:max-content; }
.zd-match-empty { min-height:20rem; display:grid; place-content:center; justify-items:center; gap:.65rem; border:1px dashed var(--zd-ui-line); border-radius:1rem; background:white; padding:2rem; text-align:center; }
.zd-match-empty > svg { width:2.5rem; color:var(--zd-ui-green); }
.zd-match-empty h2,.zd-match-empty p { margin:0; }
.zd-match-empty p { max-width:32rem; color:var(--zd-ui-muted); }
.zd-match-empty a { border-radius:999px; background:var(--zd-ui-green); padding:.7rem 1rem; color:white; text-decoration:none; }
.zd-match-result { display:grid; justify-items:center; gap:.65rem; text-align:center; }
.zd-match-result > svg { width:3rem; height:3rem; color:#d2a400; }
.zd-match-result h2 { margin:0; font:500 clamp(2rem,6vw,3.5rem)/1 "Manrope",sans-serif; }
.zd-match-result dl { width:100%; display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; }
.zd-match-result dl div { border:1px solid var(--zd-ui-line); border-radius:.7rem; padding:.7rem; }
.zd-match-result dt { color:var(--zd-ui-muted); font-size:.62rem; text-transform:uppercase; }
.zd-match-result dd { margin:.25rem 0 0; font:600 1.4rem/1 "Manrope",sans-serif; }
.zd-match-result > div { display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem; }
.zd-match-result > div button:last-child { border:1px solid var(--zd-ui-line); background:white; color:var(--zd-ui-text); }
@keyframes zd-match-shake { 25%{transform:translateX(-4px)} 50%{transform:translateX(4px)} 75%{transform:translateX(-2px)} }

/* Admin detail and request workflow -------------------------------------- */
.zd-admin-tabs a {
  position: relative;
  min-width: 7rem;
  padding: 0.9rem 1rem;
  color: var(--zd-ui-muted);
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}
.zd-admin-tabs a.is-active { color: var(--zd-ui-green); }
.zd-admin-tabs a.is-active::after { position:absolute; right:.7rem; bottom:-1px; left:.7rem; height:3px; border-radius:999px 999px 0 0; background:var(--zd-ui-green); content:""; }
.zd-admin-user-link { border: 0; background: transparent; padding: 0; color: var(--zd-ui-green); font: inherit; font-weight: 700; text-align: start; text-decoration: underline; cursor: pointer; }
.zd-admin-requests { margin-top: 1.5rem; }
.zd-admin-requests > div:first-child > p { margin: .35rem 0 1rem; color: var(--zd-ui-muted); }
.zd-request-list { display: grid; gap: .65rem; }
.zd-request-list article { display: grid; grid-template-columns: minmax(12rem, 1fr) minmax(9rem, auto) auto auto; align-items: center; gap: 1rem; border: 1px solid var(--zd-ui-line); border-radius: .8rem; padding: .85rem; }
.zd-request-list h3, .zd-request-list p { margin: 0; }
.zd-request-list span, .zd-request-list small, .zd-request-list p { color: var(--zd-ui-muted); font-size: .7rem; }
.zd-request-list footer { display: flex; gap: .4rem; }
.zd-request-list footer button { border: 0; border-radius: 999px; background: var(--zd-ui-green); padding: .6rem .85rem; color: white; }
.zd-request-list footer button.is-reject { border: 1px solid #d9aaa6; background: #fff7f6; color: #943d36; }
.zd-admin-empty { padding: 3rem 1rem; color: var(--zd-ui-muted); text-align: center; }
.zd-admin-user-modal { background: transparent; backdrop-filter: none; }
.zd-admin-user-modal__backdrop { position: absolute; inset: 0; border: 0; background: rgba(25,35,30,.58); backdrop-filter: blur(6px); }
.zd-admin-user-modal > section { position: relative; z-index: 1; }
.zd-admin-user-modal dl { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .55rem; margin: 1rem 0; }
.zd-admin-user-modal dl > div { border: 1px solid var(--zd-ui-line); border-radius: .7rem; padding: .7rem; }
.zd-admin-user-modal dt { color: var(--zd-ui-muted); font-size: .65rem; text-transform: uppercase; }
.zd-admin-user-modal dd { margin: .25rem 0 0; overflow-wrap: anywhere; font-weight: 600; }
.zd-admin-table time { color: var(--zd-ui-muted); font-size: .7rem; white-space: nowrap; }
.zd-admin-phone { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.zd-admin-phone a { display: inline-flex; align-items: center; min-height: 1.9rem; border-radius: 999px; background: #e8f7ef; padding: .35rem .6rem; color: #1e6d4d; font-size: .68rem; text-decoration: none; }
.zd-admin-phone a:hover,.zd-admin-phone a:focus-visible { background: #d8f0e3; }
.zd-admin-user-progress { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .55rem; }
.zd-admin-user-progress article { display: grid; gap: .2rem; background: var(--zd-ui-soft); padding: .7rem; }
.zd-admin-user-progress span, .zd-admin-user-progress small { color: var(--zd-ui-muted); font-size: .7rem; }

body.zd-admin-modal-open { overflow: hidden; }
.zd-admin-user-modal > .zd-admin-user-workspace {
  width: min(78rem, 100%);
  max-height: calc(100svh - 2rem);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 1.25rem;
  padding: 0;
}
.zd-admin-user-workspace__header {
  min-height: 6rem;
  border-bottom: 1px solid var(--zd-ui-line);
  padding: 1rem 1.25rem;
  background: linear-gradient(115deg, #fff 0%, #f4faf6 100%);
}
.zd-admin-user-identity { min-width: 0; display: flex; align-items: center; gap: .85rem; }
.zd-admin-user-identity > strong {
  width: 3.15rem;
  height: 3.15rem;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: .9rem;
  background: var(--zd-ui-green);
  color: white;
  font: 700 1.1rem/1 "Manrope", sans-serif;
}
.zd-admin-user-identity > div { min-width: 0; }
.zd-admin-user-identity h2 { overflow: hidden; margin: .15rem 0 0; font-size: clamp(1.25rem, 2.5vw, 1.9rem); text-overflow: ellipsis; white-space: nowrap; }
.zd-admin-user-identity p { overflow: hidden; margin: .18rem 0 0; color: var(--zd-ui-muted); font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.zd-admin-modal-close,
.zd-admin-email-history .zd-admin-user-panel__heading > button {
  width: 2.5rem;
  height: 2.5rem;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid var(--zd-ui-line);
  border-radius: .7rem;
  background: white;
  color: var(--zd-ui-text);
  cursor: pointer;
}
.zd-admin-modal-close svg,
.zd-admin-email-history .zd-admin-user-panel__heading > button svg { width: 1rem; }
.zd-admin-user-tabs {
  display: flex;
  gap: .3rem;
  border-bottom: 1px solid var(--zd-ui-line);
  background: #fbfcfa;
  padding: .45rem 1.25rem 0;
}
.zd-admin-user-tabs button {
  min-height: 3rem;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  padding: .7rem .85rem;
  color: var(--zd-ui-muted);
  font: 650 .76rem/1 "Manrope", sans-serif;
  cursor: pointer;
}
.zd-admin-user-tabs button svg { width: 1rem; }
.zd-admin-user-tabs button > span { min-width: 1rem; border-radius: 999px; background: var(--zd-ui-soft); padding: .2rem .35rem; font-size: .6rem; text-align: center; }
.zd-admin-user-tabs button.is-active { border-bottom-color: var(--zd-ui-green); color: var(--zd-ui-green); }
.zd-admin-user-workspace__content { min-height: 0; overflow: auto; overscroll-behavior: contain; background: #f6f7f3; padding: 1rem; }
.zd-admin-workspace-message {
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .75rem;
  border: 1px solid #b9dec9;
  border-radius: .75rem;
  background: #eaf7f0;
  padding: .7rem .85rem;
  color: #246d50;
  font-size: .75rem;
  box-shadow: 0 8px 25px rgba(30,63,47,.08);
}
.zd-admin-workspace-message.is-error { border-color: #efc3bf; background: #fff1ef; color: #913a34; }
.zd-admin-workspace-message button { width: 1.8rem; height: 1.8rem; display: grid; place-items: center; border: 0; background: transparent; color: inherit; cursor: pointer; }
.zd-admin-workspace-message svg { width: .9rem; }
.zd-admin-user-overview { display: grid; gap: .8rem; }
.zd-admin-account-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .65rem; }
.zd-admin-account-summary article {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: .65rem;
  border: 1px solid var(--zd-ui-line);
  border-radius: .85rem;
  background: white;
  padding: .8rem;
}
.zd-admin-account-summary article > svg { width: 1.15rem; flex: 0 0 auto; color: var(--zd-ui-green); }
.zd-admin-account-summary article > div { min-width: 0; display: grid; gap: .17rem; }
.zd-admin-account-summary span,.zd-admin-account-summary small { overflow: hidden; color: var(--zd-ui-muted); font-size: .61rem; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.zd-admin-account-summary strong { overflow: hidden; font: 650 .85rem/1.2 "Manrope", sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.zd-admin-account-summary strong.is-positive { color: var(--zd-ui-green); }
.zd-admin-account-summary strong.is-negative { color: #a33d37; }
.zd-admin-user-columns { display: grid; grid-template-columns: minmax(20rem, .8fr) minmax(29rem, 1.2fr); gap: .8rem; align-items: start; }
.zd-admin-user-panel,
.zd-admin-email-composer,
.zd-admin-email-history {
  min-width: 0;
  border: 1px solid var(--zd-ui-line);
  border-radius: 1rem;
  background: white;
  padding: 1rem;
}
.zd-admin-user-panel__heading { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .85rem; }
.zd-admin-user-panel__heading > div { min-width: 0; }
.zd-admin-user-panel__heading span { color: var(--zd-ui-green); font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.zd-admin-user-panel__heading h3 { margin: .2rem 0 0; font: 650 1.05rem/1.2 "Manrope", sans-serif; }
.zd-admin-user-panel__heading > svg { width: 1.2rem; color: var(--zd-ui-green); }
.zd-admin-user-modal dl.zd-admin-profile-grid { grid-template-columns: repeat(2, minmax(0,1fr)); margin: 0; }
.zd-admin-user-modal dl.zd-admin-profile-grid > div { border: 0; border-radius: .65rem; background: var(--zd-ui-soft); padding: .65rem; }
.zd-admin-profile-grid dd { font-size: .75rem; }
.zd-admin-user-progress { margin-top: .65rem; }
.zd-admin-user-progress article { border-radius: .65rem; }
.zd-admin-user-progress > p { grid-column: 1/-1; margin: 0; border-radius: .65rem; background: var(--zd-ui-soft); padding: 1rem; color: var(--zd-ui-muted); font-size: .72rem; text-align: center; }
.zd-admin-pending-action { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .65rem; border: 1px solid #e1c665; border-radius: .8rem; background: #fff9de; padding: .75rem; }
.zd-admin-pending-action > div { min-width: 0; display: grid; gap: .2rem; }
.zd-admin-pending-action strong { font-size: .76rem; }
.zd-admin-pending-action span { color: #766626; font-size: .65rem; text-transform: capitalize; }
.zd-admin-pending-action button { flex: 0 0 auto; border: 0; border-radius: .6rem; background: #d2a400; padding: .6rem .75rem; color: #1e291f; font: 700 .66rem/1 "Manrope", sans-serif; cursor: pointer; }
.zd-admin-control-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .65rem; }
.zd-admin-control-card { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)) auto; align-items: end; gap: .6rem; border: 1px solid var(--zd-ui-line); border-radius: .8rem; background: #fbfcfa; padding: .75rem; }
.zd-admin-control-card + .zd-admin-control-card,
.zd-admin-control-grid + .zd-admin-control-card,
.zd-admin-control-card + .zd-admin-control-grid { margin-top: .65rem; }
.zd-admin-control-grid .zd-admin-control-card { grid-template-columns: 1fr; margin: 0; }
.zd-admin-control-card__title { grid-column: 1/-1; display: flex; align-items: start; gap: .55rem; }
.zd-admin-control-card__title > svg { width: 1rem; flex: 0 0 auto; color: var(--zd-ui-green); }
.zd-admin-control-card__title > div { display: grid; gap: .18rem; }
.zd-admin-control-card__title strong { font-size: .75rem; }
.zd-admin-control-card__title span { color: var(--zd-ui-muted); font-size: .62rem; line-height: 1.4; }
.zd-admin-control-card label,
.zd-admin-email-composer > label { min-width: 0; display: grid; gap: .3rem; color: var(--zd-ui-muted); font-size: .62rem; font-weight: 650; }
.zd-admin-control-card label > span small { font-weight: 400; }
.zd-admin-control-card input,
.zd-admin-control-card select,
.zd-admin-email-composer input,
.zd-admin-email-composer textarea {
  width: 100%;
  min-height: 2.65rem;
  border: 1px solid var(--zd-ui-line);
  border-radius: .6rem;
  outline: 0;
  background: white;
  padding: .6rem .7rem;
  color: var(--zd-ui-text);
  font: 500 .75rem/1.35 "Manrope", sans-serif;
}
.zd-admin-control-card input:focus,
.zd-admin-control-card select:focus,
.zd-admin-email-composer input:focus,
.zd-admin-email-composer textarea:focus { border-color: var(--zd-ui-green); box-shadow: 0 0 0 3px rgba(43,130,95,.1); }
.zd-admin-control-card > button,
.zd-admin-email-send { min-height: 2.65rem; border: 0; border-radius: .6rem; background: var(--zd-ui-green); padding: .65rem .8rem; color: white; font: 700 .67rem/1 "Manrope", sans-serif; cursor: pointer; }
.zd-admin-control-card > button:disabled,
.zd-admin-pending-action button:disabled,
.zd-admin-email-send:disabled { cursor: wait; opacity: .55; }
.zd-admin-password-grid { grid-column: 1/3; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .6rem; }
.zd-admin-email-workspace { display: grid; grid-template-columns: minmax(25rem, .9fr) minmax(28rem, 1.1fr); gap: .8rem; align-items: start; }
.zd-admin-email-composer { display: grid; gap: .75rem; }
.zd-admin-email-recipient { display: flex; align-items: center; gap: .7rem; border-radius: .65rem; background: var(--zd-ui-soft); padding: .65rem .75rem; }
.zd-admin-email-recipient span { color: var(--zd-ui-muted); font-size: .62rem; text-transform: uppercase; }
.zd-admin-email-recipient strong { min-width: 0; overflow: hidden; font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }
.zd-admin-email-composer textarea { min-height: 13rem; resize: vertical; line-height: 1.65; }
.zd-admin-email-composer > label.zd-admin-email-attachments { position: relative; grid-template-columns: auto 1fr; align-items: center; border: 1px dashed #9dbdad; border-radius: .7rem; background: #f5faf7; padding: .75rem; cursor: pointer; }
.zd-admin-email-attachments > svg { width: 1.1rem; color: var(--zd-ui-green); }
.zd-admin-email-attachments > span { display: grid; gap: .15rem; }
.zd-admin-email-attachments small { font-weight: 400; }
.zd-admin-email-attachments input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.zd-admin-email-file-list { display: flex; flex-wrap: wrap; gap: .35rem; }
.zd-admin-email-file-list span,
.zd-admin-email-list footer span { display: inline-flex; align-items: center; gap: .25rem; border-radius: 999px; background: var(--zd-ui-soft); padding: .35rem .5rem; color: var(--zd-ui-muted); font-size: .61rem; }
.zd-admin-email-file-list svg,
.zd-admin-email-list footer svg { width: .75rem; }
.zd-admin-email-file-list > small { width: 100%; color: var(--zd-ui-muted); font-size: .6rem; }
.zd-admin-email-send { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; }
.zd-admin-email-send svg { width: .9rem; }
.zd-admin-email-history { min-height: 25rem; }
.zd-admin-email-history .zd-admin-empty { display: grid; justify-items: center; gap: .4rem; }
.zd-admin-email-history .zd-admin-empty svg { width: 1.5rem; color: var(--zd-ui-green); }
.zd-admin-email-history .zd-admin-empty strong { color: var(--zd-ui-text); }
.zd-admin-email-list { display: grid; gap: .45rem; }
.zd-admin-email-list details { overflow: hidden; border: 1px solid var(--zd-ui-line); border-radius: .7rem; background: #fbfcfa; }
.zd-admin-email-list summary { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: .55rem; padding: .7rem; list-style: none; cursor: pointer; }
.zd-admin-email-list summary::-webkit-details-marker { display: none; }
.zd-admin-email-list summary > span { border-radius: 999px; background: var(--zd-ui-soft); padding: .3rem .45rem; color: var(--zd-ui-muted); font-size: .55rem; font-weight: 700; text-transform: uppercase; }
.zd-admin-email-list summary > span.is-sent { background: #e6f5ed; color: #216d4e; }
.zd-admin-email-list summary > span.is-failed { background: #fff0ee; color: #9b3d36; }
.zd-admin-email-list summary > div { min-width: 0; display: grid; gap: .22rem; }
.zd-admin-email-list summary strong,
.zd-admin-email-list summary small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zd-admin-email-list summary strong { font-size: .73rem; }
.zd-admin-email-list summary small { color: var(--zd-ui-muted); font-size: .59rem; }
.zd-admin-email-list summary > svg { width: .9rem; color: var(--zd-ui-muted); transition: transform 150ms ease; }
.zd-admin-email-list details[open] summary > svg { transform: rotate(90deg); }
.zd-admin-email-list details > p { margin: 0; border-top: 1px solid var(--zd-ui-line); padding: .8rem; font-size: .7rem; line-height: 1.65; white-space: pre-wrap; }
.zd-admin-email-list details > footer { display: flex; flex-wrap: wrap; gap: .35rem; padding: 0 .8rem .8rem; }

@media (max-width: 760px) {
  .zd-dashboard-hero { align-items: stretch; flex-direction: column; gap: 1rem; }
  .zd-dashboard-hero form { min-width: 0; width: 100%; }
  .zd-dashboard-stats { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .zd-dashboard-stats article { padding: .75rem; }
  .zd-dashboard-stats strong { font-size: 1.35rem; }
  .zd-module-stat-grid, .zd-word-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .zd-saved-words header,.zd-activity-card__heading { align-items: stretch; flex-direction: column; }
  .zd-word-actions { justify-content:stretch; }
  .zd-word-actions > * { flex:1 1 10rem; justify-content:center; }
  .zd-match-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .zd-match-hero { align-items:stretch; flex-direction:column; gap:1rem; }
  .zd-match-live-stats { width:100%; }
  .zd-match-settings { align-items:stretch; flex-wrap:wrap; }
  .zd-match-settings > button { flex:1 1 100%; }
  .zd-match-board { grid-template-columns:1fr; }
  .zd-match-column { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .zd-match-column h2 { grid-column:1/-1; }
  .zd-match-column article { min-height:8.5rem; }
  .zd-match-summary { flex-wrap:wrap; }
  .zd-request-list article { grid-template-columns: 1fr; }
  .zd-admin-user-modal { padding: 0; }
  .zd-admin-user-modal > .zd-admin-user-workspace { width: 100%; height: 100svh; max-height: none; border: 0; border-radius: 0; }
  .zd-admin-user-workspace__header { min-height: 4.8rem; padding: .75rem; }
  .zd-admin-user-identity > strong { width: 2.7rem; height: 2.7rem; }
  .zd-admin-user-tabs { padding-inline: .45rem; }
  .zd-admin-user-tabs button { flex: 1; justify-content: center; padding-inline: .4rem; }
  .zd-admin-user-workspace__content { padding: .65rem; }
  .zd-admin-account-summary { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .zd-admin-user-columns,.zd-admin-email-workspace { grid-template-columns: 1fr; }
  .zd-admin-user-modal dl.zd-admin-profile-grid,.zd-admin-user-progress { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .zd-admin-control-card { grid-template-columns: 1fr; }
  .zd-admin-control-card__title,.zd-admin-password-grid { grid-column: 1; }
  .zd-admin-password-grid { grid-template-columns: 1fr; }
  .zd-admin-email-composer textarea { min-height: 11rem; }
  .zd-onboarding-main { padding-top: calc(var(--zd-exam-header-height) + 1rem); }
}

@media (max-width: 420px) {
  .zd-dashboard-stats { grid-template-columns: 1fr; }
  .zd-module-stat-grid, .zd-word-grid { grid-template-columns: 1fr; }
  .zd-match-column { grid-template-columns:1fr; }
  .zd-admin-user-modal dl.zd-admin-profile-grid,.zd-admin-user-progress,.zd-admin-control-grid { grid-template-columns: 1fr; }
  .zd-admin-account-summary article { padding: .65rem; }
}

.zd-catalog-page .zd-exam-header {
  position: fixed;
}

.zd-library-context {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 var(--zd-page-gutter);
  color: var(--zd-ui-muted);
  font-family: "Manrope", sans-serif;
}

.zd-library-context > span {
  color: var(--zd-ui-text);
  font-size: 0.92rem;
  font-weight: 600;
}

.zd-library-context > p {
  margin: 0;
  font-size: 0.78rem;
}

.zd-catalog-main {
  width: 100%;
  min-height: calc(100vh - var(--zd-exam-footer-height));
  padding: calc(var(--zd-exam-header-height) + clamp(1.5rem, 3.4vw, 3.5rem)) var(--zd-page-gutter) clamp(3rem, 6vw, 6rem);
}

.zd-catalog-hero {
  position: relative;
  min-height: 11.5rem;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  overflow: hidden;
  border: 1px solid var(--zd-ui-line);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.88);
  padding: clamp(1.25rem, 3vw, 2.25rem);
  box-shadow: 0 10px 30px rgba(38, 50, 43, 0.04);
}

.zd-catalog-hero::after {
  position: absolute;
  top: -7rem;
  right: -4rem;
  width: 22rem;
  height: 22rem;
  border-radius: 50%;
  background: rgba(38, 114, 87, 0.08);
  content: "";
  pointer-events: none;
}

.zd-catalog-hero.is-blue::after {
  background: rgba(55, 112, 166, 0.09);
}

.zd-catalog-hero.is-yellow::after,
.zd-catalog-hero--home::after {
  background: rgba(245, 197, 24, 0.15);
}

.zd-catalog-hero.is-rose::after {
  background: rgba(169, 85, 91, 0.09);
}

.zd-catalog-hero > div {
  position: relative;
  z-index: 1;
}

.zd-catalog-eyebrow {
  margin: 0 0 0.8rem;
  color: var(--zd-ui-green);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.zd-catalog-hero h1 {
  max-width: 18ch;
  margin: 0;
  color: var(--zd-ui-text);
  font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(2rem, 4vw, 3.6rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.05;
}

.zd-catalog-hero > div > p:last-child {
  max-width: 45rem;
  margin: 1rem 0 0;
  color: var(--zd-ui-muted);
  font-family: "Manrope", sans-serif;
  font-size: clamp(0.96rem, 1.3vw, 1.08rem);
  line-height: 1.65;
}

.zd-catalog-summary {
  min-width: 8.25rem;
  display: grid;
  place-items: center;
  align-self: center;
  border: 1px solid var(--zd-ui-line);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.76);
  padding: 1.25rem;
  text-align: center;
}

.zd-catalog-summary strong {
  color: var(--zd-ui-text);
  font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
  font-size: 2.8rem;
  font-weight: 500;
  line-height: 1;
}

.zd-catalog-summary span {
  margin-top: 0.35rem;
  color: var(--zd-ui-muted);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.zd-module-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.zd-module-card {
  --card-accent: #267257;
  min-height: 14.5rem;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--zd-ui-line);
  border-radius: 0.9rem;
  background: rgba(255, 255, 255, 0.9);
  padding: 1.2rem;
  color: var(--zd-ui-text);
  text-decoration: none;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.zd-module-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.zd-module-card__icon,
.zd-exercise-card__icon {
  width: 2rem;
  height: 2rem;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 0.65rem;
  background: color-mix(in srgb, var(--card-accent), white 91%);
  color: var(--card-accent);
}

.zd-module-card__icon svg,
.zd-exercise-card__icon svg {
  width: 1rem;
  height: 1rem;
  stroke-width: 1.8;
}

.zd-module-card.is-blue,
.zd-exercise-card.is-blue {
  --card-accent: #3770a6;
}

.zd-module-card.is-yellow,
.zd-exercise-card.is-yellow {
  --card-accent: #a87900;
}

.zd-module-card.is-rose,
.zd-exercise-card.is-rose {
  --card-accent: #a9555b;
}

.zd-module-card:hover,
.zd-module-card:focus-visible,
.zd-exercise-card:hover,
.zd-exercise-card:focus-within {
  border-color: color-mix(in srgb, var(--card-accent), transparent 56%);
  box-shadow: 0 18px 40px rgba(31, 48, 38, 0.09);
  transform: translateY(-3px);
}

.zd-module-card:focus-visible,
.zd-exercise-card__link:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--card-accent), transparent 78%);
  outline-offset: 3px;
}

.zd-module-card__number,
.zd-exercise-card__number {
  color: var(--card-accent);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.13em;
}

.zd-module-card__level {
  width: fit-content;
  margin-top: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--card-accent), white 90%);
  padding: 0.4rem 0.65rem;
  color: var(--card-accent);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.1em;
}

.zd-module-card h2 {
  margin: 1.25rem 0 0;
  font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(1.45rem, 2.2vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.035em;
}

.zd-module-card p {
  margin: 0.7rem 0 1.5rem;
  color: var(--zd-ui-muted);
  font-size: 0.82rem;
  line-height: 1.6;
}

.zd-module-card__action,
.zd-exercise-card__action {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: auto;
  color: var(--card-accent);
  font-size: 0.78rem;
  font-weight: 600;
}

.zd-module-card__action svg,
.zd-exercise-card__action svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  transition: transform 160ms ease;
}

.zd-module-card:hover .zd-module-card__action svg,
.zd-exercise-card:hover .zd-exercise-card__action svg {
  transform: translateX(3px);
}

.zd-catalog-toolbar {
  min-height: 5.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
  border-block: 1px solid var(--zd-ui-line);
}

.zd-listening-source-tabs {
  width: fit-content;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.3rem;
  margin: 1rem auto 0;
  border: 1px solid var(--zd-ui-line);
  border-radius: 999px;
  background: rgba(232, 238, 242, 0.78);
  padding: 0.3rem;
  box-shadow: 0 8px 24px rgba(31, 48, 56, 0.05);
}

.zd-listening-source-tabs button {
  min-width: 10.5rem;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  padding: 0.65rem 0.9rem;
  color: var(--zd-ui-muted);
  font: inherit;
  text-align: start;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.zd-listening-source-tabs button > svg {
  width: 1.15rem;
  height: 1.15rem;
  flex: 0 0 auto;
  stroke-width: 1.9;
}

.zd-listening-source-tabs button > span,
.zd-listening-source-tabs button strong,
.zd-listening-source-tabs button small {
  display: block;
}

.zd-listening-source-tabs button strong {
  color: inherit;
  font-size: 0.78rem;
  font-weight: 700;
}

.zd-listening-source-tabs button small {
  margin-top: 0.08rem;
  font-size: 0.58rem;
  opacity: 0.78;
}

.zd-listening-source-tabs button.is-active {
  background: #fff;
  color: #3770a6;
  box-shadow: 0 4px 14px rgba(41, 72, 96, 0.12);
}

.zd-preview-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  border: 1px solid #ead99a;
  border-radius: 0.9rem;
  background: #fff9dc;
  padding: 0.85rem 1rem;
  color: var(--zd-ui-text);
}

.zd-preview-notice > div {
  display: grid;
  gap: 0.18rem;
}

.zd-preview-notice strong {
  font-size: 0.82rem;
}

.zd-preview-notice span {
  color: var(--zd-ui-muted);
  font-size: 0.74rem;
  line-height: 1.45;
}

.zd-preview-notice__actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex: 0 0 auto;
}

.zd-preview-notice__actions a {
  min-height: 2.3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--zd-ui-line);
  border-radius: 999px;
  background: #fff;
  padding: 0 0.85rem;
  color: var(--zd-ui-text);
  font-size: 0.72rem;
  font-weight: 600;
  text-decoration: none;
}

.zd-preview-notice__actions a.is-primary {
  border-color: var(--zd-ui-green);
  background: var(--zd-ui-green);
  color: #fff;
}

@media (max-width: 700px) {
  .zd-preview-notice {
    align-items: stretch;
    flex-direction: column;
  }

  .zd-preview-notice__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

.zd-catalog-search {
  width: min(100%, 32rem);
  display: flex;
  align-items: center;
  gap: 0.65rem;
  border: 1px solid var(--zd-ui-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.84);
  padding: 0 1rem;
}

.zd-catalog-search:focus-within {
  border-color: rgba(38, 114, 87, 0.45);
  box-shadow: 0 0 0 4px rgba(38, 114, 87, 0.08);
}

.zd-catalog-search svg {
  width: 1.15rem;
  height: 1.15rem;
  flex: 0 0 auto;
  fill: none;
  stroke: var(--zd-ui-muted);
  stroke-linecap: round;
  stroke-width: 1.8;
}

.zd-catalog-search input {
  width: 100%;
  min-height: 2.9rem;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--zd-ui-text);
  font: inherit;
  font-size: 0.88rem;
}

.zd-catalog-result-count {
  flex: 0 0 auto;
  color: var(--zd-ui-muted);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.zd-catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: 0.75rem;
  margin-top: 1rem;
}

.zd-catalog-part-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
  margin: 1rem 0;
  border-bottom: 1px solid var(--zd-ui-line);
  padding-bottom: 0.8rem;
}

.zd-catalog-part-tabs.has-live-room {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.zd-catalog-part-tabs.has-reading-parts {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.zd-catalog-part-tabs button {
  min-height: 3.2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border: 1px solid var(--zd-ui-line);
  border-radius: 0.8rem;
  background: rgba(255, 255, 255, 0.84);
  padding: 0 0.9rem;
  color: var(--zd-ui-muted);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 650;
  cursor: pointer;
}

.zd-catalog-part-tabs button strong {
  min-width: 1.85rem;
  border-radius: 999px;
  background: var(--zd-ui-soft);
  padding: 0.32rem 0.45rem;
  color: var(--zd-ui-muted);
  font-size: 0.64rem;
  text-align: center;
}

.zd-catalog-part-tabs button.is-live-room span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.zd-catalog-part-tabs button.is-live-room span svg,
.zd-catalog-part-tabs button.is-live-room strong svg {
  width: 1rem;
  height: 1rem;
}

.zd-catalog-part-tabs button.is-live-room {
  color: var(--zd-ui-green);
}

@media (max-width: 700px) {
  .zd-catalog-part-tabs.has-live-room {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .zd-catalog-part-tabs.has-reading-parts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.zd-catalog-part-tabs button:hover {
  border-color: rgba(38, 114, 87, 0.35);
}

.zd-catalog-part-tabs button.is-active {
  border-color: var(--zd-ui-green);
  background: var(--zd-ui-green-soft);
  color: var(--zd-ui-green);
}

.zd-catalog-part-tabs button.is-active strong {
  background: var(--zd-ui-green);
  color: white;
}

.zd-room-directory {
  margin-top: 0.75rem;
}

.zd-room-directory__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.95rem 0;
}

.zd-room-directory__head h2 {
  margin: 0.18rem 0 0;
  color: var(--zd-ui-text);
  font-size: clamp(1.35rem, 2.4vw, 1.8rem);
  letter-spacing: -0.035em;
}

.zd-room-directory__head p:last-child {
  margin: 0.25rem 0 0;
  color: var(--zd-ui-muted);
  font-size: 0.78rem;
}

.zd-room-key-form {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  border: 1px solid var(--zd-ui-line);
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.82);
  padding: 0.3rem;
}

.zd-room-key-form > svg {
  width: 1rem;
  height: 1rem;
  margin-left: 0.4rem;
  color: var(--zd-ui-green);
}

.zd-room-key-form input {
  width: 7rem;
  border: 0;
  background: transparent;
  color: var(--zd-ui-text);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  outline: none;
  text-transform: uppercase;
}

.zd-room-key-form button,
.zd-room-create-inline button {
  min-height: 2.25rem;
  border: 1px solid var(--zd-ui-line);
  border-radius: 0.58rem;
  background: white;
  color: var(--zd-ui-text);
  padding: 0 0.72rem;
  font: inherit;
  font-size: 0.68rem;
  font-weight: 700;
  cursor: pointer;
}

.zd-room-create-inline {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) auto;
  align-items: end;
  gap: 0.65rem;
  margin-bottom: 0.8rem;
  border: 1px solid rgba(38, 114, 87, 0.22);
  border-radius: 0.85rem;
  background: rgba(237, 248, 242, 0.7);
  padding: 0.8rem;
}

.zd-room-create-inline label > span {
  display: block;
  margin-bottom: 0.3rem;
  color: var(--zd-ui-muted);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.zd-room-create-inline select,
.zd-room-create-inline input {
  width: 100%;
  min-height: 2.55rem;
  border: 1px solid var(--zd-ui-line);
  border-radius: 0.62rem;
  background: white;
  color: var(--zd-ui-text);
  padding: 0 0.68rem;
  font: inherit;
  font-size: 0.72rem;
  outline: none;
}

.zd-room-create-inline select:focus,
.zd-room-create-inline input:focus {
  border-color: var(--zd-ui-green);
  box-shadow: 0 0 0 3px rgba(38, 114, 87, 0.1);
}

.zd-room-create-inline__actions {
  display: flex;
  gap: 0.4rem;
}

.zd-room-create-inline button.is-primary {
  border-color: var(--zd-ui-green);
  background: var(--zd-ui-green);
  color: white;
}

.zd-room-directory__error {
  margin: 0 0 0.75rem;
  border-radius: 0.65rem;
  background: rgba(194, 65, 54, 0.08);
  padding: 0.65rem 0.75rem;
  color: #a23a31;
  font-size: 0.72rem;
}

.zd-room-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13.5rem), 1fr));
  gap: 0.65rem;
}

.zd-room-card,
.zd-room-empty-card {
  min-height: 9.5rem;
  display: flex;
  min-width: 0;
  flex-direction: column;
  border: 1px solid var(--zd-ui-line);
  border-radius: 0.85rem;
  background: rgba(255, 255, 255, 0.84);
  padding: 0.8rem;
  color: var(--zd-ui-text);
  text-align: left;
  text-decoration: none;
}

button.zd-room-card {
  font: inherit;
  cursor: pointer;
}

.zd-room-card:hover {
  border-color: rgba(38, 114, 87, 0.46);
  background: white;
}

.zd-room-card.is-create {
  align-items: center;
  justify-content: center;
  border-style: dashed;
  background: rgba(237, 248, 242, 0.58);
  color: var(--zd-ui-green);
  text-align: center;
}

.zd-room-card__plus {
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  margin-bottom: 0.55rem;
  border-radius: 50%;
  background: var(--zd-ui-green);
  color: white;
}

.zd-room-card__plus svg {
  width: 1.05rem;
  height: 1.05rem;
}

.zd-room-card > strong {
  margin-top: 0.75rem;
  overflow: hidden;
  font-size: 0.86rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zd-room-card.is-create > strong {
  margin-top: 0;
}

.zd-room-card > small {
  margin-top: 0.25rem;
  overflow: hidden;
  color: var(--zd-ui-muted);
  font-size: 0.68rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zd-room-card__status {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 0.32rem;
  border-radius: 999px;
  background: var(--zd-ui-green-soft);
  padding: 0.24rem 0.44rem;
  color: var(--zd-ui-green);
  font-size: 0.58rem;
  font-weight: 750;
  text-transform: uppercase;
}

.zd-room-card__status i {
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 50%;
  background: #22a06b;
}

.zd-room-card__meta {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: auto;
  color: var(--zd-ui-muted);
  font-size: 0.62rem;
  font-weight: 650;
}

.zd-room-card__meta > span {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.zd-room-card__meta > span:last-child {
  margin-left: auto;
  color: var(--zd-ui-green);
}

.zd-room-card__meta svg {
  width: 0.78rem;
  height: 0.78rem;
}

.zd-room-card.is-loading {
  border-color: transparent;
  background: linear-gradient(90deg, #f5f3ed, #fff, #f5f3ed);
  background-size: 200% 100%;
  animation: zd-catalog-shimmer 1.2s infinite;
}

.zd-room-empty-card {
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  color: var(--zd-ui-muted);
  text-align: center;
}

.zd-room-empty-card svg {
  width: 1.5rem;
  height: 1.5rem;
  margin-bottom: 0.35rem;
  color: var(--zd-ui-green);
}

.zd-room-empty-card strong {
  color: var(--zd-ui-text);
  font-size: 0.78rem;
}

.zd-room-empty-card span {
  font-size: 0.66rem;
}

@media (max-width: 700px) {
  .zd-room-directory__head {
    align-items: stretch;
    flex-direction: column;
  }

  .zd-room-key-form input {
    width: auto;
    flex: 1;
  }

  .zd-room-create-inline {
    grid-template-columns: 1fr;
  }

  .zd-room-create-inline__actions button {
    flex: 1;
  }

  .zd-room-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 430px) {
  .zd-room-card-grid {
    grid-template-columns: 1fr;
  }
}

.zd-live-room-entry {
  min-height: 4.5rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.9rem;
  margin: 0 0 1rem;
  border: 1px solid rgba(38, 114, 87, 0.24);
  border-radius: 0.9rem;
  background: linear-gradient(135deg, rgba(234, 246, 240, 0.96), rgba(255, 255, 255, 0.96));
  padding: 0.8rem 1rem;
  color: var(--zd-ui-text);
  text-decoration: none;
  transition: border-color 160ms ease, transform 160ms ease;
}

.zd-live-room-entry:hover {
  border-color: var(--zd-ui-green);
  transform: translateY(-1px);
}

.zd-live-room-entry__icon {
  width: 2.7rem;
  height: 2.7rem;
  display: grid;
  place-items: center;
  border-radius: 0.75rem;
  background: var(--zd-ui-green);
  color: #fff;
}

.zd-live-room-entry__icon svg,
.zd-live-room-entry > svg {
  width: 1.2rem;
  height: 1.2rem;
}

.zd-live-room-entry > span:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 0.2rem;
}

.zd-live-room-entry strong {
  font-size: 0.9rem;
}

.zd-live-room-entry small {
  color: var(--zd-ui-muted);
  font-size: 0.72rem;
  line-height: 1.45;
}

.zd-live-room-entry.is-locked {
  border-color: var(--zd-ui-line);
  background: var(--zd-ui-soft);
}

.zd-live-room-entry.is-locked .zd-live-room-entry__icon {
  background: #849089;
}

.zd-exercise-card {
  --card-accent: #267257;
  min-width: 0;
  min-height: 13.5rem;
  overflow: hidden;
  border: 1px solid var(--zd-ui-line);
  border-radius: 0.85rem;
  background: rgba(255, 255, 255, 0.94);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.zd-exercise-card__link {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 0;
  background: transparent;
  padding: 1rem;
  color: inherit;
  font: inherit;
  text-align: start;
  text-decoration: none;
}

.zd-exercise-card__link:is(button) {
  cursor: pointer;
}

.zd-exercise-card.is-locked {
  background: #f4f5f2;
  border-color: #d9ded9;
}

.zd-exercise-card.is-locked:hover,
.zd-exercise-card.is-locked:focus-within {
  border-color: #aeb8b0;
  box-shadow: 0 14px 30px rgba(31, 48, 38, 0.06);
  transform: translateY(-2px);
}

.zd-exercise-card.is-locked .zd-exercise-card__icon,
.zd-exercise-card.is-locked .zd-exercise-card__badge {
  background: #e7ebe7;
  color: #68746d;
}

.zd-exercise-card.is-locked .zd-exercise-card__body {
  opacity: 0.72;
}

.zd-exercise-card__locked-copy {
  margin-top: auto;
  color: var(--zd-ui-muted);
  font-size: 0.68rem;
  line-height: 1.45;
}

.zd-exercise-card.is-locked .zd-exercise-card__action {
  color: #536159;
}

.zd-exercise-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.zd-exercise-card__badge {
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--card-accent), white 91%);
  padding: 0.4rem 0.65rem;
  color: var(--card-accent);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.zd-exercise-card__body h2 {
  display: -webkit-box;
  overflow: hidden;
  margin: 0.85rem 0 0;
  font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
  font-size: 1.08rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.zd-exercise-card__body p {
  display: -webkit-box;
  overflow: hidden;
  margin: 0.45rem 0 0.8rem;
  color: var(--zd-ui-muted);
  font-size: 0.76rem;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.zd-exercise-card__progress {
  margin-top: auto;
}

.zd-exercise-card__progress > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  color: var(--zd-ui-muted);
  font-size: 0.65rem;
}

.zd-exercise-card__progress strong {
  color: var(--card-accent);
  font-size: 0.72rem;
}

.zd-exercise-card__track {
  height: 0.3rem;
  display: block;
  overflow: hidden;
  margin-top: 0.35rem;
  border-radius: 999px;
  background: var(--zd-ui-soft);
}

.zd-exercise-card__track i {
  height: 100%;
  display: block;
  border-radius: inherit;
  background: var(--card-accent);
}

.zd-exercise-card__result {
  min-height: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.55rem;
  color: var(--zd-ui-muted);
  font-size: 0.62rem;
}

.zd-exercise-card__result > span {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.zd-exercise-card__result svg {
  width: 0.78rem;
  height: 0.78rem;
  flex: 0 0 auto;
}

.zd-exercise-card__result strong {
  color: var(--zd-ui-text);
  font-weight: 600;
}

.zd-exercise-card__result time {
  flex: 0 0 auto;
}

.zd-exercise-card .zd-exercise-card__action {
  margin-top: 0.75rem;
  border-top: 1px solid var(--zd-ui-line);
  padding-top: 0.7rem;
  font-size: 0.7rem;
}

.zd-exercise-skeleton {
  min-height: 13.5rem;
  border: 1px solid var(--zd-ui-line);
  border-radius: 1.05rem;
  background: linear-gradient(100deg, #f4f6f3 20%, #fff 38%, #f4f6f3 56%);
  background-size: 220% 100%;
  animation: zd-catalog-shimmer 1.2s ease-in-out infinite;
}

@keyframes zd-catalog-shimmer {
  to { background-position-x: -220%; }
}

.zd-catalog-empty {
  min-height: 18rem;
  display: grid;
  place-content: center;
  justify-items: center;
  margin-top: 1rem;
  border: 1px dashed #cfd8d1;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.62);
  padding: 2rem;
  text-align: center;
}

.zd-catalog-empty strong {
  font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
  font-size: 1.65rem;
  font-weight: 500;
}

.zd-catalog-empty p {
  margin: 0.55rem 0 0;
  color: var(--zd-ui-muted);
}

.zd-catalog-empty button {
  margin-top: 1rem;
  border: 0;
  border-radius: 999px;
  background: var(--zd-ui-green);
  padding: 0.75rem 1rem;
  color: #fff;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}

.zd-catalog-footer {
  min-height: var(--zd-exam-footer-height);
  display: flex;
  align-items: center;
  gap: 1rem;
  border-top: 1px solid var(--zd-ui-line);
  background: rgba(255, 255, 255, 0.82);
  padding: 0 var(--zd-page-gutter);
  color: var(--zd-ui-muted);
  font-size: 0.72rem;
}

.zd-catalog-footer img {
  width: auto;
  height: 2.2rem;
}

.zd-catalog-footer span {
  flex: 1;
}

.zd-catalog-footer a {
  color: var(--zd-ui-text);
  font-weight: 600;
  text-decoration: none;
}

.zd-account-required {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: grid;
  place-items: center;
  overflow-y: auto;
  background: rgba(23, 33, 27, 0.52);
  padding: 1rem;
  backdrop-filter: blur(7px);
}

.zd-account-required__dialog {
  position: relative;
  width: min(31rem, 100%);
  border: 1px solid var(--zd-ui-line);
  border-radius: 1.25rem;
  background: #fff;
  padding: clamp(1.4rem, 5vw, 2.5rem);
  box-shadow: 0 30px 90px rgba(16, 27, 20, 0.28);
}

.zd-account-required__close {
  position: absolute;
  inset-block-start: 0.8rem;
  inset-inline-end: 0.8rem;
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: #f1f4f1;
  color: var(--zd-ui-text);
  cursor: pointer;
}

.zd-account-required__close svg {
  width: 1.15rem;
  height: 1.15rem;
}

.zd-account-required__icon {
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  border-radius: 0.9rem;
  background: var(--zd-ui-green-soft);
  color: var(--zd-ui-green);
}

.zd-account-required__icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.zd-account-required__eyebrow {
  margin: 1.1rem 0 0;
  color: var(--zd-ui-green);
  font-size: 0.67rem;
  font-weight: 750;
  letter-spacing: 0.16em;
}

.zd-account-required__dialog[dir="rtl"] {
  text-align: right;
}

.zd-account-required__dialog[dir="rtl"] .zd-account-required__eyebrow {
  letter-spacing: 0;
}

.zd-account-required__dialog h2 {
  margin: 0.45rem 0 0;
  font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  font-weight: 550;
  letter-spacing: -0.045em;
  line-height: 1.08;
}

.zd-account-required__dialog > p:not(.zd-account-required__eyebrow) {
  margin: 1rem 0 0;
  color: var(--zd-ui-muted);
  font-size: 0.86rem;
  line-height: 1.65;
}

.zd-account-required__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.4rem;
}

.zd-account-required__actions a {
  min-height: 2.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--zd-ui-line);
  border-radius: 999px;
  background: white;
  padding: 0 1rem;
  color: var(--zd-ui-text);
  font-size: 0.77rem;
  font-weight: 700;
  text-decoration: none;
}

.zd-account-required__actions a.is-primary {
  border-color: var(--zd-ui-green);
  background: var(--zd-ui-green);
  color: white;
}

.zd-version-picker {
  position: fixed;
  inset: 0;
  z-index: 100001;
  display: grid;
  place-items: center;
  overflow-y: auto;
  background: rgba(23, 33, 27, 0.54);
  padding: 1rem;
  backdrop-filter: blur(7px);
}

.zd-version-picker__dialog {
  width: min(40rem, 100%);
  overflow: hidden;
  border: 1px solid var(--zd-ui-line);
  border-radius: 1.25rem;
  background: #fff;
  box-shadow: 0 30px 90px rgba(16, 27, 20, 0.28);
}

.zd-version-picker__dialog > header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.85rem;
  border-bottom: 1px solid var(--zd-ui-line);
  padding: 1.25rem;
}

.zd-version-picker__icon,
.zd-version-picker__dialog > header > button {
  width: 2.6rem;
  height: 2.6rem;
  display: grid;
  place-items: center;
  border-radius: 0.8rem;
}

.zd-version-picker__icon {
  background: var(--zd-ui-green-soft);
  color: var(--zd-ui-green);
}

.zd-version-picker__icon svg,
.zd-version-picker__dialog > header > button svg {
  width: 1.15rem;
  height: 1.15rem;
}

.zd-version-picker__dialog > header p,
.zd-version-picker__dialog > header h2,
.zd-version-picker__dialog > header span {
  margin: 0;
}

.zd-version-picker__dialog > header p {
  color: var(--zd-ui-green);
  font-size: 0.65rem;
  font-weight: 750;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.zd-version-picker__dialog > header h2 {
  margin-top: 0.2rem;
  font-size: clamp(1.25rem, 4vw, 1.75rem);
  line-height: 1.2;
}

.zd-version-picker__dialog > header div > span {
  display: block;
  margin-top: 0.35rem;
  color: var(--zd-ui-muted);
  font-size: 0.78rem;
}

.zd-version-picker__dialog > header > button {
  border: 0;
  background: var(--zd-ui-soft);
  color: var(--zd-ui-text);
  cursor: pointer;
}

.zd-version-picker__list {
  display: grid;
  gap: 0.65rem;
  padding: 1rem;
}

.zd-version-picker__list > button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.8rem;
  border: 1px solid var(--zd-ui-line);
  border-radius: 0.9rem;
  background: #fff;
  padding: 0.9rem;
  color: var(--zd-ui-text);
  text-align: start;
  cursor: pointer;
}

.zd-version-picker__list > button:hover,
.zd-version-picker__list > button:focus-visible {
  border-color: var(--zd-ui-green);
  background: #f7fbf8;
  outline: none;
}

.zd-version-picker__number {
  width: 2.35rem;
  height: 2.35rem;
  display: grid;
  place-items: center;
  border-radius: 0.7rem;
  background: var(--zd-ui-green-soft);
  color: var(--zd-ui-green);
  font-size: 0.72rem;
  font-weight: 800;
}

.zd-version-picker__copy,
.zd-version-picker__status {
  min-width: 0;
  display: grid;
  gap: 0.25rem;
}

.zd-version-picker__copy strong {
  font-size: 0.9rem;
}

.zd-version-picker__copy small,
.zd-version-picker__status small {
  overflow: hidden;
  color: var(--zd-ui-muted);
  font-size: 0.67rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zd-version-picker__copy i {
  height: 0.25rem;
  overflow: hidden;
  border-radius: 999px;
  background: var(--zd-ui-soft);
}

.zd-version-picker__copy i b {
  height: 100%;
  display: block;
  border-radius: inherit;
  background: var(--zd-ui-green);
}

.zd-version-picker__status {
  justify-items: end;
}

.zd-version-picker__status > strong {
  color: var(--zd-ui-green);
  font-size: 0.82rem;
}

.zd-version-picker__list > button > svg {
  width: 1rem;
  height: 1rem;
}

@media (max-width: 1100px) {
  .zd-module-grid,
  .zd-catalog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .zd-module-card {
    min-height: 14rem;
  }
}

@media (max-width: 760px) {
  .zd-library-context > p {
    display: none;
  }

  .zd-catalog-main {
    padding-top: calc(var(--zd-exam-header-height) + 1rem);
  }

  .zd-catalog-hero {
    min-height: 8.75rem;
    align-items: center;
    gap: 0.8rem;
    padding: 1rem;
  }

  .zd-catalog-hero h1 {
    font-size: clamp(1.7rem, 8vw, 2.35rem);
  }

  .zd-catalog-eyebrow {
    margin-bottom: 0.4rem;
    font-size: 0.62rem;
  }

  .zd-catalog-hero > div > p:last-child {
    margin-top: 0.55rem;
    font-size: 0.82rem;
    line-height: 1.45;
  }

  .zd-catalog-summary {
    min-width: 4.5rem;
    padding: 0.6rem;
  }

  .zd-catalog-summary strong {
    font-size: 1.7rem;
  }

  .zd-catalog-summary span {
    font-size: 0.57rem;
  }

  .zd-catalog-toolbar {
    min-height: auto;
    align-items: stretch;
    padding-block: 0.8rem;
  }

  .zd-catalog-search {
    width: 100%;
  }

  .zd-catalog-result-count {
    display: none;
  }

  .zd-module-grid,
  .zd-catalog-grid {
    grid-template-columns: 1fr;
  }

  .zd-module-card {
    min-height: 13rem;
  }

  .zd-exercise-card,
  .zd-exercise-skeleton {
    min-height: 13rem;
  }
}

@media (max-width: 480px) {
  .zd-catalog-hero {
    display: flex;
  }

  .zd-catalog-summary {
    width: auto;
    min-width: 4.25rem;
    margin-top: 0;
    flex: 0 0 auto;
  }

  .zd-catalog-footer span {
    display: none;
  }

  .zd-catalog-part-tabs {
    gap: 0.35rem;
  }

  .zd-catalog-part-tabs button {
    min-height: 2.85rem;
    justify-content: center;
    padding: 0 0.6rem;
  }

  .zd-catalog-part-tabs button strong {
    display: none;
  }

  .zd-catalog-part-tabs.has-reading-parts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .zd-listening-source-tabs {
    width: 100%;
  }

  .zd-listening-source-tabs button {
    min-width: 0;
    justify-content: center;
    padding-inline: 0.6rem;
  }

  .zd-account-required__actions {
    display: grid;
  }

  .zd-version-picker {
    align-items: end;
    padding: 0;
  }

  .zd-version-picker__dialog {
    border-radius: 1.25rem 1.25rem 0 0;
  }

  .zd-version-picker__dialog > header {
    padding: 1rem;
  }

  .zd-version-picker__list > button {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .zd-version-picker__status {
    grid-column: 2 / 3;
    justify-items: start;
  }

  .zd-version-picker__list > button > svg {
    grid-column: 3;
    grid-row: 1 / 3;
  }
}

@media (prefers-reduced-motion: reduce) {
  .zd-module-card,
  .zd-exercise-card,
  .zd-module-card__action svg,
  .zd-exercise-card__action svg {
    transition: none;
  }

  .zd-exercise-skeleton {
    animation: none;
  }
}
.zd-chunk-loader {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  background: #f8faf8;
}

.zd-chunk-loader span {
  width: 2.5rem;
  height: 2.5rem;
  border: 3px solid rgba(59, 128, 102, 0.18);
  border-top-color: #3b8066;
  border-radius: 50%;
  animation: zd-chunk-spin 700ms linear infinite;
}

@keyframes zd-chunk-spin {
  to { transform: rotate(360deg); }
}

.zd-book-manager { max-width: 1100px; color: var(--ink, #20363d); }
.zd-book-intro { margin-top: 24px; }
.zd-book-intro h2 { font-size: 28px; margin: 8px 0 12px; }
.zd-book-intro > p:last-child, .zd-book-help { color: #687674; line-height: 1.55; }
.zd-book-form, .zd-book-job { background: #fff; border: 1px solid #d9e3dd; border-radius: 16px; padding: 24px; margin-top: 24px; }
.zd-book-controls { display: flex; flex-wrap: wrap; gap: 20px; }
.zd-book-controls label { display: grid; gap: 8px; font-weight: 600; }
.zd-book-controls select { border: 1px solid #c5d6ce; border-radius: 8px; padding: 10px 14px; min-height: 44px; background: #fff; color: inherit; }
.zd-book-help { font-size: 14px; margin: 14px 0; }
.zd-book-selection-bar { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; margin: 22px 0 14px; }
.zd-book-selection-bar > div { display: flex; gap: 8px; flex-wrap: wrap; }
.zd-book-selection-bar button { border: 1px solid #c5d6ce; border-radius: 8px; padding: 8px 12px; background: #f3f7f3; }
.zd-book-themes { display: grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap: 10px; max-height: 410px; overflow-y: auto; padding: 3px; }
.zd-book-theme { display: flex; align-items: flex-start; gap: 12px; padding: 14px; border: 1px solid #dde5df; border-radius: 10px; }
.zd-book-theme input { margin-top: 4px; accent-color: #36766d; width: 18px; height: 18px; flex-shrink: 0; }
.zd-book-theme span { display: grid; gap: 5px; }
.zd-book-theme small { color: #687674; font-size: 12px; line-height: 1.4; }
.zd-book-theme.is-unavailable { opacity: .6; }
.zd-book-generate, .zd-book-download { display: inline-block; border: 0; border-radius: 9px; background: #276a5d; color: #fff; padding: 12px 20px; font-weight: 600; margin-top: 18px; text-decoration: none; }
.zd-book-generate:disabled, .zd-book-form button:disabled { opacity: .55; cursor: default; }
.zd-book-warning { color: #865714; background: #fffae8; padding: 12px; border-radius: 8px; margin-top: 16px; }
.zd-book-job.is-ready { border-color: #82b6a2; }
.zd-book-job.is-failed { border-color: #cf9a93; }
.zd-book-job details { margin-top: 16px; }
.zd-book-job li { margin: 8px 0; }
@media(max-width:600px){.zd-admin-tabs{flex-wrap:wrap;row-gap:8px}.zd-book-form,.zd-book-job{padding:16px}.zd-book-controls label,.zd-book-controls select{width:100%}.zd-book-themes{grid-template-columns:1fr}}

/* Written exam simulation invitation. */
/* The member dashboard includes the existing practice library. */
.zd-dashboard-library { display: grid; gap: 1.25rem; scroll-margin-top: 10rem; min-width: 0; }
.zd-dashboard-library .zd-catalog-hero { margin: 0; }
.zd-dashboard-edit-profile { display: inline-flex; align-items: center; gap: .5rem; flex-shrink: 0; padding: .75rem 1rem; border: 1px solid var(--zd-ui-line); border-radius: .7rem; background: white; color: var(--zd-ui-green); text-decoration: none; font-weight: 700; }
.zd-dashboard-edit-profile svg { width: 1rem; height: 1rem; }
.zd-dashboard-account { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.5rem; color: var(--zd-ui-muted); font-size: .85rem; }
.zd-dashboard-account a { color: var(--zd-ui-green); }
.zd-dashboard-hero { flex-wrap: wrap; }
.zd-dashboard-library[dir=rtl] .zd-simulation-cta > span, [dir=rtl] .zd-dashboard-library .zd-simulation-cta > span { transform: scaleX(-1); }
@media (max-width: 700px) { .zd-dashboard-edit-profile { align-self: flex-start; } .zd-dashboard-account { align-items: flex-start; flex-direction: column; } }

/* One clear simulation card, after the rest of the dashboard. */
.zd-simulation-invite{display:flex;align-items:center;gap:24px;margin-block:32px 12px;padding:32px;border:1px solid #cbdcd1;border-inline-start:4px solid #176746;border-radius:18px;background:#fff;box-shadow:0 8px 30px #17674608;color:#1b3829}
.zd-simulation-invite__icon{display:grid;place-items:center;flex:0 0 56px;height:56px;border-radius:16px;background:#edf5ef;color:#176746}
.zd-simulation-invite__icon svg{width:28px;height:28px}
.zd-simulation-invite__copy{flex:1;min-width:0}
.zd-simulation-invite h2{font-size:clamp(22px,2.1vw,28px);line-height:1.35;margin:8px 0}
.zd-simulation-invite p:not(.zd-catalog-eyebrow){margin:0;color:#53665b;max-width:650px;line-height:1.65}
.zd-simulation-invite__facts{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:14px;color:#68766c;font-size:12px;font-weight:600}
.zd-simulation-cta{display:inline-flex;align-items:center;justify-content:center;gap:12px;flex-shrink:0;min-height:48px;padding:12px 20px;border-radius:10px;background:#176746;color:white!important;font-weight:700;text-decoration:none!important}
.zd-simulation-cta svg{width:18px;height:18px}
[dir=rtl] .zd-simulation-cta svg{transform:scaleX(-1)}
.zd-simulation-cta:hover{background:#125439}
.zd-simulation-cta:focus-visible{outline:3px solid #d8aa47;outline-offset:3px}
@media(max-width:800px){.zd-simulation-invite{flex-wrap:wrap;padding:24px;gap:18px;margin-block:24px 8px}.zd-simulation-invite__copy{flex-basis:calc(100% - 78px)}.zd-simulation-cta{width:100%}}
@media(max-width:420px){.zd-simulation-invite__icon{flex-basis:44px;height:44px;border-radius:12px}.zd-simulation-invite__copy{flex-basis:calc(100% - 62px)}.zd-simulation-invite h2{font-size:22px}.zd-simulation-invite__facts{gap:8px 14px}}

/* Saved simulation attempts belong to the account that opens the dashboard. */
.zd-dashboard-exams { min-width: 0; margin-top: 28px; padding: 28px; border: 1px solid var(--zd-ui-line,#e1e5df); border-radius: 18px; background: #fff; }
.zd-dashboard-exams > header { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 24px; }
.zd-dashboard-exams h2 { margin: 8px 0; font-size: clamp(24px,2.2vw,30px); line-height: 1.3; }
.zd-dashboard-exams > header p:not(.zd-account-kicker) { color: #64736a; font-size: 14px; }
.zd-dashboard-exams > header > svg { flex-shrink: 0; width: 28px; height: 28px; color: #3b8066; }
.zd-exam-history-scroll { max-width: 100%; overflow-x: auto; border: 1px solid #e7ece7; border-radius: 12px; }
.zd-exam-history-scroll:focus-visible { outline: 3px solid #b7d6c4; outline-offset: 3px; }
.zd-exam-history-table { width: 100%; min-width: 640px; border-collapse: collapse; text-align: start; font-size: 14px; }
.zd-exam-history-table th { padding: 14px 18px; background: #f5f8f4; color: #617068; font-size: 12px; font-weight: 650; text-align: start; }
.zd-exam-history-table td { padding: 18px; border-top: 1px solid #e7ece7; vertical-align: middle; text-align: start; }
.zd-exam-history-table time { white-space: nowrap; color: #53665b; }
.zd-exam-history-level { font-weight: 750; color: #203b2c; }
.zd-exam-history-status { display: inline-flex; padding: 5px 9px; border-radius: 999px; background: #f3f4f2; color: #5a6960; font-size: 12px; white-space: nowrap; }
.zd-exam-history-status.is-complete { background: #edf5ef; color: #176746; }
.zd-exam-history-status.is-running,.zd-exam-history-status.is-paused,.zd-exam-history-status.is-submitted,.zd-exam-history-status.is-assessment-pending { background: #fff7dc; color: #856420; }
.zd-exam-history-status.is-failed { background: #fff1f1; color: #9b3636; }
.zd-exam-history-score { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.zd-exam-history-score.is-passed { color: #176746; }
.zd-exam-history-score.is-below-threshold { color: #9b3636; }
.zd-exam-history-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.zd-exam-history-actions a { display: inline-flex; align-items: center; gap: 5px; color: #176746; font-weight: 650; text-decoration: none; white-space: nowrap; }
.zd-exam-history-actions a:hover { text-decoration: underline; }
.zd-exam-history-actions svg { width: 14px; height: 14px; }
.zd-exam-history-message { color: #64736a; font-size: 14px; padding: 14px 0; }
.zd-exam-history-message button { margin-top: 12px; border: 1px solid #cbdcd1; border-radius: 9px; background: #fff; color: #176746; padding: 9px 14px; cursor: pointer; }
@media(max-width:600px) { .zd-dashboard-exams { padding: 20px; margin-top: 24px; } .zd-dashboard-exams > header { margin-bottom: 20px; gap: 12px; } .zd-exam-history-table td,.zd-exam-history-table th { padding: 14px; } }

.zd-book-history-levels{display:flex;gap:8px;margin:18px 0}
.zd-book-history-levels button{border:1px solid #d7dfd5;border-radius:8px;background:#fff;color:#526159;padding:8px 20px;font-family:inherit;font-size:14px;font-weight:600;line-height:1.4;cursor:pointer}
.zd-book-history-levels button[aria-pressed=true]{border-color:#176746;background:#edf4e9;color:#176746}
.zd-book-history-levels button:focus-visible{outline:3px solid #edc43a;outline-offset:3px}
/* Admin book history owns its styles independently of the public preview page. */
.zd-books-admin .zd-books-type-bar{display:flex;gap:8px;flex-wrap:wrap;margin:24px 0 8px}
.zd-books-admin .zd-books-type-bar button{border:1px solid #d9e3dd;border-radius:9px;background:#fff;padding:11px 18px;font:inherit;cursor:pointer}
.zd-books-admin .zd-books-type-bar button[aria-pressed=true]{background:#176746;border-color:#176746;color:#fff}
.zd-books-admin .zd-book-history{margin:24px 0;padding:22px;background:#fff;border:1px solid #d9e3dd;border-radius:16px}
.zd-books-admin .zd-book-history-heading{display:flex;justify-content:space-between;align-items:center;gap:16px}
.zd-books-admin .zd-book-history h3{margin:0;font-size:19px;font-weight:650}
.zd-books-admin .zd-book-history-heading button{padding:9px 12px;border:1px solid #ccd8cc;border-radius:8px;background:#f8faf6;cursor:pointer;font:inherit}
.zd-books-admin .zd-book-history p{font-size:13px;color:#687674;line-height:1.6;margin-top:12px}
.zd-books-admin .zd-book-history .zd-admin-table-wrap{margin:0}
.zd-books-admin .zd-book-history td a{display:inline-block;white-space:nowrap;margin-inline-end:14px;color:#236951;font-weight:650}
.zd-books-admin .zd-book-history td time{white-space:nowrap}
@media(max-width:480px){.zd-books-admin .zd-book-history{padding:16px}.zd-books-admin .zd-books-type-bar button{padding:10px 13px}.zd-books-admin .zd-book-history-heading{align-items:flex-start}.zd-books-admin .zd-book-history h3{font-size:16px}}

.zd-version-picker__dialog[dir=rtl] .zd-version-picker__copy{text-align:right}.zd-version-picker__dialog[dir=rtl] .zd-version-picker__list>button>svg{transform:rotate(180deg)}.zd-version-picker__dialog[lang=ar]{font-family:"Noto Sans Arabic",Manrope,system-ui,sans-serif}.zd-version-picker__dialog[lang=ar] header>div>p{letter-spacing:0}

/* A card behind the theme for each additional available version. */
.zd-exercise-card.is-stacked {
  --stack-step: min(5px, calc(16px / var(--stack-layers)));
  --stack-depth: calc(var(--stack-layers) * var(--stack-step));
  --stack-direction: 1;
  position: relative;
  isolation: isolate;
  display: flex;
  overflow: visible;
  border: 0;
  padding-block-start: var(--stack-depth);
  padding-inline-end: var(--stack-depth);
  background: transparent;
}
[dir="rtl"] .zd-exercise-card.is-stacked { --stack-direction: -1; }
.zd-exercise-card__stack {
  position: absolute;
  inset-block: var(--stack-depth) 0;
  inset-inline: 0 var(--stack-depth);
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
}
.zd-exercise-card__stack > span {
  position: absolute;
  inset: 0;
  z-index: calc(-1 * var(--stack-layer));
  border: 1px solid #cbd9d0;
  border-radius: inherit;
  background: linear-gradient(145deg, #f8fbf8, #e6eee8);
  box-shadow: 1px 2px 3px #233c2e0a;
  transform: translate(calc(var(--stack-direction) * var(--stack-layer) * var(--stack-step)), calc(-1 * var(--stack-layer) * var(--stack-step)));
}
.zd-exercise-card.is-stacked > .zd-exercise-card__link {
  position: relative;
  z-index: 1;
  flex: 1;
  width: auto;
  height: auto;
  min-width: 0;
  border: 1px solid var(--zd-ui-line);
  border-radius: inherit;
  background: #fff;
  box-shadow: 0 3px 8px #233c2e05;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.zd-exercise-card.is-stacked:is(:hover, :focus-within) { box-shadow: none; }
.zd-exercise-card.is-stacked:is(:hover, :focus-within) > .zd-exercise-card__link {
  border-color: color-mix(in srgb, var(--card-accent), transparent 56%);
  box-shadow: 0 14px 28px #233c2e12;
}
.zd-exercise-card.is-stacked.is-locked > .zd-exercise-card__link { background: #f4f5f2; border-color: #d9ded9; }
@media (prefers-reduced-motion: reduce) {
  .zd-exercise-card.is-stacked > .zd-exercise-card__link { transition: none; }
}

/* Exercise catalogs begin with filters; the shared header already identifies the page. */
.zd-catalog-main.is-exercise-catalog{padding-top:calc(var(--zd-exam-header-height) + clamp(1rem,2vw,1.5rem))}

.zd-exercise-card__context { display:block;color:var(--zd-muted,#68776f);font-size:.78rem;line-height:1.5;margin:.4rem 0 .65rem; }
.zd-exercise-card__aliases { color:var(--zd-muted,#68776f);font-size:.75rem;margin:8px 0; }
.zd-exercise-card__aliases summary { cursor:pointer;color:var(--zd-green,#19684d); }
.zd-exercise-card__aliases span { display:block;margin-top:6px;line-height:1.5; }

.zd-exercise-card__aliases{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;line-height:1.5;}