:root{--navy:#082b3d;--navy2:#103f54;--teal:#18bcc4;--teal2:#169db0;--bg:#f5fafc;--line:#d8e7ec;--muted:#738a96;--green:#29b985;--red:#dc5563;--amber:#f2a93b}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:"Segoe UI",Tahoma,Arial,sans-serif;background:var(--bg);color:#0d2d3f}button,input,select,textarea{font:inherit}button{cursor:pointer}
.shell{min-height:100vh}.sidebar{position:fixed;top:0;right:0;bottom:0;width:250px;background:linear-gradient(180deg,#062535,#0a3347);color:#fff;padding:24px 16px;display:flex;flex-direction:column;z-index:10}.brand{display:flex;align-items:center;gap:12px;padding:4px 10px 22px;border-bottom:1px solid #17485b}.brand img{width:47px;height:47px;border-radius:13px}.brand b{font-size:25px;letter-spacing:3px}.brand b span{color:var(--teal)}.brand small{display:block;color:#789caa;font-size:9px;margin-top:4px;letter-spacing:1px}nav{padding-top:18px;flex:1}nav button{width:100%;border:0;background:transparent;color:#dbeaf0;text-align:right;padding:13px 14px;margin:3px 0;border-radius:11px;font-weight:600;font-size:14px;display:flex;gap:10px;align-items:center}nav button:hover,nav button.active{background:#174c63;color:#fff}.platform{padding:14px;background:#123e53;border:1px solid #1b5269;border-radius:13px;display:flex;gap:10px;align-items:center}.platform i{width:9px;height:9px;background:#39d49c;border-radius:50%;box-shadow:0 0 12px #39d49c}.platform small{display:block;color:#88a8b5;margin-top:3px}
.main{margin-right:250px;padding:28px 32px;min-height:100vh}header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}header h1{font-size:29px;margin:0}header p{color:var(--muted);margin:5px 0 0;font-size:13px}.header-actions{display:flex;gap:9px;align-items:center}.ghost,button:not(.primary){background:#fff;border:1px solid var(--line);color:#17394b;border-radius:10px;padding:10px 14px}.primary{background:linear-gradient(135deg,var(--teal),var(--teal2));border:0;color:#fff;border-radius:10px;padding:11px 17px;font-weight:700}.full{width:100%;margin-top:14px}.license{padding:8px 12px;border-radius:999px;font-size:12px;font-weight:700}.license.trial{background:#fff1cf;color:#8a6200}.license.active{background:#e5f8ef;color:#167950}.license.expired{background:#ffe5e8;color:#a12c3a}.trialbar{display:none;background:#fff3cf;border:1px solid #f4dea1;color:#866100;padding:11px 15px;border-radius:12px;margin-bottom:18px}.trialbar.show{display:block}
.page{display:none}.page.active{display:block}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-bottom:18px}.stats article{background:#fff;border:1px solid var(--line);border-radius:17px;padding:19px}.stats small{color:var(--muted)}.stats strong{display:block;font-size:34px;margin:7px 0}.stats span{font-size:10px;color:#8ba0aa}.green{color:var(--green)}.teal{color:var(--teal2)}
.grid2{display:grid;grid-template-columns:1.55fr .85fr;gap:18px}.panel{background:#fff;border:1px solid var(--line);border-radius:17px;overflow:hidden}.panel-head{padding:16px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}.panel-head h3{margin:0;font-size:17px}.panel-head p{margin:4px 0 0;color:var(--muted);font-size:11px}.pill{background:#eef8fa;color:#14768a;padding:7px 10px;border-radius:999px;font-size:11px}.table-wrap{overflow:auto;min-height:120px}table{width:100%;border-collapse:collapse}th,td{padding:12px 13px;border-bottom:1px solid #e8f0f3;text-align:right;font-size:12px;white-space:nowrap}th{color:#168fa5;background:#fbfdfe;font-weight:700}tr:hover td{background:#fbfeff}.empty{padding:40px;text-align:center;color:#8095a0}.badge{display:inline-block;padding:5px 9px;border-radius:999px;font-size:10px}.badge.active,.badge.IN,.badge.online{background:#e1f7ed;color:#11744d}.badge.OUT,.badge.offline{background:#ffe8ea;color:#a52d39}.badge.unknown{background:#edf2f4;color:#657984}
.quick{padding-bottom:16px}.quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:16px}.quick-grid button{border:1px solid var(--line);background:#fbfeff;border-radius:14px;padding:20px 12px;display:flex;flex-direction:column;align-items:center;gap:8px}.quick-grid b{font-size:22px;color:var(--teal2)}
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:14px}.toolbar.wrap{flex-wrap:wrap}.search{display:flex;flex:1;max-width:650px}.search input{flex:1}.toolbar input,.toolbar select,.form-grid input,.form-grid select,.settings-card input,.modal-card input,.modal-card select,.modal-card textarea{border:1px solid var(--line);background:#fff;border-radius:10px;padding:10px 11px;outline:none}.toolbar input:focus,.form-grid input:focus,.modal-card input:focus{border-color:var(--teal)}.filters,.actions{display:flex;align-items:center;gap:8px}.filters label{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:12px}.hint{color:var(--muted);font-size:12px}.filebtn{display:inline-block;background:#fff;border:1px solid var(--line);padding:10px 14px;border-radius:10px;cursor:pointer}.filebtn input{display:none}.notice{background:#eef8fa;border:1px solid #d1eaf0;color:#4b7180;padding:13px 15px;border-radius:12px;margin-top:14px;font-size:12px;line-height:1.7}
.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.settings-card{padding-bottom:18px}.settings-card>.form-grid,.settings-card>label,.settings-card>.stack,.settings-card>.backup-info,.settings-card>.license-details,.settings-card>.paths{margin:16px 18px 0}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.form-grid label,.settings-card label{display:flex;flex-direction:column;gap:6px;color:var(--muted);font-size:11px}.backup-info{display:grid;grid-template-columns:1fr 1fr;gap:10px}.backup-info div{background:#f7fbfc;border:1px solid var(--line);border-radius:12px;padding:12px}.backup-info small{color:var(--muted);display:block}.backup-info b{display:block;margin-top:5px}.stack{display:grid;gap:9px}.license-details,.paths{background:#f7fbfc;border:1px solid var(--line);padding:12px;border-radius:12px;font-size:12px;line-height:1.9;word-break:break-all}
.modal{position:fixed;inset:0;background:rgba(4,25,36,.52);display:none;align-items:center;justify-content:center;z-index:50;padding:20px}.modal.show{display:flex}.modal-card{width:min(760px,96vw);max-height:90vh;overflow:auto;background:#fff;border-radius:18px;box-shadow:0 30px 90px rgba(0,0,0,.25)}.modal-head{display:flex;align-items:center;justify-content:space-between;padding:17px 20px;border-bottom:1px solid var(--line)}.modal-head h3{margin:0}.modal-head button{border:0;background:transparent;font-size:25px}.modal-body{padding:20px}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}.form-grid label.fullrow{grid-column:1/-1}textarea{min-height:75px;resize:vertical}
#toast{position:fixed;left:24px;bottom:24px;background:#0d3346;color:#fff;padding:12px 16px;border-radius:11px;z-index:100;opacity:0;transform:translateY(10px);pointer-events:none;transition:.2s;box-shadow:0 12px 40px rgba(0,0,0,.2)}#toast.show{opacity:1;transform:none}#toast.error{background:#9e3040}
@media(max-width:1050px){.sidebar{width:210px}.main{margin-right:210px;padding:22px}.stats{grid-template-columns:1fr 1fr}.grid2,.settings-grid{grid-template-columns:1fr}}@media(max-width:720px){.sidebar{display:none}.main{margin:0;padding:14px}.stats{grid-template-columns:1fr 1fr}.form-grid{grid-template-columns:1fr}.grid2{grid-template-columns:1fr}header{align-items:flex-start}.toolbar{align-items:stretch;flex-direction:column}.search{max-width:none}.actions,.filters{flex-wrap:wrap}}
.hidden{display:none!important}.login-screen{position:fixed;inset:0;z-index:1000;background:radial-gradient(circle at 25% 20%,#0c566d 0,#062c3e 28%,#041b28 72%);display:flex;align-items:center;justify-content:center;padding:24px}.login-screen:before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(24,188,196,.08),transparent 42%)}.login-card{position:relative;width:min(440px,94vw);background:rgba(255,255,255,.98);border-radius:26px;padding:30px 32px;box-shadow:0 35px 100px rgba(0,0,0,.38);border:1px solid rgba(255,255,255,.4)}.login-brand{text-align:center;margin-bottom:24px}.login-brand img{height:150px;max-width:100%;object-fit:contain}.login-brand h1{letter-spacing:7px;margin:6px 0 2px;color:#08334a}.login-brand p{margin:0;color:#718794}.login-card form{display:grid;gap:13px}.login-card label{display:grid;gap:6px;font-size:12px;color:#637c88}.login-card input{padding:13px;border:1px solid var(--line);border-radius:11px;outline:0}.login-note{font-size:10px;color:#8498a1;text-align:center;margin-top:16px}.title-wrap{display:flex;gap:12px;align-items:center}.company-logo{width:58px;height:58px;object-fit:contain;border-radius:12px;background:white;border:1px solid var(--line);padding:4px}.user-chip{background:white;border:1px solid var(--line);border-radius:11px;padding:8px 12px;min-width:115px}.user-chip b{display:block;font-size:12px}.user-chip small{display:block;color:var(--muted);font-size:9px;margin-top:2px}.stats.five{grid-template-columns:repeat(5,1fr)}.amber{color:#d98d19}.employee-avatar{width:38px;height:38px;border-radius:50%;object-fit:cover;background:#eef5f7;border:1px solid var(--line)}.employee-profile{display:flex;align-items:center;gap:9px}.employee-profile div b{display:block}.employee-profile div small{color:var(--muted)}.field-section{padding:14px;border:1px solid var(--line);border-radius:13px;margin-bottom:13px}.field-section h4{margin:0 0 12px;color:#0b5e74}.biometric-box{background:#f2fbfc;border:1px solid #cdeaf0;border-radius:12px;padding:13px;line-height:1.7;font-size:12px}.discovery-grid{display:grid;gap:8px}.discovered-device{display:flex;align-items:center;justify-content:space-between;border:1px solid var(--line);padding:12px;border-radius:11px}.permissions-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.permission-item{display:flex!important;flex-direction:row!important;align-items:center;gap:8px!important;background:#f7fbfc;border:1px solid var(--line);padding:9px;border-radius:9px}.report-panel{min-height:380px}.report-tools select{min-width:145px}.logo-preview-wrap{padding:10px;background:#f7fbfc;border:1px dashed var(--line);border-radius:10px;text-align:center}.logo-preview{max-height:100px;max-width:220px;object-fit:contain}.fullrow{grid-column:1/-1}.sidebar .brand img{width:72px;height:72px;object-fit:contain;background:transparent;border-radius:0}.sidebar .brand{align-items:center}.sidebar .brand b{font-size:22px}.report-panel .table-wrap{max-height:65vh}.badge.reachable{background:#fff3cf;color:#866100}@media(max-width:1250px){.stats.five{grid-template-columns:repeat(3,1fr)}}@media(max-width:760px){.permissions-grid{grid-template-columns:1fr}.stats.five{grid-template-columns:1fr 1fr}.login-brand img{height:115px}}@media print{.sidebar,header,.trialbar,.toolbar,#toast,.notice{display:none!important}.main{margin:0!important;padding:0!important}.page{display:none!important}#page-reports{display:block!important}.report-panel{border:0}.panel-head{padding:0 0 12px}.table-wrap{overflow:visible}table{font-size:10px}}

/* V2.2 live biometric-device UI */
.dashboard-livebar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:11px 13px}
.dashboard-livebar .branch-live{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.dashboard-livebar select{min-width:190px;border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:#fff}.dashboard-livebar small{color:var(--muted)}
.stats.six{grid-template-columns:repeat(6,1fr)}
.live-dot{display:inline-flex;align-items:center;gap:7px;background:#e8f8f2;color:#127552;border:1px solid #cdeee0;padding:9px 12px;border-radius:999px;font-size:11px;font-weight:700}.live-dot i{width:8px;height:8px;border-radius:50%;background:#2cc98d;box-shadow:0 0 0 4px rgba(44,201,141,.12);animation:livePulse 1.7s infinite}@keyframes livePulse{50%{box-shadow:0 0 0 8px rgba(44,201,141,0)}}
.table-sub{display:block;color:var(--muted);font-size:9px;margin-top:3px}.device-error{display:block;color:#ad3b48;font-size:9px;max-width:140px;white-space:normal;margin-top:4px}.device-actions{display:flex;gap:5px;flex-wrap:wrap}.device-actions button{padding:7px 9px;font-size:10px}.device-manage-card h4{font-size:20px;margin:0 0 4px}.device-manage-card p{color:var(--muted);margin:0 0 16px}.danger-btn{background:#fff0f1!important;border-color:#f1c6cb!important;color:#a72f3e!important;font-weight:700}
.weekday-section{border-top:1px solid var(--line);padding-top:12px}.weekday-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:7px;margin-top:9px}.weekday-chip{position:relative!important;display:block!important}.weekday-chip input{position:absolute;opacity:0;pointer-events:none}.weekday-chip span{display:block;text-align:center;border:1px solid var(--line);border-radius:10px;padding:11px 7px;background:#f8fbfc;color:#607784;font-size:11px;cursor:pointer}.weekday-chip input:checked+span{background:#0e526a;color:white;border-color:#0e526a;box-shadow:0 5px 15px rgba(14,82,106,.14)}
.discovery-grid small{display:block;color:var(--muted);margin-top:4px;line-height:1.6}
@media(max-width:1450px){.stats.six{grid-template-columns:repeat(3,1fr)}}
@media(max-width:850px){.stats.six{grid-template-columns:repeat(2,1fr)}.weekday-grid{grid-template-columns:repeat(4,1fr)}.dashboard-livebar{align-items:stretch;flex-direction:column}}

/* V2.3 biometric employee panel */
.biometric-enroll-section{background:linear-gradient(180deg,#fbfeff,#f2fafc)}
.biometric-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px}
.biometric-heading h4{margin:0 0 4px}.biometric-heading p{margin:0;color:var(--muted);font-size:11px}
.bio-connection{padding:7px 11px;border-radius:999px;font-size:11px;font-weight:800;white-space:nowrap;border:1px solid var(--line)}
.bio-connection.waiting{background:#f4f7f8;color:#69818c}.bio-connection.reading{background:#fff6d9;color:#8d6300}.bio-connection.ok{background:#e5f8ef;color:#08764e}.bio-connection.error{background:#ffe8ea;color:#aa2736}
.biometric-device-row{display:grid;grid-template-columns:minmax(250px,1fr) auto auto;gap:10px;align-items:end;margin-bottom:12px}
.biometric-device-row label{display:grid;gap:6px;color:var(--muted);font-size:11px}
.biometric-device-row select{width:100%}
.card-capture-btn{border-color:#0b9eaf!important;background:#effcfd!important;color:#076577!important}
.bio-status{padding:11px 13px;border:1px solid #cfe8ed;border-radius:12px;background:#fff;color:#5d7782;font-size:12px;line-height:1.7;margin-bottom:13px}
.hands-wrap{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hand-card{border:1px solid #d6e9ed;border-radius:16px;padding:13px;background:#fff;position:relative;overflow:hidden}
.hand-card:before{content:"";position:absolute;width:150px;height:150px;border-radius:50%;background:rgba(16,171,187,.04);top:-60px;inset-inline-end:-45px}
.hand-title{font-weight:900;color:#0b5168;margin-bottom:8px}
.hand-palm{font-size:43px;line-height:1;text-align:center;filter:grayscale(1);opacity:.18;margin:2px 0 8px}
.finger-list{display:grid;grid-template-columns:repeat(5,minmax(68px,1fr));gap:6px;position:relative;z-index:1}
.finger-state{border:1px solid #d9e6e9;border-radius:11px;padding:8px 5px;text-align:center;background:#f7fafb;transition:.18s}
.finger-state b{display:block;font-size:10px;margin:5px 0 2px}.finger-state small{font-size:8px;color:#8ca0a8}
.finger-dot{width:15px;height:24px;border:2px solid #aebfc5;border-radius:9px 9px 7px 7px;display:block;margin:auto;position:relative;background:#edf2f3}
.finger-dot:after{content:"";position:absolute;inset:4px;border:1px solid #b9c8cd;border-radius:50% 50% 42% 42%}
.finger-state.enrolled{border-color:#77d6b3;background:#ebfbf4;box-shadow:inset 0 3px 0 #25b77d}
.finger-state.enrolled .finger-dot{border-color:#13a56e;background:#34c793}.finger-state.enrolled .finger-dot:after{border-color:#e9fff6}
.finger-state.enrolled b,.finger-state.enrolled small{color:#08764e}
.finger-state.empty{opacity:.82}
.biometric-summary{display:grid;grid-template-columns:180px 1fr;gap:10px;margin-top:12px}
.biometric-summary>div{border:1px solid #d6e9ed;background:#fff;border-radius:12px;padding:10px}
.biometric-summary small{display:block;color:var(--muted);font-size:9px;margin-bottom:4px}.biometric-summary b{font-size:20px;color:#0b5e74}
.edit-btn{border-color:#1aaebb!important;color:#08768a!important}.delete-btn{border-color:#e3a5ab!important;color:#ae3442!important;background:#fff8f8!important}
@media(max-width:980px){.biometric-device-row{grid-template-columns:1fr}.hands-wrap{grid-template-columns:1fr}.finger-list{grid-template-columns:repeat(5,1fr)}.biometric-summary{grid-template-columns:1fr}}

/* V2.4.2 discovery */
.discovery-direct{display:flex;align-items:center;gap:8px;margin:10px 0 14px;padding:10px 12px;border:1px dashed #b9dce3;border-radius:12px;background:#fbfeff;color:#5e7a84}
.discovery-direct b{color:#0b5267}
.discover-section-title{font-size:12px;font-weight:900;color:#0a5d72;margin:8px 0 4px}
.discovered-device{align-items:center}
.discover-title{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.discover-title>span{font-size:9px;font-weight:800;padding:4px 7px;border-radius:999px}
.sdk-online .discover-title>span{background:#e6f8ef;color:#08734d}
.sdk-reachable .discover-title>span{background:#fff5d8;color:#8e6100}
.sdk-offline .discover-title>span{background:#ffe9eb;color:#a22d3b}
.discover-actions{display:flex;gap:6px;flex-wrap:wrap}

#deviceSaveBtn:disabled{opacity:.45;cursor:not-allowed} #devicePretestStatus b{color:#08764e}

.employee-list-head{padding:12px 14px;border-bottom:1px solid #dbe8ec;text-align:right}.error-box{line-height:1.9}


/* V4.1 Customer-final biometric UX */
.trialbar{display:none;align-items:center;gap:8px}
.trialbar.show{display:block}
.trialbar .trial-clock{font-weight:900;font-size:15px;letter-spacing:1px;color:#704d00}
.trialbar.expired{background:#ffe9eb;border-color:#f0b7be;color:#9a2634}
.trialbar.expired button{margin-inline-start:12px;padding:6px 12px;border-color:#d88f99;color:#8b2030}
.license.trial{font-variant-numeric:tabular-nums;min-width:116px;text-align:center}
.license.expired{min-width:92px;text-align:center}

.hands-wrap.compact{grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.hand-card.compact{padding:9px 10px 8px;min-height:164px}
.hand-card.compact:before{width:90px;height:90px;top:-45px}
.hand-card.compact .hand-title{font-size:12px;margin-bottom:2px}
.hand-diagram{height:125px;position:relative;max-width:285px;margin:0 auto;direction:ltr}
.hand-diagram .hand-palm{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);font-size:66px;line-height:1;opacity:.16;filter:grayscale(1);margin:0;user-select:none}
.hand-card.right .hand-diagram .hand-palm{transform:translate(-50%,-50%) scaleX(-1)}
.hand-diagram .finger-state{position:absolute;left:var(--fx);top:var(--fy);transform:translate(-50%,-50%);width:39px;height:39px;border-radius:50%;padding:2px;border:1px solid #cfdee2;background:#f6fafb;z-index:2;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(8,57,75,.06)}
.hand-diagram .finger-state small{position:absolute;top:40px;left:50%;transform:translateX(-50%);font-size:7px;white-space:nowrap;color:#728a94}
.hand-diagram .finger-state .finger-dot{width:13px;height:21px;margin:0;border-radius:8px}
.hand-diagram .finger-state.enrolled{background:#e4faef;border-color:#29bd81;box-shadow:0 0 0 3px rgba(31,185,123,.12)}
.hand-diagram .finger-state.enrolled small{color:#08764e;font-weight:800}
.hand-diagram .finger-state.enrolling{background:#fff3cb;border-color:#e6a91e;animation:fingerPulse .8s infinite alternate}
@keyframes fingerPulse{to{box-shadow:0 0 0 7px rgba(230,169,30,.14);transform:translate(-50%,-50%) scale(1.06)}}

.biometric-summary.compact{grid-template-columns:150px 1fr;align-items:end}
.finger-total{min-height:76px}
.card-compact{padding:10px 12px!important}
.card-input-row{display:grid;grid-template-columns:minmax(150px,1fr) 44px 36px;gap:7px;align-items:center;margin-top:6px}
.card-input-row input{min-width:0}
.card-pass-btn,.card-clear-btn{height:40px!important;padding:0!important;display:flex!important;align-items:center;justify-content:center;border-radius:10px!important}
.card-pass-btn{border-color:#19aebb!important;background:#eefcfd!important}
.card-pass-btn.reading{animation:cardGlow .7s infinite alternate}
@keyframes cardGlow{to{box-shadow:0 0 0 6px rgba(20,174,187,.14)}}
.card-clear-btn{font-size:23px!important;color:#b13645!important;border-color:#efccd1!important;background:#fff7f8!important}
.rfid-card-icon{width:25px;height:17px;border:2px solid #0b8fa2;border-radius:3px;display:block;position:relative;background:linear-gradient(135deg,#e9fbfd,#fff)}
.rfid-card-icon:before{content:"";position:absolute;left:3px;top:4px;width:7px;height:2px;background:#0b8fa2;box-shadow:0 4px 0 #85cbd4}
.rfid-card-icon:after{content:"))";position:absolute;right:-9px;top:-7px;font-size:13px;color:#0b8fa2;letter-spacing:-5px;transform:rotate(-8deg)}
.biometric-device-row{grid-template-columns:1.15fr .85fr auto}
.biometric-device-row button{align-self:end}

@media(max-width:980px){
  .hands-wrap.compact{grid-template-columns:1fr}
  .biometric-summary.compact{grid-template-columns:1fr}
  .biometric-device-row{grid-template-columns:1fr}
}

.device-admin-label{color:#8b5a00;background:#fff3cf;border-radius:999px;padding:4px 8px;font-size:9px}

/* V4.2 employee photos + shift assignment */
.employee-avatar{width:44px;height:44px;border-radius:50%;border:1px solid #d7e8ed;background:#edf6f8;display:grid;place-items:center;overflow:hidden;flex:0 0 44px;padding:0;color:#0b5267;font-weight:800;cursor:default}.employee-avatar.has-photo{cursor:pointer}.employee-avatar img{width:100%;height:100%;object-fit:cover}.employee-avatar span{font-size:17px}.employee-photo-zoom{display:flex;flex-direction:column;align-items:center;gap:14px;padding:8px}.employee-photo-zoom img{max-width:min(620px,90vw);max-height:70vh;border-radius:18px;object-fit:contain;box-shadow:0 10px 35px rgba(0,42,56,.18)}
.shift-assign-toolbar{display:grid;grid-template-columns:1fr 1fr auto auto;gap:10px;align-items:end;margin-bottom:14px}.shift-employee-groups{display:grid;gap:12px;max-height:55vh;overflow:auto;padding:4px}.shift-dept-group{border:1px solid #d9e9ee;border-radius:14px;overflow:hidden}.shift-dept-head{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;background:#f3f9fa}.shift-employee-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:7px;padding:10px}.shift-employee-item{display:flex;gap:9px;align-items:flex-start;border:1px solid #e3eef1;border-radius:10px;padding:9px;background:#fff}.shift-employee-item input{margin-top:5px}.shift-employee-item span{display:flex;flex-direction:column;gap:3px}.shift-employee-item small{color:#758b94}.trial-clock{font-variant-numeric:tabular-nums;font-weight:900}

/* V5 production additions */
.department-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;padding:6px}.department-card{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px;text-align:right;padding:16px;border:1px solid #d7e7ec;border-radius:16px;background:#fff}.department-card b{font-size:26px;color:#078ca0}.department-card small{grid-column:1/-1;color:#79909a}.bulk-select-all{padding:12px 0;border-bottom:1px solid #e3edf0}.bulk-employee-list{max-height:380px;overflow:auto;display:grid;gap:8px;padding:10px 0}.bulk-employee-list label{display:flex;gap:10px;align-items:center;border:1px solid #e1ecef;border-radius:12px;padding:10px 12px;background:#fff}.bulk-employee-list small{display:block;color:#78919a;margin-top:3px}.update-status{margin-top:12px;padding:12px;border:1px solid #dcebed;border-radius:12px;background:#f7fbfc;line-height:1.7}.update-card{display:grid;gap:7px}.update-card p{white-space:normal;margin:0;color:#58717b}.badge.pending{background:#eef3f5;color:#667d86}.employee-avatar img{cursor:zoom-in}.trial-clock{font-variant-numeric:tabular-nums}.trial-bar.expired button{margin-inline-start:8px}

.department-manager{display:grid;gap:14px}
.department-add-row{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:end}
.department-admin-list{display:grid;gap:10px;margin-top:6px}
.department-admin-row{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;border:1px solid #dce9ed;border-radius:14px;padding:8px;background:#f8fbfc}
.department-admin-row .department-card{border:0;background:transparent;padding:8px}
.department-admin-row .row-actions{display:flex;gap:7px;flex-wrap:wrap}

/* V5.2.0 — Requests + Mobile/P2P */
.request-stats{grid-template-columns:repeat(4,1fr)}
.badge.req-pending{background:#fff3cf;color:#8a6200}.badge.req-approved{background:#e1f7ed;color:#11744d}.badge.req-rejected{background:#ffe8ea;color:#a52d39}.badge.req-cancelled{background:#edf2f4;color:#657984}
.wrap-cell{white-space:normal;min-width:220px;max-width:380px;line-height:1.6}.mini{padding:7px 10px!important;font-size:11px}.danger{background:#fff0f1;border:1px solid #f4c9ce;color:#a52d39;border-radius:10px;padding:10px 14px}.table-sub{display:block;color:var(--muted);font-size:10px;margin-top:3px}
.request-detail{display:grid;gap:13px}.request-detail h3{margin:0}.request-detail label{display:grid;gap:6px}.request-detail textarea{min-height:90px}.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.detail-grid>div{background:#f6fafb;border:1px solid var(--line);border-radius:12px;padding:12px}.detail-grid small{display:block;color:var(--muted);margin-bottom:5px}
.mobile-access-grid{display:grid;grid-template-columns:.85fr 1.45fr;gap:18px}.p2p-body{padding:18px;display:grid;gap:15px}.p2p-row{display:grid;gap:6px}.p2p-row small{color:var(--muted)}.p2p-row>b{font-size:20px;color:#0d7186}.copy-line{display:flex;gap:8px}.copy-line input{min-width:0;flex:1;border:1px solid var(--line);border-radius:10px;padding:10px}.mobile-filter{padding:12px 16px;margin:0}.mobile-filter input{width:100%}.invite-card{display:grid;gap:14px}.invite-card label{display:grid;gap:7px}.invite-person{padding:12px 14px;background:#f2fbfc;border:1px solid #cdeaf0;border-radius:12px}.invite-person b,.invite-person small{display:block}.invite-person small{margin-top:5px;color:var(--muted)}

@media(max-width:1000px){
  .sidebar{position:relative;inset:auto;width:100%;height:auto;padding:12px;display:block}.sidebar .brand{padding:2px 8px 10px}.sidebar .brand img{width:50px;height:50px}.sidebar nav{display:flex;gap:6px;overflow-x:auto;padding:10px 0 2px;scrollbar-width:thin}.sidebar nav button{flex:0 0 auto;width:auto;min-width:135px;justify-content:center;text-align:center;margin:0;padding:10px 12px}.sidebar .platform{display:none}.main{margin-right:0;padding:16px}.shell{display:block}header{gap:10px;align-items:flex-start}.header-actions{flex-wrap:wrap;justify-content:flex-start}.grid2,.settings-grid,.mobile-access-grid{grid-template-columns:1fr}.stats,.stats.six,.stats.five,.request-stats{grid-template-columns:repeat(2,1fr)}.toolbar,.filters,.actions{flex-wrap:wrap}.toolbar .search{max-width:none;width:100%}.panel{border-radius:14px}.table-wrap{max-width:100%;overflow-x:auto}.table-wrap table{min-width:850px}.modal-card{width:min(94vw,760px);max-height:92vh;overflow:auto}}
@media(max-width:600px){
  .main{padding:10px}.sidebar{padding:8px}.sidebar nav button{min-width:118px;font-size:12px}.sidebar .brand b{font-size:19px}.sidebar .brand small{font-size:8px}header{display:grid;grid-template-columns:1fr}header h1{font-size:23px}.title-wrap{min-width:0}.company-logo{width:46px;height:46px}.header-actions{width:100%}.user-chip{flex:1}.stats,.stats.six,.stats.five,.request-stats{grid-template-columns:1fr 1fr;gap:9px}.stats article{padding:13px}.stats strong{font-size:27px}.quick-grid{grid-template-columns:1fr 1fr;padding:10px}.filters{width:100%}.filters>*,.filters label,.filters input,.filters select{max-width:100%}.form-grid,.detail-grid{grid-template-columns:1fr!important}.copy-line{display:grid;grid-template-columns:1fr auto}.login-screen{padding:12px}.login-card{padding:22px 18px;border-radius:20px}.login-brand img{height:96px}.modal-card{width:96vw}.modal-actions{flex-wrap:wrap}.toolbar input,.toolbar select{min-height:42px}}


/* ============================================================
   V5.2.1 OFFICIAL UI REFRESH — Premium INOUT visual system
   Design-only override. Existing IDs, APIs and workflows remain intact.
   ============================================================ */
:root{
  --navy:#06263a;--navy-deep:#031b2d;--navy-soft:#0b3d58;
  --blue:#0c83ea;--cyan:#0eb5c5;--ink:#0b2239;--muted:#6e8299;
  --bg:#f6f9fc;--card:#ffffff;--line:#dce6ef;
  --shadow:0 7px 24px rgba(21,60,91,.055);
}
body{background:linear-gradient(180deg,#f9fbfd 0,#f4f8fb 100%);color:var(--ink)}
.shell{background:transparent}
.sidebar{width:270px;padding:28px 20px 18px;background:radial-gradient(circle at 75% 5%,rgba(0,195,232,.14),transparent 22%),linear-gradient(180deg,#052942 0%,#041d31 100%);box-shadow:-10px 0 28px rgba(6,39,62,.08)}
.brand{gap:14px;padding:0 5px 25px;border-bottom:1px solid rgba(111,188,218,.18)}
.brand img{width:64px;height:64px;border-radius:0;object-fit:contain;background:transparent;filter:drop-shadow(0 5px 12px rgba(0,184,213,.13))}
.brand b{font-size:25px;letter-spacing:4px;color:#fff}.brand b span{color:#18c3d8}.brand small{color:#8db2c3;font-size:8px;letter-spacing:2px}
#nav{padding-top:18px;display:grid;align-content:start;gap:7px}
#nav button{height:52px;margin:0;border:1px solid rgba(137,190,211,.17);background:linear-gradient(180deg,rgba(30,73,98,.72),rgba(18,54,77,.8));color:#f6fbff;border-radius:10px;padding:0 14px;gap:12px;font-weight:700;font-size:14px;box-shadow:inset 0 1px rgba(255,255,255,.035);transition:.18s ease}
#nav button .nav-icon{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:0 0 22px}
#nav button:hover{transform:translateX(-2px);border-color:rgba(36,177,226,.42);background:linear-gradient(180deg,rgba(29,92,126,.82),rgba(16,61,88,.88))}
#nav button.active{background:linear-gradient(180deg,#0f9be5 0%,#0874c9 100%);border-color:#20bff2;box-shadow:0 8px 18px rgba(0,125,208,.22),inset 0 0 0 1px rgba(255,255,255,.1);color:white}
.platform{margin-top:14px;padding:18px 16px;min-height:86px;border-radius:13px;background:linear-gradient(180deg,rgba(23,62,87,.9),rgba(13,48,70,.95));border:1px solid rgba(127,188,211,.2);box-shadow:inset 0 1px rgba(255,255,255,.04)}
.platform i{width:10px;height:10px;background:#22db8a;box-shadow:0 0 12px rgba(34,219,138,.75)}.platform b{font-size:15px}.platform small{color:#27dc8b;font-size:12px;margin-top:6px}
.main{margin-right:270px;padding:26px 30px 22px}
header{min-height:72px;margin-bottom:14px}header h1{font-size:32px;letter-spacing:-.6px;color:#0b2138}header p{font-size:13px;color:#70849a}
.header-actions>button,.user-chip,.license{min-height:42px}.user-chip{border-color:#dce6ef;border-radius:11px;box-shadow:var(--shadow)}
#langBtn{font-weight:800;min-width:52px}.license.active{background:#e7f8ef;color:#0c8d4e;border:1px solid #cfeedd}.license.trial{border:1px solid #f1dfad}.license.expired{border:1px solid #f1cbd1}
.trialbar{border-radius:11px;box-shadow:var(--shadow)}
.premium-livebar{min-height:80px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 18px;margin-bottom:16px;display:grid;grid-template-columns:minmax(250px,1fr) minmax(230px,360px) 190px auto;align-items:center;gap:14px;box-shadow:var(--shadow)}
.live-status{display:flex;gap:10px;align-items:center}.live-status>div{display:grid;gap:4px}.live-status b{font-size:13px}.live-status small{color:var(--muted);font-size:11px}.live-dot{width:10px;height:10px;border-radius:50%;background:#16c86d;box-shadow:0 0 0 5px rgba(22,200,109,.1),0 0 12px rgba(22,200,109,.32)}
.branch-filter{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:10px;font-size:12px;font-weight:700}.branch-filter select{height:42px;border:1px solid var(--line);border-radius:10px;padding:0 13px;background:#fff;color:#102a43;outline:0}
.dash-date{height:42px;border:1px solid var(--line);border-radius:10px;display:flex;gap:9px;align-items:center;justify-content:center;background:#fff;font-weight:700;font-size:13px;direction:rtl}.dash-date svg,.sync-button svg{width:18px;height:18px;fill:none;stroke:#205a96;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sync-button{height:42px!important;display:flex;align-items:center;gap:8px;justify-content:center;white-space:nowrap;background:#f7fbff!important;border-color:#d6e5f2!important;color:#18568a!important;font-weight:700!important}
.premium-stats{grid-template-columns:repeat(3,1fr)!important;gap:16px;margin-bottom:18px}
.premium-stats .stat-card{min-height:142px;position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:23px 25px;border:1px solid var(--line);border-radius:15px;background:#fff;box-shadow:var(--shadow);overflow:hidden;transition:.18s ease}
.premium-stats .stat-card:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(18,57,88,.075)}
.stat-content{text-align:right;flex:1}.premium-stats .stat-content small{display:block;font-size:14px;color:#38567e;font-weight:700}.premium-stats .stat-content strong{font-size:34px;line-height:1.05;margin:8px 0 5px}.premium-stats .stat-content span{font-size:12px;color:#73869a}
.stat-icon{width:68px;height:68px;border-radius:50%;display:grid;place-items:center;flex:0 0 68px}.stat-icon svg{width:32px;height:32px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.stat-branches .stat-icon{background:#fff3e7;color:#f28a18}.stat-branches strong{color:#f28a18}
.stat-employees .stat-icon{background:#edf5ff;color:#187de0}.stat-employees strong{color:#1379df}
.stat-present .stat-icon{background:#e7f9ef;color:#12a357}.stat-present strong{color:#10a357!important}
.stat-absent .stat-icon{background:#ffedef;color:#e8273e}.stat-absent strong{color:#e51f36}
.stat-late .stat-icon{background:#fff5df;color:#f0a000}.stat-late strong{color:#ed9700!important}
.stat-devices .stat-icon{background:#f1eaff;color:#7437ea}.stat-devices strong{color:#6f31e8!important}
.premium-grid{grid-template-columns:1.75fr .72fr;gap:18px;align-items:stretch}.panel{border:1px solid var(--line);border-radius:15px;box-shadow:var(--shadow)}.panel-head{padding:18px 20px}.panel-head h3{font-size:18px;color:#10283f}.panel-head p{font-size:11px}.pill{background:#eaf4ff;color:#1473d1;font-weight:700;border-radius:9px}
.recent-panel .table-wrap{min-height:300px}.recent-panel table th{background:#f8fbfe;color:#234765;font-size:11px}.recent-panel table td{height:52px;color:#274159}.recent-panel table tbody tr:hover td{background:#f8fcff}
.premium-quick .quick-grid{padding:17px;gap:12px}.premium-quick .quick-grid button{min-height:118px;border:1px solid var(--line);background:#fff;border-radius:12px;box-shadow:0 3px 10px rgba(16,56,89,.035);gap:12px;font-weight:700;color:#142b42;transition:.18s ease}.premium-quick .quick-grid button:hover{transform:translateY(-2px);border-color:#bfd8e9;box-shadow:0 8px 20px rgba(16,56,89,.07)}
.quick-icon{width:44px;height:44px;border-radius:12px;display:grid;place-items:center}.quick-icon svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.qi-green{background:#e8faf1;color:#0aa05a}.qi-blue{background:#eaf4ff;color:#0d7eea}.qi-orange{background:#fff1e4;color:#f17b00}.qi-purple{background:#f2eaff;color:#6e33e9}
.capability-strip{min-height:64px;margin-top:18px;border-top:1px solid #e4edf4;display:flex;align-items:center;justify-content:center;gap:46px;direction:ltr;color:#18364f;font-size:12px}.capability-strip span{display:flex;align-items:center;gap:8px;white-space:nowrap}.capability-strip svg{width:19px;height:19px;fill:none;stroke:#426a92;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.capability-strip b{color:#0ab49f;font-size:14px}
/* Better consistency across all module pages */
.toolbar,.filters{background:transparent}.toolbar .search input,.toolbar select,.form-grid input,.form-grid select,.settings-card input,.modal-card input,.modal-card select,.modal-card textarea{border-color:#dbe6ef;border-radius:10px;box-shadow:inset 0 1px 1px rgba(18,53,84,.015)}
.primary{background:linear-gradient(135deg,#0db8c5,#0b91b8);box-shadow:0 5px 13px rgba(13,153,184,.16)}
.badge{font-weight:700}.modal-card{border:1px solid rgba(220,230,239,.9)}
@media(max-width:1350px){.premium-livebar{grid-template-columns:1fr 300px 170px}.sync-button{grid-column:1/-1;justify-self:start}.premium-grid{grid-template-columns:1.45fr .8fr}}
@media(max-width:1100px){.premium-stats{grid-template-columns:repeat(2,1fr)!important}.premium-livebar{grid-template-columns:1fr 1fr}.dash-date,.sync-button{grid-column:auto}.premium-grid{grid-template-columns:1fr}.capability-strip{gap:20px;flex-wrap:wrap;padding:14px}.sidebar{width:225px}.main{margin-right:225px}.brand img{width:52px;height:52px}}
@media(max-width:1000px){.premium-livebar{grid-template-columns:1fr 1fr}.sidebar{width:100%}.main{margin-right:0}.capability-strip{display:none}}
@media(max-width:600px){.premium-stats{grid-template-columns:1fr!important}.premium-livebar{grid-template-columns:1fr}.premium-livebar>*{grid-column:1!important}.stat-icon{width:58px;height:58px;flex-basis:58px}.premium-stats .stat-card{min-height:118px}.premium-quick .quick-grid{grid-template-columns:1fr 1fr}}


/* V5.2.2 — Simplified P2P sharing UX */
.mobile-access-single{display:block;max-width:1100px;margin:0 auto}.p2p-share-card{width:100%}.p2p-top-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.p2p-good{color:#119b57!important}.p2p-wait{color:#c98000!important}.p2p-off{color:#8b98a6!important}
.share-link-box{border:1px solid #cfe3ea;background:linear-gradient(145deg,#f8fcfd,#fff);border-radius:16px;padding:16px;display:grid;gap:12px}.share-link-title b{display:block;font-size:16px;color:#0b273b}.share-link-title small{display:block;color:var(--muted);margin-top:4px}.share-link-box>input{width:100%;border:1px solid #bcd7e0;background:#fff;border-radius:11px;padding:12px 14px;font-family:Consolas,monospace;font-size:13px;color:#0b5267}.share-actions{display:flex;gap:9px;flex-wrap:wrap}.share-actions button{min-width:140px;display:inline-flex;align-items:center;justify-content:center;gap:7px}.share-actions .share-main{min-width:180px}.share-btn-icon{font-size:17px;line-height:1}.p2p-service-actions{padding-top:2px}.p2p-qr-modal{text-align:center;display:grid;gap:14px;justify-items:center}.qr-frame{background:#fff;border:1px solid #d6e5ea;border-radius:18px;padding:14px;box-shadow:0 10px 30px rgba(5,38,55,.08)}.qr-frame canvas{display:block;width:min(300px,68vw);height:auto;image-rendering:pixelated}.p2p-qr-modal p{margin:0;color:#536b7b}.qr-url{max-width:100%;word-break:break-all;background:#f6fafb;border:1px solid #dbe8ed;border-radius:10px;padding:9px 11px;font-size:12px;color:#0c6074}
@media(max-width:760px){.p2p-top-grid{grid-template-columns:1fr}.share-actions{display:grid;grid-template-columns:1fr}.share-actions button,.share-actions .share-main{width:100%;min-width:0}}

/* V5.2.4 Employee Excel import/export */
.import-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:8px 0 14px}.import-summary>div{border:1px solid var(--line);border-radius:12px;padding:12px;text-align:center;background:#f8fbfc}.import-summary b{display:block;font-size:24px;color:#0b5e74}.import-summary small{display:block;margin-top:3px;color:var(--muted)}.import-summary .ok b{color:#16a362}.import-summary .update b{color:#3478c8}.import-summary .error b{color:#d84a56}.import-preview{max-height:52vh}.import-preview table{min-width:720px}.import-error{color:#b53843;font-size:11px;line-height:1.6}.import-error+ .import-error{margin-top:2px}.notice.compact{padding:9px 12px;margin:8px 0 12px;font-size:11px}.import-error td{background:#fff7f8}
@media(max-width:760px){.import-summary{grid-template-columns:1fr 1fr}.import-preview{max-height:48vh}}

/* V5.2.6 request attachments */
.attachment-box{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px dashed #bdd7df;background:#f5fbfc;border-radius:12px;padding:12px 14px;margin:10px 0}.attachment-box button{max-width:65%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ================= INOUT V5.3.1 Smart Attendance ================= */
.smart-hero{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 24px;background:linear-gradient(135deg,#071d31,#0d374c);color:#fff;border:0}.smart-hero h2{margin:5px 0 7px;font-size:24px}.smart-hero p{margin:0;color:#bbd3df;max-width:780px}.smart-kicker{font-size:11px;letter-spacing:1.6px;color:#5fe0dd;font-weight:800}.smart-status{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.smart-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:16px;margin:16px 0}.check-inline{display:inline-flex;align-items:center;gap:7px;padding:0 8px;font-size:13px;color:var(--muted)}.check-inline input{width:auto}.evidence-view{display:grid;gap:15px}.evidence-view>img{display:block;max-width:min(440px,100%);max-height:430px;object-fit:contain;margin:auto;border-radius:14px;border:1px solid var(--line);background:#eef4f7}.badge.pending{background:#fff6df;color:#a46500}.smart-grid .settings-card{margin:0}.smart-grid .notice{margin-top:12px}.smart-grid .table-wrap table{font-size:12px}
@media(max-width:980px){.smart-grid{grid-template-columns:1fr}.smart-hero{align-items:flex-start;flex-direction:column}}

/* =========================================================
   INOUT CLOUD V1.3 - DESKTOP MIRROR UI
   Uses the same visual shell as the real INOUT Desktop build.
   ========================================================= */
html,body{min-height:100%;background:#f6f9fc}.cloud-login-card{width:min(500px,94vw)}.cloud-auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:-8px 0 16px}.cloud-auth-tabs button{min-height:42px}.cloud-register-form{grid-template-columns:1fr 1fr!important}.cloud-register-form .full{grid-column:1/-1}.cloud-register-form label{min-width:0}.cloud-register-form select{padding:13px;border:1px solid var(--line);border-radius:11px;background:white;color:#17394b}.toast{position:fixed;left:24px;bottom:24px;background:#0d3346;color:#fff;padding:12px 16px;border-radius:11px;z-index:100;opacity:0;transform:translateY(10px);pointer-events:none;transition:.2s;box-shadow:0 12px 40px rgba(0,0,0,.2)}.toast.show{opacity:1;transform:none}.toast.bad{background:#9e3040}#toast{pointer-events:none}.sidebar{overflow:auto}.sidebar .platform{flex:0 0 auto}.cloud-livebar{grid-template-columns:minmax(250px,1fr) minmax(260px,1.1fr) 180px auto}.cloud-trust{border-right:1px solid #e1ebf2;padding-right:18px}.cloud-trust b{display:block;color:#0c3650;font-size:13px}.cloud-trust small{display:block;color:#70849a;font-size:11px;margin-top:5px}.cloud-stats{grid-template-columns:repeat(3,1fr)!important}.plan-value{font-size:20px!important;line-height:1.2!important}.quick-grid{padding:16px;display:grid;grid-template-columns:1fr 1fr;gap:12px}.quick-grid button{min-height:88px;border:1px solid #dce8f0;border-radius:13px;background:#fff;display:flex;align-items:center;gap:12px;justify-content:flex-start;text-align:right;padding:15px}.quick-grid button:hover{border-color:#9ed8ea;background:#f9fdff}.quick-icon{width:39px;height:39px;border-radius:11px;display:grid;place-items:center;font-size:20px;font-weight:900}.qi-green{background:#e5f8ef;color:#16835b}.qi-blue{background:#e8f3ff;color:#1971c7}.qi-orange{background:#fff3df;color:#d67d00}.qi-purple{background:#f1eaff;color:#7857c8}.report-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.report-tools input{min-height:40px;border:1px solid var(--line);border-radius:10px;padding:8px}.evidence-toggle{display:flex;align-items:center!important;flex-direction:row!important;gap:6px!important;font-size:11px!important;color:#6b8290!important}.evidence-toggle input{width:auto!important}.form.two{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:16px 18px}.form.two label{display:flex;flex-direction:column;gap:6px;color:#70849a;font-size:11px}.form.two input,.form.two select,.form.two textarea{border:1px solid var(--line);background:#fff;border-radius:10px;padding:10px 11px;outline:none}.form.two .full{grid-column:1/-1}.cloud-security-note{background:#edf8fb;border:1px solid #d0eaf0;color:#446c7b;padding:12px;border-radius:11px;font-size:12px;line-height:1.8}.cloud-settings-grid{grid-template-columns:1.05fr .95fr}.location{background:#f2fbfc;border:1px dashed #a9dce6;border-radius:12px;padding:12px;color:#4f7380}.smart-action-card{padding:18px;border-bottom:1px solid var(--line)}.smart-buttons{display:flex;gap:10px;margin-top:12px}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:18px}.plan{border:1px solid #dce7ef;border-radius:14px;padding:18px;background:#fff;box-shadow:0 8px 24px rgba(20,55,84,.04)}.plan h3{margin:0}.plan .price{font-size:22px;font-weight:900;margin:10px 0;color:#0f7995}.account-details{padding:18px}.account-details .form.two{padding:0}.mini-link{color:#0f8fa8;text-decoration:none;font-weight:700}.badge.ok{background:#e1f7ed;color:#11744d}.badge.bad{background:#ffe8ea;color:#a52d39}.badge{display:inline-block;padding:5px 9px;border-radius:999px;font-size:10px;background:#edf2f4;color:#657984}.modal-card .form.two{padding:0}.modal-card label{color:#637c88}.modal-card textarea{min-height:95px}.table-wrap>div:only-child{padding:38px;text-align:center;color:#7a909c}.camera{position:relative;width:min(520px,100%);aspect-ratio:4/3;background:#04131d;border-radius:16px;overflow:hidden}.camera video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}.camera:after{content:"";position:absolute;inset:12% 25%;border:3px solid #4ee5df;border-radius:50%}.camera-msg{text-align:center;margin:10px;color:#4a6374;font-weight:700}.smart-cam{display:grid;place-items:center;padding:16px}.modal-card{width:min(820px,96vw)}
@media(max-width:1150px){.cloud-livebar{grid-template-columns:1fr 1fr}.cloud-stats{grid-template-columns:repeat(2,1fr)!important}.cloud-settings-grid{grid-template-columns:1fr}.cards{grid-template-columns:1fr 1fr}}
@media(max-width:720px){.cloud-register-form{grid-template-columns:1fr!important}.sidebar{display:block;position:relative;width:auto;min-height:auto;max-height:none;padding:12px}.sidebar .brand{padding-bottom:12px}.sidebar #nav{display:flex;overflow:auto;gap:7px;padding-top:10px}.sidebar #nav button{min-width:155px;height:46px;flex:0 0 auto}.sidebar .platform{display:none}.main{margin:0;padding:14px}.shell{display:block}.cloud-livebar{grid-template-columns:1fr}.cloud-trust{border:0;padding:0}.cloud-stats{grid-template-columns:1fr 1fr!important}.header-actions{flex-wrap:wrap}.quick-grid{grid-template-columns:1fr 1fr}.cards{grid-template-columns:1fr}.form.two{grid-template-columns:1fr}.report-tools{width:100%}.panel-head{align-items:flex-start;gap:12px;flex-wrap:wrap}}
@media(max-width:480px){.cloud-stats,.quick-grid{grid-template-columns:1fr!important}.login-brand img{height:100px}}