*{box-sizing:border-box}body{margin:0;font-family:'Sarabun',Tahoma,Arial,sans-serif;background:#eef3f8;color:#162033}.app-shell{display:flex;min-height:100vh}.sidebar{width:250px;background:linear-gradient(180deg,#0b1734,#111e3f);color:#fff;padding:22px 16px;position:fixed;inset:0 auto 0 0}.brand{font-size:22px;font-weight:700;padding:8px 12px 24px}.sidebar nav{display:grid;gap:6px}.sidebar a{color:#cbd5e1;text-decoration:none;padding:11px 14px;border-radius:10px}.sidebar a:hover{background:#1e2c52;color:#fff}.main{margin-left:250px;width:calc(100% - 250px)}.topbar{height:70px;background:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 28px;box-shadow:0 4px 14px rgba(15,23,42,.06);position:sticky;top:0;z-index:5}.content{padding:28px}.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.kpi{color:#fff;border-radius:18px;padding:22px;box-shadow:0 12px 30px rgba(15,23,42,.12)}.kpi span,.kpi small{display:block;opacity:.9}.kpi strong{display:block;font-size:31px;margin:7px 0}.green{background:linear-gradient(135deg,#0f9f6e,#32c48d)}.blue{background:linear-gradient(135deg,#2176ff,#56a0ff)}.purple{background:linear-gradient(135deg,#7754d9,#a86ff1)}.orange{background:linear-gradient(135deg,#f28a24,#ffb54c)}.card-panel{background:#fff;border-radius:18px;padding:22px;box-shadow:0 10px 28px rgba(15,23,42,.07)}.table thead th{background:#f6f8fb;white-space:nowrap}.login-page{min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at top left,#273c75,#0b1734)}.login-card{width:min(430px,92vw);background:#fff;padding:36px;border-radius:22px;box-shadow:0 30px 70px rgba(0,0,0,.25)}.brand-login{font-size:25px;font-weight:700;color:#172554;margin-bottom:24px}@media(max-width:992px){.sidebar{width:78px}.sidebar .brand span,.sidebar nav a{font-size:0}.sidebar nav a:before{content:'•';font-size:24px}.main{margin-left:78px;width:calc(100% - 78px)}.kpi-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:600px){.content{padding:16px}.topbar{padding:0 16px}.kpi-grid{grid-template-columns:1fr}.sidebar{display:none}.main{margin:0;width:100%}}
button,input,select,textarea,table,.btn,.form-control,.form-select{font-family:'Sarabun',Tahoma,Arial,sans-serif}