/**
 * Tenzy — site-wide depth, glass, perspective (loads after landing.css / app-theme.css).
 * Pairs with Practice OS zinc + gold; avoids rainbow chrome.
 */

/* --------------------------------------------------------------------------
 * Motion access
 * -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .tl-shell,
  .tl-main,
  .tl-hero,
  .tl-hero__visual,
  html.codii-app:is(.codii-app-page-lessons, .codii-app-page-overview) .languages-grid,
  html.codii-app:is(.codii-app-page-lessons, .codii-app-page-overview) .lessons-grid {
    perspective: none !important;
  }

  html.tenzy-landing .tl-bg__grid {
    transform: none !important;
    will-change: auto !important;
  }

  html.codii-app .tl-bg__grid {
    transform: none !important;
  }

  html.tenzy-landing .tl-feature-card,
  html.tenzy-landing .tl-download__card,
  html.tenzy-landing .tl-btn:not(:disabled),
  html.codii-app .lesson-card,
  html.codii-app .language-card,
  html.codii-app .panel,
  html.codii-app .settings-card,
  html.codii-app .pricing-card,
  html.codii-app .admin-card,
  html.codii-app .metric-card,
  html.codii-app .stat-card {
    transform: none !important;
    transition-duration: 0.01ms !important;
  }

  html.tenzy-landing .tl-hero__visual {
    animation: none !important;
  }
}

/* Hidden scrollbars — codii-app marketing pages without html.tenzy-site */
html.codii-app:not(.tenzy-site),
html.codii-app:not(.tenzy-site) body {
  scrollbar-width: none;
}

html.codii-app:not(.tenzy-site)::-webkit-scrollbar,
html.codii-app:not(.tenzy-site) body::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

@media (prefers-reduced-motion: no-preference) {
  html.codii-app {
    scroll-behavior: smooth;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.codii-app {
    scroll-behavior: auto;
  }
}

/* --------------------------------------------------------------------------
 * Landing — perspective scene + glass chrome
 * -------------------------------------------------------------------------- */
html.tenzy-landing {
  --tz-perp: clamp(960px, 110vw, 1680px);
  --tz-blur: 18px;
}

html.tenzy-landing .tl-shell {
  perspective: var(--tz-perp);
}

html.tenzy-landing .tl-main {
  transform-style: preserve-3d;
}

html.tenzy-landing .tl-hero {
  perspective: var(--tz-perp);
  transform-style: preserve-3d;
}

@media (prefers-reduced-motion: no-preference) {
  html.tenzy-landing .tl-hero__visual {
    transform-style: preserve-3d;
    animation: tz-hero-rise 1s cubic-bezier(0.2, 0.85, 0.25, 1) both;
  }

  @keyframes tz-hero-rise {
    from {
      opacity: 0.88;
      transform: translateY(14px) translateZ(-40px) rotateX(6deg);
    }
    to {
      opacity: 1;
      transform: translateY(0) translateZ(18px) rotateX(0deg);
    }
  }
}

/* =======================================================================
 * Requested refinement pass (layout + convenience, same color scheme)
 * =======================================================================
 */

/* Language cards on lessons/overview: banana frame comes from site-theme + SVG perimeter */
html.codii-app:is(.codii-app-page-lessons, .codii-app-page-overview) .language-card::after {
  inset: 0;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 0 0 1px rgba(0, 0, 0, 0.22);
}

/* 2) "Don't know where to start?" CTA + popup ergonomics */
html.codii-app .start-guide-btn,
html.codii-app .overview-start-guide-btn {
  min-height: 48px;
  padding: 0.7rem 1.15rem;
  border-radius: 14px;
  font-weight: 650;
}

html.codii-app #guidedStartModal .modal-header,
html.codii-app #guidedStartResultOverlay .modal-header {
  padding: 1rem 1.15rem;
}

html.codii-app .guided-start-content {
  grid-template-columns: minmax(220px, 250px) 1fr;
  gap: 1rem;
}

html.codii-app .guided-question h4 {
  font-size: 1.03rem;
  line-height: 1.35;
}

html.codii-app .guided-question-options {
  gap: 0.6rem;
}

html.codii-app .guided-question-options button {
  border-radius: 12px;
  justify-content: flex-start;
  text-align: left;
  padding: 0.72rem 1rem;
}

html.codii-app .guided-result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

/* 3) Plans page spacing */
html.codii-app.codii-app-page-premium .premium-main .languages-section.panel {
  padding: clamp(1rem, 2vw, 1.35rem);
}

html.codii-app.codii-app-page-premium .pricing-card .pricing-title {
  margin-bottom: 0.35rem;
}

html.codii-app.codii-app-page-premium .pricing-card .pricing-price {
  margin-bottom: 0.65rem;
}

html.codii-app.codii-app-page-premium .pricing-list {
  margin: 0 0 0.95rem;
}

/* 4) Account layout + spacing */
html.codii-app.codii-app-page-account .settings-container.codii-account-page {
  gap: 1.05rem;
}

html.codii-app.codii-app-page-account .codii-account-hero {
  margin-bottom: 0.8rem;
}

html.codii-app.codii-app-page-account .codii-account-plan {
  margin-bottom: 0.9rem;
  padding: clamp(0.85rem, 1.7vw, 1.1rem);
}

html.codii-app.codii-app-page-account .codii-account-plan-head {
  gap: 0.7rem;
}

html.codii-app.codii-app-page-account .codii-account-grid {
  margin-top: 0.55rem;
}

html.codii-app.codii-app-page-account .codii-account-panel {
  border-radius: 16px;
}

/* 5) Lessons "ask a question" UI + progress bar */
html.codii-app.codii-app-page-lesson .lesson-flow-card .ask-ai-inline,
html.codii-app.codii-app-page-lesson .lesson-flow-card .ask-question-row,
html.codii-app.codii-app-page-lesson .lesson-flow-card .ask-question-panel {
  border-radius: 12px;
  padding: 0.7rem 0.8rem;
  background: color-mix(in oklab, var(--bg-surface-1, #09090b) 70%, transparent);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

html.codii-app.codii-app-page-lesson .lesson-flow-card .ask-ai-inline .btn,
html.codii-app.codii-app-page-lesson .lesson-flow-card .ask-question-row .btn {
  min-height: 42px;
}

html.codii-app.codii-app-page-lesson .step-progress {
  gap: 0.65rem;
}

html.codii-app.codii-app-page-lesson .step-progress-track {
  width: clamp(180px, 32vw, 280px);
  height: 10px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--bg-surface-1, #09090b) 85%, transparent);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

html.codii-app.codii-app-page-lesson .step-progress-bar {
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18) inset;
}

html.codii-app.codii-app-page-lesson .step-progress-label {
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* 6) Auth layout + no weird flash */
html.auth-boot .tenzy-auth-main {
  opacity: 0;
  transform: translateY(3px);
}

html.auth-boot body.auth-ui-ready .tenzy-auth-main {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 180ms ease, transform 180ms ease;
}

html.codii-app.codii-app-page-auth .tenzy-auth-page {
  max-width: 470px;
}

html.codii-app.codii-app-page-auth .auth-card {
  border-radius: 16px;
  padding: clamp(1.15rem, 2.3vw, 1.5rem);
}

html.codii-app.codii-app-page-auth .auth-field {
  margin-bottom: 0.85rem;
}

html.codii-app.codii-app-page-auth .auth-msg {
  margin-top: 0.65rem;
}

/* Responsive tweak for guided-start split */
@media (max-width: 920px) {
  html.codii-app .guided-start-content {
    grid-template-columns: 1fr;
    max-height: none;
  }

  html.codii-app .guided-start-progress {
    border-right: 0;
    border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.12));
    padding-right: 0;
    padding-bottom: 0.75rem;
    max-height: 180px;
  }
}

/* -----------------------------------------------------------------------
 * Explicit dropdown UI for Sort controls (lessons)
 * -----------------------------------------------------------------------
 */
html.codii-app.codii-app-page-lessons .lesson-toolbar .filter-select,
html.codii-app.codii-app-page-lessons #languageSortSelect,
html.codii-app.codii-app-page-lessons #sortSelect {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 2.25rem !important;
  border-radius: 12px;
  border: 1.5px solid color-mix(in oklab, var(--border-strong, rgba(255, 255, 255, 0.22)) 88%, transparent) !important;
  background-color: color-mix(in oklab, var(--bg-surface-2, #18181b) 90%, transparent) !important;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M3.25 5.25L7 9l3.75-3.75' fill='none' stroke='rgba(232,234,244,0.92)' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat;
  background-size: auto, 14px 14px;
  background-position: center, right 0.72rem center;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 8px 18px rgba(0, 0, 0, 0.24);
  cursor: pointer;
}

html.codii-app.codii-app-page-lessons .lesson-toolbar .filter-select:hover,
html.codii-app.codii-app-page-lessons #languageSortSelect:hover,
html.codii-app.codii-app-page-lessons #sortSelect:hover {
  border-color: color-mix(in oklab, var(--accent-primary, #818cf8) 45%, rgba(255, 255, 255, 0.24)) !important;
}

html.codii-app.codii-app-page-lessons .lesson-toolbar .filter-select:focus,
html.codii-app.codii-app-page-lessons #languageSortSelect:focus,
html.codii-app.codii-app-page-lessons #sortSelect:focus {
  outline: none;
  border-color: color-mix(in oklab, var(--accent-primary, #818cf8) 58%, rgba(255, 255, 255, 0.28)) !important;
  box-shadow:
    0 0 0 3px color-mix(in oklab, var(--accent-primary, #818cf8) 20%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 10px 24px rgba(0, 0, 0, 0.28);
}

/* Floating glass nav — full-width row, centered (never a side strip) */
html.tenzy-landing .tl-nav,
html.tenzy-site .tl-nav.tenzy-site-nav {
  display: flex;
  backdrop-filter: blur(var(--tz-blur));
  -webkit-backdrop-filter: blur(var(--tz-blur));
  background: color-mix(in oklab, #18181b 76%, transparent);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.07) inset,
    0 18px 42px rgba(0, 0, 0, 0.38),
    0 0 0 1px rgba(0, 0, 0, 0.35);
  box-sizing: border-box;
  width: min(1200px, calc(100% - 2 * clamp(0.65rem, 3vw, 1.75rem)));
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  margin-top: clamp(0.55rem, 2vw, 1rem);
}

@media (max-width: 768px) {
  html.tenzy-landing .tl-nav,
  html.tenzy-site .tl-nav.tenzy-site-nav {
    width: calc(100% - 2 * clamp(0.5rem, 2vw, 1rem));
    border-radius: 14px;
  }
}

html.tenzy-landing .tl-btn--secondary,
html.tenzy-landing .tl-btn--ghost {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

html.tenzy-landing .tl-feature-card {
  transform-style: preserve-3d;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: color-mix(in oklab, var(--tl-bg-elevated, #18181b) 72%, transparent) !important;
  border-color: rgba(255, 255, 255, 0.11) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.07) inset,
    0 16px 46px rgba(0, 0, 0, 0.28);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  html.tenzy-landing .tl-feature-card {
    transition:
      transform 0.38s cubic-bezier(0.22, 1, 0.36, 1),
      border-color 0.28s ease,
      box-shadow 0.38s ease;
  }

  html.tenzy-landing .tl-feature-card:hover {
    transform: translateY(-6px) rotateX(4deg) rotateY(-3deg) translateZ(12px);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.09) inset,
      0 28px 56px rgba(0, 0, 0, 0.38);
  }
}

html.tenzy-landing .tl-download__card {
  transform-style: preserve-3d;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

html.tenzy-landing .tl-download__inner {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  html.tenzy-landing .tl-download__card:hover {
    transform: translateY(-4px) rotateX(2deg) translateZ(8px);
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  }
}

html.tenzy-landing .tl-footer {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: color-mix(in oklab, #09090b 88%, transparent);
}

html.tenzy-landing .tenzy-header-account-pill {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* --------------------------------------------------------------------------
 * Marketing shell — purple premium chip → glass + gold (Practice OS)
 * -------------------------------------------------------------------------- */
html.tenzy-site .tenzy-site-nav .header-actions .btn-premium {
  background: linear-gradient(
    145deg,
    color-mix(in oklab, var(--tenzy-brand, #d4bc3a) 28%, transparent),
    rgba(255, 255, 255, 0.07)
  ) !important;
  border-color: color-mix(in oklab, var(--tenzy-brand, #d4bc3a) 42%, rgba(255, 255, 255, 0.18)) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 12px 28px rgba(0, 0, 0, 0.22);
}

html.tenzy-site .tenzy-site-nav .header-actions .btn-premium:hover {
  filter: brightness(1.06);
}

html.tenzy-site.codii-app .tl-nav.tenzy-site-nav {
  background: color-mix(in oklab, var(--bg-shell, #0c0c0f) 78%, transparent);
  border-color: var(--border-default, rgba(255, 255, 255, 0.095));
}

html.tenzy-site.codii-app[data-theme='light'] .tl-nav.tenzy-site-nav {
  background: color-mix(in oklab, var(--bg-shell, #e8ebf0) 85%, transparent);
  border-color: var(--border-default, rgba(42, 47, 57, 0.15));
}

/* --------------------------------------------------------------------------
 * App shell — glass rails + depth cards
 * -------------------------------------------------------------------------- */
html.codii-app .codii-app-sidebar {
  backdrop-filter: blur(16px) saturate(1.05);
  -webkit-backdrop-filter: blur(16px) saturate(1.05);
  background: color-mix(in oklab, var(--bg-shell) 82%, transparent) !important;
  border-right-color: color-mix(in oklab, var(--border-default) 75%, transparent) !important;
  box-shadow:
    4px 0 28px rgba(0, 0, 0, 0.22),
    inset -1px 0 0 rgba(255, 255, 255, 0.04);
}

html.codii-app[data-theme='light'] .codii-app-sidebar {
  background: color-mix(in oklab, var(--bg-shell) 88%, transparent) !important;
  box-shadow:
    4px 0 24px rgba(20, 29, 44, 0.06),
    inset -1px 0 0 rgba(255, 255, 255, 0.65);
}

html.codii-app .codii-app-titlebar {
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: color-mix(in oklab, var(--bg-shell) 78%, transparent) !important;
}

html.codii-app .codii-app-topbar {
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: color-mix(in oklab, var(--bg-surface-1) 76%, transparent) !important;
}

html.codii-app[data-theme='light'] .codii-app-titlebar,
html.codii-app[data-theme='light'] .codii-app-topbar {
  background: color-mix(in oklab, var(--bg-shell) 86%, transparent) !important;
}

/*
 * Never put perspective / preserve-3d on #codii-app-content, .main-content, or .codii-app-page-root —
 * it breaks desktop shell grid (top bar reads as “on the side”).
 * Card tilt uses local perspective on grids only (below).
 */

/* Glass panels & cards */
html.codii-app .section-header,
html.codii-app .settings-card,
html.codii-app .pricing-card,
html.codii-app .admin-card,
html.codii-app .dropzone,
html.codii-app .tree-card,
html.codii-app .lib-card,
html.codii-app .search-panel,
html.codii-app .metric-card,
html.codii-app .stat-card,
html.codii-app .panel,
html.codii-app .card:not(.cm-header):not(.CodeMirror) {
  backdrop-filter: blur(12px) saturate(1.02);
  -webkit-backdrop-filter: blur(12px) saturate(1.02);
  background: color-mix(in oklab, var(--bg-surface-2) 78%, transparent) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 14px 36px rgba(0, 0, 0, 0.22);
}

html.codii-app[data-theme='light'] .section-header,
html.codii-app[data-theme='light'] .settings-card,
html.codii-app[data-theme='light'] .pricing-card,
html.codii-app[data-theme='light'] .admin-card,
html.codii-app[data-theme='light'] .dropzone,
html.codii-app[data-theme='light'] .tree-card,
html.codii-app[data-theme='light'] .lib-card,
html.codii-app[data-theme='light'] .search-panel,
html.codii-app[data-theme='light'] .metric-card,
html.codii-app[data-theme='light'] .stat-card,
html.codii-app[data-theme='light'] .panel,
html.codii-app[data-theme='light'] .card:not(.cm-header):not(.CodeMirror) {
  background: color-mix(in oklab, var(--bg-surface-2) 86%, transparent) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.75) inset,
    0 12px 32px rgba(20, 29, 44, 0.07);
}

html.codii-app .welcome-card {
  backdrop-filter: blur(12px) saturate(1.02);
  -webkit-backdrop-filter: blur(12px) saturate(1.02);
  background: color-mix(in oklab, var(--bg-surface-2) 78%, transparent) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 14px 36px rgba(0, 0, 0, 0.22);
}

html.codii-app.codii-app-page-index .welcome-card {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

html.codii-app.codii-app-page-index .welcome-head,
html.codii-app.codii-app-page-index .welcome-copy,
html.codii-app.codii-app-page-index .welcome-illustration {
  backdrop-filter: blur(12px) saturate(1.02);
  -webkit-backdrop-filter: blur(12px) saturate(1.02);
  background: color-mix(in oklab, var(--bg-surface-2) 78%, transparent) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 14px 36px rgba(0, 0, 0, 0.22);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  html.codii-app:is(.codii-app-page-lessons, .codii-app-page-overview) .languages-grid,
  html.codii-app:is(.codii-app-page-lessons, .codii-app-page-overview) .lessons-grid {
    perspective: 1180px;
  }

  html.codii-app .lesson-card,
  html.codii-app:is(.codii-app-page-lessons, .codii-app-page-overview) .languages-grid .language-card {
    transform-style: preserve-3d;
    transition:
      transform 0.36s cubic-bezier(0.22, 1, 0.36, 1),
      border-color 0.28s ease,
      box-shadow 0.36s ease,
      filter 0.28s ease;
  }

  html.codii-app .lesson-card:hover {
    transform: translateY(-5px) rotateX(3deg) rotateY(-2deg) translateZ(10px);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.06) inset,
      0 22px 48px rgba(0, 0, 0, 0.26);
  }

  html.codii-app:is(.codii-app-page-lessons, .codii-app-page-overview) .languages-grid .language-card:hover {
    transform: translateY(-5px) rotateX(3deg) rotateY(-2deg) translateZ(10px);
  }
}

html.codii-app .header-content {
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: color-mix(in oklab, var(--bg-surface-1) 80%, transparent) !important;
}

html.codii-app .lesson-toolbar {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: color-mix(in oklab, var(--bg-surface-2) 82%, transparent) !important;
}

/* Lessons directory (+ Overview browse deck) — overlays, hero, AI, toolbars (browser + desktop) */
html.codii-app:is(.codii-app-page-lessons, .codii-app-page-overview) .languages-section.panel {
  backdrop-filter: blur(14px) saturate(1.03);
  -webkit-backdrop-filter: blur(14px) saturate(1.03);
}

html.codii-app.codii-app-page-lessons .lesson-toolbars-sticky {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

html.codii-app.codii-app-page-lessons .section-header {
  backdrop-filter: blur(12px) saturate(1.02);
  -webkit-backdrop-filter: blur(12px) saturate(1.02);
}

html.codii-app.codii-app-page-lessons .lesson-hero,
html.codii-app.codii-app-page-lessons .lesson-hero-card {
  backdrop-filter: blur(12px) saturate(1.02);
  -webkit-backdrop-filter: blur(12px) saturate(1.02);
}

html.codii-app.codii-app-page-lessons .ai-generator-card {
  backdrop-filter: blur(12px) saturate(1.02);
  -webkit-backdrop-filter: blur(12px) saturate(1.02);
}

html.codii-app.codii-app-page-lessons .search-overlay .search-panel,
html.codii-app.codii-app-page-lessons #genOverlay .gen-panel {
  backdrop-filter: blur(18px) saturate(1.05);
  -webkit-backdrop-filter: blur(18px) saturate(1.05);
}

html.codii-app.codii-app-page-lessons .gen-header,
html.codii-app.codii-app-page-lessons .gen-input,
html.codii-app.codii-app-page-lessons .gen-textarea,
html.codii-app.codii-app-page-lessons .pill {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

html.codii-app.codii-app-page-lessons .fab-generate {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

html.codii-app.codii-app-page-lessons .modal-overlay .modal,
html.codii-app.codii-app-page-lessons .guided-start-modal,
html.codii-app.codii-app-page-lessons .guided-start-result {
  backdrop-filter: blur(16px) saturate(1.03);
  -webkit-backdrop-filter: blur(16px) saturate(1.03);
}

html.codii-app.codii-app-page-lessons .guided-start-progress,
html.codii-app.codii-app-page-lessons .guided-start-body {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

html.codii-app.codii-app-page-lessons .ai-loading-inner {
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

html.codii-app.codii-app-page-lessons .filter-search,
html.codii-app.codii-app-page-lessons .filter-select {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

html.codii-app.codii-app-page-lessons .filter-check {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

html.codii-app.codii-app-page-lessons .start-guide-btn {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

html.codii-app.codii-app-page-lessons .ios-list,
html.codii-app.codii-app-page-lessons .search-header {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Lesson runner (lesson.html) */
html.codii-app.codii-app-page-lesson .lesson-topbar {
  backdrop-filter: blur(14px) saturate(1.02);
  -webkit-backdrop-filter: blur(14px) saturate(1.02);
}

html.codii-app.codii-app-page-lesson .lesson-stage,
html.codii-app.codii-app-page-lesson .lesson-flow-card,
html.codii-app.codii-app-page-lesson .lesson-section-header,
html.codii-app.codii-app-page-lesson .lesson-actions {
  backdrop-filter: blur(12px) saturate(1.02);
  -webkit-backdrop-filter: blur(12px) saturate(1.02);
}

html.codii-app.codii-app-page-lesson .lesson-workspace,
html.codii-app.codii-app-page-lesson .languages-section.panel {
  backdrop-filter: blur(12px) saturate(1.02);
  -webkit-backdrop-filter: blur(12px) saturate(1.02);
}

html.codii-app.codii-app-page-lesson pre.demo-code,
html.codii-app.codii-app-page-lesson .lesson-flow-card .input,
html.codii-app.codii-app-page-lesson .lesson-flow-card textarea.input {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

html.codii-app.codii-app-page-auth .auth-tabs,
html.codii-app.codii-app-page-auth .auth-field input,
html.codii-app.codii-app-page-auth .auth-submit {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

html.codii-app .btn-secondary,
html.codii-app .search-button,
html.codii-app .filter-select {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* IDE — frosted chrome only (keep editor surfaces flat) */
html.codii-app.codii-app-page-ide .ide-topbar,
html.codii-app.codii-app-page-ide .ide-sidebar,
html.codii-app.codii-app-page-ide .ide-right-zone {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

html.codii-app.codii-app-page-ide .ide-editor-shell,
html.codii-app.codii-app-page-ide .CodeMirror {
  backdrop-filter: none !important;
}

/* Auth card — extra depth when wrapped in marketing mesh */
html.codii-app.tenzy-site .auth-card,
html.codii-app.tenzy-site .auth-signed-in-card {
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 28px 60px rgba(0, 0, 0, 0.38);
}

/* --------------------------------------------------------------------------
 * Hit targets & stacking — all codii-app routes, landing/legal, Tauri shell,
 * search/gen overlays, modals, guided start, overview/script modals, IDE,
 * admin, recreate tree, account span.btn. See “Sweep” block for shared grids.
 * ~44px soft minimum; controls never flex-shrink to zero width.
 * -------------------------------------------------------------------------- */

/* Mesh row: never capture pointer events. */
html.tenzy-site body > .tenzy-web-only:first-of-type {
  pointer-events: none;
}

/* Main column above fixed decorative layers. */
html.tenzy-site .app-container {
  z-index: 2;
}

/* Site glass nav: own stacking context, links/buttons on top. */
html.tenzy-site .tl-nav.tenzy-site-nav {
  position: relative;
  z-index: 3;
  isolation: isolate;
}

html.tenzy-site .tl-nav.tenzy-site-nav .tenzy-site-nav-fill {
  flex: 1 1 auto;
  min-width: 0;
}

html.tenzy-site .tl-nav.tenzy-site-nav .search-button,
html.tenzy-site .tl-nav.tenzy-site-nav .header-actions {
  flex-shrink: 0;
}

html.tenzy-site .tl-nav.tenzy-site-nav .tl-nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.15rem 0.35rem 0.15rem 0;
  flex-shrink: 0;
  box-sizing: border-box;
}

html.tenzy-site .tl-nav.tenzy-site-nav .tl-nav__links a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.55rem;
  box-sizing: border-box;
}

html.tenzy-site .tl-nav.tenzy-site-nav .search-button,
html.tenzy-site .tl-nav.tenzy-site-nav button.search-button {
  min-height: 44px;
  min-width: 5.25rem;
  padding: 0.5rem 1rem;
  box-sizing: border-box;
}

html.tenzy-site .tl-nav.tenzy-site-nav .header-actions .btn,
html.tenzy-site .tl-nav.tenzy-site-nav .header-actions a.btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

/* Dual-chrome desktop strip: Search may be a direct flex child of .header-content. */
html.codii-app .header-content > .search-button {
  flex-shrink: 0;
  min-height: 44px;
  align-self: center;
  box-sizing: border-box;
}

html.codii-app .header-content .search-button {
  min-height: 44px;
  box-sizing: border-box;
}

html.codii-app .header-content .header-actions .btn,
html.codii-app .header-content .header-actions a.btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

/* Desktop shell: top chrome above embedded page scroll layers. */
html.codii-app .codii-app-topbar {
  position: relative;
  z-index: 8;
}

html.codii-app .codii-app-titlebar {
  position: relative;
  z-index: 9;
}

html.codii-app .codii-app-topbar .plan-usage {
  min-height: 40px;
  box-sizing: border-box;
}

html.codii-app .codii-app-titlebar-btn {
  min-height: 40px;
  box-sizing: border-box;
}

/* Sidebar: comfortable row height + footer links. */
html.codii-app .codii-app-nav-item {
  min-height: 44px;
  box-sizing: border-box;
}

html.codii-app .codii-app-sidebar-foot-link {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.5rem;
  box-sizing: border-box;
}

html.codii-app .codii-app-search-btn {
  min-height: 44px;
  box-sizing: border-box;
}

/* Lessons: start guide + FAB */
html.codii-app.codii-app-page-lessons .start-guide-btn {
  min-height: 44px;
  padding: 0.55rem 1.1rem !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

html.codii-app.codii-app-page-lessons .fab-generate {
  min-height: 52px;
  min-width: 52px;
  box-sizing: border-box;
}

/* Search overlay — panel above backdrop; z-index base lives in styles.css */
html.codii-app .search-panel {
  position: relative;
  z-index: 1;
  pointer-events: auto;
}

html.codii-app .search-cancel {
  min-height: 44px;
  min-width: 4.5rem;
  padding: 0.5rem 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

html.codii-app .ios-item {
  min-height: 48px;
  box-sizing: border-box;
}

/* Modals + test / guided flows */
html.codii-app .modal-close {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

html.codii-app .answer-option {
  min-height: 48px;
  box-sizing: border-box;
}

html.codii-app .modal-actions .btn {
  min-height: 44px;
  padding-left: 1.15rem;
  padding-right: 1.15rem;
  box-sizing: border-box;
}

html.codii-app .guided-question-options button {
  min-height: 48px;
  padding: 0.65rem 1rem;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
}

html.codii-app .guided-start-footer .btn,
html.codii-app .guided-start-footer button {
  min-height: 44px;
  padding: 0.55rem 1.1rem;
  box-sizing: border-box;
}

/* Generate-lesson overlay */
html.codii-app .gen-diff-pills .pill,
html.codii-app .gen-chip {
  min-height: 40px;
  padding: 0.45rem 0.85rem;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
}

html.codii-app .gen-actions .btn {
  min-height: 48px;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  box-sizing: border-box;
}

/* Premium / settings / account CTAs */
html.codii-app.codii-app-page-premium .pricing-card button,
html.codii-app.codii-app-page-premium .pricing-card .pricing-action {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

html.codii-app.codii-app-page-settings .settings-card .btn,
html.codii-app.codii-app-page-settings .settings-card button,
html.codii-app.codii-app-page-account .settings-container .btn,
html.codii-app.codii-app-page-account .settings-container button,
html.codii-app.codii-app-page-account .settings-container a.btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

/* AI loading sits above app chrome when shown */
html.codii-app .ai-loading.active {
  z-index: 13000;
}

/* Toasts: above modals (10k), below search overlay (11k) */
html.codii-app .feedback-toast {
  z-index: 11500;
}

/* --------------------------------------------------------------------------
 * Lesson runner — back bar, MCQ opts, primary actions
 * -------------------------------------------------------------------------- */
html.codii-app.codii-app-page-lesson .lesson-topbar {
  position: relative;
  z-index: 4;
}

html.codii-app.codii-app-page-lesson .lesson-back-btn,
html.codii-app.codii-app-page-lesson #saveQuitBtn,
html.codii-app.codii-app-page-lesson .lesson-topbar-actions .btn {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

html.codii-app.codii-app-page-lesson .lesson-flow-card .opt,
html.codii-app.codii-app-page-lesson .lesson-flow-card button.opt {
  min-height: 48px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

html.codii-app.codii-app-page-lesson .lesson-actions .btn,
html.codii-app.codii-app-page-lesson .lesson-actions button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

html.codii-app.codii-app-page-lesson .demo-toggle-btn {
  min-height: 40px;
  padding: 0.45rem 0.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

html.codii-app.codii-app-page-lesson .match-row select {
  min-height: 44px;
  box-sizing: border-box;
}

/* Lessons directory — filters (sort row shares styles with lesson toolbar) */
html.codii-app.codii-app-page-lessons .filter-check {
  min-height: 44px;
  box-sizing: border-box;
}

html.codii-app.codii-app-page-lessons .filter-select,
html.codii-app.codii-app-page-lessons .filter-search {
  min-height: 44px;
  box-sizing: border-box;
}

html.codii-app.codii-app-page-lessons .lesson-toolbar .btn,
html.codii-app.codii-app-page-lessons .lesson-toolbar button {
  min-height: 44px;
  box-sizing: border-box;
}

/* Auth — tab strip + primary submit */
html.tenzy-site.codii-app.codii-app-page-auth .auth-tabs button {
  min-height: 44px;
  box-sizing: border-box;
}

html.tenzy-site.codii-app.codii-app-page-auth .auth-submit:not(.auth-submit--link) {
  min-height: 48px;
  box-sizing: border-box;
}

html.tenzy-site.codii-app.codii-app-page-auth .auth-signed-in-actions .btn,
html.tenzy-site.codii-app.codii-app-page-auth .auth-signed-in-actions button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

/* Overview — hero + panel CTAs */
html.codii-app.codii-app-page-overview .overview-hero-actions .btn,
html.codii-app.codii-app-page-overview .overview-hero-actions a.btn,
html.codii-app.codii-app-page-overview .overview-panel .btn-primary,
html.codii-app.codii-app-page-overview .overview-panel .btn-secondary,
html.codii-app.codii-app-page-overview .overview-panel a.btn {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

/* Recreate / inline toolbars */
html.codii-app.codii-app-page-recreate .tool-btn,
html.codii-app.codii-app-page-recreate .dz-actions .btn {
  min-height: 44px;
  padding: 0.5rem 0.95rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

/* IDE — dense UI; raise minimum tap row without blowing layout */
html.codii-app.codii-app-page-ide button.ide-btn {
  min-height: 44px;
  box-sizing: border-box;
}

html.codii-app.codii-app-page-ide .ide-starter-btn {
  min-height: 44px;
  box-sizing: border-box;
}

html.codii-app.codii-app-page-ide .ide-action-menu-item {
  min-height: 40px;
  box-sizing: border-box;
}

/* IDE — icon-only controls (inline CSS is 32×28; enlarge hit box) */
html.codii-app.codii-app-page-ide button.ide-icon-btn {
  min-width: 40px;
  min-height: 40px;
  box-sizing: border-box;
}

/* --------------------------------------------------------------------------
 * Marketing landing + legal (html.tenzy-landing — no codii-app)
 * -------------------------------------------------------------------------- */
html.tenzy-landing .tl-nav {
  position: relative;
  z-index: 3;
  isolation: isolate;
}

html.tenzy-landing .tl-nav__brand {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.35rem 0.15rem 0;
  box-sizing: border-box;
}

html.tenzy-landing .tl-nav__links a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.5rem;
  box-sizing: border-box;
}

html.tenzy-landing .tl-nav__cta .tl-btn {
  min-height: 44px;
  min-width: 5rem;
  box-sizing: border-box;
}

html.tenzy-landing .tl-hero__actions .tl-btn,
html.tenzy-landing .tl-download .tl-btn {
  min-height: 48px;
  box-sizing: border-box;
}

html.tenzy-landing .tl-footer a {
  display: inline-block;
  padding: 0.4rem 0.15rem;
  margin: -0.15rem 0;
  box-sizing: border-box;
}

/* --------------------------------------------------------------------------
 * Admin — editor toolbar + step actions
 * -------------------------------------------------------------------------- */
html.codii-app.codii-app-page-admin .admin-toolbar select,
html.codii-app.codii-app-page-admin .admin-toolbar button {
  min-height: 44px;
  box-sizing: border-box;
}

html.codii-app.codii-app-page-admin .admin-buttons button,
html.codii-app.codii-app-page-admin .admin-buttons .btn-admin,
html.codii-app.codii-app-page-admin .admin-buttons .btn-danger {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

/* --------------------------------------------------------------------------
 * Overview — rail CTAs, start guide, activity stat buttons
 * -------------------------------------------------------------------------- */
html.codii-app.codii-app-page-overview .overview-mission-actions .btn,
html.codii-app.codii-app-page-overview .overview-mission-actions a.btn,
html.codii-app.codii-app-page-index .overview-mission-actions .btn,
html.codii-app.codii-app-page-index .overview-mission-actions a.btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

html.codii-app.codii-app-page-overview .overview-start-guide-btn,
html.codii-app.codii-app-page-index .overview-start-guide-btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

html.codii-app.codii-app-page-index button.stat-card.stat-card--strip.overview-activity-tile {
  min-height: 5.25rem;
  align-items: center;
  box-sizing: border-box;
}

/* Test page — header strip + quiz chrome */
html.codii-app.codii-app-page-test .header-content .btn,
html.codii-app.codii-app-page-test .header-content a.btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

/* Settings — checkbox rows: slightly larger control + vertical breathing room */
html.codii-app.codii-app-page-settings .settings-field.settings-preference-row .settings-preference-check {
  width: 22px;
  height: 22px;
  min-width: 22px;
  min-height: 22px;
  flex-shrink: 0;
  margin-top: 0.15rem;
  cursor: pointer;
  box-sizing: border-box;
}

/* =======================================================================
 * Sweep — surfaces not tied to a single page key (scripts, shared grids)
 * =======================================================================
 */

/* Overview: stat buttons — cover both route classes on <html> */
html.codii-app.codii-app-page-overview button.stat-card.stat-card--strip.overview-activity-tile {
  min-height: 5.25rem;
  align-items: center;
  box-sizing: border-box;
}

/* script.js — activity detail modal foot CTAs */
html.codii-app .overview-activity-detail-overlay .overview-activity-foot .btn,
html.codii-app .overview-activity-detail-overlay .overview-activity-foot a.btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

/* Shared section headers (Lessons / Overview / Recreate / Admin intros, etc.) */
html.codii-app .section-header .btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  box-sizing: border-box;
}

/* Lessons directory cards */
html.codii-app .language-card .btn,
html.codii-app .language-card a.btn,
html.codii-app .lesson-card .lesson-actions .btn,
html.codii-app .lesson-card .lesson-actions a.btn,
html.codii-app .lesson-card .lesson-actions button {
  min-height: 44px;
  box-sizing: border-box;
}

/* start-guide.js — result actions */
html.codii-app .guided-result-actions .btn-primary,
html.codii-app .guided-result-actions .btn-secondary,
html.codii-app .guided-result-actions button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

/* Account — theme file picker uses span.btn */
html.codii-app.codii-app-page-account .settings-container span.btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

/* Recreate — expand/collapse affordance in file tree */
html.codii-app.codii-app-page-recreate .tree .caret {
  min-width: 2.25rem;
  min-height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

/* IDE — sidebar tabs + idea chips */
html.codii-app.codii-app-page-ide button.ide-side-tab {
  min-height: 40px;
  box-sizing: border-box;
}

html.codii-app.codii-app-page-ide .ide-chip {
  min-height: 36px;
  padding: 0.35rem 0.65rem;
  box-sizing: border-box;
}

/* Primary scroll column above page decorations (sticky header remains on top via its own z-index) */
html.codii-app .main-content {
  position: relative;
  z-index: 1;
}

/* =======================================================================
 * Interaction polish — mobile tap, keyboard focus, safe areas, anchors
 * =======================================================================
 */

html.codii-app {
  -webkit-tap-highlight-color: color-mix(in oklab, var(--accent, #a3a3a3) 24%, transparent);
}

html.tenzy-landing {
  -webkit-tap-highlight-color: color-mix(in oklab, var(--tl-brand, #eab308) 28%, transparent);
}

/* Faster taps on primary chrome (editors keep default pan-zoom) */
html.codii-app .header .btn,
html.codii-app .header .search-button,
html.codii-app .header a.btn,
html.codii-app .tl-nav.tenzy-site-nav .btn,
html.codii-app .tl-nav.tenzy-site-nav a.btn,
html.codii-app .tl-nav.tenzy-site-nav button,
html.tenzy-site .tl-nav.tenzy-site-nav .tl-nav__links a,
html.tenzy-landing .tl-nav .tl-btn,
html.tenzy-landing .tl-nav__links a {
  touch-action: manipulation;
}

/* Breathing room between adjacent header targets */
html.tenzy-site .tl-nav.tenzy-site-nav .header-actions {
  gap: 0.55rem;
}

html.codii-app .header-content .header-actions {
  gap: 0.55rem;
}

html.codii-app .lesson-toolbar .filter-group {
  gap: 0.55rem;
}

/* Keyboard / remote: clear focus rings */
html.codii-app .btn:focus-visible,
html.codii-app .search-button:focus-visible,
html.codii-app .modal-close:focus-visible,
html.codii-app .search-cancel:focus-visible,
html.codii-app .section-header .btn:focus-visible,
html.codii-app .start-guide-btn:focus-visible,
html.codii-app .overview-start-guide-btn:focus-visible {
  outline: 2px solid color-mix(in oklab, var(--accent, #fafafa) 62%, transparent);
  outline-offset: 3px;
}

html.tenzy-site .tl-nav.tenzy-site-nav a:focus-visible,
html.tenzy-site .tl-nav.tenzy-site-nav button:focus-visible {
  outline: 2px solid rgba(250, 250, 250, 0.62);
  outline-offset: 3px;
  border-radius: 12px;
}

html.tenzy-landing .tl-nav a:focus-visible,
html.tenzy-landing .tl-nav .tl-btn:focus-visible {
  outline: 2px solid color-mix(in oklab, var(--tl-brand, #fbbf24) 55%, white);
  outline-offset: 3px;
  border-radius: 12px;
}

html.codii-app .ios-item:focus-visible {
  outline: 2px solid color-mix(in oklab, var(--border-strong, rgba(255, 255, 255, 0.42)) 90%, transparent);
  outline-offset: -2px;
}

html.codii-app .answer-option:focus-visible {
  outline: 2px solid color-mix(in oklab, var(--accent-primary, #818cf8) 58%, white);
  outline-offset: 2px;
}

html.codii-app.codii-app-page-ide button.ide-btn:focus-visible,
html.codii-app.codii-app-page-ide button.ide-icon-btn:focus-visible,
html.codii-app.codii-app-page-ide .ide-action-menu-item:focus-visible {
  outline: 2px solid rgba(186, 192, 204, 0.42);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html.codii-app .btn:focus-visible,
  html.codii-app .search-button:focus-visible,
  html.codii-app .modal-close:focus-visible,
  html.codii-app .section-header .btn:focus-visible,
  html.tenzy-site .tl-nav.tenzy-site-nav a:focus-visible,
  html.tenzy-site .tl-nav.tenzy-site-nav button:focus-visible,
  html.tenzy-landing .tl-nav a:focus-visible,
  html.tenzy-landing .tl-nav .tl-btn:focus-visible {
    outline-offset: 2px;
    transition: none;
  }
}

/* Landing / legal: hash jumps clear the glass nav */
html.tenzy-landing #features,
html.tenzy-landing #download,
html.tenzy-landing #top {
  scroll-margin-top: clamp(5rem, 14vh, 7rem);
}

/* FAB — above home indicator + curved corners */
html.codii-app .fab-generate {
  bottom: max(22px, calc(env(safe-area-inset-bottom, 0px) + 12px));
  right: max(22px, calc(env(safe-area-inset-right, 0px) + 12px));
}

/* Directory cards are navigational */
html.codii-app .language-card,
html.codii-app .lesson-card {
  cursor: pointer;
}

html.codii-app .language-card:active,
html.codii-app .lesson-card:active {
  transform: translateY(1px);
}

@media (prefers-reduced-motion: reduce) {
  html.codii-app .language-card:active,
  html.codii-app .lesson-card:active {
    transform: none;
  }
}

/* =======================================================================
 * Requested polish pass (no color-scheme swap):
 * - Start-guide modal + popup ergonomics
 * - Account / Settings / Plans layout and matte consistency
 * - Lessons surfaces + in-lesson UI organization
 * - Subtle perspective depth on key cards
 * =======================================================================
 */

/* Shared matte card treatment for listed pages */
html.codii-app.codii-app-page-settings .settings-card,
html.codii-app.codii-app-page-account .settings-card,
html.codii-app.codii-app-page-account .codii-account-panel,
html.codii-app.codii-app-page-premium .pricing-card,
html.codii-app.codii-app-page-lesson .lesson-flow-card,
html.codii-app.codii-app-page-lesson .lesson-stage {
  background: color-mix(in oklab, var(--bg-surface-2, #18181b) 88%, #000) !important;
  border-color: color-mix(in oklab, var(--border-default, rgba(255, 255, 255, 0.12)) 88%, transparent) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 14px 34px rgba(0, 0, 0, 0.34) !important;
}

/* Start guide button + popup ergonomics */
html.codii-app .start-guide-btn,
html.codii-app .overview-start-guide-btn {
  min-height: 46px;
  padding-left: 1rem;
  padding-right: 1rem;
  border-radius: 14px;
}

html.codii-app #guidedStartModal .guided-start-modal,
html.codii-app #guidedStartResultOverlay .guided-start-result {
  width: min(980px, 95vw);
  border-radius: 18px;
  background: rgba(5, 5, 7, 0.84) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow:
    0 30px 90px rgba(0, 0, 0, 0.72),
    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

html.codii-app .guided-start-content {
  gap: 1.1rem;
}

html.codii-app .guided-start-progress,
html.codii-app .guided-start-body {
  border-radius: 14px;
  padding: 1rem 1.05rem;
}

html.codii-app .guided-start-footer {
  margin-top: 1.25rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Account page organization */
html.codii-app.codii-app-page-account .codii-account-grid {
  gap: clamp(0.9rem, 2vw, 1.2rem);
}

html.codii-app.codii-app-page-account .codii-account-section {
  padding: clamp(0.8rem, 1.8vw, 1rem);
  border-radius: 14px;
  background: color-mix(in oklab, var(--bg-surface-1, #09090b) 78%, transparent);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

html.codii-app.codii-app-page-account .codii-account-field-row {
  gap: 0.65rem;
}

/* Settings page organization */
html.codii-app.codii-app-page-settings .settings-container {
  gap: 1.1rem;
}

html.codii-app.codii-app-page-settings .settings-card {
  padding: clamp(1rem, 2vw, 1.3rem);
  border-radius: 16px;
}

html.codii-app.codii-app-page-settings .settings-field {
  gap: 0.42rem;
}

/* Plans page: cleaner spacing + matte cards */
html.codii-app.codii-app-page-premium .pricing-grid {
  gap: clamp(0.85rem, 2vw, 1.1rem);
}

html.codii-app.codii-app-page-premium .pricing-card {
  padding: clamp(1rem, 2.2vw, 1.25rem);
  border-radius: 18px;
}

html.codii-app.codii-app-page-premium .pricing-list {
  gap: 0.45rem;
}

/* Lessons page + in-lesson structure convenience */
html.codii-app.codii-app-page-lessons .lesson-toolbars-sticky {
  gap: 0.75rem;
}

html.codii-app.codii-app-page-lessons .lesson-toolbar {
  padding: clamp(0.6rem, 1.7vw, 0.8rem) clamp(0.8rem, 2.1vw, 1.1rem);
  border-radius: 14px;
}

html.codii-app:is(.codii-app-page-lessons, .codii-app-page-overview) .language-card,
html.codii-app.codii-app-page-lessons .lesson-card {
  border-radius: 16px;
}

html.codii-app.codii-app-page-lesson .lesson-topbar {
  padding: 0.35rem 0.45rem;
  border-radius: 14px;
}

html.codii-app.codii-app-page-lesson .lesson-flow-card {
  padding: clamp(1.1rem, 2.1vw, 1.35rem);
  border-radius: 16px;
}

/* Subtle perspective depth (requested) */
@media (prefers-reduced-motion: no-preference) {
  html.codii-app.codii-app-page-premium .pricing-grid,
  html.codii-app.codii-app-page-account .codii-account-grid,
  html.codii-app.codii-app-page-lessons .lessons-grid,
  html.codii-app:is(.codii-app-page-lessons, .codii-app-page-overview) .languages-grid {
    perspective: clamp(920px, 105vw, 1500px);
  }

  html.codii-app.codii-app-page-premium .pricing-card,
  html.codii-app.codii-app-page-account .codii-account-panel,
  html.codii-app.codii-app-page-lessons .lesson-card,
  html.codii-app:is(.codii-app-page-lessons, .codii-app-page-overview) .language-card,
  html.codii-app.codii-app-page-lesson .lesson-flow-card,
  html.codii-app #guidedStartModal .guided-start-modal,
  html.codii-app #guidedStartResultOverlay .guided-start-result {
    transform-origin: center;
    transform: translateZ(0) rotateX(0deg);
    transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
  }

  html.codii-app.codii-app-page-premium .pricing-card:hover,
  html.codii-app.codii-app-page-account .codii-account-panel:hover,
  html.codii-app.codii-app-page-lessons .lesson-card:hover,
  html.codii-app:is(.codii-app-page-lessons, .codii-app-page-overview) .language-card:hover,
  html.codii-app.codii-app-page-lesson .lesson-flow-card:hover {
    transform: translateY(-3px) translateZ(10px) rotateX(1.4deg);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.08) inset,
      0 22px 44px rgba(0, 0, 0, 0.38) !important;
  }
}

/* =======================================================================
 * Tenzy product UI refresh 2026-05-09
 * ======================================================================= */

html.codii-app {
  --tenzy-yellow: #e7c94b;
  --tenzy-yellow-strong: #f1d65c;
  --tenzy-ink: #050507;
  --tenzy-panel: rgba(9, 9, 12, 0.86);
  --tenzy-line: rgba(255, 255, 255, 0.105);
  --tenzy-muted: rgba(181, 184, 194, 0.78);
  --tenzy-soft-shadow: 0 18px 52px rgba(0, 0, 0, 0.42);
}

html.codii-app.codii-app-page-lessons .main-content,
html.codii-app.codii-app-page-premium .premium-main,
html.codii-app.codii-app-page-account .settings-container.codii-account-page {
  width: min(1180px, calc(100vw - 32px)) !important;
  margin-inline: auto !important;
  padding: clamp(0.9rem, 2vw, 1.25rem) 0 clamp(2rem, 5vw, 4rem) !important;
}

html.codii-app.codii-app-page-lessons .languages-section.panel,
html.codii-app.codii-app-page-premium .languages-section.panel,
html.codii-app.codii-app-page-account .codii-account-page-root {
  position: relative !important;
  overflow: clip !important;
  padding: clamp(1rem, 2.6vw, 1.45rem) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)),
    rgba(5, 5, 8, 0.92) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: var(--tenzy-soft-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

html.codii-app.codii-app-page-lessons .section-header,
html.codii-app.codii-app-page-premium .section-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1rem !important;
  margin: 0 0 clamp(0.85rem, 2vw, 1.15rem) !important;
  padding: 0 0 clamp(0.85rem, 2vw, 1.05rem) !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: transparent !important;
  box-shadow: none !important;
}

html.codii-app.codii-app-page-lessons .section-header-copy h3,
html.codii-app.codii-app-page-premium .section-header-copy h3 {
  margin: 0 !important;
  font-size: clamp(1.45rem, 3vw, 2.15rem) !important;
  line-height: 1.02 !important;
  letter-spacing: 0 !important;
  color: #f8fafc !important;
}

html.codii-app.codii-app-page-lessons .section-header-copy p,
html.codii-app.codii-app-page-premium .section-header-copy p {
  max-width: 58ch !important;
  margin: 0.4rem 0 0 !important;
  color: rgba(203, 207, 218, 0.84) !important;
  font-size: 0.94rem !important;
  line-height: 1.55 !important;
}

html.codii-app.codii-app-page-lessons .start-guide-btn {
  min-height: 42px !important;
  flex: 0 0 auto !important;
  gap: 0.52rem !important;
  padding: 0.62rem 0.88rem !important;
  border-radius: 10px !important;
  border: 1px solid rgba(231, 201, 75, 0.34) !important;
  background: rgba(231, 201, 75, 0.1) !important;
  color: #fff4b4 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  font-weight: 700 !important;
}

html.codii-app.codii-app-page-lessons .start-guide-btn:hover {
  border-color: rgba(241, 214, 92, 0.64) !important;
  background: rgba(231, 201, 75, 0.16) !important;
}

html.codii-app.codii-app-page-lessons .lesson-toolbars-sticky {
  position: sticky !important;
  top: calc(var(--codii-shell-topbar-height, 0px) + 10px) !important;
  z-index: 8 !important;
  display: grid !important;
  gap: 0.7rem !important;
  margin: 0 0 1rem !important;
}

html.codii-app.codii-app-page-lessons .lesson-toolbar {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 0.68rem !important;
  padding: 0.68rem !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.095) !important;
  background: rgba(11, 11, 15, 0.88) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
  backdrop-filter: blur(16px) !important;
}

html.codii-app.codii-app-page-lessons .filter-group {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  min-width: 0 !important;
}

html.codii-app.codii-app-page-lessons .filter-label {
  color: rgba(203, 207, 218, 0.72) !important;
  font-size: 0.74rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

html.codii-app.codii-app-page-lessons .filter-select,
html.codii-app.codii-app-page-lessons .filter-search {
  min-height: 38px !important;
  border-radius: 9px !important;
  border: 1px solid rgba(255, 255, 255, 0.11) !important;
  background: rgba(2, 2, 4, 0.82) !important;
  color: #f8fafc !important;
}

html.codii-app.codii-app-page-lessons .filter-search {
  min-width: min(330px, 60vw) !important;
}

html.codii-app.codii-app-page-lessons .filter-check {
  min-height: 34px !important;
  border-radius: 9px !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  background: rgba(255, 255, 255, 0.035) !important;
  color: rgba(238, 242, 255, 0.9) !important;
  padding: 0.38rem 0.55rem !important;
}

html.codii-app.codii-app-page-lessons .lesson-hero {
  margin: 0 0 1rem !important;
}

html.codii-app.codii-app-page-lessons .lesson-hero-card {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  gap: clamp(0.85rem, 2vw, 1.1rem) !important;
  align-items: center !important;
  padding: clamp(0.85rem, 2vw, 1.1rem) !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015)), rgba(7, 7, 10, 0.92) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055) !important;
}

html.codii-app.codii-app-page-lessons .lesson-hero-meta h4 {
  margin: 0 !important;
  font-size: clamp(1.35rem, 2.5vw, 1.85rem) !important;
  color: #f8fafc !important;
}

html.codii-app.codii-app-page-lessons .lesson-hero-meta p {
  margin: 0.32rem 0 0 !important;
  max-width: 72ch !important;
  color: rgba(203, 207, 218, 0.82) !important;
  line-height: 1.5 !important;
}

html.codii-app.codii-app-page-lessons .lesson-hero-stats {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.45rem !important;
  margin-top: 0.78rem !important;
}

html.codii-app.codii-app-page-lessons .lesson-hero-stats span {
  padding: 0.38rem 0.55rem !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  background: rgba(255, 255, 255, 0.038) !important;
  color: rgba(238, 242, 255, 0.88) !important;
  font-size: 0.78rem !important;
}

html.codii-app.codii-app-page-lessons .languages-grid,
html.codii-app.codii-app-page-lessons .lessons-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 255px), 1fr)) !important;
  gap: 0.82rem !important;
}

html.codii-app.codii-app-page-lessons .language-card,
html.codii-app.codii-app-page-lessons .lesson-card {
  position: relative !important;
  overflow: hidden !important;
  min-height: 0 !important;
  padding: 0.88rem !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.105) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.038), rgba(255, 255, 255, 0.012)), rgba(8, 8, 11, 0.93) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
}

html.codii-app.codii-app-page-lessons .language-card:hover,
html.codii-app.codii-app-page-lessons .lesson-card:hover {
  border-color: rgba(231, 201, 75, 0.28) !important;
}

html.codii-app.codii-app-page-lessons .language-header,
html.codii-app.codii-app-page-lessons .lesson-card-header {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  gap: 0.72rem !important;
  align-items: start !important;
  margin-bottom: 0.8rem !important;
}

html.codii-app.codii-app-page-lessons .language-info h4,
html.codii-app.codii-app-page-lessons .lesson-title {
  margin: 0 !important;
  color: #f8fafc !important;
  font-size: 1rem !important;
  line-height: 1.22 !important;
  font-weight: 750 !important;
  letter-spacing: 0 !important;
}

html.codii-app.codii-app-page-lessons .language-info p {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 3 !important;
  overflow: hidden !important;
  margin: 0.28rem 0 0 !important;
  color: rgba(181, 184, 194, 0.78) !important;
  line-height: 1.45 !important;
  font-size: 0.86rem !important;
}

html.codii-app.codii-app-page-lessons .language-logo {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  flex: 0 0 auto !important;
  width: 52px !important;
  height: 52px !important;
  border-radius: 12px !important;
  border: 1px solid currentColor !important;
  background: rgba(5, 5, 8, 0.86) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 10px 24px rgba(0, 0, 0, 0.24) !important;
}

html.codii-app.codii-app-page-lessons .lesson-hero-logo.language-logo {
  width: clamp(62px, 8vw, 76px) !important;
  height: clamp(62px, 8vw, 76px) !important;
  border-radius: 14px !important;
}

html.codii-app.codii-app-page-lessons .language-logo--sm {
  width: 38px !important;
  height: 38px !important;
  border-radius: 10px !important;
}

html.codii-app.codii-app-page-lessons .language-logo-icon {
  display: block !important;
  opacity: 1 !important;
  font-size: 2rem !important;
  line-height: 1 !important;
  color: currentColor;
}

html.codii-app.codii-app-page-lessons .lesson-hero-logo .language-logo-icon {
  font-size: clamp(2.35rem, 5vw, 3.15rem) !important;
}

html.codii-app.codii-app-page-lessons .language-logo--sm .language-logo-icon {
  font-size: 1.5rem !important;
}

html.codii-app.codii-app-page-lessons .language-logo-img {
  display: block !important;
  width: 70% !important;
  height: 70% !important;
  object-fit: contain !important;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.32)) !important;
}

html.codii-app.codii-app-page-lessons .language-logo:not(.is-fallback) .language-logo-fallback {
  display: none !important;
}

html.codii-app.codii-app-page-lessons .language-logo.is-fallback .language-logo-icon,
html.codii-app.codii-app-page-lessons .language-logo.is-fallback .language-logo-img {
  display: none !important;
}

html.codii-app.codii-app-page-lessons .language-logo-fallback {
  font-size: 0.92rem !important;
  font-weight: 800 !important;
  color: currentColor !important;
}

html.codii-app.codii-app-page-lessons .language-stats {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0.45rem !important;
  margin-top: auto !important;
}

html.codii-app.codii-app-page-lessons .stat-item,
html.codii-app.codii-app-page-lessons .lesson-meta-pill {
  border-radius: 9px !important;
  border: 1px solid rgba(255, 255, 255, 0.075) !important;
  background: rgba(255, 255, 255, 0.036) !important;
}

html.codii-app.codii-app-page-lessons .stat-item {
  padding: 0.5rem !important;
}

html.codii-app.codii-app-page-lessons .stat-item .label {
  color: rgba(181, 184, 194, 0.68) !important;
  font-size: 0.66rem !important;
  font-weight: 750 !important;
  letter-spacing: 0.055em !important;
  text-transform: uppercase !important;
}

html.codii-app.codii-app-page-lessons .stat-item .value {
  margin-top: 0.16rem !important;
  color: #f8fafc !important;
  font-size: 0.88rem !important;
  font-weight: 750 !important;
}

html.codii-app.codii-app-page-lessons .lesson-number {
  display: grid !important;
  place-items: center !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 11px !important;
  border: 1px solid rgba(231, 201, 75, 0.34) !important;
  background: rgba(231, 201, 75, 0.1) !important;
  color: #ffe989 !important;
  font-family: "JetBrains Mono", monospace !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
}

html.codii-app.codii-app-page-lessons .lesson-card-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.4rem !important;
  margin: 0 0 0.82rem !important;
}

html.codii-app.codii-app-page-lessons .lesson-meta-pill {
  min-height: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.28rem !important;
  padding: 0.28rem 0.48rem !important;
  color: rgba(226, 232, 240, 0.86) !important;
  font-size: 0.73rem !important;
  font-weight: 700 !important;
}

html.codii-app.codii-app-page-lessons .lesson-meta-pill.status-pill.completed {
  color: #ffec91 !important;
  border-color: rgba(231, 201, 75, 0.34) !important;
  background: rgba(231, 201, 75, 0.09) !important;
}

html.codii-app.codii-app-page-lessons .lesson-progress {
  position: relative !important;
  overflow: hidden !important;
  height: 34px !important;
  border-radius: 9px !important;
  border: 1px solid rgba(255, 255, 255, 0.085) !important;
  background: rgba(255, 255, 255, 0.035) !important;
}

html.codii-app.codii-app-page-lessons .lesson-progress-bar {
  height: 100% !important;
  border-radius: inherit !important;
  background: linear-gradient(90deg, rgba(231, 201, 75, 0.42), rgba(241, 214, 92, 0.82)) !important;
}

html.codii-app.codii-app-page-lessons .lesson-progress-label {
  position: absolute !important;
  inset: 0 !important;
  display: grid !important;
  place-items: center !important;
  color: rgba(248, 250, 252, 0.9) !important;
  font-family: "JetBrains Mono", monospace !important;
  font-size: 0.72rem !important;
  font-weight: 750 !important;
}

html.codii-app.codii-app-page-lessons .lesson-actions {
  margin-top: 0.72rem !important;
}

html.codii-app.codii-app-page-lessons .lesson-start-btn,
html.codii-app.codii-app-page-lessons .open-gen-btn {
  width: 100% !important;
  min-height: 40px !important;
  border-radius: 9px !important;
  border: 1px solid rgba(231, 201, 75, 0.5) !important;
  background: linear-gradient(180deg, #f2dc70, #caae36) !important;
  color: #151512 !important;
  font-weight: 800 !important;
}

html.codii-app.codii-app-page-lessons .ai-generator-card {
  border-color: rgba(231, 201, 75, 0.3) !important;
  background: linear-gradient(180deg, rgba(231, 201, 75, 0.105), rgba(255, 255, 255, 0.012)), rgba(8, 8, 11, 0.95) !important;
}

html.codii-app.codii-app-page-lessons .ai-generator-card .lesson-number {
  background: #f0d85f !important;
  color: #181512 !important;
}

html.codii-app.codii-app-page-lessons .search-overlay.active {
  backdrop-filter: blur(18px) !important;
}

html.codii-app.codii-app-page-lessons .search-panel,
html.codii-app.codii-app-page-lessons .gen-panel {
  border-radius: 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.13) !important;
  background: rgba(5, 5, 8, 0.94) !important;
  box-shadow: 0 28px 84px rgba(0, 0, 0, 0.58), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

html.codii-app.codii-app-page-lessons .search-input-wrap,
html.codii-app.codii-app-page-lessons .gen-input,
html.codii-app.codii-app-page-lessons .gen-textarea {
  border-radius: 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: rgba(2, 2, 4, 0.88) !important;
}

html.codii-app.codii-app-page-lessons .ios-item {
  border-radius: 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.075) !important;
  background: rgba(255, 255, 255, 0.032) !important;
}

html.codii-app #guidedStartModal.modal-overlay,
html.codii-app #guidedStartResultOverlay.modal-overlay {
  background: rgba(0, 0, 0, 0.74) !important;
  backdrop-filter: blur(18px) !important;
}

html.codii-app #guidedStartModal .guided-start-modal,
html.codii-app #guidedStartResultOverlay .guided-start-result {
  width: min(960px, calc(100vw - 28px)) !important;
  max-height: min(760px, calc(100vh - 28px)) !important;
  overflow: hidden !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.13) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012)), rgba(5, 5, 8, 0.96) !important;
  box-shadow: 0 32px 110px rgba(0, 0, 0, 0.74), inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
}

html.codii-app #guidedStartModal .modal-header,
html.codii-app #guidedStartResultOverlay .modal-header {
  padding: clamp(1rem, 2.4vw, 1.35rem) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.085) !important;
  background: rgba(255, 255, 255, 0.025) !important;
}

html.codii-app .guided-start-header-copy h3,
html.codii-app #guidedStartResultTitle {
  color: #f8fafc !important;
  font-size: clamp(1.18rem, 2.3vw, 1.6rem) !important;
  line-height: 1.12 !important;
}

html.codii-app .guided-start-header-lede {
  max-width: 64ch !important;
  color: rgba(203, 207, 218, 0.82) !important;
}

html.codii-app .guided-start-content {
  grid-template-columns: minmax(190px, 230px) minmax(0, 1fr) !important;
  padding: 1rem !important;
  gap: 1rem !important;
}

html.codii-app .guided-start-progress,
html.codii-app .guided-start-body,
html.codii-app .guided-result-card,
html.codii-app .guided-ai-banner {
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  background: rgba(8, 8, 11, 0.85) !important;
}

html.codii-app .guided-start-steps li {
  border-radius: 8px !important;
}

html.codii-app .guided-start-steps li.completed {
  color: rgba(255, 236, 145, 0.86) !important;
}

html.codii-app .guided-question-options {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)) !important;
  gap: 0.55rem !important;
}

html.codii-app .guided-question-options button {
  min-height: 42px !important;
  border-radius: 10px !important;
  text-align: left !important;
}

html.codii-app .guided-question-options button.active {
  border-color: rgba(231, 201, 75, 0.54) !important;
  background: rgba(231, 201, 75, 0.12) !important;
  color: #fff3b0 !important;
}

html.codii-app .guided-result-card,
html.codii-app .guided-ai-banner {
  padding: 1rem !important;
}

html.codii-app .guided-result-card h3 {
  color: #f8fafc !important;
}

html.codii-app .guided-result-meta {
  border-radius: 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.085) !important;
  background: rgba(255, 255, 255, 0.032) !important;
  padding: 0.75rem !important;
}

html.codii-app.codii-app-page-account .codii-account-page-masthead {
  margin: 0 0 0.95rem !important;
  padding: 0.15rem 0 0 !important;
}

html.codii-app.codii-app-page-account .codii-account-page-kicker {
  margin: 0 0 0.35rem !important;
  color: #ffe989 !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

html.codii-app.codii-app-page-account .codii-account-page-title {
  margin: 0 !important;
  color: #f8fafc !important;
  font-size: clamp(1.8rem, 4vw, 2.6rem) !important;
  letter-spacing: 0 !important;
  line-height: 1.02 !important;
}

html.codii-app.codii-app-page-account .codii-account-page-subtitle {
  margin: 0.45rem 0 0 !important;
  color: rgba(203, 207, 218, 0.82) !important;
}

html.codii-app.codii-app-page-account .codii-account-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1.05fr) minmax(330px, 0.75fr) !important;
  gap: 0.9rem !important;
  align-items: start !important;
}

html.codii-app.codii-app-page-account .codii-account-col {
  display: grid !important;
  gap: 0.9rem !important;
}

html.codii-app.codii-app-page-account .codii-account-panel,
html.codii-app.codii-app-page-account .codii-account-profile--hero-card,
html.codii-app.codii-app-page-account .codii-account-plan {
  border-radius: 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.105) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.038), rgba(255, 255, 255, 0.012)), rgba(8, 8, 11, 0.9) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 12px 32px rgba(0, 0, 0, 0.26) !important;
}

html.codii-app.codii-app-page-account .codii-account-profile--hero-card,
html.codii-app.codii-app-page-account .codii-account-plan,
html.codii-app.codii-app-page-account .codii-account-panel {
  padding: clamp(0.9rem, 2vw, 1.1rem) !important;
}

html.codii-app.codii-app-page-account .codii-account-profile--hero-card {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.8rem !important;
}

html.codii-app.codii-app-page-account .codii-account-avatar-wrap,
html.codii-app.codii-app-page-account .codii-account-avatar-fallback,
html.codii-app.codii-app-page-account #tenzyAccountAvatar {
  width: 58px !important;
  height: 58px !important;
  border-radius: 14px !important;
}

html.codii-app.codii-app-page-account .codii-account-avatar-fallback {
  display: grid !important;
  place-items: center !important;
  border: 1px solid rgba(231, 201, 75, 0.32) !important;
  background: rgba(231, 201, 75, 0.1) !important;
  color: #ffe989 !important;
}

html.codii-app.codii-app-page-account .codii-account-display-name,
html.codii-app.codii-app-page-account .codii-account-plan-heading,
html.codii-app.codii-app-page-account .codii-account-section-title {
  color: #f8fafc !important;
  letter-spacing: 0 !important;
}

html.codii-app.codii-app-page-account .codii-account-email,
html.codii-app.codii-app-page-account .codii-account-section-desc,
html.codii-app.codii-app-page-account .codii-account-plan-billing,
html.codii-app.codii-app-page-account .codii-account-plan-local-hint {
  color: rgba(203, 207, 218, 0.78) !important;
}

html.codii-app.codii-app-page-account .codii-account-badge,
html.codii-app.codii-app-page-account .pricing-current-badge {
  border-radius: 999px !important;
  border: 1px solid rgba(231, 201, 75, 0.34) !important;
  background: rgba(231, 201, 75, 0.095) !important;
  color: #ffe989 !important;
}

html.codii-app.codii-app-page-account .codii-account-plan-metrics {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0.55rem !important;
}

html.codii-app.codii-app-page-account .codii-account-plan-metric,
html.codii-app.codii-app-page-account .codii-account-section {
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.085) !important;
  background: rgba(255, 255, 255, 0.032) !important;
}

html.codii-app.codii-app-page-account .codii-account-section {
  padding: 0.95rem !important;
}

html.codii-app.codii-app-page-account .settings-input,
html.codii-app.codii-app-page-account .codii-account-input,
html.codii-app.codii-app-page-account .codii-account-input-full {
  min-height: 42px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: rgba(2, 2, 4, 0.82) !important;
  color: #f8fafc !important;
}

html.codii-app.codii-app-page-account .btn-primary,
html.codii-app.codii-app-page-account .codii-account-password-submit,
html.codii-app.codii-app-page-premium .btn-primary {
  border: 1px solid rgba(231, 201, 75, 0.48) !important;
  background: linear-gradient(180deg, #f2dc70, #caae36) !important;
  color: #151512 !important;
  font-weight: 800 !important;
}

html.codii-app.codii-app-page-account .btn-secondary,
html.codii-app.codii-app-page-premium .btn-secondary {
  border-color: rgba(255, 255, 255, 0.13) !important;
  background: rgba(255, 255, 255, 0.045) !important;
  color: #f8fafc !important;
}

html.codii-app.codii-app-page-account .codii-account-panel--danger-wrap {
  border-color: rgba(248, 113, 113, 0.25) !important;
  background: linear-gradient(180deg, rgba(248, 113, 113, 0.08), rgba(255, 255, 255, 0.012)), rgba(8, 8, 11, 0.9) !important;
}

html.codii-app.codii-app-page-account .codii-account-delete-confirm-btn {
  border: 1px solid rgba(248, 113, 113, 0.58) !important;
  background: rgba(127, 29, 29, 0.84) !important;
  color: #fff1f2 !important;
  font-weight: 800 !important;
}

html.codii-app.codii-app-page-premium .pricing-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0.9rem !important;
}

html.codii-app.codii-app-page-premium .pricing-card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 455px !important;
  padding: clamp(1rem, 2.2vw, 1.25rem) !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.105) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012)), rgba(8, 8, 11, 0.92) !important;
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

html.codii-app.codii-app-page-premium .pricing-card.premium,
html.codii-app.codii-app-page-premium .pricing-card.infinite {
  border-color: rgba(231, 201, 75, 0.28) !important;
}

html.codii-app.codii-app-page-premium .pricing-card.premium::before,
html.codii-app.codii-app-page-premium .pricing-card.infinite::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(231, 201, 75, 0.08), transparent 36%);
}

html.codii-app.codii-app-page-premium .pricing-title {
  position: relative !important;
  color: #f8fafc !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

html.codii-app.codii-app-page-premium .pricing-price {
  position: relative !important;
  margin: 0.55rem 0 0.8rem !important;
  color: #fff3a6 !important;
  font-size: clamp(1.9rem, 4vw, 2.45rem) !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
}

html.codii-app.codii-app-page-premium .pricing-list {
  position: relative !important;
  display: grid !important;
  gap: 0.48rem !important;
  margin: 0 0 1rem !important;
  padding: 0 !important;
  list-style: none !important;
}

html.codii-app.codii-app-page-premium .pricing-list li {
  position: relative !important;
  padding-left: 1.05rem !important;
  color: rgba(226, 232, 240, 0.84) !important;
  line-height: 1.42 !important;
}

html.codii-app.codii-app-page-premium .pricing-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.56em;
  width: 6px;
  height: 6px;
  border-radius: 99px;
  background: var(--tenzy-yellow);
  box-shadow: 0 0 12px rgba(231, 201, 75, 0.42);
}

html.codii-app.codii-app-page-premium .pricing-action {
  position: relative !important;
  margin-top: auto !important;
  width: 100% !important;
  min-height: 42px !important;
  border-radius: 10px !important;
}

@media (max-width: 980px) {
  html.codii-app.codii-app-page-account .codii-account-layout,
  html.codii-app.codii-app-page-premium .pricing-grid {
    grid-template-columns: 1fr !important;
  }

  html.codii-app.codii-app-page-premium .pricing-card {
    min-height: 0 !important;
  }
}

@media (max-width: 720px) {
  html.codii-app.codii-app-page-lessons .main-content,
  html.codii-app.codii-app-page-premium .premium-main,
  html.codii-app.codii-app-page-account .settings-container.codii-account-page {
    width: min(100% - 20px, 1180px) !important;
    padding-top: 0.65rem !important;
  }

  html.codii-app.codii-app-page-lessons .languages-section.panel,
  html.codii-app.codii-app-page-premium .languages-section.panel,
  html.codii-app.codii-app-page-account .codii-account-page-root {
    border-radius: 14px !important;
    padding: 0.8rem !important;
  }

  html.codii-app.codii-app-page-lessons .section-header,
  html.codii-app.codii-app-page-premium .section-header,
  html.codii-app.codii-app-page-account .codii-account-profile--hero-card {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  html.codii-app.codii-app-page-lessons .start-guide-btn,
  html.codii-app.codii-app-page-lessons .filter-search,
  html.codii-app.codii-app-page-lessons .filter-select,
  html.codii-app.codii-app-page-account .codii-account-field-row .btn {
    width: 100% !important;
  }

  html.codii-app.codii-app-page-lessons .lesson-toolbars-sticky {
    position: static !important;
  }

  html.codii-app.codii-app-page-lessons .filter-group {
    width: 100% !important;
  }

  html.codii-app.codii-app-page-lessons .filter-label {
    min-width: 72px !important;
  }

  html.codii-app.codii-app-page-lessons .lesson-hero-card {
    grid-template-columns: 1fr !important;
  }

  html.codii-app.codii-app-page-lessons .language-stats,
  html.codii-app.codii-app-page-account .codii-account-plan-metrics {
    grid-template-columns: 1fr !important;
  }

  html.codii-app .guided-start-content {
    grid-template-columns: 1fr !important;
  }

  html.codii-app .guided-start-body {
    max-height: min(54vh, 460px) !important;
  }
}