:root{color:#17365d;font-synthesis:none;background:#eaf3fd;font-family:Arial,Noto Sans Thai,sans-serif}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{cursor:pointer}.app{background:#fff;max-width:480px;min-height:100vh;margin:auto;box-shadow:0 8px 35px #b9d2ea55}.topbar{justify-content:space-between;align-items:center;height:68px;padding:16px 20px;display:flex}.brand{color:#0869b7;letter-spacing:.6px;align-items:center;gap:9px;font-weight:900;display:flex}.brand-mark{color:#fff;background:#087fe5;border-radius:12px;place-items:center;width:37px;height:37px;display:grid}.uat-badge{color:#916000;background:#fff0cf;border-radius:99px;padding:7px 10px;font-size:11px;font-weight:800}.hero{color:#fff;background:linear-gradient(125deg,#0665bfbb,#0caee5a8),linear-gradient(25deg,#115b43 0%,#2c9b75 30%,#9ad5a7 52%,#80c8f4 53%,#1682c9 100%);height:235px;position:relative;overflow:hidden}.hero:after{content:"";border:4px solid #fff6;border-radius:50%;width:260px;height:150px;position:absolute;bottom:-65px;right:-45px;transform:rotate(-18deg)}.hero-overlay{z-index:1;padding:28px 25px;position:relative}.eyebrow{letter-spacing:1px;align-items:center;gap:7px;font-size:11px;font-weight:800;display:flex}.hero h1{margin:18px 0 13px;font-size:39px;line-height:1.12}.hero p{font-size:14px;font-weight:600}.menu-grid{grid-template-columns:1fr 1fr;gap:12px;padding:16px;display:grid}.menu-card{color:#17365d;text-align:left;background:#f4f9fe;border:1px solid #dbeaf8;border-radius:19px;flex-direction:column;align-items:flex-start;min-height:142px;padding:15px;display:flex;position:relative}.menu-card.selected{background:#e7f4ff;border:2px solid #0787f4}.menu-icon{color:#0879db;background:#ddecff;border-radius:13px;place-items:center;width:43px;height:43px;margin-bottom:12px;display:grid}.menu-card strong{font-size:14px}.menu-card small{color:#5f7894;margin-top:6px;font-size:11px}.menu-arrow{color:#8fb6d8;position:absolute;top:15px;right:12px}.content{background:#f2f8fe;border-radius:21px;min-height:330px;margin:7px 16px 0;padding:22px}.section-heading{color:#116ec2;align-items:center;gap:9px;display:flex}.section-heading h2{color:#17365d;margin:0;font-size:22px}.muted{color:#56718e;font-size:14px;line-height:1.6}.member-preview{color:#fff;background:linear-gradient(130deg,#0765bd,#1fb8e9);border-radius:17px;flex-direction:column;justify-content:space-between;height:150px;margin:19px 0;padding:19px;display:flex}.member-preview span{letter-spacing:1px;font-size:11px}.member-preview strong{font-size:21px}.member-preview small{font-size:11px}.primary,.secondary{border-radius:12px;justify-content:center;align-items:center;gap:9px;width:100%;min-height:47px;margin-top:10px;font-size:14px;font-weight:800;display:flex}.primary{color:#fff;background:#087fe5;border:0}.secondary{color:#087fe5;background:#fff;border:1px solid #78b9f6}.service-grid{grid-template-columns:1fr 1fr;gap:11px;margin-top:17px;display:grid}.service-card{color:#0d78d4;background:#fff;border:1px solid #e2edfa;border-radius:15px;flex-direction:column;justify-content:center;align-items:center;gap:8px;min-height:119px;padding:10px;display:flex}.service-card strong{color:#183b66;font-size:13px}.service-card small{color:#69829b;font-size:11px}.live-preview{color:#fff;background:linear-gradient(145deg,#0d315f,#125ca0);border-radius:16px;flex-direction:column;justify-content:center;align-items:center;gap:10px;height:205px;margin:17px 0;display:flex;position:relative}.live-preview strong{font-size:21px}.live-preview small{color:#b9d7f5;font-size:11px}.live-tag{background:#e7354b;border-radius:7px;padding:6px 9px;font-size:10px;font-weight:700;position:absolute;top:13px;left:13px}.schedule{color:#087fe5;background:#fff;border-radius:13px;align-items:center;gap:13px;margin-top:13px;padding:16px;display:flex}.schedule div{flex-direction:column;gap:5px;display:flex}.schedule strong{color:#17365d}.schedule small{color:#69829b;font-size:11px}.buddy-welcome{color:#087fe5;background:linear-gradient(110deg,#d7edff,#e9f7ff);border-radius:15px;align-items:center;gap:12px;margin:17px 0;padding:15px;display:flex}.buddy-welcome div{flex-direction:column;gap:6px;display:flex}.buddy-welcome strong{color:#17365d;font-size:14px}.buddy-welcome small{color:#5c7792;font-size:11px}.quick-actions{grid-template-columns:1fr 1fr;gap:9px;display:grid}.quick-actions button{color:#17365d;background:#fff;border:0;border-radius:12px;min-height:58px;padding:13px 8px;font-size:12px;font-weight:700}.chat-form{gap:8px;margin-top:15px;display:flex}.chat-form input{border:1px solid #d7e6f6;border-radius:12px;flex:1;min-width:0;padding:13px;font-size:13px}.chat-form button{color:#fff;background:#087fe5;border:0;border-radius:12px;width:46px}.demo-note{color:#7990a7;align-items:center;gap:6px;font-size:11px;display:flex}footer{text-align:center;color:#879bb0;padding:25px 10px;font-size:11px}@media (width<=380px){.menu-card{padding:11px}.menu-card strong{font-size:12px}.content{padding:16px}.hero h1{font-size:34px}}.brand-logo{object-fit:contain;object-position:left center;width:125px;height:45px}.welcome-brand{align-items:center;gap:14px;margin-bottom:15px;display:flex}.welcome-brand h2{color:#17365d;margin:0 0 7px;font-size:21px}.welcome-brand p{color:#65809b;margin:0;font-size:12px}.welcome-mascot,.buddy-mascot{object-fit:contain;background:#fff;border-radius:14px;flex-shrink:0;width:92px;height:105px}.buddy-mascot{width:100px;height:115px}