/* Shared STARVPN R4.4.2 design adaptation. One source for billing, ACS and portal.
   Gradients/font/control treatment follow the supplied templates and matching assets.
   No continuous decorative animation or blur on repeated data cards. */
@font-face{font-family:Manrope;src:url('/fonts/manrope-latin-variable.woff2?v=2.0.1') format('woff2');font-style:normal;font-weight:200 800;font-display:swap}
:root{color-scheme:light;--accent:#5268e8;--ink:#172b48;--muted:#62758e;--line:#a4b8d63d;--radius:26px;--ui-font:Manrope,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--ui-frost:linear-gradient(140deg,#ffffffb3,#ffffff70 60%,#e4eefe85);--ui-inner:linear-gradient(140deg,#ffffffab,#eef5ff7a);--ui-nav:linear-gradient(130deg,#ffffffc9,#ffffff80 54%,#e4eeff91);--ui-primary:linear-gradient(120deg,#3774eadb,#8272eced);--ui-shadow:inset 0 1px 1px #fff,inset 1px 0 0 #f7dcff99,inset -1px -1px 0 #a4dbed66,0 12px 30px #38518a09;font-family:var(--ui-font);font-size:14px;color:var(--ink);background:#f0f3fa;scrollbar-gutter:stable}
@supports(color:color-mix(in srgb,red,blue)){:root{--ui-primary:linear-gradient(120deg,color-mix(in srgb,var(--accent) 85%,#2580ee),color-mix(in srgb,var(--accent) 55%,#ac80ed));}}
body{font-family:var(--ui-font);color:var(--ink);min-width:320px;min-height:100dvh;line-height:1.55;-webkit-font-smoothing:antialiased;background:radial-gradient(ellipse at 5% 10%,#cddfffaa,transparent 44%),radial-gradient(ellipse at 98% 30%,#b8eee67a,transparent 45%),radial-gradient(ellipse at 62% 100%,#e5c9f580,transparent 47%),#f0f3fa}
button,input,select,textarea{font:inherit}button,a{touch-action:manipulation}button svg,a svg{pointer-events:none}h1{font-size:29px;line-height:1.25;letter-spacing:-1.1px;font-weight:800}h2{font-size:17px;line-height:1.4;letter-spacing:-.4px;font-weight:750}h3{font-size:14px;font-weight:750}p{line-height:1.7}.muted,small,.hint,.fine,.form-help{color:var(--muted)}.eyebrow{color:#6a7fa1;font-size:10px;letter-spacing:1.2px;font-weight:750}.page-head p{font-size:12px;margin:8px 0 0}.page-head{margin-bottom:24px;align-items:center}.page-head>div{min-width:0}.page-head h1{overflow-wrap:anywhere}.head-actions,.actions{gap:8px}.head-actions{flex-wrap:wrap}.page-head>.actions,.page-head>.head-actions{flex-shrink:0;max-width:100%}
.layout,.shell{display:grid;grid-template-columns:250px minmax(0,1fr);max-width:1800px;gap:24px;padding:22px;margin:0 auto;min-height:100dvh}.main{min-width:0}.glass{background:var(--ui-frost);border:1px solid #ffffffe6;box-shadow:var(--ui-shadow);border-radius:var(--radius);backdrop-filter:none;-webkit-backdrop-filter:none}.panel{padding:24px;min-width:0}.panel+.panel{margin-top:20px}.grid>.panel+.panel,.network-grid>.panel+.panel{margin-top:0}.grid,.network-grid{gap:20px}.panel-head,.section-head{margin-bottom:20px;gap:12px;flex-wrap:wrap}.panel-head h2,.section-head h2{margin:0}.panel-head p,.section-head p{font-size:12px}.sidebar,.topbar{background:var(--ui-nav);border:1px solid #ffffffdb;box-shadow:var(--ui-shadow);border-radius:28px;backdrop-filter:blur(10px) saturate(120%);-webkit-backdrop-filter:blur(10px) saturate(120%)}
.sidebar{position:sticky;top:22px;height:calc(100dvh - 44px);padding:24px 14px 16px;display:flex;flex-direction:column;overflow:hidden}.sidebar-brand{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 9px 22px;flex:none}.brand{display:flex;align-items:center;gap:12px;padding:0;min-width:0}.brand>div{min-width:0}.brand img{height:38px;width:38px;flex:none;object-fit:contain;border-radius:12px;box-shadow:0 6px 16px #5366cf15}.brand strong{display:block;font-size:18px;font-weight:800;letter-spacing:-.5px;overflow-wrap:anywhere}.brand small{display:block;font-size:10px;font-weight:500;margin-top:2px;line-height:1.5}.sidebar .nav{display:flex;flex-direction:column;gap:5px;overflow-y:auto;overscroll-behavior:contain;min-height:0;flex:1;padding:0 2px 10px;scrollbar-width:thin;scrollbar-color:#b7c6df transparent}.nav-group-label{font-size:9px;letter-spacing:1.2px;color:#6d80a0;font-weight:750;padding:15px 12px 5px}.nav-group-label:first-child{padding-top:0}.nav a{display:flex;align-items:center;gap:12px;flex:none;min-height:44px;padding:11px 13px;border-radius:13px;font-size:12px;font-weight:650;line-height:1.45;color:#566e8e;transition:transform .18s,background-color .18s,color .18s}.nav a span{min-width:0;overflow-wrap:anywhere}.nav svg{width:18px;height:18px;flex:none}.nav a.active,.nav a[aria-current=page]{background:var(--ui-primary);border:0;color:#fff;box-shadow:inset 0 1px 1px #ffffff91,0 5px 14px #566bd423}.nav a.active svg,.nav a[aria-current=page] svg,.nav a.active span,.nav a[aria-current=page] span{color:#fff}.sidebar-foot,.sidebar-footer{margin-top:auto;padding:17px 9px 0;text-align:center;font-size:10px;color:#7083a1;line-height:1.65;flex:none}.sidebar-footer span{margin:0;display:block}
.topbar{position:relative;top:auto;z-index:12;min-height:74px;margin-bottom:28px;padding:13px 19px;display:flex;justify-content:space-between;align-items:center;gap:12px}.top-start{display:flex;align-items:center;gap:10px;min-width:0}.workspace-switch{display:flex;align-items:center;padding:5px;border-radius:14px;background:linear-gradient(125deg,#e7effc88,#f7eaf74d);border:1px solid #ffffff8c;gap:4px;font-size:11px;font-weight:750}.workspace-switch>a,.workspace-current{display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 12px;min-height:34px;border-radius:10px;white-space:nowrap}.workspace-switch>a{color:#607698}.workspace-switch svg{width:14px;height:14px}.workspace-current{background:linear-gradient(130deg,#ffffffed,#f5f9ffb8);color:var(--accent);box-shadow:inset 0 1px 0 #fff,0 5px 16px #7184b21a}.account,.top-right{display:flex;align-items:center;gap:12px;min-width:0}.avatar{height:36px;width:36px;border:0;border-radius:50%;background:linear-gradient(145deg,#ecf4ff,#dbe9ff);color:#2169c5;font-size:13px;flex:none}.account-name,.user-name{max-width:200px;min-width:0}.account-name strong,.user-name strong{display:block;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.account-name small,.user-name small{display:block;font-size:10px;margin:2px 0 0}.topbar .brand{display:none}.account .icon-btn,.top-right .icon-btn{position:relative}.topbar [data-unread],#activity-count{font-size:9px;min-width:17px;border-radius:7px;background:#edf2ff;padding:1px 4px;color:#3e5eca}
.btn{min-height:42px;padding:10px 14px;border-radius:12px;border:1px solid #cddbed99;background:linear-gradient(130deg,#ffffffd9,#f3f7ffad);box-shadow:inset 0 1px 0 #fff;color:#34567f;font-family:var(--ui-font);font-size:12px;font-weight:700;line-height:1.5;transition:transform .18s ease-out,background-color .16s,border-color .16s,opacity .16s;white-space:normal;text-align:center}.btn.primary,.btn.primary:hover{background:var(--ui-primary);border-color:#ffffffa6;color:#fff;box-shadow:inset 0 1px 1px #ffffff91,0 5px 15px #566bd429}.btn.danger{color:#b14156;background:linear-gradient(130deg,#fff8fa,#ffedf0);border-color:#efd0d9}.btn.small{min-height:36px;font-size:11px;padding:8px 11px}.btn.icon-btn{width:40px;min-width:40px;height:40px;padding:9px;min-height:40px}.btn svg{width:17px;height:17px;flex:none}.btn:disabled{opacity:.6;cursor:wait;transform:none}.btn:active:not(:disabled){transform:scale(.98)}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid #526dd4;outline-offset:3px}
input,select,textarea{min-height:44px;border-radius:12px;border:1px solid #c7d6ec;color:var(--ink);background:linear-gradient(125deg,#ffffffb8,#ffffff85);padding:11px 13px;box-shadow:inset 0 1px 0 #ffffffd9;transition:border-color .16s,background-color .16s;max-width:100%}input::placeholder,textarea::placeholder{color:#7587a5;opacity:1}input:focus,select:focus,textarea:focus{border-color:#8599e6;box-shadow:0 0 0 3px #838cf51a,inset 0 1px 0 #fff}label{font-size:12px;font-weight:700}label small{font-weight:400}select:not([multiple]):not([size]){appearance:none;padding-right:36px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%23536d96' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 12px center/16px 16px no-repeat,linear-gradient(125deg,#ffffffb8,#ffffff85)}select option{background:#f6f9ff;color:#203653}input[type=checkbox]{appearance:none;width:19px!important;height:19px!important;min-width:19px;min-height:19px;padding:0!important;margin:0;border:1px solid #8b9dbc;border-radius:6px;flex:0 0 19px;background:linear-gradient(135deg,#ffffffed,#e5efffa6);box-shadow:inset 0 1px 0 #fff,0 1px 3px #405e8812;cursor:pointer;vertical-align:middle}input[type=checkbox]:checked{border-color:#587ee0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3 8 3 3 7-7' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/15px 15px no-repeat,var(--ui-primary)}input[type=checkbox]:indeterminate{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8h8' stroke='white' stroke-width='2'/%3E%3C/svg%3E") center/15px 15px no-repeat,var(--ui-primary)}input[type=checkbox]:disabled{opacity:.5;cursor:not-allowed}fieldset{background:var(--ui-inner);border:1px solid #d8e3f3;border-radius:16px;min-width:0}legend{font-size:12px;font-weight:750;color:#34567f}.form-grid{gap:18px}.permission-grid,.choice-grid{gap:14px}.permission-grid .check{min-height:34px;align-items:center;font-weight:550}.form-help,.hint,.fine{font-size:11px;line-height:1.65}.settings-tabs{background:var(--ui-inner);padding:6px;border:1px solid #fff;border-radius:16px;gap:5px;display:flex;flex-wrap:wrap}.settings-tabs .btn{border:0;background:transparent;box-shadow:none}.settings-tabs .btn.active{color:var(--accent);background:#ffffffdb;box-shadow:inset 0 1px 0 #fff,0 3px 12px #7184b212}
.stats{gap:16px}.stat{border-radius:23px;padding:22px;min-width:0}.stat-icon{border-radius:12px;background:#e6efffc9;color:#417adf;width:38px;height:38px;flex:none}.stat:nth-child(2) .stat-icon{background:#e1f6edb8;color:#229872}.stat:nth-child(3) .stat-icon{background:#fff1dbbd;color:#b88224}.stat:nth-child(4) .stat-icon{background:#eee5ffbd;color:#8761cd}.stat strong{font-size:27px;font-weight:800;letter-spacing:-.8px;overflow-wrap:anywhere}.stat small{font-size:11px}.stat .label{font-size:11px;color:var(--muted);padding-right:32px}.badge{font-size:10px;padding:5px 9px;border-radius:9px;font-weight:750;line-height:1.5;max-width:100%;white-space:normal}.row,.network-row{border-bottom-color:#a4b8d62b}.row strong,.network-row strong{font-size:12px}.row small,.network-row small{font-size:11px}.detail-grid>div:not(.detail-column),.wifi-card,.host,.destination,.overview-strip{background:var(--ui-inner);border-color:#ffffffd9}.overview-strip{border-radius:17px}.empty{background:#ffffff36;border-color:#bccde666;border-radius:17px;font-size:12px}.empty h3{font-size:14px}.table-shell{border-radius:23px;overflow:hidden}.table,.devices-table{width:100%;border-collapse:collapse}.table th,.devices-table th{font-size:10px;letter-spacing:.7px;background:#edf3fba3;color:#657b9b;padding:14px 12px;border-bottom:1px solid #cad9ed99}.table td,.devices-table td{padding:16px 12px;font-size:12px;border-bottom:1px solid #a4b8d62b;overflow-wrap:anywhere}.table td strong{font-size:12px}.table td small{font-size:11px}.table tbody tr:nth-child(even),.devices-table tbody tr:nth-child(even){background:#ffffff28}.table .actions{gap:7px}.table .actions .btn{font-size:11px;padding:8px 11px;min-height:36px}.toolbar{gap:10px;align-items:center;margin-bottom:20px}.toolbar input,.toolbar select{min-height:44px}.search{background:linear-gradient(125deg,#ffffffb8,#ffffff85);border-color:#c7d6ec}.search input{background:none;box-shadow:none}.table-shell .pagination{padding:16px}.banner{background:linear-gradient(130deg,#ebf3ffcc,#edeaffe0);border-color:#d9e4f9;border-radius:17px;color:#415f87}.notice{border-radius:13px;font-size:12px;line-height:1.6}.notice:empty{display:none!important}.footer{font-size:10px;color:#7083a1;margin:28px 0 5px}
/* Dialog opacity is solid to avoid the text bleed that affected old mobile builds. */
dialog{border:1px solid #fff;background:linear-gradient(135deg,#ffffff,#f0f5ff);border-radius:26px;color:var(--ink);box-shadow:inset 0 1px 1px #fff,0 24px 65px #304c8029;width:min(740px,calc(100% - 32px));max-height:min(90dvh,920px);padding:0;overflow:auto;overscroll-behavior:contain;backdrop-filter:none;-webkit-backdrop-filter:none;scrollbar-gutter:stable}dialog[open]{animation:ui-dialog-in .2s ease-out}dialog::backdrop{background:#263e6555;backdrop-filter:none}.modal-head{position:sticky;top:0;z-index:3;background:#f5f8ff;border-bottom:1px solid #d7e3f4;padding:21px 24px;min-height:72px;gap:16px;display:flex;align-items:center;justify-content:space-between}.modal-head h2{font-size:19px;overflow-wrap:anywhere;margin:0;min-width:0}.modal-head>.btn{flex:none}.modal-body{padding:24px;min-width:0;max-height:none;overflow:visible}.modal-actions,.modal-foot{gap:9px;display:flex;justify-content:flex-end;flex-wrap:wrap;margin-top:24px}.modal-actions>.btn,.modal-foot>.btn{min-height:44px}dialog .form-grid{margin:0}dialog .modal-foot{grid-column:1/-1}.script,pre,code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.script{background:#f5f8ff;color:#234160}.modal-body pre{overflow-x:auto;max-width:100%}
.login-wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(350px,.85fr);align-items:stretch;gap:0;padding:0;max-width:1050px;min-height:0;margin:clamp(36px,10vh,110px) auto;border:1px solid #fff;border-radius:30px;box-shadow:var(--ui-shadow);overflow:hidden;background:var(--ui-frost)}.login-intro{padding:48px;background:linear-gradient(125deg,#2578edee,#5265e8e8 60%,#9276e9e3);position:relative;color:white;display:flex;flex-direction:column;justify-content:center;isolation:isolate}.login-intro::after{content:"";position:absolute;z-index:-1;width:280px;height:280px;border:1px solid #ffffff38;border-radius:50%;right:-90px;bottom:-75px;background:radial-gradient(circle at 30% 25%,#96e6ff66,transparent 65%);pointer-events:none}.login-intro .brand strong,.login-intro .brand small,.login-intro .eyebrow{color:#fff}.login-intro h1{font-size:43px;letter-spacing:-1.6px;line-height:1.2;margin:20px 0}.login-intro p{font-size:13px;color:#edf2ff;max-width:350px}.login-chips{margin-top:30px;gap:7px}.login-chips span{font-size:10px;background:#ffffff18;border-color:#ffffff38;padding:8px 11px;color:#fff}.login-panel{border:0;border-radius:0;background:transparent;box-shadow:none;padding:44px 36px}.login-panel h2{font-size:25px;line-height:1.3;letter-spacing:-.7px;margin-bottom:9px}.login-panel p{font-size:12px}.login-panel form{gap:18px;margin:25px 0 0}.login-panel>a{font-size:12px;display:inline-block;margin-top:15px}.login-panel .btn{min-height:46px}
/* Explicit feedback, including toast messages above a native modal. */
#toasts{position:fixed;inset:22px 22px auto auto;z-index:10050;display:grid;gap:10px;width:min(370px,calc(100vw - 32px));max-width:none;margin:0;padding:0;border:0;background:transparent;overflow:visible;pointer-events:none;color:var(--ink)}#toasts:empty{display:none}.toast{display:grid;grid-template-columns:32px minmax(0,1fr) 24px;gap:12px;align-items:center;width:100%;max-width:none;margin:0;padding:15px;border-radius:17px;border:1px solid #fff;background:linear-gradient(125deg,#fff,#f0f5ff);box-shadow:0 12px 40px #15315720;position:relative;pointer-events:auto;font-size:12px;animation:ui-enter .2s ease-out;--toast-color:#238765}.toast.error{--toast-color:#c34b5d;border-color:#f4d9df}.toast.warning{--toast-color:#a77b25}.toast-icon{display:grid;place-items:center;height:32px;border-radius:10px;background:#edf2fb;color:var(--toast-color);font-size:18px;font-weight:750}.toast-copy strong{display:block;font-size:12px;color:var(--ink)}.toast-copy p{font-size:12px;line-height:1.55;color:#5c7190;margin:3px 0 0;overflow-wrap:anywhere}.toast-close{border:0;background:transparent;color:#6c809c;font-size:22px;padding:0;width:24px;height:30px;cursor:pointer}.toast::after{content:"";position:absolute;bottom:0;left:18px;right:18px;height:2px;background:var(--toast-color);transform-origin:left;animation:ui-toast-life 7s linear forwards}.toast:hover::after,.toast:focus-within::after{animation-play-state:paused}.spinner,.busy::after{animation:ui-spin .7s linear infinite}.busy{position:relative}.busy::after{content:"";display:inline-block;width:14px;height:14px;min-width:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;margin-left:4px}.view-in,.page{animation:ui-enter .25s ease-out}.menu-btn,.drawer-close,.suite-bottom,.drawer-shade{display:none}.startup{min-height:70vh;display:grid;place-items:center;color:var(--muted)}
#client{max-width:1080px!important;padding:24px!important}#client>.panel{padding:26px}#client form{display:grid;gap:16px;margin-top:20px}#client form .btn{justify-self:start}#client>.topbar h2{margin:0}.client-auth{margin:8vh auto!important;max-width:480px;padding:32px!important}.client-auth .brand{margin-bottom:28px}.client-auth h1{font-size:26px}.client-auth>p{font-size:12px;margin:10px 0;color:var(--muted)}.client-auth form>.btn{width:100%}.client-welcome h1{font-size:26px}.client-welcome p{margin:10px 0 0}.client-link{font-size:12px;display:inline-block;margin-top:22px;color:var(--accent)}
@keyframes ui-enter{from{opacity:.3;transform:translateY(8px)}to{opacity:1;transform:none}}@keyframes ui-dialog-in{from{transform:translateY(10px)}to{transform:none}}@keyframes ui-spin{to{transform:rotate(360deg)}}@keyframes ui-toast-life{to{transform:scaleX(0)}}
@media(hover:hover){.nav a:hover{transform:translateX(2px);background-color:#ffffff88}.nav a.active:hover,.nav a[aria-current=page]:hover{color:#fff}.btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:inset 0 1px 0 #fff,0 5px 14px #45639812}.stat:hover{transform:translateY(-2px)}.stat{transition:transform .18s ease-out}.table tbody tr:hover,.devices-table tbody tr:hover{background:#ffffff70}.workspace-switch>a:hover{background:#ffffff85}}
@media(min-width:1024px) and (max-width:1250px){.layout,.shell{grid-template-columns:216px minmax(0,1fr);padding:18px;gap:20px}.sidebar{top:18px;height:calc(100dvh - 36px)}.brand strong{font-size:16px}.panel{padding:20px}.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.account-name,.user-name{max-width:115px}.network-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.table td,.table th{padding:12px 8px}}
@media(max-width:1100px){.login-wrap{margin:40px 24px}.login-intro{padding:35px}.login-intro h1{font-size:36px}.login-panel{padding:36px 28px}}
@media(max-width:1023px){
 .layout,.shell{display:block;padding:16px;min-height:100dvh}.main{padding-bottom:82px}.topbar{position:relative;top:auto;min-height:68px;padding:11px 13px;border-radius:22px;margin-bottom:24px;backdrop-filter:none;-webkit-backdrop-filter:none}.topbar .brand{display:none}.menu-btn{display:inline-flex;min-width:40px;padding:9px}.account-name,.user-name{display:none}.account,.top-right{gap:8px}.account .avatar,.top-right .avatar{display:none}.workspace-switch{font-size:10px;padding:3px;gap:0}.workspace-switch>a,.workspace-current{padding:7px 9px;min-height:31px}.workspace-switch svg{display:none}
 .sidebar{display:flex;position:fixed;top:0;left:0;bottom:0;width:min(360px,calc(100vw - 32px));height:100dvh;z-index:101;padding:26px 18px max(20px,env(safe-area-inset-bottom));border-radius:0 28px 28px 0;background:linear-gradient(145deg,#fcfdff,#eef5ff);backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:0 18px 60px #263e6529;transform:translateX(-105%);visibility:hidden;transition:transform .23s ease-out,visibility .23s}.sidebar.open{transform:none;visibility:visible}.sidebar-brand{padding:0 0 25px}.sidebar .brand img{width:43px;height:43px}.sidebar .brand strong{font-size:21px}.sidebar .brand small{font-size:11px}.drawer-close{display:inline-flex;min-width:40px;height:40px;padding:0;font-size:25px;color:#607590;flex:none}.sidebar .nav{padding:0 2px 10px;gap:7px}.sidebar .nav a{font-size:13px;min-height:48px;padding:13px}.nav-group-label{font-size:10px}.drawer-shade:not([hidden]){display:block;position:fixed;inset:0;border:0;border-radius:0;background:#28405e55;z-index:100;cursor:default}.nav-open{overflow:hidden}.nav-open .suite-bottom{visibility:hidden}
 .suite-bottom{position:fixed;display:flex;bottom:max(10px,env(safe-area-inset-bottom));left:16px;right:16px;z-index:30;gap:2px;align-items:stretch;padding:7px;background:linear-gradient(140deg,#fcfdfff5,#edf5fff5);border:1px solid #fff;border-radius:21px;box-shadow:inset 0 1px 0 #fff,0 8px 28px #25457514}.suite-bottom>a,.suite-bottom>button{display:flex;flex:1;min-width:0;flex-direction:column;align-items:center;justify-content:center;gap:5px;border:0;border-radius:14px;background:transparent;color:#637c9c;font-size:10px;font-weight:700;line-height:1.3;min-height:48px;padding:5px 3px;text-align:center}.suite-bottom span{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.suite-bottom svg{width:20px;height:20px;stroke-width:1.8}.suite-bottom .active,.suite-bottom [aria-current=page]{color:var(--accent);background:linear-gradient(140deg,#dfeaff,#eceaff)}
 .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.stat{padding:18px;border-radius:21px}.stat strong{font-size:25px}.page-head{flex-wrap:wrap;gap:16px}.page-head>.actions,.page-head>.head-actions{flex-wrap:wrap;flex-shrink:1}.network-grid,.detail-grid{grid-template-columns:minmax(0,1fr)}.detail-grid .detail-column{min-width:0}.detail-grid .panel+.panel{margin-top:20px}.panel,.table-shell{border-radius:22px}.permission-grid,.choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.table{table-layout:auto}.cards{grid-template-columns:minmax(0,1fr)}.mobile-nav{display:none!important}
}
@media(max-width:760px){
 .layout,.shell{padding:12px}.topbar{gap:7px;padding:9px 10px;min-height:64px}.top-start{gap:6px}.account .icon-btn,.top-right .icon-btn{min-width:34px;width:34px;height:36px;min-height:36px;padding:7px}.menu-btn{min-width:34px;min-height:36px;padding:7px}.top-right,.account{gap:5px}h1{font-size:25px;letter-spacing:-.8px}.page-head p{font-size:12px}.page-head>.actions,.page-head>.head-actions{width:100%}.page-head .btn{flex:1}.panel{padding:18px}.grid,.network-grid{gap:16px}.panel-head,.section-head{margin-bottom:16px}.panel-head>.btn,.section-head>.btn{min-height:36px;padding:8px 10px}.stats{gap:10px}.stat{padding:16px;gap:11px}.stat strong{font-size:23px}.stat .label{font-size:10px;margin-bottom:14px}.stat small{font-size:10px}.stat-icon{width:32px;height:32px;border-radius:10px}.stat-icon svg{width:17px;height:17px}.stat .stat-icon{top:13px;right:12px}.table,.table tbody,.table tr,.table td,.devices-table,.devices-table tbody,.devices-table tr,.devices-table td{display:block;width:100%}.table thead,.devices-table thead{display:none}.table tr,.devices-table tr{margin:0 0 12px;border:1px solid #dbe5f3;padding:15px;border-radius:17px;background:linear-gradient(130deg,#ffffff,#f4f8ff)}.table tbody tr:nth-child(even),.devices-table tbody tr:nth-child(even){background:linear-gradient(130deg,#ffffff,#f4f8ff)}.table td,.devices-table td{border:0;padding:6px 0;white-space:normal;font-size:12px;min-width:0}.table td[data-label]:before{content:attr(data-label);display:block;font-size:10px;color:#6b80a0;letter-spacing:.4px;margin-bottom:4px}.table td .actions{justify-content:flex-start;margin-top:6px}.table td .actions .btn{flex:1;min-height:42px;font-size:12px}.devices-table .model-col{display:block}.devices-table .row-action .btn{width:100%;min-height:44px;margin:5px 0 0}.devices-table .device-title strong{font-size:14px}.devices-table .device-title small{overflow-wrap:anywhere}.table-shell{padding:13px}.table-shell .pagination{padding:5px}.devices-table .last-inform{font-size:11px}.form-grid,.permission-grid,.choice-grid{grid-template-columns:minmax(0,1fr)}.span-2{grid-column:1/-1}.toolbar input,.toolbar select,.toolbar .search{max-width:none;min-width:0}.toolbar .search{flex:1 1 100%}.toolbar select{flex:1}.toolbar{flex-wrap:wrap}.section-head h2{font-size:16px}.network-row{gap:10px}.network-row>div{min-width:0}.network-row strong{overflow-wrap:anywhere}.metric-value{flex-shrink:0}.metric-value strong{font-size:15px}.facts>div{gap:8px}.facts dd{overflow-wrap:anywhere}.job{padding:18px;flex-wrap:wrap}.job h3{overflow-wrap:anywhere}.job-actions .btn{min-height:44px}.destination{padding:15px}.banner{align-items:flex-start;flex-wrap:wrap}.banner>div{flex:1;min-width:0}.row{gap:10px}.overview-strip{gap:8px;flex-wrap:wrap;padding:14px}.detail-grid>div:not(.detail-column){padding:12px}.detail-grid{gap:16px}.suite-bottom{left:12px;right:12px}.footer{margin-bottom:10px}
 dialog{width:calc(100% - 20px);max-height:92dvh;border-radius:23px}.modal-head{padding:17px 18px;min-height:67px}.modal-head h2{font-size:18px}.modal-body{padding:18px}.modal-actions .btn,.modal-foot .btn{flex:1}.modal-head .btn{min-height:40px}#toasts{inset:12px 12px auto auto;width:calc(100vw - 24px)}.toast{padding:13px;gap:9px}.toast-copy p{font-size:12px}.login-wrap{display:flex;flex-direction:column;max-width:480px;margin:24px auto;width:calc(100% - 28px);gap:0;border-radius:25px}.login-intro{padding:27px;display:block}.login-intro .eyebrow{margin-top:24px!important}.login-intro h1{font-size:30px;margin:10px 0 0;letter-spacing:-1px}.login-intro p,.login-chips{display:none}.login-panel{padding:28px 25px}.login-panel h2{font-size:24px}.login-panel form{margin-top:22px}.login-panel .hint{margin-top:18px!important}#client{padding:12px!important}#client>.panel{padding:20px}.client-auth{margin:26px auto!important}.client-welcome h1{font-size:23px}
}
@media(max-width:380px){.workspace-switch>a,.workspace-current{padding:6px 7px;font-size:9px}.topbar{padding:8px}.stat{padding:14px}.stat strong{font-size:21px}.suite-bottom>a,.suite-bottom>button{font-size:9px}.account,.top-right{gap:3px}.top-start{gap:4px}.page-head>.actions .btn{flex-basis:40%}}
@media(prefers-reduced-motion:reduce){.view-in,.page,.toast,dialog[open]{animation:none}.toast::after{animation:none}.btn,.nav a,.sidebar,.stat{transition:none}.spinner,.busy::after{animation-duration:1.4s}}
@media(forced-colors:active){input[type=checkbox]{appearance:auto;background:none;border-color:CanvasText}.btn,.nav a.active,.nav a[aria-current=page]{border:1px solid ButtonText}select:not([multiple]):not([size]){appearance:auto;background:Canvas}.glass{border-color:CanvasText}.workspace-current{border:1px solid Highlight}}
@media print{body{background:white}#app,#root,#toasts,.suite-bottom,.drawer-shade,.modal-head,.modal-actions,.modal-foot{display:none!important}dialog{display:block!important;position:static;border:0;box-shadow:none;width:100%;max-height:none;overflow:visible;background:white;animation:none}.modal-body{padding:0}.voucher{color:#000}.voucher-grid{grid-template-columns:repeat(3,1fr)}#client .topbar,#client form{display:none}}
/* Final module compatibility: central branding retains the STARVPN gradient treatment. */
.suite-mode .btn.primary,.suite-mode .nav a[aria-current=page]{background:var(--ui-primary);color:#fff}
#client>.topbar .brand{display:flex}
/* Keep action labels readable at all sizes; no hidden mobile button captions. */
.head-actions .btn span{display:inline}
@media(max-width:760px){.detail-grid .detail-column .panel+.panel{margin-top:0}.charts-grid,.settings-grid{grid-template-columns:minmax(0,1fr)}}
body{display:flow-root}.login-intro{overflow:hidden}
input[type=file]::file-selector-button{font:inherit;border:1px solid #cddbed;border-radius:8px;background:#f7faff;color:#34567f;padding:5px 9px;margin-right:10px;cursor:pointer}
.page-head>.head-actions .btn span{display:inline}

/* R2.2 compact account forms and bounded motion. */
.permission-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:14px;min-width:0}
.permission-grid fieldset{min-width:0;padding:16px;border:1px solid #ffffffc9;border-radius:18px;background:#ffffff80}
.permission-grid .check{display:flex;align-items:center;gap:10px;min-height:38px}
input[type=checkbox]{appearance:none;width:20px;height:20px;min-width:20px;border:1px solid #9aafd0;border-radius:6px;background:#ffffffb8;box-shadow:inset 0 1px 3px #3a5b8920;transition:background .2s,border-color .2s,transform .2s;display:inline-grid;place-content:center}
input[type=checkbox]:checked{background:var(--accent,#5268e8);border-color:transparent}
input[type=checkbox]:checked:after{content:'✓';color:white;font-size:15px;font-weight:800}
input:focus-visible,select:focus-visible,button:focus-visible,a:focus-visible{outline:3px solid #527fe660;outline-offset:3px}
.btn,.nav a,input,select,textarea{transition:color .2s,background-color .2s,border-color .2s,box-shadow .2s,transform .2s}
@media(hover:hover) and (min-width:1024px){.btn:hover{transform:translateY(-2px);box-shadow:0 7px 18px #36559520}.nav a:hover{transform:translateX(3px)}.stat:hover,.cards>.panel:hover{transform:translateY(-3px)}.stat,.cards>.panel{transition:transform .3s,box-shadow .3s}}
.modal-body{overscroll-behavior:contain}pre{white-space:pre-wrap;overflow-wrap:anywhere}#captcha{min-height:0;max-width:100%}.login-panel .actions{margin-top:16px}.detail-grid strong{overflow-wrap:anywhere}
@media(max-width:420px){#captcha{transform:scale(.87);transform-origin:left top;margin-bottom:-8px}.form-grid{grid-template-columns:minmax(0,1fr)}}
@media(prefers-reduced-motion:reduce){.btn:hover,.nav a:hover,.stat:hover,.cards>.panel:hover{transform:none}}
/* R2.4.1: visible feedback with bounded transform/opacity motion. */
.spinner{display:inline-block;flex:none;width:18px;height:18px;min-width:18px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;vertical-align:middle;animation:ui-spin .75s linear infinite}
.loading-state241{padding:22px 0;min-height:360px;color:#536d96}.loading-title241{display:flex;align-items:center;gap:12px;margin:0 0 25px;font-size:14px}.loading-title241 .spinner{width:25px;height:25px;border-width:3px;color:var(--accent)}
.skeleton-stats241{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-bottom:20px}.skeleton-stats241>i,.skeleton-panel241{background:#ffffff9e;border:1px solid #fff;border-radius:22px;box-shadow:inset 0 1px 0 white;overflow:hidden;position:relative}.skeleton-stats241>i{height:105px}.skeleton-panel241{padding:28px;display:grid;gap:24px}.skeleton-panel241 i{display:block;height:15px;border-radius:8px;background:#dce6f6;width:82%}.skeleton-panel241 i:nth-child(even){width:61%}
.skeleton-panel241:after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,#fff9 50%,transparent 70%);animation:ui-skeleton241 1.5s ease-in-out infinite;transform:translateX(-100%);pointer-events:none}
.request-progress241{position:fixed;left:0;right:0;top:0;height:3px;z-index:2147483647;overflow:hidden;background:#b7c7fa33;pointer-events:none}.request-progress241:after{content:"";display:block;width:35%;height:100%;background:linear-gradient(90deg,#3e8afa,#9871ef);animation:ui-request241 1s ease-in-out infinite}.request-progress241[hidden]{display:none}
@keyframes ui-request241{from{transform:translateX(-100%)}to{transform:translateX(390%)}}@keyframes ui-skeleton241{to{transform:translateX(100%)}}
dialog[open]{animation:none}dialog[data-closing]{pointer-events:none}.view-in,.page,.router-card24,.hub-body24{animation:none}.btn:hover:not(:disabled){transform:translateY(-2px)}
@media(max-width:600px){.skeleton-stats241{gap:10px}.skeleton-stats241>i{height:80px}.skeleton-panel241{padding:22px}.loading-state241{min-height:300px}}
@media(prefers-reduced-motion:reduce){.skeleton-panel241:after{animation:none}.btn:hover:not(:disabled){transform:none}}