body { font-family: 'Sarabun', system-ui, sans-serif; }
.nav-link { display:flex; align-items:center; gap:.65rem; padding:.55rem .9rem; border-radius:.5rem; color:#ccfbf1; font-size:.92rem; }
.nav-link:hover { background:rgba(255,255,255,.08); }
.nav-link.active { background:#0f766e; color:#fff; font-weight:600; }
.nav-link .badge { margin-left:auto; background:#f97316; color:#fff; font-size:.7rem; border-radius:9999px; padding:0 .45rem; }
.card { background:#fff; border-radius:.75rem; box-shadow:0 1px 2px rgba(0,0,0,.06); border:1px solid #e2e8f0; }
.btn { display:inline-flex; align-items:center; gap:.4rem; padding:.45rem .9rem; border-radius:.5rem; font-size:.875rem; font-weight:600; transition:.15s; cursor:pointer; }
.btn:disabled { opacity:.5; cursor:not-allowed; }
.btn-primary { background:#0f766e; color:#fff; } .btn-primary:hover:not(:disabled) { background:#115e59; }
.btn-green { background:#16a34a; color:#fff; } .btn-green:hover { background:#15803d; }
.btn-red { background:#dc2626; color:#fff; } .btn-red:hover { background:#b91c1c; }
.btn-amber { background:#f59e0b; color:#fff; } .btn-amber:hover { background:#d97706; }
.btn-ghost { background:#f1f5f9; color:#334155; } .btn-ghost:hover { background:#e2e8f0; }
.inp { width:100%; border:1px solid #cbd5e1; border-radius:.5rem; padding:.45rem .65rem; font-size:.9rem; background:#fff; }
.inp:focus { outline:2px solid #14b8a6; border-color:transparent; }
.inp[readonly] { background:#f8fafc; }
.lbl { display:block; font-size:.78rem; font-weight:600; color:#475569; margin-bottom:.2rem; }
.lbl .req { color:#dc2626; }
.tbl { width:100%; font-size:.875rem; }
.tbl th { text-align:left; background:#f8fafc; color:#475569; font-weight:600; padding:.55rem .7rem; border-bottom:1px solid #e2e8f0; white-space:nowrap; }
.tbl td { padding:.55rem .7rem; border-bottom:1px solid #f1f5f9; vertical-align:top; }
.tbl tbody tr.clickable:hover { background:#f0fdfa; cursor:pointer; }
.pill { display:inline-flex; align-items:center; gap:.25rem; padding:.1rem .55rem; border-radius:9999px; font-size:.72rem; font-weight:600; white-space:nowrap; }
.stat-card { padding:1rem; }
.stat-card .v { font-size:1.65rem; font-weight:700; line-height:1.1; }
.stat-card .k { font-size:.8rem; color:#64748b; }
.timeline li { position:relative; padding-left:1.4rem; padding-bottom:.8rem; }
.timeline li::before { content:''; position:absolute; left:.35rem; top:.4rem; width:.5rem; height:.5rem; border-radius:9999px; background:#14b8a6; }
.timeline li::after { content:''; position:absolute; left:.57rem; top:1rem; bottom:0; width:1px; background:#cbd5e1; }
.timeline li:last-child::after { display:none; }
.cmp-table td, .cmp-table th { padding:.45rem .7rem; border-bottom:1px solid #f1f5f9; text-align:right; white-space:nowrap; }
.cmp-table th:first-child, .cmp-table td:first-child { text-align:left; color:#475569; font-weight:600; position:sticky; left:0; background:#fff; }
.cmp-best { background:#f0fdf4 !important; }
.stepper { display:flex; gap:2px; overflow-x:auto; }
.stepper .s { flex:1; min-width:80px; text-align:center; font-size:.68rem; padding:.35rem .2rem; background:#e2e8f0; color:#64748b; }
.stepper .s.done { background:#99f6e4; color:#134e4a; }
.stepper .s.cur { background:#0f766e; color:#fff; font-weight:700; }
.stepper .s:first-child { border-radius:.4rem 0 0 .4rem; } .stepper .s:last-child { border-radius:0 .4rem .4rem 0; }