body{
background:#fff2f8;
background-image:
 radial-gradient(circle at top left, rgba(255,226,244,0.45) 0, transparent 18px),
 radial-gradient(circle at bottom right, rgba(255,212,234,0.35) 0, transparent 18px),
 linear-gradient(180deg, #fff7fb 0%, #fff0f7 100%);
font-family:'Quicksand',sans-serif;
color:#7b6670;
margin:0;
padding:24px;
}

.container{
max-width:1240px;
margin:auto;
background: rgba(255,255,255,0.95);
border:3px solid rgba(245,212,229,0.9);
border-radius:40px;
box-shadow:0 18px 50px rgba(215,156,173,0.12);
backdrop-filter: blur(4px);
padding:18px 22px 26px;
position:relative;
}

.container::before{
content:'';
position:absolute;
top:-10px;
left:50%;
transform:translateX(-50%);
width:calc(100% - 40px);
height:calc(100% + 20px);
border:2px dashed rgba(247,211,225,0.65);
pointer-events:none;
border-radius:40px;
}

header{
background: url("imagens/fotocinco.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;

border:2px solid #f5d4e5;
border-radius:32px;
padding:32px 24px;
text-align:center;
margin-bottom:28px;
box-shadow:0 8px 30px rgba(215,156,173,.12);
position:relative;
}

header::before{
content:'✧';
position:absolute;
top:18px;
left:18px;
font-size:28px;
color:rgba(215,156,173,0.32);
}

header::after{
content:'❀';
position:absolute;
top:18px;
right:18px;
font-size:24px;
color:rgba(215,156,173,0.32);
}

.logo{
font-family:'Sacramento',cursive;
font-size:98px;
color:#d679b5;

text-shadow:
0 0 8px rgba(255,255,255,.9),
0 0 20px rgba(255,220,235,.8),
2px 2px 5px rgba(0,0,0,.2);
}

.subtitle{
margin-top:-10px;
color:#b36c8d;
font-size:18px;
letter-spacing:0.05em;
}

nav{
margin-top:20px;
display:inline-flex;
flex-wrap:wrap;
justify-content:center;
background: rgba(255,241,245,0.95);
border:1px solid #f5d4e5;
border-radius:999px;
padding:10px 12px;
box-shadow:0 7px 20px rgba(215,156,173,0.08);
}

nav a{
display:inline-block;
background:#fff5f9;
padding:10px 16px;
margin:5px;
border-radius:999px;
text-decoration:none;
color:#7b6670;
border:1px solid #f2dce3;
transition: all 0.25s ease;
font-size:14px;
}

nav a:hover{
background:#f8e2f0;
border-color:#d79cad;
transform:translateY(-1px);
}

.grid{
display:grid;
grid-template-columns:280px minmax(520px,1fr) 320px;
gap:18px;
align-items:start;
}

.tags{
display:grid;
grid-template-columns:repeat(2, minmax(120px, 1fr));
gap:10px;
}

.tag{
background:#fff5f9;
border:1px solid #f5d4e5;
border-radius:999px;
padding:8px 10px;
font-size:13px;
color:#7b6670;
text-align:center;
white-space:normal;
word-break:break-word;
}

.col-left,
.col-center,
.col-right{
display:flex;
flex-direction:column;
gap:18px;
}

.col-center{
background: rgba(255,244,249,0.95);
border:2px dashed rgba(245,212,229,0.95);
border-radius:34px;
padding:18px;
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5);
}

.col-left{
background: rgba(255,245,250,0.9);
border:1px solid rgba(245,212,229,0.95);
border-radius:34px;
padding:14px;
}

.col-right{
background: rgba(255,245,250,0.9);
border:1px solid rgba(245,212,229,0.95);
border-radius:34px;
padding:14px;
}

.grid-center{
display:grid;
grid-template-columns:1fr;
gap:15px;
}

.bookshelf-layout{
display:grid;
grid-template-columns:260px 1fr;
gap:18px;
}

.bookshelf-sidebar{
display:flex;
flex-direction:column;
gap:18px;
}

.sidebar-panel{
background:#fff;
border:1px solid #f3d9e4;
border-radius:24px;
padding:18px;
box-shadow:0 10px 25px rgba(215,156,173,0.08);
}

.sidebar-heading{
font-weight:700;
color:#b86493;
margin-bottom:14px;
letter-spacing:0.05em;
text-transform:uppercase;
font-size:12px;
}

.sidebar-list,
.sidebar-list a{
display:block;
}

.sidebar-list a{
color:#7b6670;
text-decoration:none;
padding:10px 12px;
border-radius:16px;
margin-bottom:8px;
transition: all 0.2s ease;
font-size:14px;
}

.sidebar-list a:hover,
.sidebar-list a.active{
background:#fff1f6;
color:#a35c8f;
}

.sidebar-panel label{
display:block;
margin-top:12px;
margin-bottom:8px;
font-size:13px;
color:#8a6c7f;
}

.sidebar-panel select{
width:100%;
padding:10px 12px;
border:1px solid #f2dce3;
border-radius:16px;
background:#fff;
color:#7b6670;
font-size:14px;
}

.bookshelf-content{
display:flex;
flex-direction:column;
gap:18px;
}

.bookshelf-header{
display:flex;
align-items:flex-end;
gap:18px;
justify-content:space-between;
background:rgba(255,245,250,0.9);
border:1px solid #f2dce3;
border-radius:28px;
padding:20px 22px;
}

.section-label{
text-transform:uppercase;
letter-spacing:0.15em;
font-size:12px;
color:#b36c8d;
margin-bottom:6px;
}

.bookshelf-header h2{
margin:0;
font-size:30px;
color:#8d5f7a;
}

.bookshelf-header p{
margin:6px 0 0;
color:#7b6670;
line-height:1.6;
max-width:560px;
}

.sort-panel{
display:flex;
flex-direction:column;
gap:8px;
text-align:right;
}

.sort-label{
font-size:12px;
color:#9f7b95;
text-transform:uppercase;
letter-spacing:0.12em;
}

.bookshelf-grid{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
gap:16px;
}

.book-card{
background:white;
border:1px solid #f2dce3;
border-radius:26px;
overflow:hidden;
box-shadow:0 18px 40px rgba(215,156,173,0.08);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.book-card:hover{
transform:translateY(-4px);
box-shadow:0 24px 50px rgba(215,156,173,0.14);
}

.hidden{
display:none!important;
}

.cover{
height:200px;
background:linear-gradient(135deg, #fce7f0 0%, #ffe9f7 100%);
}

.cover-1{background-image:linear-gradient(135deg, #fce7f0, #ffdde6);}
.cover-2{background-image:linear-gradient(135deg, #fdf2eb, #ffe5f4);}
.cover-3{background-image:linear-gradient(135deg, #f7e8ff, #f8dcf5);}
.cover-4{background-image:linear-gradient(135deg, #ede8ff, #f5d4f1);}
.cover-5{background-image:linear-gradient(135deg, #f4eefc, #ffd9ea);}
.cover-6{background-image:linear-gradient(135deg, #f5f0ff, #f9e0f3);}
.cover-7{background-image:linear-gradient(135deg, #f7f8fb, #ffe7ea);}
.cover-8{background-image:linear-gradient(135deg, #f9f1ff, #f7d7eb);}
.cover-9{background-image:linear-gradient(135deg, #fff5f6, #f9e7ff);}
.cover-10{background-image:linear-gradient(135deg, #f4f8ff, #f4d7ef);}
.cover-11{background-image:linear-gradient(135deg, #fdf4f8, #ffdfea);}
.cover-12{background-image:linear-gradient(135deg, #f9eefb, #fee6ef);}
.cover-13{background-image:linear-gradient(135deg, #f6f4ff, #fbe1f2);}
.cover-14{background-image:linear-gradient(135deg, #fdf0f5, #ffd2e6);}
.cover-15{background-image:linear-gradient(135deg, #f2eef9, #ffdce9);}
.cover-16{background-image:linear-gradient(135deg, #f5efff, #ffd0df);}

.book-meta{
padding:18px;
}

.book-title{
font-weight:700;
margin-bottom:8px;
font-size:16px;
color:#8b5f7b;
}

.book-subtitle{
font-size:13px;
line-height:1.5;
color:#8a6c7f;
}

@media (max-width: 1024px) {
.bookshelf-layout{
grid-template-columns:1fr;
}

.bookshelf-header{
flex-direction:column;
align-items:flex-start;
}

.sort-panel{
width:100%;
}
}

@media (max-width: 680px) {
.sidebar-panel,
.bookshelf-header,
.book-card{
padding:16px;
}

.bookshelf-grid{
grid-template-columns:1fr;
}
}

.box{
background:white;
border:2px solid #f2dce3;
border-radius:20px;
padding:15px;
margin-bottom:15px;
box-shadow:0 2px 10px rgba(0,0,0,0.04);
transition: all 0.3s ease;
}

.box:hover{
box-shadow:0 6px 20px rgba(215,156,173,0.15);
transform:translateY(-2px);
}

.box-title{
font-weight:bold;
color:#d79cad;
margin-bottom:10px;
font-size:16px;
letter-spacing:0.5px;
}

.profile{
text-align:center;
}

.avatar{
width:180px;
height:180px;
margin:0 auto 15px;
overflow:hidden;

background:#fff1f5;
border:2px solid #f5d4e5;
border-radius:20px;

    box-shadow:0 8px 20px rgba(215,156,173,.18);
}

.avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
.profile-status{
color:#a88b95;
font-size:14px;
margin-top:12px;
}

.profile-badges{
display:flex;
flex-wrap:wrap;
gap:8px;
justify-content:center;
margin-top:12px;
}

.profile-badge{
background:linear-gradient(135deg, #fff1f5 0%, #fce8ef 100%);
padding:8px 12px;
border-radius:999px;
border:1px solid #f2dce3;
font-size:13px;
color:#7b6670;
}

.profile{
text-align:center;
position:relative;
}

.profile::before{
content:'⁂';
position:absolute;
top:12px;
right:16px;
font-size:28px;
color:rgba(215,156,173,0.3);
}

.tags{
display:flex;
flex-wrap:wrap;
gap:8px;
}

.tag{
background:#fff1f5;
padding:6px 12px;
border-radius:999px;
}

.bookshelf-btn{
display:inline-block;
margin-top:10px;
padding:10px 15px;
background:#fff1f5;
border-radius:999px;
text-decoration:none;
color:#7b6670;
transition: all 0.3s ease;
}

.bookshelf-btn:hover{
background:#f2dce3;
}

.book-item{
background:#fff1f5;
padding:12px;
border-radius:15px;
margin-bottom:10px;
border:1px solid #f2dce3;
}

.book-title{
font-weight:bold;
color:#d79cad;
}

.book-author{
color:#a88b95;
font-size:14px;
}

.book-rating{
color:#d79cad;
}

.social-link{
display:block;
background:#fff1f5;
padding:12px;
margin:8px 0;
border-radius:15px;
text-decoration:none;
color:#7b6670;
border:1px solid #f2dce3;
transition: all 0.3s ease;
}

.social-link:hover{
background:#f2dce3;
}

.social-button{
display:block;
background:#fff1f5;
padding:10px 15px;
margin:8px 0;
border-radius:999px;
text-decoration:none;
color:#7b6670;
border:1px solid #f2dce3;
transition: all 0.3s ease;
}

.social-button:hover{
background:#f2dce3;
transform:translateX(5px);
box-shadow:0 4px 12px rgba(215,156,173,0.2);
}
footer{
text-align:center;
margin-top:20px;
color:#9a8a91;
}

ul{
padding-left:18px;
}

.bfi-text{
font-size:14px;
line-height:1.6;
color:#7b6670;
margin-top:12px;
}

.bfi-text strong{
color:#7b6670;
}

@media(max-width:900px){

.grid{
grid-template-columns:1fr;
}

.logo{
font-size:60px;
  }
}