
:root{
  --pink:#ec0a62; --pink2:#ff3b86; --peach:#fff0df; --gold:#e0a12b;
  --ink:#151515; --muted:#777; --line:#f1dcc5; --green:#148242;
}
*{box-sizing:border-box}
html,body{margin:0;background:#f6f3ef;color:var(--ink);font-family:Arial,Helvetica,sans-serif}
.app{max-width:520px;min-height:100vh;margin:auto;background:#fffaf5;position:relative;overflow:hidden}
.splash{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px;background:radial-gradient(circle at 50% 25%,#fff 0 130px,transparent 131px),linear-gradient(180deg,#fff6e9,#ffe7c7)}
.splash-logo{width:210px;height:210px;border-radius:50%;overflow:hidden;background:#fff;box-shadow:0 16px 36px #0002}
.splash-logo img,.mini-logo img,.drawer-logo img{width:100%;height:100%;object-fit:contain;display:block}
.brand{font-size:34px;font-weight:900;margin-top:18px}.brand b{color:var(--pink)}
.tag{font-size:17px;color:#555;margin-top:4px}
.features{display:flex;gap:18px;margin-top:28px;text-align:center}.feature{font-size:12px}.feature strong{display:block;color:var(--pink);margin-top:5px}
.shopnow{margin-top:34px;border:0;border-radius:40px;background:linear-gradient(90deg,var(--pink),#ff2b75);color:#fff;font-weight:900;font-size:22px;padding:16px 42px}

.header{padding:10px 14px 8px;background:linear-gradient(135deg,#fff0df,#ffe4bd);position:sticky;top:0;z-index:15;border-bottom:1px solid #f0cfad}
.headrow{display:flex;align-items:center;gap:9px}.mini-logo{width:48px;height:48px;border-radius:50%;overflow:hidden;background:#fff}.title{font-size:23px;font-weight:900;flex:1}.title b{color:var(--pink)}
.iconbtn{border:0;background:transparent;font-size:25px;color:var(--pink);padding:4px}.cartcount{font-size:11px;background:red;color:#fff;border-radius:20px;padding:2px 5px;vertical-align:top}
.search{margin-top:8px;background:#fff;border:1px solid #f2d7bc;border-radius:18px;padding:10px 12px;display:flex;gap:8px;box-shadow:0 4px 12px #00000008}.search input{border:0;outline:0;width:100%;font-size:15px}

.grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;padding:10px 10px 92px;background:#fff8f1}
.book{background:#fff;border:1px solid #f0dcc7;border-radius:16px;padding:9px;box-shadow:0 4px 10px #0000000a}
.cover{height:105px;border-radius:11px;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;font-weight:900;font-size:15px;padding:7px}
.book h3{font-size:14px;margin:7px 0 2px}.price{font-size:20px;font-weight:900;color:var(--pink);margin:2px 0 7px}
.add{width:100%;border:1px solid #d8a244;border-radius:12px;background:linear-gradient(#ffe79a,#ffc95f);color:#111;font-weight:900;font-size:13px;padding:9px 7px}

.bottom{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(520px,100%);display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border-top:1px solid #ead8c5;padding:8px 4px calc(8px + env(safe-area-inset-bottom));z-index:18}
.nav{text-align:center;font-size:12px;color:#666}.nav b{display:block;font-size:21px}.nav.active{color:var(--pink);font-weight:700}

.auth{min-height:100vh;padding:28px 20px;background:linear-gradient(160deg,#fff8ed 55%,#ffd8b4)}
.auth-logo{text-align:center}.auth-logo img{width:130px;height:130px;object-fit:contain;border-radius:50%}.auth-logo h1{margin:10px 0 4px;font-size:29px}
.authcard{margin-top:22px;background:#ffffffef;padding:22px;border-radius:25px;border:1px solid #f0d3b2;box-shadow:0 12px 35px #0001}
.field{background:#fff;border:1px solid #efcfac;border-radius:14px;padding:13px;margin:11px 0}.field input{width:100%;border:0;outline:0;background:transparent;font-size:16px}
.authbtn{width:100%;border:0;border-radius:15px;padding:14px;background:linear-gradient(90deg,var(--pink),#ff3179);color:#fff;font-size:18px;font-weight:900}
.small{font-size:13px;color:#777}

.page{padding:14px 14px 90px}.panel{background:#fff;border:1px solid #efd9c2;border-radius:16px;padding:14px;margin:10px 0}.row{display:flex;align-items:center;gap:11px}
.total{font-size:24px;font-weight:900;color:var(--pink)}
.btn{border:0;border-radius:13px;padding:12px 15px;background:var(--pink);color:#fff;font-weight:900}
.btn.alt{background:#222}.btn.green{background:var(--green)}
.qty{display:flex;align-items:center;border:1px solid #ddd;border-radius:10px;overflow:hidden}.qty button{border:0;background:#fff;padding:8px 12px;font-size:18px}.qty span{padding:0 12px}
.payapps{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:10px}.payapp{border:1px solid #eed5bb;border-radius:13px;background:#fff;padding:13px;font-weight:900}
.notice{background:#fff5d7;border:1px solid #efd47a;border-radius:13px;padding:11px;font-size:13px;color:#6c591c}

.overlay{position:fixed;inset:0;background:#0008;z-index:30}.drawer{height:100%;width:min(88%,430px);background:#fffaf6;overflow:auto}.drawer-head{padding:20px;background:linear-gradient(135deg,#fff0dc,#ffd4b0)}
.drawer-brand{display:flex;align-items:center;gap:12px}.drawer-logo{width:68px;height:68px;border-radius:50%;overflow:hidden}.drawer-name{font-size:25px;font-weight:900}.drawer-name b{color:var(--pink)}
.wallet{margin:12px;background:#ffe8f0;border:1px solid #ffc0d3;border-radius:15px;padding:13px;display:flex;justify-content:space-between;align-items:center}.wallet strong{color:var(--pink);font-size:20px}
.menu{padding:0 10px 20px}.mi{padding:14px 10px;border-bottom:1px solid #eee;display:flex;justify-content:space-between;align-items:center}

.policy{max-width:900px;margin:auto;background:#fff;min-height:100vh;padding:28px 20px 60px}.policy h1{color:var(--pink)}.policy h2{margin-top:28px;color:#b70c50}.policy h3{margin-top:20px}.policy li{margin:7px 0}.policy a{color:var(--pink)}.contact-card{background:#fff4e7;border:1px solid #efd6ba;border-radius:15px;padding:15px}
