/*
  Tenzy website shell — same visual language as index.html (landing).
  EVERY rule is prefixed with html.tenzy-site so ide.html / recreate.html / Tauri
  (no tenzy-site class) are unaffected.
*/

html.tenzy-site {
  scroll-behavior: smooth;
}
html.tenzy-site body {
  margin: 0;
  min-height: 100vh;
  font-family: 'Plus Jakarta Sans', var(--font-ui, 'Inter', system-ui), sans-serif;
  background: #07060d !important;
  color: #e8e9ef;
  overflow-x: hidden;
}

html.tenzy-site .app-container {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: transparent !important;
  box-shadow: none !important;
}

/* Top nav: sits above mesh like landing */
html.tenzy-site .tenzy-site-nav {
  flex-wrap: wrap;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

html.tenzy-site .tenzy-site-nav-fill {
  flex: 1;
  min-width: 0.75rem;
}

html.tenzy-site .tenzy-site-nav .header-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.45rem;
}

html.tenzy-site .tenzy-site-nav .header-actions .btn-secondary,
html.tenzy-site .tenzy-site-nav .header-actions .btn {
  border-radius: 12px;
  font-weight: 600;
  font-size: 0.88rem;
  padding: 0.5rem 0.95rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(248, 250, 252, 0.95);
}

html.tenzy-site .tenzy-site-nav .header-actions .btn-secondary:hover,
html.tenzy-site .tenzy-site-nav .header-actions .btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.22);
}

html.tenzy-site .tenzy-site-nav .header-actions .btn-premium {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.45), rgba(219, 39, 119, 0.35));
  border-color: rgba(167, 139, 250, 0.45);
  color: #fff;
}

html.tenzy-site .tl-nav__links a.tenzy-site-nav-active {
  color: #fff;
  font-weight: 600;
}

html.tenzy-site .header-actions a.tenzy-site-nav-active,
html.tenzy-site .header-actions .btn.tenzy-site-nav-active {
  border-color: rgba(255, 255, 255, 0.24) !important;
  background: rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
}

html.tenzy-site.codii-app .tl-nav.tenzy-site-nav .header-actions > .btn.btn-secondary,
html.tenzy-site.codii-app .tenzy-desktop-only .header-content .header-actions > .btn.btn-secondary {
  border-radius: 14px !important;
  padding: 0.48rem 0.95rem !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.05)) !important;
  color: rgba(248, 250, 252, 0.96) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 12px 30px rgba(0, 0, 0, 0.22) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

html.tenzy-site.codii-app .tl-nav.tenzy-site-nav .header-actions > .btn.btn-secondary:hover,
html.tenzy-site.codii-app .tenzy-desktop-only .header-content .header-actions > .btn.btn-secondary:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.07)) !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
  color: #fff !important;
}

html.tenzy-site.codii-app .header-actions a.tenzy-site-nav-active,
html.tenzy-site.codii-app .header-actions .btn.tenzy-site-nav-active {
  border-color: rgba(255, 255, 255, 0.24) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.07)) !important;
  color: #fff !important;
}

html.tenzy-site a.tenzy-header-account-pill {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.05)) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: #f8fafc !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 12px 30px rgba(0, 0, 0, 0.24) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

html.tenzy-site a.tenzy-header-account-pill:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.17), rgba(255, 255, 255, 0.08)) !important;
  border-color: rgba(255, 255, 255, 0.26) !important;
}

html.tenzy-site .tl-nav__cta .tenzy-header-account-pill {
  min-height: 44px;
  padding-right: 0.75rem;
}

html.tenzy-site .search-button {
  border-radius: 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.04)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 10px 28px rgba(0, 0, 0, 0.18) !important;
  color: rgba(248, 250, 252, 0.95) !important;
}

html.tenzy-site .search-button:hover {
  border-color: rgba(255, 255, 255, 0.24) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.07)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 14px 34px rgba(0, 0, 0, 0.22) !important;
}

html.tenzy-site .search-button .command-key {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  color: rgba(241, 245, 249, 0.82) !important;
}

html.tenzy-site .plan-usage {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 999px;
}

html.tenzy-site .plan-pill,
html.tenzy-site .plan-usage-label {
  color: rgba(232, 233, 239, 0.88) !important;
}

/* Main column */
html.tenzy-site .main-content,
html.tenzy-site .main-content.premium-main {
  flex: 1;
  padding: 0.25rem clamp(0.75rem, 3vw, 1.5rem) 3rem !important;
  background: transparent !important;
}

/* Primary content panel = glass card */
html.tenzy-site .languages-section.panel {
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025)) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 22px !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.45) !important;
  margin: 0;
  padding: clamp(1.25rem, 3vw, 2rem) !important;
}

html.tenzy-site .section-header {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

html.tenzy-site .section-header.panel {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

html.tenzy-site .section-header h3,
html.tenzy-site #lessonTitle {
  color: #fff !important;
  font-weight: 700;
  letter-spacing: -0.02em;
}

html.tenzy-site .section-header p,
html.tenzy-site #lessonSubtitle {
  color: rgba(196, 200, 220, 0.9) !important;
}

/* Toolbar */
html.tenzy-site .lesson-toolbar {
  background: rgba(0, 0, 0, 0.2) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 14px;
}

html.tenzy-site .filter-label,
html.tenzy-site .filter-select,
html.tenzy-site .filter-search {
  color: rgba(232, 233, 239, 0.88);
}

html.tenzy-site .filter-select,
html.tenzy-site .filter-search {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 10px;
}

/* Language cards + fix overlapping stats */
html.tenzy-site .language-card {
  background: linear-gradient(165deg, rgba(22, 18, 42, 0.88), rgba(10, 9, 18, 0.94)) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.4) !important;
}

html.tenzy-site .language-card:hover {
  border-color: rgba(167, 139, 250, 0.4) !important;
}

html.tenzy-site .language-card .language-stats {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0.65rem 0.5rem !important;
  margin-top: 1rem !important;
  padding-top: 1rem !important;
  border-top-color: rgba(255, 255, 255, 0.1) !important;
}

html.tenzy-site .language-card .stat-item {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0.28rem !important;
  text-align: left !important;
}

html.tenzy-site .language-card .stat-item .label {
  font-size: 0.62rem !important;
  line-height: 1.25 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: rgba(186, 190, 215, 0.85) !important;
  white-space: normal !important;
  word-break: break-word !important;
  max-width: 100%;
}

html.tenzy-site .language-card .stat-item .value {
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  color: #f8fafc !important;
  line-height: 1.2;
}

html.tenzy-site .language-info h4 {
  color: #fff !important;
}

html.tenzy-site .language-info p {
  color: rgba(200, 204, 225, 0.85) !important;
}

/* Lesson hero strip */
html.tenzy-site .lesson-hero {
  background: rgba(0, 0, 0, 0.18) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px;
}

html.tenzy-site .lesson-card {
  background: linear-gradient(165deg, rgba(22, 18, 42, 0.88), rgba(10, 9, 18, 0.94)) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

html.tenzy-site .settings-container {
  flex: 1;
  padding: 0.5rem clamp(0.75rem, 3vw, 1.5rem) 3rem !important;
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
}

html.tenzy-site .settings-card.panel {
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025)) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 22px !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.45) !important;
  margin-bottom: 1.25rem;
}

html.tenzy-site .settings-title {
  color: #fff !important;
}

html.tenzy-site .tenzy-settings-notice.panel {
  margin-bottom: 1.25rem;
  padding: 1rem 1.15rem !important;
  background: rgba(124, 58, 237, 0.12) !important;
  border: 1px solid rgba(167, 139, 250, 0.35) !important;
  border-radius: 16px !important;
  color: rgba(233, 213, 255, 0.95) !important;
  font-size: 0.92rem;
  line-height: 1.55;
  box-shadow: 0 12px 36px rgba(124, 58, 237, 0.15);
}

html.tenzy-site .tenzy-settings-notice code {
  font-size: 0.86em;
  padding: 0.12rem 0.35rem;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

html.tenzy-site .settings-label {
  color: rgba(210, 214, 235, 0.92) !important;
}

html.tenzy-site .settings-hint {
  color: rgba(168, 174, 200, 0.88) !important;
}

html.tenzy-site .settings-input,
html.tenzy-site select.settings-input {
  background: rgba(0, 0, 0, 0.28) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #f1f5f9 !important;
  border-radius: 12px !important;
}

html.tenzy-site .settings-input:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.24) !important;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08);
}

html.tenzy-site .settings-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem 1.1rem;
  row-gap: 0.85rem;
  margin-top: 1rem;
  padding-top: 0.35rem;
}

html.tenzy-site .settings-actions .btn-primary {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.045)) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: #f1f5f9 !important;
  border-radius: 14px !important;
  font-weight: 600;
  min-height: 44px;
  padding: 0.65rem 1.25rem !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 10px 28px rgba(0, 0, 0, 0.18) !important;
}

html.tenzy-site .settings-actions .btn-primary:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.17), rgba(255, 255, 255, 0.08)) !important;
  border-color: rgba(255, 255, 255, 0.26) !important;
  color: #fff !important;
  transform: none;
}

html.tenzy-site .settings-actions .btn-secondary {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.04)) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: #f1f5f9 !important;
  border-radius: 14px !important;
  font-weight: 600;
  min-height: 44px;
  padding: 0.65rem 1.35rem !important;
}

html.tenzy-site .settings-actions .btn-secondary:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.17), rgba(255, 255, 255, 0.08)) !important;
  border-color: rgba(255, 255, 255, 0.26) !important;
  color: #fff !important;
}

html.tenzy-site .success-message {
  background: rgba(6, 78, 59, 0.35) !important;
  border: 1px solid rgba(52, 211, 153, 0.35) !important;
  color: #a7f3d0 !important;
  border-radius: 12px;
}

html.tenzy-site .settings-container .settings-preference-check {
  width: 2.42rem;
  min-width: 2.42rem;
  height: 1.32rem;
  margin: 0.18rem 0 0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 0.42rem;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

html.tenzy-site .settings-container .settings-preference-check:hover {
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

html.tenzy-site .settings-container .settings-preference-check:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.2);
  outline-offset: 2px;
}

html.tenzy-site .settings-container .settings-preference-check::after {
  left: 3px;
  top: 50%;
  width: 0.84rem;
  height: 0.84rem;
  border-radius: 0.24rem;
  background: #fff;
  border: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
  opacity: 1;
  transform: translateY(-50%);
}

html.tenzy-site .settings-container .settings-preference-check:checked {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.09));
  border-color: rgba(255, 255, 255, 0.32);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

html.tenzy-site .settings-container .settings-preference-check:checked::after {
  transform: translateY(-50%) translateX(1.06rem);
}

/* Lessons directory — “Don’t know where to start” (override app-theme compact buttons) */
html.codii-app.tenzy-site .start-guide-btn {
  min-height: auto !important;
  padding: 0.9rem 1.6rem !important;
  font-size: 0.92rem !important;
  border-radius: 999px !important;
  border: 2px solid rgba(167, 139, 250, 0.55) !important;
  background: linear-gradient(
    135deg,
    rgba(124, 58, 237, 0.42),
    rgba(219, 39, 119, 0.2),
    rgba(8, 145, 178, 0.22)
  ) !important;
  color: #fff !important;
  box-shadow: 0 10px 36px rgba(124, 58, 237, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

html.codii-app.tenzy-site .start-guide-btn:hover {
  border-color: rgba(196, 181, 253, 0.75) !important;
  filter: brightness(1.05);
  transform: translateY(-2px);
  box-shadow: 0 14px 44px rgba(219, 39, 119, 0.25);
}

html.tenzy-site .lesson-card .lesson-start-btn {
  background: linear-gradient(135deg, #7c3aed 0%, #db2777 55%, #0891b2 100%) !important;
  background-size: 200% 200%;
  border: none !important;
  color: #fff !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
  padding: 0.55rem 1.15rem !important;
  box-shadow: 0 8px 28px rgba(124, 58, 237, 0.35);
}

html.tenzy-site .lesson-card .lesson-start-btn:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

html.tenzy-site .lesson-card .lesson-progress {
  background: rgba(0, 0, 0, 0.35) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

html.tenzy-site .lesson-card .lesson-progress-bar {
  background: linear-gradient(90deg, #7c3aed, #22d3ee) !important;
}

html.tenzy-site .lesson-card .lesson-progress-label {
  color: rgba(196, 200, 220, 0.9) !important;
}

html.tenzy-site .codii-account-page .settings-card.panel,
html.tenzy-site .codii-account-card {
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.02)) !important;
  border: 1px solid rgba(255, 255, 255, 0.11) !important;
  border-radius: 22px !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.38) !important;
}

html.tenzy-site .settings-container.codii-account-page {
  max-width: 1180px;
  padding-top: 0.9rem !important;
}

html.tenzy-site .codii-account-card {
  padding: clamp(1.25rem, 3vw, 2.2rem) !important;
}

html.tenzy-site .codii-account-hero {
  display: block;
}

@media (min-width: 1240px) {
  html.tenzy-site .codii-account-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 1.5rem !important;
  }
}

html.tenzy-site .codii-account-profile {
  margin: 0;
  padding: 1rem 1.1rem;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 18px 42px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

html.tenzy-site .codii-account-avatar-wrap {
  border-radius: 24px !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.12), rgba(113, 113, 122, 0.08)) !important;
}

html.tenzy-site .codii-account-avatar-wrap img {
  border-radius: 24px !important;
}

html.tenzy-site .codii-account-avatar-fallback {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.08), rgba(15, 23, 42, 0.32)) !important;
  color: rgba(226, 232, 240, 0.92) !important;
}

html.tenzy-site .codii-account-display-name {
  color: #fff !important;
}

html.tenzy-site .codii-account-email,
html.tenzy-site .codii-account-section-desc,
html.tenzy-site .codii-account-plan-billing,
html.tenzy-site .codii-account-plan-local-hint,
html.tenzy-site .codii-account-plan-cancel-note,
html.tenzy-site .codii-account-aside-list,
html.tenzy-site .codii-account-link-settings {
  color: rgba(196, 200, 220, 0.9) !important;
}

html.tenzy-site .codii-account-panel,
html.tenzy-site .codii-account-aside {
  border-radius: 20px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025)) !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

html.tenzy-site .codii-account-divider {
  background: rgba(255, 255, 255, 0.12) !important;
}

html.tenzy-site .codii-account-plan {
  border-color: rgba(255, 255, 255, 0.12) !important;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.035)) !important;
}

html.tenzy-site .codii-account-plan-tier-name,
html.tenzy-site .codii-account-plan-price,
html.tenzy-site .codii-account-plan-metric-value,
html.tenzy-site .codii-account-plan-features,
html.tenzy-site .codii-account-section-title,
html.tenzy-site .codii-account-aside-title {
  color: #f8fafc !important;
}

html.tenzy-site .codii-account-plan-metric,
html.tenzy-site .codii-account-danger-zone {
  border-color: rgba(255, 255, 255, 0.12) !important;
  background: rgba(255, 255, 255, 0.05) !important;
}

html.tenzy-site .codii-account-danger-zone {
  border-color: rgba(248, 113, 113, 0.24) !important;
  background: rgba(127, 29, 29, 0.12) !important;
}

html.tenzy-site .codii-account-badge {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

html.tenzy-site .codii-account-actions {
  gap: 0.8rem !important;
  align-items: stretch;
}

html.tenzy-site .codii-account-actions .codii-account-logout,
html.tenzy-site .codii-account-actions .codii-account-link-settings {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.72rem 1rem !important;
  border-radius: 14px !important;
  font-size: 0.92rem;
  line-height: 1.2;
}

html.tenzy-site .codii-account-link-settings {
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.045)) !important;
  color: #f8fafc !important;
  text-decoration: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 10px 28px rgba(0, 0, 0, 0.18) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

html.tenzy-site .codii-account-link-settings:hover {
  border-color: rgba(255, 255, 255, 0.26) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.17), rgba(255, 255, 255, 0.08)) !important;
  color: #fff !important;
}

html.tenzy-site .codii-account-page .settings-input,
html.tenzy-site .codii-account-page .codii-account-input,
html.tenzy-site .codii-account-page .codii-account-input-full {
  border-radius: 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.13) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  color: #f8fafc !important;
}

html.tenzy-site .codii-account-page .settings-input:focus,
html.tenzy-site .codii-account-page .codii-account-input:focus,
html.tenzy-site .codii-account-page .codii-account-input-full:focus {
  border-color: rgba(255, 255, 255, 0.24) !important;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08) !important;
}

html.tenzy-site .codii-account-page .btn.btn-secondary,
html.tenzy-site .codii-account-page .codii-account-logout,
html.tenzy-site .codii-account-page .codii-account-file-label .btn.btn-secondary {
  border-radius: 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.045)) !important;
  color: #f8fafc !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 10px 28px rgba(0, 0, 0, 0.18) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

html.tenzy-site .codii-account-page .btn.btn-secondary:hover,
html.tenzy-site .codii-account-page .codii-account-logout:hover,
html.tenzy-site .codii-account-page .codii-account-file-label .btn.btn-secondary:hover {
  border-color: rgba(255, 255, 255, 0.26) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.17), rgba(255, 255, 255, 0.08)) !important;
  color: #fff !important;
}

html.tenzy-site .codii-account-page .btn.btn-primary {
  border-radius: 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.06)) !important;
  color: #fff !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 12px 30px rgba(0, 0, 0, 0.18) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

html.tenzy-site .codii-account-page .btn.btn-primary:hover {
  border-color: rgba(255, 255, 255, 0.28) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.09)) !important;
  color: #fff !important;
}

html.tenzy-site .codii-account-delete-confirm-btn {
  border-radius: 14px !important;
  border: 1px solid rgba(248, 113, 113, 0.28) !important;
  background: linear-gradient(180deg, rgba(248, 113, 113, 0.22), rgba(127, 29, 29, 0.16)) !important;
  color: #fff !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  max-width: 100%;
  min-height: 48px;
  padding: 0.82rem 1rem !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 14px 34px rgba(127, 29, 29, 0.22) !important;
}

html.tenzy-site .codii-account-danger-zone #tenzyDeleteRequestBtn {
  min-height: 46px;
  padding: 0.72rem 1rem !important;
}

html.tenzy-site .codii-account-msg {
  border-radius: 16px !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  background: rgba(255, 255, 255, 0.05) !important;
}

html.tenzy-site .codii-account-msg--ok {
  background: rgba(6, 78, 59, 0.28) !important;
  border-color: rgba(45, 212, 191, 0.22) !important;
}

html.tenzy-site .codii-account-msg--err {
  background: rgba(127, 29, 29, 0.28) !important;
  border-color: rgba(248, 113, 113, 0.22) !important;
}

/* Pricing page */
html.tenzy-site .premium-plan-policy-note {
  color: rgba(196, 200, 220, 0.88) !important;
  font-size: 0.82rem !important;
  line-height: 1.55 !important;
  max-width: 52rem;
  margin-top: 0.65rem !important;
}

html.tenzy-site .pricing-grid {
  gap: 1.25rem;
}

html.tenzy-site .pricing-card {
  background: linear-gradient(165deg, rgba(22, 18, 42, 0.9), rgba(10, 9, 18, 0.95)) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 20px !important;
  box-shadow: 0 20px 56px rgba(0, 0, 0, 0.42) !important;
}

html.tenzy-site .pricing-card.premium {
  border-color: rgba(167, 139, 250, 0.35) !important;
  box-shadow: 0 20px 56px rgba(124, 58, 237, 0.2) !important;
}

html.tenzy-site .pricing-card.infinite {
  border-color: rgba(52, 211, 153, 0.35) !important;
}

html.tenzy-site .premium-status-banner {
  background: rgba(124, 58, 237, 0.12) !important;
  border: 1px solid rgba(167, 139, 250, 0.3) !important;
  border-radius: 14px;
  color: rgba(233, 213, 255, 0.95) !important;
}

html.tenzy-site .premium-status-banner--err {
  background: rgba(239, 68, 68, 0.12) !important;
  border-color: rgba(248, 113, 113, 0.45) !important;
  color: #fecaca !important;
}

html.tenzy-site .premium-plan-alert-overlay {
  background: rgba(7, 7, 12, 0.76);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

html.tenzy-site .premium-plan-alert-modal {
  max-width: 28rem;
  border: 1px solid rgba(248, 113, 113, 0.34);
  background:
    linear-gradient(180deg, rgba(58, 18, 22, 0.94), rgba(20, 8, 10, 0.98)) !important;
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.52),
    0 0 0 1px rgba(248, 113, 113, 0.08) inset;
}

html.tenzy-site .premium-plan-alert-modal .modal-header {
  border-bottom: 1px solid rgba(248, 113, 113, 0.18);
}

html.tenzy-site .premium-plan-alert-modal .modal-header h3 {
  color: #fee2e2;
}

html.tenzy-site .premium-plan-alert-modal .modal-close {
  color: rgba(254, 226, 226, 0.82);
}

html.tenzy-site .premium-plan-alert-modal .modal-close:hover {
  background: rgba(248, 113, 113, 0.12);
  color: #fff;
}

html.tenzy-site .premium-plan-alert-content p {
  color: rgba(254, 202, 202, 0.94);
  line-height: 1.65;
}

html.tenzy-site .premium-plan-alert-modal .modal-actions {
  justify-content: flex-end;
}

html.tenzy-site .pricing-title,
html.tenzy-site .pricing-price {
  color: #fff !important;
}

/* Single gradient dot bullets (avoid double-bullet with list-style) */
html.tenzy-site ul.pricing-list {
  list-style: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

html.tenzy-site .pricing-list li {
  position: relative;
  padding-left: 1.2rem !important;
  color: rgba(210, 214, 235, 0.92) !important;
}

html.tenzy-site .pricing-list li::before {
  content: '' !important;
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: linear-gradient(135deg, #c4b5fd, #22d3ee);
  box-shadow: 0 0 10px rgba(167, 139, 250, 0.45);
}

@keyframes tenzy-site-cta-shimmer {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

@keyframes tenzy-site-spin {
  to {
    transform: rotate(360deg);
  }
}

html.tenzy-site .plan-btn-spinner {
  display: inline-block;
  width: 0.95rem;
  height: 0.95rem;
  margin-right: 0.4rem;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  vertical-align: -0.12em;
  animation: tenzy-site-spin 0.65s linear infinite;
}

/* Plan cards: stretch so CTA sits at bottom */
html.tenzy-site .pricing-grid-balanced .pricing-card,
html.tenzy-site .pricing-grid .pricing-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
}

html.tenzy-site .pricing-card .pricing-list {
  flex: 1;
}

/* All plan CTAs */
html.tenzy-site .pricing-card .pricing-action {
  width: 100%;
  margin-top: 1.1rem;
  padding: 0.9rem 1.2rem;
  font-size: 0.95rem;
  font-weight: 600;
  font-family: inherit;
  border-radius: 14px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease, border-color 0.2s ease;
  border: 1px solid transparent;
  box-sizing: border-box;
}

html.tenzy-site .pricing-card .pricing-action:hover:not(:disabled) {
  transform: translateY(-2px);
}

html.tenzy-site .pricing-card .pricing-action:disabled {
  cursor: default;
  transform: none;
}

/* Free tier */
html.tenzy-site .pricing-card[data-tier='free'] .pricing-action {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.05)) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  color: #f8fafc !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

html.tenzy-site .pricing-card[data-tier='free'] .pricing-action:hover:not(:disabled) {
  border-color: rgba(167, 139, 250, 0.5) !important;
  box-shadow: 0 12px 40px rgba(124, 58, 237, 0.22);
}

html.tenzy-site .pricing-card[data-tier='free'] .pricing-action:disabled,
html.tenzy-site .pricing-card[data-tier='free'] .pricing-action.plan-current {
  filter: none;
  opacity: 0.9;
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: rgba(226, 232, 240, 0.88) !important;
  box-shadow: none;
}

/* Premium — violet / magenta / cyan */
html.tenzy-site .pricing-card.premium .pricing-action {
  background: linear-gradient(135deg, #7c3aed 0%, #db2777 50%, #0891b2 100%) !important;
  background-size: 220% 220%;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 10px 42px rgba(124, 58, 237, 0.48), 0 0 0 1px rgba(255, 255, 255, 0.06);
}

html.tenzy-site .pricing-card.premium .pricing-action:hover:not(:disabled) {
  box-shadow: 0 14px 52px rgba(219, 39, 119, 0.38);
}

@media (prefers-reduced-motion: no-preference) {
  html.tenzy-site .pricing-card.premium .pricing-action:not(:disabled):not(.plan-current) {
    animation: tenzy-site-cta-shimmer 7s ease infinite;
  }
}

html.tenzy-site .pricing-card.premium .pricing-action:disabled {
  opacity: 0.95;
  filter: brightness(0.94) saturate(1.05);
  box-shadow: 0 8px 32px rgba(124, 58, 237, 0.35);
}

/* Infinite — emerald / teal into violet (distinct from Premium) */
html.tenzy-site .pricing-card.infinite .pricing-action {
  background: linear-gradient(135deg, #059669 0%, #0d9488 38%, #6366f1 72%, #7c3aed 100%) !important;
  background-size: 240% 240%;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 10px 42px rgba(16, 185, 129, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.06);
}

html.tenzy-site .pricing-card.infinite .pricing-action:hover:not(:disabled) {
  box-shadow: 0 14px 52px rgba(45, 212, 191, 0.32);
}

@media (prefers-reduced-motion: no-preference) {
  html.tenzy-site .pricing-card.infinite .pricing-action:not(:disabled):not(.plan-current) {
    animation: tenzy-site-cta-shimmer 9s ease infinite;
  }
}

html.tenzy-site .pricing-card.infinite .pricing-action:disabled {
  opacity: 0.95;
  filter: brightness(0.93);
  box-shadow: 0 8px 36px rgba(5, 150, 105, 0.28);
}

@media (prefers-reduced-motion: reduce) {
  html.tenzy-site .pricing-card.premium .pricing-action,
  html.tenzy-site .pricing-card.infinite .pricing-action {
    animation: none !important;
  }
}

/* Sign in / register (auth.html) */
html.tenzy-site .tenzy-auth-main {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: 0;
  padding: 1.5rem clamp(0.75rem, 3vw, 1.5rem) 3rem !important;
}

html.tenzy-site .tenzy-auth-page {
  width: 100%;
  max-width: 440px;
}

html.tenzy-site .auth-card {
  width: 100%;
  box-sizing: border-box;
  padding: 1.85rem clamp(1.25rem, 4vw, 1.85rem);
  border-radius: 22px;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03)) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.48) !important;
}

html.tenzy-site .auth-card h1 {
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0 0 0.35rem;
  color: #fff !important;
  letter-spacing: -0.02em;
}

html.tenzy-site .auth-card .sub {
  font-size: 0.88rem;
  color: rgba(196, 200, 220, 0.88) !important;
  margin: 0 0 1.2rem;
  line-height: 1.45;
}

html.tenzy-site .auth-panel .sub {
  margin-top: 0;
}

html.tenzy-site .auth-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

html.tenzy-site .auth-tabs button {
  flex: 1;
  padding: 0.55rem 0.65rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: rgba(0, 0, 0, 0.22) !important;
  color: rgba(220, 224, 245, 0.9) !important;
  font-weight: 600;
  cursor: pointer;
  font-size: 0.88rem;
  font-family: inherit;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

html.tenzy-site .auth-tabs button:hover {
  border-color: rgba(148, 163, 184, 0.35) !important;
}

html.tenzy-site .auth-tabs button.active {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  color: #f8fafc !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

html.tenzy-site .auth-field {
  margin-bottom: 1rem;
}

html.tenzy-site .auth-field label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(186, 190, 215, 0.9) !important;
  margin-bottom: 0.4rem;
}

html.tenzy-site .auth-field input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.72rem 0.85rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: rgba(0, 0, 0, 0.28) !important;
  color: #f8fafc !important;
  font-size: 0.95rem;
  font-family: inherit;
}

html.tenzy-site .auth-field input:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.24) !important;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08);
}

html.tenzy-site .auth-checkbox-label {
  color: rgba(196, 200, 220, 0.92);
}

html.tenzy-site .auth-checkbox-label a {
  color: #f8fafc;
}

html.tenzy-site .auth-checkbox-label a:hover {
  color: #fff;
}

html.tenzy-site .auth-submit {
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.82rem 1rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  font-weight: 600;
  cursor: pointer;
  font-size: 0.95rem;
  font-family: inherit;
  color: #fff !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.06)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 10px 28px rgba(0, 0, 0, 0.3);
  transition: transform 0.15s ease, filter 0.2s ease, box-shadow 0.2s ease;
}

html.tenzy-site .auth-submit:hover:not(:disabled) {
  border-color: rgba(255, 255, 255, 0.28) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.09)) !important;
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    0 14px 36px rgba(0, 0, 0, 0.34);
}

html.tenzy-site .auth-submit:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none;
}

/* Stronger than html.codii-app button / theme vars — fixes white-on-white primary auth CTAs */
html.tenzy-site.codii-app .tenzy-auth-main button.auth-submit:not(.auth-submit--ghost):not(.auth-submit--link) {
  color: #fff !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.06)) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 10px 28px rgba(0, 0, 0, 0.3) !important;
}

html.tenzy-site.codii-app .tenzy-auth-main button.auth-submit:not(.auth-submit--ghost):not(.auth-submit--link):hover:not(:disabled) {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

html.tenzy-site.codii-app .tenzy-auth-main .auth-tabs button {
  color: rgba(220, 224, 245, 0.9) !important;
  background: rgba(0, 0, 0, 0.22) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

html.tenzy-site.codii-app .tenzy-auth-main .auth-tabs button.active {
  color: #f8fafc !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

html.tenzy-site .auth-submit--ghost {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.045)) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: rgba(241, 245, 249, 0.95) !important;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

html.tenzy-site .auth-submit--ghost:hover:not(:disabled) {
  border-color: rgba(255, 255, 255, 0.28) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.17), rgba(255, 255, 255, 0.08)) !important;
  filter: none;
}

html.tenzy-site .auth-submit--link {
  margin-top: 0.75rem;
  padding: 0.55rem 0.75rem;
  font-size: 0.82rem;
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: rgba(196, 200, 220, 0.92) !important;
  border-radius: 10px;
  box-shadow: none;
}

html.tenzy-site .auth-submit--link:hover:not(:disabled) {
  border-color: rgba(255, 255, 255, 0.22) !important;
  color: #e8e9ef !important;
}

html.tenzy-site .auth-link-wrap {
  text-align: center;
  margin: 0.85rem 0 0;
}

html.tenzy-site .auth-link-btn {
  background: none !important;
  border: none !important;
  padding: 0;
  font: inherit;
  color: rgba(215, 220, 236, 0.92) !important;
  font-size: 0.82rem;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

html.tenzy-site .auth-link-btn:hover {
  color: #e8e9ef !important;
}

html.tenzy-site .auth-msg {
  font-size: 0.85rem;
  margin-top: 0.75rem;
  padding: 0.65rem 0.8rem;
  border-radius: 12px;
  display: none;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

html.tenzy-site .auth-msg.show {
  display: block;
}

html.tenzy-site .auth-msg.err {
  background: rgba(127, 29, 29, 0.35) !important;
  color: #fecaca !important;
  border-color: rgba(248, 113, 113, 0.35) !important;
}

html.tenzy-site .auth-msg.ok {
  background: rgba(6, 78, 59, 0.35) !important;
  color: #a7f3d0 !important;
  border-color: rgba(52, 211, 153, 0.35) !important;
}

html.tenzy-site .auth-code-banner.auth-msg.ok {
  font-family: ui-monospace, monospace;
  letter-spacing: 0.15em;
  font-size: 1.05rem;
  text-align: center;
}

html.tenzy-site .auth-panel {
  display: none;
}

html.tenzy-site .auth-panel.active {
  display: block;
}

html.tenzy-site .auth-signed-in-card {
  padding: 1rem 1.05rem;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

html.tenzy-site .auth-signed-in-name {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff !important;
}

html.tenzy-site .auth-signed-in-email {
  margin: 0.3rem 0 0;
  color: rgba(196, 200, 220, 0.9) !important;
  word-break: break-word;
}

html.tenzy-site .auth-signed-in-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1rem;
}

html.tenzy-site .auth-signed-in-actions .auth-submit {
  margin-top: 0;
  text-align: center;
  text-decoration: none;
}

html.tenzy-site .auth-submit--account {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.72rem;
}

html.tenzy-site .auth-account-chip__avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
}

html.tenzy-site .auth-account-chip__fallback {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff;
}

html.tenzy-site .auth-account-chip__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Lesson runner (lesson.html) — flow cards, demos, CTAs */
html.tenzy-site body.lesson-page .lesson-section-header h3,
html.tenzy-site .lesson-section-header #lessonFlowTitle {
  color: #fff !important;
  font-weight: 700;
  letter-spacing: -0.02em;
}

html.tenzy-site .lesson-section-header #lessonFlowSubtitle {
  color: rgba(196, 200, 220, 0.9) !important;
}

html.tenzy-site .lesson-topbar {
  background: rgba(0, 0, 0, 0.22) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 14px;
  padding: 0.35rem 0.5rem 0.35rem 0.35rem;
  gap: 0.5rem;
}

html.tenzy-site .lesson-topbar .lesson-back-btn {
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: #f1f5f9 !important;
}

html.tenzy-site .lesson-topbar-actions .btn-secondary,
html.tenzy-site .lesson-topbar #saveQuitBtn {
  border-radius: 12px !important;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04)) !important;
  color: #f8fafc !important;
}

html.tenzy-site .lesson-topbar-actions .btn-secondary:hover,
html.tenzy-site .lesson-topbar #saveQuitBtn:hover {
  border-color: rgba(167, 139, 250, 0.45) !important;
}

html.tenzy-site .step-progress-track {
  border-color: rgba(255, 255, 255, 0.12) !important;
  background: rgba(0, 0, 0, 0.35) !important;
}

html.tenzy-site .step-progress-bar {
  background: linear-gradient(90deg, #7c3aed, #22d3ee, #db2777) !important;
}

html.tenzy-site .step-progress-label {
  color: rgba(196, 200, 220, 0.92) !important;
}

html.tenzy-site .lesson-stage {
  background: rgba(0, 0, 0, 0.16) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 18px;
  padding: 0.75rem !important;
}

html.tenzy-site .lesson-flow-card {
  background: linear-gradient(165deg, rgba(22, 18, 42, 0.92), rgba(10, 9, 18, 0.96)) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 20px !important;
  box-shadow: 0 22px 56px rgba(0, 0, 0, 0.45) !important;
}

html.tenzy-site .lesson-flow-card h4 {
  color: #fff !important;
}

html.tenzy-site .lesson-flow-card p,
html.tenzy-site .lesson-flow-card .hint {
  color: rgba(196, 200, 220, 0.9) !important;
}

html.tenzy-site .demo-code,
html.tenzy-site .lesson-flow-card .demo-code {
  background: rgba(0, 0, 0, 0.45) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 14px !important;
}

html.tenzy-site .demo-toggle-btn {
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  background: rgba(0, 0, 0, 0.25) !important;
  color: #e8e9ef !important;
}

html.tenzy-site .demo-toggle-btn.active {
  background: linear-gradient(135deg, #7c3aed, #0891b2) !important;
  border-color: transparent !important;
  color: #fff !important;
}

html.tenzy-site .demo-preview {
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 14px !important;
  overflow: hidden;
}

html.tenzy-site .lesson-flow-card .opt {
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: rgba(0, 0, 0, 0.22) !important;
  border-radius: 12px !important;
}

html.tenzy-site .lesson-flow-card .opt:hover {
  background: rgba(124, 58, 237, 0.15) !important;
  border-color: rgba(167, 139, 250, 0.35) !important;
}

html.tenzy-site .lesson-flow-card .input,
html.tenzy-site .lesson-flow-card textarea.input {
  background: rgba(0, 0, 0, 0.35) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #f1f5f9 !important;
  border-radius: 12px !important;
}

html.tenzy-site .lesson-actions .btn-primary,
html.tenzy-site .lesson-flow-card .btn-primary {
  background: linear-gradient(135deg, #7c3aed 0%, #db2777 52%, #0891b2 100%) !important;
  background-size: 220% 220%;
  border: none !important;
  color: #fff !important;
  border-radius: 14px !important;
  font-weight: 600 !important;
  padding: 0.65rem 1.35rem !important;
  box-shadow: 0 10px 36px rgba(124, 58, 237, 0.4);
  text-shadow: none !important;
}

html.tenzy-site .lesson-actions .btn-primary:hover,
html.tenzy-site .lesson-flow-card .btn-primary:hover {
  filter: brightness(1.06);
  transform: translateY(-2px);
  border-color: transparent !important;
}

html.tenzy-site .lesson-actions .btn-secondary,
html.tenzy-site .lesson-flow-card .btn-secondary {
  border-radius: 12px !important;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04)) !important;
  color: #f1f5f9 !important;
}

html.tenzy-site .tts-controls-container .btn-secondary {
  border-radius: 12px !important;
}

html.tenzy-site .ask-question-widget {
  background: rgba(124, 58, 237, 0.1) !important;
  border: 1px solid rgba(167, 139, 250, 0.3) !important;
  border-radius: 16px !important;
}

html.tenzy-site .ask-question-input {
  background: rgba(0, 0, 0, 0.3) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #f1f5f9 !important;
  border-radius: 12px !important;
}

html.tenzy-site .ask-question-btn {
  background: linear-gradient(135deg, #7c3aed, #0891b2) !important;
  border: none !important;
  color: #fff !important;
  border-radius: 12px !important;
  font-weight: 600;
}

/* Admin (admin.html) */
html.tenzy-site .admin-wrap-header.panel {
  max-width: 1120px;
  margin: 0 auto 1rem;
  padding: clamp(1.25rem, 3vw, 1.75rem) !important;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025)) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 22px !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.45) !important;
}

html.tenzy-site .admin-wrap-header h2 {
  color: #fff !important;
  margin: 0 0 0.35rem;
}

html.tenzy-site .admin-wrap-header p {
  color: rgba(196, 200, 220, 0.9) !important;
  margin: 0;
}

html.tenzy-site .admin-wrap.panel {
  max-width: 1120px;
  margin: 0 auto 3rem;
  padding: 0 clamp(0.75rem, 2vw, 1.5rem) 3rem !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

html.tenzy-site .admin-toolbar.panel {
  background: rgba(0, 0, 0, 0.22) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 16px !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35) !important;
}

html.tenzy-site .admin-card {
  background: linear-gradient(165deg, rgba(22, 18, 42, 0.9), rgba(10, 9, 18, 0.95)) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.4) !important;
}

html.tenzy-site .admin-section-title {
  color: #f8fafc !important;
}

html.tenzy-site .admin-input,
html.tenzy-site .admin-textarea,
html.tenzy-site .admin-select {
  background: rgba(0, 0, 0, 0.25) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #f1f5f9 !important;
}

html.tenzy-site .admin-step {
  background: rgba(0, 0, 0, 0.2) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

html.tenzy-site .btn-admin {
  border-radius: 12px;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04)) !important;
  color: #f1f5f9 !important;
}

html.tenzy-site .btn-admin:hover:not(:disabled) {
  border-color: rgba(167, 139, 250, 0.45) !important;
}

html.tenzy-site .btn-admin.secondary {
  background: transparent !important;
  color: rgba(226, 232, 240, 0.92) !important;
}

html.tenzy-site .btn-danger {
  border-radius: 12px;
  font-weight: 600;
}

html.tenzy-site .admin-status-pill {
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.25);
}

/* Modals / overlays on site pages */
html.tenzy-site .search-overlay {
  background: rgba(5, 4, 12, 0.78) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

html.tenzy-site .search-panel,
html.tenzy-site .gen-panel {
  background: rgba(14, 12, 26, 0.96) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 18px !important;
  backdrop-filter: blur(16px);
}

/* Guided start modal (lessons.html) */
html.tenzy-site #guidedStartModal.modal-overlay,
html.tenzy-site #guidedStartResultOverlay.modal-overlay {
  background: rgba(5, 4, 12, 0.82) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

html.tenzy-site #guidedStartModal .modal,
html.tenzy-site #guidedStartResultOverlay .modal {
  background: rgba(14, 12, 26, 0.97) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 22px !important;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.55) !important;
}

html.tenzy-site .guided-start-modal .modal-header h3,
html.tenzy-site .guided-start-result .modal-header h3 {
  color: #fff !important;
}

html.tenzy-site .guided-start-body,
html.tenzy-site .guided-start-content {
  color: rgba(210, 214, 235, 0.92);
}

html.tenzy-site .guided-start-steps li.active {
  color: #fff !important;
  border-color: rgba(167, 139, 250, 0.45) !important;
}

html.tenzy-site .guided-start-footer .btn-primary {
  background: linear-gradient(135deg, #7c3aed, #0891b2) !important;
  border: none !important;
  color: #fff !important;
  border-radius: 14px !important;
  font-weight: 600;
}

html.tenzy-site .guided-start-footer .btn-secondary {
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: #f1f5f9 !important;
}

/* Mobile nav */
@media (max-width: 768px) {
  html.tenzy-site .tenzy-site-nav {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }

  html.tenzy-site .tl-nav__brand {
    justify-content: center;
  }

  html.tenzy-site .tl-nav__links {
    justify-content: center;
  }

  html.tenzy-site .tenzy-site-nav-fill {
    display: none;
  }

  html.tenzy-site .tenzy-site-nav .search-button {
    width: 100%;
    justify-content: center;
  }

  html.tenzy-site .tenzy-site-nav .header-actions {
    justify-content: center;
  }
}