:root{color-scheme:light}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--page)}
.stage-word-page{color:var(--ink)}
.stage-word-shell{width:min(1500px,calc(100% - 48px));margin:0 auto;padding:34px 0}
.stage-word-heading{margin-bottom:22px}
.stage-word-heading h1{margin:0 0 8px;font-size:clamp(36px,4vw,52px);font-weight:550;letter-spacing:-.04em}
.stage-word-heading p{max-width:900px;margin:0;color:var(--muted);font-size:18px;line-height:1.7}
.stage-word-browser{display:grid;grid-template-columns:max-content minmax(520px,1fr) minmax(330px,.72fr);height:auto;min-height:0;padding:0;overflow:hidden}
.stage-panel,.word-panel,.detail-panel{min-width:0;min-height:0;padding:22px}
.stage-panel,.word-panel{border-right:1px solid var(--line)}
.stage-panel h2,.panel-heading h2{margin:0;font-size:22px;font-weight:550}
.stage-nav{display:grid;gap:8px;margin-top:20px}
.stage-nav button{width:100%;padding:12px 14px;color:var(--muted);font-size:17px;text-align:left;white-space:nowrap;background:transparent;border:0;border-radius:12px;cursor:pointer}
.stage-nav button:hover{color:var(--brand)}
.stage-nav button.active{color:var(--brand);background:var(--brand-soft);font-weight:550}
.stage-status{margin:18px 0 0;color:var(--muted);line-height:1.6}
.word-panel,.detail-panel{display:flex;flex-direction:column}
.panel-heading{display:flex;flex:0 0 auto;align-items:flex-end;justify-content:space-between;min-height:48px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.panel-heading span{display:block;margin-bottom:4px;color:var(--brand);font-size:14px}
.word-list,.word-detail{min-height:0;overflow:auto;scrollbar-gutter:stable}
.word-list{flex:0 0 auto;overflow:visible;scrollbar-gutter:auto}
.word-row{display:grid;grid-template-columns:minmax(0,1fr) 36px;align-items:center;width:100%;padding:0 8px;color:var(--ink);background:transparent;border-bottom:1px solid var(--line)}
.word-row:hover,.word-row.active{background:var(--brand-soft)}
.word-row.active{box-shadow:inset 3px 0 0 var(--brand)}
.word-main{display:grid;grid-template-columns:max-content max-content minmax(0,1fr);gap:18px;min-width:0;padding:14px 8px;color:inherit;text-align:left;background:transparent;border:0;cursor:pointer}
.word-text{font-size:18px;font-weight:550;white-space:nowrap}
.word-phonetic{color:var(--muted);white-space:nowrap}
.word-meaning{min-width:0;overflow:hidden;color:var(--ink);line-height:1.55;white-space:nowrap;text-overflow:ellipsis}
.word-pos{margin-right:8px;color:var(--brand)}
.word-speak{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;color:var(--muted);background:transparent;border:0;cursor:pointer}
.word-speak:hover,.word-speak:focus-visible{color:var(--brand)}
.word-speak svg{width:20px;height:20px;pointer-events:none}
.list-message,.detail-empty{padding:28px 8px;color:var(--muted);line-height:1.7}
.word-pagination{display:flex;flex:0 0 auto;justify-content:space-between;gap:12px;padding-top:16px;border-top:1px solid var(--line)}
.word-pagination .g_button{min-width:108px}
.word-detail{flex:0 1 auto;max-height:560px;padding-top:18px}
.detail-head{padding:0 0 18px;border-bottom:1px solid var(--line)}
.detail-word{margin:0 0 6px;color:var(--brand);font-size:30px;font-weight:550}
.detail-phonetic{color:var(--muted);font-size:17px}
.detail-section{padding:20px 0;border-bottom:1px solid var(--line)}
.detail-section-heading{display:flex;align-items:center;gap:4px;margin-bottom:12px}
.detail-section h3{margin:0;font-size:18px;font-weight:550}
.detail-list{display:grid;gap:14px;margin:0;padding:0;list-style:none}
.detail-item strong{display:block;margin-bottom:4px;color:var(--ink);font-weight:550;line-height:1.5}
.detail-item p{margin:0;color:var(--muted);line-height:1.6}
.detail-more{cursor:pointer}
.detail-more:disabled{cursor:wait;opacity:.45}
.detail-more svg{pointer-events:none}
@media(max-width:1050px){.stage-word-browser{grid-template-columns:max-content minmax(390px,1fr);height:auto;min-height:0}.detail-panel{grid-column:1/-1;min-height:360px;border-top:1px solid var(--line)}.word-panel{border-right:0}}
@media(max-width:720px){.stage-word-shell{width:calc(100% - 24px);padding:22px 0}.stage-word-browser{display:block}.stage-panel,.word-panel,.detail-panel{padding:16px;border-right:0}.stage-nav{display:flex;overflow:auto}.stage-nav button{width:auto;white-space:nowrap}.word-panel{height:620px;border-top:1px solid var(--line)}.detail-panel{height:520px}.word-main{gap:8px;padding:13px 4px}.word-text{font-size:16px}.word-pos{margin-right:4px}.word-row{grid-template-columns:minmax(0,1fr) 32px;padding:0 4px}}
