:root{--bg:#f5f3ee;--card:#fff;--ink:#1f2430;--mut:#6b7280;--pri:#0f5c4d;--pri2:#0b4438;--acc:#c8872b;--line:#e5e2d9;--red:#c0392b;--ok:#1e8e5a;--warn:#d98e04}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 Inter,system-ui,sans-serif}
[dir=rtl] body{font-family:'Noto Nastaliq Urdu',Inter,serif;line-height:2}
a{color:var(--pri);text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 16px}
h1,h2,h3{margin:.4em 0}
.muted{color:var(--mut)}
.btn,button{background:var(--pri);color:#fff;border:0;border-radius:8px;padding:9px 16px;font:inherit;cursor:pointer;display:inline-block}
.btn:hover,button:hover{background:var(--pri2)}
.btn.sm{padding:4px 10px;font-size:13px}.btn.alt{background:#fff;color:var(--pri);border:1px solid var(--pri)}
.btn.red{background:var(--red)}.btn.gold{background:var(--acc)}
input,select,textarea{font:inherit;border:1px solid var(--line);border-radius:8px;padding:8px 10px;background:#fff;color:var(--ink);max-width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid #0f5c4d55}
label{display:block;font-size:13px;color:var(--mut);margin:8px 0 3px}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px;margin-bottom:16px}
.alert{padding:10px 14px;border-radius:8px;margin:10px 0}.alert.ok{background:#e3f5ec;color:#14633f}.alert.err{background:#fde8e6;color:#8c2118}
table{width:100%;border-collapse:collapse}
th,td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:start;vertical-align:middle}
th{font-size:12px;text-transform:uppercase;color:var(--mut);background:#faf9f5}
.r{text-align:end}
.tag{padding:2px 9px;border-radius:99px;font-size:12px;background:#eee}
.tag.paid,.tag.completed,.tag.delivered{background:#dff4e8;color:#14633f}.tag.partial,.tag.confirmed{background:#fdf0d2;color:#8a5a00}
.tag.unpaid,.tag.pending{background:#fde8e6;color:#8c2118}.tag.cancelled{background:#ddd;color:#555}
.pill{background:#e6efe9;color:var(--pri);border-radius:99px;padding:2px 10px;font-size:12px}
.grid{display:grid;gap:16px}.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
.form-row{display:flex;gap:12px;flex-wrap:wrap}.form-row>*{flex:1;min-width:150px}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:end;margin-bottom:12px}
/* shop */
.top{background:var(--pri);color:#fff;position:sticky;top:0;z-index:10}
.top .bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:10px 16px}
.top a{color:#fff}.brand{font-weight:700;font-size:20px}
.top nav{display:flex;gap:14px;align-items:center;margin-inline-start:auto;flex-wrap:wrap}
.top select{padding:5px 8px}.lang{background:#ffffff26;padding:3px 10px;border-radius:99px}
.badge{background:var(--acc);border-radius:99px;padding:0 7px;font-size:12px}
.hero{background:linear-gradient(120deg,var(--pri),#1d7d68);color:#fff;border-radius:16px;padding:28px;margin:16px 0}
.hero h1{margin:0}.hero form{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}.hero input,.hero select{flex:1;min-width:140px}
.books{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px}
.book{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column}
.book .info{padding:12px;display:flex;flex-direction:column;gap:4px;flex:1}
.book .t{font-weight:600}.price{color:var(--pri);font-weight:700}
.cover{aspect-ratio:3/4;background:#ddd}.cover img{width:100%;height:100%;object-fit:cover}
.cover.ph{display:flex;align-items:center;justify-content:center;color:#fff;padding:14px;text-align:center;font-weight:600;font-size:17px}
.cover.sm{width:44px;aspect-ratio:3/4;font-size:7px;padding:2px;flex:none;border-radius:4px;overflow:hidden}
.cats{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}.cats a{background:#fff;border:1px solid var(--line);border-radius:99px;padding:4px 14px}.cats a.on{background:var(--pri);color:#fff}
.foot{text-align:center;color:var(--mut);padding:30px}
.stock-ok{color:var(--ok);font-size:13px}.stock-no{color:var(--red);font-size:13px}
.qty{width:70px}
/* staff */
.layout{display:flex;min-height:100vh}
.side{width:230px;background:#10231f;color:#cfe3dc;flex:none;padding:14px 10px;position:sticky;top:0;height:100vh;overflow:auto}
.side .logo{font-weight:700;font-size:18px;color:#fff;padding:6px 10px 14px}
.side nav a{display:block;color:#cfe3dc;padding:9px 12px;border-radius:8px}.side nav a:hover,.side nav a.on{background:#1d4a40;color:#fff}
.content{flex:1;min-width:0}
.topbar{display:flex;justify-content:space-between;align-items:center;background:#fff;border-bottom:1px solid var(--line);padding:8px 18px;gap:10px;flex-wrap:wrap}
.tools{display:flex;gap:10px;align-items:center}.tools .lang{background:#e6efe9;color:var(--pri)}
.inner{padding:18px}
.stat{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px}.stat b{font-size:22px;display:block}.stat span{color:var(--mut);font-size:13px}
.stat.red b{color:var(--red)}.stat.green b{color:var(--ok)}
/* POS */
.pos{display:grid;grid-template-columns:1.4fr 1fr;gap:14px;align-items:start}
.pos-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;max-height:62vh;overflow:auto;margin-top:10px}
.pitem{background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px;cursor:pointer;text-align:start;color:var(--ink)}
.pitem:hover{border-color:var(--pri);background:#f1f8f5}.pitem small{display:block;color:var(--mut)}
.pitem.out{opacity:.45}
.bill{position:sticky;top:10px}
.bill input.qin{width:60px;padding:4px}
.totals div{display:flex;justify-content:space-between;padding:3px 0}.totals .gt{font-size:20px;font-weight:700;border-top:2px solid var(--ink);margin-top:6px;padding-top:6px}
.paybtns{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0}.paybtns button{padding:5px 10px;font-size:13px}
/* login */
.login{max-width:380px;margin:9vh auto}
/* receipt */
.receipt{width:80mm;margin:0 auto;background:#fff;padding:8px;font:12px/1.4 monospace;color:#000}
.receipt table td,.receipt table th{padding:2px 0;border:0;font-size:12px}.receipt hr{border:0;border-top:1px dashed #000}
.receipt h3,.receipt p{text-align:center;margin:2px 0}
@media print{.noprint,.top,.side,.topbar,.foot{display:none!important}body{background:#fff}.layout{display:block}.inner{padding:0}}
@media(max-width:900px){.pos{grid-template-columns:1fr}.g3,.g4{grid-template-columns:repeat(2,1fr)}.side{display:none}.layout{display:block}.g2{grid-template-columns:1fr}}
@media(max-width:560px){.g3,.g4{grid-template-columns:1fr}}

/* ===== animations & storefront polish ===== */
@keyframes fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(var(--r,0deg))}50%{transform:translateY(-14px) rotate(var(--r,0deg))}}
@keyframes gradmove{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.7)}100%{transform:scale(1)}}
@keyframes shine{from{transform:translateX(-120%) skewX(-20deg)}to{transform:translateX(260%) skewX(-20deg)}}
@keyframes pop{0%{transform:scale(.85);opacity:0}100%{transform:scale(1);opacity:1}}
.shop .hero{position:relative;overflow:hidden;background:linear-gradient(120deg,#0f5c4d,#1d7d68,#c8872b,#0f5c4d);background-size:300% 300%;animation:gradmove 14s ease infinite;padding:40px 28px}
.hero h1{font-size:clamp(26px,4vw,40px);animation:fadeUp .8s both}.hero>*{position:relative;z-index:1;animation:fadeUp .8s both}.hero>div{animation-delay:.15s}.hero form{animation-delay:.3s}
.hero .fb{position:absolute;z-index:0;width:70px;aspect-ratio:3/4;border-radius:4px 8px 8px 4px;box-shadow:0 10px 24px #0005;animation:floaty 6s ease-in-out infinite;opacity:.9;inset-inline-end:var(--x);top:var(--y)}
.levels{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:18px 0}
.level{display:block;background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px;color:var(--ink);position:relative;overflow:hidden;transition:opacity .6s ease,transform .3s,box-shadow .3s}
.level:hover{transform:translateY(-6px);box-shadow:0 14px 30px #0f5c4d26}
.level b{display:block;font-size:17px}.level span.ic{font-size:30px;display:inline-block;transition:transform .4s}.level:hover span.ic{transform:rotate(-12deg) scale(1.25)}
.level::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,#fff8,transparent);transform:translateX(-120%) skewX(-20deg)}
.level:hover::after{animation:shine .8s}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .6s ease,transform .6s ease;transition-delay:var(--d,0s)}
.reveal.in{opacity:1;transform:none}
.book{transition:opacity .6s ease,transform .35s,box-shadow .35s;perspective:800px}
.book:hover{transform:translateY(-8px);box-shadow:0 18px 34px #0003}
.book .cover{position:relative;overflow:hidden;transition:transform .5s;transform-origin:left center;box-shadow:inset 8px 0 10px -6px #0006}
.book:hover .cover{transform:rotateY(-14deg) scale(1.03)}
.book .cover::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,#fff6,transparent);transform:translateX(-120%) skewX(-20deg)}
.book:hover .cover::after{animation:shine .9s}
.book .btn{transition:transform .2s,background .2s}.book .btn:active{transform:scale(.92)}
.badge.bump{animation:bump .5s}
.alert{animation:pop .4s}
.cats a{transition:all .25s}.cats a:hover{transform:translateY(-2px);border-color:var(--pri)}
.pager{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin:24px 0}.pager a{padding:6px 12px;border:1px solid var(--line);border-radius:8px;background:#fff}.pager a.on{background:var(--pri);color:#fff}
.sect{margin:26px 0 8px;font-size:22px}
.cart-fly{position:fixed;z-index:99;width:60px;border-radius:6px;pointer-events:none;transition:all .8s cubic-bezier(.6,-.2,.8,.6)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}
@media(min-width:900px){.hero h1,.hero>div,.hero form{max-width:64%}}
@media(max-width:899px){.hero .fb{display:none}}

/* ===== backgrounds ===== */
body.shop{background:var(--bg) url(/bookshop/assets/pattern.svg)}
body.staff .content{background:url(/bookshop/assets/pattern.svg)}
.authbg{position:fixed;inset:0;z-index:-1;overflow:hidden;background:#0b2e27}
.authbg .mosaic{position:absolute;inset:-15%;display:grid;grid-template-columns:repeat(8,1fr);gap:14px;transform:rotate(-8deg);opacity:.6;animation:drift 50s ease-in-out infinite alternate}
.authbg .mosaic img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:6px;box-shadow:0 8px 18px #0008}
.authbg .mosaic img:nth-child(3n){transform:translateY(40px)}.authbg .mosaic img:nth-child(3n+1){transform:translateY(-30px)}
.authbg::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,#0b2e2799 0%,#0b2e27ee 75%)}
@keyframes drift{from{transform:rotate(-8deg) translateY(0) scale(1.05)}to{transform:rotate(-8deg) translateY(-8%) scale(1.12)}}
body.auth{min-height:100vh}
.glass{background:#ffffffec;backdrop-filter:blur(10px);border:1px solid #fff6;border-radius:18px;box-shadow:0 24px 60px #0007;animation:fadeUp .7s both}
.auth-title{color:#fff;text-align:center;margin:30px 0 6px;font-size:clamp(24px,4vw,34px);animation:fadeUp .7s both}.auth-sub{color:#cfe8df;text-align:center;margin-bottom:18px}
body.shop.guest main{position:relative}

/* ===== POS full screen + held orders ===== */
.postools{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.drafts{display:flex;gap:6px;flex-wrap:wrap;flex:1}
.draft{display:inline-flex;align-items:center;background:#fff7e6;border:1px solid var(--acc);border-radius:99px;overflow:hidden;animation:pop .3s}
.draft button{background:transparent;color:var(--ink);padding:4px 12px;font-size:13px}.draft button:hover{background:#ffe9bd}
.draft a{padding:4px 10px;color:var(--red)}
body.posfull .side,body.posfull .topbar{display:none}
body.posfull .inner{padding:8px 10px}
body.posfull .pos-items{max-height:calc(100vh - 170px)}
body.posfull .bill{max-height:calc(100vh - 70px);overflow:auto;top:0}
body.posfull .pos{grid-template-columns:1.6fr 1fr}
body.posfull .pitem{padding:10px}