.grammar-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-grammar{background-color:#e0e7ff;color:#4338ca}.label-reading{background-color:#ffedd5;color:#c2410c}.label-meaning{background-color:#dcfce7;color:#15803d}.label-structure{background-color:#fce7f3;color:#9d174d}.label-explain{background-color:#e0f2fe;color:#0369a1}.grammar-stream-list{display:flex;flex-direction:column}.stream-row{display:flex;align-items:flex-start;padding:25px 10px;gap:15px;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}.stt-cell{flex:0 0 5%}.grammar-cell{flex:0 0 14%}.reading-cell{flex:0 0 14%}.meaning-cell{flex:0 0 18%}.structure-cell{flex:0 0 18%}.explain-cell{flex:1;padding-right:15px}.action-cell{flex:0 0 110px;gap:10px;padding-right:0;justify-content:center}.stream-val{font-size:1.05rem;font-weight:700;color:#0f172a;line-height:1.6}.val-stt{font-family:monospace;color:#94a3b8}.val-grammar{font-size:2.2rem;color:#1e1b4b;font-weight:800;line-height:1.1}.val-reading{color:#2563eb}.val-meaning{color:#0f172a}.val-structure{color:#b91c1c;font-size:.95rem}.val-explain{font-weight:500;color:#334155;font-size:.95rem}.grammar-btn{padding:10px 12px;border-radius:8px;font-size:.85rem;font-weight:700;cursor:pointer;border:none;transition:all .25s ease;text-align:center;width:100%;text-transform:uppercase;letter-spacing:.05em}.grammar-btn-example{background:linear-gradient(135deg,#3b82f6 0%,#2563eb 100%);color:#fff;box-shadow:0 4px 10px rgba(37,99,235,.25)}.grammar-btn-example:hover{background:linear-gradient(135deg,#2563eb 0%,#1d4ed8 100%);transform:translateY(-2px);box-shadow:0 6px 14px rgba(37,99,235,.4)}.grammar-btn-more{background:linear-gradient(135deg,#8b5cf6 0%,#6d28d9 100%);color:#fff;box-shadow:0 4px 10px rgba(109,40,217,.25)}.grammar-btn-more:hover{background:linear-gradient(135deg,#7c3aed 0%,#5b21b6 100%);transform:translateY(-2px);box-shadow:0 6px 14px rgba(109,40,217,.4)}.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);text-align:left}.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{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}.grammar-modal{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:99999;display:flex;align-items:center;justify-content:center}.grammar-modal-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(15,23,42,.5);backdrop-filter:blur(3px);cursor:pointer}.grammar-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:popUpVN .25s ease-out;display:flex;flex-direction:column;max-height:85vh}.grammar-modal-header{display:flex;justify-content:space-between;align-items:center;padding:15px 25px;border-bottom:1px solid #e2e8f0}.grammar-modal-title{margin:0;font-size:1.2rem;font-weight:800;color:#0f172a;text-transform:uppercase;letter-spacing:.05em}.grammar-modal-close{background:0 0;border:none;font-size:1.8rem;line-height:1;cursor:pointer;color:#94a3b8;transition:color .2s;padding:0}.grammar-modal-close:hover{color:#ef4444}.grammar-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 popUpVN{0%{transform:scale(.95) translateY(20px);opacity:0}100%{transform:scale(1) translateY(0);opacity:1}}.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}.stream-page-btn.disabled{opacity:.35;cursor:not-allowed}@media (max-width:1024px){.stream-row{flex-wrap:wrap}.stream-cell{flex:1 1 45% !important;margin-bottom:15px}.stt-cell{flex:1 1 100% !important;margin-bottom:5px}.action-cell{flex:1 1 100% !important;justify-content:flex-start;margin-top:0}.grammar-btn{width:auto;padding:8px 25px}}@media (max-width:768px){.stream-row{flex-direction:column;align-items:flex-start;gap:10px}.stream-cell{flex:none !important;width:100%;margin-bottom:5px;padding-right:0}.val-grammar{font-size:1.8rem}.grammar-btn{width:100%}}