/* MASKPROXY identity: one lockup and accent system, with accessible surface variants. */
@font-face{font-family:Inter;src:url('/static/fonts/inter-variable.ttf') format('truetype');font-weight:100 900;font-display:optional}
@font-face{font-family:Plex;src:url('/static/fonts/plex-arabic-regular.ttf') format('truetype');font-weight:400;font-display:optional}
@font-face{font-family:Plex;src:url('/static/fonts/plex-arabic-semibold.ttf') format('truetype');font-weight:600 800;font-display:optional}
html[dir]:root{--brand-paper:#f8fafc;--brand-ink:#202735;--brand-primary:#263449;--brand-primary-hover:#34445d;--brand-purple:#6350df;--brand-purple-hover:#5140c2;--brand-lime:#93c5fd;--brand-soft:#eeebff;--brand-muted:#626a76;--brand-line:#d9dce1;--purple:var(--brand-purple);--purple-soft:var(--brand-soft);--mp-teal:var(--brand-primary);--accent:var(--brand-purple);--accent-soft:var(--brand-soft)}
html[dir] body{font-family:Inter,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased}
html[dir=rtl] body{font-family:Plex,'Segoe UI',sans-serif}
html[dir] body :is(button,input,select,textarea){font-family:inherit}
html[dir] body .mp-brand{display:inline-flex;align-items:center;justify-content:flex-start;flex-direction:row;gap:10px;direction:ltr;unicode-bidi:isolate;flex-shrink:0;width:max-content;max-width:100%;font:750 24px/1 Inter,'Segoe UI',sans-serif;letter-spacing:-1px;color:var(--brand-ink);text-decoration:none;white-space:nowrap}
html[dir] body .mp-brand-mark{display:grid;place-items:center;flex:0 0 39px;width:39px;height:39px;border-radius:11px;background:var(--brand-ink);color:var(--brand-lime);box-shadow:none}
html[dir] body .mp-brand-mark svg{display:block;width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transform:none}
html[dir] body .mp-brand-name{display:inline;direction:ltr;font:inherit;color:inherit;letter-spacing:inherit}
html[dir] body .mp-brand-dot{display:inline;color:var(--brand-purple);font:inherit}
html[dir] body .mp-brand-caption{display:block;margin:12px 0 20px;font-size:11px;font-weight:500;color:var(--brand-muted);letter-spacing:.04em}
html[dir] body :is(a,button,input,select,textarea,summary):focus-visible{outline:3px solid #9d8ff0;outline-offset:4px}
html[dir] body :is(.primary,.auth-submit,.support-entry button,.support-launcher,.support-visitor-primary){background:var(--brand-primary);border-color:var(--brand-primary);color:#fff;box-shadow:0 5px 14px #20273518;transition:background .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease}
html[dir] body :is(.primary,.auth-submit,.support-entry button,.support-launcher,.support-visitor-primary):hover{background:var(--brand-primary-hover);border-color:var(--brand-primary-hover);color:#fff;box-shadow:0 7px 18px #20273524;transform:translateY(-1px)}
html[dir] body :is(.primary,.auth-submit,.support-entry button,.support-launcher,.support-visitor-primary):active{transform:translateY(0);box-shadow:0 3px 9px #2027351c}
html[dir] body :is(.primary,.auth-submit,.support-entry button,.support-launcher,.support-visitor-primary):focus-visible{outline-color:var(--brand-lime)}

html[dir] body.user-auth,html[dir] body.auth-page,html[dir] body.brand-login{background:var(--brand-paper);color:var(--brand-ink)}
html[dir] body.user-auth::before{background-image:radial-gradient(#babfc9 1px,transparent 1px);opacity:.3}
html[dir] .auth-header{direction:inherit}
html[dir] .auth-layout{border-color:var(--brand-line);box-shadow:0 18px 54px #20273508}
html[dir] .auth-intro{background:var(--brand-ink)}
html[dir] .auth-kicker{color:#c8cdd5}
html[dir] .auth-kicker>span{background:var(--brand-lime);box-shadow:0 0 0 4px #93c5fd12}
html[dir] .auth-intro h2>span{color:var(--brand-lime)}
html[dir] .auth-intro-copy,html[dir] .auth-intro-foot{color:#bec5d0}
html[dir] .auth-network{background:#283141;border-color:#465163}
html[dir] :is(.auth-network-top,.auth-network-bottom){border-color:#465163;color:#d5dbe5}
html[dir] :is(.auth-network-mark,.auth-device,.auth-benefits svg){color:#9eabc5}
html[dir] .auth-device-m{stroke:var(--brand-lime)}
html[dir] .auth-flow-line{background:#545f76}
html[dir] .auth-flow-line::after,html[dir] .auth-protocols i{background:var(--brand-lime)}
html[dir] .auth-network-hub{background:#3b4140;border-color:#67799d;color:var(--brand-lime);box-shadow:0 0 0 6px #93c5fd08}
html[dir] .auth-protocols>span{background:#30394a;border-color:#4c586a;color:#e2e6ee}
html[dir] .auth-network-bottom>svg{color:var(--brand-lime)}
html[dir] .auth-benefits li{color:#e0e5ed}
html[dir] .auth-form-symbol{background:var(--brand-soft);border-color:#ddd7fa;color:var(--brand-purple)}
html[dir] :is(.auth-form-heading h1,.auth-field label){color:var(--brand-ink)}
html[dir] :is(.auth-form-description,.auth-overline,.auth-hint,.auth-switch,.auth-panel-foot,.auth-page-footer){color:var(--brand-muted)}
html[dir] :is(.auth-panel-foot,.verify-footer){border-color:var(--brand-line)}
html[dir] .auth-field input{color:var(--brand-ink);border-color:var(--brand-line)}
html[dir] .auth-field input:hover{border-color:#ada5cc}
html[dir] :is(.auth-field input,.verify-card input):focus{border-color:var(--brand-purple);box-shadow:0 0 0 3px #6350df1a}
html[dir] body :is(.auth-forgot,.auth-switch a,.auth-hint a,.recovery-help a,.auth-page-footer a:hover,.verify-context a,.verify-eyebrow,.verify-card #verify-resend){color:var(--brand-purple)!important;text-decoration-color:#c5bdf3}
html[dir] .auth-password-toggle:hover{background:var(--brand-soft);color:var(--brand-purple)}
html[dir] .user-auth .language-switch{border-color:var(--brand-line);color:var(--brand-ink)}
html[dir] .user-auth .language-switch:hover{background:var(--brand-soft);border-color:#c5bdf3}
html[dir] .verify-card{border-color:var(--brand-line)}
html[dir] .verify-envelope svg{fill:var(--brand-soft);stroke:var(--brand-purple)}
html[dir] body.brand-login .login-card{background:#fff;border-color:var(--brand-line);box-shadow:0 24px 70px #2027350d}
html[dir] body.brand-login :is(h1,label){color:var(--brand-ink)}
html[dir] body.brand-login :is(.muted,.eyebrow,.auth-links){color:var(--brand-muted)}
html[dir] body.brand-login :is(input,.language-switch){background:#fff;border-color:var(--brand-line);color:var(--brand-ink)}
html[dir] body.brand-login .auth-links a{color:var(--brand-purple)}

html[dir] body.brand-workspace,html[dir] body.brand-portal{--accent:#8f7cf5;--accent-soft:#302947;background:#202735;color:#e9ecf2}
html[dir] body.brand-workspace .workspace{background:#202735}
html[dir] body.brand-workspace .sidebar{background:#f8fafc;border-color:#d9dce1;color:#202735}
html[dir] body.brand-workspace .sidebar .mp-brand{color:var(--brand-ink)}
html[dir] body.brand-workspace .sidebar :is(.workspace-switch,.sidebar-download){background:#fff;border-color:var(--brand-line);color:var(--brand-ink)}
html[dir] body.brand-workspace .sidebar :is(.workspace-switch small,.sidebar-foot small,.nav-label,.sidebar-support){color:var(--brand-muted)}
html[dir] body.brand-workspace .sidebar :is(.workspace-avatar,.admin-avatar){background:var(--brand-soft);border-color:#d9d2fa;color:var(--brand-purple)}
html[dir] body.brand-workspace .sidebar .nav{color:#4a5260}
html[dir] body.brand-workspace .sidebar .nav:hover{background:#e7e9ee;color:var(--brand-ink)}
html[dir] body.brand-workspace .sidebar .nav.active{background:var(--brand-soft);color:#5140c2;border-inline-start-color:var(--brand-purple);box-shadow:none}
html[dir] body.brand-workspace .sidebar .nav.active .icon{color:var(--brand-purple)}
html[dir] body.brand-workspace .sidebar .nav-count{background:#e4e0f5;color:#5140c2}
html[dir] body.brand-workspace .sidebar-foot{border-color:var(--brand-line);color:var(--brand-ink)}
html[dir] body.brand-workspace .sidebar-foot .icon-button{background:transparent;color:var(--brand-muted);border-color:var(--brand-line)}
html[dir] body.brand-workspace :is(.topbar,.fleet-scroll){background:#202735}
html[dir] body.brand-workspace :is(.device-tabs button.active,.view-switch .active){background:#37304e;color:#d0c4ff}
html[dir] body.brand-workspace :is(.back-link,.text-button,.workspace-quick-help a,.endpoint-row code,.form-disclosure>summary){color:#c0b2ff}
html[dir] body.brand-workspace :is(.device-avatar,.square-icon,.relay-icon,.protocol-icon,.metric-icon,.integration-node-icon){background:#37304e;border-color:#5f517e;color:#c8bcff}
html[dir] body.brand-workspace :is(.quota-meter span,.latency-bar span,.chart-column){background:#a092f6}
html[dir] body.brand-workspace .connection-row::before{background:#a092f6}
html[dir] body.brand-workspace .connection-symbol{background:#37304e;border-color:#675788;color:#c8bcff}
html[dir] body.brand-workspace .workspace-kicker{color:var(--brand-lime)}
/* Support is a dark utility surface, with a contrast-safe wordmark variant. */
html[dir] body.support-center-page{background:var(--brand-ink)}
html[dir] body.support-center-page .mp-brand,html[dir] body.brand-portal .mp-brand{color:#f8fafc}
html[dir] body.support-center-page .mp-brand-dot,html[dir] body.brand-portal .mp-brand-dot{color:#ad9cff}
html[dir] body.support-center-page :is(.auth-kicker,.support-guide article>span){color:var(--brand-lime)}
html[dir] body.support-center-page :is(a:not(.mp-brand),.support-email a){color:#c0b2ff}
html[dir] body.support-center-page .support-email a{color:#c0b2ff!important}
html[dir] .support-widget{--sw-bg:#202735;--sw-line:#424b5c}
html[dir] .support-widget .support-compact{--sc-accent:#c0b2ff}
html[dir] :is(.support-symbol,.support-footer-mark){background:#37304e;border-color:#675788;color:var(--brand-lime)}
html[dir] .support-brand{font-family:Inter,'Segoe UI',sans-serif;font-weight:750}
html[dir] .support-brand>span{color:#ad9cff}
/* Public calls to action use the same quiet graphite system as the workspace.
   The public stylesheet's `.button.primary` selector is more specific than
   the shared `.primary` rule above, so keep this explicit to prevent a
   stray purple CTA from breaking the product identity. */
html[dir] body.public-site .button.primary{background:var(--brand-primary);border-color:var(--brand-primary);color:#fff;box-shadow:0 5px 14px #20273518}
html[dir] body.public-site .button.primary:hover{background:var(--brand-primary-hover);border-color:var(--brand-primary-hover);color:#fff;box-shadow:0 7px 18px #20273524;transform:translateY(-1px)}
html[dir] body.public-site .button.primary:active{transform:translateY(0);box-shadow:0 3px 9px #2027351c}
html[dir] body.public-site .button.primary:focus-visible{outline-color:var(--brand-lime)}
@media(max-width:530px){html[dir] body .mp-brand{font-size:22px;gap:9px}html[dir] body .mp-brand-mark{flex-basis:35px;width:35px;height:35px;border-radius:10px}html[dir] body .mp-brand-mark svg{width:24px;height:24px}}


html[dir]:root{
 --brand-primary:#2563eb;
 --brand-primary-hover:#1d4ed8;
 --brand-purple:#2563eb;
 --brand-purple-hover:#1d4ed8;
 --brand-lime:#93c5fd;
 --brand-soft:#eaedf3;
 --brand-muted:#68798a;
 --brand-line:#d8e2e8;
 --purple:var(--brand-purple);
 --purple-soft:var(--brand-soft);
 --accent:var(--brand-purple);
 --accent-soft:var(--brand-soft);
 --mp-teal:#2563eb;
}

html[dir] body :is(a,button,input,select,textarea,summary):focus-visible{
 outline-color:#5a74a9;
}

/* Shared primary action: solid ink, restrained depth, no gradient. */
html[dir] body :is(.primary,.auth-submit,.support-entry button,.support-launcher,.support-visitor-primary){
 background:var(--brand-primary);
 border-color:var(--brand-primary);
 color:#fff;
 box-shadow:0 4px 12px rgba(24,58,80,.16);
 transition:background .16s ease,border-color .16s ease,box-shadow .16s ease,transform .16s ease;
}
html[dir] body :is(.primary,.auth-submit,.support-entry button,.support-launcher,.support-visitor-primary):hover{
 background:var(--brand-primary-hover);
 border-color:var(--brand-primary-hover);
 color:#fff;
 box-shadow:0 6px 16px rgba(24,58,80,.2);
 transform:translateY(-1px);
}
html[dir] body :is(.primary,.auth-submit,.support-entry button,.support-launcher,.support-visitor-primary):active{
 transform:translateY(0);
 box-shadow:0 2px 7px rgba(24,58,80,.15);
}
html[dir] body :is(.primary,.auth-submit,.support-entry button,.support-launcher,.support-visitor-primary):focus-visible{
 outline-color:#93c5fd;
}

/* Public site actions use the same scale for hero, nav and pricing cards. */
html[dir] body.public-site .button{
 border-radius:8px;
 border:1px solid var(--brand-primary);
 background:var(--brand-primary);
 color:#fff;
 box-shadow:0 4px 12px rgba(24,58,80,.14);
 transition:background .16s ease,border-color .16s ease,box-shadow .16s ease,transform .16s ease;
}
html[dir] body.public-site .button:hover{
 background:var(--brand-primary-hover);
 border-color:var(--brand-primary-hover);
 color:#fff;
 box-shadow:0 6px 16px rgba(24,58,80,.18);
 transform:translateY(-1px);
}
html[dir] body.public-site .button.outline{
 background:transparent;
 border-color:#b7c9d3;
 color:var(--brand-primary);
 box-shadow:none;
}
html[dir] body.public-site .button.outline:hover{
 background:#f0f2f7;
 border-color:var(--brand-primary);
 color:var(--brand-primary-hover);
 box-shadow:none;
}
html[dir] body.public-site .button.text-button{
 background:transparent;
 border-color:transparent;
 color:var(--brand-primary);
 box-shadow:none;
}
html[dir] body.public-site .button.text-button:hover{
 background:transparent;
 border-color:transparent;
 color:var(--brand-purple-hover);
 box-shadow:none;
 transform:none;
}
html[dir] body.public-site :is(.language-button,.menu-toggle){
 color:var(--brand-primary);
}
html[dir] body.public-site .menu-toggle:hover,
html[dir] body.public-site .language-button:hover{
 background:#edf0f5;
 border-color:#c6cedd;
 color:var(--brand-primary-hover);
}

/* Dashboard and customer portal secondary actions stay quiet beside the CTA. */
html[dir] body:is(.brand-workspace,.brand-portal) button:not(.icon-button):not(.text-button):not(.support-nav-button):not(.primary):not(.auth-submit){
 border-radius:8px;
 border-color:#cbd8e0;
 background:#fff;
 color:#30485d;
 box-shadow:none;
 transition:background .16s ease,border-color .16s ease,color .16s ease;
}
html[dir] body:is(.brand-workspace,.brand-portal) button:not(.icon-button):not(.text-button):not(.support-nav-button):not(.primary):not(.auth-submit):hover{
 background:#edf0f5;
 border-color:#9ea9c0;
 color:var(--brand-primary);
}
html[dir] body:is(.brand-workspace,.brand-portal) :is(.text-button,.text-link,.back-link,.workspace-quick-help a){
 color:var(--brand-purple);
}
html[dir] body:is(.brand-workspace,.brand-portal) :is(.text-button,.text-link,.back-link,.workspace-quick-help a):hover{
 color:var(--brand-purple-hover);
}
html[dir] body.brand-workspace :is(.device-tabs button.active,.view-switch .active){
 background:var(--brand-soft);
 border-color:#b6c1d8;
 color:var(--brand-purple-hover);
 box-shadow:none;
}
html[dir] body.brand-workspace :is(.account-tabs button.active,.connection-nav button.active){
 background:var(--brand-primary);
 border-color:var(--brand-primary);
 color:#fff;
 box-shadow:0 3px 9px rgba(24,58,80,.14);
}
html[dir] body.brand-workspace .sidebar .nav.active{
 background:var(--brand-soft);
 color:var(--brand-purple-hover);
 border-inline-start-color:var(--brand-purple);
}
html[dir] body.brand-workspace .sidebar .nav.active .icon{color:var(--brand-purple)}
html[dir] body.brand-workspace .fleet-actions .icon-button:hover{
 background:#edf0f5;
 color:var(--brand-primary);
}

/* Auth forms need a strong submit and a neutral utility button. */
html[dir] body.user-auth :is(form button:not(.auth-submit):not(.auth-password-toggle),.verify-footer button){
 border-radius:8px;
 border:1px solid #cbd8e0;
 background:#fff;
 color:#30485d;
 box-shadow:none;
 transition:background .16s ease,border-color .16s ease,color .16s ease;
}
html[dir] body.user-auth :is(form button:not(.auth-submit):not(.auth-password-toggle),.verify-footer button):hover{
 background:#edf0f5;
 border-color:#9ea9c0;
 color:var(--brand-primary);
}
html[dir] body.user-auth :is(.auth-forgot,.auth-switch a,.auth-hint a,.recovery-help a,.verify-context a,.verify-eyebrow,.verify-card #verify-resend){
 color:var(--brand-purple)!important;
 text-decoration-color:#b5c0d6;
}
html[dir] body.user-auth :is(.auth-field input,.verify-card input):focus{
 border-color:var(--brand-purple);
 box-shadow:0 0 0 3px rgba(37,99,235,.14);
}

/* Support uses the same accent without bright cobalt leakage. */
html[dir] body.support-center-page .support-primary,
html[dir] body.support-center-page .support-entry button{
 background:var(--brand-primary);
 border-color:var(--brand-primary);
}
html[dir] body.support-center-page .support-primary:hover,
html[dir] body.support-center-page .support-entry button:hover{
 background:var(--brand-primary-hover);
 border-color:var(--brand-primary-hover);
}
html[dir] .support-widget .support-compact{--sc-accent:#7188b5}


html[dir] body.public-site .network-art{
 background:#e8eaef;
 border-color:#d1d6df;
 box-shadow:inset 0 1px 0 #ffffffcc;
}
html[dir] body.public-site .art-grid{
 background-image:linear-gradient(#c9ced980 1px,transparent 1px),linear-gradient(90deg,#c9ced980 1px,transparent 1px);
}
html[dir] body.public-site :is(.orbit,.orbit-two){border-color:#b7becb}
html[dir] body.public-site .orbit-two:after{
 border-color:#e8eaef;
 background:var(--brand-purple);
 box-shadow:0 0 0 5px rgba(37,99,235,.12);
}
html[dir] body.public-site .phone-illustration{
 box-shadow:20px 30px 50px rgba(32,39,53,.16),-2px -2px 0 #ffffffcc;
}
html[dir] body.public-site .phone-bars i{background:#75829b}
html[dir] body.public-site .phone-bars i:nth-child(3n){background:var(--brand-lime)}
html[dir] body.public-site .protocol-chip{box-shadow:0 8px 24px rgba(32,39,53,.10)}
html[dir] body.public-site .art-route{box-shadow:0 10px 28px rgba(32,39,53,.10)}
html[dir] body.public-site .route-icon{
 background:var(--brand-soft);
 color:var(--brand-purple);
}
html[dir] body.public-site :is(.feature-icon,.feature-card,.plan,.contact-card,.trust-cards>a,.editorial-panel,.legal-contact){
 box-shadow:0 4px 22px rgba(32,39,53,.045);
}
html[dir] body.public-site .feature-icon{background:var(--brand-soft)}
html[dir] body.public-site .feature-card{background:#fff}
html[dir] body.public-site :is(.plan-highlight,.editorial-panel,.legal-contact){
 background:#edeff4;
 border-color:#d4d9e3;
}
html[dir] body.public-site .plan-highlight{border-width:2px}
html[dir] body.public-site .plan-tag{background:var(--brand-primary)}
html[dir] body.public-site .connection-story .eyebrow{color:#a9b7d2}
html[dir] body.public-site .flow-symbol{background:#2f3c57;color:#b8c4db}
html[dir] body.public-site .flow-line{border-color:#7886a1}
html[dir] body.public-site .flow-line:after{color:#a9b7d2}
html[dir] body.public-site .trust-summary{border-color:#d4d8df}


html[dir] body:is(.brand-workspace,.brand-portal){
 --accent:var(--brand-purple);
 --accent-soft:var(--brand-soft);
}
html[dir] body.brand-workspace :is(.device-tabs button.active,.view-switch .active){
 background:var(--brand-soft);
 border-color:#b6c1d8;
 color:var(--brand-purple-hover);
}
html[dir] body.brand-workspace :is(.device-avatar,.square-icon,.relay-icon,.protocol-icon,.metric-icon,.integration-node-icon){
 background:#e7eaf0;
 border-color:#c8cfdd;
 color:var(--brand-purple-hover);
}
html[dir] body.brand-workspace :is(.quota-meter span,.latency-bar span,.chart-column),
html[dir] body.brand-workspace .connection-row::before{background:#5f76a3}
html[dir] body.brand-workspace .connection-symbol{background:#e7eaf0;border-color:#c8cfdd;color:var(--brand-purple-hover)}

/* Disabled actions remain legible and clearly unavailable in every surface. */
html[dir] body :is(.button,button,.auth-submit):disabled,
html[dir] body :is(.button,button,.auth-submit)[aria-disabled=true]{
 background:#e7ecef;
 border-color:#d5dfe4;
 color:#8a98a4;
 box-shadow:none;
 cursor:not-allowed;
 transform:none;
}


html[dir]:root{
 --brand-primary:#2563eb;
 --brand-primary-hover:#1d4ed8;
 --brand-primary-active:#1e40af;
 --brand-purple:#2563eb;
 --brand-purple-hover:#1d4ed8;
 --brand-lime:#93c5fd;
 --brand-soft:#e8ebf2;
 --brand-muted:#667780;
 --brand-line:#d6dae3;
 --purple:var(--brand-purple);
 --purple-soft:var(--brand-soft);
 --accent:var(--brand-purple);
 --accent-soft:var(--brand-soft);
 --mp-teal:var(--brand-purple);
}

html[dir] body :is(.primary,.auth-submit,.support-entry button,.support-launcher,.support-visitor-primary),
html[dir] body.public-site .button{
 border:1px solid var(--brand-primary);
 border-radius:9px;
 background:var(--brand-primary);
 color:#fff;
 box-shadow:0 2px 6px rgba(24,54,66,.13),inset 0 1px 0 rgba(255,255,255,.08);
 transition:background .16s ease,border-color .16s ease,box-shadow .16s ease,transform .16s ease;
}
html[dir] body :is(.primary,.auth-submit,.support-entry button,.support-launcher,.support-visitor-primary):hover,
html[dir] body.public-site .button:hover{
 background:var(--brand-primary-hover);
 border-color:var(--brand-primary-hover);
 color:#fff;
 box-shadow:0 4px 10px rgba(24,54,66,.17),inset 0 1px 0 rgba(255,255,255,.08);
 transform:translateY(-1px);
}
html[dir] body :is(.primary,.auth-submit,.support-entry button,.support-launcher,.support-visitor-primary):active,
html[dir] body.public-site .button:active{
 background:var(--brand-primary-active);
 border-color:var(--brand-primary-active);
 box-shadow:0 1px 3px rgba(24,54,66,.14);
 transform:translateY(0);
}
html[dir] body :is(.primary,.auth-submit,.support-entry button,.support-launcher,.support-visitor-primary):focus-visible,
html[dir] body.public-site .button:focus-visible{
 outline:3px solid rgba(96,165,250,.78);
 outline-offset:3px;
}

/* Public secondary and text actions retain hierarchy without a second brand. */
html[dir] body.public-site .button.outline{
 background:transparent;
 border-color:#b8bfcc;
 color:var(--brand-primary);
 box-shadow:none;
}
html[dir] body.public-site .button.outline:hover{
 background:var(--brand-soft);
 border-color:#8e99b0;
 color:var(--brand-primary-hover);
 box-shadow:none;
 transform:none;
}
html[dir] body.public-site .button.text-button{
 background:transparent;
 border-color:transparent;
 color:var(--brand-primary);
 box-shadow:none;
}
html[dir] body.public-site .button.text-button:hover{
 background:transparent;
 border-color:transparent;
 color:var(--brand-purple-hover);
 box-shadow:none;
 transform:none;
}

/* Compact/header controls use the same radius and weight as their peers. */
html[dir] body.public-site :is(.button.compact,.language-button,.menu-toggle){
 border-radius:8px;
 font-weight:600;
}
html[dir] body.public-site :is(.language-button,.menu-toggle){
 border:1px solid transparent;
 background:transparent;
 color:var(--brand-primary);
 box-shadow:none;
}
html[dir] body.public-site :is(.language-button,.menu-toggle):hover{
 background:var(--brand-soft);
 border-color:#c4cad7;
 color:var(--brand-primary-hover);
 transform:none;
}


html[dir] body:is(.brand-workspace,.brand-portal) button:not(.icon-button):not(.text-button):not(.support-nav-button):not(.support-primary):not(.support-thread):not(.support-back):not(.danger):not(.link-button):not(.active):not([class*="support-"]):not(.primary):not(.auth-submit),
html[dir] body:is(.brand-workspace,.brand-portal) .button:not(.primary):not(.text-button){
 border:1px solid #cbd1dc;
 border-radius:8px;
 background:#fff;
 color:#303b52;
 box-shadow:none;
 transition:background .16s ease,border-color .16s ease,color .16s ease;
}
html[dir] body:is(.brand-workspace,.brand-portal) button:not(.icon-button):not(.text-button):not(.support-nav-button):not(.support-primary):not(.support-thread):not(.support-back):not(.danger):not(.link-button):not(.active):not([class*="support-"]):not(.primary):not(.auth-submit):hover,
html[dir] body:is(.brand-workspace,.brand-portal) .button:not(.primary):not(.text-button):hover{
 background:var(--brand-soft);
 border-color:#9da7bb;
 color:var(--brand-primary);
 box-shadow:none;
 transform:none;
}
html[dir] body:is(.brand-workspace,.brand-portal) :is(.text-button,.text-link,.back-link,.workspace-quick-help a){color:var(--brand-purple)}
html[dir] body:is(.brand-workspace,.brand-portal) :is(.text-button,.text-link,.back-link,.workspace-quick-help a):hover{color:var(--brand-purple-hover)}
html[dir] body:is(.brand-workspace,.brand-portal) .icon-button{
 border-color:transparent;
 background:transparent;
 color:#647680;
 box-shadow:none;
}
html[dir] body:is(.brand-workspace,.brand-portal) .icon-button:hover{
 background:var(--brand-soft);
 color:var(--brand-primary);
 transform:none;
}

/* Disabled actions always read as unavailable while preserving contrast. */
html[dir] body :is(.button,button,.auth-submit):disabled,
html[dir] body :is(.button,button,.auth-submit)[aria-disabled=true]{
 background:#e6e9ee;
 border-color:#d2d7e0;
 color:#848d9e;
 box-shadow:none;
 cursor:not-allowed;
 transform:none;
}

/* Dynamic support actions and relay partials use utility classes generated at
   runtime; keep them inside the same action palette as static buttons. */
html[dir] body :is(.support-primary,.support-floating,.support-guest>a,.support-inbox .support-primary){
 background:var(--brand-primary);
 border:1px solid var(--brand-primary);
 border-radius:9px;
 color:#fff;
 box-shadow:0 2px 6px rgba(24,54,66,.13);
 transition:background .16s ease,border-color .16s ease,box-shadow .16s ease,transform .16s ease;
}
html[dir] body :is(.support-primary,.support-floating,.support-guest>a,.support-inbox .support-primary):hover{
 background:var(--brand-primary-hover);
 border-color:var(--brand-primary-hover);
 color:#fff;
 box-shadow:0 4px 10px rgba(24,54,66,.17);
 transform:translateY(-1px);
}
html[dir] body :is(.support-primary,.support-floating,.support-guest>a,.support-inbox .support-primary):active{
 background:var(--brand-primary-active);
 border-color:var(--brand-primary-active);
 box-shadow:0 1px 3px rgba(24,54,66,.14);
 transform:translateY(0);
}
html[dir] body :is(.support-primary,.support-floating,.support-guest>a,.support-inbox .support-primary):focus-visible{
 outline:3px solid rgba(96,165,250,.78);
 outline-offset:3px;
}
html[dir] body.support-center-page :is(.support-primary,.support-floating,.support-guest>a,.support-inbox .support-primary){
 background:var(--brand-primary);
 border-color:var(--brand-primary);
}
html[dir] body.support-center-page .language-switch{
 border-color:#404a5d;
 background:transparent;
 color:#d2d6de;
}
html[dir] body.support-center-page .language-switch:hover{
 background:#263147;
 border-color:#6d7c99;
 color:#fff;
}
html[dir] body.support-center-page .support-inbox{--sc-accent:var(--brand-purple)}
html[dir] .support-widget .support-compact{--sc-accent:#6d80a6}
html[dir] .support-widget .support-unread{background:var(--brand-purple);color:#fff}

/* Relay management is a server-rendered partial with legacy utility names. */
html[dir] body.brand-workspace :is([class~="bg-cyan-800"],[class~="bg-emerald-700"]){
 background:var(--brand-primary);
 border:1px solid var(--brand-primary);
 border-radius:8px;
 color:#fff;
 box-shadow:0 2px 6px rgba(24,54,66,.13);
}
html[dir] body.brand-workspace :is([class~="bg-cyan-800"],[class~="bg-emerald-700"]):hover{
 background:var(--brand-primary-hover);
 border-color:var(--brand-primary-hover);
 color:#fff;
 box-shadow:0 4px 10px rgba(24,54,66,.17);
}
html[dir] body.brand-workspace button:is([class~="bg-cyan-800"],[class~="bg-emerald-700"]),
html[dir] body.brand-workspace button:is([class~="bg-cyan-800"],[class~="bg-emerald-700"]):hover{
 background:var(--brand-primary) !important;
 border-color:var(--brand-primary) !important;
 color:#fff !important;
}
html[dir] body.brand-workspace button:is([class~="bg-cyan-800"],[class~="bg-emerald-700"]):hover{
 background:var(--brand-primary-hover) !important;
 border-color:var(--brand-primary-hover) !important;
}

/* The support inbox owns its dark surface controls; the workspace utility
   rule must not turn its thread list and composer into white dashboard pills. */
html[dir] body:is(.brand-workspace,.brand-portal) .support-inbox button{
 background:var(--sc-panel) !important;
 border-color:var(--sc-border) !important;
 color:var(--sc-text) !important;
 box-shadow:none !important;
 transform:none;
}
html[dir] body:is(.brand-workspace,.brand-portal) .support-inbox .support-thread{
 background:transparent !important;
 border-color:var(--sc-border) !important;
 color:var(--sc-text) !important;
}
html[dir] body:is(.brand-workspace,.brand-portal) .support-inbox .support-thread:hover{
 background:color-mix(in srgb,var(--sc-accent) 8%,var(--sc-panel)) !important;
}
html[dir] body:is(.brand-workspace,.brand-portal) .support-inbox :is(.support-primary,.support-compose-footer>button){
 background:var(--brand-primary) !important;
 border-color:var(--brand-primary) !important;
 color:#fff !important;
}
html[dir] body:is(.brand-workspace,.brand-portal) .support-inbox :is(.support-primary,.support-compose-footer>button):hover{
 background:var(--brand-primary-hover) !important;
 border-color:var(--brand-primary-hover) !important;
}
html[dir] body:is(.brand-workspace,.brand-portal) .support-inbox :is(.support-back,.support-chat-tools button,.support-pager button){
 background:var(--sc-panel) !important;
 border-color:var(--sc-border) !important;
 color:var(--sc-text) !important;
}

/* Historical studio rules use !important for fleet icons and tab accents. */
html[dir] body.brand-workspace .fleet-actions .icon-button{
 background:var(--brand-soft) !important;
 border-color:#b9c1d2 !important;
 color:var(--brand-primary) !important;
}
html[dir] body.brand-workspace .fleet-actions .icon-button:hover{
 background:#dce1ec !important;
 border-color:#8f9db8 !important;
}
html[dir] body.brand-workspace :is(.device-tabs button.active,.view-switch .active,.account-tabs button.active,.connection-nav button.active){
 background:var(--brand-soft) !important;
 border-color:#b6c1d8 !important;
 color:var(--brand-purple-hover) !important;
 box-shadow:none !important;
}
html[dir] body.brand-workspace :is(.account-tabs button.active,.connection-nav button.active){
 background:var(--brand-primary) !important;
 border-color:var(--brand-primary) !important;
 color:#fff !important;
}

/* Destructive actions retain their warning meaning across the neutral button
   reset used by the workspace. */
html[dir] body:is(.brand-workspace,.brand-portal) :is(button.danger,.button.danger){
 background:#fff4f3 !important;
 border-color:#e5aaa5 !important;
 color:#a44742 !important;
 box-shadow:none !important;
}
html[dir] body:is(.brand-workspace,.brand-portal) :is(button.danger,.button.danger):hover{
 background:#fde4e1 !important;
 border-color:#cc7f78 !important;
 color:#873530 !important;
 transform:none;
}

/* The floating support widget is a dark utility surface inside the light
   workspace; restore its own controls after the global button pass. */
html[dir] body.brand-workspace .support-widget button{
 background:var(--sw-bg) !important;
 border-color:var(--sw-line) !important;
 color:var(--sw-text) !important;
 box-shadow:none !important;
 transform:none;
}
html[dir] body.brand-workspace .support-widget .support-launcher{
 background:var(--brand-primary) !important;
 border-color:var(--brand-primary) !important;
 color:#fff !important;
 box-shadow:0 4px 12px rgba(24,54,66,.2) !important;
}
html[dir] body.brand-workspace .support-widget .support-launcher:hover{
 background:var(--brand-primary-hover) !important;
 border-color:var(--brand-primary-hover) !important;
 color:#fff !important;
}
html[dir] body.brand-workspace .support-widget .support-drawer-close:hover{
 background:#30394c !important;
 border-color:#525d72 !important;
 color:#fff !important;
}
html[dir] body.brand-workspace .support-widget .support-compact :is(.support-primary,.support-compose-footer>button){
 background:var(--brand-primary) !important;
 border-color:var(--brand-primary) !important;
 color:#fff !important;
}
html[dir] body.brand-workspace .support-widget .support-compact :is(.support-primary,.support-compose-footer>button):hover{
 background:var(--brand-primary-hover) !important;
 border-color:var(--brand-primary-hover) !important;
}

/* Payment print action shares the same ink surface even on its standalone
   invoice page, which otherwise has no workspace body class. */
html[dir] body.invoice-page #invoice-print{
 border:1px solid var(--brand-primary);
 border-radius:8px;
 background:var(--brand-primary);
 color:#fff;
 box-shadow:0 2px 6px rgba(24,54,66,.13);
 font:600 13px/1.4 inherit;
 padding:11px 18px;
 cursor:pointer;
 transition:background .16s ease,border-color .16s ease,box-shadow .16s ease,transform .16s ease;
}
html[dir] body.invoice-page #invoice-print:hover{
 background:var(--brand-primary-hover);
 border-color:var(--brand-primary-hover);
 box-shadow:0 4px 10px rgba(24,54,66,.17);
 transform:translateY(-1px);
}
html[dir] body.invoice-page #invoice-print:active{background:var(--brand-primary-active);border-color:var(--brand-primary-active);transform:translateY(0)}

/* Keep the unavailable state above the high-specificity workspace utility
   selector, including buttons generated by the support and fleet widgets. */
html[dir] body:is(.brand-workspace,.brand-portal) :is(button,.button):disabled,
html[dir] body:is(.brand-workspace,.brand-portal) :is(button,.button)[aria-disabled="true"]{
 background:#e6e9ee !important;
 border-color:#d2d7e0 !important;
 color:#848d9e !important;
 box-shadow:none !important;
 cursor:not-allowed;
 transform:none !important;
}
html[dir] body :is(button,.button,.support-primary)[disabled],
html[dir] body :is(button,.button,.support-primary)[aria-disabled="true"]{
 background:#e6e9ee !important;
 border-color:#d2d7e0 !important;
 color:#848d9e !important;
 box-shadow:none !important;
 cursor:not-allowed;
 transform:none !important;
}

/* Edge-audit closure: standalone invoice and tunnel documentation pages use
   the same action palette as the rest of the product.  These selectors stay
   scoped to their page roots so the support inbox can keep its dark controls. */
html[dir] body.invoice-page{
 background:var(--brand-paper);
 color:var(--brand-ink);
}
html[dir] body.invoice-page main{
 border-color:var(--brand-line);
 box-shadow:0 16px 40px rgba(32,39,53,.07);
}
html[dir] body.invoice-page header{border-color:var(--brand-primary)}
html[dir] body.invoice-page header span,
html[dir] body.invoice-page dt,
html[dir] body.invoice-page footer,
html[dir] body.invoice-page .note{color:var(--brand-muted)}
html[dir] body.invoice-page footer,
html[dir] body.invoice-page .note{border-color:var(--brand-line)}
html[dir] body.invoice-page a{color:var(--brand-purple)}
html[dir] body.invoice-page a:hover{color:var(--brand-purple-hover)}
html[dir] body.invoice-page button:not(#invoice-print){
 border:1px solid #cbd1dc;
 border-radius:8px;
 background:#fff;
 color:#303b52;
 box-shadow:none;
}
html[dir] body.invoice-page button:not(#invoice-print):hover{
 background:var(--brand-soft);
 border-color:#9da7bb;
 color:var(--brand-primary);
}


html[dir] body.tunnel-guide{
 background:var(--brand-ink);
 color:#e9ecf2;
}
html[dir] body.tunnel-guide a{color:#a9b7d2}
html[dir] body.tunnel-guide a:hover{color:var(--brand-lime)}
html[dir] body.tunnel-guide :is(code,pre){background:#162035}
html[dir] body.tunnel-guide aside{
 border-inline-start-color:#6f81a4;
 background:#162035;
}
html[dir] body.tunnel-guide p{color:#c3d0e6}
html[dir] body.tunnel-guide .language-switch{
 border:1px solid #404a5d;
 border-radius:8px;
 background:transparent;
 color:#d2d6de;
}
html[dir] body.tunnel-guide .language-switch:hover{
 background:#263147;
 border-color:#6d7c99;
 color:#fff;
}
html[dir] body.tunnel-guide .tunnel-header{
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:18px;
 margin-bottom:42px;
}
html[dir] body.tunnel-guide .tunnel-brand{
 color:#f8fafc;
 font:750 22px/1 Inter,'Segoe UI',sans-serif;
 letter-spacing:-.6px;
 text-decoration:none;
}
html[dir] body.tunnel-guide .tunnel-brand:hover{color:#fff}

/* Tab state is intentionally visible without bringing back the old blue
   underline.  aria-current/aria-pressed mirror the class state for assistive
   technology and for controls rendered by the small client-side widgets. */
html[dir] body.brand-workspace :is(
 .device-tabs button.active,
 .device-tabs button[aria-current="page"],
 .view-switch button.active,
 .view-switch button[aria-pressed="true"]
){
 background:var(--brand-soft) !important;
 border-color:#b6c1d8 !important;
 color:var(--brand-purple-hover) !important;
 box-shadow:none !important;
}
html[dir] body.brand-workspace :is(
 .account-tabs button.active,
 .connection-nav button.active,
 .account-tabs button[aria-selected="true"],
 .connection-nav button[aria-selected="true"]
){
 background:var(--brand-primary) !important;
 border-color:var(--brand-primary) !important;
 color:#fff !important;
 box-shadow:none !important;
}
html[dir] body.brand-workspace :is(
 .device-tabs button,
 .view-switch button,
 .account-tabs button,
 .connection-nav button
):disabled{
 background:#e6e9ee !important;
 border-color:#d2d7e0 !important;
 color:#848d9e !important;
 box-shadow:none !important;
 cursor:not-allowed;
}


html[dir]:root{
 --action-primary:#2563eb;
 --action-primary-hover:#1d4ed8;
 --action-primary-active:#1e40af;
 --action-secondary:#f5f6f8;
 --action-secondary-hover:#e8ebf2;
 --action-border:#c8cfdc;
 --action-text:#27344d;
 --action-accent:#2563eb;
 --action-accent-hover:#1d4ed8;
 --action-accent-soft:#e8ebf2;
 --action-focus:#788db6;
 --action-danger:#a44742;
 --action-danger-hover:#873530;
 --action-danger-soft:#fff4f3;
 --action-danger-border:#e5aaa5;
 --brand-primary:var(--action-primary);
 --brand-primary-hover:var(--action-primary-hover);
 --brand-primary-active:var(--action-primary-active);
 --brand-purple:var(--action-accent);
 --brand-purple-hover:var(--action-accent-hover);
 --brand-lime:#93c5fd;
 --brand-soft:var(--action-accent-soft);
 --brand-line:#d6dae3;
 --purple:var(--action-accent);
 --purple-soft:var(--action-accent-soft);
 --accent:var(--action-accent);
 --accent-soft:var(--action-accent-soft);
}

html[dir] body :is(.button,.primary,.auth-submit){
 border-radius:9px;
 font-weight:650;
 letter-spacing:-.01em;
}
html[dir] body :is(.primary,.auth-submit){
 background:var(--action-primary) !important;
 border:1px solid var(--action-primary) !important;
 color:#fff !important;
 box-shadow:0 2px 8px rgba(24,58,80,.14) !important;
}
html[dir] body :is(.primary,.auth-submit):hover{
 background:var(--action-primary-hover) !important;
 border-color:var(--action-primary-hover) !important;
 box-shadow:0 4px 11px rgba(24,58,80,.18) !important;
 transform:translateY(-1px);
}
html[dir] body :is(.primary,.auth-submit):active{
 background:var(--action-primary-active) !important;
 border-color:var(--action-primary-active) !important;
 box-shadow:0 1px 4px rgba(24,58,80,.16) !important;
 transform:none;
}

/* Public CTA, outline, compact and menu controls share one measured rhythm. */
html[dir] body.public-site :is(.button,.menu-toggle,.language-button){
 border-radius:9px;
 font-weight:650;
}
html[dir] body.public-site .button{
 background:var(--action-primary) !important;
 border:1px solid var(--action-primary) !important;
 color:#fff !important;
 box-shadow:0 2px 8px rgba(24,58,80,.13) !important;
}
html[dir] body.public-site .button:hover{
 background:var(--action-primary-hover) !important;
 border-color:var(--action-primary-hover) !important;
 box-shadow:0 4px 11px rgba(24,58,80,.17) !important;
 transform:translateY(-1px);
}
html[dir] body.public-site .button.outline{
 background:var(--action-secondary) !important;
 border-color:var(--action-border) !important;
 color:var(--action-text) !important;
 box-shadow:none !important;
}
html[dir] body.public-site .button.outline:hover{
 background:var(--action-secondary-hover) !important;
 border-color:#9ea9c0 !important;
 color:var(--action-primary) !important;
 transform:none;
}
html[dir] body.public-site .button.text-button{
 background:transparent !important;
 border-color:transparent !important;
 color:var(--action-accent) !important;
 box-shadow:none !important;
}
html[dir] body.public-site .button.text-button:hover{
 background:transparent !important;
 border-color:transparent !important;
 color:var(--action-accent-hover) !important;
 transform:none;
}
html[dir] body.public-site :is(.menu-toggle,.language-button){
 background:transparent !important;
 border-color:var(--action-border) !important;
 color:var(--action-text) !important;
 box-shadow:none !important;
}
html[dir] body.public-site :is(.menu-toggle,.language-button):hover{
 background:var(--action-secondary-hover) !important;
 border-color:#9ea9c0 !important;
 color:var(--action-primary) !important;
 transform:none;
}

/* Neutral dashboard actions stay readable beside the primary CTA. */
html[dir] body:is(.brand-workspace,.brand-portal) :is(
 button:not(.icon-button):not(.text-button):not(.primary):not(.auth-submit):not(.danger):not(.active):not([aria-selected="true"]):not([aria-current="page"]):not([aria-pressed="true"]):not([class*="support-"]),
 .button:not(.primary):not(.text-button):not(.danger):not(.active):not([aria-selected="true"]):not([aria-current="page"]):not([aria-pressed="true"]):not([class*="support-"])
){
 background:var(--action-secondary) !important;
 border:1px solid var(--action-border) !important;
 color:var(--action-text) !important;
 box-shadow:none !important;
}
html[dir] body:is(.brand-workspace,.brand-portal) :is(
 button:not(.icon-button):not(.text-button):not(.primary):not(.auth-submit):not(.danger):not(.active):not([aria-selected="true"]):not([aria-current="page"]):not([aria-pressed="true"]):not([class*="support-"]),
 .button:not(.primary):not(.text-button):not(.danger):not(.active):not([aria-selected="true"]):not([aria-current="page"]):not([aria-pressed="true"]):not([class*="support-"])
):hover{
 background:var(--action-secondary-hover) !important;
 border-color:#9ea9c0 !important;
 color:var(--action-primary) !important;
 transform:none;
}
html[dir] body:is(.brand-workspace,.brand-portal) .icon-button{
 background:transparent !important;
 border-color:transparent !important;
 color:#637782 !important;
 box-shadow:none !important;
}
html[dir] body:is(.brand-workspace,.brand-portal) .icon-button:hover{
 background:var(--action-secondary-hover) !important;
 border-color:var(--action-border) !important;
 color:var(--action-primary) !important;
 transform:none;
}

html[dir] body.brand-workspace :is(
 .device-tabs button.active,.device-tabs button[aria-current="page"],
 .view-switch button.active,.view-switch button[aria-pressed="true"]
){
 background:var(--action-accent-soft) !important;
 border-color:#b9c2d4 !important;
 color:var(--action-accent-hover) !important;
 box-shadow:none !important;
}
html[dir] body.brand-workspace :is(
 .account-tabs button.active,.connection-nav button.active,
 .account-tabs button[aria-selected="true"],.connection-nav button[aria-selected="true"]
){
 background:var(--action-primary) !important;
 border-color:var(--action-primary) !important;
 color:#fff !important;
 box-shadow:0 2px 7px rgba(24,58,80,.14) !important;
}


html[dir] body.public-site :is(
 .brand-dot,.hero h1>span,.status-dot,.feature-icon,.text-link,
 .faq-list summary>span,.faq-list a,.contact-email,.legal-toc a:hover,
 .footer-column a:hover,.protocol-chip>span,.chip-vpn>span,.route-end
){color:var(--action-accent) !important}
html[dir] body.public-site :is(.plan-highlight,.legal-contact){
 border-color:#b9c2d4 !important;
 background:#f0f2f6 !important;
}
html[dir] body.public-site :is(.feature-icon,.route-icon){
 background:var(--action-accent-soft) !important;
}
html[dir] body.public-site .plan-tag{background:var(--action-accent) !important;color:#fff !important}
html[dir] body.public-site .closing-cta{background:#eaf2ff !important}
html[dir] body.public-site .closing-cta .button{
 background:var(--action-primary) !important;
 border-color:var(--action-primary) !important;
 color:#fff !important;
}
html[dir] body.public-site .network-art{background:#e9ecf1 !important;border-color:#ced3de !important}
html[dir] body.public-site :is(.art-grid,.orbit,.orbit-two){border-color:#b9c0cf}
html[dir] body.public-site .phone-glyph{background:var(--brand-lime) !important}
html[dir] body.public-site .phone-bars i{background:#6c81aa !important}
html[dir] body.public-site .phone-bars i:nth-child(3n){background:var(--brand-lime) !important}

/* Destructive work keeps a clear red meaning and never inherits the neutral
   dashboard reset. */
html[dir] body:is(.brand-workspace,.brand-portal) :is(button.danger,.button.danger){
 background:var(--action-danger-soft) !important;
 border:1px solid var(--action-danger-border) !important;
 color:var(--action-danger) !important;
 box-shadow:none !important;
}
html[dir] body:is(.brand-workspace,.brand-portal) :is(button.danger,.button.danger):hover{
 background:#fde4e1 !important;
 border-color:#cc7f78 !important;
 color:var(--action-danger-hover) !important;
 transform:none;
}

html[dir] body :is(button,.button,.auth-submit):disabled,
html[dir] body :is(button,.button,.auth-submit)[aria-disabled="true"]{
 background:#e6e9ee !important;
 border-color:#d2d7e0 !important;
 color:#848d9e !important;
 box-shadow:none !important;
 cursor:not-allowed;
 transform:none !important;
}

@media (prefers-reduced-motion:reduce){
 html[dir] body :is(button,.button,a){transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* Connection state carries a written label as well as a restrained color. */
html[dir] body:is(.brand-workspace,.brand-portal) .badge.phone_offline{
 background:#f9e8e6;color:#923e35;border:1px solid #e9bbb4;
}
html[dir] body:is(.brand-workspace,.brand-portal) :is(.badge.relay_unavailable,.badge.network_unavailable,.badge.degraded){
 background:#faf0dc;color:#795619;border:1px solid #e5d2aa;
}
.path-checks{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:18px}
.path-check{padding:16px;border:1px solid var(--line,#d9e1e4);border-radius:12px}
.path-check p{margin-block:12px 0;line-height:1.7}
.path-checks>.notice{grid-column:1/-1}
.brand-portal .connection-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:12px;margin-block:18px}
.brand-portal .connection-metrics>div{padding:12px;background:var(--paper,#181d26);color:var(--ink,#edf1f7);border:1px solid var(--line,#303847);border-radius:9px}
.brand-portal .connection-metrics span{display:block;color:var(--muted,#a4afc0);font-size:.8rem;margin-block-end:7px}
.brand-portal .connection-metrics strong{display:block;overflow-wrap:anywhere}