@import"https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+Thai:wght@400;500;600;700&display=swap";*{box-sizing:border-box}body{margin:0;background:#f5f7fb;color:#172033;font:14px DM Sans,Noto Sans Thai,sans-serif}main{min-height:100vh;display:flex}aside{width:245px;background:#101a35;color:#d9e2fb;padding:28px 18px;display:flex;flex-direction:column}.brand{color:#fff;font-size:21px;font-weight:700;letter-spacing:-1px}.brand span{color:#63a4ff;margin-left:5px}aside>small{color:#8190b4;margin:4px 9px 28px}nav{display:grid;gap:6px}nav button{border:0;background:transparent;color:#b8c4e1;text-align:left;padding:12px 14px;border-radius:8px;font:inherit;cursor:pointer}nav button:hover,nav button.active{background:#223256;color:#fff}.user{margin-top:auto;border-top:1px solid #2b3b60;padding:18px 8px 0;color:#fff}.user small{color:#8190b4}.content{width:calc(100% - 245px);padding:34px 42px;max-width:1500px}header,.toolbar{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:28px}h1{font-size:28px;margin:0 0 5px;letter-spacing:-.8px}h2{font-size:16px;margin:0 0 18px}h3{font-size:13px;color:#64748b;text-transform:uppercase;letter-spacing:.05em;margin:25px 0 8px}p{color:#71809a;margin:0}.primary,button{border:0;border-radius:7px;padding:10px 15px;font:600 13px inherit;cursor:pointer;background:#e9eef8;color:#24314d}.primary{background:#2563eb;color:#fff}.small{padding:6px 9px}.primary:hover{background:#1d4ed8}.primary:disabled{opacity:.7}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:20px}.card,.panel{background:#fff;border:1px solid #e6ebf4;border-radius:12px;box-shadow:0 2px 8px #101a3506}.card{padding:18px}.card span,.card small{display:block;color:#6e7a91}.card strong{display:block;font-size:21px;margin:10px 0 6px;letter-spacing:-.5px}.income strong{color:#157a54}.expense strong{color:#c2410c}.profit strong{color:#2563eb}.pending strong{color:#8a3ffc}.two-col{display:grid;grid-template-columns:minmax(280px,.8fr) minmax(500px,1.4fr);gap:20px}.panel{padding:21px;overflow:auto}.chart{height:260px}.toolbar{margin-bottom:18px}.toolbar h2{font-size:20px;margin-bottom:4px}.form{max-width:620px;margin-bottom:20px}.form form{display:grid;gap:11px}.form input,.form select{width:100%;border:1px solid #dce4f0;background:#fff;border-radius:7px;padding:10px;font:inherit;color:#172033}.form label{display:grid;gap:5px;color:#64748b;font-size:12px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}table{width:100%;border-collapse:collapse;font-size:13px}th{text-align:left;color:#76839a;font-size:11px;text-transform:uppercase;letter-spacing:.04em;padding:0 10px 10px;white-space:nowrap}td{padding:12px 10px;border-top:1px solid #edf1f7;vertical-align:middle}td small{color:#8a96aa}.badge{border-radius:99px;padding:4px 8px;font-size:10px;font-weight:700;background:#e7edf8;color:#53617a}.badge.published,.badge.paid{background:#dcfce7;color:#16714b}.badge.draft{background:#fff7d8;color:#9a6c00}.badge.void{background:#fee2e2;color:#b91c1c}.badge.customer{background:#dbeafe;color:#1d4ed8}.badge.vendor{background:#f3e8ff;color:#7e22ce}.actions{white-space:nowrap}.empty{text-align:center;color:#8491a6;padding:30px}.notice,.error{padding:12px 15px;border-radius:8px;margin-bottom:18px}.notice{background:#dcfce7;color:#166534}.error{background:#fee2e2;color:#b91c1c}.report{max-width:720px}.report-line,.report-total{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid #eef2f7}.report-total{margin-top:14px;border-top:2px solid #1e293b;border-bottom:0;font-size:16px}.report-total strong{color:#157a54}@media(max-width:900px){aside{width:65px;padding:20px 8px}.brand{font-size:0}.brand span{display:none}.brand:before{content:"cb";font-size:19px}aside>small,.user{display:none}nav button{font-size:0;text-align:center;padding:13px 3px}nav button:before{content:"•";font-size:20px}.content{width:calc(100% - 65px);padding:24px 18px}.cards{grid-template-columns:repeat(2,1fr)}.two-col{grid-template-columns:1fr}}@media(max-width:560px){header{display:block}header .primary{margin-top:15px}.cards{grid-template-columns:1fr}.content{padding:20px 12px}.panel{padding:15px}.two-col{gap:12px}.form-row{grid-template-columns:1fr}table{min-width:650px}}