/* 司律讀書站 — P_OS「墨朱 Ink & Vermilion」（2026-10 改版）。
   預設深色（夜間聽課）；右上角可切淺色，偏好存在本裝置 localStorage `pos-theme`。 */
:root{color-scheme:dark;--bg:#0b0f17;--card:#131a26;--card-2:#18202e;--line:#243044;--line-strong:#324058;
--text:#e8ecf4;--muted:#8a93a6;--accent:#ff6a4d;--accent-soft:rgba(255,106,77,.12);--ink-btn:#1f2939;
--brand:#8fb0ff;--err:#ff6a4d;--ok:#4cc79a;
--ui:-apple-system,"Noto Sans TC","Microsoft JhengHei","PingFang TC",sans-serif;
--mono:"Cascadia Mono",Consolas,ui-monospace,monospace}
html[data-theme="light"]{color-scheme:light;--bg:#eef0f3;--card:#ffffff;--card-2:#f6f7f9;--line:#e1e5ec;
--line-strong:#c9cfda;--text:#141a26;--muted:#6b7385;--accent:#e0442c;--accent-soft:#fdeeeb;--ink-btn:#e9ecf1;
--brand:#27407a;--err:#d63b24;--ok:#12805f}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--ui);-webkit-text-size-adjust:100%;
padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
main{padding:16px 16px 40px;max-width:760px;margin:0 auto}
.center{min-height:80vh;display:flex;flex-direction:column;justify-content:center;text-align:center;gap:16px}
.bar{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:56px;
padding:8px 16px;position:sticky;top:0;z-index:5;background:#121a2c;color:#e9edf6;
box-shadow:0 1px 0 rgba(255,255,255,.06)}
html[data-theme="light"] .bar{background:#121a2c}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:16px}
.brand::before{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:#e0442c;
color:#fff;content:"司";font-size:14px;font-weight:900}
.bar-actions{display:flex;align-items:center;gap:6px}
.bar .link,.bar button.link{color:#8e98b0}
.theme-btn{min-height:34px;padding:0 10px;border:1px solid rgba(255,255,255,.16);border-radius:8px;
background:transparent;color:#e9edf6;font-size:12px;font-weight:700}
.bar form{margin:0}
h1{font-size:22px;font-weight:900;letter-spacing:-.02em;margin:0 0 4px}
h2{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted);margin:24px 0 10px;
font-family:var(--mono);letter-spacing:.12em;font-weight:800}
h2::after{flex:1;height:1px;background:var(--line);content:""}
.lesson{font-size:19px;line-height:1.5;margin:8px 0 16px}
.muted{color:var(--muted);font-size:13px;line-height:1.7}
.error{color:var(--err);font-size:14px;font-weight:700}
ul{list-style:none;padding:0;margin:0}
li{display:flex;justify-content:space-between;align-items:center;gap:12px;
background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:8px}
.title{font-size:15px;line-height:1.45;word-break:break-all}
.actions{display:flex;gap:6px;flex-shrink:0}
.go{display:inline-flex;align-items:center;gap:6px;min-width:44px;min-height:40px;
padding:0 12px;justify-content:center;border-radius:10px;background:var(--ink-btn);
color:var(--text);text-decoration:none;font-size:15px;font-weight:700}
.go:hover{outline:1px solid var(--line-strong)}
.resume{font-size:11px;color:var(--accent);font-family:var(--mono);font-variant-numeric:tabular-nums}
details{border:1px solid var(--line);border-radius:14px;margin-bottom:8px;background:var(--card);overflow:hidden}
summary{padding:12px 14px;font-size:15px;font-weight:700;cursor:pointer;display:flex;justify-content:space-between;
align-items:center;gap:10px;min-height:52px;box-sizing:border-box;list-style:none}
summary::-webkit-details-marker{display:none}
summary::after{color:var(--muted);content:"›";font-size:20px;transition:transform .15s}
details[open] summary::after{transform:rotate(90deg)}
.count{min-width:26px;padding:0 8px;border-radius:999px;background:var(--card-2);color:var(--muted);
font-size:12px;font-family:var(--mono);text-align:center;font-variant-numeric:tabular-nums}
.s-name{flex:1;min-width:0}
.s-meta{display:flex;align-items:center;gap:10px;flex-shrink:0}
details[open] summary{border-bottom:1px solid var(--line);background:var(--card-2)}
.s-body{padding:8px;max-height:65vh;overflow-y:auto}
.s-body .card{margin:4px 4px 10px}
details ul{padding:0}
details li{background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;margin:0}
details li:last-child{border-bottom:0}
.card{position:relative;display:block;background:var(--card);border:1px solid var(--line);border-left:4px solid var(--accent);
border-radius:12px;padding:12px 14px;margin-bottom:8px;text-decoration:none;color:var(--text)}
.card:hover{background:var(--card-2)}
.card-sub{display:block;font-size:12px;color:var(--muted);margin-bottom:4px;font-weight:700}
.card-title{display:block;font-size:16px;font-weight:800;line-height:1.45;margin-bottom:6px}
.card-pos{display:inline-block;padding:1px 8px;border-radius:6px;background:var(--accent-soft);font-size:13px;
color:var(--accent);font-family:var(--mono);font-weight:700;font-variant-numeric:tabular-nums}
audio,video{width:100%;border-radius:14px;background:#000}
audio{background:transparent}
.controls{display:flex;gap:10px;margin:14px 0}
.seek{flex:1;background:var(--ink-btn);color:var(--text);font-size:17px;font-weight:800;
font-family:var(--mono);font-variant-numeric:tabular-nums}
.speeds{display:flex;gap:8px}
.chip{flex:1;min-height:44px;padding:0;background:var(--card);border:1px solid var(--line);color:var(--muted);
font-size:15px;font-weight:700;font-family:var(--mono)}
.chip.on{background:var(--accent);border-color:var(--accent);color:#fff}
input{width:100%;max-width:300px;margin:0 auto;padding:14px;font-size:20px;text-align:center;font-family:var(--mono);
letter-spacing:.2em;border-radius:12px;border:1px solid var(--line-strong);background:var(--card);color:var(--text)}
input:focus{outline:2px solid var(--accent);outline-offset:2px}
button{min-height:48px;padding:0 24px;font-size:16px;border-radius:12px;border:0;cursor:pointer;
background:var(--accent);color:#fff;font-weight:800}
button.link{background:none;color:var(--muted);font-weight:600;font-size:13px;padding:0;min-height:44px}
a.link{color:var(--muted);text-decoration:none;font-size:14px;font-weight:600}
code{color:var(--accent);font-size:12px;font-family:var(--mono)}
form{display:flex;flex-direction:column;gap:12px;align-items:center}
#status{margin-top:14px;padding:10px 12px;border-radius:10px;background:var(--card);border:1px solid var(--line)}