*{box-sizing:border-box}body{margin:0;background:#f4f3ee;color:#202820;font:15px system-ui,-apple-system,sans-serif}button,input,select,textarea{font:inherit}button{cursor:pointer;border:1px solid #d2d6cb;background:white;border-radius:7px;padding:11px 16px;color:inherit}button:hover{background:#e9eddf}button.primary,.active{background:#d9f07c!important;color:#203019!important;border-color:#c5dc67}input,select,textarea{padding:11px;border:1px solid #d3d7cc;border-radius:6px;background:white;max-width:100%}textarea{width:100%;min-height:120px}label{display:grid;gap:7px;margin:14px 0;font-size:13px}h1{font-size:36px;letter-spacing:-1.3px;margin:10px 0}h2{font-size:21px;margin:0 0 16px}h3{margin:0 0 10px}p{line-height:1.6}small,.muted{color:#697365}small{font-size:12px}.demo{background:#273627;color:#e3efcf;padding:10px 26px;font-size:11px;letter-spacing:1px;display:flex;justify-content:space-between}.demo span{letter-spacing:0}.brand{font-size:25px;font-weight:900;letter-spacing:3px}.brand small{display:block;font-size:10px;font-weight:500;letter-spacing:4px;margin-top:5px}.landing{max-width:1100px;margin:70px auto;display:grid;grid-template-columns:1.1fr 1fr;gap:70px;padding:24px}.hero{padding:35px 0}.hero h1{font-size:57px;line-height:1.04;margin:55px 0 22px}.eyebrow{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:#607151}.card{background:#fff;border:1px solid #dedfd5;border-radius:12px;padding:25px;margin-bottom:20px}.tabs,.actions{display:flex;gap:8px;flex-wrap:wrap}.tabs button{flex:1}.shell{display:grid;grid-template-columns:235px 1fr;min-height:calc(100vh - 35px)}aside{padding:28px 20px;background:#e9ecdf;border-right:1px solid #d9ddce}nav{display:grid;gap:7px;margin-top:45px}nav button{text-align:left;background:transparent;border:0}main{padding:35px 40px;min-width:0;max-width:1500px}header{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px;gap:15px}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.stat{font-size:34px;font-weight:650;margin:15px 0 5px}.pill{display:inline-block;background:#edf1e4;border-radius:20px;padding:5px 10px;font-size:12px}.pill.warn{background:#fff0cf;color:#895c05}.pill.good{background:#def2dc;color:#286433}table{border-collapse:collapse;width:100%;font-size:13px}th{text-align:left;color:#6b7465;font-weight:500}td,th{padding:15px 10px;border-bottom:1px solid #e9ebe4;vertical-align:top}.overflow{overflow:auto}.schedule td{min-width:125px}.shift{background:#e8eddf;border-left:3px solid #7d9567;padding:12px;border-radius:5px}.absence{background:#fff0d3;border-left-color:#d7a442;margin-top:7px}.bar{height:12px;background:#edf0e6;border-radius:10px;margin:12px 0 23px;overflow:hidden}.bar i{display:block;background:#9aaf74;height:100%}.split{display:grid;grid-template-columns:1.6fr 1fr;gap:20px}#toast{position:fixed;bottom:25px;right:25px;background:#283d2a;color:white;padding:15px 22px;border-radius:9px;display:none;max-width:450px}video,canvas,.photo{width:100%;max-height:210px;object-fit:cover;border-radius:8px;background:#e9eddf}.photo{width:95px;height:70px}.pin{font-size:28px;letter-spacing:15px;text-align:center;width:100%}.line{border-top:1px solid #e5e8de;margin:23px 0}.check{display:flex;align-items:center;gap:8px}.check input{width:auto}a{color:#3d5e28}.empty{padding:35px;text-align:center}.metric-note{border-left:3px solid #a7bd79;padding-left:15px}footer{margin-top:35px;font-size:12px;color:#6b7465}@media(max-width:850px){.landing,.split{grid-template-columns:1fr;gap:20px}.landing{margin:20px auto}.hero h1{margin-top:25px;font-size:40px}.shell{grid-template-columns:1fr}aside{padding:20px}nav{margin-top:20px;display:flex;flex-wrap:wrap}main{padding:20px}.grid{grid-template-columns:1fr}.demo span{display:none}header{align-items:flex-start}h1{font-size:29px}}
/* Layout matched to the saved Restrap KPI interface; mock app logic remains isolated. */
:root{font-family:Arial,Helvetica,sans-serif;--line:#e1e4e1;--accent:#d8f07c}body{font-family:Arial,Helvetica,sans-serif;background:#f3f4f3 url('contours.svg') repeat;background-size:780px 620px;color:#202322}.demo{background:#e8eccf;color:#303b26;border-bottom:1px solid #d8ddbe;font-weight:700}.demo span{font-weight:400}.shell{display:block}.shell aside{background:#000;color:#fff;padding:0 40px;min-height:84px;display:flex;align-items:center;gap:28px;border:0;flex-wrap:wrap}.brand{position:relative;display:block;width:248px;min-width:248px;height:69px;margin:7px 0;overflow:hidden;background:white;padding:0}.brand img{position:absolute;width:287px;max-width:none;height:auto;left:-19.5px;top:-21.6px}.shell nav{display:flex;gap:18px;margin:0;flex:1;flex-wrap:wrap;align-items:stretch}.shell nav button{background:transparent!important;color:#aaa!important;border:0;border-bottom:3px solid transparent;border-radius:0;padding:15px 0;font-size:14px}.shell nav button.active{border-bottom-color:#d8f07c;color:white!important}.shell aside>p{margin:0}.shell aside>p button{background:none;border:0;color:#ccc;font-size:12px;padding:8px 0;text-decoration:underline}.workspace-label{display:none}main{max-width:1500px;margin:auto;padding:44px 40px 64px}main header{margin-bottom:30px}h1{font-size:38px;letter-spacing:-1.4px}h2{letter-spacing:-.4px}.card{border-color:#e1e4e1;border-radius:6px}.eyebrow{font-weight:700;color:#606660}.primary{background:#131714!important;color:white!important;border-color:#131714!important}button{border-radius:5px}button.primary:hover{background:#2c352d!important}.pill{border-radius:4px}.bar i{background:#29734c}.landing{gap:70px;margin:35px auto}.landing .hero{padding-top:0}.landing .hero>.brand{border:1px solid #ddd}.landing .hero h1{font-size:48px}.landing .tabs{border-bottom:1px solid #d6dbd5;gap:25px}.landing .tabs button{background:transparent!important;border:0;border-radius:0;border-bottom:3px solid transparent;padding:13px 0}.landing .tabs button.active{border-bottom-color:#273d2d;font-weight:bold}.department{padding:28px;border-radius:7px;background:#000;color:white;min-height:265px}.department.cutting{background:#626b36}.department.packing{background:#f28c28;color:#21170e}.department .eyebrow,.department small{color:inherit}.department-score{font-size:54px;font-weight:600;letter-spacing:-2px;margin:16px 0 8px}.department-score small{font-size:25px;margin-left:3px}.department p{font-size:13px}.department-meta{display:flex;justify-content:space-between;border-top:1px solid #ffffff35;padding-top:18px;margin:18px 0;font-size:13px}.department.packing .department-meta{border-color:#21170e33}.company{display:flex;justify-content:space-between;gap:24px;margin-top:22px}.company .stat{font-size:32px}.company h2{margin:0}footer{border-top:1px solid #dce1da;padding-top:25px;letter-spacing:.5px}@media(max-width:1050px){.shell aside{padding:10px 24px;gap:16px}.shell nav{gap:18px}.shell nav button{padding:10px 0}main{padding:30px 24px}}@media(max-width:650px){.shell aside{padding:8px 16px}.shell nav{order:3;flex-basis:100%}.brand{width:208px;min-width:208px;height:58px}.brand img{width:240px;left:-16px;top:-18px}.shell aside>p{margin-left:auto}main{padding:27px 16px}.company{flex-wrap:wrap}.company>div:first-child{width:100%}.landing{padding:16px}.landing .hero h1{font-size:36px}h1{font-size:30px}}
.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0 20px}.keypad button{min-height:68px;font-size:27px;font-weight:600;touch-action:manipulation;background:#f3f4f3}.keypad button:nth-child(10),.keypad button:nth-child(12){font-size:18px}.keypad button:active{background:#d8f07c}.pin{min-height:60px}.attachment{padding:10px 14px;background:#f2f4ee;border:1px solid #e1e4e1;border-radius:5px;overflow-wrap:anywhere}.attachment a{font-weight:600}.legacy-frame{display:block;width:100%;height:1400px;border:0;background:transparent}.shell aside{flex-wrap:nowrap;gap:26px;min-height:84px}.shell nav{flex-wrap:nowrap;overflow-x:auto;min-width:0;align-self:stretch;gap:25px}.shell nav button{white-space:nowrap;flex-shrink:0;align-self:stretch;padding:20px 0}.shell aside>p{flex-shrink:0}.new-nav{border-left:1px solid #444!important;padding-left:24px!important}@media(max-width:850px){.shell aside{flex-wrap:wrap}.shell nav{order:3;flex-basis:100%;min-height:50px}.shell nav button{padding:12px 0}.shell aside>p{margin-left:auto}}
#legacy-cache{max-width:1500px;padding:44px 40px;margin:auto}.legacy-frame[hidden],main[hidden],#legacy-cache[hidden]{display:none!important}@media(max-width:650px){#legacy-cache{padding:27px 16px}}
/* Landscape kiosk: keypad and camera remain side by side on iPad. */
.kiosk{max-width:1200px;margin:auto;padding:0 24px 12px}.kiosk-header{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:0 -24px 18px;padding:0 24px;background:#000;color:white;min-height:76px}.kiosk-header .brand{width:208px;min-width:208px;height:58px}.kiosk-header .brand img{width:240px;left:-16px;top:-18px}.kiosk-header .tabs{margin:0;gap:18px}.kiosk-header .tabs button{background:transparent!important;color:#bbb!important;border:0;border-bottom:3px solid transparent;border-radius:0;min-height:64px;padding:12px 4px}.kiosk-header .tabs button.active{color:white!important;border-bottom-color:#d8f07c}.kiosk-title{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:16px}.kiosk-title h1{font-size:30px;margin:5px 0 0}.kiosk-title .eyebrow{font-size:10px}.kiosk-title p{font-size:13px;margin:0;line-height:1.5;color:#606660}.kiosk-grid{display:grid;grid-template-columns:minmax(300px,.85fr) minmax(370px,1.15fr);gap:20px;align-items:stretch}.kiosk-grid .card{padding:20px;margin:0}.kiosk h2{font-size:18px;margin:0 0 14px;display:flex;align-items:center;gap:10px}.step{display:inline-grid;place-items:center;border-radius:50%;width:26px;height:26px;background:#edf1e5;font-size:13px}.kiosk .pin-label{font-size:12px;margin:0;gap:7px}.kiosk .pin{min-height:54px;padding:9px}.kiosk .keypad{gap:9px;margin:12px 0}.kiosk .keypad button{min-height:58px;padding:8px;font-size:25px}.kiosk .keypad button:nth-child(10),.kiosk .keypad button:nth-child(12){font-size:17px}.camera-stage{height:226px;position:relative;background:#e9eddf;border:1px solid #dce2d3;border-radius:7px;overflow:hidden}.camera-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:#687761;text-align:center;font-size:13px}.camera-placeholder strong{color:#34432d}.camera-stage video,.camera-stage canvas{position:absolute;inset:0;width:100%;height:100%;max-height:none;object-fit:contain;background:#e9eddf}.camera-stage [hidden]{display:none}.camera-actions{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:12px}.camera-actions button{min-height:44px;padding:8px;font-size:13px;touch-action:manipulation}.kiosk #photostatus{font-size:12px;min-height:30px;line-height:1.4;margin:9px 0}.kiosk-confirm{width:100%;min-height:52px;font-size:17px;font-weight:600;touch-action:manipulation}.kiosk #receipt:empty{display:none}.kiosk #receipt p{margin:8px 0 0;font-size:12px}.kiosk-settings{margin-top:12px;font-size:12px;color:#606660}.kiosk-settings summary{cursor:pointer;min-height:30px;padding:8px 0}.kiosk-settings label{max-width:300px}.kiosk-settings:not([open])>label,.kiosk-settings:not([open])>small{display:none}@media(min-width:760px) and (max-height:700px){.kiosk-header{min-height:60px;margin-bottom:10px}.kiosk-header .brand{height:48px;margin:3px 0}.kiosk-header .tabs button{min-height:54px}.kiosk-title{margin-bottom:10px}.kiosk-title h1{font-size:26px}.kiosk-grid .card{padding:14px}.kiosk h2{margin-bottom:10px}.kiosk .keypad button{min-height:48px}.kiosk .pin{min-height:46px;padding:5px}.camera-stage{height:185px}.kiosk #photostatus{min-height:24px;margin:7px 0}.kiosk-confirm{min-height:46px}.kiosk-settings{margin-top:5px}}@media(max-width:759px){.kiosk{padding:0 16px 16px}.kiosk-header{margin:0 -16px 18px;padding:0 16px;gap:12px;flex-wrap:wrap}.kiosk-header .tabs{gap:12px}.kiosk-title{display:block}.kiosk-title p{margin-top:10px}.kiosk-grid{grid-template-columns:1fr}.camera-stage{height:240px}.kiosk .keypad button{min-height:62px}}
.kiosk-header .tabs button{white-space:nowrap;flex:none}.kiosk{padding-bottom:8px}@media(min-width:760px) and (max-height:700px){.camera-stage{height:155px}}
@media(min-width:760px) and (max-height:700px){.kiosk .keypad{gap:8px}.kiosk-settings summary{min-height:26px;padding:6px 0}}
.pay-period-controls{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.pay-period-controls input,.pay-period-controls select{width:100%}.pay-period-controls input[readonly]{background:#f0f2ec;color:#5b6654}@media(max-width:750px){.pay-period-controls{grid-template-columns:1fr 1fr}}