:root{--ink:#13223b;--muted:#758198;--line:#e9edf3;--bg:#f7f9fc;--blue:#1559e6;--blue-soft:#edf3ff;--navy:#0d2751;--green:#108461;--red:#cf4752;--amber:#a86c13;--radius:18px;--shadow:0 6px 25px #182c5010;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);font-synthesis:none;font-size:14px;background:var(--bg)}*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a{color:var(--blue);text-decoration:none}a:hover{text-decoration:none;color:#0c42af}button:disabled{cursor:not-allowed;opacity:.52}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #aac9ff;outline-offset:2px}h1,h2,h3,p{margin:0}h1{font-size:29px;letter-spacing:-1.05px;line-height:1.2;font-weight:680}h2{font-size:18px;letter-spacing:-.4px;font-weight:650}h3{font-size:15px;font-weight:650}p{line-height:1.6}.muted{color:var(--muted)}.small{font-size:12px}.tiny{font-size:11px}.mono{font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.blue{color:var(--blue)}.green{color:var(--green)}.red{color:var(--red)}.eyebrow{font-size:10px;font-weight:750;letter-spacing:1.8px;color:var(--muted);text-transform:uppercase}.row{display:flex;align-items:center;gap:12px}.between{display:flex;align-items:center;justify-content:space-between;gap:16px}.wrap{flex-wrap:wrap}.stack{display:grid;gap:20px}.stack-sm{display:grid;gap:12px}.full{width:100%}.hide{display:none!important}.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}.divider{height:1px;background:var(--line);margin:18px 0}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:10px 17px;border:1px solid transparent;border-radius:10px;font-weight:600;font-size:13px;background:var(--blue);color:white;transition:background .18s,transform .18s;white-space:nowrap}.btn:hover{background:#104bc6;color:#fff}.btn:active{transform:translateY(1px)}.btn.secondary{background:white;border-color:#dce3ed;color:var(--ink)}.btn.secondary:hover{background:#f4f7fc}.btn.ghost{background:transparent;color:var(--muted);padding:9px 11px}.btn.ghost:hover{background:var(--bg);color:var(--ink)}.btn.danger{background:#fff1f1;color:var(--red);border-color:#f5d9dc}.btn.small{min-height:33px;padding:6px 10px;font-size:12px}.btn.big{min-height:48px;padding:13px 20px}.icon-btn{display:inline-flex;justify-content:center;align-items:center;width:38px;height:38px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--muted)}.icon-btn:hover{background:var(--bg);color:var(--blue)}.link-btn{border:0;background:none;padding:0;color:var(--blue);font-size:12px;font-weight:600}.badge{display:inline-flex;align-items:center;gap:6px;font-size:10px;letter-spacing:.1px;font-weight:650;line-height:1.4;padding:5px 9px;border-radius:7px;background:#f0f3f8;color:#6e7b92;white-space:nowrap}.badge:before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}.badge.green{background:#eaf7f1;color:#168362}.badge.blue{background:#edf3ff;color:var(--blue)}.badge.amber{background:#fff5e7;color:#a36e26}.badge.red{background:#fff0f0;color:#bd4753}.avatar{width:36px;height:36px;flex-shrink:0;background:#edf3ff;color:#195cdb;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}.avatar.large{width:64px;height:64px;border-radius:20px;font-size:22px}.avatar.mint{background:#edf8f4;color:#298874}.avatar.lilac{background:#f1effe;color:#8473c3}.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}.card.padded{padding:24px}.card-head{padding:20px 24px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:10px}.card-foot{padding:14px 22px;border-top:1px solid var(--line)}.card-body{padding:24px}.callout{display:flex;align-items:flex-start;gap:12px;background:#f0f5ff;border:1px solid #e0eaff;border-radius:12px;padding:15px 17px;color:#3d5a8c;font-size:12px;line-height:1.7}.callout svg{flex-shrink:0;margin-top:2px}.callout.amber{background:#fffaf1;color:#896528;border-color:#f6ebd8}.callout.green{background:#eff9f5;border-color:#e0f0e9;color:#28765a}.callout.red{background:#fff5f5;border-color:#f3dfe2;color:#ab4752}.callout strong{display:block;color:inherit;margin-bottom:3px}.empty{padding:48px 20px;text-align:center;display:grid;justify-items:center;gap:12px;color:var(--muted)}.empty h3{color:var(--ink)}.empty-icon{width:54px;height:54px;border-radius:18px;background:var(--bg);display:grid;place-items:center;color:#9cacc3}.empty p{max-width:380px;font-size:12px}.loader{display:inline-block;width:20px;height:20px;border:2px solid #dbe6fb;border-top-color:var(--blue);border-radius:50%;animation:spin .65s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@keyframes appear{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}.boot{height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;background:#fff}.boot img{width:78px}.boot strong{font-size:23px;letter-spacing:-.7px}.page-loader{min-height:50vh;display:grid;place-content:center}.layout{min-height:100vh}.sidebar{position:fixed;inset:0 auto 0 0;width:232px;background:#fff;border-right:1px solid var(--line);display:flex;flex-direction:column;z-index:40}.brand{display:flex;align-items:center;gap:10px;color:var(--ink)}.brand img{width:37px;height:37px;object-fit:contain}.brand strong{font-size:17px;font-weight:740;letter-spacing:-.7px}.brand span{font-size:10px;display:block;color:var(--muted);letter-spacing:.2px;margin-top:1px}.sidebar>.brand{padding:28px 24px 30px}.nav-caption{color:#9ca6b6;font-size:9px;font-weight:650;letter-spacing:1.8px;padding:15px 27px 8px}.sidebar nav{padding:0 14px;display:grid;gap:4px}.nav-item{min-height:44px;display:flex;align-items:center;gap:12px;padding:11px 13px;color:#758198;border-radius:9px;font-size:12.5px;font-weight:540}.nav-item:hover{background:#f7f9fc;color:var(--ink)}.nav-item.active{color:var(--blue);background:#edf3ff;font-weight:650}.nav-item .nav-count{margin-left:auto;font-size:9px;border-radius:4px;background:#fff;padding:3px 5px}.sidebar-bottom{margin-top:auto;padding:18px 20px;border-top:1px solid var(--line)}.sidebar-bottom .user-name{max-width:135px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:650}.workspace-card{margin:18px 20px;padding:14px;border:1px solid var(--line);border-radius:12px;background:#fbfcfe}.workspace-card .plan-line{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:650}.workspace-card p{font-size:10px;color:var(--muted);margin:7px 0 11px}.workspace-card .btn{width:100%;font-size:10px;min-height:31px}.topbar{height:76px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 36px;position:sticky;top:0;z-index:20;margin-left:232px;gap:16px}.breadcrumbs{font-size:11px;color:#9ca5b5;display:flex;align-items:center;gap:10px}.breadcrumbs b{color:#53637d;font-weight:550}.top-actions{display:flex;align-items:center;gap:12px}.search-global{display:flex;align-items:center;gap:9px;color:#a4aec0;background:#f8fafc;border:1px solid #edf0f5;border-radius:9px;padding:9px 12px}.search-global input{border:0;background:none;outline:none;width:155px;font-size:11px;color:var(--ink)}.workspace-select{max-width:160px;border:1px solid var(--line);padding:8px;border-radius:8px;color:#60708a;font-size:11px;background:white}.mobile-menu{display:none}.main{margin-left:232px;padding:34px 36px 36px;max-width:1760px;min-width:0}.page{animation:appear .2s ease}.page-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:27px}.page-heading p{margin-top:7px;color:var(--muted);font-size:12px}.page-heading .eyebrow{margin-bottom:8px}.heading-actions{display:flex;align-items:center;gap:10px}.date-chip{display:flex;gap:8px;align-items:center;border:1px solid #e2e7ef;border-radius:9px;padding:10px 12px;font-size:11px;color:#62738d;background:#fff}.demo-banner{padding:11px 17px;background:#fff9eb;border:1px solid #f8eac8;border-radius:10px;margin-bottom:22px;display:flex;gap:8px;align-items:center;color:#927132;font-size:11px}.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:17px;margin-bottom:24px}.stat{padding:21px 23px}.stat .stat-icon{width:33px;height:33px;display:grid;place-items:center;border:1px solid #e5ebf8;border-radius:10px;color:var(--blue);background:#f9fbff}.stat-top{display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--muted);font-size:11px}.stat-number{font-size:29px;font-weight:630;letter-spacing:-.8px;margin:14px 0 8px;line-height:1.05}.stat-number.currency{font-size:24px}.stat-note{font-size:10px;color:#96a0b1}.dashboard-grid{display:grid;grid-template-columns:1.65fr 1fr;gap:22px}.chart-card .card-head{border:0;padding-bottom:8px}.chart-total{padding:0 24px;margin-top:5px}.chart-total strong{font-size:27px;font-weight:650;letter-spacing:-1px}.chart-wrap{padding:16px 24px 20px}.chart-area{height:170px;display:flex;align-items:flex-end;gap:12px;border-bottom:1px solid var(--line);background:repeating-linear-gradient(to top,transparent 0px,transparent 41px,#f0f3f7 42px,#f0f3f7 43px);position:relative}.bar-group{flex:1;align-self:stretch;display:flex;align-items:center;justify-content:flex-end;flex-direction:column;position:relative}.bar{width:36px;max-width:80%;min-height:3px;border-radius:5px 5px 0 0;background:#d4e2ff;position:relative}.bar-group:last-child .bar{background:var(--blue)}.bar-group:hover .bar{background:#76a4fb}.bar-tooltip{position:absolute;bottom:calc(100% + 5px);background:var(--ink);color:white;font-size:9px;padding:5px;border-radius:4px;white-space:nowrap;opacity:0;pointer-events:none}.bar:hover .bar-tooltip{opacity:1}.chart-labels{display:flex;margin-top:12px;color:#95a1b4;font-size:10px;gap:12px}.chart-labels span{flex:1;text-align:center}.quick-card{background:linear-gradient(130deg,#f5f8ff,#fbfdff);border-color:#e2eafc;padding:24px;display:flex;flex-direction:column}.quick-card .icon-bubble{background:#eaf1ff;border:1px solid #dbe6ff;width:48px;height:48px;border-radius:15px;display:grid;place-items:center;color:var(--blue);margin-bottom:17px}.quick-card h2{font-size:20px;line-height:1.35;max-width:190px}.quick-card p{font-size:12px;color:#7d8da9;margin:9px 0 18px;max-width:250px}.quick-card .btn{margin-top:auto;width:fit-content}.workflow-mini{display:flex;align-items:center;gap:7px;color:#94a4bd;font-size:10px;margin-bottom:24px}.workflow-mini i{height:1px;flex:1;background:#d6e0f4}.activity-list{display:grid}.activity-row{display:flex;align-items:center;gap:12px;padding:15px 22px;border-bottom:1px solid #f1f3f7}.activity-row:last-child{border:0}.activity-row .activity-icon{width:34px;height:34px;border-radius:11px;background:#f5f8fc;color:#738bac;display:grid;place-items:center;flex-shrink:0}.activity-row strong{font-size:11px;font-weight:570}.activity-row p{font-size:10px;color:#95a0b3;margin-top:2px}.activity-row time{font-size:9px;color:#9da7b8;white-space:nowrap;margin-left:auto}.table-scroll{overflow:auto;max-width:100%}table{border-collapse:collapse;width:100%;font-size:12px;white-space:nowrap}thead{background:#fafbfd}th{text-align:left;font-size:9px;letter-spacing:.7px;text-transform:uppercase;font-weight:600;color:#919cb0;padding:13px 21px;border-bottom:1px solid var(--line)}td{padding:16px 21px;border-bottom:1px solid #f0f3f7;vertical-align:middle}tr:last-child td{border-bottom:0}tbody tr:hover{background:#fbfcff}td .sub{display:block;color:#9aa4b4;font-size:10px;margin-top:4px}td .strong{font-weight:600}.table-toolbar{padding:17px 21px;display:flex;align-items:center;justify-content:space-between;gap:14px}.search-field{display:flex;gap:9px;align-items:center;border:1px solid var(--line);border-radius:9px;padding:9px 12px;color:#98a5b8;background:#fff;max-width:320px;width:100%}.search-field input{border:0;background:none;outline:none;color:var(--ink);font-size:11px;width:100%;min-width:0}.tabs{display:flex;gap:5px;align-items:center}.tab{font-size:10px;font-weight:550;padding:8px 12px;color:#8996ac;border:1px solid transparent;background:transparent;border-radius:7px;white-space:nowrap}.tab.active{color:var(--blue);background:#edf3ff}.tabs.line{border-bottom:1px solid var(--line);gap:23px;padding:0 24px;overflow:auto}.tabs.line .tab{font-size:12px;background:none;border-radius:0;padding:16px 0;border:0;border-bottom:2px solid transparent}.tabs.line .tab.active{border-color:var(--blue);font-weight:650}.pagination{display:flex;align-items:center;justify-content:space-between;padding:13px 21px;border-top:1px solid var(--line);font-size:10px;color:#96a0b1}.pagination .btn{padding:5px 9px;min-height:29px;font-size:10px}.detail-grid{display:grid;grid-template-columns:1.7fr 1fr;gap:22px}.detail-title{padding:27px;display:flex;align-items:center;gap:18px}.detail-title h2{font-size:23px}.detail-title p{font-size:11px;color:var(--muted);margin-top:6px}.definition{display:grid;gap:0}.definition .def{padding:13px 0;border-bottom:1px solid #f0f3f8;display:flex;align-items:center;justify-content:space-between;gap:15px;font-size:12px}.definition .def:last-child{border:0}.def .label{color:#8a98ad;font-size:11px}.def .value{text-align:right;font-weight:550;overflow-wrap:anywhere}.mini-phone{width:42px;height:66px;background:#edf2fa;border:2px solid #7389aa;border-radius:8px;position:relative;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#476593}.mini-phone:before{content:"";position:absolute;top:4px;height:2px;width:12px;background:#7189a9;border-radius:2px;left:50%;transform:translateX(-50%)}.mini-phone.large{width:65px;height:100px;border-radius:12px;border-color:#435e87;background:linear-gradient(150deg,#e9f1ff,#fbfdff)}.mini-phone.small{width:27px;height:41px;border-radius:5px}.payment-card{display:grid;grid-template-columns:1fr 1fr;gap:15px;padding:20px 24px}.payment-card>div{padding:16px;background:#f7f9fc;border-radius:11px}.payment-card strong{display:block;font-size:21px;margin-top:6px;font-weight:600;letter-spacing:-.5px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.field{display:flex;flex-direction:column;gap:7px}.field.span-2{grid-column:span 2}.field>label{font-size:11px;font-weight:600;color:#4f617e}.field input,.field select,.field textarea,.filter-input{border:1px solid #dfe6f0;border-radius:9px;background:#fff;padding:11px 12px;color:var(--ink);outline:none;width:100%;min-height:42px;font-size:12px;transition:border .15s}.field input:focus,.field textarea:focus,.field select:focus{border-color:#75a4ff;box-shadow:0 0 0 3px #edf3ff}.field input[readonly]{background:#f8fafc;color:#7c8ca5}.field small{font-size:10px;line-height:1.5;color:#95a0b1}.field textarea{min-height:84px;resize:vertical}.field input::placeholder{color:#a4b0c2}.password-field{position:relative}.password-field input{padding-right:45px}.password-toggle{position:absolute;right:3px;top:3px;width:35px;height:35px;border:0;background:none;color:#8b99ae;display:grid;place-items:center}.check-label{display:flex;gap:9px;align-items:flex-start;font-size:11px;color:#7b8aa1;line-height:1.6}.check-label input{width:15px;height:15px;accent-color:var(--blue);margin:2px 0 0;flex-shrink:0}.form-footer{margin-top:25px;display:flex;gap:10px;justify-content:flex-end}.error-box{display:none;margin-top:14px;background:#fff2f3;color:#b13e4d;padding:12px;border-radius:9px;font-size:12px;line-height:1.5}.error-box.visible{display:block}.inline-success{color:var(--green);padding:12px;font-size:12px}.stepper{display:flex;align-items:center;justify-content:center;gap:0;margin-bottom:28px}.step{display:flex;gap:8px;align-items:center;font-size:11px;color:#9aa6b9}.step span{width:26px;height:26px;border-radius:50%;border:1px solid #dfe6f1;display:grid;place-items:center;font-size:10px}.step.active{color:var(--blue);font-weight:600}.step.active span{background:var(--blue);border-color:var(--blue);color:white}.step.done span{background:#eaf6f0;color:var(--green);border-color:#d3ebdf}.step-line{width:45px;height:1px;background:#e3e9f3;margin:0 15px}.wizard-card{max-width:820px;margin:auto}.wizard-card .card-body{padding:30px}.wizard-heading{margin-bottom:22px}.wizard-heading p{font-size:12px;color:var(--muted);margin-top:7px}.wizard-sum{padding:20px;background:#f8faff;border:1px solid #e5edf9;border-radius:12px;margin-top:22px}.wizard-sum .total{padding-top:12px;margin-top:12px;border-top:1px solid #e0e8f7;font-size:16px;font-weight:650}.qr-box{padding:20px;background:#fff;border:1px solid var(--line);border-radius:14px;width:min(300px,100%);margin:18px auto}.qr-box svg{width:100%;display:block}.summary-success{text-align:center;padding:25px}.success-ring{width:65px;height:65px;background:#eef8f3;color:#248764;border-radius:50%;display:grid;place-items:center;margin:0 auto 18px}.summary-success h2{font-size:24px;margin-bottom:10px}.summary-success p{font-size:12px;color:var(--muted);max-width:400px;margin:auto}.plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.plan-card{padding:26px}.plan-card:nth-child(2){border-color:#b7cdfc;background:#fcfdff}.plan-price{font-size:26px;letter-spacing:-1px;font-weight:650;margin:22px 0 5px}.plan-features{display:grid;gap:13px;font-size:11px;color:#7d8ca3;margin:22px 0}.plan-features div{display:flex;align-items:center;gap:10px}.plan-features svg{color:var(--blue)}.integration-row{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:18px 0;border-bottom:1px solid var(--line)}.integration-row:last-child{border:0}.integration-row .name{font-size:12px;font-weight:580}.integration-row p{font-size:10px;color:#8e9bb0;margin-top:5px}.profile-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:22px}.modal-shade{position:fixed;inset:0;z-index:100;background:#101e3e55;backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:24px}.modal{max-width:580px;width:100%;max-height:calc(100dvh - 48px);background:#fff;border-radius:18px;box-shadow:0 25px 100px #13274736;overflow:auto;animation:appear .15s ease}.modal.wide{max-width:800px}.modal-header{padding:22px 25px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}.modal-body{padding:25px}.modal-header p{font-size:11px;color:var(--muted);margin-top:5px}.toast{position:fixed;bottom:30px;right:30px;max-width:390px;background:#142949;color:#fff;box-shadow:var(--shadow);padding:15px 20px;border-radius:12px;font-size:12px;z-index:150;display:flex;gap:10px;align-items:center;animation:appear .2s ease}.toast.error{background:#a74754}.auth{min-height:100dvh;background:#fff;display:grid;grid-template-columns:1fr 1fr}.auth-visual{background:#f2f6fc;padding:44px 52px;display:flex;flex-direction:column;position:relative;overflow:hidden}.auth-visual .brand{position:relative;z-index:1}.auth-story{max-width:425px;margin:auto 0;padding:55px 0}.auth-story .eyebrow{color:#7f96b9}.auth-story h1{font-size:46px;line-height:1.13;letter-spacing:-2px;margin:18px 0}.auth-story>p{font-size:14px;color:#8797b0;max-width:355px;line-height:1.8}.auth-system{margin-top:36px;border:1px solid #dde6f4;border-radius:14px;background:#ffffffa6;padding:22px}.auth-system .steps-row{display:flex;justify-content:space-between;align-items:center}.auth-system .step-box{display:grid;justify-items:center;gap:9px;font-size:10px;color:#7e92b1}.auth-system .step-box i{display:grid;place-items:center;width:43px;height:43px;background:#eef4ff;color:var(--blue);border-radius:12px;font-style:normal}.auth-system .step-join{height:1px;width:25px;background:#c9d9f0;margin-top:-20px}.auth-visual footer{font-size:10px;letter-spacing:.3px;color:#8d9db4}.auth-main{padding:45px;display:flex;align-items:center;justify-content:center;position:relative}.auth-box{max-width:380px;width:100%}.auth-box .brand{display:none}.auth-box h2{font-size:29px;letter-spacing:-1px;margin-bottom:9px}.auth-box .auth-sub{font-size:12px;color:#8895aa;margin-bottom:28px}.auth-box .field{margin-bottom:18px}.auth-box .form-grid{gap:14px}.auth-box .form-grid .field{margin-bottom:0}.auth-links{display:flex;align-items:center;justify-content:space-between;margin:10px 0 22px;font-size:11px}.auth-footer{text-align:center;font-size:11px;color:#94a0b2;margin-top:24px;line-height:1.8}.auth-footer a{font-weight:600}.auth-security{border-top:1px solid var(--line);padding-top:22px;margin-top:35px;text-align:center;font-size:10px;color:#a1abbb;display:flex;justify-content:center;align-items:center;gap:7px}.setup-label{margin:0 0 22px;background:#f7f9fd;padding:13px;border-radius:10px;font-size:11px;color:#798ba7;line-height:1.8}.footer-meta{display:flex;justify-content:space-between;color:#a1acbd;font-size:9px;padding-top:30px;margin-top:10px}.mobile-nav{display:none}.mobile-backdrop{display:none}.page-error{max-width:600px;margin:60px auto}.mobile-only{display:none}.return-link{display:inline-flex;align-items:center;gap:7px;font-size:11px;color:#8293ae;margin-bottom:17px}.scroll-break{overflow-wrap:anywhere}.muted-list{display:grid;gap:12px;margin:18px 0;color:#8998af;font-size:11px}.muted-list div{display:flex;gap:10px;align-items:center}.no-margin{margin:0}.mt{margin-top:22px}.mb{margin-bottom:20px}.help-text{font-size:12px;color:#8090a9;line-height:1.8}.help-text h3{color:var(--ink);margin:22px 0 10px}.filter-row{display:flex;gap:10px;align-items:center}.filter-input{max-width:143px;min-height:35px;padding:7px 9px;font-size:11px}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:20px}.code-box{padding:15px;background:#f5f7fb;border:1px solid var(--line);border-radius:9px;font:11px/1.8 ui-monospace,monospace;word-break:break-all;white-space:pre-wrap;color:#657996}.header-pill{border-left:1px solid var(--line);padding-left:13px}.result-note{font-size:10px;color:#7d8fa8;padding:10px 0}.skeleton{height:14px;border-radius:4px;background:#eef2f7;animation:pulse 1s ease infinite alternate}@keyframes pulse{to{opacity:.45}}
@media(min-width:1550px){.main{margin-right:auto;padding:40px 48px}.topbar{padding:0 48px}.stat{padding:25px}.dashboard-grid{gap:25px}.chart-area{height:205px}}
@media(max-width:1100px){.sidebar{width:210px}.topbar,.main{margin-left:210px}.main{padding:28px 24px}.topbar{padding:0 24px}.stat-grid{gap:12px}.stat{padding:17px}.stat-number{font-size:24px}.stat-number.currency{font-size:20px}.dashboard-grid{grid-template-columns:1.4fr 1fr}.search-global{display:none}.detail-grid{grid-template-columns:1.35fr 1fr}.plan-grid{gap:13px}.plan-card{padding:20px}.auth-visual{padding:35px}.auth-story h1{font-size:39px}}
@media(max-width:900px){.sidebar{width:205px}.main,.topbar{margin-left:205px}.stat-grid{grid-template-columns:repeat(2,1fr)}.dashboard-grid,.detail-grid,.profile-grid{grid-template-columns:1fr}.quick-card{display:none}.plan-grid{grid-template-columns:1fr}.plan-card .plan-price{margin-top:16px}.heading-actions .date-chip{display:none}.table-toolbar{flex-wrap:wrap}.card-body{padding:20px}.auth-visual{padding:30px}.auth-story h1{font-size:34px}.auth-main{padding:30px}.page-heading{align-items:center}h1{font-size:26px}}
@media(max-width:700px){:root{font-size:14px}body{background:#f8fafd}.sidebar{transform:translateX(-100%);width:260px;transition:transform .2s}.sidebar.open{transform:none;box-shadow:0 0 50px #0c193633}.sidebar.open~.mobile-backdrop{display:block;position:fixed;inset:0;z-index:35;background:#16284360}.main{margin:0;padding:23px 18px 105px}.topbar{margin:0;height:65px;padding:0 18px;position:sticky}.breadcrumbs{display:none}.mobile-menu{display:flex;border:0;background:none}.top-actions{gap:10px}.topbar-brand{display:flex!important}.topbar-brand img{width:30px;height:30px}.topbar-brand strong{font-size:15px}.topbar-brand span{display:none}.workspace-select{max-width:110px;font-size:10px;padding:6px}.header-pill{display:none}.topbar .icon-btn{width:33px;height:33px;border:0}.mobile-nav{position:fixed;bottom:0;left:0;right:0;background:#ffffffee;backdrop-filter:blur(12px);border-top:1px solid #e4eaf3;display:flex;justify-content:space-around;padding:11px 8px calc(11px + env(safe-area-inset-bottom));z-index:30}.mobile-nav a{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:9px;color:#909fb6;flex:1}.mobile-nav a.active{color:var(--blue);font-weight:650}.mobile-nav a svg{width:20px;height:20px}.mobile-only{display:initial}.desktop-only{display:none!important}.page-heading{margin-bottom:21px;align-items:flex-start;gap:10px}.page-heading h1{font-size:26px}.page-heading .eyebrow{font-size:8px;letter-spacing:1.5px;margin-bottom:7px}.page-heading p{font-size:11px;max-width:235px}.heading-actions .btn{font-size:0;padding:11px;width:40px;height:40px;min-height:40px}.heading-actions .btn svg{width:18px;height:18px}.stat-grid{gap:11px;margin-bottom:20px}.stat{padding:16px;border-radius:14px}.stat-number{font-size:28px;margin:13px 0 7px}.stat-number.currency{font-size:21px}.stat-top{font-size:10px}.stat .stat-icon{width:29px;height:29px;border-radius:9px}.stat .stat-icon svg{width:16px}.stat-note{font-size:9px;line-height:1.4}.dashboard-grid{gap:19px}.card-head{padding:18px}.card-head h2{font-size:15px}.card-head .small{font-size:10px}.card.padded{padding:20px}.card-body{padding:19px}.chart-wrap{padding:15px 18px 18px}.chart-total{padding:0 18px}.chart-total strong{font-size:25px}.chart-area{height:160px}.chart-card .card-head{padding:18px}.quick-mobile{padding:17px 18px;display:flex;gap:13px;align-items:center;border-radius:13px;background:#edf3ff;border:1px solid #dfe9ff;color:var(--blue);margin-bottom:21px}.quick-mobile strong{font-size:12px}.quick-mobile p{font-size:10px;color:#7994be;margin-top:3px}.quick-mobile>svg:last-child{margin-left:auto}.activity-row{padding:13px 18px}.activity-row time{font-size:8px}.table-toolbar{padding:15px;gap:11px}.search-field{max-width:none}.tabs{gap:4px}.tab{font-size:10px;padding:7px 11px}.tabs.line{padding:0 18px;gap:24px}.tabs.line .tab{font-size:11px}.table-scroll table{font-size:11px}td{padding:14px 16px}th{padding:11px 16px;font-size:8px}.form-grid{grid-template-columns:1fr}.field.span-2{grid-column:auto}.form-grid.keep-two{grid-template-columns:1fr 1fr}.field input,.field select,.field textarea{font-size:16px;min-height:46px}.field input::placeholder{font-size:12px}.field>label{font-size:11px}.field .password-field input{font-size:16px}.password-toggle{top:5px}.detail-title{padding:21px;gap:16px}.detail-title h2{font-size:21px}.detail-title .mini-phone.large{width:54px;height:84px}.payment-card{padding:17px;gap:10px}.payment-card>div{padding:13px}.payment-card strong{font-size:20px}.detail-grid{gap:19px}.modal-shade{padding:15px;align-items:center}.modal{max-height:calc(100dvh - 30px);border-radius:16px}.modal-body{padding:20px}.modal-header{padding:18px 20px}.modal-header h2{font-size:17px}.modal .btn{min-height:44px}.toast{bottom:88px;left:18px;right:18px;max-width:none;font-size:12px;padding:15px}.demo-banner{font-size:10px;padding:11px 13px;line-height:1.5;margin-bottom:20px}.auth{display:flex;flex-direction:column;min-height:100dvh;background:#fff}.auth-visual{display:none}.auth-main{padding:40px 26px;min-height:100dvh;align-items:center}.auth-box{max-width:420px}.auth-box .brand{display:flex;margin-bottom:34px;justify-content:flex-start}.auth-box .brand img{width:46px;height:46px}.auth-box .brand strong{font-size:20px}.auth-box .brand span{font-size:11px}.auth-box h2{font-size:28px}.auth-box .auth-sub{font-size:13px;line-height:1.7}.auth-box .btn.big{min-height:49px}.auth-security{font-size:10px}.stepper{margin-bottom:24px;gap:0}.step{font-size:9px;gap:6px;flex-direction:column}.step span{width:27px;height:27px}.step-line{width:35px;margin:0 12px;align-self:flex-start;margin-top:13px}.wizard-card .card-body{padding:21px}.wizard-sum{padding:16px}.two-col{grid-template-columns:1fr}.footer-meta{font-size:8px;margin-top:7px;padding-top:22px}.page-error{margin:35px auto}.plan-card{padding:24px}.filter-row{width:100%;gap:8px}.filter-input{width:100%;max-width:none;min-width:0;font-size:11px}.callout{font-size:11px;padding:13px}.top-actions .workspace-select{max-width:104px}.form-footer{flex-wrap:wrap}.form-footer .btn{flex:1}.scroll-break{font-size:10px}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition:none!important}}
@media print{.sidebar,.topbar,.mobile-nav,.heading-actions,.btn,.demo-banner,.footer-meta{display:none!important}.main{margin:0;padding:0}body{background:white}.card{break-inside:avoid;box-shadow:none}.page{animation:none}}

@media(max-width:700px){.quick-mobile.mobile-only{display:flex}.header-pill{display:none}}

.btn svg{flex-shrink:0}
@media(max-width:700px){.heading-actions .btn{gap:0}}

/* v13 Super Admin premium workspace */
body[data-route="/admin"] .main{
  background:
    linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px),
    #080d28;
  background-size:40px 40px;
  color:#f8fafc;
}
body[data-route="/admin"] .main .page-head h1,
body[data-route="/admin"] .main h2,
body[data-route="/admin"] .main strong{color:#f8fafc}
body[data-route="/admin"] .main .muted,
body[data-route="/admin"] .main .small,
body[data-route="/admin"] .main .sub,
body[data-route="/admin"] .main .stat-note{color:#9aa8c0!important}
body[data-route="/admin"] .main .card{
  background:rgba(14,22,55,.92);
  border-color:#26345a;
  box-shadow:0 18px 55px rgba(0,0,0,.16);
}
body[data-route="/admin"] .main .stat-icon{background:#162753;color:#7ea7ff}
body[data-route="/admin"] .main table th{color:#8fa0bd;border-color:#26345a}
body[data-route="/admin"] .main table td{color:#dce4f2;border-color:#1e2a49}
body[data-route="/admin"] .main .btn.secondary{border-color:#38538d;color:#dce7ff;background:#101c3c}
body[data-route="/admin"] .main .badge{box-shadow:none}
body[data-route="/admin"] .main code{color:#a8c3ff}

/* v14 — unified Vozua Device premium dark console */
body:has(.layout){background:#080d28;color:#eef3ff}
.layout{background:#080d28;min-height:100vh}
.layout .sidebar{background:#070b22;border-color:#202c4c;color:#dce5f5}
.layout .sidebar>.brand{color:#fff}
.layout .sidebar .brand span,.layout .nav-caption,.layout .muted{color:#8998b3}
.layout .nav-item{color:#9dabc1}
.layout .nav-item:hover{background:#101a3d;color:#fff}
.layout .nav-item.active{background:#17316c;color:#fff;box-shadow:inset 3px 0 #4a84ff}
.layout .workspace-card{background:#0d1635;border-color:#273559;color:#dce5f5}
.layout .sidebar-bottom{border-color:#202c4c}
.layout .topbar{background:rgba(8,13,40,.94);backdrop-filter:blur(16px);border-color:#202c4c;color:#dce5f5}
.layout .breadcrumbs,.layout .breadcrumbs b{color:#91a0b8}
.layout .search-global{background:#0e1737;border-color:#28365a;color:#8494af}
.layout .search-global input{color:#f7f9ff}
.layout .workspace-select{background:#0e1737;border-color:#28365a;color:#d9e3f3}
.layout .main{
 background:
  linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
  linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px),
  #080d28;
 background-size:40px 40px;
 min-height:calc(100vh - 76px);
 color:#f5f8ff;
 max-width:none;
}
.layout .page-heading h1,.layout .page-heading h2,.layout h1,.layout h2,.layout h3,.layout strong{color:#f8fafc}
.layout .page-heading p,.layout .small,.layout .sub,.layout .stat-note,.layout .help-text{color:#93a1b8!important}
.layout .card{background:rgba(14,22,55,.94);border-color:#26345a;box-shadow:0 18px 55px rgba(0,0,0,.14)}
.layout .card-head,.layout .card-foot,.layout .divider{border-color:#26345a}
.layout .stat .stat-icon{background:#162753;border-color:#2a4275;color:#7ea7ff}
.layout .btn.secondary{background:#101c3c;border-color:#38538d;color:#e2eaff}
.layout .btn.ghost{color:#99a8bf}.layout .btn.ghost:hover{background:#101a3d;color:#fff}
.layout .date-chip,.layout .tabs,.layout .filter-input,.layout .search-field input{
 background:#0e1737!important;border-color:#28365a!important;color:#e5ecf8!important
}
.layout table th{color:#8fa0bd;border-color:#26345a;background:#0b1330}
.layout table td{color:#dce4f2;border-color:#1e2a49}
.layout table tr:hover td{background:#101a3a}
.layout .activity-row,.layout .integration-row{border-color:#26345a}
.layout .empty-icon,.layout .avatar{background:#15244d;color:#8db0ff}
.layout .callout{background:#101d40;border-color:#2c4270;color:#b7c8e6}
.layout .callout strong{color:#e8efff}
.layout .demo-banner{background:#2a210e;border-color:#5d4720;color:#eac77e}
.layout .chart-area{border-color:#26345a;background:repeating-linear-gradient(to top,transparent 0,transparent 41px,#1c2948 42px,#1c2948 43px)}
.layout .bar{background:#31528a}.layout .bar-group:last-child .bar{background:#2563eb}
.layout .table-toolbar{border-color:#26345a}
.layout .code-box{background:#09122d;border-color:#26345a;color:#a9c0eb}
.layout .badge{background:#17213d;color:#a5b2c7}
.layout .badge.green{background:#10352d;color:#6ed9b1}.layout .badge.red{background:#401b25;color:#ff9ba6}.layout .badge.amber{background:#3c2c13;color:#e8bb6b}.layout .badge.blue{background:#172d63;color:#8ab0ff}
.layout .mobile-nav{background:rgba(7,11,34,.96);border-color:#26345a}
.layout .mobile-nav a{color:#8e9cb3}.layout .mobile-nav a.active{color:#75a7ff}
.layout .field input,.layout .field select,.layout .field textarea{background:#0b1430;border-color:#2b3a60;color:#f5f7ff}
.layout .field input::placeholder,.layout .field textarea::placeholder{color:#73819b}
.layout .modal{background:#0d1635;color:#f6f8ff;border:1px solid #2a385b}
.layout .modal-header{border-color:#2a385b}.layout .modal-header p{color:#93a1b8}
.layout .modal .field input,.layout .modal .field select,.layout .modal .field textarea{background:#09122d;border-color:#2c3c62;color:#f5f7ff}
.layout .icon-btn{background:#0e1737;border-color:#28365a;color:#aebbd0}
.layout .icon-btn:hover{background:#16244d;color:#fff}
.layout .page-heading .eyebrow{color:#6f9dff}
.layout .stat-number{color:#fff}
body[data-route="/admin"] .main{padding-top:40px}
body[data-route="/admin"] .page-heading{padding:26px 28px;border:1px solid #26345a;border-radius:20px;background:linear-gradient(135deg,#0d1635,#101d45);margin-bottom:24px}
body[data-route="/admin"] .page-heading h1{font-size:38px;letter-spacing:-1.5px}
.payment-wait{text-align:center;display:grid;justify-items:center;gap:16px}
.payment-ring{width:86px;height:86px;border-radius:50%;display:grid;place-items:center;background:#edf3ff;border:1px solid #dbe7ff}
.payment-ring .loader{width:34px;height:34px;border-width:3px}
.payment-amount{font-size:34px;font-weight:800;letter-spacing:-1.2px;color:#0b1731}
.payment-countdown{font-size:13px;color:#61718c}.payment-countdown span{font-size:24px;font-weight:800;color:#1559e6}
@media(max-width:700px){
 body:has(.layout){background:#080d28}
 .layout .main{padding-top:24px}
 .layout .topbar-brand{color:#fff}
 .layout .sidebar{background:#070b22}
 body[data-route="/admin"] .page-heading{padding:20px;border-radius:16px}
 body[data-route="/admin"] .page-heading h1{font-size:30px}
}

/* v15 — premium balanced dashboard: light workspace + navy navigation */
body:has(.layout){background:#f4f7fb;color:#101828}
.layout{background:#f4f7fb;min-height:100vh}
.layout .sidebar{
  background:#08112b!important;
  border-right:1px solid #1d2d52!important;
  color:#dfe7f5!important;
  box-shadow:18px 0 50px rgba(7,17,43,.08)
}
.layout .sidebar>.brand{color:#fff!important}
.layout .sidebar .brand span,.layout .nav-caption,.layout .sidebar .muted{color:#8392ad!important}
.layout .nav-item{color:#aeb9cc!important;border-radius:12px;margin:3px 10px;padding:11px 12px}
.layout .nav-item:hover{background:#101c3e!important;color:#fff!important}
.layout .nav-item.active{
  background:linear-gradient(90deg,#17366f,#123065)!important;
  color:#fff!important;
  box-shadow:inset 3px 0 #5b8cff,0 8px 22px rgba(20,57,120,.22)
}
.layout .workspace-card{background:#0d1936!important;border:1px solid #26395f!important;color:#e9effa!important;border-radius:14px}
.layout .sidebar-bottom{border-color:#203153!important}

.layout .topbar{
  background:rgba(255,255,255,.94)!important;
  color:#182230!important;
  border-bottom:1px solid #e3e9f1!important;
  backdrop-filter:blur(18px);
  box-shadow:0 8px 26px rgba(16,24,40,.04)
}
.layout .breadcrumbs,.layout .breadcrumbs b{color:#667085!important}
.layout .search-global,.layout .workspace-select{
  background:#f8fafc!important;
  border:1px solid #dbe3ee!important;
  color:#344054!important;
  border-radius:12px
}
.layout .search-global input{color:#111827!important}
.layout .topbar .icon-btn{background:#fff!important;border-color:#dce4ef!important;color:#475467!important}

.layout .main{
  background:
    linear-gradient(rgba(15,23,42,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(15,23,42,.025) 1px,transparent 1px),
    #f7f9fc!important;
  background-size:40px 40px!important;
  color:#101828!important;
  min-height:calc(100vh - 76px);
  max-width:none!important;
  padding:34px 36px 54px!important
}
.layout .page-heading{
  position:relative;
  padding:0 0 26px!important;
  margin-bottom:22px!important;
  border:0!important;
  background:transparent!important
}
.layout .page-heading:before{
  content:"";position:absolute;left:0;bottom:0;width:70px;height:3px;border-radius:3px;background:#2563eb
}
.layout .page-heading h1,.layout .page-heading h2,.layout h1,.layout h2,.layout h3,.layout strong{color:#101828!important}
.layout .page-heading h1{font-size:clamp(30px,3vw,42px)!important;letter-spacing:-1.6px!important}
.layout .page-heading p,.layout .small,.layout .sub,.layout .stat-note,.layout .help-text,.layout .muted{color:#667085!important}

.layout .card{
  background:rgba(255,255,255,.96)!important;
  border:1px solid #e1e7ef!important;
  border-radius:18px!important;
  box-shadow:0 12px 34px rgba(16,24,40,.055)!important;
  color:#101828!important
}
.layout .card:hover{box-shadow:0 18px 44px rgba(16,24,40,.075)!important}
.layout .card-head,.layout .card-foot,.layout .divider{border-color:#e8edf3!important}
.layout .stat{
  position:relative;overflow:hidden
}
.layout .stat:after{
  content:"";position:absolute;right:-34px;top:-34px;width:100px;height:100px;border-radius:50%;
  background:radial-gradient(circle,rgba(37,99,235,.09),transparent 68%)
}
.layout .stat .stat-icon{background:#edf4ff!important;border:1px solid #d9e8ff!important;color:#2563eb!important}
.layout .stat-number{color:#101828!important}
.layout .btn{border-radius:11px!important}
.layout .btn:not(.secondary):not(.ghost){box-shadow:0 7px 18px rgba(37,99,235,.18)}
.layout .btn.secondary{background:#fff!important;border-color:#ced8e7!important;color:#344054!important}
.layout .btn.secondary:hover{border-color:#9db2d0!important;background:#f7faff!important}
.layout .btn.ghost{color:#475467!important}.layout .btn.ghost:hover{background:#eef3f8!important;color:#101828!important}

.layout .date-chip,.layout .tabs,.layout .filter-input,.layout .search-field input{
  background:#fff!important;border-color:#dce4ed!important;color:#344054!important
}
.layout table{background:#fff!important}
.layout table th{color:#667085!important;border-color:#e7ecf2!important;background:#f8fafc!important}
.layout table td{color:#344054!important;border-color:#edf1f5!important;background:#fff!important}
.layout table tr:hover td{background:#f8fbff!important}
.layout .activity-row,.layout .integration-row{border-color:#e7ecf2!important}
.layout .empty-icon,.layout .avatar{background:#eef4ff!important;color:#2563eb!important}
.layout .callout{background:#eef5ff!important;border-color:#d7e8ff!important;color:#3d4f6b!important}
.layout .callout strong{color:#0f2d61!important}
.layout .demo-banner{background:#fff7df!important;border-color:#efdca3!important;color:#7a5a12!important}
.layout .chart-area{
  border-color:#e7ecf2!important;
  background:repeating-linear-gradient(to top,transparent 0,transparent 41px,#eef2f6 42px,#eef2f6 43px)!important
}
.layout .bar{background:#aac4eb!important}.layout .bar-group:last-child .bar{background:#2563eb!important}
.layout .table-toolbar{border-color:#e7ecf2!important}
.layout .code-box{background:#0d1733!important;border-color:#25385e!important;color:#d8e6ff!important}
.layout .badge{background:#eef1f5!important;color:#556070!important}
.layout .badge.green{background:#e8f8f1!important;color:#087a53!important}
.layout .badge.red{background:#fff0f1!important;color:#b42332!important}
.layout .badge.amber{background:#fff6e5!important;color:#9a6500!important}
.layout .badge.blue{background:#edf4ff!important;color:#1559d6!important}
.layout .field input,.layout .field select,.layout .field textarea{
  background:#fff!important;border-color:#d5dde8!important;color:#101828!important
}
.layout .field input:focus,.layout .field select:focus,.layout .field textarea:focus{
  border-color:#6e9cff!important;box-shadow:0 0 0 3px rgba(37,99,235,.09)!important
}
.layout .modal{
  background:#fff!important;color:#101828!important;border:1px solid #e0e6ee!important;
  border-radius:20px!important;box-shadow:0 30px 90px rgba(16,24,40,.25)!important
}
.layout .modal-header{border-color:#e6ebf1!important}.layout .modal-header p{color:#667085!important}
.layout .mobile-nav{background:rgba(255,255,255,.97)!important;border-color:#dfe6ef!important;box-shadow:0 -10px 30px rgba(16,24,40,.08)!important}
.layout .mobile-nav a{color:#697586!important}.layout .mobile-nav a.active{color:#2563eb!important}
body[data-route="/admin"] .main,
body[data-route="/dashboard"] .main{padding-top:36px!important}
body[data-route="/admin"] .page-heading{
  padding:28px 30px!important;
  border:1px solid #dfe6ef!important;
  border-radius:20px!important;
  background:linear-gradient(135deg,#ffffff 0%,#f7faff 100%)!important;
  box-shadow:0 12px 34px rgba(16,24,40,.05)!important
}
body[data-route="/admin"] .page-heading:before{left:30px;bottom:0}
.payment-wait{text-align:center;display:grid;justify-items:center;gap:16px}
.payment-ring{width:86px;height:86px;border-radius:50%;display:grid;place-items:center;background:#edf3ff;border:1px solid #dbe7ff}
.payment-ring .loader{width:34px;height:34px;border-width:3px}
.payment-amount{font-size:34px;font-weight:800;letter-spacing:-1.2px;color:#0b1731}
.payment-countdown{font-size:13px;color:#61718c}.payment-countdown span{font-size:24px;font-weight:800;color:#1559e6}

@media(max-width:700px){
 .layout .main{padding:22px 16px 90px!important}
 .layout .topbar-brand{color:#101828!important}
 body[data-route="/admin"] .page-heading{padding:20px!important}
 body[data-route="/admin"] .page-heading:before{left:20px}
 .layout .card{border-radius:15px!important}
}

/* v19 smart device registration */
.smart-device-top{display:grid;grid-template-columns:1fr 1.35fr;gap:14px}.scan-card,.smart-search-card{border:1px solid #dfe6ef;border-radius:16px;padding:18px;background:linear-gradient(180deg,#fff,#f8fbff)}.scan-card{display:grid;grid-template-columns:auto 1fr;gap:13px;align-items:start}.scan-card .btn{grid-column:1/-1}.scan-icon{width:48px;height:48px;border-radius:13px;background:#edf4ff;color:#2563eb;display:grid;place-items:center;font-size:25px}.scan-card p{margin:4px 0 0;color:#667085;font-size:12px}.smart-search-card label{display:block;font-size:12px;font-weight:800;margin-bottom:7px}.device-search-wrap{position:relative}.device-search-wrap input{width:100%;padding:14px 15px;border:1px solid #d5dde8;border-radius:11px;font:inherit;outline:none}.device-search-wrap input:focus{border-color:#6f9cff;box-shadow:0 0 0 3px rgba(37,99,235,.08)}.device-suggestions{display:none;position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:80;background:#fff;border:1px solid #dce3ed;border-radius:13px;box-shadow:0 20px 50px rgba(16,24,40,.16);max-height:310px;overflow:auto;padding:5px}.device-suggestions.open{display:block}.device-suggestion{width:100%;border:0;background:#fff;border-radius:9px;padding:11px 12px;text-align:left;cursor:pointer;display:flex;justify-content:space-between;gap:15px;align-items:center}.device-suggestion:hover{background:#f0f5ff}.device-suggestion strong{font-size:13px;color:#101828}.device-suggestion span{font-size:11px;color:#7b8798}.device-suggestion.custom{background:#f8fafc}.scanner-overlay{position:fixed;inset:0;z-index:9999;background:#050817;color:#fff;padding:18px;display:flex;flex-direction:column}.scanner-head{display:flex;justify-content:space-between;align-items:center;max-width:700px;width:100%;margin:0 auto 14px}.scanner-frame{position:relative;overflow:hidden;border:1px solid #304875;border-radius:20px;max-width:700px;width:100%;height:min(65vh,620px);margin:auto;background:#000}.scanner-frame:after{content:"";position:absolute;left:8%;right:8%;top:50%;height:2px;background:#4e8cff;box-shadow:0 0 18px #4e8cff}.scanner-frame video{width:100%;height:100%;object-fit:cover}.scanner-overlay>p{max-width:700px;width:100%;margin:14px auto;text-align:center;color:#9cabc1}@media(max-width:700px){.smart-device-top{grid-template-columns:1fr}.device-suggestion{display:block}.device-suggestion span{display:block;margin-top:3px}.scanner-frame{height:62vh}}

/* VOZUA LIVE SIDEBAR v22 */
@media (max-width:1000px){

  .layout .sidebar{
    position:fixed!important;
    top:0!important;
    left:0!important;
    bottom:0!important;
    width:min(82vw,315px)!important;
    height:100dvh!important;
    max-height:100dvh!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
    padding:0!important;
    background:#08112b!important;
    box-shadow:24px 0 65px rgba(0,0,0,.32)!important;
  }

  .layout .sidebar > .brand{
    flex:0 0 auto!important;
    min-height:74px!important;
    padding:13px 15px!important;
    margin:0!important;
    display:flex!important;
    align-items:center!important;
    gap:10px!important;
    border-bottom:1px solid rgba(255,255,255,.08)!important;
  }

  .layout .sidebar > .brand img{
    width:40px!important;
    height:40px!important;
    min-width:40px!important;
    max-width:40px!important;
    object-fit:cover!important;
    border-radius:11px!important;
  }

  .layout .sidebar > .brand strong{
    color:#fff!important;
    font-size:16px!important;
    font-weight:800!important;
  }

  .layout .sidebar > .brand span{
    display:block!important;
    margin-top:2px!important;
    color:#8190aa!important;
    font-size:10px!important;
  }

  .layout .sidebar nav{
    flex:1 1 auto!important;
    min-height:0!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    padding:8px 9px 18px!important;
    margin:0!important;
    -webkit-overflow-scrolling:touch!important;
    scrollbar-width:none!important;
  }

  .layout .sidebar nav::-webkit-scrollbar{
    display:none!important;
  }

  .layout .nav-caption{
    margin:13px 9px 7px!important;
    font-size:9px!important;
    letter-spacing:.16em!important;
  }

  .layout .nav-item{
    min-height:42px!important;
    margin:2px 0!important;
    padding:0 11px!important;
    border-radius:10px!important;
    font-size:13px!important;
  }

  .layout .nav-item.active{
    background:linear-gradient(90deg,#173a7d,#153467)!important;
    color:#fff!important;
    box-shadow:inset 3px 0 #6291ff!important;
  }

  .layout .workspace-card{
    margin:14px 3px 5px!important;
    padding:12px!important;
    border-radius:12px!important;
  }

  .layout .workspace-card p{
    margin:5px 0 9px!important;
    font-size:10px!important;
  }

  .layout .sidebar-bottom{
    flex:0 0 auto!important;
    position:relative!important;
    margin:0!important;
    padding:10px 11px calc(10px + env(safe-area-inset-bottom))!important;
    background:#060d24!important;
    border-top:1px solid #213150!important;
    box-shadow:0 -10px 25px rgba(0,0,0,.14)!important;
    z-index:30!important;
  }

  .layout .sidebar-bottom .row{
    display:grid!important;
    grid-template-columns:38px minmax(0,1fr) 38px!important;
    align-items:center!important;
    gap:9px!important;
    width:100%!important;
  }

  .layout .sidebar-bottom .avatar{
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
    border-radius:10px!important;
  }

  .layout .sidebar-bottom .user-name{
    color:#fff!important;
    font-size:12px!important;
    font-weight:800!important;
    overflow:hidden!important;
    white-space:nowrap!important;
    text-overflow:ellipsis!important;
  }

  .layout .sidebar-bottom .tiny{
    color:#7887a2!important;
    font-size:9px!important;
  }

  .layout .sidebar-bottom [data-action="logout"]{
    width:38px!important;
    min-width:38px!important;
    height:38px!important;
    min-height:38px!important;
    margin:0!important;
    padding:0!important;
    display:grid!important;
    place-items:center!important;
    background:#101b38!important;
    border:1px solid #304364!important;
    color:#fff!important;
    border-radius:10px!important;
  }
}


/* IMEI SCANNER */
.scanner-overlay{
 position:fixed;
 inset:0;
 z-index:99999;
 background:rgba(5,9,25,.97);
 color:#fff;
 padding:18px;
 display:flex;
 flex-direction:column;
 align-items:center;
 overflow:auto
}
.scanner-head{
 width:min(680px,100%);
 display:flex;
 justify-content:space-between;
 align-items:center;
 gap:16px;
 margin:6px auto 16px
}
.scanner-frame{
 position:relative;
 width:min(680px,100%);
 aspect-ratio:4/3;
 background:#000;
 border-radius:18px;
 overflow:hidden;
 border:1px solid rgba(255,255,255,.18)
}
.scanner-frame video{
 width:100%;
 height:100%;
 display:block;
 object-fit:cover
}
.scanner-guide{
 position:absolute;
 pointer-events:none;
 left:7%;
 right:7%;
 top:36%;
 height:27%;
 border:2px solid #fff;
 border-radius:12px;
 box-shadow:0 0 0 9999px rgba(0,0,0,.16)
}
.scanner-overlay p{
 width:min(680px,100%);
 color:#dbe3f1;
 line-height:1.55;
 margin:14px 0 0
}
@media(max-width:650px){
 .scanner-overlay{padding:12px}
 .scanner-frame{
   width:100%;
   aspect-ratio:3/4;
   max-height:68vh
 }
}


/* =========================================================
   VOZUA DEVICE — FULL PAGE PANELS
   Converts old popup/modal UI into professional page views
   ========================================================= */

.modal-overlay,
.modal-backdrop,
.dialog-overlay,
.overlay,
[data-modal-overlay]{
  position:fixed !important;
  inset:0 !important;
  z-index:9000 !important;
  background:#f6f8fc !important;
  backdrop-filter:none !important;
  padding:0 !important;
  overflow:auto !important;
}

.modal,
.modal-dialog,
.modal-card,
.modal-panel,
.dialog,
.dialog-card,
.sheet,
.sheet-panel,
[data-modal]{
  width:100% !important;
  max-width:none !important;
  min-height:100vh !important;
  margin:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  border:0 !important;
  background:#f6f8fc !important;
  overflow:visible !important;
}

/* professional page header */
.modal-head,
.modal-header,
.dialog-head,
.dialog-header,
.sheet-head{
  position:sticky !important;
  top:0 !important;
  z-index:5 !important;
  min-height:76px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:20px !important;
  padding:16px clamp(18px,4vw,46px) !important;
  background:rgba(255,255,255,.96) !important;
  backdrop-filter:blur(14px) !important;
  border-bottom:1px solid #e4e9f1 !important;
}

/* modal/page content */
.modal-body,
.modal-content,
.dialog-body,
.dialog-content,
.sheet-body{
  width:min(1180px,calc(100% - 40px)) !important;
  margin:0 auto !important;
  padding:34px 0 70px !important;
  background:transparent !important;
}

/* if content wrapper itself is the modal */
.modal > form,
.modal-dialog > form,
.modal-card > form,
.dialog > form,
.dialog-card > form{
  width:min(1180px,calc(100% - 40px)) !important;
  margin:0 auto !important;
  padding:34px 0 70px !important;
}

/* form breathing space */
.modal .form-grid,
.dialog .form-grid,
.sheet .form-grid,
[data-modal] .form-grid{
  gap:22px !important;
}

.modal .field,
.dialog .field,
.sheet .field{
  margin-bottom:4px !important;
}

.modal input,
.modal select,
.modal textarea,
.dialog input,
.dialog select,
.dialog textarea,
.sheet input,
.sheet select,
.sheet textarea{
  min-height:48px !important;
  border-radius:11px !important;
}

.modal textarea,
.dialog textarea,
.sheet textarea{
  min-height:120px !important;
}

/* page footer/actions */
.modal .form-footer,
.dialog .form-footer,
.sheet .form-footer{
  position:sticky !important;
  bottom:0 !important;
  z-index:4 !important;
  margin-top:34px !important;
  padding:16px 0 !important;
  background:linear-gradient(
    to top,
    #f6f8fc 75%,
    rgba(246,248,252,0)
  ) !important;
}

/* cards within full-page forms */
.modal .card,
.dialog .card,
.sheet .card,
.modal .scan-card,
.modal .smart-search-card{
  border-radius:16px !important;
  box-shadow:0 8px 28px rgba(15,23,42,.06) !important;
}

/* =======================
   IMEI CAMERA PAGE
   ======================= */

.scanner-overlay{
  position:fixed !important;
  inset:0 !important;
  z-index:99999 !important;
  background:#f6f8fc !important;
  color:#111827 !important;
  padding:0 !important;
  display:block !important;
  overflow:auto !important;
}

.scanner-head{
  position:sticky !important;
  top:0 !important;
  z-index:5 !important;
  width:100% !important;
  max-width:none !important;
  min-height:76px !important;
  margin:0 !important;
  padding:16px clamp(18px,4vw,46px) !important;
  background:rgba(255,255,255,.97) !important;
  backdrop-filter:blur(14px) !important;
  border-bottom:1px solid #e4e9f1 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
}

.scanner-head strong{
  font-size:20px !important;
  color:#101828 !important;
}

.scanner-head .icon-btn{
  width:44px !important;
  height:44px !important;
  border-radius:11px !important;
  border:1px solid #d9dee8 !important;
  background:#fff !important;
  color:#101828 !important;
}

.scanner-frame{
  position:relative !important;
  width:min(780px,calc(100% - 32px)) !important;
  height:auto !important;
  aspect-ratio:4/3 !important;
  margin:32px auto 0 !important;
  border-radius:20px !important;
  overflow:hidden !important;
  background:#05070c !important;
  border:1px solid #d9dee8 !important;
  box-shadow:0 20px 60px rgba(15,23,42,.14) !important;
}

.scanner-frame video{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
}

.scanner-guide{
  position:absolute !important;
  left:8% !important;
  right:8% !important;
  top:38% !important;
  height:24% !important;
  border:2px solid #fff !important;
  border-radius:14px !important;
  pointer-events:none !important;
  box-shadow:0 0 0 9999px rgba(0,0,0,.24) !important;
}

.scanner-overlay > p{
  width:min(780px,calc(100% - 32px)) !important;
  margin:18px auto !important;
  color:#667085 !important;
  font-size:15px !important;
  line-height:1.65 !important;
}

.scanner-overlay > div:not(.scanner-head):not(.scanner-frame){
  width:min(780px,calc(100% - 32px)) !important;
  margin:0 auto 40px !important;
}

/* Add Device page refinement */
.smart-device-top{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:20px !important;
  margin-bottom:26px !important;
}

.scan-card,
.smart-search-card{
  min-height:150px !important;
  padding:22px !important;
}

.scan-card .btn{
  margin-top:12px !important;
}

/* mobile */
@media(max-width:720px){

  .modal-body,
  .modal-content,
  .dialog-body,
  .dialog-content,
  .sheet-body,
  .modal > form,
  .modal-dialog > form,
  .modal-card > form,
  .dialog > form,
  .dialog-card > form{
    width:calc(100% - 28px) !important;
    padding:22px 0 54px !important;
  }

  .smart-device-top{
    grid-template-columns:1fr !important;
    gap:14px !important;
  }

  .scanner-frame{
    width:calc(100% - 24px) !important;
    margin-top:18px !important;
    aspect-ratio:3/4 !important;
    max-height:68vh !important;
  }

  .scanner-overlay > p,
  .scanner-overlay > div:not(.scanner-head):not(.scanner-frame){
    width:calc(100% - 24px) !important;
  }

  .modal-head,
  .modal-header,
  .dialog-head,
  .dialog-header,
  .sheet-head,
  .scanner-head{
    min-height:68px !important;
    padding:12px 14px !important;
  }

  .modal .form-footer,
  .dialog .form-footer,
  .sheet .form-footer{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
  }
}


/* ======================================================
   VOZUA DEVICE FINAL FULL PAGE MODAL OVERRIDE
   Actual markup: .modal-shade > .modal
   ====================================================== */

.modal-shade{
  position:fixed !important;
  inset:0 !important;
  z-index:9000 !important;

  display:block !important;

  padding:0 !important;
  margin:0 !important;

  overflow-y:auto !important;
  overflow-x:hidden !important;

  background:#f6f8fc !important;
  backdrop-filter:none !important;

  pointer-events:auto !important;
}

.modal-shade::before,
.modal-shade::after{
  pointer-events:none !important;
}

.modal-shade .modal{
  position:relative !important;

  width:100% !important;
  max-width:none !important;
  min-width:0 !important;

  min-height:100vh !important;
  min-height:100dvh !important;

  margin:0 !important;
  padding:0 !important;

  border:0 !important;
  border-radius:0 !important;

  background:#f6f8fc !important;

  box-shadow:none !important;
  transform:none !important;

  overflow:visible !important;

  pointer-events:auto !important;
}

.modal-shade .modal.wide{
  width:100% !important;
  max-width:none !important;
}

.modal-shade .modal-header{
  position:sticky !important;
  top:0 !important;
  z-index:50 !important;

  min-height:76px !important;

  padding:15px clamp(18px,4vw,48px) !important;

  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:22px !important;

  background:rgba(255,255,255,.97) !important;
  backdrop-filter:blur(16px) !important;

  border:0 !important;
  border-bottom:1px solid #e4e9f1 !important;

  pointer-events:auto !important;
}

.modal-shade .modal-header h2{
  margin:0 !important;
  font-size:22px !important;
  line-height:1.25 !important;
  color:#101828 !important;
}

.modal-shade .modal-header p{
  margin:4px 0 0 !important;
  color:#667085 !important;
  font-size:13px !important;
}

.modal-shade .modal-header .icon-btn{
  position:relative !important;
  z-index:60 !important;

  width:44px !important;
  height:44px !important;

  flex:0 0 44px !important;

  background:#fff !important;
  border:1px solid #d8dee8 !important;
  border-radius:11px !important;

  pointer-events:auto !important;
  cursor:pointer !important;
}

.modal-shade .modal-body{
  width:min(1180px,calc(100% - 48px)) !important;
  max-width:1180px !important;

  margin:0 auto !important;

  padding:36px 0 80px !important;

  background:transparent !important;

  overflow:visible !important;

  pointer-events:auto !important;
}

.modal-shade .modal-body,
.modal-shade .modal-body *{
  pointer-events:auto;
}


/* ADD DEVICE */

.modal-shade .smart-device-top{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;

  gap:20px !important;

  margin:0 0 26px !important;
}

.modal-shade .scan-card,
.modal-shade .smart-search-card{
  position:relative !important;

  min-height:175px !important;

  padding:24px !important;

  background:#fff !important;

  border:1px solid #e1e7ef !important;
  border-radius:16px !important;

  box-shadow:0 7px 26px rgba(15,23,42,.045) !important;

  overflow:visible !important;

  pointer-events:auto !important;
}

.modal-shade .scan-card::before,
.modal-shade .scan-card::after,
.modal-shade .smart-search-card::before,
.modal-shade .smart-search-card::after{
  pointer-events:none !important;
}

#open-imei-camera,
.imei-camera-btn{
  position:relative !important;

  z-index:99999 !important;

  pointer-events:auto !important;

  cursor:pointer !important;

  touch-action:manipulation !important;

  user-select:none !important;

  opacity:1 !important;
}

#open-imei-camera::before,
#open-imei-camera::after{
  pointer-events:none !important;
}


/* FORM */

.modal-shade .form-grid{
  gap:20px !important;
}

.modal-shade input,
.modal-shade select,
.modal-shade textarea{
  position:relative !important;
  z-index:1 !important;

  min-height:48px !important;

  background:#fff !important;

  pointer-events:auto !important;
}

.modal-shade .form-footer{
  margin-top:34px !important;

  padding-top:20px !important;

  border-top:1px solid #e4e9f1 !important;
}


/* ======================================================
   CAMERA IS A FULL PAGE TOO
   ====================================================== */

.scanner-overlay{
  position:fixed !important;
  inset:0 !important;

  z-index:20000 !important;

  display:block !important;

  padding:0 !important;

  overflow:auto !important;

  background:#f6f8fc !important;

  color:#101828 !important;

  pointer-events:auto !important;
}

.scanner-overlay .scanner-head{
  position:sticky !important;
  top:0 !important;

  z-index:20 !important;

  width:100% !important;
  max-width:none !important;

  min-height:76px !important;

  margin:0 !important;

  padding:15px clamp(18px,4vw,48px) !important;

  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;

  background:rgba(255,255,255,.98) !important;

  border-bottom:1px solid #e4e9f1 !important;

  pointer-events:auto !important;
}

.scanner-overlay .scanner-head strong{
  font-size:21px !important;
  color:#101828 !important;
}

.scanner-overlay .scanner-head button{
  position:relative !important;
  z-index:30 !important;

  pointer-events:auto !important;
  cursor:pointer !important;
}

.scanner-overlay .scanner-frame{
  position:relative !important;

  width:min(820px,calc(100% - 40px)) !important;

  aspect-ratio:4/3 !important;

  margin:32px auto 0 !important;

  background:#000 !important;

  border-radius:18px !important;

  overflow:hidden !important;

  box-shadow:0 16px 55px rgba(15,23,42,.16) !important;
}

.scanner-overlay video{
  width:100% !important;
  height:100% !important;

  display:block !important;

  object-fit:cover !important;
}

.scanner-overlay > p{
  width:min(820px,calc(100% - 40px)) !important;

  margin:18px auto 40px !important;

  color:#667085 !important;

  line-height:1.65 !important;
}


/* MOBILE */

@media(max-width:700px){

  .modal-shade .modal-header,
  .scanner-overlay .scanner-head{
    min-height:68px !important;
    padding:12px 14px !important;
  }

  .modal-shade .modal-body{
    width:calc(100% - 28px) !important;

    padding:22px 0 60px !important;
  }

  .modal-shade .smart-device-top{
    grid-template-columns:1fr !important;

    gap:14px !important;
  }

  .modal-shade .scan-card,
  .modal-shade .smart-search-card{
    min-height:auto !important;

    padding:19px !important;
  }

  #open-imei-camera{
    width:100% !important;

    min-height:50px !important;

    margin-top:14px !important;
  }

  .scanner-overlay .scanner-frame{
    width:calc(100% - 24px) !important;

    margin-top:18px !important;

    aspect-ratio:3/4 !important;

    max-height:70vh !important;
  }

  .scanner-overlay > p{
    width:calc(100% - 24px) !important;
  }

}


/* VOZUA NATIVE IMEI CAMERA */

.imei-native-camera{
  position:relative !important;
  z-index:100 !important;

  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  min-height:48px !important;

  cursor:pointer !important;
  pointer-events:auto !important;

  touch-action:manipulation !important;
  user-select:none !important;
  -webkit-user-select:none !important;

  opacity:1 !important;
}

.imei-native-camera::before,
.imei-native-camera::after{
  pointer-events:none !important;
}

.imei-camera-input{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  opacity:0 !important;
  overflow:hidden !important;
  pointer-events:none !important;
}

.scan-card{
  position:relative !important;
}

.scan-card,
.scan-card *{
  visibility:visible;
}

@media(max-width:700px){
  .imei-native-camera{
    width:100% !important;
    min-height:52px !important;
    margin-top:14px !important;
  }
}


/* ==========================================================
   VOZUA DEVICE LIVE BARCODE SCANNER
   ========================================================== */

#open-live-imei-scanner{
  position:relative !important;
  z-index:100 !important;
  pointer-events:auto !important;
  cursor:pointer !important;
  touch-action:manipulation !important;
}

.imei-live-page{
  position:fixed;
  inset:0;
  z-index:999999;

  background:#f5f7fb;

  color:#101828;

  overflow:auto;
}

.imei-live-header{
  position:sticky;
  top:0;
  z-index:30;

  min-height:76px;

  padding:14px clamp(16px,4vw,44px);

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;

  background:rgba(255,255,255,.98);

  border-bottom:1px solid #e3e8ef;

  backdrop-filter:blur(16px);
}

.imei-live-header > div{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.imei-live-header strong{
  font-size:20px;
}

.imei-live-header span{
  font-size:13px;
  color:#667085;
}

.imei-live-header .icon-btn{
  width:44px;
  height:44px;

  background:#fff;

  border:1px solid #d8dee8;
  border-radius:11px;

  cursor:pointer;
}

.imei-live-main{
  width:min(850px,calc(100% - 32px));

  margin:0 auto;

  padding:28px 0 60px;
}

.imei-live-reader-wrap{
  position:relative;

  width:100%;

  overflow:hidden;

  background:#05070c;

  border-radius:20px;

  box-shadow:0 18px 60px rgba(15,23,42,.16);
}

#vozua-imei-reader{
  width:100%;

  min-height:420px;

  background:#000;
}

#vozua-imei-reader video{
  width:100% !important;
  height:auto !important;

  display:block !important;

  object-fit:cover !important;
}

#vozua-imei-reader img{
  display:none !important;
}

#vozua-imei-reader button{
  display:none !important;
}

#vozua-imei-reader select{
  display:none !important;
}

.imei-scan-target{
  position:absolute;

  top:50%;
  left:50%;

  width:82%;
  height:125px;

  transform:translate(-50%,-50%);

  border:2px solid #fff;
  border-radius:14px;

  pointer-events:none;

  box-shadow:
    0 0 0 9999px rgba(0,0,0,.27),
    0 0 28px rgba(255,255,255,.16);
}

.imei-live-status{
  margin-top:18px;

  min-height:58px;

  padding:14px 16px;

  display:flex;
  align-items:center;
  gap:11px;

  background:#fff;

  border:1px solid #e3e8ef;
  border-radius:13px;
}

.imei-live-status strong{
  display:block;
}

.imei-live-status span{
  color:#667085;
  font-size:13px;
}

.imei-live-help{
  margin:15px 4px 0;

  color:#667085;

  font-size:14px;
  line-height:1.65;
}

@media(max-width:700px){

  .imei-live-header{
    min-height:68px;

    padding:11px 14px;
  }

  .imei-live-main{
    width:calc(100% - 20px);

    padding-top:14px;
  }

  .imei-live-reader-wrap{
    border-radius:16px;
  }

  #vozua-imei-reader{
    min-height:58vh;
  }

  #vozua-imei-reader video{
    min-height:58vh !important;
    object-fit:cover !important;
  }

  .imei-scan-target{
    width:90%;
    height:110px;
  }

  #open-live-imei-scanner{
    width:100% !important;
    min-height:50px !important;
  }

}


/* VOZUA IMEI SCANNER HARD FIX */

.scan-card{
  position:relative !important;
  isolation:isolate !important;
}

.scan-card::before,
.scan-card::after{
  pointer-events:none !important;
}

.scan-card button,
.scan-card label,
#open-live-imei-scanner,
#open-imei-camera,
[data-action="scan-device-imei"],
label[for="imei-camera-capture"]{
  position:relative !important;
  z-index:9999 !important;

  pointer-events:auto !important;

  cursor:pointer !important;

  touch-action:manipulation !important;

  opacity:1 !important;
}

#vozua-live-scanner{
  position:fixed;
  inset:0;

  z-index:1000000;

  background:#f5f7fb;

  overflow:auto;

  color:#101828;
}

.vozua-scan-head{
  position:sticky;
  top:0;

  z-index:50;

  min-height:72px;

  padding:14px 18px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  background:#fff;

  border-bottom:1px solid #e3e8ef;
}

.vozua-scan-head > div{
  display:flex;
  flex-direction:column;
}

.vozua-scan-head strong{
  font-size:20px;
}

.vozua-scan-head span{
  margin-top:2px;

  font-size:13px;

  color:#667085;
}

#vozua-scan-close{
  width:44px;
  height:44px;

  border:1px solid #d8dee8;
  border-radius:11px;

  background:#fff;

  font-size:25px;

  cursor:pointer;
}

.vozua-scan-body{
  width:min(850px,calc(100% - 24px));

  margin:auto;

  padding:20px 0 50px;
}

.vozua-reader-wrap{
  position:relative;

  overflow:hidden;

  min-height:55vh;

  border-radius:18px;

  background:#000;

  box-shadow:0 16px 50px rgba(15,23,42,.16);
}

#vozua-reader{
  width:100%;

  min-height:55vh;

  background:#000;
}

#vozua-reader video{
  width:100% !important;
  min-height:55vh !important;

  object-fit:cover !important;
}

#vozua-reader img,
#vozua-reader select,
#vozua-reader button{
  display:none !important;
}

.vozua-target{
  position:absolute;

  top:50%;
  left:50%;

  width:88%;
  height:115px;

  transform:translate(-50%,-50%);

  border:2px solid white;
  border-radius:13px;

  pointer-events:none;

  box-shadow:0 0 0 9999px rgba(0,0,0,.25);
}

.vozua-scan-status{
  margin-top:15px;

  padding:14px 16px;

  display:flex;
  flex-direction:column;

  background:#fff;

  border:1px solid #e3e8ef;
  border-radius:12px;
}

.vozua-scan-status span{
  margin-top:3px;

  color:#667085;

  font-size:13px;
}

@media(max-width:700px){

  .vozua-scan-body{
    width:calc(100% - 16px);

    padding-top:10px;
  }

  .vozua-reader-wrap,
  #vozua-reader,
  #vozua-reader video{
    min-height:65vh !important;
  }

}


/* Professional scanner permission stage */

.vozua-permission-stage{
  min-height:72vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;

  padding:30px 22px;

  background:#fff;

  border:1px solid #e3e8ef;
  border-radius:20px;

  box-shadow:0 14px 45px rgba(15,23,42,.08);
}

.vozua-permission-icon{
  width:72px;
  height:72px;

  display:grid;
  place-items:center;

  margin-bottom:20px;

  border-radius:20px;

  background:#eef4ff;

  color:#1559e6;

  font-size:32px;
  font-weight:800;
}

.vozua-permission-icon.error{
  background:#fff0f0;
  color:#b42318;
}

.vozua-permission-stage h2{
  margin:0;

  font-size:26px;
  line-height:1.2;
}

.vozua-permission-stage p{
  max-width:430px;

  margin:12px auto 22px;

  color:#667085;

  line-height:1.65;
}

.vozua-permission-stage small{
  max-width:480px;

  margin-top:16px;

  color:#98a2b3;

  line-height:1.5;
}

.vozua-permission-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
}

#vozua-request-camera,
#vozua-retry-camera{
  min-width:210px;
  min-height:50px;
}

@media(max-width:700px){
  .vozua-permission-stage{
    min-height:68vh;
    border-radius:16px;
  }

  .vozua-permission-stage h2{
    font-size:23px;
  }

  .vozua-permission-actions{
    width:100%;
  }

  .vozua-permission-actions .btn,
  #vozua-request-camera{
    width:100%;
  }
}


/* =====================================================
   VOZUA CAMERA PERMISSION — CLEAN PROFESSIONAL UX
   ===================================================== */

.vozua-permission-stage{
  min-height:auto !important;

  width:min(620px,100%) !important;

  margin:40px auto !important;

  padding:28px !important;

  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;

  text-align:left !important;

  background:#fff !important;

  border:1px solid #e3e8ef !important;
  border-radius:18px !important;

  box-shadow:0 12px 36px rgba(15,23,42,.07) !important;
}

.vozua-permission-compact{
  display:flex;

  align-items:flex-start;

  gap:16px;
}

.vozua-permission-icon{
  flex:0 0 52px;

  width:52px !important;
  height:52px !important;

  margin:0 !important;

  border-radius:14px !important;

  font-size:22px !important;
}

.vozua-permission-copy{
  flex:1;
}

.vozua-permission-copy h2{
  margin:0 0 6px !important;

  font-size:21px !important;

  line-height:1.25 !important;
}

.vozua-permission-copy p{
  margin:0 !important;

  max-width:none !important;

  font-size:14px !important;

  line-height:1.6 !important;
}

.vozua-permission-actions.vertical{
  width:100%;

  display:grid;

  gap:10px;

  margin-top:24px;
}

.vozua-permission-actions .btn{
  width:100% !important;

  min-height:48px !important;
}

.vozua-camera-help-box{
  margin-top:18px;

  padding:16px 18px;

  background:#f8fafc;

  border:1px solid #e4e9f1;
  border-radius:12px;

  color:#475467;

  font-size:13px;

  line-height:1.55;
}

.vozua-camera-help-box strong{
  display:block;

  margin-bottom:8px;

  color:#101828;

  font-size:14px;
}

.vozua-camera-help-box ol{
  margin:0;

  padding-left:20px;
}

.vozua-camera-help-box li{
  margin:5px 0;
}

/* Do not show an empty black scanner before camera starts */
#vozua-reader-stage[style*="display:none"],
#vozua-reader-stage[style*="display: none"]{
  display:none !important;
}

@media(max-width:700px){

  .vozua-permission-stage{
    width:100% !important;

    margin:18px auto !important;

    padding:20px !important;
  }

  .vozua-permission-compact{
    gap:13px;
  }

  .vozua-permission-copy h2{
    font-size:19px !important;
  }

}