:root{--saffron:#FF9933;--deep:#E8650A;--maroon:#7A1F0B;--cream:#FFF6E8;--ink:#3A1A0A;--green:#138808}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Noto Sans Devanagari','Poppins',system-ui,sans-serif;color:var(--ink);background:var(--cream);line-height:1.55}
.bar{height:7px;background:linear-gradient(90deg,var(--saffron) 0 33%,#fff 33% 66%,var(--green) 66% 100%)}
header.top{background:linear-gradient(135deg,var(--deep),var(--saffron));color:#fff;padding:14px 20px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
header.top .logo{height:54px;width:auto;background:#fff;border-radius:10px;padding:5px 10px}
header.top .t{flex:1;min-width:200px}
header.top .t b{display:block;font-size:20px;font-weight:800}
header.top .t span{font-size:13px;opacity:.95}
nav.top a,nav.top button{color:#fff;background:rgba(255,255,255,.18);border:0;border-radius:30px;padding:8px 16px;margin-left:8px;text-decoration:none;font:inherit;font-size:14px;font-weight:600;cursor:pointer}
nav.top a:hover,nav.top button:hover{background:rgba(255,255,255,.32)}
.motto{background:var(--maroon);color:#ffe9cf;text-align:center;padding:8px;font-weight:700;letter-spacing:.5px}
main{max-width:1100px;margin:0 auto;padding:22px 16px 50px}
.card{background:#fff;border-radius:14px;box-shadow:0 4px 18px rgba(122,31,11,.10);padding:20px;border-top:5px solid var(--saffron)}
h2{color:var(--maroon);margin-bottom:12px;font-size:22px}
.search{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
input,select,textarea{font:inherit;border:1.5px solid #e7c9a5;border-radius:10px;padding:9px 12px;background:#fff;color:var(--ink)}
input:focus,select:focus{outline:2px solid var(--saffron)}
.search input{flex:1;min-width:200px}
.btn{background:var(--deep);color:#fff;border:0;border-radius:30px;padding:9px 20px;font:inherit;font-weight:700;cursor:pointer}
.btn:hover{background:var(--maroon)}
.btn.sec{background:#fff;color:var(--deep);border:1.5px solid var(--deep)}
.btn.sm{padding:5px 12px;font-size:13px}
.btn.red{background:#b3261e}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.chip{background:#fff;border:1.5px solid var(--saffron);color:var(--maroon);border-radius:30px;padding:5px 14px;cursor:pointer;font-size:14px;font-weight:600}
.chip.on{background:var(--saffron);color:#fff}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:16px}
.book{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 3px 12px rgba(0,0,0,.10);text-decoration:none;color:inherit;display:flex;flex-direction:column;transition:transform .15s}
.book:hover{transform:translateY(-3px)}
.book img{width:100%;aspect-ratio:3/4;object-fit:cover;background:#f3e3cc;display:block}
.book .m{padding:10px 12px}
.book .m b{display:block;font-size:15px;color:var(--maroon);line-height:1.3}
.book .m small{color:#7b5a3d;font-size:12px}
.tag{display:inline-block;font-size:11px;font-weight:700;border-radius:20px;padding:1px 9px;margin-top:4px;background:var(--cream);color:var(--deep)}
.hit{padding:10px 0;border-bottom:1px solid #f0dcc0}
.hit a{color:var(--maroon);font-weight:700;text-decoration:none}
.hit mark{background:#ffd9a3;border-radius:3px}
.empty{color:#8a6a4c;padding:30px;text-align:center}
.modal{position:fixed;inset:0;background:rgba(40,15,5,.55);display:none;align-items:center;justify-content:center;z-index:50;padding:16px}
.modal.on{display:flex}
.modal .card{width:100%;max-width:380px}
.modal label{display:block;font-size:13px;font-weight:700;margin:10px 0 4px;color:var(--maroon)}
.modal input{width:100%}
.err{color:#b3261e;font-size:14px;margin-top:8px;min-height:20px}
footer{background:var(--maroon);color:#ffe9cf;text-align:center;padding:18px;font-size:13px}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{padding:8px 6px;border-bottom:1px solid #f0dcc0;text-align:left;vertical-align:middle}
th{color:var(--maroon)}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.row{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin-bottom:10px}
.row input,.row select{width:100%}
.note{font-size:13px;color:#7b5a3d;margin-top:6px}
.ok{color:var(--green);font-weight:700}
/* reader */
body.reader{background:#2b2b2b;color:#fff;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.rbar{position:sticky;top:0;z-index:10;background:var(--maroon);display:flex;align-items:center;gap:8px;padding:8px 12px;flex-wrap:wrap}
.rbar .title{flex:1;min-width:140px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rbar button,.rbar input{background:rgba(255,255,255,.16);color:#fff;border:0;border-radius:8px;padding:6px 12px;font:inherit;font-size:14px;cursor:pointer}
.rbar input{width:64px;text-align:center;cursor:text}
.rbar a{color:#ffe9cf;text-decoration:none;font-size:14px}
.stage{display:flex;justify-content:center;padding:14px 8px 40px}
canvas{max-width:100%;background:#fff;box-shadow:0 6px 30px rgba(0,0,0,.5);pointer-events:none}
.msg{max-width:520px;margin:60px auto;text-align:center;padding:0 16px}
body.reader.hide .stage{filter:blur(24px)}
@media print{body{display:none!important}}
@media(max-width:600px){header.top .t b{font-size:17px}}

/* page-flip feel */
.stage{perspective:1800px}
#cv{transform-origin:left center;backface-visibility:hidden}
#cv.flip-next{animation:flipNext .45s ease-out}
#cv.flip-prev{animation:flipPrev .45s ease-out;transform-origin:right center}
@keyframes flipNext{from{transform:rotateY(-70deg);opacity:.35;filter:brightness(.8)}to{transform:none;opacity:1;filter:none}}
@keyframes flipPrev{from{transform:rotateY(70deg);opacity:.35;filter:brightness(.8)}to{transform:none;opacity:1;filter:none}}