:root{--bg:#f0f8ff;--card:#fff;--accent:#4CAF50;--danger:#f44336;--muted:#607D8B}
  body{font-family:Inter, Arial, sans-serif;background:var(--bg);margin:0;padding:18px;display:flex;flex-direction:column;align-items:center;min-height:100vh;color:#1b2b34}
  h1{margin:4px 0 12px;font-size:1.4rem}
  .controls{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
  select, button{padding:8px 10px;border-radius:8px;border:1px solid #ddd;font-size:14px;cursor:pointer;background:white}
  select { font-weight:600 }
  select.category{border-color:#42a5f5;background:#e7f3ff;color:#0b4f7a}
  select.difficulty{border-color:var(--danger);background:#fff0f0;color:#7a1a1a}
  .main{width:100%;max-width:560px}
  .card{background:var(--card);border-radius:12px;box-shadow:0 8px 24px rgba(14,40,55,0.06);padding:14px;box-sizing:border-box}
  .image-wrap{height:220px;display:flex;align-items:center;justify-content:center;margin-bottom:10px;border-radius:10px;overflow:hidden;background:#f7fbff;cursor:pointer}
  img.card-img{max-width:100%;max-height:100%;object-fit:contain;display:block}
  .card-fallback{width:180px;height:150px;display:flex;align-items:center;justify-content:center;background:#dff3ff;border-radius:10px;color:#0b6fa0;font-weight:700;font-size:1.2rem;border:2px solid #8fddff}
  .word{font-size:1.4rem;margin:6px 0 0}
  .difficulty{color:#666;margin-top:4px;font-size:13px}
  .stars{display:flex;gap:4px;justify-content:center;margin:10px 0}
  .star{font-size:24px;color:#eee}
  .star.filled{color:var(--accent);text-shadow:0 1px 8px rgba(76,175,80,0.25)}
  .actions{display:flex;gap:8px;justify-content:center;margin-top:12px;flex-wrap:wrap}
  button.action{min-width:110px;color:#fff;border:none;border-radius:8px;padding:10px 12px;font-weight:600}
  button#learnedBtn{background:var(--accent)} button#resetBtn{background:var(--muted)} button#nextBtn{background:var(--danger)}
  .overlay-msg, .overlay-congrats{position:fixed;left:50%;transform:translateX(-50%);z-index:2200;padding:16px 20px;background:white;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,0.12);max-width:86%;text-align:center;display:none}
  .overlay-msg{top:46%;border:2px solid var(--accent);color:#2e7d32} .overlay-congrats{top:36%;border:2px solid #2196F3;color:#0e5}
  .overlay-msg a{color:#0b60e6;text-decoration:underline}
  .fly{position:fixed;z-index:2300;pointer-events:none;padding:8px 18px;border-radius:12px;border:2px solid var(--accent);background:white;font-weight:700;color:var(--accent);box-shadow:0 6px 18px rgba(0,0,0,.12);transition:transform 1.6s linear,left 1.6s linear, top 1.6s linear, opacity 1.6s linear}
  .panel{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2400;background:white;padding:12px;border-radius:10px;box-shadow:0 8px 30px rgba(0,0,0,.12);width:92%;max-width:420px;max-height:72vh;overflow:auto;display:none}
  .panel h3{margin:4px 0 12px;color:var(--accent);text-align:center} .learned-item{display:flex;justify-content:space-between;padding:8px;border-bottom:1px solid #eee;align-items:center}
  .remove{background:#f44336;color:white;border:none;border-radius:6px;padding:6px 8px;cursor:pointer}
  .small-muted{font-size:13px;color:#666;margin-top:6px;text-align:center;cursor:pointer}
  .small-muted:focus{outline:2px solid #90caf9; border-radius:4px}
  .footer-note{margin-top:12px;font-size:13px;color:#666}