:root{--primary:#2563eb;--primary-dark:#1e40af;--bg-body:#f8fafc;--bg-card:#ffffff;--card-alt:color-mix(in srgb,#ffffff 95%,#0f172a 5%);--text-main:#0f172a;--text-sec:#475569;--border:#cbd5e1;--highlight-bg:#dbeafe;--highlight-text:#1e40af;--success:#16a34a;--warning:#ca8a04;--error:#dc2626;--ghost-color:#94a3b8;--correct-color:#0f172a;--diff-added:#bbf7d0;--diff-removed:#fecaca;--missing-char:#fcd34d;--input-bg:#ffffff;--btn-bg:#f1f5f9;--btn-hover:#e2e8f0;--typing-font-size:16px;--display-font-size:18px;--display-text-color:inherit;--kb-pinky:#bbf7d0;--kb-ring:#fef08a;--kb-middle:#fecdd3;--kb-index:#a5f3fc;--kb-thumb:#e2e8f0;--kb-zone-text:#1e293b;--vi-default-color:#1e40af}[data-theme=dark]{--primary:#3b82f6;--primary-dark:#2563eb;--bg-body:#020617;--bg-card:#0f172a;--card-alt:#1e293b;--btn-bg:#1e293b;--btn-hover:#334155;--text-main:#f1f5f9;--text-sec:#94a3b8;--border:#334155;--highlight-bg:#172554;--highlight-text:#93c5fd;--ghost-color:#64748b;--correct-color:#f8fafc;--diff-added:#065f46;--diff-removed:#7f1d1d;--missing-char:#78350f;--input-bg:#0f172a;--success:#4ade80;--error:#f87171;--kb-pinky:#14532d;--kb-ring:#713f12;--kb-middle:#7f1d3d;--kb-index:#164e63;--kb-thumb:#334155;--kb-zone-text:#f1f5f9;--vi-default-color:#93c5fd}*{box-sizing:border-box}button,input,option,select,textarea{font-family:inherit;font-size:inherit}body{font-family:Roboto,sans-serif;background:var(--bg-body);color:var(--text-main);margin:0;overflow-x:hidden;scrollbar-width:none;-ms-overflow-style:none;touch-action:pan-up}body::-webkit-scrollbar,html::-webkit-scrollbar{display:none;width:0;height:0}html{scrollbar-width:none;-ms-overflow-style:none}.app-shell{position:sticky;top:0;height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden}#scrollNudge{flex:0 0 auto;height:2000px}header{flex:0 0 auto;background:var(--bg-card);border-bottom:1px solid var(--border);padding:.5rem 1rem;justify-content:space-between;gap:1rem;box-shadow:0 1px 3px rgba(0,0,0,.05);z-index:100}.brand,header{display:flex;align-items:center}.brand{font-size:1.1rem;font-weight:700;color:var(--primary);gap:8px}.header-left{display:flex;align-items:center;gap:8px;flex:1 1;min-width:0}header .header-loc{flex:1 1;min-width:0;font-size:1rem;font-weight:700;color:var(--primary);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}header .header-loc:before{content:"\f3c5";font-family:Font Awesome\ 6 Free;font-weight:900;color:var(--text-sec);font-size:.85rem;margin-right:7px}#headerLocInfoBtn{display:none}header .header-home-btn{display:flex;align-items:center;justify-content:center;text-decoration:none;flex:0 0 auto}html.in-frame #headerLocInfoBtn,html.in-frame #settingsBtn,html.in-frame #subbarSettingsBtn,html.in-frame header .header-home-btn{display:none!important}#silPracticeBtn,#silSettingsBtn{display:none}html.in-frame #silSettingsBtn{display:flex;margin-left:auto}html.in-frame .subbar{position:relative;min-height:calc(.6rem + 3.5rem + max(1.25rem, calc(env(safe-area-inset-bottom) + .75rem)))}.subbar .btn-icon{width:44px;height:44px}html.in-frame #silPracticeBtn.on{display:flex;position:absolute;left:50%;top:.6rem;transform:translateX(-50%);width:56px;height:56px;border-radius:50%;font-size:1.4rem;background:var(--primary);color:#fff;border-color:var(--primary);box-shadow:0 4px 14px rgba(37,99,235,.35)}.sil-ctl{display:none;gap:4px;align-items:center}html.in-frame .sil-ctl.on{display:flex}.header-controls{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;align-items:center;flex:0 0 auto}.header-pick-btn{display:flex;align-items:center;gap:.4rem;padding:.45rem .9rem;white-space:nowrap}.chunk-info-frac{display:flex;flex-direction:column;flex:0 0 auto;line-height:1.25}.chunk-info-den,.chunk-info-num{font-size:.72rem;font-weight:700;color:var(--text-sec);white-space:nowrap;text-align:center;padding:0 3px}.chunk-info-num{border-bottom:1px solid var(--border)}.btn-icon{background:var(--btn-bg);border:1px solid transparent;color:var(--text-main);width:40px;height:40px;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;font-size:1.05rem}.btn-icon:hover{background:var(--btn-hover)}.btn-icon.active{background:var(--primary-dark);color:white;border-color:var(--primary-dark)}main{flex:1 1;display:flex;flex-direction:column;overflow:hidden;min-height:0}.subbar{flex:0 0 auto;background:var(--bg-card);border-top:1px solid var(--border);box-shadow:0 -1px 4px rgba(0,0,0,.06);padding:.6rem .9rem max(1.25rem,calc(env(safe-area-inset-bottom) + .75rem));gap:.9rem;flex-wrap:wrap;z-index:90}.subbar,.subbar-group{display:flex;align-items:center}.subbar-group{gap:.45rem}#subbarExtra{display:contents}#subbarSettingsBtn{display:none}#subbarSettingsBody{display:flex;flex-direction:column;gap:.9rem}#subbarSettingsBody #subbarExtra{display:contents}@media (max-width:700px) and (orientation:portrait),(max-width:750px) and (orientation:landscape){#subbarExtra{display:none}#subbarSettingsBtn{display:flex}header .header-loc{display:none}#headerLocInfoBtn{display:flex}#fullscreenBtn{display:none}#subbarSettingsModal{align-items:flex-end}#subbarSettingsModal .modal-content{margin-top:0;margin-bottom:.4rem}.header-pick-btn-label,html.keyboard-open #wordPracticeModal .modal-header,html.keyboard-open #wordPracticeModal .wp-sample,html.keyboard-open .sample-row,html.keyboard-open .subbar,html.keyboard-open header{display:none}}.subbar-label{font-size:.7rem;font-weight:700;text-transform:uppercase;color:var(--text-sec);white-space:nowrap}.subbar select{padding:.5rem .6rem;border:1px solid var(--border);border-radius:6px;background:var(--bg-body);color:var(--text-main);font-size:.9rem;min-height:40px}.subbar-pick-btn{display:flex;align-items:center;gap:.5rem;min-height:40px}.sidebar{background:var(--bg-card);border-right:1px solid var(--border);padding:1rem;overflow-y:auto;gap:1.5rem}.sidebar,.sidebar-section{display:flex;flex-direction:column}.sidebar-section{gap:.5rem}.sidebar-section.tree-section{flex:1 1;min-height:120px}.sidebar-label{font-size:.75rem;font-weight:700;text-transform:uppercase;color:var(--text-sec)}.tree-header{display:flex;align-items:center;gap:.4rem}.tree-header .sidebar-label{flex:1 1}.tree-expand-btn{background:transparent;border:1px solid var(--border);color:var(--text-sec);width:22px;height:22px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.65rem;flex:0 0 auto}.tree-expand-btn:hover{background:var(--border);color:var(--text-main)}.device-touch .basket-mini-btn,.device-touch .btn-icon-sm,.device-touch .dcp-mini-btn,.device-touch .tree-expand-btn{width:32px;height:32px;font-size:.85rem}.sidebar select{padding:.5rem;border:1px solid var(--border);border-radius:4px;background:var(--bg-body);color:var(--text-main);font-size:.9rem}.sidebar-nav{display:flex;gap:.5rem}.nav-btn{flex:1 1;padding:.5rem;border:1px solid var(--border);background:var(--bg-body);color:var(--text-main);border-radius:4px;cursor:pointer;transition:all .2s}.nav-btn:hover{background:var(--border)}.nav-btn.disabled{opacity:.5;cursor:not-allowed}.tree-search{padding:.6rem;border:1px solid var(--border);border-radius:4px;background:var(--bg-body);color:var(--text-main);font-size:.9rem;margin-bottom:.6rem;flex:0 0 auto}.tree-match-count{font-size:.78rem;color:var(--text-sec)}.tree-search-wrap{position:relative;flex:0 0 auto;margin-bottom:.6rem}.tree-search-input{width:100%;box-sizing:border-box;margin:0;padding-left:2rem;padding-right:2rem}.tree-search-icon{left:.6rem;font-size:.8rem;pointer-events:none}.tree-search-clear,.tree-search-icon{position:absolute;top:50%;transform:translateY(-50%);color:var(--text-sec)}.tree-search-clear{right:.35rem;background:transparent;border:none;cursor:pointer;padding:5px;display:none;line-height:1}.tree-search-clear.show{display:block}.tree-suggest{position:absolute;left:0;right:0;top:calc(100% + 3px);z-index:60;background:var(--bg-card);border:1px solid var(--border);border-radius:6px;box-shadow:0 6px 20px rgba(0,0,0,.4);max-height:60vh;overflow-y:auto;display:none}.tree-suggest.show{display:block}.tree-suggest-item{padding:.5rem .7rem;cursor:pointer;font-size:.88rem;display:flex;align-items:center;gap:.5rem}.tree-suggest-item.active,.tree-suggest-item:hover{background:var(--border)}.tree-suggest-item .ts-tag{color:var(--primary);font-weight:700}.tree-suggest-item .ts-kind{margin-left:auto;font-size:.7rem;color:var(--text-sec)}mark.search-hl{background:#ffd54a;color:#1a1a1a;border-radius:2px;padding:0 1px}.sentence-filter-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:.5rem}.sentence-tree{flex:1 1;overflow-y:auto;border:1px solid var(--border);border-radius:6px;padding:.5rem;background:var(--bg-body);font-size:.82rem}.modal-body.filter-modal-body{display:flex;flex-direction:column;gap:.5rem;overflow:hidden;flex:1 1;padding:1rem 1.2rem 1.2rem}.filter-dataset-row{flex:0 0 auto;display:flex;flex-direction:column;gap:.25rem;margin-bottom:.5rem}.filter-dataset-controls{display:flex;align-items:center;gap:.4rem}.filter-dataset-controls select{flex:1 1;min-width:0;padding:.5rem .6rem;border:1px solid var(--border);border-radius:6px;background:var(--bg-body);color:var(--text-main);font-size:.9rem;min-height:40px}.filter-dataset-controls .tree-expand-btn{width:36px;height:36px;border-radius:8px;font-size:.85rem}.filter-tabs{flex:0 0 auto;margin-bottom:0}.filter-panel{flex:1 1;min-height:0;display:flex;flex-direction:row;overflow:hidden}.filter-tree-col,.saved-list-col{flex:0 0 25%;display:flex;flex-direction:column;overflow:hidden;min-width:150px}.filter-basket-col,.saved-detail-col{flex:1 1;display:flex;flex-direction:column;overflow:hidden;min-width:220px;gap:.55rem;padding-left:.9rem}.saved-detail-col{gap:.6rem}.saved-basket-detail{flex:1 1;min-height:0;display:flex;flex-direction:column;overflow:hidden}.filter-splitter{flex:0 0 8px;align-self:stretch;margin:0 .15rem;background:var(--border);border-radius:5px;cursor:col-resize;position:relative;touch-action:none}.filter-splitter:after{content:"";position:absolute;top:0;bottom:0;left:-9px;right:-9px}.filter-splitter.dragging,.filter-splitter:hover{background:var(--primary)}@media (max-width:700px){.filter-panel{flex-direction:column}.filter-basket-col,.filter-tree-col,.saved-detail-col,.saved-list-col{flex:1 1 50%;min-width:0;min-height:0}.filter-basket-col,.saved-detail-col{padding-left:0;padding-top:.7rem}.filter-splitter{display:none}}.basket-save-row{display:flex;gap:.4rem;align-items:stretch;flex:0 0 auto;flex-wrap:wrap}.basket-save-row .tree-search{margin:0;flex:1 1 140px;min-width:0}.basket-save-btn{flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:.4rem;white-space:nowrap}#basketStartBtn:disabled{opacity:.5;cursor:not-allowed}.saved-basket-list{flex:1 1;min-height:60px;overflow-y:auto;border:1px solid var(--border);border-radius:6px;padding:.4rem;background:var(--bg-body);display:flex;flex-direction:column;gap:.35rem}.saved-basket-item{display:flex;align-items:center;gap:.4rem;padding:.45rem .55rem;border:1px solid var(--border);border-radius:5px;background:var(--bg-card)}.saved-basket-item.active{border-color:var(--primary);background:var(--highlight-bg)}.saved-basket-name{flex:1 1;min-width:0;font-size:.85rem;font-weight:600;color:var(--text-main);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}.saved-basket-meta{font-size:.72rem;color:var(--text-sec);flex:0 0 auto}.saved-basket-empty{color:var(--text-sec);font-style:italic;padding:.8rem .5rem;text-align:center;font-size:.82rem}.saved-basket-item .saved-basket-name{padding:.1rem 0}.saved-detail-head{flex:0 0 auto;display:flex;align-items:center;gap:.5rem}.saved-detail-title{flex:1 1;min-width:0;font-size:.95rem;font-weight:700;color:var(--text-main);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.saved-detail-actions{flex:0 0 auto;display:flex;gap:.4rem;flex-wrap:wrap}.saved-detail-actions .btn{padding:.45rem .8rem;font-size:.85rem;display:flex;align-items:center;gap:.4rem}.saved-detail-list{flex:1 1;min-height:0;margin-top:.6rem;overflow-y:auto;border:1px solid var(--border);border-radius:6px;padding:.4rem;background:var(--bg-body);display:flex;flex-direction:column;gap:.3rem}.saved-detail-sentence{display:flex;gap:.5rem;padding:.4rem .5rem;border:1px solid var(--border);border-radius:5px;background:var(--bg-card);font-size:.85rem;color:var(--text-main)}.saved-detail-sentence .sd-idx{flex:0 0 auto;width:1.8em;text-align:right;color:var(--text-sec);font-size:.75rem}.saved-detail-sentence .sd-text{flex:1 1;min-width:0}.saved-detail-placeholder{flex:1 1;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--text-sec);font-style:italic;padding:1rem}.tree-check{accent-color:var(--primary);cursor:pointer;flex:0 0 auto;width:15px;height:15px}.sentence-tree summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.4rem}.sentence-tree summary::-webkit-details-marker{display:none}.sentence-tree summary:before{content:"▸";display:inline-block;width:.9em;flex:0 0 auto;color:var(--text-sec);transition:transform .15s}.sentence-tree details[open]>summary:before{transform:rotate(90deg)}.sentence-tree summary .tree-node-label{flex:1 1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sentence-tree>details{margin-bottom:.35rem}.sentence-tree>details>summary{font-weight:700;font-size:.85rem;color:var(--text-main);background:var(--highlight-bg);padding:.4rem .6rem;border-radius:5px}.sentence-tree>details>summary:hover{background:var(--border)}.sentence-tree>details>details{margin:.3rem 0 .15rem .9rem;border-left:2px solid var(--border);padding-left:.6rem}.sentence-tree>details>details>summary{font-weight:600;font-size:.8rem;color:var(--text-main);padding:.32rem .4rem}.sentence-tree>details>details>summary:hover{background:var(--highlight-bg)}.sentence-tree>details>details>details{margin:.25rem 0 .15rem .9rem;border-left:2px dashed var(--border);padding-left:.6rem}.sentence-tree>details>details>details>summary{font-weight:500;font-size:.76rem;color:var(--text-sec);padding:.28rem .4rem}.sentence-tree>details>details>details>summary:hover{background:var(--highlight-bg);color:var(--text-main)}.tree-leaf{display:flex;align-items:center;gap:.5rem;margin-left:1.4rem;padding:.3rem .5rem;border-left:2px solid var(--border);border-radius:0 3px 3px 0;cursor:pointer;color:var(--text-sec);line-height:1.35}.tree-leaf:hover{background:var(--highlight-bg);color:var(--text-main);border-left-color:var(--primary)}.tree-leaf.selected{background:var(--diff-added);color:var(--text-main);border-left-color:var(--success)}.tree-leaf-text{flex:1 1;min-width:0}.tree-empty{color:var(--text-sec);font-style:italic;padding:.5rem}.basket-list{flex:2 1;min-height:80px;overflow-y:auto;border:1px solid var(--border);border-radius:6px;padding:.4rem;background:var(--bg-body);display:flex;flex-direction:column;gap:.35rem}.basket-item{display:flex;align-items:center;gap:.4rem;padding:.4rem .5rem;border:1px solid var(--border);border-radius:5px;background:var(--bg-card);-webkit-user-select:none;user-select:none}.basket-drag-handle{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:22px;align-self:stretch;color:var(--text-sec);cursor:grab;touch-action:none}.basket-drag-handle:active{cursor:grabbing}.basket-item.basket-dragging{z-index:10;position:relative;border-color:var(--primary);box-shadow:0 8px 20px rgba(0,0,0,.28)}.basket-item-idx{font-size:.72rem;color:var(--text-sec);flex:0 0 auto;width:1.6em;text-align:right}.basket-item-text{flex:1 1;min-width:0;font-size:.82rem;color:var(--text-main);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.basket-item-ctrl{display:flex;gap:.2rem;flex:0 0 auto}.basket-mini-btn{background:transparent;border:1px solid var(--border);color:var(--text-sec);width:22px;height:22px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.65rem;flex:0 0 auto}.basket-mini-btn:hover{background:var(--border);color:var(--text-main)}.basket-empty{color:var(--text-sec);font-style:italic;padding:1rem .5rem;text-align:center}.basket-start-btn{width:100%;justify-content:center}.basket-start-btn:disabled{opacity:.5;cursor:not-allowed}.content-area{flex:1 1;min-height:0;display:flex;flex-direction:column;overflow:hidden}@media (min-width:1400px){.input-area,.sample-row{max-width:1200px;width:100%;margin-left:auto;margin-right:auto}}.location-bar{padding:.4rem 1rem}.location-bar,.sample-row{flex:0 0 auto;background:var(--bg-card);border-bottom:1px solid var(--border)}.sample-row{display:flex;align-items:stretch}.nav-side-btn{flex:0 0 auto;width:56px;background:var(--bg-card);border:none;color:var(--primary);font-size:1.4rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s}.nav-side-btn#btnPrev{border-right:1px solid var(--border)}.nav-side-btn#btnNext{border-left:1px solid var(--border)}.nav-side-btn:hover{background:var(--highlight-bg)}.nav-side-btn:active{background:var(--border)}.nav-side-btn.disabled{opacity:.3;cursor:not-allowed;pointer-events:none}@media (max-width:700px) and (orientation:portrait){.nav-side-btn{display:none}}.speak-btn{position:absolute;top:6px;z-index:25;height:30px;padding:0 10px;border-radius:15px;border:1px solid var(--border);background:var(--bg-card);color:var(--primary);cursor:pointer;display:flex;align-items:center;gap:5px;font-size:.74rem;font-weight:700}.speak-btn-en{left:8px}.speak-btn-vi{right:8px}.speak-btn-group{display:contents}.speak-btn.line-speak{position:static;vertical-align:middle;width:34px;height:34px;padding:0;justify-content:center;margin-right:.35em;border-radius:50%;align-self:center}.header-status,.speak-btn.line-speak{display:inline-flex;font-size:.85rem;flex:0 0 auto}.header-status{align-items:center;gap:4px;white-space:nowrap}.subbar .speak-btn-group{display:flex;align-items:center;gap:.45rem}.subbar .speak-btn-group .speak-btn{position:static}.speak-btn.active-mode{border-color:var(--primary);box-shadow:0 0 0 2px var(--highlight-bg)}.speak-btn:hover{background:var(--highlight-bg)}.speak-btn.speaking{background:var(--primary);color:#fff;border-color:var(--primary)}.display-area{flex:1 1;min-width:0;max-height:130px;background:var(--bg-card);padding:.5rem 1rem;justify-content:flex-start;position:relative;z-index:20;touch-action:auto;-webkit-user-select:none;user-select:none;overflow:hidden;pointer-events:auto}.display-area,.display-lines{display:flex;flex-direction:column;align-items:center;gap:.3rem}.display-lines{overflow-x:hidden;overflow-y:auto;max-height:120px;width:100%;will-change:transform,opacity}.display-text{font-size:18px;line-height:1.4;color:var(--text-main);white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;text-align:center;max-width:min(900px,100%)}.display-text.dl-vi{font-weight:600;color:var(--vi-default-color)}.display-text.dl-ipa{color:var(--primary);font-style:italic}.display-text.dl-phonetic{color:var(--text-sec);font-style:italic}.display-text.dl-en{color:var(--text-sec);display:flex;flex-wrap:wrap;gap:4px;justify-content:center;-webkit-user-select:text;user-select:text;pointer-events:auto}.phrase-word{padding:2px 6px;border-radius:4px;transition:background .15s,color .15s;pointer-events:auto;touch-action:auto}.phrase-word,.phrase-word.word-speak{cursor:pointer}.phrase-word.word-speak:hover{background:rgba(0,0,0,.1)}.phrase-word.sel-start{background:var(--primary);color:#fff;font-weight:700;border-radius:4px 0 0 4px;padding-left:8px}.phrase-word.sel-mid{background:var(--highlight-bg);color:var(--text-main);border-radius:0}.phrase-word.sel-end{background:var(--primary);color:#fff;font-weight:700;border-radius:0 4px 4px 0;padding-right:8px}[data-theme=dark] .phrase-word.word-speak:hover{background:rgba(255,255,255,.1)}.phrase-selection-btn{margin-top:.5rem;padding:.4rem .8rem;background:var(--primary);color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:.9rem;font-weight:600}.phrase-selection-btn:hover{opacity:.9}.dcp-title{font-size:.72rem;font-weight:700;text-transform:uppercase;color:var(--text-sec)}.dcp-divider{height:1px;background:var(--border);margin:.15rem 0}#dcpLineControls{display:flex;flex-direction:column;gap:.6rem}.dcp-line{border:1px solid var(--border);border-radius:6px;padding:.4rem .55rem;display:flex;flex-direction:row;align-items:flex-start;gap:.5rem;background:var(--card-alt)}.dcp-line.dcp-line-dragging{box-shadow:0 6px 16px rgba(0,0,0,.3);z-index:5;position:relative}.dcp-drag-handle{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:22px;align-self:stretch;color:var(--text-sec);cursor:grab;touch-action:none}.dcp-drag-handle:active{cursor:grabbing}.dcp-line-main{flex:1 1;min-width:0;display:flex;flex-direction:column;gap:.35rem}.dcp-line-head{justify-content:space-between}.dcp-line-check,.dcp-line-head{display:flex;align-items:center;gap:.4rem}.dcp-line-check{cursor:pointer;white-space:nowrap;color:var(--text-main);font-weight:600}.dcp-line-body{display:flex;transition:opacity .15s}.dcp-line.off .dcp-line-body{opacity:.4;pointer-events:none}.dcp-line.collapsed .dcp-line-body{display:none}.dcp-collapse-btn i{transition:transform .15s}.dcp-line.collapsed .dcp-collapse-btn i{transform:rotate(180deg)}.dcp-preview{border:1px solid var(--border);border-radius:8px;background:var(--bg-card);padding:1rem;margin-top:.3rem;display:flex;justify-content:center;min-height:70px;position:sticky;top:0;z-index:5}.dcp-ctrl-row{display:flex;gap:.7rem;flex-wrap:wrap;width:100%}.dcp-ctrl{display:flex;align-items:center;gap:.3rem;flex:1 1 130px;min-width:130px}.dcp-ctrl:first-child{flex-basis:100%}.dcp-ctrl>span.dcp-ctrl-label{width:2.2em;flex:0 0 auto;color:var(--text-sec);font-size:.78rem}.dcp-ctrl input[type=range]{flex:1 1;min-width:40px;accent-color:var(--primary)}.dcp-size-val{min-width:2.8em;text-align:right;color:var(--text-sec);font-size:.78rem}.dcp-ctrl select{flex:1 1;min-width:0;padding:.25rem;background:var(--bg-card);color:var(--text-main);font-size:.78rem}.dcp-ctrl input[type=color],.dcp-ctrl select{border:1px solid var(--border);border-radius:4px}.dcp-ctrl input[type=color]{width:30px;height:24px;padding:0;cursor:pointer;background:none;flex:0 0 auto}.dcp-reset-btn{gap:.4rem;font-size:.85rem;padding:.45rem .9rem}.dcp-mini-btn,.dcp-reset-btn{display:flex;align-items:center;justify-content:center;flex:0 0 auto}.dcp-mini-btn{background:transparent;border:1px solid var(--border);color:var(--text-sec);width:22px;height:22px;border-radius:50%;cursor:pointer;font-size:.65rem}.dcp-mini-btn:hover{background:var(--border);color:var(--text-main)}.input-area{flex:1 1;min-height:0;display:flex;flex-direction:column;padding:.5rem 1rem 1rem;gap:.5rem;overflow:hidden}.current-location{font-size:.82rem;font-weight:600;color:var(--primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.current-location .loc-sep{color:var(--text-sec);font-weight:400;margin:0 .3rem}.location-info-body{font-size:1.05rem;line-height:1.7;white-space:normal;overflow:visible;text-overflow:clip}.btn-icon-sm{background:transparent;border:1px solid var(--border);color:var(--text-sec);width:22px;height:22px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.65rem;transition:all .2s;flex:0 0 auto}.btn-icon-sm:hover{background:var(--border);color:var(--text-main)}.input-wrapper{flex:1 1;position:relative;overflow:hidden;background:var(--input-bg);border-radius:4px;border:1px solid var(--border)}.subbar-icon{color:var(--text-sec);font-size:.85rem;flex:0 0 auto}.subbar-range{width:96px;accent-color:var(--primary);flex:0 0 auto}#fontSizeGroup{margin-left:auto}#subbarSettingsBody #fontSizeGroup{margin-left:0}#subbarSettingsBody .subbar-range{width:200px}#subbarSettingsBody .subbar-slider-row .subbar-icon{width:18px;min-width:18px;overflow:hidden;text-align:center}#subbarSettingsBody .subbar-2col{display:grid;grid-template-columns:140px 1fr;align-items:center;column-gap:14px}.subbar-val{font-size:.78rem;color:var(--text-sec);min-width:3.2em}.subbar-label:has(input:disabled){opacity:.45;cursor:not-allowed}#typingInput,.ghost-layer{font-family:Roboto Mono,monospace;font-size:var(--typing-font-size,1rem);line-height:1.6;padding:12px;margin:0;width:100%;height:100%;position:absolute;top:0;left:0;box-sizing:border-box;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;overflow-x:hidden;overflow-y:auto}.ghost-layer{z-index:1;color:var(--ghost-color);pointer-events:none;opacity:.5}.ghost-layer.overlay-mode{opacity:1;display:flex;align-items:flex-start;justify-content:center;pointer-events:auto;z-index:3}.ov-word{cursor:pointer;border-radius:3px}.ov-word:hover{background:var(--highlight-bg)}.ov-word.speaking{background:var(--warning);color:#fff}.ov-text-block{text-align:center;max-width:100%}#typingInput{z-index:2;background:transparent;color:var(--text-main);border:none;outline:none;resize:none}.ov-char{color:var(--ghost-color)}.ov-char.ov-done{color:var(--text-main)}.ov-space{position:relative}.ov-space:after{content:"·";position:absolute;left:0;right:0;text-align:center;color:var(--ghost-color);opacity:.45;pointer-events:none}.ov-space.ov-was-wrong:after{color:var(--error);opacity:1}.ov-was-wrong{color:var(--error)!important;font-weight:700}.ov-cursor{border-bottom:3px solid var(--primary);animation:ov-blink 1s step-end infinite}@keyframes ov-blink{0%,49%{border-bottom-color:var(--primary)}50%,to{border-bottom-color:transparent}}#typingInput.overlay-input-hidden{color:transparent;caret-color:transparent}.input-controls{font-size:.85rem;flex-wrap:wrap}.chunk-selector,.input-controls{display:flex;gap:.5rem;align-items:center}.chunk-selector select{padding:.3rem .6rem;border:1px solid var(--border);background:var(--bg-body);color:var(--text-main);border-radius:4px}.accuracy-display{font-weight:700;color:var(--primary)}.mistake-display{font-weight:700;color:var(--error)}.wpm-display{font-weight:700;color:var(--success)}.keyboard-panel{display:flex;flex-direction:column;gap:6px;padding:.7rem;background:var(--bg-body);border:1px solid var(--border);border-radius:8px;width:100%;max-width:960px;margin:0 auto;align-self:center}.keyboard-panel.hidden{display:none}.kb-row{display:flex;gap:6px}.kb-key{flex:1 1;min-width:0;height:3rem;display:flex;align-items:center;justify-content:center;flex-direction:column;background:var(--bg-card);border:1px solid var(--border);border-radius:6px;-webkit-user-select:none;user-select:none;transition:background .1s,border-color .1s}.kb-key .kb-key-hi{font-size:.62rem;opacity:.6;color:var(--text-sec);line-height:1}.kb-key .kb-key-lo{font-size:.95rem;font-weight:600;color:var(--text-main);line-height:1.15}.kb-key.kb-wide .kb-key-lo{font-size:.7rem;font-weight:600;color:var(--text-sec)}.kb-key.active{background:var(--primary);border-color:var(--primary)}.kb-key.active .kb-key-hi,.kb-key.active .kb-key-lo{color:white}.kb-key.shift-active{background:var(--highlight-bg);border-color:var(--primary)}.keyboard-panel.zones .kb-key.zone-pinky{background:var(--kb-pinky)}.keyboard-panel.zones .kb-key.zone-ring{background:var(--kb-ring)}.keyboard-panel.zones .kb-key.zone-middle{background:var(--kb-middle)}.keyboard-panel.zones .kb-key.zone-index{background:var(--kb-index)}.keyboard-panel.zones .kb-key.zone-thumb{background:var(--kb-thumb)}.keyboard-panel.zones .kb-key .kb-key-lo{color:var(--kb-zone-text)}.keyboard-panel.zones .kb-key.active{background:var(--primary)}.keyboard-panel.zones .kb-key.active .kb-key-lo{color:white}@media (max-width:900px){.kb-key{height:3.4rem}.kb-key .kb-key-lo{font-size:1.05rem}}#feedbackArea{margin-top:.5rem;min-height:60px;padding:.75rem;background:var(--highlight-bg);border-radius:4px;border:1px solid var(--border);overflow-y:auto}.diff-output{font-family:Roboto Mono,monospace;line-height:1.6;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:break-word;font-size:.9rem}.check-result-score{font-size:2.75rem;font-weight:700;text-align:center;color:var(--primary)}.d-correct{background:var(--diff-added);color:var(--success);padding:0 2px}.d-missing{background:var(--missing-char);color:#854d0e;border-bottom:2px solid #b45309;padding:0 2px}.d-wrong{background:var(--diff-removed);color:var(--error);text-decoration:line-through;padding:0 2px}.modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.7);z-index:1000;align-items:flex-start;justify-content:center;padding:.4rem}#sentenceFilterModal{z-index:1100}.modal.open{display:flex}#checkResultModal{pointer-events:none}#checkResultModal .modal-content{pointer-events:auto}.modal-content{background:var(--bg-card);border-radius:8px;width:98vw;max-width:900px;max-height:96vh;margin-top:.4rem;display:flex;flex-direction:column;box-shadow:0 10px 40px rgba(0,0,0,.2)}#importModal .modal-content,#settingsModal .modal-content{width:98vw;max-width:1100px;height:96vh;max-height:none}#settingsModal .modal-body{flex:1 1}#settingsModal .settings-tab-panel{height:100%;overflow-y:auto}.modal-header{padding:.55rem 1rem;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}.modal-title{font-size:1.1rem;font-weight:700;color:var(--text-main)}.modal-close{background:none;border:none;color:var(--text-sec);font-size:1.5rem;cursor:pointer;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:0 0 auto;transition:all .2s}.modal-close:hover{background:var(--border);color:var(--text-main)}#sentenceFilterModal .modal-header{padding:.3rem .5rem .3rem .9rem}#sentenceFilterModal .modal-title{font-size:1rem}#sentenceFilterModal .modal-close{font-size:1.25rem;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%}#savedBasketModal .modal-close:hover,#sentenceFilterModal .modal-close:hover{background:var(--border)}.filter-header-actions{display:flex;align-items:center;gap:.6rem;flex:0 0 auto}.filter-header-left{display:flex;align-items:center;gap:.7rem;min-width:0;flex:1 1 auto}.filter-header-left .modal-title{flex:0 0 auto}.filter-split-check{display:flex;align-items:center;gap:5px;font-size:.85rem;color:var(--text-sec);white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none}.filter-split-check input{cursor:pointer}.filter-header-left select{flex:0 1 auto;min-width:0;max-width:340px;padding:.4rem .6rem;border:1px solid var(--border);border-radius:6px;background:var(--bg-body);color:var(--text-main);font-size:.9rem;min-height:36px}.tree-search-row{display:flex;align-items:center;gap:.4rem;margin-bottom:.6rem;flex:0 0 auto}.tree-search-row .tree-search-wrap{flex:1 1 auto;min-width:0;margin-bottom:0}.tree-search-row .tree-expand-btn{width:40px;height:40px;border-radius:8px;font-size:.85rem}#savedBasketModal .modal-header{padding:.3rem .5rem .3rem .9rem}#savedBasketModal .modal-title{font-size:1rem;display:flex;align-items:center;gap:.45rem}#savedBasketModal .modal-close{font-size:1.25rem;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%}#sentenceFilterModal .filter-modal-body{padding:.6rem .9rem .9rem}#sentenceFilterModal .filter-tabs{border-bottom-width:1px}#sentenceFilterModal .filter-tabs .tab{padding:.4rem .9rem}.modal-body{padding:1.5rem;overflow-y:auto;overflow-x:hidden;gap:1rem}.form-group,.modal-body{display:flex;flex-direction:column}.form-group{gap:.3rem}.radio-group{display:flex;flex-direction:column;gap:.4rem}.radio-option{cursor:pointer;color:var(--text-main)}.radio-option,.repeat-count-field{display:flex;align-items:center;gap:.5rem}.repeat-count-field{flex-wrap:wrap}.repeat-count-field input[type=number]{width:3.2em;padding:.2rem .3rem;border:1px solid var(--border);border-radius:4px;background:var(--bg-card);color:var(--text-main);text-align:center}.repeat-count-field input[type=range]{flex:1 1 90px;min-width:80px;accent-color:var(--primary)}.eye-mode-sub{margin-left:1.6rem;font-size:.92rem}.repeat-display{font-weight:700;color:var(--primary)}.radio-option:has(input:checked){font-weight:600}.form-label{font-size:.9rem;font-weight:600;color:var(--text-main)}.form-input{padding:.6rem;border:1px solid var(--border);border-radius:4px;background:var(--bg-body);color:var(--text-main);font-size:.95rem}.form-input:focus{outline:none;border-color:var(--primary)}.modal-actions{display:flex;gap:.5rem;margin-top:1rem}.btn{padding:.6rem 1.2rem;border:none;border-radius:4px;cursor:pointer;font-size:.95rem;font-weight:600;transition:all .2s}.btn-primary{background:var(--primary);color:white}.btn-primary:hover{background:var(--primary-dark)}.btn-secondary{background:var(--border);color:var(--text-main)}.btn-secondary:hover{background:var(--text-sec)}.btn-danger{background:var(--error);color:white}.btn-danger:hover{background:#b91c1c}.dataset-list{display:flex;flex-direction:column;gap:.5rem}.dataset-item{padding:.7rem .8rem;background:var(--card-alt);border:1px solid var(--border);border-radius:8px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:all .2s}.dataset-item:hover{background:var(--border)}.dataset-item.active{background:var(--highlight-bg);border-color:var(--primary)}.dataset-name{font-weight:600;color:var(--text-main)}.dataset-meta{font-size:.8rem;color:var(--text-sec)}.tabs{align-items:center;justify-content:space-between;border-bottom:2px solid var(--border);margin-bottom:.6rem}.stab-group,.tabs{display:flex;gap:1rem;flex-wrap:wrap}.stab,.tab{padding:.45rem .9rem;cursor:pointer;border-bottom:3px solid transparent;color:var(--text-sec);font-weight:600}.stab.active,.tab.active{color:var(--primary);border-bottom-color:var(--primary)}.settings-tab-actions{display:flex}.settings-tab-action-group{display:flex;gap:.5rem;flex-wrap:wrap}.settings-tab-panel{display:flex;flex-direction:column;gap:1rem}.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem;align-items:stretch}.settings-card{border:1px solid var(--border);border-radius:8px;padding:.7rem .8rem;background:var(--card-alt);display:flex;flex-direction:column;gap:.5rem;min-width:0}.settings-card select{min-width:0;max-width:100%;text-overflow:ellipsis}.settings-card-check>span:first-child{flex-shrink:0}.settings-card-title{font-size:.72rem;font-weight:700;text-transform:uppercase;color:var(--text-sec)}.settings-card-check{display:flex;align-items:center;gap:.5rem;cursor:pointer;color:var(--text-main)}.settings-card-check-disabled{opacity:.45}.settings-row-inline{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap}@media (max-width:600px){.settings-grid{grid-template-columns:minmax(0,1fr)}#settingsModal .modal-content{width:100vw;height:100dvh;max-height:100dvh;margin-top:0;border-radius:0}#settingsModal .modal-body{padding:.75rem}#settingsModal .tabs{flex-wrap:wrap;row-gap:.4rem}}.import-section{display:flex;flex-direction:column;gap:1rem}.import-tabs{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;border-bottom:1px solid var(--border);margin-bottom:.2rem}.import-tab-group{display:flex;gap:1.6rem;flex-wrap:wrap}.import-tab{position:relative;padding:.6rem .1rem;background:none;border:none;color:var(--text-sec);font-size:.92rem;cursor:pointer}.import-tab:hover{color:var(--text-main)}.import-tab.active{color:var(--primary);font-weight:600}.import-tab.active:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--primary);border-radius:2px 2px 0 0}.import-dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.9rem;min-height:260px;padding:2rem 1.5rem;border:2px dashed var(--border);border-radius:10px;background:var(--bg-body);text-align:center;transition:border-color .15s,background .15s}.import-dropzone.dragover{border-color:var(--primary);background:var(--highlight-bg)}.import-dropzone-icon{font-size:3.6rem;color:var(--border)}.import-browse-btn{border-radius:999px;padding:.55rem 1.4rem}.import-dropzone-hint{color:var(--text-sec);font-size:.88rem}.import-dropzone-file,.import-dropzone-hint b{color:var(--text-main)}.import-dropzone-file{display:none;align-items:center;gap:.5rem;font-size:.88rem;background:var(--bg-card);border:1px solid var(--border);border-radius:6px;padding:.4rem .7rem}.import-dropzone-file.show{display:flex}.import-dropzone-file i{color:var(--success)}.mapping-row{display:flex;align-items:center;gap:.75rem;margin-bottom:.5rem}.mapping-label{flex:0 0 40%;font-size:.9rem;color:var(--text-main)}.mapping-select{flex:1 1;min-width:0}.mapping-preview-wrap{margin-top:.75rem;max-height:200px;overflow:auto;border:1px solid var(--border);border-radius:4px}.mapping-preview{border-collapse:collapse;font-size:.8rem;white-space:nowrap}.mapping-preview td,.mapping-preview th{border:1px solid var(--border);padding:.3rem .5rem;text-align:left}.mapping-preview th{background:var(--bg-body);color:var(--text-sec);position:sticky;top:0}#wordPracticeModal .modal-content{width:98vw;max-width:98vw;height:96vh;max-height:none}#wordPracticeModal .modal-body{flex:1 1;min-height:0;padding:.5rem 1rem 1rem}.wp-body{display:flex;flex-direction:column;gap:.5rem;flex:1 1;min-height:0}.wp-sample{position:relative;flex:0 0 auto;min-height:110px;max-height:130px;background:var(--bg-card);border:1px solid var(--border);border-radius:6px;display:flex;align-items:center;justify-content:center;padding:.5rem 1rem}.wp-display{width:100%;padding:4px 92px;font-family:inherit;font-size:1.8rem;font-weight:600;color:var(--vi-default-color);text-align:center;background:transparent;outline:none;border:none;border-bottom:1px dashed transparent;cursor:text}.wp-display:hover{border-bottom-color:var(--border)}.wp-display:focus{border-bottom-color:var(--primary)}.wp-input-wrapper{position:relative;flex:1 1;min-height:0;background:var(--input-bg);border:1px solid var(--border);border-radius:4px;overflow:hidden}#wpGhost,#wpInput{font-family:Roboto Mono,monospace;font-size:var(--typing-font-size,20px);line-height:1.6;padding:12px}.wp-ghost{pointer-events:none;z-index:1}#wpInput{position:absolute;top:0;left:0;width:100%;height:100%;box-sizing:border-box;z-index:2;background:transparent;color:transparent;caret-color:transparent;border:none;outline:none;resize:none}.wp-stats{display:flex;align-items:center;gap:1rem;font-size:.85rem;flex-wrap:wrap;flex:0 0 auto}.wp-hint,.wp-stats{color:var(--text-sec)}.wp-hint{font-size:.76rem}.wp-check{display:flex;align-items:center;gap:.35rem;-webkit-user-select:none;user-select:none;white-space:nowrap}.wp-check,.wp-check input{cursor:pointer}.audio-controls{display:flex;align-items:center;gap:6px}.audio-btn{width:36px;height:36px;font-size:.9rem;border-color:var(--primary);color:var(--primary)}.audio-btn:hover{background:var(--primary);color:#fff}#audioStopBtn{border-color:var(--error);color:var(--error)}#audioStopBtn:hover{background:var(--error);color:#fff}.practice-sel-btn{display:none;align-items:center;gap:.4rem;padding:.45rem .9rem;white-space:nowrap;border:1px solid var(--success);background:var(--success);color:#04220f;font-weight:700}.toast{position:fixed;bottom:1rem;right:1rem;padding:1rem;background:var(--primary);color:white;border-radius:4px;box-shadow:0 4px 12px rgba(0,0,0,.15);animation:slideIn .3s;z-index:999}@keyframes slideIn{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}