:root{--blue:#1769e8;--blue-deep:#0d4fbd;--blue-soft:#eaf2ff;--navy:#12213a;--text:#253754;--muted:#728198;--line:#e4eaf2;--surface:#fff;--background:#f6f8fc;--green:#16a36f;--red:#c84c5d;--shadow:0 10px 30px rgba(28,50,84,.055);--card-gap:20px}
*{box-sizing:border-box}html{background:var(--background);scroll-behavior:smooth}body{margin:0;color:var(--text);background:var(--background);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:16px}button,input,select{color:inherit;font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}[hidden]{display:none!important}svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.svg-sprite{position:absolute;width:0;height:0;overflow:hidden}.app-shell{min-height:100vh}
.sidebar{position:fixed;inset:0 auto 0 0;z-index:20;display:flex;width:264px;flex-direction:column;border-right:1px solid var(--line);background:var(--surface);padding:25px 19px 18px}.brand-row{display:flex;align-items:center;justify-content:space-between;padding:0 7px}.brand{display:flex;align-items:center;gap:10px;border:0;color:var(--navy);background:none;padding:0;font-size:1.28rem;font-weight:760;letter-spacing:-.7px}.brand>span:last-child>span,.auth-mobile-brand strong span{color:var(--blue)}.brand-mark{display:grid;width:35px;height:35px;place-items:center;border-radius:11px 11px 11px 4px;color:#fff;background:linear-gradient(145deg,#2c7dff,#0a4ab9);box-shadow:0 8px 18px rgba(23,105,232,.23);font-size:1.05rem;font-weight:830}.main-nav{margin-top:30px;overflow-y:auto}.nav-group+.nav-group{margin-top:22px}.nav-caption{margin:0 11px 8px;color:#a1adbc;font-size:.68rem;font-weight:780;letter-spacing:1.35px}.nav-item{display:flex;width:100%;min-height:41px;align-items:center;gap:12px;margin:2px 0;border:0;border-radius:10px;color:#64748b;background:none;padding:0 11px;font-size:.87rem;font-weight:530;text-align:left;transition:.18s ease}.nav-item:hover{color:var(--blue);background:#f5f8fe}.nav-item.active{color:var(--blue);background:var(--blue-soft);font-weight:670}.nav-icon{display:grid;width:21px;flex:0 0 auto;place-items:center}.support-card{display:flex;width:100%;align-items:center;gap:10px;margin-top:auto;border:1px solid #dce7f8;border-radius:13px;color:var(--text);background:linear-gradient(145deg,#f8fbff,#edf4ff);padding:12px}.support-icon{display:grid;width:33px;height:33px;flex:0 0 auto;place-items:center;border-radius:9px;color:#fff;background:var(--blue)}.support-card>span:last-child{display:flex;min-width:0;flex:1;flex-direction:column}.support-card strong{font-size:.75rem}.support-card small{margin-top:3px;color:var(--muted);font-size:.62rem}
.main-content{min-height:100vh;margin-left:264px}.topbar{position:sticky;top:0;z-index:10;display:flex;height:73px;align-items:center;gap:24px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.94);padding:0 35px;backdrop-filter:blur(12px)}.workspace{display:flex;min-width:180px;flex-direction:column}.workspace span{color:#9aa6b6;font-size:.61rem}.workspace strong{margin-top:2px;color:var(--navy);font-size:.76rem}.topbar-spacer{flex:1}.icon-button{display:grid;width:37px;height:37px;place-items:center;border:0;border-radius:9px;background:transparent}.menu-button,.close-menu{display:none!important}.role-switcher{position:relative}.role-button{display:flex;min-width:190px;height:43px;align-items:center;gap:9px;border:0;background:none;padding:0;text-align:left}.mini-avatar{display:grid;width:34px;height:34px;place-items:center;border-radius:10px;color:#fff;background:linear-gradient(145deg,#2476f1,#0c51bd);font-size:.68rem;font-weight:800}.role-button>span:nth-child(2){display:flex;min-width:0;flex:1;flex-direction:column}.role-button small{color:#98a4b4;font-size:.55rem}.role-button strong{margin-top:2px;color:var(--navy);font-size:.69rem}.down{color:#8d9aad}.role-menu{position:absolute;top:49px;right:0;z-index:30;width:265px;border:1px solid var(--line);border-radius:14px;background:#fff;padding:7px;box-shadow:0 20px 50px rgba(20,40,70,.17)}.role-menu button{display:flex;width:100%;align-items:center;gap:10px;border:0;border-radius:10px;background:none;padding:10px;text-align:left}.role-menu button:hover{background:#f2f6fd}.role-menu button>span,.role-current>span{display:grid;width:31px;height:31px;place-items:center;border-radius:8px;color:var(--blue);background:var(--blue-soft);font-size:.68rem;font-weight:800}.role-menu button>div,.role-current>div{display:flex;min-width:0;flex:1;flex-direction:column}.role-menu strong{color:var(--navy);font-size:.7rem}.role-menu small{margin-top:3px;overflow:hidden;color:#8e9aab;font-size:.58rem;text-overflow:ellipsis;white-space:nowrap}.role-current{display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--line);padding:10px}.role-menu form{margin-top:5px}
.page-content{width:min(1480px,100%);margin:0 auto;padding:34px 39px 30px}.page-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:28px}.eyebrow{margin:0 0 8px;color:var(--blue);font-size:.64rem;font-weight:800;letter-spacing:1.45px}.page-heading h1{margin:0;color:var(--navy);font-size:clamp(1.65rem,2.2vw,2rem);letter-spacing:-1px}.page-heading>div>p:not(.eyebrow){margin:7px 0 0;color:var(--muted);font-size:.78rem}.heading-actions{display:flex;flex-wrap:wrap;gap:10px}.primary-button,.secondary-button{display:inline-flex;min-height:40px;align-items:center;justify-content:center;gap:8px;border-radius:10px;padding:0 15px;font-size:.72rem;font-weight:690}.primary-button{border:1px solid var(--blue);color:#fff;background:var(--blue);box-shadow:0 7px 17px rgba(23,105,232,.2)}.primary-button:hover{background:var(--blue-deep)}.secondary-button{border:1px solid #d8e0ea;color:#50627b;background:#fff}.secondary-button.compact{min-height:31px;padding:0 10px;font-size:.63rem}
.metrics-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--card-gap);margin-top:27px}.metric{min-height:165px;border:1px solid var(--line);border-radius:16px;background:var(--surface);padding:19px;box-shadow:var(--shadow)}.metric.featured{border-color:#c8daf9;background:linear-gradient(145deg,#fff 15%,#f1f6ff 100%)}.metric-head{display:flex;align-items:flex-start;justify-content:space-between}.metric-icon{display:grid;width:38px;height:38px;place-items:center;border-radius:11px;color:var(--blue);background:var(--blue-soft);font-size:.65rem;font-weight:800}.metric-icon.green{color:#16815e;background:#e8f8f1}.metric-icon.orange{color:#bd7725;background:#fff1df}.metric-icon.violet{color:#6e5acc;background:#eeebff}.trend{border-radius:15px;padding:5px 7px;font-size:.56rem;font-weight:730}.trend.up{color:#148b61;background:#e8f8f1}.trend.neutral{color:#65758c;background:#f1f4f8}.trend.down{color:#bc6a20;background:#fff1e1}.metric>p{margin:15px 0 6px;color:var(--muted);font-size:.69rem}.metric>strong{color:var(--navy);font-size:1.55rem;letter-spacing:-.6px}.metric>strong.metric-status{font-size:1.25rem}.metric>small{display:block;margin-top:8px;color:#8e9aab;font-size:.59rem}
.panel{border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:var(--shadow)}.dashboard-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(290px,.8fr);gap:var(--card-gap);margin-top:var(--card-gap)}.access-grid{align-items:start}.clients-panel{overflow:hidden}.panel-head{padding:20px 22px;border-bottom:1px solid var(--line)}.section-head{display:flex;align-items:center;justify-content:space-between;gap:20px}.section-head h2{margin:0;color:var(--navy);font-size:.86rem}.section-head p{margin:5px 0 0;color:var(--muted);font-size:.61rem}.table-search{display:flex;overflow:hidden;border:1px solid var(--line);border-radius:9px}.table-search input{width:240px;border:0;outline:0;padding:9px 11px;font-size:.7rem}.table-search button,.add-ip button{border:0;color:var(--blue);background:var(--blue-soft);padding:0 13px;font-size:.66rem;font-weight:700}.client-row{border-bottom:1px solid var(--line)}.client-header{display:flex;align-items:center;gap:13px;padding:18px 22px}.client-avatar{display:grid;width:43px;height:43px;flex:0 0 auto;place-items:center;border-radius:12px;color:#1858ad;background:#dceaff;font-size:.72rem;font-weight:800}.client-info{min-width:0;flex:1}.client-info h3{overflow:hidden;margin:0;color:var(--navy);font-size:.78rem;text-overflow:ellipsis;white-space:nowrap}.client-info span{color:var(--muted);font-size:.62rem}.status-pill{border-radius:999px;padding:5px 9px;font-size:.58rem;font-weight:750}.status-pill.active{color:#148b61;background:#e8f8f1}.status-pill.inactive{color:#bc6a20;background:#fff1e1}.action-menu{position:relative}.action-menu summary{list-style:none;color:var(--muted);cursor:pointer;padding:6px}.action-menu>div{position:absolute;top:30px;right:0;z-index:3;min-width:110px;border:1px solid var(--line);border-radius:9px;background:#fff;padding:5px;box-shadow:var(--shadow)}.action-menu button{display:block;width:100%;border:0;background:none;padding:7px;text-align:left;font-size:.65rem}.danger-text{color:var(--red)!important}.ip-list{background:#fafcff;padding:0 22px 15px 78px}.ip-row{display:flex;min-height:43px;align-items:center;gap:9px;border-top:1px dashed var(--line);color:var(--muted);font-size:.67rem}.ip-row code{border-radius:5px;color:#263d54;background:#eef3fa;padding:3px 7px;font-size:.67rem}.status-dot{width:7px;height:7px;border-radius:50%;background:#c1cad5}.status-dot.on{background:#19a66f;box-shadow:0 0 0 3px #dff3ea}.row-spacer{flex:1}.remove-button{border:1px solid var(--line);border-radius:7px;color:#66768c;background:#fff;padding:4px 7px;font-size:16px;line-height:1}.add-ip{display:flex;margin-top:10px}.add-ip input{min-width:0;flex:1;border:1px solid var(--line);border-radius:8px 0 0 8px;outline:0;padding:8px 10px;font-size:.7rem}.add-ip button{border-radius:0 8px 8px 0}.activity-panel{padding:20px 22px}.activity-list{margin-top:12px}.activity-list>div{display:flex;align-items:center;gap:11px;border-bottom:1px solid #edf0f4;padding:11px 0}.activity-list>div:last-child{border-bottom:0}.activity-list>div>span:nth-child(2){display:flex;min-width:0;flex:1;flex-direction:column}.activity-list strong{overflow:hidden;color:var(--navy);font-size:.66rem;text-overflow:ellipsis;white-space:nowrap}.activity-list small{margin-top:4px;color:#8c98a9;font-size:.57rem;line-height:1.45}.activity-icon{display:grid;width:32px;height:32px;flex:0 0 auto;place-items:center;border-radius:9px;color:#64748b;background:#f1f4f8;font-weight:800}.activity-icon.activated{color:#148b61;background:#e8f8f1}.activity-icon.deactivated,.activity-icon.removed{color:var(--red);background:#fff0f2}.empty-state{display:flex;flex-direction:column;align-items:center;padding:50px;color:var(--muted);font-size:.72rem}.empty-state strong{color:var(--navy);margin-bottom:5px}.empty-state.compact{padding:25px}.pagination{padding:16px 22px}.pagination nav{display:flex;align-items:center;justify-content:space-between}.pagination a,.pagination span{color:var(--muted);font-size:.67rem}.pagination a{color:var(--blue);font-weight:700}
.feedback{margin-bottom:18px;border:1px solid var(--line);border-radius:12px;padding:13px 16px;font-size:.73rem}.feedback.success{border-color:#c5eadc;color:#117554;background:#effaf6}.feedback.error{border-color:#f2cbd1;color:#a33a49;background:#fff3f4}.feedback ul{margin:5px 0 0;padding-left:18px}.app-footer{display:flex;align-items:center;justify-content:space-between;margin-top:34px;color:#96a2b2;font-size:.58rem}.app-footer span:nth-child(2){display:flex;align-items:center;gap:6px}.app-footer i{width:6px;height:6px;border-radius:50%;background:var(--green)}
dialog{width:min(92vw,500px);border:0;border-radius:18px;padding:0;color:var(--text);background:#fff;box-shadow:0 30px 80px rgba(9,27,55,.25)}dialog::backdrop{background:rgba(12,27,51,.42);backdrop-filter:blur(3px)}.dialog-form{display:flex;flex-direction:column;gap:15px;padding:22px}.dialog-head{display:flex;align-items:flex-start;justify-content:space-between;border-bottom:1px solid var(--line);margin:-22px -22px 4px;padding:20px 22px}.dialog-head h2{margin:0;color:var(--navy);font-size:.96rem}.dialog-head button{border:0;color:var(--muted);background:none;font-size:22px}.dialog-form>label{display:flex;flex-direction:column;gap:7px;color:#435773;font-size:.68rem;font-weight:650}.dialog-form label span{color:var(--muted);font-weight:450}.dialog-form input,.dialog-form select{width:100%;height:40px;border:1px solid #dce3ec;border-radius:9px;background:#fff;padding:0 11px;font-size:.7rem}.dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:8px}
.auth-body{min-height:100vh;background:#fff}.auth-shell{display:grid;min-height:100vh;grid-template-columns:minmax(430px,1fr) minmax(480px,1fr)}.auth-brand-panel{position:relative;display:flex;overflow:hidden;flex-direction:column;color:#fff;background:linear-gradient(145deg,#0b3a8d 0%,#0c56c6 55%,#2277ef 100%);padding:42px clamp(36px,5vw,72px)}.auth-brand-panel::before,.auth-brand-panel::after{position:absolute;border:1px solid rgba(255,255,255,.11);border-radius:50%;content:""}.auth-brand-panel::before{right:-160px;bottom:-120px;width:520px;height:520px;box-shadow:0 0 0 65px rgba(255,255,255,.025),0 0 0 130px rgba(255,255,255,.02)}.auth-brand-panel::after{top:18%;left:-180px;width:330px;height:330px}.auth-brand{position:relative;z-index:1;color:#fff}.auth-brand .brand-mark{color:var(--blue);background:#fff;box-shadow:none}.auth-brand>span:last-child>span{color:#b9d6ff}.auth-message{position:relative;z-index:1;margin:auto 0}.auth-kicker{font-size:.65rem;font-weight:800;letter-spacing:1.5px;opacity:.72}.auth-message h1{max-width:620px;margin:18px 0;color:#fff;font-size:clamp(2.4rem,4vw,4rem);line-height:1.04;letter-spacing:-2.4px}.auth-message p{max-width:560px;margin:0;color:#dbe9ff;font-size:.88rem;line-height:1.8}.auth-security{position:relative;z-index:1;display:flex;align-items:center;gap:12px}.auth-security>span{display:grid;width:35px;height:35px;place-items:center;border:1px solid rgba(255,255,255,.25);border-radius:10px;background:rgba(255,255,255,.1)}.auth-security div{display:flex;flex-direction:column}.auth-security strong{font-size:.72rem}.auth-security small{margin-top:3px;color:#d5e5ff;font-size:.61rem}.auth-form-panel{display:grid;place-items:center;background:#fbfcfe;padding:38px}.auth-form-wrap{width:min(420px,100%)}.auth-form-wrap h2{margin:0;color:var(--navy);font-size:1.8rem;letter-spacing:-1px}.auth-intro{margin:8px 0 28px;color:var(--muted);font-size:.72rem}.auth-mobile-brand{display:none;align-items:center;gap:10px;margin-bottom:35px;color:var(--navy)}.login-form{display:flex;flex-direction:column;gap:17px}.login-form>label{display:flex;flex-direction:column;gap:8px;color:#3b506d;font-size:.7rem;font-weight:680}.auth-input{display:flex;height:46px;align-items:center;gap:10px;border:1px solid #d9e1eb;border-radius:11px;color:#8391a5;background:#fff;padding:0 12px;transition:.18s}.auth-input:focus-within{border-color:#8db5f2;box-shadow:0 0 0 3px rgba(23,105,232,.09)}.auth-input input{min-width:0;flex:1;border:0;outline:0;background:none;font-size:.76rem}.auth-input button{border:0;color:var(--blue);background:none;padding:5px;font-size:.6rem;font-weight:700}.auth-options{display:flex;align-items:center;justify-content:space-between}.remember{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:.65rem}.remember input{accent-color:var(--blue)}.auth-submit{width:100%;min-height:47px;margin-top:3px;font-size:.75rem}.auth-submit span{margin-left:auto;font-size:1rem}.auth-footer{display:block;margin-top:31px;color:#a0abba;font-size:.6rem;text-align:center}
.text-button{display:inline-flex;align-items:center;gap:6px;border:0;color:var(--blue);background:none;font-size:.68rem;font-weight:700}.scrim{display:none}
.activity-history-panel{overflow:hidden;margin-top:var(--card-gap)}.activity-filters{display:flex;align-items:flex-end;gap:12px;border-bottom:1px solid var(--line);background:#fbfcfe;padding:16px 22px}.activity-filters label{display:flex;min-width:150px;flex-direction:column;gap:6px;color:#65758c;font-size:.61rem;font-weight:650}.activity-filters .filter-search{min-width:240px;flex:1}.activity-filters input,.activity-filters select{width:100%;height:40px;border:1px solid #dce3ec;border-radius:9px;outline:0;background:#fff;padding:0 11px;font-size:.7rem}.activity-filters input:focus,.activity-filters select:focus{border-color:#8db5f2;box-shadow:0 0 0 3px rgba(23,105,232,.09)}.activity-filters .text-button{min-height:40px;white-space:nowrap}.activity-table-wrap{overflow-x:auto}.activity-table{width:100%;border-collapse:collapse}.activity-table th{height:44px;color:#8b98aa;background:#fafbfd;padding:0 18px;font-size:.59rem;font-weight:750;letter-spacing:.6px;text-align:left;text-transform:uppercase}.activity-table td{height:66px;border-top:1px solid var(--line);padding:10px 18px;font-size:.68rem;vertical-align:middle}.activity-table td strong,.activity-table td time{display:flex;color:var(--navy);font-size:.68rem;font-weight:650;flex-direction:column}.activity-table td small{display:block;margin-top:4px;color:#8c98a9;font-size:.58rem;font-weight:450}.activity-table code{border-radius:5px;color:#263d54;background:#eef3fa;padding:4px 7px;font-size:.67rem;white-space:nowrap}.event-badge{display:inline-flex;border-radius:999px;padding:5px 9px;font-size:.58rem;font-weight:750}.event-badge.activated{color:#148b61;background:#e8f8f1}.event-badge.deactivated{color:#bc6a20;background:#fff1e1}.event-badge.removed{color:var(--red);background:#fff0f2}
@media(max-width:680px){.activity-filters{align-items:stretch;flex-direction:column}.activity-filters label,.activity-filters .filter-search{width:100%;min-width:0}.activity-filters .primary-button{width:100%}.activity-table th,.activity-table td{padding-inline:13px}}
@media(max-width:1180px){.metrics-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.sidebar{display:none}.sidebar.open{display:flex;box-shadow:20px 0 60px rgba(13,31,58,.18)}.scrim.visible{position:fixed;inset:0;z-index:19;display:block;width:100%;height:100%;border:0;background:rgba(12,26,49,.32)}.main-content{margin-left:0}.menu-button,.close-menu{display:grid!important}.topbar{padding:0 20px}.workspace{display:none}.dashboard-grid{grid-template-columns:1fr}.auth-shell{grid-template-columns:minmax(300px,.75fr) minmax(430px,1fr)}.auth-brand-panel{padding:35px}}
@media(max-width:680px){.topbar{height:64px;gap:10px}.role-button{min-width:35px}.role-button>span:nth-child(2),.role-button .down{display:none}.page-content{padding:26px 17px}.page-heading{align-items:flex-start;flex-direction:column}.heading-actions,.heading-actions button{width:100%}.metrics-grid{grid-template-columns:1fr}.panel-head{align-items:stretch;flex-direction:column}.table-search,.table-search input{width:100%}.client-header{padding:15px}.ip-list{padding:0 15px 15px}.status-pill{display:none}.ip-row{flex-wrap:wrap;padding:8px 0}.row-spacer{display:none}.activity-panel{margin-top:0}.auth-brand-panel{display:none}.auth-shell{display:block}.auth-form-panel{min-height:100vh;padding:28px 20px}.auth-mobile-brand{display:flex}.app-footer{gap:10px;flex-wrap:wrap}}
.numbered-pagination{display:flex;align-items:center;justify-content:space-between;gap:18px}.pagination-summary{color:#63738b;font-size:.7rem}.pagination-pages{display:flex;align-items:center;gap:6px}.pagination .pagination-button{display:grid;min-width:36px;height:36px;place-items:center;border:1px solid #dfe6ef;border-radius:10px;color:#344861;background:#fff;padding:0 9px;font-size:.7rem;font-weight:600;transition:border-color .16s ease,color .16s ease,background .16s ease}.pagination .pagination-button:hover{border-color:#a9c6f4;color:var(--blue);background:var(--blue-soft)}.pagination .pagination-button:focus-visible{outline:3px solid rgba(23,105,232,.2);outline-offset:2px}.pagination .pagination-button.active{border-color:var(--blue);color:#fff;background:var(--blue)}.pagination .pagination-button.disabled{border-color:#edf1f6;color:#c2cad5;background:#fbfcfe;cursor:not-allowed}.pagination-ellipsis{min-width:18px;color:var(--muted);font-size:.7rem;text-align:center}
@media(max-width:680px){.numbered-pagination{align-items:stretch;flex-direction:column}.pagination-summary{text-align:center}.pagination-pages{justify-content:flex-start;overflow-x:auto;padding:2px}.pagination .pagination-button{min-width:34px;height:34px}}