:root{--g:#075f33;--g2:#0b7a42;--gold:#d6a52a;--red:#ef1b23;--ink:#102033}
*{box-sizing:border-box}html,body{margin:0;background:#f5f5f5;color:var(--ink);font-family:Arial,sans-serif}.app{max-width:520px;min-height:100vh;margin:auto;background:#fff;position:relative}
.splash{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(#fff,#fffdf7 60%,#eef7ef);padding:28px}.logo-big{width:220px;height:220px;border-radius:50%;overflow:hidden}.logo-big img,.mini-logo img{width:100%;height:100%;object-fit:contain}.brand{font-size:40px;font-weight:900;margin-top:18px}.tag{color:#666}.loader{width:250px;height:14px;background:#eee;border-radius:15px;margin-top:38px;overflow:hidden}.loader i{display:block;width:65%;height:100%;background:linear-gradient(90deg,var(--gold),var(--g))}
.header{padding:12px 14px 8px;background:linear-gradient(#064f2d,#08713e);color:#fff;position:sticky;top:0;z-index:10}.headrow{display:flex;align-items:center;gap:10px}.mini-logo{width:50px;height:50px;border-radius:50%;overflow:hidden;background:#fff}.title{font-size:26px;font-weight:900;flex:1}.iconbtn{border:0;background:transparent;color:#fff;font-size:26px}.search{margin-top:10px;background:#fff;color:#777;border-radius:18px;padding:12px 14px}.search input{border:0;outline:0;width:90%;font-size:16px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:14px 14px 95px;background:#fffaf7}.book{background:#fff;border-radius:20px;padding:12px;border:1px solid #eee;box-shadow:0 5px 15px #0000000a}.cover{height:155px;border-radius:14px;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;font-weight:900;font-size:20px;padding:8px}.book h3{margin:10px 0 4px}.price{font-size:24px;font-weight:900}.add{width:100%;border:0;border-radius:14px;background:var(--red);color:#fff;font-weight:900;padding:12px;margin-top:8px}
.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 #ddd;padding:10px}.nav{text-align:center;color:#667}.nav.active{color:var(--red)}
.page{padding:16px 16px 95px}.panel{border:1px solid #e7e7e7;border-radius:18px;padding:15px;margin:12px 0;background:#fff}.row{display:flex;align-items:center;gap:12px}.total{font-size:24px;font-weight:900;color:var(--g)}.btn{width:100%;border:0;border-radius:14px;background:var(--g);color:#fff;padding:13px;font-weight:900}
.payapps{display:grid;grid-template-columns:1fr 1fr;gap:10px}.payapp{padding:14px;border-radius:14px;border:1px solid #ddd;background:#fff;font-weight:800}
.overlay{position:fixed;inset:0;background:#0008;z-index:30}.drawer{width:min(88%,430px);height:100%;background:#fff;overflow:auto}.drawer-head{background:linear-gradient(135deg,#064f2d,#c49a2e);color:#fff;padding:22px}.drawer-brand{display:flex;gap:12px;align-items:center}.drawer-brand img{width:64px;height:64px;border-radius:50%}.mi{padding:15px;border-bottom:1px solid #eee;display:flex;justify-content:space-between}
.auth{min-height:100vh;padding:36px 22px;background:linear-gradient(160deg,#fff 55%,#eff7f0)}.auth-logo{text-align:center}.auth-logo img{width:115px;height:115px;border-radius:50%}.authcard{margin-top:22px;background:#fff;padding:24px;border-radius:28px;box-shadow:0 12px 40px #0001}.field{background:#f7f7f7;border-radius:15px;padding:14px;margin:12px 0}.field input{border:0;outline:0;background:transparent;width:100%}.authbtn{width:100%;border:0;border-radius:15px;padding:14px;background:var(--g);color:#fff;font-weight:900;font-size:18px}.small{font-size:13px;color:#777}.policy{max-width:900px;margin:auto;padding:28px 20px 60px;background:#fff}.policy a{color:var(--g)}