:root { --bg:#0f172a; --card:#1e293b; --text:#e2e8f0; --accent:#38bdf8; --ok:#22c55e; }
*{box-sizing:border-box}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin:0;background:var(--bg);color:var(--text)}
header{padding:1.2rem;border-bottom:1px solid #334155;display:flex;gap:.75rem;align-items:center}
h1{margin:0;font-size:1.5rem}
header p{margin:.25rem 0 0;opacity:.85}
.install{margin-left:auto;background:#0b1220;border:1px solid #334155;padding:.5rem .75rem;border-radius:.4rem;color:var(--text)}
.hidden{display:none}
.tabs{display:flex;gap:.5rem;padding:.75rem 1rem;border-bottom:1px solid #334155}
.tab-btn{background:#0b1220;color:var(--text);border:1px solid #334155;padding:.5rem .75rem;border-radius:.4rem;cursor:pointer}
.tab-btn.active{border-color:var(--accent);box-shadow:0 0 0 2px rgba(56,189,248,.25) inset}
main{padding:1rem;max-width:960px;margin:0 auto}
.tab-content{display:none}
.tab-content.active{display:block}
.controls{display:flex;gap:.75rem;align-items:center;margin-bottom:.75rem}
input[type=search]{flex:1;padding:.6rem .75rem;border-radius:.4rem;border:1px solid #334155;background:#0b1220;color:var(--text)}
.toggle{display:inline-flex;gap:.5rem;align-items:center}
.list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:.75rem}
.list li{background:var(--card);padding:.75rem;border-radius:.5rem;border:1px solid #334155}
.common{font-weight:600}
.scientific{font-style:italic;opacity:.95}
.meta{font-size:.85rem;opacity:.85}
.meaning,.phonetic{font-size:.9rem;opacity:.9}
.card{background:var(--card);border:1px solid #334155;border-radius:.75rem;padding:1rem;min-height:180px;display:grid;place-items:center;gap:.25rem;margin-bottom:.75rem}
.face{text-align:center;font-size:1.25rem}
.card-controls{display:flex;gap:.5rem}
button{background:#0b1220;color:var(--text);border:1px solid #334155;padding:.5rem .75rem;border-radius:.4rem;cursor:pointer}
button#gotIt{border-color:var(--ok)}
.progress{margin-top:.5rem;font-size:.9rem}
.quiz-controls{display:flex;gap:.75rem;align-items:center;margin-bottom:.75rem}
.quiz-area{background:var(--card);border:1px solid #334155;border-radius:.75rem;padding:1rem}
.question{font-size:1.1rem;margin-bottom:.75rem}
.choices li{margin-bottom:.4rem}
.status{margin-top:.75rem;font-size:.95rem}
.correct{color:var(--ok)}
.incorrect{color:#ef4444}
footer{padding:1rem;text-align:center;opacity:.75}