/* ============================================================
   BUTTONS
   ============================================================ */

.btn-primary {
  background: var(--mint);
  color: var(--navy);
  border: none;
  border-radius: var(--radius-sm);
  padding: 11px 22px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.015em;
  transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(61,219,168,0.25);
}
.btn-primary:hover {
  background: #4EEABB;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(61,219,168,0.32);
}
.btn-primary:active { transform: translateY(0); }

.btn-secondary {
  background: rgba(244,242,236,0.05);
  color: var(--bone);
  border: 1px solid var(--bone-line-2);
  border-radius: var(--radius-sm);
  padding: 10px 18px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.btn-secondary:hover {
  background: rgba(244,242,236,0.10);
  border-color: rgba(244,242,236,0.30);
}

.btn-ghost {
  background: transparent;
  color: var(--bone-mute);
  border: 1px solid var(--bone-line);
  border-radius: var(--radius-sm);
  padding: 7px 13px;
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.14s, color 0.14s, border-color 0.14s;
  white-space: nowrap;
}
.btn-ghost:hover {
  background: rgba(244,242,236,0.05);
  color: var(--bone);
  border-color: var(--bone-line-2);
}
.btn-ghost.mint { color: var(--mint); border-color: rgba(61,219,168,0.25); }
.btn-ghost.mint:hover { background: var(--mint-soft); border-color: rgba(61,219,168,0.4); }

.btn-small { padding: 7px 13px; font-size: 11.5px; border-radius: var(--radius-sm); }

/* ============================================================
   HOME — hero
   ============================================================ */

.home-hero {
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 100%);
  padding: 64px 48px 56px;
  position: relative;
  overflow: hidden;
}
.home-hero::before {
  content: '';
  position: absolute;
  top: -120px; left: -100px;
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, rgba(61,219,168,0.18) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.home-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(244,242,236,0.045) 1px, transparent 1px);
  background-size: 26px 26px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.8;
}

.home-hero-inner {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 48px;
  align-items: stretch;
  position: relative;
  z-index: 2;
  max-width: 1180px;
  margin: 0 auto;
}

.hero-welcome { display: flex; flex-direction: column; gap: 20px; }
.hero-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--mint);
  display: flex;
  align-items: center;
  gap: 12px;
}
.hero-eyebrow::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--mint);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(61,219,168,0.18);
}
.hero-greeting {
  font-size: clamp(40px, 5vw, 60px);
  font-weight: 300;
  color: var(--bone);
  line-height: 1.0;
  letter-spacing: -0.028em;
}
.hero-greeting strong { font-weight: 700; }

.hero-next-class {
  margin-top: 8px;
  background: rgba(244,242,236,0.04);
  border: 1px solid var(--bone-line);
  border-left: 3px solid var(--mint);
  border-radius: var(--radius-lg);
  padding: 22px 26px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: var(--shadow-card);
}
.hero-class-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--mint);
  display: flex;
  align-items: center;
  gap: 10px;
}
.hero-class-label::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--mint);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.4); }
}
.hero-class-info { display: flex; flex-direction: column; gap: 4px; }
.hero-class-date {
  font-size: 20px;
  font-weight: 600;
  color: var(--bone);
  letter-spacing: -0.012em;
}
.hero-class-topic {
  font-size: 14px;
  color: var(--bone-mute);
}
.hero-class-actions { display: flex; gap: 10px; }

/* ---- Hero portrait card ---- */
.hero-portrait {
  background: var(--navy-2);
  border: 1px solid var(--bone-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-card);
}
.hero-portrait-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  background-size: cover;
  background-position: center;
  position: relative;
}
.hero-portrait-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(11,26,58,0.85) 100%);
  pointer-events: none;
}
.hero-portrait-meta {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hero-portrait-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--bone);
  letter-spacing: -0.005em;
}
.hero-portrait-level {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mint);
}
.hero-portrait-consultant {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.10em;
  color: var(--bone-faint);
  margin-top: 6px;
}

/* ============================================================
   HOME — card grid
   ============================================================ */

.home-cards-section {
  padding: 40px 48px 16px;
  max-width: 1180px;
  margin: 0 auto;
}

.home-section-title {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--bone-faint);
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.home-section-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--bone-line);
}

.home-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.home-card {
  background: var(--navy-2);
  border: 1px solid var(--bone-line);
  border-radius: var(--radius-lg);
  padding: 22px 22px 20px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  overflow: hidden;
  transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s;
}
.home-card:hover {
  transform: translateY(-2px);
  border-color: var(--bone-line-2);
  box-shadow: var(--shadow-float);
}
.home-card.accent-mint {
  border-left: 3px solid var(--mint);
}
.home-card.accent-mint::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -30%;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(61,219,168,0.10) 0%, transparent 70%);
  pointer-events: none;
}

.home-card-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--bone-faint);
}
.home-card.accent-mint .home-card-label { color: var(--mint); }
.home-card-value {
  font-size: 26px;
  font-weight: 700;
  color: var(--bone);
  letter-spacing: -0.025em;
  line-height: 1;
}
.home-card-value .unit {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  color: var(--bone-faint);
  margin-left: 5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.home-card-desc {
  font-size: 13px;
  color: var(--bone-mute);
  line-height: 1.5;
  flex: 1;
}
.home-card-action { margin-top: 6px; }

.focus-items {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.focus-item {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 12.5px;
  color: var(--bone-mute);
  line-height: 1.4;
}
.focus-item::before {
  content: '';
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--mint);
  flex-shrink: 0;
  margin-top: 7px;
}

/* ============================================================
   HOME — latest lesson preview
   ============================================================ */

.home-latest {
  padding: 28px 48px 56px;
  max-width: 1180px;
  margin: 0 auto;
}

.lesson-card-mini {
  background: var(--navy-2);
  border: 1px solid var(--bone-line);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 22px;
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.lesson-card-mini:hover {
  transform: translateY(-2px);
  border-color: var(--bone-line-2);
  box-shadow: var(--shadow-float);
}
.lesson-card-date {
  flex-shrink: 0;
  text-align: center;
  background: var(--navy-3);
  border: 1px solid var(--bone-line);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  min-width: 58px;
}
.lesson-card-date-day {
  font-size: 22px;
  font-weight: 700;
  color: var(--bone);
  line-height: 1;
  letter-spacing: -0.02em;
}
.lesson-card-date-mon {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mint);
  margin-top: 4px;
}
.lesson-card-info { flex: 1; }
.lesson-card-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--bone);
  margin-bottom: 4px;
  letter-spacing: -0.005em;
}
.lesson-card-summary {
  font-size: 13px;
  color: var(--bone-mute);
  line-height: 1.5;
}
.lesson-card-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

/* ============================================================
   LESSONS
   ============================================================ */

.search-bar-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
}
.search-input-wrap { flex: 1; position: relative; }
.search-input-wrap svg {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px; height: 14px;
  color: var(--bone-faint);
}
.search-input {
  width: 100%;
  background: var(--navy-2);
  border: 1px solid var(--bone-line);
  border-radius: var(--radius-sm);
  padding: 11px 14px 11px 38px;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--bone);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.search-input::placeholder { color: var(--bone-faint); }
.search-input:focus {
  border-color: rgba(61,219,168,0.45);
  box-shadow: 0 0 0 3px rgba(61,219,168,0.10);
  background: var(--navy-3);
}

.btn-filter {
  background: var(--navy-2);
  border: 1px solid var(--bone-line);
  border-radius: var(--radius-sm);
  padding: 11px 16px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--bone-mute);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background 0.14s, border-color 0.14s, color 0.14s;
}
.btn-filter:hover {
  background: var(--navy-3);
  color: var(--bone);
  border-color: var(--bone-line-2);
}
.btn-filter svg { width: 12px; height: 12px; }

.lessons-list { display: flex; flex-direction: column; gap: 14px; }

.lesson-card-full {
  background: var(--navy-2);
  border: 1px solid var(--bone-line);
  border-radius: var(--radius-lg);
  padding: 24px 26px;
  display: flex;
  align-items: flex-start;
  gap: 24px;
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.lesson-card-full:hover {
  transform: translateY(-2px);
  border-color: var(--bone-line-2);
  box-shadow: var(--shadow-float);
}

.lesson-card-full .date-block {
  flex-shrink: 0;
  text-align: center;
  background: var(--navy-3);
  border: 1px solid var(--bone-line);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  min-width: 64px;
}
.lesson-card-full .date-block .day {
  font-size: 26px;
  font-weight: 700;
  color: var(--bone);
  line-height: 1;
  letter-spacing: -0.025em;
}
.lesson-card-full .date-block .month {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mint);
  margin-top: 4px;
}

.lesson-card-body { flex: 1; }
.lesson-card-mode {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mint);
  margin-bottom: 7px;
}
.lesson-card-mode::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--mint);
}
.lesson-card-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--bone);
  letter-spacing: -0.012em;
  margin-bottom: 6px;
}
.lesson-card-desc {
  font-size: 13.5px;
  color: var(--bone-mute);
  line-height: 1.55;
  margin-bottom: 14px;
  max-width: 560px;
}
.lesson-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.tag {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 3px;
  background: rgba(244,242,236,0.05);
  border: 1px solid var(--bone-line);
  color: var(--bone-mute);
}
.tag.mint {
  background: var(--mint-soft);
  border-color: rgba(61,219,168,0.25);
  color: var(--mint);
}

.lesson-card-actions-col {
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex-shrink: 0;
}

/* ============================================================
   PRACTICE
   ============================================================ */

.practice-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 20px;
}

.practice-card {
  background: var(--navy-2);
  border: 1px solid var(--bone-line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.practice-card-head {
  padding: 22px 24px 18px;
  border-bottom: 1px solid var(--bone-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.practice-card-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--bone);
  letter-spacing: -0.012em;
}
.practice-card-meta {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone-faint);
}
.practice-card-body { padding: 20px 24px 24px; }

/* Chip rows */
.chip-group { margin-bottom: 14px; }
.chip-group-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bone-faint);
  margin-bottom: 8px;
}
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  padding: 6px 12px;
  border-radius: 100px;
  border: 1px solid var(--bone-line);
  background: rgba(244,242,236,0.03);
  color: var(--bone-mute);
  cursor: pointer;
  transition: background 0.13s, border-color 0.13s, color 0.13s;
}
.chip:hover { background: rgba(244,242,236,0.07); }
.chip.active {
  background: var(--mint-soft);
  border-color: rgba(61,219,168,0.35);
  color: var(--mint);
}
.chip.active-coral {
  background: var(--coral-soft);
  border-color: rgba(255,107,92,0.35);
  color: var(--coral);
}

/* Word bank table */
.word-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 14px;
}
.word-table th {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--bone-faint);
  padding: 9px 10px;
  text-align: left;
  border-bottom: 1px solid var(--bone-line);
  background: rgba(244,242,236,0.02);
  font-weight: 600;
}
.word-table td {
  padding: 11px 10px;
  border-bottom: 1px dashed var(--bone-line);
  font-size: 13px;
  color: var(--bone);
  vertical-align: middle;
}
.word-table tr:last-child td { border-bottom: none; }
.word-table tr:hover td { background: rgba(244,242,236,0.03); }
.word-table .word-from {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--bone-faint);
  letter-spacing: 0.05em;
}
.word-table .word-level {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  color: var(--mint);
  letter-spacing: 0.1em;
}

.status-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  display: inline-block;
}
.status-dot.new   { background: var(--coral); }
.status-dot.pract { background: var(--amber); }
.status-dot.comf  { background: var(--mint); }

/* Grammar section in Practice (kept as drill list with detail drawer) */
.grammar-groups { display: flex; flex-direction: column; gap: 14px; }
.grammar-group-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.grammar-group-label.well  { color: var(--mint); }
.grammar-group-label.soon  { color: var(--amber); }
.grammar-group-label.focus { color: var(--coral); }

.grammar-cards { display: flex; flex-wrap: wrap; gap: 8px; }
.grammar-chip {
  background: var(--navy-3);
  border: 1px solid var(--bone-line);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--bone);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: transform 0.14s, border-color 0.14s, background 0.14s;
}
.grammar-chip:hover {
  transform: translateY(-1px);
  background: var(--navy-4);
  border-color: var(--bone-line-2);
}
.grammar-chip .gc-dot { width: 8px; height: 8px; border-radius: 50%; }
.grammar-chip.well  .gc-dot { background: var(--mint); }
.grammar-chip.soon  .gc-dot { background: var(--amber); }
.grammar-chip.focus .gc-dot { background: var(--coral); }

.grammar-detail {
  display: none;
  background: var(--navy);
  border: 1px solid var(--bone-line);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  margin-top: 12px;
  box-shadow: var(--shadow-inset), var(--shadow-card);
}
.grammar-detail.open { display: block; }
.grammar-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.grammar-detail-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--bone);
  letter-spacing: -0.01em;
}
.grammar-detail-close {
  background: transparent;
  border: none;
  color: var(--bone-faint);
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  padding: 0 4px;
}
.grammar-detail-close:hover { color: var(--bone); }
.grammar-detail-section { margin-bottom: 14px; }
.grammar-detail-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mint);
  margin-bottom: 6px;
}
.grammar-detail-text {
  font-size: 13px;
  color: var(--bone-mute);
  line-height: 1.55;
}
.grammar-detail-example {
  background: rgba(244,242,236,0.04);
  border: 1px solid var(--bone-line);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  font-size: 13.5px;
  color: var(--bone);
  font-style: italic;
  margin-top: 4px;
}
.grammar-detail-better {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: var(--mint);
  margin-top: 8px;
  font-weight: 500;
}
.grammar-detail-better .arrow { color: var(--bone-faint); font-style: normal; }

/* Say It Better */
.say-card {
  background: var(--navy-2);
  border: 1px solid var(--bone-line);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.say-card-head {
  padding: 16px 24px;
  border-bottom: 1px solid var(--bone-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.say-card-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mint);
}
.say-card-pill {
  background: var(--mint-soft);
  border: 1px solid rgba(61,219,168,0.25);
  color: var(--mint);
  padding: 4px 10px;
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.15em;
}
.say-card-body { padding: 22px 24px 24px; }
.say-q {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--bone-faint);
  margin-bottom: 10px;
}
.say-original {
  font-size: 14px;
  color: var(--bone-mute);
  font-style: italic;
  padding: 12px 14px;
  background: rgba(255,107,92,0.06);
  border-left: 2px solid rgba(255,107,92,0.5);
  border-radius: 0 4px 4px 0;
  line-height: 1.45;
  margin-bottom: 16px;
}
.say-options { display: flex; flex-direction: column; gap: 8px; }
.say-option {
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--bone-line);
  background: rgba(244,242,236,0.02);
  font-size: 13px;
  color: var(--bone-mute);
  display: flex;
  align-items: center;
  gap: 11px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.say-option:hover:not(.correct) {
  background: rgba(244,242,236,0.06);
  border-color: var(--bone-line-2);
}
.say-option .mk {
  width: 15px; height: 15px;
  border: 1px solid var(--bone-faint);
  border-radius: 3px;
  flex-shrink: 0;
}
.say-option.correct {
  background: var(--mint-soft);
  border-color: var(--mint);
  color: var(--bone);
}
.say-option.correct .mk {
  background: var(--mint);
  border-color: var(--mint);
  position: relative;
}
.say-option.correct .mk::after {
  content: '';
  position: absolute;
  left: 4px; top: 1px;
  width: 5px; height: 9px;
  border: solid var(--navy);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}

/* ============================================================
   PROGRESS — radar chart, vocab cards, grammar zones, sparkline,
                trajectory, letter-style snapshot
   ============================================================ */

.progress-headline-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: -2px;
  margin-bottom: 4px;
}
.progress-cefr-pill {
  background: rgba(61,219,168,0.10);
  border: 1px solid rgba(61,219,168,0.25);
  border-radius: 100px;
  padding: 6px 14px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  color: var(--mint);
}
.progress-cefr-pill::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--mint);
}
.progress-trajectory {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mint);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.progress-trajectory svg {
  width: 12px; height: 12px;
}

.progress-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 18px;
}

.progress-card {
  background: var(--navy-2);
  border: 1px solid var(--bone-line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.progress-card.full-width { grid-column: 1 / -1; }
.progress-card-head {
  padding: 22px 24px 14px;
  border-bottom: 1px solid var(--bone-line);
}
.progress-card-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--bone);
  letter-spacing: -0.01em;
}
.progress-card-subtitle {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone-faint);
  margin-top: 4px;
}
.progress-card-body { padding: 22px 24px 24px; }

/* Radar chart card */
.radar-wrap {
  position: relative;
  width: 100%;
  height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.radar-wrap canvas {
  max-width: 100%;
  max-height: 100%;
}

/* Vocabulary 2x2 grid */
.vocab-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.vocab-tile {
  background: var(--navy-3);
  border: 1px solid var(--bone-line);
  border-radius: var(--radius-lg);
  padding: 18px 20px 16px;
  position: relative;
  overflow: hidden;
  transition: transform 0.15s, border-color 0.15s;
}
.vocab-tile:hover {
  transform: translateY(-2px);
  border-color: var(--bone-line-2);
}
.vocab-tile.dominant {
  border-color: rgba(61,219,168,0.35);
  background: linear-gradient(140deg, rgba(61,219,168,0.10) 0%, var(--navy-3) 60%);
}
.vocab-tile.dominant::after {
  content: '';
  position: absolute;
  top: -50%;
  right: -30%;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(61,219,168,0.10) 0%, transparent 70%);
  pointer-events: none;
}
.vocab-tile-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  position: relative;
  z-index: 2;
}
.vocab-tile-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--bone-faint);
  padding: 3px 8px;
  background: rgba(244,242,236,0.05);
  border: 1px solid var(--bone-line);
  border-radius: 3px;
}
.vocab-tile.dominant .vocab-tile-badge {
  color: var(--mint);
  background: var(--mint-soft);
  border-color: rgba(61,219,168,0.25);
}
.vocab-tile-dominant-tag {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--mint);
}
.vocab-tile-number {
  font-size: 44px;
  font-weight: 700;
  color: var(--bone);
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 6px;
  position: relative;
  z-index: 2;
}
.vocab-tile.dominant .vocab-tile-number { color: var(--mint); }
.vocab-tile-desc {
  font-size: 12px;
  color: var(--bone-mute);
  line-height: 1.45;
  position: relative;
  z-index: 2;
}

/* Grammar progress — tinted zones */
.grammar-zones {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
}
.grammar-zone {
  border-radius: var(--radius-lg);
  padding: 18px 20px 20px;
  border-left-width: 3px;
  border-left-style: solid;
  position: relative;
  min-height: 200px;
}
.grammar-zone.well {
  background: rgba(61,219,168,0.08);
  border: 1px solid rgba(61,219,168,0.15);
  border-left: 3px solid var(--mint);
}
.grammar-zone.soon {
  background: rgba(244,242,236,0.05);
  border: 1px solid var(--bone-line);
  border-left: 3px solid var(--bone-soft);
}
.grammar-zone.focus {
  background: rgba(255,107,92,0.08);
  border: 1px solid rgba(255,107,92,0.18);
  border-left: 3px solid var(--coral);
}

.grammar-zone-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.grammar-zone.well  .grammar-zone-label { color: var(--mint); }
.grammar-zone.soon  .grammar-zone-label { color: var(--amber); }
.grammar-zone.focus .grammar-zone-label { color: var(--coral); }
.grammar-zone-count {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.10em;
  color: var(--bone-faint);
  margin-bottom: 14px;
}

.grammar-zone-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.grammar-zone-card {
  background: rgba(11,26,58,0.5);
  border: 1px solid var(--bone-line);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  cursor: pointer;
  transition: transform 0.14s, border-color 0.14s, background 0.14s;
}
.grammar-zone-card:hover {
  transform: translateY(-1px);
  background: var(--navy-3);
  border-color: var(--bone-line-2);
}
.grammar-zone-card-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--bone);
  margin-bottom: 5px;
  letter-spacing: -0.005em;
}
.grammar-zone-card-example {
  font-size: 11.5px;
  color: var(--bone-faint);
  font-style: italic;
  line-height: 1.45;
}

/* Utilisation sparkline */
.sparkline-card {
  background: var(--navy-2);
  border: 1px solid var(--bone-line);
  border-radius: var(--radius-lg);
  padding: 18px 22px;
  display: flex;
  align-items: center;
  gap: 22px;
  box-shadow: var(--shadow-card);
  margin-bottom: 18px;
}
.sparkline-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
}
.sparkline-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bone-faint);
}
.sparkline-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--bone);
  letter-spacing: -0.02em;
  line-height: 1;
}
.sparkline-value .pct {
  color: var(--mint);
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  margin-left: 6px;
  letter-spacing: 0;
}
.sparkline-svg-wrap {
  flex: 1;
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 44px;
}
.sparkline-bar {
  flex: 1;
  background: rgba(244,242,236,0.10);
  border-radius: 2px;
  position: relative;
  transition: background 0.2s;
}
.sparkline-bar.attended {
  background: var(--mint);
  box-shadow: 0 0 8px rgba(61,219,168,0.35);
}
.sparkline-bar.attended-low {
  background: rgba(61,219,168,0.6);
}
.sparkline-legend {
  display: flex;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone-faint);
  flex-shrink: 0;
}
.sparkline-legend .item {
  display: flex;
  align-items: center;
  gap: 6px;
}
.sparkline-legend .dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
}
.sparkline-legend .dot.attended { background: var(--mint); }
.sparkline-legend .dot.missed { background: rgba(244,242,236,0.18); }

/* Monthly snapshot — letter-style expanded */
.snapshot-card {
  background: linear-gradient(180deg, var(--navy-2) 0%, var(--navy-3) 100%);
  border: 1px solid var(--bone-line);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.snapshot-collapsed {
  padding: 22px 24px;
  display: flex;
  align-items: center;
  gap: 20px;
  cursor: pointer;
}
.snapshot-month-badge {
  background: var(--mint-soft);
  border: 1px solid rgba(61,219,168,0.25);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  text-align: center;
  flex-shrink: 0;
}
.snapshot-month-name {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mint);
  font-weight: 700;
}
.snapshot-summary { flex: 1; }
.snapshot-summary-text {
  font-size: 15px;
  color: var(--bone);
  font-weight: 500;
  line-height: 1.4;
  margin-bottom: 4px;
}
.snapshot-summary-sub {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone-faint);
}
.snapshot-toggle-btn {
  background: rgba(244,242,236,0.06);
  border: 1px solid var(--bone-line-2);
  border-radius: var(--radius-sm);
  padding: 9px 16px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mint);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.14s, border-color 0.14s;
}
.snapshot-toggle-btn:hover {
  background: rgba(244,242,236,0.10);
  border-color: rgba(61,219,168,0.30);
}

.snapshot-expanded {
  display: none;
  border-top: 1px solid var(--bone-line);
  background: var(--navy);
}
.snapshot-expanded.open { display: block; }

/* The "letter" layout — generous, indented, line-height 1.8 */
.letter {
  max-width: 680px;
  margin: 0 auto;
  padding: 44px 48px 48px;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.8;
  color: var(--bone-mute);
}
.letter-greeting {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--mint);
  margin-bottom: 22px;
}
.letter-headline {
  font-size: 22px;
  font-weight: 300;
  letter-spacing: -0.015em;
  color: var(--bone);
  line-height: 1.3;
  margin-bottom: 28px;
}
.letter-headline strong { font-weight: 700; color: var(--mint); }
.letter h4 {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--mint);
  font-weight: 600;
  margin-top: 24px;
  margin-bottom: 6px;
}
.letter h4:first-of-type { margin-top: 0; }
.letter p {
  font-size: 15px;
  line-height: 1.8;
  color: var(--bone-mute);
  margin-bottom: 4px;
}
.letter p strong { color: var(--bone); font-weight: 600; }
.letter-signoff {
  margin-top: 36px;
  padding-top: 22px;
  border-top: 1px dashed var(--bone-line);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  color: var(--mint);
  font-style: normal;
}
.letter-signoff .name {
  display: block;
  font-family: var(--font-sans);
  font-size: 14px;
  font-style: italic;
  color: var(--bone);
  letter-spacing: 0;
  margin-top: 4px;
}

/* ============================================================
   PLAN
   ============================================================ */

.plan-grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 18px;
}

.plan-card {
  background: var(--navy-2);
  border: 1px solid var(--bone-line);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.plan-card.feature {
  background: linear-gradient(160deg, var(--navy-2) 0%, var(--navy-3) 100%);
  border-color: rgba(61,219,168,0.18);
}
.plan-card-head {
  padding: 22px 26px 16px;
  border-bottom: 1px solid var(--bone-line);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.plan-card-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--bone);
  letter-spacing: -0.012em;
}
.plan-card-meta {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone-faint);
}
.plan-card-body { padding: 24px 26px 26px; }

.balance-hero {
  text-align: center;
  padding: 22px 0 24px;
  position: relative;
}
.balance-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, rgba(61,219,168,0.10) 0%, transparent 70%);
  pointer-events: none;
}
.balance-number {
  position: relative;
  font-size: 78px;
  font-weight: 700;
  color: var(--bone);
  letter-spacing: -0.045em;
  line-height: 1;
}
.balance-number::after {
  content: '';
  display: block;
  width: 40px;
  height: 1px;
  background: var(--mint);
  margin: 14px auto 0;
}
.balance-unit {
  position: relative;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--mint);
  margin-top: 14px;
}

.balance-breakdown {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--bone-line);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 18px;
  background: rgba(11,26,58,0.4);
}
.balance-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--bone-line);
  font-size: 13px;
}
.balance-row:last-child { border-bottom: none; }
.balance-row.total {
  background: rgba(61,219,168,0.08);
  border-top: 1px solid rgba(61,219,168,0.25);
}
.balance-row .key { color: var(--bone-mute); font-size: 13px; }
.balance-row .val {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--bone);
}
.balance-row.total .key { color: var(--bone); font-weight: 600; }
.balance-row.total .val { color: var(--mint); font-size: 14px; }

.balance-explainer {
  font-size: 12.5px;
  color: var(--bone-faint);
  line-height: 1.55;
  margin-bottom: 12px;
}
.balance-formula-toggle {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mint);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity 0.14s;
}
.balance-formula-toggle:hover { opacity: 0.7; }
.balance-formula {
  display: none;
  margin-top: 12px;
  background: rgba(11,26,58,0.5);
  border: 1px solid var(--bone-line);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--bone-mute);
  line-height: 1.75;
}
.balance-formula.open { display: block; }

.plan-detail-rows { display: flex; flex-direction: column; gap: 0; }
.plan-detail-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 0;
  border-bottom: 1px dashed var(--bone-line);
  font-size: 13px;
}
.plan-detail-row:last-child { border-bottom: none; }
.plan-detail-key {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone-faint);
}
.plan-detail-val {
  font-weight: 600;
  color: var(--bone);
  font-size: 13px;
}
.plan-detail-val.active {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--mint);
}
.plan-detail-val.active::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 0 4px rgba(61,219,168,0.18);
}

.plan-help-line {
  font-size: 12.5px;
  color: var(--bone-faint);
  line-height: 1.55;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--bone-line);
}
.plan-help-line strong { color: var(--bone); font-weight: 600; }

/* ============================================================
   ANIMATIONS
   ============================================================ */

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.page-section.active .anim-enter { animation: fadeUp 0.5s ease-out both; }
.page-section.active .anim-enter:nth-of-type(2) { animation-delay: 0.06s; }
.page-section.active .anim-enter:nth-of-type(3) { animation-delay: 0.12s; }
.page-section.active .anim-enter:nth-of-type(4) { animation-delay: 0.18s; }
.page-section.active .anim-enter:nth-of-type(5) { animation-delay: 0.24s; }
.page-section.active .anim-enter:nth-of-type(6) { animation-delay: 0.30s; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1024px) {
  .home-hero-inner { grid-template-columns: 1fr 280px; }
  .home-cards { grid-template-columns: repeat(2, 1fr); }
  .progress-grid, .practice-grid, .plan-grid { grid-template-columns: 1fr; }
  .grammar-zones { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .topnav { padding: 0 18px; }
  .tab-sub { display: none; }
  .home-hero-inner { grid-template-columns: 1fr; }
  .hero-portrait { display: none; }
  .home-hero, .home-cards-section, .home-latest, .section-page { padding-left: 18px; padding-right: 18px; }
  .vocab-grid { grid-template-columns: 1fr; }
  .letter { padding: 28px 22px 34px; }
}

/* ============================================================
   UTILITIES
   ============================================================ */
.font-mono { font-family: var(--font-mono); }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mt-20 { margin-top: 20px; }

/* ============================================================
   v3 ADDITIONS — practice modes, word detail, grammar by level
   ============================================================ */

/* Make hero portrait img a clean circle (the new astronaut photo
   has a circular composition on bone — clipping to a circle hides
   the bone corners against the navy card). */
.hero-portrait { background: transparent; border: none; box-shadow: none; padding-top: 8px; }
.hero-portrait-img {
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--bone-line-2);
  box-shadow: 0 8px 32px rgba(0,0,0,0.35), 0 0 0 4px rgba(11,26,58,0.5),
              0 0 40px rgba(61,219,168,0.20);
  margin: 0 auto;
  width: 88%;
}
.hero-portrait-img::after { display: none; }  /* drop the dark gradient overlay — photo already has its own */
.hero-portrait-meta { padding: 18px 8px 8px; text-align: center; }
.hero-portrait-name { font-size: 17px; }
.hero-portrait-level { font-size: 10px; margin-top: 6px; }
.hero-portrait-consultant { margin-top: 8px; text-align: center; }

/* ----- PRACTICE MODES ROW (above Say It Better) ----- */
.practice-modes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}
.mode-card {
  background: var(--navy-2);
  border: 1px solid var(--bone-line);
  border-radius: var(--radius-lg);
  padding: 18px 18px 16px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  overflow: hidden;
  transition: transform 0.16s, border-color 0.16s, box-shadow 0.16s;
  box-shadow: var(--shadow-card);
}
.mode-card:hover {
  transform: translateY(-2px);
  border-color: var(--bone-line-2);
  box-shadow: var(--shadow-float);
}
.mode-card.active {
  border-color: rgba(61,219,168,0.45);
  border-left: 3px solid var(--mint);
}
.mode-card.active::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -30%;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(61,219,168,0.12) 0%, transparent 70%);
  pointer-events: none;
}
.mode-icon {
  width: 32px; height: 32px;
  border-radius: 7px;
  background: rgba(61,219,168,0.08);
  border: 1px solid rgba(61,219,168,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mint);
  position: relative;
  z-index: 2;
}
.mode-icon svg { width: 16px; height: 16px; }
.mode-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--bone);
  letter-spacing: -0.008em;
  position: relative;
  z-index: 2;
}
.mode-desc {
  font-size: 11.5px;
  color: var(--bone-mute);
  line-height: 1.45;
  flex: 1;
  position: relative;
  z-index: 2;
}
.mode-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
  position: relative;
  z-index: 2;
}
.mode-meta-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone-faint);
}
.mode-card.active .mode-meta-label { color: var(--mint); }
.mode-meta-time {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--bone-faint);
  letter-spacing: 0.1em;
}

/* ----- WORD BANK: clickable rows + inline detail drawer ----- */
.word-table tbody tr { cursor: pointer; transition: background 0.12s; }
.word-table tbody tr.word-row td:first-child { position: relative; padding-left: 22px; }
.word-table tbody tr.word-row td:first-child::before {
  content: '+';
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--mint);
  opacity: 0.7;
  transition: transform 0.18s, opacity 0.18s;
  font-weight: 600;
}
.word-table tbody tr.word-row.open td:first-child::before {
  content: '−';
  opacity: 1;
}
.word-detail-row { display: none; }
.word-detail-row.open { display: table-row; }
.word-detail-row td {
  padding: 0 0 0 0 !important;
  background: rgba(11,26,58,0.55) !important;
  border-bottom: 1px solid var(--bone-line) !important;
}
.word-detail-inner {
  padding: 18px 22px 22px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 28px;
}
.word-detail-block {}
.word-detail-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mint);
  margin-bottom: 6px;
}
.word-detail-text {
  font-size: 13px;
  color: var(--bone);
  line-height: 1.55;
}
.word-detail-pt {
  font-size: 14px;
  color: var(--bone);
  font-style: italic;
  font-weight: 500;
}
.word-detail-example {
  font-size: 13px;
  color: var(--bone-mute);
  line-height: 1.55;
  padding: 10px 13px;
  background: rgba(244,242,236,0.04);
  border-left: 2px solid rgba(61,219,168,0.4);
  border-radius: 0 3px 3px 0;
  font-style: italic;
}
.word-detail-example .ex-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-style: normal;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mint);
  margin-right: 8px;
  font-weight: 600;
  vertical-align: 2px;
}
.word-detail-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: 8px;
  padding-top: 4px;
  border-top: 1px dashed var(--bone-line);
  margin-top: 4px;
}

/* ----- GRAMMAR BY LEVEL ----- */
.grammar-by-level {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.glevel {
  background: var(--navy-3);
  border: 1px solid var(--bone-line);
  border-radius: var(--radius-lg);
  padding: 18px 20px 20px;
  position: relative;
}
.glevel.current {
  background: linear-gradient(140deg, rgba(61,219,168,0.07) 0%, var(--navy-3) 65%);
  border-color: rgba(61,219,168,0.25);
}
.glevel-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 4px;
}
.glevel-badge {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  padding: 4px 10px;
  border-radius: 4px;
  background: rgba(244,242,236,0.05);
  border: 1px solid var(--bone-line);
  color: var(--bone-mute);
}
.glevel.current .glevel-badge {
  background: var(--mint-soft);
  border-color: rgba(61,219,168,0.30);
  color: var(--mint);
}
.glevel-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--bone);
  letter-spacing: -0.005em;
}
.glevel-tag {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--mint);
}
.glevel-desc {
  font-size: 12px;
  color: var(--bone-faint);
  margin-bottom: 14px;
  line-height: 1.5;
}
.glevel-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.gtopic {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: rgba(11,26,58,0.5);
  border: 1px solid var(--bone-line);
  font-size: 12.5px;
  color: var(--bone-mute);
  cursor: pointer;
  transition: background 0.13s, border-color 0.13s, color 0.13s, transform 0.13s;
}
.gtopic:hover {
  transform: translateY(-1px);
  background: var(--navy-2);
  color: var(--bone);
  border-color: var(--bone-line-2);
}
.gtopic .gdot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.gtopic.well   { color: var(--bone); }
.gtopic.well .gdot   { background: var(--mint); }
.gtopic.soon   { color: var(--bone); }
.gtopic.soon .gdot   { background: var(--amber); }
.gtopic.focus  { color: var(--bone); }
.gtopic.focus .gdot  { background: var(--coral); }
.gtopic.untouched .gdot { background: var(--bone-line-2); }
.gtopic.untouched { opacity: 0.7; }
.gtopic.locked {
  opacity: 0.45;
  cursor: not-allowed;
}
.gtopic.locked .gdot { background: var(--bone-line-2); }

.glevel-legend {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px dashed var(--bone-line);
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone-faint);
}
.glevel-legend .item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.glevel-legend .ldot {
  width: 7px; height: 7px;
  border-radius: 50%;
}
.glevel-legend .ldot.well  { background: var(--mint); }
.glevel-legend .ldot.soon  { background: var(--amber); }
.glevel-legend .ldot.focus { background: var(--coral); }
.glevel-legend .ldot.unt   { background: var(--bone-line-2); }

/* small-screen tweaks for the new components */
@media (max-width: 1024px) {
  .practice-modes { grid-template-columns: repeat(2, 1fr); }
  .word-detail-inner { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .practice-modes { grid-template-columns: 1fr; }
}


/* ============================================================
   v4 — WAID-style report surfaces & executive summary palette
   ============================================================ */

/* Cream report panel — sparingly used for high-contrast summaries.
   Mirrors the WAID deck's .slide.light pattern. */
.report-card {
  background: var(--bone);
  color: var(--ink);
  border: 1px solid rgba(11, 26, 58, 0.06);
  border-radius: var(--radius-xl);
  box-shadow:
    0 1px 3px rgba(0,0,0,0.20),
    0 16px 48px rgba(0,0,0,0.28),
    inset 0 1px 0 rgba(255,255,255,0.5);
  overflow: hidden;
  position: relative;
}
.report-card::before {
  /* subtle dot-grid texture echoing the WAID deck */
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(11, 26, 58, 0.04) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
  opacity: 0.5;
}
.report-card > * { position: relative; z-index: 2; }

.report-card__head {
  padding: 26px 30px 18px;
  border-bottom: 1px solid rgba(11, 26, 58, 0.08);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.report-card__eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--mint-2);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.report-card__eyebrow::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--mint-2);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(61,219,168,0.15);
}
.report-card__headline {
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 300;
  letter-spacing: -0.018em;
  color: var(--ink);
  line-height: 1.2;
  max-width: 720px;
}
.report-card__headline strong { font-weight: 700; color: var(--mint-2); }
.report-card__sub {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: 14px;
}
.report-card__body { padding: 22px 30px 30px; }

/* Insight tile row inside the cream report card.
   White tiles, navy text — closely echoes the WAID metric cards. */
.insight-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 22px;
}
.insight-tile {
  background: #fff;
  border: 1px solid rgba(11, 26, 58, 0.08);
  border-radius: var(--radius-md);
  padding: 16px 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  overflow: hidden;
  transition: transform 0.16s, border-color 0.16s;
}
.insight-tile:hover {
  transform: translateY(-1px);
  border-color: rgba(61,219,168,0.30);
}
.insight-tile--accent {
  background: linear-gradient(160deg, #fff 0%, rgba(61,219,168,0.10) 100%);
  border-color: rgba(61,219,168,0.25);
}
.insight-tile__label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 600;
}
.insight-tile--accent .insight-tile__label { color: var(--mint-2); }
.insight-tile__value {
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.022em;
  line-height: 1.05;
}
.insight-tile__value .unit {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  color: var(--ink-faint);
  margin-left: 4px;
  letter-spacing: 0.06em;
}
.insight-tile__text {
  font-size: 12.5px;
  color: var(--ink-mute);
  line-height: 1.4;
}
.insight-tile__text strong {
  color: var(--ink);
  font-weight: 600;
}

.report-card__para {
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-mute);
  max-width: 720px;
  margin-top: 4px;
}
.report-card__para strong { color: var(--ink); font-weight: 600; }

.report-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px dashed rgba(11, 26, 58, 0.10);
}

/* Read-full-note expandable letter inside the cream card */
.report-letter {
  display: none;
  margin-top: 20px;
  padding: 24px 28px 8px;
  background: var(--navy);
  color: var(--bone);
  border-radius: var(--radius-lg);
  position: relative;
}
.report-letter.open { display: block; }
.report-letter h4 {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--mint);
  font-weight: 600;
  margin-top: 18px;
  margin-bottom: 6px;
}
.report-letter h4:first-of-type { margin-top: 0; }
.report-letter p {
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--bone-mute);
  margin-bottom: 4px;
}
.report-letter p strong { color: var(--bone); font-weight: 600; }
.report-letter .letter-signoff {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px dashed var(--bone-line);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--mint);
}
.report-letter .letter-signoff .name {
  display: block;
  font-family: var(--font-sans);
  font-size: 14px;
  font-style: italic;
  color: var(--bone);
  letter-spacing: 0;
  margin-top: 4px;
}

/* Light buttons inside cream cards */
.btn-mono {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid rgba(11, 26, 58, 0.18);
  color: var(--ink);
  border-radius: var(--radius-sm);
  padding: 9px 16px;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.14s, border-color 0.14s, color 0.14s;
}
.btn-mono:hover {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--mint);
}
.btn-mono.mint {
  background: var(--mint-2);
  border-color: var(--mint-2);
  color: #fff;
}
.btn-mono.mint:hover {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--mint);
}

/* Cross-reference link — small footer */
.cross-ref {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mint);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: opacity 0.14s;
}
.cross-ref:hover { opacity: 0.72; }
.cross-ref.dark { color: var(--mint-2); }

/* ===== Attendance / utilisation section ===== */
.attendance-card {
  background: var(--navy-2);
  border: 1px solid var(--bone-line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.attendance-card__head {
  padding: 20px 24px 14px;
  border-bottom: 1px solid var(--bone-line);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.attendance-card__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--bone);
  letter-spacing: -0.01em;
}
.attendance-card__subtitle {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--bone-faint);
  margin-top: 4px;
}
.attendance-card__period {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mint);
}
.attendance-card__body { padding: 22px 24px 24px; }

.metric-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-bottom: 22px;
}
.metric-tile {
  background: var(--navy-3);
  border: 1px solid var(--bone-line);
  border-radius: var(--radius-md);
  padding: 14px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
}
.metric-tile--mint {
  border-color: rgba(61,219,168,0.30);
  background: linear-gradient(160deg, var(--navy-3) 0%, rgba(61,219,168,0.10) 130%);
}
.metric-tile--coral {
  border-color: rgba(255,107,92,0.30);
  background: linear-gradient(160deg, var(--navy-3) 0%, rgba(255,107,92,0.10) 130%);
}
.metric-tile--amber {
  border-color: rgba(245,166,35,0.25);
  background: linear-gradient(160deg, var(--navy-3) 0%, rgba(245,166,35,0.10) 130%);
}
.metric-tile__label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bone-faint);
}
.metric-tile--mint .metric-tile__label  { color: var(--mint); }
.metric-tile--coral .metric-tile__label { color: var(--coral); }
.metric-tile--amber .metric-tile__label { color: var(--amber); }
.metric-tile__value {
  font-size: 26px;
  font-weight: 700;
  color: var(--bone);
  letter-spacing: -0.025em;
  line-height: 1;
}
.metric-tile__value .unit {
  font-size: 12px;
  font-weight: 400;
  color: var(--bone-faint);
  margin-left: 3px;
  font-family: var(--font-mono);
}

.attendance-trend {
  background: rgba(11,26,58,0.4);
  border: 1px solid var(--bone-line);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 16px;
}
.attendance-trend__label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--bone-faint);
  flex-shrink: 0;
}
.attendance-trend__sparkline {
  flex: 1;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 36px;
}
.attendance-trend__sparkline .sparkline-bar { flex: 1; min-width: 0; }
.attendance-trend__legend {
  display: flex;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone-faint);
}
.attendance-trend__legend .item {
  display: flex;
  align-items: center;
  gap: 6px;
}
.attendance-trend__legend .dot {
  width: 7px; height: 7px;
  border-radius: 2px;
}
.attendance-trend__legend .dot.attended { background: var(--mint); }
.attendance-trend__legend .dot.missed   { background: rgba(244,242,236,0.18); }

.attendance-interp {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--bone-mute);
  padding: 12px 16px;
  background: rgba(61,219,168,0.06);
  border-left: 2px solid var(--mint);
  border-radius: 0 4px 4px 0;
}
.attendance-interp strong { color: var(--bone); font-weight: 600; }

.attendance-card__footer {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px dashed var(--bone-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.attendance-card__balance {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--bone-mute);
}
.attendance-card__balance strong {
  color: var(--mint);
  font-weight: 700;
  font-size: 13px;
  margin: 0 4px;
}

/* Stack the page spacing on Progress and Practice */
.section-stack > * + * { margin-top: 18px; }

/* Responsive collapse */
@media (max-width: 1024px) {
  .insight-row { grid-template-columns: repeat(2, 1fr); }
  .metric-row  { grid-template-columns: repeat(2, 1fr); }
  .report-card__head { flex-direction: column; }
}
@media (max-width: 720px) {
  .insight-row, .metric-row { grid-template-columns: 1fr 1fr; }
  .report-card__head, .report-card__body { padding-left: 20px; padding-right: 20px; }
  .attendance-card__head, .attendance-card__body { padding-left: 18px; padding-right: 18px; }
}


/* ============================================================
   v5 — backdrop inversion + WAID-style discipline
   ============================================================ */

/* Body now sits on bone — cards inside stay navy.
   This mirrors the WAID dossier layout. */
html, body {
  background: var(--bone);
}
body {
  color: var(--ink);
  /* Subtle navy dot-grid on bone (WAID dossier echo) */
  background-image:
    radial-gradient(circle at 15% 0%, rgba(61, 219, 168, 0.05) 0%, transparent 35%),
    radial-gradient(circle, rgba(11, 26, 58, 0.05) 1px, transparent 1px);
  background-size: auto, 26px 26px;
  background-attachment: fixed;
}

/* Topnav stays a navy band */
.topnav {
  background: rgba(11, 26, 58, 0.96);
  border-bottom: 1px solid rgba(11, 26, 58, 0.10);
}

/* Mock banner sits on bone now — lighten its dark-mode tint */
.mock-banner {
  background: rgba(255, 107, 92, 0.07);
  border-bottom: 1px solid rgba(255, 107, 92, 0.20);
}

/* Page headers now sit on bone — text becomes navy */
.page-title { color: var(--ink); }
.page-lead  { color: var(--ink-mute); }

/* Section dividers and labels on bone */
.home-section-title          { color: var(--ink-faint); }
.home-section-title::after   { background: var(--ink-line); }

/* Search bar, filter button — stay dark cards but on bone backdrop */
.search-input { background: var(--navy-2); }
.btn-filter   { background: var(--navy-2); }

/* The hero still has a navy gradient — but it can sit slightly
   inset from the bone now (looks more like a banner card). */
.home-hero {
  border-bottom: 1px solid rgba(11, 26, 58, 0.10);
  box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset, 0 8px 32px rgba(11, 26, 58, 0.15);
}

/* Lesson-mini card already navy — small shadow boost on bone */
.lesson-card-mini,
.lesson-card-full,
.attendance-card,
.practice-card,
.progress-card,
.plan-card,
.home-card,
.sparkline-card,
.report-card {
  box-shadow:
    0 1px 3px rgba(11, 26, 58, 0.08),
    0 12px 32px rgba(11, 26, 58, 0.16);
}

/* ============================================================
   v5 — Monthly snapshot is now a navy card (override v4 cream)
   ============================================================ */
.report-card {
  background: var(--navy-2);
  color: var(--bone);
  border: 1px solid var(--bone-line);
}
.report-card::before {
  /* Subtle bone dots on the navy snapshot (echoes the navy dossier panels) */
  background-image: radial-gradient(circle, rgba(244, 242, 236, 0.04) 1px, transparent 1px);
  opacity: 0.7;
}
.report-card__head {
  border-bottom: 1px solid var(--bone-line);
}
.report-card__eyebrow { color: var(--mint); }
.report-card__eyebrow::before {
  background: var(--mint);
  box-shadow: 0 0 0 4px rgba(61, 219, 168, 0.18);
}
.report-card__headline { color: var(--bone); }
.report-card__headline strong { color: var(--mint); }
.report-card__sub { color: var(--bone-faint); }

/* Insight tiles (navy variant) */
.report-card .insight-tile {
  background: var(--navy-3);
  border: 1px solid var(--bone-line);
}
.report-card .insight-tile:hover {
  border-color: rgba(61, 219, 168, 0.30);
}
.report-card .insight-tile__label { color: var(--bone-faint); }
.report-card .insight-tile__value { color: var(--bone); }
.report-card .insight-tile__value .unit { color: var(--bone-faint); }
.report-card .insight-tile__text { color: var(--bone-mute); }
.report-card .insight-tile__text strong { color: var(--bone); }

.report-card .insight-tile--accent {
  background: linear-gradient(160deg, var(--navy-3) 0%, rgba(61, 219, 168, 0.12) 130%);
  border-color: rgba(61, 219, 168, 0.30);
}
.report-card .insight-tile--accent .insight-tile__label { color: var(--mint); }

.report-card__footer {
  border-top: 1px dashed var(--bone-line);
}

/* The "Read full monthly note" button on navy */
.btn-mono {
  border: 1px solid var(--bone-line-2);
  color: var(--bone);
  background: rgba(244, 242, 236, 0.04);
}
.btn-mono:hover {
  background: var(--mint);
  border-color: var(--mint);
  color: var(--navy);
}
.btn-mono.mint {
  background: var(--mint);
  border-color: var(--mint);
  color: var(--navy);
}

.cross-ref { color: var(--mint); }
.cross-ref.dark { color: var(--bone-mute); }

/* The expandable letter — now a lighter navy panel inside the navy card */
.report-letter {
  background: var(--navy);
  border: 1px solid var(--bone-line);
}

/* ============================================================
   v5 — Vocabulary footprint as WAID-style horizontal stacked bar
   ============================================================ */
.vocab-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.vocab-stack-headline {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}
.vocab-stack-total {
  font-size: 24px;
  font-weight: 700;
  color: var(--bone);
  letter-spacing: -0.025em;
  line-height: 1;
}
.vocab-stack-total .unit {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  color: var(--bone-faint);
  margin-left: 6px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.vocab-stack-meta {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mint);
}

.vocab-stack-bar {
  display: flex;
  height: 36px;
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid var(--bone-line);
  background: rgba(11, 26, 58, 0.5);
}
.vocab-seg {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  position: relative;
  transition: filter 0.2s;
}
.vocab-seg + .vocab-seg {
  border-left: 1px solid rgba(11, 26, 58, 0.6);
}
.vocab-seg[data-level="A1-A2"] {
  background: rgba(244, 242, 236, 0.10);
  color: var(--bone-mute);
}
.vocab-seg[data-level="B1"] {
  background: rgba(244, 242, 236, 0.22);
  color: var(--bone);
}
.vocab-seg[data-level="B2"] {
  background: var(--mint);
  color: var(--navy);
  box-shadow: 0 0 12px rgba(61, 219, 168, 0.30) inset;
}
.vocab-seg[data-level="C1"] {
  background: var(--mint-2);
  color: var(--bone);
}

.vocab-stack-labels {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.vocab-stack-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: rgba(11, 26, 58, 0.4);
  border: 1px solid var(--bone-line);
  position: relative;
}
.vocab-stack-label::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px; height: 100%;
  border-radius: 5px 0 0 5px;
}
.vocab-stack-label[data-level="A1-A2"]::before { background: rgba(244, 242, 236, 0.30); }
.vocab-stack-label[data-level="B1"]::before    { background: rgba(244, 242, 236, 0.45); }
.vocab-stack-label[data-level="B2"]::before    { background: var(--mint); }
.vocab-stack-label[data-level="C1"]::before    { background: var(--mint-2); }
.vocab-stack-label.dominant {
  background: rgba(61, 219, 168, 0.08);
  border-color: rgba(61, 219, 168, 0.30);
}

.vocab-stack-label-head {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--bone-faint);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.vocab-stack-label.dominant .vocab-stack-label-head { color: var(--mint); }
.vocab-stack-label-tag {
  font-size: 8.5px;
  letter-spacing: 0.15em;
  color: var(--mint);
}
.vocab-stack-label-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--bone);
  letter-spacing: -0.022em;
  line-height: 1;
}
.vocab-stack-label.dominant .vocab-stack-label-value { color: var(--mint); }
.vocab-stack-label-desc {
  font-size: 11px;
  color: var(--bone-faint);
  line-height: 1.4;
  margin-top: 2px;
}

.vocab-stack-summary {
  font-size: 13px;
  color: var(--bone-mute);
  line-height: 1.55;
  padding: 12px 16px;
  background: rgba(61, 219, 168, 0.06);
  border-left: 2px solid var(--mint);
  border-radius: 0 4px 4px 0;
}
.vocab-stack-summary strong { color: var(--bone); font-weight: 600; }

/* ============================================================
   v5 — Home: 3-card row (was 4)
   ============================================================ */
.home-cards { grid-template-columns: repeat(3, 1fr); }

/* ============================================================
   v5 — Practice: consolidated modes + activity card
   ============================================================ */
.practice-stage {
  background: var(--navy-2);
  border: 1px solid var(--bone-line);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.practice-stage-tabs {
  display: flex;
  align-items: stretch;
  background: rgba(11, 26, 58, 0.55);
  border-bottom: 1px solid var(--bone-line);
  overflow-x: auto;
}
.pst-tab {
  flex: 1 1 0;
  min-width: 130px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 16px 18px 14px;
  font-family: var(--font-sans);
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-right: 1px solid var(--bone-line);
  color: var(--bone-mute);
  position: relative;
  transition: background 0.14s, color 0.14s;
}
.pst-tab:last-child { border-right: none; }
.pst-tab:hover { background: rgba(244, 242, 236, 0.04); color: var(--bone); }
.pst-tab.active {
  background: var(--navy-2);
  color: var(--bone);
}
.pst-tab.active::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: var(--mint);
}
.pst-tab__label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--bone-faint);
}
.pst-tab.active .pst-tab__label { color: var(--mint); }
.pst-tab__name {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: inherit;
}
.pst-tab__meta {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.10em;
  color: var(--bone-faint);
}

.pst-body {
  display: none;
  padding: 22px 26px 26px;
}
.pst-body.active { display: block; }
.pst-body-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.pst-body-title {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mint);
}
.pst-body-pill {
  background: var(--mint-soft);
  border: 1px solid rgba(61, 219, 168, 0.25);
  color: var(--mint);
  padding: 4px 10px;
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.15em;
}

.pst-empty {
  padding: 24px;
  text-align: center;
  border: 1px dashed var(--bone-line);
  border-radius: var(--radius-md);
  color: var(--bone-faint);
  background: rgba(244, 242, 236, 0.02);
}
.pst-empty-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--bone);
  margin-bottom: 6px;
  letter-spacing: -0.005em;
}
.pst-empty-desc {
  font-size: 13px;
  color: var(--bone-mute);
  line-height: 1.55;
  max-width: 380px;
  margin: 0 auto;
}
.pst-empty-tag {
  display: inline-block;
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mint);
  padding: 5px 10px;
  border-radius: 100px;
  background: var(--mint-soft);
  border: 1px solid rgba(61, 219, 168, 0.25);
}

/* Responsive — collapse vocab stack labels & practice tabs */
@media (max-width: 1024px) {
  .home-cards { grid-template-columns: repeat(2, 1fr); }
  .vocab-stack-labels { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .home-cards { grid-template-columns: 1fr; }
  .vocab-stack-labels { grid-template-columns: 1fr 1fr; }
  .pst-tab { min-width: 110px; }
}


/* ============================================================
   v6 — WAID dossier palette discipline
   White cards by default · navy used selectively
   ============================================================ */

:root {
  /* Stronger ink contrast for white-card text */
  --ink-soft:    rgba(11, 26, 58, 0.78);
  --shadow-soft: 0 1px 3px rgba(11, 26, 58, 0.06), 0 4px 14px rgba(11, 26, 58, 0.05);
  --shadow-card: 0 1px 3px rgba(11, 26, 58, 0.06), 0 12px 32px rgba(11, 26, 58, 0.10);
}

/* ====== BODY backdrop refinement ====== */
html, body { background: var(--bone); }
body {
  background-image:
    radial-gradient(circle at 15% 0%, rgba(61, 219, 168, 0.05) 0%, transparent 35%),
    radial-gradient(circle, rgba(11, 26, 58, 0.04) 1px, transparent 1px);
  background-size: auto, 28px 28px;
}

/* ====== DEFAULT CARD = WHITE ON BONE ====== */
/* Lessons, plan, progress, practice, attendance, sparkline cards */
.lesson-card-mini,
.lesson-card-full,
.attendance-card,
.practice-card,
.progress-card,
.plan-card,
.report-card,
.home-card {
  background: #ffffff;
  border: 1px solid rgba(11, 26, 58, 0.08);
  box-shadow:
    0 1px 3px rgba(11, 26, 58, 0.06),
    0 12px 32px rgba(11, 26, 58, 0.10);
  color: var(--ink);
}

/* Card heads — bone-ish hairline divider */
.attendance-card__head,
.practice-card-head,
.progress-card-head,
.plan-card-head,
.report-card__head {
  border-bottom: 1px solid rgba(11, 26, 58, 0.08);
  background: rgba(11, 26, 58, 0.015);
}

/* Card titles + subtitles — ink */
.lesson-card-title,
.lesson-card-name,
.lesson-card-desc,
.practice-card-title,
.progress-card-title,
.plan-card-title,
.attendance-card__title,
.report-card__headline {
  color: var(--ink);
}
.lesson-card-summary { color: var(--ink-mute); }
.lesson-card-desc { color: var(--ink-mute); }
.practice-card-meta,
.progress-card-subtitle,
.plan-card-meta,
.attendance-card__subtitle,
.attendance-card__period,
.report-card__sub {
  color: var(--ink-faint);
}

/* JetBrains Mono accents stay mint */
.attendance-card__period { color: var(--mint-2); }
.report-card__eyebrow { color: var(--mint-2); }
.report-card__eyebrow::before {
  background: var(--mint-2);
  box-shadow: 0 0 0 4px rgba(61, 219, 168, 0.15);
}
.report-card__headline strong { color: var(--mint-2); }

/* ====== HOME CARDS ====== */
.home-card { background: #ffffff; border-color: rgba(11, 26, 58, 0.08); }
.home-card-label   { color: var(--ink-faint); }
.home-card.accent-mint { border-left: 3px solid var(--mint-2); }
.home-card.accent-mint .home-card-label { color: var(--mint-2); }
.home-card-value   { color: var(--ink); }
.home-card-value .unit { color: var(--ink-faint); }
.home-card-desc    { color: var(--ink-mute); }
.focus-item        { color: var(--ink-mute); }
.focus-item::before { background: var(--mint-2); }

/* Ghost buttons live on white cards */
.btn-ghost {
  background: transparent;
  color: var(--ink-mute);
  border-color: rgba(11, 26, 58, 0.14);
}
.btn-ghost:hover {
  background: rgba(11, 26, 58, 0.04);
  color: var(--ink);
  border-color: rgba(11, 26, 58, 0.22);
}
.btn-ghost.mint {
  color: var(--mint-2);
  border-color: rgba(61, 219, 168, 0.35);
}
.btn-ghost.mint:hover {
  background: rgba(61, 219, 168, 0.10);
  color: var(--mint-2);
  border-color: rgba(61, 219, 168, 0.6);
}

/* ====== LESSON CARDS ====== */
.lesson-card-mini .lesson-card-date,
.lesson-card-full .date-block {
  background: var(--bone);
  border: 1px solid rgba(11, 26, 58, 0.08);
}
.lesson-card-date-day,
.lesson-card-full .date-block .day { color: var(--ink); }
.lesson-card-date-mon,
.lesson-card-full .date-block .month { color: var(--mint-2); }
.lesson-card-mode { color: var(--mint-2); }
.tag {
  background: var(--bone);
  border-color: rgba(11, 26, 58, 0.10);
  color: var(--ink-mute);
}
.tag.mint {
  background: rgba(61, 219, 168, 0.10);
  border-color: rgba(61, 219, 168, 0.30);
  color: var(--mint-2);
}

/* Hover state for white lesson/home cards */
.lesson-card-mini:hover,
.lesson-card-full:hover,
.home-card:hover {
  border-color: rgba(11, 26, 58, 0.16);
  box-shadow:
    0 4px 12px rgba(11, 26, 58, 0.08),
    0 18px 48px rgba(11, 26, 58, 0.14);
}

/* ====== SEARCH BAR + FILTER (white surface) ====== */
.search-input {
  background: #ffffff;
  border: 1px solid rgba(11, 26, 58, 0.10);
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(11, 26, 58, 0.04);
}
.search-input::placeholder { color: var(--ink-faint); }
.search-input:focus {
  border-color: rgba(61, 219, 168, 0.45);
  box-shadow: 0 0 0 3px rgba(61, 219, 168, 0.10);
  background: #fff;
}
.search-input-wrap svg { color: var(--ink-faint); }
.btn-filter {
  background: #ffffff;
  border-color: rgba(11, 26, 58, 0.10);
  color: var(--ink-mute);
  box-shadow: 0 1px 3px rgba(11, 26, 58, 0.04);
}
.btn-filter:hover {
  background: var(--bone);
  color: var(--ink);
  border-color: rgba(11, 26, 58, 0.18);
}

/* ====== REPORT CARD (Monthly Snapshot) — WHITE, with mint accents ====== */
.report-card { background: #ffffff; border-color: rgba(11, 26, 58, 0.08); color: var(--ink); }
.report-card::before {
  background-image: radial-gradient(circle, rgba(11, 26, 58, 0.04) 1px, transparent 1px);
  opacity: 0.6;
}
.report-card__head { background: rgba(11, 26, 58, 0.02); border-bottom-color: rgba(11, 26, 58, 0.08); }
.report-card__footer { border-top: 1px dashed rgba(11, 26, 58, 0.12); }

/* The "WAID lead tile" — navy panel highlighting the strongest insight.
   This mirrors the dossier's "ON / ABOVE TRAJECTORY" navy tile. */
.report-card .insight-tile {
  background: #ffffff;
  border: 1px solid rgba(11, 26, 58, 0.08);
}
.report-card .insight-tile:hover {
  border-color: rgba(61, 219, 168, 0.30);
  box-shadow: 0 4px 12px rgba(11, 26, 58, 0.06);
}
.report-card .insight-tile__label { color: var(--ink-faint); }
.report-card .insight-tile__value { color: var(--ink); }
.report-card .insight-tile__value .unit { color: var(--ink-faint); }
.report-card .insight-tile__text { color: var(--ink-mute); }
.report-card .insight-tile__text strong { color: var(--ink); }

/* Lead/accent tile — NAVY panel (mirrors WAID "ON / ABOVE TRAJECTORY") */
.report-card .insight-tile--accent {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--bone);
}
.report-card .insight-tile--accent .insight-tile__label { color: var(--mint); }
.report-card .insight-tile--accent .insight-tile__value { color: var(--bone); }
.report-card .insight-tile--accent .insight-tile__text  { color: var(--bone-mute); }
.report-card .insight-tile--accent .insight-tile__text strong { color: var(--bone); }

/* ====== BTN-MONO on white cards ====== */
.btn-mono {
  background: #ffffff;
  border: 1px solid rgba(11, 26, 58, 0.18);
  color: var(--ink);
}
.btn-mono:hover {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--mint);
}
.btn-mono.mint {
  background: var(--mint-2);
  border-color: var(--mint-2);
  color: #ffffff;
}
.btn-mono.mint:hover {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--mint);
}

.cross-ref { color: var(--mint-2); }
.cross-ref.dark { color: var(--ink-mute); }

/* The expandable monthly note — NAVY panel inside the white card
   (matches the WAID "STRATEGIC READ" navy block on cream) */
.report-letter {
  background: var(--navy);
  border: 1px solid var(--navy);
  color: var(--bone);
}
.report-letter h4 { color: var(--mint); }
.report-letter p { color: var(--bone-mute); }
.report-letter p strong { color: var(--bone); }
.report-letter .letter-signoff { border-top-color: var(--bone-line); color: var(--mint); }
.report-letter .letter-signoff .name { color: var(--bone); }

/* ====== ATTENDANCE CARD ====== */
.attendance-card { background: #ffffff; border-color: rgba(11, 26, 58, 0.08); }
.attendance-card__head { background: rgba(11, 26, 58, 0.02); border-bottom-color: rgba(11, 26, 58, 0.08); }

/* Metric tiles — mostly WHITE; the most-important "Utilisation" tile is NAVY */
.metric-tile {
  background: #ffffff;
  border: 1px solid rgba(11, 26, 58, 0.08);
}
.metric-tile__label { color: var(--ink-faint); }
.metric-tile__value { color: var(--ink); }
.metric-tile__value .unit { color: var(--ink-faint); }

/* The hero metric: Utilisation — navy panel echoes the WAID dossier */
.metric-tile--mint {
  background: var(--navy);
  border-color: var(--navy);
}
.metric-tile--mint .metric-tile__label { color: var(--mint); }
.metric-tile--mint .metric-tile__value { color: var(--bone); }
.metric-tile--mint .metric-tile__value .unit { color: var(--bone-faint); }

/* Coral/amber tiles inherit white base with a soft tint top-stripe */
.metric-tile--coral {
  background: #ffffff;
  border-color: rgba(255, 107, 92, 0.30);
  background: linear-gradient(180deg, #ffffff 0%, rgba(255, 107, 92, 0.04) 100%);
}
.metric-tile--coral .metric-tile__label { color: var(--coral); }
.metric-tile--amber {
  background: #ffffff;
  border-color: rgba(245, 166, 35, 0.30);
  background: linear-gradient(180deg, #ffffff 0%, rgba(245, 166, 35, 0.04) 100%);
}
.metric-tile--amber .metric-tile__label { color: var(--amber); }

/* Attendance trend (sparkline) — light variant */
.attendance-trend {
  background: var(--bone);
  border: 1px solid rgba(11, 26, 58, 0.06);
}
.attendance-trend__label { color: var(--ink-faint); }
.attendance-trend__legend { color: var(--ink-faint); }
.attendance-trend__legend .dot.attended { background: var(--mint-2); }
.attendance-trend__legend .dot.missed   { background: rgba(11, 26, 58, 0.15); }
.attendance-trend__sparkline .sparkline-bar {
  background: rgba(11, 26, 58, 0.10);
}
.attendance-trend__sparkline .sparkline-bar.attended {
  background: var(--mint-2);
  box-shadow: 0 0 8px rgba(61, 219, 168, 0.25);
}

.attendance-interp {
  background: rgba(61, 219, 168, 0.07);
  border-left-color: var(--mint-2);
  color: var(--ink-soft);
}
.attendance-interp strong { color: var(--ink); }

.attendance-card__footer { border-top: 1px dashed rgba(11, 26, 58, 0.12); }
.attendance-card__balance { color: var(--ink-mute); }
.attendance-card__balance strong { color: var(--mint-2); }

/* ====== PROGRESS HEADER (the CEFR pill + trajectory) ====== */
.progress-cefr-pill {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--mint);
}
.progress-cefr-pill::before {
  background: var(--mint);
  box-shadow: 0 0 0 4px rgba(61, 219, 168, 0.15);
}
.progress-trajectory { color: var(--mint-2); }

/* ====== SKILL MAP CARD ====== */
.progress-card { background: #ffffff; }
.progress-card-head { background: rgba(11, 26, 58, 0.02); border-bottom-color: rgba(11, 26, 58, 0.08); }
.radar-wrap { background: transparent; }

/* ====== VOCABULARY STACKED BAR — bone backdrop, navy + mint segments ====== */
.vocab-stack-total { color: var(--ink); }
.vocab-stack-total .unit { color: var(--ink-faint); }
.vocab-stack-meta { color: var(--mint-2); }

.vocab-stack-bar {
  background: var(--bone);
  border-color: rgba(11, 26, 58, 0.10);
}
/* WAID style: A1-A2 = light grey, B1 = navy, B2 = mint highlight, C1 = dark navy */
.vocab-seg + .vocab-seg { border-left-color: #ffffff; }
.vocab-seg[data-level="A1-A2"] {
  background: #C8CDD8;
  color: var(--ink-mute);
}
.vocab-seg[data-level="B1"] {
  background: var(--navy-4);
  color: var(--bone);
}
.vocab-seg[data-level="B2"] {
  background: var(--mint);
  color: var(--navy);
  box-shadow: 0 0 14px rgba(61, 219, 168, 0.35) inset;
}
.vocab-seg[data-level="C1"] {
  background: var(--navy);
  color: var(--bone);
}

/* Level labels — bone tiles on the white card */
.vocab-stack-label {
  background: var(--bone);
  border: 1px solid rgba(11, 26, 58, 0.08);
}
.vocab-stack-label[data-level="A1-A2"]::before { background: #C8CDD8; }
.vocab-stack-label[data-level="B1"]::before    { background: var(--navy-4); }
.vocab-stack-label[data-level="B2"]::before    { background: var(--mint-2); }
.vocab-stack-label[data-level="C1"]::before    { background: var(--navy); }
.vocab-stack-label.dominant {
  background: rgba(61, 219, 168, 0.06);
  border-color: rgba(61, 219, 168, 0.30);
}
.vocab-stack-label-head { color: var(--ink-faint); }
.vocab-stack-label.dominant .vocab-stack-label-head { color: var(--mint-2); }
.vocab-stack-label-value { color: var(--ink); }
.vocab-stack-label.dominant .vocab-stack-label-value { color: var(--mint-2); }
.vocab-stack-label-desc { color: var(--ink-mute); }

.vocab-stack-summary {
  background: rgba(61, 219, 168, 0.07);
  border-left-color: var(--mint-2);
  color: var(--ink-soft);
}
.vocab-stack-summary strong { color: var(--ink); }

/* ====== GRAMMAR ZONES (Progress card, full-width) ====== */
.grammar-zone.well {
  background: rgba(61, 219, 168, 0.10);
  border-color: rgba(61, 219, 168, 0.25);
  border-left-color: var(--mint-2);
}
.grammar-zone.soon {
  background: rgba(245, 166, 35, 0.08);
  border-color: rgba(245, 166, 35, 0.20);
  border-left-color: var(--amber);
}
.grammar-zone.focus {
  background: rgba(255, 107, 92, 0.08);
  border-color: rgba(255, 107, 92, 0.22);
  border-left-color: var(--coral);
}
.grammar-zone-label.soon { color: #B68500; }
.grammar-zone-count { color: var(--ink-faint); }

.grammar-zone-card {
  background: #ffffff;
  border: 1px solid rgba(11, 26, 58, 0.08);
  box-shadow: 0 1px 2px rgba(11, 26, 58, 0.04);
}
.grammar-zone-card:hover {
  background: #ffffff;
  border-color: rgba(11, 26, 58, 0.18);
  box-shadow: 0 4px 12px rgba(11, 26, 58, 0.08);
}
.grammar-zone-card-name { color: var(--ink); }
.grammar-zone-card-example { color: var(--ink-faint); }

/* ====== PRACTICE STAGE (consolidated modes + activity) ====== */
.practice-stage {
  background: #ffffff;
  border: 1px solid rgba(11, 26, 58, 0.08);
}
.practice-stage-tabs {
  background: rgba(11, 26, 58, 0.025);
  border-bottom: 1px solid rgba(11, 26, 58, 0.08);
}
.pst-tab {
  border-right: 1px solid rgba(11, 26, 58, 0.08);
  color: var(--ink-mute);
}
.pst-tab:hover { background: rgba(11, 26, 58, 0.04); color: var(--ink); }
.pst-tab.active {
  background: #ffffff;
  color: var(--ink);
}
.pst-tab.active::after { background: var(--mint-2); }
.pst-tab__label { color: var(--ink-faint); }
.pst-tab.active .pst-tab__label { color: var(--mint-2); }
.pst-tab__meta { color: var(--ink-faint); }

.pst-body-title { color: var(--mint-2); }
.pst-body-pill {
  background: rgba(61, 219, 168, 0.10);
  border-color: rgba(61, 219, 168, 0.30);
  color: var(--mint-2);
}

/* Say It Better activity body — light variant */
.say-q { color: var(--ink-faint); }
.say-original {
  background: rgba(255, 107, 92, 0.08);
  border-left-color: rgba(255, 107, 92, 0.55);
  color: var(--ink-soft);
}
.say-option {
  background: #ffffff;
  border: 1px solid rgba(11, 26, 58, 0.10);
  color: var(--ink-soft);
}
.say-option .mk { border-color: rgba(11, 26, 58, 0.30); }
.say-option:hover:not(.correct) {
  background: rgba(11, 26, 58, 0.025);
  border-color: rgba(11, 26, 58, 0.18);
}
.say-option.correct {
  background: rgba(61, 219, 168, 0.10);
  border-color: var(--mint-2);
  color: var(--ink);
}
.say-option.correct .mk { background: var(--mint-2); border-color: var(--mint-2); }
.say-option.correct .mk::after { border-color: #ffffff; }

/* Empty (coming soon) panels in practice stage */
.pst-empty {
  background: var(--bone);
  border: 1px dashed rgba(11, 26, 58, 0.18);
  color: var(--ink-faint);
}
.pst-empty-name { color: var(--ink); }
.pst-empty-desc { color: var(--ink-mute); }
.pst-empty-tag {
  background: rgba(61, 219, 168, 0.10);
  border-color: rgba(61, 219, 168, 0.30);
  color: var(--mint-2);
}

/* ====== WORD BANK — light variant ====== */
.practice-card-body table.word-table th {
  background: var(--bone);
  color: var(--ink-faint);
  border-bottom-color: rgba(11, 26, 58, 0.08);
}
.word-table td {
  border-bottom-color: rgba(11, 26, 58, 0.08);
  color: var(--ink);
}
.word-table tr:hover td { background: rgba(11, 26, 58, 0.02); }
.word-table .word-from { color: var(--ink-faint); }
.word-table .word-level { color: var(--mint-2); }

/* Word detail drawer */
.word-detail-row td {
  background: var(--bone) !important;
  border-bottom-color: rgba(11, 26, 58, 0.10) !important;
}
.word-detail-label { color: var(--mint-2); }
.word-detail-text { color: var(--ink); }
.word-detail-pt { color: var(--ink); }
.word-detail-example {
  background: #ffffff;
  border: 1px solid rgba(11, 26, 58, 0.06);
  border-left: 2px solid var(--mint-2);
  color: var(--ink-mute);
}
.word-detail-example .ex-tag { color: var(--mint-2); }
.word-detail-actions { border-top-color: rgba(11, 26, 58, 0.12); }

/* Chips */
.chip-group-label { color: var(--ink-faint); }
.chip {
  background: var(--bone);
  border-color: rgba(11, 26, 58, 0.10);
  color: var(--ink-mute);
}
.chip:hover { background: var(--bone-2); }
.chip.active {
  background: rgba(61, 219, 168, 0.10);
  border-color: rgba(61, 219, 168, 0.35);
  color: var(--mint-2);
}

/* ====== GRAMMAR BY LEVEL (Practice card) ====== */
.glevel {
  background: var(--bone);
  border: 1px solid rgba(11, 26, 58, 0.08);
}
.glevel.current {
  background: linear-gradient(140deg, rgba(61, 219, 168, 0.08) 0%, var(--bone) 65%);
  border-color: rgba(61, 219, 168, 0.30);
}
.glevel-badge {
  background: #ffffff;
  border-color: rgba(11, 26, 58, 0.10);
  color: var(--ink-mute);
}
.glevel.current .glevel-badge {
  background: var(--mint-2);
  border-color: var(--mint-2);
  color: #ffffff;
}
.glevel-title { color: var(--ink); }
.glevel-tag { color: var(--mint-2); }
.glevel-desc { color: var(--ink-faint); }

.gtopic {
  background: #ffffff;
  border-color: rgba(11, 26, 58, 0.10);
  color: var(--ink-mute);
}
.gtopic:hover {
  background: #ffffff;
  color: var(--ink);
  border-color: rgba(11, 26, 58, 0.20);
  box-shadow: 0 2px 8px rgba(11, 26, 58, 0.06);
}
.gtopic.well, .gtopic.soon, .gtopic.focus { color: var(--ink); }
.gtopic.untouched { color: var(--ink-faint); opacity: 1; }
.gtopic.untouched .gdot { background: rgba(11, 26, 58, 0.18); }
.gtopic.locked { color: var(--ink-faint); }
.gtopic.locked .gdot { background: rgba(11, 26, 58, 0.18); }

.glevel-legend {
  border-top-color: rgba(11, 26, 58, 0.10);
  color: var(--ink-faint);
}
.glevel-legend .ldot.unt { background: rgba(11, 26, 58, 0.20); }

/* Grammar detail drawer (when topic clicked) — navy panel on white card */
.grammar-detail {
  background: var(--navy);
  border: 1px solid var(--navy);
}
.grammar-detail-title { color: var(--bone); }
.grammar-detail-label { color: var(--mint); }
.grammar-detail-text { color: var(--bone-mute); }
.grammar-detail-example {
  background: rgba(244, 242, 236, 0.05);
  border: 1px solid var(--bone-line);
  color: var(--bone);
}
.grammar-detail-better { color: var(--mint); }

/* ====== PLAN ====== */
.plan-card { background: #ffffff; }
.plan-card.feature {
  background: linear-gradient(160deg, #ffffff 0%, rgba(11, 26, 58, 0.025) 100%);
  border-color: rgba(11, 26, 58, 0.10);
}
.plan-card-head { background: rgba(11, 26, 58, 0.02); border-bottom-color: rgba(11, 26, 58, 0.08); }

/* Balance hero — navy panel inside the white card, echoing the WAID
   "ON / ABOVE TRAJECTORY" hero tile. */
.balance-hero {
  background: var(--navy);
  border-radius: var(--radius-lg);
  padding: 28px 24px 24px;
  margin-bottom: 22px;
  position: relative;
  overflow: hidden;
}
.balance-hero::before {
  width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(61, 219, 168, 0.14) 0%, transparent 70%);
}
.balance-number { color: var(--bone); }
.balance-number::after { background: var(--mint); }
.balance-unit { color: var(--mint); }

.balance-breakdown {
  background: var(--bone);
  border: 1px solid rgba(11, 26, 58, 0.08);
}
.balance-row { border-bottom-color: rgba(11, 26, 58, 0.08); }
.balance-row .key { color: var(--ink-mute); }
.balance-row .val { color: var(--ink); }
.balance-row.total {
  background: rgba(61, 219, 168, 0.10);
  border-top-color: rgba(61, 219, 168, 0.30);
}
.balance-row.total .key { color: var(--ink); }
.balance-row.total .val { color: var(--mint-2); }

.balance-explainer { color: var(--ink-faint); }
.balance-formula-toggle { color: var(--mint-2); }
.balance-formula {
  background: var(--bone);
  border-color: rgba(11, 26, 58, 0.10);
  color: var(--ink-mute);
}

.plan-detail-row { border-bottom-color: rgba(11, 26, 58, 0.10); }
.plan-detail-key { color: var(--ink-faint); }
.plan-detail-val { color: var(--ink); }
.plan-detail-val.active { color: var(--mint-2); }
.plan-detail-val.active::before { background: var(--mint-2); box-shadow: 0 0 0 4px rgba(61, 219, 168, 0.18); }

.plan-help-line { color: var(--ink-faint); border-top-color: rgba(11, 26, 58, 0.10); }
.plan-help-line strong { color: var(--ink); }

/* ====== STATUS DOTS in word table ====== */
.status-dot.new   { background: var(--coral); }
.status-dot.pract { background: var(--amber); }
.status-dot.comf  { background: var(--mint-2); }

/* ====== PAGE-LEVEL ANIMATIONS / TWEAKS ====== */
.home-section-title          { color: var(--ink-faint); }
.home-section-title::after   { background: rgba(11, 26, 58, 0.10); }


/* ============================================================
   v7 — Profile tab, lesson grouping, balance history, polish
   ============================================================ */

/* ====== PROFILE TAB ====== */
.profile-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 22px;
  align-items: start;
}

/* Sticky profile portrait column */
.profile-portrait-card {
  background: #ffffff;
  border: 1px solid rgba(11, 26, 58, 0.08);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow:
    0 1px 3px rgba(11, 26, 58, 0.06),
    0 12px 32px rgba(11, 26, 58, 0.10);
  position: sticky;
  top: 96px;
}
.profile-portrait-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  background-size: cover;
  background-position: center;
  background-color: var(--bone);
}
.profile-portrait-body { padding: 22px 22px 24px; }
.profile-portrait-name {
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.018em;
  line-height: 1.15;
  margin-bottom: 4px;
}
.profile-portrait-level {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mint-2);
  font-weight: 600;
  margin-bottom: 14px;
}
.profile-portrait-divider {
  height: 1px;
  background: rgba(11, 26, 58, 0.08);
  margin: 0 0 14px;
}
.profile-portrait-facts {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.profile-fact {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 13px;
  color: var(--ink-mute);
  line-height: 1.45;
}
.profile-fact svg {
  width: 14px; height: 14px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--mint-2);
}
.profile-fact strong { color: var(--ink); font-weight: 600; }

/* Profile content column */
.profile-content {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.profile-section {
  background: #ffffff;
  border: 1px solid rgba(11, 26, 58, 0.08);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow:
    0 1px 3px rgba(11, 26, 58, 0.06),
    0 12px 32px rgba(11, 26, 58, 0.10);
}
.profile-section__head {
  padding: 22px 26px 16px;
  border-bottom: 1px solid rgba(11, 26, 58, 0.08);
  background: rgba(11, 26, 58, 0.02);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}
.profile-section__eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mint-2);
  font-weight: 600;
}
.profile-section__title {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.012em;
  margin-top: 4px;
}
.profile-section__meta {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.profile-section__body { padding: 22px 26px 24px; }

.profile-bio {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ink-mute);
}
.profile-bio strong { color: var(--ink); font-weight: 600; }
.profile-bio p + p { margin-top: 12px; }

/* Goal grid */
.profile-goals {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.profile-goal {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bone);
  border: 1px solid rgba(11, 26, 58, 0.06);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--mint-2);
  transition: transform 0.14s, border-color 0.14s;
}
.profile-goal:hover { transform: translateY(-1px); border-left-color: var(--mint); }
.profile-goal__icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: rgba(61, 219, 168, 0.10);
  border: 1px solid rgba(61, 219, 168, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mint-2);
  flex-shrink: 0;
}
.profile-goal__icon svg { width: 16px; height: 16px; }
.profile-goal__body { flex: 1; }
.profile-goal__title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.25;
  margin-bottom: 2px;
  letter-spacing: -0.005em;
}
.profile-goal__sub {
  font-size: 11.5px;
  color: var(--ink-faint);
  line-height: 1.4;
}
.profile-goal__status {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 3px;
  font-weight: 600;
  white-space: nowrap;
}
.profile-goal__status.active   { background: rgba(61,219,168,0.15); color: var(--mint-2); }
.profile-goal__status.progress { background: rgba(245,166,35,0.15); color: #B68500; }
.profile-goal__status.queued   { background: rgba(11,26,58,0.06); color: var(--ink-faint); }

/* Strength / Constraint blocks (echoes WAID dossier learner cards) */
.profile-attributes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.profile-attribute {
  background: var(--bone);
  border: 1px solid rgba(11, 26, 58, 0.06);
  border-radius: var(--radius-md);
  padding: 14px 16px;
}
.profile-attribute__head {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.profile-attribute__head::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
}
.profile-attribute.strength   .profile-attribute__head { color: var(--mint-2); }
.profile-attribute.strength   .profile-attribute__head::before { background: var(--mint-2); }
.profile-attribute.constraint .profile-attribute__head { color: var(--coral); }
.profile-attribute.constraint .profile-attribute__head::before { background: var(--coral); }
.profile-attribute__body {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.profile-attribute__body strong { color: var(--ink); font-weight: 600; }

/* Living signals (adaptive list) */
.profile-signals {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.profile-signal {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bone);
  border: 1px solid rgba(11, 26, 58, 0.06);
  border-radius: var(--radius-md);
}
.profile-signal__source {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 3px;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 2px;
}
.profile-signal__source.transcript { background: rgba(61, 219, 168, 0.15); color: var(--mint-2); }
.profile-signal__source.note       { background: rgba(11, 26, 58, 0.08); color: var(--ink-mute); }
.profile-signal__source.intake     { background: rgba(245, 166, 35, 0.15); color: #B68500; }
.profile-signal__body {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-soft);
  flex: 1;
}
.profile-signal__body strong { color: var(--ink); font-weight: 600; }
.profile-signal__date {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.10em;
  color: var(--ink-faint);
  margin-left: 6px;
}

/* Hobbies pill row */
.profile-hobbies {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.profile-hobby {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 13px;
  background: var(--bone);
  border: 1px solid rgba(11, 26, 58, 0.10);
  border-radius: 100px;
  font-size: 12.5px;
  color: var(--ink);
}
.profile-hobby svg {
  width: 13px; height: 13px;
  color: var(--mint-2);
}

/* Living-profile note (small WAID-style strip at top of profile content) */
.profile-living-note {
  background: rgba(61, 219, 168, 0.07);
  border-left: 3px solid var(--mint-2);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 14px 18px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.profile-living-note strong { color: var(--ink); font-weight: 600; }
.profile-living-note .pulse {
  display: inline-block;
  width: 7px; height: 7px;
  background: var(--mint-2);
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: 1px;
  animation: pulse 2.4s ease-in-out infinite;
}

/* ====== LESSONS — month grouping ====== */
.lesson-month {
  margin-top: 8px;
}
.lesson-month + .lesson-month { margin-top: 24px; }

.lesson-month__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
  padding: 0 4px;
}
.lesson-month__title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 700;
}
.lesson-month__count {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--ink-faint);
}
.lesson-month__divider {
  flex: 1;
  height: 1px;
  background: rgba(11, 26, 58, 0.10);
}
.lesson-month__tag {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--mint-2);
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 100px;
  background: rgba(61, 219, 168, 0.10);
  border: 1px solid rgba(61, 219, 168, 0.25);
}

/* Collapsed month — compact summary strip that can expand */
.lesson-month__collapsed {
  background: #ffffff;
  border: 1px solid rgba(11, 26, 58, 0.08);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 20px;
  cursor: pointer;
  transition: border-color 0.14s, box-shadow 0.14s, transform 0.14s;
  box-shadow:
    0 1px 3px rgba(11, 26, 58, 0.04),
    0 6px 16px rgba(11, 26, 58, 0.06);
}
.lesson-month__collapsed:hover {
  border-color: rgba(11, 26, 58, 0.18);
  transform: translateY(-1px);
  box-shadow:
    0 4px 10px rgba(11, 26, 58, 0.06),
    0 14px 32px rgba(11, 26, 58, 0.10);
}
.lesson-month__collapsed-month {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 700;
  min-width: 110px;
}
.lesson-month__collapsed-summary {
  flex: 1;
  font-size: 13px;
  color: var(--ink-mute);
  line-height: 1.5;
}
.lesson-month__collapsed-summary strong { color: var(--ink); font-weight: 600; }
.lesson-month__collapsed-count {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  color: var(--mint-2);
  flex-shrink: 0;
}
.lesson-month__collapsed-chev {
  width: 22px; height: 22px;
  color: var(--ink-faint);
  flex-shrink: 0;
  transition: transform 0.18s;
}
.lesson-month__collapsed.open .lesson-month__collapsed-chev {
  transform: rotate(180deg);
}

.lesson-month__expanded {
  display: none;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}
.lesson-month__expanded.open { display: flex; }

/* ====== PLAN OVERHAUL ====== */

/* "How it works" explainer — plain prose */
.plan-explainer {
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink-mute);
  margin-bottom: 8px;
}
.plan-explainer strong { color: var(--ink); font-weight: 600; }

.plan-faq-toggle {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mint-2);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
}
.plan-faq-toggle:hover { opacity: 0.7; }

.plan-faq {
  display: none;
  margin-top: 14px;
  padding: 16px 18px;
  background: var(--bone);
  border: 1px solid rgba(11, 26, 58, 0.08);
  border-left: 3px solid var(--mint-2);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.plan-faq.open { display: block; }
.plan-faq dt {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-top: 12px;
  letter-spacing: -0.005em;
}
.plan-faq dt:first-child { margin-top: 0; }
.plan-faq dd {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-mute);
  margin-top: 4px;
}

/* ===== Balance history card ===== */
.balance-history-card {
  background: #ffffff;
  border: 1px solid rgba(11, 26, 58, 0.08);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow:
    0 1px 3px rgba(11, 26, 58, 0.06),
    0 12px 32px rgba(11, 26, 58, 0.10);
  margin-top: 18px;
}
.balance-history-card__head {
  padding: 22px 26px 14px;
  border-bottom: 1px solid rgba(11, 26, 58, 0.08);
  background: rgba(11, 26, 58, 0.02);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}
.balance-history-card__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.balance-history-card__sub {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 2px;
}
.balance-history-card__body { padding: 6px 0 14px; }

.txn {
  display: grid;
  grid-template-columns: 80px 110px 1fr auto 90px;
  gap: 16px;
  align-items: center;
  padding: 12px 26px;
  border-bottom: 1px dashed rgba(11, 26, 58, 0.08);
  font-size: 13px;
}
.txn:last-child { border-bottom: none; }
.txn:hover { background: rgba(11, 26, 58, 0.015); }
.txn__date {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
}
.txn__type {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 3px;
  text-align: center;
  width: max-content;
}
.txn__type.renewal  { background: rgba(61, 219, 168, 0.15); color: var(--mint-2); }
.txn__type.carry    { background: rgba(11, 26, 58, 0.06);   color: var(--ink-mute); }
.txn__type.lesson   { background: rgba(245, 166, 35, 0.15); color: #B68500; }
.txn__type.late     { background: rgba(255, 107, 92, 0.15); color: var(--coral); }
.txn__type.adjust   { background: rgba(11, 26, 58, 0.06);   color: var(--ink-mute); }
.txn__desc { color: var(--ink); line-height: 1.4; }
.txn__desc small { display: block; color: var(--ink-faint); font-size: 11.5px; margin-top: 2px; }
.txn__delta {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  text-align: right;
  letter-spacing: 0;
}
.txn__delta.plus  { color: var(--mint-2); }
.txn__delta.minus { color: var(--coral); }
.txn__delta.zero  { color: var(--ink-faint); }
.txn__balance {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-mute);
  text-align: right;
  padding-left: 14px;
  border-left: 1px solid rgba(11, 26, 58, 0.08);
}
.txn__balance strong {
  display: block;
  font-size: 17px;
  color: var(--ink);
  font-weight: 700;
}

.balance-history-footer {
  padding: 14px 26px 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border-top: 1px solid rgba(11, 26, 58, 0.08);
  margin-top: 4px;
}
.balance-history-footer .legend { display: flex; gap: 16px; flex-wrap: wrap; }
.balance-history-footer .legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.balance-history-footer .legend-dot {
  width: 7px; height: 7px; border-radius: 50%;
}

/* ===== WhatsApp help button (replaces help text) ===== */
.plan-help-block {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid rgba(11, 26, 58, 0.08);
}
.plan-help-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 10px;
}
.plan-help-text {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-mute);
  margin-bottom: 14px;
}
.plan-help-text strong { color: var(--ink); font-weight: 600; }

.whatsapp-btn {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  background: #25D366;
  color: #ffffff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 11px 18px 11px 16px;
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.14s, transform 0.1s, box-shadow 0.14s;
  letter-spacing: 0.01em;
  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.30);
}
.whatsapp-btn:hover {
  background: #1FB755;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(37, 211, 102, 0.35);
}
.whatsapp-btn:active { transform: translateY(0); }
.whatsapp-btn svg { width: 18px; height: 18px; }
.whatsapp-btn .sub {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  font-weight: 500;
  opacity: 0.85;
  display: block;
  margin-top: 1px;
}

/* ====== COLOUR ACCENT PASS ====== */

/* Lesson mode badges: subtle warm/cool differentiation */
.lesson-card-mode {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px 4px 8px;
  background: rgba(61, 219, 168, 0.10);
  border: 1px solid rgba(61, 219, 168, 0.25);
  border-radius: 100px;
  color: var(--mint-2);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
}
.lesson-card-mode::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--mint-2);
  flex-shrink: 0;
}
.lesson-card-mode.coaching {
  background: rgba(245, 166, 35, 0.12);
  border-color: rgba(245, 166, 35, 0.28);
  color: #B68500;
}
.lesson-card-mode.coaching::before { background: #B68500; }
.lesson-card-mode.light {
  background: rgba(11, 26, 58, 0.05);
  border-color: rgba(11, 26, 58, 0.12);
  color: var(--ink-mute);
}
.lesson-card-mode.light::before { background: var(--ink-mute); }

/* Sparkline bars get a soft top fade for depth */
.attendance-trend__sparkline .sparkline-bar.attended {
  background: linear-gradient(180deg, var(--mint) 0%, var(--mint-2) 100%);
}

/* Balance hero — star-field echo */
.balance-hero {
  background:
    radial-gradient(circle at 80% 30%, rgba(255,255,255,0.05) 0.5px, transparent 0.7px),
    radial-gradient(circle at 25% 65%, rgba(255,255,255,0.06) 0.5px, transparent 0.7px),
    radial-gradient(circle at 60% 80%, rgba(255,255,255,0.04) 0.5px, transparent 0.7px),
    radial-gradient(circle at 90% 90%, rgba(255,255,255,0.04) 0.4px, transparent 0.6px),
    var(--navy) !important;
  background-size: auto !important;
}

/* Topnav user — slightly larger avatar with hover ring */
.topnav-avatar {
  transition: box-shadow 0.16s;
}
.topnav-avatar:hover {
  box-shadow: 0 0 0 3px rgba(61, 219, 168, 0.30);
}

/* Tab buttons get a subtle bottom accent on hover (non-active) */
.tab-btn:not(.active):hover { box-shadow: inset 0 -2px 0 rgba(61, 219, 168, 0.4); }

/* ====== RESPONSIVE ====== */
@media (max-width: 1024px) {
  .profile-layout { grid-template-columns: 1fr; }
  .profile-portrait-card { position: static; }
  .profile-goals, .profile-attributes { grid-template-columns: 1fr; }
  .txn { grid-template-columns: 70px 1fr auto; }
  .txn__type { grid-column: 1; grid-row: 2; }
  .txn__balance { display: none; }
}
@media (max-width: 720px) {
  .txn { padding-left: 18px; padding-right: 18px; }
}


/* ============================================================
   v7 — Profile · Lessons accordion · Balance history · WhatsApp
   ============================================================ */

/* Six tabs fit comfortably */
.topnav-tabs .tab-btn { padding-left: 14px; padding-right: 14px; }

/* ===== PROFILE TAB ===== */
.profile-grid {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 18px;
  align-items: start;
}

/* Identity card */
.profile-identity {
  background: #ffffff;
  border: 1px solid rgba(11, 26, 58, 0.08);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.profile-identity__hero {
  background: var(--navy);
  position: relative;
  padding: 28px 24px 22px;
  overflow: hidden;
}
.profile-identity__hero::before {
  content: '';
  position: absolute;
  top: -40%; right: -30%;
  width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(61,219,168,0.18) 0%, transparent 65%);
  pointer-events: none;
}
.profile-identity__hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(244,242,236,0.04) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
}
.profile-portrait {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  margin: 0 auto 14px;
  background-size: cover;
  background-position: center;
  border: 1.5px solid rgba(244,242,236,0.20);
  box-shadow: 0 8px 32px rgba(0,0,0,0.40), 0 0 40px rgba(61,219,168,0.20);
  position: relative;
  z-index: 2;
}
.profile-name {
  font-size: 22px;
  font-weight: 700;
  color: var(--bone);
  text-align: center;
  letter-spacing: -0.018em;
  position: relative;
  z-index: 2;
}
.profile-level {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mint);
  text-align: center;
  margin-top: 6px;
  position: relative;
  z-index: 2;
}
.profile-identity__facts { padding: 18px 22px 22px; }
.profile-fact {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px dashed rgba(11, 26, 58, 0.10);
  font-size: 12.5px;
  gap: 14px;
}
.profile-fact:last-child { border-bottom: none; }
.profile-fact__key {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  flex-shrink: 0;
}
.profile-fact__val {
  color: var(--ink);
  font-weight: 500;
  text-align: right;
}

/* Right column panels */
.profile-panels { display: flex; flex-direction: column; gap: 14px; }
.profile-panel {
  background: #ffffff;
  border: 1px solid rgba(11, 26, 58, 0.08);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.profile-panel__head {
  padding: 18px 22px 14px;
  border-bottom: 1px solid rgba(11, 26, 58, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(11, 26, 58, 0.02);
}
.profile-panel__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.008em;
}
.profile-panel__meta {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.profile-panel__meta.mint { color: var(--mint-2); }
.profile-panel__body { padding: 18px 22px 20px; }
.profile-panel__about {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--ink-soft);
}
.profile-panel__about p + p { margin-top: 10px; }

.profile-chip-group { margin-bottom: 14px; }
.profile-chip-group:last-child { margin-bottom: 0; }
.profile-chip-group__label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 8px;
}
.profile-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.profile-chip {
  font-size: 12.5px;
  padding: 6px 12px;
  border-radius: 100px;
  background: var(--bone);
  border: 1px solid rgba(11, 26, 58, 0.10);
  color: var(--ink);
  font-weight: 500;
}
.profile-chip--mint  {
  background: rgba(61, 219, 168, 0.12);
  border-color: rgba(61, 219, 168, 0.32);
  color: var(--mint-2);
}
.profile-chip--coral {
  background: rgba(255, 107, 92, 0.10);
  border-color: rgba(255, 107, 92, 0.32);
  color: var(--coral);
}
.profile-chip--sky {
  background: rgba(70, 140, 220, 0.10);
  border-color: rgba(70, 140, 220, 0.30);
  color: #356FAB;
}
.profile-chip--amber {
  background: rgba(245, 166, 35, 0.10);
  border-color: rgba(245, 166, 35, 0.32);
  color: #B68500;
}

/* Adaptive list */
.adaptive-list { display: flex; flex-direction: column; gap: 12px; }
.adaptive-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 14px;
  background: var(--bone);
  border: 1px solid rgba(11, 26, 58, 0.06);
  border-left: 3px solid var(--mint-2);
  border-radius: var(--radius-md);
}
.adaptive-item__icon {
  width: 28px; height: 28px;
  border-radius: 6px;
  background: rgba(61, 219, 168, 0.12);
  border: 1px solid rgba(61, 219, 168, 0.20);
  color: var(--mint-2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.adaptive-item__icon svg { width: 14px; height: 14px; }
.adaptive-item__body { flex: 1; min-width: 0; }
.adaptive-item__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
  margin-bottom: 3px;
}
.adaptive-item__text {
  font-size: 12.5px;
  color: var(--ink-mute);
  line-height: 1.5;
}
.adaptive-item__meta {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 6px;
}
.adaptive-item--coral { border-left-color: var(--coral); }
.adaptive-item--coral .adaptive-item__icon {
  background: rgba(255, 107, 92, 0.10);
  border-color: rgba(255, 107, 92, 0.25);
  color: var(--coral);
}
.adaptive-item--amber { border-left-color: var(--amber); }
.adaptive-item--amber .adaptive-item__icon {
  background: rgba(245, 166, 35, 0.10);
  border-color: rgba(245, 166, 35, 0.25);
  color: #B68500;
}
.adaptive-item--sky { border-left-color: #468CDC; }
.adaptive-item--sky .adaptive-item__icon {
  background: rgba(70, 140, 220, 0.10);
  border-color: rgba(70, 140, 220, 0.25);
  color: #356FAB;
}

.profile-panel__footer {
  padding: 14px 22px 16px;
  border-top: 1px dashed rgba(11, 26, 58, 0.10);
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.profile-panel__footer .mint { color: var(--mint-2); }

/* ===== LESSONS ACCORDION ===== */
.lessons-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}
.lessons-stat-tile {
  background: #ffffff;
  border: 1px solid rgba(11, 26, 58, 0.08);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: 0 1px 3px rgba(11, 26, 58, 0.04);
}
.lessons-stat-tile--mint {
  background: var(--navy);
  border-color: var(--navy);
}
.lessons-stat-tile__label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.lessons-stat-tile--mint .lessons-stat-tile__label { color: var(--mint); }
.lessons-stat-tile__value {
  font-size: 24px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.022em;
  line-height: 1;
}
.lessons-stat-tile--mint .lessons-stat-tile__value { color: var(--bone); }
.lessons-stat-tile__value .unit {
  font-size: 11px;
  font-family: var(--font-mono);
  font-weight: 400;
  color: var(--ink-faint);
  margin-left: 4px;
  letter-spacing: 0.06em;
}
.lessons-stat-tile--mint .lessons-stat-tile__value .unit { color: var(--bone-faint); }

.year-pills {
  display: flex;
  gap: 6px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.year-pill {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  padding: 7px 14px;
  border-radius: 100px;
  background: #ffffff;
  border: 1px solid rgba(11, 26, 58, 0.10);
  color: var(--ink-mute);
  cursor: pointer;
  font-weight: 600;
  transition: background 0.14s, border-color 0.14s, color 0.14s;
}
.year-pill:hover { background: var(--bone); }
.year-pill.active {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--mint);
}

.month-group {
  background: #ffffff;
  border: 1px solid rgba(11, 26, 58, 0.08);
  border-radius: var(--radius-lg);
  margin-bottom: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(11, 26, 58, 0.04);
}
.month-group__head {
  padding: 16px 22px;
  display: flex;
  align-items: center;
  gap: 18px;
  cursor: pointer;
  background: rgba(11, 26, 58, 0.02);
  border-bottom: 1px solid transparent;
  transition: background 0.14s;
}
.month-group__head:hover { background: rgba(11, 26, 58, 0.04); }
.month-group.open .month-group__head { border-bottom-color: rgba(11, 26, 58, 0.08); }

.month-group__chevron {
  width: 22px; height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-faint);
  transition: transform 0.2s;
  flex-shrink: 0;
}
.month-group__chevron svg { width: 12px; height: 12px; }
.month-group.open .month-group__chevron { transform: rotate(90deg); color: var(--mint-2); }

.month-group__label {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.012em;
  flex-shrink: 0;
}
.month-group__count {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--mint-2);
  padding: 3px 10px;
  background: rgba(61, 219, 168, 0.10);
  border: 1px solid rgba(61, 219, 168, 0.25);
  border-radius: 100px;
  font-weight: 600;
  flex-shrink: 0;
}
.month-group__topics {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  color: var(--ink-faint);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.month-group__body {
  display: none;
  padding: 8px 0;
}
.month-group.open .month-group__body { display: block; }

.lesson-row {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 20px;
  padding: 14px 22px;
  align-items: center;
  border-top: 1px dashed rgba(11, 26, 58, 0.08);
  transition: background 0.14s;
  cursor: pointer;
}
.lesson-row:first-child { border-top: none; }
.lesson-row:hover { background: rgba(11, 26, 58, 0.025); }
.lesson-row__date { text-align: center; }
.lesson-row__date-day {
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
  letter-spacing: -0.022em;
}
.lesson-row__date-dow {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 3px;
}
.lesson-row__body { min-width: 0; }
.lesson-row__title-line {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.lesson-row__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.008em;
}
.lesson-mode-pill {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 3px;
  font-weight: 600;
  flex-shrink: 0;
}
.lesson-mode-pill--growth {
  background: rgba(61, 219, 168, 0.12);
  border: 1px solid rgba(61, 219, 168, 0.30);
  color: var(--mint-2);
}
.lesson-mode-pill--coaching {
  background: rgba(70, 140, 220, 0.10);
  border: 1px solid rgba(70, 140, 220, 0.30);
  color: #356FAB;
}
.lesson-mode-pill--light {
  background: rgba(245, 166, 35, 0.10);
  border: 1px solid rgba(245, 166, 35, 0.30);
  color: #B68500;
}
.lesson-row__summary {
  font-size: 12.5px;
  color: var(--ink-mute);
  line-height: 1.45;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.lesson-row__actions { display: flex; gap: 6px; flex-shrink: 0; }

/* ===== PLAN — balance history table ===== */
.history-table {
  width: 100%;
  border-collapse: collapse;
}
.history-table th {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 600;
  text-align: left;
  padding: 10px 14px;
  background: rgba(11, 26, 58, 0.02);
  border-bottom: 1px solid rgba(11, 26, 58, 0.08);
}
.history-table td {
  padding: 12px 14px;
  border-bottom: 1px dashed rgba(11, 26, 58, 0.08);
  font-size: 13px;
  color: var(--ink);
}
.history-table tr:last-child td { border-bottom: none; }
.history-table tr:hover td { background: rgba(11, 26, 58, 0.02); }
.history-date {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-faint);
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.history-event { font-weight: 500; }
.history-event__sub {
  font-size: 11px;
  color: var(--ink-faint);
  margin-top: 2px;
}
.history-delta {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.005em;
}
.history-delta--plus  { color: var(--mint-2); }
.history-delta--minus { color: var(--coral); }
.history-delta--zero  { color: var(--ink-faint); }
.history-balance {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.history-type {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 3px;
  font-weight: 600;
  display: inline-block;
}
.history-type--renewal {
  background: rgba(61, 219, 168, 0.12);
  border: 1px solid rgba(61, 219, 168, 0.30);
  color: var(--mint-2);
}
.history-type--used {
  background: rgba(70, 140, 220, 0.10);
  border: 1px solid rgba(70, 140, 220, 0.30);
  color: #356FAB;
}
.history-type--carry {
  background: rgba(245, 166, 35, 0.10);
  border: 1px solid rgba(245, 166, 35, 0.30);
  color: #B68500;
}
.history-type--adj {
  background: rgba(11, 26, 58, 0.06);
  border: 1px solid rgba(11, 26, 58, 0.12);
  color: var(--ink-mute);
}

/* Plain-language explainer */
.balance-explainer-block {
  display: none;
  margin-top: 14px;
  padding: 16px 18px;
  background: var(--bone);
  border: 1px solid rgba(11, 26, 58, 0.10);
  border-radius: var(--radius-md);
  font-size: 13px;
  line-height: 1.65;
  color: var(--ink-soft);
}
.balance-explainer-block.open { display: block; }
.balance-explainer-block h5 {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mint-2);
  font-weight: 600;
  margin-top: 12px;
  margin-bottom: 4px;
}
.balance-explainer-block h5:first-child { margin-top: 0; }
.balance-explainer-block p { margin-bottom: 6px; }
.balance-explainer-block p strong { color: var(--ink); font-weight: 600; }

/* WhatsApp button */
.whatsapp-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: #25D366;
  color: #ffffff;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.25);
}
.whatsapp-cta:hover {
  background: #20BD5A;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(37, 211, 102, 0.35);
}
.whatsapp-cta svg { width: 18px; height: 18px; flex-shrink: 0; }
.whatsapp-help-line {
  font-size: 12.5px;
  color: var(--ink-faint);
  margin-top: 10px;
  line-height: 1.5;
}

/* Colour polish — extras */
.home-card.accent-sky { border-left: 3px solid #468CDC; }
.home-card.accent-sky .home-card-label { color: #356FAB; }

.pst-tab[data-mode="say"].active::after    { background: var(--mint-2); }
.pst-tab[data-mode="phrase"].active::after { background: #468CDC; }
.pst-tab[data-mode="flash"].active::after  { background: #B68500; }
.pst-tab[data-mode="sprint"].active::after { background: var(--coral); }
.pst-tab[data-mode="phrase"].active .pst-tab__label { color: #356FAB; }
.pst-tab[data-mode="flash"].active .pst-tab__label  { color: #B68500; }
.pst-tab[data-mode="sprint"].active .pst-tab__label { color: var(--coral); }

/* Responsive */
@media (max-width: 1024px) {
  .profile-grid { grid-template-columns: 1fr; }
  .lessons-stats { grid-template-columns: repeat(2, 1fr); }
  .month-group__topics { display: none; }
}
@media (max-width: 720px) {
  .lessons-stats { grid-template-columns: 1fr 1fr; }
  .lesson-row { grid-template-columns: 54px 1fr; }
  .lesson-row__actions { grid-column: 1 / -1; justify-content: flex-start; }
  .history-table th:nth-child(4),
  .history-table td:nth-child(4) { display: none; }
}

/* ============================================================
   v8 — UX REFINEMENT
   Stronger page titles, unified buttons, more iconography,
   reduced micro-text. Layered on top — do not edit earlier rules.
   ============================================================ */

/* ====== Page header: bigger title, pill eyebrow with icon ====== */
.page-header { margin-bottom: 32px; }
.page-header-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: rgba(61, 219, 168, 0.10);
  border: 1px solid rgba(61, 219, 168, 0.30);
  border-radius: 100px;
  padding: 6px 14px 6px 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--mint-2);
  text-transform: uppercase;
  margin-bottom: 16px;
  width: max-content;
  white-space: nowrap;
}
.page-header-eyebrow::before { display: none; }
.page-header-eyebrow svg {
  width: 13px; height: 13px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.page-title {
  font-size: clamp(38px, 4.4vw, 54px);
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: -0.028em;
  margin-bottom: 14px;
}
.page-title .accent { color: var(--mint-2); }
.page-lead {
  font-size: 15px;
  color: var(--ink-mute);
  max-width: none;
  line-height: 1.55;
}

/* On dark hero (Home), page-title — N/A (Home uses hero-greeting) */

/* ====== Buttons: fix btn-mono.mint font, unify heights ====== */
.btn-mono,
.btn-mono.mint {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.005em;
  text-transform: none;
  padding: 11px 18px;
  height: 40px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  line-height: 1;
  white-space: nowrap;
}
.btn-mono.mint {
  background: var(--mint-2);
  border-color: var(--mint-2);
  color: #fff;
  box-shadow: 0 4px 14px rgba(43,163,125,0.25);
}
.btn-mono.mint:hover {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--mint);
  transform: translateY(-1px);
}
.btn-mono svg { width: 13px; height: 13px; flex-shrink: 0; }

/* Make secondary ghost buttons inside home cards solid and confident */
.home-card .btn-ghost,
.home-card .btn-ghost.mint {
  height: 38px;
  padding: 0 16px;
  font-size: 12.5px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  justify-content: center;
  letter-spacing: 0.005em;
}
.home-card .btn-ghost {
  background: rgba(11, 26, 58, 0.05);
  border: 1px solid rgba(11, 26, 58, 0.14);
  color: var(--ink);
}
.home-card .btn-ghost:hover {
  background: var(--ink);
  color: var(--mint);
  border-color: var(--ink);
}
.home-card .btn-ghost.mint {
  background: var(--mint-2);
  border-color: var(--mint-2);
  color: #fff;
  box-shadow: 0 3px 10px rgba(43,163,125,0.22);
}
.home-card .btn-ghost.mint:hover {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--mint);
}
.home-card .btn-ghost svg { width: 12px; height: 12px; }

/* ====== Topnav logo polish ====== */
.topnav { height: 72px; }
.topnav-logo-mark {
  width: 52px;
  height: 52px;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}
.topnav-logo-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 2px 6px rgba(61,219,168,0.20));
}
.topnav-logo-mark svg { display: none; }
.topnav-logo { gap: 14px; }
.topnav-logo-text {
  letter-spacing: 0.26em;
  font-weight: 700;
  font-size: 10.5px;
}
.topnav-logo-text .sub {
  display: block;
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.30em;
  color: var(--mint);
  margin-top: 2px;
  opacity: 0.85;
}

/* ====== For Today cards: every card gets accent + icon ====== */
.home-card.accent-coral { border-left: 3px solid var(--coral); }
.home-card.accent-coral .home-card-label { color: var(--coral); }
.home-card.accent-coral::before {
  content: '';
  position: absolute;
  top: -40%; right: -30%;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(255,107,92,0.10) 0%, transparent 70%);
  pointer-events: none;
}

.home-card.accent-amber { border-left: 3px solid var(--amber); }
.home-card.accent-amber .home-card-label { color: #B68500; }
.home-card.accent-amber::before {
  content: '';
  position: absolute;
  top: -40%; right: -30%;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(245,166,35,0.10) 0%, transparent 70%);
  pointer-events: none;
}

/* All home-card.accent-mint already styled — boost label colour */
.home-card.accent-mint .home-card-label { color: var(--mint-2); }
.home-card.accent-mint::before {
  background: radial-gradient(circle, rgba(61,219,168,0.10) 0%, transparent 70%);
}

.home-card-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
}
.home-card-label svg {
  width: 14px; height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.home-card-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin-top: -2px;
}
.home-card-desc { font-size: 13px; }

/* When card has both title and desc, position action at bottom */
.home-card { min-height: 200px; }
.home-card-action { margin-top: auto; }

/* This week focus — bullet items more visual */
.home-card .focus-items { gap: 9px; }
.home-card .focus-item {
  font-size: 13px;
  color: var(--ink-mute);
  padding-left: 16px;
  position: relative;
  line-height: 1.45;
}
.home-card .focus-item::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--mint-2);
  position: absolute;
  left: 0;
  top: 7px;
  box-shadow: 0 0 0 3px rgba(61,219,168,0.16);
}

/* ====== Hero next-class card: mission card treatment ====== */
.hero-next-class {
  background: linear-gradient(160deg, rgba(11,26,58,0.55) 0%, rgba(61,219,168,0.10) 200%);
  border: 1px solid rgba(61,219,168,0.35);
  border-left: 3px solid var(--mint);
  box-shadow:
    0 8px 30px rgba(0,0,0,0.30),
    inset 0 1px 0 rgba(255,255,255,0.04);
  padding: 24px 26px;
}
.hero-next-class .hero-class-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--mint);
}
.hero-class-date {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.018em;
}
.hero-class-topic {
  font-size: 14.5px;
  color: var(--bone);
  opacity: 0.78;
  margin-top: 2px;
}
.hero-class-meta-row {
  display: flex;
  gap: 14px;
  margin-top: 2px;
  padding-top: 12px;
  border-top: 1px dashed rgba(244,242,236,0.14);
}
.hero-class-meta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--bone-mute);
}
.hero-class-meta svg {
  width: 12px; height: 12px;
  stroke: currentColor; fill: none;
  stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.hero-class-actions .btn-primary,
.hero-class-actions .btn-secondary {
  height: 42px;
}

/* ====== Lessons stat tiles: icons + soft colour ====== */
.lessons-stats { gap: 12px; }
.lessons-stat-tile {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 12px;
  align-items: center;
  padding: 16px 18px;
  position: relative;
  overflow: hidden;
}
.lessons-stat-tile__icon {
  width: 38px; height: 38px;
  border-radius: 9px;
  background: rgba(61, 219, 168, 0.12);
  color: var(--mint-2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.lessons-stat-tile__icon svg {
  width: 18px; height: 18px;
  stroke: currentColor; fill: none;
  stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.lessons-stat-tile__text { min-width: 0; }
.lessons-stat-tile__label {
  font-size: 10px;
  letter-spacing: 0.16em;
  margin-bottom: 4px;
}
.lessons-stat-tile__value { font-size: 22px; }
.lessons-stat-tile--mint .lessons-stat-tile__icon {
  background: rgba(61, 219, 168, 0.18);
  color: var(--mint);
}
.lessons-stat-tile.tone-coral .lessons-stat-tile__icon {
  background: rgba(255,107,92,0.12);
  color: var(--coral);
}
.lessons-stat-tile.tone-amber .lessons-stat-tile__icon {
  background: rgba(245,166,35,0.12);
  color: #B68500;
}
.lessons-stat-tile.tone-sky .lessons-stat-tile__icon {
  background: rgba(70,140,220,0.12);
  color: #356FAB;
}

/* ====== Library by category (Lessons page, new section) ====== */
.library-section {
  margin-top: 8px;
}
.library-section-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}
.library-section-head h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.012em;
}
.library-section-head .lead {
  font-size: 13px;
  color: var(--ink-mute);
  margin-left: auto;
}
.library-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
@media (max-width: 1180px) { .library-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .library-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .library-grid { grid-template-columns: 1fr; } }

.library-card {
  background: #ffffff;
  border: 1px solid rgba(11, 26, 58, 0.08);
  border-radius: var(--radius-lg);
  padding: 20px 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
  cursor: pointer;
  transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s;
  box-shadow: 0 1px 3px rgba(11, 26, 58, 0.06);
  position: relative;
  overflow: hidden;
}
.library-card:hover {
  transform: translateY(-3px);
  border-color: rgba(61, 219, 168, 0.40);
  box-shadow: 0 8px 26px rgba(11, 26, 58, 0.10);
}
.library-card__icon {
  width: 44px; height: 44px;
  border-radius: 11px;
  background: rgba(61, 219, 168, 0.12);
  color: var(--mint-2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}
.library-card__icon svg {
  width: 22px; height: 22px;
  stroke: currentColor; fill: none;
  stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.library-card[data-tone="coral"] .library-card__icon { background: rgba(255,107,92,0.12); color: var(--coral); }
.library-card[data-tone="amber"] .library-card__icon { background: rgba(245,166,35,0.12); color: #B68500; }
.library-card[data-tone="sky"]   .library-card__icon { background: rgba(70,140,220,0.12); color: #356FAB; }
.library-card[data-tone="navy"]  .library-card__icon { background: rgba(11,26,58,0.07); color: var(--ink); }
.library-card[data-tone="violet"] .library-card__icon { background: rgba(120,86,205,0.12); color: #6E54B8; }

.library-card__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.008em;
}
.library-card__desc {
  font-size: 12.5px;
  color: var(--ink-mute);
  line-height: 1.45;
  flex: 1;
}
.library-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px dashed rgba(11,26,58,0.10);
}
.library-card__count {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--ink-faint);
  text-transform: uppercase;
}
.library-card__open {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--mint-2);
}
.library-card__open svg {
  width: 11px; height: 11px;
  stroke: currentColor; fill: none;
  stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ====== Progress: insight tiles get icons ====== */
.insight-tile { position: relative; }
.insight-tile__icon {
  position: absolute;
  top: 14px; right: 14px;
  width: 28px; height: 28px;
  border-radius: 8px;
  background: rgba(61, 219, 168, 0.12);
  color: var(--mint-2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.insight-tile__icon svg {
  width: 14px; height: 14px;
  stroke: currentColor; fill: none;
  stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.insight-tile--accent .insight-tile__icon {
  background: rgba(61,219,168,0.22);
  color: var(--mint);
}
.report-card .insight-tile {
  padding-right: 50px;
}

/* Progress page: rectangle pills above (cefr + trajectory) — already styled, just polish */
.progress-headline-row {
  gap: 8px;
}

/* Practice cards: stronger title font, less small caps */
.practice-card-title {
  display: flex;
  align-items: center;
  gap: 10px;
}
.practice-card-title svg {
  width: 18px; height: 18px;
  stroke: var(--mint-2); fill: none;
  stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
}

/* Practice stage tab — state badge */
.pst-tab__badge {
  position: absolute;
  top: 10px; right: 10px;
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: rgba(61, 219, 168, 0.18);
  color: var(--mint-2);
  padding: 3px 7px;
  border-radius: 100px;
  font-weight: 700;
}
.pst-tab__badge--coral { background: rgba(255,107,92,0.14); color: var(--coral); }
.pst-tab__badge--amber { background: rgba(245,166,35,0.14); color: #B68500; }
.pst-tab__badge--navy  { background: rgba(11,26,58,0.06); color: var(--ink-mute); }
.pst-tab { position: relative; }
.pst-tab__icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: rgba(11,26,58,0.04);
  color: var(--mint-2);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 6px;
}
.pst-tab__icon svg {
  width: 16px; height: 16px;
  stroke: currentColor; fill: none;
  stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.pst-tab.active .pst-tab__icon {
  background: var(--mint-2); color: #fff;
}

/* ====== Hobbies with icons ====== */
.profile-hobbies {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.profile-hobby {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  border: 1px solid rgba(11, 26, 58, 0.10);
  padding: 8px 14px 8px 10px;
  border-radius: 100px;
  font-size: 12.5px;
  color: var(--ink);
  font-weight: 500;
  box-shadow: 0 1px 2px rgba(11,26,58,0.04);
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.profile-hobby:hover {
  transform: translateY(-1px);
  border-color: rgba(61,219,168,0.40);
  box-shadow: 0 4px 12px rgba(11,26,58,0.08);
}
.profile-hobby__icon {
  width: 24px; height: 24px;
  border-radius: 7px;
  background: rgba(61, 219, 168, 0.14);
  color: var(--mint-2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.profile-hobby__icon svg {
  width: 13px; height: 13px;
  stroke: currentColor; fill: none;
  stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.profile-hobby[data-tone="coral"] .profile-hobby__icon { background: rgba(255,107,92,0.14); color: var(--coral); }
.profile-hobby[data-tone="amber"] .profile-hobby__icon { background: rgba(245,166,35,0.14); color: #B68500; }
.profile-hobby[data-tone="sky"]   .profile-hobby__icon { background: rgba(70,140,220,0.14); color: #356FAB; }
.profile-hobby[data-tone="violet"] .profile-hobby__icon { background: rgba(120,86,205,0.14); color: #6E54B8; }

/* ====== Progress: progress-card titles — slightly bigger + icon hook ====== */
.progress-card-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
}
.progress-card-title svg {
  width: 18px; height: 18px;
  stroke: var(--mint-2); fill: none;
  stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
}

/* Report card subtitle — tighter, less microtext */
.report-card__sub { font-size: 12px; }
.report-card__eyebrow { font-size: 10px; letter-spacing: 0.22em; }
.report-card__head { padding-bottom: 14px; }
.report-card__headline { font-size: 22px; }

/* attendance card — slightly subdue subtitle */
.attendance-card__subtitle { font-size: 10px; letter-spacing: 0.22em; }
.attendance-card__title { font-size: 16px; display: flex; align-items: center; gap: 10px; }
.attendance-card__title svg {
  width: 18px; height: 18px;
  stroke: var(--mint-2); fill: none;
  stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}

/* Plan card titles */
.plan-card-title {
  display: flex; align-items: center; gap: 10px;
}
.plan-card-title svg {
  width: 18px; height: 18px;
  stroke: var(--mint-2); fill: none;
  stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
}

/* Profile panel titles */
.profile-panel__title {
  display: flex; align-items: center; gap: 10px;
}
.profile-panel__title svg {
  width: 16px; height: 16px;
  stroke: var(--mint-2); fill: none;
  stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
}

@media (max-width: 720px) {
  .lessons-stats { grid-template-columns: 1fr 1fr; }
  .page-title { font-size: 36px; }
}

/* ====== Filters drawer (Lessons page) ====== */
.filters-drawer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.25s ease;
}
.filters-drawer.open {
  grid-template-rows: 1fr;
}
.filters-drawer__inner {
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(11, 26, 58, 0.08);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 3px rgba(11, 26, 58, 0.06);
  padding: 0 22px;
  max-height: 0;
  opacity: 0;
  transition: padding 0.25s ease, max-height 0.25s ease, opacity 0.20s ease;
}
.filters-drawer.open .filters-drawer__inner {
  padding: 20px 22px 18px;
  max-height: 600px;
  opacity: 1;
}
.filters-drawer__inner > .filter-group { margin-bottom: 16px; }
.filter-group__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 9px;
  font-weight: 600;
}
.filter-group__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.filter-chip {
  background: var(--bone);
  border: 1px solid rgba(11, 26, 58, 0.10);
  color: var(--ink-mute);
  padding: 6px 14px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  border-radius: 100px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.filter-chip:hover {
  background: #ffffff;
  color: var(--ink);
  border-color: rgba(11, 26, 58, 0.22);
}
.filter-chip.active {
  background: var(--mint-2);
  border-color: var(--mint-2);
  color: #ffffff;
}
.filters-drawer__foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px dashed rgba(11, 26, 58, 0.10);
}
.filters-drawer__foot .btn-ghost {
  padding: 0 16px;
  height: 38px;
  display: inline-flex;
  align-items: center;
}

/* Filter button "active" tint when drawer open */
#filtersBtn.active {
  background: var(--mint-2);
  border-color: var(--mint-2);
  color: #ffffff;
}
#filtersBtn.active svg { stroke: #ffffff; }

/* ====== Communication function chips (above lesson list) ====== */
.function-chips-row {
  margin: 18px 0 22px;
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.function-chips-row::-webkit-scrollbar { height: 4px; }
.function-chips-row::-webkit-scrollbar-thumb { background: rgba(11,26,58,0.18); border-radius: 4px; }
.function-chips {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  padding: 4px 2px 6px;
}
.function-chip {
  background: #ffffff;
  color: var(--ink-mute);
  border: 1px solid rgba(11, 26, 58, 0.10);
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.005em;
  padding: 9px 18px 9px 9px;
  border-radius: 100px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 1px 2px rgba(11, 26, 58, 0.04);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
}
.function-chip__ico {
  width: 26px;
  height: 26px;
  border-radius: 100px;
  background: rgba(11, 26, 58, 0.05);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--mint-2);
  transition: background 0.15s ease, color 0.15s ease;
  flex-shrink: 0;
}
.function-chip__ico svg {
  width: 13px;
  height: 13px;
}
.function-chip:hover {
  background: #ffffff;
  color: var(--navy);
  border-color: rgba(11, 26, 58, 0.22);
  box-shadow: 0 4px 12px rgba(11, 26, 58, 0.08);
  transform: translateY(-1px);
}
.function-chip:hover .function-chip__ico {
  background: rgba(61, 219, 168, 0.14);
}
.function-chip.active {
  background: var(--navy);
  color: #ffffff;
  border-color: var(--navy);
  box-shadow: 0 4px 14px rgba(11, 26, 58, 0.20);
}
.function-chip.active .function-chip__ico {
  background: var(--mint);
  color: var(--navy);
}


/* ---- DEMO badge (nav, top-right) ---- */
.demo-badge {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.20em;
  color: var(--coral);
  background: rgba(255, 107, 92, 0.10);
  border: 1px solid rgba(255, 107, 92, 0.25);
  border-radius: 4px;
  padding: 3px 7px;
  text-transform: uppercase;
  flex-shrink: 0;
}

/* ---- Shimmer skeleton ---- */
@keyframes shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position: 600px 0; }
}
.skeleton {
  background: linear-gradient(90deg,
    rgba(244,242,236,0.06) 25%,
    rgba(244,242,236,0.12) 37%,
    rgba(244,242,236,0.06) 63%
  );
  background-size: 600px 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  border-radius: 6px;
}
.skeleton-card {
  background: rgba(244,242,236,0.04);
  border: 1px solid rgba(244,242,236,0.08);
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.skeleton-line { height: 12px; }
.skeleton-line.wide  { width: 70%; }
.skeleton-line.mid   { width: 45%; }
.skeleton-line.short { width: 25%; }
.skeleton-line.full  { width: 100%; }
.skeleton-title { height: 24px; width: 50%; margin-bottom: 4px; }

/* ---- Error refresh indicator ---- */
.data-error-indicator {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--coral);
  margin-top: 8px;
  opacity: 0.75;
}