.zib-quality-school {
  --quality-blue: #1557ff;
  --quality-ink: #0b1220;
  --quality-muted: #5d6b82;
  --quality-line: #dfe6f0;
  --quality-soft: #f5f8fd;
}

.zib-quality-content { min-width: 0; }
.zib-quality-content > section { scroll-margin-top: 96px; }

.zib-quality-outcomes {
  display: grid;
  grid-template-columns: minmax(180px, .72fr) 1.28fr;
  gap: 28px;
  margin-bottom: 30px;
  padding: 28px;
  border: 1px solid #cfe0ff;
  border-radius: 24px;
  background: linear-gradient(135deg, #f8fbff, #edf4ff);
}
.zib-quality-outcomes span,
.zib-quality-eyebrow,
.zib-quality-analogy > div > span {
  color: var(--quality-blue);
  font-size: 13px;
  font-weight: 900;
}
.zib-quality-outcomes h2 { margin: 7px 0 0; font-size: 23px; }
.zib-quality-outcomes ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.zib-quality-outcomes li { position: relative; padding: 11px 42px 11px 14px; border-radius: 14px; background: #fff; box-shadow: 0 8px 22px rgba(36, 74, 135, .07); }
.zib-quality-outcomes li::before { content: "✓"; position: absolute; right: 14px; top: 10px; display: grid; width: 21px; height: 21px; place-items: center; border-radius: 50%; color: #fff; background: var(--quality-blue); font-size: 12px; }

.zib-quality-analogy {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 22px;
  align-items: start;
  margin: 0 0 42px;
  padding: 30px;
  border-radius: 26px;
  color: #eef5ff;
  background: radial-gradient(circle at 10% 10%, #224689, transparent 38%), linear-gradient(135deg, #07101f, #101f3b);
  box-shadow: 0 20px 50px rgba(5, 16, 34, .18);
}
.zib-quality-analogy-icon { display: grid; width: 64px; height: 64px; place-items: center; border: 1px solid rgba(255,255,255,.17); border-radius: 20px; color: #8eb5ff; background: rgba(255,255,255,.07); font-size: 30px; }
.zib-quality-analogy h2 { margin: 7px 0 10px; color: #fff; }
.zib-quality-analogy p { margin: 0; color: #cbd8eb; font-size: 17px; line-height: 2.05; }

.zib-quality-section { margin: 0 0 48px; }
.zib-quality-section > h2 { margin: 8px 0 12px; font-size: clamp(24px, 3vw, 32px); }
.zib-quality-section > p { margin: 0 0 22px; color: var(--quality-muted); font-size: 16px; line-height: 2.05; }
.zib-quality-concepts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.zib-quality-concepts article { padding: 23px; border: 1px solid var(--quality-line); border-radius: 20px; background: #fff; box-shadow: 0 10px 28px rgba(28, 52, 88, .055); }
.zib-quality-concepts h3 { margin: 0 0 10px; font-size: 17px; }
.zib-quality-concepts p { margin: 0; color: var(--quality-muted); line-height: 1.9; }

.zib-quality-deep-dive {
  padding: 30px;
  border: 1px solid #dce7f7;
  border-radius: 26px;
  background: linear-gradient(145deg, #fff, #f7faff);
  box-shadow: 0 16px 42px rgba(28, 52, 88, .06);
}
.zib-quality-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 24px 0 0; }
.zib-quality-steps article { position: relative; min-width: 0; padding: 22px 19px 19px; border: 1px solid #dce5f3; border-radius: 18px; background: #fff; }
.zib-quality-steps article > span { display: grid; width: 36px; height: 36px; margin-bottom: 13px; place-items: center; border-radius: 12px; color: #fff; background: linear-gradient(145deg, #1557ff, #7048ff); box-shadow: 0 8px 18px rgba(21, 87, 255, .22); font-weight: 900; }
.zib-quality-steps article > h3 { margin: 0 0 7px; font-size: 16px; line-height: 1.7; }
.zib-quality-steps article > p { margin: 0; color: #44546b; line-height: 1.95; }
.zib-quality-pro-tip { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; margin-top: 16px; padding: 17px 19px; border: 1px solid #bfe9d4; border-radius: 16px; background: #f0fff7; }
.zib-quality-pro-tip strong { white-space: nowrap; color: #08764a; }
.zib-quality-pro-tip p { margin: 0; color: #285e47; line-height: 1.9; }

.zib-quality-course-badges { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
.zib-quality-course-badges span { padding: 8px 12px; border: 1px solid #d9e5f5; border-radius: 999px; color: #34445d; background: rgba(255,255,255,.82); font-size: 12px; font-weight: 800; }

/* Approved card treatment: a soft ambient layer plus a precise contact shadow. */
.zib-school-page .zib-school-card {
  border-color: rgba(182, 199, 224, .74);
  background: linear-gradient(180deg, #fff 0%, #fbfdff 100%);
  box-shadow: 0 2px 4px rgba(18, 35, 62, .06), 0 14px 34px rgba(37, 67, 113, .10), 0 34px 70px rgba(37, 67, 113, .055);
  transform: translateY(0);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.zib-school-page .zib-school-card::before { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; box-shadow: inset 0 1px 0 rgba(255,255,255,.96); }
.zib-school-page .zib-school-card:hover { z-index: 2; border-color: color-mix(in srgb, var(--course-color, #1557ff) 40%, #cfd9e7); transform: translateY(-7px); box-shadow: 0 3px 6px rgba(18,35,62,.07), 0 22px 44px rgba(37,67,113,.14), 0 42px 90px rgba(37,67,113,.09); }
.zib-school-page .zib-school-card .zib-course-icon { box-shadow: 0 2px 4px rgba(22,42,70,.08), 0 10px 22px color-mix(in srgb, var(--course-color, #1557ff) 18%, transparent); }

.zib-quality-order-section { padding: 30px; border: 1px solid #d8e3f2; border-radius: 26px; background: linear-gradient(145deg, #fff, #f7faff); box-shadow: 0 18px 46px rgba(25, 50, 88, .07); }
.zib-quality-order-progress { display: flex; gap: 15px; align-items: center; margin: 18px 0; color: #34506f; font-size: 13px; font-weight: 800; }
.zib-quality-order-progress i { flex: 1; height: 6px; overflow: hidden; border-radius: 999px; background: #dfe8f5; }
.zib-quality-order-progress em { display: block; width: 66%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #1557ff, #674dff); }
.zib-quality-order-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; direction: ltr; }
.zib-quality-order-grid > div { min-width: 0; padding: 18px; border: 1px solid #d9e3f0; border-radius: 20px; background: #fff; }
.zib-quality-order-grid header { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 13px; direction: rtl; }
.zib-quality-order-grid header small { color: #7b899d; }
.zib-quality-order-list { display: grid; min-height: 150px; gap: 9px; margin: 0; padding: 0; list-style: none; }
.zib-quality-order-list > button,
.zib-quality-order-list > li { display: flex; gap: 10px; align-items: center; box-sizing: border-box; width: 100%; min-width: 0; min-height: 45px; padding: 10px 12px; border: 1px solid #d4deeb; border-radius: 12px; color: #17233a; background: #f9fbfe; box-shadow: 0 5px 13px rgba(35,58,92,.055); text-align: left; cursor: pointer; }
.zib-quality-order-list code { min-width: 0; overflow: hidden; font: 13px/1.75 ui-monospace, Consolas, monospace; text-overflow: ellipsis; white-space: nowrap; }
.zib-quality-order-list > button > span { color: #8a99ad; }
.zib-quality-order-list > li { counter-increment: order-step; justify-content: space-between; border-color: #bcd0ef; background: #f4f8ff; }
.zib-quality-order-list > li::before { content: counter(order-step); display: grid; flex: 0 0 25px; width: 25px; height: 25px; place-items: center; border-radius: 8px; color: #fff; background: #1557ff; font: 700 12px/1 sans-serif; }
.zib-quality-order-list > li > span { display: flex; gap: 4px; margin-left: auto; }
.zib-quality-order-list > li > span button { width: 28px; height: 28px; border: 1px solid #cdd9e8; border-radius: 7px; color: #31547f; background: #fff; cursor: pointer; }
.zib-quality-order-section > footer { display: flex; justify-content: space-between; gap: 15px; align-items: center; margin-top: 17px; }
.zib-quality-order-section > footer > div { display: flex; gap: 9px; }
.zib-quality-order-section > footer p { margin: 0; color: #5d6b82; }
.zib-quality-order-section.is-success { border-color: #8bd8b1; background: linear-gradient(145deg, #fff, #f1fff8); }
.zib-quality-order-section.is-error { border-color: #f0aaa2; }

.zib-quality-diagnostics { margin-top: 16px; overflow: hidden; border: 1px solid #f1a79e; border-radius: 18px; background: #fff8f7; box-shadow: 0 14px 34px rgba(147, 49, 38, .09); }
.zib-quality-diagnostics[hidden] { display: none; }
.zib-quality-diagnostics header { display: flex; justify-content: space-between; gap: 16px; padding: 16px 18px; border-bottom: 1px solid #ffd8d3; }
.zib-quality-diagnostics header div { display: grid; gap: 3px; }
.zib-quality-diagnostics header span { color: #b3392e; font-size: 12px; font-weight: 900; }
.zib-quality-diagnostics header strong { color: #6f261f; }
.zib-quality-diagnostics header > b { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 10px; color: #fff; background: #df4b3e; }
.zib-quality-diagnostics > p { margin: 0; padding: 15px 18px 7px; color: #74362f; line-height: 1.9; }
.zib-quality-diagnostic-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 18px 13px; }
.zib-quality-diagnostic-actions button { padding: 8px 12px; border: 1px solid #adc7ed; border-radius: 10px; color: #174b97; background: #f5f9ff; cursor: pointer; font-family: inherit; }
.zib-quality-diagnostics pre { margin: 0; padding: 15px 18px; border-top: 1px solid #ffd8d3; color: #5a342f; background: #fff; white-space: pre-wrap; font: 13px/1.9 ui-monospace, Consolas, monospace; }

.zib-quality-story { padding: 30px; border: 1px solid #e4ddff; border-radius: 26px; background: linear-gradient(135deg, #fbfaff, #f3efff); }
.zib-quality-flow { display: flex; gap: 12px; align-items: center; margin-top: 22px; }
.zib-quality-flow span { flex: 1; padding: 13px 10px; border: 1px solid #ded6fa; border-radius: 14px; text-align: center; color: #442c85; background: #fff; font-weight: 800; }
.zib-quality-flow b { color: #8064c7; }

.zib-quality-lab { overflow: hidden; border: 1px solid #1d3152; border-radius: 24px; background: #07101f; box-shadow: 0 24px 60px rgba(7, 16, 31, .2); }
.zib-quality-lab .zib-lab-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  align-items: stretch;
  height: auto;
  min-height: 350px;
}
.zib-quality-lab .zib-editor-wrap {
  position: relative;
  min-width: 0;
  min-height: 350px;
  overflow: hidden;
}
.zib-quality-lab .zib-editor-wrap textarea {
  position: absolute;
  inset: 0;
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-height: 0;
  tab-size: 4;
}
.zib-quality-lab .zib-output-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 350px;
  overflow: hidden;
}
.zib-quality-lab .zib-output-wrap pre {
  flex: 1 1 auto;
  box-sizing: border-box;
  width: 100%;
  min-height: 265px;
  white-space: pre-wrap;
}
.zib-quality-lab .zib-output-wrap iframe:not([hidden]) {
  display: block;
  flex: 1 1 auto;
  box-sizing: border-box;
  width: 100%;
  min-height: 300px;
}
.zib-quality-lab.is-error [data-quality-status] { color: #ff8576; }
.zib-quality-lab.is-error [data-quality-output] { color: #ffc2ba; }
.zib-quality-lab.is-success [data-quality-status] { color: #4ee29a; }
.zib-quality-lab.is-success [data-quality-output] { color: #c9ffe2; }

.zib-quality-static-code { overflow: hidden; direction: ltr; border: 1px solid #213657; border-radius: 22px; background: #07101f; box-shadow: 0 18px 46px rgba(7, 16, 31, .14); }
.zib-quality-static-code > div { display: flex; justify-content: space-between; align-items: center; padding: 11px 17px; color: #97a9c5; border-bottom: 1px solid #1b2d49; background: #0c1729; font: 12px/1.5 ui-monospace, Consolas, monospace; }
.zib-quality-static-code button { padding: 6px 11px; border: 1px solid #2e4567; border-radius: 8px; color: #cfe0f8; background: #14223a; cursor: pointer; font-family: inherit; }
.zib-quality-static-code pre { overflow: auto; margin: 0; padding: 24px; color: #d9e6f9; background: transparent; font: 14px/2 ui-monospace, Consolas, monospace; text-align: left; }

.zib-quality-mistakes { display: grid; gap: 12px; }
.zib-quality-mistakes article { display: grid; grid-template-columns: 38px 1fr; gap: 13px; align-items: center; padding: 16px 18px; border: 1px solid #ffd8d4; border-radius: 16px; background: #fff8f7; }
.zib-quality-mistakes span { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 10px; color: #a72a20; background: #ffe5e2; font-weight: 900; }
.zib-quality-mistakes p { margin: 0; color: #70332d; }

.zib-quality-quiz .is-correct { border-color: #1baa65 !important; color: #086f41 !important; background: #eafff3 !important; }
.zib-quality-quiz .is-wrong { border-color: #df4b3e !important; color: #a62b22 !important; background: #fff0ee !important; }
.zib-quality-quiz [data-quality-quiz-result] { min-height: 30px; margin-top: 14px; color: var(--quality-muted); line-height: 1.8; }
.zib-quality-quiz-list { display: grid; gap: 16px; }
.zib-quality-quiz-card { padding: 22px; border: 1px solid var(--quality-line); border-radius: 20px; background: #fff; box-shadow: 0 10px 28px rgba(28, 52, 88, .055); }
.zib-quality-quiz-card > span { color: var(--quality-blue); font-size: 12px; font-weight: 900; }
.zib-quality-quiz-card h3 { margin: 7px 0 16px; font-size: 18px; line-height: 1.8; }
.zib-quality-quiz-card .zib-quiz { margin: 0; }

.zib-quality-content .zib-note-practice { margin-top: 20px; }
.zib-quality-content .zib-note-practice button.is-done,
.zib-quality-content [data-quality-complete].is-done { color: #087247; background: #dff9ec; border-color: #8ed6b2; }
.zib-course-sidebar [data-quality-module].is-complete i { opacity: 1; color: #1aae68; }

@media (max-width: 1024px) {
  .zib-quality-concepts,
  .zib-quality-steps { grid-template-columns: 1fr; }
  .zib-quality-school .zib-course-sidebar { position: fixed; z-index: 1000; top: 76px; right: 14px; bottom: 14px; width: min(340px, calc(100vw - 28px)); overflow: auto; transform: translateX(calc(100% + 30px)); transition: transform .24s ease; box-shadow: 0 25px 70px rgba(8, 20, 42, .25); }
  .zib-quality-school .zib-course-sidebar.is-open { transform: translateX(0); }
}

@media (max-width: 900px) {
  .zib-quality-lab .zib-lab-grid { grid-template-columns: 1fr; min-height: 0; }
  .zib-quality-lab .zib-editor-wrap { min-height: 330px; border-right: 0; border-bottom: 1px solid #293750; }
  .zib-quality-lab .zib-output-wrap { min-height: 310px; }
  .zib-quality-order-grid { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .zib-quality-outcomes { grid-template-columns: 1fr; padding: 21px; }
  .zib-quality-analogy { grid-template-columns: 1fr; padding: 23px; }
  .zib-quality-analogy-icon { width: 52px; height: 52px; }
  .zib-quality-story { padding: 22px; }
  .zib-quality-deep-dive { padding: 22px; }
  .zib-quality-pro-tip { grid-template-columns: 1fr; }
  .zib-quality-flow { align-items: stretch; flex-direction: column; }
  .zib-quality-flow b { transform: rotate(90deg); text-align: center; }
  .zib-quality-lab .zib-editor-wrap { min-height: 300px; }
  .zib-quality-lab .zib-output-wrap { min-height: 300px; }
  .zib-quality-static-code pre { padding: 18px; font-size: 12px; }
  .zib-quality-order-section { padding: 21px; }
  .zib-quality-order-section > footer { align-items: stretch; flex-direction: column; }
}

body.zib-theme-dark .zib-quality-outcomes,
body.zib-dark .zib-quality-outcomes { border-color: #29405f; background: linear-gradient(135deg, #0e1b30, #101f36); }
body.zib-theme-dark .zib-quality-outcomes li,
body.zib-dark .zib-quality-outcomes li,
body.zib-theme-dark .zib-quality-concepts article,
body.zib-dark .zib-quality-concepts article,
body.zib-theme-dark .zib-quality-deep-dive,
body.zib-dark .zib-quality-deep-dive,
body.zib-theme-dark .zib-quality-steps article,
body.zib-dark .zib-quality-steps article,
body.zib-theme-dark .zib-quality-quiz-card,
body.zib-dark .zib-quality-quiz-card { border-color: #293c59; color: #e6eefb; background: #111e31; }
body.zib-theme-dark .zib-quality-section > p,
body.zib-dark .zib-quality-section > p,
body.zib-theme-dark .zib-quality-concepts p,
body.zib-dark .zib-quality-concepts p,
body.zib-theme-dark .zib-quality-steps p,
body.zib-dark .zib-quality-steps p { color: #aebdd1; }
body.zib-theme-dark .zib-quality-pro-tip,
body.zib-dark .zib-quality-pro-tip { border-color: #245941; background: #102b22; }
body.zib-theme-dark .zib-quality-pro-tip p,
body.zib-dark .zib-quality-pro-tip p { color: #a6d9c0; }
body.zib-theme-dark .zib-quality-order-section,
body.zib-dark .zib-quality-order-section,
body.zib-theme-dark .zib-quality-order-grid > div,
body.zib-dark .zib-quality-order-grid > div { border-color: #293c59; color: #e6eefb; background: #101c2e; }
body.zib-theme-dark .zib-quality-order-list > button,
body.zib-dark .zib-quality-order-list > button,
body.zib-theme-dark .zib-quality-order-list > li,
body.zib-dark .zib-quality-order-list > li { border-color: #344862; color: #d9e6f8; background: #142238; }
body.zib-theme-dark .zib-quality-story,
body.zib-dark .zib-quality-story { border-color: #44366d; background: linear-gradient(135deg, #17142a, #1c1735); }
body.zib-theme-dark .zib-quality-flow span,
body.zib-dark .zib-quality-flow span { border-color: #4c3d72; color: #dbcfff; background: #201a39; }