.kanji-vocab-container{font-family:'Inter','Quicksand',system-ui,sans-serif;width:100%;margin:30px 0;color:#1e293b}.stream-filter-wrap{margin-bottom:30px;display:inline-flex;align-items:center;gap:12px;background:#f8fafc;padding:8px 20px;border-radius:50px;border:1px solid #e2e8f0}.stream-filter-title{font-size:.8rem;font-weight:800;color:#64748b;letter-spacing:.05em}.stream-select{padding:4px 30px 4px 8px;font-size:1rem;font-weight:700;color:#3b82f6;border:none;background:0 0;cursor:pointer;appearance:none;background-image:url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%233b82f6%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");background-repeat:no-repeat;background-position:right center;background-size:14px}.stream-select:focus{outline:none}.stream-label{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;padding:2px 10px;border-radius:50px;display:inline-block;margin-bottom:8px;width:fit-content}.label-stt{background-color:#f1f5f9;color:#475569}.label-kanji{background-color:#e0e7ff;color:#4338ca}.label-hanviet{background-color:#ffe4e6;color:#be123c}.label-hiragana{background-color:#ffedd5;color:#c2410c}.label-meaning{background-color:#dcfce7;color:#15803d}.kanji-stream-list{display:flex;flex-direction:column}.stream-row{display:flex;align-items:flex-start;padding:20px 10px;border-bottom:2px dashed #e2e8f0;background:0 0;transition:background-color .2s ease}.stream-row:hover{background-color:#f8fafc}.stream-row:last-child{border-bottom:none}.stream-cell{display:flex;flex-direction:column;padding-right:15px}.stt-cell{flex:0 0 10%}.kanji-cell{flex:0 0 22%}.hanviet-cell{flex:0 0 22%}.hiragana-cell{flex:0 0 22%}.meaning-cell{flex:1;padding-right:0}.vocab-expr-cell{flex:0 0 22%}.vocab-read-cell{flex:0 0 22%}.vocab-mean-cell{flex:1;padding-right:15px}.vocab-action-cell{flex:0 0 110px;padding-right:0;display:flex;align-items:center;justify-content:center;margin-top:25px}.stream-val{font-size:1.05rem;font-weight:700;color:#0f172a}.val-stt{font-family:monospace;color:#94a3b8}.val-kanji{font-size:2.2rem;color:#1e1b4b;line-height:1.1}.val-hanviet{font-size:1.1rem;text-transform:uppercase;color:#1e293b}.val-hiragana{color:#2563eb}.val-meaning{color:#0f172a;font-weight:700;line-height:1.6}.vocab-btn-example{padding:10px 12px;border-radius:8px;font-size:.85rem;font-weight:700;cursor:pointer;border:none;transition:all .25s ease;text-transform:uppercase;text-align:center;letter-spacing:.05em;background:linear-gradient(135deg,#3b82f6 0%,#2563eb 100%);color:#fff;box-shadow:0 4px 10px rgba(37,99,235,.25);width:100%}.vocab-btn-example:hover{background:linear-gradient(135deg,#2563eb 0%,#1d4ed8 100%);transform:translateY(-2px);box-shadow:0 6px 14px rgba(37,99,235,.4)}.vocab-modal{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:99999;display:flex;align-items:center;justify-content:center}.vocab-modal-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(15,23,42,.5);backdrop-filter:blur(3px);cursor:pointer}.vocab-modal-box{position:relative;background:#fff;width:90%;max-width:550px;border-radius:12px;box-shadow:0 20px 25px -5px rgba(0,0,0,.1);z-index:100000;animation:popUp .25s ease-out;display:flex;flex-direction:column;max-height:85vh}.vocab-modal-header{display:flex;justify-content:space-between;align-items:center;padding:15px 25px;border-bottom:1px solid #e2e8f0}.vocab-modal-title{margin:0;font-size:1.2rem;font-weight:800;color:#0f172a;text-transform:uppercase;letter-spacing:.05em}.vocab-modal-close{background:0 0;border:none;font-size:1.8rem;line-height:1;cursor:pointer;color:#94a3b8;transition:color .2s;padding:0}.vocab-modal-close:hover{color:#ef4444}.vocab-modal-body{padding:25px;font-size:1rem;line-height:1.8;color:#334155;overflow-y:auto;background:#f8fafc;border-bottom-left-radius:12px;border-bottom-right-radius:12px}@keyframes popUp{0%{transform:scale(.95) translateY(20px);opacity:0}100%{transform:scale(1) translateY(0);opacity:1}}.popup-example-item{padding:20px 24px;border-radius:14px;margin-bottom:24px;border:1px solid transparent;box-shadow:0 4px 6px rgba(0,0,0,.02)}.popup-example-item:last-child{margin-bottom:0}.pex-ja{font-size:1.15rem;font-weight:800;color:#0f172a;margin-bottom:8px;line-height:1.4}.pex-hi{font-size:.95rem;color:#2563eb;margin-bottom:14px;font-weight:600}.pex-vi,.pex-en{font-size:1.05rem;color:#334155;font-style:italic;border-top:1px dashed rgba(0,0,0,.15);padding-top:14px;line-height:1.6}.ex-blue{background:#eff6ff;border-color:#bfdbfe;border-left:6px solid #3b82f6}.ex-purple{background:#faf5ff;border-color:#f5d0fe;border-left:6px solid #d946ef}.ex-green{background:#f0fdf4;border-color:#bbf7d0;border-left:6px solid #22c55e}.ex-orange{background:#fff7ed;border-color:#fed7aa;border-left:6px solid #f97316}.stream-pagination{display:flex;justify-content:center;gap:8px;margin-top:35px}.stream-page-btn{background:#fff;border:1px solid #e2e8f0;color:#475569;padding:8px 16px;border-radius:10px;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .2s}.stream-page-btn:hover:not(.disabled):not(.active){border-color:#cbd5e1;background:#f8fafc;color:#0f172a}.stream-page-btn.active{background:#3b82f6;border-color:#3b82f6;color:#fff}@media (max-width:1024px){.vocab-expr-cell,.vocab-read-cell{flex:1 1 45% !important;margin-bottom:10px}.vocab-mean-cell{flex:1 1 100% !important;margin-bottom:15px}.vocab-action-cell{flex:1 1 100% !important;justify-content:flex-start;margin-top:0}.vocab-btn-example{width:auto;padding:8px 25px}}@media (max-width:768px){.stream-row{flex-direction:column;align-items:flex-start;gap:12px;padding:20px 5px}.stream-cell{flex:none !important;width:100%;padding-right:0;margin-bottom:5px}.val-kanji{font-size:2rem}.vocab-btn-example{width:100%}}