/* hifi-theme-el.css — e-learn visual theme (from home-learn) for twin hi-fi mockups.
 * Load after hifi-common.css + hifi-components.css.
 * Mobile: add class `el` on .hifi-device. Landings: add el-landing to body with hifi-landing-body.
 * home-dark.html: intentionally not themed (separate .dk palette). */


/* ── E-learning variant — Ronas IT-inspired
   Clean monochrome base + vivid gradient accent cards ── */

.el,
.el-landing,
.el-hub,
.el-desktop,
.el-admin,
.el-kit {
  --el-bg: #eeeeee;
  --el-card: #ffffff;
  --el-ink: #111118;
  --el-meta: #6e6e80;
  --el-border: #eaeaea;
  --el-grad-1: linear-gradient(135deg, #6160ff 0%, #9c9cff 50%, #dcb8fe 100%);
  --el-grad-2: linear-gradient(135deg, #3a39ff 0%, #8888ff 60%, #c3c3ff 100%);
  --el-grad-3: linear-gradient(135deg, #de3f17 0%, #e7785c 50%, #dcb8fe 100%);
}

/* Phone shell: .el is on the same element as .hifi-device */
.el.hifi-device {
  background: var(--el-bg);
  border-color: var(--el-border);
  box-shadow: 0 12px 40px rgba(17, 17, 24, 0.08);
}

/* If .el ever wraps an inner .hifi-device */
.el .hifi-device {
  background: var(--el-bg);
  border-color: var(--el-border);
  box-shadow: 0 12px 40px rgba(17, 17, 24, 0.08);
}

/* Status bar */
.el .hifi-status {
  background: var(--el-bg);
  color: var(--el-meta);
}

/* Top bar — minimal, text-only */
.el .hifi-topbar {
  background: var(--el-bg);
  border-bottom: none;
}
.el .hifi-title {
  color: var(--el-ink);
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.el .hifi-logo { color: var(--el-ink); }

/* Greeting */
.el-greet {
  margin: 0 0 4px;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--el-ink);
  letter-spacing: -0.025em;
  line-height: 1.15;
}
.el-sub {
  margin: 0 0 20px;
  font-size: 0.85rem;
  color: var(--el-meta);
  line-height: 1.45;
}

/* Section labels — uppercase micro */
.el-section {
  margin: 24px 0 12px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--el-meta);
}
.el-section:first-of-type { margin-top: 0; }

/* ── Gradient hero card (overall progress) ── */
.el-hero-card {
  border-radius: 20px;
  padding: 24px;
  background: var(--el-grad-1);
  color: #fff;
  position: relative;
  overflow: hidden;
  margin-bottom: 20px;
}
.el-hero-card::after {
  content: '';
  position: absolute;
  top: -30px;
  right: -30px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  pointer-events: none;
}
.el-hero-card::before {
  content: '';
  position: absolute;
  bottom: -20px;
  left: 30%;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  pointer-events: none;
}
.el-hero__label {
  font-size: 0.78rem;
  font-weight: 600;
  opacity: 0.8;
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.el-hero__row {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.el-hero__num {
  font-size: 3rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
}
.el-hero__unit {
  font-size: 1rem;
  font-weight: 600;
  opacity: 0.7;
}
.el-hero__bar {
  margin-top: 16px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.2);
  overflow: hidden;
}
.el-hero__bar-fill {
  height: 100%;
  border-radius: 999px;
  background: #fff;
  transition: width 0.4s ease;
}
.el-hero__detail {
  margin-top: 10px;
  font-size: 0.78rem;
  opacity: 0.7;
}
.el-hero__stats {
  display: flex;
  gap: 16px;
  margin-top: 18px;
  position: relative;
  z-index: 1;
}
.el-hero__stat {
  text-align: center;
  flex: 1;
}
.el-hero__stat-val {
  font-size: 1.25rem;
  font-weight: 800;
}
.el-hero__stat-lbl {
  font-size: 0.7rem;
  font-weight: 500;
  opacity: 0.7;
  margin-top: 2px;
}

/* ── Mission scroll — horizontal carousel ── */
.el-missions-scroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 0 16px 4px;
  cursor: grab;
  /* Right-edge vignette: hints more content off-screen */
  box-shadow: -20px 0 20px -30px rgba(0, 0, 0, 0.2) inset;
}
.el-missions-scroll:active { cursor: grabbing; }
.el-missions-scroll::-webkit-scrollbar { display: none; }
.el-missions-scroll::after {
  content: '';
  flex-shrink: 0;
  width: 4px;
}

.el-mission {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--el-card);
  border-radius: 20px;
  padding: 22px 20px 20px;
  min-width: 260px;
  width: 260px;
  flex-shrink: 0;
  text-decoration: none;
  color: inherit;
  transition: transform 0.12s, box-shadow 0.12s;
  border: 1px solid var(--el-border);
  scroll-snap-align: start;
  box-sizing: border-box;
}
.el-mission:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}
.el-mission__icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  margin-bottom: 16px;
}
.el-mission__icon--1 { background: var(--el-grad-2); }
.el-mission__icon--2 { background: var(--el-grad-3); }
.el-mission__title {
  margin: 0 0 6px;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--el-ink);
  line-height: 1.3;
}
.el-mission__meta {
  margin: 0;
  font-size: 0.78rem;
  color: var(--el-meta);
  line-height: 1.4;
}
.el-mission__bottom {
  margin-top: 18px;
}
.el-mission__pct-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
}
.el-mission__pct {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--el-ink);
  letter-spacing: -0.02em;
}
.el-mission__pct-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--el-meta);
}
.el-mission__bar {
  height: 8px;
  border-radius: 999px;
  background: var(--el-border);
  overflow: hidden;
}
.el-mission__bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.4s ease;
}
.el-mission__bar-fill--1 { background: var(--el-grad-2); }
.el-mission__bar-fill--2 { background: var(--el-grad-3); }

/* ── Flat info cards ── */
.el-card {
  background: var(--el-card);
  border: 1px solid var(--el-border);
  border-radius: 16px;
  padding: 18px 20px;
  margin-bottom: 10px;
}
.el-card__title {
  margin: 0 0 4px;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--el-ink);
}
.el-card__meta {
  margin: 0;
  font-size: 0.8rem;
  color: var(--el-meta);
  line-height: 1.45;
}

/* ── Course card (learning module) — gradient strip ── */
.el-course {
  display: flex;
  background: var(--el-card);
  border: 1px solid var(--el-border);
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 10px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.12s, box-shadow 0.12s;
}
.el-course:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}
.el-course__strip {
  width: 6px;
  flex-shrink: 0;
  background: var(--el-grad-2);
}
.el-course__body {
  flex: 1;
  padding: 16px 18px;
}
.el-course__title {
  margin: 0 0 4px;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--el-ink);
}
.el-course__desc {
  margin: 0 0 10px;
  font-size: 0.78rem;
  color: var(--el-meta);
  line-height: 1.4;
}
.el-course__pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.el-course__pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--el-meta);
  background: var(--el-bg);
  border: 1px solid var(--el-border);
  border-radius: 999px;
  padding: 3px 10px;
}
.el-course__pill .hifi-icon {
  width: 14px;
  height: 14px;
  font-size: 14px;
}

/* ── Trust / gamification row ── */
.el-trust {
  display: flex;
  align-items: center;
  gap: 14px;
}
.el-trust__ring {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: conic-gradient(var(--pb-10) 0% 68%, var(--el-border) 68% 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.el-trust__ring span {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--el-card);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--el-ink);
}
.el-trust__body { flex: 1; min-width: 0; }
.el-trust__title {
  margin: 0 0 2px;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--el-ink);
}
.el-trust__meta {
  margin: 0;
  font-size: 0.75rem;
  color: var(--el-meta);
}

.el-stat-row {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}
.el-stat-pill {
  flex: 1;
  text-align: center;
  padding: 10px 6px;
  background: var(--el-bg);
  border: 1px solid var(--el-border);
  border-radius: 12px;
}
.el-stat-pill__val {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--el-ink);
}
.el-stat-pill__val--accent { color: var(--pb-10); }
.el-stat-pill__lbl {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--el-meta);
  margin-top: 2px;
}

/* ── CTA button — gradient pill ── */
.el-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 20px;
  border-radius: 999px;
  border: none;
  position: relative;
  z-index: 0;
  isolation: isolate;
  overflow: hidden;
  background: transparent;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.12s, transform 0.12s;
  margin-top: 6px;
  box-sizing: border-box;
}
.el-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--el-grad-2);
  z-index: -1;
  pointer-events: none;
}
.el-btn:hover { opacity: 0.92; transform: translateY(-1px); }
.el-btn .twin-btn__icon {
  color: #fff;
  font-size: 18px;
  width: 18px;
  height: 18px;
}

/* ── Tab bar — flat, minimal ── */
.el .hifi-tabbar {
  background: var(--el-bg);
  border-top: 1px solid var(--el-border);
  box-shadow: none;
}
.el .hifi-tab { color: var(--el-meta); }
.el .hifi-tab .hifi-icon { color: var(--el-meta); background: transparent; border-color: transparent; }
.el .hifi-tab--active { color: var(--el-ink); }
.el .hifi-tab--active .hifi-icon {
  color: var(--pb-10);
  background: rgba(97,96,255,0.08);
  border-color: rgba(97,96,255,0.12);
}

.el .hifi-tabbar--gold {
  background: var(--el-bg);
  border-top: 1px solid var(--el-border);
  box-shadow: none;
}

.el .hifi-tabbar--gold .hifi-tab {
  color: var(--el-meta);
}

.el .hifi-tabbar--gold .hifi-tab .hifi-icon {
  color: var(--el-meta);
  background: transparent;
  border-color: transparent;
}

.el .hifi-tabbar--gold .hifi-tab--active {
  color: var(--el-ink);
}

.el .hifi-tabbar--gold .hifi-tab--active .hifi-icon {
  color: var(--marigold);
  background: rgba(212, 160, 23, 0.12);
  border-color: rgba(212, 160, 23, 0.2);
}

/* Hints */
.el .hifi-hint { color: var(--el-meta); }
.el .hifi-link-hub { color: var(--pb-10); font-weight: 600; }

/* ═══ Overrides: map legacy hifi-* inside e-learn shell ═══
   Applies to .el (mobile), .el-kit (showcase), .el-desktop (web shell) */

.el .hifi-main,
.el-kit .hifi-main {
  background: transparent;
}

.el .hifi-back,
.el-kit .hifi-back {
  color: var(--el-meta);
}

.el .hifi-section-title,
.el-kit .hifi-section-title,
.el-desktop .hifi-section-title {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--el-meta);
}

.el .hifi-card,
.el-kit .hifi-card,
.el-desktop .hifi-card {
  background: var(--el-card);
  border: 1px solid var(--el-border);
  box-shadow: none;
  border-radius: 16px;
}

.el .hifi-card--accent-blue,
.el-kit .hifi-card--accent-blue,
.el-desktop .hifi-card--accent-blue {
  border-top: 4px solid #6160ff;
  box-shadow: none;
}

.el .hifi-card--accent-gold,
.el-kit .hifi-card--accent-gold,
.el-desktop .hifi-card--accent-gold {
  border-top: 4px solid var(--marigold);
  box-shadow: 0 2px 12px rgba(212, 160, 23, 0.12);
}

.el .hifi-card--alert,
.el-kit .hifi-card--alert,
.el-desktop .hifi-card--alert {
  border: 2px solid color-mix(in srgb, var(--marigold) 55%, var(--el-border));
  background: color-mix(in srgb, var(--el-card) 92%, var(--marigold));
  box-shadow: 0 4px 16px rgba(212, 160, 23, 0.08);
}

.el .hifi-card__title,
.el-kit .hifi-card__title,
.el-desktop .hifi-card__title {
  color: var(--el-ink);
  font-weight: 700;
}

.el .hifi-card__meta,
.el-kit .hifi-card__meta,
.el-desktop .hifi-card__meta {
  color: var(--el-meta);
}

.el .hifi-row,
.el-kit .hifi-row {
  background: var(--el-card);
  border: 1px solid var(--el-border);
  box-shadow: none;
}

.el .hifi-row__title,
.el-kit .hifi-row__title { color: var(--el-ink); }
.el .hifi-row__sub,
.el-kit .hifi-row__sub { color: var(--el-meta); }

.el .hifi-m5,
.el-kit .hifi-m5 {
  background: var(--el-card);
  border: 1px solid var(--el-border);
  box-shadow: none;
}

.el .hifi-m5__name,
.el-kit .hifi-m5__name { color: var(--el-ink); }
.el .hifi-m5__role,
.el-kit .hifi-m5__role { color: var(--el-meta); }

.el .hifi-badge,
.el-kit .hifi-badge {
  background: var(--el-bg);
  color: var(--el-ink);
  border: 1px solid var(--el-border);
}

/* Secure room · integrated message composer */
.el .hifi-room__input-shell {
  background: var(--el-bg);
  border-color: var(--el-border);
}

.el .hifi-room__input-icon {
  color: var(--el-meta);
}

.el .hifi-room__input-field {
  color: var(--el-ink);
}

.el .hifi-room__input-field::placeholder {
  color: var(--el-meta);
}

.el .hifi-room__input-shell:focus-within {
  border-color: color-mix(in srgb, var(--pb-10) 50%, var(--el-border));
  box-shadow: 0 0 0 2px rgba(97, 96, 255, 0.14);
}

.el .hifi-room__input-send {
  background: var(--el-grad-2);
}

.el .hifi-progress,
.el-kit .hifi-progress,
.el-desktop .hifi-progress {
  background: var(--el-border);
}

.el .hifi-progress__fill,
.el-kit .hifi-progress__fill,
.el-desktop .hifi-progress__fill {
  background: var(--el-grad-2);
}

.el .hifi-progress--gold .hifi-progress__fill,
.el-kit .hifi-progress--gold .hifi-progress__fill,
.el-desktop .hifi-progress--gold .hifi-progress__fill {
  background: var(--marigold);
}

.el .hifi-label,
.el-kit .hifi-label { color: var(--el-meta); }

.el .hifi-input,
.el .hifi-select,
.el-kit .hifi-input,
.el-kit .hifi-select {
  background: var(--el-card);
  border-color: var(--el-border);
  color: var(--el-ink);
}

.el .hifi-input::placeholder,
.el-kit .hifi-input::placeholder { color: var(--el-meta); }

/* Gradient fill on ::before + no transparent border = clean pill edges (no halo). */
.el .twin-btn-primary,
.el-kit .twin-btn-primary,
.el-desktop .twin-btn-primary,
.el-landing .twin-btn-primary {
  position: relative;
  z-index: 0;
  isolation: isolate;
  overflow: hidden;
  border-width: 0;
  padding: 10px 26px;
  background: transparent;
  color: #fff;
}

.el .twin-btn-primary::before,
.el-kit .twin-btn-primary::before,
.el-desktop .twin-btn-primary::before,
.el-landing .twin-btn-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--el-grad-2);
  z-index: -1;
  pointer-events: none;
}

.el .twin-btn-primary.twin-btn--sm,
.el-kit .twin-btn-primary.twin-btn--sm,
.el-desktop .twin-btn-primary.twin-btn--sm,
.el-landing .twin-btn-primary.twin-btn--sm {
  padding: 6px 22px;
}

.el .twin-btn-primary.twin-btn--xs,
.el-kit .twin-btn-primary.twin-btn--xs,
.el-desktop .twin-btn-primary.twin-btn--xs,
.el-landing .twin-btn-primary.twin-btn--xs {
  padding: 4px 18px;
}

.el .twin-btn-primary:hover:not(:disabled):not([disabled])::before,
.el-kit .twin-btn-primary:hover:not(:disabled):not([disabled])::before,
.el-desktop .twin-btn-primary:hover:not(:disabled):not([disabled])::before,
.el-landing .twin-btn-primary:hover:not(:disabled):not([disabled])::before {
  background: linear-gradient(135deg, #2d2ce0 0%, #7575f0 60%, #b0b0ff 100%);
}

.el .twin-btn-primary:hover:not(:disabled):not([disabled]),
.el-kit .twin-btn-primary:hover:not(:disabled):not([disabled]),
.el-desktop .twin-btn-primary:hover:not(:disabled):not([disabled]),
.el-landing .twin-btn-primary:hover:not(:disabled):not([disabled]) {
  color: #fff;
  opacity: 0.95;
}

.el .twin-btn-primary:active:not(:disabled):not([disabled]),
.el-kit .twin-btn-primary:active:not(:disabled):not([disabled]),
.el-desktop .twin-btn-primary:active:not(:disabled):not([disabled]),
.el-landing .twin-btn-primary:active:not(:disabled):not([disabled]) {
  opacity: 0.88;
}

.el .twin-btn-primary:focus-visible,
.el-kit .twin-btn-primary:focus-visible,
.el-desktop .twin-btn-primary:focus-visible,
.el-landing .twin-btn-primary:focus-visible {
  outline: 2px solid var(--primary-focus-ring);
  outline-offset: 2px;
  box-shadow: none;
}

/* Beat .el-* .twin-btn-primary (same specificity as :disabled from hifi-common) */
.el .twin-btn-primary:disabled,
.el .twin-btn-primary[disabled],
.el-kit .twin-btn-primary:disabled,
.el-kit .twin-btn-primary[disabled],
.el-desktop .twin-btn-primary:disabled,
.el-desktop .twin-btn-primary[disabled],
.el-landing .twin-btn-primary:disabled,
.el-landing .twin-btn-primary[disabled] {
  background: var(--disabled-bg);
  color: var(--disabled-text);
  border-color: transparent;
  opacity: 1;
}

.el .twin-btn-primary:disabled::before,
.el .twin-btn-primary[disabled]::before,
.el-kit .twin-btn-primary:disabled::before,
.el-kit .twin-btn-primary[disabled]::before,
.el-desktop .twin-btn-primary:disabled::before,
.el-desktop .twin-btn-primary[disabled]::before,
.el-landing .twin-btn-primary:disabled::before,
.el-landing .twin-btn-primary[disabled]::before {
  display: none;
}

.el .twin-btn-primary:disabled .twin-btn__icon,
.el .twin-btn-primary[disabled] .twin-btn__icon,
.el-kit .twin-btn-primary:disabled .twin-btn__icon,
.el-kit .twin-btn-primary[disabled] .twin-btn__icon,
.el-desktop .twin-btn-primary:disabled .twin-btn__icon,
.el-desktop .twin-btn-primary[disabled] .twin-btn__icon,
.el-landing .twin-btn-primary:disabled .twin-btn__icon,
.el-landing .twin-btn-primary[disabled] .twin-btn__icon {
  color: var(--disabled-text);
}

.el .twin-btn-secondary,
.el-kit .twin-btn-secondary,
.el-desktop .twin-btn-secondary {
  background: var(--el-card);
  border-color: var(--el-border);
  color: var(--el-ink);
}

.el .twin-btn-secondary:hover:not(:disabled):not([disabled]),
.el-kit .twin-btn-secondary:hover:not(:disabled):not([disabled]),
.el-desktop .twin-btn-secondary:hover:not(:disabled):not([disabled]) {
  background: var(--el-bg);
  border-color: #6160ff;
  color: var(--el-ink);
}

.el .twin-btn-secondary:disabled,
.el .twin-btn-secondary[disabled],
.el-kit .twin-btn-secondary:disabled,
.el-kit .twin-btn-secondary[disabled],
.el-desktop .twin-btn-secondary:disabled,
.el-desktop .twin-btn-secondary[disabled] {
  background: var(--white);
  color: var(--disabled-text);
  border-color: var(--disabled-border);
  opacity: 1;
}

.el .twin-btn-secondary:disabled .twin-btn__icon,
.el .twin-btn-secondary[disabled] .twin-btn__icon,
.el-kit .twin-btn-secondary:disabled .twin-btn__icon,
.el-kit .twin-btn-secondary[disabled] .twin-btn__icon,
.el-desktop .twin-btn-secondary:disabled .twin-btn__icon,
.el-desktop .twin-btn-secondary[disabled] .twin-btn__icon {
  color: var(--disabled-text);
}

.el .twin-btn-gold,
.el-kit .twin-btn-gold {
  box-shadow: 0 2px 10px rgba(212, 160, 23, 0.2);
}

.el .hifi-home-snap__tile,
.el-kit .hifi-home-snap__tile {
  background: var(--el-card);
  border: 1px solid var(--el-border);
}

.el .hifi-home-snap__val,
.el-kit .hifi-home-snap__val { color: var(--el-ink); }
.el .hifi-home-snap__lbl,
.el-kit .hifi-home-snap__lbl { color: var(--el-meta); }

.el .hifi-mission-item__pct,
.el-kit .hifi-mission-item__pct { color: var(--el-ink); }

/* ── Landing (full-width, no device) ── */
.el-landing.hifi-landing-body {
  background: var(--el-bg);
}

.el-landing .nav__logo {
  color: var(--el-ink);
}

.el-landing .nav__link {
  color: var(--el-meta);
}

.el-landing .nav__link:hover {
  color: var(--el-ink);
}

.el-landing .hero-card {
  background: var(--el-card);
  border: 1px solid var(--el-border);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 8px 32px rgba(17, 17, 24, 0.06);
}

.el-landing .hero-card h1 {
  color: var(--el-ink);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.el-landing .hero-card p {
  color: var(--el-meta);
}

.el-landing .trust {
  border-top-color: var(--el-border);
  color: var(--el-meta);
}

.el-landing .hub-link {
  color: #6160ff;
}

.el-landing .gfx-layer .blob {
  opacity: 0.22;
}

.el-hub.hifi-body,
.el-kit.hifi-body {
  background: var(--el-bg);
  min-height: 100vh;
}

/* ── Mockup hub index ── */
.el-hub .hub h1 {
  color: var(--el-ink);
  font-weight: 800;
}

.el-hub .hub .hub__lede,
.el-hub .hub .hub__std {
  color: var(--el-meta);
}

.el-hub .hub ul {
  border-top-color: var(--el-border);
}

.el-hub .hub li {
  border-bottom-color: var(--el-border);
}

.el-hub .hub a {
  color: var(--el-ink);
}

.el-hub .hub a:hover {
  color: #6160ff;
}

.el-hub .hub .hub__foot {
  color: var(--el-meta);
}

.el-hub .hub .hub__foot a {
  color: #6160ff;
}

.el-hub .hub h2 {
  color: var(--el-meta);
  border-top-color: var(--el-border);
}

.el-hub .hub details {
  border-color: var(--el-border);
  background: var(--el-card);
}

/* ── Desktop shell ── */
.el-desktop.hifi-desktop {
  background: var(--el-bg);
}

.el-desktop .hifi-sidebar {
  background: var(--el-card);
  border: 1px solid var(--el-border);
  box-shadow: 0 4px 24px rgba(17, 17, 24, 0.06);
}

.el-desktop .hifi-sidebar__logo {
  color: var(--el-ink);
  border-bottom-color: var(--el-border);
}

.el-desktop .hifi-sidebar__link {
  color: var(--el-meta);
}

.el-desktop .hifi-sidebar__link--active {
  background: rgba(97, 96, 255, 0.1);
  color: var(--el-ink);
}

.el-desktop .hifi-desktop__top {
  background: var(--el-card);
  border: 1px solid var(--el-border);
  box-shadow: none;
}

.el-desktop .hifi-desktop__top h1 {
  color: var(--el-ink);
  font-weight: 800;
}

.el-desktop .hifi-desktop__content {
  background: var(--el-card);
  border: 1px solid var(--el-border);
  box-shadow: none;
}

.el-desktop .hifi-link-hub {
  color: #6160ff;
}

/* ── Admin users ── */
.el-admin {
  background: var(--el-bg) !important;
}

.el-admin .admin-top {
  background: var(--el-card);
  color: var(--el-ink);
  border-bottom: 1px solid var(--el-border);
}

.el-admin .admin-top a {
  color: #6160ff;
}

.el-admin .admin-wrap h1 {
  color: var(--el-ink);
  font-weight: 800;
}

.el-admin .admin-toolbar input {
  background: var(--el-card);
  border-color: var(--el-border);
  color: var(--el-ink);
}

/* ── Kit / showcase pages ── */
.el-kit .kit {
  background: transparent;
}

.el-kit .kit h1 {
  color: var(--el-ink);
  font-weight: 800;
}

.el-kit .kit > p,
.el-kit .kit h2 {
  color: var(--el-meta);
}

.el-kit .hifi-link-hub {
  color: #6160ff;
}

.el-kit .showcase h1 {
  color: var(--el-ink);
  font-weight: 800;
}

.el-kit .showcase > p,
.el-kit .showcase h2,
.el-kit .showcase .matrix__head,
.el-kit .showcase .matrix__row-label,
.el-kit .showcase .hint {
  color: var(--el-meta);
}

.el-kit .showcase .matrix > div:nth-child(-n+4) {
  border-bottom-color: var(--el-border);
}

/* Kit reference pages: keep Figma solid primary/secondary (not e-learn gradient/card remap) */
.el-kit .showcase .twin-btn-primary,
.el-kit .kit .twin-btn-primary {
  overflow: visible;
  border-width: 2px;
  border-style: solid;
  border-color: transparent;
  padding: 8px 24px;
  background: var(--primary);
  color: #fff;
}

.el-kit .showcase .twin-btn-primary::before,
.el-kit .kit .twin-btn-primary::before {
  display: none;
}

.el-kit .showcase .twin-btn-primary.twin-btn--sm,
.el-kit .kit .twin-btn-primary.twin-btn--sm {
  padding: 4px 20px;
}

.el-kit .showcase .twin-btn-primary.twin-btn--xs,
.el-kit .kit .twin-btn-primary.twin-btn--xs {
  padding: 2px 16px;
}

.el-kit .showcase .twin-btn-primary .twin-btn__icon,
.el-kit .kit .twin-btn-primary .twin-btn__icon {
  color: #fff;
}

.el-kit .showcase .twin-btn-primary:hover:not(:disabled):not([disabled]),
.el-kit .kit .twin-btn-primary:hover:not(:disabled):not([disabled]) {
  background: var(--primary-hover);
  color: #fff;
  opacity: 1;
}

.el-kit .showcase .twin-btn-primary:focus-visible,
.el-kit .kit .twin-btn-primary:focus-visible {
  background: var(--primary-hover);
  color: #fff;
  box-shadow: 0 0 0 2px var(--primary-focus-ring);
}

.el-kit .showcase .twin-btn-primary:active:not(:disabled):not([disabled]),
.el-kit .kit .twin-btn-primary:active:not(:disabled):not([disabled]) {
  background: var(--primary-pressed);
  color: #fff;
  box-shadow: none;
  opacity: 1;
}

.el-kit .showcase .twin-btn-primary:disabled,
.el-kit .showcase .twin-btn-primary[disabled],
.el-kit .kit .twin-btn-primary:disabled,
.el-kit .kit .twin-btn-primary[disabled] {
  background: var(--disabled-bg);
  color: var(--disabled-text);
}

.el-kit .showcase .twin-btn-primary:disabled .twin-btn__icon,
.el-kit .showcase .twin-btn-primary[disabled] .twin-btn__icon,
.el-kit .kit .twin-btn-primary:disabled .twin-btn__icon,
.el-kit .kit .twin-btn-primary[disabled] .twin-btn__icon {
  color: var(--disabled-text);
}

.el-kit .showcase .twin-btn-secondary,
.el-kit .kit .twin-btn-secondary {
  background: var(--white);
  color: var(--primary);
  border-color: var(--primary);
}

.el-kit .showcase .twin-btn-secondary:hover:not(:disabled):not([disabled]),
.el-kit .kit .twin-btn-secondary:hover:not(:disabled):not([disabled]) {
  background: var(--primary-surface);
  border-color: var(--primary);
  color: var(--primary);
}

.el-kit .showcase .twin-btn-secondary:focus-visible,
.el-kit .kit .twin-btn-secondary:focus-visible {
  background: var(--white);
  border-color: var(--primary-hover);
  box-shadow: 0 0 0 3px var(--primary-focus-ring);
  color: var(--primary);
}

.el-kit .showcase .twin-btn-secondary:active:not(:disabled):not([disabled]),
.el-kit .kit .twin-btn-secondary:active:not(:disabled):not([disabled]) {
  background: var(--primary-surface-dark);
  box-shadow: none;
  color: var(--primary);
}

.el-kit .showcase .twin-btn-secondary:disabled,
.el-kit .showcase .twin-btn-secondary[disabled],
.el-kit .kit .twin-btn-secondary:disabled,
.el-kit .kit .twin-btn-secondary[disabled] {
  background: var(--white);
  color: var(--disabled-text);
  border-color: var(--disabled-border);
}

.el-kit .showcase .twin-btn-secondary:disabled .twin-btn__icon,
.el-kit .showcase .twin-btn-secondary[disabled] .twin-btn__icon,
.el-kit .kit .twin-btn-secondary:disabled .twin-btn__icon,
.el-kit .kit .twin-btn-secondary[disabled] .twin-btn__icon {
  color: var(--disabled-text);
}

/* ── Landing human (lh-*) — same el-landing body hook ── */
.el-landing .lh-nav__logo {
  color: var(--el-ink);
}

.el-landing .lh-nav__link {
  color: var(--el-meta);
}

.el-landing .lh-nav__link:hover {
  color: var(--el-ink);
}

.el-landing .lh-card {
  background: var(--el-card);
  border: 1px solid var(--el-border);
  box-shadow: 0 8px 32px rgba(17, 17, 24, 0.06);
}

.el-landing .lh-card h1 {
  color: var(--el-ink);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.el-landing .lh-card .lh-lede {
  color: var(--el-meta);
}

.el-landing .lh-hub {
  color: #6160ff;
}

.el-landing .lh-blob {
  opacity: 0.2;
}

.el-landing .lh-trust__row {
  color: var(--el-meta);
}

.el-landing .lh-geo {
  color: var(--el-meta);
  opacity: 0.85;
}