/* TinkerPie Books: builds on /site.css (same dark theme, red + cyan accents) */
:root{--c3:#ff8a1f;--c4:#1fb860;--c5:#2f7de1;--c6:#e3262f;--c7:#8b3fe0;--c8:#3550d8;--ok:#25c063}
.bk-hero{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:28px;align-items:center;margin:8px 0 6px}
.bk-hero h1{margin-top:6px}.bk-hero .kick{color:var(--red2);font-weight:800;letter-spacing:.14em;font-size:12px}
.bk-hero{overflow-x:clip}.bk-hero .covers{display:flex;justify-content:center;overflow:hidden;padding:0 8%}.bk-hero .covers img{width:30%;border-radius:8px;box-shadow:0 10px 30px #0008;margin-left:-8%;border:1px solid #fff2}
.bk-hero .covers img:nth-child(odd){transform:translateY(8px) rotate(-3deg)}.bk-hero .covers img:nth-child(even){transform:rotate(3deg)}
.bk-pills{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}.bk-pills span{border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-size:13px;color:var(--fg);background:var(--panel)}
.bk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;margin:14px 0}
.bk-card{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:16px;overflow:hidden;text-decoration:none;color:var(--fg);transition:.15s}
.bk-card:hover{border-color:var(--ac,#3d4455);transform:translateY(-3px)}
.bk-card .im{background:linear-gradient(160deg,color-mix(in srgb,var(--ac) 30%,#0b0c10),#0b0c10);padding:16px 16px 0;display:flex;justify-content:center}
.bk-card .im img{width:68%;border-radius:6px 6px 0 0;box-shadow:0 8px 24px #000a;display:block}
.bk-card .im .ph{width:68%;aspect-ratio:210/297;border-radius:6px 6px 0 0;background:#1d2029;display:grid;place-items:center;color:var(--muted);font-size:13px;text-align:center;padding:8px}
.bk-card .tx{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.bk-card .cl{font:800 12px/1 ui-monospace,monospace;letter-spacing:.08em;color:var(--ac)}
.bk-card h3{font-size:19px;margin:0}.bk-card p{margin:0;font-size:14px;color:var(--muted);line-height:1.45}
.bk-card .pr{margin-top:auto;display:flex;align-items:baseline;gap:8px;padding-top:8px}.bk-card .pr b{font-size:24px}.bk-card .pr s{color:var(--muted);font-size:14px}
.chip{display:inline-block;font-size:12px;font-weight:700;border-radius:999px;padding:3px 10px;border:1px solid var(--line);color:var(--muted);margin:0 6px 6px 0}
.chip.ok{color:#7ff0a8;border-color:#25c06366;background:#25c06314}.chip.wait{color:#ffd28a;border-color:#ffb02066;background:#ffb02012}.chip.soon{color:#9ad7ff;border-color:#34d3e066;background:#34d3e012}
.bk-btns{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0}
.bk-btn{display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;font:700 16px/1.2 inherit;border-radius:12px;padding:13px 20px;background:var(--red);color:#fff;text-decoration:none}
.bk-btn:hover{background:var(--red2)}.bk-btn.alt{background:transparent;border:1px solid #3d4455;color:var(--fg)}.bk-btn.alt:hover{background:var(--panel)}
.bk-btn.wa{background:#1fa855}.bk-btn.wa:hover{background:#25c063}.bk-btn[disabled]{background:#2a2f3a;color:var(--muted);cursor:not-allowed}.bk-btn.sm{padding:9px 14px;font-size:14px}
.bk-band{border:1px solid #34d3e044;background:linear-gradient(120deg,#34d3e012,#e3262f10);border-radius:16px;padding:18px 20px;margin:26px 0}
.bk-band h2{margin:0 0 4px;font-size:20px}.bk-band form{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.bk-in,.bk-sel{background:#0e1117;color:var(--fg);border:1px solid var(--line);border-radius:10px;padding:11px 12px;font:15px/1.3 inherit;min-width:0}.bk-in:focus,.bk-sel:focus{outline:2px solid var(--cyan);outline-offset:1px}
.bk-band .bk-in{flex:1 1 180px}.bk-hp{position:absolute;left:-9999px;opacity:0}
.bk-msg{margin:8px 0 0;font-size:14px;min-height:1em}.bk-msg.ok{color:#7ff0a8}.bk-msg.err{color:#ff8087}
.bk-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin:12px 0}.bk-steps div{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px}
.bk-steps b{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--red);margin-bottom:6px}
/* book page */
.bk-top{display:grid;grid-template-columns:minmax(240px,380px) minmax(0,1fr);gap:32px;align-items:start;margin-top:10px}
.bk-cover{position:sticky;top:12px;background:linear-gradient(160deg,color-mix(in srgb,var(--ac) 28%,#0b0c10),#0b0c10);border-radius:18px;padding:22px;border:1px solid var(--line)}
.bk-cover img,.bk-cover .ph{width:100%;display:block;border-radius:8px;box-shadow:0 14px 40px #000b}.bk-cover .ph{aspect-ratio:210/297;background:#1d2029;display:grid;place-items:center;color:var(--muted)}
.bk-info .cl{font:800 13px/1 ui-monospace,monospace;letter-spacing:.1em;color:var(--ac)}.bk-info h1{margin:6px 0 6px}.bk-info .lede{margin:0 0 10px}
.bk-price{display:flex;align-items:baseline;gap:10px;margin:14px 0 2px}.bk-price b{font-size:38px}.bk-price s{color:var(--muted)}.bk-price small{color:var(--muted)}
.bk-facts{border-collapse:collapse;width:100%;max-width:560px;margin:14px 0}.bk-facts th,.bk-facts td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);font-size:15px}.bk-facts th{color:var(--muted);width:150px;font-weight:600}
.bk-secure{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:10px;color:var(--muted);font-size:13px}
/* preview viewer */
.bk-prev{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:14px;margin:8px 0}
.bk-stage{position:relative;display:grid;place-items:center;background:#07080b;border-radius:12px;min-height:300px;padding:10px;user-select:none}
.bk-stage img{max-height:78vh;width:auto;max-width:100%;border-radius:4px;display:block;-webkit-user-drag:none}
.bk-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:1px solid #fff3;background:#000a;color:#fff;font-size:22px;cursor:pointer}.bk-nav.l{left:8px}.bk-nav.r{right:8px}.bk-nav[disabled]{opacity:.3;cursor:default}
.bk-thumbs{display:flex;gap:8px;overflow-x:auto;padding:10px 2px 2px}.bk-thumbs button{flex:0 0 auto;width:66px;border:2px solid transparent;border-radius:6px;background:none;padding:0;cursor:pointer;opacity:.7}.bk-thumbs button.on{border-color:var(--ac);opacity:1}.bk-thumbs img{width:100%;display:block;border-radius:4px}
.bk-thumbs .lk{width:66px;aspect-ratio:210/297;border-radius:6px;border:2px dashed #3d4455;display:grid;place-items:center;color:var(--muted);font-size:20px;background:#0e1117}
.bk-lock{width:min(520px,92%);aspect-ratio:210/297;max-height:78vh;border-radius:8px;position:relative;overflow:hidden;display:grid;place-items:center;text-align:center;padding:22px;background:#12151c}
.bk-lock::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(180deg,#1b1f29 0 10px,transparent 10px 24px);filter:blur(3px);opacity:.9;mask:linear-gradient(#000 0 50%,transparent)}
.bk-lock>div{position:relative}.bk-lock .ic{width:62px;height:62px;border-radius:50%;background:var(--red);display:grid;place-items:center;margin:0 auto 10px;font-size:28px}
.bk-lock h3{font-size:22px}.bk-lock p{color:var(--muted);margin:6px 0 14px}
.bk-toc{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:6px 18px;max-width:760px}
.bk-toc .row{display:flex;gap:10px;padding:6px 0;border-bottom:1px dotted #2d3340;font-size:15px}.bk-toc .row span.t{flex:1}.bk-toc .row span.p{color:var(--muted);font-variant-numeric:tabular-nums}
.bk-toc .unit{font-weight:800;color:var(--ac);padding-top:12px}.bk-toc .project{padding-left:22px;color:var(--muted);font-size:14px}.bk-toc .chapter{padding-left:6px}
.bk-hc{display:flex;gap:14px;flex-wrap:wrap;align-items:center;background:var(--panel);border:1px dashed #3d4455;border-radius:14px;padding:14px 16px;margin:16px 0;max-width:760px}
/* pay modal */
.tpm{position:fixed;inset:0;z-index:9999;background:#000b;display:flex;align-items:flex-start;justify-content:center;overflow:auto;padding:16px}
.tpm .box{background:#12151c;border:1px solid #2d3340;border-radius:18px;max-width:520px;width:100%;margin:auto;padding:20px 20px 22px;position:relative}
.tpm h3{font-size:21px;margin:0 28px 2px 0}.tpm .x{position:absolute;right:12px;top:10px;background:none;border:0;color:var(--muted);font-size:26px;cursor:pointer}
.tpm label{display:block;font-size:13px;color:var(--muted);margin:10px 0 3px}.tpm .bk-in{width:100%}
.tpm .sum{display:flex;justify-content:space-between;gap:10px;background:#0e1117;border:1px solid var(--line);border-radius:12px;padding:10px 14px;margin:10px 0}.tpm .sum b{font-size:22px}
.tpm .qr{display:flex;justify-content:center;margin:12px 0}.tpm .qr canvas,.tpm .qr img{background:#fff;padding:10px;border-radius:12px;width:210px;height:210px}
.tpm .upi{display:flex;gap:8px;align-items:center;justify-content:space-between;background:#0e1117;border:1px solid var(--line);border-radius:10px;padding:8px 10px;margin:6px 0;font-size:15px;word-break:break-all}.tpm .upi button{flex:none}
.tpm details{margin:10px 0;border:1px solid var(--line);border-radius:10px;padding:8px 12px;background:#0e1117}.tpm details summary{cursor:pointer;font-weight:700}
.tpm .kv{display:grid;grid-template-columns:110px 1fr;gap:3px 8px;font-size:14px;margin-top:8px}.tpm .kv span{color:var(--muted)}
.tpm .note{font-size:13px;margin:8px 0}.tpm .chk{display:flex;gap:8px;align-items:flex-start;font-size:13px;color:var(--muted);margin:12px 0 4px}.tpm .chk input{margin-top:3px}
.tpm .row2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.bk-ok{text-align:center;padding:8px 0}.bk-ok .big{font-size:46px}
.bk-spin{display:inline-block;width:16px;height:16px;border:2px solid #fff5;border-top-color:#fff;border-radius:50%;animation:bks .8s linear infinite;vertical-align:-3px}@keyframes bks{to{transform:rotate(360deg)}}
.bk-narrow{max-width:560px;margin:10px auto}
@media(max-width:820px){.bk-hero,.bk-top{grid-template-columns:1fr}.bk-cover{position:static;max-width:340px;margin:0 auto}.bk-hero .covers{order:-1}}
@media(max-width:480px){.tpm .row2{grid-template-columns:1fr}.bk-btn{width:100%;justify-content:center}}

.bk-faq{margin:34px 0}.bk-faq details{border:1px solid #ffffff1f;border-radius:12px;padding:12px 16px;margin:8px 0;background:#ffffff08}.bk-faq summary{cursor:pointer;font-weight:700}.bk-faq p{margin:8px 0 0;color:#a9b2c3}.bk-seo h2{font-size:20px}.bk-seo ol{columns:2;column-gap:28px;padding-left:20px}@media(max-width:700px){.bk-seo ol{columns:1}}