:root{--navy:#10213d;--blue:#1d4e89;--gold:#f5bc35;--bg:#f4f7fb;--text:#14243c;--muted:#6c7a90;--line:#e2e8f0;--green:#087f5b;--red:#c63838}*{box-sizing:border-box}body{margin:0;font-family:"Noto Sans Thai",sans-serif;color:var(--text);background:var(--bg)}button,input,select,textarea{font:inherit}.login-screen[hidden]{display:none!important}.login-screen{min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at top right,#2b659d 0,#10213d 48%,#081220 100%);padding:24px}.login-card{width:min(100%,430px);background:#fff;padding:40px;border-radius:20px;box-shadow:0 24px 70px #0005}.eyebrow{font:600 11px Outfit,sans-serif;letter-spacing:.13em;color:#4a779f;margin:0 0 6px}.login-card h1,.topbar h1{font-size:28px;margin:0}.login-card>p{color:var(--muted);margin:8px 0 28px}.login-card label,.form-grid label{display:grid;gap:7px;font-weight:600;font-size:14px}.login-card input,.form-grid input,.form-grid select,.form-grid textarea,.filters input,.filters select,.topbar input{border:1px solid #ccd6e4;border-radius:9px;background:#fff;padding:10px 12px;color:var(--text);outline:none}.login-card input:focus,.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px #1d4e8920}.login-card button,.primary{border:0;border-radius:9px;background:var(--navy);color:#fff;font-weight:700;cursor:pointer;padding:11px 16px}.login-card button{width:100%;margin-top:20px}.login-card a{display:block;text-align:center;color:var(--blue);font-size:13px;margin-top:18px}.error,.form-error{min-height:18px;color:var(--red);font-size:13px;margin:10px 0 0}.app{min-height:100vh;display:grid;grid-template-columns:242px 1fr}.sidebar{background:var(--navy);color:#fff;padding:28px 16px;display:flex;flex-direction:column}.brand{padding:0 12px 28px}.brand span{display:block;font:600 11px Outfit,sans-serif;letter-spacing:.15em;color:var(--gold)}.brand strong{font-size:19px}.sidebar nav{display:grid;gap:5px}.nav-btn,.logout{border:0;background:transparent;color:#bdc9d8;text-align:left;padding:12px;border-radius:8px;cursor:pointer;font-weight:600}.nav-btn:hover,.nav-btn.active{background:#ffffff14;color:#fff}.logout{margin-top:auto;color:#ffcece}.content{padding:32px;max-width:1600px;width:100%;margin:auto}.topbar,.page-intro,.panel-head,.modal-head,.modal-actions{display:flex;justify-content:space-between;align-items:center;gap:16px}.topbar{margin-bottom:28px}.topbar input{width:170px}.view{display:none}.view.active{display:block}.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:20px}.card,.panel{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 3px 12px #15243c08}.card{padding:20px}.card p{margin:0;color:var(--muted);font-size:13px}.card strong{display:block;font:700 27px Outfit,"Noto Sans Thai";margin-top:7px}.card.green strong{color:var(--green)}.card.red strong{color:var(--red)}.panel{padding:20px;margin-bottom:20px}.panel h2,.page-intro h2{font-size:18px;margin:0}.panel-head p,.page-intro p{font-size:13px;color:var(--muted);margin:3px 0 0}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:20px}.text-btn{border:0;background:none;color:var(--blue);font-weight:700;cursor:pointer}.service-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-top:16px}.service-tile{border:1px solid var(--line);border-radius:10px;padding:14px}.service-tile strong{display:block;font-size:18px;color:var(--green);margin-top:5px}.service-tile p{font-size:12px;color:var(--muted);margin:0}.page-intro{margin-bottom:20px}.filters{display:flex;gap:10px;margin-bottom:16px}.filters input{flex:1}.table-panel{padding:20px 0}.table-panel>.filters{padding:0 20px}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;font-size:13px}th{background:#f7f9fc;color:#607086;font-weight:700;text-align:left;white-space:nowrap}th,td{padding:12px 16px;border-bottom:1px solid var(--line);vertical-align:middle}td strong{display:block}td small{color:var(--muted)}.money{font-family:Outfit,"Noto Sans Thai";font-weight:700;white-space:nowrap}.profit{color:var(--green)}.loss{color:var(--red)}.status{font-size:11px;padding:4px 8px;border-radius:99px;background:#e7f0fa;color:#246299;white-space:nowrap}.status.done{background:#dff4eb;color:#087f5b}.status.cancelled{background:#fde4e4;color:#a93232}.row-actions{display:flex;gap:6px}.icon-btn{border:1px solid var(--line);background:#fff;border-radius:6px;cursor:pointer;padding:5px 8px;color:var(--blue)}.icon-btn.delete{color:var(--red)}.empty{color:var(--muted);padding:18px 0;font-size:13px}dialog{border:0;padding:0;border-radius:16px;box-shadow:0 25px 80px #0006;width:min(680px,calc(100% - 28px))}dialog::backdrop{background:#071422a8}.modal-form{padding:24px}.modal-head{padding-bottom:17px;border-bottom:1px solid var(--line)}.modal-head h2{margin:0;font-size:20px}.close{border:0;background:none;font-size:28px;line-height:1;color:var(--muted);cursor:pointer}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin:20px 0}.form-grid label{font-size:13px}.form-grid small{font-weight:400;color:var(--muted)}.wide{grid-column:1/-1}.form-grid textarea{resize:vertical}.modal-actions{justify-content:flex-end;margin-top:15px}.secondary{border:1px solid #ccd6e4;background:#fff;color:var(--text);font-weight:700;border-radius:9px;padding:10px 14px;cursor:pointer}.service-edit{display:flex;gap:8px;align-items:center}.service-edit input{width:130px;border:1px solid #ccd6e4;border-radius:7px;padding:7px}.save-small{border:0;background:var(--blue);color:#fff;border-radius:7px;padding:7px 10px;cursor:pointer;font-weight:700}@media(max-width:900px){.app{grid-template-columns:1fr}.sidebar{padding:14px;position:sticky;top:0;z-index:2;display:block}.brand{padding:0 0 10px}.sidebar nav{display:flex;overflow:auto;gap:4px}.nav-btn{white-space:nowrap;padding:8px}.logout{position:absolute;right:12px;top:10px}.content{padding:20px}.cards{grid-template-columns:1fr 1fr}.two-col{grid-template-columns:1fr}}@media(max-width:560px){.content{padding:16px}.topbar{align-items:flex-start}.cards{grid-template-columns:1fr}.two-col,.form-grid{grid-template-columns:1fr}.wide{grid-column:auto}.page-intro{align-items:flex-start;flex-direction:column}.panel{padding:15px}.table-panel{padding:15px 0}.table-panel>.filters{padding:0 15px;flex-direction:column}th,td{padding:10px 12px}.topbar h1{font-size:23px}}