:root{--g:#124b2d;--g2:#178653;--g3:#eaf5ee;--ink:#17231c;--mut:#68756d;--bg:#f5f7f5;--card:#fff;--line:#e1e7e2;--red:#bd2b20;--shadow:0 8px 28px rgba(24,55,38,.07);--radius:18px}
*{box-sizing:border-box}html{font-size:16px}body{margin:0;background:var(--bg);color:var(--ink);font-family:"Noto Sans Thai","Noto Sans",Arial,sans-serif;font-size:16px;line-height:1.45;-webkit-font-smoothing:antialiased}.top{background:linear-gradient(135deg,#103f27,#168957);color:#fff;padding:14px 16px;position:sticky;top:0;z-index:10;box-shadow:0 2px 14px rgba(0,0,0,.08)}.top b{font-size:18px;letter-spacing:.2px}.top .muted{font-size:11px!important;margin-top:1px}.wrap{max-width:760px;margin:auto;padding:16px 14px 100px}.card{background:var(--card);border:1px solid rgba(225,231,226,.8);border-radius:var(--radius);padding:18px;margin-bottom:14px;box-shadow:var(--shadow)}.card h2,.card h3{margin:0 0 12px;letter-spacing:-.2px}.card h2{font-size:21px}.card h3{font-size:18px}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.metric{padding:15px;border-radius:15px;background:linear-gradient(180deg,#eef7f1,#e8f3eb);border:1px solid #e2eee5}.metric span{font-size:13px;color:#59665d}.metric b{font-size:21px;display:block;color:var(--g);margin-top:3px}.metric small{display:block;color:#748077;margin-top:2px;font-size:11px}.metric-main{min-height:88px}.muted{font-size:13px;color:var(--mut)}label{display:block;font-weight:700;font-size:14px;margin:11px 0 5px;color:#304039}input,select,textarea,button{width:100%;padding:13px 14px;border-radius:12px;border:1px solid #d6dfd9;font-size:16px;margin:0 0 9px;background:#fff;color:var(--ink);font-family:inherit;outline:none}input:focus,select:focus,textarea:focus{border-color:#55a879;box-shadow:0 0 0 3px rgba(23,134,83,.10)}textarea{min-height:88px;resize:vertical}.field-help{font-size:12px;color:#78847c;margin:-3px 0 10px}.btn,button{background:var(--g2);color:#fff;border:0;font-weight:700;text-decoration:none;text-align:center;display:inline-block;padding:13px 15px;border-radius:12px;cursor:pointer;transition:.15s}.btn:hover,button:hover{filter:brightness(.97)}.btn.block{display:block}.danger{background:var(--red)!important}.secondary{background:#eaf1ec!important;color:var(--g)!important}.outline{border:1px solid #cbd8cf!important;background:#fff!important;color:var(--g)!important}.row{display:flex;gap:10px}.row>*{flex:1;min-width:0}.item{padding:13px 0;border-bottom:1px solid #edf0ed}.item:last-child{border:0}.actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:8px}.actions .btn,.actions button{width:auto;font-size:13px;padding:9px 11px}.nav{position:fixed;bottom:0;left:0;right:0;background:rgba(255,255,255,.97);backdrop-filter:blur(12px);border-top:1px solid #dfe5e1;display:flex;z-index:50;padding:5px 4px max(6px,env(safe-area-inset-bottom));min-height:68px;box-shadow:0 -5px 22px rgba(22,52,36,.08)}.nav a{flex:1;min-width:0;text-align:center;padding:4px 1px;color:#6b756f;text-decoration:none;font-size:12px;line-height:1.15;white-space:nowrap;border-radius:10px}.nav a.active{color:var(--g);font-weight:800;background:#edf7f0}.nav-ico{display:block;font-size:18px;line-height:21px;margin-bottom:2px}.nav-label{display:block;font-size:12px;line-height:17px}.login{max-width:430px;margin:0 auto;padding:20px 18px}.login-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px;box-shadow:var(--shadow)}.login h1{text-align:center;color:var(--g);font-size:28px;margin:8px 0}.ok,.warn,.dangerbox{padding:11px 13px;border-radius:11px;margin:10px 0}.ok{background:#e8f6ed}.warn{background:#fff2d3}.dangerbox{background:#fdeceb}.tablewrap{overflow:auto}.table{width:100%;border-collapse:collapse;font-size:13px}.table th,.table td{padding:9px;border-bottom:1px solid #eee;text-align:left;white-space:nowrap}.badge{display:inline-block;padding:4px 8px;border-radius:99px;background:#eaf5ee;color:var(--g);font-size:12px}.bar{height:9px;background:#e8ece9;border-radius:99px;overflow:hidden}.bar i{display:block;height:100%;background:var(--g2)}.yearbox{border:1px solid #e1e9e3;border-radius:15px;margin:12px 0;overflow:hidden}.yearhead{padding:12px 13px;background:#eff7f1;font-weight:800;display:flex;justify-content:space-between;gap:8px}.yearhead span{color:#176b36}.smallgrid{padding:10px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.smallgrid>div{padding:10px;background:#fafcfb;border-radius:11px;font-size:12px}.smallgrid b{font-size:15px;color:#174d2a}.page-head{margin-bottom:12px}.page-head p{margin:3px 0 0}.section-label{font-size:12px;font-weight:800;color:#6d7971;text-transform:none;letter-spacing:.2px;margin:14px 0 7px}.quick-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px}.quick-actions .btn{padding:12px 8px}.summarygrid{grid-template-columns:repeat(2,minmax(0,1fr))}.positive{color:#17733e}.negative{color:#b42318}
/* Public */.public-nav{position:sticky;top:0;z-index:30;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 1px 8px rgba(0,0,0,.04)}.public-nav-inner{max-width:900px;margin:auto;min-height:56px;padding:8px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px}.public-brand{font-weight:800;color:var(--g);text-decoration:none;font-size:16px;white-space:nowrap}.public-nav nav{display:flex;align-items:center;gap:5px}.public-nav nav a{color:#405047;text-decoration:none;padding:8px 10px;border-radius:9px;font-size:14px}.public-nav .public-login{background:var(--g2);color:#fff;font-weight:800}.hero{min-height:60vh;background:radial-gradient(circle at 85% 20%,rgba(92,190,128,.25),transparent 28%),linear-gradient(135deg,#0d3920,#168452);color:#fff;display:flex;align-items:center;padding:34px 18px}.hero-inner{max-width:760px;margin:auto;width:100%}.brand{font-weight:800;letter-spacing:.5px}.hero h1{font-size:44px;line-height:1.08;margin:20px 0 14px}.hero h1 span{color:#c6f59a}.hero p{font-size:18px;line-height:1.6;max-width:560px}.hero-actions{display:flex;gap:10px;max-width:430px;margin-top:24px}.hero-actions .btn{flex:1}.landing{max-width:900px;margin:auto;padding:38px 16px 70px}.landing h2{text-align:center;color:#174d2a}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.feature{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow:var(--shadow);font-size:28px}.feature b{display:block;font-size:16px;margin-top:10px}.feature span{display:block;font-size:13px;color:#69756c;margin-top:5px;line-height:1.4}.cta{margin-top:36px;background:#eaf5ec;border-radius:22px;padding:30px;text-align:center}.cta .btn{max-width:300px;margin:18px auto}.login-nav{max-width:430px;margin:0 auto 8px;padding:0 18px}.login-nav a,.login-home a{color:var(--g);text-decoration:none;font-size:14px}.login-home{text-align:center;margin-top:14px}
@media(max-width:620px){.wrap{padding:12px 11px 102px}.card{padding:15px;border-radius:16px}.hero{min-height:54vh}.hero h1{font-size:35px}.feature-grid{grid-template-columns:1fr 1fr}.hero-actions{max-width:none}.landing{padding-top:28px}.grid{gap:8px}.metric{padding:12px}.metric b{font-size:19px}.quick-actions{gap:7px}.top{padding:12px 13px}.top b{font-size:17px}.nav{min-height:68px}.nav a{font-size:12px}.nav-ico{font-size:17px}.nav-label{font-size:12px}.row.stack{display:block}.row.stack>*{width:100%}.smallgrid{gap:7px}.login{padding:14px}.login-card{padding:19px}.public-nav-inner{padding:7px 11px}.public-brand{font-size:15px}.public-nav nav a{font-size:13px;padding:7px 8px}}
@media(max-width:370px){.nav-label{font-size:11px}.nav-ico{font-size:16px}.hero h1{font-size:31px}.grid{grid-template-columns:1fr}.smallgrid{grid-template-columns:1fr}.quick-actions{grid-template-columns:1fr}}

/* SaaS landing */
.public-body{background:#fff}.saas-hero{min-height:66vh}.eyebrow{display:inline-block;padding:7px 11px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.09);border-radius:999px;font-size:13px}.hero-primary{background:#d9f7a8!important;color:#123d24!important}.hero-secondary{background:rgba(255,255,255,.12)!important;color:#fff!important;border:1px solid rgba(255,255,255,.22)!important}.hero-trust{font-size:13px;opacity:.86;margin-top:14px}.section-kicker{text-align:center;text-transform:uppercase;letter-spacing:1.4px;font-size:11px;font-weight:800;color:#3c8b5c;margin-bottom:7px}.section-desc{text-align:center;color:var(--mut);max-width:620px;margin:-5px auto 22px}.demo-section,.steps,.pricing-section,.contact-section,.faq{margin-bottom:58px}.mock-dashboard{max-width:720px;margin:22px auto 0;background:#fff;border:1px solid #dfe9e1;border-radius:20px;padding:16px;box-shadow:0 16px 45px rgba(22,67,40,.12)}.mock-top{display:flex;justify-content:space-between;align-items:center;padding-bottom:13px;border-bottom:1px solid #edf1ee;color:var(--g)}.mock-top span{font-size:12px;background:#eef7f1;padding:5px 9px;border-radius:99px}.mock-title{font-size:18px;font-weight:800;margin:16px 0 10px}.mock-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.mock-metrics>div{background:#f3f8f4;border-radius:13px;padding:12px}.mock-metrics small{display:block;color:#6d7971;font-size:11px}.mock-metrics strong{display:block;color:var(--g);font-size:16px;margin-top:4px}.mock-note{margin-top:10px;padding:10px 12px;background:#f7fbf8;border-radius:11px;color:#3c6c4c;font-size:12px}.saas-features .feature{min-height:142px}.step-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.step-grid>div{background:#fff;border:1px solid var(--line);border-radius:16px;padding:17px}.step-grid b{display:block;color:#7c9b87;font-size:12px}.step-grid strong{display:block;margin:8px 0 3px;font-size:16px}.step-grid span{font-size:13px;color:var(--mut)}.pricing-section>h2,.contact-section h2{margin-top:0}.price-card{max-width:760px;margin:22px auto 12px;border:2px solid #bfe2ca;border-radius:22px;background:#fff;padding:24px;display:grid;grid-template-columns:1.5fr .8fr;gap:24px;box-shadow:var(--shadow)}.price-label{font-size:12px;font-weight:800;color:#388456;letter-spacing:1px}.price-card h3{font-size:24px;margin:7px 0}.price-card p{color:var(--mut);margin-top:0}.price-card ul{padding-left:20px;margin-bottom:0}.price-card li{margin:7px 0}.price-side{border-left:1px solid var(--line);padding-left:24px;display:flex;flex-direction:column;justify-content:center}.price{display:flex;align-items:baseline;gap:7px;margin-bottom:14px}.price strong{font-size:48px;line-height:1;color:var(--g)}.price span{font-size:14px;color:var(--mut)}.price-side small{display:block;text-align:center;color:#7b877f;margin-top:8px}.service-note{max-width:760px;margin:auto;background:#f3f7f4;border-radius:15px;padding:13px 16px;display:flex;justify-content:space-between;gap:15px;font-size:13px}.service-note span{color:var(--mut);text-align:right}.contact-card{max-width:760px;margin:auto;background:linear-gradient(135deg,#eff8f1,#f8fbf8);border:1px solid #dbe9de;border-radius:22px;padding:24px;display:grid;grid-template-columns:1fr 1fr;gap:22px}.contact-card h2{text-align:left}.contact-card .section-kicker{text-align:left}.contact-list>div{padding:12px 0;border-bottom:1px solid #dfe9e1}.contact-list>div:last-child{border-bottom:0}.contact-list b{display:inline-block;margin-left:5px}.contact-list span{display:block;color:var(--mut);font-size:12px;margin:3px 0 0 27px}.faq{max-width:760px;margin-left:auto;margin-right:auto}.faq details{border-bottom:1px solid var(--line);padding:14px 0}.faq summary{font-weight:800;cursor:pointer}.faq p{color:var(--mut);font-size:14px;margin:8px 0 0}.saas-cta{padding:38px 24px}.public-footer{text-align:center;padding:28px 16px 42px;border-top:1px solid var(--line);color:#77827b;font-size:12px}.tool-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.tool-grid .btn{width:100%;margin:0}.tool-danger{grid-column:1/-1}.settings-card{margin-top:14px}
@media(max-width:620px){.mock-metrics{grid-template-columns:1fr 1fr}.step-grid{grid-template-columns:1fr 1fr}.price-card{grid-template-columns:1fr;padding:19px;gap:16px}.price-side{border-left:0;border-top:1px solid var(--line);padding:17px 0 0}.service-note{display:block}.service-note span{display:block;text-align:left;margin-top:4px}.contact-card{grid-template-columns:1fr;padding:19px}.contact-card h2{text-align:center}.contact-card .section-kicker{text-align:center}.saas-features .feature{min-height:0}.demo-section,.steps,.pricing-section,.contact-section,.faq{margin-bottom:44px}}

.empty{text-align:center;padding:22px 10px;color:#59665d}.empty .btn{margin:4px}.onboarding{text-align:center;padding:22px}.onboarding h2{color:var(--g)}.onboarding p{color:var(--mut);margin:0 auto 16px;max-width:520px}.install-hint{max-width:760px;margin:0 auto 44px;background:#f3f8f4;border:1px solid #dce9df;border-radius:16px;padding:15px 17px;display:flex;justify-content:space-between;gap:15px}.install-hint span{color:var(--mut);font-size:13px}.account-expired{padding-bottom:0}.account-expired .warn{margin:0}.account-expired a{color:var(--g);font-weight:800}
@media(max-width:620px){.install-hint{display:block}.install-hint span{display:block;margin-top:4px}}