:root{--ink:#081d33;--red:#d71920;--red2:#a90811;--line:#dce4ec;--soft:#f4f7fa;--green:#0b8b72;--gold:#b47a14}*{box-sizing:border-box}body{margin:0;background:#eef2f5;color:var(--ink);font-family:Tahoma,"Noto Sans Thai",sans-serif}.topbar{position:sticky;top:0;z-index:20}.runtime-live{display:flex;align-items:center;gap:8px;font-weight:700}.runtime-live i{width:9px;height:9px;border-radius:50%;background:#16b37e;box-shadow:0 0 0 4px #16b37e22}.runtime-shell{max-width:1780px;margin:auto;padding:28px}.runtime-hero{border-radius:22px;padding:30px 34px;color:#fff;background:linear-gradient(125deg,#071d34 0%,#092943 62%,#9b0811 140%);display:flex;justify-content:space-between;align-items:end;gap:24px;box-shadow:0 18px 44px #05192d2a}.runtime-hero h1{font-size:clamp(27px,3vw,44px);margin:7px 0}.runtime-hero p{margin:0;color:#d9e6ee}.runtime-counts{display:flex;gap:10px}.runtime-counts span{min-width:100px;padding:12px;background:#ffffff16;border:1px solid #ffffff28;border-radius:13px;text-align:center}.runtime-counts b{display:block;font-size:24px}.runtime-grid{display:grid;grid-template-columns:1fr 1.15fr 1.15fr;gap:18px;margin-top:20px}.runtime-panel{background:#fff;border:1px solid var(--line);border-top:5px solid var(--red);border-radius:18px;padding:22px;box-shadow:0 8px 24px #071d3410}.runtime-panel>header{display:flex;gap:12px;align-items:flex-start;border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:16px}.runtime-panel h2{margin:0;font-size:21px}.runtime-panel h3{font-size:15px;margin:22px 0 10px}.runtime-panel p{margin:4px 0;color:#657487}.step{background:var(--red);color:#fff;font-weight:900;border-radius:10px;padding:7px 9px}.field{display:grid;gap:6px;margin:10px 0;font-size:13px;font-weight:700}.field input,.field select,.search-field input{width:100%;border:1px solid #ccd7e2;border-radius:10px;padding:11px;background:#fff;color:var(--ink)}.form-two{display:grid;grid-template-columns:1fr 1fr;gap:10px}.wide{width:100%;justify-content:center}.search-field{display:flex;gap:8px}.search-field button{border:0;border-radius:10px;background:var(--ink);color:#fff;padding:0 18px;font-weight:800}.item-list{display:grid;gap:8px;max-height:280px;overflow:auto}.runtime-item{border:1px solid var(--line);border-radius:11px;padding:11px;background:#fafcfd;display:flex;justify-content:space-between;gap:10px;align-items:center}.runtime-item b,.runtime-item small{display:block}.runtime-item small{color:#708092;margin-top:3px}.runtime-item button{border:1px solid #cdd8e3;background:#fff;border-radius:8px;padding:7px 10px;cursor:pointer}.selected-employee{margin:12px 0;padding:14px;border-radius:12px;background:#eaf7f3;border:1px solid #9ed6c8}.preview-result{min-height:130px;border:1px dashed #bbc9d6;border-radius:12px;padding:14px;background:#f7f9fb}.preview-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.preview-summary span{padding:10px;border-radius:10px;background:#fff;border:1px solid var(--line)}.preview-summary b{display:block;font-size:20px}.preview-line{margin-top:8px;border-left:4px solid var(--green);background:#fff;padding:9px 10px;border-radius:7px}.preview-line.HOLD{border-color:var(--gold)}.apply-check{display:flex;gap:8px;margin:14px 0;font-size:13px;color:#526376}#notice{margin-top:14px;padding:13px 16px;border-radius:11px;background:#e8f7f2;color:#086a58;font-weight:700}#notice.error{background:#fff0f0;color:#a30b14}#authGate{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;background:#071c2e;color:#fff;font-weight:800}@media(max-width:1200px){.runtime-grid{grid-template-columns:1fr}.runtime-hero{align-items:flex-start;flex-direction:column}}@media(max-width:680px){.runtime-shell{padding:12px}.runtime-hero{padding:22px}.form-two{grid-template-columns:1fr}.runtime-counts{flex-wrap:wrap}}