:root{--navy:#071a2b;--blue:#2f8ed7;--green:#138553;--gold:#d4a53d;--ink:#12212d;--muted:#667683;--line:#d9e1e7}*{box-sizing:border-box}html,body{min-height:100%}body{margin:0;color:var(--ink);background:radial-gradient(circle at 85% 8%,#2f8ed722,transparent 28rem),linear-gradient(145deg,#f8fafb,#eaf0f4);font-family:Inter,system-ui,sans-serif}button,input{font:inherit}.hidden{display:none!important}.shell{width:min(1180px,100%);min-height:100vh;margin:auto;padding:clamp(18px,4vw,52px);display:flex;flex-direction:column}header,.brand,.site,.methods button,.employee,footer{display:flex;align-items:center}header{justify-content:space-between;gap:20px}.brand{gap:15px}.brand>b{width:58px;height:58px;display:grid;place-items:center;border-radius:18px;color:#fff;background:linear-gradient(145deg,#123b5d,#04111d);font:700 32px Georgia;box-shadow:0 12px 30px #071a2b44}small{color:var(--muted);font-size:12px;font-weight:800;letter-spacing:.12em}h1{margin:4px 0 0;font-size:clamp(25px,3vw,34px)}h2{margin:7px 0 12px;font-size:clamp(31px,5vw,55px);line-height:1.03;letter-spacing:-.04em}.clock{display:grid;justify-items:end}.clock strong{font-size:clamp(29px,4vw,45px)}.clock span{color:var(--muted);font-size:14px}.site{gap:10px;margin-top:24px;padding:13px 18px;border:1px solid #123b5d22;border-radius:16px;background:#ffffffc9}.site i{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 0 5px #13855320}.site button{margin-left:auto;border:0;background:transparent;font-size:22px}.hero,.employee-view,.result{flex:1;display:grid;align-content:center;padding:clamp(40px,8vh,90px) 0}.hero{gap:clamp(32px,6vh,60px)}.hero p{max-width:690px;color:var(--muted);font-size:clamp(17px,2vw,21px);line-height:1.5}.methods{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.methods button{min-height:148px;gap:19px;padding:24px;text-align:left;border:1px solid var(--line);border-radius:24px;background:#fff;box-shadow:0 8px 24px #04111d0f}.methods button:active{transform:scale(.985)}.methods em{width:68px;height:68px;display:grid;place-items:center;border-radius:20px;background:#dcefff;color:var(--navy);font-style:normal;font-size:27px;font-weight:900}.methods button:nth-child(2) em{background:#fff3d3;color:#765407}.methods button:nth-child(3) em{background:#f6e6f0;color:#6a3255}.methods b{display:block;font-size:21px}.methods small{display:block;margin-top:7px;letter-spacing:0;font-weight:500}.employee-view{gap:28px}.employee{gap:20px;padding:26px;border:1px solid var(--line);border-radius:24px;background:#ffffffdd}.employee>em{width:80px;height:80px;display:grid;place-items:center;border-radius:24px;color:#fff;background:#123b5d;font-style:normal;font-size:25px;font-weight:900}.employee h2{margin:2px 0;font-size:45px}.employee p{margin:0;color:var(--muted)}.actions{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.actions button{min-height:120px;border:0;border-radius:22px;color:#fff;background:var(--green);font-size:clamp(22px,3vw,31px);font-weight:850}.actions .pause{color:#33270b;background:var(--gold)}.actions .end{background:#123b5d}.link{justify-self:center;border:0;background:transparent;color:#123b5d;font-weight:800}.result{justify-items:center;text-align:center}.result>div{width:120px;height:120px;margin-bottom:28px;display:grid;place-items:center;border-radius:36px;color:#fff;background:var(--green);font-size:65px;font-weight:900}.result p{color:var(--muted);font-size:20px}footer{justify-content:space-between;color:var(--muted);font-size:13px}footer a{color:inherit;text-decoration:none}.panel{align-self:center;width:min(650px,100%);margin-top:24px;padding:25px;border:1px solid var(--line);border-radius:22px;background:#fff}.panel h2{font-size:30px}.panel input{margin-bottom:12px}input{width:100%;min-height:52px;padding:0 14px;border:1px solid #c9d4dc;border-radius:13px}.primary{min-height:52px;padding:0 22px;border:0;border-radius:14px;color:#fff;background:#123b5d;font-weight:800}.full{width:100%}.primary:disabled{opacity:.4}dialog{width:min(550px,calc(100vw - 28px));padding:28px;border:0;border-radius:26px;color:var(--ink);box-shadow:0 30px 90px #04111d55}dialog::backdrop{background:#04111dbb;backdrop-filter:blur(7px)}dialog h2{font-size:30px}.close{float:right;border:0;background:transparent;font-size:27px}.dots{display:flex;justify-content:center;gap:14px;margin:27px}.dots i{width:18px;height:18px;border:2px solid #9eacb6;border-radius:50%}.dots .filled{border-color:var(--navy);background:var(--navy)}.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin-bottom:18px}.keypad button{min-height:64px;border:1px solid var(--line);border-radius:16px;background:#f5f8fa;font-size:25px;font-weight:850}.camera{position:relative;min-height:260px;margin-bottom:16px;overflow:hidden;border-radius:18px;color:#fff;background:#04111d}.camera video{width:100%;height:280px;object-fit:cover}.camera p{position:absolute;inset:auto 15px 15px;text-align:center}.pulse{width:150px;height:150px;margin:25px auto;display:grid;place-items:center;border-radius:50%;color:#fff;background:#123b5d;font-size:52px;font-weight:900;animation:pulse 1.7s infinite}@keyframes pulse{70%{box-shadow:0 0 0 38px #2f8ed700}}.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);padding:14px 18px;border-radius:13px;color:#fff;background:#b84343;font-weight:750}@media(max-width:780px){.methods{grid-template-columns:1fr}.methods button{min-height:108px}.clock span{display:none}.actions{grid-template-columns:1fr}}@media(max-width:460px){.shell{padding-inline:14px}.brand small{display:none}.brand>b{width:50px;height:50px}.clock strong{font-size:26px}}