*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:#f1f5f9;color:#1e293b;font-family:"Sarabun","Segoe UI",sans-serif;font-size:14px}
::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:#ffffff}::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}
a{color:inherit;text-decoration:none}
input,select{background:#f8fafc;color:#1e293b;border:1px solid #cbd5e1;border-radius:6px;padding:7px 10px;font-family:inherit;font-size:13px;outline:none;width:100%}
input:focus,select:focus{border-color:#0ea5e9}
button{font-family:inherit;cursor:pointer;border:none}
table{border-collapse:collapse;width:100%}
th{font-size:11px;color:#64748b;font-weight:700;text-transform:uppercase;letter-spacing:.5px;background:#ffffff;padding:9px 12px;text-align:left;border-bottom:1px solid #e2e8f0}
td{padding:9px 12px;text-align:left;border-bottom:1px solid #e2e8f0;font-size:13px}
th.sortable{cursor:pointer;user-select:none;transition:background .15s}th.sortable:hover{background:#e2e8f0}
tbody tr:hover td{background:#eff6ff}tbody tr[style*='cursor:pointer']:hover td{background:#eff6ff;transition:background .1s}
.card{background:#ffffff;border:1px solid #e2e8f0;border-radius:14px;padding:20px}
.badge{display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:700;background:#f1f5f9;color:#64748b}
.btn-primary{background:#0ea5e9;color:#fff;border-radius:8px;padding:9px 18px;font-weight:700;font-size:13px}
.btn-secondary{background:#f1f5f9;color:#64748b;border:1px solid #cbd5e1;border-radius:8px;padding:8px 16px;font-weight:600;font-size:12px}
.btn-danger{background:#fee2e2;color:#dc2626;border-radius:8px;padding:8px 14px;font-weight:600;font-size:12px}
.btn-sm{padding:4px 10px;font-size:12px}
#toast{position:fixed;bottom:24px;right:24px;background:#0ea5e9;color:#fff;padding:12px 20px;border-radius:10px;font-weight:700;z-index:9999;display:none;animation:fadeIn .2s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
#app{display:flex;min-height:100vh}
#sidebar{width:200px;background:#ffffff;border-right:1px solid #e2e8f0;display:flex;flex-direction:column;padding:24px 0;flex-shrink:0;position:sticky;top:0;height:100vh}
#sidebar .logo{padding:0 20px 20px;font-size:17px;font-weight:900;color:#0ea5e9}
#sidebar .logo-sub{font-size:10px;color:#94a3b8;margin-top:2px}
#sidebar .save-badge{font-size:10px;color:#1e3a5f;margin-top:8px;padding:4px 8px;background:#f1f5f9;border-radius:6px;border:1px solid #e2e8f0}
.nav-btn{display:flex;align-items:center;gap:10px;padding:11px 20px;border:none;cursor:pointer;text-align:left;font-size:13px;width:100%;background:transparent;color:#64748b;border-left:2px solid transparent;transition:all .15s}
.nav-btn.active,.nav-btn:hover{color:#0ea5e9;background:linear-gradient(90deg,#eff6ff,transparent);border-left-color:#0ea5e9}
.nav-btn.active{font-weight:700}
.nav-footer{padding:12px 20px;border-top:1px solid #e2e8f0;margin-top:auto}
.nav-footer .stats{font-size:11px;color:#94a3b8;margin-bottom:8px}
#main{flex:1;padding:28px;overflow-y:auto;max-height:100vh}
.page{display:none}.page.active{display:block}
.page-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.page-header h1{font-size:22px;font-weight:800}
.page-header p{margin:4px 0 0;color:#94a3b8;font-size:13px}
.page-header-actions{display:flex;gap:8px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.kpi-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}
.kpi-val{font-size:22px;font-weight:900}
.kpi-sub{font-size:11px;color:#94a3b8;margin-top:4px}
.bar-chart-wrap{display:flex;align-items:flex-end;gap:5px;height:130px}
.bar-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px}
.bar-label{font-size:8px;color:#94a3b8}
.bar-val{font-size:8px;color:#64748b}
.bar{width:100%;border-radius:3px 3px 0 0;transition:height .3s}
.filter-row{display:flex;gap:10px;margin-bottom:16px;align-items:center;flex-wrap:wrap}
.filter-row input,.filter-row select{width:auto}
.pill-btns{display:flex;gap:6px}
.pill{padding:6px 14px;border-radius:20px;border:1px solid #e2e8f0;cursor:pointer;font-size:12px;font-weight:600;color:#94a3b8;background:transparent;transition:all .15s}
.pill.active,.pill:hover{border-color:#0ea5e9;background:#eff6ff;color:#0ea5e9}
.table-card{background:#ffffff;border:1px solid #e2e8f0;border-radius:14px;overflow:hidden}
.form-card{background:#ffffff;border:1px solid #e2e8f0;border-radius:14px;padding:20px;margin-bottom:16px}
.form-grid{display:grid;gap:10px;margin-bottom:14px}
.form-grid.cols-2{grid-template-columns:repeat(2,1fr)}
.form-grid.cols-3{grid-template-columns:repeat(3,1fr)}
.form-grid.cols-4{grid-template-columns:repeat(4,1fr)}
.col-span-2{grid-column:span 2}
.col-span-3{grid-column:span 3}
.form-label{font-size:11px;color:#64748b;margin-bottom:4px;display:block}
.inline-flex{display:flex;gap:8px;align-items:center}
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:100;display:none;align-items:center;justify-content:center}
.modal-overlay.open{display:flex}
.modal{background:#ffffff;border:1px solid #e2e8f0;border-radius:14px;padding:24px;width:480px;max-width:95vw}
.modal h2{font-size:15px;font-weight:800;color:#0ea5e9;margin-bottom:16px}
.suggest-box{position:absolute;top:100%;left:0;right:0;background:#f8fafc;border:1px solid #cbd5e1;border-radius:8px;z-index:50;max-height:200px;overflow-y:auto}
.suggest-item{padding:8px 12px;cursor:pointer;border-bottom:1px solid #e2e8f0;font-size:13px}
.suggest-item:hover{background:#f1f5f9}
.suggest-name{font-weight:600}
.suggest-price{font-size:11px;color:#0ea5e9}
.relative{position:relative}
.progress-bar-wrap{display:flex;align-items:center;justify-content:flex-end;gap:6px}
.progress-bar-bg{width:60px;height:6px;background:#f1f5f9;border-radius:3px;overflow:hidden}
.progress-bar-fill{height:100%;border-radius:3px}
.tab-btns{display:flex;gap:4px;margin-bottom:16px;border-bottom:1px solid #e2e8f0;padding-bottom:12px}
.tab-btn{padding:8px 16px;border-radius:8px;border:1px solid #e2e8f0;cursor:pointer;font-size:12px;font-weight:600;color:#64748b;background:transparent}
.tab-btn.active,.tab-btn:hover{border-color:#0ea5e9;background:#eff6ff;color:#0ea5e9}
.back-btn{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.mr-auto{margin-left:auto}
.text-right{text-align:right}
.text-center{text-align:center}