.book-bg{
position:fixed;
inset:0;
background:
radial-gradient(circle at top left,#7c3aed44,transparent 25%),
radial-gradient(circle at bottom right,#06b6d444,transparent 25%);
z-index:-1;
}

.reader-page{
max-width:1400px;
margin:auto;
padding:40px 20px 80px;
}

.reader-card{
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.08);
border-radius:30px;
padding:35px;
backdrop-filter:blur(10px);
}

.reader-header{
display:flex;
gap:35px;
align-items:flex-start;
}

.reader-cover{
width:300px;
border-radius:24px;
object-fit:cover;
flex-shrink:0;
box-shadow:0 0 30px rgba(0,0,0,.35);
}

.reader-info{
flex:1;
}

.reader-info h1{
font-size:52px;
margin-bottom:15px;
}

.description{
font-size:18px;
line-height:1.7;
opacity:.9;
max-width:800px;
}

.big-rating{
margin-top:25px;
font-size:26px;
font-weight:bold;
}

.rating-form{
display:flex;
gap:15px;
margin-top:20px;
align-items:center;
}

.rating-form select{
width:180px;
}

.download-row{
margin-top:25px;
}

.reader-frame{
margin-top:40px;
}

.reader-frame iframe{
width:100%;
height:900px;
border:none;
border-radius:24px;
background:white;
}

.comments-box{
margin-top:50px;
}

.comments-box h2{
font-size:38px;
margin-bottom:25px;
}

.comment-form{
display:flex;
flex-direction:column;
gap:20px;
}

.comment{
margin-top:25px;
padding:25px;
background:rgba(255,255,255,.06);
border-radius:22px;
border:1px solid rgba(255,255,255,.06);
}

.comment-top{
display:flex;
justify-content:space-between;
margin-bottom:15px;
}

.comment p{
line-height:1.7;
opacity:.92;
}

.back-btn{
display:inline-block;
margin-bottom:25px;
}

@media(max-width:1000px){

.reader-header{
flex-direction:column;
}

.reader-cover{
width:100%;
max-width:420px;
}

.reader-info h1{
font-size:40px;
}

.rating-form{
flex-direction:column;
align-items:stretch;
}

}

@media(max-width:700px){

.reader-card{
padding:20px;
}

.reader-info h1{
font-size:32px;
}

.comments-box h2{
font-size:28px;
}

.reader-frame iframe{
height:600px;
}

}