* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Segoe UI','Tahoma','Sarabun',sans-serif; color: #1e3a1c; background: #fff; }
header { display:flex; align-items:center; justify-content:space-between; padding:16px 28px; background:#ffffffee; border-bottom:1px solid #e2ecda; position:sticky; top:0; z-index:10; flex-wrap:wrap; gap:10px; }
.logo { display:flex; align-items:center; gap:10px; font-weight:700; font-size:17px; text-decoration:none; color:#1e3a1c; }
.logo .dot { width:24px; height:24px; border-radius:50%; background:#3f8b3f; display:inline-block; }
nav a { color:#3d5c37; text-decoration:none; margin-left:18px; font-size:13.5px; }
nav a.active { color:#1e3a1c; font-weight:700; border-bottom:2px solid #3f8b3f; padding-bottom:2px; }
.cta, .cta:visited { background:#3f8b3f; color:#fff !important; padding:8px 16px; border-radius:8px; font-weight:600; text-decoration:none; }
.ghost, .ghost:visited { background:#fff; color:#2f5c2b !important; border:1px solid #9dc48f; padding:8px 16px; border-radius:8px; font-weight:600; text-decoration:none; }
.page-bg { background:linear-gradient(180deg,#c7ecba 0%,#e6f6dd 30%,#ffffff 70%); min-height:calc(100vh - 60px); padding:36px 20px 60px; }
.wrap { max-width:920px; margin:0 auto; }
.card { background:#fff; border:1px solid #e2ecda; border-radius:12px; padding:20px 22px; }
.demo-badge { display:inline-block; background:#fff3cd; color:#7a5b00; font-size:12px; padding:4px 12px; border-radius:6px; margin-bottom:14px; }
.metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:26px; }
.metric { background:#fff; border:1px solid #e2ecda; border-radius:10px; padding:14px 16px; }
.metric .label { font-size:12px; color:#5c6f56; margin-bottom:4px; }
.metric .value { font-size:19px; font-weight:600; color:#1e3a1c; }
table { width:100%; border-collapse:collapse; font-size:13.5px; }
th { text-align:left; background:#f5faf1; color:#2c4a28; font-size:12px; padding:10px 12px; border-bottom:1px solid #e2ecda; }
td { padding:9px 12px; border-bottom:1px solid #f0f3ed; }
td.code { font-weight:700; color:#3f8b3f; }
.center { text-align:center; }
.badge { display:inline-block; font-size:11px; font-weight:600; padding:3px 10px; border-radius:20px; }
.s-ok { background:#e6f6dd; color:#2f6e2a; }
.s-low { background:#fff0d9; color:#9a5b00; }
.s-out { background:#fbe4e2; color:#a3352b; }
.login-wrap { display:flex; align-items:center; justify-content:center; min-height:calc(100vh - 60px); background:linear-gradient(180deg,#c7ecba 0%,#e6f6dd 40%,#ffffff 90%); padding:20px; }
.login-card { background:#fff; border:1px solid #e2ecda; border-radius:14px; padding:30px 28px; width:100%; max-width:380px; box-shadow:0 4px 20px rgba(0,0,0,0.06); }
.login-card h1 { font-size:19px; margin-bottom:4px; text-align:center; }
.login-card .sub { font-size:12.5px; color:#5c6f56; text-align:center; margin-bottom:20px; }
.tabs { display:flex; border:1px solid #e2ecda; border-radius:8px; overflow:hidden; margin-bottom:16px; }
.tabs button { flex:1; padding:9px; border:none; background:#fff; font-size:13px; font-weight:600; color:#5c6f56; cursor:pointer; }
.tabs button.active { background:#3f8b3f; color:#fff; }
.field { margin-bottom:14px; }
.field label { display:block; font-size:12.5px; color:#3d5c37; margin-bottom:5px; }
.field input { width:100%; padding:10px 12px; border:1px solid #d9e3d3; border-radius:8px; font-size:14px; }
.field input:focus { outline:2px solid #9dc48f; }
.login-card button.submit { width:100%; padding:11px; background:#3f8b3f; color:#fff; border:none; border-radius:8px; font-weight:600; font-size:14px; cursor:pointer; margin-top:4px; }
.error { color:#a3352b; font-size:12.5px; margin-top:10px; text-align:center; display:none; }
.demo-creds { margin-top:18px; padding:12px 14px; background:#f5faf1; border-radius:8px; font-size:12px; color:#3d5c37; line-height:1.7; }
.roadmap { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.roadmap span { font-size:11.5px; background:#f1f1ee; color:#7a7a74; padding:5px 10px; border-radius:16px; }
h2.section-title { font-size:17px; margin:26px 0 12px; color:#20401f; }
.hero { background:linear-gradient(180deg,#c7ecba 0%,#e6f6dd 42%,#ffffff 85%); padding:40px 20px 50px; text-align:center; }
.hero.small { padding:30px 20px 34px; }
.anim { position:relative; height:172px; max-width:300px; margin:0 auto 10px; }
@keyframes appleFall{0%{transform:translateY(-120px) rotate(-14deg);opacity:1}52%{transform:translateY(0) rotate(6deg);opacity:1}58%{transform:translateY(3px) rotate(0deg);opacity:1}61%{opacity:0}100%{opacity:0}}
@keyframes halfL{0%,61%{transform:translate(0,0) rotate(0deg);opacity:0}64%{opacity:1;transform:translate(0,0) rotate(0deg)}80%,90%{transform:translate(-34px,8px) rotate(-32deg);opacity:1}100%{transform:translate(-34px,8px) rotate(-32deg);opacity:0}}
@keyframes halfR{0%,61%{transform:translate(0,0) rotate(0deg);opacity:0}64%{opacity:1;transform:translate(0,0) rotate(0deg)}80%,90%{transform:translate(34px,8px) rotate(32deg);opacity:1}100%{transform:translate(34px,8px) rotate(32deg);opacity:0}}
@keyframes plateIn{0%,63%{opacity:0;transform:translateY(8px) scale(0.85)}74%{opacity:1;transform:translateY(0) scale(1.04)}82%,90%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(0) scale(1)}}
@keyframes steamRise{0%{transform:translateY(0) scaleY(1);opacity:0.65}55%{transform:translateY(-13px) scaleY(1.15);opacity:0.3}100%{transform:translateY(-26px) scaleY(1.3);opacity:0}}
.piece { position:absolute; left:50%; top:0; width:70px; height:70px; transform:translateX(-35px); }
.plate-wrap { position:absolute; left:50%; bottom:8px; width:160px; height:90px; transform:translateX(-80px); animation:plateIn 5.5s ease-in-out infinite; }
.hero h1 { font-size:26px; margin-bottom:8px; }
.hero p.tag { font-size:14px; color:#4a6144; margin-bottom:18px; }
.hero .btns a { display:inline-block; font-size:13.5px; font-weight:600; padding:10px 22px; border-radius:8px; margin:0 6px; text-decoration:none; }
main.content { max-width:820px; margin:0 auto; padding:36px 20px 70px; }
details.cat { border:1px solid #e2ecda; border-radius:10px; margin-bottom:10px; overflow:hidden; }
details.cat summary { cursor:pointer; padding:14px 18px; font-weight:600; font-size:15px; background:#f5faf1; list-style:none; }
details.cat summary::-webkit-details-marker { display:none; }
details.cat summary .count { font-weight:400; font-size:12px; color:#6b8163; }
.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(230px,1fr)); gap:1px; background:#eef3ea; }
.item { display:flex; align-items:center; gap:10px; background:#fff; padding:10px 14px; }
.item .code { font-size:11px; font-weight:700; color:#3f8b3f; background:#e6f6dd; padding:3px 7px; border-radius:5px; min-width:30px; text-align:center; }
.item .name { font-size:13.5px; flex:1; color:#2c2c2a; }
.item .price { font-size:12px; color:#5c6f56; white-space:nowrap; }
.highlight-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:8px; }
.highlight { background:#fff; border:1px solid #e2ecda; border-radius:12px; padding:18px 16px; text-align:center; }
.highlight .n { font-size:22px; font-weight:700; color:#2f6e2a; }
.highlight .l { font-size:12.5px; color:#5c6f56; margin-top:4px; }
.info-card { background:#fff; border:1px solid #e2ecda; border-radius:12px; padding:20px 22px; margin-bottom:14px; }
.info-card h3 { font-size:14.5px; margin-bottom:6px; color:#20401f; }
.info-card p { font-size:13.5px; color:#4a5c46; line-height:1.7; }
footer.site-footer { text-align:center; padding:30px 20px; color:#8a8a84; font-size:12px; border-top:1px solid #eee; }
.mascot-caption { text-align:center; font-size:13.5px; color:#4a6144; margin:4px 0 0; }
.mascot-track { position:relative; height:172px; max-width:460px; margin:6px auto 0; overflow:hidden; }
.mascot-walk { position:absolute; left:50%; top:6px; width:120px; margin-left:-60px; animation:walkX 6s ease-in-out infinite alternate; }
.mascot-bounce { animation:mascotBounce 0.55s ease-in-out infinite; }
@keyframes walkX { 0% { transform:translateX(-150px); } 100% { transform:translateX(150px); } }
@keyframes mascotBounce { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-7px); } }
.legL { animation:legSwingL 0.55s ease-in-out infinite; transform-origin:45px 95px; }
.legR { animation:legSwingR 0.55s ease-in-out infinite; transform-origin:75px 95px; }
@keyframes legSwingL { 0%,100% { transform:rotate(-22deg); } 50% { transform:rotate(22deg); } }
@keyframes legSwingR { 0%,100% { transform:rotate(22deg); } 50% { transform:rotate(-22deg); } }