.word-lists-page{--color-background:#ffffff;--color-background-secondary:#f8fafc;--color-background-tertiary:#fafafa;--color-text-primary:#111827;--color-text-secondary:#6b7280;--color-text-tertiary:#64748b;--color-border:#dbe6df;--color-border-light:#e3ebe6;--color-separator:rgba(0,0,0,0.08);--color-accent:#047857;--color-accent-hover:#065f46;--color-accent-light:#edf5f0;--color-lesson-bg:#edf5f0;--color-lesson-text:#047857;--spacing-xs:4px;--spacing-sm:8px;--spacing-md:12px;--spacing-lg:16px;--spacing-xl:20px;--spacing-2xl:24px;--spacing-3xl:32px;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-full:9999px;--shadow-sm:0 1px 3px rgba(0,0,0,0.04),0 1px 2px rgba(0,0,0,0.06);--shadow-md:0 4px 6px rgba(0,0,0,0.05),0 2px 4px rgba(0,0,0,0.06);--shadow-lg:0 10px 15px rgba(0,0,0,0.08),0 4px 6px rgba(0,0,0,0.05)}.word-lists-page .word-lists-container{max-width:1280px;margin:0 auto;padding:5rem 1rem 2rem}.word-lists-page .category-section{margin-bottom:var(--spacing-3xl)}.word-lists-page .word-list-container{background:var(--color-background);border-radius:var(--radius-lg);border:1px solid var(--color-border-light);box-shadow:var(--shadow-sm);overflow:hidden;transition:box-shadow .3s cubic-bezier(.4,0,.2,1)}.word-lists-page .word-list-container:hover{box-shadow:var(--shadow-md)}.word-lists-page .word-list-header{display:grid;gap:clamp(4px,1vw,12px);align-items:center;padding:var(--spacing-md) clamp(8px,2vw,16px);background:var(--color-background-tertiary);border-bottom:1px solid var(--color-separator);font-size:clamp(.625rem,1.8vw,.6875rem);font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-secondary)}.word-lists-page .word-list-header:has(.header-lesson){grid-template-columns:minmax(32px,40px) minmax(48px,68px) minmax(140px,1.8fr) minmax(140px,1.8fr) minmax(70px,90px)}.word-lists-page .word-list-header:not(:has(.header-lesson)){grid-template-columns:minmax(32px,40px) minmax(160px,1.8fr) minmax(160px,1.8fr) minmax(70px,90px)}.word-lists-page .header-index{text-align:center;color:var(--color-text-quaternary,#9ca3af);font-size:.6875rem;font-weight:500}.word-lists-page .header-lesson{text-align:center}.word-lists-page .header-word{display:flex;align-items:center;gap:var(--spacing-xs)}.word-lists-page .header-meaning{text-align:left;padding-left:clamp(2px,.5vw,8px)}.word-lists-page .info-button{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;background:none;border:none;border-radius:var(--radius-full);color:var(--color-text-tertiary);cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1)}.word-lists-page .info-button:hover{background:rgba(0,0,0,.06);color:var(--color-accent);transform:scale(1.1)}.word-lists-page .info-button:active{transform:scale(.95)}.word-lists-page .word-list{display:flex;flex-direction:column;gap:0;padding:0}.word-lists-page .word-row{display:grid;gap:clamp(4px,1vw,12px);align-items:center;padding:clamp(10px,2vw,14px) clamp(12px,2.5vw,16px);background:white;border-radius:0;box-shadow:none;transition:all .2s cubic-bezier(.4,0,.2,1);min-height:clamp(56px,10vw,68px);border-bottom:1px solid var(--color-border-light)}.word-lists-page .word-row:hover{box-shadow:none;transform:none;background:#edf5f0}.word-lists-page .word-list .word-row:nth-child(odd){background:white}.word-lists-page .word-list .word-row:nth-child(2n){background:#f8fafc}.word-lists-page .word-row:has(.word-lesson){grid-template-columns:minmax(32px,40px) minmax(48px,68px) minmax(140px,1.8fr) minmax(140px,1.8fr) minmax(70px,90px)}.word-lists-page .word-row:not(:has(.word-lesson)){grid-template-columns:minmax(32px,40px) minmax(160px,1.8fr) minmax(160px,1.8fr) minmax(70px,90px)}.word-lists-page .word-row:active{transform:translateY(0);box-shadow:none}.word-lists-page .word-index{display:flex;align-items:center;justify-content:center}.word-lists-page .index-number{font-size:.6875rem;font-weight:500;color:#9ca3af;font-variant-numeric:tabular-nums;background:rgba(156,163,175,.1);padding:2px 6px;border-radius:4px;min-width:24px;text-align:center}.word-lists-page .word-lesson{display:flex;align-items:center;justify-content:center}.word-lists-page .lesson-badge{display:inline-flex;align-items:center;justify-content:center;width:100%;max-width:56px;height:clamp(24px,5vw,28px);padding:0 clamp(2px,.5vw,4px);background:var(--color-lesson-bg);color:var(--color-lesson-text);font-size:clamp(.625rem,1.8vw,.75rem);font-weight:600;line-height:1;border-radius:var(--radius-sm);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.word-lists-page .word-content{display:flex;flex-direction:column;gap:clamp(2px,.5vw,4px);min-width:0;flex:1;overflow:hidden}.word-lists-page .word-primary{font-size:clamp(.875rem,2.2vw,1.0625rem);line-height:1.3;color:var(--color-text-primary);font-weight:500}.word-lists-page .word-primary,.word-lists-page .word-secondary{display:flex;align-items:center;gap:clamp(4px,.8vw,8px);white-space:nowrap;overflow:hidden}.word-lists-page .word-secondary{font-size:clamp(.6875rem,1.8vw,.875rem);line-height:1.2;color:var(--color-text-secondary)}.word-lists-page .word-kanji{color:var(--color-text-secondary);overflow:hidden;text-overflow:ellipsis}.word-lists-page .word-pos{display:inline-flex;align-items:center;height:clamp(18px,4vw,20px);padding:0 clamp(4px,1vw,8px);background:var(--color-background-secondary);color:var(--color-text-tertiary);font-size:clamp(.625rem,1.6vw,.6875rem);font-weight:500;line-height:1;border-radius:var(--radius-full);letter-spacing:.01em;white-space:nowrap;flex-shrink:0}.word-lists-page .audio-button{display:inline-flex!important;align-items:center;justify-content:center;width:clamp(24px,5vw,28px)!important;height:clamp(24px,5vw,28px)!important;padding:0!important;margin:0!important;background:none!important;border:none!important;border-radius:var(--radius-full)!important;color:var(--color-accent)!important;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);flex-shrink:0}.word-lists-page .audio-button:hover{background:var(--color-accent-light)!important;transform:scale(1.1)}.word-lists-page .audio-button:active{transform:scale(.95)}.word-lists-page .audio-button svg{width:clamp(14px,3vw,16px)!important;height:clamp(14px,3vw,16px)!important}.word-lists-page .word-meaning{display:flex;align-items:center;min-width:0;overflow:hidden}.word-lists-page .meaning-text{font-size:clamp(.8125rem,2vw,.9375rem);line-height:1.3;color:var(--color-text-primary);text-align:left;overflow:hidden;overflow-wrap:anywhere;white-space:normal;flex:1;min-width:0}.word-lists-page .word-action{display:flex;align-items:center;justify-content:center}.word-lists-page .dictation-link{display:flex;align-items:center;justify-content:space-between;width:clamp(80px,18vw,100px);height:clamp(28px,6vw,32px);padding:0;background-color:var(--color-accent);border:none;border-radius:40px;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);flex-shrink:0;box-shadow:0 2px 6px rgba(0,0,0,.15);position:relative;overflow:hidden;text-decoration:none}.word-lists-page .dictation-link:hover{transform:translateY(-1px);box-shadow:0 3px 8px rgba(0,0,0,.25)}.word-lists-page .dictation-link:active{transform:translateY(0);box-shadow:0 1px 3px rgba(0,0,0,.15)}.word-lists-page .dictation-link:before{content:"听写";display:flex;align-items:center;justify-content:center;flex:1;height:100%;color:white;font-size:clamp(.6875rem,1.8vw,.75rem);font-weight:500;letter-spacing:.5px;padding-left:clamp(6px,1.5vw,8px)}.word-lists-page .dictation-link:after{content:"";display:flex;align-items:center;justify-content:center;width:clamp(24px,5vw,28px);height:clamp(24px,5vw,28px);background-color:#d3eddf;border-radius:50%;border:2px solid var(--color-accent);flex-shrink:0;transition:transform .2s ease}.word-lists-page .dictation-link svg{position:absolute;right:clamp(6px,1.5vw,8px);width:clamp(10px,2.5vw,12px);height:clamp(10px,2.5vw,12px);color:#1d2129;z-index:1;transition:all .3s ease}.word-lists-page .dictation-link:hover svg{animation:word-lists-arrowSlide .8s ease infinite}@keyframes word-lists-arrowSlide{0%{transform:translateX(0);opacity:1}50%{transform:translateX(2px);opacity:.7}to{transform:translateX(0);opacity:1}}.word-lists-page .kana-accent-wrapper{display:inline-flex;align-items:center;position:relative}.word-lists-page .accent-high{position:relative;display:inline-flex;padding-right:2px}.word-lists-page .accent-high:before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--color-text-primary);border-radius:1px}.word-lists-page .accent-high.has-drop:after{content:"";position:absolute;right:0;top:0;width:2px;height:.5em;background:#ff3b30;border-radius:1px}.word-lists-page .accent-char{color:#ff3b30}.word-lists-page .toolbar-row{display:flex;align-items:center;justify-content:flex-end;gap:var(--spacing-md);margin-bottom:var(--spacing-lg);flex-wrap:wrap}.word-lists-page .lesson-filter-button{margin-right:0;display:flex;align-items:center;gap:8px;min-width:140px;height:40px;padding:0 var(--spacing-md);background:var(--color-background);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-primary);font-size:.9375rem;font-weight:500;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);letter-spacing:-.01em;white-space:nowrap}.word-lists-page .lesson-filter-button:hover{border-color:var(--color-accent);background:rgba(138,43,226,.02);box-shadow:var(--shadow-sm)}.word-lists-page .lesson-filter-button:active{transform:scale(.98)}.word-lists-page .lesson-icon{flex-shrink:0;color:var(--color-accent)}.word-lists-page .lesson-text{flex:1;overflow:hidden;text-overflow:ellipsis;text-align:left}.word-lists-page .lesson-arrow{flex-shrink:0;opacity:.5;transition:transform .2s ease}.word-lists-page .lesson-filter-button:hover .lesson-arrow{transform:translateY(1px)}.word-lists-page .lesson-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.4);backdrop-filter:blur(8px);z-index:1000;display:flex;align-items:center;justify-content:center;padding:var(--spacing-lg);animation:word-lists-fadeIn .2s ease-out}@keyframes word-lists-fadeIn{0%{opacity:0}to{opacity:1}}.word-lists-page .lesson-modal{background:var(--color-background);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);max-width:600px;width:100%;max-height:80vh;display:flex;flex-direction:column;animation:word-lists-slideUp .3s cubic-bezier(.4,0,.2,1)}@keyframes word-lists-slideUp{0%{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.word-lists-page .lesson-modal-header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-lg) var(--spacing-xl);border-bottom:1px solid var(--color-border)}.word-lists-page .lesson-modal-header h3{font-size:1.125rem;font-weight:600;color:var(--color-text-primary);letter-spacing:-.02em;margin:0}.word-lists-page .lesson-modal-close{width:32px;height:32px;border:none;background:transparent;color:var(--color-text-secondary);border-radius:var(--radius-sm);cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;flex-shrink:0}.word-lists-page .lesson-modal-close:hover{background:rgba(0,0,0,.05);color:var(--color-text-primary)}.word-lists-page .lesson-modal-close:active{transform:scale(.95)}.word-lists-page .lesson-modal-content{padding:var(--spacing-xl);overflow-y:auto;flex:1}.word-lists-page .lesson-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:var(--spacing-sm)}.word-lists-page .lesson-chip{height:44px;padding:0 var(--spacing-md);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-background);color:var(--color-text-primary);font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.01em}.word-lists-page .lesson-chip:hover{border-color:var(--color-accent);background:rgba(138,43,226,.04);transform:translateY(-1px);box-shadow:var(--shadow-sm)}.word-lists-page .lesson-chip:active{transform:translateY(0) scale(.98)}.word-lists-page .lesson-chip-active{background:var(--color-accent);color:white;border-color:var(--color-accent);font-weight:600;box-shadow:var(--shadow-md)}.word-lists-page .lesson-chip-active:hover{background:#7b2fb8;border-color:#7b2fb8;transform:translateY(-1px)}.word-lists-page .pagination{display:flex;align-items:center;justify-content:center;gap:var(--spacing-md);margin-top:var(--spacing-2xl);padding:var(--spacing-lg) 0}.word-lists-page .pagination button{min-width:88px;height:40px;padding:0 var(--spacing-lg);background:var(--color-background);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-accent);font-size:.9375rem;font-weight:500;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);letter-spacing:-.01em}.word-lists-page .pagination button:hover:not([disabled]){background:var(--color-accent);border-color:var(--color-accent);color:white;box-shadow:var(--shadow-sm);transform:translateY(-1px)}.word-lists-page .pagination button:active:not([disabled]){transform:translateY(0)}.word-lists-page .pagination button:disabled{opacity:.35;cursor:not-allowed;color:var(--color-text-secondary)}.word-lists-page .pagination span{font-size:.875rem;color:var(--color-text-secondary);font-weight:500;letter-spacing:-.01em;min-width:80px;text-align:center}.word-lists-page .tabs-container{display:flex;flex-wrap:nowrap;gap:12px;margin-bottom:var(--spacing-xl);padding:4px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;align-items:flex-start;background:transparent;border-radius:0}.word-lists-page .tabs-container::-webkit-scrollbar{display:none}.word-lists-page .tab{position:relative;display:inline-flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-lg);background:white;border:1px solid var(--color-border-light);border-radius:var(--radius-md);color:var(--color-text-primary);font-size:.9375rem;font-weight:500;cursor:pointer;transition:border-color .2s ease,background-color .2s ease;white-space:nowrap;letter-spacing:-.01em}.word-lists-page .tab:hover{color:var(--color-accent)}.word-lists-page .tab-active{color:var(--color-accent);font-weight:600}.word-lists-page .tab-with-image{flex-direction:column;justify-content:center;padding:12px;width:132px;background:white;border:1px solid var(--color-border-light);flex-shrink:0;transition:transform .3s ease;border-radius:12px}.word-lists-page .tab-with-image:hover{transform:none;border-color:#88b69e}.word-lists-page .tab-img-wrap{position:relative;width:100%;aspect-ratio:3/4;border-radius:8px;overflow:hidden;background:#f5f5f5;box-shadow:none;transition:all .3s cubic-bezier(.4,0,.2,1);border:1px solid var(--color-border-light)}.word-lists-page .tab-with-image:hover .tab-img-wrap{box-shadow:none}.word-lists-page .tab-with-image.tab-active{transform:none;background:#edf5f0;border-color:var(--color-accent)}.word-lists-page .tab-with-image.tab-active .tab-img-wrap{border-color:var(--color-accent);box-shadow:none}.word-lists-page .tab-img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .3s ease}.word-lists-page .tab-with-image:hover .tab-img{transform:scale(1.05)}.word-lists-page .tab-label{margin-top:8px;margin-bottom:0;font-size:.8125rem;font-weight:500;line-height:1.3;color:#374151;text-align:center;letter-spacing:0;transition:color .2s ease}.word-lists-page .tab-with-image:hover .tab-label{color:#374151}.word-lists-page .tab-with-image.tab-active .tab-label{color:var(--color-accent);font-weight:600}@media (max-width:768px){.word-lists-page .word-list-container{border-radius:var(--radius-md)}.word-lists-page .lesson-filter-button{min-width:110px;height:36px;font-size:.875rem;padding:0 var(--spacing-sm);gap:6px;margin-right:0}.word-lists-page .lesson-icon{width:16px;height:16px}.word-lists-page .lesson-arrow{width:10px;height:10px}.word-lists-page .lesson-modal-overlay{padding:var(--spacing-md);align-items:center}.word-lists-page .lesson-modal{max-width:100%;max-height:80vh;border-radius:var(--radius-lg)}.word-lists-page .lesson-modal-header{padding:var(--spacing-md) var(--spacing-lg)}.word-lists-page .lesson-modal-header h3{font-size:1rem}.word-lists-page .lesson-modal-close{width:28px;height:28px}.word-lists-page .lesson-modal-content{padding:var(--spacing-lg)}.word-lists-page .lesson-grid{grid-template-columns:repeat(auto-fill,minmax(75px,1fr));gap:var(--spacing-xs)}.word-lists-page .lesson-chip{height:40px;font-size:.8125rem;padding:0 var(--spacing-sm)}.word-lists-page .word-list-header{display:none}.word-lists-page .word-row:has(.word-lesson),.word-lists-page .word-row:not(:has(.word-lesson)){grid-template-columns:28px minmax(0,1fr) 70px;grid-template-areas:"index word action" ". meaning meaning" ". lesson lesson";gap:8px 10px;padding:16px 12px}.word-lists-page .word-index{grid-area:index}.word-lists-page .word-content{grid-area:word}.word-lists-page .word-action{grid-area:action}.word-lists-page .word-meaning{grid-area:meaning}.word-lists-page .word-lesson{grid-area:lesson;justify-content:flex-start}.word-lists-page .word-primary{font-size:16px;white-space:normal;flex-wrap:wrap;overflow-wrap:anywhere}.word-lists-page .word-secondary{font-size:13px;white-space:normal;flex-wrap:wrap}.word-lists-page .meaning-text{font-size:14px;line-height:1.7}.word-lists-page .header-index{font-size:.5625rem}.word-lists-page .index-number{font-size:.5625rem;padding:1px 4px;min-width:20px}.word-lists-page .dictation-link{width:clamp(60px,16vw,80px);height:clamp(26px,5.5vw,30px)}.word-lists-page .dictation-link:before{font-size:clamp(.625rem,1.6vw,.6875rem);padding-left:clamp(4px,1vw,6px)}.word-lists-page .dictation-link:after{width:clamp(20px,4.5vw,24px);height:clamp(20px,4.5vw,24px)}.word-lists-page .dictation-link svg{right:clamp(4px,1vw,6px);width:clamp(8px,2vw,10px);height:clamp(8px,2vw,10px)}.word-lists-page .word-list-header{gap:clamp(2px,1vw,6px);padding:clamp(4px,1.5vw,8px) clamp(6px,2vw,10px)}.word-lists-page .word-list{gap:0;padding:0}.word-lists-page .word-row{min-height:clamp(48px,12vw,60px);border-radius:0;box-shadow:none;border-bottom:1px solid var(--color-border-light)}.word-lists-page .header-meaning{text-align:left;justify-self:start;padding-left:0}.word-lists-page .word-meaning{justify-content:flex-start}.word-lists-page .info-button{width:clamp(16px,4vw,18px);height:clamp(16px,4vw,18px)}.word-lists-page .word-content{gap:1px}.word-lists-page .pagination{gap:var(--spacing-sm);padding:var(--spacing-md) 0}.word-lists-page .pagination button{min-width:68px;height:36px;font-size:.875rem;padding:0 var(--spacing-md)}.word-lists-page .pagination span{font-size:.8125rem;min-width:68px}}@media (min-width:769px) and (max-width:1024px){.word-lists-page .word-row{gap:var(--spacing-sm);padding:var(--spacing-md) var(--spacing-lg);border-radius:0;box-shadow:none;border-bottom:1px solid var(--color-border-light)}.word-lists-page .word-list-header{gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-lg)}.word-lists-page .lesson-badge{width:52px;font-size:.6875rem}.word-lists-page .word-primary{font-size:1rem}.word-lists-page .meaning-text{font-size:.875rem}}@supports not (gap:1rem){.word-lists-page .word-row>*+*{margin-left:var(--spacing-lg)}.word-lists-page .pagination>*+*,.word-lists-page .tabs-container>*+*{margin-left:var(--spacing-md)}}.word-lists-page .word-list-summary{margin-right:auto;min-width:0}@media (min-width:640px){.word-lists-page .word-lists-container{padding:6rem 1.5rem 2rem}}@media (max-width:639px){.word-lists-page .tab-with-image{width:112px;padding:10px}.word-lists-page .toolbar-row>.Btn-Container{width:150px;flex-shrink:0}.word-lists-page .toolbar-row>.Btn-Container .text{width:calc(150px - 45px);font-size:.875rem}}.word-lists-page button:focus-visible{outline:2px solid #2563eb;outline-offset:3px}