/*
 * Lady Hawk Pronunciation Studio — studio.css v3.0.0
 * Clean single-file rewrite. No duplicate rules, no appended overrides.
 * Aesthetic: Refined Editorial Light — warm ivory, deep ink, coral-gold accents
 * Fonts: Cormorant Garamond (display) + JetBrains Mono (phonetics) + Outfit (UI)
 */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400;1,600&family=Outfit:wght@300;400;500;600;700;800&family=JetBrains+Mono:ital,wght@0,300;0,400;0,500;1,300&display=swap');

/* ═══════════════════════════════════════════════════════════════
   DESIGN TOKENS
═══════════════════════════════════════════════════════════════ */
:root {
  --c-bg:       #faf8f4;
  --c-bg2:      #f4f0e8;
  --c-surface:  #ffffff;
  --c-ink:      #1a1510;
  --c-ink2:     #3d3629;
  --c-ink3:     #7a6f61;
  --c-ink4:     #b0a898;
  --c-coral:    #e85d3a;
  --c-coral-l:  #fde8e2;
  --c-gold:     #c9871a;
  --c-gold-l:   #fdf3e0;
  --c-teal:     #0e8a7b;
  --c-teal-l:   #e0f5f2;
  --c-sky:      #2563eb;
  --c-sky-l:    #eff6ff;
  --c-green:    #1a7a4a;
  --c-green-l:  #e6f5ec;
  --c-border:   rgba(26,21,16,.1);
  --c-border2:  rgba(26,21,16,.18);
  --sh-sm:      0 1px 4px rgba(26,21,16,.06), 0 4px 16px rgba(26,21,16,.06);
  --sh:         0 2px 8px rgba(26,21,16,.06), 0 8px 32px rgba(26,21,16,.09);
  --sh-lg:      0 8px 24px rgba(26,21,16,.08), 0 24px 64px rgba(26,21,16,.12);
  --r-sm:   10px;
  --r-md:   16px;
  --r-lg:   24px;
  --font-d: 'Cormorant Garamond', Georgia, serif;
  --font-u: 'Outfit', system-ui, sans-serif;
  --font-m: 'JetBrains Mono', 'Fira Mono', monospace;
  --spring: cubic-bezier(.16,1,.3,1);
  --ease:   cubic-bezier(.22,1,.36,1);
}

/* ═══════════════════════════════════════════════════════════════
   RESET
═══════════════════════════════════════════════════════════════ */
.lhps-wrap, .lhps-wrap * { box-sizing: border-box; margin: 0; padding: 0; }

.lhps-wrap {
  font-family: var(--font-u);
  background: var(--c-bg);
  color: var(--c-ink);
  min-height: 100vh;
  padding-bottom: 80px;
  -webkit-font-smoothing: antialiased;
  position: relative;
  overflow-x: hidden;
}

/* Grain texture overlay */
.lhps-wrap::before {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.025'/%3E%3C/svg%3E");
  opacity: .5;
}

/* ═══════════════════════════════════════════════════════════════
   HERO
═══════════════════════════════════════════════════════════════ */
.lhps-hero {
  position: relative; z-index: 1;
  padding: 60px 24px 52px;
  text-align: center;
  border-bottom: 1px solid var(--c-border);
  background: linear-gradient(180deg, #fff 0%, var(--c-bg) 100%);
  overflow: hidden;
}

.lhps-hero::after {
  content: 'Aa';
  position: absolute;
  font-family: var(--font-d);
  font-size: 340px; font-weight: 700;
  color: var(--c-ink); opacity: .025;
  top: -60px; right: -30px;
  line-height: 1; pointer-events: none; user-select: none;
}

.lhps-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--c-coral); margin-bottom: 20px;
  animation: fadeUp .5s var(--ease) both;
}
.lhps-eyebrow::before, .lhps-eyebrow::after {
  content: ''; width: 28px; height: 1px;
  background: var(--c-coral); opacity: .5;
}

.lhps-title {
  font-family: var(--font-d);
  font-size: clamp(48px, 9vw, 100px);
  font-weight: 700; line-height: .92; letter-spacing: -.025em;
  color: var(--c-ink);
  animation: fadeUp .55s .08s var(--ease) both;
}
.lhps-title em { font-style: italic; color: var(--c-coral); }

.lhps-subtitle {
  font-size: clamp(15px, 2vw, 18px); font-weight: 400;
  color: var(--c-ink3); margin-top: 14px; letter-spacing: .01em;
  animation: fadeUp .55s .16s var(--ease) both;
}

/* ═══════════════════════════════════════════════════════════════
   LAYOUT — single column, max 800px
═══════════════════════════════════════════════════════════════ */
.lhps-container {
  max-width: 800px; margin: 0 auto;
  padding: 36px 24px 0;
  position: relative; z-index: 1;
}

.lhps-single-col {
  display: flex; flex-direction: column; gap: 20px;
}

/* ═══════════════════════════════════════════════════════════════
   CARDS
═══════════════════════════════════════════════════════════════ */
.lhps-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 28px 32px;
  box-shadow: var(--sh-sm);
  position: relative; overflow: hidden;
  animation: fadeUp .5s var(--ease) both;
}
.lhps-card:nth-child(2) { animation-delay: .07s; }
.lhps-card:nth-child(3) { animation-delay: .14s; }

/* Coral-gold accent stripe at top of each card */
.lhps-accent-line {
  position: absolute; top: 0; left: 32px; right: 32px; height: 2px;
  border-radius: 0 0 2px 2px;
  background: linear-gradient(90deg, var(--c-coral), var(--c-gold));
}

/* Section label — small all-caps with a rule line */
.lhps-section-label {
  font-size: 10px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--c-ink4); margin-bottom: 18px;
  display: flex; align-items: center; gap: 10px;
}
.lhps-section-label::after {
  content: ''; flex: 1; height: 1px; background: var(--c-border);
}

/* Horizontal divider inside cards */
.lhps-divider { height: 1px; background: var(--c-border); margin: 18px 0; }

/* ═══════════════════════════════════════════════════════════════
   1. INTRO CARD — "Ready to record?"
═══════════════════════════════════════════════════════════════ */
.lhps-intro-card { padding: 32px; }

.lhps-intro-inner {
  display: flex; flex-wrap: wrap;
  gap: 20px; align-items: flex-start;
}

.lhps-intro-icon {
  font-size: 48px; line-height: 1; flex-shrink: 0;
  animation: breathe 3.5s ease infinite;
}

.lhps-intro-text { flex: 1; min-width: 200px; }

.lhps-intro-heading {
  font-family: var(--font-d);
  font-size: 26px; font-weight: 700;
  color: var(--c-ink); line-height: 1.1;
  margin-bottom: 8px;
}

.lhps-intro-body {
  font-size: 14px; line-height: 1.65; color: var(--c-ink3);
  margin-bottom: 14px;
}

.lhps-intro-steps {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 8px;
}

.lhps-step {
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; font-weight: 500;
  color: var(--c-ink2); line-height: 1.4;
}

.lhps-step-dot {
  color: var(--c-coral);
  font-size: 18px; font-weight: 700;
  font-family: var(--font-u);
  flex-shrink: 0; line-height: 1;
}

/* ═══════════════════════════════════════════════════════════════
   2. CURRENT WORD CARD
═══════════════════════════════════════════════════════════════ */
.lhps-word-card { padding: 36px 40px; }

/* Word + refresh button row */
.lhps-word-row {
  display: flex; align-items: flex-start;
  justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  margin-bottom: 24px;
}

.lhps-word {
  font-family: var(--font-d);
  font-size: clamp(68px, 10vw, 120px);
  font-weight: 700; line-height: .95; letter-spacing: -.03em;
  color: var(--c-ink); flex: 1;
  transition: all .4s var(--spring);
}
.lhps-word.flash {
  opacity: 0; transform: translateY(14px) scale(.96); filter: blur(4px);
}

.lhps-new-word-btn {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--c-bg2); border: 1px solid var(--c-border);
  color: var(--c-ink3); font-size: 17px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: all .22s; margin-top: 10px;
}
.lhps-new-word-btn:hover {
  background: var(--c-coral-l); border-color: var(--c-coral);
  color: var(--c-coral); transform: rotate(60deg);
}

/* IPA row — clearly spaced below the big word */
.lhps-ipa-row {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 18px;
}

.lhps-ipa {
  font-family: var(--font-m);
  font-size: 22px; font-weight: 300; font-style: italic;
  color: var(--c-teal); letter-spacing: .03em; line-height: 1;
}

.lhps-ipa-copy-btn {
  width: 26px; height: 26px; border-radius: 6px;
  background: transparent; border: 1px solid var(--c-border);
  color: var(--c-ink4); font-size: 12px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s; flex-shrink: 0;
}
.lhps-ipa-copy-btn:hover {
  background: var(--c-teal-l); border-color: var(--c-teal); color: var(--c-teal);
}

/* Meta chips */
.lhps-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.lhps-chip {
  font-size: 12px; font-weight: 600;
  padding: 5px 14px; border-radius: 100px; border: 1px solid; line-height: 1;
}
.chip-pos  { color: var(--c-gold);  border-color: rgba(201,135,26,.3);  background: var(--c-gold-l); }
.chip-syl  { color: var(--c-teal);  border-color: rgba(14,138,123,.25); background: var(--c-teal-l); }
.chip-diff { color: var(--c-sky);   border-color: rgba(37,99,235,.2);   background: var(--c-sky-l); }

/* Listen button */
.lhps-listen-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.lhps-listen-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-u); font-size: 13px; font-weight: 600;
  padding: 10px 22px; border-radius: var(--r-sm); border: 1.5px solid;
  cursor: pointer; transition: all .18s; letter-spacing: .01em;
}
.lhps-listen-btn svg { width: 15px; height: 15px; flex-shrink: 0; }
.listen-primary {
  background: var(--c-teal); border-color: var(--c-teal); color: #fff;
}
.listen-primary:hover {
  background: #0a7060; box-shadow: 0 4px 16px rgba(14,138,123,.35);
  transform: translateY(-1px);
}

/* Difficulty tabs */
.lhps-diff-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; }
.lhps-diff-tab {
  font-size: 12px; font-weight: 600; padding: 7px 18px;
  border-radius: 100px; border: 1.5px solid var(--c-border2);
  background: transparent; color: var(--c-ink3); cursor: pointer;
  transition: all .18s; letter-spacing: .01em;
}
.lhps-diff-tab:hover { border-color: var(--c-coral); color: var(--c-coral); background: var(--c-coral-l); }
.lhps-diff-tab.active { background: var(--c-coral); border-color: var(--c-coral); color: #fff; }

/* Custom word input */
.lhps-custom-row { display: flex; gap: 8px; align-items: stretch; }
.lhps-input {
  flex: 1; font-family: var(--font-u); font-size: 14px;
  padding: 11px 16px; background: var(--c-bg2);
  border: 1.5px solid var(--c-border2); border-radius: var(--r-sm);
  color: var(--c-ink); outline: none; transition: all .18s;
}
.lhps-input::placeholder { color: var(--c-ink4); }
.lhps-input:focus {
  background: #fff; border-color: var(--c-coral);
  box-shadow: 0 0 0 3px rgba(232,93,58,.1);
}
.lhps-btn-go {
  padding: 11px 22px; background: var(--c-ink); color: #fff;
  border: none; border-radius: var(--r-sm);
  font-family: var(--font-u); font-size: 13px; font-weight: 700;
  cursor: pointer; letter-spacing: .04em; transition: all .18s;
}
.lhps-btn-go:hover {
  background: var(--c-coral); transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(232,93,58,.35);
}

/* ═══════════════════════════════════════════════════════════════
   3. SYLLABLE BREAKDOWN CARD
═══════════════════════════════════════════════════════════════ */
.lhps-syl-section {
  background: var(--c-bg2); border: 1px solid var(--c-border);
  border-radius: var(--r-md); padding: 20px 24px;
}

/* Header label with a rule below it */
.lhps-syl-header {
  font-size: 10px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--c-ink4);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--c-border);
  margin-bottom: 0;    /* no margin — padding-top on tiles handles the gap */
}

/* Tile row — padding-top must clear the absolute STRESS badge (top:-26px + height~18px) */
.lhps-syl-tiles {
  display: flex; gap: 10px; flex-wrap: wrap;
  padding-top: 36px;       /* ← clears the STRESS badge above stressed tile */
  margin-bottom: 24px;
  align-items: flex-end;
}

.lhps-syl-tile {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
}

/* "STRESS" label floating above stressed tile */
.lhps-syl-tile.stressed::before {
  content: 'STRESS';
  position: absolute; top: -26px;
  font-family: var(--font-u);
  font-size: 8px; font-weight: 800; letter-spacing: .1em;
  color: var(--c-coral); background: var(--c-coral-l);
  padding: 2px 6px; border-radius: 4px;
  border: 1px solid rgba(232,93,58,.3);
  white-space: nowrap;
}

.lhps-syl-bubble {
  font-family: var(--font-d); font-size: 28px; font-weight: 600;
  padding: 10px 20px; background: #fff;
  border: 1.5px solid var(--c-border2); border-radius: 12px;
  color: var(--c-ink2); min-width: 54px; text-align: center; line-height: 1;
  box-shadow: var(--sh-sm); transition: all .3s var(--spring);
}

.lhps-syl-tile.stressed .lhps-syl-bubble {
  background: var(--c-coral); border-color: var(--c-coral); color: #fff;
  transform: scale(1.1) translateY(-4px);
  box-shadow: 0 8px 24px rgba(232,93,58,.3);
}

.lhps-syl-num {
  font-size: 10px; font-weight: 600; color: var(--c-ink4); letter-spacing: .05em;
}
.lhps-syl-tile.stressed .lhps-syl-num { color: var(--c-coral); }

/* Mouth guide cards grid — separated from tiles by margin-bottom on tiles */
.lhps-mouth-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}

.lhps-mouth-card {
  background: #fff; border: 1px solid var(--c-border);
  border-radius: var(--r-sm); padding: 12px 14px; transition: border-color .2s;
}
.lhps-mouth-card.is-stressed {
  border-color: rgba(232,93,58,.35); background: var(--c-coral-l);
}
.mc-syl {
  font-family: var(--font-d); font-size: 22px; font-weight: 600;
  color: var(--c-ink2); margin-bottom: 5px;
  display: flex; align-items: center; gap: 6px;
}
.mc-syl .s-badge {
  font-family: var(--font-u); font-size: 9px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  background: var(--c-coral); color: #fff;
  padding: 2px 7px; border-radius: 100px;
}
.mc-shape {
  font-family: var(--font-u); font-size: 11px; font-weight: 700;
  color: var(--c-teal); margin-bottom: 3px; letter-spacing: .02em;
}
.mc-desc {
  font-family: var(--font-u); font-size: 11px;
  color: var(--c-ink3); line-height: 1.5;
}

/* Stress tip bar below mouth cards */
.lhps-stress-tip {
  margin-top: 14px;
  background: var(--c-gold-l);
  border: 1px solid rgba(201,135,26,.25);
  border-left: 3px solid var(--c-gold);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: 11px 16px;
  font-size: 13px; color: var(--c-ink2); line-height: 1.5;
}
.lhps-stress-tip strong { color: var(--c-gold); }

/* ═══════════════════════════════════════════════════════════════
   4. RECORDER CARD
═══════════════════════════════════════════════════════════════ */
.lhps-recorder {
  display: flex; flex-direction: column; align-items: center;
}

/* Mic orb */
.lhps-orb-wrap {
  position: relative; width: 120px; height: 120px;
  margin: 6px auto 14px;
  display: flex; align-items: center; justify-content: center;
}

.lhps-orb-ring {
  position: absolute; inset: -10px; border-radius: 50%;
  border: 2px solid var(--c-coral); opacity: 0;
}
.lhps-orb-ring:nth-child(2) { animation-delay: .6s; }
.lhps-orb-ring:nth-child(3) { animation-delay: 1.2s; }
.recording .lhps-orb-ring { animation: expand 1.8s ease-out infinite; }

@keyframes expand {
  0%   { transform: scale(1);   opacity: .45; }
  100% { transform: scale(1.7); opacity: 0; }
}

.lhps-orb {
  width: 112px; height: 112px; border-radius: 50%;
  background: var(--c-surface);
  border: 2px solid var(--c-border2);
  box-shadow: var(--sh), inset 0 2px 4px rgba(255,255,255,.9);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 1;
  transition: all .25s var(--spring);
  outline: none;
}
.lhps-orb:hover {
  transform: scale(1.05);
  border-color: var(--c-coral);
  box-shadow: var(--sh-lg), 0 0 0 6px rgba(232,93,58,.08),
              inset 0 2px 4px rgba(255,255,255,.9);
}
.lhps-orb.recording {
  background: var(--c-coral); border-color: var(--c-coral);
  animation: orbpulse .9s ease infinite;
}
@keyframes orbpulse {
  0%, 100% { box-shadow: 0 0 0 6px rgba(232,93,58,.15), var(--sh-lg); }
  50%       { box-shadow: 0 0 0 16px rgba(232,93,58,.07), var(--sh-lg); }
}
.lhps-orb-icon { font-size: 36px; line-height: 1; transition: all .2s; }
.lhps-orb.recording .lhps-orb-icon { filter: brightness(10); }

/* Timer */
.lhps-timer {
  font-family: var(--font-m); font-size: 30px; font-weight: 300;
  letter-spacing: .06em; color: var(--c-ink3);
  text-align: center; transition: color .2s; margin-bottom: 4px;
}
.lhps-timer.recording { color: var(--c-coral); }

/* Status message */
.lhps-status {
  font-size: 13px; color: var(--c-ink4); text-align: center;
  min-height: 20px; margin-bottom: 16px; transition: all .2s;
}

/* Control buttons row */
.lhps-controls {
  display: flex; gap: 8px; justify-content: center;
  flex-wrap: wrap; width: 100%; margin-bottom: 22px;
}
.lhps-ctrl {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-u); font-size: 12px; font-weight: 600;
  padding: 9px 18px; border-radius: var(--r-sm);
  border: 1.5px solid var(--c-border2); background: #fff;
  color: var(--c-ink3); cursor: pointer; transition: all .18s;
}
.lhps-ctrl:disabled { opacity: .35; cursor: not-allowed; pointer-events: none; }
.lhps-ctrl:hover:not(:disabled) {
  border-color: var(--c-ink2); color: var(--c-ink);
  transform: translateY(-1px); box-shadow: var(--sh-sm);
}
.lhps-ctrl svg { width: 13px; height: 13px; flex-shrink: 0; }

/* Waveform comparison panels */
.lhps-wave-section { width: 100%; }

.lhps-wave-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.lhps-wave-box {
  background: var(--c-bg2); border: 1.5px solid var(--c-border);
  border-radius: var(--r-md); padding: 12px 16px; overflow: hidden;
}
.lhps-wave-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.lhps-wave-title {
  font-size: 10px; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase;
}
.wt-ref { color: var(--c-teal); }
.wt-stu { color: var(--c-coral); }

.lhps-wave-pp {
  width: 26px; height: 26px; border-radius: 50%;
  border: 1.5px solid var(--c-border2); background: #fff;
  color: var(--c-ink3); font-size: 10px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .15s;
}
.lhps-wave-pp:hover:not(:disabled) {
  border-color: var(--c-coral); color: var(--c-coral); background: var(--c-coral-l);
}
.lhps-wave-pp:disabled { opacity: .35; cursor: not-allowed; }

#lhps-waveform-ref, #lhps-waveform-student {
  min-height: 60px; border-radius: 6px; overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════
   5. FEEDBACK / RESULT CARD
═══════════════════════════════════════════════════════════════ */
.lhps-feedback-panel { display: none; }
.lhps-feedback-panel.visible {
  display: block;
  border-color: rgba(14,138,123,.25);
  box-shadow: var(--sh), 0 0 0 3px rgba(14,138,123,.08);
}

.lhps-score-strip {
  display: flex; align-items: center; gap: 20px;
  padding: 20px; background: var(--c-bg2);
  border-radius: var(--r-md); margin-bottom: 16px;
}

.lhps-score-donut {
  flex-shrink: 0; width: 80px; height: 80px; position: relative;
}
.lhps-score-donut svg {
  width: 100%; height: 100%; transform: rotate(-90deg);
}
.donut-bg {
  fill: none; stroke: var(--c-border2); stroke-width: 6;
}
.donut-fill {
  fill: none; stroke-width: 6; stroke-linecap: round;
  stroke: var(--c-teal);
  stroke-dasharray: 175; stroke-dashoffset: 175;
  transition: stroke-dashoffset 1s var(--spring), stroke .3s;
}
.donut-inner {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.donut-num {
  font-family: var(--font-u); font-size: 22px; font-weight: 800;
  color: var(--c-ink); line-height: 1;
}
.donut-pct {
  font-size: 9px; font-weight: 600; color: var(--c-ink4); letter-spacing: .04em;
}

.score-text { flex: 1; min-width: 0; }
.score-grade {
  font-family: var(--font-d); font-size: 32px; font-weight: 700;
  color: var(--c-ink); line-height: 1;
}
.score-lbl { font-size: 12px; color: var(--c-ink3); margin-top: 4px; }

/* Feedback message list */
.lhps-feedback-msgs { display: flex; flex-direction: column; gap: 8px; }

.lhps-fmsg {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 16px; border-radius: var(--r-sm); border: 1px solid;
  font-size: 13px; line-height: 1.55;
  animation: slideIn .3s var(--ease) both;
}
@keyframes slideIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fmsg-ico { flex-shrink: 0; font-size: 15px; margin-top: 1px; }

.fmsg-success { background: var(--c-green-l); border-color: rgba(26,122,74,.2);    color: var(--c-green); }
.fmsg-warning { background: var(--c-gold-l);  border-color: rgba(201,135,26,.25);  color: #8a5c0a; }
.fmsg-error   { background: var(--c-coral-l); border-color: rgba(232,93,58,.25);   color: #a33a1e; }
.fmsg-info    { background: var(--c-sky-l);   border-color: rgba(37,99,235,.15);   color: var(--c-sky); }
.fmsg-ipa     {
  background: var(--c-teal-l); border-color: rgba(14,138,123,.2); color: var(--c-teal);
  font-family: var(--font-m); font-size: 14px;
}
.fmsg-tip {
  background: #fff; border-color: rgba(201,135,26,.3);
  border-left: 3px solid var(--c-gold); color: var(--c-ink2); font-style: italic;
}

.lhps-try-again {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; margin-top: 12px; padding: 12px;
  background: var(--c-ink); color: #fff; border: none;
  border-radius: var(--r-sm);
  font-family: var(--font-u); font-size: 14px; font-weight: 600;
  cursor: pointer; transition: all .2s;
}
.lhps-try-again:hover {
  background: var(--c-coral); transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(232,93,58,.3);
}

/* ═══════════════════════════════════════════════════════════════
   6. PHONETICS TIP (dark card)
═══════════════════════════════════════════════════════════════ */
.lhps-pro-tip {
  background: linear-gradient(140deg, #1a1510 0%, #2d261a 100%);
  border-radius: var(--r-lg); padding: 28px 30px;
  color: #fff; position: relative; overflow: hidden;
}
.lhps-pro-tip::before {
  content: '"';
  position: absolute; font-family: var(--font-d);
  font-size: 190px; line-height: 1;
  top: -20px; right: 16px; color: #fff; opacity: .06; pointer-events: none;
}
.pro-tip-label {
  font-size: 10px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--c-gold); margin-bottom: 12px;
}
.pro-tip-text {
  font-family: var(--font-d); font-size: 19px; font-weight: 400;
  font-style: italic; line-height: 1.55; color: rgba(255,255,255,.88);
}
.pro-tip-attr { font-size: 12px; color: rgba(255,255,255,.38); margin-top: 10px; }

/* ═══════════════════════════════════════════════════════════════
   ANIMATIONS
═══════════════════════════════════════════════════════════════ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.1); }
}
@keyframes spin { to { transform: rotate(360deg); } }

.lhps-spinner {
  width: 20px; height: 20px;
  border: 2px solid var(--c-border2);
  border-top-color: var(--c-coral);
  border-radius: 50%; animation: spin .7s linear infinite;
  display: inline-block;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════════ */
@media (max-width: 540px) {
  .lhps-wave-cols { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .lhps-card      { padding: 20px; }
  .lhps-word-card { padding: 20px; }
  .lhps-word      { font-size: 52px; }
  .lhps-orb       { width: 90px; height: 90px; }
  .lhps-orb-icon  { font-size: 28px; }
  .lhps-orb-wrap  { width: 100px; height: 100px; }
}

@media (max-width: 600px) {
  .lhps-intro-card    { padding: 22px; }
  .lhps-intro-icon    { font-size: 40px; }
  .lhps-intro-heading { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* Accessibility */
.lhps-sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ═══════════════════════════════════════════════════════════════
   LANGUAGE SELECTOR  (v3.0)
═══════════════════════════════════════════════════════════════ */
.lhps-lang-row {
  margin-bottom: 16px;
}

.lhps-lang-label {
  font-size: 10px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--c-ink4); margin-bottom: 10px;
}

.lhps-lang-tabs {
  display: flex; flex-wrap: wrap; gap: 6px;
}

.lhps-lang-tab {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-u); font-size: 12px; font-weight: 600;
  padding: 6px 14px; border-radius: 100px;
  border: 1.5px solid var(--c-border2);
  background: transparent; color: var(--c-ink3);
  cursor: pointer; transition: all .18s;
  white-space: nowrap;
}

.lhps-lang-tab:hover {
  border-color: var(--c-teal); color: var(--c-teal);
  background: var(--c-teal-l);
}

.lhps-lang-tab.active {
  background: var(--c-teal); border-color: var(--c-teal); color: #fff;
}

.lhps-lang-flag { font-size: 14px; line-height: 1; }
.lhps-lang-name { line-height: 1; }

/* ═══════════════════════════════════════════════════════════════
   SYNONYM & EXAMPLE CARD  (v3.0)
═══════════════════════════════════════════════════════════════ */
.lhps-word-info-card {
  border-left: 3px solid var(--c-gold);
}

.lhps-info-block {
  margin-bottom: 0;
}

.lhps-info-block + .lhps-info-block-sentence {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--c-border);
}

.lhps-info-label {
  display: flex; align-items: center; gap: 7px;
  font-size: 10px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--c-ink4); margin-bottom: 10px;
}

.lhps-info-label svg {
  width: 13px; height: 13px; flex-shrink: 0;
  color: var(--c-gold);
}

/* Synonym tags */
.lhps-synonyms-list {
  display: flex; flex-wrap: wrap; gap: 7px;
  min-height: 28px;
}

.lhps-synonym-tag {
  display: inline-block;
  font-family: var(--font-u); font-size: 13px; font-weight: 500;
  padding: 5px 14px; border-radius: 100px;
  background: var(--c-gold-l);
  border: 1px solid rgba(201,135,26,.25);
  color: var(--c-gold);
  transition: all .15s;
}

.lhps-synonym-tag:hover {
  background: var(--c-gold);
  color: #fff;
  border-color: var(--c-gold);
}

.lhps-synonym-loading {
  font-size: 12px; color: var(--c-ink4); font-style: italic;
}

/* No-synonyms state */
.lhps-no-synonyms {
  font-size: 13px; color: var(--c-ink4); font-style: italic;
}

/* Example sentence */
.lhps-example-text {
  font-family: var(--font-d);
  font-size: 19px; font-weight: 400; font-style: italic;
  line-height: 1.6;
  color: var(--c-ink2);
  padding: 14px 18px;
  background: var(--c-bg2);
  border-radius: var(--r-sm);
  border-left: 3px solid var(--c-gold);
  min-height: 52px;
}

.lhps-example-text em {
  font-size: 13px; color: var(--c-ink4); font-style: italic;
  font-family: var(--font-u);
}

/* RTL support for Arabic */
.lhps-wrap[dir="rtl"] .lhps-word,
.lhps-wrap[dir="rtl"] .lhps-example-text,
.lhps-wrap[dir="rtl"] .lhps-ipa {
  direction: rtl; text-align: right;
}

/* ═══════════════════════════════════════════════════════════════
   LANG CURRENT INDICATOR in word section-label
═══════════════════════════════════════════════════════════════ */
.lhps-current-lang-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600;
  padding: 2px 10px; border-radius: 100px;
  background: var(--c-teal-l);
  border: 1px solid rgba(14,138,123,.2);
  color: var(--c-teal);
  margin-left: auto;
}

/* ═══════════════════════════════════════════════════════════════
   MEANING TEXT  (v4.0)
═══════════════════════════════════════════════════════════════ */
.lhps-meaning-text {
  font-family: var(--font-u);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--c-ink2);
  padding: 12px 16px;
  background: var(--c-sky-l);
  border: 1px solid rgba(37,99,235,.15);
  border-left: 3px solid var(--c-sky);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  min-height: 44px;
}

.lhps-info-block-sep {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--c-border);
}