/* English 3000 - Kelime Öğren */
:root { --el-bg: #0f172a; --el-card: #1e293b; --el-accent: #38bdf8; --el-ok: #22c55e; --el-no: #ef4444; }
body.el-dark { background: var(--el-bg); color: #e2e8f0; }
body.el-dark .navbar { background: #020617 !important; }
.el-wrap { max-width: 880px; margin: 0 auto; }
.el-card { background: var(--el-card); border-radius: 20px; padding: 28px 28px 20px; position: relative; box-shadow: 0 20px 60px rgba(0,0,0,.35); transition: box-shadow .3s; min-height: 420px; }
.el-card.flash-ok { box-shadow: 0 0 0 4px var(--el-ok), 0 20px 60px rgba(0,0,0,.35); }
.el-card.flash-no { box-shadow: 0 0 0 4px var(--el-no), 0 20px 60px rgba(0,0,0,.35); }
.el-word { font-size: clamp(2.2rem, 7vw, 3.6rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.05; }
.el-ipa { color: #94a3b8; font-size: 1.15rem; font-family: "Charis SIL", "Doulos SIL", Georgia, serif; }
.el-progress { height: 6px; background: #334155; border-radius: 99px; overflow: hidden; }
.el-progress > div { height: 100%; background: var(--el-accent); width: 0; transition: width .1s linear; }
.el-ring { --p: 0; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-variant-numeric: tabular-nums;
  background: conic-gradient(var(--el-accent) calc(var(--p) * 1%), #334155 0); position: relative; }
.el-ring::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--el-card); }
.el-ring { color: #e2e8f0; } .el-ring > span { position: relative; }
.meaning-box { transition: filter .25s, opacity .25s; }
.meaning-box.hidden { filter: blur(10px); opacity: .35; pointer-events: none; user-select: none; }
.el-meaning { font-size: 1.6rem; font-weight: 700; color: #fbbf24; }
.el-example { font-size: 1.1rem; color: #cbd5e1; }
.el-example mark { background: rgba(56,189,248,.25); color: #e0f2fe; padding: 0 .15em; border-radius: 4px; }
.el-meta dt { color: #94a3b8; font-weight: 500; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; }
.el-meta dd { margin-bottom: .5rem; }
.badge.level-A1 { background: #16a34a; } .badge.level-A2 { background: #0ea5e9; } .badge.level-B1 { background: #f59e0b; } .badge.level-B2 { background: #dc2626; } .badge.level-C1 { background: #7c3aed; } .badge.level-C2 { background: #be185d; }
.el-actions .btn { padding: .8rem 1.2rem; font-weight: 600; }
.btn-know { background: var(--el-ok); border: 0; color: #052e16; } .btn-know:hover { background: #4ade80; color: #052e16; }
.btn-dont { background: var(--el-no); border: 0; color: #fff; } .btn-dont:hover { background: #f87171; color: #fff; }
.stat { background: var(--el-card); border-radius: 14px; padding: 12px 14px; }
.stat .v { font-size: 1.35rem; font-weight: 800; line-height: 1.1; }
.stat .k { font-size: .75rem; color: #94a3b8; text-transform: uppercase; letter-spacing: .05em; }
.el-tip { border-left: 3px solid var(--el-accent); background: rgba(56,189,248,.08); border-radius: 0 10px 10px 0; padding: 10px 14px; color: #cbd5e1; font-size: .95rem; }
.quiz-opt { text-align: left; padding: .9rem 1rem; font-size: 1.05rem; }
.quiz-opt kbd { background: #334155; margin-right: .5rem; }
kbd.key { background: #334155; color: #e2e8f0; border-radius: 4px; padding: 1px 6px; font-size: .8rem; }
.offcanvas.el-dark-panel { background: #0b1220; color: #e2e8f0; }
.offcanvas.el-dark-panel .form-control, .offcanvas.el-dark-panel .form-select { background: #1e293b; color: #e2e8f0; border-color: #334155; }
@media (max-width: 576px) { .el-card { padding: 20px 16px 16px; min-height: 0; } .el-actions .btn { padding: .7rem .6rem; font-size: .95rem; } }