:root{
  --bg:#f2f4f4;--surface:#fff;--ink:#0f1111;--muted:#565959;--line:#d5d9d9;--soft:#f0f2f2;
  --nav:#0b5345;--nav2:#0e6655;--link:#007185;--accent:#ffd814;--orange:#ff6a00;--price:#b12704;--ok:#067d62;--pink:#e6007e;
  --ui:"Helvetica Neue",Arial,"Segoe UI",system-ui,sans-serif;--read:Georgia,"Times New Roman",serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:var(--bg);color:var(--ink);font:16px/1.5 var(--ui)}
a{color:inherit}button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.sr{position:absolute;left:-9999px}
.wrap{max-width:1280px;margin:0 auto;padding:0 16px}
h1,h2,h3{margin:0;line-height:1.15;text-wrap:balance}
h1{font-size:clamp(1.6rem,4vw,2.1rem)}h2{font-size:1.3rem}h3{font-size:1.05rem}
p{margin:0}
.muted{color:var(--muted)}.small{font-size:.82rem}
/* header */
header.top{position:sticky;top:0;z-index:30;background:var(--nav);color:#fff}
.bar1{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:8px 0}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;font-size:1.3rem;padding:4px 6px;border:1px solid transparent;border-radius:3px}
.brand:hover{border-color:#fff}
.brand i{width:28px;height:28px;border-radius:6px;background:var(--orange);display:inline-grid;place-items:center;font-style:normal;font-weight:700}
.brand b{color:#ffb347}
.search{flex:1 1 260px;display:flex;min-width:0}
.search input{flex:1;min-width:0;border:0;border-radius:6px 0 0 6px;padding:10px 12px;color:#111}
.search button{border:0;background:var(--pink);color:#fff;border-radius:0 6px 6px 0;padding:0 16px;font-size:1.1rem}
.hnav{display:flex;gap:2px;align-items:center;flex-wrap:wrap}
.hnav a,.hnav button{background:none;border:1px solid transparent;border-radius:3px;color:#fff;text-decoration:none;padding:5px 9px;display:flex;flex-direction:column;line-height:1.15;text-align:left}
.hnav a:hover,.hnav button:hover,.hnav a[aria-current="page"]{border-color:#fff}
.hnav small{font-size:.72rem;color:#cfe}.hnav b{font-size:.9rem}
.cnt{background:var(--accent);color:#111;border-radius:99px;padding:0 7px;font-size:.75rem;font-weight:700;margin-left:4px}
.bar2{background:var(--nav2)}
.bar2 .wrap{display:flex;gap:4px;flex-wrap:wrap;padding-top:4px;padding-bottom:4px}
.bar2 a{padding:5px 10px;border:1px solid transparent;border-radius:3px;text-decoration:none;font-size:.9rem}
.bar2 a:hover,.bar2 a[aria-current="page"]{border-color:#fff}
main{padding:14px 0 70px;min-height:70vh}
/* buttons */
.btn{display:inline-block;text-align:center;border:1px solid #d5d9d9;background:#fff;border-radius:99px;padding:9px 18px;text-decoration:none;font-size:.95rem}
.btn:hover{background:#f7fafa}
.btn.primary{background:var(--accent);border-color:#fcd200}.btn.primary:hover{background:#f7ca00}
.btn.orange{background:var(--orange);border-color:#e65f00;color:#fff}.btn.orange:hover{background:#e65f00}
.btn.danger{border-color:#c40000;color:#c40000}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.btn.sm{padding:5px 12px;font-size:.85rem}
.btn.block{display:block;width:100%}
/* hero */
.hero{display:grid;grid-template-columns:1.25fr 1fr 1fr 1fr;gap:14px;margin:6px 0 14px}
.tile{border-radius:10px;padding:22px;color:#fff;display:flex;flex-direction:column;justify-content:space-between;gap:14px;min-height:260px;position:relative;overflow:hidden}
.tile h2{font-size:clamp(1.3rem,2.5vw,1.9rem);font-weight:800;letter-spacing:-.02em}
.tile p{margin-top:8px;opacity:.95}
.t1{background:linear-gradient(160deg,#ff6a00,#ff3d00 70%)}.t2{background:linear-gradient(160deg,#00a38c,#006e63)}
.t3{background:linear-gradient(160deg,#7b3fe4,#4a1fa8)}.t4{background:linear-gradient(160deg,#ffd814,#ff9d00);color:#111}
.tile .shot{align-self:flex-end;width:46%;max-width:140px;border-radius:5px;box-shadow:0 10px 24px rgba(0,0,0,.35);transform:rotate(3deg)}
.tile .go{align-self:flex-start;background:#fff;color:#111;border-radius:99px;padding:8px 16px;font-weight:700;text-decoration:none;font-size:.9rem}
.tile .big{font-size:3rem}
.promo{background:#111;color:#fff;border-radius:10px;padding:12px 18px;margin-bottom:14px;display:flex;gap:10px;align-items:center;justify-content:center;text-align:center;flex-wrap:wrap}
.promo b{color:var(--accent)}
.cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:14px}
.cats a{border-radius:10px;padding:16px;min-height:110px;text-decoration:none;color:#111;display:flex;flex-direction:column;justify-content:space-between;font-weight:800;font-size:1.05rem}
.cats a small{font-weight:500;color:#333}
.c1{background:#ffe08a}.c2{background:#bfe9c9}.c3{background:#bcd8ff}.c4{background:#e3c9ff}
@media(max-width:900px){.hero{grid-template-columns:1fr 1fr}.tile{min-height:220px}}
@media(max-width:520px){.hero{grid-template-columns:1fr}}
/* shelves and cards */
.box{background:var(--surface);border-radius:10px;padding:16px 18px;margin-bottom:14px;box-shadow:0 1px 2px rgba(0,0,0,.06)}
.box>h2{margin-bottom:12px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:18px}
.card{display:flex;flex-direction:column;gap:6px;text-decoration:none;min-width:0}
.cover{width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:4px;box-shadow:0 3px 10px rgba(0,0,0,.2);display:block;background:#ddd}
.card .t{color:var(--link);line-height:1.25}.card:hover .t{color:#c45500;text-decoration:underline}
.stars{color:#ffa41c;letter-spacing:1px}
.pr{color:var(--price);font-weight:700}
.tags{display:flex;gap:6px;flex-wrap:wrap}
.pill{display:inline-block;padding:2px 9px;border-radius:99px;background:#e6f4f1;color:var(--ok);font-size:.75rem;font-weight:700}
.pill.o{background:#ffe3c2;color:#8a3b00}.pill.p{background:#f0e4ff;color:#4a1fa8}
/* book page */
.book3{display:grid;grid-template-columns:minmax(150px,240px) minmax(0,1fr) 290px;gap:26px;align-items:start}
@media(max-width:980px){.book3{grid-template-columns:minmax(130px,200px) 1fr}.book3 .buybox{grid-column:1/-1}}
@media(max-width:560px){.book3{grid-template-columns:1fr}.book3 .cover{max-width:200px}}
.buybox{border:1px solid var(--line);border-radius:10px;padding:16px;display:grid;gap:10px}
.buybox .price{color:var(--price);font-size:1.5rem}
.buybox hr{border:0;border-top:1px solid var(--line);width:100%;margin:2px 0}
.bar{height:8px;border-radius:99px;background:var(--soft);overflow:hidden}.bar i{display:block;height:100%;background:var(--orange)}
ul.plain{margin:10px 0 0;padding-left:20px;display:grid;gap:6px}
.apimgs{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:18px}
.apimgs>div{border-radius:10px;min-height:150px;padding:16px;display:flex;flex-direction:column;justify-content:flex-end;color:#fff;font-weight:700;line-height:1.25}
.a1{background:linear-gradient(150deg,#0b5345,#1d3b4d)}.a2{background:linear-gradient(150deg,#7a2d0a,#ff6a00)}.a3{background:linear-gradient(150deg,#4a1fa8,#e6007e)}.a4{background:linear-gradient(150deg,#006e63,#00a38c)}
.apcols{display:grid;grid-template-columns:1fr 1fr;gap:24px}@media(max-width:700px){.apcols{grid-template-columns:1fr}}
audio{width:100%}
/* forms */
.form{max-width:420px;margin:30px auto;display:grid;gap:12px}
label{display:grid;gap:4px;font-weight:700;font-size:.9rem}
input[type=text],input[type=email],input[type=password],input[type=number],textarea,select{border:1px solid #888;border-radius:6px;padding:10px;background:#fff;width:100%}
.err{background:#fdecea;border:1px solid #f5c2c0;color:#8a1f17;border-radius:8px;padding:10px 12px}
.okmsg{background:#e6f4f1;border:1px solid #b6e0d6;color:#05503f;border-radius:8px;padding:10px 12px}
/* cart */
.line{display:grid;grid-template-columns:70px 1fr auto auto;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.line .cover{box-shadow:none}
.sum{display:grid;gap:6px;margin-top:14px;max-width:380px;margin-left:auto}
.sum div{display:flex;justify-content:space-between}.sum .tot{font-size:1.2rem;font-weight:700;border-top:1px solid var(--line);padding-top:8px}
.free{color:var(--ok);font-weight:700}
/* library */
.shelf{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.item{display:grid;grid-template-columns:84px 1fr;gap:12px;border:1px solid var(--line);border-radius:10px;padding:12px}
.item .row{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:1.05rem;background:var(--soft);padding:2px 8px;border-radius:6px}
/* reader */
.reader{max-width:720px;margin:0 auto}
.rbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:space-between;margin-bottom:14px}
.rbar select{width:auto;max-width:100%}
.page{background:var(--surface);border-radius:10px;padding:clamp(18px,4vw,44px);font-family:var(--read);font-size:var(--fs,19px);line-height:1.75;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.page h1,.page h2{font-family:var(--ui);margin:0 0 18px}
.page p{margin:0 0 1em}.page li{margin-bottom:.4em}
.wm{margin-top:28px;text-align:center;font:12px var(--ui);color:#999}
body.sepia .page{background:#f4ecd8;color:#3b3226}body.dark .page{background:#1b1d1f;color:#d8d8d8}
body.dark .wm,body.sepia .wm{color:#8a7f6a}
@media print{body *{display:none!important}}
/* player */
.player{max-width:760px;margin:0 auto;display:grid;grid-template-columns:150px 1fr;gap:20px;align-items:start}
@media(max-width:560px){.player{grid-template-columns:1fr}.player .cover{max-width:180px}}
.parts{display:grid;gap:4px;margin-top:14px}
.parts button{text-align:left;background:#fff;border:1px solid var(--line);border-radius:8px;padding:8px 12px}
.parts button[aria-current="true"]{border-color:var(--orange);background:#fff4ea;font-weight:700}
.ctrl{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;align-items:center}
/* modal + toast */
.ov{position:fixed;inset:0;background:rgba(0,0,0,.55);display:grid;place-items:center;z-index:60;padding:16px}
.modal{background:#fff;border-radius:12px;padding:22px;max-width:440px;width:100%;display:grid;gap:12px}
.starpick{display:flex;gap:4px}.starpick button{background:none;border:0;font-size:2rem;color:#ccc;padding:0}.starpick button.on{color:#ffa41c}
#toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:#111;color:#fff;padding:10px 18px;border-radius:99px;z-index:70;opacity:0;transition:opacity .2s;pointer-events:none;max-width:90vw;text-align:center}
#toast.on{opacity:1}
footer{border-top:1px solid var(--line);padding:22px 0;color:var(--muted);font-size:.85rem}
footer a{margin-right:14px}
.empty{padding:26px;text-align:center;color:var(--muted)}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.presets{display:flex;gap:8px;flex-wrap:wrap}
.presets button{border:1px solid #888;background:#fff;border-radius:8px;padding:8px 14px}.presets button.on{border-color:var(--orange);background:#fff4ea;font-weight:700}

.promo{padding:8px 14px;margin-bottom:10px;font-size:.92rem}
.grid.big{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:24px}
.grid.big .card{font-size:1.05rem}
.grid.big .card .t{font-weight:700}

.samp{margin-top:12px;display:grid;gap:6px}.samp audio{width:100%}
.apcols{display:block}