* { 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; }
.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; }
.cta, .cta:visited { background:#3f8b3f; color:#fff !important; padding:8px 16px; border-radius:8px; font-weight:600; text-decoration:none; }
.ghost { background:#fff; color:#2f5c2b; 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; }