@import"https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@400;500;600;700&display=swap";*{box-sizing:border-box}body{margin:0;background:#f7f8fc;color:#172033;font-family:IBM Plex Sans Thai,system-ui,sans-serif}.app-shell{min-height:100vh;display:grid;grid-template-columns:244px 1fr;grid-template-rows:72px 1fr}.app-shell header{grid-column:1/3;display:flex;justify-content:space-between;align-items:center;padding:0 28px;background:#fff;border-bottom:1px solid #e9ecf3}.brand{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:700}.brand small{display:block;color:#78839a;font-size:11px;font-weight:400}.brand-mark{display:inline-grid;place-items:center;width:36px;height:36px;background:linear-gradient(135deg,#185adb,#16a0bd);color:#fff;border-radius:11px;font-weight:700}.header-right{display:flex;align-items:center;gap:14px}.user{font-size:14px;color:#566176}.icon-button{background:none;border:0;color:#566176;cursor:pointer}.app-shell aside{padding:22px 14px;background:#fff;border-right:1px solid #e9ecf3;display:flex;flex-direction:column;gap:5px}.nav{border:0;background:transparent;border-radius:9px;padding:12px;display:flex;align-items:center;gap:12px;font:inherit;color:#5d687d;cursor:pointer;text-align:left}.nav svg{width:19px}.nav.active{background:#edf4ff;color:#1556ca;font-weight:600}.aside-bottom{margin-top:auto;color:#8b94a6;font-size:12px;display:flex;gap:7px;align-items:center;padding:8px}.content{padding:34px;max-width:1280px;width:100%;margin:0 auto}.page-heading{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:25px}.eyebrow{margin:0;color:#3371d8;font-weight:600;font-size:13px}.page-heading h1{margin:3px 0 0;font-size:28px}.date-picker{font-size:13px;color:#6b7588}.date-picker input{display:block;padding:8px;border:1px solid #dbe0ea;border-radius:7px;background:#fff;font:inherit}.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:20px}.kpi,.card{background:#fff;border:1px solid #e6eaf1;border-radius:13px;box-shadow:0 2px 4px #15213a05}.kpi{padding:19px}.kpi strong{display:block;font-size:28px}.kpi span{font-size:13px;color:#69758a}.card{padding:23px;margin-bottom:18px}.card-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:17px}.card h2{font-size:17px;margin:0}.muted,.hint{color:#778298;font-size:13px}.shift-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.shift-cell{border:1px solid #e7eaf1;border-radius:10px;min-height:150px;padding:12px}.shift-pill{display:flex;justify-content:space-between;color:#fff;padding:7px 9px;border-radius:7px;font-weight:600}.shift-pill small{font-weight:400;font-size:11px}.people{display:flex;flex-direction:column;gap:5px;padding:12px 2px;font-size:14px}.empty{color:#a1a8b6}.primary,.small{border:0;border-radius:8px;cursor:pointer;font:inherit}.primary{background:#1762da;color:#fff;padding:10px 15px;font-weight:600}.small{padding:7px 10px;background:#eef2f8;color:#3c4a62}.compact{padding:7px 10px;margin-left:7px}.import-card{text-align:center;padding:40px;max-width:750px}.import-card svg{color:#2365d7}.import-card p{color:#68758a}.file input{display:none}.table-wrap{overflow:auto;margin:16px 0;text-align:left}table{width:100%;border-collapse:collapse;font-size:13px}th,td{padding:9px;border-bottom:1px solid #e8ebf1;text-align:left}.badge,.status{background:#f1f4f9;color:#5a6980;padding:5px 8px;border-radius:99px;font-size:12px}.status.pending{background:#fff6dc;color:#9a6b00}.status.accepted{background:#e8f8ed;color:#16803b}.empty-state{text-align:center;color:#738097;padding:30px}.exchange{padding:15px 0;border-bottom:1px solid #edf0f5;display:flex;justify-content:space-between;align-items:center}.exchange:last-child{border:0}.exchange p{margin:4px 0 0;font-size:13px;color:#748096}.exchange-form{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.4fr auto;gap:9px;align-items:end}.exchange-form h2{grid-column:1/-1}.exchange-form input,.exchange-form select{min-width:0;padding:9px;border:1px solid #dce1eb;border-radius:8px;background:#fff;font:inherit}.toast{position:fixed;right:24px;top:86px;background:#152f5b;color:#fff;border-radius:9px;padding:11px 14px;z-index:2}.toast button{background:none;border:0;color:#fff;font-size:18px;margin-left:12px}.setup,.auth{max-width:480px;margin:12vh auto;background:#fff;padding:38px;border:1px solid #e4e8f0;border-radius:16px;text-align:center}.setup .brand-mark,.auth .brand-mark{margin:auto}.setup h1,.auth h1{font-size:25px}.setup p{color:#647086;line-height:1.7}.auth form{display:grid;gap:15px;text-align:left}.auth label{font-size:13px;color:#58647a}.auth input{width:100%;display:block;margin-top:5px;padding:10px;border:1px solid #dce1eb;border-radius:8px;font:inherit}.link{background:none;border:0;margin-top:15px;color:#1c60d3;cursor:pointer}.error{color:#bf2731;font-size:13px}.hint{margin-top:10px}@media(max-width:760px){.app-shell{grid-template-columns:1fr;grid-template-rows:64px auto 1fr}.app-shell header{grid-column:1}.app-shell aside{flex-direction:row;overflow:auto;padding:8px}.aside-bottom{display:none}.nav{white-space:nowrap;padding:9px}.content{padding:20px}.shift-grid,.kpis,.exchange-form{grid-template-columns:1fr}.exchange-form h2{grid-column:auto}.page-heading{align-items:flex-start;gap:15px}.user{display:none}}.ai-draft{display:flex;align-items:center;gap:18px;flex-wrap:wrap}.ai-draft>div:first-child{flex:1;min-width:260px}.ai-draft h2{margin-bottom:4px}.ai-draft p{margin:0}.draft-list{width:100%;padding:10px 12px;background:#f5f8ff;border-radius:8px;color:#3c4f70;font-size:14px;display:grid;gap:5px}.staff-list{display:grid;gap:8px;margin-top:15px}.staff-row{display:flex;justify-content:space-between;align-items:center;text-align:left;padding:12px;border:1px solid #e4e8f0;border-radius:8px;background:#fff;cursor:pointer;font:inherit;color:#39516f}.staff-row small{display:block;color:#778298;font-size:12px;margin-top:3px}.staff-form{max-width:560px;display:grid;gap:13px}.staff-form label{display:grid;gap:5px;font-size:13px;color:#58647a}.staff-form input,.staff-form select{padding:10px;border:1px solid #dce1eb;border-radius:8px;background:#fff;font:inherit}.staff-form .primary{margin-left:8px}.date-picker:after{content:"รูปแบบไทย: วว/ดด/ปปปป";display:block;color:#778298;font-size:11px;margin-top:4px}.row-actions{display:flex;gap:8px;align-items:center}.staff-row .small{padding:6px 12px;border:1px solid #dce1eb;border-radius:7px;background:#fff;font:inherit;font-size:13px;color:#58647a;cursor:pointer}.staff-row .primary.small{background:#1762da;color:#fff;border-color:transparent;font-weight:600}.confirm-box{margin:15px 0;padding:15px;border:1px solid #ffe0a8;border-radius:9px;background:#fffaf0}.confirm-box p{margin:0 0 11px;font-size:14px;color:#6b5423;line-height:1.6}.confirm-box .error{margin:4px 0}.divider{border:0;border-top:1px solid #e8ebf1;margin:22px 0 4px}.temp-password{font-family:ui-monospace,Consolas,monospace;font-size:23px;letter-spacing:2px;background:#fff;border:1px dashed #d9b775;border-radius:8px;padding:12px;text-align:center;-webkit-user-select:all;user-select:all}