:root{--black:#050505;--white:#fff;--yellow:#ffe500;--red:#ff3b30;--blue:#1e6bff;--green:#9cff7a;--gray:#f2f2f2}*{box-sizing:border-box}body{margin:0;background:var(--yellow);color:var(--black);font-family:Arial Black,Inter,system-ui,sans-serif}.app-shell{display:flex;min-height:100vh}.sidebar{width:260px;background:#fff;padding:18px;position:sticky;top:0;height:100vh}.brand{border:4px solid #000;padding:14px;background:var(--yellow);box-shadow:7px 7px #000;margin-bottom:20px}.brand b{font-size:30px;display:block}.brand small,.muted,small,p{font-family:Arial,sans-serif;font-weight:700}.sidebar nav a{display:block;color:#000;text-decoration:none;background:#fff;border:3px solid #000;margin:10px 0;padding:12px;font-weight:900;box-shadow:4px 4px #000}.sidebar nav a:hover,.btn:hover{transform:translate(2px,2px);box-shadow:2px 2px #000}.content{flex:1;padding:24px;max-width:1500px}.neo{background:#fff;border:4px solid #000;box-shadow:8px 8px #000;padding:18px;margin-bottom:24px}.neo-lite{background:#fff;border:3px solid #000;box-shadow:4px 4px #000;padding:12px;margin:12px 0}.grid{display:grid;gap:18px}.cards{grid-template-columns:repeat(4,minmax(0,1fr))}.dashboard-cards{grid-template-columns:repeat(6,minmax(0,1fr))}.stat b{font-size:42px;display:block}.stat span{font-family:Arial,sans-serif;font-weight:800}.stat.ok{background:var(--green)}.stat.warn{background:#ffb347}.danger,.btn.danger,.stat.danger{background:var(--red)!important;color:#fff}.btn{display:inline-block;border:3px solid #000;box-shadow:5px 5px #000;background:#fff;color:#000;text-decoration:none;font-weight:900;padding:10px 14px;cursor:pointer;margin:4px;text-align:center}.btn.primary{background:var(--yellow)}.btn.big{font-size:18px;padding:16px 22px}.btn.small{font-size:12px;padding:6px 9px}.btn.full{width:100%;display:block}.login-page,.mobile-login{display:grid;place-items:center;min-height:100vh;padding:18px}.login-card,.mobile-login-card{width:min(460px,94vw)}.login-badge,.employee-code{display:inline-block;border:3px solid #000;background:#000;color:#fff;padding:7px 10px;box-shadow:4px 4px var(--yellow);font-weight:900}.app-logo{font-size:46px;line-height:1;font-weight:900}label{display:block;font-weight:900;margin:8px 0}input,select,textarea{width:100%;border:3px solid #000;padding:12px;background:#fff;font-weight:700}button{font-family:inherit}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.form-actions{display:flex;gap:8px;align-items:end;flex-wrap:wrap}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;background:#fff;font-family:Arial,sans-serif}th,td{border:3px solid #000;padding:10px;text-align:left;vertical-align:top}th{background:#000;color:#fff}.thumb{width:68px;height:68px;object-fit:cover;border:3px solid #000}.badge{border:2px solid #000;padding:5px 8px;background:#eee;font-weight:900;display:inline-block}.badge.valid,.badge.success{background:var(--green)}.badge.outside_radius,.badge.failed{background:#ffb3b3}.badge.pending{background:#ffe500}.inline{display:inline}.attendance-box video,.preview{width:100%;max-width:520px;min-height:260px;background:#111;border:4px solid #000;display:block;margin-bottom:12px;object-fit:cover}.preview[src=""]{display:none}.alert{padding:12px;border:3px solid #000;background:#fff;margin:10px 0}.alert.danger{background:#ff3b30;color:#fff}.alert.success{background:#9cff7a}.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}.photo-card{border:3px solid #000;background:var(--yellow);padding:10px;box-shadow:5px 5px #000}.photo-card img{width:100%;aspect-ratio:1/1;object-fit:cover;border:3px solid #000;display:block;margin-bottom:8px}.log-cell{max-width:360px}.log-cell pre{white-space:pre-wrap;background:#000;color:#fff;padding:10px;overflow:auto}.quick-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.employee-app{background:#fff;min-height:100vh;padding-bottom:84px}.mobile-shell{width:min(560px,100%);margin:0 auto;padding:14px}.mobile-top{position:sticky;top:8px;z-index:5;display:flex;justify-content:space-between;align-items:center;background:var(--yellow);margin-bottom:16px}.mobile-top b{font-size:30px;display:block}.mobile-top small{display:block}.mini-logout{border:3px solid #000;background:#fff;color:#000;padding:8px 10px;text-decoration:none;font-weight:900;box-shadow:3px 3px #000}.mobile-hero h1{font-size:34px;margin:5px 0}.mobile-status-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}.status-card{padding:12px;box-shadow:5px 5px #000}.status-card span{display:block;font-size:12px}.status-card b{font-size:20px}.status-card.ok{background:var(--green)}.status-card.warn{background:#fff}.sticky-action{position:sticky;top:100px;z-index:4;margin:18px 0}.history-item{display:flex;gap:12px;align-items:center;border:3px solid #000;background:#fff;margin:10px 0;padding:10px;box-shadow:4px 4px #000}.history-item img{width:78px;height:78px;border:3px solid #000;object-fit:cover}.bottom-nav{position:fixed;left:50%;bottom:12px;transform:translateX(-50%);width:min(540px,94vw);display:grid;grid-template-columns:repeat(3,1fr);gap:8px;z-index:20}.bottom-nav a{background:var(--yellow);border:3px solid #000;box-shadow:4px 4px #000;text-align:center;text-decoration:none;color:#000;font-weight:900;padding:12px 8px}.mobile-action-grid{display:grid;grid-template-columns:1fr;gap:10px}.mobile-action-grid.two{grid-template-columns:1fr 1fr}.mobile-attendance-head h1{margin:0}.mini-progress{display:flex;gap:8px}.mini-progress span{border:3px solid #000;padding:8px;background:#fff}.mini-progress .done{background:var(--green)}.mobile-camera-card video,.mobile-camera-card .preview{max-width:none;border-radius:0;min-height:320px}button:disabled,.btn[disabled]{opacity:.55;filter:grayscale(1);cursor:not-allowed}@media(max-width:1100px){.dashboard-cards{grid-template-columns:repeat(3,1fr)}}@media(max-width:900px){.app-shell{display:block}.sidebar{position:relative;width:100%;height:auto}.cards,.form-grid{grid-template-columns:1fr}.content{padding:14px}.sidebar nav{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.sidebar nav a{margin:0}.stat b{font-size:30px}}@media(max-width:520px){.mobile-shell{padding:10px}.mobile-status-grid{grid-template-columns:1fr}.mobile-action-grid.two{grid-template-columns:1fr}.mobile-camera-card video,.mobile-camera-card .preview{min-height:280px}.neo{box-shadow:6px 6px #000;padding:14px}.bottom-nav{bottom:8px}.dashboard-cards{grid-template-columns:1fr}}