/* English Learning Engine — learner dashboard (v2.8.0); builds on tests.css tokens */
.elcd{max-width:1040px}
.elcd-hero{position:relative}
.elcd-logout{position:absolute;top:14px;right:18px;font-size:.85rem;font-weight:700;color:var(--c-ink-2)}
.elcd-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:0 0 18px}
.elcd-stat{display:flex;flex-direction:column;align-items:center;gap:2px;padding:14px 10px;border-radius:20px;background:#fff;border:2px solid var(--c-line);text-decoration:none!important;color:var(--c-ink);transition:transform .15s,box-shadow .15s}
.elcd-stat:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(20,48,63,.08)}
.elcd-stat .elct-ico{width:36px;height:36px}
.elcd-stat b{font-size:1.6rem;line-height:1.1;color:var(--c-brand-d)}
.elcd-stat span{font-size:.85rem;color:var(--c-ink-2);text-align:center}
.elcd-stat.is-hot{border-color:#ffb38a;background:#fff4ec}
.elcd-stat.is-hot b{color:#c2410c}
.elcd-tabs{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 8px;margin-bottom:14px;scrollbar-width:thin}
.elcd-tab{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;min-height:52px;padding:8px 18px;border-radius:999px;border:2px solid var(--c-line);background:#fff;font-weight:800;color:var(--c-ink);text-decoration:none!important}
.elcd-tab .elct-ico{width:26px;height:26px}
.elcd-tab em{font-style:normal;font-size:.8rem;background:rgba(0,0,0,.07);border-radius:999px;padding:0 8px}
.elcd-tab.is-active{background:var(--c-brand);border-color:var(--c-brand);color:#fff}
.elcd-tab.is-active em{background:rgba(255,255,255,.28)}
.elcd-tab.has-due:not(.is-active) em{background:#ff7a59;color:#fff}
.elcd-panel{background:#fff;border:2px solid var(--c-line);border-radius:24px;padding:20px}
.elcd-section+.elcd-section{margin-top:24px}
.elcd-title{display:flex;align-items:center;gap:8px;margin:0 0 14px!important}
.elcd-title .elct-ico{width:32px;height:32px}
.elcd-big-ico{width:72px;height:72px;flex:0 0 auto}

/* filters + toolbar */
.elcd-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.elcd-chip{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:6px 14px;border-radius:999px;border:2px solid var(--c-line);background:#fff;font-weight:800;font-size:.92rem;color:var(--c-ink);text-decoration:none!important}
.elcd-chip em{font-style:normal;font-size:.78rem;background:var(--c-soft);border-radius:999px;padding:0 8px}
.elcd-chip.is-active{border-color:var(--c-brand);background:var(--c-brand-l);color:var(--c-brand-d)}
.elcd-toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;padding:12px;border-radius:16px;background:var(--c-soft);margin-bottom:12px}
.elcd-toolbar label{display:flex;flex-direction:column;gap:2px;font-size:.78rem;font-weight:800;color:var(--c-ink-2)}
.elcd-toolbar input,.elcd-toolbar select,.elcd-flash-options select{font:inherit;font-family:var(--font);font-size:.95rem;min-height:42px;padding:6px 10px;border:2px solid var(--c-line);border-radius:12px;background:#fff;color:var(--c-ink)}
.elcd-search{flex:1 1 220px}
.elcd-search input{width:100%}
.elcd-range{margin:4px 0 10px;font-size:.9rem}

/* word cards */
.elcd-wordgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.elcd-word{display:grid;grid-template-columns:64px 1fr;grid-template-rows:1fr auto;gap:6px 12px;padding:14px;border:2px solid var(--c-line);border-radius:18px;background:#fff;transition:opacity .25s,transform .25s}
.elcd-word.is-due{border-color:#ffc9ad;background:#fffaf6}
.elcd-word.is-known{border-color:#bfe8cf}
.elcd-word.is-removing{opacity:0;transform:scale(.95)}
.elcd-word-pic{grid-row:1 / span 2;width:64px;height:64px;border-radius:16px;background:var(--c-soft);display:grid;place-items:center;overflow:hidden}
.elcd-word-pic img{width:52px;height:52px;object-fit:contain}
.elcd-word-pic span{font-size:1.8rem;font-weight:900;color:var(--c-brand)}
.elcd-word-main{min-width:0}
.elcd-word-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.elcd-w{font-size:1.2rem}
.elcd-ipa{color:var(--c-ink-2);font-size:.9rem}
.elcd-say{width:34px;height:34px}
.elcd-say img{width:20px;height:20px}
.elcd-vi{margin:.2em 0;font-weight:800;color:#0b5a70}
.elcd-vi:empty,.elcd-en:empty{display:none}
.elcd-en{margin:.2em 0;font-size:.92rem;color:var(--c-ink-2)}
.elcd-ctx{margin:.3em 0;font-style:italic;font-size:.9rem;color:var(--c-ink-2)}
.elcd-note{margin:.3em 0;background:#fff8e6;border-radius:8px;padding:3px 8px;font-size:.9rem;display:inline-block}
.elcd-note[hidden]{display:none}
.elcd-src{margin:.2em 0;font-size:.8rem;color:#6b7f8c}
.elcd-word-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:6px;font-size:.85rem;font-weight:700;color:var(--c-ink-2)}
.elcd-word.is-due .elcd-due{color:#c2410c}
.elcd-dots{display:inline-flex;gap:4px}
.elcd-dots i{width:12px;height:12px;border-radius:50%;background:#e3eaee}
.elcd-dots i.on{background:linear-gradient(160deg,#ffd54a,#f0a500)}
.elcd-word-actions{grid-column:2;display:flex;flex-wrap:wrap;gap:6px}
.elcd-word-actions .elct-btn{min-height:34px;padding:4px 10px;font-size:.82rem}
.elcd-word-actions .elct-ico{width:18px;height:18px}
.elcd-editform{display:grid;gap:6px;margin-top:8px;padding:10px;border-radius:12px;background:var(--c-soft)}
.elcd-editform label{display:flex;flex-direction:column;font-size:.78rem;font-weight:800;color:var(--c-ink-2)}
.elcd-editform textarea{font:inherit;font-family:var(--font);font-size:.95rem;border:2px solid var(--c-line);border-radius:10px;padding:6px 8px;resize:vertical}
.elcd-editform .elct-row{margin:4px 0 0}

/* pager */
.elcd-pager{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:center;margin:18px 0 4px}
.elcd-page{display:inline-grid;place-items:center;min-width:40px;height:40px;border-radius:12px;border:2px solid var(--c-line);font-weight:800;text-decoration:none!important;color:var(--c-ink)}
.elcd-page.is-current{background:var(--c-brand);border-color:var(--c-brand);color:#fff}
.elcd-gap{color:var(--c-ink-2)}

/* books */
.elcd-books{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.elcd-book{display:flex;gap:14px;padding:14px;border:2px solid var(--c-line);border-radius:18px}
.elcd-cover{width:86px;flex:0 0 86px;aspect-ratio:3/4;border-radius:12px;overflow:hidden;background:var(--c-soft);display:grid;place-items:center}
.elcd-cover img{width:100%;height:100%;object-fit:cover}
.elcd-cover .elct-ico{width:48px;height:48px}
.elcd-book-body{flex:1;min-width:0}
.elcd-book h4{margin:.3em 0}
.elcd-bar{height:12px;border-radius:999px;background:#e8eff2;overflow:hidden;flex:1}
.elcd-bar span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--c-grass),var(--c-brand));transition:width .3s}
.elcd-book .elct-muted{font-size:.88rem;margin:.4em 0 .6em}

/* results */
.elcd-best{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px;margin-bottom:18px}
.elcd-best-card{display:flex;align-items:center;gap:12px;padding:12px;border:2px solid var(--c-line);border-radius:16px}
.elcd-best-card>.elct-ico{width:44px;height:44px}
.elcd-best-card>div{flex:1;display:flex;flex-direction:column;font-size:.92rem}
.elcd-results h4{margin:14px 0 8px}

/* flashcards */
.elcd-flash-intro{display:flex;gap:14px;align-items:center;margin-bottom:12px}
.elcd-due-big{font-size:1.3rem;font-weight:900;margin:0 0 4px}
.elcd-flash-options{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;padding:12px;border-radius:16px;background:var(--c-soft)}
.elcd-flash-options label{display:flex;flex-direction:column;gap:2px;font-size:.78rem;font-weight:800;color:var(--c-ink-2)}
.elcd-check{flex-direction:row!important;align-items:center;gap:6px!important;font-size:.92rem!important;min-height:42px}
.elcd-check input{width:20px;height:20px}
.elcd-flash[hidden],.elcd-flash-setup[hidden]{display:none}
.elcd-flash-top{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.elcd-flash-count{font-weight:800;color:var(--c-ink-2);white-space:nowrap}
.elcd-card{position:relative;max-width:560px;min-height:300px;margin:0 auto;padding:26px 22px;border-radius:28px;background:linear-gradient(160deg,#ffffff,#f3fbfd);border:3px solid #bfe3ee;box-shadow:0 14px 34px rgba(20,48,63,.10);display:grid;place-items:center;text-align:center;cursor:pointer;outline:none;animation:elcd-in .25s ease}
.elcd-card.is-flipped{cursor:default;border-color:#c9b8ff;background:linear-gradient(160deg,#ffffff,#f6f2ff);animation:elcd-flip .35s ease}
@keyframes elcd-in{from{opacity:0;transform:translateY(10px)}}
@keyframes elcd-flip{0%{transform:rotateY(0)}50%{transform:rotateY(90deg)}100%{transform:rotateY(0)}}
.elcd-face{display:flex;flex-direction:column;align-items:center;gap:8px}
.elcd-face[hidden]{display:none}
.elcd-flash-word{font-size:2.6rem;line-height:1.15;font-weight:900;color:var(--c-ink)}
.elcd-flash-wordline{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center}
.elcd-flash-wordline .elcd-flash-word{font-size:2rem}
.elcd-flash-img{width:120px;height:120px;object-fit:contain;background:#fff;border-radius:24px;padding:10px;border:2px solid var(--c-line)}
.elcd-flash-vi{font-size:1.35rem;font-weight:800;color:#0b5a70;margin:0}
.elcd-flash-en{color:var(--c-ink-2);margin:0}
.elcd-bigplay{width:110px;height:110px;border-radius:50%;border:0;background:var(--c-grape-l);cursor:pointer;display:grid;place-items:center}
.elcd-bigplay img{width:60px;height:60px}
.elcd-actions{max-width:560px;margin:16px auto 0;text-align:center}
.elcd-rate{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.elcd-rate[hidden]{display:none}
.elcd-rate-btn{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 6px;border-radius:16px;border:2px solid;background:#fff;cursor:pointer;font:inherit;font-family:var(--font)}
.elcd-rate-btn b{font-size:1rem}
.elcd-rate-btn small{font-size:.8rem;font-weight:700;opacity:.85}
.elcd-rate-btn kbd{position:absolute;top:4px;right:6px;font-size:.65rem;opacity:.5;font-family:inherit}
.r-again{border-color:#f3b8c2;color:#b42340}.r-again:hover{background:#fff0f3}
.r-hard{border-color:#fcd9a8;color:#9a5b00}.r-hard:hover{background:#fff7eb}
.r-good{border-color:#a8dcea;color:#07708c}.r-good:hover{background:#eefaff}
.r-easy{border-color:#a9e2bd;color:#15803d}.r-easy:hover{background:#ecfbf1}
.elcd-rate-btn:focus-visible{outline:3px solid var(--c-sun);outline-offset:2px}
.elcd-done{text-align:center;padding:10px}
.elcd-done-stats{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:10px 0}
.elcd-done-stats span{padding:6px 14px;border-radius:999px;border:2px solid;font-weight:800}

@media (max-width:640px){
  .elcd-stats{grid-template-columns:repeat(2,1fr)}
  .elcd-panel{padding:14px;border-radius:18px}
  .elcd-wordgrid,.elcd-books,.elcd-best{grid-template-columns:1fr}
  .elcd-word{grid-template-columns:52px 1fr}
  .elcd-word-pic{width:52px;height:52px}
  .elcd-word-pic img{width:42px;height:42px}
  .elcd-flash-word{font-size:2rem}
  .elcd-rate{grid-template-columns:repeat(2,1fr)}
  .elcd-logout{position:static;margin-left:auto}
  .elcd-hero{flex-wrap:wrap}
  .elcd-toolbar label{flex:1 1 40%}
}
@media (prefers-reduced-motion:reduce){.elcd-card{animation:none!important}}

/* v2.8 compact list view */
.elcd-listbar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.elcd-view{display:inline-flex;border:2px solid var(--c-line);border-radius:999px;overflow:hidden}
.elcd-view button{border:0;background:#fff;padding:6px 14px;font:inherit;font-family:var(--font);font-weight:800;font-size:.85rem;cursor:pointer;color:var(--c-ink)}
.elcd-view button[aria-pressed=true]{background:var(--c-brand);color:#fff}
.elcd-more{display:none;border:0;background:var(--c-soft);border-radius:8px;width:30px;height:30px;cursor:pointer;font-size:1rem;color:var(--c-ink-2)}
.elcd-wordgrid.is-list{grid-template-columns:1fr;gap:6px}
.elcd-wordgrid.is-list .elcd-word{grid-template-columns:44px minmax(0,1fr) auto;grid-template-rows:auto;align-items:center;padding:8px 10px;border-radius:14px;gap:4px 10px}
.elcd-wordgrid.is-list .elcd-word-pic{grid-row:auto;width:44px;height:44px;border-radius:12px}
.elcd-wordgrid.is-list .elcd-word-pic img{width:34px;height:34px}
.elcd-wordgrid.is-list .elcd-word-pic span{font-size:1.2rem}
.elcd-wordgrid.is-list .elcd-word-main{display:grid;grid-template-columns:220px minmax(0,1fr) auto;align-items:center;gap:2px 12px}
.elcd-wordgrid.is-list .elcd-word-head{flex-wrap:nowrap;min-width:0}
.elcd-wordgrid.is-list .elcd-w{font-size:1.05rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.elcd-wordgrid.is-list .elcd-ipa{display:none}
.elcd-wordgrid.is-list .elcd-more{display:inline-grid;place-items:center;order:3}
.elcd-wordgrid.is-list .elcd-say{width:30px;height:30px}
.elcd-wordgrid.is-list .elcd-vi{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.elcd-wordgrid.is-list .elcd-vi:empty{display:block}
.elcd-wordgrid.is-list .elcd-vi:empty::before{content:"—";color:#a7b4bc;font-weight:400}
.elcd-wordgrid.is-list .elcd-word-meta{margin:0;flex-wrap:nowrap;white-space:nowrap}
.elcd-wordgrid.is-list .elcd-en,.elcd-wordgrid.is-list .elcd-ctx,.elcd-wordgrid.is-list .elcd-note,.elcd-wordgrid.is-list .elcd-src{display:none}
.elcd-wordgrid.is-list .elcd-word-actions{grid-column:auto}
.elcd-wordgrid.is-list .elcd-word-actions .lbl{display:none}
.elcd-wordgrid.is-list .elcd-word-actions .elct-btn{min-height:34px;padding:4px 8px}
.elcd-wordgrid.is-list .elcd-word.is-open{grid-template-columns:44px minmax(0,1fr)}
.elcd-wordgrid.is-list .elcd-word.is-open .elcd-word-main{grid-template-columns:1fr}
.elcd-wordgrid.is-list .elcd-word.is-open .elcd-vi{white-space:normal}
.elcd-wordgrid.is-list .elcd-word.is-open .elcd-en,.elcd-wordgrid.is-list .elcd-word.is-open .elcd-ctx,.elcd-wordgrid.is-list .elcd-word.is-open .elcd-src{display:block}
.elcd-wordgrid.is-list .elcd-word.is-open .elcd-note:not([hidden]){display:inline-block}
.elcd-wordgrid.is-list .elcd-word.is-open .elcd-ipa{display:inline}
.elcd-wordgrid.is-list .elcd-word.is-open .elcd-word-actions{grid-column:2}
.elcd-wordgrid.is-list .elcd-word.is-open .elcd-word-actions .lbl{display:inline}
.elcd-wordgrid.is-list .elcd-word.is-open .elcd-more{transform:rotate(180deg)}
@media (max-width:640px){
  .elcd-wordgrid.is-list .elcd-word{grid-template-columns:40px minmax(0,1fr)}
  .elcd-wordgrid.is-list .elcd-word-main{grid-template-columns:1fr}
  .elcd-wordgrid.is-list .elcd-word-actions{grid-column:2}
}

.elcd [hidden]{display:none!important}
.elcd h4{font-size:1.05rem!important;margin:16px 0 8px!important}