/* ============================================================
   VOCABULARY SECTION STYLES
============================================================ */

/* ── Header ── */
.vocab-header { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:22px; gap:12px; flex-wrap:wrap; }
.vocab-title  { font-family:var(--font-display); font-size:1.75rem; font-weight:700; margin-bottom:8px; }
.vbadges { display:flex; gap:7px; flex-wrap:wrap; margin-top:4px; }
.vbadge  { display:inline-flex; align-items:center; gap:4px; padding:3px 10px; border-radius:99px; font-size:.70rem; font-weight:700; }
.vbadge.blue   { background:rgba(79,70,229,.12);  color:var(--accent-bright); }
.vbadge.mint   { background:rgba(6,182,212,.12);  color:var(--accent-alt);    }
.vbadge.muted  { background:var(--bg-hover);       color:var(--text-muted);    }
.vbadge.gold   { background:rgba(251,191,36,.12);  color:#FBBF24;              }

/* ── Sub-tabs (pill switcher) ── */
.vocab-tabs { display:flex; gap:4px; background:var(--bg-secondary); border:1px solid var(--border-subtle); border-radius:var(--r-lg); padding:5px; margin-bottom:24px; overflow-x:auto; scrollbar-width:none; }
.vocab-tabs::-webkit-scrollbar { display:none; }
.vtab { flex:1; min-width:80px; padding:8px 14px; border-radius:var(--r-md); font-size:.80rem; font-weight:600; cursor:pointer; border:none; background:transparent; color:var(--text-muted); transition:all var(--t-fast); white-space:nowrap; font-family:var(--font-body); }
.vtab:hover { color:var(--text-primary); background:var(--bg-hover); }
.vtab.active { background:var(--bg-card); color:var(--text-primary); box-shadow:var(--shadow-sm); }
.vtab-content { display:none; }
.vtab-content.active { display:block; animation:fadeUp var(--t-normal) ease; }

/* ── Search bar ── */
.search-wrap { position:relative; margin-bottom:14px; }
.search-wrap .si { position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--text-muted); pointer-events:none; font-size:.95rem; }
.vocab-search { width:100%; background:var(--bg-card); border:1px solid var(--border-default); border-radius:var(--r-md); padding:10px 14px 10px 38px; color:var(--text-primary); font-family:var(--font-body); font-size:.9rem; outline:none; transition:border-color var(--t-fast); }
.vocab-search:focus { border-color:var(--accent); }
.vocab-search::placeholder { color:var(--text-muted); }

/* ── Category stat cards ── */
.vocab-stat-cards {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px;
    margin-bottom: 18px;
}
@media (max-width: 700px) { .vocab-stat-cards { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 460px) { .vocab-stat-cards { grid-template-columns: repeat(3, 1fr); } }

.vocab-stat-card {
    background: var(--bg-card);
    border: 1.5px solid var(--border-subtle);
    border-radius: var(--r-lg);
    padding: 14px 8px 11px;
    text-align: center;
    cursor: pointer;
    transition: all var(--t-normal);
    user-select: none;
}
.vocab-stat-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.vocab-stat-card.active { border-color: var(--accent); background: rgba(79,70,229,.07); box-shadow: var(--shadow-sm); }

.vsc-num {
    font-size: 1.55rem;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 5px;
    font-family: var(--font-display);
    color: var(--text-primary);
    transition: color var(--t-fast);
}
.vsc-lbl {
    font-size: .60rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    line-height: 1.4;
}
.vsc-lock { font-size: .68rem; opacity: .7; }

/* Active color per category */
.vsc-all.active   .vsc-num { color: var(--accent-bright); }
.vsc-verbs.active .vsc-num { color: var(--accent-bright); }
.vsc-adj.active   .vsc-num { color: #A78BFA; }
.vsc-nouns.active .vsc-num { color: var(--accent-alt); }
.vsc-conn.active  .vsc-num { color: #FBBF24; }
.vsc-phr.active   .vsc-num { color: #FB923C; }
.vsc-idm.active   .vsc-num { color: #F472B6; }

/* Locked state for basic users */
.vocab-stat-card.vsc-locked { opacity: .52; }
.vocab-stat-card.vsc-locked:hover { border-color: var(--border-subtle); transform: none; box-shadow: none; }

/* ── Dropdown filter bar ── */
.vocab-filter-bar { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.vocab-filter-group { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 140px; }
.vocab-filter-label { font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.vocab-filter-select {
    width: 100%;
    background: var(--bg-card);
    border: 1px solid var(--border-default);
    border-radius: var(--r-md);
    padding: 9px 30px 9px 12px;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: .83rem;
    outline: none;
    cursor: pointer;
    transition: border-color var(--t-fast);
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236B7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px;
}
.vocab-filter-select:focus { border-color: var(--accent); }
.vocab-filter-select option, .vocab-filter-select optgroup { background: var(--bg-secondary); color: var(--text-primary); }
/* CEFR level badge on word card */
.wc-cefr { font-size:.55rem; font-weight:700; padding:1px 7px; border-radius:99px; background:rgba(79,70,229,.12); color:var(--accent); white-space:nowrap; letter-spacing:.03em; }
.wc-cefr.cefr-A1 { background:rgba(34,197,94,.13); color:#22C55E; }
.wc-cefr.cefr-A2 { background:rgba(16,185,129,.13); color:#10B981; }
.wc-cefr.cefr-B1 { background:rgba(79,70,229,.12); color:#6366F1; }
.wc-cefr.cefr-B2 { background:rgba(139,92,246,.13);  color:#A78BFA; }
.wc-cefr.cefr-C1 { background:rgba(249,115,22,.13);  color:#FB923C; }
.wc-cefr.cefr-C2 { background:rgba(236,72,153,.13);  color:#F472B6; }

.results-info { font-size:.75rem; color:var(--text-muted); margin-bottom:14px; }

/* ── Word grid ── */
.word-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(210px,1fr)); gap:13px; }

/* ── Word card ── */
.word-card { background:var(--bg-card); border:1px solid var(--border-subtle); border-radius:var(--r-lg); padding:16px 18px; cursor:pointer; transition:all var(--t-normal); }
.word-card:hover { border-color:var(--accent); transform:translateY(-2px); box-shadow:var(--shadow-md); }
.wc-top  { display:flex; align-items:flex-start; justify-content:space-between; gap:6px; margin-bottom:4px; }
.wc-word { font-family:var(--font-display); font-size:1.15rem; font-weight:700; color:var(--text-primary); line-height:1.2; flex:1; min-width:0; word-break:break-word; overflow-wrap:break-word; }
.wc-tts-btn { background:none; border:none; cursor:pointer; font-size:.92rem; padding:2px 4px; border-radius:6px; opacity:.45; transition:opacity .15s; line-height:1; flex-shrink:0; margin-top:2px; }
.wc-tts-btn:hover { opacity:1; background:rgba(255,255,255,.07); }
.wc-meta { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:5px; min-height:1.4em; }
.wc-cat  { font-size:.58rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; padding:2px 8px; border-radius:99px; flex-shrink:0; white-space:nowrap; }
.cat-verbs      { background:rgba(79,70,229,.12);  color:var(--accent-bright); }
.cat-adjectives { background:rgba(167,139,250,.15); color:#A78BFA; }
.cat-nouns      { background:rgba(6,182,212,.15);  color:var(--accent-alt); }
.cat-connectors { background:rgba(251,191,36,.15);  color:#FBBF24; }
.cat-phrasal    { background:rgba(249,115,22,.15);  color:#FB923C; }
.cat-idioms     { background:rgba(236,72,153,.15);  color:#F472B6; }
.wc-phonetic    { font-size:.72rem; color:var(--accent-bright); font-style:italic; }
.wc-translation { font-size:.85rem; color:var(--text-secondary); margin-bottom:10px; line-height:1.35; }
.wc-bottom { display:flex; align-items:center; justify-content:space-between; }
.stars { display:flex; gap:2px; }
.star  { font-size:.80rem; color:var(--border-default); transition:color var(--t-fast); }
.star.filled { color:#FBBF24; }
.wc-level-txt { font-size:.60rem; color:var(--text-muted); }

/* ── Advanced charts ── */
.charts-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:12px; }
.chart-card  { background:var(--bg-card); border:1px solid var(--border-subtle,#E5E7EB); border-radius:var(--r-lg); padding:18px; }
.chart-title { font-size:.82rem; color:var(--text-muted); margin-bottom:14px; font-weight:500; }

/* ── CEFR Progress section ── */
.cefr-prog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 10px;
}
@media (max-width: 640px) { .cefr-prog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 380px) { .cefr-prog-grid { grid-template-columns: 1fr; } }

.cefr-prog-card {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-lg);
    padding: 13px 14px 12px;
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.cefr-prog-card:hover { border-color: var(--border-default); box-shadow: var(--shadow-sm); }
.cefr-prog-card.cefr-empty { opacity: .42; }

.cefr-prog-hdr {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 9px;
}
.cefr-prog-info { display: flex; flex-direction: column; flex: 1; min-width: 0; gap: 1px; }
.cefr-prog-name  { font-size: .75rem; font-weight: 700; color: var(--text-primary); line-height: 1.2; }
.cefr-prog-count { font-size: .62rem; color: var(--text-muted); }
.cefr-prog-pct   { font-size: 1.05rem; font-weight: 800; font-family: var(--font-display); white-space: nowrap; }
.cefr-prog-none  { font-size: .70rem; color: var(--text-muted); text-align: center; padding: 8px 0 2px; }

/* Segmented bar */
.cefr-prog-bar-bg {
    height: 7px;
    background: var(--bg-hover);
    border-radius: 99px;
    overflow: hidden;
    display: flex;
    margin-bottom: 9px;
}
.cefr-seg { height: 100%; transition: width .55s ease; }
.cefr-seg-mast  { background: #06B6D4; }
.cefr-seg-adv   { background: #6366F1; }
.cefr-seg-learn { background: #818CF8; opacity: .5; }

/* Breakdown row */
.cefr-prog-breakdown { display: flex; gap: 5px; flex-wrap: wrap; }
.cpb-item { font-size: .60rem; font-weight: 600; padding: 2px 6px; border-radius: 99px; white-space: nowrap; }
.cpb-mast  { background: rgba(6,182,212,.12);   color: #06B6D4; }
.cpb-adv   { background: rgba(99,102,241,.12);  color: #818CF8; }
.cpb-learn { background: rgba(129,140,248,.1);  color: #A5B4FC; }
.cpb-new   { background: var(--bg-hover);        color: var(--text-muted); }

/* Legend */
.cefr-prog-legend {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 24px;
    padding: 0 2px;
}
.cpl-item { display: flex; align-items: center; gap: 5px; font-size: .65rem; color: var(--text-muted); font-weight: 500; }
.cpl-dot  { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }

/* ── Empty state ── */
.vocab-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:60px 20px; gap:10px; text-align:center; color:var(--text-muted); }
.vocab-empty .ei { font-size:2.5rem; opacity:.5; }
.vocab-empty .et { font-size:.9rem; font-weight:600; color:var(--text-secondary); }
.vocab-empty .es { font-size:.78rem; }

/* ── Modals (base) ── */
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.65); z-index:200; align-items:center; justify-content:center; backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); padding:16px; }
.modal-overlay.open { display:flex; animation:fadeIn .2s ease; }
.modal-box { background:var(--bg-secondary); border:1px solid var(--border-default); border-radius:var(--r-xl); width:100%; max-width:560px; max-height:88vh; overflow-y:auto; box-shadow:var(--shadow-lg); animation:slideUp .25s cubic-bezier(.4,0,.2,1); scrollbar-width:thin; scrollbar-color:var(--border-default) transparent; }
@keyframes slideUp { from{transform:translateY(18px);opacity:0} to{transform:translateY(0);opacity:1} }
.modal-head { display:flex; justify-content:space-between; align-items:flex-start; padding:22px 22px 0; }
.modal-close-btn { width:30px; height:30px; background:var(--bg-hover); border:none; border-radius:50%; cursor:pointer; color:var(--text-muted); font-size:.9rem; display:flex; align-items:center; justify-content:center; transition:all var(--t-fast); flex-shrink:0; }
.modal-close-btn:hover { background:var(--border-default); color:var(--text-primary); }
.modal-body { padding:16px 22px 22px; }

/* ── Word detail modal content ── */
.dm-word        { font-family:var(--font-display); font-size:2.2rem; font-weight:700; line-height:1.1; }
.dm-phonetic    { font-size:.9rem; color:var(--accent-bright); font-style:italic; margin:4px 0 6px; }
.dm-translation { font-size:1.1rem; color:var(--text-secondary); padding-bottom:16px; border-bottom:1px solid var(--border-subtle); margin-bottom:16px; }
.dm-sec-label   { font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.09em; color:var(--text-muted); margin-bottom:8px; }
.example-list   { display:flex; flex-direction:column; gap:7px; margin-bottom:16px; }
.ex-item        { background:var(--bg-tertiary); border-left:2px solid var(--accent); border-radius:0 var(--r-sm) var(--r-sm) 0; padding:9px 13px; font-size:.85rem; color:var(--text-secondary); line-height:1.5; }
.ex-item.user   { border-left-color:var(--accent-alt); display:flex; align-items:center; justify-content:space-between; gap:8px; }
.ex-del         { background:none; border:none; color:var(--text-muted); cursor:pointer; font-size:.95rem; flex-shrink:0; transition:color var(--t-fast); padding:2px; }
.ex-del:hover   { color:#F87171; }
.add-ex-row     { display:flex; gap:8px; margin-bottom:16px; }
.add-ex-input   { flex:1; background:var(--bg-card); border:1px solid var(--border-default); border-radius:var(--r-md); padding:8px 12px; color:var(--text-primary); font-family:var(--font-body); font-size:.85rem; outline:none; transition:border-color var(--t-fast); }
.add-ex-input:focus { border-color:var(--accent); }
.add-ex-input::placeholder { color:var(--text-muted); }
.dm-mastery-row { display:flex; align-items:center; justify-content:space-between; padding-top:14px; border-top:1px solid var(--border-subtle); gap:12px; flex-wrap:wrap; }
.mastery-lg     { display:flex; gap:4px; }
.mastery-lg .star { font-size:1.1rem; }

/* ── Add word form ── */
.form-row2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px; }
.form-grp  { display:flex; flex-direction:column; gap:4px; }
.form-lbl  { font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); }
.form-inp, .form-sel { background:var(--bg-card); border:1px solid var(--border-default); border-radius:var(--r-md); padding:9px 12px; color:var(--text-primary); font-family:var(--font-body); font-size:.88rem; outline:none; transition:border-color var(--t-fast); width:100%; }
.form-inp:focus, .form-sel:focus { border-color:var(--accent); }
.form-inp::placeholder { color:var(--text-muted); }
.form-sel option { background:var(--bg-secondary); }

/* ── Floating Action Button ── */
.fab { position:fixed; bottom:28px; right:28px; width:52px; height:52px; background:var(--accent); border:none; border-radius:50%; color:#fff; font-size:1.5rem; cursor:pointer; align-items:center; justify-content:center; box-shadow:0 4px 18px rgba(79,70,229,.45); transition:all var(--t-fast); z-index:89; display:none; }
.fab.visible { display:flex; }
.fab:hover   { transform:scale(1.1); box-shadow:0 6px 24px rgba(59,130,246,.65); }

/* ============================================================
   LEARNING MODES STYLES
============================================================ */

/* ── Shared ── */
.mode-header { text-align:center; margin-bottom:28px; }
.mode-header h2 { font-family:var(--font-display); font-size:1.6rem; font-weight:700; margin-bottom:8px; }
.mode-header p  { color:var(--text-secondary); font-size:.9rem; max-width:480px; margin:0 auto; }
.mode-setup { max-width:640px; margin:0 auto; display:flex; flex-direction:column; gap:18px; }
.setup-card { background:var(--bg-card); border:1px solid var(--border-subtle); border-radius:var(--r-lg); padding:18px 20px; }
.setup-label { font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted); margin-bottom:10px; }
.toggle-row { display:flex; gap:7px; flex-wrap:wrap; }
.tog { padding:7px 16px; border-radius:var(--r-md); font-size:.82rem; font-weight:600; cursor:pointer; border:1px solid var(--border-default); background:transparent; color:var(--text-muted); transition:all var(--t-fast); font-family:var(--font-body); white-space:nowrap; }
.tog-stretch { flex:1; text-align:center; }
.tog:hover  { border-color:var(--accent); color:var(--accent-bright); }
.tog.active { background:var(--accent); border-color:var(--accent); color:#fff; }
.btn-lg { padding:14px 28px; font-size:1rem; width:100%; justify-content:center; }

/* ── Flashcard ── */
.study-prog-row { display:flex; align-items:center; gap:12px; margin-bottom:20px; }
.study-prog-txt { font-size:.75rem; color:var(--text-muted); white-space:nowrap; flex-shrink:0; }
.flashcard-wrap { perspective:1200px; cursor:pointer; margin:0 auto 20px; max-width:540px; height:260px; }
.flashcard { width:100%; height:100%; position:relative; transform-style:preserve-3d; transition:transform .55s cubic-bezier(.4,0,.2,1); }
.flashcard.flipped { transform:rotateY(180deg); }
.fc-face { position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; background:var(--bg-card); border:1px solid var(--border-default); border-radius:var(--r-xl); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:28px 28px 20px; text-align:center; gap:5px; overflow:hidden; }
.fc-back  { transform:rotateY(180deg); }
.fc-side-label { position:absolute; top:12px; left:16px; font-size:.58rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted); }
.fc-main  { font-family:var(--font-display); font-size:clamp(1.15rem,4.2vw,2.1rem); font-weight:700; line-height:1.15; color:var(--text-primary); word-break:break-word; overflow-wrap:break-word; max-width:100%; }
.fc-sub   { font-size:.82rem; color:var(--accent-bright); font-style:italic; word-break:break-word; max-width:100%; }
.fc-cat   { font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--text-muted); }
.fc-hint  { font-size:.72rem; color:var(--text-muted); margin-top:6px; }
.fc-ex    { font-size:.75rem; color:var(--text-secondary); font-style:italic; width:100%; margin-top:8px; border-top:1px solid var(--border-subtle); padding-top:8px; line-height:1.5; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.fc-actions { display:flex; gap:12px; justify-content:center; max-width:540px; margin:0 auto; }
.btn-wrong  { flex:1; padding:12px 16px; border-radius:var(--r-md); font-size:.88rem; font-weight:700; cursor:pointer; background:rgba(248,113,113,.12); color:#F87171; border:1px solid rgba(248,113,113,.3); font-family:var(--font-body); transition:all var(--t-fast); }
.btn-wrong:hover  { background:rgba(248,113,113,.22); }
.btn-correct { flex:1; padding:12px 16px; border-radius:var(--r-md); font-size:.88rem; font-weight:700; cursor:pointer; background:rgba(6,182,212,.12); color:var(--accent-alt); border:1px solid rgba(6,182,212,.3); font-family:var(--font-body); transition:all var(--t-fast); }
.btn-correct:hover { background:rgba(6,182,212,.22); }

/* ── Summary ── */
.summary-box { max-width:460px; margin:0 auto; text-align:center; }
.summary-score { font-family:var(--font-display); font-size:4rem; font-weight:700; color:var(--accent-alt); line-height:1; margin-bottom:6px; }
.summary-label { font-size:.88rem; color:var(--text-muted); margin-bottom:24px; }
.summary-row   { display:flex; gap:10px; justify-content:center; margin-bottom:24px; flex-wrap:wrap; }
.summ-stat { background:var(--bg-card); border:1px solid var(--border-subtle); border-radius:var(--r-lg); padding:12px 18px; min-width:90px; }
.summ-stat-val { font-family:var(--font-display); font-size:1.75rem; font-weight:700; line-height:1; }
.summ-stat-lbl { font-size:.66rem; color:var(--text-muted); margin-top:2px; }

/* ── Quiz ── */
.quiz-wrap { max-width:520px; margin:0 auto; }
.quiz-prog-row { display:flex; align-items:center; gap:12px; margin-bottom:22px; }
.quiz-prog-txt { font-size:.75rem; color:var(--text-muted); white-space:nowrap; flex-shrink:0; }
.quiz-card { background:var(--bg-card); border:1px solid var(--border-default); border-radius:var(--r-xl); padding:28px; text-align:center; margin-bottom:14px; }
.quiz-q-label  { font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted); margin-bottom:12px; }
.quiz-q-word   { font-family:var(--font-display); font-size:2rem; font-weight:700; line-height:1.1; margin-bottom:4px; }
.quiz-q-phon   { font-size:.82rem; color:var(--accent-bright); font-style:italic; }
.quiz-options  { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-bottom:12px; }
.qopt { padding:13px 14px; border-radius:var(--r-md); font-size:.86rem; font-weight:500; cursor:pointer; border:1px solid var(--border-default); background:var(--bg-tertiary); color:var(--text-primary); text-align:center; transition:all var(--t-fast); font-family:var(--font-body); line-height:1.3; }
.qopt:hover:not(.disabled) { border-color:var(--accent); background:var(--bg-hover); }
.qopt.correct  { background:rgba(6,182,212,.15); border-color:var(--accent-alt); color:var(--accent-alt); font-weight:700; }
.qopt.wrong    { background:rgba(248,113,113,.15); border-color:#F87171; color:#F87171; }
.qopt.disabled { pointer-events:none; }
.quiz-fb { border-radius:var(--r-md); padding:12px 16px; font-size:.84rem; display:none; text-align:center; margin-bottom:12px; }
.quiz-fb.show { display:block; }
.quiz-fb.correct { background:rgba(6,182,212,.1); color:var(--accent-alt); }
.quiz-fb.wrong   { background:rgba(248,113,113,.1); color:#F87171; }
.missed-list { display:flex; flex-direction:column; gap:7px; margin-top:14px; text-align:left; max-height:240px; overflow-y:auto; }
.missed-item { background:var(--bg-card); border:1px solid rgba(248,113,113,.2); border-radius:var(--r-md); padding:9px 13px; font-size:.83rem; display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; }
.missed-item strong { color:var(--text-primary); }
.missed-item span   { color:var(--text-muted); }

/* ── Writing ── */
.write-wrap { max-width:500px; margin:0 auto; }
.streak-banner { display:flex; align-items:center; gap:8px; background:rgba(251,191,36,.08); border:1px solid rgba(251,191,36,.2); border-radius:var(--r-lg); padding:10px 16px; font-size:.86rem; font-weight:600; color:#FBBF24; margin-bottom:18px; }
.write-card { background:var(--bg-card); border:1px solid var(--border-default); border-radius:var(--r-xl); padding:28px; }
.write-q-label { font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted); margin-bottom:10px; text-align:center; }
.write-q-trans { font-family:var(--font-display); font-size:1.9rem; font-weight:700; color:var(--text-primary); text-align:center; margin-bottom:4px; line-height:1.1; }
.write-q-cat   { font-size:.72rem; color:var(--text-muted); text-align:center; margin-bottom:20px; }
.write-input-row { display:flex; gap:9px; margin-bottom:10px; }
.write-input { flex:1; background:var(--bg-secondary); border:2px solid var(--border-default); border-radius:var(--r-md); padding:11px 14px; color:var(--text-primary); font-family:var(--font-body); font-size:.95rem; outline:none; transition:border-color var(--t-fast); }
.write-input:focus { border-color:var(--accent); }
.write-input.correct { border-color:var(--accent-alt); background:rgba(6,182,212,.05); }
.write-input.wrong   { border-color:#F87171; background:rgba(248,113,113,.05); }
.write-input::placeholder { color:var(--text-muted); }
.write-hint-row { display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.hint-btn { background:none; border:1px solid var(--border-default); border-radius:var(--r-md); padding:5px 11px; font-size:.75rem; color:var(--text-muted); cursor:pointer; font-family:var(--font-body); transition:all var(--t-fast); }
.hint-btn:hover { border-color:var(--accent); color:var(--accent-bright); }
.hint-txt { font-size:.78rem; color:var(--accent-bright); font-family:monospace; letter-spacing:.12em; }
.write-fb { border-radius:var(--r-md); padding:11px 14px; font-size:.86rem; display:none; text-align:center; line-height:1.5; }
.write-fb.show    { display:block; }
.write-fb.correct { background:rgba(6,182,212,.1); color:var(--accent-alt); }
.write-fb.wrong   { background:rgba(248,113,113,.1); color:#F87171; }
.write-progress-header { margin-bottom:14px; }
.write-progress-info   { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.write-counter         { font-size:.82rem; font-weight:700; color:var(--text-muted); font-family:var(--font-body); }
.write-streak-pill     { display:inline-flex; align-items:center; gap:5px; background:rgba(251,191,36,.15); border:1px solid rgba(251,191,36,.3); border-radius:99px; padding:3px 11px; font-size:.80rem; font-weight:700; color:#FCD34D; }
.write-prog-bar-wrap   { height:6px; background:var(--bg-hover); border-radius:99px; overflow:hidden; }
.write-prog-bar-fill   { height:100%; background:linear-gradient(90deg,var(--accent),var(--accent-alt)); border-radius:99px; transition:width .4s ease; }

/* ── Progress ── */
.progress-wrap { max-width:100%; }
.prog-stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:28px; }
.ps-card  { background:var(--bg-card); border:1px solid var(--border-subtle); border-radius:var(--r-lg); padding:20px 18px; text-align:center; }
.ps-val   { font-family:var(--font-display); font-size:2.4rem; font-weight:700; line-height:1; }
.ps-lbl   { font-size:.72rem; color:var(--text-muted); margin-top:5px; }
.ps-sec-title { font-family:var(--font-display); font-size:1.05rem; font-weight:600; color:var(--text-primary); margin-bottom:14px; display:flex; align-items:center; gap:7px; }
.level-chart  { display:flex; flex-direction:column; gap:10px; margin-bottom:28px; }
.level-row    { display:flex; align-items:center; gap:12px; }
.level-lbl    { font-size:.78rem; color:var(--text-muted); width:110px; flex-shrink:0; }
.level-bar-bg { flex:1; height:28px; background:var(--bg-hover); border-radius:99px; overflow:hidden; }
.level-bar    { height:100%; border-radius:99px; transition:width .6s cubic-bezier(.4,0,.2,1); min-width:0; }
.level-n      { font-size:.80rem; font-weight:700; color:var(--text-secondary); width:32px; text-align:right; flex-shrink:0; }
.cat-breakdown { display:flex; flex-direction:column; gap:10px; margin-bottom:28px; }
.cat-prog-row { display:flex; align-items:center; gap:12px; }
.cat-prog-lbl { font-size:.82rem; width:110px; flex-shrink:0; color:var(--text-secondary); font-weight:500; }
.cat-prog-bg  { flex:1; height:22px; background:var(--bg-hover); border-radius:99px; overflow:hidden; }
.cat-prog-bar { height:100%; border-radius:99px; }
.cat-prog-n   { font-size:.78rem; font-weight:700; color:var(--text-secondary); width:48px; text-align:right; flex-shrink:0; }
.mastered-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:8px; max-height:320px; overflow-y:auto; scrollbar-width:thin; margin-bottom:20px; }
.mastered-item { background:var(--bg-card); border:1px solid rgba(6,182,212,.2); border-radius:var(--r-md); padding:10px 14px; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.mastered-word  { font-weight:700; color:var(--text-primary); }
.mastered-trans { font-size:.80rem; color:var(--text-muted); }
.mastered-stars { color:#FBBF24; font-size:.78rem; letter-spacing:1px; }

/* ── Vocabulary responsive ── */
@media (max-width:640px) {
    .word-grid { grid-template-columns:1fr 1fr; gap:9px; }
    .word-card { padding:13px 14px; }
    .wc-word   { font-size:1.05rem; }
    .cat-tabs  { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding-bottom:4px; -webkit-overflow-scrolling:touch; }
    .cat-tabs::-webkit-scrollbar { display:none; }
    .cat-tab   { flex-shrink:0; font-size:.72rem; padding:5px 11px; }
    .level-filter-row { flex-wrap:nowrap; gap:7px; align-items:flex-start; }
    .level-filter-label { padding-top:5px; }
    .level-tabs  { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding-bottom:2px; -webkit-overflow-scrolling:touch; }
    .level-tabs::-webkit-scrollbar { display:none; }
    .level-tab   { flex-shrink:0; font-size:.70rem; padding:4px 10px; }
    .vtab { font-size:.70rem; padding:7px 8px; min-width:56px; }
    .prog-stats-grid { grid-template-columns:repeat(2,1fr); gap:10px; }
    .ps-val { font-size:2rem; }
    .level-bar-bg { height:22px; }
    .cat-prog-bg  { height:18px; }
    .mastered-grid { grid-template-columns:1fr; }
    .charts-grid { grid-template-columns:1fr; }
    .flashcard-wrap { margin-bottom:14px; height:230px; }
    .fc-face  { padding:22px 16px 16px; gap:4px; }
    .fc-main  { font-size:clamp(1rem,5vw,1.9rem); }
    .fc-ex    { font-size:.72rem; -webkit-line-clamp:2; }
    .fc-actions { gap:8px; }
    .btn-wrong, .btn-correct { padding:11px 12px; font-size:.83rem; }
    .quiz-card   { padding:22px 16px; }
    .quiz-q-word { font-size:1.75rem; }
    .quiz-options { grid-template-columns:1fr; gap:7px; }
    .write-card    { padding:22px 16px; }
    .write-q-trans { font-size:1.6rem; }
    .write-input-row { flex-direction:column; gap:7px; }
    .modal-overlay { padding:0; align-items:flex-end; }
    .modal-box     { border-radius:var(--r-xl) var(--r-xl) 0 0; max-height:92vh; max-width:100%; }
    .dm-word { font-size:1.9rem; }
    .add-ex-row { flex-direction:column; gap:7px; }
    .form-row2 { grid-template-columns:1fr; gap:10px; }
    .level-lbl    { width:72px; font-size:.68rem; }
    .cat-prog-lbl { width:72px; font-size:.70rem; }
    .summary-score { font-size:3rem; }
    .summ-stat { padding:10px 14px; min-width:76px; }
    .fab { bottom:18px; right:14px; width:48px; height:48px; font-size:1.3rem; }
}

@media (max-width:480px) {
    .prog-stats-grid { grid-template-columns:repeat(2,1fr); gap:8px; }
    .ps-val { font-size:1.7rem; }
    .word-grid { grid-template-columns:1fr 1fr; gap:7px; }
    .word-card { padding:10px 11px; }
    .wc-word   { font-size:.95rem; }
    .wc-translation { font-size:.80rem; }
    .wc-cat    { font-size:.54rem; padding:2px 6px; }
    .flashcard-wrap { height:210px; }
    .fc-main  { font-size:clamp(.95rem,5.5vw,1.75rem); }
    .fc-ex    { -webkit-line-clamp:2; }
    .quiz-q-word { font-size:1.5rem; }
    .qopt        { padding:11px 12px; font-size:.82rem; }
    .write-q-trans { font-size:1.4rem; }
    .dm-word { font-size:1.65rem; }
    .modal-body { padding:14px 16px 18px; }
    .modal-head { padding:18px 16px 0; }
}

@media (max-width:380px) {
    .word-grid { grid-template-columns:1fr; }
}