/* ==========================================================================
   TebZone bridge — tebzone.css
   The TebZone-powered surfaces: the account chip in the header, the
   sign-in / sign-up panel, the live course catalogue, and the wrapper that
   course material from the platform is rendered inside.

   PORTABLE BY DESIGN

   This file is deployed unchanged to every partner site. It never names a
   partner's own tokens directly — it reads them once, here, into a --tz-*
   set with a fallback chain, so a site whose palette is called --brand-*
   and one whose palette is called --navy-* both work with the same
   stylesheet. Adding a third partner means extending this block, nothing
   below it.
   ========================================================================== */

:root {
  /* Surfaces */
  --tz-surface:      var(--surface, #ffffff);
  --tz-surface-soft: var(--surface-muted, var(--ink-50, #f7fafb));
  --tz-line:         var(--line, rgba(0, 0, 0, 0.1));
  --tz-line-strong:  var(--line-strong, rgba(0, 0, 0, 0.18));

  /* Text */
  --tz-heading:  var(--brand-800, var(--navy-800, #10243a));
  --tz-body:     var(--ink-700, #33454f);
  --tz-muted:    var(--ink-500, #6b8391);
  --tz-faint:    var(--ink-400, #8fa4af);

  /* Neutral steps used for fills and borders */
  --tz-n100: var(--ink-100, #eef3f6);
  --tz-n200: var(--ink-200, #dbe4ea);
  --tz-n300: var(--ink-300, #b9c8d1);

  /* Accent — the colour a partner uses for its calls to action */
  --tz-accent:      var(--accent-600, var(--green-500, #5aaa42));
  --tz-accent-deep: var(--accent-700, var(--green-700, #3d8a2e));
  --tz-accent-soft: var(--accent-50, var(--green-50, #f3faef));
  --tz-accent-tint: var(--accent-100, var(--green-100, #e5f4dd));

  /* Brand — the deep colour behind panels and headers */
  --tz-brand-soft: var(--brand-50, var(--navy-50, #f3f9fc));
  --tz-brand-tint: var(--brand-100, var(--navy-100, #e4f0f6));
  --tz-brand-mid:  var(--brand-600, var(--navy-600, #004b73));

  /* Gradients, elevation, motion */
  --tz-grad-brand:  var(--grad-brand, linear-gradient(135deg, #0b2b40, #17567d));
  --tz-grad-accent: var(--grad-accent, var(--grad-green, linear-gradient(135deg, #459334, #7cc45f)));
  --tz-shadow-sm:   var(--shadow-sm, 0 2px 6px rgba(0, 0, 0, 0.06));
  --tz-shadow-md:   var(--shadow-md, 0 10px 26px -12px rgba(0, 0, 0, 0.22));
  --tz-shadow-lg:   var(--shadow-lg, 0 24px 52px -22px rgba(0, 0, 0, 0.34));
  --tz-shadow-accent: var(--shadow-accent, var(--shadow-green, 0 14px 30px -12px rgba(0, 0, 0, 0.4)));

  --tz-r-xs: var(--r-xs, 8px);
  --tz-r-sm: var(--r-sm, 12px);
  --tz-r-md: var(--r-md, 18px);
  --tz-r-lg: var(--r-lg, 26px);
  --tz-r-full: var(--r-full, 999px);

  --tz-ease: var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
  --tz-ease-spring: var(--ease-spring, cubic-bezier(0.34, 1.4, 0.64, 1));
  --tz-fast: var(--t-fast, 0.18s);
  --tz-base: var(--t-base, 0.32s);
  --tz-slow: var(--t-slow, 0.6s);

  --tz-font-display: var(--font-heading, var(--font-display, system-ui, sans-serif));

  /* Danger — the one colour the partner themes do not define */
  --tz-danger: #c2453a;
  --tz-danger-soft: #fdf2f1;
  --tz-danger-line: #f3d5d1;
}

/* --------------------------------------------------------------------------
   1. Header account
   -------------------------------------------------------------------------- */
.tz-account-slot { display: inline-flex; align-items: center; }
.tz-account-slot:empty { display: none; }
.tz-account-slot.is-signed { margin-left: 10px; }

.tz-account { position: relative; }

.tz-account-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px 6px 6px;
  border-radius: var(--tz-r-full);
  border: 1px solid var(--tz-line-strong);
  background: var(--tz-surface);
  box-shadow: var(--tz-shadow-sm);
  transition: border-color var(--tz-base) var(--tz-ease),
              box-shadow var(--tz-base) var(--tz-ease),
              transform var(--tz-base) var(--tz-ease);
}
.tz-account-chip:hover { border-color: var(--tz-accent); box-shadow: var(--tz-shadow-md); transform: translateY(-1px); }
.tz-account-chip > svg:last-child { color: var(--tz-faint); transition: transform var(--tz-base) var(--tz-ease); }
.tz-account.is-open .tz-account-chip > svg:last-child { transform: rotate(180deg); }

.tz-account-avatar {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--tz-font-display);
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: #fff;
  background: var(--tz-grad-brand);
}
.tz-account-text { display: grid; text-align: left; line-height: 1.2; }
.tz-account-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tz-accent-deep);
}
.tz-account-name { font-size: 0.86rem; font-weight: 700; color: var(--tz-heading); }

.tz-account-menu {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: 248px;
  padding: 8px;
  border-radius: var(--tz-r-md);
  border: 1px solid var(--tz-line);
  background: var(--tz-surface);
  box-shadow: var(--tz-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--tz-base) var(--tz-ease),
              transform var(--tz-base) var(--tz-ease),
              visibility var(--tz-base);
  z-index: 60;
}
.tz-account.is-open .tz-account-menu { opacity: 1; visibility: visible; transform: none; }

.tz-account-head {
  display: grid;
  gap: 2px;
  padding: 10px 12px 12px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--tz-line);
}
.tz-account-head strong { font-size: 0.9rem; color: var(--tz-heading); }
.tz-account-head span { font-size: 0.76rem; color: var(--tz-muted); overflow-wrap: anywhere; }

.tz-account-menu a,
.tz-account-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--tz-r-xs);
  font-size: 0.87rem;
  font-weight: 600;
  color: var(--tz-body);
  text-align: left;
  transition: background var(--tz-fast), color var(--tz-fast);
}
.tz-account-menu a::after { display: none; }
.tz-account-menu a:hover { background: var(--tz-accent-soft); color: var(--tz-accent-deep); }
.tz-account-menu button:hover { background: var(--tz-brand-soft); color: var(--tz-heading); }

/* --------------------------------------------------------------------------
   2. The auth panel
   -------------------------------------------------------------------------- */
.tz-panel {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  border-radius: var(--tz-r-lg);
  overflow: hidden;
  background: var(--tz-surface);
  border: 1px solid var(--tz-line);
  box-shadow: var(--tz-shadow-lg);
}

.tz-panel-aside {
  position: relative;
  padding: clamp(1.9rem, 1.3rem + 2vw, 3rem);
  color: rgba(255, 255, 255, 0.78);
  background: var(--tz-grad-brand);
  overflow: hidden;
}
.tz-panel-aside::before {
  content: '';
  position: absolute;
  inset: -40% -55% auto auto;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  background: var(--tz-accent);
  opacity: 0.24;
  filter: blur(60px);
  pointer-events: none;
}
.tz-panel-aside > * { position: relative; }
.tz-panel-aside h3 { color: #fff; font-size: var(--fs-h3, 1.4rem); margin: 16px 0 12px; }
.tz-panel-aside p { font-size: 0.93rem; line-height: 1.75; }

.tz-panel-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: var(--tz-r-full);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(6px);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
}

.tz-panel-points { list-style: none; display: grid; gap: 16px; margin-top: 26px; padding: 0; }
.tz-panel-points li { display: flex; gap: 12px; font-size: 0.88rem; line-height: 1.62; }
.tz-panel-points svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: #ffffff;
  color: color-mix(in srgb, var(--tz-accent) 45%, white);
}
.tz-panel-points strong { display: block; color: #fff; font-weight: 700; }

.tz-panel-main { padding: clamp(1.7rem, 1.2rem + 1.8vw, 2.6rem); min-width: 0; }

/* -- tabs ------------------------------------------------------------- */
.tz-tabs {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 5px;
  margin-bottom: 26px;
  border-radius: var(--tz-r-full);
  background: var(--tz-n100);
}
.tz-tab {
  position: relative;
  z-index: 1;
  padding: 11px 8px;
  border-radius: var(--tz-r-full);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--tz-muted);
  transition: color var(--tz-base) var(--tz-ease);
}
.tz-tab.is-active { color: var(--tz-heading); }
.tz-tab-marker {
  position: absolute;
  z-index: 0;
  top: 5px;
  left: 5px;
  width: calc(50% - 7px);
  height: calc(100% - 10px);
  border-radius: var(--tz-r-full);
  background: var(--tz-surface);
  box-shadow: var(--tz-shadow-sm);
  transition: transform var(--tz-base) var(--tz-ease-spring);
}
/* The marker is a sibling that follows both tabs, so the active one can move
   it with ~ — no :has() needed, and it degrades to "stays left" nowhere. */
.tz-tab:nth-of-type(2).is-active ~ .tz-tab-marker { transform: translateX(calc(100% + 4px)); }

/* -- form shell ------------------------------------------------------- */
.tz-forms { position: relative; }
.tz-form { display: none; }
.tz-forms[data-showing="login"] .tz-form[data-tz-form="login"],
.tz-forms[data-showing="register"] .tz-form[data-tz-form="register"] {
  display: block;
  animation: tz-fade-in 0.36s var(--tz-ease) both;
}
@keyframes tz-fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.tz-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px 16px;
  margin-bottom: 18px;
}

.tz-field { display: grid; gap: 7px; min-width: 0; }
.tz-field--wide { grid-column: 1 / -1; }
.tz-field-label {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 0.79rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--tz-heading);
}
.tz-field-label em { font-style: normal; font-size: 0.7rem; font-weight: 600; color: var(--tz-faint); }

.tz-control { position: relative; display: block; }
.tz-control input,
.tz-control select {
  width: 100%;
  min-height: 50px;
  padding: 0 15px;
  border-radius: var(--tz-r-sm);
  border: 1.5px solid var(--tz-n200);
  background: var(--tz-surface-soft);
  font-size: 0.92rem;
  color: var(--tz-body);
  transition: border-color var(--tz-fast), background var(--tz-fast), box-shadow var(--tz-fast);
  appearance: none;
}
.tz-control select { padding-right: 40px; cursor: pointer; }
.tz-control input::placeholder { color: var(--tz-faint); }
.tz-control input:hover,
.tz-control select:hover:not(:disabled) { border-color: var(--tz-n300); }
.tz-control input:focus,
.tz-control select:focus {
  outline: none;
  background: var(--tz-surface);
  border-color: var(--tz-accent);
  box-shadow: 0 0 0 4px var(--tz-accent-tint);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--tz-accent) 22%, transparent);
}
.tz-control select:disabled { color: var(--tz-faint); cursor: not-allowed; opacity: 0.75; }
.tz-control input[type="password"] { padding-right: 48px; }

.tz-control--select > svg {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--tz-faint);
  pointer-events: none;
}

.tz-reveal {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: var(--tz-r-xs);
  color: var(--tz-faint);
  transition: color var(--tz-fast), background var(--tz-fast);
}
.tz-reveal:hover { color: var(--tz-heading); background: var(--tz-n100); }

.tz-field-hint { font-size: 0.74rem; color: var(--tz-muted); }
.tz-field-error { display: none; font-size: 0.76rem; font-weight: 600; color: var(--tz-danger); }
.tz-field-error.is-shown { display: block; }
.tz-field-error.is-hint { color: var(--tz-muted); font-weight: 500; }
.tz-field.is-invalid .tz-control input,
.tz-field.is-invalid .tz-control select { border-color: var(--tz-danger); background: var(--tz-danger-soft); }

.tz-check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  margin-bottom: 18px;
  font-size: 0.83rem;
  line-height: 1.6;
  color: var(--tz-muted);
  cursor: pointer;
}
.tz-check input { width: 19px; height: 19px; margin-top: 2px; accent-color: var(--tz-accent); cursor: pointer; }
.tz-check a { color: var(--tz-accent-deep); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.tz-check .tz-field-error { grid-column: 2; }
.tz-check.is-invalid { color: var(--tz-danger); }

.tz-form-note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 12px 14px;
  margin-bottom: 16px;
  border-radius: var(--tz-r-sm);
  font-size: 0.85rem;
  line-height: 1.6;
}
.tz-form-note svg { flex-shrink: 0; margin-top: 2px; }
.tz-form-note.is-error { background: var(--tz-danger-soft); color: var(--tz-danger); border: 1px solid var(--tz-danger-line); }
.tz-form-note.is-info { background: var(--tz-brand-soft); color: var(--tz-heading); border: 1px solid var(--tz-brand-tint); }

.tz-form-switch { margin-top: 16px; text-align: center; font-size: 0.85rem; color: var(--tz-muted); }
.tz-form-switch button {
  font-weight: 700;
  color: var(--tz-accent-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* -- skeleton --------------------------------------------------------- */
.tz-panel-skeleton {
  display: grid;
  gap: 14px;
  padding: clamp(1.8rem, 1.2rem + 2vw, 2.8rem);
  border-radius: var(--tz-r-lg);
  border: 1px solid var(--tz-line);
  background: var(--tz-surface);
  box-shadow: var(--tz-shadow-md);
}
.tz-panel-skeleton span {
  height: 18px;
  border-radius: var(--tz-r-xs);
  background: linear-gradient(90deg, var(--tz-n100) 25%, var(--tz-surface-soft) 37%, var(--tz-n100) 63%);
  background-size: 400% 100%;
  animation: tz-shimmer 1.5s ease-in-out infinite;
}
.tz-panel-skeleton span:nth-child(1) { width: 42%; }
.tz-panel-skeleton span:nth-child(2) { width: 88%; height: 46px; }
.tz-panel-skeleton span:nth-child(3) { width: 66%; }
@keyframes tz-shimmer { to { background-position: -135% 0; } }

/* --------------------------------------------------------------------------
   3. Signed-in card
   -------------------------------------------------------------------------- */
.tz-signed {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(1rem, 0.6rem + 1.4vw, 1.8rem);
  padding: clamp(1.4rem, 1rem + 1.4vw, 2rem);
  border-radius: var(--tz-r-lg);
  border: 1px solid var(--tz-accent-tint);
  border-color: color-mix(in srgb, var(--tz-accent) 32%, transparent);
  background: var(--tz-surface);
  background:
    radial-gradient(120% 160% at 0% 0%, color-mix(in srgb, var(--tz-accent) 12%, transparent), transparent 60%),
    var(--tz-surface);
  box-shadow: var(--tz-shadow-md);
  animation: tz-fade-in 0.4s var(--tz-ease) both;
}
.tz-signed-mark {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--tz-grad-accent);
  box-shadow: var(--tz-shadow-accent);
}
.tz-signed-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tz-accent-deep);
}
.tz-signed-copy h3 { font-size: var(--fs-h4, 1.1rem); margin: 6px 0 5px; }
.tz-signed-copy p { font-size: 0.9rem; line-height: 1.65; color: var(--tz-muted); max-width: 62ch; }
.tz-signed-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* --------------------------------------------------------------------------
   4. The live catalogue
   -------------------------------------------------------------------------- */
.tz-catalog { margin-top: clamp(1.8rem, 1.2rem + 2vw, 2.8rem); }

.tz-catalog-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 20px;
  margin-bottom: 20px;
}
.tz-catalog-head h3 { font-size: var(--fs-h4, 1.1rem); }
.tz-catalog-head p { font-size: 0.87rem; color: var(--tz-muted); }

.tz-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
  gap: clamp(1rem, 0.7rem + 1vw, 1.6rem);
}
.tz-grid--loading span {
  height: 300px;
  border-radius: var(--tz-r-md);
  background: linear-gradient(90deg, var(--tz-n100) 25%, var(--tz-surface-soft) 37%, var(--tz-n100) 63%);
  background-size: 400% 100%;
  animation: tz-shimmer 1.5s ease-in-out infinite;
}

.tz-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--tz-r-md);
  overflow: hidden;
  background: var(--tz-surface);
  border: 1px solid var(--tz-line);
  box-shadow: var(--tz-shadow-sm);
  transition: transform var(--tz-base) var(--tz-ease),
              box-shadow var(--tz-base) var(--tz-ease),
              border-color var(--tz-base) var(--tz-ease);
}
.tz-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--tz-shadow-lg);
  border-color: var(--tz-accent);
  border-color: color-mix(in srgb, var(--tz-accent) 34%, transparent);
}
.tz-card-link { position: absolute; inset: 0; z-index: 3; }
.tz-card-link::after { display: none; }

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

.tz-card-media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--tz-brand-soft);
  overflow: hidden;
}
.tz-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--tz-slow) var(--tz-ease); }
.tz-card:hover .tz-card-media img { transform: scale(1.06); }
.tz-card-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--tz-n300); }

.tz-card-flag,
.tz-live-flag {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: var(--tz-r-full);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  background: var(--tz-accent);
  backdrop-filter: blur(4px);
}
.tz-live-flag { top: auto; bottom: 12px; }

.tz-card-cat {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  padding: 5px 11px;
  border-radius: var(--tz-r-full);
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--tz-heading);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(4px);
}

.tz-card-body { display: flex; flex-direction: column; gap: 11px; padding: 17px 18px 18px; flex: 1; }
.tz-card-body h3 {
  font-size: 1.02rem;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tz-card-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: auto; }
.tz-card-meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--tz-muted);
}
.tz-card-meta svg { color: var(--tz-accent); }

.tz-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--tz-line);
}
.tz-card-teacher { font-size: 0.78rem; font-weight: 600; color: var(--tz-muted); }
.tz-stars { display: inline-flex; gap: 2px; color: var(--tz-n200); }
.tz-stars .is-on { color: #f0b429; fill: #f0b429; }
.tz-card-go {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--tz-brand-mid);
  background: var(--tz-brand-soft);
  transition: background var(--tz-base) var(--tz-ease),
              color var(--tz-base) var(--tz-ease),
              transform var(--tz-base) var(--tz-ease);
}
.tz-card:hover .tz-card-go { background: var(--tz-accent); color: #fff; transform: translateX(3px); }

/* --------------------------------------------------------------------------
   5. Empty / error states
   -------------------------------------------------------------------------- */
.tz-state {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: clamp(2.2rem, 1.6rem + 2vw, 3.4rem);
  text-align: center;
  border-radius: var(--tz-r-lg);
  border: 1px dashed var(--tz-line-strong);
  background: var(--tz-surface);
}
.tz-state svg { color: var(--tz-n300); }
.tz-state--error svg { color: var(--tz-danger); }
.tz-state h4 { font-size: 1.16rem; }
.tz-state p { font-size: 0.92rem; line-height: 1.7; color: var(--tz-muted); max-width: 58ch; }
.tz-state .btn,
.tz-state-actions { margin-top: 8px; }
.tz-state-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

/* --------------------------------------------------------------------------
   6. Course material (the sanitised HTML from TebZone)

   Everything TebZone's authors wrote lands inside .tz-rich. Their own
   <style> blocks are re-scoped to this class by the bridge, so a course can
   still look like itself without any chance of it repainting the site around
   it. These rules are the floor underneath that.
   -------------------------------------------------------------------------- */
.tz-rich { font-size: 0.97rem; line-height: 1.78; color: var(--tz-body); overflow-wrap: break-word; }
.tz-rich > *:first-child { margin-top: 0; }
.tz-rich > *:last-child { margin-bottom: 0; }
.tz-rich h1, .tz-rich h2, .tz-rich h3, .tz-rich h4 { margin: 1.5em 0 0.55em; line-height: 1.25; }
.tz-rich h1 { font-size: 1.7rem; }
.tz-rich h2 { font-size: 1.4rem; }
.tz-rich h3 { font-size: 1.15rem; }
.tz-rich h4 { font-size: 1rem; }
.tz-rich p { margin: 0 0 1.05em; }
.tz-rich ul, .tz-rich ol { margin: 0 0 1.05em; padding-left: 1.35em; list-style: revert; }
.tz-rich li { margin-bottom: 0.45em; }
.tz-rich a { color: var(--tz-accent-deep); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.tz-rich img { border-radius: var(--tz-r-sm); margin: 0.6em 0; }
.tz-rich strong { color: var(--tz-heading); }
.tz-rich hr { border: 0; height: 1px; background: var(--tz-line); margin: 1.8em 0; }
.tz-rich blockquote {
  margin: 1.2em 0;
  padding: 14px 18px;
  border-left: 3px solid var(--tz-accent);
  border-radius: 0 var(--tz-r-sm) var(--tz-r-sm) 0;
  background: var(--tz-accent-soft);
}
.tz-rich table { width: 100%; border-collapse: collapse; margin: 1.2em 0; font-size: 0.9rem; }
.tz-rich th, .tz-rich td { padding: 10px 12px; border: 1px solid var(--tz-line); text-align: left; }
.tz-rich th { background: var(--tz-brand-soft); color: var(--tz-heading); font-weight: 700; }

/* Wide content scrolls inside itself rather than pushing the page sideways. */
.tz-rich table,
.tz-rich pre { display: block; max-width: 100%; overflow-x: auto; }

.tz-embed {
  position: relative;
  aspect-ratio: 16 / 9;
  margin: 1.2em 0;
  border-radius: var(--tz-r-md);
  overflow: hidden;
  background: #04141f;
  box-shadow: var(--tz-shadow-md);
}
.tz-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.tz-rich-external {
  display: block;
  margin: 1.1em 0;
  padding: 16px 18px;
  border-radius: var(--tz-r-sm);
  border: 1px solid var(--tz-line-strong);
  background: var(--tz-surface-soft);
}
.tz-rich-external a { display: inline-flex; align-items: center; gap: 8px; }

/* --------------------------------------------------------------------------
   7. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 980px) {
  .tz-panel { grid-template-columns: 1fr; }
  .tz-panel-points { gap: 13px; }
}

@media (max-width: 720px) {
  .tz-form-grid { grid-template-columns: 1fr; }
  .tz-signed { grid-template-columns: auto minmax(0, 1fr); }
  .tz-signed-actions { grid-column: 1 / -1; }
  .tz-account-menu { right: auto; left: 0; }
}

@media (max-width: 560px) {
  .tz-signed { grid-template-columns: 1fr; text-align: left; }
  .tz-panel-points li { font-size: 0.85rem; }
}

@media (prefers-reduced-motion: reduce) {
  .tz-card,
  .tz-card-media img,
  .tz-card-go,
  .tz-tab-marker,
  .tz-account-chip { transition: none; }
  .tz-forms .tz-form,
  .tz-signed { animation: none; }
  .tz-panel-skeleton span,
  .tz-grid--loading span { animation: none; }
}