:root{--bg:#141922;--card:#1d2430;--fg:#f3efe6;--dim:#aab3c2;--line:#323c4d;--go:#3a8f5a;--go2:#4caf74;--warn:#d9a441}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font-family:Georgia,'Times New Roman',serif;font-size:18px;line-height:1.5}
a{color:#9cc8ff}
.top{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line)}
.top nav a{margin-left:16px}
.brand{font-size:1.3em;font-weight:bold;color:var(--fg);text-decoration:none}
main{max-width:760px;margin:0 auto;padding:16px}
h1{font-size:1.6em;margin:.6em 0 .3em}h2{font-size:1.25em;margin:1.4em 0 .4em;border-top:1px solid var(--line);padding-top:.8em}
label{display:block;margin:.6em 0 .2em}
.check{display:flex;align-items:center;gap:8px;margin:.4em 0}
.check input{width:auto}
input{font:inherit;width:100%;max-width:420px;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:#0f131a;color:var(--fg)}
button,.big{font:inherit;background:var(--go);color:#fff;border:0;border-radius:10px;padding:10px 18px;margin:.4em .4em .4em 0;cursor:pointer;text-decoration:none;display:inline-block}
button:hover,.big:hover{background:var(--go2)}
button.ghost{background:none;border:2px solid var(--line);color:var(--fg)}
button.small{padding:4px 12px;font-size:.9em}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.row input{flex:1 1 220px}
.small{color:var(--dim);font-size:.9em}
.readers,.access{list-style:none;padding:0}
.readers li,.access li{display:flex;justify-content:space-between;align-items:center;background:var(--card);border-radius:10px;padding:8px 12px;margin:6px 0}
.tag{font-size:.8em;color:var(--dim);margin-left:8px}
.yes{color:var(--go2);font-weight:bold}.no{color:var(--dim)}
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.plan{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px}
.plan h3{margin:.1em 0}.plan .price{font-size:1.2em}
.plan.best{border-color:var(--go2)}
#msg{min-height:1.5em;color:var(--warn)}
.sr{position:absolute;left:-9999px}
.rep{background:var(--card);border-radius:12px;padding:10px 14px;margin:8px 0}
.rep h3{margin:.2em 0}.rep ul{margin:.3em 0;padding-left:1.2em}
.inapp .noapp{display:none}
.wbook{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.wpages{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin:8px 0}
.wles{grid-column:1/-1;margin:.6em 0 0;font-size:1em}
.wpage{background:#0f131a;border:1px solid var(--line);border-radius:10px;padding:6px;font-size:.85em}
.wpage.big{grid-column:1/-1}
.wpage canvas{display:block;width:100%;height:auto;border-radius:6px;cursor:zoom-in}.wpage.big canvas{cursor:zoom-out}
.wpage .ok{color:var(--go2)}.wpage .miss{color:var(--warn)}
.foot{text-align:center;color:var(--dim);padding:24px 16px;font-size:.9em}
.hero{text-align:center;padding:20px 0}
.hero h1{font-size:2em}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.card{background:var(--card);border-radius:14px;padding:16px}
.go{display:flex;flex-wrap:wrap;gap:8px}
@media (max-width:480px){body{font-size:17px}.top nav a{margin-left:10px}}