.nbr{
	--nbr-accent:#12482A;
	--nbr-h:760px;
	position:relative;display:flex;flex-direction:column;
	height:var(--nbr-h);min-height:420px;max-height:92vh;margin:16px 0;
	background:#2b2f2d;border-radius:12px;overflow:hidden;color:#fff;
	font-family:inherit;outline:none;user-select:none;-webkit-user-select:none;
}
.nbr:fullscreen{max-height:none;height:100vh;margin:0;border-radius:0}
.nbr *{box-sizing:border-box}

/* Toolbar */
.nbr-toolbar{display:flex;align-items:center;gap:6px;padding:8px 10px;background:var(--nbr-accent);flex-wrap:wrap;z-index:5}
.nbr-title{flex:1 1 140px;min-width:0;font-weight:600;font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 6px}
.nbr-btn{
	border:0;background:rgba(255,255,255,.14);color:#fff;border-radius:8px;min-width:36px;height:36px;
	padding:0 10px;font-size:1rem;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;font-family:inherit;line-height:1;
}
.nbr-btn:hover{background:rgba(255,255,255,.28);color:#fff;text-decoration:none}
.nbr-btn[disabled]{opacity:.35;cursor:default}
.nbr-btn.on{background:rgba(255,255,255,.35)}
.nbr-pager{display:inline-flex;align-items:center;gap:6px;font-size:.9rem}
.nbr-pager input{width:56px;height:34px;border:0;border-radius:8px;text-align:center;font-size:.95rem;font-family:inherit;color:#111}

/* Main area */
.nbr-main{position:relative;flex:1;display:flex;min-height:0}
.nbr-thumbs{
	width:0;overflow-y:auto;overflow-x:hidden;background:#222625;transition:width .25s;flex:none;
}
.nbr.thumbs-open .nbr-thumbs{width:130px}
.nbr-thumb{display:block;width:100px;margin:10px auto;padding:0;border:2px solid transparent;border-radius:4px;background:#fff;cursor:pointer;position:relative;min-height:130px}
.nbr-thumb canvas{display:block;width:100%;height:auto}
.nbr-thumb span{position:absolute;left:0;right:0;bottom:0;background:rgba(0,0,0,.6);color:#fff;font-size:.72rem;text-align:center}
.nbr-thumb.cur{border-color:#f5b301}

.nbr-stage{flex:1;display:flex;overflow:auto;padding:16px;min-width:0;cursor:default;touch-action:pan-x pan-y pinch-zoom}
.nbr-stage.pan{cursor:grab}
.nbr-stage.dragging{cursor:grabbing}
.nbr-shift{margin:auto;flex:none;transition:transform .7s ease-in-out}
.nbr-book{position:relative;perspective:2400px;}

.nbr-page{position:absolute;top:0;background:#fff;overflow:hidden;box-shadow:0 4px 18px rgba(0,0,0,.45)}
.nbr-page canvas,.nbr-face canvas{display:block;width:100%;height:100%}
.nbr-page.nbr-empty{background:transparent;box-shadow:none}
.nbr-page::after,.nbr-face::after{content:"";position:absolute;top:0;bottom:0;width:6%;pointer-events:none}
.nbr-left::after{right:0;background:linear-gradient(to left,rgba(0,0,0,.28),transparent)}
.nbr-right::after{left:0;background:linear-gradient(to right,rgba(0,0,0,.28),transparent)}
.nbr.single .nbr-page::after{display:none}

.nbr-flip{position:absolute;top:0;display:none;transform-style:preserve-3d;pointer-events:none;z-index:3}
.nbr-face{position:absolute;inset:0;background:#fff;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.nbr-face.back{transform:rotateY(180deg)}
.nbr-flip.dir-next .nbr-face.front::after{left:0;background:linear-gradient(to right,rgba(0,0,0,.28),transparent)}
.nbr-flip.dir-next .nbr-face.back::after{right:0;background:linear-gradient(to left,rgba(0,0,0,.28),transparent)}
.nbr-flip.dir-prev .nbr-face.front::after{right:0;background:linear-gradient(to left,rgba(0,0,0,.28),transparent)}
.nbr-flip.dir-prev .nbr-face.back::after{left:0;background:linear-gradient(to right,rgba(0,0,0,.28),transparent)}

/* single page transition */
.nbr.single .nbr-right{transition:opacity .18s ease,transform .18s ease}
.nbr.single .nbr-right.out-next{opacity:0;transform:translateX(-24px)}
.nbr.single .nbr-right.out-prev{opacity:0;transform:translateX(24px)}

/* click zones */
.nbr-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:42px;height:64px;border:0;border-radius:10px;background:rgba(0,0,0,.35);color:#fff;font-size:1.6rem;cursor:pointer}
.nbr-nav:hover{background:rgba(0,0,0,.6)}
.nbr-nav.prev{left:8px}
.nbr-nav.next{right:8px}
.nbr.thumbs-open .nbr-nav.prev{left:138px}
.nbr-nav[disabled]{display:none}

/* Footer slider */
.nbr-footer{padding:8px 14px;background:#1f2321}
.nbr-range{width:100%;accent-color:#f5b301;margin:0}

/* Loading / error */
.nbr-loading{position:absolute;inset:0;z-index:9;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:#2b2f2d;text-align:center;padding:20px}
.nbr-spin{width:38px;height:38px;border:4px solid rgba(255,255,255,.25);border-top-color:#f5b301;border-radius:50%;animation:nbr-spin 1s linear infinite}
.nbr-bar{width:200px;height:6px;border-radius:3px;background:rgba(255,255,255,.2);overflow:hidden}
.nbr-bar i{display:block;height:100%;width:0;background:#f5b301;transition:width .2s}
.nbr-loading a{color:#f5b301}
@keyframes nbr-spin{to{transform:rotate(360deg)}}

@media (max-width:640px){
	.nbr-title{display:none}
	.nbr-btn{min-width:34px;height:34px;padding:0 8px}
	.nbr-stage{padding:8px}
	.nbr.thumbs-open .nbr-thumbs{width:100px}
	.nbr-thumb{width:76px;min-height:100px}
	.nbr.thumbs-open .nbr-nav.prev{left:108px}
}

/* Library grid */
.nbr-library{--nbr-cols:4;display:grid;grid-template-columns:repeat(var(--nbr-cols),1fr);gap:18px;margin:16px 0}
.nbr-card{display:flex;flex-direction:column;gap:8px;text-decoration:none;color:inherit}
.nbr-card:hover{text-decoration:none}
.nbr-card-cover{display:block;aspect-ratio:3/4;background:#eef2ef;border-radius:8px;overflow:hidden;box-shadow:0 3px 12px rgba(0,0,0,.18);transition:transform .15s}
.nbr-card:hover .nbr-card-cover{transform:translateY(-4px)}
.nbr-card-cover img{width:100%;height:100%;object-fit:cover;display:block}
.nbr-card-ph{display:flex;width:100%;height:100%;align-items:center;justify-content:center;font-size:3rem}
.nbr-card-title{font-weight:600;text-align:center;line-height:1.35;color:var(--nbr-accent)}
.nbr-pagination{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0}
.nbr-pagination .page-numbers{padding:6px 12px;border:1px solid #dfe6e1;border-radius:6px;text-decoration:none}
.nbr-pagination .current{background:var(--nbr-accent,#12482A);color:#fff;border-color:transparent}
@media (max-width:820px){.nbr-library{grid-template-columns:repeat(min(var(--nbr-cols),3),1fr)}}
@media (max-width:520px){.nbr-library{grid-template-columns:repeat(2,1fr)}}