:root{--brand:#3b82f6;--brand-600:#2563eb;--text:#0f172a;--muted:#64748b;--ok:#16a34a;--warn:#d97706;--error:#dc2626}*{box-sizing:border-box}body{font-family:'Segoe UI',Arial,sans-serif;margin:10px;background:#f4f6fa;color:var(--text)}.wrap{max-width:1040px;margin:0 auto;background:#fff;border-radius:16px;padding:24px;box-shadow:0 12px 30px rgba(0,0,0,.08)}h1{margin:0 0 8px 0}.muted{color:var(--muted)}input{font-size:20px;padding:12px;width:100%;border-radius:10px;border:1px solid #94a3b8;outline:none;transition:.2s;text-align:center;background:transparent;color:inherit}input:focus{border-color:var(--brand);box-shadow:0 0 8px rgba(59,130,246,.25)}.row{display:grid;grid-template-columns:1fr;gap:20px}@media(min-width:900px){.row{grid-template-columns:1fr 1fr}}.left-panel{display: flex;flex-direction: column;justify-content: center;}.button-group{align-self:center;margin-top:12px;display:flex;gap:10px;flex-wrap:wrap}button{font-size:15px;padding:10px 14px;border-radius:10px;border:none;cursor:pointer;background:var(--brand);color:#fff;transition:.2s}button:hover{background:var(--brand-600);transform:translateY(-2px)}button.secondary{background:#111827}button:disabled{opacity:.6;cursor:not-allowed;transform:none}.panel{background:#fafbff;border:1px solid #e5e7eb;border-radius:12px;padding:16px}.result-block{margin-bottom:10px;font-size:16px}#speechResult{font-weight:600}.pron-diff{font-size:20px;line-height:2.1;margin-top:8px}.diff-legend{font-size:12px;color:#64748b;margin-top:6px}.diff-ok{background:#e6ffed;border-radius:6px;padding:0 2px}.diff-sub{background:#fff4e5;border-radius:6px;padding:0 2px;cursor:pointer}.diff-del{background:#fee2e2;border-radius:6px;padding:0 2px;cursor:pointer}.diff-ins{background:#e0f2fe;border-radius:6px;padding:0 2px;cursor:pointer}.part-onset-bad{border-bottom:2px dashed #ef4444}.part-vowel-bad{border-bottom:2px dashed #f59e0b}.part-coda-bad{border-bottom:2px dashed #8b5cf6}.syl{display:inline-flex;gap:2px;align-items:baseline}.jamo{display:inline-block;min-width:1ch;padding:0 1px;text-align:center}.rr-line{font-size:15px;color:#334155;margin-top:6px}.rr-tag{font-weight:700;color:#0f172a}.focus{margin-top:12px;background:#fff;border:1px dashed #cbd5e1;border-radius:12px;padding:12px}.focus h3{margin:0 0 8px 0;font-size:16px}.focus .jamo-list{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.focus .jamo-pill{background:#f1f5f9;border-radius:999px;padding:4px 10px;font-size:14px}.focus .controls{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}.focus button{background:#0ea5e9}.focus button:hover{background:#0284c7}.focus .sub{font-size:12px;color:#475569;margin-top:4px}.diag{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;background:#0b1220;color:#e2e8f0;padding:8px;border-radius:10px;white-space:pre-wrap}

/* Rendu "cartes" pour tableaux Consonnes/Voyelles/Nombres */
table{margin:20px auto;border-collapse:separate;border-spacing:10px}
td{background:#fff;border-radius:12px;padding:15px;width:80px;text-align:center;cursor:pointer;
   box-shadow:0 4px 10px rgba(0,0,0,.05);transition:.2s}
td:hover{transform:translateY(-4px);box-shadow:0 8px 20px rgba(0,0,0,.1);background:#f8fafc}
.ko{font-size:26px;font-weight:700;white-space:nowrap}
.roman{font-size:14px;color:#64748b}
table td div{pointer-events:none}

/* Optionnel: titre de section avec icône, comme avant */
.section-title{display:flex;align-items:center;justify-content:center;gap:12px;
  font-size:28px;font-weight:700;margin:50px 0 30px 0}
.section-title .icon{transition:transform .3s ease}
.section-title:hover .icon{transform:rotate(-10deg) scale(1.2)}


.block + .block { margin-top: 10px; }
.rr-sub { margin-top: 0px; font-size: 15px; color: #334155; }
.rr-sub .rr-tag { font-weight: 700; color: #0f172a; margin-right: 20px; }


/* ===== Ajustements lisibilité & espacement ===== */

/* La carte : un peu plus d'air à l'intérieur */
.meta-card {
  gap: 12px;                /* + d'espace entre les lignes */
  padding: 16px 18px;       /* tu peux monter à 18–20 si tu veux encore plus "aéré" */
}

/* Chaque ligne : meilleure respiration et alignement */
.meta-row {
  display: grid;            /* grid = colonnes stables */
  grid-template-columns: 180px 1fr; /* label fixe | valeur fluide */
  align-items: center;
  gap: 10px 14px;           /* (row-gap, col-gap) */
  line-height: 1.5;         /* lisibilité des valeurs */
}

/* L'étiquette (chip) : laisse la place à l'icône + hauteur de ligne */
.meta-k {
  position: relative;
  padding-left: 30px;       /* espace pour l’icône */
  line-height: 1.3;         /* évite l'écrasement vertical */
}

/* Valeur : taille lisible + wrap propre */
.meta-v {
  font-size: 16px;
  font-weight: 600;
  color: #334155;
  line-height: 1.5;
  word-break: break-word;   /* évite de déborder avec de longs textes */
}

/* Ajoute un léger espace entre les lignes (en plus du gap) */
.meta-row:not(:last-child) {
  padding-bottom: 4px;
  border-bottom: 1px dashed #e5e7eb;   /* option : repère visuel subtil */
}

/* ===== Icônes : placées confortablement ===== */
.meta-icon-rr::before,
.meta-icon-cat::before,
.meta-icon-tr::before {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-48%);         /* léger offset visuel plus agréable qu'un -50% strict */
  font-size: 16px;
  opacity: .95;
}

/* Icône par label */
.meta-icon-rr::before  { content: "🔤"; }
.meta-icon-cat::before { content: "📂"; }
.meta-icon-tr::before  { content: "🌍"; }

/* Option : si l'ensemble paraît encore "serré" dans le panneau, augmente la padding de la .panel */
.panel {
  padding: 18px; /* ou 20px si tu veux un vrai "card look" premium */
}


/* Améliore la lisibilité des sous-lignes RR sous Cible/Vous si tu les affiches dans le diff */
.rr-sub { margin-top: 2px; font-size: 15px; color: #334155; }
.rr-sub .rr-tag { font-weight: 700; color: #0f172a; margin-right: 6px; }

/* === Panneaux côté droit === */

.panel-info { background: #fafbff; }

/* Panneau full-width de correction */
.panel-correct {
  background: #ffffff;
  padding-top: 0px;
  margin-top: 10px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 8px 10px rgba(0,0,0,.06);
}

/* Titre du panel correction */
.panel-title{
  padding-top: 0px;
  font-size: 22px;      /* ↑ taille du texte */
  line-height: 1.25;
  font-weight: 900;     /* plus “fort” visuellement */
  letter-spacing: .2px; /* micro-typo élégante */
}

/* Si tu utilises un emoji / icône devant le libellé */
.panel-title::before{
  content: "🗣️";
  font-size: 32px;      /* agrandit l’icône/emoji */
  margin-right: 8px;
  vertical-align: -2px; /* aligne visuellement l’emoji */
}

/* Option : responsive (un peu moins grand sur mobile) */
@media (max-width: 480px){
  .panel-title{ font-size: 20px; }
  .panel-title::before{ font-size: 22px; }
}

/* Un peu d’air sur les blocs du panel correction */
.panel-correct .pron-diff { margin-top: 6px; }
.panel-correct .diff-legend { margin-top: 10px; }

/* Le bloc rouge en haut du panel correction */
#speechResult {
  margin-bottom: 8px;
}

/* Optionnel : limiter la largeur de la colonne droite (infos) pour éviter l’effet “trop long” en desktop large */
@media (min-width: 900px) {
  .row {
    grid-template-columns: 1fr 1fr; /* comme tu as déjà */
  }
}

/* ===== Tabs ===== */
.tabs {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid #e2e8f0;
  margin: 6px 0 10px;
}
.tab {
  appearance: none;
  background: #f1f5f9;
  color: #0f172a;
  border: 1px solid #e2e8f0;
  border-bottom: none;
  padding: 8px 14px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  font-weight: 700;
  cursor: pointer;
}
.tab:hover { background: #e9eef6; }
.tab.is-active {
  background: #ffffff;
  color: #0b5fff;
  border-color: #dbeafe;
  box-shadow: 0 -2px 8px rgba(0,0,0,.04);
}

/* ===== Panels ===== */
.tab-panel {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 8px 20px rgba(0,0,0,.04);
  margin-bottom: 16px;
}
.tab-panel[hidden] { display: none !important; }

/* Panneau infos (dans panel-text) inchangé, juste un rappel */
.panel-info { background: #fafbff; }


/* === Quiz UI === */
.quiz-toolbar {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 12px;
}
.quiz-toolbar label { font-size: 14px; color: #334155; display: flex; gap: 6px; align-items: center; }
.quiz-toolbar select, .quiz-toolbar input {
  padding: 6px 8px; border:1px solid #e2e8f0; border-radius:8px; background:#fff; font-size:14px;
}
#quizStart { padding:8px 12px; border-radius:10px; background:#0b5fff; color:#fff; border:none; cursor:pointer; }
#quizStart:hover { background:#0849cc; }

.quiz-area .card {
  background:#ffffff; border:1px solid #e2e8f0; border-radius:12px; padding:14px; box-shadow:0 8px 20px rgba(0,0,0,.04);
}
.quiz-q {
  font-size: 18px; font-weight: 800; color:#0f172a; margin-bottom: 10px; display:flex; align-items:center; gap:10px;
}
.quiz-tts {
  border:none; background:#eaf1ff; color:#0b5fff; border-radius:8px; padding:4px 8px; cursor:pointer; font-size:13px;
}
.quiz-choices { display:grid; gap:8px; margin: 8px 0 10px; }
.quiz-choice {
  background:#f8fafc; border:1px solid #e2e8f0; border-radius:10px; padding:10px; cursor:pointer; text-align:left;
}
.quiz-choice:hover{ background:#eef2ff; }
.quiz-choice.is-selected{ outline:2px solid #60a5fa; background:#eef6ff; }
.quiz-choice.is-correct{ border-color:#16a34a; background:#ecfdf5; }
.quiz-choice.is-wrong{ border-color:#ef4444; background:#fef2f2; }

.quiz-actions { display:flex; gap:8px; }
.quiz-actions button {
  padding:8px 12px; border-radius:8px; border:1px solid #e2e8f0; background:#fff; cursor:pointer;
}
.btn-primary { background:#0b5fff; color:#fff; border-color:#0b5fff; }
.btn-primary:hover{ background:#0849cc; }
.quiz-progress { font-size: 13px; color:#475569; margin-top:6px; }
.quiz-footer { margin-top:12px; font-weight:700; }

/* === Fix contraste texte des boutons de Quizz === */
.quiz-choice,
.quiz-actions button {
  color: #0f172a;              /* texte sombre lisible */
}

/* Assurer le contraste sur les états */
.quiz-choice:hover,
.quiz-choice.is-selected {
  color: #0f172a;
}
.quiz-choice.is-correct {
  color: #065f46;              /* option: un vert discret lisible sur fond vert pâle */
}
.quiz-choice.is-wrong {
  color: #991b1b;              /* option: un rouge discret lisible sur fond rouge pâle */
}

/* Le bouton "Suivant" (non .btn-primary) garde un texte sombre */
.quiz-actions button:not(.btn-primary) {
  background: #fff;            /* déjà défini chez toi, on confirme juste */
  border-color: #e2e8f0;
  color: #0f172a;
}

/* === Split Cible/Vous dans le panel de correction === */
.diff-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 6px;
}

.diff-col {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,.03);
}

.diff-title {
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 6px;
}

/* Aligne en 2 colonnes sur écrans larges */
@media (min-width: 900px){
  .diff-split {
    grid-template-columns: 1fr 1fr;
  }
}

/* === Expressions === */
.expr-toolbar {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  margin-bottom:12px;
}
.expr-toolbar label {
  font-size:14px;
  color:#334155;
  display:flex;
  gap:6px;
  align-items:center;
}
.expr-toolbar select,
.expr-toolbar input {
  padding:6px 8px;
  border:1px solid #e2e8f0;
  border-radius:8px;
  background:#fff;
  font-size:14px;
}
#exprGenerate {
  padding:8px 12px;
  border-radius:10px;
  background:#0b5fff;
  color:#fff;
  border:none;
  cursor:pointer;
}
#exprGenerate:hover { background:#0849cc; }

.expr-list {
  display:grid;
  gap:10px;
  grid-template-columns:1fr;
}
@media(min-width:900px){
  .expr-list { grid-template-columns:1fr 1fr; }
}

.expr-card {
  background:#ffffff;
  border:1px solid #e2e8f0;
  border-radius:12px;
  padding:12px;
  box-shadow:0 6px 16px rgba(0,0,0,.04);
}
.expr-ko {
  font-size:20px;
  font-weight:800;
  color:#0f172a;
  display:flex;
  align-items:center;
  gap:10px;
}
.expr-rr {
  font-size:14px;
  color:#334155;
  margin-top:2px;
}
.expr-fr {
  font-size:15px;
  color:#0f172a;
  margin-top:6px;
}
.expr-meta {
  font-size:12px;
  color:#64748b;
  margin-top:6px;
}
.expr-actions {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:8px;
}
.expr-actions button {
  padding:6px 10px;
  border-radius:8px;
  border:1px solid #e2e8f0;
  background:#fff;
  cursor:pointer;
  color:#0f172a;
}
.expr-actions .primary {
  background:#0b5fff;
  color:#fff;
  border-color:#0b5fff;
}
.expr-actions .primary:hover {
  background:#0849cc;
}

/* === Traduction : layout ergonomique === */

/* Barre haute : Sens */
.trad-toolbar{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:10px; 
}
.trad-toolbar label{
  display:flex; gap:6px; align-items:center; font-size:14px; color:#334155;
}
.trad-toolbar select{
  padding:6px 8px; border:1px solid #e2e8f0; border-radius:8px; background:#fff; font-size:14px;
}

/* Grille 2 colonnes */
.trad-io{
  display:grid; gap:12px; grid-template-columns:1fr;
}
@media(min-width:900px){
  .trad-io{ grid-template-columns:1fr 1fr; }
}

.trad-col .card{
  background:#fff; border:1px solid #e2e8f0; border-radius:12px; padding:12px;
  box-shadow:0 6px 16px rgba(0,0,0,.04);
}

/* Source textarea */
#tradSrc{
  width:100%; border:1px solid #e2e8f0; border-radius:10px; padding:10px; font-size:16px;
  background:#fff; color:#0f172a; resize:vertical;
}

/* Résultat */
.trad-out{
  min-height:84px; white-space:pre-wrap; word-break:break-word; font-size:16px; color:#0f172a;
}

/* Boutons sous le champ source */
.trad-row-actions-left{
  margin-top:8px; display:flex; gap:8px; flex-wrap:wrap; width:100%; justify-content: center;
}

/* Boutons à droite (résultat) */
.trad-actions-right{
  margin-top:8px; display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-start;
}

/* Bouton Traduire centré */
.trad-run-center{
  display:flex; justify-content:center; margin-top:10px;
}

/* Styles de boutons cohérents */
.btn-primary{
  padding:8px 12px; border-radius:10px; background:#0b5fff; color:#fff; border:none; cursor:pointer;
}
.btn-primary:hover{ background:#0849cc; }

.btn-secondary{
  padding:8px 12px; border-radius:10px; background:#eaf1ff; color:#0b5fff; border:1px solid #dbeafe; cursor:pointer;
}
.btn-secondary:hover{ background:#dbeafe; }


/* === Accueil / Présentation === */
.home-card{
  background:#ffffff;
  border:1px solid #e2e8f0;
  border-radius:12px;
  padding:18px;
  box-shadow:0 8px 20px rgba(0,0,0,.04);
  max-width:900px;
  margin: 0 auto;
}
.home-card h2{
  margin: 0 0 8px 0;
  font-size: 24px;
  font-weight: 900;
}
.home-card p{
  font-size:16px; color:#0f172a; line-height:1.6;
}
.home-notice{
  margin:12px 0;
  padding:10px 12px;
  background:#fff7ed;           /* orange-50 */
  border:1px solid #fed7aa;      /* orange-200 */
  color:#7c2d12;                 /* orange-900 */
  border-radius:10px;
  font-size:14px;
}
.home-list{
  margin:12px 0;
  padding-left:18px;
  color:#0f172a;
}
.home-list li{
  margin:5px 0;
}
.home-actions{
  margin-top:14px;
  display:flex;
  gap:10px;
  justify-content:center;
}

/* ==== Modal feedback ==== */
.fb-modal[hidden]{ display:none !important; }
.fb-modal{
  position:fixed; inset:0; background:rgba(15,23,42,.35);
  display:flex; align-items:center; justify-content:center; z-index:9999;
}
.fb-dialog{
  width:min(680px, 92vw); background:#fff; border:1px solid #e2e8f0; border-radius:12px;
  box-shadow:0 12px 28px rgba(0,0,0,.15); overflow:hidden;
}
.fb-header{ display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 14px; border-bottom:1px solid #e2e8f0; background:#fafbff;
}
.fb-header h3{ margin:0; font-size:18px; font-weight:900; }
.fb-close{ background:transparent; border:none; font-size:18px; cursor:pointer; color:#64748b; }
.fb-close:hover{ color:#0f172a; }
.fb-body{ padding:12px 14px; display:grid; gap:10px; }
.fb-label{ display:grid; gap:6px; font-size:14px; color:#334155; }
.fb-label input, .fb-label textarea{
  padding:10px; border:1px solid #e2e8f0; border-radius:10px; font-size:15px; outline:none;
}
.fb-label input:focus, .fb-label textarea:focus{ border-color:#0b5fff; box-shadow:0 0 0 2px #e2e8f0; }
.fb-footer{ display:flex; align-items:center; gap:10px; justify-content:space-between; border-top:1px solid #e2e8f0; padding:10px 14px; }
.fb-info{ font-size:13px; color:#475569; }

/* Rendre évident que les cases Hangeul/Nombres sont cliquables */
table td {
  cursor: pointer; /* déjà présent mais on renforce */
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  position: relative;
}

table td:hover {
  background: #dbeafe !important; /* bleu clair */
  box-shadow: 0 0 0 3px #bfdbfe;   /* halo bleu */
  transform: translateY(-3px);
}

/* Indicateur visuel de "clic possible" */
td::after {
  content: "🔊";
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 15px;
  opacity: 0.0;
  transition: opacity .2s ease;
  pointer-events: none;
}

td:hover::after {
  opacity: 0.9;
}


@keyframes pulseHint {
  0%   { box-shadow: 0 0 0 0 rgba(59,130,246,0.5); }
  70%  { box-shadow: 0 0 0 10px rgba(59,130,246,0); }
  100% { box-shadow: 0 0 0 0 rgba(59,130,246,0); }
}

.pulse-hint {
  animation: pulseHint 1.6s ease-out 2; /* 2 pulses */
}

/* === En-tête de panel avec légende à droite === */
.panel-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin: 6px 0 10px;
}

.panel-header .section-title{
  margin:0;
}

/* La légende (à droite) */
.panel-hint{
  color:#334155;
  font-size:14px;
  background:#f1f5f9;           /* gris très clair */
  border:1px solid #e2e8f0;
  padding:6px 10px;
  border-radius:10px;
  max-width:72ch;               /* pour éviter les lignes trop longues */
}

/* Responsive : la légende passe sous le titre sur mobile */
@media (max-width: 640px){
  .panel-header{
    flex-direction:column;
    align-items:flex-start;
  }
  .panel-hint{
    width:100%;
  }
}

/* --- Mobile tabs: horizontal scroll + snap --- */
@media (max-width: 640px) {
  .tabs[role="tablist"] {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    display: flex;
    gap: 6px;
    padding: 0 8px;
    margin: 6px -12px 10px; /* mord dans les bords pour gagner de la place */
    scroll-snap-type: x mandatory;
    position: relative;
  }
  .tabs::after {
    /* petit dégradé pour indiquer qu’on peut défiler */
    content: "";
    position: sticky;
    right: -1px;
    width: 28px;
    height: 100%;
    pointer-events: none;
    align-self: stretch;
    background: linear-gradient(to left, rgba(244,246,250,1), rgba(244,246,250,0));
  }
  .tab[role="tab"] {
    scroll-snap-align: start;
    white-space: nowrap;       /* évite les retours à la ligne moches */
    padding: 10px 12px;        /* cibles tactiles confortables */
    font-size: 14px;
    line-height: 1.2;
  }
  /* Réduire un peu les rayons/bordures pour compacter */
  .tab {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
  }
}


/* Contenir les tableaux dans le panneau et permettre le défilement horizontal */
@media (max-width: 640px) {
  /* Les sections qui contiennent des tables : Hangeul et Nombres */
  #panel-hangeul,
  #panel-nombres {
    overflow-x: hidden; /* éviter les barres de scroll de la section entière */
  }

  /* Chaque table devient un bloc défilable horizontalement */
  #consonantsTable,
  #vowelsTable,
  #numbersNativeTable,
  #numbersSinoTable,
  #numbersLargeTable {
    display: block;               /* pour activer overflow sur un élément table */
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* inertie iOS */
    padding-bottom: 6px;          /* un peu d’air sous les cartes */
  }

  /* Compacter un peu l’intérieur des cartes pour gagner quelques px */
  #consonantsTable td,
  #vowelsTable td,
  #numbersNativeTable td,
  #numbersSinoTable td,
  #numbersLargeTable td {
    min-width: 64px;   /* largeur minimale par “carte” sur mobile */
    width: auto;       /* on ne force plus 80px */
    padding: 12px;     /* un peu moins de padding */
  }

  /* Réduire l’espacement global entre cellules pour limiter la largeur totale */
  #consonantsTable,
  #vowelsTable,
  #numbersNativeTable,
  #numbersSinoTable,
  #numbersLargeTable {
    border-spacing: 8px; /* au lieu de 10px */
  }
}