:root{--forest:#173d2a;--leaf:#39734a;--cream:#f7f6ed;--ink:#203329;--muted:#68766d;--line:#e4e9df}
*{box-sizing:border-box}body{margin:0;background:var(--cream);color:var(--ink);font-family:system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif;line-height:1.6}
a{color:inherit;text-decoration:none}.wrap{width:min(1050px,92%);margin:auto}
header{background:#f7f6edee;border-bottom:1px solid var(--line)}.nav{min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.brand{font-weight:850;color:var(--forest);display:flex;align-items:center;gap:10px}.brand img{width:48px;height:48px;object-fit:contain}
nav{display:flex;gap:16px;flex-wrap:wrap;font-size:.92rem}nav a:hover{color:var(--leaf)}
main{padding:42px 0 70px}.hero{background:linear-gradient(120deg,#edf2df,#dce9c8);padding:30px;border-radius:24px;margin-bottom:24px}
h1,h2,h3{color:var(--forest);line-height:1.25}.hero h1{font-size:clamp(1.8rem,4vw,2.8rem);margin:0 0 8px}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px;box-shadow:0 8px 24px #173d2a08}
label{display:block;font-weight:700;margin:12px 0 5px}input,select{width:100%;padding:12px;border:1px solid #ccd6c9;border-radius:10px;font:inherit;background:white}
button,.btn{border:0;background:var(--forest);color:white;border-radius:999px;padding:11px 18px;font:inherit;font-weight:750;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;margin-top:12px}
button:hover,.btn:hover{background:var(--leaf)}button.secondary{background:#eaf0e5;color:var(--forest)}
.muted{color:var(--muted)}.notice{padding:12px 14px;border-radius:12px;background:#eef4e8;margin:12px 0}.error{background:#fff0ed;color:#963b2c}.hidden{display:none!important}
table{width:100%;border-collapse:collapse;background:#fff;border-radius:12px;overflow:hidden}th,td{text-align:left;padding:11px;border-bottom:1px solid var(--line);font-size:.93rem}th{background:#edf2e7;color:var(--forest)}
.progress{height:10px;background:#e8eee3;border-radius:99px;overflow:hidden}.progress span{display:block;height:100%;background:#39734a}
.promo{border-left:5px solid var(--leaf)}.pill{display:inline-block;background:#edf4e3;color:var(--forest);padding:4px 10px;border-radius:99px;font-size:.85rem;font-weight:700}
footer{padding:24px 0;color:var(--muted);border-top:1px solid var(--line)}
@media(max-width:720px){.grid{grid-template-columns:1fr}.nav{padding:12px 0}nav{gap:10px;font-size:.85rem}}

/* Promotion cards: friendly stickers and clearer reading */
.promo-section{padding:26px;background:linear-gradient(145deg,#fffef8,#f5f8ed)}
.promo-heading{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.promo-heading h2{margin:0 0 6px}.promo-heading p{margin:0}
.promo-heading-sticker{width:58px;height:58px;flex:0 0 58px;display:grid;place-items:center;border-radius:18px;background:#fff0b8;font-size:2rem;box-shadow:0 4px 0 #eadb9f}
.promo-grid{align-items:stretch;gap:16px}
.promo-grid .promo{padding:20px;border:1px solid #e2e9d9;border-left:6px solid var(--leaf);border-radius:20px;box-shadow:0 7px 18px #173d2a0a}
.promo-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.promo-sticker{width:48px;height:48px;display:grid;place-items:center;border-radius:15px;background:#edf5df;font-size:1.8rem}
.promo h3{margin:8px 0 6px;font-size:1.22rem}
.promo-discount{display:inline-flex;align-items:baseline;gap:7px;margin:2px 0 12px;padding:7px 13px;border-radius:13px;background:#fff2bd;color:#24452e;font-weight:800}
.promo-discount strong{font-size:2rem;line-height:1;color:#d94b32;text-shadow:1px 1px #fff}
.promo-how{font-weight:800;color:var(--forest);margin:8px 0}
.promo ol{padding-left:23px;margin:7px 0 0;line-height:1.75}
.promo li{padding-left:3px;margin:5px 0}
.promo-terms{margin-top:18px;background:#f1f5eb;border:1px solid #e0e8d9;box-shadow:none}
.promo-terms h3{margin-top:0}.promo-terms ul{padding-left:22px;line-height:1.75;margin-bottom:4px}
.promo-garden{border-left-color:#7a9d36!important}.promo-friend{border-left-color:#d7a52a!important}
@media(max-width:720px){.promo-section{padding:17px}.promo-heading{align-items:flex-start}.promo-heading-sticker{width:48px;height:48px;flex-basis:48px;font-size:1.65rem}.promo-grid .promo{padding:17px}.promo-discount strong{font-size:1.8rem}}

/* แยกหน้าสมัครสมาชิกและเข้าสู่ระบบ */
.auth-wrap{width:min(480px,92%);margin:42px auto 70px}
.auth-card{padding:30px}
.auth-brand{text-align:center;margin-bottom:22px}
.auth-brand .auth-icon{font-size:2.8rem;display:block}
.auth-card h1{text-align:center;margin:0 0 8px}
.auth-card .auth-sub{text-align:center;color:var(--muted);margin:0 0 22px}
.auth-card button{width:100%;justify-content:center;padding:13px}
.auth-switch{text-align:center;margin:20px 0 0;color:var(--muted)}
.auth-switch a{color:var(--leaf);font-weight:800;text-decoration:underline}
.auth-back{text-align:center;margin-top:16px}
.auth-back a{color:var(--muted)}
.member-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}

/* ปุ่มสมาชิก: แสดงเฉพาะออกจากระบบเมื่อเข้าสู่ระบบแล้ว */
.member-actions{justify-content:flex-end;margin:0 0 14px}.member-actions button{margin-top:0}


/* หน้าสมาชิก: เพิ่มสีสันและสติกเกอร์ให้แต้มสะสม */
.member-summary{position:relative;overflow:hidden;background:linear-gradient(135deg,#ffffff 0%,#f3fae9 100%);border:1px solid #dcebd2;}
.member-summary:after{content:"🌿  ✨  🍀";position:absolute;right:22px;top:18px;font-size:1.45rem;opacity:.8;pointer-events:none}
.member-summary>h2{font-size:1.55rem;margin-top:4px}
.member-points{gap:16px;margin-top:18px}
.member-points .point-card{padding:19px;border-radius:18px;border:1px solid transparent;position:relative;overflow:hidden;min-width:0}
.member-points .point-home{background:linear-gradient(145deg,#fff8df,#fffdf5);border-color:#f1df9e}
.member-points .point-garden{background:linear-gradient(145deg,#eaf7e9,#f8fff5);border-color:#cce6c9}
.member-points .point-card h3{margin:0 0 12px;font-size:1.1rem}
.member-points .point-card p{font-weight:750;color:#35523b}
.member-points .progress{height:13px;background:#e3eadf;border:1px solid #d8e3d2}
.member-points .point-home .progress span{background:linear-gradient(90deg,#efb83e,#e58b28)}
.member-points .point-garden .progress span{background:linear-gradient(90deg,#78bd58,#27834b)}
.member-rewards{background:linear-gradient(135deg,#fff9e9,#fffdf7);border-color:#f0e3bc}
.member-history{background:linear-gradient(135deg,#f3f8ff,#ffffff);border-color:#dce7f4}
.member-rewards h2,.member-history h2{display:flex;align-items:center;gap:8px}
@media(max-width:720px){.member-summary:after{font-size:1.05rem;right:12px;top:14px}.member-points .point-card{padding:16px}.member-summary>h2{padding-right:70px}}