/* TKD extras & utilities */
.row{display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.grid{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.tile{
  background:#232b3f; border:1px solid #39425c; border-radius:12px; padding:12px;
}
.badge{display:inline-block; padding:.15rem .5rem; border:1px solid #39425c; border-radius:999px; opacity:.85}
.info{
  background:#232b3f; border:1px solid #39425c; color:#f4f6fa;
  padding:12px 14px; border-radius:12px; margin:12px 0;
}
.info-learn{border-left:4px solid #5ad1ff}
.quiz-q{margin:10px 0; padding:10px; border:1px dashed #39425c; border-radius:10px}
.gloss { border-bottom:1px dotted #7fb0ff; cursor:help }
.lex-pop { position:absolute; z-index:1000; max-width:320px;
  background:#0f1830; border:1px solid #22314f; color:#e9eef9;
  border-radius:10px; padding:.6rem .7rem; box-shadow:0 10px 30px rgba(0,0,0,.35) }
.lex-pop h4{margin:.1rem 0 .3rem 0; font-size:1rem}
.lex-pop small{color:#bfc7db}
<style>
  .gloss { border-bottom:1px dotted #7fb0ff; cursor:help }
  .lex-pop {
    position:absolute; z-index: 4000; max-width: 320px;
    background:#0f1830; border:1px solid #22314f; color:#e9eef9;
    border-radius:10px; padding:.6rem .7rem;
    box-shadow:0 10px 30px rgba(0,0,0,.35)
  }
  .lex-pop h4{margin:.1rem 0 .35rem 0; font-size:1rem}
  .lex-pop small{color:#bfc7db}
  .lex-actions{margin-top:.45rem; display:flex; gap:.5rem}
  .lex-btn{border:1px solid #2a395e; background:#122244; color:#e9eef9;
    border-radius:8px; padding:.32rem .6rem; font-size:.9rem; cursor:pointer}
</style>