@import "https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&display=swap";html{background:#f5f6f8;min-width:320px}body{min-width:320px;min-height:100vh;margin:0}button,input{-webkit-tap-highlight-color:transparent}::selection{color:#fff;background:#1d252b}.production-page{max-width:1400px;margin:0 auto;padding:24px}.production-form{border:1px solid #ddd;border-radius:12px;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:24px 0;padding:24px;display:grid}.production-form h2,.production-full-width{grid-column:1/-1}.production-form label{flex-direction:column;gap:6px;font-weight:500;display:flex}.production-form input,.production-form select,.production-form textarea{width:100%;font:inherit;border:1px solid #bbb;border-radius:6px;padding:10px}.production-actions{gap:10px;display:flex}.production-actions button,.production-records button{cursor:pointer;padding:9px 14px}.production-message{background:#eef6ff;border-radius:8px;margin:12px 0;padding:12px}.production-table-wrap{overflow-x:auto}.production-records table{border-collapse:collapse;width:100%;margin-top:16px}.production-records th,.production-records td{text-align:left;white-space:nowrap;border-bottom:1px solid #ddd;padding:10px}.production-records th{background:#f3f4f6}@media (width<=700px){.production-page{padding:12px}.production-form{grid-template-columns:1fr;padding:16px}.production-form h2,.production-full-width{grid-column:auto}}:root{color:#17202a;background:#f5f6f8;font-family:DM Sans,sans-serif}*{box-sizing:border-box}button,input{font:inherit}button{cursor:pointer}.app-shell{background:#f5f6f8;min-height:100vh;display:flex}.sidebar{color:#fff;z-index:20;background:#111417;flex-direction:column;width:255px;min-height:100vh;padding:27px 18px 20px;display:flex;position:fixed;inset:0 auto 0 0}.brand{align-items:center;height:54px;margin-bottom:44px;padding:0 13px;display:flex}.brand-logo{object-fit:contain;object-position:left center;width:145px;max-height:48px}.brand-fallback{flex-direction:column;font-family:Manrope,sans-serif;display:flex}.brand-fallback span{letter-spacing:.08em;font-size:23px;font-weight:800}.brand-fallback small{color:#858b92;letter-spacing:.2em;margin-top:3px;font-size:7px}.workspace-label,.section-label{color:#89919a;letter-spacing:.15em;font-size:10px;font-weight:700}.workspace-label{margin-bottom:12px;padding:0 13px}.navigation{flex-direction:column;gap:5px;display:flex}.nav-item{color:#91979e;text-align:left;background:0 0;border:0;border-radius:9px;align-items:center;gap:13px;width:100%;height:47px;padding:0 14px;font-size:13px;transition:all .2s;display:flex}.nav-item:hover{color:#fff;background:#1a1e22}.nav-item.active{color:#15191d;background:#f0f2f4}.nav-icon{text-align:center;width:20px;font-size:18px}.sidebar-bottom{margin-top:auto}.unit-card{background:#181c20;border:1px solid #292e33;border-radius:11px;align-items:center;gap:10px;margin-bottom:10px;padding:13px;display:flex}.status-dot{background:#56c98b;border-radius:50%;width:8px;height:8px;box-shadow:0 0 0 4px #56c98b1a}.unit-card div{flex-direction:column;display:flex}.unit-card strong{font-size:12px}.unit-card small{color:#737a81;margin-top:2px;font-size:10px}.settings-button{color:#777e86;text-align:left;background:0 0;border:0;align-items:center;gap:13px;width:100%;height:43px;padding:0 13px;display:flex}.main-area{width:calc(100% - 255px);min-height:100vh;margin-left:255px}.topbar{z-index:10;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#f5f6f8eb;border-bottom:1px solid #e4e6e9;justify-content:space-between;align-items:center;height:94px;padding:0 42px;display:flex;position:sticky;top:0}.topbar h1{letter-spacing:-.03em;margin:4px 0 0;font-family:Manrope,sans-serif;font-size:20px}.topbar-actions{align-items:center;gap:18px;display:flex}.icon-button{color:#606871;background:#fff;border:1px solid #dfe2e5;border-radius:9px;width:39px;height:39px}.profile{align-items:center;gap:10px;display:flex}.avatar,.employee-avatar{border-radius:50%;place-items:center;font-weight:700;display:grid}.avatar{color:#fff;background:#1c252d;width:37px;height:37px;font-size:11px}.profile-copy{flex-direction:column;display:flex}.profile-copy strong{font-size:12px}.profile-copy span{color:#8a9198;font-size:10px}.chevron{color:#9299a0;margin-left:4px}.content{max-width:1500px;padding:36px 42px 60px}.hero{color:#fff;background:radial-gradient(circle at 85% 20%,#5bb6e82b,#0000 30%),linear-gradient(120deg,#111619,#1b2328);border-radius:18px;justify-content:space-between;align-items:flex-end;min-height:220px;padding:38px 40px;display:flex;position:relative;overflow:hidden}.hero:after{content:"";border:1px solid #ffffff14;border-radius:50%;width:300px;height:300px;position:absolute;bottom:-220px;right:5%}.hero-tag{letter-spacing:.18em;color:#9ba7af;font-size:9px;font-weight:700}.hero h2{letter-spacing:-.05em;margin:11px 0 12px;font-family:Manrope,sans-serif;font-size:clamp(29px,4vw,45px);line-height:1.05}.hero p{color:#aab2b8;max-width:540px;margin:0;font-size:13px;line-height:1.65}.primary-button,.secondary-button{border:0;border-radius:9px;justify-content:center;align-items:center;gap:16px;min-height:46px;padding:0 18px;font-size:12px;font-weight:700;transition:all .2s;display:inline-flex}.primary-button{color:#151a1e;background:#fff}.hero .primary-button{z-index:1;position:relative}.primary-button:hover{transform:translateY(-1px);box-shadow:0 9px 25px #0000001f}.primary-button.small{min-height:42px}.primary-button:disabled{opacity:.6;cursor:wait}.secondary-button{color:#30363c;background:#eef0f2}.full{width:100%;margin-top:12px}.metrics-grid{grid-template-columns:repeat(4,1fr);gap:12px;margin-top:13px;display:grid}.metric-card,.panel{background:#fff;border:1px solid #e3e6e9;border-radius:13px}.metric-card{padding:21px}.metric-top{color:#737b83;justify-content:space-between;gap:10px;font-size:11px;display:flex}.metric-change{color:#4f9c73;font-size:10px}.metric-card>strong{letter-spacing:-.05em;margin:14px 0 4px;font-family:Manrope,sans-serif;font-size:34px;display:block}.metric-card small{color:#999fa5;font-size:10px}.dashboard-grid{grid-template-columns:minmax(0,1.65fr) minmax(300px,.9fr);gap:13px;margin-top:13px;display:grid}.panel{padding:25px}.panel-heading{justify-content:space-between;align-items:flex-start;margin-bottom:22px;display:flex}.panel h3,.camera-header h3,.form-heading h3{letter-spacing:-.03em;margin:7px 0 0;font-family:Manrope,sans-serif;font-size:17px}.text-button{color:#4c687b;background:0 0;border:0;font-size:11px;font-weight:700}.attendance-list{flex-direction:column;display:flex}.attendance-row{border-top:1px solid #edf0f2;grid-template-columns:1fr auto 90px;align-items:center;gap:20px;min-height:68px;display:grid}.employee-name{align-items:center;gap:11px;display:flex}.employee-avatar{color:#59636c;background:#edf0f2;width:35px;height:35px;font-size:10px}.employee-name div:last-child{flex-direction:column;display:flex}.employee-name strong{font-size:11px}.employee-name small{color:#989fa6;margin-top:3px;font-size:9px}.event-badge,.badge,.live-pill{letter-spacing:.05em;border-radius:100px;padding:6px 9px;font-size:9px;font-weight:700}.event-badge.entry{color:#3b805f;background:#e9f6ee}.event-badge.exit{color:#68727b;background:#eef0f2}.row-time{color:#737b82;text-align:right;font-size:10px}.live-pill{color:#31815b;background:#e7f6ed}.system-status{flex-direction:column;display:flex}.status-item{border-top:1px solid #edf0f2;grid-template-columns:24px 1fr auto;align-items:center;gap:8px;padding:13px 0;font-size:11px;display:grid}.status-item strong{color:#4f8e6d;font-size:9px}.status-check{color:#419167;background:#e8f6ed;border-radius:50%;place-items:center;width:20px;height:20px;font-size:10px;display:grid}.last-sync{color:#969da4;border-top:1px solid #edf0f2;justify-content:space-between;margin-top:17px;padding-top:15px;font-size:9px;display:flex}.last-sync strong{color:#50585f}.page-intro{justify-content:space-between;align-items:flex-end;gap:25px;margin-bottom:25px;display:flex}.page-intro h2{letter-spacing:-.05em;margin:8px 0;font-family:Manrope,sans-serif;font-size:31px}.page-intro p{color:#818991;margin:0;font-size:12px}.security-badge{color:#3c7958;background:#eaf6ef;border-radius:8px;padding:9px 12px;font-size:10px;font-weight:700}.security-badge span{margin-right:6px}.attendance-layout{grid-template-columns:minmax(0,1.35fr) minmax(320px,.75fr);gap:14px;display:grid}.camera-card{color:#fff;background:#101417;border-radius:15px;padding:25px}.camera-header{justify-content:space-between;align-items:flex-start;margin-bottom:18px;display:flex}.camera-header .section-label{color:#707a82}.camera-state{color:#737e86;align-items:center;gap:7px;font-size:9px;display:flex}.camera-state i{background:#60676d;border-radius:50%;width:6px;height:6px}.camera-state.ready i{background:#5ed394;box-shadow:0 0 0 4px #5ed39417}.camera-frame{background:#080b0d;border:1px solid #252b30;border-radius:11px;width:100%;min-height:420px;position:relative;overflow:hidden}.camera-frame video{object-fit:cover;z-index:1;background:#080b0d;width:100%;height:100%;min-height:0;display:block;position:absolute;inset:0;transform:scaleX(-1)}.face-guide{z-index:2}.camera-overlay{z-index:3}.camera-placeholder{text-align:center;flex-direction:column;justify-content:center;align-items:center;min-height:420px;padding:30px;display:flex}.camera-symbol{color:#8e979e;border:1px solid #3a4248;border-radius:50%;place-items:center;width:65px;height:65px;margin-bottom:18px;font-size:25px;display:grid}.camera-placeholder strong{font-size:14px}.camera-placeholder span{color:#727b83;margin:7px 0 20px;font-size:10px}.face-guide{border:1px solid #ffffffb3;border-radius:45%;position:absolute;inset:14% 29%;box-shadow:0 0 0 9999px #00000021}.camera-overlay{white-space:nowrap;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#d8dde0;background:#0000008c;border-radius:100px;padding:8px 12px;font-size:9px;position:absolute;bottom:20px;left:50%;transform:translate(-50%)}.attendance-form{align-self:start}.form-heading{margin-bottom:24px}.attendance-form label{color:#636c74;margin:18px 0 8px;font-size:10px;font-weight:700;display:block}.text-input{color:#1e252b;background:#fafbfb;border:1px solid #dfe3e6;border-radius:8px;outline:none;width:100%;height:47px;padding:0 13px;font-size:12px}.text-input:focus{border-color:#8998a3;box-shadow:0 0 0 3px #4e657414}.event-switch{grid-template-columns:1fr 1fr;gap:7px;display:grid}.event-switch button{color:#737b83;background:#fafbfb;border:1px solid #e0e4e7;border-radius:8px;height:48px;font-size:11px;font-weight:700}.event-switch button.selected{color:#fff;background:#151a1e;border-color:#151a1e}.event-switch span{margin-right:7px}.verification-list{border-top:1px solid #edf0f2;margin-top:24px}.verification{border-bottom:1px solid #edf0f2;align-items:center;gap:10px;min-height:54px;display:flex}.verification-icon{color:#a2a8ad;background:#f0f2f3;border-radius:50%;place-items:center;width:23px;height:23px;font-size:10px;display:grid}.verification-icon.active{color:#3c8b61;background:#e8f6ed}.verification>div:nth-child(2){flex-direction:column;flex:1;display:flex}.verification strong{font-size:10px}.verification span{color:#999fa5;margin-top:3px;font-size:9px}.verification button{color:#4b6677;background:0 0;border:0;font-size:9px;font-weight:700}.form-message{color:#806b47;background:#f5f1e9;border-radius:7px;margin-top:14px;padding:11px;font-size:10px}.attendance-submit{color:#fff;background:#151a1e;width:100%;margin-top:18px}.privacy-note{color:#a0a6ab;text-align:center;margin:13px 10px 0;font-size:8px;line-height:1.6}.employee-table{padding:0;overflow:hidden}.table-header,.employee-row{grid-template-columns:2fr 1fr 1.1fr .7fr;align-items:center;gap:20px;padding:17px 22px;display:grid}.table-header{color:#969da3;text-transform:uppercase;letter-spacing:.1em;background:#fafbfb;font-size:9px}.employee-row{border-top:1px solid #edf0f2}.mono{color:#6c757d;font-family:monospace;font-size:10px}.badge.warning{color:#927244;background:#f8f1e4;width:max-content}.badge.success{color:#3c805d;background:#eaf6ef;width:max-content}.empty-page{text-align:center;flex-direction:column;justify-content:center;align-items:center;min-height:400px;display:flex}.empty-page h2{margin:10px 0;font-family:Manrope,sans-serif;font-size:30px}.empty-page p{color:#899198;max-width:400px;font-size:12px}.mobile-menu{background:0 0;border:0;margin-right:12px;font-size:22px;display:none}@media (width<=1100px){.sidebar{width:220px}.main-area{width:calc(100% - 220px);margin-left:220px}.metrics-grid{grid-template-columns:repeat(2,1fr)}.attendance-layout,.dashboard-grid{grid-template-columns:1fr}}@media (width<=760px){.sidebar{width:250px;transition:transform .25s;transform:translate(-100%)}.sidebar.mobile-open{transform:translate(0)}.main-area{width:100%;margin-left:0}.topbar{height:78px;padding:0 18px}.mobile-menu{display:block}.topbar .eyebrow,.profile-copy,.profile .chevron{display:none}.content{padding:22px 16px 45px}.hero{flex-direction:column;justify-content:flex-end;align-items:flex-start;min-height:330px;padding:28px 24px}.hero .primary-button{width:100%;margin-top:25px}.metrics-grid{grid-template-columns:1fr 1fr}.metric-card{padding:16px}.metric-card>strong{font-size:28px}.page-intro{flex-direction:column;align-items:flex-start}.page-intro .primary-button,.security-badge{width:100%}.camera-card,.panel{padding:18px}.camera-frame,.camera-placeholder{min-height:330px}.camera-frame video{min-height:0}.table-header{display:none}.employee-row{grid-template-columns:1fr;gap:10px}}@media (width<=420px){.metrics-grid{grid-template-columns:1fr}.attendance-row{grid-template-columns:1fr auto}.row-time{grid-area:1/2}}.table-action{color:#405e71;text-align:left;background:0 0;border:0;font-size:10px;font-weight:700}.table-action:hover{color:#172a37}.modal-backdrop{z-index:100;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#070a0cb8;justify-content:center;align-items:center;padding:24px;display:flex;position:fixed;inset:0}.registration-modal{background:#fff;border-radius:18px;width:min(980px,100%);max-height:calc(100vh - 48px);overflow:auto;box-shadow:0 30px 90px #0000004d}.registration-header{border-bottom:1px solid #e8ebed;justify-content:space-between;align-items:flex-start;padding:25px 28px;display:flex}.registration-header h2{letter-spacing:-.04em;margin:7px 0 5px;font-family:Manrope,sans-serif;font-size:23px}.registration-header p{color:#858d94;margin:0;font-size:11px}.modal-close{color:#69727a;background:#fafbfb;border:1px solid #e2e5e7;border-radius:50%;width:35px;height:35px;font-size:20px}.registration-body{grid-template-columns:minmax(0,1.3fr) minmax(270px,.7fr);gap:22px;padding:22px;display:grid}.registration-camera{background:#0b0e10;border:1px solid #242a2e;border-radius:12px;min-height:470px;position:relative;overflow:hidden}.registration-camera video{object-fit:cover;background:#080b0d;width:100%;height:100%;position:absolute;inset:0;transform:scaleX(-1)}.registration-guide{z-index:2;border:1px solid #ffffffbf;border-radius:45%;position:absolute;inset:15% 28%;box-shadow:0 0 0 9999px #0000001f}.registration-hint{z-index:3;white-space:nowrap;color:#e1e5e7;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#0000008c;border-radius:100px;padding:8px 13px;font-size:9px;position:absolute;bottom:20px;left:50%;transform:translate(-50%)}.registration-placeholder{text-align:center;color:#fff;flex-direction:column;justify-content:center;align-items:center;min-height:470px;padding:35px;display:flex}.registration-placeholder strong{font-size:14px}.registration-placeholder>span{color:#778087;max-width:300px;margin:8px 0 20px;font-size:10px;line-height:1.6}.registration-info{padding:8px 5px}.registration-step{border-bottom:1px solid #edf0f2;gap:12px;padding:15px 0;display:flex}.registration-step>span{color:#818990;background:#f0f2f3;border-radius:50%;place-items:center;width:27px;height:27px;font-size:9px;font-weight:700;display:grid}.registration-step.active>span{color:#fff;background:#151a1e}.registration-step div{flex-direction:column;display:flex}.registration-step strong{font-size:11px}.registration-step small{color:#979ea4;margin-top:3px;font-size:9px}.registration-message{color:#427558;background:#eef6f1;border-radius:7px;margin-top:18px;padding:11px;font-size:10px;line-height:1.5}.registration-button{color:#fff;background:#151a1e;width:100%;margin-top:18px}.registration-button:disabled{opacity:.45;cursor:not-allowed}.registration-note{color:#9ba1a6;text-align:center;margin:13px 12px 0;font-size:8px;line-height:1.6}@media (width<=760px){.modal-backdrop{align-items:flex-end;padding:10px}.registration-modal{border-radius:16px 16px 0 0;max-height:calc(100vh - 20px)}.registration-body{grid-template-columns:1fr;padding:14px}.registration-camera,.registration-placeholder{min-height:350px}.registration-info{padding:0 5px 12px}}.employee-empty{color:#737b83;text-align:center;padding:28px 20px;font-size:13px}.employee-alert{border-radius:8px;margin:12px 0;padding:12px 14px;font-size:12px}.employee-alert.error{color:#9f2d2d;background:#fff0f0;border:1px solid #f3cccc}.employee-alert.success{color:#226b48;background:#effaf3;border:1px solid #ccebd7}.employee-form-modal{max-width:480px}.employee-form{padding:24px}.employee-form label{color:#636c74;margin:0 0 8px;font-size:11px;font-weight:700;display:block}.employee-form label:not(:first-child){margin-top:18px}.employee-form label span{color:#929aa1;font-weight:400}.employee-form .text-input{display:block}.employee-form-actions{justify-content:flex-end;gap:10px;margin-top:26px;display:flex}.secondary-button{color:#4e5962;cursor:pointer;background:#fff;border:1px solid #dfe3e6;border-radius:8px;min-height:42px;padding:0 16px;font-size:12px;font-weight:600}.employee-form-actions button:disabled{opacity:.6;cursor:not-allowed}