:root{--bg:#f5f3ee;--bg-2:#efece4;--panel:#ffffff;--ink:#14120e;--ink-2:#423f37;--ink-3:#6a6452;--ink-4:#8a8273;--rule:#dcd7c9;--rule-2:#e8e3d5;--accent:#8f5e15;--accent-2:#b37d24;--highlight:rgba(143,94,21,0.08);--serif:"Spectral","Noto Serif",Georgia,"Times New Roman",serif;--serif-vi:"Spectral",ui-serif,"Iowan Old Style","Charter","Palatino Linotype","Palatino",Georgia,serif;--serif-pali:"Noto Serif","Spectral","Gentium Plus",Georgia,"Times New Roman",serif;--mono:"Geist Mono",ui-monospace,Menlo,monospace;--sutra-font-scale:1;--sutra-line-height:1.75;--visible-cols:3;--transition:0.2s ease}[data-theme="dark"]{--bg:#0b0c0e;--bg-2:#0f1113;--panel:#14161a;--ink:#e8e6e0;--ink-2:#b5b0a4;--ink-3:#969080;--ink-4:#6a6458;--rule:#1f2126;--rule-2:#2a2c32;--accent:#d4a354;--accent-2:#eec07b;--highlight:rgba(212,163,84,0.10)}*{box-sizing:border-box}*,a,body,button,html,input,label{-webkit-tap-highlight-color:transparent}html,body{margin:0;padding:0;height:100vh;height:100dvh;overflow:hidden;overscroll-behavior:none;background:var(--bg);color:var(--ink);font-family:var(--serif);font-weight:400;font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;font-feature-settings:"liga","kern"}body::before{content:"";position:fixed;inset:0;background:radial-gradient(ellipse 1200px 600px at 50% 0%,color-mix(in oklab,var(--accent) 5%,transparent),transparent 70%);pointer-events:none;z-index:1}:lang(vi),[lang="vi"],.vie,#subtitle.vi,.vi-text{font-family:var(--serif-vi)}.app{height:100%;display:flex;justify-content:center;align-items:stretch;padding:0;position:relative;z-index:2}.card{width:100%;max-width:none;height:100%;display:flex;flex-direction:column;background:var(--bg);position:relative;overflow:hidden;overscroll-behavior:contain}.top-bar{flex:0 0 auto;position:relative;z-index:10;background:var(--bg);border-bottom:none}.top-bar::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:0.85;pointer-events:none;z-index:2}.bar-in{display:flex;justify-content:center;align-items:center;padding:10px 24px 8px;font-family:var(--mono);font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-3);position:relative}.top-bar-icon{position:absolute;right:14px;top:50%;transform:translateY(-50%);width:28px;height:28px;border:0;background:transparent;color:var(--ink-4);cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:50%;padding:0;transition:color .15s,background .15s}@media (hover:hover){.top-bar-icon:hover{color:var(--accent);background:color-mix(in oklab,var(--accent) 10%,transparent)}}.top-bar-icon:focus-visible{outline:2px solid var(--accent);outline-offset:2px}@media (max-width:720px){.top-bar-icon{right:8px;width:26px;height:26px}.top-bar-icon svg{width:14px;height:14px}}.bar-center{text-align:center;font-family:var(--serif);font-style:italic;font-weight:300;font-size:11.5px;letter-spacing:0.16em;text-transform:uppercase;color:var(--accent);position:relative;display:flex;align-items:center;justify-content:center;gap:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bar-center::before,.bar-center::after{content:"";display:block;width:26px;height:1px;background:color-mix(in oklab,var(--accent) 40%,transparent);flex-shrink:0}.ded-phrase-text{display:inline-block}.ded-clickable{cursor:pointer;user-select:none;-webkit-user-select:none;transition:color .15s,opacity .15s}@media (hover:hover){.ded-clickable:hover{color:var(--accent);opacity:1}}.bar-right{display:flex;justify-content:flex-end;gap:4px;min-width:0}.bar-icon-btn{background:none;border:0;padding:4px 7px;color:var(--ink-3);font:inherit;font-family:var(--mono);font-size:12.5px;letter-spacing:0.1em;cursor:pointer;border-radius:2px;display:inline-flex;align-items:center;justify-content:center;transition:color .15s,background .15s;min-width:28px;height:28px}@media (hover:hover){.bar-icon-btn:hover{color:var(--ink);background:color-mix(in oklab,var(--ink) 6%,transparent)}}.bar-icon-btn svg{width:15px;height:15px;display:block}#btnDarkMode .icon-sun{display:none}#btnDarkMode .icon-moon{display:block}[data-theme="dark"] #btnDarkMode .icon-moon{display:none}[data-theme="dark"] #btnDarkMode .icon-sun{display:block}.lang-code{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:0.1em;color:currentColor;line-height:1;padding:0 2px}.header{flex:0 0 auto;padding:10px 32px 14px;text-align:center;border-bottom:1px solid var(--rule)}#supertitle{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:0.18em;text-transform:uppercase;color:var(--accent);margin-bottom:8px;min-height:12px;line-height:1.3}#supertitle:empty{display:none}#title{margin:0;font-family:var(--serif-vi);font-weight:400;font-style:normal;font-size:24px;letter-spacing:0;line-height:1.2;color:var(--ink);text-transform:none;white-space:normal;overflow:visible;text-overflow:unset}#subtitle{display:none !important}#titleMeta{margin-top:10px;font-family:var(--serif-vi);font-style:italic;font-size:12.5px;color:var(--ink-3);letter-spacing:0;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}#titleMeta:empty{display:none}#titleMeta .sep{color:var(--ink-4);font-style:normal;font-size:11px}#titleMeta b{color:var(--ink-2);font-style:normal;font-weight:400}#readerArea{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;background:var(--bg);scroll-behavior:auto;overflow-anchor:none;display:flex;flex-direction:column;overscroll-behavior:contain}#readerArea::-webkit-scrollbar{width:8px}#readerArea::-webkit-scrollbar-track{background:transparent}#readerArea::-webkit-scrollbar-thumb{background:color-mix(in oklab,var(--ink-4) 50%,transparent);border-radius:999px}#readerArea::-webkit-scrollbar-thumb:hover{background:var(--accent)}#sutraGrid{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;scroll-behavior:smooth;overflow-anchor:none;padding:24px 32px 48px;display:flex;flex-direction:column;gap:36px;background:var(--bg);overscroll-behavior:contain}#sutraGrid::-webkit-scrollbar{width:8px}#sutraGrid::-webkit-scrollbar-track{background:transparent}#sutraGrid::-webkit-scrollbar-thumb{background:color-mix(in oklab,var(--ink-4) 50%,transparent);border-radius:999px}#sutraGrid::-webkit-scrollbar-thumb:hover{background:var(--accent)}.row-chunk{display:flex;flex-direction:column;gap:36px}.sutra-row-wrap.is-section-num .sutra-row{grid-template-columns:1fr !important;grid-template-areas:none !important;text-align:center;padding:10px 0 16px;border-bottom:1px solid var(--rule-2);margin:0 0 6px}.sutra-row-wrap.is-section-num .sutra-col{grid-area:auto !important;grid-column:1 / -1 !important;align-items:center}.sutra-row-wrap.is-section-num .sutra-col-header,.sutra-row-wrap.is-section-num .sutra-seg-key{display:none}.sutra-row-wrap.is-section-num .eng-col,.sutra-row-wrap.is-section-num .vie-col{display:none}.sutra-row-wrap.is-section-num .pali{font-family:var(--serif);font-style:normal;font-weight:400;font-size:calc(28px * var(--sutra-font-scale));color:var(--accent);letter-spacing:0.04em}.sutra-row-wrap.is-source{margin-top:40px;border-top:1px dashed var(--rule-2);padding-top:20px;opacity:0.55}.sutra-row-wrap.is-source .sutra-col-header,.sutra-row-wrap.is-source .sutra-seg-key{opacity:0.6}.sutra-row-wrap.is-source .pali,.sutra-row-wrap.is-source .eng,.sutra-row-wrap.is-source .vie{font-size:calc(12px * var(--sutra-font-scale));font-style:italic;font-weight:400;word-break:break-all}.sutra-row-wrap{display:flex;flex-direction:column;position:relative;max-width:1040px;width:100%;margin:0 auto;padding-left:20px}.sutra-row-wrap::before{content:"";position:absolute;left:0;top:4px;bottom:0;width:1px;background:var(--rule-2);opacity:0.7;transition:background .2s,opacity .2s}@media (hover:hover){.sutra-row-wrap:hover::before{background:color-mix(in oklab,var(--accent) 50%,var(--rule-2))}}.sutra-row-wrap.is-subtitle{margin-top:0;padding-top:0;padding-left:0}.sutra-row-wrap.is-subtitle[data-key$=":0.1"]{margin-top:18px;padding-top:22px;border-top:1px solid var(--rule-2)}.sutra-row-wrap.is-subtitle[data-key$=":0.1"]:first-of-type{margin-top:0;padding-top:4px;border-top:none}.sutra-row-wrap.is-subtitle::before{display:none}.sutra-row-wrap.is-subtitle .sutra-seg-key{display:none}.sutra-row-wrap.is-subtitle[data-key$=":0.1"] + .sutra-row-wrap.is-subtitle[data-key$=":0.2"]{margin-top:-28px}.sutra-row-wrap.is-subtitle[data-key$=":0.3"]{margin-top:14px}.sutra-row-wrap.is-subtitle .sutra-row{grid-template-columns:1fr !important;grid-template-areas:none !important;row-gap:2px;text-align:center}.sutra-row-wrap.is-subtitle .sutra-col{grid-area:auto !important;align-items:center}.sutra-row-wrap.is-subtitle .sutra-col-header{display:none}.sutra-row-wrap.is-subtitle .pali{font-family:var(--serif-pali);font-style:italic;font-weight:400;font-size:calc(18px * var(--sutra-font-scale));color:var(--ink);line-height:1.3;text-align:center}.sutra-row-wrap.is-subtitle .eng,.sutra-row-wrap.is-subtitle .vie{font-family:var(--serif);font-style:italic;font-size:calc(16px * var(--sutra-font-scale));color:var(--ink-3);text-align:center;line-height:1.35}.sutra-row-wrap.is-subtitle .vie{font-family:var(--serif-vi)}.sutra-seg-key{font-family:var(--mono);font-size:10.5px;letter-spacing:0.08em;color:var(--ink-3);padding:0 0 10px 0;user-select:none;text-transform:uppercase}.sutra-row{display:grid;grid-template-columns:repeat(var(--visible-cols),1fr);gap:32px;min-width:0;background:transparent;border:none;border-radius:0;overflow:visible;box-shadow:none;transition:background .2s,box-shadow .2s;padding:0;align-items:start}.sutra-row:hover{}.sutra-row.reading{background:var(--highlight);box-shadow:-20px 0 0 var(--highlight),20px 0 0 var(--highlight)}.sutra-row.reading ~ .sutra-row.reading{}.sutra-col{min-width:0;word-break:break-word;overflow-wrap:break-word;display:flex;flex-direction:column;border:none;background:transparent}.sutra-col-header{font-family:var(--mono);font-size:9.5px;font-weight:400;letter-spacing:0.22em;color:var(--ink-4);padding:0 0 6px 0;background:transparent;user-select:none;flex-shrink:0;text-transform:uppercase;border-bottom:1px solid var(--rule-2);margin-bottom:10px;align-self:flex-start}.sutra-col-body{padding:0;flex:1}.pali{font-family:var(--serif-pali);font-style:italic;font-size:calc(16px * var(--sutra-font-scale));font-weight:400;color:var(--ink);line-height:var(--sutra-line-height);letter-spacing:0.003em;font-feature-settings:"liga","kern"}.eng,.vie{font-family:var(--serif);font-weight:400;font-size:calc(16px * var(--sutra-font-scale));line-height:var(--sutra-line-height);color:var(--ink-2)}.vie{font-family:var(--serif-vi)}.card:not(.stack) #sutraGrid:not(.hide-pali):not(.hide-eng):not(.hide-vie) .sutra-row{grid-template-columns:1fr 1fr;grid-template-areas:"pali pali" "eng vie";column-gap:40px;row-gap:22px}
/* 3 cột ngang — Pāli / Eng / Việt cùng 1 hàng. Áp dụng tablet/iPad trở lên (≥768px). Mobile < 768px vẫn auto-stack */
@media (min-width:768px){
.card.grid-3cols:not(.stack) #sutraGrid:not(.hide-pali):not(.hide-eng):not(.hide-vie) .sutra-row{grid-template-columns:1fr 1fr 1fr !important;grid-template-areas:"pali eng vie" !important;column-gap:24px;row-gap:0}
.card.grid-3cols:not(.stack) #sutraGrid:not(.hide-pali):not(.hide-eng):not(.hide-vie) .pali-col{grid-area:pali !important}
.card.grid-3cols:not(.stack) #sutraGrid:not(.hide-pali):not(.hide-eng):not(.hide-vie) .eng-col{grid-area:eng !important}
.card.grid-3cols:not(.stack) #sutraGrid:not(.hide-pali):not(.hide-eng):not(.hide-vie) .vie-col{grid-area:vie !important}
.card.grid-3cols:not(.stack) #sutraGrid:not(.hide-pali):not(.hide-eng):not(.hide-vie) .pali-col .pali{font-size:calc(15.5px * var(--sutra-font-scale));line-height:var(--sutra-line-height)}
}
/* Tablet (768-1024px): column gap nhỏ hơn để fit 3 cột */
@media (min-width:768px) and (max-width:1024px){
.card.grid-3cols:not(.stack) #sutraGrid:not(.hide-pali):not(.hide-eng):not(.hide-vie) .sutra-row{column-gap:16px}
.card.grid-3cols:not(.stack) #sutraGrid:not(.hide-pali):not(.hide-eng):not(.hide-vie) .pali,
.card.grid-3cols:not(.stack) #sutraGrid:not(.hide-pali):not(.hide-eng):not(.hide-vie) .eng,
.card.grid-3cols:not(.stack) #sutraGrid:not(.hide-pali):not(.hide-eng):not(.hide-vie) .vie{font-size:calc(14px * var(--sutra-font-scale))}
}.card:not(.stack) #sutraGrid:not(.hide-pali):not(.hide-eng):not(.hide-vie) .pali-col{grid-area:pali}.card:not(.stack) #sutraGrid:not(.hide-pali):not(.hide-eng):not(.hide-vie) .eng-col{grid-area:eng}.card:not(.stack) #sutraGrid:not(.hide-pali):not(.hide-eng):not(.hide-vie) .vie-col{grid-area:vie}.card:not(.stack) #sutraGrid:not(.hide-pali):not(.hide-eng):not(.hide-vie) .pali-col .pali{font-size:calc(17px * var(--sutra-font-scale));line-height:calc(var(--sutra-line-height) * 0.95)}.hide-pali .pali-col,.hide-eng .eng-col,.hide-vie .vie-col{display:none}#sutraGrid.hide-seg-key .sutra-seg-key{display:none}#sutraGrid.hide-seg-key .sutra-row-wrap{padding-left:0}#sutraGrid.hide-seg-key .sutra-row-wrap::before{display:none}#sutraGrid.hide-col-header .sutra-col-header{display:none}#sutraGrid.hide-eng.hide-vie .sutra-row,#sutraGrid.hide-pali.hide-eng .sutra-row,#sutraGrid.hide-pali.hide-vie .sutra-row{grid-template-columns:1fr !important;grid-template-areas:none !important}/* Auto-hide seg-key + col-header in single-lang mode REMOVED — user controls via btnSegKey / btnSegHdr */#sutraGrid.hide-eng.hide-vie,#sutraGrid.hide-pali.hide-eng,#sutraGrid.hide-pali.hide-vie{gap:8px}#sutraGrid.hide-eng.hide-vie .sutra-row-wrap,#sutraGrid.hide-pali.hide-eng .sutra-row-wrap,#sutraGrid.hide-pali.hide-vie .sutra-row-wrap{padding-left:0}#sutraGrid.hide-eng.hide-vie .sutra-row-wrap::before,#sutraGrid.hide-pali.hide-eng .sutra-row-wrap::before,#sutraGrid.hide-pali.hide-vie .sutra-row-wrap::before{display:none}#sutraGrid.hide-eng.hide-vie .sutra-row-wrap:not(.is-subtitle):not(.is-section-num):not(.is-source) .pali,#sutraGrid.hide-pali.hide-eng .sutra-row-wrap:not(.is-subtitle):not(.is-section-num):not(.is-source) .vie,#sutraGrid.hide-pali.hide-vie .sutra-row-wrap:not(.is-subtitle):not(.is-section-num):not(.is-source) .eng{line-height:calc(var(--sutra-line-height) + 0.08);text-align:justify;text-justify:inter-word;hyphens:auto;-webkit-hyphens:auto;text-indent:2em}.card.stack .sutra-row-wrap:not(.is-subtitle):not(.is-section-num):not(.is-source) .pali,.card.stack .sutra-row-wrap:not(.is-subtitle):not(.is-section-num):not(.is-source) .eng,.card.stack .sutra-row-wrap:not(.is-subtitle):not(.is-section-num):not(.is-source) .vie{text-align:justify;text-justify:inter-word}.card.stack .sutra-row{grid-template-columns:1fr !important;grid-template-areas:none !important;row-gap:16px;column-gap:0}.card.stack .sutra-col,.card.stack .pali-col,.card.stack .eng-col,.card.stack .vie-col{grid-area:auto !important;grid-column:1 / -1 !important;grid-row:auto !important;border-bottom:none}.card.stack .sutra-col-header{margin-bottom:6px}.card.stack .pali{font-size:calc(16px * var(--sutra-font-scale))}html.hide-seg-key .sutra-seg-key{display:none !important}html.hide-seg-hdr .sutra-col-header{display:none !important}html.hide-seg-hdr .pali,html.hide-seg-hdr .eng,html.hide-seg-hdr .vie{margin-top:0}html.is-welcome .header{display:none}html.is-welcome #sutraGrid{padding-top:4px;padding-bottom:8px;gap:0}.welcome-screen{width:100%;max-width:720px;margin:0 auto;padding:0 24px 12px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}.welcome-mandala{width:120px;height:120px;color:var(--accent);opacity:.85;flex-shrink:0;display:block;margin-bottom:0}.welcome-mandala svg{width:100%;height:100%;display:block}.welcome-mandala .welcome-ring{transform-origin:center;animation:welcome-spin 60s linear infinite}.welcome-mandala .welcome-ring.r2{animation:welcome-spin 90s linear infinite reverse}.welcome-mandala .welcome-core{transform-origin:center;animation:welcome-breathe 6s ease-in-out infinite}.welcome-hero-title{font-family:var(--serif-vi);font-weight:400;font-style:normal;font-size:clamp(44px,7vw,76px);line-height:1.05;letter-spacing:-0.005em;margin:0;color:var(--ink);text-transform:none}.welcome-hero-title[data-action]{cursor:pointer;transition:color .2s ease,transform .25s ease;user-select:none;-webkit-user-select:none}@media (hover:hover){.welcome-hero-title[data-action]:hover{color:var(--accent)}.welcome-hero-title[data-action]:hover em{color:var(--ink)}}.welcome-hero-title[data-action]:active{transform:scale(0.99)}.welcome-hero-title[data-action]:focus-visible{outline:2px solid var(--accent);outline-offset:6px;border-radius:6px}.welcome-hero-title em{font-family:var(--serif-vi);font-style:italic;color:var(--accent);font-weight:400;transition:color .2s ease}.welcome-hero-sub{font-family:var(--serif-vi);font-style:italic;font-size:16px;line-height:1.6;color:var(--ink-2);max-width:560px;margin:0}.welcome-hero-langs{display:inline-flex;align-items:center;gap:14px;font-family:var(--mono);font-size:11px;letter-spacing:0.32em;text-transform:uppercase;color:var(--ink-3);margin:6px 0 4px}.welcome-lang-btn{background:none;border:0;cursor:pointer;font:inherit;color:var(--ink-3);letter-spacing:inherit;text-transform:inherit;padding:6px 12px;position:relative;transition:color .2s ease}@media (hover:hover){.welcome-lang-btn:hover{color:var(--ink)}}.welcome-lang-btn.active{color:var(--accent);font-weight:500}.welcome-lang-btn.active::after{content:"";position:absolute;left:50%;bottom:0;width:18px;height:1px;background:var(--accent);transform:translateX(-50%)}.welcome-lang-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}.welcome-hero-langs .dot{width:3px;height:3px;border-radius:50%;background:var(--ink-4);opacity:0.6;flex-shrink:0}.welcome-verses{display:flex;flex-direction:column;width:100%;max-width:640px;margin:0}.welcome-verse{padding:12px 8px;position:relative}.welcome-verse + .welcome-verse{border-top:1px solid var(--rule-2)}.welcome-verse + .welcome-verse::before{content:"❦";position:absolute;top:-10px;left:50%;transform:translateX(-50%);background:var(--bg);padding:0 14px;color:var(--accent);font-size:14px;line-height:1}.welcome-verse-pali{font-family:var(--serif-pali);font-style:italic;font-weight:400;font-size:18px;line-height:1.35;color:var(--accent);margin:0 0 8px;letter-spacing:0.005em}.welcome-verse-tr{font-family:var(--serif-vi);font-size:16px;line-height:1.45;color:var(--ink);max-width:560px;margin:0 auto 8px}.welcome-verse-source{font-family:var(--mono);font-size:10.5px;letter-spacing:0.2em;text-transform:uppercase;color:var(--ink-3);line-height:1.7;margin:0}.welcome-helper{width:100%;max-width:640px;border:1px solid var(--rule);background:var(--panel);border-radius:6px;padding:4px 16px;box-shadow:0 1px 4px color-mix(in oklab,var(--ink) 4%,transparent)}.welcome-help-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:16px;width:100%;padding:10px 8px;background:transparent;border:0;font-family:var(--serif);font-size:15px;color:var(--ink-2);text-align:left;cursor:pointer;transition:color .15s,background .15s,padding-left .2s}.welcome-help-row + .welcome-help-row{border-top:1px dashed var(--rule-2)}@media (hover:hover){.welcome-help-row:hover{color:var(--ink);padding-left:14px}}@media (hover:hover){.welcome-help-row:hover .welcome-help-key{color:var(--accent);background:color-mix(in oklab,var(--accent) 8%,transparent)}}.welcome-help-row em{font-style:italic;color:var(--accent);font-weight:500;font-family:inherit}.welcome-help-row:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.welcome-help-key{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:4px;color:var(--ink-3);transition:color .15s,background .15s,transform .08s;flex-shrink:0}.welcome-help-key svg{width:16px;height:16px;display:block}.welcome-help-row:active .welcome-help-key{transform:scale(0.94)}@keyframes welcome-spin{to{transform:rotate(360deg)}}@keyframes welcome-breathe{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.06);opacity:.85}}@media (max-width:500px){.welcome-screen{gap:10px;padding:0 16px 20px}.welcome-mandala{width:88px;height:88px;margin-bottom:4px}.welcome-hero-title{font-size:clamp(36px,11vw,52px)}.welcome-hero-sub{font-size:14px}.welcome-hero-langs{gap:10px;font-size:10px;letter-spacing:0.24em}.welcome-verse{padding:14px 4px}.welcome-verse-pali{font-size:16px}.welcome-verse-tr{font-size:14.5px}.welcome-verse-source{font-size:10px}.welcome-helper{padding:4px 10px}.welcome-help-row{font-size:13.5px;padding:10px 4px;gap:10px}.welcome-help-row:hover{padding-left:6px}.welcome-help-key{width:28px;height:28px}.welcome-help-key svg{width:14px;height:14px}}@media (prefers-reduced-motion:reduce){.welcome-mandala .welcome-ring,.welcome-mandala .welcome-core{animation:none !important}}.welcome-ornament{width:88px;height:88px;color:var(--accent);opacity:0.75;flex-shrink:0;display:block;margin-top:8px}.welcome-quotes{width:100%;max-width:620px;display:flex;flex-direction:column;align-items:center;padding:8px 16px;text-align:center}.welcome-quote{width:100%;display:flex;flex-direction:column;gap:5px;padding:8px 8px}.welcome-quote .wq-pali{font-family:var(--serif-pali);font-style:italic;font-weight:400;font-size:15.5px;color:var(--accent);line-height:1.4;letter-spacing:0.008em}.welcome-quote .wq-tr{font-family:var(--serif);font-size:14.5px;color:var(--ink-2);line-height:1.5;font-style:normal}.welcome-quote .wq-note{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);letter-spacing:0.1em;text-transform:uppercase;margin-top:3px;opacity:0.9}.welcome-quotes .wq-sep{font-family:var(--serif);font-size:16px;color:var(--accent);opacity:0.35;line-height:1;padding:0;user-select:none}@media (max-width:500px){.welcome-quotes{padding:6px 8px}.welcome-quote{padding:8px 4px;gap:4px}.welcome-quote .wq-pali{font-size:14.5px}.welcome-quote .wq-tr{font-size:13.5px}.welcome-quote .wq-note{font-size:10px}}.welcome-ornament .wheel-rim,.welcome-ornament .wheel-hub,.welcome-ornament .wheel-spoke{fill:none;stroke:currentColor;stroke-linecap:round}.welcome-ornament .wheel-hub{fill:currentColor;stroke:none}.welcome-box{max-width:560px;width:100%;padding:12px 20px;font-family:var(--serif);font-size:13.5px;line-height:1.55;color:var(--ink-2);border:1px solid var(--rule);border-radius:4px;background:var(--panel);text-align:center;position:relative;box-shadow:0 1px 4px color-mix(in oklab,var(--ink) 4%,transparent)}.welcome-box strong{font-family:var(--serif);font-weight:500;font-style:italic;color:var(--ink);font-size:inherit;display:inline;margin:0}.welcome-box .hint-line{padding:2px 0}.welcome-box .hint-line + .hint-line{border-top:1px dashed var(--rule-2)}.welcome-box .kbd-hint{margin-top:14px;padding-top:12px;border-top:1px solid var(--rule-2);font-family:var(--mono);font-size:11px;letter-spacing:0.06em;color:var(--ink-3);line-height:1.8}.welcome-box .kbd-hint kbd{font-family:var(--mono);font-size:10.5px;padding:1px 6px;border:1px solid var(--rule);border-radius:3px;background:var(--bg-2);color:var(--ink-2);margin:0 2px}.rec-title{font-family:var(--mono);font-size:10.5px;letter-spacing:0.22em;text-transform:uppercase;color:var(--accent);align-self:flex-start;margin-left:4px}.rec-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px;width:100%;max-width:600px}.rec-card{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;padding:12px 16px;background:var(--panel);border:1px solid var(--rule);border-radius:4px;color:var(--ink);cursor:pointer;font-family:var(--serif);text-align:left;transition:all .15s}@media (hover:hover){.rec-card:hover{border-color:var(--accent);background:color-mix(in oklab,var(--accent) 5%,var(--panel));transform:translateY(-1px)}}.rec-card .rec-code{font-family:var(--mono);font-size:10px;letter-spacing:0.14em;color:var(--accent);white-space:nowrap}.rec-card .rec-name{display:flex;flex-direction:column;gap:1px;min-width:0}.rec-card .rec-name-main{font-style:italic;font-size:14.5px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rec-card .rec-name-sub{font-size:12px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.epigraph{flex:0 0 auto;background:color-mix(in oklab,var(--bg) 96%,transparent);border-bottom:1px solid var(--rule-2);padding:4px 16px 5px;text-align:center;position:relative;z-index:6;line-height:1.3;color:var(--ink-3)}.epigraph-inner{display:inline-flex;align-items:baseline;gap:8px;max-width:100%;flex-wrap:nowrap;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;justify-content:center;transition:opacity .45s ease;will-change:opacity}.ep-pali{font-family:var(--serif-pali);font-style:italic;font-weight:400;font-size:11.5px;color:inherit;flex-shrink:0}.ep-sep{color:inherit;font-size:11px;opacity:0.5;flex-shrink:0}.ep-tr{font-family:var(--serif);font-style:italic;font-size:11.5px;color:inherit;overflow:hidden;text-overflow:ellipsis;min-width:0}.ep-cite{font-family:var(--mono);font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--accent);padding:0;flex-shrink:0;font-weight:500}.sutra-row-wrap.current::before{background:var(--accent) !important;opacity:1 !important;width:2px}.sutra-row-wrap.current .sutra-seg-key{color:var(--accent);opacity:1}.status{flex:0 0 auto;position:relative;z-index:9;background:var(--bg);border-top:1px solid var(--rule);padding-bottom:max(env(safe-area-inset-bottom,0px),6px)}.status-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:2px 16px;gap:12px}.status-left,.status-right{display:flex;gap:4px;align-items:center}.status-left{justify-self:start}.status-right{justify-self:end}.status-center{display:flex;align-items:center;justify-content:center;gap:4px;height:44px;min-width:0}.status-title{display:flex;align-items:center;padding:0 18px;font-family:var(--serif);font-style:italic;color:var(--ink-2);font-size:15px;letter-spacing:0.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-left:1px solid var(--rule);border-right:1px solid var(--rule);max-width:50vw;cursor:pointer;transition:color .15s,background .15s}@media (hover:hover){.status-title:hover{color:var(--ink);background:color-mix(in oklab,var(--accent) 6%,transparent)}}.bar-pill{background:none;border:0;padding:0 12px;color:var(--ink-3);font-family:var(--mono);font-size:11.5px;letter-spacing:0.14em;text-transform:uppercase;cursor:pointer;border-radius:4px;display:inline-flex;align-items:center;gap:8px;height:44px;min-width:44px;justify-content:center;transition:color .15s,background .15s,transform .08s}.bar-pill svg{width:14px;height:14px;color:var(--ink-3);opacity:0.9;flex-shrink:0;transition:color .15s}@media (hover:hover){.bar-pill:hover{color:var(--ink);background:color-mix(in oklab,var(--ink) 4%,transparent)}.bar-pill:hover svg{color:var(--accent);opacity:1}}.bar-pill:active{transform:scale(0.96);background:color-mix(in oklab,var(--accent) 14%,transparent)}.bar-pill.is-open,.bar-pill.active{color:var(--ink);background:color-mix(in oklab,var(--accent) 10%,transparent)}.bar-pill.is-open svg,.bar-pill.active svg{color:var(--accent);opacity:1}.bar-pill .sidebar-arrow{display:none}.nav-pill{display:inline-flex;align-items:center;justify-content:center;gap:7px;background:none;border:0;color:var(--ink-3);font-family:var(--mono);font-size:11.5px;letter-spacing:0.14em;text-transform:uppercase;cursor:pointer;padding:0 14px;border-radius:4px;height:44px;min-width:44px;transition:color .15s,background .15s,transform .08s}.nav-pill:disabled{opacity:0.25;cursor:default}@media (hover:hover){.nav-pill:not(:disabled):hover{color:var(--ink);background:color-mix(in oklab,var(--ink) 4%,transparent)}.nav-pill:not(:disabled):hover svg{color:var(--accent)}#btnPrev:not(:disabled):hover svg{transform:translateX(-2px)}#btnNext:not(:disabled):hover svg{transform:translateX(2px)}}.nav-pill:not(:disabled):active{transform:scale(0.94);background:color-mix(in oklab,var(--accent) 14%,transparent)}.nav-pill svg{width:13px;height:13px;color:var(--ink-3);transition:color .15s,transform .2s}#btnBackTop{position:absolute;right:14px;bottom:calc(env(safe-area-inset-bottom,0px) + 64px);width:36px;height:36px;border-radius:50%;background:var(--panel);border:1px solid color-mix(in oklab,var(--ink-3) 30%,transparent);color:var(--ink-3);cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transform:translateY(6px) scale(.94);pointer-events:none;transition:opacity .22s,transform .22s,border-color .15s,color .15s,background .15s;z-index:15;box-shadow:0 2px 10px color-mix(in oklab,var(--ink) 6%,transparent)}#btnBackTop svg{width:14px;height:14px}#btnBackTop.visible{opacity:0.92;transform:translateY(0) scale(1);pointer-events:auto}@media (hover:hover){#btnBackTop:hover{opacity:1;color:var(--accent);border-color:var(--accent)}}#btnBackTop:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.modal-scrim{position:fixed;inset:0;background:color-mix(in oklab,var(--bg) 70%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:55;opacity:0;pointer-events:none;transition:opacity .2s}body:has(#sutraMenuPanel.open) .modal-scrim{opacity:1;pointer-events:auto}.debug-panel{position:fixed;right:12px;bottom:60px;width:260px;max-width:calc(100vw - 24px);max-height:60vh;background:rgba(18,18,20,0.95);color:#d0e6d0;border:1px solid color-mix(in oklab,var(--accent) 40%,transparent);border-radius:6px;z-index:70;font-family:var(--mono);font-size:11px;line-height:1.45;padding:0;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 8px 24px rgba(0,0,0,0.4)}.debug-panel[hidden]{display:none}.debug-head{display:flex;align-items:center;justify-content:space-between;padding:6px 10px;border-bottom:1px solid color-mix(in oklab,var(--accent) 30%,transparent);color:var(--accent);font-weight:500;letter-spacing:0.12em}.debug-close{background:none;border:0;color:inherit;font-size:18px;line-height:1;cursor:pointer;padding:0 4px}#debugBody{margin:0;padding:8px 10px;overflow-y:auto;white-space:pre-wrap;word-break:break-word;font-family:var(--mono);font-size:11px}.debug-actions{padding:8px 10px;border-top:1px solid color-mix(in oklab,var(--accent) 30%,transparent);display:flex;gap:6px;flex-wrap:wrap}.debug-action-btn{flex:1;background:rgba(244,67,54,0.15);color:#ff7970;border:1px solid rgba(244,67,54,0.4);padding:6px 10px;font-family:var(--mono);font-size:10.5px;letter-spacing:0.08em;border-radius:4px;cursor:pointer;transition:background .15s,color .15s}@media (hover:hover){.debug-action-btn:hover{background:rgba(244,67,54,0.3);color:#ffb4ae}}.bar-pill.debug-only{color:var(--accent)}.status-library-btn{background:transparent !important;border:0 !important;color:var(--ink-2) !important;padding:0 14px !important;font-family:var(--mono) !important;font-style:normal !important;font-weight:500 !important;font-size:11px !important;letter-spacing:0.16em !important;text-transform:uppercase !important;gap:9px !important;transition:color .15s,background .15s !important}@media (hover:hover){.status-library-btn:hover{color:var(--accent) !important;background:color-mix(in oklab,var(--accent) 8%,transparent) !important}.status-library-btn:hover svg{color:var(--accent) !important}}.status-library-btn svg{color:var(--ink-4) !important;width:13px !important;height:13px !important;transition:color .15s !important}.status-library-btn.is-open,.status-library-btn.active{color:var(--accent) !important;background:color-mix(in oklab,var(--accent) 12%,transparent) !important}.status-library-btn.is-open svg,.status-library-btn.active svg{color:var(--accent) !important}.status-library-btn .sidebar-label{display:inline !important;font-family:inherit !important;font-size:inherit !important;letter-spacing:inherit !important}.status-library-btn:active{transform:none !important}.panel{position:fixed;background:var(--panel);border:1px solid var(--rule);border-radius:6px;box-shadow:0 24px 60px color-mix(in oklab,var(--ink) 30%,transparent);z-index:60;opacity:0;pointer-events:none;transition:opacity .22s ease,transform .25s cubic-bezier(.4,.0,.2,1);font-family:var(--serif)}.panel.open{will-change:transform,opacity}[data-theme="dark"] .panel{box-shadow:0 24px 60px rgba(0,0,0,0.55)}#sutraMenuPanel{top:50% !important;left:50% !important;right:auto !important;bottom:auto !important;transform:translate(-50%,-48%) scale(0.98) !important;width:min(720px,calc(100vw - 40px));max-width:none;max-height:80vh;min-width:0;display:flex;flex-direction:column;padding:0;overflow:hidden;border-radius:6px}#sutraMenuPanel.open{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1) !important}#sutraMenuPanel .lib-topbar{display:flex;align-items:stretch;gap:10px;padding:16px 18px 12px;border-bottom:1px solid var(--rule);flex:0 0 auto;background:var(--panel)}#sutraMenuPanel .search-box{flex:1 1 auto;min-width:0;padding:0;border:0;background:transparent}.menu-close{flex:0 0 auto;width:44px;height:44px;border:1px solid var(--rule);background:var(--bg-2);color:var(--ink-3);cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:background .15s,color .15s,border-color .15s;padding:0}.menu-close svg{width:20px;height:20px}@media (hover:hover){.menu-close:hover{background:var(--accent);color:var(--bg);border-color:var(--accent)}}.menu-close:focus-visible{outline:2px solid var(--accent);outline-offset:2px}#sutraSearch{width:100%;padding:10px 12px;font-family:var(--serif);font-size:16px;border-radius:3px;border:1px solid var(--rule);background:var(--bg-2);color:var(--ink);outline:0;transition:border-color .15s,box-shadow .15s}#sutraSearch:focus{border-color:var(--accent);background:var(--panel);box-shadow:0 0 0 2px color-mix(in oklab,var(--accent) 15%,transparent)}#sutraSearch::placeholder{color:var(--ink-4);font-style:italic}#sutraSearchResults{padding:0 22px;max-height:220px;overflow-y:auto;flex:0 0 auto}#sutraSearchResults:empty{display:none}.nikaya-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:14px 18px 14px;border-bottom:1px solid var(--rule);flex:0 0 auto}.nikaya-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:14px 6px;border:1px solid var(--rule);border-radius:6px;background:var(--bg-2);color:var(--ink-2);cursor:pointer;font-family:var(--serif);transition:background .15s,color .15s,border-color .15s,transform .08s;user-select:none;min-height:64px}@media (hover:hover){.nikaya-tile:hover{background:color-mix(in oklab,var(--accent) 8%,var(--bg-2));border-color:color-mix(in oklab,var(--accent) 35%,var(--rule));color:var(--ink)}}.nikaya-tile:active{transform:scale(0.97)}.nikaya-tile.active{background:var(--accent);color:var(--bg);border-color:var(--accent)}.nikaya-tile .tile-code{font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:0.14em;color:var(--accent)}.nikaya-tile.active .tile-code{color:var(--bg)}.nikaya-tile .tile-label{font-size:11px;font-style:italic;letter-spacing:0.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.nikaya-tile:focus-visible{outline:2px solid var(--accent);outline-offset:2px}@media (max-width:500px){.nikaya-tiles{gap:6px;padding:10px 12px}.nikaya-tile{padding:10px 4px;min-height:54px}.nikaya-tile .tile-code{font-size:12px}.nikaya-tile .tile-label{font-size:10px}}.search-result-item{width:100%;text-align:left;background:none;border:0;padding:9px 4px;display:flex;flex-direction:column;gap:2px;color:var(--ink);font-family:var(--serif);border-bottom:1px solid var(--rule-2);cursor:pointer;transition:background .12s}@media (hover:hover){.search-result-item:hover{background:var(--highlight)}}.search-result-item .search-main,.search-result-item .sr-main{font-size:16px;font-weight:500;color:var(--ink)}.search-result-item .search-sub,.search-result-item .sr-sub{font-size:14px;color:var(--ink-3);font-style:italic}.search-result-item mark{background:color-mix(in oklab,var(--accent) 18%,transparent);color:var(--ink);padding:0 2px;border-radius:2px}.search-result-empty{padding:10px 4px;font-family:var(--serif);font-size:13px;font-style:italic;color:var(--ink-4)}#sutraMenuList{list-style:none;margin:0;padding:0 0 12px;flex:1 1 auto;min-height:0;overflow-y:auto;border-top:1px solid var(--rule-2)}#sutraMenuList::-webkit-scrollbar{width:6px}#sutraMenuList::-webkit-scrollbar-track{background:transparent}#sutraMenuList::-webkit-scrollbar-thumb{background:color-mix(in oklab,var(--ink-4) 40%,transparent);border-radius:999px}.menu-block{padding:0;border-bottom:1px solid var(--rule-2)}.menu-block:last-child{border-bottom:none}.menu-block > .menu-toggle:not(.nested){background-color:var(--panel);border:0;border-bottom:1px solid var(--rule-2);width:100%;text-align:left;cursor:pointer;padding:12px 50px 12px 18px;position:sticky;top:0;z-index:5;font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;color:var(--accent);line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background-color .12s,box-shadow .2s}.menu-block > .menu-toggle:not(.nested)[aria-expanded="true"]{background-color:color-mix(in oklab,var(--accent) 8%,var(--panel));box-shadow:0 2px 8px color-mix(in oklab,var(--ink) 10%,transparent)}@media (hover:hover){.menu-block > .menu-toggle:not(.nested):hover{background-color:color-mix(in oklab,var(--accent) 12%,var(--panel));color:var(--ink)}}.nikaya-short{display:none}@media (max-width:720px){.nikaya-full{display:none}.nikaya-short{display:inline}}.menu-block > .menu-toggle:not(.nested) .chevron,.menu-toggle.nested .chevron{position:absolute;right:18px;top:50%;transform:translateY(-50%);font-size:10px;opacity:0.65}.chevron{display:inline-block}.menu-list{margin:0;padding:0}.menu-list.collapsed{display:none}.menu-nikaya-sticky{display:none}.menu-subblock{padding:0}.menu-toggle.nested{background:none;border:0;border-top:1px dashed var(--rule-2);width:100%;text-align:left;cursor:pointer;padding:12px 40px 12px 38px;position:relative;font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-2);transition:background .12s;display:flex;align-items:center;justify-content:space-between}@media (hover:hover){.menu-toggle.nested:hover{background:var(--highlight);color:var(--ink)}}.menu-toggle.nested::before{content:'▸';position:absolute;left:22px;top:50%;transform:translateY(-50%);font-size:9px;color:var(--accent);opacity:0.8}.menu-toggle.nested[aria-expanded="true"]::before{content:'▾'}.menu-subblock .chapter-toggle{font-family:var(--serif);font-style:italic;font-size:13.5px;color:var(--ink-3);padding:4px 0 4px 16px;position:relative}.menu-subblock .chapter-toggle::before{content:'—';position:absolute;left:0;top:50%;transform:translateY(-50%);font-size:11px;color:var(--accent);opacity:0.7}.menu-sutta-link{display:grid;grid-template-columns:52px 1fr;gap:10px;align-items:baseline;padding:4px 22px 4px 38px;text-decoration:none;color:var(--ink);border-top:1px solid var(--rule-2);cursor:pointer;transition:background .12s;position:relative}.menu-sutta-link:not(:has(.sutra-code)){grid-template-columns:1fr;padding-left:38px}.menu-subblock .menu-sutta-link{padding-left:54px}@media (hover:hover){.menu-sutta-link:hover{background:var(--bg-2)}}.menu-sutta-link.active{background:color-mix(in oklab,var(--accent) 14%,transparent)}.menu-sutta-link.active::before{content:"";position:absolute;left:20px;top:50%;transform:translateY(-50%);width:3px;height:18px;border-radius:2px;background:var(--accent)}.menu-subblock .menu-sutta-link.active::before{left:36px}.sutra-code{font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:0.06em;color:var(--accent);white-space:nowrap;line-height:1.4;text-align:left;padding-top:2px;opacity:0.9}.menu-sutta-link.active .sutra-code{color:var(--accent);opacity:1}.sutra-label{display:flex;flex-direction:column;gap:0;min-width:0}.sutra-label-main,.sutra-label-sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.sutra-label-main{font-family:var(--serif);font-style:normal;font-size:16px;font-weight:400;color:var(--ink);line-height:1.25}.sutra-label-sub{font-family:var(--serif);font-size:14px;font-style:italic;color:var(--ink-3);line-height:1.25}.menu-sutta-link.active .sutra-label-main,.menu-sutta-link.active .sutra-label-sub{color:var(--ink)}#sutraMenuPanel::before{content:"";display:block;height:2px;flex:0 0 auto;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:0.85}#settingsPanel{position:fixed;width:min(320px,calc(100vw - 32px));max-height:min(72vh,640px);padding:0;overflow:hidden;display:flex;flex-direction:column;transform:translateY(10px);--mono:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}#settingsPanel::before{content:"";display:block;height:2px;flex:0 0 auto;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:0.85}#settingsPanel.open{opacity:1;pointer-events:auto;transform:translateY(0)}#settingsPanel .set-panel-header{display:flex;justify-content:flex-end;align-items:center;padding:4px 8px;border-bottom:1px solid var(--rule);flex:0 0 auto;background:var(--panel);position:relative}#settingsPanel .panel-title{margin:0;padding:0;border:none;font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:0.22em;text-transform:uppercase;color:var(--ink-3);text-align:left}#settingsPanel .set-panel-body{padding:10px 14px 12px;overflow-y:auto;overflow-x:hidden;flex:1 1 auto;-webkit-overflow-scrolling:touch}#settingsPanel .set-panel-body::-webkit-scrollbar{width:4px}#settingsPanel .set-panel-body::-webkit-scrollbar-track{background:transparent}#settingsPanel .set-panel-body::-webkit-scrollbar-thumb{background:color-mix(in oklab,var(--ink-4) 40%,transparent);border-radius:999px}#settingsPanel .set-sec{margin-bottom:8px;padding:0;border-radius:0;border:none;background:transparent;overflow:visible}#settingsPanel .set-sec:last-child{margin-bottom:0}#settingsPanel .set-sec-hd{display:flex;align-items:baseline;gap:8px;padding:2px 2px 4px 2px;margin-top:4px}#settingsPanel #interfaceSection .set-sec-hd{justify-content:space-between;align-items:center}#settingsPanel .set-hd-left{display:flex;align-items:center;gap:6px}.set-hdr-btn{width:28px;height:28px;border:0;background:transparent;color:var(--ink-3);cursor:pointer;border-radius:2px;display:inline-flex;align-items:center;justify-content:center;padding:0;transition:color .12s,background .12s;flex-shrink:0;font-size:14px}@media (hover:hover){.set-hdr-btn:hover{color:var(--accent);background:color-mix(in oklab,var(--accent) 10%,transparent)}}.set-hdr-btn.active,.set-hdr-btn[aria-pressed="true"]{color:var(--accent)}.set-hdr-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

#settingsPanel .set-sec:first-child .set-sec-hd{margin-top:0}#settingsPanel .set-sec-title{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:0.18em;text-transform:uppercase;color:var(--ink-3);line-height:1.2}#settingsPanel .set-sec-sub{font-family:var(--serif);font-style:italic;font-size:12.5px;color:var(--ink-3);line-height:1.2}#settingsPanel .set-sec-body{padding:0}#settingsPanel .set-pills{display:grid;grid-template-columns:repeat(2,1fr);gap:0;background:var(--bg-2);border:1px solid var(--rule);border-radius:3px;overflow:hidden}#settingsPanel .set-pills.cols-3{grid-template-columns:repeat(3,1fr)}#settingsPanel .set-pills.cols-4{grid-template-columns:repeat(4,1fr)}#settingsPanel .pill{display:flex;align-items:center;justify-content:center;min-height:32px;padding:5px 6px;border:0;border-right:1px solid var(--rule);background:transparent;color:var(--ink-3);font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:0.06em;text-transform:uppercase;cursor:pointer;transition:all .12s;line-height:1.2}#settingsPanel .pill:last-child{border-right:0}@media (hover:hover){#settingsPanel .pill:hover{background:var(--highlight);color:var(--ink)}}#settingsPanel .pill.active,#settingsPanel .pill[aria-pressed="true"]{background:var(--accent);color:var(--bg)}#settingsPanel .pill-wide{text-transform:uppercase;letter-spacing:0.08em}#settingsPanel .pill-icon{font-size:12px;margin-right:4px;opacity:0.9}#settingsPanel .set-icon-pill{min-height:34px;padding:4px}#settingsPanel .set-icon-pill svg{width:18px;height:18px;display:block}#settingsPanel .set-icon-pill .lang-code{font-size:11.5px;letter-spacing:0.08em}#settingsPanel .set-icon-pill .lang-letters{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:0.12em;line-height:1;color:currentColor}#settingsPanel #btnDarkMode .icon-sun{display:none}#settingsPanel #btnDarkMode .icon-moon{display:block}[data-theme="dark"] #settingsPanel #btnDarkMode .icon-moon{display:none}[data-theme="dark"] #settingsPanel #btnDarkMode .icon-sun{display:block}.slider-row{display:grid;grid-template-columns:64px 1fr 48px 26px;gap:10px;align-items:center;margin-bottom:8px}.slider-row:last-child{margin-bottom:0}.slider-resets{display:flex;justify-content:flex-end;gap:6px;margin-top:4px;padding-top:4px;border-top:1px dashed var(--rule-2)}.set-mini-label{font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-3);line-height:1.2}.slider-value-badge{font-family:var(--mono);font-size:11.5px;font-weight:500;color:var(--accent);background:color-mix(in oklab,var(--accent) 10%,transparent);border:1px solid color-mix(in oklab,var(--accent) 30%,transparent);border-radius:2px;padding:1px 7px;min-width:44px;text-align:center;letter-spacing:0.02em}.slider-track-wrap{display:flex;align-items:center;gap:8px}.sutra-slider{-webkit-appearance:none;appearance:none;flex:1;height:3px;border-radius:999px;background:linear-gradient(to right,var(--accent) 0,var(--accent) var(--slider-pct,25%),var(--rule) var(--slider-pct,25%),var(--rule) 100%);outline:0;cursor:pointer;border:0;margin:0}.sutra-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--accent);border:2px solid var(--panel);box-shadow:0 1px 4px color-mix(in oklab,var(--ink) 20%,transparent);cursor:pointer}.sutra-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--accent);border:2px solid var(--panel);box-shadow:0 1px 4px color-mix(in oklab,var(--ink) 20%,transparent);cursor:pointer}@media (hover:none) and (pointer:coarse){.sutra-slider{height:22px;padding:7px 0;box-sizing:content-box;background-clip:content-box}.sutra-slider::-webkit-slider-thumb{width:22px;height:22px}.sutra-slider::-moz-range-thumb{width:22px;height:22px}}.sutra-slider:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.slider-reset-btn{background:transparent !important;border:1px solid var(--rule) !important;color:var(--ink-3) !important;font-family:var(--mono) !important;font-size:11px !important;letter-spacing:0.08em;padding:3px 9px !important;border-radius:2px !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;gap:4px;cursor:pointer;flex-shrink:0;transition:color .15s,border-color .15s,background .15s !important}@media (hover:hover){.slider-reset-btn:hover{color:var(--accent) !important;border-color:var(--accent) !important;background:color-mix(in oklab,var(--accent) 8%,transparent) !important}}#settingsPanel .tts-bar{display:flex;gap:6px;margin-top:2px}#settingsPanel .tts-btn{flex:1;height:32px;padding:0;border-radius:2px;border:1px solid var(--rule);background:var(--bg-2);color:var(--ink-3);font-size:14px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .12s}#settingsPanel .tts-btn:disabled{opacity:0.3;cursor:default}@media (hover:hover){#settingsPanel .tts-btn:not(:disabled):hover{color:var(--ink);border-color:var(--accent);background:var(--highlight)}}#settingsPanel .set-note{display:none}#guideOverlay{position:fixed;inset:0;background:color-mix(in oklab,var(--ink) 55%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;z-index:1100;opacity:0;transition:opacity .22s ease}#guideOverlay.show{display:flex;opacity:1}.guide-dialog{background:var(--panel);border:1px solid var(--rule);border-radius:6px;box-shadow:0 40px 100px color-mix(in oklab,var(--ink) 40%,transparent);padding:24px 32px 20px;max-width:1400px;width:88vw;max-height:88vh;overflow-y:auto;font-family:var(--serif);font-size:15.5px;color:var(--ink);position:relative}@media (min-width:900px){.guide-dialog{column-count:2;column-gap:40px;column-rule:1px dashed var(--rule-2)}.guide-dialog h2{column-span:all;margin-bottom:14px}.guide-dialog h3{break-inside:avoid;break-after:avoid;margin-top:14px}.guide-dialog ul,.guide-dialog p{break-inside:avoid;margin-bottom:10px}.guide-dialog button{column-span:all;margin-top:10px}}@media (max-width:720px){.guide-dialog{width:94vw;max-width:94vw;padding:18px 18px 14px;max-height:85vh;font-size:15px}}.guide-dialog h2{margin:0 0 8px;font-family:var(--serif);font-weight:300;font-style:italic;font-size:22px;color:var(--ink);letter-spacing:0;text-transform:none;text-align:left}.guide-dialog h3{margin:16px 0 6px;font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--accent)}.guide-dialog em{display:block;font-size:14px;color:var(--ink-3);font-style:italic;margin:0 0 14px}.guide-dialog ul{padding-left:20px;line-height:1.7;margin:0 0 8px}.guide-dialog li{margin-bottom:6px}.guide-dialog p{margin:8px 0 12px;line-height:1.6;color:var(--ink-2);font-size:13.5px}.guide-dialog a{color:var(--accent);text-decoration:underline;text-decoration-color:color-mix(in oklab,var(--accent) 40%,transparent)}@media (hover:hover){.guide-dialog a:hover{text-decoration-color:var(--accent)}}.guide-dialog li::marker{color:var(--accent)}.guide-dialog button{margin-top:12px;float:right;background:var(--bg-2);border:1px solid var(--rule);padding:6px 18px;font-family:var(--mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-2);cursor:pointer;border-radius:2px;transition:all .15s}@media (hover:hover){.guide-dialog button:hover{color:var(--ink);border-color:var(--accent)}}.guide-dialog kbd{font-family:var(--mono);font-size:10.5px;padding:1px 6px;border:1px solid var(--rule);border-radius:3px;background:var(--bg-2);color:var(--ink-2);letter-spacing:0}.guide-dialog code{font-family:var(--mono);font-size:12px;background:var(--bg-2);padding:1px 5px;border-radius:3px;color:var(--accent)}@media (max-width:720px){.card:not(.stack) #sutraGrid .sutra-row,.card:not(.stack) #sutraGrid:not(.hide-pali):not(.hide-eng):not(.hide-vie) .sutra-row{grid-template-columns:1fr !important;grid-template-areas:none !important;row-gap:14px;column-gap:0 !important}.card:not(.stack) #sutraGrid .pali-col,.card:not(.stack) #sutraGrid .eng-col,.card:not(.stack) #sutraGrid .vie-col{grid-area:auto !important;grid-column:1 / -1 !important}.card:not(.stack) #sutraGrid:not(.hide-pali):not(.hide-eng):not(.hide-vie) .pali-col .pali{font-size:calc(16px * var(--sutra-font-scale));line-height:var(--sutra-line-height)}.card:not(.stack) #sutraGrid .sutra-row-wrap:not(.is-subtitle):not(.is-section-num):not(.is-source) .pali,.card:not(.stack) #sutraGrid .sutra-row-wrap:not(.is-subtitle):not(.is-section-num):not(.is-source) .eng,.card:not(.stack) #sutraGrid .sutra-row-wrap:not(.is-subtitle):not(.is-section-num):not(.is-source) .vie{text-align:justify;text-justify:inter-word}}@media (max-width:960px){.nav-pill .nav-label{display:none}.nav-pill{padding:0 10px}.bar-pill{padding:0 10px;gap:0}.bar-pill span.label-full{display:none}.bar-pill svg{width:15px;height:15px}}@media (max-width:720px){.bar-center{font-size:11px;font-weight:400;letter-spacing:0.05em;gap:0;min-width:0}.bar-center::before,.bar-center::after{display:none}.ded-phrase-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}.bar-in{padding:calc(10px + env(safe-area-inset-top,0px)) 10px 10px;gap:8px}.epigraph{display:none}.header{padding:14px 18px 12px}#title{font-size:20px}#supertitle{font-size:9.5px;letter-spacing:0.14em;margin-bottom:6px}#titleMeta{margin-top:6px;font-size:11px}#sutraGrid{padding:22px 18px 26px;gap:28px}.sutra-row-wrap{padding-left:14px}.sutra-row,#sutraGrid:not(.hide-pali):not(.hide-eng):not(.hide-vie) .sutra-row{grid-template-columns:1fr !important;grid-template-areas:none !important;row-gap:14px;column-gap:0}.pali-col,.eng-col,.vie-col,.sutra-col{grid-area:auto !important;grid-column:1 / -1 !important;grid-row:auto !important;border-bottom:none}.sutra-col-header{margin-bottom:6px}.pali{font-size:calc(14.5px * var(--sutra-font-scale))}.pali,.eng,.vie{text-align:justify;text-justify:inter-word}#layoutSelectRow{display:none}.status-in{padding:1px 8px;gap:4px;grid-template-columns:auto 1fr auto}.status-in .nav-pill,.status-in .bar-pill{height:38px;min-width:38px}.status-in .status-center{height:38px}.status-title{font-size:13px;padding:0 10px;max-width:55vw}.status-title .nav-parent{display:none}.nav-pill{padding:0 8px;height:44px;min-width:44px}.bar-pill{padding:0 10px;height:44px;min-width:44px}.status-center{height:44px;gap:2px}#sutraMenuPanel{width:calc(100vw - 20px);max-height:86vh}#settingsPanel{right:10px !important;width:auto !important;max-height:calc(100vh - 60px) !important}.header{transition:transform .28s cubic-bezier(.4,0,.2,1),max-height .28s cubic-bezier(.4,0,.2,1),padding .28s cubic-bezier(.4,0,.2,1),opacity .2s ease;max-height:300px;overflow:hidden}body.settings-open .header{/* disabled — header giữ nguyên khi mở settings panel trên mobile */}#btnBackTop{right:10px;bottom:calc(env(safe-area-inset-bottom,0px) + 56px);width:32px;height:32px}#btnBackTop svg{width:12px;height:12px}#btnBackTop.visible{opacity:0.75}@media (hover:hover){#btnBackTop:hover{opacity:1}}}@media (max-width:500px){.bar-in{padding:6px 10px}.header{padding:12px 14px 10px}#title{font-size:18px}.eng,.pali,.vie{text-align:left}input[type="search"],input[type="text"],input[type="email"],textarea,select{font-size:16px !important}.menu-sutta-link,.menu-toggle,a,button,input,select,textarea{touch-action:manipulation}}button:not(:focus-visible),a:not(:focus-visible),.menu-sutta-link:not(:focus-visible),.menu-toggle:not(:focus-visible){outline:0}.bar-icon-btn:focus-visible,.bar-pill:focus-visible,.nav-pill:focus-visible,.pill:focus-visible,#sutraSearch:focus-visible,.sutra-slider:focus-visible,.tts-btn:focus-visible,.slider-reset-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none !important;animation:none !important}html,body,#sutraGrid,#readerArea{scroll-behavior:auto !important}}@media (prefers-reduced-motion:no-preference){html,body,.top-bar,.status,.header,.panel,.guide-dialog,#sutraGrid,#btnBackTop,.welcome-box,.menu-sutta-link,.sutra-col-header{transition:background-color .3s,color .3s,border-color .3s,box-shadow .3s}}.top-note-text,.top-note-actions,.footer-divider,.toolbar-btn,.toolbar-group,.panel-row,.panel-label,.btn-circle,.btn-nav,.btn-flag,.footer-nav,.bottom-controls,.nav-btn,.nav-title,.menu-btn,.menuIcon,.sr-only{}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}#sutraGrid[aria-busy="true"]::after{content:"";display:block;align-self:center;width:22px;height:22px;border-radius:50%;border:2px solid var(--rule);border-top-color:var(--accent);animation:spin 0.8s linear infinite;margin:20px auto}@keyframes spin{to{transform:rotate(360deg)}}@media (hover:none){html .bar-pill:hover,html .nav-pill:not(:disabled):hover,html .bar-icon-btn:hover{background:transparent;color:var(--ink-3)}html .bar-pill:hover svg,html .nav-pill:not(:disabled):hover svg{color:var(--ink-3);opacity:.9;transform:none}html #btnPrev:not(:disabled):hover svg,html #btnNext:not(:disabled):hover svg{transform:none}html .top-bar-icon:hover{background:transparent;color:var(--ink-4)}html .status-title:hover{background:transparent;color:var(--ink-2)}html .status-library-btn:hover{background:transparent;color:var(--ink-2)}html .status-library-btn:hover svg{color:var(--ink-4)}html .menu-close:hover{background:var(--bg-2);color:var(--ink-3);border-color:var(--rule)}html .nikaya-tile:hover{background:var(--bg-2);border-color:var(--rule);color:var(--ink-2)}html .nikaya-tile.active:hover{background:var(--accent);color:var(--bg);border-color:var(--accent)}html .menu-sutta-link:hover{background:transparent}html .menu-sutta-link.active:hover{background:color-mix(in oklab,var(--accent) 14%,transparent)}html .menu-toggle.nested:hover{background:none;color:var(--ink-2)}html .menu-block>.menu-toggle:not(.nested):hover{background-color:var(--panel);color:var(--accent)}html .menu-block>.menu-toggle:not(.nested)[aria-expanded="true"]:hover{background-color:color-mix(in oklab,var(--accent) 8%,var(--panel))}html .search-result-item:hover{background:none}html #btnBackTop:hover{opacity:.92;color:var(--ink-3);border-color:color-mix(in oklab,var(--ink-3) 30%,transparent)}html #settingsPanel .pill:hover{background:transparent;color:var(--ink-3)}html #settingsPanel .pill.active:hover,html #settingsPanel .pill[aria-pressed="true"]:hover{background:var(--accent);color:var(--bg)}html #settingsPanel .tts-btn:not(:disabled):hover{color:var(--ink-3);border-color:var(--rule);background:var(--bg-2)}html .slider-reset-btn:hover{color:var(--ink-3);border-color:var(--rule);background:transparent}html .rec-card:hover{border-color:var(--rule);background:var(--panel);transform:none}html .guide-dialog button:hover{color:var(--ink-2);border-color:var(--rule)}html .debug-action-btn:hover{background:rgba(244,67,54,0.15);color:#ff7970}html .sutra-row-wrap:hover::before{background:var(--rule-2)}html .bar-pill:not(.active):not(.is-open):active,html .nav-pill:not(:disabled):active,html .bar-icon-btn:active,html .top-bar-icon:active,html .menu-close:active,html .nikaya-tile:not(.active):active,html .rec-card:active,html #btnBackTop:active,html #settingsPanel .pill:not(.active):not([aria-pressed="true"]):active,html #settingsPanel .tts-btn:not(:disabled):active,html .slider-reset-btn:active,html .menu-toggle:active,html .menu-sutta-link:not(.active):active,html .search-result-item:active,html .guide-dialog button:active,html .debug-action-btn:active,html .status-title:active,html .status-library-btn:active{background:transparent;transform:none;box-shadow:none}html .bar-pill:focus,html .bar-pill:focus-visible,html .nav-pill:focus,html .nav-pill:focus-visible,html .bar-icon-btn:focus,html .bar-icon-btn:focus-visible,html .top-bar-icon:focus,html .top-bar-icon:focus-visible,html .nikaya-tile:focus,html .nikaya-tile:focus-visible,html .menu-close:focus,html .menu-close:focus-visible,html #btnBackTop:focus,html #btnBackTop:focus-visible,html #settingsPanel .pill:focus,html #settingsPanel .pill:focus-visible,html #settingsPanel .tts-btn:focus,html #settingsPanel .tts-btn:focus-visible,html .slider-reset-btn:focus,html .slider-reset-btn:focus-visible,html .menu-toggle:focus,html .menu-toggle:focus-visible,html .menu-sutta-link:focus,html .menu-sutta-link:focus-visible,html .search-result-item:focus,html .search-result-item:focus-visible,html .status-title:focus,html .status-library-btn:focus,html .rec-card:focus,html .rec-card:focus-visible,html .guide-dialog button:focus,html .guide-dialog button:focus-visible{outline:0;box-shadow:none}html .bar-pill:not(.active):not(.is-open):focus,html .nav-pill:focus,html .bar-icon-btn:focus,html .top-bar-icon:focus{background:transparent}}
/* ============================================================ Bookmarks ============================================================ */
.menu-sutta-link{padding-right:46px}
.menu-bookmark-btn{position:absolute;right:14px;top:50%;transform:translateY(-50%);width:30px;height:30px;display:flex;align-items:center;justify-content:center;background:transparent;border:0;border-radius:50%;padding:0;cursor:pointer;color:var(--ink-4);opacity:0.55;transition:color .15s,opacity .15s,background .15s,transform .1s}
.menu-bookmark-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;transition:fill .15s,stroke .15s}
@media (hover:hover){.menu-bookmark-btn:hover{color:var(--accent);opacity:1;background:color-mix(in oklab,var(--accent) 10%,transparent)}}
.menu-bookmark-btn:active{transform:translateY(-50%) scale(0.9)}
.menu-bookmark-btn.is-on{color:var(--accent);opacity:1}
.menu-bookmark-btn.is-on svg{fill:var(--accent);stroke:var(--accent)}
.menu-bookmark-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.header{position:relative}
.title-bookmark-btn{position:absolute;top:50%;left:24px;transform:translateY(-50%);width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:0;border-radius:50%;color:var(--ink-4);cursor:pointer;padding:0;opacity:0.6;transition:color .15s,background .15s,opacity .15s}
.title-bookmark-btn[hidden]{display:none}
.title-bookmark-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;transition:fill .15s,stroke .15s}
@media (hover:hover){.title-bookmark-btn:hover{color:var(--accent);opacity:1;background:color-mix(in oklab,var(--accent) 10%,transparent)}}
.title-bookmark-btn:active{transform:translateY(-50%) scale(0.9)}
.title-bookmark-btn.is-on{color:var(--accent);opacity:1}
.title-bookmark-btn.is-on svg{fill:var(--accent);stroke:var(--accent)}
.title-bookmark-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:720px){.title-bookmark-btn{right:14px;width:30px;height:30px}.title-bookmark-btn svg{width:16px;height:16px}}
.nikaya-tiles{grid-template-columns:repeat(5,1fr)}
.nikaya-tile-bookmark{position:relative}
.nikaya-tile-bookmark .tile-code{color:var(--accent);font-size:16px;line-height:1}
.nikaya-tile-bookmark.active .tile-code{color:var(--bg)}
.nikaya-tile .tile-count{position:absolute;top:4px;right:6px;font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:0.04em;color:var(--accent);background:color-mix(in oklab,var(--accent) 14%,transparent);border:1px solid color-mix(in oklab,var(--accent) 30%,transparent);border-radius:999px;padding:1px 6px;min-width:16px;line-height:1.2;text-align:center}
.nikaya-tile .tile-count.is-empty{display:none}
.nikaya-tile.active .tile-count{color:var(--bg);background:color-mix(in oklab,var(--bg) 22%,var(--accent));border-color:color-mix(in oklab,var(--bg) 35%,var(--accent))}
@media (max-width:500px){.nikaya-tile .tile-count{top:2px;right:3px;font-size:9px;padding:0 4px}}
.menu-empty{border-top:1px solid var(--rule-2)}
/* ============================================================ Commentary (chú giải) — per-column ============================================================ */
.sutra-col-comments-header{font-family:var(--mono);font-size:9.5px;font-weight:400;letter-spacing:0.22em;color:var(--ink-4);padding:0 0 4px 0;margin-top:14px;text-transform:uppercase;border-bottom:1px dashed color-mix(in oklab,var(--ink-4) 28%,transparent);margin-bottom:6px;user-select:none}
/* Ẩn commentary header khi tắt Label (đi cùng col-header) */
#sutraGrid.hide-col-header .sutra-col-comments-header{display:none}
/* ============================================================ Highlight per-lang ============================================================ */
/* Mặc định Pāli đã italic + ink. Khi tắt hl-pli → Pāli trở thành style thường (như Eng/Việt). */
#sutraGrid:not(.hl-pli) .sutra-row-wrap:not(.is-subtitle):not(.is-source):not(.is-section-num) .pali{font-style:normal;color:var(--ink-2)}
/* Bật hl-eng / hl-vie → cột đó thành italic + ink đậm (giống Pāli). */
#sutraGrid.hl-eng .sutra-row-wrap:not(.is-subtitle):not(.is-source):not(.is-section-num) .eng{font-style:italic;color:var(--ink)}
#sutraGrid.hl-vie .sutra-row-wrap:not(.is-subtitle):not(.is-source):not(.is-section-num) .vie{font-style:italic;color:var(--ink)}
.sutra-col-comment{margin-top:6px;padding:0;background:transparent;border:0;display:flex;gap:8px;align-items:flex-start;font-family:var(--serif-vi);font-style:italic;font-size:calc(13.5px * var(--sutra-font-scale));line-height:1.55;color:var(--ink-3)}
/* Merged mode: comment sát paragraph hơn, flow tự nhiên */
.sutra-col-comment.sutra-col-comment-merged{margin-top:6px}
.sutra-col-comment.sutra-col-comment-merged + .sutra-col-comment.sutra-col-comment-merged{margin-top:3px}
/* Single-lang mode: gap giữa paragraph nhỏ hơn multi-lang */
#sutraGrid.hide-pali.hide-eng,#sutraGrid.hide-pali.hide-vie,#sutraGrid.hide-eng.hide-vie{gap:20px}
.sutra-col-comment-seg{display:none}
.vie-col .sutra-col-comment{font-family:var(--serif-vi)}
.pali-col .sutra-col-comment{font-family:var(--serif-pali)}
.eng-col .sutra-col-comment{font-family:var(--serif)}
.sutra-col-comment-icon{flex-shrink:0;opacity:0.55;font-style:normal;font-size:0.85em;line-height:1.55}
.sutra-col-comment-text{min-width:0;word-break:break-word;overflow-wrap:break-word}
/* 3 toggle theo lang — ẩn comment + header trong từng cột. Master chỉ là shortcut sync 3 lang. */
#sutraGrid.hide-cmt-pli .pali-col .sutra-col-comment,
#sutraGrid.hide-cmt-pli .pali-col .sutra-col-comments-header{display:none}
#sutraGrid.hide-cmt-eng .eng-col .sutra-col-comment,
#sutraGrid.hide-cmt-eng .eng-col .sutra-col-comments-header{display:none}
#sutraGrid.hide-cmt-vie .vie-col .sutra-col-comment,
#sutraGrid.hide-cmt-vie .vie-col .sutra-col-comments-header{display:none}
#sutraGrid.hide-cmt-pli.hide-cmt-eng.hide-cmt-vie .sutra-comment-legacy{display:none}
/* Legacy fallback — comment không phân lang, full-width dưới row */
.sutra-comment-legacy{margin-top:10px;padding:0;background:transparent;border:0;display:flex;gap:8px;align-items:flex-start;font-family:var(--serif-vi);font-style:italic;font-size:calc(13.5px * var(--sutra-font-scale));line-height:1.55;color:var(--ink-3)}
.sutra-comment-legacy-icon{flex-shrink:0;opacity:0.55;font-style:normal;font-size:0.85em}
.sutra-comment-legacy-text{min-width:0;word-break:break-word;overflow-wrap:break-word}
@media (max-width:500px){.sutra-col-comment,.sutra-comment-legacy{font-size:calc(13px * var(--sutra-font-scale))}}
#settingsPanel .set-pills.cols-1{display:grid;grid-template-columns:1fr;background:var(--bg-2);border:1px solid var(--rule);border-radius:3px;overflow:hidden}
#settingsPanel .set-pills.cols-1 .pill{border-right:0;min-height:32px}
#settingsPanel .set-pills.cols-2{display:grid;grid-template-columns:repeat(2,1fr);gap:0;background:var(--bg-2);border:1px solid var(--rule);border-radius:3px;overflow:hidden}
#settingsPanel .set-pills.cols-2 .pill{min-height:32px}
/* ── Share / copy segment button + toast ─────────────────── */
.sutra-seg-keywrap{display:flex;align-items:center;gap:8px;padding:0 0 10px 0}
.sutra-seg-keywrap .sutra-seg-key{padding:0}
.sutra-seg-share{appearance:none;background:transparent;border:0;padding:2px;width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;color:var(--ink-4);cursor:pointer;border-radius:4px;opacity:0;transform:translateY(-1px);transition:color .15s,background .15s,opacity .15s}
.sutra-seg-share svg{width:13px;height:13px;display:block}
@media (hover:hover){.sutra-row-wrap:hover .sutra-seg-share{opacity:0.85}}.sutra-seg-share:focus-visible{opacity:0.85}
@media (hover:hover){.sutra-seg-share:hover{color:var(--accent);background:color-mix(in oklab,var(--accent) 12%,transparent);opacity:1}}
.sutra-seg-share:active{transform:translateY(0) scale(0.94)}
.sutra-seg-share:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (hover:none){.sutra-seg-share{opacity:0.7}}
.sutra-row-wrap.hide-seg-key .sutra-seg-keywrap,#sutraGrid.hide-seg-key .sutra-seg-keywrap{display:none}
.app-toast{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom,0px));transform:translateX(-50%) translateY(8px);background:var(--ink);color:var(--bg);padding:10px 18px;border-radius:999px;font-size:13px;font-family:var(--serif-vi);letter-spacing:0.01em;box-shadow:0 8px 24px rgba(0,0,0,0.18);opacity:0;pointer-events:none;z-index:9999;transition:opacity .25s ease,transform .25s ease;will-change:opacity,transform;-webkit-backface-visibility:hidden}
.app-toast.show{opacity:0.96;transform:translateX(-50%) translateY(0)}
[data-theme="dark"] .app-toast{background:var(--ink);color:var(--bg)}
/* Hide layout (Stacked / 3 columns) buttons only on small phones (≤720px). Tablets/iPad có không gian — cho user chọn layout. */
@media (max-width:720px){#layoutSelectRow{display:none !important}#layoutRow .set-sec-hd{display:none !important}}
/* ============================================================ Share button + menu ============================================================ */
.title-share-btn{position:absolute;top:50%;right:24px;transform:translateY(-50%);width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:0;border-radius:50%;color:var(--ink-4);cursor:pointer;padding:0;opacity:0.6;transition:color .15s,background .15s,opacity .15s}
@media (hover:hover){.title-share-btn:hover{color:var(--accent);opacity:1;background:color-mix(in oklab,var(--accent) 10%,transparent)}}
.title-share-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.title-share-btn svg{width:18px;height:18px}
.title-share-btn[aria-expanded="true"]{color:var(--accent);opacity:1;background:color-mix(in oklab,var(--accent) 12%,transparent)}
@media (max-width:720px){.title-share-btn{right:14px;width:30px;height:30px}.title-share-btn svg{width:16px;height:16px}.title-bookmark-btn{left:14px}}
.share-menu{position:fixed;background:var(--panel);border:1px solid var(--rule);border-radius:6px;box-shadow:0 12px 40px color-mix(in oklab,var(--ink) 25%,transparent);padding:6px;z-index:80;min-width:200px;display:flex;flex-direction:column;gap:2px;opacity:0;transform:translateY(-6px) scale(0.98);pointer-events:none;transition:opacity .15s,transform .15s}
.share-menu[aria-hidden="false"]{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
[data-theme="dark"] .share-menu{box-shadow:0 12px 40px rgba(0,0,0,0.55)}
.share-menu-item{display:flex;align-items:center;gap:10px;width:100%;padding:8px 12px;background:transparent;border:0;color:var(--ink-2);font-family:var(--serif-vi);font-size:14px;text-align:left;cursor:pointer;border-radius:4px;transition:background .12s,color .12s;min-height:38px}
.share-menu-item:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.share-menu-item svg{width:16px;height:16px;flex-shrink:0;color:var(--ink-3)}
@media (hover:hover){.share-menu-item:hover{background:var(--highlight);color:var(--ink)}
.share-menu-item:hover svg{color:var(--accent)}
.share-menu-item[data-share="facebook"]:hover svg{color:#1877f2}
.share-menu-item[data-share="zalo"]:hover svg{color:#0068ff}
.share-menu-item[data-share="twitter"]:hover svg{color:var(--ink)}}
.share-label{flex:1;line-height:1.2}
/* Tablet+ (≥768px): tăng icon Settings (⚙) và Guide (?) cho dễ tap trên iPad */
@media (min-width:768px){
.bar-pill svg{width:17px;height:17px}
#btnSettings svg,#btnGuide svg{width:18px;height:18px}
}
/* Reading progress — thanh tiến độ đọc dọc bên trái viewport */
/* Reading progress — dạng "nút ruồi": chấm tròn di chuyển theo scroll. JS set top/bottom = grid bounds */
#readingProgress{position:fixed;top:0;bottom:0;left:0;width:14px;background:transparent;z-index:50;pointer-events:none;opacity:0;transition:opacity .25s ease}
#readingProgress::before{display:none}#readingProgressFill{display:none !important}.rp-bar{position:absolute;left:4px;top:8px;width:4px;height:48px;border-radius:999px;background:linear-gradient(to bottom,var(--accent) 0%,var(--accent) 30%,color-mix(in oklab,var(--accent) 25%,transparent) 100%);box-shadow:0 0 0 1px color-mix(in oklab,var(--accent) 18%,transparent),0 1px 3px color-mix(in oklab,var(--ink) 14%,transparent);transition:top .18s ease-out,height .25s ease-out,opacity .28s ease;pointer-events:none}.rp-dot{position:absolute;left:4px;top:8px;width:4px;height:4px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 1px color-mix(in oklab,var(--accent) 22%,transparent),0 0 3px color-mix(in oklab,var(--ink) 14%,transparent);transition:top .18s ease-out,opacity .25s ease;will-change:top,opacity;pointer-events:none}
#readingProgress.visible{opacity:1}
#readingProgressFill{position:absolute;left:3px;top:0;width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px color-mix(in oklab,var(--accent) 22%,transparent),0 1px 4px color-mix(in oklab,var(--ink) 20%,transparent);transform:translateY(8px);transition:transform .18s ease-out;will-change:transform}
#readingProgressPct{display:none !important}
#readingProgress.visible #readingProgressPct{opacity:0.85}
#readingProgress.idle #readingProgressPct{opacity:0}
@media (max-width:720px){#readingProgress{width:12px}#readingProgress::before{left:3px;width:6px}#readingProgressFill{left:2px;width:8px;height:8px}#readingProgressPct{font-size:9px;right:12px;bottom:51px;padding:1px 0;width:32px}}
/* Per-column copy button — cạnh label PALI / ENGLISH / TIẾNG VIỆT */
.sutra-col-header{display:flex;align-items:center;justify-content:space-between;gap:6px}
.sutra-col-header-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.sutra-col-copy{appearance:none;background:transparent;border:0;padding:2px;width:18px;height:18px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;color:var(--ink-4);cursor:pointer;border-radius:3px;opacity:0;transform:translateY(-1px);transition:color .15s,background .15s,opacity .15s}
@media (hover:hover){.sutra-row-wrap:hover .sutra-col-copy{opacity:0.6}
.sutra-col-copy:hover{color:var(--accent);background:color-mix(in oklab,var(--accent) 12%,transparent);opacity:1}}
.sutra-col-copy:focus-visible{outline:2px solid var(--accent);outline-offset:1px;opacity:1}
.sutra-col-copy svg{width:12px;height:12px}
/* Touch devices (iPad / mobile): hiện luôn copy + share buttons. Desktop giữ hover-reveal. */
@media (hover:none){
.sutra-col-copy{opacity:0.55 !important}
.sutra-seg-share{opacity:0.7 !important}
}
/* Subtitle rows (AN/SN có :0.1 Nikaya · :0.2 Vagga · :0.3 Sutta title) — chỉ giữ 1 nút share ở row :0.3 để tránh rối */
.sutra-row-wrap.is-subtitle[data-key$=":0.1"] .sutra-seg-share,
.sutra-row-wrap.is-subtitle[data-key$=":0.2"] .sutra-seg-share{display:none !important}
.sutra-row-wrap.is-subtitle .sutra-seg-keywrap{justify-content:center;padding-bottom:6px}
.sutra-row-wrap.is-subtitle[data-key$=":0.1"] .sutra-seg-keywrap,
.sutra-row-wrap.is-subtitle[data-key$=":0.2"] .sutra-seg-keywrap{padding:0;min-height:0}
/* Sticky hover fix — khi user tap nút để đóng panel, force clear mọi :hover/:active state để không ghost */
@media (hover:none){
.bar-pill.no-hover,.bar-pill.no-hover:hover,.bar-pill.no-hover:active,.bar-pill.no-hover:focus,.bar-pill.no-hover:focus-visible{background:transparent !important;color:var(--ink-3) !important;transform:none !important;box-shadow:none !important;transition:none !important}
.bar-pill.no-hover svg{color:var(--ink-3) !important;opacity:0.9 !important;transform:none !important;transition:none !important}
}
/* Touch-only: tắt hover/active background để tránh sticky shadow trên iOS/Android.
   Desktop KHÔNG bị ảnh hưởng — vẫn có hover smooth + color transition như cũ. */
html.is-touch .bar-pill:hover,
html.is-touch .bar-pill:active,
html.is-touch .bar-pill:focus,
html.is-touch .bar-pill:focus-visible{background:transparent !important;transform:none !important;box-shadow:none !important}
html.is-touch .bar-pill:hover svg,
html.is-touch .bar-pill:active svg{transform:none !important}
/* Override KHI panel đang mở (touch device) — giữ accent background làm state indicator */
html.is-touch .bar-pill.is-open,
html.is-touch .bar-pill.is-open:hover,
html.is-touch .bar-pill.is-open:focus,
html.is-touch .bar-pill.is-open:active,
html.is-touch .bar-pill.active,
html.is-touch .bar-pill.active:hover{background:color-mix(in oklab,var(--accent) 10%,transparent) !important}
html.hide-reading-progress #readingProgress{display:none !important}
#btnProgressToggle[aria-pressed="false"]{opacity:0.5;text-decoration:line-through}
/* iOS/iPad Safari fix: chống auto-zoom khi tap input (font ≥ 16px) + chống double-tap zoom (touch-action:manipulation) */
input[type="search"],input[type="text"],input[type="email"],input[type="number"],input[type="tel"],input[type="url"],input[type="password"],textarea,select{font-size:16px !important}
button,a,label,input,select,textarea,.menu-sutta-link,.menu-toggle,.nikaya-tile,.pill,.bar-pill,.nav-pill,.tts-btn,.share-menu-item,.title-share-btn,.title-bookmark-btn{touch-action:manipulation}
/* ============================================================
   Sticky-hover fix bổ sung — touch device giữ :hover/:focus sau tap.
   Block @media (hover:none) cũ ở line 18 chỉ cover các nút chính (bar-pill, nav-pill...).
   Các nút icon nhỏ (share/bookmark/copy/welcome) chưa được override → tap xong dính highlight.
   ============================================================ */
@media (hover:none){
html .ded-clickable:hover,html .ded-clickable:focus,html .ded-clickable:active{color:var(--accent);opacity:1;background:transparent}
html .guide-dialog a:hover,html .guide-dialog a:focus,html .guide-dialog a:active{text-decoration-color:color-mix(in oklab,var(--accent) 40%,transparent);background:transparent}
html .menu-bookmark-btn:hover,html .menu-bookmark-btn:focus,html .menu-bookmark-btn:active{color:var(--ink-4);opacity:0.55;background:transparent;transform:translateY(-50%)}
html .menu-bookmark-btn.is-on:hover,html .menu-bookmark-btn.is-on:focus,html .menu-bookmark-btn.is-on:active{color:var(--accent);opacity:1;background:transparent;transform:translateY(-50%)}
html .set-hdr-btn:hover,html .set-hdr-btn:focus,html .set-hdr-btn:active{color:var(--ink-3);background:transparent}
html .set-hdr-btn.active:hover,html .set-hdr-btn[aria-pressed="true"]:hover{color:var(--accent);background:transparent}
html .share-menu-item:hover,html .share-menu-item:focus,html .share-menu-item:active{background:transparent;color:var(--ink-2)}
html .share-menu-item:hover svg,html .share-menu-item:focus svg,html .share-menu-item:active svg{color:var(--ink-3)}
html .share-menu-item[data-share="facebook"]:hover svg,html .share-menu-item[data-share="zalo"]:hover svg,html .share-menu-item[data-share="twitter"]:hover svg,html .share-menu-item[data-share="email"]:hover svg,html .share-menu-item[data-share="native"]:hover svg{color:var(--ink-3)}
html .sutra-col-copy:hover,html .sutra-col-copy:focus,html .sutra-col-copy:active{color:var(--ink-4);background:transparent;opacity:0.55;transform:translateY(-1px)}
html .sutra-seg-share:hover,html .sutra-seg-share:focus,html .sutra-seg-share:active{color:var(--ink-4);background:transparent;opacity:0.7;transform:translateY(-1px)}
html .title-bookmark-btn:hover,html .title-bookmark-btn:focus,html .title-bookmark-btn:active{color:var(--ink-4);opacity:0.6;background:transparent;transform:translateY(-50%)}
html .title-bookmark-btn.is-on:hover,html .title-bookmark-btn.is-on:focus,html .title-bookmark-btn.is-on:active{color:var(--accent);opacity:1;background:transparent;transform:translateY(-50%)}
html .title-share-btn:hover,html .title-share-btn:focus,html .title-share-btn:active{color:var(--ink-4);opacity:0.6;background:transparent;transform:translateY(-50%)}
html .title-share-btn[aria-expanded="true"]:hover{color:var(--accent);opacity:1;background:color-mix(in oklab,var(--accent) 12%,transparent);transform:translateY(-50%)}
html .welcome-help-row:hover,html .welcome-help-row:focus,html .welcome-help-row:active{color:var(--ink-2);padding-left:8px;background:transparent;transition:none}
html .welcome-help-row:active .welcome-help-key,html .welcome-help-row:hover .welcome-help-key,html .welcome-help-row:focus .welcome-help-key{color:var(--ink-3);background:transparent;transform:none}
html .welcome-hero-title[data-action]:hover,html .welcome-hero-title[data-action]:focus,html .welcome-hero-title[data-action]:active{color:var(--ink);transform:none;transition:none}
html .welcome-hero-title[data-action]:hover em,html .welcome-hero-title[data-action]:focus em{color:var(--accent)}
html .welcome-lang-btn:hover,html .welcome-lang-btn:focus,html .welcome-lang-btn:active{color:var(--ink-3);background:transparent}
html .welcome-lang-btn.active:hover,html .welcome-lang-btn.active:focus{color:var(--accent)}
html .sutra-row-wrap:hover .sutra-col-copy{opacity:0.55}
html .sutra-row-wrap:hover .sutra-seg-share{opacity:0.7}
}
/* ============================================================
   Welcome state — ẩn nguyên footer + back-top + reading progress.
   Library đã có 2 entry trong welcome (hero title + welcome-help-row)
   nên footer chỉ thừa và gây flicker khi tap vào nút Thư viện.
   ============================================================ */
html.is-welcome .status,
html.is-welcome #btnBackTop,
html.is-welcome #readingProgress{display:none !important}
/* ============================================================
   Cửu Đức Phật welcome animation.
   - 9 text labels position absolute quanh mandala, cùng góc với 9 dots.
   - Stagger = 3s/9 = 0.333s áp dụng cho CẢ text và dot cùng --idx →
     cycle đầu pair-by-pair (text 1 + dot 1, ..., text 9 + dot 9 — tổng
     2.66s tới pair cuối bắt đầu). Text fade-in `forwards` giữ visible mãi.
   - Dots loop 3s infinite (vòng xoáy cũ): mỗi dot trong toàn bộ cycle là
     đang bay từ rìa cánh hoa vào tâm với opacity peak 12% → 70% → 0.
     Vì stagger × 9 = 3s = cycle duration, mọi dot luôn ở stage khác nhau
     → spiral wave continuous quanh mandala.
   - Container chống đụng: 2 label centers cách nhau 2*R*sin(20°) ≈ 0.684R.
     Desktop R=120 → 82, width 80 → khít. Mobile R=96 → 65.6, width 64.
   ============================================================ */
.welcome-mandala{position:relative;width:340px;height:340px}
.welcome-mandala svg{position:absolute;top:50%;left:50%;width:140px;height:140px;transform:translate(-50%,-50%)}
.welcome-virtues{position:absolute;inset:0;list-style:none;margin:0;padding:0;pointer-events:none}
.wv-item{position:absolute;left:50%;top:50%;width:80px;text-align:center;line-height:1.18;
opacity:0;transform:translate(-50%,-50%) translate(calc(sin(var(--angle,0deg)) * 120px),calc(cos(var(--angle,0deg)) * -120px));
animation:wv-fade-in 0.45s ease-out forwards;animation-delay:calc(var(--idx,0) * 0.333s)}
.wv-pali{display:block;font-family:var(--serif-pali);font-style:italic;font-weight:400;font-size:10px;line-height:1.18;color:var(--accent);letter-spacing:0.005em;word-break:break-word;hyphens:auto}
.wv-tr{display:block;font-family:var(--serif-vi);font-size:9px;line-height:1.22;color:var(--ink-3);letter-spacing:0.01em;margin-top:1px}
@keyframes wv-fade-in{to{opacity:1}}
.welcome-petal-dot{fill:var(--accent);stroke:none;opacity:0;
animation:welcome-petal-flow 3s cubic-bezier(.5,0,.7,1) infinite;
animation-delay:calc(var(--idx,0) * 0.333s)}
@keyframes welcome-petal-flow{
0%   {transform:translate(0,0);opacity:0}
12%  {opacity:0.95}
70%  {opacity:0.6}
100% {transform:translate(var(--dx,0),var(--dy,0));opacity:0}
}
@media (max-width:500px){
.welcome-mandala{width:280px;height:280px;margin-bottom:0}
.welcome-mandala svg{width:108px;height:108px}
.wv-item{width:64px;transform:translate(-50%,-50%) translate(calc(sin(var(--angle,0deg)) * 96px),calc(cos(var(--angle,0deg)) * -96px))}
.wv-pali{font-size:9px}
.wv-tr{font-size:8px}
}
@media (prefers-reduced-motion:reduce){
.wv-item{animation:none !important;opacity:1 !important}
.welcome-petal-dot{animation:none !important;opacity:0 !important}
}
/* Mobile: welcome-help-row default padding-left là 4px (không phải 8px như desktop).
   Override ở block hover-none cũ force 8px → tap → layout shift 4→8 → flicker.
   Khớp lại đúng giá trị mobile để tap không gây giật. */
@media (hover:none) and (max-width:500px){
html .welcome-help-row:hover,html .welcome-help-row:focus,html .welcome-help-row:active{padding-left:4px}
}
/* btnBackTop sticky fix: line 18 override force opacity:.92 trên :hover ngay cả khi
   .visible đã bị JS gỡ → nút dính sau click. Scope opacity theo .visible:
   - không có .visible → opacity:0 (ẩn) bất kể hover/focus/active sticky
   - có .visible → opacity:.92 (giữ visible) như cũ */
@media (hover:none){
html #btnBackTop:not(.visible),
html #btnBackTop:not(.visible):hover,
html #btnBackTop:not(.visible):focus,
html #btnBackTop:not(.visible):active{opacity:0;pointer-events:none}
}
/* Tắt tạm Commentary section trong Settings panel.
   Bỏ rule này khi cần bật lại — không xoá HTML/JS để dễ phục hồi. */
#commentRow{display:none}