:root {
  --red:#c0392b; --red-dark:#922b21; --gold:#e6a817; --gold-light:#f4d03f;
  --bg:#f7f7f5; --sidebar:#16213e; --card:#ffffff; --text:#1a1a2e;
  --muted:#6c757d; --border:#e2e2e0; --blue:#2471a3; --green:#1e8449;
  --purple:#7d3c98; --orange:#d35400; --teal:#0e6655;
  --shadow:0 2px 16px rgba(0,0,0,.10); --radius:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:'Segoe UI',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);display:flex;height:100vh;overflow:hidden}
#sidebar{width:270px;min-width:270px;background:var(--sidebar);color:#dde1f0;display:flex;flex-direction:column;overflow-y:auto;z-index:50}
.sb-head{padding:22px 20px 14px;border-bottom:1px solid rgba(255,255,255,.08)}
.sb-head h1{font-size:21px;color:var(--gold-light);font-weight:700}
.sb-head p{font-size:12px;color:rgba(255,255,255,.4);margin-top:2px}
.sb-prog{padding:12px 20px;border-bottom:1px solid rgba(255,255,255,.08)}
.sb-prog-lbl{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:rgba(255,255,255,.4);margin-bottom:7px}
.prog-track{height:4px;background:rgba(255,255,255,.12);border-radius:2px}
.prog-fill{height:4px;background:var(--gold);border-radius:2px;transition:width .5s}
.sb-nav{padding:10px 0;flex:1}
.sb-sec{padding:9px 14px 8px;margin:4px 6px 0;font-size:11px;text-transform:uppercase;letter-spacing:.9px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;user-select:none;border-radius:7px;transition:background .15s,opacity .15s}
.sb-sec:not(.collapsed){background:rgba(255,255,255,.08)}
.sb-sec:hover{background:rgba(255,255,255,.14) !important;opacity:1 !important}
.sb-sec.collapsed{opacity:.45}
.sb-sec .sb-caret{transition:transform .2s;font-size:11px;opacity:.75;flex-shrink:0}
.sb-sec.collapsed .sb-caret{transform:rotate(-90deg)}
.sb-group{overflow:hidden;max-height:2000px;transition:max-height .3s ease}
.sb-group.collapsed{max-height:0}
.sb-item{display:flex;align-items:center;gap:10px;padding:10px 18px;cursor:pointer;border-left:3px solid transparent;transition:background .15s}
.sb-item:hover{background:rgba(255,255,255,.05)}
.sb-item.active{background:rgba(192,57,43,.25);border-left-color:#e74c3c}
.sb-item.done .sb-chk{color:#27ae60}
.sb-review-list{margin-left:14px;border-left:1px solid rgba(255,255,255,.08)}
.sb-item-sub{padding:6px 12px;font-size:12px;opacity:.85}
.sb-item-sub .sb-emoji{font-size:14px;min-width:18px}
.sb-item-sub .sb-title{font-size:12px}
.sb-item-sub .sb-sub{font-size:10px}
.sb-emoji{font-size:17px;min-width:22px}
.sb-info{flex:1}
.sb-title{font-size:13px;font-weight:500}
.sb-sub{font-size:11px;color:rgba(255,255,255,.36);margin-top:1px}
.sb-chk{font-size:13px;color:rgba(255,255,255,.2)}
.sb-badge{font-size:10px;background:var(--gold);color:#333;border-radius:4px;padding:1px 5px;font-weight:700;margin-left:2px}
/* Expandable Oxford tier sets in sidebar */
.sb-set{display:block}
.sb-item-set .sb-set-caret{margin-left:auto;font-size:9px;opacity:.45;transition:transform .2s}
.sb-set.expanded .sb-item-set .sb-set-caret{transform:rotate(180deg);opacity:.7}
.sb-set-body{margin-left:14px;border-left:1px solid rgba(255,255,255,.08);padding-left:0}
.sb-set-body .sb-item-sub{padding:5px 12px;font-size:12px;opacity:.85;display:flex;align-items:center;gap:8px}
.sb-set-body .sb-item-sub .sb-emoji{font-size:14px;min-width:18px}
.sb-set-body .sb-item-sub .sb-title{font-size:12px}
.sb-set-body .sb-item-sub .sb-sub{font-size:10px}
.sb-sub-count{margin-left:auto;font-size:10px;color:rgba(255,255,255,.45);background:rgba(255,255,255,.06);padding:1px 7px;border-radius:8px;font-weight:600}
#main{flex:1;overflow-y:auto}
.hero{padding:44px 52px 32px;color:#fff;position:relative;overflow:hidden}
.hero::after{content:attr(data-emoji);position:absolute;right:44px;top:50%;transform:translateY(-50%);font-size:90px;opacity:.15;pointer-events:none}
.hero-num{font-size:11px;text-transform:uppercase;letter-spacing:2px;opacity:.65;margin-bottom:7px}
.hero h2{font-size:34px;font-weight:700}
.hero-vi{font-size:18px;opacity:.75;margin-top:3px}
.hero p{font-size:14px;opacity:.85;margin-top:12px;max-width:520px;line-height:1.6}
.ca{padding:32px 52px 60px;max-width:960px}
.sh{display:flex;align-items:center;gap:12px;margin:38px 0 18px;flex-wrap:wrap}
.sh:first-child{margin-top:0}
.sh-icon{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:19px;flex-shrink:0}
.sh-title{font-size:20px;font-weight:700}
.sh-sub{font-size:13px;color:var(--muted);margin-top:2px}
.sh-action{margin-left:auto;display:flex;align-items:center;gap:6px;padding:7px 15px;border:none;border-radius:20px;font-size:13px;cursor:pointer;transition:opacity .2s;white-space:nowrap}
.sh-action:hover{opacity:.82}
.btn-blue{background:var(--blue);color:#fff}
.btn-gold{background:var(--gold);color:#333}
.btn-green{background:var(--green);color:#fff}
.btn-red{background:var(--red);color:#fff}
.tone-strip{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:18px 22px}
.tone-strip h4{font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);margin-bottom:12px}
.tone-row{display:flex;gap:10px;flex-wrap:wrap}
.tone-chip{display:flex;flex-direction:column;align-items:center;padding:8px 13px;border-radius:10px;cursor:pointer;transition:transform .15s}
.tone-chip:hover{transform:scale(1.07)}
.tc-mark{font-size:22px;font-weight:700}
.tc-name{font-size:10px;margin-top:2px;font-weight:600}
.tc-desc{font-size:10px;color:var(--muted)}
.t0{color:#2c3e50;background:#eaecee} .t1{color:#76448a;background:#f4ecf7}
.t2{color:#1a5276;background:#d6eaf8} .t3{color:#b03a2e;background:#fadbd8}
.t4{color:#935116;background:#fef9e7} .t5{color:#1e8449;background:#d5f5e3}
.vocab-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(175px,1fr));gap:13px}
.vcard{background:var(--card);border:1.5px solid var(--border);border-radius:var(--radius);padding:16px 16px 14px;cursor:grab;position:relative;transition:transform .15s,box-shadow .15s,filter .1s;user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
@media(hover:hover){.vcard:hover{transform:translateY(-2px);box-shadow:var(--shadow)}}
.vcard:active{filter:brightness(0.93)}
.vcard.speaking{filter:brightness(0.91)}
.vcard.vc-dragging{opacity:.35;cursor:grabbing;transform:none !important;box-shadow:none !important}
.vcard.vc-drag-over{outline:2px dashed var(--blue);outline-offset:2px;transform:scale(1.02)}
.vc-drag-handle{position:absolute;top:7px;left:8px;font-size:11px;color:var(--border);line-height:1;pointer-events:none;opacity:.6}
.vocab-grid.vc-active{user-select:none}
.vcard-vi{font-size:19px;font-weight:600;color:var(--red);margin-bottom:3px}
.vcard-pron{font-size:11px;color:var(--muted);font-style:italic;margin-bottom:6px}
.vcard-en{font-size:13px}
.vcard-play{display:none}
.diph-list{display:flex;flex-direction:column;gap:15px}
.diph-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.diph-head{display:flex;align-items:flex-start;gap:16px;padding:18px 22px 14px;background:linear-gradient(90deg,#fff8f2,#fff);border-bottom:1px solid var(--border)}
.diph-sound{font-size:38px;font-weight:700;color:var(--red);min-width:60px;cursor:pointer;transition:color .15s}
.diph-sound:hover{color:var(--red-dark)}
.diph-body{flex:1}
.diph-title{font-size:15px;font-weight:700;margin-bottom:4px}
.diph-desc{font-size:13px;color:var(--muted);line-height:1.55}
.diph-tip{margin-top:7px;font-size:12px;color:var(--blue);background:#eaf4fc;border-radius:6px;padding:5px 10px;display:inline-block}
.diph-examples{display:flex;flex-wrap:wrap;gap:11px;padding:16px 22px}
.diph-ex{background:var(--bg);border-radius:10px;padding:10px 14px;cursor:pointer;transition:background .15s;display:flex;flex-direction:column;min-width:80px}
.diph-ex:hover{background:#ebebeb}
.diph-ex.speaking{background:#d6eaf8}
.de-vi{font-size:19px;font-weight:600;display:inline-block;padding:2px 6px;border-radius:5px}
.de-en{font-size:12px;color:var(--muted);margin-top:2px}
.de-note{font-size:11px;color:var(--blue);margin-top:2px}
.dlg-intro{background:#fffaed;border:1px solid var(--gold);border-radius:10px;padding:13px 18px;font-size:13px;color:#7d6500;margin-bottom:20px;line-height:1.55}
.dlg-list{display:flex;flex-direction:column;gap:14px}
.dlg-row{display:flex;gap:12px;align-items:flex-start}
.dlg-row.spk-b{flex-direction:row-reverse}
.dlg-row.spk-c{flex-direction:row-reverse}
.dlg-avatar{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;flex-shrink:0;color:#fff}
.spk-a .dlg-avatar{background:var(--red)}
.spk-b .dlg-avatar{background:var(--blue)}
.spk-c .dlg-avatar{background:var(--teal)}
.dlg-bubble{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:12px 16px;max-width:500px;flex:1}
.spk-a .dlg-bubble{border-top-left-radius:4px}
.spk-b .dlg-bubble{border-top-right-radius:4px}
.spk-c .dlg-bubble{border-top-right-radius:4px}
.dlg-vi{font-size:15px;font-weight:500;line-height:1.5;display:flex;align-items:flex-start;gap:6px}
.dlg-vi-text{flex:1}
.dlg-play{background:none;border:none;color:var(--red);cursor:pointer;font-size:14px;padding:0;flex-shrink:0;margin-top:1px;opacity:.7;transition:opacity .15s}
.dlg-play:hover{opacity:1}
.dlg-trans{margin-top:8px;padding-top:8px;border-top:1px dashed var(--border)}
.dlg-en{font-size:13px;color:var(--muted);font-style:italic}
.dlg-note{font-size:11px;color:var(--blue);margin-top:4px}
.dlg-reveal{background:none;border:1px dashed var(--border);color:var(--muted);font-size:12px;border-radius:6px;padding:4px 10px;cursor:pointer;margin-top:9px;display:flex;align-items:center;gap:5px;transition:border-color .15s,color .15s}
.dlg-reveal:hover{border-color:var(--gold);color:#7d6500}
.hidden{display:none!important}
.note-box{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:20px 24px;font-size:14px;line-height:1.75}
.complete-wrap{text-align:center;margin-top:44px}
.complete-btn{display:inline-flex;align-items:center;gap:8px;padding:14px 32px;background:var(--green);color:#fff;border:none;border-radius:12px;font-size:15px;font-weight:600;cursor:pointer;transition:opacity .2s,transform .15s}
.complete-btn:hover:not(.done){opacity:.88;transform:scale(1.02)}
.complete-btn.done{background:#95a5a6;cursor:default}
.next-link{display:inline-block;margin-top:14px;background:none;border:none;color:var(--blue);cursor:pointer;font-size:14px;text-decoration:underline}
.welcome{padding:52px;max-width:720px}
.welcome h2{font-size:38px;font-weight:800;color:var(--red)}
.welcome .sub{font-size:20px;color:var(--muted);margin-top:4px;margin-bottom:32px}
.feat-list{display:flex;flex-direction:column;gap:13px;margin-bottom:28px}
.feat{display:flex;align-items:center;gap:15px;padding:14px 18px;background:var(--card);border:1px solid var(--border);border-radius:12px}
.feat-icon{font-size:28px}
.feat-text h4{font-size:14px;margin-bottom:2px}
.feat-text p{font-size:13px;color:var(--muted)}
.tip-box{background:#fff9e6;border:1px solid var(--gold);border-radius:10px;padding:12px 16px;font-size:13px;color:#7d6500;margin-bottom:24px}
.start-btn{padding:14px 36px;background:var(--red);color:#fff;border:none;border-radius:12px;font-size:16px;font-weight:700;cursor:pointer;transition:background .2s,transform .15s;display:block;width:100%;text-align:center}
.start-btn:hover{background:var(--red-dark);transform:scale(1.02)}
.welcome-path{background:var(--card);border:1.5px solid var(--border);border-radius:var(--radius);padding:18px 20px;margin-bottom:24px}
.welcome-conv-item{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border);transition:opacity .15s}
.welcome-conv-item:last-child{border-bottom:none}
.welcome-conv-item:hover{opacity:.7}
.welcome-conv-item.done .welcome-conv-num{background:var(--green);color:#fff}
.welcome-conv-item.done .welcome-conv-title{text-decoration:line-through;color:var(--muted)}
.welcome-conv-num{width:24px;height:24px;border-radius:50%;background:var(--border);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0}
.welcome-conv-title{font-size:14px;font-weight:500}
.conv-practice-section{margin-top:36px;padding-top:8px}
.conv-drill-btns{display:flex;gap:10px;flex-wrap:wrap}
.conv-drill-btn{flex:1;min-width:200px;padding:14px 20px;background:var(--card);border:2px solid var(--blue);border-radius:var(--radius);font-size:14px;font-weight:600;color:var(--blue);cursor:pointer;transition:all .15s;text-align:center}
.conv-drill-btn:hover{background:var(--blue);color:#fff}
.conv-complete-section{text-align:center;margin-top:28px;padding-top:20px;border-top:1px solid var(--border)}
.conv-complete-btn{padding:12px 28px;background:var(--green);color:#fff;border:none;border-radius:10px;font-size:15px;font-weight:700;cursor:pointer;transition:opacity .2s}
.conv-complete-btn:hover{opacity:.88}
.conv-done-badge{display:inline-block;padding:10px 24px;background:#d5f5e3;color:#155724;border-radius:10px;font-size:14px;font-weight:700}
.conv-nav-btns{display:flex;justify-content:space-between;margin-top:24px;gap:12px}
.conv-nav-btn{padding:10px 16px;background:var(--card);border:1.5px solid var(--border);border-radius:10px;font-size:13px;font-weight:600;cursor:pointer;transition:all .15s;color:var(--text);max-width:45%}
.conv-nav-btn:hover{border-color:var(--blue);color:var(--blue)}
.conv-nav-next{background:var(--blue);color:#fff!important;border-color:var(--blue)}
.conv-nav-next:hover{opacity:.88}
.tone-detail-row{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:18px 22px;display:flex;align-items:center;gap:18px;cursor:pointer;margin-bottom:13px;transition:box-shadow .15s}
.tone-detail-row:hover{box-shadow:var(--shadow)}
.tone-hear{margin-left:auto;padding:8px 18px;border:1.5px solid;border-radius:20px;background:none;font-size:13px;font-weight:600;cursor:pointer;flex-shrink:0;transition:all .15s}
.ma-box{background:#fffaed;border:1px solid var(--gold);border-radius:var(--radius);padding:20px 24px;margin-top:10px}
.ma-chips{display:flex;flex-wrap:wrap;gap:11px;margin-top:12px}
.ma-chip{display:flex;flex-direction:column;align-items:center;padding:10px 14px;border-radius:10px;cursor:pointer;transition:transform .15s}
.ma-chip:hover{transform:scale(1.06)}
.ma-vi{font-size:26px;font-weight:700}
.ma-en{font-size:11px;margin-top:3px}
.phrase-grid{display:flex;flex-direction:column;gap:10px}
.phrase-card{background:var(--card);border:1.5px solid var(--border);border-radius:var(--radius);padding:16px 18px;display:flex;align-items:flex-start;gap:14px;transition:box-shadow .15s,filter .1s;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
@media(hover:hover){.phrase-card:hover{box-shadow:var(--shadow)}}
.phrase-card:active{filter:brightness(0.94)}
.phrase-vi-wrap{flex:1}
.phrase-vi{font-size:20px;font-weight:600;color:var(--red);display:inline}
.phrase-pron{font-size:12px;color:var(--muted);font-style:italic;margin-top:3px}
.phrase-en{font-size:14px;margin-top:5px;font-weight:500}
.phrase-note{font-size:12px;color:var(--blue);margin-top:4px}
.phrase-vi.has-note{cursor:help}
.phrase-vi.has-note::after{content:attr(data-note);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:rgba(20,20,30,.88);color:#fff;padding:7px 11px;border-radius:8px;font-size:12px;font-weight:400;white-space:normal;max-width:240px;text-align:left;z-index:200;pointer-events:none;opacity:0;transition:opacity .15s;line-height:1.45;box-shadow:0 4px 16px rgba(0,0,0,.25)}
.phrase-vi.has-note:hover::after{opacity:1}
.phrase-vi.has-note::before{content:'';position:absolute;bottom:calc(100% + 4px);left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:rgba(20,20,30,.88);z-index:200;pointer-events:none;opacity:0;transition:opacity .15s}
.phrase-vi.has-note:hover::before{opacity:1}
.phrase-vi{position:relative}
.phrase-personal{font-size:11px;color:var(--green);margin-top:3px;font-weight:600}
.phrase-formula-tag{font-size:11px;color:#8e24aa;margin-top:3px;font-weight:600}
.phrase-card.phrase-formula{border-left:3px solid #8e24aa}
.phrase-subsection{margin-bottom:32px}
.phrase-subsection:last-child{margin-bottom:0}
.phrase-subsection-hdr{display:flex;align-items:center;gap:12px;margin:28px 0 14px;padding-bottom:10px;border-bottom:2px solid var(--border)}
.phrase-subsection:first-child .phrase-subsection-hdr{margin-top:0}
.phrase-subsection-emoji{font-size:24px;flex-shrink:0}
.phrase-subsection-title{font-size:17px;font-weight:700;color:var(--text)}
.phrase-subsection-desc{font-size:12px;color:var(--muted);margin-top:2px}
.subsection-flash{animation:subsection-pulse 1.5s ease-out;border-radius:8px}
@keyframes subsection-pulse{
  0%{background-color:rgba(255,220,100,.45)}
  100%{background-color:transparent}
}
/* Flash animation applied to a card freshly added by the AI Co-pilot.
   Brighter than the subsection-flash so the user can spot exactly which
   card landed. Stays solid for ~1s, then fades to nothing over ~1.5s. */
.card-flash{
  animation: card-flash-pulse 2.4s ease-out;
  position: relative;
  z-index: 2;
}
@keyframes card-flash-pulse{
  0%   { box-shadow: 0 0 0 4px rgba(46,204,113,.95), 0 8px 28px rgba(46,204,113,.45); background-color: rgba(213,255,222,.95); transform: scale(1.04); }
  35%  { box-shadow: 0 0 0 4px rgba(46,204,113,.85), 0 8px 28px rgba(46,204,113,.35); background-color: rgba(213,255,222,.85); transform: scale(1.02); }
  80%  { box-shadow: 0 0 0 2px rgba(46,204,113,.45), 0 4px 14px rgba(46,204,113,.18); background-color: rgba(232,255,238,.55); transform: scale(1); }
  100% { box-shadow: none; background-color: transparent; transform: scale(1); }
}
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.vgrid-card{background:var(--card);border:1.5px solid var(--border);border-top:4px solid currentColor;border-radius:var(--radius);padding:14px 12px;text-align:center;cursor:pointer;transition:all .15s;touch-action:manipulation;-webkit-tap-highlight-color:transparent;position:relative}
.vgc-fav{position:absolute;top:4px;right:4px;background:none;border:none;font-size:13px;cursor:pointer;padding:2px;line-height:1;opacity:0;transition:opacity .15s}
.vgrid-card:hover .vgc-fav,.vgc-fav.fav-on{opacity:1}
.vgrid-card:hover{border-color:var(--blue);box-shadow:var(--shadow)}
.vgrid-card:active{transform:scale(.97)}
.vgrid-emoji{font-size:26px;margin-bottom:6px}
.vgrid-vi{font-size:18px;font-weight:700;line-height:1.3}
.vgrid-pron{font-size:11px;color:var(--muted);font-style:italic;margin-top:2px}
.vgrid-en{font-size:12px;color:var(--muted);margin-top:4px;font-weight:500;line-height:1.3}
.mình-box{background:linear-gradient(135deg,#f3e5f5,#ede7f6);border:1.5px solid #9c27b0;border-radius:var(--radius);padding:20px 24px;margin-bottom:28px}
.mình-box h3{font-size:16px;font-weight:700;color:#6a1b9a;margin-bottom:10px}
.mình-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.mình-chip{background:white;border:1.5px solid #ce93d8;border-radius:10px;padding:10px 14px;flex:1;min-width:140px}
.mình-chip .mc-word{font-size:20px;font-weight:700;color:#7b1fa2}
.mình-chip .mc-eng{font-size:12px;color:var(--muted);margin-top:2px}
.mình-chip .mc-when{font-size:12px;color:var(--blue);margin-top:3px}
.mình-example{margin-top:14px;padding:12px 16px;background:white;border-radius:10px;font-size:13px;color:#4a148c}
.mình-example strong{color:#7b1fa2}
.drill-wrap{padding:32px 52px 60px;max-width:820px}
.drill-config{display:flex;flex-direction:column;gap:22px}
.drill-config h3{font-size:18px;font-weight:700;margin-bottom:10px}
.set-checks{display:flex;flex-wrap:wrap;gap:10px}
.set-check{display:flex;align-items:center;gap:8px;background:var(--card);border:1.5px solid var(--border);border-radius:10px;padding:10px 14px;cursor:pointer;transition:border-color .15s,background .15s;user-select:none}
.set-check:hover{border-color:var(--blue)}
.set-check.checked{border-color:var(--blue);background:#eaf4fc}
.set-check input{accent-color:var(--blue)}
.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mode-card{background:var(--card);border:2px solid var(--border);border-radius:var(--radius);padding:18px 20px;cursor:pointer;transition:all .15s}
.mode-card:hover{border-color:var(--blue);background:#f0f8ff}
.mode-card.selected{border-color:var(--blue);background:#eaf4fc}
.mode-card .mc-icon{font-size:28px;margin-bottom:8px}
.mode-card .mc-title{font-size:15px;font-weight:700;margin-bottom:4px}
.mode-card .mc-desc{font-size:12px;color:var(--muted)}
.drill-start-btn{padding:14px 36px;background:var(--green);color:#fff;border:none;border-radius:12px;font-size:16px;font-weight:700;cursor:pointer;transition:opacity .2s;align-self:flex-start}
.drill-start-btn:hover{opacity:.88}
.drill-start-btn:disabled{background:#95a5a6;cursor:not-allowed}
/* Topic-based drill config (primary UX): pills, tier-limit radios,
   collapsible curated phrase-set fallback. Uses .vb-pill styles for the
   topic pills themselves so they match the Vocab Browser visually. */
.drill-topic-pills{flex-wrap:wrap;gap:8px;max-height:none}
.drill-topic-pills .vb-pill{padding:7px 13px;font-size:13px}
.drill-section-muted{opacity:.55;pointer-events:none}
.drill-limit-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.drill-limit-opt{display:flex;align-items:center;gap:10px;background:var(--card);border:1.5px solid var(--border);border-radius:10px;padding:11px 14px;cursor:pointer;transition:border-color .15s,background .15s;user-select:none}
.drill-limit-opt:hover{border-color:var(--blue)}
.drill-limit-opt.selected{border-color:var(--blue);background:#eaf4fc}
.drill-limit-opt input{accent-color:var(--blue);margin:0}
.drill-limit-opt .dlo-label{font-size:14px;font-weight:600;flex:1}
.drill-limit-opt .dlo-sub{font-size:12px;color:var(--muted)}
.drill-curated{margin-top:8px;border-top:1px solid var(--border);padding-top:14px}
.drill-curated-toggle{display:flex;align-items:center;gap:8px;background:none;border:none;cursor:pointer;font-size:14px;color:var(--text);padding:6px 0;font-weight:600}
.drill-curated-toggle:hover{color:var(--blue)}
.drill-curated-toggle .dct-arrow{font-size:11px;color:var(--muted)}
.drill-curated-toggle .dct-badge{margin-left:6px;background:var(--blue);color:#fff;font-size:10px;font-weight:700;padding:2px 8px;border-radius:8px;text-transform:uppercase;letter-spacing:.5px}
.drill-curated-body{margin-top:12px;padding:14px;background:#fafafa;border:1px solid var(--border);border-radius:10px}
.drill-source-actions{margin-top:12px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.drill-source-status{font-size:13px;color:var(--green);font-weight:600}
.drill-source-btn{padding:9px 18px;background:var(--blue);color:#fff;border:none;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;transition:opacity .2s}
.drill-source-btn:hover{opacity:.88}
.drill-source-btn:disabled{background:#95a5a6;cursor:not-allowed}
.drill-source-btn.active{background:var(--green)}
.drill-source-btn-secondary{padding:8px 14px;background:none;color:var(--blue);border:1.5px solid var(--blue);border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;transition:background .15s}
.drill-source-btn-secondary:hover{background:#eaf4fc}
.drill-header{display:flex;align-items:center;gap:14px;margin-bottom:28px;flex-wrap:wrap}
.drill-mode-label{font-size:13px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.drill-score{font-size:20px;font-weight:700}
.drill-score .s-ok{color:var(--green)}
.drill-score .s-bad{color:var(--red)}
.drill-prog{flex:1;height:6px;background:var(--border);border-radius:3px;overflow:hidden;min-width:100px}
.drill-prog-fill{height:100%;background:var(--blue);border-radius:3px;transition:width .3s}
.drill-prog-text{font-size:12px;color:var(--muted);white-space:nowrap}
.drill-end-btn{background:none;border:1px solid var(--border);border-radius:8px;padding:6px 12px;font-size:12px;color:var(--muted);cursor:pointer}
.drill-end-btn:hover{border-color:var(--red);color:var(--red)}
.drill-card{background:var(--card);border:2px solid var(--border);border-radius:var(--radius);padding:36px 40px;text-align:center;transition:border-color .2s}
.drill-card.correct{border-color:var(--green);background:#f0fff4}
.drill-card.wrong{border-color:var(--red);background:#fff5f5}
.fc-label{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);margin-bottom:14px}
.fc-phrase{font-size:26px;font-weight:700;line-height:1.4;margin-bottom:8px}
.fc-hint{font-size:13px;color:var(--muted);margin-top:16px;cursor:pointer}
.fc-vi{font-size:28px;font-weight:700;color:var(--red);margin-bottom:6px;cursor:pointer}
.fc-pron{font-size:14px;color:var(--muted);font-style:italic;margin-bottom:16px}
.fc-btns{display:flex;gap:12px;justify-content:center;margin-top:24px;flex-wrap:wrap}
.fc-knew{padding:12px 28px;background:var(--green);color:#fff;border:none;border-radius:10px;font-size:15px;font-weight:700;cursor:pointer;transition:opacity .2s}
.fc-knew:hover{opacity:.88}
.fc-didnt{padding:12px 28px;background:var(--red);color:#fff;border:none;border-radius:10px;font-size:15px;font-weight:700;cursor:pointer;transition:opacity .2s}
.fc-didnt:hover{opacity:.88}
.fc-flip{padding:10px 24px;background:var(--blue);color:#fff;border:none;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;transition:opacity .2s}
.fc-flip:hover{opacity:.88}
.type-dir{font-size:13px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);margin-bottom:14px;font-weight:600}
.type-phrase{font-size:24px;font-weight:700;line-height:1.4;margin-bottom:20px}
.type-input{width:100%;max-width:480px;padding:14px 18px;font-size:17px;border:2px solid var(--border);border-radius:12px;outline:none;transition:border-color .15s;font-family:inherit}
.type-input:focus{border-color:var(--blue)}
.type-input.correct{border-color:var(--green);background:#f0fff4}
.type-input.wrong{border-color:var(--red);background:#fff5f5}
.type-actions{display:flex;gap:10px;justify-content:center;margin-top:18px;flex-wrap:wrap}
.btn-check{padding:11px 28px;background:var(--blue);color:#fff;border:none;border-radius:10px;font-size:15px;font-weight:700;cursor:pointer;transition:opacity .2s}
.btn-check:hover{opacity:.88}
.btn-skip{padding:11px 22px;background:none;border:2px solid var(--border);border-radius:10px;font-size:14px;cursor:pointer;transition:border-color .15s;color:var(--muted)}
.btn-skip:hover{border-color:var(--muted)}
.btn-next{padding:11px 28px;background:var(--green);color:#fff;border:none;border-radius:10px;font-size:15px;font-weight:700;cursor:pointer;transition:opacity .2s}
.btn-next:hover{opacity:.88}
.type-result{margin-top:16px;padding:14px 18px;border-radius:10px;font-size:14px;line-height:1.6}
.type-result.ok{background:#f0fff4;border:1px solid var(--green);color:#155724}
.type-result.partial{background:#fff8e1;border:1px solid var(--gold);color:#7d6500}
.type-result.bad{background:#fff5f5;border:1px solid var(--red);color:#721c24}
.type-result .correct-ans{font-size:18px;font-weight:700;margin-top:6px}
.drill-hear{background:none;border:1px solid var(--border);border-radius:8px;padding:6px 12px;font-size:14px;color:var(--muted);cursor:pointer;margin-top:12px;transition:border-color .15s}
.drill-hear:hover{border-color:var(--red);color:var(--red)}
.mc-question-label{font-size:13px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);margin-bottom:14px;font-weight:600}
.mc-question{font-size:24px;font-weight:700;line-height:1.4;margin-bottom:28px}
.mc-options{display:flex;flex-direction:column;gap:10px;text-align:left;max-width:520px;margin:0 auto}
.mc-opt{background:var(--bg);border:2px solid var(--border);border-radius:12px;padding:14px 18px;cursor:pointer;font-size:17px;transition:all .15s}
.mc-opt:hover:not(.disabled){border-color:var(--blue);background:#f0f8ff}
.mc-opt.correct{border-color:var(--green)!important;background:#f0fff4!important}
.mc-opt.wrong{border-color:var(--red)!important;background:#fff5f5!important}
.mc-opt.disabled{cursor:default}
.fg-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px;flex-wrap:wrap}
.fg-header-left{display:flex;align-items:center;gap:12px}
.fg-header-right{display:flex;align-items:center;gap:10px}
.fg-dir-label{font-size:15px;font-weight:700;color:var(--text)}
.fg-switch-btn{background:none;border:1.5px solid var(--blue);color:var(--blue);border-radius:8px;padding:5px 12px;font-size:12px;font-weight:600;cursor:pointer;transition:all .15s}
.fg-switch-btn:hover{background:var(--blue);color:#fff}
.fg-progress{font-size:13px;color:var(--muted)}
.fg-reset-btn{background:none;border:1px solid var(--border);border-radius:8px;padding:4px 10px;font-size:11px;color:var(--muted);cursor:pointer}
.fg-reset-btn:hover{border-color:var(--red);color:var(--red)}
.fg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.fg-card{background:var(--card);border:2px solid var(--border);border-radius:var(--radius);padding:20px;cursor:pointer;transition:all .2s;min-height:100px;display:flex;align-items:center;justify-content:center;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.fg-card:hover{border-color:var(--blue);box-shadow:var(--shadow)}
.fg-card:active{transform:scale(.98)}
.fg-card.fg-revealed{border-color:var(--green);background:#f0fff4;cursor:pointer}
.fg-card.fg-revealed:hover{border-color:var(--green)}
.fg-front{text-align:center;width:100%}
.fg-text{font-size:18px;font-weight:600;line-height:1.4}
.fg-pron{font-size:12px;color:var(--muted);font-style:italic;margin-top:4px}
.fg-tap{font-size:11px;color:var(--muted);margin-top:10px;opacity:.6}
.fg-answer{text-align:center;width:100%}
.fg-reveal-text{font-size:20px;font-weight:700;color:var(--red);line-height:1.4}
.fg-prompt-small{font-size:13px;color:var(--muted);margin-top:6px}
.fg-note{font-size:11px;color:var(--blue);margin-top:6px}
.drill-results{text-align:center;padding:40px 20px}
.res-score{font-size:64px;font-weight:800;margin-bottom:8px}
.res-score.great{color:var(--green)}
.res-score.ok{color:var(--gold)}
.res-score.low{color:var(--red)}
.res-pct{font-size:20px;color:var(--muted);margin-bottom:32px}
.res-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.res-btn{padding:12px 24px;border:none;border-radius:10px;font-size:15px;font-weight:600;cursor:pointer;transition:opacity .2s}
.res-btn:hover{opacity:.88}
.dw-modes{display:flex;gap:8px;margin-bottom:24px}
.dw-mode-btn{padding:8px 18px;border:2px solid var(--border);border-radius:20px;background:none;font-size:13px;font-weight:600;cursor:pointer;transition:all .15s}
.dw-mode-btn.active{background:var(--red);border-color:var(--red);color:#fff}
.dw-grid{display:flex;flex-direction:column;gap:16px}
.dw-card{background:var(--card);border:1.5px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:box-shadow .15s}
.dw-card:hover{box-shadow:var(--shadow)}
.dw-head{display:flex;align-items:flex-start;gap:20px;padding:20px 24px 16px;background:linear-gradient(90deg,#fff5f5,#fff);border-bottom:1px solid var(--border)}
.dw-letters{font-size:46px;font-weight:800;color:var(--red);cursor:pointer;min-width:88px;line-height:1;transition:transform .15s}
.dw-letters:hover{transform:scale(1.06)}
.dw-body{flex:1}
.dw-title{font-size:14px;font-weight:700;margin-bottom:4px}
.dw-desc{font-size:13px;color:var(--muted);line-height:1.6}
.dw-tip{font-size:12px;color:var(--blue);background:#eaf4fc;border-radius:6px;padding:5px 10px;margin-top:8px;display:inline-block}
.dw-hear{padding:8px 18px;background:var(--red);color:#fff;border:none;border-radius:20px;font-size:13px;font-weight:600;cursor:pointer;flex-shrink:0;margin-top:2px;transition:opacity .15s}
.dw-hear:hover{opacity:.85}
.dw-examples{display:flex;flex-wrap:wrap;gap:10px;padding:14px 24px}
.dw-ex{background:var(--bg);border-radius:10px;padding:10px 14px;cursor:pointer;transition:background .15s;display:flex;flex-direction:column;min-width:80px}
.dw-ex:hover{background:#e8e8e8} .dw-ex.speaking{background:#d6eaf8}
.dw-ex-vi{font-size:19px;font-weight:600}
.dw-ex-en{font-size:12px;color:var(--muted);margin-top:2px}
.dw-drill-card{background:var(--card);border:2px solid var(--border);border-radius:var(--radius);padding:40px;text-align:center;max-width:640px;margin:0 auto}
.dw-drill-num{font-size:12px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);margin-bottom:16px}
.dw-drill-letters{font-size:72px;font-weight:800;color:var(--red);margin-bottom:12px;cursor:pointer;transition:transform .15s;display:inline-block}
.dw-drill-letters:hover{transform:scale(1.05)}
.dw-drill-desc{font-size:14px;color:var(--muted);line-height:1.6;max-width:480px;margin:0 auto 6px}
.dw-drill-tip{font-size:13px;color:var(--blue);background:#eaf4fc;border-radius:8px;padding:8px 14px;display:inline-block;margin:10px 0}
.dw-drill-examples{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:20px}
.dw-drill-nav{display:flex;align-items:center;gap:12px;justify-content:center;margin-top:28px;flex-wrap:wrap}
.dw-nav-btn{padding:10px 24px;border:2px solid var(--border);border-radius:10px;background:none;font-size:14px;font-weight:600;cursor:pointer;transition:all .15s}
.dw-nav-btn:hover{border-color:var(--blue);color:var(--blue)}
.dw-hear-big{padding:12px 32px;background:var(--red);color:#fff;border:none;border-radius:12px;font-size:16px;font-weight:700;cursor:pointer;transition:opacity .15s}
.dw-hear-big:hover{opacity:.88}
.tc-section{margin-bottom:36px}
.tc-header{display:flex;align-items:center;gap:14px;padding:14px 20px;border-radius:12px;margin-bottom:14px}
.tc-big-mark{font-size:40px;font-weight:800;min-width:54px;text-align:center;line-height:1}
.tc-info h3{font-size:17px;font-weight:700;margin-bottom:2px}
.tc-info p{font-size:13px;opacity:.9}
.tc-words{display:flex;flex-wrap:wrap;gap:10px}
.tc-word{background:var(--card);border:1.5px solid var(--border);border-radius:10px;padding:10px 14px;cursor:pointer;transition:all .15s;min-width:80px}
.tc-word:hover{box-shadow:var(--shadow);transform:translateY(-1px)}
.tc-word.speaking{border-color:var(--blue);background:#eaf4fc}
.tcw-vi{font-size:18px;font-weight:600}
.tcw-en{font-size:11px;color:var(--muted);margin-top:2px}
.tc-empty{font-size:13px;color:var(--muted);font-style:italic}
.ai-textarea{width:100%;padding:14px 18px;font-size:15px;border:2px solid var(--border);border-radius:12px;outline:none;resize:vertical;font-family:inherit;transition:border-color .15s;min-height:90px;line-height:1.6}
.ai-textarea:focus{border-color:var(--purple)}
.ai-gen-btn{display:inline-flex;align-items:center;gap:8px;margin-top:20px;padding:13px 30px;background:linear-gradient(135deg,#6c3483,#9b59b6);color:#fff;border:none;border-radius:12px;font-size:15px;font-weight:700;cursor:pointer;transition:opacity .2s,transform .15s}
.ai-gen-btn:hover{opacity:.9;transform:scale(1.02)}
.ai-gen-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.ai-opt-group{display:flex;flex-direction:column;gap:8px}
.ai-opt-label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted)}
.ai-seg{display:flex;gap:6px;flex-wrap:wrap}
.ai-seg-btn{padding:7px 16px;border:2px solid var(--border);border-radius:20px;background:none;font-size:13px;font-weight:600;cursor:pointer;transition:all .15s}
.ai-seg-btn.active{border-color:var(--purple);background:#f3e5f5;color:#6a1b9a}
.ai-seg-btn:hover:not(.active){border-color:#ce93d8}
.ai-loading{text-align:center;padding:60px 20px;color:var(--muted)}
.ai-spinner{width:48px;height:48px;border:4px solid var(--border);border-top-color:var(--purple);border-radius:50%;animation:spin .8s linear infinite;margin:0 auto 16px}
@keyframes spin{to{transform:rotate(360deg)}}
.ai-tip-bar{background:linear-gradient(90deg,#f3e5f5,#e8eaf6);border:1px solid #ce93d8;border-radius:10px;padding:10px 16px;font-size:13px;color:#4a148c;margin-bottom:20px}
.ai-exchanges{display:flex;flex-direction:column;gap:16px}
.ai-ex{display:flex;gap:12px;align-items:flex-start}
.ai-ex.ai-ex-b{flex-direction:row-reverse}
.ai-avatar{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;color:#fff;background:var(--red);flex-shrink:0}
.ai-av-b{background:var(--blue)}
.ai-bubble-wrap{background:var(--card);border:1.5px solid var(--border);border-radius:var(--radius);padding:14px 18px;max-width:580px;flex:1}
.ai-ex-b .ai-bubble-wrap{border-top-right-radius:4px}
.ai-ex:not(.ai-ex-b) .ai-bubble-wrap{border-top-left-radius:4px}
.ai-words-line{line-height:2.4;padding-bottom:4px}
.ai-word{display:inline-flex;flex-direction:column;align-items:center;cursor:pointer;margin:1px 2px;padding:3px 7px 2px;border-radius:7px;border:1.5px solid transparent;transition:all .15s;vertical-align:middle;user-select:none}
.ai-word:hover{background:#fff0f0;border-color:#e8a0a0}
.ai-word.revealed{background:#fef3e2;border-color:var(--gold)}
.aw-vi{font-size:16px;font-weight:600;color:var(--text);line-height:1.2}
.ai-word.revealed .aw-vi{color:var(--red)}
.aw-en{font-size:10px;color:var(--blue);font-weight:600;line-height:1.1;display:none;margin-top:1px;white-space:nowrap}
.ai-word.revealed .aw-en{display:block}
.ai-ex-actions{display:flex;gap:8px;align-items:center;margin-top:10px;flex-wrap:wrap}
.ai-btn-hear{background:none;border:1.5px solid var(--border);border-radius:8px;padding:5px 11px;font-size:13px;cursor:pointer;transition:all .15s;color:var(--muted)}
.ai-btn-hear:hover{border-color:var(--red);color:var(--red)}
.ai-btn-reveal{background:none;border:1.5px solid var(--border);border-radius:8px;padding:5px 11px;font-size:12px;cursor:pointer;transition:all .15s;color:var(--muted)}
.ai-btn-reveal:hover{border-color:var(--gold);color:#7d6500}
.ai-btn-en{background:none;border:1.5px solid var(--border);border-radius:8px;padding:5px 11px;font-size:12px;cursor:pointer;color:var(--blue);transition:all .15s}
.ai-btn-en:hover{border-color:var(--blue)}
.ai-full-en{font-size:13px;color:var(--muted);font-style:italic;margin-top:8px;padding-top:8px;border-top:1px dashed var(--border);line-height:1.6}
.ai-regen-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:20px;padding:14px 18px;background:var(--card);border:1px solid var(--border);border-radius:12px}
.ai-dlg-title{font-size:18px;font-weight:800;flex:1}
.ai-scene-note{font-size:13px;color:#7d6500;background:#fffaed;border:1px solid var(--gold);border-radius:8px;padding:10px 14px;margin-bottom:16px;line-height:1.55}
#audio-bar{position:fixed;bottom:20px;right:20px;background:#222;color:#fff;border-radius:28px;padding:9px 18px;font-size:13px;display:flex;align-items:center;gap:9px;box-shadow:0 4px 20px rgba(0,0,0,.28);opacity:0;transform:translateY(8px);transition:all .25s;pointer-events:none;z-index:999}
#audio-bar.show{opacity:1;transform:translateY(0);pointer-events:auto}
.audio-dot{width:8px;height:8px;background:var(--gold);border-radius:50%;animation:pulse 1s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}
#audio-stop{background:none;border:none;color:#888;cursor:pointer;font-size:16px;padding:0 0 0 4px}
.hamburger{display:none;position:fixed;top:12px;left:12px;z-index:100;background:var(--red);color:#fff;border:none;border-radius:8px;width:40px;height:40px;font-size:18px;cursor:pointer;align-items:center;justify-content:center}
@media(max-width:768px){
  .hamburger{display:flex}
  #sidebar{position:fixed;left:0;top:0;bottom:0;transform:translateX(-100%);transition:transform .3s}
  #sidebar.open{transform:translateX(0)}
  .hero{padding:52px 20px 24px}
  .ca,.drill-wrap,.tid-wrap{padding:24px 20px 60px}
  .vocab-grid{grid-template-columns:repeat(auto-fill,minmax(145px,1fr))}
  .welcome{padding:52px 20px}
  .mode-grid{grid-template-columns:1fr}
  .drill-limit-grid{grid-template-columns:1fr}
  .fg-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
  .fg-header{flex-direction:column;align-items:flex-start;gap:8px}
  .hero::after{font-size:60px;right:16px}
  #audio-bar{bottom:76px;right:12px}
  #copilot-btn{right:12px}
}
@media(max-width:480px){
  .hero{padding:48px 14px 20px}
  .hero::after{display:none}
  .ca,.drill-wrap,.tid-wrap,.welcome{padding:16px 14px 60px}
  .vocab-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
  .mình-chip{min-width:110px;padding:8px 10px}
  .tid-opts{grid-template-columns:repeat(2,1fr)}
  .type-input{font-size:16px;padding:12px 14px}
  .fc-knew,.fc-didnt{flex:1;padding:12px 16px;font-size:14px}
  .btn-check,.btn-next{padding:12px 20px;min-height:44px;font-size:14px}
  .fc-row{gap:10px}
  #audio-bar{right:8px;bottom:72px;font-size:12px;padding:8px 14px}
  #copilot-btn{right:8px;bottom:68px}
}

/* Tone-colored syllable spans — matches sidebar tone legend */
.tc-syl-0 { color:#8e9eab }
.tc-syl-1 { color:#9b59b6 }
.tc-syl-2 { color:#2980b9 }
.tc-syl-3 { color:#e74c3c }
.tc-syl-4 { color:#e67e22 }
.tc-syl-5 { color:#27ae60 }

/* Vocab card tone left-border accents */
.vcard-tone-0 { border-left:4px solid #8e9eab }
.vcard-tone-1 { border-left:4px solid #9b59b6 }
.vcard-tone-2 { border-left:4px solid #2980b9 }
.vcard-tone-3 { border-left:4px solid #e74c3c }
.vcard-tone-4 { border-left:4px solid #e67e22 }
.vcard-tone-5 { border-left:4px solid #27ae60 }

/* Tone badge chip on card */
.vcard-tone-badge {
  font-size:10px;padding:2px 6px;border-radius:4px;font-weight:700;
  letter-spacing:.3px;white-space:nowrap;flex-shrink:0;
}
.vtb-0{background:#eaecee;color:#2c3e50}
.vtb-1{background:#f4ecf7;color:#76448a}
.vtb-2{background:#d6eaf8;color:#1a5276}
.vtb-3{background:#fadbd8;color:#b03a2e}
.vtb-4{background:#fef9e7;color:#935116}
.vtb-5{background:#d5f5e3;color:#1e8449}

/* Emoji on vocab card */
.vcard-emoji { font-size:26px; line-height:1; margin-bottom:6px; display:block }

/* Override default vcard-vi color — now set per-syllable */
.vcard-vi { font-size:19px; font-weight:600; margin-bottom:3px }

/* ===== FAVORITES ===== */
.fav-btn {
  background: none; border: none; cursor: pointer;
  font-size: 18px; line-height: 1; padding: 2px 4px;
  opacity: .45; transition: opacity .15s, transform .15s;
  flex-shrink: 0;
}
.fav-btn:hover { opacity: 1; transform: scale(1.2); }
.fav-btn.fav-on { opacity: 1; }

/* Vocab card when favorited */
.vcard.favorited {
  background: #fffbf0;
  box-shadow: 0 0 0 2px #f39c12, var(--shadow);
}

/* Phrase card when favorited */
.phrase-card.favorited {
  background: #fffbf0;
  border-color: #f39c12;
}

/* Favorites page */
.fav-empty {
  text-align: center; padding: 60px 20px; color: var(--muted);
}
.fav-empty .fav-empty-icon { font-size: 56px; margin-bottom: 16px; }
.fav-group { margin-bottom: 36px; }
.fav-group-title {
  font-size: 13px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .8px; color: var(--muted);
  margin-bottom: 12px; padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 8px;
}
.fav-item {
  background: var(--card); border: 1.5px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px;
  display: flex; align-items: flex-start; gap: 12px;
  margin-bottom: 10px; transition: box-shadow .15s, opacity .15s, border-color .15s;
}
.fav-item:hover { box-shadow: var(--shadow); }
.fav-item.fav-dragging { opacity: .4; }
.fav-item.fav-drag-over { border-color: var(--blue); box-shadow: 0 0 0 2px var(--blue); }
.fav-drag-handle { font-size: 18px; color: var(--muted); cursor: grab; padding: 2px 4px 0; user-select: none; line-height: 1; flex-shrink: 0; }
.fav-drag-handle:active { cursor: grabbing; }
.fav-item-emoji { font-size: 24px; min-width: 32px; }
.fav-item-body { flex: 1; }
.fav-item-vi {
  font-size: 18px; font-weight: 600; margin-bottom: 2px;
  cursor: pointer;
}
.fav-item-pron { font-size: 11px; color: var(--muted); font-style: italic; margin-bottom: 4px; }
.fav-item-en { font-size: 13px; }
.fav-item-source { font-size: 11px; color: var(--blue); margin-top: 3px; }
.fav-remove {
  background: none; border: none; font-size: 18px; cursor: pointer;
  color: #e74c3c; opacity: .5; transition: opacity .15s;
  padding: 2px 4px; flex-shrink: 0;
}
.fav-remove:hover { opacity: 1; }
.fav-drill-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 28px; background: var(--green); color: #fff;
  border: none; border-radius: 12px; font-size: 15px; font-weight: 700;
  cursor: pointer; transition: opacity .2s;
}
.fav-drill-btn:hover { opacity: .88; }
.fav-drill-btn:disabled { background: #95a5a6; cursor: default; }
.sb-fav-count {
  font-size: 10px; background: #e74c3c; color: #fff;
  border-radius: 10px; padding: 1px 6px; font-weight: 700;
  margin-left: 4px;
}

/* ====== CO-PILOT DRAWER ====== */
#copilot-btn{position:fixed;bottom:72px;right:20px;width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#7d3c98,#2471a3);color:#fff;font-size:20px;border:none;cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,.25);z-index:200;transition:transform .2s,background .2s;display:flex;align-items:center;justify-content:center}
#copilot-btn:hover{transform:scale(1.09)}
#copilot-btn.cp-open{background:linear-gradient(135deg,#2471a3,#7d3c98)}
#copilot-drawer{position:fixed;top:0;right:0;width:min(360px,92vw);height:100%;background:#fff;border-left:1px solid var(--border);box-shadow:-4px 0 24px rgba(0,0,0,.12);display:flex;flex-direction:column;z-index:199;transition:transform .25s ease;transform:translateX(100%)}
#copilot-drawer.cp-open{transform:translateX(0)}
#cp-header{display:flex;align-items:center;gap:8px;padding:14px 16px;border-bottom:1px solid var(--border);background:linear-gradient(90deg,#f9f0ff,#eaf4fc);flex-shrink:0}
#cp-header-title{font-size:14px;font-weight:700;color:#4a235a;flex:1}
#cp-ctx-badge{font-size:11px;background:#e8daef;color:#6c3483;border-radius:6px;padding:2px 8px;font-weight:600;white-space:nowrap;max-width:120px;overflow:hidden;text-overflow:ellipsis}
#cp-reset-btn{background:none;border:1px solid #e74c3c;color:#e74c3c;border-radius:8px;font-size:11px;padding:3px 8px;cursor:pointer;white-space:nowrap}
#cp-reset-btn:hover{background:#fdf2f2}
#cp-close-btn{background:none;border:none;font-size:18px;color:var(--muted);cursor:pointer;padding:0 2px;line-height:1}
#cp-messages{flex:1;overflow-y:auto;padding:14px 14px 8px;display:flex;flex-direction:column;gap:12px}
#cp-empty{text-align:center;margin-top:40px;color:var(--muted);font-size:13px;line-height:1.6}
#cp-empty .cp-empty-icon{font-size:36px;margin-bottom:8px}
.cp-msg{display:flex;flex-direction:column;max-width:92%}
.cp-msg-user{align-self:flex-end;align-items:flex-end}
.cp-msg-ai{align-self:flex-start;align-items:flex-start}
.cp-bubble{padding:10px 13px;border-radius:14px;font-size:13px;line-height:1.5}
.cp-msg-user .cp-bubble{background:#4a235a;color:#fff;border-bottom-right-radius:4px}
.cp-msg-ai .cp-bubble{background:#f4f6f8;color:var(--text);border-bottom-left-radius:4px}
.cp-patch{margin-top:8px;background:#fff;border:1.5px solid #d2b4de;border-radius:12px;overflow:hidden;width:100%}
.cp-patch-header{padding:8px 12px;background:#f9f0ff;font-size:12px;font-weight:700;color:#6c3483}
.cp-patch-hint{padding:2px 12px 6px;font-size:11px;color:var(--muted)}
.cp-mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:8px 10px;max-height:260px;overflow-y:auto}
.cp-mini-card{background:#fafafa;border:1.5px solid #e8e8e8;border-radius:8px;padding:6px 8px;font-size:12px;cursor:pointer;position:relative;transition:opacity .15s,border-color .15s,background .15s;user-select:none}
.cp-mini-card.cp-card-on{border-color:#7d3c98;background:#fdf6ff}
.cp-mini-card.cp-card-off{opacity:.38;background:#f4f4f4;border-color:#e0e0e0}
.cp-mini-card.cp-card-off .mc-vi{text-decoration:line-through}
.cp-card-check{position:absolute;top:4px;right:5px;font-size:10px;color:#7d3c98;font-weight:700}
.cp-mini-card.cp-card-off .cp-card-check{color:#bbb}
.cp-mini-card .mc-emoji{font-size:16px}
.cp-mini-card .mc-vi{font-weight:600;color:var(--red);font-size:13px}
.cp-mini-card .mc-en{color:var(--muted);font-size:11px;margin-top:1px}
.cp-apply-btn{display:block;width:100%;padding:9px;background:linear-gradient(90deg,#7d3c98,#2471a3);color:#fff;border:none;font-size:13px;font-weight:600;cursor:pointer;transition:opacity .15s}
.cp-apply-btn:hover{opacity:.88}
.cp-apply-btn:disabled{background:#95a5a6;cursor:default;opacity:1}
.cp-loading{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);padding:8px 2px}
.cp-dot{width:6px;height:6px;border-radius:50%;background:#9b59b6;animation:cp-bounce .9s infinite}
.cp-dot:nth-child(2){animation-delay:.15s}
.cp-dot:nth-child(3){animation-delay:.3s}
@keyframes cp-bounce{0%,80%,100%{transform:translateY(0)}40%{transform:translateY(-6px)}}
#cp-mode-bar{display:flex;gap:0;padding:8px 12px 0;flex-shrink:0}
.cp-mode-btn{flex:1;padding:7px 0;font-size:12px;font-weight:600;border:1.5px solid #d2b4de;background:#fff;color:#9b59b6;cursor:pointer;transition:background .15s,color .15s;letter-spacing:.3px}
.cp-mode-btn:first-child{border-radius:20px 0 0 20px;border-right:none}
.cp-mode-btn:last-child{border-radius:0 20px 20px 0}
.cp-mode-btn.cp-mode-active{background:#7d3c98;color:#fff;border-color:#7d3c98}
.cp-mode-btn.cp-mode-active + .cp-mode-btn{border-left-color:#7d3c98}
#cp-input-bar{display:flex;align-items:center;gap:8px;padding:8px 12px 10px;border-top:1px solid var(--border);flex-shrink:0}
#cp-input{flex:1;border:1.5px solid var(--border);border-radius:20px;padding:8px 14px;font-size:13px;outline:none;transition:border-color .15s}
#cp-input:focus{border-color:#9b59b6}
#cp-input.cp-ask-mode{border-color:#aed6f1}
#cp-input.cp-ask-mode:focus{border-color:#2471a3}
#cp-send-btn.cp-ask-mode{background:linear-gradient(135deg,#1565c0,#2471a3)}
#cp-send-btn{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#7d3c98,#2471a3);color:#fff;border:none;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:opacity .15s}
#cp-send-btn:hover{opacity:.85}

/* ====== OVERFLOW MENU ON VOCAB CARDS ====== */
.vcard{position:relative}
.vcard-overflow-btn{position:absolute;top:8px;right:8px;background:none;border:none;font-size:18px;color:var(--muted);cursor:pointer;line-height:1;padding:0 2px;opacity:0;transition:opacity .15s}
.vcard:hover .vcard-overflow-btn{opacity:1}
.vcard-overflow-btn.ov-open{opacity:1;color:var(--text)}
.vcard-overflow-menu{position:absolute;top:32px;right:4px;background:#fff;border:1px solid var(--border);border-radius:10px;box-shadow:0 4px 16px rgba(0,0,0,.13);z-index:100;min-width:190px;overflow:hidden;display:none}
.vcard-overflow-menu.ov-open{display:block}
.vom-item{display:flex;align-items:center;gap:8px;padding:10px 14px;font-size:13px;cursor:pointer;white-space:nowrap;background:none;border:none;width:100%;text-align:left}
.vom-item:hover{background:#f5f5f5}
.tricky-badge{display:inline-block;font-size:10px;background:#fef0e0;color:#e67e22;border:1px solid #f0a04a;border-radius:6px;padding:1px 5px;font-weight:700;margin-bottom:3px}
.vcard-pron-on .vcard-overflow-btn{opacity:.7}

/* ====== PRONUNCIATION PRACTICE PAGE ====== */
.pron-hero{padding:32px 52px 20px;background:linear-gradient(135deg,#1a237e,#283593);color:#fff}
.pron-hero h2{font-size:26px;font-weight:700}
.pron-hero p{font-size:13px;opacity:.75;margin-top:4px}
.pron-wrap{padding:32px 52px 60px;max-width:600px}
.pron-progress-row{display:flex;align-items:center;gap:12px;margin-bottom:28px}
.pron-progress-label{font-size:13px;color:var(--muted);white-space:nowrap}
.pron-progress-bar{flex:1;height:6px;background:var(--border);border-radius:3px;overflow:hidden}
.pron-progress-fill{height:6px;background:linear-gradient(90deg,#1565c0,#7b1fa2);border-radius:3px;transition:width .4s}
.pron-card{background:var(--card);border-radius:var(--radius);padding:40px 36px;text-align:center;box-shadow:var(--shadow);border:1px solid var(--border)}
.pron-emoji-lg{font-size:48px;margin-bottom:8px}
.pron-word{font-size:52px;font-weight:700;line-height:1.15;margin:8px 0 6px;letter-spacing:-1px}
.pron-guide{font-size:15px;color:var(--muted);font-style:italic;margin-bottom:5px}
.pron-en{font-size:17px;font-weight:500;margin-bottom:4px}
.pron-src{font-size:11px;color:var(--muted);margin-bottom:30px}
.pron-hear-btn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;padding:15px;border-radius:14px;border:2px solid var(--blue);color:var(--blue);background:#eaf4fc;font-size:15px;font-weight:600;cursor:pointer;transition:background .18s,color .18s;margin-bottom:18px}
.pron-hear-btn:hover{background:var(--blue);color:#fff}
.pron-hear-btn.pron-hearing{background:var(--blue);color:#fff}
.pron-actions{display:flex;gap:14px}
.pron-got-btn,.pron-tricky-btn{flex:1;padding:14px;border-radius:14px;font-size:14px;font-weight:700;cursor:pointer;transition:opacity .15s,background .15s}
.pron-got-btn{border:none;background:#27ae60;color:#fff}
.pron-got-btn:hover{opacity:.87}
.pron-tricky-btn{border:2px solid #e67e22;background:#fff;color:#e67e22}
.pron-tricky-btn:hover{background:#fef0e0}
.pron-results{background:var(--card);border-radius:var(--radius);padding:44px 36px;text-align:center;box-shadow:var(--shadow);border:1px solid var(--border)}
.pron-results h3{font-size:24px;font-weight:700;margin-bottom:20px}
.pron-score-row{display:flex;justify-content:center;gap:32px;margin-bottom:32px}
.pron-score-box{padding:18px 28px;border-radius:12px;min-width:100px}
.pron-score-box.got{background:#d5f5e3;color:#1e8449}
.pron-score-box.tricky{background:#fef0e0;color:#e67e22}
.pron-score-num{font-size:36px;font-weight:800}
.pron-score-lbl{font-size:12px;font-weight:600;margin-top:2px}
.pron-result-btns{display:flex;flex-direction:column;gap:10px;max-width:320px;margin:0 auto}
.pron-result-btns button{padding:13px;border-radius:12px;font-size:14px;font-weight:600;cursor:pointer;border:none}
.pron-retry-btn{background:linear-gradient(90deg,#e67e22,#d35400);color:#fff}
.pron-restart-btn{background:var(--blue);color:#fff}
.pron-back-btn{background:var(--border);color:var(--text)}
.lang-switch{display:flex;gap:6px;padding:10px 20px;border-bottom:1px solid rgba(255,255,255,.08)}
.lang-btn{padding:5px 10px;border-radius:6px;border:1.5px solid rgba(255,255,255,.15);background:none;color:rgba(255,255,255,.5);font-size:12px;cursor:pointer;transition:all .15s;text-decoration:none;display:inline-block}
.lang-btn:hover{background:rgba(255,255,255,.1);color:#fff}
.lang-btn.active{background:rgba(255,255,255,.15);color:#fff;border-color:rgba(255,255,255,.3)}

/* ====== VOCABULARY BROWSER ====== */
.vocab-browser{padding:32px 52px 60px;max-width:1100px}
.vb-filter-bar{position:sticky;top:0;z-index:10;background:var(--bg);border:1.5px solid var(--border);border-radius:var(--radius);padding:14px 16px;margin-bottom:18px;box-shadow:0 2px 8px rgba(0,0,0,.04);display:flex;flex-direction:column;gap:10px}
.vb-filter-row{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap}
.vb-filter-label{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);font-weight:700;min-width:84px;padding-top:6px;flex-shrink:0}
.vb-pills{display:flex;flex-wrap:wrap;gap:6px;flex:1}
.vb-pills-themes{max-height:80px;overflow-y:auto;padding:2px}
.vb-pill{padding:5px 11px;border-radius:14px;border:1.5px solid var(--border);background:var(--card);color:var(--text);font-size:12px;font-weight:500;cursor:pointer;transition:all .12s;white-space:nowrap}
.vb-pill:hover{border-color:var(--blue);color:var(--blue)}
.vb-pill-active{background:var(--blue);color:#fff;border-color:var(--blue)}
.vb-pill-active:hover{color:#fff}
.vb-pill-tier-s{border-color:#c0392b}
.vb-pill-tier-s.vb-pill-active{background:#c0392b;border-color:#c0392b}
.vb-pill-tier-a{border-color:#d35400}
.vb-pill-tier-a.vb-pill-active{background:#d35400;border-color:#d35400}
.vb-pill-tier-b{border-color:#16a085}
.vb-pill-tier-b.vb-pill-active{background:#16a085;border-color:#16a085}
.vb-pill-tier-c{border-color:#2e86c1}
.vb-pill-tier-c.vb-pill-active{background:#2e86c1;border-color:#2e86c1}
.vb-pill-tier-d{border-color:#7d3c98}
.vb-pill-tier-d.vb-pill-active{background:#7d3c98;border-color:#7d3c98}
.vb-filter-controls{align-items:center;gap:10px}
.vb-search{flex:1;min-width:200px;padding:8px 12px;border:1.5px solid var(--border);border-radius:8px;font-size:13px;font-family:inherit;background:var(--card);color:var(--text)}
.vb-search:focus{outline:none;border-color:var(--blue)}
.vb-sort{padding:8px 10px;border:1.5px solid var(--border);border-radius:8px;font-size:13px;background:var(--card);color:var(--text);cursor:pointer;font-family:inherit}
.vb-reset{padding:7px 12px;border:none;background:none;color:var(--blue);font-size:12px;cursor:pointer;text-decoration:underline;font-family:inherit}
.vb-reset:hover{color:var(--red)}
.vb-result-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:8px;border-top:1px dashed var(--border);flex-wrap:wrap}
.vb-count{font-size:13px;color:var(--text)}
.vb-count strong{color:var(--blue)}
.vb-drill-btn{padding:8px 16px;border:none;border-radius:20px;background:var(--green);color:#fff;font-size:13px;font-weight:600;cursor:pointer;transition:opacity .15s;font-family:inherit}
.vb-drill-btn:hover{opacity:.85}
.vb-drill-btn:disabled{opacity:.4;cursor:not-allowed}
.vb-truncated{font-size:12px;color:var(--muted);font-style:italic;text-align:center;margin-bottom:10px}
.vb-grid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.vb-card{position:relative;text-align:left;padding:16px 14px 12px;display:flex;flex-direction:column;gap:4px}
.vb-card.favorited{border-color:#e74c3c;box-shadow:0 0 0 1px #e74c3c inset}
.vb-en{font-size:14px;font-weight:700;color:var(--text);line-height:1.3;margin-bottom:2px;padding-right:32px}
.vb-card .vgrid-vi{font-size:16px;text-align:left}
.vb-card .vgrid-pron{font-size:11px;color:var(--muted);font-style:italic;text-align:left}
.vb-fav{position:absolute;top:8px;right:8px;background:none;border:none;font-size:14px;cursor:pointer;opacity:.55;transition:opacity .15s,transform .15s;padding:2px;line-height:1;z-index:2}
.vb-fav:hover{opacity:1;transform:scale(1.2)}
.vb-fav.fav-on{opacity:1}
.vb-themes{display:flex;flex-wrap:wrap;gap:3px;margin-top:6px}
.vb-theme-tag{font-size:9px;color:var(--muted);background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:1px 5px;line-height:1.4;white-space:nowrap}
.vb-ex{position:absolute;left:0;right:0;top:100%;margin-top:4px;font-size:11px;color:#fff;background:rgba(35,42,55,.95);border-radius:8px;padding:8px 10px;font-style:italic;line-height:1.4;box-shadow:0 4px 12px rgba(0,0,0,.18);z-index:30;opacity:0;pointer-events:none;transform:translateY(-4px);transition:opacity .15s,transform .15s;white-space:normal}
.vb-card:hover .vb-ex{opacity:1;transform:translateY(0)}

/* ====== RELATED VOCABULARY (in conversation page) ====== */
.related-vocab-section{margin-top:32px;background:linear-gradient(135deg,#fdf6ff,#f0f4ff);border:1.5px solid var(--border);border-radius:var(--radius);padding:20px 22px}
.rv-header{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.rv-icon{font-size:28px;width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:#fff;border-radius:12px;flex-shrink:0;box-shadow:0 1px 4px rgba(0,0,0,.06)}
.rv-title{font-size:18px;font-weight:700;color:var(--text)}
.rv-sub{font-size:12px;color:var(--muted);margin-top:1px}
.rv-vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.rv-card{position:relative;text-align:center}
.rv-note{font-size:10px;color:var(--muted);margin-top:6px;font-style:italic;line-height:1.4;border-top:1px dashed var(--border);padding-top:6px}
.rv-fav{position:absolute;top:4px;right:4px;background:none;border:none;font-size:13px;cursor:pointer;padding:2px;line-height:1}
.rv-drag-handle{position:absolute;top:4px;left:4px;cursor:grab;color:var(--muted);font-size:12px;opacity:0;line-height:1;user-select:none;transition:opacity .15s}
.rv-card:hover .rv-drag-handle{opacity:.7}
.rv-drag-handle:hover{opacity:1!important}
.rv-card:active .rv-drag-handle{cursor:grabbing}
.rv-remove-btn{position:absolute;bottom:4px;right:4px;background:none;border:none;color:var(--muted);cursor:pointer;font-size:13px;font-weight:700;line-height:1;padding:2px 3px;opacity:0;transition:opacity .15s}
.rv-card:hover .rv-remove-btn{opacity:.55}
.rv-remove-btn:hover{opacity:1!important;color:var(--red,#c0392b)}
.rv-card.rv-dragging{opacity:.4;border-style:dashed}
.rv-card.rv-drag-over{border-color:var(--blue);box-shadow:0 0 0 2px var(--blue)}
.subsection-add-row{margin-top:14px;padding-top:2px}
.subsection-add-btn{background:none;border:1.5px dashed var(--border);color:var(--muted);font-size:13px;padding:7px 16px;border-radius:20px;cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;gap:5px}
.subsection-add-btn:hover{border-color:var(--blue);color:var(--blue);background:#f0f6ff}
.subsection-add-form{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:6px}
.subsection-add-input{flex:1;min-width:200px;padding:8px 12px;border:1.5px solid var(--border);border-radius:8px;font-size:13px;background:var(--card)}
.subsection-add-input:focus{outline:none;border-color:var(--blue)}
.subsection-add-submit{padding:8px 16px;background:var(--blue);color:#fff;border:none;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer}
.subsection-add-submit:disabled{opacity:.6;cursor:default}
.subsection-add-cancel{padding:8px 12px;background:none;border:1.5px solid var(--border);color:var(--muted);border-radius:8px;font-size:13px;cursor:pointer}

@media (max-width:720px){
  .vocab-browser{padding:18px 16px 40px}
  .vb-filter-row{flex-direction:column;gap:6px}
  .vb-filter-label{padding-top:0}
  .vb-pills-themes{max-height:120px}
  .vb-result-row{flex-direction:column;align-items:stretch}
  .vb-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
  .related-vocab-section{padding:16px 14px}
}

/* ====== VOCAB TABLE ====== */
.vocab-table{padding:32px 52px 60px;max-width:1400px}
.vt-filter-bar{position:sticky;top:0;z-index:20;background:var(--bg);border:1.5px solid var(--border);border-radius:var(--radius);padding:14px 16px;margin-bottom:14px;box-shadow:0 2px 8px rgba(0,0,0,.04);display:flex;flex-direction:column;gap:10px}
.vt-filter-row{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap}
.vt-filter-label{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);font-weight:700;min-width:84px;padding-top:6px;flex-shrink:0}
.vt-pills{display:flex;flex-wrap:wrap;gap:6px;flex:1}
.vt-pills-themes{padding:2px}
.vt-pill{padding:5px 11px;border-radius:14px;border:1.5px solid var(--border);background:var(--card);color:var(--text);font-size:12px;font-weight:500;cursor:pointer;transition:all .12s;white-space:nowrap;font-family:inherit}
.vt-pill:hover{border-color:var(--blue);color:var(--blue)}
.vt-pill-active{background:var(--blue);color:#fff;border-color:var(--blue)}
.vt-pill-active:hover{color:#fff}
.vt-pill-tier-s{border-color:#c0392b}
.vt-pill-tier-s.vt-pill-active{background:#c0392b;border-color:#c0392b}
.vt-pill-tier-a{border-color:#d35400}
.vt-pill-tier-a.vt-pill-active{background:#d35400;border-color:#d35400}
.vt-pill-tier-b{border-color:#16a085}
.vt-pill-tier-b.vt-pill-active{background:#16a085;border-color:#16a085}
.vt-pill-tier-c{border-color:#2e86c1}
.vt-pill-tier-c.vt-pill-active{background:#2e86c1;border-color:#2e86c1}
.vt-pill-tier-d{border-color:#7d3c98}
.vt-pill-tier-d.vt-pill-active{background:#7d3c98;border-color:#7d3c98}
.vt-filter-controls{align-items:center;gap:10px}
.vt-search{flex:1;min-width:200px;padding:8px 12px;border:1.5px solid var(--border);border-radius:8px;font-size:13px;font-family:inherit;background:var(--card);color:var(--text)}
.vt-search:focus{outline:none;border-color:var(--blue)}
.vt-reset{padding:7px 12px;border:none;background:none;color:var(--blue);font-size:12px;cursor:pointer;text-decoration:underline;font-family:inherit}
.vt-reset:hover{color:var(--red)}

.vt-pagination{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 14px;background:var(--card);border:1.5px solid var(--border);border-radius:10px;margin-bottom:12px;flex-wrap:wrap;font-size:13px}
.vt-page-size{display:flex;align-items:center;gap:6px}
.vt-page-size label{font-size:12px;color:var(--muted)}
.vt-page-size select{padding:5px 8px;border:1.5px solid var(--border);border-radius:6px;font-size:12px;background:var(--card);color:var(--text);cursor:pointer;font-family:inherit}
.vt-page-nav{display:flex;align-items:center;gap:8px}
.vt-page-btn{padding:5px 12px;border:1.5px solid var(--border);background:var(--card);color:var(--text);border-radius:6px;font-size:12px;cursor:pointer;font-family:inherit;font-weight:500}
.vt-page-btn:hover:not(:disabled){border-color:var(--blue);color:var(--blue)}
.vt-page-btn:disabled{opacity:.4;cursor:not-allowed}
.vt-page-label{font-size:12px;color:var(--text);display:inline-flex;align-items:center;gap:4px}
.vt-page-jump{width:50px;padding:4px 6px;border:1.5px solid var(--border);border-radius:5px;font-size:12px;text-align:center;background:var(--card);color:var(--text);font-family:inherit}
.vt-page-jump:focus{outline:none;border-color:var(--blue)}
.vt-page-info{font-size:12px;color:var(--muted)}
.vt-page-info strong{color:var(--text)}

.vt-table-wrap{overflow-x:auto;border:1.5px solid var(--border);border-radius:10px;background:var(--card);box-shadow:0 1px 4px rgba(0,0,0,.04)}
.vt-table{width:100%;border-collapse:collapse;font-size:13px;min-width:880px}
.vt-table thead{background:#f1f1ee;border-bottom:2px solid var(--border)}
.vt-table th{padding:10px 12px;text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);font-weight:700;white-space:nowrap;border-bottom:2px solid var(--border)}
.vt-th-sort{cursor:pointer;user-select:none}
.vt-th-sort:hover{color:var(--blue);background:#eaeaea}
.vt-th-active{color:var(--blue)}
.vt-sort-arrow{display:inline-block;margin-left:4px;font-size:9px;color:var(--blue);min-width:8px}
.vt-table td{padding:9px 12px;border-bottom:1px solid var(--border);vertical-align:middle}
.vt-row:hover{background:#fafaf6}
.vt-row-fav{background:#fffaf2}
.vt-row-fav:hover{background:#fff4e3}

.vt-rank{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;width:48px}
.vt-en{font-weight:600;color:var(--text);cursor:pointer;min-width:100px}
.vt-en:hover{color:var(--blue);text-decoration:underline}
.vt-target{font-size:16px;cursor:pointer;color:var(--text);min-width:120px;font-weight:500}
.vt-target:hover{color:var(--blue)}
.vt-target.speaking, .vt-en.speaking{color:var(--green);text-shadow:0 0 6px rgba(30,132,73,.3)}
.vt-pron{font-size:11px;color:var(--muted);font-style:italic;white-space:nowrap}
.vt-tier-cell{width:50px}
.vt-tier-badge{font-size:10px;font-weight:800;padding:2px 7px;border-radius:8px;color:#fff;letter-spacing:.5px;background:#888;line-height:1.2;display:inline-block}
.vt-tier-s{background:#c0392b}
.vt-tier-a{background:#d35400}
.vt-tier-b{background:#16a085}
.vt-tier-c{background:#2e86c1}
.vt-tier-d{background:#7d3c98}
.vt-cefr{font-size:11px;font-weight:700;color:var(--text);width:55px;text-transform:uppercase;letter-spacing:.5px}
.vt-pos{font-size:11px;color:var(--muted);font-style:italic;width:60px}
.vt-tone{width:50px;text-align:center}
.vt-tone-badge{display:inline-block;font-size:10px;font-weight:700;padding:2px 7px;border-radius:8px;line-height:1.2;min-width:18px;text-align:center}
.vt-tone-empty{background:transparent;color:var(--muted)}
.vt-conv{font-size:11px;font-weight:600;color:var(--text);text-transform:capitalize;white-space:nowrap}
.vt-conv-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#bbb;margin-right:5px;vertical-align:middle}
.vt-conv-high{color:var(--green)}
.vt-conv-high .vt-conv-dot{background:var(--green)}
.vt-conv-medium{color:#d4ac0d}
.vt-conv-medium .vt-conv-dot{background:#d4ac0d}
.vt-conv-low{color:var(--muted)}
.vt-conv-low .vt-conv-dot{background:#999}
.vt-themes{font-size:10px;min-width:140px}
.vt-theme-chip{display:inline-block;background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:2px 6px;margin:1px 3px 1px 0;font-size:10px;color:var(--muted);white-space:nowrap}
.vt-theme-more{font-size:10px;color:var(--muted);font-style:italic;margin-left:2px}
.vt-prio{width:42px;text-align:center}
.vt-prio-badge{display:inline-block;font-size:11px;font-weight:700;color:var(--blue);background:#eaf4fc;border-radius:8px;padding:2px 7px;line-height:1.2;min-width:18px}
.vt-prio-empty{background:transparent;color:var(--muted)}
.vt-use{width:48px;text-align:center}
.vt-use-badge{display:inline-block;font-size:11px;font-weight:800;border-radius:8px;padding:2px 7px;line-height:1.2;min-width:24px;color:#fff;font-variant-numeric:tabular-nums}
.vt-use-high{background:#16a085}
.vt-use-mid{background:#2e86c1}
.vt-use-amber{background:#d35400}
.vt-use-low{background:#999;color:#fff}
.vt-fav-cell{width:36px;text-align:center}
.vt-fav{background:none;border:none;font-size:14px;cursor:pointer;opacity:.55;transition:opacity .15s,transform .15s;padding:2px;line-height:1}
.vt-fav:hover{opacity:1;transform:scale(1.2)}
.vt-fav.fav-on{opacity:1}
.vt-empty{color:var(--border)}

@media (max-width:900px){
  .vocab-table{padding:18px 14px 40px}
  .vt-table th:first-child, .vt-table td:first-child{position:sticky;left:0;background:var(--card);z-index:2;box-shadow:1px 0 0 var(--border)}
  .vt-table thead th:first-child{background:#f1f1ee;z-index:3}
  .vt-table th:nth-child(2), .vt-table td:nth-child(2){position:sticky;left:50px;background:var(--card);z-index:2;box-shadow:2px 0 0 var(--border)}
  .vt-table thead th:nth-child(2){background:#f1f1ee;z-index:3}
  .vt-row:hover td:nth-child(2){background:#fafaf6}
  .vt-row-fav td:nth-child(2){background:#fffaf2}
  .vt-row-fav:hover td:nth-child(2){background:#fff4e3}
  .vt-row:hover td:first-child{background:#fafaf6}
  .vt-row-fav td:first-child{background:#fffaf2}
  .vt-row-fav:hover td:first-child{background:#fff4e3}
  .vt-pagination{font-size:12px;gap:8px}
  .vt-page-info{flex-basis:100%;text-align:center}
  .vt-filter-row{flex-direction:column;gap:6px}
  .vt-filter-label{padding-top:0}
}
@media (max-width:600px){
  /* On narrow screens, hide POS, Themes, and Tone to keep the new 13-col table readable.
     Class- and data-key-based selectors are robust to column-order changes. */
  .vt-table .vt-pos, .vt-table .vt-themes, .vt-table .vt-tone,
  .vt-table th[data-key="pos"],
  .vt-table th[data-key="tone"],
  .vt-table th[data-key="themes"]{display:none}
}

/* Card image support (vocab grid, phrase, flashcard front) */
.vc-img, .pc-img, .fc-img {
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 8px;
  background: #f4f1eb;
  aspect-ratio: 4 / 3;
}
.vc-img img, .pc-img img, .fc-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.vc-img {
  aspect-ratio: 16 / 10;
}
.pc-img {
  max-height: 220px;
  aspect-ratio: 16 / 9;
}

/* ====================================================================
   Hide-Translation / Invert practice mode
   .hide-translation: hides the "translation" side of each card (English
     in normal mode, Vietnamese in inverted mode). Clicking adds .revealed.
   .inverted: shows English first (big/bold), Vietnamese second (small/muted).
   Both classes can be combined for full hide-the-Vietnamese practice.
   ==================================================================== */

/* Position cards relatively so the badge can absolute-position. */
.hide-translation .phrase-card,
.hide-translation .vgrid-card,
.hide-english .phrase-card,
.hide-english .vgrid-card {
  position: relative;
}

/* Normal mode (not inverted): hide English translation */
.hide-translation:not(.inverted) .phrase-en,
.hide-translation:not(.inverted) .vgrid-en,
.hide-english .phrase-en,
.hide-english .vgrid-en {
  visibility: hidden;
}
.hide-translation:not(.inverted) .phrase-card.revealed .phrase-en,
.hide-translation:not(.inverted) .vgrid-card.revealed .vgrid-en,
.hide-english .phrase-card.revealed .phrase-en,
.hide-english .vgrid-card.revealed .vgrid-en {
  visibility: visible;
}

/* Inverted mode + hide: hide Vietnamese (the translation) */
.hide-translation.inverted .phrase-vi,
.hide-translation.inverted .phrase-pron {
  visibility: hidden;
}
.hide-translation.inverted .phrase-card.revealed .phrase-vi,
.hide-translation.inverted .phrase-card.revealed .phrase-pron {
  visibility: visible;
}

/* Subtle ?/✓ badge on hidden cards so user knows a translation is hidden. */
.card-hidden-badge {
  display: none;
  position: absolute;
  bottom: 6px;
  right: 8px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--muted);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  line-height: 18px;
  opacity: 0.5;
  cursor: pointer;
  user-select: none;
  z-index: 2;
  transition: background 0.15s, opacity 0.15s, transform 0.18s;
}
.card-hidden-badge::before { content: '?'; }
@media(hover:hover){
  .card-hidden-badge:hover { opacity: 1; transform: scale(1.15); }
}
.hide-translation .phrase-card .card-hidden-badge,
.hide-translation .vgrid-card .card-hidden-badge,
.hide-english .phrase-card .card-hidden-badge,
.hide-english .vgrid-card .card-hidden-badge {
  display: block;
}
.hide-translation .phrase-card.revealed .card-hidden-badge,
.hide-translation .vgrid-card.revealed .card-hidden-badge,
.hide-english .phrase-card.revealed .card-hidden-badge,
.hide-english .vgrid-card.revealed .card-hidden-badge {
  background: #16a085;
  opacity: 1;
}
.hide-translation .phrase-card.revealed .card-hidden-badge::before,
.hide-translation .vgrid-card.revealed .card-hidden-badge::before,
.hide-english .phrase-card.revealed .card-hidden-badge::before,
.hide-english .vgrid-card.revealed .card-hidden-badge::before {
  content: '\2713';
}

/* ── Inverted layout: English first (big/bold), Vietnamese second (small) ── */
.inverted .phrase-vi-wrap {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.inverted .phrase-en {
  order: -2;
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  margin-top: 0;
  margin-bottom: 4px;
}
.inverted .phrase-vi {
  order: -1;
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
}
.inverted .phrase-pron {
  order: 0;
}
.inverted .phrase-formula-tag,
.inverted .phrase-personal {
  order: 1;
}

/* ── Inverted layout for vgrid cards ── */
.inverted .vgrid-card {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.inverted .vgrid-en {
  order: -2;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin-top: 0;
  margin-bottom: 4px;
}
.inverted .vgrid-vi {
  order: -1;
  font-size: 11px;
  font-weight: 400;
  color: var(--muted);
}
.inverted .vgrid-pron {
  order: 0;
}
/* Hide-translation + inverted for vgrid: hide Vietnamese (the answer) */
.hide-translation.inverted .vgrid-vi,
.hide-translation.inverted .vgrid-pron {
  visibility: hidden;
}
.hide-translation.inverted .vgrid-card.revealed .vgrid-vi,
.hide-translation.inverted .vgrid-card.revealed .vgrid-pron {
  visibility: visible;
}

/* ── Toggle buttons (Invert + Hide Translation) ── */
.hide-en-toggle,
.invert-toggle {
  flex: 0 0 auto;
  padding: 12px 18px;
  background: var(--card);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.hide-en-toggle:hover {
  border-color: #d35400;
  color: #d35400;
}
.hide-en-toggle.active {
  background: #fff4e3;
  border-color: #d35400;
  color: #d35400;
}
.invert-toggle:hover {
  border-color: #2980b9;
  color: #2980b9;
}
.invert-toggle.active {
  background: #eaf4fb;
  border-color: #2980b9;
  color: #2980b9;
}
/* Compact in .sh header */
.sh .hide-en-toggle,
.sh .invert-toggle {
  padding: 8px 14px;
  font-size: 12px;
  border-radius: 20px;
}
/* In conv drill-button row */
.conv-drill-btns .hide-en-toggle,
.conv-drill-btns .invert-toggle {
  padding: 12px 18px;
  font-size: 13px;
}
/* In My Phrases compact header */
.ph-header-compact .hide-en-toggle,
.ph-header-compact .invert-toggle {
  padding: 8px 14px;
  font-size: 12px;
  border-radius: 20px;
}
/* Keyboard hint pill in hide-translation button */
.hide-en-toggle kbd {
  background: rgba(0,0,0,0.06);
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  margin-left: 6px;
  opacity: 0.7;
  font-weight: 500;
  vertical-align: middle;
}

/* ====================================================================
   Conversation — Add Phrase inline form
   ==================================================================== */
.conv-add-row, .rv-add-row {
  margin-top: 8px;
  margin-bottom: 4px;
}
.conv-add-btn, .rv-add-btn {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  padding: 6px 0;
  transition: color .15s;
}
.conv-add-btn:hover, .rv-add-btn:hover { color: var(--text); }
.conv-add-form, .rv-add-form {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  padding: 10px 0 4px;
}
.conv-add-input, .rv-add-input {
  flex: 1;
  min-width: 180px;
  padding: 9px 12px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  background: var(--card);
  color: var(--text);
  outline: none;
  transition: border-color .15s;
}
.conv-add-input:focus, .rv-add-input:focus { border-color: var(--blue); }
.conv-add-submit, .rv-add-submit {
  padding: 9px 18px;
  border: none;
  border-radius: 8px;
  background: var(--green);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .15s;
}
.conv-add-submit:hover, .rv-add-submit:hover { opacity: .86; }
.conv-add-submit:disabled, .rv-add-submit:disabled { opacity: .5; cursor: default; }
.conv-add-cancel, .rv-add-cancel {
  padding: 9px 14px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.conv-add-cancel:hover, .rv-add-cancel:hover { border-color: var(--text); color: var(--text); }
.conv-add-error, .rv-add-error { width: 100%; font-size: 12px; color: var(--red, #c0392b); padding: 2px 0; }

/* ====================================================================
   Mobile polish
   ==================================================================== */

/* Flex line-break: invisible on desktop, forces a new row in flex containers
   so Invert + Hide Translation always appear together on their own row. */
.drill-row-break { display: none; }

/* Hide keyboard hints on touch-only devices — no physical keyboard */
@media (max-width:768px) {
  .hide-en-toggle kbd,
  .invert-toggle kbd { display: none; }

  /* My Phrases compact header: clear the fixed hamburger button */
  .ph-header-compact { padding-top: 40px; }
}

@media (max-width:600px) {
  /* Show the flex row-break so Invert+Hide sit on their own line */
  .drill-row-break {
    display: block;
    flex-basis: 100%;
    height: 0;
    overflow: hidden;
  }
  /* Invert + Hide Translation fill the row evenly after the break */
  .conv-drill-btns .invert-toggle,
  .conv-drill-btns .hide-en-toggle {
    flex: 1;
    font-size: 12px;
    padding: 10px 12px;
  }
  /* In .sh header, let toggle buttons fill their wrapped row */
  .sh .invert-toggle,
  .sh .hide-en-toggle {
    flex: 1 0 auto;
  }
}

/* ====== VOICE INPUT — MIC BUTTON ====== */
.cp-mic{
  background:#fff;
  border:1.5px solid var(--border);
  border-radius:50%;
  width:36px;
  height:36px;
  font-size:16px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  padding:0;
  transition:background .15s, border-color .15s, box-shadow .15s;
}
.cp-mic:hover{ background:#f5f5f5; border-color:#aaa; }
.cp-mic.listening{
  background:#fff0f0;
  border-color:#c0392b;
  animation:cp-mic-pulse 0.85s ease-in-out infinite alternate;
}
@keyframes cp-mic-pulse {
  from { box-shadow:0 0 0 0 rgba(192, 57, 43, 0.55); }
  to   { box-shadow:0 0 0 9px rgba(192, 57, 43, 0); }
}
/* Inside the new-set page, the mic sits next to a textarea — keep it aligned
   to the top-right corner of the input row. */
.cls-input-row{
  position:relative;
  display:block;
}
.cls-input-row .cp-mic{
  position:absolute;
  top:10px;
  right:10px;
  width:38px;
  height:38px;
  font-size:18px;
  z-index:2;
}
.cls-textarea{
  padding-right:58px;
  min-height:120px;
  font-size:14px;
}

/* ====== CUSTOM LIST BUILDER PAGE ====== */
.cls-error{
  background:#fdecea;
  border:1px solid #f5b7b1;
  color:#922b21;
  padding:10px 14px;
  border-radius:8px;
  font-size:13px;
  margin-top:14px;
}
.cls-preview-card{
  margin-top:24px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:0 4px 18px rgba(0,0,0,.06);
  overflow:hidden;
}
.cls-preview-header{
  padding:18px 22px 12px;
  background:linear-gradient(135deg,#1a4e3a,#16a085);
  color:#fff;
}
.cls-preview-title{
  font-size:20px;
  font-weight:700;
  display:flex;
  align-items:center;
  gap:10px;
}
.cls-preview-meta{
  font-size:12px;
  opacity:.85;
  margin-top:4px;
}
.cls-preview-desc{
  padding:12px 22px;
  font-size:13px;
  color:var(--muted);
  border-bottom:1px solid var(--border);
  background:#fafafa;
}
.cls-preview-body{
  padding:8px 22px 4px;
}
.cls-prev-sub{
  margin:14px 0 18px;
}
.cls-prev-sub-head{
  font-size:14px;
  margin-bottom:8px;
  color:var(--text);
}
.cls-prev-emoji{ font-size:16px; }
.cls-prev-count{ font-size:11px; color:var(--muted); margin-left:4px; }
.cls-prev-items{
  display:grid;
  grid-template-columns:1fr;
  gap:4px;
  border:1px solid var(--border);
  border-radius:10px;
  overflow:hidden;
}
.cls-prev-item{
  display:grid;
  grid-template-columns:1.4fr 1fr 1.6fr;
  gap:10px;
  padding:8px 12px;
  font-size:13px;
  background:#fff;
  border-bottom:1px solid #f0f0f0;
}
.cls-prev-item:last-child{ border-bottom:none; }
.cls-prev-item:nth-child(even){ background:#fafafa; }
.cls-prev-vi{ font-weight:600; }
.cls-prev-pron{ color:var(--muted); font-style:italic; }
.cls-prev-en{ color:var(--text); }
.cls-preview-actions{
  display:flex;
  gap:10px;
  padding:14px 22px 20px;
  border-top:1px solid var(--border);
  background:#fafafa;
}
.cls-apply-btn{
  flex:1;
  background:linear-gradient(135deg,#16a085,#1abc9c) !important;
}
.cls-discard-btn{
  background:#fff;
  border:1.5px solid var(--border);
  color:var(--muted);
  padding:10px 18px;
  border-radius:10px;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  transition:background .15s;
}
.cls-discard-btn:hover{ background:#f5f5f5; color:var(--text); }

/* ====== SIDEBAR — CUSTOM SETS + DELETE BUTTON ====== */
.sb-badge-custom{
  background:#16a085 !important;
  color:#fff !important;
}
.sb-item-custom{ position:relative; }
.sb-del-btn{
  background:none;
  border:none;
  color:rgba(255,255,255,.4);
  font-size:16px;
  line-height:1;
  cursor:pointer;
  padding:2px 6px;
  border-radius:4px;
  opacity:0;
  transition:opacity .15s, color .15s, background .15s;
  flex-shrink:0;
}
.sb-item-custom:hover .sb-del-btn{ opacity:1; }
.sb-del-btn:hover{
  color:#e74c3c;
  background:rgba(231,76,60,.15);
}

/* ====== MY PHRASES — INLINE ADD CARD ====== */
.mp-add-card{
  background:var(--card);
  border:2px solid var(--blue);
  border-radius:12px;
  padding:18px 20px;
  margin-bottom:24px;
  position:relative;
}
.mp-add-card-header{
  font-size:14px;
  font-weight:700;
  color:var(--blue);
  text-transform:uppercase;
  letter-spacing:.8px;
  margin-bottom:4px;
}
.mp-add-card-sub{
  font-size:13px;
  color:var(--muted);
  margin-bottom:12px;
}
.mp-input-row{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}
#mp-input{
  flex:1;
  min-width:200px;
  border:1.5px solid var(--border);
  border-radius:8px;
  padding:10px 12px;
  font-size:14px;
  font-family:inherit;
  background:#fff;
  color:var(--text);
}
#mp-input:focus{
  outline:none;
  border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(36,113,163,.15);
}
.mp-mic{
  /* shares .cp-mic base styles; size matches */
}
.mp-btn-translate{
  background:var(--blue);
  color:#fff;
  border:none;
  padding:10px 16px;
  border-radius:8px;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  white-space:nowrap;
  transition:opacity .15s;
}
.mp-btn-translate:hover{ opacity:.92; }
.mp-loading{
  font-size:13px;
  color:var(--muted);
  margin-top:12px;
  font-style:italic;
}
.mp-error{
  font-size:13px;
  color:#c0392b;
  background:#fdecea;
  border:1px solid #f5b7b1;
  border-radius:8px;
  padding:8px 12px;
  margin-top:12px;
}
.mp-preview{
  margin-top:14px;
}
.mp-preview-card{
  padding:14px 16px;
  background:#f5f9ff;
  border:1.5px dashed var(--blue);
  border-radius:8px;
}
.mp-preview-vi{
  font-size:18px;
  font-weight:700;
  margin-bottom:4px;
  color:var(--text);
}
.mp-preview-pron{
  font-size:12px;
  font-style:italic;
  color:var(--muted);
  margin-bottom:6px;
}
.mp-preview-en{
  font-size:13px;
  color:var(--muted);
  margin-bottom:6px;
}
.mp-preview-note{
  font-size:12px;
  color:#555;
  border-top:1px dashed var(--border);
  padding-top:6px;
  margin-top:6px;
  line-height:1.5;
}
.mp-preview-actions{
  display:flex;
  gap:8px;
  justify-content:flex-end;
  margin-top:10px;
  flex-wrap:wrap;
}
.mp-btn{
  padding:8px 14px;
  border-radius:6px;
  font-size:13px;
  cursor:pointer;
  border:1.5px solid var(--border);
  background:var(--card);
  color:var(--text);
  font-weight:600;
  transition:opacity .15s, background .15s;
}
.mp-btn:hover{ opacity:.92; }
.mp-btn-save{
  background:#16a085;
  color:#fff;
  border-color:#16a085;
}
.mp-btn-cancel{
  background:var(--card);
  color:var(--muted);
}
@media (max-width:560px){
  .mp-btn-translate{ flex:1; }
  #mp-input{ width:100%; flex-basis:100%; }
}

/* ====== MY PHRASES — COMPACT HEADER + COLLAPSIBLE ADD CARD ====== */
.ph-header-compact{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap; /* lets the action group drop below on narrow screens */
  padding:18px 0 12px;
  border-bottom:1px solid var(--border);
  margin-bottom:16px;
}
.ph-title-compact{
  font-size:22px;
  font-weight:700;
  margin:0;
  flex:1;
  line-height:1.2;
}
.ph-count{
  font-size:14px;
  color:var(--muted);
  font-weight:500;
}
.ph-header-action{
  flex-shrink:0;
}
/* Group "Drill all" + Hide-English toggle on the right side of the
   compact header. On narrow screens the whole group wraps below the title. */
.ph-header-actions{
  display:flex;
  align-items:center;
  gap:8px;
  margin-left:auto;
  flex-wrap:wrap;
}

/* Wrapper for the inline Add Phrase card — hidden until the FAB pill is clicked. */
.mp-add-card-wrapper{
  position:relative;
  margin-bottom:16px;
}
.mp-add-card-wrapper[hidden]{
  display:none;
}
.mp-add-card-wrapper .mp-add-card{
  margin-bottom:0;
}
.mp-close-btn{
  position:absolute;
  top:8px;
  right:10px;
  background:transparent;
  border:none;
  color:var(--muted);
  font-size:16px;
  line-height:1;
  cursor:pointer;
  padding:6px 8px;
  border-radius:6px;
  z-index:2;
  transition:background .15s, color .15s;
}
.mp-close-btn:hover{
  background:rgba(0,0,0,.06);
  color:var(--text);
}

/* ====== ADD PHRASE PILL (replaces the FAB on the My Phrases page) ====== */
/* Note: re-uses the existing static #copilot-btn element. When the
   .add-phrase-pill class is applied, it overrides the round FAB look. */
#copilot-btn.add-phrase-pill{
  width:auto;
  height:auto;
  border-radius:999px;
  padding:12px 20px;
  background:linear-gradient(135deg,#1e8449,#16a085);
  font-size:14px;
  font-weight:600;
  display:flex;
  align-items:center;
  gap:8px;
  box-shadow:0 8px 24px rgba(30,132,73,.4);
}
#copilot-btn.add-phrase-pill:hover{
  transform:translateY(-2px) scale(1);
  box-shadow:0 12px 28px rgba(30,132,73,.5);
}
#copilot-btn.add-phrase-pill .app-icon{
  font-size:20px;
  font-weight:400;
  line-height:1;
}
#copilot-btn.add-phrase-pill .app-label{
  font-size:14px;
  white-space:nowrap;
}
@media (max-width:560px){
  .ph-header-compact{ padding-top:40px; padding-bottom:10px; padding-left:0; padding-right:0; }
  .ph-title-compact{ font-size:18px; }
  .ph-count{ font-size:12px; display:block; margin-top:2px; }
  #copilot-btn.add-phrase-pill{ padding:10px 16px; font-size:13px; }
}

/* ====== HOME PAGE (welcome v2) ====== */
.welcome-v2 { padding: 36px 32px 48px; max-width: 760px; margin: 0 auto; }
.welcome-hero { margin-bottom: 22px; }
.welcome-greet { font-size: 32px; font-weight: 800; color: var(--red); margin: 0 0 4px; }
.welcome-sub { font-size: 16px; color: var(--muted); margin: 0; }

.welcome-banner { padding: 14px 18px; border-radius: 12px; font-size: 14px; margin-bottom: 18px; line-height: 1.5; }
.welcome-banner-progress { background: #d5f5e3; color: #155724; }
.welcome-banner-start { background: #e7f3ff; color: #0d4a78; }

.welcome-cta { display: block; width: 100%; padding: 16px 22px; border-radius: 12px; font-size: 15px; font-weight: 700; cursor: pointer; border: none; margin-bottom: 10px; text-align: left; transition: opacity .15s, transform .15s; }
.welcome-cta:hover { opacity: 0.92; transform: translateY(-1px); }
.welcome-cta-primary { background: linear-gradient(135deg, #c0392b, #e74c3c); color: #fff; }
.welcome-cta-secondary { background: #fff; color: var(--blue); border: 1.5px solid var(--blue); }
.welcome-cta-secondary:hover { background: #f0f6ff; }

.welcome-action-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 22px 0; }
.welcome-tile { background: var(--card); border: 1.5px solid var(--border); border-radius: 14px; padding: 18px 14px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; transition: all .15s; }
.welcome-tile:hover { transform: translateY(-2px); border-color: var(--blue); box-shadow: 0 6px 16px rgba(0,0,0,0.06); }
.welcome-tile .wt-emoji { font-size: 28px; }
.welcome-tile .wt-label { font-size: 14px; font-weight: 700; color: var(--text); }
.welcome-tile .wt-sub { font-size: 11px; color: var(--muted); }
.welcome-tile-intake { border-color: #d5f5e3; background: linear-gradient(135deg, #f0faf5 0%, var(--card) 100%); }
.welcome-tile-intake:hover { border-color: #27ae60; }

.welcome-card { background: var(--card); border: 1.5px solid var(--border); border-radius: 14px; padding: 16px 18px; margin-bottom: 18px; }
.welcome-card-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--muted); margin-bottom: 12px; }

.welcome-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.welcome-stat { text-align: center; }
.welcome-stat .ws-num { font-size: 28px; font-weight: 800; color: var(--text); line-height: 1.1; }
.welcome-stat .ws-lbl { font-size: 11px; color: var(--muted); margin-top: 4px; }

.welcome-conv-list .welcome-conv-item { padding: 9px 0; gap: 10px; cursor: pointer; }
.welcome-conv-emoji { font-size: 16px; flex-shrink: 0; }
.welcome-conv-title { flex: 1; font-size: 13.5px; font-weight: 600; }
.welcome-conv-count { font-size: 11px; color: var(--muted); flex-shrink: 0; }

.welcome-mod-row { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--bg); border: 1.5px solid var(--border); border-radius: 10px; cursor: pointer; transition: all .15s; }
.welcome-mod-row:hover { border-color: var(--blue); transform: translateY(-1px); }
.welcome-mod-row .wm-emoji { font-size: 24px; flex-shrink: 0; }
.welcome-mod-row .wm-info { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.welcome-mod-row .wm-title { font-size: 14px; font-weight: 700; color: var(--text); }
.welcome-mod-row .wm-sub { font-size: 11px; color: var(--muted); }
.welcome-mod-row .wm-arrow { font-size: 18px; color: var(--muted); }

.welcome-link { display: block; width: 100%; background: none; border: none; color: var(--blue); font-size: 12px; font-weight: 600; cursor: pointer; padding: 10px; text-align: center; margin-top: 6px; }
.welcome-link:hover { text-decoration: underline; }

.welcome-tools-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin-top: 16px; }
.welcome-tool { padding: 10px 12px; background: var(--card); border: 1.5px solid var(--border); border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--text); display: flex; align-items: center; gap: 6px; justify-content: center; transition: all .15s; }
.welcome-tool:hover { border-color: var(--blue); color: var(--blue); }

/* Sidebar header clickable */
.sb-head { cursor: pointer; transition: opacity .15s; }
.sb-head:hover { opacity: 0.78; }

/* Favorites add-word form */
.fav-add-section { margin-top: 24px; padding: 16px; background: var(--card); border: 1.5px dashed var(--border); border-radius: 12px; }
.fav-add-title { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.fav-add-hint { font-size: 12px; color: var(--muted); margin: 0 0 10px; }
.fav-add-row { display: flex; gap: 8px; }
.fav-add-input { flex: 1; padding: 8px 12px; border: 1.5px solid var(--border); border-radius: 8px; font-size: 13px; background: var(--bg); color: var(--text); outline: none; }
.fav-add-input:focus { border-color: var(--blue); }
.fav-add-submit { padding: 8px 16px; background: var(--blue); color: #fff; border: none; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.fav-add-submit:hover { opacity: .88; }
.fav-add-submit:disabled { opacity: .5; cursor: default; }

/* Tone legend strip */
#tone-legend { width: 62px; min-width: 62px; display: flex; flex-direction: column; flex-shrink: 0; overflow: hidden; }
.tl-seg { flex: 1; background: var(--tl-bg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; overflow: hidden; cursor: default; padding: 4px 2px; }
.tl-mark { font-size: 18px; font-weight: 800; color: #fff; line-height: 1; flex-shrink: 0; }
.tl-name { font-size: 7px; font-weight: 700; color: rgba(255,255,255,.9); text-transform: uppercase; letter-spacing: .3px; text-align: center; white-space: normal; word-break: break-word; line-height: 1.2; }
.tl-en { font-size: 7px; color: rgba(255,255,255,.65); text-align: center; white-space: normal; word-break: break-word; line-height: 1.2; }
@media (max-width: 720px) { #tone-legend { display: none; } }

@media (max-width: 700px) {
  .welcome-v2 { padding: 24px 16px 40px; }
  .welcome-greet { font-size: 26px; }
  .welcome-stats-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Sidebar auth panel ──────────────────────────────────── */
#sb-auth { border-bottom: 1px solid rgba(255,255,255,.08); padding: 10px 14px; }
.sb-auth-row { display: flex; align-items: center; gap: 10px; }
.sb-auth-avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.sb-auth-avatar-placeholder { font-size: 20px; flex-shrink: 0; }
.sb-auth-info { flex: 1; min-width: 0; }
.sb-auth-name { font-size: 13px; font-weight: 600; color: #dde1f0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-auth-sub  { font-size: 10px; color: rgba(255,255,255,.38); margin-top: 1px; }
.sb-auth-signout { background: none; border: 1px solid rgba(255,255,255,.15); color: rgba(255,255,255,.5); border-radius: 6px; padding: 3px 8px; cursor: pointer; font-size: 13px; flex-shrink: 0; transition: background .15s; }
.sb-auth-signout:hover { background: rgba(255,255,255,.08); color: #fff; }
.sb-auth-signin-wrap { display: flex; flex-direction: column; gap: 6px; }
.sb-auth-btn { display: flex; align-items: center; gap: 8px; background: #fff; color: #333; border: none; border-radius: 8px; padding: 8px 12px; font-size: 12px; font-weight: 600; cursor: pointer; width: 100%; transition: box-shadow .15s; }
.sb-auth-btn:hover { box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.sb-auth-google-icon { width: 16px; height: 16px; flex-shrink: 0; }
.sb-auth-hint { font-size: 10px; color: rgba(255,255,255,.3); text-align: center; }
.sb-auth-admin-badge { font-size: 9px; background: var(--gold); color: #333; border-radius: 3px; padding: 1px 5px; font-weight: 700; margin-left: 4px; vertical-align: middle; }

/* ── Global (community) vocab cards ─────────────────────── */
.global-vocab-section { margin-top: 0; }
.gc-sh { margin-top: 8px; }
.vcard-pos { font-size: 10px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; margin-top: 2px; }
.lesson-drill-section { padding: 20px 0 12px; border-top: 1px solid var(--border); margin-top: 24px; }
.lesson-drill-label { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 10px; }
.gc-admin-actions { position: absolute; top: 4px; right: 4px; display: flex; gap: 3px; opacity: 0; transition: opacity .15s; }
.vcard:hover .gc-admin-actions, .phrase-card:hover .gc-admin-actions { opacity: 1; }
.gc-edit-btn, .gc-del-btn { background: rgba(255,255,255,.85); border: 1px solid var(--border); cursor: pointer; font-size: 12px; padding: 2px 5px; border-radius: 4px; }
.gc-edit-btn:hover { background: #fff; }
.gc-del-btn:hover  { background: rgba(192,57,43,.12); }
.gc-add-btn { display: block; margin: 14px 0 0; background: none; border: none; color: var(--muted); font-size: 13px; cursor: pointer; padding: 4px 2px; text-align: left; }
.gc-add-btn:hover { color: var(--text); }
.vcard-note { font-size: 11px; color: var(--muted); margin-top: 4px; font-style: italic; }
.global-vocab-section { padding-top: 4px; }
.global-phrase-section { padding-top: 4px; }

/* ── Add word / add phrase form ────────────────────────── */
.gc-form { padding: 0 0 12px; }
.gc-form-inner { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; max-width: 480px; margin: 4px 0 0; }
.gc-form-row { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.gc-form-row label { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }
.gc-input { border: 1px solid var(--border); border-radius: 7px; padding: 7px 10px; font-size: 14px; outline: none; transition: border-color .15s; width: 100%; box-sizing: border-box; }
.gc-input:focus { border-color: var(--green); }
.gc-input-sm { width: 80px; }
.gc-form-actions { display: flex; gap: 8px; margin-top: 12px; }
.gc-save-btn   { background: var(--green); color: #fff; border: none; border-radius: 8px; padding: 8px 18px; font-size: 13px; font-weight: 600; cursor: pointer; }
.gc-save-btn:disabled { opacity: .6; cursor: default; }
.gc-cancel-btn { background: none; border: 1px solid var(--border); border-radius: 8px; padding: 8px 18px; font-size: 13px; cursor: pointer; color: var(--muted); }

/* ====== INSTANT PRACTICE SESSION ====== */
.ips-wrap{display:flex;flex-direction:column;min-height:calc(100vh - 60px);padding:0;max-width:540px;margin:0 auto}
.ips-topbar{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--border);background:var(--bg);position:sticky;top:0;z-index:10}
.ips-exit-btn{background:none;border:none;font-size:18px;cursor:pointer;color:var(--muted);padding:4px 8px;line-height:1;flex-shrink:0}
.ips-progress-wrap{flex:1;height:8px;background:var(--border);border-radius:4px;overflow:hidden}
.ips-progress-bar{height:100%;background:var(--blue);border-radius:4px;transition:width .3s ease}
.ips-progress-label{font-size:12px;color:var(--muted);font-weight:600;white-space:nowrap;flex-shrink:0}
.ips-invert-btn{background:none;border:1.5px solid var(--border);border-radius:8px;font-size:14px;padding:8px 12px;min-height:36px;cursor:pointer;color:var(--muted);transition:all .15s;flex-shrink:0}
.ips-invert-btn.active{background:var(--blue);color:#fff;border-color:var(--blue)}
.ips-card-area{flex:1;display:flex;align-items:center;justify-content:center;padding:24px 20px}
.ips-card{background:var(--card);border:2px solid var(--border);border-radius:20px;padding:40px 28px;width:100%;text-align:center;cursor:pointer;transition:border-color .2s,box-shadow .2s;touch-action:manipulation;min-height:260px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}
.ips-card:not(.flipped):hover{border-color:var(--blue);box-shadow:var(--shadow)}
.ips-card.flipped{cursor:default;border-color:var(--border)}
.ips-front{font-size:28px;font-weight:700;line-height:1.3;color:var(--text)}
.ips-back{display:flex;flex-direction:column;align-items:center;gap:6px;width:100%}
.ips-back-text{font-size:22px;font-weight:600;color:var(--text)}
.ips-pron{font-size:13px;color:var(--muted);font-style:italic}
.ips-tap-hint{background:var(--blue);color:#fff;border:none;border-radius:12px;padding:14px 32px;font-size:16px;font-weight:600;cursor:pointer;transition:opacity .15s;touch-action:manipulation}
.ips-tap-hint:hover{opacity:.85}
.ips-actions{display:flex;gap:12px;width:100%;justify-content:center;flex-wrap:wrap}
.ips-btn{padding:14px 28px;border:none;border-radius:12px;font-size:15px;font-weight:700;cursor:pointer;transition:opacity .15s;touch-action:manipulation;min-width:130px}
.ips-btn:hover{opacity:.85}
.ips-got-it{background:var(--green);color:#fff}
.ips-wrong{background:var(--red);color:#fff}
.ips-summary{align-items:center;justify-content:center;gap:20px;padding:40px 24px;text-align:center}
.ips-summary-icon{font-size:64px}
.ips-summary-title{font-size:26px;font-weight:700;margin:0}
.ips-summary-score{font-size:20px;font-weight:600;color:var(--text)}
.ips-summary-pct{color:var(--green);font-weight:700}
.ips-summary-bar-wrap{width:100%;max-width:300px;height:12px;background:var(--border);border-radius:6px;overflow:hidden}
.ips-summary-bar{height:100%;background:var(--green);border-radius:6px;transition:width .6s ease}
.ips-summary-btns{display:flex;flex-direction:column;gap:12px;align-items:center;width:100%}
@media(max-width:600px){
  .ips-front{font-size:24px}
  .ips-back-text{font-size:18px}
  .ips-card{padding:32px 20px;min-height:220px}
  .ips-actions{flex-direction:column;align-items:stretch}
  .ips-btn{min-width:unset;padding:16px}
}

/* ── My Phrase Cards ────────────────────────────────────────────── */
.mpc-input-area{display:flex;gap:10px;margin-bottom:20px;padding:16px 0 8px}
.mpc-input{flex:1;padding:12px 16px;border:2px solid var(--border);border-radius:10px;font-size:16px;background:var(--card-bg);color:var(--text);outline:none;transition:border-color .15s}
.mpc-input:focus{border-color:#9b59b6}
.mpc-add-btn{padding:12px 20px;min-height:44px;background:#9b59b6;color:#fff;border:none;border-radius:10px;font-size:15px;font-weight:700;cursor:pointer;white-space:nowrap;touch-action:manipulation}
.mpc-add-btn:active{opacity:.8}
.mpc-card{position:relative;background:var(--card-bg);border:1px solid var(--border);border-radius:12px;padding:16px 40px 16px 16px;margin-bottom:12px;transition:box-shadow .15s}
.mpc-card:hover{box-shadow:0 4px 12px rgba(0,0,0,.08)}
.mpc-delete{position:absolute;top:8px;right:8px;background:none;border:none;color:var(--muted);font-size:18px;cursor:pointer;padding:4px 6px;border-radius:6px;line-height:1;touch-action:manipulation}
.mpc-delete:hover{color:#e74c3c;background:rgba(231,76,60,.1)}
.mpc-pending{opacity:.7}
.mpc-spinner{font-size:22px;display:inline-block;margin-bottom:6px;animation:mpc-spin 1.4s linear infinite}
@keyframes mpc-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
.mpc-status{font-size:12px;color:var(--muted);margin-top:4px}
.mpc-en-text{font-size:16px;font-weight:500}
.mpc-error .mpc-status{color:#e74c3c}
.mpc-retry{margin-top:8px;padding:6px 14px;background:#e74c3c;color:#fff;border:none;border-radius:6px;font-size:13px;cursor:pointer;touch-action:manipulation}
.mpc-vi-row{display:flex;align-items:flex-start;gap:8px;margin-bottom:2px}
.mpc-vi-row .mpc-vi{flex:1}
.mpc-vi{font-size:22px;font-weight:700}
.mpc-en{font-size:14px;color:var(--text-sec,#888);margin-top:2px}
.mpc-icons{display:flex;gap:4px;flex-shrink:0;padding-top:3px}
.mpc-icon{font-size:15px;cursor:pointer;user-select:none;touch-action:manipulation;padding:3px 5px;border-radius:5px;opacity:.6;transition:opacity .12s,background .1s;position:relative}
.mpc-icon:hover{opacity:1;background:rgba(128,128,128,.1)}
.mpc-speak-icon{opacity:.75}
/* inline word annotations */
.mpc-word{display:inline;border-radius:3px;padding:1px 2px;cursor:pointer;transition:background .1s}
.mpc-vi-word:hover,.mpc-vi-word.tip-active{background:rgba(155,89,182,.18)}
.mpc-lazy{border-bottom:1px dotted rgba(155,89,182,.4);cursor:help}
.mpc-en-word:hover,.mpc-en-word.tip-active{background:rgba(52,152,219,.18)}
/* tooltip via CSS attr() — shown on hover or .tip-active */
.mpc-card [data-tip]{position:relative}
.mpc-card [data-tip]::after{
  content:attr(data-tip);
  position:absolute;
  bottom:calc(100% + 6px);
  left:50%;
  transform:translateX(-50%);
  background:rgba(18,18,18,.93);
  color:#fff;
  padding:6px 10px;
  border-radius:7px;
  font-size:12px;
  font-weight:400;
  max-width:260px;
  min-width:80px;
  white-space:normal;
  line-height:1.45;
  text-align:center;
  opacity:0;
  pointer-events:none;
  transition:opacity .15s;
  z-index:300;
}
.mpc-card [data-tip]:hover::after,
.mpc-card [data-tip].tip-active::after{opacity:1}
@media(max-width:480px){
  .mpc-input-area{flex-direction:column}
  .mpc-add-btn{width:100%}
  .mpc-vi{font-size:19px}
}

/* Self-grade drill */
.sg-history{font-size:13px;color:var(--muted);margin:8px 0 16px;text-align:center}
.sg-login-hint{font-size:12px;color:var(--gold);margin-bottom:8px;text-align:center}
.sg-en{font-size:14px;color:var(--muted);margin-top:6px}
.sg-note{font-size:12px;color:var(--blue);margin-top:8px}

/* Shared sub-view tab bars (vocabulary, pronunciation) */
.vocab-view-tabs, .pron-view-tabs {
  display: flex; gap: 6px; margin-bottom: 18px; flex-wrap: wrap;
}
.vocab-view-tab, .pron-view-tab {
  padding: 7px 16px; border-radius: 20px; border: 1.5px solid var(--border);
  background: var(--card); color: var(--muted); font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all .15s;
}
.vocab-view-tab.active, .pron-view-tab.active {
  background: var(--blue); border-color: var(--blue); color: #fff;
}
.vocab-view-tab:hover:not(.active), .pron-view-tab:hover:not(.active) {
  background: var(--hover); color: var(--text);
}

/* By Level grid */
.vb-levels-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px;
  margin-top: 4px;
}
.vb-level-card {
  background: var(--card); border: 1.5px solid var(--border); border-radius: var(--radius);
  padding: 20px 16px; text-align: center; cursor: pointer; transition: all .15s;
}
.vb-level-card:hover { border-color: var(--blue); transform: translateY(-2px); }
.vb-level-emoji { font-size: 28px; margin-bottom: 8px; }
.vb-level-title { font-size: 14px; font-weight: 700; margin-bottom: 4px; }
.vb-level-count { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.vb-level-desc { font-size: 11px; color: var(--muted); line-height: 1.4; }

/* Verbs & Adjectives toggle */
.va-toggle {
  display: flex; gap: 8px; margin-bottom: 16px;
}
.va-tab {
  flex: 1; padding: 9px 16px; border-radius: 8px; border: 1.5px solid var(--border);
  background: var(--card); color: var(--muted); font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all .15s; text-align: center;
}
.va-tab.active {
  background: var(--blue); border-color: var(--blue); color: #fff;
}
.va-tab:hover:not(.active) { background: var(--hover); color: var(--text); }

/* Instant Practice card in Drills */
.drill-instant-card {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--card); border: 1.5px solid var(--border); border-radius: var(--radius);
  padding: 14px 16px; margin-bottom: 18px; flex-wrap: wrap;
}
.dic-body { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.dic-icon { font-size: 26px; flex-shrink: 0; }
.dic-title { font-size: 15px; font-weight: 700; }
.dic-desc { font-size: 12px; color: var(--muted); margin-top: 2px; }
.dic-btn {
  background: var(--blue); color: #fff; border: none; border-radius: 8px;
  padding: 9px 18px; font-size: 13px; font-weight: 700; cursor: pointer;
  white-space: nowrap; transition: opacity .15s; flex-shrink: 0;
}
.dic-btn:hover { opacity: .85; }