@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;800&display=swap');
:root{--green:#173d2a;--green2:#23583b;--lime:#d9e66d;--paper:#f5f6f0;--card:#fff;--ink:#17231b;--muted:#6b766e;--line:#dfe5dc;--soft:#edf2e9;--red:#a33b2b;--shadow:0 12px 32px rgba(23,61,42,.08)}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:"Be Vietnam Pro",system-ui,sans-serif;line-height:1.55}button,input{font:inherit}button{cursor:pointer}.topbar{height:82px;background:var(--green);color:#fff;display:flex;align-items:center;gap:13px;padding:0 max(22px,calc((100% - 1080px)/2));box-shadow:0 3px 12px #10291c22}.brand-mark{width:42px;height:42px;display:grid;place-items:center;background:var(--lime);color:var(--green);font-weight:800;font-size:24px;border-radius:10px}.brand h1{font-size:16px;letter-spacing:1.3px;margin:0;font-weight:800}.brand p{font-size:10px;letter-spacing:1.3px;margin:2px 0 0;color:#d8e4d9}.icon-btn{margin-left:auto;border:1px solid #ffffff55;background:#ffffff12;color:white;border-radius:10px;width:40px;height:40px;font-size:20px}.container{max-width:1080px;margin:auto;padding:0 22px 50px}.hero{padding:45px 0 30px}.eyebrow{font-size:11px;font-weight:800;letter-spacing:1.7px;color:var(--green2);margin:0 0 8px}.hero h2{font-size:clamp(30px,5vw,48px);line-height:1.15;letter-spacing:-1.4px;margin:0 0 12px}.hero h2 span{color:var(--green2)}.hero>p{margin:0 0 23px;color:var(--muted);max-width:610px}.searchbar{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:5px 12px;box-shadow:var(--shadow);max-width:780px}.searchbar>span{font-size:27px;color:var(--green2)}.searchbar input{flex:1;min-width:0;border:0;outline:0;background:transparent;padding:12px 0;color:var(--ink)}.clear-btn{border:0;background:transparent;font-size:24px;color:var(--muted);padding:2px 7px}.search-hint{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-top:12px;color:var(--muted);font-size:12px}.suggestion{background:#e6ecdf;border:0;color:var(--green);border-radius:99px;padding:5px 10px;font-size:12px}.tabs{display:flex;gap:7px;overflow:auto;border-bottom:1px solid var(--line);margin-bottom:22px}.tab{white-space:nowrap;border:0;background:transparent;color:var(--muted);padding:13px 16px;border-bottom:3px solid transparent;font-weight:700}.tab.active{color:var(--green);border-bottom-color:var(--green)}.count{display:inline-grid;place-items:center;background:var(--soft);border-radius:99px;padding:1px 7px;font-size:11px;margin-left:4px}.view{min-height:250px}.status-line{font-size:12px;color:var(--muted);margin:0 0 14px}.results{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.word-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px;box-shadow:0 5px 18px #173d2a08;min-width:0}.word-top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}.term{font-size:22px;font-weight:800;line-height:1.25;margin:0;overflow-wrap:anywhere}.ipa{font-size:13px;color:var(--muted);margin:6px 0 0}.word-tools{display:flex;gap:6px;flex-shrink:0}.tool-btn{border:1px solid var(--line);background:var(--paper);color:var(--green);border-radius:9px;width:35px;height:35px;font-size:17px}.tool-btn.saved{background:var(--lime);border-color:var(--lime)}.meaning{font-size:17px;font-weight:700;color:var(--green2);margin:16px 0 8px}.part{font-size:11px;color:var(--muted);font-style:italic}.example{border-left:3px solid var(--lime);padding:9px 12px;background:#f8f9f4;border-radius:0 8px 8px 0;margin-top:13px;font-size:13px}.example-en{font-weight:600}.example-vi{color:var(--muted);margin-top:4px}.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}.tag{font-size:10px;color:var(--green2);background:var(--soft);padding:4px 8px;border-radius:99px}.empty-state{text-align:center;padding:45px 18px;color:var(--muted)}.empty-state h3{color:var(--ink);margin:8px 0}.empty-state p{font-size:13px;margin:0 0 18px}.empty-icon{font-size:38px;color:var(--green2)}.hidden{display:none!important}.primary-btn,.secondary-btn{border-radius:10px;padding:11px 16px;font-weight:700;border:1px solid var(--green)}.primary-btn{background:var(--green);color:white}.primary-btn:hover{background:var(--green2)}.secondary-btn{background:var(--card);color:var(--green)}.section-heading{display:flex;justify-content:space-between;align-items:end;margin:5px 0 18px}.section-heading h2{margin:0;font-size:27px}.muted{font-size:12px;color:var(--muted)}.flashcard{max-width:680px;margin:0 auto 16px;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:32px 22px;text-align:center;box-shadow:var(--shadow)}.flashcard-label{font-size:10px;letter-spacing:2px;color:var(--muted);font-weight:800}.flash-term{font-size:clamp(27px,5vw,38px);font-weight:800;color:var(--green);margin:14px 0 20px;overflow-wrap:anywhere}.flash-meaning{font-size:20px;font-weight:700;margin:0 0 18px}.flash-actions{display:flex;justify-content:center;gap:10px;margin-top:14px}.small-note{font-size:12px;color:var(--muted);text-align:center}.quiz-box{max-width:720px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px;box-shadow:var(--shadow)}.quiz-question{font-size:22px;font-weight:800;margin:0 0 17px}.quiz-options{display:grid;gap:9px}.quiz-option{text-align:left;padding:12px 14px;border:1px solid var(--line);background:var(--card);border-radius:10px;color:var(--ink)}.quiz-option:hover{border-color:var(--green2)}.quiz-option.correct{background:#e4f4e6;border-color:#36824a}.quiz-option.wrong{background:#fae9e5;border-color:#b8523e}.quiz-feedback{font-weight:700;margin:14px 0}.note-panel{display:flex;gap:12px;background:#e9eee4;border:1px solid #dce5d8;padding:17px;border-radius:13px;margin-top:35px}.note-icon{width:25px;height:25px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;background:var(--green);color:#fff;font-weight:800}.note-panel strong{font-size:13px}.note-panel p{font-size:12px;color:#56645a;margin:4px 0 0}footer{display:flex;justify-content:space-between;gap:12px;background:var(--green);color:#cddace;padding:18px max(22px,calc((100% - 1080px)/2));font-size:10px;letter-spacing:.7px}body.dark{--paper:#101b14;--card:#19271d;--ink:#edf4ed;--muted:#a7b5a9;--line:#304336;--soft:#26392b;--green:#102e1e;--green2:#b6d79c;--lime:#d9e66d;--shadow:0 12px 32px #0003}body.dark .suggestion{background:#2a3b2d;color:#e5efdf}body.dark .example{background:#202f24}body.dark .note-panel{background:#202f24;border-color:#304336}body.dark .note-panel p{color:#c1cfc3}body.dark .quiz-option{color:var(--ink)}body.dark .quiz-option.correct{background:#24452b}body.dark .quiz-option.wrong{background:#4a2924}
@media(max-width:680px){.topbar{height:72px;padding:0 16px}.container{padding:0 16px 35px}.hero{padding-top:32px}.hero h2{letter-spacing:-.7px}.results{grid-template-columns:1fr}.word-card{padding:17px}.tabs{margin-left:-16px;margin-right:-16px;padding:0 10px}.tab{padding:12px 11px;font-size:13px}.section-heading h2{font-size:23px}.flashcard{padding:26px 16px}footer{padding:17px 16px;flex-direction:column;gap:4px}}

.search-direction{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:13px;font-size:12px;color:var(--muted)}.direction-btn{border:1px solid var(--line);border-radius:999px;padding:7px 12px;background:var(--card);color:var(--ink);font-size:12px}.direction-btn.active{background:var(--green);border-color:var(--green);color:#fff;font-weight:700}body.dark .direction-btn.active{color:#fff}@media(max-width:600px){.search-direction{align-items:flex-start}.search-direction>span{width:100%}.direction-btn{padding:7px 9px}}