/* feishengmt - wuxia theme.
   Rice paper and ink by day, lamp-lit ink by night. Cinnabar is the only loud colour and is used for seals,
   primary actions and rank numerals. Bronze is for numbers, jade for "translated". */

@font-face { font-family:Spectral; font-weight:500; font-style:normal; font-display:swap; src:url("../fonts/spectral-latin-500-normal.d4f6bee97c64.woff2") format("woff2"); }
@font-face { font-family:Spectral; font-weight:500; font-style:italic; font-display:swap; src:url("../fonts/spectral-latin-500-italic.878f3e412480.woff2") format("woff2"); }
@font-face { font-family:Spectral; font-weight:700; font-style:normal; font-display:swap; src:url("../fonts/spectral-latin-700-normal.456f29ac2c8a.woff2") format("woff2"); }
@font-face { font-family:"Source Sans 3"; font-weight:400; font-display:swap; src:url("../fonts/source-sans-3-latin-400-normal.27ab01c4cb50.woff2") format("woff2"); }
@font-face { font-family:"Source Sans 3"; font-weight:600; font-display:swap; src:url("../fonts/source-sans-3-latin-600-normal.9a35cba76eda.woff2") format("woff2"); }
@font-face { font-family:"Source Sans 3"; font-weight:700; font-display:swap; src:url("../fonts/source-sans-3-latin-700-normal.9b13bd3653e3.woff2") format("woff2"); }
@font-face { font-family:Literata; font-weight:400; font-style:normal; font-display:swap; src:url("../fonts/literata-latin-400-normal.a1e47c1196a7.woff2") format("woff2"); }
@font-face { font-family:Literata; font-weight:400; font-style:italic; font-display:swap; src:url("../fonts/literata-latin-400-italic.eec593fa1065.woff2") format("woff2"); }
@font-face { font-family:Literata; font-weight:700; font-style:normal; font-display:swap; src:url("../fonts/literata-latin-700-normal.8d83af4a6b4f.woff2") format("woff2"); }
@font-face { font-family:"Ma Shan Zheng"; font-display:block; src:url("../fonts/brush-subset.dd00d391dbae.ttf") format("truetype"); }

:root {
  --font-ui: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --font-head: Spectral, "Songti SC", "Noto Serif CJK SC", SimSun, serif;
  --font-read: Literata, Georgia, "Songti SC", "Noto Serif CJK SC", SimSun, serif;
  --font-zh: "Noto Serif SC", "Songti SC", "Noto Serif CJK SC", SimSun, "Microsoft YaHei", serif;
  --font-kai: "Kaiti SC", STKaiti, KaiTi, "Noto Serif CJK SC", var(--font-zh);
  --font-brush: "Ma Shan Zheng", var(--font-zh);
  --wrap: 1080px; --narrow: 800px; --radius: 6px;
  --bg:#efe8d6; --bg2:#e7dfca; --surface:#f8f3e5; --surface2:#efe7d2; --line:#d4c8aa; --line2:#b9aa86;
  --ink:#221d16; --muted:#6a604c; --faint:#8d8268;
  --seal:#a82f27; --seal-ink:#fbf1de; --bronze:#86641f; --jade:#356a58; --jade-bg:#dfe9dc;
  --link:#8f2a22; --focus:#86641f; --shadow:0 1px 0 rgba(255,255,255,.5) inset, 0 2px 8px rgba(60,40,10,.10);
  --grain-op:.5; --grain-blend:multiply;
  --hero-sky1:#f3ebd6; --hero-sky2:#e2cfa5; --hero-sun:#b3342b; --hero-far:#8a8f84; --hero-mid:#4f5a54;
  --hero-near:#262a26; --hero-mist:#f5eedb; --hero-ink:#221d16;
}
[data-theme="night"] {
  --bg:#13100d; --bg2:#0f0d0a; --surface:#1c1813; --surface2:#26211a; --line:#352e24; --line2:#4d4231;
  --ink:#ebe3d0; --muted:#a39982; --faint:#7f765f;
  --seal:#c9483c; --seal-ink:#fbf1de; --bronze:#d2b06a; --jade:#74b49b; --jade-bg:#1d2c26;
  --link:#e08a7c; --focus:#d2b06a; --shadow:0 2px 10px rgba(0,0,0,.45);
  --grain-op:.10; --grain-blend:screen;
  --hero-sky1:#1a1f2b; --hero-sky2:#3b3a3c; --hero-sun:#e9dcb2; --hero-far:#394252; --hero-mid:#232b36;
  --hero-near:#0c0e12; --hero-mist:#566073; --hero-ink:#ebe3d0;
}
* { box-sizing:border-box; }
html { color-scheme:light; scroll-padding-top:4.5rem; }
[data-theme="sepia"] {
  --bg:#e9d9b6; --bg2:#e0cea3; --surface:#f1e4c4; --surface2:#e6d5ac; --line:#cdb98c; --line2:#b49f70;
  --ink:#3b2f1b; --muted:#6b5a3a; --faint:#85714b;
  --seal:#a82f27; --seal-ink:#fbf1de; --bronze:#7a5a1a; --jade:#356a58; --jade-bg:#dfe3c8;
  --link:#8f2a22; --focus:#7a5a1a; --shadow:0 1px 0 rgba(255,255,255,.4) inset, 0 2px 8px rgba(60,40,10,.12);
  --grain-op:.45; --grain-blend:multiply;
  --hero-sky1:#f3ebd6; --hero-sky2:#e2cfa5; --hero-sun:#b3342b; --hero-far:#8a8f84; --hero-mid:#4f5a54;
  --hero-near:#262a26; --hero-mist:#f5eedb; --hero-ink:#3b2f1b;
}
[data-theme="black"] {
  --bg:#000; --bg2:#000; --surface:#0e0e0e; --surface2:#171717; --line:#242424; --line2:#3b3b3b;
  --ink:#bdb6a4; --muted:#8c8575; --faint:#6b665a;
  --seal:#c9483c; --seal-ink:#fbf1de; --bronze:#d2b06a; --jade:#74b49b; --jade-bg:#14201b;
  --link:#e08a7c; --focus:#d2b06a; --shadow:0 2px 10px rgba(0,0,0,.6);
  --grain-op:0; --grain-blend:screen;
  --hero-sky1:#0a0c10; --hero-sky2:#1c1c1e; --hero-sun:#e9dcb2; --hero-far:#2a313d; --hero-mid:#181d26;
  --hero-near:#050608; --hero-mist:#3a4252; --hero-ink:#bdb6a4;
}
html[data-theme="night"], html[data-theme="black"] { color-scheme:dark; }
body { margin:0; background:var(--bg); color:var(--ink); font:17px/1.6 var(--font-ui); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
body::before { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background:url("../img/grain.38071cfd407a.png"); opacity:var(--grain-op); mix-blend-mode:var(--grain-blend); }
a { color:var(--link); text-decoration:none; } a:hover { text-decoration:underline; text-underline-offset:3px; }
h1,h2,h3,h4 { font-family:var(--font-head); font-weight:700; line-height:1.18; margin:0 0 .5em; }
h1 { font-size:clamp(1.9rem,3.6vw,2.7rem); } h2 { font-size:1.5rem; } h3 { font-size:1.2rem; } h4 { font-size:1rem; }
p { margin:0 0 .9em; }
img, svg { max-width:100%; }
.ic { flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; vertical-align:-.22em; }
.zh { font-family:var(--font-zh); }
.muted { color:var(--muted); } .faint { color:var(--faint); } .small { font-size:.88rem; } .tiny { font-size:.78rem; }
.num { font-variant-numeric:lining-nums tabular-nums; }
:focus-visible { outline:2px solid var(--focus); outline-offset:2px; border-radius:4px; }
.skip { position:absolute; left:-999px; top:.5rem; background:var(--seal); color:var(--seal-ink); padding:.5rem 1rem; z-index:100; }
.skip:focus { left:.5rem; }
[hidden] { display:none !important; }
.wrap { max-width:var(--wrap); margin:0 auto; padding:0 1.1rem; }
.narrow { max-width:var(--narrow); margin-left:auto; margin-right:auto; }
main.wrap { padding-top:2.2rem; padding-bottom:3rem; min-height:64vh; }  /* .wrap alone would zero the vertical padding */
.stack { display:flex; flex-direction:column; gap:.6rem; } .row { display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; }
.grow { flex:1; min-width:0; } .right { margin-left:auto; }

/* ---------- seal mark and section headings */
.seal-mark { display:inline-grid; place-items:center; width:1.9rem; height:1.9rem; flex:none; background:var(--seal); color:var(--seal-ink); font:400 1.25rem/1 var(--font-brush); border-radius:3px; transform:rotate(-3deg); box-shadow:inset 0 0 0 2px rgba(255,255,255,.18); }
.seal-mark.sm { width:1.4rem; height:1.4rem; font-size:.95rem; }
.sec { display:flex; align-items:center; gap:.7rem; margin:2.4rem 0 .9rem; }
.sec h2 { margin:0; font-size:1.45rem; }
.sec::after { content:""; order:2; flex:1; height:6px; margin-left:.4rem; background:var(--line2); opacity:.5; -webkit-mask:url("../img/stroke.f93b024a3f79.svg") center/100% 100% no-repeat; mask:url("../img/stroke.f93b024a3f79.svg") center/100% 100% no-repeat; }
.sec .more { order:3; margin-left:.4rem; font-weight:600; font-size:.9rem; }
.brush-rule { height:8px; margin:2rem 0; background:var(--line2); opacity:.5; -webkit-mask:url("../img/stroke.f93b024a3f79.svg") center/100% 100% no-repeat; mask:url("../img/stroke.f93b024a3f79.svg") center/100% 100% no-repeat; }

/* ---------- header */
.top { position:sticky; top:0; z-index:40; background:color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter:blur(8px); border-bottom:1px solid var(--line2); box-shadow:0 3px 0 -2px var(--line); transition:transform .22s; }
.top .wrap { display:flex; align-items:center; gap:.7rem; height:3.7rem; }
.brand { display:flex; align-items:center; gap:.55rem; color:var(--ink); text-decoration:none !important; }
.brand .logo { width:2.35rem; height:2.35rem; display:block; flex:none; }
footer .brandline .logo { width:2.4rem; height:2.4rem; flex:none; }
.brand .word { font:700 1.4rem/1 var(--font-head); letter-spacing:.01em; }
.brand .word small { font:500 italic .95rem var(--font-head); color:var(--bronze); }
.nav { display:flex; gap:.1rem; margin-left:.4rem; }
.nav a { display:flex; align-items:center; gap:.4rem; padding:.4rem .7rem; border-radius:var(--radius); color:var(--muted); font-weight:600; font-size:.95rem; }
.nav a:hover, .nav a.on { color:var(--ink); background:var(--surface2); text-decoration:none; }
.nav a.on { box-shadow:inset 0 -2px var(--seal); border-radius:var(--radius) var(--radius) 0 0; }
.search { margin-left:auto; position:relative; flex:0 1 17rem; }
.search input { width:100%; padding:.45rem .8rem .45rem 2.2rem; border-radius:999px; background:var(--bg); border:1px solid var(--line2); color:var(--ink); }
.search > .ic { position:absolute; left:.8rem; top:50%; transform:translateY(-50%); color:var(--muted); pointer-events:none; }
.suggest { position:absolute; left:0; right:0; top:calc(100% + .35rem); background:var(--surface); border:1px solid var(--line2); border-radius:var(--radius); box-shadow:var(--shadow); z-index:50; overflow:hidden; min-width:20rem; }
.suggest a { display:flex; gap:.7rem; padding:.5rem .7rem; color:var(--ink); align-items:center; border-bottom:1px solid var(--line); }
.suggest a:hover { background:var(--surface2); text-decoration:none; }
.suggest .th { width:2.1rem; aspect-ratio:300/440; border-radius:2px; overflow:hidden; flex:none; }
.suggest .all { justify-content:center; color:var(--link); font-weight:600; border:0; }
.tools { display:flex; align-items:center; gap:.2rem; }
.icon-btn { position:relative; display:grid; place-items:center; width:2.4rem; height:2.4rem; border-radius:var(--radius); border:0; background:none; color:var(--muted); cursor:pointer; padding:0; }
.icon-btn:hover { color:var(--ink); background:var(--surface2); text-decoration:none; }
.badge { position:absolute; top:.1rem; right:.05rem; min-width:1.05rem; height:1.05rem; border-radius:999px; background:var(--seal); color:#fff; font-size:.68rem; font-weight:700; display:grid; place-items:center; padding:0 .25rem; }
details.menu { position:relative; } details.menu > summary { list-style:none; cursor:pointer; } details.menu > summary::-webkit-details-marker { display:none; }
.pop { position:absolute; right:0; top:2.9rem; min-width:13.5rem; background:var(--surface); border:1px solid var(--line2); border-radius:var(--radius); box-shadow:var(--shadow); padding:.35rem; z-index:60; }
.pop a, .pop button { display:flex; gap:.6rem; align-items:center; width:100%; text-align:left; padding:.5rem .65rem; border-radius:4px; color:var(--ink); background:none; border:0; font:inherit; cursor:pointer; justify-content:flex-start; }
.pop a:hover, .pop button:hover { background:var(--surface2); text-decoration:none; }
.pop hr { border:0; border-top:1px solid var(--line); margin:.3rem 0; }
.avatar { width:2rem; height:2rem; border-radius:50%; display:grid; place-items:center; background:var(--jade); color:#f8f3e5; font-weight:700; font-family:var(--font-head); flex:none; }
.avatar[data-c="1"] { background:#a82f27; } .avatar[data-c="2"] { background:#86641f; } .avatar[data-c="3"] { background:#3b4a6b; } .avatar[data-c="4"] { background:#6a4a6b; } .avatar[data-c="5"] { background:#4a4a44; }
.avatar.lg { width:4.4rem; height:4.4rem; font-size:2rem; }

.drawer-bg { position:fixed; inset:0; background:rgba(15,10,5,.5); z-index:70; opacity:0; pointer-events:none; transition:opacity .2s; }
.drawer { position:fixed; left:0; top:0; bottom:0; width:min(19rem,86vw); background:var(--surface); border-right:1px solid var(--line2); z-index:80; transform:translateX(-102%); transition:transform .22s; padding:1rem; overflow:auto; box-shadow:var(--shadow); }
body.drawer-open .drawer { transform:none; } body.drawer-open .drawer-bg { opacity:1; pointer-events:auto; }
.drawer h4 { font:700 .72rem var(--font-ui); text-transform:uppercase; letter-spacing:.14em; color:var(--faint); margin:1.2rem 0 .3rem; }
.drawer a { display:flex; gap:.7rem; align-items:center; padding:.55rem .6rem; border-radius:var(--radius); color:var(--ink); font-weight:600; }
.drawer a:hover { background:var(--surface2); text-decoration:none; }
@media (max-width:980px) { .nav { display:none; } .search { flex:1; } }
@media (min-width:981px) { .menu-btn { display:none; } }

/* ---------- buttons, forms, chips */
/* Buttons: paper and ink. A hairline ink frame, a 3px corner like the seal, no gradient, no gloss, no
   bevel. A primary button is a solid cinnabar block with a thin inner keyline, the way a seal is cut. */
.btn, button { white-space:nowrap; font:600 .92rem var(--font-ui); letter-spacing:.02em; display:inline-flex; align-items:center; justify-content:center; gap:.5rem; min-height:2.5rem; padding:0 1.2rem; border-radius:3px; border:1px solid color-mix(in srgb, var(--ink) 58%, transparent); background:transparent; color:var(--ink); cursor:pointer; text-decoration:none !important; line-height:1.2; position:relative; transition:background-color .15s, border-color .15s, color .15s; }
.btn:hover, button:hover { background:color-mix(in srgb, var(--ink) 8%, transparent); border-color:var(--ink); }
.btn:active, button:active { background:color-mix(in srgb, var(--ink) 15%, transparent); }
.btn:focus-visible, button:focus-visible { outline:2px solid var(--seal); outline-offset:2px; }
.btn.primary, button.primary, .btn.jade, button.danger, .btn.danger { border-color:transparent; color:var(--seal-ink); }
.btn.primary::after, button.primary::after, .btn.jade::after, button.danger::after, .btn.danger::after { content:""; position:absolute; inset:3px; border:1px solid color-mix(in srgb, var(--seal-ink) 40%, transparent); border-radius:1px; pointer-events:none; }
.btn.primary, button.primary { background:var(--seal); }
.btn.primary:hover, button.primary:hover { background:color-mix(in srgb, var(--seal) 84%, #000); border-color:transparent; }
.btn.primary:active, button.primary:active { background:color-mix(in srgb, var(--seal) 72%, #000); }
.btn.jade { background:var(--jade); }
.btn.jade:hover { background:color-mix(in srgb, var(--jade) 84%, #000); border-color:transparent; }
.btn.jade:active { background:color-mix(in srgb, var(--jade) 72%, #000); }
[data-theme="night"] .btn.primary, [data-theme="night"] button.primary, [data-theme="night"] .btn.jade, [data-theme="black"] .btn.primary, [data-theme="black"] button.primary, [data-theme="black"] .btn.jade { color:#14100b; }
[data-theme="night"] .btn.primary::after, [data-theme="night"] button.primary::after, [data-theme="night"] .btn.jade::after, [data-theme="black"] .btn.primary::after, [data-theme="black"] button.primary::after, [data-theme="black"] .btn.jade::after { border-color:rgba(20,16,11,.4); }
.btn.ghost, button.ghost { border-color:transparent; }
.btn.ghost:hover, button.ghost:hover { border-color:color-mix(in srgb, var(--ink) 40%, transparent); }
.btn.sm, button.sm { min-height:2.05rem; padding:0 .9rem; font-size:.85rem; gap:.4rem; }
.btn.sm.primary::after, button.sm.primary::after { inset:2px; }
.btn.lg { min-height:3rem; padding:0 1.7rem; font-size:1rem; }
.btn.block { width:100%; }
button.danger, .btn.danger { background:#8f2a20; }
button.danger:hover, .btn.danger:hover { background:#762119; border-color:transparent; }
button:disabled, .btn[disabled] { opacity:.45; cursor:not-allowed; }
button.link, .btn.link, button.plain, .tabs a, .tabs button, .seg a, .seg button, .icon-btn, .pop a, .pop button, .pbtn, .swatch, .rtools button, .rtools a, .sheet h3 button, .dd-menu a, .dd-menu button, .side-nav a, .side-nav button { min-height:0; box-shadow:none; transform:none; text-shadow:none; }
button.link, .btn.link { background:none; border:0; color:var(--link); padding:0; font-weight:600; border-radius:0; }
button.plain { background:none; border:0; padding:0; }
input, textarea, select { font:inherit; color:var(--ink); background:var(--surface); border:1px solid var(--line2); border-radius:3px; padding:.55rem .8rem; min-height:2.5rem; max-width:100%; box-shadow:none; transition:border-color .15s, box-shadow .15s; }
input:hover, textarea:hover, select:hover { border-color:var(--bronze); }
input:focus, textarea:focus, select:focus { outline:none; border-color:var(--bronze); box-shadow:0 0 0 3px color-mix(in srgb, var(--bronze) 28%, transparent); }
select { appearance:none; -webkit-appearance:none; padding-right:2.3rem; cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236a604c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right .7rem center; }
[data-theme="night"] select, [data-theme="black"] select { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a39982' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
textarea { width:100%; resize:vertical; line-height:1.5; min-height:0; }
input[type=range] { -webkit-appearance:none; appearance:none; padding:0; min-height:0; height:1.2rem; box-shadow:none; border:0; background:none; cursor:pointer; }
input[type=range]::-webkit-slider-runnable-track { height:3px; background:var(--line2); border-radius:2px; }
input[type=range]::-moz-range-track { height:3px; background:var(--line2); border-radius:2px; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:1rem; height:1rem; margin-top:-6.5px; border-radius:50%; background:var(--ink); border:2px solid var(--surface); box-shadow:0 0 0 1px var(--ink); }
input[type=range]::-moz-range-thumb { width:.8rem; height:.8rem; border-radius:50%; background:var(--ink); border:2px solid var(--surface); box-shadow:0 0 0 1px var(--ink); }
input[type=range]:focus-visible { outline:2px solid var(--focus); outline-offset:3px; }
/* checkboxes, radios and sliders drawn by the site; no browser defaults */
input[type=checkbox]:not(.switch), input[type=radio] { appearance:none; -webkit-appearance:none; flex:none; width:1.1rem; height:1.1rem; min-height:0; padding:0; margin:0; border:1.5px solid var(--line2); border-radius:3px; background:var(--surface); display:inline-grid; place-items:center; vertical-align:-.2em; cursor:pointer; box-shadow:none; transition:border-color .12s, background-color .12s; }
input[type=radio] { border-radius:50%; }
input[type=checkbox]:not(.switch):hover, input[type=radio]:hover { border-color:var(--bronze); }
input[type=checkbox]:not(.switch):focus-visible, input[type=radio]:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
input[type=checkbox]:not(.switch):checked { background:var(--ink); border-color:var(--ink); }
input[type=checkbox]:not(.switch):checked::after { content:""; width:.3rem; height:.6rem; border:solid var(--surface); border-width:0 2px 2px 0; transform:rotate(45deg) translate(-1px,-1px); }
input[type=radio]:checked { border-color:var(--ink); }
input[type=radio]:checked::after { content:""; width:.5rem; height:.5rem; border-radius:50%; background:var(--ink); }
input[type=checkbox]:disabled, input[type=radio]:disabled { opacity:.5; cursor:not-allowed; }
label.inline { display:inline-flex; align-items:center; gap:.5rem; cursor:pointer; }
input[type=number] { -moz-appearance:textfield; appearance:textfield; } input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }
label { display:block; font-weight:600; font-size:.88rem; margin:.7rem 0 .25rem; } label.inline { display:inline-flex; gap:.5rem; align-items:center; font-weight:400; margin:0; }
form.stack label { margin:0; }
.opts { display:grid; gap:.1rem; }
.opt { display:flex; align-items:center; gap:.65rem; padding:.38rem .55rem; border-radius:6px; cursor:pointer; font-weight:500; font-size:.92rem; margin:0; color:var(--ink); }
.opt:hover { background:var(--surface2); text-decoration:none; }
.opt input { appearance:none; -webkit-appearance:none; flex:none; width:1.05rem; height:1.05rem; border:1.5px solid var(--line2); border-radius:50%; display:grid; place-items:center; background:var(--surface); margin:0; cursor:pointer; box-shadow:none; }
.opt input[type=checkbox] { border-radius:4px; }
.opt input:checked { border-color:var(--seal); }
.opt input[type=radio]:checked::after { content:""; width:.5rem; height:.5rem; border-radius:50%; background:var(--seal); }
.opt input[type=checkbox]:checked { background:var(--seal); }
.opt input[type=checkbox]:checked::after { content:""; width:.28rem; height:.55rem; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg) translate(-1px,-1px); }
.opt:has(input:checked) { background:color-mix(in srgb, var(--seal) 8%, transparent); }
.opt .n { margin-left:auto; color:var(--faint); font-size:.8rem; }
.switch { appearance:none; -webkit-appearance:none; flex:none; width:2.6rem; height:1.5rem; min-height:0; margin:0; border-radius:99px; background:var(--line2); border:0; position:relative; cursor:pointer; transition:background .15s; padding:0; box-shadow:none; }
.switch::after { content:""; position:absolute; top:3px; left:3px; width:1.15rem; height:1.15rem; border-radius:50%; background:var(--surface); box-shadow:0 1px 2px rgba(0,0,0,.3); transition:transform .15s; }
.switch:checked { background:var(--jade); } .switch:checked::after { transform:translateX(1.1rem); }
.setting { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.8rem 0; border-bottom:1px solid var(--line); margin:0; font-weight:400; cursor:pointer; font-size:1rem; }
.setting:last-child { border-bottom:0; } .setting small { display:block; color:var(--muted); font-size:.85rem; }
details.dd { position:relative; display:inline-block; } details.dd > summary { list-style:none; cursor:pointer; } details.dd > summary::-webkit-details-marker { display:none; }
.dd-menu { position:absolute; right:0; top:calc(100% + .4rem); min-width:15rem; background:var(--surface); border:1px solid var(--line2); border-radius:10px; box-shadow:0 12px 30px rgba(40,25,5,.22); padding:.35rem; z-index:55; }
.dd-menu.left { right:auto; left:0; }
.dd-menu a, .dd-menu button { display:flex; align-items:center; gap:.6rem; width:100%; padding:.5rem .65rem; border-radius:6px; color:var(--ink); background:none; border:0; font:500 .92rem var(--font-ui); text-align:left; cursor:pointer; justify-content:flex-start; }
.dd-menu a:hover, .dd-menu button:hover { background:var(--surface2); text-decoration:none; }
.dd-menu .on { font-weight:700; } .dd-menu .on .ic:last-child { margin-left:auto; color:var(--seal); }
.dd-menu h5 { margin:.5rem .65rem .2rem; font:700 .68rem var(--font-ui); letter-spacing:.14em; text-transform:uppercase; color:var(--faint); }
.dd-menu hr { border:0; border-top:1px solid var(--line); margin:.3rem 0; }
.dd-menu form { margin:0; }
.errorlist { list-style:none; padding:0; color:var(--seal); margin:.2rem 0; font-size:.9rem; }
.helptext { color:var(--muted); font-size:.85rem; }
.msg { padding:.7rem 1rem; border-radius:var(--radius); background:var(--surface); border:1px solid var(--line2); border-left:4px solid var(--bronze); margin-bottom:.8rem; }
.msg.error { border-left-color:var(--seal); } .msg.success { border-left-color:var(--jade); }
.tag { display:inline-flex; align-items:center; gap:.4rem; padding:.12rem .6rem; border:1px solid var(--line2); border-radius:4px; font-size:.8rem; color:var(--muted); background:transparent; line-height:1.55; font-weight:500; }
a.tag:hover { color:var(--ink); border-color:var(--bronze); text-decoration:none; }
.tag.genre { color:var(--jade); border-color:color-mix(in srgb, var(--jade) 55%, var(--line2)); background:color-mix(in srgb, var(--jade) 9%, transparent); }
.tag.in { background:var(--jade); color:var(--surface); border-color:var(--jade); }
.tag.ex { background:var(--seal); color:var(--seal-ink); border-color:var(--seal); text-decoration:line-through; }
.tag .n { opacity:.65; font-size:.74rem; }
.chips { display:flex; flex-wrap:wrap; gap:.4rem; }
.panel { background:var(--surface); border:1px solid var(--line2); border-radius:var(--radius); padding:1.1rem 1.25rem; box-shadow:var(--shadow); }
.panel > h3:first-child { margin-top:0; }
.empty { color:var(--muted); padding:1rem 0; font-style:italic; }
code, pre { font-family:ui-monospace, Consolas, monospace; font-size:.86rem; }
code { background:var(--surface2); padding:.1rem .35rem; border-radius:4px; } pre { background:var(--surface2); border:1px solid var(--line); border-radius:var(--radius); padding:.8rem 1rem; overflow-x:auto; } pre code { background:none; padding:0; }
details > summary { cursor:pointer; font-weight:600; } details[open] > summary { margin-bottom:.5rem; }
.table { width:100%; border-collapse:collapse; } .table td, .table th { padding:.55rem .5rem; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
.table th { color:var(--faint); font:700 .72rem var(--font-ui); text-transform:uppercase; letter-spacing:.1em; white-space:nowrap; }
.table.kv th { width:9.5rem; }

/* ---------- hero (home): typography only, no illustration */
.hero { display:grid; grid-template-columns:minmax(0,1fr) 15rem; gap:2.5rem; align-items:end; padding:2.2rem 0 1.8rem; border-bottom:1px solid var(--line2); position:relative; }
.hero::after { content:""; position:absolute; left:0; bottom:-5px; width:6rem; height:3px; background:var(--seal); }
.eyebrow { font:700 .74rem var(--font-ui); letter-spacing:.2em; text-transform:uppercase; color:var(--bronze); margin:0 0 .9rem; display:flex; align-items:center; gap:.6rem; }
.hero h1 { font-size:clamp(2.2rem,5vw,3.6rem); line-height:1.05; margin-bottom:.45em; letter-spacing:-.01em; text-wrap:balance; }
.hero h1 em { font-style:italic; font-weight:500; color:var(--seal); }
.hero p.lead { max-width:34rem; font-size:1.08rem; color:var(--muted); margin-bottom:1.3rem; }
.ledger { margin:0; display:grid; gap:.1rem; }
.ledger div { display:flex; justify-content:space-between; align-items:baseline; padding:.45rem 0; border-bottom:1px dashed var(--line2); }
.ledger dt { color:var(--muted); font-size:.9rem; } .ledger dd { margin:0; font:700 1.7rem/1 var(--font-head); font-variant-numeric:lining-nums; color:var(--ink); }
@media (max-width:760px) { .hero { grid-template-columns:minmax(0,1fr); gap:1.2rem; } .ledger { grid-template-columns:repeat(3,1fr); gap:1rem; } .ledger div { flex-direction:column; border:0; } }

/* ---------- novel cards, rails, grids */
.rail { display:flex; gap:1rem; overflow-x:auto; scroll-snap-type:x proximity; padding:.2rem .1rem 1rem; scrollbar-width:thin; margin-inline:-.1rem; }
.rail > * { flex:0 0 9.6rem; scroll-snap-align:start; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(9.6rem,1fr)); gap:1.3rem 1rem; }
.nc { display:flex; flex-direction:column; color:var(--ink); text-decoration:none !important; min-width:0; }
.nc .art { position:relative; aspect-ratio:300/440; border-radius:3px; overflow:hidden; border:1px solid var(--line2); box-shadow:0 5px 12px rgba(40,25,5,.22); transition:transform .2s, box-shadow .2s; background:var(--surface2); }
.nc:hover .art { transform:translateY(-3px) rotate(-.4deg); box-shadow:0 11px 20px rgba(40,25,5,.3); }
.cover { display:block; width:100%; height:100%; object-fit:cover; }
.cover.ph { display:grid; place-items:center; background:var(--surface2); box-shadow:inset 0 0 0 6px var(--surface2), inset 0 0 0 7px var(--line2); }
.cover.ph .zh { writing-mode:vertical-rl; font-size:1.5rem; font-weight:700; color:var(--muted); letter-spacing:.2em; max-height:80%; }
.nc .pill { position:absolute; left:.4rem; top:.4rem; background:rgba(26,20,12,.78); color:#f4ead2; font-size:.7rem; font-weight:700; padding:.1rem .45rem; border-radius:3px; }
.nc .pill.en { left:auto; right:.4rem; background:var(--jade); color:#fff; }
.nc .prog { position:absolute; left:0; right:0; bottom:0; height:4px; background:rgba(0,0,0,.25); } .nc .prog b { display:block; height:100%; background:var(--bronze); }
.nc .ttl { margin-top:.5rem; font:600 .98rem/1.25 var(--font-head); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.nc .meta { color:var(--muted); font-size:.78rem; margin-top:.1rem; display:flex; justify-content:space-between; gap:.4rem; }
.nc .meta .zh { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.star { color:var(--bronze); }

/* ---------- layout blocks */
.cols2 { display:grid; grid-template-columns:minmax(0,1fr) 20rem; gap:1.8rem; align-items:start; }
@media (max-width:980px) { .cols2 { grid-template-columns:minmax(0,1fr); } }
.tabs { display:flex; gap:.15rem; border-bottom:1px solid var(--line2); margin-bottom:.9rem; overflow-x:auto; scrollbar-width:none; }
.tabs a, .tabs button { padding:.55rem .95rem; color:var(--muted); font-weight:600; border:0; border-bottom:2px solid transparent; border-radius:0; background:none; margin-bottom:-1px; white-space:nowrap; }
.tabs a:hover, .tabs button:hover { color:var(--ink); background:none; text-decoration:none; }
.tabs .on { color:var(--ink); border-bottom-color:var(--seal); }
.seg { display:inline-flex; border:1px solid var(--line2); border-radius:var(--radius); overflow:hidden; background:var(--surface); }
.seg a, .seg button { border:0; border-radius:0; padding:.35rem .8rem; background:transparent; color:var(--muted); font-size:.88rem; white-space:nowrap; }
.seg a:hover, .seg button:hover { background:var(--surface2); text-decoration:none; }
.seg .on { background:var(--ink); color:var(--surface); }
.seg a + a, .seg button + button { border-left:1px solid var(--line2); }
.pager { display:flex; gap:.5rem; justify-content:center; align-items:center; margin:1.6rem 0; color:var(--muted); flex-wrap:wrap; }

/* rankings */
.rk { list-style:none; margin:0; padding:0; }
.rk li { display:grid; grid-template-columns:2rem 3rem minmax(0,1fr); gap:.75rem; align-items:center; padding:.55rem 0; border-bottom:1px dashed var(--line2); }
.rk li:last-child { border:0; }
.rk .n { font:700 1.7rem/1 var(--font-head); color:var(--bronze); text-align:center; font-variant-numeric:lining-nums; }
.rk li:nth-child(-n+3) .n { color:var(--seal); }
.rk .th { width:3rem; aspect-ratio:300/440; border-radius:2px; overflow:hidden; border:1px solid var(--line2); }
.rk a.t { color:var(--ink); font:600 1rem/1.25 var(--font-head); display:block; } .rk .m { color:var(--muted); font-size:.8rem; }
.rk.wide li { grid-template-columns:2.6rem 3.4rem minmax(0,1fr) auto; }
.feed { display:grid; gap:.5rem; }
.feed > a, .feed > div { display:flex; gap:.8rem; align-items:center; padding:.55rem .8rem; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); color:var(--ink); }
.feed > a:hover { border-color:var(--bronze); text-decoration:none; }
.feed .th { width:2.3rem; aspect-ratio:300/440; border-radius:2px; overflow:hidden; flex:none; border:1px solid var(--line2); }
.updates { display:grid; gap:0; border:1px solid var(--line2); border-radius:var(--radius); background:var(--surface); overflow:hidden; }
.updates a { display:grid; grid-template-columns:2.6rem minmax(0,1fr) auto; gap:.8rem; align-items:center; padding:.6rem .8rem; border-bottom:1px solid var(--line); color:var(--ink); }
.updates a:last-child { border:0; } .updates a:hover { background:var(--surface2); text-decoration:none; }
.updates .th { width:2.6rem; aspect-ratio:300/440; border-radius:2px; overflow:hidden; border:1px solid var(--line2); }
.updates .t { font:600 1.02rem var(--font-head); display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cta-scroll { position:relative; overflow:hidden; background:var(--surface); border:1px solid var(--line2); border-radius:var(--radius); padding:1.6rem 1.6rem; box-shadow:var(--shadow); }
.cta-scroll::before, .cta-scroll::after { content:""; position:absolute; left:0; right:0; height:5px; background:repeating-linear-gradient(90deg,var(--line2) 0 10px,transparent 10px 16px); opacity:.6; }
.cta-scroll::before { top:6px; } .cta-scroll::after { bottom:6px; }
.kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr)); gap:.7rem; margin:1rem 0; }
.kpi { background:var(--surface); border:1px solid var(--line2); border-radius:var(--radius); padding:.7rem .9rem; }
.kpi b { display:block; font:700 1.8rem/1.1 var(--font-head); color:var(--bronze); font-variant-numeric:lining-nums; } .kpi span { color:var(--muted); font-size:.82rem; }

/* ---------- browse */
.browse { display:grid; grid-template-columns:16rem minmax(0,1fr); gap:1.6rem; align-items:start; }
@media (max-width:860px) { .browse { grid-template-columns:minmax(0,1fr); } }
.filters { position:sticky; top:4.6rem; max-height:calc(100vh - 5.4rem); overflow:auto; }
@media (max-width:860px) { .filters { position:static; max-height:none; } }
.filters h4 { margin:1.1rem 0 .4rem; font:700 .72rem var(--font-ui); text-transform:uppercase; letter-spacing:.14em; color:var(--faint); }
.filters label { margin:.35rem 0 .15rem; } .filters select { width:100%; }
.activebar { display:flex; gap:.4rem; flex-wrap:wrap; margin:.4rem 0 1rem; align-items:center; }
.chip-x { display:inline-flex; gap:.4rem; align-items:center; padding:.18rem .6rem; border-radius:4px; font-size:.82rem; background:var(--surface2); border:1px solid var(--line2); color:var(--ink); font-weight:500; }
.chip-x.in { border-color:var(--jade); } .chip-x.ex { border-color:var(--seal); }
.chip-x:hover { text-decoration:none; border-color:var(--bronze); }

/* ---------- novel page */
.nhead { display:grid; grid-template-columns:10.5rem minmax(0,1fr); gap:1.4rem; }
@media (max-width:620px) { .nhead { grid-template-columns:7.2rem 1fr; gap:.9rem; } }
.nhead .art { border:1px solid var(--line2); border-radius:3px; overflow:hidden; box-shadow:0 8px 18px rgba(40,25,5,.28); aspect-ratio:300/440; align-self:start; }
.nhead h1 { font-size:clamp(1.6rem,3vw,2.2rem); margin-bottom:.15em; }
.orig { font:400 1.1rem var(--font-zh); color:var(--muted); }
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(5.6rem,1fr)); gap:.5rem; margin:.9rem 0; }
.stat { background:var(--surface); border:1px solid var(--line2); border-radius:var(--radius); padding:.3rem .6rem; text-align:center; }
.stat span { display:block; font:700 .66rem var(--font-ui); letter-spacing:.12em; text-transform:uppercase; color:var(--faint); }
.stat b { font:700 1.1rem var(--font-head); font-variant-numeric:lining-nums; }
.bar { height:8px; background:var(--surface2); border:1px solid var(--line); border-radius:99px; overflow:hidden; } .bar > i { display:block; height:100%; background:linear-gradient(90deg,var(--jade),var(--bronze)); }
.clamp-text { position:relative; overflow:hidden; max-height:7.2em; } .clamp-text.open { max-height:none; }
.clamp-text:not(.open)::after { content:""; position:absolute; inset:auto 0 0; height:2.4em; background:linear-gradient(transparent,var(--bg)); }
.chapters { list-style:none; padding:0; margin:0; }
.chapters li { border-bottom:1px solid var(--line); }
.chapters a { display:grid; grid-template-columns:3.2rem minmax(0,1fr) auto; gap:.6rem; padding:.55rem .3rem; color:var(--ink); align-items:center; }
.chapters a:hover { background:var(--surface); text-decoration:none; }
.chapters .no { color:var(--bronze); font:700 1.05rem var(--font-head); text-align:right; font-variant-numeric:lining-nums; }
.chapters .ti { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chapters .ti .zh { color:var(--muted); font-size:.9rem; margin-left:.5rem; }
.chapters .flags { display:flex; gap:.35rem; align-items:center; color:var(--faint); }
.lang { font:700 .66rem var(--font-ui); letter-spacing:.06em; border:1px solid var(--line2); border-radius:3px; padding:0 .3rem; color:var(--faint); }
.lang.en { color:var(--jade); border-color:var(--jade); }
.chapters li.read a { opacity:.55; }
.chapters li a[aria-current] { opacity:1; box-shadow:inset 3px 0 var(--seal); }
.histo { display:grid; gap:.3rem; }
.histo div { display:grid; grid-template-columns:1.4rem 1fr 2.2rem; gap:.5rem; align-items:center; font-size:.85rem; color:var(--muted); }
.histo .bar { height:7px; } .histo i { background:var(--bronze) !important; }
.review { padding:1rem 0; border-bottom:1px solid var(--line); }
.who { display:flex; gap:.5rem; align-items:baseline; flex-wrap:wrap; } .who b { font-weight:700; }
.spoiler-box { filter:blur(6px); cursor:pointer; user-select:none; transition:filter .2s; } .spoiler-box.show { filter:none; user-select:auto; }
.spoiler-tag { font:700 .66rem var(--font-ui); text-transform:uppercase; letter-spacing:.1em; color:var(--seal); border:1px solid var(--seal); border-radius:3px; padding:0 .3rem; }
.comment { margin:.9rem 0 .9rem .1rem; padding-left:.9rem; border-left:2px solid var(--line2); }
.comment p { margin:.25rem 0; }
.comment .acts { display:flex; gap:.9rem; align-items:center; flex-wrap:wrap; font-size:.85rem; color:var(--muted); }
.comment .acts details { display:inline; } .comment .acts summary { color:var(--muted); font-weight:600; font-size:.85rem; }

/* ---------- library */
.statuses { display:flex; gap:.3rem; flex-wrap:wrap; margin-bottom:.8rem; }
.statuses a { padding:.3rem .8rem; border-radius:6px; border:1px solid var(--line2); color:var(--muted); font-weight:600; font-size:.88rem; background:var(--surface); }
.statuses a.on { background:var(--ink); color:var(--surface); border-color:var(--ink); } .statuses a:hover { text-decoration:none; border-color:var(--bronze); }
.statuses .n { opacity:.6; margin-left:.25rem; }
.lib-row { display:grid; grid-template-columns:3.6rem minmax(0,1fr) auto; gap:.9rem; align-items:center; padding:.7rem .2rem; border-bottom:1px solid var(--line); }
.lib-row .th { width:3.6rem; aspect-ratio:300/440; border-radius:2px; overflow:hidden; border:1px solid var(--line2); }
.new-badge { background:var(--seal); color:#fff; font:700 .7rem var(--font-ui); padding:.05rem .4rem; border-radius:3px; }
.libbtn { position:relative; display:inline-block; }
.libbtn .pop { left:0; right:auto; top:2.9rem; }

/* ---------- reader */
body.reading { --r-size:1.2rem; --r-width:41rem; --r-lh:1.85; --r-pspace:1.05; --r-font:var(--font-read); --r-bg:transparent; --r-fg:var(--ink); --r-align:left; --r-indent:0em; }
body[data-rt="paper"] { --r-bg:#f5efdf; --r-fg:#23201a; } body[data-rt="sepia"] { --r-bg:#e9d9b6; --r-fg:#3b2f1b; }
body[data-rt="night"] { --r-bg:#16130f; --r-fg:#d8d0bd; } body[data-rt="black"] { --r-bg:#000; --r-fg:#bdb6a4; }
.rbar { position:sticky; top:3.7rem; z-index:35; background:color-mix(in srgb, var(--surface) 95%, transparent); backdrop-filter:blur(8px); border-bottom:1px solid var(--line2); transition:transform .22s; }
body.immersive .top { transform:translateY(-120%); } body.immersive .rbar { transform:translateY(calc(-100% - 4.5rem)); }
.rbar .wrap { display:flex; align-items:center; gap:.5rem; padding-block:.35rem; flex-wrap:wrap; }
.rbar .crumb { font-weight:700; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; font-family:var(--font-head); }
.rbar .crumb a { color:var(--ink); } .rbar .pct { font-size:.8rem; color:var(--muted); min-width:2.6rem; text-align:right; }
.progress-line { position:fixed; left:0; top:0; height:3px; background:var(--seal); z-index:90; width:0; }
.readwrap { background:var(--r-bg); color:var(--r-fg); border-radius:var(--radius); padding:1rem 1.2rem 1.4rem; }
body[data-rt="site"] .readwrap, body:not([data-rt]) .readwrap, body.reading:not(.settings-page) .readwrap { background:transparent; color:var(--ink); padding-inline:0; }
.chead { text-align:center; margin:.6rem auto 1.2rem; max-width:var(--r-width); }
.chead .no { font:400 .95rem var(--font-ui); letter-spacing:.22em; text-transform:uppercase; color:var(--bronze); }
.chead h1 { font-size:clamp(1.5rem,3vw,2.1rem); margin:.15em 0 .1em; color:inherit; } .chead .zh-title { color:var(--muted); font-family:var(--font-zh); }
.chead::after { content:""; display:block; height:8px; width:9rem; margin:.9rem auto 0; background:var(--line2); -webkit-mask:url("../img/stroke.f93b024a3f79.svg") center/100% 100% no-repeat; mask:url("../img/stroke.f93b024a3f79.svg") center/100% 100% no-repeat; }
.reader { max-width:var(--r-width); margin:0 auto; font:var(--r-size)/var(--r-lh) var(--r-font); text-align:var(--r-align); hyphens:auto; }
.reader p { margin:0 0 calc(var(--r-pspace) * 1em); text-wrap:pretty; text-indent:var(--r-indent); position:relative; border-radius:3px; scroll-margin-top:7rem; }
.reader.zh-text { font-family:var(--font-zh); } body[data-font="kai"] .reader.zh-text { font-family:var(--font-kai); }
.reader p.mark { box-shadow:inset 3px 0 0 var(--seal); padding-left:.7rem; margin-left:-.7rem; }
.reader p.speaking { background:color-mix(in srgb, var(--bronze) 22%, transparent); box-shadow:0 0 0 .35rem color-mix(in srgb, var(--bronze) 22%, transparent); }
.reader p .pbtn { position:absolute; left:-2.4rem; top:.05em; width:1.9rem; height:1.9rem; display:grid; place-items:center; border-radius:6px; background:none; border:0; color:var(--faint); cursor:pointer; padding:0; opacity:0; transition:opacity .15s; }
.reader p:hover .pbtn, .reader p:focus-within .pbtn, .reader p.mark .pbtn { opacity:1; } .reader p .pbtn:hover { color:var(--seal); background:var(--surface2); } .reader p.mark .pbtn { color:var(--seal); }
@media (max-width:900px) { .reader p .pbtn { left:auto; right:-.3rem; top:-1.2rem; opacity:.7; } }
.pair { margin-bottom:calc(var(--r-pspace) * 1em); } .pair p { margin:0; } .pair .zh { color:var(--muted); font-size:.88em; margin-top:.15em; }
.reader-cols { display:grid; grid-template-columns:1fr 1fr; gap:2.4rem; max-width:80rem; margin-inline:auto; } .reader-cols .reader { margin-inline:0; }
@media (max-width:860px) { .reader-cols { grid-template-columns:minmax(0,1fr); } }
body[data-focus="1"] .reader p:not(.speaking):not(:hover) { opacity:.45; }
.mt-note { max-width:var(--r-width); margin:0 auto 1rem; font-size:.84rem; color:var(--muted); display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; justify-content:center; }
.mt-note b { color:var(--bronze); font-weight:700; letter-spacing:.08em; text-transform:uppercase; font-size:.68rem; border:1px solid var(--bronze); border-radius:3px; padding:.05rem .4rem; }
.votes { display:inline-flex; align-items:center; gap:.3rem; } .votes button { padding:.1rem .5rem; } .votes button.on { background:var(--jade); color:var(--surface); border-color:var(--jade); }
.chapnav { display:grid; grid-template-columns:1fr auto 1fr; gap:.8rem; max-width:var(--r-width); margin:1.8rem auto 0; align-items:center; }
.chapnav a:first-child { justify-self:start; } .chapnav a:last-child { justify-self:end; }
.end-mark { text-align:center; color:var(--faint); letter-spacing:.8em; margin:1.4rem 0 .2rem; font:400 1.2rem var(--font-brush); }
.sheet-bg { position:fixed; inset:0; z-index:95; background:rgba(15,10,5,.28); }
.sheet { position:fixed; left:50%; bottom:4.9rem; transform:translateX(-50%); width:min(48rem,calc(100vw - 1.2rem)); max-height:min(62vh,34rem); background:var(--surface); border:1px solid var(--line2); border-radius:14px; z-index:96; padding:1rem 1.4rem 1.2rem; overflow:auto; box-shadow:0 -4px 40px rgba(30,18,5,.32); animation:sheet-up .18s ease-out; }
@keyframes sheet-up { from { opacity:0; transform:translate(-50%,14px); } }
.sheet h3 { display:flex; align-items:center; gap:.5rem; margin:0 0 .6rem; font-size:1.15rem; } .sheet h3 .icon-btn { margin-left:auto; }
.sheet h4 { margin:1rem 0 .4rem; font:700 .7rem var(--font-ui); text-transform:uppercase; letter-spacing:.14em; color:var(--faint); display:flex; justify-content:space-between; }
.sheet .cols { display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:0 2rem; }
.sheet .seg { width:100%; } .sheet .seg button { flex:1; }
.sheet input[type=range] { width:100%; }
.swatches { display:grid; grid-template-columns:repeat(5,1fr); gap:.4rem; }
.swatch { height:2.6rem; border-radius:var(--radius); border:2px solid var(--line2); padding:0; font:700 .7rem var(--font-ui); }
.swatch.on { border-color:var(--seal); box-shadow:0 0 0 2px var(--seal); }
.sheet .rowb { display:flex; justify-content:space-between; align-items:center; gap:.6rem; padding:.4rem 0; margin:0; font-weight:400; font-size:.95rem; }
.sheet textarea { font-family:ui-monospace, Consolas, monospace; font-size:.85rem; }
.rtools { position:fixed; bottom:.9rem; left:50%; transform:translateX(-50%); z-index:97; display:none; background:var(--surface); border:1px solid var(--line2); border-radius:14px; box-shadow:0 6px 24px rgba(30,18,5,.28); padding:.3rem; gap:.15rem; transition:transform .22s, opacity .2s; }
body.reading .rtools { display:flex; } body.immersive .rtools { opacity:.92; }
.rtools button, .rtools a { border:0; background:none; width:2.9rem; height:2.9rem; border-radius:10px; display:grid; place-items:center; padding:0; color:var(--ink); position:relative; }
.rtools .sep { width:1px; background:var(--line2); margin:.5rem .2rem; }
.rtools button[data-label]:hover::after, .rtools a[data-label]:hover::after { content:attr(data-label); position:absolute; bottom:calc(100% + .55rem); left:50%; transform:translateX(-50%); background:var(--ink); color:var(--surface); font:600 .75rem var(--font-ui); padding:.2rem .55rem; border-radius:5px; white-space:nowrap; pointer-events:none; }
.rtools button:hover, .rtools a:hover { background:var(--surface2); text-decoration:none; } .rtools .on { background:var(--seal); color:var(--seal-ink); }
.toast { position:fixed; bottom:5rem; left:50%; transform:translateX(-50%); background:var(--ink); color:var(--surface); padding:.55rem 1rem; border-radius:var(--radius); z-index:120; font-size:.9rem; box-shadow:var(--shadow); }
.ttsbar { position:fixed; left:50%; bottom:4.9rem; transform:translateX(-50%); z-index:96; background:var(--surface); border:1px solid var(--line2); border-radius:14px; padding:.55rem .9rem; display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; justify-content:center; box-shadow:0 6px 24px rgba(30,18,5,.28); }

/* ---------- footer, auth, pages */
footer { border-top:1px solid var(--line2); margin-top:3rem; padding:2rem 0 3rem; color:var(--muted); font-size:.92rem; background:var(--bg2); }
footer .wrap { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:2rem; }
@media (max-width:760px) { footer .wrap { grid-template-columns:minmax(0,1fr); } }
footer .brandline { display:flex; gap:.8rem; align-items:flex-start; } footer nav { display:flex; flex-wrap:wrap; gap:.5rem 1.2rem; justify-content:flex-end; } footer nav a { color:var(--muted); } footer nav a:hover { color:var(--ink); }
footer .copy { grid-column:1/-1; border-top:1px solid var(--line); padding-top:1rem; font-size:.82rem; color:var(--faint); }
main.auth { max-width:27rem; padding-top:3rem; }
main.auth h1 { font-size:2rem; } main.auth form p { margin:.7rem 0; } main.auth form label { display:block; }
main.auth form input:not([type=checkbox]) { width:100%; } main.auth form button, main.auth .btn { width:100%; margin-top:.4rem; }
main.auth ul { padding-left:1.1rem; } main.auth .social { margin-top:1rem; }
.prose { max-width:42rem; } .prose h2 { margin-top:1.8rem; } .prose li { margin-bottom:.35rem; }
.notfound { text-align:center; padding:3rem 0; } .notfound .big { font:400 9rem/1 var(--font-brush); color:var(--seal); opacity:.9; }
.lb-bar { display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; }
@media (prefers-reduced-motion: reduce) { * { transition:none !important; animation:none !important; } }
@media print { .top, footer, .rbar, .rtools, .comments { display:none; } }


.grid > .empty, .rail > .empty { grid-column:1/-1; }
.panel .tabs a, .panel .tabs button { padding-inline:.6rem; }

/* ---------- list page and filters */
.list-head { display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; margin-bottom:1.2rem; flex-wrap:wrap; }
.filters { background:var(--surface); border:1px solid var(--line2); border-radius:12px; padding:.4rem .6rem .8rem; box-shadow:var(--shadow); }
.fgroup { border-bottom:1px solid var(--line); padding:.3rem 0 .5rem; } .fgroup:last-of-type { border-bottom:0; }
.fgroup > summary { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; padding:.5rem .55rem; font:700 .72rem var(--font-ui); letter-spacing:.14em; text-transform:uppercase; color:var(--faint); }
.fgroup > summary::-webkit-details-marker { display:none; }
.fgroup > summary::after { content:""; width:.5rem; height:.5rem; border:solid var(--faint); border-width:0 1.5px 1.5px 0; transform:rotate(45deg); transition:transform .15s; margin-right:.2rem; }
.fgroup[open] > summary::after { transform:rotate(-135deg); }
.fgroup .opts { max-height:17rem; overflow:auto; }
.fgroup h5 { margin:.5rem .55rem .1rem; font:700 .66rem var(--font-ui); letter-spacing:.12em; text-transform:uppercase; color:var(--faint); }
.opt.tri .box { flex:none; width:1.05rem; height:1.05rem; border:1.5px solid var(--line2); border-radius:4px; background:var(--surface); position:relative; }
.opt.tri.in .box { background:var(--jade); border-color:var(--jade); }
.opt.tri.in .box::after { content:""; position:absolute; left:.3rem; top:.1rem; width:.28rem; height:.55rem; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg); }
.opt.tri.ex .box { background:var(--seal); border-color:var(--seal); }
.opt.tri.ex .box::after { content:""; position:absolute; left:.2rem; top:.4rem; width:.5rem; height:2px; background:#fff; }
.opt.tri.ex { text-decoration:line-through; color:var(--muted); }
.opt.tri:hover { text-decoration:none; }
.browse { grid-template-columns:15.5rem minmax(0,1fr); }

/* ---------- library */
.shelf-layout { display:grid; grid-template-columns:var(--nav,15.5rem) minmax(0,1fr); gap:2rem; align-items:start; }
@media (max-width:860px) { .shelf-layout { grid-template-columns:minmax(0,1fr); } }
.side-nav { background:var(--surface); border:1px solid var(--line2); border-radius:12px; padding:.6rem; box-shadow:var(--shadow); position:sticky; top:4.6rem; }
.side-nav h5 { margin:.6rem .55rem .3rem; font:700 .68rem var(--font-ui); letter-spacing:.14em; text-transform:uppercase; color:var(--faint); }
.side-nav > a { display:flex; align-items:center; gap:.6rem; padding:.45rem .55rem; border-radius:7px; color:var(--ink); font-weight:500; font-size:.94rem; }
.side-nav > a:hover { background:var(--surface2); text-decoration:none; }
.side-nav > a.on { background:var(--ink); color:var(--surface); font-weight:600; }
.side-nav .n { margin-left:auto; font-size:.8rem; opacity:.65; }
.newfolder { margin-top:.4rem; padding:0 .2rem; } .newfolder > summary { list-style:none; cursor:pointer; display:flex; gap:.6rem; align-items:center; padding:.45rem .35rem; border-radius:7px; color:var(--link); font-weight:600; font-size:.92rem; }
.newfolder > summary::-webkit-details-marker { display:none; } .newfolder > summary:hover { background:var(--surface2); }
.mf { display:flex; gap:.3rem; align-items:center; margin:.3rem 0; } .mf input { min-height:2.1rem; padding:.3rem .6rem; flex:1; min-width:0; }
.resume { display:flex; gap:1.4rem; align-items:center; background:var(--surface); border:1px solid var(--line2); border-radius:12px; padding:1.1rem 1.3rem; margin-bottom:1.6rem; box-shadow:var(--shadow); }
.rc-cover { flex:none; width:5.6rem; aspect-ratio:300/440; border-radius:3px; overflow:hidden; border:1px solid var(--line2); box-shadow:0 6px 14px rgba(40,25,5,.25); }
.shelf { display:grid; gap:.7rem; }
.srow { display:grid; grid-template-columns:4rem minmax(0,1fr) auto; gap:1.1rem; align-items:center; background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:.75rem 1rem; transition:border-color .15s, box-shadow .15s; }
.srow:hover { border-color:var(--line2); box-shadow:var(--shadow); }
.srow .th { width:4rem; aspect-ratio:300/440; border-radius:3px; overflow:hidden; border:1px solid var(--line2); }
.srow h3 { margin:0 0 .1rem; font-size:1.12rem; } .srow h3 a { color:var(--ink); }
.srow-act { display:flex; gap:.4rem; align-items:center; }
@media (max-width:620px) { .srow { grid-template-columns:3.2rem 1fr; } .srow .th { width:3.2rem; } .srow-act { grid-column:1/-1; justify-content:flex-end; } }
.gcard { position:relative; } .gmenu { position:absolute; right:.25rem; top:.25rem; }
.gmenu .icon-btn { background:rgba(26,20,12,.72); color:#f4ead2; width:2rem; height:2rem; border-radius:6px; } .gmenu .icon-btn:hover { background:rgba(26,20,12,.9); color:#fff; }
.gcard .dd-menu { right:0; }

/* ---------- reader extras */
.exit-immersive { position:fixed; top:.8rem; right:.8rem; z-index:98; display:none; min-height:2.1rem; padding:0 .8rem; font-size:.82rem; opacity:.85; }
body.immersive .exit-immersive { display:inline-flex; }
.bmrow { display:flex; align-items:center; justify-content:space-between; padding:.3rem .2rem; border-bottom:1px solid var(--line); }
.bmrow a { font-weight:600; } .bmrow .icon-btn { width:1.8rem; height:1.8rem; font-size:1.2rem; }
.sheet .opts > a.opt, .sheet .opts > button.opt { width:100%; text-align:left; justify-content:flex-start; font:500 .94rem var(--font-ui); color:var(--ink); text-decoration:none; }
.rtools [data-bm-here].on { color:var(--seal); }
.swatches { grid-template-columns:repeat(5,1fr); }

/* ---------- profile and settings */
.phead { display:flex; gap:1.4rem; align-items:center; flex-wrap:wrap; padding:.6rem 0 1.4rem; border-bottom:1px solid var(--line2); }
.avatar.lg { width:5rem; height:5rem; font-size:2.2rem; }
.pstats { display:grid; grid-template-columns:repeat(auto-fit,minmax(7.5rem,1fr)); gap:0; margin-top:1.2rem; background:var(--surface); border:1px solid var(--line2); border-radius:12px; overflow:hidden; box-shadow:var(--shadow); }
.pstats > div { padding:.9rem 1rem; border-right:1px solid var(--line); } .pstats > div:last-child { border-right:0; }
.pstats b { display:block; font:700 1.7rem/1.1 var(--font-head); color:var(--ink); } .pstats span { color:var(--muted); font-size:.82rem; }
.av-pick { cursor:pointer; margin:0; } .av-pick input { position:absolute; opacity:0; pointer-events:none; }
.av-pick .avatar { border:3px solid transparent; transition:border-color .15s, transform .1s; } .av-pick:hover .avatar { transform:scale(1.05); }
.av-pick input:checked + .avatar { border-color:var(--ink); box-shadow:0 0 0 2px var(--surface) inset; }
.av-pick input:focus-visible + .avatar { outline:2px solid var(--focus); outline-offset:2px; }
h4.mini { margin:1.2rem 0 .4rem; font:700 .7rem var(--font-ui); text-transform:uppercase; letter-spacing:.14em; color:var(--faint); display:flex; justify-content:space-between; }
.settings-panel h2 { margin-bottom:.3rem; }

/* ---------- notice and suggestion forms */
.notice-layout { display:grid; grid-template-columns:minmax(0,1fr) 19rem; gap:2rem; align-items:start; margin-top:1.4rem; }
@media (max-width:900px) { .notice-layout { grid-template-columns:minmax(0,1fr); } }
.nf-step { border:0; padding:0; margin:0; } .nf-step legend { display:flex; align-items:center; gap:.7rem; font:700 1.1rem var(--font-head); margin-bottom:.7rem; padding:0; }
.step-n { display:inline-grid; place-items:center; width:1.7rem; height:1.7rem; border-radius:50%; background:var(--ink); color:var(--surface); font:700 .85rem var(--font-ui); }
.kind-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem; } @media (max-width:560px) { .kind-grid { grid-template-columns:minmax(0,1fr); } }
.kind-card { margin:0; cursor:pointer; display:block; } .kind-card input { position:absolute; opacity:0; pointer-events:none; }
.kc-body { display:block; height:100%; padding:.8rem .95rem; border:1.5px solid var(--line2); border-radius:10px; background:var(--surface); transition:border-color .15s, box-shadow .15s, background .15s; }
.kc-body b { display:block; font-weight:700; font-size:.95rem; } .kc-body small { display:block; color:var(--muted); font-weight:400; font-size:.82rem; margin-top:.15rem; }
.kind-card:hover .kc-body { border-color:var(--bronze); }
.kind-card input:checked + .kc-body { border-color:var(--seal); background:color-mix(in srgb, var(--seal) 7%, var(--surface)); box-shadow:0 0 0 3px color-mix(in srgb, var(--seal) 18%, transparent); }
.kind-card input:focus-visible + .kc-body { outline:2px solid var(--focus); outline-offset:2px; }
.target { display:flex; gap:.6rem; align-items:center; background:var(--surface2); border:1px solid var(--line2); border-radius:8px; padding:.55rem .8rem; margin-bottom:.4rem; }
.notice-form input[type=url], .notice-form input[type=text], .notice-form input[type=email], .notice-layout form select, .notice-layout form input[type=text], .notice-layout form input[type=url] { width:100%; }
.confirm-row { display:none; } .notice-form:has(input[value=copyright]:checked) .confirm-row { display:flex; }
.notice-side { position:sticky; top:5rem; } .steps { padding-left:1.2rem; } .steps li { margin-bottom:.6rem; font-size:.95rem; }
.sg-pending { color:var(--bronze); } .sg-accepted { color:var(--jade); } .sg-rejected { color:var(--seal); }

.eyebrow::before { content:""; width:1.6rem; height:2px; background:var(--seal); }
.settings-panel .readwrap { padding:1.1rem 1.4rem; background:var(--r-bg); }
body.settings-page[data-rt="site"] .settings-panel .readwrap { background:var(--bg); }

.votes button.sm { min-height:1.9rem; width:1.9rem; padding:0; } .votes { gap:.4rem; }

body.reading:not(.settings-page) main.wrap { padding-top:1.4rem; }

/* ---------- personal translator */
.pg-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.2rem; margin-top:1rem; }
@media (max-width:860px) { .pg-grid { grid-template-columns:minmax(0,1fr); } }
.pg-pane { background:var(--surface); border:1px solid var(--line2); border-radius:12px; padding:.9rem 1rem 1rem; box-shadow:var(--shadow); min-width:0; }
.pg-head { display:flex; align-items:center; gap:.8rem; margin-bottom:.6rem; flex-wrap:wrap; } .pg-head h3 { margin:0; font-size:1.05rem; }
.pg-pane textarea { min-height:22rem; font-size:1.05rem; line-height:1.7; } textarea.drop { border-color:var(--seal); background:color-mix(in srgb, var(--seal) 6%, var(--surface)); }
.pg-out { min-height:22rem; max-height:34rem; overflow:auto; font:1.05rem/1.7 var(--font-read); padding:.1rem .2rem; }
.pg-out p { margin:0 0 .8em; } .pg-out .pair { margin-bottom:1em; } .pg-out .pair .zh { color:var(--muted); font-size:.88em; }
.pg-bar { display:flex; gap:1rem; align-items:center; margin-top:1rem; position:sticky; bottom:.8rem; background:var(--surface); border:1px solid var(--line2); border-radius:12px; padding:.7rem 1rem; box-shadow:0 6px 24px rgba(30,18,5,.18); }

/* active states must survive :hover (the generic button:hover rule is more specific) */
.seg .on, .seg .on:hover { background:var(--ink); color:var(--surface); }
.rtools .on, .rtools .on:hover { background:var(--seal); color:var(--seal-ink); }
.votes button.on, .votes button.on:hover { background:var(--jade); color:var(--surface); border-color:var(--jade); }
.tabs .on, .tabs .on:hover { color:var(--ink); }


/* ---- reading statistics */
.heat { display:grid; grid-template-columns:repeat(26,minmax(11px,1fr)); gap:3px; padding:.2rem 0 .3rem; max-width:46rem; overflow-x:auto; }
.heat .hw { display:grid; grid-template-rows:repeat(7,auto); gap:3px; }
.heat i { width:100%; aspect-ratio:1; border-radius:2px; background:var(--surface2); border:1px solid var(--line); display:block; box-sizing:border-box; }
.heat i.l1 { background:#d9cfae; border-color:#cfc293; } .heat i.l2 { background:#b7b57a; border-color:#a6a468; }
.heat i.l3 { background:#6f9a72; border-color:#628b66; } .heat i.l4 { background:var(--jade); border-color:var(--jade); }
.heat i.f { visibility:hidden; }

/* ---- paragraph comments, glossary hover, dictionary */
.reader p .pbtn.pc { left:-4.5rem; width:auto; min-width:1.9rem; padding:0 .3rem; gap:.2rem; display:flex; }
.reader p .pbtn.pc b { font:600 .72rem var(--font-ui); } .reader p .pbtn.pc b:empty { display:none; }
.reader p.has-pc .pbtn.pc { opacity:1; color:var(--bronze); }
@media (max-width:900px) { .reader p .pbtn.pc { left:auto; right:2rem; top:-1.2rem; } }
.pthread .comment { margin-bottom:.8rem; }
.term { font-weight:700; cursor:help; text-decoration:none; }
.term:focus-visible { outline:1px dotted var(--bronze); outline-offset:2px; }
.termtip, .lookup { position:fixed; z-index:120; background:var(--surface); color:var(--ink); border:1px solid var(--line2); border-radius:10px; box-shadow:0 8px 30px rgba(30,18,5,.28); padding:.7rem .9rem; font:400 .92rem/1.45 var(--font-ui); max-width:22rem; }
.termtip .zh, .lookup .hw { font:600 1.5rem/1.2 var(--font-kai, var(--font-read)); } .termtip .py, .lookup .py { color:var(--bronze); font-weight:600; }
.termtip .nt { color:var(--muted); font-size:.85rem; margin-top:.25rem; }
.lookup { width:min(24rem,calc(100vw - 1.4rem)); padding:.8rem 1rem 1rem; }
.lookup .top { display:flex; gap:.6rem; align-items:baseline; flex-wrap:wrap; } .lookup .top .tools { margin-left:auto; display:flex; gap:.2rem; }
.lookup ol { margin:.5rem 0 0; padding-left:1.2rem; } .lookup li { margin:.15rem 0; }
.lookup .alt { border-top:1px solid var(--line); margin-top:.6rem; padding-top:.5rem; }
.lookup .chars { display:flex; flex-wrap:wrap; gap:.3rem .9rem; margin-top:.3rem; font-size:.85rem; color:var(--muted); }
.lookup .chars b { font:600 1.1rem var(--font-kai, var(--font-read)); color:var(--ink); margin-right:.2rem; }
.lookup .hint { color:var(--faint); font-size:.78rem; margin-top:.5rem; }
.zh-text .t, p.zh { cursor:text; }
::highlight(lookup) { background:rgba(180,120,30,.28); }

/* ---- translate ahead */
.aheadgrid { display:flex; flex-wrap:wrap; gap:3px; max-height:9rem; overflow:auto; padding:2px; }
.aheadgrid a, .aheadgrid span.c { min-width:2.1rem; height:1.7rem; padding:0 .3rem; display:grid; place-items:center; font:600 .72rem var(--font-ui); border-radius:4px; border:1px solid var(--line2); color:var(--muted); background:var(--surface); text-decoration:none; font-variant-numeric:tabular-nums; }
.aheadgrid .ready { background:var(--jade); border-color:var(--jade); color:#fff; }
.aheadgrid .working { background:var(--bronze); border-color:var(--bronze); color:#fff; }
.aheadgrid .queued { border-color:var(--bronze); color:var(--bronze); border-style:dashed; }
.aheadgrid .none { opacity:.55; }
.trust { display:grid; gap:.3rem; }
.trust .steps { display:flex; gap:.3rem; margin:.2rem 0 .1rem; } .trust .steps i { flex:1; height:6px; border-radius:2px; background:var(--surface2); border:1px solid var(--line); } .trust .steps i.on { background:var(--jade); border-color:var(--jade); }

.lookup .sub { font:700 .7rem var(--font-ui); text-transform:uppercase; letter-spacing:.12em; color:var(--faint); margin:.7rem 0 .25rem; }
.lookup .hw.en { font:600 1.1rem var(--font-read); }
.lookup .gl { margin:.2rem 0 .4rem; } .lookup .gl .hw, .lookup .revs .hw { font-size:1.25rem; }
.lookup .revs { list-style:none; margin:0; padding:0; } .lookup .revs li { margin:.35rem 0; line-height:1.3; }

/* grid children may shrink below their content, otherwise one wide row stretches the whole page */
.cols2 > *, .browse > *, .shelf-layout > *, .hero > *, .pg-grid > *, .notice-layout > *, .reader-cols > * { min-width:0; }
.swatches .swatch { min-width:0; padding-inline:.2rem; }
.sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* later two-column definitions must not beat the narrow-screen rules */
@media (max-width:860px) { .browse, .shelf-layout { grid-template-columns:minmax(0,1fr); } }

/* header: nothing but the search may shrink, otherwise the menu button is squashed to 0px on phones */
.top .wrap > *, .icon-btn, .brand, .tools { flex:none; }
.top .wrap > .search { flex:1 1 2.4rem; min-width:2.4rem; }
.top .wrap > .nav { flex:none; }
.rbar { top:calc(3.7rem + 1px); }
@media (max-width:480px) { .brand .word { display:none; } .top .wrap { gap:.4rem; } }
.lookup .orig { max-height:8.5rem; overflow:auto; font:400 1.05rem/1.7 var(--font-kai, var(--font-read)); padding:.4rem .6rem; background:var(--surface2); border-radius:3px; }
.lookup .orig mark { background:color-mix(in srgb, var(--seal) 22%, transparent); color:inherit; border-radius:2px; padding:0 .05em; font-weight:700; }
.lookup .orig mark.part { background:transparent; border-bottom:2px solid color-mix(in srgb, var(--seal) 70%, transparent); font-weight:600; }
.lookup .orig mark.guess { background:transparent; border-bottom:2px dashed var(--bronze); font-weight:600; }
.lookup .legend { margin-top:.35rem; font-size:.75rem; color:var(--muted); } .lookup .legend mark { background:transparent; }
.lookup .legend mark.part { border-bottom:2px solid color-mix(in srgb, var(--seal) 70%, transparent); } .lookup .legend mark.guess { border-bottom:2px dashed var(--bronze); }
.lookup .orig mark.near { background:transparent; border-bottom:2px solid var(--bronze); font-weight:600; }
.lookup .legend mark.near { border-bottom:2px solid var(--bronze); }
.lookup .orig { position:relative; }
.rail.can-scroll { cursor:grab; }
.rail.scrolling { scroll-snap-type:none; }
.rail.dragging, .rail.dragging * { cursor:grabbing !important; user-select:none; -webkit-user-select:none; }
.rail img { -webkit-user-drag:none; }
.mountains { position:fixed; left:0; right:0; bottom:0; width:100%; height:62vh; z-index:-1; pointer-events:none; }
@media (max-width:640px) { .mountains { height:44vh; } }
.chapnav-up { margin:.3rem auto 1rem; }
.chapnav-up .btn { min-height:0; padding:.3rem .8rem; font-size:.9rem; }

/* other renderings: phrases with a suggested wording (dotted) and the reader's own changes (solid) */
.rend { cursor:pointer; text-decoration:underline dotted; text-decoration-thickness:1.5px; text-underline-offset:.22em; text-decoration-color:var(--bronze); }
.rend.mine { text-decoration-style:solid; }
.rend:hover, .rend:focus-visible { text-decoration-color:var(--seal); outline:0; }
.lookup .rr { display:flex; justify-content:space-between; align-items:center; gap:.6rem; padding:.2rem 0; border-bottom:1px solid var(--line); }
.lookup .rr.cur { border-bottom:0; color:var(--muted); }
.lookup .rform { display:flex; gap:.4rem; margin-top:.4rem; } .lookup .rform input { flex:1; min-width:0; }
.lookup .share { display:flex; gap:.4rem; align-items:center; margin-top:.3rem; }
/* terms sheet */
.ttlist { max-height:15rem; overflow:auto; border:1px solid var(--line); border-radius:var(--radius); margin:.5rem 0; }
.ttrow { display:flex; gap:.7rem; align-items:center; justify-content:space-between; padding:.35rem .6rem; border-bottom:1px solid var(--line); }
.ttrow:last-child { border-bottom:0; } .ttrow[hidden] { display:none; }
.ttrow > span:first-child { min-width:0; } .ttrow .zh { flex:0 0 7rem; }
.ttlist .empty { padding:.6rem; margin:0; }
.ttadd { display:flex; gap:.4rem; flex-wrap:wrap; margin-top:.4rem; } .ttadd input { flex:1 1 7rem; min-width:0; }
.sheet .row > .grow { flex:1; min-width:0; }

/* comments */
.cbox .sec { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.comment .cbody { white-space:normal; overflow-wrap:anywhere; margin:.2rem 0; }
.comment .cbody.clamp:not(.open) { max-height:11em; overflow:hidden; -webkit-mask-image:linear-gradient(#000 70%, transparent); mask-image:linear-gradient(#000 70%, transparent); }
.comment .who { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.comment.gone .cbody { color:var(--muted); font-style:italic; }
.comment .ptag { margin-left:auto; }
.comment .more-replies > summary { color:var(--muted); font-size:.85rem; cursor:pointer; margin:.4rem 0; }
.composer .right { margin-left:auto; }
.avatar.sm { width:1.5rem; height:1.5rem; font-size:.8rem; }

/* staff panel */
.staff-head { display:flex; align-items:baseline; gap:1rem; flex-wrap:wrap; } .staff-head h1 { margin:0 0 .2rem; }
.staff { max-width:68rem; margin:0 auto; }
.staff .tabs .n, .staff .statuses .n { margin-left:.35rem; font-size:.78rem; opacity:.7; }
.staff-stats a.stat { color:inherit; text-decoration:none; } .staff-stats a.stat:hover { border-color:var(--bronze); }
.staff-stats .stat b { font-size:1.5rem; }
.staff-cols { display:grid; grid-template-columns:repeat(auto-fit,minmax(18rem,1fr)); gap:1rem; margin:1rem 0; align-items:start; }
.staff .item { margin-bottom:.7rem; padding:.9rem 1.1rem; } .staff .item > * + * { margin-top:.45rem; }
.staff .item-head { display:flex; gap:.6rem; flex-wrap:wrap; align-items:baseline; }
.staff .item p { margin:0; } .staff .item .row { margin-top:.6rem; }
.staff .preview { margin-top:.4rem; padding:.6rem .8rem; border-left:2px solid var(--line2); max-height:22rem; overflow:auto; }
.staff .stack label { display:flex; flex-direction:column; gap:.2rem; font-size:.88rem; color:var(--muted); }
.staff .stack select, .staff .stack input:not([type=checkbox]) { width:100%; }
.staff .num, .staff .c { text-align:right; } .staff .c { text-align:center; }
.nowrap { white-space:nowrap; }
.comment-row { padding:.4rem 0; border-bottom:1px solid var(--line); }
.pager { justify-content:center; margin:1rem 0; }
.staff-users td, .staff-users th { vertical-align:middle; }
@media (max-width:640px) { .staff-users th:nth-child(n+4):not(:last-child), .staff-users td:nth-child(n+4):not(:last-child) { display:none; } }
.staff .stack label.inline { flex-direction:row; align-items:center; gap:.5rem; }

.pager { display:flex; gap:.25rem; justify-content:center; align-items:center; flex-wrap:wrap; margin:1rem 0; }
.pager .pg { min-width:2rem; padding:.3rem .6rem; text-align:center; border:1px solid var(--line2); border-radius:var(--radius); color:var(--muted); font-weight:600; font-size:.88rem; background:var(--surface); }
.pager a.pg:hover { text-decoration:none; border-color:var(--bronze); color:var(--ink); }
.pager .pg.on { background:var(--ink); color:var(--surface); border-color:var(--ink); }
.pager .pg.gap { border-color:transparent; background:none; }
.kind-grid .kind-card:last-child:nth-child(odd) { grid-column:1/-1; }

.filters { display:flex; flex-wrap:wrap; gap:.6rem .8rem; align-items:flex-end; margin:.2rem 0 1rem; padding:.8rem 1rem; border:1px solid var(--line2); border-radius:var(--radius); background:var(--surface); }
.filters .f { display:flex; flex-direction:column; gap:.2rem; font:700 .66rem var(--font-ui); letter-spacing:.1em; text-transform:uppercase; color:var(--faint); min-width:8.5rem; }
.filters .f select, .filters .f input { font:400 .92rem var(--font-ui); letter-spacing:0; text-transform:none; color:var(--ink); width:100%; }
.filters .f-search { flex:1 1 14rem; } .filters .f-actions { display:flex; gap:.4rem; }
.group-head { margin:1.4rem 0 .5rem; padding-bottom:.25rem; border-bottom:1px solid var(--line2); font-size:1.05rem; }
.staff .excerpt { color:var(--muted); font-size:.92rem; }
.staff .tag { font:700 .66rem var(--font-ui); letter-spacing:.1em; text-transform:uppercase; color:var(--bronze); border:1px solid var(--line2); border-radius:3px; padding:.05rem .4rem; }
.staff .rep.legal { border-left:3px solid var(--seal); } .staff .targets > * + * { margin-top:.15rem; } .staff .late { color:var(--seal); font-weight:700; }
.review-top { margin:.2rem 0 .6rem; } .review-head { margin-bottom:.7rem; }
.checks { list-style:none; margin:.6rem 0 0; padding:0; font-size:.9rem; } .checks li { padding:.15rem 0 .15rem .8rem; border-left:2px solid var(--bronze); margin-top:.2rem; } .checks li.bad { border-color:var(--seal); color:var(--seal); }
.review-actions { position:sticky; top:3.4rem; z-index:5; padding:.6rem .8rem; background:var(--surface); border:1px solid var(--line2); border-radius:var(--radius); box-shadow:var(--shadow); }
.review-table { width:100%; border-collapse:collapse; margin-top:.4rem; background:var(--surface); border:1px solid var(--line2); }
.review-table th { text-align:left; font:700 .72rem var(--font-ui); letter-spacing:.1em; text-transform:uppercase; color:var(--faint); padding:.4rem .6rem; border-bottom:1px solid var(--line2); background:var(--surface2); }
.review-table td { vertical-align:top; padding:.6rem; border-bottom:1px solid var(--line); line-height:1.65; }
.review-table td.n, .review-table th.n { width:2.4rem; color:var(--faint); text-align:right; font-size:.8rem; }
.review-table td.zh { width:44%; font-family:var(--font-zh); } .review-table tr.odd td:not(.n) { background:color-mix(in srgb, var(--seal) 7%, transparent); } .review-table tr.same td { color:var(--faint); }
.review-table ins { background:color-mix(in srgb, var(--jade) 22%, transparent); text-decoration:none; } .review-table del { background:color-mix(in srgb, var(--seal) 18%, transparent); }
@media (max-width:760px) { .review-table td.zh { width:auto; } .review-table th { position:static; } .review-actions { position:static; } }

/* drop-downs (static/js/dropdown.js) */
.dd { position:relative; display:inline-block; max-width:100%; vertical-align:middle; }
.filters .f .dd, .staff .stack .dd, .filters .dd, .notice-layout .dd { display:block; width:100%; }
.dd-native { position:absolute !important; inset:0; width:100% !important; height:100% !important; opacity:0; pointer-events:none; }
.dd .dd-btn { display:flex; align-items:center; justify-content:space-between; gap:.7rem; width:100%; min-height:2.5rem; padding:.55rem .8rem; border:1px solid var(--line2); border-radius:3px; background:var(--surface); color:var(--ink); font:400 1rem var(--font-ui); letter-spacing:0; text-transform:none; text-align:left; box-shadow:none; white-space:nowrap; }
.dd .dd-btn::after, .dd .dd-btn::before { content:none; }
.dd .dd-btn:hover { border-color:var(--bronze); background:var(--surface); }
.dd .dd-btn:focus-visible, .dd .dd-btn[aria-expanded="true"] { outline:none; border-color:var(--bronze); box-shadow:0 0 0 3px color-mix(in srgb, var(--bronze) 28%, transparent); }
.dd .dd-btn:disabled { opacity:.55; cursor:not-allowed; }
.dd .dd-text { overflow:hidden; text-overflow:ellipsis; } .dd.is-placeholder .dd-text { color:var(--muted); }
.dd .dd-caret { flex:none; width:.5rem; height:.5rem; border:solid var(--muted); border-width:0 1.5px 1.5px 0; transform:translateY(-2px) rotate(45deg); transition:transform .15s; }
.dd .dd-btn[aria-expanded="true"] .dd-caret { transform:translateY(2px) rotate(225deg); }
.filters .f .dd-btn { font-size:.92rem; }
.dd-menu { position:fixed; z-index:2000; display:flex; flex-direction:column; min-width:8rem; max-width:min(26rem, calc(100vw - 16px)); background:var(--surface); color:var(--ink); border:1px solid var(--line2); border-radius:var(--radius); box-shadow:var(--shadow), 0 10px 28px rgba(0,0,0,.2); font:400 .95rem var(--font-ui); outline:none; overflow:hidden; }
.dd-menu .dd-search { margin:.35rem .35rem .15rem; width:auto; min-height:2.1rem; padding:.3rem .6rem; font-size:.9rem; }
.dd-menu .dd-list { overflow:auto; padding:.25rem; }
.dd-opt { padding:.45rem .7rem .45rem .8rem; border-radius:3px; border-left:2px solid transparent; cursor:pointer; overflow-wrap:anywhere; }
.dd-opt.active { background:var(--surface2); }
.dd-opt[aria-selected="true"] { border-left-color:var(--seal); font-weight:700; }
.dd-opt[aria-disabled="true"] { opacity:.45; cursor:not-allowed; }
.dd-group { padding:.5rem .8rem .2rem; font:700 .66rem var(--font-ui); letter-spacing:.1em; text-transform:uppercase; color:var(--faint); }

.how { margin:.8rem 0 1rem; max-width:52rem; } .how h3 { margin:0 0 .5rem; }
.how ol { margin:0 0 .6rem; padding-left:1.3rem; } .how li { margin-bottom:.45rem; font-size:.95rem; line-height:1.55; }
/* Flags in a drop-down (language pickers) */
.dd-flag { flex:none; width:1.25rem; height:.94rem; object-fit:cover; border-radius:2px; box-shadow:0 0 0 1px color-mix(in srgb, var(--ink) 22%, transparent); }
.dd-flag[hidden] { display:none; }
.dd .dd-btn:has(.dd-flag:not([hidden])) .dd-text { flex:1; }
.dd-opt:has(.dd-flag) { display:flex; align-items:center; gap:.6rem; }
.site-lang, .langsw { margin:0; }
.langsw .dd .dd-btn { min-height:2.1rem; padding:.3rem .6rem; font-size:.9rem; }
.site-lang .dd .dd-btn { min-height:2.1rem; padding:.3rem .6rem; font-size:.9rem; }
@media (max-width:560px) { .site-lang .dd-btn .dd-text { display:none; } .site-lang .dd-btn { padding:.3rem .45rem; gap:.25rem; } }
@media (max-width:480px) { .tools .btn.sm { padding:.3rem .5rem; font-size:.78rem; white-space:nowrap; } .tools { gap:.1rem; } }
@media (max-width:400px) { .tools .btn.sm.primary { display:none; } }
@media (max-width:560px) { .chapnav { grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:.4rem; } .chapnav .btn { padding:.45rem .6rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; } }
.kpi .delta { display:block; font-size:.76rem; color:var(--jade, var(--muted)); } .kpi .delta.down { color:var(--seal); }
.sbars { display:flex; align-items:flex-end; gap:2px; height:7rem; border-bottom:1px solid var(--line2); } .sbars span { flex:1 1 0; min-width:1px; background:var(--bronze); opacity:.85; min-height:1px; } .sbars span:hover { opacity:1; background:var(--seal); }
.sbars-axis { display:flex; justify-content:space-between; margin-top:.3rem; }
.stat-table td.has-bar { position:relative; } .stat-table .sbar { position:absolute; right:0; top:15%; height:70%; background:var(--bronze); opacity:.18; z-index:0; } .stat-table .v { position:relative; z-index:1; }
.stat-table td, .stat-table th { padding-inline:.5rem; }
.staff-cols .wide { grid-column:1/-1; }
.starpick { display:inline-flex; gap:.1rem; } .starpick button { background:none; border:0; padding:.15rem; min-height:0; box-shadow:none; color:var(--bronze); cursor:pointer; line-height:0; border-radius:3px; }
.starpick button svg { fill:none; stroke:currentColor; stroke-width:1.6; } .starpick button.on svg { fill:currentColor; } .starpick button:focus-visible { outline:2px solid var(--seal); outline-offset:1px; }