:root{
  --bg:#1d2126;--bg2:#262b31;--panel:#2d333a;--line:#3a4149;--text:#eef1f4;--muted:#9aa4ae;
  --accent:#e3202a;--accent2:#ff4a52;--radius:10px;--tabw:38px;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:radial-gradient(ellipse at 50% 30%,#2c3239 0%,var(--bg) 70%);color:var(--text);font:14px/1.45 Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;display:flex;flex-direction:column;overflow:hidden}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
header{display:flex;align-items:center;gap:16px;padding:10px 18px;background:rgba(0,0,0,.25);border-bottom:1px solid var(--line);flex:0 0 auto;z-index:20}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;min-width:0}
.brand img{height:34px;border-radius:4px;display:block}
.brand h1{font-size:16px;font-weight:700;margin:0;white-space:nowrap;letter-spacing:.2px;overflow:hidden;text-overflow:ellipsis}
.search{margin-left:auto;position:relative;width:min(380px,45vw)}
.search input{width:100%;height:38px;border-radius:999px;border:1px solid var(--line);background:var(--bg2);color:var(--text);padding:0 40px 0 16px;font:inherit;outline:none;transition:border-color .2s}
.search input:focus{border-color:var(--accent)}
.search svg{position:absolute;right:13px;top:10px;width:18px;height:18px;opacity:.6;pointer-events:none}
.results{position:absolute;right:0;top:46px;width:min(460px,92vw);max-height:min(70vh,560px);overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 18px 50px rgba(0,0,0,.5);display:none;z-index:50}
.results.open{display:block}
.results .head{padding:10px 14px;color:var(--muted);font-size:12px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--panel)}
.results button{display:block;width:100%;text-align:left;padding:10px 14px;border-bottom:1px solid var(--line)}
.results button:hover,.results button:focus{background:#363d45;outline:none}
.results .pg{font-size:11px;font-weight:600;color:var(--accent2);text-transform:uppercase;letter-spacing:.5px}
.results .sn{display:block;margin-top:2px;white-space:pre-line;font-size:13px}
.results mark{background:#ffd54a;color:#111;border-radius:2px;padding:0 1px}
main{flex:1 1 auto;position:relative;display:flex;align-items:center;justify-content:center;min-height:0;padding:18px calc(var(--tabw) + 24px) 18px 24px}
.notice{background:var(--panel);padding:24px 28px;border-radius:var(--radius);border:1px solid var(--line)}
.notice a{color:var(--accent2)}
.stage{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}
#book{margin:0 auto}
.page{background:#fff;overflow:hidden}
.page .kp-host{position:relative;width:100%;height:100%;overflow:hidden}
.page .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#bbb;font-size:12px}
.page.hit .kp-host{animation:hit 2.4s ease}
@keyframes hit{0%,60%{box-shadow:inset 0 0 0 4px #ffd54a}100%{box-shadow:inset 0 0 0 0 transparent}}
mark.kh{background:#ffe066;color:inherit;padding:0;border-radius:1px}
.navbtn{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;transition:background .2s,opacity .2s;z-index:10}
.navbtn:hover{background:var(--accent)}
.navbtn:disabled{opacity:.25;pointer-events:none}
.navbtn svg{width:22px;height:22px}
#prev{left:-6px}#next{right:-6px}
.tabs{position:absolute;right:0;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:2px;z-index:15;max-height:100%;overflow:auto;scrollbar-width:none}
.tabs button{width:var(--tabw);min-height:34px;height:min(52px,6.4vh);color:#fff;font-weight:700;font-size:12px;writing-mode:vertical-rl;transform:rotate(180deg);border-radius:8px 0 0 8px;box-shadow:0 2px 6px rgba(0,0,0,.3);transition:width .15s,filter .15s;text-shadow:0 1px 1px rgba(0,0,0,.3);white-space:nowrap;overflow:hidden}
.tabs button:hover,.tabs button.on{filter:brightness(1.15);width:calc(var(--tabw) + 6px)}
footer{flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:10px;padding:8px 14px 12px;z-index:20;flex-wrap:wrap}
.bar{display:flex;align-items:center;gap:4px;background:rgba(0,0,0,.3);border:1px solid var(--line);border-radius:999px;padding:4px}
.bar button{height:34px;min-width:34px;padding:0 10px;border-radius:999px;display:flex;align-items:center;justify-content:center;gap:6px;transition:background .15s}
.bar button:hover{background:rgba(255,255,255,.1)}
.bar svg{width:18px;height:18px}
.counter{display:flex;align-items:center;gap:6px;padding:0 8px;color:var(--muted);font-variant-numeric:tabular-nums}
.counter input{width:64px;height:28px;text-align:center;background:var(--bg2);border:1px solid var(--line);border-radius:6px;color:var(--text);font:inherit}
.slider{width:min(320px,40vw);accent-color:var(--accent)}
.lbl{font-size:13px}
.thumbs{position:fixed;left:0;right:0;bottom:0;height:210px;background:rgba(20,23,27,.97);border-top:1px solid var(--line);transform:translateY(100%);transition:transform .3s ease;z-index:40;display:flex;flex-direction:column}
.thumbs.open{transform:none}
.thumbs .th-head{display:flex;justify-content:space-between;align-items:center;padding:8px 16px;color:var(--muted);font-size:12px}
.thumbs .strip{flex:1;overflow-x:auto;overflow-y:hidden;display:flex;gap:14px;padding:4px 16px 14px}
.thumbs .sp{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer}
.thumbs .sp .pp{display:flex;box-shadow:0 2px 8px rgba(0,0,0,.4);outline:2px solid transparent;outline-offset:2px;border-radius:2px}
.thumbs .sp.on .pp{outline-color:var(--accent)}
.thumbs .tp{position:relative;height:136px;background:#fff;overflow:hidden;pointer-events:none}
.thumbs .sp span{font-size:11px;color:var(--muted)}
.zoom{position:fixed;inset:0;background:rgba(10,12,14,.96);z-index:60;display:none;flex-direction:column}
.zoom.open{display:flex}
.zoom-bar{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;flex:0 0 auto}
.zoom .hint{color:var(--muted);font-size:12px}
.zoom-ctl{display:flex;align-items:center;gap:6px}
.zoom-ctl button{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.12);font-size:20px;display:flex;align-items:center;justify-content:center}
.zoom-ctl button:hover{background:var(--accent)}
.zoom-ctl span{min-width:52px;text-align:center;color:var(--muted);font-variant-numeric:tabular-nums}
.zoom .wrap{flex:1;overflow:auto;display:flex;gap:8px;padding:10px 20px 40px;align-items:flex-start}
.zoom .zp{position:relative;flex:0 0 auto;background:#fff;box-shadow:0 10px 40px rgba(0,0,0,.6);margin:0 auto;overflow:hidden}
.zoom .zp + .zp{margin-left:0}
.zoom .zp:first-child:not(:only-child){margin-right:0}
.hidden{display:none!important}
.stf__parent .page,.stf__item{-webkit-user-select:text;user-select:text}
@media (max-width:760px){
  header{padding:8px 12px;gap:10px}
  .brand h1{display:none}
  .search{width:auto;flex:1}
  main{padding:10px calc(var(--tabw) + 6px) 6px 6px}
  :root{--tabw:28px}
  .tabs button{font-size:10px}
  .navbtn{display:none}
  .slider,.lbl,.hide-sm{display:none}
  .zoom .wrap{flex-direction:column;align-items:center;padding:6px}
}