:root{--acc:var(--ember,var(--accent));--acc-bg:var(--ember,var(--brand))}
[hidden]{display:none!important}

/* Tombol bahasa */
.lang-pill{position:fixed;right:max(14px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));z-index:60;display:inline-flex;gap:2px;padding:3px;border-radius:999px;border:1px solid var(--line);background:color-mix(in oklab,var(--bg) 88%,transparent);backdrop-filter:blur(8px);box-shadow:0 6px 24px -10px rgba(0,0,0,.45);font:600 12px/1 var(--font-sans);cursor:pointer;color:var(--muted)}
.lang-pill span{padding:7px 10px;border-radius:999px}
.lang-pill span.on{background:var(--acc-bg);color:var(--on-ember,var(--on-brand))}
.lang-btn{display:inline-flex;align-items:center;gap:1px;height:34px;padding:3px;margin:0 2px;border-radius:999px;border:1px solid var(--line);background:transparent;font:600 11.5px/1 var(--font-sans);color:var(--muted);cursor:pointer;flex-shrink:0}
.lang-btn span{padding:6px 8px;border-radius:999px}
.lang-btn span.on{background:var(--acc-bg);color:var(--on-ember,var(--on-brand))}

/* Blok tambahan di dalam bacaan */
.x-orn{display:flex;justify-content:center;gap:.9em;margin:2.2em 0 1.6em;color:var(--acc);opacity:.75;font-size:.9em;letter-spacing:.3em}
.x-h3{margin:2.4em 0 .7em;font-weight:650;font-size:1.08em;line-height:1.35;scroll-margin-top:6rem}
.x-h4{margin:1.9em 0 .5em;font-weight:600;font-size:.95em;line-height:1.35;color:var(--acc);scroll-margin-top:6rem}
.x-label{margin:2.4em 0 .5em;font:600 .78em/1.2 var(--font-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--acc)}
.x-table{margin:1.2em 0 1.8em;overflow-x:auto;border:1px solid var(--line);border-radius:14px;-webkit-overflow-scrolling:touch}
.x-table table{width:100%;border-collapse:collapse;font-size:.84em;line-height:1.5;hyphens:none}
.x-table th{position:sticky;top:0;background:var(--surface);text-align:left;font-weight:650;padding:.65em .8em;border-bottom:1px solid var(--line);white-space:nowrap}
.x-table td{padding:.6em .8em;border-top:1px solid var(--line);vertical-align:top;min-width:9em}
.x-table tr:first-child td{border-top:0}
.x-list{margin:1em 0 1.4em;padding-left:1.4em;list-style:disc}
.x-list li{margin:.35em 0;padding-left:.2em}
.x-list li::marker{color:var(--acc)}
ol.x-list{list-style:decimal}
.x-list .x-list{margin:.4em 0 .2em}
.x-ref{display:block;margin-top:.45em;font-size:.8em;color:var(--acc)}
.x-cols{display:grid;gap:.75rem;margin:1.75rem 0}
@media (min-width:640px){.x-cols{grid-template-columns:repeat(var(--n,2),minmax(0,1fr))}}
.x-cols>div{border:1px solid var(--line);background:var(--raise);border-radius:1rem;padding:1rem;font-size:.92em}
.x-cols>div>*:first-child{margin-top:0}
.x-cols figure{margin:.75rem 0!important}

/* Pemberitahuan terjemahan & status */
.x-note{margin:0 0 1.6em;padding:.85em 1.1em;border:1px dashed var(--line);border-radius:14px;font:500 14px/1.55 var(--font-sans);color:var(--muted)}
.x-note b{color:var(--ink);font-weight:600}
.x-state{padding:5rem 0;text-align:center;color:var(--muted);font-family:var(--font-sans)}
.x-lock{margin:2.5rem 0;padding:2rem 1.5rem;border:1px solid var(--line);border-radius:1.5rem;background:var(--surface);text-align:center;font-family:var(--font-sans)}
.x-lock h2{font-size:1.25rem;font-weight:650;margin-bottom:.4rem}
.x-lock p{color:var(--muted);font-size:15px;margin-bottom:1.2rem}
.x-btn{display:inline-flex;align-items:center;gap:.45rem;border-radius:999px;padding:.55rem 1.1rem;background:var(--acc-bg);color:var(--on-ember,var(--on-brand));font:600 14px/1 var(--font-sans);text-decoration:none}

/* Panel (pengaturan, daftar bab, isi bab) */
.x-panel-back{position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.35)}
.x-panel{position:fixed;z-index:71;top:calc(env(safe-area-inset-top,0px) + 4.25rem);right:max(.75rem,env(safe-area-inset-right));width:min(24rem,calc(100vw - 1.5rem));max-height:calc(100dvh - 6rem);overflow:auto;border:1px solid var(--line);border-radius:1.25rem;background:var(--bg);box-shadow:0 24px 60px -20px rgba(0,0,0,.5);padding:1rem;font-family:var(--font-sans);color:var(--ink)}
.x-panel h3{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:.25rem 0 .6rem}
.x-panel .row{display:flex;gap:.5rem;margin-bottom:1rem}
.x-panel .opt{flex:1;border:1px solid var(--line);border-radius:.8rem;padding:.6rem .4rem;font-size:13px;cursor:pointer;text-align:center}
.x-panel .opt.on{outline:2px solid var(--acc-bg);outline-offset:1px}
.x-panel input{width:100%;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:.8rem;padding:.6rem .8rem;font-size:15px;margin-bottom:.6rem}
.x-panel a.it{display:block;padding:.55rem .6rem;border-radius:.7rem;text-decoration:none;color:var(--ink);font-size:14px;line-height:1.35}
.x-panel a.it:hover,.x-panel a.it.on{background:var(--surface)}
.x-panel a.it small{display:block;color:var(--muted);font-size:12.5px;margin-top:2px}
.x-panel .lk{float:right;color:var(--muted);font-size:12px}
.no-translit .x-tr{display:none}

.account-dock{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);display:flex;gap:4px;padding:5px;background:#fff;border:1px solid #ddd;border-radius:30px;box-shadow:0 6px 25px #00000012;z-index:60;white-space:nowrap;font:13px system-ui}.account-dock a{padding:9px 16px;text-decoration:none;border-radius:22px;color:#151515}.account-dock a:first-child{background:#151515;color:white}