:root{
  --orange:#ff8a00;--orange2:#ffb12b;--ink:#171717;--muted:#7b7b7b;
  --bg:#fff;--soft:#fff7eb;--line:#eee;--card:#fff;--green:#18a558;--red:#e53935;
}
*{box-sizing:border-box} html,body{margin:0;background:#f7f7f8;color:var(--ink);font-family:Inter,Arial,Helvetica,sans-serif}
body{min-height:100vh}.app{max-width:520px;margin:auto;min-height:100vh;background:#fff;position:relative;overflow:hidden}
.wave{position:absolute;inset:auto auto 0 0;width:100%;height:180px;background:linear-gradient(145deg,#fff0d7,#ffb347);clip-path:polygon(0 58%,100% 10%,100% 100%,0 100%);opacity:.85}
.splash{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:30px;position:relative;background:#fff}
.brandmark{width:120px;height:120px;border-radius:28px;background:linear-gradient(135deg,#ffb52e,#ff8500);box-shadow:0 12px 35px #ff9b1a44;display:grid;place-items:center;color:#fff;font-weight:900;font-size:50px}
.brand{font-size:42px;font-weight:900;margin-top:18px}.brand span{color:var(--orange)}
.tag{color:#8b8b8b;font-size:18px}.loader{width:270px;height:18px;border-radius:20px;background:#fff1dc;margin-top:70px;overflow:hidden}
.loader i{display:block;width:65%;height:100%;background:linear-gradient(90deg,var(--orange),#ffd16a)}
.loading{margin-top:14px;color:#777;font-size:18px}
.header{padding:18px 18px 10px;position:sticky;top:0;background:#fff;z-index:5;border-bottom:1px solid #f1f1f1}
.headrow{display:flex;align-items:center;gap:12px}.mini-logo{width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg,#ffb72f,#ff8500);display:grid;place-items:center;color:#fff;font-weight:900;font-size:22px}
.title{font-size:28px;font-weight:900;flex:1}.title span{color:var(--orange)}.iconbtn{border:0;background:#fff;font-size:28px;padding:6px}
.search{margin:14px 0 6px;background:#f5f5f5;border-radius:18px;padding:13px 15px;display:flex;gap:10px}.search input{border:0;outline:0;background:transparent;width:100%;font-size:16px}
.hero{margin:14px 18px;padding:20px;border-radius:22px;background:linear-gradient(135deg,#fff1d5,#ffb443);min-height:160px;box-shadow:0 10px 25px #ff9b1a22}
.hero h2{font-size:28px;margin:0 0 8px}.hero p{margin:0 0 16px;color:#6f4d1f}.btn{border:0;border-radius:16px;background:linear-gradient(90deg,#ff8d00,#ffb22d);color:#fff;font-weight:800;padding:13px 20px;font-size:16px}
.cats{display:flex;gap:10px;padding:4px 18px 14px;overflow:auto}.cat{min-width:86px;text-align:center;padding:13px 8px;border:1px solid #eee;border-radius:16px;background:#fff}.cat b{display:block;margin-top:6px;font-size:12px}.active{color:var(--orange);background:#fff6e7}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0 14px 90px}.book{border:1px solid #eee;border-radius:20px;padding:12px;background:#fff;box-shadow:0 6px 18px #0000000a}
.cover{height:170px;border-radius:14px;display:flex;align-items:center;justify-content:center;text-align:center;padding:12px;color:#fff;font-weight:900;font-size:24px;box-shadow:inset 0 0 0 2px #ffffff22}
.book h3{font-size:16px;margin:10px 0 4px}.sub{font-size:12px;color:#777;min-height:30px}.rating{color:#ff9800;font-size:13px}.price{font-size:22px;color:#ff6b00;font-weight:900;margin-top:5px}.old{text-decoration:line-through;color:#999;font-size:13px;margin-left:5px}.discount{display:inline-block;margin:7px 0;padding:5px 8px;border-radius:10px;background:#fff1df;color:#ff7a00;font-size:12px}.add{width:100%;border:0;border-radius:14px;background:linear-gradient(90deg,#ff8a00,#ffad25);color:#fff;padding:11px;font-weight:800}
.bottom{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(520px,100%);background:#fff;border-top:1px solid #eee;display:grid;grid-template-columns:repeat(4,1fr);padding:10px 4px calc(10px + env(safe-area-inset-bottom));z-index:8}.nav{text-align:center;font-size:12px;color:#666}.nav b{display:block;font-size:22px}.nav.active{color:var(--orange)}
.overlay{position:fixed;inset:0;background:#0008;z-index:20}.drawer{position:absolute;left:0;top:0;bottom:0;width:min(88%,430px);background:#fff;overflow:auto}.drawer-head{background:linear-gradient(135deg,#ff9c00,#ff5f17);padding:24px;color:#fff}.drawer-head .brandline{font-size:28px;font-weight:900}.wallet{margin:16px;background:#fff7ec;border-radius:18px;padding:16px;display:flex;align-items:center;justify-content:space-between}.menu{padding:0 12px 30px}.mi{padding:16px 12px;border-bottom:1px solid #eee;display:flex;justify-content:space-between}
.page{padding:18px 18px 95px}.page h2{font-size:28px}.panel{background:#fff;border:1px solid #eee;border-radius:18px;padding:16px;margin:12px 0}.row{display:flex;gap:12px;align-items:center}.qty{display:flex;gap:12px;align-items:center}.qty button{width:34px;height:34px;border:1px solid #ddd;background:#fff;border-radius:10px}.total{font-weight:900;font-size:24px;color:#ff7a00}
.auth{min-height:100vh;background:linear-gradient(160deg,#fff 50%,#fff0d4);padding:40px 22px}.auth .logo{text-align:center}.authcard{margin-top:28px;background:#fff;border-radius:28px;padding:24px;box-shadow:0 12px 40px #0001}.authcard h1{text-align:center}.field{display:flex;align-items:center;background:#f7f7f7;border-radius:16px;padding:14px;margin:12px 0}.field input{border:0;outline:0;background:transparent;width:100%;font-size:16px}.authbtn{width:100%;padding:14px;border:0;border-radius:16px;background:linear-gradient(90deg,#ff9a00,#ff6e00);color:#fff;font-size:18px;font-weight:900}
.policy{max-width:900px;margin:auto;padding:28px 20px 60px;background:#fff}.policy h1,.policy h2{color:#333}.policy h1{font-size:34px}.policy h2{margin-top:28px}.policy a{color:#ef6c00}.small{font-size:13px;color:#777}


.brandmark,.mini-logo{
  background:#fff !important;
  overflow:hidden;
  padding:0 !important;
}
.brandmark img,.mini-logo img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}