*{margin:0;padding:0;box-sizing:border-box}

body{
font-family:'Lora','Georgia',serif;
background:linear-gradient(135deg,#065f46,#0f766e);
min-height:100vh;
padding:5rem 2rem 2rem
}

/* ===== TOPBAR ===== */
#kviz-topbar{
position:fixed;top:0;left:0;right:0;z-index:9999;
height:44px;
background:rgba(4,47,35,0.97);
backdrop-filter:blur(8px);
border-bottom:1px solid rgba(255,255,255,0.1);
display:flex;align-items:center;
justify-content:space-between;
padding:0 1.2rem;
font-family:'Lora','Georgia',serif;
font-size:0.82rem
}
#kviz-topbar .tb-left{
display:flex;align-items:center;gap:0.4rem;
color:rgba(255,255,255,0.7);
min-width:0;overflow:hidden
}
#kviz-topbar .tb-left a{
color:#fbbf24;text-decoration:none;
font-weight:600;white-space:nowrap
}
#kviz-topbar .tb-left a:hover{text-decoration:underline}
#kviz-topbar .tb-sep{margin:0 2px;opacity:0.5}
#kviz-topbar .tb-current{
color:rgba(255,255,255,0.85);font-weight:600;
white-space:nowrap;overflow:hidden;
text-overflow:ellipsis;max-width:220px
}
#kviz-topbar .tb-right{
display:flex;align-items:center;
gap:0.5rem;flex-shrink:0;margin-left:1rem;
color:rgba(255,255,255,0.85)
}
#kviz-topbar .tb-name{
color:#fbbf24;font-weight:700;white-space:nowrap
}
#kviz-topbar .tb-score{
color:#92400e;
background:linear-gradient(135deg,#fbbf24,#f59e0b);
border:1px solid #f59e0b;
border-radius:20px;padding:3px 12px;
font-size:0.78rem;font-weight:700;white-space:nowrap
}
#kviz-topbar .tb-btn{
background:transparent;
border:1px solid rgba(255,255,255,0.3);
color:rgba(255,255,255,0.85);
padding:3px 12px;border-radius:20px;
font-size:0.78rem;cursor:pointer;
text-decoration:none;transition:all 0.2s;
font-family:inherit;white-space:nowrap
}
#kviz-topbar .tb-btn:hover{background:rgba(255,255,255,0.1);color:#fff}
#kviz-topbar .tb-btn.gold{border-color:#fbbf24;color:#fbbf24}
#kviz-topbar .tb-btn.gold:hover{background:rgba(251,191,36,0.15)}
@media(max-width:500px){
#kviz-topbar .tb-current{max-width:110px}
#kviz-topbar .tb-btn{padding:3px 8px}
}

.page-container{max-width:1400px;margin:0 auto}

/* stari breadcrumb zamijenjen topbarom */

.page-header{
background:rgba(255,255,255,0.95);
border-radius:25px;
padding:3rem;
margin-bottom:2rem;
box-shadow:0 20px 60px rgba(0,0,0,0.3);
text-align:center
}

.page-header h1{
color:#065f46;
font-size:3rem;
margin-bottom:1rem
}

.page-header p{
color:#6b7280;
font-size:1.3rem
}

.books-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
gap:2rem
}

.book-card{
background:white;
border-radius:20px;
overflow:hidden;
box-shadow:0 10px 30px rgba(0,0,0,0.2);
transition:all 0.3s;
cursor:pointer;
text-decoration:none;
color:inherit;
display:flex;
flex-direction:column
}

.book-card:hover{
transform:translateY(-10px);
box-shadow:0 20px 40px rgba(0,0,0,0.3)
}

.book-cover{
width:100%;
height:320px;
display:flex;
align-items:center;
justify-content:center;
padding:1.5rem;
text-align:center;
color:white;
position:relative
}

.cover-placeholder{
width:100%;
height:100%;
border-radius:18px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
border:2px solid rgba(255,255,255,0.25);
background:rgba(255,255,255,0.08);
backdrop-filter:blur(1px)
}

.cover-kicker{
font-size:0.95rem;
letter-spacing:0.08em;
text-transform:uppercase;
opacity:0.9;
margin-bottom:0.8rem
}

.cover-name{
font-size:2rem;
line-height:1.2;
font-weight:700;
max-width:90%
}

.book-info{
padding:1.5rem;
flex:1;
display:flex;
flex-direction:column
}

.book-title{
font-size:1.3rem;
color:#065f46;
font-weight:700;
margin-bottom:0.8rem
}

.book-meta{
display:flex;
gap:1rem;
margin-bottom:1rem;
flex-wrap:wrap
}

.meta-item{
display:flex;
align-items:center;
gap:0.4rem;
color:#6b7280;
font-size:0.85rem
}

.book-stats{
display:flex;
justify-content:space-between;
margin-top:auto;
padding-top:1rem;
border-top:2px solid #f3f4f6
}

.stat{text-align:center}

.stat-value{
font-weight:700;
color:#059669;
font-size:1.1rem
}

.stat-name{
color:#9ca3af;
font-size:0.75rem
}

.read-btn{
display:block;
width:100%;
padding:0.8rem;
background:linear-gradient(135deg,#059669,#047857);
color:white;
text-align:center;
border-radius:10px;
font-weight:600;
margin-top:1rem;
transition:all 0.3s
}

.read-btn:hover{transform:scale(1.02)}

@media (max-width: 768px){
body{padding:1rem}
.page-header{padding:2rem 1.25rem}
.page-header h1{font-size:2.2rem}
.page-header p{font-size:1.05rem}
}